:root{--bg:#0b1020;--panel:#11182a;--panel2:#18233b;--text:#eef5ff;--muted:#9fb0c7;--line:#27344f;--accent:#60a5fa;--danger:#ef4444;--good:#22c55e}*{box-sizing:border-box}html,body{margin:0;height:100%;overflow:hidden;background:var(--bg);color:var(--text);font-family:Inter,system-ui,Segoe UI,Arial,sans-serif;overscroll-behavior:none}button,input,select,textarea{font:inherit}button{border:1px solid var(--line);background:var(--panel2);color:var(--text);border-radius:12px;padding:10px 12px;cursor:pointer;min-height:40px}button:hover,button.active{border-color:var(--accent);box-shadow:0 0 0 2px rgba(96,165,250,.18)}input,select,textarea{background:#0e1526;color:var(--text);border:1px solid var(--line);border-radius:12px;padding:10px;min-width:0}.app-shell{height:100%;display:flex;flex-direction:column}.topbar{height:70px;display:flex;align-items:center;gap:14px;padding:10px 14px;border-bottom:1px solid var(--line);background:rgba(17,24,42,.96);backdrop-filter:blur(10px);z-index:10}.brand{display:flex;flex-direction:column;min-width:190px}.brand span{color:var(--muted);font-size:12px}.room-controls{display:grid;grid-template-columns:115px 140px 110px repeat(3,auto);gap:8px;align-items:center;flex:1}.status-pill,.floating-room{border:1px solid var(--line);background:#0e1526;border-radius:999px;padding:9px 12px;color:var(--muted);white-space:nowrap}.workspace{flex:1;min-height:0;display:grid;grid-template-columns:250px 1fr 300px}.desktop-panel{overflow:auto;padding:14px;border-right:1px solid var(--line);background:var(--panel)}.layers-panel{border-right:0;border-left:1px solid var(--line)}h2{font-size:14px;margin:6px 0 12px;color:#cfe2ff;text-transform:uppercase;letter-spacing:.08em}h3{font-size:13px;color:#cfe2ff}.tool-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:14px}label{display:grid;gap:6px;color:var(--muted);font-size:13px;margin:10px 0}.mini-label{margin:0}.button-row{display:flex;gap:8px;margin:10px 0;flex-wrap:wrap}.button-row button{flex:1}.canvas-stage-wrap{position:relative;min-width:0;min-height:0;background:#050916;overflow:hidden}.floating-room{position:absolute;left:14px;top:14px;z-index:5;background:rgba(14,21,38,.88)}.canvas-viewport{position:absolute;inset:0;overflow:hidden;touch-action:none;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none}.world{position:absolute;left:0;top:0;width:1920px;height:1080px;transform-origin:0 0;border-radius:18px;box-shadow:0 30px 80px rgba(0,0,0,.45);overflow:hidden;background:#fff;will-change:transform}.world.template-dark{background:#111827}.world.template-grid{background-color:#fff;background-image:linear-gradient(rgba(17,24,39,.10) 1px,transparent 1px),linear-gradient(90deg,rgba(17,24,39,.10) 1px,transparent 1px);background-size:40px 40px}.world.template-dotted{background-color:#fff;background-image:radial-gradient(rgba(17,24,39,.28) 1.5px,transparent 1.5px);background-size:28px 28px}.world.template-planning{background-color:#fff;background-image:linear-gradient(90deg,rgba(96,165,250,.18) 1px,transparent 1px),linear-gradient(rgba(96,165,250,.14) 1px,transparent 1px);background-size:160px 100%;}.world canvas{position:absolute;inset:0;width:1920px;height:1080px;touch-action:none}.cursor-layer{position:absolute;inset:0;pointer-events:none}.remote-cursor{position:absolute;transform:translate(-50%,-50%);display:flex;align-items:center;gap:5px;font-size:22px;filter:drop-shadow(0 2px 4px rgba(0,0,0,.5))}.remote-cursor span{font-size:13px;background:rgba(15,23,42,.82);color:white;border-radius:999px;padding:3px 8px;white-space:nowrap}.color-presets{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin:8px 0 14px}.color-presets button{min-height:34px;border-radius:12px;background:var(--sw);border:2px solid rgba(255,255,255,.18)}.color-presets button.active{outline:3px solid var(--accent);outline-offset:2px}.layers-list{display:grid;gap:8px;margin-top:10px}.layer-item{border:1px solid var(--line);border-radius:14px;background:#0e1526;padding:10px;display:grid;gap:8px}.active-layer{border-color:var(--accent);box-shadow:0 0 0 2px rgba(96,165,250,.18)}.locked-layer{opacity:.82}.layer-top{display:flex;justify-content:space-between;gap:8px;align-items:center}.layer-top strong{font-size:13px}.layer-top small{color:var(--muted);font-size:11px}.layer-actions{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}.layer-actions button{padding:7px 8px;min-height:32px;font-size:12px}.room-meta{font-size:13px;color:var(--muted);line-height:1.5}.mobile-toolbar{display:none}.mobile-drawer{display:none}.floating-text-input{position:absolute;z-index:20;min-width:220px;min-height:70px;resize:both;background:rgba(255,255,255,.96);color:#111827;border:2px solid var(--accent);box-shadow:0 12px 28px rgba(0,0,0,.28)}.debug-overlay{position:fixed;left:10px;bottom:10px;z-index:9999;max-width:calc(100vw - 20px);padding:8px 10px;border-radius:10px;background:rgba(0,0,0,.72);color:#dbeafe;font:12px/1.35 ui-monospace,SFMono-Regular,Menlo,monospace;pointer-events:none}
@media(max-width:900px){.topbar{height:auto;min-height:64px;align-items:flex-start}.brand{min-width:0}.brand span{display:none}.room-controls{display:none}.status-pill{margin-left:auto}.workspace{display:block;position:relative;flex:1}.desktop-panel{display:none}.canvas-stage-wrap{position:absolute;inset:0 0 58px 0}.floating-room{left:10px;top:10px;font-size:12px;max-width:calc(100vw - 20px);overflow:hidden;text-overflow:ellipsis}.mobile-toolbar{height:58px;display:grid;grid-template-columns:repeat(5,1fr);gap:6px;padding:7px;background:rgba(17,24,42,.98);border-top:1px solid var(--line);z-index:30}.mobile-toolbar button{padding:8px 6px;font-size:12px}.mobile-drawer{display:block;position:fixed;left:0;right:0;bottom:58px;max-height:72vh;transform:translateY(calc(100% + 70px));transition:transform .22s ease;background:rgba(17,24,42,.98);border-top:1px solid var(--line);border-radius:22px 22px 0 0;z-index:40;padding:12px 14px 18px;overflow:auto;box-shadow:0 -20px 60px rgba(0,0,0,.45)}.mobile-drawer.open{transform:translateY(0)}.drawer-handle{width:48px;height:5px;border-radius:999px;background:#44546f;margin:0 auto 12px}.mobile-tool-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:8px}.mobile-tool-grid button{font-size:12px;padding:8px 6px}.mobile-presets{grid-template-columns:repeat(8,1fr)}.drawer-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}.drawer-grid label{margin:4px 0}.world{border-radius:10px}.floating-text-input{max-width:calc(100vw - 30px)}}
/* v5 object editing + project system */
.tool-grid button[data-tool="select"],.mobile-tool-grid button[data-tool="select"],.mobile-toolbar button[data-tool="select"]{border-color:#93c5fd}.selection-meta{font-size:12px;color:var(--muted);line-height:1.45;background:#0e1526;border:1px solid var(--line);border-radius:12px;padding:8px;margin:8px 0}#projectName,#projectList{width:100%;margin:6px 0}.world.show-grid{background-image:linear-gradient(rgba(96,165,250,.16) 1px,transparent 1px),linear-gradient(90deg,rgba(96,165,250,.16) 1px,transparent 1px);background-size:20px 20px}.presentation .desktop-panel,.presentation .topbar,.presentation .mobile-toolbar,.presentation .mobile-drawer{display:none!important}.presentation .workspace{grid-template-columns:1fr;height:100vh}.presentation .canvas-stage-wrap{inset:0!important}.presentation .floating-room{opacity:.75}.presentation .canvas-stage-wrap{position:fixed;inset:0;z-index:100}.presentation .app-shell{height:100vh}.mobile-toolbar{grid-template-columns:repeat(5,1fr)}@media(max-width:900px){.mobile-tool-grid{grid-template-columns:repeat(4,1fr)}.selection-meta{font-size:12px}.presentation .canvas-stage-wrap{position:fixed;inset:0!important}.presentation .floating-room{display:block}}
/* v6 collaboration control */
.players-list{display:grid;gap:8px;margin:8px 0 14px}.player-item{border:1px solid var(--line);border-radius:14px;background:#0e1526;padding:9px;display:grid;gap:8px}.player-item div:first-child{display:grid;gap:2px}.player-item strong{font-size:13px}.player-item small{font-size:11px;color:var(--muted)}.player-actions{display:grid;grid-template-columns:1fr 1fr;gap:6px}.player-actions button{padding:7px 8px;min-height:32px;font-size:12px}.panel-link{display:inline-flex;align-items:center;justify-content:center;text-decoration:none;border:1px solid var(--line);background:var(--panel2);color:var(--text);border-radius:12px;padding:10px 12px;min-height:40px}.remote-cursor.laser-cursor{font-size:30px;color:#ef4444;filter:drop-shadow(0 0 8px #ef4444)}.sticky-input{background:#fef3c7!important;color:#111827!important;border-color:#f59e0b!important}.utility-page{overflow:auto;min-height:100%;background:linear-gradient(135deg,#0b1020,#111827)}.utility-card{max-width:980px;margin:32px auto;padding:24px;border:1px solid var(--line);border-radius:22px;background:rgba(17,24,42,.96);box-shadow:0 24px 80px rgba(0,0,0,.35)}.utility-card h1{margin:0 0 8px}.utility-row{display:flex;gap:10px;flex-wrap:wrap;margin:16px 0}.utility-row input{min-width:220px}.project-list{display:grid;gap:10px;margin-top:16px}.project-item{display:grid;grid-template-columns:1fr auto auto;gap:10px;align-items:center;border:1px solid var(--line);background:#0e1526;border-radius:14px;padding:12px}.project-item span{color:var(--muted);font-size:13px}.diag-table{width:100%;border-collapse:collapse;margin-top:16px}.diag-table th,.diag-table td{border-bottom:1px solid var(--line);padding:10px;text-align:left}.diag-table th{color:#cfe2ff}.diag-table .ok{color:#86efac;font-weight:700}.diag-table .bad{color:#fecaca;font-weight:700}@media(max-width:900px){.project-item{grid-template-columns:1fr}.utility-card{margin:12px;padding:16px;border-radius:16px}.mobile-toolbar{grid-template-columns:repeat(5,1fr)}}


/* v6.1 PC/mobile responsive reliability patch */
.mobile-quickbar{display:none}
@media(max-width:900px){
  html,body{height:100dvh;min-height:100dvh;overflow:hidden}
  .app-shell{height:100dvh;min-height:100dvh;overflow:hidden}
  .topbar{height:48px;min-height:48px;padding:6px 10px;align-items:center;flex:0 0 auto}
  .brand strong{font-size:14px;white-space:nowrap}.brand span{display:none}.status-pill{font-size:12px;padding:6px 9px;max-width:42vw;overflow:hidden;text-overflow:ellipsis}.room-controls{display:none!important}
  .mobile-quickbar{display:grid;gap:6px;padding:7px 8px;background:rgba(17,24,42,.98);border-bottom:1px solid var(--line);z-index:35;flex:0 0 auto}
  .mobile-quick-row{display:grid;grid-template-columns:minmax(0,1fr) auto auto auto;gap:6px;align-items:center}
  .mobile-quick-row.compact{grid-template-columns:minmax(0,1fr) 1fr 1fr}
  .mobile-quickbar input,.mobile-quickbar button{min-height:38px;padding:8px 9px;font-size:13px;border-radius:10px}
  .workspace{display:block;position:relative;flex:1 1 auto;min-height:0;height:auto;overflow:hidden;padding-bottom:64px}
  .canvas-stage-wrap{position:absolute;inset:0 0 64px 0;min-height:0;overflow:hidden}
  .canvas-viewport{position:absolute;inset:0;touch-action:none;overscroll-behavior:none;background:#050916}
  .desktop-panel{display:none!important}
  .floating-room{left:8px;top:8px;font-size:11px;padding:6px 9px;max-width:calc(100vw - 16px);pointer-events:none}
  .mobile-toolbar{display:grid!important;position:fixed;left:0;right:0;bottom:0;height:64px;grid-template-columns:repeat(6,minmax(0,1fr));gap:5px;padding:6px calc(6px + env(safe-area-inset-right)) calc(6px + env(safe-area-inset-bottom)) calc(6px + env(safe-area-inset-left));background:rgba(17,24,42,.99);border-top:1px solid var(--line);z-index:60;box-shadow:0 -10px 26px rgba(0,0,0,.32)}
  .mobile-toolbar button{min-height:48px;padding:6px 4px;font-size:11px;border-radius:10px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .mobile-drawer{display:block!important;position:fixed;left:0;right:0;bottom:64px;max-height:min(76dvh,680px);transform:translateY(calc(100% + 80px));transition:transform .2s ease;background:rgba(17,24,42,.99);border-top:1px solid var(--line);border-radius:18px 18px 0 0;z-index:70;padding:10px 12px calc(16px + env(safe-area-inset-bottom));overflow:auto;box-shadow:0 -20px 60px rgba(0,0,0,.45)}
  .mobile-drawer.open{transform:translateY(0)}
  .mobile-tool-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:7px}.mobile-tool-grid button{min-height:40px;font-size:12px;padding:7px 4px}
  .mobile-presets{grid-template-columns:repeat(8,1fr);gap:7px}.color-presets button{min-height:32px}
  .drawer-grid{grid-template-columns:1fr 1fr;gap:8px}.drawer-grid label{font-size:12px;margin:2px 0}
  .button-row{gap:7px;margin:8px 0}.button-row button,.panel-link{min-height:40px;font-size:12px;padding:7px 8px}
  .layers-list{max-height:34dvh;overflow:auto}.world{border-radius:8px}
}
@media(min-width:901px){
  .topbar{min-height:76px;height:auto;align-items:flex-start}.room-controls{grid-template-columns:115px 140px 110px repeat(3,minmax(90px,1fr));gap:8px}.workspace{min-height:0}.mobile-drawer,.mobile-toolbar,.mobile-quickbar{display:none!important}
}


/* v8 public-ready media/tooling pass */
.media-hint{font-size:12px;color:var(--muted);line-height:1.4}.world .pip-ref{display:none}.ref-pip{position:fixed;right:18px;top:96px;width:min(320px,45vw);max-height:45vh;z-index:95;border:1px solid var(--line);border-radius:16px;background:rgba(17,24,42,.96);box-shadow:0 18px 60px rgba(0,0,0,.45);overflow:hidden;touch-action:none}.ref-pip header{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:8px 10px;background:#0e1526;color:var(--text);font-size:12px;cursor:grab}.ref-pip img{display:block;width:100%;max-height:38vh;object-fit:contain;background:#fff}.ref-pip footer{display:flex;gap:6px;padding:8px}.ref-pip button{min-height:32px;padding:6px 8px;font-size:12px}.object-badge{display:inline-flex;align-items:center;border:1px solid var(--line);border-radius:999px;padding:2px 7px;background:#0e1526;color:var(--muted);font-size:11px}.tool-grid button[data-tool="image"],.mobile-tool-grid button[data-tool="image"],.mobile-toolbar button[data-tool="image"]{border-color:#fbbf24}.symmetry-on{border-color:#22c55e!important;box-shadow:0 0 0 2px rgba(34,197,94,.18)!important}.mobile-media-row button{font-size:12px}.toast-line{position:fixed;left:50%;bottom:82px;transform:translateX(-50%);z-index:120;background:rgba(15,23,42,.96);border:1px solid var(--line);border-radius:999px;padding:9px 14px;color:#dbeafe;box-shadow:0 12px 32px rgba(0,0,0,.35);font-size:13px;pointer-events:none}
@media(max-width:900px){.ref-pip{right:10px;top:122px;width:min(260px,70vw);max-height:38vh}.ref-pip img{max-height:30vh}.mobile-toolbar{grid-template-columns:repeat(6,minmax(0,1fr))}.mobile-drawer .button-row.mobile-media-row{display:grid;grid-template-columns:repeat(3,1fr)}}

@media(max-width:900px){.mobile-toolbar{grid-template-columns:repeat(7,minmax(0,1fr))}.mobile-toolbar button{font-size:10px;padding:5px 2px}}


/* v8 public release hardening */
.public-start{position:fixed;inset:0;z-index:80;display:flex;align-items:center;justify-content:center;padding:24px;background:linear-gradient(135deg,rgba(2,6,23,.94),rgba(15,23,42,.86));backdrop-filter:blur(10px)}
.public-start.hidden{display:none}.start-card{width:min(960px,100%);display:grid;grid-template-columns:1.15fr .85fr;gap:20px;padding:22px;border:1px solid rgba(148,163,184,.24);border-radius:28px;background:#0f172a;box-shadow:0 30px 90px rgba(0,0,0,.42)}
.start-copy{padding:18px}.start-kicker{display:inline-flex;margin-bottom:12px;padding:6px 10px;border-radius:999px;background:rgba(59,130,246,.14);color:#93c5fd;font-weight:800}.start-copy h1{margin:0 0 10px;font-size:clamp(28px,4vw,48px);line-height:1}.start-copy p{margin:0;color:#cbd5e1;line-height:1.6}.start-links{display:flex;gap:10px;flex-wrap:wrap;margin-top:18px}.start-links a,.mobile-help-links a{color:#bfdbfe;text-decoration:none;border:1px solid rgba(96,165,250,.28);padding:9px 12px;border-radius:14px;background:rgba(15,23,42,.7)}
.start-form{display:grid;gap:12px;padding:16px;border-radius:22px;background:#020617;border:1px solid rgba(148,163,184,.16)}.start-form label{display:grid;gap:6px;color:#cbd5e1;font-weight:700}.start-form input,.start-form select{width:100%;min-height:44px;border-radius:14px;border:1px solid rgba(148,163,184,.22);background:#111827;color:#e5e7eb;padding:0 12px}.start-actions{display:grid;grid-template-columns:1fr 1fr;gap:10px}.ghost-btn{background:transparent!important;border-color:rgba(148,163,184,.28)!important;color:#cbd5e1!important}.connection-banner{position:fixed;left:50%;top:78px;transform:translateX(-50%);z-index:90;padding:10px 16px;border-radius:999px;background:#7f1d1d;color:#fee2e2;border:1px solid rgba(248,113,113,.45);box-shadow:0 10px 35px rgba(0,0,0,.3);font-weight:800}.connection-banner.good{background:#064e3b;color:#d1fae5;border-color:rgba(52,211,153,.5)}.mobile-help-links{display:flex;gap:8px;overflow-x:auto;padding:6px 0 10px}.save-state{font-size:12px;color:#93c5fd;margin-top:4px}.danger-note{color:#fecaca;font-size:12px}.orientation-tip{display:none}
@media(max-width:760px){.public-start{padding:10px;align-items:flex-start;overflow:auto}.start-card{grid-template-columns:1fr;padding:14px;border-radius:20px}.start-copy{padding:6px}.start-actions{grid-template-columns:1fr}.connection-banner{top:auto;bottom:88px;max-width:calc(100vw - 24px);white-space:normal;text-align:center}.orientation-tip{display:block;color:#fef3c7;font-size:12px;padding:6px 10px}.mobile-toolbar{padding-bottom:max(10px,env(safe-area-inset-bottom))}.mobile-drawer{padding-bottom:max(20px,env(safe-area-inset-bottom))}}
@media(max-width:760px) and (orientation:portrait){.canvas-stage-wrap:before{content:'Tip: rotate for more workspace, or use Menu for all tools.';position:absolute;z-index:5;left:12px;right:12px;bottom:74px;margin:auto;padding:7px 10px;border-radius:12px;background:rgba(15,23,42,.72);color:#fde68a;font-size:12px;text-align:center;pointer-events:none}}
/* v8.2 public fix: mobile background controls and safer room entry */
.mobile-bg-label{display:inline-flex;align-items:center;gap:8px;justify-content:center;min-height:40px;padding:0 10px;border:1px solid rgba(148,163,184,.28);border-radius:12px;background:rgba(15,23,42,.78);color:#dbeafe;font-weight:700}
.mobile-bg-label input{width:44px;height:30px;border:0;background:transparent;padding:0}
.room-controls input:focus,.mobile-quickbar input:focus,.mobile-drawer input:focus{outline:2px solid rgba(59,130,246,.85);outline-offset:2px}

/* v8.2 stability cleanup: safer touch target sizing, clearer disabled states, and reduced mobile layout jitter */
button:disabled{opacity:.45;cursor:not-allowed;box-shadow:none}
.canvas-viewport,.world,#board,#preview{touch-action:none}
.remote-cursor,.laser-cursor{will-change:left,top}
@media(max-width:900px){button,input,select{min-height:44px}.mobile-drawer{padding-bottom:calc(18px + env(safe-area-inset-bottom,0px))}.mobile-toolbar{padding-bottom:calc(7px + env(safe-area-inset-bottom,0px));height:calc(58px + env(safe-area-inset-bottom,0px))}.canvas-stage-wrap{inset:0 0 calc(58px + env(safe-area-inset-bottom,0px)) 0}.mobile-drawer{bottom:calc(58px + env(safe-area-inset-bottom,0px))}}
