/* The page wrapper of the browser studio (MDUS-315). The studio itself is the
   engine on #canvas; this file only sizes the canvas and draws the
   native-app banner on the studio's design tokens. */
:root {
    --ground: #0a0b0d;
    --ink: #f2f3f5;
    --dim: #9aa0a8;
    --glass: rgba(28, 31, 37, 0.72);
    --glass-line: rgba(255, 255, 255, 0.10);
    --glass-highlight: rgba(255, 255, 255, 0.16);
    --accent: #ff7a1a;
    --banner-height: 40px;
    color-scheme: dark;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: var(--ground); color: var(--ink); overflow: hidden; }
body {
    display: flex; flex-direction: column;
    font: 13px/1.3 -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
    padding-top: env(safe-area-inset-top);
}
.banner {
    flex: 0 0 var(--banner-height);
    display: flex; align-items: center; gap: 12px;
    padding: 0 12px 0 16px;
    background: var(--glass);
    -webkit-backdrop-filter: blur(18px) saturate(1.2);
    backdrop-filter: blur(18px) saturate(1.2);
    border-bottom: 1px solid var(--glass-line);
    box-shadow: inset 0 1px 0 var(--glass-highlight);
    z-index: 3;
}
.banner[hidden] { display: none; }
.banner .brand { font-weight: 700; letter-spacing: 0.02em; }
.banner .text { color: var(--dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; flex: 1 1 auto; min-width: 0; }
.banner .actions { display: flex; align-items: center; gap: 8px; flex: 0 0 auto; }
.banner .action {
    display: inline-flex; align-items: center; height: 28px; padding: 0 12px;
    border-radius: 14px; border: 1px solid var(--glass-line);
    background: rgba(255, 255, 255, 0.06); color: var(--ink); text-decoration: none; white-space: nowrap;
}
.banner .action:hover { background: rgba(255, 255, 255, 0.12); }
.banner .action[hidden] { display: none; }
.banner .close {
    width: 28px; height: 28px; border-radius: 14px; border: 0; background: transparent;
    color: var(--dim); font-size: 18px; cursor: pointer;
}
.banner .close:hover { color: var(--ink); background: rgba(255, 255, 255, 0.08); }
@media (pointer: coarse) {
    :root { --banner-height: 52px; }
    .banner .action, .banner .close { height: 44px; min-width: 44px; border-radius: 22px; }
}
@media (max-width: 560px) { .banner .text { display: none; } }
#surface { position: relative; flex: 1 1 auto; min-height: 0; }
#canvas { position: absolute; left: 0; top: 0; width: 100%; height: 100%; display: block; z-index: 1; outline: none; touch-action: none; }
/* A golden page fills the viewport without the native-app banner. */
.golden .banner { display: none; }
.boot {
    position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
    color: var(--dim); z-index: 2; pointer-events: none; padding: 24px; text-align: center;
}
.boot[hidden] { display: none; }

.avatar-editor{color:#ebe7dd;background:#15171b;border:1px solid #3a3c42;border-radius:16px;padding:24px;width:min(400px,calc(100vw - 64px));max-height:calc(100dvh - 48px);overflow:auto;font:16px system-ui;box-shadow:0 16px 64px #0008}
.avatar-editor::backdrop{background:#0009;backdrop-filter:blur(6px)}
.avatar-editor h2{font-size:22px;margin:0 0 8px}.avatar-editor p{color:#a8a9ae;margin:0 0 20px}
.avatar-frame{position:relative;overflow:hidden;aspect-ratio:1;border-radius:12px;background:#08090b}
.avatar-frame canvas{display:block;width:100%;height:100%;touch-action:none;cursor:grab}.avatar-frame canvas:focus-visible{outline:2px solid #ff5a16;outline-offset:-3px}
.avatar-circle{position:absolute;inset:0;pointer-events:none;border-radius:50%;box-shadow:0 0 0 100px #0009;border:2px solid #f0eee7;box-sizing:border-box}
.avatar-zoom{display:flex;align-items:center;gap:16px;margin:20px 0}.avatar-zoom input{flex:1;min-width:0;accent-color:#ff5a16;min-height:44px}
.avatar-editor .avatar-status{margin:0}.avatar-actions{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-top:16px}.avatar-actions span{flex:1}
.avatar-actions button{font:inherit;color:inherit;background:#292c32;border:1px solid #42454c;border-radius:8px;min-height:44px;padding:8px 14px;cursor:pointer}.avatar-actions button[data-action=save]{background:#ff5a16;color:#120b05;border-color:#ff5a16}