/* Application shell, sidebar, navigation, page containers, and broad grids. */

.page {
        min-height: 100vh;
        padding-left: 224px;
        background:
          linear-gradient(180deg, rgba(255, 176, 32, 0.05), transparent 210px),
          repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.018) 0 1px, transparent 1px 30px),
          repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.012) 0 1px, transparent 1px 42px),
          var(--bg);
        transition: padding-left 180ms ease;
      }

.page.sidebar-collapsed {
        padding-left: 46px;
      }

.side-nav {
        position: fixed;
        top: 0;
        left: 0;
        z-index: 60;
        display: flex;
        width: 224px;
        height: 100vh;
        border-right: 0.5px solid rgba(255, 255, 255, 0.08);
        background: rgba(7, 9, 13, 0.98);
        flex-direction: column;
        transition: width 180ms ease;
      }

.page.sidebar-collapsed .side-nav {
        width: 46px;
      }

.side-nav-head {
        display: grid;
        grid-template-columns: 30px minmax(0, 1fr);
        gap: 8px;
        align-items: center;
        min-height: 46px;
        padding: 8px 10px;
        border-bottom: 0.5px solid rgba(255, 255, 255, 0.08);
      }

.side-toggle {
        display: grid;
        width: 28px;
        height: 28px;
        place-items: center;
        border: 0;
        background: transparent;
        color: rgba(232, 237, 248, 0.9);
        cursor: pointer;
        font-size: 18px;
        line-height: 1;
      }

.side-search {
        display: grid;
        grid-template-columns: auto minmax(0, 1fr);
        align-items: center;
        gap: 6px;
        min-height: 30px;
        border: 0.5px solid rgba(255, 176, 32, 0.2);
        background: rgba(255, 255, 255, 0.035);
        padding: 0 8px;
      }

.side-search span {
        color: rgba(255, 176, 32, 0.78);
        font-size: 10px;
        font-weight: 900;
      }

.side-search input {
        width: 100%;
        min-width: 0;
        border: 0;
        outline: 0;
        background: transparent;
        color: var(--text);
        font-size: 11px;
      }

.side-brand {
        display: flex;
        align-items: center;
        gap: 8px;
        min-height: 42px;
        padding: 8px 12px;
        border-bottom: 0.5px solid rgba(255, 176, 32, 0.12);
        color: #f4f7ff;
        font-size: 13px;
        font-weight: 900;
      }

.side-menu.scroll-panel {
        min-height: 0;
        overflow-y: auto;
        padding: 8px 0;
      }

.side-group,
      .side-item {
        display: grid;
      }

.side-main {
        display: grid;
        grid-template-columns: 28px minmax(0, 1fr) auto;
        grid-template-rows: auto auto;
        align-items: center;
        gap: 1px 8px;
        width: 100%;
        min-height: 44px;
        border: 0;
        background: transparent;
        color: rgba(232, 237, 248, 0.7);
        cursor: pointer;
        padding: 0 12px;
        text-align: left;
      }

.side-main:hover,
      .side-main.active {
        background: rgba(255, 176, 32, 0.1);
        color: #ffd27a;
      }

.side-ico {
        display: grid;
        grid-row: 1 / span 2;
        width: 24px;
        height: 24px;
        place-items: center;
        border: 0.5px solid rgba(255, 255, 255, 0.08);
        background: rgba(255, 255, 255, 0.03);
        color: rgba(232, 237, 248, 0.84);
        font-size: 10px;
        font-weight: 900;
      }

.side-market-ico svg {
        width: 18px;
        height: 18px;
        display: block;
        color: currentColor;
        filter: drop-shadow(0 1px 0 rgba(0, 0, 0, 0.42));
      }

.side-text {
        grid-column: 2;
        grid-row: 1;
        min-width: 0;
        overflow: hidden;
        font-size: 12px;
        font-weight: 900;
        text-overflow: ellipsis;
        white-space: nowrap;
      }

.side-helper {
        grid-column: 2;
        grid-row: 2;
        min-width: 0;
        overflow: hidden;
        color: rgba(232, 237, 248, 0.38);
        font-size: 10px;
        font-weight: 700;
        text-overflow: ellipsis;
        white-space: nowrap;
      }

