:root{
  --bg:#e7ece4;
  --screen:#eef1ec;
  --card:#ffffff;
  --ink:#15181c;
  --ink-2:#4b5158;
  --muted:#8a9089;
  --line:#e2e6df;
  --amber:#e6b23e;
  --amber-soft:#f7e6bd;
  --danger:#c8536f;
  --cat-1:#3fa89b;
  --cat-2:#7b6fd0;
  --cat-3:#d1698a;
  --cat-4:#4f86c6;
  --cat-5:#8ca94e;
  --cat-6:#d68a4f;
  --shadow:0 8px 30px rgba(30,38,30,0.08);
}
*{box-sizing:border-box;}
html,body{margin:0;}
body{background:var(--screen);font-family:'Inter',sans-serif;color:var(--ink);-webkit-font-smoothing:antialiased;}
.mono{font-family:'IBM Plex Mono',monospace;}
button{font-family:inherit;}
::-webkit-scrollbar{width:9px;height:9px;}
::-webkit-scrollbar-thumb{background:#d3d9cf;border-radius:9px;}

/* ===== login ===== */
.login-wrap{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:24px;}
.login-card{background:var(--card);border-radius:26px;box-shadow:var(--shadow);padding:34px 30px;width:100%;max-width:360px;text-align:center;}
.login-card .mark{font-family:'IBM Plex Mono';font-size:13px;font-weight:600;background:var(--ink);color:#fff;border-radius:9px;padding:6px 10px;letter-spacing:.06em;}
.login-card .logo{width:56px;height:56px;object-fit:contain;border-radius:14px;}
.login-card h1{font-size:26px;font-weight:800;letter-spacing:-0.02em;margin:16px 0 4px;}
.login-card p{color:var(--muted);font-size:13px;margin:0 0 22px;}
.login-card input{width:100%;background:var(--screen);border:1px solid var(--line);border-radius:12px;padding:13px 14px;font-size:15px;margin-bottom:12px;}
.login-card button{width:100%;background:var(--ink);color:#fff;border:none;border-radius:12px;padding:13px;font-weight:800;font-size:15px;cursor:pointer;}
.login-err{color:var(--danger);font-size:12.5px;font-weight:600;min-height:18px;margin-bottom:6px;}

/* ===== app shell ===== */
.app{min-height:100vh;display:grid;grid-template-columns:264px 1fr;}
.sidebar{background:var(--card);border-right:1px solid var(--line);display:flex;flex-direction:column;padding:22px 16px;position:sticky;top:0;height:100vh;}
.brand{display:flex;align-items:center;gap:10px;padding:4px 8px 20px;}
.brand .mark{font-family:'IBM Plex Mono';font-size:13px;font-weight:600;background:var(--ink);color:#fff;border-radius:8px;padding:5px 8px;letter-spacing:.06em;}
.brand .logo{width:34px;height:34px;object-fit:contain;border-radius:8px;flex:none;}
.brand h1{font-size:19px;font-weight:800;margin:0;letter-spacing:-0.02em;}
.navlist{display:flex;flex-direction:column;gap:2px;}
.snav{display:flex;align-items:center;gap:12px;padding:11px 12px;border-radius:12px;border:none;background:transparent;cursor:pointer;color:var(--ink-2);font-weight:700;font-size:14px;text-align:left;width:100%;}
.snav svg{width:20px;height:20px;stroke:var(--muted);fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;flex:0 0 auto;}
.snav:hover{background:#f2f4ef;}
.snav.active{background:var(--ink);color:#fff;}
.snav.active svg{stroke:#fff;}
.sectitle{font-size:10.5px;font-weight:800;letter-spacing:.09em;color:var(--muted);text-transform:uppercase;padding:22px 12px 8px;display:flex;justify-content:space-between;align-items:center;}
.sectitle button{background:none;border:none;color:var(--muted);cursor:pointer;font-size:15px;line-height:1;padding:0 4px;}
.sectitle button:hover{color:var(--ink);}
.catrow{display:flex;align-items:center;gap:10px;padding:8px 12px;border-radius:10px;cursor:pointer;font-size:13.5px;font-weight:600;color:var(--ink-2);}
.catrow:hover{background:#f2f4ef;}
.catrow.active{background:#eef1ea;color:var(--ink);}
.catrow .cdot{width:10px;height:10px;border-radius:50%;flex:0 0 auto;}
.catrow .c{margin-left:auto;font-family:'IBM Plex Mono';font-size:11px;color:var(--muted);}
.side-spacer{flex:1;}
.newbtn{display:flex;align-items:center;justify-content:center;gap:8px;background:var(--amber);color:#2c2205;border:none;border-radius:14px;padding:13px;font-weight:800;font-size:14px;cursor:pointer;margin-bottom:14px;width:100%;}
.userchip{display:flex;align-items:center;gap:10px;padding:6px 8px;}
.avatar{width:38px;height:38px;border-radius:50%;background:linear-gradient(135deg,#cdd7c8,#9fb0a0);display:flex;align-items:center;justify-content:center;font-weight:800;color:#2c342c;flex:0 0 auto;}
.userchip .nm{font-size:13.5px;font-weight:700;}
.userchip .em{font-size:11px;color:var(--muted);cursor:pointer;}
.userchip .em:hover{color:var(--ink);}

.main{min-width:0;display:flex;flex-direction:column;}
.mtopbar{display:none;}
.content{padding:30px 34px 40px;max-width:1240px;width:100%;margin:0 auto;}

.pagehead{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;margin-bottom:6px;flex-wrap:wrap;}
h2.title{font-size:38px;font-weight:800;letter-spacing:-0.03em;margin:0;line-height:1;}
h2.title .sm{font-size:15px;font-weight:700;color:var(--muted);vertical-align:super;}
.subdate{font-size:13px;color:var(--muted);font-weight:600;margin:8px 0 22px;}
.headright{display:flex;gap:10px;align-items:center;}
.search{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:10px 14px;font-size:13px;color:var(--ink);min-width:200px;}

/* cards / tasks */
.card{background:var(--card);border-radius:22px;padding:20px;box-shadow:var(--shadow);}
.task{background:var(--card);border-radius:18px;padding:15px 16px;box-shadow:var(--shadow);margin-bottom:11px;position:relative;}
.task.feature{background:var(--amber);}
.task.feature .tnote{color:#5c4a15;}
.task.done{opacity:.55;}
.task.done .ttitle{text-decoration:line-through;}
.trow{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;}
.ttitle{font-size:15.5px;font-weight:700;letter-spacing:-0.01em;display:flex;align-items:center;gap:8px;cursor:pointer;}
.tnote{font-size:12.5px;color:var(--ink-2);margin-top:5px;line-height:1.35;}
.time{font-size:13px;font-weight:700;text-align:right;line-height:1.1;white-space:nowrap;}
.time span{font-size:10px;color:var(--muted);font-weight:600;display:block;}
.cdot{width:11px;height:11px;border-radius:50%;flex:0 0 auto;}
.circle{width:22px;height:22px;border-radius:50%;border:2px solid var(--muted);flex:0 0 auto;margin-top:1px;cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:12px;color:#fff;}
.circle.filled{background:var(--ink);border-color:var(--ink);}
.tagrow{display:flex;gap:7px;align-items:center;margin-top:12px;flex-wrap:wrap;}
.tag{font-size:10.5px;font-weight:600;padding:4px 9px;border-radius:20px;background:#f0f2ee;color:var(--ink-2);display:flex;align-items:center;gap:5px;}
.tag.urgent{background:#fff;border:1px solid #e6c98a;color:#9a6b12;}
.tag.due{background:#eef1f6;color:#4a5568;}
.tag.due.overdue{background:#fdecea;color:#c0392b;font-weight:700;}
.tag .cdot{width:7px;height:7px;}
.pbadge{font-family:'IBM Plex Mono';font-size:11px;font-weight:600;padding:3px 8px;border-radius:7px;}
.p1{background:var(--amber-soft);color:#8a5f0e;}
.p2{background:#e7ebf1;color:#556;}
.p3{background:#eef0eb;color:#889;}
.progbar{height:6px;border-radius:6px;background:#eceee9;overflow:hidden;margin-top:12px;}
.progbar>i{display:block;height:100%;border-radius:6px;background:var(--ink);}
.task.feature .progbar{background:rgba(0,0,0,0.12);}
.task.feature .progbar>i{background:#3a2f0d;}
.stepline{font-size:11px;color:var(--muted);font-weight:600;margin-top:6px;}
.card-actions{position:absolute;top:12px;right:12px;display:flex;gap:2px;opacity:0;transition:opacity .12s;}
.task:hover .card-actions{opacity:1;}
.iconmini{background:none;border:none;color:var(--muted);cursor:pointer;font-size:13px;padding:2px 4px;line-height:1;}
.iconmini:hover{color:var(--ink);}

.seclabel{display:flex;align-items:center;justify-content:space-between;margin:26px 2px 14px;}
.seclabel h3{font-size:19px;font-weight:800;letter-spacing:-0.02em;margin:0;}
.seclabel h3 .n{font-size:14px;color:var(--muted);font-weight:700;}
.seclabel a{font-size:12px;color:var(--muted);font-weight:700;text-decoration:none;cursor:pointer;}
.empty{color:var(--muted);font-size:13px;padding:8px 2px;}

/* HOME */
.home-grid{display:grid;grid-template-columns:1.5fr 1fr;gap:18px;align-items:start;}
.statrow{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-bottom:18px;}
.mini{background:var(--card);border-radius:18px;padding:16px;box-shadow:var(--shadow);}
.mini .k{font-size:10.5px;color:var(--muted);font-weight:800;text-transform:uppercase;letter-spacing:.05em;}
.mini .v{font-size:30px;font-weight:800;letter-spacing:-0.03em;margin-top:3px;}
.mini .v small{font-size:13px;color:var(--muted);font-weight:700;}
.week{display:flex;justify-content:space-between;margin:2px 0 20px;}
.day{display:flex;flex-direction:column;align-items:center;gap:6px;}
.day .num{width:40px;height:40px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:14px;}
.day .lbl{font-size:10px;color:var(--muted);}
.day.today .num{background:var(--ink);color:#fff;}
.day.today .lbl{color:var(--ink);font-weight:700;}
.mini.clickable{cursor:pointer;transition:box-shadow .12s,transform .12s;}
.mini.clickable:hover{box-shadow:0 6px 18px rgba(30,38,30,0.12);transform:translateY(-1px);}
.catprog{display:flex;flex-direction:column;gap:15px;}
.catprog-top{display:flex;align-items:center;gap:9px;font-size:13.5px;font-weight:700;color:var(--ink-2);margin-bottom:7px;}
.catprog-top .nm{color:var(--ink);}
.catprog-top .ct{margin-left:auto;font-family:'IBM Plex Mono';font-size:11px;font-weight:600;color:var(--muted);}
.catprog-top .pc{font-weight:800;color:var(--ink);min-width:38px;text-align:right;}
.catprog .progbar{height:9px;margin-top:0;}
.herocard{padding:22px;}
.chartwrap{position:relative;margin:4px 0 14px;}
.hero{display:flex;align-items:flex-end;justify-content:space-between;}
.hero .hi{font-size:16px;font-weight:600;color:var(--ink-2);}
.hero .hi b{color:var(--ink);}
.hero .tasks{font-size:12px;color:var(--muted);margin-top:3px;}
.hero .pct{font-size:70px;font-weight:800;letter-spacing:-0.04em;line-height:0.85;}

/* BOARD */
.segment{display:inline-flex;background:#e0e4dc;border-radius:14px;padding:4px;margin-bottom:20px;}
.segment button{border:none;background:transparent;font-weight:700;font-size:13px;color:var(--muted);padding:9px 20px;border-radius:11px;cursor:pointer;}
.segment button.active{background:var(--card);color:var(--ink);box-shadow:0 2px 8px rgba(0,0,0,0.06);}
.board{display:flex;gap:16px;overflow-x:auto;align-items:flex-start;padding-bottom:12px;}
.col{flex:0 0 300px;background:#f4f6f1;border:1px solid var(--line);border-radius:20px;padding:6px;display:flex;flex-direction:column;}
.col.dragover{outline:2px dashed var(--amber);outline-offset:-2px;}
.colhead{display:flex;align-items:center;gap:9px;padding:12px 12px 10px;}
.colhead .cdot{width:11px;height:11px;}
.colhead h4{font-size:14.5px;font-weight:800;margin:0;letter-spacing:-0.01em;}
.colhead .count{margin-left:auto;font-family:'IBM Plex Mono';font-size:11px;color:var(--muted);}
.colbody{padding:6px;display:flex;flex-direction:column;min-height:10px;}
.colbody .task{margin-bottom:10px;box-shadow:0 3px 12px rgba(30,38,30,0.05);cursor:grab;}
.colbody .task:active{cursor:grabbing;}
.task.dragging{opacity:.4;}
.addcol{margin:2px 6px 8px;background:transparent;border:1.5px dashed #cfd6ca;color:var(--muted);border-radius:12px;padding:10px;font-size:12.5px;font-weight:700;cursor:pointer;}
.addcol:hover{border-color:var(--muted);color:var(--ink);}

/* COMPLETED */
.donelist{display:flex;flex-direction:column;gap:10px;}
.donerow{display:flex;align-items:center;gap:14px;background:var(--card);border-radius:16px;padding:14px 16px;box-shadow:var(--shadow);}
.donerow .circle{background:var(--ink);border-color:var(--ink);cursor:default;margin-top:0;}
.donemain{flex:1;min-width:0;}
.donetitle{font-size:15px;font-weight:700;letter-spacing:-0.01em;text-decoration:line-through;color:var(--ink-2);}
.donemeta{display:flex;gap:8px;align-items:center;margin-top:7px;flex-wrap:wrap;}
.donedate{font-size:11px;color:var(--muted);font-weight:600;}
.doneactions{display:flex;gap:8px;flex:none;}
@media(max-width:640px){
  .donerow{flex-wrap:wrap;}
  .doneactions{width:100%;}
  .doneactions .btn{flex:1;}
}

/* MAP */
.maptabs{display:flex;gap:8px;margin-bottom:16px;flex-wrap:wrap;}
.maptabs button{border:1px solid var(--line);background:var(--card);border-radius:20px;padding:8px 15px;font-size:12.5px;font-weight:700;color:var(--muted);cursor:pointer;}
.maptabs button.active{background:var(--ink);color:#fff;border-color:var(--ink);}
.mapcard{max-width:640px;margin:0 auto;}
.mapcard svg{width:100%;height:auto;display:block;}
.map-node{cursor:pointer;}
.maphint{font-size:12px;color:var(--muted);text-align:center;margin-top:12px;font-weight:600;}
#mapOverview{display:flex;flex-direction:column;gap:18px;}
.catmap{margin:0 auto;width:100%;}
.catmap-head{display:flex;align-items:center;gap:9px;padding:2px 4px 10px;font-weight:800;font-size:15px;letter-spacing:-0.01em;}
.catmap-head .cdot{width:11px;height:11px;border-radius:50%;flex:none;}
.catmap-head .ct{margin-left:auto;font-family:'IBM Plex Mono';font-size:12px;font-weight:600;color:var(--muted);background:var(--screen);border:1px solid var(--line);border-radius:20px;padding:2px 10px;}
.mapempty{text-align:center;color:var(--muted);font-size:14px;padding:40px 0;}

/* STATS */
.stats-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:18px;}
.stats-grid .full{grid-column:1 / -1;}
.cardhead{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px;}
.cardhead h3{font-size:15.5px;font-weight:800;margin:0;letter-spacing:-0.01em;}
.cardhead .sub{font-size:11px;color:var(--muted);font-weight:700;}
.legend{display:flex;gap:16px;flex-wrap:wrap;margin-top:14px;}
.legend span{font-size:11.5px;color:var(--ink-2);font-weight:600;display:flex;align-items:center;gap:6px;}
.streak{display:flex;gap:6px;margin-top:6px;}
.streak i{flex:1;height:34px;border-radius:7px;background:#eceee9;}

/* modal */
.overlay{position:fixed;inset:0;background:rgba(20,24,20,0.45);display:flex;align-items:center;justify-content:center;z-index:100;padding:16px;}
.modal{background:var(--card);border-radius:22px;padding:24px;width:100%;max-width:460px;max-height:90vh;overflow-y:auto;box-shadow:0 20px 60px rgba(0,0,0,.25);}
.modal h2{font-size:20px;font-weight:800;letter-spacing:-0.02em;margin:0 0 18px;}
.field{margin-bottom:14px;}
.field label{font-size:11.5px;color:var(--muted);font-weight:800;text-transform:uppercase;letter-spacing:.04em;display:block;margin-bottom:6px;}
.field input[type=text],.field textarea,.field select{width:100%;background:var(--screen);border:1px solid var(--line);border-radius:11px;padding:11px 12px;font-size:14px;font-family:inherit;color:var(--ink);}
.field textarea{resize:vertical;min-height:60px;}
.field input[type=date],.field input[type=time]{width:100%;background:var(--screen);border:1px solid var(--line);border-radius:11px;padding:10px 12px;font-size:14px;font-family:inherit;color:var(--ink);}
.field select:disabled{opacity:.5;}
.fieldhint{font-size:11px;color:var(--muted);margin-top:6px;font-weight:600;}
.row2{display:flex;gap:12px;}
.row2 .field{flex:1;}
.steplist{display:flex;flex-direction:column;gap:7px;margin-bottom:9px;}
.steprow{display:flex;align-items:center;gap:8px;}
.steprow input[type=text]{flex:1;}
.add-step-row{display:flex;gap:8px;}
.add-step-row input{flex:1;}
.swatches{display:flex;gap:8px;margin-top:6px;}
.swatch{width:24px;height:24px;border-radius:50%;cursor:pointer;border:2px solid transparent;}
.swatch.sel{border-color:var(--ink);}
.modal-actions{display:flex;justify-content:space-between;align-items:center;margin-top:20px;}
.modal-actions .right{display:flex;gap:10px;}
.btn{border:none;border-radius:12px;padding:11px 18px;font-weight:800;font-size:14px;cursor:pointer;}
.btn.primary{background:var(--amber);color:#2c2205;}
.btn.ghost{background:var(--screen);color:var(--ink-2);}
.btn.danger{background:none;color:var(--danger);padding-left:0;}
.catmanage-item{border-bottom:1px solid var(--line);padding-bottom:8px;margin-bottom:4px;}
.catmanage-row{display:flex;align-items:center;gap:10px;padding:9px 0;}
.catmanage-row input{flex:1;background:transparent;border:none;font-size:14px;color:var(--ink);font-weight:600;}
.catnote{width:100%;background:var(--screen);border:1px solid var(--line);border-radius:10px;padding:8px 10px;font-size:12.5px;font-family:inherit;color:var(--ink-2);resize:vertical;min-height:34px;margin:2px 0 6px;}

.bottomnav{display:none;}
.view{display:none;}
.view.on{display:block;animation:fade .22s ease;}
@keyframes fade{from{opacity:0;transform:translateY(6px);}to{opacity:1;transform:none;}}
.toast{position:fixed;bottom:24px;left:50%;transform:translateX(-50%);background:var(--ink);color:#fff;padding:11px 18px;border-radius:12px;font-size:13px;font-weight:600;z-index:200;opacity:0;transition:opacity .2s;pointer-events:none;}
.toast.show{opacity:1;}

/* ===== MOBILE ===== */
@media(max-width:899px){
  .app{grid-template-columns:1fr;}
  .sidebar{display:none;}
  .content{padding:8px 18px 120px;}
  .mtopbar{display:flex;align-items:center;justify-content:space-between;padding:18px 18px 6px;position:sticky;top:0;background:var(--screen);z-index:30;}
  .mtopbar .left{display:flex;align-items:center;gap:10px;}
  .mtopbar .rbtn{width:34px;height:34px;border-radius:50%;background:var(--card);border:1px solid var(--line);display:flex;align-items:center;justify-content:center;cursor:pointer;}
  .mtopbar .rbtn.solid{background:var(--ink);color:#fff;border-color:var(--ink);}
  h2.title{font-size:40px;line-height:0.98;}
  .search{display:none;}
  .mobileonly-hide{display:none !important;}
  .home-grid{grid-template-columns:1fr;}
  .statrow{grid-template-columns:repeat(2,1fr);}
  .stats-grid{grid-template-columns:1fr;}
  .hero .pct{font-size:62px;}
  .board{flex-direction:column;overflow:visible;}
  .col{flex:1 1 auto;width:100%;background:transparent;border:none;padding:0;margin-bottom:10px;}
  .colhead{padding:14px 2px 10px;}
  .colbody{padding:0;}
  .colbody .task{cursor:default;}
  .addcol{display:none;}
  .bottomnav{display:flex;position:fixed;bottom:0;left:0;right:0;height:80px;background:rgba(238,241,236,0.94);backdrop-filter:blur(12px);border-top:1px solid var(--line);align-items:center;justify-content:space-around;padding:0 16px 14px;z-index:40;}
  .navbtn{background:none;border:none;display:flex;flex-direction:column;align-items:center;gap:3px;cursor:pointer;color:var(--muted);font-size:9px;font-weight:700;}
  .navbtn svg{width:23px;height:23px;stroke:var(--muted);fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;}
  .navbtn.active{color:var(--ink);}
  .navbtn.active svg{stroke:var(--ink);}
  .navadd{width:54px;height:54px;border-radius:50%;background:var(--ink);display:flex;align-items:center;justify-content:center;margin-top:-18px;box-shadow:0 8px 20px rgba(0,0,0,0.25);cursor:pointer;}
  .navadd svg{stroke:#fff;width:25px;height:25px;}
}
@media(min-width:900px){.mobileonly{display:none !important;}}