/* NotaKris — office app layout */
.app{display:grid;grid-template-columns:250px 1fr;min-height:100vh}
.side{background:linear-gradient(180deg,#4f2f48,#3b2236);color:#e9dde6;padding:18px 12px;display:flex;flex-direction:column;gap:2px;position:sticky;top:0;height:100vh;overflow:auto}
.side .brand{padding:4px 8px 14px}
.side .brand img{width:168px;display:block}
.side .brand small{display:block;font-size:11px;color:#c3a9bb;margin-top:4px;padding-left:2px}
.side .sec{font-size:10.5px;text-transform:uppercase;letter-spacing:1px;color:#b59aae;padding:14px 10px 5px}
.nav{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:8px;color:#e9dde6;background:none;border:0;text-align:left;font-size:13.5px;width:100%;text-decoration:none}
.nav:hover{background:rgba(255,255,255,.08);color:#fff}
.nav.on{background:#fff;color:var(--plum-d);font-weight:600}
.nav svg{width:17px;height:17px;flex:none}
.nav .cnt{margin-left:auto;background:var(--red);color:#fff;font-size:10.5px;padding:1px 7px;border-radius:99px;font-weight:700}
.nav .soon{margin-left:auto;font-size:9.5px;font-weight:800;color:#d8c4d2;border:1px solid #7a5a72;border-radius:99px;padding:0 6px}
.nav.on .soon{color:var(--plum);border-color:#d9c9d3}
.side .me{margin-top:auto;padding:12px 8px 4px;border-top:1px solid rgba(255,255,255,.12);display:flex;gap:10px;align-items:center;font-size:12px}
.side .me b{display:block;color:#fff;font-size:12.5px}

.main{min-width:0;display:flex;flex-direction:column}
.topbar{display:flex;align-items:center;gap:10px;padding:12px 26px;border-bottom:1px solid var(--line);background:rgba(245,243,239,.9);backdrop-filter:blur(6px);position:sticky;top:0;z-index:20}
.topbar .crumb{font-weight:700}
.sync{display:flex;align-items:center;gap:6px;font-size:12px;color:var(--muted);padding:5px 10px;border-radius:99px;background:#fff;border:1px solid var(--line)}
.sync .dot{color:var(--green)}
.sync.busy .dot{color:var(--amber)}
.badge-n{position:absolute;top:0;right:0;background:var(--red);color:#fff;font-size:9.5px;font-weight:800;border-radius:99px;padding:0 5px;min-width:16px;text-align:center}
.content{padding:22px 26px 60px;min-width:0}
.page-h{display:flex;align-items:flex-end;gap:14px;margin-bottom:18px;flex-wrap:wrap}
.page-h .sub{color:var(--muted);font-size:13px;margin-top:2px}
.page-h .actions{margin-left:auto;display:flex;gap:8px;flex-wrap:wrap}
.refresh-banner{background:var(--gold-soft);border:1px solid #e7d3a8;color:#6b4d12;border-radius:10px;padding:8px 12px;margin-bottom:14px;display:flex;align-items:center;gap:10px;font-size:13px}

/* full-screen states (setup, login, loading) */
.screen{min-height:100vh;display:grid;place-items:center;padding:30px 16px;background:radial-gradient(circle at 15% 0%,#f6ecd6,transparent 45%),radial-gradient(circle at 100% 100%,#efe2ec,transparent 40%),var(--bg)}
.screen .box{width:min(980px,100%)}
.screen .logo{display:block;width:260px;margin:0 auto 6px}
.choice{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:24px}
.choice .card{cursor:pointer;transition:transform .12s,border-color .12s}
.choice .card:hover{transform:translateY(-2px);border-color:var(--plum)}
.choice .big{font-size:30px}
.users-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:12px;margin-top:18px}
.user-card{background:#fff;border:1px solid var(--line);border-radius:14px;padding:16px;text-align:center;cursor:pointer}
.user-card:hover{border-color:var(--plum)}
.user-card .avatar{width:52px;height:52px;font-size:18px;margin:0 auto 10px}
.pinpad{display:grid;grid-template-columns:repeat(3,64px);gap:10px;justify-content:center;margin-top:14px}
.pinpad button{height:52px;border-radius:12px;border:1px solid var(--line);background:#fff;font-size:18px;font-weight:700}
.pinpad button:hover{background:var(--plum-soft)}
.pindots{display:flex;gap:10px;justify-content:center;margin-top:14px}
.pindots i{width:13px;height:13px;border-radius:50%;border:2px solid var(--plum);display:block}
.pindots i.on{background:var(--plum)}

/* phase placeholder */
.phase{max-width:640px;margin:40px auto;text-align:center}
.phase .ic{width:56px;height:56px;border-radius:16px;margin:0 auto 14px;background:var(--plum-soft);color:var(--plum)}
.phase .ic svg{width:26px;height:26px}

/* dashboard */
.deadline .ic{font-size:11px}
.sql-box{font-family:ui-monospace,Menlo,Consolas,monospace;font-size:12.5px;min-height:70px}

@media (max-width:900px){.app{grid-template-columns:1fr}.side{position:static;height:auto}.content{padding:16px}.topbar{padding:10px 16px}.choice{grid-template-columns:1fr}}