/* Wharf design system → токены и движение поверх app.css.
   Источник: https://demo.codeandchill.store/wharf/ */

@import url("https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,500;12..96,600;12..96,700&family=Hanken+Grotesk:wght@400;500;600;700&display=swap");

:root {
  --t-100: #fdf3d6;
  --t-200: #fbe4a6;
  --t-300: #f8d475;
  --t-400: #f4c24a;
  --t-500: #e3a81f;
  --t-600: #c58d10;
  --t-700: #9d6f0c;
  --t-800: #7a560a;
  --t-900: #553b06;
  --backdrop: #e9e6dd;
  --app-1: #f7f5ef;
  --app-2: #f3f1ea;
  --app-3: var(--t-100);
  --card-wharf: #fffefab8;
  --solid: #fbfaf6;
  --well: #efede6;
  --edge: #ffffffe6;
  --hair: #1f1f2417;
  --hair-2: #1f1f2429;
  --ink: #1f1f24;
  --muted-wharf: #5d5b5a;
  --night: #1f1f24;
  --night-2: #34343c;
  --night-ink: #f4f3ee;
  --acc: var(--t-400);
  --acc-ink: #1f1f24;
  --acc-soft: var(--t-200);
  --acc-text: #86600a;
  --glow: #f4c24a73;
  --good-wharf: #25693e;
  --good-bg: #e1f1e4;
  --warn-wharf: #a4500f;
  --warn-bg: #fce3d0;
  --bad-wharf: #b9392f;
  --bad-bg: #fbe3df;
  --r-card: 24px;
  --r-md: 12px;
  --r-sm: 9px;
  --flip: 0.22s;
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in: cubic-bezier(0.32, 0, 0.67, 0);
  --shadow-wharf: 0 1px 0 #ffffffd9 inset, 0 18px 40px -26px #28244659;
  --focus-wharf: 0 0 0 2px var(--solid), 0 0 0 4px var(--ink);
  --font: "Hanken Grotesk", system-ui, -apple-system, "Segoe UI", sans-serif;
  --display: "Bricolage Grotesque", var(--font);
  --gold-400: #f8d475;
  --gold-500: #f4c24a;
  --gold-600: #e3a81f;
  --gold-700: #c58d10;
  --accent: var(--acc);
  --accent-hover: var(--t-500);
  --status-ink: var(--acc-text);
  --btn-primary-bg: var(--night);
  --btn-primary-fg: var(--night-ink);
  --btn-primary-hover: var(--night-2);
  --radius: 12px;
  --radius-sm: 9px;
  --radius-lg: 24px;
  --radius-pill: 999px;
  --tab-accent: var(--t-400);
  --tab-glow: var(--glow);
  --tone-good: var(--good-wharf);
  --tone-good-text: var(--good-wharf);
  --tone-warn: var(--warn-wharf);
  --tone-warn-text: var(--warn-wharf);
  --tone-bad: var(--bad-wharf);
  --tone-bad-text: var(--bad-wharf);
  --bg: var(--app-1);
  --bg-chrome: color-mix(in srgb, var(--app-1) 86%, transparent);
  --surface: var(--solid);
  --surface-2: var(--well);
  --surface-elevated: #fffefa;
  --text: var(--ink);
  --text-muted: var(--muted-wharf);
  --border: var(--hair-2);
  --border-faint: var(--hair);
  --shadow-raised: var(--shadow-wharf);
  --shadow-floating: 0 1px 0 #ffffffd9 inset, 0 18px 40px -20px #28244673;
  --shadow-modal: 0 24px 80px -28px #28244699;
  --nav-bg: color-mix(in srgb, var(--solid) 88%, transparent);
  --nav-ink: color-mix(in srgb, var(--ink) 55%, transparent);
  --nav-ink-hover: var(--ink);
  --input-bg: var(--solid);
  --focus-ring: var(--ink);
}

