@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&family=DM+Mono:wght@400;500&display=swap');

*, *::before, *::after { box-sizing:border-box; margin:0; padding:0; }

:root {

  --k1:#1A0533;
  --k2:#4C1D95;
  --k3:#7C3AED;
  --k4:#A78BFA;
  --k5:#C4B5FD;
  --k6:#E879F9;
  --k7:#38BDF8;
  --ok:#10B981;
  --err:#F43F5E;

  --grad:          linear-gradient(135deg, #4C1D95 0%, #7C3AED 50%, #6366F1 100%);
  --grad-soft:     linear-gradient(135deg, #7C3AED22 0%, #818CF822 100%);
  --grad-hero:     linear-gradient(135deg, #1A0533 0%, #2D1260 40%, #4C1D95 70%, #6D28D9 100%);
  --grad-card:     linear-gradient(145deg, rgba(255,255,255,.14) 0%, rgba(255,255,255,.04) 100%);
  --grad-violet:   linear-gradient(135deg, #7C3AED, #6366F1);
  --grad-lavanda:  linear-gradient(135deg, #A78BFA, #C4B5FD);
  --grad-accent:   linear-gradient(135deg, #E879F9, #A78BFA);
  --grad-sidebar:  linear-gradient(180deg, #1A0533 0%, #2D1260 50%, #1A0533 100%);

  --bg:         #F5F3FF;
  --bg2:        #FFFFFF;
  --bg3:        #EDE9FE;
  --bg-app:     #F8F7FF;
  --bg-dark:    #0F0520;

  --text:       #1A0533;
  --text2:      #5B4B8A;
  --text3:      #9C8EC1;

  --border:     rgba(124,58,237,.12);
  --border2:    rgba(124,58,237,.22);
  --border-w:   rgba(255,255,255,.22);

  --glass:      rgba(255,255,255,.10);
  --glass-md:   rgba(255,255,255,.18);
  --glass-hi:   rgba(255,255,255,.28);
  --glass-dark: rgba(26,5,51,.45);
  --glass-frost: rgba(248,247,255,.88);

  --shadow-xs:  0 1px 6px rgba(76,29,149,.07);
  --shadow-sm:  0 2px 12px rgba(76,29,149,.09);
  --shadow:     0 8px 32px rgba(76,29,149,.13);
  --shadow-lg:  0 16px 56px rgba(76,29,149,.18);
  --shadow-xl:  0 28px 80px rgba(76,29,149,.22);
  --shadow-glow:0 0 40px rgba(167,139,250,.35);
  --shadow-card:0 4px 24px rgba(76,29,149,.09), 0 1px 4px rgba(76,29,149,.05);

  --radius:    20px;
  --radius-sm: 14px;
  --radius-xs: 10px;
  --radius-pill:999px;

  --sidebar:260px;
}

html { font-size:15px; scroll-behavior:smooth; }

body {
  font-family:'Inter', system-ui, sans-serif;
  background:var(--bg-app);
  color:var(--text);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

::-webkit-scrollbar { width:5px; height:5px; }
::-webkit-scrollbar-track { background:transparent; }
::-webkit-scrollbar-thumb { background:var(--k4); border-radius:99px; opacity:.5; }

.screen { display:none; min-height:100vh; }
.screen.active { display:block; }
.app-screen.active { display:flex; }

.gt {
  background:var(--grad-violet);
  -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text;
}
.gt-lavanda {
  background:var(--grad-lavanda);
  -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text;
}
.gt-accent {
  background:var(--grad-accent);
  -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text;
}

.glass {
  background:var(--glass);
  backdrop-filter:blur(20px); -webkit-backdrop-filter:blur(20px);
  border:1px solid var(--border-w);
}
.glass-light {
  background:var(--glass-frost);
  backdrop-filter:blur(24px); -webkit-backdrop-filter:blur(24px);
  border:1px solid rgba(255,255,255,.6);
}

.font-display { font-family:'Inter', sans-serif; }
.font-mono    { font-family:'DM Mono', monospace; }

.brand-word {
  font-family:'Inter', sans-serif;
  font-size:22px; font-weight:800;
  background:var(--grad-violet);
  -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text;
  letter-spacing:-.5px;
}
.brand-word-white {
  background:none!important;
  -webkit-text-fill-color:#fff!important;
  color:#fff!important;
}
.brand-word-sm { font-size:18px; }

.klaro-mark {
  width:40px; height:40px; border-radius:12px;
  background:var(--grad-violet);
  display:flex; align-items:center; justify-content:center;
  flex-shrink:0; box-shadow:var(--shadow-glow);
}
.klaro-mark-sm { width:32px; height:32px; border-radius:9px; }

.section-bar {
  display:flex; align-items:center; justify-content:space-between; margin-bottom:16px;
}
.section-bar-title {
  font-weight:700; font-size:16px; color:var(--k1);
}

.two-col { display:grid; grid-template-columns:1fr 340px; gap:20px; align-items:start; }

.gold-line {
  height:3px; width:48px; border-radius:99px;
  background:var(--grad-violet); margin-bottom:16px;
}

@keyframes fadeUp   { from{opacity:0;transform:translateY(16px)} to{opacity:1;transform:translateY(0)} }
@keyframes fadeIn   { from{opacity:0} to{opacity:1} }
@keyframes float    { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-8px)} }
@keyframes glow-pulse { 0%,100%{box-shadow:0 0 20px rgba(167,139,250,.3)} 50%{box-shadow:0 0 40px rgba(167,139,250,.6)} }
@keyframes shimmer  { from{background-position:-200% 0} to{background-position:200% 0} }
@keyframes spin-slow { from{transform:rotate(0deg)} to{transform:rotate(360deg)} }
@keyframes badge-pulse { 0%,100%{opacity:1} 50%{opacity:.4} }

@media(max-width:1100px) { .two-col, .dash-two-col { grid-template-columns:1fr; } }
@media(max-width:600px)  { .form-row { grid-template-columns:1fr; } }

:root[data-theme="light"] { color-scheme: light; }
:root[data-theme="dark"] {
  color-scheme: dark;
  --k1:#F7F2FF;
  --k2:#CDBDFF;
  --k3:#9D7CFF;
  --k4:#BCA8FF;
  --k5:#D8CEFF;
  --k6:#F08CFF;
  --k7:#67D4FF;
  --bg:#10091F;
  --bg2:#171027;
  --bg3:#211535;
  --bg-app:#0E071B;
  --bg-dark:#080312;
  --text:#F8F4FF;
  --text2:#D3C7EF;
  --text3:#A999CE;
  --border:rgba(216,206,255,.16);
  --border2:rgba(188,168,255,.28);
  --glass:rgba(255,255,255,.08);
  --glass-md:rgba(255,255,255,.12);
  --glass-hi:rgba(255,255,255,.18);
  --glass-dark:rgba(6,3,16,.62);
  --glass-frost:rgba(18,10,33,.86);
  --shadow-xs:0 1px 6px rgba(0,0,0,.22);
  --shadow-sm:0 2px 12px rgba(0,0,0,.26);
  --shadow:0 12px 34px rgba(0,0,0,.34);
  --shadow-lg:0 20px 58px rgba(0,0,0,.42);
  --shadow-xl:0 30px 84px rgba(0,0,0,.5);
  --shadow-card:0 12px 38px rgba(0,0,0,.32), inset 0 1px 0 rgba(255,255,255,.05);
}