/* Orion web picker — dark UI, OpenSeadragon viewer + drag-to-rect. */
* { box-sizing: border-box; }
body { margin: 0; font-family: -apple-system, "Segoe UI", sans-serif;
       background: #0f1115; color: #e6e9ef; }
a { color: #60a5fa; }
header { padding: 12px 18px; background: #161a23; border-bottom: 1px solid #232838;
         display: flex; flex-wrap: wrap; gap: 14px; align-items: center; }
header h1 { margin: 0; font-size: 18px; font-weight: 600; }
header .subtitle { margin: 0; color: #9ba2b3; flex-basis: 100%; font-size: 13px; }
.back { color: #60a5fa; text-decoration: none; font-size: 13px; }
.controls { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.status { color: #9ba2b3; font-size: 12px; }
.counts { color: #cbd2e0; font-size: 13px; margin-left: 12px; }
footer { padding: 12px 18px; color: #6b7385; font-size: 12px; }

.index-grid { display: grid; gap: 16px; padding: 24px;
              grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }
.marker-tile { display: block; padding: 22px; border-radius: 10px;
               background: #1b2030; border: 1px solid #2a3045;
               text-decoration: none; color: inherit; transition: transform .1s; }
.marker-tile:hover { transform: translateY(-2px); border-color: #4a5170; }
.marker-name { font-size: 26px; font-weight: 700; margin-bottom: 8px; letter-spacing: 0.5px; }
.marker-counts { display: flex; gap: 10px; font-size: 13px; }
.marker-counts .done { color: #34d399; }
.marker-counts .short { color: #f59e0b; }
.marker-FN1    .marker-name { color: #00ff00; }
.marker-NOTCH3 .marker-name { color: #66b3ff; }
.marker-VEGFR3 .marker-name { color: #fff200; }
.marker-GFAP   .marker-name { color: #00ffff; }
.marker-AT8    .marker-name { color: #ff3333; }

.counts-pill { font-size: 12px; padding: 3px 9px; border-radius: 12px; margin-left: 8px; }
.cad-done, .ctl-done { background: #064e3b; color: #6ee7b7; }
.cad-short, .ctl-short { background: #4d2900; color: #f59e0b; }

.sample-table { width: 100%; border-collapse: collapse; }
.sample-table th, .sample-table td { padding: 8px 14px; text-align: left; font-size: 13px;
                                      border-bottom: 1px solid #232838; }
.sample-table .r { text-align: right; font-variant-numeric: tabular-nums; }
.sample-table tr.cond-CAD td.cond { color: #f4d03f; font-weight: 600; }
.sample-table tr.cond-CTL td.cond { color: #5dade2; font-weight: 600; }
.sample-table tr.cond-AD  td.cond { color: #c084fc; }
.sample-table tr.cond-PSP td.cond { color: #a78bfa; }

.btn { background: #232838; color: #e6e9ef; border: 1px solid #2a3045;
       padding: 5px 14px; border-radius: 5px; cursor: pointer; font-size: 13px;
       text-decoration: none; display: inline-block; }
.btn:hover { background: #2a3045; }
.btn.primary { background: #2563eb; border-color: #1e40af; color: white; }
.btn.primary:hover { background: #1d4ed8; }
.btn.active { background: #047857; border-color: #064e3b; color: white; }
.btn.danger { background: #b91c1c; border-color: #7f1d1d; }
.muted { color: #6b7385; }

.view-page header { position: sticky; top: 0; z-index: 10; }
.view-layout { display: grid; grid-template-columns: 1fr 280px;
               height: calc(100vh - 80px); }
.osd { background: #000; position: relative; }
.picks-pane { background: #161a23; border-left: 1px solid #232838; padding: 14px;
              overflow-y: auto; }
.picks-pane h2 { font-size: 14px; margin: 0 0 10px 0; color: #cbd2e0; }
.pick-card { background: #1b2030; border: 1px solid #2a3045; border-radius: 6px;
             padding: 8px; margin-bottom: 10px; }
.pick-card .meta { font-size: 11px; color: #9ba2b3; margin: 0 0 6px 0;
                   font-variant-numeric: tabular-nums; }
.pick-card .actions { display: flex; gap: 6px; font-size: 11px; align-items: center; }

.gate { max-width: 400px; margin: 80px auto; padding: 24px; background: #1b2030;
        border: 1px solid #2a3045; border-radius: 10px; }
.gate input { width: 100%; padding: 8px; margin: 8px 0 14px 0; font-size: 14px;
              background: #0f1115; color: #e6e9ef; border: 1px solid #2a3045;
              border-radius: 5px; }