html[data-theme="light"] {
  --forest-900: var(--app-1);
  --forest-800: var(--solid);
  --forest-700: #d8d4c8;
  --tone-good-text: #25693e;
  --tone-warn-text: #a4500f;
  --tone-bad-text: #b9392f;
  --bg: var(--app-1);
  --bg-chrome: color-mix(in srgb, var(--app-1) 90%, transparent);
  --surface: var(--solid);
  --surface-2: var(--well);
  --surface-elevated: #fffefa;
  --text: var(--ink);
  --text-muted: var(--muted-wharf);
  --border: var(--hair-2);
  --tab-accent: var(--t-500);
  --tab-glow: var(--glow);
  --status-ink: var(--acc-text);
  --btn-primary-bg: var(--night);
  --btn-primary-fg: var(--night-ink);
  --btn-primary-hover: var(--night-2);
  --shadow-raised: var(--shadow-wharf);
  --table-head: var(--well);
  --table-row-a: var(--solid);
  --table-row-b: #f3f1ea;
  --table-ink: var(--ink);
  --table-line: var(--hair-2);
}

html[data-theme="dark"] {
  --backdrop: #121215;
  --app-1: #1a1a1f;
  --app-2: #17171b;
  --app-3: #1d1d2c;
  --card-wharf: #ffffff0d;
  --solid: #202026;
  --well: #ffffff12;
  --edge: #ffffff14;
  --hair: #ffffff1a;
  --hair-2: #ffffff2e;
  --ink: #f1f0ea;
  --muted-wharf: #b0aea7;
  --night: #f1f0ea;
  --night-2: #cfcdc5;
  --night-ink: #1f1f24;
  --acc-text: var(--t-300);
  --acc-soft: color-mix(in srgb, var(--t-400) 18%, transparent);
  --glow: color-mix(in srgb, var(--t-400) 16%, transparent);
  --good-wharf: #7fd49c;
  --good-bg: #7fd49c24;
  --warn-wharf: #f28c4a;
  --warn-bg: #f28c4a29;
  --bad-wharf: #f29b92;
  --bad-bg: #f29b9224;
  --shadow-wharf: 0 1px 0 #ffffff0f inset, 0 18px 40px -26px #000000b3;
  --gold-400: #f8d475;
  --gold-500: #f4c24a;
  --gold-600: #e3a81f;
  --status-ink: var(--t-300);
  --btn-primary-bg: var(--night);
  --btn-primary-fg: var(--night-ink);
  --btn-primary-hover: var(--night-2);
  --tab-accent: var(--t-400);
  --tab-glow: var(--glow);
  --tone-good: #7fd49c;
  --tone-good-text: #7fd49c;
  --tone-warn: #f28c4a;
  --tone-warn-text: #f28c4a;
  --tone-bad: #f29b92;
  --tone-bad-text: #f29b92;
  --bg: var(--app-1);
  --bg-chrome: color-mix(in srgb, var(--app-1) 88%, transparent);
  --surface: var(--solid);
  --surface-2: var(--well);
  --surface-elevated: #26262e;
  --text: var(--ink);
  --text-muted: var(--muted-wharf);
  --border: var(--hair-2);
  --border-faint: var(--hair);
  --nav-bg: color-mix(in srgb, var(--solid) 80%, transparent);
  --nav-ink: color-mix(in srgb, var(--ink) 58%, transparent);
  --nav-ink-hover: var(--ink);
  --input-bg: var(--solid);
  --focus-ring: var(--ink);
}

html {
  background: var(--backdrop);
}
html, body {
  transition: background-color var(--flip) var(--ease-out), color var(--flip) var(--ease-out);
}
body {
  font-family: var(--font);
  font-size: 15px;
  line-height: 1.45;
  background-color: var(--bg);
  background-image:
    radial-gradient(70% 55% at 100% 0%, var(--glow), transparent 70%),
    radial-gradient(45% 40% at 0% 100%, var(--glow), transparent 70%),
    linear-gradient(160deg, var(--app-1), var(--app-2) 55%, var(--app-3));
  background-attachment: fixed;
  color: var(--text);
}

h1, .page-title, .docs-hero h1, .d2-hero-titles h1, .cabinet > .toolbar h1 {
  font-family: var(--display);
  font-weight: 600;
  letter-spacing: -0.015em;
}

.card, .panel, .issued-card, .svc-card, .modal-sheet {
  border-radius: var(--radius-lg);
  border-color: var(--edge);
  box-shadow: var(--shadow-wharf);
  transition:
    background-color var(--flip) var(--ease-out),
    border-color var(--flip) var(--ease-out),
    transform 0.28s var(--ease-out),
    box-shadow 0.28s var(--ease-out);
}
.card[data-lift]:hover, .panel[data-lift]:hover, .issued-card:hover {
  transform: translateY(-3px);
}

