/* =========================================================
   Panel Bot PPMI Madinah — sistem tampilan
   Satu-satunya ornamen: pola bintang delapan (khatam) samar
   di sidebar & layar login. Sisanya tenang dan rapi.
   ========================================================= */
:root{
  --canvas:#F2F5F3;
  --surface:#FFFFFF;
  --surface-2:#F7FAF8;
  --ink:#14231D;
  --ink-2:#34463F;
  --muted:#5F716A;
  --faint:#8A9A94;
  --line:#DFE7E3;
  --line-2:#EBF0ED;

  --accent:#047857;
  --accent-ink:#035C43;
  --accent-soft:#E3F3EC;
  --accent-ring:rgba(4,120,87,.18);
  --deep:#0A3A2C;
  --deep-2:#0E4A39;
  --gold:#B8893A;
  --gold-soft:#F6EEDD;

  --danger:#B42318;
  --danger-soft:#FDECEA;
  --warn:#9A5B0B;
  --warn-soft:#FDF3E1;
  --info:#1D5E8C;
  --info-soft:#E6F0F8;

  --r-card:14px;
  --r-field:10px;
  --r-btn:9px;
  --shadow-pop:0 18px 50px -12px rgba(10,58,44,.28), 0 2px 6px rgba(10,58,44,.06);

  --khatam:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='56' viewBox='0 0 56 56'%3E%3Cg fill='none' stroke='%23ffffff' stroke-opacity='.075' stroke-width='1'%3E%3Crect x='17' y='17' width='22' height='22'/%3E%3Crect x='17' y='17' width='22' height='22' transform='rotate(45 28 28)'/%3E%3C/g%3E%3C/svg%3E");

  --sidebar-w:252px;
}

*{ box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
html,body{ margin:0; }
body{
  font-family:'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size:14px; line-height:1.5; color:var(--ink); background:var(--canvas);
  -webkit-font-smoothing:antialiased; font-feature-settings:"tnum" 0;
}
.hidden{ display:none !important; }
button, input, select, textarea{ font:inherit; color:inherit; }
button{ cursor:pointer; }
a{ color:var(--accent); }
code{ font-family:ui-monospace, SFMono-Regular, Menlo, monospace; font-size:.9em; background:var(--line-2); padding:1px 5px; border-radius:5px; }
:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; }