.side-caret {
        grid-column: 3;
        grid-row: 1 / span 2;
        color: rgba(232, 237, 248, 0.32);
        font-size: 10px;
        transition: transform 160ms ease;
      }

.side-group.open .side-caret {
        transform: rotate(90deg);
      }

.side-sublist {
        display: none;
        margin: 3px 0 7px;
        padding-left: 34px;
      }

.side-group.open .side-sublist {
        display: grid;
      }

.side-subitem {
        display: grid;
        grid-template-columns: 18px minmax(42px, 0.72fr) minmax(0, 1fr);
        align-items: center;
        gap: 6px;
        min-height: 28px;
        border: 0;
        border-left: 1px solid rgba(255, 176, 32, 0.14);
        background: transparent;
        color: rgba(232, 237, 248, 0.54);
        cursor: pointer;
        overflow: hidden;
        padding: 0 9px;
        font-size: 11px;
        font-weight: 700;
        text-align: left;
        text-overflow: ellipsis;
        white-space: nowrap;
      }

.side-fav {
        display: grid;
        width: 16px;
        height: 16px;
        place-items: center;
        color: rgba(232, 237, 248, 0.34);
        font-size: 12px;
        line-height: 1;
      }

.side-fav.active {
        color: #ffd27a;
      }

.side-subname {
        min-width: 0;
        overflow: hidden;
        color: rgba(232, 237, 248, 0.72);
        text-overflow: ellipsis;
        white-space: nowrap;
      }

.side-subdesc {
        min-width: 0;
        overflow: hidden;
        color: rgba(232, 237, 248, 0.36);
        font-size: 10px;
        font-weight: 700;
        text-align: right;
        text-overflow: ellipsis;
        white-space: nowrap;
      }

.side-subitem:hover,
      .side-subitem.active {
        background: rgba(255, 255, 255, 0.04);
      }

.side-subitem:hover .side-subname,
      .side-subitem.active .side-subname {
        color: #f4f7ff;
      }

.side-subitem:hover .side-subdesc,
      .side-subitem.active .side-subdesc {
        color: rgba(232, 237, 248, 0.54);
      }

.side-hidden {
        display: none;
      }

.page.sidebar-collapsed .side-nav-head {
        grid-template-columns: 1fr;
        padding: 8px;
      }

      .page.sidebar-collapsed .side-search,
      .page.sidebar-collapsed .side-brand-name,
      .page.sidebar-collapsed .side-text,
      .page.sidebar-collapsed .side-helper,
      .page.sidebar-collapsed .side-caret,
      .page.sidebar-collapsed .side-sublist {
        display: none;
      }

.page.sidebar-collapsed .side-brand {
        justify-content: center;
        padding: 8px;
      }

.page.sidebar-collapsed .side-main {
        grid-template-columns: 1fr;
        justify-items: center;
        padding: 0;
      }

.page.sidebar-collapsed .side-ico {
        width: 28px;
        height: 28px;
      }

.nav {
        display: none !important;
        height: 54px;
        padding: 0 28px;
        border-bottom: 0.5px solid rgba(255, 255, 255, 0.07);
        background: var(--nav);
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 18px;
      }

.event-drawer {
        display: none;
        max-height: 0;
        overflow: hidden;
        border-bottom: 0 solid transparent;
        background: rgba(8, 11, 16, 0.94);
        opacity: 0;
        transform: translateY(-8px);
        transition:
          max-height 220ms ease,
          opacity 180ms ease,
          transform 220ms ease,
          border-color 180ms ease;
      }

.event-drawer.open.scroll-panel {
        max-height: 156px;
        overflow-y: auto;
        border-bottom: 0.5px solid rgba(255, 176, 32, 0.2);
        opacity: 1;
        transform: translateY(0);
      }

.event-drawer-inner {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(168px, 1fr));
        gap: 6px;
        padding: 7px 28px;
      }

