/* qyu.me: one physical cell size drives all panel content, not browser zoom. */
:root{color-scheme:dark;--unit:1px;--font-factor:1;--font-unit:calc(var(--unit)*var(--font-factor));--font:Arial,Helvetica,sans-serif;--font-weight:400;--bg:#111315;--panel:#222527;--header:#3a3d3f;--text:#e7e9e9;--approve:#a2d5bc;--disapprove:#dfa68d;--accent:var(--text);--muted:color-mix(in srgb,var(--text) 70%,var(--panel));--line:color-mix(in srgb,var(--text) 22%,var(--panel));--field:color-mix(in srgb,var(--panel) 84%,var(--bg));--overlay-top:80px;--view-bottom:8px}
*{box-sizing:border-box}html{background:var(--bg);color:var(--text);scrollbar-gutter:stable}html,body{margin:0;min-height:100%;max-width:100%}
body[data-cf-workspace=grid]{width:100%;height:auto;min-height:100dvh;overflow:auto;background:var(--bg);color:var(--text);font:calc(var(--font-unit)*14)/1.5 var(--font);font-weight:var(--font-weight)}
[hidden]{display:none!important}button,input,select,textarea{font:inherit;color:inherit;max-width:100%}button,select{cursor:pointer}button:disabled{opacity:.42;cursor:default}
button{min-height:calc(var(--unit)*34);padding:calc(var(--unit)*6) calc(var(--unit)*10);border:1px solid var(--line);border-radius:calc(var(--unit)*5);background:var(--header);color:var(--text);font-weight:var(--font-weight)}
button:hover:not(:disabled){background:color-mix(in srgb,var(--header) 75%,var(--text) 25%)}input,select,textarea{background:var(--field);border:1px solid var(--line);border-radius:calc(var(--unit)*5);padding:calc(var(--unit)*9);min-width:0;color:var(--text);font-weight:var(--font-weight)}
input::placeholder,textarea::placeholder{color:var(--muted)}button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,a:focus-visible{outline:2px solid var(--text);outline-offset:3px}a{color:inherit}p{overflow-wrap:anywhere}h1,h2,h3,strong,b{font-weight:var(--font-weight)}.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
/* The toolbar is a stable escape hatch; it is intentionally outside grid zoom. */
.toolbar{display:flex;align-items:center;flex-wrap:wrap;gap:10px;padding:12px 16px;border-bottom:1px solid var(--line);background:var(--panel);position:relative;z-index:90;font:13px/1.4 var(--font);font-weight:var(--font-weight)}
.toolbar button,.toolbar select{font:12px/1.4 var(--font);font-weight:var(--font-weight);min-height:34px;height:auto;padding:6px 9px;border-radius:5px}
.brand{display:flex;gap:8px;align-items:center;color:var(--text);text-decoration:none;flex-shrink:0}.brand-mark{width:32px;height:32px;color:var(--text)}.brand>span{font-size:23px;line-height:1.1;letter-spacing:-.8px}.brand small{display:block;font-size:8px;letter-spacing:1.6px;margin-top:4px;color:var(--muted)}
.layout-switch{min-width:100px;max-width:190px}.layout-switch select{width:100%}.sample-tag,.live-sync{font-size:10px;color:var(--muted)}.sample-tag{white-space:nowrap}.live-sync{margin-right:auto}.zoom-controls{display:flex;align-items:center;gap:2px;border:1px solid var(--line);border-radius:6px;padding:2px;white-space:nowrap}.zoom-controls button{border:0;padding:3px 8px;min-height:28px;font-size:14px}.zoom-controls output{font-size:11px;min-width:43px;text-align:center}.zoom-controls #zoomReset{font-size:10px}.toolbar-actions{display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin-left:auto}.toolbar-actions #editButton[aria-pressed=true]{outline:1px solid var(--text)}#cfAccountActions{display:flex;gap:5px;align-items:center}
.workspace-line{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px;padding:11px 12px;font:12px/1.5 var(--font)}.layout-name{display:flex;flex-wrap:wrap;align-items:center;gap:10px;min-width:0}.layout-name input{font-size:12px;width:165px;background:transparent;padding:4px;border:0}.layout-name #savedStatus{font-size:10px;color:var(--muted)}.line-actions{display:flex;flex-wrap:wrap;gap:4px}.line-actions button{font-size:11px;padding:4px 7px;min-height:27px;background:transparent;border:0}.editor-bar{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:0 12px 10px;border:1px solid var(--line);border-radius:6px;padding:9px 12px;background:var(--panel);font:12px/1.5 var(--font)}.editor-bar button{font-size:12px;min-height:30px;padding:4px 8px;flex-shrink:0}
#workspace{width:calc(100% - 24px);margin:0 auto;min-width:0}.canvas{position:relative;isolation:isolate;margin:0 auto;min-height:60dvh;background:var(--bg)}
.grid-markers{position:absolute;inset:0;pointer-events:none;z-index:-1;background:color-mix(in srgb,var(--text) 12%,var(--bg));mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120' viewBox='0 0 120 120'%3E%3Crect x='46' y='46' width='28' height='28' rx='6' fill='black'/%3E%3C/svg%3E");mask-size:var(--pitch) var(--pitch);mask-position:0 0}
.widget{position:absolute;display:flex;flex-direction:column;border:1px solid var(--line);border-radius:calc(var(--unit)*9);background:var(--panel);overflow:hidden;min-width:0;min-height:0;container-type:inline-size;color:var(--text)}
.widget-header{display:flex;align-items:center;gap:calc(var(--unit)*5);height:calc(var(--unit)*35);min-height:calc(var(--unit)*35);padding:0 calc(var(--unit)*9);background:var(--header);border-bottom:1px solid var(--line)}
.widget-header h2{font-size:calc(var(--font-unit)*11);line-height:1.2;margin:0;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex:1}.handle{display:none;color:var(--muted);font-size:calc(var(--font-unit)*15)}.widget-tools{display:flex;align-items:center;gap:calc(var(--unit)*2);margin-left:auto;flex-shrink:0}.widget-tools button{display:grid;place-items:center;width:calc(var(--unit)*22);height:calc(var(--unit)*25);min-height:0;padding:0;background:transparent;border:0;font-size:calc(var(--font-unit)*14)}.widget-tools [data-action=remove]{display:none}.widget-body{min-width:0;min-height:0;flex:1;overflow:auto;padding:calc(var(--unit)*14);scrollbar-width:thin;font:calc(var(--font-unit)*13)/1.5 var(--font);font-weight:var(--font-weight)}
.widget.selected{outline:2px solid var(--text);outline-offset:1px}.editing .handle{display:block}.editing .widget-header{cursor:grab;touch-action:none}.editing .widget-tools [data-action=remove]{display:grid}.resize-grip{display:none;position:absolute;right:0;bottom:0;width:calc(var(--unit)*22);height:calc(var(--unit)*22);min-height:0;border:0;border-radius:0;background:linear-gradient(135deg,transparent 60%,var(--line) 62%,var(--line) 72%,transparent 74%);padding:0;cursor:nwse-resize;touch-action:none}.editing .resize-grip{display:block}.dragging{opacity:.45}.ghost{position:absolute;pointer-events:none;border:2px solid var(--text);background:color-mix(in srgb,var(--text) 12%,transparent);z-index:10;border-radius:calc(var(--unit)*9);display:grid;place-items:center}.ghost span{background:var(--panel);padding:6px 10px;color:var(--text)}
.grid-add{position:absolute;transform:translate(-50%,-50%);display:grid;place-items:center;width:calc(var(--unit)*28);height:calc(var(--unit)*28);font-size:calc(var(--font-unit)*26);line-height:1;padding:0;border-radius:calc(var(--unit)*6);pointer-events:none;background:var(--header);color:var(--text);z-index:3}
.empty-state{position:absolute;top:20px;left:0;width:100%;padding:calc(var(--unit)*20);text-align:center;pointer-events:none}.empty-state h1{font-size:calc(var(--font-unit)*25);margin:8px 0}.empty-state p{color:var(--muted);font-size:calc(var(--font-unit)*13)}.empty-state>div{display:flex;flex-wrap:wrap;justify-content:center;gap:calc(var(--unit)*8);pointer-events:auto}.empty-state button{font-size:calc(var(--font-unit)*12)}.footer{display:flex;flex-wrap:wrap;justify-content:space-between;gap:8px;padding:15px 14px;font:10px/1.5 var(--font);color:var(--muted)}
/* All floating UI is bounded by the visual viewport, not a hard-coded top. */
.drawer{position:fixed;top:var(--overlay-top);bottom:auto;right:8px;width:calc(var(--unit)*370);max-width:calc(100vw - 16px);max-height:calc(100dvh - var(--overlay-top) - var(--view-bottom));padding:calc(var(--unit)*17);background:var(--panel);border:1px solid var(--line);border-radius:calc(var(--unit)*10);z-index:300;box-shadow:0 12px 60px #0007;display:flex;flex-direction:column;overflow:auto;overscroll-behavior:contain;font:calc(var(--font-unit)*13)/1.5 var(--font);font-weight:var(--font-weight)}
.drawer-heading,.dialog-heading{display:flex;align-items:flex-start;gap:calc(var(--unit)*10);justify-content:space-between;flex-shrink:0;background:var(--panel);position:sticky;top:calc(var(--unit)*-17);z-index:2;padding:calc(var(--unit)*4) 0}
.drawer-heading h2,.dialog-heading h2{font-size:calc(var(--font-unit)*21);line-height:1.25;margin:0 0 calc(var(--unit)*12);overflow-wrap:anywhere}.drawer-heading button,.dialog-heading button{width:calc(var(--unit)*30);height:calc(var(--unit)*30);min-height:calc(var(--unit)*30);padding:0;font-size:calc(var(--font-unit)*23);flex-shrink:0;line-height:1}
.search{width:100%;font-size:calc(var(--font-unit)*13);flex-shrink:0}.library-tabs{display:flex;flex-wrap:wrap;gap:calc(var(--unit)*4);margin:calc(var(--unit)*10) 0;flex-shrink:0}.library-tabs button{font-size:calc(var(--font-unit)*11);min-height:calc(var(--unit)*28);padding:calc(var(--unit)*4) calc(var(--unit)*8)}.library-tabs .active{outline:1px solid var(--text)}.panel-library{overflow:auto;min-height:calc(var(--unit)*90);flex:1;scrollbar-width:thin}.library-item{display:flex;gap:calc(var(--unit)*10);align-items:flex-start;width:100%;text-align:left;background:var(--panel);padding:calc(var(--unit)*12);margin-bottom:calc(var(--unit)*7)}.library-icon{display:grid;place-items:center;min-width:calc(var(--unit)*28);font-size:calc(var(--font-unit)*22)}.library-copy{min-width:0;flex:1}.library-copy strong{display:block;font-size:calc(var(--font-unit)*13)}.library-copy small{display:block;font-size:calc(var(--font-unit)*11);color:var(--muted);margin:calc(var(--unit)*5) 0}.library-copy em{font-size:calc(var(--font-unit)*10);font-style:normal}.library-plus{font-size:calc(var(--font-unit)*19)}.drawer-footnote,.theme-note{font-size:calc(var(--font-unit)*11);color:var(--muted);line-height:1.6;flex-shrink:0}
.dimension-fields{display:flex;flex-wrap:wrap;gap:calc(var(--unit)*9);align-items:end}.dimension-fields label{flex:1;min-width:60px;font-size:calc(var(--font-unit)*12)}.dimension-fields input{display:block;width:100%;margin-top:calc(var(--unit)*5)}.dimension-fields>span{font-size:calc(var(--font-unit)*11)}.inspector-actions{display:flex;flex-wrap:wrap;gap:calc(var(--unit)*6);margin:calc(var(--unit)*16) 0}.inspector-actions button{font-size:calc(var(--font-unit)*11)}.inspector>small{font-size:calc(var(--font-unit)*11);color:var(--muted)}
.theme-fields{display:flex;flex-direction:column;gap:calc(var(--unit)*13);min-width:0}.theme-fields label{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:calc(var(--unit)*8);font-size:calc(var(--font-unit)*13)}.theme-fields input[type=color]{width:calc(var(--unit)*55);height:calc(var(--unit)*35);padding:3px;flex-shrink:0}.theme-fields select{max-width:100%;font-size:calc(var(--font-unit)*12)}.theme-fields p{margin:0}#themeContrast{font-size:calc(var(--font-unit)*11)}
dialog{background:var(--panel);color:var(--text);border:1px solid var(--line);border-radius:calc(var(--unit)*10);width:calc(var(--unit)*490);max-width:calc(100vw - 24px);max-height:calc(100dvh - 24px);padding:calc(var(--unit)*20);overflow:auto;font:calc(var(--font-unit)*14)/1.6 var(--font);font-weight:var(--font-weight)}dialog::backdrop{background:#0009}.profile-opt{display:flex;align-items:center;gap:calc(var(--unit)*8);margin:calc(var(--unit)*15) 0}#displayName{display:block;width:100%;margin:calc(var(--unit)*8) 0 calc(var(--unit)*15)}#cfShowName{accent-color:var(--text);width:calc(var(--unit)*18);height:calc(var(--unit)*18);flex-shrink:0}
#toast{position:fixed;bottom:10px;left:50%;transform:translateX(-50%);max-width:calc(100vw - 24px);border:1px solid var(--line);border-radius:6px;background:var(--header);color:var(--text);padding:10px 15px;font:13px/1.5 var(--font);z-index:1800;overflow-wrap:anywhere}
.widget.maximized{position:fixed!important;inset:var(--overlay-top) 10px var(--view-bottom)!important;width:auto!important;height:auto!important;z-index:200}
/* Data displays inherit typography and neutral colour; only actual sides use side colours. */
.value,.mini-total{font-size:calc(var(--font-unit)*31);line-height:1.15;overflow-wrap:anywhere;font-variant-numeric:tabular-nums}.value small,.mini-total small{font-size:calc(var(--font-unit)*12)}.subtext,.muted-label,.reward-foot,.table-meta{font-size:calc(var(--font-unit)*11);color:var(--muted)}.muted-label{font-size:calc(var(--font-unit)*10)}.account-content{height:100%;display:flex;align-items:center;flex-wrap:wrap;gap:calc(var(--unit)*10)}.account-content>div{min-width:0}.avatar{display:grid;place-items:center;flex-shrink:0;border:1px solid var(--line);border-radius:50%;width:calc(var(--unit)*36);height:calc(var(--unit)*36);font-size:calc(var(--font-unit)*12)}.account-content strong{display:block;font-size:calc(var(--font-unit)*13);overflow-wrap:anywhere}.account-content small{font-size:calc(var(--font-unit)*10);color:var(--muted)}.account-buttons{display:flex;flex-wrap:wrap;gap:calc(var(--unit)*5);margin-left:auto}.account-buttons button{font-size:calc(var(--font-unit)*10);min-height:calc(var(--unit)*27);padding:calc(var(--unit)*3) calc(var(--unit)*6)}
.wallet-content{height:100%;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:calc(var(--unit)*7)}.wallet-content>div{min-width:0}.wallet-content .value{font-size:calc(var(--font-unit)*27)}.wallet-tag{font-size:calc(var(--font-unit)*9);border:1px solid var(--line);padding:calc(var(--unit)*3);border-radius:calc(var(--unit)*4)}
.data-table{border-collapse:collapse;table-layout:fixed;width:100%;font-size:calc(var(--font-unit)*12);font-variant-numeric:tabular-nums}.data-table th{font-size:calc(var(--font-unit)*10);text-align:left;color:var(--muted);padding-bottom:calc(var(--unit)*9);font-weight:var(--font-weight)}.data-table td{border-top:1px solid var(--line);padding:calc(var(--unit)*9) 0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.data-table th:first-child,.data-table td:first-child{width:calc(var(--unit)*27)}.data-table th:last-child,.data-table td:last-child{width:calc(var(--unit)*82);text-align:right}.table-meta{margin:calc(var(--unit)*10) 0 0}.no-rows,.sign-in-note{font-size:calc(var(--font-unit)*13);line-height:1.6}.sign-in-note{padding:calc(var(--unit)*14)}.type-vote .sign-in-note{padding:0}
.type-video .widget-body{padding:0;display:grid;place-items:center;overflow:hidden;background:#080a0b}.player-frame{position:relative;aspect-ratio:16/9;background:#080a0b;max-width:100%}.video-heading{display:flex;gap:calc(var(--unit)*8);align-items:center;min-width:0}.on-air{font-size:calc(var(--font-unit)*9);white-space:nowrap}.video-name{min-width:0;overflow:hidden;text-overflow:ellipsis;font-size:calc(var(--font-unit)*10)}.widget-tools .player-sound{width:auto;padding:0 calc(var(--unit)*4);font-size:calc(var(--font-unit)*9)}
.rewards-content{display:flex;flex-direction:column;height:100%;gap:calc(var(--unit)*18)}.reward-breakdown{display:grid;gap:calc(var(--unit)*11);font-size:calc(var(--font-unit)*12)}.reward-breakdown>div{display:flex;flex-wrap:wrap;justify-content:space-between;gap:calc(var(--unit)*6)}.reward-foot{margin-top:auto}.activity-total{text-align:center;font-size:calc(var(--font-unit)*23)}.activity-total small{display:block;color:var(--muted);font-size:calc(var(--font-unit)*8)}.type-activity .widget-body{display:flex;flex-direction:column;gap:calc(var(--unit)*12)}.activity-strip{display:flex;flex-direction:column;justify-content:space-around;gap:calc(var(--unit)*8);flex:1}.activity-row{display:flex;gap:calc(var(--unit)*5);align-items:center;font-size:calc(var(--font-unit)*8)}.activity-bar{display:block;height:calc(var(--unit)*6);max-width:100%;background:var(--text);opacity:.65;border-radius:calc(var(--unit)*2)}.activity-bottom{font-size:calc(var(--font-unit)*8);color:var(--muted);text-align:center}
.logo-button{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:calc(var(--unit)*12);height:100%;width:100%;border:0;background:transparent}.logo-mark{font-size:calc(var(--font-unit)*27);color:var(--text)}.logo-button small{font-size:calc(var(--font-unit)*10)}.logo-image{width:100%;height:100%;object-fit:contain;min-height:0}.notes{width:100%;height:100%;min-height:0;resize:none;border:0;background:transparent;padding:0;font-size:calc(var(--font-unit)*14);line-height:1.8}.type-notes .widget-body{overflow:hidden}.clock-content{display:flex;justify-content:center;flex-direction:column;height:100%;gap:calc(var(--unit)*8)}.clock-value{font-size:calc(var(--font-unit)*30);overflow-wrap:anywhere}.clock-date{font-size:calc(var(--font-unit)*11)}.status-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:calc(var(--unit)*10);font-size:calc(var(--font-unit)*12)}.status-grid span{overflow-wrap:anywhere}.status-grid span:nth-child(even){text-align:right}
.volume-content{display:flex;flex-direction:column;height:100%;gap:calc(var(--unit)*9)}.volume-top,.volume-foot{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:calc(var(--unit)*8)}.volume-top .mini-total{font-size:calc(var(--font-unit)*24)}.volume-chart{display:flex;gap:calc(var(--unit)*5);flex:1;min-height:calc(var(--unit)*50);align-items:stretch}.volume-column{display:flex;align-items:center;justify-content:flex-end;flex-direction:column;gap:calc(var(--unit)*4);flex:1;min-width:0}.volume-bar{display:flex;flex-direction:column-reverse;width:100%;max-width:calc(var(--unit)*27);min-height:2px;overflow:hidden}.volume-bar span:first-child{background:var(--approve)}.volume-bar span:last-child{background:var(--disapprove)}.volume-column small{font-size:calc(var(--font-unit)*8)}.volume-foot{font-size:calc(var(--font-unit)*9)}.legend-approve,.up,[data-side=approve],.qyu-approve{color:var(--approve)}.legend-disapprove,.down,[data-side=disapprove],.qyu-disapprove{color:var(--disapprove)}
/* Original functional controls: override their fixed legacy layout, never clone them. */
body[data-cf-workspace=grid] #stage{position:relative!important;inset:auto!important;display:grid;place-items:center;width:100%;height:100%;min-height:0;transition:none;background:#080a0b}
body[data-cf-workspace=grid] #stage .player{position:relative;width:100%;height:auto!important;aspect-ratio:16/9!important;max-height:100%;background:#080a0b}
body[data-cf-workspace=grid] #video{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;background:#080a0b}
body[data-cf-workspace=grid] :is(#debug,#chatToggle,#metricsPanel){display:none!important}
body[data-cf-workspace=grid] #votePanel{position:static;inset:auto;transform:none;width:100%;display:block;z-index:auto}
body[data-cf-workspace=grid]:not(.signed-in) :is(#votePanel,#chatPanel){display:none!important}
body[data-cf-workspace=grid] .cfFinanceStage{display:flex;flex-direction:column;align-items:stretch;gap:calc(var(--unit)*10);padding:0;border:0;background:none;color:var(--text);font:calc(var(--font-unit)*13)/1.5 var(--font);font-weight:var(--font-weight)}
body[data-cf-workspace=grid] .cfFinanceStage>strong{font:calc(var(--font-unit)*10)/1.6 var(--font);font-weight:var(--font-weight);color:var(--muted);letter-spacing:0}
body[data-cf-workspace=grid] #cfStageBalance{display:none}body[data-cf-workspace=grid] .cfFinanceStage>label{font-size:calc(var(--font-unit)*12)}
body[data-cf-workspace=grid] #cfStageAmount{background:var(--field);border:1px solid var(--line);color:var(--text);width:100%;height:calc(var(--unit)*40);padding:calc(var(--unit)*8);font:calc(var(--font-unit)*19)/1.2 var(--font);font-weight:var(--font-weight);border-radius:calc(var(--unit)*5)}
body[data-cf-workspace=grid] .cfFinanceStage>div{display:flex;flex-direction:column;gap:calc(var(--unit)*10)}
body[data-cf-workspace=grid] .cfFinanceStage button{width:100%;min-height:calc(var(--unit)*38);padding:calc(var(--unit)*8);font:calc(var(--font-unit)*14)/1.4 var(--font);font-weight:var(--font-weight);border-radius:calc(var(--unit)*5)}
body[data-cf-workspace=grid] #cfStageApprove{color:var(--approve);border-color:var(--approve);background:color-mix(in srgb,var(--approve) 12%,var(--panel))}
body[data-cf-workspace=grid] #cfStageDisapprove{color:var(--disapprove);border-color:var(--disapprove);background:color-mix(in srgb,var(--disapprove) 12%,var(--panel))}
body[data-cf-workspace=grid] #cfStageStatus{font-size:calc(var(--font-unit)*12);min-height:calc(var(--unit)*35);line-height:1.6;color:var(--text);overflow-wrap:anywhere}
body[data-cf-workspace=grid] .cfFinanceStage small{font:calc(var(--font-unit)*10)/1.6 var(--font);font-weight:var(--font-weight);text-align:left;color:var(--muted)}
body[data-cf-workspace=grid] #chatPanel{position:static!important;inset:auto!important;transform:none!important;width:100%;height:100%;min-height:0;display:flex;flex-direction:column;z-index:auto;border:0;background:transparent;transition:none;font-family:var(--font)}
.type-chat .widget-body{padding:0;overflow:hidden;display:flex;flex-direction:column}body[data-cf-workspace=grid] #chatHeader{display:none}
body[data-cf-workspace=grid] #chatMessages{flex:1;min-height:0;overflow:auto;padding:calc(var(--unit)*13);scrollbar-width:thin}
body[data-cf-workspace=grid] .chatMessage{padding:calc(var(--unit)*10) 0;border-bottom:1px solid var(--line)}body[data-cf-workspace=grid] .chatTime{font:calc(var(--font-unit)*10)/1.5 var(--font);color:var(--muted)}body[data-cf-workspace=grid] .chatText{font:calc(var(--font-unit)*13)/1.6 var(--font);font-weight:var(--font-weight);color:var(--text);overflow-wrap:anywhere}
body[data-cf-workspace=grid] #chatForm{display:flex;gap:calc(var(--unit)*8);padding:calc(var(--unit)*12);border:0;border-top:1px solid var(--line)}body[data-cf-workspace=grid] #chatInput{width:0;min-width:0;flex:1;font:calc(var(--font-unit)*12)/1.5 var(--font);font-weight:var(--font-weight);background:var(--field);color:var(--text);border:1px solid var(--line);border-radius:calc(var(--unit)*5);padding:calc(var(--unit)*8)}body[data-cf-workspace=grid] #chatSend{width:auto;min-height:calc(var(--unit)*35);font:calc(var(--font-unit)*12)/1.5 var(--font);font-weight:var(--font-weight);color:var(--text);background:var(--header);padding:calc(var(--unit)*4) calc(var(--unit)*8);border:1px solid var(--line)}body[data-cf-workspace=grid] #chatStatus{font-size:calc(var(--font-unit)*11);min-height:0;color:var(--muted);padding:0 calc(var(--unit)*12)}
body[data-cf-workspace=grid] :is(#guestLoginButton,#accountControl){position:relative;inset:auto;transform:none;z-index:91}
body[data-cf-workspace=grid] :is(#guestLoginButton,#accountToggle){font:12px/1.4 var(--font);font-weight:var(--font-weight);min-height:34px;height:auto;padding:6px 9px;background:var(--header);color:var(--text);border:1px solid var(--line);border-radius:5px}
body[data-cf-workspace=grid] #accountMenu{z-index:400;background:var(--panel);color:var(--text);border:1px solid var(--line);border-radius:calc(var(--unit)*9);padding:calc(var(--unit)*15);width:calc(var(--unit)*340);overflow:auto;font:calc(var(--font-unit)*13)/1.6 var(--font);font-weight:var(--font-weight)}
body[data-cf-workspace=grid] #accountMenu :is(button,summary,p,a){font:inherit;font-weight:var(--font-weight);color:var(--text)!important}body[data-cf-workspace=grid] #accountMenu button{background:transparent;height:auto;min-height:calc(var(--unit)*34);padding:calc(var(--unit)*7) 0}body[data-cf-workspace=grid] #accountMenu button:hover,body[data-cf-workspace=grid] #accountMenu summary:hover{background:var(--header)}
body[data-cf-workspace=grid] #authGate{padding:12px;place-items:start center;background:#000b}body[data-cf-workspace=grid] #authCard{width:calc(var(--unit)*420);max-width:100%;max-height:calc(100dvh - 24px);margin:auto 0;background:var(--panel);color:var(--text);border:1px solid var(--line);border-radius:calc(var(--unit)*10);padding:calc(var(--unit)*24);overflow:auto}body[data-cf-workspace=grid] #authClose{position:sticky;float:right;top:0;font:calc(var(--font-unit)*12)/1.4 var(--font);height:auto;background:var(--header);color:var(--text);border:1px solid var(--line);padding:calc(var(--unit)*6)}body[data-cf-workspace=grid] #authCard h1{font:calc(var(--font-unit)*25)/1.4 var(--font);font-weight:var(--font-weight);letter-spacing:0}body[data-cf-workspace=grid] #authCard p{font:calc(var(--font-unit)*12)/1.6 var(--font);color:var(--muted)}body[data-cf-workspace=grid] #authForm{gap:calc(var(--unit)*10);margin-top:calc(var(--unit)*20)}body[data-cf-workspace=grid] #authForm label{font-size:calc(var(--font-unit)*12)}body[data-cf-workspace=grid] #authForm input{height:calc(var(--unit)*44);font:calc(var(--font-unit)*16)/1.4 var(--font);font-weight:var(--font-weight);background:var(--field);color:var(--text);border:1px solid var(--line);padding:calc(var(--unit)*10)}body[data-cf-workspace=grid] #authSubmit{height:auto;min-height:calc(var(--unit)*42);font:calc(var(--font-unit)*14)/1.5 var(--font);font-weight:var(--font-weight);background:var(--header);color:var(--text);border:1px solid var(--line)}
body[data-cf-workspace=grid] .cf-result-block{position:static;max-width:none;width:100%;margin:0;padding:0;border:0;background:transparent;color:var(--text);font:calc(var(--font-unit)*13)/1.6 var(--font);font-weight:var(--font-weight)}body[data-cf-workspace=grid] .cf-result-block h2{font-size:calc(var(--font-unit)*27);line-height:1.25;letter-spacing:0;margin:calc(var(--unit)*10) 0}body[data-cf-workspace=grid] .cf-result-block h3{font-size:calc(var(--font-unit)*13);margin:calc(var(--unit)*17) 0 calc(var(--unit)*10)}body[data-cf-workspace=grid] .cf-result-block p{font-size:calc(var(--font-unit)*12);line-height:1.6}body[data-cf-workspace=grid] .cf-result-block :is(.cf-result-muted,.cf-result-eyebrow){font:calc(var(--font-unit)*10)/1.7 var(--font);color:var(--muted)}body[data-cf-workspace=grid] .cf-result-block dl{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:calc(var(--unit)*8);padding:calc(var(--unit)*12);margin:0;background:var(--field);border:1px solid var(--line);border-radius:calc(var(--unit)*6);font-size:calc(var(--font-unit)*11)}body[data-cf-workspace=grid] .cf-result-block :is(dt,dd){margin:0;max-width:none;float:none;overflow-wrap:anywhere}body[data-cf-workspace=grid] .cf-result-block dd{text-align:right}body[data-cf-workspace=grid] .cf-result-block details{margin-top:calc(var(--unit)*15);font-size:calc(var(--font-unit)*12)}
@media(max-width:700px){.toolbar{gap:8px;padding:10px}.brand>span{font-size:21px}.brand small{font-size:7px}.sample-tag,.live-sync{display:none}.toolbar-actions{width:100%;margin:0;justify-content:space-between;gap:4px}.toolbar-actions button{font-size:11px;padding:5px 7px}.layout-switch{flex:1;max-width:none}.zoom-controls{margin-left:auto}.workspace-line{padding:8px}.layout-name #savedStatus{display:none}.workspace-line .line-actions{margin-left:auto}.line-actions button{font-size:10px;padding:3px 5px}.editor-bar{flex-wrap:wrap;font-size:11px;padding:8px}.footer #footerHint{display:none}#workspace{width:calc(100% - 16px)}}
@media(max-width:370px){.toolbar .brand small{display:none}.toolbar .brand-mark{width:25px;height:25px}.toolbar .layout-switch{max-width:130px}.zoom-controls{margin:0}.toolbar-actions{justify-content:flex-start}.layout-name input{width:140px}.drawer{padding:calc(var(--unit)*12)}}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important}}
/* The pre-existing result component must not retain a monospace font or purple
   payout accent after the user chooses their workspace typography and colours. */
:root{--cf-text:var(--text);--cf-muted:var(--muted);--cf-border:var(--line);--cf-accent:var(--text)}
body[data-cf-workspace=grid] #cfWorkspace :is(h1,h2,h3,p,span,small,strong,b,em,dt,dd,summary,td,th){font-family:var(--font);font-weight:var(--font-weight)}
body[data-cf-workspace=grid] .cf-result-block h3{color:var(--text)}
body[data-cf-workspace=grid] .cf-result-block .cf-result-score{padding:calc(var(--unit)*10) 0}
body[data-cf-workspace=grid] .cf-result-block summary{font-size:calc(var(--font-unit)*12);margin-top:calc(var(--unit)*16)}
body[data-cf-workspace=grid] .cf-result-block dl dd:last-child{font-weight:var(--font-weight)}
.logo-mark{font-size:calc(var(--font-unit)*20);overflow-wrap:anywhere}
.logo-button{padding:0}
/* v2.1 readability: the stable toolbar is not part of workspace zoom, but its
   controls should be as readable as the larger panel typography by default. */
.toolbar button,.toolbar select{font-size:14px}
.toolbar .sample-tag,.toolbar .live-sync{font-size:12px}
.zoom-controls output{font-size:13px;min-width:49px}
.zoom-controls #zoomReset{font-size:12px}
.workspace-line,.layout-name input{font-size:14px}
.layout-name #savedStatus,.line-actions button{font-size:12px}
@media(max-width:700px){.toolbar-actions button{font-size:13px}.line-actions button{font-size:12px}}
body[data-cf-workspace=grid] :is(#guestLoginButton,#accountToggle){font-size:14px}
body[data-cf-workspace=grid] #cfStageAmount{height:calc(var(--unit)*46)}
body[data-cf-workspace=grid] #authForm input{height:calc(var(--unit)*50)}
.widget-tools button{height:calc(var(--unit)*28)}
.grid-add svg{display:block;width:72%;height:72%;flex:none}

/* All signed-in desks can be arranged directly. Edges stay clear of content. */
.resize-handle{display:none;position:absolute;z-index:5;touch-action:none;user-select:none}
.editing .resize-handle{display:block}
.resize-n,.resize-s{left:14px;right:14px;height:7px;cursor:ns-resize}
.resize-n{top:0}.resize-s{bottom:0}
.resize-e,.resize-w{top:14px;bottom:14px;width:7px;cursor:ew-resize}
.resize-e{right:0}.resize-w{left:0}
.resize-ne,.resize-nw,.resize-se,.resize-sw{width:14px;height:14px}
.resize-ne{top:0;right:0;cursor:nesw-resize}.resize-nw{top:0;left:0;cursor:nwse-resize}
.resize-se{bottom:0;right:0;cursor:nwse-resize}.resize-sw{bottom:0;left:0;cursor:nesw-resize}
.resize-se::after{content:'';position:absolute;right:3px;bottom:3px;width:6px;height:6px;border-right:1px solid var(--muted);border-bottom:1px solid var(--muted)}
.resize-handle:hover{background:color-mix(in srgb,var(--text) 16%,transparent)}
.maximized .resize-handle{display:none}
.editing .widget-header{user-select:none}.editing .widget-header button{touch-action:manipulation}
.account-content>div:nth-child(2){flex:1;min-width:0}
.account-content strong{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
body[data-cf-workspace=grid]:not(.signed-in) :is(.layout-switch,.sample-tag,.live-sync,.zoom-controls,.workspace-line,.editor-bar,.footer,#themeButton,#blankButton,#addButton,#editButton,#gridMarkers,#gridAdd,.widget-tools [data-action=settings],.widget-tools [data-action=remove]){display:none!important}
body[data-cf-workspace=grid]:not(.signed-in) .toolbar{justify-content:space-between}
body[data-cf-workspace=grid]:not(.signed-in) #workspace{margin-top:12px}
body[data-cf-workspace=grid]:not(.signed-in) .canvas{min-height:0}

/* Theme gallery and an inline hex-only palette; no platform colour picker. */
.theme-panel{width:calc(var(--unit)*440)}
.theme-presets{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:calc(var(--unit)*10);margin:calc(var(--unit)*12) 0}
.theme-preset{display:flex;flex-direction:column;align-items:stretch;padding:calc(var(--unit)*7);text-align:left;background:var(--field);min-width:0;font-size:calc(var(--font-unit)*12);gap:calc(var(--unit)*5)}
.theme-preset[aria-pressed=true]{outline:2px solid var(--text);outline-offset:1px}
.theme-sample{display:block;position:relative;height:calc(var(--unit)*64);border-radius:calc(var(--unit)*3);background:var(--sample-background);color:var(--sample-text);border:1px solid color-mix(in srgb,var(--sample-text) 20%,transparent);overflow:hidden;font-family:var(--sample-font);font-weight:var(--sample-weight)}
.sample-header{position:absolute;top:8%;left:6%;width:88%;height:18%;background:var(--sample-panel);border-bottom:1px solid color-mix(in srgb,var(--sample-text) 30%,transparent)}
.sample-word{position:absolute;left:10%;top:31%;font-size:calc(var(--unit)*24);line-height:1.3}
.sample-sides{position:absolute;right:10%;top:40%;display:flex;gap:calc(var(--unit)*5)}.sample-sides i{width:calc(var(--unit)*14);height:calc(var(--unit)*22);border-radius:2px;background:var(--sample-approve)}.sample-sides i+i{background:var(--sample-disapprove)}
.theme-preset small{font-size:calc(var(--font-unit)*10);color:var(--muted)}
.customize-theme{width:100%;margin:calc(var(--unit)*6) 0}
#themeBack{margin-bottom:calc(var(--unit)*12)}
.colour-control{margin:0 0 calc(var(--unit)*10);border:1px solid var(--line);border-radius:calc(var(--unit)*6);background:var(--field);min-width:0}
.colour-control summary{display:flex;align-items:center;gap:calc(var(--unit)*8);padding:calc(var(--unit)*10);cursor:pointer;list-style:none;font-size:calc(var(--font-unit)*12)}
.colour-control summary::-webkit-details-marker{display:none}
.colour-control summary>span:first-child{flex:1}.colour-control output{font-size:calc(var(--font-unit)*10);color:var(--muted)}
.colour-current{width:calc(var(--unit)*25);height:calc(var(--unit)*25);border:1px solid var(--muted);border-radius:calc(var(--unit)*4);flex:none}
.colour-palette{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:calc(var(--unit)*8);padding:calc(var(--unit)*12)}
.colour-palette button{aspect-ratio:1;min-height:0;padding:0;width:100%;border:1px solid var(--muted);border-radius:calc(var(--unit)*5)}
.colour-palette .colour-swatch,.colour-palette .colour-swatch:hover{background:var(--swatch)}
.colour-palette [aria-pressed=true]{outline:2px solid var(--text);outline-offset:2px}
.custom-colour{font-size:calc(var(--font-unit)*23);background:var(--header)}
.hex-form{padding:0 calc(var(--unit)*12) calc(var(--unit)*12);font-size:calc(var(--font-unit)*12)}
.hex-form>div{display:flex;gap:calc(var(--unit)*7);margin-top:calc(var(--unit)*6)}.hex-form input{width:100%;flex:1;min-width:0}.hex-form button{flex:none}.hex-form small{display:block;color:var(--text);margin-top:calc(var(--unit)*7)}
.hex-form input[aria-invalid=true]{outline:2px solid var(--disapprove)}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

/* QYU_FILE_LOGO_V1: replace qyu-logo.png to change the logo. */
.brand .qyu-file-logo {
  display:block; flex:none; width:32px; height:32px;
  background-color:currentColor; clip-path:circle(50%);
  -webkit-mask-image:url('/assets/qyu-logo.png');
  mask-image:url('/assets/qyu-logo.png'); mask-mode:luminance;
  mask-size:contain; mask-repeat:no-repeat; mask-position:center;
}