/* TimeNest terminal visual layer. Behavior and layout contracts stay untouched. */
:root {
  --tn-shell-bg: #edf1f5;
  --tn-shell-panel: #ffffff;
  --tn-shell-panel-soft: #f7f9fb;
  --tn-shell-chart: #fbfcfd;
  --tn-shell-border: #d7dee8;
  --tn-shell-border-strong: #c4cfdb;
  --tn-shell-ink: #182230;
  --tn-shell-muted: #66758a;
  --tn-shell-accent: #2563eb;
  --tn-shell-accent-soft: #e8efff;
  --tn-shell-positive: #0f9f6e;
  --tn-shell-negative: #dc3d4f;
  --tn-shell-shadow: 0 8px 24px rgba(20, 35, 55, .06);
}

html.dark {
  --tn-shell-bg: #0d1117;
  --tn-shell-panel: #111820;
  --tn-shell-panel-soft: #151d27;
  --tn-shell-chart: #0b1118;
  --tn-shell-border: #263343;
  --tn-shell-border-strong: #344458;
  --tn-shell-ink: #e8eef6;
  --tn-shell-muted: #91a0b3;
  --tn-shell-accent: #72a4ff;
  --tn-shell-accent-soft: #172943;
  --tn-shell-shadow: 0 12px 32px rgba(0, 0, 0, .22);
}

html,
body {
  background: var(--tn-shell-bg) !important;
  color: var(--tn-shell-ink) !important;
  font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
}

body {
  letter-spacing: 0 !important;
}

#app {
  max-width: 100% !important;
  padding: 10px !important;
}

/* Compact command header. */
.hero.surface {
  min-height: 58px !important;
  padding: 9px 12px !important;
  border: 1px solid var(--tn-shell-border) !important;
  border-radius: 12px !important;
  background: var(--tn-shell-panel) !important;
  box-shadow: var(--tn-shell-shadow) !important;
}

.hero:after {
  display: none !important;
}

.hero .row.between.wrap {
  align-items: center !important;
}

.hero .row.between.wrap > div:first-child {
  display: grid !important;
  gap: 5px !important;
}

.hero .eyebrow,
.hero .title {
  display: block !important;
}

.hero .eyebrow {
  margin: 0 !important;
  color: var(--tn-shell-muted) !important;
  font-size: 9px !important;
  font-weight: 800 !important;
  letter-spacing: .12em !important;
}

.hero .title {
  color: var(--tn-shell-ink) !important;
  font-size: 18px !important;
  font-weight: 780 !important;
  letter-spacing: -.02em !important;
  line-height: 1 !important;
}

.meta {
  gap: 6px !important;
}

.meta-pill {
  min-height: 21px !important;
  padding: 0 7px !important;
  border: 1px solid var(--tn-shell-border) !important;
  border-radius: 6px !important;
  background: var(--tn-shell-panel-soft) !important;
  color: var(--tn-shell-muted) !important;
  font-size: 10px !important;
  box-shadow: none !important;
}

.meta-pill strong {
  color: var(--tn-shell-ink) !important;
  font-weight: 750 !important;
}

.avatar-wrap .row.wrap {
  gap: 6px !important;
}

.app-switch {
  min-height: 32px !important;
  padding: 3px !important;
  gap: 2px !important;
  border: 1px solid var(--tn-shell-border) !important;
  border-radius: 8px !important;
  background: var(--tn-shell-panel-soft) !important;
}

.app-switch-link {
  min-height: 25px !important;
  padding: 0 9px !important;
  border-radius: 5px !important;
  color: var(--tn-shell-muted) !important;
  font-size: 11px !important;
  font-weight: 720 !important;
}

.app-switch-link:hover {
  background: var(--tn-shell-accent-soft) !important;
  color: var(--tn-shell-accent) !important;
}

.app-switch-link.active {
  background: var(--tn-shell-accent-soft) !important;
  color: var(--tn-shell-accent) !important;
}

.header-settings-btn {
  min-height: 32px !important;
  padding: 0 9px !important;
  gap: 7px !important;
  border: 1px solid var(--tn-shell-border) !important;
  border-radius: 7px !important;
  background: var(--tn-shell-panel-soft) !important;
  color: var(--tn-shell-ink) !important;
  box-shadow: none !important;
  font-size: 11px !important;
}

