:root{
  --bg:#0d0d0d; --panel:#141414; --panel2:#171717; --panel3:#161616;
  --border:#262626; --bsoft:#1c1c1c; --bsoft2:#1f1f1f; --input-bd:#2c2c2c;
  --text:#e0e0e0; --strong:#ffffff; --dim:#cfcfcf; --muted:#8a8a8a; --hint:#666;
  --accent:#ff4d6d; --accent2:#ff6d84; --chip:#1c1c1c; --chip-bd:#2c2c2c;
  --ok:#76d38f; --warn:#f4a261; --err:#ff6d84;
  --cover-grad:radial-gradient(circle at 50% 40%, #1c1414 0%, #0d0d0d 68%);
  --shadow:rgba(0,0,0,.5);
}
/* Tema terang (peach-coral pastel) - cerah, lembut, playful & ceria */
:root[data-theme="light"]{
  --bg:#fdede6; --panel:#fff7f3; --panel2:#fce7e0; --panel3:#fff7f3;
  --border:#f6d5cc; --bsoft:#f8ddd6; --bsoft2:#f4d2c9; --input-bd:#f2c9be;
  --text:#4a3630; --strong:#2b1c17; --dim:#6a534b; --muted:#a08279; --hint:#bda096;
  --accent:#f06a86; --accent2:#d24f6d; --chip:#fce6df; --chip-bd:#f4d0c6;
  --ok:#3f9f6a; --warn:#d68a3a; --err:#e05a72;
  --cover-grad:radial-gradient(circle at 50% 34%, #ffe7de 0%, #fdeee7 72%);
  --shadow:rgba(190,110,110,.16);
}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--text);
  font-family:"Segoe UI",Inter,system-ui,Arial,sans-serif;font-size:15.5px;line-height:1.55;
  transition:background .25s,color .25s}
a{color:inherit;text-decoration:none}
h1{font-size:28px;margin:0 0 6px} h2{font-size:20px} h3{font-size:16px;margin:0 0 12px}
.muted{color:var(--muted)} .hint{color:var(--hint);font-size:12px}
.badge{background:rgba(255,77,109,.14);color:var(--accent2);border:1px solid rgba(255,77,109,.3);
  border-radius:8px;padding:1px 8px;font-size:12px}

/* toggle tema */
.theme-toggle{width:38px;height:38px;border-radius:11px;border:1px solid var(--border);
  background:var(--panel2);color:var(--text);cursor:pointer;font-size:16px;line-height:1;
  display:inline-flex;align-items:center;justify-content:center;padding:0;
  transition:box-shadow .2s,border-color .2s}
.theme-toggle:hover{border-color:var(--accent);box-shadow:0 0 18px rgba(255,77,109,.4)}
.theme-toggle::before{content:"\1F319"}
:root[data-theme="light"] .theme-toggle::before{content:"\2600"}
.theme-toggle-float{position:fixed;top:18px;right:18px;z-index:60}

/* nav */
.nav{display:flex;justify-content:space-between;align-items:center;
  padding:12px 24px;background:var(--panel);border-bottom:1px solid var(--bsoft2)}
.brand{color:var(--accent);font-weight:800;letter-spacing:1px}
.brand span{color:var(--strong)}
.nav-links{display:flex;align-items:center;gap:18px}
.nav-links a{color:var(--dim);font-size:14.5px;padding:7px 11px;border-radius:9px;
  border:1px solid transparent;transition:color .2s,box-shadow .2s,border-color .2s,background .2s}
.nav-links a:hover{color:var(--strong);border-color:var(--accent);background:rgba(255,77,109,.07);
  box-shadow:0 0 18px rgba(255,77,109,.4)}
.nav-user{color:var(--muted);font-size:12px}

/* account dropdown */
.acct{position:relative}
.acct-btn{display:flex;align-items:center;gap:8px;background:var(--panel2);
  border:1px solid var(--border);border-radius:11px;padding:7px 12px;color:var(--text);
  cursor:pointer;font-size:14px;transition:box-shadow .2s,border-color .2s}
