/* GensFlo Cloud — web shell. Clay design system, disamakan 1:1 dengan landing gensflo.com.
   Token & shadow diambil dari gensflo_web/index.html (clay caramel · terracotta · sage · Nunito). */

/* ===== CLAY TOKENS (light) ===== */
:root {
  --cream:#f6e9d5; --card:#fffaf0; --card2:#f5e9d8;
  --ink:#463523; --muted:#8a7460; --line:rgba(193,140,90,.16);
  --terra:#e2725b; --terra-d:#c85a44;
  --sage:#8fae7e; --sage-d:#6d9159;
  --amber:#f0a848; --amber-d:#d98a2a; --gold:#ffd98a;
  --sh:193,140,90;
  --r:28px; --r-btn:16px; --r-sm:18px; --maxw:1120px;
  --hi:rgba(255,255,255,.9); --hdr:rgba(246,233,213,.72);
  --clay: 0 12px 26px rgba(var(--sh),.18), inset 0 2px 0 var(--hi);
  --clay-lift: 0 20px 36px rgba(var(--sh),.26), inset 0 2px 0 var(--hi);
  --clay-in: inset 0 2px 6px rgba(var(--sh),.18);
  --ok:#6d9159; --bad:#c85a44; --warn:#d98a2a;
  font-synthesis:none;
}

/* ===== DARK (warm clay) — toggle menang dua arah ===== */
:root[data-theme="dark"] {
  --cream:#241c15; --card:#372a1f; --card2:#2c2118;
  --ink:#f5ead9; --muted:#c2ab92; --line:rgba(255,238,210,.10);
  --sh:0,0,0; --hi:rgba(255,243,224,.12); --hdr:rgba(36,28,21,.76);
  --terra-d:#ff8b6f; --sage-d:#a6d68f; --amber-d:#ffc766;
  --ok:#a6d68f; --bad:#ff8b6f; --warn:#ffc766;
}
/* System default → ikut OS kecuali user pilih light */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --cream:#241c15; --card:#372a1f; --card2:#2c2118;
    --ink:#f5ead9; --muted:#c2ab92; --line:rgba(255,238,210,.10);
    --sh:0,0,0; --hi:rgba(255,243,224,.12); --hdr:rgba(36,28,21,.76);
    --terra-d:#ff8b6f; --sage-d:#a6d68f; --amber-d:#ffc766;
    --ok:#a6d68f; --bad:#ff8b6f; --warn:#ffc766;
  }
}

