:root{
  --bg:#191919; --bg-sidebar:#202020; --surface:#252525; --surface-2:#2f2f2f;
  --border:#3a3a3a; --border-soft:#2c2c2c;
  --text:#e9e9e7; --text-dim:#9b9b9b; --text-faint:#6b6b6b;
  --ok:#8fae8a; --ok-soft:rgba(143,174,138,.14);
  --warn:#c9ab6e; --warn-soft:rgba(201,171,110,.14);
  --danger:#c98a83; --danger-soft:rgba(201,138,131,.14);
  --info:#8ba3bd; --info-soft:rgba(139,163,189,.14);
  --radius:6px; --radius-sm:4px;
  --font-body:-apple-system,BlinkMacSystemFont,"Segoe UI","Helvetica Neue",Helvetica,Arial,sans-serif;
}
*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
body{
  background:var(--bg); color:var(--text); font-family:var(--font-body);
  font-size:15px; line-height:1.5; -webkit-font-smoothing:antialiased;
}
h1,h2,h3{font-weight:700; margin:0;}
a{color:inherit;}
button{font-family:inherit; cursor:pointer;}
input,textarea,select{font-family:inherit; font-size:14px;}

.app{display:flex; min-height:100vh;}

.sidebar{
  width:240px; flex:none; background:var(--bg-sidebar); border-right:1px solid var(--border-soft);
  padding:14px 8px; display:flex; flex-direction:column; gap:16px;
  position:sticky; top:0; height:100vh; overflow-y:auto;
}
.brand{display:flex; align-items:center; gap:8px; padding:4px 10px 8px; font-weight:600; font-size:14px;}
.nav-group{display:flex; flex-direction:column; gap:1px;}
.nav-label{font-size:11px; color:var(--text-faint); text-transform:uppercase; letter-spacing:.04em; padding:10px 10px 4px; font-weight:600;}
.nav-item{
  display:flex; align-items:center; gap:8px; padding:6px 10px; border-radius:var(--radius-sm);
  color:var(--text-dim); text-decoration:none; font-size:14px;
}
.nav-item:hover{background:var(--surface);}
.nav-item.active{background:var(--surface-2); color:var(--text);}
.sidebar-foot{margin-top:auto; padding:8px 10px; font-size:11px; color:var(--text-faint);}
.sidebar-foot a:hover{color:var(--text);}

.main{flex:1; min-width:0; display:flex; flex-direction:column;}
.topbar{
  display:none; align-items:center; gap:12px; padding:12px 16px; border-bottom:1px solid var(--border-soft);
  background:var(--bg-sidebar); position:sticky; top:0; z-index:20;
}
.hamburger{background:none; border:1px solid var(--border); color:var(--text); border-radius:var(--radius-sm); padding:6px 10px;}
.view{padding:48px 64px 80px; max-width:900px; width:100%; margin:0 auto;}
@media (max-width:860px){
  .topbar{display:flex;}
  .sidebar{display:none;}
  .sidebar.open{display:flex; position:fixed; z-index:50; box-shadow:0 0 0 2000px rgba(0,0,0,.5);}
}
@media (max-width:700px){ .view{padding:28px 20px 56px;} }

.crumbs{font-size:13px; color:var(--text-faint); margin-bottom:14px;}
.crumbs a:hover{text-decoration:underline;}

.page-icon{font-size:44px; line-height:1; margin-bottom:10px;}
.page-title{font-size:32px; margin-bottom:4px;}
.page-subtitle{color:var(--text-dim); font-size:15px; margin-bottom:18px;}

.pagelinks{display:flex; flex-direction:column; gap:0; margin:22px 0;}
.pagelink{
  display:flex; align-items:center; gap:10px; padding:6px 4px; border-radius:var(--radius-sm);
  text-decoration:none; color:var(--text); width:100%;
}
.pagelink:hover{background:var(--surface);}
.pagelink .ic{font-size:17px; flex:none;}
.pagelink .lbl{text-decoration:underline; text-decoration-color:var(--border); text-underline-offset:3px; font-size:15px;}
.pagelink:hover .lbl{text-decoration-color:var(--text-dim);}
.pagelink .meta{margin-left:auto; font-size:12px; color:var(--text-faint);}
.divider{border:none; border-top:1px solid var(--border-soft); margin:26px 0;}
.muted-link{font-size:13px; color:var(--text-faint); text-decoration:underline; text-decoration-color:var(--border-soft);}
.muted-link:hover{color:var(--text-dim);}

.doc-h2{font-size:19px; margin:30px 0 4px;}
.doc-h2:first-of-type{margin-top:8px;}
.doc-hint{font-size:12.5px; color:var(--text-faint); margin-bottom:6px;}
.doc-text{
  width:100%; border:none; background:none; color:var(--text); font-family:var(--font-body);
  font-size:15px; line-height:1.65; padding:3px 5px; border-radius:3px; min-height:90px;
}
.doc-text:hover{background:var(--surface);}
.doc-text:focus{outline:none; background:var(--surface-2);}

.checklist-item{display:flex; align-items:center; gap:9px; padding:5px 4px; border-radius:var(--radius-sm);}
.checklist-item:hover{background:var(--surface);}
.checklist-item label{font-size:14.5px; flex:1;}
.check{width:16px; height:16px; accent-color:var(--text-dim); flex:none;}