.acct-btn:hover{border-color:var(--accent);box-shadow:0 0 20px rgba(255,77,109,.45)}
.caret{color:var(--muted);font-size:11px}
.role-badge{font-size:10.5px;font-weight:700;letter-spacing:.5px;padding:2px 8px;
  border-radius:6px;background:var(--chip);color:var(--muted)}
.role-badge.admin{background:rgba(255,77,109,.14);color:var(--accent2);border:1px solid rgba(255,77,109,.3)}
.acct-drop{position:absolute;right:0;top:calc(100% + 8px);min-width:170px;
  background:var(--panel3);border:1px solid var(--border);border-radius:11px;padding:6px;
  display:none;z-index:50;box-shadow:0 10px 30px var(--shadow)}
.acct-drop.open{display:block}
.acct-drop a{display:block;padding:9px 14px;border-radius:7px;color:var(--dim);font-size:13.5px}
.acct-drop a:hover{background:rgba(255,77,109,.12);color:var(--strong)}
.btn-ghost{background:var(--panel2);border:1px solid var(--border);border-radius:10px;
  padding:7px 12px;color:var(--dim);cursor:pointer;font-size:13px;
  transition:box-shadow .2s,border-color .2s,color .2s}
.btn-ghost:hover{border-color:var(--accent);color:var(--strong);box-shadow:0 0 20px rgba(255,77,109,.45)}
.btn-ghost:disabled{opacity:.4;cursor:not-allowed}
.btn-ghost:disabled:hover{box-shadow:none;border-color:var(--border)}
.btn-primary{background:var(--panel2);border:1px solid var(--accent);border-radius:11px;
  padding:9px 18px;color:var(--strong);font-weight:700;cursor:pointer;letter-spacing:.5px;
  transition:box-shadow .2s,background .2s}
.btn-primary:hover{background:rgba(255,77,109,.12);box-shadow:0 0 24px rgba(255,77,109,.55)}
.btn-primary:disabled{opacity:.5;cursor:not-allowed}

.wrap{max-width:1400px;margin:0 auto;padding:30px 34px}
.flash-wrap{max-width:1400px;margin:14px auto 0;padding:0 34px}
.flash{background:rgba(244,162,97,.12);border:1px solid rgba(244,162,97,.35);
  color:var(--warn);border-radius:10px;padding:9px 14px;margin-bottom:8px;font-size:13px}

/* auth */
.auth-wrap{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:24px}
.auth-card{background:var(--panel);border:1px solid var(--border);border-radius:16px;
  padding:34px 30px;width:100%;max-width:380px}
.auth-brand{color:var(--accent);font-weight:800;font-size:22px;letter-spacing:1px}
.auth-brand span{color:var(--strong)}
.auth-sub{color:var(--muted);font-size:12px;margin:2px 0 20px}
.auth-note{background:rgba(255,77,109,.1);border:1px solid rgba(255,77,109,.28);
  border-radius:10px;padding:10px 12px;font-size:12.5px;margin-bottom:16px}
.auth-card label{display:block;font-size:12px;color:var(--dim);margin:12px 0 5px;font-weight:600}
.auth-card input{width:100%;background:var(--panel2);border:1px solid var(--input-bd);border-radius:10px;
  padding:10px 12px;color:var(--text);font-size:14px}
.auth-card input:focus{outline:none;border-color:var(--accent)}
.auth-card .btn-primary{width:100%;margin-top:20px}
.auth-back{display:inline-flex;align-items:center;gap:6px;margin-top:18px;color:var(--dim);
  font-size:12.5px;background:var(--panel2);border:1px solid var(--border);border-radius:10px;
  padding:7px 13px;transition:box-shadow .2s,border-color .2s,color .2s}
.auth-back:hover{color:var(--strong);border-color:var(--accent);box-shadow:0 0 16px rgba(255,77,109,.4)}

