/* =========================================================================
 * KASKOW Admin UI Kit (prefix ak-) — dipakai ulang oleh semua halaman admin.
 * Bergantung pada token tema: --card --card-solid --border --muted --text --hover --brand ...
 * ========================================================================= */
.ak-page { display: flex; flex-direction: column; gap: 1rem; animation: viewIn 0.25s ease both; }
.ak-head { display: flex; align-items: stretch; justify-content: space-between; gap: 0.8rem 1rem; flex-wrap: wrap; }
.ak-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(9.5rem, 1fr)); gap: 0.65rem; }
.ak-head > .ak-stats { flex: 1 1 28rem; }
.ak-stat { position: relative; display: flex; align-items: center; gap: 0.7rem; padding: 0.7rem 0.9rem; border-radius: 1rem; border: 1px solid var(--border); background: var(--card); text-align: left; color: inherit; overflow: hidden; transition: transform 0.15s, border-color 0.15s, box-shadow 0.15s; }
button.ak-stat { cursor: pointer; }
button.ak-stat:hover { transform: translateY(-2px); border-color: var(--brand-strong); box-shadow: 0 12px 24px -16px var(--brand-ring); }
.ak-stat.is-on { border-color: var(--brand-strong); background: linear-gradient(135deg, var(--brand-tint), transparent 80%), var(--card); }
.ak-stat-ic { display: grid; place-items: center; flex: none; width: 2.4rem; height: 2.4rem; border-radius: 0.8rem; }
.ak-stat-val { font-size: 1.35rem; font-weight: 900; line-height: 1.05; letter-spacing: -0.01em; }
.ak-stat-label { margin-top: 0.15rem; font-size: 0.7rem; font-weight: 700; color: var(--muted); }
.ak-stat-sub { font-size: 0.66rem; color: var(--muted); margin-top: 0.1rem; }
.ak-actions { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; }

