/* style.css — Tax Auditor Pro / Risk Analyzer shared stylesheet.
   Loaded by every page. Edit here once and every page updates. */
    :root {
      --bg: #070d18;
      --panel: #0f1828;
      --panel2: #162033;
      --line: #1e2f48;
      --text: #dce8f5;
      --muted: #5a7a9a;
      --accent: #d4922a;
      --accent2: #3b82f6;
      --good: #10b981;
      --warn: #f59e0b;
      --bad: #ef4444;
      --fx: #22d3ee;
      --sb-w: 270px;
      --top-h: 46px;
    }

    * {
      box-sizing: border-box;
      margin: 0;
      padding: 0
    }

    body {
      background: var(--bg);
      color: var(--text);
      font-family: "Noto Sans Khmer", "Segoe UI", system-ui, sans-serif;
      font-size: 13px;
      min-height: 100vh;
      overflow-x: hidden
    }

    /* ── Sidebar ── */
    .sidebar {
      width: var(--sb-w);
      position: fixed;
      top: 0;
      left: 0;
      height: 100vh;
      overflow-y: auto;
      background: rgba(7, 13, 24, .98);
      border-right: 1px solid var(--line);
      display: flex;
      flex-direction: column;
      gap: 8px;
      padding: 12px 11px 60px;
      z-index: 200;
      transition: transform .22s ease
    }

    .sidebar.collapsed {
      transform: translateX(calc(-1 * var(--sb-w)))
    }

    #sbToggle {
      position: fixed;
      top: 9px;
      left: 9px;
      z-index: 300;
      width: 30px;
      height: 30px;
      border-radius: 7px;
      border: 1px solid var(--line);
      background: rgba(7, 13, 24, .95);
      color: var(--text);
      font-size: 15px;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center
    }

    #sbToggle:hover {
      background: var(--panel2)
    }

    body:not(.sb-collapsed) #sbToggle {
      left: calc(var(--sb-w) + 7px)
    }

    body.sb-collapsed #sbToggle {
      left: 9px
    }

    /* ── Topbar ── */
    .topbar {
      position: fixed;
      top: 0;
      right: 0;
      left: var(--sb-w);
      min-height: var(--top-h);
      height: auto;
      background: rgba(7, 13, 24, .96);
      border-bottom: 1px solid var(--line);
      display: flex;
      align-items: center;
      flex-wrap: wrap;         /* allow items to wrap on small screens */
      gap: 5px;
      padding: 6px 10px 6px 46px;
      z-index: 100;
      backdrop-filter: blur(10px);
      transition: left .22s ease;
    }

    body.sb-collapsed .topbar {
      left: 0;
      padding-left: 46px
    }

    @media (max-width: 900px) {
      .topbar { left: 0; padding-left: 46px; }
      .topbar-lbl { display: none; }
      #sTin, #sName { max-width: 72px; }
    }

    .topbar-lbl {
      font-size: 9px;
      color: var(--muted);
      text-transform: uppercase;
      letter-spacing: .06em;
      white-space: nowrap
    }

    .topbar input,
    .topbar select {
      height: 28px;
      border: 1px solid var(--line);
      background: var(--panel2);
      color: var(--text);
      border-radius: 6px;
      padding: 0 8px;
      font: inherit;
      font-size: 11px;
      min-width: 0
    }

    .topbar input {
      flex: 1;
      max-width: 155px
    }

    .topbar select {
      flex: 1;
      max-width: 175px
    }

    .topbar input:focus,
    .topbar select:focus {
      border-color: #3d5a7a;
      outline: none
    }

    .topbar-sep {
      width: 1px;
      height: 18px;
      background: var(--line);
      flex-shrink: 0
    }

    /* FX toggle in topbar */
    .fx-topbar {
      display: flex;
      align-items: center;
      gap: 6px;
      cursor: pointer;
      flex-shrink: 0;
      border: 1px solid var(--line);
      border-radius: 6px;
      padding: 4px 9px;
      background: var(--panel2);
      transition: border-color .15s
    }

    .fx-topbar:hover {
      border-color: #3d5a7a
    }

    .fx-topbar.fx-active {
      border-color: var(--fx);
      background: rgba(34, 211, 238, .07)
    }

    .fx-topbar input {
      display: none
    }

    .fx-tknob-track {
      width: 28px;
      height: 15px;
      border-radius: 99px;
      background: #1e3050;
      border: 1px solid #2a4060;
      position: relative;
      flex-shrink: 0
    }

    .fx-tknob {
      width: 11px;
      height: 11px;
      border-radius: 50%;
      background: #4a6080;
      position: absolute;
      top: 1px;
      left: 1px;
      transition: left .18s, background .18s
    }

    .fx-active .fx-tknob-track {
      background: rgba(34, 211, 238, .2);
      border-color: var(--fx)
    }

    .fx-active .fx-tknob {
      left: 15px;
      background: var(--fx)
    }

    .fx-tbl {
      font-size: 10px;
      color: var(--muted);
      white-space: nowrap
    }

    .fx-active .fx-tbl {
      color: var(--fx)
    }

    #fxBadge {
      font-size: 9px;
      font-weight: 700;
      letter-spacing: .06em;
      padding: 1px 5px;
      border-radius: 3px
    }

    .fx-badge-on {
      background: rgba(34, 211, 238, .15);
      color: var(--fx);
      border: 1px solid rgba(34, 211, 238, .3)
    }

    .fx-badge-off {
      background: rgba(90, 122, 154, .1);
      color: var(--muted);
      border: 1px solid var(--line)
    }

    .topbar-copy {
      height: 28px;
      padding: 0 10px;
      border: 1px solid var(--line);
      border-radius: 6px;
      background: rgba(212, 146, 42, .12);
      color: #f6c060;
      font-size: 10px;
      font-weight: 600;
      cursor: pointer;
      white-space: nowrap;
      flex-shrink: 0
    }

    .topbar-copy:hover {
      background: rgba(212, 146, 42, .22)
    }

    /* ── Main content ── */
    .content {
      flex: 1;
      margin-left: var(--sb-w);
      padding: calc(var(--top-h) + 20px) 16px 70px;
      min-width: 0;
      overflow-x: hidden;
      transition: margin-left .22s ease
    }

    body.sb-collapsed .content {
      margin-left: 0
    }

    /* ── Sidebar inner ── */
    .brand-tag {
      font-size: 9px;
      color: var(--accent);
      letter-spacing: .14em;
      text-transform: uppercase
    }

    .brand-h {
      font-size: 17px;
      font-weight: 700;
      margin: 2px 0 1px
    }

    .brand-v {
      font-size: 9px;
      color: var(--muted);
      background: rgba(212, 146, 42, .1);
      border: 1px solid rgba(212, 146, 42, .22);
      border-radius: 3px;
      padding: 1px 5px;
      display: inline-block;
      margin-bottom: 3px
    }

    .brand-p {
      font-size: 10px;
      color: var(--muted);
      line-height: 1.5
    }

    .card {
      border: 1px solid var(--line);
      border-radius: 11px;
      padding: 10px;
      background: var(--panel)
    }

    .ctrl {
      width: 100%;
      border: 1px solid var(--line);
      background: var(--panel2);
      color: var(--text);
      border-radius: 8px;
      padding: 8px 10px;
      font: inherit;
      font-size: 11px;
      cursor: pointer
    }

    .ctrl:hover,
    .ctrl:focus {
      border-color: #3d5a7a;
      outline: none
    }

    .btn-primary {
      background: rgba(212, 146, 42, .14);
      border-color: rgba(212, 146, 42, .38);
      color: #f6c060;
      font-weight: 600
    }

    .btn-primary:hover {
      background: rgba(212, 146, 42, .24) !important
    }

    .file-label {
      display: block;
      cursor: pointer
    }

    .file-label input {
      display: none
    }

    .meta {
      font-size: 10px;
      color: var(--muted);
      line-height: 1.5
    }

    .hr-panel {
      border: 1px solid rgba(239, 68, 68, .22);
      border-radius: 10px;
      padding: 9px;
      background: rgba(239, 68, 68, .03)
    }

    .hr-title {
      font-size: 9px;
      color: #f87171;
      text-transform: uppercase;
      letter-spacing: .09em;
      font-weight: 600;
      margin-bottom: 6px
    }

    .hr-item {
      display: flex;
      align-items: center;
      gap: 6px;
      padding: 4px 6px;
      border-radius: 6px;
      cursor: pointer;
      transition: background .12s;
      border: 1px solid transparent
    }

    .hr-item:hover {
      background: rgba(239, 68, 68, .07);
      border-color: rgba(239, 68, 68, .18)
    }

    .hr-item.active-hr {
      background: rgba(239, 68, 68, .11);
      border-color: rgba(239, 68, 68, .28)
    }

    .hr-rank {
      font-size: 9px;
      font-weight: 700;
      color: #f87171;
      min-width: 15px
    }

    .hr-name {
      font-size: 10px;
      flex: 1;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap
    }

    .hr-score {
      font-size: 9px;
      color: var(--muted)
    }

    /* ── Hero ── */
    .hero {
      border: 1px solid var(--line);
      border-radius: 14px;
      padding: 16px;
      margin-bottom: 12px;
      background: var(--panel)
    }

    .hero-grid {
      display: grid;
      grid-template-columns: 1fr auto;
      gap: 14px;
      align-items: start
    }

    .hero h2 {
      font-size: 20px;
      font-weight: 700;
      margin: 4px 0 4px;
      line-height: 1.2;
      word-break: break-word
    }

    .kpi-row {
      display: grid;
      grid-template-columns: repeat(5, 1fr);
      gap: 8px
    }

    .kpi {
      border: 1px solid var(--line);
      border-radius: 10px;
      padding: 10px;
      background: rgba(255, 255, 255, .018);
      min-width: 0
    }

    .kpi-l {
      font-size: 9px;
      text-transform: uppercase;
      color: var(--muted);
      letter-spacing: .07em;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis
    }

    .kpi-v {
      font-size: 15px;
      font-weight: 700;
      margin-top: 4px;
      word-break: break-all;
      line-height: 1.2;
      font-variant-numeric: tabular-nums
    }

    .kpi-s {
      font-size: 9px;
      color: var(--muted);
      margin-top: 2px
    }

    .risk-ring {
      display: inline-flex;
      align-items: center;
      gap: 7px;
      border: 1px solid var(--line);
      border-radius: 10px;
      padding: 7px 10px;
      background: rgba(255, 255, 255, .013);
      margin-top: 6px
    }

    .risk-dial {
      width: 44px;
      height: 44px;
      flex-shrink: 0
    }

    .risk-dial circle {
      fill: none;
      stroke-width: 6;
      stroke-linecap: round
    }

    .risk-dial .bg-ring {
      stroke: #1a2840
    }

    .risk-details {
      font-size: 10px;
      color: var(--muted);
      line-height: 1.6
    }

    .risk-details strong {
      font-size: 12px;
      color: var(--text);
      display: block
    }

    /* ── Badges ── */
    .badge {
      display: inline-flex;
      align-items: center;
      padding: 2px 7px;
      border-radius: 999px;
      font-size: 9px;
      text-transform: uppercase;
      letter-spacing: .07em;
      border: 1px solid transparent;
      font-weight: 600
    }

    .badge.high {
      background: rgba(239, 68, 68, .11);
      color: #fca5a5;
      border-color: rgba(239, 68, 68, .28)
    }

    .badge.medium {
      background: rgba(245, 158, 11, .11);
      color: #fcd34d;
      border-color: rgba(245, 158, 11, .28)
    }

    .badge.low {
      background: rgba(16, 185, 129, .11);
      color: #6ee7b7;
      border-color: rgba(16, 185, 129, .28)
    }

    .badge.info {
      background: rgba(59, 130, 246, .11);
      color: #93c5fd;
      border-color: rgba(59, 130, 246, .28)
    }

    /* ── Sections ── */
    .sec {
      border: 1px solid var(--line);
      border-radius: 13px;
      background: var(--panel);
      margin-bottom: 11px
    }

    .sec-h {
      padding: 10px 13px 8px;
      border-bottom: 1px solid var(--line);
      display: flex;
      justify-content: space-between;
      align-items: center;
      flex-wrap: wrap;
      gap: 6px
    }

    .sec-h h3 {
      font-size: 14px;
      font-weight: 600
    }

    .tabs {
      display: flex;
      flex-wrap: wrap;
      gap: 4px
    }

    .tab {
      border: 1px solid var(--line);
      background: rgba(255, 255, 255, .03);
      color: var(--muted);
      border-radius: 999px;
      padding: 4px 10px;
      cursor: pointer;
      font-size: 10px;
      transition: all .12s
    }

    .tab.active {
      background: rgba(212, 146, 42, .13);
      color: #f6c060;
      border-color: rgba(212, 146, 42, .36)
    }

    .tab:hover:not(.active) {
      border-color: #3d5a7a;
      color: var(--text)
    }

    .stabs {
      display: flex;
      flex-wrap: wrap;
      gap: 4px;
      margin-bottom: 10px
    }

    .stab {
      border: 1px solid var(--line);
      background: rgba(255, 255, 255, .025);
      color: var(--muted);
      border-radius: 7px;
      padding: 3px 9px;
      cursor: pointer;
      font-size: 10px;
      transition: all .12s
    }

    .stab.active {
      background: rgba(59, 130, 246, .13);
      color: #93c5fd;
      border-color: rgba(59, 130, 246, .36)
    }

    .stab:hover:not(.active) {
      border-color: #3d5a7a
    }

    /* ── Tables ── */
    .tw {
      overflow-x: auto;
      -webkit-overflow-scrolling: touch;
      border: 1px solid var(--line);
      border-radius: 10px;
      max-width: 100%;
      display: block
    }

    .tw td,
    .tw th {
      min-width: 80px;
      text-align: right;
      white-space: nowrap
    }

    .tw th {
      white-space: normal;
      word-break: break-word
    }

    .tw td:first-child,
    .tw th:first-child {
      min-width: 160px;
      width: auto;
      max-width: none;
      white-space: normal;
      text-align: left
    }

    .tw.auto-cols td:first-child,
    .tw.auto-cols th:first-child {
      min-width: auto;
      max-width: none;
      white-space: nowrap;
      text-align: left;
    }

    .tw td.ref-col,
    .tw th.ref-col {
      min-width: 40px;
      max-width: 68px;
      text-align: left
    }

    .tw td.rmk,
    .tw th.rmk {
      min-width: 180px;
      max-width: 280px;
      white-space: normal;
      font-size: 10px;
      color: var(--muted);
      text-align: left
    }

    .tw td.co-name,
    .tw th.co-name {
      min-width: 140px;
      max-width: 260px;
      white-space: normal;
      text-align: left;
      word-break: break-word
    }

    .tw td.arf,
    .tw th.arf {
      min-width: 220px;
      text-align: left;
      white-space: normal
    }

    table {
      border-collapse: collapse;
      width: max-content;
      min-width: 0;
      font-size: 11px
    }

    th {
      position: sticky;
      top: 0;
      background: #0e1724;
      color: #9ab5d0;
      padding: 8px 14px;
      text-align: left;
      font-size: 9px;
      letter-spacing: .05em;
      text-transform: uppercase;
      white-space: nowrap;
      border-bottom: 1px solid var(--line)
    }

    td {
      padding: 7px 14px;
      border-bottom: 1px solid rgba(255, 255, 255, .035);
      white-space: nowrap;
      vertical-align: middle;
      word-break: keep-all
    }

    tr:last-child td {
      border-bottom: 0
    }

    tr:hover td {
      background: rgba(255, 255, 255, .02)
    }

    .pos {
      color: #34d399
    }

    .neg {
      color: #f87171
    }

    .warn-c {
      color: #fbbf24
    }

    .neut {
      color: var(--muted)
    }

    .num-r {
      text-align: right;
      font-variant-numeric: tabular-nums
    }

    /* ── Blocks, tips ── */
    .blk {
      border: 1px solid var(--line);
      border-radius: 10px;
      padding: 11px;
      margin-bottom: 8px;
      background: rgba(255, 255, 255, .013)
    }

    .blk-t {
      font-size: 11px;
      font-weight: 600;
      margin-bottom: 2px;
      color: var(--accent)
    }

    .blk-d {
      font-size: 10px;
      color: var(--muted);
      margin-bottom: 8px;
      line-height: 1.5
    }

    .tip {
      background: rgba(59, 130, 246, .06);
      border: 1px solid rgba(59, 130, 246, .16);
      border-radius: 6px;
      padding: 6px 8px;
      font-size: 10px;
      color: #93c5fd;
      margin-top: 6px;
      line-height: 1.5
    }

    .tip.warn-tip {
      background: rgba(245, 158, 11, .06);
      border-color: rgba(245, 158, 11, .18);
      color: #fcd34d
    }

    .ryear {
      border: 1px solid var(--line);
      border-radius: 8px;
      overflow: hidden;
      margin-top: 6px
    }

    .ryh {
      padding: 4px 9px;
      background: rgba(212, 146, 42, .06);
      border-bottom: 1px solid var(--line);
      font-size: 10px;
      font-weight: 600;
      color: var(--accent)
    }

    .rcols {
      display: grid;
      grid-template-columns: 1fr 1fr 1fr 1fr
    }

    .rc {
      padding: 6px 8px;
      border-right: 1px solid rgba(255, 255, 255, .04)
    }

    .rc:last-child {
      border-right: 0
    }

    .rcl {
      font-size: 8px;
      text-transform: uppercase;
      color: var(--muted);
      letter-spacing: .06em;
      margin-bottom: 2px
    }

    .rcv {
      font-size: 11px;
      font-variant-numeric: tabular-nums
    }

    /* ── Ratio cards ── */
    .rg {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
      gap: 7px
    }

    .rc2 {
      border: 1px solid var(--line);
      border-radius: 8px;
      padding: 9px;
      background: rgba(255, 255, 255, .018)
    }

    .rc2-n {
      font-size: 9px;
      color: var(--muted);
      text-transform: uppercase;
      letter-spacing: .06em;
      margin-bottom: 3px
    }

    .rc2-vs {
      display: flex;
      gap: 8px;
      flex-wrap: wrap
    }

    .rc2-v {
      font-size: 11px;
      font-weight: 600
    }

    .rc2-y {
      font-size: 9px;
      color: var(--muted)
    }

    /* ── Month grid ── */
    .mg {
      display: grid;
      grid-template-columns: repeat(12, 1fr);
      gap: 2px;
      margin-top: 4px
    }

    .mc {
      border-radius: 3px;
      padding: 2px 0;
      text-align: center;
      font-size: 8px;
      font-weight: 600
    }

    .mc.ok {
      background: rgba(16, 185, 129, .18);
      color: #34d399
    }

    .mc.missing {
      background: rgba(239, 68, 68, .18);
      color: #f87171
    }

    .mc.zero {
      background: rgba(245, 158, 11, .13);
      color: #fbbf24
    }

    /* ── Mini panels ── */
    .mini {
      background: rgba(255, 255, 255, .013);
      border: 1px solid var(--line);
      border-radius: 10px;
      padding: 11px;
      margin-bottom: 8px;
      min-width: 0
    }

    .mini h4 {
      font-size: 10px;
      font-weight: 600;
      color: var(--accent);
      margin-bottom: 7px;
      text-transform: uppercase;
      letter-spacing: .05em
    }

    .notice {
      padding: 7px 10px;
      border-radius: 8px;
      background: rgba(239, 68, 68, .07);
      border: 1px solid rgba(239, 68, 68, .18);
      color: #fca5a5;
      font-size: 10px;
      margin-top: 6px
    }

    .empty {
      border: 1px dashed var(--line);
      color: var(--muted);
      border-radius: 10px;
      padding: 18px;
      text-align: center;
      font-size: 11px
    }

    .code {
      font-family: Consolas, monospace;
      font-size: 10px
    }

    /* TOI_Adj row highlights */
    tr.toi-hl > td {
      background: rgba(255, 210, 80, 0.08);
      border-top: 1px solid rgba(255, 210, 80, 0.25);
      font-weight: 600;
    }
    tr.toi-hl > td .code { color: #f0c040; }
    tr.toi-sub > td {
      background: rgba(100, 160, 255, 0.06);
      font-style: italic;
      color: var(--dim, #8899aa);
    }
    tr.toi-calc > td {
      background: rgba(255, 255, 255, 0.03);
      font-style: italic;
      font-size: 10px;
      color: var(--dim, #8899aa);
      border-top: none;
    }
    tr.ann-red > td {
      color: #f87171;
    }
    .tw td, .tw th {
      color: #e2e8f0;
    }

    .g2 {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 10px
    }

    .g2>* {
      min-width: 0
    }

    .rs-table th {
      background: #0b1320;
      font-size: 9px
    }

    .rs-table td {
      font-size: 10px
    }

    .rs-numcol {
      text-align: right;
      font-variant-numeric: tabular-nums;
      display: block
    }

    .rank-row-tin {
      cursor: pointer;
      color: var(--accent2);
      text-decoration: underline dotted
    }

    .rank-row-tin:hover {
      color: #bfdbfe
    }

    .fx-chip {
      display: inline-flex;
      align-items: center;
      padding: 1px 5px;
      border-radius: 3px;
      font-size: 8px;
      font-weight: 700;
      letter-spacing: .06em;
      text-transform: uppercase;
      vertical-align: middle;
      margin-left: 4px;
      background: rgba(34, 211, 238, .13);
      color: var(--fx);
      border: 1px solid rgba(34, 211, 238, .28)
    }

    /* ── Ranking detail panels ── */
    .rank-detail-bar {
      display: flex;
      gap: 5px;
      flex-wrap: wrap;
      margin-bottom: 9px;
      align-items: center
    }

    .rank-detail-btn {
      border: 1px solid var(--line);
      background: rgba(255, 255, 255, .025);
      color: var(--muted);
      border-radius: 7px;
      padding: 4px 10px;
      cursor: pointer;
      font-size: 10px;
      transition: all .12s;
      font: inherit
    }

    .rank-detail-btn:hover {
      border-color: #3d5a7a;
      color: var(--text)
    }

    .rank-detail-btn.active {
      background: rgba(59, 130, 246, .13);
      color: #93c5fd;
      border-color: rgba(59, 130, 246, .36)
    }

    /* ── IS vertical analysis ── */
    .va-tbl th.pct-col {
      background: #0b1520;
      color: #5a8aaa
    }

    .va-tbl td.pct-col {
      color: var(--muted);
      font-size: 10px
    }

    /* ── Monthly horizontal analysis ── */
    .mon-trend {
      font-size: 9px;
      padding-left: 4px
    }

    /* ── Monthly trend chart ── */
    .chart-wrap{border:1px solid var(--line);border-radius:10px;padding:14px;background:rgba(255,255,255,.013);margin-bottom:10px}
    .chart-bar{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-bottom:10px}
    .chart-bar label{font-size:9px;color:var(--muted);text-transform:uppercase;letter-spacing:.06em}
    .chart-bar select{height:28px;border:1px solid var(--line);background:var(--panel2);color:var(--text);border-radius:6px;padding:0 8px;font:inherit;font-size:11px;min-width:100px}
    .chart-bar select:focus{border-color:#3d5a7a;outline:none}
    .chart-canvas-wrap{position:relative;width:100%;height:220px}
    .chart-tip{position:absolute;pointer-events:none;padding:6px 10px;border-radius:6px;background:rgba(15,24,40,.94);border:1px solid var(--line);font-size:10px;color:var(--text);white-space:nowrap;display:none;z-index:10;box-shadow:0 4px 12px rgba(0,0,0,.4)}
    .chart-tip .ct-lbl{color:var(--muted);font-size:9px;display:block;margin-bottom:2px}
    .chart-tip .ct-val{color:#34d399;font-weight:700;font-variant-numeric:tabular-nums}

    @media(max-width:1000px) {

      .hero-grid,
      .g2,
      .kpi-row,
      .kpi-grid-4 {
        grid-template-columns: 1fr 1fr   /* 2 columns on medium */
      }

      .rcols {
        grid-template-columns: 1fr 1fr
      }
    }

    @media(max-width:600px) {
      .hero-grid,
      .g2,
      .kpi-row,
      .kpi-grid-4 {
        grid-template-columns: 1fr   /* 1 column on phones */
      }
    }

    .kpi-grid-4 {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 8px;
      margin-bottom: 14px;
    }
  </style>

    /* ── Multi-page top navigation (added for the redesigned multi-file version) ── */
    #pageNav {
      display: flex;
      flex-wrap: wrap;
      gap: 4px;
      align-items: center;
      position: relative;
    }

    a.tab {
      text-decoration: none;
      display: inline-block;
    }

    .tab-more {
      position: relative;
    }

    .tab-more > button.tab {
      font-family: inherit;
    }

    .tab-more.active > button.tab {
      background: rgba(212, 146, 42, .13);
      color: #f6c060;
      border-color: rgba(212, 146, 42, .36)
    }

    .tab-more-list {
      display: none;
      position: absolute;
      top: calc(100% + 4px);
      left: 0;
      background: var(--panel2);
      border: 1px solid var(--line);
      border-radius: 8px;
      padding: 5px;
      min-width: 160px;
      z-index: 40;
      box-shadow: 0 8px 22px rgba(0, 0, 0, .35);
    }

    .tab-more.open .tab-more-list {
      display: flex;
      flex-direction: column;
      gap: 2px;
    }

    .tab-more-list a {
      text-decoration: none;
      color: var(--muted);
      font-size: 11px;
      padding: 6px 9px;
      border-radius: 6px;
      white-space: nowrap;
    }

    .tab-more-list a:hover {
      background: rgba(255, 255, 255, .05);
      color: var(--text);
    }

    .tab-more-list a.active {
      color: #f6c060;
      background: rgba(212, 146, 42, .1);
    }