.event-drawer-card {
        display: flex;
        align-items: center;
        gap: 7px;
        min-height: 34px;
        min-width: 0;
        border: 0.5px solid rgba(255, 176, 32, 0.28);
        background:
          linear-gradient(90deg, rgba(255, 176, 32, 0.12), rgba(255, 176, 32, 0.03)),
          rgba(255, 255, 255, 0.025);
        color: var(--text);
        padding: 6px 8px;
        cursor: pointer;
        text-align: left;
      }

.event-drawer-card span {
        flex: 0 0 auto;
        border: 0.5px solid rgba(255, 176, 32, 0.22);
        background: rgba(255, 176, 32, 0.1);
        color: #ffd27a;
        padding: 2px 5px;
        font-size: 9px;
        font-weight: 900;
        white-space: nowrap;
      }

.event-drawer-card b {
        flex: 0 0 auto;
        color: #f4f7ff;
        font-size: 12px;
        font-weight: 900;
        line-height: 1.15;
        white-space: nowrap;
        word-break: keep-all;
      }

.event-drawer-card em {
        min-width: 0;
        overflow: hidden;
        color: rgba(232, 237, 248, 0.5);
        font-size: 9px;
        font-style: normal;
        font-weight: 700;
        text-overflow: ellipsis;
        white-space: nowrap;
        word-break: keep-all;
      }

.event-drawer-hint {
        display: flex;
        align-items: center;
        grid-column: 1 / -1;
        color: rgba(232, 237, 248, 0.34);
        font-size: 9px;
        font-weight: 700;
      }

.logo-wrap {
        display: flex;
        align-items: center;
        gap: 9px;
        min-width: 170px;
      }

.logo-mark {
        width: 28px;
        height: 28px;
        border-radius: 7px;
        background: #3d7ef5;
        display: grid;
        place-items: center;
        color: #fff;
        font-size: 13px;
        font-weight: 600;
      }

.logo-name {
        font-size: 14px;
        font-weight: 600;
      }

.nav-links {
        display: flex;
        gap: 2px;
      }

.nl {
        border: 0;
        padding: 6px 13px;
        border-radius: 7px;
        background: transparent;
        color: var(--sub);
        cursor: pointer;
        font-size: 13px;
        user-select: none;
        touch-action: pan-y;
      }

.nl.active {
        background: rgba(255, 255, 255, 0.07);
        color: var(--text);
      }

.nl[data-page="market"],
      .nl[data-page="stock"],
      .nl[data-page="macro"],
      .nl[data-page="event"] {
        touch-action: none;
      }

.nav-right {
        display: flex;
        align-items: center;
        gap: 8px;
      }

.nav-search {
        width: min(290px, 28vw);
        min-height: 30px;
        border: 0.5px solid var(--line);
        border-radius: 8px;
        background: rgba(255, 255, 255, 0.035);
        display: grid;
        grid-template-columns: auto 1fr;
        align-items: center;
        gap: 7px;
        padding: 0 10px;
      }

.nav-search span {
        color: var(--blue);
        font-size: 10px;
        font-weight: 700;
      }

.nav-search input {
        width: 100%;
        min-width: 0;
        border: 0;
        outline: 0;
        background: transparent;
        color: var(--text);
        font-size: 11px;
      }

.avatar {
        width: 30px;
        height: 30px;
        border-radius: 50%;
        background: #1b2d52;
        display: grid;
        place-items: center;
        color: var(--blue);
        font-size: 11px;
        font-weight: 600;
      }

.body {
        padding: 14px 12px 78px;
      }

.page-view {
        display: none;
      }

.page-view.active {
        display: block;
      }

.terminal-page {
        min-height: calc(100vh - 104px);
      }

.terminal-page-head {
        display: flex;
        align-items: flex-end;
        justify-content: space-between;
        gap: 16px;
        margin-bottom: 14px;
      }

.terminal-page-head h1 {
        margin: 0;
        color: var(--text);
        font-size: 21px;
        font-weight: 700;
      }

.terminal-page-head span {
        color: var(--faint);
        font-size: 11px;
      }

.terminal-grid {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 12px;
      }

.main-stack,
      .side-stack {
        display: grid;
        gap: 14px;
        align-content: start;
      }