/* =========================================================================
   Gallery & Launch — layout exploration styles (uses tokens from styles.css)
   ========================================================================= */
.opt { background: var(--bg); background-image: var(--bg-grad); color: var(--t1);
  font-family: var(--sans); padding: 30px 32px; }
.opt-tabs { display:flex; gap:4px; border-bottom:1px solid var(--line); margin-bottom:22px; }
.opt-tab { font-size:14px; font-weight:500; color:var(--t3); padding:9px 15px 12px; position:relative; }
.opt-tab.on { color:var(--t1); }
.opt-tab.on::after{content:"";position:absolute;left:10px;right:10px;bottom:-1px;height:2px;background:var(--acc);border-radius:2px;}

/* ---- A · Model Shelves ---- */
.shelf { margin-bottom: 30px; }
.shelf:last-child { margin-bottom: 0; }
.shelf-head { display:flex; align-items:center; gap:14px; padding-bottom:13px; border-bottom:1px solid var(--line); margin-bottom:18px; }
.shelf-swatch { width:34px; height:34px; border-radius:9px; flex:none; border:1px solid var(--line-2); }
.shelf-titles { flex:none; }
.shelf-title { font-family:var(--serif); font-size:23px; font-weight:600; letter-spacing:-0.01em; white-space:nowrap; }
.shelf-sqft { font-family:var(--mono); font-size:11.5px; color:var(--t3); margin-top:1px; }
.shelf-spacer { flex:1; }
.shelf-count { font-family:var(--mono); font-size:11px; color:var(--t2); background:var(--panel-2); border:1px solid var(--line); border-radius:100px; padding:4px 11px; }
.shelf-selectall { font-size:12.5px; color:var(--acc); background:var(--acc-soft); border:1px solid var(--acc-line); border-radius:100px; padding:5px 13px; cursor:pointer; font-weight:500; }
.shelf-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:16px; }

/* ---- B · Studio List ---- */
.studio { display:grid; grid-template-columns: 210px 1fr; gap:22px; align-items:start; }
.studio-rail { position:sticky; top:0; }
.rail-group { margin-bottom:20px; }
.rail-label { font-family:var(--mono); font-size:10px; letter-spacing:0.16em; text-transform:uppercase; color:var(--t3); margin-bottom:9px; }
.rail-item { display:flex; align-items:center; justify-content:space-between; gap:8px; font-size:13.5px; color:var(--t2); padding:7px 10px; border-radius:8px; cursor:pointer; }
.rail-item:hover { background:rgba(27,23,19,0.04); }
.rail-item.on { background:var(--acc-soft); color:var(--acc); font-weight:500; }
.rail-item .n { font-family:var(--mono); font-size:11px; color:var(--t3); }
.rail-item.on .n { color:var(--acc); }
.list-bar { display:flex; align-items:center; justify-content:space-between; margin-bottom:14px; }
.lrow { display:grid; grid-template-columns: 26px 132px 1fr 150px 132px 96px; align-items:center; gap:18px;
  padding:12px 14px; background:var(--card); border:1px solid var(--line); border-radius:12px; margin-bottom:9px; transition:140ms; }