.btn-primary, .btn-secondary, .btn-ghost {
  border-radius: var(--r-md);
  height: var(--control-h);
  font-weight: 600;
  font-size: 14px;
  gap: 8px;
  transition:
    background-color var(--flip) var(--ease-out),
    color var(--flip) var(--ease-out),
    border-color var(--flip) var(--ease-out),
    transform 0.18s var(--ease-out),
    box-shadow 0.18s var(--ease-out);
}
.btn-primary {
  background: var(--btn-primary-bg);
  color: var(--btn-primary-fg);
  box-shadow: none;
}
.btn-primary:hover {
  background: var(--btn-primary-hover);
  box-shadow: none;
}
.btn-secondary {
  background: var(--solid);
  color: var(--text);
  border: 1px solid var(--hair-2);
}
.btn-secondary:hover {
  background: var(--well);
  border-color: var(--hair-2);
}
.btn-ghost {
  background: var(--solid);
  color: var(--text);
  border: 1px solid var(--hair-2);
}
.btn-ghost:hover { background: var(--well); color: var(--text); }
.btn-primary:active, .btn-secondary:active, .btn-ghost:active {
  transform: scale(0.98);
}

.chip {
  border-radius: 999px;
  background: var(--solid);
  border: 1px solid var(--hair-2);
  transition: background-color var(--flip), color var(--flip), border-color var(--flip);
}
.chip:hover { background: var(--well); }
.chip.is-on, .chip[aria-pressed="true"] {
  background: var(--night);
  color: var(--night-ink);
  border-color: var(--night);
}

.input, select, textarea {
  border-radius: var(--r-md);
  background: var(--solid);
  border: 1px solid var(--hair-2);
  transition: border-color var(--flip), box-shadow var(--flip), background-color var(--flip);
}
.input:focus, select:focus, textarea:focus {
  box-shadow: var(--focus-wharf);
  outline: none;
  border-color: transparent;
}

.chrome { display: none !important; }

.th-shell {
  position: sticky;
  top: 0;
  z-index: var(--z-chrome);
  padding:
    calc(var(--space-3) + env(safe-area-inset-top, 0px))
    var(--space-4)
    var(--space-3);
  background: var(--bg-chrome);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  border-bottom: 1px solid var(--hair);
  transition: background-color var(--flip);
}
.variant-trader .th-shell {
  max-width: 430px;
  margin: 0 auto;
  padding-left: 0.75rem;
  padding-right: 0.75rem;
}
.th-shell .th-hero-top {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
}
.th-shell .th-hero-top.has-load {
  grid-template-columns: minmax(0, 1fr) auto auto;
}
.th-shell .th-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  text-decoration: none;
  color: var(--text);
}
.th-shell .th-logo {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 14px;
  background: var(--acc);
  color: var(--acc-ink);
  box-shadow: 0 8px 18px color-mix(in srgb, var(--acc) 35%, transparent);
  flex-shrink: 0;
}
.th-shell .th-logo svg { width: 22px; height: 22px; }
.th-shell .th-brand-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.th-shell .th-brand-name {
  font-family: var(--display);
  font-size: 1.12rem;
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1.05;
}
.th-shell .th-brand-sub {
  font-size: 0.72rem;
  line-height: 1.15;
  font-weight: 500;
  color: var(--text-muted);
}
.th-shell .th-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid var(--hair-2);
  background: var(--solid);
  color: var(--text);
  display: grid;
  place-items: center;
  cursor: pointer;
  transition: background-color var(--flip), transform 0.18s var(--ease-out);
}
.th-shell .th-avatar:hover { background: var(--well); }
.th-shell .th-avatar svg { width: 20px; height: 20px; }
.th-shell .th-user { position: relative; }
.th-shell .th-user-pop,
.th-shell .th-load-pop {
  position: absolute;
  right: 0;
  top: calc(100% + 8px);
  min-width: 16rem;
  padding: 12px;
  border-radius: var(--r-md);
  background: var(--solid);
  border: 1px solid var(--edge);
  box-shadow: var(--shadow-floating);
  z-index: var(--z-dropdown);
}
.th-shell .th-user-name { margin: 0 0 4px; font-weight: 600; }
.th-shell .th-user-item {
  display: block;
  width: 100%;
  text-align: left;
  padding: 10px 12px;
  border: 0;
  background: transparent;
  color: var(--text);
  border-radius: var(--r-sm);
  font: inherit;
  text-decoration: none;
  cursor: pointer;
}
.th-shell .th-user-item:hover { background: var(--well); }
.th-shell-nav {
  display: none;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 10px;
}
@media (min-width: 1024px) {
  body:not(.variant-trader) .th-shell-nav { display: flex; }
  .variant-trader .th-shell,
  .variant-trader .cabinet { max-width: 430px; }
}

