@import url(/fonts/fonts.css);

:root {
  --bg: #f1f2f4;
  --surface: #ffffff;
  --surface-2: #f7f8f9;
  --ink: #0b0d12;
  --ink-2: #353b47;
  --muted: #6b7280;
  --faint: #9aa1ad;
  --line: rgba(11, 13, 18, .07);
  --line-2: rgba(11, 13, 18, .12);
  --track: #e8eaee;
  --ok: #12a865;
  --ok-2: #3ddc97;
  --warn: #e39a00;
  --warn-2: #ffc84a;
  --hi: #e5484d;
  --hi-2: #ff8a80;
  --lo: #2f7cf6;
  --lo-2: #7fb2ff;
  --brand: #6e56f8;
  --brand-2: #a796ff;
  --brand-wash: #f0edff;
  --shadow: 0 1px 2px rgba(16, 24, 40, .04), 0 6px 24px -6px rgba(16, 24, 40, .06);
  --shadow-up: 0 -1px 0 rgba(11, 13, 18, .05), 0 -8px 30px rgba(16, 24, 40, .06);
  --r: 20px;
  --r-sm: 14px;
  --display: 'Inter Tight', 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  --sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --ease: cubic-bezier(.22, .9, .3, 1);
  --tab-h: 62px;
  color-scheme: light;
}
:root[data-theme='dark'] {
  --bg: #07080a;
  --surface: #121419;
  --surface-2: #181b21;
  --ink: #f3f4f6;
  --ink-2: #c9cdd4;
  --muted: #8b919c;
  --faint: #626873;
  --line: rgba(255, 255, 255, .06);
  --line-2: rgba(255, 255, 255, .11);
  --track: #22262e;
  --ok: #2fd47f;
  --warn: #ffb020;
  --hi: #ff5c61;
  --lo: #4d94ff;
  --brand: #8b78ff;
  --brand-wash: #1d1933;
  --shadow: 0 0 0 1px rgba(255, 255, 255, .04);
  --shadow-up: 0 -1px 0 rgba(255, 255, 255, .06);
  color-scheme: dark;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  background: var(--bg); color: var(--ink); font: 400 15px/1.5 var(--sans);
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
  -webkit-tap-highlight-color: transparent; min-height: 100vh;
  font-feature-settings: 'cv11', 'ss01';
}
a { color: inherit; text-decoration: none; }
button, input, textarea, select { font: inherit; color: inherit; }
button { cursor: pointer; }
h1, h2, h3 { font-family: var(--display); margin: 0; letter-spacing: -.025em; }
h1 { font-size: 32px; font-weight: 700; line-height: 1.05; }
h2 { font-size: 20px; font-weight: 700; line-height: 1.2; }
h3 { font-size: 16px; font-weight: 600; }
.num { font-family: var(--display); font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
.label { font: 600 11px/1.2 var(--display); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.muted { color: var(--muted); }
.small { font-size: 13px; }
.xs { font-size: 12px; }
.row { display: flex; align-items: center; gap: 10px; }
.between { justify-content: space-between; }
.wrap { flex-wrap: wrap; }
.grow { flex: 1; min-width: 0; }
.mt { margin-top: 12px; } .mt2 { margin-top: 22px; }
.hide { display: none !important; }

/* layout */
.app { display: flex; min-height: 100vh; }
.side { width: 248px; flex: none; padding: 26px 16px; position: sticky; top: 0; height: 100vh; display: flex; flex-direction: column; gap: 2px; }
.logo { display: flex; align-items: center; gap: 10px; padding: 0 10px 26px; font: 700 17px var(--display); letter-spacing: -.02em; }
.logo i { width: 28px; height: 28px; border-radius: 9px; background: var(--ink); display: grid; place-items: center; }
.logo i svg { width: 16px; height: 16px; color: var(--bg); }
.side a.nav { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 12px; color: var(--muted); font: 600 14px var(--display); letter-spacing: -.01em; transition: background .15s, color .15s; }
.side a.nav svg { width: 20px; height: 20px; }
.side a.nav:hover { color: var(--ink); background: var(--surface); }
.side a.nav.on { color: var(--ink); background: var(--surface); box-shadow: var(--shadow); }
.side .foot { margin-top: auto; display: flex; flex-direction: column; gap: 4px; }
.main { flex: 1; min-width: 0; padding: 34px 40px 80px; max-width: 1160px; }
.page-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 24px; flex-wrap: wrap; }
.page-head .sub { margin-top: 8px; color: var(--muted); font-size: 14px; }
.back { display: inline-flex; align-items: center; gap: 6px; color: var(--muted); font: 600 13px var(--display); margin-bottom: 14px; }
.back svg { width: 16px; height: 16px; }
.tabbar { display: none; }

/* enter animation */
@keyframes rise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.rise > * { animation: rise .5s var(--ease) both; }
.rise > *:nth-child(2) { animation-delay: .04s; } .rise > *:nth-child(3) { animation-delay: .08s; }
.rise > *:nth-child(4) { animation-delay: .12s; } .rise > *:nth-child(5) { animation-delay: .16s; }
.rise > *:nth-child(6) { animation-delay: .2s; } .rise > *:nth-child(n+7) { animation-delay: .24s; }
@media (prefers-reduced-motion: reduce) { .rise > * { animation: none; } }

@media (max-width: 860px) {
  .side { display: none; }
  .main { padding: 14px 16px calc(var(--tab-h) + 30px + env(safe-area-inset-bottom)); }
  h1 { font-size: 28px; }
  .page-head { margin-bottom: 18px; align-items: flex-start; }
  .tabbar {
    display: grid; grid-template-columns: repeat(5, 1fr); position: fixed; z-index: 50;
    left: 10px; right: 10px; bottom: calc(10px + env(safe-area-inset-bottom)); height: var(--tab-h);
    background: color-mix(in srgb, var(--surface) 88%, transparent);
    backdrop-filter: saturate(1.6) blur(18px); -webkit-backdrop-filter: saturate(1.6) blur(18px);
    border-radius: 22px; box-shadow: 0 0 0 1px var(--line), 0 12px 32px -8px rgba(16, 24, 40, .18);
  }
  .tabbar a { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; color: var(--faint); font: 600 10.5px var(--display); letter-spacing: .01em; transition: color .15s; }
  .tabbar a svg { width: 22px; height: 22px; }
  .tabbar a.on { color: var(--ink); }
}