:root{
    --bg:#0f1117; --panel:#171a23; --panel-2:#1e2230; --border:#2a2f3f;
    --text:#e6e8ef; --muted:#9aa1b4; --faint:#6b7280;
    --accent:#6d8bff; --accent-2:#8b5cf6;
    --belum:#f59e0b; --proses:#38bdf8; --pending:#a855f7; --selesai:#22c55e;
    --urgent:#ef4444; --shadow:0 6px 24px rgba(0,0,0,.35);
    --r:14px;
  }
  *{box-sizing:border-box}
  html,body{margin:0;padding:0}
  body{
    font-family:'Segoe UI',system-ui,-apple-system,Roboto,Arial,sans-serif;
    background:radial-gradient(1200px 600px at 80% -10%,#1a1f33 0%,var(--bg) 55%);
    color:var(--text); min-height:100vh; -webkit-font-smoothing:antialiased;
  }
  a{color:inherit}
  .wrap{max-width:1180px;margin:0 auto;padding:22px 18px 80px}

  /* Header */
  header.top{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-bottom:18px}
  .brand{display:flex;align-items:center;gap:12px}
  .logo{width:44px;height:44px;border-radius:12px;background:linear-gradient(135deg,var(--accent),var(--accent-2));
        display:grid;place-items:center;font-size:22px;box-shadow:var(--shadow)}
  .brand h1{font-size:19px;margin:0;font-weight:700;letter-spacing:.2px}
  .brand p{margin:2px 0 0;font-size:12.5px;color:var(--muted)}
  .today{font-size:13px;color:var(--muted);text-align:right}
  .today b{color:var(--text);display:block;font-size:14px}
  .head-right{display:flex;align-items:center;gap:14px}
  .sync-badge{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:600;cursor:pointer;
              border:1px solid var(--border);background:var(--panel);border-radius:20px;padding:6px 12px;transition:.15s;white-space:nowrap}
  .sync-badge:hover{border-color:var(--accent)}
  .sync-badge.ok{color:#86efac}
  .sync-badge.saving{color:#fcd34d}
  .sync-badge.offline{color:#fca5a5;border-color:rgba(239,68,68,.4)}
  .sync-badge.login{color:#d8b4fe}
  .login-modal{max-width:400px}
  @media(max-width:560px){ .today{display:none} .head-right{gap:0} }

  /* Stats */
  .stats{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:18px}
  .stat{background:var(--panel);border:1px solid var(--border);border-radius:var(--r);padding:14px 16px}
  .stat .n{font-size:26px;font-weight:700;line-height:1}
  .stat .l{font-size:12px;color:var(--muted);margin-top:6px;display:flex;align-items:center;gap:6px}
  .dot{width:9px;height:9px;border-radius:50%;display:inline-block}

  /* Tabs */
  .tabs{display:flex;gap:6px;background:var(--panel);border:1px solid var(--border);
        padding:6px;border-radius:var(--r);margin-bottom:18px;width:fit-content;flex-wrap:wrap}
  .tab{border:0;background:transparent;color:var(--muted);padding:9px 16px;border-radius:9px;
       cursor:pointer;font-size:13.5px;font-weight:600;transition:.15s;display:flex;align-items:center;gap:7px}
  .tab:hover{color:var(--text)}
  .tab.active{background:linear-gradient(135deg,var(--accent),var(--accent-2));color:#fff;box-shadow:var(--shadow)}
  .tab .badge{background:rgba(255,255,255,.18);border-radius:20px;font-size:11px;padding:1px 7px;font-weight:700}

  /* Toolbar */
  .toolbar{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-bottom:16px}
  .btn{border:0;cursor:pointer;font-weight:600;font-size:13.5px;border-radius:10px;padding:10px 16px;transition:.15s;
       display:inline-flex;align-items:center;gap:7px}
  .btn-primary{background:linear-gradient(135deg,var(--accent),var(--accent-2));color:#fff;box-shadow:var(--shadow)}
  .btn-primary:hover{filter:brightness(1.08)}
  .btn-ghost{background:var(--panel-2);color:var(--text);border:1px solid var(--border)}
  .btn-ghost:hover{border-color:var(--accent)}
  input,select,textarea{
    background:var(--panel-2);border:1px solid var(--border);color:var(--text);
    border-radius:10px;padding:9px 12px;font-size:13.5px;font-family:inherit;outline:none;transition:.15s;
  }
  input:focus,select:focus,textarea:focus{border-color:var(--accent)}
  .search{flex:1;min-width:180px}
  select.filter{min-width:120px}

  /* Kanban */
  .board{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
  .col{background:var(--panel);border:1px solid var(--border);border-radius:var(--r);padding:12px;min-height:200px}
  .col.drag-over{border-color:var(--accent);background:var(--panel-2)}
  .col-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px;padding:2px 4px}
  .col-head .title{display:flex;align-items:center;gap:8px;font-weight:700;font-size:14px}
  .col-head .count{background:var(--panel-2);border:1px solid var(--border);border-radius:20px;padding:1px 9px;font-size:12px;color:var(--muted)}

  /* Card */
  .card{background:var(--panel-2);border:1px solid var(--border);border-radius:12px;padding:12px 13px;margin-bottom:10px;
        cursor:grab;transition:.15s;position:relative;border-left:3px solid var(--border);
        display:flex;flex-direction:column;min-height:152px}
  .card:hover{border-color:var(--accent);transform:translateY(-1px)}
  .card.urgent{border-left-color:var(--urgent)}
  .card .c-top{display:flex;justify-content:space-between;align-items:flex-start;gap:8px}
  .card .c-top h4{flex:1;min-width:0}
  .card h4{margin:0;font-size:14px;font-weight:600;line-height:1.35;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .card.done h4{text-decoration:line-through;color:var(--muted)}
  .card .note{font-size:12.5px;color:var(--muted);margin:7px 0 0;line-height:1.4;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .chips{display:flex;gap:6px;flex-wrap:nowrap;overflow:hidden;margin-top:10px;min-height:23px}
  .chip{font-size:11px;padding:3px 9px;border-radius:20px;font-weight:600;display:inline-flex;align-items:center;gap:5px;white-space:nowrap;flex:0 0 auto}
  .chip.cat{background:rgba(139,92,246,.16);color:#c4b5fd}
  .chip.urgent{background:rgba(239,68,68,.16);color:#fca5a5}
  .chip.date{background:var(--panel);border:1px solid var(--border);color:var(--muted)}
  .chip.date.over{background:rgba(239,68,68,.16);color:#fca5a5;border-color:transparent}
  .chip.date.today{background:rgba(245,158,11,.16);color:#fcd34d;border-color:transparent}
  .card .actions{display:flex;gap:6px;margin-top:11px;flex-wrap:wrap}
  .mini{border:1px solid var(--border);background:var(--panel);color:var(--muted);border-radius:8px;
        padding:5px 9px;font-size:11.5px;cursor:pointer;font-weight:600;transition:.15s;display:inline-flex;align-items:center;gap:4px}
  .mini:hover{color:var(--text);border-color:var(--accent)}
  .mini.danger:hover{border-color:var(--urgent);color:#fca5a5}
  .grip{color:var(--faint);font-size:14px}

  /* List / table */
  .table-wrap{background:var(--panel);border:1px solid var(--border);border-radius:var(--r);overflow:hidden}
  table{width:100%;border-collapse:collapse;font-size:13.5px}
  th,td{text-align:left;padding:12px 14px;border-bottom:1px solid var(--border)}
  th{color:var(--muted);font-weight:600;font-size:12px;text-transform:uppercase;letter-spacing:.5px;background:var(--panel-2)}
  tbody tr:hover{background:var(--panel-2)}
  tbody tr:last-child td{border-bottom:0}
  td.title-cell b{font-weight:600}
  td.title-cell small{display:block;color:var(--muted);font-weight:400;margin-top:3px;font-size:12px}
  .status-pill{font-size:11.5px;padding:4px 11px;border-radius:20px;font-weight:600;white-space:nowrap;border:1px solid transparent}
  .st-belum{background:rgba(245,158,11,.14);color:#fcd34d}
  .st-proses{background:rgba(56,189,248,.14);color:#7dd3fc}
  .st-pending{background:rgba(168,85,247,.16);color:#d8b4fe}
  .st-selesai{background:rgba(34,197,94,.14);color:#86efac}
  td select{padding:6px 8px;font-size:12.5px}

  /* Rutin */
  .rutin-head{background:var(--panel);border:1px solid var(--border);border-radius:var(--r);padding:16px 18px;margin-bottom:16px;
              display:flex;justify-content:space-between;align-items:center;gap:14px;flex-wrap:wrap}
  .rutin-head p{margin:0;font-size:13px;color:var(--muted)}
  .rutin-head h3{margin:0 0 4px;font-size:16px}
  .progress-ring{font-size:13px;color:var(--muted)}
  .rlist{display:grid;gap:10px}
  .ritem{background:var(--panel);border:1px solid var(--border);border-radius:12px;padding:13px 15px;
         display:flex;align-items:center;gap:13px;transition:.15s}
  .ritem:hover{border-color:var(--accent)}
  .ritem.checked{opacity:.62}
  .check{width:24px;height:24px;border-radius:7px;border:2px solid var(--faint);cursor:pointer;flex-shrink:0;
         display:grid;place-items:center;transition:.15s;font-size:14px;color:transparent}
  .check.on{background:var(--selesai);border-color:var(--selesai);color:#04210f}
  .ritem .r-body{flex:1;min-width:0}
  .ritem .r-body b{font-size:14px;font-weight:600}
  .ritem.checked .r-body b{text-decoration:line-through;color:var(--muted)}
  .ritem .r-body small{display:block;color:var(--muted);font-size:12px;margin-top:2px}
  .streak{font-size:11.5px;color:#fcd34d;background:rgba(245,158,11,.14);padding:3px 9px;border-radius:20px;font-weight:600}

  /* Empty */
  .empty{text-align:center;color:var(--faint);padding:30px 10px;font-size:13px}
  .empty-big{background:var(--panel);border:1px dashed var(--border);border-radius:var(--r);padding:48px 20px;text-align:center}
  .empty-big .ic{font-size:38px;margin-bottom:10px}
  .empty-big p{color:var(--muted);margin:6px 0 0}

  /* Modal */
  .overlay{position:fixed;inset:0;background:rgba(5,7,12,.66);backdrop-filter:blur(3px);display:none;
           align-items:center;justify-content:center;padding:18px;z-index:50}
  .overlay.show{display:flex}
  .modal{background:var(--panel);border:1px solid var(--border);border-radius:16px;width:100%;max-width:480px;
         box-shadow:var(--shadow);max-height:92vh;overflow:auto}
  .modal-head{padding:18px 20px;border-bottom:1px solid var(--border);display:flex;justify-content:space-between;align-items:center}
  .modal-head h3{margin:0;font-size:16px}
  .modal-body{padding:18px 20px;display:grid;gap:14px}
  .field label{display:block;font-size:12.5px;color:var(--muted);margin-bottom:6px;font-weight:600}
  .field input,.field select,.field textarea{width:100%}
  .field textarea{resize:vertical;min-height:66px}
  .row2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
  .seg{display:flex;gap:8px}
  .seg button{flex:1;border:1px solid var(--border);background:var(--panel-2);color:var(--muted);
              border-radius:9px;padding:9px;cursor:pointer;font-weight:600;font-size:13px;transition:.15s}
  .seg button.sel{color:#fff}
  .seg button[data-v="belum"].sel{background:rgba(245,158,11,.22);border-color:var(--belum);color:#fcd34d}
  .seg button[data-v="proses"].sel{background:rgba(56,189,248,.22);border-color:var(--proses);color:#7dd3fc}
  .seg button[data-v="pending"].sel{background:rgba(168,85,247,.22);border-color:var(--pending);color:#d8b4fe}
  .seg button[data-v="selesai"].sel{background:rgba(34,197,94,.22);border-color:var(--selesai);color:#86efac}
  .seg{flex-wrap:wrap}
  .seg button{min-width:calc(50% - 4px)}
  .switch{display:flex;align-items:center;gap:10px;cursor:pointer;user-select:none}
  .switch .track{width:44px;height:25px;border-radius:20px;background:var(--panel-2);border:1px solid var(--border);position:relative;transition:.15s}
  .switch .knob{position:absolute;top:2px;left:2px;width:19px;height:19px;border-radius:50%;background:var(--faint);transition:.15s}
  .switch.on .track{background:rgba(239,68,68,.3);border-color:var(--urgent)}
  .switch.on .knob{left:21px;background:var(--urgent)}
  .modal-foot{padding:16px 20px;border-top:1px solid var(--border);display:flex;gap:10px;justify-content:flex-end}
  .x{background:transparent;border:0;color:var(--muted);font-size:22px;cursor:pointer;line-height:1}
  .x:hover{color:var(--text)}

  .hint{font-size:11.5px;color:var(--faint);margin-top:14px;text-align:center}
  @media(max-width:1080px){ .board{grid-template-columns:repeat(2,1fr)} }
  @media(max-width:820px){
    .stats{grid-template-columns:repeat(2,1fr)}
    .board{grid-template-columns:1fr}
    .today{display:none}
    th.hide-m,td.hide-m{display:none}
  }

  /* Chat / riwayat detail */
  .detail-title{font-size:15px;font-weight:700;line-height:1.35;margin:0}
  .detail-sub{font-size:12px;color:var(--muted);margin-top:5px;display:flex;gap:6px;flex-wrap:wrap;align-items:center}
  .chatbox{padding:16px 18px;display:flex;flex-direction:column;gap:12px;max-height:46vh;overflow:auto;background:var(--bg)}
  .log-day{align-self:center;font-size:10.5px;color:var(--faint);background:var(--panel-2);border:1px solid var(--border);
           padding:2px 10px;border-radius:20px;margin:2px 0}
  .bubble{align-self:flex-start;max-width:88%;background:var(--panel-2);border:1px solid var(--border);
          border-radius:12px;border-top-left-radius:3px;padding:9px 12px}
  .bubble .txt{font-size:13.5px;line-height:1.45;white-space:pre-wrap;word-break:break-word}
  .bubble .meta{font-size:10.5px;color:var(--faint);margin-top:5px;display:flex;justify-content:space-between;gap:10px;align-items:center}
  .bubble .del{cursor:pointer;color:var(--faint);opacity:0;transition:.15s}
  .bubble:hover .del{opacity:1}
  .bubble .del:hover{color:#fca5a5}
  .sys{align-self:center;max-width:92%;text-align:center;font-size:11.5px;color:var(--muted);
       background:transparent;display:flex;align-items:center;gap:7px}
  .sys .ic{width:22px;height:22px;border-radius:50%;background:var(--panel-2);border:1px solid var(--border);
           display:grid;place-items:center;font-size:11px;flex-shrink:0}
  .sys time{color:var(--faint);font-size:10.5px}
  .chat-empty{align-self:center;color:var(--faint);font-size:12.5px;text-align:center;padding:18px}
  .composer{padding:12px 16px;border-top:1px solid var(--border);display:flex;gap:9px;align-items:flex-end;background:var(--panel)}
  .composer textarea{flex:1;resize:none;min-height:42px;max-height:120px;width:100%}
  .composer .send{align-self:stretch;padding:0 16px;border-radius:10px;border:0;cursor:pointer;font-weight:700;
                  background:linear-gradient(135deg,var(--accent),var(--accent-2));color:#fff}
  .chatbtn{position:relative}
  .chatbtn .n{background:var(--accent);color:#fff;border-radius:20px;font-size:10px;padding:0 5px;margin-left:3px;font-weight:700}
  .modal.wide{max-width:540px}
  .detail-status{display:flex;gap:6px;flex-wrap:wrap;padding:12px 18px 0}
  .dstat{font-size:12px;padding:6px 12px;border-radius:9px;border:1px solid var(--border);background:var(--panel-2);
         color:var(--muted);cursor:pointer;font-weight:600;transition:.15s}
  .dstat:hover{color:var(--text);border-color:var(--accent)}
  .dstat.on{color:#fff}
  .dstat.on[data-v="belum"]{background:rgba(245,158,11,.22);border-color:var(--belum);color:#fcd34d}
  .dstat.on[data-v="proses"]{background:rgba(56,189,248,.22);border-color:var(--proses);color:#7dd3fc}
  .dstat.on[data-v="pending"]{background:rgba(168,85,247,.22);border-color:var(--pending);color:#d8b4fe}
  .dstat.on[data-v="selesai"]{background:rgba(34,197,94,.22);border-color:var(--selesai);color:#86efac}

  /* Kartu bisa diklik + tombol hapus */
  .card{cursor:pointer;padding-right:34px}
  .card-x{position:absolute;top:8px;right:8px;width:24px;height:24px;border-radius:7px;border:1px solid var(--border);
          background:var(--panel);color:var(--faint);font-size:15px;line-height:1;cursor:pointer;display:grid;place-items:center;
          transition:.15s;z-index:2;padding:0}
  .card-x:hover{border-color:var(--urgent);color:#fca5a5;background:rgba(239,68,68,.12)}
  .chip.note{background:rgba(109,139,255,.16);color:#b7c4ff}
  .card .hint-edit{font-size:10.5px;color:var(--faint);margin-top:9px}
  .card-created{font-size:10.5px;color:var(--faint);margin-top:auto;padding-top:8px;border-top:1px dashed var(--border)}
  td.title-cell{cursor:pointer}
  td.title-cell:hover b{color:var(--accent)}

  /* Layout modal edit 2 kolom */
  .modal.wide{max-width:780px}
  /* Mode edit: popup besar ~80% layar, tinggi tetap agar chat scroll di dalam */
  .modal.wide.editing{width:80vw;max-width:80vw;height:80vh;max-height:80vh;
                      display:flex;flex-direction:column;overflow:hidden}
  .modal.wide.editing .modal-body{flex:1;min-height:0;overflow:hidden}
  .modal.wide.editing .edit-grid{height:100%;min-height:0;align-items:stretch}
  .modal.wide.editing .edit-left{overflow:auto;padding-right:4px}
  .edit-grid{display:flex;gap:18px;align-items:stretch}
  .edit-left{flex:1;min-width:0;min-height:0;display:flex;flex-direction:column;gap:14px}
  .edit-right{flex:1;min-width:0;min-height:0;display:none;flex-direction:column}
  .edit-left .field{margin:0}
  #fCreated{cursor:not-allowed;opacity:.75;color:var(--muted)}

  /* Checklist / sub-tugas */
  .sub-count{font-size:11px;color:var(--faint);font-weight:600;margin-left:4px}
  .sub-list{display:flex;flex-direction:column;gap:6px;margin-bottom:8px}
  .sub-item{display:flex;align-items:center;gap:9px;background:var(--panel-2);border:1px solid var(--border);
            border-radius:9px;padding:7px 10px}
  .sub-check{width:20px;height:20px;border-radius:6px;border:2px solid var(--faint);cursor:pointer;flex-shrink:0;
             display:grid;place-items:center;font-size:12px;color:transparent;transition:.15s}
  .sub-check.on{background:var(--selesai);border-color:var(--selesai);color:#04210f}
  .sub-text{flex:1;min-width:0;font-size:13px;word-break:break-word}
  .sub-item.done .sub-text{text-decoration:line-through;color:var(--muted)}
  .sub-del{border:0;background:transparent;color:var(--faint);cursor:pointer;font-size:17px;line-height:1;padding:0 2px}
  .sub-del:hover{color:#fca5a5}
  .sub-add{display:flex;gap:7px}
  .sub-add input{flex:1}
  .sub-addbtn{border:1px solid var(--border);background:var(--panel-2);color:var(--text);border-radius:9px;
              padding:0 14px;font-size:17px;font-weight:700;cursor:pointer;transition:.15s}
  .sub-addbtn:hover{border-color:var(--accent);color:var(--accent)}
  .chip.sub{background:rgba(34,197,94,.14);color:#86efac}
  .chip.sub.alldone{background:rgba(34,197,94,.24);color:#bbf7d0}

  /* Daily: sub-tugas inline */
  .ritem-wrap{background:var(--panel);border:1px solid var(--border);border-radius:12px;overflow:hidden;transition:.15s}
  .ritem-wrap:hover{border-color:var(--accent)}
  .ritem-wrap .ritem{background:transparent;border:0;border-radius:0;cursor:pointer;position:relative;padding-right:40px}
  .ritem-x{top:10px;right:10px}
  .check.auto{cursor:default;opacity:.9}
  .check.auto:not(.on){border-style:dashed}
  .r-progress{color:#86efac !important}
  .r-subs{padding:4px 15px 12px 52px;display:flex;flex-direction:column;gap:7px;border-top:1px dashed var(--border)}
  .r-sub{display:flex;align-items:center;gap:10px;font-size:13.5px;cursor:pointer;border-radius:7px;padding:2px 4px;margin-left:-4px}
  .r-sub:hover{background:var(--panel-2)}
  .r-sub .sub-check{width:19px;height:19px;font-size:11px}
  .r-sub.done span{text-decoration:line-through;color:var(--muted)}

  /* Kotak riwayat di dalam modal edit — selalu scroll vertikal */
  .hist-label{display:block;font-size:12.5px;color:var(--muted);margin-bottom:6px;font-weight:600;flex:0 0 auto}
  .hist-box{border:1px solid var(--border);border-radius:10px;background:var(--bg);overflow-y:auto;flex:1 1 0;min-height:160px;
            padding:12px;display:flex;flex-direction:column;gap:10px}
  .hist-composer{display:flex;gap:8px;align-items:flex-end;margin-top:9px;flex:0 0 auto}
  .hist-composer textarea{flex:1;resize:none;min-height:40px;max-height:110px}
  .hist-composer .send{padding:0 15px;align-self:stretch;border-radius:10px;border:0;cursor:pointer;font-weight:700;
                       background:linear-gradient(135deg,var(--accent),var(--accent-2));color:#fff}
  .bubble{max-width:100%}
  .bubble .txt{overflow-wrap:anywhere}
  @media(max-width:680px){
    .modal.wide.editing{width:95vw;max-width:95vw;height:88vh;max-height:88vh}
    .modal.wide.editing .modal-body{overflow:auto}
    .modal.wide.editing .edit-grid{height:auto}
    .edit-grid{flex-direction:column}
    .hist-box{min-height:200px}
  }