.lrow:hover { border-color:var(--line-2); box-shadow:0 10px 24px -20px rgba(27,23,19,0.3); }
.lrow.sel { border-color:var(--acc); box-shadow:0 0 0 1px var(--acc); }
.lthumb { position:relative; width:132px; height:80px; border-radius:9px; overflow:hidden; border:1px solid var(--line); }
.lthumb .ph-grad { position:absolute; inset:0; }
.lthumb .lfmt { position:absolute; left:6px; bottom:6px; font-family:var(--mono); font-size:9.5px; color:var(--t1); background:rgba(252,251,248,0.9); border-radius:5px; padding:1px 6px; white-space:nowrap; }
.lhead { font-family:var(--serif); font-size:16px; font-weight:600; line-height:1.2; }
.lmeta { font-family:var(--mono); font-size:10.5px; color:var(--t3); margin-top:3px; }
.lprimary { font-size:12px; color:var(--t2); margin-top:5px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.lmetric { font-family:var(--mono); font-size:12px; color:var(--t2); display:flex; flex-direction:column; gap:2px; }
.lmetric .over { color:var(--bad); } .lmetric .under { color:var(--ok); }
.lactions { display:flex; gap:6px; justify-content:flex-end; }

/* ---- C · Spotlight ---- */
.spot-hero { display:grid; grid-template-columns: 380px 1fr; gap:0; background:var(--card); border:1px solid var(--line);
  border-radius:18px; overflow:hidden; margin-bottom:24px; box-shadow:var(--shadow); }
.spot-media { position:relative; min-height:380px; }
.spot-media .ph-grad{position:absolute;inset:0;}
.spot-media .badge-wrap{position:absolute;top:16px;left:16px;display:flex;gap:8px;}
.spot-body { padding:30px 34px; display:flex; flex-direction:column; }
.spot-eyebrow { font-family:var(--mono); font-size:11px; letter-spacing:0.16em; text-transform:uppercase; color:var(--acc); }
.spot-head { font-family:var(--serif); font-size:34px; font-weight:600; line-height:1.05; letter-spacing:-0.02em; margin:12px 0 14px; }
.spot-primary { font-size:15px; color:var(--t2); line-height:1.55; max-width:46ch; }
.spot-stats { display:flex; gap:38px; margin:22px 0; padding:18px 0; border-top:1px solid var(--line); border-bottom:1px solid var(--line); flex-wrap:wrap; }
.spot-stat { flex:none; }
.spot-stat .v { font-family:var(--serif); font-size:24px; font-weight:600; white-space:nowrap; }
.spot-stat .l { font-family:var(--mono); font-size:10px; letter-spacing:0.1em; text-transform:uppercase; color:var(--t3); margin-top:3px; }
.spot-cta { display:flex; gap:12px; align-items:center; margin-top:auto; }
.spot-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
.spot-sub-h { font-family:var(--serif); font-size:19px; font-weight:600; margin-bottom:14px; }

/* ---- D · Launch Board ---- */
.board { display:grid; grid-template-columns: 1fr 1fr 1fr 300px; gap:16px; align-items:start; }
.bcol { background:var(--panel-2); border:1px solid var(--line); border-radius:14px; padding:13px; }
.bcol-head { display:flex; align-items:center; gap:8px; margin-bottom:13px; padding:0 3px; }
.bcol-dot { width:8px; height:8px; border-radius:50%; }
.bcol-title { font-size:13px; font-weight:600; white-space:nowrap; }
.bcol-n { font-family:var(--mono); font-size:11px; color:var(--t3); margin-left:auto; }
.btile { background:var(--card); border:1px solid var(--line); border-radius:11px; overflow:hidden; margin-bottom:10px; cursor:pointer; transition:140ms; }
.btile:hover { border-color:var(--line-2); transform:translateY(-1px); }
.btile.sel { border-color:var(--acc); box-shadow:0 0 0 1px var(--acc); }
.btile-media { position:relative; height:96px; }
.btile-media .ph-grad{position:absolute;inset:0;}
.btile-media .badge{position:absolute;top:8px;left:8px;transform:scale(0.86);transform-origin:left top;}
.btile-body { padding:9px 11px 11px; }
.btile-head { font-size:13px; font-weight:600; line-height:1.25; }
.btile-meta { font-family:var(--mono); font-size:9.5px; color:var(--t3); margin-top:4px; }
.tray { position:sticky; top:0; background:var(--t1); color:#f4f1ea; border-radius:14px; padding:18px; }
.tray-h { font-family:var(--serif); font-size:19px; font-weight:600; color:#fff; }
.tray-safety { display:flex; gap:10px; align-items:flex-start; background:rgba(255,255,255,0.06); border:1px solid rgba(255,255,255,0.12); border-radius:10px; padding:11px 12px; margin:14px 0; }
.tray-lock { color:#7fd6a3; flex:none; margin-top:1px; }
.tray-safety-t { font-size:12.5px; color:#fff; } .tray-safety-t b{color:#7fd6a3;}
.tray-safety-s { font-size:11px; color:#b9b3a6; margin-top:2px; }
.tray-list { display:flex; flex-direction:column; gap:7px; margin-bottom:14px; max-height:230px; overflow:auto; }
.tray-item { display:flex; align-items:center; gap:9px; font-size:12px; color:#e7e2d7; background:rgba(255,255,255,0.05); border-radius:8px; padding:7px 9px; }
.tray-item .ti-thumb{width:30px;height:30px;border-radius:6px;flex:none;}
.tray-empty { font-size:12.5px; color:#9a9488; padding:18px 4px; text-align:center; }
.tray-launch { width:100%; justify-content:center; }