*{box-sizing:border-box}
html,body{height:100%;margin:0;font-family:'Inter',system-ui,sans-serif;background:var(--chrome);color:var(--ink);overflow:hidden}
.app{display:flex;flex-direction:column;height:100vh}

header{display:flex;align-items:center;gap:12px;padding:0 14px;height:54px;background:var(--header);border-bottom:1px solid var(--border);flex:0 0 auto;z-index:30}
.brand{display:flex;align-items:center;gap:9px;font-weight:700;letter-spacing:-.01em}
.brand .sub{font-weight:500;color:var(--muted);font-size:12px;border-left:1px solid var(--border);padding-left:9px;margin-left:2px}
.brandFile{border-left:1px solid var(--border);padding-left:9px;margin-left:2px}
.brandFile .hbtn{padding:8px 13px;border-radius:10px;background:var(--surface);font-size:14px}
#projName{background:transparent;border:1px solid transparent;color:var(--ink);font:600 14px 'Inter';padding:6px 9px;border-radius:7px;width:190px;transition:.15s}
#projName:hover{border-color:var(--border)} #projName:focus{outline:none;border-color:var(--accent-2);background:var(--chrome)}
.spacer{flex:1}
.accountEmail{max-width:230px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--muted);font:600 13px 'Inter'}
.hbtn{display:inline-flex;align-items:center;gap:7px;background:var(--surface);border:1px solid var(--border);color:var(--ink);padding:7px 11px;border-radius:8px;font:600 13px 'Inter';cursor:pointer;transition:.12s;white-space:nowrap}
.hbtn:hover{border-color:var(--accent-2);transform:translateY(-1px)}
.hbtn.primary{background:var(--accent);border-color:var(--accent);color:#241402}
.hbtn.danger{background:var(--danger);border-color:var(--danger);color:#fff}
.hbtn svg{display:block}
.fileMenu{position:relative}
.fileDrop{position:absolute;top:40px;left:0;min-width:178px;background:var(--surface);border:1px solid var(--border);border-radius:10px;box-shadow:0 14px 34px rgba(0,0,0,.45);padding:6px;display:none;z-index:80}
.fileDrop.show{display:block}
.fileDrop button{width:100%;display:block;text-align:left;background:transparent;border:0;color:var(--ink);border-radius:7px;padding:10px 11px;font:600 13px 'Inter';cursor:pointer}
.fileDrop button:hover{background:var(--chrome);color:var(--accent)}

.body{display:flex;flex:1;min-height:0}

.rail{flex:0 0 62px;background:var(--header);border-right:1px solid var(--border);display:flex;flex-direction:column;align-items:center;padding:10px 0;gap:3px;z-index:20}
.tool{position:relative;width:44px;height:44px;border-radius:10px;border:1px solid transparent;background:transparent;color:var(--muted);cursor:pointer;display:flex;align-items:center;justify-content:center;transition:.12s}
.tool:hover{background:var(--surface);color:var(--ink)}
.tool.active{background:var(--accent);color:#241402;border-color:var(--accent)}
.tool .tip{position:absolute;left:52px;top:50%;transform:translateY(-50%);background:#0e131b;color:#fff;padding:5px 9px;border-radius:6px;font:500 12px 'Inter';white-space:nowrap;opacity:0;pointer-events:none;transition:.12s;z-index:50;box-shadow:0 4px 14px rgba(0,0,0,.4)}
.tool .tip b{font-family:var(--mono);font-weight:600;opacity:.6;font-size:11px;margin-left:6px}
.tool:hover .tip{opacity:1}
.rail .div{width:28px;height:1px;background:var(--border);margin:5px 0}

.status{flex:0 0 auto;height:34px;background:var(--header);border-top:1px solid var(--border);display:flex;align-items:center;gap:16px;padding:0 14px;font:500 12px var(--mono);color:var(--muted);z-index:20}
.status .hint{color:var(--ink);font-family:'Inter';font-weight:500}
.status .grow{flex:1}
.status .toggle{display:inline-flex;align-items:center;gap:6px;cursor:pointer;user-select:none;font-family:'Inter'}
.status .toggle input{accent-color:var(--accent)}
.zoombtns{display:flex;gap:4px;align-items:center}
.zoombtns button{width:24px;height:24px;border-radius:6px;border:1px solid var(--border);background:var(--surface);color:var(--ink);cursor:pointer;font-size:15px;line-height:1;padding:0}
.zoombtns button:hover{border-color:var(--accent-2)}
.iconBtn{width:24px;height:24px;border-radius:6px;border:1px solid var(--border);background:var(--surface);color:var(--ink);cursor:pointer;display:inline-flex;align-items:center;justify-content:center;padding:0}
.iconBtn:hover{border-color:var(--accent-2)}
.iconBtn.off{color:var(--muted);opacity:.5}
.bgSwatches{display:flex;gap:5px;align-items:center}
.bgSwatches span{width:14px;height:14px;border-radius:50%;cursor:pointer;border:2px solid transparent;box-shadow:inset 0 0 0 1px var(--border)}
.bgSwatches span.sel{border-color:var(--accent)}

input[type=file]{display:none}
::-webkit-scrollbar{width:9px;height:9px}::-webkit-scrollbar-thumb{background:var(--border);border-radius:6px}