:root{
  --bg:#080809; --bg2:#0d0d0f; --card:#121214; --card2:#1a1a1e;
  --line:#2a2228; --txt:#f2eef0; --muted:#9a8f96; --dim:#6a626a;
  /* alias: dipakai halaman dashboard/bisnis (dulu tak terdefinisi → di light mode
     bordernya hilang & permukaannya jadi salah). Mengacu ke var tema agar ikut
     mode gelap/terang otomatis. */
  --border:var(--line); --bg-alt:var(--card2); --fg:var(--txt); --fg-subtle:var(--muted);
  --acc:#ff2b3b; --acc2:#d8101f; --acc-deep:#9c0a16;
  --acc-rgb:255,43,59;
  --glow:rgba(var(--acc-rgb),.55); --glow-soft:rgba(var(--acc-rgb),.22);
  --green:#3fb950; --red:#ff3b46; --amber:#e0a317; --radius:12px;
  --cyan:#2dd4cf; --blue:#3b82f6; --info:#00d9ff;
}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--txt);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  font-size:14px;line-height:1.5}
a{color:var(--acc);text-decoration:none}
a:hover{text-decoration:underline;text-shadow:0 0 8px var(--glow-soft)}
h2{font-size:15px;margin:0;font-weight:600}
h3{font-size:14px;margin:0}
code,.mono{font-family:"SF Mono",Menlo,Consolas,monospace;font-size:12px}

/* ---------- Layout ---------- */
.layout{display:flex;min-height:100vh}
.sidebar{width:210px;background:linear-gradient(180deg,var(--bg2),var(--bg2));
  border-right:1px solid var(--line);display:flex;flex-direction:column;position:sticky;top:0;height:100vh}
.brand{display:flex;align-items:center;gap:8px;padding:18px 18px 14px;font-weight:800;font-size:16px;letter-spacing:1px}
.brand-dot{width:10px;height:10px;border-radius:50%;background:var(--acc);
  box-shadow:0 0 14px var(--glow),0 0 4px var(--acc);animation:pulse 2.4s infinite}
@keyframes pulse{0%,100%{box-shadow:0 0 14px var(--glow),0 0 4px var(--acc)}50%{box-shadow:0 0 22px var(--glow),0 0 8px var(--acc)}}
.nav{flex:1;padding:6px 10px;display:flex;flex-direction:column;gap:2px;overflow-y:auto;scrollbar-width:none}
.nav::-webkit-scrollbar{display:none}
.nav-item{display:flex;align-items:center;gap:10px;padding:9px 12px;border-radius:8px;color:var(--muted);font-weight:500;border-left:2px solid transparent}
.nav-item:hover{background:var(--card2);color:var(--txt);text-decoration:none}
.nav-item.is-active{background:linear-gradient(90deg,rgba(var(--acc-rgb),.14),transparent);
  color:var(--txt);border-left-color:var(--acc)}
.nav-item.is-active .nav-icon{color:var(--acc);text-shadow:0 0 10px var(--glow)}
.nav-icon{width:18px;text-align:center;opacity:.9}
.sidebar-foot{padding:14px 18px;border-top:1px solid var(--line)}
.foot-owner{font-weight:600}.foot-sub{color:var(--dim);font-size:12px}

.main{flex:1;min-width:0;display:flex;flex-direction:column}
.topbar{display:flex;align-items:center;justify-content:space-between;
  padding:14px 24px;border-bottom:1px solid var(--line);background:var(--bg2)}
.topbar-title{font-weight:600;font-size:16px}
.topbar-right{display:flex;align-items:center;gap:14px;color:var(--muted)}
.clock{font-variant-numeric:tabular-nums}
.who{color:var(--txt);font-weight:500}
.content{padding:24px;max-width:1200px;width:100%;min-width:0}

/* ---------- DB update banner ---------- */
.dbbar{display:flex;align-items:center;justify-content:space-between;gap:14px;
  background:linear-gradient(90deg,rgba(var(--acc-rgb),.16),rgba(var(--acc-rgb),.06));
  border:1px solid rgba(var(--acc-rgb),.4);border-radius:10px;padding:11px 16px;margin-bottom:18px;
  box-shadow:0 0 18px rgba(var(--acc-rgb),.12)}
.dbbar span{font-size:13px;color:#ffd2d5}
.btn-dbbar{background:var(--acc2);color:#fff;border:none;border-radius:8px;padding:8px 16px;
  font-weight:700;cursor:pointer;font-size:13px;box-shadow:0 0 14px var(--glow-soft)}
.btn-dbbar:hover{background:var(--acc);box-shadow:0 0 20px var(--glow)}

/* ---------- KPI ---------- */
.kpi-row{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-bottom:18px}
.kpi{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:16px 18px;position:relative;overflow:hidden}
.kpi::before{content:"";position:absolute;top:0;left:0;width:3px;height:100%;background:var(--acc);box-shadow:0 0 12px var(--glow);opacity:.7}
.kpi-num{font-size:26px;font-weight:700}
.kpi-num.kpi-money{font-size:20px}
.kpi-green{color:var(--green)}.kpi-red{color:var(--red)}
.kpi-label{color:var(--muted);font-size:12px;margin-top:4px}

/* ---------- Cards ---------- */
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:18px;margin-bottom:18px}
.card-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px}
.card-link{font-size:12px;color:var(--muted)}
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.grid-2 .card{margin-bottom:0}

/* ---------- Tables ---------- */
.tbl{width:100%;border-collapse:collapse}
.tbl td,.tbl th{padding:8px 6px;border-bottom:1px solid var(--line);text-align:left;vertical-align:top}
.tbl th{color:var(--muted);font-weight:500;font-size:12px;text-transform:uppercase;letter-spacing:.4px}
.tbl-full td,.tbl-full th{padding:10px 8px}
.tbl tr:last-child td{border-bottom:none}
.row-done{opacity:.45}
.ta-right{text-align:right}.ta-center{text-align:center}.nowrap{white-space:nowrap}
.muted{color:var(--muted)}.small{font-size:12px}.dim{color:var(--dim)}

/* ---------- Badges / tags / chips ---------- */
.badge{display:inline-block;padding:2px 8px;border-radius:20px;font-size:11px;font-weight:600;white-space:nowrap}
.badge-green{background:rgba(63,185,80,.15);color:var(--green)}
.badge-red{background:rgba(255,59,70,.16);color:var(--red)}
.badge-amber{background:rgba(224,163,23,.18);color:var(--amber)}
.badge-dim{background:var(--card2);color:var(--muted)}
.tag{display:inline-block;background:var(--card2);color:var(--muted);padding:1px 8px;border-radius:6px;font-size:11px}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{background:var(--card2);padding:5px 11px;border-radius:8px;font-size:13px;border:1px solid var(--line)}
.chip a{color:var(--txt)}
.chip-arsip{opacity:.5}

/* ---------- Timeline ---------- */
.timeline{list-style:none;margin:0;padding:0}
.timeline li{display:flex;flex-wrap:wrap;align-items:center;gap:10px;padding:9px 0;border-bottom:1px solid var(--line)}
.timeline li:last-child{border-bottom:none}
.tl-date{color:var(--acc);font-size:12px;font-weight:600;min-width:120px;font-variant-numeric:tabular-nums}
.tl-title{font-weight:500;flex:1}
.tl-loc{color:var(--muted);font-size:12px}
.tl-actions{display:flex;gap:6px}
.timeline-dim li{opacity:.55}

/* ---------- App cards ---------- */
.app-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:14px}
.app-card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:16px}
.app-card-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px}
.app-desc{color:var(--muted);font-size:13px;margin:6px 0}
.app-meta{margin:8px 0 0;font-size:12px}
.app-meta div{display:flex;gap:8px;padding:2px 0}
.app-meta dt{color:var(--dim);min-width:54px}
.app-meta dd{margin:0;color:var(--muted)}
.app-arsip{opacity:.55}

/* ---------- Notes ---------- */
.note-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:14px}
.note{background:var(--card2);border:1px solid var(--line);border-radius:10px;padding:14px;display:flex;flex-direction:column}
.note-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px;gap:8px}
.note-body{font-size:13px;color:var(--muted);flex:1}
.note-foot{display:flex;justify-content:space-between;align-items:center;margin-top:10px}

/* ---------- Forms ---------- */
input,select,textarea{background:var(--bg2);border:1px solid var(--line);color:var(--txt);
  border-radius:8px;padding:9px 11px;font-size:13px;font-family:inherit;outline:none}
