:root {
  --bg: #f4f2ee; --panel: #fffdf9; --ink: #1d1f1c; --muted: #6d7069; --line: #e3dfd6;
  --brand: #0f6b4f; --brand-ink: #fff; --brand-soft: #e3f1ea; --admin: #e6eefb; --ai: #dcf3e6;
  --danger: #b23a2b; --warn: #fff4d6; --warn-ink: #7a5a00; --top: #17201c;
  --l-baru: #8a8f86; --l-retail: #2f6fb3; --l-custom: #9a5bc4; --l-deal: #0f8a4f; --l-spam: #b23a2b; --l-perlu_admin: #c27c0e;
  --radius: 10px; font-synthesis: none;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) { color-scheme: dark; --bg: #121614; --panel: #1a201d; --ink: #e8ebe6; --muted: #98a096; --line: #2b332f; --brand-soft: #1d3a2e;
    --admin: #1f2b3d; --ai: #1c3529; --warn: #3a3018; --warn-ink: #f0d58a; --top: #0c100e; }
}
:root[data-theme="dark"] { color-scheme: dark; --bg: #121614; --panel: #1a201d; --ink: #e8ebe6; --muted: #98a096; --line: #2b332f; --brand-soft: #1d3a2e;
  --admin: #1f2b3d; --ai: #1c3529; --warn: #3a3018; --warn-ink: #f0d58a; --top: #0c100e; }
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body { font: 14px/1.45 "Inter", system-ui, -apple-system, "Segoe UI", sans-serif; background: var(--bg); color: var(--ink); display: flex; flex-direction: column; }
h1, h2, h3 { margin: 0 0 .6em; letter-spacing: -.01em; }
h2 { font-size: 20px; } h3 { font-size: 13px; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }
input, select, textarea { font: inherit; color: inherit; background: var(--panel); border: 1px solid var(--line); border-radius: 8px; padding: 7px 9px; width: 100%; }
textarea { resize: vertical; } .mono { font-family: ui-monospace, Menlo, monospace; font-size: 12px; }
label { display: flex; flex-direction: column; gap: 4px; font-size: 12px; color: var(--muted); flex: 1; }
label.check { flex-direction: row; align-items: center; gap: 8px; color: var(--ink); font-size: 13px; }
label.check input { width: auto; }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 7px 13px; border-radius: 8px; border: 1px solid var(--line); background: var(--panel); color: var(--ink); cursor: pointer; font: inherit; font-weight: 500; white-space: nowrap; }
.btn:hover { border-color: var(--brand); } .btn.primary { background: var(--brand); color: var(--brand-ink); border-color: var(--brand); }
.btn.danger { color: var(--danger); } .btn.ghost { background: transparent; } .btn.sm { padding: 4px 10px; font-size: 12px; }
.btn[disabled] { opacity: .5; cursor: wait; }
.link { background: none; border: 0; color: var(--brand); cursor: pointer; padding: 0; font: inherit; text-decoration: underline; }
.muted { color: var(--muted); } .sm { font-size: 12px; } .r { text-align: right; } .mt { margin-top: 18px; }
.row { display: flex; align-items: flex-end; } .row.gap { gap: 10px; } .between { justify-content: space-between; align-items: center; gap: 10px; } .wrap { flex-wrap: wrap; }
.stack { display: flex; flex-direction: column; gap: 10px; }

