:root{--bg:#f8f9fc;--panel:#fff;--panel-trans:rgba(255,255,255,.96);--ink:#253348;--muted:#7e8a9e;--line:#e5e9f1;--accent:#6658d9;--accent-bg:#f0edff;--shadow:0 5px 25px #263a5e0b,0 1px 3px #263a5e08;--danger:#c94560;--radius:16px;color-scheme:light;font-family:Inter,ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;font-size:13px}*{box-sizing:border-box}body{margin:0;overflow:hidden;background:var(--bg);color:var(--ink);overscroll-behavior:none}body.dark{--bg:#111d2b;--panel:#192637;--panel-trans:rgba(25,38,55,.97);--ink:#e9eef6;--muted:#9aacc1;--line:#34475b;--accent:#ada2ff;--accent-bg:#2f2b4d;--shadow:0 8px 35px #0003;color-scheme:dark}button,input,select,textarea{font:inherit}button{cursor:pointer;border:0;background:transparent;color:inherit;border-radius:9px;display:inline-flex;align-items:center;justify-content:center;gap:7px;min-height:34px;padding:7px 10px;transition:background .15s,color .15s,box-shadow .15s;white-space:nowrap}button:hover{background:var(--accent-bg);color:var(--accent)}button:disabled{opacity:.34;cursor:default}button:disabled:hover{background:transparent}button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:3px solid #a496f9;outline-offset:3px}button svg,span[data-icon] svg{width:19px;height:19px;display:block;stroke-width:1.7}button span[data-icon]{display:inline-flex}input,textarea,select{color:var(--ink);background:var(--panel);border:1px solid var(--line);border-radius:8px;padding:8px;min-width:0}input[type=checkbox]{accent-color:var(--accent);width:16px;height:16px}input[type=range]{padding:0;accent-color:var(--accent);height:18px;cursor:pointer}input[type=number]{width:85px}input[type=color]{cursor:pointer}input::placeholder,textarea::placeholder{color:var(--muted)}[hidden]{display:none!important}.primary{background:var(--accent);color:white;border:1px solid transparent;box-shadow:0 2px 5px #6658d920}.dark .primary{background:#7765df}.primary:hover{background:#5b4ccb;color:white}.icon-button{width:34px;height:34px;padding:7px;flex-shrink:0}.small{font-size:12px;min-height:30px;padding:5px 9px}.danger{color:var(--danger)!important}.text-button{color:var(--muted);font-size:12px}.topbar{height:66px;position:fixed;inset:0 0 auto;background:var(--panel-trans);border-bottom:1px solid var(--line);display:flex;align-items:center;padding:0 23px;gap:16px;z-index:10;backdrop-filter:blur(18px)}.brand{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--ink);font-size:21px;font-weight:700;letter-spacing:-.8px;line-height:20px;flex-shrink:0}.brand-mark{width:44px;height:38px;display:block;object-fit:contain;object-position:center center;flex:0 0 auto}.brand-text{display:inline-flex;align-items:baseline}.brand-free{color:var(--ink)}.brand-board{color:#5f6fff}.brand-tag{display:block;color:var(--muted);font-size:8px;letter-spacing:2.7px;font-weight:600;margin-top:2px;line-height:10px}.header-divider{height:25px;width:1px;background:var(--line)}#boardTitle{border:0;box-shadow:none;background:transparent;font-size:13px;width:180px;text-overflow:ellipsis;padding:7px 3px}#boardTitle:focus{background:var(--bg)}.mode-switch{display:flex;padding:3px;gap:2px;border:1px solid var(--line);border-radius:11px;background:var(--bg);position:absolute;left:50%;transform:translateX(-50%)}.mode-switch button{min-height:29px;font-size:12px;padding:5px 15px;color:var(--muted);border-radius:7px}.mode-switch button.active{background:var(--panel);color:var(--ink);box-shadow:0 1px 4px #1c2b4112}.mode-switch #proMode.active{color:var(--accent)}.mode-switch svg{width:15px;height:15px}.top-right{display:flex;align-items:center;gap:10px;margin-left:auto}.status{font-size:11px;color:var(--muted);gap:6px;padding:5px}.status i{background:#b9c2cf;width:6px;height:6px;border-radius:50%}.status.online i{background:#27a992}.status.pending i{background:#d9a02c}.status.error i{background:#d64a65}.people{border:1px solid var(--line);font-size:12px;gap:5px;padding:5px 8px}.people svg{width:16px;height:16px}#share{height:35px;font-size:12px;padding:7px 12px}#stage{position:fixed;inset:66px 0 0}#board{width:100%;height:100%;display:block;touch-action:none;outline:none;user-select:none}.empty-state{position:absolute;top:44%;left:50%;transform:translate(-50%,-50%);text-align:center;pointer-events:none;min-width:360px}.empty-state button{pointer-events:auto}.eyebrow{font-size:10px;font-weight:600;letter-spacing:2px;color:var(--muted)}h1{font-size:clamp(38px,4vw,55px);line-height:1.13;letter-spacing:-2.1px;font-weight:600;margin:25px 0 18px}h1 span{color:var(--accent)}.empty-state p{color:var(--muted);font-size:14px;line-height:1.85;margin:0 0 20px}.empty-actions{display:flex;gap:10px;justify-content:center;margin-bottom:11px}.empty-actions button{border:1px solid var(--line);background:var(--panel);padding:10px 15px;font-size:12px;box-shadow:var(--shadow)}kbd{font-family:inherit;background:var(--panel);border:1px solid var(--line);border-bottom-width:2px;padding:1px 5px;border-radius:5px;font-size:11px}.toolrail{position:fixed;top:95px;left:20px;width:68px;padding:7px 5px;display:flex;flex-direction:column;gap:3px;background:var(--panel-trans);border:1px solid var(--line);border-radius:17px;box-shadow:var(--shadow);z-index:6}.toolrail button{display:flex;flex-direction:column;gap:4px;padding:9px 2px;border-radius:10px;min-height:50px;width:56px;color:var(--muted)}.toolrail button svg{width:20px;height:20px}.toolrail button small{font-size:9px;line-height:12px;letter-spacing:0}.toolrail button.active{background:var(--accent-bg);color:var(--accent)}.rail-rule{height:1px;background:var(--line);margin:4px 8px}.contextbar{position:fixed;top:83px;left:50%;transform:translateX(-50%);display:flex;gap:10px;align-items:center;padding:7px 12px;background:var(--panel-trans);border:1px solid var(--line);border-radius:12px;box-shadow:var(--shadow);z-index:6;max-width:calc(100vw - 210px)}.colors{display:flex;gap:9px;align-items:center}.color-dot{width:18px;height:18px;border-radius:50%;padding:0;min-height:18px;box-shadow:inset 0 0 0 1px #0001;position:relative;flex-shrink:0}.color-dot.active:after{content:"";position:absolute;inset:-4px;border:1.5px solid var(--accent);border-radius:50%}.custom-color{width:21px;height:21px;overflow:hidden;border:1px solid var(--line);border-radius:50%;display:block;margin-left:1px;background:conic-gradient(#ff8980,#dfd977,#72c99c,#7995ed,#c19ce9,#ff8980);position:relative}.custom-color input{width:24px;height:24px;opacity:0;position:absolute;inset:-3px;padding:0}.context-rule{height:20px;width:1px;background:var(--line)}.width-control{display:flex;align-items:center;gap:6px}.width-control input{width:68px}.width-control output{font-size:10px;width:20px;color:var(--muted)}#widthPreview{width:14px;height:3px;background:var(--ink);border-radius:8px}.chip{font-size:11px;padding:5px 7px;min-height:27px;color:var(--muted)}.chip svg{width:14px;height:14px}.chip.active{background:var(--accent-bg);color:var(--accent)}.segmented{display:flex;background:var(--bg);padding:2px;border-radius:8px;gap:2px}.segmented button{min-height:26px;font-size:11px;padding:4px 8px}.segmented button.active{background:var(--panel);box-shadow:var(--shadow);color:var(--accent)}.pro-only{display:none!important}body.pro .pro-only{display:inline-flex!important}.panel{background:var(--panel-trans);border:1px solid var(--line);box-shadow:var(--shadow);border-radius:16px;z-index:8;backdrop-filter:blur(15px)}.left-panel{position:fixed;top:143px;left:103px;width:304px;max-height:calc(100dvh - 227px);overflow:hidden;display:flex;flex-direction:column}.panel-title{display:flex;align-items:center;justify-content:space-between;padding:13px 13px 9px 18px;flex-shrink:0}.panel-title h2{font-size:14px;margin:0;font-weight:600;letter-spacing:-.2px}.panel-title .icon-button{width:28px;height:28px;min-height:28px;color:var(--muted)}#panelContent{padding:0 14px 14px;overflow:auto;scrollbar-width:thin}.search-input{width:100%;margin:1px 0 10px;font-size:12px;background:var(--bg);padding:9px 11px}.tabs{display:flex;gap:3px;border-bottom:1px solid var(--line);padding-bottom:8px;margin-bottom:8px;flex-wrap:wrap}.tabs button{font-size:10px;min-height:27px;padding:5px 7px}.tabs button.active{background:var(--accent-bg);color:var(--accent)}.tool-grid{display:grid;grid-template-columns:1fr 1fr;gap:6px}.geo-option{border:1px solid var(--line);border-radius:10px;min-height:70px;padding:10px 8px;display:flex;flex-direction:column;align-items:flex-start;gap:6px;text-align:left;white-space:normal;font-size:11px;line-height:1.3}.geo-option .geo-symbol{font-size:22px;color:var(--accent);font-family:Georgia,serif;line-height:23px}.geo-option.active{border-color:var(--accent);background:var(--accent-bg)}.panel-note{color:var(--muted);font-size:11px;line-height:1.65;margin:12px 0 5px}.geo-config{display:flex;align-items:center;gap:9px;flex-wrap:wrap;font-size:11px;color:var(--muted);margin:8px 0 12px}.geo-config input{width:60px;padding:5px}.inspector{position:fixed;right:20px;top:143px;width:280px;max-height:calc(100dvh - 227px);display:flex;flex-direction:column;overflow:hidden}#inspectorContent{padding:0 16px 16px;overflow:auto;scrollbar-width:thin}.property{display:flex;align-items:center;justify-content:space-between;gap:9px;margin:10px 0;font-size:11px}.property input:not([type=checkbox]):not([type=range]):not([type=number]){width:145px}.property select{max-width:168px;font-size:11px}.property input[type=range]{width:132px}.property output{font-variant-numeric:tabular-nums;min-width:35px;text-align:right}.property.full{display:block}.property.full label{display:block;margin-bottom:7px;color:var(--muted)}.property.full textarea{width:100%;min-height:80px;resize:vertical;font-size:13px;line-height:1.5}.property .numeric{display:flex;gap:5px;align-items:center}.quick-actions{display:flex;gap:5px;flex-wrap:wrap;margin:12px 0}.quick-actions button{background:var(--bg);border:1px solid var(--line);font-size:10px;padding:6px 8px;white-space:normal;text-align:left;justify-content:flex-start}.action-grid{display:grid;grid-template-columns:1fr 1fr;gap:6px}.action-grid button{font-size:11px;border:1px solid var(--line)}.action-grid button svg{width:15px;height:15px}.metric{display:flex;justify-content:space-between;font-size:11px;padding:7px 0;border-bottom:1px solid var(--line)}.metric strong{font-weight:500;font-variant-numeric:tabular-nums}.section-label,.menu-label{font-size:9px;letter-spacing:1.5px;font-weight:600;color:var(--muted);margin:16px 0 9px}.info-box{background:var(--accent-bg);border-radius:10px;padding:10px 12px;font-size:11px;line-height:1.7;color:var(--accent);margin:10px 0}.warning{color:var(--danger);font-size:11px;line-height:1.7;margin:10px 0}.more-menu{position:fixed;right:20px;top:75px;width:300px;padding:9px 11px;max-height:calc(100dvh - 100px);overflow:auto;z-index:14}.more-menu .menu-label{margin:10px}.more-menu>button{display:flex;width:100%;text-align:left;justify-content:flex-start;font-size:11px;padding:9px 8px;white-space:normal}.more-menu button small{font-size:9px;color:var(--muted);margin-left:auto}.more-menu>button svg{width:17px;height:17px;flex-shrink:0}.menu-field{display:flex;justify-content:space-between;align-items:center;gap:8px;font-size:11px;padding:6px 9px}.menu-field select{padding:6px;font-size:11px}hr{height:1px;background:var(--line);border:0;margin:10px 0}.bottom-left{position:fixed;left:20px;bottom:21px;display:flex;align-items:center;gap:7px;z-index:6}.floating-button,.history-controls,.zoom-controls{background:var(--panel-trans);border:1px solid var(--line);box-shadow:var(--shadow);border-radius:11px}.floating-button{min-height:38px;padding:9px 11px;font-size:11px}.floating-button svg{width:16px;height:16px}.tiny-pill{color:var(--muted);background:var(--bg);padding:3px 5px;border-radius:4px;font-size:9px}.history-controls{display:flex;padding:2px;margin-left:8px}.history-controls .icon-button{width:32px;height:32px;min-height:32px;color:var(--muted)}.hint{position:fixed;bottom:28px;left:50%;transform:translateX(-50%);max-width:calc(100vw - 740px);text-align:center;white-space:normal;color:var(--muted);font-size:11px;line-height:1.5;z-index:4;pointer-events:none;padding:4px 8px;background:var(--panel-trans);border-radius:8px}.zoom-controls{position:fixed;bottom:21px;right:20px;padding:2px;display:flex;align-items:center;z-index:6}.zoom-controls .icon-button{width:31px;height:32px;min-height:32px}.zoom-controls button#zoomReset{font-size:11px;min-width:50px;padding:3px}.zoom-controls>span{width:1px;height:16px;background:var(--line);margin:0 3px}.toast{position:fixed;bottom:83px;left:50%;transform:translate(-50%,10px);opacity:0;pointer-events:none;background:var(--ink);color:var(--panel);font-size:12px;line-height:1.6;padding:11px 18px;max-width:min(90vw,580px);border-radius:12px;box-shadow:var(--shadow);transition:opacity .15s,transform .15s;z-index:40;text-align:center}.toast.visible{opacity:1;transform:translate(-50%,0)}.page-card{margin:8px 0;position:relative;border:1px solid var(--line);padding:8px;border-radius:11px;background:var(--bg)}.page-card.active{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent)}.page-preview{width:100%;height:100px;display:block;background:var(--panel);border-radius:6px;object-fit:contain;cursor:pointer}.page-row{display:flex;align-items:center;gap:3px;margin-top:5px}.page-row input{font-size:11px;border:0;background:transparent;width:100%;padding:5px}.page-row button{width:25px;height:26px;min-height:26px;padding:4px}.page-row button svg{width:14px;height:14px}.pro-card{display:flex;align-items:center;gap:12px;text-align:left;width:100%;padding:14px 11px;border:1px solid var(--line);background:var(--bg);margin-bottom:9px;white-space:normal}.pro-card>span{background:var(--accent-bg);color:var(--accent);border-radius:10px;padding:10px}.pro-card div{flex:1}.pro-card strong{font-size:12px;display:block;margin-bottom:4px}.pro-card small{font-size:10px;color:var(--muted);line-height:1.6}.pro-intro{font-size:12px;line-height:1.7;color:var(--muted);margin:0 0 15px}.command-results{max-height:350px;overflow:auto;display:flex;flex-direction:column;gap:3px}.command-results button{justify-content:flex-start;padding:10px 12px;font-size:12px}.command-results button small{margin-left:auto;font-size:10px;color:var(--muted)}#dropZone{position:absolute;inset:20px;border:2px dashed var(--accent);background:var(--panel-trans);z-index:25;display:flex;align-items:center;justify-content:center;flex-direction:column;border-radius:20px;pointer-events:none;color:var(--accent)}#dropZone svg{width:45px;height:45px}#dropZone h2{font-size:24px;letter-spacing:-.8px;margin:18px 0 0}#dropZone p{color:var(--muted)}#textEditor{position:absolute;z-index:9;padding:4px 7px;background:var(--panel-trans);border:1px dashed var(--accent);min-height:80px;resize:both;box-shadow:var(--shadow);line-height:1.35}#textActions{position:absolute;z-index:10;background:var(--panel);border:1px solid var(--line);border-radius:9px;display:flex;align-items:center;gap:10px;padding:5px 8px;font-size:10px;color:var(--muted)}.busy{position:fixed;inset:0;background:#17273c50;backdrop-filter:blur(3px);display:flex;align-items:center;justify-content:center;z-index:60}.busy>div{width:min(90vw,390px);border-radius:18px;background:var(--panel);padding:30px;display:flex;align-items:center;flex-direction:column;gap:18px;box-shadow:var(--shadow)}.busy strong{font-size:14px;text-align:center;font-weight:500;line-height:1.6}.busy progress{width:100%;height:5px;accent-color:var(--accent)}.spinner{width:22px;height:22px;border:2px solid var(--line);border-top-color:var(--accent);border-radius:50%;animation:spin 1s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}dialog{border:1px solid var(--line);border-radius:20px;padding:0;width:min(540px,calc(100vw - 32px));color:var(--ink);background:var(--panel);box-shadow:0 30px 100px #17273c35;max-height:calc(100dvh - 45px)}dialog::backdrop{background:#17273c55;backdrop-filter:blur(4px)}#modalContent{padding:27px}dialog h2{font-size:22px;letter-spacing:-.8px;font-weight:600;margin:0 0 10px}dialog p{font-size:12px;line-height:1.8;color:var(--muted)}dialog .dialog-actions{display:flex;justify-content:flex-end;gap:8px;margin-top:22px}dialog label{font-size:12px}dialog input[type=text],dialog textarea{width:100%;margin:8px 0}dialog .choice{display:flex;gap:12px;padding:13px 12px;margin-top:9px;border:1px solid var(--line);border-radius:11px;align-items:flex-start;cursor:pointer}dialog .choice small{display:block;color:var(--muted);font-size:11px;line-height:1.6;margin-top:4px}dialog .choice input{margin-top:2px;accent-color:var(--accent)}.help-grid{display:grid;grid-template-columns:1fr 1fr;gap:6px 15px;font-size:11px;line-height:1.8}.help-grid span{display:flex;gap:8px;justify-content:space-between}.focus-mode .topbar,.focus-mode .toolrail,.focus-mode .contextbar,.focus-mode .panel,.focus-mode .bottom-left,.focus-mode .zoom-controls,.focus-mode .hint{display:none!important}.focus-mode #stage{inset:0}.focus-mode:after{content:"Esc — show tools";position:fixed;bottom:15px;left:50%;transform:translateX(-50%);color:var(--muted);font-size:11px;background:var(--panel);padding:5px 10px;border-radius:8px;pointer-events:none}
@media(max-width:1250px){#boardTitle{width:120px}.topbar{gap:11px;padding:0 18px}.status span{display:none}.top-right{gap:7px}.hint{max-width:calc(100vw - 630px);font-size:10px}.contextbar{gap:8px}.colors{gap:8px}.width-control input{width:53px}.chip span:not([data-icon]){display:none}}
@media(max-width:950px){.brand{font-size:18px;gap:7px}.header-divider,#boardTitle{display:none}.inspector{width:255px}.mode-switch{left:47%}.hint{bottom:77px;max-width:calc(100vw - 260px);background:var(--panel-trans)}.contextbar{max-width:calc(100vw - 125px);left:calc(50% + 38px)}.top-right{gap:4px}.status{padding:4px}.people{padding:5px}.colors{gap:7px}.chip{padding:5px}.left-panel{width:280px}.width-control input{width:48px}}
@media(max-width:680px){.topbar{height:57px;padding:0 11px;gap:9px}.brand{font-size:16px}.brand-mark{width:30px;height:30px;font-size:28px;border-radius:9px}.brand-tag{font-size:6px;letter-spacing:2px;line-height:8px}.mode-switch{position:static;transform:none;margin-left:auto}.mode-switch button{padding:4px 9px;font-size:10px;min-height:27px}.mode-switch svg{width:12px;height:12px}.top-right{margin-left:0;gap:2px}.status,.people{display:none}#share{padding:7px;width:32px;height:32px}#share>span:not([data-icon]){display:none}.top-right>.icon-button{width:29px}#stage{top:57px}.contextbar{top:68px;left:12px;right:12px;transform:none;max-width:none;justify-content:center;padding:7px 9px;gap:8px;min-height:39px}.color-dot{width:16px;height:16px;min-height:16px}.colors{gap:9px}.custom-color{width:18px;height:18px}.width-control{gap:4px}.width-control input{width:48px}.width-control output{width:14px}.contextbar .context-rule{margin:0 1px}.chip{padding:3px;min-height:24px}.chip svg{width:15px;height:15px}#widthPreview{display:none}.segmented button{font-size:9px;padding:4px 5px}.toolrail{top:auto;bottom:12px;left:50%;transform:translateX(-50%);width:auto;max-width:calc(100vw - 18px);flex-direction:row;padding:5px;gap:0;border-radius:14px;overflow-x:auto;scrollbar-width:none}.toolrail button{min-width:39px;width:39px;min-height:43px;padding:6px 1px;gap:3px;border-radius:8px}.toolrail button svg{width:18px;height:18px}.toolrail button small{font-size:7px;line-height:9px}.rail-rule{display:none}.toolrail #proToolsButton{min-width:40px}.bottom-left{bottom:76px;left:12px;gap:4px}.floating-button{min-height:32px;font-size:10px;padding:6px 8px}.floating-button svg{width:14px;height:14px}.floating-button.icon-button{width:29px;height:32px}.history-controls{padding:0;margin-left:3px}.history-controls .icon-button{width:27px;height:30px;min-height:30px}.history-controls svg{width:16px;height:16px}#pageLabel{max-width:70px;overflow:hidden;text-overflow:ellipsis}.tiny-pill{font-size:8px;padding:2px 4px}.zoom-controls{bottom:76px;right:12px;padding:0}.zoom-controls .icon-button{width:27px;height:30px;min-height:30px}.zoom-controls button#zoomReset{font-size:10px;min-width:39px}.zoom-controls #zoomOut,.zoom-controls #zoomIn{display:none}.zoom-controls svg{width:16px;height:16px}.hint{bottom:117px;max-width:calc(100vw - 35px);font-size:10px;width:max-content}.left-panel{top:119px;left:12px;width:min(304px,calc(100vw - 24px));max-height:calc(100dvh - 257px)}.inspector{top:119px;right:12px;width:min(280px,calc(100vw - 24px));max-height:calc(100dvh - 257px)}.more-menu{right:10px;top:64px;max-height:calc(100dvh - 90px)}.empty-state{top:43%;min-width:0;width:calc(100vw - 28px)}h1{font-size:37px;margin:20px 0 14px;letter-spacing:-1.5px}.eyebrow{font-size:8px;letter-spacing:1.7px}.empty-state p{font-size:12px;line-height:1.85}.empty-actions button{font-size:11px;padding:8px 12px}.empty-state .text-button{font-size:11px}.toast{bottom:148px;width:max-content;max-width:90vw;font-size:11px}dialog{width:calc(100vw - 24px)}#modalContent{padding:21px}.help-grid{grid-template-columns:1fr}.focus-mode #stage{inset:0}}
@media(max-height:710px) and (min-width:681px){.toolrail{top:84px;padding:4px}.toolrail button{min-height:41px;padding:6px 2px;gap:2px}.toolrail button svg{width:18px;height:18px}.toolrail small{font-size:8px}.rail-rule{margin:2px 8px}.left-panel,.inspector{max-height:calc(100dvh - 215px)}.contextbar{top:79px}.empty-state h1{font-size:40px;margin:17px 0}}
@media(prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}
/* Content inside progressive panels */
.wide-button{width:100%;margin:5px 0;white-space:normal;line-height:1.45;text-align:left}.geometry-options,details{font-size:11px;border-top:1px solid var(--line);margin:12px 0;padding-top:12px}summary{cursor:pointer;color:var(--muted);padding:3px 0}.studio-card{width:100%;padding:14px 10px;gap:12px;justify-content:flex-start;border:1px solid var(--line);margin:5px 0;text-align:left;white-space:normal}.studio-card strong{display:block;font-size:12px;font-weight:600;margin-bottom:5px}.studio-card small{display:block;font-size:11px;color:var(--muted);font-weight:400;line-height:1.5}.studio-icon{color:var(--accent);background:var(--accent-bg);padding:9px;border-radius:11px;display:flex;flex-shrink:0}.page-card{border:1px solid var(--line);border-radius:12px;padding:7px;margin:10px 0}.page-card.active{border-color:var(--accent);background:var(--accent-bg)}.page-open{width:100%;display:flex;flex-direction:column;gap:8px;font-size:11px;white-space:normal;overflow:hidden}.page-open canvas{width:100%;height:auto;max-height:132px;object-fit:contain;background:white;border-radius:6px}.page-open span{display:block;width:100%;text-align:left;overflow-wrap:anywhere}.page-actions{display:flex;justify-content:flex-end;align-items:center;gap:2px}.dialog-head{display:flex;align-items:center;justify-content:space-between;gap:14px}.dialog-head h2{font-size:20px;line-height:1.3;letter-spacing:-.6px;font-weight:600}.dialog-input{width:100%;margin:12px 0}.dialog-note{color:var(--muted);font-size:12px;line-height:1.75;overflow-wrap:anywhere}.dialog-actions{display:flex;justify-content:flex-end;gap:8px;margin-top:20px}.command-list{max-height:350px;overflow:auto}.command-item{display:flex;width:100%;text-align:left;justify-content:flex-start;white-space:normal;border-bottom:1px solid var(--line);padding:10px}#modalContent h3{font-size:13px;margin-top:20px}#textActions{display:flex;gap:10px;align-items:center;font-size:10px;max-width:calc(100vw - 20px)}#textActions span{max-width:200px;line-height:1.5}#modalContent{max-height:calc(100dvh - 70px);overflow:auto}body:not(.pro) #smartPen{display:none!important}#background{max-width:150px}.more-menu button{white-space:normal}.inspector .property.full textarea{min-height:72px}
@media(max-width:680px){.contextbar{gap:5px;padding:7px 8px;max-width:calc(100vw - 16px)}.colors{gap:8px}.contextbar .width-control input{width:44px}.contextbar .width-control output{width:12px}.contextbar .color-dot{width:15px;height:15px;min-height:15px}.contextbar .custom-color{width:18px;height:18px}.contextbar .context-rule{display:none}.contextbar .chip{padding:4px}.contextbar .chip span:not([data-icon]){display:none}.contextbar .width-control{gap:3px}.contextbar #widthPreview{display:none}.contextbar .segmented button{font-size:10px;padding:3px 6px}.page-actions button{min-height:30px}}
.page-jump{width:100%;font-size:11px;margin:2px 0 7px}
/* Pro-only patch: persistent Studio, selection tools, inline controls on narrow screens. */
.pro-docked.inspector{position:static;width:100%;max-height:none;margin-top:16px;border-radius:12px;box-shadow:none;backdrop-filter:none}
.pro-docked #inspectorContent{overflow:visible;padding:0 10px 12px}
.pro-source-preview,.pro-plot-preview{display:block;width:100%;height:auto;border:1px solid var(--line);border-radius:12px;margin:10px 0;background:var(--panel)}
.pro-source-preview{max-height:130px;object-fit:contain;background:#fff}
.pro-formula-input{display:block;width:100%;min-height:70px;resize:vertical;font-size:15px;line-height:1.5;margin:10px 0}
.pro-choice{display:flex;align-items:flex-start;gap:9px;font-size:11px;line-height:1.6;margin:12px 0}
.pro-choice input{margin-top:3px;accent-color:var(--accent);flex-shrink:0}
.pro-feedback{overflow-wrap:anywhere;font-size:12px;line-height:1.6;color:var(--accent);min-height:1em}
.pro-feedback.error{color:#cf4267}
.pro-selection-actions{padding:4px 0;border-bottom:1px solid var(--line)}
.pro-transform{border:1px solid var(--line);border-radius:10px;padding:12px;margin-top:12px;font-size:12px}
.property.pro-range{display:grid;grid-template-columns:minmax(0,1fr) 44px;gap:5px 8px}
.property.pro-range>span{grid-column:1/-1;color:var(--muted)}
.property.pro-range input[type=range]{width:100%;min-width:0;touch-action:pan-y}
.pro-animation{display:flex;gap:8px;margin:10px 0}.pro-animation select{max-width:65px}
.pro-slider-config{display:grid;grid-template-columns:16px repeat(3,minmax(0,1fr));gap:5px;align-items:center;margin:10px 0}
.pro-slider-config input{width:100%;min-width:0;padding:7px 4px;font-size:11px}
.pro-slider-config button{grid-column:2/-1;min-height:28px;font-size:11px}
.pro-solid-controls{margin-bottom:12px}.pro-solid-controls .active{background:var(--accent-bg);color:var(--accent);border-color:var(--accent)}
body.pro .inspector .property>span{min-width:0;overflow-wrap:anywhere}
body.pro .inspector .property input[type=number]{min-width:0;max-width:112px}
body.pro .inspector .property select{min-width:0;max-width:150px}
body.pro .inspector .property input[type=range]{min-width:0;flex:1}
.studio-selection-jump{display:none}
@media(max-width:949px){.studio-selection-jump{display:flex;position:sticky;top:0;z-index:1;background:var(--panel);border:1px solid var(--line);color:var(--accent);font-size:11px;margin:3px 0 8px}}
#studioInspectorDock{scroll-margin-top:48px}
/* My boards library */
.library-page{overflow:auto;min-height:100vh;background:radial-gradient(circle at 18% -10%,#7668df12,transparent 34%),var(--bg)}
.library-topbar{height:72px;position:sticky;top:0;z-index:5;background:var(--panel-trans);border-bottom:1px solid var(--line);backdrop-filter:blur(18px);display:flex;align-items:center;justify-content:space-between;padding:0 max(22px,calc((100vw - 1120px)/2))}
.library-top-actions{display:flex;gap:9px;align-items:center}.library-top-actions .primary{padding-inline:16px}
.library-shell{width:min(1120px,calc(100% - 36px));margin:0 auto;padding:58px 0 70px}.library-hero{max-width:720px;margin-bottom:30px}.library-hero h1{margin:11px 0 12px;font-size:clamp(42px,6vw,66px);letter-spacing:-2.8px}.library-hero p{margin:0;color:var(--muted);font-size:15px;line-height:1.7}
.join-card{display:grid;grid-template-columns:minmax(250px,.8fr) minmax(300px,1.2fr);gap:24px;align-items:center;background:var(--panel);border:1px solid var(--line);border-radius:20px;box-shadow:var(--shadow);padding:22px 24px;margin-bottom:38px}.join-card h2{font-size:15px;margin:0 0 6px}.join-card p{margin:0;color:var(--muted);font-size:11px;line-height:1.6}.join-card form{display:flex;gap:8px}.join-card input{width:100%;background:var(--bg)}.join-card .library-error{grid-column:2;margin-top:-17px;color:var(--danger);min-height:16px}
.library-section-head{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;margin-bottom:14px}.library-section-head h2{font-size:20px;margin:0 0 4px;letter-spacing:-.5px}.library-section-head p{margin:0;color:var(--muted);font-size:11px}.library-search{display:flex;align-items:center;gap:7px;border:1px solid var(--line);background:var(--panel);border-radius:10px;padding-left:10px;color:var(--muted);width:min(280px,42vw)}.library-search input{border:0;background:transparent;width:100%;box-shadow:none;padding-left:0}.library-search input:focus-visible{outline:0}
.library-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:13px}.board-card{background:var(--panel);border:1px solid var(--line);border-radius:17px;box-shadow:0 2px 12px #263a5e08;padding:17px;min-height:210px;display:flex;flex-direction:column;transition:transform .15s,border-color .15s,box-shadow .15s}.board-card:hover{transform:translateY(-2px);border-color:#6658d94a;box-shadow:0 8px 26px #263a5e10}.board-card-top{display:flex;align-items:center;justify-content:space-between}.board-card-mark{width:34px;height:34px;border-radius:10px;background:var(--accent-bg);color:var(--accent);display:flex;align-items:center;justify-content:center;font-size:27px;line-height:1;padding-bottom:4px}.board-badge{font-size:9px;color:var(--muted);border:1px solid var(--line);border-radius:999px;padding:4px 7px}.board-card h3{font-size:16px;line-height:1.35;letter-spacing:-.35px;margin:17px 0 5px;overflow-wrap:anywhere}.board-meta{font-size:10px;color:var(--muted);margin:0 0 8px}.board-card code{display:block;color:var(--muted);font-size:9px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;background:var(--bg);padding:6px 7px;border-radius:7px}.board-actions{display:flex;gap:6px;align-items:center;margin-top:auto;padding-top:16px}.board-actions .primary{flex:1}.board-actions button:not(.primary){border:1px solid var(--line);font-size:10px}.board-actions .icon-button{width:34px;flex:0 0 34px;font-size:18px}.library-empty{text-align:center;background:var(--panel);border:1px dashed var(--line);border-radius:18px;padding:55px 20px}.library-empty-mark{margin:auto;width:46px;height:46px;border-radius:14px;background:var(--accent-bg);color:var(--accent);display:flex;align-items:center;justify-content:center;font-size:35px;padding-bottom:6px}.library-empty h3{font-size:17px;margin:15px 0 5px}.library-empty p,.library-no-results{color:var(--muted);font-size:11px}.library-empty .primary{margin-top:10px}.library-no-results{grid-column:1/-1;padding:34px;text-align:center;border:1px dashed var(--line);border-radius:14px}.library-note{margin-top:25px;color:var(--muted);font-size:11px;line-height:1.7;padding:14px 16px;border-left:3px solid var(--line)}.library-note strong{color:var(--ink)}
@media(max-width:850px){.library-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.join-card{grid-template-columns:1fr}.join-card .library-error{grid-column:1;margin-top:-14px}.library-shell{padding-top:38px}}
@media(max-width:560px){.library-topbar{height:62px;padding:0 12px}.library-topbar .brand{font-size:16px}.library-topbar .brand-mark{width:31px;height:31px;font-size:28px}.library-top-actions .primary{font-size:11px;padding-inline:10px}.library-shell{width:min(100% - 22px,1120px);padding:30px 0 50px}.library-hero h1{font-size:42px;letter-spacing:-2px}.join-card{padding:17px;border-radius:15px;gap:16px}.join-card form{flex-direction:column}.library-section-head{align-items:stretch;flex-direction:column}.library-search{width:100%}.library-grid{grid-template-columns:1fr}.board-card{min-height:190px}}
.more-menu .menu-link{display:flex;align-items:center;gap:7px;min-height:34px;padding:7px 10px;border-radius:9px;color:inherit;text-decoration:none;font-size:inherit}.more-menu .menu-link:hover{background:var(--accent-bg);color:var(--accent)}.more-menu .menu-link svg{width:19px;height:19px;stroke-width:1.7}

/* Accounts + cloud library */
.auth-page{min-height:100vh;overflow:auto;background:radial-gradient(circle at 20% -10%,#7668df18,transparent 35%),radial-gradient(circle at 90% 20%,#2b83d30d,transparent 30%),var(--bg);display:grid;place-items:center;padding:34px 18px}
.auth-shell{width:min(430px,100%)}.auth-brand{display:flex;width:max-content;margin:0 auto 20px}.auth-card{background:var(--panel);border:1px solid var(--line);box-shadow:var(--shadow);border-radius:24px;padding:30px}.auth-card h1{font-size:34px;letter-spacing:-1.6px;margin:10px 0 8px}.auth-card>p{color:var(--muted);font-size:12px;line-height:1.65;margin:0 0 24px}.auth-card form{display:grid;gap:13px}.auth-card label,.account-dialog label{display:grid;gap:6px;font-size:10px;font-weight:700;color:var(--muted);letter-spacing:.02em}.auth-card input,.account-dialog input{width:100%;background:var(--bg)}.auth-submit{width:100%;min-height:42px;margin-top:5px}.auth-switch{display:block;margin:14px auto 0}.auth-error{color:var(--danger)!important;min-height:17px;margin:0!important;font-size:10px!important}.auth-foot{text-align:center;color:var(--muted);font-size:10px;line-height:1.6;margin:16px 20px 0}.invite-card #inviteActions{display:grid;gap:9px}.invite-card #inviteActions .auth-submit{margin:0}
.account-pill{height:38px;display:flex;align-items:center;gap:8px;border:1px solid var(--line);border-radius:999px;background:var(--panel);padding:4px 11px 4px 5px;font-size:10px;font-weight:700}.account-pill>span:first-child{width:28px;height:28px;display:grid;place-items:center;border-radius:50%;background:var(--accent-bg);color:var(--accent);font-size:11px}.account-menu{position:fixed;right:max(20px,calc((100vw - 1120px)/2));top:62px;width:240px;z-index:20;padding:8px}.account-menu-user{display:grid;padding:10px 11px 12px;border-bottom:1px solid var(--line);margin-bottom:5px}.account-menu-user strong{font-size:12px}.account-menu-user span{font-size:9px;color:var(--muted);overflow:hidden;text-overflow:ellipsis}.account-menu button{width:100%;justify-content:flex-start;border:0;background:transparent}.account-dialog{width:min(430px,calc(100vw - 30px));display:grid;gap:12px;padding:22px}.account-dialog .dialog-heading{display:flex;align-items:center;justify-content:space-between}.account-dialog h2{margin:0;font-size:20px}.account-dialog h3{font-size:12px;margin:2px 0}.account-dialog hr{width:100%;border:0;border-top:1px solid var(--line);margin:5px 0}.member-row{display:flex;justify-content:space-between;align-items:center;gap:14px;padding:10px 2px;border-bottom:1px solid var(--line)}.member-row>div{display:grid;min-width:0}.member-row strong{font-size:11px;overflow:hidden;text-overflow:ellipsis}.member-row small{font-size:9px;color:var(--muted);overflow:hidden;text-overflow:ellipsis}.read-only .contextbar{opacity:.72}.read-only .empty-actions{display:none}
@media(max-width:560px){.auth-page{padding:22px 12px}.auth-card{padding:23px 18px;border-radius:19px}.auth-card h1{font-size:30px}.account-pill #accountName{display:none}.account-pill{padding-right:5px}.account-menu{right:10px;top:56px}.library-top-actions{gap:6px}}

/* PDF navigation lives on the document, not in the main toolbars. */
.pdf-toolbar{position:absolute;z-index:4;display:flex;align-items:center;gap:4px;padding:6px;border:1px solid var(--border,#e1e6ef);border-radius:14px;background:var(--paper,#fff);color:var(--ink,#253348);box-shadow:0 5px 20px #25334812;box-sizing:border-box;max-width:calc(100% - 28px);touch-action:none;}
.pdf-toolbar[hidden]{display:none!important}.pdf-toolbar button{flex-shrink:0;min-width:30px;height:34px;padding:3px 7px;border-radius:8px;font-size:12px;background:transparent;border:0;color:inherit;white-space:nowrap;}
.pdf-toolbar button:hover,.pdf-toolbar button.active{background:#6658d916;color:var(--accent,#6658d9)}.pdf-toolbar button:disabled{opacity:.3;cursor:default}.pdf-toolbar button:focus-visible{outline:2px solid var(--accent,#6658d9);outline-offset:1px}
.pdf-toolbar .pdf-step{font-size:26px;line-height:1}.pdf-toolbar .pdf-count{font-variant-numeric:tabular-nums;font-size:12px;min-width:55px;padding:0 3px}.pdf-page-slider{flex:1;min-width:35px;width:70px;height:28px;accent-color:var(--accent,#6658d9)}.pdf-toolbar .icon-button{width:32px;height:34px}.pdf-grip{cursor:grab}.pdf-grip:active{cursor:grabbing}
.dark .pdf-toolbar{background:#192637;border-color:#34475b;color:#e9eef6}.pen-diagnostic{display:block;padding:12px;background:#6658d90c;border:1px solid var(--border,#e1e6ef);border-radius:10px;font:12px/1.7 ui-monospace,monospace;overflow-wrap:anywhere;margin:10px 0}.pen-settings-details{margin:12px 0}.pen-settings-details summary{cursor:pointer;font-weight:600;padding:6px 0}
@media(max-width:500px){.pdf-toolbar{gap:2px;padding:5px}.pdf-toolbar .pdf-page-slider{min-width:25px}.pdf-toolbar button{padding:3px 4px}.pdf-toolbar .pdf-scroll{font-size:11px}.pdf-toolbar .pdf-count{min-width:47px}.pdf-toolbar .icon-button{width:28px;min-width:28px}.pdf-toolbar .pdf-step{min-width:25px}}

body:has(.pdf-toolbar:not([hidden])) .toast{bottom:190px}
@media(max-width:680px){body:has(.pdf-toolbar:not([hidden])) .toast{bottom:243px}}

/* Full action names stay readable; narrow screens stack the controls. */
.property.pen-choice-row{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,250px);align-items:center}
.property.pen-choice-row select{width:100%;max-width:none}
@media(max-width:520px){.property.pen-choice-row{grid-template-columns:1fr;gap:5px}.pen-choice-row>span{font-weight:500}}
/* Board sharing lives in the canvas shell, independently of account pages. */
#modal .share-section{border-top:1px solid var(--line);margin-top:24px;padding-top:20px}
#modal .share-section h3{font-size:16px;line-height:1.4;margin:0 0 14px}
#modal .share-form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px 18px;margin:0 0 16px}
#modal .form-field{display:flex;flex-direction:column;gap:7px;min-width:0;font-size:12px;line-height:1.5;margin:0 0 14px}
#modal .share-form-grid .form-field{margin:0}
#modal .form-field input,#modal .form-field select{width:100%;min-height:39px;font-size:13px}
#modal .share-link{width:100%;font-size:12px;min-height:39px}
#modal .small-note{font-size:12px;line-height:1.75;color:var(--muted);margin:12px 0 16px}
#modal .share-result{border:1px solid var(--line);border-radius:12px;background:var(--accent-bg);padding:16px;margin:18px 0 0;overflow-wrap:anywhere}
#modal .share-result>strong{display:block;font-size:14px}
#modal .share-result .share-link{margin:0 0 12px}
#modal .share-member{display:flex;align-items:center;gap:12px;padding:14px 0;border-bottom:1px solid var(--line)}
#modal .share-member-info{flex:1;min-width:0}
#modal .share-member-info strong,#modal .share-member-info small{display:block;overflow-wrap:anywhere;line-height:1.6}
#modal .share-member-info small{font-size:11px;color:var(--muted);margin-top:3px}
#modal .share-member select{max-width:112px;min-height:34px}
#modal .share-member button{font-size:12px}
#modal .error-message{color:var(--danger)}
@media(max-width:560px){#modal .share-form-grid{grid-template-columns:1fr}#modal .share-member{flex-wrap:wrap}#modal .share-member-info{min-width:100%}}

/* Quiet canvas: essential feedback stays in dialogs and the save indicator. */
.sr-only {position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important;}
.focus-mode::after {display:none!important;content:none!important;}
[hidden] {display:none!important;}
.geo-symbol svg {display:block;width:40px;height:40px;overflow:visible;}
.eraser-popover {position:fixed;z-index:45;transform:translateY(-50%);display:flex;flex-direction:column;gap:8px;min-width:106px;padding:8px;border:1px solid var(--border);background:var(--panel,var(--paper,#fff));box-shadow:0 8px 28px #0002;border-radius:14px;}
.eraser-popover button {height:36px;padding:5px 13px;border:0;border-radius:8px;background:transparent;color:inherit;}
.eraser-popover button.active {background:var(--accent-soft,#7564d52b);color:var(--accent,#7564d5);}
body.dark .eraser-popover {background:#1e2837;color:#eef0fa;}
.save-login-form {display:grid;gap:16px;}
.save-login-form input {box-sizing:border-box;width:100%;padding:12px 14px;border:1px solid var(--border);border-radius:10px;background:var(--paper,#fff);color:inherit;}
.save-login-form details input {margin-top:12px;}
.save-login-form .error-message:empty {display:none;}
.inline-error,.error-message {color:#cd4364;}
.access-message {max-width:480px;margin:15vh auto;padding:24px;line-height:1.6;}
.access-message a {display:inline-block;margin:12px 18px 0 0;}
/* Both eraser selectors use the same button styling. */
.eraser-popover {border-color:var(--line);min-width:100px;gap:8px;}
.segmented button,.eraser-popover button {height:30px;min-height:30px;padding:4px 9px;font-size:11px;border:0;border-radius:6px;background:transparent;color:inherit;}
.segmented button.active,.eraser-popover button.active {background:var(--panel);color:var(--accent);box-shadow:0 1px 4px #0001;}
.save-login-form input {border-color:var(--line);background:var(--panel);}

body.pro .pro-only[hidden]{display:none!important}