/* ============================================================================
   ISOMETRIC ADMIN THEME — Ananto (own backend). Self-contained, no framework.
   Raised 3D cards, gradient sidebar, isometric KPI tiles. Light + dark.
   ============================================================================ */
:root{
  --iso-primary:#6d5efc; --iso-primary-700:#4b3ec4; --iso-teal:#22c1a6;
  --iso-orange:#ff8a3d; --iso-blue:#4aa8ff; --iso-pink:#ff5d8f;
  --iso-ink:#1e2340; --iso-muted:#6b7192; --iso-line:rgba(109,94,252,.14);
  --iso-surface:#fff; --iso-canvas:#f4f4fb;
  --iso-shadow:0 2px 4px rgba(30,35,64,.05),0 12px 28px -10px rgba(30,35,64,.16);
  --iso-shadow-lg:0 10px 24px -8px rgba(109,94,252,.35);
  --iso-radius:16px;
}
@media (prefers-color-scheme:dark){:root{
  --iso-ink:#e9ecff; --iso-muted:#9aa0c7; --iso-line:rgba(140,128,255,.18);
  --iso-surface:#1b1f38; --iso-canvas:#12152a;
  --iso-shadow:0 2px 6px rgba(0,0,0,.4),0 18px 36px -14px rgba(0,0,0,.6);
}}
*{box-sizing:border-box}
body{margin:0;font-family:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;color:var(--iso-ink);
  background:radial-gradient(1200px 600px at 100% -10%,rgba(109,94,252,.06),transparent 60%),var(--iso-canvas);}
a{color:var(--iso-primary-700);text-decoration:none}

