@import url("../css/project-theme-core.css");

:root {
  --project-bg: #171019;
  --project-bg-alt: #43205f;
  --project-surface: rgba(255, 255, 255, .055);
  --project-surface-strong: #25152e;
  --project-text: #f7f4eb;
  --project-text-muted: rgba(247, 244, 235, .62);
  --project-accent: #a77aff;
  --project-accent-secondary: #925ee4;
  --project-warning: #c8ff55;
  --project-error: #ff6b86;
  --project-border: rgba(255, 255, 255, .18);
  --project-radius: 25px;
  --project-shadow: 0 36px 100px rgba(5, 2, 8, .64);
  --project-glow: 0 0 80px rgba(146, 94, 228, .17);
  --project-font: "Helvetica Neue", Helvetica, Arial, sans-serif;
  --project-font-mono: ui-monospace, SFMono-Regular, Menlo, monospace;
  --project-grid: 64px;
  --project-noise: .045;
  --project-transition: 320ms cubic-bezier(.2, .75, .2, 1);
  --vtm-paper: var(--project-text);
  --vtm-ink: var(--project-text);
  --vtm-muted: var(--project-text-muted);
  --vtm-line: var(--project-border);
  --vtm-signal: var(--project-accent);
  --vtm-blue: var(--project-accent-secondary);
}