.header-settings-btn strong {
  font-size: 11px !important;
}

.header-settings-btn > div > span {
  display: none !important;
}

.avatar-btn {
  width: 32px !important;
  height: 32px !important;
  border-radius: 8px !important;
  border-color: var(--tn-shell-border) !important;
  background: var(--tn-shell-panel-soft) !important;
  box-shadow: none !important;
}

.avatar-btn:after {
  width: 9px !important;
  height: 9px !important;
  border-width: 1px !important;
  border-color: var(--tn-shell-panel) !important;
}

/* Filters become one quiet market toolbar. */
.filters.surface {
  position: sticky !important;
  top: 6px !important;
  z-index: 70 !important;
  margin-top: 8px !important;
  padding: 8px 10px !important;
  border: 1px solid var(--tn-shell-border) !important;
  border-radius: 10px !important;
  background: var(--tn-shell-panel) !important;
  box-shadow: var(--tn-shell-shadow) !important;
}

.filters-row {
  grid-template-columns: minmax(220px, 1.5fr) minmax(150px, 1fr) repeat(3, minmax(130px, .8fr)) !important;
  gap: 8px !important;
  align-items: end !important;
}

.label {
  gap: 4px !important;
  color: var(--tn-shell-muted) !important;
  font-size: 10px !important;
  font-weight: 750 !important;
}

.field,
.search-input {
  min-height: 31px !important;
  padding: 5px 9px !important;
  border: 1px solid var(--tn-shell-border) !important;
  border-radius: 6px !important;
  background: var(--tn-shell-panel-soft) !important;
  color: var(--tn-shell-ink) !important;
  box-shadow: none !important;
  font-size: 12px !important;
}

.field:focus,
.search-input:focus {
  border-color: var(--tn-shell-accent) !important;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--tn-shell-accent) 18%, transparent) !important;
  outline: 0 !important;
}

.range {
  height: 4px !important;
  background: var(--tn-shell-border) !important;
}

.range::-webkit-slider-thumb {
  width: 14px !important;
  height: 14px !important;
  border: 2px solid var(--tn-shell-accent) !important;
  background: var(--tn-shell-panel) !important;
}

.label-inline {
  min-height: 31px !important;
  padding: 0 9px !important;
  border: 1px solid var(--tn-shell-border) !important;
  border-radius: 6px !important;
  background: var(--tn-shell-panel-soft) !important;
  color: var(--tn-shell-ink) !important;
  box-shadow: none !important;
  font-size: 11px !important;
}

/* Charts are the primary workspace, cards are deliberately restrained. */
.content {
  gap: 8px !important;
  margin-top: 8px !important;
}

.pager {
  min-height: 26px !important;
}

.pager-info {
  color: var(--tn-shell-muted) !important;
  font-size: 11px !important;
}

.pager-actions {
  gap: 5px !important;
}

.btn {
  min-height: 31px !important;
  padding: 6px 10px !important;
  border-radius: 6px !important;
  font-size: 11px !important;
  font-weight: 760 !important;
  transition: background .15s ease, border-color .15s ease, transform .15s ease !important;
}

.btn:active,
.chart-action-btn:active,
.favorite-btn:active,
.expand-btn:active {
  transform: translateY(1px) !important;
}

.btn-primary {
  background: var(--tn-shell-accent) !important;
  color: #fff !important;
  box-shadow: none !important;
}

.btn-primary:hover {
  filter: brightness(1.06);
}

.btn-ghost {
  border: 1px solid var(--tn-shell-border) !important;
  background: var(--tn-shell-panel-soft) !important;
  color: var(--tn-shell-ink) !important;
  box-shadow: none !important;
}

.grid {
  gap: 8px !important;
}

.card {
  min-width: 0 !important;
  padding: 8px !important;
  border: 1px solid var(--tn-shell-border) !important;
  border-radius: 10px !important;
  background: var(--tn-shell-panel) !important;
  box-shadow: var(--tn-shell-shadow) !important;
}

.chart-wrap {
  margin-top: 0 !important;
  border: 1px solid var(--tn-shell-border) !important;
  border-radius: 8px !important;
  background: var(--tn-shell-chart) !important;
}

.chart-canvas {
  background: var(--tn-shell-chart) !important;
}

