:root{font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;color:#0f172a;background:#eef2f7;--bg:#eef2f7;--card:#fff;--line:#dbe3ee;--muted:#64748b;--dark:#08111f;--dark2:#111c2d;--blue:#2563eb;--green:#22c55e;--orange:#f97316;--purple:#8b5cf6;--danger:#dc2626}
*{box-sizing:border-box}body{margin:0;background:linear-gradient(180deg,#f8fafc 0,#eef2f7 380px);min-height:100vh}a{color:inherit}.top{background:rgba(7,17,31,.98);color:#fff;border-bottom:1px solid #1e293b;position:sticky;top:0;z-index:20;box-shadow:0 8px 28px rgba(15,23,42,.13)}.topin{max-width:1540px;margin:auto;padding:0 24px;display:flex;align-items:center;gap:28px;min-height:76px}.brand{display:flex;align-items:center;gap:12px;text-decoration:none;min-width:max-content}.brand img{width:46px;height:46px}.brand b{font-size:20px;letter-spacing:.02em}.brand small{display:block;color:#8fb8ff;font-size:11px;letter-spacing:.14em;font-weight:800}.tabs{display:flex;align-self:stretch}.tab{display:flex;align-items:center;gap:8px;padding:0 22px;text-decoration:none;color:#b8c3d5;font-weight:750;border-bottom:3px solid transparent}.tab:hover{color:white;background:rgba(255,255,255,.035)}.tab.active{color:white}.tab.host.active{border-color:#3b82f6}.tab.seo.active{border-color:#22c55e}.tab.frames.active{border-color:#f97316}.topspacer{flex:1}.logout{font-size:13px;color:#94a3b8;text-decoration:none}.wrap{max-width:1540px;margin:0 auto;padding:26px 24px 56px}.flash{border-radius:12px;padding:12px 15px;margin-bottom:14px;font-size:14px;border:1px solid}.flash.success{background:#ecfdf5;color:#166534;border-color:#bbf7d0}.flash.error{background:#fef2f2;color:#991b1b;border-color:#fecaca}.pagehead{display:flex;justify-content:space-between;gap:18px;align-items:flex-start;margin-bottom:20px}.pagehead h1{font-size:30px;line-height:1.1;letter-spacing:-.04em;margin:0}.pagehead p{color:var(--muted);margin:7px 0 0;line-height:1.5}.badge{display:inline-flex;align-items:center;gap:7px;border:1px solid var(--line);background:#fff;border-radius:999px;padding:8px 11px;font-size:12px;color:#475569;white-space:nowrap}.pipeline{display:flex;align-items:center;gap:10px;background:#0b1525;color:#d8e3f5;border:1px solid #1e2f48;border-radius:16px;padding:12px 15px;margin:0 0 20px;overflow:auto}.pipe{display:flex;align-items:center;gap:8px;white-space:nowrap;font-size:13px;font-weight:750}.pipe i{width:26px;height:26px;border-radius:8px;display:grid;place-items:center;font-style:normal;background:#17253a}.pipe.frames{color:#fdba74}.pipe.seo{color:#86efac}.pipe.host{color:#93c5fd}.arrow{color:#52647d}.grid{display:grid;grid-template-columns:minmax(0,1fr) 360px;gap:18px}.grid.hostgrid{grid-template-columns:280px minmax(0,1fr)}.card{background:var(--card);border:1px solid var(--line);border-radius:18px;padding:18px;box-shadow:0 9px 32px rgba(15,23,42,.045)}.card+.card{margin-top:16px}.card h2{font-size:18px;letter-spacing:-.02em;margin:0 0 14px}.card h3{font-size:15px;margin:0 0 11px}.muted{color:var(--muted)}.small{font-size:12px}.folderlist{display:grid;gap:8px}.folderitem{display:block;text-decoration:none;border:1px solid var(--line);border-radius:12px;padding:12px;background:#f8fafc}.folderitem:hover,.folderitem.active{border-color:#93c5fd;background:#eff6ff}.folderitem b{display:block}.folderitem small{color:var(--muted)}.formrow{display:grid;grid-template-columns:1fr 170px auto;gap:10px}.fields2{display:grid;grid-template-columns:1fr 1fr;gap:12px}.fields3{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}.field{display:block}.field span,.label{display:block;font-size:12px;font-weight:800;color:#475569;margin:0 0 6px}.input,.select,.textarea{width:100%;border:1px solid #cbd5e1;border-radius:11px;padding:10px 12px;background:#fff;font:inherit;font-size:14px;color:#0f172a;outline:none}.textarea{min-height:90px;resize:vertical}.input:focus,.select:focus,.textarea:focus{border-color:#60a5fa;box-shadow:0 0 0 3px rgba(59,130,246,.1)}button,.btn{border:0;border-radius:11px;padding:10px 13px;background:#111827;color:#fff;font-size:13px;font-weight:800;cursor:pointer;text-decoration:none;display:inline-flex;align-items:center;justify-content:center;gap:7px}.btn.secondary,button.secondary{background:#fff;color:#111827;border:1px solid #cbd5e1}.btn.blue,button.blue{background:#2563eb}.btn.green,button.green{background:#16a34a}.btn.orange,button.orange{background:#f97316}.btn.danger,button.danger{background:#fff;color:#b91c1c;border:1px solid #fecaca}.btn.small,button.small{padding:7px 9px;font-size:12px}.actions{display:flex;gap:8px;flex-wrap:wrap}.drop{border:1.5px dashed #b8c5d6;border-radius:14px;padding:22px;text-align:center;background:#f8fafc}.drop strong{display:block;margin-bottom:5px}.drop p{font-size:12px;color:var(--muted);margin:5px 0 12px}.drop.drag{background:#eff6ff;border-color:#3b82f6}.radio-row{display:flex;flex-wrap:wrap;gap:14px;margin:12px 0;font-size:13px;color:#334155}.radio-row label{display:flex;align-items:center;gap:6px}.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:14px}.stat{border:1px solid var(--line);border-radius:13px;padding:12px;background:#f8fafc}.stat b{font-size:18px;display:block}.stat span{font-size:11px;color:var(--muted)}.urlbar{background:#0b1525;color:#a7f3d0;border-radius:11px;padding:11px 13px;font:12px ui-monospace,SFMono-Regular,Menlo,monospace;overflow:auto;white-space:nowrap;margin-bottom:14px}.tablewrap{overflow:auto;border:1px solid var(--line);border-radius:13px}table{width:100%;border-collapse:collapse;min-width:720px}th,td{padding:11px;border-bottom:1px solid var(--line);font-size:12px;text-align:left}th{font-size:10px;text-transform:uppercase;letter-spacing:.06em;color:#64748b;background:#f8fafc}tr:last-child td{border-bottom:0}.thumb{width:46px;height:46px;object-fit:cover;border-radius:9px;border:1px solid var(--line);background:#f1f5f9}.fileurl{max-width:430px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font:11px ui-monospace,SFMono-Regular,Menlo,monospace;color:#475569}.divider{height:1px;background:var(--line);margin:17px 0}.step{display:flex;gap:10px;align-items:flex-start;margin-bottom:14px}.stepnum{width:27px;height:27px;border-radius:9px;display:grid;place-items:center;background:#eff6ff;color:#2563eb;font-weight:900;font-size:12px;flex:0 0 auto}.framesaccent .stepnum{background:#fff7ed;color:#ea580c}.seoaccent .stepnum{background:#f0fdf4;color:#16a34a}.notice{border:1px solid #bae6fd;background:#f0f9ff;color:#0c4a6e;border-radius:12px;padding:11px 13px;font-size:12px;line-height:1.5}.notice.green{border-color:#bbf7d0;background:#f0fdf4;color:#166534}.notice.orange{border-color:#fed7aa;background:#fff7ed;color:#9a3412}.notice.red{border-color:#fecaca;background:#fef2f2;color:#991b1b}.resultgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}.resultthumb{aspect-ratio:1;border-radius:10px;overflow:hidden;border:1px solid var(--line);background:#f1f5f9}.resultthumb img{width:100%;height:100%;object-fit:cover}.choicegrid{display:grid;grid-template-columns:repeat(2,1fr);gap:8px}.choice{border:1px solid var(--line);border-radius:11px;padding:10px;background:#f8fafc;font-size:12px}.choice input{margin-right:5px}.sliderrow{display:grid;grid-template-columns:1fr 60px;gap:8px;align-items:center}.sliderrow input[type=range]{width:100%}.jobsummary{display:flex;gap:9px;flex-wrap:wrap;margin-bottom:12px}.jobsummary span{background:#f1f5f9;border-radius:999px;padding:6px 9px;font-size:11px;color:#475569}.sectiontitle{font-size:13px;font-weight:900;text-transform:uppercase;letter-spacing:.07em;color:#64748b;margin:16px 0 9px}.empty{text-align:center;color:var(--muted);padding:36px 12px}.loginwrap{min-height:100vh;display:grid;place-items:center;padding:24px;background:radial-gradient(circle at top,#172554,#07111f 56%)}.logincard{width:min(430px,100%);background:#fff;border-radius:22px;padding:30px;box-shadow:0 28px 80px rgba(0,0,0,.3)}.loginbrand{display:flex;align-items:center;gap:12px}.loginbrand img{width:56px;height:56px}.loginbrand b{font-size:21px}.loginbrand small{display:block;color:#2563eb;font-size:11px;font-weight:900;letter-spacing:.12em}.logincard h1{font-size:27px;letter-spacing:-.04em;margin:27px 0 8px}.logincard p{color:var(--muted);font-size:14px;line-height:1.5}.logincard button{width:100%;margin-top:12px;padding:12px}.errorlogin{background:#fef2f2;color:#991b1b;border:1px solid #fecaca;border-radius:10px;padding:9px 11px;font-size:13px;margin:10px 0}.rightsticky{position:sticky;top:96px;align-self:start}.hidden{display:none!important}
@media(max-width:1050px){.grid,.grid.hostgrid{grid-template-columns:1fr}.rightsticky{position:static}.tabs{overflow:auto}.tab{padding:0 14px}.topin{gap:12px}.brand b{font-size:16px}.brand small{display:none}}
@media(max-width:720px){.wrap{padding:18px 12px 40px}.topin{padding:0 12px;min-height:66px}.brand img{width:38px;height:38px}.brand b{display:none}.tab{font-size:12px;padding:0 10px}.logout{display:none}.fields2,.fields3,.formrow{grid-template-columns:1fr}.stats{grid-template-columns:1fr}.pagehead{flex-direction:column}.grid{gap:12px}.card{padding:14px}.resultgrid{grid-template-columns:repeat(2,1fr)}}

/* ===== AXIOMA Photo Tools v3.1 UI ===== */
body{background:#eef3f8}.app-shell{min-height:100vh;display:grid;grid-template-columns:250px minmax(0,1fr)}.app-main{min-width:0}.sidepanel{position:sticky;top:0;height:100vh;background:linear-gradient(180deg,#07111f 0%,#0d1a2b 100%);color:#dbe7f8;padding:18px 14px;display:flex;flex-direction:column;border-right:1px solid #1d2b41;overflow:auto;z-index:30}.sidebrand{display:flex;align-items:center;gap:10px;text-decoration:none;color:white;padding:0 8px 18px}.sidebrand img{width:46px;height:46px}.sidebrand b{display:block;font-size:20px;letter-spacing:.02em}.sidebrand small{display:block;color:#7fb1ff;font-size:10px;letter-spacing:.14em;font-weight:900}.side-create{display:block;text-align:center;text-decoration:none;background:linear-gradient(135deg,#2563eb,#3b82f6);color:#fff;padding:12px;border-radius:10px;font-weight:850;font-size:13px;box-shadow:0 8px 22px rgba(37,99,235,.25)}.side-title{font-size:10px;text-transform:uppercase;letter-spacing:.12em;color:#788aa4;font-weight:900;margin:22px 8px 9px}.side-folders{display:grid;gap:5px}.side-empty{color:#718096;font-size:12px;padding:8px}.side-folder{display:flex;align-items:center;justify-content:space-between;gap:8px;color:#d5deeb;text-decoration:none;border-radius:10px;padding:9px 10px;font-size:12px}.side-folder:hover,.side-folder.active{background:#142238;color:#fff}.side-folder>span{min-width:0}.side-folder b{font-size:12px}.side-folder small{display:block;color:#8292aa;margin:3px 0 0 23px}.side-folder em{font-size:10px;font-style:normal;color:#8ea0ba;white-space:nowrap}.side-tools{display:grid;gap:4px}.side-tools a{color:#afbdd0;text-decoration:none;padding:9px 10px;border-radius:9px;font-size:12px;font-weight:700}.side-tools a:hover,.side-tools a.active{background:#142238;color:#fff}.side-bottom{margin-top:auto;border-top:1px solid #1c2b40;padding:16px 8px 2px;display:flex;align-items:center;gap:10px}.side-bottom img{width:42px;height:42px}.side-bottom b{display:block;font-size:12px;color:#fff}.side-bottom small{font-size:10px;color:#72839b}.top{position:sticky;top:0}.topin{max-width:none;padding:0 26px;min-height:66px}.top-product{font-size:11px;color:#8091aa;border-right:1px solid #26364c;padding-right:14px}.wrap{max-width:1660px;padding:22px 28px 56px}.tabs .tab{font-size:13px}.pipeline{border-radius:12px;padding:10px 13px;margin-bottom:16px}.pagehead{margin-bottom:16px}.pagehead h1{font-size:27px}.pagehead p{font-size:13px}.badge .help{margin-left:3px}

.help{display:inline-grid!important;place-items:center;width:17px;height:17px;border-radius:50%;background:#e8eef7;color:#55708f;font-style:normal;font-size:10px;font-weight:900;cursor:help;vertical-align:1px;margin-left:4px;position:relative;outline:none}.help:hover,.help:focus{background:#dbeafe;color:#1d4ed8}.help:after{content:attr(data-tip);position:absolute;left:50%;bottom:calc(100% + 9px);transform:translateX(-50%) translateY(4px);width:260px;max-width:70vw;padding:9px 11px;border-radius:9px;background:#07111f;color:#e5edf8;font-size:11px;font-weight:500;line-height:1.45;box-shadow:0 10px 30px rgba(2,8,23,.3);opacity:0;visibility:hidden;pointer-events:none;transition:.15s;z-index:200;text-align:left;white-space:normal}.help:before{content:"";position:absolute;left:50%;bottom:calc(100% + 4px);transform:translateX(-50%);border:5px solid transparent;border-top-color:#07111f;opacity:0;visibility:hidden;z-index:201}.help:hover:after,.help:focus:after,.help:hover:before,.help:focus:before{opacity:1;visibility:visible;transform:translateX(-50%) translateY(0)}

.flowsteps{display:grid;grid-template-columns:1fr auto 1fr auto 1fr auto 1fr auto 1fr;align-items:center;background:#fff;border:1px solid var(--line);border-radius:14px;padding:11px 16px;margin-bottom:16px;box-shadow:0 5px 18px rgba(15,23,42,.035)}.flowsteps>span{color:#a4b1c2;font-size:20px}.flowstep{display:grid;grid-template-columns:32px 1fr;column-gap:9px;align-items:center;min-width:0}.flowstep i{grid-row:1/3;width:32px;height:32px;border-radius:50%;display:grid;place-items:center;background:#edf2f8;color:#65758b;font-style:normal;font-size:12px;font-weight:900}.flowstep b{font-size:11px;color:#253247;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.flowstep small{font-size:9px;color:#8492a6}.flowstep.active i{background:#e7f0ff;color:#2563eb}.flowstep.active b{color:#2563eb}
.frames-workspace{display:grid;grid-template-columns:minmax(290px,1fr) minmax(300px,1fr) minmax(300px,.9fr);gap:14px;align-items:start}.frames-col{display:grid;gap:14px}.frame-card{margin:0!important;position:relative;padding:16px}.frame-card h2,.preview-card h2,.result-card h2{font-size:15px;margin:0 0 13px;padding-right:22px}.card-kicker{position:absolute;right:14px;top:13px;width:25px;height:25px;border-radius:8px;background:#fff2e8;color:#ea580c;display:grid;place-items:center;font-size:11px;font-weight:900}.upload-hero{padding:22px 15px;border-radius:13px;background:#fbfdff}.upload-icon{width:44px;height:44px;border-radius:50%;margin:0 auto 8px;display:grid;place-items:center;font-size:25px;color:#2563eb;background:#eaf2ff}.upload-hero strong{font-size:13px}.upload-hero p{max-width:430px;margin:6px auto 13px;line-height:1.45}.filepick{display:inline-flex;align-items:center;justify-content:center;border-radius:9px;background:#2563eb;color:#fff;padding:9px 14px;font-size:12px;font-weight:850;cursor:pointer}.upload-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:7px;margin-top:10px}.upload-stats>div{border:1px solid var(--line);background:#f8fafc;border-radius:10px;padding:8px 10px}.upload-stats b{display:block;font-size:15px}.upload-stats span{font-size:9px;color:#7d8ba0}.upload-detail{font-size:10px;color:#627187;margin-top:8px;min-height:16px;line-height:1.45}.sectionlabel{font-size:11px;font-weight:850;color:#42536a;margin:12px 0 7px}.mode-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:7px}.mode-card{position:relative;border:1px solid var(--line);border-radius:11px;padding:10px 8px;background:#f8fafc;cursor:pointer;min-height:76px}.mode-card input{position:absolute;right:7px;top:7px}.mode-card b{display:block;font-size:11px;margin-bottom:4px}.mode-card small{display:block;font-size:9px;line-height:1.35;color:#7a899d}.mode-card:has(input:checked){border-color:#3b82f6;box-shadow:0 0 0 2px rgba(59,130,246,.08);background:#f5f9ff}.mode-card.smart:has(input:checked){border-color:#8b5cf6;background:#faf7ff}.bg-options{display:grid;grid-template-columns:repeat(4,1fr);gap:6px}.bg-options label{display:flex;align-items:center;gap:6px;border:1px solid var(--line);background:#f8fafc;border-radius:9px;padding:8px 7px;font-size:9px;cursor:pointer}.bg-options label:has(input:checked){border-color:#60a5fa;background:#eff6ff}.bg-options input{display:none}.swatch{width:17px;height:17px;border-radius:5px;border:1px solid #cbd5e1;flex:0 0 auto}.swatch.white{background:white}.swatch.black{background:#111827}.swatch.transparent{background:linear-gradient(45deg,#ddd 25%,transparent 25%),linear-gradient(-45deg,#ddd 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#ddd 75%),linear-gradient(-45deg,transparent 75%,#ddd 75%);background-size:8px 8px;background-position:0 0,0 4px,4px -4px,-4px 0}.swatch.blur{background:linear-gradient(135deg,#8b5cf6,#38bdf8,#f59e0b);filter:blur(.3px)}.no-frame{display:block;border:1px solid var(--line);background:#f8fafc;border-radius:10px;padding:9px 10px;font-size:11px;margin-bottom:10px}.template-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:7px}.template-card{position:relative;border:1px solid var(--line);border-radius:10px;padding:6px;background:#fff;cursor:pointer}.template-card input{position:absolute;right:6px;top:6px;z-index:2}.template-card img{display:block;width:100%;aspect-ratio:1;object-fit:contain;background:#f8fafc;border-radius:7px}.template-card span{display:block;font-size:9px;margin-top:5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.template-card:has(input:checked){border-color:#3b82f6;box-shadow:0 0 0 2px rgba(59,130,246,.08)}.frame-file-status{font-size:10px;color:#65758b;margin-top:6px}.preview-col{position:sticky;top:84px}.preview-card,.result-card,.tips-card{margin:0!important}.preview-head{display:flex;align-items:flex-start;justify-content:space-between;gap:10px}.preview-head small{color:#7b8aa0;font-size:10px}.live-dot{font-size:8px;font-weight:900;color:#16a34a;background:#ecfdf5;border:1px solid #bbf7d0;border-radius:999px;padding:4px 6px}.preview-stage{min-height:315px;border:1px solid var(--line);background:linear-gradient(145deg,#f8fafc,#eef3f8);border-radius:12px;padding:10px;display:grid;gap:8px;grid-template-columns:1fr;align-content:center}.preview-empty{text-align:center;color:#7c8ba0;display:grid;place-items:center;gap:5px;padding:35px 12px}.preview-empty-icon{font-size:38px;color:#c0cbd8}.preview-empty b{font-size:12px;color:#526176}.preview-empty span{font-size:9px}.preview-sample{position:relative;border:1px solid #d7e0eb;border-radius:10px;overflow:hidden;background:#fff;min-height:92px}.preview-sample canvas{display:block;width:100%;height:auto;max-height:210px;object-fit:contain;background:#f8fafc}.preview-sample label{position:absolute;left:6px;bottom:6px;max-width:calc(100% - 12px);background:rgba(7,17,31,.78);color:#fff;padding:4px 6px;border-radius:6px;font-size:8px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.preview-stage.three{grid-template-columns:repeat(3,1fr);align-items:start}.preview-stage.three .preview-sample canvas{aspect-ratio:1;object-fit:contain}.preview-message{font-size:9px;color:#66778d;margin-top:7px;line-height:1.4}.result-metrics{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin-bottom:10px}.result-metrics>div{background:#f8fafc;border:1px solid var(--line);border-radius:9px;padding:8px}.result-metrics b{display:block;font-size:16px}.result-metrics span{font-size:8px;color:#7b8a9e}.resultgrid.compact{grid-template-columns:repeat(3,1fr);gap:5px}.resultgrid.compact .resultthumb{border-radius:7px}.result-placeholder{border:1px dashed #c9d4e1;border-radius:11px;padding:20px;text-align:center;color:#7c8ba0;margin-bottom:12px}.result-placeholder b{display:block;color:#506077;font-size:11px;margin-bottom:4px}.result-placeholder span{font-size:9px}.process-main{width:100%;font-size:12px;padding:11px;margin-top:10px;background:linear-gradient(135deg,#f97316,#fb8b24)}.process-main:disabled{opacity:.5;cursor:not-allowed}.result-action{width:100%;margin-top:7px;font-size:11px}.upload-progress{margin-top:10px}.upload-progress>div{height:7px;border-radius:999px;background:#e4eaf2;overflow:hidden}.upload-progress>div span{display:block;height:100%;width:0;background:linear-gradient(90deg,#2563eb,#8b5cf6);transition:width .2s}.upload-progress small{display:block;margin-top:5px;font-size:9px;color:#65758b}.tips-card{background:#f6f9fd}.tips-card h3{font-size:11px}.tips-card p{font-size:9px;line-height:1.5;color:#65758b;margin:7px 0}.publish-strip{margin-top:14px!important;display:flex;align-items:end;justify-content:space-between;gap:20px}.publish-strip h2{margin-bottom:4px}.publish-strip p{font-size:11px;color:#68788e;margin:0}.publish-inline{display:grid;grid-template-columns:180px 150px auto;gap:8px;align-items:end}.publish-inline .field span{font-size:9px}.publish-inline .input,.publish-inline .select{padding:9px 10px;font-size:11px}

@media(max-width:1280px){.app-shell{grid-template-columns:210px minmax(0,1fr)}.frames-workspace{grid-template-columns:1fr 1fr}.preview-col{grid-column:1/-1;position:static;grid-template-columns:1.2fr .8fr;display:grid}.tips-card{grid-column:1/-1}.preview-stage{min-height:250px}.side-folder em{display:none}.side-folder small{margin-left:0}.top-product{display:none}}
@media(max-width:960px){.app-shell{grid-template-columns:1fr}.sidepanel{display:none}.frames-workspace{grid-template-columns:1fr}.preview-col{grid-column:auto;display:grid;grid-template-columns:1fr;position:static}.flowsteps{grid-template-columns:1fr auto 1fr auto 1fr}.flowstep:nth-of-type(4),.flowstep:nth-of-type(5),.flowsteps>span:nth-of-type(n+3){display:none}.topin{padding:0 14px}.wrap{padding:18px 14px 40px}.publish-strip{display:block}.publish-inline{grid-template-columns:1fr;margin-top:12px}}
@media(max-width:620px){.flowsteps{display:none}.mode-cards{grid-template-columns:1fr}.bg-options{grid-template-columns:repeat(2,1fr)}.preview-stage.three{grid-template-columns:1fr}.template-grid{grid-template-columns:repeat(2,1fr)}.upload-stats{grid-template-columns:1fr 1fr 1fr}.topin{min-height:58px}.tabs .tab{font-size:11px;padding:0 8px}.wrap{padding-top:14px}}


/* v3.1.1 branding hotfix: favicon can never stretch the application layout */
.brandmark{display:inline-block!important;width:46px!important;height:46px!important;min-width:46px!important;max-width:46px!important;min-height:46px!important;max-height:46px!important;flex:0 0 46px!important;background:url("favicon.svg?v=311") center/contain no-repeat!important;border-radius:12px!important;overflow:hidden!important}
.brandmark-small{width:42px!important;height:42px!important;min-width:42px!important;max-width:42px!important;min-height:42px!important;max-height:42px!important;flex-basis:42px!important}
.loginbrand .brandmark{width:56px!important;height:56px!important;min-width:56px!important;max-width:56px!important;min-height:56px!important;max-height:56px!important;flex-basis:56px!important}
.sidebrand>img,.side-bottom>img,.loginbrand>img{width:46px!important;height:46px!important;max-width:46px!important;max-height:46px!important;object-fit:contain!important}
@media(max-width:720px){.brandmark{width:38px!important;height:38px!important;min-width:38px!important;max-width:38px!important;min-height:38px!important;max-height:38px!important;flex-basis:38px!important}}


/* ===== v3.2 production polish ===== */
.frames-workspace,.frames-col,.frame-card,.preview-col,.field,.fields2,.mode-card{min-width:0}
.frames-workspace{grid-template-columns:minmax(340px,1.02fr) minmax(340px,1fr) minmax(350px,.96fr);gap:18px}
.frame-card{padding:18px}.frame-card h2,.preview-card h2,.result-card h2{font-size:16px;line-height:1.25;overflow-wrap:anywhere}
.fields2{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:12px}.input,.select{min-width:0}
.field span,.label,.sectionlabel,.mode-card b,.mode-card small,.choice,.no-frame,.bg-options label{overflow-wrap:anywhere;word-break:normal}
.mode-card{padding:12px 10px;min-height:92px}.mode-card b{font-size:12px;padding-right:20px}.mode-card small{font-size:10px}
.bg-options{grid-template-columns:repeat(2,minmax(0,1fr))}.bg-options label{font-size:10px;min-height:40px}
.sliderrow{grid-template-columns:minmax(0,1fr) 58px}.sliderrow .input{text-align:center;padding-left:5px;padding-right:5px}
.filename-example{margin-top:10px}.filename-example .input{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;background:#f8fafc;color:#334155}
.name-mode-row{margin-bottom:10px}.future-actions{margin-top:4px}.future-actions button:disabled{opacity:.5;cursor:not-allowed}.future-actions small{display:block;color:#8492a6;font-size:9px;line-height:1.4;margin-top:6px;text-align:center}
.progress-copy{display:flex;justify-content:space-between;gap:12px;align-items:flex-start;margin-top:6px}.progress-copy small{margin:0}.progress-copy [data-progress-time]{text-align:right;white-space:nowrap;color:#475569}
.upload-progress>div{height:9px}.upload-progress>div span{transition:width .25s ease}
.preview-stage{min-height:330px}.preview-stage.three{grid-template-columns:repeat(3,minmax(0,1fr))}.preview-sample{min-width:0}.preview-sample label{font-size:9px}
.help{flex:0 0 auto}.field>span,.sectionlabel,.label{line-height:1.35}
@media(max-width:1500px){.frames-workspace{grid-template-columns:minmax(310px,1fr) minmax(310px,1fr) minmax(330px,.92fr);gap:14px}.frame-card{padding:16px}.mode-card{min-height:96px}}
@media(max-width:1250px){.frames-workspace{grid-template-columns:1fr 1fr}.preview-col{grid-column:1/-1;grid-template-columns:minmax(0,1.2fr) minmax(320px,.8fr)}}
@media(max-width:820px){.frames-workspace{grid-template-columns:1fr}.preview-col{grid-column:auto;grid-template-columns:1fr}.fields2{grid-template-columns:1fr}.progress-copy{display:block}.progress-copy [data-progress-time]{text-align:left;margin-top:4px}}
/* v3.3 flow spacing */
.flowsteps{grid-template-columns:minmax(0,1fr) 52px minmax(0,1fr) 52px minmax(0,1fr) 52px minmax(0,1fr) 52px minmax(0,1fr);column-gap:0}
.flow-arrow{width:52px;display:grid;place-items:center;justify-self:center;color:#9aa9bc!important;font-size:17px!important;line-height:1}
@media(max-width:960px){.flowsteps{grid-template-columns:minmax(0,1fr) 42px minmax(0,1fr) 42px minmax(0,1fr)}.flow-arrow{width:42px}}

/* v3.5 SEO metadata verification */
.seo-proof{display:flex;flex-wrap:wrap;gap:7px;align-items:center;margin:12px 0 14px;padding:10px 12px;border:1px solid #bbf7d0;background:#f0fdf4;border-radius:12px;color:#166534;font-size:12px}
.seo-proof b{margin-right:3px}.seo-proof span{font-weight:800;background:#dcfce7;border:1px solid #86efac;border-radius:999px;padding:4px 8px}.seo-proof small{color:#475569;background:#fff;border:1px solid #dbe4ee;border-radius:999px;padding:4px 8px}