* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
html, body { margin: 0; height: 100%; background: #fff; }
#app { position: fixed; inset: 0; }

.hud{
    position: fixed; left: 14px; top: 14px; z-index: 10;
    font-size: 16px;
    font-family: "Lato", sans-serif;
    color: #111; background: rgba(255,255,255,.90);
    padding: 12px 12px; border-radius: 14px;
    box-shadow: 0 10px 28px rgba(0,0,0,.12);
    backdrop-filter: blur(8px);
    width: 520px;
    display: grid; gap: 10px;
    user-select: none;
}
.hint { opacity: .86; }
.panel{
    border: 1px solid rgba(0,0,0,.10);
    border-radius: 12px;
    padding: 10px;
    display: grid;
    gap: 8px;
}
.row{ display:flex; gap:10px; align-items:center; justify-content:space-between; }
.row > * { flex: 1; }
.row .tight { flex: 0 0 auto; }
.modeRow{ display:flex; gap:10px; align-items:center; }
label{ font-weight: 650; display:block; margin-bottom: 4px; }
input[type="file"]{ width: 100%; }

button, select, input[type="color"], input[type="text"], input[type="number"]{
    border-radius: 12px;
    border: 1px solid rgba(0,0,0,.12);
    padding: 9px 10px;
    font-weight: 650;
    font: inherit;
}
button{
    background: #111; color: #fff;
    cursor: pointer;
}
button:hover { background:#222; }
button.secondary{
    background:#fff; color:#111;
}
button.secondary:hover{
    background:#f2f2f2;
}
select{ background:#fff; color:#111; cursor:pointer; }

.small{ opacity:.82; font-size: 11px; }
.divider { height: 1px; background: rgba(0,0,0,.08); margin: 6px 0; }

.sliderRow{ display:flex; gap:10px; align-items:center; }
.sliderRow .name{ width: 110px; font-weight: 650; }
.sliderRow input[type="range"]{ width: 100%; }
.pill{
    font-size: 11px;
    padding: 3px 8px;
    border-radius: 999px;
    border: 1px solid rgba(0,0,0,.12);
    background: #fff;
    color:#111;
    white-space: nowrap;
}

.tabs { display:flex; gap:8px; }
.tabBtn{
    flex: 1;
    background:#fff; color:#111;
}
.tabBtn.active{
    background:#111; color:#fff;
}

/* Editor layout */
.editorWrap{
    display:grid;
    grid-template-columns: 1fr 200px;
    gap: 10px;
    align-items:start;
}
.canvasBox{
    border: 1px solid rgba(0,0,0,.10);
    border-radius: 12px;
    padding: 8px;
    background: rgba(255,255,255,.85);
}
#editorCanvas{
    width: 100%;
    max-width: 300px;
    aspect-ratio: 1 / 1;
    border-radius: 10px;
    display:block;
    background:#fff;
    touch-action: none;
}
.layersBox{
    border: 1px solid rgba(0,0,0,.10);
    border-radius: 12px;
    padding: 8px;
    background: rgba(255,255,255,.85);
    display:grid;
    gap:8px;
}
.layersHeader{
    display:flex; align-items:center; justify-content:space-between;
    gap:8px;
}
.layersList{
    list-style:none;
    padding:0; margin:0;
    display:grid;
    gap:6px;
    max-height: 240px;
    overflow:auto;
}
.layerItem{
    display:flex; align-items:center; gap:6px;
    padding: 6px 8px;
    border-radius: 10px;
    border: 1px solid rgba(0,0,0,.10);
    background:#fff;
    cursor:pointer;
}
.layerItem.active{
    border-color: rgba(17,17,17,.35);
    box-shadow: 0 0 0 3px rgba(17,17,17,.08);
}
.layerName{
    flex:1;
    font-weight:700;
    font-size: 11px;
    overflow:hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.iconBtn{
    width: 34px;
    height: 34px;
    padding: 0;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    border-radius: 10px;
    background:#fff;
    color:#111;
    cursor:pointer;
}
.iconBtn:hover{ background:#f2f2f2; }
.icon{
    font-size: 14px;
    line-height: 1;
}

.previewRow{
    display:flex; gap:8px; flex-wrap:wrap;
    align-items:flex-start;
}
.facePrev{
    width: 96px;
    border:1px solid rgba(0,0,0,.10);
    border-radius: 10px;
    background:#fff;
    padding:6px;
    display:grid;
    gap:4px;
}
.facePrev canvas{
    width: 100%;
    height: auto;
    border-radius: 8px;
    background:#fff;
    display:block;
}
.facePrev .cap{
    font-size: 10px;
    font-weight:800;
    opacity:.8;
    text-align:center;
}