/*
 * VTC Modern Glass
 * Shared visual layer for client, legal, manager and administrator cabinets.
 * Loaded after style.css so existing layout and business states stay intact.
 */

:root {
  --bg: #151617;
  --sidebar: rgba(25, 26, 28, .96);
  --card: rgba(41, 44, 47, .92);
  --card2: rgba(50, 53, 57, .78);
  --input: rgba(28, 30, 32, .94);
  --gold: #c8b273;
  --gold-dim: rgba(200, 178, 115, .12);
  --border: rgba(200, 178, 115, .12);
  --border-hover: rgba(200, 178, 115, .27);
  --text-primary: #f2f1ed;
  --text-secondary: #d0d1d2;
  --text-muted: #a4a6aa;
  --success: #2fbf71;
  --danger: #e5484d;
  --glass-blue: #c8b273;
  --glass-cyan: #9b9da2;
  --glass-surface: linear-gradient(145deg, rgba(47, 50, 53, .94), rgba(29, 31, 33, .96));
  --glass-shine: linear-gradient(135deg, rgba(255,255,255,.045), rgba(255,255,255,.008) 42%, rgba(200,178,115,.018));
  --glass-shadow: 0 22px 55px rgba(0, 7, 20, .32), inset 0 1px 0 rgba(255,255,255,.07);
  --glass-shadow-soft: 0 12px 32px rgba(0, 7, 20, .24), inset 0 1px 0 rgba(255,255,255,.055);
  --radius-xs: 10px;
  --radius-sm: 14px;
  --radius-md: 18px;
  --radius-lg: 24px;
}

html {
  color-scheme: dark;
  background: #151617;
}

body {
  position: relative;
  background:
    radial-gradient(circle at 12% -10%, rgba(200, 178, 115, .055), transparent 31rem),
    radial-gradient(circle at 92% 14%, rgba(200, 178, 115, .025), transparent 27rem),
    linear-gradient(145deg, #171819 0%, #111213 52%, #0e0f10 100%);
  background-attachment: fixed;
  letter-spacing: -.005em;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: -1;
  opacity: .11;
  background-image:
    linear-gradient(rgba(255,255,255,.018) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.018) 1px, transparent 1px);
  background-size: 42px 42px;
  mask-image: linear-gradient(to bottom, black, transparent 72%);
}

