@font-face{font-family:Naskh;src:url('./fonts/Naskh-400.woff2') format('woff2');font-weight:400;font-display:swap}@font-face{font-family:Naskh;src:url('./fonts/Naskh-700.woff2') format('woff2');font-weight:700;font-display:swap} @font-face{font-family:Cairo;src:url('./fonts/Cairo-400.woff2') format('woff2');font-weight:400;font-display:swap}@font-face{font-family:Cairo;src:url('./fonts/Cairo-700.woff2') format('woff2');font-weight:700;font-display:swap} @font-face{font-family:Almarai;src:url('./fonts/Almarai-400.woff2') format('woff2');font-weight:400;font-display:swap}@font-face{font-family:Almarai;src:url('./fonts/Almarai-700.woff2') format('woff2');font-weight:700;font-display:swap} @font-face{font-family:Tajawal;src:url('./fonts/Tajawal-400.woff2') format('woff2');font-weight:400;font-display:swap}@font-face{font-family:Tajawal;src:url('./fonts/Tajawal-700.woff2') format('woff2');font-weight:700;font-display:swap} @font-face{font-family:PlexAr;src:url('./fonts/PlexAr-400.woff2') format('woff2');font-weight:400;font-display:swap}@font-face{font-family:PlexAr;src:url('./fonts/PlexAr-700.woff2') format('woff2');font-weight:700;font-display:swap} @font-face{font-family:Readex;src:url('./fonts/Readex-400.woff2') format('woff2');font-weight:400;font-display:swap}@font-face{font-family:Readex;src:url('./fonts/Readex-700.woff2') format('woff2');font-weight:700;font-display:swap} @font-face{font-family:Alexandria;src:url('./fonts/Alexandria-400.woff2') format('woff2');font-weight:400;font-display:swap}@font-face{font-family:Alexandria;src:url('./fonts/Alexandria-700.woff2') format('woff2');font-weight:700;font-display:swap} @font-face{font-family:Mada;src:url('./fonts/Mada-400.woff2') format('woff2');font-weight:400;font-display:swap}@font-face{font-family:Mada;src:url('./fonts/Mada-700.woff2') format('woff2');font-weight:700;font-display:swap} @font-face{font-family:ElMessiri;src:url('./fonts/ElMessiri-400.woff2') format('woff2');font-weight:400;font-display:swap}@font-face{font-family:ElMessiri;src:url('./fonts/ElMessiri-700.woff2') format('woff2');font-weight:700;font-display:swap} @font-face{font-family:Kufi;src:url('./fonts/Kufi-700.woff2') format('woff2');font-weight:700;font-display:swap}@font-face{font-family:Amiri;src:url('./fonts/Amiri-700.woff2') format('woff2');font-weight:700;font-display:swap}@font-face{font-family:ReemKufi;src:url('./fonts/ReemKufi-700.woff2') format('woff2');font-weight:700;font-display:swap}@font-face{font-family:Changa;src:url('./fonts/Changa-700.woff2') format('woff2');font-weight:700;font-display:swap}@font-face{font-family:NotoSansAr;src:url('./fonts/NotoSansAr-700.woff2') format('woff2');font-weight:700;font-display:swap}@font-face{font-family:Markazi;src:url('./fonts/Markazi-700.woff2') format('woff2');font-weight:700;font-display:swap}@font-face{font-family:Lemonada;src:url('./fonts/Lemonada-700.woff2') format('woff2');font-weight:700;font-display:swap}@font-face{font-family:Baloo;src:url('./fonts/Baloo-700.woff2') format('woff2');font-weight:700;font-display:swap}@font-face{font-family:Marhey;src:url('./fonts/Marhey-700.woff2') format('woff2');font-weight:700;font-display:swap}@font-face{font-family:Lalezar;src:url('./fonts/Lalezar-700.woff2') format('woff2');font-weight:700;font-display:swap}@font-face{font-family:ArefRuqaa;src:url('./fonts/ArefRuqaa-700.woff2') format('woff2');font-weight:700;font-display:swap}@font-face{font-family:Rakkas;src:url('./fonts/Rakkas-700.woff2') format('woff2');font-weight:700;font-display:swap}@font-face{font-family:Qahiri;src:url('./fonts/Qahiri-700.woff2') format('woff2');font-weight:700;font-display:swap}@font-face{font-family:Blaka;src:url('./fonts/Blaka-700.woff2') format('woff2');font-weight:700;font-display:swap} @font-face{font-family:Archivo;src:url('./fonts/Archivo-400.woff2') format('woff2');font-weight:400;font-display:swap}@font-face{font-family:Archivo;src:url('./fonts/Archivo-700.woff2') format('woff2');font-weight:700;font-display:swap}@font-face{font-family:ArchNar;src:url('./fonts/ArchNar-400.woff2') format('woff2');font-weight:400;font-display:swap}@font-face{font-family:ArchNar;src:url('./fonts/ArchNar-700.woff2') format('woff2');font-weight:700;font-display:swap}@font-face{font-family:Barlow;src:url('./fonts/Barlow-700.woff2') format('woff2');font-weight:700;font-display:swap}@font-face{font-family:Oswald;src:url('./fonts/Oswald-400.woff2') format('woff2');font-weight:400;font-display:swap}@font-face{font-family:Oswald;src:url('./fonts/Oswald-700.woff2') format('woff2');font-weight:700;font-display:swap}@font-face{font-family:Anton;src:url('./fonts/Anton-700.woff2') format('woff2');font-weight:700;font-display:swap}@font-face{font-family:Bebas;src:url('./fonts/Bebas-700.woff2') format('woff2');font-weight:700;font-display:swap}@font-face{font-family:Playfair;src:url('./fonts/Playfair-700.woff2') format('woff2');font-weight:700;font-display:swap}@font-face{font-family:Caveat;src:url('./fonts/Caveat-400.woff2') format('woff2');font-weight:400;font-display:swap}@font-face{font-family:Caveat;src:url('./fonts/Caveat-700.woff2') format('woff2');font-weight:700;font-display:swap} :root{font-family:"Segoe UI",Tahoma,Arial,sans-serif;color:#172033;background:#eef1f5;--panel:#fff;--line:#dde2ea;--muted:#6c7587;--accent:#f2c500;--accent-ink:#191600;--active-ink:#191600;--accent-soft:#fff8cc;--canvas:#0e1012;--main-toolbar-height:58px;--context-toolbar-height:56px;--editor-safe-bottom:env(safe-area-inset-bottom);--main-toolbar-safe-height:calc(var(--main-toolbar-height) + var(--editor-safe-bottom));--context-toolbar-space:0px} *{box-sizing:border-box}button,input{font:inherit}button{cursor:pointer}.topbar{height:64px;background:var(--panel);border-bottom:1px solid var(--line);display:flex;align-items:center;gap:18px;padding:0 18px;position:relative;z-index:5}.brand{display:flex;align-items:center;gap:9px;font-weight:750;min-width:230px}.brand small{font-size:10px;color:var(--accent-ink);background:var(--accent-soft);padding:3px 6px;border-radius:10px;border:1px solid color-mix(in srgb,var(--accent) 45%,transparent)}.brand-mark{width:34px;height:34px;border-radius:10px;background:#172033;color:#fff;display:grid;place-items:center;font-size:12px}.history-actions,.top-actions{display:flex;gap:7px}.top-actions{margin-inline-start:auto}.topbar button,.canvas-toolbar button{border:1px solid var(--line);background:#fff;border-radius:9px;padding:8px 12px}.primary{background:var(--accent)!important;color:var(--accent-ink)!important;border-color:var(--accent)!important}.workspace{height:calc(100vh - 64px);display:grid;grid-template-columns:76px 300px minmax(360px,1fr) 280px;direction:ltr}.toolrail,.sidepanel,.properties{direction:rtl;background:var(--panel);border-inline-end:1px solid var(--line)}.toolrail{padding:10px 7px;display:flex;flex-direction:column;gap:6px}.toolrail button{border:1px solid transparent;background:transparent;border-radius:11px;padding:10px 4px;color:var(--muted);font-size:11px}.toolrail button span{display:block;font-size:21px;margin-bottom:4px}.toolrail button.active{background:var(--accent-soft);color:var(--active-ink);border-color:color-mix(in srgb,var(--accent) 58%,transparent);box-shadow:inset -3px 0 0 var(--accent)}.sidepanel,.properties{padding:18px;overflow:auto}.properties{border-inline-start:1px solid var(--line);border-inline-end:0}.panel{display:none}.panel.active{display:block}.panel-title{border:1px solid color-mix(in srgb,var(--accent) 32%,var(--line));border-inline-start:4px solid var(--accent);border-radius:12px;padding:12px 13px;margin-bottom:14px;background:color-mix(in srgb,var(--accent-soft) 56%,var(--panel))}.panel-title h2{font-size:17px;margin:0 0 5px}.panel-title p{font-size:12px;color:var(--muted);margin:0;line-height:1.6}.add-grid{display:grid;grid-template-columns:1fr 1fr;gap:9px}.add-grid button{height:92px;border:1px solid var(--line);border-radius:13px;background:var(--panel);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:7px}.add-grid button:hover{border-color:var(--accent);background:var(--accent-soft)}.add-grid b{font-size:23px}.size-list,.layer-list{display:flex;flex-direction:column;gap:7px}.size-list button,.layer-row{display:flex;align-items:center;justify-content:space-between;text-align:start;padding:11px;border:1px solid var(--line);border-radius:10px;background:var(--panel)}.size-list small{color:var(--muted)}label{display:flex;flex-direction:column;gap:6px;font-size:12px;color:var(--muted)}input{border:1px solid var(--line);border-radius:9px;padding:10px;color:#172033;background:#fff}.wide{width:100%;margin-top:10px;padding:10px;border:1px solid var(--line);border-radius:9px;background:#fff}.canvas-area{direction:rtl;min-width:0;background:#e9edf3;display:flex;flex-direction:column}.canvas-toolbar{height:44px;display:flex;align-items:center;justify-content:space-between;padding:0 16px;color:var(--muted);font-size:12px;border-bottom:1px solid #d9dee7}.canvas-viewport{flex:1;display:grid;place-items:center;overflow:auto;padding:32px}.canvas{position:relative;width:min(54vw,620px);aspect-ratio:1080/1350;background:var(--canvas);box-shadow:0 14px 45px #33405b33;overflow:hidden;transform-origin:center}.studio-element{position:absolute;transform:translate(-50%,-50%);display:grid;place-items:center;user-select:none}.studio-element.selected{outline:3px solid var(--accent);outline-offset:3px}.studio-element.text{white-space:pre-wrap;font-weight:700;line-height:1.3}.studio-element.shape.circle{border-radius:50%}.property-form.empty:after{content:"لا توجد خصائص لعرضها";display:block;color:var(--muted);font-size:12px;padding:25px 0;text-align:center}.property-form{display:flex;flex-direction:column;gap:12px}.property-form .row{display:grid;grid-template-columns:1fr 1fr;gap:8px}.property-form button{border:1px solid #f1c6c6;color:#b52222;background:#fff5f5;border-radius:9px;padding:9px}.mobile-tabs,.mobile-workflow-nav{display:none}.mobile-property-header,.mobile-context-toolbar{display:none}[data-theme="dark"]{--panel:#171a20;--line:#2b303a;--muted:#a7afbd;color:#e9edf5;background:#111319}[data-theme="dark"] .canvas-area{background:#0d0f13}[data-theme="dark"] button,[data-theme="dark"] input{background:#1c2028;color:#e9edf5} @media(max-width:1050px){.workspace{grid-template-columns:70px 280px 1fr}.properties{display:none}.canvas{width:min(58vw,560px)}} @media(max-width:768px){.topbar{height:56px;padding:0 11px}.brand{min-width:0}.brand>span:nth-child(2),.brand small,.history-actions{display:none}.top-actions .primary{display:none}.workspace{height:calc(100dvh - 112px);display:block;position:relative}.toolrail,.properties{display:none}.sidepanel{position:absolute;z-index:4;left:0;right:0;bottom:0;max-height:44%;border:0;border-top:1px solid var(--line);border-radius:18px 18px 0 0;padding:15px;box-shadow:0 -10px 30px #17203324}.canvas-area{height:100%}.canvas-toolbar{height:40px}.canvas-viewport{padding:18px 12px 46%;align-items:start}.canvas{width:min(92vw,480px);max-height:calc(54dvh);margin-top:8px}.mobile-tabs{height:56px;position:fixed;z-index:8;bottom:0;left:0;right:0;background:var(--panel);border-top:1px solid var(--line);display:flex;direction:rtl}.mobile-tabs button{flex:1;border:0;background:transparent;color:var(--muted);font-size:18px}.mobile-tabs span{display:block;font-size:10px;margin-top:2px}.mobile-tabs button.active{color:var(--accent)}} .studio-element{touch-action:none;cursor:move}.studio-element.dragging{cursor:grabbing} .studio-element.multi-selected{outline:2px dashed #19a974;outline-offset:3px}.studio-element.selected{outline:3px solid #5e7cf0}.layer-row.selected{border-color:var(--accent);background:#f2f5ff}.multi-actions{display:grid;grid-template-columns:1fr 1fr;gap:8px}.multi-actions button{color:inherit!important;background:var(--panel)!important;border-color:var(--line)!important}.multi-actions button:disabled{opacity:.45;cursor:not-allowed} .canvas{touch-action:none}.selection-box{display:none;position:absolute;z-index:25;border:2px solid #3157d5;background:#3157d51f;pointer-events:none}.selection-box.visible{display:block} .property-form select,.property-form textarea{width:100%;border:1px solid var(--line);border-radius:9px;padding:9px;background:var(--panel);color:inherit}.property-form textarea{min-height:90px;resize:vertical}.property-form input[type="range"]{padding:0;accent-color:var(--accent)}.property-form strong{font-size:13px;margin-top:5px} .font-size-heading{display:flex;align-items:center;justify-content:space-between;gap:8px}.font-size-heading output{min-width:34px;padding:3px 7px;border-radius:12px;background:var(--accent-soft);color:var(--active-ink);font-weight:800;text-align:center}.font-size-control{display:grid;grid-template-columns:40px minmax(0,1fr) 40px;align-items:center;gap:7px;direction:ltr}.font-size-control button{width:40px;height:40px;padding:0!important;border:1px solid var(--line)!important;border-radius:10px!important;background:var(--panel-raised)!important;color:inherit!important;font-size:21px;line-height:1}.font-size-control input[type="range"]{width:100%;height:40px;border:0;background:transparent}.font-size-control input[type="range"]::-webkit-slider-thumb{width:24px;height:24px}.font-size-control input[type="range"]::-moz-range-thumb{width:24px;height:24px} .text-format-bar{display:grid;grid-template-columns:repeat(4,1fr) 46px;gap:6px;direction:ltr}.text-format-bar button{color:inherit;background:var(--panel);border-color:var(--line);font-family:Arial,sans-serif;font-size:15px}.text-format-bar .format-bold{font-weight:800}.text-format-bar .format-italic{font-style:italic}.text-format-bar .format-underline{text-decoration:underline}.text-format-bar .format-strike{text-decoration:line-through}.text-format-bar input[type="color"]{width:46px;height:38px;padding:3px} .template-save{display:grid;grid-template-columns:1fr;gap:7px;margin-bottom:13px}.template-save button{border:1px solid var(--accent);background:var(--accent);color:#fff;border-radius:9px;padding:9px}.template-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.template-card{position:relative;border:1px solid var(--line);border-radius:12px;background:var(--panel);overflow:hidden}.template-card:hover{border-color:var(--accent)}.template-apply{width:100%;display:flex;flex-direction:column;gap:7px;align-items:center;text-align:center;border:0;padding:7px;background:transparent;color:inherit}.template-card small{display:block;color:var(--muted);margin-top:3px;font-size:9px;direction:ltr}.template-card b{font-size:11px}.template-delete{position:absolute;top:4px;left:4px;z-index:2;width:26px;height:26px;border:0;border-radius:8px;background:#fff1f1;color:#b52222}.template-preview{position:relative;width:100%;height:auto;max-height:185px;border-radius:7px;display:block;overflow:hidden;box-shadow:0 3px 10px #17203325}.template-preview i{display:block;border-radius:1px}.template-preview .template-preview-text{display:flex;align-items:center;overflow:hidden;background:transparent!important;font-weight:700;line-height:1.12;white-space:normal;text-wrap:balance}.template-empty{grid-column:1/-1} .template-language-badge{display:inline-flex;align-items:center;justify-content:center;margin-top:5px;padding:3px 7px;border:1px solid var(--line);border-radius:999px;background:var(--panel-soft);color:var(--text);font-size:9px;font-style:normal;font-weight:800;line-height:1;direction:ltr}.template-language-badge.bilingual{border-color:var(--accent);background:var(--accent-soft);color:var(--active-ink)}.template-language-badge.en{border-color:#98a2b3} @media(max-width:768px){.properties.active{display:block;position:absolute;z-index:5;left:0;right:0;bottom:0;max-height:44%;border:0;border-top:1px solid var(--line);border-radius:18px 18px 0 0;padding:15px;box-shadow:0 -10px 30px #17203324;overflow:auto}.properties-open .sidepanel{display:none}} .text-label-presets{display:grid;grid-template-columns:repeat(2,1fr);gap:7px}.text-label-presets button{color:inherit!important;background:var(--panel)!important;border-color:var(--line)!important}.text-label-presets button:hover{border-color:var(--accent)!important} .template-filters{display:grid;grid-template-columns:1fr 1fr;gap:7px;margin-bottom:7px}.template-filters input{grid-column:1/-1}.template-filters select{min-width:0;border:1px solid var(--line);border-radius:9px;padding:9px;background:var(--panel);color:inherit}.template-count{font-size:11px;color:var(--muted);margin:0 2px 9px} .template-category-tabs{display:flex;gap:6px;overflow-x:auto;padding:1px 1px 9px;margin-bottom:8px;scrollbar-width:thin}.template-category-tabs button{flex:none;border:1px solid var(--line);border-radius:20px;padding:7px 10px;background:var(--panel);color:var(--muted);font-size:10px;white-space:nowrap}.template-category-tabs button.active{border-color:var(--accent);background:var(--accent);color:#fff}.template-category-tabs+ .template-save{margin-top:2px} .template-empty{padding:24px 10px;text-align:center;color:var(--muted);font-size:12px;border:1px dashed var(--line);border-radius:11px} .draw-tools{margin-top:16px;padding-top:14px;border-top:1px solid var(--line)}.draw-tools>strong{display:block;font-size:13px;margin-bottom:9px}.draw-actions{display:grid;grid-template-columns:1fr 1fr;gap:7px}.draw-actions button{border:1px solid var(--line);border-radius:9px;padding:9px;background:var(--panel);color:inherit}.draw-actions button.active{border-color:var(--accent);color:var(--accent);box-shadow:0 0 0 2px #3157d51c}.draw-settings{display:grid;grid-template-columns:80px 1fr;gap:9px;margin-top:10px}.draw-settings input[type="color"]{height:38px;padding:3px}.draw-settings input[type="range"]{padding:0;accent-color:var(--accent)}.canvas.drawing{cursor:crosshair}.drawing-preview{position:absolute;inset:0;width:100%;height:100%;z-index:30;pointer-events:none}.draw-cancel{color:#b52222!important} .brand-heading{display:flex;align-items:center;justify-content:space-between;margin:18px 0 9px}.brand-heading b{font-size:13px}.brand-heading button{border:1px solid var(--line);border-radius:8px;padding:7px 9px;background:var(--panel);color:inherit}.brand-logos{display:flex;flex-direction:column;gap:7px}.brand-logo{display:grid;grid-template-columns:1fr auto auto;align-items:center;gap:5px;border:1px solid var(--line);border-radius:10px;padding:6px}.brand-logo.active{border-color:var(--accent);box-shadow:0 0 0 2px #3157d518}.brand-logo button{border:0;border-radius:7px;padding:7px;background:#eef1f6;color:inherit}.brand-logo-choose{display:flex!important;align-items:center;gap:8px;text-align:start;background:transparent!important}.brand-logo img{width:42px;height:42px;object-fit:contain;background:#f4f5f7;border-radius:6px}.brand-logo small{max-width:100px;overflow:hidden;text-overflow:ellipsis}.brand-colors{display:grid;grid-template-columns:repeat(3,1fr);gap:7px}.brand-color{position:relative;display:grid;grid-template-columns:1fr 25px;border:1px solid var(--line);border-radius:9px;overflow:hidden}.brand-color>button:first-child{grid-row:1/3;min-height:48px;border:0}.brand-color input{width:25px;height:24px;padding:0;border:0;border-radius:0}.brand-color>button:last-child{width:25px;border:0;background:var(--panel);color:var(--muted)}.brand-help{display:block;color:var(--muted);line-height:1.6;margin-top:10px}.brand-empty{padding:20px 10px;text-align:center;color:var(--muted);border:1px dashed var(--line);border-radius:10px;font-size:12px} .property-form button{border:1px solid var(--line);color:inherit;background:var(--panel)}.property-form button.danger{border-color:#f1c6c6;color:#b52222;background:#fff5f5} .slide-list{display:flex;flex-direction:column;gap:9px}.slide-card{display:grid;grid-template-columns:20px 54px minmax(0,1fr);gap:8px;align-items:center;border:1px solid var(--line);border-radius:11px;background:var(--panel);padding:8px;text-align:start;transition:border-color .15s,opacity .15s,transform .15s}.slide-card.active{border-color:var(--accent);box-shadow:0 0 0 2px #3157d51c}.slide-card.dragging{opacity:.42}.slide-card.drag-over{border-color:var(--accent);transform:translateY(3px);box-shadow:0 -3px 0 var(--accent)}.slide-card .slide-open{display:grid;grid-template-columns:54px minmax(0,1fr);align-items:center;gap:9px;grid-column:2/-1;width:100%;text-align:start}.slide-preview{width:54px;height:58px;border-radius:6px;box-shadow:inset 0 0 0 1px #ffffff26;display:grid;place-items:center;color:#fff;font-size:10px;overflow:hidden}.slide-card small{display:block;color:var(--muted);margin-top:4px}.slide-actions{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:12px}.slide-actions button{border:1px solid var(--line);border-radius:9px;padding:9px;background:var(--panel);color:inherit}.slide-actions .danger{grid-column:1/-1;color:#b52222;border-color:#f1c6c6;background:#fff5f5}.studio-element.image img{display:block;pointer-events:none}.add-grid button[data-action="add-image"]{grid-column:1/-1;height:68px} @media(max-width:768px){.mobile-tabs button{min-width:0;padding:4px 2px}.mobile-tabs{overflow-x:auto}.mobile-tabs button{flex:0 0 64px}.slide-list{max-height:25dvh;overflow:auto}} .slide-settings{display:grid;grid-template-columns:1fr 82px;gap:8px;margin-top:12px}.slide-settings input[type="color"]{width:100%;height:40px;padding:4px}.property-form textarea,.property-form select{width:100%;border:1px solid var(--line);border-radius:9px;padding:9px;color:inherit;background:var(--panel)}.property-form textarea{min-height:88px;resize:vertical}.property-form input[type="color"]{height:42px;padding:4px;width:100%} .carousel-intro{display:grid;grid-template-columns:92px 1fr;align-items:center;gap:12px;padding:13px;margin-bottom:14px;border-radius:13px;background:linear-gradient(135deg,#172333,#315270);color:#fff}.carousel-intro small{display:block;color:#d5e0eb;font-size:11px;line-height:1.5;margin-top:4px}.carousel-intro-art{position:relative;width:82px;height:62px}.carousel-intro-art i{position:absolute;top:5px;width:42px;height:52px;border:1px solid #ffffff80;border-radius:5px;background:#29445c;box-shadow:0 5px 10px #08111c55}.carousel-intro-art i:nth-child(1){left:3px;transform:rotate(-8deg)}.carousel-intro-art i:nth-child(2){left:20px;z-index:2;background:#5980a6}.carousel-intro-art i:nth-child(3){left:37px;transform:rotate(8deg)} .selection-handle{position:absolute;width:15px;height:15px;border:2px solid #fff;background:#3157d5;border-radius:50%;z-index:12;touch-action:none}.selection-handle.nw{left:0;top:0;transform:translate(-50%,-50%);cursor:nwse-resize}.selection-handle.ne{right:0;top:0;transform:translate(50%,-50%);cursor:nesw-resize}.selection-handle.se{right:0;bottom:0;transform:translate(50%,50%);cursor:nwse-resize}.selection-handle.sw{left:0;bottom:0;transform:translate(-50%,50%);cursor:nesw-resize}.selection-handle.rotate{left:50%;top:-34px;transform:translate(-50%,-50%);cursor:grab;background:#fff;border-color:#3157d5}.selection-handle.rotate::after{content:"";position:absolute;width:2px;height:18px;background:#3157d5;left:50%;top:12px}.snap-guide{display:none;position:absolute;z-index:20;pointer-events:none;background:#ff2e87;box-shadow:0 0 0 1px #ffffff80}.snap-guide.visible{display:block}.snap-guide.vertical{top:0;bottom:0;width:1px}.snap-guide.horizontal{left:0;right:0;height:1px}.studio-element.locked{cursor:not-allowed}.studio-element.selected.locked{outline-style:dashed} @media(max-width:768px){.selection-handle{width:20px;height:20px}.selection-handle.rotate{top:-42px}} .slide-card{grid-template-columns:24px 1fr!important;padding:6px!important}.slide-open{display:grid;grid-template-columns:54px 1fr;gap:10px;align-items:center;border:0;background:transparent;color:inherit;text-align:start;padding:2px}.slide-export-check{width:18px;height:18px;padding:0;accent-color:var(--accent)}.export-box input[type="range"]{padding:0;accent-color:var(--accent)} .zoom-controls{display:flex;align-items:center;gap:4px;direction:ltr}.zoom-controls button{padding:4px 8px;min-width:32px}.zoom-controls #zoom-value{min-width:58px;font-size:11px}.canvas{transition:transform .08s ease-out;will-change:transform}.canvas.gesture-active{transition:none} .carousel-tools{display:grid;gap:7px;margin-top:16px;padding-top:14px;border-top:1px solid var(--line)}.carousel-tools b{font-size:13px}.carousel-tools button,.carousel-element-actions button{border:1px solid var(--line);border-radius:9px;padding:9px;background:var(--panel);color:inherit}.carousel-element-actions{display:grid;grid-template-columns:1fr 1fr;gap:7px}.carousel-element-actions button:last-child:nth-child(3){grid-column:1/-1} .export-box{margin-top:18px;padding-top:15px;border-top:1px solid var(--line)}.export-box select{border:1px solid var(--line);border-radius:9px;padding:9px;background:var(--panel);color:inherit} .install-action{color:var(--accent)!important;border-color:#b9c7f5!important;background:#f2f5ff!important}@media(display-mode:standalone){.install-action{display:none!important}} @media(max-width:768px){.topbar{padding-top:env(safe-area-inset-top);height:calc(56px + env(safe-area-inset-top))}.workspace{height:calc(100dvh - 112px - env(safe-area-inset-top) - env(safe-area-inset-bottom))}.mobile-tabs{height:calc(56px + env(safe-area-inset-bottom));padding-bottom:env(safe-area-inset-bottom)}.sidepanel,.properties.active{bottom:env(safe-area-inset-bottom)}.top-actions .install-action{display:none}} @media(max-width:768px){.sidepanel,.properties.active{bottom:max(env(safe-area-inset-bottom),var(--keyboard-inset,0px));max-height:min(44%,calc(100dvh - var(--keyboard-inset,0px) - 120px))}.canvas-toolbar{padding-inline:8px}.zoom-controls button{padding:3px 6px}.zoom-controls #zoom-value{min-width:48px}} .project-library{margin-top:18px;padding-top:15px;border-top:1px solid var(--line)}.library-heading{display:flex;align-items:center;justify-content:space-between;margin-bottom:9px}.library-heading button{width:32px;height:32px;border:1px solid var(--line);border-radius:8px;background:var(--panel);color:inherit}.project-list{display:flex;flex-direction:column;gap:7px}.project-card{display:grid;grid-template-columns:46px minmax(0,1fr) auto;gap:8px;align-items:center;padding:8px;border:1px solid var(--line);border-radius:10px;background:var(--panel)}.project-thumb{width:46px;height:52px;display:grid;place-items:center;border-radius:7px;background:linear-gradient(145deg,#101827,#35435a);color:#fff;background-size:cover;background-position:center;box-shadow:inset 0 0 0 2px var(--accent)}.project-thumb.has-thumbnail{font-size:0}.project-card-info{min-width:0;text-align:start;border:0;background:transparent;color:inherit;padding:0}.project-card-info b,.project-card-info small{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.project-card-info small{color:var(--muted);margin-top:3px}.project-card-actions{display:flex;gap:3px}.project-card-actions button{width:27px;height:27px;display:grid;place-items:center;padding:0;border:1px solid var(--line);border-radius:7px;background:var(--panel-soft);color:inherit;font-size:11px}.project-card-actions .project-card-delete{border:0;background:#fff1f1;color:#b52222}.project-empty{color:var(--muted);font-size:12px;text-align:center;padding:14px} .project-transfer-actions{display:grid;grid-template-columns:1fr 1fr;gap:7px;margin-top:8px}.project-transfer-actions button{min-height:42px}.project-library-tools{display:grid;grid-template-columns:minmax(0,1fr) 112px;gap:6px;margin:10px 0}.project-library-tools input,.project-library-tools select{min-width:0;height:38px;font-size:12px} .device-storage-note{display:block;margin:-2px 0 10px;padding:8px 9px;border-radius:8px;background:var(--panel-soft);color:var(--muted);font-size:10px;line-height:1.6} .welcome-project-card i{background-size:cover;background-position:center}.welcome-project-card i.has-thumbnail{background-color:#172033} .storage-health{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:12px;padding:10px;border:1px solid var(--line);border-radius:10px}.storage-health b,.storage-health small{display:block}.storage-health small{color:var(--muted);margin-top:3px}.storage-health button{border:1px solid var(--line);border-radius:8px;padding:7px;background:var(--panel);color:inherit;white-space:nowrap} .save-state{font-size:10px;color:#43875f;white-space:nowrap}.save-state.dirty{color:#a56a00}.save-state.error{color:#b52222}.offline .save-state::before{content:'● ';color:#d58b19}:focus-visible{outline:3px solid #5e7cf0!important;outline-offset:2px}@media(prefers-reduced-motion:reduce){*,*::before,*::after{scroll-behavior:auto!important;transition:none!important;animation:none!important}} .studio-element.stamp b,.studio-element.stamp small{display:block}.studio-element.stamp small{font-size:.26em;font-weight:500;margin-top:.55em}.studio-element.shape svg,.studio-element.path svg{overflow:visible;pointer-events:none} .image-frame-box,.image-frame-overlay{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}.image-frame-box{overflow:hidden}.image-frame-overlay{overflow:visible} .custom-size{margin-top:16px;padding-top:14px;border-top:1px solid var(--line)}.custom-size>b{display:block;font-size:13px;margin-bottom:9px}.custom-size>div{display:grid;grid-template-columns:1fr 1fr;gap:8px}.inline-check{display:flex;flex-direction:row;align-items:center;margin-top:10px}.inline-check input{width:18px;height:18px;padding:0;accent-color:var(--accent)} .gradient-controls{margin-top:14px;padding:12px;border:1px solid var(--line);border-radius:11px}.gradient-controls>b{font-size:13px}.gradient-controls>div{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:9px}.gradient-controls select{border:1px solid var(--line);border-radius:9px;padding:9px;background:var(--panel);color:inherit}.gradient-controls input[type="color"]{height:38px;padding:3px}.gradient-controls input[type="range"]{padding:0;accent-color:var(--accent)} .truth-hero{display:flex;gap:12px;align-items:center;padding:16px;border-radius:15px;background:linear-gradient(135deg,#101827,#1d3553);color:#fff}.truth-hero>span{width:48px;height:48px;border-radius:50%;display:grid;place-items:center;background:#f2c94c;color:#101827;font-size:27px;font-weight:900}.truth-hero h2,.truth-hero p{margin:0}.truth-hero p{font-size:11px;color:#d0d5dd;margin-top:4px}.truth-statuses{display:flex;gap:6px;flex-wrap:wrap;margin:12px 0}.truth-statuses button{border:0;padding:6px 9px;border-radius:20px;font-size:10px;color:#fff}.truth-statuses .false{background:#d92532}.truth-statuses .warn{background:#d97706}.truth-statuses .old{background:#667085}.truth-statuses .question{background:#3157d5}.truth-statuses .true{background:#159467}.truth-help{font-size:11px;line-height:1.7;color:var(--muted)}.truth-template-list{display:grid;gap:9px}.truth-template-card{display:grid;grid-template-columns:72px 1fr;gap:11px;align-items:center;text-align:start;padding:9px;border:1px solid var(--line);border-radius:12px;background:var(--panel);color:inherit}.truth-template-card:hover{border-color:#f2c94c}.truth-template-card small{display:block;color:var(--muted);margin-top:4px}.truth-card-preview{height:78px;max-width:70px;border-radius:7px;display:grid;place-items:end center;overflow:hidden;box-shadow:0 4px 12px #10182728}.truth-card-preview b{width:100%;padding:4px;background:#d92532;color:#fff;text-align:center;font-size:9px} .interaction-hero{display:flex;gap:12px;align-items:center;padding:16px;border-radius:15px;background:linear-gradient(135deg,#4b32a8,#7c5cff);color:#fff}.interaction-hero>span{width:48px;height:48px;border-radius:15px;display:grid;place-items:center;background:#fff;color:#6045cf;font-size:28px;font-weight:900}.interaction-hero h2,.interaction-hero p{margin:0}.interaction-hero p{font-size:11px;color:#e8e3ff;margin-top:4px}.interaction-kinds{display:flex;gap:6px;flex-wrap:wrap;margin:12px 0}.interaction-kinds span{padding:6px 9px;border-radius:20px;background:#eeeaff;color:#5239b7;font-size:10px}.interaction-template-card:hover{border-color:#7c5cff}.interaction-template-card .truth-card-preview b{background:#6c4cff} .collage-hero{display:flex;gap:12px;align-items:center;padding:16px;border-radius:15px;background:linear-gradient(135deg,#ff7043,#ff9b7a);color:#fff}.collage-hero>span{width:48px;height:48px;border-radius:50%;display:grid;place-items:center;background:#fff;color:#ff7043;font-size:27px}.collage-hero h2,.collage-hero p{margin:0}.collage-hero p{font-size:11px;color:#fff4ef;margin-top:4px}.collage-selection{margin:10px 0;padding:10px;border:1px dashed var(--line);border-radius:10px;color:var(--muted);font-size:11px}.collage-title{display:block;margin:14px 0 8px;font-size:13px}.collage-layouts{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;max-height:245px;overflow:auto;padding:2px}.collage-layouts button{height:45px;border:1px solid var(--line);border-radius:8px;background:var(--panel);color:inherit;font-size:22px}.collage-layouts button.active{border-color:#ff7043;color:#ff7043;box-shadow:0 0 0 2px #ff704322}.collage-settings{display:grid;gap:10px;margin-top:14px}.collage-settings input[type="range"]{padding:0;accent-color:#ff7043}.collage-settings input[type="color"]{height:38px;padding:3px} .canvas-photo-tool{margin-top:18px;padding:14px;border:1px solid var(--line);border-radius:14px;background:linear-gradient(145deg,#fff8f4,var(--panel))}.canvas-photo-tool h3{margin:0 0 5px;font-size:14px}.canvas-photo-tool p{margin:0;color:var(--muted);font-size:11px;line-height:1.6}.canvas-photo-tool input[type="range"]{padding:0;accent-color:#ff7043}.canvas-photo-tool input[type="color"]{height:38px;padding:3px}.canvas-ratios{display:grid;grid-template-columns:repeat(5,1fr);gap:5px;margin:10px 0}.canvas-ratios button{border:1px solid var(--line);border-radius:8px;padding:7px 2px;background:var(--panel);color:inherit;font-size:10px}.canvas-ratios button.active{border-color:#ff7043;color:#ff7043;background:#fff4ef}.canvas-background-modes{display:grid;gap:7px;margin:10px 0}.canvas-background-modes label{display:flex;flex-direction:row;align-items:center}.canvas-background-modes input{width:17px;height:17px;padding:0;accent-color:#ff7043}.canvas-photo-tool .row{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}[data-theme="dark"] .canvas-photo-tool{background:linear-gradient(145deg,#2a211e,var(--panel))} .workspace{direction:rtl}.file-launch-warning{display:none;position:fixed;z-index:1000;inset:0;background:#101827ee;color:#fff;align-items:center;justify-content:center;padding:24px;text-align:center}.file-launch-warning.visible{display:flex}.file-launch-warning>div{max-width:620px;padding:28px;border-radius:18px;background:#fff;color:#172033;box-shadow:0 20px 70px #0008}.file-launch-warning h2{margin-top:0}.file-launch-warning code{display:block;direction:ltr;margin:16px 0;padding:12px;border-radius:9px;background:#eef1f5;font-weight:700}.file-launch-warning p{line-height:1.8;color:#5d6677} .size-groups{display:flex;flex-direction:column;gap:18px}.size-group h3{margin:0 0 8px;padding-bottom:7px;border-bottom:1px solid var(--line);font-size:12px;font-weight:600;color:var(--muted)}.size-groups .size-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}.size-groups .size-list button{min-height:104px;padding:9px 5px;border:1px solid var(--line);border-radius:12px;background:var(--panel);color:inherit;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;text-align:center}.size-groups .size-list button:hover{border-color:var(--accent);background:#f7f9ff}.size-groups .size-list button.active{border-color:var(--accent);background:#fff8cc;box-shadow:0 0 0 1px var(--accent)}.size-groups .size-list b{font-size:12px;line-height:1.25}.size-groups .size-list small{color:var(--muted);font-size:10px;font-weight:700;direction:ltr}.size-shape{display:block;height:27px;max-width:54px;aspect-ratio:var(--size-ratio);border:1.5px solid currentColor;border-radius:2px;background:transparent;flex:none}[data-theme="dark"] .size-groups .size-list button:hover{background:#222834}[data-theme="dark"] .size-groups .size-list button.active{background:#493f12;color:#fff3a3} .structure-panel{direction:rtl;background:var(--panel);border-inline-start:1px solid var(--line);min-width:0;overflow:hidden;display:flex;flex-direction:column}.structure-tabs{display:grid;grid-template-columns:1fr;padding:8px;gap:6px;border-bottom:1px solid var(--line)}.carousel-structure .structure-tabs{grid-template-columns:1fr 1fr}.structure-tabs button{border:1px solid var(--line);border-radius:9px;padding:9px 5px;background:var(--panel);color:var(--muted);font-size:11px}.structure-tabs button.active{background:var(--accent);border-color:var(--accent);color:#fff}.structure-pane{display:none;flex:1;overflow:auto;padding:13px}.structure-pane.active{display:block}.embedded-panel>.panel-title{margin-bottom:10px}.sidepanel>.properties{padding:0;border:0;overflow:visible;background:transparent}.sidepanel>.properties.active{display:block}.structure-panel .slide-list{max-height:none}.structure-panel .layer-list{max-height:none}.structure-panel .carousel-intro{margin-bottom:10px} @media(max-width:768px){.structure-panel{display:none;position:absolute;z-index:7;inset:0 0 0 0;border:0;padding-bottom:56px;overflow:auto}.structure-open .structure-panel{display:block}.structure-panel .structure-tabs{position:static}.structure-panel .structure-pane{overflow:visible;min-height:calc(100% - 58px);padding:15px}.sidepanel>.properties{padding:0}.images-tools-host .collage-hero{margin-top:16px}} .workspace-switcher{display:flex;gap:4px;padding:4px;border:1px solid var(--line);border-radius:12px;background:#f2f4f8}.workspace-switcher button{border:0!important;background:transparent!important;color:var(--muted);padding:7px 16px!important}.workspace-switcher button.active{background:var(--accent)!important;color:#fff!important}.carousel-builder{direction:rtl;width:min(1050px,calc(100% - 34px));margin:auto;padding:24px}.carousel-builder-hero{display:grid;grid-template-columns:230px 1fr;align-items:center;gap:30px;padding:28px;border-radius:22px;background:linear-gradient(135deg,#142234,#315270);color:#fff}.carousel-builder-hero h1{margin:5px 0 8px;font-size:28px}.carousel-builder-hero p{margin:0;color:#d8e2ec;line-height:1.8}.carousel-builder-hero small{color:#9fc2dd}.carousel-builder-art{height:125px;display:flex;align-items:center;justify-content:center;direction:ltr}.carousel-builder-art i{width:76px;height:96px;margin-left:-46px;border:2px solid #ffffff88;border-radius:9px;background:#5980a6;box-shadow:0 10px 25px #07111f77}.carousel-builder-art i:nth-child(2){background:#87a4bf;transform:rotate(-5deg)}.carousel-builder-art i:nth-child(3){background:#e9eef4;z-index:2}.carousel-builder-art i:nth-child(4){background:#31475d;transform:rotate(5deg)}.carousel-builder-art i:nth-child(5){background:#1e2b3a;transform:rotate(9deg)}.carousel-builder-grid{display:grid;grid-template-columns:minmax(0,1fr) 260px;gap:18px;margin-top:18px}.carousel-builder-grid>div,.carousel-config{background:var(--panel);border:1px solid var(--line);border-radius:18px;padding:18px}.carousel-builder-heading{display:flex;align-items:center;justify-content:space-between;gap:12px}.carousel-builder-heading h2,.carousel-config h2{margin:0 0 14px;font-size:17px}.carousel-kit-filters{display:flex;gap:5px;overflow:auto}.carousel-kit-filters button,.carousel-segment button{border:1px solid var(--line);border-radius:20px;background:var(--panel);color:var(--muted);padding:6px 9px;font-size:10px;white-space:nowrap}.carousel-kit-filters button.active,.carousel-segment button.active{background:var(--accent);border-color:var(--accent);color:#fff}.carousel-kit-list{display:grid;grid-template-columns:1fr 1fr;gap:11px}.carousel-kit-card{display:grid;gap:10px;text-align:start;padding:11px;border:1px solid var(--line);border-radius:13px;background:var(--panel);color:inherit}.carousel-kit-card.active{border-color:var(--accent);box-shadow:0 0 0 2px #3157d522}.carousel-kit-pages{display:flex;direction:ltr;height:92px;align-items:end;justify-content:center;overflow:hidden}.carousel-page-mini{position:relative;width:58px;flex:none;margin-left:-26px;border:1px solid #fff7;border-radius:4px;overflow:hidden;box-shadow:0 5px 12px #17203333}.carousel-page-mini:first-child{margin-left:0}.carousel-page-mini b{position:absolute;display:block}.carousel-kit-card small{display:block;color:var(--muted);line-height:1.5;margin-top:4px}.carousel-config{display:flex;flex-direction:column;gap:14px}.carousel-config label{gap:9px}.carousel-config input[type=range]{padding:0;accent-color:var(--accent)}.carousel-config input[type=color]{width:100%;height:44px;padding:3px}.carousel-segment{display:grid;grid-template-columns:1fr 1fr;gap:5px}.carousel-import{padding:12px;border:1px dashed var(--line);border-radius:11px}.carousel-import small{color:var(--muted)}.carousel-config>.primary{border:0;border-radius:11px;padding:13px}.carousel-workspace .carousel-intro{display:none} @media(max-width:900px){.workspace-switcher{margin-inline:auto}.carousel-builder{padding:12px}.carousel-builder-hero{grid-template-columns:1fr}.carousel-builder-art{display:none}.carousel-builder-grid{grid-template-columns:1fr}.carousel-kit-list{grid-template-columns:1fr}}@media(max-width:768px){.workspace-switcher button{padding:6px 9px!important;font-size:11px}.carousel-builder{width:100%;padding:10px}.carousel-builder-hero{padding:18px}.carousel-builder-hero h1{font-size:21px}.carousel-builder-grid{margin-top:10px}.carousel-kit-list{grid-template-columns:1fr}.canvas-toolbar.builder-mode>*{visibility:hidden}} .mobile-sheet-handle{display:none} .mobile-carousel-strip{display:none} .welcome-screen{position:fixed;z-index:100;inset:0;overflow:auto;background:linear-gradient(145deg,#f4f6f9 0,#fff 55%,var(--accent-soft) 140%);color:#172033}.welcome-screen[hidden]{display:none}.welcome-head{height:76px;display:flex;align-items:center;justify-content:space-between;padding:0 clamp(18px,5vw,72px);border-bottom:1px solid #e3e6eb;background:#ffffffdd;backdrop-filter:blur(15px);position:sticky;top:0;z-index:2}.welcome-brand{display:flex;align-items:center;gap:11px}.welcome-brand b,.welcome-brand small{display:block}.welcome-brand small{font-size:11px;color:#70798a;margin-top:2px}.welcome-head>div:last-child{display:flex;gap:7px}.welcome-head button{border:1px solid #dce1e8;background:#fff;border-radius:10px;padding:8px 11px;color:#2a3342}.welcome-content{width:min(1180px,calc(100% - 32px));margin:auto;padding:34px 0 60px}.welcome-hero{min-height:280px;display:grid;grid-template-columns:1.3fr .7fr;align-items:center;gap:35px;padding:42px clamp(25px,5vw,65px);border-radius:26px;background:linear-gradient(135deg,#111827,#26364d);color:#fff;box-shadow:0 22px 55px #18243b29;overflow:hidden}.welcome-hero h1{font-size:clamp(30px,4vw,52px);line-height:1.15;margin:10px 0 13px}.welcome-hero p{max-width:650px;margin:0;color:#cbd3df;line-height:1.8}.eyebrow{display:inline-flex;padding:6px 10px;border-radius:20px;background:var(--accent);color:var(--accent-ink);font-size:11px;font-weight:800}.welcome-primary-actions{display:flex;gap:9px;margin-top:24px}.welcome-primary-actions button{border:1px solid #ffffff44;border-radius:11px;padding:12px 17px;background:#ffffff12;color:#fff}.welcome-art{height:210px;position:relative;display:grid;place-items:center}.welcome-art i{position:absolute;width:130px;height:165px;border-radius:15px;background:var(--accent);border:1px solid #ffffff55;box-shadow:0 16px 35px #0004;transform:rotate(10deg) translateX(-38px)}.welcome-art i:nth-child(2){background:#fff;transform:rotate(-7deg) translateX(42px)}.welcome-art i:nth-child(3){background:#8b1e3f;transform:rotate(2deg)}.welcome-art b{z-index:1;text-align:center;font-size:22px;line-height:1.5;color:#fff}.welcome-quick{display:grid;grid-template-columns:repeat(6,1fr);gap:11px;margin-top:18px}.welcome-quick button{min-height:142px;display:flex;flex-direction:column;align-items:flex-start;justify-content:center;text-align:start;gap:5px;padding:16px;border:1px solid #e0e4ea;border-radius:16px;background:#fff;color:#172033;box-shadow:0 7px 20px #1720330c;transition:transform .18s,border-color .18s}.welcome-quick button:hover{transform:translateY(-3px);border-color:var(--accent)}.welcome-quick span{font-size:25px;color:var(--accent);text-shadow:0 1px 0 #0003}.welcome-quick small{font-size:10px;line-height:1.5;color:#788193}.welcome-recent{margin-top:28px}.welcome-section-title{display:flex;align-items:end;justify-content:space-between;margin-bottom:12px}.welcome-section-title h2,.welcome-section-title p{margin:0}.welcome-section-title p{color:#788193;font-size:11px;margin-top:4px}.welcome-section-title button{border:1px solid #dce1e8;border-radius:9px;padding:8px 11px;background:#fff}.welcome-projects{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}.welcome-project-card{display:grid;grid-template-columns:52px 1fr;gap:10px;align-items:center;padding:11px;border:1px solid #e0e4ea;border-radius:14px;background:#fff;text-align:start;color:#172033}.welcome-project-card i{width:52px;height:58px;border-radius:8px;background:linear-gradient(145deg,#101827,#35435a);box-shadow:inset 0 0 0 3px var(--accent)}.welcome-project-card b,.welcome-project-card small{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.welcome-project-card small{font-size:9px;color:#788193;margin-top:4px}.welcome-empty{grid-column:1/-1;padding:25px;border:1px dashed #d7dce4;border-radius:14px;text-align:center;color:#788193;background:#fff}.app-dialog{position:fixed;z-index:150;inset:0;display:grid;place-items:center;padding:20px;background:#101827aa;backdrop-filter:blur(7px)}.app-dialog[hidden]{display:none}.app-dialog-card{width:min(760px,100%);max-height:min(780px,92dvh);overflow:auto;border-radius:22px;background:var(--panel);color:inherit;box-shadow:0 30px 90px #0007}.app-dialog-card>header{display:flex;align-items:center;justify-content:space-between;padding:18px 20px;border-bottom:1px solid var(--line)}.app-dialog-card>header b,.app-dialog-card>header small{display:block}.app-dialog-card>header small{font-size:10px;color:var(--muted);margin-top:3px}.app-dialog-card>header button{width:36px;height:36px;border:1px solid var(--line);border-radius:10px;background:var(--panel);color:inherit}.app-dialog-card>nav{display:flex;gap:6px;padding:10px 20px;border-bottom:1px solid var(--line)}.app-dialog-card>nav button{border:1px solid var(--line);border-radius:20px;padding:7px 11px;background:var(--panel);color:var(--muted)}.app-dialog-card>nav button.active{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}.dialog-pane{display:none;padding:22px}.dialog-pane.active{display:block}.dialog-pane section{padding:15px;border:1px solid var(--line);border-radius:14px;margin-bottom:12px}.dialog-pane h3{margin:0 0 13px}.setting-row{display:grid;grid-template-columns:1fr 1fr;gap:10px}.dialog-pane select,.dialog-pane input{width:100%;border:1px solid var(--line);border-radius:9px;padding:9px;background:var(--panel);color:inherit}.accent-presets{display:grid;grid-template-columns:repeat(5,1fr);gap:7px}.accent-presets button{position:relative;border:1px solid var(--line);border-radius:10px;padding:40px 4px 8px;background:var(--panel);color:inherit;font-size:9px}.accent-presets button::before{content:'';position:absolute;top:8px;left:50%;width:24px;height:24px;border-radius:50%;background:var(--swatch);transform:translateX(-50%);box-shadow:0 0 0 3px #fff,0 0 0 4px var(--line)}.accent-presets button.active{border-color:var(--accent);box-shadow:0 0 0 2px var(--accent-soft)}.custom-accent{margin-top:12px}.custom-accent input{height:43px;padding:3px}.setting-check{flex-direction:row;align-items:center}.setting-check input{width:18px;height:18px;padding:0;accent-color:var(--accent)}.about-hero{display:flex;gap:14px;align-items:center;padding:20px;border-radius:15px;background:var(--accent-soft);border:1px solid color-mix(in srgb,var(--accent) 40%,var(--line))}.about-hero .brand-mark{width:58px;height:58px;font-size:17px}.about-hero h2,.about-hero p{margin:0}.about-hero p{color:var(--muted);line-height:1.7;margin-top:5px}.about-grid{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin-top:13px}.about-grid span{padding:15px;border:1px solid var(--line);border-radius:12px}.about-grid b,.about-grid small{display:block}.about-grid small{color:var(--muted);margin-top:5px}.support-intro h2,.support-intro p{margin:0}.support-intro p{color:var(--muted);line-height:1.7;margin-top:5px}.social-settings{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin-top:17px}.support-links{display:flex;gap:7px;flex-wrap:wrap;margin-top:13px}.support-links a{padding:8px 11px;border-radius:20px;background:var(--accent-soft);color:var(--accent-ink);border:1px solid color-mix(in srgb,var(--accent) 40%,var(--line));text-decoration:none;font-size:11px} @media(max-width:900px){.welcome-quick{grid-template-columns:repeat(3,1fr)}.welcome-projects{grid-template-columns:repeat(2,1fr)}}@media(max-width:620px){.welcome-head{height:64px;padding-inline:12px}.welcome-brand small,.welcome-head button:not(:last-child){display:none}.welcome-content{width:calc(100% - 20px);padding-top:12px}.welcome-hero{grid-template-columns:1fr;min-height:0;padding:25px 20px}.welcome-art{display:none}.welcome-primary-actions{display:grid}.welcome-quick{grid-template-columns:repeat(2,1fr)}.welcome-quick button{min-height:118px}.welcome-projects{grid-template-columns:1fr}.setting-row,.social-settings{grid-template-columns:1fr}.accent-presets{grid-template-columns:repeat(3,1fr)}.dialog-pane{padding:14px}.app-dialog-card>nav{overflow-x:auto}.app-dialog-card>nav button{white-space:nowrap}} [data-theme="dark"] .welcome-screen{background:linear-gradient(145deg,#0f1218 0,#151922 58%,color-mix(in srgb,var(--accent) 13%,#111319) 140%);color:#eef2f8} [data-theme="dark"] .welcome-head{background:#151922e8;border-color:#2b303a} [data-theme="dark"] .welcome-brand small,[data-theme="dark"] .welcome-section-title p{color:#a7afbd} [data-theme="dark"] .welcome-head button,[data-theme="dark"] .welcome-quick button,[data-theme="dark"] .welcome-section-title button,[data-theme="dark"] .welcome-project-card,[data-theme="dark"] .welcome-empty{background:#1b2029;border-color:#303744;color:#eef2f8} [data-theme="dark"] .welcome-quick small,[data-theme="dark"] .welcome-project-card small,[data-theme="dark"] .welcome-empty{color:#a7afbd} /* Text editing and startup legibility refinements. */ .welcome-screen{background:linear-gradient(145deg,#f4f6f9 0,#fff 55%,color-mix(in srgb,var(--accent) 10%,#fff) 140%);isolation:isolate} .welcome-screen::before{content:"";position:fixed;z-index:-1;inset:0;background:#f7f8fa} .text-format-bar button{background:color-mix(in srgb,var(--panel) 72%,#e8edf4);box-shadow:0 1px 2px #17203312}.text-format-bar input[type="color"]{background:color-mix(in srgb,var(--panel) 72%,#e8edf4)} .property-form input,.property-form select,.property-form textarea{background:color-mix(in srgb,var(--panel) 76%,#edf1f6)} .font-picker-current{display:grid!important;grid-template-columns:1fr auto;align-items:center;text-align:start;gap:8px;width:100%;min-height:58px;background:color-mix(in srgb,var(--panel) 75%,#e8edf4)!important;border-color:var(--line)!important}.font-picker-current b{font-size:20px}.font-picker-current small{font-family:"Segoe UI",Tahoma,sans-serif;color:var(--muted)} .font-gallery{display:grid;grid-template-columns:1fr 1fr;gap:7px;max-height:310px;overflow:auto;padding:5px;border:1px solid var(--line);border-radius:11px;background:color-mix(in srgb,var(--panel) 88%,#e8edf4)}.font-gallery[hidden]{display:none}.font-choice{min-width:0;min-height:72px;display:flex!important;flex-direction:column;justify-content:center;align-items:stretch;text-align:start!important;padding:8px!important;color:inherit!important;background:var(--panel)!important;border-color:var(--line)!important}.font-choice:hover,.font-choice.active{border-color:var(--accent)!important;box-shadow:0 0 0 2px var(--accent-soft)}.font-choice b{font-size:18px;line-height:1.5;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.font-choice small{font-family:"Segoe UI",Tahoma,sans-serif;color:var(--muted);font-size:9px} .font-gallery-wrap[hidden]{display:none}.font-language-tabs{display:grid;grid-template-columns:repeat(3,1fr);gap:5px;margin:7px 0}.font-language-tabs button{min-height:38px;padding:7px!important;border:1px solid var(--line)!important;border-radius:9px!important;background:var(--panel-raised)!important;color:inherit!important}.font-language-tabs button.active{background:var(--accent)!important;border-color:var(--accent)!important;color:var(--accent-ink)!important;font-weight:800} .font-group-title{grid-column:1/-1;margin:6px 2px 0;padding:8px 9px;border-radius:8px;background:var(--panel-soft);color:var(--muted);font:700 11px/1.4 "Alexandria",sans-serif;border-inline-start:3px solid var(--accent)}.font-group-title:first-child{margin-top:0} .inline-text-edit{outline:3px solid var(--accent)!important;outline-offset:4px;cursor:text!important;user-select:text!important;caret-color:var(--accent);z-index:40}.inline-edit-action{background:var(--accent-soft)!important;border-color:color-mix(in srgb,var(--accent) 55%,var(--line))!important} @media(max-width:768px){.font-gallery{grid-template-columns:1fr 1fr;max-height:42dvh}.font-choice b{font-size:17px}} .support-owner{display:flex;align-items:center;gap:11px;margin-top:17px;padding:13px;border:1px solid var(--line);border-radius:13px;background:color-mix(in srgb,var(--accent-soft) 50%,var(--panel))}.support-owner b,.support-owner small{display:block}.support-owner small{font-size:10px;color:var(--muted);margin-top:3px}.support-links{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin-top:13px}.support-links a{display:grid;grid-template-columns:40px 1fr;align-items:center;gap:9px;min-width:0;padding:10px;border-radius:12px;background:var(--panel);color:inherit;border:1px solid var(--line);text-decoration:none}.support-links a:hover{border-color:var(--account-color);box-shadow:0 0 0 2px color-mix(in srgb,var(--account-color) 18%,transparent)}.support-links i{width:40px;height:40px;display:grid;place-items:center;border-radius:11px;background:var(--account-color);color:#fff;font-style:normal;font-weight:800}.support-links b,.support-links small{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.support-links small{direction:ltr;text-align:right;color:var(--muted);font-size:9px;margin-top:3px}.support-contact{margin-top:15px!important}.support-copy-row{display:grid;grid-template-columns:1fr auto;gap:7px;direction:ltr}.support-copy-row a,.support-copy-row button{border:1px solid var(--line);border-radius:9px;padding:10px;background:color-mix(in srgb,var(--panel) 76%,#edf1f6);color:inherit;text-decoration:none}.support-copy-row a{overflow:hidden;text-overflow:ellipsis}.support-copy-row button{min-width:70px;background:var(--accent);border-color:var(--accent);color:var(--accent-ink);font-weight:700}.support-contact p{min-height:18px;margin:7px 2px 0;color:#138a63;font-size:10px;text-align:center}@media(max-width:620px){.support-links{grid-template-columns:1fr}} [data-theme="dark"] .accent-presets button::before{box-shadow:0 0 0 3px #171a20,0 0 0 4px var(--line)} .settings-reset p{margin:-4px 0 8px;color:var(--muted);font-size:11px;line-height:1.7}.settings-reset button{color:#9b2c2c;background:#fff8f8;border-color:#efcccc} /* Share the selected identity color with legacy editor controls as well. */ .studio-element.selected{outline-color:var(--accent)}.selection-box{border-color:var(--accent);background:var(--accent-soft)}.selection-handle{background:var(--accent)}.selection-handle.rotate{background:var(--panel);border-color:var(--accent)}.selection-handle.rotate::after{background:var(--accent)} .layer-row.selected,.size-groups .size-list button.active{border-color:var(--accent);background:var(--accent-soft)}.template-save button,.template-category-tabs button.active,.structure-tabs button.active,.workspace-switcher button.active,.carousel-kit-filters button.active,.carousel-segment button.active{background:var(--accent)!important;border-color:var(--accent)!important;color:var(--accent-ink)!important} .layer-section-title{display:flex;align-items:center;justify-content:space-between;padding:10px 3px 3px;color:var(--muted);font-size:12px}.layer-section-title b{color:inherit}.layer-section-title small{min-width:24px;text-align:center;border-radius:999px;background:var(--accent-soft);color:var(--accent-ink);padding:2px 7px}.layer-row{display:grid!important;grid-template-columns:minmax(0,1fr) auto!important;gap:6px;padding:6px!important;min-width:0}.layer-main{min-width:0;border:0;background:transparent;color:inherit;display:grid;grid-template-columns:38px minmax(0,1fr);align-items:center;gap:8px;text-align:start;padding:2px}.layer-thumb{width:38px;height:38px;border-radius:7px;overflow:hidden;display:grid;place-items:center;background:color-mix(in srgb,var(--line) 60%,var(--panel));font-weight:800}.layer-thumb img{width:100%;height:100%;object-fit:cover}.layer-details{display:flex;flex-direction:column;min-width:0;gap:3px}.layer-details b{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:12px}.layer-details small{color:var(--muted);font-size:10px}.layer-actions{display:grid;grid-template-columns:repeat(2,28px);gap:3px;align-content:center}.layer-action{width:28px;height:28px;padding:0!important;border:1px solid var(--line)!important;border-radius:7px!important;background:var(--panel)!important;color:inherit!important;font-size:13px}.layer-action:hover{border-color:var(--accent)!important;background:var(--accent-soft)!important}.layer-action:disabled{opacity:.35;cursor:not-allowed}.layer-hidden .layer-main{opacity:.5}.layer-empty{color:var(--muted);font-size:12px;text-align:center;padding:24px 6px}.crop-quick-actions{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}.crop-quick-actions button{padding:8px 4px;font-size:11px;color:inherit;background:var(--panel);border-color:var(--line)}.crop-nudge-actions{display:grid;grid-template-columns:repeat(5,1fr);gap:5px}.crop-nudge-actions button{min-width:0;padding:8px 2px!important;background:var(--panel)!important;color:inherit!important;border-color:var(--line)!important} .draw-actions button.active{border-color:var(--accent);color:var(--accent);box-shadow:0 0 0 2px var(--accent-soft)}.brand-logo.active,.slide-card.active,.carousel-kit-card.active,#mobile-carousel-list button.active{border-color:var(--accent);box-shadow:0 0 0 2px var(--accent-soft)} /* Compact, predictable tool grids: equal pairs and a centred final item. */ .add-grid{align-items:stretch} .add-grid button{min-width:0;height:76px;padding:9px 7px;gap:4px;text-align:center;color:inherit} .add-grid button[data-action="add-image"]{grid-column:auto;height:76px} .add-grid button:last-child:nth-child(odd){grid-column:1/-1;width:calc(50% - 4.5px);justify-self:center} .add-grid button:only-child{grid-column:1/-1;width:min(100%,160px);justify-self:center} .add-grid button span{line-height:1.25} .add-grid button small{font-size:8px;color:var(--muted);direction:ltr} .add-grid .upload-action{border-style:dashed;border-color:color-mix(in srgb,var(--accent) 52%,var(--line));background:color-mix(in srgb,var(--accent-soft) 38%,var(--panel))} .add-grid .upload-action b{width:27px;height:27px;display:grid;place-items:center;border-radius:50%;background:var(--accent);color:var(--accent-ink);font-size:20px;line-height:1} @media(max-width:768px){ .panel-title{padding:10px 11px;margin-bottom:10px}.panel-title h2{font-size:15px}.panel-title p{font-size:10px} .add-grid{gap:7px}.add-grid button,.add-grid button[data-action="add-image"]{height:64px;padding:6px 5px;border-radius:11px;gap:3px;font-size:12px}.add-grid b{font-size:18px}.add-grid button:last-child:nth-child(odd){width:calc(50% - 3.5px)} .add-grid .upload-action b{width:23px;height:23px;font-size:17px}.add-grid button small{font-size:7px} .draw-actions{gap:6px}.draw-actions button{min-height:38px;padding:7px 5px;font-size:11px} .truth-statuses{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}.truth-statuses button{min-width:0;padding:7px 4px;text-align:center} .interaction-kinds{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}.interaction-kinds span{text-align:center;padding:7px 4px} } .studio-element.text{overflow:hidden;overflow-wrap:anywhere;word-break:break-word} .template-filters #template-language{grid-column:1/-1} /* About, developer, and support information architecture. */ .about-welcome{margin-top:13px!important}.about-welcome p{margin:-3px 0 13px;color:var(--muted);line-height:1.8}.about-features{display:grid;grid-template-columns:1fr 1fr;gap:7px}.about-features span{padding:9px 10px;border-radius:9px;background:var(--panel-soft);font-size:11px}.about-features span::before{content:'✓';color:var(--accent);font-weight:800;margin-inline-end:7px}.developer-hero{display:flex;align-items:center;gap:14px;padding:20px;border:1px solid color-mix(in srgb,var(--accent) 42%,var(--line));border-radius:16px;background:linear-gradient(135deg,var(--accent-soft),var(--panel-raised))}.developer-avatar{width:62px;height:62px;display:grid;place-items:center;flex:none;border-radius:50%;background:#172033;color:#fff;font-size:18px;font-weight:800}.developer-hero h2,.developer-hero p{margin:2px 0}.developer-hero small,.developer-hero p{color:var(--muted)}.developer-pane section{margin-top:13px;line-height:1.9}.developer-pane section p{margin:0 0 10px}.developer-pane section strong{display:block;padding:10px;border-radius:9px;background:var(--accent-soft);color:var(--accent-ink)} .support-copy-row{grid-template-columns:minmax(0,1fr) auto auto!important}.support-copy-row span,.support-copy-row a,.support-copy-row button{min-width:0;border:1px solid var(--line);border-radius:9px;padding:10px;background:color-mix(in srgb,var(--panel) 76%,#edf1f6);color:inherit;text-decoration:none}.support-copy-row span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.support-copy-row a{font-weight:700;background:var(--panel-soft)}.other-apps{margin-top:12px!important}.other-app-card{display:grid;grid-template-columns:42px 1fr;align-items:center;gap:10px;padding:11px;border:1px dashed var(--line);border-radius:11px;background:var(--panel-soft)}.other-app-card>span{width:42px;height:42px;display:grid;place-items:center;border-radius:11px;background:var(--accent-soft);color:var(--accent-ink);font-size:22px}.other-app-card b,.other-app-card small{display:block}.other-app-card small{margin-top:4px;color:var(--muted);font-size:10px} .support-website-title{margin-top:15px!important} @media(max-width:620px){.about-features{grid-template-columns:1fr}.support-copy-row{grid-template-columns:1fr 1fr!important}.support-copy-row>span{grid-column:1/-1}} /* 2.8.3 release hardening: stable desktop columns and accessible mobile controls. */ body{margin:0} .workspace,html[dir="rtl"] .workspace{direction:rtl} html[dir="ltr"] .workspace{direction:ltr} .panel-title p{color:#566072} [data-theme="dark"] .panel-title p{color:#c2c9d4} @media(max-width:768px){.mobile-tabs button.active{color:var(--active-ink)}} @media(max-width:768px) and (pointer:coarse){.top-actions button,.workspace-switcher button{min-height:44px}.top-actions button{min-width:44px}} /* 2.8.4 brand lockup: Key23 with Studio beneath it in the yellow identity. */ .brand-lockup{direction:ltr;display:inline-flex;align-items:center;justify-content:center;width:92px;min-width:92px;height:42px;padding:3px 5px;border-radius:9px;background:transparent;line-height:1;flex:none}.brand-lockup img{display:block;width:100%;height:100%;object-fit:contain}.brand-lockup-large{width:154px;min-width:154px;height:64px;padding:5px 7px}.brand-tagline{display:block}.brand>.version-badge{font-size:10px;color:var(--active-ink);background:var(--accent-soft);padding:3px 6px;border-radius:10px;border:1px solid color-mix(in srgb,var(--accent) 45%,transparent)}[data-theme="dark"] .brand-lockup{background:#f8fafc;box-shadow:inset 0 0 0 1px #ffffff20} @media(max-width:620px){.welcome-brand>.brand-tagline{display:none}} @media(max-width:768px){.brand>.version-badge{display:none}.brand-lockup{width:80px;min-width:80px;height:38px}} /* 2.2.1: compact image upload and safer panel-edge spacing. */ .panel-title{padding-inline:16px 22px} .panel-title::after{inset-inline-end:-38px;opacity:.72} .toolrail button{padding-inline:7px;line-height:1.35} .image-upload-grid{display:flex;justify-content:center} .add-grid .image-upload-action, .add-grid .image-upload-action:only-child{ width:min(100%,218px);height:68px;min-height:68px;padding:9px 13px; display:flex;flex-direction:row;align-items:center;justify-content:flex-start;gap:12px; border-style:dashed;border-color:color-mix(in srgb,var(--accent) 58%,var(--line)); background:color-mix(in srgb,var(--accent-soft) 34%,var(--panel-raised));text-align:start } .image-upload-icon{position:relative;flex:0 0 42px;width:42px;height:42px;display:grid;place-items:center;border-radius:11px;background:var(--accent);color:var(--accent-ink)} .image-upload-icon b{font-size:20px;line-height:1} .image-upload-icon i{position:absolute;inset-inline-start:-5px;top:-7px;width:20px;height:20px;display:grid;place-items:center;border:2px solid var(--panel-raised);border-radius:50%;background:#172033;color:#fff;font:700 14px/1 Arial,sans-serif;font-style:normal} .image-upload-copy{min-width:0;display:flex;flex-direction:column;align-items:flex-start;gap:3px} .image-upload-copy strong{font-size:13px;white-space:nowrap}.image-upload-copy small{font-size:8px!important;color:var(--muted);white-space:nowrap} html[dir="ltr"] .image-upload-copy{align-items:flex-start} @media(max-width:768px){ .panel-title{padding-inline:13px 18px}.toolrail button{padding-inline:5px} .add-grid .image-upload-action,.add-grid .image-upload-action:only-child{width:min(100%,205px);height:60px;min-height:60px;padding:7px 11px;gap:10px} .image-upload-icon{flex-basis:38px;width:38px;height:38px}.image-upload-icon b{font-size:18px}.image-upload-copy strong{font-size:12px} } .collage-files{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:7px;margin:10px 0 15px} .collage-files:empty{display:none} .collage-files article{position:relative;min-width:0;padding:4px;border:1px solid var(--line);border-radius:10px;background:var(--panel)} .collage-files img{display:block;width:100%;aspect-ratio:1;object-fit:cover;border-radius:7px;background:#e9edf3} .collage-files small{display:block;margin-top:4px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:8px;color:var(--muted);direction:ltr} .collage-files button{position:absolute;top:-5px;left:-5px;width:22px;height:22px;padding:0;border:2px solid var(--panel);border-radius:50%;background:#cf2f3b;color:#fff;font-weight:800;line-height:18px} .collage-panel .collage-layouts button{transition:border-color .15s,background .15s,transform .15s} .collage-panel .collage-layouts button:active{transform:scale(.94)} .collage-layout-preview{position:relative;display:block;width:30px;height:30px;margin:auto;overflow:hidden;border:1px solid currentColor;border-radius:2px;background:color-mix(in srgb,currentColor 8%,transparent)} .collage-layout-preview i{position:absolute;display:block;border:1px solid var(--panel-raised);background:currentColor;box-shadow:inset 0 0 0 1px color-mix(in srgb,currentColor 24%,transparent);transform-origin:center} .collage-layout-preview-memories,.collage-layout-preview-polaroid{overflow:visible;border:0;background:transparent} .collage-layout-preview-polaroid i{border:2px solid var(--panel-raised);box-shadow:0 0 0 1px currentColor;background:currentColor} @media(max-width:768px){.collage-files{grid-template-columns:repeat(5,minmax(0,1fr));gap:5px}.collage-files small{display:none}} /* Unified identity and an explicit project-mode switcher. */ .brand-mark{border-radius:50%;background:#090b0f;color:#fff} .workspace-mode{display:flex;align-items:center;gap:8px;padding-inline-start:16px;border-inline-start:1px solid var(--line)} .workspace-mode>span{font-size:10px;color:var(--muted);white-space:nowrap} .workspace-switcher{align-items:stretch;background:color-mix(in srgb,var(--panel) 72%,#e9edf3)} .workspace-switcher button{min-width:112px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;padding:5px 13px!important;line-height:1.2} .workspace-switcher button b{font-size:11px} .workspace-switcher button small{font-size:8px;color:inherit;opacity:.76} @media(max-width:768px){ .topbar{gap:7px}.workspace-mode{margin-inline:auto;padding-inline-start:0;border-inline-start:0}.workspace-mode>span,.workspace-switcher button small{display:none}.workspace-switcher button{min-width:82px;padding:6px 8px!important}.workspace-switcher button b{font-size:10px} } .install-action{color:var(--accent-ink)!important;border-color:var(--accent)!important;background:var(--accent-soft)!important}:focus-visible{outline-color:var(--accent)!important} .slide-list{gap:6px}.slide-card{grid-template-columns:16px minmax(0,1fr) auto!important;gap:6px!important;min-height:58px;padding:5px 6px!important;border-radius:9px}.slide-card .slide-open{grid-column:auto;grid-template-columns:38px minmax(0,1fr);gap:7px;padding:0;border:0;background:transparent;color:inherit;min-width:0}.slide-preview{width:38px;height:44px;border-radius:5px}.slide-card b{display:block;font-size:11px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.slide-card small{font-size:8px;margin-top:2px;white-space:nowrap}.slide-export-check{width:14px;height:14px}.slide-row-tools{display:flex;gap:3px;direction:rtl}.slide-row-action{display:grid;place-items:center;width:25px;height:27px;padding:0!important;border:1px solid var(--line)!important;border-radius:6px!important;background:var(--panel)!important;color:var(--muted)!important;font-size:13px;line-height:1}.slide-row-action:hover{border-color:var(--accent)!important;color:var(--accent)!important}.slide-row-action.lock.active{background:var(--accent-soft)!important;color:var(--accent-ink)!important;border-color:var(--accent)!important}.slide-row-action.delete{color:#b52222!important}.slide-row-action:disabled{opacity:.35;cursor:not-allowed} @media(max-width:768px){.slide-card{grid-template-columns:15px minmax(0,1fr) auto!important}.slide-row-action{width:29px;height:30px}.slide-card .slide-open{grid-template-columns:34px minmax(0,1fr)}.slide-preview{width:34px;height:40px}} @media(max-width:768px){ :root{--mobile-nav-h:var(--main-toolbar-safe-height);--mobile-sheet-h:34px;--mobile-carousel-h:94px} body.mobile-carousel-collapsed{--mobile-carousel-h:36px} body[data-mobile-sheet="collapsed"]{--mobile-sheet-h:34px}body[data-mobile-sheet="half"]{--mobile-sheet-h:min(42dvh,420px)}body[data-mobile-sheet="full"]{--mobile-sheet-h:calc(100dvh - 112px - env(safe-area-inset-top) - env(safe-area-inset-bottom))} .workspace{height:calc(100dvh - 56px - env(safe-area-inset-top));padding-bottom:var(--mobile-nav-h)} .canvas-area{height:100%;min-height:0}.canvas-viewport{display:flex;align-items:flex-start;justify-content:center;padding:12px 10px calc(var(--mobile-sheet-h) + 14px);scroll-padding-bottom:calc(var(--mobile-sheet-h) + 18px);transition:padding-bottom .22s ease}.canvas{flex:none;width:92vw;max-height:none;margin-top:4px;transform-origin:top center} .sidepanel{display:block!important;position:absolute;z-index:9;left:0;right:0;bottom:var(--mobile-nav-h)!important;height:var(--mobile-sheet-h);max-height:none!important;padding:34px 14px 14px;border:0;border-top:1px solid var(--line);border-radius:18px 18px 0 0;overflow:auto;overscroll-behavior:contain;box-shadow:0 -10px 30px #17203324;transition:height .22s ease,padding .22s ease} body[data-mobile-sheet="collapsed"] .sidepanel{overflow:hidden;padding-bottom:0;box-shadow:0 -5px 16px #17203318}body[data-mobile-sheet="full"] .sidepanel{border-radius:0} .mobile-sheet-handle{display:grid;grid-template-columns:24px 1fr 24px;align-items:center;position:absolute;z-index:2;top:0;left:0;right:0;width:100%;height:34px;padding:0 12px;border:0;border-bottom:1px solid var(--line);border-radius:18px 18px 0 0;background:var(--panel);color:var(--muted);touch-action:none}.mobile-sheet-handle i{display:block;width:32px;height:4px;border-radius:5px;background:#aab2c0;position:absolute;top:5px;left:50%;transform:translateX(-50%)}.mobile-sheet-handle span{grid-column:2;font-size:10px;text-align:center;padding-top:5px}.mobile-sheet-handle b{grid-column:3;font-size:17px;padding-top:3px} .properties-open .sidepanel{display:block!important}.sidepanel>.properties.active{display:block!important;position:static!important;max-height:none!important;padding:0!important;border:0!important;border-radius:0!important;box-shadow:none!important;overflow:visible!important} .mobile-tabs{z-index:10;height:var(--mobile-nav-h);padding-bottom:env(safe-area-inset-bottom)}.canvas-toolbar{flex:none}.zoom-controls #zoom-value{min-width:82px} body[data-mobile-sheet="half"] .canvas-toolbar,body[data-mobile-sheet="full"] .canvas-toolbar{position:relative;z-index:1} .mobile-carousel-strip:not([hidden]){display:block;position:absolute;z-index:8;left:0;right:0;bottom:calc(var(--mobile-nav-h) + var(--mobile-sheet-h));height:94px;padding:8px 42px 8px 8px;background:color-mix(in srgb,var(--panel) 94%,transparent);border-top:1px solid var(--line);box-shadow:0 -5px 18px #17203318;transition:height .2s ease,padding .2s ease}.mobile-carousel-strip.collapsed{height:36px;padding-block:0;overflow:hidden}.mobile-carousel-toggle{position:absolute;right:3px;top:0;width:38px;height:36px;padding:0;border:1px solid var(--line);border-radius:7px;background:var(--panel);color:var(--muted)}#mobile-carousel-list{height:100%;display:flex;gap:7px;overflow-x:auto;direction:rtl;scrollbar-width:none}#mobile-carousel-list button{flex:0 0 66px;display:grid;grid-template-rows:56px 1fr;gap:3px;padding:3px;border:1px solid var(--line);border-radius:8px;background:var(--panel);color:inherit}#mobile-carousel-list button.active{border-color:var(--accent);box-shadow:0 0 0 2px #3157d522}#mobile-carousel-list i{display:grid;place-items:center;border-radius:5px;color:#fff;font-size:9px;font-style:normal}#mobile-carousel-list small{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:8px;color:var(--muted)}.carousel-workspace .canvas-viewport{padding-bottom:calc(var(--mobile-sheet-h) + var(--mobile-carousel-h) + 14px)} } @media(max-width:768px) and (pointer:coarse){.canvas-toolbar button,.mobile-tabs button,.property-form button,.wide{min-height:44px}.zoom-controls button{min-width:44px}.mobile-sheet-handle{height:38px}.layer-action,.slide-row-action{min-width:36px;min-height:36px}} /* 2.2 interface polish: calm surfaces, clearer hierarchy, and true bilingual flow. */ :root{--panel-soft:#f6f8fb;--panel-raised:#ffffff;--workspace-bg:#e9edf3;--shadow-soft:0 8px 24px #1720330b;--shadow-panel:0 12px 32px #17203312;--success:#138a63;--danger:#c62f3b} [data-theme="dark"]{--panel-soft:#1d2129;--panel-raised:#1a1e25;--workspace-bg:#0d0f13;--shadow-soft:0 8px 24px #0003;--shadow-panel:0 12px 32px #0005} html[dir="rtl"] .toolrail,html[dir="rtl"] .sidepanel,html[dir="rtl"] .properties,html[dir="rtl"] .structure-panel{direction:rtl} html[dir="ltr"] .canvas-area{direction:ltr} [data-theme="dark"]{--danger:#ff858b} [data-theme="dark"] .toolrail button.active,[data-theme="dark"] .mobile-tabs button.active,[data-theme="dark"] .structure-tabs button.active{color:var(--active-ink)} .brand small,.language-action,.install-action,.support-links a,.layer-section-title small,.slide-row-action.lock.active,.other-app-card>span,.developer-pane section strong{color:var(--active-ink)!important} .studio-element:focus-visible{outline:3px solid var(--accent);outline-offset:4px} .project-card-actions button,.collage-files button,.zoom-controls button,.slide-row-action{min-width:44px;min-height:44px} @media(max-width:768px){.topbar,.mobile-tabs{padding-inline:calc(11px + env(safe-area-inset-left)) calc(11px + env(safe-area-inset-right))}.zoom-controls button{min-width:44px;min-height:40px}} html[dir="ltr"] .toolrail,html[dir="ltr"] .sidepanel,html[dir="ltr"] .properties,html[dir="ltr"] .structure-panel{direction:ltr} html[dir="ltr"] .mobile-tabs{direction:ltr}html[dir="ltr"] .support-links small{text-align:left} html[lang="en"] .property-form.empty:after{content:"No properties to show"} body{background:var(--workspace-bg)}button,select,input,textarea{transition:border-color .16s ease,background-color .16s ease,box-shadow .16s ease,transform .12s ease} button:not(:disabled):active{transform:translateY(1px)}button:disabled{cursor:not-allowed} .topbar{background:color-mix(in srgb,var(--panel) 94%,var(--panel-soft));box-shadow:0 1px 12px #1720330a} .recovery-notice,.update-notice{position:fixed;z-index:20;top:72px;left:50%;width:min(620px,calc(100% - 24px));transform:translateX(-50%);display:flex;align-items:center;justify-content:space-between;gap:14px;padding:12px 14px;border:1px solid color-mix(in srgb,var(--accent) 58%,var(--line));border-radius:13px;background:var(--panel-raised);box-shadow:0 16px 45px #1720332e}.recovery-notice[hidden],.update-notice[hidden]{display:none}.recovery-notice span,.recovery-notice b,.recovery-notice small,.update-notice span,.update-notice b,.update-notice small{display:block}.recovery-notice small,.update-notice small{margin-top:3px;color:var(--muted);font-size:10px;line-height:1.5}.recovery-notice>div,.update-notice>div{display:flex;gap:6px;flex:none}.recovery-notice button,.update-notice button{padding:8px 11px;border:1px solid var(--line);border-radius:8px;background:var(--panel);color:inherit} body:has(.recovery-notice:not([hidden])) .update-notice{top:154px} @media(prefers-reduced-motion:reduce){*,*::before,*::after{scroll-behavior:auto!important;transition-duration:.01ms!important;animation-duration:.01ms!important;animation-iteration-count:1!important}} .topbar button,.canvas-toolbar button,.wide{color:inherit;background:var(--panel-raised)} .topbar button:hover,.canvas-toolbar button:hover,.wide:hover{border-color:color-mix(in srgb,var(--accent) 58%,var(--line));background:var(--accent-soft)} .language-action{min-width:42px;padding-inline:9px!important;font-weight:800;letter-spacing:.04em;color:var(--active-ink)!important;background:var(--accent-soft)!important;border-color:color-mix(in srgb,var(--accent) 55%,var(--line))!important} .home-action{display:inline-flex;align-items:center;gap:6px;white-space:nowrap}.home-action b{font-size:12px}.topbar button[title]{position:relative} .workspace{background:var(--workspace-bg)}.toolrail{background:color-mix(in srgb,var(--panel) 94%,var(--panel-soft));box-shadow:0 0 18px #1720330a;z-index:2} .toolrail{overflow-y:auto}.toolrail button{width:100%;min-width:0;min-height:54px;position:relative;overflow:hidden;border-color:var(--line);background:var(--panel-raised);white-space:normal;overflow-wrap:anywhere;line-height:1.25}.toolrail button:hover{color:inherit;background:var(--panel-soft);border-color:var(--accent)} .toolrail-separator{display:block;flex:0 0 1px;height:1px;margin:0 8px;background:color-mix(in srgb,var(--muted) 32%,var(--line))} .toolrail button.active{font-weight:700;box-shadow:inset 3px 0 0 var(--accent),var(--shadow-soft)} html[dir="rtl"] .toolrail button.active{box-shadow:inset -3px 0 0 var(--accent),var(--shadow-soft)} .sidepanel,.structure-panel,.properties{background:color-mix(in srgb,var(--panel) 96%,var(--panel-soft))} .sidepanel{padding:16px}.structure-pane{background:var(--panel-soft)} .panel-title{position:relative;overflow:hidden;box-shadow:var(--shadow-soft)}.panel-title::after{content:"";position:absolute;inset-inline-end:-24px;top:-34px;width:84px;height:84px;border-radius:50%;background:var(--accent-soft);pointer-events:none} .panel-title h2,.panel-title p{position:relative;z-index:1}.panel-title h2{letter-spacing:-.01em} .add-grid button,.size-groups .size-list button,.truth-template-card,.template-card,.slide-card,.layer-row,.project-card{background:var(--panel-raised);box-shadow:0 3px 12px #17203308} .add-grid button{min-height:78px;height:auto;padding:11px 8px}.add-grid button span{font-weight:650}.add-grid button small{color:var(--muted);line-height:1.35} .add-grid button:hover,.truth-template-card:hover,.template-card:hover,.size-groups .size-list button:hover{transform:translateY(-1px);box-shadow:var(--shadow-soft)} .canvas-area{background:var(--workspace-bg)}.canvas-toolbar{background:color-mix(in srgb,var(--panel) 82%,var(--workspace-bg));backdrop-filter:blur(10px)} .canvas{box-shadow:0 18px 55px #1720332c,0 0 0 1px #1720330d} .size-group,.canvas-photo-tool,.collage-settings,.project-library,.export-box,.storage-health,.brand-help,.truth-help{border:1px solid var(--line);border-radius:13px;background:var(--panel-raised);box-shadow:var(--shadow-soft)} .size-group{padding:11px}.size-groups{gap:12px}.size-group h3{color:inherit}.size-groups .size-list button{min-height:94px} .custom-size{padding:13px!important;border-radius:13px!important;background:var(--panel-soft)!important} .canvas-photo-tool{background:linear-gradient(145deg,color-mix(in srgb,#ff7043 8%,var(--panel-raised)),var(--panel-raised))} .collage-settings{padding:12px}.collage-selection{background:var(--panel-soft)} .truth-help,.brand-help{display:block;padding:11px;margin-block:10px;line-height:1.7}.truth-hero,.interaction-hero,.collage-hero{box-shadow:var(--shadow-panel)} .template-category-tabs{padding-bottom:10px;scroll-snap-type:x proximity}.template-category-tabs button{scroll-snap-align:start;background:var(--panel-raised)} .template-filters{padding:10px;border:1px solid var(--line);border-radius:12px;background:var(--panel-soft)} .template-preview,.truth-card-preview{background-color:var(--panel-soft)} .property-form{gap:10px}.property-form>strong{padding:8px 10px;border-radius:9px;background:var(--panel-soft);border-inline-start:3px solid var(--accent)} .property-form label{padding:9px;border:1px solid var(--line);border-radius:10px;background:var(--panel-raised)} .property-form .row>label{min-width:0}.property-form input,.property-form select,.property-form textarea,.dialog-pane select,.dialog-pane input{border-color:color-mix(in srgb,var(--line) 82%,var(--muted));background:var(--panel-soft)} input:focus,select:focus,textarea:focus{outline:none;border-color:var(--accent)!important;box-shadow:0 0 0 3px var(--accent-soft)} .project-library,.export-box{padding:13px;margin-top:13px}.export-box{display:grid;gap:7px}.export-box .wide{margin-top:2px} .storage-health{padding:11px;margin-top:12px}.slide-settings{padding:10px;border:1px solid var(--line);border-radius:11px;background:var(--panel-soft)} .settings-device-section>p{margin:-4px 0 12px;color:var(--muted);font-size:11px;line-height:1.7}.settings-device-section .install-action{margin-bottom:8px} .structure-tabs{background:var(--panel-raised);padding:9px}.structure-tabs button{min-height:38px}.slide-card,.layer-row{border-color:color-mix(in srgb,var(--line) 90%,transparent)} .app-dialog-card{border:1px solid color-mix(in srgb,var(--line) 78%,transparent);box-shadow:0 32px 95px #0008}.dialog-pane{background:var(--panel-soft)}.dialog-pane section{background:var(--panel-raised);box-shadow:var(--shadow-soft)} .save-choice-dialog{position:fixed;z-index:180;inset:0;display:grid;place-items:center;padding:20px;background:#0b1020c7;backdrop-filter:blur(12px)}.save-choice-dialog[hidden]{display:none}.save-choice-dialog>div{width:min(460px,100%);padding:25px;border:1px solid var(--line);border-radius:20px;background:var(--panel);text-align:center;box-shadow:0 30px 90px #0008}.save-choice-icon{width:46px;height:46px;display:grid;place-items:center;margin:auto;border-radius:50%;background:var(--accent);color:var(--accent-ink);font-size:25px;font-weight:900}.save-choice-dialog h2{margin:13px 0 7px}.save-choice-dialog p{margin:0;color:var(--muted);line-height:1.7}.save-choice-dialog>div>div{display:grid;gap:8px;margin-top:20px}.save-choice-dialog button{min-height:44px} .onboarding-dialog{position:fixed;z-index:175;inset:0;display:grid;place-items:center;padding:20px;background:#0b1020c2;backdrop-filter:blur(10px)}.onboarding-dialog[hidden]{display:none}.onboarding-dialog>div{width:min(820px,100%);max-height:92dvh;overflow:auto;padding:22px;border:1px solid var(--line);border-radius:22px;background:var(--panel);box-shadow:0 30px 90px #0008}.onboarding-dialog header{display:flex;align-items:flex-start;justify-content:space-between;gap:15px}.onboarding-dialog header span{display:inline-flex;padding:5px 9px;border-radius:20px;background:var(--accent);color:var(--accent-ink);font-size:10px;font-weight:800}.onboarding-dialog h2{margin:9px 0 4px}.onboarding-dialog header p{margin:0;color:var(--muted)}.onboarding-dialog header button{width:38px;height:38px;border:1px solid var(--line);border-radius:10px;background:var(--panel-raised);color:inherit}.onboarding-steps{display:grid;grid-template-columns:repeat(4,1fr);gap:9px;margin-top:20px}.onboarding-steps article{padding:14px;border:1px solid var(--line);border-radius:14px;background:var(--panel-soft)}.onboarding-steps article>b{width:28px;height:28px;display:grid;place-items:center;border-radius:9px;background:var(--accent);color:var(--accent-ink)}.onboarding-steps h3{font-size:13px;margin:11px 0 5px}.onboarding-steps p{font-size:11px;line-height:1.6;color:var(--muted);margin:0}.shortcut-guide{margin-top:13px;padding:14px;border:1px solid var(--line);border-radius:14px}.shortcut-guide h3{margin:0 0 11px}.shortcut-guide>div{display:flex;flex-wrap:wrap;gap:7px}.shortcut-guide span{display:flex;align-items:center;gap:4px;padding:7px 9px;border-radius:9px;background:var(--panel-soft);font-size:10px}.shortcut-guide span b{margin-inline-start:3px}.shortcut-guide kbd{padding:2px 5px;border:1px solid var(--line);border-bottom-width:2px;border-radius:5px;background:var(--panel-raised)}.onboarding-start{width:100%;min-height:44px;margin-top:13px;border:0;border-radius:11px} .welcome-screen{background:radial-gradient(circle at 15% 18%,var(--accent-soft),transparent 28%),#f7f8fa}.welcome-hero,.welcome-quick button,.welcome-project-card{box-shadow:var(--shadow-soft)} [data-theme="dark"] .welcome-screen{background:radial-gradient(circle at 15% 18%,var(--accent-soft),transparent 28%),#111319} /* Keep the editor header readable at every desktop width. */ .topbar{min-width:0;overflow:hidden}.topbar>*,.workspace-mode,.workspace-switcher,.top-actions{min-width:0}.topbar button{white-space:nowrap}.brand{flex:0 1 230px;white-space:nowrap}.workspace-mode{flex:0 1 auto}.history-actions,.top-actions{flex:none}.save-state{white-space:nowrap} @media(max-width:1500px){.topbar{gap:9px;padding-inline:11px}.brand{min-width:185px}.workspace-mode{padding-inline-start:9px}.workspace-mode>span,.workspace-switcher button small{display:none}.workspace-switcher button{min-width:88px;padding-inline:9px!important}.topbar button{padding-inline:9px}} @media(max-width:1220px){.brand{min-width:auto;flex:none}.brand small,.save-state{display:none}.home-action b{display:none}.workspace-switcher button{min-width:76px}.top-actions{gap:4px}.topbar button{padding-inline:7px}} @media(max-width:920px) and (min-width:721px){.brand>span:nth-child(2){display:none}.workspace-mode{margin-inline:auto}.install-action{display:none!important}} /* Zoom from the toolbar downward instead of shrinking around the centre. */ .canvas-viewport{place-items:start center;padding-top:20px}.canvas{transform-origin:top center} *{scrollbar-width:thin;scrollbar-color:color-mix(in srgb,var(--muted) 45%,transparent) transparent} @media(max-width:768px){ .recovery-notice,.update-notice{top:calc(62px + env(safe-area-inset-top));align-items:stretch;flex-direction:column}.recovery-notice>div,.update-notice>div{display:grid;grid-template-columns:1fr 1fr}.recovery-notice button,.update-notice button{min-height:42px} body:has(.recovery-notice:not([hidden])) .update-notice{top:calc(205px + env(safe-area-inset-top))} .topbar{padding-inline:8px}.top-actions{gap:4px}.topbar button{min-width:44px;min-height:44px;padding:7px}.language-action{min-width:44px!important}.home-action{padding-inline:8px!important}.home-action b{font-size:10px} .sidepanel{background:var(--panel);box-shadow:0 -14px 40px #1720332e}.panel-title{margin-top:2px} .add-grid{gap:7px}.add-grid button{min-height:68px;padding:9px 6px;border-radius:11px}.add-grid b{font-size:20px} .size-group{padding:9px}.size-groups .size-list button{min-height:82px}.size-groups .size-list b{font-size:11px} .truth-hero,.interaction-hero,.collage-hero{padding:12px}.truth-hero>span,.interaction-hero>span,.collage-hero>span{width:40px;height:40px;font-size:22px} .property-form label{padding:8px}.project-library,.export-box{padding:10px} .mobile-tabs{background:color-mix(in srgb,var(--panel) 96%,transparent);backdrop-filter:blur(14px);box-shadow:0 -7px 24px #17203318} .mobile-tabs button{font-size:16px}.mobile-tabs button.active{background:var(--accent-soft);font-weight:700} .welcome-head .language-action{display:inline-grid!important;place-items:center}.welcome-head>div:last-child{display:flex;gap:5px} .onboarding-dialog{padding:10px}.onboarding-dialog>div{padding:16px}.onboarding-steps{grid-template-columns:1fr 1fr}.shortcut-guide>div{display:grid;grid-template-columns:1fr 1fr}.shortcut-guide span{justify-content:center} } /* Mobile contextual editor: one document model, two compact navigation layers. */ @media(max-width:768px){ body.mobile-has-selection{--context-toolbar-space:var(--context-toolbar-height)} .mobile-tabs{height:var(--main-toolbar-safe-height);bottom:var(--keyboard-inset,0px);padding:0 env(safe-area-inset-right) var(--editor-safe-bottom) env(safe-area-inset-left);background:#111318;color:#fff;border-color:#272b33;backdrop-filter:none;overscroll-behavior-x:contain;scrollbar-width:none} .mobile-tabs button{flex:0 0 64px;min-width:64px;min-height:var(--main-toolbar-height);color:#d4d8e0;border-radius:0;background:transparent} .mobile-tabs button.active{color:#191600;background:var(--accent);box-shadow:inset 0 3px 0 #fff6bd} .mobile-tabs span{color:inherit} .mobile-context-toolbar{display:flex;position:fixed;z-index:12;left:0;right:0;bottom:calc(var(--main-toolbar-safe-height) + var(--keyboard-inset,0px));height:var(--context-toolbar-height);padding:5px max(8px,env(safe-area-inset-left));gap:4px;direction:rtl;overflow-x:auto;overscroll-behavior-x:contain;scrollbar-width:none;background:color-mix(in srgb,var(--panel) 97%,transparent);border-top:1px solid var(--line);box-shadow:0 -6px 18px #17203314} .mobile-context-toolbar[hidden]{display:none} html[dir="ltr"] .mobile-context-toolbar{direction:ltr} .mobile-context-toolbar button{flex:0 0 64px;min-width:64px;min-height:44px;padding:3px 5px;border:1px solid transparent;border-radius:9px;background:transparent;color:var(--muted);display:grid;place-items:center;grid-template-rows:20px 15px;line-height:1} .mobile-context-toolbar button b{font-size:17px}.mobile-context-toolbar button span{font-size:10px;white-space:nowrap} .mobile-context-toolbar button.active{color:var(--active-ink);background:var(--accent-soft);border-color:color-mix(in srgb,var(--accent) 62%,var(--line));box-shadow:inset 0 -3px 0 var(--accent)} .properties.active{display:flex;flex-direction:column;position:fixed;z-index:13;left:max(8px,env(safe-area-inset-left));right:max(8px,env(safe-area-inset-right));bottom:calc(var(--main-toolbar-safe-height) + var(--context-toolbar-height) + var(--keyboard-inset,0px));height:auto;max-height:min(36dvh,350px);padding:0;border:1px solid var(--line);border-radius:16px 16px 0 0;background:var(--panel);box-shadow:0 -14px 38px #17203330;overflow:hidden} body.mobile-has-selection:not(.mobile-property-open) .properties.active{display:none} body.mobile-property-open .sidepanel{visibility:hidden;pointer-events:none} body.mobile-has-selection[data-mobile-sheet="collapsed"] .sidepanel{visibility:hidden;pointer-events:none} .properties.active>.panel-title{display:none} .mobile-property-header{display:flex;flex:none;align-items:center;justify-content:space-between;min-height:50px;padding:7px 10px 7px 14px;border-bottom:1px solid var(--line);background:color-mix(in srgb,var(--panel) 88%,var(--accent-soft))} .mobile-property-header span{display:flex;min-width:0;flex-direction:column;gap:2px}.mobile-property-header b{font-size:14px}.mobile-property-header small{max-width:70vw;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--muted);font-size:10px} .mobile-property-header button{flex:0 0 44px;width:44px;height:44px;padding:0;border:1px solid var(--line);border-radius:10px;background:var(--panel);color:var(--active-ink);font-size:20px} .properties.active .property-form{min-height:0;overflow-y:auto;overscroll-behavior:contain;padding:12px;scroll-padding-bottom:18px} .property-form>[hidden]{display:none} .sidepanel{bottom:calc(var(--main-toolbar-safe-height) + var(--context-toolbar-space) + var(--keyboard-inset,0px))!important} .canvas-viewport{padding-bottom:calc(var(--mobile-sheet-h) + var(--context-toolbar-space) + 14px);scroll-padding-bottom:calc(var(--mobile-sheet-h) + var(--context-toolbar-space) + 18px)} body.mobile-property-open .canvas-viewport{padding-bottom:calc(min(36dvh,350px) + var(--context-toolbar-height) + 14px);scroll-padding-bottom:calc(min(36dvh,350px) + var(--context-toolbar-height) + 18px)} .mobile-carousel-strip:not([hidden]){bottom:calc(var(--main-toolbar-safe-height) + var(--context-toolbar-space) + var(--mobile-sheet-h))} } @media(max-width:768px) and (orientation:landscape){ .properties.active{max-height:min(42dvh,280px)} body.mobile-property-open .canvas-viewport{padding-bottom:calc(min(42dvh,280px) + var(--context-toolbar-height) + 10px)} } /* Phone shell: keep the header calm and move the product identity to navigation. */ @media(max-width:768px){ .topbar{justify-content:center;padding-inline:max(8px,env(safe-area-inset-left)) max(8px,env(safe-area-inset-right))} .topbar>.brand,.topbar>.top-actions{display:none} .topbar>.history-actions{display:flex;flex:none;gap:4px} .topbar>.history-actions button{display:grid;place-items:center;width:44px;min-width:44px;height:44px;min-height:44px;padding:0} .topbar>.workspace-mode{width:min(250px,calc(100% - 96px));margin:0;padding:0;border:0} .topbar .workspace-switcher{width:100%} .topbar .workspace-switcher button{flex:1;min-width:0;min-height:44px} .mobile-tabs .mobile-brand-home{position:sticky;z-index:2;inset-inline-start:0;flex-basis:78px;min-width:78px;padding:4px 6px;background:#111318;box-shadow:-5px 0 12px #0005} html[dir="ltr"] .mobile-tabs .mobile-brand-home{box-shadow:5px 0 12px #0005} .mobile-tabs .mobile-brand-home>.brand-lockup{display:inline-flex;width:68px;min-width:68px;height:38px;padding:3px 5px;border:1px solid #f2c50066;border-radius:9px;background:#f8fafc} .template-panel.active{display:flex;min-width:0;flex-direction:column} .template-panel>.panel-title{flex:none;margin-bottom:8px;padding:9px 11px} .template-panel>.panel-title h2{font-size:15px}.template-panel>.panel-title p{font-size:10px} .template-panel .template-category-tabs{position:sticky;z-index:1;top:-1px;flex:none;margin:0 -2px 7px;padding:3px 2px 8px;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;background:var(--panel);scrollbar-width:thin} .template-panel .template-category-tabs button{min-height:40px;padding-inline:13px;scroll-snap-align:start} .template-panel .template-filters{display:flex;flex:none;gap:7px;margin:0 0 8px;padding:7px;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x proximity} .template-panel .template-filters>*{flex:0 0 142px;min-width:142px;min-height:42px;scroll-snap-align:start} .template-panel .template-filters>#template-search{flex-basis:184px;min-width:184px} .template-panel .template-filters>#template-category{display:none} .template-panel .template-count{flex:none;margin-bottom:6px} .template-panel .template-list{display:flex;min-width:0;gap:9px;padding:1px 1px 10px;overflow-x:auto;overflow-y:hidden;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;scrollbar-width:thin} .template-panel .template-card{flex:0 0 min(46vw,180px);min-width:150px;scroll-snap-align:start} .template-panel .template-empty{flex:1 0 100%;padding:24px;text-align:center} .template-panel .template-save{order:10;grid-template-columns:minmax(0,1fr) auto;flex:none;margin:8px 0 0;padding-top:9px;border-top:1px solid var(--line)} .template-panel .template-save button{min-height:42px;margin:0} .size-groups{min-width:0;flex-direction:row;gap:9px;padding:1px 1px 10px;overflow-x:auto;overflow-y:hidden;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;scrollbar-width:thin} .size-groups .size-group{flex:0 0 min(88vw,340px);scroll-snap-align:start} .truth-template-list{display:flex;min-width:0;gap:9px;padding-bottom:10px;overflow-x:auto;overflow-y:hidden;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;scrollbar-width:thin} .truth-template-list .truth-template-card{flex:0 0 min(72vw,270px);scroll-snap-align:start} .sidepanel{display:flex!important;min-height:0;flex-direction:column;overflow:hidden;padding-bottom:0} .sidepanel>.panel.active{min-height:0;flex:1;overflow-y:auto;overscroll-behavior:contain;padding-bottom:14px} .mobile-workflow-nav{display:grid;flex:none;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:center;gap:7px;margin-inline:-14px;padding:8px 10px;border-top:1px solid var(--line);background:color-mix(in srgb,var(--panel) 95%,var(--workspace-bg));box-shadow:0 -5px 16px #17203312} body[data-mobile-sheet="collapsed"] .mobile-workflow-nav{display:none} .mobile-workflow-nav button{min-width:0;min-height:48px;padding:5px 9px;border:1px solid color-mix(in srgb,var(--accent) 45%,var(--line));border-radius:11px;background:var(--panel);color:var(--active-ink);display:grid;align-items:center;gap:2px} .mobile-workflow-nav button:first-child{grid-template-columns:auto minmax(0,1fr);text-align:start}.mobile-workflow-nav button:last-child{grid-template-columns:minmax(0,1fr) auto;text-align:end} .mobile-workflow-nav button small{font-size:9px;color:var(--muted)}.mobile-workflow-nav button b{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:12px}.mobile-workflow-nav button>span{grid-row:1/3;font-size:22px;color:var(--accent-ink)} .mobile-workflow-nav button:disabled{opacity:.42}.mobile-workflow-nav output{min-width:42px;color:var(--muted);font-size:10px;text-align:center;direction:ltr} html[dir="ltr"] .mobile-workflow-nav button:first-child{text-align:end}html[dir="ltr"] .mobile-workflow-nav button:last-child{text-align:start} } /* The external phone harness cannot change the browser's pointer media feature. Its explicit query flag enables the same target sizes for visual inspection. */ @media(max-width:768px){ html[data-input-preview="coarse"] .top-actions button, html[data-input-preview="coarse"] .workspace-switcher button, html[data-input-preview="coarse"] .canvas-toolbar button, html[data-input-preview="coarse"] .mobile-tabs button, html[data-input-preview="coarse"] .property-form button, html[data-input-preview="coarse"] .wide{min-height:44px} html[data-input-preview="coarse"] .top-actions button, html[data-input-preview="coarse"] .zoom-controls button{min-width:44px} html[data-input-preview="coarse"] .mobile-sheet-handle{height:38px} html[data-input-preview="coarse"] .layer-action, html[data-input-preview="coarse"] .slide-row-action{min-width:36px;min-height:36px} } /* Text preview uses one inline formatting context and safe vertical centering. */ .studio-element.text{display:flex;flex-direction:column;align-items:stretch;justify-content:flex-start;line-height:1.35} .studio-element.text>.text-content{flex:none;width:100%;min-width:0;margin-block:auto;pointer-events:none} /* Review fixes: clipped text, bounded tool rail and readable touch controls. */ .text-overflow-help{border:1px solid #b76b00;border-radius:9px;padding:10px;background:#fff3d6;color:#694000;font-size:12px;line-height:1.6} .text-overflow-help[hidden]{display:none!important} .text-overflow-help p{margin:0 0 8px} .studio-element.text.text-overflow{box-shadow:inset 0 0 0 2px #df8b00} .image-upload-copy{flex:1;max-width:100%} .image-upload-copy strong,.image-upload-copy small{white-space:normal;overflow-wrap:anywhere;max-width:100%} .layer-actions{flex-wrap:wrap} @media(min-width:769px){ .workspace{height:calc(100dvh - 64px);min-height:0;grid-template-rows:minmax(0,1fr);overflow:hidden} .workspace>.toolrail,.workspace>.sidepanel,.workspace>.structure-panel,.workspace>.canvas-area{min-height:0;max-height:100%} .canvas-viewport{min-height:0} .canvas-toolbar{flex-shrink:0} .toolrail{gap:clamp(2px,.55dvh,6px);padding-block:clamp(5px,.8dvh,10px);overflow-y:auto;overscroll-behavior:contain} .toolrail button{flex:1 1 46px;height:auto;min-height:44px;max-height:54px;padding-block:2px;font-size:clamp(10px,1.35dvh,11px);line-height:1.1;white-space:normal;overflow-wrap:anywhere} .toolrail [data-action="open-settings"]{white-space:nowrap;overflow-wrap:normal} .toolrail button span{font-size:clamp(16px,2.2dvh,21px);margin-bottom:clamp(1px,.3dvh,4px)} .toolrail [data-panel="export"]{position:static;box-shadow:none;background:var(--panel-raised)} } @media(max-width:768px),(pointer:coarse){ .sidepanel button,.property-form button,.layer-action,.language-action,.crop-quick-actions button,.crop-nudge-actions button{min-height:44px;min-width:44px} .layer-actions{gap:4px} } /* Keep the image upload call-to-action wide and readable. */ .image-upload-grid .image-upload-action:only-child:last-child{ width:100%;max-width:260px;height:76px;min-height:76px;padding:10px 14px; display:flex;flex-direction:row;align-items:center;justify-content:flex-start;gap:12px } .image-upload-grid .image-upload-copy{flex:1;min-width:0;align-items:flex-start;text-align:start} .image-upload-grid .image-upload-copy strong{font-size:14px;line-height:1.35;white-space:nowrap} .image-upload-grid .image-upload-copy small{font-size:9px!important;line-height:1.45;white-space:normal} /* A layer card has one content row and one straight action row. */ .layer-row{grid-template-columns:minmax(0,1fr)!important;gap:7px!important;padding:8px!important} .layer-main{width:100%} .layer-actions{ grid-column:1/-1;display:flex;flex-flow:row nowrap;justify-content:flex-start;align-items:center; gap:4px;padding-top:7px;border-top:1px solid var(--line) } .layer-actions .layer-action{flex:1 1 32px;width:auto;max-width:40px;margin:0} @media(max-width:768px){ .image-upload-grid .image-upload-action:only-child:last-child{max-width:none;height:68px;min-height:68px} .layer-actions .layer-action{max-width:none} }