.th-load { position: relative; }
.th-load-btn {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid var(--hair-2);
  background: var(--solid);
  color: var(--text);
  display: grid;
  place-items: center;
  cursor: pointer;
}
.th-load-btn svg { width: 20px; height: 20px; }
.th-load-go {
  margin-top: 8px;
  width: 100%;
}
.th-load-title { margin: 0 0 6px; font-weight: 600; }
.th-load-asof, .th-load-step { margin: 0; color: var(--text-muted); font-size: 13px; }
.th-load-bar {
  height: 5px;
  margin: 10px 0 8px;
  border-radius: 3px;
  background: var(--side-track, var(--hair-2));
  overflow: hidden;
}
.th-load-bar i {
  display: block;
  height: 100%;
  width: 0;
  background: var(--acc);
  border-radius: inherit;
}
.th-home-tools { display: none; }

.th-home .th-hero { padding-top: 0; }
.cabinet, .hero-inner {
  animation: wharf-enter 0.45s var(--ease-out) both;
}
.ord-page {
  animation: wharf-enter-fade 0.35s var(--ease-out) both;
}
@keyframes wharf-enter-fade {
  from { opacity: 0; }
  to { opacity: 1; }
}
@keyframes wharf-enter {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: none; }
}

html { color-scheme: dark; }
html[data-theme="light"] { color-scheme: light; }
html[data-theme="dark"] { color-scheme: dark; }

@view-transition { navigation: auto; }
::view-transition-old(root) {
  animation: 0.22s var(--ease-out) both wharf-leave;
}
::view-transition-new(root) {
  animation: 0.45s var(--ease-out) both wharf-enter;
}
@keyframes wharf-leave {
  to { opacity: 0; transform: translateY(-6px); }
}

.th-home > .th-hero { display: none; }

.th-shell-nav .chrome-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 2px;
  width: 100%;
}
.th-shell-nav .chrome-link {
  height: 40px;
  padding: 0 12px;
  border-radius: var(--r-md);
  color: var(--text);
  font-weight: 500;
  font-size: 14px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: transparent;
  transition: background-color var(--flip) var(--ease-out), color var(--flip) var(--ease-out);
}
.th-shell-nav .chrome-link:hover { background: color-mix(in srgb, var(--ink) 5%, transparent); }
.th-shell-nav .chrome-link.is-on {
  background: var(--night);
  color: var(--night-ink);
}
@media (max-width: 1023px) {
  .th-shell-nav,
  .th-shell-nav .chrome-nav { display: none !important; }
}

.bottom-tabbar {
  background: color-mix(in srgb, var(--solid) 88%, transparent);
  border-radius: 0;
  border-top: 1px solid var(--hair);
  box-shadow: none;
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}
.bottom-tab {
  transition:
    color var(--flip) var(--ease-out),
    transform 0.18s var(--ease-out),
    background-color var(--flip) var(--ease-out);
}
.bottom-tab.is-active { color: var(--ink); }
.bottom-tab.is-active .bottom-tab-ico-wrap {
  background: var(--night);
  color: var(--acc);
  border-radius: var(--r-md);
}
.bottom-tab-glow { opacity: 0 !important; }
body:has(.th-home) .bottom-tabbar {
  background: color-mix(in srgb, var(--solid) 88%, transparent);
  box-shadow: none;
  border-top: 1px solid var(--hair);
}
body:has(.th-home) .bottom-tab.is-active { color: var(--ink); }
body:has(.th-home) .bottom-tab.is-active .bottom-tab-ico-wrap {
  background: var(--night);
  color: var(--acc);
}

.cabinet-table,
table.data {
  font-size: 14px;
}
.cabinet-table th,
table.data th {
  color: var(--text-muted);
  font-size: 12.5px;
  font-weight: 500;
  border-bottom: 1px solid var(--hair);
}
.cabinet-table td,
table.data td {
  border-bottom: 1px solid var(--hair);
  transition: background-color var(--flip) var(--ease-out);
}
.cabinet-table tbody tr:hover td,
table.data tbody tr:hover td {
  background: var(--well);
}

