body{
    margin:0;
    overflow:hidden;
    background:
        radial-gradient(circle at 16% 18%, rgba(255, 164, 92, 0.1), transparent 22%),
        radial-gradient(circle at 82% 14%, rgba(84, 203, 170, 0.08), transparent 24%),
        radial-gradient(circle at 55% 80%, rgba(80, 116, 255, 0.1), transparent 28%),
        linear-gradient(160deg, #040a11 0%, #08111a 44%, #0d0d16 100%);
    font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
    color:#e6e9ef;
}

.app-shell{
    height:100vh;
}

.scene-stage{
    position:relative;
    min-width:0;
}

.scene-stage canvas{
    display:block;
}

.scene-overlay{
    position:absolute;
    left:24px;
    bottom:24px;
    z-index:4;
    width:220px;
    padding:10px 11px;
    border-radius:14px;
    background:rgba(7, 13, 21, 0.78);
    border:1px solid rgba(140, 178, 214, 0.14);
    backdrop-filter: blur(14px);
}

.overlay-head{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px;
    margin-bottom:10px;
}

.scene-overlay h1{
    margin:0;
    font-size:17px;
    letter-spacing:0.06em;
}

.mini-brand{
    font-size:14px;
    font-weight:700;
    letter-spacing:0.12em;
    color:#e6edf8;
}

.space-meta{
    display:grid;
    gap:5px;
}

.meta-row{
    display:grid;
    grid-template-columns:48px minmax(0, 1fr);
    gap:8px;
    align-items:start;
}

.meta-label{
    font-size:11px;
    letter-spacing:0.08em;
    text-transform:uppercase;
    color:#7f93b4;
}

.meta-value{
    font-size:12px;
    line-height:1.35;
    color:#f1f5ff;
    word-break:break-word;
    overflow-wrap:anywhere;
}

#back-button{
    margin:0;
    padding:6px 10px;
    border:1px solid rgba(158, 198, 255, 0.2);
    border-radius:999px;
    background:rgba(158, 198, 255, 0.08);
    color:#e6eefc;
    font:inherit;
    font-size:12px;
    cursor:pointer;
}

#back-button:hover{
    background:rgba(158, 198, 255, 0.14);
}

.toolbox{
    margin-top:9px;
    padding-top:9px;
    border-top:1px solid rgba(155, 181, 220, 0.12);
    display:grid;
    grid-template-columns:repeat(3, minmax(0, 1fr));
    gap:6px;
}

.tool-btn{
    min-width:0;
    height:30px;
    border:1px solid rgba(160, 197, 233, 0.18);
    border-radius:9px;
    background:rgba(112, 160, 210, 0.08);
    color:#e9f1fe;
    font:inherit;
    font-size:12px;
    cursor:pointer;
}

.tool-btn:hover{
    background:rgba(112, 160, 210, 0.16);
}

.tool-btn.wide{
    grid-column:span 1;
}

.tool-gap{
    display:block;
}

.tool-hint{
    margin-top:7px;
    font-size:11px;
    line-height:1.35;
    color:#aab8d1;
}

#popup{
    position:absolute;
    width:360px;
    max-height:320px;
    overflow-y:auto;
    background:rgba(28,30,36,0.98);
    border:1px solid rgba(154,163,184,0.28);
    border-radius:8px;
    box-shadow:0 10px 30px rgba(0,0,0,0.35);
    color:#e6e9ef;
    padding:14px;
    display:none;
    line-height:1.4;
    font-size:14px;
    pointer-events:auto;
    z-index:40;
    box-sizing:border-box;
}

@media (max-width: 920px){
    .scene-overlay{
        width:220px;
        right:16px;
        left:auto;
        bottom:16px;
    }

    #popup{
        width:min(360px, calc(100vw - 24px));
    }
}

#popup .note-title{
    font-size:12px;
    letter-spacing:0.03em;
    color:#9aa6c4;
    margin:0 0 8px 0;
    font-weight:600;
    text-transform:uppercase;
}

#popup .popup-hint{
    margin:0 0 10px 0;
    padding:8px 10px;
    border-radius:10px;
    background:rgba(158, 198, 255, 0.08);
    border:1px solid rgba(158, 198, 255, 0.14);
    color:#c8d7f2;
}

#popup h1,
#popup h2,
#popup h3{
    margin:0 0 8px 0;
    line-height:1.3;
    color:#f2f4f8;
}

#popup h1{
    font-size:1.2em;
}

#popup h2{
    font-size:1.05em;
}

#popup h3{
    font-size:0.96em;
}

#popup p{
    margin:0 0 8px 0;
}

#popup ul,
#popup ol{
    margin:0 0 8px 0;
    padding-left:20px;
}

#popup li{
    margin:2px 0;
}

#popup code{
    background:rgba(255,255,255,0.08);
    color:#f7d794;
    padding:1px 4px;
    border-radius:4px;
    font-family:Consolas, "Courier New", monospace;
    font-size:0.92em;
}

#popup pre{
    margin:0 0 8px 0;
    background:rgba(255,255,255,0.06);
    border:1px solid rgba(255,255,255,0.08);
    border-radius:6px;
    padding:8px;
    overflow-x:auto;
}

#popup pre code{
    background:transparent;
    padding:0;
    color:#e9ecf3;
}

#popup a{
    color:#9ec6ff;
    text-decoration:none;
}

#popup a:hover{
    text-decoration:underline;
}