input:focus,select:focus,textarea:focus{border-color:var(--acc);box-shadow:0 0 0 2px var(--glow-soft)}
textarea{width:100%;resize:vertical}
.form-inline{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.form-inline input,.form-inline select{flex:1;min-width:120px}
.form-stack{display:flex;flex-direction:column;gap:10px}
.form-stack label{font-size:12px;color:var(--muted);margin-bottom:-4px}
.inline{display:inline}
.search-mini{min-width:160px}

.btn-primary{background:var(--acc2);color:#fff;border:none;border-radius:8px;padding:9px 16px;font-weight:700;cursor:pointer;font-size:13px;box-shadow:0 0 14px var(--glow-soft)}
.btn-primary:hover{background:var(--acc);box-shadow:0 0 22px var(--glow)}
.btn-ghost{color:var(--muted);padding:6px 10px;border-radius:6px}
.btn-ghost:hover{background:var(--card2);text-decoration:none;color:var(--acc)}
.btn-mini{background:var(--card2);border:1px solid var(--line);color:var(--txt);border-radius:6px;padding:4px 10px;font-size:12px;cursor:pointer}
.btn-mini:hover{border-color:var(--acc);box-shadow:0 0 10px var(--glow-soft)}
.btn-danger{color:var(--red)}.btn-danger:hover{border-color:var(--red)}

/* ---------- Flash ---------- */
.flash{padding:10px 14px;border-radius:8px;margin-bottom:16px;font-size:13px}
.flash-ok{background:rgba(63,185,80,.12);color:var(--green);border:1px solid rgba(63,185,80,.3)}
.flash-err{background:rgba(255,59,70,.12);color:var(--red);border:1px solid rgba(255,59,70,.3)}

/* ---------- Login ---------- */
.login-body{display:flex;align-items:center;justify-content:center;min-height:100vh;
  background:transparent}
.login-card{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:34px;width:340px;
  box-shadow:0 0 40px rgba(var(--acc-rgb),.1)}
.login-brand{display:flex;align-items:center;gap:8px;font-size:22px;font-weight:800;letter-spacing:1.5px}
.login-sub{color:var(--muted);margin:6px 0 20px;font-size:13px}
.login-form{display:flex;flex-direction:column;gap:6px}
.login-form label{font-size:12px;color:var(--muted);margin-top:8px}
.login-form .btn-primary{margin-top:18px}

/* ---------- Deploy / updater ---------- */
.drop{border:2px dashed var(--line);border-radius:12px;padding:28px;text-align:center;color:var(--muted);transition:.2s}
.drop:hover{border-color:var(--acc);color:var(--txt)}
.deploy-log{font-family:"SF Mono",Menlo,Consolas,monospace;font-size:12px;background:var(--bg2);border:1px solid var(--line);border-radius:10px;padding:14px;max-height:420px;overflow:auto}
.deploy-log .lg{display:flex;gap:10px;padding:2px 0}
.lg-tag{min-width:64px;font-weight:700}
.lg-BARU{color:var(--green)}.lg-TIMPA{color:var(--amber)}.lg-SKIP{color:var(--dim)}
.lg-OK{color:var(--green)}.lg-GAGAL,.lg-TOLAK,.lg-ERROR{color:var(--red)}

/* ---------- Chat full page ---------- */
.chat-page{display:flex;flex-direction:column}
.chat-full{background:var(--bg2);border:1px solid var(--line);border-radius:10px;padding:14px;
  min-height:340px;max-height:55vh;overflow-y:auto;display:flex;flex-direction:column;gap:10px;margin:8px 0}
.msg{max-width:78%;padding:9px 13px;border-radius:12px;font-size:13px;white-space:pre-wrap;overflow-wrap:anywhere;display:flex;flex-direction:column;position:relative}
.msg-user{align-self:flex-end;background:var(--acc2);color:#fff;border-bottom-right-radius:3px;box-shadow:0 0 14px var(--glow-soft)}
.msg-user::before{content:none;display:none}
.msg-assistant{align-self:flex-start;background:var(--card2);border:1px solid var(--line);border-bottom-left-radius:3px}
.msg-assistant::before{content:'';display:block;width:32px;height:32px;background:url('../img/avatar-anon.png') no-repeat center/contain;margin-bottom:6px;align-self:flex-start;border-radius:50%;filter:drop-shadow(0 0 8px rgba(255,43,59,.3))}
.chat-input-row{display:flex;gap:8px}
.chat-input-row input{flex:1}

/* ---------- Jarvis floating dock (FIXED close) ---------- */
.jarvis-fab{position:fixed;right:22px;bottom:22px;width:54px;height:54px;border-radius:50%;
  background:var(--acc2);color:#fff;border:none;font-size:22px;cursor:pointer;
  box-shadow:0 0 22px var(--glow),0 6px 22px rgba(0,0,0,.6);z-index:50;transition:.2s}
.jarvis-fab:hover{background:var(--acc);box-shadow:0 0 32px var(--glow),0 6px 22px rgba(0,0,0,.6)}
.jarvis-dock{display:none;position:fixed;right:22px;bottom:88px;width:360px;max-width:calc(100vw - 44px);
  height:480px;max-height:70vh;background:var(--card);border:1px solid var(--line);
  border-radius:14px;flex-direction:column;z-index:51;overflow:hidden;
  box-shadow:0 0 40px rgba(var(--acc-rgb),.18),0 12px 40px rgba(0,0,0,.6)}
.jarvis-dock.open{display:flex}
.dock-head{display:flex;justify-content:space-between;align-items:center;padding:12px 14px;
  border-bottom:1px solid var(--line);font-weight:700}
.dock-close{background:none;border:none;color:var(--muted);font-size:22px;line-height:1;cursor:pointer;padding:0 4px}
.dock-close:hover{color:var(--acc)}
.dock-sess{flex:1;min-width:0;max-width:62%;background:var(--card2);color:var(--txt);border:1px solid var(--line);
  border-radius:8px;padding:5px 8px;font-size:12.5px;font-weight:500;cursor:pointer;
  text-overflow:ellipsis;white-space:nowrap}
.dock-sess:hover{border-color:var(--acc)}
.dock-sess:focus{outline:none;border-color:var(--acc);box-shadow:0 0 0 2px rgba(var(--acc-rgb),.18)}
.dock-newsess{background:none;border:none;color:var(--muted);font-size:18px;line-height:1;cursor:pointer;padding:0 3px}
.dock-newsess:hover{color:var(--acc)}
.dock-messages{flex:1;overflow-y:auto;padding:12px;display:flex;flex-direction:column;gap:8px}
.dock-input{display:flex;gap:6px;padding:10px;border-top:1px solid var(--line)}
.dock-input input{flex:1}
.dock-input button{background:var(--acc2);color:#fff;border:none;border-radius:8px;padding:0 14px;cursor:pointer;font-weight:700}
.dock-input button:hover{background:var(--acc)}
.typing{align-self:flex-start;color:var(--muted);font-size:12px;font-style:italic}

/* ---------- Responsive ---------- */
@media(max-width:860px){
  .sidebar{width:64px}.brand-name,.nav-label,.sidebar-foot{display:none}
  .nav-item{justify-content:center}
  .kpi-row{grid-template-columns:1fr 1fr}
  .grid-2{grid-template-columns:1fr}
  .content{padding:16px}
}

/* ---------- Bottom nav (mobile) ---------- */
.bottom-nav{display:none}
@media(max-width:760px){
  .sidebar{display:none}
  /* topbar rapi di mobile: judul terpangkas, jam panjang disembunyikan */
  .topbar{padding:10px 14px; gap:8px}
  .topbar-title{font-size:15px; flex:1 1 auto; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
  .topbar-right{gap:10px; flex:0 0 auto}
  .clock{display:none}
  .who{max-width:92px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:13px}
  .btn-ghost{padding:6px 9px; font-size:13px}
  .bottom-nav{
    display:flex; position:fixed; left:0; right:0; bottom:0; z-index:60;
    gap:2px; padding:6px 4px calc(6px + env(safe-area-inset-bottom));
    background:rgba(13,13,15,.85);
    backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px);
    border-top:1px solid var(--line);
  }
  .bn-item{
    flex:1 1 0; min-width:0; display:flex; flex-direction:column; align-items:center; gap:3px;
    padding:7px 2px; border-radius:12px; text-decoration:none;
    color:var(--muted); font-weight:600;
    transition:color .15s, background .15s, transform .1s;
  }
  .bn-item:hover,.bn-item:active{text-decoration:none}
  .bn-item:active{transform:scale(.93)}
  .bn-icon{font-size:21px; line-height:1}
  .bn-label{font-size:10px; letter-spacing:.2px; white-space:nowrap}
  .bn-item.is-active{color:var(--acc); background:rgba(var(--acc-rgb),.13)}
  .bn-item.is-active .bn-icon{text-shadow:0 0 12px var(--glow)}
  /* ruang bawah agar konten tak tertutup bar */
  .content{padding-bottom:88px}
  /* FAB & dock chat naik di atas bottom-nav */
  .jarvis-fab{bottom:calc(80px + env(safe-area-inset-bottom))}
  .jarvis-dock{bottom:calc(142px + env(safe-area-inset-bottom))}
}

/* Light mode override untuk mobile bottom-nav */
@media(max-width:760px){
  body[data-mode="light"] .bottom-nav{ background:var(--card); border-top-color:var(--line); }
}

/* ---------- Chat (gaya Claude: daftar percakapan + aktif) ---------- */
.chat-layout{display:grid;grid-template-columns:260px 1fr;gap:18px;align-items:start;min-width:0}
/* cegah overflow horizontal: item grid/flex boleh menyusut, konten lebar (kode/URL) scroll/wrap sendiri */
.chat-main,.chat-list{min-width:0;max-width:100%}
.chat-full .md-pre,.chat-full pre,.msg-body pre{max-width:100%;overflow-x:auto}
.chat-list{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:12px;position:sticky;top:18px}
.chat-newform{margin-bottom:10px}
.chat-new{width:100%}
.chat-sessions{display:flex;flex-direction:column;gap:4px;max-height:70vh;overflow-y:auto}
.chat-sess{display:flex;flex-direction:column;gap:2px;padding:9px 11px;border-radius:8px;color:var(--txt);border:1px solid transparent}
.chat-sess:hover{background:var(--card2);text-decoration:none}
.chat-sess.is-active{background:linear-gradient(90deg,rgba(var(--acc-rgb),.14),transparent);border-color:rgba(var(--acc-rgb),.3)}
.cs-title{font-weight:500;font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:flex;align-items:center;gap:6px}
.cs-meta{font-size:11px;color:var(--dim)}
.chat-main{display:flex;flex-direction:column;margin-bottom:0}

/* Tombol "muat pesan sebelumnya" (paginasi riwayat) */
.load-prev{align-self:center;margin:2px auto 8px;background:var(--card2);border:1px solid var(--line);
  color:var(--dim);border-radius:14px;padding:5px 14px;font-size:12px;cursor:pointer;transition:.15s}
.load-prev:hover{color:var(--txt);border-color:var(--acc);box-shadow:0 0 10px var(--glow-soft)}

/* ---------- Filter & rename sesi ---------- */
.cs-filter{display:flex;gap:4px;margin-bottom:8px;flex-wrap:wrap;align-items:center}
.cs-fbtn{flex:0 1 auto;background:var(--card2);border:1px solid var(--line);color:var(--dim);border-radius:6px;padding:5px 10px;font-size:11.5px;cursor:pointer;transition:.15s;white-space:nowrap}
/* tombol & panel kelola kategori */
.cs-catmgr{margin-left:auto;background:transparent;border:1px dashed var(--line);color:var(--muted);border-radius:6px;padding:5px 9px;font-size:11.5px;cursor:pointer;white-space:nowrap;transition:.15s}
.cs-catmgr:hover,.cs-catmgr.is-on{border-color:var(--acc);color:var(--acc)}
.cs-catmgr-box{background:var(--card2);border:1px solid var(--line);border-radius:10px;padding:10px;margin-bottom:8px}
.cs-catmgr-add{display:flex;gap:6px;margin-bottom:8px}
.cs-catmgr-add .cy-input{padding:7px 9px;border-radius:8px;border:1px solid var(--line);background:var(--card);color:var(--txt);font-size:12.5px}
.cs-catmgr-list{display:flex;flex-wrap:wrap;gap:6px}
.cs-catchip{display:inline-flex;align-items:center;gap:5px;font-size:11.5px;padding:3px 8px;border-radius:20px;background:var(--card);border:1px solid var(--line);color:var(--txt)}
.cs-catdel{background:transparent;border:0;color:var(--acc);cursor:pointer;font-size:12px;line-height:1;padding:0 1px}
.cs-catbuiltin{color:var(--dim);font-size:14px;line-height:1}
.cs-fbtn:hover{color:var(--txt);border-color:var(--acc)}
.cs-fbtn.is-on{background:linear-gradient(90deg,rgba(var(--acc-rgb),.18),rgba(var(--acc-rgb),.06));border-color:rgba(var(--acc-rgb),.45);color:var(--txt)}
.cs-row{position:relative}
.cs-row .chat-sess{padding-right:30px}
.cs-badge{flex:none;font-size:9px;font-weight:700;letter-spacing:.4px;padding:1px 5px;border-radius:4px;line-height:1.5;background:rgba(140,140,150,.16);color:var(--dim);border:1px solid var(--line)}
.cs-badge-telegram{background:rgba(45,140,255,.18);color:#6ab4ff;border:1px solid rgba(45,140,255,.35)}
.cs-badge-web{background:rgba(140,140,150,.16);color:var(--dim);border:1px solid var(--line)}
.cs-badge-tg{background:rgba(45,140,255,.18);color:#6ab4ff;border:1px solid rgba(45,140,255,.35)}
.cs-badge-project{background:rgba(var(--acc-rgb),.16);color:var(--acc);border:1px solid rgba(var(--acc-rgb),.4)}
.cs-rename{position:absolute;top:6px;right:6px;width:26px;height:26px;display:flex;align-items:center;justify-content:center;background:var(--card2);border:1px solid var(--line);color:var(--dim);border-radius:6px;cursor:pointer;opacity:.55;transition:.15s;font-size:13px}
.cs-row:hover .cs-rename{opacity:1}
.cs-rename:hover{background:var(--card);color:var(--acc);border-color:var(--acc)}

/* Header percakapan aktif: judul + aksi (ubah nama / hapus) */
.card-head .chat-title{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.chat-head-actions{display:flex;align-items:center;gap:6px;flex:none}

/* ---------- Input file (updater) ---------- */
.file-input{width:100%;padding:18px;border:2px dashed var(--line);border-radius:12px;cursor:pointer;color:var(--muted)}
.file-input:hover{border-color:var(--acc);color:var(--txt)}
.file-input::file-selector-button{background:var(--acc2);color:#fff;border:none;border-radius:8px;
  padding:8px 14px;margin-right:12px;font-weight:700;cursor:pointer;font-family:inherit}
.file-input::file-selector-button:hover{background:var(--acc)}

/* ---------- Dock header extra ---------- */
.dock-head-right{display:flex;align-items:center;gap:6px}
.dock-expand{color:var(--muted);text-decoration:none;font-size:16px;padding:0 2px}
.dock-expand:hover{color:var(--acc);text-decoration:none}
.codex-only{display:none !important}
.jarvis-dock.is-codex .jarvis-only,
.jarvis-dock.is-codex .jarvis-pane{display:none !important}
.jarvis-dock.is-codex .codex-only{display:inline-flex !important}
.jarvis-dock .codex-pane{display:none !important}
.jarvis-dock.is-codex .codex-pane{display:flex !important}
.jarvis-dock .codex-tray{display:none}
.jarvis-dock.is-codex .codex-tray{display:none}
.dock-tabs{display:flex;gap:6px;padding:8px 10px;border-bottom:1px solid var(--line);background:rgba(255,255,255,.02)}
.dock-tab{flex:1;border:1px solid transparent;background:transparent;color:var(--muted);border-radius:8px;padding:7px 10px;font-size:12.5px;font-weight:700;cursor:pointer}
.dock-tab:hover{color:var(--txt);background:var(--soft2)}
.dock-tab.on{color:var(--txt);background:var(--card2);border-color:var(--line)}
.dock-tab[data-eng="codex"].on{color:#10a37f}

@media(max-width:860px){
  .chat-layout{grid-template-columns:1fr;gap:12px}
  .chat-list{position:static;max-height:none}
  .chat-sessions{max-height:240px}
  /* sesi: tombol rename selalu tampak & cukup besar buat jari */
  .cs-rename{opacity:1;width:32px;height:32px;font-size:15px;top:8px}
  .cs-row .chat-sess{padding-right:42px}
  /* header percakapan: judul + tombol boleh turun baris, jangan mepet */
  .card-head{flex-wrap:wrap;gap:8px;row-gap:8px}
  .card-head .chat-title{flex:1 1 100%;font-size:16px}
  .chat-head-actions{flex:1 1 100%;justify-content:flex-end}
  .chat-head-actions .btn-mini{padding:7px 12px;font-size:12.5px}
  /* area chat: lebih tinggi & bubble lebih lebar di layar sempit */
  .chat-full{max-height:62vh;min-height:46vh;padding:11px}
  .chat-full .msg{max-width:90%;overflow-wrap:anywhere}
  .md-pre{max-width:100%}
  /* composer: tombol & input nyaman disentuh */
  .chat-input-row{ align-items:flex-end; }
  .chat-input-row textarea{font-size:16px}
  .chat-input-row #chat-send{
    flex:0 0 auto; align-self:flex-end;
    height:42px; min-height:42px; padding:0 18px; line-height:42px;
    border-radius:21px; white-space:nowrap; font-weight:600;
  }
}

/* Halaman /chat sudah full-chat -> sembunyikan dock mengambang + tombol ✦ (biar tak nutupin tombol Kirim di HP) */
body[data-page="chat"] .jarvis-fab,
body[data-page="chat"] #jarvis-dock{ display:none !important; }

/* ---------- Vault / connectors ---------- */
code.reveal{background:rgba(var(--acc-rgb),.12);color:#ffd2d5;padding:3px 8px;border-radius:6px;
  font-family:"SF Mono",Menlo,Consolas,monospace;user-select:all}
pre.deploy-log{white-space:pre-wrap;word-break:break-word;margin:0}

/* ============ Tema luar angkasa (starfield + konstelasi) ============ */
#starfield{position:fixed;inset:0;width:100%;height:100%;z-index:0;pointer-events:none;display:block}
body{
  background:
    radial-gradient(ellipse 60% 42% at 50% -6%, rgba(var(--acc-rgb),.14), transparent 60%),
    radial-gradient(ellipse 52% 40% at 82% 12%, rgba(150,80,255,.10), transparent 55%),
    radial-gradient(ellipse at 50% 60%, var(--bg2), #050507 72%);
  background-attachment:fixed;
}
.layout{position:relative;z-index:1;background:transparent}
.main{background:transparent}
.content{background:transparent}
/* panel jadi kaca, bintang nembus tipis */
.sidebar{background:rgba(11,11,14,.70);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.topbar{background:var(--glass2);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.card{background:var(--glass);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.chat-list{background:var(--glass);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.jarvis-dock{background:rgba(16,16,20,.92);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}

/* ===================================================================
 * Tema luar angkasa (starfield + konstelasi)
 * =================================================================== */
html{
  min-height:100%;
  background:
    radial-gradient(60% 45% at 50% -5%, rgba(var(--acc-rgb),0.12), transparent 70%),
    radial-gradient(45% 45% at 82% 60%, rgba(124,80,255,0.07), transparent 70%),
    radial-gradient(40% 40% at 12% 85%, rgba(43,90,255,0.05), transparent 70%),
    var(--bg);
  background-attachment:fixed;
}
body{background:transparent}

#space-bg{
  position:fixed; inset:0; z-index:-1; pointer-events:none; display:block;
}

/* Panel jadi "kaca melayang" di atas bintang */
.sidebar{
  background:linear-gradient(180deg, var(--glass-hi), var(--glass-lo));
  backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
}
.topbar{
  background:var(--glass2);
  backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
}
.card{
  background:rgba(18,18,20,0.66);
  backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
}
.kpi{
  background:rgba(18,18,20,0.66);
  backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
}
.jarvis-dock{
  background:rgba(18,18,20,0.86);
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
}
.chat-list{
  background:rgba(18,18,20,0.66);
  backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
}
/* login juga dikasih bintang halus lewat glow yang sudah ada */

/* kursor kedip saat Jarvis/Claude Code mengetik */
.msg.streaming::after{
  content:'▋'; display:inline-block; margin-left:1px;
  color:var(--acc); animation:cc-blink 1s steps(2,start) infinite;
}
@keyframes cc-blink{ to{ visibility:hidden; } }

/* ===== Work progress (badge collapsible) ala chat Claude ===== */
.cc-progress{ align-self:flex-start; max-width:90%; margin:1px 0 5px; }
.cc-badge{
  display:inline-flex; align-items:center; gap:7px;
  background:rgba(var(--acc-rgb),.12); border:1px solid rgba(var(--acc-rgb),.32);
  color:#ffd2d5; border-radius:20px; padding:4px 11px;
  font-size:12px; font-family:inherit; cursor:pointer; line-height:1.4;
  max-width:100%;
}
.cc-badge:hover{ background:rgba(var(--acc-rgb),.2); }
.cc-badge-text{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width:230px; }
.cc-spin{
  width:10px; height:10px; flex:0 0 auto;
  border:2px solid rgba(255,210,213,.3); border-top-color:var(--acc);
  border-radius:50%; animation:cc-rot .7s linear infinite;
}
@keyframes cc-rot{ to{ transform:rotate(360deg); } }
.cc-caret{ opacity:.65; transition:transform .15s ease; font-size:10px; }
.cc-progress.open .cc-caret{ transform:rotate(90deg); }
.cc-steps{
  margin-top:6px; padding:4px 0 4px 11px;
  border-left:2px solid rgba(var(--acc-rgb),.28);
  display:flex; flex-direction:column; gap:5px;
}
.cc-step{
  font-size:12px; color:var(--muted); line-height:1.45;
  font-family:"SF Mono",ui-monospace,Menlo,Consolas,monospace;
  white-space:pre-wrap; word-break:break-word;
}
.cc-step .cc-tool{ color:var(--acc); font-weight:600; margin-right:2px; }

/* ===================================================================
 * Dock: mode layar penuh + skin ala chat Claude mobile
 * =================================================================== */
.jarvis-dock.fullscreen{
  position:fixed; inset:0; width:100%; height:100%;
  max-width:none; max-height:none; border-radius:0; border:0;
  background:var(--bg2); z-index:9999;
  display:flex; flex-direction:column;
}
.jarvis-dock .dock-title{ font-weight:600; }
.dock-head-right{ display:inline-flex; align-items:center; gap:6px; }
.dock-expand, .dock-close, .dock-newsess{
  background:transparent; border:0; color:var(--muted); cursor:pointer;
  font-size:17px; line-height:1; padding:4px 6px; border-radius:8px;
}
.dock-expand:hover, .dock-close:hover, .dock-newsess:hover{ background:var(--soft3); color:#fff; }

.jarvis-dock.fullscreen .dock-messages{
  flex:1; width:100%; max-width:780px; margin:0 auto; padding:18px 16px 8px;
}
.jarvis-dock.fullscreen .dock-input{
  width:100%; max-width:780px; margin:0 auto;
}

/* --- gelembung pesan ala Claude --- */
.dock-messages{ display:flex; flex-direction:column; gap:14px; }
.dock-messages .msg{
  white-space:pre-wrap; word-wrap:break-word; line-height:1.55;
  font-size:15px; max-width:100%;
}
.dock-messages .msg-user{
  align-self:flex-end; background:#2a2a2e; color:#f3f3f3;
  padding:10px 14px; border-radius:18px; border-bottom-right-radius:6px;
  max-width:85%; display:flex; flex-direction:column;
}
.dock-messages .msg-user::before{ content:none; display:none; }
.dock-messages .msg-assistant{
  align-self:stretch; background:transparent; color:#ececec;
  padding:0; max-width:100%;
}
.dock-messages .msg-assistant::before{
  content:''; display:block; width:28px; height:28px;
  background:url('../img/avatar-anon.png') no-repeat center/contain;
  border-radius:50%; margin-bottom:7px;
  filter:drop-shadow(0 0 6px rgba(255,43,59,.35));
}
.dock-messages .msg-assistant.streaming::after{
  content:'▋'; color:var(--acc); margin-left:1px;
  animation:cc-blink 1s steps(2,start) infinite;
}

/* indikator "sedang memproses" (dari perangkat lain) */
.dock-messages .remote-proc{ color:var(--muted); }
.proc-pill{
  display:inline-flex; align-items:center; gap:7px;
  font-size:12.5px; color:var(--txt);
  background:rgba(var(--acc-rgb),.10); border:1px solid rgba(var(--acc-rgb),.28);
  border-radius:14px; padding:3px 10px;
}
.proc-dot{ width:7px; height:7px; border-radius:50%; background:var(--acc);
  animation:proc-pulse 1s ease-in-out infinite; }
.proc-step{ opacity:.8; font-size:11.5px; max-width:180px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
@keyframes proc-pulse{ 0%,100%{ opacity:.35; transform:scale(.8);} 50%{ opacity:1; transform:scale(1.15);} }
/* badge "sedang diproses" di dalam balon assistant (biar tak pernah blank) */
.proc-pill-lg{ align-items:flex-start; padding:7px 12px; line-height:1.35; max-width:100%; }
.proc-pill-lg .proc-dot{ margin-top:5px; flex:none; }
.proc-sub{ display:block; opacity:.7; font-size:11px; margin-top:1px; }
.msg-body.is-proc{ opacity:.95; }

/* --- popup "Percakapan Baru" (kategori) --- */
.jns-modal{ position:fixed; inset:0; z-index:10001; display:none; align-items:center; justify-content:center;
  background:rgba(0,0,0,.55); backdrop-filter:blur(3px); padding:16px; }
.jns-modal.open{ display:flex; }
.jns-card{ width:100%; max-width:360px; background:var(--card); border:1px solid var(--line);
  border-radius:16px; padding:16px 16px 14px; box-shadow:0 18px 60px rgba(0,0,0,.4); }
.jns-title{ font-size:15px; font-weight:700; color:var(--txt); margin-bottom:12px; }
.jns-lbl{ display:block; font-size:11px; color:var(--muted); margin:10px 0 5px; text-transform:uppercase; letter-spacing:.04em; }
.jns-card .cy-input{ width:100%; box-sizing:border-box; padding:9px 11px; border-radius:10px;
  border:1px solid var(--line); background:var(--card2); color:var(--txt); font-size:13.5px; }
.jns-cats{ display:flex; gap:7px; flex-wrap:wrap; }
.jns-cat{ flex:1; min-width:84px; padding:9px 8px; border-radius:10px; cursor:pointer; font-size:12.5px;
  background:var(--card2); border:1px solid var(--line); color:var(--txt); transition:.15s; }
.jns-cat:hover{ border-color:rgba(var(--acc-rgb),.5); }
.jns-cat.is-on{ background:rgba(var(--acc-rgb),.16); border-color:var(--acc); color:var(--txt); font-weight:600; }
.jns-foot{ display:flex; justify-content:flex-end; gap:8px; margin-top:16px; }

/* --- dropdown sesi jadi accordion kategori --- */
.dsp-native{ display:none !important; }
.dsp{ position:relative; flex:1; min-width:80px; }
.dsp-btn{ width:100%; display:flex; align-items:center; gap:5px; padding:5px 8px; font-size:11px;
  background:var(--card2); border:1px solid var(--line); border-radius:8px; color:var(--txt); cursor:pointer; }
.dsp-cur{ flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; text-align:left; }
.dsp-caret{ flex:none; opacity:.7; font-size:9px; }
.dsp-panel{ position:absolute; top:calc(100% + 5px); left:0; right:0; min-width:190px; z-index:10002;
  background:var(--card); border:1px solid var(--line); border-radius:11px; padding:5px;
  box-shadow:0 14px 44px rgba(0,0,0,.45); max-height:56vh; overflow:auto; }
.dsp-cat-h{ width:100%; display:flex; align-items:center; gap:6px; padding:8px; font-size:12px; font-weight:600;
  background:transparent; border:0; color:var(--txt); cursor:pointer; border-radius:8px; }
.dsp-cat-h:hover{ background:rgba(var(--acc-rgb),.09); }
.dsp-cat-caret{ display:inline-block; font-size:10px; opacity:.65; transition:transform .15s; }
.dsp-cat.open .dsp-cat-caret{ transform:rotate(90deg); }
.dsp-count{ margin-left:auto; font-size:10px; opacity:.55; font-weight:500; }
.dsp-cat-list{ display:none; padding:1px 0 4px 8px; }
.dsp-cat.open .dsp-cat-list{ display:block; }
.dsp-item{ width:100%; text-align:left; padding:7px 9px; font-size:12px; background:transparent; border:0;
  color:var(--muted); cursor:pointer; border-radius:7px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.dsp-item:hover{ background:rgba(var(--acc-rgb),.1); color:var(--txt); }
.dsp-item.is-active{ color:var(--txt); font-weight:600; background:rgba(var(--acc-rgb),.15); }
.dsp-empty{ padding:6px 9px; font-size:11px; opacity:.5; }

/* --- input pill ala Claude --- */
.dock-input{
  display:flex; align-items:center; gap:8px;
  background:var(--card2); border:1px solid var(--soft4);
  border-radius:26px; padding:6px 6px 6px 16px; margin:10px;
}
.jarvis-dock.fullscreen .dock-input{ margin:10px auto 16px; }
.dock-input input{
  flex:1; background:transparent; border:0; outline:0;
  color:#f1f1f1; font-size:15px; padding:8px 0;
}
.dock-input input::placeholder{ color:#7e7e85; }
.dock-send{
  flex:0 0 auto; width:38px; height:38px; border-radius:50%;
  background:var(--acc); color:#fff; border:0; cursor:pointer;
  font-size:18px; line-height:1; display:flex; align-items:center; justify-content:center;
  transition:opacity .15s;
}
.dock-send:hover{ opacity:.88; }
.dock-send:disabled{ opacity:.4; cursor:default; }

/* progress badge sejajar kiri di skin chat */
.dock-messages .cc-progress{ align-self:flex-start; }

/* ---------- Pemilih tema warna (Pengaturan) ---------- */
.theme-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(96px,1fr));gap:10px;margin-top:8px}
.theme-opt{display:flex;flex-direction:column;align-items:center;gap:8px;
  padding:12px 8px;border:1px solid var(--line);border-radius:var(--radius);
  cursor:pointer;background:var(--card2);transition:border-color .15s,box-shadow .15s,transform .1s}
.theme-opt:hover{transform:translateY(-1px)}
.theme-opt input{position:absolute;opacity:0;width:0;height:0}
.theme-swatch{width:38px;height:38px;border-radius:50%;
  box-shadow:0 0 0 2px var(--card2),0 0 12px rgba(0,0,0,.5)}
.theme-name{font-size:12px;color:var(--muted);font-weight:600}
.theme-opt.is-active{border-color:var(--acc);box-shadow:0 0 16px var(--glow-soft)}
.theme-opt.is-active .theme-name{color:var(--txt)}
.theme-opt.is-active .theme-swatch{box-shadow:0 0 0 2px var(--acc),0 0 16px var(--glow)}

/* ============ Chat: format jawaban (markdown), lampiran, composer ============ */
.msg-body{white-space:pre-wrap; word-break:break-word}
/* setelah diformat markdown, blok punya jaraknya sendiri */
.msg-assistant .msg-body.md-done{white-space:normal}
.md-p{margin:0 0 2px}
.md-gap{height:.55em}
.md-h{font-weight:700; margin:6px 0 3px}
.md-h1{font-size:1.18em}.md-h2{font-size:1.1em}.md-h3{font-size:1.02em}
.md-ul{margin:3px 0 6px; padding-left:20px}
.md-ul li{margin:1px 0}
.md-code{font-family:"SF Mono",Menlo,Consolas,monospace; font-size:.9em;
  background:rgba(var(--acc-rgb),.12); padding:1px 5px; border-radius:5px}
.md-pre{margin:7px 0; padding:11px 13px; border-radius:9px; overflow:auto;
  background:var(--bg2); border:1px solid var(--line)}
.md-pre code{font-family:"SF Mono",Menlo,Consolas,monospace; font-size:12px;
  color:#e8e3e6; white-space:pre; display:block; line-height:1.5}
.msg-body a{color:var(--acc); text-decoration:underline}

/* lampiran di dalam bubble */
.msg-atts{display:flex; flex-wrap:wrap; gap:8px; margin-top:8px}
.att{display:inline-flex; align-items:center; gap:7px; text-decoration:none;
  border:1px solid var(--line); border-radius:9px; overflow:hidden; max-width:230px}
.att-img{padding:0; border-color:transparent}
.att-img img{display:block; max-width:200px; max-height:200px; border-radius:9px; object-fit:cover}
.att-file{padding:7px 11px; background:var(--soft2); color:var(--txt)}
.att-file:hover{background:rgba(var(--acc-rgb),.12)}
.att-ic{font-size:15px}
.att-name{font-size:12px; font-weight:600; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.att-size{font-size:11px; color:var(--dim)}

/* tray chip (file menunggu dikirim) */
.att-tray{display:flex; flex-wrap:wrap; gap:7px; padding:8px 10px 0}
.att-chip{display:inline-flex; align-items:center; gap:6px; font-size:12px;
  background:var(--card2); border:1px solid var(--line); border-radius:18px; padding:4px 8px 4px 11px}
.att-chip .chip-name{max-width:130px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-weight:600}
.att-chip .chip-size{color:var(--dim); font-size:11px}
.att-chip .chip-x{background:none; border:0; color:var(--muted); cursor:pointer; font-size:15px; line-height:1; padding:0 2px}
.att-chip .chip-x:hover{color:var(--red)}

/* tombol lampir di composer */
.composer-attach{flex:0 0 auto; width:34px; height:34px; border-radius:50%;
  background:transparent; border:1px solid var(--line); color:var(--muted);
  cursor:pointer; font-size:18px; line-height:1; display:flex; align-items:center; justify-content:center;
  transition:color .15s,border-color .15s}
.composer-attach:hover{color:var(--acc); border-color:var(--acc)}
.composer-attach:disabled{opacity:.4; cursor:default}

/* composer halaman chat penuh -> textarea auto-grow */
.chat-input-row{display:flex; gap:8px; align-items:flex-end; margin-top:10px}
.chat-input-row textarea{flex:1; resize:none; min-height:40px; max-height:160px; overflow-y:auto;
  background:var(--bg2); border:1px solid var(--line); border-radius:12px; color:var(--txt);
  font-family:inherit; font-size:14px; line-height:1.5; padding:10px 12px; outline:none}
.chat-input-row textarea:focus{border-color:var(--acc); box-shadow:0 0 0 2px var(--glow-soft)}

/* dock composer -> textarea (gantikan input lama) */
.dock-input{align-items:flex-end}
.dock-input textarea{flex:1; resize:none; min-height:24px; max-height:120px; overflow-y:auto;
  background:transparent; border:0; outline:0; color:#f1f1f1; font-family:inherit;
  font-size:15px; line-height:1.45; padding:7px 0}
.dock-input textarea::placeholder{color:#7e7e85}

/* highlight saat file di-drag ke area chat */
.dragging{outline:2px dashed var(--acc); outline-offset:-6px}

/* tombol kirim berubah jadi "Batal" saat memproses */
.dock-send.is-stop, .chat-input-row .btn-primary.is-stop{ background:var(--red); box-shadow:none }
.dock-send.is-stop:hover, .chat-input-row .btn-primary.is-stop:hover{ background:var(--red); filter:brightness(1.12) }
.md-cancel{ margin-top:5px; font-size:12px; color:var(--red); font-weight:600 }

/* tombol melayang "ke pesan terbaru" (muncul saat menggulir ke atas) */
.scroll-down{ position:absolute; right:18px; z-index:25; padding:0;
  width:38px; height:38px; border-radius:50%;
  background:var(--card2); border:1px solid var(--line); color:var(--txt);
  cursor:pointer; font-size:19px; line-height:1;
  display:none; align-items:center; justify-content:center;
  box-shadow:0 6px 18px rgba(0,0,0,.55);
  opacity:0; transform:translateY(8px) scale(.9); transition:opacity .15s, transform .15s }
.scroll-down.show{ display:flex; opacity:1; transform:translateY(0) scale(1) }
.scroll-down:hover{ border-color:var(--acc); color:var(--acc); box-shadow:0 6px 22px var(--glow-soft) }
.chat-main{ position:relative }
.chat-main .scroll-down{ bottom:74px; right:22px }
.jarvis-dock .scroll-down{ bottom:78px; right:18px }
.jarvis-dock.fullscreen .scroll-down{ bottom:88px }

/* tombol pilihan jawaban (ala Claude) di bawah bubble Jarvis */
.msg-choices{ display:flex; flex-wrap:wrap; gap:8px; margin-top:10px }
.choice-btn{ background:rgba(var(--acc-rgb),.1); color:var(--acc); cursor:pointer;
  border:1px solid rgba(var(--acc-rgb),.4); border-radius:18px; padding:8px 14px;
  font-family:inherit; font-size:13px; font-weight:600; line-height:1.2;
  transition:background .15s, transform .1s }
.choice-btn:hover{ background:rgba(var(--acc-rgb),.2) }
.choice-btn:active{ transform:scale(.96) }
.choice-btn:disabled{ opacity:.45; cursor:default }

/* ---------- Item nav berbentuk <button> (mis. "Website") ---------- */
button.nav-item{ background:none; border:0; cursor:pointer; font:inherit; text-align:left; width:100% }
button.bn-item{ background:none; border:0; cursor:pointer; font:inherit }

/* ---------- Popup Website ---------- */
.web-popup{ position:fixed; inset:0; z-index:80; display:none; align-items:center; justify-content:center;
  padding:18px; background:rgba(4,4,7,.62); backdrop-filter:blur(4px); -webkit-backdrop-filter:blur(4px) }
.web-popup.open{ display:flex }
.web-popup-card{ width:100%; max-width:440px; max-height:84vh; overflow:auto;
  background:var(--glass-solid); border:1px solid var(--line); border-radius:16px;
  box-shadow:0 18px 60px rgba(0,0,0,.6) }
.web-popup-head{ display:flex; align-items:center; justify-content:space-between;
  padding:14px 16px; border-bottom:1px solid var(--line) }
.web-popup-title{ font-weight:700; font-size:15px }
.web-popup-x{ background:none; border:0; color:var(--muted); font-size:22px; line-height:1; cursor:pointer; padding:0 4px }
.web-popup-x:hover{ color:var(--acc) }
.web-grid{ display:grid; grid-template-columns:1fr 1fr; gap:12px; padding:16px }
.web-item{ display:flex; flex-direction:column; align-items:center; gap:6px; text-decoration:none;
  padding:18px 12px; border:1px solid var(--line); border-radius:14px; background:var(--card2); color:var(--txt);
  transition:border-color .15s, transform .1s, box-shadow .15s }
.web-item:hover{ border-color:var(--acc); transform:translateY(-2px); box-shadow:0 0 18px var(--glow-soft); text-decoration:none }
.web-ico{ font-size:30px; line-height:1 }
.web-name{ font-weight:700; font-size:14px; letter-spacing:.3px }
.web-sub{ font-size:11px; color:var(--dim) }

/* ---------- Widget sisa token Claude Max (dashboard) ---------- */
.usage-top{ display:flex; align-items:baseline; gap:8px; margin-bottom:9px }
.usage-pct{ font-size:30px; font-weight:800; line-height:1 }
.usage-lbl{ color:var(--muted); font-size:13px }
.usage-bar{ height:12px; background:var(--card2); border:1px solid var(--line); border-radius:8px; overflow:hidden }
.usage-fill{ height:100%; border-radius:8px; transition:width .5s ease }
.usage-pct.usage-ok{ color:var(--green) }   .usage-fill.usage-ok{ background:linear-gradient(90deg,#2ea043,var(--green)) }
.usage-pct.usage-warn{ color:var(--amber) } .usage-fill.usage-warn{ background:linear-gradient(90deg,#b07d12,var(--amber)) }
.usage-pct.usage-low{ color:var(--red) }    .usage-fill.usage-low{ background:linear-gradient(90deg,#c0303a,var(--red)) }
.usage-reset{ margin-top:11px; font-size:13px; color:var(--txt) }
.usage-reset strong{ color:var(--acc) }
.usage-meta{ margin-top:4px }
.usage-na{ font-size:13px; color:var(--muted); display:flex; flex-wrap:wrap; align-items:center; gap:8px }

/* ---------- Settings: link tombol + mobile friendly ---------- */
.set-link{ display:inline-block; text-decoration:none }
.set-link:hover{ text-decoration:none }
.tbl .mono{ word-break:break-word }
@media(max-width:600px){
  input,select,textarea{ font-size:16px }                 /* nyaman ditekan, cegah zoom */
  .form-inline{ flex-direction:column; align-items:stretch }
  .form-inline input,.form-inline select{ width:100%; flex:1 1 auto !important }
  .form-inline form.inline,.form-inline .btn-mini{ width:100% }
  .form-stack .btn-primary{ width:100% }                  /* tombol simpan full-width (khusus form settings) */
}

/* ---------- Kesehatan server (dashboard) ---------- */
.srv-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:12px; text-align:center }
.srv-box{ display:flex; flex-direction:column; align-items:center; gap:6px; padding:6px 0 }
.srv-ring{ position:relative; width:84px; height:84px; border-radius:50%;
  background:conic-gradient(var(--line) 0deg, var(--card2) 0deg);
  display:flex; align-items:center; justify-content:center }
.srv-ring::before{ content:''; position:absolute; inset:9px; border-radius:50%; background:var(--card) }
.srv-ring b{ position:relative; z-index:1; font-size:18px; font-weight:700 }
.srv-lbl{ font-weight:700; font-size:13px }
.srv-sub{ font-size:11px; color:var(--muted) }
/* --- kecepatan jaringan (download / upload) --- */
.srv-net{ display:flex; align-items:stretch; gap:0; margin-top:14px;
  background:var(--soft1); border:1px solid var(--line); border-radius:12px; overflow:hidden }
.srv-net-cell{ flex:1; display:flex; align-items:center; gap:10px; padding:11px 14px; min-width:0 }
.srv-net-sep{ width:1px; background:var(--line) }
.srv-net-ic{ font-size:18px; line-height:1; flex:0 0 auto }
.srv-net-txt{ display:flex; flex-direction:column; min-width:0 }
.srv-net-lbl{ font-size:11px; color:var(--muted); font-weight:600; letter-spacing:.02em }
.srv-net-cell b{ font-size:19px; font-weight:800; line-height:1.15; white-space:nowrap }
.srv-net-cell b small{ font-size:11px; font-weight:600; color:var(--muted); margin-left:2px }
.srv-net-dl b{ color:#22c55e }
.srv-net-ul b{ color:#3b82f6 }
.srv-net-dl .srv-net-ic{ filter:drop-shadow(0 0 5px rgba(34,197,94,.45)) }
.srv-net-ul .srv-net-ic{ filter:drop-shadow(0 0 5px rgba(59,130,246,.45)) }
.srv-meta{ margin-top:12px; text-align:center }
.srv-tools{ display:flex; gap:10px; margin-top:14px; flex-wrap:wrap }
.srv-btn{ flex:1; min-width:120px; display:flex; align-items:center; justify-content:center; gap:8px;
  padding:13px; border:1px solid var(--line); border-radius:12px; background:var(--card2); color:var(--txt);
  font-weight:600; font-size:13px; text-decoration:none; transition:border-color .15s, transform .1s, box-shadow .15s }
.srv-btn:hover{ border-color:var(--acc); transform:translateY(-1px); box-shadow:0 0 16px var(--glow-soft); text-decoration:none }

/* ---------- Terminal ---------- */
.term-head-tools{ display:flex; gap:8px; flex-wrap:wrap }
.term-out{ background:var(--bg2); border:1px solid var(--line); border-radius:10px; padding:12px 14px; margin:0;
  font-family:"SF Mono",Menlo,Consolas,monospace; font-size:12.5px; line-height:1.5; color:var(--txt);
  height:58vh; overflow:auto; white-space:pre-wrap; word-break:break-word }
.term-dim{ color:var(--dim) }
.term-prompt-line{ color:var(--green) }
.term-input-row{ display:flex; align-items:center; gap:8px; margin-top:10px;
  background:var(--bg2); border:1px solid var(--line); border-radius:10px; padding:8px 12px }
.term-prompt{ color:var(--green); font-family:"SF Mono",Menlo,Consolas,monospace; font-size:12.5px; white-space:nowrap }
.term-cmd{ flex:1; background:transparent; border:0; outline:0; color:var(--txt);
  font-family:"SF Mono",Menlo,Consolas,monospace; font-size:13px; padding:2px 0 }

/* ---------- File Manager ---------- */
.fm-tools{ display:flex; flex-wrap:wrap; gap:6px }
.fm-path{ display:flex; gap:8px; margin-bottom:12px }
.fm-path input{ flex:1; font-family:"SF Mono",Menlo,Consolas,monospace; font-size:12.5px }
.fm-list-wrap{ overflow:auto; max-height:64vh; border:1px solid var(--line); border-radius:10px }
.fm-list{ margin:0 }
.fm-list th{ position:sticky; top:0; background:var(--card); z-index:1 }
.fm-name a{ color:var(--txt); text-decoration:none }
.fm-name a:hover{ color:var(--acc); text-decoration:none }
.fm-acts{ white-space:nowrap }
.fm-a{ display:inline-block; padding:2px 6px; color:var(--muted); text-decoration:none; font-size:15px }
.fm-a:hover{ color:var(--acc); text-decoration:none }
.fm-editor{ position:fixed; inset:0; z-index:90; display:none; background:rgba(4,4,7,.7);
  align-items:center; justify-content:center; padding:18px }
.fm-editor.open{ display:flex }
.fm-editor-card{ width:100%; max-width:920px; height:82vh; display:flex; flex-direction:column;
  background:var(--card); border:1px solid var(--line); border-radius:14px; overflow:hidden }
.fm-editor-head{ display:flex; align-items:center; justify-content:space-between; gap:10px;
  padding:12px 14px; border-bottom:1px solid var(--line) }
.fm-editor-area{ flex:1; width:100%; border:0; border-radius:0; resize:none; background:var(--bg2); color:var(--txt);
  font-family:"SF Mono",Menlo,Consolas,monospace; font-size:13px; line-height:1.5; padding:14px; outline:none }
@media(max-width:760px){
  .srv-btn{ min-width:0; padding:11px; font-size:12px }
  .term-out{ height:52vh }
}

/* ---------- Gauge SVG kesehatan server (ala referensi) ---------- */
.gauge{ position:relative; width:88px; height:88px; margin:0 auto }
.gauge svg{ width:100%; height:100%; transform:rotate(-90deg); display:block }
.g-track{ fill:none; stroke:var(--card2); stroke-width:9 }
.g-bar{ fill:none; stroke:var(--green); stroke-width:9; stroke-linecap:round;
  stroke-dasharray:327; stroke-dashoffset:327;
  transition:stroke-dashoffset .6s cubic-bezier(.4,0,.2,1), stroke .3s }
.g-center{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center }
.g-center b{ font-size:20px; font-weight:700; letter-spacing:0; line-height:1 }
.g-center b i{ font-size:.5em; font-style:normal; color:var(--muted); margin-left:1px; font-weight:600 }
.srv-lbl{ font-weight:700; font-size:14px; margin-top:6px; letter-spacing:.3px }
.srv-sub{ font-size:12px; color:var(--muted) }
.srv-meta{ text-align:center; margin-top:8px }

@media(max-width:760px){
  .srv-grid{ grid-template-columns:repeat(3,1fr); gap:8px }
  .srv-box{ padding:4px 0 }
  .gauge{ width:62px; height:62px }
  .g-center b{ font-size:14px }
  .srv-lbl{ font-size:12px; margin-top:4px }
  .srv-sub{ font-size:10px }
  .srv-tools{ flex-wrap:nowrap; gap:8px }
  .srv-tools .srv-btn{ flex:1 1 0; min-width:0; width:auto; flex-direction:column; gap:5px; padding:10px 4px; font-size:11.5px }
  .srv-tools .srv-btn span{ font-size:18px }
}

/* ===== htop berwarna (monitor proses) ===== */
.htop-tasks{ color:var(--muted); font-size:12px; }
.htop-bar{ display:flex; align-items:center; gap:8px; font-size:12.5px; margin:3px 0; }
.htop-bl{ width:38px; color:var(--muted); font-weight:700; }
.htop-track{ flex:1; height:13px; background:var(--card2); border:1px solid var(--line); border-radius:3px; overflow:hidden; }
.htop-fill{ display:block; height:100%; transition:width .3s ease; }
.htop-bv{ min-width:120px; text-align:right; color:var(--muted); }
.htop-sep{ height:8px; }
.htop-hdr{ color:var(--bg2); background:#7fd6a0; font-weight:700; padding:1px 4px; border-radius:3px; display:inline-block; }
.htop-row{ }
.htop-pid{ color:var(--dim); }
.htop-user{ color:#c9a6ff; }
.htop-time{ color:var(--muted); }
.htop-cmd{ color:#6fd0ff; }
.htop-lo{ color:#4bd863; }
.htop-mid{ color:#ffc24b; }
.htop-hi{ color:var(--red); font-weight:700; }

/* ringkasan token & rupiah di kartu usage */
.usage-spend{ margin-top:10px; border-top:1px solid var(--line); padding-top:9px; display:flex; flex-direction:column; gap:5px; }
.us-row{ display:flex; justify-content:space-between; align-items:center; font-size:12.5px; color:var(--muted); }
.us-row b{ color:var(--txt); font-weight:700; }

/* ===== Pengaturan: tab ===== */
.tabbar{ display:flex; flex-wrap:wrap; gap:6px; margin-bottom:16px; border-bottom:1px solid var(--line); }
.tab-btn{ background:transparent; border:0; border-bottom:2px solid transparent; color:var(--muted);
  padding:9px 13px; font-size:13.5px; font-weight:600; cursor:pointer; border-radius:8px 8px 0 0; font-family:inherit; }
.tab-btn:hover{ color:var(--txt); background:var(--soft2); }
.tab-btn.is-active{ color:var(--acc); border-bottom-color:var(--acc); }
.tabpane{ display:none; }
.tabpane.is-active{ display:block; animation:tab-fade .15s ease; }
@keyframes tab-fade{ from{opacity:0; transform:translateY(3px)} to{opacity:1; transform:none} }
.set-tabs select{ background:var(--card); border:1px solid var(--line); color:var(--txt);
  border-radius:10px; padding:10px 12px; font:inherit; width:100%; }
.theme-pick{ display:flex; align-items:center; gap:10px; }
.theme-dot{ width:36px; height:36px; border-radius:50%; flex:0 0 auto; border:1px solid var(--line); }
.updater-frame{ width:100%; min-height:580px; border:0; display:block; background:var(--bg2); }
.srv-tbl td, .srv-tbl th{ vertical-align:middle; }
.srv-row-act{ white-space:nowrap; display:flex; gap:6px; justify-content:flex-end; align-items:center; }
.btn-danger{ color:var(--red); border-color:rgba(255,80,80,.4); }
.btn-danger:hover{ background:rgba(255,80,80,.12); }
@media(max-width:760px){
  .tab-btn{ padding:8px 10px; font-size:12.5px; }
  .updater-frame{ min-height:520px; }
  .srv-tbl .mono{ font-size:11px; }
  .srv-row-act{ flex-direction:column; gap:4px; align-items:stretch; }
}

/* ===== Dashboard: tab Kesehatan Server ===== */
.srv-tabbar{ display:flex; flex-wrap:nowrap; gap:6px; margin:2px 0 14px; overflow-x:auto; overflow-y:hidden;
  -webkit-overflow-scrolling:touch; scrollbar-width:thin; padding-bottom:4px; }
.srv-tabbar::-webkit-scrollbar{ height:6px; }
.srv-tabbar::-webkit-scrollbar-thumb{ background:var(--soft4); border-radius:3px; }
.srv-tab{ flex:0 0 auto; background:var(--soft2); border:1px solid var(--line); color:var(--muted);
  padding:5px 13px; font-size:12.5px; font-weight:600; border-radius:999px; cursor:pointer; font-family:inherit; white-space:nowrap; }
.srv-tab:hover{ color:var(--txt); border-color:var(--acc); }
.srv-tab.is-active{ color:#fff; background:linear-gradient(135deg,var(--acc),var(--acc2)); border-color:transparent; }

/* ===== Dashboard: tab ALL (semua server) ===== */
.srv-tab-all{ margin-left:auto; letter-spacing:.5px; }
.srv-all{ display:flex; flex-direction:column; gap:10px; margin-top:4px; }
.sa-row{ background:var(--soft1); border:1px solid var(--line); border-radius:12px; padding:11px 13px; }
.sa-name{ font-weight:700; font-size:13.5px; margin-bottom:9px; }
.sa-host{ font-weight:400; color:var(--muted); font-size:11.5px; }
.sa-metrics{ display:grid; grid-template-columns:repeat(3,1fr); gap:12px; }
.sa-m{ display:flex; align-items:center; gap:7px; }
.sa-lbl{ font-size:11px; color:var(--muted); width:30px; flex:0 0 auto; }
.sa-bar{ flex:1; height:7px; border-radius:6px; background:var(--soft3); overflow:hidden; }
.sa-bar i{ display:block; height:100%; width:0; background:var(--cyan); border-radius:6px; transition:width .4s ease; }
.sa-m b{ font-size:12px; min-width:34px; text-align:right; }
@media(max-width:600px){ .sa-metrics{ grid-template-columns:1fr; gap:7px; } }

/* ===== Terminal: template perintah ===== */
.term-tpl{ margin:10px 0 6px; }
.term-tpl-cats{ display:flex; flex-wrap:wrap; gap:5px; margin-bottom:8px; }
.tpl-cat{ background:var(--soft2); border:1px solid var(--line); color:var(--muted);
  padding:4px 11px; font-size:11.5px; font-weight:600; border-radius:999px; cursor:pointer; font-family:inherit; }
.tpl-cat:hover{ color:var(--txt); }
.tpl-cat.is-active{ color:#fff; background:linear-gradient(135deg,var(--acc),var(--acc2)); border-color:transparent; }
.term-tpl-chips{ display:flex; flex-wrap:wrap; gap:6px; }
.tpl-chip{ background:rgba(var(--acc-rgb),.10); border:1px solid rgba(var(--acc-rgb),.35); color:var(--txt);
  padding:5px 11px; font-size:12px; border-radius:8px; cursor:pointer; font-family:inherit; }
.tpl-chip:hover{ background:rgba(var(--acc-rgb),.20); }
.tpl-chip.tpl-danger{ border-color:rgba(255,80,80,.5); color:var(--red); background:rgba(255,80,80,.08); }
.tpl-chip.tpl-danger:hover{ background:rgba(255,80,80,.16); }

/* ===== File Manager: editor ACE (ala aaPanel) ===== */
.fm-ace{ flex:1; width:100%; min-height:0; }
.fm-ace .ace_editor, .fm-ace.ace_editor{ width:100%; height:100%; }
.fm-ta-fallback{ flex:1; width:100%; min-height:55vh; border:0; resize:none; background:var(--bg2); color:var(--txt);
  font-family:"SF Mono",Menlo,Consolas,monospace; font-size:13px; line-height:1.5; padding:14px; outline:none; }

/* ===== File Manager: shortcut path ===== */
.fm-shortcuts{ display:flex; flex-wrap:wrap; gap:6px; margin:0 0 10px; }
.fm-sc{ background:rgba(var(--acc-rgb),.08); border:1px solid rgba(var(--acc-rgb),.30); color:var(--txt);
  padding:3px 10px; font-size:11.5px; border-radius:7px; cursor:pointer; font-family:"SF Mono",Menlo,Consolas,monospace; }
.fm-sc:hover{ background:rgba(var(--acc-rgb),.18); }

/* ===== File Manager: editor multi-tab + toast ===== */
.fm-editor-card{ position:relative; }
.fm-tabs{ display:flex; gap:4px; overflow-x:auto; flex:1; min-width:0; }
.fm-tab{ display:flex; align-items:center; gap:7px; padding:5px 10px; border-radius:8px 8px 0 0;
  background:var(--soft2); border:1px solid var(--line); border-bottom:0; cursor:pointer;
  white-space:nowrap; font-size:12px; color:var(--muted); max-width:200px; }
.fm-tab .fm-tab-name{ overflow:hidden; text-overflow:ellipsis; }
.fm-tab.is-active{ background:var(--bg2); color:var(--txt); border-color:var(--acc); }
.fm-tab.dirty .fm-tab-name{ color:var(--acc); }
.fm-tab-x{ opacity:.55; font-size:15px; line-height:1; }
.fm-tab-x:hover{ opacity:1; color:var(--red); }
.fm-ed-actions{ display:flex; gap:6px; flex:0 0 auto; }
.fm-toast{ position:absolute; bottom:20px; left:50%; transform:translateX(-50%) translateY(18px);
  background:rgba(18,18,24,.97); border:1px solid var(--acc); color:#fff; padding:9px 18px; border-radius:10px;
  font-size:13px; font-weight:600; opacity:0; pointer-events:none; transition:opacity .2s ease, transform .2s ease;
  box-shadow:0 10px 34px rgba(0,0,0,.5); z-index:5; }
.fm-toast.show{ opacity:1; transform:translateX(-50%) translateY(0); }
.fm-toast.err{ border-color:#ff5050; }

/* ===== File Manager: editor sidebar tree + context menu ===== */
.fm-editor-card{ flex-direction:row; padding:0; }
.fm-editor-main{ flex:1; min-width:0; display:flex; flex-direction:column; position:relative; }
.fm-tree{ flex:0 0 240px; width:240px; display:flex; flex-direction:column; min-height:0;
  background:var(--bg2); border-right:1px solid var(--line); }
.fm-editor-card.no-tree .fm-tree{ display:none; }
.fm-tree-head{ display:flex; align-items:center; justify-content:space-between; gap:6px; padding:8px 10px; border-bottom:1px solid var(--line); }
.fm-tree-title{ font-size:11px; color:var(--muted); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.fm-tree-btns{ display:flex; gap:2px; flex:0 0 auto; }
.fm-tree-btn{ background:transparent; border:0; color:var(--muted); cursor:pointer; font-size:13px; padding:2px 5px; border-radius:5px; }
.fm-tree-btn:hover{ background:var(--soft3); color:var(--txt); }
.fm-tree-body{ flex:1; overflow:auto; padding:6px 4px; min-height:0; }
.fm-tree-info{ color:var(--muted); font-size:11.5px; padding:6px 10px; }
.fm-tree-info.err{ color:var(--red); }
.fm-node-row{ display:flex; align-items:center; gap:5px; padding:3px 6px; border-radius:6px; cursor:pointer; font-size:12.5px; white-space:nowrap; }
.fm-node-row:hover{ background:var(--soft3); }
.fm-tw{ width:12px; display:inline-block; text-align:center; color:var(--muted); font-size:10px; transition:transform .15s; }
.fm-node.open > .fm-node-row .fm-tw{ transform:rotate(90deg); }
.fm-node-ic{ flex:0 0 auto; }
.fm-node-name{ overflow:hidden; text-overflow:ellipsis; }
.fm-children{ display:none; margin-left:13px; border-left:1px solid rgba(255,255,255,.07); }
.fm-node.open > .fm-children{ display:block; }
.fm-tree-toggle{ background:transparent; border:0; cursor:pointer; font-size:16px; padding:2px 6px; margin-right:2px; color:var(--muted); }
.fm-tree-toggle:hover{ color:var(--txt); }
.fm-ctx{ position:fixed; z-index:120; display:none; min-width:162px; background:var(--card2); border:1px solid var(--line);
  border-radius:10px; padding:5px; box-shadow:0 12px 36px rgba(0,0,0,.55); }
.fm-ctx.show{ display:block; }
.fm-ctx button{ display:block; width:100%; text-align:left; background:transparent; border:0; color:var(--txt);
  padding:7px 10px; font-size:12.5px; border-radius:7px; cursor:pointer; font-family:inherit; }
.fm-ctx button:hover{ background:rgba(var(--acc-rgb),.18); }
@media(max-width:760px){
  .fm-editor-card{ flex-direction:column; }
  .fm-tree{ flex:0 0 auto; width:auto; max-height:36vh; border-right:0; border-bottom:1px solid var(--line); }
}

/* ===== Vault: reveal/copy + OTP ===== */
.pw-cell, .otp-cell{ display:inline-flex; align-items:center; gap:6px; }
.vault-pw{ font-family:"SF Mono",Menlo,Consolas,monospace; font-size:12.5px; }
.otp-code{ font-family:"SF Mono",Menlo,Consolas,monospace; font-size:14px; letter-spacing:1px; color:var(--acc); font-weight:700; }
.otp-rem{ font-size:11px; color:var(--muted); min-width:26px; text-align:right; }

/* ===== File Manager: editor (mendekati full screen) ===== */
.fm-editor{ padding:10px; }
.fm-editor-card{ max-width:none; width:97vw; height:95vh; }
@media(max-width:760px){
  .fm-editor{ padding:0; }
  .fm-editor-card{ width:100vw; height:100vh; border-radius:0; }
}

/* ===== Google Drive: breadcrumb ===== */
.gd-crumb{ display:flex; flex-wrap:wrap; gap:4px; align-items:center; margin:6px 0 12px; font-size:13px; }
.gd-crumb a{ color:var(--acc); text-decoration:none; }
.gd-crumb a:hover{ text-decoration:underline; }
.gd-sep{ color:var(--muted); }

/* ===== Vault: search, scroll, favorit, authenticator ===== */
.vault-search{ width:100%; background:var(--card); border:1px solid var(--line); color:var(--txt);
  border-radius:10px; padding:9px 12px; font:inherit; margin-bottom:10px; }
.vault-scroll{ max-height:56vh; overflow:auto; }
.vault-tbl thead th{ position:sticky; top:0; background:var(--card); z-index:1; }
.vstar{ background:none; border:0; cursor:pointer; font-size:16px; color:var(--muted); padding:0; line-height:1; }
.vstar.on{ color:#e0b020; }
.otp-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); gap:10px; }
.otp-card{ background:var(--soft1); border:1px solid var(--line); border-radius:12px; padding:12px 14px; }
.otp-card-name{ font-size:12.5px; color:var(--muted); margin-bottom:6px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.otp-card-code{ display:flex; align-items:center; gap:8px; }
.otp-card-code .otp-code{ font-size:20px; }

/* ===== Google Drive: tab akun + toolbar ===== */
.gd-tabbar{ margin-top:4px; }
.srv-tab{ text-decoration:none; }
.gd-add{ border-style:dashed; color:var(--acc); }
.gd-toolbar{ display:flex; align-items:center; gap:8px; margin:12px 0 4px; }

/* ===== Files hub: top tabs ===== */
.files-top{ margin-top:4px; margin-bottom:6px; }
.files-top .srv-tab{ padding:7px 15px; font-size:13px; }
.files-sub{ margin-top:8px; }
.files-add{ border-style:dashed; color:var(--acc); }

/* ===== Notes (Keep-like) ===== */
.note-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(180px,1fr)); gap:12px; margin-top:6px; }
.note-card{ position:relative; background:var(--soft1); border:1px solid var(--line); border-radius:12px;
  padding:12px 14px; min-height:84px; cursor:pointer; transition:border-color .15s, transform .05s; }
.note-card:hover{ border-color:var(--acc); }
.note-card:active{ transform:scale(.99); }
.note-card-title{ font-weight:600; font-size:14px; margin-bottom:6px; word-break:break-word; }
.note-pin-badge{ position:absolute; top:8px; right:10px; font-size:12px; }
.note-editor{ position:fixed; inset:0; z-index:95; display:none; align-items:center; justify-content:center;
  background:rgba(4,4,7,.7); padding:14px; }
.note-editor.open{ display:flex; }
.note-editor-card{ width:100%; max-width:600px; background:var(--card); border:1px solid var(--line);
  border-radius:14px; padding:14px; display:flex; flex-direction:column; gap:10px; }
.note-title{ background:transparent; border:0; border-bottom:1px solid var(--line); color:var(--txt);
  font-size:18px; font-weight:600; padding:6px 2px; outline:none; }
.note-body{ background:var(--bg2); border:1px solid var(--line); border-radius:10px; color:var(--txt);
  font-family:inherit; font-size:14px; line-height:1.6; padding:12px; min-height:240px; resize:vertical; outline:none; }
.note-editor-foot{ display:flex; align-items:center; gap:8px; flex-shrink:0; }
@media(max-width:760px){ .note-editor{ padding:0; align-items:stretch; } .note-editor-card{ max-width:none; width:100vw; height:100vh; height:100dvh; border-radius:0; } .note-body{ flex:1; min-height:0; } }

/* ===== Files: tab kotak (tidak melengkung) ===== */
.files-top .srv-tab, .files-sub .srv-tab{ border-radius:6px; }
.files-top .srv-tab.is-active, .files-sub .srv-tab.is-active{ border-radius:6px; }
/* tombol aksi baris (button pakai class fm-a) */
button.fm-a{ background:none; border:0; cursor:pointer; color:var(--muted); font-size:14px; padding:0 3px; line-height:1; }
button.fm-a:hover{ color:var(--acc); }
.gd-cb, #gd-all{ cursor:pointer; }

/* ===== Sheet "Other" (mobile) ===== */
.other-sheet{ position:fixed; inset:0; z-index:120; display:none; background:rgba(4,4,7,.6); align-items:flex-end; }
.other-sheet.open{ display:flex; }
.other-card{ width:100%; background:var(--card); border-top-left-radius:18px; border-top-right-radius:18px;
  border:1px solid var(--line); padding:14px 16px calc(26px + env(safe-area-inset-bottom)); max-height:82vh; overflow-y:auto; }
.other-grip{ width:42px; height:4px; border-radius:2px; background:var(--line); margin:2px auto 12px; cursor:pointer; }
.other-head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:10px; }
.other-close{ flex:0 0 auto; width:32px; height:32px; border-radius:9px; border:1px solid var(--line); background:var(--soft1); color:var(--muted); font-size:15px; line-height:1; cursor:pointer; font-family:inherit; }
.other-close:active{ background:rgba(var(--acc-rgb),.15); }
.other-title{ font-size:13px; color:var(--muted); }
.other-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:10px; }
.other-item{ display:flex; align-items:center; gap:10px; padding:14px; border:1px solid var(--line); border-radius:12px;
  background:var(--soft1); color:var(--txt); text-decoration:none; font-size:14px; font-weight:600; cursor:pointer; font-family:inherit; }
.other-item:hover{ border-color:var(--acc); }
.other-ic{ font-size:18px; }
@media(min-width:761px){ .other-sheet{ display:none !important; } }

/* ===== Modul API (cloudflare/domain/server) ===== */
.api-badge{ display:inline-block; padding:2px 9px; border-radius:999px; font-size:11px; font-weight:700; }
.api-on{ background:rgba(40,200,120,.15); color:var(--green); }
.api-off{ background:rgba(255,170,40,.15); color:var(--amber); }
.kv{ display:flex; gap:8px; flex-wrap:wrap; margin:4px 0; }
.kv .chip{ background:var(--soft2); border:1px solid var(--line); border-radius:8px; padding:4px 10px; font-size:12px; }
.cf-toolbar{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin:12px 0; }
.proxied{ color:#f6821f; font-weight:700; }
.dns-modal .note-editor-card{ max-width:460px; gap:8px; }
.dns-modal select, .dns-modal input{ width:100%; background:var(--bg2); border:1px solid var(--line); color:var(--txt); border-radius:8px; padding:9px 11px; font:inherit; }

/* ===== Server: kartu + aksi ===== */
.srvapi-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(300px,1fr)); gap:14px; margin-top:14px; }
.srv-card{ background:linear-gradient(180deg,var(--soft2),var(--soft1)); border:1px solid var(--line); border-radius:14px; padding:14px 16px; position:relative; }
.srv-card-head{ display:flex; align-items:center; gap:8px; margin-bottom:10px; }
.srv-name{ font-weight:700; font-size:15px; word-break:break-all; }
.srv-st{ margin-left:auto; font-size:11px; font-weight:700; padding:3px 10px; border-radius:999px; white-space:nowrap; }
.srv-st.run{ background:rgba(40,200,120,.16); color:var(--green); }
.srv-st.off{ background:rgba(255,80,80,.16); color:var(--red); }
.srv-st.busy{ background:rgba(255,170,40,.16); color:var(--amber); }
.srv-chips{ display:flex; flex-wrap:wrap; gap:6px; margin-bottom:10px; }
.srv-chip{ background:var(--soft2); border:1px solid var(--line); border-radius:8px; padding:3px 9px; font-size:11.5px; color:var(--muted); }
.srv-meta{ font-size:12px; color:var(--muted); line-height:1.8; margin-bottom:12px; }
.srv-meta .ip{ color:var(--txt); font-family:monospace; cursor:pointer; }
.srv-actions{ display:flex; gap:6px; flex-wrap:wrap; align-items:center; }
.srv-menu{ position:relative; margin-left:auto; }
.srv-menu-pop{ position:absolute; right:0; bottom:calc(100% + 6px); background:var(--card); border:1px solid var(--line); border-radius:10px; padding:6px; min-width:190px; z-index:30; display:none; box-shadow:0 12px 34px rgba(0,0,0,.55); }
.srv-menu.open .srv-menu-pop{ display:block; }
.srv-menu-pop button{ display:block; width:100%; text-align:left; background:none; border:0; color:var(--txt); padding:8px 10px; border-radius:7px; cursor:pointer; font:inherit; font-size:13px; }
.srv-menu-pop button:hover{ background:var(--soft3); }
.srv-menu-pop button.danger{ color:var(--red); }
.srv-menu-pop hr{ border:0; border-top:1px solid var(--line); margin:5px 2px; }
.srv-pw{ font-family:monospace; background:var(--bg2); border:1px solid var(--line); border-radius:8px; padding:10px; word-break:break-all; user-select:all; margin:6px 0; }
@media(max-width:760px){ .srvapi-grid{ grid-template-columns:1fr; } }

/* ===== Crypto / Binance ===== */
.cy-bar{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin:10px 0; }
.cy-symbol{ background:var(--card); border:1px solid var(--line); color:var(--txt); border-radius:8px; padding:8px 12px; font:inherit; font-weight:700; width:150px; text-transform:uppercase; }
.cy-tfs{ display:flex; gap:4px; }
.cy-tf{ background:var(--soft2); border:1px solid var(--line); color:var(--muted); border-radius:8px; padding:6px 12px; cursor:pointer; font:inherit; font-size:13px; }
.cy-tf.is-active{ color:#fff; background:linear-gradient(135deg,var(--acc),var(--acc2)); border-color:transparent; }
.cy-ticker{ margin-left:auto; display:flex; align-items:baseline; gap:8px; }
.cy-price{ font-size:18px; font-weight:800; }
.cy-chg{ font-size:13px; font-weight:700; }
.cy-chg.up{ color:var(--green); } .cy-chg.down{ color:var(--red); }
.cy-chart{ width:100%; height:360px; border:1px solid var(--line); border-radius:12px; overflow:hidden; }
.cy-cols{ display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-top:14px; }
.cy-panel{ background:var(--soft1); }
.cy-dec{ border:1px solid var(--line); border-radius:12px; padding:12px 14px; margin-top:4px; }
.cy-dec.buy{ border-color:rgba(61,220,132,.5); background:rgba(61,220,132,.06); }
.cy-dec.sell{ border-color:rgba(255,91,91,.5); background:rgba(255,91,91,.06); }
.cy-dec.close{ border-color:rgba(255,170,40,.5); background:rgba(255,170,40,.06); }
.cy-dec-head{ display:flex; align-items:center; gap:10px; }
.cy-dec-badge{ font-weight:800; font-size:15px; }
.cy-conf{ margin-left:auto; font-size:12px; color:var(--muted); }
.cy-conf-bar{ height:6px; background:var(--soft3); border-radius:3px; margin:8px 0; overflow:hidden; }
.cy-conf-bar span{ display:block; height:100%; background:linear-gradient(90deg,var(--acc),var(--acc2)); }
.cy-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:8px; font-size:13px; margin:6px 0; }
.cy-grid b{ color:var(--muted); font-weight:600; font-size:11px; }
.cy-sig{ font-size:12.5px; color:var(--muted); line-height:1.7; margin-top:6px; }
@media(max-width:760px){ .cy-cols{ grid-template-columns:1fr; } .cy-grid{ grid-template-columns:repeat(2,1fr); } }

/* ===== Panel (aaPanel/CyberPanel) ===== */
.pa-stats{ display:grid; grid-template-columns:repeat(auto-fill,minmax(130px,1fr)); gap:10px; margin:14px 0; }
.pa-stat{ background:linear-gradient(180deg,var(--soft2),var(--soft1)); border:1px solid var(--line); border-radius:12px; padding:12px 14px; }
.pa-stat-v{ font-size:20px; font-weight:800; }
.pa-stat-l{ font-size:12px; color:var(--muted); margin-top:2px; }
.pa-stat-s{ font-size:11px; color:var(--muted); opacity:.85; margin-top:2px; }
.pa-on{ color:var(--green); }
.pa-menubar{ display:flex; gap:8px; flex-wrap:wrap; margin-bottom:14px; }
.pa-cols{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.pa-h{ font-size:14px; margin:0 0 8px; }
.pa-row{ display:flex; align-items:center; gap:8px; padding:7px 10px; border:1px solid var(--line); border-radius:9px; margin-bottom:6px; font-size:13px; }
.pa-row b{ word-break:break-all; }
.pa-row-act{ margin-left:auto; display:flex; gap:5px; flex-shrink:0; }
.pa-dot{ width:8px; height:8px; border-radius:50%; flex-shrink:0; }
.pa-dot.on{ background:var(--green); } .pa-dot.off{ background:var(--red); }
.cy-idr{ font-size:13px; color:var(--muted); }
.cy-kurs{ font-size:11px; color:var(--muted); }
@media(max-width:760px){ .pa-cols{ grid-template-columns:1fr; } }

/* ===== fix tombol terpotong / aksi di tabel ===== */
.btn-mini{ white-space:nowrap; display:inline-flex; align-items:center; gap:4px; }
.tbl td.ta-right{ white-space:nowrap; width:1%; }
.tbl td .btn-mini, .tbl td a.btn-mini{ vertical-align:middle; }
.cf-toolbar{ flex-wrap:wrap; gap:8px; }
.srv-actions .btn-mini, .pa-menubar .btn-mini, .pa-row-act .btn-mini{ white-space:nowrap; }
.tbl{ width:100%; }

/* ===== login figure + fingerprint ===== */
.login-figure{ display:block; width:104px; height:auto; margin:0 auto 6px; filter:drop-shadow(0 0 14px rgba(var(--acc-rgb),.55)) drop-shadow(0 0 30px rgba(var(--acc-rgb),.25)); }
.login-figure .eye{ animation:eyepulse 2.6s ease-in-out infinite; }
@keyframes eyepulse{ 0%,100%{opacity:.85;filter:drop-shadow(0 0 3px var(--acc))} 50%{opacity:1;filter:drop-shadow(0 0 8px var(--acc))} }
.login-fp{ width:100%; margin-top:10px; padding:11px; border-radius:10px; cursor:pointer;
  background:rgba(var(--acc-rgb),.08); color:var(--txt); border:1px solid rgba(var(--acc-rgb),.4); font-weight:600; }
.login-fp:hover{ background:rgba(var(--acc-rgb),.16); box-shadow:0 0 16px rgba(var(--acc-rgb),.25); }
.login-alt{ display:block; text-align:center; margin-top:12px; color:var(--muted); font-size:13px; }
.login-msg{ text-align:center; margin-top:8px; color:var(--muted); font-size:13px; min-height:18px; }

/* ===== Saham ===== */
.sh-head{ display:flex; justify-content:space-between; align-items:center; gap:12px; flex-wrap:wrap; margin:12px 0 8px; }
.sh-name{ font-size:14px; color:var(--muted); }
.sh-card{ border:1px solid var(--line); border-radius:14px; padding:16px; margin-top:14px; background:linear-gradient(180deg,rgba(255,255,255,.025),transparent); }
.sh-top{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.sh-rec{ font-weight:800; padding:5px 14px; border-radius:20px; font-size:14px; letter-spacing:.5px; }
.b-buy,.b-acc{ background:rgba(63,185,80,.18); color:var(--green); border:1px solid rgba(63,185,80,.5); }
.b-hold{ background:rgba(224,163,23,.16); color:var(--amber); border:1px solid rgba(224,163,23,.45); }
.b-red,.b-sell,.b-avoid{ background:rgba(255,43,59,.16); color:var(--red); border:1px solid rgba(255,43,59,.5); }
.sh-hz{ font-size:12px; color:var(--muted); text-transform:uppercase; }
.sh-liq{ margin-left:auto; font-size:12px; color:var(--muted); } .sh-liq.liq-bad{ color:var(--red); font-weight:700; }
.sh-conv{ display:flex; align-items:center; gap:10px; margin-top:12px; }
.sh-conv-bar{ flex:1; height:8px; border-radius:6px; background:var(--card2); overflow:hidden; }
.sh-conv-bar span{ display:block; height:100%; background:linear-gradient(90deg,var(--acc2),var(--acc)); box-shadow:0 0 10px var(--glow); }
.sh-conv-n{ font-size:12px; color:var(--muted); white-space:nowrap; }
.sh-grid2{ display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.sh-box{ border:1px solid var(--line); border-radius:12px; padding:12px; } .sh-box h4{ margin:0 0 6px; font-size:14px; } .sh-box p{ margin:4px 0; font-size:13px; }
.sh-buy{ border-color:rgba(63,185,80,.35); } .sh-sell{ border-color:rgba(255,43,59,.35); }
.sh-sec{ margin-top:14px; } .sh-sec h4{ margin:0 0 4px; font-size:14px; } .sh-sec p{ margin:2px 0; font-size:13px; line-height:1.55; }
.sh-ul{ margin:4px 0; padding-left:18px; font-size:13px; } .sh-ul li{ margin:2px 0; }
.sh-news{ font-size:13px; padding:5px 0; border-bottom:1px solid var(--line); }
.sh-imp{ font-size:11px; padding:1px 7px; border-radius:10px; margin-right:4px; }
.imp-positif{ background:rgba(63,185,80,.18); color:var(--green); } .imp-negatif{ background:rgba(255,43,59,.16); color:var(--red); } .imp-netral{ background:var(--card2); color:var(--muted); }
.sh-raw{ background:var(--card2); padding:8px; border-radius:8px; font-size:11px; overflow:auto; white-space:pre-wrap; }
@media(max-width:760px){ .sh-grid2{ grid-template-columns:1fr; } }

/* ===== dashboard hero (figur jubah misterius) ===== */
.dash-hero{ display:flex; align-items:center; gap:20px; overflow:hidden; position:relative;
  background:radial-gradient(120% 140% at 12% 20%, rgba(var(--acc-rgb),.10), transparent 55%), var(--card); }
.dash-figure{ width:84px; height:auto; flex-shrink:0; filter:drop-shadow(0 0 12px rgba(var(--acc-rgb),.5)) drop-shadow(0 0 26px rgba(var(--acc-rgb),.22)); }
.dash-figure .eye{ animation:eyepulse 2.6s ease-in-out infinite; }
.dash-hero-txt h2{ margin:0 0 4px; font-size:20px; }
.dash-hero-txt p{ margin:0; }
@media(max-width:600px){ .dash-figure{ width:60px; } .dash-hero-txt h2{ font-size:17px; } }

/* ===== Monitor ===== */
.mon-badge{ font-size:12px; font-weight:700; padding:3px 10px; border-radius:20px; white-space:nowrap; }
.mon-badge.up{ background:rgba(63,185,80,.16); color:var(--green); border:1px solid rgba(63,185,80,.4); }
.mon-badge.down{ background:rgba(255,43,59,.16); color:var(--red); border:1px solid rgba(255,43,59,.45); }
.mon-badge.unk{ background:var(--card2); color:var(--muted); }

/* total saldo crypto */
.cy-baltot td{ border-top:1px solid var(--line); padding-top:7px; }

/* ===== sidebar grup ===== */
.nav-group{ font-size:10px; text-transform:uppercase; letter-spacing:.09em; color:var(--dim); padding:14px 12px 4px; font-weight:700; }
.nav .nav-group:first-child{ padding-top:2px; }
/* --- sidebar: grup collapsible + search --- */
.nav-search{ display:flex; align-items:center; gap:6px; margin:4px 6px 8px; padding:7px 10px; background:var(--card2); border:1px solid var(--line); border-radius:9px; }
.nav-search .ns-ic{ font-size:13px; opacity:.6; flex:none; }
.nav-search input{ flex:1; min-width:0; background:transparent; border:0; outline:none; color:var(--txt); font-size:13px; }
.nav-search input::placeholder{ color:var(--dim); }
.nav-search .ns-x{ flex:none; background:none; border:0; color:var(--muted); cursor:pointer; font-size:12px; padding:0 2px; }
.nav-search .ns-x:hover{ color:var(--txt); }
.nav-group-btn{ display:flex; align-items:center; width:100%; background:none; border:0; cursor:pointer; }
.nav-group-btn .ng-label{ flex:1; text-align:left; }
.nav-group-btn:hover .ng-label{ color:var(--muted); }
.ng-chev{ font-size:9px; opacity:.55; transition:transform .18s; }
.nav-grp.open>.nav-group-btn .ng-chev{ transform:rotate(90deg); opacity:.85; }
.nav-sub{ display:none; flex-direction:column; gap:2px; }
.nav-grp.open>.nav-sub{ display:flex; }
@media(max-width:860px){
  .nav-search{ display:none; }
  .nav-group-btn{ display:none; }
  .nav-sub{ display:flex !important; }
}
.other-group{ font-size:10px; text-transform:uppercase; letter-spacing:.08em; color:var(--dim); font-weight:700; margin:12px 4px 2px; }

/* ===== Crypto revisi ===== */
.cy-search-wrap{ position:relative; }
.cy-suggest{ display:none; position:absolute; top:100%; left:0; right:0; z-index:40; margin-top:4px; background:var(--card); border:1px solid var(--line); border-radius:10px; max-height:280px; overflow:auto; box-shadow:0 12px 30px rgba(0,0,0,.5); }
.cy-sug-item{ padding:8px 12px; cursor:pointer; font-size:14px; display:flex; gap:2px; align-items:center; }
.cy-sug-item:hover{ background:rgba(var(--acc-rgb),.12); }
.cy-mk{ display:grid; grid-template-columns:repeat(auto-fill,minmax(210px,1fr)); gap:6px; margin-top:8px; }
.mk-row{ display:flex; align-items:center; gap:8px; padding:7px 10px; border:1px solid var(--line); border-radius:9px; cursor:pointer; font-size:13px; }
.mk-row:hover{ border-color:rgba(var(--acc-rgb),.5); background:rgba(var(--acc-rgb),.06); }
.mk-base{ font-weight:700; } .mk-price{ margin-left:auto; color:var(--muted); font-family:monospace; font-size:12px; }
.mk-chg{ font-weight:700; min-width:64px; text-align:right; } .mk-chg.up{ color:var(--green); } .mk-chg.down{ color:var(--red); }
.mk-tab.is-active{ background:rgba(var(--acc-rgb),.16); border-color:rgba(var(--acc-rgb),.5); color:var(--txt); }
.cy-subtabs{ display:flex; gap:6px; margin:4px 0 10px; }
.cy-subtab{ padding:5px 12px; border-radius:16px; border:1px solid var(--line); background:transparent; color:var(--muted); cursor:pointer; font-size:13px; }
.cy-subtab.is-active{ background:rgba(var(--acc-rgb),.14); border-color:rgba(var(--acc-rgb),.5); color:var(--txt); }
.cy-order-bar{ display:flex; align-items:center; gap:8px; margin-bottom:10px; }
.cy-buy{ background:rgba(63,220,132,.16)!important; border-color:rgba(63,220,132,.5)!important; color:var(--green)!important; }
.cy-sell{ background:rgba(255,91,91,.16)!important; border-color:rgba(255,91,91,.5)!important; color:var(--red)!important; }
.cy-today-card{ border:1px solid rgba(var(--acc-rgb),.35); border-radius:12px; padding:12px; margin-bottom:10px; background:linear-gradient(180deg,rgba(var(--acc-rgb),.06),transparent); }
.cy-today-h{ font-weight:700; margin-bottom:6px; }
.cy-pick{ padding:7px 0; border-bottom:1px solid var(--line); cursor:pointer; }
.cy-pick:hover b{ color:var(--acc); }
.cy-pick-act{ font-size:11px; text-transform:uppercase; color:var(--muted); }
.cy-risk{ font-size:11px; padding:1px 7px; border-radius:10px; margin-left:4px; }
.cy-risk.r-lo{ background:rgba(63,220,132,.18); color:var(--green); } .cy-risk.r-md{ background:rgba(224,163,23,.16); color:var(--amber); } .cy-risk.r-hi{ background:rgba(255,91,91,.16); color:var(--red); }

/* ===== dashboard rate cards ===== */
.rate-cards{ display:grid; grid-template-columns:repeat(2,1fr); gap:12px; margin-bottom:14px; }
.rate-card{ display:flex; align-items:center; gap:14px; padding:16px 18px; }
.rate-flag{ font-size:30px; line-height:1; }
.rate-label{ font-size:12px; color:var(--muted); margin-bottom:2px; }
.rate-val{ font-size:20px; font-weight:800; letter-spacing:.2px; }
@media(max-width:560px){ .rate-cards{ grid-template-columns:1fr; } }

/* ===== crypto: rapatkan kontrol AI + filter riwayat ===== */
.cy-ai-inline{ display:flex; align-items:center; gap:12px; flex-wrap:wrap; justify-content:flex-start; }
.cy-ai-inline .cy-short-lbl{ display:inline-flex; align-items:center; gap:5px; white-space:nowrap; }
.cy-ai-inline #cy-analyze{ margin-left:2px; }
.cy-hist-filter{ display:flex; gap:6px; margin:2px 0 10px; flex-wrap:wrap; }
.cy-hf{ padding:4px 12px; border-radius:14px; border:1px solid var(--line); background:transparent; color:var(--muted); cursor:pointer; font-size:12px; }
.cy-hf.is-active{ background:rgba(var(--acc-rgb),.14); border-color:rgba(var(--acc-rgb),.5); color:var(--txt); }

/* ===== Investasi tabs ===== */
.inv-tabbar{ display:flex; gap:8px; margin-bottom:14px; overflow-x:auto; padding-bottom:2px; -webkit-overflow-scrolling:touch; }
.inv-tab{ flex:0 0 auto; padding:9px 16px; border-radius:12px; border:1px solid var(--line); background:transparent; color:var(--muted); cursor:pointer; font-size:14px; font-weight:600; white-space:nowrap; }
.inv-tab.is-active{ background:rgba(var(--acc-rgb),.16); border-color:rgba(var(--acc-rgb),.55); color:var(--txt); }

/* ===== Saham (G3) ===== */
.sh-search-wrap{ position:relative; margin-bottom:12px; }
.sh-input{ width:100%; }
.sh-suggest{ display:none; position:absolute; top:100%; left:0; right:0; z-index:40; margin-top:4px; background:var(--card); border:1px solid var(--line); border-radius:10px; max-height:300px; overflow:auto; box-shadow:0 12px 30px rgba(0,0,0,.5); }
.sh-sug{ padding:9px 12px; cursor:pointer; font-size:14px; display:flex; gap:6px; align-items:center; }
.sh-sug:hover{ background:rgba(var(--acc-rgb),.12); }
.sh-ex{ margin-left:auto; font-size:11px; color:var(--dim); border:1px solid var(--line); border-radius:6px; padding:0 6px; }
.sh-q{ border:1px solid var(--line); border-radius:12px; padding:14px; }
.sh-q-top{ display:flex; align-items:flex-start; gap:12px; flex-wrap:wrap; }
.sh-q-tkr{ font-weight:700; font-size:15px; }
.sh-q-price{ font-size:22px; font-weight:800; margin-top:2px; }
.sh-q-btns{ margin-left:auto; display:flex; gap:8px; align-items:center; }
.sh-q-meta{ margin-top:8px; }
/* Grup tombol Analisa AI + dropdown model */
.ai-an-group{ display:inline-flex; align-items:stretch; gap:0; }
.ai-an-group .sh-an{ border-top-right-radius:0; border-bottom-right-radius:0; }
.ai-model-sel{ border:1px solid var(--line); border-left:none; background:var(--soft2); color:var(--txt);
  border-top-right-radius:10px; border-bottom-right-radius:10px; padding:0 6px; font-size:12px; cursor:pointer; max-width:104px; }
.ai-model-sel:focus{ outline:none; border-color:rgba(var(--acc-rgb),.5); }
.sh-rep-grid{ display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-top:8px; }
.sh-rep-col{ border:1px solid var(--line); border-radius:10px; padding:10px; font-size:13px; }
.sh-rep-col.sh-buy{ border-color:rgba(63,220,132,.4); background:rgba(63,220,132,.05); }
.sh-rep-col.sh-sell{ border-color:rgba(255,91,91,.4); background:rgba(255,91,91,.05); }
.sh-rep-h{ font-weight:700; margin-bottom:5px; }
@media(max-width:560px){ .sh-rep-grid{ grid-template-columns:1fr; } }
.sh-wl-row{ display:flex; align-items:center; gap:8px; padding:9px 4px; border-bottom:1px solid var(--line); }
.sh-wl-tkr{ cursor:pointer; flex:1; } .sh-wl-tkr:hover b{ color:var(--acc); }
.sh-wl-act{ display:flex; gap:6px; }

/* ===== Aset (G5) ===== */
.nw-total{ font-size:26px; font-weight:800; margin-bottom:2px; }
.in-dot{ display:inline-block; width:8px; height:8px; border-radius:50%; margin-right:6px; vertical-align:middle; }
.in-dot.c{ background:#f7931a; } .in-dot.p{ background:#0070ba; }
.ex-cathead td{ background:var(--soft1); font-weight:700; font-size:12px; text-transform:uppercase; letter-spacing:.03em; color:var(--muted); padding-top:10px; }
.ex-catdot{ display:inline-block; width:10px; height:10px; border-radius:3px; margin-right:7px; vertical-align:middle; }
.ex-row td{ vertical-align:middle; }
.ex-paid .ex-name{ text-decoration:line-through; color:var(--muted); }
.ex-pay{ min-width:74px; }
.ex-pay.is-paid{ background:rgba(63,220,132,.16); border-color:rgba(63,220,132,.5); color:var(--green); }

/* ===== dashboard finance card (Gel A) ===== */
.fin-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:12px; }
.fin-cell{ border:1px solid var(--line); border-radius:12px; padding:12px 14px; }
.fin-l{ font-size:12px; color:var(--muted); margin-bottom:4px; }
.fin-v{ font-size:18px; font-weight:800; }
.fin-sub{ margin-top:2px; }
.fin-in{ border-color:rgba(63,220,132,.4); background:rgba(63,220,132,.05); }
.fin-in .fin-v{ color:var(--green); }
.fin-out{ border-color:rgba(255,91,91,.4); background:rgba(255,91,91,.05); }
.fin-out .fin-v{ color:var(--red); }

/* ===== watchlist kartu (Gel A) ===== */
.sh-wl-card{ border:1px solid var(--line); border-radius:12px; padding:12px; margin-bottom:10px; }
.sh-wl-top{ display:flex; align-items:center; gap:8px; }
.sh-wl-tkr{ cursor:pointer; flex:1; } .sh-wl-tkr:hover b{ color:var(--acc); }
.sh-wl-act{ display:flex; gap:6px; }
.sh-wl-q{ margin-top:8px; }
.sh-wl-price{ font-size:18px; font-weight:800; }
.sh-wl-anbox:not(:empty){ margin-top:10px; }

/* ===== movers saham (B1) ===== */
.mv-tab.is-active{ background:rgba(var(--acc-rgb),.16); border-color:rgba(var(--acc-rgb),.55); color:var(--txt); }

/* ===== income filter buttons (Gel A fix) ===== */
.in-f{ padding:6px 14px; border:1px solid var(--line); background:transparent; color:var(--muted); border-radius:999px; cursor:pointer; font-size:13px; margin-right:6px; }
.in-f:hover{ color:var(--txt); border-color:rgba(var(--acc-rgb),.5); }
.in-f.is-active{ background:rgba(var(--acc-rgb),.16); border-color:rgba(var(--acc-rgb),.55); color:var(--txt); font-weight:600; }

/* ===== fix overlay dropdown US/IDX (search di atas kartu lain) ===== */
.sh-search-card{ position:relative; z-index:30; overflow:visible; }
.sh-search-wrap{ position:relative; z-index:31; }
.sh-suggest{ z-index:300 !important; }

/* ===== streaming AI (B2) ===== */
.ai-stream{ padding:12px 14px; line-height:1.65; font-size:14px; }
.ai-stream b{ color:var(--txt); }
.ai-stream ul{ margin:6px 0 6px 2px; padding-left:18px; }
.ai-stream li{ margin:2px 0; }
.ai-cursor{ display:inline-block; width:7px; color:var(--acc); animation:aiblink 1s steps(2) infinite; font-weight:700; }
@keyframes aiblink{ 0%,50%{opacity:1} 51%,100%{opacity:0} }

/* ===== instrumen reksadana/SBN (B3) ===== */
.ins-cats{ flex-wrap:wrap; gap:6px; }
.ins-cat{ cursor:pointer; }
.ins-cat.is-active{ background:rgba(var(--acc-rgb),.16); border-color:rgba(var(--acc-rgb),.55); color:var(--txt); }
.ins-row{ cursor:pointer; }
.ins-row:hover{ background:var(--soft1); }
.ins-sel:not(:empty){ margin:10px 0 4px; }
.ins-selrow{ display:flex; align-items:center; gap:8px; padding:10px 12px; border:1px solid rgba(var(--acc-rgb),.4); border-radius:10px; background:rgba(var(--acc-rgb),.05); }
.ins-wlrow{ cursor:pointer; }

/* ===== chart saham (candle/line + timeframe) ===== */
.sh-chart-bar{ display:flex; flex-wrap:wrap; gap:8px; align-items:center; justify-content:space-between; margin:12px 0 8px; }
.tf-group,.type-group{ display:flex; gap:4px; flex-wrap:wrap; }
.tfb.is-active,.tyb.is-active{ background:rgba(var(--acc-rgb),.16); border-color:rgba(var(--acc-rgb),.55); color:var(--txt); font-weight:600; }
.sh-chart{ width:100%; min-height:340px; border:1px solid var(--line); border-radius:12px; overflow:hidden; }

/* ===== detail ala Ajaib (tab) ===== */
.sh-detail{ margin-top:16px; }
.sh-dtabs{ display:flex; flex-wrap:wrap; gap:6px; margin-bottom:12px; border-bottom:1px solid var(--line); padding-bottom:10px; }
.dtab.is-active{ background:rgba(var(--acc-rgb),.16); border-color:rgba(var(--acc-rgb),.55); color:var(--txt); font-weight:600; }
.kv-tbl td{ padding:7px 4px; border-bottom:1px solid var(--soft2); }
.kv-tbl td:first-child{ font-size:13px; }
.sh-dpane h4.dh{ margin:14px 0 6px; font-size:13px; color:var(--acc); }

/* ===== mini chart watchlist ===== */
.sh-wl-chart.is-active{ background:rgba(var(--acc-rgb),.16); border-color:rgba(var(--acc-rgb),.55); }
.sh-wl-chartbox:not(:empty){ margin-top:10px; }
.sh-wl-chartbar{ display:flex; gap:4px; margin-bottom:6px; }
.wtb.is-active{ background:rgba(var(--acc-rgb),.16); border-color:rgba(var(--acc-rgb),.55); color:var(--txt); }
.sh-wl-chartel{ width:100%; height:220px; border:1px solid var(--line); border-radius:10px; overflow:hidden; }

/* ===== AI sedang mengetik (background beda) ===== */
.ai-stream.ai-typing{ background:linear-gradient(180deg, rgba(var(--acc-rgb),.10), rgba(var(--acc-rgb),.03)); border:1px solid rgba(var(--acc-rgb),.35); border-radius:12px; box-shadow:0 0 0 3px rgba(var(--acc-rgb),.05) inset; }
.ai-typing-tag{ display:inline-block; font-size:12px; color:var(--acc); font-weight:600; padding:6px 12px 0; }
.ai-stream-body{ padding:6px 14px 12px; line-height:1.65; font-size:14px; }
.ai-stream-body b{ color:var(--txt); }
.ai-stream-body ul{ margin:6px 0 6px 2px; padding-left:18px; } .ai-stream-body li{ margin:2px 0; }

/* ===== domain (revisi) ===== */
.dm-check{ display:inline-flex; align-items:center; gap:6px; font-size:13px; color:var(--muted); white-space:nowrap; cursor:pointer; }
.dm-check input{ width:15px; height:15px; margin:0; accent-color:var(--acc); cursor:pointer; }
.dm-wrap{ overflow-x:auto; -webkit-overflow-scrolling:touch; }
.dm-tbl th,.dm-tbl td{ white-space:nowrap; }
.dm-act{ white-space:nowrap; }
.dm-act .btn-mini{ margin-left:4px; }

/* ===== mobile friendly (Aset, Domain, dsb) ===== */
@media (max-width:640px){
  .card{ padding:14px 12px; }
  .card-head{ flex-wrap:wrap; gap:6px; }
  .fm-tools{ flex-wrap:wrap; gap:6px; }
  .inv-tabbar{ flex-wrap:nowrap; overflow-x:auto; -webkit-overflow-scrolling:touch; }
  .cy-hist-filter{ flex-wrap:wrap; }
  .in-f{ margin-bottom:6px; }
  .fin-grid{ grid-template-columns:1fr 1fr; }
  /* tabel yang panjang -> bisa digeser, gak kepotong */
  #in-box, #ex-box, .dm-wrap, #nc-result, #nc-mine{ overflow-x:auto; -webkit-overflow-scrolling:touch; }
  #in-box table, #ex-box table, #nc-result table, #nc-mine table, .dm-tbl{ min-width:540px; }
  .ex-pay{ min-width:0; padding:5px 8px; }
  .form-inline{ flex-wrap:wrap; gap:8px; }
  .form-inline input, .form-inline select, .cy-input{ min-width:0; }
  .nw-total{ font-size:22px; }
}
@media (max-width:400px){
  .fin-grid{ grid-template-columns:1fr; }
}

/* ===== polish mobile menyeluruh (audit Fable) ===== */
@media (max-width:640px){
  .srv-tabbar{ flex-wrap:wrap; gap:6px; }
  .srv-tab{ font-size:13px; }
  .cf-toolbar{ flex-wrap:wrap; gap:6px; }
  .srvapi-grid{ grid-template-columns:1fr; }
  .sh-chart{ min-height:260px; height:260px; }
  .sh-dtabs{ flex-wrap:nowrap; overflow-x:auto; -webkit-overflow-scrolling:touch; }
  .tf-group,.type-group{ flex-wrap:wrap; }
  .sh-q-top{ flex-wrap:wrap; gap:8px; }
  .sh-q-btns{ display:flex; gap:6px; flex-wrap:wrap; }
  table.tbl{ font-size:12.5px; }
  .kv-tbl td{ padding:6px 3px; }
  /* tabel lebar di kartu: bisa digeser, jangan kepotong */
  .fm-list-wrap, .cf-table-wrap, #nc-mine, #nc-result, #in-box, #ex-box,
  .log-wrap, .tbl-wrap, .bisnis-table-wrap { overflow-x:auto; -webkit-overflow-scrolling:touch; }
  .note-editor-card{ max-height:92vh; overflow-y:auto; }
  .content{ padding-left:12px; padding-right:12px; }
}
@media (max-width:400px){
  .srv-chip{ font-size:11px; }
  .btn-mini{ padding:5px 8px; }
}

/* ===== File Manager embed (Files tab) ===== */
.fm-embed-wrap{ margin-top:12px; border:1px solid var(--line); border-radius:12px; overflow:hidden; }
.fm-embed{ width:100%; height:72vh; min-height:460px; border:0; display:block; background:var(--bg2); }
@media (max-width:640px){ .fm-embed{ height:78vh; } }

/* ===== aaPanel deep-link + kelola situs ===== */
.pa-deep{ margin:10px 0; border:1px solid var(--line); border-radius:10px; padding:8px 12px; }
.pa-deep summary{ cursor:pointer; font-weight:600; font-size:13px; color:var(--acc); }
.pa-deep-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(120px,1fr)); gap:6px; margin-top:10px; }
.pa-deep-item{ padding:7px 10px; border:1px solid var(--line); border-radius:8px; font-size:12.5px; text-align:center; }
.pa-deep-item:hover{ border-color:rgba(var(--acc-rgb),.5); color:var(--acc); }
.mg-tabs{ display:flex; gap:6px; margin:8px 0 12px; flex-wrap:wrap; }
.mg-tab.is-active{ background:rgba(var(--acc-rgb),.16); border-color:rgba(var(--acc-rgb),.55); color:var(--txt); }

/* ===== Server > Website (grouping panel) ===== */
.w-grp{ margin-bottom:18px; }
.w-grp-head{ padding:8px 0; border-bottom:1px solid var(--line); margin-bottom:6px; }
.w-act{ white-space:nowrap; }
.w-act .btn-mini{ margin-left:3px; }

/* ===== Monitor: info cron + picker ===== */
.mon-info{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin:8px 0; }
.mon-cron summary, .mon-picker summary{ cursor:pointer; font-size:13px; color:var(--acc); font-weight:600; }
.mon-pre{ background:var(--bg2); border:1px solid var(--line); border-radius:8px; padding:8px 10px; font-size:12px; overflow-x:auto; }
.mon-picker{ margin:6px 0 12px; border:1px solid var(--line); border-radius:10px; padding:8px 12px; }
.mp-grp{ margin:8px 0 4px; color:var(--muted); }
.mp-item{ display:inline-flex; align-items:center; gap:5px; padding:4px 8px; margin:2px; border:1px solid var(--line); border-radius:8px; font-size:12.5px; cursor:pointer; }
.mp-item input{ accent-color:var(--acc); }

/* ===== Log Server interaktif ===== */
.lg-bar{ display:flex; gap:8px; flex-wrap:wrap; margin:10px 0; align-items:center; }
.lg-toolbar{ display:flex; gap:8px; flex-wrap:wrap; align-items:center; margin-bottom:8px; padding:8px; background:var(--soft1); border:1px solid var(--line); border-radius:10px; }
.lg-filter{ flex:1; min-width:150px; }
.lg-levels{ display:inline-flex; gap:4px; }
.lg-lv{ padding:5px 10px; font-size:12px; border:1px solid var(--line); border-radius:7px; background:transparent; color:var(--muted); cursor:pointer; }
.lg-lv.is-active{ background:rgba(var(--acc-rgb),.16); border-color:rgba(var(--acc-rgb),.55); color:var(--txt); }
.lg-chk{ display:inline-flex; align-items:center; gap:5px; font-size:12.5px; color:var(--muted); }
.lg-chk input{ accent-color:var(--acc); }
.lg-count{ font-size:12px; color:var(--muted); }
.lg-live-badge{ font-size:12px; color:#22c55e; font-weight:700; animation:lgpulse 1.6s infinite; }
@keyframes lgpulse{ 0%,100%{opacity:1} 50%{opacity:.35} }
.lg-out{ background:var(--bg2); border:1px solid var(--line); border-radius:10px; padding:10px 12px; max-height:62vh; overflow:auto; font-family:ui-monospace,Menlo,Consolas,monospace; font-size:12px; line-height:1.5; white-space:pre; }
.lg-out.lg-wrap{ white-space:pre-wrap; word-break:break-all; }
.lg-line{ padding:0 4px; border-radius:3px; }
.lg-line.lg-error{ color:var(--red); background:rgba(255,43,59,.07); }
.lg-line.lg-warn{ color:#f5c451; }
.lg-line.lg-info{ color:#7fd1ff; }
.lg-out mark{ background:var(--acc); color:#fff; border-radius:2px; padding:0 1px; }
.lg-error{ color:var(--red); }
@media (max-width:640px){ .lg-out{ font-size:11px; max-height:56vh; } }

/* ===== Server>Website kelola pane ===== */
.wm-pane{ margin-top:6px; }

/* ===== Website page (favorit, star, backup, pointing) ===== */
.wf-fav-card{ border:1px solid var(--line); border-radius:12px; padding:10px 12px; background:linear-gradient(180deg,rgba(var(--acc-rgb),.06),transparent); }
.wf-fav-title{ font-weight:700; font-size:13px; margin-bottom:8px; }
.wf-fav-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(190px,1fr)); gap:8px; }
.wf-fav-item{ display:flex; align-items:center; gap:6px; padding:7px 10px; border:1px solid var(--line); border-radius:9px; background:var(--card); font-size:13px; }
.wf-fav-item a{ flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.wf-fav-src{ font-size:10px; color:var(--muted); border:1px solid var(--line); border-radius:6px; padding:1px 5px; }
.wf-unfav{ border:0; background:transparent; color:var(--muted); cursor:pointer; font-size:13px; }
.wf-unfav:hover{ color:var(--acc); }
.wf-toolbar{ margin-top:10px; }
.wf-bset{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.wf-star{ border:0; background:transparent; cursor:pointer; font-size:16px; color:#3a3a42; line-height:1; }
.wf-star.is-fav{ color:#f5c451; }
.wf-note summary{ cursor:pointer; color:var(--acc); font-size:13px; font-weight:600; }

/* ===== Website migrasi/mapping ===== */
.wf-map{ border-top:1px solid var(--line); padding-top:10px; }
.wf-maprow{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; padding:5px 0; }
.wf-maprow select{ min-width:180px; }
.mig-btns .btn-mini,.mig-btns .btn-primary{ font-size:12px; }

/* ===== menu restart service ===== */
.srv-menu-lbl{ font-size:11px; color:var(--muted); padding:4px 8px 2px; font-weight:600; }
.srv-menu-pop [data-svc]{ font-size:12.5px; }

/* ===== tbl-scroll (auto-wrap dari app.js): tabel geser di mobile ===== */
.tbl-scroll{ overflow-x:auto; -webkit-overflow-scrolling:touch; max-width:100%; }
.tbl-scroll > table{ min-width:100%; }

/* ===== audit mobile menyeluruh ===== */
@media (max-width:640px){
  .grid-2{ grid-template-columns:1fr !important; }
  .form-inline{ flex-wrap:wrap; }
  .form-inline > *{ min-width:0; }
  .form-inline input, .form-inline select{ flex:1 1 140px; min-width:0; }
  .note-editor-card{ width:94vw; max-width:94vw; max-height:92vh; overflow-y:auto; }
  .card-head h2{ font-size:17px; }
  .pa-cols{ grid-template-columns:1fr !important; }
  .pa-deep-grid{ grid-template-columns:repeat(2,1fr); }
  .wf-fav-grid{ grid-template-columns:1fr; }
  .cy-hist-filter, .sh-q-top, .lg-bar, .lg-toolbar, .wf-bset, .mig-btns{ flex-wrap:wrap; }
  .updater-frame{ min-height:70vh; }
  .w-act .btn-mini{ padding:4px 6px; font-size:11.5px; margin-left:2px; }
  .chat-main{ padding-left:8px; padding-right:8px; }
  .tabbar{ overflow-x:auto; -webkit-overflow-scrolling:touch; flex-wrap:nowrap; }
  .theme-pick{ flex-wrap:wrap; }
}

/* ===== MODE TERANG ===== */
[data-mode="light"]{ color-scheme:light; }
[data-mode="light"] .lg-out,
[data-mode="light"] .mon-pre{ background:#f0f0f3; color:#222; }
[data-mode="light"] .lg-line.lg-error{ color:#c01822; background:rgba(255,43,59,.08); }
[data-mode="light"] .lg-line.lg-warn{ color:#8a6d00; }
[data-mode="light"] .lg-line.lg-info{ color:#0b6aa8; }
[data-mode="light"] .updater-frame, [data-mode="light"] .fm-embed{ background:var(--bg); }
[data-mode="light"] .srv-card, [data-mode="light"] .wf-fav-item{ background:var(--card); }
[data-mode="light"] .btn-mini, [data-mode="light"] .cy-input, [data-mode="light"] input, [data-mode="light"] select, [data-mode="light"] textarea{ color:var(--txt); }
[data-mode="light"] ::placeholder{ color:#9a9aa5; }
[data-mode="light"] .bottom-nav, [data-mode="light"] .other-sheet{ background:var(--card); border-color:var(--line); }
[data-mode="light"] .sidebar{ background:linear-gradient(180deg, var(--glass-hi), var(--glass-lo)); border-color:var(--line); }
[data-mode="light"] .srv-menu-pop{ background:var(--card); border-color:var(--line); box-shadow:0 8px 24px rgba(0,0,0,.14); }
[data-mode="light"] mark{ color:#fff; }
/* JANGAN paksa putih di semua .badge — badge-green/red/amber punya latar tint terang
   + teks berwarna sendiri. Putih hanya untuk badge berlatar solid (.api-badge). */
[data-mode="light"] .api-badge{ color:#fff; }
/* Modal overlays & popups */
[data-mode="light"] .web-popup{ background:rgba(246,248,251,.80); }
[data-mode="light"] .web-popup-card{ background:var(--card); box-shadow:0 12px 48px rgba(0,0,0,.12); }
[data-mode="light"] .fm-editor{ background:rgba(246,248,251,.80); }
[data-mode="light"] .fm-editor-card{ background:var(--card); }
[data-mode="light"] .note-editor{ background:rgba(246,248,251,.80); }

/* modal selalu paling atas + tanpa scroll-jump */
.note-editor{ z-index:1200; }

/* ===== variabel soft/glass (dark default) ===== */
:root{
  --soft1:rgba(255,255,255,.03); --soft2:rgba(255,255,255,.05);
  --soft3:rgba(255,255,255,.08); --soft4:rgba(255,255,255,.12);
  --glass:rgba(18,18,21,.72); --glass2:rgba(13,13,15,.62);
  --glass-hi:rgba(13,13,15,.82); --glass-lo:rgba(8,8,10,.82);
  --glass-solid:rgba(18,18,21,.97);
}
/* ===== MODE TERANG: nilai variabel ===== */
body[data-mode="light"]{
  --bg:#eef0f4; --bg2:#e4e7ee; --card:#ffffff; --card2:#f3f5f9;
  --line:#d3d8e2; --txt:#1a1c22; --muted:#5a6472; --dim:#8a93a2;
  --soft1:rgba(20,30,50,.04); --soft2:rgba(20,30,50,.07);
  --soft3:rgba(20,30,50,.10); --soft4:rgba(20,30,50,.14);
  --glass:rgba(255,255,255,.86); --glass2:rgba(255,255,255,.78);
  --glass-hi:rgba(255,255,255,.92); --glass-lo:rgba(246,248,251,.92);
  --glass-solid:rgba(255,255,255,.98);
  --green:#12a04a; --red:#e0192a; --amber:#b57e00;
  --cyan:#0f766e; --blue:#1d4ed8; --info:#0e7490;
  /* KUNCI ALIAS: --bg-alt/--fg/--fg-subtle/--border didefinisikan di :root sbg
     var(--card2) dst → SUDAH ter-resolve jadi warna GELAP di :root & diwariskan
     sbg nilai konkret. WAJIB diredefinisikan di sini agar re-resolve ke nilai
     terang. Tanpa ini: kartu dashboard/bisnis (.prj-metric dll) tetap hitam &
     teksnya tak terbaca di mode terang. */
  --border:var(--line); --bg-alt:var(--card2); --fg:var(--txt); --fg-subtle:var(--muted);
  /* KUNCI: <html> (induk body) pakai var(--bg) dari :root yg gelap — variabel
     di body TIDAK diwariskan ke atas. Beri body latar solid terang + samakan
     latar html lewat background-color di :root override agar tak ada sisa hitam. */
  background:#eef0f4 !important;
}
/* Latar <html> juga dibuat terang di mode light (fixed gradient gelapnya diganti) */
html:has(body[data-mode="light"]){ background:#eef0f4 !important; }
/* input di mode terang: putih dgn garis jelas (bukan abu gelap) */
body[data-mode="light"] input,
body[data-mode="light"] select,
body[data-mode="light"] textarea,
body[data-mode="light"] .cy-input,
body[data-mode="light"] .dns-modal input,
body[data-mode="light"] .dns-modal select{ background:#ffffff; border-color:var(--line); color:var(--txt); }
body[data-mode="light"] .btn-mini{ background:#fff; border-color:var(--line); }
body[data-mode="light"] .btn-mini:hover{ background:var(--soft1); }
body[data-mode="light"] .tbl th{ color:var(--muted); }
body[data-mode="light"] .tbl td{ border-color:var(--line); }
body[data-mode="light"] .srv-chip, body[data-mode="light"] .wf-fav-src, body[data-mode="light"] .api-badge{ border-color:var(--line); }
body[data-mode="light"] #space-bg{ display:none; }
body[data-mode="light"] .jarvis-fab{ box-shadow:0 0 18px var(--glow-soft),0 6px 18px rgba(0,0,0,.18); }
body[data-mode="light"] .api-badge{ color:#fff; }
body[data-mode="light"] .api-badge.api-on{ background:#1c9c4f; }
body[data-mode="light"] .api-badge.api-off{ background:#c02030; }
/* Glass morphism elements untuk light mode */
body[data-mode="light"] .card{ background:var(--glass); backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px); }
body[data-mode="light"] .kpi{ background:var(--glass); backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px); }
body[data-mode="light"] .jarvis-dock{ background:var(--glass-solid); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px); }
body[data-mode="light"] .chat-list{ background:var(--glass); backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px); }
body[data-mode="light"] .fm-toast{ background:rgba(246,248,251,.97); border-color:var(--acc); color:var(--txt); }
body[data-mode="light"] .fm-toast.err{ border-color:#e0192a; }

/* ===== MODE TERANG: perbaikan elemen yang masih gelap / teks tak terbaca =====
   Elemen chat-dock & blok kode di bawah meng-hardcode warna gelap sehingga tidak
   ikut variabel tema. Di mode terang harus jadi putih/abu + teks gelap. */
/* teks input & textarea chat-dock (dulu #f1f1f1 → tak terlihat di atas dock putih) */
body[data-mode="light"] .dock-input input,
body[data-mode="light"] .dock-input textarea{ color:var(--txt); }
/* gelembung pesan user di dock (dulu solid #2a2a2e) → tint aksen tipis + teks gelap */
body[data-mode="light"] .dock-messages .msg-user{
  background:rgba(var(--acc-rgb),.10); color:var(--txt);
  border:1px solid rgba(var(--acc-rgb),.16);
}
/* teks kode di dalam jawaban AI (dulu #e8e3e6 → nyaris tak terbaca di blok terang) */
body[data-mode="light"] .md-pre,
body[data-mode="light"] .md-pre code{ color:var(--txt); }
body[data-mode="light"] .md-pre{ background:var(--card2); }
body[data-mode="light"] .md-code{ color:var(--acc-deep); }
/* teks proses/remote & tombol dock saat hover (dulu abu terang / #fff) */
body[data-mode="light"] .dock-messages .remote-proc{ color:var(--muted); }
body[data-mode="light"] .dock-expand:hover,
body[data-mode="light"] .dock-close:hover,
body[data-mode="light"] .dock-newsess:hover{ color:var(--txt); }
/* blok kode / log lain yang pakai --bg2 tetap dijamin terang + border jelas */
body[data-mode="light"] .chat-full,
body[data-mode="light"] .chat-input-row textarea,
body[data-mode="light"] .md-pre,
body[data-mode="light"] .deploy-log{ background:var(--card2); border-color:var(--line); }
/* tombol melayang & sesi dock: pastikan permukaan terang */
body[data-mode="light"] .scroll-down,
body[data-mode="light"] .dock-sess,
body[data-mode="light"] .msg-assistant{ background:var(--card2); color:var(--txt); }
/* teks ala neon merah muda di banner/badge tetap kontras di latar terang */
body[data-mode="light"] .dbbar span{ color:var(--acc-deep); font-weight:600; }

/* ===== Mode terang: perbaiki elemen yang warnanya "di-hardcode" gelap =====
   Komponen di bawah semula memakai warna gelap/teks terang tetap (bukan var),
   sehingga di mode terang latarnya tetap hitam atau teksnya jadi tak terbaca.
   Semua disetel ulang ke variabel tema agar cocok dengan latar putih/abu. */

/* Dock chat JARVIS (muncul di semua halaman) */
body[data-mode="light"] .dock-messages .msg-user{
  background:var(--card2); color:var(--txt); border:1px solid var(--line); }
body[data-mode="light"] .dock-messages .msg-assistant{ color:var(--txt); }
body[data-mode="light"] .dock-messages .remote-proc{ color:var(--muted); }
body[data-mode="light"] .dock-input input,
body[data-mode="light"] .dock-input textarea{ color:var(--txt); }
body[data-mode="light"] .dock-input input::placeholder,
body[data-mode="light"] .dock-input textarea::placeholder{ color:var(--dim); }

/* Blok kode (markdown) di jawaban chat */
body[data-mode="light"] .md-pre{ background:var(--card2); border-color:var(--line); }
body[data-mode="light"] .md-pre code{ color:var(--txt); }

/* Popup / dropdown yang latarnya gelap tetap */
body[data-mode="light"] .bottom-nav{ background:var(--glass-solid); }
body[data-mode="light"] .card,
body[data-mode="light"] .kpi,
body[data-mode="light"] .chat-list{ border-color:var(--line); }

/* ===== updater: SAMA tag + riwayat upload ===== */
.lg-SAMA{ color:var(--dim); }
.lg-tag.lg-SAMA{ background:var(--soft2); color:var(--muted); }
.upl-item{ border:1px solid var(--line); border-radius:9px; padding:8px 10px; margin-bottom:6px; }
.upl-item summary{ cursor:pointer; display:flex; gap:8px; flex-wrap:wrap; align-items:center; font-size:12.5px; }
.upl-item[open]{ background:var(--soft1); }

/* ===== web statistic kartu ===== */
.ws-cards{ display:grid; grid-template-columns:repeat(4,1fr); gap:10px; }
.ws-c{ border:1px solid var(--line); border-radius:12px; padding:12px 14px; background:var(--soft1); }
.ws-cn{ font-size:22px; font-weight:800; color:var(--acc); }
.ws-cl{ font-size:11px; color:var(--muted); text-transform:uppercase; letter-spacing:.03em; }
@media(max-width:640px){
  .ws-cards{ grid-template-columns:repeat(2,1fr); }
  /* angka besar (mis. 9,1 miliar) sering kepotong di kartu sempit → kecilkan & rapatkan */
  .ws-cn{ font-size:16px; letter-spacing:-.02em; line-height:1.15; word-break:break-word; }
  .ws-c{ padding:10px 11px; }
}

/* Tabel Histats: scroll horizontal di mobile biar tidak kepotong */
.hs-tbl-scroll{ overflow-x:auto; -webkit-overflow-scrolling:touch; max-width:100%; }
.hs-tbl-scroll .hs-tbl{ min-width:820px; }
.hs-tbl svg{ display:inline-block; }
.hs-spin{ opacity:.5; font-size:12px; animation:hsPulse 1s ease-in-out infinite; }
@keyframes hsPulse{ 0%,100%{opacity:.35} 50%{opacity:.8} }
/* tabel daftar akun: auto-width biar kolom tidak melebar jauh */
.hs-acct{ width:auto !important; }
.hs-acct th, .hs-acct td{ padding-right:20px; }
.hs-acct td:last-child, .hs-acct th:last-child{ padding-right:6px; }
.hs-tbl-scroll::-webkit-scrollbar{ height:6px; }
.hs-tbl-scroll::-webkit-scrollbar-thumb{ background:var(--line); border-radius:3px; }
.hs-tbl th, .hs-tbl td{ white-space:nowrap; }

/* ===== Puppeteer ===== */
.pp-steps{ display:grid; grid-template-columns:repeat(auto-fill,minmax(320px,1fr)); gap:12px; }
.pp-step{ border:1px solid var(--line); border-radius:12px; padding:10px; background:var(--soft1); }
.pp-step-h{ display:flex; gap:8px; justify-content:space-between; margin-bottom:6px; flex-wrap:wrap; }
.pp-shot{ width:100%; border-radius:8px; border:1px solid var(--line); display:block; }
.pp-html{ margin-top:6px; }
.pp-html summary{ cursor:pointer; color:var(--acc); }
@media(max-width:640px){ .pp-steps{ grid-template-columns:1fr; } }

/* ===== Horizontal Scroll (Mobile) ===== */
.scrollable-x, .srv-tabbar, .prj-tabbar, .biz-tabbar, .cf-tabbar, .files-top,
.srv-tabbar.files-sub, div[style*="overflow-x:auto"] {
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: thin;
  scrollbar-color: rgba(255,255,255,0.2) transparent;
  -webkit-overflow-scrolling: touch;
}

/* Webkit Scrollbar (Chrome, Safari, Edge) */
.scrollable-x::-webkit-scrollbar, .srv-tabbar::-webkit-scrollbar, .prj-tabbar::-webkit-scrollbar,
.biz-tabbar::-webkit-scrollbar, .cf-tabbar::-webkit-scrollbar, .files-top::-webkit-scrollbar,
.srv-tabbar.files-sub::-webkit-scrollbar, div[style*="overflow-x:auto"]::-webkit-scrollbar {
  height: 6px;
}

.scrollable-x::-webkit-scrollbar-track, .srv-tabbar::-webkit-scrollbar-track, .prj-tabbar::-webkit-scrollbar-track,
.biz-tabbar::-webkit-scrollbar-track, .cf-tabbar::-webkit-scrollbar-track, .files-top::-webkit-scrollbar-track,
.srv-tabbar.files-sub::-webkit-scrollbar-track, div[style*="overflow-x:auto"]::-webkit-scrollbar-track {
  background: transparent;
}

.scrollable-x::-webkit-scrollbar-thumb, .srv-tabbar::-webkit-scrollbar-thumb, .prj-tabbar::-webkit-scrollbar-thumb,
.biz-tabbar::-webkit-scrollbar-thumb, .cf-tabbar::-webkit-scrollbar-thumb, .files-top::-webkit-scrollbar-thumb,
.srv-tabbar.files-sub::-webkit-scrollbar-thumb, div[style*="overflow-x:auto"]::-webkit-scrollbar-thumb {
  background: rgba(255,255,255,0.3);
  border-radius: 3px;
}

.scrollable-x::-webkit-scrollbar-thumb:hover, .srv-tabbar::-webkit-scrollbar-thumb:hover,
.prj-tabbar::-webkit-scrollbar-thumb:hover, .biz-tabbar::-webkit-scrollbar-thumb:hover,
.cf-tabbar::-webkit-scrollbar-thumb:hover, .files-top::-webkit-scrollbar-thumb:hover,
.srv-tabbar.files-sub::-webkit-scrollbar-thumb:hover, div[style*="overflow-x:auto"]::-webkit-scrollbar-thumb:hover {
  background: rgba(255,255,255,0.5);
}

/* Ensure tabs don't wrap on mobile */
@media(max-width:760px) {
  .srv-tabbar, .prj-tabbar, .biz-tabbar, .cf-tabbar, .files-top, .srv-tabbar.files-sub {
    flex-wrap: nowrap !important;
  }

  .srv-tab, .prj-tab, .biz-tab, .cf-tab, .files-tab {
    flex-shrink: 0;
    white-space: nowrap;
  }
}

/* Chat Message Speaker Button */
.msg-speak {
  position: absolute;
  bottom: 4px;
  right: 4px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  padding: 0;
  background: rgba(100, 150, 255, 0.1);
  border: 1px solid rgba(100, 150, 255, 0.2);
  border-radius: 3px;
  cursor: pointer;
  font-size: 12px;
  transition: all 0.2s ease;
  line-height: 1;
}

.msg-speak:hover {
  background: rgba(100, 150, 255, 0.2);
  transform: scale(1.15);
  border-color: rgba(100, 150, 255, 0.4);
}

.msg-speak:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.msg-speak:focus {
  outline: 1px solid rgba(100, 150, 255, 0.4);
  outline-offset: 1px;
}

/* Website list: bar scan DB + kolom database */
.wf-dbbar{ display:flex; gap:8px; align-items:center; flex-wrap:wrap; margin-bottom:8px }
.wf-db{ background:var(--soft2); color:var(--txt); border:1px solid var(--line); border-radius:7px; padding:3px 6px }

/* ===================== PERSONAL HUB ===================== */
.hub-head{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:16px}
.hub-head .hh-ic{font-size:26px;filter:drop-shadow(0 0 10px var(--glow-soft))}
.hub-head h1{margin:0;font-size:20px;font-weight:800;letter-spacing:.3px}
.hub-head p{margin:2px 0 0;font-size:12.5px;color:var(--muted)}
.hub-stat{display:flex;gap:10px;flex-wrap:wrap;margin-left:auto}
.hub-pill{background:var(--card2);border:1px solid var(--line);border-radius:10px;padding:7px 13px;text-align:center;min-width:64px}
.hub-pill b{display:block;font-size:17px;font-weight:800;line-height:1.1}
.hub-pill span{font-size:10.5px;color:var(--muted);text-transform:uppercase;letter-spacing:.05em}
.hub-pill.ac b{color:var(--acc)} .hub-pill.gr b{color:var(--green)} .hub-pill.am b{color:var(--amber)}

/* segmented filter */
.seg{display:inline-flex;gap:3px;background:var(--bg2);border:1px solid var(--line);border-radius:9px;padding:3px}
.seg a{padding:5px 12px;border-radius:7px;font-size:12.5px;color:var(--muted);text-decoration:none;white-space:nowrap}
.seg a.on{background:var(--acc2);color:#fff;box-shadow:0 0 12px var(--glow-soft)}
.seg a:hover{text-decoration:none;color:var(--txt)}

/* ---- Quick Notes ---- */
.note-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:14px}
.note{background:var(--card2);border:1px solid var(--line);border-radius:12px;padding:14px;display:flex;flex-direction:column;gap:9px;min-height:120px;transition:border-color .15s,transform .15s;position:relative;overflow:hidden}
.note::before{content:"";position:absolute;top:0;left:0;width:100%;height:3px;background:var(--acc);opacity:.6}
.note:hover{border-color:rgba(var(--acc-rgb),.45);transform:translateY(-2px)}
.note-head{display:flex;align-items:flex-start;justify-content:space-between;gap:8px}
.note-head strong{font-size:14.5px;line-height:1.3}
.note-body{font-size:12.5px;color:var(--muted);line-height:1.55;flex:1;white-space:pre-wrap;word-break:break-word}
.note-foot{display:flex;align-items:center;justify-content:space-between;border-top:1px solid var(--line);padding-top:9px}
.search-mini{background:var(--bg2);border:1px solid var(--line);color:var(--txt);border-radius:8px;padding:7px 11px;font-size:13px;min-width:160px}

/* ---- To-do ---- */
.todo-list{display:flex;flex-direction:column}
.todo-item{display:flex;align-items:flex-start;gap:12px;padding:12px 6px;border-bottom:1px solid var(--line)}
.todo-item:last-child{border-bottom:none}
.todo-item.done .td-txt{text-decoration:line-through;color:var(--dim)}
.td-check{width:22px;height:22px;flex:none;border-radius:7px;border:2px solid var(--line);background:var(--bg2);cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:13px;color:transparent;padding:0;transition:all .15s}
.td-check:hover{border-color:var(--acc)}
.todo-item.done .td-check{background:var(--green);border-color:var(--green);color:#04120a}
.td-main{flex:1;min-width:0}
.td-txt{font-size:14px;line-height:1.4}
.td-sub{font-size:11.5px;color:var(--muted);margin-top:3px;display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.td-due{color:var(--muted)} .td-due.over{color:var(--red);font-weight:600} .td-due.soon{color:var(--amber);font-weight:600}
.prio{display:inline-block;width:8px;height:8px;border-radius:50%;flex:none}
.prio-tinggi{background:var(--red);box-shadow:0 0 8px var(--red)} .prio-sedang{background:var(--amber)} .prio-rendah{background:var(--dim)}
.pbadge{font-size:10.5px;padding:1px 8px;border-radius:20px;font-weight:600}
.pbadge-tinggi{background:rgba(255,59,70,.16);color:var(--red)} .pbadge-sedang{background:rgba(224,163,23,.18);color:var(--amber)} .pbadge-rendah{background:var(--card2);color:var(--muted)}

/* ---- Jadwal / Kalender ---- */
.cal-wrap{display:grid;grid-template-columns:repeat(7,1fr);gap:6px}
.cal-dow{text-align:center;font-size:11px;color:var(--muted);text-transform:uppercase;letter-spacing:.05em;padding-bottom:4px}
.cal-cell{min-height:78px;background:var(--card2);border:1px solid var(--line);border-radius:9px;padding:6px;display:flex;flex-direction:column;gap:3px;overflow:hidden}
.cal-cell.out{opacity:.35}
.cal-cell.today{border-color:var(--acc);box-shadow:0 0 0 1px rgba(var(--acc-rgb),.4) inset}
.cal-num{font-size:12px;font-weight:700;color:var(--muted)}
.cal-cell.today .cal-num{color:var(--acc)}
.cal-ev{font-size:10.5px;padding:2px 5px;border-radius:5px;background:rgba(var(--acc-rgb),.16);color:#ffd0d3;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:1.3}
.cal-ev.jaga{background:rgba(255,59,70,.22);color:#ffb3b7}
.cal-ev.kuliah{background:rgba(224,163,23,.2);color:#f2d38a}
.cal-ev.libur{background:rgba(63,185,80,.18);color:#a6e6b0}
.cal-more{font-size:10px;color:var(--muted)}
.cal-nav{display:flex;align-items:center;gap:10px}
.cal-nav b{font-size:15px;min-width:150px;text-align:center}

/* ---- Read later / Jurnal ---- */
.read-list{display:flex;flex-direction:column;gap:10px}
.read-item{display:flex;gap:12px;align-items:flex-start;background:var(--card2);border:1px solid var(--line);border-radius:11px;padding:13px 14px;transition:border-color .15s}
.read-item:hover{border-color:rgba(var(--acc-rgb),.4)}
.read-item.dibaca{opacity:.66}
.read-fav{font-size:20px;flex:none;line-height:1}
.read-main{flex:1;min-width:0}
.read-title{font-size:14.5px;font-weight:600;line-height:1.35}
.read-title a{color:var(--txt)} .read-title a:hover{color:var(--acc)}
.read-meta{font-size:11.5px;color:var(--muted);margin-top:4px;display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.read-note{font-size:12.5px;color:var(--muted);margin-top:6px;line-height:1.5;white-space:pre-wrap}
.read-act{display:flex;flex-direction:column;gap:6px;flex:none}
.stars{color:var(--amber);font-size:12px;letter-spacing:1px}

/* ---- Health ---- */
.hz-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px;margin-bottom:4px}
.hz-card{background:var(--card2);border:1px solid var(--line);border-radius:11px;padding:13px 15px}
.hz-card .hz-l{font-size:11px;color:var(--muted);text-transform:uppercase;letter-spacing:.05em}
.hz-card .hz-v{font-size:22px;font-weight:800;margin-top:4px}
.hz-card .hz-v small{font-size:12px;font-weight:600;color:var(--muted)}
.hz-card .hz-d{font-size:11px;color:var(--dim);margin-top:2px}
.chip-pick{display:inline-flex;gap:6px;flex-wrap:wrap}
.chip-pick button{background:var(--card2);border:1px solid var(--line);color:var(--muted);border-radius:20px;padding:4px 12px;font-size:12px;cursor:pointer}
.chip-pick button:hover,.chip-pick button.on{border-color:var(--acc);color:var(--acc)}

/* dashboard mini widgets */
.dw-note{font-size:12.5px;padding:9px 4px;border-bottom:1px solid var(--line);display:flex;justify-content:space-between;gap:8px}
.dw-note:last-child{border-bottom:none}
.dw-note b{font-weight:600}
.dw-empty{color:var(--muted);font-size:12.5px;padding:10px 2px}
.quick-add{display:flex;gap:8px;margin-bottom:12px;flex-wrap:wrap;align-items:center}
.quick-add input{flex:1 1 160px;min-width:0}
.quick-add select{flex:0 0 auto}
.quick-add .btn-primary{flex:0 0 auto;white-space:nowrap}

@media(max-width:640px){
  .cal-cell{min-height:58px;padding:4px}
  .cal-ev{font-size:9px}
  .note-grid{grid-template-columns:1fr 1fr}
  .hub-stat{margin-left:0;width:100%}
}

/* Dashboard personal tabs */
#hub-widget{overflow:hidden}
.hub-tabs{display:flex;gap:2px;border-bottom:1px solid var(--line);margin-bottom:16px}
.hub-tab{flex:1 1 0;text-align:center;padding:11px 8px;border:none;background:transparent;color:var(--muted);cursor:pointer;font-size:13.5px;border-bottom:2px solid transparent;font-weight:600;white-space:nowrap;border-radius:8px 8px 0 0;transition:background .15s,color .15s}
.hub-tab:hover{color:var(--txt);background:var(--card2)}
.hub-tab.on{color:var(--acc);border-bottom-color:var(--acc);background:rgba(var(--acc-rgb),.06)}
.hub-tab .badge{margin-left:3px}
.hub-panel{display:none}
.hub-panel.on{display:block}
.hub-cal .cal-cell{min-height:62px}
.hub-cal-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px;gap:10px;flex-wrap:wrap}
.hub-note-form textarea{min-height:130px;font-size:14px;line-height:1.55}
@media(max-width:640px){
  .hub-tab{padding:10px 4px;font-size:12.5px}
  .hub-cal .cal-cell{min-height:52px;padding:4px 3px}
  .hub-cal .cal-ev{font-size:8.5px;padding:1px 3px}
  .hub-cal .cal-num{font-size:11px}
}

/* Kalender dashboard: klik tanggal → tambah acara */
.hub-cal .cal-cell{cursor:pointer;transition:border-color .12s,background .12s}
.hub-cal .cal-cell.out{cursor:default}
.hub-cal .cal-cell:not(.out):hover{border-color:var(--acc);background:rgba(var(--acc-rgb),.05)}
.cal-addbar{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-top:14px;padding:12px;background:var(--card2);border:1px solid var(--acc);border-radius:10px;box-shadow:0 0 16px var(--glow-soft)}
.cal-addbar[hidden]{display:none}
.cal-addbar b{flex:0 0 auto;color:var(--acc);font-size:13px}
.cal-addbar input{flex:1 1 150px;min-width:0}

/* To-do actions + ringkasan acara kalender (dashboard) */
.todo-item .td-actions{display:flex;gap:3px;flex:0 0 auto;align-items:center;margin-left:auto}
.td-edit,.td-del{background:none;border:1px solid var(--line);color:var(--muted);border-radius:6px;padding:3px 7px;font-size:12px;cursor:pointer;line-height:1}
.td-edit:hover{border-color:var(--acc);color:var(--acc)}
.td-del:hover{border-color:var(--red);color:var(--red)}
.td-edit-input{width:100%;font-size:14px;padding:5px 8px}
.cal-summary{margin-top:16px;border-top:1px solid var(--line);padding-top:14px}
.cs-head{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;margin-bottom:10px}
.cs-list{display:flex;flex-direction:column;gap:6px}
.cs-item{display:flex;align-items:center;gap:10px;padding:8px 11px;background:var(--card2);border:1px solid var(--line);border-radius:9px;flex-wrap:wrap}
.cs-when{font-size:12px;color:var(--muted);font-variant-numeric:tabular-nums;flex:0 0 auto;min-width:96px}
.cs-when b{color:var(--acc)}
.cs-title{flex:1 1 120px;font-size:13.5px;min-width:0}
.cs-tag{position:static !important;flex:0 0 auto}
.cs-act{display:flex;gap:4px;flex:0 0 auto;margin-left:auto}
.cs-edit,.cs-del,.cs-e-save,.cs-e-cancel{background:none;border:1px solid var(--line);color:var(--muted);border-radius:6px;padding:4px 8px;font-size:12px;cursor:pointer;line-height:1}
.cs-edit:hover,.cs-e-save:hover{border-color:var(--acc);color:var(--acc)}
.cs-del:hover,.cs-e-cancel:hover{border-color:var(--red);color:var(--red)}
.cs-item input{padding:5px 8px;font-size:13px}
.cs-e-judul{flex:1 1 130px;min-width:0}
.cs-e-jam{flex:0 0 auto}
.cs-e-kat{flex:0 1 120px;min-width:0}

/* Quick Notes list di dashboard: klik-edit + hapus */
.dw-note{display:flex;align-items:center;gap:8px;justify-content:space-between;cursor:pointer;padding:9px 8px;border-bottom:1px solid var(--line);border-radius:8px}
.dw-note:hover{background:var(--card2)}
.dw-note.editing{background:rgba(var(--acc-rgb),.09);box-shadow:inset 2px 0 0 var(--acc)}
.dwn-main{flex:1;min-width:0;display:flex;align-items:center;gap:8px;overflow:hidden}
.dwn-main b{font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dwn-del{background:none;border:1px solid var(--line);color:var(--muted);border-radius:6px;padding:4px 8px;font-size:12px;cursor:pointer;flex:0 0 auto;line-height:1}
.dwn-del:hover{border-color:var(--red);color:var(--red)}

/* Warna kolom kalender: Jumat (ijo muda), Sabtu-Minggu (merah muda), libur nasional (merah) */
.cal-wrap>.cal-cell:nth-child(7n+5){ background:rgba(60,200,120,.12); }   /* Jumat */
.cal-wrap>.cal-cell:nth-child(7n+6),
.cal-wrap>.cal-cell:nth-child(7n){ background:rgba(255,95,130,.13); }      /* Sabtu & Minggu */
.cal-wrap>.cal-cell.libur-nas{ background:rgba(255,60,70,.20); border-color:rgba(255,60,70,.55); } /* tanggal merah */
.cal-wrap>.cal-cell.libur-nas .cal-num{ color:#ff6b74; }
.cal-holiday{ font-size:9.5px; line-height:1.25; color:#ff8a92; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.hub-cal .cal-holiday{ font-size:8.5px; }

/* Kalender: warna hari (Jumat hijau, Sabtu-Minggu merah muda) — libur-nas merah menang via spesifisitas */
.cal-cell.cal-wknd{ background:rgba(255,120,150,.13); }
.cal-cell.cal-wknd .cal-num{ color:#ff9db0; }
.cal-cell.cal-fri{ background:rgba(70,200,120,.12); }
.cal-cell.cal-fri .cal-num{ color:#7fe0a0; }
.cal-dow.dow-wknd{ color:#ff9db0; }
.cal-dow.dow-fri{ color:#7fe0a0; }

/* Popup detail acara (dashboard) */
.cs-show{background:rgba(63,185,80,.16);border:1px solid rgba(63,185,80,.45);color:var(--green);border-radius:20px;padding:4px 13px;font-size:11.5px;font-weight:700;cursor:pointer;line-height:1.3;white-space:nowrap}
.cs-show:hover{background:rgba(63,185,80,.3);box-shadow:0 0 10px rgba(63,185,80,.25)}
.hub-modal{position:fixed;inset:0;background:rgba(0,0,0,.6);display:flex;align-items:center;justify-content:center;z-index:1000;padding:20px;backdrop-filter:blur(2px)}
.hub-modal[hidden]{display:none}
.hub-modal-card{background:var(--card);border:1px solid var(--line);border-radius:14px;max-width:440px;width:100%;padding:22px;position:relative;box-shadow:0 12px 44px rgba(0,0,0,.55);max-height:86vh;overflow:auto}
.hub-modal-x{position:absolute;top:12px;right:12px;background:var(--card2);border:1px solid var(--line);color:var(--muted);border-radius:8px;width:30px;height:30px;cursor:pointer;font-size:14px;line-height:1}
.hub-modal-x:hover{border-color:var(--red);color:var(--red)}
.em-title{font-size:19px;font-weight:800;margin:0 34px 12px 0;line-height:1.3}
.em-row{display:flex;gap:12px;padding:9px 0;border-bottom:1px solid var(--line);font-size:13.5px}
.em-row:last-child{border-bottom:none}
.em-k{color:var(--muted);flex:0 0 84px}
.em-v{flex:1;min-width:0}
.em-desc{white-space:pre-wrap;line-height:1.55}
.hub-modal-foot{margin-top:16px;display:flex;justify-content:flex-end}

/* ── Quick Notes: overlay tulis LAYAR PENUH (ditempel ke <body>, kebal transform induk) ── */
body.note-fs-open{overflow:hidden}
.note-fs-overlay{position:fixed;inset:0;z-index:100000;background:var(--bg,#0d101b);display:flex;flex-direction:column;
  padding-bottom:env(safe-area-inset-bottom)}
.note-fs-bar{display:flex;align-items:center;gap:8px;padding:12px 14px;border-bottom:1px solid var(--line);flex:0 0 auto}
.note-fs-ta{flex:1 1 auto;width:100%;border:0;background:transparent;color:var(--text,#e7e9f2);
  padding:16px;font-size:16px;line-height:1.7;resize:none;outline:none;box-sizing:border-box}

/* ── Rich text editor Quick Notes ── */
.rte{border:1px solid var(--line);border-radius:10px;overflow:hidden;background:var(--card,#151a29)}
.rte-tb{display:flex;flex-wrap:wrap;align-items:center;gap:4px;padding:6px 8px;border-bottom:1px solid var(--line);background:var(--soft1,rgba(255,255,255,.03))}
.rte-b{min-width:30px;height:30px;padding:0 8px;border:1px solid var(--line);background:var(--card,#1b2233);color:var(--text,#e7e9f2);border-radius:7px;cursor:pointer;font-size:14px;line-height:1;display:inline-flex;align-items:center;justify-content:center}
.rte-b:hover{border-color:var(--accent,#7c5cff)}
.rte-sep{width:1px;height:20px;background:var(--line);margin:0 4px}
.rte-sw{width:22px;height:22px;border-radius:50%;border:2px solid rgba(255,255,255,.25);cursor:pointer;padding:0;flex:0 0 auto}
.rte-sw:hover{transform:scale(1.12)}
.rte-ci{width:28px;height:28px;padding:0;border:1px solid var(--line);border-radius:6px;background:none;cursor:pointer}
.rte-hl{display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;border:1px solid var(--line);border-radius:7px;cursor:pointer;position:relative;font-size:15px;overflow:hidden}
.rte-hl:hover{border-color:var(--accent,#7c5cff)}
.rte-area{min-height:120px;max-height:340px;overflow:auto;padding:12px 14px;color:var(--text,#e7e9f2);font-size:15px;line-height:1.65;outline:none}
.rte-area:empty:before{content:attr(data-ph);color:var(--muted,#8a90a6)}
.rte-fs-ov{display:flex;flex-direction:column}
.rte-fs-ov .rte-tb{flex:0 0 auto}
.rte-fs-area{flex:1 1 auto;max-height:none;min-height:0;border:0;border-radius:0}
/* dropdown font di toolbar */
.rte-font{height:30px;border:1px solid var(--line);background:var(--card,#1b2233);color:var(--text,#e7e9f2);border-radius:7px;font-size:13px;padding:0 4px;cursor:pointer;max-width:96px}
/* toolbar fullscreen: 1 baris, scroll horizontal, fixed di atas (di bawah bar Simpan/Tutup) */
.rte-tb-top{flex:0 0 auto;flex-wrap:nowrap!important;overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch;scrollbar-width:none;border-bottom:1px solid var(--line);background:var(--card,#151a29)}
.rte-tb-top::-webkit-scrollbar{display:none}
.rte-tb-top>*{flex:0 0 auto!important}
/* isi catatan berwarna tetap kebaca di kartu */
.note-body b,.note-body strong{font-weight:700}

/* bar "pulihkan draft" Quick Notes */
.rte-draft{background:rgba(234,179,8,.12);border:1px solid rgba(234,179,8,.4);border-radius:8px;padding:8px 12px;margin-bottom:8px;font-size:13px;color:var(--text,#e7e9f2);display:flex;align-items:center;flex-wrap:wrap;gap:4px}
.note-fs-bar .btn-primary{padding:6px 14px}