@import url('https://fonts.googleapis.com/css2?family=DM+Sans:opsz,wght@9..40,300;9..40,400;9..40,500;9..40,600;9..40,700&family=JetBrains+Mono:wght@400;500;600&family=Varela+Round&display=swap');

:root{
  --font-ui:"DM Sans",system-ui,sans-serif;
  --font-head:"Varela Round","DM Sans",sans-serif;
  --font-heading:var(--font-head);
  --font-mono:"JetBrains Mono",ui-monospace,monospace;
  --fw-light:300;--fw-normal:400;--fw-medium:500;--fw-semi:600;--fw-bold:700;

  --blue-deep:#0f2847;--blue-base:#162d50;--blue-mid:#1b3461;--blue-light:#204075;
  --blue-surface:rgba(255,255,255,.07);--blue-surface-2:rgba(255,255,255,.12);--blue-surface-3:rgba(255,255,255,.18);

  --white:#ffffff;--white-95:rgba(255,255,255,.95);--white-85:rgba(255,255,255,.85);
  --white-70:rgba(255,255,255,.7);--white-50:rgba(255,255,255,.5);--white-40:rgba(255,255,255,.4);
  --white-35:rgba(255,255,255,.35);--white-30:rgba(255,255,255,.3);--white-20:rgba(255,255,255,.2);
  --white-15:rgba(255,255,255,.15);--white-12:rgba(255,255,255,.12);--white-08:rgba(255,255,255,.08);
  --white-06:rgba(255,255,255,.06);--white-04:rgba(255,255,255,.04);

  --mio-zlta:#f6c443;--gold:var(--mio-zlta);--gold-soft:#fbf2d8;
  --green:#2f9e6b;--green-soft:#e7f4ee;
  --orange:#e0883a;--orange-soft:#fcf0e2;
  --red:#d9574f;--red-soft:#fbeae8;
  --tb:#00a651;--fio:#2563eb;

  --bg:#f4f3ef;--surface:#ffffff;--surface-2:#faf9f6;
  --ink:#1b1b27;--ink-2:#5d5d6e;--ink-3:#9b9baa;
  --line:#e9e8e2;--line-2:#f0efe9;

  --r:1px;--r-sm:1px;--r-pill:1px;--r-lg:1px;--r-xl:1px;
  --sh-sm:0 1px 2px rgba(20,20,40,.05),0 1px 3px rgba(20,20,40,.05);
  --sh:0 2px 6px rgba(20,20,40,.05),0 10px 28px rgba(20,20,40,.06);
  --sh-lg:0 8px 20px rgba(20,20,40,.08),0 24px 56px rgba(20,20,40,.10);

  --primary:var(--blue-deep);--primary-ink:#ffffff;
}

[data-theme="dark"]{
  --bg:var(--blue-deep);--surface:var(--blue-base);--surface-2:var(--blue-mid);
  --ink:var(--white);--ink-2:var(--white-70);--ink-3:var(--white-50);
  --line:var(--white-12);--line-2:var(--white-08);
  --gold-soft:rgba(246,196,67,.16);
  --green-soft:rgba(47,158,107,.18);--orange-soft:rgba(224,136,58,.18);--red-soft:rgba(217,87,79,.18);
  --sh-sm:0 1px 3px rgba(0,0,0,.25);
  --sh:0 2px 6px rgba(0,0,0,.25),0 10px 28px rgba(0,0,0,.30);
  --sh-lg:0 8px 20px rgba(0,0,0,.35),0 24px 56px rgba(0,0,0,.40);
  --primary:var(--mio-zlta);--primary-ink:var(--blue-deep);
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
html,body{overflow-x:hidden}
body{font-family:var(--font-ui);background:var(--bg);color:var(--ink);font-size:18px;line-height:1.6;-webkit-font-smoothing:antialiased;transition:background .2s,color .2s}
a{color:inherit;text-decoration:none}
button{font-family:inherit;font-size:inherit;color:inherit;border:none;background:none;cursor:pointer}
input,select,textarea{font-family:inherit;font-size:18px;color:var(--ink);background:var(--surface);border:1px solid var(--line);border-radius:var(--r-sm);padding:11px 13px;width:100%;outline:none}
input:focus,select:focus,textarea:focus{border-color:var(--gold)}
h1,h2,h3{font-family:var(--font-head);font-weight:600;line-height:1.15}
img{display:block;max-width:100%}
.mono{font-family:var(--font-mono)}

.btn{display:inline-flex;align-items:center;gap:8px;font-weight:600;border-radius:var(--r-pill);padding:11px 22px;transition:.16s}
.btn:active{transform:translateY(1px);opacity:.8}
.btn-primary{background:var(--primary);color:var(--primary-ink)}
.btn-ghost{color:var(--ink-2)}.btn-ghost:hover{color:var(--ink);background:var(--surface-2)}

.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--sh-sm)}

.badge{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.3px;padding:3px 9px;border-radius:var(--r-pill)}
.badge.ok{background:var(--green-soft);color:var(--green)}
.badge.warn{background:var(--orange-soft);color:var(--orange)}
.badge.review{background:var(--gold-soft);color:var(--gold)}

.bankdot{width:9px;height:9px;border-radius:50%;display:inline-block}
.bankdot.tb{background:var(--tb)}.bankdot.fio{background:var(--fio)}
.bankdot.cr{background:linear-gradient(135deg,var(--tb) 50%,var(--gold) 50%)}

.app-shell{display:grid;grid-template-columns:212px 1fr;min-height:100vh}
.sidebar{background:var(--surface);border-right:1px solid var(--line);padding:20px 14px;display:flex;flex-direction:column;position:sticky;top:0;height:100vh}
.sidebar a{display:flex;align-items:center;gap:12px;padding:11px 13px;border-radius:var(--r-sm);color:var(--ink-2);font-weight:500;transition:.14s}
.sidebar a:hover{background:var(--surface-2);color:var(--ink)}
.sidebar a.active{background:var(--primary);color:var(--primary-ink)}
.main{padding:26px 34px 60px;max-width:1000px}

.icon{width:20px;height:20px;display:inline-block;vertical-align:middle}
::-webkit-scrollbar{width:6px}::-webkit-scrollbar-track{background:transparent}::-webkit-scrollbar-thumb{background:var(--ink-3);opacity:.4;border-radius:1px}