:root{--bg:#07090f;--bg2:#0d111b;--panel:rgba(255,255,255,.035);--line:rgba(255,255,255,.08);--text:#e9ecf5;--muted:#8a92a8;
--a1:#6366f1;--a2:#22d3ee;--green:#22c55e;--red:#f43f5e;--amber:#f59e0b;--r:16px;
--grad:linear-gradient(135deg,var(--a1),var(--a2))}
*{box-sizing:border-box;margin:0}
body{font-family:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;background:var(--bg);color:var(--text);font-size:14px;line-height:1.5;
background-image:radial-gradient(900px 500px at 85% -10%,rgba(99,102,241,.18),transparent),radial-gradient(700px 400px at -5% 110%,rgba(34,211,238,.10),transparent);background-attachment:fixed}
a{color:inherit;text-decoration:none}
.shell{display:grid;grid-template-columns:256px 1fr;min-height:100vh}
.sidebar{position:sticky;top:0;height:100vh;padding:22px 16px;border-right:1px solid var(--line);background:rgba(10,13,22,.7);backdrop-filter:blur(18px);display:flex;flex-direction:column;gap:6px;z-index:30}
.brand{display:flex;align-items:center;gap:10px;font-weight:700;font-size:18px;letter-spacing:-.02em;padding:4px 10px 22px}
.logo{width:34px;height:34px;border-radius:10px;background:var(--grad);display:grid;place-items:center;box-shadow:0 8px 24px rgba(99,102,241,.45);font-size:16px}
.nav a{display:flex;align-items:center;gap:12px;padding:11px 12px;border-radius:12px;color:var(--muted);font-weight:500;transition:.2s;margin-bottom:2px}
.nav a svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.nav a:hover{background:var(--panel);color:var(--text)}
.nav a.on{background:linear-gradient(135deg,rgba(99,102,241,.22),rgba(34,211,238,.10));color:#fff;box-shadow:inset 0 0 0 1px rgba(99,102,241,.35)}
.foot{margin-top:auto;border-top:1px solid var(--line);padding-top:14px;display:flex;align-items:center;gap:10px}
.avatar{width:36px;height:36px;border-radius:50%;background:var(--grad);display:grid;place-items:center;font-weight:700;flex:none}
.foot .who{min-width:0;flex:1}.foot b{display:block;font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.foot small{color:var(--muted);font-size:11px}
.icon-btn{background:none;border:1px solid var(--line);color:var(--muted);border-radius:10px;width:34px;height:34px;cursor:pointer;display:grid;place-items:center}
.icon-btn:hover{color:#fff;border-color:var(--red)}
.icon-btn svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.main{padding:28px 34px 60px;min-width:0}
.topbar{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:26px;flex-wrap:wrap}
.topbar h1{font-size:26px;letter-spacing:-.03em;font-weight:700}.topbar p{color:var(--muted);margin-top:2px}
.burger{display:none;background:var(--panel);border:1px solid var(--line);color:var(--text);border-radius:10px;width:40px;height:40px;font-size:18px;cursor:pointer}
.card{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);padding:20px;backdrop-filter:blur(10px)}
.card h3{font-size:14px;font-weight:600;margin-bottom:14px;display:flex;justify-content:space-between;align-items:center}
.card h3 small{color:var(--muted);font-weight:400}
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-bottom:16px}
.stat{position:relative;overflow:hidden}
.stat::after{content:"";position:absolute;right:-30px;top:-30px;width:110px;height:110px;border-radius:50%;background:var(--grad);opacity:.10;filter:blur(6px)}
.stat span{color:var(--muted);font-size:12px;text-transform:uppercase;letter-spacing:.08em}
.stat b{display:block;font-size:32px;letter-spacing:-.03em;margin-top:6px}
.stat small{color:var(--muted)}
.grid2{display:grid;grid-template-columns:1fr 1.5fr;gap:16px;margin-bottom:16px}
.donut-wrap{display:flex;align-items:center;gap:26px;flex-wrap:wrap}
.donut{width:150px;height:150px;border-radius:50%;position:relative;flex:none}
.donut::after{content:attr(data-c);position:absolute;inset:18px;border-radius:50%;background:#0c101a;display:grid;place-items:center;font-size:24px;font-weight:700}
.legend div{display:flex;align-items:center;gap:8px;margin:7px 0;color:var(--muted)}.legend i{width:10px;height:10px;border-radius:3px}.legend b{color:var(--text);margin-left:auto;padding-left:18px}
.badge{display:inline-flex;align-items:center;gap:6px;padding:3px 10px;border-radius:99px;font-size:12px;font-weight:600;border:1px solid transparent;white-space:nowrap}
.badge.positive{background:rgba(34,197,94,.12);color:#4ade80;border-color:rgba(34,197,94,.3)}
.badge.negative{background:rgba(244,63,94,.12);color:#fb7185;border-color:rgba(244,63,94,.3)}
.badge.neutral{background:rgba(148,163,184,.12);color:#cbd5e1;border-color:rgba(148,163,184,.25)}
.badge.muted{background:var(--panel);color:var(--muted);border-color:var(--line)}
.badge.sent{background:rgba(34,211,238,.1);color:#67e8f9;border-color:rgba(34,211,238,.3)}
.badge.pending{background:rgba(245,158,11,.12);color:#fbbf24;border-color:rgba(245,158,11,.3)}
.badge.skipped{background:var(--panel);color:var(--muted);border-color:var(--line)}
.badge.id{background:rgba(99,102,241,.14);color:#a5b4fc;border-color:rgba(99,102,241,.35)}
.badge.global{background:rgba(34,211,238,.1);color:#67e8f9;border-color:rgba(34,211,238,.3)}
.up{color:#4ade80}.down{color:#fb7185}
.feed .item{display:flex;gap:14px;padding:14px 0;border-bottom:1px solid var(--line)}
.feed .item:last-child{border:0}
.dot{width:10px;height:10px;border-radius:50%;margin-top:6px;flex:none}
.dot.positive{background:var(--green);box-shadow:0 0 12px var(--green)}.dot.negative{background:var(--red);box-shadow:0 0 12px var(--red)}.dot.neutral,.dot.none{background:#64748b}
.item h4{font-size:14px;font-weight:600;line-height:1.4}.item h4 a:hover{color:var(--a2)}
.meta{color:var(--muted);font-size:12px;margin-top:3px;display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.item p{color:#b6bdd0;margin-top:6px;font-size:13px}
.table-wrap{overflow-x:auto}
table{width:100%;border-collapse:collapse}
th{font-size:11px;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);text-align:left;padding:10px 12px;font-weight:600}
td{padding:14px 12px;border-top:1px solid var(--line);vertical-align:middle}
tbody tr:hover{background:rgba(255,255,255,.02)}
.sym{font-weight:700;letter-spacing:.01em}.sub{color:var(--muted);font-size:12px}
.clamp{max-width:320px;color:#b6bdd0;font-size:12.5px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.btn{display:inline-flex;align-items:center;gap:8px;border:1px solid var(--line);background:var(--panel);color:var(--text);padding:9px 14px;border-radius:11px;cursor:pointer;font:inherit;font-weight:500;transition:.2s}
.btn:hover{border-color:rgba(255,255,255,.22);background:rgba(255,255,255,.07)}
.btn.primary{background:var(--grad);border:0;color:#fff;font-weight:600;box-shadow:0 8px 24px rgba(99,102,241,.35)}
.btn.primary:hover{filter:brightness(1.1);transform:translateY(-1px)}
.btn.sm{padding:6px 10px;font-size:12.5px;border-radius:9px}.btn.danger:hover{border-color:var(--red);color:#fb7185}
.actions{display:flex;gap:6px;justify-content:flex-end;flex-wrap:wrap}.actions form{display:inline}
.switch{position:relative;width:38px;height:22px;background:#2a3042;border-radius:99px;border:0;cursor:pointer;transition:.2s}
.switch::after{content:"";position:absolute;top:3px;left:3px;width:16px;height:16px;border-radius:50%;background:#fff;transition:.2s}
.switch.on{background:var(--green)}.switch.on::after{left:19px}
input,select{width:100%;background:rgba(255,255,255,.04);border:1px solid var(--line);border-radius:11px;padding:11px 13px;color:var(--text);font:inherit;outline:none;transition:.2s}
select option{background:#111522}
input:focus,select:focus{border-color:var(--a1);box-shadow:0 0 0 3px rgba(99,102,241,.2)}
label{display:block;font-size:12px;color:var(--muted);margin:14px 0 6px;font-weight:500}
.filters{display:grid;grid-template-columns:1fr 200px 200px auto;gap:10px;margin-bottom:16px}
dialog{position:fixed;inset:0;margin:auto;max-height:92vh;overflow-y:auto;border:1px solid var(--line);background:#0e1220;color:var(--text);border-radius:20px;padding:0;width:min(460px,92vw);box-shadow:0 30px 80px rgba(0,0,0,.6)}
dialog::backdrop{background:rgba(3,5,10,.7);backdrop-filter:blur(4px)}
.modal{padding:26px}.modal h2{font-size:20px;letter-spacing:-.02em}.modal p.s{color:var(--muted);margin-top:4px}
.modal .row{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.modal .foot2{display:flex;justify-content:flex-end;gap:10px;margin-top:22px}
.check{display:flex;align-items:center;gap:10px;margin-top:16px}.check input{width:auto}.check label{margin:0;color:var(--text)}
.toast{padding:12px 16px;border-radius:12px;margin-bottom:18px;border:1px solid}
.toast.ok{background:rgba(34,197,94,.1);border-color:rgba(34,197,94,.3);color:#86efac}
.toast.err{background:rgba(244,63,94,.1);border-color:rgba(244,63,94,.3);color:#fda4af}
.empty{text-align:center;color:var(--muted);padding:40px 10px}
.pager{display:flex;gap:6px;justify-content:center;margin-top:20px;flex-wrap:wrap}
.pager a,.pager span{padding:7px 12px;border-radius:9px;border:1px solid var(--line);color:var(--muted)}
.pager .active span,.pager span[aria-current]{background:var(--grad);color:#fff;border:0}
.pager svg{width:14px;height:14px}
/* login */
.login{min-height:100vh;display:grid;grid-template-columns:1.1fr 1fr}
.hero{padding:60px;display:flex;flex-direction:column;justify-content:space-between;background:radial-gradient(700px 500px at 20% 20%,rgba(99,102,241,.35),transparent),radial-gradient(600px 400px at 90% 90%,rgba(34,211,238,.25),transparent),#080a12;border-right:1px solid var(--line)}
.hero h2{font-size:44px;letter-spacing:-.04em;line-height:1.1;max-width:480px}
.hero h2 span{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.hero p{color:var(--muted);max-width:440px;margin-top:16px;font-size:15px}
.chips{display:flex;gap:10px;flex-wrap:wrap}
.pane{display:grid;place-items:center;padding:30px}
.box{width:min(400px,100%)}.box h1{font-size:28px;letter-spacing:-.03em}.box>p{color:var(--muted);margin:6px 0 10px}
.box .btn{width:100%;justify-content:center;margin-top:22px;padding:13px}
.err-t{color:#fb7185;font-size:12.5px;margin-top:6px}
@media(max-width:1000px){.stats{grid-template-columns:repeat(2,1fr)}.grid2{grid-template-columns:1fr}.filters{grid-template-columns:1fr 1fr}.login{grid-template-columns:1fr}.hero{display:none}}
@media(max-width:860px){.shell{grid-template-columns:1fr}.sidebar{position:fixed;inset:0 auto 0 0;width:260px;transform:translateX(-100%);transition:.25s}.sidebar.open{transform:none}.burger{display:block}.main{padding:20px 16px 50px}}
.ihsg-head{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;flex-wrap:wrap;margin-bottom:14px}
.ihsg-price{font-size:34px;font-weight:700;letter-spacing:-.03em;line-height:1.1}
.ihsg-meta{display:flex;gap:18px;color:var(--muted);font-size:12px;margin-top:8px;flex-wrap:wrap;align-items:center}
.ihsg-meta b{color:var(--text)}
.tabs{display:flex;gap:4px;background:rgba(255,255,255,.04);border:1px solid var(--line);border-radius:12px;padding:3px}
.tabs button{border:0;background:none;color:var(--muted);padding:6px 12px;border-radius:9px;cursor:pointer;font:inherit;font-size:12.5px;font-weight:600}
.tabs button.on{background:var(--grad);color:#fff}
.chart-box{position:relative;height:300px}
.live{display:inline-block;width:8px;height:8px;border-radius:50%;background:#64748b;margin-right:6px}
.live.on{background:var(--green);animation:pulse 1.8s infinite}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(34,197,94,.7)}70%{box-shadow:0 0 0 8px rgba(34,197,94,0)}100%{box-shadow:0 0 0 0 rgba(34,197,94,0)}}
.grid-eq{display:grid;grid-template-columns:1.3fr 1fr;gap:16px}
.perf{display:flex;gap:10px;flex-wrap:wrap;margin-top:16px;padding-top:16px;border-top:1px solid var(--line)}
.chip{background:rgba(255,255,255,.04);border:1px solid var(--line);border-radius:12px;padding:8px 14px;min-width:84px}
.chip span{display:block;color:var(--muted);font-size:11px;text-transform:uppercase;letter-spacing:.08em}
.chip b{font-size:15px}
.kv{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px}
.kv>div{background:rgba(255,255,255,.03);border:1px solid var(--line);border-radius:12px;padding:12px 14px}
.kv span{display:block;color:var(--muted);font-size:11.5px;margin-bottom:3px}
.kv b{font-size:16px;letter-spacing:-.01em}
.flow-tiles{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:14px}
.flow-tiles>div{background:rgba(255,255,255,.03);border:1px solid var(--line);border-radius:12px;padding:12px 14px}
.flow-tiles span{display:block;color:var(--muted);font-size:11.5px}
.flow-tiles b{font-size:17px}
.flow-bar{height:10px;border-radius:99px;background:var(--red);overflow:hidden}
.flow-bar i{display:block;height:100%;width:50%;background:var(--green);transition:width .4s}
@media(max-width:1000px){.grid-eq{grid-template-columns:1fr}}
/* =========================================================
   Premium Pagination — untuk markup:
   <div class="pager"><nav><ul class="pagination"> ... </ul></nav></div>
   ========================================================= */

.pager {
  --pg-bg: #ffffff;
  --pg-surface: #f6f4ef;
  --pg-border: #e4e0d6;
  --pg-text: #1c2333;
  --pg-muted: #a39f94;
  --pg-accent-from: #1c2b4a;
  --pg-accent-to: #2f4675;
  --pg-accent-text: #f3e3b3;
  --pg-gold: #c9a24b;
  --pg-ring: rgba(201, 162, 75, 0.45);
  --pg-shadow: 0 1px 2px rgba(28, 35, 51, 0.06), 0 6px 18px -8px rgba(28, 35, 51, 0.18);
  --pg-shadow-hover: 0 2px 4px rgba(28, 35, 51, 0.08), 0 12px 24px -10px rgba(28, 35, 51, 0.28);

  display: flex;
  justify-content: center;
  padding: 2.5rem 1rem;
}

@media (prefers-color-scheme: dark) {
  .pager {
    --pg-bg: #121827;
    --pg-surface: #1a2236;
    --pg-border: #2a3450;
    --pg-text: #e8e6df;
    --pg-muted: #5d6680;
    --pg-accent-from: #e4c477;
    --pg-accent-to: #c9a24b;
    --pg-accent-text: #121827;
    --pg-gold: #e4c477;
    --pg-ring: rgba(228, 196, 119, 0.5);
    --pg-shadow: 0 1px 2px rgba(0, 0, 0, 0.3), 0 8px 20px -10px rgba(0, 0, 0, 0.6);
    --pg-shadow-hover: 0 2px 4px rgba(0, 0, 0, 0.35), 0 14px 28px -12px rgba(0, 0, 0, 0.75);
  }
}

.pager nav {
  max-width: 100%;
}

.pager .pagination {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.375rem;
  margin: 0;
  padding: 0.375rem;
  list-style: none;
  background: var(--pg-surface);
  border: 1px solid var(--pg-border);
  border-radius: 999px;
  box-shadow: var(--pg-shadow);
}

.pager .pagination li {
  margin: 0;
  padding: 0;
}

/* Tombol dasar (link & span) */
.pager .pagination li > a,
.pager .pagination li > span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2.75rem;
  height: 2.75rem;
  padding: 0 1.25rem;
  font: 600 0.9rem/1 "Inter", "Segoe UI", system-ui, -apple-system, Roboto, sans-serif;
  letter-spacing: 0.01em;
  color: var(--pg-text);
  text-decoration: none;
  white-space: nowrap;
  background: var(--pg-bg);
  border: 1px solid var(--pg-border);
  border-radius: 999px;
  cursor: pointer;
  transition:
    transform 0.2s ease,
    box-shadow 0.2s ease,
    background 0.2s ease,
    color 0.2s ease,
    border-color 0.2s ease;
}

/* Hover */
.pager .pagination li:not(.disabled):not(.active) > a:hover {
  color: var(--pg-gold);
  border-color: var(--pg-gold);
  transform: translateY(-2px);
  box-shadow: var(--pg-shadow-hover);
}

/* Klik */
.pager .pagination li:not(.disabled):not(.active) > a:active {
  transform: translateY(0) scale(0.97);
  box-shadow: var(--pg-shadow);
}

/* Fokus keyboard */
.pager .pagination li > a:focus-visible {
  outline: none;
  border-color: var(--pg-gold);
  box-shadow: 0 0 0 4px var(--pg-ring);
}

/* Halaman aktif */
.pager .pagination li.active > span,
.pager .pagination li.active > a {
  color: var(--pg-accent-text);
  background: linear-gradient(135deg, var(--pg-accent-from), var(--pg-accent-to));
  border-color: transparent;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.18),
    0 8px 18px -8px rgba(28, 43, 74, 0.6);
  cursor: default;
}

/* Disabled */
.pager .pagination li.disabled > span {
  color: var(--pg-muted);
  background: transparent;
  border-style: dashed;
  box-shadow: none;
  cursor: not-allowed;
  opacity: 0.7;
}

/* Titik-titik (…) */
.pager .pagination li.disabled > span:only-child:not(:empty) {
  min-width: 2.75rem;
}

/* Responsif */
@media (max-width: 480px) {
  .pager {
    padding: 1.75rem 0.75rem;
  }

  .pager .pagination {
    gap: 0.25rem;
    padding: 0.3rem;
  }

  .pager .pagination li > a,
  .pager .pagination li > span {
    min-width: 2.4rem;
    height: 2.4rem;
    padding: 0 0.9rem;
    font-size: 0.82rem;
  }
}

/* Hormati preferensi reduced motion */
@media (prefers-reduced-motion: reduce) {
  .pager .pagination li > a,
  .pager .pagination li > span {
    transition: none;
  }
  .pager .pagination li:not(.disabled):not(.active) > a:hover {
    transform: none;
  }
}