.chart-copy-btn,
.chart-mini-select,
.chart-action-btn,
.favorite-btn,
.expand-btn,
.chart-tool,
.chart-pill {
  border: 1px solid var(--tn-shell-border) !important;
  border-radius: 6px !important;
  background: var(--tn-shell-panel) !important;
  color: var(--tn-shell-ink) !important;
  box-shadow: 0 2px 8px rgba(15, 23, 42, .08) !important;
}

.chart-copy-btn,
.chart-mini-select,
.chart-action-btn {
  min-height: 27px !important;
  height: 27px !important;
  font-size: 11px !important;
}

.favorite-btn,
.expand-btn,
.chart-tool {
  width: 27px !important;
  height: 27px !important;
  min-height: 27px !important;
}

.favorite-btn.active,
.chart-tool.active {
  border-color: var(--tn-shell-accent) !important;
  background: var(--tn-shell-accent-soft) !important;
  color: var(--tn-shell-accent) !important;
  box-shadow: none !important;
}

.chart-tools {
  top: 82px !important;
  left: 7px !important;
  gap: 5px !important;
}

.chart-badges {
  left: 8px !important;
  right: 8px !important;
  bottom: 8px !important;
  gap: 4px !important;
}

.chart-pill {
  min-height: 21px !important;
  padding: 0 7px !important;
  font-size: 10px !important;
}

/* Watchlist and trade surfaces use the same visual language. */
.list-workspace {
  gap: 8px !important;
}

.list-panel,
.trade-panel {
  border: 1px solid var(--tn-shell-border) !important;
  border-radius: 10px !important;
  background: var(--tn-shell-panel) !important;
  box-shadow: var(--tn-shell-shadow) !important;
}

.list-panel {
  padding: 9px !important;
}

.list-panel-title {
  color: var(--tn-shell-ink) !important;
  font-size: 11px !important;
  letter-spacing: .08em !important;
}

.list-quiet-btn,
.list-symbol-btn,
.list-view-btn {
  border-radius: 6px !important;
  border-color: var(--tn-shell-border) !important;
  background: var(--tn-shell-panel-soft) !important;
  color: var(--tn-shell-ink) !important;
}

.list-symbol-row {
  border-color: var(--tn-shell-border) !important;
  border-radius: 6px !important;
  background: var(--tn-shell-panel-soft) !important;
}

.list-symbol-row.active {
  background: var(--tn-shell-accent-soft) !important;
  border-color: color-mix(in srgb, var(--tn-shell-accent) 42%, var(--tn-shell-border)) !important;
}

/* Settings and modal sheets keep their current behavior but look like one product. */
.modal {
  background: rgba(9, 15, 24, .62) !important;
  backdrop-filter: blur(4px) !important;
}

.modal-card,
.menu {
  border: 1px solid var(--tn-shell-border) !important;
  border-radius: 14px !important;
  background: var(--tn-shell-panel) !important;
  color: var(--tn-shell-ink) !important;
  box-shadow: 0 24px 70px rgba(8, 18, 32, .22) !important;
}

.modal-head {
  background: var(--tn-shell-panel) !important;
  border-color: var(--tn-shell-border) !important;
}

.menu-profile {
  padding-bottom: 10px !important;
  border-color: var(--tn-shell-border) !important;
}

.menu-section,
.telegram-box,
.alerts-box {
  border: 1px solid var(--tn-shell-border) !important;
  border-radius: 8px !important;
  background: var(--tn-shell-panel-soft) !important;
  box-shadow: none !important;
}

.menu-section-title,
.eyebrow {
  color: var(--tn-shell-muted) !important;
}

.loader {
  background: var(--tn-shell-bg) !important;
}

.loader-card,
.grid-loader-card,
.chart-placeholder-card {
  border: 1px solid var(--tn-shell-border) !important;
  border-radius: 10px !important;
  background: var(--tn-shell-panel) !important;
  box-shadow: var(--tn-shell-shadow) !important;
}

@media (max-width: 1180px) {
  .filters-row {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }

  .search-box {
    grid-column: span 2;
  }
}

@media (max-width: 900px) {
  #app {
    padding: 7px !important;
  }

  .hero.surface {
    border-radius: 9px !important;
  }

  .hero .row.between.wrap > div:first-child {
    width: 100% !important;
  }

  .filters-row,
  .search-box {
    grid-template-columns: 1fr !important;
    grid-column: auto !important;
  }
}