/* CardFoundary — warm editorial surfaces around a cinematic canvas. */
.cf-studio{--cf-ink:#242631;--cf-muted:#767782;--cf-border:#e8e5e1;--cf-paper:#fffefa;--cf-accent:#f26b4f;color:var(--cf-ink);background:var(--cf-paper);font:14px/1.5 "Segoe UI",Arial,sans-serif;border:1px solid #ddd9d5;border-radius:18px;overflow:hidden;max-width:1600px;margin:22px auto 36px;box-shadow:0 30px 70px #29203518,0 2px 5px #29203508;text-align:left}
.cf-studio *{box-sizing:border-box}.cf-studio [hidden]{display:none!important}.cf-studio h2{font-size:14px;font-weight:650;line-height:1.4;margin:0 0 12px;color:var(--cf-ink)}.cf-studio p{margin:8px 0 18px}.cf-studio button,.cf-studio input,.cf-studio select,.cf-studio textarea{font:inherit;letter-spacing:normal;text-transform:none}.cf-studio button{display:inline-flex;align-items:center;justify-content:center;gap:8px;background:#fffefa;border:1px solid var(--cf-border);border-radius:8px;padding:9px 12px;min-height:40px;cursor:pointer;color:var(--cf-ink);line-height:1.4;box-shadow:none;transition:background .18s,border-color .18s,transform .18s,box-shadow .18s}.cf-studio button:hover{background:#f7f1eb;border-color:#d4c8bf}.cf-studio button:active{transform:translateY(1px)}.cf-studio button:disabled{opacity:.35;cursor:not-allowed}.cf-studio :focus-visible{outline:3px solid #ef795c;outline-offset:3px}.cf-icon{width:17px;height:17px;flex-shrink:0}.cf-studio input:not([type=checkbox]),.cf-studio select,.cf-studio textarea{display:block;width:100%;min-width:0;border:1px solid var(--cf-border);border-radius:7px;padding:9px 10px;background:#faf9f6;color:#30303b;min-height:39px;transition:border-color .2s}.cf-studio input:hover,.cf-studio select:hover,.cf-studio textarea:hover{border-color:#b9b4b1}.cf-studio input[type=color]{padding:5px;height:38px}.cf-studio textarea{resize:vertical}.cf-studio label{display:block;color:#71717b;font-size:11px;font-weight:500;line-height:1.5}.cf-studio label input,.cf-studio label select,.cf-studio label textarea{margin-top:6px;font-size:12px;font-weight:400}.cf-studio .cf-primary{background:#f26b4f;color:#201c1d;border-color:#f26b4f;font-weight:650;box-shadow:0 4px 12px #ef795c25}.cf-studio .cf-primary:hover{background:#ff8867;border-color:#ff8867;box-shadow:0 6px 18px #ef795c35}.cf-header{display:flex;align-items:center;justify-content:space-between;padding:21px 26px;gap:20px;background:#23232d;color:#fff}.cf-brand{display:flex;align-items:center;gap:13px;flex-shrink:0}.cf-brand strong{font-size:22px;font-weight:650;letter-spacing:-.8px}.cf-brand small{display:block;font-size:8px;letter-spacing:2px;margin-top:3px;color:#b1acb8}.cf-logo{display:flex;align-items:center;justify-content:center;position:relative;width:42px;height:42px;background:#f26b4f;border-radius:12px;box-shadow:0 4px 14px #f26b4f30}.cf-logo i{position:absolute;width:14px;height:23px;border:1.5px solid #27232b;border-radius:3px;transform:rotate(-24deg) translateX(-6px)}.cf-logo i:nth-child(2){background:#f26b4f;transform:rotate(-4deg)}.cf-logo i:nth-child(3){background:#f26b4f;transform:rotate(18deg) translateX(6px)}.cf-header-actions{display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end}.cf-header-actions button{font-size:12px;background:transparent;color:#dcd8e0;border-color:#46434e;padding:10px 14px}.cf-header-actions button:hover{background:#37343f;border-color:#75707c}.cf-header-actions .cf-primary{margin-left:7px}.cf-document{display:flex;align-items:center;padding:11px 26px;border-bottom:1px solid var(--cf-border);gap:18px;min-height:60px;background:#fffefa}.cf-breadcrumb{font-size:11px;color:#85828a;display:flex;gap:18px}.cf-breadcrumb>span{color:#c4c0c6}.cf-studio .cf-name-label{font-size:0}.cf-studio input.cf-project-name{border:0;background:transparent;padding:0;margin:0;font-weight:600;font-size:12px;width:180px;min-height:28px}.cf-history{display:flex;align-items:center;gap:5px;margin-left:auto}.cf-history button{padding:4px 9px;border:0;min-height:30px;background:transparent}.cf-history .cf-icon{width:16px;height:16px}.cf-save-state{font-size:10px;color:#7e7b82;margin-left:14px;display:flex;align-items:center;gap:6px}.cf-save-state:before{content:'';width:5px;height:5px;background:#709f80;border-radius:50%}.cf-layout{display:grid;grid-template-columns:236px minmax(260px,1fr) 258px;min-height:700px}.cf-library{padding:25px 20px;border-right:1px solid var(--cf-border);display:flex;flex-direction:column;background:#fffefa}.cf-section-heading{display:flex;align-items:center;justify-content:space-between}.cf-section-heading h2{margin:0;font-size:15px;letter-spacing:-.3px}.cf-section-heading>span{font-size:8px;letter-spacing:1px;color:#a08778;background:#f4eee7;border-radius:4px;padding:4px 6px}.cf-muted{font-size:11px;color:var(--cf-muted)}.cf-templates{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:5px}.cf-studio .cf-template{display:flex;flex-direction:column;align-items:flex-start;gap:10px;padding:7px 7px 9px;border:1px solid #eae4de;text-align:left;width:100%;min-width:0;background:#faf8f4;border-radius:9px;position:relative}.cf-studio .cf-template:hover{transform:translateY(-3px);border-color:#e5ad98;box-shadow:0 6px 18px #81523615}.cf-studio .cf-template-active{border-color:#e99076;background:#fff4ed;box-shadow:0 0 0 1px #e9907622}.cf-template-active:after{content:'✓';position:absolute;top:11px;right:11px;background:#f26b4f;color:#fff;width:16px;height:16px;border-radius:50%;text-align:center;font-size:10px;line-height:16px}.cf-template-art{width:100%;height:112px;flex-shrink:0;border-radius:4px;display:flex;align-items:center;justify-content:center;color:#fffef4;font:24px Georgia;overflow:hidden;background:#e9dfd1!important}.cf-template-art img{max-width:78%;max-height:88%;box-shadow:0 3px 7px #28233025;transform:rotate(-6deg);object-fit:contain}.cf-template:nth-child(2) .cf-template-art{background:#e8e6f1!important}.cf-template:nth-child(2) img{transform:rotate(5deg);max-width:86%}.cf-template strong{display:block;font-size:11px;font-weight:650;white-space:nowrap}.cf-template small{display:block;font-size:9px;color:var(--cf-muted);line-height:1.5;margin-top:2px}.cf-studio .cf-template[data-template="blank"]{grid-column:1/-1;flex-direction:row;align-items:center;gap:10px;padding:9px}.cf-template[data-template="blank"] .cf-template-art{width:34px;height:40px;background:transparent!important;border:1px dashed #cabfb5;color:#a99283;font:20px "Segoe UI";border-radius:4px}.cf-divider{height:1px;background:var(--cf-border);margin:22px 0}.cf-add-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:7px}.cf-studio .cf-add-grid button{padding:13px 3px;flex-direction:column;gap:7px;font-size:10px;background:#faf8f4}.cf-add-grid .cf-icon{width:21px;height:21px;color:#66616d}.cf-hint{font-size:11px;color:var(--cf-muted);line-height:1.7}.cf-library-footer{margin-top:auto;padding:18px 15px 7px;background:linear-gradient(135deg,#faeee2,#f0e9f1);border:1px solid #eee1d7;border-radius:10px;color:#6c5960}.cf-tip-symbol{display:block;color:#bf795c;font-size:23px;margin-bottom:7px}.cf-library-footer strong{font:italic 19px/1.2 Georgia,serif;letter-spacing:-.3px;color:#725147}.cf-library-footer p{font-size:11px;line-height:1.7;margin-top:10px}.cf-dot{display:inline-block;width:5px;height:5px;background:#e69970;border-radius:50%;margin-right:8px;box-shadow:0 0 10px #e6997055}.cf-workspace{min-width:0;background:#252530;display:flex;flex-direction:column;position:relative}.cf-canvas-toolbar{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:18px 23px;z-index:1;color:#b9b5c3}.cf-artboard-label{font-size:11px;display:flex;align-items:center;gap:0}.cf-artboard-label small{font-size:7px;letter-spacing:1px;padding:4px 7px;margin-left:12px;border-radius:4px;background:#36333f;color:#a19aa9}.cf-canvas-toolbar label{display:flex;align-items:center;gap:8px;letter-spacing:normal;font-size:10px;color:#a5a0b0}.cf-studio .cf-zoom{width:75px;margin:0;background:#302e3b;border-color:#47414f;color:#d8d2df;font-size:10px;min-height:29px;padding:4px 8px}.cf-stage{flex:1;overflow:auto;display:grid;place-items:center;padding:28px 32px 30px;min-height:300px;background-image:radial-gradient(ellipse at 25% 20%,#66506f38,transparent 60%),radial-gradient(ellipse at 80% 85%,#92533f22,transparent 60%),radial-gradient(#b9a9cc1f .65px,transparent .65px);background-size:100% 100%,100% 100%,16px 16px}.cf-canvas{display:block;box-shadow:0 28px 70px #09081099,0 0 0 1px #ffffff0a,0 3px 10px #0005;touch-action:none;max-width:none!important;flex-shrink:0;border-radius:2px;transition:box-shadow .2s}.cf-canvas:focus-visible{outline-color:#ee987a}.cf-canvas-footer{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:18px 23px;font-size:9px;color:#96909f}.cf-dimensions{border:1px solid #45404d;border-radius:5px;padding:4px 8px;color:#bfb6c6;font-variant-numeric:tabular-nums}.cf-canvas-footer kbd{display:inline-block;background:#34313e;border:1px solid #4a4353;border-radius:3px;padding:0 3px;margin:0 1px;font:9px "Segoe UI";color:#bfb7c9}.cf-footer-divider{padding:0 7px;color:#605666}.cf-properties{padding:25px 20px;border-left:1px solid var(--cf-border);max-height:850px;overflow:auto;background:#fffefa}.cf-panel-caption{font-size:9px;letter-spacing:1.5px;color:#a09591;margin:26px 0 12px}.cf-card-fields{margin-top:0}.cf-two{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:12px}.cf-layers{display:flex;flex-direction:column;gap:3px;max-height:220px;overflow:auto;scrollbar-width:thin;scrollbar-color:#ddd5cf transparent}.cf-studio .cf-layer{justify-content:flex-start;width:100%;text-align:left;font-size:12px;padding:10px;border:1px solid transparent;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-height:38px;display:block;border-radius:6px;color:#696571}.cf-studio .cf-layer:hover{background:#f7f2ec}.cf-studio .cf-layer[aria-pressed=true]{background:#fff0e7;border-color:#e9c5b3;color:#b15d3c}.cf-layer-count{font-size:9px;font-weight:400;padding:2px 6px;border-radius:4px;background:#f0ece6;color:#9a8f86;margin-left:5px}.cf-layer-actions{display:flex;gap:4px;margin-top:13px;padding-top:12px;border-top:1px solid #efebe7}.cf-studio .cf-layer-actions button{font-size:10px;padding:6px 8px;flex:1;min-height:33px;background:#faf8f4}.cf-text-fields,.cf-fill-field{margin-top:12px}.cf-checkboxes label{display:flex;align-items:center;gap:5px}.cf-checkboxes input{accent-color:#f26b4f}.cf-status{display:flex;justify-content:space-between;gap:20px;padding:11px 24px;border-top:1px solid var(--cf-border);font-size:10px;color:#7b747a;background:#faf8f5}.cf-message:before{content:'✦';color:#d59170;margin-right:7px}.cf-status>span:last-child{flex-shrink:0;font-size:7px;letter-spacing:1.5px}.cf-restore{display:flex;align-items:center;gap:12px;padding:12px 24px;background:#fff1df;font-size:12px;border-bottom:1px solid #ead1b8}.cf-dialog{color:var(--cf-ink);background:#fffefa;border:1px solid var(--cf-border);border-radius:18px;padding:28px;width:min(440px,calc(100vw - 32px));max-height:80vh;box-shadow:0 20px 90px #0005}.cf-dialog::backdrop{background:#211c2c99;backdrop-filter:blur(5px)}.cf-dialog-close{float:right}.cf-dialog-content{clear:both;padding-top:12px}.cf-dialog-content>button,.cf-dialog-content>select{display:block;width:100%;margin:12px 0}.cf-dialog-content p{font-size:13px;color:var(--cf-muted)}
@media(min-width:1450px){.cf-layout{grid-template-columns:260px minmax(260px,1fr) 280px}.cf-library{padding:28px 24px}.cf-properties{padding:28px 24px}.cf-template-art{height:130px}}
@media(max-width:1050px){.cf-layout{grid-template-columns:210px minmax(220px,1fr) 225px}.cf-header{padding:18px}.cf-header-actions{gap:5px}.cf-header-actions button{padding:9px;font-size:10px}.cf-library{padding:22px 14px}.cf-properties{padding:22px 14px}.cf-canvas-footer{flex-wrap:wrap}.cf-brand strong{font-size:19px}.cf-artboard-label small{display:none}.cf-template-art{height:105px}.cf-template small{font-size:7px}}
@media(max-width:780px){.cf-studio{border-radius:13px;margin:12px auto}.cf-header{align-items:flex-start;flex-direction:column;padding:18px;gap:18px}.cf-header-actions{justify-content:flex-start;width:100%}.cf-header-actions button{flex:1;font-size:10px;padding:10px 5px}.cf-header-actions .cf-primary{margin-left:0}.cf-header-actions .cf-icon{width:14px;height:14px}.cf-document{padding:12px 16px;gap:8px;flex-wrap:wrap}.cf-breadcrumb{display:none}.cf-save-state{font-size:9px;margin-left:4px}.cf-layout{display:flex;flex-direction:column}.cf-library{border-right:0;border-bottom:1px solid var(--cf-border);padding:18px 16px}.cf-library>.cf-muted{margin:5px 0 12px}.cf-library>.cf-divider,.cf-library>h2,.cf-library>.cf-hint,.cf-library-footer{display:none}.cf-templates{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:0}.cf-studio .cf-template,.cf-studio .cf-template[data-template="blank"]{grid-column:auto;flex-direction:column;align-items:stretch;gap:7px;padding:6px;min-width:0}.cf-template-art{height:87px}.cf-template[data-template="blank"] .cf-template-art{height:87px;width:100%;border:1px dashed #d5c7bd}.cf-template strong{font-size:9px;white-space:normal}.cf-template small{display:none}.cf-add-grid{margin-top:12px}.cf-studio .cf-add-grid button{flex-direction:row;font-size:11px;padding:6px;min-height:44px}.cf-add-grid .cf-icon{width:18px;height:18px}.cf-properties{border-left:0;border-top:1px solid var(--cf-border);max-height:none;padding:22px}.cf-stage{min-height:400px;padding:26px 24px}.cf-canvas-toolbar{padding:16px 18px}.cf-workspace{min-height:480px}.cf-canvas-footer{padding:14px 18px}.cf-canvas-footer kbd,.cf-footer-divider{display:none}.cf-layers{max-height:190px}.cf-studio .cf-layer{min-height:44px;font-size:11px}.cf-layer-actions button{min-height:44px}.cf-status{padding:12px 16px}.cf-status>span:last-child{display:none}.cf-restore{flex-wrap:wrap;padding:12px 16px}.cf-studio input.cf-project-name{width:125px;font-size:11px}.cf-history button{padding:4px 6px}.cf-template-active:after{top:9px;right:9px}.cf-template-art img{max-height:82%}}
@media(prefers-reduced-motion:reduce){.cf-studio *{transition:none!important}}

.cf-color-swatches{display:flex;gap:8px;margin-top:12px}.cf-studio .cf-color-swatch{width:25px;height:25px;min-height:25px;border:3px solid #fff;outline:1px solid #e2dcd6;border-radius:50%;padding:0;background:var(--swatch)}.cf-studio .cf-color-swatch:hover{outline-color:#f26b4f;transform:translateY(-2px)}.cf-studio .cf-color-swatch:focus-visible{outline:3px solid #ef795c;outline-offset:2px}.cf-color-swatch[aria-pressed=true]{box-shadow:0 0 0 2px #ed8769;outline:0}@media(max-width:780px){.cf-color-swatches{gap:12px}.cf-studio .cf-color-swatch{width:32px;height:32px;min-height:32px}}

/* Phase 2: reusable card content and front/back navigation. */
.cf-side-switch{display:flex;justify-content:center;gap:4px;padding:12px 0 0;background:#252530}.cf-studio .cf-side-switch button{min-height:32px;padding:6px 20px;font-size:11px;color:#b9b4c4;background:#302d3a;border-color:#48414f}.cf-studio .cf-side-switch button[aria-pressed=true]{background:#f26b4f;color:#211e28;border-color:#f26b4f}.cf-product-fields{border-bottom:1px solid #e8e5e1;padding:0 0 18px;margin-top:22px}.cf-product-fields>label{margin-top:10px}.cf-product-fields>button{width:100%;margin-top:16px;font-size:11px}.cf-templates{max-height:380px;overflow:auto;scrollbar-width:thin;padding:2px}.cf-library-footer{margin-top:24px}.cf-library{max-height:980px;overflow:auto}.cf-properties{max-height:980px}@media(max-width:780px){.cf-templates{max-height:220px}.cf-library{max-height:none}.cf-properties{max-height:none}.cf-side-switch{padding-top:16px}.cf-studio .cf-side-switch button{min-height:40px;min-width:90px}}

/* Expanded design tools. */
.cf-template-search-label,.cf-template-filter-label{margin-bottom:10px}.cf-studio .cf-template-search,.cf-studio .cf-template-filter{font-size:11px;padding:7px;min-height:34px}.cf-design-toolbar{display:flex;justify-content:center;flex-wrap:wrap;gap:5px;padding:0 12px 10px;background:#252530}.cf-studio .cf-design-toolbar button{background:#302d3a;border-color:#48414f;color:#d0c9d9;min-height:30px;font-size:10px;padding:5px 9px}.cf-studio .cf-design-toolbar button[aria-pressed=true]{background:#694433;border-color:#d98a67;color:#fff3e3}.cf-tool-group{border:1px solid #e8e1da;border-radius:7px;margin:15px 0;padding:10px}.cf-tool-group summary{cursor:pointer;font-size:11px;font-weight:600;color:#69594d;min-height:25px}.cf-tool-group[open] summary{margin-bottom:12px}.cf-align-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:5px}.cf-studio .cf-align-grid button,.cf-tool-group button{font-size:10px;min-height:32px;padding:5px}.cf-shape-options>label{margin-bottom:10px}.cf-flip-tools{display:flex;gap:6px;margin:12px 0}.cf-studio .cf-flip-tools button{font-size:10px}.cf-type-tools input[type=checkbox]{accent-color:#f26b4f}.cf-selection-count{font-size:10px;color:#a16e55}.cf-studio .cf-add-grid button{min-height:54px}.cf-library{max-height:1080px}.cf-properties{max-height:1080px}.cf-template-art img{transition:transform .2s}.cf-template:hover .cf-template-art img{transform:rotate(0) scale(1.05)}@media(max-width:780px){.cf-library,.cf-properties{max-height:none}.cf-design-toolbar{padding:10px}.cf-studio .cf-design-toolbar button{min-height:38px}.cf-studio .cf-align-grid button,.cf-tool-group button{min-height:40px}}

.cf-template-preview{display:flex;justify-content:center;gap:16px;padding:16px;background:#ebe5dc;border-radius:12px;margin:15px 0}.cf-template-preview img{width:42%;height:auto;object-fit:contain;max-height:300px;filter:drop-shadow(0 5px 8px #0002)}.cf-dialog:has(.cf-template-preview){width:min(600px,calc(100vw - 32px))}.cf-text-feedback{padding:9px;background:#f7efdf;border-radius:6px}
.cf-bulk-file{display:block;width:100%;margin:16px 0;padding:12px;border:1px dashed #cfb9a9;border-radius:8px;background:#fcf8f3}.cf-bulk-setup{display:grid;gap:10px;margin-top:18px;padding-top:18px;border-top:1px solid var(--cf-border)}.cf-bulk-setup h3{margin:0;font-size:13px}.cf-bulk-setup label{display:grid;gap:5px;font-size:11px;font-weight:650}.cf-bulk-setup select{width:100%;margin:0}.cf-bulk-duplex{display:flex!important;align-items:center;grid-template-columns:auto 1fr;gap:8px!important;font-weight:400!important}.cf-bulk-status{padding:10px 12px;background:#f7f2ec;border-radius:7px;font-size:11px}.cf-dialog:has(.cf-bulk-setup){width:min(540px,calc(100vw - 32px))}
.cf-project-row{display:flex;gap:8px;margin:10px 0}.cf-project-row button:first-child{flex:1;text-align:left}.cf-project-row button:last-child{color:#a53d35}

/* Keep scrollable template rows at their natural card height. */
.cf-templates{height:330px;flex-shrink:0;grid-auto-rows:max-content;align-content:start}.cf-studio .cf-template{min-height:190px;overflow:hidden}.cf-studio .cf-template[data-template="blank"]{min-height:65px}.cf-template-art{flex-shrink:0}@media(max-width:780px){.cf-templates{height:220px}.cf-studio .cf-template,.cf-studio .cf-template[data-template="blank"]{min-height:140px}}


/* Studio 2.0: a premium creative workspace. */
.cf-studio{--cf-ink:#15172a;--cf-muted:#70758d;--cf-border:#e5e8f2;--cf-paper:#fbfcff;--cf-accent:#ff6b57;width:min(1800px,calc(100vw - 48px));max-width:none;margin:34px 50% 52px;transform:translateX(-50%);border:1px solid #dfe4f1;border-radius:28px;background:linear-gradient(145deg,#fff,#f7f8ff);box-shadow:0 36px 100px #24264d1c,0 3px 12px #17192c0d;isolation:isolate}
.cf-studio button{border-radius:11px;border-color:#e2e6f0;background:#fff;box-shadow:0 2px 5px #1e25410a;font-weight:600}.cf-studio button:hover{background:#f7f8ff;border-color:#c8d0e8;box-shadow:0 8px 20px #252b5312;transform:translateY(-2px)}.cf-studio input:not([type=checkbox]),.cf-studio select,.cf-studio textarea{border-radius:10px;border-color:#e2e6f0;background:#fff}
.cf-header{position:relative;overflow:hidden;padding:25px 30px;background:radial-gradient(circle at 8% -40%,#a9a5ff 0%,transparent 34%),radial-gradient(circle at 83% -75%,#ffb68c 0%,transparent 42%),linear-gradient(112deg,#15172d,#25234a 52%,#29245a)}.cf-header:before,.cf-header:after{content:"";position:absolute;border-radius:999px;pointer-events:none;opacity:.3}.cf-header:before{width:260px;height:260px;right:17%;bottom:-220px;background:#ff926d}.cf-header:after{width:210px;height:210px;left:37%;top:-180px;background:#817cff}.cf-header>*{position:relative;z-index:1}.cf-logo{width:48px;height:48px;border-radius:15px;background:linear-gradient(145deg,#ff896d,#ff5b5f);box-shadow:0 12px 25px #ff6a5f48}.cf-brand strong{font-size:24px;letter-spacing:-1.1px}.cf-brand small{color:#cbcbe9;letter-spacing:2.4px}.cf-header-actions button{border-color:#ffffff24;background:#ffffff0d;color:#f5f4ff;backdrop-filter:blur(9px);padding:10px 15px}.cf-header-actions button:hover{background:#ffffff1f;border-color:#ffffff4d;color:#fff}.cf-header-actions .cf-primary{background:linear-gradient(135deg,#ff8069,#ff5d62);border-color:#ff9783;color:#fff;box-shadow:0 10px 25px #ff645039}
.cf-document{padding:13px 30px;min-height:64px;background:linear-gradient(90deg,#fff,#f9faff 70%,#fff8f5);border-bottom-color:#e7eaf4}.cf-breadcrumb{font-weight:700;color:#7981a3;text-transform:uppercase;letter-spacing:1.1px;font-size:9px}.cf-studio input.cf-project-name{font-size:13px;color:#252a48}.cf-save-state{padding:6px 10px;border:1px solid #d8eddf;border-radius:999px;background:#f4fff8;color:#4f8964;font-weight:600}
.cf-layout{grid-template-columns:270px minmax(320px,1fr) 290px;min-height:760px}.cf-library{padding:28px 23px;background:linear-gradient(180deg,#fff,#f8f9ff);border-right-color:#e7eaf4}.cf-properties{padding:28px 23px;background:linear-gradient(180deg,#fff,#fbfbff);border-left-color:#e7eaf4}.cf-section-heading h2{font-size:16px;color:#222746;letter-spacing:-.45px}.cf-section-heading>span{color:#6255a8;background:#efefff;border-radius:999px;font-weight:700;padding:5px 8px}.cf-muted{color:#7e839a}.cf-template-search-label,.cf-template-filter-label{color:#5f6682;font-weight:700;letter-spacing:.2px}
.cf-templates{gap:12px;height:355px;padding:3px}.cf-studio .cf-template{min-height:205px;padding:8px;border-radius:14px;border-color:#e6e8f2;background:#fff;box-shadow:0 3px 8px #1b204a08}.cf-studio .cf-template:hover{border-color:#aeb5ef;box-shadow:0 15px 28px #45447b18;transform:translateY(-4px)}.cf-studio .cf-template-active{border-color:#7771e8;background:linear-gradient(145deg,#fff,#f1f0ff);box-shadow:0 0 0 3px #7771e820,0 12px 25px #4e4a9f18}.cf-template-active:after{background:linear-gradient(135deg,#7771e8,#a66ce7);box-shadow:0 3px 8px #6a5dcc55}.cf-template-art{height:126px;border-radius:10px;box-shadow:inset 0 0 0 1px #ffffff35,0 4px 11px #24234314}.cf-template strong{color:#303550}.cf-template small{color:#858ba1}.cf-studio .cf-add-grid button{border-radius:12px;background:linear-gradient(150deg,#fff,#f6f7ff);border-color:#e3e6f2;color:#3b405e}.cf-add-grid .cf-icon{color:#6f66d7}.cf-library-footer{background:radial-gradient(circle at 100% 0,#ffbe9f,transparent 45%),linear-gradient(135deg,#f2efff,#fff0ea);border-color:#e4dcfa;border-radius:16px;box-shadow:0 10px 20px #5c4e8110}.cf-library-footer strong{color:#4b4776}.cf-tip-symbol{color:#ff7663}
.cf-workspace{background:radial-gradient(circle at 15% 10%,#5e5aab,transparent 28%),radial-gradient(circle at 85% 100%,#d36c75,transparent 32%),linear-gradient(150deg,#1b1d38,#23264d 60%,#2e2851)}.cf-side-switch,.cf-design-toolbar{background:transparent}.cf-canvas-toolbar{padding:20px 26px;color:#d8daf4}.cf-artboard-label{font-size:12px;font-weight:700}.cf-artboard-label small{background:#ffffff18;color:#eeeefe;border:1px solid #ffffff17;border-radius:999px;padding:5px 8px}.cf-design-toolbar{padding:0 20px 12px}.cf-studio .cf-design-toolbar button{border-radius:9px;background:#ffffff0c;border-color:#ffffff1a;color:#e4e3f7}.cf-studio .cf-design-toolbar button:hover{background:#ffffff1a;border-color:#ffffff45}.cf-stage{margin:0 18px 12px;border:1px solid #ffffff12;border-radius:20px;padding:34px;background-image:radial-gradient(circle at 20% 18%,#9d8ee845,transparent 35%),radial-gradient(circle at 80% 82%,#ff887637,transparent 35%),radial-gradient(#d8d6ff2b .7px,transparent .7px);background-size:100% 100%,100% 100%,18px 18px;box-shadow:inset 0 1px 0 #ffffff0b}.cf-canvas{border-radius:7px;box-shadow:0 38px 80px #050612a8,0 0 0 1px #ffffff54,0 4px 12px #0007}.cf-canvas-footer{padding:17px 27px;color:#c6c5dd}.cf-dimensions{border-color:#ffffff2d;background:#ffffff0b;color:#edefff;border-radius:999px;padding:5px 10px}
.cf-panel-caption{color:#858cac;font-weight:700}.cf-studio .cf-layer{border-radius:9px;color:#626982}.cf-studio .cf-layer:hover{background:#f2f3ff;color:#4d5290}.cf-studio .cf-layer[aria-pressed=true]{background:linear-gradient(90deg,#eeecff,#fff3ed);border-color:#cfc8ff;color:#665ac3}.cf-tool-group{border-color:#e5e7f2;border-radius:12px;background:#fdfdff}.cf-tool-group summary{color:#555c7e;font-weight:700}.cf-status{padding:14px 28px;background:linear-gradient(90deg,#f5f5ff,#fff8f4);border-top-color:#e7eaf4;color:#686f88}.cf-status>span:last-child{color:#8c78a4;font-weight:700}.cf-message:before{color:#776ce6}.cf-dialog{border:1px solid #e4e4f4;border-radius:22px;box-shadow:0 30px 100px #10112370}.cf-dialog::backdrop{background:#1718308a;backdrop-filter:blur(10px)}
@media(max-width:1100px){.cf-studio{width:calc(100vw - 28px)}.cf-layout{grid-template-columns:225px minmax(240px,1fr) 245px}.cf-library,.cf-properties{padding:22px 16px}.cf-header{padding:20px}.cf-header-actions button{padding:9px 10px;font-size:10px}.cf-stage{margin:0 12px 10px;padding:25px}}
@media(max-width:780px){.cf-studio{width:calc(100vw - 20px);margin-top:16px;border-radius:20px}.cf-header{padding:20px 18px}.cf-brand strong{font-size:22px}.cf-header-actions{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));width:100%}.cf-header-actions .cf-primary{grid-column:span 2}.cf-document{padding:12px 18px}.cf-layout{display:flex}.cf-library,.cf-properties{padding:22px 16px}.cf-templates{height:230px}.cf-studio .cf-template{min-height:145px}.cf-template-art{height:86px}.cf-stage{margin:0 10px 10px;padding:22px 14px;border-radius:15px}.cf-canvas-toolbar{padding:18px}.cf-canvas-footer{padding:14px 18px}.cf-status{padding:13px 18px}}


/* Full-bleed WordPress integration without horizontal overflow. */
.cf-page-shell{position:relative;left:50%;width:100vw;max-width:100vw;transform:translateX(-50%);padding:0 24px;overflow:clip}
.cf-page-shell .cf-studio{width:100%;max-width:1800px;margin:34px auto 52px;transform:none}
@media(max-width:780px){.cf-page-shell{padding:0 10px}.cf-page-shell .cf-studio{width:100%;margin:16px auto 28px}}

/* Faster building blocks for common card content. */
.cf-quick-inserts{margin-top:22px;padding:15px;border:1px solid #e0def8;border-radius:14px;background:linear-gradient(145deg,#f8f7ff,#fff8f5)}.cf-insert-heading{display:flex;justify-content:space-between;align-items:center}.cf-insert-heading h2{margin:0;font-size:13px}.cf-insert-heading span{font-size:8px;letter-spacing:1px;font-weight:800;color:#746ad4}.cf-quick-inserts .cf-hint{margin:7px 0 11px}.cf-insert-grid{display:grid;grid-template-columns:1fr 1fr;gap:6px}.cf-studio .cf-insert-grid button{min-height:36px;padding:7px;font-size:10px;background:#fff;border-color:#dedcf2;color:#515072}.cf-studio .cf-insert-grid button:hover{background:#efedff;border-color:#aaa4ed;color:#514bb3}.cf-studio .cf-insert-grid button:last-child{grid-column:1/-1}@media(max-width:780px){.cf-quick-inserts{display:none}}


/* Studio 2.1: daylight workspace and a fixed desktop editing surface. */
@media (min-width:781px){
  .cf-page-shell:has(.cf-studio){height:100vh;overflow:hidden;padding:0}
  .cf-page-shell:has(.cf-studio) .cf-studio{height:100vh;margin:0;border-radius:0;box-shadow:none}
  .cf-page-shell:has(.cf-studio) .cf-layout{min-height:0;flex:1;height:calc(100vh - 168px)}
  .cf-page-shell:has(.cf-studio) .cf-library,.cf-page-shell:has(.cf-studio) .cf-properties{max-height:none;height:auto;scrollbar-width:none}
  .cf-page-shell:has(.cf-studio) .cf-library::-webkit-scrollbar,.cf-page-shell:has(.cf-studio) .cf-properties::-webkit-scrollbar{display:none}
  .cf-page-shell:has(.cf-studio) .cf-stage{overflow:hidden;min-height:0}
}
.cf-studio{--cf-ink:#263447;--cf-muted:#718096;--cf-border:#dce5ef;--cf-paper:#fbfdff;--cf-accent:#5576d9;background:#fbfdff;color:var(--cf-ink)}
.cf-header{background:linear-gradient(115deg,#ffffff,#f3f7ff 62%,#f7fbff);color:#263447;border-bottom:1px solid #dce5ef;box-shadow:0 5px 16px #3f5e8710}
.cf-header:before{background:#cddcff;opacity:.42}.cf-header:after{background:#d7f1eb;opacity:.45}.cf-brand strong{color:#24334a}.cf-brand small{color:#7789a6}.cf-logo{background:linear-gradient(145deg,#7b9af4,#5e78d7);box-shadow:0 8px 20px #607fd538}.cf-logo i,.cf-logo i:nth-child(2),.cf-logo i:nth-child(3){border-color:#eff5ff;background:#7b9af4}.cf-logo i:nth-child(2),.cf-logo i:nth-child(3){background:#91acf8}
.cf-header-actions button,.cf-studio .cf-header-actions button{background:#ffffffcc;color:#52627c;border-color:#d8e2ef;backdrop-filter:blur(8px);box-shadow:0 2px 7px #465f7d0b}.cf-header-actions button:hover,.cf-studio .cf-header-actions button:hover{background:#f2f6ff;color:#3f5dac;border-color:#b8caec}.cf-header-actions .cf-primary,.cf-studio .cf-header-actions .cf-primary{background:linear-gradient(135deg,#6e8cec,#5874cf);border-color:#5874cf;color:#fff;box-shadow:0 8px 18px #5677ce2b}
.cf-workspace{background:linear-gradient(145deg,#eef3f8,#f8fbfd 55%,#eaf2f6)}.cf-side-switch,.cf-design-toolbar{background:transparent}.cf-canvas-toolbar{color:#52627a;border-bottom:1px solid #dce5ef}.cf-artboard-label small{background:#e6eefb;color:#6176a0;border-color:#d3e0f2}.cf-canvas-toolbar label{color:#687a93}.cf-studio .cf-zoom{background:#fff;color:#465a76;border-color:#d5e0eb}.cf-studio .cf-design-toolbar button{background:#fff;color:#51637f;border-color:#d7e1eb;box-shadow:0 2px 6px #5268860d}.cf-studio .cf-design-toolbar button:hover{background:#edf4ff;color:#4b67b4;border-color:#b7cae8}.cf-studio .cf-design-toolbar button[aria-pressed=true]{background:#e2ecff;color:#4662b8;border-color:#a9c0ec}
.cf-side-switch{background:#f3f7fa}.cf-studio .cf-side-switch button{background:#fff;color:#5e6f87;border-color:#d7e1eb}.cf-studio .cf-side-switch button[aria-pressed=true]{background:#dfeaff;color:#4864bc;border-color:#abc0ec}.cf-stage{background-image:radial-gradient(circle at 14% 16%,#d8e9f055,transparent 32%),radial-gradient(circle at 87% 84%,#dbe4ff66,transparent 35%),radial-gradient(#9fb3c926 .7px,transparent .7px);background-size:100% 100%,100% 100%,18px 18px;border-color:#dce6ee;box-shadow:inset 0 1px 0 #fff}.cf-canvas{box-shadow:0 22px 55px #52647d30,0 0 0 1px #d6e0e9,0 4px 10px #6071891d}.cf-canvas-footer{color:#6e7f95}.cf-dimensions{background:#fff;border-color:#d8e2eb;color:#53657c}.cf-canvas-footer kbd{background:#fff;border-color:#d8e2eb;color:#64748b}
.cf-library,.cf-properties{background:linear-gradient(180deg,#fff,#f8fbfd)}.cf-library-footer{background:linear-gradient(135deg,#f1f6ff,#f5fbf8);border-color:#dbe7ef}.cf-library-footer strong{color:#50657c}.cf-quick-inserts{background:linear-gradient(145deg,#f5f8ff,#f5fbf9);border-color:#d9e4ef}.cf-insert-heading span{color:#5c78cb}.cf-studio .cf-insert-grid button{color:#52657b;border-color:#d9e4ec}.cf-studio .cf-insert-grid button:hover{background:#eaf2ff;color:#4866b3;border-color:#b9ccea}

/* Guarantee that all Studio regions share the available desktop height. */
@media (min-width:781px){
  .cf-page-shell:has(.cf-studio) .cf-studio{display:flex;flex-direction:column;min-height:0}
  .cf-page-shell:has(.cf-studio) .cf-layout{height:auto!important;flex:1;min-height:0}
  .cf-page-shell:has(.cf-studio) .cf-workspace,.cf-page-shell:has(.cf-studio) .cf-library,.cf-page-shell:has(.cf-studio) .cf-properties{min-height:0}
  .cf-page-shell:has(.cf-studio) .cf-header{padding:14px 24px;flex-shrink:0}
  .cf-page-shell:has(.cf-studio) .cf-document{min-height:48px;padding:8px 24px;flex-shrink:0}
  .cf-page-shell:has(.cf-studio) .cf-status{padding:8px 24px;flex-shrink:0}
  .cf-page-shell:has(.cf-studio) .cf-canvas-toolbar{padding:12px 20px}
  .cf-page-shell:has(.cf-studio) .cf-design-toolbar{padding-bottom:8px}
  .cf-page-shell:has(.cf-studio) .cf-canvas-footer{padding:10px 20px;flex-shrink:0}
}

/* Canvas-first desktop workspace: controls share one compact top rail and the artboard begins at the top. */
@media (min-width:781px){
  .cf-page-shell:has(.cf-studio) .cf-workspace{display:grid;grid-template-rows:46px minmax(0,1fr) auto;position:relative}
  .cf-page-shell:has(.cf-studio) .cf-canvas-toolbar{grid-row:1;padding:8px 16px;min-height:46px;justify-content:flex-end}
  .cf-page-shell:has(.cf-studio) .cf-artboard-label{position:absolute;left:16px;top:15px}
  .cf-page-shell:has(.cf-studio) .cf-design-toolbar{position:absolute;top:8px;left:180px;right:106px;z-index:3;justify-content:center;padding:0;flex-wrap:nowrap}
  .cf-page-shell:has(.cf-studio) .cf-design-toolbar button{min-height:30px;padding:5px 8px;white-space:nowrap}
  .cf-page-shell:has(.cf-studio) .cf-stage{grid-row:2;place-items:start center;align-content:start;margin:0 8px 8px;padding:14px;min-height:0}
  .cf-page-shell:has(.cf-studio) .cf-canvas-footer{grid-row:3;padding:8px 16px;min-height:32px}
  .cf-page-shell:has(.cf-studio) .cf-side-switch{position:absolute;z-index:4;top:7px;left:12px;padding:0;background:transparent}
  .cf-page-shell:has(.cf-studio) .cf-side-switch~.cf-canvas-toolbar .cf-artboard-label{left:190px}
}
@media (min-width:781px) and (max-width:1180px){
  .cf-page-shell:has(.cf-studio) .cf-design-toolbar{left:145px;right:84px;gap:3px}
  .cf-page-shell:has(.cf-studio) .cf-design-toolbar button{font-size:9px;padding:5px 6px}
  .cf-page-shell:has(.cf-studio) .cf-artboard-label{font-size:10px}
}

/* Prevent toolbar overlap: the canvas status and design controls each receive a dedicated compact row. */
@media (min-width:781px){
  .cf-page-shell:has(.cf-studio) .cf-workspace{grid-template-rows:42px 38px minmax(0,1fr) auto}
  .cf-page-shell:has(.cf-studio) .cf-canvas-toolbar{grid-row:1;position:relative;padding:7px 16px;min-height:42px;justify-content:space-between}
  .cf-page-shell:has(.cf-studio) .cf-artboard-label{position:static}
  .cf-page-shell:has(.cf-studio) .cf-design-toolbar{position:static;grid-row:2;left:auto;right:auto;z-index:auto;justify-content:center;padding:4px 10px 5px;flex-wrap:wrap}
  .cf-page-shell:has(.cf-studio) .cf-design-toolbar button{min-height:28px;padding:4px 8px}
  .cf-page-shell:has(.cf-studio) .cf-stage{grid-row:3}
  .cf-page-shell:has(.cf-studio) .cf-canvas-footer{grid-row:4}
  .cf-page-shell:has(.cf-studio) .cf-side-switch{position:static;grid-row:1;z-index:auto;padding:5px 10px}
}

/* Zoomed artboards may be larger than the stage: scroll the canvas area, never hide its lower edge. */
@media (min-width:781px){
  .cf-page-shell:has(.cf-studio) .cf-stage{overflow:auto;scrollbar-width:thin;scrollbar-color:#b9c8d8 transparent}
  .cf-page-shell:has(.cf-studio) .cf-stage::-webkit-scrollbar{width:10px;height:10px}
  .cf-page-shell:has(.cf-studio) .cf-stage::-webkit-scrollbar-thumb{background:#b9c8d8;border:3px solid transparent;border-radius:999px;background-clip:content-box}
}