@import url('https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&family=DM+Sans:wght@400;500;600;700&family=Space+Grotesk:wght@400;500;600;700&display=swap');

:root { --ink:#172327; --muted:#738083; --paper:#f4f5f1; --panel:#fbfcf9; --card:#fff; --line:#dfe5e1; --brand-orange:#ff6b2b; --brand-orange-rgb:255,107,43; --orange:var(--brand-orange); --orange-dark:var(--brand-orange); --green:#4a947e; --shadow:0 16px 40px rgba(33,54,50,.08); --zoom:1; }
* { box-sizing:border-box; }
html,body { min-height:100%; margin:0; }
body { color:var(--ink); background:var(--paper); font-family:'DM Sans',sans-serif; }
button,input,textarea,select { font:inherit; }
button { cursor:pointer; }
button:focus-visible,input:focus-visible,select:focus-visible { outline:2px solid var(--orange); outline-offset:2px; }
[hidden] { display:none!important; }
.app-shell { min-height:100vh; }
.topbar { height:68px; padding:0 28px; display:flex; align-items:center; gap:32px; border-bottom:1px solid var(--line); background:#fff; }
.brand { display:flex; align-items:center; gap:10px; color:var(--ink); text-decoration:none; font:700 16px 'Space Grotesk',sans-serif; letter-spacing:-.4px; white-space:nowrap; }.brand em { color:var(--orange); font-style:normal; }.brand-mark { width:25px; height:25px; padding:5px; display:grid; gap:3px; border-radius:7px; background:var(--ink); transform:rotate(-7deg); }.brand-mark i { display:block; border-radius:2px; background:#fff; }.brand-mark i:nth-child(1){width:80%}.brand-mark i:nth-child(2){width:55%}.brand-mark i:nth-child(3){width:72%}
.breadcrumbs { flex:1; display:flex; align-items:center; gap:9px; color:#9aa4a1; font:10px 'DM Mono',monospace; letter-spacing:.6px; }.breadcrumbs b { color:#ccd2cf; }.breadcrumbs strong { overflow:hidden; max-width:260px; color:var(--ink); font-weight:500; text-overflow:ellipsis; white-space:nowrap; }
.top-actions { display:flex; align-items:center; gap:9px; }
.button { min-height:36px; display:inline-flex; align-items:center; justify-content:center; gap:7px; padding:0 13px; border:1px solid transparent; border-radius:6px; font-size:12px; font-weight:600; transition:.18s ease; }.button:hover{transform:translateY(-1px)}.button-primary{color:#fff;background:var(--orange);box-shadow:0 6px 14px rgba(var(--brand-orange-rgb),.2)}.button-primary:hover{background:var(--orange-dark)}.button-ghost,.button-secondary{color:var(--ink);border-color:var(--line);background:transparent}.button-ghost:hover,.button-secondary:hover{background:#fff;border-color:#b8c5c0}.button-outline{color:var(--orange-dark);border-color:rgba(var(--brand-orange-rgb),.4);background:transparent}.button-outline:hover{background:rgba(var(--brand-orange-rgb),.04)}.button-danger{color:#bd573c;border-color:rgba(var(--brand-orange-rgb),.25);background:rgba(var(--brand-orange-rgb),.03)}.button-danger:hover{background:rgba(var(--brand-orange-rgb),.08)}.button-small{min-height:30px;padding:0 10px;font-size:11px}.full-button{width:100%}

.workspace-app { min-height:calc(100vh - 68px); display:grid; grid-template-columns:270px minmax(480px,1fr) 260px; }
.library-panel,.inspector-panel { min-width:0; background:var(--panel); }.library-panel { padding:25px 17px 20px 21px; border-right:1px solid var(--line); }.inspector-panel { padding:0 18px 25px; border-left:1px solid var(--line); }
.panel-heading,.project-header,.inspector-heading,.library-toolbar,.editor-footer,.top-actions { display:flex; align-items:center; justify-content:space-between; }.eyebrow { color:var(--orange-dark); font:500 10px 'DM Mono',monospace; letter-spacing:1.4px; }.panel-heading h2 { margin:6px 0 0; font:600 18px 'Space Grotesk',sans-serif; letter-spacing:-.3px; }.asset-counter { min-width:24px; padding:4px 7px; border-radius:12px; color:#68827b; background:#e2efeb; font:500 10px 'DM Mono',monospace; text-align:center; }.panel-copy { margin:10px 0 18px; color:var(--muted); font-size:11px; line-height:1.45; }
.upload-zone { width:100%; min-height:92px; padding:14px; display:flex; flex-direction:column; align-items:center; justify-content:center; border:1.5px dashed #cbd7d2; border-radius:8px; color:var(--ink); background:#fff; transition:.2s; }.upload-zone:hover,.upload-zone.is-over{border-color:var(--orange);background:rgba(var(--brand-orange-rgb),.04)}.upload-symbol{width:28px;height:28px;display:grid;place-items:center;margin-bottom:6px;border-radius:50%;color:var(--orange);background:rgba(var(--brand-orange-rgb),.1);font-size:19px}.upload-zone strong{font:600 12px 'Space Grotesk',sans-serif}.upload-zone small{margin-top:4px;color:#9aa5a1;font-size:10px}
.library-toolbar { margin:22px 0 10px; padding-bottom:8px; border-bottom:1px solid var(--line); color:#7b8884; font:500 10px 'DM Mono',monospace; letter-spacing:.3px; text-transform:uppercase; }.text-button{padding:0;border:0;color:var(--orange-dark);background:transparent;font-size:10px}.asset-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:7px;max-height:calc(100vh - 390px);overflow:auto;padding-right:2px}.asset-thumb{position:relative;aspect-ratio:1;overflow:hidden;border:1px solid var(--line);border-radius:5px;background:#e5ece8;cursor:grab;transition:.18s}.asset-thumb:hover{border-color:var(--orange);transform:translateY(-1px)}.asset-thumb.is-placed{box-shadow:0 0 0 2px rgba(var(--brand-orange-rgb),.32)}.asset-thumb.is-dragging{opacity:.4}.asset-thumb img{width:100%;height:100%;display:block;object-fit:cover}.asset-thumb-index{position:absolute;left:4px;top:4px;padding:2px 4px;border-radius:3px;color:#fff;background:rgba(23,35,39,.77);font:9px 'DM Mono',monospace}.asset-thumb-action{position:absolute;right:4px;bottom:4px;width:20px;height:20px;border:0;border-radius:4px;color:#fff;background:rgba(23,35,39,.75);font-size:13px;opacity:0}.asset-thumb:hover .asset-thumb-action{opacity:1}.library-empty{padding:35px 10px;text-align:center;color:#9ba6a2}.library-empty span{display:block;margin-bottom:9px;color:#b6c6bf;font-size:28px}.library-empty p{margin:0;font-size:11px;line-height:1.5}.library-tip{margin-top:18px;padding:10px;display:flex;gap:8px;border-radius:6px;color:#6e807b;background:#edf4f1;font-size:10px;line-height:1.4}.library-tip span{color:var(--orange)}.library-tip p{margin:0}.library-tip strong{color:var(--ink)}

.editor-area{min-width:0;display:flex;flex-direction:column;background:var(--paper)}.project-header{min-height:83px;padding:17px 25px 14px;border-bottom:1px solid var(--line);background:#f8f9f5}.project-header label{display:block;margin-bottom:4px;color:#8d9995;font:500 9px 'DM Mono',monospace;letter-spacing:1.1px}.project-header > div:first-child input:first-of-type{width:min(330px,35vw);padding:0;border:0;outline:0;color:var(--ink);background:transparent;font:600 21px 'Space Grotesk',sans-serif;letter-spacing:-.5px}.project-subtitle{display:flex;align-items:center;gap:7px;margin-top:6px;color:#a0aaa6;font-size:10px}.project-subtitle input{width:80px;padding:0;border:0;outline:0;color:var(--muted);background:transparent;font-size:10px}.project-subtitle input[type=date]{width:105px}.page-nav{display:flex;align-items:center;gap:8px;color:#84908c;font:10px 'DM Mono',monospace}.page-nav strong{color:var(--ink)}.round-button{width:26px;height:26px;padding:0;border:1px solid var(--line);border-radius:50%;color:var(--ink);background:#fff;font-size:18px;line-height:1}.round-button:disabled{opacity:.35;cursor:not-allowed}.editor-toolbar{min-height:55px;padding:10px 24px;display:flex;align-items:center;gap:15px;border-bottom:1px solid var(--line);background:#fff}.toolbar-group{display:flex;align-items:center;gap:8px}.toolbar-label{color:#8b9793;font:500 9px 'DM Mono',monospace;letter-spacing:.7px;white-space:nowrap}.format-switcher{display:flex;padding:2px;border-radius:5px;background:#edf1ee}.format-btn{min-width:38px;padding:5px 7px;border:0;border-radius:4px;color:#82908c;background:transparent;font:500 10px 'DM Mono',monospace}.format-btn.is-active{color:var(--ink);background:#fff;box-shadow:0 1px 4px rgba(28,54,48,.12)}.toolbar-divider{width:1px;height:25px;background:var(--line)}.toolbar-select{height:28px;padding:0 22px 0 8px;border:1px solid var(--line);border-radius:5px;outline:0;color:var(--ink);background:#fff;font-size:10px}.toolbar-select:focus{border-color:var(--orange)}.auto-arrange{margin-left:auto;min-height:29px;padding:0 9px;font-size:10px}.zoom-control{display:flex;align-items:center;gap:5px;margin-left:3px}.zoom-control span{min-width:40px;color:#7c8985;font:10px 'DM Mono',monospace;text-align:center}.zoom-btn{width:24px;height:24px;padding:0;border:1px solid var(--line);border-radius:4px;color:var(--ink);background:#fff;font-size:15px}
.canvas-workspace{position:relative;flex:1;min-height:450px;display:flex;align-items:center;justify-content:center;overflow:auto;padding:42px 35px;background:#e9ece8;background-image:linear-gradient(45deg,rgba(255,255,255,.34) 25%,transparent 25%),linear-gradient(-45deg,rgba(255,255,255,.34) 25%,transparent 25%),linear-gradient(45deg,transparent 75%,rgba(255,255,255,.34) 75%),linear-gradient(-45deg,transparent 75%,rgba(255,255,255,.34) 75%);background-size:24px 24px;background-position:0 0,0 12px,12px -12px,-12px 0}.canvas-stage{position:relative;display:flex;align-items:center;justify-content:center;min-width:360px;min-height:280px;transform:scale(var(--zoom));transform-origin:center center;transition:transform .15s}.canvas-page{position:relative;width:min(720px,68vw);aspect-ratio:16/9;overflow:hidden;background:#f4f4ef;box-shadow:0 12px 30px rgba(31,48,44,.22);transition:aspect-ratio .25s ease,background .2s}.canvas-page.format-portrait{width:min(440px,42vw);aspect-ratio:9/16}.canvas-page.format-square{width:min(570px,54vw);aspect-ratio:1}.canvas-page.is-drop-target{box-shadow:0 0 0 4px rgba(var(--brand-orange-rgb),.58),0 12px 30px rgba(31,48,44,.22)}.drop-hint{position:absolute;z-index:5;left:50%;top:50%;padding:10px 15px;border-radius:5px;color:var(--orange-dark);background:rgba(var(--brand-orange-rgb),.03);box-shadow:0 4px 15px rgba(36,50,46,.12);font:600 11px 'Space Grotesk',sans-serif;opacity:0;pointer-events:none;transform:translate(-50%,-50%);transition:.15s}.canvas-page.is-drop-target + .drop-hint{opacity:1}
.design-item{position:absolute;overflow:hidden;border:1px solid rgba(255,255,255,.85);background:#dce6e1;cursor:grab;user-select:none;touch-action:none;transition:box-shadow .12s}.design-item:hover{z-index:4;box-shadow:0 0 0 2px rgba(255,255,255,.7),0 4px 12px rgba(23,35,39,.2)}.design-item.is-selected{z-index:5;box-shadow:0 0 0 2px var(--orange),0 4px 14px rgba(23,35,39,.22)}.design-item.is-dragging{cursor:grabbing;opacity:.85}.design-item img{width:100%;height:100%;display:block;pointer-events:none}.design-item.fit-cover img{object-fit:cover}.design-item.fit-contain{background:#e3e8e5}.design-item.fit-contain img{object-fit:contain}.item-label{position:absolute;left:8px;right:8px;bottom:7px;overflow:hidden;padding:5px 7px;border-radius:3px;color:#fff;background:rgba(23,35,39,.78);font-size:10px;text-overflow:ellipsis;white-space:nowrap;pointer-events:none}.resize-handle{position:absolute;right:-1px;bottom:-1px;width:15px;height:15px;border:0;border-radius:4px 0 0 0;background:var(--orange);cursor:nwse-resize;opacity:0}.design-item:hover .resize-handle,.design-item.is-selected .resize-handle{opacity:1}.empty-page{position:absolute;inset:0;display:grid;place-items:center;text-align:center;color:#9aa8a2;pointer-events:none}.empty-page > div{padding:35px}.empty-page span{display:block;margin-bottom:11px;color:#bccbc4;font-size:34px}.empty-page strong{display:block;color:#6c7c77;font:600 16px 'Space Grotesk',sans-serif}.empty-page small{display:block;margin-top:5px;font-size:11px}.editor-footer{min-height:34px;padding:7px 24px;border-top:1px solid var(--line);background:#f8f9f5}.selection-status{color:#899692;font-size:10px}.keyboard-hints{display:flex;gap:13px;color:#a2aaa7;font-size:9px}.keyboard-hints kbd{padding:2px 4px;border:1px solid #d5ddd9;border-radius:3px;color:#75827e;background:#fff;font:9px 'DM Mono',monospace}.keyboard-hints span{display:flex;align-items:center;gap:3px}

.inspector-tabs{height:55px;display:flex;align-items:end;gap:20px;border-bottom:1px solid var(--line)}.inspector-tab{height:39px;padding:0 2px;border:0;border-bottom:2px solid transparent;color:#8e9995;background:transparent;font:500 10px 'DM Mono',monospace;letter-spacing:.8px;text-transform:uppercase}.inspector-tab.is-active{border-color:var(--orange);color:var(--ink)}.inspector-content{padding-top:25px}.inspector-heading{justify-content:flex-start;gap:10px;margin-bottom:23px}.inspector-heading h2{margin:0;font:600 16px 'Space Grotesk',sans-serif}.inspector-heading p{margin:4px 0 0;color:var(--muted);font-size:10px}.inspector-icon{width:32px;height:32px;display:grid;place-items:center;border-radius:7px;color:var(--orange);background:#ffebe5;font-size:18px}.inspector-section{padding:17px 0;border-top:1px solid var(--line)}.inspector-section > label:first-child{display:flex;align-items:center;justify-content:space-between;margin-bottom:11px;color:#7f8c88;font:500 9px 'DM Mono',monospace;letter-spacing:.7px}.inspector-section output,.inline-values{color:var(--ink);font:500 9px 'DM Mono',monospace}.color-field{display:flex;align-items:center;gap:9px}.color-field input{width:27px;height:27px;padding:2px;border:1px solid var(--line);border-radius:5px;background:#fff;cursor:pointer}.color-field span{color:var(--muted);font:10px 'DM Mono',monospace}.inspector-section input[type=range]{width:100%;height:3px;accent-color:var(--orange);cursor:pointer}.inspector-section input[type=range] + input[type=range]{margin-top:12px}.segmented-control{display:grid;grid-template-columns:1fr 1fr;padding:3px;border-radius:5px;background:#edf1ee}.segmented-control button{padding:6px 4px;border:0;border-radius:4px;color:#82908c;background:transparent;font-size:10px}.segmented-control button.is-active{color:var(--ink);background:#fff;box-shadow:0 1px 4px rgba(28,54,48,.1)}.field-help{margin:8px 0 0;color:#a2aca9;font-size:10px;line-height:1.4}.switch-row{display:flex!important;align-items:center!important;justify-content:flex-start!important;gap:8px;color:var(--muted)!important;font:11px 'DM Sans',sans-serif!important;letter-spacing:0!important;text-transform:none!important}.switch-row input{position:absolute;opacity:0}.switch{position:relative;width:30px;height:17px;flex:0 0 auto;border-radius:20px;background:#cbd5d1;transition:.2s}.switch:after{content:'';position:absolute;top:3px;left:3px;width:11px;height:11px;border-radius:50%;background:#fff;transition:.2s}.switch-row input:checked + .switch{background:var(--orange)}.switch-row input:checked + .switch:after{transform:translateX(13px)}.inspector-section .lock-row{margin-top:10px}.no-selection{padding:42px 12px;text-align:center}.no-selection-icon{width:45px;height:45px;display:grid;place-items:center;margin:0 auto 13px;border:1px solid #cbd8d2;border-radius:50%;color:#9db4aa;font-size:21px}.no-selection h2{margin:0 0 7px;font:600 17px 'Space Grotesk',sans-serif}.no-selection p{margin:0;color:var(--muted);font-size:11px;line-height:1.5}.selected-photo-preview{width:45px;height:45px;overflow:hidden;border-radius:6px;background:#e1e9e5}.selected-photo-preview img{width:100%;height:100%;object-fit:cover}.selected-photo-preview + div{min-width:0}.selected-photo-preview + div h2{overflow:hidden;max-width:160px;text-overflow:ellipsis;white-space:nowrap;font-size:13px}.selected-photo-preview + div p{font:9px 'DM Mono',monospace}.dimension-fields{display:grid;grid-template-columns:1fr 12px 1fr 11px;align-items:center;gap:5px}.dimension-fields input,.text-field{width:100%;height:30px;padding:0 8px;border:1px solid var(--line);border-radius:5px;outline:0;color:var(--ink);background:#fff;font-size:11px}.dimension-fields span{color:#9aa5a2;font-size:11px;text-align:center}.text-field:focus,.dimension-fields input:focus{border-color:var(--orange)}.photo-actions{display:grid;gap:8px;margin-top:3px}.photo-actions .button{font-size:10px}.selection-status.photo-selected{color:var(--orange-dark)}

.modal-backdrop{position:fixed;z-index:20;inset:0;display:grid;place-items:center;padding:20px;background:rgba(20,31,31,.48);backdrop-filter:blur(4px)}.modal{position:relative;width:min(470px,100%);padding:32px;border-radius:12px;background:#fff;box-shadow:0 25px 80px rgba(13,29,27,.28)}.modal h2{margin:12px 0 7px;font:600 27px 'Space Grotesk',sans-serif;letter-spacing:-.8px}.modal-copy{color:var(--muted);font-size:13px;line-height:1.45}.modal-close{position:absolute;right:15px;top:12px;width:30px;height:30px;border:0;background:transparent;color:var(--muted);font-size:25px}.export-options{display:grid;gap:8px;margin-top:23px}.export-option{width:100%;padding:13px;display:grid;grid-template-columns:37px 1fr 20px;align-items:center;gap:12px;text-align:left;border:1px solid var(--line);border-radius:8px;background:#fff;color:var(--ink);transition:.2s}.export-option:hover{border-color:var(--orange);background:rgba(var(--brand-orange-rgb),.02);transform:translateX(2px)}.export-option strong{display:block;font:600 13px 'Space Grotesk',sans-serif}.export-option small{display:block;margin-top:3px;color:var(--muted);font-size:11px}.option-icon{width:35px;height:35px;display:grid;place-items:center;border-radius:6px;font:500 14px 'DM Mono',monospace}.option-icon.orange{color:var(--brand-orange);background:rgba(var(--brand-orange-rgb),.08)}.option-icon.blue{color:#467d8a;background:#e2f0f2}.option-icon.purple{color:#78638f;background:#eee8f3}.option-icon.green{color:#48826e;background:#e4f1eb}.option-arrow{color:var(--orange);font-size:17px}.toast{position:fixed;z-index:30;right:25px;bottom:22px;max-width:330px;padding:12px 15px;border-radius:6px;color:#fff;background:var(--ink);box-shadow:var(--shadow);font-size:11px;opacity:0;pointer-events:none;transform:translateY(12px);transition:.24s}.toast.is-visible{opacity:1;transform:translateY(0)}
.shooting-plan-backdrop{z-index:22}.shooting-plan-modal{width:min(1280px,100%);max-height:min(88vh,920px);padding:30px;overflow:hidden}.shooting-plan-modal h2{margin-bottom:4px}.shooting-plan-toolbar{display:flex;align-items:center;justify-content:space-between;gap:18px;margin:22px 0 14px;padding:12px 0;border-top:1px solid #d5d5d5;border-bottom:1px solid #d5d5d5}.shooting-plan-summary{display:flex;align-items:center;flex-wrap:wrap;gap:14px;color:#666;font:10px 'DM Mono',monospace;text-transform:uppercase}.shooting-plan-summary strong{color:#000;font-weight:600}.shooting-plan-actions{display:flex;gap:8px}.shooting-plan-table-wrap{max-height:58vh;overflow:auto;border:1px solid #d5d5d5;background:#fff}.shooting-plan-table{width:100%;min-width:980px;border-collapse:collapse;table-layout:fixed}.shooting-plan-table th{position:sticky;top:0;z-index:1;padding:10px 8px;text-align:left;color:#666;background:#f0f0f0;border-bottom:1px solid #cfcfcf;font:500 9px 'DM Mono',monospace;letter-spacing:.6px}.shooting-plan-table td{padding:7px 8px;border-bottom:1px solid #e3e3e3;vertical-align:middle}.shooting-plan-table tr:last-child td{border-bottom:0}.shooting-plan-table th:nth-child(1),.shooting-plan-table td:nth-child(1){width:44px}.shooting-plan-table th:nth-child(2),.shooting-plan-table td:nth-child(2){width:62px}.shooting-plan-table th:nth-child(3),.shooting-plan-table td:nth-child(3){width:220px}.shooting-plan-table th:nth-child(4),.shooting-plan-table td:nth-child(4){width:150px}.shooting-plan-table th:nth-child(5),.shooting-plan-table td:nth-child(5){width:115px}.shooting-plan-table th:nth-child(6),.shooting-plan-table td:nth-child(6){width:100px}.shooting-plan-table th:nth-child(7),.shooting-plan-table td:nth-child(7){width:125px}.plan-index,.plan-page{color:#777;font:500 11px 'DM Mono',monospace}.plan-shot-cell{display:grid;grid-template-columns:34px 1fr;align-items:center;gap:7px}.plan-shot-cell strong{color:#000;font:600 11px 'DM Mono',monospace}.plan-input{width:100%;height:30px;padding:0 7px;border:1px solid transparent;border-radius:3px;color:#111;background:transparent;font-size:11px;outline:0}.plan-input:hover{border-color:#cfcfcf;background:#fafafa}.plan-input:focus{border-color:#000;background:#fff;box-shadow:0 0 0 1px #000}.plan-input::placeholder{color:#aaa}.plan-title-input{min-width:0}.plan-status-input{border-color:#d5d5d5;background:#fff;cursor:pointer}.shooting-plan-empty{padding:45px 20px;text-align:center;color:#777;font-size:12px}.shooting-plan-modal .modal-copy{max-width:680px}

@media (max-width:1100px){.workspace-app{grid-template-columns:235px minmax(420px,1fr) 225px}.topbar{padding:0 18px;gap:20px}.library-panel{padding-left:14px}.editor-toolbar{gap:9px;padding:10px 14px}.toolbar-group:nth-of-type(2),.keyboard-hints span:nth-child(2){display:none}.project-header{padding-left:14px;padding-right:14px}.inspector-panel{padding-left:13px;padding-right:13px}}
@media (max-width:800px){.workspace-app{grid-template-columns:210px minmax(380px,1fr)}.inspector-panel{display:none}.top-actions .button-ghost{display:none}.canvas-page{width:min(650px,72vw)}.breadcrumbs{display:none}.keyboard-hints{display:none}}
@media (max-width:600px){.topbar{height:auto;min-height:61px;flex-wrap:wrap;padding:12px 14px;gap:12px}.top-actions{margin-left:auto}.workspace-app{display:flex;min-height:calc(100vh - 61px);flex-direction:column}.library-panel{order:2;border-top:1px solid var(--line);border-right:0}.editor-area{order:1;min-height:650px}.asset-grid{max-height:180px;grid-template-columns:repeat(6,1fr)}.library-tip{display:none}.canvas-workspace{min-height:420px;padding:28px 15px}.canvas-page{width:min(680px,86vw)}.canvas-page.format-portrait{width:min(300px,56vw)}.editor-toolbar{flex-wrap:wrap}.auto-arrange{margin-left:0}.project-header{align-items:flex-start;gap:10px}.page-nav{flex-wrap:wrap;justify-content:flex-end}.page-nav .button{width:100%}}

@media print{body{background:#fff}.app-shell{display:none!important}.print-layer{display:flex!important;flex-direction:column;gap:18px;width:100%;padding:0;background:#fff}.print-page{width:100%!important;box-shadow:none!important;break-after:page;print-color-adjust:exact;-webkit-print-color-adjust:exact}.print-page:last-child{break-after:auto}.design-item{print-color-adjust:exact;-webkit-print-color-adjust:exact}}

.slot-guide{position:absolute;z-index:1;display:grid;place-items:center;border:1px dashed transparent;border-radius:3px;opacity:0;pointer-events:none;transition:.15s}.canvas-page.is-slot-mode .slot-guide{border-color:rgba(var(--brand-orange-rgb),.5);background:rgba(255,255,255,.13);opacity:1}.canvas-page.is-slot-mode .slot-guide span{padding:4px 6px;border-radius:3px;color:rgba(var(--brand-orange-rgb),.8);background:rgba(255,255,255,.78);font:10px 'DM Mono',monospace}.canvas-page.is-slot-mode .slot-guide.is-target{border:2px solid var(--orange);background:rgba(var(--brand-orange-rgb),.2);box-shadow:0 0 0 3px rgba(var(--brand-orange-rgb),.15)}.canvas-page.is-slot-mode .slot-guide.is-target span{color:#fff;background:var(--orange)}
.slot-readout{display:flex;align-items:flex-start;gap:10px;padding:10px;border-radius:6px;background:#edf4f1}.slot-readout strong{color:var(--orange-dark);font:600 18px 'DM Mono',monospace}.slot-readout p{margin:1px 0 0;color:var(--muted);font-size:10px;line-height:1.45}

/* GB Films brand layer: high-contrast black and white system */
:root { --ink:#090909; --muted:#6b6b6b; --paper:#f1f1f1; --panel:#fafafa; --card:#fff; --line:#d5d5d5; --orange:#050505; --orange-dark:#000; --green:#111; --shadow:0 16px 40px rgba(0,0,0,.12); }
body { color:var(--ink); background:var(--paper); }
button:focus-visible,input:focus-visible,select:focus-visible { outline-color:#000; }
.topbar { height:72px; padding:0 30px; gap:28px; border-bottom:1px solid #000; background:#050505; }
.brand { gap:13px; color:#fff; font-size:15px; letter-spacing:.8px; }
.brand-logo { width:42px; height:42px; display:block; object-fit:contain; filter:brightness(0) invert(1); }
.brand-divider { width:1px; height:29px; background:#505050; }
.brand-product { color:#fff; font:600 10px/1.08 'DM Mono',monospace; letter-spacing:1.5px; }
.brand-product em { color:#fff; font-style:normal; }
.brand-mark { display:none; }
.breadcrumbs { color:#777; }
.breadcrumbs b { color:#444; }
.breadcrumbs strong { color:#fff; }
.topbar .button-ghost { color:#fff; border-color:#4b4b4b; background:transparent; }
.topbar .button-ghost:hover { color:#000; background:#fff; border-color:#fff; }
.topbar .button-primary { color:#000; background:#fff; box-shadow:none; }
.topbar .button-primary:hover { color:#fff; background:#000; border-color:#fff; }
.button { border-radius:2px; }
.button-primary { color:#fff; background:#000; box-shadow:0 6px 14px rgba(0,0,0,.14); }
.button-primary:hover { background:#333; }
.button-ghost,.button-secondary { color:var(--ink); border-color:var(--line); background:transparent; }
.button-ghost:hover,.button-secondary:hover { background:#fff; border-color:#000; }
.button-outline { color:#000; border-color:#000; background:transparent; }
.button-outline:hover { color:#fff; background:#000; }
.button-danger { color:#000; border-color:#999; background:#fff; }
.button-danger:hover { color:#fff; background:#000; border-color:#000; }
.workspace-app { background:var(--paper); }
.library-panel,.inspector-panel { background:var(--panel); }
.library-panel { border-right-color:var(--line); }
.inspector-panel { border-left-color:var(--line); }
.eyebrow { color:#000; }
.asset-counter { color:#fff; background:#000; border-radius:2px; }
.upload-zone { border-color:#a8a8a8; border-radius:2px; }
.upload-zone:hover,.upload-zone.is-over { border-color:#000; background:#f0f0f0; }
.upload-symbol { color:#fff; background:#000; border-radius:2px; }
.library-toolbar { color:#555; }
.text-button { color:#000; }
.asset-thumb { border-color:#c8c8c8; border-radius:2px; background:#e4e4e4; }
.asset-thumb:hover { border-color:#000; }
.asset-thumb.is-placed { box-shadow:0 0 0 2px rgba(0,0,0,.28); }
.asset-thumb-index,.asset-thumb-action { background:rgba(0,0,0,.82); }
.library-empty span { color:#777; }
.library-tip { color:#555; background:#e9e9e9; border-left:3px solid #000; border-radius:0; }
.library-tip span { color:#000; }
.project-header { background:#f7f7f7; border-bottom-color:var(--line); }
.project-header label,.toolbar-label { color:#777; }
.project-subtitle { color:#888; }
.editor-toolbar { background:#fff; border-bottom-color:var(--line); }
.format-switcher,.segmented-control { background:#e8e8e8; border-radius:2px; }
.frame-options { grid-template-columns:repeat(2,1fr); gap:3px; }
.format-btn,.segmented-control button { color:#666; border-radius:1px; }
.format-btn.is-active,.segmented-control button.is-active { color:#fff; background:#000; box-shadow:none; }
.toolbar-select,.round-button,.zoom-btn { border-color:#c9c9c9; border-radius:2px; }
.toolbar-select:focus { border-color:#000; }
.canvas-workspace { background:#d8d8d8; background-image:linear-gradient(45deg,rgba(255,255,255,.45) 25%,transparent 25%),linear-gradient(-45deg,rgba(255,255,255,.45) 25%,transparent 25%),linear-gradient(45deg,transparent 75%,rgba(255,255,255,.45) 75%),linear-gradient(-45deg,transparent 75%,rgba(255,255,255,.45) 75%); }
.canvas-page { background:#fff; box-shadow:0 12px 30px rgba(0,0,0,.28); }
.canvas-page.is-drop-target { box-shadow:0 0 0 4px rgba(0,0,0,.55),0 12px 30px rgba(0,0,0,.28); }
.drop-hint { color:#fff; background:#000; border-radius:2px; box-shadow:0 4px 15px rgba(0,0,0,.2); }
.design-item { border-color:rgba(255,255,255,.9); background:#ddd; }
.design-item:hover { box-shadow:0 0 0 2px rgba(0,0,0,.7),0 4px 12px rgba(0,0,0,.25); }
.design-item.is-selected { box-shadow:0 0 0 2px #000,0 4px 14px rgba(0,0,0,.25); }
.design-item.fit-contain { background:#eee; }
.item-label { background:rgba(0,0,0,.84); border-radius:0; }
.resize-handle { background:#000; border-radius:2px 0 0 0; }
.empty-page { color:#777; }
.empty-page span { color:#999; }
.empty-page strong { color:#333; }
.editor-footer { background:#f7f7f7; border-top-color:var(--line); }
.keyboard-hints kbd { border-color:#c9c9c9; color:#555; }
.inspector-tabs { border-bottom-color:var(--line); }
.inspector-tab { color:#777; }
.inspector-tab.is-active { border-color:#000; color:#000; }
.inspector-icon { color:#fff; background:#000; border-radius:2px; }
.inspector-section { border-top-color:var(--line); }
.inspector-section > label:first-child { color:#666; }
.inspector-section input[type=range] { accent-color:#000; }
.switch { background:#bcbcbc; border-radius:2px; }
.switch-row input:checked + .switch { background:#000; }
.no-selection-icon { border-color:#999; color:#555; border-radius:2px; }
.selected-photo-preview { border-radius:2px; background:#e1e1e1; }
.dimension-fields input,.text-field { border-color:#c9c9c9; border-radius:2px; }
.text-field:focus,.dimension-fields input:focus { border-color:#000; }
.slot-readout { background:#ededed; border-left:3px solid #000; border-radius:0; }
.slot-readout strong { color:#000; }
.text-area { width:100%; min-height:76px; padding:8px; border:1px solid #c9c9c9; border-radius:2px; outline:0; resize:vertical; color:var(--ink); background:#fff; font-size:11px; line-height:1.4; }
.text-area:focus { border-color:#000; }
.item-number { position:absolute; z-index:2; left:7px; top:7px; min-width:24px; padding:4px 5px; color:#fff; background:rgba(0,0,0,.86); font:500 10px 'DM Mono',monospace; text-align:center; }
.item-label { left:7px; right:7px; bottom:7px; display:flex; flex-direction:column; gap:2px; padding:7px 8px; border-radius:0; }
.item-label strong { overflow:hidden; font:600 10px/1.2 'Space Grotesk',sans-serif; text-overflow:ellipsis; white-space:nowrap; }
.item-label small { display:block; overflow:hidden; font-size:9px; line-height:1.25; text-overflow:ellipsis; white-space:nowrap; }
.design-item { overflow:visible; display:flex; flex-direction:column; border:0; background:transparent; isolation:isolate; }
.design-item.is-selected { z-index:20; }
.design-item.has-camera-spill { z-index:10; }
.design-photo { position:relative; width:100%; flex:0 0 auto; overflow:hidden; overflow:clip; contain:paint; isolation:isolate; border:1px solid rgba(255,255,255,.95); background:#eee; }
.design-photo.camera-spill { overflow:visible; contain:none; }
.design-photo img { width:100%; height:100%; display:block; object-fit:contain; pointer-events:none; }
.design-item.fit-cover .design-photo img { object-fit:cover; }
.design-item.fit-contain { background:transparent; }
.camera-move-overlay { position:absolute; z-index:12; left:var(--camera-x,50%); top:var(--camera-y,50%); width:92%; height:92%; color:var(--camera-color,#ff3b30); pointer-events:none; transform:translate(-50%,-50%) scale(var(--camera-scale,1)); transform-origin:center; }
.camera-spill .camera-move-overlay { z-index:30; }
.camera-move-overlay.is-editing { pointer-events:auto; cursor:move; touch-action:none; }
.camera-move-overlay svg { width:100%; height:100%; overflow:visible; filter:drop-shadow(0 1px 1px rgba(255,255,255,.95)) drop-shadow(0 1px 2px rgba(0,0,0,.65)); }
.camera-move-overlay svg path,.camera-move-overlay svg rect { fill:none; stroke:currentColor; stroke-linecap:round; stroke-linejoin:round; stroke-width:3; vector-effect:non-scaling-stroke; }
.camera-move-overlay svg marker path { fill:currentColor; stroke:none; }
.photo-drawing-layer { position:absolute; z-index:13; inset:0; width:100%; height:100%; overflow:hidden; pointer-events:none; }
.photo-drawing-layer.is-editing { pointer-events:auto; cursor:crosshair; touch-action:none; }
.photo-drawing-layer path { fill:none; stroke-linecap:round; stroke-linejoin:round; }
.description-box { width:100%; min-height:0; flex:0 0 auto; display:flex; flex-direction:column; justify-content:center; gap:3px; overflow:hidden; padding:5px 10px; border:1px solid rgba(0,0,0,.35); color:#fff; background:var(--description-box-color,rgba(0,0,0,.72)); text-align:left; pointer-events:auto; }
.description-overlay { position:absolute; z-index:40; left:0; bottom:0; min-height:48px; border:0; }
.description-overlay.is-empty { min-height:32px; }
.description-box strong { overflow:hidden; font:600 14px/1.2 'Space Grotesk',sans-serif; text-overflow:ellipsis; white-space:nowrap; }
.description-box small { min-height:1.25em; overflow:hidden; color:#d0d0d0; font-size:12px; line-height:1.3; overflow-wrap:anywhere; white-space:normal; }
.description-editor { outline:0; cursor:text; }
.description-editor:empty::before { content:attr(data-placeholder); color:#777; }
.description-box.is-empty { border-style:dashed; color:#555; }
.description-box.is-empty small { display:none; min-height:0; color:#777; }
.description-box.description-style-dark { color:#fff; border-color:rgba(0,0,0,.4); }
.description-box.description-style-dark small { color:#d0d0d0; }
.description-box.description-style-light { color:#000; border-color:rgba(0,0,0,.3); }
.description-box.has-description-color { color:var(--description-text-color); }
.description-box.has-description-color small { color:var(--description-text-color); }
.description-box.description-style-light small { color:#555; }
.description-box.is-empty.description-style-dark { border-style:solid; color:#fff; }
.description-box.is-empty.description-style-dark small { color:#d0d0d0; }
.description-box.is-empty.description-style-light { border-style:dashed; color:#000; }
.description-box.is-empty.description-style-light small { color:#555; }
.description-box.description-overlay.is-empty { border:0; color:#fff; }
.description-box.description-overlay.is-empty small,.description-overlay .description-editor:empty::before { color:#ddd; }
.description-box.description-overlay.description-style-dark { border:0; color:#fff; }
.description-box.description-overlay.description-style-dark small { color:#d0d0d0; }
.description-box.description-overlay.description-style-light { border:0; color:#000; }
.description-box.description-overlay.description-style-light small,.description-box.description-overlay.description-style-light .description-editor:empty::before { color:#555; }
.description-box.has-description-color.description-style-dark small,.description-box.has-description-color.description-style-light small { color:var(--description-text-color); }
.description-box.has-description-color.description-style-dark .description-editor:empty::before,.description-box.has-description-color.description-style-light .description-editor:empty::before { color:var(--description-text-color); }
.description-box.has-description-color.description-style-dark,.description-box.has-description-color.description-style-light { color:var(--description-text-color); }
.description-box.has-description-color.is-empty { color:var(--description-text-color); }
.description-box.has-description-color.is-empty small,.description-box.has-description-color.is-empty .description-editor:empty::before { color:var(--description-text-color); }
.canvas-workspace { flex-direction:column; align-items:stretch; justify-content:space-between; padding:32px 35px 14px; }
.canvas-stage { flex:1 1 auto; width:100%; min-height:260px; }
.page-carousel { flex:0 0 auto; display:grid; grid-template-columns:58px minmax(0,1fr); align-items:start; gap:10px; width:100%; padding-top:11px; border-top:1px solid rgba(0,0,0,.12); }
.page-carousel-heading { display:flex; flex-direction:column; gap:4px; padding-top:4px; color:#555; font:500 9px 'DM Mono',monospace; letter-spacing:.8px; }
.page-carousel-heading small { color:#888; font-size:9px; letter-spacing:0; }
.page-carousel-hint { color:#555 !important; font-size:8px !important; }
.page-carousel-track { min-width:0; display:flex; gap:10px; overflow-x:auto; padding:2px 2px 6px; scrollbar-color:#888 transparent; }
.page-thumb-wrap { position:relative; flex:0 0 142px; width:142px; }
.page-thumb { flex:0 0 142px; width:142px; padding:0; border:1px solid transparent; color:#555; background:transparent; text-align:left; cursor:pointer; }
.page-thumb-wrap .page-thumb { display:block; width:100%; }
.page-thumb-menu-button { position:absolute; z-index:5; top:6px; right:6px; display:grid; place-items:center; width:24px; height:23px; padding:0 0 7px; border:1px solid rgba(255,255,255,.75); color:#fff; background:rgba(0,0,0,.72); font:700 16px/14px Arial,sans-serif; cursor:pointer; opacity:.72; transition:.2s; }
.page-thumb-menu-button:hover,.page-thumb-menu-button:focus-visible,.page-thumb-wrap.is-menu-open .page-thumb-menu-button { color:#000; background:#fff; opacity:1; outline:0; }
.page-thumb-menu { position:fixed; z-index:40; display:none; min-width:202px; padding:4px; border:1px solid #111; background:#fff; box-shadow:5px 5px 0 rgba(0,0,0,.22); }
.page-thumb-wrap.is-menu-open .page-thumb-menu { display:grid; gap:2px; }
.page-thumb-menu button { padding:8px 10px; border:0; color:#111; background:#fff; font:500 9px 'DM Mono',monospace; text-align:left; cursor:pointer; }
.page-thumb-menu button:hover,.page-thumb-menu button:focus-visible { color:#fff; background:#000; outline:0; }
.page-thumb-menu button:disabled { color:#aaa; cursor:not-allowed; }
.page-thumb-menu button:disabled:hover { color:#aaa; background:#fff; }
.is-page-dragging .page-thumb[data-page-index] { cursor:copy; opacity:.72; }
.is-page-dragging .page-thumb.is-active { opacity:1; }
.page-thumb-canvas { position:relative; display:block; width:100%; aspect-ratio:16/9; overflow:hidden; border:1px solid #c9c9c9; background:#fff; box-shadow:0 3px 8px rgba(0,0,0,.08); }
.page-thumb-canvas.format-portrait { aspect-ratio:9/16; }
.page-thumb-canvas.format-square { aspect-ratio:1; }
.page-thumb.is-active .page-thumb-canvas { border:2px solid #000; box-shadow:0 4px 12px rgba(0,0,0,.18); }
.page-thumb-add { color:#777; }
.page-thumb-add-canvas { display:grid; place-items:center; border-style:dashed; background:rgba(255,255,255,.5); box-shadow:none; transition:.2s; }
.page-thumb-add:hover .page-thumb-add-canvas { border-color:#000; color:#000; background:#eee; box-shadow:0 3px 8px rgba(0,0,0,.08); }
.page-thumb-add-symbol { color:currentColor; font:300 34px/1 'DM Mono',monospace; }
.page-thumb-label { display:block; overflow:hidden; padding-top:5px; font:500 9px 'DM Mono',monospace; text-overflow:ellipsis; white-space:nowrap; }
.page-thumb-item { position:absolute; display:flex; flex-direction:column; overflow:visible; }
.page-thumb-photo { position:relative; width:100%; flex:0 0 auto; overflow:hidden; border:1px solid rgba(255,255,255,.95); background:#eee; }
.page-thumb-photo img { width:100%; height:100%; display:block; object-fit:contain; }
.page-thumb-item span { position:absolute; left:3px; top:3px; padding:2px 3px; color:#fff; background:#000; font:7px 'DM Mono',monospace; }
.page-thumb-caption { width:100%; min-height:0; overflow:hidden; padding:2px 3px; color:#fff; background:var(--description-box-color,#000); font:6px/1.15 'DM Sans',sans-serif; text-overflow:ellipsis; white-space:nowrap; }
.page-thumb-caption-style-light { color:#000; }
.page-thumb-caption-style-dark { color:#fff; }
.page-thumb-caption.has-description-color { color:var(--description-text-color); }
.page-thumb-caption.has-description-color.page-thumb-caption-style-light,.page-thumb-caption.has-description-color.page-thumb-caption-style-dark { color:var(--description-text-color); }
.page-thumb-caption-overlay { position:absolute; z-index:2; left:0; bottom:0; }
.producer-brand-overlay { position:absolute; z-index:7; top:6%; left:6%; display:flex; align-items:center; gap:7px; max-width:42%; padding:5px 8px; overflow:hidden; color:#000; background:rgba(255,255,255,.92); font:600 clamp(8px,1vw,13px)/1.15 'DM Mono',monospace; letter-spacing:.4px; text-overflow:ellipsis; text-transform:uppercase; }
.producer-brand-overlay img { width:22px; height:22px; flex:0 0 auto; object-fit:contain; }
.producer-brand-overlay span { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.producer-logo-actions { display:flex; gap:7px; margin-top:9px; }
.producer-logo-actions .button { padding:7px 9px; font-size:10px; }
.producer-logo-preview { display:flex; align-items:center; gap:8px; margin-top:9px; padding:7px; border:1px solid #c9c9c9; color:#555; background:#fff; font:9px 'DM Mono',monospace; }
.producer-logo-preview img { width:30px; height:30px; object-fit:contain; background:#eee; filter:invert(1); }
.producer-logo-preview span { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.client-logo-actions { display:flex; gap:7px; margin-top:9px; }
.client-logo-actions .button { padding:7px 9px; font-size:10px; }
.client-logo-preview { display:flex; align-items:center; gap:8px; margin-top:9px; padding:7px; border:1px solid #c9c9c9; color:#555; background:#fff; font:9px 'DM Mono',monospace; }
.client-logo-preview img { width:30px; height:30px; object-fit:contain; background:#eee; }
.client-logo-preview span { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.info-placement-select { margin-top:10px; }
.info-style-select { margin-top:7px; }
.auto-layout-status { display:flex; flex-direction:column; gap:3px; color:#666; font-size:10px; }
.auto-layout-status strong { color:#111; font-size:11px; font-weight:600; white-space:nowrap; }
.layout-engine-group { align-items:flex-start; }
.layout-engine-group .text-field { width:150px; height:30px; margin:0; padding:0 8px; font-size:10px; }
.auto-layout-help { margin:0 0 18px; color:#666; line-height:1.5; }
.editor-toolbar { flex-wrap:wrap; }
.canvas-page.is-slot-mode .slot-guide { z-index:8; }
.page-thumb-empty { display:grid; place-items:center; height:100%; color:#888; font:8px 'DM Mono',monospace; }
@media (max-width:600px) {
  .canvas-workspace { min-height:620px; padding:24px 15px 12px; }
  .page-carousel { grid-template-columns:1fr; gap:5px; }
  .page-carousel-heading { flex-direction:row; align-items:baseline; gap:8px; }
  .page-thumb { flex-basis:118px; width:118px; }
}
.modal-backdrop { background:rgba(0,0,0,.7); }
.modal { border-radius:2px; box-shadow:0 25px 80px rgba(0,0,0,.38); }
.modal-close { color:#000; }
.export-option { border-color:#c9c9c9; border-radius:2px; }
.export-option:hover { border-color:#000; background:#f4f4f4; }
.option-icon,.option-icon.orange,.option-icon.blue,.option-icon.purple,.option-icon.green { color:#fff; background:#000; border-radius:2px; }
.option-arrow { color:#000; }
.toast { background:#000; box-shadow:var(--shadow); border-radius:2px; }
.selection-status.photo-selected { color:#000; }
.camera-preset-grid { display:grid; grid-template-columns:1fr 1fr; gap:5px; }
.camera-preset { min-height:42px; display:flex; align-items:center; gap:7px; padding:6px 7px; border:1px solid #c9c9c9; border-radius:2px; color:#444; background:#fff; font:500 9px/1.15 'DM Mono',monospace; text-align:left; }
.camera-preset:hover { border-color:#111; }
.camera-preset.is-active { color:#fff; border-color:#000; background:#000; }
.camera-preset span { min-width:27px; color:#ff3b30; font:700 14px/1 'DM Sans',sans-serif; text-align:center; }
.camera-preset.is-active span { color:#fff; }
.annotation-settings { display:grid; grid-template-columns:auto 36px; align-items:center; gap:8px 10px; margin-top:12px; }
.annotation-settings label { display:flex; align-items:center; justify-content:space-between; color:#666; font:500 9px 'DM Mono',monospace; letter-spacing:.6px; }
.annotation-settings input[type=color] { width:36px; height:28px; padding:2px; border:1px solid #c9c9c9; background:#fff; }
.annotation-settings input[type=range] { grid-column:1 / -1; margin-top:-2px; }
.annotation-tool-row { display:grid; grid-template-columns:1fr 1fr; gap:6px; margin-top:10px; }
.annotation-tool-row .button { min-height:34px; padding:7px 6px; font-size:9px; }
.annotation-tool-row .button.is-active { color:#fff; border-color:#000; background:#000; }
.annotation-secondary-actions { margin-top:6px; }
.canvas-page.is-slot-mode .slot-guide { border-color:rgba(0,0,0,.55); background:rgba(255,255,255,.2); }
.canvas-page.is-slot-mode .slot-guide span { color:#000; background:rgba(255,255,255,.9); }
.canvas-page.is-slot-mode .slot-guide.is-target { border-color:#000; background:rgba(0,0,0,.14); box-shadow:0 0 0 3px rgba(0,0,0,.12); }
.canvas-page.is-slot-mode .slot-guide.is-target span { color:#fff; background:#000; }
.topbar { height:54px; padding:0 18px; gap:20px; }
.workspace-app { min-height:calc(100vh - 54px); }
.project-header { min-height:62px; padding:10px 18px 8px; }
.project-header > div:first-child input:first-of-type { width:min(300px,35vw); font-size:18px; }
.editor-toolbar { min-height:42px; padding:6px 16px; gap:10px; }
.canvas-workspace { padding:20px 28px 10px; }
.canvas-page { width:min(1100px,82vw); }
.canvas-page.format-portrait { width:min(620px,54vw); }
.canvas-page.format-square { width:min(820px,66vw); }
.format-btn:disabled { opacity:.65; cursor:not-allowed; }
.project-title-overlay { position:absolute; z-index:7; top:2%; right:2.5%; max-width:42%; color:#fff; mix-blend-mode:difference; font:500 clamp(8px,1.15vw,14px)/1.2 'DM Mono',monospace; letter-spacing:.7px; text-align:right; text-transform:uppercase; outline:0; cursor:text; }
.project-title-overlay:empty::before { content:'Título del proyecto'; opacity:.45; }
.storyboard-meta-frame { position:absolute; z-index:7; inset:3.5%; border-left:1px solid var(--frame-rule-color,rgba(0,0,0,.68)); border-right:1px solid var(--frame-rule-color,rgba(0,0,0,.68)); color:var(--frame-text-color,#111); pointer-events:none; font:500 clamp(7px,.72vw,11px)/1.1 'DM Mono',monospace; letter-spacing:.5px; text-transform:uppercase; }
.storyboard-meta-frame.is-frame-hidden { border-color:transparent; }
.storyboard-meta-top,.storyboard-meta-bottom { position:absolute; left:0; right:0; display:flex; align-items:center; gap:8px; min-height:24px; padding:4px 0; background:transparent; }
.storyboard-meta-top { top:-13px; }
.storyboard-meta-bottom { bottom:-13px; }
.storyboard-meta-rule { flex:1 1 0; min-width:14px; height:0; border-top:1px solid currentColor; opacity:.68; }
.storyboard-meta-top > .storyboard-meta-rule:first-child,.storyboard-meta-bottom > .storyboard-meta-rule:first-child,.storyboard-meta-top > .storyboard-meta-rule:last-child,.storyboard-meta-bottom > .storyboard-meta-rule:last-child { flex:0 1 22px; }
.storyboard-meta-top > .storyboard-meta-rule:nth-child(3):not(:last-child),.storyboard-meta-bottom > .storyboard-meta-rule:nth-child(3):not(:last-child) { flex:1 1 auto; }
.storyboard-meta-frame.is-frame-hidden .storyboard-meta-rule { border-color:transparent; }
.storyboard-meta-top > .storyboard-meta-producer,.storyboard-meta-bottom > .storyboard-meta-details { justify-self:auto; }
.storyboard-meta-top > .storyboard-meta-title,.storyboard-meta-bottom > .storyboard-meta-page { justify-self:auto; }
.storyboard-meta-top > .storyboard-meta-title,.storyboard-meta-bottom > .storyboard-meta-page { margin-left:auto; }
.storyboard-meta-top > .storyboard-meta-producer { flex:0 1 auto; }
.storyboard-meta-top > .storyboard-meta-title { flex:0 1 auto; margin-left:auto; }
.storyboard-meta-top > .storyboard-meta-rule:nth-child(3):not(:last-child) { flex:1 1 0; }
.storyboard-meta-producer { display:flex; flex:0 1 46%; align-items:center; gap:6px; min-width:0; max-width:46%; overflow:hidden; }
.storyboard-meta-logo { width:18px; height:18px; flex:0 0 auto; background:currentColor; -webkit-mask-image:var(--producer-logo); mask-image:var(--producer-logo); -webkit-mask-position:center; mask-position:center; -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat; -webkit-mask-size:contain; mask-size:contain; }
.storyboard-meta-producer strong,.storyboard-meta-title,.storyboard-meta-page { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.storyboard-meta-title { flex:0 1 46%; max-width:46%; text-align:right; }
.storyboard-meta-details { display:flex; flex:0 1 auto; align-items:center; gap:12px; min-width:0; max-width:72%; overflow:hidden; }
.storyboard-meta-details span { display:flex; align-items:baseline; gap:4px; min-width:0; }
.storyboard-meta-client-logo { width:18px; height:18px; flex:0 0 auto; object-fit:contain; align-self:center; }
.storyboard-meta-details small { color:inherit; opacity:.72; font-size:.75em; }
.storyboard-meta-details strong { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.storyboard-meta-page { flex:none; }
.project-fields { display:flex; flex-direction:column; align-items:flex-start; min-width:240px; }
.project-fields label { display:flex; align-items:center; gap:7px; margin:0 0 3px; }
.project-fields .producer-label { margin-top:8px; }
.editable-label { color:#aaa; font-size:8px; letter-spacing:.6px; }
.project-fields input { padding:0; border:0; outline:0; color:var(--ink); background:transparent; }
.project-fields #projectTitle { width:min(330px,35vw); font:600 21px 'Space Grotesk',sans-serif; letter-spacing:-.5px; }
.project-fields #projectProducer { width:min(270px,30vw); font:500 13px 'Space Grotesk',sans-serif; }
.project-fields input::placeholder { color:#9b9b9b; opacity:1; }
.project-fields > strong { display:block; max-width:min(330px,35vw); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:var(--ink); font:600 21px 'Space Grotesk',sans-serif; letter-spacing:-.5px; }
.project-fields > strong + .producer-label { margin-top:8px; }
.project-fields #projectProducerDisplay { max-width:min(270px,30vw); font-size:13px; }
.metadata-fields { display:grid; gap:6px; margin-bottom:12px; }
.metadata-fields label { color:#777; font:500 9px 'DM Mono',monospace; letter-spacing:.6px; }
.metadata-fields .text-field { margin-top:-2px; }
.storyboard-meta-settings > .switch-row { margin:9px 0 0; }
.storyboard-meta-settings > label:first-child + .switch-row { margin-top:0; }
.format-modal-backdrop { background:rgba(0,0,0,.72); }
.format-modal { width:min(620px,100%); }
.format-options { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin-top:24px; }
.format-option { display:flex; flex-direction:column; align-items:flex-start; gap:8px; min-height:150px; padding:16px; text-align:left; border:1px solid #c9c9c9; background:#fff; color:#000; cursor:pointer; }
.format-option:hover { border-color:#000; background:#f4f4f4; transform:translateY(-2px); }
.format-option:disabled,.format-option:disabled:hover { opacity:.42; cursor:not-allowed; transform:none; border-color:#c9c9c9; background:#fff; }
.format-option strong { font:600 14px 'Space Grotesk',sans-serif; }
.format-option small { color:#666; font-size:10px; line-height:1.3; }
.format-preview { align-self:center; display:block; width:68px; border:2px solid #000; background:#eee; }
.format-preview-landscape { height:40px; }
.format-preview-portrait { width:42px; height:68px; }
.format-preview-square { width:56px; height:56px; }
.page-delete-button { margin-top:8px; }
.page-delete-button:disabled { opacity:.45; cursor:not-allowed; }
.delete-modal-mark { background:#000; }
.delete-project-backdrop { background:rgba(0,0,0,.74); }
.delete-page-confirm-backdrop { background:rgba(0,0,0,.68); }
.delete-page-confirm-modal { width:min(470px,100%); border:1px solid #111; box-shadow:12px 12px 0 rgba(0,0,0,.25),0 25px 80px rgba(0,0,0,.38); }
.delete-page-confirm-modal h2 { max-width:340px; margin-top:10px; }
.delete-page-confirm-modal .modal-copy strong { color:#000; }
.clear-page-confirm-modal { width:min(500px,100%); border:1px solid #111; box-shadow:12px 12px 0 rgba(0,0,0,.25),0 25px 80px rgba(0,0,0,.38); }
.clear-page-confirm-modal h2 { max-width:390px; margin-top:10px; }
.clear-page-confirm-modal .modal-copy { max-width:430px; }
.clear-modal-mark { background:#000; }
.undo-notice { display:flex; align-items:center; gap:10px; margin-top:18px; padding:11px 12px; border-left:3px solid #000; color:#222; background:#ededed; }
.undo-notice > span { color:#000; font:22px/1 'DM Mono',monospace; }
.undo-notice p { margin:0; font-size:11px; line-height:1.35; }
.undo-notice kbd { padding:2px 5px; border:1px solid #999; color:#000; background:#fff; font:10px 'DM Mono',monospace; }
@media (max-width:600px) {
  .topbar { height:auto; min-height:54px; }
  .workspace-app { min-height:calc(100vh - 54px); }
  .project-header > div:first-child input:first-of-type { width:min(270px,70vw); }
  .canvas-page { width:min(680px,86vw); }
  .canvas-page.format-portrait { width:min(360px,60vw); }
  .canvas-page.format-square { width:min(520px,78vw); }
  .format-options { grid-template-columns:1fr; }
  .format-option { min-height:0; }
  .project-fields { min-width:0; width:100%; }
  .project-fields #projectTitle,.project-fields #projectProducer { width:100%; }
}
.dashboard-view { min-height:calc(100vh - 54px); padding:clamp(28px,4vw,52px) clamp(24px,7vw,110px) 60px; background:#ececec; background-image:linear-gradient(135deg,rgba(255,255,255,.62) 0 25%,transparent 25% 75%,rgba(255,255,255,.62) 75%),linear-gradient(45deg,transparent 0 25%,rgba(0,0,0,.035) 25% 75%,transparent 75%); background-size:420px 420px; }
.dashboard-view[hidden],.workspace-app[hidden],.modal-backdrop[hidden] { display:none !important; }
.dashboard-hero { display:flex; align-items:center; justify-content:space-between; gap:48px; max-width:1500px; margin:0 auto clamp(28px,4vw,48px); }
.dashboard-hero-copy { max-width:860px; }
.dashboard-hero-copy h1 { margin:15px 0 13px; color:#000; font:600 clamp(36px,4.3vw,64px)/.96 'Space Grotesk',sans-serif; letter-spacing:-3px; }
.dashboard-hero-copy h1 em { color:#777; font-style:normal; }
.dashboard-hero-copy p { max-width:460px; margin:0; color:#666; font-size:14px; line-height:1.55; }
.dashboard-create-card { min-width:270px; display:grid; grid-template-columns:46px 1fr 20px; align-items:center; gap:13px; padding:18px; border:1px solid #111; color:#fff; background:#050505; text-align:left; cursor:pointer; box-shadow:10px 10px 0 rgba(0,0,0,.1); transition:.2s; }
.dashboard-create-card:hover { color:#000; background:#fff; box-shadow:5px 5px 0 #000; transform:translate(2px,2px); }
.dashboard-create-mark { display:grid; place-items:center; width:42px; height:42px; border:1px solid currentColor; font:24px 'DM Mono',monospace; }
.dashboard-create-card strong { display:block; font:600 14px 'Space Grotesk',sans-serif; }
.dashboard-create-card small { display:block; margin-top:4px; color:#aaa; font-size:10px; line-height:1.3; }
.dashboard-create-card:hover small { color:#777; }
.dashboard-create-arrow { font-size:20px; }
.projects-section { max-width:1240px; margin:0 auto; }
.projects-section-heading { display:flex; align-items:flex-end; justify-content:space-between; gap:20px; padding-bottom:14px; border-bottom:1px solid #aaa; }
.projects-toolbar { display:flex; align-items:center; gap:10px; }
.project-sort-label { color:#777; font:9px 'DM Mono',monospace; letter-spacing:.5px; }
.project-sort-select { height:30px; padding:0 9px; border:1px solid #aaa; border-radius:2px; color:#222; background:#fff; font:11px 'DM Sans',sans-serif; }
.projects-section-heading h2 { margin:7px 0 0; color:#000; font:600 23px 'Space Grotesk',sans-serif; letter-spacing:-.7px; }
.project-count { color:#777; font:10px 'DM Mono',monospace; text-transform:uppercase; }
.project-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(270px,1fr)); gap:18px; padding-top:22px; }
.project-card { position:relative; min-width:0; height:100%; animation:project-card-in .35s both; animation-delay:calc(var(--card-index) * 50ms); }
.project-card-open { position:relative; width:100%; height:100%; padding:0; overflow:hidden; border:1px solid #bbb; color:#000; background:#fff; text-align:left; cursor:pointer; transition:.2s; }
.project-card-open:hover { border-color:#000; box-shadow:7px 7px 0 rgba(0,0,0,.8); transform:translate(-2px,-2px); }
.project-card-preview { position:relative; display:grid; place-items:center; height:160px; overflow:hidden; color:#777; background:#d2d2d2; }
.project-card-preview img { width:100%; height:100%; display:block; object-fit:cover; filter:grayscale(1); transition:transform .35s; }
.project-card-open:hover .project-card-preview img { transform:scale(1.04); }
.project-card-preview.is-empty { background:linear-gradient(135deg,#dedede,#bcbcbc); }
.project-card-empty-mark { font-size:38px; }
.project-card-format { position:absolute; right:10px; top:10px; padding:5px 7px; color:#fff; background:rgba(0,0,0,.8); font:9px 'DM Mono',monospace; }
.project-card-body { display:block; padding:15px 15px 57px; }
.project-card-title-slot { display:block; min-width:0; }
.project-card-body strong { display:block; overflow:hidden; font:600 17px 'Space Grotesk',sans-serif; text-overflow:ellipsis; white-space:nowrap; }
.project-card-body small { display:block; margin-top:4px; color:#777; font-size:10px; }
.project-card-title-input { height:29px; margin:-3px 0 0; padding:2px 5px; border:1px solid #000; outline:0; color:#000; background:#fff; font:600 17px 'Space Grotesk',sans-serif; letter-spacing:-.35px; }
.project-card-title-input:not([hidden]) { display:block; width:100%; }
.project-card-details { display:flex; flex-wrap:wrap; gap:6px 12px; margin-top:11px; color:#444; }
.project-card-details span { display:flex; flex-direction:column; min-width:0; max-width:100%; }
.project-card-details small { margin:0; color:#888; font:500 8px 'DM Mono',monospace; letter-spacing:.55px; }
.project-card-details strong { overflow:hidden; max-width:150px; color:#222; font:500 10px 'Space Grotesk',sans-serif; text-overflow:ellipsis; white-space:nowrap; }
.project-card-meta { display:flex; flex-wrap:wrap; gap:7px 12px; margin-top:16px; color:#777; font:9px 'DM Mono',monospace; }
.project-card-meta span:not(:last-child)::after { content:'·'; margin-left:12px; color:#aaa; }
.project-card-actions { position:absolute; z-index:4; right:12px; bottom:12px; display:flex; gap:5px; }
.project-card-action { display:grid; place-items:center; width:29px; height:29px; padding:6px; border:1px solid rgba(255,255,255,.65); color:#fff; background:rgba(0,0,0,.72); cursor:pointer; transition:.2s; }
.project-card-action svg { width:15px; height:15px; fill:none; stroke:currentColor; stroke-linecap:round; stroke-linejoin:round; stroke-width:1.7; }
.project-card-action:hover,.project-card-action:focus-visible { color:#000; background:#fff; outline:0; }
.project-card-delete:hover,.project-card-delete:focus-visible { color:#fff; background:#000; border-color:#000; }
.dashboard-empty { display:grid; place-items:center; gap:7px; padding:70px 20px; border:1px dashed #aaa; color:#666; background:rgba(255,255,255,.55); text-align:center; }
.dashboard-empty-icon { color:#999; font-size:34px; }
.dashboard-empty strong { color:#222; font:600 18px 'Space Grotesk',sans-serif; }
.dashboard-empty p { margin:0 0 12px; font-size:12px; }
@keyframes project-card-in { from { opacity:0; transform:translateY(8px); } to { opacity:1; transform:none; } }
.format-modal-mark,.confirm-modal-mark { display:grid; place-items:center; width:42px; height:42px; margin-bottom:18px; color:#fff; background:#000; font:22px 'DM Mono',monospace; }
.format-modal h2,.confirm-modal h2 { max-width:470px; }
.format-modal .eyebrow,.confirm-modal .eyebrow { display:flex; align-items:center; gap:8px; }
.format-modal .eyebrow-line,.confirm-modal .eyebrow-line { display:inline-block; width:24px; height:1px; background:#000; }
.format-option { transition:.2s; }
.modal-actions { display:flex; justify-content:flex-end; gap:8px; margin-top:24px; }
.new-project-confirm-backdrop { background:rgba(0,0,0,.74); }
.confirm-modal { width:min(500px,100%); }
@media (max-width:700px) {
  .dashboard-view { padding:34px 18px 50px; }
  .dashboard-hero { align-items:stretch; flex-direction:column; margin-bottom:48px; }
  .dashboard-create-card { width:100%; }
  .projects-section-heading { align-items:flex-start; flex-direction:column; gap:8px; }
  .projects-toolbar { width:100%; justify-content:space-between; }
  .project-grid { grid-template-columns:1fr; }
  .modal-actions { flex-direction:column-reverse; }
  .modal-actions .button { width:100%; }
}

.new-project-fields { display:grid; grid-template-columns:1fr 1fr; gap:12px; margin:22px 0 25px; }
.new-project-field { display:grid; gap:6px; }
.new-project-field:first-child { grid-column:1 / -1; }
.new-project-field label { color:#777; font:500 9px 'DM Mono',monospace; letter-spacing:.6px; }
.new-project-field.required label { color:#111; }
.new-project-field .text-field { height:36px; }
.new-project-field .text-field.is-invalid { border-color:#d9533f; box-shadow:0 0 0 2px rgba(217,83,63,.12); }
.new-project-error { min-height:16px; grid-column:1 / -1; margin:0; color:#c84432; font-size:11px; }
.format-choice-heading { margin:0 0 12px; color:#111; font:600 14px 'Space Grotesk',sans-serif; }
.new-project-fields[hidden] + .format-choice-heading { display:none; }
.format-modal { max-height:min(90vh,760px); overflow-y:auto; }
@media (max-width:520px) { .new-project-fields { grid-template-columns:1fr; } .new-project-field:first-child { grid-column:auto; } .projects-toolbar { align-items:flex-start; flex-direction:column; } }

/* Keep the editor viewport stable while long side panels scroll independently. */
.workspace-app { height:calc(100vh - 54px); height:calc(100dvh - 54px); min-height:0; overflow:hidden; contain:layout; }
.editor-area { height:100%; min-height:0; overflow:hidden; }
.library-panel,.inspector-panel { height:100%; min-height:0; overflow-y:auto; overflow-x:hidden; scrollbar-gutter:stable; contain:layout paint; }
.inspector-tabs { position:sticky; top:0; z-index:20; flex:0 0 55px; min-width:0; background:var(--panel); }
.inspector-content { min-width:0; }
.canvas-workspace { min-height:0; overflow:hidden; }
.canvas-stage { flex:1 1 0; width:100%; height:0; min-width:0; min-height:0; overflow:hidden; }
.canvas-stage .canvas-page { max-width:100%; max-height:100%; }
.page-carousel { min-height:0; flex:0 0 auto; }
@media (min-width:601px) {
  html:has(.workspace-app:not([hidden])), body:has(.workspace-app:not([hidden])) { height:100%; overflow:hidden; }
  .app-shell:has(.workspace-app:not([hidden])) { height:100vh; min-height:0; }
}

/* Main navigation: compact brand and Google account entry point. */
.brand-logo { width:34px; height:34px; }
/* One square master for the hub, favicon and return-to-Studio links. */
.brand-logo-frame { flex:0 0 40px; width:40px; height:40px; aspect-ratio:1; }
.brand-logo-frame .brand-logo-studio { position:static; width:100%; height:100%; aspect-ratio:1; display:block; object-fit:contain; filter:none; }
.account-button { min-height:36px; display:inline-flex; align-items:center; gap:8px; padding:3px 8px 3px 4px; border:1px solid #4b4b4b; border-radius:2px; color:#fff; background:transparent; font:500 11px 'DM Sans',sans-serif; }
.account-button:hover { color:#000; background:#fff; border-color:#fff; }
.account-avatar { width:27px; height:27px; display:grid; place-items:center; overflow:hidden; border-radius:50%; color:#fff; background:#555; background-position:center; background-size:cover; font:600 12px 'Space Grotesk',sans-serif; }
.account-button.is-authenticated .account-avatar { background-color:#fff; color:#000; }
.account-label { max-width:150px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
@media (max-width:800px) { .account-label { display:none; } .account-button { padding-right:4px; } }
.profile-backdrop { position:fixed; z-index:120; inset:0; display:grid; place-items:center; padding:20px; background:rgba(0,0,0,.76); backdrop-filter:blur(3px); }
.profile-backdrop[hidden] { display:none; }
.profile-modal { width:min(520px,100%); overflow:hidden; border:1px solid #2b2b2b; border-top:2px solid var(--brand-orange); border-radius:15px; color:#f4f4f4; background:#0d0d0d; box-shadow:0 24px 80px rgba(0,0,0,.55); }
.profile-modal-header { min-height:78px; display:flex; align-items:center; justify-content:space-between; padding:17px 24px; border-bottom:1px solid #222; }
.profile-eyebrow,.profile-access-heading,.profile-detail-row>span,.profile-modules h3 { color:#777; font:600 9px 'DM Mono',monospace; letter-spacing:1.5px; }
.profile-eyebrow { color:var(--brand-orange); }
.profile-modal-header h2 { margin:7px 0 0; font:600 20px 'Space Grotesk',sans-serif; letter-spacing:-.6px; }
.profile-close-icon { width:36px; height:36px; border:1px solid #303030; border-radius:9px; color:#999; background:#151515; font-size:22px; line-height:1; }
.profile-close-icon:hover { color:#fff; border-color:#555; }
.profile-modal-body { padding:22px 24px 12px; }
.profile-identity { display:flex; align-items:center; gap:13px; min-height:62px; margin-bottom:17px; }
.profile-avatar { width:58px; height:58px; display:grid; flex:none; place-items:center; overflow:hidden; border:1px solid #333; border-radius:12px; color:#fff; background:#292929 center/cover no-repeat; font:600 20px 'Space Grotesk',sans-serif; }
.profile-identity>div { min-width:0; display:grid; gap:5px; }
.profile-identity strong { overflow:hidden; color:#fff; font:600 16px 'Space Grotesk',sans-serif; text-overflow:ellipsis; white-space:nowrap; }
.profile-identity div span { overflow:hidden; color:#929292; font-size:12px; text-overflow:ellipsis; white-space:nowrap; }
.profile-access-heading { padding:15px 0 5px; border-top:1px solid #222; }
.profile-detail-row { min-height:46px; display:flex; align-items:center; justify-content:space-between; gap:12px; border-top:1px solid #222; }
.profile-access-heading + .profile-detail-row { border-top:0; }
.profile-detail-row strong { color:#e7e7e7; font-size:12px; text-align:right; }
.profile-modules { padding:17px 0 7px; border-top:1px solid #222; }
.profile-modules h3 { margin:0 0 12px; }
.profile-module-list { display:flex; flex-wrap:wrap; gap:8px; }
.profile-module-chip { padding:7px 10px; border:1px solid rgba(var(--brand-orange-rgb),.3); border-radius:6px; color:var(--brand-orange); background:rgba(var(--brand-orange-rgb),.05); font:600 9px 'DM Mono',monospace; text-transform:uppercase; letter-spacing:.3px; }
.profile-modules-empty { color:#888; font-size:12px; }
.profile-modal-actions { display:grid; grid-template-columns:1fr 1fr; gap:10px; padding:12px 24px 22px; }
.profile-modal-actions button { min-height:42px; border-radius:8px; font:600 10px 'DM Mono',monospace; text-transform:uppercase; letter-spacing:.5px; }
.profile-close-button { border:1px solid #333; color:#bbb; background:#151515; }
.profile-close-button:hover { color:#fff; border-color:#555; }
.profile-signout-button { display:flex; align-items:center; justify-content:center; gap:9px; border:1px solid var(--brand-orange); color:#fff; background:var(--brand-orange); }
.profile-signout-button:hover { box-shadow:0 0 0 3px rgba(var(--brand-orange-rgb),.2); }
@media (max-width:520px) { .profile-modal-header { padding:15px 18px; }.profile-modal-body { padding:18px 18px 10px; }.profile-modal-actions { padding:10px 18px 18px; } }

/* Authentication is required before any project data or workspace is visible. */
.auth-gate { position:fixed; z-index:100; inset:0; display:grid; place-items:center; padding:24px; overflow-y:auto; background:radial-gradient(ellipse at 50% 0,rgba(255,96,211,.09),transparent 60%),#101010; }
.auth-gate[hidden] { display:none; }
.dashboard-create-card[hidden],#dashboardEmptyCreateBtn[hidden] { display:none!important; }
.dashboard-view.is-loading > :not(.dashboard-loading) { visibility:hidden; }
.dashboard-loading { min-height:calc(100dvh - 140px); display:grid; place-items:center; color:#666; font:500 11px 'DM Mono',monospace; letter-spacing:.08em; }

/* Visto read-only keeps navigation and page zoom while removing every editing surface. */
.visto-read-only .workspace-app { grid-template-columns:minmax(0,1fr); }
.visto-read-only .library-panel,.visto-read-only .inspector-panel,.visto-read-only .editor-footer { display:none!important; }
.visto-read-only .editor-toolbar .toolbar-group,.visto-read-only .editor-toolbar .toolbar-divider,.visto-read-only #autoArrangeBtn { display:none!important; }
.visto-read-only .editor-toolbar { justify-content:flex-end; }
.visto-read-only #canvasPage { pointer-events:none; }
.visto-read-only .page-carousel-hint { display:none!important; }
.visto-read-only #backToDashboardBtn:not([hidden]),.visto-read-only #manageVersionsBtn:not([hidden]) { display:inline-flex; }
.auth-locked .app-shell { visibility:hidden; }
html[data-studio-app="home"] body.auth-locked .app-shell { visibility:visible; }
html[data-studio-app="home"] body.auth-locked { background:#101010; }
html[data-studio-app="reviews"] body.auth-locked { background:#ececec; }
.auth-gate-card { width:min(440px,100%); padding:36px; border:1px solid #414141; color:#fff; background:#181818; box-shadow:0 24px 80px rgba(0,0,0,.35); }
.auth-gate-brand { display:inline-flex; align-items:center; gap:14px; margin-bottom:30px; color:#fff; text-decoration:none; font:600 12px/1.15 'DM Mono',monospace; letter-spacing:1px; }
.auth-gate-brand img { width:64px; height:64px; aspect-ratio:1; object-fit:contain; }
.auth-gate-brand span { padding-left:14px; border-left:1px solid #555; }
.auth-gate-card .eyebrow { color:#FF60D3; }
.auth-gate-card .eyebrow-line { background:#FF60D3; }
.auth-gate-card h1 { margin:17px 0 12px; color:#fff; font:600 clamp(30px,5vw,42px)/.98 'Space Grotesk',sans-serif; letter-spacing:-1.8px; }
.auth-gate-card > p:not(.auth-gate-status) { margin:0; color:#aaa; font-size:13px; line-height:1.55; }
.auth-gate-button { width:100%; min-height:46px; margin-top:28px; justify-content:space-between; border-radius:0; color:#101010; background:#FF60D3; box-shadow:none; }
.auth-gate-button:hover { color:#101010; background:#ff83dd; }
.auth-gate-status { min-height:16px; margin:15px 0 0; color:#FF60D3; font-size:12px; line-height:1.5; }
.auth-gate-options { display:grid; gap:12px; margin-top:24px; }
.auth-gate-options[hidden] { display:none; }
.auth-gate-choice { min-height:46px; display:flex; align-items:center; justify-content:space-between; gap:12px; padding:12px 16px; border:1px solid #FF60D3; border-radius:0; color:#101010; background:#FF60D3; font-size:13px; font-weight:600; cursor:pointer; }
.auth-gate-choice:disabled { border-color:#444; color:#aaa; background:transparent; cursor:not-allowed; }
.auth-gate-options p { margin:0; color:#aaa; font-size:12px; line-height:1.6; }
.auth-gate[data-step="options"] .auth-gate-button { margin-top:18px; color:#ddd; border:1px solid #555; background:transparent; }
.auth-gate-back { min-height:44px; display:inline-flex; align-items:center; margin-top:10px; color:#aaa; font-size:12px; text-decoration:none; }
.auth-gate :is(button,a):focus-visible { outline:2px solid #FF60D3; outline-offset:5px; }
@media (max-width:520px) { .auth-gate-card { padding:30px 24px; } }

.background-actions { display:flex; gap:7px; margin-top:10px; }
.background-actions .button { min-width:0; flex:1; padding:0 8px; font-size:10px; }
.background-preview { height:64px; margin-top:9px; border:1px solid #c9c9c9; background-color:#eee; background-position:center; background-repeat:no-repeat; background-size:cover; }
.background-preview[hidden] { display:none; }
.background-section > label[for="backgroundPattern"] { display:flex; align-items:center; justify-content:space-between; margin:17px 0 11px; color:#7f8c88; font:500 9px 'DM Mono',monospace; letter-spacing:.7px; }
.background-section .text-field { margin-top:4px; }
.selection-actions { display:grid; grid-template-columns:1fr 1fr; gap:7px; }
.selection-actions .button { min-width:0; padding:0 7px; font-size:10px; }
.text-color-settings > label:first-child { margin-bottom:13px; }
.text-color-settings > .color-position-label { display:block; margin:15px 0 8px; color:#7f8c88; font:500 9px 'DM Mono',monospace; letter-spacing:.7px; }
.text-color-settings .info-placement-select { width:100%; margin:0; }
.text-color-row { display:flex; align-items:center; justify-content:space-between; gap:10px; margin-top:9px; color:#777; font:500 9px 'DM Mono',monospace; letter-spacing:.4px; text-transform:uppercase; }
.text-color-row:first-of-type { margin-top:0; }
.text-color-row .color-field { flex:0 0 auto; }
.text-color-row .color-field input { width:25px; height:25px; }
.text-color-row .color-field span { min-width:58px; font-size:9px; }
.selection-section > label:first-child output { color:#111; font:500 9px 'DM Mono',monospace; }
.selection-section #batchFrameSection { margin-top:16px; padding-top:16px; border-top:1px solid #c9c9c9; }
.selection-section #batchFrameSection > label { display:flex; margin-bottom:9px; color:#666; font:500 9px 'DM Mono',monospace; letter-spacing:.7px; }
.batch-frame-options { grid-template-columns:1fr 1fr; gap:3px; }
.versions-modal { width:min(700px,100%); max-height:min(90vh,760px); overflow-y:auto; }
.version-manager-list { display:grid; gap:8px; margin-top:22px; }
.version-manager-row { display:grid; grid-template-columns:38px minmax(0,1fr) auto auto; align-items:center; gap:10px; padding:11px; border:1px solid #d1d1d1; background:#fafafa; }
.version-manager-row.is-current { border-color:#111; background:#fff; box-shadow:4px 4px 0 rgba(0,0,0,.12); }
.version-manager-mark { display:grid; place-items:center; width:30px; height:30px; color:#fff; background:#000; font:10px 'DM Mono',monospace; }
.version-manager-copy { min-width:0; }
.version-manager-name { width:min(100%,250px); height:29px; padding:3px 6px; border:1px solid transparent; color:#111; background:transparent; font:600 14px 'Space Grotesk',sans-serif; }
.version-manager-name:hover,.version-manager-name:focus { border-color:#999; outline:0; background:#fff; }
.version-manager-copy small { display:block; margin-top:4px; color:#777; font:9px 'DM Mono',monospace; }
.delete-version-backdrop { background:rgba(0,0,0,.74); }
@media (max-width:600px) {
  .version-manager-row { grid-template-columns:32px minmax(0,1fr); }
  .version-manager-row .button { width:100%; }
  .version-manager-row .button:nth-last-child(2) { grid-column:2; }
  .version-manager-row .button:last-child { grid-column:2; }
}

/* Vertical versions use the available height instead of stacking a tall artboard over the page strip. */
.workspace-app.is-portrait-layout .canvas-workspace { display:grid; grid-template-columns:minmax(132px,190px) minmax(0,1fr); grid-template-rows:minmax(0,1fr); grid-template-areas:'carousel stage'; align-items:stretch; gap:22px; min-height:0; padding:24px; overflow:hidden; }
.workspace-app.is-portrait-layout .canvas-stage { grid-area:stage; width:100%; height:100%; min-width:0; min-height:0; overflow:hidden; }
.workspace-app.is-portrait-layout .canvas-page.format-portrait { width:min(450px,30vw); max-width:100%; max-height:100%; }
.workspace-app.is-portrait-layout .page-carousel { grid-area:carousel; display:flex; flex-direction:column; align-items:stretch; width:100%; min-width:0; min-height:0; padding:0 12px 0 0; border-top:0; border-right:1px solid rgba(0,0,0,.14); }
.workspace-app.is-portrait-layout .page-carousel-heading { flex:0 0 auto; flex-direction:column; align-items:flex-start; }
.workspace-app.is-portrait-layout .page-carousel-track { flex-direction:column; align-items:stretch; min-height:0; overflow-x:hidden; overflow-y:auto; padding:5px 3px 8px 0; }
.workspace-app.is-portrait-layout .page-thumb-wrap,.workspace-app.is-portrait-layout .page-thumb { width:100%; flex:0 0 auto; }
@media (max-width:1100px) {
  .workspace-app.is-portrait-layout .canvas-workspace { grid-template-columns:118px minmax(0,1fr); gap:12px; padding:18px 14px; }
  .workspace-app.is-portrait-layout .canvas-page.format-portrait { width:min(390px,34vw); }
}
@media (max-width:800px) {
  .workspace-app.is-portrait-layout .canvas-workspace { display:flex; flex-direction:column; align-items:stretch; gap:10px; padding:20px 15px 10px; overflow:hidden; }
  .workspace-app.is-portrait-layout .canvas-stage { flex:1 1 0; width:100%; height:auto; }
  .workspace-app.is-portrait-layout .page-carousel { flex:0 0 auto; width:100%; padding:9px 0 0; border-top:1px solid rgba(0,0,0,.14); border-right:0; }
  .workspace-app.is-portrait-layout .page-carousel-track { flex-direction:row; overflow-x:auto; overflow-y:hidden; }
  .workspace-app.is-portrait-layout .page-thumb-wrap,.workspace-app.is-portrait-layout .page-thumb { width:118px; flex-basis:118px; }
}

/* Library actions: keep the sidebar compact and reveal controls only when a thumbnail is targeted. */
.asset-grid { gap:8px; max-height:calc(100vh - 350px); padding:2px 2px 8px 0; }
.asset-thumb { border-radius:4px; transition:.18s; }
.asset-thumb:hover { box-shadow:0 4px 12px rgba(0,0,0,.13); transform:translateY(-1px); }
.asset-thumb.is-placed:hover { box-shadow:0 0 0 2px #000,0 4px 12px rgba(0,0,0,.13); }
.asset-thumb-index { left:5px; top:5px; padding:3px 5px; border-radius:2px; background:rgba(0,0,0,.78); }
.asset-thumb-actions { position:absolute; right:5px; bottom:5px; display:flex; gap:4px; opacity:0; transform:translateY(4px); transition:.16s; }
.asset-thumb:hover .asset-thumb-actions,.asset-thumb:focus-within .asset-thumb-actions { opacity:1; transform:none; }
.asset-thumb-action,.asset-thumb-delete { position:static; width:24px; height:24px; padding:0; border:1px solid rgba(255,255,255,.7); border-radius:2px; color:#fff; background:rgba(0,0,0,.78); font:16px/1 'DM Sans',sans-serif; cursor:pointer; }
.asset-thumb-action:hover,.asset-thumb-delete:hover { color:#000; background:#fff; }
.asset-thumb-delete { font-size:19px; }

/* Custom library dialogs replace the browser's native confirmation alert. */
.clear-library-confirm-backdrop { background:rgba(0,0,0,.72); }
.clear-library-confirm-modal { width:min(500px,100%); border:1px solid #111; box-shadow:12px 12px 0 rgba(0,0,0,.22),0 25px 80px rgba(0,0,0,.38); }
.clear-library-confirm-modal h2 { max-width:420px; margin-top:10px; }
.clear-library-confirm-modal .modal-copy { max-width:430px; }

/* The artboard gets its size from its height, so its declared aspect ratio is never overridden by a short viewport. */
.canvas-stage .canvas-page { width:auto; height:100%; max-width:100%; max-height:100%; flex:0 0 auto; aspect-ratio:16 / 9; }
.canvas-stage .canvas-page.format-portrait { aspect-ratio:9 / 16; }
.canvas-stage .canvas-page.format-square { aspect-ratio:1; }
.workspace-app .canvas-stage .canvas-page.format-portrait,.workspace-app .canvas-stage .canvas-page.format-square { width:auto; }
.canvas-stage .canvas-page { cursor:crosshair; }
.canvas-page .selection-marquee { position:absolute; z-index:50; box-sizing:border-box; border:1px dashed #111; background:rgba(0,0,0,.09); box-shadow:inset 0 0 0 1px rgba(255,255,255,.8); pointer-events:none; }

/* Keep the optional background photo independent from the artboard pattern and foreground content. */
.canvas-page { isolation:isolate; }
.artboard-background-photo { position:absolute; z-index:0; inset:0; width:100%; height:100%; object-fit:cover; pointer-events:none; }
.canvas-page > .design-item { z-index:1; }
.canvas-page > .design-item.has-camera-spill { z-index:10; }
.canvas-page > .design-item.is-selected { z-index:20; }
.canvas-page > .empty-page { z-index:1; }
.background-image-controls { margin-top:14px; }
.background-image-controls[hidden],.background-pattern-color[hidden] { display:none; }
.background-image-controls > label { display:flex; align-items:center; justify-content:space-between; margin:12px 0 8px; color:#7f8c88; font:500 9px 'DM Mono',monospace; letter-spacing:.7px; }
.background-pattern-color { margin-top:13px; }
.background-preview { position:relative; overflow:hidden; background-color:#eee; isolation:isolate; }
.background-preview-photo { width:100%; height:100%; display:block; object-fit:cover; }

/* Standalone PDR application. It shares project data with Visto without reusing its workspace UI. */
.pdr-view { min-height:calc(100vh - 72px); color:#111; background:#ececec; }
.pdr-view[hidden] { display:none !important; }
.pdr-shell { width:min(1480px,100%); min-height:calc(100vh - 72px); margin:0 auto; padding:clamp(28px,4vw,58px) clamp(22px,5vw,78px) 70px; }
.pdr-app-header,.pdr-editor-header { display:flex; align-items:flex-start; justify-content:space-between; gap:28px; padding-bottom:30px; border-bottom:1px solid #bdbdbd; }
.pdr-kicker { display:block; color:#777; font:600 10px 'DM Mono',monospace; letter-spacing:1.6px; text-transform:uppercase; }
.pdr-app-header h1,.pdr-editor-header h1 { margin:12px 0 8px; font:600 clamp(34px,4vw,58px)/.95 'Space Grotesk',sans-serif; letter-spacing:-2px; }
.pdr-app-header p,.pdr-editor-header p { max-width:540px; margin:0; color:#666; font-size:13px; line-height:1.5; }
.pdr-header-actions,.pdr-editor-actions { display:flex; align-items:center; gap:8px; }
.pdr-project-heading { display:flex; justify-content:space-between; margin:34px 0 12px; color:#666; font:600 10px 'DM Mono',monospace; letter-spacing:1px; text-transform:uppercase; }
.pdr-project-heading small { color:#999; font-weight:400; letter-spacing:0; }
.pdr-project-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }
.pdr-project-card { display:grid; grid-template-columns:48px minmax(0,1fr) 24px; align-items:center; gap:16px; min-height:100px; padding:18px; border:1px solid #bdbdbd; color:#111; background:#fff; text-align:left; transition:.18s ease; }
.pdr-project-card:hover { border-color:#111; box-shadow:7px 7px 0 #111; transform:translate(-2px,-2px); }
.pdr-project-number { color:#888; font:500 12px 'DM Mono',monospace; }
.pdr-project-card-copy { min-width:0; }
.pdr-project-card-copy strong { display:block; overflow:hidden; font:600 19px 'Space Grotesk',sans-serif; text-overflow:ellipsis; white-space:nowrap; }
.pdr-project-card-copy small { display:block; margin-top:7px; color:#777; font-size:11px; }
.pdr-project-arrow { color:#777; font-size:20px; }
.pdr-empty { padding:72px 24px; border:1px dashed #aaa; color:#777; background:rgba(255,255,255,.5); text-align:center; }
.pdr-empty strong { display:block; color:#111; font:600 18px 'Space Grotesk',sans-serif; }
.pdr-empty p { margin:8px 0 18px; font-size:12px; }
.pdr-editor-shell { padding-top:28px; }
.pdr-back-button { display:block; margin-bottom:28px; padding:0; border:0; color:#555; background:transparent; font-size:11px; }
.pdr-back-button:hover { color:#000; text-decoration:underline; }
.pdr-editor-header h1 { margin-top:10px; font-size:clamp(29px,3vw,45px); }
.pdr-controls { display:flex; align-items:end; gap:34px; padding:22px 0; border-bottom:1px solid #c9c9c9; }
.pdr-control-label { display:block; margin-bottom:8px; color:#777; font:600 9px 'DM Mono',monospace; letter-spacing:1px; }
.pdr-segmented { display:flex; padding:3px; background:#d8d8d8; }
.pdr-segmented button { min-width:112px; padding:9px 15px; border:0; color:#666; background:transparent; font-size:11px; }
.pdr-segmented button.is-active { color:#fff; background:#111; }
.pdr-select { min-width:180px; height:34px; padding:0 9px; border:1px solid #aaa; color:#111; background:#fff; font-size:11px; }
.pdr-live-summary { margin-left:auto; color:#666; font:500 10px 'DM Mono',monospace; text-transform:uppercase; }
.pdr-board-section,.pdr-table-section { padding-top:31px; }
.pdr-section-heading { display:flex; align-items:end; justify-content:space-between; gap:20px; margin-bottom:14px; }
.pdr-section-heading h2 { margin:8px 0 0; font:600 23px 'Space Grotesk',sans-serif; letter-spacing:-.6px; }
.pdr-page-note { color:#777; font:10px 'DM Mono',monospace; }
.pdr-shot-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:12px; }
.pdr-shot-grid.is-portrait { grid-template-columns:repeat(5,minmax(0,1fr)); }
.pdr-shot-card { min-width:0; border:1px solid #bdbdbd; background:#fff; }
.pdr-shot-image { position:relative; aspect-ratio:16/9; overflow:hidden; background:#171717; }
.pdr-shot-grid.is-portrait .pdr-shot-image { aspect-ratio:9/16; }
.pdr-shot-image img { width:100%; height:100%; display:block; object-fit:cover; }
.pdr-shot-image span { position:absolute; left:8px; top:8px; padding:4px 5px; color:#fff; background:#111; font:500 10px 'DM Mono',monospace; }
.pdr-shot-copy { min-height:64px; padding:10px; }
.pdr-shot-copy strong { display:block; overflow:hidden; font:600 11px 'Space Grotesk',sans-serif; text-overflow:ellipsis; white-space:nowrap; }
.pdr-shot-copy small { display:block; overflow:hidden; margin-top:5px; color:#777; font-size:10px; text-overflow:ellipsis; white-space:nowrap; }
.pdr-inline-empty { margin-top:4px; padding:35px 20px; }
.pdr-table-wrap { overflow:auto; border:1px solid #bdbdbd; background:#fff; }
.pdr-table { width:100%; min-width:1000px; border-collapse:collapse; table-layout:fixed; }
.pdr-table th { padding:11px 8px; color:#666; background:#dedede; border-bottom:1px solid #bdbdbd; text-align:left; font:600 9px 'DM Mono',monospace; letter-spacing:.7px; }
.pdr-table td { padding:7px 8px; border-bottom:1px solid #e4e4e4; vertical-align:middle; }
.pdr-table tr:last-child td { border-bottom:0; }
.pdr-table th:nth-child(1),.pdr-table td:nth-child(1) { width:45px; }.pdr-table th:nth-child(2),.pdr-table td:nth-child(2) { width:58px; }.pdr-table th:nth-child(3),.pdr-table td:nth-child(3) { width:230px; }.pdr-table th:nth-child(4),.pdr-table td:nth-child(4) { width:155px; }.pdr-table th:nth-child(5),.pdr-table td:nth-child(5) { width:115px; }.pdr-table th:nth-child(6),.pdr-table td:nth-child(6) { width:100px; }.pdr-table th:nth-child(7),.pdr-table td:nth-child(7) { width:125px; }
.pdr-index,.pdr-page-number { color:#777; font:500 11px 'DM Mono',monospace; }.pdr-shot-cell { display:grid; grid-template-columns:34px minmax(0,1fr); align-items:center; gap:7px; }.pdr-shot-cell strong { font:600 11px 'DM Mono',monospace; }.pdr-input { width:100%; height:30px; padding:0 7px; border:1px solid transparent; border-radius:3px; color:#111; background:transparent; font-size:11px; outline:0; }.pdr-input:hover { border-color:#c5c5c5; background:#fafafa; }.pdr-input:focus { border-color:#111; background:#fff; box-shadow:0 0 0 1px #111; }.pdr-input::placeholder { color:#aaa; }.pdr-status-input { border-color:#d0d0d0; background:#fff; cursor:pointer; }
@media (max-width:800px) { .pdr-project-grid { grid-template-columns:1fr; }.pdr-app-header,.pdr-editor-header { flex-direction:column; }.pdr-controls { align-items:flex-start; flex-wrap:wrap; gap:18px; }.pdr-live-summary { width:100%; margin-left:0; }.pdr-shot-grid,.pdr-shot-grid.is-portrait { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:520px) { .pdr-shell { padding:25px 16px 50px; }.pdr-header-actions,.pdr-editor-actions { width:100%; }.pdr-header-actions .button,.pdr-editor-actions .button { flex:1; }.pdr-segmented { width:100%; }.pdr-segmented button { flex:1; }.pdr-shot-grid,.pdr-shot-grid.is-portrait { grid-template-columns:1fr 1fr; gap:8px; } }

/* Local video workspace under the shared Studio navigation and account. */
.studio-divi-view{height:calc(100dvh - 54px);min-height:560px;background:#111315}
.studio-divi-view iframe{display:block;width:100%;height:100%;border:0;background:#111315}
html[data-studio-app="divi"] .breadcrumbs{display:none}
html[data-studio-app="divi"] .top-actions{margin-left:auto}
html[data-studio-app="divi"] .app-shell{min-height:100dvh}
@media(max-width:640px){.studio-divi-view{height:calc(100dvh - 92px);min-height:720px}}