/* Identity Studio workspace: shared primitives live in ui.css. */
.studio-app{width:100%;max-width:1800px;margin:auto;padding:0}.mast{height:76px;display:flex;align-items:center;gap:16px;padding:14px 28px;background:var(--ui-surface);border-bottom:1px solid var(--ui-border);direction:ltr;position:sticky;top:0;z-index:60}.mast .wordmark{margin-inline-end:28px}.mast .tabs{display:flex;gap:4px;margin-inline-end:auto;direction:rtl}html[dir=ltr] .mast .tabs{direction:ltr}.mast .tabs button{border:0;background:none;color:var(--ui-muted);font-weight:400;padding:10px 18px}.mast .tabs [aria-current=true]{background:var(--ui-soft);color:var(--ui-action);font-weight:600}.mast #saveCanvas{order:5;min-width:86px}.mast #languageSwitch{font:13px var(--latin);padding-inline:12px}.mast .theme-toggle{border-color:transparent}
.studio-workspace{display:grid;grid-template-columns:minmax(0,1fr) 370px;min-height:calc(100dvh - 76px);direction:ltr}.canvas-workspace,.editor-sidebar{direction:rtl}html[dir=ltr] .canvas-workspace,html[dir=ltr] .editor-sidebar{direction:ltr}.canvas-workspace{padding:30px clamp(24px,4vw,64px);min-width:0;position:sticky;top:76px;align-self:start}.stage-title{margin-bottom:24px}.stage-title h1{font-size:24px;margin:0}.stage-subtitle{color:var(--ui-muted);font-size:12px;margin:4px 0 0}.stage-actions{display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end}.stage-actions button{font-size:12px;padding:9px 12px;font-weight:400}.canvas-board{display:grid;place-items:center;min-height:370px;padding:32px 26px;border:1px solid var(--ui-border);border-radius:var(--radius-lg);background:var(--ui-canvas)}.canvas-board .stage{width:100%;max-width:560px;position:relative;isolation:isolate}.canvas-board .card{border-radius:8px;box-shadow:var(--shadow-card);min-height:0;aspect-ratio:1.68}.card.free-card{min-height:0!important;height:auto!important;aspect-ratio:1.68}
.canvas-toolbar{display:flex;gap:8px;align-items:center;margin-top:18px;flex-wrap:wrap}.canvas-toolbar button{font-size:12px;font-weight:400;padding:8px 12px}.canvas-toolbar #editElements[aria-pressed=true]{color:var(--ui-focus);border-color:var(--ui-focus)}.history-actions{display:flex;gap:4px;margin-inline-start:auto}.canvas-toolbar #layoutReset{border-color:transparent;background:none}.canvas-help{font-size:12px;color:var(--ui-muted);margin:12px 0 20px;max-width:70ch}.caption{display:flex;justify-content:space-between;align-items:center;font-size:12px;color:var(--ui-muted);padding-top:18px;border-top:1px solid var(--ui-border)}.caption i{display:none}.save-state{display:flex;gap:8px 18px;flex-wrap:wrap;font-size:11px;color:var(--ui-muted);margin:12px 0 0}.save-state span::before{content:'';display:inline-block;width:6px;height:6px;background:var(--ui-input-border);border-radius:50%;margin-inline-end:6px}#localState::before{background:var(--ui-success)}.welcome{margin-top:20px;padding:20px;background:var(--ui-surface);border:1px solid var(--ui-border);border-radius:var(--radius-md)}.welcome h2{font-size:16px}.welcome p{font-size:12px;color:var(--ui-muted);margin-bottom:8px}
.editor-sidebar{overflow-anchor:none;min-width:0;border-inline-start:1px solid var(--ui-border);background:var(--ui-surface)}.editor-sidebar>.panel{border:0;border-radius:0;padding:26px;background:none}.editor-tabs{position:sticky;top:0;z-index:10;display:flex;background:var(--ui-surface);border-bottom:1px solid var(--ui-border);margin:-26px -26px 26px;padding:0 12px}.editor-tabs button{flex:1;border:0;border-bottom:3px solid transparent;border-radius:0;min-height:62px;padding:12px 4px;font-size:13px;font-weight:400;background:none;color:var(--ui-muted)}.editor-tabs button[aria-pressed=true]{border-bottom-color:var(--ui-action);color:var(--ui-action);font-weight:600}.editor-sidebar .section-heading h2,.inspector-heading h2{font-size:16px}.editor-sidebar .field-grid{grid-template-columns:1fr}.save{margin-top:20px}.editor-sidebar .pair{gap:10px}.editor-sidebar label{font-size:12px}
.template-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin:16px 0 24px}.tile{padding:0;display:block;overflow:hidden;min-width:0;border:1px solid var(--ui-border);border-radius:8px;background:var(--ui-surface);box-shadow:none}.tile[aria-pressed=true]{outline:2px solid var(--ui-focus);outline-offset:3px;border-color:transparent}.tile-caption{display:flex;justify-content:space-between;align-items:center;padding:9px 11px;color:var(--ui-text);font-size:12px;font-weight:400}.tile-caption small{color:var(--ui-muted);font:10px var(--latin)}.mini-card{display:block;position:relative;overflow:hidden;aspect-ratio:1.68;container-type:inline-size}.mini-card .card{border-radius:0;min-height:0!important;height:100%;padding:8%;gap:3px;box-shadow:none;pointer-events:none}.mini-card .card .top{font-size:2.7cqw;gap:3px;min-height:0}.mini-card .card .top img{height:6cqw}.mini-card .card .identity h2{font-size:5.6cqw}.mini-card .card .identity p{font-size:3.4cqw}.mini-card .card .identity small{font-size:2.5cqw}.mini-card .card footer{font-size:2.5cqw;padding-top:3px;gap:2px;min-height:0}.mini-card .card .person img{width:14cqw}.mini-card .card .person{gap:5px}.mini-card .card .top::before{width:6px;height:1px}.mini-card .card.ticket{padding-left:25%}.mini-card .card.crest{padding-inline:14%}.mini-card .card.folio{padding-bottom:0}.mini-card .layout-surface{display:none}
.preset-section{padding-bottom:24px;border-bottom:1px solid var(--ui-border);margin-bottom:24px}.preset-section h2{font-size:16px}.preset-gallery{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}.preset-button{min-width:0;padding:0;display:block;overflow:hidden;border-radius:6px}.preset-button>.card{width:100%;min-height:0!important;height:auto!important;aspect-ratio:1.68;border:0;border-radius:0;box-shadow:none}.preset-button>span{display:block;padding:8px 3px;font-size:11px;font-weight:400}.preset-button:hover{outline:2px solid var(--ui-focus);outline-offset:2px}.palette{display:flex;flex-wrap:wrap;gap:8px;margin:14px 0}.swatch{width:44px;min-height:44px;padding:5px;border-radius:8px}.swatch i{display:block;width:100%;height:32px;border-radius:4px;background:linear-gradient(120deg,var(--color) 66%,var(--accent) 66%)}.swatch[aria-pressed=true]{outline:2px solid var(--ui-focus);outline-offset:2px}.color-picker{display:flex;gap:8px;align-items:center;border:1px solid var(--ui-border);border-radius:8px;padding:8px;margin:4px 0 14px}.color-picker input{width:38px;height:38px;min-height:38px;padding:0;border:0;margin:0;background:none;flex:none}.color-picker span{display:grid;font-size:11px}.color-picker small{font:10px var(--latin);margin-top:4px}.color-picker input::-webkit-color-swatch{border:0;border-radius:5px}.color-picker input::-webkit-color-swatch-wrapper{padding:0}
.media-grid{grid-template-columns:1fr;margin:18px 0}.media-input{position:relative;display:flex;align-items:center;gap:12px;padding:14px;border:1px dashed var(--ui-input-border);border-radius:var(--radius-md);cursor:pointer;background:var(--ui-bg);margin:0;min-height:72px}.media-input>span:last-of-type{display:grid}.media-input input{position:absolute;inset:0;width:100%;height:100%;opacity:0;margin:0;cursor:pointer}.media-preview{display:grid;place-items:center;flex:none;width:38px;height:38px;border:1px solid var(--ui-border);border-radius:6px;overflow:hidden;background:var(--ui-surface)}.media-preview img,.media-preview b{grid-area:1/1}.media-preview img{width:100%;height:100%;object-fit:contain}.media-preview.portrait{border-radius:50%}.media-preview.portrait img{object-fit:cover}.media-preview b{font:24px system-ui}.media-preview img:not([hidden])+b{display:none}
.inspector-heading,.selection-heading{display:flex;align-items:center;justify-content:space-between;gap:8px}.inspector-heading h2,.selection-heading h3{margin:0}.inspector-heading span{color:var(--ui-muted);font-size:12px}.selection-heading{padding:8px 0;margin-top:8px;border-bottom:1px solid var(--ui-border)}.selection-heading h3{font-size:16px}.selection-heading button{font-size:11px;border:0;padding:8px;background:none}.add-elements{display:flex;gap:10px}.add-elements button{flex:1;font-size:12px}.geometry-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 12px}.geometry-grid input{margin-top:6px}.align-tools{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;margin:18px 0}.align-tools button,#selectionInspector .pair button{font-size:11px;padding:8px 6px;font-weight:400}#layerGroup{margin:20px 0;border-block:1px solid var(--ui-border)}.layer-list{display:grid;gap:3px;max-height:220px;overflow:auto;padding-bottom:10px}.layer-row{display:flex;gap:8px;border:0;background:none;text-align:start;padding:9px 10px;font-size:12px;font-weight:400;min-width:0}.layer-row[aria-pressed=true]{background:var(--ui-soft);color:var(--ui-action)}.layer-row b{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:400}.layer-kind,.layer-row small{font-size:10px;color:var(--ui-muted)}.layer-kind{border:1px solid var(--ui-border);padding:2px 5px;border-radius:4px}#elementText{line-height:1.6}#elementPanel[data-selected-type=image] .text-options,#elementPanel[data-selected-type=shape] .text-options,#elementPanel[data-selected-type=image] label:has([data-prop=size]),#elementPanel[data-selected-type=shape] label:has([data-prop=size]),#elementPanel[data-selected-type=image] label:has([data-prop=align]),#elementPanel[data-selected-type=shape] label:has([data-prop=align]),#elementPanel[data-selected-type=image] label:has([data-prop=color]){display:none}.free-layout-active [data-template-setting]{display:none}
.is-editing .layout-item{cursor:move;touch-action:none;user-select:none}.is-editing .layout-item:focus-visible{outline:2px solid var(--ui-focus);outline-offset:-2px}.is-editing .layout-item:hover{outline:1px solid var(--ui-focus)}.selection-box{position:absolute;border:2px solid var(--ui-focus);pointer-events:none;z-index:50;transform-origin:center}.selection-box.locked{border-style:dashed}.resize-handle{position:absolute;right:-22px;bottom:-22px;width:44px;height:44px;min-width:44px;min-height:44px;border:0;padding:0;background:transparent;pointer-events:auto;touch-action:none;cursor:nwse-resize;box-shadow:none}.resize-handle::after{content:'';position:absolute;inset:13px;border:2px solid var(--ui-focus);border-radius:3px;background:#fff;box-shadow:0 1px 3px #0002}.resize-handle:hover:not(:disabled){background:transparent;border:0}.selection-box.locked .resize-handle{display:none}.snap-guide{position:absolute;background:var(--joud-yellow);pointer-events:none;z-index:45}.snap-guide.x{top:0;bottom:0;left:50%;width:1px}.snap-guide.y{left:0;right:0;top:50%;height:1px}
/* Share / account use a wider task panel and a smaller reference canvas. */
body:not([data-workspace-mode=edit]) .studio-workspace{grid-template-columns:minmax(0,1fr) minmax(420px,1fr);max-width:1280px;margin:auto;gap:40px;padding:40px 36px}body:not([data-workspace-mode=edit]) .canvas-workspace{padding:0;position:sticky;top:32px}body:not([data-workspace-mode=edit]) .canvas-board{min-height:0;padding:28px 20px}body:not([data-workspace-mode=edit]) .canvas-toolbar,body:not([data-workspace-mode=edit]) .canvas-help,body:not([data-workspace-mode=edit]) .welcome{display:none}body:not([data-workspace-mode=edit]) .editor-sidebar{border:1px solid var(--ui-border);border-radius:var(--radius-lg);overflow:hidden;align-self:start}body:not([data-workspace-mode=edit]) .stage-actions{display:none}#send .section-heading h2,#cloud .section-heading h2{font-size:24px}.qr-box{padding:24px;background:#fff;border:1px solid var(--ui-border);border-radius:var(--radius-md);text-align:center;margin:20px 0}.qr-box p{font-size:12px;color:#5a6c70;margin:16px 0 0}.public-link{margin:20px 0;padding:16px;border:1px solid var(--ui-border);border-radius:var(--radius-md);background:var(--ui-bg)}.public-link button{width:100%;margin-top:10px}.public-link label{margin:0}.print-panel{display:grid;gap:12px;margin-top:24px;padding-top:24px;border-top:1px solid var(--ui-border)}.print-panel h3{font-size:16px}.print-panel p{font-size:12px;color:var(--ui-muted)}.print-panel button{justify-self:start}.radio-block{padding:18px;background:var(--ui-soft);border-radius:var(--radius-md)}.radio-label{font:600 12px var(--latin)}.radio-block p{font-size:12px;margin:8px 0}.account-intro{padding:20px 0 28px}.account-intro h3{font-size:26px;max-width:18ch}.account-intro p{color:var(--ui-muted);font-size:14px;max-width:40ch;margin:0}#legacyLogin{border-top:1px solid var(--ui-border);margin:24px 0}#legacyLogin summary{font-size:13px;color:var(--ui-muted)}#loginForm>.hint{margin-top:14px}.account-id{font:600 16px var(--latin);overflow-wrap:anywhere;background:var(--ui-soft);padding:16px;border-radius:var(--radius-md)}#account>.danger,#account>#logout,#account>#rotateRecovery,#account>#clerkAccount{display:flex;width:100%;margin:10px 0}.face-settings{padding:8px 0 20px}
@media(min-width:1440px){.studio-workspace{grid-template-columns:minmax(0,1fr) 410px}.canvas-board{min-height:440px}.canvas-workspace{padding-top:40px}.editor-sidebar>.panel{padding:32px}.editor-tabs{margin:-32px -32px 28px}}
@media(max-width:1050px){.mast{gap:8px;padding-inline:20px}.mast .wordmark{margin-inline-end:8px}.mast .tabs button{padding-inline:12px}.studio-workspace{grid-template-columns:minmax(0,1fr) 340px}.canvas-workspace{padding:24px}.canvas-board{min-height:340px;padding:24px 18px}.stage-title{align-items:flex-start;flex-wrap:wrap}.stage-actions button{font-size:11px}.editor-sidebar>.panel{padding:22px}.editor-tabs{margin:-22px -22px 22px}.canvas-toolbar #layoutReset{padding-inline:4px}}
@media(max-width:800px){.studio-app{padding-bottom:calc(78px + env(safe-area-inset-bottom))}.mast{height:68px;padding:10px 16px;gap:8px}.mast .wordmark{margin-inline-end:auto;font-size:16px}.mast .brand-mark{width:27px}.mast .tabs{position:fixed;inset:auto 0 0;height:calc(70px + env(safe-area-inset-bottom));padding:6px 12px max(6px,env(safe-area-inset-bottom));background:var(--ui-surface);border-top:1px solid var(--ui-border);z-index:60;margin:0;box-shadow:0 -4px 20px #153f4308}.mast .tabs button{flex:1;min-height:54px;display:flex;flex-direction:column;gap:3px;font-size:11px;padding:4px}.mast .tabs .icon{width:20px;height:20px}.mast #saveCanvas{min-width:62px;padding:9px 12px;font-size:12px}.mast #languageSwitch{padding:9px 8px;font-size:11px;min-width:44px}.mast .theme-toggle{min-width:44px;padding:8px;font-size:18px}.studio-workspace{display:flex;flex-direction:column;min-height:0}.canvas-workspace{padding:20px 20px 16px;position:static;align-self:stretch;width:100%}.stage-title{margin-bottom:16px;align-items:center;flex-wrap:nowrap;gap:8px}.stage-title h1{font-size:20px}.stage-subtitle{display:none}.stage-actions{gap:4px}.stage-actions button{font-size:10px;padding:8px}.stage-actions .icon{width:15px}.canvas-board{min-height:0;padding:22px 16px;border-radius:14px}.canvas-board .stage{max-width:520px}.canvas-toolbar{margin-top:12px;gap:4px}.canvas-toolbar button{font-size:11px;padding:8px}.canvas-toolbar #layoutReset{font-size:10px}.canvas-help{margin:8px 0 0;font-size:11px}.caption{display:none}.save-state{font-size:10px;margin-top:12px;gap:4px 12px}.save-state #cloudState,.save-state #shareState{display:none}.welcome{display:none}.editor-sidebar{border:0;border-top:1px solid var(--ui-border);border-radius:20px 20px 0 0}.editor-sidebar>.panel{padding:22px 20px}.editor-tabs{margin:-22px -20px 24px;border-radius:20px 20px 0 0}.editor-tabs button{min-height:54px}.template-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.editor-sidebar .field-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.media-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.geometry-grid{grid-template-columns:repeat(3,minmax(0,1fr))}#msg{bottom:calc(84px + env(safe-area-inset-bottom));font-size:12px}.canvas-board .card{border-radius:5px}body:not([data-workspace-mode=edit]) .studio-workspace{display:flex;flex-direction:column-reverse;padding:20px;gap:24px;min-height:0}body:not([data-workspace-mode=edit]) .canvas-workspace{position:static;padding:0}body:not([data-workspace-mode=edit]) .canvas-board{padding:22px 16px}body:not([data-workspace-mode=edit]) .editor-sidebar{width:100%}body:not([data-workspace-mode=edit]) .stage-title h1{font-size:16px}body:not([data-workspace-mode=edit]) .save-state #cloudState,body:not([data-workspace-mode=edit]) .save-state #shareState{display:inline}#send .section-heading h2,#cloud .section-heading h2{font-size:22px}.account-intro{padding-top:8px}.account-intro h3{font-size:24px}}
@media(max-width:400px){.mast{padding-inline:12px;gap:5px}.mast .wordmark{font-size:14px;gap:5px}.mast .brand-mark{width:23px}.mast .theme-toggle{min-width:44px}.canvas-workspace{padding-inline:14px}.canvas-board{padding:18px 12px}.stage-actions .icon{display:none}.canvas-toolbar{gap:4px}.canvas-toolbar #layoutReset{flex-basis:100%;min-height:44px}.template-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.geometry-grid,.editor-sidebar .field-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.media-grid{grid-template-columns:1fr}.stage-title h1{font-size:18px}}

@media(min-width:801px){body[data-workspace-mode=edit] .editor-sidebar{position:sticky;top:76px;max-height:calc(100dvh - 76px);overflow:auto;scrollbar-width:thin}body[data-workspace-mode=edit] .canvas-workspace{padding-bottom:18px}}
#layoutReset:disabled{display:none}.editor-sidebar #insertGroup{margin:14px 0;border-bottom:1px solid var(--ui-border)}#insertGroup>label{padding-bottom:12px}