:root{
  --bg:#0d1117; --panel:#161b22; --panel-2:#1c232c; --line:#2a323d;
  --text:#e6edf3; --muted:#8b98a5; --accent:#3fb950; --accent-2:#2f81f7;
  --danger:#f85149; --warn:#d29922; --radius:12px;
}
*{box-sizing:border-box}
body{
  margin:0; background:var(--bg); color:var(--text);
  font:15px/1.55 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
}
a{color:var(--accent-2); text-decoration:none}
a:hover{text-decoration:underline}
code,kbd{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; font-size:13px}

.nav{background:rgba(13,17,23,.92); border-bottom:1px solid var(--line); position:sticky; top:0; z-index:20; backdrop-filter:blur(8px)}
.nav-inner{max-width:1080px; margin:0 auto; padding:10px 18px; display:flex; align-items:center; justify-content:space-between; gap:14px; flex-wrap:wrap}
.brand{font-weight:700; letter-spacing:.2px; color:var(--text); font-size:16.5px; display:flex; align-items:center; gap:9px}
.brand:hover{text-decoration:none}
.brand-mark{width:28px; height:28px; border-radius:9px; display:grid; place-items:center;
  background:linear-gradient(135deg,var(--accent),var(--accent-2)); color:#04160b}
.brand-mark .i{width:17px; height:17px; stroke-width:2.4}
.nav-links{display:flex; align-items:center; gap:4px; flex-wrap:wrap}
.nav-links a{color:var(--muted); font-size:13.5px; font-weight:500; display:inline-flex;
  align-items:center; gap:6px; padding:7px 10px; border-radius:8px; border:1px solid transparent}
.nav-links a:hover{color:var(--text); background:var(--panel-2); text-decoration:none}
.nav-links a.on{color:var(--text); background:var(--panel-2); border-color:var(--line)}
.nav-links a.on .i{color:var(--accent)}
.nav-sep{width:1px; height:22px; background:var(--line); margin:0 6px}
.nav-user{display:inline-flex; align-items:center; gap:7px; color:var(--muted); font-size:13px; max-width:190px}
.nav-user-mail{overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.avatar{width:24px; height:24px; border-radius:999px; display:grid; place-items:center; font-size:12px;
  font-weight:700; color:#04160b; background:linear-gradient(135deg,var(--accent),var(--accent-2)); flex:0 0 auto}
@media(max-width:720px){
  .nav-links a span{display:none}
  .nav-links a{padding:8px}
  .nav-links a .i{width:18px; height:18px}
  .nav-user-mail{display:none}
}
.inline{display:inline}
.linklike{background:none; border:0; color:var(--muted); font:inherit; font-size:14px; cursor:pointer; padding:0}
.linklike:hover{color:var(--danger)}

.wrap{max-width:1080px; margin:0 auto; padding:26px 18px 60px}
.foot{max-width:1080px; margin:0 auto; padding:22px 18px 40px; color:var(--muted); font-size:12.5px; border-top:1px solid var(--line)}

h1{font-size:24px; margin:0 0 6px}
h2{font-size:17px; margin:0 0 12px}
.sub{color:var(--muted); margin:0 0 22px}
.page-head{display:flex; justify-content:space-between; align-items:flex-start; gap:14px; flex-wrap:wrap; margin-bottom:18px}

.card{background:var(--panel); border:1px solid var(--line); border-radius:var(--radius); padding:18px; margin-bottom:18px}
.card.tight{padding:14px}
.grid{display:grid; gap:14px}
.grid.k2{grid-template-columns:repeat(2,minmax(0,1fr))}
.grid.k4{grid-template-columns:repeat(4,minmax(0,1fr))}
@media(max-width:760px){.grid.k2,.grid.k4{grid-template-columns:1fr}}

.stat{background:var(--panel-2); border:1px solid var(--line); border-radius:10px; padding:14px 16px}
.stat .k{color:var(--muted); font-size:12px; text-transform:uppercase; letter-spacing:.6px}
.stat .v{font-size:26px; font-weight:700; margin-top:4px}

label{display:block; font-size:13px; color:var(--muted); margin:14px 0 6px}
input[type=text],input[type=email],input[type=password],input[type=url],select{
  width:100%; padding:10px 12px; border-radius:9px; border:1px solid var(--line);
  background:#0b0f14; color:var(--text); font:inherit; font-size:14px;
}
input:focus,select:focus{outline:2px solid rgba(47,129,247,.45); outline-offset:1px; border-color:var(--accent-2)}
.hint{color:var(--muted); font-size:12.5px; margin-top:6px}
.row{display:flex; gap:10px; align-items:flex-end; flex-wrap:wrap}
.row > .grow{flex:1 1 260px}

.btn{
  display:inline-block; background:var(--accent); color:#05130a; border:0; border-radius:9px;
  padding:10px 16px; font:inherit; font-weight:600; font-size:14px; cursor:pointer;
}
.btn:hover{filter:brightness(1.08); text-decoration:none}
.btn.secondary{background:var(--panel-2); color:var(--text); border:1px solid var(--line)}
.btn.danger{background:transparent; color:var(--danger); border:1px solid rgba(248,81,73,.45)}
.btn.sm{padding:6px 11px; font-size:13px}
.btn-row{display:flex; gap:8px; flex-wrap:wrap; margin-top:20px}

table{width:100%; border-collapse:collapse; font-size:14px}
th,td{text-align:left; padding:10px 8px; border-bottom:1px solid var(--line); vertical-align:middle}
th{color:var(--muted); font-size:12px; text-transform:uppercase; letter-spacing:.5px; font-weight:600}
tr:last-child td{border-bottom:0}
.table-scroll{overflow-x:auto}

.badge{display:inline-block; padding:2px 8px; border-radius:999px; font-size:11.5px; font-weight:600; border:1px solid var(--line); color:var(--muted)}
.badge.ok{color:var(--accent); border-color:rgba(63,185,80,.4); background:rgba(63,185,80,.09)}
.badge.off{color:var(--danger); border-color:rgba(248,81,73,.4); background:rgba(248,81,73,.08)}
.badge.wait{color:var(--warn); border-color:rgba(210,153,34,.4); background:rgba(210,153,34,.08)}
.badge.me{color:var(--accent-2); border-color:rgba(47,129,247,.4); background:rgba(47,129,247,.09)}

.flash{padding:11px 14px; border-radius:9px; margin-bottom:16px; font-size:14px; border:1px solid;
  display:flex; align-items:center; gap:9px}
.flash .i{flex:0 0 auto; width:17px; height:17px}
.flash.ok{background:rgba(63,185,80,.1); border-color:rgba(63,185,80,.35); color:#7ee787}
.flash.error{background:rgba(248,81,73,.1); border-color:rgba(248,81,73,.35); color:#ff9d97}

.copy{background:none; border:1px solid var(--line); color:var(--text); border-radius:7px; padding:4px 8px; font:inherit; font-size:12.5px; cursor:pointer; white-space:nowrap}
.copy:hover{border-color:var(--accent-2); color:var(--accent-2)}

.chart{display:flex; align-items:flex-end; gap:3px; height:150px; padding-top:8px}
.chart .bar{flex:1; min-height:2px; background:linear-gradient(180deg,var(--accent-2),#1f4f8f); border-radius:3px 3px 0 0; position:relative}
.chart .bar:hover{background:var(--accent)}
.chart .bar span{display:none; position:absolute; bottom:100%; left:50%; transform:translateX(-50%); background:#000; color:#fff; font-size:11px; padding:2px 6px; border-radius:5px; white-space:nowrap; margin-bottom:4px}
.chart .bar:hover span{display:block}
.chart .bar{transition:background .15s}

/* ---------- halaman masuk ---------- */
.auth{max-width:390px; margin:0 auto; padding:13vh 0 40px; text-align:center}
.wrap:has(.auth){max-width:430px}
@media(max-height:620px){.auth{padding-top:26px}}
.auth-brand{display:inline-flex; align-items:center; gap:9px; font-weight:700; font-size:20px; margin-bottom:18px}
.auth-brand .dot{width:12px; height:12px; border-radius:4px; background:linear-gradient(135deg,var(--accent),var(--accent-2)); display:inline-block}
.auth h1{font-size:26px; margin:0 0 18px}
.auth-card{text-align:left; padding:22px}
.auth-card label:first-of-type{margin-top:0}
.btn-block{width:100%; margin-top:20px; padding:12px 16px; font-size:15px}

/* ---------- judul kartu ---------- */
.card-head{display:flex; align-items:baseline; justify-content:space-between; gap:12px; flex-wrap:wrap; margin-bottom:12px}
.card-head h2{margin:0}

/* ---------- tren ---------- */
.stat .v{display:flex; align-items:baseline; gap:9px; flex-wrap:wrap}
.trend{font-size:12.5px; font-weight:700; padding:2px 7px; border-radius:999px}
.trend.up{color:var(--accent); background:rgba(63,185,80,.12)}
.trend.down{color:var(--danger); background:rgba(248,81,73,.12)}

/* ---------- daftar link ---------- */
.link-list{display:flex; flex-direction:column}
.link-row{display:flex; align-items:center; gap:16px; padding:13px 0; border-bottom:1px solid var(--line); flex-wrap:wrap}
.link-row:last-child{border-bottom:0}
.link-main{flex:1 1 320px; min-width:0}
.link-short{display:flex; align-items:center; gap:8px; font-size:15px; font-weight:600; flex-wrap:wrap}
.link-short a{color:var(--text)}
.link-short a:hover{color:var(--accent-2); text-decoration:none}
.link-target{color:var(--muted); font-size:12.5px; margin-top:3px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.link-target b{color:#b9c4d0; font-weight:600}
.link-stats{display:flex; gap:22px}
.link-stats div{display:flex; flex-direction:column; align-items:flex-end; line-height:1.15}
.link-stats span{font-size:17px; font-weight:700}
.link-stats small{color:var(--muted); font-size:11px; text-transform:uppercase; letter-spacing:.5px}
.link-actions{display:flex; gap:7px; flex-wrap:wrap}
@media(max-width:640px){.link-stats{width:100%; justify-content:flex-start}.link-stats div{align-items:flex-start}}

/* ---------- tombol salin ---------- */
.copy.copied{color:var(--accent); border-color:rgba(63,185,80,.6); background:rgba(63,185,80,.1)}
.copy-modal{position:fixed; inset:0; background:rgba(0,0,0,.62); display:flex; align-items:center; justify-content:center; padding:20px; z-index:50}
.copy-modal-inner{background:var(--panel); border:1px solid var(--line); border-radius:var(--radius); padding:18px; max-width:460px; width:100%}
.copy-modal-inner p{margin:0 0 10px; font-size:13.5px}
.copy-modal-inner input{width:100%; padding:10px 12px; border-radius:9px; border:1px solid var(--line); background:#0b0f14; color:var(--text); font-family:ui-monospace,Menlo,Consolas,monospace; font-size:12.5px}
.copy-modal-inner .btn{margin-top:12px}
.axis{display:flex; justify-content:space-between; color:var(--muted); font-size:11.5px; margin-top:6px}

.list{margin:0; padding:0; list-style:none}
.list li{display:flex; justify-content:space-between; gap:10px; padding:7px 0; border-bottom:1px dashed var(--line); font-size:13.5px}
.list li:last-child{border-bottom:0}
.list li b{font-weight:600}
.list .n{color:var(--muted)}

.empty{text-align:center; color:var(--muted); padding:34px 10px}
.hero{padding:34px 0 8px; max-width:640px}
.hero h1{font-size:32px; line-height:1.2}
.mono{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; font-size:13px; word-break:break-all}
.muted{color:var(--muted)}
.right{text-align:right}
.nowrap{white-space:nowrap}
.token-box{background:#0b0f14; border:1px solid var(--line); border-radius:9px; padding:10px 12px; font-family:ui-monospace,Menlo,Consolas,monospace; font-size:12.5px; word-break:break-all}
pre{background:#0b0f14; border:1px solid var(--line); border-radius:9px; padding:12px; overflow-x:auto; font-size:12.5px}

/* =====================================================================
   Komponen UI v2 — ikon, dashboard, menu link, tabel, subdomain
   ===================================================================== */

/* ---------- ikon (inline SVG sprite) ---------- */
.i{width:16px; height:16px; flex:0 0 auto; fill:none; stroke:currentColor;
  stroke-width:2; stroke-linecap:round; stroke-linejoin:round; vertical-align:-3px}
.icon-sprite{display:none}
.small{font-size:12.5px}
a.small{color:var(--muted)}
a.small:hover{color:var(--accent-2); text-decoration:none}

/* tombol bertaut ikon di dalam .btn */
.btn .i{width:16px; height:16px; margin-right:6px; vertical-align:-3px}
.btn.btn-sm{padding:6px 11px; font-size:13px}
.badge{display:inline-flex; align-items:center; gap:4px}
.badge .i{width:12px; height:12px; stroke-width:2.6}

/* ---------- aksi di kepala halaman ---------- */
.head-actions{display:flex; gap:8px; flex-wrap:wrap}

/* ---------- kartu statistik ---------- */
.stat-top{display:flex; align-items:center; gap:8px}
.stat-ico{width:26px; height:26px; border-radius:8px; display:grid; place-items:center;
  background:rgba(47,129,247,.12); color:var(--accent-2); flex:0 0 auto}
.stat-ico .i{width:15px; height:15px; vertical-align:0}
.stat-top .k{letter-spacing:.5px}
.stat .v{margin-top:8px}
.stat-foot{color:var(--muted); font-size:12px; margin-top:4px}
.stat:nth-child(2) .stat-ico{background:rgba(63,185,80,.13); color:var(--accent)}
.stat:nth-child(3) .stat-ico{background:rgba(210,153,34,.14); color:var(--warn)}
.stat:nth-child(4) .stat-ico{background:rgba(163,113,247,.15); color:#a371f7}

/* ---------- grafik batang ---------- */
.chart .bar.peak{background:linear-gradient(180deg,var(--accent),#1f6b32)}

/* ---------- daftar peringkat link ---------- */
.rank-list{display:flex; flex-direction:column; gap:2px}
.rank-row{display:flex; align-items:center; gap:11px; padding:9px 0; border-bottom:1px dashed var(--line)}
.rank-row:last-child{border-bottom:0}
.rank-n{width:22px; height:22px; border-radius:7px; display:grid; place-items:center;
  font-size:11.5px; font-weight:700; color:var(--muted); background:var(--panel-2); flex:0 0 auto}
.rank-row:nth-child(1) .rank-n{background:rgba(210,153,34,.16); color:var(--warn)}
.rank-main{flex:1 1 auto; min-width:0}
.rank-link{display:flex; align-items:center; gap:6px; font-size:13.5px; font-weight:600}
.rank-link a{color:var(--text); overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.rank-link a:hover{color:var(--accent-2); text-decoration:none}
.meter{height:5px; border-radius:999px; background:var(--panel-2); margin-top:6px; overflow:hidden}
.meter i{display:block; height:100%; border-radius:999px;
  background:linear-gradient(90deg,var(--accent-2),var(--accent))}
.rank-clicks{font-size:14px; font-weight:700; text-align:right; min-width:52px; flex:0 0 auto}
.rank-clicks small{display:block; color:var(--muted); font-size:10.5px; font-weight:500;
  text-transform:uppercase; letter-spacing:.4px}

/* ---------- feed aktivitas ---------- */
.feed{list-style:none; margin:0; padding:0}
.feed li{display:flex; align-items:flex-start; gap:10px; padding:9px 0; border-bottom:1px dashed var(--line)}
.feed li:last-child{border-bottom:0}
.feed-ico{width:26px; height:26px; border-radius:8px; display:grid; place-items:center;
  background:var(--panel-2); color:var(--muted); flex:0 0 auto}
.feed-ico .i{width:14px; height:14px; vertical-align:0}
.feed-main{flex:1 1 auto; min-width:0; font-size:13.5px}
.feed-main b{font-weight:600}
.feed-time{color:var(--muted); font-size:11.5px; flex:0 0 auto}

/* ---------- ajakan (empty state besar) ---------- */
.card.cta{display:flex; align-items:flex-start; gap:16px; margin-top:18px;
  background:linear-gradient(135deg,rgba(47,129,247,.08),rgba(63,185,80,.06))}
.cta-ico{width:40px; height:40px; border-radius:12px; display:grid; place-items:center; flex:0 0 auto;
  background:linear-gradient(135deg,var(--accent),var(--accent-2)); color:#04160b}
.cta-ico .i{width:22px; height:22px; vertical-align:0; stroke-width:2.2}

/* ---------- toolbar pencarian + filter ---------- */
.toolbar{display:flex; align-items:center; gap:12px; flex-wrap:wrap}
.search{position:relative; flex:1 1 260px; display:flex; align-items:center}
.search > .i{position:absolute; left:11px; width:15px; height:15px; color:var(--muted); pointer-events:none}
.search input[type=search]{width:100%; padding:9px 12px 9px 33px; border-radius:9px;
  border:1px solid var(--line); background:#0b0f14; color:var(--text); font:inherit; font-size:13.5px}
.search input[type=search]:focus{outline:2px solid rgba(47,129,247,.4); outline-offset:1px;
  border-color:var(--accent-2)}
.chips{display:flex; gap:6px; flex-wrap:wrap}
.chip{padding:6px 11px; border-radius:999px; border:1px solid var(--line); color:var(--muted);
  font-size:12.5px; font-weight:600; background:var(--panel-2)}
.chip:hover{color:var(--text); text-decoration:none; border-color:#3a4450}
.chip.on{color:#04160b; background:var(--accent); border-color:var(--accent)}

/* ---------- tabel data ---------- */
.tbl{font-size:13.5px}
.tbl th{padding:8px 10px; background:var(--panel-2); border-bottom:1px solid var(--line)}
.tbl th:first-child{border-radius:8px 0 0 8px}
.tbl th:last-child{border-radius:0 8px 8px 0}
.tbl td{padding:11px 10px}
.tbl tbody tr:hover td{background:rgba(255,255,255,.022)}
.cell-link{min-width:210px}
.cell-link .link-short{font-size:14px}
.cell-link .link-target{display:flex; align-items:center; gap:5px; margin-top:4px}
.cell-link .link-target .i{width:12px; height:12px; flex:0 0 auto; opacity:.8}
.cell-link .link-target span{overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.tag{display:inline-block; max-width:180px; overflow:hidden; text-overflow:ellipsis;
  white-space:nowrap; vertical-align:middle; padding:1px 7px; border-radius:6px;
  font-size:11.5px; font-weight:500; color:var(--muted);
  background:var(--panel-2); border:1px solid var(--line)}
.num{font-size:15px; font-weight:700}
.row-actions{display:inline-flex; align-items:center; gap:4px; justify-content:flex-end}

/* ---------- tombol ikon (aksi baris & nav) ---------- */
.icon-btn{width:30px; height:30px; padding:0; display:inline-grid; place-items:center;
  border-radius:8px; border:1px solid var(--line); background:var(--panel-2);
  color:var(--muted); cursor:pointer; line-height:0}
.icon-btn:hover{color:var(--text); border-color:#3a4450; background:#232b35; text-decoration:none}
.icon-btn .i{vertical-align:0; width:15px; height:15px}
.icon-btn.danger:hover{color:var(--danger); border-color:rgba(248,81,73,.5);
  background:rgba(248,81,73,.1)}
.icon-btn.copied{color:var(--accent); border-color:rgba(63,185,80,.6);
  background:rgba(63,185,80,.12)}
.linklike.icon-btn{border:0; background:transparent}
.linklike.icon-btn:hover{color:var(--danger); background:rgba(248,81,73,.1)}
.link-short .icon-btn{width:24px; height:24px}
.link-short .icon-btn .i{width:13px; height:13px}

/* ---------- tambah subdomain cepat ---------- */
.subdomain-add{display:flex; gap:10px; align-items:stretch; flex-wrap:wrap}
.sd-field{flex:1 1 300px; display:flex; align-items:center; border:1px solid var(--line);
  border-radius:9px; background:#0b0f14; overflow:hidden}
.sd-field:focus-within{border-color:var(--accent-2); box-shadow:0 0 0 2px rgba(47,129,247,.3)}
.sd-prefix{display:grid; place-items:center; padding:0 10px; color:var(--muted); flex:0 0 auto}
.sd-prefix .i{width:15px; height:15px; vertical-align:0}
.sd-field input{border:0; background:transparent; border-radius:0; padding:10px 0; flex:1 1 auto;
  min-width:0; outline:none}
.sd-field input:focus{outline:none; box-shadow:none}
.sd-suffix{padding:0 12px; color:var(--muted); font-size:13.5px; white-space:nowrap;
  border-left:1px solid var(--line); background:var(--panel-2); align-self:stretch;
  display:grid; align-items:center}
.subdomain-add .btn{flex:0 0 auto}

/* ---------- blok tambahan yang bisa dibuka ---------- */
details.more{margin-top:12px; border-top:1px dashed var(--line); padding-top:10px}
details.more > summary{cursor:pointer; color:var(--accent-2); font-size:13px; font-weight:600;
  list-style:none; display:inline-flex; align-items:center; gap:6px}
details.more > summary::-webkit-details-marker{display:none}
details.more > summary::before{content:"+"; font-weight:700; width:14px; text-align:center}
details.more[open] > summary::before{content:"–"}

/* ---------- empty state dengan ikon ---------- */
.empty .i{width:26px; height:26px; color:var(--muted); opacity:.65; vertical-align:0;
  display:block; margin:0 auto 8px}
.empty .btn{margin-top:14px}
.empty .btn .i{margin:0 6px 0 0; display:inline-block; opacity:1; width:15px; height:15px; vertical-align:-3px}

@media(max-width:760px){
  .grid.k4{grid-template-columns:repeat(2,minmax(0,1fr))}
  .grid.k2{grid-template-columns:1fr}
  .stat .v{font-size:23px}
  .card.cta{flex-direction:column}
}
@media(max-width:760px){
  /* di HP tabel link berubah jadi kartu bertumpuk, tidak perlu geser-geser */
  .tbl td.col-domain, .tbl th.col-domain{display:none}
  .tbl thead{display:none}
  .tbl, .tbl tbody{display:block}
  .tbl tr{display:flex; flex-wrap:wrap; align-items:center; gap:8px 10px;
    border:1px solid var(--line); border-radius:10px; padding:11px 12px; margin-bottom:10px;
    background:var(--panel-2)}
  .tbl td{display:block; border:0; padding:0; text-align:left}
  .tbl td.cell-link{flex:1 1 100%; min-width:0}
  .tbl td.right{text-align:left}
  .tbl td .row-actions{margin-left:auto; gap:4px}
  .tbl tbody tr:hover td{background:transparent}
  .cell-link .link-short a{display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
  .icon-btn{width:30px; height:30px}
}
@media(max-width:420px){
  .tbl tr{padding:10px}
  .tbl td .row-actions{width:100%; margin-left:0}
}
@media(max-width:460px){
  .sd-suffix{font-size:12px; padding:0 8px}
  .stat{padding:12px 12px}
  .stat .k{font-size:10.5px; letter-spacing:.3px}
}
@media(max-width:340px){
  .grid.k4{grid-template-columns:1fr}
}

/* ---------- jarak ikon pada judul kartu/halaman ---------- */
.card-head h2{display:flex; align-items:center; gap:7px}
.card-head h2 .i{width:17px; height:17px; color:var(--accent-2); vertical-align:0}
.page-head h1{display:flex; align-items:center; gap:9px}
.auth-brand .i{width:20px; height:20px; vertical-align:0}

/* label kecil di kartu domain saat tampilan HP */
@media(max-width:760px){
  .tbl-domains td:nth-child(2)::before,
  .tbl-domains td:nth-child(3)::before{
    display:block; color:var(--muted); font-size:10.5px; text-transform:uppercase;
    letter-spacing:.5px; margin-bottom:3px}
  .tbl-domains td:nth-child(2)::before{content:"status"}
  .tbl-domains td:nth-child(3)::before{content:"verifikasi"}
  .tbl-domains td{flex:1 1 100%}
  .tbl-domains td:first-child{flex:1 1 100%}
}