body.vtm-room {
  --ink: var(--vtm-ink);
  --muted: var(--vtm-muted);
  --line: var(--vtm-line);
  --accent: var(--vtm-signal);
  color-scheme: dark;
  color: var(--vtm-ink);
  background:
    radial-gradient(circle at var(--cursor-x, 65%) var(--cursor-y, 28%), rgba(167,122,255,.14), transparent 22rem),
    linear-gradient(rgba(255,255,255,.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.025) 1px, transparent 1px),
    radial-gradient(circle at 65% 28%, #925ee4 0%, #43205f 29%, #171019 72%);
  background-size: auto, var(--project-grid) var(--project-grid), var(--project-grid) var(--project-grid), auto;
  font-family: var(--project-font);
}

body.vtm-room::after { opacity: var(--project-noise); }
.vtm-room .room { align-items: stretch; padding: clamp(.75rem, 2vw, 1.5rem); }
.vtm-room .room::before { inset: clamp(.75rem, 2vw, 1.5rem); border-color: var(--vtm-line); border-radius: calc(var(--project-radius) + 9px); background: rgba(10,5,13,.18); box-shadow: inset 0 0 100px rgba(0,0,0,.19), var(--project-shadow); }
.vtm-room .room-id,.vtm-room .coordinate { color: var(--vtm-muted); font-family:var(--project-font-mono); }

.vtm-shell { position:relative; z-index:1; display:grid; grid-template-rows:auto 1fr auto; width:min(100%,86rem); min-height:calc(100dvh - clamp(1.5rem,4vw,3rem)); margin:auto; margin-top:3.3rem; overflow:hidden; border:1px solid var(--project-border); border-radius:var(--project-radius); background:rgba(10,5,13,.3); box-shadow:var(--project-shadow); animation:vtm-room-enter .55s cubic-bezier(.2,.75,.2,1) both; }
.vtm-system-bar { display:flex; align-items:center; justify-content:space-between; gap:1rem; padding:.8rem 1rem; border-block:1px solid var(--vtm-line); color:var(--vtm-muted); font:700 .72rem/1.4 var(--project-font-mono); letter-spacing:.14em; text-transform:uppercase; }
.vtm-system-bar > span { padding:.42rem .65rem; border:1px solid var(--project-border); border-radius:999px; color:var(--vtm-ink); }
.vtm-exit { color:var(--vtm-ink); text-underline-offset:.32rem; }
.vtm-stage { display:grid; grid-template-columns:minmax(0,1.15fr) minmax(17rem,.65fr); gap:clamp(1rem,3vw,3rem); align-items:center; padding:clamp(2rem,6vw,6rem) clamp(1rem,4vw,4rem); perspective:1200px; }
.vtm-stage.single { grid-template-columns:1fr; text-align:center; }
[data-room="vtm-entry"] .vtm-stage { position:relative; overflow:hidden; }
[data-room="vtm-entry"] .vtm-stage::before { position:absolute; right:5%; top:50%; content:"V"; color:rgba(167,122,255,.28); font:400 clamp(18rem,42vw,36rem)/.7 Georgia,serif; transform:translateY(-50%) rotate(-8deg); pointer-events:none; }
[data-room="vtm-entry"] .vtm-stage > * { position:relative; z-index:1; }
.vtm-kicker { margin:0 0 1rem; color:var(--vtm-signal); font:800 .76rem/1.3 var(--project-font-mono); letter-spacing:.22em; text-transform:uppercase; }
.vtm-title { margin:0; font:800 clamp(3rem,10vw,8rem)/.86 var(--project-font); letter-spacing:-.075em; text-transform:uppercase; }
.vtm-subtitle { max-width:40rem; margin:1.4rem 0 0; color:var(--vtm-muted); font:400 clamp(1rem,2vw,1.35rem)/1.55 var(--project-font); }
.vtm-feature-tags { display:flex; flex-wrap:wrap; gap:.45rem; margin-top:1.5rem; }
.vtm-feature-tags span { padding:.5rem .7rem; border:1px solid var(--project-border); border-radius:999px; background:rgba(255,255,255,.055); color:#d8d2e6; font:800 .68rem/1 var(--project-font-mono); letter-spacing:.08em; text-transform:uppercase; }
.vtm-door { display:grid; place-items:center; min-height:16rem; padding:1.4rem; border:1px solid var(--vtm-line); border-radius:100px 100px var(--project-radius) var(--project-radius); background:linear-gradient(145deg,rgba(255,255,255,.095),rgba(23,16,25,.72)); box-shadow:var(--project-shadow),var(--project-glow); color:inherit; text-align:center; text-decoration:none; transform:rotateY(-3deg); transition:transform var(--project-transition),border-color var(--project-transition),box-shadow var(--project-transition),background var(--project-transition); }
.vtm-door:hover,.vtm-door:focus-visible { outline:0; border-color:var(--vtm-signal); background:linear-gradient(145deg,rgba(167,122,255,.2),rgba(23,16,25,.74)); box-shadow:0 26px 75px rgba(5,2,8,.62),0 0 55px rgba(167,122,255,.18); transform:rotateY(0) translateY(-.25rem); }
.vtm-door strong { display:block; margin-bottom:.75rem; font-size:1rem; letter-spacing:.12em; }
.vtm-door span { color:var(--vtm-muted); font-size:.75rem; letter-spacing:.14em; }
.vtm-door.engine-hidden { display:none; }
.vtm-room [data-door-type="conditional-door"].vtm-door { border-color:rgba(167,122,255,.55); }
.vtm-room [data-door-type="hidden-door"].vtm-door { border-color:var(--project-warning); background:linear-gradient(145deg,rgba(200,255,85,.1),rgba(23,16,25,.78)); box-shadow:0 28px 80px rgba(5,2,8,.62),0 0 55px rgba(200,255,85,.1); }
.vtm-room [data-door-type="memory-door"].vtm-door { border-style:dashed; border-color:rgba(167,122,255,.7); }
.vtm-footer { display:flex; justify-content:space-between; gap:1rem; padding:.8rem 1rem; border-top:1px solid var(--vtm-line); color:var(--vtm-muted); font:700 .7rem/1.4 var(--project-font-mono); letter-spacing:.14em; text-transform:uppercase; }
.vtm-button { min-height:3rem; padding:.85rem 1.25rem; border:1px solid var(--project-warning); border-radius:999px; background:var(--project-warning); color:#171019; cursor:pointer; font:800 .78rem/1 var(--project-font-mono); letter-spacing:.12em; text-transform:uppercase; transition:transform var(--project-transition),box-shadow var(--project-transition); }
.vtm-button:hover,.vtm-button:focus-visible { outline:0; transform:translateY(-2px); box-shadow:0 12px 35px rgba(200,255,85,.16); }
.vtm-button:disabled { cursor:progress; opacity:.68; }

.scan-stage { grid-template-columns:minmax(17rem,.9fr) minmax(18rem,.7fr); }
.garment-bay { position:relative; display:grid; place-items:center; min-height:min(62dvh,38rem); overflow:hidden; border:1px solid var(--vtm-line); border-radius:var(--project-radius); background:radial-gradient(circle at 50% 42%,rgba(146,94,228,.24),transparent 38%),rgba(10,5,13,.36); box-shadow:inset 0 0 0 1.2rem rgba(255,255,255,.025),var(--project-glow); }
.garment-bay::before { position:absolute; inset:8%; content:""; border:1px dashed rgba(167,122,255,.5); border-radius:calc(var(--project-radius) - 8px); }
.garment-bay::after { position:absolute; top:8%; bottom:8%; left:50%; width:1px; content:""; background:rgba(167,122,255,.22); }
.garment { position:relative; z-index:1; width:min(48vw,18rem); aspect-ratio:.78; background:linear-gradient(135deg,#27232b,#09090a); clip-path:polygon(26% 5%,40% 0,47% 12%,53% 12%,60% 0,74% 5%,100% 30%,85% 45%,76% 35%,78% 100%,22% 100%,24% 35%,15% 45%,0 30%); filter:drop-shadow(0 1.5rem 1.2rem rgba(0,0,0,.5)); }
.garment::after { position:absolute; inset:10% 47% 0; content:""; background:rgba(255,255,255,.14); }
.scan-line { position:absolute; z-index:2; top:8%; left:8%; right:8%; height:2px; background:var(--vtm-signal); opacity:.75; transform:translateY(0); }
.sequence-running .scan-line { animation:vtm-scan 1.8s linear 1; }
.measure { position:absolute; z-index:3; padding:.45rem .65rem; border:1px solid rgba(167,122,255,.4); border-radius:999px; background:rgba(23,16,25,.84); color:#d8c3ff; font:700 .68rem/1.2 var(--project-font-mono); letter-spacing:.1em; }
.measure-a { top:16%; left:5%; }.measure-b { right:4%; top:45%; }.measure-c { bottom:10%; left:8%; }
.scan-console { display:flex; flex-direction:column; gap:1.2rem; }
.object-meta { display:grid; grid-template-columns:1fr auto; gap:.65rem 1rem; margin:0; padding:1.1rem; border:1px solid var(--vtm-line); border-radius:var(--project-radius); background:rgba(255,255,255,.045); font-family:var(--project-font-mono); }
.object-meta dt { color:var(--vtm-muted); }.object-meta dd { margin:0; font-weight:700; }
.scan-steps { display:grid; gap:.4rem; margin:0; padding:0; list-style:none; }
.scan-steps li { padding:.55rem 0; border-bottom:1px solid var(--vtm-line); color:rgba(247,244,235,.34); font:700 .75rem/1.3 var(--project-font-mono); letter-spacing:.12em; }
.scan-steps li.is-active { color:var(--project-warning); }.scan-steps li.is-complete { color:var(--vtm-ink); }
.project-message { min-height:2.6rem; color:var(--vtm-signal); font:700 .76rem/1.45 var(--project-font-mono); letter-spacing:.11em; text-transform:uppercase; }

.valuation-orbit { position:relative; min-height:min(64dvh,40rem); border:1px solid var(--vtm-line); border-radius:var(--project-radius); background:radial-gradient(circle at center,rgba(146,94,228,.28),transparent 38%),rgba(10,5,13,.27); box-shadow:var(--project-glow); }
.price-core { position:absolute; inset:50% auto auto 50%; z-index:2; transform:translate(-50%,-50%); text-align:center; }
.price-core span { display:block; color:var(--vtm-muted); font:700 .72rem/1.4 var(--project-font-mono); letter-spacing:.14em; }.price-core strong { display:block; font:800 clamp(5rem,15vw,10rem)/.9 var(--project-font); letter-spacing:-.08em; }
.factor { position:absolute; width:clamp(8.5rem,18vw,13rem); min-height:6.5rem; padding:1rem; border:1px solid var(--vtm-line); border-radius:calc(var(--project-radius) - 7px); background:rgba(37,21,46,.88); box-shadow:0 18px 45px rgba(5,2,8,.25); text-align:left; }
button.factor { color:inherit; cursor:pointer; }.factor:hover,.factor:focus-visible,.factor.is-discovered { outline:0; border-color:var(--vtm-signal); }
.factor strong,.factor span { display:block; }.factor strong { margin-top:1rem; font-size:1.5rem; }.factor span { color:var(--vtm-muted); font:700 .7rem/1.3 var(--project-font-mono); letter-spacing:.1em; }
.factor-1 { top:8%; left:5%; }.factor-2 { top:10%; right:5%; }.factor-3 { bottom:8%; left:8%; }.factor-4 { right:7%; bottom:7%; }

.market-field { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:clamp(.6rem,2vw,1.4rem); align-items:end; min-height:min(61dvh,38rem); padding:1rem; border:1px solid var(--vtm-line); border-radius:var(--project-radius); background:rgba(10,5,13,.27); perspective:1000px; }
.market-column { display:flex; flex-direction:column; justify-content:space-between; min-height:var(--h); padding:1rem; border:1px solid var(--vtm-line); border-radius:calc(var(--project-radius) - 7px); background:linear-gradient(to top,rgba(146,94,228,.2),rgba(255,255,255,.065)); transform:rotateX(2deg); transition:transform var(--project-transition),border-color var(--project-transition); }
.market-column:hover { border-color:var(--vtm-signal); transform:rotateX(0) translateY(-.25rem); }
.market-column strong { font:800 clamp(1.7rem,5vw,3.8rem)/1 var(--project-font); letter-spacing:-.05em; }.market-column span { color:var(--vtm-muted); font:700 .68rem/1.3 var(--project-font-mono); letter-spacing:.12em; }
.market-column.sold { border-color:var(--vtm-blue); }.market-column.high { border-color:var(--project-warning); }
.market-signal { justify-self:center; margin-top:1.2rem; }

.dressing-wall { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:1rem; width:100%; }
.archive-item { min-height:17rem; padding:1.1rem; border:1px solid var(--vtm-line); border-radius:var(--project-radius); background:rgba(255,255,255,.055); box-shadow:0 18px 45px rgba(5,2,8,.24); }
.archive-item::before { display:block; height:8rem; margin-bottom:1.2rem; content:""; background:linear-gradient(135deg,#37393b,#171819); clip-path:polygon(20% 0,80% 0,100% 28%,82% 45%,76% 100%,24% 100%,18% 45%,0 28%); opacity:var(--item-opacity,1); }
.archive-item strong,.archive-item span { display:block; }.archive-item strong { font-family:var(--project-font-mono); }.archive-item span { margin-top:.65rem; color:var(--vtm-muted); font:700 .72rem/1.3 var(--project-font-mono); letter-spacing:.12em; }
.archive-item.inactive { --item-opacity:.28; }.archive-item.sold::before { background:linear-gradient(135deg,#925ee4,#43205f); }
.secret-threshold { margin-top:2rem; padding-top:2rem; border-top:1px solid var(--vtm-line); }

.pipeline { display:grid; grid-template-columns:repeat(7,minmax(6rem,1fr)); align-items:center; gap:.65rem; width:100%; overflow-x:auto; padding:2rem .5rem; }
.pipeline-step { position:relative; display:grid; place-items:center; min-height:9rem; padding:.8rem; border:1px solid var(--vtm-line); border-radius:calc(var(--project-radius) - 7px); background:rgba(255,255,255,.06); font:700 .72rem/1.3 var(--project-font-mono); letter-spacing:.11em; text-align:center; }
.pipeline-step:not(:last-child)::after { position:absolute; left:100%; width:.65rem; content:"→"; color:var(--vtm-signal); text-align:center; }
.machine-copy { max-width:50rem; margin:2rem auto; font:400 clamp(1.3rem,3vw,2rem)/1.5 Georgia,serif; }
.project-complete .pipeline-step { border-color:rgba(200,255,85,.35); }

@keyframes vtm-scan { from { transform:translateY(0); } to { transform:translateY(calc(min(62dvh,38rem) - 6.5rem)); } }
@keyframes vtm-room-enter { from { opacity:0; transform:translateY(.7rem) scale(.995); } to { opacity:1; transform:none; } }

@media (max-width:760px) {
  .vtm-shell { margin-top:3.6rem; }
  .vtm-stage,.scan-stage { grid-template-columns:1fr; padding:4.5rem 1rem 2rem; }
  .vtm-system-bar { align-items:flex-start; flex-direction:column; }
  .vtm-system-bar > * { min-height:2.75rem; display:inline-flex; align-items:center; }
  .garment-bay { min-height:26rem; }.garment { width:12rem; }
  .valuation-orbit { min-height:38rem; }.price-core { top:45%; }
  .factor { width:8.5rem; }.factor-1{left:2%;}.factor-2{right:2%;}.factor-3{left:3%;}.factor-4{right:3%;}
  .market-field { grid-template-columns:repeat(2,1fr); align-items:end; }.market-column { min-height:calc(var(--h) * .62); }
  .dressing-wall { grid-template-columns:repeat(2,1fr); }.archive-item { min-height:14rem; }
  .pipeline { grid-template-columns:repeat(7,7.5rem); }
}

@media (max-width:420px) {
  .dressing-wall { grid-template-columns:1fr 1fr; gap:.6rem; }.archive-item { padding:.8rem; }.archive-item::before{height:6rem;}
}

/* PUBLIC DNA: cream editorial surface, plum identity, violet AI signal. */
body.vtm-room {
  --project-bg:#f7f2e9;--project-bg-alt:#eee3d7;--project-surface:rgba(74,23,56,.045);--project-surface-strong:#fffdf8;
  --project-text:#211b20;--project-text-muted:#776e74;--project-accent:#7750d7;--project-accent-secondary:#4a1738;
  --project-warning:#b9db3d;--project-border:#ded5cb;--project-shadow:0 34px 90px rgba(74,23,56,.13);--project-glow:0 0 70px rgba(119,80,215,.1);
  --vtm-paper:#fffdf8;--vtm-ink:#211b20;--vtm-muted:#776e74;--vtm-line:#ded5cb;--vtm-signal:#7750d7;--vtm-blue:#4a1738;
  color-scheme:light;
  background:radial-gradient(circle at var(--cursor-x,65%) var(--cursor-y,28%),rgba(119,80,215,.12),transparent 22rem),linear-gradient(rgba(74,23,56,.028) 1px,transparent 1px),linear-gradient(90deg,rgba(74,23,56,.028) 1px,transparent 1px),radial-gradient(circle at 65% 28%,#fffde8 0%,#f4eadf 42%,#f7f2e9 78%);
}
.vtm-room .room::before,.vtm-shell { background:rgba(255,253,248,.72); }
.vtm-feature-tags span,.scan-steps li.is-complete { color:#4a1738; }
.vtm-door { background:linear-gradient(145deg,#fffdf8,#eee3d7); }
.vtm-door:hover,.vtm-door:focus-visible { background:linear-gradient(145deg,rgba(119,80,215,.14),#fffdf8); box-shadow:0 26px 75px rgba(74,23,56,.13),0 0 55px rgba(119,80,215,.14); }
.garment-bay,.valuation-orbit,.market-field { background:radial-gradient(circle at 50% 42%,rgba(119,80,215,.12),transparent 40%),rgba(255,253,248,.76); }
.measure { background:#fffdf8; color:#4a1738; }
.factor,.object-meta,.archive-item,.pipeline-step { background:rgba(255,253,248,.88); }
.market-column { background:linear-gradient(to top,rgba(119,80,215,.13),rgba(255,253,248,.92)); }