:root{
      --bg:#080d18;
      --bg-soft:#0b1220;
      --card:#0e1626;
      --card-strong:#0b1220;
      --border:rgba(160,183,255,.12);
      --border-strong:rgba(160,183,255,.22);
      --text:#e6edf8;
      --text-soft:#b6c1d8;
      --text-muted:#8390a8;
      --heading:#ffffff;
      --accent:#3b82f6;
      --accent-hover:#2563eb;
      --accent-soft:rgba(59,130,246,.12);
      --success:#10b981;
      --radius:12px;
      --shadow:0 24px 60px rgba(0,0,0,.4);
      --shadow-soft:0 10px 24px rgba(0,0,0,.25);
    }

    .header{z-index:100}

    .page{padding:88px 0 40px}
    .hero-card,
    .surface-card{
      position:relative;
      overflow:hidden;
      border-radius:12px;
      border:1px solid var(--border);
      background:var(--card);
    }
    .hero-card{padding:28px;margin-bottom:20px}

    .hero-top{display:flex;align-items:flex-start;justify-content:space-between;gap:20px;margin-bottom:22px}
    .eyebrow,
    .stat-label,
    .table-note{
      display:inline-flex;
      align-items:center;
      gap:8px;
      color:var(--text-muted);
      font-size:.74rem;
      font-weight:600;
      letter-spacing:.1em;
      text-transform:uppercase;
    }
    .hero-copy h1{font-family:'Inter',sans-serif;font-size:clamp(1.6rem,3vw,2.2rem);line-height:1.2;letter-spacing:-.02em;color:var(--heading);margin:10px 0 12px;font-weight:600}
    .hero-lead{max-width:760px;color:var(--text-soft);font-size:.95rem;line-height:1.7}
    .hero-actions{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:10px}

    .stat-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,var(--ui-card-min-compact,220px)),1fr));gap:var(--ui-gap-md,14px)}
    .stat-card{
      min-width:0;
      padding:18px;
      border-radius:10px;
      border:1px solid var(--border);
      background:rgba(255,255,255,.025);
    }
    .stat-value{display:block;margin:8px 0 6px;font-size:1.35rem;font-weight:600;line-height:1.25;color:var(--heading)}
    .stat-value.is-compact{font-size:.95rem;font-weight:600}
    .stat-card p{color:var(--text-muted);font-size:.88rem;line-height:1.65}

    .surface-card{padding:20px}
    .toolbar{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;margin-bottom:16px}
    .search-box{flex:1;min-width:var(--ui-card-min,280px);position:relative}
    .search-box svg{position:absolute;left:14px;top:50%;transform:translateY(-50%);width:16px;height:16px;color:var(--text-muted)}
    .search-box input{
      width:100%;
      height:42px;
      padding:0 16px 0 40px;
      border-radius:8px;
      border:1px solid var(--border);
      background:#0a1120;
      color:var(--text);
      outline:none;
      font-size:.9rem;
      transition:border-color .15s ease,box-shadow .15s ease;
    }
    .search-box input::placeholder{color:#5a6477}
    .search-box input:focus{
      border-color:var(--accent);
      box-shadow:0 0 0 3px rgba(59,130,246,.15);
    }

    .filter-group{display:flex;gap:6px}
    .filter-btn{padding:6px 14px;min-height:34px;border-radius:6px;border:1px solid var(--border);background:rgba(255,255,255,.025);color:var(--text-muted);font-size:.84rem;font-weight:500;cursor:pointer;transition:border-color .15s ease,color .15s ease,background .15s ease}
    .filter-btn:hover{border-color:var(--border-strong);color:var(--text)}
    .filter-btn.active{background:var(--accent);color:#fff;border-color:var(--accent)}
    .toolbar-meta{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
    .count-badge{
      display:inline-flex;
      align-items:center;
      gap:8px;
      min-height:38px;
      padding:0 14px;
      border-radius:8px;
      border:1px solid var(--border);
      background:rgba(255,255,255,.025);
      color:var(--text-soft);
      font-size:.85rem;
      white-space:nowrap;
    }
    .count-badge strong{color:var(--heading)}

    .table-card{
      border-radius:10px;
      border:1px solid var(--border);
      background:var(--card);
      overflow:hidden;
    }
    .table-meta{
      display:flex;
      align-items:flex-start;
      justify-content:space-between;
      gap:14px;
      padding:18px 20px;
      border-bottom:1px solid var(--border);
      background:rgba(255,255,255,.02);
    }
    .table-meta h2{font-size:1rem;color:var(--heading);margin-bottom:4px;font-weight:600}
    .table-meta p{color:var(--text-muted);font-size:.85rem}

    .table-wrap{width:100%;max-width:100%;overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch}
    table{width:100%;border-collapse:collapse;min-width:var(--ui-table-min-public,760px);max-width:none}
    thead th{
      position:sticky;
      top:0;
      z-index:1;
      padding:12px 18px;
      text-align:left;
      cursor:pointer;
      user-select:none;
      white-space:nowrap;
      background:#0b1220;
      border-bottom:1px solid var(--border);
      color:var(--text-muted);
      font-size:.74rem;
      font-weight:600;
      letter-spacing:.08em;
      text-transform:uppercase;
      transition:color .15s ease,background .15s ease;
    }
    thead th:hover{color:var(--heading);background:#0e1626}
    thead th .sort-icon{margin-left:6px;opacity:.5}
    thead th.sorted{color:var(--heading)}
    thead th.sorted .sort-icon{opacity:1;color:var(--accent)}

    tbody tr{border-bottom:1px solid var(--border);transition:background .15s ease}
    tbody tr:nth-child(even){background:rgba(255,255,255,.015)}
    tbody tr:hover{background:rgba(59,130,246,.06)}
    tbody td{padding:12px 18px;white-space:nowrap;vertical-align:middle;color:var(--text-soft);font-size:.9rem}

    .item-cell{display:flex;align-items:center;min-width:var(--ui-table-item-min,220px);max-width:var(--ui-table-item-max,440px);overflow:hidden}
    .item-name{display:block;color:var(--heading);font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
    .price-cell{font-family:'JetBrains Mono',monospace;font-size:.9rem;font-weight:600;color:var(--success)}
    .float-cell{font-family:'JetBrains Mono',monospace;font-size:.82rem;color:var(--text-muted)}
    .status-pill{display:inline-flex;align-items:center;gap:6px;padding:3px 10px;border-radius:4px;font-family:'Inter',sans-serif;font-size:.76rem;font-weight:500;border:1px solid transparent}
    .status-pill svg{width:12px;height:12px}
    .status-pill.status-ok{color:#5ee0a6;border-color:rgba(16,185,129,.28);background:rgba(16,185,129,.08)}
    .status-pill.status-hold{color:#fca5a5;border-color:rgba(239,68,68,.28);background:rgba(239,68,68,.08)}
    .btn-outline svg,.btn-primary svg{width:14px;height:14px;vertical-align:-2px;margin-right:6px}
    .phase-cell{font-size:.82rem}
    .phase-pill{
      display:inline-flex;
      align-items:center;
      min-height:26px;
      padding:0 10px;
      border-radius:4px;
      border:1px solid rgba(59,130,246,.22);
      background:var(--accent-soft);
      color:#7eb1f7;
      font-weight:500;
      font-size:.78rem;
    }
    .phase-pill.empty{
      border-color:var(--border);
      background:rgba(255,255,255,.025);
      color:var(--text-muted);
    }

    .no-results{display:none;padding:40px 20px;text-align:center;color:var(--text-muted)}
    .no-results.is-visible{display:block}

    .pagination{display:flex;justify-content:center;align-items:center;gap:6px;flex-wrap:wrap;margin-top:18px}
    .page-btn{
      min-width:36px;
      height:36px;
      padding:0 12px;
      border-radius:6px;
      border:1px solid var(--border);
      background:rgba(255,255,255,.025);
      color:var(--text);
      font-size:.88rem;
      font-weight:500;
      cursor:pointer;
      transition:border-color .15s ease,background .15s ease,color .15s ease;
    }
    .page-btn:hover:not(:disabled):not(.active){border-color:var(--border-strong);color:var(--heading);background:rgba(255,255,255,.04)}
    .page-btn.active{background:var(--accent);border-color:var(--accent);color:#fff}
    .page-btn:disabled{opacity:.35;cursor:default}
    .page-dots{padding:0 2px;color:var(--text-muted)}

    .footer{padding:0 0 28px}
    .footer .container{
      display:flex;
      justify-content:center;
      align-items:center;
      text-align:center;
      padding-top:20px;
      border-top:1px solid var(--border);
    }
    .footer p{color:var(--text-muted);font-size:.82rem}

    @media(max-width:1200px){
      .hero-top{flex-direction:column}
      .hero-actions{justify-content:flex-start}
    }

    @media(max-width:768px){
      .container,.header{padding-left:16px;padding-right:16px}
      .header .container{height:auto;padding-top:12px;padding-bottom:12px;align-items:flex-start;gap:12px}
      .nav{gap:14px}
      .page{padding-top:104px}
      .hero-card{padding:22px}
      .surface-card{padding:18px}
      .toolbar{align-items:stretch}
      .search-box{min-width:100%}
      .toolbar-meta{width:100%}
      .count-badge{justify-content:center;flex:1}
      .table-meta{flex-direction:column}
      tbody td,thead th{padding-left:14px;padding-right:14px}
      .item-name{max-width:none}
    }

    @media(max-width:480px){
      .header .btn{width:100%}
      .hero-copy h1{font-size:1.6rem}
      .hero-lead{font-size:.9rem}
      .btn,.count-badge{width:100%}
      .hero-actions{width:100%}
      .hero-actions .btn{width:100%}
      .toolbar-meta{flex-direction:column}
      .filter-group{width:100%;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,var(--ui-filter-chip-min,96px)),1fr))}
      .filter-btn{width:100%;padding-left:8px;padding-right:8px}
      .table-wrap{overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch}
      table{min-width:var(--ui-table-min-public,760px)}
      tbody td,thead th{padding:10px 14px}
      .item-name{font-size:.84rem}
      .price-cell,.float-cell,.phase-cell{font-size:.78rem}
      .phase-pill{min-height:24px;padding:0 8px;font-size:.74rem}
    }