:root {
  --ak-font: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --ak-sidebar-width: 244px;
  --ak-sidebar-rail: 62px;
  --ak-topbar-height: 58px;
  --ak-radius-xs: 8px;
  --ak-radius-sm: 10px;
  --ak-radius-md: 12px;
  --ak-radius-lg: 18px;
  --ak-gap: 16px;
}

* { box-sizing: border-box; }
html, body { width: 100%; min-height: 100%; }
html { overflow: hidden; }

body.ak-id-theme {
  --ak-bg: #ffffff;
  --ak-panel: #ffffff;
  --ak-panel-2: #f7f7f8;
  --ak-panel-3: #f1f1f3;
  --ak-border: rgba(0,0,0,.10);
  --ak-border-strong: rgba(0,0,0,.16);
  --ak-text: #202123;
  --ak-muted: #6b7280;
  --ak-muted-2: #8e8ea0;
  --ak-soft: #f3f4f6;
  --ak-accent: #202123;
  --ak-accent-2: #343541;
  --ak-accent-soft: rgba(0,0,0,.055);
  --ak-hover: rgba(0,0,0,.045);
  --ak-chip: #f3f4f6;
  --ak-warning: #f4b740;
  --ak-danger: #d92d20;
  --ak-shadow: 0 16px 48px rgba(0,0,0,.08);

  margin: 0;
  overflow: hidden;
  font-family: var(--ak-font);
  background: var(--ak-bg);
  color: var(--ak-text);
}

body.ak-id-theme.ak-theme-dark {
  --ak-bg: #0d0d0d;
  --ak-panel: #111111;
  --ak-panel-2: #161616;
  --ak-panel-3: #1c1c1c;
  --ak-border: #2a2a2a;
  --ak-border-strong: #343434;
  --ak-text: #efefef;
  --ak-muted: #8f8f8f;
  --ak-muted-2: #5f5f5f;
  --ak-soft: #1f1f1f;
  --ak-accent: #e8ff47;
  --ak-accent-2: #d8ee3f;
  --ak-accent-soft: rgba(232,255,71,.08);
  --ak-hover: rgba(255,255,255,.055);
  --ak-chip: #1f1f1f;
  --ak-shadow: 0 20px 64px rgba(0,0,0,.35);
  background:
    radial-gradient(circle at 18% 0%, rgba(232,255,71,.06), transparent 24%),
    var(--ak-bg);
}

body.ak-id-theme a { color: inherit; }
body.ak-id-theme button,
body.ak-id-theme input,
body.ak-id-theme select,
body.ak-id-theme textarea { font-family: var(--ak-font); }
body.ak-id-theme button { -webkit-tap-highlight-color: transparent; }

.ak-icon { width: 18px; height: 18px; flex: 0 0 auto; }
.ak-kicker {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--ak-muted);
  font-size: 10px;
  font-weight: 760;
  letter-spacing: .08em;
  text-transform: uppercase;
}
body.ak-theme-dark .ak-kicker { color: var(--ak-accent); }

.ak-gradient-text { color: var(--ak-text); }

.ak-btn {
  min-height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: 1px solid var(--ak-border);
  border-radius: 11px;
  background: var(--ak-panel-2);
  color: var(--ak-text);
  padding: 0 12px;
  text-decoration: none;
  cursor: pointer;
  font: 700 12px/1 var(--ak-font);
  transition: background .15s ease, border-color .15s ease, transform .15s ease;
}
.ak-btn:hover { background: var(--ak-panel-3); border-color: var(--ak-border-strong); transform: translateY(-1px); }
.ak-btn-primary { background: var(--ak-accent); color: #fff; border-color: var(--ak-accent); }
body.ak-theme-dark .ak-btn-primary { color: #0d0d0d; }
.ak-btn-ghost { background: var(--ak-panel-2); color: var(--ak-text); }
.ak-btn-soft { background: var(--ak-accent-soft); color: var(--ak-text); border-color: var(--ak-border); }
body.ak-theme-dark .ak-btn-soft { color: var(--ak-accent); border-color: rgba(232,255,71,.18); }
.ak-btn-sm { min-height: 34px; padding: 0 11px; font-size: 12px; }

.ak-icon-btn {
  width: 32px;
  height: 32px;
  flex: 0 0 32px;
  display: inline-grid;
  place-items: center;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: var(--ak-muted);
  cursor: pointer;
  transition: background .14s ease, color .14s ease, border-color .14s ease;
}
.ak-icon-btn:hover,
.ak-icon-btn[aria-pressed="true"] { background: var(--ak-hover); color: var(--ak-text); }

.ak-scroll-area { min-height: 0; overflow: auto; scrollbar-width: thin; scrollbar-color: var(--ak-border-strong) transparent; }
.ak-scroll-area::-webkit-scrollbar { width: 7px; height: 7px; }
.ak-scroll-area::-webkit-scrollbar-thumb { background: var(--ak-border-strong); border-radius: 99px; }
.ak-scroll-area::-webkit-scrollbar-track { background: transparent; }

::selection { background: rgba(142,142,160,.22); color: var(--ak-text); }
body.ak-theme-dark ::selection { background: rgba(232,255,71,.24); color: var(--ak-text); }