/* ==========================================================================
   VAULT AKUN — Design System
   Mengikuti gaya Nawaku/Portofolio: Rubik, kartu flat berbingkai, aksen biru
   ========================================================================== */

*,*::before,*::after{ box-sizing:border-box; margin:0; padding:0; }
:root{
  --bg:#f7f8fa; --surface:#fff; --text:#1a1a1a; --text2:#444; --muted:#888; --muted-soft:#aab0c0;
  --border:#e8e8e8; --accent:#2563eb; --accent-dark:#1d4ed8;
  --accent-light:#eff4ff; --accent-mid:#bfdbfe;
  --sidebar-bg:#0f172a;
  --success:#16a34a; --success-bg:#e8f8ee;
  --warning:#d97706; --warning-bg:#fef3e2;
  --danger:#dc2626; --danger-bg:#fdeaea;
  --radius-sm:10px; --radius-md:12px; --radius-lg:16px; --radius-pill:999px;
  --font:'Rubik', sans-serif;
}
html{ scroll-behavior:smooth; }
body{
  font-family:var(--font); background:var(--bg); color:var(--text);
  min-height:100vh; -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4{ font-family:var(--font); color:var(--text); letter-spacing:-.2px; }
p{ color:var(--text2); line-height:1.7; }
a{ color:inherit; text-decoration:none; }
button{ font-family:var(--font); }
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible{
  outline:2.5px solid var(--accent); outline-offset:2px; border-radius:6px;
}
::selection{ background:var(--accent-mid); color:var(--text); }

.surface-card{ background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-lg); }

/* --------------------------------------------------------------------
   Tombol
   -------------------------------------------------------------------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
  font-weight:600; font-size:14px; font-family:var(--font);
  padding:.72rem 1.35rem; border-radius:var(--radius-sm);
  border:1px solid transparent; cursor:pointer;
  transition: transform .15s ease, box-shadow .15s ease, background .15s ease, border-color .15s ease;
  white-space:nowrap;
}
.btn:active{ transform:translateY(1px); }
.btn-primary{ background:var(--accent); color:#fff; }
.btn-primary:hover{ background:var(--accent-dark); }
.btn-secondary{ background:var(--surface); border-color:var(--border); color:var(--text); }
.btn-secondary:hover{ border-color:var(--accent); color:var(--accent); }
.btn-danger{ background:var(--danger-bg); color:var(--danger); }
.btn-danger:hover{ background:#fbdada; }
.btn-ghost{ background:transparent; color:var(--muted); border-color:transparent; }
.btn-ghost:hover{ background:var(--accent-light); color:var(--accent); }
.btn-sm{ padding:.5rem 1rem; font-size:13px; }
.btn-block{ width:100%; }
.btn:disabled{ opacity:.6; cursor:not-allowed; transform:none; }

.icon-btn{
  width:36px; height:36px; border-radius:9px;
  display:inline-flex; align-items:center; justify-content:center;
  background:var(--surface); border:1px solid var(--border); color:var(--text2);
  cursor:pointer; transition:.15s ease; flex-shrink:0;
}
.icon-btn svg{ width:16px; height:16px; }
.icon-btn:hover{ background:var(--accent-light); color:var(--accent); border-color:var(--accent-mid); }
.icon-btn.danger:hover{ background:var(--danger-bg); color:var(--danger); border-color:#f3b9b9; }

/* --------------------------------------------------------------------
   Form
   -------------------------------------------------------------------- */
