:root {
  --ink: #b8a6f5;
  --muted: #959599;
  --line: rgba(255,255,255,.09);
  --panel: #0c0c0e;
  --panel-2: #0c0c0e;
  --bg: #000000;
  --blue: #5d3fd3;
  --blue-2: #b8a6f5;
  --green: #4fdb9d;
  --red: #ff7188;
  --orange: #ffb968;
  --radius: 14px;
}

* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; background: var(--bg); color: var(--ink); font-family: Inter, system-ui, sans-serif; }
body { overflow: hidden; }
button, input, select { font: inherit; }
button { color: inherit; }

.app-shell { display: grid; grid-template-columns: 228px minmax(460px, 1fr) 336px; grid-template-rows: 64px calc(100vh - 64px); min-height: 100vh; }
.topbar { grid-column: 1 / -1; display: grid; grid-template-columns: 228px 1fr auto; align-items: center; border-bottom: 1px solid var(--line); background: rgba(0,0,0,.96); position: relative; z-index: 20; }
.brand { height: 64px; padding: 0 20px; display: flex; align-items: center; gap: 10px; color: white; text-decoration: none; border-right: 1px solid var(--line); font: 700 18px Outfit, sans-serif; }
.brand img { width: 29px; height: 29px; border-radius: 8px; object-fit: cover; }
.brand span { display: flex; align-items: baseline; gap: 7px; }
.brand small { color: var(--blue-2); font: 600 10px Inter, sans-serif; letter-spacing: .12em; text-transform: uppercase; }
.project-title { min-width: 0; padding-left: 24px; display: flex; align-items: center; gap: 8px; color: var(--muted); font-size: 11px; }
.save-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--green); box-shadow: 0 0 10px var(--green); }
.project-name { max-width: 250px; padding: 4px 5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; background: none; border: 0; color: #e7e7eb; font-size: 12px; font-weight: 600; cursor: text; }
.top-actions { display: flex; align-items: center; gap: 8px; padding-right: 16px; }
.btn { border: 0; border-radius: 9px; min-height: 38px; padding: 0 14px; font-size: 12px; font-weight: 700; cursor: pointer; transition: .2s ease; }
.btn:hover { transform: translateY(-1px); }
.btn-ghost { border: 1px solid var(--line); background: rgba(255,255,255,.025); }
.btn-primary { color: white; background: linear-gradient(135deg, #5d3fd3, #5d3fd3); box-shadow: 0 8px 22px rgba(93,63,211,.25); }
.back-apps { display: inline-flex; align-items: center; justify-content: center; color: var(--ink); text-decoration: none; }
#exportBtn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; line-height: 1; }
.download-icon { display: inline-flex; align-items: center; justify-content: center; font-size: 17px; line-height: 1; }
.icon-btn { background: transparent; border: 1px solid var(--line); border-radius: 8px; height: 36px; width: 36px; }
.mobile-only { display: none; }

.sidebar { grid-column: 1; grid-row: 2; border-right: 1px solid var(--line); background: #000000; padding: 24px 14px; overflow-y: auto; }
.side-label, .eyebrow { display: block; color: #78787c; font-size: 9px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; }
.side-label { margin: 0 9px 11px; }
.screen-nav { display: grid; gap: 5px; }
.screen-tab { width: 100%; padding: 10px; display: flex; align-items: center; gap: 11px; border: 1px solid transparent; border-radius: 10px; background: transparent; text-align: left; cursor: pointer; transition: .18s; }
.screen-tab:hover { background: rgba(255,255,255,.035); }
.screen-tab.active { border-color: rgba(184,166,245,.25); background: linear-gradient(110deg, rgba(93,63,211,.18), rgba(93,63,211,.05)); }
.screen-icon { display: grid; place-items: center; width: 31px; height: 31px; flex: 0 0 31px; border-radius: 8px; color: #ababaf; background: rgba(255,255,255,.055); font-size: 15px; }
.screen-tab.active .screen-icon { color: white; background: #5d3fd3; box-shadow: 0 5px 14px rgba(93,63,211,.35); }
.screen-tab span:last-child { display: grid; gap: 3px; }
.screen-tab b { font-size: 11px; }
.screen-tab small { color: #7a7a7e; font-size: 9px; }
.projects-label { margin-top: 30px; }
.saved-scenes { display: grid; gap: 4px; }
.scene-row { display: flex; align-items: center; border-radius: 8px; transition: .15s; }
.scene-row:hover { background: rgba(255,255,255,.03); }
.scene-row > button:first-child { flex: 1; min-width: 0; padding: 9px 8px; border: 0; background: transparent; text-align: left; cursor: pointer; }
.scene-row b { display: block; overflow: hidden; text-overflow: ellipsis; color: #b8b8bc; font-size: 10px; white-space: nowrap; }
.scene-row small { color: #66666a; font-size: 8px; text-transform: capitalize; }
.delete-scene { opacity: 0; border: 0; padding: 6px; background: transparent; color: #7a7a7e; cursor: pointer; }
.scene-row:hover .delete-scene { opacity: 1; }
.save-scene { width: 100%; margin-top: 6px; padding: 9px; border: 1px dashed rgba(255,255,255,.11); border-radius: 8px; background: transparent; color: #858589; text-align: left; font-size: 10px; cursor: pointer; }
.save-scene:hover { color: #bababe; border-color: rgba(255,255,255,.2); }
.pro-card { position: relative; overflow: hidden; margin: 30px 2px 0; padding: 16px; border: 1px solid rgba(184,166,245,.25); border-radius: 12px; background: radial-gradient(circle at 90% -10%, rgba(184,166,245,.28), transparent 46%), linear-gradient(145deg, #0c0c0e, #0c0c0e); }
.pro-shine { position: absolute; width: 90px; height: 90px; right: -42px; top: -42px; border-radius: 50%; border: 1px solid rgba(255,255,255,.1); }
.pro-kicker { color: #b8a6f5; font: 700 8px DM Mono, monospace; letter-spacing: .15em; }
.pro-card b { display: block; margin-top: 10px; font: 600 13px Outfit, sans-serif; }
.pro-card p { margin: 5px 0 13px; color: #8b8b8f; font-size: 9px; line-height: 1.5; }
.pro-card button { width: 100%; padding: 8px 0; display: flex; justify-content: space-between; border: 0; border-top: 1px solid rgba(255,255,255,.08); background: transparent; color: #b8a6f5; font-size: 9px; font-weight: 700; cursor: pointer; }

.workspace { grid-column: 2; grid-row: 2; min-width: 0; display: flex; flex-direction: column; background: #000000; }
.workspace-head { height: 72px; padding: 0 24px; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--line); }
.workspace-head h1 { margin: 5px 0 0; font: 600 18px Outfit, sans-serif; }
.preview-tools { height: 34px; display: flex; align-items: center; border: 1px solid var(--line); border-radius: 8px; background: rgba(255,255,255,.02); overflow: hidden; }
.preview-tools button { height: 100%; border: 0; background: transparent; color: #7d7d81; cursor: pointer; }
.size-btn { width: 36px; font-size: 17px; }
.size-btn.active { color: #b8a6f5; background: rgba(255,255,255,.06); }
.preview-tools > span { width: 1px; height: 16px; background: var(--line); }
.random-btn { padding: 0 12px; font-size: 9px; font-weight: 700; }
.random-btn:hover { color: var(--blue-2); }
.stage { position: relative; flex: 1; min-height: 0; display: grid; place-items: center; overflow: hidden; background: radial-gradient(circle at 50% 45%, #28282c 0, #0c0c0e 38%, #000000 72%); }
.stage-grid { position: absolute; inset: 0; opacity: .11; background-image: linear-gradient(rgba(255,255,255,.12) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.12) 1px, transparent 1px); background-size: 26px 26px; mask-image: radial-gradient(circle, black, transparent 72%); }
.device-wrap { position: absolute; z-index: 2; left: 50%; top: 50%; transform: translate(-50%,-50%) scale(.72); transform-origin: center; transition: transform .3s ease; }
.device { position: relative; width: 390px; height: 780px; overflow: hidden; border: 7px solid #000000; border-radius: 44px; background: #f8f8fc; box-shadow: 0 36px 80px rgba(0,0,0,.65), 0 0 0 1px #38383c, inset 0 0 0 1px #56565a; color: #0c0c0e; }
.device-wrap.wide { transform: translate(-50%,-50%) scale(.78); }
.device-wrap.wide .device { width: 690px; height: 620px; border-radius: 28px; }
.device-status { position: absolute; z-index: 10; top: 0; left: 0; right: 0; height: 33px; display: flex; align-items: center; justify-content: space-between; padding: 0 20px; color: inherit; font-size: 9px; font-weight: 700; pointer-events: none; }
.device-island { position: absolute; left: 50%; top: 7px; width: 78px; height: 20px; transform: translateX(-50%); border-radius: 20px; background: #000000; }
.status-icons { letter-spacing: 2px; font-size: 6px; }
.simulator { min-height: 100%; }
.preview-watermark { position: absolute; z-index: 20; inset: -90px; pointer-events: none; opacity: .20; mix-blend-mode: normal; transform: rotate(-25deg) scale(1.15); transform-origin: center; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='280' height='116' viewBox='0 0 280 116'%3E%3Ctext x='14' y='62' fill='%23d84f5b' font-family='Arial,sans-serif' font-size='14' font-weight='700' letter-spacing='1.1'%3ELARP-IPAS.COM %C2%B7 UNLICENSED%3C/text%3E%3C/svg%3E"); background-repeat: repeat; background-size: 280px 116px; }
body.larped-pro .preview-watermark { display: none; }
.stage-note { position: absolute; z-index: 3; bottom: 13px; left: 50%; transform: translateX(-50%); color: #656569; font-size: 8px; white-space: nowrap; }

.sim { min-height: 100%; padding: 48px 24px 34px; font-size: 11px; background: var(--sim-bg); color: var(--sim-ink); }
.sim-top { display: flex; align-items: center; justify-content: space-between; }
.sim-brand { display: flex; align-items: center; gap: 8px; font-weight: 800; }
.sim-logo { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 9px; background: var(--sim-accent); color: white; font-size: 12px; }
.sim-avatar { display: grid; place-items: center; width: 27px; height: 27px; border-radius: 50%; background: var(--sim-soft); color: var(--sim-accent); font-weight: 800; }
.sim-kicker { margin-top: 34px; color: var(--sim-muted); font-size: 8px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; }
.sim-balance { margin: 7px 0 4px; font: 700 34px Outfit, sans-serif; letter-spacing: -.03em; }
.sim-change { color: var(--sim-positive); font-size: 9px; font-weight: 700; }
.sim-actions { margin: 22px 0; display: grid; grid-template-columns: repeat(4,1fr); gap: 8px; }
.sim-action { text-align: center; color: var(--sim-muted); font-size: 7px; }
.sim-action i { display: grid; place-items: center; width: 38px; height: 38px; margin: 0 auto 6px; border-radius: 12px; background: var(--sim-soft); color: var(--sim-accent); font-style: normal; font-size: 15px; }
.sim-card { padding: 16px; border: 1px solid var(--sim-line); border-radius: 16px; background: var(--sim-card); box-shadow: 0 10px 26px var(--sim-shadow); }
.card-head { margin-bottom: 12px; display: flex; align-items: center; justify-content: space-between; }
.card-head b { font-size: 10px; }
.card-head span { color: var(--sim-muted); font-size: 8px; }
.tx-list, .holding-list { display: grid; }
.tx, .holding { min-width: 0; display: grid; align-items: center; border-top: 1px solid var(--sim-line); }
.tx { grid-template-columns: 30px 1fr auto; gap: 9px; padding: 10px 0; }
.tx:first-child, .holding:first-child { border: 0; }
.tx-icon, .holding-icon { display: grid; place-items: center; width: 29px; height: 29px; border-radius: 9px; background: var(--sim-soft); color: var(--sim-accent); font-size: 12px; font-weight: 800; }
.tx-main, .holding-main { min-width: 0; }
.tx-main b, .holding-main b { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 9px; }
.tx-main small, .holding-main small, .tx-amount small { display: block; margin-top: 3px; color: var(--sim-muted); font-size: 7px; }
.tx-amount { text-align: right; font-weight: 700; font-size: 9px; }
.tx-amount.positive { color: var(--sim-positive); }
.sim-nav { position: absolute; left: 0; right: 0; bottom: 0; height: 55px; display: grid; grid-template-columns: repeat(4,1fr); align-items: center; border-top: 1px solid var(--sim-line); background: color-mix(in srgb, var(--sim-bg) 92%, transparent); backdrop-filter: blur(12px); }
.sim-nav span { text-align: center; color: var(--sim-muted); font-size: 7px; }
.sim-nav b { display: block; margin-bottom: 2px; font-size: 12px; }
.sim-nav .active { color: var(--sim-accent); }

.net-summary { margin: 22px 0 17px; display: grid; grid-template-columns: 1fr 112px; align-items: center; gap: 14px; }
.donut { position: relative; width: 108px; height: 108px; border-radius: 50%; background: conic-gradient(var(--sim-accent) 0 var(--cash), #b8a6f5 var(--cash) var(--stocks), #ffba69 var(--stocks) var(--realestate), #3bd3b0 var(--realestate) 100%); }
.donut:after { content:""; position:absolute; inset:18px; border-radius:50%; background:var(--sim-bg); }
.donut-center { position: absolute; z-index: 2; inset: 0; display: grid; place-content: center; text-align: center; }
.donut-center b { font-size: 10px; }
.donut-center small { color: var(--sim-muted); font-size: 6px; }
.allocation { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.asset { padding: 11px; border: 1px solid var(--sim-line); border-radius: 12px; background: var(--sim-card); }
.asset-top { display: flex; align-items: center; gap: 6px; color: var(--sim-muted); font-size: 7px; }
.asset-dot { width: 6px; height: 6px; border-radius: 50%; }
.asset b { display: block; margin-top: 7px; font-size: 10px; }
.asset small { color: var(--sim-positive); font-size: 7px; }
.trend-card { margin-top: 13px; }
.trend-svg { width: 100%; height: 70px; overflow: visible; }
.trend-svg path.line { fill: none; stroke: var(--sim-accent); stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.trend-svg path.fill { fill: var(--sim-accent); opacity: .09; }

.portfolio-head { margin-top: 28px; }
.portfolio-metrics { margin: 15px 0 16px; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.metric { padding: 11px; border-radius: 11px; background: var(--sim-soft); }
.metric span { display: block; color: var(--sim-muted); font-size: 7px; }
.metric b { display: block; margin-top: 5px; font-size: 11px; }
.metric.positive b { color: var(--sim-positive); }
.holding { grid-template-columns: 31px 1fr auto auto; gap: 8px; padding: 11px 0; }
.holding-price, .holding-change { text-align: right; font-size: 8px; font-weight: 700; }
.holding-change { width: 44px; color: var(--sim-positive); }
.holding-change.negative { color: var(--sim-negative); }

.theme-meridian { --sim-bg:#f7f7fb; --sim-ink:#0c0c0e; --sim-muted:#88888c; --sim-accent:#5d3fd3; --sim-soft:#b8a6f5; --sim-card:#fff; --sim-line:#ebebef; --sim-shadow:rgba(65,65,69,.06); --sim-positive:#129766; --sim-negative:#dc4661; }
.theme-nocturne { --sim-bg:#0c0c0e; --sim-ink:#f5f5f9; --sim-muted:#919195; --sim-accent:#b8a6f5; --sim-soft:#28282c; --sim-card:#0c0c0e; --sim-line:#323236; --sim-shadow:rgba(0,0,0,.2); --sim-positive:#45d6a0; --sim-negative:#ff7188; }
.theme-moss { --sim-bg:#eef1e7; --sim-ink:#1f2a20; --sim-muted:#718071; --sim-accent:#387354; --sim-soft:#dce7d9; --sim-card:#f8faf4; --sim-line:#dce3d6; --sim-shadow:rgba(40,72,44,.06); --sim-positive:#28815b; --sim-negative:#c95257; }
.theme-sunrise { --sim-bg:#fff4ea; --sim-ink:#322219; --sim-muted:#92786a; --sim-accent:#e65f3f; --sim-soft:#fae3d5; --sim-card:#fffaf6; --sim-line:#f0ded3; --sim-shadow:rgba(102,58,36,.07); --sim-positive:#208b6f; --sim-negative:#d94b57; }

.editor { grid-column: 3; grid-row: 2; min-width: 0; border-left: 1px solid var(--line); background: #0c0c0e; overflow: hidden; }
.editor-head { height: 72px; padding: 0 18px; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--line); }
.editor-head h2 { margin: 5px 0 0; font: 600 15px Outfit, sans-serif; }
.close-editor { display: none; border: 0; background: transparent; color: var(--muted); font-size: 25px; }
.editor-scroll { height: calc(100% - 72px); overflow: auto; scrollbar-width: thin; scrollbar-color: #36363a transparent; }
.control-section { padding: 18px; border-bottom: 1px solid var(--line); }
.section-title { margin-bottom: 14px; display: flex; justify-content: space-between; align-items: center; }
.section-title b { font-size: 10px; }
.collapse { border: 0; background: transparent; color: #707074; cursor: pointer; }
.control-section.collapsed > :not(.section-title) { display: none; }
.theme-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 7px; }
.theme-btn { padding: 0; border: 1px solid transparent; border-radius: 9px; background: transparent; cursor: pointer; }
.theme-btn i { display: block; height: 43px; border-radius: 8px; box-shadow: inset 0 0 0 1px rgba(255,255,255,.08); }
.theme-btn span { display: block; margin-top: 5px; color: #79797d; font-size: 7px; }
.theme-btn.active { border-color: #b8a6f5; }
.theme-btn.active span { color: #b8a6f5; }
.swatch-meridian { background: linear-gradient(135deg,#f7f7fb 50%,#5d3fd3 51%); }
.swatch-nocturne { background: linear-gradient(135deg,#0c0c0e 50%,#b8a6f5 51%); }
.swatch-moss { background: linear-gradient(135deg,#eef1e7 50%,#387354 51%); }
.swatch-sunrise { background: linear-gradient(135deg,#fff4ea 50%,#e65f3f 51%); }
.controls { display: grid; grid-template-columns: 1fr 1fr; gap: 11px 9px; }
.field { min-width: 0; }
.field.full { grid-column: 1/-1; }
.field-label { display: block; margin-bottom: 6px; color: #808084; font-size: 8px; font-weight: 600; }
.field input, .field select, .export-section select { width: 100%; height: 35px; padding: 0 9px; border: 1px solid var(--line); border-radius: 7px; outline: none; background: #000000; color: #e0e0e4; font-size: 9px; }
.field input:focus, select:focus { border-color: #5d3fd3; box-shadow: 0 0 0 2px rgba(93,63,211,.12); }
.list-controls { display: grid; gap: 7px; }
.list-row { position: relative; display: grid; grid-template-columns: 1fr 74px 22px; gap: 6px; }
.list-row input { min-width: 0; height: 32px; padding: 0 8px; border: 1px solid var(--line); border-radius: 6px; background: #000000; color: #d8d8dc; font-size: 8px; }
.list-row button { border: 0; background: transparent; color: #6a6a6e; cursor: pointer; }
.list-row button:hover { color: var(--red); }
.add-row { width: 100%; margin-top: 9px; padding: 8px; border: 1px dashed rgba(255,255,255,.1); border-radius: 7px; background: transparent; color: #88888c; font-size: 8px; cursor: pointer; }
.toggle-row { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.toggle-row b, .toggle-row small { display: block; }
.toggle-row b { font-size: 9px; }
.toggle-row small { margin-top: 3px; color: #78787c; font-size: 7px; }
.toggle-row input { display: none; }
.toggle-row i { position: relative; width: 31px; height: 18px; border-radius: 12px; background: #5d3fd3; }
.toggle-row i:after { content:""; position:absolute; right:3px; top:3px; width:12px; height:12px; border-radius:50%; background:white; }
.export-section select { margin-top: 5px; }

.toast { position: fixed; z-index: 100; left: 50%; bottom: 24px; padding: 10px 15px; transform: translate(-50%, 20px); border: 1px solid rgba(255,255,255,.12); border-radius: 9px; background: #0c0c0e; box-shadow: 0 12px 30px rgba(0,0,0,.35); color: #e7e7eb; font-size: 10px; opacity: 0; pointer-events: none; transition: .25s; }
.toast.show { opacity: 1; transform: translate(-50%, 0); }
.modal { width: min(580px, calc(100vw - 28px)); padding: 38px; border: 1px solid #48484c; border-radius: 22px; background: radial-gradient(circle at 86% 0, rgba(93,63,211,.5) 0, rgba(46,46,50,.6) 31%, transparent 58%), linear-gradient(145deg, #0c0c0e, #0c0c0e); box-shadow: 0 34px 100px #000; color: var(--ink); }
.modal::backdrop { background: rgba(0,0,0,.78); backdrop-filter: blur(5px); }
.modal-close { position: absolute; right: 15px; top: 12px; border: 0; background: transparent; color: #9a9a9e; font-size: 23px; cursor: pointer; }
.modal-icon { display: block; width: 50px; height: 50px; margin-bottom: 18px; border-radius: 13px; object-fit: cover; box-shadow: 0 10px 28px rgba(93,63,211,.3); }
.modal .eyebrow { color: #b8a6f5; }
.modal h2 { margin: 8px 0 0; font: 650 31px Outfit,sans-serif; letter-spacing: -.035em; }
.modal-intro { margin: 12px 0 0; color: #ababaf; font-size: 12px; line-height: 1.55; }
.modal .pro-benefits { margin: 20px 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 12px 20px; list-style: none; color: #d8d8dc; font-size: 10px; }
.modal .pro-benefits li:before { content:"✓"; margin-right: 8px; color: #b8a6f5; font-weight: 800; }
.price-options { margin: 18px 0 9px; display: grid; gap: 9px; }
.price { margin: 0; padding: 15px 16px; display: flex; align-items: center; justify-content: space-between; border: 1px solid #48484c; border-radius: 12px; background: #0c0c0e; cursor: pointer; transition: .18s; }
.price:hover { border-color: #5d3fd3; background: #0c0c0e; }
.price:has(input:checked) { border-color: #b8a6f5; background: #303034; box-shadow: inset 0 0 0 1px rgba(184,166,245,.2), 0 8px 24px rgba(76,76,80,.18); }
.price input { position: absolute; opacity: 0; pointer-events: none; }
.price span { display: grid; gap: 4px; }
.price span b { font: 600 13px Outfit,sans-serif; }
.price span em { margin-left: 5px; padding: 3px 5px; border-radius: 5px; background: #5d3fd3; color: #fff; font: 700 7px Inter,sans-serif; text-transform: uppercase; letter-spacing: .05em; }
.price span small { color: #9a9a9e; font-size: 9px; }
.price strong { font: 600 23px Outfit,sans-serif; }
.purchase-note { margin: 0 0 15px; color: #909094; text-align: center; font-size: 8px; }
.btn-full { width: 100%; min-height: 46px; background: linear-gradient(135deg, #5d3fd3, #5d3fd3); box-shadow: 0 12px 28px rgba(93,63,211,.32); }
.modal-links { margin-top: 13px; display: flex; justify-content: center; gap: 7px; color: #89898d; font-size: 8px; }
.modal-links a { color: #aeaeb2; text-decoration: none; }
.modal-links a:hover { color: white; }
.modal-note { display: block; margin-top: 10px; color: #77777b; text-align: center; font-size: 7px; line-height: 1.5; }
.restore-dialog { width: min(440px, calc(100vw - 28px)); }
.restore-license-form { margin-top: 20px; display: grid; gap: 12px; }
.restore-license-field { display: grid; gap: 7px; color: #bfbfc3; font-size: 10px; font-weight: 700; }
.restore-license-field input { width: 100%; min-width: 0; height: 46px; padding: 0 12px; border: 1px solid #48484c; border-radius: 10px; outline: 0; background: #0c0c0e; color: #b8a6f5; font: 600 13px/1 Inter,sans-serif; letter-spacing: .04em; text-transform: uppercase; }
.restore-license-field input:focus { border-color: #b8a6f5; box-shadow: 0 0 0 3px rgba(184,166,245,.16); }
.restore-license-field input::placeholder { color: #79797d; letter-spacing: .02em; }
.restore-license-error { margin: 0; color: #ff9aa7; font-size: 10px; }

@media (max-width: 540px) {
  .modal { padding: 27px 22px; }
  .modal .pro-benefits { grid-template-columns: 1fr; gap: 9px; }
}

@media (max-width: 1120px) {
  .app-shell { grid-template-columns: 205px 1fr 300px; }
  .topbar { grid-template-columns: 205px 1fr auto; }
  .device-wrap { transform: translate(-50%,-50%) scale(.63); }
  .device-wrap.wide { transform: translate(-50%,-50%) scale(.65); }
}
@media (max-width: 900px) {
  .app-shell { grid-template-columns: 76px 1fr 292px; }
  .topbar { grid-template-columns: 76px 1fr auto; }
  .brand { padding: 0; justify-content: center; }
  .brand span { display: none; }
  .screen-tab { padding: 10px 8px; justify-content: center; }
  .screen-tab span:last-child, .side-label, .saved-scenes, .save-scene, .pro-card { display: none; }
  .sidebar { padding: 20px 12px; }
}
@media (max-width: 700px) {
  body { overflow: auto; }
  .app-shell { display: grid; grid-template-columns: 60px minmax(0,1fr); grid-template-rows: 58px calc(100vh - 58px); }
  .topbar { grid-template-columns: 60px 1fr auto; height: 58px; }
  .brand { height: 58px; }
  .brand img { width: 26px; height: 26px; }
  .project-title { padding-left: 12px; }
  .project-title > span:last-child, .btn-ghost { display: none; }
  .project-name { max-width: 130px; font-size: 10px; }
  .top-actions { padding-right: 7px; gap: 5px; }
  .top-actions .back-apps { display: inline-flex; width: 36px; padding: 0; font-size: 0; }
  .top-actions .back-apps::before { content: "←"; font-size: 17px; }
  .top-actions .btn-primary { width: 36px; padding: 0; font-size: 0; }
  .download-icon { font-size: 17px; }
  .mobile-only { display: block; }
  .sidebar { grid-column: 1; grid-row: 2; padding: 15px 8px; }
  .screen-tab { padding: 8px 3px; }
  .screen-icon { width: 33px; height: 33px; flex-basis: 33px; }
  .workspace { grid-column: 2; grid-row: 2; }
  .workspace-head { height: 59px; padding: 0 12px; }
  .workspace-head h1 { font-size: 14px; }
  .preview-tools { height: 31px; }
  .random-btn { font-size: 0; padding: 0 10px; }
  .random-btn:first-letter { font-size: 13px; }
  .size-btn { width: 30px; }
  .stage { min-height: 0; }
  .device-wrap { transform: translate(-50%,-50%) scale(.61); }
  .device-wrap.wide { transform: translate(-50%,-50%) scale(.45); }
  .stage-note { bottom: 8px; font-size: 7px; }
  .editor { position: fixed; z-index: 50; inset: 58px 0 0 60px; transform: translateX(105%); transition: .25s ease; }
  .editor.open { transform: translateX(0); }
  .close-editor { display: block; }
}
@media (max-height: 760px) and (min-width: 701px) {
  .device-wrap { transform: translate(-50%,-50%) scale(.58); }
  .device-wrap.wide { transform: translate(-50%,-50%) scale(.62); }
}

/* Keep access available beside the editor on compact screens. */
@media(max-width:700px){.top-actions #restoreLicense{display:inline-flex;font-size:10px;padding:6px}.project-title{display:none}.topbar{grid-template-columns:60px 1fr}.top-actions{justify-content:flex-end}.screen-tab{position:relative}.device-wrap.wide{transform:translate(-50%,-50%) scale(.38)}}

.simulator{height:100%;overflow:auto}.sim{min-height:100%;padding-bottom:70px}
/* Phone chrome uses the same 390 × 844 surface as the PNG export. */
.device{width:404px;height:858px;border-radius:48px}
.phone-screen{position:relative;width:390px;height:844px;overflow:hidden;border-radius:40px;background:var(--sim-bg);color:var(--sim-ink)}
.device-wrap.wide .device{width:704px;height:634px;border-radius:32px}
.device-wrap.wide .phone-screen{width:690px;height:620px;border-radius:24px}
.device-wrap{transition:none}
.device-status{height:54px;padding:0 28px;font-family:Arial,sans-serif;font-size:15px;line-height:1;color:var(--sim-ink);background:var(--sim-bg)}
.device-island{top:11px;width:112px;height:30px}
.status-icons{display:flex;align-items:center;gap:6px;letter-spacing:normal}
.status-icons svg{display:block;width:18px;height:14px;fill:currentColor}
.status-icons .battery-icon{width:27px}
.simulator{height:100%;overflow:auto;scrollbar-width:none}
.simulator::-webkit-scrollbar{display:none}
.sim{padding:72px 24px 110px;min-height:100%;font-size:13px}
.sim-top{min-height:36px;gap:14px;margin-bottom:28px}
.sim-brand{gap:10px;font-size:15px;min-width:0;overflow-wrap:anywhere}
.sim-logo{width:34px;height:34px;flex-shrink:0;border-radius:10px}
.sim-logo svg{width:23px;height:23px}
.sim-avatar{width:34px;height:34px;flex-shrink:0;font-size:12px}
.sim-kicker{font-size:10px;margin-top:22px}
.sim-balance{font-size:38px}.sim-change{font-size:11px}
.sim-nav{height:88px;padding:10px 12px 28px;z-index:11;background:var(--sim-bg);backdrop-filter:none;align-items:start}
.sim-nav span{display:grid;justify-items:center;gap:5px;font-size:10px}
.sim-nav svg{display:block;width:23px;height:23px}
.sim-nav small{font-size:10px;font-weight:500}
.home-indicator{position:absolute;bottom:9px;left:50%;transform:translateX(-50%);width:134px;height:5px;border-radius:4px;background:var(--sim-ink);z-index:25;pointer-events:none}
.preview-watermark{z-index:20}
.license-lock{margin:18px;padding:16px;border:1px solid #5e5e62;border-radius:12px;background:#0c0c0e}
.license-lock strong{font-size:13px}.license-lock p{font-size:12px;line-height:1.55;color:#bababe;margin:8px 0 14px}.license-lock .btn{width:100%}
[hidden]{display:none!important}
button:disabled,input:disabled{opacity:.45;cursor:not-allowed}
.editor-head{height:82px}.editor-head h2{font-size:19px}.editor-scroll{height:calc(100% - 82px)}
.section-title b{font-size:12px}.field-label{font-size:11px;color:#b2b2b6}.field input,.export-section select{height:42px;font-size:12px}.list-row input{height:38px;font-size:11px}.list-row{grid-template-columns:minmax(0,1fr) 90px 24px}.theme-btn span{font-size:10px}.add-row{font-size:11px}
.export-access{color:#b2b2b6;font-size:12px;line-height:1.5;margin:0 0 16px}
.export-section select{padding-right:20px}.top-actions{gap:8px}.workspace-head{flex-shrink:0}
@media(min-width:701px) and (max-width:1080px){.app-shell{grid-template-columns:76px minmax(0,1fr)}.topbar{grid-template-columns:76px 1fr auto}.editor{position:fixed;z-index:50;inset:64px 0 0 auto;width:340px;transform:translateX(105%);transition:transform .2s}.editor.open{transform:none}.close-editor,.mobile-only{display:block}.brand span,.screen-tab span:last-child,.side-label,.saved-scenes,.save-scene,.pro-card{display:none}.brand{padding:0;justify-content:center}.sidebar{padding:18px 10px}.screen-tab{padding:10px 5px}.project-name{max-width:150px}}
@media(max-width:700px){.app-shell{grid-template-rows:58px calc(100dvh - 58px)}.workspace-head{padding:0 10px}.stage-note{white-space:normal;width:90%;text-align:center;line-height:1.4}.editor-head h2{font-size:18px}.device-status{font-size:15px}}

/* LARP IPAs workspace palette. Preview themes remain selectable. */
:root{--bg:#000;--panel:#0c0c0e;--panel-2:#121214;--blue:#5d3fd3;--blue-2:#b8a6f5;--ink:#f4f4f5;--muted:#a1a1aa}
html,body,.workspace,.sidebar,.editor,.topbar{background:#000}
.stage{background:radial-gradient(ellipse at 50% 42%,rgba(93,63,211,.12),transparent 62%),#000}
.btn-primary,.btn-full{background:linear-gradient(135deg,#785ae6,#5d3fd3);box-shadow:0 8px 24px rgba(93,63,211,.24)}
.screen-tab.active{border-color:rgba(93,63,211,.5);background:rgba(93,63,211,.13)}
.screen-tab.active .screen-icon{background:#5d3fd3;box-shadow:0 5px 14px rgba(93,63,211,.28)}
.pro-card,.modal{border-color:rgba(154,127,235,.32);background:radial-gradient(circle at 86% 0,rgba(93,63,211,.34),transparent 58%),linear-gradient(145deg,#121015,#000)}
.license-lock{border-color:rgba(93,63,211,.55);background:linear-gradient(135deg,rgba(93,63,211,.18),#080808)}
.sim-action i svg{display:block;width:21px;height:21px}
.theme-meridian{--sim-soft:#eee9ff;--sim-ink:#18181b;--sim-muted:#71717a}.theme-nocturne{--sim-bg:#000;--sim-card:#111113;--sim-soft:#201735;--sim-ink:#f4f4f5;--sim-muted:#a1a1aa;--sim-accent:#a78bf2}