.modal-backdrop {
  background: #1f1f2473;
  backdrop-filter: blur(8px);
  transition: opacity var(--flip) var(--ease-out);
}
.modal-sheet {
  border-radius: 22px;
  background: var(--solid);
  border: 1px solid var(--hair);
  box-shadow: 0 30px 80px -30px #00000073;
  transition:
    transform 0.28s var(--ease-out),
    opacity var(--flip) var(--ease-out);
}
.modal-head { font-family: var(--display); }

.badge, .badge-status, .svc-badge, .pill {
  border-radius: 999px;
  font-weight: 600;
}
.alert-ok { background: var(--good-bg); color: var(--good-wharf); }
.alert-error { background: var(--bad-bg); color: var(--bad-wharf); }

.hero h1 {
  font-family: var(--display);
  letter-spacing: -0.015em;
}
.hero .card {
  border-radius: var(--r-card);
  background: var(--card-wharf);
  border: 1px solid var(--edge);
  box-shadow: var(--shadow-wharf);
}

body:has(.ord-page) .th-shell { display: block; }
body:has(.ord-page) .ord-page {
  padding-top: 0.5rem;
}
.ord-back, .ord-queue-btn {
  border-radius: var(--r-md);
  background: var(--solid);
  border: 1px solid var(--hair-2);
  box-shadow: none;
  transition: background-color var(--flip) var(--ease-out), transform 0.18s var(--ease-out);
}
.ord-back:hover, .ord-queue-btn:hover { background: var(--well); }
.ord-top-text h1 { font-family: var(--display); font-weight: 600; }

.th-quick-btn {
  border-radius: var(--r-md) !important;
  background: var(--solid) !important;
  color: var(--ink) !important;
  border: 1px solid var(--hair-2) !important;
  box-shadow: none !important;
  transition:
    transform 0.18s var(--ease-out),
    background-color var(--flip) var(--ease-out),
    box-shadow 0.18s var(--ease-out);
}
.th-quick-btn.is-order {
  background: var(--night) !important;
  color: var(--night-ink) !important;
  border-color: var(--night) !important;
}
.th-quick-btn.is-order .th-quick-ico { color: var(--acc) !important; }
.th-quick-btn.is-pay .th-quick-ico,
.th-quick-btn.is-ret .th-quick-ico { color: var(--acc-text) !important; }
.th-quick-btn:active { transform: scale(0.98); }
.th-new-client, .th-pko {
  background: var(--night) !important;
  color: var(--night-ink) !important;
  box-shadow: none !important;
  border-radius: var(--r-md) !important;
}
.th-new-client svg,
.th-pko svg,
.th-new-ico,
.th-pko-ico,
.th-pko-ico-wrap,
.th-pko-text,
.th-new-client .th-quick-ico {
  color: inherit !important;
  stroke: currentColor;
  filter: none !important;
}
html[data-theme="dark"] .th-new-client,
html[data-theme="dark"] .th-new-ico,
html[data-theme="dark"] .th-pko,
html[data-theme="dark"] .th-pko-text,
html[data-theme="dark"] .th-pko-ico {
  color: var(--night-ink) !important;
}
.th-period-card, .th-metric, .th-cash, .th-notes {
  border-radius: var(--r-card);
  transition: transform 0.28s var(--ease-out), box-shadow 0.28s var(--ease-out);
}

.th-load-go.btn-primary,
.th-load-go {
  background: var(--btn-primary-bg);
  color: var(--btn-primary-fg);
}
.th-load-bar i { background: var(--acc); }
.th-load-ring {
  background: conic-gradient(var(--acc) calc(var(--p, 0) * 1%), transparent 0) !important;
}

html[data-paspartu-app="1"] {
  --app-accent: var(--acc);
  --app-paper: var(--app-1);
  --app-surface: var(--solid);
  --app-ink: var(--ink);
  --app-ink-soft: var(--muted-wharf);
}
html[data-paspartu-app="1"] .th-shell {
  background: var(--bg-chrome);
}

a, button, .chip, .chrome-link, .bottom-tab {
  touch-action: manipulation;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  .cabinet { animation: none; }
  .card[data-lift]:hover, .panel[data-lift]:hover, .issued-card:hover {
    transform: none;
  }
  ::view-transition-old(root),
  ::view-transition-new(root) { animation: none; }
}