* { box-sizing:border-box; margin:0; padding:0; }
html { scroll-behavior:smooth; }
body {
  font-family:'Nunito',system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  color:var(--ink); line-height:1.5; font-weight:700; -webkit-font-smoothing:antialiased;
  min-height:100vh;
  background:
    radial-gradient(800px 460px at 88% -6%, #ffe4bd 0%, transparent 58%),
    radial-gradient(680px 420px at -6% 14%, #f3e6cf 0%, transparent 55%),
    var(--cream);
}
:root[data-theme="dark"] body {
  background:
    radial-gradient(800px 460px at 88% -6%, #3c2b1a 0%, transparent 58%),
    radial-gradient(680px 420px at -6% 14%, #2c2416 0%, transparent 55%),
    var(--cream);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) body {
    background:
      radial-gradient(800px 460px at 88% -6%, #3c2b1a 0%, transparent 58%),
      radial-gradient(680px 420px at -6% 14%, #2c2416 0%, transparent 55%),
      var(--cream);
  }
}
h1,h2,h3,.brand-name { letter-spacing:-.01em; line-height:1.12; }
a { color:inherit; text-decoration:none; }
.clayico { display:block; }

.app { display:grid; grid-template-columns:250px 1fr; min-height:100vh; }

/* ===== SIDEBAR ===== */
.sidebar {
  padding:22px 16px; display:flex; flex-direction:column; gap:20px;
  position:sticky; top:0; height:100vh;
  background:var(--hdr); backdrop-filter:blur(10px);
  border-right:1px solid var(--line);
}
.brand { display:flex; align-items:center; gap:11px; padding:4px 8px; font-weight:900; font-size:22px; }
.brand .mark {
  width:42px; height:42px; object-fit:contain; display:block;
  filter:drop-shadow(0 7px 12px rgba(var(--sh),.36));
  transition:transform .32s cubic-bezier(.34,1.56,.64,1);
}
.brand:hover .mark { transform:rotate(-6deg) scale(1.06); }
.nav { display:flex; flex-direction:column; gap:6px; flex:1; }
.nav-item {
  display:flex; align-items:center; gap:12px; padding:10px 12px; border-radius:var(--r-sm);
  color:var(--muted); font-weight:800; font-size:15px; transition:.16s;
}
.nav-item:hover { color:var(--ink); background:var(--card); box-shadow:var(--clay); }
.nav-item.active { color:var(--ink); background:var(--card); box-shadow:var(--clay); }
.nav-item.active .nav-ico { transform:rotate(-6deg); }
.nav-ico {
  width:34px; height:34px; border-radius:12px; flex:none; display:grid; place-items:center;
  background:var(--card2); box-shadow:0 6px 12px rgba(var(--sh),.22), inset 0 2px 0 var(--hi);
  transition:transform .32s cubic-bezier(.34,1.56,.64,1);
}
.nav-ico .clayico { width:22px; height:22px; }
.sidebar-foot {
  display:flex; align-items:center; gap:9px; padding:11px 13px; font-size:13px; font-weight:800; color:var(--muted);
  background:var(--card); border-radius:var(--r-sm); box-shadow:var(--clay-in);
}
.status-dot { width:10px; height:10px; border-radius:50%; background:var(--warn); flex:none; }
.status-dot[data-state="ok"] { background:var(--ok); }
.status-dot[data-state="bad"] { background:var(--bad); }
.status-dot[data-state="checking"] { background:var(--warn); animation:pulse 1.2s infinite; }
@keyframes pulse { 50% { opacity:.35; } }

/* ===== MAIN ===== */
.main { display:flex; flex-direction:column; min-width:0; }
.topbar {
  display:flex; align-items:center; gap:14px; padding:16px 30px;
  position:sticky; top:0; z-index:5; background:var(--hdr); backdrop-filter:blur(10px);
}
.page-title { font-size:22px; font-weight:900; margin:0; flex:1; letter-spacing:-.02em; }
.topbar-actions { display:flex; align-items:center; gap:10px; }
.icon-btn, .pill {
  border:1px solid var(--line); cursor:pointer; background:var(--card); color:var(--ink);
  font-weight:900; border-radius:14px;
  box-shadow:0 7px 14px rgba(var(--sh),.26), inset 0 2px 0 var(--hi), inset 0 -3px 6px rgba(var(--sh),.14);
  transition:transform .18s ease, box-shadow .18s ease;
}
.icon-btn { width:42px; height:42px; font-size:18px; display:grid; place-items:center; }
.pill { height:42px; padding:0 16px; font-size:14px; }
.icon-btn:active, .pill:active {
  transform:translateY(3px);
  box-shadow:0 3px 8px rgba(var(--sh),.22), inset 0 2px 0 var(--hi), inset 0 -2px 4px rgba(var(--sh),.12);
}
.menu-btn { display:none; }

.content { padding:12px 30px 44px; display:flex; flex-direction:column; gap:24px; max-width:var(--maxw); }

/* ===== HERO ===== */
.hero-card {
  background:linear-gradient(150deg, var(--card), var(--card2));
  border:1px solid var(--line); border-radius:var(--r); padding:34px 34px; box-shadow:var(--clay);
}
.hero-card h2 { margin:0 0 8px; font-size:30px; font-weight:900; letter-spacing:-.02em; }
.hero-card p { margin:0 0 22px; color:var(--muted); font-size:16px; font-weight:700; }
.hero-actions { display:flex; gap:12px; flex-wrap:wrap; }

/* ===== BUTTONS (puffy clay) ===== */
.btn {
  display:inline-flex; align-items:center; gap:8px; justify-content:center;
  border:1px solid var(--line); cursor:pointer; border-radius:var(--r-btn);
  padding:14px 24px; font-weight:900; font-size:15px; font-family:inherit;
  background:var(--card); color:var(--ink);
  box-shadow:0 8px 16px rgba(var(--sh),.30), inset 0 2px 0 var(--hi), inset 0 -4px 7px rgba(var(--sh),.16);
  transition:transform .1s ease, box-shadow .1s ease;
}
.btn:active { transform:translateY(4px); box-shadow:0 3px 8px rgba(var(--sh),.26), inset 0 2px 0 var(--hi), inset 0 -2px 4px rgba(var(--sh),.14); }
.btn-primary {
  background:linear-gradient(180deg,#f4b459,#e2725b); color:#fff; border-color:rgba(255,255,255,.28);
  text-shadow:0 1px 1px rgba(150,60,45,.4);
  box-shadow:0 10px 18px rgba(226,114,91,.42), inset 0 2px 0 rgba(255,255,255,.45), inset 0 -5px 9px rgba(0,0,0,.15);
}
.btn-primary:active { transform:translateY(4px); box-shadow:0 4px 9px rgba(226,114,91,.4), inset 0 2px 0 rgba(255,255,255,.4), inset 0 -3px 6px rgba(0,0,0,.13); }

/* ===== CARDS ===== */
.grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(250px, 1fr)); gap:18px; }
.card {
  background:var(--card); border:1px solid var(--line); border-radius:var(--r); padding:26px;
  box-shadow:var(--clay); display:flex; flex-direction:column; gap:8px;
  transition:transform .32s cubic-bezier(.34,1.56,.64,1), box-shadow .3s ease;
}
.card:hover { transform:translateY(-8px) rotate(-1deg); box-shadow:var(--clay-lift); }
.card .ic {
  width:60px; height:60px; border-radius:20px; display:grid; place-items:center; margin-bottom:8px;
  transform:rotate(-5deg);
  background:var(--card2); box-shadow:0 8px 15px rgba(var(--sh),.24), inset 0 2px 0 var(--hi);
}
.card:hover .ic { animation:wiggle .6s ease; }
.card .ic .clayico { width:38px; height:38px; }
.card h3 { margin:0; font-size:20px; font-weight:900; }
.card p { margin:0; color:var(--muted); font-size:14.5px; font-weight:700; line-height:1.5; }
.card .soon {
  font-size:11px; font-weight:900; color:var(--amber-d); background:var(--card2);
  padding:4px 11px; border-radius:999px; align-self:flex-start; letter-spacing:.04em; text-transform:uppercase;
  box-shadow:inset 0 2px 0 var(--hi);
}
@keyframes wiggle { 0%,100%{transform:rotate(-5deg)} 25%{transform:rotate(3deg)} 60%{transform:rotate(-8deg)} }

/* ===== RESPONSIVE ===== */
@media (max-width: 860px) {
  .app { grid-template-columns:1fr; }
  .sidebar { position:fixed; left:-270px; z-index:20; transition:left .22s; width:250px; }
  .sidebar.open { left:0; box-shadow:var(--clay-lift); }
  .menu-btn { display:grid; }
}
@media (prefers-reduced-motion: reduce) {
  * { animation:none !important; transition:none !important; }
}