:root{
        --bg:#080808;
        --panel:#0f0d0b;
        --panel2:#15110d;
        --border:#5c431d;
        --border-soft:rgba(146,108,48,.35);
        --gold:#f0d06b;
        --gold-soft:#b18b42;
        --text:#f5f1e8;
        --muted:#9f9788;
        --green:#8fe388;
        /** Нижняя граница градиента Профит/GPH/руб. для значений в (0, 1] */
        --green-muted:#5a8a62;
        --red:#ff8d8d;
        /** Лёгкая «зебра» для строк таблицы — тёплый оттенок в духе золота/панели */
        --table-row-zebra:rgba(92,67,29,.12);
        /** Скроллбар таблицы (трек / ползунок) — в тон панели и --gold-soft */
        --scrollbar-track:rgba(10, 8, 6, 0.92);
        --scrollbar-thumb:rgba(92, 67, 29, 0.85);
        --scrollbar-thumb-hover:rgba(177, 139, 66, 0.65);
        --scrollbar-thumb-border:rgba(177, 139, 66, 0.22);
      }

      *{box-sizing:border-box}

      html,body{
        margin:0;
        padding:0;
        width:100%;
        height:100%;
        overflow:hidden;
        background:var(--bg);
        color:var(--text);
        font-family: 'Nunito', Arial, sans-serif;
      }

      body{
        background:
          radial-gradient(circle at top, rgba(91,56,18,.35), transparent 28%),
          linear-gradient(180deg,#1a120a 0%, #0b0908 22%, #080808 100%);
      }

      .app{
        display:grid;
        grid-template-columns:minmax(240px,320px) 1fr;
        grid-template-rows:auto minmax(0,1fr);
        row-gap:12px;
        column-gap:0;
        width:100%;
        height:100%;
        min-height:0;
      }

      /** Верхняя строка: заголовок слева, метрики справа — выравнивание с нижней строкой (меню | таблица). */
      .app-sidebar-head{
        grid-column:1;
        grid-row:1;
        border-right:1px solid var(--border-soft);
        background:rgba(0,0,0,.22);
        padding:18px 18px 0 18px;
        min-width:0;
      }
      .app-sidebar-body{
        grid-column:1;
        grid-row:2;
        border-right:1px solid var(--border-soft);
        background:rgba(0,0,0,.22);
        padding:0 18px 18px 18px;
        min-width:0;
        min-height:0;
        overflow:auto;
      }

      .app-main-head{
        grid-column:2;
        grid-row:1;
        padding:18px 18px 0 18px;
        min-width:0;
      }

      .main{
        grid-column:2;
        grid-row:2;
        padding:0 18px 18px 18px;
        overflow:hidden;
        display:flex;
        flex-direction:column;
        gap:0;
        min-width:0;
        min-height:0;
      }
      .title-row{
        display:flex;
        flex-direction:column;
        align-items:stretch;
        justify-content:flex-start;
        gap:12px;
      }
      .title-main{
        width:100%;
        display:flex;
        justify-content:center;
      }
      .title-controls-row{
        display:flex;
        width:100%;
        align-items:center;
        justify-content:center;
        gap:14px;
        margin-top:-2px;
      }

      .title{
        font-size:30px;
        font-weight:700;
        color:var(--gold);
        letter-spacing:.04em;
        padding-left:26px;
      }

      .locale-select{
        min-width:120px;
        padding:6px 10px;
        border-radius:999px;
        border:1px solid var(--border-soft);
        background:rgba(0,0,0,.25);
        color:var(--text);
        font-size:12px;
      }
      .online-indicator{
        display:inline-flex;
        align-items:center;
        justify-content:center;
        gap:6px;
        color:var(--muted);
        font-size:12px;
        font-weight:600;
        font-variant-numeric:tabular-nums;
        width:auto;
        letter-spacing:.02em;
      }
      .online-indicator-dot{
        width:8px;
        height:8px;
        border-radius:50%;
        background:radial-gradient(circle at 30% 30%, #c9ffd1 0%, #4ed462 45%, #1d8f35 100%);
        box-shadow:
          0 0 0 1px rgba(32,168,60,.28),
          0 0 6px rgba(56,208,92,.55);
        flex-shrink:0;
      }
      .online-indicator-count{
        font-size:13px;
        line-height:1;
        color:var(--text);
      }
      .panel{
        border:1px solid var(--border-soft);
        background:linear-gradient(180deg, rgba(26,19,12,.95), rgba(12,11,10,.95));
        border-radius:18px;
        box-shadow:0 10px 30px rgba(0,0,0,.35);
        min-width:0;
        min-height:0;
      }

      .panel-header{
        padding:12px 14px;
        border-bottom:1px solid rgba(146,108,48,.2);
        color:var(--gold-soft);
        font-size:12px;
        text-transform:uppercase;
        letter-spacing:.16em;
      }

      .panel-body{
        padding:14px;
      }

      .metrics{
        display:grid;
        grid-template-columns:repeat(4, minmax(120px,1fr));
        gap:12px;
      }

      .metric{
        padding:12px 14px;
        border-radius:14px;
        border:1px solid var(--border-soft);
        background:rgba(0,0,0,.2);
        min-height:96px;
        box-sizing:border-box;
        display:flex;
        flex-direction:column;
        align-items:stretch;
        text-align:center;
        gap:6px;
      }

      .metric-label{
        font-size:11px;
        color:var(--gold-soft);
        text-transform:uppercase;
        letter-spacing:.14em;
        text-align:center;
        flex-shrink:0;
      }

      .metric-recipe-host,
      .metric > .metric-value{
        flex:1;
        min-height:0;
        display:flex;
        flex-direction:column;
        align-items:center;
        justify-content:center;
        width:100%;
      }

      .metric-value{
        font-size:24px;
        font-weight:700;
        color:var(--gold);
      }

      .metric-recipe-inner{
        display:flex;
        align-items:center;
        justify-content:center;
        flex-wrap:wrap;
        gap:10px;
        min-height:36px;
        width:100%;
      }
      .metric-recipe-icon-wrap{
        flex-shrink:0;
        display:inline-flex;
        border-radius:6px;
        padding:2px;
      }
      .metric-recipe-icon{
        width:28px;
        height:28px;
        border-radius:4px;
        display:block;
        box-shadow:0 0 4px rgba(0,0,0,.45);
      }
      .metric-recipe-name{
        font-size:14px;
        font-weight:600;
        line-height:1.25;
        color:var(--text);
        word-break:break-word;
        text-align:center;
        display:-webkit-box;
        -webkit-line-clamp:2;
        -webkit-box-orient:vertical;
        overflow:hidden;
      }
      .metric-recipe-empty{
        display:flex;
        align-items:center;
        justify-content:center;
        font-size:20px;
        font-weight:700;
        color:var(--muted);
      }
      .metric-recipe-host--interactive{
        cursor:pointer;
        border-radius:8px;
        margin:4px 0;
        padding:6px;
        transition:background .15s ease;
      }
      .metric-recipe-host--interactive:hover{
        background:rgba(255,255,255,.04);
      }
      .metric-recipe-host--interactive:focus-visible{
        outline:2px solid rgba(177,139,66,.55);
        outline-offset:2px;
      }
      .metric-metric-gph{
        font-variant-numeric:tabular-nums;
        letter-spacing:.02em;
      }
      .metric .td-gold-with-coin{
        justify-content:center;
      }
      /** Страховка, если движок всё же оборачивает цифры в tel-ссылку (iOS / Chrome). */
      .metric-metric-gph a{
        color:inherit;
        text-decoration:none;
        pointer-events:none;
        cursor:default;
      }

      /**
       * Дашборд (4 плитки) и строка «таблица | детали» делят одну сетку из 4 колонок (subgrid),
       * чтобы левый край «Деталей» совпадал с левым краем плитки «Обновлено».
       */
      .main-dashboard-table{
        flex:1;
        display:grid;
        grid-template-columns:repeat(4,minmax(0,1fr));
        grid-template-rows:minmax(0,1fr);
        gap:12px;
        min-width:0;
        min-height:0;
        width:100%;
        align-items:stretch;
      }
      .main-split{
        grid-column:1 / -1;
        grid-row:1;
        display:grid;
        grid-template-columns:subgrid;
        column-gap:12px;
        row-gap:0;
        min-height:0;
        min-width:0;
        align-items:stretch;
      }
      .main-split > .main-split__primary{
        grid-column:span 3;
        min-width:0;
        min-height:0;
        display:flex;
        flex-direction:column;
      }
      .main-split > .main-split__aside{
        grid-column:span 1;
        min-width:0;
        min-height:0;
        display:flex;
        flex-direction:column;
      }
      .main-split__primary,
      .main-split__aside{
        min-width:0;
        min-height:0;
      }
      .details-panel{
        flex:1;
        display:flex;
        flex-direction:column;
        min-height:0;
      }
      .details-panel .panel-body{
        flex:1;
        min-height:0;
        overflow:auto;
        scrollbar-width:thin;
        scrollbar-color:var(--scrollbar-thumb) var(--scrollbar-track);
      }
      .details-panel .panel-body::-webkit-scrollbar{
        width:11px;
        height:11px;
      }
      .details-panel .panel-body::-webkit-scrollbar-track{
        background:var(--scrollbar-track);
        border-radius:8px;
        margin:3px;
      }
      .details-panel .panel-body::-webkit-scrollbar-thumb{
        background:linear-gradient(180deg, rgba(177,139,66,.42), rgba(92,67,29,.75));
        border-radius:8px;
        border:2px solid transparent;
        background-clip:padding-box;
        box-shadow:inset 0 0 0 1px var(--scrollbar-thumb-border);
      }
      .details-panel .panel-body::-webkit-scrollbar-thumb:hover{
        background:linear-gradient(180deg, rgba(240,208,107,.28), var(--scrollbar-thumb-hover));
        box-shadow:inset 0 0 0 1px rgba(177,139,66,.35);
      }
      .details-panel .panel-body::-webkit-scrollbar-corner{
        background:var(--scrollbar-track);
      }

      .table-attached-search{
        flex-shrink:0;
        padding:12px 18px 10px;
        border-bottom:1px solid rgba(146,108,48,.22);
        background:rgba(6,5,4,.55);
      }
      .table-attached-search .search-box{
        width:100%;
        border-radius:14px;
      }

      .search-box, .select-box{
        display:flex;
        align-items:center;
        gap:10px;
        padding:10px 16px;
        border-radius:14px;
        border:1px solid var(--border-soft);
        background:rgba(15,13,11,.92);
      }

      .search-box input{
        width:100%;
        background:transparent;
        border:none;
        outline:none;
        color:var(--text);
        font-size:14px;
      }

      .btn{
        border:1px solid var(--border);
        border-radius:18px;
        padding:14px 16px;
        background:linear-gradient(180deg,#3a2915,#19110b);
        color:var(--gold);
        font-weight:700;
        cursor:pointer;
      }

      .btn.secondary{
        background:linear-gradient(180deg,#2b2b2b,#171717);
        color:#ddd;
        border-color:#525252;
      }

      .table-wrap{
        min-height:0;
        overflow:hidden;
        display:flex;
        flex-direction:column;
        min-width:0;
      }

      /** Вкладки над таблицей: равные доли ширины, расширяемо через .table-tab[data-tab-id]. */
      .table-tabs{
        display:flex;
        width:100%;
        flex-shrink:0;
        padding:0 18px;
        box-sizing:border-box;
        gap:0;
        border-bottom:1px solid rgba(146,108,48,.28);
        background:rgba(6,5,4,.92);
      }
      .table-tab{
        flex:1 1 0;
        min-width:0;
        margin:0;
        border:none;
        border-bottom:2px solid transparent;
        background:transparent;
        color:var(--muted);
        font:inherit;
        font-size:12px;
        font-weight:700;
        letter-spacing:.1em;
        text-transform:uppercase;
        padding:12px 12px 11px;
        cursor:pointer;
        transition:color .15s ease, background .15s ease, border-color .15s ease;
        white-space:normal;
        overflow-wrap:anywhere;
      }
      .table-tab:hover{
        color:var(--gold-soft);
        background:rgba(255,255,255,.04);
      }
      .table-tab.is-active{
        color:var(--gold);
        border-bottom-color:rgba(177,139,66,.9);
        background:rgba(92,67,29,.18);
      }
      .table-tab-panel{
        flex:1;
        min-height:0;
        display:flex;
        flex-direction:column;
        overflow:hidden;
      }
      .table-tab-panel.is-hidden{
        display:none;
      }

      /**
       * Skeleton / shimmer (как у крупных веб-приложений): движущийся серый градиент поверх блока.
       * Без внешних зависимостей — надёжно для Apps Script.
       */
      .load-region{
        position:relative;
      }
      .load-region--table{
        flex:1;
        min-height:0;
        display:flex;
        flex-direction:column;
      }
      .load-region.is-loading{
        pointer-events:none;
      }
      .load-region.is-loading > *{
        visibility:hidden;
      }
      .load-region.is-loading::before{
        content:'';
        position:absolute;
        inset:0;
        z-index:6;
        border-radius:inherit;
        background:linear-gradient(
          90deg,
          rgba(42,40,38,.92) 0%,
          rgba(42,40,38,.92) 38%,
          rgba(72,68,62,.98) 50%,
          rgba(42,40,38,.92) 62%,
          rgba(42,40,38,.92) 100%
        );
        background-size:200% 100%;
        animation:load-shimmer 1.35s ease-in-out infinite;
      }
      #loadRegionMetrics.is-loading{ min-height:96px; }
      #loadRegionTable.is-loading{ min-height:min(45vh, 320px); }
      @keyframes load-shimmer{
        0%{ background-position:100% 0; }
        100%{ background-position:-100% 0; }
      }
      @media (prefers-reduced-motion: reduce){
        .load-region.is-loading::before{
          animation:none;
          background:rgba(48,45,42,.95);
        }
      }

      .load-error-slot{
        display:flex;
        align-items:center;
        gap:10px;
        padding:14px 18px;
        border-radius:10px;
        background:rgba(248,113,113,.06);
        border:1px solid rgba(248,113,113,.22);
        color:#f87171;
        font-size:13px;
        line-height:1.5;
        margin:14px 0 4px;
      }
      .load-error-slot::before{
        content:'⚠';
        flex-shrink:0;
        font-size:16px;
        opacity:.8;
      }
      .load-error-slot--auth{
        background:rgba(212,172,85,.06);
        border-color:rgba(212,172,85,.22);
        color:var(--gold-soft);
      }
      .load-error-slot--auth::before{
        content:'🔒';
        font-size:14px;
      }

      /** Одна область прокрутки; колонки — нативная <table> (thead/tbody), без сдвига относительно шапки. */
      .table-scroll{
        flex:1;
        min-height:0;
        min-width:0;
        overflow:auto;
        scrollbar-gutter:stable;
        padding:0 18px;
        box-sizing:border-box;
        scrollbar-width:thin;
        scrollbar-color:var(--scrollbar-thumb) var(--scrollbar-track);
      }
      .table-scroll::-webkit-scrollbar{
        width:11px;
        height:11px;
      }
      .table-scroll::-webkit-scrollbar-track{
        background:var(--scrollbar-track);
        border-radius:8px;
        margin:3px;
      }
      .table-scroll::-webkit-scrollbar-thumb{
        background:linear-gradient(180deg, rgba(177,139,66,.42), rgba(92,67,29,.75));
        border-radius:8px;
        border:2px solid transparent;
        background-clip:padding-box;
        box-shadow:inset 0 0 0 1px var(--scrollbar-thumb-border);
      }
      .table-scroll::-webkit-scrollbar-thumb:hover{
        background:linear-gradient(180deg, rgba(240,208,107,.28), var(--scrollbar-thumb-hover));
        box-shadow:inset 0 0 0 1px rgba(177,139,66,.35);
      }
      .table-scroll::-webkit-scrollbar-corner{
        background:var(--scrollbar-track);
      }

      .dash-table{
        width:100%;
        border-collapse:collapse;
        table-layout:fixed;
      }

      /** Рецепт + IN/OUT; сильнее ужимаем правые числовые колонки и добавляем ширину Реагентам/Произведено. */
      .dash-table col.col-recipe{ width:20%; }
      .dash-table col.col-reagents{ width:17%; }
      .dash-table col.col-best{ width:12%; }
      .dash-table col.col-produced{ width:14.5%; }
      .dash-table col.col-outcost{ width:17%; }
      .dash-table col.col-num{ width:7%; }
      .dash-table col.col-num.col-profit{ width:5%; }

      .dash-table thead th{
        padding:12px 12px 12px 0;
        border-bottom:1px solid rgba(146,108,48,.2);
        color:var(--gold-soft);
        font-size:12px;
        font-weight:600;
        text-transform:uppercase;
        letter-spacing:.14em;
        text-align:left;
        vertical-align:middle;
        background:rgba(8,8,8,.96);
        position:sticky;
        top:0;
        z-index:2;
      }
      .dash-table thead th.sortable{
        cursor:pointer;
      }
      .dash-table thead th.sortable:hover{
        color:var(--gold);
      }

      .dash-table tbody td{
        padding:12px 12px 12px 0;
        border-bottom:1px solid rgba(146,108,48,.08);
        text-align:left;
      }
      /** Многострочные блоки 2–5 — сверху; рецепт и числа — по центру. */
      .dash-table tbody td:nth-child(1),
      .dash-table tbody td:nth-child(6),
      .dash-table tbody td:nth-child(7),
      .dash-table tbody td:nth-child(8){
        vertical-align:middle;
      }
      /** Реагенты и «Лучшая цена» — по центру по вертикали. */
      .dash-table tbody td:nth-child(2),
      .dash-table tbody td:nth-child(3){
        vertical-align:middle;
      }
      /** Произведено и Себестоимость | Аукцион — по центру, чтобы при высокой строке (много реагентов) блок не прилипал к верху. */
      .dash-table tbody td:nth-child(4),
      .dash-table tbody td:nth-child(5){
        vertical-align:middle;
      }
      .dash-table tbody td:nth-child(4) .cell-reagents-auction,
      .dash-table tbody td:nth-child(5) .cell-reagents-cost{
        min-height:100%;
        justify-content:center;
      }

      .dash-table th.th-num,
      .dash-table td.td-num{
        text-align:right;
        padding-right:0;
        white-space:nowrap;
        word-break:normal;
        overflow-wrap:normal;
      }
      .td-gold-with-coin{
        display:inline-flex;
        align-items:center;
        gap:4px;
        white-space:nowrap;
      }
      .dash-table td.td-gph-col .td-gold-with-coin{
        width:100%;
        justify-content:flex-end;
      }
      .dash-table thead th.th-num.th-profit-col,
      .dash-table tbody td.td-num.td-profit-col{
        text-align:right;
        padding-left:2px;
        padding-right:2px;
      }
      /** Заголовок GPH центрируем по середине своей колонки. */
      .dash-table thead th.th-num.th-gph-col{
        text-align:center;
        padding-left:0;
        padding-right:0;
      }
      .dash-table thead th.col-best-price,
      .dash-table tbody td.col-best-price,
      .dash-table thead th.col-reagents,
      .dash-table tbody td.col-reagents,
      .dash-table thead th.col-produced,
      .dash-table tbody td.col-produced,
      .dash-table thead th.col-cost,
      .dash-table tbody td.col-cost,
      .dash-table thead th.col-profit,
      .dash-table tbody td.col-profit{
        display:table-cell;
      }
      /** Края таблицы: первая/последняя колонки не прилипают к границам скролла */
      .dash-table thead th:first-child,
      .dash-table tbody td:first-child{
        padding-left:10px;
      }
      .dash-table thead th.th-num:last-child,
      .dash-table tbody td.td-num:last-child{
        padding-right:12px;
      }

      .dash-table tbody tr.data-row{
        cursor:pointer;
        transition:background .15s ease;
      }

      .dash-table tbody tr.data-row:nth-child(even){
        background:var(--table-row-zebra);
      }

      .dash-table tbody tr.data-row:nth-child(odd):hover{
        background:rgba(255,255,255,.035);
      }
      .dash-table tbody tr.data-row:nth-child(even):hover{
        background:linear-gradient(
          rgba(255,255,255,.045),
          rgba(255,255,255,.045)
        ),
        var(--table-row-zebra);
      }

      .dash-table tbody tr.data-row.active{
        background:rgba(92,67,29,.25);
      }
      .dash-table tbody tr.data-row.active:hover{
        background:rgba(106,78,35,.32);
      }

      .dash-table tbody tr.data-row.good-left{
        box-shadow:inset 3px 0 0 rgba(143,227,136,.65);
      }

      .dash-table tbody tr.data-row.bad-left{
        box-shadow:inset 3px 0 0 rgba(255,141,141,.55);
      }

      .pager{
        display:flex;
        justify-content:space-between;
        align-items:center;
        padding:8px 18px;
        font-size:12px;
        color:var(--muted);
        border-top:1px solid rgba(146,108,48,.2);
        background:rgba(0,0,0,.3);
      }

      .pager button{
        padding:4px 8px;
        border-radius:999px;
        border:1px solid var(--border-soft);
        background:rgba(0,0,0,.3);
        color:var(--text);
        font-size:11px;
        cursor:pointer;
      }

      .pager button:disabled{
        opacity:.4;
        cursor:default;
      }

      .cell{
        padding-right:12px;
        font-size:14px;
        line-height:1.35;
        min-width:0;
        word-break:break-word;
        box-sizing:border-box;
      }

      .cell-reagents-auction{
        display:flex;
        flex-direction:column;
        flex-wrap:nowrap;
        gap:4px;
        align-items:flex-start;
        justify-content:center;
        flex:1 1 auto;
        min-height:0;
        min-width:0;
        width:100%;
      }

      .cell-reagents-cost{
        display:flex;
        flex-direction:column;
        flex-wrap:nowrap;
        gap:4px;
        align-items:flex-start;
        justify-content:center;
        flex:1 1 auto;
        min-height:0;
        min-width:0;
        width:100%;
        max-width:100%;
        overflow-x:auto;
        word-break:normal;
        box-sizing:border-box;
      }
      .reagent-line{
        display:flex;
        align-items:center;
        gap:4px;
        font-size:12px;
        white-space:nowrap;
        margin-bottom:4px;
        min-width:0;
      }
      .reagent-line:last-child{
        margin-bottom:0;
      }
      .reagent-line-income{
        padding-left:22px;
      }
      .reagent-line-price{
        justify-content:center;
        text-align:center;
        width:100%;
      }
      /** Заголовок и числа по центру колонки «Лучшая цена». */
      .dash-table thead th.th-best-price{
        text-align:center;
        padding-left:8px;
        padding-right:8px;
      }
      .cell-best-price{
        text-align:center;
        padding-left:6px;
        padding-right:6px;
      }
      .cell-best-price .cell-reagents-cost{
        align-items:center;
        justify-content:center;
        min-height:100%;
      }
      /** «Лучшая цена»: выравниваем высоту строк по ритму иконок реагентов (как в OUT/себестоимости). */
      .dash-table tbody td:nth-child(3) .cell-reagents-cost > .reagent-line-price,
      .dash-table tbody td:nth-child(3) .cell-reagents-cost > .reagent-line-cost-only{
        min-height:24px;
        box-sizing:border-box;
      }
      /** Один вертикальный ритм: gap на контейнере, без margin у строк — иначе «Произведено» и себестоимость расходятся. */
      .cell-reagents-auction > .reagent-line,
      .cell-reagents-cost > .reagent-line,
      .cell-reagents-cost > .reagent-line-cost-only,
      .cell-reagents-cost > .reagent-line-income{
        margin-bottom:0 !important;
      }
      /**
       * «Произведено» ↔ «Себестоимость»: без общей высоты строки иконка 18px+padding даёт ~20px,
       * а блок только с монетами — ниже; накопленный сдвиг к последнему OUT.
       */
      .dash-table tbody td:nth-child(4) .cell-reagents-auction > .reagent-line,
      .dash-table tbody td:nth-child(4) .cell-reagents-auction > .produced-income-mirror{
        min-height:24px;
        box-sizing:border-box;
      }
      .dash-table tbody td:nth-child(4) .cell-reagents-auction > .produced-income-mirror{
        display:flex;
        align-items:center;
      }
      .dash-table tbody td:nth-child(5) .cell-reagents-cost > .reagent-line-income,
      .dash-table tbody td:nth-child(5) .cell-reagents-cost > .reagent-line-cost-only{
        min-height:24px;
        box-sizing:border-box;
      }
      /** Реагенты: зазор до «Лучшая цена», перенос длинных имён (не вылезать в соседнюю колонку). */
      .dash-table thead th.th-reagents-col{
        padding-right:10px;
      }
      .cell-reagents-col{
        padding-right:10px;
        overflow:hidden;
      }
      .cell-reagents-col .cell-reagents-auction{
        align-items:stretch;
        max-width:100%;
        justify-content:center;
        min-height:100%;
      }
      /** Невидимая копия строки дохода — та же высота, что в «Себестоимость | …», без min-height. */
      .produced-income-mirror{
        visibility:hidden;
        pointer-events:none;
        user-select:none;
        flex-shrink:0;
      }
      /** Высота как у строки дохода в «Себестоимость»; отступ между блоками задаёт gap у .cell-reagents-auction. */
      .produced-income-mirror .reagent-line{
        margin-bottom:0 !important;
      }
      .produced-income-mirror .reagent-line-income{
        justify-content:center;
      }
      .cell-reagents-col .reagent-line{
        white-space:normal;
        flex-wrap:wrap;
        max-width:100%;
      }
      .cell-reagents-col .reagent-icon-wrap{
        flex-shrink:0;
      }
      .cell-reagents-col .reagent-name{
        min-width:0;
        word-break:break-word;
      }
      /** Иконки валюты WoW (money-gold.gif / money-silver.gif на zamimg). */
      .wow-coin-wrap{
        display:inline-flex;
        align-items:center;
        vertical-align:middle;
        margin-left:4px;
      }
      .wow-coin{
        display:inline-block;
        width:16px;
        height:16px;
        object-fit:contain;
        vertical-align:middle;
      }
      .td-num .wow-coin-wrap{
        margin-left:6px;
      }

      .cost-sep{
        margin:0 4px;
        color:var(--muted);
      }
      .reagent-line-cost-only{
        display:flex;
        align-items:center;
        justify-content:center;
        flex-wrap:wrap;
        gap:4px;
        font-size:12px;
        line-height:1.4;
        margin-bottom:4px;
        text-align:center;
      }
      .reagent-line-cost-only:last-child{
        margin-bottom:0;
      }
      .cell-cost-dual{
        text-align:center;
      }
      .cell-cost-dual .cell-reagents-cost{
        align-items:center;
        width:100%;
      }
      .dash-table thead th.th-cost-dual{
        text-align:center;
      }
      .cell-cost-dual .reagent-line-income{
        justify-content:center;
        padding-left:0;
      }
      .cell-cost-fallback-pre{
        white-space:pre-wrap;
        font-size:12px;
        line-height:1.45;
      }
      .reagent-icon-wrap{
        display:inline-flex;
        border-radius:3px;
        padding:1px;
        flex:0 0 auto;
      }
      .reagent-icon{
        width:18px;
        height:18px;
        object-fit:contain;
        display:block;
      }

      /** Flex только на внутренних div, не на <td> — иначе ломается table-layout и колонки «плывут». */
      .item-name{
        display:flex;
        align-items:flex-start;
        gap:10px;
        font-weight:700;
        min-width:0;
      }

      .item-link{
        text-decoration:none;
        color:inherit;
        display:flex;
        align-items:center;
        gap:10px;
        min-width:0;
      }

      .item-link:hover{
        text-decoration:underline;
      }

      .item-icon{
        width:22px;
        height:22px;
        border-radius:4px;
        box-shadow:0 0 4px rgba(0,0,0,.55);
        flex:0 0 auto;
      }

      .item-icon-wrap{
        position:relative;
        display:inline-flex;
        border-radius:4px;
        padding:1px;
        flex:0 0 auto;
      }

      .q-poor { color:#9d9d9d; }
      .q-common { color:#ffffff; }
      .q-uncommon { color:#1eff00; }
      .q-rare { color:#0070dd; }
      .q-epic { color:#a335ee; }
      .q-legendary { color:#ff8000; }

      .b-poor { box-shadow:0 0 0 1px #9d9d9d inset; }
      .b-common { box-shadow:0 0 0 1px #ffffff inset; }
      .b-uncommon { box-shadow:0 0 0 1px #1eff00 inset; }
      .b-rare { box-shadow:0 0 0 1px #0070dd inset; }
      .b-epic { box-shadow:0 0 0 1px #a335ee inset; }
      .b-legendary { box-shadow:0 0 0 1px #ff8000 inset; }

      .good{color:var(--green)}
      .bad{color:var(--red)}
      .muted{color:var(--muted)}
      .source-chain{color:#72c47a}

      .chain-box{
        line-height:1.45;
        color:#ece6d6;
        font-size:12px;
        text-align:left;
        overflow-x:auto;
        scrollbar-width:thin;
        scrollbar-color:rgba(177,139,66,.35) transparent;
      }
      .chain-box::-webkit-scrollbar{
        height:5px;
      }
      .chain-box::-webkit-scrollbar-track{
        background:transparent;
      }
      .chain-box::-webkit-scrollbar-thumb{
        background:rgba(177,139,66,.35);
        border-radius:4px;
      }
      .chain-box::-webkit-scrollbar-thumb:hover{
        background:rgba(177,139,66,.6);
      }
      .details-panel .chain-line{
        justify-content:flex-start;
      }
      .chain-tree{
        display:flex;
        flex-direction:column;
        gap:2px;
        min-width:max-content;
      }
      .chain-line{
        display:flex;
        flex-wrap:nowrap;
        align-items:center;
        gap:4px 6px;
        position:relative;
        padding:4px 8px 4px 10px;
        margin-left:0;
        border-radius:8px;
        background:rgba(0,0,0,.18);
        border:1px solid rgba(146,108,48,.2);
        box-shadow:inset 0 1px 0 rgba(255,255,255,.04);
      }
      .chain-line::before{
        content:'';
        position:absolute;
        left:0;
        top:0;
        bottom:0;
        width:3px;
        border-radius:10px 0 0 10px;
        background:linear-gradient(180deg, rgba(177,139,66,.55), rgba(92,67,29,.35));
        opacity:0.85;
      }
      .chain-branch-char{
        flex-shrink:0;
        width:14px;
        text-align:center;
        color:rgba(177,139,66,.8);
        font-family:Consolas, 'Courier New', monospace;
        font-size:12px;
        line-height:1;
        user-select:none;
      }
      .chain-node{
        display:flex;
        align-items:center;
        gap:5px;
        flex:0 0 auto;
      }
      .chain-node--right{
        flex:0 0 auto;
        min-width:40px;
      }
      .chain-icon{
        width:18px;
        height:18px;
        border-radius:4px;
        object-fit:contain;
        display:block;
        flex-shrink:0;
        box-shadow:0 0 4px rgba(0,0,0,.45);
      }
      .chain-icon-wrap{
        display:inline-flex;
        border-radius:4px;
        padding:1px;
        flex-shrink:0;
      }
      .chain-text{
        font-weight:600;
        font-size:12px;
        line-height:1.3;
        white-space:nowrap;
      }
      .chain-text[data-chain-search]{
        cursor:pointer;
        text-decoration:underline dotted rgba(177,139,66,.35);
        text-underline-offset:2px;
      }
      .chain-text[data-chain-search]:hover{
        text-decoration-color:rgba(177,139,66,.75);
      }
      .chain-arrow{
        flex:0 0 auto;
        color:rgba(177,139,66,.95);
        font-size:13px;
        line-height:1;
        padding:0 2px;
        text-shadow:0 0 8px rgba(0,0,0,.5);
      }
      .chain-tag--auction,
      .chain-tag--chain{
        display:inline-flex;
        align-items:center;
        flex-shrink:0;
        white-space:nowrap;
        padding:3px 8px;
        border-radius:999px;
        font-size:11px;
        font-weight:700;
        letter-spacing:.06em;
        text-transform:uppercase;
      }
      .chain-tag--auction{
        background:rgba(92,67,29,.45);
        border:1px solid rgba(177,139,66,.35);
        color:var(--gold-soft);
      }
      .chain-tag--chain{
        background:rgba(29,67,92,.45);
        border:1px solid rgba(48,139,177,.35);
        color:#5db8d8;
      }

      /** Блок «Детали»: grid-subgrid — выравнивание меток по самой широкой. */
      .detail-dl{
        display:grid;
        grid-template-columns:max-content 1fr;
        column-gap:10px;
        margin-top:10px;
        max-width:100%;
        box-sizing:border-box;
        font-size:13px;
      }
      .detail-dl-row{
        grid-column:1 / -1;
        display:grid;
        grid-template-columns:subgrid;
        align-items:start;
        padding:7px 0;
        border-bottom:1px solid rgba(146,108,48,.18);
      }
      .detail-dl-row:first-child{
        padding-top:0;
      }
      .detail-dl-row:last-child{
        border-bottom:none;
        padding-bottom:0;
      }
      .detail-dl-label{
        white-space:nowrap;
        color:var(--gold-soft);
        font-size:10px;
        font-weight:600;
        text-transform:uppercase;
        letter-spacing:.09em;
        line-height:1.45;
        text-align:right;
        padding-top:2px;
        box-sizing:border-box;
      }
      .detail-dl-value{
        min-width:0;
        word-break:break-word;
        line-height:1.4;
        text-align:left;
      }
      .detail-dl-value .detail-reagent-row{
        justify-content:flex-start;
        border-bottom:1px solid rgba(146,108,48,.14);
        padding-top:5px;
        padding-bottom:5px;
      }
      .detail-dl-value .detail-reagent-name{
        flex:1 1 auto;
        text-align:left;
      }
      .detail-dl-value .detail-reagent-price{
        margin-left:auto;
        text-align:right;
      }
      .detail-dl-value .detail-produced-merge-row{
        justify-content:flex-start;
        border-bottom:1px solid rgba(146,108,48,.18);
        padding-top:5px;
        padding-bottom:5px;
      }
      .detail-dl-value .detail-produced-merge-head{
        flex:1 1 auto;
        justify-content:flex-start;
      }
      .detail-dl-value .detail-produced-merge-costs{
        text-align:right;
        flex:0 0 auto;
      }
      .detail-dl-value .detail-produced-merge-costs .reagent-line-cost-only{
        justify-content:flex-end;
      }
      .detail-dl-value .td-gold-with-coin{
        justify-content:flex-start;
        width:auto;
      }
      .detail-dl-value .detail-reagent-row:first-child{
        padding-top:0;
      }
      .detail-dl-value .detail-reagent-row:last-child{
        padding-bottom:0;
        border-bottom:none;
      }
      .detail-dl-value .detail-produced-block > .detail-produced-merge-row:first-child{
        padding-top:0;
      }
      .detail-dl-value .detail-produced-merge-row:last-child{
        padding-bottom:0;
        border-bottom:none;
      }
      .detail-reagents-list{
        display:flex;
        flex-direction:column;
        gap:0;
      }
      .detail-reagent-row{
        display:flex;
        flex-wrap:nowrap;
        align-items:center;
        gap:4px 10px;
        padding:6px 0;
        border-bottom:1px solid rgba(146,108,48,.14);
      }
      .detail-reagent-row:first-child{
        padding-top:0;
      }
      .detail-reagent-row:last-child{
        border-bottom:none;
        padding-bottom:0;
      }
      .detail-reagent-name{
        flex:1 1 0;
        min-width:0;
        font-weight:600;
        white-space:nowrap;
        overflow:hidden;
        text-overflow:ellipsis;
      }
      .detail-reagent-price{
        flex:0 0 auto;
        margin-left:auto;
        text-align:right;
        white-space:nowrap;
        font-size:13px;
      }
      .detail-produced-block{
        display:flex;
        flex-direction:column;
        gap:0;
      }
      .detail-produced-merge-row{
        display:flex;
        flex-wrap:nowrap;
        align-items:center;
        gap:6px 10px;
        padding:7px 0;
        border-bottom:1px solid rgba(146,108,48,.2);
      }
      .detail-produced-block > .detail-produced-merge-row:first-child{
        padding-top:0;
      }
      .detail-produced-income-wrap + .detail-produced-merge-row{
        padding-top:0;
      }
      .detail-produced-merge-row:last-child{
        border-bottom:none;
        padding-bottom:0;
      }
      .detail-produced-merge-head{
        display:flex;
        align-items:center;
        gap:8px;
        flex:1 1 0;
        min-width:0;
        overflow:hidden;
      }
      .detail-produced-merge-head .reagent-name{
        overflow:hidden;
        text-overflow:ellipsis;
        white-space:nowrap;
      }
      .detail-produced-merge-costs{
        flex:0 1 auto;
        min-width:0;
        text-align:right;
        font-size:12px;
        white-space:nowrap;
      }
      .detail-produced-merge-costs .reagent-line-cost-only{
        justify-content:flex-end;
        margin-bottom:0;
      }
      .detail-produced-income-wrap{
        width:100%;
        display:flex;
        justify-content:center;
        margin:0 0 10px;
        box-sizing:border-box;
      }
      .detail-income-box{
        display:inline-flex;
        flex-direction:column;
        align-items:center;
        justify-content:center;
        gap:6px;
        max-width:100%;
        padding:8px 14px;
        border:1px solid rgba(177,139,66,.42);
        border-radius:6px;
        background:rgba(40,32,20,.25);
        box-sizing:border-box;
        text-align:center;
      }
      .detail-income-label{
        font-size:10px;
        font-weight:600;
        text-transform:uppercase;
        letter-spacing:.1em;
        color:var(--gold-soft);
        line-height:1.3;
      }
      .detail-income-value{
        font-size:15px;
        font-weight:700;
        letter-spacing:.02em;
        color:var(--text);
      }

      .detail-title{
        font-size:18px;
        font-weight:700;
        display:flex;
        align-items:center;
        justify-content:center;
        gap:10px;
        text-align:center;
        line-height:1.25;
      }

      .detail-sub{
        margin-top:4px;
        font-size:12px;
        color:var(--muted);
        text-align:center;
      }
      .detail-chain-header{
        margin-top:14px;
        padding-top:12px;
        border-top:1px solid rgba(146,108,48,.22);
        color:#b18b42;
        text-transform:uppercase;
        letter-spacing:.14em;
        font-size:11px;
        font-weight:600;
        text-align:center;
      }

      /* Sidebar drawer: display:contents = transparent wrapper, children participate in grid */
      .sidebar-drawer{
        display:contents;
      }

      .cat{
        width:100%;
        text-align:left;
        padding:9px 14px 9px 16px;
        border-radius:10px;
        border:1px solid transparent;
        background:transparent;
        color:var(--muted);
        font-size:13px;
        font-family:inherit;
        font-weight:500;
        cursor:pointer;
        position:relative;
        display:flex;
        align-items:center;
        gap:8px;
        margin-bottom:2px;
        transition:background .14s ease, color .14s ease, border-color .14s ease;
        line-height:1.3;
      }

      .cat::before{
        content:'';
        position:absolute;
        left:4px;
        top:50%;
        transform:translateY(-50%) scaleY(0);
        width:3px;
        height:56%;
        min-height:12px;
        background:linear-gradient(180deg,var(--gold),var(--gold-soft));
        border-radius:2px;
        transition:transform .16s cubic-bezier(0.34,1.56,0.64,1);
      }

      .cat:hover:not(:disabled){
        background:rgba(255,255,255,.04);
        color:var(--text);
      }

      .cat.active{
        background:rgba(92,67,29,.22);
        border-color:rgba(146,108,48,.28);
        color:var(--gold);
        font-weight:600;
      }

      .cat.active::before{
        transform:translateY(-50%) scaleY(1);
      }

      .cat:disabled{
        opacity:.5;
        cursor:not-allowed;
      }
      .cat:disabled.active{
        opacity:.68;
      }

      .calc-mode-panel{
        margin-top:16px;
        padding-top:14px;
        border-top:1px solid rgba(146,108,48,.18);
      }
      .calc-mode-label{
        font-size:10px;
        color:var(--muted);
        text-transform:uppercase;
        letter-spacing:.1em;
        margin-bottom:8px;
      }
      .calc-mode-toggle{
        display:flex;
        gap:0;
        background:rgba(0,0,0,.35);
        border:1px solid rgba(146,108,48,.2);
        border-radius:10px;
        padding:3px;
        width:100%;
      }
      .calc-mode-btn{
        flex:1;
        padding:7px 4px;
        font-size:11px;
        font-family:inherit;
        border:none;
        border-radius:8px;
        background:transparent;
        color:var(--muted);
        cursor:pointer;
        transition:background .15s, color .15s, box-shadow .15s;
        line-height:1.3;
        text-align:center;
        font-weight:500;
        letter-spacing:.03em;
      }
      .calc-mode-btn:hover{
        color:var(--gold);
      }
      .calc-mode-btn.is-active{
        background:linear-gradient(180deg,rgba(92,67,29,.55),rgba(50,36,16,.55));
        color:var(--gold);
        font-weight:600;
        box-shadow:0 1px 4px rgba(0,0,0,.4), inset 0 1px 0 rgba(177,139,66,.12);
      }

      .budget-panel{
        margin-top:14px;
      }
      .budget-label{
        font-size:10px;
        color:var(--muted);
        text-transform:uppercase;
        letter-spacing:.1em;
        margin-bottom:8px;
      }
      .budget-input{
        width:100%;
        box-sizing:border-box;
        padding:8px 10px;
        font-size:12px;
        font-family:inherit;
        color:var(--gold);
        background:rgba(0,0,0,.35);
        border:1px solid rgba(146,108,48,.2);
        border-radius:10px;
        outline:none;
        letter-spacing:.03em;
      }
      .budget-input::placeholder{
        color:var(--muted);
        opacity:.7;
      }
      .budget-input:focus{
        border-color:rgba(177,139,66,.45);
        box-shadow:0 0 0 2px rgba(146,108,48,.12);
      }
      .budget-tag{
        display:flex;
        align-items:center;
        justify-content:space-between;
        gap:8px;
        padding:7px 8px 7px 12px;
        background:linear-gradient(180deg,rgba(92,67,29,.55),rgba(50,36,16,.55));
        border:1px solid rgba(146,108,48,.35);
        border-radius:10px;
        box-shadow:0 1px 4px rgba(0,0,0,.4), inset 0 1px 0 rgba(177,139,66,.12);
      }
      .budget-tag.is-hidden,
      .budget-input.is-hidden{
        display:none;
      }
      .budget-tag-value{
        font-size:12px;
        font-weight:600;
        color:var(--gold);
        letter-spacing:.03em;
        white-space:nowrap;
        overflow:hidden;
        text-overflow:ellipsis;
      }
      .budget-tag-clear{
        flex:0 0 auto;
        width:18px;
        height:18px;
        line-height:16px;
        text-align:center;
        font-size:14px;
        font-family:inherit;
        color:var(--muted);
        background:rgba(0,0,0,.3);
        border:1px solid rgba(146,108,48,.25);
        border-radius:50%;
        cursor:pointer;
        padding:0;
        transition:color .15s, border-color .15s;
      }
      .budget-tag-clear:hover{
        color:var(--gold);
        border-color:rgba(177,139,66,.5);
      }

      .sidebar-telegram-wrap{
        margin-top:12px;
        padding-top:12px;
        border-top:1px solid rgba(146,108,48,.15);
      }
      .sidebar-telegram-link{
        display:flex;
        align-items:center;
        gap:10px;
        text-decoration:none;
        color:#b0d8f5;
        font-size:12px;
        line-height:1.38;
        padding:8px 10px;
        border-radius:10px;
        border:1px solid rgba(42,171,238,.15);
        background:rgba(42,171,238,.06);
        transition:background .15s ease, border-color .15s ease, color .15s ease;
      }
      .sidebar-telegram-link:hover{
        color:#cce9ff;
        background:rgba(42,171,238,.1);
        border-color:rgba(42,171,238,.28);
      }
      .sidebar-telegram-icon{
        flex-shrink:0;
        color:#2aabee;
        line-height:0;
      }
      .sidebar-telegram-icon svg{
        display:block;
      }
      .sidebar-telegram-text{
        min-width:0;
      }

      /* Auth topbar — game HUD panel */
      @keyframes nameGlow{
        0%,100%{text-shadow:none}
        50%{text-shadow:0 0 12px rgba(240,208,107,.35)}
      }
      .auth-topbar{
        margin:-18px -18px 14px -18px;
        padding:0 24px;
        height:40px;
        background:
          linear-gradient(90deg,rgba(4,3,1,.98) 0%,rgba(20,15,7,.97) 18%,rgba(20,15,7,.97) 82%,rgba(4,3,1,.98) 100%);
        border-bottom:1px solid rgba(92,67,29,.35);
        box-shadow:
          0 8px 32px rgba(0,0,0,.85),
          0 2px 6px rgba(0,0,0,.6),
          inset 0 -1px 0 rgba(0,0,0,.5);
        display:flex;
        align-items:center;
        justify-content:space-between;
        gap:16px;
        position:relative;
        z-index:10;
        overflow:hidden;
      }
      /* Decorative top gold line — fades to transparent at edges */
      .auth-topbar::before{
        content:'';
        position:absolute;
        top:0;left:0;right:0;
        height:1px;
        background:linear-gradient(
          90deg,
          transparent 0%,
          rgba(212,172,85,.18) 20%,
          rgba(212,172,85,.45) 50%,
          rgba(212,172,85,.18) 80%,
          transparent 100%
        );
      }
      /* Subtle repeating texture overlay */
      .auth-topbar::after{
        content:'';
        position:absolute;
        inset:0;
        background:repeating-linear-gradient(
          0deg,
          transparent,
          transparent 3px,
          rgba(255,255,255,.008) 3px,
          rgba(255,255,255,.008) 4px
        );
        pointer-events:none;
      }
      .auth-topbar-greeting{
        font-family:'Cinzel',serif;
        font-size:12px;
        font-weight:400;
        letter-spacing:.06em;
        color:rgba(159,151,136,.75);
        white-space:nowrap;
        position:relative;
        z-index:1;
      }
      .auth-topbar-greeting>span{
        color:var(--gold-soft);
        font-weight:600;
        animation:nameGlow 4s ease-in-out infinite;
      }
      .auth-topbar-actions{
        display:flex;
        align-items:center;
        gap:10px;
        flex-shrink:0;
        position:relative;
        z-index:1;
      }
      #authTopbarLoginPanel,
      #authTopbarUserPanel{
        display:none;
      }
      .auth-topbar-logout{
        font-family:'Cinzel',serif;
        font-size:10px;
        font-weight:600;
        letter-spacing:.1em;
        text-transform:uppercase;
        color:rgba(177,139,66,.8);
        background:linear-gradient(180deg,rgba(92,67,29,.18) 0%,rgba(40,28,10,.28) 100%);
        border:1px solid rgba(212,172,85,.2);
        border-radius:2px;
        padding:5px 14px;
        cursor:pointer;
        transition:color .2s,border-color .2s,background .2s,box-shadow .2s;
        position:relative;
      }
      .auth-topbar-logout:hover{
        color:var(--gold);
        background:linear-gradient(180deg,rgba(212,172,85,.12) 0%,rgba(92,67,29,.22) 100%);
        border-color:rgba(212,172,85,.45);
        box-shadow:0 0 10px rgba(212,172,85,.12),inset 0 1px 0 rgba(255,255,255,.04);
      }

      .pill-row{
        display:flex;
        flex-wrap:wrap;
        gap:8px;
        margin-top:12px;
      }

      .pill{
        padding:8px 12px;
        border-radius:999px;
        border:1px solid var(--border-soft);
        background:rgba(255,255,255,.03);
        color:#ddd;
        font-size:12px;
        cursor:pointer;
      }

      .pill.active{
        background:rgba(92,67,29,.35);
        color:var(--gold);
      }

      .detail-icon{
        width:32px;
        height:32px;
        border-radius:6px;
        box-shadow:0 0 4px rgba(0,0,0,.55);
      }

      .detail-icon-wrap{
        display:inline-flex;
        border-radius:6px;
        padding:2px;
      }

      /* Mobile overlay — hidden on desktop, shows behind the open drawer */
      .mobile-sidebar-overlay{
        display:none;
        position:fixed;
        inset:0;
        background:rgba(0,0,0,.62);
        z-index:999;
        backdrop-filter:blur(3px);
        -webkit-backdrop-filter:blur(3px);
      }

      /* Mobile top bar — hidden on desktop, shown on mobile above the metrics panel */
      .mobile-topbar{
        display:none;
      }

      /* Mobile menu (hamburger) button — hidden on desktop */
      .mobile-menu-btn{
        display:none;
        align-items:center;
        gap:7px;
        padding:7px 14px;
        border-radius:10px;
        border:1px solid rgba(146,108,48,.32);
        background:rgba(0,0,0,.32);
        color:var(--gold);
        font-size:11px;
        font-weight:700;
        cursor:pointer;
        letter-spacing:.07em;
        font-family:inherit;
        text-transform:uppercase;
        transition:background .14s, border-color .14s;
        flex-shrink:0;
      }
      .mobile-menu-btn:hover{
        background:rgba(92,67,29,.3);
        border-color:rgba(146,108,48,.55);
      }
      .mobile-menu-btn svg{
        flex-shrink:0;
      }

      /* Mobile drawer close button — hidden on desktop */
      .mobile-drawer-close{
        display:none;
        position:absolute;
        top:12px;
        right:14px;
        width:30px;
        height:30px;
        border-radius:50%;
        border:1px solid rgba(146,108,48,.28);
        background:rgba(0,0,0,.45);
        color:var(--muted);
        align-items:center;
        justify-content:center;
        cursor:pointer;
        font-size:17px;
        line-height:1;
        z-index:2;
        transition:color .14s, background .14s;
        flex-shrink:0;
      }
      .mobile-drawer-close:hover{
        color:var(--text);
        background:rgba(0,0,0,.65);
      }

      /* Mobile topbar title */
      .mobile-topbar-title{
        font-size:18px;
        font-weight:700;
        color:var(--gold);
        letter-spacing:.04em;
        flex:1;
        text-align:center;
        min-width:0;
        white-space:nowrap;
        overflow:hidden;
        text-overflow:ellipsis;
      }

      @media (max-width: 1280px) {
        .app{
          grid-template-columns:260px 1fr;
        }

        .main-dashboard-table{
          display:flex;
          flex-direction:column;
          gap:16px;
        }
        .main-split{
          display:flex;
          flex-direction:column;
          gap:16px;
          grid-column:auto;
          grid-row:auto;
          grid-template-columns:none;
        }
        .main-split > .main-split__primary,
        .main-split > .main-split__aside{
          grid-column:auto;
          width:100%;
          max-width:100%;
        }
      }

      @media (max-width: 900px) {
        html,body{
          height:auto;
          min-height:100%;
          overflow-y:auto;
          overflow-x:hidden;
        }
        .app{
          grid-template-columns:1fr;
          height:auto;
          min-height:100dvh;
        }

        /* Sidebar is now a fixed drawer — hidden off-screen via transform, no display:none needed */
        .sidebar-drawer{
          display:flex;
          flex-direction:column;
          position:fixed;
          top:0;
          left:0;
          bottom:0;
          width:min(84vw, 300px);
          z-index:1000;
          transform:translateX(-100%);
          transition:transform .28s cubic-bezier(0.4,0,0.2,1);
          box-shadow:4px 0 28px rgba(0,0,0,.75);
          overflow:hidden;
          background:linear-gradient(180deg,rgba(22,15,9,.99),rgba(10,8,6,.99));
          border-right:1px solid rgba(146,108,48,.22);
        }

        body.mobile-menu-open .sidebar-drawer{
          transform:translateX(0);
        }

        /* Restore sidebar elements inside the drawer */
        .sidebar-drawer .app-sidebar-head{
          display:block !important;
          position:relative;
          border-right:none !important;
          background:transparent !important;
          padding:16px 18px 14px !important;
          flex-shrink:0;
          border-bottom:1px solid rgba(146,108,48,.18);
          grid-column:auto;
          grid-row:auto;
        }

        .sidebar-drawer .app-sidebar-body{
          display:block !important;
          position:static !important;
          flex:1;
          min-height:0;
          overflow-y:auto;
          border-right:none !important;
          background:transparent !important;
          padding:14px 18px 18px !important;
          grid-column:auto;
          grid-row:auto;
        }

        /* Overlay behind the open drawer */
        body.mobile-menu-open .mobile-sidebar-overlay{
          display:block;
        }

        /* Mobile top bar */
        .mobile-topbar{
          display:flex;
          align-items:center;
          justify-content:space-between;
          padding:0 0 10px 0;
          gap:10px;
        }

        /* Mobile hamburger button */
        .mobile-menu-btn{
          display:flex;
        }

        /* Drawer close button */
        .mobile-drawer-close{
          display:flex;
        }

        .app-main-head,
        .main{
          grid-column:1;
        }
        .app-main-head{
          grid-row:1;
          padding:10px 10px 0 10px;
        }
        .auth-topbar{
          margin:-10px -10px 10px -10px;
          padding:0 14px;
          height:36px;
        }
        .main{
          grid-row:2;
          overflow:visible;
          padding:0 10px 10px 10px;
        }

        .panel-header{
          font-size:10px;
          letter-spacing:.1em;
          padding:10px 12px;
        }

        .panel-body{
          padding:10px;
          font-size:12px;
        }

        .search-box input,
        .locale-select,
        .cat,
        .pill,
        .pager,
        .pager button,
        .detail-sub,
        .chain-box,
        .detail-dl,
        .detail-dl-value{
          font-size:12px;
        }

        .detail-dl-label{
          font-size:10px;
          letter-spacing:.08em;
        }

        .detail-dl-row{
          gap:16px;
          padding:14px 0;
        }

        .detail-title{
          font-size:18px;
        }

        .main-split{
          display:flex;
          flex-direction:column;
          gap:10px;
          flex:0 0 auto;
          min-height:auto;
        }

        .main-split__primary,
        .main-split__aside{
          min-height:auto;
        }

        /** Панель таблицы и вкладка — на всю ширину main (иначе в Chrome таблица может сжаться ~до ширины одной вкладки). */
        .main-split__primary{
          width:100%;
          max-width:100%;
          align-self:stretch;
        }
        .table-wrap{
          width:100%;
          max-width:100%;
          align-self:stretch;
          min-height:420px;
        }
        .table-tab-panel{
          width:100%;
          max-width:100%;
          align-self:stretch;
          min-height:320px;
        }
        .load-region.load-region--table{
          width:100%;
          max-width:100%;
          align-self:stretch;
        }

        .table-scroll{
          width:100%;
          min-width:100%;
          max-width:100%;
          box-sizing:border-box;
          padding:0 10px;
          overflow-y:auto;
          overflow-x:hidden;
          -webkit-overflow-scrolling:touch;
        }

        .dash-table{
          width:100%;
          min-width:100%;
          max-width:100%;
          table-layout:fixed;
        }

        /** Zebra / hover / active на обеих видимых колонках (compact). */
        .dash-table tbody tr.data-row{
          background:transparent !important;
        }
        .dash-table tbody tr.data-row:nth-child(even) > td.col-item,
        .dash-table tbody tr.data-row:nth-child(even) > td.col-gph{
          background-color:var(--table-row-zebra);
        }
        .dash-table tbody tr.data-row:nth-child(odd) > td.col-item,
        .dash-table tbody tr.data-row:nth-child(odd) > td.col-gph{
          background-color:transparent;
        }
        .dash-table tbody tr.data-row:nth-child(odd):hover > td.col-item,
        .dash-table tbody tr.data-row:nth-child(odd):hover > td.col-gph{
          background-color:rgba(255,255,255,.035);
        }
        .dash-table tbody tr.data-row:nth-child(even):hover > td.col-item,
        .dash-table tbody tr.data-row:nth-child(even):hover > td.col-gph{
          background-image:linear-gradient(rgba(255,255,255,.045),rgba(255,255,255,.045));
          background-color:var(--table-row-zebra);
        }
        .dash-table tbody tr.data-row.active > td.col-item,
        .dash-table tbody tr.data-row.active > td.col-gph{
          background-color:rgba(92,67,29,.25) !important;
          background-image:none !important;
        }
        .dash-table tbody tr.data-row.active:hover > td.col-item,
        .dash-table tbody tr.data-row.active:hover > td.col-gph{
          background-color:rgba(106,78,35,.32) !important;
        }

        .details-panel{
          max-height:none;
        }

        .details-panel .panel-body{
          overflow:visible;
        }

        .metrics{
          grid-template-columns:repeat(2, minmax(120px,1fr));
          gap:8px;
        }

        .metric{
          min-height:96px;
          padding:10px;
        }

        .metric-label{
          font-size:10px;
          letter-spacing:.1em;
        }

        .metric-value{
          font-size:20px;
        }

        .metric-recipe-icon{
          width:24px;
          height:24px;
        }

        .metric-recipe-name{
          font-size:13px;
          line-height:1.2;
        }

        .table-attached-search{
          padding:10px;
        }

        .search-box, .select-box{
          padding:12px;
          border-radius:14px;
        }

        .table-tabs{
          padding:0 10px;
        }

        .table-tab{
          padding:10px 8px;
          font-size:10px;
          letter-spacing:.06em;
        }

        .dash-table thead th,
        .dash-table tbody td{
          padding-top:7px;
          padding-bottom:7px;
        }

        .dash-table thead th{
          font-size:10px;
          letter-spacing:.08em;
        }

        /**
         * Скрытые колонки: у <col> — collapse; у ячеек — visibility:collapse, не display:none.
         * Если средние <td> сделать display:none, в строке остаются две ячейки и табличный layout
         * часто сопоставляет их с первыми двумя <col> (рецепт + «реагенты»), а не с рецепт + GPH:
         * контент и зебра занимают ~половину ширины таблицы.
         */
        .dash-table col.col-reagents,
        .dash-table col.col-best,
        .dash-table col.col-produced,
        .dash-table col.col-outcost,
        .dash-table col.col-num.col-profit{
          visibility:collapse;
          width:0;
          min-width:0;
          max-width:0;
        }
        .dash-table col.col-recipe{
          width:72%;
        }
        .dash-table col.col-num:not(.col-profit){
          width:28%;
        }
        .dash-table thead th.col-item,
        .dash-table tbody td.col-item{
          width:72%;
          box-sizing:border-box;
        }
        .dash-table thead th.col-gph,
        .dash-table tbody td.col-gph{
          width:28%;
          box-sizing:border-box;
        }

        .dash-table thead th.col-item,
        .dash-table tbody td.col-item,
        .dash-table thead th.col-gph,
        .dash-table tbody td.col-gph{
          vertical-align:top;
        }
        .dash-table td.col-item{
          overflow-wrap:break-word;
          word-break:break-word;
        }
        .dash-table td.td-gph-col .td-gold-with-coin{
          width:auto;
          max-width:100%;
          justify-content:flex-end;
        }

        .dash-table thead th.col-reagents,
        .dash-table tbody td.col-reagents,
        .dash-table thead th.col-best-price,
        .dash-table tbody td.col-best-price,
        .dash-table thead th.col-produced,
        .dash-table tbody td.col-produced,
        .dash-table thead th.col-cost,
        .dash-table tbody td.col-cost,
        .dash-table thead th.col-profit,
        .dash-table tbody td.col-profit{
          visibility:collapse;
          padding:0 !important;
          border:none !important;
          font-size:0;
          line-height:0;
          overflow:hidden;
        }
        /**
         * Содержимое свёрнутых ячеек иначе может задавать высоту строки (WebKit),
         * хотя колонки не видны — оставляем высоту строки по «Рецепт» + GPH.
         */
        .dash-table tbody td.col-reagents > *,
        .dash-table tbody td.col-best-price > *,
        .dash-table tbody td.col-produced > *,
        .dash-table tbody td.col-cost > *,
        .dash-table tbody td.col-profit > *{
          display:none !important;
        }
      }

      @media (max-width: 640px) {
        .main{
          padding:8px;
          gap:8px;
        }

        .dash-table col.col-recipe{
          width:74%;
        }
        .dash-table col.col-num:not(.col-profit){
          width:26%;
        }
        .dash-table thead th.col-item,
        .dash-table tbody td.col-item{
          width:74%;
        }
        .dash-table thead th.col-gph,
        .dash-table tbody td.col-gph{
          width:26%;
        }

        .cell{
          font-size:12px;
          line-height:1.2;
        }

        .panel-header{
          font-size:9px;
        }

        .panel-body,
        .search-box input,
        .locale-select,
        .cat,
        .pill,
        .pager,
        .pager button,
        .detail-sub,
        .chain-box,
        .detail-dl,
        .detail-dl-value{
          font-size:11px;
        }

        .detail-dl-label{
          font-size:9px;
        }

        .detail-title{
          font-size:16px;
        }

        .reagent-line{
          font-size:10px;
        }

        .item-icon{
          width:18px;
          height:18px;
        }

      }