/* Header */
.top { display: flex; align-items: center; gap: 14px; padding: 8px 16px; background: var(--top); color: #e8ebe6; flex-wrap: wrap; }
.top select { width: auto; min-width: 180px; background: #232c27; border-color: #33403a; color: #fff; }
.brand { font-weight: 700; display: flex; align-items: center; gap: 8px; }
.brand-mark { display: inline-grid; place-items: center; width: 44px; height: 44px; border-radius: 12px; background: var(--brand); color: #fff; font-size: 22px; }
.brand-mark.sm { width: 26px; height: 26px; font-size: 13px; border-radius: 7px; }
nav { display: flex; gap: 2px; margin-left: auto; flex-wrap: wrap; }
nav button { background: none; border: 0; color: #b7c0b9; padding: 7px 11px; border-radius: 7px; cursor: pointer; font: inherit; }
nav button.active, nav button:hover { background: #26302b; color: #fff; }
.top .btn.ghost { color: #b7c0b9; border-color: #33403a; }
.pill { font-size: 12px; padding: 3px 10px; border-radius: 99px; background: #2a332e; color: #c9d1cb; }
.pill.connected { background: #164d35; color: #b8f0d3; } .pill.qr, .pill.connecting, .pill.reconnecting { background: #4d3d12; color: #f6dc93; }
.pill.logged_out, .pill.disconnected { background: #4a2420; color: #f3b9b0; }
.banner { background: var(--warn); color: var(--warn-ink); padding: 8px 16px; font-size: 13px; }

main { flex: 1; min-height: 0; display: flex; }
.view { flex: 1; min-height: 0; } .view.pad { padding: 20px 24px; overflow: auto; }

/* Inbox */
.inbox { display: grid; grid-template-columns: 320px 1fr 290px; }
.list-pane, .info-pane { border-right: 1px solid var(--line); background: var(--panel); display: flex; flex-direction: column; min-height: 0; }
.info-pane { border-right: 0; border-left: 1px solid var(--line); padding: 14px; gap: 10px; overflow: auto; }
.search { margin: 10px; width: calc(100% - 20px); }
.view.pad .search { margin: 0; width: 220px; }
.chips { display: flex; flex-wrap: wrap; gap: 5px; padding: 0 10px 8px; }
.chip { border: 1px solid var(--line); background: transparent; color: var(--ink); border-radius: 99px; padding: 3px 9px; font-size: 12px; cursor: pointer; display: inline-flex; gap: 5px; align-items: center; }
.chip.active { background: var(--ink); color: var(--panel); border-color: var(--ink); }
.dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; }
.contact-list { list-style: none; margin: 0; padding: 0; overflow: auto; flex: 1; }
.contact-list li { padding: 10px 12px; border-top: 1px solid var(--line); cursor: pointer; display: grid; grid-template-columns: 1fr auto; gap: 2px 8px; }
.contact-list li:hover { background: var(--bg); } .contact-list li.active { background: var(--brand-soft); }
.contact-list .nm { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.contact-list .pv { color: var(--muted); font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.contact-list .tm { font-size: 11px; color: var(--muted); text-align: right; }
.badge { font-size: 10px; font-weight: 600; padding: 1px 7px; border-radius: 99px; color: #fff; text-transform: uppercase; letter-spacing: .03em; justify-self: end; }
.unread { background: var(--brand); color: #fff; border-radius: 99px; font-size: 11px; padding: 0 6px; margin-left: 4px; }
.flag { color: var(--l-perlu_admin); font-size: 11px; font-weight: 600; }

.chat-pane { display: flex; flex-direction: column; min-height: 0; min-width: 0; }
.chat-pane > div { display: flex; flex-direction: column; min-height: 0; flex: 1; }
.empty { display: grid; place-items: center; color: var(--muted); }
.chat-head { display: flex; justify-content: space-between; align-items: center; padding: 10px 16px; border-bottom: 1px solid var(--line); background: var(--panel); gap: 10px; }
.back { display: none; } .grow { flex: 1; min-width: 0; }
.chat-actions { display: flex; gap: 10px; align-items: center; } .chat-actions select { width: auto; }
.needs { background: var(--warn); color: var(--warn-ink); padding: 7px 16px; font-size: 13px; display: flex !important; flex-direction: row !important; justify-content: space-between; align-items: center; flex: none !important; }
.messages { flex: 1; overflow: auto; padding: 16px; display: flex; flex-direction: column; gap: 6px; }
.msg { max-width: 72%; padding: 7px 11px; border-radius: 12px; white-space: pre-wrap; word-wrap: break-word; box-shadow: 0 1px 0 rgba(0,0,0,.05); background: var(--panel); align-self: flex-start; }
.msg.out { align-self: flex-end; background: var(--ai); } .msg.admin { background: var(--admin); }
.msg.system { align-self: center; background: transparent; box-shadow: none; color: var(--muted); font-size: 12px; font-style: italic; }
.msg .meta { font-size: 10.5px; color: var(--muted); margin-top: 3px; text-align: right; }
.msg img { max-width: 240px; border-radius: 8px; display: block; margin-bottom: 4px; }
.composer { display: flex; gap: 8px; padding: 10px 12px; border-top: 1px solid var(--line); background: var(--panel); align-items: flex-end; flex: none; }
.composer textarea { max-height: 140px; }
.switch { flex-direction: row; align-items: center; gap: 6px; color: var(--ink); font-size: 13px; cursor: pointer; flex: none; }
.switch input { display: none; }
.switch span { width: 34px; height: 20px; border-radius: 99px; background: var(--line); position: relative; transition: .15s; }
.switch span::after { content: ""; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%; background: #fff; transition: .15s; }
.switch input:checked + span { background: var(--brand); } .switch input:checked + span::after { left: 16px; }
.doc-mini { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 6px; }
.doc-mini li { border: 1px solid var(--line); border-radius: 8px; padding: 6px 9px; cursor: pointer; font-size: 12px; display: flex; justify-content: space-between; gap: 6px; }
.doc-mini li:hover { border-color: var(--brand); }

/* Tables & panels */
.tbl { width: 100%; border-collapse: collapse; background: var(--panel); border-radius: var(--radius); overflow: hidden; margin-top: 12px; font-variant-numeric: tabular-nums; }
.tbl th, .tbl td { padding: 8px 10px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
.tbl th { font-size: 11px; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); font-weight: 600; }
.tbl tbody tr:hover { background: var(--bg); cursor: pointer; }
.tbl.items td { padding: 4px; } .tbl.items input { padding: 5px 7px; } .tbl.items tbody tr:hover { cursor: default; }
.status { font-size: 11px; padding: 2px 8px; border-radius: 99px; background: var(--bg); border: 1px solid var(--line); }
.status.paid, .status.accepted { background: var(--brand-soft); border-color: transparent; } .status.draft { background: var(--warn); color: var(--warn-ink); border-color: transparent; }
.panel { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 16px; }
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 14px; align-items: start; }
.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px; }
.card { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 14px; }
.card .v { font-size: 26px; font-weight: 700; font-variant-numeric: tabular-nums; } .card .k { color: var(--muted); font-size: 12px; }
.bar { display: grid; grid-template-columns: 90px 1fr 40px; gap: 8px; align-items: center; margin: 6px 0; font-size: 13px; }
.bar i { height: 10px; border-radius: 99px; display: block; }
.daily { display: flex; align-items: flex-end; gap: 4px; height: 140px; }
.daily div { flex: 1; background: var(--brand); border-radius: 4px 4px 0 0; min-height: 2px; position: relative; }
.daily div span { position: absolute; bottom: -18px; left: 50%; transform: translateX(-50%); font-size: 10px; color: var(--muted); }
.qr-box { display: grid; place-items: center; min-height: 120px; margin: 10px 0; border: 1px dashed var(--line); border-radius: var(--radius); padding: 10px; color: var(--muted); }
.qr-box img { width: 260px; height: 260px; background: #fff; padding: 8px; border-radius: 8px; }
.calc { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.pre { background: var(--bg); border-radius: 8px; padding: 10px; font-size: 12px; white-space: pre-wrap; max-height: 260px; overflow: auto; }

.modal { border: 0; border-radius: 14px; padding: 18px; width: min(920px, 96vw); background: var(--panel); color: var(--ink); box-shadow: 0 20px 60px rgba(0,0,0,.3); }
.modal.sm { width: min(520px, 96vw); } .modal::backdrop { background: rgba(10,15,12,.45); }
.modal form { display: flex; flex-direction: column; gap: 10px; }
.toast { position: fixed; bottom: 18px; left: 50%; transform: translateX(-50%) translateY(80px); background: var(--top); color: #fff; padding: 9px 16px; border-radius: 9px; transition: .25s; z-index: 50; max-width: 90vw; }
.toast.show { transform: translateX(-50%) translateY(0); }

/* Login */
.login-body { display: grid; place-items: center; }
.login-card { background: var(--panel); border: 1px solid var(--line); padding: 32px; border-radius: 16px; width: min(360px, 92vw); display: flex; flex-direction: column; gap: 12px; }
.login-card h1 { margin: 6px 0 0; } .err { color: var(--danger); min-height: 1em; margin: 0; }

@media (max-width: 1100px) { .inbox { grid-template-columns: 280px 1fr; } .info-pane { display: none !important; } }
@media (max-width: 760px) {
  .inbox { grid-template-columns: 1fr; } .back { display: inline-flex; } .inbox.chat-open .list-pane { display: none; } .inbox:not(.chat-open) .chat-pane { display: none; }
  .grid2 { grid-template-columns: 1fr; } .msg { max-width: 88%; } .view.pad { padding: 14px; } nav { margin-left: 0; }
}

/* hidden selalu menang */
[hidden] { display: none !important; }
.pre:empty { display: none; }
@media (max-width: 760px) { .top { gap: 8px; } .top nav { order: 5; width: 100%; flex-wrap: nowrap; overflow-x: auto; } .top nav button { flex: none; } }

/* Pengetahuan AI */
.knowledge { display: grid; grid-template-columns: 300px minmax(0, 1fr) 360px; }
.k-list { border-right: 1px solid var(--line); background: var(--panel); display: flex; flex-direction: column; min-height: 0; }
.k-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; padding: 16px 14px 4px; }
.k-head h2 { margin-bottom: 2px; font-size: 18px; } .k-head p { margin: 0; }
.k-meter { padding: 0 14px 8px; }
.k-meter.warn { color: var(--warn-ink); }
.k-rows { list-style: none; margin: 0; padding: 0; overflow: auto; flex: 1; }
.k-rows li { padding: 9px 14px; border-top: 1px solid var(--line); cursor: pointer; display: grid; gap: 2px; }
.k-rows li:hover { background: var(--bg); } .k-rows li.active { background: var(--brand-soft); }
.k-rows li.off { opacity: .55; }
.k-rows .kt { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.k-rows .kc { font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: .05em; }
.k-rows .kp { font-size: 12px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.k-templates { border-top: 1px solid var(--line); padding: 0; }
.k-templates summary { list-style: none; display: flex; align-items: center; gap: 8px; padding: 12px 14px; cursor: pointer; font-size: 13px; font-weight: 600; user-select: none; }
.k-templates summary::-webkit-details-marker { display: none; }
.k-templates summary:hover { background: var(--bg); }
.k-templates summary small { font-weight: 400; font-size: 12px; margin-left: auto; }
.k-chev { flex: none; color: var(--muted); transition: transform .15s; transform: rotate(180deg); }
.k-templates[open] .k-chev { transform: rotate(0deg); }
.k-templates #kTemplates { padding: 0 14px 14px; }
.k-templates .chips { padding: 0; }
.k-editor { padding: 18px 22px; overflow: auto; min-width: 0; display: flex; flex-direction: column; }
.k-editor .empty { flex: 1; }
.k-editor form { flex: 1; }
.grow-label { flex: 1; }
.k-content { min-height: 340px; flex: 1; font-size: 14px; line-height: 1.55; }
.k-test { border-left: 1px solid var(--line); background: var(--panel); display: flex; flex-direction: column; min-height: 0; padding: 14px 14px 0; gap: 6px; }
.k-test h3 { margin: 0; } .k-test p { margin: 0; }
.t-log { flex: 1; overflow: auto; display: flex; flex-direction: column; gap: 6px; padding: 8px 0; }
.t-log .msg { max-width: 92%; }
.t-steps { font-size: 11px; color: var(--muted); align-self: flex-end; max-width: 92%; }
.t-steps summary { cursor: pointer; }
.t-steps pre { white-space: pre-wrap; font-size: 11px; background: var(--bg); padding: 6px; border-radius: 6px; max-height: 200px; overflow: auto; }
.t-composer { margin: 0 -14px; }
.t-badge { font-size: 11px; align-self: flex-end; color: var(--muted); }
@media (max-width: 1200px) { .knowledge { grid-template-columns: 260px minmax(0, 1fr); } .k-test { grid-column: 1 / -1; border-left: 0; border-top: 1px solid var(--line); min-height: 360px; } }
@media (max-width: 760px) { .knowledge { grid-template-columns: 1fr; overflow: auto; } .k-list { max-height: 45vh; } }

/* Akun, tim & admin */
.grid2.first { margin-top: 0; margin-bottom: 18px; }
.acc-info { display: flex; flex-wrap: wrap; gap: 6px 18px; font-size: 14px; }
.acc-info b { font-size: 16px; }
.meter { height: 8px; background: var(--line); border-radius: 99px; overflow: hidden; margin: 10px 0 4px; }
.meter i { display: block; height: 100%; background: var(--brand); border-radius: 99px; width: 0; }
.meter i.full { background: var(--danger); }
.team-rows { list-style: none; padding: 0; margin: 0 0 10px; display: flex; flex-direction: column; gap: 6px; }
.team-rows li { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 7px 10px; border: 1px solid var(--line); border-radius: 8px; font-size: 13px; }
.banner.imp { background: var(--top); color: #fff; display: flex; gap: 12px; align-items: center; justify-content: space-between; }
.banner a { color: inherit; font-weight: 600; }
.tbl-wrap { overflow-x: auto; }
.tbl-wrap .tbl { min-width: 760px; }
.plan-editor { display: flex; flex-direction: column; gap: 10px; margin: 10px 0; }
.plan-card { border: 1px solid var(--line); border-radius: 10px; padding: 10px; display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 8px; }
.plan-card .wide { grid-column: 1 / -1; }
.plan-card label.check { align-self: end; }
.pill-s { font-size: 11px; padding: 2px 8px; border-radius: 99px; background: var(--brand-soft); }
.pill-s.bad { background: var(--warn); color: var(--warn-ink); }

/* Pengaturan bisnis — tata letak lebar */
.biz-layout { display: grid; grid-template-columns: 1fr; gap: 16px; margin-top: 14px; align-items: start; }
.biz-side { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.biz-form { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.sec { scroll-margin-top: 16px; }
.sec-head { margin-bottom: 12px; } .sec-head h3 { margin: 0 0 2px; } .sec-head p { margin: 0; }
.sec-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 16px; align-items: start; }
.sec-grid.four { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.sec-grid .full { grid-column: 1 / -1; }
.sec-grid .checks { display: flex; flex-direction: column; gap: 8px; }
.sec-nav { display: none; flex-direction: column; gap: 2px; }
.sec-nav a { padding: 7px 10px; border-radius: 8px; color: var(--ink); text-decoration: none; font-size: 14px; }
.sec-nav a:hover { background: var(--bg, rgba(0,0,0,.04)); }
.sec-nav .muted { padding: 0 10px 4px; }
.save-bar { position: sticky; bottom: 0; z-index: 2; display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 12px 16px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel); box-shadow: 0 -6px 18px rgba(0,0,0,.06); }
@media (min-width: 1100px) {
  .biz-layout { grid-template-columns: minmax(320px, 380px) minmax(0, 1fr); }
  .biz-side { position: sticky; top: 0; }
  .sec-nav { display: flex; }
}
@media (max-width: 900px) { .sec-grid.four { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .sec-grid, .sec-grid.four { grid-template-columns: 1fr; } }
/* Pengetahuan AI — tautan ke profil */
.k-profile { display: flex; align-items: center; gap: 10px; margin: 10px 10px 2px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--bg, transparent); color: var(--ink); text-decoration: none; }
.k-profile:hover { border-color: var(--accent, #0E6B4C); }
.k-profile span:nth-child(2) { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.k-profile b { font-size: 14px; } .k-profile small { color: var(--muted); font-size: 12px; line-height: 1.35; }
.k-profile-ic { width: 32px; height: 32px; flex: none; display: grid; place-items: center; border-radius: 8px; background: var(--accent-soft, #DDEFE6); color: var(--accent, #0E6B4C); }
.k-empty-in { max-width: 420px; text-align: center; } .k-empty-in p { margin: 0 0 8px; }

/* Menu mobile: tumpuk vertikal */
.menu-btn, .page-title { display: none; }
@media (max-width: 760px) {
  .top { gap: 8px; padding: 10px 14px; }
  .top .brand { order: 1; }
  .top .page-title { order: 1; display: block; flex: 1 1 auto; min-width: 0; padding-left: 10px; margin-left: 2px; border-left: 1px solid #3a4741; color: #fff; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .top .menu-btn { order: 2; display: inline-grid; place-items: center; width: 44px; height: 44px; padding: 0; border-radius: 12px; border: 1px solid #33403a; background: #232c27; color: #fff; cursor: pointer; }
  .top.menu-open .menu-btn { background: #2f3b35; border-color: #3fb68b; }
  .menu-btn .mi-close { display: none; }
  .top.menu-open .menu-btn .mi-open { display: none; } .top.menu-open .menu-btn .mi-close { display: inline; }
  .top .brand { flex: none; }
  .top #bizSel { order: 3; flex: 1 1 55%; min-width: 0; }
  .top #waPill { order: 4; }
  .top nav { order: 5; width: 100%; display: none; flex-direction: column; gap: 4px; margin: 4px 0 0; padding-top: 8px; border-top: 1px solid #2c3832; overflow: visible; }
  .top.menu-open nav { display: flex; }
  .top nav button { width: 100%; text-align: left; padding: 12px 14px; font-size: 16px; border-radius: 10px; }
  .top nav button.active { background: #2f3b35; color: #fff; box-shadow: inset 3px 0 0 #3fb68b; }
  .top #logoutBtn { order: 6; width: 100%; display: none; min-height: 44px; margin-bottom: 4px; }
  .top.menu-open #logoutBtn { display: block; }
}
@media (max-width: 760px) {
  .knowledge .k-list { max-height: none; border-right: 0; border-bottom: 1px solid var(--line); }
  .knowledge .k-rows { max-height: 40vh; overflow: auto; }
  .knowledge .k-editor { padding: 14px; }
  .knowledge .k-editor:has(#kForm[hidden]) { display: none; }
  .knowledge .k-test { min-height: 420px; }
}
@media (max-width: 760px) {
  .knowledge:not([hidden]) { display: flex; flex-direction: column; overflow: auto; }
  .knowledge > * { flex: none; }
  .knowledge .k-list { overflow: visible; }
}

@media (max-width: 760px) {
  /* Inbox: filter label satu baris yang bisa digeser */
  #labelChips { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; padding-bottom: 10px; -webkit-overflow-scrolling: touch; }
  #labelChips::-webkit-scrollbar { display: none; }
  #labelChips .chip { flex: none; padding: 6px 12px; font-size: 13px; }
  .top.menu-open nav { animation: navIn .16s ease-out; }
}
@keyframes navIn { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
@media (max-width: 760px) { .inbox > * { min-width: 0; } .list-pane { border-right: 0; } }

.lbl-help { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.help-link { font-size: 12px; font-weight: 600; color: var(--brand, #0E6B4C); white-space: nowrap; }
.help-box { margin-top: 4px; padding: 14px 16px; border-radius: 10px; border: 1px solid var(--line); background: var(--bg, #f6f7f2); font-size: 13px; color: var(--ink); }
.help-box ol { margin: 8px 0; padding-left: 20px; display: flex; flex-direction: column; gap: 6px; line-height: 1.5; }
.help-box p { margin: 0; }

.sec-grid.three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 900px) { .sec-grid.three { grid-template-columns: 1fr; } }
.mp-head { display: flex; align-items: center; gap: 8px; margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--line); }
.mp-head .muted { margin-left: 2px; }
.mp-logo { width: 24px; height: 24px; border-radius: 6px; display: inline-grid; place-items: center; color: #fff; font-weight: 800; font-size: 13px; }
.mp-logo.shopee { background: #EE4D2D; } .mp-logo.tiktok { background: #111; }
.mp-actions { align-items: center; }
.mp-logo.accurate { background: #1F5FA8; }

/* ---------- Kartu berwarna lembut ---------- */
:root {
  --t-green: #eef7f1; --t-green-b: #cfe6d8; --t-green-i: #0f6b4f;
  --t-blue: #eef3fb; --t-blue-b: #cfdcf0; --t-blue-i: #2459a8;
  --t-amber: #fdf6e8; --t-amber-b: #f0dfb8; --t-amber-i: #9a6a08;
  --t-violet: #f4f0fb; --t-violet-b: #ddd2f0; --t-violet-i: #6a4bb5;
  --t-slate: #f2f4f6; --t-slate-b: #dde2e7; --t-slate-i: #4a5866;
}
:root[data-theme="dark"] {
  --t-green: #15241d; --t-green-b: #24402f; --t-green-i: #7fd1a8;
  --t-blue: #151d2a; --t-blue-b: #263652; --t-blue-i: #8fb3ea;
  --t-amber: #241f12; --t-amber-b: #44391c; --t-amber-i: #e7c46e;
  --t-violet: #1d1828; --t-violet-b: #362b4d; --t-violet-i: #bba6ee;
  --t-slate: #1a1e22; --t-slate-b: #2c3238; --t-slate-i: #a9b5c0;
}
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) {
  --t-green: #15241d; --t-green-b: #24402f; --t-green-i: #7fd1a8;
  --t-blue: #151d2a; --t-blue-b: #263652; --t-blue-i: #8fb3ea;
  --t-amber: #241f12; --t-amber-b: #44391c; --t-amber-i: #e7c46e;
  --t-violet: #1d1828; --t-violet-b: #362b4d; --t-violet-i: #bba6ee;
  --t-slate: #1a1e22; --t-slate-b: #2c3238; --t-slate-i: #a9b5c0;
} }
.tint-green { --tb: var(--t-green); --tl: var(--t-green-b); --ti: var(--t-green-i); }
.tint-blue { --tb: var(--t-blue); --tl: var(--t-blue-b); --ti: var(--t-blue-i); }
.tint-amber { --tb: var(--t-amber); --tl: var(--t-amber-b); --ti: var(--t-amber-i); }
.tint-violet { --tb: var(--t-violet); --tl: var(--t-violet-b); --ti: var(--t-violet-i); }
.tint-slate { --tb: var(--t-slate); --tl: var(--t-slate-b); --ti: var(--t-slate-i); }
.panel[class*="tint-"] { background: var(--tb); border-color: var(--tl); }
.panel[class*="tint-"] > h3, .panel[class*="tint-"] .sec-head h3 { color: var(--ti); }
.panel[class*="tint-"] input, .panel[class*="tint-"] select, .panel[class*="tint-"] textarea { background: var(--panel); }
.sec-head { display: flex; align-items: flex-start; gap: 10px; }
.sec-ic { flex: none; width: 34px; height: 34px; border-radius: 9px; display: grid; place-items: center; background: var(--panel); color: var(--ti, var(--brand)); border: 1px solid var(--tl, var(--line)); }
.panel[class*="tint-"] .help-box { background: var(--panel); }
.panel[class*="tint-"] .mp-head { border-top-color: var(--tl); }

/* ---------- Footer tetap ---------- */
.app-foot { flex: none; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 6px 16px; border-top: 1px solid var(--line); background: var(--panel); position: relative; z-index: 5; }
.foot-left { display: flex; align-items: center; gap: 14px; }
.seg { display: inline-flex; padding: 3px; gap: 2px; border-radius: 10px; background: var(--bg); border: 1px solid var(--line); }
.seg button { width: 32px; height: 28px; display: grid; place-items: center; border: 0; border-radius: 7px; background: transparent; color: var(--muted); cursor: pointer; }
.seg button[aria-pressed="true"] { background: var(--panel); color: var(--ink); box-shadow: 0 1px 2px rgba(0,0,0,.15); }
.swatches { display: inline-flex; gap: 6px; align-items: center; }
.swatches button { width: 20px; height: 20px; border-radius: 50%; border: 2px solid var(--panel); background: var(--sw); box-shadow: 0 0 0 1px var(--line); cursor: pointer; padding: 0; }
.swatches button[aria-pressed="true"] { box-shadow: 0 0 0 2px var(--sw); }
.fb-btn { display: inline-flex; align-items: center; gap: 6px; }
.fb-modal { width: min(520px, calc(100vw - 24px)); }
.fb-cats { display: flex; flex-wrap: wrap; gap: 6px; }
.fb-cats label { flex: none; flex-direction: row; }
.fb-cats input { position: absolute; opacity: 0; pointer-events: none; width: 1px; }
.fb-cats span { display: inline-block; padding: 7px 12px; border-radius: 99px; border: 1px solid var(--line); background: var(--panel); color: var(--ink); font-size: 13px; cursor: pointer; }
.fb-cats input:checked + span { background: var(--brand-soft); border-color: var(--brand); color: var(--ink); font-weight: 600; }
.fb-cats input:focus-visible + span { outline: 2px solid var(--brand); outline-offset: 2px; }
.fb-cat { font-size: 11px; padding: 2px 8px; border-radius: 99px; background: var(--brand-soft); white-space: nowrap; }
.fb-msg { max-width: 420px; white-space: pre-wrap; }
@media (max-width: 760px) {
  .app-foot { padding: 6px 10px; }
  .fb-btn span { display: none; } .fb-btn { padding: 7px 9px; }
}

/* Tombol tampilan & warna (popover) */
.foot-left { position: relative; }
.look-btn { position: relative; width: 36px; height: 36px; display: grid; place-items: center; border-radius: 10px; border: 1px solid var(--line); background: var(--bg); color: var(--ink); cursor: pointer; }
.look-btn:hover, .look-btn[aria-expanded="true"] { border-color: var(--brand); }
.look-dot { position: absolute; right: 4px; bottom: 4px; width: 9px; height: 9px; border-radius: 50%; background: var(--brand); border: 2px solid var(--bg); }
.look-pop { position: absolute; left: 0; bottom: calc(100% + 10px); z-index: 30; display: flex; flex-direction: column; gap: 8px; padding: 14px; min-width: 230px; border-radius: 14px; border: 1px solid var(--line); background: var(--panel); box-shadow: 0 12px 32px rgba(0,0,0,.18); animation: navIn .14s ease-out; }
.look-pop[hidden] { display: none; }
.look-title { font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.look-pop .seg { align-self: flex-start; } .look-pop .seg button { width: 40px; height: 32px; }
.look-pop .swatches { gap: 8px; } .look-pop .swatches button { width: 26px; height: 26px; }

/* Pengalih aplikasi */
.app-sw { position: relative; }
.app-sw-btn { display: inline-flex; align-items: center; gap: 8px; padding: 4px 8px 4px 4px; margin-left: -4px; border-radius: 10px; border: 1px solid transparent; background: transparent; color: inherit; font: inherit; font-weight: 700; cursor: pointer; }
.app-sw-btn:hover, .app-sw-btn[aria-expanded="true"] { background: #232c27; border-color: #33403a; }
.app-sw-btn .chev { opacity: .7; transition: transform .15s; } .app-sw-btn[aria-expanded="true"] .chev { transform: rotate(180deg); }
.app-sw-pop { position: absolute; left: 0; top: calc(100% + 8px); z-index: 40; width: 300px; padding: 10px; border-radius: 14px; border: 1px solid var(--line); background: var(--panel); color: var(--ink); box-shadow: 0 14px 36px rgba(0,0,0,.22); display: flex; flex-direction: column; gap: 4px; font-weight: 400; animation: navIn .14s ease-out; }
.app-sw-pop[hidden] { display: none; }
.app-sw-pop .look-title { padding: 2px 6px 6px; }
.app-item { display: flex; align-items: center; gap: 10px; padding: 9px 10px; border-radius: 10px; color: var(--ink); text-decoration: none; }
.app-item:hover { background: var(--bg); } .app-item.cur { background: var(--brand-soft); }
.app-item > span:nth-child(2) { flex: 1; min-width: 0; display: flex; flex-direction: column; } .app-item b { font-size: 14px; } .app-item small { color: var(--muted); font-size: 12px; }
.app-item em { font-style: normal; font-size: 11px; color: var(--brand); font-weight: 600; } .app-item i { font-style: normal; color: var(--muted); }
.app-ic { width: 32px; height: 32px; flex: none; border-radius: 9px; display: grid; place-items: center; background: var(--c); color: #fff; font-weight: 800; font-size: 14px; }
/* Tombol bahasa */
.lang-sw { display: inline-flex; padding: 2px; border-radius: 8px; border: 1px solid #33403a; background: #1f2823; }
.lang-sw button { min-width: 34px; height: 26px; border: 0; border-radius: 6px; background: transparent; color: #b7c0b9; font: inherit; font-size: 12px; font-weight: 700; cursor: pointer; }
.lang-sw button[aria-pressed="true"] { background: #e8ebe6; color: #17201c; }
/* Panduan */
.guide-wrap { max-width: 920px; margin: 0 auto; display: flex; flex-direction: column; gap: 14px; }
.guide-head h2 { margin-bottom: 4px; } .guide-head p { margin: 0; }
.guide-steps { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.guide-step { display: flex; gap: 14px; align-items: flex-start; }
.guide-step h4 { margin: 2px 0 4px; font-size: 15px; } .guide-step p { margin: 0; line-height: 1.55; color: var(--ink); }
.guide-step > div { flex: 1; min-width: 0; } .guide-step .btn { flex: none; align-self: center; }
.guide-n { flex: none; width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; background: var(--brand); color: #fff; font-weight: 800; }
.guide-tips ul { margin: 0; padding-left: 18px; display: flex; flex-direction: column; gap: 6px; line-height: 1.5; }
@media (max-width: 760px) {
  .top .app-sw { order: 1; } .top .lang-sw { order: 2; }
  .guide-step { flex-wrap: wrap; } .guide-step .btn { margin-left: 46px; }
  .app-sw-pop { width: min(300px, calc(100vw - 28px)); }
}
@media (max-width: 760px) {
  .top .lang-sw { order: 2; } .top .menu-btn { order: 3; }
  .top #bizSel { order: 4; } .top #waPill { order: 5; } .top nav { order: 6; } .top #logoutBtn { order: 7; }
  .top .page-title { font-size: 14px; }
}
@media (min-width: 761px) {
  .top { flex-wrap: nowrap; }
  .top nav { flex-wrap: nowrap; min-width: 0; overflow-x: auto; scrollbar-width: none; }
  .top nav::-webkit-scrollbar { display: none; }
  .top nav button { flex: none; white-space: nowrap; }
  .top #logoutBtn, .top .lang-sw, .top .app-sw, .top #waPill { flex: none; }
}
@media (min-width: 761px) and (max-width: 1440px) {
  .top { gap: 10px; padding: 8px 12px; }
  .top select { min-width: 150px; max-width: 170px; }
  .top nav button { padding: 7px 8px; font-size: 13px; }
}

.guide-video { border-radius: 14px; overflow: hidden; border: 1px solid var(--line); background: #000; box-shadow: 0 8px 24px rgba(0,0,0,.08); }
.guide-video video { display: block; width: 100%; aspect-ratio: 16 / 9; background: #000; }

/* Pengaturan label */
.lbl-list { display: flex; flex-direction: column; gap: 8px; }
.lbl-row { display: grid; grid-template-columns: 44px minmax(0, 220px) auto minmax(0, 1fr); gap: 12px; align-items: center; padding: 8px 10px; border-radius: 10px; background: var(--panel); border: 1px solid var(--tl, var(--line)); }
.lbl-row input[type=color] { width: 44px; height: 36px; padding: 2px; border-radius: 8px; cursor: pointer; }
.lbl-row .badge { justify-self: start; white-space: nowrap; }
.lbl-row small { font-size: 12px; }
.lbl-preview { display: inline-flex; gap: 6px; vertical-align: middle; margin-left: 4px; }
@media (max-width: 700px) { .lbl-row { grid-template-columns: 44px minmax(0, 1fr) auto; } .lbl-row small { grid-column: 1 / -1; } }

.wa-warn { margin: 0 0 12px; padding: 10px 12px; border-radius: 10px; background: var(--t-amber); border: 1px solid var(--t-amber-b); color: var(--ink); font-size: 12.5px; line-height: 1.5; }
.wa-warn b { color: var(--t-amber-i); }

/* ================= Ikon menu ================= */
.nv-ic { display: none; flex: none; }
#nav button { display: inline-flex; align-items: center; gap: 7px; }
@media (max-width: 760px) { .top nav .nv-ic { display: inline; opacity: .85; } .top nav button { gap: 12px; } }

/* ================= GAYA 1 · MODERN (terang & bersih) ================= */
:root[data-skin="modern"] { --radius: 16px; --top: #ffffff; }
:root[data-skin="modern"] body { background: linear-gradient(180deg, color-mix(in srgb, var(--brand) 7%, var(--bg)) 0, var(--bg) 320px); }
:root[data-skin="modern"] .top { background: var(--panel); color: var(--ink); border-bottom: 1px solid var(--line); box-shadow: 0 1px 0 rgba(0,0,0,.02), 0 6px 20px rgba(16,32,26,.05); }
:root[data-skin="modern"] .top select { background: var(--bg); border-color: var(--line); color: var(--ink); }
:root[data-skin="modern"] .app-sw-btn:hover, :root[data-skin="modern"] .app-sw-btn[aria-expanded="true"] { background: var(--bg); border-color: var(--line); }
:root[data-skin="modern"] #nav button { color: var(--muted); border-radius: 999px; padding: 7px 13px; }
:root[data-skin="modern"] #nav button .nv-ic { display: inline; }
:root[data-skin="modern"] #nav button:hover { background: var(--bg); color: var(--ink); }
:root[data-skin="modern"] #nav button.active { background: var(--brand-soft); color: var(--brand); font-weight: 600; }
:root[data-skin="modern"] .lang-sw { background: var(--bg); border-color: var(--line); } :root[data-skin="modern"] .lang-sw button { color: var(--muted); }
:root[data-skin="modern"] .lang-sw button[aria-pressed="true"] { background: var(--ink); color: var(--panel); }
:root[data-skin="modern"] .menu-btn { background: var(--bg) !important; border-color: var(--line) !important; color: var(--ink) !important; }
:root[data-skin="modern"] .top .page-title { color: var(--ink); border-color: var(--line); }
:root[data-skin="modern"] .panel { border-color: transparent; box-shadow: 0 1px 2px rgba(16,32,26,.05), 0 8px 24px rgba(16,32,26,.06); }
:root[data-skin="modern"] .btn { border-radius: 999px; } :root[data-skin="modern"] .btn.primary { box-shadow: 0 4px 12px color-mix(in srgb, var(--brand) 35%, transparent); }
:root[data-skin="modern"] .list-pane, :root[data-skin="modern"] .info-pane, :root[data-skin="modern"] .k-list, :root[data-skin="modern"] .k-test { background: color-mix(in srgb, var(--panel) 85%, transparent); }
:root[data-skin="modern"] .contact-list li.active { background: var(--brand-soft); box-shadow: inset 3px 0 0 var(--brand); }
:root[data-skin="modern"] .chip.active { background: var(--brand); border-color: var(--brand); }
:root[data-skin="modern"] input, :root[data-skin="modern"] select, :root[data-skin="modern"] textarea { border-radius: 10px; }

/* ================= GAYA 2 · SIDEBAR (profesional) ================= */
@media (min-width: 1000px) {
  :root[data-skin="sidebar"] body { padding-left: 232px; }
  :root[data-skin="sidebar"] .top { position: fixed; left: 0; top: 0; bottom: 0; width: 232px; z-index: 30; flex-direction: column; align-items: stretch; flex-wrap: nowrap; gap: 12px; padding: 16px 14px; background: linear-gradient(180deg, #0f1d17, #13261e); }
  :root[data-skin="sidebar"] .top .app-sw { order: 1; } :root[data-skin="sidebar"] .top #bizSel { order: 2; width: 100%; max-width: none; min-width: 0; }
  :root[data-skin="sidebar"] .top #waPill { order: 3; align-self: flex-start; }
  :root[data-skin="sidebar"] .top nav { order: 4; flex-direction: column; flex-wrap: nowrap; overflow: visible; margin: 8px 0 0; gap: 2px; flex: 1; }
  :root[data-skin="sidebar"] #nav button { width: 100%; justify-content: flex-start; padding: 10px 12px; border-radius: 10px; font-size: 14px; gap: 11px; color: #aebbb3; }
  :root[data-skin="sidebar"] #nav button .nv-ic { display: inline; }
  :root[data-skin="sidebar"] #nav button.active { background: rgba(255,255,255,.08); color: #fff; box-shadow: inset 3px 0 0 var(--brand); }
  :root[data-skin="sidebar"] .top .lang-sw { order: 5; align-self: flex-start; } :root[data-skin="sidebar"] .top #logoutBtn { order: 6; width: 100%; }
  :root[data-skin="sidebar"] .app-sw-pop { left: 0; top: calc(100% + 8px); }
  :root[data-skin="sidebar"] .app-foot { position: relative; }
  :root[data-skin="sidebar"] .look-pop { left: 0; }
}
:root[data-skin="sidebar"] { --radius: 12px; }
:root[data-skin="sidebar"] body { background: #eef1f4; }
:root[data-skin="sidebar"][data-theme="dark"] body { background: var(--bg); }
:root[data-skin="sidebar"] .panel { box-shadow: 0 1px 3px rgba(15,23,42,.06); }
:root[data-skin="sidebar"] h3 { letter-spacing: .04em; }

/* ================= GAYA 3 · CERIA (berwarna) ================= */
:root[data-skin="ceria"] { --radius: 18px; }
:root[data-skin="ceria"] body { background: radial-gradient(circle at 10% 0%, color-mix(in srgb, var(--brand) 12%, transparent) 0, transparent 40%), radial-gradient(circle at 95% 10%, rgba(255,170,60,.12) 0, transparent 35%), var(--bg); }
:root[data-skin="ceria"] .top { background: linear-gradient(100deg, var(--brand), color-mix(in srgb, var(--brand) 55%, #0d7480)); box-shadow: 0 6px 24px color-mix(in srgb, var(--brand) 30%, transparent); }
:root[data-skin="ceria"] .top select, :root[data-skin="ceria"] .lang-sw, :root[data-skin="ceria"] .menu-btn { background: rgba(255,255,255,.14) !important; border-color: rgba(255,255,255,.25) !important; color: #fff; }
:root[data-skin="ceria"] .brand-mark { background: #fff; color: var(--brand); }
:root[data-skin="ceria"] #nav button { color: rgba(255,255,255,.85); border-radius: 12px; }
:root[data-skin="ceria"] #nav button .nv-ic { display: inline; }
:root[data-skin="ceria"] #nav button.active, :root[data-skin="ceria"] #nav button:hover { background: rgba(255,255,255,.2); color: #fff; }
:root[data-skin="ceria"] .lang-sw button { color: rgba(255,255,255,.8); } :root[data-skin="ceria"] .lang-sw button[aria-pressed="true"] { background: #fff; color: var(--brand); }
:root[data-skin="ceria"] .panel { border: 0; box-shadow: 0 10px 30px rgba(16,32,26,.08); position: relative; overflow: hidden; }
:root[data-skin="ceria"] .panel::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 4px; background: linear-gradient(90deg, var(--ti, var(--brand)), color-mix(in srgb, var(--ti, var(--brand)) 40%, #ffb347)); }
:root[data-skin="ceria"] .btn { border-radius: 12px; font-weight: 600; } :root[data-skin="ceria"] .btn.primary { background: linear-gradient(135deg, var(--brand), color-mix(in srgb, var(--brand) 60%, #0d7480)); border: 0; }
:root[data-skin="ceria"] .chip { padding: 5px 12px; font-size: 13px; border-width: 1.5px; } :root[data-skin="ceria"] .chip.active { background: var(--brand); color: #fff; border-color: var(--brand); }
:root[data-skin="ceria"] .badge { border-radius: 8px; padding: 2px 8px; }
:root[data-skin="ceria"] .contact-list li { border-radius: 14px; margin: 4px 8px; border-bottom: 0; }
:root[data-skin="ceria"] .contact-list li.active { background: var(--brand-soft); box-shadow: 0 4px 14px rgba(16,32,26,.08); }
:root[data-skin="ceria"] .msg { border-radius: 16px; } :root[data-skin="ceria"] .stat, :root[data-skin="ceria"] .kpi { border-radius: 18px; }
:root[data-skin="ceria"] .sec-ic { background: var(--ti, var(--brand)); color: #fff; border: 0; }

/* Pilihan gaya di popover */
.skins { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.skins button { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 6px 4px; border-radius: 10px; border: 1px solid var(--line); background: var(--bg); color: var(--ink); font: inherit; font-size: 11px; cursor: pointer; }
.skins button[aria-pressed="true"] { border-color: var(--brand); box-shadow: 0 0 0 1px var(--brand); background: var(--brand-soft); }
.sk { display: block; width: 44px; height: 30px; border-radius: 6px; border: 1px solid var(--line); background: #f4f2ee; position: relative; overflow: hidden; }
.sk-klasik::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 8px; background: #17201c; }
.sk-modern { background: linear-gradient(#eaf4ee, #f8f8f5); } .sk-modern::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 8px; background: #fff; border-bottom: 1px solid #ddd; }
.sk-modern::after { content: ""; position: absolute; left: 6px; top: 13px; width: 30px; height: 10px; border-radius: 4px; background: #fff; box-shadow: 0 2px 4px rgba(0,0,0,.12); }
.sk-sidebar { background: #eef1f4; } .sk-sidebar::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 12px; background: #13261e; }
.sk-ceria::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 9px; background: linear-gradient(100deg, #0f6b4f, #0d7480); }
.sk-ceria { background: radial-gradient(circle at 80% 70%, #ffe1b8 0, transparent 60%), #f4f2ee; }
.look-pop { min-width: 260px; }
:root[data-skin="modern"] #logoutBtn { color: var(--ink); border-color: var(--line); background: var(--panel); }
:root[data-skin="ceria"] #logoutBtn { color: #fff; border-color: rgba(255,255,255,.4); background: rgba(255,255,255,.12); }
:root[data-skin="sidebar"] #logoutBtn { color: #cfd8d2; border-color: rgba(255,255,255,.18); background: transparent; }

/* Sub-menu Pengaturan */
.subtabs { display: inline-flex; gap: 4px; padding: 4px; margin-bottom: 14px; border-radius: 12px; background: var(--panel); border: 1px solid var(--line); }
.subtabs button { min-height: 34px; padding: 6px 16px; border: 0; border-radius: 9px; background: transparent; color: var(--muted); font: inherit; font-weight: 600; cursor: pointer; }
.subtabs button[aria-selected="true"] { background: var(--brand); color: #fff; }
.subtabs button:hover:not([aria-selected="true"]) { background: var(--bg); color: var(--ink); }
#view-guide .subtabs { display: flex; width: max-content; margin: 0 auto 14px; }
/* Footer aplikasi: info tengah */
.app-foot { position: sticky; bottom: 0; }
.foot-mid { display: flex; align-items: center; gap: 16px; font-size: 12.5px; color: var(--muted); }
.foot-mid b { color: var(--ink); font-weight: 600; } .foot-mid a { color: var(--muted); text-decoration: none; } .foot-mid a:hover { color: var(--brand); }
@media (max-width: 760px) { .foot-mid span { display: none; } .foot-mid { gap: 12px; } }
@media (max-width: 420px) { .foot-mid a:not(:first-of-type) { display: none; } }

/* ---------- Menu akun (avatar inisial) ---------- */
.user-sw { position: relative; flex: none; }
.avatar-btn { display: inline-flex; align-items: center; gap: 8px; padding: 2px; border: 0; border-radius: 999px; background: transparent; color: inherit; font: inherit; cursor: pointer; }
.avatar-btn:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
.avatar { width: 34px; height: 34px; flex: none; border-radius: 50%; display: grid; place-items: center; background: var(--brand); color: #fff; font-weight: 700; font-size: 13px; letter-spacing: .02em; box-shadow: 0 0 0 2px rgba(255,255,255,.18); transition: box-shadow .15s; }
.avatar-btn:hover .avatar, .avatar-btn[aria-expanded="true"] .avatar { box-shadow: 0 0 0 3px rgba(255,255,255,.35); }
.avatar.lg { width: 48px; height: 48px; font-size: 17px; box-shadow: none; }
.av-name { display: none; }
.user-pop { position: absolute; right: 0; top: calc(100% + 10px); z-index: 45; width: 300px; padding: 8px; border-radius: 16px; border: 1px solid var(--line); background: var(--panel); color: var(--ink); box-shadow: 0 16px 40px rgba(0,0,0,.22); display: flex; flex-direction: column; gap: 2px; font-weight: 400; animation: navIn .14s ease-out; }
.user-pop[hidden] { display: none; }
.up-head { display: flex; gap: 12px; align-items: center; padding: 10px 10px 12px; margin-bottom: 4px; border-bottom: 1px solid var(--line); }
.up-who { min-width: 0; display: flex; flex-direction: column; }
.up-who b { font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.up-who small { color: var(--muted); font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.up-acc { margin-top: 2px; font-size: 12px; color: var(--brand); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.up-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 6px 10px; min-height: 44px; }
.up-lbl, .up-item { display: flex; align-items: center; gap: 12px; color: var(--ink); font-size: 14px; }
.up-lbl svg, .up-item svg { color: var(--muted); flex: none; }
.up-item { width: 100%; min-height: 44px; padding: 8px 10px; border: 0; border-radius: 10px; background: transparent; font: inherit; font-size: 14px; text-align: left; cursor: pointer; }
.up-item:hover, .up-item:focus-visible { background: var(--bg); outline: none; }
.up-item.danger, .up-item.danger svg { color: #b23a2b; }
.user-pop hr { border: 0; border-top: 1px solid var(--line); margin: 4px 0; }
.up-lang { display: inline-flex; padding: 2px; border-radius: 9px; border: 1px solid var(--line); background: var(--bg); }
.up-lang button { min-width: 40px; height: 30px; border: 0; border-radius: 7px; background: transparent; color: var(--muted); font: inherit; font-size: 13px; font-weight: 700; cursor: pointer; }
.up-lang button[aria-pressed="true"] { background: var(--brand); color: #fff; }
@media (max-width: 760px) {
  .top .user-sw { order: 2; }
  .user-pop { position: fixed; right: 12px; left: auto; top: 64px; width: min(320px, calc(100vw - 24px)); }
}
:root[data-skin="modern"] .avatar { box-shadow: 0 0 0 2px var(--line); }
:root[data-skin="ceria"] .avatar { background: #fff; color: var(--brand); box-shadow: 0 0 0 2px rgba(255,255,255,.4); }
@media (min-width: 1000px) {
  :root[data-skin="sidebar"] .top .user-sw { order: 5; width: 100%; padding-top: 10px; border-top: 1px solid rgba(255,255,255,.1); }
  :root[data-skin="sidebar"] .avatar-btn { width: 100%; padding: 6px; border-radius: 12px; color: #dfe7e2; }
  :root[data-skin="sidebar"] .avatar-btn:hover { background: rgba(255,255,255,.06); }
  :root[data-skin="sidebar"] .av-name { display: block; min-width: 0; font-size: 14px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  :root[data-skin="sidebar"] .user-pop { left: 0; right: auto; top: auto; bottom: calc(100% + 8px); }
}

/* ---------- Jadwal & follow-up AI ---------- */
:root { --t-teal: #ecf6f7; --t-teal-b: #c9e5e8; --t-teal-i: #0d6f7a; }
:root[data-theme="dark"] { --t-teal: #13222a; --t-teal-b: #21414a; --t-teal-i: #7fcfd8; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --t-teal: #13222a; --t-teal-b: #21414a; --t-teal-i: #7fcfd8; } }
.tint-teal { --tb: var(--t-teal); --tl: var(--t-teal-b); --ti: var(--t-teal-i); }
.sched { display: flex; flex-direction: column; gap: 10px; padding: 12px; border-radius: 12px; background: var(--panel); border: 1px solid var(--tl, var(--line)); }
.sched[hidden] { display: none; }
.lbl-sm { font-size: 13px; font-weight: 600; }
.days { display: flex; flex-wrap: wrap; gap: 6px; }
.days .day { position: relative; flex-direction: row; }
.days input { position: absolute; opacity: 0; width: 1px; pointer-events: none; }
.days span { display: inline-grid; place-items: center; min-width: 48px; min-height: 36px; padding: 0 10px; border-radius: 10px; border: 1px solid var(--line); background: var(--bg); font-size: 13px; font-weight: 600; color: var(--muted); cursor: pointer; }
.days input:checked + span { background: var(--brand); border-color: var(--brand); color: #fff; }
.days input:focus-visible + span { outline: 2px solid var(--brand); outline-offset: 2px; }
.sched-now { font-size: 13px; padding: 7px 10px; border-radius: 99px; background: var(--bg); border: 1px solid var(--line); }
.sched-now.on { color: #0f6b4f; } .sched-now.off { color: #9a5a00; }
.fu-box { padding: 12px; border-radius: 12px; background: var(--panel); border: 1px solid var(--tl, var(--line)); }
.ship-out { margin-top: 10px; padding: 12px; border-radius: 12px; background: var(--panel); border: 1px solid var(--tl, var(--line)); font-size: 14px; }
.ship-out table { width: 100%; border-collapse: collapse; margin-top: 6px; } .ship-out td { padding: 5px 4px; border-top: 1px solid var(--line); } .ship-out td.r { text-align: right; font-variant-numeric: tabular-nums; }

/* ---------- Pipeline (kanban) ---------- */
.pipeline { padding: 16px; display: flex; flex-direction: column; gap: 14px; min-height: 0; }
.pl-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 12px; flex-wrap: wrap; }
.pl-head h2 { margin: 0 0 2px; } .pl-head p { margin: 0; max-width: 620px; }
.pl-sum { display: flex; gap: 8px; flex-wrap: wrap; }
.pl-sum span { padding: 6px 12px; border-radius: 99px; background: var(--panel); border: 1px solid var(--line); font-size: 13px; } .pl-sum b { font-variant-numeric: tabular-nums; }
.kanban { display: grid; grid-template-columns: repeat(6, minmax(220px, 1fr)); gap: 12px; overflow-x: auto; padding-bottom: 8px; align-items: start; scroll-snap-type: x proximity; }
.kcol { display: flex; flex-direction: column; gap: 8px; min-height: 240px; padding: 10px; border-radius: 14px; background: color-mix(in srgb, var(--panel) 60%, var(--bg)); border: 1px solid var(--line); scroll-snap-align: start; transition: background .15s, border-color .15s; }
.kcol.over { border-color: var(--brand); background: var(--brand-soft); }
.kcol-h { display: flex; align-items: center; gap: 8px; padding: 2px 4px 6px; border-bottom: 2px solid var(--kc); }
.kcol-h b { font-size: 14px; } .kcol-h .n { margin-left: auto; min-width: 24px; padding: 1px 8px; border-radius: 99px; background: var(--panel); border: 1px solid var(--line); font-size: 12px; text-align: center; }
.kcol-v { font-size: 12px; color: var(--muted); padding: 0 4px; font-variant-numeric: tabular-nums; }
.kcard { display: flex; flex-direction: column; gap: 5px; padding: 10px 11px; border-radius: 11px; background: var(--panel); border: 1px solid var(--line); box-shadow: 0 1px 2px rgba(0,0,0,.05); cursor: grab; }
.kcard:hover { border-color: color-mix(in srgb, var(--brand) 50%, var(--line)); }
.kcard.dragging { opacity: .45; }
.kcard .k1 { display: flex; align-items: center; gap: 6px; } .kcard .k1 b { flex: 1; min-width: 0; font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kcard .badge { font-size: 10px; }
.kcard .kmsg { font-size: 12px; color: var(--muted); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.kcard .k2 { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--muted); }
.kcard .kval { margin-left: auto; font-weight: 700; color: var(--ink); font-variant-numeric: tabular-nums; }
.kcard .kflag { color: #b8740a; font-weight: 600; }
.kcard select { font-size: 12px; padding: 4px 6px; min-height: 30px; }
.kcard .kopen { align-self: flex-start; padding: 0; border: 0; background: none; color: var(--brand); font: inherit; font-size: 12px; font-weight: 600; cursor: pointer; }
.kempty { padding: 14px 6px; text-align: center; font-size: 12px; color: var(--muted); border: 1px dashed var(--line); border-radius: 10px; }
@media (max-width: 760px) {
  .pipeline { padding: 12px; }
  .kanban { grid-template-columns: repeat(6, 82vw); }
}
.days .day { flex: 0 0 auto; width: auto; min-width: 0; }
.kcard .kopen { white-space: nowrap; } .kcard .k2 select { flex: 1; min-width: 0; margin-left: auto; max-width: 140px; }
.pipeline { min-width: 0; max-width: 100%; overflow-x: hidden; overflow-y: auto; } .kanban { width: 100%; max-width: 100%; }
.days-left { display: inline-block; font-size: 12px; font-weight: 600; color: var(--muted); }
.days-left.warn { color: #b26b00; } .days-left.bad { color: #b23a2b; }
#accInfo .days-left { margin-left: 4px; padding: 1px 8px; border-radius: 99px; background: var(--bg); border: 1px solid var(--line); }
.up-plan { margin-top: 3px; font-size: 12px; color: var(--muted); } .up-plan.warn b { color: #b26b00; } .up-plan.bad b { color: #b23a2b; }
.acc-sub { display: flex; flex-direction: column; gap: 8px; padding: 12px; border-radius: 12px; background: var(--bg); border: 1px solid var(--line); }
div.days-left { display: block; }
.up-who .up-plan b { font-size: 12px; white-space: normal; }

/* ---------- Label & Pipeline opsional + bantuan ---------- */
:root[data-nolabels] #labelChips .chip:not([data-l="semua"]):not([data-l="perlu_admin"]),
:root[data-nolabels] .contact-list .badge, :root[data-nolabels] #chLabel, :root[data-nolabels] .kcard .badge { display: none !important; }
.chips-row { display: flex; align-items: flex-start; gap: 6px; }
.chips-row .chips { flex: 1; min-width: 0; }
.help-q { flex: none; width: 28px; height: 28px; margin: 8px 8px 0 0; border-radius: 50%; border: 1px solid var(--line); background: var(--panel); color: var(--muted); font: inherit; font-size: 13px; font-weight: 700; cursor: pointer; }
.help-q:hover { color: var(--brand); border-color: var(--brand); }
.help-box.mini { font-size: 13px; line-height: 1.5; }
.help-box.mini ul, .help-box ol { margin: 6px 0 0; padding-left: 18px; display: flex; flex-direction: column; gap: 4px; }
.list-pane > .help-box { margin: 0 10px 10px; }
.pipeline > .help-box { font-size: 14px; line-height: 1.55; }
.feat-toggles { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 10px; margin: 12px 0; }
.tgl { display: flex; flex-direction: row; gap: 10px; align-items: flex-start; padding: 12px; border-radius: 12px; background: var(--panel); border: 1px solid var(--tl, var(--line)); cursor: pointer; }
.tgl input { margin-top: 3px; width: 18px; height: 18px; flex: none; accent-color: var(--brand); }
.tgl span { display: flex; flex-direction: column; gap: 2px; } .tgl small { color: var(--muted); font-size: 12px; line-height: 1.45; font-weight: 400; }
#lblSetHelp { margin-bottom: 12px; }

/* ---------- Notifikasi & hapus akun ---------- */
.up-st { margin-left: auto; font-size: 12px; padding: 2px 8px; border-radius: 99px; background: var(--bg); color: var(--muted); border: 1px solid var(--line); }
.up-st.on { color: #0f6b4f; border-color: color-mix(in srgb, #0f6b4f 35%, var(--line)); }
.up-item.danger-soft, .up-item.danger-soft svg { color: var(--muted); } .up-item.danger-soft:hover, .up-item.danger-soft:hover svg { color: #b23a2b; }
.push-tip { display: flex; align-items: center; justify-content: space-between; gap: 10px 16px; flex-wrap: wrap; padding: 10px 16px; background: color-mix(in srgb, var(--brand) 10%, var(--panel)); border-bottom: 1px solid var(--line); font-size: 14px; }
.push-tip[hidden] { display: none; }
.notif-state { padding: 10px 12px; border-radius: 10px; background: var(--bg); border: 1px solid var(--line); font-size: 14px; }
.ns { color: var(--muted); font-weight: 600; } .ns.on { color: #0f6b4f; } .ns.bad { color: #b23a2b; }
.del-warn { padding: 12px 14px; border-radius: 10px; background: #fdecea; border: 1px solid #f2c4bd; color: #6b1d14; font-size: 14px; line-height: 1.5; }
:root[data-theme="dark"] .del-warn { background: #2a1714; border-color: #5a2a22; color: #f3c9c2; }
#delBtn { background: #b23a2b; border-color: #b23a2b; color: #fff; } #delBtn:hover { background: #962f22; } #delBtn:disabled { opacity: .5; }
:root[data-native] #upgradeBtn { display: none !important; }
/* Panel notifikasi di Pengaturan */
.np-dev { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px; border-radius: 12px; background: var(--panel); border: 1px solid var(--tl, var(--line)); }
.np-dev .notif-state { padding: 0; border: 0; background: none; margin-top: 2px; font-size: 13px; }
.sw-big { position: relative; flex: none; width: 52px; height: 30px; cursor: pointer; }
.sw-big input { position: absolute; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; z-index: 1; }
.sw-big span { position: absolute; inset: 0; border-radius: 99px; background: var(--line); transition: background .15s; }
.sw-big span::after { content: ""; position: absolute; top: 3px; left: 3px; width: 24px; height: 24px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.25); transition: transform .15s; }
.sw-big input:checked + span { background: var(--brand); } .sw-big input:checked + span::after { transform: translateX(22px); }
.sw-big input:focus-visible + span { outline: 2px solid var(--brand); outline-offset: 2px; }
.sw-big input:disabled + span { opacity: .5; }
.np-types { display: flex; flex-direction: column; gap: 8px; margin-top: 12px; transition: opacity .15s; }
.np-types.dim { opacity: .55; }
#notifPanel .err:empty { display: none; }

/* ================= CRM (Pelanggan) ================= */
.crm { padding: 16px 20px; display: flex; flex-direction: column; gap: 12px; min-width: 0; overflow-y: auto; }
.crm-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 12px; flex-wrap: wrap; }
.crm-head h2 { margin: 0 0 2px; display: flex; align-items: center; gap: 8px; } .crm-head p { margin: 0; max-width: 720px; }
.crm-badge { font-size: 11px; font-weight: 800; letter-spacing: .06em; padding: 3px 8px; border-radius: 6px; background: var(--brand); color: #fff; }
.crm-count { display: inline-block; min-width: 18px; padding: 0 6px; border-radius: 99px; background: var(--bg); font-size: 11px; } .crm-count:empty { display: none; } .crm-count.late { background: #b23a2b; color: #fff; }
.crm-kpi { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; }
.crm-kpi > div { padding: 12px 14px; border-radius: 12px; background: var(--panel); border: 1px solid var(--line); display: flex; flex-direction: column; gap: 2px; }
.crm-kpi span { font-size: 12px; color: var(--muted); } .crm-kpi b { font-size: 22px; font-variant-numeric: tabular-nums; } .crm-kpi .warn b { color: #b23a2b; }
.crm-filters { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.crm-filters .search { flex: 1 1 240px; margin: 0; } .crm-filters select { width: auto; min-width: 140px; }
.seg-chips { display: flex; gap: 4px; flex-wrap: wrap; }
.seg-chips button { padding: 6px 12px; min-height: 34px; border-radius: 99px; border: 1px solid var(--line); background: var(--panel); color: var(--ink); font: inherit; font-size: 13px; cursor: pointer; }
.seg-chips button[aria-pressed="true"] { background: var(--ink); color: var(--panel); border-color: var(--ink); }
.crm-table-wrap { overflow-x: auto; border-radius: 12px; border: 1px solid var(--line); background: var(--panel); }
.crm-table { margin: 0; min-width: 880px; } .crm-table tbody tr { cursor: pointer; } .crm-table tbody tr:hover { background: var(--bg); }
.crm-who { display: flex; align-items: center; gap: 10px; } .crm-who div { display: flex; flex-direction: column; min-width: 0; } .crm-who small { color: var(--muted); font-size: 12px; }
.avatar.sm-av { width: 32px; height: 32px; font-size: 12px; box-shadow: none; }
.stage-pill { display: inline-block; padding: 2px 10px; border-radius: 99px; font-size: 12px; font-weight: 600; color: var(--sc); background: color-mix(in srgb, var(--sc) 12%, transparent); border: 1px solid color-mix(in srgb, var(--sc) 35%, transparent); white-space: nowrap; }
.tag { display: inline-block; margin: 1px 3px 1px 0; padding: 1px 8px; border-radius: 6px; font-size: 12px; background: var(--bg); border: 1px solid var(--line); color: var(--ink); }
.due { font-size: 13px; white-space: nowrap; } .due.late, small.late { color: #b23a2b; font-weight: 600; }
:root[data-nocrm] .crm-only { display: none !important; }
/* Panel samping profil pelanggan */
dialog.drawer { position: fixed; inset: 0 0 0 auto; margin: 0; height: 100dvh; max-height: none; width: min(560px, 100vw); padding: 0; border: 0; border-left: 1px solid var(--line); background: var(--bg); color: var(--ink); overflow-y: auto; box-shadow: -12px 0 40px rgba(0,0,0,.2); }
dialog.drawer::backdrop { background: rgba(10,15,12,.35); }
.dr-head { position: sticky; top: 0; z-index: 2; display: flex; align-items: center; gap: 12px; padding: 16px 18px; background: var(--panel); border-bottom: 1px solid var(--line); }
.dr-who { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; } .dr-who b { font-size: 18px; } .dr-who small { color: var(--muted); font-size: 13px; }
.dr-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; padding: 14px 18px 0; }
.dr-stats div { padding: 10px; border-radius: 10px; background: var(--panel); border: 1px solid var(--line); display: flex; flex-direction: column; } .dr-stats span { font-size: 11px; color: var(--muted); } .dr-stats b { font-size: 15px; }
.dr-actions { display: flex; gap: 8px; padding: 12px 18px 0; }
.dr-sec { margin: 14px 18px; padding: 14px; border-radius: 12px; background: var(--panel); border: 1px solid var(--line); display: flex; flex-direction: column; gap: 10px; }
.dr-sec h4 { margin: 0; font-size: 14px; }
.dr-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; } .dr-grid .full { grid-column: 1 / -1; }
.task-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.task-list li { display: flex; align-items: flex-start; gap: 8px; padding: 8px 10px; border-radius: 10px; background: var(--bg); border: 1px solid var(--line); }
.task-list li label { flex: 1; display: flex; flex-direction: row; gap: 10px; align-items: flex-start; cursor: pointer; }
.task-list li input { margin-top: 3px; width: 18px; height: 18px; accent-color: var(--brand); }
.task-list li span { display: flex; flex-direction: column; } .task-list li small { font-size: 12px; color: var(--muted); }
.task-list li.done b { text-decoration: line-through; color: var(--muted); }
.task-form { display: flex; gap: 6px; flex-wrap: wrap; } .task-form input[name="title"], .task-form input[name="text"] { flex: 1 1 200px; } .task-form input[type="datetime-local"] { flex: 0 1 200px; } .task-form select { width: auto; }
.timeline { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.timeline li { display: flex; gap: 10px; } .tl-ic { flex: none; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; background: var(--bg); border: 1px solid var(--line); font-size: 14px; }
.timeline p { margin: 2px 0 0; font-size: 14px; } .timeline small { font-size: 12px; color: var(--muted); }
@media (max-width: 760px) {
  .crm { padding: 12px; } .crm-kpi { grid-template-columns: repeat(2, 1fr); } .crm-kpi > div:last-child { grid-column: 1 / -1; }
  .crm-filters select { flex: 1 1 45%; min-width: 0; }
  .dr-stats { grid-template-columns: repeat(2, 1fr); } .dr-grid { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
  .crm-kpi { grid-template-columns: repeat(3, 1fr); gap: 6px; } .crm-kpi > div { padding: 8px 10px; } .crm-kpi > div:last-child { grid-column: auto; }
  .crm-kpi > div:nth-child(4) { grid-column: span 2; } .crm-kpi b { font-size: 17px; } .crm-kpi span { font-size: 11px; }
}
@media (max-width: 760px) { .crm-table th:nth-child(5), .crm-table td:nth-child(5), .crm-table th:nth-child(7), .crm-table td:nth-child(7) { display: none; } .crm-table { min-width: 640px; } }

/* ---------- Checkout & referral ---------- */
.buy-modal { width: min(560px, 96vw); }
.buy-modal .lbl-sm { display: block; margin-bottom: 6px; }
.buy-modal .chips { padding: 0; gap: 6px; }
.buy-modal .chip { padding: 7px 14px; font-size: 14px; }
.buy-plans { display: flex; flex-direction: column; gap: 8px; }
.buy-plan { display: flex; flex-direction: row; flex: none; color: var(--ink); font-size: 14px; gap: 12px; align-items: center; padding: 12px 14px; border: 1.5px solid var(--line); border-radius: 12px; cursor: pointer; }
.buy-plan.on { border-color: var(--brand); background: var(--brand-soft); }
.buy-plan input { accent-color: var(--brand); width: 18px !important; margin: 0; height: 18px; flex: none; }
.buy-plan > span { flex: 1; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.buy-plan small { color: var(--muted); font-size: 12px; }
.buy-price { white-space: nowrap; text-align: right; font-variant-numeric: tabular-nums; }
.buy-price small { display: block; font-weight: 400; color: var(--muted); font-size: 11px; }
.buy-refmsg { margin: 6px 0 0; min-height: 1em; } .buy-refmsg.ok { color: var(--brand); font-weight: 600; } .buy-refmsg.bad { color: var(--danger); }
.buy-sum { border: 1px solid var(--line); border-radius: 12px; padding: 4px 14px; font-variant-numeric: tabular-nums; }
.buy-sum:empty { display: none; }
.buy-sum > div { display: flex; justify-content: space-between; gap: 10px; padding: 8px 0; font-size: 14px; }
.buy-sum > div + div { border-top: 1px dashed var(--line); }
.buy-sum .disc { color: var(--brand); font-weight: 600; }
.buy-sum .tot { font-size: 17px; font-weight: 700; }
.buy-ok { display: flex; flex-direction: column; padding: 14px 16px; border-radius: 12px; background: var(--brand-soft); }
.buy-ok b { font-size: 17px; } .buy-total { font-size: 26px !important; font-variant-numeric: tabular-nums; }
.buy-bank { white-space: pre-line; font-size: 15px; margin-top: 4px; line-height: 1.5; }
.sm-h { font-size: 14px; margin: 6px 0; }
.buy-orders, .ref-log { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; }
.buy-orders li, .ref-log li { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 8px 0; border-top: 1px solid var(--line); font-size: 13px; }
.buy-orders li > span:first-child, .ref-log li > span:first-child { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.buy-orders .r { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
.pill-s.warn { background: var(--warn); color: var(--warn-ink); }
.ref-code { display: flex; flex-direction: column; gap: 8px; padding: 12px 14px; border-radius: 12px; background: var(--panel); border: 1px dashed var(--tl, var(--line)); }
.ref-code b { display: block; font-size: 24px; letter-spacing: .06em; font-family: ui-monospace, Menlo, Consolas, monospace; }
.ref-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin: 10px 0; }
.ref-stats > div { background: var(--panel); border-radius: 10px; padding: 8px 10px; display: flex; flex-direction: column; min-width: 0; }
.ref-stats small { font-size: 11px; color: var(--muted); } .ref-stats b { font-size: 16px; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.ref-pay { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; padding: 10px 14px; border-radius: 12px; background: var(--panel); }
.ref-pay > div { display: flex; flex-direction: column; } .ref-pay b { font-size: 20px; font-variant-numeric: tabular-nums; } .ref-pay small { font-size: 12px; }
.ref-bank { margin-top: 10px; } .ref-bank summary { cursor: pointer; font-weight: 600; font-size: 14px; padding: 4px 0; } .ref-bank form { margin-top: 8px; }
.ref-log b.pos { color: var(--brand); } .ref-log b.neg { color: var(--muted); } .ref-log b { font-variant-numeric: tabular-nums; white-space: nowrap; }
@media (max-width: 760px) { .ref-stats { grid-template-columns: repeat(2, 1fr); } }
/* Admin: referral */
.ref-adm .grid4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.ref-adm .sw-row { display: flex; flex-direction: row; flex: none; align-items: center; gap: 10px; font-weight: 600; font-size: 14px; color: var(--ink); }
.ref-adm textarea { min-height: 72px; }
.adm-kpi { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-top: 10px; }
.adm-kpi > div { border: 1px solid var(--line); border-radius: 10px; padding: 8px 12px; background: var(--panel); display: flex; flex-direction: column; }
.adm-kpi small { color: var(--muted); font-size: 12px; } .adm-kpi b { font-size: 18px; font-variant-numeric: tabular-nums; }
.tbl td .btn + .btn { margin-left: 4px; }
.tbl tr.open-row { background: color-mix(in srgb, var(--warn) 55%, transparent); }
@media (max-width: 760px) { .ref-adm .grid4, .adm-kpi { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* Dashboard demo (hanya-baca) */
.banner.demo-ban { display: flex; gap: 12px; align-items: center; justify-content: space-between; flex-wrap: wrap; background: var(--brand-soft); color: var(--ink); font-size: 14px; }
.banner.demo-ban[hidden] { display: none; }
.banner.demo-ban .btn.primary { color: #fff; }
.is-demo #notifPanel, .is-demo #gLinkRow, .is-demo #pushTip { display: none !important; }
/* Excel starter pengetahuan */
.k-excel { display: grid; grid-template-columns: auto 1fr; gap: 6px 10px; align-items: center; margin: 8px 10px 2px; padding: 10px 12px; border: 1px dashed var(--brand); border-radius: 10px; background: var(--brand-soft); }
.k-excel > span:nth-child(2) { display: flex; flex-direction: column; min-width: 0; } .k-excel small { color: var(--muted); font-size: 12px; } .k-excel b { font-size: 13px; }
.k-excel-ic { width: 32px; height: 32px; border-radius: 8px; background: var(--brand); color: #fff; display: grid; place-items: center; }
.k-excel-btns { grid-column: 1 / -1; display: flex; gap: 6px; } .k-excel-btns .btn { flex: 1; justify-content: center; text-align: center; text-decoration: none; }
.xl-body { display: flex; flex-direction: column; gap: 8px; max-height: 55vh; overflow: auto; }
.xl-sec { flex-direction: row !important; align-items: flex-start; gap: 10px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; color: var(--ink); font-size: 14px; flex: none; }
.xl-sec input { width: 18px !important; height: 18px; margin-top: 2px; flex: none; accent-color: var(--brand); }
.xl-sec > span { flex: 1; min-width: 0; }
.xl-list { margin-top: 6px; display: flex; flex-direction: column; gap: 3px; font-size: 12.5px; max-height: 160px; overflow: auto; }
.xl-warn { padding: 10px 12px; border-radius: 10px; background: var(--warn); color: var(--warn-ink); font-size: 13px; }
.acc-edit { margin-left: 4px; vertical-align: middle; }
.acc-name-form { margin: 8px 0 4px; align-items: flex-end; }
.k-profile-1 { padding: 8px 12px; } .k-profile-1 .k-profile-ic { width: 26px; height: 26px; }
.xl-steps { margin: 0 0 12px; padding-left: 20px; display: flex; flex-direction: column; gap: 4px; font-size: 13px; line-height: 1.5; }
#xlsxDl { text-decoration: none; }
/* Fitur on/off di pengaturan */
.sec-head .sec-sw { margin-left: auto; align-self: center; }
.feat-box { display: flex; flex-direction: column; gap: 12px; margin-top: 12px; }
.feat-box.off { display: none; }
.feat-box .sub-box { display: flex; flex-direction: column; gap: 10px; padding: 12px; border-radius: 10px; background: var(--panel); border: 1px solid var(--line); }
/* Bukti transfer */
.pay-panel { margin: 12px 0 16px; }
.pay-panel h3 { margin: 0; }
.pay-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 10px; margin-top: 10px; }
.pay-card { display: flex; gap: 12px; padding: 10px; border-radius: 12px; background: var(--panel); border: 1px solid var(--line); }
.pay-card.menunggu { border-color: color-mix(in srgb, var(--warn-ink) 35%, var(--line)); }
.pay-img { flex: none; width: 92px; height: 120px; border-radius: 8px; overflow: hidden; background: var(--bg); display: grid; place-items: center; font-size: 11px; color: var(--muted); border: 1px solid var(--line); }
.pay-img img { width: 100%; height: 100%; object-fit: cover; }
.pay-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; font-size: 13px; }
.pay-amt { font-size: 18px; font-variant-numeric: tabular-nums; }
.pay-flag { color: var(--danger); }
.pay-act { margin-top: 6px; align-items: center; } .pay-act .check { font-size: 12px; flex: none; }
/* Booking */
.bk-kpi { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin: 14px 0; }
.bk-kpi > div { padding: 10px 14px; border-radius: 12px; background: var(--panel); border: 1px solid var(--line); display: flex; flex-direction: column; }
.bk-kpi small { color: var(--muted); font-size: 12px; } .bk-kpi b { font-size: 22px; font-variant-numeric: tabular-nums; }
.bk-kpi .hot { background: var(--warn); color: var(--warn-ink); border-color: transparent; } .bk-kpi .hot small { color: inherit; }
.bk-list { display: flex; flex-direction: column; gap: 16px; }
.bk-day h4 { margin: 0 0 8px; font-size: 14px; text-transform: capitalize; }
.bk-card { display: flex; gap: 12px; align-items: center; padding: 10px 14px; margin-bottom: 6px; border-radius: 12px; background: var(--panel); border: 1px solid var(--line); border-left: 4px solid var(--brand); cursor: pointer; }
.bk-card:hover { border-color: var(--brand); }
.bk-card.menunggu { border-left-color: #d49b00; } .bk-card.batal, .bk-card.tidak_datang { opacity: .6; border-left-color: var(--danger); } .bk-card.selesai { border-left-color: var(--muted); }
.bk-time { flex: none; width: 54px; display: flex; flex-direction: column; font-variant-numeric: tabular-nums; } .bk-time b { font-size: 17px; } .bk-time small { color: var(--muted); font-size: 12px; }
.bk-main { flex: 1; min-width: 0; font-size: 14px; } .bk-main .sm { font-size: 13px; }
.bk-side { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; }
.pill-s.done { background: var(--line); }
.empty-box { padding: 28px; text-align: center; border: 1px dashed var(--line); border-radius: 12px; background: var(--panel); }
@media (max-width: 760px) { .bk-kpi { grid-template-columns: repeat(2, 1fr); } .pay-list { grid-template-columns: 1fr; } }
#view-booking > .row select, #payFilter { width: auto; min-width: 140px; flex: none; }
#view-booking > .row > .row { flex-wrap: wrap; justify-content: flex-end; }
/* Galeri foto */
.gal-drop { margin: 14px 0 6px; padding: 18px; border: 2px dashed var(--line); border-radius: 14px; display: flex; flex-direction: column; align-items: center; gap: 2px; cursor: pointer; background: var(--panel); text-align: center; }
.gal-drop.on, .gal-drop:hover { border-color: var(--brand); background: var(--brand-soft); }
.gal-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 12px; }
.gal-card { display: flex; flex-direction: column; border-radius: 12px; overflow: hidden; background: var(--panel); border: 1px solid var(--line); cursor: pointer; text-align: left; padding: 0; font: inherit; color: inherit; }
.gal-card:hover { border-color: var(--brand); box-shadow: 0 4px 14px rgba(0,0,0,.08); }
.gal-img { position: relative; aspect-ratio: 1; background: var(--bg); } .gal-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.gal-ai { position: absolute; top: 6px; right: 6px; font-size: 10px; font-weight: 800; padding: 2px 6px; border-radius: 6px; background: var(--brand); color: #fff; } .gal-ai.off { background: #666; }
.gal-meta { padding: 8px 10px 10px; display: flex; flex-direction: column; gap: 3px; font-size: 13px; min-width: 0; } .gal-meta b { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .gal-meta small { font-size: 11.5px; }
.gal-tags { display: flex; flex-wrap: wrap; gap: 3px; font-size: 11px; } .gal-tags span:not(.muted) { background: var(--brand-soft); padding: 1px 6px; border-radius: 99px; }
.gal-prev { width: 100%; max-height: 260px; object-fit: contain; border-radius: 10px; background: var(--bg); }
.gal-grid.pick { grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); max-height: 46vh; overflow: auto; padding: 2px; }
.attach-btn { font-size: 18px; padding: 4px 10px; flex: none; }
@media (max-width: 760px) { .gal-grid { grid-template-columns: repeat(2, 1fr); } }
/* Saat AI perlu admin */
.ho-box { display: flex; flex-direction: column; gap: 8px; }
.ho-opts { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.ho-opt { flex-direction: row !important; align-items: flex-start; gap: 10px; padding: 10px 12px; border: 1.5px solid var(--line); border-radius: 10px; cursor: pointer; color: var(--ink); font-size: 13px; background: var(--panel); }
.ho-opt:has(input:checked) { border-color: var(--brand); background: var(--brand-soft); }
.ho-opt input { width: 18px !important; height: 18px; margin-top: 2px; flex: none; accent-color: var(--brand); }
.ho-opt > span { display: flex; flex-direction: column; gap: 3px; } .ho-opt small { color: var(--muted); font-size: 12px; line-height: 1.45; }
.ho-demo { margin-top: 4px; }
.hd-chat { display: flex; flex-direction: column; gap: 6px; margin-top: 8px; padding: 10px; border-radius: 10px; background: #ECE5DD; }
:root[data-theme="dark"] .hd-chat { background: #1b2420; }
.hd-m { max-width: 85%; padding: 6px 10px; border-radius: 9px; font-size: 13px; line-height: 1.4; box-shadow: 0 1px 1px rgba(0,0,0,.08); }
.hd-m.in { align-self: flex-start; background: var(--panel); } .hd-m.out { align-self: flex-end; background: #DCF8C6; color: #10201A; }
.hd-note { align-self: center; text-align: center; font-size: 12px; padding: 4px 10px; border-radius: 8px; background: rgba(255,255,255,.75); color: #33433B; }
.hd-note.ok { background: #DDEFE6; color: #0A4F38; } .hd-note.warn { background: #FFF4D6; color: #6B4A07; }
@media (max-width: 760px) { .ho-opts { grid-template-columns: 1fr; } }
.ho-demo-box summary { cursor: pointer; font-size: 13px; font-weight: 600; color: var(--brand); padding: 4px 0; user-select: none; }
.ho-demo-box[open] summary { margin-bottom: 4px; }
.min-input { max-width: none; flex: none; } .min-input > span { display: flex; align-items: center; gap: 8px; } .min-input input { width: 110px; } .min-input b { font-size: 13px; color: var(--ink); font-weight: 500; }
.min-input small { font-size: 12px; white-space: nowrap; }
/* Kutipan (reply) */
.msg-q { margin: -2px -4px 6px; padding: 5px 8px; border-left: 3px solid var(--brand); border-radius: 6px; background: rgba(0,0,0,.05); font-size: 12px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.msg-q.cust { border-left-color: #6a4bb5; }
.hd-q { margin: -1px -3px 5px; padding: 4px 7px; border-left: 3px solid #6a4bb5; border-radius: 5px; background: rgba(0,0,0,.06); font-size: 11.5px; color: #4A5951; }