.field{display:flex; flex-direction:column; gap:5px; margin-bottom:12px;}
.field-label{font-size:11.5px; color:var(--text-faint); text-transform:uppercase; letter-spacing:.03em;}
.field-input,.field-textarea,.field-select{
  background:var(--surface); border:1px solid var(--border); color:var(--text); border-radius:var(--radius-sm);
  padding:7px 9px; width:100%;
}
.field-input:focus,.field-textarea:focus,.field-select:focus{outline:none; border-color:var(--text-faint);}
.field-textarea{min-height:60px; font-family:var(--font-body); line-height:1.5;}
.grid{display:grid; gap:12px;}
.grid-2{grid-template-columns:1fr 1fr;}
.grid-3{grid-template-columns:repeat(3,1fr);}
@media (max-width:700px){ .grid-2,.grid-3{grid-template-columns:1fr;} }

.btn{
  display:inline-flex; align-items:center; gap:6px; padding:7px 13px; border-radius:var(--radius-sm);
  border:1px solid var(--border); background:var(--surface); color:var(--text); font-size:13.5px; font-weight:500;
}
.btn:hover{border-color:var(--text-faint); background:var(--surface-2);}
.btn-primary{background:var(--surface-2); font-weight:600;}
.btn-ghost{background:none; border-color:transparent; color:var(--text-dim);}
.btn-ghost:hover{color:var(--text); background:var(--surface);}
.btn-danger{color:var(--danger);}
.btn-sm{padding:5px 10px; font-size:12.5px;}
.icon-btn{background:none; border:none; color:var(--text-faint); padding:4px 6px; border-radius:4px;}
.icon-btn:hover{color:var(--text); background:var(--surface-2);}

.pill{display:inline-flex; align-items:center; gap:5px; padding:2px 8px; border-radius:99px; font-size:11px; font-weight:500; white-space:nowrap;}
.pill-ok{background:var(--ok-soft); color:var(--ok);}
.pill-warn{background:var(--warn-soft); color:var(--warn);}
.pill-danger{background:var(--danger-soft); color:var(--danger);}
.pill-info{background:var(--info-soft); color:var(--info);}
.pill-neutral{background:var(--surface-2); color:var(--text-dim);}

table{width:100%; border-collapse:collapse; font-size:13.5px;}
th{text-align:left; font-size:11px; color:var(--text-faint); text-transform:uppercase; letter-spacing:.03em; padding:6px 8px; border-bottom:1px solid var(--border);}
td{padding:5px 6px; border-bottom:1px solid var(--border-soft); vertical-align:middle;}
.tbl-wrap{overflow-x:auto;}
.empty{color:var(--text-faint); font-size:13.5px; padding:14px 4px;}
.list-row{display:flex; align-items:center; gap:10px; padding:8px 2px; border-bottom:1px solid var(--border-soft);}
.list-row:last-child{border-bottom:none;}
.list-row-main{flex:1; min-width:0;}
.list-row-title{font-size:13.5px; font-weight:500;}
.list-row-sub{font-size:12px; color:var(--text-faint); margin-top:2px;}

.kanban{display:grid; grid-template-columns:repeat(5,minmax(190px,1fr)); gap:10px; overflow-x:auto; padding-bottom:8px;}
@media (max-width:900px){ .kanban{grid-auto-flow:column; grid-auto-columns:78vw; grid-template-columns:none;} }
.kcol-head{font-size:11px; text-transform:uppercase; letter-spacing:.03em; color:var(--text-dim); margin-bottom:8px; display:flex; justify-content:space-between;}
.kcol{background:var(--surface); border:1px solid var(--border-soft); border-radius:var(--radius); padding:8px; min-height:70px;}
.kcard{background:var(--surface-2); border:1px solid var(--border); border-radius:var(--radius-sm); padding:9px 10px; margin-bottom:7px;}
.kcard-top{display:flex; justify-content:space-between; gap:6px; font-size:10.5px; color:var(--text-faint); margin-bottom:5px;}
.kcard-title{font-size:12.5px; font-weight:600; margin-bottom:2px;}
.kcard-tag{font-size:10.5px; color:var(--text-dim); margin-bottom:6px;}
.kcard form{margin-top:6px;}
.add-card-btn{width:100%; background:none; border:1px dashed var(--border); color:var(--text-faint); border-radius:var(--radius-sm); padding:7px; font-size:12px;}
.add-card-btn:hover{color:var(--text); border-color:var(--text-faint);}

.fileslot{padding:14px 4px; border-bottom:1px solid var(--border-soft);}
.fileslot-head{display:flex; align-items:center; gap:10px; margin-bottom:6px;}
.fileslot-icon{font-size:17px;}
.fileslot-title{font-weight:600; font-size:15px;}
.fileslot-body{margin-left:27px; display:flex; align-items:center; gap:8px; flex-wrap:wrap;}
.fileslot-name{font-size:13.5px;}

.login-wrap{min-height:100vh; display:flex; align-items:center; justify-content:center; background:var(--bg);}
.login-card{background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); padding:32px 30px; width:100%; max-width:340px;}
.login-error{background:var(--danger-soft); color:var(--danger); padding:8px 12px; border-radius:var(--radius-sm); font-size:13px; margin-bottom:14px;}