/* landing */
.landing{max-width:1080px;margin:0 auto;padding:40px 24px}
.hero{text-align:center;padding:36px 0 46px}
.hero-brand{color:var(--accent);font-weight:800;font-size:26px;letter-spacing:1px}
.hero-brand span{color:var(--strong)}
.hero h1{font-size:30px;margin:14px 0 12px}
.hero-lead{color:var(--muted);max-width:620px;margin:0 auto 24px}
.hero-cta{display:flex;gap:12px;justify-content:center}
.topo{background:var(--panel);border:1px solid var(--border);border-radius:16px;padding:24px;margin-top:20px}
.topo-sub{color:var(--muted);font-size:13px;max-width:640px}
.topo-svg{margin-top:14px;overflow-x:auto}
.topo-svg svg{max-width:100%;height:auto}
.feat{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:14px;margin-top:20px}
.feat-card{background:var(--panel);border:1px solid var(--border);border-radius:14px;padding:18px}
.feat-card h3{color:var(--accent2)}
.feat-card p{color:var(--muted);font-size:13px;margin:0}

/* cover (landing sebelum login) - hanya judul + login */
.cover-wrap{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:24px;
  background:var(--cover-grad)}
.cover{text-align:center;max-width:1120px}
.cover-brand{color:var(--accent);font-weight:800;font-size:clamp(26px,3vw,34px);
  letter-spacing:3px;margin-bottom:30px}
.cover-title{font-size:clamp(20px,3.9vw,42px);line-height:1.3;color:var(--strong);margin:0 0 22px;
  font-weight:800}

/* glitch [NETEYE] - sapuan putih atas ke bawah, tiap 1 detik */
.glitch{position:relative;display:inline-block}
.glitch::after{content:attr(data-text);position:absolute;top:0;left:0;
  width:100%;height:100%;overflow:hidden;pointer-events:none;color:#ffffff;
  animation:glitchScan 1s infinite steps(1,end)}
