:root{color-scheme:light;--blue:#0000EE;--black:#101010;--cyan:#19BCC9;--cyan-2:#19BDC9;--dark:#1A2128;--dark2:#252525;--dark3:#2F3137;--dark4:#313131;--dark5:#35393F;--blue-soft:#37AEE2;--dark6:#434343;--green:#51C48A;--muted-dark:#555555;--cornflower:#6890E4;--muted:#69737D;--slate-blue:#6D64BB;--slate:#6E7781;--violet:#735FF2;--gray:#808080;--olive:#8FAE4F;--gray-2:#999999;--gray-3:#9E9EA4;--silver:#AFB8C1;--silver-2:#BBBBBB;--lavender:#C7BEFF;--rose:#CD7D74;--border:#D0D7DE;--danger:#E8485E;--danger-2:#EB5757;--bg:#F5F7FA;--salmon:#F7987C;--surface-soft:#F7F8FA;--warning:#FFC77E;--surface:#FFFFFF;--text:#101010;--radius:18px;--shadow:0 10px 30px rgba(16,16,16,.07)}*{box-sizing:border-box}html,body{margin:0;min-width:320px;background:var(--bg);color:var(--text);font-family:Inter,Roboto,Arial,sans-serif}button,input,textarea,select{font:inherit}button{cursor:pointer}a{color:inherit;text-decoration:none}.shell{min-height:100vh;display:grid;grid-template-columns:clamp(190px,17vw,250px) minmax(0,1fr)}aside{position:sticky;top:0;height:100vh;background:var(--black);padding:24px 18px;color:#F5F7FA;display:flex;flex-direction:column}.brand-lockup{display:flex;align-items:center;gap:12px}.brand-lockup>span{width:42px;height:42px;display:grid;place-items:center;background:var(--cyan);color:#101010;border-radius:12px;font-weight:950}.brand-lockup b,.brand-lockup small{display:block}.brand-lockup small{color:#AFB8C1;font-size:11px;margin-top:3px}aside nav{display:grid;gap:6px;margin-top:32px}aside nav button{border:0;background:transparent;color:#AFB8C1;padding:11px 12px;border-radius:12px;text-align:left;font-weight:700}aside nav button:hover,aside nav button.active{background:#252525;color:white}.userbox{margin-top:auto;padding-top:18px;border-top:1px solid #35393F}.userbox b,.userbox small{display:block}.userbox small{color:#999;margin:4px 0 12px}.userbox button{background:none;border:0;color:#AFB8C1;padding:0}.appbar{height:56px;background:#fff;border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;padding:0 28px;font-size:13px;color:var(--muted)}.api-state{padding:6px 10px;border-radius:999px;background:#F7F8FA;border:1px solid var(--border)}.container{max-width:1720px;margin:0 auto;padding:clamp(18px,2.2vw,30px) clamp(14px,2.2vw,28px) 60px}.pagehead,.project-head{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-start;gap:16px 24px;margin-bottom:24px}.pagehead>div:first-child,.project-head>div:first-child{min-width:0;flex:1 1 320px}.pagehead>div+div,.project-head>div+div{display:flex;flex-wrap:wrap;gap:10px;flex:0 0 auto}.pagehead h1,.project-head h1{font-size:34px;line-height:1.05;margin:6px 0 8px;letter-spacing:-.035em}.pagehead p,.project-head p{margin:0;color:var(--muted)}.eyebrow{font-size:11px;letter-spacing:.14em;font-weight:900;color:var(--cyan)}.btn{border:1px solid transparent;border-radius:12px;padding:10px 14px;font-weight:800;display:inline-flex;align-items:center;justify-content:center;gap:8px;white-space:nowrap;flex:0 0 auto}.btn.primary{background:var(--black);color:white}.btn.primary:hover{background:var(--dark2)}.btn.secondary{background:white;color:var(--text);border-color:var(--border)}.btn.ghost{background:transparent;border-color:transparent;color:var(--muted)}.btn.danger{background:#fff;color:var(--danger);border-color:#f1b4b4}.toolbar{display:flex;flex-wrap:wrap;align-items:center;gap:12px;background:white;border:1px solid var(--border);padding:14px;border-radius:var(--radius);margin-bottom:18px}.toolbar>input{flex:1 1 240px;min-width:0}.toolbar>select{flex:1 1 170px;min-width:0;max-width:230px}.toolbar input,.toolbar select,input,select,textarea{width:100%;border:1px solid var(--border);border-radius:12px;padding:11px 12px;background:white;color:var(--text);outline:none}.toolbar input:focus,.toolbar select:focus,input:focus,select:focus,textarea:focus{border-color:var(--cyan);box-shadow:0 0 0 3px rgba(25,188,201,.12)}label{display:grid;gap:7px;font-size:13px;font-weight:800;color:#35393F}label em{font-style:normal;font-weight:500;color:var(--muted)}.project-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(310px,1fr));gap:16px}.project{background:white;border:1px solid var(--border);border-radius:var(--radius);padding:18px;box-shadow:var(--shadow);transition:.2s}.project:hover{transform:translateY(-2px);border-color:#AFB8C1}.project-top,.stage-row,.project-meta,.panel-tools,.dialog-head,.live-title{display:flex;align-items:center;justify-content:space-between;gap:12px}.project h3{margin:18px 0 6px;font-size:18px}.project p{margin:0 0 18px;color:var(--muted);font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.stage-row{font-size:12px;margin-bottom:8px}.project-meta{margin-top:14px;color:var(--muted);font-size:11px}.progress{position:relative;height:6px;background:#E8ECEF;border-radius:99px}.progress i{display:block;position:relative;height:100%;background:linear-gradient(90deg,var(--cyan),var(--blue));border-radius:99px;overflow:hidden;transition:width .7s cubic-bezier(.3,.8,.3,1)}.badge{display:inline-flex;padding:5px 8px;border-radius:999px;font-size:10px;font-weight:900;background:#EEF1F3;color:#555}.badge.processing,.badge.queued{background:#E9F8FA;color:#157985}.badge.review{background:#FFF5E6;color:#9B681A}.badge.approved,.badge.done{background:#E8F8F0;color:#14784A}.badge.error,.badge.changes_requested,.badge.cancelled{background:#FDECEC;color:#B42D2D}.badge.neutral{background:#F2F4F6;color:#555}.live-card,.panel,.metrics>div,.metric{background:white;border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow)}.live-card{padding:18px;margin-bottom:16px}.live-title{margin-bottom:10px}.pulse{display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--cyan);margin-right:8px;box-shadow:0 0 0 5px rgba(25,188,201,.12)}.live-card small{display:block;margin-top:9px;color:var(--muted)}.metrics{display:grid;grid-template-columns:repeat(auto-fit,minmax(148px,1fr));gap:12px;margin-bottom:18px}.metrics>div{padding:16px;display:flex;flex-direction:column;min-width:0}.metrics small,.summary-grid small{display:block;color:var(--muted);font-size:11px;margin-bottom:8px}.metrics b{font-size:17px;margin-top:auto;overflow-wrap:break-word}.metrics.large{grid-template-columns:repeat(auto-fit,minmax(168px,1fr))}.tabs,.subtabs{display:flex;gap:6px;border-bottom:1px solid var(--border);margin-bottom:18px}.tabs button,.subtabs button{border:0;background:none;padding:11px 13px;color:var(--muted);font-weight:800;border-bottom:2px solid transparent}.tabs button.active,.subtabs button.active{color:var(--text);border-color:var(--cyan)}.panel{padding:22px}.summary-grid,.three{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:14px;margin-bottom:24px}.summary-grid>div{background:#F7F8FA;padding:16px;border:1px solid var(--border);border-radius:14px}.summary-grid h3{margin:0}.timeline{display:grid}.timeline>div{display:grid;grid-template-columns:165px 220px 1fr;gap:16px;padding:13px 0;border-bottom:1px solid #E9EDF0;font-size:13px}.timeline time{color:var(--muted)}.preview{height:72vh;border:1px solid var(--border);border-radius:14px;overflow:auto;background:#fff}.preview iframe{width:100%;min-height:100%;height:100%;border:0}.code{width:100%;min-height:72vh;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:12px;line-height:1.55;background:#101010;color:#F5F7FA;border:0;border-radius:14px;padding:18px}.panel-tools{margin-bottom:14px}.panel-tools select{max-width:340px}.media-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(270px,1fr));gap:16px}.media-card{background:white;border:1px solid var(--border);border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow)}.media-image{aspect-ratio:16/10;background:#EEF1F3;display:grid;place-items:center;overflow:hidden}.media-image img{width:100%;height:100%;object-fit:cover}.media-card>div:last-child{padding:16px}.media-card h3{margin:10px 0 4px}.media-card p,.media-card small{color:var(--muted)}.media-actions{display:flex;gap:8px;margin-top:14px}.review-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:10px;margin:14px 0}.check{display:flex;align-items:center;gap:8px;font-weight:700}.check input{width:auto}.style-shell{display:grid;grid-template-columns:minmax(0,240px) minmax(0,1fr);gap:18px}.style-list{display:grid;align-content:start;gap:8px}.style-list button{padding:13px;border:1px solid var(--border);background:white;border-radius:13px;text-align:left}.style-list button b,.style-list button small{display:block}.style-list button small{margin-top:4px;color:var(--muted)}.style-list button.active{border-color:var(--cyan);box-shadow:0 0 0 3px rgba(25,188,201,.1)}.style-preview{background:#F7F8FA;border:1px solid var(--border);border-radius:14px;padding:18px}.form-grid,.two{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:14px}fieldset{border:1px solid var(--border);border-radius:14px;padding:14px}legend{font-weight:900;font-size:12px}.table-wrap{overflow:auto}table{width:100%;border-collapse:collapse}th,td{text-align:left;padding:13px;border-bottom:1px solid #E8ECEF;font-size:13px}td small{display:block;color:var(--muted);margin-top:3px}.model-list{display:flex;flex-wrap:wrap;gap:8px}.model-list code{background:#F7F8FA;border:1px solid var(--border);border-radius:8px;padding:7px 9px}.empty{padding:44px;text-align:center;color:var(--muted);background:white;border:1px dashed var(--border);border-radius:var(--radius)}dialog{width:min(760px,calc(100vw - 32px));border:0;border-radius:20px;padding:0;box-shadow:0 30px 100px rgba(0,0,0,.25)}dialog::backdrop{background:rgba(16,16,16,.45);backdrop-filter:blur(4px)}dialog form{padding:24px;display:grid;gap:16px}.dialog-head button{border:0;background:#F2F4F6;border-radius:10px;width:34px;height:34px}.auth{position:relative;min-height:100vh;display:grid;place-items:center;align-content:center;gap:24px;overflow:hidden;background:radial-gradient(120% 90% at 50% 42%,#1B222A 0%,#12171C 48%,#0D1013 100%)}.auth form{position:relative;z-index:1;width:min(430px,calc(100vw - 32px));background:#fff;border-radius:24px;padding:34px;display:grid;gap:16px;box-shadow:0 30px 100px rgba(0,0,0,.35);animation:bootFade .7s ease .2s both}.auth h1{margin:12px 0 0;font-size:30px}.auth p{margin:0;color:var(--muted)}.toast{position:fixed;right:22px;bottom:22px;background:#101010;color:#fff;padding:12px 16px;border-radius:12px;z-index:9999}.toast.bad{background:var(--danger)}.link{border:0;background:none;padding:0;color:var(--cyan);font-weight:800}.row{display:flex;gap:10px}.back{border:0;background:none;color:var(--cyan)}@media(max-width:1100px){.style-shell{grid-template-columns:1fr}.style-list{grid-template-columns:repeat(3,1fr)}}@media(max-width:760px){.shell{display:block}aside{position:static;height:auto}.appbar{display:none}.container{padding:20px 14px}.pagehead,.project-head{display:grid}.metrics,.metrics.large,.form-grid,.two,.summary-grid{grid-template-columns:1fr}.toolbar>select{max-width:none;flex-basis:100%}.style-list{grid-template-columns:1fr}.timeline>div{grid-template-columns:1fr;gap:4px}.tabs,.subtabs{overflow:auto}.preview{height:68vh}}

.media-toolbar b{margin-left:auto}.asset-detail-image{border:1px solid var(--border);border-radius:16px;overflow:hidden;background:var(--surface-soft);max-height:52vh;display:grid;place-items:center}.asset-detail-image img{display:block;max-width:100%;max-height:52vh;object-fit:contain}.issue-list{display:grid;gap:8px;margin:14px 0 20px}.issue-list>div{padding:11px 13px;border-radius:12px;background:#FFF6E8;border:1px solid var(--warning);color:#6D4A14;font-size:13px}.version-list{display:flex;gap:8px;overflow:auto;margin:14px 0 20px}.version-list button{min-width:110px;padding:10px;border-radius:12px;border:1px solid var(--border);background:var(--surface);text-align:left}.version-list button b,.version-list button small{display:block}.version-list button small{margin-top:4px;color:var(--muted)}dialog#assetDetails form{max-height:90vh;overflow:auto}.panel h2+ .model-list{margin-bottom:24px}@media(max-width:760px){.media-toolbar b{margin-left:0}.row{flex-wrap:wrap}}

/* v11.2 critical fixes */
.brand-lockup img{width:168px;height:auto;display:block;filter:none}.brand-lockup small{display:block;margin-top:8px;color:#9E9EA4;font-size:11px;letter-spacing:.12em;text-transform:uppercase}.auth-logo{position:relative;z-index:1;width:190px;height:auto;margin:0;animation:bootLogo .95s cubic-bezier(.22,1,.36,1) both}.preview{height:72vh;overflow:auto;overscroll-behavior:contain;scrollbar-gutter:stable;background:#fff}.preview iframe{width:100%;height:auto;min-height:720px;border:0;display:block}.pagehead>div+div,.project-head>div+div,.panel-tools,.media-actions,.review-actions{display:flex;align-items:center;gap:10px;flex-wrap:wrap}.panel-tools{justify-content:space-between}.review-actions{justify-content:flex-end;margin-top:16px}.btn:disabled{opacity:.55;cursor:not-allowed}.dialog-head{margin-bottom:2px}.panel form,.panel label+label{margin-top:14px}.media-actions .btn{min-width:104px}.row{align-items:center;flex-wrap:wrap}.auth form{gap:18px}.auth .btn{margin-top:4px}@media(max-width:760px){.brand-lockup img{width:145px}.preview{height:68vh}.pagehead>div+div,.project-head>div+div{width:100%}.pagehead>div+div .btn,.project-head>div+div .btn{flex:1}}
.preview{height:72vh;overflow:hidden}.preview iframe{width:100%;height:100%;min-height:0;border:0;display:block}.asset-detail-image{display:grid;place-items:center;min-height:260px;max-height:52vh;overflow:auto;border:1px solid var(--border);border-radius:14px;background:var(--surface-soft)}.asset-detail-image img{display:block;max-width:100%;max-height:50vh;object-fit:contain}@media(max-width:760px){.preview{height:68vh}}

/* v11.4: light preview workspace and cards/list project views */
.project-toolbar .view-switch{margin-left:auto}
.view-switch{display:inline-flex;padding:4px;border:1px solid var(--border);border-radius:12px;background:var(--surface-soft);white-space:nowrap}
.view-switch button{border:0;border-radius:8px;padding:7px 10px;background:transparent;color:var(--muted);font-size:12px;font-weight:850}
.view-switch button.active{background:var(--surface);color:var(--text);box-shadow:0 1px 4px rgba(16,16,16,.1)}
.project-grid.list-view{grid-template-columns:1fr;gap:10px}
.list-view .project{display:grid;grid-template-columns:150px minmax(240px,1.7fr) minmax(190px,1fr) minmax(210px,.85fr);grid-template-areas:"top title stage meta" "top url bar meta" "top style bar meta";gap:5px 20px;align-items:center;padding:15px 18px}
.list-view .project-style{grid-area:style;margin-top:2px}
.list-view .project:hover{transform:none;background:var(--surface-soft)}
.list-view .project-top{grid-area:top;display:grid;justify-items:start;gap:8px}
.list-view .project h3{grid-area:title;margin:0;font-size:16px}
.list-view .project p{grid-area:url;margin:0;max-width:100%}
.list-view .stage-row{grid-area:stage;margin:0}
.list-view .progress{grid-area:bar}
.list-view .project-meta{grid-area:meta;margin:0;display:grid;grid-template-columns:1fr auto;gap:7px 14px;justify-content:stretch}
.list-view .project-meta span:first-child{grid-column:1/-1}
.preview-panel{background:var(--surface);overflow:hidden}
.preview-hint{margin-left:auto;color:var(--muted);font-size:12px;font-weight:750}
.preview-stage{height:72vh;overflow:auto;padding:22px;background:linear-gradient(145deg,#F5F7FA,#EAEEF2);border:1px solid var(--border);border-radius:14px;scrollbar-gutter:stable;overscroll-behavior:contain}
.preview-canvas{height:100%;min-height:680px;margin:0 auto;background:#fff;border:1px solid #D0D7DE;border-radius:12px;overflow:hidden;box-shadow:0 14px 40px rgba(16,16,16,.09)}
.preview-canvas.desktop{width:min(100%,1240px)}
.preview-canvas.mobile{width:min(100%,480px)}
.preview-canvas iframe{display:block;width:100%;height:100%;border:0;background:#fff}
.code{background:#fff;color:#1A2128;border:1px solid var(--border);box-shadow:inset 0 1px 2px rgba(16,16,16,.04)}
@media(max-width:1100px){.list-view .project{grid-template-columns:130px minmax(220px,1fr) minmax(180px,.8fr);grid-template-areas:"top title stage" "top url bar" "top style bar" "top meta meta"}.list-view .project-meta{display:flex;margin-top:5px}}
@media(max-width:760px){.project-toolbar .view-switch{margin-left:0;width:100%}.list-view .project{display:block}.list-view .project-top,.list-view .project-meta{display:flex}.list-view .project h3{margin:16px 0 6px}.list-view .project p{margin-bottom:16px}.list-view .stage-row{margin-bottom:8px}.preview-stage{height:68vh;padding:10px}.preview-hint{display:none}}

/* v11.5: project interaction, source navigation and style autosave */
.project{cursor:pointer;user-select:none;-webkit-user-select:none}
.project:focus-visible{outline:3px solid rgba(25,188,201,.25);outline-offset:2px;border-color:var(--cyan)}
.project-style{margin-top:12px;color:var(--muted);font-size:11px;display:flex;align-items:center;flex-wrap:wrap;gap:4px 7px;min-width:0}
.project-style b{color:var(--text);min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.source-link{display:inline-flex;max-width:min(780px,70vw);color:var(--muted);font-size:13px;line-height:1.4;text-decoration:none;overflow-wrap:anywhere}
.source-link:hover{color:var(--cyan);text-decoration:underline}
.project-metrics{grid-template-columns:repeat(auto-fit,minmax(150px,1fr))}
.project-metrics b{overflow-wrap:anywhere}
.dialog-note{margin:0;padding:12px 14px;border-radius:12px;background:var(--surface-soft);border:1px solid var(--border);color:var(--muted);font-size:13px;line-height:1.55}
/* Панелі в колонці стилів - не прямі діти .container, тож правило
   .container>section{margin-bottom} на них не діє. У вкладці «Якість» їх кілька
   поспіль, і без цього вони злипались. Даємо той самий вертикальний ритм. */
.style-shell>div>section+section{margin-top:16px}
/* Групи в списку стилів: «Rich-контент» і «Лендінги» - щоб не губитись у купі. */
.style-group{display:block;margin:14px 4px 6px;color:var(--muted);font-size:11px;font-weight:900;letter-spacing:.08em;text-transform:uppercase}
.style-group:first-child{margin-top:2px}
/* Контекстна шапка редактора стилю: що це за стиль і чим ризикуєш, редагуючи. */
.style-context{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:12px 16px;margin-bottom:12px;background:var(--surface-soft);border:1px solid var(--border);border-radius:14px}
.style-context b{font-size:15px}
.style-context small{display:block;color:var(--muted);margin-top:2px}
.style-context .row{align-items:center;gap:10px}
.style-context+.critic-note{margin:0 0 12px}
@media(max-width:760px){.style-context{flex-direction:column;align-items:stretch}}
/* Схема сітки стилю: wireframe секцій із промпта, десктоп і мобайл поруч. */
.bp-wrap{display:flex;gap:18px;align-items:flex-start}
.bp-canvas{flex:1.7;display:flex;flex-direction:column;gap:7px;background:var(--surface-soft);border:1px solid var(--border);border-radius:14px;padding:14px}
.bp-canvas>b{font-size:12px;color:var(--muted);letter-spacing:.05em;text-transform:uppercase;margin-bottom:2px}
.bp-mobile{flex:0 0 220px}
.bp-block{border-radius:8px;padding:8px 10px;background:#FFFFFF;border:1px solid var(--border)}
.bp-block small{display:block;font-size:10px;font-weight:900;letter-spacing:.04em;color:var(--muted);margin-bottom:6px;text-transform:uppercase;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bp-block.dark{background:#1A2128;border-color:#35393F}
.bp-block.dark small{color:#8FD8DE}
.bp-cols{display:grid;gap:5px}
.bp-cols i{display:block;height:26px;border-radius:4px;background:rgba(16,16,16,.07)}
.bp-block.dark .bp-cols i{background:rgba(255,255,255,.1)}
.bp-cols i.ph{background:linear-gradient(135deg,rgba(25,188,201,.35) 0 38%,rgba(16,16,16,.12) 38%);position:relative}
.bp-block.dark .bp-cols i.ph{background:linear-gradient(135deg,rgba(25,188,201,.5) 0 38%,rgba(255,255,255,.12) 38%)}
.bp-mobile .bp-cols i{height:18px}
@media(max-width:900px){.bp-wrap{flex-direction:column}.bp-mobile{flex:1;width:100%}}
/* Оглавлення секцій промпта: клік — стрибок до секції в textarea. */
.prompt-outline{display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin-bottom:10px}
.prompt-outline .eyebrow{margin-right:4px}
.prompt-outline button{border:1px solid var(--border);background:var(--surface);border-radius:999px;padding:6px 11px;font-size:12px;font-weight:800;cursor:pointer;transition:.15s}
.prompt-outline button:hover{border-color:var(--cyan);color:#157985}
/* Пресети кольорових схем: чіпи з трьома крапками палітри. */
.palette-presets{margin:12px 0}
.preset-chip{display:inline-flex;align-items:center;gap:5px;border:1px solid var(--border);border-radius:999px;background:var(--surface);padding:8px 12px;font-weight:800;font-size:13px;cursor:pointer;transition:.15s}
.preset-chip:hover{border-color:var(--cyan)}
.preset-chip i{width:14px;height:14px;border-radius:999px;border:1px solid rgba(0,0,0,.08)}
.preset-chip b{margin-left:4px;color:var(--muted);font-weight:900}
.preset-chip b:hover{color:var(--danger)}
/* Кольорова схема стилю: смужка-превʼю і сітка пікерів. */
.palette-strip{display:flex;gap:10px;margin:12px 0}
.palette-strip span{flex:1;display:flex;align-items:center;gap:10px;border-radius:12px;padding:14px}
.palette-strip i{width:22px;height:22px;border-radius:999px;flex:none}
.palette-strip b{font-size:13px;font-weight:800}
.palette-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:12px 0}
.palette-item{display:flex;align-items:center;justify-content:space-between;gap:12px;border:1px solid var(--border);border-radius:12px;padding:12px 14px;background:var(--surface)}
.palette-item span{font-weight:800;font-size:14px}
.palette-item small{display:block;color:var(--muted);font-weight:400;font-size:12px;margin-top:2px}
.palette-item input[type=color]{width:52px;height:36px;border:1px solid var(--border);border-radius:10px;padding:2px;background:#fff;flex:none;cursor:pointer}
.radius-item{grid-column:1/-1}
.radius-control{display:flex;align-items:center;gap:12px;flex:1;max-width:340px}
.radius-control input[type=range]{flex:1;accent-color:var(--cyan)}
.radius-control b{min-width:44px;text-align:right;font-size:14px}
@media(max-width:760px){.palette-grid{grid-template-columns:1fr}.palette-strip{flex-direction:column}}
.style-savebar{display:flex;align-items:center;justify-content:space-between;gap:14px;min-height:42px;padding-top:4px}
.style-savebar span{color:var(--muted);font-size:12px;font-weight:700}
.style-savebar span.bad{color:var(--danger)}

@media(max-width:760px){.project-metrics{grid-template-columns:1fr}.source-link{max-width:100%}.style-savebar{align-items:stretch;flex-direction:column}}

/* v11.6: flexible languages and media discovery */
.language-fieldset{display:grid;gap:14px}
.language-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:9px 14px}
.custom-language{padding-top:12px;border-top:1px solid var(--border)}

.media-toolbar.advanced b{white-space:nowrap;text-align:right}
.media-project{font-weight:800;color:var(--text)!important;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-bottom:7px!important}
@media(max-width:1200px){.media-toolbar.advanced b{text-align:left}}
@media(max-width:760px){.language-grid{grid-template-columns:1fr}.media-toolbar.advanced b{text-align:left}}

/* v11.8: quality critics, queue controls and safe previews */
.critic-block{margin-top:16px}.critic-block>b{display:block;margin-bottom:8px;font-size:13px}.critic-clean{margin:14px 0 0;color:var(--muted)}

/* v11.10: cost breakdown, sku block, quality disclaimer */
.critic-note{margin:0 0 16px;padding:12px 14px;border-radius:12px;background:var(--surface-soft);border:1px solid var(--border);color:var(--muted);font-size:12.5px;line-height:1.55}
.critic-note b{color:var(--text)}
.cost-panel{margin-top:16px}
.cost-table{width:100%;border-collapse:collapse;margin-top:8px}
.cost-table th,.cost-table td{text-align:left;padding:11px 12px;border-bottom:1px solid #E8ECEF;font-size:13px}
.cost-table th{color:var(--muted);font-weight:800;font-size:11px;text-transform:uppercase;letter-spacing:.04em}
.cost-table td:last-child,.cost-table th:last-child{text-align:right;font-variant-numeric:tabular-nums}
.cost-table td:nth-child(2){color:var(--muted)}
.cost-total td{font-weight:900;border-top:2px solid var(--border);border-bottom:0}
.muted-note{margin:8px 0 0;color:var(--muted);font-size:13px}
.sku-strip{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-bottom:18px;padding:14px 18px;border-radius:14px;background:#EAF9FB;border:1px solid #B8E8ED}
.sku-strip small{display:block;color:#157985;font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.05em;margin-bottom:6px}
.sku-strip b{font-size:20px;line-height:1.2;font-variant-numeric:tabular-nums;overflow-wrap:anywhere;color:var(--text)}
.sku-strip .btn{flex-shrink:0}
.project-sku{margin:0 0 10px!important;font-size:11px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.project-sku b{color:var(--text);font-variant-numeric:tabular-nums}
.list-view .project-sku{display:none}
@media(max-width:760px){.sku-strip{flex-direction:column;align-items:stretch;gap:10px}.sku-strip .btn{width:100%}}

/* v12: field hint tooltips */
.hint{display:inline-flex;align-items:center;justify-content:center;width:16px;height:16px;border-radius:50%;background:var(--muted);color:#fff;font-size:11px;font-weight:800;font-style:normal;line-height:1;text-transform:none;letter-spacing:0;cursor:help;vertical-align:middle;margin-left:5px;position:relative;outline:none}
.hint::after{content:attr(data-tip);position:absolute;left:50%;top:150%;transform:translateX(-50%);width:280px;max-width:72vw;background:#101010;color:#F5F7FA;padding:10px 12px;border-radius:10px;font-size:12px;font-weight:500;line-height:1.5;box-shadow:0 14px 34px rgba(0,0,0,.32);opacity:0;visibility:hidden;transition:opacity .15s;z-index:120;pointer-events:none;white-space:normal;text-align:left}
.hint:hover::after,.hint:focus::after{opacity:1;visibility:visible}
.hint:focus-visible{box-shadow:0 0 0 3px rgba(25,188,201,.35)}

/* v12: project category chip + wider toolbar */
.cat-chip{display:inline-block;margin-right:8px;padding:3px 8px;border-radius:8px;background:#EAF9FB;border:1px solid #B8E8ED;color:#157985;font-size:10px;font-weight:900;text-transform:uppercase;letter-spacing:.03em;vertical-align:middle;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}




/* v12: UI polish — boot screen, offline banner, toast stack, state-aware live card */
.boot-screen{position:relative;min-height:100vh;display:grid;place-items:center;align-content:center;justify-items:center;gap:18px;overflow:hidden;background:radial-gradient(120% 90% at 50% 42%,#1B222A 0%,#12171C 48%,#0D1013 100%);animation:bootIn .5s ease both}
.boot-screen::before{content:"";position:absolute;left:50%;top:42%;width:min(760px,120vw);aspect-ratio:1;transform:translate(-50%,-50%);background:radial-gradient(closest-side,rgba(25,188,201,.20),rgba(25,188,201,.06) 55%,transparent 72%);filter:blur(24px);pointer-events:none;animation:bootGlow 5.4s ease-in-out infinite}
.boot-screen>*{position:relative;z-index:1}
.boot-screen img{width:200px;animation:bootLogo 1.05s cubic-bezier(.22,1,.36,1) both}
.boot-screen p{margin:0;color:var(--silver);background:linear-gradient(100deg,var(--silver) 0 38%,#FFFFFF 50%,var(--silver) 62% 100%);background-size:260% 100%;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;animation:bootFade .7s ease .62s both,bootShimmer 2.8s ease-in-out .9s infinite}
.boot-spinner{width:28px;height:28px;border-radius:50%;border:2px solid rgba(255,255,255,.14);border-top-color:var(--cyan);animation:spin .9s linear infinite,bootFade .6s ease .42s both}
@keyframes bootIn{from{opacity:0}to{opacity:1}}
@keyframes bootLogo{from{opacity:0;transform:translateY(12px) scale(.94);filter:blur(7px)}to{opacity:1;transform:none;filter:blur(0)}}
@keyframes bootFade{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
@keyframes bootGlow{0%,100%{opacity:.55;transform:translate(-50%,-50%) scale(.92)}50%{opacity:1;transform:translate(-50%,-50%) scale(1.08)}}
@keyframes bootShimmer{0%{background-position:130% 0}55%,100%{background-position:-30% 0}}
@media(prefers-reduced-motion:reduce){.boot-screen,.boot-screen::before,.boot-screen img,.boot-screen p,.boot-spinner{animation:none}.boot-screen p{-webkit-text-fill-color:var(--silver)}}
@keyframes spin{to{transform:rotate(360deg)}}
#offlineBanner{position:fixed;top:0;left:0;right:0;z-index:10000;background:var(--danger);color:#fff;text-align:center;padding:8px 14px;font-size:13px;font-weight:700}
#toastStack{position:fixed;right:22px;bottom:22px;display:flex;flex-direction:column;align-items:flex-end;gap:8px;z-index:9999}
#toastStack .toast{position:static}
.badge.paused,.badge.draft{background:#FFF5E6;color:#9B681A}
.live-card .pulse{animation:none}
.live-card.run .pulse{animation:pulseA 1.6s ease-in-out infinite}
@keyframes pulseA{50%{box-shadow:0 0 0 10px rgba(25,188,201,.04)}}
.live-card.ok .pulse{background:var(--green);box-shadow:0 0 0 5px rgba(81,196,138,.15)}
.live-card.bad .pulse{background:var(--danger);box-shadow:0 0 0 5px rgba(232,72,94,.15)}
.live-card.warn .pulse{background:var(--warning);box-shadow:0 0 0 5px rgba(255,199,126,.25)}
.error-island{margin-bottom:16px;padding:16px 18px;border-radius:var(--radius);background:#FDF3F4;border:1px solid #F1B4B4;border-left:4px solid var(--danger)}
.error-island b{display:block;margin-bottom:6px;color:#B42D2D}
.error-island p{margin:0 0 12px;font-size:13px;line-height:1.55;overflow-wrap:anywhere;color:#7a2a2a}
.empty b{display:block;font-size:16px;color:var(--text);margin-bottom:6px}
.empty p{margin:0 auto 14px;max-width:480px;line-height:1.6}
button:focus-visible,a:focus-visible,select:focus-visible{outline:3px solid rgba(25,188,201,.3);outline-offset:2px}

/* v12: style demo preview */
.style-demo{height:62vh}

/* v12: style delete affordance */
.delete-why{color:var(--muted);font-size:11px;line-height:1.4;max-width:260px}
.style-savebar .row{align-items:center;gap:10px}

/* v12: permissions editor */
.perm-list{display:grid;gap:10px;margin:4px 0 4px}
.perm-row{align-items:flex-start;gap:10px}
.perm-row span{display:flex;flex-direction:column;gap:2px;font-weight:600}
.perm-default{font-style:normal;font-size:10px;font-weight:800;color:#157985;background:#EAF9FB;border:1px solid #B8E8ED;border-radius:6px;padding:1px 6px;width:max-content;text-transform:uppercase;letter-spacing:.03em}

/* v12: settings page */
.settings-metrics{grid-template-columns:repeat(auto-fit,minmax(150px,1fr))}
.settings-metrics .badge{font-size:11px}
.panel h2+.metrics{margin-top:12px}
.panel .metrics+.metrics{margin-top:12px}
@media(max-width:760px){.metrics,.metrics.large,.settings-metrics{grid-template-columns:1fr}}

/* v12: quality metrics */
.quality-panel{margin-top:18px}
.quality-bad{color:var(--danger)}

/* v12: review history */
.review-log{display:grid;gap:10px}
.review-entry{padding:14px 16px;border-radius:12px;background:var(--surface-soft);border:1px solid var(--border);border-left:4px solid var(--border)}
.review-entry.approve{border-left-color:var(--green);background:#F1FAF5}
.review-entry.request_changes{border-left-color:var(--danger);background:#FDF3F4}
.review-entry-head{display:flex;align-items:baseline;justify-content:space-between;gap:12px;flex-wrap:wrap}
.review-entry-head span{color:var(--muted);font-size:12px}
.review-entry p{margin:8px 0 6px;line-height:1.55;font-size:13px}
.review-entry small{color:var(--muted);font-size:11px}
.review-grid{grid-template-columns:repeat(auto-fit,minmax(190px,1fr))}
@media(max-width:760px){.review-grid{grid-template-columns:1fr}}

/* Root-admin key management */
.secrets-form{display:grid;gap:14px;max-width:560px}
.secrets-form input,.secrets-form select{font-family:ui-monospace,SFMono-Regular,Menlo,monospace}
.secrets-form select{font-family:inherit}
.secrets-form input::placeholder{color:var(--gray-3);font-family:ui-monospace,SFMono-Regular,Menlo,monospace}
.key-src{margin-left:6px;padding:2px 7px;border-radius:8px;font-size:10px;font-weight:900;text-transform:uppercase;letter-spacing:.03em;vertical-align:middle}
.key-src.db{background:#E8F8F0;color:#14784A}
.key-src.env{background:#EEF1F3;color:#555}
.key-src.none{background:#FDECEC;color:#B42D2D}

/* Vertical rhythm. Stacked sections had no gap at all, so panels butted into each
   other while their columns kept a 14px gap. And the last .metrics in a panel kept
   its 18px margin, making every panel bottom-heavy: 22px above the heading, 40px
   below the last card. */
.container>section{margin-bottom:16px}
.container>section:last-child{margin-bottom:0}
.panel>*:last-child,.panel>form>*:last-child{margin-bottom:0}
.panel h2{margin:0 0 14px;font-size:19px}
.panel h2+.model-list{margin-top:0}
.panel .model-list+h2{margin-top:20px}

/* The select popup is drawn by the OS, so it followed the system dark theme on a
   light page. color-scheme:light on :root tells the browser which scheme to render
   native controls in. */
.custom-model{margin-top:8px}
optgroup{font-weight:800}

/* New project: simple vs advanced */
.mode-switch{justify-self:start;margin-bottom:2px}
.preset-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:10px}
.preset{display:flex;flex-direction:column;gap:6px;text-align:left;padding:14px;border:1px solid var(--border);border-radius:12px;background:var(--surface);transition:.15s}
.preset:hover{border-color:var(--silver)}
.preset.active{border-color:var(--cyan);box-shadow:0 0 0 3px rgba(25,188,201,.12)}
.preset-top{display:flex;align-items:baseline;justify-content:space-between;gap:8px}
.preset-top b{font-size:14px}
.preset-cost{font-size:13px;font-weight:900;color:var(--text)}
.preset.active .preset-cost{color:#157985}
.preset small{color:var(--muted);font-size:11.5px;line-height:1.4}
.preset em{margin-top:auto;font-style:normal;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:10px;color:var(--gray-3);line-height:1.5;overflow-wrap:anywhere}
.est-line{display:flex;align-items:center;gap:6px;margin:0;color:var(--muted);font-size:13px}
.est-line b{color:var(--text);font-size:15px}

/* Card view: the footer sat in normal flow, so a two-line title and a three-line
   title pushed it to different heights across one row of cards. Pinning it to the
   bottom of a flex column lines every footer up and absorbs the slack above it. */
.project-grid:not(.list-view) .project{display:flex;flex-direction:column}
.project-grid:not(.list-view) .project-meta{margin-top:auto;padding-top:12px;border-top:1px solid #EEF1F3}
.project-grid:not(.list-view) .project-style{margin-bottom:2px}

/* Card view is a grid of rows read horizontally, so every band must start at the
   same y. Titles run one to four lines, so clamp them to two and reserve the space
   whether or not the second line is used. Full name stays available via title=. */
.project-grid:not(.list-view) .project h3{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;line-height:1.3;min-height:calc(2 * 1.3em);margin:16px 0 6px}

.model-list code.is-reasoning{border-color:#B8E8ED;background:#EAF9FB;color:#157985}
.model-list+h2{margin-top:20px}

/* Login and boot are consecutive screens, so they share one canvas and one glow. */
.auth::before{content:"";position:absolute;left:50%;top:42%;width:min(760px,120vw);aspect-ratio:1;transform:translate(-50%,-50%);background:radial-gradient(closest-side,rgba(25,188,201,.18),rgba(25,188,201,.05) 55%,transparent 72%);filter:blur(24px);pointer-events:none;animation:bootGlow 5.4s ease-in-out infinite}
@media(prefers-reduced-motion:reduce){.auth::before,.auth-logo,.auth form{animation:none}}
@media(max-width:760px){.auth-logo{width:150px}}

/* Page probe in the New Project dialog */
.probe-box{border:1px dashed var(--border);border-radius:14px;padding:12px 14px;background:var(--surface-soft)}
.probe-note{margin:0;font-size:12.5px}
.probe-head{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;margin-bottom:10px}
.probe-head b{font-size:13px;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:60%}
.verdict{font-size:11px;font-weight:900;padding:4px 9px;border-radius:8px;background:#EEF1F3;color:#555}
.verdict.ok{background:#E8F8F0;color:#14784A}
.verdict.bad{background:#FDECEC;color:#B42D2D}
.probe-grid{display:flex;flex-wrap:wrap;gap:8px}
.frame{position:relative;flex:0 0 74px;width:74px;height:74px;padding:0;border:2px solid transparent;border-radius:10px;overflow:hidden;background:#fff;cursor:pointer;transition:.15s}
.frame img{width:100%;height:100%;object-fit:cover;display:block}
.frame:hover{border-color:var(--silver)}
.frame.off img{opacity:.28;filter:grayscale(1)}
.frame.off::after{content:'✕';position:absolute;inset:0;display:grid;place-items:center;font-size:20px;font-weight:900;color:#B42D2D}

/* Generation mode slider */

/* Grid children default to min-width:auto, so a row of frames refused to shrink
   and inflated the whole dialog past the viewport instead of wrapping. */
dialog form>*{min-width:0}
.probe-box{min-width:0;overflow:hidden}
.probe-grid{max-height:176px;overflow-y:auto}
.frame.dead{display:none}

.preset-facts{display:grid;gap:3px;margin-top:auto;padding-top:8px;border-top:1px solid #EEF1F3;text-align:left}
.preset-facts>span{font-size:10.5px;color:var(--muted-dark);display:flex;gap:6px;align-items:baseline;min-width:0;line-height:1.35}
.preset-facts i{font-style:normal;flex:0 0 44px;font-size:9.5px;font-weight:900;text-transform:uppercase;letter-spacing:.04em;color:var(--gray-3)}
optgroup[disabled]{color:var(--gray-3)}

/* Adopted images offer inside the probe box */
.prior-strip{margin:10px 0;padding:10px 12px;border:1px solid #B8E8ED;border-radius:12px;background:#EAF9FB}
.prior-strip .check{font-size:12.5px;margin:0}
.prior-thumbs{display:flex;flex-wrap:wrap;gap:8px;margin-top:8px}
.prior-thumb{display:grid;gap:2px;justify-items:center;position:relative;border:2px solid transparent;border-radius:10px;padding:2px;background:none;cursor:pointer}
.prior-thumb:hover{border-color:var(--silver)}
.prior-thumb.off img{opacity:.28;filter:grayscale(1)}
.prior-thumb.off::after{content:'⟳ заново';position:absolute;top:24px;left:0;right:0;text-align:center;font-size:9px;font-weight:900;color:#B42D2D}
.prior-thumb img{width:64px;height:64px;object-fit:cover;border-radius:8px;border:1px solid var(--border);background:#fff}
.prior-thumb i{font-style:normal;font-size:9.5px;color:var(--muted)}

/* Review flow */
.review-stage{height:52vh}
.review-cta{display:flex;align-items:center;gap:14px;flex-wrap:wrap;border-left:4px solid var(--warning);border-radius:0 var(--radius) var(--radius) 0}
.review-cta .btn{margin-left:auto}
#reviewApproveBtn:disabled,#reviewChangesBtn:disabled{opacity:.45;cursor:not-allowed}

.media-audit{margin-bottom:10px;padding:10px 14px;border-radius:12px;font-size:12.5px;line-height:1.6}
.media-audit.ok{background:#E8F8F0;border:1px solid #B7E4C7;color:#14784A}
.media-audit.bad{background:#FDECEC;border:1px solid #F1B4B4;color:#B42D2D}
.media-audit code{background:rgba(255,255,255,.6);padding:1px 6px;border-radius:6px}

.fallback-banner{display:grid;gap:4px;margin-bottom:10px;padding:12px 14px;border-radius:12px;background:#FDECEC;border:1px solid #F1B4B4;color:#B42D2D;font-size:13px;line-height:1.55}
.fallback-banner span{font-size:11.5px;opacity:.85}

/* Combo progress: shimmer on the fill, pulse at the head, tweened width. Only
   .run (processing/queued) animates - a grid of finished cards must stay calm. */
.progress.run i::after{content:'';position:absolute;inset:0;background:linear-gradient(100deg,transparent 20%,rgba(255,255,255,.5) 50%,transparent 80%);background-size:220% 100%;animation:barShim 1.8s ease-in-out infinite}
@keyframes barShim{0%{background-position:150% 0}100%{background-position:-70% 0}}
.progress .phead{position:absolute;top:50%;width:10px;height:10px;margin:-5px 0 0 -5px;border-radius:50%;background:var(--blue);transition:left .7s cubic-bezier(.3,.8,.3,1);animation:barPulse 1.6s ease-out infinite}
@keyframes barPulse{0%{box-shadow:0 0 0 0 rgba(25,188,201,.45)}70%{box-shadow:0 0 0 8px rgba(25,188,201,0)}100%{box-shadow:0 0 0 0 rgba(25,188,201,0)}}
@media(prefers-reduced-motion:reduce){.progress.run i::after,.progress .phead{animation:none}}

.techloop-panel h2{margin-bottom:18px}
.techloop{position:relative;overflow:hidden;--tl-gap:38px;-webkit-mask-image:linear-gradient(to right,transparent,#000 9%,#000 91%,transparent);mask-image:linear-gradient(to right,transparent,#000 9%,#000 91%,transparent)}
.techloop-track{display:flex;width:max-content;will-change:transform;animation:tlScroll 38s linear infinite}
.techloop:hover .techloop-track{animation-play-state:paused}
.techloop-seq{display:flex;align-items:center;gap:var(--tl-gap);padding-right:var(--tl-gap)}
.techloop-item{display:inline-flex;align-items:center;gap:9px;font-weight:850;font-size:15px;letter-spacing:-.01em;color:var(--muted);white-space:nowrap;transition:color .25s,transform .25s}
.techloop-item::before{content:'';width:8px;height:8px;border-radius:50%;background:var(--c);flex:0 0 auto}
.techloop-item:hover{color:var(--c);transform:scale(1.07)}
@keyframes tlScroll{to{transform:translate3d(-50%,0,0)}}
@media(prefers-reduced-motion:reduce){.techloop-track{animation:none}}
.auth-or{text-align:center;color:var(--muted);font-size:12px;font-weight:700;display:flex;align-items:center;gap:12px}
.auth-or::before,.auth-or::after{content:'';flex:1;height:1px;background:var(--border)}
.pixel-bg{position:absolute;inset:0;width:100%;height:100%;image-rendering:pixelated;opacity:.6;pointer-events:none}
.upload-grid{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:10px}
.upload-grid .frame{border-color:var(--cyan)}
.upload-grid .frame.off{border-color:transparent;opacity:.4}
.upload-grid .frame img{width:100%;height:100%;object-fit:cover;display:block}
.upload-busy{display:grid;place-items:center;width:100%;height:100%;color:var(--muted);font-weight:900}
.frame-x{position:absolute;top:3px;right:3px;width:20px;height:20px;border:0;border-radius:6px;background:rgba(16,16,16,.7);color:#fff;font-size:12px;line-height:1;padding:0}
.uwrap{display:grid;gap:4px;justify-items:stretch;flex:0 0 74px;width:74px}
.uwrap .frame{width:100%;flex:none}
.role-row{display:flex;gap:4px}
.role-chip{flex:1;border:1px solid var(--border);background:#fff;border-radius:8px;padding:3px 0;font-size:10px;font-weight:900;color:var(--muted)}
.role-chip.active{background:var(--cyan);border-color:var(--cyan);color:#101010}
.uchart{display:flex;gap:10px}
.uaxis{position:relative;width:46px;height:170px;flex:0 0 46px}
.uaxis small{position:absolute;right:0;color:var(--muted);font-size:10px;line-height:1}
.uplot{flex:1;min-width:0;overflow-x:auto}
.ubars-zone{position:relative;height:170px;min-width:100%}
.ugrid{position:absolute;left:0;right:0;height:1px;background:#E8ECEF;pointer-events:none}
.ugrid.zero{background:var(--border)}
.ubars{display:flex;align-items:flex-end;gap:6px;height:100%;position:relative;z-index:1}
.ubar-wrap{display:flex;align-items:flex-end;justify-content:center;height:100%;flex:1 0 26px}
.ubar{width:100%;max-width:38px;background:linear-gradient(180deg,var(--cyan),var(--blue));border-radius:6px 6px 2px 2px;min-height:3px}
.ulabels{display:flex;gap:6px;margin-top:5px}
.ulabels small{flex:1 0 26px;text-align:center;color:var(--muted);font-size:10px;white-space:nowrap}
tr.urow-active td{background:#E9F8FA}
.table-wrap tbody tr{cursor:pointer}
.frame-num{position:absolute;left:3px;top:3px;background:rgba(16,16,16,.72);color:#fff;font-size:10px;font-weight:900;border-radius:6px;padding:1px 5px;line-height:1.4}
.upload-360{margin-top:10px}
#upload360Hint p{margin:8px 0 0}
.budget-cell{display:grid;gap:3px;min-width:92px}
.budget-cell input{width:92px;padding:7px 9px}
.budget-cell small{color:var(--muted);font-size:10px;white-space:nowrap}
.llm-status{margin:-6px 0 14px;padding:9px 12px;border-radius:10px;background:#E9F8FA;border:1px solid rgba(25,188,201,.35)}
.stagebars{display:grid;gap:10px}
.stagerow{display:grid;grid-template-columns:minmax(150px,220px) 1fr 78px 40px;align-items:center;gap:12px}
.stagerow span{font-size:13px;font-weight:700}
.stagetrack{height:12px;background:#E8ECEF;border-radius:99px;overflow:hidden}
.stagetrack i{display:block;height:100%;background:linear-gradient(90deg,var(--cyan),var(--blue));border-radius:99px}
.stagerow b{text-align:right;font-size:13px}
.stagerow small{color:var(--muted);text-align:right}
@media(max-width:760px){.stagerow{grid-template-columns:1fr 60px}.stagetrack{grid-column:1/-1}}
.metrics b .lifetime{display:block;margin-top:3px;color:var(--muted);font-size:11px;font-weight:700}
.table-wrap td small{display:block;color:var(--muted);font-size:10px;margin-top:2px}
.stylediff{max-height:360px;overflow:auto;background:#0D1013;color:#E6E9EC;border-radius:12px;padding:14px;font-family:ui-monospace,Menlo,monospace;font-size:11.5px;line-height:1.5;white-space:pre-wrap;word-break:break-word}
.stylediff .d-add{color:#7EE0A6;display:block}
.stylediff .d-del{color:#F19AA6;display:block}
.stylediff .d-ctx{color:#9EA6AE;display:block}
.dryrun{margin-top:6px}
.guarantee-list{margin:8px 0 0;padding-left:18px;color:var(--muted);font-size:12.5px;line-height:1.6}
.preview-canvas.mobile{max-width:480px;margin:0 auto}
.ab-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:6px}
.ab-grid>div>b{display:block;margin-bottom:6px;font-size:13px}
.ab-grid .preview-canvas{max-height:60vh;overflow:auto;border:1px solid var(--border);border-radius:12px}
@media(max-width:900px){.ab-grid{grid-template-columns:1fr}}

/* Bulk CSV import: a separate, scrollable confirmation surface. */
#bulkProjectDialog{width:min(920px,calc(100vw - 32px))}
#bulkProjectDialog form{max-height:90vh;overflow:auto}
.bulk-file-row{display:flex;align-items:center;flex-wrap:wrap;gap:10px;padding:14px;border:1px dashed var(--border);border-radius:14px;background:var(--surface-soft)}
.bulk-file-input{width:auto;max-width:100%;padding:0;border:0;border-radius:12px;background:transparent;color:var(--muted);font-size:12px}
.bulk-file-input::file-selector-button{margin-right:10px;border:1px solid var(--border);border-radius:12px;padding:10px 14px;background:#fff;color:var(--text);font:inherit;font-weight:800;cursor:pointer}
.bulk-file-input:focus-visible{outline:3px solid rgba(25,188,201,.3);outline-offset:2px;box-shadow:none}
.bulk-file-input:disabled,.bulk-file-input:disabled::file-selector-button{opacity:.55;cursor:not-allowed}
.bulk-file-summary{display:flex;align-items:center;gap:8px;min-width:0;margin-left:auto;font-size:12px;color:var(--muted)}
.bulk-file-summary b{max-width:280px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--text)}
.bulk-result:empty{display:none}
.bulk-alert{padding:14px 16px;border:1px solid #B8E8ED;border-radius:14px;background:#EAF9FB;color:#157985}
.bulk-alert.bad{border-color:#F1B4B4;background:#FDF3F4;color:#B42D2D}
.bulk-alert b{display:block;margin-bottom:4px}
.bulk-alert p{margin:0;font-size:13px;line-height:1.5}
.bulk-summary{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin-bottom:14px}
.bulk-summary>div{display:grid;gap:5px;padding:13px 14px;border:1px solid var(--border);border-radius:12px;background:var(--surface-soft)}
.bulk-summary small{color:var(--muted);font-size:11px}
.bulk-summary b{font-size:18px;overflow-wrap:anywhere}
.bulk-result h3{margin:16px 0 8px;font-size:14px}
.bulk-table{max-height:260px;border:1px solid var(--border);border-radius:12px}
.bulk-table tbody tr{cursor:default}
.bulk-table th{position:sticky;top:0;z-index:1;background:var(--surface-soft)}
.bulk-table th,.bulk-table td{padding:9px 10px;font-size:12px;vertical-align:top}
.bulk-table .bulk-url{max-width:360px;overflow-wrap:anywhere;color:var(--muted)}
.bulk-error-row td:last-child{color:#B42D2D}
.bulk-actions{display:flex;justify-content:flex-end;align-items:center;flex-wrap:wrap;gap:10px;padding-top:14px;border-top:1px solid var(--border)}
.empty-actions{justify-content:center;margin-top:14px}
@media(max-width:760px){#bulkProjectDialog form{padding:18px;max-height:94vh}.bulk-file-summary{width:100%;margin-left:0}.bulk-file-summary b{max-width:70vw}.bulk-summary{grid-template-columns:1fr}.bulk-actions .btn{flex:1}.bulk-table .bulk-url{max-width:210px}}