:root{--bg:#061b22;--panel:#0a2a31;--panel2:#0d3439;--line:#185c5d;--mint:#35dfbd;--teal:#079b8b;--text:#e8fbf6;--muted:#8fb5ae;--danger:#ff8b8b}
*{box-sizing:border-box}body{margin:0;background:radial-gradient(circle at 20% 0%,#0c3c3b 0,transparent 34%),var(--bg);color:var(--text);font-family:Inter,system-ui,-apple-system,"Segoe UI",Arial,sans-serif}
button,input{font:inherit}.hidden{display:none!important}
.login-wrap{min-height:100vh;display:grid;place-items:center;padding:22px}.login-card{width:min(100%,540px);padding:34px;border:1px solid #24736c;border-radius:26px;background:linear-gradient(145deg,#0b3037,#071e28);box-shadow:0 25px 80px #0008;text-align:center}
.logo{height:82px;width:82px;margin:0 auto 18px;display:grid;place-items:center;border-radius:24px;background:linear-gradient(145deg,#35dfbd,#087d78);font-size:30px;font-weight:950;box-shadow:0 10px 30px #00c9a444}
.kicker{letter-spacing:.35em;color:var(--mint);font-size:12px;font-weight:900}.login-card h1{font-size:clamp(38px,8vw,58px);letter-spacing:-2px;margin:10px 0}.login-card h1 span{color:var(--mint)}.brand{font-weight:900;letter-spacing:.24em;color:#bdf8e9}.sub{color:var(--muted);margin:14px 0 32px}
.field{text-align:left;margin:18px 0}.field label{display:block;font-weight:750;margin-bottom:9px;color:#c5e4dc}.field input{width:100%;height:58px;padding:0 17px;border:1px solid #28666a;border-radius:15px;background:#082630;color:var(--text);outline:none}.field input:focus{border-color:var(--mint);box-shadow:0 0 0 3px #35dfbd22}
.primary{width:100%;height:60px;border:0;border-radius:15px;background:linear-gradient(100deg,#087f77,#20c9a9);color:#fff;font-weight:950;letter-spacing:.16em;cursor:pointer;box-shadow:0 10px 25px #00b99a33}.primary:hover{filter:brightness(1.08)}.error{min-height:22px;color:var(--danger);font-size:13px;margin:12px 0 0}.hint{font-size:11px;color:#789d98;line-height:1.5;margin-top:20px}
.app{min-height:100vh;display:grid;grid-template-columns:250px 1fr}.sidebar{padding:24px 17px;background:#071f27;border-right:1px solid #17484b}.side-brand{display:flex;align-items:center;gap:12px;padding:4px 8px 26px}.mini-logo{width:42px;height:42px;border-radius:13px;display:grid;place-items:center;background:linear-gradient(145deg,#35dfbd,#087d78);font-weight:950}.side-brand strong{display:block;letter-spacing:.08em}.side-brand small{color:var(--mint);font-size:10px;letter-spacing:.2em}.nav-label{color:#648d88;font-size:10px;letter-spacing:.18em;font-weight:900;padding:17px 10px 8px}.nav button{width:100%;padding:12px 13px;margin:3px 0;border:0;border-radius:11px;text-align:left;background:transparent;color:#a9c9c2;cursor:pointer;font-weight:650}.nav button.active,.nav button:hover{background:#10413f;color:#eafff9}.nav button span{display:inline-block;width:26px;color:var(--mint)}.sidebar-bottom{margin-top:35px;padding:12px;color:#779b95;font-size:11px;line-height:1.6;border-top:1px solid #194447}
.main{min-width:0;padding:26px 30px 40px}.topbar{display:flex;justify-content:space-between;align-items:center;gap:16px;margin-bottom:28px}.topbar h2{font-size:25px;margin:0}.topbar p{margin:5px 0 0;color:var(--muted);font-size:13px}.profile{display:flex;align-items:center;gap:10px;padding:8px 12px;border:1px solid #20585a;border-radius:13px;background:#0a2b32}.avatar{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;background:#0d887d;font-weight:900}.profile small{display:block;color:var(--muted);font-size:11px}.logout{border:1px solid #2a6562;background:transparent;color:#c7e8df;border-radius:10px;padding:9px 12px;cursor:pointer}
.welcome{padding:23px 25px;border:1px solid #206b63;border-radius:18px;background:linear-gradient(110deg,#0d5149,#0b3037 65%,#0b2831);margin-bottom:22px}.welcome h3{margin:0 0 7px;font-size:21px}.welcome p{margin:0;color:#b0d8ce;font-size:13px}
.stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin-bottom:22px}.stat,.panel{border:1px solid #1c5558;border-radius:16px;background:linear-gradient(145deg,#0b3037,#08252e)}.stat{padding:18px}.stat .label{color:var(--muted);font-size:12px}.stat .value{font-size:27px;font-weight:850;margin:10px 0 5px}.stat .foot{font-size:11px;color:var(--mint)}
.content-grid{display:grid;grid-template-columns:1.3fr .7fr;gap:16px}.panel{padding:20px}.panel-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:15px}.panel h3{font-size:15px;margin:0}.tag{font-size:10px;color:var(--mint);background:#0d4943;padding:6px 9px;border-radius:30px}
table{width:100%;border-collapse:collapse;font-size:12px}th{text-align:left;color:#82aaa2;font-weight:650;padding:11px 8px;border-bottom:1px solid #1d4c4e}td{padding:13px 8px;border-bottom:1px solid #173f43;color:#d5ece5}.status{color:var(--mint);background:#10463e;padding:5px 8px;border-radius:20px;font-size:10px}
.quick{display:grid;grid-template-columns:1fr 1fr;gap:10px}.quick button{padding:15px 12px;border:1px solid #24605d;border-radius:12px;background:#0b3838;color:#d9f8ee;text-align:left;cursor:pointer}.quick button b{display:block;color:var(--mint);font-size:19px;margin-bottom:7px}.quick button small{color:#91b7ae}
.notice{margin-top:17px;padding:13px 15px;border-radius:12px;background:#0b3435;color:#a9d6ca;font-size:12px;line-height:1.6;border:1px solid #1a5a55}
.section-placeholder{padding:28px;border:1px dashed #2b6862;border-radius:15px;color:#a8c9c0;line-height:1.7}
@media(max-width:950px){.stats{grid-template-columns:repeat(2,1fr)}.content-grid{grid-template-columns:1fr}}
@media(max-width:650px){.app{grid-template-columns:1fr}.sidebar{border-right:0;border-bottom:1px solid #17484b;padding:12px}.side-brand{padding:4px 8px 10px}.nav{display:flex;overflow:auto;gap:5px}.nav-label,.sidebar-bottom{display:none}.nav button{white-space:nowrap;width:auto;margin:0;padding:10px}.main{padding:19px 14px 30px}.topbar{align-items:flex-start;flex-wrap:wrap}.profile{margin-left:auto}.stats{gap:9px}.stat{padding:14px}.stat .value{font-size:22px}.login-card{padding:27px 21px}}
/* Menu tambahan */
.nav button { transition: background .2s ease, color .2s ease; }
.nav button.active { border-left: 3px solid var(--mint); padding-left: 10px; }
.menu-grid { display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px; }
.menu-tile { text-align:left; padding:20px; border:1px solid #24605d; border-radius:16px; background:linear-gradient(145deg,#0b3838,#08252e);color:var(--text);cursor:pointer; }
.menu-tile:hover { border-color:var(--mint); }
.menu-tile strong { display:block; font-size:17px; margin-bottom:8px; }
.menu-tile small { color:var(--muted); }
@media (max-width:650px) { .menu-grid {grid-template-columns:1fr;} }

/* Halaman Report Flop dimuat tanpa mengganti sidebar dashboard */
.report-flop-frame { display:block; width:100%; height: min(900px, calc(100vh - 145px)); min-height:630px; border:0; border-radius:16px; background:#080d18; }
@media (max-width:650px) { .report-flop-frame { min-height:850px; height:calc(100vh - 200px); } }

.hidden {
  display: none !important;
}

.report-flop-frame {
  display: block;
  width: 100%;
  height: calc(100vh - 140px);
  min-height: 650px;
  border: none;
  border-radius: 16px;
  background: #080d18;
}

@media (max-width: 650px) {
  .report-flop-frame {
    min-height: 850px;
  }
}