::-webkit-scrollbar{ width:10px; height:10px; }
::-webkit-scrollbar-thumb{ background:#C9D6D0; border-radius:10px; border:2px solid transparent; background-clip:content-box; }
::-webkit-scrollbar-track{ background:transparent; }

@media (prefers-reduced-motion: reduce){ *{ animation:none !important; transition:none !important; } }

/* ---------- Brand ---------- */
.brand{ display:flex; align-items:center; gap:11px; }
.brand-mark{
  width:36px; height:36px; border-radius:10px; flex-shrink:0;
  display:grid; place-items:center; font-size:20px;
  background:var(--gold); color:var(--deep);
}
.brand b{ display:block; font-size:15px; font-weight:800; letter-spacing:-.01em; }
.brand small{ display:block; font-size:12px; opacity:.72; font-weight:500; margin-top:1px; }
.brand-lg .brand-mark{ width:46px; height:46px; font-size:26px; border-radius:13px; }
.brand-lg b{ font-size:19px; }

/* ---------- Layar login / koneksi ---------- */
.auth{ min-height:100vh; min-height:100dvh; display:grid; grid-template-columns:minmax(0, 5fr) minmax(0, 6fr); }
.auth-art{
  background:var(--deep) var(--khatam); color:#fff;
  padding:48px; display:flex; flex-direction:column; justify-content:space-between;
}
.auth-art-text{ font-size:26px; line-height:1.3; font-weight:700; letter-spacing:-.02em; max-width:15em; margin:0; color:#E8F3EE; }
.auth-panel{ display:flex; align-items:center; justify-content:center; padding:32px 20px; }
.auth-card{ width:100%; max-width:380px; }
.auth-card h1{ font-size:26px; font-weight:800; letter-spacing:-.02em; margin:0 0 6px; }
.auth-sub{ color:var(--muted); margin:0 0 24px; }
.auth-card .btn-block{ margin-top:22px; }
.auth-error{ color:var(--danger); font-size:13px; min-height:20px; margin:12px 0 0; }
.link-btn{ background:none; border:none; padding:0; color:var(--muted); font-size:13px; text-decoration:underline; text-underline-offset:3px; }
.brand-mobile{ display:none; margin-bottom:28px; }
.brand-mobile .brand-mark{ background:var(--deep); color:var(--gold); }
@media (max-width:820px){
  .auth{ grid-template-columns:1fr; }
  .auth-art{ display:none; }
  .brand-mobile{ display:flex; }
  .auth-panel{ align-items:flex-start; padding-top:56px; }
}

/* ---------- Shell ---------- */
.shell{ display:flex; min-height:100vh; min-height:100dvh; }
.sidebar{
  position:fixed; inset:0 auto 0 0; width:var(--sidebar-w); z-index:30;
  background:var(--deep) var(--khatam); color:#fff;
  display:flex; flex-direction:column; padding:20px 14px 14px;
}
.sidebar .brand{ padding:0 8px 22px; }
.side-nav{ flex:1; overflow-y:auto; display:flex; flex-direction:column; gap:2px; margin:0 -4px; padding:0 4px; }
.nav-group{ font-size:11.5px; font-weight:600; color:rgba(255,255,255,.48); padding:16px 10px 6px; }
.nav-group:first-child{ padding-top:0; }
.side-nav .nav-item{
  display:flex; align-items:center; gap:11px; width:100%;
  background:none; border:none; color:rgba(255,255,255,.78);
  padding:9px 10px; border-radius:9px; font-size:14px; font-weight:600; text-align:left;
  position:relative; transition:background .15s, color .15s;
}
.side-nav .nav-item i{ font-size:19px; }
.side-nav .nav-item:hover{ background:rgba(255,255,255,.07); color:#fff; }
.side-nav .nav-item.active{ background:rgba(255,255,255,.12); color:#fff; }
.side-nav .nav-item.active::before{
  content:""; position:absolute; left:-4px; top:9px; bottom:9px; width:3px; border-radius:3px; background:var(--gold);
}
.nav-badge{
  margin-left:auto; background:var(--gold); color:var(--deep); font-size:11px; font-weight:800;
  min-width:20px; height:20px; padding:0 6px; border-radius:999px; display:inline-flex; align-items:center; justify-content:center;
}
.side-user{
  display:flex; align-items:center; gap:10px; margin-top:12px; padding:10px; border-radius:11px;
  background:rgba(255,255,255,.06);
}
.side-user-text{ flex:1; min-width:0; }
.side-user-text b{ display:block; font-size:13.5px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.side-user-text small{ display:block; font-size:12px; color:rgba(255,255,255,.6); }
.side-logout{ background:none; border:none; color:rgba(255,255,255,.7); width:34px; height:34px; border-radius:8px; display:grid; place-items:center; font-size:18px; }
.side-logout:hover{ background:rgba(255,255,255,.1); color:#fff; }

.avatar{
  width:34px; height:34px; border-radius:50%; flex-shrink:0; display:grid; place-items:center;
  background:var(--accent-soft); color:var(--accent-ink); font-weight:800; font-size:14px;
}
.side-user .avatar{ background:var(--gold-soft); color:#6B4E1C; }
.avatar-sm{ width:30px; height:30px; font-size:12.5px; }

.main{ flex:1; min-width:0; margin-left:var(--sidebar-w); display:flex; flex-direction:column; }
.topbar{
  position:sticky; top:0; z-index:20; background:rgba(242,245,243,.92); backdrop-filter:saturate(1.4) blur(8px);
  padding:22px 32px 16px; display:flex; align-items:flex-end; gap:16px;
}
.topbar-text{ flex:1; min-width:0; }
.topbar h1{ margin:0; font-size:24px; font-weight:800; letter-spacing:-.025em; }
.topbar p{ margin:3px 0 0; color:var(--muted); font-size:13.5px; max-width:70ch; }
.topbar-logout{ display:none; }
.content{ padding:4px 32px 48px; width:100%; max-width:1180px; }

.page{ display:none; }
.page.active{ display:flex; flex-direction:column; gap:16px; animation:pageIn .22s ease-out; }
@keyframes pageIn{ from{ opacity:0; transform:translateY(4px); } to{ opacity:1; transform:none; } }

/* Tabbar & sheet (HP) */
.tabbar, .sheet-overlay{ display:none; }

@media (max-width:900px){
  .sidebar{ display:none; }
  .main{ margin-left:0; }
  .topbar{ padding:16px 16px 10px; align-items:center; }
  .topbar h1{ font-size:21px; }
  .topbar p{ font-size:12.5px; }
  .topbar-logout{ display:grid; place-items:center; width:38px; height:38px; border-radius:10px; border:1px solid var(--line); background:var(--surface); color:var(--muted); font-size:18px; }
  .content{ padding:4px 16px calc(92px + env(safe-area-inset-bottom)); }
  .tabbar{
    display:flex; position:fixed; left:0; right:0; bottom:0; z-index:40;
    background:var(--surface); border-top:1px solid var(--line);
    padding:6px 6px calc(6px + env(safe-area-inset-bottom));
  }
  .tabbar .nav-item, .tab-more{
    flex:1; background:none; border:none; display:flex; flex-direction:column; align-items:center; gap:2px;
    font-size:11px; font-weight:600; color:var(--faint); padding:6px 2px; border-radius:10px; position:relative;
  }
  .tabbar i{ font-size:22px; }
  .tabbar .nav-item.active{ color:var(--accent); }
  .tabbar .nav-item.active i{ font-weight:bold; }
  .tabbar .nav-badge{ position:absolute; top:2px; left:calc(50% + 6px); margin:0; min-width:17px; height:17px; font-size:10px; padding:0 4px; }
  .sheet-overlay{ display:flex; position:fixed; inset:0; z-index:60; background:rgba(10,30,24,.38); align-items:flex-end; }
  .sheet-overlay.hidden{ display:none !important; }
  .sheet{ width:100%; background:var(--surface); border-radius:18px 18px 0 0; padding:8px 14px calc(18px + env(safe-area-inset-bottom)); animation:sheetUp .2s ease-out; }
  @keyframes sheetUp{ from{ transform:translateY(30px); opacity:.6; } to{ transform:none; opacity:1; } }
  .sheet-grip{ width:38px; height:4px; border-radius:4px; background:var(--line); margin:0 auto 12px; }
  .sheet-grid{ display:grid; grid-template-columns:repeat(3, 1fr); gap:8px; }
  .sheet-grid .nav-item{
    display:flex; flex-direction:column; align-items:center; gap:6px; padding:14px 6px; border-radius:12px;
    background:var(--surface-2); border:1px solid var(--line-2); font-size:12.5px; font-weight:600; color:var(--ink-2);
  }
  .sheet-grid .nav-item i{ font-size:22px; color:var(--accent); }
  .sheet-grid .nav-item.active{ border-color:var(--accent); background:var(--accent-soft); }
}

/* ---------- Kartu ---------- */
.card{ background:var(--surface); border:1px solid var(--line); border-radius:var(--r-card); padding:20px; }
.card-flush{ padding:0; overflow:hidden; }
.card-head{ display:flex; align-items:center; gap:10px; margin-bottom:6px; }
.card-head h3{ margin:0; font-size:16px; font-weight:700; letter-spacing:-.01em; flex:1; }
.card-head-pad{ padding:18px 20px 4px; margin:0; }
.card-aside{ font-size:12.5px; color:var(--faint); }
.card-actions{ margin-top:18px; display:flex; gap:8px; flex-wrap:wrap; }
.muted{ color:var(--muted); font-size:13.5px; margin:0 0 14px; line-height:1.55; max-width:72ch; }
.hint{ color:var(--muted); font-size:12.5px; margin:0; line-height:1.55; }
.hint code{ font-size:.95em; }
.grid-2{ display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:16px; }
@media (max-width:1060px){ .grid-2{ grid-template-columns:1fr; } }
.settings{ display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:16px; align-items:start; }
@media (max-width:1060px){ .settings{ grid-template-columns:1fr; } }
.result-box{ margin-top:12px; font-size:13px; color:var(--ink-2); background:var(--surface-2); border:1px solid var(--line-2); border-radius:10px; padding:10px 12px; }
.notice{
  display:flex; gap:12px; align-items:flex-start; padding:14px 16px; border-radius:var(--r-card);
  background:var(--warn-soft); color:#5C3A08; border:1px solid #F1DDB5; font-size:13.5px;
}
.notice i{ font-size:20px; color:var(--warn); flex-shrink:0; margin-top:1px; }

/* ---------- Ringkasan (dashboard) ---------- */
.stat-strip{
  display:grid; grid-template-columns:repeat(auto-fit, minmax(130px, 1fr));
  background:var(--surface); border:1px solid var(--line); border-radius:var(--r-card); overflow:hidden;
}
.stat{ padding:16px 18px; border-right:1px solid var(--line-2); border-bottom:1px solid var(--line-2); margin:0 -1px -1px 0; }
.stat-num{ font-size:26px; font-weight:800; letter-spacing:-.03em; line-height:1.1; font-variant-numeric:tabular-nums; }
.stat-label{ font-size:12.5px; color:var(--muted); margin-top:4px; }
.stat.highlight .stat-num{ color:var(--accent); }
.stat.alert .stat-num{ color:var(--gold); }

/* ---------- Toolbar halaman ---------- */
.toolbar{ display:flex; gap:8px; align-items:center; flex-wrap:wrap; }
.toolbar-pad{ padding:10px 20px 14px; border-bottom:1px solid var(--line-2); }
.toolbar-grow{ flex:1; }
.toolbar select{ width:auto; min-width:170px; max-width:260px; }
.search{ position:relative; flex:1 1 240px; max-width:380px; }
.search i{ position:absolute; left:12px; top:50%; transform:translateY(-50%); color:var(--faint); font-size:16px; pointer-events:none; }
.search input{ padding-left:36px; }
.btn-group{ display:inline-flex; gap:6px; }
@media (max-width:640px){
  .toolbar > select, .toolbar .search{ flex:1 1 100%; max-width:none; }
  .toolbar .toolbar-grow{ display:none; }
  .toolbar > .btn-primary{ flex:1; }
}
.list-meta{ padding:12px 20px; font-size:12.5px; color:var(--muted); border-bottom:1px solid var(--line-2); }
.list-meta:empty{ display:none; }

/* ---------- Tabel ---------- */
.table-scroll{ overflow-x:auto; -webkit-overflow-scrolling:touch; }
.table{ width:100%; border-collapse:collapse; font-size:13.5px; min-width:560px; }
.table th{
  text-align:left; color:var(--muted); font-weight:600; font-size:12.5px;
  padding:11px 14px; background:var(--surface-2); border-bottom:1px solid var(--line); white-space:nowrap;
}
.table td{ padding:12px 14px; border-bottom:1px solid var(--line-2); vertical-align:middle; }
.table tbody tr:hover td{ background:#FAFCFB; }
.table tr:last-child td{ border-bottom:none; }
.table th:first-child, .table td:first-child{ padding-left:20px; }
.table th:last-child, .table td:last-child{ padding-right:20px; }
.table td.muted{ text-align:center; padding:36px 14px; color:var(--faint); }
.table-compact{ min-width:0; }
.card .table-compact th:first-child, .card .table-compact td:first-child{ padding-left:0; }
.card .table-compact th{ background:none; }
.td-sub{ display:block; font-size:12px; color:var(--faint); margin-top:2px; }
.mono{ font-family:ui-monospace, SFMono-Regular, Menlo, monospace; font-size:12.5px; color:var(--ink-2); }
.nowrap{ white-space:nowrap; }

.badge, .tag{
  display:inline-flex; align-items:center; gap:4px; padding:2px 9px; border-radius:999px;
  font-size:12px; font-weight:600; white-space:nowrap; line-height:1.6;
}
.badge.on{ background:var(--accent-soft); color:var(--accent-ink); }
.badge.off{ background:var(--danger-soft); color:var(--danger); }
.badge.student{ background:var(--gold-soft); color:#6B4E1C; }
.badge.public{ background:var(--info-soft); color:var(--info); }
.badge.neutral{ background:var(--line-2); color:var(--ink-2); }
.badge.warn{ background:var(--warn-soft); color:var(--warn); }
.badge.run{ background:var(--info-soft); color:var(--info); }
.badge.run::before{ content:""; width:6px; height:6px; border-radius:50%; background:currentColor; animation:pulse 1.2s ease-in-out infinite; }
@keyframes pulse{ 50%{ opacity:.3; } }
.tag-gold{ background:var(--gold-soft); color:#6B4E1C; }

.row-actions{ display:flex; gap:6px; justify-content:flex-end; flex-wrap:nowrap; }

/* ---------- Tombol ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:7px; white-space:nowrap;
  border:1px solid transparent; border-radius:var(--r-btn); padding:9px 16px; font-size:14px; font-weight:700;
  transition:background .15s, border-color .15s, color .15s, transform .06s; text-decoration:none;
}
.btn i{ font-size:17px; }
.btn:active{ transform:translateY(1px); }
.btn:disabled{ opacity:.55; cursor:not-allowed; transform:none; }
.btn-primary{ background:var(--accent); color:#fff; }
.btn-primary:hover:not(:disabled){ background:var(--accent-ink); }
.btn-quiet, .btn-ghost{ background:var(--surface); color:var(--ink-2); border-color:var(--line); }
.btn-quiet:hover:not(:disabled), .btn-ghost:hover:not(:disabled){ border-color:#C3D2CB; background:var(--surface-2); }
.btn-danger{ background:var(--danger); color:#fff; }
.btn-danger:hover:not(:disabled){ background:#8F1C13; }
.btn-danger-quiet{ background:var(--surface); color:var(--danger); border-color:#F2C9C4; }
.btn-danger-quiet:hover:not(:disabled){ background:var(--danger-soft); }
.btn-sm{ padding:6px 11px; font-size:13px; }
.btn-sm i{ font-size:15px; }
.btn-xs{ padding:4px 9px; font-size:12px; border-radius:7px; }
.btn-xs i{ font-size:14px; }
.btn-block{ width:100%; padding:12px 16px; }

.icon-btn{
  display:inline-flex; align-items:center; justify-content:center; gap:5px;
  border:1px solid var(--line); background:var(--surface); border-radius:8px;
  min-width:32px; height:32px; padding:0 9px; font-size:13px; color:var(--ink-2); font-weight:600; text-decoration:none;
}
.icon-btn i{ font-size:16px; }
.icon-btn:hover{ background:var(--surface-2); border-color:#C3D2CB; }
.icon-btn.danger{ color:var(--danger); border-color:#F2C9C4; }
.icon-btn.danger:hover{ background:var(--danger-soft); }
.icon-btn:disabled{ opacity:.45; cursor:not-allowed; }

/* ---------- Form ---------- */
.field-label, .modal-body label:not(.switch-row):not(.dropzone):not(.btn){
  display:block; font-size:13px; font-weight:600; color:var(--ink-2); margin:16px 0 6px;
}
.card > .field-label:first-of-type, .modal-body > label:first-child{ margin-top:4px; }
.opt{ font-weight:500; color:var(--faint); margin-left:4px; }
input[type=text], input[type=password], input[type=search], input[type=url], textarea, select{
  width:100%; padding:10px 12px; border:1px solid var(--line); border-radius:var(--r-field);
  outline:none; font-size:14.5px; background:var(--surface); color:var(--ink); transition:border-color .15s, box-shadow .15s;
}
input[type=file]{ width:100%; font-size:13.5px; padding:8px; border:1px dashed var(--line); border-radius:var(--r-field); background:var(--surface-2); }
textarea{ resize:vertical; line-height:1.5; }
select{ appearance:none; padding-right:34px; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 4.5 6 8l3.5-3.5' fill='none' stroke='%235F716A' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 12px center; }
input:focus, textarea:focus, select:focus{ border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-ring); }
input:disabled{ background:var(--surface-2); color:var(--muted); }
input::placeholder, textarea::placeholder{ color:#A3B1AB; }
input[type=checkbox]{ width:18px; height:18px; accent-color:var(--accent); margin:0; flex-shrink:0; }
.checkbox-row, .switch-row{ display:flex; align-items:center; gap:10px; margin-top:16px; cursor:pointer; }
.checkbox-row label, .modal-body .checkbox-row label{ margin:0 !important; font-weight:500; font-size:14px; color:var(--ink); cursor:pointer; }
.switch-row span{ font-size:14px; font-weight:500; }

.dropzone{
  display:flex; align-items:center; gap:10px; padding:12px 14px; border:1px dashed #C3D2CB; border-radius:var(--r-field);
  background:var(--surface-2); color:var(--muted); font-size:13px; cursor:pointer; transition:border-color .15s, background .15s;
}
.dropzone:hover{ border-color:var(--accent); background:var(--accent-soft); color:var(--accent-ink); }
.dropzone i{ font-size:20px; }
.image-chip{ display:flex; align-items:center; gap:12px; padding:8px; border:1px solid var(--line); border-radius:var(--r-field); }
.image-chip img{ width:56px; height:56px; object-fit:cover; border-radius:8px; }
.image-chip span{ flex:1; font-size:13px; color:var(--ink-2); font-weight:600; }

/* ---------- Editor teks kaya ---------- */
.rte-toolbar{
  display:flex; flex-wrap:wrap; align-items:center; gap:2px; padding:5px;
  border:1px solid var(--line); border-bottom:none; border-radius:var(--r-field) var(--r-field) 0 0; background:var(--surface-2);
}
.rte-btn{
  width:32px; height:32px; border:none; border-radius:7px; background:none; color:var(--ink-2);
  font-size:16px; display:inline-flex; align-items:center; justify-content:center; cursor:pointer;
}
.rte-btn:hover{ background:var(--line-2); }
.rte-btn.active{ background:var(--accent-soft); color:var(--accent-ink); }
.rte-sep{ width:1px; height:18px; background:var(--line); margin:0 4px; }
.rte-editor{
  min-height:150px; max-height:340px; overflow-y:auto; padding:12px 13px;
  border:1px solid var(--line); border-radius:0 0 var(--r-field) var(--r-field); outline:none;
  font-size:14.5px; line-height:1.55; background:var(--surface); white-space:pre-wrap; word-wrap:break-word;
}
.rte-editor:focus{ border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-ring); }
.rte-editor:empty::before{ content:attr(data-placeholder); color:#A3B1AB; pointer-events:none; }
.rte-editor a{ color:var(--info); text-decoration:underline; }
.rte-counter{ text-align:right; font-size:12px; color:var(--faint); margin:5px 2px 0; font-variant-numeric:tabular-nums; }
.rte-counter.over{ color:var(--danger); font-weight:700; }

/* ---------- Daftar tombol link ---------- */
.btn-list{ display:flex; flex-direction:column; gap:6px; margin-bottom:8px; }
.btn-list:empty{ display:none; }
.btn-list-item{ display:flex; align-items:center; gap:8px; border:1px solid var(--line); border-radius:var(--r-field); padding:6px 6px 6px 11px; font-size:13px; }
.btn-list-item > i{ color:var(--accent); }
.btn-list-item .bl-text{ font-weight:700; white-space:nowrap; }
.btn-list-item .bl-url{ color:var(--faint); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; flex:1; min-width:0; }
.btn-editor-row{ display:flex; gap:6px; align-items:center; margin-bottom:8px; }
.btn-editor-row input{ flex:1 1 140px; width:auto; margin:0; min-width:0; }
@media (max-width:520px){ .btn-editor-row{ flex-wrap:wrap; } }

/* ---------- Broadcast: penulis + pratinjau ---------- */
.compose{ display:grid; grid-template-columns:minmax(0, 1fr) 340px; gap:16px; align-items:start; }
.compose-side{ position:sticky; top:96px; display:flex; flex-direction:column; gap:10px; }
.compose-actions{ margin-top:20px; padding-top:16px; border-top:1px solid var(--line-2); display:flex; justify-content:flex-end; }
@media (max-width:1060px){
  .compose{ grid-template-columns:1fr; }
  .compose-side{ position:static; }
}
@media (max-width:640px){ .compose-actions .btn{ width:100%; } }

/* Pratinjau ala Telegram */
.tg-preview{ border-radius:var(--r-card); overflow:hidden; border:1px solid var(--line); background:var(--surface); }
.tg-preview-head{ display:flex; align-items:center; gap:9px; padding:10px 14px; border-bottom:1px solid var(--line-2); font-size:13px; font-weight:700; }
.tg-preview-head .tg-dot{ width:28px; height:28px; border-radius:50%; background:var(--deep); color:var(--gold); display:grid; place-items:center; font-size:15px; }
.tg-preview-head small{ display:block; font-weight:500; color:var(--faint); font-size:11.5px; }
.tg-screen{
  padding:16px 14px 18px; min-height:180px; display:flex; flex-direction:column; justify-content:flex-end;
  background:#CFDCC9 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40' viewBox='0 0 40 40'%3E%3Cg fill='none' stroke='%23ffffff' stroke-opacity='.28'%3E%3Crect x='12' y='12' width='16' height='16'/%3E%3Crect x='12' y='12' width='16' height='16' transform='rotate(45 20 20)'/%3E%3C/g%3E%3C/svg%3E");
}
.tg-msg{
  align-self:flex-start; max-width:92%; background:#fff; border-radius:12px 12px 12px 4px; overflow:hidden;
  box-shadow:0 1px 1px rgba(0,0,0,.08); font-size:14px; line-height:1.42; color:#0F1419;
}
.tg-msg img{ display:block; width:100%; max-height:260px; object-fit:cover; }
.tg-text{ padding:7px 10px 2px; white-space:normal; word-wrap:break-word; }
.tg-text a{ color:#2481CC; }
.tg-text code{ background:rgba(0,0,0,.06); }
.tg-text.empty{ color:#9AA5A0; font-style:italic; }
.tg-time{ display:block; text-align:right; font-size:11px; color:#8D9A95; padding:0 9px 6px; }
.tg-buttons{ align-self:flex-start; width:92%; max-width:92%; display:flex; flex-direction:column; gap:4px; margin-top:4px; }
.tg-buttons span{
  display:flex; align-items:center; justify-content:center; gap:5px; background:rgba(40,70,58,.42); color:#fff;
  border-radius:9px; padding:8px 10px; font-size:13.5px; font-weight:600; text-align:center;
}
.tg-buttons span i{ font-size:12px; opacity:.85; }
.tg-preview-inline{ border:none; border-radius:0; }
.tg-preview-inline .tg-screen{ min-height:0; padding:12px 14px; }
.reply-preview{ border-top:1px solid var(--line); max-height:240px; overflow-y:auto; flex-shrink:0; }

/* ---------- Progress kirim / ralat ---------- */
.progress-card{ padding:16px 20px; border-color:#BFE0D2; }
.progress-card.op-tarik{ border-color:#F2C9C4; }
.progress-head{ display:flex; align-items:center; gap:12px; }
.progress-icon{ width:38px; height:38px; border-radius:10px; display:grid; place-items:center; background:var(--accent-soft); color:var(--accent); font-size:19px; flex-shrink:0; }
.op-tarik .progress-icon{ background:var(--danger-soft); color:var(--danger); }
.op-edit .progress-icon{ background:var(--gold-soft); color:#8A6424; }
.progress-title{ flex:1; min-width:0; }
.progress-title strong{ display:block; font-size:15px; }
.progress-title span{ display:block; font-size:13px; color:var(--muted); font-variant-numeric:tabular-nums; }
.progress-pct{ font-size:22px; font-weight:800; letter-spacing:-.02em; font-variant-numeric:tabular-nums; color:var(--accent); }
.op-tarik .progress-pct{ color:var(--danger); }
.bar, .upload-bar{ height:8px; background:var(--line-2); border-radius:999px; overflow:hidden; margin-top:12px; }
.bar > div, .upload-bar > div{ height:100%; width:0; background:var(--accent); border-radius:999px; transition:width .3s ease; }
.op-tarik .bar > div{ background:var(--danger); }
.op-edit .bar > div{ background:var(--gold); }
.progress-foot{ display:flex; align-items:center; gap:12px; margin-top:10px; }
.progress-foot p{ flex:1; margin:0; font-size:12.5px; color:var(--muted); }
.upload-progress{ margin-top:14px; }
.upload-pct{ font-size:12px; color:var(--muted); margin-top:5px; }

/* ---------- Riwayat broadcast ---------- */
.bc-list{ display:flex; flex-direction:column; }
.bc-row{ display:grid; grid-template-columns:minmax(0, 1fr) auto; gap:8px 18px; padding:15px 20px; border-bottom:1px solid var(--line-2); align-items:center; }
.bc-row:last-child{ border-bottom:none; }
.bc-row:hover{ background:#FAFCFB; }
.bc-main{ min-width:0; }
.bc-text{ font-weight:600; color:var(--ink); display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.bc-text.pulled{ color:var(--faint); text-decoration:line-through; text-decoration-color:#C3D2CB; }
.bc-meta{ display:flex; flex-wrap:wrap; align-items:center; gap:6px 12px; margin-top:6px; font-size:12.5px; color:var(--muted); }
.bc-meta i{ font-size:14px; vertical-align:-2px; margin-right:2px; }
.bc-stats{ font-variant-numeric:tabular-nums; }
.bc-stats b{ color:var(--accent-ink); font-weight:700; }
.bc-stats .fail{ color:var(--danger); }
.bc-actions{ display:flex; gap:6px; align-items:center; }
.bc-empty{ padding:40px 20px; text-align:center; color:var(--faint); }
@media (max-width:640px){
  .bc-row{ grid-template-columns:1fr; padding:14px 16px; }
  .bc-actions{ justify-content:flex-start; }
}

/* ---------- Dashboard: grafik, analitik, menu ---------- */
.daily-chart{ display:flex; align-items:flex-end; gap:5px; height:130px; margin-top:8px; border-bottom:1px solid var(--line); }
.daily-chart-bar{ flex:1; min-width:6px; background:#9FD3BE; border-radius:5px 5px 0 0; position:relative; transition:background .15s; }
.daily-chart-bar:last-child{ background:var(--accent); }
.daily-chart-bar:hover{ background:var(--accent-ink); }
.daily-chart-bar .bar-tooltip{
  position:absolute; bottom:calc(100% + 6px); left:50%; transform:translateX(-50%);
  background:var(--ink); color:#fff; font-size:11.5px; padding:3px 7px; border-radius:6px;
  white-space:nowrap; opacity:0; pointer-events:none; transition:opacity .1s;
}
.daily-chart-bar:hover .bar-tooltip{ opacity:1; }

.analytics-list{ display:flex; flex-direction:column; gap:14px; }
.analytics-head{ display:flex; justify-content:space-between; gap:12px; font-size:13.5px; margin-bottom:6px; }
.analytics-title{ font-weight:600; }
.analytics-sub{ color:var(--faint); font-size:12px; }
.analytics-pct{ color:var(--accent-ink); font-weight:700; white-space:nowrap; font-variant-numeric:tabular-nums; }
.analytics-bar-track{ background:var(--line-2); border-radius:999px; height:6px; overflow:hidden; }
.analytics-bar-fill{ background:var(--accent); height:100%; border-radius:999px; }

.menu-tree{ display:flex; flex-direction:column; gap:2px; font-size:13.5px; }
.tree-cat{ font-weight:700; margin-top:12px; display:flex; align-items:center; gap:7px; }
.tree-cat::before{ content:""; width:8px; height:8px; background:var(--gold); transform:rotate(45deg); border-radius:1px; }
.tree-cat:first-child{ margin-top:0; }
.tree-sub{ color:var(--accent-ink); font-weight:600; margin-left:15px; padding:2px 0 2px 12px; border-left:1px solid var(--line); }
.tree-faq{ color:var(--muted); margin-left:15px; padding:3px 8px 3px 28px; border-left:1px solid var(--line); }
.tree-faq-link{ cursor:pointer; border-radius:0 7px 7px 0; transition:background .12s, color .12s; }
.tree-faq-link:hover{ background:var(--accent-soft); color:var(--accent-ink); }
.tree-date{ font-size:11.5px; color:var(--faint); white-space:nowrap; margin-left:4px; }

/* ---------- Pesan masuk: daftar ---------- */
.conversation-list{ display:flex; flex-direction:column; }
.conversation-item{ display:flex; align-items:center; gap:12px; padding:13px 20px; border-bottom:1px solid var(--line-2); cursor:pointer; transition:background .1s; }
.conversation-item:last-child{ border-bottom:none; }
.conversation-item:hover{ background:#FAFCFB; }
.conversation-item.unread .conv-name{ font-weight:800; }
.conv-avatar{ width:40px; height:40px; border-radius:50%; background:var(--accent-soft); color:var(--accent-ink); display:grid; place-items:center; font-weight:800; font-size:15px; flex-shrink:0; }
.conv-info{ flex:1; min-width:0; }
.conv-name-row{ display:flex; justify-content:space-between; gap:8px; align-items:baseline; }
.conv-name{ font-weight:600; font-size:14px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.conv-time{ font-size:12px; color:var(--faint); flex-shrink:0; }
.conv-preview{ font-size:13px; color:var(--muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; margin-top:1px; }
.conv-unread-dot{ background:var(--accent); color:#fff; font-size:11px; font-weight:800; min-width:21px; height:21px; padding:0 6px; border-radius:999px; display:grid; place-items:center; flex-shrink:0; }
.conv-reply-btn{ display:none; }
.conv-empty{ padding:44px 20px; text-align:center; color:var(--faint); font-size:13.5px; }
.conv-empty i{ font-size:30px; display:block; margin-bottom:8px; color:#B7C6BF; }
.modal-body .conversation-item{ padding:10px 6px; border-radius:9px; }

/* ---------- Pesan masuk: thread ---------- */
.chat-thread-card{
  background:var(--surface); border:1px solid var(--line); border-radius:var(--r-card); overflow:hidden;
  display:flex; flex-direction:column; height:calc(100vh - 150px); height:calc(100dvh - 150px); min-height:460px;
}
@media (max-width:900px){ .chat-thread-card{ height:calc(100dvh - 190px); min-height:420px; } }
.chat-thread-header{ display:flex; align-items:center; gap:10px; padding:10px 14px; border-bottom:1px solid var(--line); flex-shrink:0; }
.chat-thread-title{ font-weight:700; font-size:15px; }
.chat-messages{ flex:1; overflow-y:auto; padding:18px 16px; display:flex; flex-direction:column; gap:8px; background:var(--surface-2); }
.chat-bubble{ position:relative; max-width:min(78%, 560px); padding:9px 12px 6px; border-radius:14px; font-size:14px; line-height:1.48; word-wrap:break-word; }
.chat-bubble.from-user{ align-self:flex-start; background:var(--surface); border:1px solid var(--line); border-bottom-left-radius:4px; }
.chat-bubble.from-admin{ align-self:flex-end; background:var(--accent); color:#fff; border-bottom-right-radius:4px; }
.chat-bubble.pulled{ background:var(--surface); color:var(--faint); border:1px dashed #C3D2CB; }
.chat-bubble.pulled .chat-text{ text-decoration:line-through; }
.chat-time{ display:flex; justify-content:flex-end; align-items:center; gap:4px; font-size:11.5px; margin-top:4px; opacity:.75; }
.chat-img-flag{ display:flex; align-items:center; gap:5px; font-size:12px; opacity:.85; margin-bottom:4px; }
.chat-text.pre{ white-space:pre-wrap; }
.chat-bubble.from-admin a{ color:#fff; text-decoration:underline; }
.chat-bubble code{ background:rgba(0,0,0,.1); }
.chat-bubble .chat-link-btn{ display:flex; align-items:center; justify-content:center; gap:6px; margin-top:7px; padding:7px 10px; border-radius:9px; font-size:13px; font-weight:600; text-decoration:none; }
.chat-bubble.from-admin .chat-link-btn{ background:rgba(255,255,255,.16); color:#fff; }
.chat-bubble.from-user .chat-link-btn{ background:var(--accent-soft); color:var(--accent-ink); }
.chat-view-photo-btn{ display:flex; align-items:center; justify-content:center; gap:6px; width:100%; margin-top:7px; padding:8px 10px; border-radius:9px; font-size:13px; font-weight:600; border:none; background:var(--line-2); color:var(--ink); }
.chat-view-photo-btn:disabled{ opacity:.6; }
.bubble-actions{ display:flex; gap:2px; position:absolute; top:-12px; right:8px; opacity:0; transition:opacity .12s; }
.chat-bubble:hover .bubble-actions, .chat-bubble:focus-within .bubble-actions{ opacity:1; }
@media (hover:none){ .bubble-actions{ opacity:1; position:static; justify-content:flex-end; margin-top:6px; } }
.bubble-actions button{ height:26px; padding:0 9px; border-radius:999px; border:1px solid var(--line); background:var(--surface); color:var(--ink-2); font-size:12px; font-weight:600; display:inline-flex; align-items:center; gap:4px; box-shadow:0 2px 6px rgba(10,58,44,.12); }
.bubble-actions button:hover{ color:var(--accent-ink); border-color:#BFE0D2; }
.bubble-actions button.danger:hover{ color:var(--danger); border-color:#F2C9C4; }
@keyframes spin{ to{ transform:rotate(360deg); } }

.chat-attach-preview{ padding:8px 12px 0; display:flex; gap:8px; flex-wrap:wrap; flex-shrink:0; background:var(--surface); border-top:1px solid var(--line); }
.attach-chip{ display:flex; align-items:center; gap:6px; background:var(--surface-2); border:1px solid var(--line); border-radius:9px; padding:5px 6px 5px 9px; font-size:12.5px; }
.attach-chip img{ width:24px; height:24px; border-radius:5px; object-fit:cover; }
.attach-chip button{ background:none; border:none; color:var(--muted); display:flex; padding:3px; border-radius:5px; }
.attach-chip button:hover{ background:var(--line-2); }
.attach-chip .clickable{ cursor:pointer; text-decoration:underline; text-underline-offset:2px; }
.attach-chip img.hidden, .attach-chip i.hidden{ display:none; }
.chat-toolbar{ display:flex; flex-wrap:wrap; align-items:center; gap:1px; padding:6px 10px 0; flex-shrink:0; background:var(--surface); border-top:1px solid var(--line); }
.chat-attach-preview:not(.hidden) ~ .chat-toolbar, .reply-preview:not(.hidden) ~ .chat-toolbar{ border-top:none; }
#replyPreviewToggle.active{ background:var(--accent-soft); color:var(--accent-ink); }
.chat-input-row{ display:flex; gap:8px; padding:8px 10px 10px; flex-shrink:0; background:var(--surface); align-items:flex-end; }
.reply-editor{ flex:1; min-width:0; min-height:44px; max-height:150px; padding:10px 13px; border-radius:12px; margin:0; font-size:14.5px; }
.chat-send-btn{ flex-shrink:0; width:44px; height:44px; padding:0; border-radius:12px; }
.chat-send-btn i{ font-size:19px; }

.faq-suggest{ padding:8px 12px 0; background:var(--surface); border-top:1px solid var(--line); flex-shrink:0; }
.faq-suggest-head{ display:flex; justify-content:space-between; align-items:center; font-size:12.5px; font-weight:600; color:var(--muted); margin-bottom:6px; gap:8px; }
.faq-suggest-head .ph-fill{ color:var(--gold); }
.faq-suggest-list{ display:flex; gap:8px; overflow-x:auto; padding-bottom:8px; min-height:20px; }
.faq-chip{ flex:0 0 auto; max-width:250px; text-align:left; background:var(--surface); border:1px solid var(--line); border-radius:10px; padding:7px 10px; font-size:12.5px; }
.faq-chip:hover{ border-color:var(--accent); background:var(--accent-soft); }
.faq-chip.top{ border-color:#BFE0D2; background:#F3FAF6; }
.fc-q{ font-weight:700; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.fc-sub{ font-size:11.5px; color:var(--faint); margin-top:2px; }

.lightbox-overlay{ position:fixed; inset:0; background:rgba(5,20,15,.9); z-index:300; display:none; align-items:center; justify-content:center; padding:24px; }
.lightbox-overlay.active{ display:flex; }
.lightbox-overlay img{ max-width:100%; max-height:90vh; border-radius:10px; }
.lightbox-close{ position:absolute; top:18px; right:18px; width:40px; height:40px; border-radius:50%; background:rgba(255,255,255,.12); border:none; color:#fff; font-size:20px; display:grid; place-items:center; }

/* ---------- Pustaka dokumen ---------- */
.file-list{ display:flex; flex-direction:column; }
.file-row{ display:flex; align-items:center; gap:14px; padding:13px 20px; border-bottom:1px solid var(--line-2); }
.file-row:last-child{ border-bottom:none; }
.file-row:hover{ background:#FAFCFB; }
.file-icon{ width:40px; height:40px; border-radius:10px; flex-shrink:0; display:grid; place-items:center; font-size:21px; background:var(--accent-soft); color:var(--accent-ink); }
.file-icon.pdf{ background:var(--danger-soft); color:var(--danger); }
.file-icon.video{ background:#EFEAF8; color:#5B3E9C; }
.file-icon.image{ background:var(--info-soft); color:var(--info); }
.file-info{ flex:1; min-width:0; }
.file-name{ font-weight:700; font-size:14px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.file-meta{ font-size:12px; color:var(--faint); margin-top:2px; }
.file-desc{ font-size:12.5px; color:var(--muted); margin-top:2px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.file-actions{ display:flex; gap:6px; flex-shrink:0; }
@media (max-width:640px){ .file-row{ flex-wrap:wrap; padding:13px 16px; } .file-actions{ width:100%; padding-left:54px; } }

/* ---------- Modal ---------- */
.modal-overlay{
  position:fixed; inset:0; background:rgba(10,30,24,.42); display:flex; align-items:center; justify-content:center;
  z-index:100; padding:20px; animation:fadeIn .15s ease-out;
}
.modal-top{ z-index:150; }
@keyframes fadeIn{ from{ opacity:0; } }
.modal{
  background:var(--surface); border-radius:16px; width:100%; max-width:500px; max-height:calc(100vh - 40px); max-height:calc(100dvh - 40px);
  display:flex; flex-direction:column; box-shadow:var(--shadow-pop); animation:modalIn .18s ease-out;
}
.modal.modal-wide{ max-width:920px; }
@keyframes modalIn{ from{ transform:translateY(8px) scale(.985); opacity:.5; } }
.modal-head{ display:flex; justify-content:space-between; align-items:center; gap:12px; padding:16px 18px 14px 22px; border-bottom:1px solid var(--line-2); }
.modal-head h3{ margin:0; font-size:17px; font-weight:800; letter-spacing:-.01em; }
.modal-body{ padding:6px 22px 20px; overflow-y:auto; }
.modal-foot{ display:flex; gap:10px; justify-content:flex-end; padding:14px 22px; border-top:1px solid var(--line-2); background:var(--surface-2); border-radius:0 0 16px 16px; }
.modal-split{ display:grid; grid-template-columns:minmax(0, 1fr) 300px; gap:20px; }
.modal-split .tg-preview{ position:sticky; top:12px; }
@media (max-width:760px){ .modal-split{ grid-template-columns:1fr; } }
@media (max-width:640px){
  .modal-overlay{ align-items:flex-end; padding:0; }
  .modal{ border-radius:18px 18px 0 0; max-height:92dvh; }
  .modal-foot{ border-radius:0; padding-bottom:calc(14px + env(safe-area-inset-bottom)); }
  .modal-foot .btn{ flex:1; }
}
.modal-confirm{ max-width:440px; }
.confirm-body{ display:flex; gap:14px; padding:22px 22px 18px; }
.confirm-body h3{ margin:2px 0 6px; font-size:17px; font-weight:800; }
.confirm-icon{ width:40px; height:40px; border-radius:11px; flex-shrink:0; display:grid; place-items:center; font-size:21px; background:var(--accent-soft); color:var(--accent); }
.confirm-icon.danger{ background:var(--danger-soft); color:var(--danger); }
.confirm-icon.warn{ background:var(--gold-soft); color:#8A6424; }
.confirm-message{ color:var(--muted); font-size:14px; line-height:1.55; }
.confirm-message p{ margin:0 0 8px; }
.confirm-message p:last-child{ margin:0; }
.confirm-message input{ margin-top:10px; }
.callout{ display:flex; gap:10px; padding:10px 12px; border-radius:10px; font-size:13px; line-height:1.5; margin-top:14px; background:var(--info-soft); color:#1E4A6B; }
.callout i{ font-size:17px; margin-top:1px; }
.callout.warn{ background:var(--warn-soft); color:#5C3A08; }

/* ---------- Toast ---------- */
.toast{
  position:fixed; bottom:24px; left:50%; transform:translateX(-50%); z-index:400;
  background:var(--ink); color:#fff; padding:11px 18px; border-radius:12px; font-size:13.5px; font-weight:600;
  box-shadow:var(--shadow-pop); max-width:min(92vw, 520px); text-align:center; animation:toastIn .2s ease-out;
}
.toast.error{ background:var(--danger); }
@keyframes toastIn{ from{ transform:translate(-50%, 8px); opacity:0; } }
@media (max-width:900px){ .toast{ bottom:calc(84px + env(safe-area-inset-bottom)); } }

/* Kolom aksi tabel tetap sel tabel (bukan flex) supaya baris rata */
.table td.row-actions{ display:table-cell; text-align:right; white-space:nowrap; }
.table td.row-actions > * + *{ margin-left:6px; }

/* Penyesuaian setelah tinjauan visual */
.search input[type=search]{ padding-left:38px; }
.card-head{ margin-bottom:10px; }
.grid-2{ align-items:start; }
.btn:disabled{ opacity:.4; filter:grayscale(1); }
.chat-bubble:has(> .bubble-actions){ margin-top:12px; }

/* =====================================================================
   Interactive Center & perluasan broadcast (memakai token yang sama)
   ===================================================================== */
.clickable{ cursor:pointer; }
tr.clickable:hover td{ background:#F5FAF7; }
.ic-loading{ padding:40px 20px; text-align:center; color:var(--faint); }
.sheet-title{ font-size:12px; font-weight:600; color:var(--faint); margin:4px 4px 8px; }
.sheet-grid + .sheet-title{ margin-top:14px; }

/* Segmented control */
.segmented{ display:inline-flex; background:var(--line-2); border-radius:10px; padding:3px; gap:2px; flex-wrap:wrap; }
.segmented label{ position:relative; cursor:pointer; margin:0 !important; }
.segmented input{ position:absolute; opacity:0; pointer-events:none; }
.segmented span{ display:inline-flex; align-items:center; gap:5px; padding:7px 14px; border-radius:8px; font-size:13.5px; font-weight:600; color:var(--muted); transition:background .15s, color .15s; }
.segmented input:checked + span{ background:var(--surface); color:var(--ink); box-shadow:0 1px 2px rgba(10,58,44,.12); }
.segmented input:focus-visible + span{ outline:2px solid var(--accent); }
.ic-tabs{ align-self:flex-start; }
.schedule-row{ display:flex; align-items:center; gap:10px; margin-top:10px; flex-wrap:wrap; }
.schedule-row input{ width:auto; min-width:220px; }
input[type=datetime-local], input[type=date], input[type=number]{
  padding:9px 11px; border:1px solid var(--line); border-radius:var(--r-field); background:var(--surface); color:var(--ink); font-size:14px; outline:none;
}
input[type=datetime-local]:focus, input[type=date]:focus, input[type=number]:focus{ border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-ring); }
.picked-chip{ display:flex; align-items:center; gap:8px; margin-top:8px; padding:7px 8px 7px 12px; border-radius:var(--r-field); background:var(--accent-soft); color:var(--accent-ink); font-size:13px; font-weight:600; }
.picked-chip span{ flex:1; }

/* Pemilih pengguna / item */
.pick-bar{ display:flex; align-items:center; gap:8px; margin:4px 0 8px; font-size:12.5px; color:var(--muted); flex-wrap:wrap; }
.pick-bar span{ flex:1; }
.pick-list{ max-height:340px; overflow-y:auto; border:1px solid var(--line); border-radius:var(--r-field); }
.pick-row{ display:flex; align-items:center; gap:10px; padding:9px 12px; border-bottom:1px solid var(--line-2); cursor:pointer; margin:0 !important; }
.pick-row:last-child{ border-bottom:none; }
.pick-row:hover{ background:var(--surface-2); }
.pick-row span{ flex:1; min-width:0; }
.pick-row b{ display:block; font-size:13.5px; font-weight:600; color:var(--ink); }
.pick-row small{ display:block; font-size:12px; color:var(--faint); }
.tpl-row{ cursor:default; }

/* Overview */
.ic-type-grid{ display:grid; grid-template-columns:repeat(4, minmax(0, 1fr)); gap:12px; }
@media (max-width:1060px){ .ic-type-grid{ grid-template-columns:repeat(2, minmax(0, 1fr)); } }
.ic-type-card{ display:grid; grid-template-columns:auto 1fr; grid-template-rows:auto auto; gap:2px 12px; align-items:center; text-align:left;
  background:var(--surface); border:1px solid var(--line); border-radius:var(--r-card); padding:16px; transition:border-color .15s, background .15s; }
.ic-type-card:hover{ border-color:#BFE0D2; background:#FAFDFB; }
.ic-type-icon{ grid-row:span 2; width:42px; height:42px; border-radius:11px; display:grid; place-items:center; font-size:22px; background:var(--accent-soft); color:var(--accent); }
.ic-type-name{ font-weight:700; font-size:15px; }
.ic-type-stats{ font-size:13px; color:var(--muted); }
.ic-type-stats b{ color:var(--ink); font-size:15px; margin-right:3px; }
.ic-type-stats span{ display:block; font-size:12px; color:var(--faint); }
.ic-kpis{ display:flex; flex-wrap:wrap; gap:10px; margin:6px 0 4px; }
.ic-kpis > div{ flex:1 1 120px; padding:10px 12px; border-radius:var(--r-field); background:var(--surface-2); border:1px solid var(--line-2); }
.ic-kpis b{ display:block; font-size:20px; font-weight:800; letter-spacing:-.02em; font-variant-numeric:tabular-nums; }
.ic-kpis span{ font-size:12px; color:var(--muted); }
.ic-kpis .warn{ background:var(--gold-soft); border-color:#EBDDBE; }
.ic-kpis .warn b{ color:#8A6424; }
.ic-kpis.big{ background:var(--surface); border:1px solid var(--line); border-radius:var(--r-card); padding:12px; margin:0; }
.ic-kpis.big > div{ background:none; border:none; border-right:1px solid var(--line-2); border-radius:0; }
.ic-kpis.big > div:last-child{ border-right:none; }
.ic-notif{ list-style:none; margin:12px 0 0; padding:0; }
.ic-notif li{ display:flex; gap:10px; align-items:flex-start; padding:10px 0; border-top:1px solid var(--line-2); font-size:13.5px; }
.ic-notif li > i{ font-size:18px; color:var(--faint); margin-top:1px; }
.ic-notif li.unread > i{ color:var(--gold); }
.ic-notif li > div{ flex:1; }
.ic-notif small{ display:block; color:var(--faint); font-size:12px; }

/* Editor */
.ed-head{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.ed-meta{ display:flex; align-items:center; gap:8px; font-size:13px; color:var(--muted); flex-wrap:wrap; }
.ed-grid{ display:grid; grid-template-columns:minmax(0, 1fr) 330px; gap:16px; align-items:start; }
.ed-main{ display:flex; flex-direction:column; gap:16px; min-width:0; }
.ed-side{ position:sticky; top:96px; display:flex; flex-direction:column; gap:10px; }
@media (max-width:1060px){ .ed-grid{ grid-template-columns:1fr; } .ed-side{ position:static; order:-1; } }
.ed-row{ display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:12px; }
.ed-row .hint{ margin-top:4px; }
@media (max-width:760px){ .ed-row{ grid-template-columns:1fr; gap:0; } }
.switch-row span small{ display:block; font-size:12px; color:var(--faint); font-weight:500; margin-top:1px; }
.switch-row.inline{ margin:0; }
.switch-grid{ display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:0 16px; margin-bottom:12px; }
@media (max-width:640px){ .switch-grid{ grid-template-columns:1fr; } }
.callout ul{ margin:4px 0 0; padding-left:18px; }
.callout a{ color:inherit; font-weight:700; }
.sec-row{ display:flex; gap:8px; align-items:center; margin-bottom:8px; }
.sec-row input:first-of-type{ flex:0 1 40%; }
.sec-row input{ flex:1; min-width:0; }
.q-num{ display:inline-grid; place-items:center; min-width:24px; height:24px; padding:0 6px; border-radius:7px; background:var(--line-2); color:var(--ink-2); font-size:12.5px; font-weight:700; flex-shrink:0; }

.q-card{ border:1px solid var(--line); border-radius:12px; margin-bottom:12px; background:var(--surface); transition:border-color .15s, box-shadow .15s; }
.q-card.selected{ border-color:#9FD3BE; box-shadow:0 0 0 3px rgba(4,120,87,.08); }
.q-card.selected .q-num{ background:var(--accent); color:#fff; }
.q-head{ display:flex; align-items:center; gap:8px; padding:10px 12px; border-bottom:1px solid var(--line-2); }
.q-type{ width:auto; flex:0 0 auto; max-width:190px; padding:6px 30px 6px 10px; font-size:13px; font-weight:600; background-color:var(--surface-2); }
.q-head-text{ flex:1; min-width:0; font-size:13px; color:var(--muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; display:none; }
.q-tools{ display:flex; gap:4px; margin-left:auto; }
.q-tools .icon-btn{ min-width:28px; height:28px; padding:0 6px; }
.q-body{ padding:4px 14px 14px; }
.q-card.collapsed .q-body{ display:none; }
.q-card.collapsed .q-head{ border-bottom:none; }
.q-card.collapsed .q-head-text{ display:block; }
.q-help{ margin-top:6px; font-size:13.5px; }
.q-flags{ display:flex; flex-wrap:wrap; align-items:center; gap:8px 14px; margin-top:10px; }
.q-flags input[type=text]{ flex:1 1 140px; width:auto; }
.inline-field{ display:inline-flex !important; align-items:center; gap:6px; margin:0 !important; font-size:13px !important; font-weight:600; color:var(--ink-2); white-space:nowrap; }
.inline-field input, .inline-field select{ width:auto; max-width:120px; padding:6px 9px; font-size:13.5px; }
.inline-field select{ padding-right:28px; max-width:200px; }
.img-mini{ display:inline-flex; align-items:center; gap:4px; }
.img-mini img{ width:34px; height:34px; border-radius:7px; object-fit:cover; border:1px solid var(--line); }
.opt-list{ display:flex; flex-direction:column; gap:6px; margin-bottom:8px; }
.opt-row{ display:flex; align-items:center; gap:6px; }
.opt-row input[type=text]{ flex:1; min-width:0; padding:8px 10px; font-size:14px; }
.opt-letter{ width:26px; text-align:center; font-size:12.5px; font-weight:700; color:var(--faint); flex-shrink:0; }
.opt-correct{ position:relative; width:26px; height:26px; flex-shrink:0; margin:0 !important; cursor:pointer; }
.opt-correct input{ position:absolute; opacity:0; inset:0; margin:0; cursor:pointer; }
.opt-correct i{ display:grid; place-items:center; width:26px; height:26px; border-radius:50%; border:1.5px solid #C3D2CB; color:transparent; font-size:13px; transition:all .15s; }
.opt-correct input:checked + i{ background:var(--accent); border-color:var(--accent); color:#fff; }
.opt-correct input:focus-visible + i{ outline:2px solid var(--accent); outline-offset:2px; }
.chips{ display:flex; flex-wrap:wrap; gap:6px; margin-top:8px; }
.chip-check{ margin:0 !important; cursor:pointer; }
.chip-check input{ position:absolute; opacity:0; }
.chip-check span{ display:inline-block; padding:4px 10px; border-radius:999px; border:1px solid var(--line); font-size:12px; font-weight:600; color:var(--muted); }
.chip-check input:checked + span{ background:var(--accent-soft); border-color:#BFE0D2; color:var(--accent-ink); }
.q-cond{ margin-top:12px; border-top:1px dashed var(--line); padding-top:10px; }
.q-cond summary{ cursor:pointer; font-size:13px; font-weight:600; color:var(--ink-2); list-style:none; display:flex; align-items:center; gap:6px; }
.q-cond summary::-webkit-details-marker{ display:none; }
.q-cond select, .q-cond input{ width:auto; max-width:220px; }
.add-bar{ display:flex; gap:8px; flex-wrap:wrap; padding-top:4px; }
.add-bar select{ width:auto; min-width:200px; }

/* Pratinjau chat (tambahan untuk Interactive Center) */
.tg-screen > * + *{ margin-top:6px; }
.tg-kb{ align-self:flex-start; width:92%; display:flex; flex-direction:column; gap:4px; }
.tg-kb > div{ display:flex; gap:4px; }
.tg-kb span{ flex:1; text-align:center; background:rgba(40,70,58,.42); color:#fff; border-radius:9px; padding:8px 6px; font-size:13px; font-weight:600; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.tg-photo{ padding:0; }
.tg-photo img{ max-height:200px; }
.tg-album{ align-self:flex-start; width:92%; display:grid; grid-template-columns:repeat(auto-fill, minmax(70px, 1fr)); gap:3px; border-radius:12px; overflow:hidden; }
.tg-album span{ position:relative; aspect-ratio:1; background:#E6EEE9; }
.tg-album img{ width:100%; height:100%; object-fit:cover; display:block; }
.tg-album b{ position:absolute; left:4px; top:4px; background:rgba(0,0,0,.55); color:#fff; font-size:11px; padding:1px 6px; border-radius:6px; }
.tg-poll .tg-text small{ display:block; color:#8D9A95; font-size:12px; margin:2px 0 6px; }
.tg-poll-opt{ display:block; padding:5px 0; border-top:1px solid #EEF2EF; font-size:13.5px; }
.tg-sec{ align-self:center; background:rgba(10,58,44,.55); color:#fff; font-size:12px; font-weight:600; padding:3px 10px; border-radius:999px; margin-top:14px !important; }
.tg-note{ align-self:flex-start; font-size:11.5px; color:#3B5A4E; background:rgba(255,255,255,.7); padding:2px 8px; border-radius:6px; }
.full-preview .tg-screen{ max-height:68vh; overflow-y:auto; justify-content:flex-start; }

/* Kelola */
.manage-head{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin:12px 0 8px; font-size:13px; color:var(--muted); }
.manage-grid{ display:grid; grid-template-columns:repeat(auto-fill, minmax(190px, 1fr)); gap:8px; margin:14px 0 6px; }
.manage-btn{ display:flex; align-items:flex-start; gap:10px; text-align:left; padding:10px 12px; border:1px solid var(--line); border-radius:var(--r-field); background:var(--surface); color:var(--ink); font-size:13.5px; font-weight:600; }
.manage-btn:hover{ border-color:#BFE0D2; background:#FAFDFB; }
.manage-btn i{ font-size:18px; color:var(--accent); margin-top:1px; }
.manage-btn small{ display:block; font-size:12px; font-weight:500; color:var(--faint); }
.manage-btn.danger i{ color:var(--danger); }
.manage-btn.danger:hover{ border-color:#F2C9C4; background:var(--danger-soft); }
.sub-h{ font-size:14px; font-weight:700; margin:18px 0 8px; }
.rem-list, .audit-list, .answer-list, .text-answers{ list-style:none; margin:0; padding:0; }
.rem-list li{ display:flex; align-items:center; gap:10px; padding:8px 0; border-top:1px solid var(--line-2); font-size:13.5px; }
.rem-list li span{ flex:1; }
.audit-list li{ padding:9px 0; border-top:1px solid var(--line-2); font-size:13.5px; }
.audit-list small{ display:block; color:var(--faint); font-size:12px; margin-top:2px; }

/* Laporan & halaman */
.report-counts{ display:flex; gap:16px; flex-wrap:wrap; margin-top:12px; font-size:13.5px; color:var(--muted); }
.report-counts b{ color:var(--ink); font-size:16px; margin-right:3px; }
.report-counts .fail b{ color:var(--danger); }
.pager{ display:flex; align-items:center; justify-content:flex-end; gap:6px; padding:10px 20px; font-size:12.5px; color:var(--muted); }
.pager:empty{ display:none; }
.pager span{ margin-right:6px; }
.modal-body .pager{ padding:10px 0 0; }

/* Hasil */
.rs-toolbar select#rsAct{ min-width:260px; max-width:420px; }
.rs-toolbar input[type=date]{ padding:6px 8px; }
.rs-head{ display:flex; align-items:flex-start; gap:12px; flex-wrap:wrap; }
.rs-head > div:first-child{ flex:1; min-width:0; }
.rs-head h2{ margin:0 0 4px; font-size:19px; font-weight:800; letter-spacing:-.02em; }
.rs-head span{ display:inline-flex; align-items:center; gap:6px; flex-wrap:wrap; font-size:13px; color:var(--muted); }
.rs-q .card-head h3{ display:flex; align-items:flex-start; gap:8px; line-height:1.4; }
.hbar{ margin-bottom:10px; }
.hbar-head{ display:flex; justify-content:space-between; gap:10px; font-size:13.5px; margin-bottom:4px; }
.hbar-head span{ display:flex; align-items:center; gap:6px; min-width:0; }
.hbar-head img{ width:26px; height:26px; border-radius:6px; object-fit:cover; }
.hbar-head b{ white-space:nowrap; font-variant-numeric:tabular-nums; }
.hbar-head small{ color:var(--faint); font-weight:500; }
.hbar.correct .hbar-head span{ color:var(--accent-ink); font-weight:700; }
.hbar.correct .analytics-bar-fill{ background:var(--accent); }
.hbar:not(.correct) .analytics-bar-fill{ background:#5FAF8F; }
.stat-line{ font-size:13.5px; color:var(--muted); margin:6px 0 10px; }
.stat-line b{ color:var(--ink); }
.likert-bar{ display:flex; height:28px; border-radius:8px; overflow:hidden; margin:4px 0; background:var(--line-2); }
.likert-bar span{ display:grid; place-items:center; color:#fff; font-size:11.5px; font-weight:700; }
.lk0{ background:#B4472F; } .lk1{ background:#D98A5F; } .lk2{ background:#A9B5AF; } .lk3{ background:#5FAF8F; } .lk4{ background:var(--accent); }
.nps{ display:grid; grid-template-columns:auto 1fr; gap:6px 16px; align-items:center; }
.nps-score{ grid-row:span 2; width:84px; height:84px; border-radius:16px; display:grid; place-content:center; text-align:center; }
.nps-score b{ font-size:30px; font-weight:800; line-height:1; }
.nps-score span{ font-size:12px; font-weight:600; }
.nps-score.good{ background:var(--accent-soft); color:var(--accent-ink); }
.nps-score.mid{ background:var(--gold-soft); color:#8A6424; }
.nps-score.bad{ background:var(--danger-soft); color:var(--danger); }
.nps-split{ display:flex; height:12px; border-radius:999px; overflow:hidden; background:var(--line-2); }
.nps-split .pro{ background:var(--accent); } .nps-split .pas{ background:#A9B5AF; } .nps-split .det{ background:#B4472F; }
.nps-legend{ display:flex; flex-wrap:wrap; gap:12px; font-size:12.5px; color:var(--muted); }
.dist{ display:flex; align-items:flex-end; gap:6px; height:110px; padding-top:8px; }
.dist > div{ flex:1; height:100%; display:flex; flex-direction:column; align-items:center; justify-content:flex-end; gap:2px; min-width:0; }
.dist > div span{ width:100%; max-width:40px; background:#9FD3BE; border-radius:5px 5px 0 0; }
.dist b{ font-size:12px; }
.dist small{ font-size:11px; color:var(--faint); }
.text-answers li{ padding:8px 0; border-top:1px solid var(--line-2); font-size:13.5px; }
.text-answers li small{ display:block; font-size:11.5px; color:var(--faint); }
.quiz-q{ display:grid; grid-template-columns:auto 1fr; gap:4px 12px; align-items:center; margin-bottom:12px; }
.quiz-q > span{ font-weight:800; font-size:16px; color:var(--accent-ink); }
.quiz-q small{ grid-column:span 2; color:var(--muted); font-size:12.5px; }
.rank-list{ margin:0; padding-left:22px; }
.rank-list li{ display:flex; justify-content:space-between; gap:10px; padding:6px 0; border-bottom:1px solid var(--line-2); font-size:13.5px; }
.rank-list b{ font-weight:600; color:var(--muted); white-space:nowrap; }
.matrix-table td, .matrix-table th{ text-align:center; }
.matrix-table td:first-child, .matrix-table th:first-child{ text-align:left; }
.matrix-table small{ color:var(--muted); }
.answer-list li{ padding:12px 0; border-top:1px solid var(--line-2); font-size:14px; }
.answer-list li > b{ display:block; margin-bottom:4px; }
.answer-list .ans{ color:var(--ink-2); white-space:pre-wrap; }
.grade-row{ display:flex; gap:8px; flex-wrap:wrap; align-items:center; margin-top:8px; padding:10px; border-radius:var(--r-field); background:var(--gold-soft); }
.grade-row input[type=text]{ flex:1 1 200px; width:auto; }
.rank-num{ display:inline-grid; place-items:center; width:28px; height:28px; border-radius:50%; background:var(--line-2); }
.rank-num.r1{ background:var(--gold); color:#fff; } .rank-num.r2{ background:#A9B5AF; color:#fff; } .rank-num.r3{ background:#C99A6B; color:#fff; }

@media (max-width:640px){
  .rs-toolbar select#rsAct{ min-width:0; max-width:none; flex:1 1 100%; }
  .ic-kpis.big > div{ border-right:none; flex-basis:40%; }
  .q-type{ max-width:150px; }
  .q-tools .icon-btn[title="Naik"], .q-tools .icon-btn[title="Turun"]{ display:none; }
  .segmented{ display:flex; }
  .segmented label{ flex:1; }
  .segmented span{ justify-content:center; padding:7px 8px; }
}

.text-answers{ max-height:300px; overflow-y:auto; }
.text-answers li{ display:flex; justify-content:space-between; gap:12px; align-items:baseline; }
.text-answers li small{ flex-shrink:0; }
.text-answers .dup{ flex-shrink:0; font-size:12px; color:var(--accent-ink); background:var(--accent-soft); padding:1px 8px; border-radius:999px; }
.modal-split .tg-preview{ position:static; }

/* =========================================================
   Divisi & percakapan, kode akses, notifikasi
   ========================================================= */
.small{ font-size:12px; }
.center{ text-align:center !important; }
.text-danger{ color:var(--danger); }
.td-wrap{ white-space:normal; max-width:340px; }
.toolbar-title{ font-size:15px; font-weight:700; margin:0; }
.page > .toolbar + .card, .page > .card + .toolbar{ margin-top:12px; }
.page > .card + .toolbar{ margin-top:26px; }
.btn-row{ display:flex; flex-wrap:wrap; gap:8px; margin-top:14px; }
.form-row{ display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:0 14px; }
@media (max-width:640px){ .form-row{ grid-template-columns:1fr; } .hide-sm{ display:none; } }

/* Label divisi */
.div-badge{ display:inline-flex; align-items:center; gap:4px; padding:2px 8px; border-radius:999px; font-size:11.5px; font-weight:700; line-height:1.5;
  background:var(--accent-soft); color:var(--accent-ink); white-space:nowrap; margin:1px 4px 1px 0; }
.div-badge i{ font-size:12px; }
.div-badge.div-umum{ background:var(--line-2); color:var(--ink-2); }
.div-badge.div-kampus{ background:var(--gold-soft); color:#6B4E1C; }
.div-badge.div-done{ background:#EEF1F0; color:var(--muted); }
.conv-tags{ margin:2px 0 1px; display:flex; flex-wrap:wrap; }
.conversation-item.done .conv-name{ color:var(--muted); }
.conversation-item.done .conv-avatar{ opacity:.6; }

/* Kepala percakapan */
.chat-thread-headtext{ flex:1; min-width:0; }
.chat-thread-title{ white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.chat-thread-meta{ display:flex; flex-wrap:wrap; gap:4px; align-items:center; margin-top:2px; }
.chat-thread-meta .badge{ font-size:11px; }
.chat-thread-actions{ display:flex; gap:6px; flex-shrink:0; }
.chat-event{ display:flex; justify-content:center; margin:10px 0; }
.chat-event span{ display:inline-flex; align-items:center; gap:6px; background:rgba(255,255,255,.75); border:1px solid var(--line); color:var(--muted);
  font-size:12px; font-weight:600; padding:4px 12px; border-radius:999px; text-align:center; max-width:92%; }

/* Pilihan (radio/checkbox) bergaya kartu */
.choice-list{ display:flex; flex-direction:column; gap:8px; margin-top:6px; }
.modal-body label.choice, .choice{ display:flex !important; align-items:flex-start; gap:10px; padding:10px 12px !important; margin:0 !important;
  border:1px solid var(--line); border-radius:10px; cursor:pointer; font-weight:500 !important; color:var(--ink) !important; transition:border-color .15s, background .15s; }
.choice:hover{ border-color:#C3D2CB; background:var(--surface-2); }
.choice:has(input:checked){ border-color:var(--accent); background:var(--accent-soft); }
.choice input{ margin-top:2px; }
.choice input[type=radio]{ width:18px; height:18px; accent-color:var(--accent); flex-shrink:0; }
.choice span b{ display:block; font-size:14px; }
.choice span small{ display:block; color:var(--muted); font-size:12px; font-weight:500; }
.choice-block{ flex-direction:column; cursor:default; }
.choice-block:hover{ background:none; }
.chip-checks{ display:flex; flex-wrap:wrap; gap:6px; margin-top:4px; }
.chip-check{ position:relative; }

/* Notifikasi */
.card-head h3 i{ color:var(--accent); margin-right:4px; vertical-align:-2px; }
.card-head > span:last-child:not(:first-child){ margin-left:auto; }
.device-list{ display:flex; flex-direction:column; }
.device-row{ display:flex; align-items:center; gap:12px; padding:12px 0; border-bottom:1px solid var(--line-2); }
.device-row:last-child{ border-bottom:none; }
.device-row > i{ font-size:22px; color:var(--accent); width:36px; height:36px; display:grid; place-items:center; background:var(--accent-soft); border-radius:10px; flex-shrink:0; }
.device-info{ flex:1; min-width:0; }
.device-info b{ display:block; font-size:14px; }
.device-info small{ color:var(--muted); font-size:12px; }
.switch-mini{ position:relative; display:inline-block; width:38px; height:22px; margin:0 !important; cursor:pointer; vertical-align:middle; }
.switch-mini input{ position:absolute; opacity:0; width:0; height:0; }
.switch-mini span{ position:absolute; inset:0; background:#C9D6D0; border-radius:999px; transition:background .15s; }
.switch-mini span::after{ content:""; position:absolute; top:3px; left:3px; width:16px; height:16px; border-radius:50%; background:#fff; box-shadow:0 1px 2px rgba(0,0,0,.2); transition:transform .15s; }
.switch-mini input:checked + span{ background:var(--accent); }
.switch-mini input:checked + span::after{ transform:translateX(16px); }
.switch-mini input:focus-visible + span{ outline:2px solid var(--accent); outline-offset:2px; }
.link-box{ background:var(--surface-2); border:1px dashed var(--line); border-radius:10px; padding:10px 12px; margin:10px 0; word-break:break-all; }
.link-box code{ background:none; padding:0; font-size:13px; }

/* Opsi penting (notifikasi) */
.opt-alert{ color:var(--faint); }
.opt-alert.on{ color:var(--gold); border-color:#E6D2A8; background:var(--gold-soft); }
.opt-alert.on:hover{ background:#F1E3C4; }

/* Kode akses */
.sub-h-row{ display:flex; align-items:center; justify-content:space-between; gap:10px; }
.sub-h-row .sub-h{ margin-bottom:8px; }
.code-list{ display:flex; flex-direction:column; gap:8px; }
.code-row{ display:grid; grid-template-columns:1fr auto; gap:4px 12px; padding:10px 12px; border:1px solid var(--line); border-radius:10px; background:var(--surface); }
.code-main{ display:flex; flex-wrap:wrap; align-items:center; gap:8px; }
.code-meta{ grid-column:1; display:flex; flex-wrap:wrap; gap:4px 14px; font-size:12px; color:var(--muted); }
.code-meta i{ vertical-align:-1px; }
.code-actions{ grid-column:2; grid-row:1 / span 2; display:flex; align-items:center; gap:4px; }
.code-chip{ font-family:ui-monospace, SFMono-Regular, Menlo, monospace; font-weight:700; font-size:14px; letter-spacing:.04em;
  background:var(--deep); color:#fff; padding:3px 9px; border-radius:7px; }
.code-chip.sm{ font-size:11.5px; padding:2px 7px; background:var(--accent-soft); color:var(--accent-ink); letter-spacing:0; }
.code-chip.sm i{ font-size:11px; }
@media (max-width:640px){
  .code-row{ grid-template-columns:1fr; }
  .code-actions{ grid-column:1; grid-row:auto; }
  .chat-thread-actions .btn{ padding:6px 9px; }
}
.input-with-btn{ display:flex; gap:6px; }
.input-with-btn input{ flex:1; font-family:ui-monospace, SFMono-Regular, Menlo, monospace; text-transform:uppercase; letter-spacing:.04em; }
.tg-msg-out{ align-self:flex-end !important; background:#E1FEC6 !important; border-radius:12px 12px 4px 12px !important; padding:7px 10px; margin-bottom:8px; font-family:ui-monospace, monospace; font-weight:700; }
.code-list + .hint{ margin-top:10px; }
.modal-body input[type=number], .modal-body input[type=datetime-local], .modal-body input[type=date], .modal-body input[type=time]{
  width:100%; padding:10px 12px; border:1px solid var(--line); border-radius:var(--r-field); outline:none; font-size:14.5px; background:var(--surface); color:var(--ink);
}
.choice input:focus-visible{ outline:none; }
.choice:has(input:focus-visible){ box-shadow:0 0 0 3px var(--accent-ring); }
@media (max-width:640px){
  .chat-thread-meta{ flex-wrap:nowrap; overflow-x:auto; scrollbar-width:none; }
  .chat-thread-meta::-webkit-scrollbar{ display:none; }
  .chat-thread-meta > *{ flex-shrink:0; }
}