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

    body {
      min-height: 100vh;
      background: #071426;
      color: #f8fbff;
      font-family: 'Segoe UI', sans-serif;
      display: flex;
      flex-direction: column;
      align-items: center;
    }

    /* ── Drop Zone ── */
    #drop-zone {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 1rem;
      width: min(560px, 90vw);
      height: 280px;
      margin: auto;
      border: 2px dashed #3b82f6;
      border-radius: 16px;
      cursor: pointer;
      transition: background 0.2s, border-style 0.2s;
      text-align: center;
      padding: 2rem;
    }
    #drop-zone:hover, #drop-zone.drag-over {
      background: #0e2442;
      border-style: solid;
    }
    #drop-zone svg { opacity: 0.6; }
    #drop-zone p { color: #bfdbfe; font-size: 1rem; }
    #drop-zone small { color: #6b8caf; font-size: 0.8rem; }

    /* ── App Shell ── */
    #app {
      width: 100%;
      max-width: 1100px;
      padding: 0 1rem 2rem;
      display: flex;
      flex-direction: column;
      min-height: 100vh;
    }

    /* ── File Bar ── */
    #file-bar {
      background: #0e2442;
      padding: 0.55rem 1.2rem;
      font-size: 0.82rem;
      color: #bfdbfe;
      border-bottom: 1px solid #1d4f86;
      display: flex;
      gap: 1rem;
      flex-wrap: wrap;
      align-items: center;
    }
    #file-bar strong { color: #f8fbff; }
    #file-bar .dim { color: #8fb6dc; font-size: 0.78rem; }

    #reload-btn {
      margin-left: auto;
      padding: 0.25rem 0.8rem;
      background: transparent;
      border: 1px solid #3b82f6;
      color: #3b82f6;
      border-radius: 6px;
      cursor: pointer;
      font-size: 0.78rem;
      transition: background 0.15s;
    }
    #reload-btn:hover { background: #3b82f6; color: #fff; }

    /* ── Tab Nav ── */
    #tabs {
      display: flex;
      gap: 4px;
      padding: 0.8rem 0 0;
      border-bottom: 2px solid #1d4f86;
    }
    .tab-btn {
      padding: 0.5rem 1.2rem;
      background: transparent;
      border: none;
      color: #bfdbfe;
      cursor: pointer;
      border-radius: 8px 8px 0 0;
      font-size: 0.9rem;
      transition: background 0.15s, color 0.15s;
    }
    .tab-btn:hover { background: #0e2442; }
    .tab-btn.active { background: #3b82f6; color: #fff; }

    /* ── Tab Panels ── */
    .tab-panel { display: none; padding: 1.2rem 0; }
    .tab-panel.active { display: block; }

    /* ── Preview Tab ── */
    .preview-controls {
      display: flex;
      align-items: center;
      gap: 0.8rem;
      margin-bottom: 1rem;
      flex-wrap: wrap;
    }
    .page-nav { display: flex; align-items: center; gap: 0.5rem; }
    .nav-btn {
      padding: 0.35rem 0.9rem;
      background: #0e2442;
      border: 1px solid #1d4f86;
      color: #bfdbfe;
      border-radius: 6px;
      cursor: pointer;
      font-size: 0.85rem;
      transition: background 0.15s;
    }
    .nav-btn:hover:not(:disabled) { background: #1d4f86; }
    .nav-btn:disabled { opacity: 0.35; cursor: default; }
    #page-label { font-size: 0.85rem; color: #8fb6dc; min-width: 90px; text-align: center; }
    #scale-select {
      padding: 0.3rem 0.6rem;
      background: #0e2442;
      border: 1px solid #1d4f86;
      color: #bfdbfe;
      border-radius: 6px;
      font-size: 0.85rem;
      cursor: pointer;
    }
    #preview-container {
      overflow: auto;
      background: #0e2442;
      border-radius: 8px;
      padding: 1rem;
      max-height: 75vh;
      display: flex;
      justify-content: center;
    }
    #preview-canvas {
      display: block;
      box-shadow: 0 4px 20px rgba(0,0,0,0.5);
    }

    /* ── Text Tab ── */
    .text-controls { margin-bottom: 0.8rem; }
    .action-btn {
      padding: 0.4rem 1rem;
      background: #1d4f86;
      border: none;
      color: #bfdbfe;
      border-radius: 6px;
      cursor: pointer;
      font-size: 0.85rem;
      transition: background 0.15s;
    }
    .action-btn:hover { background: #3b82f6; color: #fff; }
    .text-page-section { margin-bottom: 1.5rem; }
    .text-page-section h3 {
      font-size: 0.8rem;
      color: #3b82f6;
      margin-bottom: 0.4rem;
      text-transform: uppercase;
      letter-spacing: 0.08em;
    }
    .text-page-section pre {
      background: #0e2442;
      border-radius: 8px;
      padding: 1rem;
      font-size: 0.82rem;
      line-height: 1.6;
      white-space: pre-wrap;
      word-break: break-word;
      max-height: 60vh;
      overflow: auto;
      color: #dbeafe;
    }
    .no-content {
      color: #6b8caf;
      font-style: italic;
      font-size: 0.9rem;
      padding: 1rem;
      background: #0e2442;
      border-radius: 8px;
    }

    /* ── Paths Tab ── */
    .paths-controls { margin-bottom: 0.8rem; display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; }
    .paths-count { font-size: 0.82rem; color: #8fb6dc; }
    #paths-table-wrap {
      overflow: auto;
      max-height: 70vh;
      border-radius: 8px;
    }
    .paths-table {
      width: 100%;
      border-collapse: collapse;
      font-size: 0.8rem;
    }
    .paths-table th {
      background: #1d4f86;
      color: #bfdbfe;
      padding: 0.5rem 0.8rem;
      text-align: left;
      position: sticky;
      top: 0;
      font-weight: 600;
      white-space: nowrap;
    }
    .paths-table td {
      padding: 0.4rem 0.8rem;
      border-bottom: 1px solid #0e2442;
      color: #dbeafe;
      vertical-align: top;
    }
    .paths-table tr:hover td { background: #0e2442; }
    .paths-table td.coords { font-family: monospace; font-size: 0.75rem; max-width: 380px; word-break: break-all; }
    .tag { display: inline-block; padding: 0.1rem 0.4rem; border-radius: 4px; font-size: 0.7rem; font-weight: bold; }
    .tag-rect    { background: #1a4a2e; color: #4ecb71; }
    .tag-line    { background: #1a2a4a; color: #4e9ecb; }
    .tag-curve   { background: #2a1a4a; color: #9e4ecb; }
    .tag-path    { background: #3a2a1a; color: #cb9e4e; }
    .tag-move    { background: #3a1a1a; color: #cb4e4e; }

    /* ── Metadata Tab ── */
    .meta-grid {
      display: grid;
      grid-template-columns: 180px 1fr;
      gap: 1px;
      background: #1d4f86;
      border-radius: 8px;
      overflow: hidden;
    }
    .meta-key, .meta-val {
      padding: 0.55rem 1rem;
      background: #0e2442;
      font-size: 0.85rem;
    }
    .meta-key { color: #bfdbfe; font-weight: 600; }
    .meta-val { color: #dbeafe; word-break: break-word; }

    /* ── Structural Tab ── */
    .structural-controls { margin-bottom: 0.8rem; display:flex; align-items:center; gap:1rem; flex-wrap:wrap; }
    .struct-summary { font-size: 0.82rem; color: #8fb6dc; }
    .export-btn {
      padding: 0.3rem 0.9rem;
      background: #1d4f86;
      border: 1px solid #3b82f6;
      color: #3b82f6;
      border-radius: 6px;
      cursor: pointer;
      font-size: 0.78rem;
      transition: background 0.15s;
      margin-left: auto;
    }
    .export-btn:hover { background: #3b82f6; color: #fff; }

    #structural-content { display: flex; flex-direction: column; gap: 1.2rem; }

    .struct-card {
      background: #0e2442;
      border-radius: 10px;
      overflow: hidden;
      border-left: 4px solid #3b82f6;
    }
    .struct-card.no-elements { border-left-color: #333; }

    /* Multi-span card grid */
    .zone-grid { display: grid; gap: 0; }
    .zone-col { padding: 0.8rem 1rem; border-right: 1px solid #1d4f86; }
    .zone-col:last-child { border-right: none; }
    .zone-label { font-size: 0.72rem; font-weight: 700; letter-spacing: 0.06em;
      text-transform: uppercase; color: #3b82f6; margin-bottom: 0.5rem; }
    .zone-label.span-alt { color: #bfdbfe; }

    /* Bar/link length chip */
    .chip-calc { background: #1a3a3a; color: #4ecbcb; border: 1px solid #2a6a6a; }
    .chip-ext  { background: #3a2a1a; color: #cbaa4e; border: 1px solid #7a5a2a; }
    .chip-cont { background: #1a2a1a; color: #5ecb8a; border: 1px solid #2a6a3a; }
    .el-sub { font-size: 0.7rem; color: #6f8caf; margin: 2px 0 4px 122px; }

    .struct-title {
      background: #1d4f86;
      padding: 0.6rem 1rem;
      font-weight: 600;
      font-size: 0.9rem;
      color: #f8fbff;
      display: flex;
      justify-content: space-between;
      align-items: center;
    }
    .struct-title-badge {
      font-size: 0.7rem;
      font-weight: normal;
      color: #bfdbfe;
      background: rgba(168,218,220,0.15);
      padding: 0.15rem 0.5rem;
      border-radius: 4px;
    }

    .struct-body { padding: 0.8rem 1rem; }

    .el-section {
      display: flex;
      align-items: center;
      gap: 0.5rem;
      flex-wrap: wrap;
      margin-bottom: 0.6rem;
    }
    .el-label {
      font-size: 0.75rem;
      color: #8fb6dc;
      min-width: 120px;
      flex-shrink: 0;
    }
    .el-chip {
      padding: 0.25rem 0.65rem;
      border-radius: 6px;
      font-size: 0.82rem;
      font-family: monospace;
      font-weight: 600;
    }
    .chip-size    { background: #1a3a2a; color: #5ecb8a; border: 1px solid #2a5a3a; }
    .chip-bar     { background: #1a2a4a; color: #5e9ecb; border: 1px solid #2a4a7a; }
    .chip-stirrup { background: #2a1a4a; color: #9e6ecb; border: 1px solid #4a2a7a; }
    .chip-len     { background: #3a2a1a; color: #cb9e5e; border: 1px solid #7a5a2a; }
    .chip-dim     { background: #2a2a1a; color: #cbcb5e; border: 1px solid #5a5a2a; }

    .struct-raw {
      margin-top: 0.8rem;
      border-top: 1px solid #1d4f86;
      padding-top: 0.6rem;
    }
    .struct-raw summary {
      font-size: 0.78rem;
      color: #6b8caf;
      cursor: pointer;
      user-select: none;
    }
    .struct-raw summary:hover { color: #bfdbfe; }
    .struct-text {
      margin-top: 0.5rem;
      font-size: 0.78rem;
      color: #999;
      line-height: 1.6;
      max-height: 120px;
      overflow-y: auto;
      font-family: monospace;
    }

    /* ── Spinner ── */
    #spinner {
      display: none;
      position: fixed;
      inset: 0;
      background: rgba(26,26,46,0.75);
      align-items: center;
      justify-content: center;
      z-index: 100;
    }
    .spin-ring {
      width: 48px; height: 48px;
      border: 4px solid #1d4f86;
      border-top-color: #3b82f6;
      border-radius: 50%;
      animation: spin 0.8s linear infinite;
    }
    @keyframes spin { to { transform: rotate(360deg); } }

    /* ── Error Bar ── */
    #error-bar {
      position: fixed;
      bottom: 1rem;
      left: 50%;
      transform: translateX(-50%);
      background: #3b82f6;
      color: #fff;
      padding: 0.65rem 1.5rem;
      border-radius: 8px;
      font-size: 0.9rem;
      z-index: 200;
      max-width: 90vw;
      text-align: center;
      box-shadow: 0 4px 16px rgba(0,0,0,0.4);
    }

    /* ── AI Settings Modal ── */
    #ai-modal-backdrop {
      display: none;
      position: fixed;
      inset: 0;
      background: rgba(10,10,26,0.80);
      z-index: 300;
      align-items: center;
      justify-content: center;
    }
    #ai-modal-backdrop.open { display: flex; }
    #ai-modal {
      background: #0e2442;
      border: 1px solid #1d4f86;
      border-radius: 14px;
      padding: 1.6rem 2rem;
      width: min(480px, 92vw);
      box-shadow: 0 8px 40px rgba(0,0,0,0.6);
    }
    #ai-modal h3 { color: #bfdbfe; margin-bottom: 1rem; font-size: 1rem; }
    .ai-field { margin-bottom: 0.9rem; }
    .ai-field label { display: block; font-size: 0.78rem; color: #bfdbfe; margin-bottom: 0.3rem; }
    .ai-field input, .ai-field select {
      width: 100%; padding: 0.45rem 0.7rem;
      background: #0f1e3a; border: 1px solid #1d4f86;
      color: #f8fbff; border-radius: 6px; font-size: 0.85rem;
    }
    .ai-field small { display: block; margin-top: 0.25rem; font-size: 0.72rem; color: #6b8caf; line-height: 1.4; }
    .ai-modal-btns { display: flex; gap: 0.6rem; justify-content: flex-end; margin-top: 1.2rem; }
    .ai-modal-btns button { padding: 0.45rem 1.2rem; border-radius: 7px; border: none;
      cursor: pointer; font-size: 0.85rem; }
    #ai-modal-save { background: #3b82f6; color: #fff; }
    #ai-modal-cancel { background: #1d4f86; color: #bfdbfe; }
    .ai-status { font-size: 0.75rem; margin-top: 0.5rem; padding: 0.3rem 0.6rem;
      border-radius: 5px; display: none; }
    .ai-status.ok  { background: #1a4a2e; color: #5ecb8a; display: block; }
    .ai-status.err { background: #3a1a1a; color: #3b82f6; display: block; }
  

    /* Blue FinFlow-inspired App Chrome */
    :root{--bg:#071426;--panel:#0b1f3a;--card:#0e2442;--border:rgba(148,196,255,.18);--border-strong:rgba(96,165,250,.45);--text:#f8fbff;--muted:#8fb6dc;--soft:#bfdbfe;--accent:#3b82f6;--accent-2:#60a5fa;--shadow:0 18px 50px rgba(3,12,28,.36)}
    body{background:radial-gradient(circle at 20% 0%,rgba(59,130,246,.24),transparent 38%),radial-gradient(circle at 90% 10%,rgba(14,165,233,.16),transparent 34%),linear-gradient(180deg,#071426 0%,#0a1730 55%,#071426 100%);color:var(--text);align-items:stretch}
    #app{max-width:1220px;margin:0 auto;padding:1.1rem 1rem 2rem}
    .hdr{display:flex;justify-content:space-between;align-items:center;gap:1rem;background:linear-gradient(135deg,rgba(16,43,79,.92),rgba(10,31,58,.88));border:1px solid var(--border);border-radius:22px;padding:1rem 1.1rem;box-shadow:var(--shadow);backdrop-filter:blur(12px);margin:1rem auto .9rem;width:min(1220px,calc(100% - 2rem))}
    .hdr-left h1{display:flex;align-items:center;gap:.7rem;font-size:clamp(1.25rem,2vw,1.9rem);line-height:1.1;letter-spacing:-.03em}.brand-mark{width:42px;height:42px;border-radius:14px;display:grid;place-items:center;background:linear-gradient(135deg,#2563eb,#38bdf8);color:#fff;font-weight:800;box-shadow:0 10px 24px rgba(37,99,235,.35);flex:0 0 auto}.hdr-badge{font-size:.74rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:#dbeafe;background:rgba(59,130,246,.20);border:1px solid rgba(96,165,250,.36);border-radius:999px;padding:.26rem .55rem;white-space:nowrap}.subtitle-row{margin-top:.25rem;display:flex;gap:.55rem;align-items:center;flex-wrap:wrap}.subtitle-row p{color:var(--muted);font-size:.92rem}.hdr-right{display:flex;gap:.6rem;align-items:center;flex-wrap:wrap;justify-content:flex-end}.status-pill{display:inline-flex;align-items:center;gap:.45rem;border:1px solid var(--border);border-radius:999px;color:#dbeafe;background:rgba(9,30,58,.72);padding:.48rem .72rem;font-size:.78rem;white-space:nowrap}.status-dot{width:.52rem;height:.52rem;border-radius:99px;background:#38bdf8;box-shadow:0 0 0 4px rgba(56,189,248,.15)}#landing-hero{margin-top:clamp(1rem,4vh,2.8rem)}
    #drop-zone{width:min(620px,calc(100% - 2rem));min-height:300px;height:auto;margin:1rem auto 2rem;border:1.5px dashed rgba(96,165,250,.55);background:linear-gradient(180deg,rgba(14,36,66,.88),rgba(9,28,54,.78));box-shadow:var(--shadow)}#drop-zone:hover,#drop-zone.drag-over{background:linear-gradient(180deg,rgba(19,55,101,.94),rgba(12,38,73,.88));border-color:#60a5fa}#drop-zone svg{stroke:#60a5fa}#drop-zone p{color:#eaf3ff;font-weight:650;font-size:1.02rem}#drop-zone small{color:var(--muted)}
    #file-bar{border:1px solid var(--border);border-radius:16px;margin:0 0 .8rem;background:rgba(14,36,66,.82);box-shadow:0 10px 32px rgba(2,8,23,.22)}#tabs{padding:.35rem;border:1px solid var(--border);border-radius:18px;background:rgba(8,25,49,.75);box-shadow:0 10px 32px rgba(2,8,23,.18);gap:.35rem;overflow-x:auto}.tab-btn{border-radius:13px;color:#c7ddf8;white-space:nowrap;font-weight:650;padding:.62rem .92rem}.tab-btn:hover{background:rgba(96,165,250,.12);color:#fff}.tab-btn.active{background:linear-gradient(135deg,#2563eb,#38bdf8);color:#fff;box-shadow:0 8px 20px rgba(37,99,235,.32)}.tab-panel{padding:1rem 0}
    #preview-container,.text-page-section pre,.no-content,#struct-canvas-wrap,.struct-card,#ai-modal,.meta-key,.meta-val{border:1px solid var(--border);box-shadow:0 10px 28px rgba(2,8,23,.16)}.struct-card{border-left:4px solid #60a5fa;margin-bottom:1rem}.struct-title{background:linear-gradient(135deg,#123a6e,#0e2b52)}.struct-title-badge{color:#dbeafe;background:rgba(96,165,250,.18)}.action-btn,.nav-btn,#scale-select,#reload-btn,.export-btn{border:1px solid var(--border-strong);border-radius:11px;background:rgba(13,42,79,.85);color:#dbeafe}.action-btn:hover,.nav-btn:hover:not(:disabled),#reload-btn:hover,.export-btn:hover{background:#2563eb;color:#fff;border-color:#60a5fa}.export-btn{color:#93c5fd}.paths-table th{background:#123a6e;color:#dbeafe}.paths-table td{border-bottom:1px solid rgba(148,196,255,.12)}.paths-table tr:hover td{background:rgba(96,165,250,.08)}.el-chip{border-radius:999px}.chip-size,.chip-calc,.chip-cont{background:#073b5f;color:#7dd3fc;border-color:#0ea5e9}.chip-bar{background:#12315d;color:#bfdbfe;border-color:#3b82f6}.chip-stirrup{background:#172554;color:#c4b5fd;border-color:#6366f1}.chip-len,.chip-dim,.chip-ext{background:#102b4f;color:#93c5fd;border-color:#60a5fa}#error-bar{background:#2563eb;box-shadow:0 12px 30px rgba(37,99,235,.38)}@media(max-width:720px){.hdr{align-items:flex-start;flex-direction:column;border-radius:18px}.hdr-right{justify-content:flex-start}#app{padding:.7rem .75rem 1.5rem}#tabs{border-radius:15px}}


    /* v4: simplified blue UI + fit-to-box preview */
    #landing-hero .hdr-badge{display:none}
    #drop-zone{min-height:260px}
    #drop-zone small{display:none}
    #preview-container{overflow:hidden;height:calc(100vh - 220px);max-height:none;min-height:420px;align-items:center;justify-content:center}
    #preview-canvas{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain}
    .merged-meta-grid{display:grid;gap:1rem}
    .merged-section-title{font-size:.9rem;font-weight:700;color:#dbeafe;margin:.2rem 0 .55rem}
    .merged-card{background:rgba(14,36,66,.62);border:1px solid var(--border);border-radius:16px;padding:1rem;box-shadow:0 10px 28px rgba(2,8,23,.16)}
    @media(max-width:720px){#preview-container{height:calc(100vh - 250px);min-height:320px}}

    /* v5: cleaner header + beam workspace improvements */
    #landing-hero{position:relative}
    #landing-hero .hdr-right,.status-pill{display:none!important}
    #struct-canvas-wrap{overflow:hidden;height:clamp(420px,55vh,720px);max-height:none;align-items:center;justify-content:center;text-align:center}
    #struct-editor-wrap{max-width:100%;max-height:100%;margin:0 auto;vertical-align:middle}
    #struct-canvas,#struct-overlay{max-width:100%;max-height:100%;width:auto;height:auto}
    .section-heading{font-size:1.18rem;line-height:1.25;font-weight:800;color:#eaf3ff;margin:.15rem 0 .7rem;letter-spacing:-.015em}
    .section-heading-lg{font-size:1.34rem;margin-top:.2rem}
    .beam-detail-section{margin-top:1.35rem;padding-top:.5rem;border-top:1px solid rgba(148,196,255,.16)}
    .beam-link{color:#dbeafe;text-decoration:none;border-bottom:1px dashed rgba(96,165,250,.65)}
    .beam-link:hover{color:#7dd3fc;border-bottom-color:#7dd3fc}
    .beam-click-hint{font-size:.78rem;color:var(--muted);margin:-.25rem 0 .6rem}

  


/* ===== v7_patch.css ===== */
.beam-table-head{display:flex;align-items:center;justify-content:space-between;gap:1rem;flex-wrap:wrap;margin-bottom:.55rem}.beam-filter-bar{display:flex;align-items:center;gap:.45rem;flex-wrap:wrap;margin-left:auto}.beam-filter-bar label{font-size:.76rem;color:#bfdbfe;display:flex;align-items:center;gap:.28rem}.beam-filter-bar select{background:#0e2442;border:1px solid #1d4f86;color:#dbeafe;border-radius:9px;padding:.28rem .5rem;font-size:.78rem;min-width:105px}.beam-edit{width:100%;min-width:72px;background:rgba(8,31,58,.72);border:1px solid rgba(96,165,250,.28);border-radius:8px;color:#eaf4ff;padding:.28rem .4rem;font:inherit;font-size:.79rem}.beam-edit:focus{outline:2px solid rgba(96,165,250,.55);border-color:#60a5fa;background:#071e38}.beam-open-btn{border:none;background:transparent;color:#93c5fd;text-decoration:underline;cursor:pointer;font-weight:800;padding:0;font:inherit}.beam-open-btn:hover{color:#dbeafe}.beam-muted{color:#8fb6dc;font-size:.74rem;line-height:1.3;margin-top:.18rem}.beam-detail-section{display:none}.beam-modal-backdrop{display:none;position:fixed;inset:0;background:rgba(3,10,24,.74);z-index:500;align-items:center;justify-content:center;padding:1rem}.beam-modal-backdrop.open{display:flex}.beam-modal{width:min(1080px,96vw);max-height:92vh;overflow:auto;background:#071a31;border:1px solid rgba(96,165,250,.32);border-radius:18px;box-shadow:0 24px 80px rgba(0,0,0,.48)}.beam-modal-head{position:sticky;top:0;background:linear-gradient(135deg,#0b2c56,#123a6e);padding:.9rem 1.1rem;display:flex;align-items:center;justify-content:space-between;gap:1rem;z-index:2;border-bottom:1px solid rgba(96,165,250,.22)}.beam-modal-head h3{margin:0;color:#eaf4ff;font-size:1.05rem}.beam-modal-close{border:1px solid rgba(147,197,253,.45);background:#0e2442;color:#dbeafe;border-radius:10px;padding:.35rem .75rem;cursor:pointer}.beam-modal-body{padding:1rem;display:grid;grid-template-columns:minmax(280px,42%) 1fr;gap:1rem}.beam-crop-card,.beam-info-card{background:#0d213d;border:1px solid rgba(96,165,250,.22);border-radius:14px;padding:.75rem;overflow:auto}.beam-crop-card img{display:block;max-width:100%;height:auto;background:white;border-radius:10px}.beam-crop-title{font-weight:800;color:#bfdbfe;margin-bottom:.45rem}@media(max-width:850px){.beam-modal-body{grid-template-columns:1fr}.beam-filter-bar{width:100%;margin-left:0}.beam-filter-bar select{flex:1}.beam-edit{min-width:90px}}



/* ===== v8_patch.css ===== */
.confidence-pill{display:inline-flex;align-items:center;justify-content:center;min-width:54px;padding:4px 8px;border-radius:999px;font-weight:800;font-size:.78rem;border:1px solid rgba(255,255,255,.14)}
.conf-high{background:rgba(34,197,94,.16);color:#86efac;border-color:rgba(34,197,94,.35)}
.conf-med{background:rgba(245,158,11,.16);color:#fcd34d;border-color:rgba(245,158,11,.35)}
.conf-low{background:rgba(239,68,68,.16);color:#fca5a5;border-color:rgba(239,68,68,.35)}
.chip-line{display:flex;gap:4px;flex-wrap:wrap;margin-top:5px}.bar-chip{display:inline-flex;border-radius:999px;padding:2px 7px;font-size:.72rem;font-weight:800;background:rgba(59,130,246,.18);border:1px solid rgba(96,165,250,.35);color:#bfdbfe}.active-bar{background:rgba(56,189,248,.30);border-color:#38bdf8;color:#e0f2fe;box-shadow:0 0 0 1px rgba(56,189,248,.2)}.muted-bar{opacity:.28;filter:grayscale(.85)}.muted-chip{font-size:.75rem;color:#64748b}.modal-conf{margin-bottom:.7rem}.section-heading.small{font-size:1rem;margin:1.2rem 0 .7rem}.beam-filter-bar select{min-width:112px}.paths-table th:last-child,.paths-table td:last-child{text-align:center;white-space:nowrap}



/* ===== v10_patch.css ===== */
/* BIMora v10 UI + theme patch */
:root {
  --bg-dark:#071426; --panel-dark:#0e2442; --panel-dark-2:#0d1b36; --border-dark:#1d4f86;
  --text-dark:#f8fbff; --muted-dark:#8fb6dc; --accent:#3b82f6; --accent-2:#1d4ed8;
  --bg-light:#eef4fb; --panel-light:#ffffff; --panel-light-2:#f6faff; --border-light:#cbdcf2;
  --text-light:#102a43; --muted-light:#5e7894;
}

.bimora-hero{display:flex;justify-content:space-between;align-items:flex-end;gap:1rem; padding:1.15rem 0 .9rem;}
.bimora-title-wrap{display:flex;align-items:center;gap:1rem;}
.app-logo{width:88px;height:auto;display:block;flex:0 0 auto;filter:drop-shadow(0 4px 12px rgba(0,0,0,.18));}
.hero-text h1{display:block;margin:0;font-size:2.05rem;font-weight:800;letter-spacing:-.02em}
.hero-text .subtitle-row{margin-top:.25rem}
.hero-text .subtitle-row p{margin:0;color:#bfdbfe;font-size:.95rem;line-height:1.45}
.theme-toggle-btn{background:linear-gradient(135deg,#1d4ed8,#60a5fa);color:#fff;border:none;border-radius:999px;padding:.65rem 1rem;font-weight:700;font-size:.95rem;cursor:pointer;box-shadow:0 10px 24px rgba(37,99,235,.22)}
.theme-toggle-btn:hover{transform:translateY(-1px)}
.theme-toggle-btn:active{transform:translateY(0)}

/* Hide old export buttons in control row; v10 injects larger buttons into tonnage header */
.structural-controls #btn-export-csv,
.structural-controls #btn-export-json{display:none !important;}

.tonnage-head-v10{display:flex;align-items:center;justify-content:space-between;gap:1rem;flex-wrap:wrap;margin-bottom:.55rem}
.tonnage-actions-v10{display:flex;gap:.65rem;flex-wrap:wrap;justify-content:flex-end}
.export-btn-large{padding:.7rem 1rem;font-size:1rem;font-weight:800;border:none;border-radius:10px;cursor:pointer;background:linear-gradient(135deg,#2563eb,#60a5fa);color:#fff;box-shadow:0 10px 24px rgba(37,99,235,.22)}
.export-btn-large:hover{filter:brightness(1.06)}
.export-btn-large.secondary{background:linear-gradient(135deg,#0f766e,#2dd4bf)}

/* Light theme */
body.light-mode{background:var(--bg-light);color:var(--text-light)}
body.light-mode #drop-zone,
body.light-mode #file-bar,
body.light-mode #preview-container,
body.light-mode .merged-card,
body.light-mode .no-content,
body.light-mode #struct-canvas-wrap,
body.light-mode .paths-table td,
body.light-mode .text-page-section pre,
body.light-mode .modal,
body.light-mode #ai-modal{background:var(--panel-light) !important;color:var(--text-light)}
body.light-mode #file-bar,
body.light-mode #tabs,
body.light-mode .paths-table td,
body.light-mode .paths-table th,
body.light-mode .beam-card,
body.light-mode .merged-card,
body.light-mode #drop-zone,
body.light-mode .structural-controls,
body.light-mode #struct-box-bar,
body.light-mode #preview-container,
body.light-mode #struct-canvas-wrap,
body.light-mode .text-page-section pre,
body.light-mode #ai-modal{border-color:var(--border-light) !important}
body.light-mode #drop-zone:hover,body.light-mode #drop-zone.drag-over{background:#eaf2ff}
body.light-mode .tab-btn{color:var(--muted-light)}
body.light-mode .tab-btn:hover{background:#ddeafe}
body.light-mode .tab-btn.active{background:#2563eb;color:#fff}
body.light-mode #file-bar strong,
body.light-mode .section-heading,
body.light-mode .section-heading-lg,
body.light-mode .merged-section-title,
body.light-mode .text-page-section h3,
body.light-mode .paths-table th,
body.light-mode #meta-content,
body.light-mode #page-label,
body.light-mode .paths-count,
body.light-mode #struct-box-info,
body.light-mode .beam-muted,
body.light-mode .hero-text .subtitle-row p,
body.light-mode .subtitle-row p{color:var(--muted-light) !important}
body.light-mode .hero-text h1,
body.light-mode #file-bar strong,
body.light-mode .merged-card,
body.light-mode .paths-table td,
body.light-mode .text-page-section pre,
body.light-mode .beam-open-btn{color:var(--text-light) !important}
body.light-mode .nav-btn,
body.light-mode .action-btn,
body.light-mode select,
body.light-mode input,
body.light-mode .beam-edit,
body.light-mode #scale-select{background:#fff !important;color:var(--text-light)!important;border:1px solid var(--border-light)!important}
body.light-mode .paths-table th{background:#d9e8ff !important;color:#163252 !important}
body.light-mode .paths-table tr[style*="background:#1e3a6e"]{background:#d9e8ff !important}
body.light-mode .beam-click-hint,
body.light-mode .dim,
body.light-mode small{color:var(--muted-light)!important}
body.light-mode #error-bar{background:#fee2e2;color:#991b1b}
body.light-mode .theme-toggle-btn{background:linear-gradient(135deg,#0f172a,#475569);color:#fff}
body.light-mode .app-logo{filter:drop-shadow(0 4px 10px rgba(15,23,42,.08))}

/* Dark theme refinements */
body.dark-mode .hero-text .subtitle-row p{color:#bfdbfe}
body.dark-mode .theme-toggle-btn{background:linear-gradient(135deg,#e2e8f0,#94a3b8);color:#0f172a}

@media (max-width:760px){
  .bimora-hero{align-items:flex-start;flex-direction:column}
  .app-logo{width:74px}
  .hero-text h1{font-size:1.55rem}
}

/* v10 final overrides */
#landing-hero .bimora-hero-actions{display:flex!important;align-self:center;margin-left:auto}
#landing-hero .hdr-right.bimora-hero-actions{display:flex!important}
.status-pill{display:none!important}
.theme-toggle-btn{font-size:1rem;padding:.72rem 1.05rem}
.tonnage-head-v10 .section-heading-lg{font-size:1.55rem!important;color:#eaf3ff!important}
body.light-mode .tonnage-head-v10 .section-heading-lg{color:#102a43!important}
#struct-canvas-wrap{overflow:hidden!important}
#struct-editor-wrap{transform-origin:top left}



/* ===== v11_patch.css ===== */
/* BIMora v11 polish */
.bimora-hero{padding:1.25rem 1.35rem 1rem !important;margin-top:1rem;margin-left:1rem;margin-right:1rem;border-radius:18px;}
.bimora-title-wrap{gap:1.2rem !important;padding-left:.35rem;}
.bimora-hero-actions{padding-right:.35rem;padding-bottom:.15rem;}
.app-logo{width:96px !important;height:96px !important;object-fit:cover;border-radius:18px;clip-path:polygon(10% 0,100% 0,100% 90%,90% 100%,0 100%,0 10%);background:#0b1d35;border:1px solid rgba(148,196,255,.22);padding:0;}
body.light-mode .app-logo{background:#fff;border-color:#d7e5f7;}
.theme-toggle-btn{margin-right:.2rem;}
.structural-controls label{display:flex;align-items:center;gap:.35rem;white-space:nowrap;}
.structural-controls select{min-width:126px;}
#s-fyk{min-width:150px;}
@media (max-width:760px){.bimora-hero{margin-left:.4rem;margin-right:.4rem;padding:.9rem!important}.app-logo{width:76px!important;height:76px!important}}



/* ===== v12_patch.css ===== */
/* BIMora v12 alignment + footer */
#app,
#landing-hero,
.bimora-footer{
  width:min(1220px, calc(100% - 2rem)) !important;
  max-width:1220px !important;
  margin-left:auto !important;
  margin-right:auto !important;
}
#app{
  padding-left:0 !important;
  padding-right:0 !important;
}
#landing-hero.bimora-hero{
  margin-top:1rem !important;
  margin-bottom:.95rem !important;
}
.bimora-title-wrap{padding-left:.65rem !important;}
.bimora-hero-actions{padding-right:.65rem !important;}
.bimora-footer{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1rem;
  margin-top:1rem;
  margin-bottom:1.15rem;
  padding:1rem 1.1rem;
  border-radius:16px;
  background:rgba(9,18,30,.88);
  border:1px solid rgba(148,196,255,.18);
  box-shadow:0 12px 30px rgba(2,8,23,.20);
  color:#eaf3ff;
  font-size:.86rem;
}
.footer-left{font-weight:800;}
.footer-centre{color:#94a3b8;text-align:center;flex:1;}
.footer-version{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:.42rem .82rem;
  border-radius:999px;
  border:1px solid rgba(96,165,250,.65);
  background:rgba(37,99,235,.18);
  color:#60a5fa;
  font-weight:900;
  white-space:nowrap;
}
body.light-mode .bimora-footer{
  background:#ffffff;
  border-color:#cbdcf2;
  color:#102a43;
  box-shadow:0 12px 28px rgba(15,23,42,.08);
}
body.light-mode .footer-centre{color:#64748b;}
body.light-mode .footer-version{background:#eaf2ff;color:#2563eb;border-color:#93c5fd;}
@media (max-width:760px){
  #app,#landing-hero,.bimora-footer{width:calc(100% - .8rem) !important;}
  .bimora-footer{flex-direction:column;align-items:flex-start;gap:.45rem;}
  .footer-centre{text-align:left;flex:0;}
}



/* ===== v13_patch.css ===== */
/* BIMora v13: confidence panel + chamfered engineering controls */
.structural-controls {
  align-items: center;
}
.structural-controls > span:last-child {
  gap: .85rem !important;
}
.design-control {
  display: flex;
  align-items: center;
  gap: .45rem;
  min-height: 42px;
  padding: .45rem .65rem;
  color: #dbeafe;
  font-size: .84rem;
  font-weight: 750;
  background: linear-gradient(135deg, rgba(15, 39, 72, .92), rgba(11, 31, 58, .92));
  border: 1px solid rgba(96, 165, 250, .32);
  border-radius: 14px;
  clip-path: polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.05), 0 8px 18px rgba(0,0,0,.12);
}
.cover-control-wrap {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
}
.design-input,
.design-select {
  height: 30px;
  background: rgba(5, 18, 34, .72) !important;
  border: 1px solid rgba(96, 165, 250, .38) !important;
  color: #eff6ff !important;
  border-radius: 10px !important;
  padding: 3px 9px !important;
  font-size: .82rem !important;
  outline: none;
}
.design-input:focus,
.design-select:focus {
  border-color: rgba(125, 211, 252, .86) !important;
  box-shadow: 0 0 0 3px rgba(59, 130, 246, .18);
}
.cover-input { width: 58px; text-align: center; }
.cover-preset { min-width: 82px; }

.overall-confidence-panel {
  margin: 0 0 1rem;
  padding: .75rem 1rem;
  border: 1px solid rgba(96, 165, 250, .28);
  border-radius: 16px;
  clip-path: polygon(12px 0, 100% 0, 100% calc(100% - 12px), calc(100% - 12px) 100%, 0 100%, 0 12px);
  background: linear-gradient(135deg, rgba(14, 36, 66, .95), rgba(7, 20, 38, .94));
  color: #dbeafe;
  box-shadow: 0 8px 24px rgba(0,0,0,.13);
}
.overall-confidence-row {
  display: flex;
  align-items: center;
  gap: .8rem;
  flex-wrap: wrap;
}
.overall-confidence-title {
  font-weight: 850;
  font-size: .96rem;
  color: #eff6ff;
}
.overall-confidence-pill {
  display: inline-flex;
  align-items: center;
  min-width: 74px;
  justify-content: center;
  padding: .35rem .65rem;
  border-radius: 999px;
  font-weight: 900;
  font-size: .92rem;
  background: linear-gradient(135deg, #2563eb, #38bdf8);
  color: #fff;
}
.overall-confidence-meter {
  flex: 1 1 220px;
  min-width: 160px;
  height: 10px;
  border-radius: 999px;
  overflow: hidden;
  background: rgba(15, 23, 42, .65);
  border: 1px solid rgba(148, 196, 255, .14);
}
.overall-confidence-fill {
  height: 100%;
  width: 0%;
  border-radius: inherit;
  background: linear-gradient(90deg, #60a5fa, #22d3ee);
}
.overall-confidence-sub {
  width: 100%;
  color: #93c5fd;
  font-size: .78rem;
  margin-top: .2rem;
}
body.light-mode .design-control {
  background: linear-gradient(135deg, #ffffff, #edf6ff);
  border-color: #cbdcf2;
  color: #18395f;
}
body.light-mode .design-input,
body.light-mode .design-select {
  background: #fff !important;
  color: #102a43 !important;
  border-color: #c4d7ee !important;
}
body.light-mode .overall-confidence-panel {
  background: linear-gradient(135deg, #ffffff, #f0f7ff);
  border-color: #cbdcf2;
  color: #18395f;
}
body.light-mode .overall-confidence-title { color: #102a43; }
body.light-mode .overall-confidence-meter { background: #dbeafe; border-color: #cbdcf2; }
body.light-mode .overall-confidence-sub { color: #5e7894; }



/* ===== v14_patch.css ===== */
/* BIMora v14: light-mode readability, confidence meter, editable lengths */
body.light-mode {
  color: #0b1f35 !important;
}
body.light-mode .hero-text h1,
body.light-mode .section-heading,
body.light-mode .section-heading-lg,
body.light-mode .merged-section-title,
body.light-mode .overall-confidence-title,
body.light-mode .paths-table td,
body.light-mode .paths-table td strong,
body.light-mode .beam-open-btn,
body.light-mode .struct-title,
body.light-mode .meta-key,
body.light-mode .meta-val,
body.light-mode .el-label,
body.light-mode .struct-text,
body.light-mode .text-page-section pre {
  color: #0b1f35 !important;
}
body.light-mode .subtitle-row p,
body.light-mode .beam-muted,
body.light-mode .dim,
body.light-mode .paths-count,
body.light-mode #struct-summary,
body.light-mode #struct-box-info,
body.light-mode .overall-confidence-sub,
body.light-mode .el-sub,
body.light-mode .struct-raw summary {
  color: #334e68 !important;
}
body.light-mode .tab-btn,
body.light-mode label,
body.light-mode .design-control {
  color: #12395f !important;
}
body.light-mode input,
body.light-mode select,
body.light-mode .beam-edit,
body.light-mode .beam-length-edit {
  color: #0b1f35 !important;
}
/* remove grey triangular artefact from chamfer clip in light mode */
body.light-mode .design-control {
  clip-path: none !important;
  border-radius: 16px !important;
  overflow: hidden;
  background: linear-gradient(135deg,#ffffff,#edf6ff) !important;
}
body.light-mode .overall-confidence-panel {
  clip-path: none !important;
  border-radius: 16px !important;
}
.overall-confidence-meter { position: relative; }
.overall-confidence-fill {
  width: var(--conf-pct, 0%) !important;
  background: var(--conf-color, linear-gradient(90deg,#60a5fa,#22d3ee)) !important;
  transition: width .25s ease, background .25s ease;
}
.overall-confidence-pill {
  background: var(--conf-pill, linear-gradient(135deg,#2563eb,#38bdf8)) !important;
}
.beam-length-edit {
  width: 94px;
  max-width: 100%;
  margin-left: .25rem;
  padding: .22rem .4rem;
  border-radius: 8px;
  border: 1px solid rgba(96,165,250,.35);
  background: rgba(5,18,34,.72);
  color: #eff6ff;
  font-size: .78rem;
  font-weight: 700;
}
.length-edit-row {
  display: flex;
  align-items: center;
  gap: .25rem;
  flex-wrap: wrap;
  margin-top: .25rem;
}
.length-edit-row .beam-muted-label {
  color: inherit;
  opacity: .86;
}
body.light-mode .beam-length-edit {
  background: #fff !important;
  border-color: #c4d7ee !important;
  color: #0b1f35 !important;
}



/* ===== v15_patch.css ===== */
/* BIMora v15: confidence progress bar + theme/readability fixes */

/* Confidence bar is a real progress meter: empty track + filled length */
.overall-confidence-row {
  --conf-pct: 0%;
  --conf-track: rgba(15, 23, 42, .55);
  --conf-fill: linear-gradient(90deg,#60a5fa,#22d3ee);
  --conf-pill-bg: linear-gradient(135deg,#2563eb,#38bdf8);
}
.overall-confidence-meter {
  position: relative !important;
  display: block !important;
  flex: 1 1 260px !important;
  min-width: 220px !important;
  height: 15px !important;
  padding: 0 !important;
  overflow: hidden !important;
  border-radius: 999px !important;
  background: var(--conf-track) !important;
  border: 1px solid rgba(148, 196, 255, .32) !important;
  box-shadow: inset 0 1px 2px rgba(0,0,0,.22) !important;
}
.overall-confidence-fill {
  position: absolute !important;
  inset: 0 auto 0 0 !important;
  display: block !important;
  height: 100% !important;
  width: var(--conf-pct, 0%) !important;
  max-width: 100% !important;
  min-width: 0 !important;
  border-radius: inherit !important;
  background: var(--conf-fill) !important;
  transition: width .25s ease, background .25s ease !important;
}
.overall-confidence-pill {
  background: var(--conf-pill-bg) !important;
}
body.light-mode .overall-confidence-row {
  --conf-track: #d7e6f8;
}

/* Theme button displays current mode, not the opposite action */
.theme-toggle-btn { min-width: 132px; text-align: center; }

/* Light mode text/readability */
body.light-mode {
  background: #eef4fb !important;
  color: #071a2f !important;
}
body.light-mode #app,
body.light-mode #landing-hero,
body.light-mode .hdr,
body.light-mode .hero-text h1,
body.light-mode .section-heading,
body.light-mode .section-heading-lg,
body.light-mode .merged-section-title,
body.light-mode .overall-confidence-title,
body.light-mode .footer-left,
body.light-mode .footer-centre,
body.light-mode .footer-right,
body.light-mode .footer-version,
body.light-mode .meta-key,
body.light-mode .meta-val,
body.light-mode .paths-table td,
body.light-mode .paths-table td strong,
body.light-mode .beam-open-btn,
body.light-mode .beam-edit,
body.light-mode .beam-length-edit,
body.light-mode .text-page-section pre,
body.light-mode .no-content,
body.light-mode .el-label,
body.light-mode .el-sub,
body.light-mode .struct-text,
body.light-mode .struct-raw summary {
  color: #071a2f !important;
}
body.light-mode .subtitle-row p,
body.light-mode #drop-zone p,
body.light-mode #drop-zone small,
body.light-mode .beam-muted,
body.light-mode .dim,
body.light-mode .paths-count,
body.light-mode #struct-summary,
body.light-mode #struct-box-info,
body.light-mode .overall-confidence-sub,
body.light-mode #page-label {
  color: #173b63 !important;
}
body.light-mode #drop-zone {
  background: #ffffff !important;
  border-color: #1e63b6 !important;
}
body.light-mode #drop-zone:hover,
body.light-mode #drop-zone.drag-over {
  background: #e7f1ff !important;
}
body.light-mode #drop-zone svg { stroke: #175ea8 !important; opacity: .95 !important; }

/* Light mode cards */
body.light-mode #preview-container,
body.light-mode .merged-card,
body.light-mode .overall-confidence-panel,
body.light-mode .design-control,
body.light-mode .footer-card,
body.light-mode .app-footer,
body.light-mode #drop-zone,
body.light-mode .no-content,
body.light-mode .text-page-section pre,
body.light-mode #meta-content,
body.light-mode .struct-card,
body.light-mode .struct-body {
  background: #ffffff !important;
  border-color: #b7cde7 !important;
}
body.light-mode .paths-table th {
  background: #d7e8ff !important;
  color: #071a2f !important;
}
body.light-mode .paths-table td { background: #ffffff !important; }
body.light-mode .paths-table tr:hover td { background: #eef6ff !important; }

/* Components that remain blue/dark in light mode must keep light text */
body.light-mode .tab-btn.active,
body.light-mode .export-btn-large,
body.light-mode .export-btn,
body.light-mode .theme-toggle-btn,
body.light-mode .action-btn[style*="background:#1a4a2e"],
body.light-mode .action-btn[style*="background:#1e1a4a"],
body.light-mode .struct-title,
body.light-mode .footer-version,
body.light-mode .overall-confidence-pill,
body.light-mode .el-chip,
body.light-mode .confidence-pill {
  color: #ffffff !important;
}
body.light-mode .struct-title {
  background: linear-gradient(135deg,#1d4ed8,#2563eb) !important;
}
body.light-mode .footer-version {
  background: #1d4ed8 !important;
  border-color: #60a5fa !important;
}

/* Input/control readability in both modes */
body.light-mode input,
body.light-mode select,
body.light-mode .design-input,
body.light-mode .design-select,
body.light-mode .beam-edit,
body.light-mode .beam-length-edit,
body.light-mode #scale-select {
  background: #ffffff !important;
  color: #071a2f !important;
  border-color: #9fbadb !important;
}
body.light-mode input::placeholder,
body.light-mode .beam-edit::placeholder,
body.light-mode .beam-length-edit::placeholder { color: #5f7894 !important; }

/* Some dark mode surfaces need explicitly light text after light-mode overrides */
body.dark-mode #drop-zone p,
body.dark-mode #drop-zone small,
body.dark-mode .subtitle-row p,
body.dark-mode .beam-muted,
body.dark-mode .overall-confidence-sub,
body.dark-mode #page-label,
body.dark-mode .paths-count,
body.dark-mode #struct-summary,
body.dark-mode #struct-box-info { color: #bfdbfe !important; }
body.dark-mode .hero-text h1,
body.dark-mode .section-heading,
body.dark-mode .section-heading-lg,
body.dark-mode .overall-confidence-title,
body.dark-mode .footer-left,
body.dark-mode .footer-centre { color: #f8fbff !important; }

/* Make labels readable where cards are dark */
body:not(.light-mode) .design-control,
body:not(.light-mode) .design-control label { color: #eff6ff !important; }



/* ===== v16_patch.css ===== */
/* BIMora v16: control refinement + detection method comparison */
.theme-toggle-btn{
  min-width:66px !important;
  padding:.34rem .52rem !important;
  font-size:.72rem !important;
  line-height:1.1 !important;
  border-radius:999px !important;
  box-shadow:0 6px 14px rgba(37,99,235,.16) !important;
}

/* Cover selector: one combined chamfered control instead of two visual boxes */
.design-control:has(#s-cover){
  gap:.5rem !important;
}
.cover-control-wrap{
  display:inline-flex !important;
  align-items:center !important;
  gap:0 !important;
  background:rgba(5,18,34,.72) !important;
  border:1px solid rgba(96,165,250,.38) !important;
  border-radius:11px !important;
  overflow:hidden !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.04) !important;
}
.cover-control-wrap .design-input,
.cover-control-wrap .design-select{
  background:transparent !important;
  border:0 !important;
  box-shadow:none !important;
  border-radius:0 !important;
  height:31px !important;
}
.cover-control-wrap .cover-input{
  width:56px !important;
  border-right:1px solid rgba(96,165,250,.28) !important;
}
.cover-control-wrap .cover-preset{
  min-width:82px !important;
}
body.light-mode .cover-control-wrap{
  background:#fff !important;
  border-color:#9fbadb !important;
  box-shadow:none !important;
}
body.light-mode .cover-control-wrap .cover-input{
  border-right-color:#c4d7ee !important;
}

.detection-method-control{
  display:inline-flex;
  align-items:center;
  gap:.45rem;
  min-height:36px;
  padding:.35rem .55rem;
  color:#dbeafe;
  font-size:.78rem;
  font-weight:750;
  background:linear-gradient(135deg, rgba(15,39,72,.92), rgba(11,31,58,.92));
  border:1px solid rgba(96,165,250,.32);
  border-radius:13px;
  clip-path:polygon(9px 0,100% 0,100% calc(100% - 9px),calc(100% - 9px) 100%,0 100%,0 9px);
}
.detection-method-control select{
  height:28px;
  background:rgba(5,18,34,.72) !important;
  border:1px solid rgba(96,165,250,.38) !important;
  color:#eff6ff !important;
  border-radius:9px !important;
  padding:2px 8px !important;
  font-size:.76rem !important;
}
.detection-compare-panel{
  display:none;
  margin:.55rem 0 .85rem;
  padding:.75rem;
  border:1px solid rgba(96,165,250,.24);
  border-radius:16px;
  clip-path:polygon(12px 0,100% 0,100% calc(100% - 12px),calc(100% - 12px) 100%,0 100%,0 12px);
  background:linear-gradient(135deg, rgba(14,36,66,.95), rgba(7,20,38,.92));
}
.detection-compare-title{font-size:.9rem;font-weight:850;color:#eff6ff;margin-bottom:.5rem;}
.detection-result-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.55rem;}
.detection-result-card{border:1px solid rgba(148,196,255,.2);border-radius:14px;padding:.62rem;background:rgba(15,39,72,.55);}
.detection-result-card strong{display:block;color:#eff6ff;font-size:.86rem;margin-bottom:.25rem;}
.detection-result-card .muted{font-size:.72rem;color:#bfdbfe;line-height:1.35;}
.detection-result-card button{margin-top:.5rem;width:100%;border:0;border-radius:9px;padding:.45rem .55rem;background:linear-gradient(135deg,#2563eb,#60a5fa);color:#fff;font-weight:800;cursor:pointer;}
.detection-result-card.best{border-color:#38bdf8;box-shadow:0 0 0 2px rgba(56,189,248,.14) inset;}
.detection-chip{display:inline-flex;align-items:center;gap:.25rem;padding:.18rem .42rem;border-radius:999px;background:rgba(96,165,250,.16);font-size:.7rem;color:#dbeafe;margin-right:.25rem;margin-top:.25rem;}
body.light-mode .detection-method-control,
body.light-mode .detection-compare-panel{background:#fff !important;border-color:#b7cde7 !important;color:#071a2f !important;}
body.light-mode .detection-method-control select{background:#fff !important;color:#071a2f !important;border-color:#9fbadb !important;}
body.light-mode .detection-compare-title,
body.light-mode .detection-result-card strong{color:#071a2f !important;}
body.light-mode .detection-result-card{background:#f6faff;border-color:#cbdcf2;}
body.light-mode .detection-result-card .muted{color:#173b63 !important;}
body.light-mode .detection-chip{background:#dbeafe;color:#173b63;}
@media(max-width:820px){.detection-result-grid{grid-template-columns:1fr}.theme-toggle-btn{min-width:62px!important}}



/* ===== v17_patch.css ===== */

/* BIMora v17 detection comparison patch */
.detection-result-grid-v17{grid-template-columns:repeat(auto-fit,minmax(235px,1fr));}
.detection-help{font-size:.86rem;line-height:1.45;color:#bfdbfe;margin:.2rem 0 .85rem;opacity:.9}
body.light-mode .detection-help{color:#24435f}
#detection-method-select option[value="consensus"]{font-weight:700}



/* ===== v18_patch.css ===== */
/* BIMora v18 patch */
/* Remove app logo for now and align header/card content */
.app-logo{display:none!important;}
.bimora-title-wrap{gap:0!important;}
.bimora-hero{padding-left:1rem!important;padding-right:1rem!important;}
#app{max-width:1216px!important;}
#landing-hero{max-width:1216px!important;width:calc(100% - 2rem)!important;margin-left:auto!important;margin-right:auto!important;}
.struct-summary{margin-left:1rem!important;}

/* Remove old load button and comparison UI */
#reload-btn{display:none!important;}
#detection-compare-panel{display:none!important;}
.detection-compare-panel{display:none!important;}

/* Smaller theme toggle */
.theme-toggle-btn{font-size:.48rem!important;padding:.32rem .52rem!important;border-radius:999px!important;line-height:1.1!important;min-height:auto!important;box-shadow:0 5px 12px rgba(37,99,235,.18)!important;}

/* Cover preset: one visual box only */
.cover-single-control .cover-control-wrap.single-cover-box{display:block!important;background:transparent!important;border:0!important;padding:0!important;box-shadow:none!important;}
.cover-input-hidden{display:none!important;}
.single-cover-select{min-width:88px!important;text-align:center!important;border-radius:12px!important;padding:.5rem .7rem!important;}
.cover-preset.single-cover-select{width:100%!important;}
.design-select option, select option{background:#fff!important;color:#111827!important;}
body.dark-mode .design-select option, body.dark-mode select option{background:#fff!important;color:#111827!important;}

/* Light mode readability / visible buttons */
body.light-mode #drop-zone p,
body.light-mode #drop-zone small{color:#0f172a!important;font-weight:700!important;}
body.light-mode #btn-extract-boxes,
body.light-mode #btn-ai-extract,
body.light-mode #btn-ai-settings,
body.light-mode #btn-legacy-extract,
body.light-mode #btn-add-box,
body.light-mode #btn-del-box,
body.light-mode #btn-reset-boxes{background:#ffffff!important;color:#0f172a!important;border-color:#9fb9d8!important;}
body.light-mode #btn-extract-boxes:hover,
body.light-mode #btn-ai-extract:hover,
body.light-mode #btn-ai-settings:hover,
body.light-mode #btn-legacy-extract:hover,
body.light-mode #btn-add-box:hover,
body.light-mode #btn-del-box:hover,
body.light-mode #btn-reset-boxes:hover{background:#dbeafe!important;color:#071a2f!important;}

/* Export buttons above tonnage */
.tonnage-head-v18{display:flex;align-items:center;justify-content:space-between;gap:1rem;flex-wrap:wrap;margin-bottom:.65rem;}
.tonnage-actions-v18{display:flex;gap:.65rem;align-items:center;justify-content:flex-end;flex-wrap:wrap;}
.export-btn-v18{font-size:1rem;font-weight:850;border:none;border-radius:12px;padding:.75rem 1.1rem;cursor:pointer;color:#fff;background:linear-gradient(135deg,#2563eb,#60a5fa);box-shadow:0 10px 24px rgba(37,99,235,.22);}
.export-btn-v18.secondary{background:linear-gradient(135deg,#0f766e,#2dd4bf);}
.export-btn-v18:hover{filter:brightness(1.06);transform:translateY(-1px);}
body.light-mode .export-btn-v18{color:#fff!important;}



/* ===== v19_patch.css ===== */
/* BIMora v19 patch: cover combo, modal light-mode, tighter beam review */
.cover-single-control{gap:.55rem!important;}
.cover-single-control .single-cover-box{display:inline-flex!important;align-items:center!important;gap:0!important;height:32px!important;min-width:94px!important;background:rgba(5,18,34,.72)!important;border:1px solid rgba(96,165,250,.38)!important;border-radius:10px!important;overflow:hidden!important;clip-path:none!important;padding:0!important;box-shadow:none!important;}
.cover-single-control #s-cover-preset{display:none!important;}
.cover-combo-v19{display:inline-flex;align-items:center;height:32px;min-width:94px;background:transparent;border:0;border-radius:10px;overflow:hidden;}
.cover-combo-input-v19{width:62px;height:100%;border:0!important;background:transparent!important;color:#eff6ff!important;text-align:center;font-weight:800;font-size:.82rem;outline:0;padding:0 2px!important;}
.cover-combo-input-v19:focus{background:rgba(59,130,246,.18)!important;box-shadow:inset 0 0 0 1px rgba(125,211,252,.55)!important;}
.cover-combo-select-v19{width:28px;height:100%;border:0!important;border-left:1px solid rgba(96,165,250,.24)!important;background:transparent!important;color:transparent!important;outline:0;cursor:pointer;padding:0!important;appearance:auto!important;}
.cover-combo-select-v19 option{background:#fff!important;color:#111827!important;}
body.light-mode .cover-single-control .single-cover-box{background:#fff!important;border-color:#9fb9d8!important;}
body.light-mode .cover-combo-input-v19{color:#0f172a!important;}
body.light-mode .cover-combo-select-v19{border-left-color:#cbd5e1!important;}

/* Beam detail modal follows the active theme */
body.light-mode #beam-detail-modal .modal,
body.light-mode .beam-detail-modal .modal,
body.light-mode #beam-detail-modal [class*="modal"]{background:#ffffff!important;color:#102a43!important;border-color:#cbdcf2!important;}
body.light-mode #beam-modal-title,
body.light-mode #beam-modal-info,
body.light-mode #beam-modal-info .el-label,
body.light-mode #beam-modal-info .modal-conf{color:#102a43!important;}
body.light-mode #beam-modal-crop{background:#f8fbff!important;border-color:#cbdcf2!important;}
body.light-mode #beam-modal-crop .no-content{background:#f8fbff!important;color:#102a43!important;}
body.light-mode #beam-detail-modal summary{color:#1d4ed8!important;}
body.light-mode #beam-detail-modal .struct-text{color:#102a43!important;background:#f8fbff!important;}

/* Give the beam crop a clear frame so wrong-crop issues are visible during review */
#beam-modal-crop img{display:block;width:100%;height:auto;max-height:58vh;object-fit:contain;background:#fff;border-radius:10px;}
#beam-modal-crop{border-radius:12px;overflow:hidden;border:1px solid rgba(96,165,250,.28);background:#081a31;}

/* Footer version update target if text is rendered */



/* ===== v21 clean/fix patch ===== */

/* Dark mode is the default */
body { background:#071426; color:#f8fbff; }

/* Remove logo and keep header aligned with app cards */
#app, #landing-hero { max-width:1216px !important; width:100% !important; }
#landing-hero {
  margin: 0 auto .85rem auto !important;
  padding: 1rem 1.25rem !important;
}
.app-logo, .brand-mark { display:none !important; }
.bimora-title-wrap { gap:0 !important; }
.bimora-hero-actions { padding-right:.25rem !important; }

/* Smaller current-mode button */
.theme-toggle-btn {
  font-size:.58rem !important;
  padding:.32rem .52rem !important;
  min-height:0 !important;
  line-height:1.05 !important;
  border-radius:999px !important;
}

/* Delete non-functional reload button */
#reload-btn { display:none !important; }

/* Toolbar alignment */
.struct-summary { margin-left:1rem !important; }

/* One clean cover input styled like the other app fields */
.cover-single-control #s-cover-preset,
.cover-single-control .cover-preset,
#s-cover-preset,
.cover-combo-v19,
.cover-combo-v20-wrap {
  display:none !important;
}
.design-control.cover-single-control .cover-control-wrap,
.cover-single-control .cover-control-wrap.single-cover-box {
  display:inline-flex !important;
  align-items:center !important;
  min-width:92px !important;
  min-height:34px !important;
  padding:0 !important;
  border:1px solid rgba(96,165,250,.38) !important;
  background:rgba(5,18,34,.72) !important;
  border-radius:10px !important;
  overflow:hidden !important;
  box-shadow:none !important;
}
#s-cover {
  display:block !important;
  visibility:visible !important;
  opacity:1 !important;
  pointer-events:auto !important;
  width:92px !important;
  min-width:92px !important;
  height:34px !important;
  margin:0 !important;
  border:0 !important;
  padding:0 26px 0 10px !important;
  background:transparent !important;
  color:#eff6ff !important;
  text-align:center !important;
  font-weight:850 !important;
  font-size:.86rem !important;
  outline:0 !important;
}
.cover-single-control .cover-control-wrap::after {
  content:'▾';
  position:absolute;
  right:9px;
  top:50%;
  transform:translateY(-52%);
  color:#bfdbfe;
  pointer-events:none;
  font-size:.76rem;
}
.cover-single-control .cover-control-wrap { position:relative !important; }
#cover-values-list { display:none; }

/* Native select/dropdown readability */
select option, datalist option {
  background:#ffffff !important;
  color:#111827 !important;
}

/* Export buttons above tonnage summary */
.tonnage-head-v18, .tonnage-head-v10, .tonnage-head-v21 {
  display:flex !important;
  align-items:center !important;
  justify-content:space-between !important;
  gap:1rem !important;
  flex-wrap:wrap !important;
  margin-bottom:.65rem !important;
}
.tonnage-actions-v18, .tonnage-actions-v10, .tonnage-actions-v21 {
  margin-left:auto !important;
  display:flex !important;
  gap:.65rem !important;
  flex-wrap:wrap !important;
  justify-content:flex-end !important;
}
.export-btn-large, .export-btn-v18, .export-btn-v21 {
  padding:.68rem 1rem !important;
  font-size:.98rem !important;
  font-weight:850 !important;
  border:0 !important;
  border-radius:10px !important;
  cursor:pointer !important;
  background:linear-gradient(135deg,#2563eb,#60a5fa) !important;
  color:#fff !important;
  box-shadow:0 8px 20px rgba(37,99,235,.22) !important;
}
.export-btn-v21.secondary, .export-btn-large.secondary { background:linear-gradient(135deg,#0f766e,#2dd4bf) !important; }

/* Hide old export buttons in the toolbar; only show the large summary buttons */
.structural-controls > span > #btn-export-csv,
.structural-controls > span > #btn-export-json { display:none !important; }

/* Strong light-mode contrast audit */
body.light-mode { background:#eef4fb !important; color:#0f172a !important; }
body.light-mode #landing-hero,
body.light-mode #drop-zone,
body.light-mode #app,
body.light-mode #file-bar,
body.light-mode #preview-container,
body.light-mode #struct-canvas-wrap,
body.light-mode .merged-card,
body.light-mode .struct-card,
body.light-mode .modal,
body.light-mode #ai-modal,
body.light-mode .footer-card,
body.light-mode .no-content,
body.light-mode .text-page-section pre,
body.light-mode #paths-table-wrap {
  color:#0f172a !important;
}
body.light-mode #drop-zone,
body.light-mode #file-bar,
body.light-mode #preview-container,
body.light-mode #struct-canvas-wrap,
body.light-mode .merged-card,
body.light-mode .struct-card,
body.light-mode .modal,
body.light-mode #ai-modal,
body.light-mode .footer-card,
body.light-mode .no-content,
body.light-mode .text-page-section pre {
  background:#ffffff !important;
  border-color:#b8cbe4 !important;
}
body.light-mode #drop-zone p,
body.light-mode #drop-zone small,
body.light-mode p,
body.light-mode span,
body.light-mode label,
body.light-mode td,
body.light-mode .dim,
body.light-mode .beam-muted,
body.light-mode .struct-summary,
body.light-mode .paths-count,
body.light-mode .subtitle-row p {
  color:#0f172a !important;
}
body.light-mode small,
body.light-mode .beam-muted,
body.light-mode .dim {
  color:#334155 !important;
}
body.light-mode h1,
body.light-mode h2,
body.light-mode h3,
body.light-mode .section-heading,
body.light-mode .section-heading-lg,
body.light-mode .merged-section-title,
body.light-mode .struct-title,
body.light-mode .modal h3 {
  color:#0f172a !important;
}
body.light-mode .tab-btn { color:#1e3a5f !important; }
body.light-mode .tab-btn.active { color:#fff !important; background:#2563eb !important; }
body.light-mode .paths-table th {
  background:#d9e8ff !important;
  color:#0f172a !important;
}
body.light-mode .paths-table td {
  background:#fff !important;
  color:#0f172a !important;
  border-color:#dbe7f5 !important;
}
body.light-mode input,
body.light-mode select,
body.light-mode textarea,
body.light-mode .beam-edit,
body.light-mode .design-select {
  background:#ffffff !important;
  color:#0f172a !important;
  border-color:#9fb9d8 !important;
}
body.light-mode .design-control.cover-single-control .cover-control-wrap,
body.light-mode .cover-single-control .cover-control-wrap.single-cover-box {
  background:#ffffff !important;
  border-color:#9fb9d8 !important;
}
body.light-mode #s-cover {
  color:#0f172a !important;
}
body.light-mode .cover-single-control .cover-control-wrap::after { color:#0f172a !important; }

/* Dark/blue buttons must have light text; white buttons in light mode have dark text */
body.dark-mode .action-btn,
body.dark-mode .nav-btn,
body.dark-mode .export-btn,
body.dark-mode #btn-extract-boxes,
body.dark-mode #btn-ai-extract,
body.dark-mode #btn-ai-settings {
  color:#eff6ff !important;
}
body.light-mode .action-btn,
body.light-mode .nav-btn,
body.light-mode #btn-add-box,
body.light-mode #btn-del-box,
body.light-mode #btn-reset-boxes,
body.light-mode #btn-extract-boxes,
body.light-mode #btn-ai-extract,
body.light-mode #btn-ai-settings,
body.light-mode #btn-legacy-extract {
  background:#ffffff !important;
  color:#0f172a !important;
  border:1px solid #9fb9d8 !important;
}
body.light-mode .action-btn:hover,
body.light-mode .nav-btn:hover,
body.light-mode #btn-add-box:hover,
body.light-mode #btn-del-box:hover,
body.light-mode #btn-reset-boxes:hover,
body.light-mode #btn-extract-boxes:hover,
body.light-mode #btn-ai-extract:hover,
body.light-mode #btn-ai-settings:hover,
body.light-mode #btn-legacy-extract:hover {
  background:#dbeafe !important;
  color:#071a2f !important;
}

/* Dark panels: keep text light even in light mode if the background is dark/blue */
body.light-mode .struct-title,
body.light-mode .tab-btn.active,
body.light-mode .export-btn-large,
body.light-mode .export-btn-v21,
body.light-mode .export-btn-v18 {
  color:#ffffff !important;
}

/* Beam popup follows active theme */
body.light-mode #beam-detail-modal .modal,
body.light-mode .beam-detail-modal .modal,
body.light-mode #beam-modal-info,
body.light-mode #beam-modal-crop {
  background:#ffffff !important;
  color:#0f172a !important;
  border-color:#b8cbe4 !important;
}
body.light-mode #beam-modal-info *,
body.light-mode #beam-detail-modal * {
  color:inherit;
}
body.light-mode #beam-detail-modal .el-chip,
body.light-mode #beam-detail-modal .confidence-pill {
  color:#ffffff !important;
}

/* Confidence bar must visibly fill only to percentage; JS sets --confidence-pct */
.confidence-progress,
.overall-confidence-bar,
.confidence-meter,
#overall-confidence-bar {
  position:relative !important;
  overflow:hidden !important;
  background:rgba(148,163,184,.28) !important;
}
.confidence-progress::before,
.overall-confidence-bar::before,
.confidence-meter::before,
#overall-confidence-bar::before {
  content:'' !important;
  display:block !important;
  width:var(--confidence-pct,0%) !important;
  height:100% !important;
  background:var(--confidence-fill,linear-gradient(90deg,#f59e0b,#facc15)) !important;
}

/* Footer */
.app-footer, .footer-card {
  max-width:1216px;
  width:100%;
  margin:1rem auto 0;
}

/* Responsive */
@media (max-width:760px){
  #landing-hero{padding:.85rem 1rem !important;}
  .theme-toggle-btn{font-size:.55rem !important;padding:.28rem .44rem !important;}
}

/* ===== v22 function fix: stable theme/readability overrides ===== */
body.dark-mode {
  background: var(--bg);
  color: #eaf3ff;
}
body.dark-mode p,
body.dark-mode span,
body.dark-mode label,
body.dark-mode small,
body.dark-mode td,
body.dark-mode th,
body.dark-mode div {
  color: inherit;
}
body.dark-mode .dim,
body.dark-mode .beam-muted,
body.dark-mode .muted-bar,
body.dark-mode small,
body.dark-mode .subtitle-row p {
  color: #b7cff0 !important;
}
body.dark-mode input,
body.dark-mode select,
body.dark-mode textarea {
  background: #0f2748 !important;
  color: #f8fbff !important;
  border-color: rgba(148,196,255,.34) !important;
}
body.light-mode {
  background: #f4f8ff !important;
  color: #102033 !important;
}
body.light-mode p,
body.light-mode span,
body.light-mode label,
body.light-mode small,
body.light-mode td,
body.light-mode th,
body.light-mode div {
  color: inherit;
}
body.light-mode .dim,
body.light-mode .beam-muted,
body.light-mode .muted-bar,
body.light-mode small,
body.light-mode .subtitle-row p,
body.light-mode #struct-box-info {
  color: #425a78 !important;
}
body.light-mode .hdr,
body.light-mode .bimora-hero,
body.light-mode #app,
body.light-mode #tabs,
body.light-mode #file-bar,
body.light-mode .merged-card,
body.light-mode .structural-controls,
body.light-mode #struct-box-bar,
body.light-mode .struct-card,
body.light-mode .overall-confidence-panel,
body.light-mode .bimora-footer {
  background: #ffffff !important;
  color: #102033 !important;
  border-color: #c9d9ee !important;
}
body.light-mode input,
body.light-mode select,
body.light-mode textarea,
body.light-mode .beam-edit,
body.light-mode #s-cover {
  background: #ffffff !important;
  color: #102033 !important;
  border-color: #9eb3ce !important;
}
body.light-mode input::placeholder,
body.light-mode textarea::placeholder {
  color: #5b708e !important;
}
body.light-mode .action-btn,
body.light-mode .nav-btn,
body.light-mode .export-btn {
  background: #eef5ff !important;
  color: #12385f !important;
  border-color: #9ebfe8 !important;
}
body.light-mode .action-btn:hover,
body.light-mode .nav-btn:hover:not(:disabled),
body.light-mode .export-btn:hover {
  background: #2563eb !important;
  color: #ffffff !important;
}
body.light-mode .theme-toggle-btn {
  background: linear-gradient(135deg,#0f172a,#475569) !important;
  color: #ffffff !important;
}
body.dark-mode .theme-toggle-btn {
  background: linear-gradient(135deg,#dbeafe,#93c5fd) !important;
  color: #0f172a !important;
}

/* v22 cleanup: one export pair, stable cover dropdown, no detection controls */
.structural-controls #btn-export-csv,
.structural-controls #btn-export-json { display:none !important; }
.detection-method-control,
#detection-method-select,
#detection-compare-panel,
.detection-compare-panel { display:none !important; }
.design-control.cover-single-control .cover-control-wrap,
.cover-single-control .cover-control-wrap.single-cover-box {
  display:block !important;
  background:transparent !important;
  border:0 !important;
  box-shadow:none !important;
  padding:0 !important;
  min-width:0 !important;
  height:auto !important;
  overflow:visible !important;
}
.cover-single-control .cover-control-wrap::after { content:none !important; display:none !important; }
#s-cover.design-select {
  min-width:88px !important;
  width:88px !important;
  height:34px !important;
  padding:.45rem .65rem !important;
  border-radius:10px !important;
  font-weight:500 !important;
  text-align:left !important;
  appearance:auto !important;
}
#s-cover.design-select option { font-weight:400 !important; }
body.light-mode #s-cover.design-select { color:#0f172a !important; background:#fff !important; }
.tonnage-head-v22{display:flex;align-items:center;justify-content:space-between;gap:.8rem;flex-wrap:wrap;margin-bottom:.65rem;}
.tonnage-actions-v22{display:flex;gap:.65rem;align-items:center;justify-content:flex-end;flex-wrap:wrap;}
.export-btn-v22{border:0;border-radius:12px;padding:.62rem .95rem;cursor:pointer;font-weight:700;background:linear-gradient(135deg,#2563eb,#60a5fa);color:#fff;box-shadow:0 8px 20px rgba(37,99,235,.25);}
.export-btn-v22.secondary{background:linear-gradient(135deg,#334155,#64748b);}