[hidden]{display:none!important} /* author display rules (e.g. .bg-row) must not override [hidden] */
:root{
  --black:#101010; --scarlet:#B11016; --maroon:#7E011F; --white:#FFFFFF;
  --bg:#15161a; --panel:#1c1e24; --panel2:#23262e; --line:#2e323c;
  --txt:#e9eaee; --muted:#9aa0ad; --accent:#B11016;
}
*{box-sizing:border-box;margin:0}
html,body{height:100%}
body{background:var(--bg);color:var(--txt);font-family:Inter,system-ui,Arial,sans-serif;font-size:13px;overflow:hidden}
button{font-family:inherit;cursor:pointer}
.muted{color:var(--muted)}

/* topbar */
.topbar{display:flex;align-items:center;gap:14px;height:54px;padding:0 14px;background:var(--panel);border-bottom:1px solid var(--line)}
.brand{font-weight:800;font-size:17px;letter-spacing:.02em}
.brand .s{color:var(--scarlet)}
.proj{display:flex;align-items:center;gap:8px}
.title-input{background:var(--panel2);border:1px solid var(--line);color:var(--txt);border-radius:8px;padding:7px 10px;width:200px;font-weight:600}
.sel{background:var(--panel2);border:1px solid var(--line);color:var(--txt);border-radius:8px;padding:7px 8px}
.sel.small{padding:6px}
.sel.full{width:100%}
.spacer{flex:1}
.actions{display:flex;align-items:center;gap:8px}
.btn{background:var(--panel2);border:1px solid var(--line);color:var(--txt);border-radius:8px;padding:8px 12px;font-weight:600}
.btn:hover{border-color:#444a57}
.btn.primary{background:var(--scarlet);border-color:var(--scarlet);color:#fff}
.btn.primary:hover{filter:brightness(1.08)}
.save-state{color:var(--muted);min-width:64px;text-align:center;font-size:12px}

/* layout */
.layout{display:grid;grid-template-columns:312px 1fr 280px;height:calc(100vh - 54px)}
.panel{background:var(--panel);overflow-y:auto;overflow-x:hidden;padding:12px;min-width:0}
.panel.left{border-right:1px solid var(--line);display:flex;padding:0;overflow:hidden}

/* ── left icon rail + tab panes (Canva-style) ─────────────────────────────── */
.rail{display:flex;flex-direction:column;gap:2px;padding:8px 4px;border-right:1px solid var(--line);background:var(--panel2);flex:0 0 62px}
.rail button{background:none;border:none;color:var(--muted);font:600 10px Inter,system-ui,sans-serif;padding:8px 2px;border-radius:8px;cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:3px}
.rail button .ric{font-size:17px;line-height:1}
.rail button:hover{color:var(--txt);background:rgba(255,255,255,.05)}
.rail button.on{color:#fff;background:var(--scarlet)}
body.readonly .rail button:not([data-tab="layers"]){display:none}
.tabpanes{flex:1;overflow-y:auto;overflow-x:hidden;padding:12px;min-width:0}
.tabpane{display:none}
.tabpane.on{display:block}

/* shapes grid */
.shape-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:6px}
.shp{background:var(--panel2);border:1px solid var(--line);border-radius:8px;height:44px;cursor:pointer;display:flex;align-items:center;justify-content:center;padding:8px}
.shp:hover{border-color:var(--scarlet)}
.shp i{display:block;width:24px;height:24px;background:#cfd3dd}
.clip-triangle{clip-path:polygon(50% 0%,0% 100%,100% 100%)}
.clip-star{clip-path:polygon(50% 0%,61.5% 38.5%,100% 38.5%,68.75% 62.6%,80.2% 100%,50% 76.9%,19.8% 100%,31.25% 62.6%,0% 38.5%,38.5% 38.5%)}
.clip-arrow{clip-path:polygon(0% 30%,60% 30%,60% 0%,100% 50%,60% 100%,60% 70%,0% 70%)}
.clip-chevron{clip-path:polygon(0% 0%,75% 0%,100% 50%,75% 100%,0% 100%,25% 50%)}
.clip-hexagon{clip-path:polygon(25% 0%,75% 0%,100% 50%,75% 100%,25% 100%,0% 50%)}
.clip-pentagon{clip-path:polygon(50% 0%,100% 38%,81% 100%,19% 100%,0% 38%)}
.clip-diamond{clip-path:polygon(50% 0%,100% 50%,50% 100%,0% 50%)}
.clip-parallelogram{clip-path:polygon(22% 0%,100% 0%,78% 100%,0% 100%)}
.clip-plus{clip-path:polygon(35% 0%,65% 0%,65% 35%,100% 35%,100% 65%,65% 65%,65% 100%,35% 100%,35% 65%,0% 65%,0% 35%,35% 35%)}
.clip-sparkle{clip-path:polygon(50% 0%,59% 41%,100% 50%,59% 59%,50% 100%,41% 59%,0% 50%,41% 41%)}
.clip-bubble{clip-path:polygon(0% 0%,100% 0%,100% 72%,32% 72%,14% 100%,17% 72%,0% 72%)}

/* text presets */
.preset-list{display:flex;flex-direction:column;gap:6px}
.tpreset{background:var(--panel2);border:1px solid var(--line);border-radius:8px;color:#fff;padding:10px;cursor:pointer;text-align:left}
.tpreset:hover{border-color:var(--scarlet)}

/* asset library */
.asset-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;max-height:340px;overflow-y:auto}
.asset-grid img{width:100%;height:56px;object-fit:cover;border-radius:6px;border:1px solid var(--line);cursor:pointer;display:block;background:#000}
.asset-grid img:hover{border-color:var(--scarlet)}

/* topbar dropdowns */
.dd{position:relative}
.dd-menu{display:none;position:absolute;right:0;top:calc(100% + 6px);background:var(--panel2);border:1px solid var(--line);border-radius:10px;min-width:190px;z-index:200;box-shadow:0 12px 32px rgba(0,0,0,.5);padding:4px}
.dd.open .dd-menu{display:block}
.dd-menu.pad{padding:10px;display:none;flex-direction:column;gap:8px}
.dd.open .dd-menu.pad{display:flex}
.dd-menu>button{display:block;width:100%;text-align:left;background:none;border:none;color:var(--txt);font:500 13px Inter,system-ui,sans-serif;padding:8px 10px;border-radius:7px;cursor:pointer;white-space:nowrap}
.dd-menu>button:hover{background:rgba(255,255,255,.07)}
.dd-field{display:flex;align-items:center;justify-content:space-between;gap:10px;color:var(--muted);font-size:12px}

/* context toolbar above the canvas */
.ctx-bar{position:absolute;top:8px;left:50%;transform:translateX(-50%);z-index:40;background:var(--panel2);border:1px solid var(--line);border-radius:10px;box-shadow:0 8px 24px rgba(0,0,0,.45);display:flex;align-items:center;gap:6px;padding:5px 8px;max-width:calc(100% - 24px);flex-wrap:wrap}
.ctx-bar select,.ctx-bar input[type=number]{background:var(--panel);border:1px solid var(--line);color:var(--txt);border-radius:6px;padding:4px 6px;font-size:12px}
.ctx-bar input[type=number]{width:56px}
.ctx-bar input[type=color]{width:26px;height:26px;border:1px solid var(--line);border-radius:6px;background:none;padding:1px;cursor:pointer}
.ctx-bar input[type=range]{width:70px}
.ctx-bar .cbtn{background:var(--panel);border:1px solid var(--line);color:var(--txt);border-radius:6px;min-width:26px;height:26px;font-size:13px;cursor:pointer;padding:0 6px}
.ctx-bar .cbtn:hover{border-color:#4a5160}
.ctx-bar .cbtn.on{border-color:var(--scarlet);background:#2a1416}
.ctx-bar .sep{width:1px;height:20px;background:var(--line);margin:0 2px}

/* right-click context menu */
.ctx-menu{position:fixed;z-index:100000;background:var(--panel2);border:1px solid var(--line);border-radius:10px;box-shadow:0 12px 32px rgba(0,0,0,.55);padding:4px;min-width:190px}
.ctx-menu button{display:flex;justify-content:space-between;gap:14px;width:100%;text-align:left;background:none;border:none;color:var(--txt);font:500 13px Inter,system-ui,sans-serif;padding:7px 10px;border-radius:7px;cursor:pointer}
.ctx-menu button:hover{background:rgba(255,255,255,.07)}
.ctx-menu button .k{color:var(--muted);font-size:11px}
.ctx-menu hr{border:none;border-top:1px solid var(--line);margin:4px 6px}

/* alignment grid overlay (display only — hidden during export) */
.grid-overlay{position:absolute;inset:0;pointer-events:none;z-index:99990;background-image:linear-gradient(rgba(255,255,255,.07) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.07) 1px,transparent 1px);background-size:90px 90px}
.panel.right{border-left:1px solid var(--line)}
.group{background:var(--panel2);border:1px solid var(--line);border-radius:10px;padding:10px;margin-bottom:10px}
.group.grow{min-height:160px}
.group-title{font-size:11px;text-transform:uppercase;letter-spacing:.12em;color:var(--muted);margin-bottom:8px;font-weight:700}
.btn-row{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:6px}
.mini{background:var(--panel);border:1px solid var(--line);color:var(--txt);border-radius:7px;padding:7px 9px;font-size:12px;font-weight:600;flex:1 0 auto}
.mini:hover{border-color:#4a5160}
.mini.wide{flex:1 0 46%}
.mini.ai-cta{background:linear-gradient(135deg,var(--scarlet),var(--maroon));border-color:var(--scarlet);color:#fff}
.mini.ai-cta:hover{filter:brightness(1.12)}
.ai-styles{display:flex;flex-wrap:wrap;gap:6px;max-height:150px;overflow:auto}
.ai-styles .ai-style{flex:0 1 auto}
.ai-styles .ai-style.sel{border-color:var(--scarlet);background:#2a1416}
.template-grid{display:grid;grid-template-columns:1fr 1fr;gap:6px}
.tpl{border:1px solid var(--line);border-radius:8px;background:var(--panel);padding:8px 6px;text-align:center;font-size:11px;font-weight:600;color:var(--txt)}
.tpl:hover{border-color:var(--scarlet)}
.tpl .sw{height:34px;border-radius:5px;margin-bottom:5px;background:#000;position:relative;overflow:hidden}

.bg-row{display:flex;gap:6px;align-items:center;margin-bottom:8px}
input[type=color]{width:34px;height:30px;border:1px solid var(--line);border-radius:6px;background:var(--panel);padding:2px}
.row-label{display:block;font-size:11px;color:var(--muted);margin-top:8px}
.row-label input[type=range]{width:100%;margin-top:4px}
.text-input,.text-area{width:100%;background:var(--panel);border:1px solid var(--line);color:var(--txt);border-radius:7px;padding:7px 9px;margin-top:4px;font-family:inherit}
.text-area{resize:vertical}

/* layers */
.layers{list-style:none;display:flex;flex-direction:column;gap:4px}
.layer{display:flex;align-items:center;gap:6px;padding:6px 7px;border:1px solid var(--line);border-radius:7px;background:var(--panel);font-size:12px;cursor:pointer}
.layer.sel{border-color:var(--scarlet);background:#2a1416}
.layer .ico{width:16px;text-align:center;opacity:.8}
.layer .nm{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.layer .lbtn{background:none;border:none;color:var(--muted);padding:2px 4px;border-radius:4px}
.layer .lbtn:hover{color:#fff;background:#333}

/* stage */
.stage-wrap{position:relative;display:flex;background:
  radial-gradient(circle at 50% 40%, #20222a, #111216);overflow:hidden;min-width:0}
.stage-scroll{flex:1;overflow:auto;display:flex;min-width:0;padding:24px}
.stage-scaler{margin:auto;transform-origin:center center}
.stage{position:relative;background:#101010;box-shadow:0 20px 60px rgba(0,0,0,.5);overflow:hidden}
.guide{position:absolute;background:#36c5ff;opacity:0;pointer-events:none;z-index:99999}
.guide.v{width:1px;top:0;bottom:0;left:50%}
.guide.h{height:1px;left:0;right:0;top:50%}
.guide.on{opacity:.9}
.page-bar{position:absolute;bottom:8px;left:50%;transform:translateX(-50%);display:flex;gap:4px;z-index:30;background:rgba(20,22,28,.9);border:1px solid var(--line);border-radius:10px;padding:4px}
.page-bar .pg{background:var(--panel);border:1px solid var(--line);color:var(--txt);border-radius:6px;min-width:26px;height:26px;font-size:12px;font-weight:700;cursor:pointer}
.page-bar .pg.on{background:var(--scarlet);border-color:var(--scarlet);color:#fff}
.page-bar .pg.add{color:var(--muted);font-weight:400}
.page-bar .pg:hover{border-color:#4a5160}
.zoom-hint{position:absolute;bottom:10px;left:12px;color:var(--muted);font-size:11px;z-index:30}
.zoom-ctl{position:absolute;bottom:8px;right:12px;display:flex;gap:4px;z-index:30}
.zoom-ctl button{background:var(--panel);border:1px solid var(--line);color:var(--txt);border-radius:6px;min-width:28px;padding:4px 8px;font-size:13px;cursor:pointer}
.zoom-ctl button:hover{border-color:#4a5160}
.marquee{position:absolute;border:1px dashed var(--scarlet);background:rgba(177,16,22,.08);pointer-events:none;z-index:99997}

/* elements on stage */
.el{position:absolute;cursor:grab;user-select:none}
.el.dragging{cursor:grabbing}
.el .el-content{width:100%;height:100%;outline:none}
.el.selected{outline:2px solid var(--scarlet);outline-offset:0}
.el .handle{position:absolute;width:12px;height:12px;background:#fff;border:2px solid var(--scarlet);border-radius:50%;z-index:10;display:none}
.el.selected .handle{display:block}
.el .handle.nw{left:-6px;top:-6px;cursor:nwse-resize}
.el .handle.ne{right:-6px;top:-6px;cursor:nesw-resize}
.el .handle.sw{left:-6px;bottom:-6px;cursor:nesw-resize}
.el .handle.se{right:-6px;bottom:-6px;cursor:nwse-resize}
.el .handle.e{right:-6px;top:calc(50% - 6px);cursor:ew-resize}
.el .handle.w{left:-6px;top:calc(50% - 6px);cursor:ew-resize}
.el .rot{position:absolute;left:calc(50% - 7px);top:-30px;width:14px;height:14px;border-radius:50%;background:var(--scarlet);border:2px solid #fff;display:none;cursor:grab}
.el.selected .rot{display:block}
.text-el[contenteditable=true]{cursor:text}

/* inspector */
.inspector{margin-bottom:10px}
.empty-ins{color:var(--muted);padding:18px 6px;text-align:center;border:1px dashed var(--line);border-radius:8px}
.ins-group{background:var(--panel2);border:1px solid var(--line);border-radius:10px;padding:10px;margin-bottom:10px}
.ins-row{display:flex;align-items:center;gap:8px;margin-bottom:8px;flex-wrap:wrap}
.ins-row:last-child{margin-bottom:0}
.ins-row label{font-size:11px;color:var(--muted);width:54px;flex-shrink:0}
.ins-row .f{flex:1;display:flex;gap:6px;align-items:center;flex-wrap:wrap;min-width:0}
.ins-group .mini{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ins-row input[type=number],.ins-row input[type=text],.ins-row select{flex:1;min-width:0;background:var(--panel);border:1px solid var(--line);color:var(--txt);border-radius:6px;padding:6px 7px}
.ins-row input[type=range]{flex:1}
.swatches{display:flex;gap:5px;flex-wrap:wrap}
.swatch{width:22px;height:22px;border-radius:5px;border:2px solid #0000;cursor:pointer}
.swatch.sel{border-color:#fff}
.seg{display:flex;border:1px solid var(--line);border-radius:7px;overflow:hidden}
.seg button{flex:1;background:var(--panel);border:none;color:var(--muted);padding:6px;font-weight:700}
.seg button.on{background:var(--scarlet);color:#fff}
.z-row{display:flex;gap:6px}
.z-row .mini{flex:1}

/* modal */
.modal-back{position:fixed;inset:0;background:rgba(0,0,0,.6);display:flex;align-items:center;justify-content:center;z-index:1000}
.modal-back[hidden]{display:none !important}
.modal{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:18px;min-width:420px;max-width:680px;max-height:80vh;overflow:auto}
.modal h3{margin-bottom:12px;font-size:16px}
.modal .m-row{display:flex;gap:8px;margin-bottom:10px}
.modal input.text-input{margin-top:0}
.proj-list{list-style:none;display:flex;flex-direction:column;gap:6px}
.proj-item{display:flex;align-items:center;gap:10px;padding:9px 11px;border:1px solid var(--line);border-radius:9px;background:var(--panel2)}
.proj-item:hover{border-color:var(--scarlet)}
.proj-item .pi-main{flex:1;cursor:pointer}
.proj-item .pi-title{font-weight:700}
.proj-item .pi-sub{color:var(--muted);font-size:11px}
.rev-item{display:flex;align-items:center;gap:10px;padding:8px 10px;border:1px solid var(--line);border-radius:8px;background:var(--panel2);margin-bottom:6px}
.rev-item .ri-main{flex:1}
.tag-pill{display:inline-block;background:#2a1416;border:1px solid var(--scarlet);color:#ffb3b6;border-radius:999px;padding:1px 8px;font-size:10px;margin-right:4px}
.modal .close-x{float:right;background:none;border:none;color:var(--muted);font-size:20px;cursor:pointer;margin-top:-6px}

/* auth */
.user-badge{display:inline-flex;align-items:center;gap:6px;background:var(--panel2);border:1px solid var(--line);color:var(--muted);border-radius:999px;padding:5px 11px;font-size:12px;font-weight:600}
.user-badge .role{color:#fff;background:var(--scarlet);border-radius:999px;padding:1px 7px;font-size:10px;text-transform:uppercase;letter-spacing:.04em}
.user-badge .role.viewer{background:#3a3f4b}
.auth-gate{position:fixed;inset:0;background:radial-gradient(circle at 50% 35%, #1a1c22, #0c0d10);display:flex;align-items:center;justify-content:center;z-index:5000}
/* The class sets display:flex which would otherwise override the [hidden] attribute
   (author CSS beats the UA [hidden]{display:none}); this keeps `hidden` working. */
.auth-gate[hidden]{display:none}
.auth-card{display:flex;flex-direction:column;gap:12px;width:320px;background:var(--panel);border:1px solid var(--line);border-radius:16px;padding:26px}
.auth-brand{font-size:24px;font-weight:800;text-align:center}
.auth-brand .s{color:var(--scarlet)}
.auth-sub{text-align:center;color:var(--muted);font-size:13px;margin-bottom:4px;text-transform:uppercase;letter-spacing:.16em}
.auth-input{background:var(--panel2);border:1px solid var(--line);color:var(--txt);border-radius:9px;padding:11px 13px;font-size:14px;font-family:inherit}
.auth-input:focus{outline:none;border-color:var(--scarlet)}
.auth-btn{width:100%;padding:11px;margin-top:4px}
.auth-err{color:#ff8a8a;font-size:12px;min-height:16px;text-align:center}

/* view-only role */
body.readonly [data-edit]{display:none !important}
body.readonly #btnNew,body.readonly #btnSnap{display:none !important}
body.readonly .el .handle,body.readonly .el .rot{display:none !important}
body.readonly .el{cursor:default}
.ro-note{color:var(--muted);padding:16px 6px;text-align:center;border:1px dashed var(--line);border-radius:8px;font-size:12px}