/* warna nada (dipakai ikon & pil) */
.t-brand { background: var(--brand-tint); color: var(--accent-text); }
.t-green { background: rgba(16,185,129,0.14); color: #34d399; }
.t-red { background: rgba(244,63,94,0.14); color: #fb7185; }
.t-amber { background: rgba(245,158,11,0.15); color: #f59e0b; }
.t-violet { background: rgba(139,92,246,0.16); color: #a78bfa; }
.t-blue { background: rgba(59,130,246,0.15); color: #60a5fa; }
.t-gray { background: rgba(148,163,184,0.16); color: #94a3b8; }
:root[data-theme="light"] .t-green { color: #059669; }
:root[data-theme="light"] .t-red { color: #e11d48; }
:root[data-theme="light"] .t-amber { color: #d97706; }
:root[data-theme="light"] .t-violet { color: #7c3aed; }
:root[data-theme="light"] .t-blue { color: #2563eb; }
:root[data-theme="light"] .t-gray { color: #64748b; }

.ak-toolbar { display: flex; align-items: center; gap: 0.6rem 1rem; flex-wrap: wrap; }
.ak-search { position: relative; flex: 1 1 14rem; max-width: 20rem; color: var(--muted); }
.ak-search svg { position: absolute; left: 0.8rem; top: 50%; transform: translateY(-50%); pointer-events: none; }
.ak-search .input { padding-left: 2.3rem; padding-top: 0.55rem; padding-bottom: 0.55rem; }
.ak-spacer { flex: 1; }
.ak-card { border-radius: 1.2rem; border: 1px solid var(--border); background: var(--card); overflow: hidden; }
.ak-card-h { display: flex; align-items: center; justify-content: space-between; gap: 0.8rem; padding: 0.95rem 1.15rem 0.7rem; flex-wrap: wrap; }
.ak-card-t { display: flex; align-items: center; gap: 0.55rem; font-size: 0.98rem; font-weight: 800; }
.ak-card-s { font-size: 0.78rem; color: var(--muted); margin-top: 0.15rem; }
.ak-card-b { padding: 0.2rem 1.15rem 1.1rem; }
.ak-ic { display: grid; place-items: center; flex: none; width: 2.4rem; height: 2.4rem; border-radius: 0.8rem; }
.ak-ic.sm { width: 2rem; height: 2rem; border-radius: 0.65rem; }
.ak-ic.lg { width: 3rem; height: 3rem; border-radius: 1rem; }

.ak-pill { display: inline-flex; align-items: center; gap: 0.35rem; padding: 0.2rem 0.6rem; border-radius: 9999px; font-size: 0.7rem; font-weight: 800; white-space: nowrap; border: 1px solid transparent; }
.ak-pill i { width: 0.42rem; height: 0.42rem; border-radius: 50%; background: currentColor; }
.ak-pill.pulse i { animation: ovPulse 1.8s infinite; }
.ak-mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 0.78em; }
.ak-muted { color: var(--muted); }
.ak-sub { font-size: 0.74rem; color: var(--muted); }
.ak-bar { height: 0.4rem; border-radius: 9999px; background: var(--hover); overflow: hidden; }
.ak-bar > i { display: block; height: 100%; border-radius: inherit; background: var(--brand); transition: width 0.6s cubic-bezier(0.2, 0.8, 0.2, 1); }
.ak-bar.warn > i { background: #f59e0b; } .ak-bar.bad > i { background: #f43f5e; } .ak-bar.ok > i { background: #10b981; }

.ak-empty { display: grid; justify-items: center; gap: 0.35rem; padding: 2.6rem 1rem; text-align: center; color: var(--muted); }
.ak-empty .ak-ic { margin-bottom: 0.4rem; }
.ak-empty b { color: var(--text); font-size: 0.98rem; }
.ak-empty p { font-size: 0.82rem; max-width: 26rem; }
.ak-skel { height: 4rem; border-radius: 1rem; background: linear-gradient(90deg, var(--card) 25%, var(--hover) 50%, var(--card) 75%); background-size: 200% 100%; animation: ovShimmer 1.2s infinite; border: 1px solid var(--border); }

.ak-seg { display: inline-flex; padding: 0.2rem; border-radius: 0.8rem; background: var(--hover); gap: 0.15rem; }
.ak-seg button { padding: 0.4rem 0.8rem; border-radius: 0.6rem; font-size: 0.78rem; font-weight: 700; color: var(--muted); border: 0; background: transparent; cursor: pointer; display: inline-flex; align-items: center; gap: 0.4rem; }
.ak-seg button.on { color: #fff; background: var(--brand-strong); }

/* menu aksi "⋯" */
.ak-menu { position: fixed; z-index: 90; min-width: 12.5rem; padding: 0.35rem; border-radius: 0.95rem; border: 1px solid var(--border); background: var(--card-solid); box-shadow: 0 24px 50px -18px rgba(0,0,0,0.6); animation: kddIn 0.14s ease both; }
.ak-menu-i { display: flex; align-items: center; gap: 0.6rem; width: 100%; padding: 0.55rem 0.7rem; border-radius: 0.65rem; border: 0; background: transparent; color: var(--text); font-size: 0.82rem; font-weight: 700; text-align: left; cursor: pointer; }
.ak-menu-i:hover { background: var(--hover); }
.ak-menu-i.danger { color: #fb7185; } .ak-menu-i.danger:hover { background: rgba(244,63,94,0.12); }
.ak-menu-i.warn { color: #f59e0b; }
.ak-menu-i.ok { color: #34d399; }
.ak-menu-sep { height: 1px; margin: 0.3rem 0.2rem; background: var(--border); }
.ak-menu-h { padding: 0.4rem 0.7rem 0.2rem; font-size: 0.64rem; font-weight: 800; letter-spacing: 0.07em; text-transform: uppercase; color: var(--muted); }

/* modal */
.modal-card.ak-modal { max-width: 40rem; padding: 0; overflow: hidden; display: flex; flex-direction: column; max-height: 92vh; }
.modal-card.ak-modal.wide { max-width: 56rem; }
.modal-card.ak-modal.narrow { max-width: 28rem; }
.ak-m-head { display: flex; align-items: flex-start; gap: 0.9rem; padding: 1.15rem 1.35rem 0.95rem; border-bottom: 1px solid var(--border); background: radial-gradient(70% 140% at 0% 0%, var(--brand-tint) 0%, transparent 60%); }
.ak-m-title { font-size: 1.1rem; font-weight: 900; letter-spacing: -0.01em; }
.ak-m-sub { font-size: 0.8rem; color: var(--muted); margin-top: 0.1rem; }
.ak-m-x { margin-left: auto; }
.ak-m-body { padding: 1.1rem 1.35rem; overflow-y: auto; flex: 1; }
.ak-m-foot { display: flex; align-items: center; justify-content: flex-end; gap: 0.6rem; padding: 0.85rem 1.35rem; border-top: 1px solid var(--border); background: var(--card-solid); }
.ak-m-foot .grow { margin-right: auto; }
.ak-grid2 { display: grid; gap: 0.8rem; grid-template-columns: 1fr; }
@media (min-width: 620px) { .ak-grid2 { grid-template-columns: 1fr 1fr; } }
.ak-field > label:not(.ap-sw) { display: block; font-size: 0.78rem; font-weight: 700; margin-bottom: 0.35rem; }
.ak-hint { font-size: 0.72rem; color: var(--muted); margin-top: 0.3rem; }

/* pilihan kartu (radio visual) */
.ak-opts { display: grid; gap: 0.5rem; grid-template-columns: repeat(auto-fit, minmax(8.5rem, 1fr)); }
.ak-opt { position: relative; display: flex; flex-direction: column; gap: 0.15rem; padding: 0.7rem 0.85rem; border-radius: 0.95rem; border: 1px solid var(--border); cursor: pointer; transition: border-color 0.12s, background 0.12s; }
.ak-opt:hover { background: var(--hover); }
.ak-opt input { position: absolute; opacity: 0; pointer-events: none; }
.ak-opt b { font-size: 0.84rem; display: flex; align-items: center; gap: 0.4rem; }
.ak-opt small { font-size: 0.7rem; color: var(--muted); line-height: 1.3; }
.ak-opt.on { border-color: var(--brand-strong); background: var(--brand-tint); }
.ak-opt.on b { color: var(--accent-text); }

/* daftar baris kartu */
.ak-list { display: grid; gap: 0.55rem; }
.ak-row { display: flex; align-items: center; gap: 0.9rem; padding: 0.8rem 1rem; border-radius: 1rem; border: 1px solid var(--border); background: var(--card); transition: border-color 0.15s, transform 0.15s, box-shadow 0.15s; }
.ak-row:hover { border-color: var(--brand-strong); box-shadow: 0 12px 26px -20px var(--brand-ring); }
.ak-row-main { min-width: 0; flex: 1; }
.ak-row-t { font-weight: 800; font-size: 0.92rem; display: flex; align-items: center; gap: 0.45rem; flex-wrap: wrap; }
.ak-row-s { margin-top: 0.15rem; font-size: 0.76rem; color: var(--muted); }
.ak-row-end { display: flex; align-items: center; gap: 0.4rem; flex: none; }
.ak-gridcards { display: grid; gap: 0.85rem; grid-template-columns: repeat(auto-fill, minmax(19rem, 1fr)); }
.ak-more { display: flex; justify-content: center; padding: 0.8rem; }
.ak-tbl-wrap { overflow-x: auto; }
@media (max-width: 640px) { .ak-row { flex-wrap: wrap; } .ak-row-end { width: 100%; justify-content: flex-end; } }
@media (prefers-reduced-motion: reduce) { .ak-page, .ak-menu, .ak-pill.pulse i { animation: none; } }

/* ---- Langganan ---- */
.ak-srow { display: grid; grid-template-columns: minmax(13rem, 1.25fr) minmax(11rem, 1fr) minmax(12rem, 1.1fr) minmax(7rem, 0.8fr) auto; align-items: center; gap: 0.8rem 1.1rem; }
.ak-sub-user { display: flex; align-items: center; gap: 0.7rem; min-width: 0; }
.ak-sub-user .us-name, .ak-sub-user .us-meta { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ak-sub-app { display: flex; align-items: center; gap: 0.6rem; min-width: 0; }
.ak-sub-note { overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
@media (max-width: 1180px) { .ak-row.ak-srow { grid-template-columns: 1fr 1fr; } .ak-srow .ak-row-end { grid-column: 1 / -1; justify-content: flex-end; } .ak-sub-note { grid-column: 1 / -1; } }
@media (max-width: 640px) { .ak-row.ak-srow { grid-template-columns: 1fr; } }
.ak-picked { display: flex; align-items: center; gap: 0.7rem; padding: 0.6rem 0.8rem; border-radius: 0.9rem; border: 1px solid var(--brand-strong); background: var(--brand-tint); }
.ak-picked .min-w-0 { flex: 1; }
.ak-res { display: grid; gap: 0.2rem; margin-top: 0.4rem; max-height: 13rem; overflow-y: auto; }
.ak-res-i { display: flex; align-items: center; gap: 0.7rem; padding: 0.5rem 0.7rem; border-radius: 0.8rem; border: 1px solid transparent; background: transparent; color: inherit; text-align: left; cursor: pointer; }
.ak-res-i:hover { background: var(--hover); border-color: var(--border); }
.ak-res-i b { display: block; font-size: 0.85rem; } .ak-res-i small { display: block; font-size: 0.72rem; color: var(--muted); }

/* ---- Aplikasi ---- */
.ap-card { display: flex; flex-direction: column; gap: 0.7rem; padding: 1rem 1.1rem; transition: transform 0.18s, border-color 0.18s, box-shadow 0.18s; }
.ap-card:hover { transform: translateY(-3px); border-color: var(--brand-strong); box-shadow: 0 18px 34px -22px var(--brand-ring); }
.ap-card.is-off { opacity: 0.62; }
.ap-top { display: flex; align-items: center; gap: 0.8rem; }
.ap-name { font-size: 1rem; font-weight: 800; line-height: 1.2; }
.ap-desc { font-size: 0.8rem; color: var(--muted); line-height: 1.45; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: 2.3em; }
.ap-pills { display: flex; flex-wrap: wrap; gap: 0.35rem; }
.ap-meta { display: flex; align-items: center; gap: 0.4rem; font-size: 0.76rem; color: var(--muted); }
.ap-meta b { color: var(--text); }
.ap-foot { display: flex; align-items: center; gap: 0.4rem; margin-top: auto; padding-top: 0.7rem; border-top: 1px dashed var(--border); }
.ap-sw { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 0.7rem 0.9rem; margin-bottom: 0.5rem; border-radius: 0.95rem; border: 1px solid var(--border); background: var(--card); cursor: pointer; }
.ap-sw b { display: block; font-size: 0.86rem; } .ap-sw small { display: block; font-size: 0.72rem; color: var(--muted); line-height: 1.35; margin-top: 0.1rem; }
.ap-prev { display: flex; align-items: center; gap: 0.8rem; padding: 0.8rem 0.95rem; border-radius: 1rem; border: 1px dashed var(--border); background: var(--card); }
.ap-icons { display: grid; grid-template-columns: repeat(auto-fill, minmax(2.6rem, 1fr)); gap: 0.35rem; }
.ap-icon { display: grid; place-items: center; height: 2.6rem; border-radius: 0.75rem; border: 1px solid var(--border); background: transparent; color: var(--muted); cursor: pointer; transition: all 0.12s; }
.ap-icon:hover { background: var(--hover); color: var(--text); }
.ap-icon.on { background: var(--brand-tint); color: var(--accent-text); border-color: var(--brand-strong); }
.ap-maint { padding: 0.9rem; border-radius: 1rem; border: 1px solid rgba(245,158,11,0.3); background: rgba(245,158,11,0.05); }
.ap-maint .ap-sw { margin-bottom: 0; background: transparent; }
.ap-panel[hidden] { display: none; }
.modal-card.ak-modal.wide .ak-m-body { min-height: 25rem; }

/* ---- Remote Server ---- */
.rx-tabs { display: flex; gap: 0.3rem; padding: 0.3rem; border-radius: 1rem; background: var(--card); border: 1px solid var(--border); overflow-x: auto; scrollbar-width: none; }
.rx-tabs::-webkit-scrollbar { display: none; }
.rx-tab { display: inline-flex; align-items: center; gap: 0.45rem; padding: 0.55rem 0.95rem; border-radius: 0.75rem; border: 0; background: transparent; color: var(--muted); font-size: 0.84rem; font-weight: 700; white-space: nowrap; cursor: pointer; transition: all 0.15s; }
.rx-tab:hover { color: var(--text); background: var(--hover); }
.rx-tab.on { color: #fff; background: linear-gradient(135deg, var(--brand), var(--brand-strong)); box-shadow: 0 6px 16px -8px var(--brand-ring); }
.rx-tab b { font-size: 0.7rem; padding: 0.05rem 0.45rem; border-radius: 9999px; background: var(--hover); }
.rx-tab.on b { background: rgba(255,255,255,0.25); }
.rx-panel[hidden] { display: none; }
.rx-panel { animation: viewIn 0.2s ease both; }
.rx-id { font-family: ui-monospace, monospace; font-size: 0.72rem; padding: 0.1rem 0.5rem; border-radius: 0.5rem; background: var(--hover); color: var(--muted); border: 0; cursor: pointer; }
.rx-id:hover { color: var(--text); }
.rx-ver { display: grid; grid-template-columns: 7rem 1fr 2rem; gap: 0.8rem; align-items: center; padding: 0.35rem 0; font-size: 0.82rem; }
.rx-build { display: flex; align-items: center; gap: 0.9rem; }
.rx-notes { margin-top: 0.8rem; padding: 0.65rem 0.8rem; border-radius: 0.8rem; background: var(--hover); font-size: 0.8rem; line-height: 1.5; color: var(--muted); }
.rx-drop { display: grid; justify-items: center; gap: 0.3rem; padding: 1.5rem 1rem; text-align: center; border-radius: 1.1rem; border: 2px dashed var(--border); cursor: pointer; transition: border-color 0.15s, background 0.15s; }
.rx-drop:hover, .rx-drop.drag, .rx-drop:focus-visible { border-color: var(--brand); background: var(--brand-tint); outline: none; }
.rx-drop.has-file { border-style: solid; border-color: var(--brand-strong); background: var(--brand-tint); }
.rx-drop.is-off { opacity: 0.5; pointer-events: none; }
.rx-drop b { font-size: 0.9rem; overflow-wrap: anywhere; } .rx-drop small { font-size: 0.74rem; color: var(--muted); }
.rx-prog { display: grid; gap: 0.35rem; margin-top: 0.9rem; }
.rx-prog .ak-bar { height: 0.55rem; }
.rx-trio { display: grid; gap: 0.8rem; grid-template-columns: 1fr; }
@media (min-width: 720px) { .rx-trio { grid-template-columns: repeat(3, 1fr); } }
.rx-feat { display: grid; gap: 0.5rem; grid-template-columns: 1fr; }
@media (min-width: 720px) { .rx-feat { grid-template-columns: 1fr 1fr; } }
.rx-feat .ap-sw { margin: 0; }
.rx-ann { display: flex; align-items: center; gap: 0.6rem; margin-top: 0.7rem; padding: 0.65rem 0.9rem; border-radius: 0.9rem; font-size: 0.82rem; font-weight: 600; background: var(--brand-tint); color: var(--accent-text); border: 1px solid var(--brand-strong); }
.rx-ann.is-empty { background: transparent; color: var(--muted); border-style: dashed; border-color: var(--border); font-weight: 500; }
.rx-danger { border-color: rgba(244,63,94,0.3); }
.rx-save { position: sticky; bottom: 0.9rem; z-index: 20; display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-top: 1rem; padding: 0.7rem 0.9rem 0.7rem 1.1rem; border-radius: 1.1rem; border: 1px solid var(--brand-strong); background: var(--card-solid); box-shadow: 0 22px 50px -18px rgba(0,0,0,0.65), 0 0 0 4px var(--brand-tint); font-size: 0.84rem; font-weight: 700; }
.rx-save[hidden] { display: none; }
.rx-save > span { display: inline-flex; align-items: center; gap: 0.5rem; color: #f59e0b; }
.us-pw { position: relative; } .us-pw .input { padding-right: 2.6rem; }
.ak-grid2 > * { min-width: 0; }

/* ---- Artikel ---- */
.ar-row { align-items: center; }
.ar-thumb { flex: none; width: 4.4rem; height: 3.2rem; border-radius: 0.8rem; background-size: cover; background-position: center; border: 1px solid var(--border); }
.ar-thumb.ak-ic { width: 4.4rem; height: 3.2rem; }
.ar-title { font-weight: 800; font-size: 0.93rem; text-align: left; background: none; border: 0; color: inherit; cursor: pointer; padding: 0; }
.ar-title:hover { color: var(--accent-text); text-decoration: underline; }
.ar-tags { display: flex; flex-wrap: wrap; gap: 0.3rem; margin-top: 0.4rem; }
.ar-end { display: grid; justify-items: end; gap: 0.3rem; flex: none; min-width: 5.5rem; }
@media (max-width: 640px) { .ar-thumb { display: none; } .ar-end { justify-items: start; } }

/* ---- Pusat Bantuan (tiket) ---- */
.tk-row { cursor: pointer; }
.tk-row.is-wait { border-color: rgba(245,158,11,0.45); background: linear-gradient(90deg, rgba(245,158,11,0.07), transparent 40%), var(--card); }
.tk-head { display: flex; align-items: center; gap: 0.9rem; }
.tk-title { font-size: 1.2rem; font-weight: 900; letter-spacing: -0.01em; }
.tk-detail-grid { display: grid; grid-template-columns: minmax(0, 1fr) 20rem; gap: 1rem; align-items: start; }
@media (max-width: 960px) { .tk-detail-grid { grid-template-columns: 1fr; } }
.tk-side { display: grid; gap: 1rem; }
.tk-thread { display: flex; flex-direction: column; gap: 1rem; margin-bottom: 1.2rem; max-height: 34rem; overflow-y: auto; padding-right: 0.3rem; }
.tk-msg { display: flex; gap: 0.7rem; max-width: 92%; }
.tk-msg.staff { align-self: flex-end; flex-direction: row-reverse; }
.tk-mb { min-width: 0; display: flex; flex-direction: column; }
.tk-msg.staff .tk-mb { align-items: flex-end; }
.tk-who { font-size: 0.74rem; font-weight: 700; margin: 0 0.2rem 0.3rem; }
.tk-who em { font-style: normal; font-size: 0.62rem; letter-spacing: 0.05em; text-transform: uppercase; padding: 0.08rem 0.4rem; border-radius: 9999px; background: var(--hover); color: var(--muted); margin-left: 0.2rem; }
.tk-who span { color: var(--muted); font-weight: 500; }
.tk-msg.staff .tk-who em { background: var(--brand-tint); color: var(--accent-text); }
.tk-bubble { padding: 0.75rem 0.95rem; border-radius: 1.1rem; font-size: 0.88rem; line-height: 1.55; white-space: pre-wrap; overflow-wrap: anywhere; border: 1px solid var(--border); background: var(--card); }
.tk-msg.reporter .tk-bubble { border-top-left-radius: 0.3rem; }
.tk-msg.staff .tk-bubble { border-top-right-radius: 0.3rem; background: var(--brand-tint); border-color: var(--brand-strong); }
.tk-composer { display: grid; gap: 0.7rem; padding-top: 1rem; border-top: 1px dashed var(--border); }
.tk-quick { display: flex; flex-wrap: wrap; gap: 0.35rem; }
.tk-compfoot { display: flex; align-items: center; justify-content: space-between; gap: 0.6rem; flex-wrap: wrap; }
.tk-closed { padding: 0.8rem 1rem; border-radius: 0.9rem; background: var(--hover); font-size: 0.84rem; color: var(--muted); }
.tk-who2 { display: flex; align-items: center; gap: 0.75rem; margin-bottom: 0.9rem; padding-bottom: 0.9rem; border-bottom: 1px dashed var(--border); }
.tk-kv { display: flex; justify-content: space-between; align-items: baseline; gap: 0.8rem; padding: 0.35rem 0; font-size: 0.82rem; }
.tk-kv span { color: var(--muted); font-weight: 700; font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.04em; flex: none; }
.tk-kv b { font-weight: 600; text-align: right; overflow-wrap: anywhere; }
.an-ring::after{background:var(--card-solid,var(--an-surface)) !important;}

/* ---- Notifikasi ---- */
.nt-grid { display: grid; gap: 1rem; grid-template-columns: minmax(0, 1fr) 21rem; align-items: start; }
@media (max-width: 1100px) { .nt-grid { grid-template-columns: 1fr; } }
.nt-sticky { position: sticky; top: 4.8rem; }
.nt-foot { display: flex; align-items: center; justify-content: flex-end; gap: 0.6rem; flex-wrap: wrap; padding: 0.85rem 1.15rem; border-top: 1px solid var(--border); background: var(--card-solid); }
.nt-links { display: flex; flex-wrap: wrap; gap: 0.3rem; margin-top: 0.45rem; }
.nt-picker { margin-top: 0.7rem; padding: 0.8rem; border-radius: 1rem; border: 1px solid var(--border); background: var(--card-solid); }
.nt-ulist { display: grid; gap: 0.15rem; max-height: 14rem; overflow-y: auto; }
.nt-u { display: flex; align-items: center; gap: 0.6rem; padding: 0.35rem 0.5rem; border-radius: 0.7rem; cursor: pointer; border: 1px solid transparent; }
.nt-u:hover { background: var(--hover); }
.nt-u.on { background: var(--brand-tint); border-color: var(--brand-strong); }
.nt-u input { accent-color: var(--brand); }
.nt-u b { display: block; font-size: 0.82rem; } .nt-u small { display: block; font-size: 0.7rem; color: var(--muted); }
.nt-prev { display: grid; gap: 0.7rem; }
.nt-prev-bell { position: relative; display: flex; gap: 0.7rem; padding: 0.8rem 0.9rem; border-radius: 1rem; border: 1px solid var(--border); background: var(--card-solid); box-shadow: 0 14px 30px -20px rgba(0,0,0,0.6); }
.nt-prev-bell b { display: block; font-size: 0.86rem; overflow-wrap: anywhere; }
.nt-prev-bell p { margin-top: 0.15rem; font-size: 0.78rem; color: var(--muted); line-height: 1.4; overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
.nt-dot { position: absolute; right: 0.8rem; top: 0.8rem; width: 0.5rem; height: 0.5rem; border-radius: 50%; background: var(--brand); }
.nt-prev-mail { display: flex; gap: 0.6rem; align-items: center; padding: 0.7rem 0.9rem; border-radius: 1rem; border: 1px dashed var(--border); font-size: 0.78rem; color: var(--muted); }
.nt-prev-mail b { display: block; color: var(--text); font-size: 0.8rem; }
.ak-opts .ak-opt[data-type] { align-items: flex-start; }

/* ---- Tugas (kanban) ---- */
.ts-board { display: grid; gap: 0.9rem; grid-template-columns: 1fr; align-items: start; }
@media (min-width: 900px) { .ts-board { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.ts-col { border-radius: 1.2rem; border: 1px solid var(--border); background: var(--card); padding: 0.7rem; min-height: 14rem; transition: border-color 0.15s, background 0.15s; }
.ts-col.over { border-color: var(--brand); background: var(--brand-tint); }
.ts-col-h { display: flex; align-items: center; gap: 0.6rem; padding: 0.2rem 0.3rem 0.7rem; }
.ts-col-h > div { flex: 1; min-width: 0; } .ts-col-h b { display: block; font-size: 0.9rem; } .ts-col-h small { display: block; font-size: 0.68rem; color: var(--muted); }
.ts-n { font-size: 0.72rem; font-weight: 800; padding: 0.1rem 0.55rem; border-radius: 9999px; background: var(--hover); color: var(--muted); }
.ts-drop { display: grid; gap: 0.55rem; }
.ts-empty { padding: 1.6rem 0.5rem; text-align: center; font-size: 0.78rem; color: var(--muted); border: 1.5px dashed var(--border); border-radius: 0.9rem; }
.ts-card { position: relative; display: grid; gap: 0.5rem; padding: 0.75rem 0.85rem 0.7rem 1rem; border-radius: 0.95rem; border: 1px solid var(--border); background: var(--card-solid); cursor: grab; transition: transform 0.15s, box-shadow 0.15s, opacity 0.15s; overflow: hidden; }
.ts-card::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: #94a3b8; }
.ts-card.prio-high::before { background: #f43f5e; } .ts-card.prio-medium::before { background: #f59e0b; } .ts-card.prio-low::before { background: #94a3b8; }
.ts-card:hover { transform: translateY(-2px); box-shadow: 0 14px 26px -18px rgba(0,0,0,0.6); }
.ts-card.dragging { opacity: 0.4; cursor: grabbing; }
.ts-card.is-done .ts-title { text-decoration: line-through; opacity: 0.6; }
.ts-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 0.5rem; }
.ts-title { font-size: 0.88rem; line-height: 1.3; overflow-wrap: anywhere; }
.ts-desc { font-size: 0.76rem; color: var(--muted); line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.ts-meta { display: flex; align-items: center; gap: 0.35rem; flex-wrap: wrap; }
.ts-move { display: flex; justify-content: space-between; gap: 0.3rem; }
@media (min-width: 900px) { .ts-move { display: none; } }
.ts-top .adm-act { height: 1.7rem; width: 1.7rem; flex: none; }

/* ---- Log aktivitas ---- */
.lg-day { padding-top: 0.6rem; }
.lg-day-h { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; padding: 0.5rem 0.2rem 0.3rem; }
.lg-day-h b { font-size: 0.8rem; letter-spacing: 0.01em; } .lg-day-h span { font-size: 0.7rem; color: var(--muted); }
.lg-item { display: flex; align-items: center; gap: 0.8rem; padding: 0.55rem 0.4rem; border-bottom: 1px dashed var(--border); border-radius: 0.6rem; }
.lg-item:last-child { border-bottom: 0; }
.lg-item:hover { background: var(--hover); }
.lg-main { flex: 1; min-width: 0; }
.lg-line { font-size: 0.86rem; line-height: 1.35; overflow-wrap: anywhere; }
.lg-actor { font-weight: 800; background: none; border: 0; color: inherit; cursor: pointer; padding: 0; }
.lg-actor:hover { color: var(--accent-text); text-decoration: underline; }
.lg-detail { margin-top: 0.15rem; font-size: 0.76rem; color: var(--muted); overflow-wrap: anywhere; }
.lg-end { display: flex; align-items: center; gap: 0.6rem; flex: none; }
.lg-live { display: inline-flex; align-items: center; gap: 0.45rem; font-size: 0.78rem; font-weight: 700; color: var(--muted); cursor: pointer; }
@media (max-width: 640px) { .lg-end { flex-direction: column; align-items: flex-end; gap: 0.2rem; } }

/* ---- Anti-Spam ---- */
.sp-chart { display: flex; align-items: flex-end; gap: 0.25rem; height: 6.5rem; padding-top: 0.4rem; }
.sp-col { flex: 1; height: 100%; display: flex; align-items: flex-end; border-radius: 0.3rem; }
.sp-col i { display: block; width: 100%; border-radius: 0.3rem 0.3rem 0.1rem 0.1rem; background: var(--hover); transition: height 0.5s cubic-bezier(0.2, 0.8, 0.2, 1); }
.sp-col i.has { background: linear-gradient(180deg, #f59e0b, #f43f5e); }
.sp-col:hover i { filter: brightness(1.2); }
.sp-axis { display: flex; justify-content: space-between; margin-top: 0.4rem; font-size: 0.68rem; color: var(--muted); }
#sp-tabs b { font-size: 0.68rem; padding: 0.02rem 0.4rem; border-radius: 9999px; background: rgba(127,127,127,0.2); margin-left: 0.2rem; }

/* ---- Pengaturan ---- */
.st-layout { display: grid; gap: 1rem; grid-template-columns: 12.5rem minmax(0, 1fr); align-items: start; }
@media (max-width: 960px) { .st-layout { grid-template-columns: 1fr; } }
.st-nav { position: sticky; top: 4.8rem; display: grid; gap: 0.15rem; padding: 0.4rem; border-radius: 1rem; border: 1px solid var(--border); background: var(--card); }
@media (max-width: 960px) { .st-nav { position: static; display: flex; overflow-x: auto; scrollbar-width: none; } }
.st-nav a { display: flex; align-items: center; gap: 0.55rem; padding: 0.55rem 0.75rem; border-radius: 0.7rem; font-size: 0.82rem; font-weight: 700; color: var(--muted); white-space: nowrap; transition: all 0.12s; }
.st-nav a:hover { color: var(--text); background: var(--hover); }
.st-nav a.on { color: var(--accent-text); background: var(--brand-tint); }
.st-main { display: grid; gap: 1rem; min-width: 0; }
.st-main > section { scroll-margin-top: 4.8rem; }
.st-modes .ak-opt { cursor: pointer; text-align: left; }
.st-modes .ak-opt.t-m-amber.on { border-color: #f59e0b; background: rgba(245,158,11,0.1); } .st-modes .ak-opt.t-m-amber.on b { color: #f59e0b; }
.st-modes .ak-opt.t-m-red.on { border-color: #f43f5e; background: rgba(244,63,94,0.1); } .st-modes .ak-opt.t-m-red.on b { color: #fb7185; }
.st-modes .ak-opt.t-m-green.on { border-color: #10b981; background: rgba(16,185,129,0.1); } .st-modes .ak-opt.t-m-green.on b { color: #34d399; }
.st-prev { display: grid; gap: 0.2rem; padding: 0.7rem 0.9rem; border-radius: 0.9rem; border: 1px dashed var(--border); font-size: 0.8rem; min-height: 3.3rem; }
.st-prev b { display: flex; align-items: center; gap: 0.4rem; } .st-prev span { color: var(--muted); }
.st-prev.t-m-amber { border-color: rgba(245,158,11,0.5); background: rgba(245,158,11,0.07); } .st-prev.t-m-red { border-color: rgba(244,63,94,0.5); background: rgba(244,63,94,0.07); }
.st-sec-row { display: flex; align-items: center; gap: 0.7rem; flex-wrap: wrap; padding: 0.55rem 0.8rem; border-radius: 0.9rem; border: 1px solid var(--border); background: var(--card-solid); }
.st-sec-st { display: inline-flex; align-items: center; gap: 0.35rem; font-size: 0.78rem; font-weight: 700; color: var(--muted); }
.st-sec-st.ok { color: #34d399; }
.st-sec-mask { color: var(--muted); letter-spacing: 0.1em; }
.st-secret textarea { margin-top: 0.5rem; }
.st-secret { margin-bottom: 0.4rem; }
.st-mailrow { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.st-quota { flex: 1; min-width: 14rem; display: grid; gap: 0.35rem; }

/* ---- Responsif umum ---- */
@media (max-width: 640px) {
  .ak-search { max-width: none; flex: 1 1 100%; }
  .ak-toolbar > .kdd { flex: 1 1 42%; }
  .ak-toolbar > .btn, .ak-toolbar > .btn-ghost { flex: 1 1 auto; justify-content: center; }
  .ak-toolbar .ak-spacer { display: none; }
  .ak-stat { padding: 0.6rem 0.7rem; gap: 0.55rem; }
  .ak-stat-val { font-size: 1.15rem; }
  .modal-card.ak-modal { max-height: 94vh; }
  .ak-m-head, .ak-m-body { padding-left: 1rem; padding-right: 1rem; }
}