::selection { background: rgba(200, 178, 115, .3); color: #fff; }

/* Shell */
.sidebar {
  width: 252px;
  background:
    linear-gradient(180deg, rgba(42, 44, 47, .94), rgba(23, 24, 26, .96)),
    rgba(20, 21, 22, .94);
  border-right: 1px solid rgba(200, 178, 115, .12);
  box-shadow: 18px 0 48px rgba(0, 6, 18, .2), inset -1px 0 0 rgba(255,255,255,.025);
  -webkit-backdrop-filter: blur(22px) saturate(108%);
  backdrop-filter: blur(22px) saturate(108%);
  z-index: 50;
}

.main { margin-left: 252px; }

.sidebar-logo {
  height: 82px;
  padding: 0 20px;
  border-bottom-color: rgba(200, 178, 115, .1);
}

.logo-icon {
  width: 42px;
  height: 42px;
  border-radius: 13px;
  border-color: rgba(200, 178, 115, .42);
  background: linear-gradient(145deg, rgba(255,255,255,.09), rgba(255,255,255,.025));
  box-shadow: 0 10px 28px rgba(0,0,0,.25), 0 0 28px rgba(200,178,115,.14), inset 0 1px 0 rgba(255,255,255,.12);
}

.logo-icon img { border-radius: 12px; }
.logo-text { font-weight: 760; letter-spacing: -.02em; }
.logo-sub { margin-top: 3px; color: #b8bcc0; letter-spacing: .035em; }

.sidebar-user {
  margin: 12px 12px 4px;
  padding: 14px 12px;
  border: 1px solid rgba(200, 178, 115, .1);
  border-radius: 17px;
  background: linear-gradient(135deg, rgba(255,255,255,.065), rgba(255,255,255,.018));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.045);
}

.user-avatar {
  width: 52px;
  height: 52px;
  flex-basis: 52px;
  border: 1px solid rgba(200, 178, 115, .46);
  background: linear-gradient(145deg, rgba(200,178,115,.28), rgba(155,157,162,.12));
  box-shadow: 0 9px 24px rgba(0,0,0,.25), 0 0 0 4px rgba(200,178,115,.065);
}

.sidebar-nav { padding: 10px 10px 14px; }
.nav-section { padding: 14px 11px 7px; color: #9a9da2; font-weight: 700; letter-spacing: .12em; }
.nav-item {
  min-height: 42px;
  margin: 3px 0;
  padding: 0 12px;
  border: 1px solid transparent;
  border-radius: 12px;
  color: #d2d3d4;
  transition: background .2s ease, border-color .2s ease, color .2s ease, transform .2s ease;
}
.nav-item:hover,
.nav-item.active {
  background: linear-gradient(135deg, rgba(200,178,115,.16), rgba(155,157,162,.055));
  color: #fff;
  border-color: rgba(200, 178, 115, .18);
  border-left-color: rgba(200, 178, 115, .34);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.055), 0 8px 20px rgba(0,7,20,.15);
  transform: translateX(2px);
}
.nav-icon {
  width: 20px;
  height: 20px;
  flex: 0 0 20px;
  display: grid;
  place-items: center;
  color: #c8b273;
  filter: drop-shadow(0 0 7px rgba(200,178,115,.18));
}
.nav-icon .ui-icon {
  width: 18px;
  height: 18px;
  overflow: visible;
}
.nav-item:hover .nav-icon,
.nav-item.active .nav-icon {
  color: #e0d4aa;
  filter: drop-shadow(0 0 9px rgba(200,178,115,.38));
}
.nav-badge {
  background: linear-gradient(135deg, #e5484d, #b63237);
  box-shadow: 0 5px 14px rgba(229, 72, 77, .24);
}
.sidebar-footer { margin: auto 10px 10px; border: 0; border-radius: 12px; background: rgba(255,255,255,.025); }

.topbar {
  position: sticky;
  top: 0;
  height: 64px;
  padding: 0 28px;
  background: rgba(22, 23, 24, .88);
  border-bottom: 1px solid rgba(200, 178, 115, .1);
  box-shadow: 0 12px 34px rgba(0, 7, 20, .14);
  -webkit-backdrop-filter: blur(22px) saturate(108%);
  backdrop-filter: blur(22px) saturate(108%);
  z-index: 40;
}
.topbar-title { font-size: 14px; font-weight: 760; letter-spacing: -.01em; }
.topbar-sub { color: #b8bcc0; }
.topbar-logout {
  min-height: 36px;
  border-radius: 11px;
  border-color: rgba(229,72,77,.28);
  background: linear-gradient(135deg, rgba(229,72,77,.14), rgba(182,50,55,.07));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.05), 0 8px 20px rgba(0,0,0,.12);
  color: #f2a3a6;
}

.content { padding: 28px 30px 42px; max-width: 1720px; margin: 0 auto; }
.page-header { margin-bottom: 22px; }
.page-title {
  font-size: clamp(23px, 2vw, 30px);
  font-weight: 760;
  letter-spacing: -.035em;
  background: linear-gradient(115deg, #fff 18%, #e6e2d6 70%, #c8b273);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.page-date { color: #b8bcc0; }

/* Liquid surfaces */
.panel,
.stat-card,
.market-ribbon,
.login-panel,
.profile-card,
.admin-mini-kpi {
  position: relative;
  background: var(--glass-surface);
  border: 1px solid rgba(200, 178, 115, .13);
  box-shadow: var(--glass-shadow-soft);
  -webkit-backdrop-filter: blur(20px) saturate(135%);
  backdrop-filter: blur(20px) saturate(135%);
}

.panel::before,
.stat-card::before,
.login-panel::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: var(--glass-shine);
  pointer-events: none;
  opacity: .42;
}

.panel > *,
.stat-card > *,
.login-panel > * { position: relative; z-index: 1; }

.panel,
.stat-card { border-radius: var(--radius-md); overflow: hidden; }
.panel { transition: border-color .22s ease, box-shadow .22s ease, transform .22s ease; }
.panel:hover { border-color: rgba(200,178,115,.19); box-shadow: var(--glass-shadow); }
.stat-card { padding: 19px; transition: transform .22s ease, border-color .22s ease; }
.stat-card:hover { transform: translateY(-2px); border-color: rgba(200,178,115,.24); }
.stat-card-detail {
  background:
    linear-gradient(135deg, rgba(200,178,115,.16), rgba(155,157,162,.045)),
    var(--glass-surface);
}
.stat-label { color: #b8bcc0; font-weight: 700; letter-spacing: .075em; }
.stat-value { letter-spacing: -.045em; text-shadow: 0 2px 20px rgba(200,178,115,.1); }
.panel-header { min-height: 56px; padding: 0 19px; border-bottom-color: rgba(200,178,115,.095); }
.panel-title { font-weight: 720; letter-spacing: -.01em; }
.panel-body { padding: 17px 19px 19px; }

.market-ribbon {
  min-height: 48px;
  padding: 0 13px;
  border-radius: var(--radius-sm);
  overflow: hidden;
}
.quote-tape::before { background: linear-gradient(90deg, rgba(71,74,80,.96), transparent); }
.quote-tape::after { background: linear-gradient(270deg, rgba(71,74,80,.96), transparent); }
.rate-inline-item strong { color: #f0d791; }
.quote-change, .badge, .order-status { border-radius: 999px; }

.action-tile,
.summary-box,
.summary-total-card,
.book-card,
.admin-mini-kpi,
.instruction-card,
.test-card,
.tariff-card,
.tariff-option,
.messenger-layout,
.messenger-sidebar,
.messenger-chat,
.chat-attach-btn,
.chat-file-chip,
.instr-dropdown {
  border-radius: var(--radius-sm);
  border: 1px solid rgba(200, 178, 115, .105);
  background: linear-gradient(145deg, rgba(255,255,255,.062), rgba(255,255,255,.018));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.045);
}
.action-tile {
  min-height: 64px;
  transition: transform .2s ease, border-color .2s ease, background .2s ease, box-shadow .2s ease;
}
.action-tile:hover {
  transform: translateY(-2px);
  border-color: rgba(200,178,115,.28);
  background: linear-gradient(135deg, rgba(200,178,115,.13), rgba(155,157,162,.045));
  box-shadow: 0 12px 28px rgba(0,7,20,.2), inset 0 1px 0 rgba(255,255,255,.075);
}

/* Tables */
.ptable { border-spacing: 0; }
.ptable th {
  padding-top: 4px;
  padding-bottom: 12px;
  border-bottom-color: rgba(200,178,115,.105);
  color: #a4a6aa;
  font-weight: 650;
  text-transform: uppercase;
  letter-spacing: .055em;
}
.ptable td { border-bottom-color: rgba(200,178,115,.055); }
.ptable tbody tr { transition: background .16s ease; }
.ptable tbody tr:hover td { background: rgba(200,178,115,.045); }
.ticker-icon {
  border-radius: 9px;
  background: linear-gradient(145deg, rgba(200,178,115,.17), rgba(255,255,255,.035));
  border-color: rgba(200,178,115,.19);
  color: #e0d4aa;
}

/* Controls */
.form-input,
.form-select,
input,
select,
textarea {
  min-height: 42px;
  border-radius: 11px;
  border-color: rgba(200,178,115,.115);
  background: rgba(24, 26, 28, .92);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.025);
  transition: border-color .18s ease, background .18s ease, box-shadow .18s ease;
}
.form-input:hover,
.form-select:hover,
input:hover,
select:hover,
textarea:hover { border-color: rgba(200,178,115,.28); }
.form-input:focus,
.form-select:focus,
input:focus,
select:focus,
textarea:focus {
  border-color: rgba(200,178,115,.72);
  background: rgba(20, 22, 24, .98);
  box-shadow: 0 0 0 4px rgba(200,178,115,.1), inset 0 1px 0 rgba(255,255,255,.04);
}

.tab-btn,
.ghost,
.topbar-btn,
.topbar-icon-btn,
.limit-btn {
  border-radius: 10px;
  border-color: rgba(200,178,115,.13);
  background: rgba(255,255,255,.035);
}
.tab-btn:hover,
.tab-btn.active,
.ghost:hover,
.limit-btn:hover,
.limit-btn.active {
  background: linear-gradient(135deg, rgba(200,178,115,.16), rgba(155,157,162,.045));
  border-color: rgba(200,178,115,.3);
  color: #e0d4aa;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.055);
}

.btn-buy,
.btn-sell,
.primary,
.danger {
  min-height: 43px;
  border-radius: 12px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.18), 0 10px 24px rgba(0,0,0,.16);
  transition: transform .18s ease, filter .18s ease, box-shadow .18s ease;
}
.btn-buy:hover,
.btn-sell:hover,
.primary:hover,
.danger:hover { transform: translateY(-1px); }
.btn-buy,
.primary {
  background: linear-gradient(135deg, #238f57, #2fbf71);
  color: #fff;
  border-color: rgba(47,191,113,.42);
}
.btn-sell,
.danger { background: linear-gradient(135deg, #b63237, #e5484d); }
.soft-buy,
.soft-success-btn {
  background: linear-gradient(135deg, rgba(47,191,113,.17), rgba(35,143,87,.07));
  border-color: rgba(47,191,113,.31);
  color: #79d7a4;
}
.soft-sell {
  background: linear-gradient(135deg, rgba(229,72,77,.17), rgba(182,50,55,.065));
  border-color: rgba(229,72,77,.3);
  color: #f2a3a6;
}

.flash,
.cancel-notice {
  border-radius: 13px;
  -webkit-backdrop-filter: blur(18px);
  backdrop-filter: blur(18px);
  box-shadow: 0 12px 28px rgba(0,7,20,.18);
}

/* Login */
.login-screen {
  position: relative;
  isolation: isolate;
  background:
    radial-gradient(circle at 19% 16%, rgba(200,178,115,.08), transparent 27rem),
    radial-gradient(circle at 83% 79%, rgba(200,178,115,.025), transparent 25rem),
    linear-gradient(145deg, #171819, #111213 54%, #0e0f10);
}
.login-screen::before,
.login-screen::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  filter: blur(1px);
  pointer-events: none;
  z-index: -1;
}
.login-screen::before {
  width: 290px; height: 290px; left: 8%; top: 12%;
  background: radial-gradient(circle at 30% 30%, rgba(200,178,115,.23), rgba(200,178,115,.035) 58%, transparent 70%);
}
.login-screen::after {
  width: 360px; height: 360px; right: 6%; bottom: 4%;
  background: radial-gradient(circle at 30% 30%, rgba(155,157,162,.17), rgba(155,157,162,.025) 62%, transparent 72%);
}
.login-panel {
  width: min(590px, calc(100% - 32px));
  padding: 30px;
  border-radius: 26px;
  border-color: rgba(200,178,115,.17);
  background: linear-gradient(145deg, rgba(47,50,53,.92), rgba(24,26,28,.96));
  box-shadow: 0 35px 90px rgba(0,7,20,.5), inset 0 1px 0 rgba(255,255,255,.1);
  -webkit-backdrop-filter: blur(28px) saturate(145%);
  backdrop-filter: blur(28px) saturate(145%);
}
.login-logo { border-bottom-color: rgba(200,178,115,.1); }
.login-logo .logo-text { font-size: 22px; letter-spacing: -.035em; }
.login-tabs,
.login-methods {
  padding: 4px;
  gap: 4px;
  border-radius: 14px;
  background: rgba(5,14,28,.38);
  border: 1px solid rgba(200,178,115,.08);
}
.login-tab,
.login-method {
  border-radius: 10px;
  border: 1px solid transparent;
  background: transparent;
}
.login-tab.active,
.login-method.active {
  color: #fff;
  border-color: rgba(200,178,115,.19);
  background: linear-gradient(135deg, rgba(200,178,115,.19), rgba(255,255,255,.055));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.07), 0 7px 17px rgba(0,7,20,.18);
}
.btn-gosuslugi {
  border-radius: 12px;
  background: rgba(200, 178, 115, .075);
}

/* Scrollbars */
* {
  scrollbar-width: thin;
  scrollbar-color: rgba(200,178,115,.28) transparent;
}
*::-webkit-scrollbar { width: 7px; height: 7px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb {
  border-radius: 999px;
  background: rgba(200,178,115,.25);
  border: 2px solid transparent;
  background-clip: padding-box;
}

/* Existing inline overlays inherit the glass language */
#notif-panel {
  background: rgba(10, 22, 41, .78) !important;
  border-left-color: rgba(200,178,115,.14) !important;
  box-shadow: -24px 0 60px rgba(0,7,20,.38) !important;
  -webkit-backdrop-filter: blur(28px) saturate(140%);
  backdrop-filter: blur(28px) saturate(140%);
}
#demo-warning-overlay { -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
#demo-warning-overlay > div {
  background:
    radial-gradient(circle at 8% 0%, rgba(200,178,115,.08), transparent 18rem),
    linear-gradient(145deg, rgba(41,44,47,.98), rgba(24,26,28,.98)) !important;
  border-color: rgba(200,178,115,.27) !important;
  border-radius: 24px !important;
  box-shadow: 0 32px 90px rgba(0,0,0,.72), inset 0 1px 0 rgba(255,255,255,.06) !important;
  -webkit-backdrop-filter: blur(26px);
  backdrop-filter: blur(26px);
}

/* Unified graphite glass for pages that define late inline surfaces. */
.doc-categories .doc-category {
  border-color: rgba(200,178,115,.16) !important;
  border-radius: 18px !important;
  background:
    radial-gradient(circle at 10% 0%, rgba(200,178,115,.035), transparent 24rem),
    linear-gradient(145deg, rgba(49,52,55,.96), rgba(31,33,35,.98)) !important;
  box-shadow: var(--glass-shadow-soft);
  -webkit-backdrop-filter: blur(18px) saturate(135%);
  backdrop-filter: blur(18px) saturate(135%);
}
.doc-categories .doc-category-head {
  border-bottom-color: rgba(200,178,115,.1) !important;
  background: linear-gradient(135deg, rgba(71,74,80,.72), rgba(41,44,47,.76)) !important;
}
.doc-categories .doc-list,
.doc-categories .doc-item,
.doc-categories .doc-placeholder { background-color: transparent !important; }
.doc-categories .doc-item { border-bottom-color: rgba(200,178,115,.07) !important; }
.doc-categories .doc-item:hover { background: rgba(200,178,115,.07) !important; }
.doc-categories .doc-dl-btn {
  border: 1px solid rgba(200,178,115,.12) !important;
  border-radius: 10px !important;
  background: rgba(200,178,115,.09) !important;
  color: #e0d4aa !important;
}

.messenger-layout,
.messenger-sidebar,
.messenger-chat,
.messenger-empty,
.chat-panel,
.chat-messages {
  background:
    radial-gradient(circle at 100% 0%, rgba(155,157,162,.06), transparent 24rem),
    linear-gradient(145deg, rgba(55,58,62,.94), rgba(28,30,32,.98)) !important;
}
.messenger-layout {
  border-color: rgba(200,178,115,.13) !important;
  border-radius: 20px !important;
  box-shadow: var(--glass-shadow);
}
.msg-filter.active,
.msg-item.active,
.msg-status-chip,
.vip-badge {
  border-color: rgba(200,178,115,.38) !important;
  background: rgba(200,178,115,.14) !important;
  color: #e0d4aa !important;
}

.chart-container,
#dyn-chart {
  border-color: rgba(200,178,115,.11) !important;
  border-radius: 16px !important;
  background:
    radial-gradient(circle at 12% 0%, rgba(200,178,115,.045), transparent 18rem),
    linear-gradient(160deg, #27292b, #27292b 58%, #27292b) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.035);
}

/* Avatar lightbox shared by all personal cabinets. */
.avatar-preview-trigger { cursor: zoom-in; }
.desktop-avatar-preview {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 10200;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(6,7,8,.82);
  -webkit-backdrop-filter: blur(18px);
  backdrop-filter: blur(18px);
}
.desktop-avatar-preview.open { display: flex; }
.desktop-avatar-preview-card {
  width: min(520px, 88vw);
  padding: 14px;
  border: 1px solid rgba(200,178,115,.32);
  border-radius: 28px;
  background: linear-gradient(145deg, rgba(71,74,80,.94), rgba(28,30,32,.98));
  box-shadow: 0 34px 90px rgba(0,0,0,.72), inset 0 1px 0 rgba(255,255,255,.06);
}
.desktop-avatar-preview-card img {
  display: block;
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: 19px;
  background: #27292b;
}
.desktop-avatar-preview-name {
  padding: 13px 8px 4px;
  color: var(--text-primary);
  font-size: 15px;
  font-weight: 750;
  text-align: center;
}
.desktop-avatar-preview-close {
  position: fixed;
  top: 24px;
  right: 28px;
  width: 42px;
  height: 42px;
  border: 1px solid rgba(200,178,115,.22);
  border-radius: 50%;
  background: rgba(41,44,47,.88);
  color: #f2f1ed;
  font-size: 25px;
  cursor: pointer;
}
body.avatar-preview-open { overflow: hidden; }

/* Admin messenger stays inside the viewport and keeps composer controls at the right. */
body.admin-chat-page { height: 100vh; overflow: hidden; }
.admin-chat-page .main { height: 100vh; min-height: 0; overflow: hidden; }
.admin-chat-page .content {
  height: calc(100vh - 64px);
  box-sizing: border-box;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  padding-bottom: 22px;
}
.admin-chat-page .page-header { flex: 0 0 auto; margin-bottom: 14px; }
.admin-chat-page .messenger-layout {
  flex: 1 1 auto;
  height: auto;
  min-height: 0;
  background: #292c2f !important;
}
.admin-chat-page .messenger-sidebar { background: #27292b !important; }
.admin-chat-page .messenger-chat,
.admin-chat-page .messenger-empty,
.admin-chat-page .messenger-messages { background: #292c2f !important; }
.admin-chat-page .messenger-input-wrap {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: stretch;
  gap: 10px;
  padding: 10px 12px;
  background: #27292b;
}
.admin-chat-page .messenger-textarea {
  width: 100%;
  min-width: 0;
  height: 50px;
  min-height: 50px;
  box-sizing: border-box;
}
.admin-chat-page .messenger-input-actions {
  display: flex;
  flex-wrap: nowrap;
  align-items: stretch;
  gap: 8px;
}
.admin-chat-page .messenger-input-actions .chat-attach-btn,
.admin-chat-page .messenger-input-actions button { height: 50px; min-height: 50px !important; }
.admin-chat-page .messenger-input-actions .chat-file-chip {
  max-width: 150px;
  align-self: center;
}
.admin-chat-page .msg-bubble-client { background: #474a50; }
.admin-chat-page .msg-bubble-admin { background: rgba(200,178,115,.12); }

@media (max-width: 1100px) {
  .sidebar {
    position: static;
    width: auto;
    min-height: auto;
    display: grid;
    grid-template-columns: auto minmax(190px, auto) minmax(0, 1fr);
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
    border-right: 0;
    border-bottom: 1px solid rgba(200,178,115,.11);
  }
  .sidebar-logo {
    height: 58px;
    padding: 0 10px;
    border: 0;
  }
  .sidebar-user {
    margin: 0;
    padding: 7px 10px;
    border-radius: 14px;
  }
  .user-avatar {
    width: 40px;
    height: 40px;
    flex-basis: 40px;
  }
  .sidebar-nav {
    display: flex;
    gap: 4px;
    padding: 4px;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
  }
  .sidebar-nav::-webkit-scrollbar { display: none; }
  .nav-item {
    min-height: 40px;
    flex: 0 0 auto;
    padding: 0 11px;
    white-space: nowrap;
  }
  .nav-section,
  .sidebar-footer { display: none; }
  .main { margin-left: 0; }
  .content { padding-inline: 22px; }
  .stats-grid,
  .grid-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 760px) {
  body { background-attachment: scroll; }
  .sidebar {
    width: 100%;
    grid-template-columns: auto minmax(0, 1fr);
    background: rgba(41,44,47,.9);
    -webkit-backdrop-filter: blur(20px);
    backdrop-filter: blur(20px);
  }
  .sidebar-logo .logo-sub { display: none; }
  .sidebar-user { justify-self: end; min-width: 0; }
  .sidebar-user > div { min-width: 0; }
  .sidebar-user .user-name {
    max-width: 150px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .sidebar-nav { grid-column: 1 / -1; width: 100%; }
  .main { margin-left: 0; }
  .topbar { height: 58px; padding: 0 16px; }
  .content { padding: 20px 14px 32px; }
  .page-title { font-size: 24px; }
  .stats-grid,
  .grid-2 { grid-template-columns: 1fr; }
  .panel,
  .stat-card { border-radius: 16px; }
  .login-panel { padding: 22px 18px; border-radius: 22px; }
  .login-logo .logo-text { font-size: 19px; }
}

@media (max-width: 520px) {
  .sidebar {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 4px;
    padding-inline: 8px;
  }
  .sidebar-logo {
    min-width: 0;
    padding-inline: 6px;
  }
  .sidebar-logo .logo-text {
    max-width: 155px;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .sidebar-user {
    padding: 5px;
    border-radius: 999px;
  }
  .sidebar-user > div { display: none; }
  .topbar-sub { display: none; }
  .topbar-logout { padding-inline: 14px; }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }

  /* Market tapes are live data, so their essential movement remains enabled. */
  .rate-tape-track,
  .quote-tape-track {
    animation-duration: var(--tape-duration, 25s) !important;
    animation-iteration-count: infinite !important;
  }
}

/* Native selects share the same graphite/gold control language everywhere. */
select,
.form-select {
  color-scheme: dark;
  -webkit-appearance: none;
  appearance: none;
  padding-right: 38px !important;
  color: var(--text-primary) !important;
  background-color: #292c2f !important;
  background-image:
    linear-gradient(45deg, transparent 50%, #c8b273 50%),
    linear-gradient(135deg, #c8b273 50%, transparent 50%),
    linear-gradient(to right, rgba(200,178,115,.12), rgba(200,178,115,.12)) !important;
  background-position:
    calc(100% - 17px) 50%,
    calc(100% - 12px) 50%,
    calc(100% - 34px) 50% !important;
  background-size: 5px 5px, 5px 5px, 1px 22px !important;
  background-repeat: no-repeat !important;
  border: 1px solid rgba(200,178,115,.18) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.035), 0 8px 22px rgba(0,0,0,.12);
}
select:hover,
.form-select:hover {
  border-color: rgba(200,178,115,.38) !important;
  background-color: #303336 !important;
}
select:focus,
.form-select:focus {
  border-color: rgba(200,178,115,.72) !important;
  background-color: #27292b !important;
  box-shadow: 0 0 0 4px rgba(200,178,115,.10), inset 0 1px 0 rgba(255,255,255,.04) !important;
}
select option,
select optgroup {
  color: #f2f1ed;
  background: #292c2f;
}
select option:checked {
  color: #fff;
  background: #474a50;
}

/* Pause the live tapes for precise reading. */
.rate-tape:hover .rate-tape-track,
.quote-tape:hover .quote-tape-track {
  animation-play-state: paused !important;
}