/* base.css — variables, reset, typography, dark mode */

:root{
  /* Brand */
  --blue:#0878e8;
  --blue-2:#0666c8;
  --blue-soft:#eaf3fe;

  /* Surfaces */
  --bg:#ffffff;
  --bg-soft:#f7f9fc;
  --surface:#ffffff;
  --line:#e6e8ec;
  --line-soft:#eef0f4;

  /* Text */
  --text:#111827;
  --text-2:#3d4a5c;
  --muted:#7b818b;

  /* Status */
  --ok:#0a7d34;
  --ok-bg:#e8f7ee;
  --warn:#8a6d00;
  --warn-bg:#fff7d6;
  --err:#c0392b;
  --err-bg:#fdeceb;

  /* Layout */
  --app-max:920px;
  --radius:14px;
  --radius-sm:10px;
  --radius-lg:18px;
  --nav-h:74px;

  /* Shadow */
  --shadow-sm:0 1px 2px rgba(15,23,42,.06);
  --shadow-md:0 4px 14px rgba(15,23,42,.08);
  --shadow-lg:0 10px 30px rgba(15,23,42,.14);

  /* Motion */
  --t-fast:.12s ease;
  --t-med:.25s ease;
}

@media (prefers-color-scheme: dark){
  :root{
    --bg:#0f1115;
    --bg-soft:#161a21;
    --surface:#161a21;
    --line:#232833;
    --line-soft:#1c212a;
    --text:#e8ecf3;
    --text-2:#c3cad6;
    --muted:#8891a1;
    --blue-soft:#12233c;
  }
}

*,*::before,*::after{box-sizing:border-box}
html,body{margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{
  background:var(--bg);
  color:var(--text);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  font-size:15px;
  line-height:1.45;
  -webkit-font-smoothing:antialiased;
  -webkit-tap-highlight-color:transparent;
}
img,svg{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
input,select,textarea{font:inherit}

/* App shell */
.app{
  width:100%;
  max-width:var(--app-max);
  margin:0 auto;
  min-height:100dvh;
  padding-bottom:calc(var(--nav-h) + 24px);
  background:var(--bg);
}

/* Top bar */
.topbar{
  height:56px;
  display:flex;
  align-items:center;
  padding:0 14px;
  border-bottom:1px solid var(--line-soft);
  background:var(--bg);
  position:sticky;
  top:0;
  z-index:10;
}
.brand{display:flex;align-items:center;gap:10px}
.logo{
  width:36px;height:36px;border-radius:11px;
  background:linear-gradient(145deg,#2b91ff,#1264d5);
  display:grid;place-items:center;
  box-shadow:0 3px 8px rgba(8,120,232,.25);
}
.logo svg{width:22px;height:22px}
.brand-name{font-size:17px;font-weight:800;letter-spacing:-.3px}

/* Utility */
.pressable{transition:transform var(--t-fast),filter var(--t-fast)}
.pressable:active,.pressed{transform:scale(.96);filter:brightness(.97)}

/* Visually hidden (a11y) */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

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