@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@400;500;600;700;800;900&display=swap');
:root{--ink:#353c53;--muted:#798195;--line:#e1e8ed;--blue:#5ea9dc;--blue-dark:#428fca;--blue-pale:#e6f2f9;--snow:#f5f7f8;--paper:#fff;--green:#50a96d;--shadow:0 5px 18px rgba(54,75,91,.09);font-family:Nunito,Arial,sans-serif;color:var(--ink);background:var(--snow);font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased}*{box-sizing:border-box}html{min-width:320px;scroll-behavior:smooth}body{margin:0;min-width:320px;min-height:100vh;background:#eff1f2;font-size:15px}button,input,textarea{font:inherit}button{cursor:pointer}button:focus-visible,input:focus-visible,textarea:focus-visible{outline:3px solid #a9d7f2;outline-offset:2px}a{color:inherit;text-decoration:none}[hidden]{display:none!important}#app{min-height:100vh}.site-banner{height:188px;position:relative;overflow:hidden;background:#dcecf5;border-bottom:4px solid #b9d8e9}.banner-scene{position:absolute;inset:0;width:100%;height:100%;image-rendering:pixelated}.banner-inner{position:relative;z-index:1;width:min(1240px,calc(100% - 48px));height:100%;margin:auto;display:flex;align-items:center;justify-content:space-between;gap:28px}.habcove-logo{display:block;width:min(340px,27vw);height:auto;object-fit:contain;filter:drop-shadow(0 2px 0 rgba(54,66,84,.09))}.banner-label{padding:8px 12px;border:2px solid rgba(255,255,255,.72);border-radius:6px;background:rgba(255,255,255,.28);color:#53637a;font-size:12px;font-weight:900;letter-spacing:.12em}.app-banner-inner{align-items:center}.logo-link{flex:0 0 auto;display:flex;align-items:center}.main-nav{display:flex;align-items:center;gap:8px;margin-left:auto}.nav-tab{border:0;border-radius:5px;padding:12px 16px;color:#465169;background:rgba(255,255,255,.25);font-size:14px;font-weight:900;letter-spacing:.08em;transition:background .15s,color .15s,transform .15s}.nav-tab:hover{background:rgba(255,255,255,.65);transform:translateY(-1px)}.nav-tab.active{background:#fff;color:#398bc5;box-shadow:0 2px 0 #97c5df}.banner-actions{position:relative;display:flex;align-items:center;gap:10px}.button{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:42px;border:0;border-radius:7px;padding:0 16px;font-size:13px;font-weight:900;letter-spacing:.035em;transition:background .15s,transform .15s,box-shadow .15s}.button:hover{transform:translateY(-1px)}.button-primary{background:var(--blue);color:#fff;box-shadow:0 3px 0 #408dc3}.button-primary:hover{background:var(--blue-dark)}.button-secondary{background:#e8f3f9;color:#397fae;border:1px solid #c4dfef}.button-light{background:#fff;color:#566178;border:1px solid #dce4e9}.button-light:hover{background:#f6fbfe}.notification-button{min-height:38px;padding:0 12px;font-size:10px;white-space:nowrap}.notification-button.enabled{background:#e8f6ec;border-color:#bedfc8;color:#397c4c}.notification-dot,.pixel-status{width:8px;height:8px;display:inline-block;background:#a9b4c1;border-radius:1px;box-shadow:2px 0 #a9b4c1,-2px 0 #a9b4c1,0 2px #a9b4c1,0 -2px #a9b4c1}.notification-button.enabled .notification-dot{background:#51a86b;box-shadow:2px 0 #51a86b,-2px 0 #51a86b,0 2px #51a86b,0 -2px #51a86b}.profile-chip{display:flex;align-items:center;gap:7px;min-height:38px;padding:3px 7px;border:1px solid rgba(255,255,255,.8);border-radius:7px;background:rgba(255,255,255,.58);color:var(--ink);font-size:12px;font-weight:800}.avatar{display:inline-grid;place-items:center;width:34px;height:34px;flex:0 0 auto;border:2px solid #fff;border-radius:5px;background:#6ab3cf;color:#fff;font-size:15px;font-weight:900;box-shadow:inset 0 -4px 0 rgba(31,58,74,.12)}.avatar-small{width:27px;height:27px;font-size:12px}.avatar-a{background:#55aabb}.avatar-b{background:#6694cb}.avatar-c{background:#58a975}.avatar-d{background:#bf8caa}.avatar-e{background:#bd9a56}.profile-menu{position:absolute;right:0;top:46px;z-index:5;min-width:150px;padding:8px;border:1px solid var(--line);border-radius:8px;background:#fff;box-shadow:var(--shadow)}.profile-menu>span{display:block;padding:5px 8px;color:var(--muted);font-size:12px}.profile-menu button{width:100%;border:0;border-radius:5px;padding:9px 8px;background:#f2f6f8;color:var(--ink);text-align:left;font-weight:800}.app-main{width:min(1120px,calc(100% - 36px));margin:24px auto 48px}.welcome-strip{display:flex;align-items:center;justify-content:space-between;gap:20px;margin:0 0 24px;padding:18px 22px;border:1px solid #dae5eb;border-radius:9px;background:#fff;box-shadow:var(--shadow)}.eyebrow{margin:0 0 5px;color:#579bc6;font-size:10px;font-weight:900;letter-spacing:.12em}.welcome-strip h1,.section-heading h2{margin:0;color:#384056;font-size:26px;line-height:1.2;font-weight:900}.welcome-copy{margin:5px 0 0;color:var(--muted);font-size:13px}.welcome-badge{display:inline-flex;align-items:center;gap:11px;padding:9px 12px;border:1px solid #dce8ee;border-radius:6px;background:#f7fbfd;color:#617085;font-size:11px;font-weight:800;white-space:nowrap}.welcome-badge .pixel-status{background:#55a76d;box-shadow:2px 0 #55a76d,-2px 0 #55a76d,0 2px #55a76d,0 -2px #55a76d}.page-section{padding:21px 22px 26px;border:1px solid #dfe6ea;border-radius:9px;background:#f7f8f9;box-shadow:var(--shadow)}.section-heading{display:flex;align-items:center;justify-content:space-between;gap:15px;padding:0 0 17px;border-bottom:1px solid #e2e8ec}.section-heading h2{font-size:24px}.section-heading .button{min-height:40px}.filter-row{display:flex;align-items:center;gap:6px;padding:14px 0 13px}.filter-tab{display:inline-flex;align-items:center;gap:9px;min-height:32px;padding:0 11px;border:1px solid transparent;border-radius:5px;background:transparent;color:#687388;font-size:12px;font-weight:800}.filter-tab span{display:inline-grid;place-items:center;min-width:20px;height:20px;padding:0 5px;border-radius:4px;background:#e6eaed;color:#667185;font-size:10px}.filter-tab.active{border-color:#c8e1f0;background:#e5f2f9;color:#337dab}.filter-tab.active span{background:#fff;color:#4389b6}.post-list{display:grid;gap:11px}.post-card{padding:16px 18px 13px;border:1px solid #e0e6ea;border-radius:8px;background:#fff;box-shadow:0 2px 5px rgba(55,73,87,.035)}.post-topline{display:flex;align-items:center;gap:9px}.post-author{display:flex;flex-direction:column;gap:1px}.post-author strong{color:#40485e;font-size:12px;font-weight:900}.post-author small,.post-meta time{color:#8992a1;font-size:10px}.post-category{margin-left:auto;padding:4px 7px;border:1px solid #d7e7f0;border-radius:4px;background:#f0f7fa;color:#5684a0;font-size:9px;font-weight:900;letter-spacing:.06em;text-transform:uppercase}.post-title{margin:13px 0 5px;color:#343d52;font-size:18px;font-weight:900;line-height:1.35}.post-body{margin:0;color:#5f687b;font-size:13px;line-height:1.65;white-space:pre-wrap;overflow-wrap:anywhere}.post-bottom{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:12px;padding-top:10px;border-top:1px solid #edf0f2}.post-meta{display:flex;align-items:center;gap:12px}.reply-button,.post-status-button{display:inline-flex;align-items:center;gap:6px;min-height:29px;padding:0 9px;border:1px solid #dfe7eb;border-radius:5px;background:#f7f9fa;color:#637083;font-size:10px;font-weight:900}.reply-button:hover{background:#eaf4f9}.post-status-button{border-color:#c8e2cf;background:#eef8f0;color:#397e4d}.post-status-button.done{border-color:#d5dfe4;background:#eef2f4;color:#708090}.status-pill{display:inline-flex;align-items:center;gap:5px;color:#9a6f36;font-size:9px;font-weight:900;letter-spacing:.07em}.status-pill i{width:6px;height:6px;border-radius:50%;background:#eab55b}.status-pill.done{color:#59826a}.status-pill.done i{background:#69ae7d}.post-thread{margin:13px 0 0;padding:13px 0 0;border-top:1px dashed #dbe3e7}.reply-list{display:grid;gap:10px}.reply{display:flex;align-items:flex-start;gap:9px}.reply-copy{flex:1;min-width:0;padding:8px 10px;border-radius:6px;background:#f3f7f9}.reply-copy header{display:flex;align-items:center;gap:8px}.reply-copy strong{font-size:11px}.reply-copy time{color:#9199a7;font-size:9px}.reply-copy p{margin:4px 0 0;color:#5c6679;font-size:12px;line-height:1.5;white-space:pre-wrap;overflow-wrap:anywhere}.no-replies{margin:0 0 8px;color:#8992a0;font-size:11px}.reply-form{display:flex;align-items:flex-end;gap:8px;margin-top:11px}.reply-form textarea{flex:1;min-height:42px;max-height:120px;resize:vertical;padding:10px;border:1px solid #d8e2e7;border-radius:6px;background:#fff;color:var(--ink);font-size:12px}.reply-form button{min-height:38px;padding:0 12px;border:0;border-radius:5px;background:#dceef8;color:#357ea9;font-size:11px;font-weight:900}.empty-state{padding:38px 15px;text-align:center}.empty-pixels{display:inline-grid;place-items:center;width:38px;height:38px;margin-bottom:8px;border:1px solid #d5e6ef;border-radius:6px;background:#eaf4f9;color:#5796bc;font-size:22px}.empty-state h3{margin:0 0 4px;color:#414a60;font-size:17px;font-weight:900}.empty-state p{margin:0 auto 14px;color:#7b8494;font-size:12px}.section-intro{margin:14px 0;color:#748092;font-size:13px}.projects-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:11px}.project-card{display:flex;align-items:flex-start;gap:12px;width:100%;padding:15px;border:1px solid #dfe6ea;border-radius:7px;background:#fff;color:var(--ink);text-align:left;box-shadow:0 2px 5px rgba(55,73,87,.035);transition:border-color .15s,transform .15s}.project-card:hover{transform:translateY(-1px);border-color:#9bc9e0}.project-icon{display:grid;place-items:center;width:34px;height:34px;flex:0 0 auto;border:1px solid #d5e8f2;border-radius:5px;background:#e8f4fa;color:#4f9ac5;font-size:17px}.project-card-copy{flex:1;min-width:0}.project-card h3{margin:0 0 4px;color:#384158;font-size:15px;font-weight:900}.project-card p{margin:0;color:#737e90;font-size:11px;line-height:1.5}.project-card small{display:block;margin-top:9px;color:#929aa7;font-size:10px}.project-card-arrow{color:#66a5cc;font-size:19px}.project-detail{margin-top:17px;padding:17px;border:1px solid #dae3e9;border-radius:8px;background:#fff}.text-button{border:0;padding:0;background:none;color:#4388b2;font-size:12px;font-weight:900}.project-detail-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin:17px 0}.project-detail-head h3{margin:0;color:#364056;font-size:22px;font-weight:900}.project-description{margin:6px 0;color:#687386;font-size:13px;line-height:1.5;white-space:pre-wrap}.muted{color:#8c95a3;font-size:10px}.project-stamp{padding:7px 9px;border:2px solid #acd1e5;border-radius:4px;color:#5c9ac0;font-size:8px;font-weight:900;line-height:1.25;letter-spacing:.1em;transform:rotate(3deg)}.project-notes-label{display:block;margin:14px 0 6px;color:#4a556b;font-size:12px;font-weight:900}.project-notes{display:block;width:100%;min-height:145px;resize:vertical;padding:12px;border:1px solid #d7e2e8;border-radius:6px;background:#fbfcfd;color:#3c465a;font-size:13px;line-height:1.6}.project-actions{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:8px}.site-footer{display:flex;align-items:center;justify-content:center;gap:12px;padding:16px 18px 25px;color:#798494;font-size:10px}.site-footer img{width:84px;height:auto;opacity:.72}.site-footer span:last-child{color:#8fa0aa;font-size:9px;font-weight:900;letter-spacing:.1em}.auth-main{width:min(500px,calc(100% - 32px));margin:28px auto 55px}.auth-card{padding:22px 24px 19px;border:1px solid #dce5e9;border-radius:9px;background:#fff;box-shadow:var(--shadow)}.auth-card h1{margin:0;color:#384056;font-size:24px;font-weight:900}.auth-intro{margin:6px 0 17px;color:#7c8695;font-size:12px;line-height:1.5}.auth-tabs{display:grid;grid-template-columns:1fr 1fr;gap:4px;margin-bottom:12px;padding:4px;border-radius:6px;background:#f0f4f6}.auth-tab{min-height:34px;border:0;border-radius:4px;background:transparent;color:#737e8c;font-size:12px;font-weight:900}.auth-tab.active{background:#fff;color:#438fbd;box-shadow:0 1px 4px rgba(49,74,90,.12)}.auth-form label,.app-dialog label{display:grid;gap:5px;margin-top:11px;color:#525e72;font-size:11px;font-weight:900}.auth-form input,.app-dialog input,.app-dialog textarea{width:100%;min-height:39px;padding:9px 10px;border:1px solid #d8e2e7;border-radius:5px;background:#fff;color:#374257;font-size:13px}.auth-form input::placeholder,.app-dialog input::placeholder,.app-dialog textarea::placeholder,.project-notes::placeholder{color:#a0a8b3}.button-wide{width:100%;margin-top:16px}.auth-footnote{margin:14px 0 0;color:#91a0ac;text-align:center;font-size:9px;font-weight:900;letter-spacing:.12em}.form-message{min-height:0;margin:7px 0 0;color:#ba4b4b;font-size:11px}.form-message:empty{display:none}.app-dialog{width:min(510px,calc(100% - 24px));max-height:calc(100% - 24px);padding:0;border:1px solid #d3e0e7;border-radius:9px;background:#fff;color:var(--ink);box-shadow:0 18px 70px rgba(33,48,62,.25)}.app-dialog::backdrop{background:rgba(35,48,63,.43);backdrop-filter:blur(2px)}.app-dialog form{padding:20px}.dialog-head{display:flex;align-items:flex-start;justify-content:space-between;gap:10px;margin-bottom:14px;padding-bottom:11px;border-bottom:1px solid #e4eaed}.dialog-head h2{margin:0;color:#394258;font-size:21px;font-weight:900}.dialog-close{width:30px;height:30px;border:1px solid #e0e7eb;border-radius:5px;background:#f5f8f9;color:#667284;font-size:21px;line-height:1}.app-dialog textarea{min-height:100px;resize:vertical}.dialog-actions{display:flex;justify-content:flex-end;gap:8px;margin-top:15px}.toast{position:fixed;right:18px;bottom:18px;z-index:20;max-width:min(400px,calc(100vw - 36px));padding:11px 14px;border:1px solid #cadce5;border-radius:6px;background:#fff;color:#465368;font-size:12px;font-weight:800;box-shadow:var(--shadow);opacity:0;pointer-events:none;transform:translateY(8px);transition:.2s}.toast.show{opacity:1;transform:translateY(0)}
@media(max-width:760px){.site-banner{height:auto;min-height:154px}.banner-inner{width:calc(100% - 24px);min-height:154px;gap:9px;flex-wrap:wrap;padding:12px 0}.habcove-logo{width:min(260px,54vw)}.banner-label{font-size:9px;padding:6px 8px}.app-banner-inner{align-content:center}.logo-link{width:100%;justify-content:center}.main-nav{order:2;margin:0 auto}.banner-actions{position:absolute;right:0;top:12px;gap:5px}.notification-button{width:35px;min-width:35px;padding:0;justify-content:center}.notification-button>span:last-child{display:none}.profile-chip{min-height:35px;padding:3px}.profile-chip #profile-name{display:none}.profile-chip>span:last-child{display:none}.nav-tab{padding:9px 13px;font-size:12px}.app-main{width:calc(100% - 20px);margin:13px auto 28px}.welcome-strip{align-items:flex-start;margin-bottom:13px;padding:13px}.welcome-strip h1{font-size:21px}.welcome-copy{max-width:240px;font-size:11px}.welcome-badge{gap:8px;padding:7px 8px;font-size:9px}.page-section{padding:14px 12px 18px}.section-heading{align-items:center;padding-bottom:12px}.section-heading h2{font-size:21px}.section-heading .button{min-height:36px;padding:0 10px;font-size:10px}.filter-row{gap:2px;padding:11px 0}.filter-tab{gap:5px;min-height:30px;padding:0 7px;font-size:10px}.filter-tab span{min-width:17px;height:17px;font-size:9px}.post-card{padding:12px 11px 10px}.post-title{font-size:15px;margin-top:10px}.post-body{font-size:12px}.post-bottom{margin-top:10px;padding-top:8px}.post-status-button,.reply-button{min-height:28px;padding:0 7px;font-size:9px}.post-meta{gap:7px}.status-pill{font-size:8px}.projects-list{grid-template-columns:1fr}.project-detail{padding:12px}.project-detail-head h3{font-size:19px}.site-footer{flex-wrap:wrap;gap:8px;font-size:9px}.site-footer img{width:66px}.auth-main{margin:16px auto 28px}.auth-card{padding:17px 15px}.auth-card h1{font-size:21px}}
@media(max-width:420px){.welcome-badge{font-size:8px;padding:6px}.welcome-strip h1{font-size:19px}.filter-tab{padding:0 5px;font-size:9px}.post-meta{gap:5px}.status-pill{letter-spacing:0}.project-actions{align-items:flex-start;flex-direction:column}.project-actions .button{align-self:flex-end}}
.post-title-toggle{display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%;margin:13px 0 0;padding:0;border:0;background:transparent;color:#343d52;text-align:left;font:inherit;font-size:18px;font-weight:900;line-height:1.35;cursor:pointer}.post-title-toggle::after{content:'+';display:grid;place-items:center;width:24px;height:24px;flex:0 0 auto;border:1px solid #d1e4ef;border-radius:5px;background:#f0f7fa;color:#478ab3;font-size:17px;line-height:1}.post-title-toggle[aria-expanded="true"]::after{content:'−'}.post-title-toggle:focus-visible{border-radius:4px;outline:3px solid #a9d7f2;outline-offset:4px}@media(max-width:760px){.post-title-toggle{margin-top:10px;font-size:15px}}
.post-card.collapsed{padding:8px 16px}.post-card.collapsed .post-title-toggle{margin:0}
.online-panel{margin:0 0 14px;padding:14px 18px;border:1px solid #dae5eb;border-radius:9px;background:#fff;box-shadow:var(--shadow)}.online-panel-heading{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:10px}.online-panel-heading .eyebrow{margin-bottom:3px}.online-panel-heading h2{margin:0;color:#384056;font-size:16px;font-weight:900}.online-counter{display:inline-flex;align-items:center;gap:6px;color:#6e798b;font-size:11px;font-weight:800}.online-counter strong{color:#465168}.online-counter i{width:8px;height:8px;border-radius:50%;background:#54ad70;box-shadow:0 0 0 3px #e5f4e9}.online-users{display:flex;align-items:center;gap:9px;min-height:54px;overflow-x:auto;padding:2px 1px 4px}.online-user{display:flex;align-items:center;gap:8px;flex:0 0 auto;min-height:52px;padding:5px 11px 5px 5px;border:1px solid #e0e8ec;border-radius:8px;background:#f9fbfc}.online-avatar{display:grid;place-items:center;width:42px;height:42px;flex:0 0 auto;overflow:hidden;border:2px solid #fff;border-radius:50%;background:#dcecf5;box-shadow:0 0 0 1px #d9e5eb}.online-avatar img{display:block;width:100%;height:100%;object-fit:contain;image-rendering:pixelated}.online-avatar .avatar{width:100%;height:100%;border:0;border-radius:50%;box-shadow:none}.online-name{color:#414b61;font-size:12px;font-weight:900;white-space:nowrap}.online-empty{padding:7px 10px;color:#8993a1;font-size:11px}@media(max-width:760px){.online-panel{margin-bottom:12px;padding:11px 12px}.online-panel-heading h2{font-size:14px}.online-users{gap:7px}.online-user{min-height:46px;padding:4px 9px 4px 4px}.online-avatar{width:36px;height:36px}.online-name{font-size:11px}}