.field{ margin-bottom:1rem; }
.field label{ display:block; font-size:12.5px; font-weight:700; color:var(--text2); margin-bottom:6px; }
.field .hint{ font-size:11.5px; color:var(--muted); margin-top:5px; }
.input, select.input{
  width:100%; font-family:var(--font); font-size:14px; color:var(--text);
  padding:.75rem 1rem; border-radius:var(--radius-sm);
  border:1.5px solid var(--border); background:var(--bg);
  transition:.15s ease;
}
.input:focus{ border-color:var(--accent); background:#fff; box-shadow:0 0 0 4px var(--accent-light); outline:none; }
.input-icon-wrap{ position:relative; }
.input-icon-wrap .input{ padding-left:2.6rem; }
.input-icon-wrap svg{ position:absolute; left:.85rem; top:50%; transform:translateY(-50%); width:17px; height:17px; color:var(--muted-soft); pointer-events:none; }
.input-icon-wrap.pw-toggle .toggle-pw{
  position:absolute; right:.5rem; top:50%; transform:translateY(-50%);
  background:none; border:none; cursor:pointer; color:var(--muted-soft); padding:.4rem; border-radius:8px;
}
.input-icon-wrap.pw-toggle .toggle-pw:hover{ color:var(--accent); background:var(--accent-light); }

/* --------------------------------------------------------------------
   Badge
   -------------------------------------------------------------------- */
.badge{ display:inline-flex; align-items:center; gap:.35rem; font-size:11px; font-weight:700; padding:.3rem .65rem; border-radius:var(--radius-pill); text-transform:uppercase; letter-spacing:.02em; }
.badge-success{ background:var(--success-bg); color:var(--success); }
.badge-warning{ background:var(--warning-bg); color:var(--warning); }
.badge-danger{ background:var(--danger-bg); color:var(--danger); }
.badge-info{ background:var(--accent-light); color:var(--accent); }
.badge-muted{ background:#eef1f7; color:var(--muted); }

/* --------------------------------------------------------------------
   Layout dashboard: sidebar + topbar + content
   -------------------------------------------------------------------- */
.app-shell{ display:flex; min-height:100vh; }

.sidebar{
  width:250px; flex-shrink:0; padding:1.4rem 1rem;
  position:sticky; top:0; height:100vh; display:flex; flex-direction:column;
  background:var(--sidebar-bg); color:#fff; z-index:40;
}
.sidebar .brand{ display:flex; align-items:center; gap:.6rem; padding:.4rem .5rem 1.6rem; }
.sidebar .brand .logo-mark{ width:34px; height:34px; border-radius:10px; background:linear-gradient(135deg, #3b82f6, #1d4ed8); display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.sidebar .brand .logo-mark svg{ width:18px; height:18px; color:#fff; }
.sidebar .brand .brand-text .app-name{ font-weight:700; font-size:.92rem; line-height:1.2; }
.sidebar .brand .brand-text .app-tag{ font-size:.68rem; color:#64748b; font-weight:500; }

.nav-group{ margin-bottom:1rem; }
.nav-link{
  display:flex; align-items:center; gap:.7rem; padding:.68rem .8rem; border-radius:10px;
  font-size:.86rem; font-weight:600; color:#94a3b8; margin-bottom:.15rem; transition:.15s ease;
}
.nav-link svg{ width:18px; height:18px; flex-shrink:0; }
.nav-link:hover{ background:rgba(255,255,255,.06); color:#e2e8f0; }
.nav-link.active{ background:var(--accent); color:#fff; }

.sidebar-footer{ margin-top:auto; padding-top:1rem; }
.user-mini{ display:flex; align-items:center; gap:.6rem; padding:.6rem; border-radius:12px; background:rgba(255,255,255,.05); }
.user-mini .avatar{ width:34px; height:34px; border-radius:50%; background:linear-gradient(135deg, #38bdf8, #1d4ed8); color:#fff; display:flex; align-items:center; justify-content:center; font-weight:700; font-size:.76rem; flex-shrink:0; }
.user-mini .u-name{ font-size:.8rem; font-weight:700; color:#fff; }
.user-mini .u-role{ font-size:.68rem; color:#64748b; }
.logout-link{ display:flex; align-items:center; gap:.5rem; font-size:.78rem; color:#64748b; padding:.65rem .6rem; margin-top:.2rem; }
.logout-link:hover{ color:#f87171; }
.logout-link svg{ width:15px; height:15px; }

.main-col{ flex:1; min-width:0; display:flex; flex-direction:column; }
.topbar{
  display:flex; align-items:center; justify-content:space-between; gap:1rem;
  padding:1.1rem 1.8rem; position:sticky; top:0; z-index:30;
  background:rgba(247,248,250,.85); backdrop-filter:blur(10px);
  border-bottom:1px solid var(--border);
}
.topbar .page-title{ font-size:1.1rem; font-weight:700; }
.topbar .page-sub{ font-size:.78rem; color:var(--muted); margin-top:.1rem; }
.hamburger-btn{ display:none; }
.content{ padding:1.6rem 1.8rem 3rem; flex:1; }

@media (max-width:860px){
  .sidebar{ position:fixed; left:0; top:0; height:100vh; transform:translateX(-100%); transition:transform .22s ease; width:250px; box-shadow:0 0 40px rgba(0,0,0,.3); }
  .sidebar.open{ transform:translateX(0); }
  .sidebar-scrim{ display:none; position:fixed; inset:0; background:rgba(10,15,30,.4); z-index:39; }
  .sidebar-scrim.active{ display:block; }
  .hamburger-btn{ display:inline-flex; align-items:center; justify-content:center; width:36px; height:36px; border-radius:9px; background:var(--surface); border:1px solid var(--border); cursor:pointer; color:var(--text2); }
  .topbar{ padding:1rem 1.1rem; }
  .content{ padding:1.2rem 1.1rem 2.5rem; }
}

/* --------------------------------------------------------------------
   Statistik ringkas
   -------------------------------------------------------------------- */
.stat-grid{ display:grid; grid-template-columns:repeat(3, 1fr); gap:.9rem; margin-bottom:1.5rem; }
@media (max-width:700px){ .stat-grid{ grid-template-columns:1fr 1fr; } }
.stat-card{ padding:1.2rem 1.3rem; }
.stat-card .stat-icon{ width:38px; height:38px; border-radius:10px; display:flex; align-items:center; justify-content:center; margin-bottom:.8rem; }
.stat-card .stat-icon svg{ width:19px; height:19px; }
.stat-card .stat-value{ font-size:1.5rem; font-weight:700; line-height:1; }
.stat-card .stat-label{ font-size:.78rem; color:var(--muted); margin-top:.35rem; }

/* --------------------------------------------------------------------
   Kartu akun tersimpan
   -------------------------------------------------------------------- */
.akun-toolbar{ display:flex; align-items:center; justify-content:space-between; gap:1rem; margin-bottom:1.2rem; flex-wrap:wrap; }
.search-box{ position:relative; width:260px; max-width:100%; }
.search-box svg{ position:absolute; left:.85rem; top:50%; transform:translateY(-50%); width:16px; height:16px; color:var(--muted-soft); }
.search-box input{ padding-left:2.5rem; }

.akun-grid{ display:grid; grid-template-columns:repeat(auto-fill, minmax(280px, 1fr)); gap:1rem; }
.akun-card{ padding:1.2rem 1.3rem; }
.akun-head{ display:flex; align-items:center; gap:.75rem; margin-bottom:1rem; }
.akun-platform-icon{ width:42px; height:42px; border-radius:11px; flex-shrink:0; display:flex; align-items:center; justify-content:center; color:#fff; font-weight:700; font-size:1rem; }
.akun-platform-name{ font-size:.92rem; font-weight:700; color:var(--text); }
.akun-updated{ font-size:.7rem; color:var(--muted-soft); }
.akun-actions-top{ margin-left:auto; display:flex; gap:.3rem; }

.akun-field-row{ margin-bottom:.7rem; }
.akun-field-row .afr-label{ font-size:.68rem; font-weight:700; color:var(--muted); text-transform:uppercase; letter-spacing:.03em; margin-bottom:.3rem; }
.akun-field-value{
  display:flex; align-items:center; gap:.5rem;
  padding:.55rem .7rem; border-radius:9px; background:var(--bg); border:1px solid var(--border);
  font-size:.85rem; color:var(--text); font-family:'Courier New', monospace;
}
.akun-field-value span{ flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.akun-field-value button{ background:none; border:none; cursor:pointer; color:var(--muted); padding:.2rem; display:flex; flex-shrink:0; }
.akun-field-value button:hover{ color:var(--accent); }
.akun-field-value button svg{ width:15px; height:15px; }

.akun-catatan{ font-size:.78rem; color:var(--muted); margin-top:.6rem; padding-top:.6rem; border-top:1px dashed var(--border); }

.empty-state{ text-align:center; padding:3rem 1.5rem; color:var(--muted); }
.empty-state svg{ width:48px; height:48px; color:var(--muted-soft); margin-bottom:1rem; }
.empty-state .es-title{ font-weight:700; color:var(--text2); margin-bottom:.3rem; }

/* --------------------------------------------------------------------
   Modal
   -------------------------------------------------------------------- */
.modal-overlay{ position:fixed; inset:0; background:rgba(15,23,42,.45); display:none; align-items:center; justify-content:center; padding:1.2rem; z-index:100; }
.modal-overlay.active{ display:flex; }
.modal-box{ width:100%; max-width:440px; max-height:88vh; overflow-y:auto; padding:1.7rem; animation:modal-in .18s ease; }
@keyframes modal-in{ from{ opacity:0; transform:translateY(12px); } to{ opacity:1; transform:none; } }
.modal-head{ display:flex; align-items:flex-start; justify-content:space-between; margin-bottom:1.1rem; }
.modal-head h3{ font-size:1.05rem; font-weight:700; }
.modal-close{ background:none; border:none; cursor:pointer; color:var(--muted); padding:.3rem; }

/* --------------------------------------------------------------------
   Toast
   -------------------------------------------------------------------- */
.toast-stack{ position:fixed; top:1.1rem; right:1.1rem; z-index:200; display:flex; flex-direction:column; gap:.6rem; }
.toast{
  min-width:250px; max-width:320px; padding:.85rem 1rem; border-radius:12px;
  background:var(--surface); border:1px solid var(--border); box-shadow:0 12px 28px -14px rgba(15,23,42,.3);
  display:flex; align-items:flex-start; gap:.6rem; font-size:13.5px; animation:toast-in .2s ease;
}
@keyframes toast-in{ from{ opacity:0; transform:translateX(16px); } to{ opacity:1; transform:none; } }
.toast svg{ width:17px; height:17px; flex-shrink:0; margin-top:1px; }
.toast.toast-success svg{ color:var(--success); }
.toast.toast-error svg{ color:var(--danger); }
.toast.toast-info svg{ color:var(--accent); }

.spinner{ width:14px; height:14px; border-radius:50%; border:2.5px solid rgba(255,255,255,.4); border-top-color:#fff; animation:spin .7s linear infinite; display:none; }
.spinner.dark{ border-color:rgba(37,99,235,.25); border-top-color:var(--accent); }
@keyframes spin{ to{ transform:rotate(360deg); } }
.btn.is-loading .spinner{ display:inline-block; }
.btn.is-loading .btn-label{ opacity:.75; }

/* --------------------------------------------------------------------
   Halaman Login / Setup
   -------------------------------------------------------------------- */
.auth-shell{ min-height:100vh; display:flex; align-items:center; justify-content:center; padding:2rem 1.2rem; background: linear-gradient(180deg, #eef3fc 0%, #f7f8fa 60%); }
.auth-card{ width:100%; max-width:400px; padding:2.2rem 2rem; }
.auth-brand{ display:flex; align-items:center; gap:.6rem; margin-bottom:1.6rem; }
.auth-brand .logo-mark{ width:36px; height:36px; border-radius:10px; background:linear-gradient(135deg, #3b82f6, #1d4ed8); display:flex; align-items:center; justify-content:center; }
.auth-brand .logo-mark svg{ width:19px; height:19px; color:#fff; }
.auth-brand span{ font-weight:700; font-size:1rem; }
.auth-card h2{ font-size:1.25rem; margin-bottom:.4rem; }
.auth-card p.auth-sub{ font-size:.85rem; color:var(--muted); margin-bottom:1.5rem; }

.form-alert{ display:none; align-items:flex-start; gap:.6rem; font-size:.8rem; padding:.75rem .9rem; border-radius:12px; margin-bottom:1.1rem; }
.form-alert.active{ display:flex; }
.form-alert.error{ background:var(--danger-bg); color:var(--danger); }
.form-alert.info{ background:var(--accent-light); color:var(--accent); }
.form-alert svg{ width:16px; height:16px; flex-shrink:0; margin-top:1px; }

.security-note{ display:flex; gap:.6rem; align-items:flex-start; font-size:.74rem; color:var(--muted); margin-top:1.4rem; padding:.8rem; border-radius:12px; background:var(--bg); }
.security-note svg{ width:15px; height:15px; flex-shrink:0; margin-top:1px; color:var(--accent); }

@media (prefers-reduced-motion: reduce){
  *{ animation-duration:.001ms !important; transition-duration:.001ms !important; }
}