/* Shell */
.iso-shell{display:flex;min-height:100vh}
.iso-side{width:250px;flex-shrink:0;background:linear-gradient(180deg,#201b3d,#171334);color:#e2e0ff;
  padding:1.1rem .8rem;position:sticky;top:0;height:100vh;overflow:auto}
.iso-brand{font-weight:800;font-size:1.25rem;letter-spacing:-.02em;padding:.4rem .6rem 1rem;color:#fff}
.iso-brand span{color:#8b7bff}
.iso-nav a{display:flex;align-items:center;gap:.6rem;padding:.6rem .7rem;border-radius:11px;margin:2px 0;
  color:rgba(226,224,255,.8);font-weight:600;font-size:.92rem;transition:.15s}
.iso-nav a:hover{background:rgba(140,128,255,.12);color:#fff}
.iso-nav a.active{background:linear-gradient(145deg,var(--iso-primary),var(--iso-primary-700));color:#fff;
  box-shadow:0 8px 18px -6px rgba(109,94,252,.7)}
.iso-nav .sec{font-size:.65rem;text-transform:uppercase;letter-spacing:.1em;color:rgba(160,152,220,.6);
  padding:.9rem .7rem .3rem;font-weight:700}
.iso-main{flex:1;padding:1.5rem 1.8rem;min-width:0}
.iso-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:1.2rem}
.iso-top h1{margin:0;font-size:1.5rem;font-weight:800;letter-spacing:-.02em}

/* Hero */
.iso-hero{position:relative;border-radius:20px;padding:1.4rem 1.6rem;margin-bottom:1.3rem;color:#fff;overflow:hidden;
  background:radial-gradient(700px 300px at 90% -40%,rgba(255,255,255,.22),transparent 60%),
  linear-gradient(120deg,#4b3ec4,#6d5efc 45%,#8b5cf6);box-shadow:var(--iso-shadow-lg)}
.iso-hero h2{margin:0;font-weight:800}.iso-hero p{margin:.3rem 0 0;opacity:.85}
.iso-cube{position:absolute;border-radius:12px;background:linear-gradient(145deg,rgba(255,255,255,.28),rgba(255,255,255,.05));
  transform:rotate(-18deg);box-shadow:inset 0 2px 4px rgba(255,255,255,.35)}
.iso-cube.c1{width:84px;height:84px;right:7%;top:-18px}.iso-cube.c2{width:48px;height:48px;right:19%;bottom:-12px;opacity:.7}

/* Cards + KPI */
.iso-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:1rem;margin-bottom:1.3rem}
.iso-card{background:linear-gradient(180deg,rgba(255,255,255,.6),transparent 42%),var(--iso-surface);
  border:1px solid var(--iso-line);border-radius:var(--iso-radius);box-shadow:var(--iso-shadow);
  padding:1.1rem 1.2rem;transition:transform .2s,box-shadow .2s}
.iso-card:hover{transform:translateY(-3px);box-shadow:var(--iso-shadow-lg)}
.iso-kpi{display:flex;align-items:center;gap:1rem}
.iso-ic{width:3rem;height:3rem;border-radius:15px;display:flex;align-items:center;justify-content:center;
  color:#fff;font-size:1.3rem;font-weight:800;transform:rotate(-8deg);
  background:linear-gradient(145deg,var(--iso-primary),var(--iso-primary-700));
  box-shadow:0 6px 14px -4px rgba(109,94,252,.55),inset 0 2px 3px rgba(255,255,255,.35),inset 0 -3px 6px rgba(0,0,0,.18)}
.iso-card:hover .iso-ic{transform:rotate(0) scale(1.06)}
.iso-ic.teal{background:linear-gradient(145deg,#2fe0c0,#12977f)}
.iso-ic.orange{background:linear-gradient(145deg,#ffb15a,#f2751d)}
.iso-ic.blue{background:linear-gradient(145deg,#4aa8ff,#1f6fd6)}
.iso-ic.pink{background:linear-gradient(145deg,#ff7da6,#e83e73)}
.iso-kpi .v{font-size:1.6rem;font-weight:800;letter-spacing:-.03em;line-height:1}
.iso-kpi .l{color:var(--iso-muted);font-size:.8rem;font-weight:600;margin-top:.2rem}

/* Table */
.iso-panel{background:var(--iso-surface);border:1px solid var(--iso-line);border-radius:var(--iso-radius);
  box-shadow:var(--iso-shadow);overflow:hidden}
.iso-panel h3{margin:0;padding:1rem 1.2rem;font-size:1rem;border-bottom:1px solid var(--iso-line)}
table.iso{width:100%;border-collapse:collapse;font-size:.9rem}
table.iso th{text-align:left;text-transform:uppercase;font-size:.68rem;letter-spacing:.06em;color:var(--iso-muted);
  padding:.7rem 1.2rem;background:linear-gradient(180deg,rgba(109,94,252,.06),rgba(109,94,252,.02));border-bottom:1px solid var(--iso-line)}
table.iso td{padding:.7rem 1.2rem;border-bottom:1px solid var(--iso-line)}
table.iso tr:hover td{background:rgba(109,94,252,.045)}
.pill{display:inline-block;padding:.2em .65em;border-radius:999px;font-size:.72rem;font-weight:700}
.pill.ok{background:rgba(34,193,166,.15);color:#12977f}
.pill.warn{background:rgba(255,138,61,.15);color:#c85f16}
.pill.bad{background:rgba(255,93,143,.15);color:#c23a63}
.pill.info{background:rgba(109,94,252,.14);color:#4b3ec4}

/* Buttons + form */
.btn{display:inline-block;border:none;cursor:pointer;border-radius:11px;font-weight:700;font-size:.85rem;
  padding:.5rem .9rem;color:#fff;background:linear-gradient(145deg,var(--iso-primary),var(--iso-primary-700));
  box-shadow:0 6px 14px -5px rgba(109,94,252,.6);transition:.15s}
.btn:hover{filter:brightness(1.06)}.btn:active{transform:translateY(1px)}
.btn.teal{background:linear-gradient(145deg,#2fe0c0,#12977f)}
.btn.ghost{background:transparent;color:var(--iso-primary-700);box-shadow:none;border:1px solid var(--iso-line)}
.field{width:100%;padding:.7rem .9rem;border-radius:11px;border:1px solid var(--iso-line);
  background:var(--iso-surface);color:var(--iso-ink);font-size:.95rem;margin-bottom:.9rem}
.field:focus{outline:none;border-color:var(--iso-primary);box-shadow:0 0 0 .2rem rgba(109,94,252,.15)}
.l{display:block;font-size:.72rem;color:var(--iso-muted);font-weight:600;margin-bottom:.25rem}

/* Login */
.iso-login{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:1rem}
.iso-login .box{width:100%;max-width:380px;background:var(--iso-surface);border:1px solid var(--iso-line);
  border-radius:20px;box-shadow:var(--iso-shadow-lg);padding:2rem 1.8rem}
.iso-login h1{margin:.2rem 0 .3rem;font-size:1.5rem}
.iso-login p{margin:0 0 1.3rem;color:var(--iso-muted);font-size:.9rem}
.alert{background:rgba(255,93,143,.12);color:#c23a63;padding:.6rem .9rem;border-radius:11px;font-size:.85rem;margin-bottom:1rem}
@media(max-width:720px){.iso-side{position:fixed;left:-260px}.iso-main{padding:1rem}}