:root[data-theme="light"] .glitch::after{color:#fff0f5}
@keyframes glitchScan{
  0%  {clip-path:inset(0 0 92% 0);   transform:translateX(2px)}
  10% {clip-path:inset(9% 0 83% 0);  transform:translateX(-3px)}
  20% {clip-path:inset(18% 0 74% 0); transform:translateX(2px)}
  30% {clip-path:inset(27% 0 65% 0); transform:translateX(-2px)}
  40% {clip-path:inset(36% 0 56% 0); transform:translateX(3px)}
  50% {clip-path:inset(45% 0 47% 0); transform:translateX(-2px)}
  60% {clip-path:inset(54% 0 38% 0); transform:translateX(2px)}
  70% {clip-path:inset(64% 0 28% 0); transform:translateX(-3px)}
  80% {clip-path:inset(74% 0 18% 0); transform:translateX(2px)}
  90% {clip-path:inset(85% 0 7% 0);  transform:translateX(-2px)}
  100%{clip-path:inset(0 0 100% 0);  transform:translateX(0)}
}
.cover-group{color:var(--muted);font-size:clamp(16px,1.6vw,20px);margin:0 0 38px;letter-spacing:.5px}
.cover-btn{display:inline-block;padding:15px 56px;font-size:17px;
  box-shadow:0 0 18px rgba(255,77,109,.22);transition:box-shadow .2s, background .2s}
.cover-btn:hover{box-shadow:0 0 34px rgba(255,77,109,.6)}

/* Halaman Akses (info kredensial penguji) */
.akses-center{max-width:760px;margin:7vh auto 0;text-align:center}
.akses-center h1{font-size:clamp(28px,4vw,44px);margin-bottom:28px}
.akses-card{display:inline-block;text-align:left;padding:34px 46px}
.akses-row{display:flex;align-items:baseline;gap:12px;
  font-family:ui-monospace,Menlo,Consolas,monospace;
  font-size:clamp(22px,2.6vw,30px);padding:12px 0}
.akses-lbl{color:var(--strong)}
.akses-sep{color:var(--strong)}
.akses-val{color:var(--accent);font-weight:700}
.akses-url{color:var(--accent);text-decoration:none;word-break:break-all}
.akses-url:hover{text-decoration:underline}
.akses-center{position:relative;z-index:1}

/* Sakura jatuh (khusus halaman Akses) - lembut & elegan, CSS murni */
.sakura{position:fixed;inset:0;overflow:hidden;pointer-events:none;z-index:0}
.petal{position:absolute;top:-8vh;display:block;opacity:0;will-change:transform;
  background:linear-gradient(135deg,#ffcadb 0%,#f2769f 100%);
  border-radius:150% 0 150% 0;box-shadow:0 1px 4px rgba(214,79,109,.25);
  animation-name:sakuraFall;animation-timing-function:linear;animation-iteration-count:infinite}
.petal.b{background:linear-gradient(135deg,#ffdbe7 0%,#f79ac0 100%)}
@keyframes sakuraFall{
  0%  {opacity:0;   transform:translate(0,-8vh)    rotate(0deg)}
  8%  {opacity:.95}
  25% {transform:translate(26px,22vh)  rotate(90deg)}
  50% {transform:translate(-20px,50vh) rotate(200deg)}
  75% {transform:translate(22px,76vh)  rotate(320deg)}
  92% {opacity:.95}
  100%{opacity:0;   transform:translate(-10px,108vh) rotate(460deg)}
}

/* dashboard */
.dash-head{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;flex-wrap:wrap}
.stat-row{display:flex;gap:12px}
.stat{background:var(--panel);border:1px solid var(--border);border-radius:12px;
  padding:10px 16px;text-align:center;min-width:96px}
.stat-num{display:block;font-size:22px;font-weight:800;color:var(--strong)}
.stat-lbl{font-size:11px;color:var(--muted)}
.scan-bar{display:flex;gap:10px;margin:18px 0 6px}
.scan-bar input{flex:1;background:var(--panel2);border:1px solid var(--input-bd);border-radius:11px;
  padding:11px 14px;color:var(--text);font-size:14px}
.scan-bar input:focus{outline:none;border-color:var(--accent)}
.policy-hint{font-size:12px;min-height:16px;margin-bottom:10px;color:var(--muted)}
.policy-hint.ok{color:var(--ok)} .policy-hint.err{color:var(--err)}

/* terminal (selalu gelap di kedua tema - khas console) */
.term-wrap{background:#0a0a0a;border:1px solid var(--border);border-radius:12px;overflow:hidden;
  display:flex;flex-direction:column}
.term-head{display:flex;align-items:center;gap:7px;padding:9px 14px;background:#131313;border-bottom:1px solid #202020}
.dot{width:11px;height:11px;border-radius:50%}
.dot.r{background:#ff5f57}.dot.y{background:#febc2e}.dot.g{background:#28c840}
.term-title{margin-left:10px;color:#9a9a9a;font-family:Consolas,monospace;font-size:12px}
.terminal{flex:1 1 auto;min-height:300px;overflow-y:auto;padding:16px 18px;
  font-family:Consolas,"Courier New",monospace;font-size:14px;line-height:1.6}
.term-idle{color:#555}
.tline{white-space:pre-wrap;word-break:break-all;color:#c8c8c8}
.tline.cmd{color:#ff6d84} .tline.ok{color:#76d38f} .tline.err{color:#ff6d84}

.dash-grid{display:grid;grid-template-columns:1.3fr 1fr;gap:16px;margin-top:16px}
.panel{background:var(--panel);border:1px solid var(--border);border-radius:14px;padding:18px;margin-top:16px}
.dash-grid .panel{margin-top:0}

/* dashboard 2x2: kiri Target Legal/Port Terbuka, kanan Terminal/Riwayat */
.dash-2col{display:grid;grid-template-columns:1fr 1.35fr;gap:16px;margin-top:8px;align-items:start}
.dash-2col > .panel{margin-top:0}
.dash-2col .term-wrap{align-self:stretch}
.panel-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px}
.link{color:var(--accent2)} .link:hover{text-decoration:underline}
.traffic-stats{display:flex;gap:20px;font-size:13px;color:var(--dim)}
.traffic-stats b{color:var(--strong)}
#trafficChart{width:100%;display:block;margin-top:10px}
@media(max-width:900px){ .dash-2col{grid-template-columns:1fr} }

/* riwayat: aksi + list */
.hist-form{margin:0}
.hist-actions{display:flex;align-items:center;gap:10px;margin-bottom:10px}
.hist-actions .grow{flex:1}
.chk-all{display:flex;align-items:center;gap:6px;font-size:12.5px;color:var(--dim);cursor:pointer}
.btn-sm{padding:5px 12px;font-size:12.5px}
.hist-list{overflow:auto}
.hist-list.compact{max-height:280px}
.hist-list td,.hist-list th{white-space:nowrap}
table.ports{width:100%;border-collapse:collapse;font-size:13px}
table.ports th{text-align:left;color:var(--muted);font-size:11px;border-bottom:1px solid var(--border);padding:7px 6px}
table.ports td{padding:7px 6px;border-bottom:1px solid var(--bsoft)}
table.ports td.ok{color:var(--ok)}
.ports .empty td{color:var(--hint);text-align:center}
.allow{list-style:none;padding:0;margin:0 0 12px;font-size:13px}
.allow li{padding:6px 0;border-bottom:1px solid var(--bsoft)}
.tgt-label{font-size:11px;text-transform:uppercase;letter-spacing:.5px;color:var(--muted);
  margin:4px 0 4px;font-weight:700}
.tgt{display:flex;align-items:center;gap:10px;cursor:pointer;border-radius:8px;
  padding:7px 8px !important;transition:background .12s}
.tgt:hover{background:rgba(255,77,109,.08)}
.tgt-name{color:var(--text);font-weight:600}
.tgt-ext .tgt-name{color:var(--accent2)}
.tgt-ip{color:var(--accent2);font-family:Consolas,monospace;font-size:12px}

/* curriculum */
.course-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:16px;margin-top:18px}
.course-card{background:var(--panel);border:1px solid var(--border);border-radius:14px;padding:20px;
  display:block;transition:border-color .15s, transform .12s, box-shadow .2s}
.course-card:hover{border-color:var(--accent);transform:translateY(-2px);
  box-shadow:0 0 26px rgba(255,77,109,.22)}
.course-card.inti{border-left:3px solid var(--accent)}
.course-card.pendukung{border-left:3px solid var(--border)}
.course-card.pendukung:hover{border-left-color:var(--accent)}
.course-top{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:10px}
.cicon{display:inline-flex;width:52px;height:52px;padding:9px;border-radius:12px;
  background:rgba(255,77,109,.08);border:1px solid rgba(255,77,109,.2)}
.cicon svg{width:100%;height:100%}
.course-code{font-family:Consolas,monospace;color:var(--accent2);font-size:12px}
.course-tag{font-size:10px;text-transform:uppercase;color:var(--muted);border:1px solid var(--border);
  border-radius:6px;padding:2px 9px;font-weight:700;letter-spacing:.5px}
.course-tag.inti{color:var(--accent2);border-color:rgba(255,77,109,.35)}
.course-concept{color:var(--muted);font-size:13.5px;margin:6px 0 12px}
.tool-row{display:flex;flex-wrap:wrap;gap:7px}
.tool-badge{background:var(--chip);border:1px solid var(--chip-bd);border-radius:7px;
  padding:3px 10px;font-size:11.5px;color:var(--dim);font-family:Consolas,monospace}
.course-body{color:var(--dim)}

/* course detail */
.back-link{display:inline-flex;align-items:center;gap:6px;color:var(--dim);font-size:13px;
  background:var(--panel2);border:1px solid var(--border);border-radius:10px;padding:7px 14px;
  margin-bottom:16px;transition:box-shadow .2s,border-color .2s,color .2s}
.back-link:hover{color:var(--strong);border-color:var(--accent);box-shadow:0 0 18px rgba(255,77,109,.4)}
.course-hero{display:flex;gap:18px;align-items:flex-start;background:var(--panel);
  border:1px solid var(--border);border-radius:14px;padding:22px;margin-bottom:16px}
.course-hero .cicon{width:70px;height:70px;flex:0 0 auto}

/* forms (settings) */
.frm label{display:block;font-size:12.5px;color:var(--dim);margin:12px 0 5px;font-weight:600}
.frm input,.frm select{width:100%;background:var(--panel2);border:1px solid var(--input-bd);
  border-radius:10px;padding:10px 12px;color:var(--text);font-size:14px}
.frm input:focus,.frm select:focus{outline:none;border-color:var(--accent)}
.frm .btn-primary{margin-top:18px}
.btn-danger{background:rgba(255,77,109,.1);border:1px solid rgba(255,77,109,.35);
  border-radius:8px;color:var(--accent2);padding:5px 12px;cursor:pointer;font-size:12.5px}
.btn-danger:hover{background:rgba(255,77,109,.2);color:var(--strong)}
.ip-cell{font-family:Consolas,monospace;color:var(--accent2)}
.ok-badge{color:var(--ok);font-size:12px;font-weight:700}
.fail-badge{color:var(--err);font-size:12px;font-weight:700}

/* riwayat scan */
.scan-item-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px}
.scan-target{font-family:Consolas,monospace;font-size:15px;color:var(--strong);margin-right:10px}
.port-chips{display:flex;flex-wrap:wrap;gap:8px}
.port-chip{background:rgba(118,211,143,.12);border:1px solid rgba(118,211,143,.3);
  color:var(--ok);border-radius:8px;padding:4px 10px;font-family:Consolas,monospace;font-size:13px}
.port-chip b{color:var(--ok);font-weight:600}

@media(max-width:820px){ .dash-grid{grid-template-columns:1fr} }

/* Tema terang: selaraskan glow & tint bawaan jadi coral pastel */
:root[data-theme="light"] .badge,
:root[data-theme="light"] .role-badge.admin,
:root[data-theme="light"] .auth-note{
  background:rgba(240,106,134,.15);border-color:rgba(240,106,134,.4);color:var(--accent2)}
:root[data-theme="light"] .cicon{background:rgba(240,106,134,.12);border-color:rgba(240,106,134,.28)}
:root[data-theme="light"] .course-tag.inti{border-color:rgba(240,106,134,.4)}
:root[data-theme="light"] .btn-danger{background:rgba(240,106,134,.13);border-color:rgba(240,106,134,.38)}
:root[data-theme="light"] .btn-danger:hover{background:rgba(240,106,134,.22)}
:root[data-theme="light"] .nav-links a:hover,
:root[data-theme="light"] .acct-btn:hover,
:root[data-theme="light"] .btn-ghost:hover,
:root[data-theme="light"] .theme-toggle:hover,
:root[data-theme="light"] .back-link:hover,
:root[data-theme="light"] .auth-back:hover{box-shadow:0 0 15px rgba(240,106,134,.3)}
:root[data-theme="light"] .btn-primary:hover{background:rgba(240,106,134,.13);
  box-shadow:0 0 18px rgba(240,106,134,.38)}
:root[data-theme="light"] .cover-btn:hover{box-shadow:0 0 26px rgba(240,106,134,.48)}
:root[data-theme="light"] .nav-links a:hover{background:rgba(240,106,134,.09)}
:root[data-theme="light"] .tgt:hover,
:root[data-theme="light"] .acct-drop a:hover{background:rgba(240,106,134,.12)}
:root[data-theme="light"] .course-card:hover{box-shadow:0 0 20px rgba(240,106,134,.2)}