/* Thmanyah has no @font-face on purpose: its licence forbids serving the
files to browsers. Text set in it is rasterised server-side instead —
see static/fonts/thmanyah/README.md and /api/licensed-fonts. */
:root {
--brand: #550000; --brand-light: #e0cfc2;
--bg: #f6f2ef; --surface: #ffffff; --text: #1a1d26; --muted: #6b6460;
--line: #ddd5ce; --accent: #550000; --accent-fg: #ffffff;
--warn-bg: #fff3e6; --warn-border: #f0c88a; --warn-stripe: #d97706;
--ok-bg: #edf7f0; --ok-border: #8ec9a0; --ok-stripe: #16a34a;
--info-bg: #f0eee9; --info-border: #cbc2b8; --info-stripe: #7c6f64;
--code-bg: #f0ebe6;
--toggle-bg: var(--brand-light); --toggle-fg: var(--brand);
}
html.dark {
--bg: #1a1210; --surface: #2a201c; --text: #e8e0da; --muted: #a09690;
--line: #3d322c; --accent: #e0cfc2; --accent-fg: #2a1a14;
--warn-bg: #3a2810; --warn-border: #7a5a2e; --warn-stripe: #f59e0b;
--ok-bg: #142e1c; --ok-border: #2e6a40; --ok-stripe: #22c55e;
--info-bg: #2a231c; --info-border: #5a4e42; --info-stripe: #a09080;
--code-bg: #332c26;
--toggle-bg: #3d322c; --toggle-fg: #e0cfc2;
}
* { box-sizing: border-box; margin: 0; }
html {
min-height: 100%;
background: var(--bg);
overflow-x: hidden;
overscroll-behavior-y: auto;
}
body {
min-height: 100vh;
min-height: 100svh;
min-height: 100dvh;
font-family: "IBM Plex Sans", system-ui, sans-serif;
font-size: 17px; line-height: 1.55;
color: var(--text); background: var(--bg);
transition: background .25s, color .25s;
position: relative;
overflow-x: hidden;
}
body::before,
body::after {
content: "";
position: fixed;
border-radius: 999px;
pointer-events: none;
z-index: -1;
filter: blur(16px);
}
body::before {
top: -80px;
right: -40px;
width: clamp(220px, 28vw, 420px);
height: clamp(220px, 28vw, 420px);
background: radial-gradient(circle, color-mix(in srgb, var(--brand-light) 86%, transparent), transparent 68%);
opacity: .9;
animation: ambientFloat 18s ease-in-out infinite;
}
body::after {
left: -120px;
bottom: 12vh;
width: clamp(260px, 34vw, 520px);
height: clamp(260px, 34vw, 520px);
background: radial-gradient(circle, color-mix(in srgb, var(--surface) 34%, var(--brand) 10%), transparent 72%);
opacity: .5;
animation: ambientFloat 22s ease-in-out infinite reverse;
}
html[dir="rtl"] body { font-family: "IBM Plex Sans Arabic", "IBM Plex Sans", system-ui, sans-serif; }
.wrap {
width: min(100%, calc(100vw - clamp(16px, 2vw, 32px)));
max-width: none;
margin: 0 auto;
padding: clamp(.55rem, 1vw, .95rem) clamp(.6rem, 1.3vw, 1.2rem) clamp(.9rem, 1.6vw, 1.8rem);
}
.page-shell {
display: grid;
grid-template-columns: 1fr;
gap: clamp(1rem, 1.5vw, 1.8rem);
align-items: start;
position: relative;
max-width: 1640px;
margin: 0 auto;
}
.page-shell::before,
.page-shell::after {
content: "";
position: absolute;
border-radius: 999px;
pointer-events: none;
z-index: 0;
}
.page-shell::before {
top: 2rem;
right: 4%;
width: clamp(140px, 14vw, 220px);
height: clamp(140px, 14vw, 220px);
background: radial-gradient(circle, color-mix(in srgb, var(--brand-light) 70%, transparent), transparent 72%);
opacity: .5;
}
.page-shell::after {
left: 6%;
top: 24rem;
width: clamp(220px, 22vw, 360px);
height: clamp(220px, 22vw, 360px);
background: radial-gradient(circle at center, color-mix(in srgb, var(--surface) 40%, var(--brand-light) 60%), transparent 68%);
opacity: .25;
}
.page-left,
.page-right {
width: 100%;
min-width: 0;
}
.page-left {
display: flex;
flex-direction: column;
align-items: center;
position: relative;
z-index: 1;
}
.results-grid {
display: block;
width: min(100%, clamp(980px, 88vw, 1580px));
}
@media (min-width: 1100px) {
#source-card { grid-column: 1 / -1; }
#product-card { grid-column: 1; }
}
@media (min-width: 1500px) {
.results-grid { width: min(100%, clamp(980px, 88vw, 1580px)); }
}
@media (min-width: 2200px) {
.results-grid { width: min(100%, clamp(980px, 88vw, 1580px)); }
}
@media (max-width: 980px) {
.page-shell { grid-template-columns: 1fr; }
.control-hero { grid-template-columns: 1fr; }
.hero-steps { grid-template-columns: 1fr; }
.hero-steps::before { display: none; }
.hero-step:nth-child(1)::after,
.hero-step:nth-child(2)::after { display: none; }
}
@media (max-width: 640px) {
.results-grid { width: 100%; }
.url-row { flex-direction: column; }
.intake-panels { grid-template-columns: 1fr; }
.control-hero,
.control-layout { display: grid; grid-template-columns: 1fr; }
.control-copy h1 { text-align: center; justify-self: center; }
.hero-notes { justify-content: flex-start; max-width: none; }
.control-card { width: 100%; }
.workspace-results { grid-template-columns: 1fr; }
}
.pill {
display: inline-flex; align-items: center; gap: .35rem;
padding: .35rem .7rem; border-radius: 8px; cursor: pointer;
font-size: .78rem; font-weight: 600;
background: var(--toggle-bg); color: var(--toggle-fg);
border: 1px solid var(--line); user-select: none; transition: background .2s, color .2s;
}
.pill:hover { filter: brightness(1.08); }
.pill svg { width: 15px; height: 15px; }
.card {
background: var(--surface); border: 1px solid var(--line);
border-radius: 24px;
padding: clamp(.85rem, 1vw, 1.1rem);
margin-bottom: clamp(.55rem, .9vw, .9rem);
box-shadow: 0 18px 42px rgba(26,29,38,.07);
transition: background .25s, border-color .25s, box-shadow .25s, transform .25s;
}
.control-card {
width: min(100%, clamp(980px, 88vw, 1580px));
padding: clamp(1rem, 1.3vw, 1.35rem);
background:
linear-gradient(180deg, color-mix(in srgb, var(--surface) 96%, var(--brand-light) 4%), var(--surface));
box-shadow: 0 20px 52px rgba(26,29,38,.08);
overflow: hidden;
position: relative;
isolation: isolate;
animation: heroLift .58s ease both;
}
.control-card::before {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(180deg, rgba(255,255,255,.45), transparent 26%);
opacity: .5;
pointer-events: none;
z-index: -1;
}
.control-card.is-drop-target {
border-color: var(--accent);
box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 18%, transparent), 0 30px 76px rgba(26,29,38,.13);
transform: translateY(-2px) scale(1.002);
}
#upload-workspace {
display: contents;
}
.control-hero {
display: grid;
grid-template-columns: minmax(0, 1fr);
gap: 0;
align-items: center;
width: 100%;
margin: 0 0 1rem;
padding: .25rem 0 1rem;
border-bottom: 1px solid color-mix(in srgb, var(--line) 82%, transparent);
text-align: start;
}
.control-copy {
min-width: 0;
display: grid;
gap: .1rem;
align-content: center;
justify-items: start;
}
.hero-notes,
.hero-pill,
.tagline { display: none; }
.hero-steps {
display: grid;
grid-template-columns: minmax(0, 1fr);
gap: .85rem;
width: 100%;
position: relative;
padding: .1rem 0 .2rem;
}
.hero-step {
appearance: none;
-webkit-appearance: none;
font: inherit;
text-align: left;
cursor: pointer;
display: grid;
gap: .85rem;
min-height: 134px;
padding: 1rem 1.15rem 1.15rem;
border: 1px solid color-mix(in srgb, var(--line) 62%, transparent);
border-radius: 18px;
background: linear-gradient(135deg,
color-mix(in srgb, var(--surface) 97%, var(--brand-light) 3%),
color-mix(in srgb, var(--surface) 89%, var(--brand-light) 11%));
background-position: center;
box-shadow: 0 18px 42px rgba(26,29,38,.09);
position: relative;
overflow: hidden;
width: 100%;
isolation: isolate;
opacity: 0;
transform: translateY(22px) scale(.96);
}
.hero-step:hover {
border-color: color-mix(in srgb, var(--accent) 42%, var(--line) 58%);
}
.hero-step.is-active {
border-color: color-mix(in srgb, var(--accent) 58%, var(--line) 42%);
box-shadow: 0 20px 48px rgba(85,0,0,.12);
}
.hero-step-upload {
background:
radial-gradient(circle at 8% 12%, color-mix(in srgb, #f7d9c7 42%, transparent), transparent 34%),
linear-gradient(135deg, color-mix(in srgb, var(--surface) 94%, #fff2e8 6%), color-mix(in srgb, var(--surface) 84%, #f3d7c2 16%));
}
.hero-step-analyze {
background:
radial-gradient(circle at 92% 10%, color-mix(in srgb, #d9e7ff 48%, transparent), transparent 36%),
linear-gradient(135deg, color-mix(in srgb, var(--surface) 92%, #eef5ff 8%), color-mix(in srgb, var(--surface) 82%, #d8e8ff 18%));
border-color: color-mix(in srgb, #6f8db8 34%, var(--line));
}
.hero-step-improve {
background:
radial-gradient(circle at 12% 18%, color-mix(in srgb, #e8dfc1 50%, transparent), transparent 34%),
linear-gradient(135deg, color-mix(in srgb, var(--surface) 91%, #f7f0dc 9%), color-mix(in srgb, var(--surface) 80%, #eadfbd 20%));
border-color: color-mix(in srgb, #a58d4f 34%, var(--line));
}
.hero-step.is-locked {
cursor: default;
}
.hero-step-header {
appearance: none;
-webkit-appearance: none;
width: 100%;
border: 0;
background: transparent;
color: inherit;
font: inherit;
text-align: inherit;
cursor: pointer;
position: relative;
display: grid;
grid-template-columns: 1fr;
justify-items: center;
align-items: center;
gap: .22rem;
min-height: 68px;
padding: .15rem .25rem .55rem;
border-bottom: 1px solid color-mix(in srgb, var(--line) 72%, transparent);
z-index: 2;
}
.hero-step-analyze > .hero-step-header,
.hero-step-improve > .hero-step-header {
display: none;
}
/* The top step indicator (Import / Analyze / Generate) already shows which
step is locked, so this placeholder duplicated that with no new info. */
.step-skeleton {
display: none !important;
}
.step-skeleton-line,
.step-skeleton-block {
display: block;
position: relative;
background: color-mix(in srgb, var(--line) 72%, var(--surface) 28%);
}
.step-skeleton-line {
width: 72%;
height: 10px;
border-radius: 999px;
}
.step-skeleton-line.is-short {
width: 44%;
}
.step-skeleton-state {
color: var(--muted);
font-size: .72rem;
font-weight: 700;
line-height: 1.3;
}
.step-skeleton-block {
width: 100%;
height: 46px;
border-radius: 10px;
}
.hero-step.is-skeleton .workflow-card-content,
.hero-step.is-collapsed .workflow-card-content,
.hero-step.is-collapsed .step-skeleton {
display: none;
}
.hero-step-analyze .workflow-card-content > :not(#analysis-loader) {
display: none !important;
}
.hero-step.is-collapsed {
min-height: 0;
gap: 0;
padding: 0;
border: 0;
background: none;
box-shadow: none;
overflow: hidden;
}
.hero-step.is-collapsed .hero-step-header {
min-height: 42px;
padding-bottom: 0;
border-bottom: 0;
}
.hero-step-header .hero-step-title {
position: static;
transform: none;
color: var(--accent);
font-size: 1.12rem;
letter-spacing: 0;
}
.hero-step-header .hero-step-num {
position: static;
transform: none;
}
.hero-step-icon {
width: 40px;
height: 40px;
border-radius: 13px;
display: inline-flex;
align-items: center;
justify-content: center;
flex: 0 0 auto;
color: var(--accent);
background: color-mix(in srgb, var(--accent) 12%, var(--surface) 88%);
box-shadow: inset 0 1px 0 rgba(255,255,255,.65);
}
.hero-step-icon svg {
width: 21px;
height: 21px;
stroke: currentColor;
}
.hero-steps.steps-ready .hero-step {
animation:
heroStepIn .82s cubic-bezier(.16,1,.3,1) both,
heroStepLift 5.5s ease-in-out infinite;
}
.hero-steps.steps-ready .hero-step.is-skeleton {
animation: heroStepIn .82s cubic-bezier(.16,1,.3,1) both;
}
.hero-steps.is-initial {
width: 100%;
max-width: 980px;
min-height: clamp(420px, calc(100dvh - 190px), 720px);
margin-inline: auto;
place-items: center;
}
.hero-steps.is-initial > .hero-step-analyze,
.hero-steps.is-initial > .hero-step-improve {
display: none;
}
.hero-steps.is-prompt-hidden > .hero-step-improve {
display: none;
}
.hero-steps.is-initial > .hero-step-upload {
width: 100%;
}
.hero-steps.is-initial .hero-step-upload .upload-btn.compact {
min-height: clamp(360px, 52dvh, 560px);
border-radius: 16px;
}
.hero-steps.is-initial.steps-ready > .hero-step-upload {
animation:
uploadFocusIn .9s cubic-bezier(.16,1,.3,1) both,
uploadFocusGlow 3.8s ease-in-out .9s infinite;
}
.hero-steps.is-initial.steps-ready > .hero-step-upload::after {
height: 100%;
background: linear-gradient(105deg, transparent 28%, rgba(255,255,255,.5) 48%, transparent 68%);
opacity: 1;
transform: translateX(-125%);
animation: uploadFocusSheen 3.8s ease-in-out 1.1s infinite;
}
.hero-steps.is-initial.steps-ready .upload-icon {
animation: uploadIconInvite 2.1s cubic-bezier(.45,0,.25,1) infinite;
}
.hero-step::after {
content: "";
position: absolute;
inset: 0;
z-index: 1;
height: auto;
background: transparent;
opacity: 0;
}
.hero-step-upload { animation-delay: .08s, 1.05s; }
.hero-step-analyze { animation-delay: .34s, 1.3s; }
.hero-step-improve { animation-delay: .6s, 1.55s; }
.hero-step-num,
.hero-step-header,
.hero-step-body,
.hero-step-icon { position: relative; z-index: 2; }
@keyframes heroStepIn {
0% { opacity: 0; transform: translateY(22px) scale(.96); }
58% { opacity: 1; transform: translateY(-4px) scale(1.015); }
100% { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes heroStepLift {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-3px); }
}
@keyframes uploadFocusIn {
0% { opacity: 0; transform: translateY(28px) scale(.94); filter: blur(4px); }
62% { opacity: 1; transform: translateY(-5px) scale(1.012); filter: blur(0); }
100% { opacity: 1; transform: translateY(0) scale(1); filter: blur(0); }
}
@keyframes uploadFocusGlow {
0%, 100% { box-shadow: 0 18px 42px rgba(26,29,38,.09), 0 0 0 0 rgba(85,0,0,0); }
50% { box-shadow: 0 24px 58px rgba(85,0,0,.14), 0 0 0 7px rgba(85,0,0,.045); }
}
@keyframes uploadFocusSheen {
0%, 34% { transform: translateX(-125%); }
64%, 100% { transform: translateX(125%); }
}
@keyframes uploadIconInvite {
0%, 100% { transform: translateY(0) scale(1); box-shadow: 0 0 0 0 rgba(85,0,0,0); }
45% { transform: translateY(-5px) scale(1.08); box-shadow: 0 14px 28px rgba(85,0,0,.16), 0 0 0 8px rgba(85,0,0,.045); }
68% { transform: translateY(0) scale(.98); box-shadow: 0 5px 12px rgba(85,0,0,.08); }
}
@keyframes heroTrackDraw {
from { opacity: 0; transform: scaleX(0); }
to { opacity: .2; transform: scaleX(1); }
}
/* Press feedback: every enabled button dims slightly while held, so a tap
visibly lands even on controls with no is-active styling. filter, not
transform, so absolutely-positioned buttons never jump — and a static
dim is not motion, so it stays on under prefers-reduced-motion. */
button:where(:not(:disabled)):active { filter: brightness(.93); }
/* Hover affordance (desktop only): every enabled button dims a touch and
shows the pointer cursor, so anything clickable announces itself before
the click. :where() zeroes the qualifier specificity, so any component's
own richer :hover/:active style still wins — this is only the floor.
Gated to real hover devices so touch screens never get a stuck hover. */
@media (hover: hover) and (pointer: fine) {
button:where(:not(:disabled)) { cursor: pointer; transition: filter .12s ease; }
button:where(:not(:disabled)):hover { filter: brightness(.96); }
button:where(:not(:disabled)):active { filter: brightness(.9); }
}
@media (prefers-reduced-motion: reduce) {
.hero-steps::before,
.hero-step,
.hero-steps.is-initial.steps-ready > .hero-step-upload,
.hero-steps.is-initial.steps-ready > .hero-step-upload::after {
animation: none;
opacity: 1;
transform: none;
filter: none;
}
}
.hero-step-num {
position: static;
transform: none;
width: 36px;
height: 36px;
border-radius: 999px;
display: inline-flex;
align-items: center;
justify-content: center;
background: linear-gradient(135deg, var(--accent), color-mix(in srgb, var(--accent) 72%, #9b6a50 28%));
color: var(--accent-fg);
font-size: .78rem;
font-weight: 700;
box-shadow: 0 12px 24px rgba(85,0,0,.18);
}
.hero-step-body {
display: grid;
grid-template-columns: 40px minmax(0, 1fr);
align-items: center;
gap: .8rem;
min-width: 0;
padding-top: .05rem;
}
.hero-step-title {
display: block;
color: var(--text);
font-size: 1.14rem;
font-weight: 700;
line-height: 1.25;
letter-spacing: 0;
}
.hero-step-copy {
display: block;
color: color-mix(in srgb, var(--muted) 92%, var(--text) 8%);
font-size: .82rem;
line-height: 1.35;
white-space: normal;
overflow-wrap: anywhere;
max-width: 100%;
}
.workflow-card-content {
position: relative;
z-index: 2;
display: grid;
gap: .7rem;
}
.workflow-card-content .upload-btn.compact {
width: 100%;
min-height: 124px;
}
.workflow-summary {
display: grid;
gap: .45rem;
color: var(--muted);
font-size: .84rem;
line-height: 1.45;
}
.workflow-summary-title {
color: var(--text);
font-size: .95rem;
font-weight: 700;
line-height: 1.3;
}
.workflow-mini-grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: .45rem;
}
.workflow-mini-stat {
border: 1px solid color-mix(in srgb, var(--line) 78%, transparent);
border-radius: 10px;
background: color-mix(in srgb, var(--surface) 82%, var(--brand-light) 18%);
padding: .55rem .6rem;
display: grid;
gap: .15rem;
min-width: 0;
}
.workflow-mini-stat strong {
color: var(--text);
font-size: .82rem;
line-height: 1.25;
overflow-wrap: anywhere;
}
.workflow-mini-stat span {
color: var(--muted);
font-size: .7rem;
line-height: 1.2;
}
.workflow-card-actions {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
gap: .45rem;
}
.workflow-action,
.workflow-format-choice {
border: 1px solid color-mix(in srgb, var(--line) 80%, transparent);
background: color-mix(in srgb, var(--surface) 88%, var(--brand-light) 12%);
color: var(--text);
border-radius: 10px;
padding: .55rem .7rem;
font: inherit;
font-size: .78rem;
font-weight: 700;
cursor: pointer;
}
.workflow-action:hover,
.workflow-format-choice:hover,
.workflow-format-choice.is-active {
border-color: color-mix(in srgb, var(--accent) 52%, var(--line) 48%);
color: var(--accent);
}
.workflow-format-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
gap: .45rem;
}
.workflow-format-choice {
display: grid;
gap: .12rem;
text-align: start;
}
.workflow-format-choice span {
color: var(--muted);
font-size: .68rem;
font-weight: 600;
}
.workflow-panels-slot {
display: grid;
gap: .7rem;
min-width: 0;
}
.workflow-panels-slot:empty {
display: none;
}
.workflow-panels-slot .workspace-results,
.workflow-panels-slot .results-dock {
margin: 0;
width: 100%;
max-width: none;
}
.workflow-panels-slot .dock-tabs {
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}
.workflow-panels-slot .dock-stage {
margin-top: .65rem;
}
.workflow-panels-slot .dock-panel {
background: color-mix(in srgb, var(--surface) 90%, transparent);
}
.control-layout {
display: block;
}
.intake-panels {
display: grid;
grid-template-columns: minmax(0, 1fr);
gap: .65rem;
margin-top: .35rem;
justify-items: center;
}
.intake-panel {
border: 1px solid color-mix(in srgb, var(--line) 90%, transparent);
border-radius: 22px;
background: color-mix(in srgb, var(--surface) 90%, var(--brand-light) 10%);
padding: 1rem;
display: grid;
gap: .65rem;
width: min(100%, 560px);
position: relative;
text-align: center;
box-shadow: 0 16px 34px rgba(26,29,38,.05);
animation: surfaceRise .56s ease both;
animation-delay: .12s;
}
.intake-panel-head {
display: flex;
align-items: center;
gap: .45rem;
justify-content: center;
text-align: start;
}
.simple-icon {
width: 32px;
height: 32px;
border-radius: 10px;
display: inline-flex;
align-items: center;
justify-content: center;
background: color-mix(in srgb, var(--surface) 76%, var(--brand-light) 24%);
color: var(--accent);
flex: 0 0 auto;
}
.simple-icon svg {
width: 16px;
height: 16px;
}
.intake-title {
font-size: .86rem;
font-weight: 700;
color: var(--text);
}
.intake-copy {
font-size: .72rem;
color: var(--muted);
line-height: 1.45;
}
.control-form {
min-width: 0;
width: 100%;
max-width: none;
margin: 0 auto;
}
.control-subhint { margin: 0 0 .35rem; }
.control-card.is-drop-target .intake-panel {
border-color: var(--accent);
background: color-mix(in srgb, var(--surface) 84%, var(--brand-light) 16%);
box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 10%, transparent);
}
.workspace-results,
.results-dock {
width: 100%;
display: grid;
gap: 1rem;
margin-top: 1.15rem;
padding-top: 1.15rem;
border-top: 1px solid color-mix(in srgb, var(--line) 84%, transparent);
animation: surfaceRise .45s ease both;
}
.results-dock {
width: min(100%, clamp(980px, 88vw, 1580px));
}
.dock-tabs {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(min(100%, 180px), 1fr));
gap: .75rem;
align-items: stretch;
}
.dock-tab {
position: relative;
width: 100%;
min-height: 118px;
padding: .95rem .9rem;
border-radius: 18px;
border: 1px solid color-mix(in srgb, var(--line) 90%, transparent);
background: linear-gradient(180deg, color-mix(in srgb, var(--surface) 96%, var(--brand-light) 4%), color-mix(in srgb, var(--surface) 90%, var(--brand-light) 10%));
color: var(--text);
display: grid;
justify-items: start;
align-content: start;
gap: .4rem;
text-align: start;
cursor: pointer;
box-shadow: 0 10px 28px rgba(26,29,38,.05);
transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease, background .22s ease;
animation: surfaceRise .4s ease both;
overflow: hidden;
}
.dock-tab::before {
content: "";
position: absolute;
inset: auto auto 0 0;
width: 100%;
height: 3px;
background: linear-gradient(90deg, var(--accent), color-mix(in srgb, var(--accent) 55%, var(--brand-light) 45%));
transform: scaleX(.18);
transform-origin: left center;
opacity: .5;
transition: transform .22s ease, opacity .22s ease;
}
.dock-tab:nth-child(2) { animation-delay: .04s; }
.dock-tab:nth-child(3) { animation-delay: .08s; }
.dock-tab:nth-child(4) { animation-delay: .12s; }
.dock-tab:nth-child(5) { animation-delay: .16s; }
.dock-tab:hover {
transform: translateY(-3px);
border-color: color-mix(in srgb, var(--accent) 38%, var(--line));
box-shadow: 0 16px 34px rgba(26,29,38,.08);
}
.dock-tab:hover::before,
.dock-tab.is-active::before {
transform: scaleX(1);
opacity: 1;
}
.dock-tab.is-active {
transform: translateY(-2px);
border-color: color-mix(in srgb, var(--accent) 46%, transparent);
background: linear-gradient(180deg, color-mix(in srgb, var(--surface) 82%, var(--brand-light) 18%), color-mix(in srgb, var(--surface) 90%, var(--brand-light) 10%));
box-shadow: 0 18px 38px rgba(26,29,38,.09);
}
.dock-tab::after {
content: "";
position: absolute;
left: 50%;
bottom: -16px;
transform: translate(-50%, -8px);
width: 0;
height: 0;
border-left: 14px solid transparent;
border-right: 14px solid transparent;
border-top: 14px solid var(--accent);
opacity: 0;
transition: opacity .2s ease, transform .2s ease;
pointer-events: none;
filter: drop-shadow(0 8px 8px rgba(26,29,38,.18));
}
.dock-tab.is-active::after {
opacity: 1;
transform: translate(-50%, 0);
}
.dock-tab.is-active .dock-icon {
background: var(--accent);
color: var(--accent-fg);
transform: translateY(-1px);
}
.dock-icon {
width: 42px;
height: 42px;
border-radius: 14px;
display: inline-flex;
align-items: center;
justify-content: center;
background: color-mix(in srgb, var(--surface) 68%, var(--brand-light) 32%);
color: var(--accent);
box-shadow: inset 0 1px 0 rgba(255,255,255,.5);
transition: transform .2s ease, background .2s ease, color .2s ease;
}
.dock-icon svg {
width: 20px;
height: 20px;
}
.dock-copy {
display: grid;
gap: .18rem;
}
.dock-title {
font-size: .84rem;
font-weight: 700;
line-height: 1.3;
color: var(--text);
}
.dock-subtitle {
font-size: .71rem;
line-height: 1.45;
color: var(--muted);
max-width: 18ch;
}
.dock-stage {
border: 1px solid color-mix(in srgb, var(--line) 90%, transparent);
border-radius: 24px;
background: linear-gradient(180deg, color-mix(in srgb, var(--surface) 95%, var(--brand-light) 5%), var(--surface));
box-shadow: 0 24px 52px rgba(26,29,38,.08);
overflow: hidden;
min-height: 120px;
position: relative;
}
.dock-stage::before {
content: "";
position: absolute;
inset: 0 0 auto;
height: 1px;
background: linear-gradient(90deg, transparent, rgba(255,255,255,.75), transparent);
}
.dock-stage.hidden {
display: none;
}
.dock-panel {
display: none;
padding: 1rem;
animation: dockPanelIn .22s ease both;
}
.dock-panel.is-active {
display: block;
}
.dock-panel-head {
display: flex;
align-items: center;
justify-content: space-between;
gap: .75rem;
margin-bottom: .85rem;
padding-bottom: .7rem;
border-bottom: 1px solid color-mix(in srgb, var(--line) 84%, transparent);
}
.dock-panel-title {
font-size: .82rem;
font-weight: 700;
color: var(--muted);
letter-spacing: .05em;
text-transform: uppercase;
}
.dock-panel-note {
font-size: .72rem;
color: var(--muted);
}
@keyframes surfaceRise {
from { opacity: 0; transform: translateY(16px); }
to { opacity: 1; transform: translateY(0); }
}
@keyframes dockPanelIn {
from { opacity: 0; transform: translateY(10px); }
to { opacity: 1; transform: translateY(0); }
}
@keyframes ambientFloat {
0%, 100% { transform: translate3d(0, 0, 0); }
50% { transform: translate3d(0, 18px, 0); }
}
@keyframes heroLift {
from { opacity: 0; transform: translateY(18px) scale(.99); }
to { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes stageCardFloat {
0%, 100% { transform: translate3d(0, 0, 0); }
50% { transform: translate3d(0, -8px, 0); }
}
@keyframes orbitDrift {
0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
50% { transform: translate3d(8px, -10px, 0) scale(1.04); }
}
h1 { margin: 0 0 .1rem; font-size: clamp(1.12rem, 1.5vw, 1.38rem); font-weight: 600; letter-spacing: -.02em; color: var(--brand); }
.control-copy h1 {
margin: 0;
font-size: clamp(2.4rem, 4vw, 4.25rem);
line-height: .96;
letter-spacing: -.06em;
text-wrap: balance;
}
html.dark h1 { color: var(--brand-light); }
.tagline {
margin: 0;
color: var(--muted);
font-size: clamp(.9rem, 1.05vw, 1.06rem);
max-width: 54ch;
text-wrap: balance;
}
.section-title {
margin: 0 0 .4rem; font-size: clamp(.66rem, .75vw, .74rem); font-weight: 600;
text-transform: uppercase; letter-spacing: .06em; color: var(--muted);
}
label.upload-btn {
display: inline-flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: .55rem;
width: 100%;
min-height: 180px;
cursor: pointer;
padding: 1.1rem;
color: var(--text);
background: color-mix(in srgb, var(--bg) 76%, var(--surface) 24%);
border: 1px dashed color-mix(in srgb, var(--line) 90%, transparent);
border-radius: 12px;
transition: border-color .2s, background .2s, transform .2s;
text-align: center;
position: relative;
overflow: hidden;
isolation: isolate;
}
label.upload-btn::before {
content: "";
position: absolute;
inset: -40% auto auto -20%;
width: 170px;
height: 170px;
border-radius: 999px;
background: radial-gradient(circle, color-mix(in srgb, var(--brand-light) 62%, transparent), transparent 70%);
opacity: .55;
transform: translate3d(0, 0, 0);
transition: transform .35s ease, opacity .35s ease;
z-index: 0;
}
label.upload-btn:hover {
border-color: var(--accent);
background: color-mix(in srgb, var(--surface) 82%, var(--brand-light) 18%);
transform: translateY(-2px);
}
label.upload-btn:hover::before {
transform: translate3d(18px, 10px, 0);
opacity: .75;
}
.upload-icon {
width: 54px;
height: 54px;
border-radius: 16px;
display: inline-flex;
align-items: center;
justify-content: center;
background: color-mix(in srgb, var(--surface) 70%, var(--brand-light) 30%);
color: var(--accent);
box-shadow: inset 0 1px 0 rgba(255,255,255,.45);
}
.upload-icon svg {
width: 26px;
height: 26px;
}
.upload-copy {
display: grid;
gap: .18rem;
justify-items: center;
}
.upload-gesture {
position: relative;
z-index: 1;
display: inline-grid;
place-items: center;
width: 38px;
height: 38px;
margin-top: .15rem;
color: var(--accent);
animation: uploadTap 1.15s cubic-bezier(.45,0,.55,1) infinite !important;
will-change: transform;
}
.upload-gesture::before {
content: "";
position: absolute;
inset: 5px;
border: 1px solid color-mix(in srgb, var(--accent) 42%, transparent);
border-radius: 50%;
animation: uploadTapRipple 1.15s ease-out infinite !important;
}
.upload-gesture svg {
position: relative;
z-index: 1;
width: 27px;
height: 27px;
fill: color-mix(in srgb, var(--surface) 88%, transparent);
stroke: currentColor;
transform-origin: 50% 18%;
animation: uploadFingerPress 1.15s cubic-bezier(.45,0,.55,1) infinite !important;
}
@keyframes uploadTap {
0%, 100% { transform: translateY(0) scale(1); }
42% { transform: translateY(4px) scale(.94); }
62% { transform: translateY(0) scale(1.04); }
}
@keyframes uploadTapRipple {
0%, 35% { opacity: 0; transform: scale(.55); }
48% { opacity: .8; }
100% { opacity: 0; transform: scale(1.55); }
}
@keyframes uploadFingerPress {
0%, 28%, 100% { transform: translateY(0) rotate(0) scale(1); }
45% { transform: translateY(7px) rotate(-8deg) scale(.88); }
62% { transform: translateY(-2px) rotate(3deg) scale(1.08); }
75% { transform: translateY(0) rotate(0) scale(1); }
}
.upload-btn.compact {
min-height: 138px;
gap: .4rem;
padding: .9rem;
width: 100%;
}
.upload-btn.has-preview {
border-style: solid;
border-color: color-mix(in srgb, var(--accent) 24%, var(--line));
background: color-mix(in srgb, var(--code-bg) 72%, var(--surface) 28%);
}
.upload-btn.has-preview .upload-copy,
.upload-btn.has-preview .upload-icon,
.upload-btn.has-preview .upload-gesture {
display: none;
}
.upload-btn.has-preview .upload-title,
.upload-btn.has-preview .upload-subtitle {
color: #fff;
text-shadow: 0 1px 10px rgba(0,0,0,.38);
}
.upload-btn.has-preview .upload-icon {
background: rgba(255,255,255,.16);
color: #fff;
backdrop-filter: blur(8px);
}
.upload-btn.compact .upload-icon {
width: 44px;
height: 44px;
border-radius: 14px;
}
.upload-btn.compact .upload-icon svg {
width: 20px;
height: 20px;
}
.upload-title {
font-size: clamp(.84rem, .95vw, .96rem);
font-weight: 700;
color: var(--text);
}
.upload-subtitle {
font-size: clamp(.68rem, .8vw, .76rem);
color: var(--muted);
line-height: 1.45;
max-width: 26ch;
}
input[type="file"].sr-only-file {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
opacity: 0;
cursor: pointer;
z-index: 2;
}
.hint { font-size: clamp(.68rem, .8vw, .76rem); color: var(--muted); margin: .22rem 0 .4rem; }
.status { font-size: clamp(.74rem, .85vw, .82rem); color: var(--muted); min-height: 1.2em; margin-top: .3rem; }
.status.error { color: #c44; }
.analysis-loader {
display: none;
grid-template-columns: auto minmax(0, 1fr) auto;
align-items: center;
gap: .2rem .65rem;
min-height: 68px;
width: 100%;
padding: .65rem .2rem .35rem;
color: var(--text);
border: 0;
border-radius: 0;
background: transparent;
position: relative;
inset: auto;
z-index: 1;
backdrop-filter: none;
box-shadow: none;
}
.analysis-loader.visible {
display: grid;
}
/* No fixed ratio: the frame takes the image's own shape so there are no
empty letterbox bars around it while analyzing. */
.analysis-loader-preview {
display: none;
grid-column: 1 / -1;
width: fit-content;
max-width: 100%;
margin: 0 auto .7rem;
overflow: hidden;
border-radius: 14px;
background: transparent;
position: relative;
line-height: 0;
}
.analysis-loader-preview img {
display: block;
width: auto;
height: auto;
max-width: 100%;
max-height: 70vh;
object-fit: contain;
}
.hero-step-analyze .analysis-loader.visible .analysis-loader-preview {
display: block;
}
/* Scan sweep over the image while it is being analyzed. */
.analysis-loader-preview::before,
.analysis-loader-preview::after {
content: "";
position: absolute;
left: 0;
right: 0;
pointer-events: none;
z-index: 2;
}
.analysis-loader-preview::before {
top: 0;
height: 34%;
background: linear-gradient(180deg,
transparent 0%,
color-mix(in srgb, var(--accent) 16%, transparent) 72%,
color-mix(in srgb, var(--accent) 26%, transparent) 100%);
animation: analysisScanBand 2.4s cubic-bezier(.55,0,.45,1) infinite;
}
.analysis-loader-preview::after {
top: 0;
height: 2px;
background: linear-gradient(90deg,
transparent, color-mix(in srgb, var(--accent) 85%, #fff 15%), transparent);
box-shadow: 0 0 12px color-mix(in srgb, var(--accent) 60%, transparent);
animation: analysisScanLine 2.4s cubic-bezier(.55,0,.45,1) infinite;
}
.analysis-loader.is-complete .analysis-loader-preview::before,
.analysis-loader.is-complete .analysis-loader-preview::after {
animation: none;
opacity: 0;
}
@keyframes analysisScanLine {
0% { top: 0%; opacity: 0; }
12% { opacity: 1; }
88% { opacity: 1; }
100% { top: 100%; opacity: 0; }
}
@keyframes analysisScanBand {
0% { top: -34%; opacity: 0; }
12% { opacity: 1; }
88% { opacity: 1; }
100% { top: 100%; opacity: 0; }
}
.hero-step-analyze .analysis-loader.visible {
padding: .2rem 0 .1rem;
}
.hero-step-analyze.is-active:not(.is-collapsed) {
min-height: min(760px, calc(100dvh - 120px - env(safe-area-inset-top, 0px)));
}
.hero-step-analyze.is-active:not(.is-collapsed) .workflow-card-content {
min-height: calc(100dvh - 220px - env(safe-area-inset-top, 0px));
align-items: center;
align-content: center;
}
.hero-step-analyze.is-active:not(.is-collapsed) .analysis-loader.visible {
align-self: center;
}
.analysis-loader-visual {
position: relative;
width: 38px;
height: 38px;
display: inline-grid;
place-items: center;
}
.analysis-loader-ring {
position: absolute;
inset: 0;
border-radius: 999px;
border: 2px solid color-mix(in srgb, var(--accent) 18%, transparent);
border-top-color: var(--accent);
border-inline-end-color: color-mix(in srgb, var(--accent) 58%, transparent);
animation: loaderSpin .72s linear infinite;
}
.analysis-loader-focus {
width: 20px;
height: 20px;
border-radius: 7px;
display: inline-grid;
place-items: center;
background: color-mix(in srgb, var(--accent) 12%, var(--surface) 88%);
animation: loaderFocus .9s ease-in-out infinite;
}
.analysis-loader-focus svg {
width: 12px;
height: 12px;
stroke: currentColor;
}
.analysis-loader-copy {
display: grid;
gap: .08rem;
min-width: 0;
width: 100%;
text-align: start;
justify-items: stretch;
}
.analysis-loader-copy > span {
display: block;
width: 100%;
text-align: inherit;
}
html[dir="rtl"] .analysis-loader-copy,
html[lang="ar"] .analysis-loader-copy {
direction: rtl;
text-align: right;
}
.analysis-loader-title {
font-size: clamp(.76rem, .86vw, .84rem);
font-weight: 800;
color: var(--text);
line-height: 1.25;
text-shadow: none;
}
.analysis-loader-stage {
color: color-mix(in srgb, var(--text) 76%, var(--muted) 24%);
font-size: clamp(.67rem, .76vw, .73rem);
font-weight: 650;
line-height: 1.25;
white-space: normal;
overflow-wrap: anywhere;
text-shadow: none;
}
.analysis-loader-stage.is-changing {
animation: loaderStageIn .28s cubic-bezier(.16,1,.3,1) both;
}
.analysis-loader-time {
font-size: clamp(.7rem, .78vw, .76rem);
color: var(--accent);
font-weight: 800;
line-height: 1.25;
font-variant-numeric: tabular-nums;
align-self: start;
padding-top: .08rem;
text-shadow: none;
}
.analysis-clarity-blocker {
display: grid;
grid-template-columns: auto minmax(0, 1fr);
align-items: center;
gap: .7rem;
margin: .75rem 0;
padding: .85rem .95rem;
border: 1px solid color-mix(in srgb, #c94747 42%, var(--line));
border-radius: 14px;
background: color-mix(in srgb, #c94747 8%, var(--surface));
color: var(--text);
}
.analysis-clarity-blocker.hidden { display: none; }
.analysis-clarity-blocker svg {
width: 25px;
height: 25px;
fill: none;
stroke: #c94747;
stroke-width: 2;
stroke-linecap: round;
stroke-linejoin: round;
}
.analysis-clarity-copy {
display: grid;
gap: .16rem;
min-width: 0;
text-align: start;
}
.analysis-clarity-copy strong { font-size: .82rem; }
.analysis-clarity-copy span { color: var(--muted); font-size: .7rem; line-height: 1.45; }
.analysis-loader-track {
grid-column: 1 / -1;
height: 5px;
overflow: hidden;
border-radius: 999px;
background: color-mix(in srgb, var(--line) 72%, var(--surface) 28%);
box-shadow: inset 0 1px 2px rgba(0,0,0,.08);
}
.analysis-loader-track::after {
content: "";
display: block;
width: var(--analysis-progress, 0%);
height: 100%;
border-radius: inherit;
background: linear-gradient(90deg, #e0cfc2 0%, #b45b50 58%, #7f0d08 100%);
box-shadow: 0 0 10px rgba(224,207,194,.42);
transition: width .42s cubic-bezier(.22,.7,.24,1);
}
.analysis-loader.is-complete .analysis-loader-track::after {
box-shadow: 0 0 14px rgba(224,207,194,.78);
}
/* A rotating tip while the user waits — separate from the functional stage
label above it, which reports real progress rather than entertainment. */
.analysis-loader-tip {
grid-column: 1 / -1;
display: block;
min-height: 1.3em;
margin-top: .1rem;
color: var(--muted);
font-size: .72rem;
font-style: italic;
line-height: 1.4;
text-align: center;
opacity: 0;
transform: translateY(3px);
transition: opacity .3s ease, transform .3s ease;
}
.analysis-loader-tip.is-visible {
opacity: 1;
transform: translateY(0);
}
.upload-btn.is-analyzing #preview-wrap::after {
content: "";
position: absolute;
z-index: 3;
inset-inline: 0;
top: 0;
height: 3px;
background: linear-gradient(90deg, transparent 0%, var(--accent) 22%, var(--accent) 78%, transparent 100%);
animation: analysisScan 1.18s cubic-bezier(.45,0,.55,1) infinite alternate;
box-shadow: 0 0 14px color-mix(in srgb, var(--accent) 72%, transparent);
pointer-events: none;
}
@keyframes loaderSpin { to { transform: rotate(360deg); } }
@keyframes loaderFocus {
0%, 100% { transform: scale(.84) rotate(-4deg); }
50% { transform: scale(1) rotate(4deg); }
}
@keyframes loaderStageIn {
from { opacity: 0; transform: translateY(5px); }
to { opacity: 1; transform: translateY(0); }
}
@keyframes analysisScan {
from { top: 0; opacity: .5; }
to { top: calc(100% - 3px); opacity: 1; }
}
.divider {
display: flex; align-items: center; gap: .8rem;
margin: .65rem 0; color: var(--muted); font-size: clamp(.68rem, .76vw, .74rem); font-weight: 600;
}
.accordion {
overflow: hidden;
}
.accordion-toggle {
width: 100%;
display: flex;
align-items: center;
justify-content: space-between;
gap: .75rem;
padding: 0;
border: none;
background: transparent;
color: inherit;
text-align: start;
cursor: pointer;
font: inherit;
}
.accordion-toggle .section-title {
margin-bottom: 0;
}
.accordion-chevron {
width: 22px;
height: 22px;
border-radius: 999px;
display: inline-flex;
align-items: center;
justify-content: center;
color: var(--muted);
background: color-mix(in srgb, var(--bg) 72%, var(--surface) 28%);
transition: transform .18s ease;
flex: 0 0 auto;
}
.accordion.is-open .accordion-chevron {
transform: rotate(180deg);
}
.accordion-body {
display: none;
margin-top: .7rem;
}
.accordion.is-open .accordion-body {
display: block;
}
@media (prefers-reduced-motion: reduce) {
body::before,
body::after,
.control-card,
.dock-tab,
.workspace-results,
.results-dock,
.dock-panel,
.analysis-loader-preview::before,
.analysis-loader-preview::after {
animation: none !important;
transition: none !important;
}
.analysis-loader-preview::before,
.analysis-loader-preview::after { opacity: 0; }
}
.feedback-form {
display: grid;
gap: .55rem;
}
.feedback-row {
display: flex;
gap: .45rem;
align-items: stretch;
}
.divider::before, .divider::after {
content: ""; flex: 1; height: 1px; background: var(--line);
}
.url-row {
display: flex; gap: .35rem; align-items: stretch;
}
.url-input {
flex: 1; padding: .5rem .68rem; border-radius: 10px;
border: 1px solid var(--line); background: var(--bg);
color: var(--text); font-size: clamp(.74rem, .85vw, .82rem); font-family: inherit;
outline: none; transition: border-color .2s;
}
.url-input:focus { border-color: var(--accent); }
.url-input::placeholder { color: var(--muted); opacity: .7; }
.url-btn {
padding: .5rem .8rem; border-radius: 10px; border: none;
background: var(--accent); color: var(--accent-fg);
font-size: clamp(.74rem, .85vw, .8rem); font-weight: 600; cursor: pointer;
white-space: nowrap; transition: background .2s;
}
.url-btn:hover { filter: brightness(1.08); }
.url-btn:disabled { opacity: .5; cursor: not-allowed; }
.url-detect {
margin-top: .3rem; font-size: clamp(.7rem, .82vw, .78rem); min-height: 1.2em;
display: flex; align-items: center; gap: .35rem;
}
.url-detect .platform-icon { font-size: 1rem; }
.url-detect .platform-text { color: var(--muted); }
.url-detect .platform-name { color: var(--accent); font-weight: 600; text-transform: capitalize; }
#preview-wrap {
display: none;
position: absolute;
inset: 10px;
width: auto;
height: auto;
margin-top: 0;
border-radius: 12px;
padding: 0;
overflow: hidden;
background: color-mix(in srgb, var(--code-bg) 78%, var(--surface) 22%);
z-index: 1;
}
#preview-wrap.visible {
display: block;
}
#preview {
width: 100%;
height: 100%;
display: block;
object-fit: contain;
border-radius: inherit;
background: color-mix(in srgb, var(--bg) 88%, var(--surface) 12%);
transition: filter .22s ease, transform .22s ease;
}
.upload-btn.has-preview #preview {
transform: none;
}
.upload-btn.is-analyzing #preview {
filter: brightness(.9) saturate(1);
}
.analysis-visual {
display: grid;
grid-template-columns: minmax(0, 1fr);
gap: .75rem;
margin-bottom: .85rem;
}
.analysis-canvas {
position: relative;
width: min(100%, 920px);
max-height: 68vh;
margin-inline: auto;
overflow: hidden;
border-radius: 18px;
background: #161313;
border: 1px solid color-mix(in srgb, var(--accent) 24%, var(--line));
box-shadow: 0 20px 50px rgba(52, 22, 18, .14);
}
.analysis-canvas img {
display: block;
width: 100%;
max-height: 68vh;
object-fit: contain;
}
.analysis-overlay {
position: absolute;
inset: 0;
pointer-events: none;
}
.analysis-grid-line {
position: absolute;
background: rgba(255, 255, 255, .58);
box-shadow: 0 0 0 1px rgba(25, 17, 15, .12);
}
.analysis-grid-line.is-v { top: 0; bottom: 0; width: 1px; }
.analysis-grid-line.is-h { left: 0; right: 0; height: 1px; }
.analysis-grid-line:nth-child(1), .analysis-grid-line:nth-child(3) { left: 33.333%; }
.analysis-grid-line:nth-child(2), .analysis-grid-line:nth-child(4) { left: 66.666%; }
.analysis-grid-line:nth-child(3), .analysis-grid-line:nth-child(4) { left: 0; }
.analysis-grid-line:nth-child(3) { top: 33.333%; }
.analysis-grid-line:nth-child(4) { top: 66.666%; }
.analysis-improvement-point {
position: absolute;
z-index: 4;
width: 25px;
height: 25px;
transform: translate(-50%, -50%);
border: 3px solid #fff;
border-radius: 50%;
background: #8f1711;
box-shadow: 0 0 0 4px rgba(143, 23, 17, .28), 0 5px 16px rgba(0,0,0,.38);
animation: improvementPointIn .5s cubic-bezier(.2,.8,.2,1) both;
}
.analysis-improvement-point::before {
content: "";
position: absolute;
inset: -10px;
border: 2px solid rgba(255,255,255,.82);
border-radius: 50%;
animation: improvementPointPulse 1.9s ease-out infinite;
}
.analysis-improvement-label {
position: absolute;
left: 50%;
bottom: calc(100% + 10px);
transform: translateX(-50%);
max-width: min(190px, 58vw);
padding: .36rem .55rem;
border-radius: 9px;
background: #ffd43b;
color: #17110a;
border: 1px solid rgba(23,17,10,.18);
box-shadow: 0 5px 14px rgba(0,0,0,.28);
font-size: .72rem;
font-weight: 800;
line-height: 1.15;
white-space: normal;
overflow-wrap: anywhere;
}
.analysis-improvement-index {
display: inline-grid;
place-items: center;
min-width: 1.15rem;
height: 1.15rem;
margin-inline-end: .3rem;
border-radius: 50%;
background: #17110a;
color: #fff;
font-size: .62rem;
}
.analysis-improvement-point.is-near-top .analysis-improvement-label { top: calc(100% + 10px); bottom: auto; }
.analysis-improvement-point.is-near-left .analysis-improvement-label { left: -8px; transform: none; }
.analysis-improvement-point.is-near-right .analysis-improvement-label { left: auto; right: -8px; transform: none; }
@keyframes improvementPointIn { from { opacity: 0; transform: translate(-50%, -50%) scale(.55); } to { opacity: 1; transform: translate(-50%, -50%) scale(1); } }
@keyframes improvementPointPulse { 0% { opacity: .9; transform: scale(.55); } 70%,100% { opacity: 0; transform: scale(1.45); } }
.analysis-readout {
position: absolute;
left: 12px;
right: 12px;
bottom: 12px;
z-index: 3;
display: flex;
flex-wrap: wrap;
gap: .4rem;
justify-content: center;
}
.analysis-readout span {
padding: .38rem .65rem;
border: 1px solid rgba(255,255,255,.24);
border-radius: 999px;
background: rgba(20, 14, 13, .82);
color: #fff;
box-shadow: 0 4px 14px rgba(0,0,0,.24);
backdrop-filter: blur(8px);
font-size: .7rem;
font-weight: 700;
}
.prompt-mode-switch {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: .45rem;
margin-bottom: .75rem;
padding: 0;
border: 0;
border-radius: 0;
background: transparent;
}
.prompt-mode-btn {
--mode-color: var(--warn-stripe);
--mode-bg: var(--warn-bg);
--mode-border: var(--warn-border);
position: relative;
display: grid;
min-height: 106px;
place-items: center;
align-content: center;
gap: .42rem;
border: 1px solid color-mix(in srgb, var(--mode-color) 24%, var(--line));
border-radius: 18px;
padding: .85rem .6rem;
background: color-mix(in srgb, var(--surface) 92%, var(--mode-bg) 8%);
color: var(--text);
font: inherit;
text-align: center;
cursor: pointer;
transition: border-color .18s ease, background .18s ease, box-shadow .18s ease, transform .18s ease;
}
.prompt-mode-btn:hover {
border-color: var(--mode-border);
background: color-mix(in srgb, var(--surface) 62%, var(--mode-bg) 38%);
box-shadow: 0 10px 22px color-mix(in srgb, var(--mode-color) 14%, transparent);
transform: translateY(-2px);
}
/* Each action uses the same compact icon-and-label treatment as mobile.
The longer name and helper copy remain in the markup for translation,
but do not make the desktop choices harder to scan. */
.prompt-mode-short {
display: block;
font-size: .76rem;
font-style: normal;
font-weight: 850;
line-height: 1.15;
}
.prompt-mode-icon {
display: grid !important;
place-items: center;
width: 42px;
height: 42px;
border-radius: 14px;
background: color-mix(in srgb, var(--mode-color) 13%, var(--surface));
color: var(--mode-color);
}
.prompt-mode-icon svg {
display: block;
width: 18px;
height: 18px;
stroke: currentColor;
fill: none;
}
.prompt-mode-btn.is-active .prompt-mode-icon { color: var(--accent); }
.prompt-mode-btn[data-prompt-mode="model"] {
--mode-color: #6657d9;
--mode-bg: color-mix(in srgb, #6657d9 13%, var(--surface));
--mode-border: color-mix(in srgb, #6657d9 48%, var(--line));
}
.prompt-mode-btn[data-prompt-mode="people"] {
--mode-color: #257a56;
--mode-bg: color-mix(in srgb, #257a56 13%, var(--surface));
--mode-border: color-mix(in srgb, #257a56 48%, var(--line));
}
.prompt-mode-btn[data-prompt-mode="presets"] {
--mode-color: #168d7f;
--mode-bg: color-mix(in srgb, #168d7f 13%, var(--surface));
--mode-border: color-mix(in srgb, #168d7f 48%, var(--line));
}
.prompt-mode-btn[data-prompt-mode="trends"] {
--mode-color: #a94caf;
--mode-bg: color-mix(in srgb, #a94caf 13%, var(--surface));
--mode-border: color-mix(in srgb, #a94caf 48%, var(--line));
}
.prompt-mode-btn::before,
.prompt-mode-btn strong,
.prompt-mode-btn .prompt-mode-note { display: none; }
.prompt-mode-btn.is-active {
border-color: var(--mode-border);
background: color-mix(in srgb, var(--surface) 36%, var(--mode-bg) 64%);
color: var(--text);
box-shadow: inset 0 -3px 0 var(--mode-color), 0 10px 22px color-mix(in srgb, var(--mode-color) 15%, transparent);
}
.prompt-mode-btn.is-active .prompt-mode-icon {
background: color-mix(in srgb, var(--mode-color) 19%, var(--surface));
}
.personal-change-panel {
display: grid;
gap: .65rem;
margin-bottom: .8rem;
padding: .75rem;
border: 1px solid var(--warn-border);
border-radius: 14px;
background: linear-gradient(135deg, color-mix(in srgb, var(--surface) 42%, var(--warn-bg) 58%), color-mix(in srgb, var(--surface) 80%, #ffe2ca 20%));
}
.studio-control-block {
display: grid;
gap: .38rem;
padding-top: .55rem;
border-top: 1px solid color-mix(in srgb, var(--warn-border) 76%, transparent);
}
.studio-control-head {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: .65rem;
}
.studio-control-head strong { font-size: .72rem; }
.studio-control-head span { color: var(--muted); font-size: .61rem; }
.studio-light-grid {
display: grid;
grid-template-columns: repeat(5, minmax(0, 1fr));
gap: .35rem;
}
.studio-light-toggle {
display: grid;
place-items: center;
gap: .24rem;
min-height: 58px;
padding: .42rem .3rem;
border: 1px solid var(--warn-border);
border-radius: 8px;
background: var(--surface);
color: var(--text);
font: inherit;
font-size: .66rem;
font-weight: 750;
cursor: pointer;
}
.studio-light-toggle svg {
width: 19px;
height: 19px;
fill: none;
stroke: currentColor;
stroke-width: 1.8;
stroke-linecap: round;
stroke-linejoin: round;
}
.studio-light-toggle.is-active {
border-color: var(--warn-stripe);
background: var(--warn-stripe);
color: #fff;
}
.fabric-color-row {
display: flex;
gap: .42rem;
flex-wrap: wrap;
}
.fabric-color-choice {
width: 34px;
height: 34px;
border: 2px solid var(--surface);
border-radius: 50%;
background: var(--fabric-color);
box-shadow: 0 0 0 1px var(--line);
cursor: pointer;
}
.fabric-color-choice.is-active {
box-shadow: 0 0 0 2px var(--warn-stripe), 0 0 0 4px var(--surface);
}
@media (max-width: 640px) {
.prompt-mode-btn { padding-inline: 1.45rem .42rem; }
[dir="rtl"] .prompt-mode-btn { padding-inline: .42rem 1.45rem; }
.prompt-mode-btn::before { inset-inline-start: .5rem; }
.prompt-mode-btn strong { font-size: .68rem; }
.prompt-mode-btn span { display: none; }
.studio-light-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.studio3d { display: grid; gap: .7rem; }
.studio3d-stage {
position: relative;
width: 100%;
aspect-ratio: 4 / 3;
max-height: 58vh;
overflow: hidden;
border: 1px solid var(--line);
border-radius: 16px;
background: linear-gradient(180deg, #edeae5, #d8d2cb);
cursor: grab;
touch-action: none;
}
.studio3d-stage:active { cursor: grabbing; }
.studio3d-stage canvas { display: block; width: 100%; height: 100%; }
.studio3d-stage.is-mounting::before {
position: absolute;
inset: 12%;
z-index: 5;
border-radius: 18px;
background:
linear-gradient(90deg, transparent, rgba(255,255,255,.58), transparent) -120% 0 / 70% 100% no-repeat,
color-mix(in srgb, #d5d0ca 76%, #fff);
animation: studioSkeleton 1.25s ease-in-out infinite;
content: "";
}
.studio3d-stage.is-mounting::after {
position: absolute;
left: 22%;
right: 22%;
bottom: 8%;
z-index: 5;
height: 9px;
border-radius: 999px;
background: rgba(255,255,255,.62);
content: "";
}
@keyframes studioSkeleton { to { background-position: 220% 0, 0 0; } }
.studio3d-hint {
position: absolute;
left: 50%;
bottom: .55rem;
transform: translateX(-50%);
z-index: 2;
padding: .3rem .7rem;
border-radius: 999px;
background: rgba(18, 14, 12, .55);
color: #fff;
font-size: .66rem;
font-weight: 600;
pointer-events: none;
white-space: nowrap;
transition: opacity .35s ease;
}
.studio3d-hint.is-faded { opacity: 0; }
.studio3d-spec {
position: absolute;
top: .55rem;
left: .55rem;
z-index: 2;
display: inline-flex;
align-items: center;
gap: .36rem;
padding: .3rem .55rem;
border: 1px solid rgba(255, 255, 255, .28);
border-radius: 999px;
background: rgba(14, 15, 17, .62);
color: rgba(255, 255, 255, .94);
box-shadow: 0 8px 28px rgba(0, 0, 0, .16);
backdrop-filter: blur(8px);
font-size: .6rem;
font-weight: 700;
letter-spacing: .025em;
pointer-events: none;
}
.studio3d-spec::before {
width: .38rem;
height: .38rem;
border-radius: 50%;
background: #62d98b;
box-shadow: 0 0 0 3px rgba(98, 217, 139, .16);
content: "";
}
.studio3d-fallback {
position: absolute;
inset: 0;
z-index: 3;
display: grid;
align-content: center;
justify-items: center;
gap: .3rem;
padding: 1rem;
text-align: center;
background: var(--surface);
}
.studio3d-fallback strong { font-size: .85rem; }
.studio3d-fallback span { max-width: 34ch; color: var(--muted); font-size: .72rem; line-height: 1.45; }
.studio3d-hidden-hosts { display: none; }
/* Controls float over the scene so the studio owns the whole frame. */
.studio3d-dock {
position: absolute;
left: 0;
right: 0;
bottom: 0;
z-index: 3;
display: grid;
gap: .4rem;
padding: .6rem .65rem calc(.6rem + env(safe-area-inset-bottom, 0px));
background: linear-gradient(180deg, transparent, rgba(12, 9, 8, .82) 38%);
backdrop-filter: blur(6px);
}
.studio3d-dock-row {
display: flex;
align-items: center;
gap: .4rem;
min-width: 0;
}
.studio3d-dock .studio3d-label {
flex: 0 0 62px;
color: rgba(255,255,255,.72);
font-size: .6rem;
}
.studio3d-dock .studio3d-chips,
.studio3d-dock .studio3d-swatches {
flex: 1 1 auto;
flex-wrap: nowrap;
overflow-x: auto;
scrollbar-width: none;
padding-bottom: 2px;
}
.studio3d-dock .studio3d-chips::-webkit-scrollbar,
.studio3d-dock .studio3d-swatches::-webkit-scrollbar { display: none; }
.studio3d-dock .studio3d-chip {
flex: 0 0 auto;
border-color: rgba(255,255,255,.22);
background: rgba(255,255,255,.1);
color: #fff;
font-size: .68rem;
padding: .28rem .55rem;
}
.studio3d-dock .studio3d-chip.is-selected {
border-color: #fff;
background: #fff;
color: #17120f;
}
.studio3d-dock .studio3d-swatch { flex: 0 0 auto; width: 22px; height: 22px; }
.studio3d-dock .studio3d-color-input { flex: 0 0 auto; width: 26px; height: 22px; }
.studio3d-context-head {
display: flex;
align-items: center;
justify-content: space-between;
gap: .5rem;
}
.studio3d-context-head .studio3d-label { flex: 1 1 auto; }
.studio3d-context-close {
flex: 0 0 auto;
width: 24px;
height: 24px;
padding: 0;
border: 0;
border-radius: 7px;
background: rgba(255,255,255,.16);
color: #fff;
font-size: .7rem;
cursor: pointer;
}
.studio3d-context-body { display: grid; gap: .4rem; }
.studio3d-expand {
position: absolute;
top: .5rem;
inset-inline-end: .5rem;
z-index: 4;
width: 32px;
height: 32px;
display: grid;
place-items: center;
padding: 0;
border: 0;
border-radius: 9px;
background: rgba(18, 14, 12, .55);
color: #fff;
cursor: pointer;
}
.studio3d-expand svg { width: 16px; height: 16px; }
.studio3d-exit-fullscreen {
display: none;
position: absolute;
top: calc(.55rem + env(safe-area-inset-top, 0px));
left: 50%;
z-index: 9;
transform: translateX(-50%);
min-height: 36px;
padding: .45rem .8rem;
border: 1px solid rgba(255,255,255,.28);
border-radius: 999px;
background: rgba(18,14,12,.72);
color: #fff;
font: inherit;
font-size: .7rem;
font-weight: 800;
backdrop-filter: blur(8px);
cursor: pointer;
}
/* Full-screen studio: the set fills the viewport, controls stay docked. */
.studio3d.is-fullscreen {
position: fixed;
inset: 0;
z-index: 4000;
margin: 0;
background: #0d0a09;
}
.studio3d.is-fullscreen .studio3d-stage {
width: 100%;
height: 100%;
max-height: none;
aspect-ratio: auto;
border: 0;
border-radius: 0;
}
.studio3d.is-fullscreen .studio3d-exit-fullscreen { display: inline-flex; }
.studio3d.is-fullscreen .studio3d-expand { display: none; }
.studio3d-controls { display: grid; gap: .55rem; }
.studio3d-group { display: grid; gap: .3rem; }
.studio3d-label {
color: var(--muted);
font-size: .66rem;
font-weight: 800;
text-transform: uppercase;
letter-spacing: .05em;
}
.studio3d-chips { display: flex; flex-wrap: wrap; gap: .3rem; }
.studio3d-chip {
padding: .34rem .68rem;
border: 1px solid var(--line);
border-radius: 999px;
background: var(--surface);
color: var(--text);
font-size: .72rem;
font-weight: 700;
font-family: inherit;
cursor: pointer;
transition: border-color .18s ease, background .18s ease, color .18s ease;
}
.studio3d-chip:hover { border-color: var(--accent); color: var(--accent); }
.studio3d-chip.is-selected {
border-color: var(--accent);
background: var(--accent);
color: var(--accent-fg);
}
.studio3d-tip {
margin: 0;
padding: .45rem .6rem;
border-radius: 9px;
background: color-mix(in srgb, var(--accent) 8%, transparent);
color: var(--muted);
font-size: .7rem;
line-height: 1.45;
}
.studio3d-swatches { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem; }
.studio3d-swatch {
width: 26px;
height: 26px;
padding: 0;
border: 2px solid transparent;
border-radius: 50%;
box-shadow: 0 0 0 1px var(--line);
cursor: pointer;
transition: transform .16s ease, border-color .16s ease;
}
.studio3d-swatch:hover { transform: scale(1.12); }
.studio3d-swatch.is-selected { border-color: var(--accent); transform: scale(1.12); }
.studio3d-color-input {
width: 30px;
height: 26px;
padding: 0;
border: 1px solid var(--line);
border-radius: 7px;
background: none;
cursor: pointer;
}
@media (max-width: 560px) {
.studio3d-stage { aspect-ratio: 1 / 1; max-height: 46vh; }
.studio3d-chip { font-size: .68rem; padding: .3rem .6rem; }
.studio3d-label { font-size: .62rem; }
}
.personal-suggestion-group,
.personal-note-label { display: grid; gap: .35rem; }
.personal-group-head {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: .55rem;
}
.personal-group-head strong { font-size: .75rem; }
.personal-group-head span {
color: var(--muted);
font-size: .61rem;
}
.personal-suggestion-row {
display: flex;
gap: .32rem;
flex-wrap: nowrap;
overflow-x: auto;
padding: .04rem .02rem .22rem;
scrollbar-width: thin;
}
.personal-suggestion-chip {
flex: 0 0 auto;
display: inline-flex;
align-items: center;
gap: .32rem;
min-height: 32px;
max-width: 190px;
padding: .35rem .58rem;
overflow: hidden;
border: 1px solid color-mix(in srgb, var(--warn-stripe) 38%, var(--line));
border-radius: 999px;
background: var(--surface);
color: var(--text);
font: inherit;
font-size: .67rem;
font-weight: 750;
white-space: normal;
overflow-wrap: anywhere;
cursor: pointer;
}
.personal-suggestion-chip svg {
width: 16px;
height: 16px;
flex: 0 0 auto;
fill: none;
stroke: currentColor;
stroke-width: 1.9;
stroke-linecap: round;
stroke-linejoin: round;
}
.personal-suggestion-chip.is-selected {
border-color: var(--warn-stripe);
background: var(--warn-stripe);
color: #fff;
box-shadow: 0 5px 12px color-mix(in srgb, var(--warn-stripe) 20%, transparent);
}
.creative-preference-block {
display: grid;
gap: .32rem;
padding-top: .48rem;
border-top: 1px solid color-mix(in srgb, var(--warn-border) 75%, transparent);
}
.creative-choice-grid {
display: flex;
gap: .32rem;
flex-wrap: nowrap;
overflow-x: auto;
padding: .04rem .02rem .22rem;
scrollbar-width: thin;
}
.creative-choice {
flex: 0 0 auto;
display: inline-flex;
align-items: center;
gap: .34rem;
min-height: 34px;
max-width: 190px;
padding: .34rem .56rem;
overflow: hidden;
border: 1px solid color-mix(in srgb, var(--warn-stripe) 30%, var(--line));
border-radius: 999px;
background: var(--surface);
color: var(--text);
font: inherit;
font-size: .66rem;
font-weight: 750;
text-align: start;
white-space: normal;
cursor: pointer;
}
.creative-choice.is-selected {
border-color: var(--warn-stripe);
background: var(--warn-stripe);
color: #fff;
box-shadow: 0 5px 12px color-mix(in srgb, var(--warn-stripe) 20%, transparent);
}
.creative-choice-icon {
display: grid;
width: 22px;
height: 22px;
flex: 0 0 22px;
place-items: center;
border-radius: 999px;
background: color-mix(in srgb, var(--warn-stripe) 10%, var(--surface));
color: var(--warn-stripe);
}
.creative-choice.is-selected .creative-choice-icon {
background: rgba(255,255,255,.2);
color: #fff;
}
.creative-choice-icon svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.creative-choice-copy { display: block; min-width: 0; overflow-wrap: anywhere; }
.creative-choice-copy strong { display: inline; font-size: inherit; line-height: 1.2; }
.creative-choice-copy span { display: none; }
.creative-reason {
padding: .5rem .6rem;
border-radius: 10px;
background: color-mix(in srgb, #6657d9 8%, var(--surface));
color: var(--muted);
font-size: .64rem;
line-height: 1.45;
}
.custom-background-wrap { display: grid; gap: .25rem; }
.custom-background-wrap input {
width: 100%;
min-height: 42px;
padding: .55rem .65rem;
border: 1px solid var(--warn-border);
border-radius: 10px;
background: var(--surface);
color: var(--text);
font: inherit;
font-size: .72rem;
}
.personal-note-label textarea {
min-height: 72px;
resize: vertical;
border: 1px solid var(--warn-border);
border-radius: 10px;
padding: .58rem .65rem;
background: var(--surface);
color: var(--text);
font: inherit;
font-size: .74rem;
line-height: 1.45;
}
.personal-note-label textarea:focus {
border-color: var(--warn-stripe);
outline: 3px solid color-mix(in srgb, var(--warn-stripe) 16%, transparent);
}
.personal-note-label > span {
color: var(--muted);
font-size: .63rem;
}
.custom-improvements {
display: grid;
gap: .55rem;
margin-bottom: .85rem;
padding: .8rem;
border: 1px solid color-mix(in srgb, #6657d9 42%, var(--line));
border-radius: 14px;
background: linear-gradient(135deg, color-mix(in srgb, var(--surface) 84%, #6657d9 16%), color-mix(in srgb, var(--surface) 90%, var(--ok-bg) 10%));
}
.custom-improvement-grid { display: flex; flex-wrap: wrap; gap: .42rem; }
.custom-improvement-btn {
border: 1px solid var(--line);
border-radius: 999px;
padding: .46rem .7rem;
background: var(--surface);
color: var(--text);
font: inherit;
font-size: .74rem;
font-weight: 700;
cursor: pointer;
}
.custom-improvement-btn.is-active {
border-color: var(--accent);
background: var(--accent);
color: #fff;
}
.smart-actions-card {
display: grid;
gap: .55rem;
padding: .75rem;
border: 1px solid color-mix(in srgb, var(--accent) 32%, var(--line));
border-radius: 16px;
background: color-mix(in srgb, var(--surface) 92%, var(--brand-light) 8%);
box-shadow: 0 12px 28px rgba(91, 25, 18, .07);
}
.smart-actions-head {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: .8rem;
}
.smart-actions-head > div { display: grid; gap: 0; }
.smart-actions-head strong { font-size: .94rem; }
.smart-actions-count {
flex: 0 0 auto;
padding: .28rem .5rem;
border-radius: 999px;
background: color-mix(in srgb, var(--accent) 10%, var(--surface));
color: var(--accent);
font-size: .66rem;
font-weight: 800;
}
.smart-action-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 280px));
gap: .4rem;
}
.smart-action-btn {
position: relative;
display: grid;
align-content: start;
gap: .22rem;
min-height: 54px;
padding: .52rem 1.8rem .52rem .62rem;
border: 1px solid var(--line);
border-radius: 12px;
background: var(--surface);
color: var(--text);
font: inherit;
text-align: start;
cursor: pointer;
}
[dir="rtl"] .smart-action-btn { padding: .52rem .62rem .52rem 1.8rem; }
.smart-action-btn strong { font-size: .76rem; line-height: 1.3; }
.smart-action-btn span { color: var(--muted); font-size: .66rem; line-height: 1.35; }
.smart-action-btn::after {
content: "✓";
position: absolute;
inset-inline-end: .62rem;
top: .62rem;
display: grid;
place-items: center;
width: 18px;
height: 18px;
border: 1px solid var(--line);
border-radius: 50%;
color: transparent;
font-size: .65rem;
font-weight: 900;
}
.smart-action-btn.is-active {
border-color: var(--accent);
background: color-mix(in srgb, var(--accent) 8%, var(--surface));
box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 38%, transparent);
}
.smart-action-btn.is-active::after {
border-color: var(--accent);
background: var(--accent);
color: #fff;
}
.smart-action-btn.is-readonly {
cursor: default;
border-color: color-mix(in srgb, #6657d9 28%, var(--line));
background: linear-gradient(135deg, color-mix(in srgb, var(--surface) 92%, #6657d9 8%), var(--surface));
box-shadow: none;
}
.smart-action-btn.is-readonly::after {
content: "✦";
border: 0;
background: color-mix(in srgb, #6657d9 12%, var(--surface));
color: #6657d9;
}
.smart-action-empty {
grid-column: 1 / -1;
display: flex;
align-items: center;
gap: .55rem;
min-height: 48px;
padding: .65rem .75rem;
border: 1px solid color-mix(in srgb, #25855b 34%, var(--line));
border-radius: 11px;
background: color-mix(in srgb, #e8f7ef 72%, var(--surface));
color: #216c4b;
font-size: .74rem;
font-weight: 750;
}
.smart-action-empty::before {
content: "✓";
display: grid;
place-items: center;
flex: 0 0 22px;
width: 22px;
height: 22px;
border-radius: 50%;
background: #2a9466;
color: #fff;
font-size: .72rem;
font-weight: 900;
}
.analysis-learning-card {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
column-gap: 1rem;
row-gap: .38rem;
padding: .35rem 0;
border: 0;
border-radius: 0;
background: transparent;
box-shadow: none;
}
.analysis-learning-head {
display: grid;
flex: 1 1 auto;
gap: .12rem;
}
.analysis-learning-head strong {
color: var(--text);
font-size: .74rem;
font-weight: 650;
line-height: 1.35;
}
.analysis-learning-head span,
.analysis-learning-consent,
.analysis-learning-status {
color: var(--muted);
font-size: .68rem;
line-height: 1.4;
}
.analysis-learning-consent {
display: none;
}
.analysis-learning-actions,
.analysis-correction-chips {
display: flex;
flex-wrap: wrap;
gap: .5rem;
}
.analysis-learning-actions {
flex: 0 0 auto;
align-items: center;
}
.analysis-learning-btn,
.analysis-correction-chip,
.analysis-learning-save {
min-height: 38px;
padding: .42rem .7rem;
border: 1px solid var(--line);
border-radius: 999px;
background: var(--surface);
color: var(--text);
font: inherit;
font-size: .7rem;
font-weight: 750;
cursor: pointer;
}
.analysis-learning-btn {
display: inline-flex;
align-items: center;
justify-content: center;
width: 34px;
min-height: 34px;
padding: 0;
border: 0;
border-radius: 0;
background: transparent;
box-shadow: none;
transition: transform .16s ease, opacity .16s ease, filter .16s ease;
}
.analysis-learning-btn[data-analysis-rating="correct"] {
color: #23965f;
background: transparent;
}
.analysis-learning-btn[data-analysis-rating="needs_work"] {
color: #d24c52;
background: transparent;
}
.analysis-learning-btn:hover {
transform: scale(1.12);
filter: brightness(.92);
box-shadow: none;
}
.analysis-learning-btn svg {
width: 25px;
height: 25px;
flex: 0 0 auto;
stroke: currentColor;
}
.analysis-learning-btn.is-selected,
.analysis-correction-chip.is-selected {
border-color: var(--accent);
background: color-mix(in srgb, var(--accent) 9%, var(--surface));
color: var(--accent);
}
.analysis-learning-btn.is-selected[data-analysis-rating="correct"] {
border-color: transparent;
background: transparent;
color: #16804d;
transform: scale(1.12);
filter: drop-shadow(0 3px 5px rgba(35, 150, 95, .24));
box-shadow: none;
}
.analysis-learning-btn.is-selected[data-analysis-rating="needs_work"] {
border-color: transparent;
background: transparent;
color: #bd343b;
transform: scale(1.12);
filter: drop-shadow(0 3px 5px rgba(210, 76, 82, .24));
box-shadow: none;
}
.analysis-learning-details {
display: grid;
flex: 1 0 100%;
gap: .5rem;
padding-top: .15rem;
}
.analysis-learning-status {
flex: 1 0 100%;
}
.analysis-learning-note {
width: 100%;
min-height: 72px;
resize: vertical;
padding: .62rem .7rem;
border: 1px solid var(--line);
border-radius: 10px;
background: var(--surface);
color: var(--text);
font: inherit;
font-size: .72rem;
line-height: 1.4;
}
.analysis-learning-save {
justify-self: start;
border-color: var(--accent);
background: var(--accent);
color: var(--accent-fg);
}
.analysis-learning-status.is-error { color: #b64141; }
.analysis-learning-status.is-saved { color: #237150; }
.carousel-strip {
display: flex; gap: .35rem; overflow-x: auto; padding: .1rem 0 0;
scrollbar-width: thin;
}
.carousel-strip::-webkit-scrollbar { height: 5px; }
.carousel-strip::-webkit-scrollbar-thumb { background: var(--muted); border-radius: 4px; }
.carousel-thumb {
flex-shrink: 0; width: clamp(50px, 4vw, 60px); height: clamp(50px, 4vw, 60px);
border-radius: 8px; border: 2px solid var(--line);
object-fit: contain; background: var(--bg); cursor: pointer; opacity: .7;
transition: all .2s;
}
.carousel-thumb:hover { opacity: 1; border-color: var(--accent); }
.carousel-thumb.active {
opacity: 1; border-color: var(--accent);
box-shadow: 0 0 0 2px var(--accent);
}
.carousel-label {
font-size: .7rem; color: var(--muted); margin-top: .05rem;
}
.hidden { display: none !important; }
.product-card-inner { display: flex; flex-direction: column; gap: .4rem; }
.product-name { font-size: 1.1rem; font-weight: 600; color: var(--text); }
.product-meta {
display: flex; flex-wrap: wrap; gap: .4rem; align-items: center;
}
.product-badge {
display: inline-flex; align-items: center; gap: .2rem;
padding: .2rem .55rem; border-radius: 6px; font-size: .72rem; font-weight: 600;
}
.product-badge.type {
background: var(--accent); color: var(--accent-fg);
}
.product-badge.confidence {
background: var(--code-bg); color: var(--muted); border: 1px solid var(--line);
}
.product-badge.method {
background: transparent; color: var(--muted); border: 1px solid var(--line);
font-weight: 400;
}
.obj-chips {
display: flex; gap: .4rem; flex-wrap: wrap; margin-top: .2rem;
}
.obj-chip {
display: inline-flex; align-items: center; gap: .2rem;
padding: .15rem .45rem; border-radius: 5px; font-size: .7rem;
background: var(--code-bg); color: var(--muted);
border: 1px solid var(--line);
}
.obj-chip strong { color: var(--text); font-weight: 600; }
.understanding-block {
display: flex; flex-direction: column; gap: .22rem;
padding: .6rem .7rem; border-radius: 10px;
border: 1px solid var(--line);
background: color-mix(in srgb, var(--code-bg) 78%, var(--surface) 22%);
margin-top: .15rem;
}
.understanding-block strong {
font-size: .72rem;
text-transform: uppercase;
letter-spacing: .04em;
color: var(--muted);
}
.understanding-block span {
color: var(--text);
font-size: .86rem;
line-height: 1.45;
}
.detected-text-list {
display: flex;
flex-wrap: wrap;
gap: .35rem;
margin-top: .15rem;
}
.detected-text-chip {
display: inline-flex;
align-items: center;
max-width: 100%;
padding: .3rem .5rem;
border-radius: 8px;
background: color-mix(in srgb, var(--surface) 80%, var(--brand-light) 20%);
border: 1px solid color-mix(in srgb, var(--line) 88%, transparent);
color: var(--text);
font-size: .78rem;
line-height: 1.35;
word-break: break-word;
unicode-bidi: plaintext;
}
.source-banner {
display: flex; align-items: center; gap: .55rem; flex-wrap: wrap;
padding: .55rem .72rem; border-radius: 12px;
background: linear-gradient(180deg, color-mix(in srgb, var(--code-bg) 82%, var(--surface) 18%), var(--code-bg));
border: 1px solid var(--line);
font-size: .82rem; margin-bottom: .2rem;
}
.source-banner .source-platform {
display: inline-flex; align-items: center; gap: .3rem;
font-weight: 600; color: var(--accent);
}
.source-banner .source-user {
display: inline-flex; align-items: center; gap: .25rem;
font-weight: 600; color: var(--text);
}
.source-banner .source-user a {
color: var(--accent); text-decoration: none;
}
.source-banner .source-user a:hover { text-decoration: underline; }
.source-badge {
display: inline-flex; align-items: center; gap: .2rem;
padding: .15rem .45rem; border-radius: 5px; font-size: .68rem;
background: var(--bg); color: var(--muted); border: 1px solid var(--line);
}
.action-bar {
display: flex; gap: .35rem; flex-wrap: wrap; margin-top: .2rem;
}
.action-btn {
display: inline-flex; align-items: center; gap: .35rem;
padding: .38rem .68rem; border-radius: 9px; border: 1px solid var(--line);
font-size: clamp(.68rem, .78vw, .75rem); font-weight: 600; font-family: inherit;
cursor: pointer; transition: all .2s; background: var(--surface); color: var(--text);
}
.action-btn:hover { border-color: var(--accent); color: var(--accent); }
.action-btn:disabled { opacity: .5; cursor: not-allowed; }
.action-btn.save { background: var(--accent); color: var(--accent-fg); border-color: var(--accent); }
.action-btn.save:hover { filter: brightness(1.1); }
.action-btn.save.saved { background: var(--ok-stripe); border-color: var(--ok-stripe); }
.action-btn.dm { background: linear-gradient(135deg, #833ab4, #fd1d1d, #fcb045); color: #fff; border: none; }
.action-btn.dm:hover { filter: brightness(1.1); }
.action-btn svg { width: 15px; height: 15px; }
.action-btn.editor-link { background: var(--surface); color: var(--accent); border: 2px solid var(--accent); text-decoration: none; }
.action-btn.editor-link:hover { filter: brightness(1.05); background: var(--toggle-bg); }
.metrics { display: grid; grid-template-columns: repeat(auto-fit, minmax(118px, 1fr)); gap: .25rem .45rem; font-size: clamp(.7rem, .82vw, .78rem); margin-bottom: .05rem; }
.metrics dt { color: var(--muted); margin: 0; }
.metrics dd { margin: 0; font-weight: 700; }
.insight {
padding: .46rem .58rem .46rem .72rem; border-radius: 10px;
margin-bottom: 0; font-size: clamp(.72rem, .84vw, .8rem);
border: 1px solid var(--line); transition: background .25s;
border-inline-start: 4px solid var(--line);
}
.insight:last-child { margin-bottom: 0; }
.insight.warn { background: var(--warn-bg); border-color: var(--warn-border); border-inline-start-color: var(--warn-stripe); }
.insight.ok { background: var(--ok-bg); border-color: var(--ok-border); border-inline-start-color: var(--ok-stripe); }
.insight.info { background: var(--info-bg); border-color: var(--info-border); border-inline-start-color: var(--info-stripe); }
.insight strong { display: block; margin-bottom: .15rem; color: var(--text); }
.insight span { color: var(--muted); font-size: clamp(.66rem, .78vw, .75rem); }
.insight.ok strong::before,
.insight.warn strong::before,
.insight.info strong::before { content: ""; }
.insight-category {
font-size: clamp(.62rem, .72vw, .68rem); font-weight: 600; text-transform: uppercase;
letter-spacing: .05em; color: var(--muted); margin: .2rem 0 .1rem;
display: flex; align-items: center; gap: .4rem;
}
.insight-category:first-child { margin-top: 0; }
.insight-category::after {
content: ""; flex: 1; height: 1px; background: var(--line);
}
.palette { display: flex; gap: .35rem; margin: .15rem 0; flex-wrap: wrap; }
.swatch-wrap {
display: flex; flex-direction: column; align-items: center; gap: .15rem;
position: relative; cursor: pointer;
}
.swatch { width: clamp(28px, 2.4vw, 34px); height: clamp(28px, 2.4vw, 34px); border-radius: 8px; border: 1px solid var(--line); transition: transform .15s, box-shadow .15s; }
.swatch-wrap:hover .swatch { transform: scale(1.15); box-shadow: 0 4px 12px rgba(0,0,0,.18); }
.swatch-label { font-size: clamp(.54rem, .62vw, .6rem); color: var(--muted); text-align: center; max-width: 54px; line-height: 1.15; }
.swatch-hex { font-size: clamp(.5rem, .58vw, .56rem); color: var(--muted); font-family: "IBM Plex Sans", monospace; opacity: .75; }
.swatch-wrap .swatch-tip {
position: absolute; bottom: calc(100% + 10px); left: 50%; transform: translateX(-50%);
background: var(--text); color: var(--bg); border-radius: 6px;
padding: .3rem .55rem; white-space: nowrap; font-size: .72rem; font-weight: 600;
box-shadow: 0 4px 14px rgba(0,0,0,.25);
opacity: 0; visibility: hidden; transition: opacity .15s, visibility .15s;
z-index: 20; pointer-events: none;
}
.swatch-wrap .swatch-tip::after {
content: ""; position: absolute; top: 100%; left: 50%; transform: translateX(-50%);
border: 5px solid transparent; border-top-color: var(--text);
}
.swatch-wrap:hover .swatch-tip { opacity: 1; visibility: visible; }
.swatch-copied {
position: absolute; bottom: calc(100% + 10px); left: 50%; transform: translateX(-50%);
background: var(--ok-stripe); color: #fff; border-radius: 6px;
padding: .25rem .5rem; font-size: .7rem; font-weight: 600;
white-space: nowrap; z-index: 25; pointer-events: none;
animation: copiedFade .9s ease forwards;
}
@keyframes copiedFade { 0%{opacity:1;transform:translateX(-50%) translateY(0)} 100%{opacity:0;transform:translateX(-50%) translateY(-8px)} }
.format-chip-row {
display: flex; gap: .4rem; flex-wrap: wrap; margin: .45rem 0 .55rem;
}
.format-chip {
padding: .36rem .68rem; border-radius: 10px; border: 1px solid var(--line);
background: var(--bg); color: var(--text); font-family: inherit; font-size: clamp(.68rem, .76vw, .74rem); font-weight: 600;
cursor: pointer; transition: all .2s;
}
.format-chip:hover { border-color: var(--accent); color: var(--accent); }
html.dark .format-chip:hover { color: var(--accent); }
.format-chip.is-active {
background: var(--accent); color: var(--accent-fg); border-color: var(--accent);
}
html.dark .format-chip.is-active { color: var(--accent-fg); }
.ai-toolbar { display: flex; gap: .4rem; flex-wrap: wrap; margin-bottom: .45rem; }
.size-choice-row {
display: grid;
grid-template-columns: repeat(5, minmax(0, 1fr));
gap: .42rem;
margin: .35rem 0 .6rem;
overflow: visible;
}
.size-choice {
--format-color: var(--accent);
display: grid;
grid-template-columns: 28px minmax(0, 1fr);
gap: .42rem;
align-items: center;
width: 100%;
min-width: 0;
min-height: 58px;
padding: .48rem .52rem;
border-radius: 12px;
border: 1px solid var(--line);
background: color-mix(in srgb, var(--bg) 84%, var(--surface) 16%);
color: var(--text);
font-family: inherit;
cursor: pointer;
transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease, background .18s ease;
text-align: start;
}
.size-choice:hover {
transform: translateY(-1px);
border-color: var(--format-color);
box-shadow: 0 6px 14px color-mix(in srgb, var(--format-color) 12%, transparent);
}
.size-choice.is-active {
border-color: var(--format-color);
background: color-mix(in srgb, var(--surface) 78%, var(--format-color) 22%);
box-shadow: inset 0 -2px 0 var(--format-color), 0 6px 14px color-mix(in srgb, var(--format-color) 15%, transparent);
}
/* Ad mode. One card, not two stacked boxes: the toggle is the card's
header and the fields unfold inside the same frame beneath it. */
#mk-mode-section {
display: grid;
gap: 0;
/* Never flex-shrunk: `overflow: hidden` below removes the min-content
floor in flex layout, and a flex-column ancestor once squeezed this
card to a sliver on phones, clipping the revealed fields. Ignored in
grid contexts, so it is safe in every placement. */
flex: 0 0 auto;
margin-block: .1rem;
border: 1px solid color-mix(in srgb, var(--line) 82%, transparent);
border-radius: 13px;
background: var(--surface);
overflow: hidden;
transition: border-color .18s ease, box-shadow .18s ease;
}
#mk-mode-section:has(.mk-mode-toggle[aria-checked="true"]) {
border-color: color-mix(in srgb, var(--accent) 55%, var(--line));
box-shadow: 0 8px 20px color-mix(in srgb, var(--accent) 8%, transparent);
}
/* No toggle anymore: the card is always open and the fields are simply
optional. The head is a slim caption row, not a control. */
.mk-mode-head {
display: flex;
align-items: center;
gap: .5rem;
width: 100%;
min-height: 30px;
padding: .28rem .55rem .12rem;
color: var(--text);
text-align: start;
}
.mk-mode-copy { display: flex; align-items: center; gap: .4rem; min-width: 0; }
.mk-mode-copy::before {
/* A small price-tag mark so the row reads as a feature, not a setting. */
content: "";
flex: 0 0 18px;
width: 18px;
height: 18px;
border-radius: 6px;
background:
center / 12px no-repeat
url("data:image/svg+xml;utf8,"),
color-mix(in srgb, var(--accent) 12%, transparent);
}
.mk-mode-copy strong { font-size: .6rem; font-weight: 800; line-height: 1.1; }
.mk-mode-copy span { display: block; color: var(--muted); font-size: .5rem; line-height: 1.2; margin-top: .06rem; }
.mk-mode-switch {
position: relative;
flex: 0 0 34px;
width: 34px;
height: 19px;
border-radius: 999px;
background: color-mix(in srgb, var(--line) 92%, transparent);
transition: background .16s ease;
}
.mk-mode-switch i {
position: absolute;
top: 2px;
inset-inline-start: 2px;
width: 15px;
height: 15px;
border-radius: 50%;
background: #fff;
box-shadow: 0 1px 3px rgba(0,0,0,.28);
transition: transform .16s ease;
}
.mk-mode-toggle[aria-checked="true"] .mk-mode-switch { background: var(--accent); }
.mk-mode-toggle[aria-checked="true"] .mk-mode-switch i { transform: translateX(15px); }
html[dir="rtl"] .mk-mode-toggle[aria-checked="true"] .mk-mode-switch i { transform: translateX(-15px); }
.mk-mode-fields {
/* Price+currency and font share a line; the headline and logo need the
full width. Same frame as the header, separated by one divider. */
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: .32rem .5rem;
padding: .4rem .55rem .5rem;
border-top: 1px solid color-mix(in srgb, var(--line) 72%, transparent);
background: color-mix(in srgb, var(--surface) 96%, var(--bg));
}
.mk-field { display: grid; align-content: start; gap: .16rem; min-width: 0; }
.mk-field-text,
.mk-field-logo { grid-column: 1 / -1; }
/* Quiet sentence-case labels: the shouting uppercase made three optional
inputs read as the pane's main event. */
.mk-field-label {
color: var(--muted);
font-size: .5rem;
font-weight: 750;
}
/* Price and currency are one control: joined halves of a single pill. */
.mk-price-row {
display: flex;
min-width: 0;
}
/* Doubled class specificity: the shared input rule below sets the
border-radius shorthand and would otherwise reset these corners. */
.mk-mode-fields .mk-price-row input {
flex: 1 1 auto;
border-start-end-radius: 0;
border-end-end-radius: 0;
}
.mk-mode-fields .mk-price-row select {
flex: 0 0 92px;
width: 92px;
margin-inline-start: -1px;
border-start-start-radius: 0;
border-end-start-radius: 0;
color: var(--muted);
font-weight: 700;
}
.mk-price-row input:focus-visible,
.mk-price-row select:focus-visible { position: relative; z-index: 1; }
.mk-mode-fields input,
.mk-mode-fields select {
min-width: 0;
width: 100%;
min-height: 31px;
padding: .2rem .4rem;
border: 1px solid color-mix(in srgb, var(--line) 84%, transparent);
border-radius: 9px;
background: var(--surface);
color: var(--text);
font-family: inherit;
font-size: .56rem;
transition: border-color .14s ease;
}
.mk-mode-fields input::placeholder { color: color-mix(in srgb, var(--muted) 72%, transparent); }
.mk-mode-fields input:focus-visible,
.mk-mode-fields select:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.mk-mode-fields input:hover,
.mk-mode-fields select:hover { border-color: color-mix(in srgb, var(--accent) 40%, var(--line)); }
#mk-price-input { font-variant-numeric: tabular-nums; letter-spacing: .02em; }
.mk-logo-row { display: flex; align-items: center; gap: .4rem; flex-wrap: wrap; }
/* The upload is a drop target, so it looks like one: dashed and roomy. */
.mk-logo-btn {
flex: 1 1 auto;
display: inline-flex;
align-items: center;
justify-content: center;
gap: .3rem;
min-height: 40px;
padding: .28rem .55rem;
border: 1.5px dashed color-mix(in srgb, var(--accent) 38%, var(--line));
border-radius: 10px;
background: color-mix(in srgb, var(--accent) 3%, var(--surface));
color: var(--text);
font-size: .52rem;
font-weight: 700;
cursor: pointer;
transition: border-color .16s ease, background .16s ease;
}
.mk-logo-btn:hover {
border-color: var(--accent);
background: color-mix(in srgb, var(--accent) 7%, var(--surface));
}
.mk-logo-btn svg { width: 13px; height: 13px; color: var(--accent); }
.mk-logo-preview {
position: relative;
display: inline-grid;
place-items: center;
width: 44px;
height: 44px;
padding: 3px;
border: 1px solid color-mix(in srgb, var(--line) 84%, transparent);
border-radius: 10px;
/* A transparent logo needs a checker so the user can see it is cut out. */
background-color: #fff;
background-image:
linear-gradient(45deg, #e9e9ec 25%, transparent 25%, transparent 75%, #e9e9ec 75%),
linear-gradient(45deg, #e9e9ec 25%, transparent 25%, transparent 75%, #e9e9ec 75%);
background-size: 10px 10px;
background-position: 0 0, 5px 5px;
}
.mk-logo-preview img { max-width: 100%; max-height: 100%; object-fit: contain; }
.mk-logo-remove {
position: absolute;
top: -6px;
inset-inline-end: -6px;
width: 17px;
height: 17px;
display: grid;
place-items: center;
border: 0;
border-radius: 50%;
background: #2f2b30;
color: #fff;
font-size: .5rem;
line-height: 1;
cursor: pointer;
}
/* Font picker. Each row is the font's name in the UI face plus two live
samples set in the font itself, so the choice is judged by eye. */
.mk-field-font { position: relative; }
.mk-font-trigger {
display: grid;
grid-template-columns: minmax(0, auto) minmax(0, 1fr) 14px;
align-items: center;
gap: .4rem;
width: 100%;
min-height: 34px;
padding: .24rem .42rem;
border: 1px solid color-mix(in srgb, var(--line) 84%, transparent);
border-radius: 9px;
background: var(--surface);
color: var(--text);
font-family: inherit;
font-size: .56rem;
text-align: start;
cursor: pointer;
transition: border-color .14s ease;
}
.mk-font-trigger:hover { border-color: color-mix(in srgb, var(--accent) 40%, var(--line)); }
.mk-font-trigger:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.mk-font-trigger[aria-expanded="true"] { border-color: var(--accent); }
.mk-font-trigger-name { font-weight: 700; white-space: nowrap; }
.mk-font-trigger-sample {
min-width: 0;
white-space: normal;
overflow-wrap: anywhere;
color: var(--muted);
font-size: .62rem;
line-height: 1.3;
direction: rtl;
text-align: end;
}
.mk-font-caret { width: 14px; height: 14px; color: var(--muted); }
.mk-font-trigger[aria-expanded="true"] .mk-font-caret { transform: rotate(180deg); }
.mk-font-picker {
position: absolute;
z-index: 30;
/* The field itself can be ~200px, too narrow for an Arabic preview, so
the popup is allowed to be wider than its trigger while staying inside
the viewport. Sized by its own width, not the viewport, via the
container query below. */
inset-inline-start: 0;
min-width: min(310px, 86vw);
max-width: min(360px, 90vw);
container-type: inline-size;
top: calc(100% + .2rem);
max-height: 260px;
overflow-y: auto;
overscroll-behavior: contain;
padding: .26rem;
border: 1px solid color-mix(in srgb, var(--line) 78%, transparent);
border-radius: 11px;
background: var(--surface);
box-shadow: 0 14px 32px rgba(0,0,0,.16);
scrollbar-width: thin;
}
.mk-font-picker.hidden { display: none !important; }
/* Inside a dock popover the floating panel cannot float: the popover
scrolls and clips it (cut rows + a horizontal scrollbar). There the
picker opens IN FLOW, full width, and simply pushes the fields down —
correct on desktop and phones alike. */
.kv-pop .mk-font-picker {
position: static;
width: 100%;
min-width: 0;
max-width: none;
max-height: 230px;
margin-top: .3rem;
box-shadow: none;
background: color-mix(in srgb, var(--surface) 70%, var(--bg));
}
.mk-font-group-label {
position: sticky;
top: 0;
z-index: 1;
display: block;
padding: .3rem .34rem .2rem;
background: var(--surface);
color: var(--muted);
font-size: .44rem;
font-weight: 850;
letter-spacing: .06em;
text-transform: uppercase;
}
/* Stacked by default so a narrow popup never clips a preview; the row
layout returns once the popup itself is wide enough for both. */
.mk-font-option {
display: grid;
grid-template-columns: minmax(0, 1fr);
align-items: center;
gap: .12rem .5rem;
width: 100%;
padding: .34rem .38rem;
border: 1px solid transparent;
border-radius: 8px;
background: transparent;
color: var(--text);
font-family: inherit;
text-align: start;
cursor: pointer;
transition: background .13s ease, border-color .13s ease;
}
.mk-font-option:hover { background: color-mix(in srgb, var(--accent) 7%, transparent); }
.mk-font-option:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.mk-font-option.is-active {
border-color: var(--accent);
background: color-mix(in srgb, var(--accent) 11%, transparent);
}
.mk-font-option:active { background: color-mix(in srgb, var(--accent) 15%, transparent); }
.mk-font-name {
min-width: 0;
white-space: normal;
overflow-wrap: anywhere;
font-size: .52rem;
font-weight: 750;
}
.mk-font-samples {
display: grid;
gap: .06rem;
min-width: 0;
}
/* The samples carry the real face; each line keeps its own direction so
the Arabic reads right-to-left even in an English UI, and vice versa. */
.mk-font-sample {
min-width: 0;
white-space: normal;
overflow-wrap: anywhere;
line-height: 1.35;
}
.mk-font-sample.is-ar { direction: rtl; text-align: start; font-size: .68rem; }
.mk-font-sample.is-en { direction: ltr; text-align: start; font-size: .64rem; }
html[dir="rtl"] .mk-font-sample.is-en { text-align: start; }
.mk-font-missing {
grid-column: 1 / -1;
color: #b3462e;
font-size: .42rem;
line-height: 1.25;
}
@container (min-width: 300px) {
.mk-font-option { grid-template-columns: minmax(74px, 96px) minmax(0, 1fr); }
.mk-font-missing { grid-column: 2 / -1; }
}
@media (max-width: 720px) {
.mk-font-picker { max-height: 220px; }
.mk-font-trigger { grid-template-columns: minmax(0, auto) minmax(0, 1fr) 12px; }
}
.mk-field-note { color: var(--muted); font-size: .44rem; line-height: 1.2; }
/* The placeholder already shows what a headline looks like; the extra
caption under the field was noise. Errors still surface. */
.mk-field-text .mk-field-note:not(.is-error) { display: none; }
.mk-field-note.is-error { color: #c0392b; }
@media (max-width: 720px) {
.mk-mode-copy span { display: none; }
.mk-mode-fields {
grid-template-columns: minmax(0, 1fr);
gap: .4rem;
padding: .5rem .5rem .55rem;
}
.mk-price-row select { flex-basis: 86px; width: 86px; }
}
/* Size and edit strength share one band. The size picker gets the free
space; strength only needs room for three short labels. */
.konvrt-output-controls {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
align-items: start;
gap: .55rem;
width: 100%;
}
.konvrt-output-controls > #output-size-section { min-width: 0; }
.konvrt-output-controls > #edit-strength-section {
/* A quiet divider reads better than a gap alone once the two groups sit
on the same line. The top padding matches the size section's so both
section labels sit on the same line, and stretching to the band height
is what gives the buttons room to centre in. */
align-self: stretch;
padding-block-start: .42rem;
padding-inline-start: .55rem;
border-inline-start: 1px solid color-mix(in srgb, var(--line) 70%, transparent);
}
/* One section at a time in the shared lighting panel: when a bar button
or a 3D pick names its section, the other two blocks disappear instead
of scrolling past. No focus attribute = the full panel (old behavior,
used by the desktop "Personalize" style openers). */
[data-studio-panel="lights"][data-lights-focus="lights"] .studio-control-block:not(#studio-active-lights-block),
[data-studio-panel="lights"][data-lights-focus="lighttype"] .studio-control-block:not(#studio-light-modifier-block),
[data-studio-panel="lights"][data-lights-focus="daylight"] .studio-control-block:not(#studio-daylight-block) {
display: none !important;
}
/* Edit strength: how far the generator may move from the uploaded image.
A compact three-way choice, so it never needs the full column width. */
#edit-strength-section {
/* Label pinned to the top so it lines up with "Image size"; the buttons
then centre in whatever height is left, which puts them level with the
size tiles beside them. */
display: grid;
grid-template-rows: auto minmax(0, 1fr);
justify-items: center;
gap: .16rem;
}
#edit-strength-section > .edit-strength-row {
align-self: center;
}
#edit-strength-section > .improve-section-label {
text-align: center;
}
.edit-strength-row {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: .22rem;
width: min(100%, 250px);
margin-inline: auto;
}
.konvrt-output-controls .edit-strength-row {
width: auto;
grid-template-columns: repeat(3, 52px);
}
.edit-strength-choice {
display: grid;
/* The row track stretches to min-height, so the label needs the track
centred or it sits against the top edge. */
align-content: center;
justify-items: center;
gap: .02rem;
min-height: 30px;
padding: .2rem .22rem;
border: 1px solid color-mix(in srgb, var(--line) 82%, transparent);
border-radius: 8px;
background: transparent;
color: var(--text);
text-align: center;
cursor: pointer;
transition: border-color .16s ease, background .16s ease, color .16s ease;
}
.edit-strength-choice:hover {
border-color: color-mix(in srgb, var(--accent) 42%, var(--line));
}
.edit-strength-choice.is-active {
border-color: var(--accent);
background: color-mix(in srgb, var(--accent) 12%, transparent);
}
.edit-strength-title {
font-size: .5rem;
font-weight: 800;
line-height: 1.1;
}
/* The explanatory line is what made these tall. The label carries the
meaning; the full contract still reaches the model either way. */
.edit-strength-note { display: none; }
@media (max-width: 720px) {
.edit-strength-row { width: min(100%, 230px); }
.edit-strength-choice { min-height: 28px; }
.edit-strength-title { font-size: .48rem; }
/* Eight controls on one phone row only fit if everything gives a little:
tighter gaps, narrower strength buttons, and smaller tile lettering. */
.konvrt-output-controls {
/* A fixed strength column, or the long "Enhancement strength" label
sizes it to max-content and squeezes the size tiles until their
labels truncate. The label wraps inside this width instead. */
grid-template-columns: minmax(0, 1fr) 150px;
gap: .3rem;
}
.konvrt-output-controls #edit-strength-section > .improve-section-label {
line-height: 1.12;
}
/* The mobile workspace styles the size picker as a full-width band with
`order: 1 !important`, written when it was a direct child of the
preview tools. Inside the shared row that order flips the two columns
and the full-width band fights the grid, so both are undone here. */
body.konvrt-workspace-active .konvrt-preview-tools .konvrt-output-controls > #output-size-section {
order: 0 !important;
width: auto !important;
padding: .1rem 0 !important;
border-bottom: 0 !important;
}
body.konvrt-workspace-active .konvrt-preview-tools .konvrt-output-controls > #edit-strength-section {
order: 1 !important;
/* Matches the size section's reduced mobile padding so both section
labels stay on the same line. */
padding-block-start: .1rem;
}
.konvrt-output-controls > #edit-strength-section {
padding-inline-start: .3rem;
}
.konvrt-output-controls .edit-strength-row {
width: auto;
grid-template-columns: repeat(3, 44px);
gap: .14rem;
}
.konvrt-output-controls .edit-strength-choice {
min-height: 30px;
padding-inline: .1rem;
}
.konvrt-output-controls .edit-strength-title { font-size: .52rem; }
/* These carry the full workspace prefix and !important because the
mobile size-picker block above is written the same way; without it the
tiles keep their wider lettering and "Landscape" truncates. */
body.konvrt-workspace-active .konvrt-preview-tools .konvrt-output-controls #output-size-section .size-choice-row {
gap: .14rem !important;
}
body.konvrt-workspace-active .konvrt-preview-tools .konvrt-output-controls #output-size-section .size-choice {
min-height: 38px !important;
padding: .2rem .06rem !important;
gap: .04rem !important;
}
body.konvrt-workspace-active .konvrt-preview-tools .konvrt-output-controls #output-size-section .size-choice-icon {
width: 14px !important;
height: 14px !important;
}
body.konvrt-workspace-active .konvrt-preview-tools .konvrt-output-controls #output-size-section .size-choice-icon svg {
width: 9px !important;
height: 9px !important;
}
body.konvrt-workspace-active .konvrt-preview-tools .konvrt-output-controls #output-size-section .size-choice-title {
/* The size column ceded width to the strength buttons, so the tile
lettering shrinks a step or "Landscape" truncates. */
font-size: .42rem !important;
line-height: 1.05 !important;
}
body.konvrt-workspace-active .konvrt-preview-tools .konvrt-output-controls #output-size-section .size-choice-ratio {
font-size: .4rem !important;
line-height: 1.05 !important;
}
}
/* Desktop history: the rail is a horizontal strip under the two-up
comparison (same as the phone layout), so the track scrolls sideways. */
@media (min-width: 721px) {
body.konvrt-workspace-active .konvrt-phone-side .konvrt-history-rail {
height: auto;
min-height: 0;
overflow: hidden;
}
body.konvrt-workspace-active .konvrt-phone-side .konvrt-history-track {
min-height: 0;
max-height: none;
overflow-x: auto;
overflow-y: hidden;
overscroll-behavior-inline: contain;
/* A thin visible scrollbar: nothing else says more renders exist. */
scrollbar-width: thin;
scrollbar-color: color-mix(in srgb, var(--text) 28%, transparent) transparent;
padding-bottom: 2px;
}
body.konvrt-workspace-active .konvrt-phone-side .konvrt-history-track::-webkit-scrollbar {
display: block;
height: 4px;
}
body.konvrt-workspace-active .konvrt-phone-side .konvrt-history-track::-webkit-scrollbar-thumb {
border-radius: 4px;
background: color-mix(in srgb, var(--text) 28%, transparent);
}
body.konvrt-workspace-active .konvrt-phone-side .konvrt-history-track::-webkit-scrollbar-track {
background: transparent;
}
}
.size-choice[data-format="post34"] { --format-color: #d95f48; }
.size-choice[data-format="post45"] { --format-color: #d98a21; }
.size-choice[data-format="square"] { --format-color: #6657d9; }
.size-choice[data-format="landscape"] { --format-color: #168d7f; }
.size-choice[data-format="story"] { --format-color: #a94caf; }
.size-choice-icon {
width: 28px;
height: 28px;
border-radius: 8px;
display: inline-flex;
align-items: center;
justify-content: center;
background: color-mix(in srgb, var(--surface) 72%, var(--brand-light) 28%);
color: var(--format-color);
}
.size-choice-icon svg {
width: 17px;
height: 17px;
}
.size-choice-copy {
display: grid;
gap: .05rem;
min-width: 0;
}
.size-choice-title {
display: block;
color: var(--text);
font-size: .68rem;
font-weight: 800;
line-height: 1.15;
white-space: normal;
overflow-wrap: anywhere;
}
.size-choice-ratio {
font-size: .63rem;
font-weight: 800;
line-height: 1.25;
color: var(--text);
}
.ai-code-pre {
font-family: ui-monospace, "Cascadia Code", Consolas, monospace; font-size: clamp(.64rem, .74vw, .72rem);
white-space: pre-wrap; word-break: break-word; overflow-x: auto;
background: var(--code-bg); border: 1px solid var(--line); border-radius: 10px;
padding: .65rem; margin: 0; max-height: min(38vh, 340px); overflow-y: auto;
line-height: 1.45;
}
.ai-prompt-intro { margin-top: 0; margin-bottom: .35rem; }
.ai-meta-stack {
display: grid;
gap: .45rem;
margin-bottom: .55rem;
}
.ai-meta-block {
display: flex;
flex-direction: column;
gap: .18rem;
padding: .6rem .72rem;
border-radius: 10px;
border: 1px solid var(--line);
background: color-mix(in srgb, var(--code-bg) 80%, var(--surface) 20%);
}
.ai-meta-block strong {
font-size: .72rem;
text-transform: uppercase;
letter-spacing: .04em;
color: var(--muted);
}
.ai-meta-block span {
font-size: .85rem;
line-height: 1.45;
color: var(--text);
}
#insights {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
gap: .35rem .45rem;
}
#insights .insight-category {
grid-column: 1 / -1;
}
.simple-analysis-summary {
display: grid;
gap: .75rem;
padding: 1rem;
border-radius: 18px;
background:
radial-gradient(circle at 92% 8%, color-mix(in srgb, var(--brand-light) 58%, transparent), transparent 38%),
color-mix(in srgb, var(--surface) 88%, var(--brand-light) 12%);
border: 1px solid color-mix(in srgb, var(--line) 82%, transparent);
}
.simple-summary-kicker,
.improve-section-label {
color: var(--accent);
font-size: .7rem;
font-weight: 800;
letter-spacing: .06em;
text-transform: uppercase;
}
.simple-summary-title {
display: block;
margin-top: .18rem;
color: var(--text);
font-size: clamp(1.05rem, 1.5vw, 1.3rem);
line-height: 1.25;
}
.simple-summary-detail {
margin-top: .3rem;
color: var(--muted);
font-size: .82rem;
line-height: 1.45;
}
.simple-facts {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: .45rem;
}
/* Studio review: the analyzer's professional verdict, rendered like a
reviewer's note rather than another metric row. */
.pro-review-card {
display: grid;
gap: .5rem;
padding: .7rem .78rem .74rem;
border: 1px solid color-mix(in srgb, var(--line) 82%, transparent);
border-radius: 14px;
background: color-mix(in srgb, var(--surface) 94%, var(--bg));
}
.pro-review-card.hidden { display: none !important; }
.pro-review-head {
display: flex;
align-items: center;
justify-content: space-between;
gap: .5rem;
}
.pro-review-kicker {
color: var(--accent);
font-size: .62rem;
font-weight: 850;
letter-spacing: .08em;
text-transform: uppercase;
}
.pro-review-grade {
flex: 0 0 auto;
min-width: 52px;
padding: .18rem .5rem;
border-radius: 999px;
color: #fff;
font-size: .66rem;
font-weight: 850;
text-align: center;
background: var(--grade-color, #8a8a8e);
}
.pro-review-impression {
margin: 0;
color: var(--text);
font-size: .78rem;
line-height: 1.45;
}
.pro-review-columns {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: .6rem;
}
.pro-review-col { min-width: 0; }
.pro-review-col > strong {
display: block;
margin-bottom: .24rem;
font-size: .62rem;
font-weight: 850;
letter-spacing: .04em;
text-transform: uppercase;
}
.pro-review-col.is-good > strong { color: #168d5c; }
.pro-review-col.is-bad > strong { color: #b3462e; }
.pro-review-col ul {
margin: 0;
padding-inline-start: .95rem;
display: grid;
gap: .22rem;
color: var(--muted);
font-size: .72rem;
line-height: 1.4;
}
.pro-review-col.is-good ul li::marker { color: #168d5c; }
.pro-review-col.is-bad ul li::marker { color: #b3462e; }
.pro-review-keyfix {
margin: 0;
padding: .5rem .6rem;
border-inline-start: 3px solid var(--accent);
border-radius: 8px;
background: color-mix(in srgb, var(--accent) 8%, transparent);
color: var(--text);
font-size: .74rem;
font-weight: 650;
line-height: 1.45;
}
.pro-review-keyfix:empty { display: none; }
@media (max-width: 720px) {
.pro-review-columns { grid-template-columns: minmax(0, 1fr); }
}
.simple-fact {
display: grid;
gap: .15rem;
min-width: 0;
padding: .62rem .7rem;
border-radius: 12px;
background: color-mix(in srgb, var(--surface) 88%, transparent);
}
.simple-fact span {
color: var(--muted);
font-size: .66rem;
font-weight: 700;
}
.simple-fact strong {
color: var(--text);
font-size: .82rem;
line-height: 1.25;
white-space: normal;
overflow-wrap: anywhere;
}
.workflow-next-btn {
width: min(100%, 280px);
min-height: 52px;
margin-inline: auto;
padding: .72rem 1rem;
border: 0;
border-radius: 999px;
background: linear-gradient(135deg, var(--accent), color-mix(in srgb, var(--accent) 72%, #a36d52 28%));
color: var(--accent-fg);
font: inherit;
text-align: center;
cursor: pointer;
box-shadow: 0 12px 26px rgba(85,0,0,.16);
display: grid;
grid-template-columns: minmax(0, 1fr);
align-items: center;
gap: .8rem;
}
.workflow-next-copy,
.workflow-next-copy strong,
.workflow-next-copy span {
display: block;
}
.workflow-next-copy {
margin: 0;
justify-self: center;
font-size: inherit;
line-height: inherit;
opacity: 1;
}
.workflow-next-copy strong {
font-size: 1rem;
line-height: 1.25;
}
.workflow-next-copy > span {
margin-top: .12rem;
font-size: .7rem;
line-height: 1.35;
opacity: .82;
}
.workflow-next-arrow {
width: 28px;
height: 28px;
stroke: currentColor;
animation: nextArrowFast .72s cubic-bezier(.45,0,.55,1) infinite;
}
@keyframes nextArrowFast {
0%, 100% { transform: translateY(-3px); }
50% { transform: translateY(4px); }
}
.improve-intro {
display: grid;
gap: .35rem;
margin-bottom: .8rem;
padding: .75rem .8rem;
border-radius: 14px;
background: color-mix(in srgb, var(--surface) 82%, var(--brand-light) 18%);
}
.improve-intro strong {
color: var(--text);
font-size: .9rem;
}
.improve-intro span {
color: var(--muted);
font-size: .74rem;
line-height: 1.4;
}
.improve-section-label {
display: block;
margin: .75rem 0 .35rem;
}
.copy-ready-card {
display: grid;
gap: .5rem;
margin-top: .75rem;
padding: .8rem;
border-radius: 14px;
background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 11%, var(--surface)), color-mix(in srgb, #6657d9 9%, var(--surface)));
border: 1px solid color-mix(in srgb, #6657d9 30%, var(--line));
}
.copy-ready-card strong {
color: var(--text);
font-size: .88rem;
}
.copy-ready-card span {
color: var(--muted);
font-size: .72rem;
line-height: 1.4;
}
.copy-ready-card > div {
display: grid;
gap: .15rem;
}
.copy-ready-main {
grid-template-columns: minmax(76px, 108px) 1fr;
align-items: center;
gap: .75rem !important;
}
.copy-ready-copy {
display: grid;
gap: .12rem;
min-width: 0;
}
.improvement-reference-frame {
position: relative;
display: grid;
place-items: center;
width: 100%;
overflow: hidden;
border: 1px solid color-mix(in srgb, var(--accent) 26%, var(--line));
border-radius: 12px;
background: color-mix(in srgb, var(--bg) 86%, var(--surface));
}
.improvement-reference-frame img {
display: block;
width: 100%;
height: auto;
max-height: 70vh;
object-fit: contain;
}
.image-save-btn {
position: absolute;
top: .5rem;
inset-inline-end: .5rem;
z-index: 2;
width: 34px;
height: 34px;
display: grid;
place-items: center;
padding: 0;
border: 0;
border-radius: 9px;
background: rgba(18, 14, 12, .62);
color: #fff;
cursor: pointer;
backdrop-filter: blur(4px);
transition: background .18s ease, transform .18s ease;
}
.image-save-btn:hover { background: rgba(18, 14, 12, .82); transform: translateY(-1px); }
.image-save-btn svg { width: 17px; height: 17px; }
.image-reupload-btn {
position: absolute;
top: .5rem;
inset-inline-end: .5rem;
z-index: 2;
padding: .3rem .6rem;
border: 0;
border-radius: 999px;
background: rgba(18, 14, 12, .62);
color: #fff;
font: inherit;
font-size: .7rem;
font-weight: 700;
cursor: pointer;
backdrop-filter: blur(4px);
transition: background .18s ease;
}
.image-reupload-btn:hover { background: rgba(18, 14, 12, .82); }
/* Empty slot beside the reference so the comparison is obvious up front. */
.improvement-reference-frame.is-empty {
min-height: 200px;
border-style: dashed;
}
.improvement-reference-frame.is-empty img { display: none; }
.generated-image-placeholder {
display: none;
padding: 1rem;
color: var(--muted);
font-size: .74rem;
text-align: center;
}
.improvement-reference-frame.is-empty .generated-image-placeholder { display: block; }
.generate-footer-note {
margin: .9rem 0 0;
padding-top: .7rem;
border-top: 1px solid color-mix(in srgb, var(--line) 82%, transparent);
color: var(--muted);
font-size: .68rem;
line-height: 1.5;
text-align: center;
}
.auth-account { position: relative; display: inline-flex; align-items: center; }
.auth-avatar {
width: 32px;
height: 32px;
padding: 0;
display: grid;
place-items: center;
border: 1px solid color-mix(in srgb, var(--accent) 36%, transparent);
border-radius: 50%;
background: var(--accent);
color: var(--accent-fg);
font-size: .82rem;
font-weight: 800;
cursor: pointer;
transition: filter .15s ease;
}
.auth-avatar:hover { filter: brightness(1.08); }
.auth-account.is-open .auth-avatar {
box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 22%, transparent);
}
.auth-menu {
position: absolute;
top: calc(100% + .5rem);
inset-inline-end: 0;
z-index: 120;
width: 220px;
display: grid;
gap: .3rem;
padding: .55rem;
border: 1px solid var(--line);
border-radius: 14px;
background: var(--surface);
box-shadow: 0 18px 40px rgba(26,29,38,.16);
}
.auth-menu-head {
display: grid;
gap: .1rem;
padding: .2rem .45rem .5rem;
border-bottom: 1px solid var(--line);
margin-bottom: .1rem;
}
.auth-menu-head strong { font-size: .85rem; }
.auth-menu-head span { color: var(--muted); font-size: .7rem; word-break: break-all; }
.auth-menu-credits {
display: flex;
align-items: center;
gap: .4rem;
padding: .4rem .45rem;
border-radius: 9px;
background: color-mix(in srgb, var(--accent) 10%, transparent);
color: var(--accent);
font-size: .74rem;
font-weight: 700;
}
.auth-menu-credits svg { width: 14px; height: 14px; flex: none; }
.auth-menu-credits.is-empty { color: #b3261e; background: color-mix(in srgb, #b3261e 10%, transparent); }
.auth-menu-item {
display: flex;
align-items: center;
gap: .5rem;
width: 100%;
padding: .45rem .5rem;
border: 0;
border-radius: 9px;
background: none;
color: var(--text);
font: inherit;
font-size: .78rem;
font-weight: 650;
text-align: start;
cursor: pointer;
}
.auth-menu-item:hover { background: var(--toggle-bg); }
.auth-menu-item.is-danger { color: #b3261e; }
/* Only used on phones, where the standalone language pill is hidden. */
.auth-menu-lang { display: none; }
.pill-accent {
border-color: color-mix(in srgb, var(--accent) 40%, transparent);
background: var(--accent);
color: var(--accent-fg);
font-weight: 700;
}
.pill-accent:hover { filter: brightness(1.08); }
.site-header-actions .pill { height: 30px; }
.auth-overlay {
position: fixed;
inset: 0;
z-index: 3000;
display: grid;
place-items: center;
padding: clamp(1rem, 4vw, 2rem);
overflow-y: auto;
/* Everything behind the dialog is dimmed and blurred so focus lands on the form. */
background: rgba(14, 10, 9, .68);
backdrop-filter: blur(6px) saturate(.85);
-webkit-backdrop-filter: blur(6px) saturate(.85);
animation: authOverlayIn .2s ease both;
}
@keyframes authOverlayIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes authDialogIn {
from { opacity: 0; transform: translateY(14px) scale(.97); }
to { opacity: 1; transform: none; }
}
.auth-dialog {
position: relative;
display: grid;
justify-items: center;
text-align: center;
gap: .8rem;
width: min(100%, 400px);
margin: auto;
padding: 2rem 1.6rem 1.6rem;
border: 1px solid color-mix(in srgb, var(--line) 60%, transparent);
border-radius: 22px;
background: var(--surface);
box-shadow: 0 32px 80px rgba(10, 8, 7, .42), 0 4px 14px rgba(10, 8, 7, .18);
animation: authDialogIn .26s cubic-bezier(.2,.8,.3,1) both;
}
.auth-close {
position: absolute;
top: .6rem;
inset-inline-end: .7rem;
width: 34px;
height: 34px;
display: grid;
place-items: center;
border: 0;
border-radius: 50%;
background: transparent;
color: var(--muted);
font-size: 1.4rem;
line-height: 1;
cursor: pointer;
transition: background .18s ease, color .18s ease;
}
.auth-close:hover { background: color-mix(in srgb, var(--line) 45%, transparent); color: var(--fg); }
.auth-title { font-size: 1.32rem; font-weight: 800; line-height: 1.2; }
.auth-note {
margin: -.35rem 0 .2rem;
max-width: 30ch;
color: var(--muted);
font-size: .8rem;
line-height: 1.5;
text-wrap: balance;
}
.auth-field {
display: grid;
gap: .34rem;
width: 100%;
text-align: start;
font-size: .76rem;
font-weight: 700;
}
.auth-field .url-input {
width: 100%;
min-height: 46px;
padding: .7rem .9rem;
border: 1px solid var(--line);
border-radius: 12px;
font-size: .92rem;
transition: border-color .18s ease, box-shadow .18s ease;
}
.auth-field .url-input:focus {
outline: none;
border-color: var(--brand);
box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand) 18%, transparent);
}
.auth-dialog .action-btn {
/* .action-btn is inline-flex with no justify-content, so a stretched
width would otherwise leave the label pinned to the start edge. */
width: 100%;
min-height: 48px;
margin-top: .15rem;
justify-content: center;
text-align: center;
border-radius: 999px;
font-size: .95rem;
font-weight: 800;
}
.auth-dialog .action-btn > span { text-align: center; }
.upload-choice-dialog {
width: min(100%, 520px);
gap: 1rem;
}
.upload-choice-preview {
width: 112px;
height: 112px;
overflow: hidden;
border: 1px solid var(--line);
border-radius: 20px;
background:
linear-gradient(45deg, color-mix(in srgb, var(--line) 35%, transparent) 25%, transparent 25%) 0 0 / 18px 18px,
linear-gradient(-45deg, color-mix(in srgb, var(--line) 35%, transparent) 25%, transparent 25%) 0 9px / 18px 18px,
var(--bg);
box-shadow: 0 16px 36px rgba(20, 14, 12, .12);
}
.upload-choice-preview img {
width: 100%;
height: 100%;
display: block;
object-fit: contain;
}
.upload-choice-actions {
width: 100%;
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: .7rem;
}
.upload-choice-action {
min-height: 132px;
display: grid;
align-content: center;
justify-items: center;
gap: .42rem;
padding: 1rem .8rem;
border: 1px solid var(--line);
border-radius: 18px;
background: var(--surface);
color: var(--text);
text-align: center;
cursor: pointer;
transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}
.upload-choice-action:hover {
transform: translateY(-3px);
border-color: var(--brand);
box-shadow: 0 14px 30px rgba(85, 0, 0, .12);
}
.upload-choice-action.is-primary {
border-color: color-mix(in srgb, var(--brand) 55%, var(--line));
background: color-mix(in srgb, var(--brand-light) 22%, var(--surface));
}
.upload-choice-action svg {
width: 28px;
height: 28px;
fill: none;
stroke: var(--brand);
stroke-width: 1.8;
stroke-linecap: round;
stroke-linejoin: round;
}
.upload-choice-action strong { font-size: .9rem; }
.upload-choice-action span {
max-width: 22ch;
color: var(--muted);
font-size: .7rem;
line-height: 1.4;
}
@media (max-width: 520px) {
.upload-choice-actions { grid-template-columns: 1fr; }
.upload-choice-action { min-height: 108px; }
}
.auth-names {
display: grid;
grid-template-columns: 1fr 1fr;
gap: .55rem;
width: 100%;
}
.auth-rules {
display: grid;
gap: .28rem;
width: 100%;
margin: -.25rem 0 .1rem;
padding: .6rem .75rem;
border-radius: 12px;
background: color-mix(in srgb, var(--line) 26%, transparent);
list-style: none;
text-align: start;
}
.auth-rule {
display: grid;
grid-template-columns: 16px minmax(0, 1fr);
align-items: center;
gap: .45rem;
color: #b3261e;
font-size: .72rem;
font-weight: 600;
line-height: 1.3;
transition: color .18s ease;
}
.auth-rule.is-ok { color: #1d7a45; }
.auth-rule-mark {
display: grid;
place-items: center;
width: 16px;
height: 16px;
border-radius: 50%;
background: currentColor;
color: #fff;
font-size: .6rem;
font-weight: 900;
line-height: 1;
}
.auth-rule .auth-rule-mark::before { content: "✕"; }
.auth-rule.is-ok .auth-rule-mark::before { content: "✓"; }
.auth-match {
min-height: .9rem;
font-size: .7rem;
font-weight: 700;
color: #b3261e;
}
.auth-match.is-ok { color: #1d7a45; }
.auth-field .url-input.is-invalid {
border-color: #b3261e;
box-shadow: 0 0 0 3px color-mix(in srgb, #b3261e 16%, transparent);
}
.auth-field .url-input.is-valid { border-color: #1d7a45; }
.auth-divider {
display: grid;
grid-template-columns: 1fr auto 1fr;
align-items: center;
gap: .7rem;
width: 100%;
margin: .1rem 0 -.1rem;
color: var(--muted);
font-size: .7rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: .06em;
}
.auth-divider::before,
.auth-divider::after {
content: "";
height: 1px;
background: var(--line);
}
.auth-dialog .landing-google { min-height: 46px; }
.auth-switch {
margin-top: .1rem;
border: 0;
background: transparent;
color: var(--brand);
font-size: .8rem;
font-weight: 700;
cursor: pointer;
text-decoration: underline;
text-underline-offset: 3px;
}
.auth-switch:hover { opacity: .78; }
.auth-status {
min-height: 1rem;
font-size: .78rem;
font-weight: 600;
color: var(--muted);
text-wrap: balance;
}
.auth-status.is-error { color: #b3261e; }
.phone-code {
font-family: "SF Mono", "Cascadia Mono", Consolas, monospace;
font-size: 1.45rem;
font-weight: 700;
letter-spacing: .12em;
text-align: center;
padding: .55rem .8rem;
border: 1px dashed var(--line, #ddd5ce);
border-radius: 12px;
user-select: all;
}
.phone-wa-btn { text-decoration: none; text-align: center; }
body.auth-open { overflow: hidden; }
@media (prefers-reduced-motion: reduce) {
.auth-overlay, .auth-dialog { animation: none; }
}
.generated-image-loading {
display: none;
position: absolute;
inset: 0;
padding: .75rem;
background: var(--surface);
z-index: 4;
}
#generated-image-frame.is-loading .generated-image-loading {
display: block;
}
.generating-stage {
position: relative;
overflow: hidden;
display: grid;
place-items: center;
width: 100%;
height: 100%;
border-radius: 12px;
background: color-mix(in srgb, var(--code-bg) 88%, var(--surface));
}
.generating-aurora,
.generating-sweep,
.generating-grid {
position: absolute;
inset: 0;
pointer-events: none;
}
.generating-aurora {
background:
radial-gradient(38% 44% at 26% 30%, color-mix(in srgb, var(--accent) 44%, transparent), transparent 70%),
radial-gradient(34% 40% at 74% 62%, color-mix(in srgb, #6657d9 40%, transparent), transparent 72%),
radial-gradient(40% 36% at 52% 86%, color-mix(in srgb, #d98a21 34%, transparent), transparent 74%);
filter: blur(14px);
opacity: .75;
animation: generatingAurora 5.2s ease-in-out infinite alternate;
}
.generating-grid {
background-image:
linear-gradient(color-mix(in srgb, var(--text) 9%, transparent) 1px, transparent 1px),
linear-gradient(90deg, color-mix(in srgb, var(--text) 9%, transparent) 1px, transparent 1px);
background-size: 26px 26px;
opacity: .3;
animation: generatingGrid 3.6s linear infinite;
}
.generating-sweep {
background: linear-gradient(115deg, transparent 38%, color-mix(in srgb, #fff 62%, transparent) 50%, transparent 62%);
transform: translateX(-120%);
animation: generatingSweep 2.1s cubic-bezier(.5,0,.5,1) infinite;
}
.generating-copy {
position: relative;
z-index: 2;
display: grid;
justify-items: center;
gap: .3rem;
padding: .6rem .9rem;
border-radius: 12px;
background: color-mix(in srgb, var(--surface) 76%, transparent);
backdrop-filter: blur(6px);
text-align: center;
}
.generating-copy strong { font-size: .76rem; font-weight: 850; color: var(--text); }
.generating-copy small { font-size: .6rem; color: var(--muted); }
.generating-orbit {
display: flex;
gap: .28rem;
margin-bottom: .1rem;
}
.generating-orbit i {
width: 7px;
height: 7px;
border-radius: 50%;
background: var(--accent);
animation: generatingPulse 1.15s ease-in-out infinite;
}
.generating-orbit i:nth-child(2) { animation-delay: .16s; }
.generating-orbit i:nth-child(3) { animation-delay: .32s; }
@keyframes generatingAurora {
0% { transform: scale(1) translate3d(0, 0, 0); opacity: .6; }
100% { transform: scale(1.18) translate3d(0, -6%, 0); opacity: .9; }
}
@keyframes generatingGrid { to { background-position: 26px 26px; } }
@keyframes generatingSweep {
0% { transform: translateX(-120%); }
100% { transform: translateX(120%); }
}
@keyframes generatingPulse {
0%, 100% { transform: scale(.7); opacity: .45; }
50% { transform: scale(1.15); opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
.generating-aurora,
.generating-grid,
.generating-sweep,
.generating-orbit i { animation: none; }
}
.improvement-reference-label {
position: absolute;
inset-inline-start: .28rem;
bottom: .28rem;
padding: .12rem .32rem;
border-radius: 5px;
background: rgba(20, 14, 12, .78);
color: #fff !important;
font-size: .58rem !important;
font-weight: 800;
}
.selected-output-summary {
color: var(--accent) !important;
font-weight: 800;
}
.copy-ready-actions {
display: grid !important;
grid-template-columns: 1fr;
gap: .45rem !important;
}
.copy-ready-card .action-btn {
justify-content: center;
min-height: 46px;
border: 0;
background: var(--accent);
color: var(--accent-fg);
font-size: .8rem;
text-decoration: none;
text-align: center;
}
.copy-ready-card .action-btn.is-secondary {
border: 1px solid color-mix(in srgb, var(--accent) 32%, var(--line));
background: var(--surface);
color: var(--accent);
}
.copy-ready-card .action-btn span {
color: inherit;
}
.copy-ready-status {
min-height: 1em;
color: var(--muted);
font-size: .66rem;
}
.copy-ready-status.is-error { color: #b64141; }
.copy-ready-status.is-saved { color: #237150; }
.generated-prompt-panel {
display: grid;
gap: .7rem;
margin-top: .8rem;
padding-top: .8rem;
border-top: 1px solid color-mix(in srgb, var(--line) 84%, transparent);
}
.generated-prompt-head {
display: flex;
align-items: center;
justify-content: space-between;
gap: .75rem;
}
.generated-prompt-copy {
display: grid;
gap: .12rem;
min-width: 0;
}
.generated-prompt-copy strong {
color: var(--text);
font-size: .92rem;
line-height: 1.25;
}
.generated-prompt-copy span {
color: var(--muted);
font-size: .72rem;
line-height: 1.4;
}
/* Keep the result visually dominant while preserving a useful original. */
/* Before and after are a comparison, so the two columns stay equal and
side by side at every width — each with its own action above it. */
.generated-prompt-layout {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
grid-template-areas: "ref gen";
gap: .75rem;
align-items: start;
}
#improvement-reference-frame { grid-area: auto; }
#generated-image-frame { grid-area: auto; }
#generated-image-frame img {
width: 100%;
height: 100%;
max-height: none;
object-fit: contain;
}
.generated-prompt-actions {
display: flex;
align-items: center;
justify-content: flex-end;
gap: .5rem;
flex-wrap: wrap;
}
.generated-prompt-actions .action-btn {
min-height: 40px;
justify-content: center;
padding-inline: 1rem;
border: 0;
background: var(--accent);
color: var(--accent-fg);
font-size: .78rem;
text-decoration: none;
}
.generated-prompt-actions .action-btn.is-secondary {
border: 1px solid color-mix(in srgb, var(--accent) 32%, var(--line));
background: var(--surface);
color: var(--accent);
}
.generated-prompt-actions .action-btn span {
color: inherit;
}
#ai-relocation-card {
box-shadow: none;
}
#ai-relocation-card .prompt-mode-switch,
#ai-relocation-card .custom-improvements,
#ai-relocation-card .personal-change-panel,
#ai-relocation-card #output-size-section,
#ai-relocation-card #scene-look-section,
#ai-relocation-card .prompt-helpful-card {
margin-top: .75rem;
padding: .7rem 0 0;
border: 0;
border-top: 1px solid color-mix(in srgb, var(--line) 82%, transparent);
border-radius: 0;
background: transparent;
box-shadow: none;
}
/* Size is the first block now, so it owns the flush-top treatment. */
#ai-relocation-card #output-size-section {
margin-top: 0;
padding-top: 0;
border-top: 0;
}
#ai-relocation-card .prompt-mode-switch {
margin-top: .5rem;
padding-top: 0;
border-top: 0;
}
#ai-relocation-card .smart-action-grid,
#ai-relocation-card .size-choice-row,
#ai-relocation-card .format-chip-row {
margin-top: .45rem;
}
/* ---------------------------------------------------------------- flat
Generate step: no nested cards. Every panel here used to carry its own
border, tint and radius, which stacked four frames deep by the time you
reached a button. Sections are separated by space and their labels
instead, so controls sit directly on the page background. */
.hero-step-improve {
padding: .2rem 0 0;
border: 0;
border-radius: 0;
background: none;
box-shadow: none;
overflow: visible;
}
.hero-step-improve::before,
.hero-step-improve::after { display: none; }
.hero-step-improve #ai-relocation-card,
.hero-step-improve .dock-panel {
padding: 0;
background: none;
}
.hero-step-improve .dock-stage {
margin-top: .4rem;
border: 0;
border-radius: 0;
background: none;
box-shadow: none;
overflow: visible;
min-height: 0;
}
.hero-step-improve .dock-stage::before { display: none; }
.hero-step-improve #output-size-section,
.hero-step-improve .prompt-mode-switch,
.hero-step-improve .personal-change-panel,
.hero-step-improve .look-preset-panel,
.hero-step-improve .trend-panel,
.hero-step-improve .custom-improvements,
.hero-step-improve .model-suggestion-gate,
.hero-step-improve .creative-preference-block,
.hero-step-improve .studio-control-block {
padding: 0;
border: 0;
border-radius: 0;
background: none;
box-shadow: none;
}
.hero-step-improve #output-size-section,
.hero-step-improve .look-preset-panel,
.hero-step-improve .trend-panel,
.hero-step-improve .custom-improvements,
.hero-step-improve .model-suggestion-gate { margin: .55rem 0 0; }
.hero-step-improve .prompt-mode-switch { margin: .5rem 0 .2rem; }
.hero-step-improve .personal-change-panel { margin: .55rem 0 0; }
.hero-step-improve .creative-preference-block { padding-top: .5rem; }
.hero-step-improve .generated-prompt-panel {
margin-top: .9rem;
padding-top: .9rem;
border-top: 1px solid color-mix(in srgb, var(--line) 70%, transparent);
}
/* The 3D stage and the image frames are content surfaces, not containers —
they keep their own edge so the picture has a defined boundary. */
.hero-step-improve .studio3d-stage,
.hero-step-improve .improvement-reference-frame { border-radius: 14px; }
.prompt-details {
margin-top: .6rem;
}
.prompt-details summary {
padding: .5rem 0;
color: var(--muted);
font-size: .72rem;
font-weight: 700;
cursor: pointer;
}
@media (max-width: 720px) {
.generated-prompt-head {
align-items: stretch;
flex-direction: column;
}
.generated-prompt-actions {
justify-content: stretch;
}
.generated-prompt-actions .action-btn {
flex: 1 1 140px;
}
/* Before and after stay side by side: seeing them apart defeats the
comparison, and each column carries its own action button. */
.generated-prompt-layout {
grid-template-columns: repeat(2, minmax(0, 1fr));
grid-template-areas: "ref gen";
align-items: start;
gap: .5rem;
}
.improvement-reference-frame.is-empty { min-height: 220px; }
#improvement-reference-frame { max-height: 220px; }
#improvement-reference-frame img { max-height: 220px; }
.image-reupload-btn { font-size: .62rem; padding: .24rem .45rem; }
}
@media (max-width: 640px), (max-width: 900px) and (max-height: 500px) {
html {
min-height: 100%;
background:
linear-gradient(180deg, color-mix(in srgb, var(--bg) 90%, var(--brand-light) 10%), var(--bg) 32%) fixed;
overscroll-behavior-y: auto;
-webkit-overflow-scrolling: touch;
}
body {
min-height: 100svh;
min-height: 100dvh;
padding-top: calc(58px + env(safe-area-inset-top));
font-size: 15px;
background: transparent;
overscroll-behavior-y: auto;
}
body::before,
body::after,
.page-shell::before,
.page-shell::after {
display: none;
}
.site-header {
position: fixed;
inset: 0 0 auto;
top: 0;
margin: 0;
z-index: 1000;
animation: none;
}
.site-header-inner,
.site-header-inner.has-workflow-steps {
width: calc(100% - .5rem);
max-width: none;
min-height: calc(54px + env(safe-area-inset-top));
margin: .18rem auto 0;
padding: calc(.2rem + env(safe-area-inset-top)) .38rem .18rem;
grid-template-columns: 34px minmax(0, 1fr) auto !important;
grid-template-rows: 48px;
gap: 0 .22rem;
border: 1px solid color-mix(in srgb, var(--line) 78%, transparent);
border-radius: 18px;
background: color-mix(in srgb, var(--surface) 94%, var(--brand-light) 6%);
box-shadow: 0 8px 22px rgba(26,29,38,.12);
backdrop-filter: blur(16px) saturate(140%);
overflow: visible;
pointer-events: none;
}
.site-header-inner::before {
display: none;
}
.site-header-lead {
position: absolute;
top: 50%;
left: .38rem !important;
right: auto !important;
transform: translateY(-50%);
grid-column: 1;
grid-row: 1;
align-self: center;
gap: .18rem;
pointer-events: auto;
}
.site-logo-wrap {
width: 31px;
height: 31px;
padding: .08rem;
border-radius: 7px;
box-shadow: 0 5px 14px rgba(85,0,0,.2);
}
.site-logo {
width: 27px;
height: 27px;
max-width: 27px;
object-fit: contain;
}
.site-header-actions {
position: absolute;
top: 50%;
left: auto !important;
right: .38rem !important;
transform: translateY(-50%);
display: flex !important;
grid-column: 3;
grid-row: 1;
align-self: center;
margin: 0;
pointer-events: auto;
}
/* Arabic is a right-to-left language: the brand belongs on the right and
the account actions on the left, mirroring the Latin layout. */
html[dir="rtl"] .site-header-lead {
left: auto !important;
right: .38rem !important;
}
html[dir="rtl"] .site-header-actions {
left: .38rem !important;
right: auto !important;
}
html[dir="rtl"] .workflow-header-title {
direction: rtl;
unicode-bidi: plaintext;
}
#theme-btn {
display: none;
}
#lang-btn {
display: inline-flex !important;
align-items: center;
justify-content: center;
min-height: 28px;
width: 30px;
min-width: 30px;
padding: 0;
border: 0;
border-radius: 7px;
font-size: .78rem;
font-weight: 850;
background: transparent;
box-shadow: none;
}
/* Space is tight beside the workflow steps, so shrink the account controls. */
.site-header-actions { gap: .22rem; }
.site-header-actions .pill { height: 28px; }
#auth-open-btn { padding: 0 .55rem; font-size: .72rem; }
.auth-avatar { width: 28px; height: 28px; font-size: .74rem; }
.auth-menu { width: 200px; }
/* On phones the language switch lives inside the account menu instead. */
.auth-menu-lang { display: block; }
.site-header-inner:has(#auth-account:not(.hidden)) #lang-btn {
display: none !important;
}
/* The steps sit above the absolutely-positioned account button, so keep
them clear of it or they swallow the tap. */
.site-header-actions { z-index: 5; }
.workflow-header-steps {
grid-column: 2;
grid-row: 1;
order: initial;
width: 100%;
min-height: 42px;
max-width: 420px;
gap: .18rem;
padding: .18rem;
margin-inline-end: 36px;
border: 1px solid color-mix(in srgb, var(--line) 72%, transparent);
border-radius: 12px;
background: color-mix(in srgb, var(--surface) 90%, var(--brand-light) 10%);
box-shadow: inset 0 1px 0 color-mix(in srgb, #fff 55%, transparent);
backdrop-filter: none;
pointer-events: auto;
}
.workflow-header-steps::before,
.workflow-header-steps::after {
display: none;
}
.workflow-header-step {
grid-template-columns: auto minmax(0, 1fr);
justify-items: start;
align-items: center;
min-height: 34px;
padding: .24rem .3rem;
gap: .24rem;
border-radius: 9px;
color: var(--muted);
}
.workflow-header-step.is-active {
color: #fff;
background: linear-gradient(135deg, #7b2117, #a83b2a);
box-shadow: 0 4px 12px rgba(123, 33, 23, .2);
}
.workflow-header-step.is-complete:not(.is-active) {
color: var(--accent);
background: color-mix(in srgb, var(--accent) 8%, transparent);
}
.workflow-header-step.is-locked:not(.is-active) {
opacity: .56;
}
.workflow-header-step:hover {
transform: none;
}
.workflow-header-icon {
display: none;
}
.workflow-header-number {
display: grid;
place-items: center;
width: 18px;
height: 18px;
border: 1px solid currentColor;
border-radius: 50%;
font-size: .55rem;
font-weight: 900;
line-height: 1;
}
.workflow-header-copy {
display: block;
min-width: 0;
line-height: 1;
}
.workflow-header-step:not(:last-child)::after {
display: none;
}
.workflow-header-title {
display: block;
color: inherit;
font-size: .61rem;
font-weight: 850;
line-height: 1.05;
}
.workflow-header-step.is-active .workflow-header-title {
color: #fff;
}
.hero-steps.is-initial {
min-height: calc(100dvh - 120px);
padding-inline: .35rem;
}
.wrap,
.wrap-wide {
width: 100%;
max-width: none;
padding: .25rem 0 .65rem;
}
.page-shell,
.page-left,
#upload-workspace,
.control-layout,
.control-form,
.results-grid {
width: 100%;
max-width: none;
}
.page-shell {
gap: 0;
}
.control-hero {
margin: 0;
padding: 0;
border: 0;
}
.hero-steps {
gap: 0;
padding: 0;
}
.hero-step {
min-height: 0;
gap: .4rem;
padding: .45rem .55rem .55rem;
border: 0;
border-radius: 0;
background: transparent;
box-shadow: none;
animation: none !important;
opacity: 1;
transform: none;
}
.hero-step.is-active {
box-shadow: none;
}
.hero-step-upload.is-active:not(.is-collapsed) {
/* Floor the viewport-derived height: in a short window (or with the
mobile URL bar expanded) 100dvh minus the header collapsed the drop
zone to a sliver with the preview squeezed to a few pixels. */
min-height: max(240px, calc(100dvh - 82px - env(safe-area-inset-top)));
grid-template-rows: minmax(0, 1fr);
}
.hero-step-upload.is-active:not(.is-collapsed) .workflow-card-content {
min-height: 0;
grid-template-rows: minmax(0, 1fr) auto auto;
align-items: center;
padding: .15rem 0 .55rem;
}
.hero-step-analyze.is-active:not(.is-collapsed) {
min-height: max(240px, calc(100dvh - 78px - env(safe-area-inset-top, 0px)));
display: grid;
grid-template-rows: minmax(0, 1fr);
}
.hero-step-analyze.is-active:not(.is-collapsed) .workflow-card-content {
min-height: 0;
display: grid;
align-items: center;
align-content: center;
padding: .2rem 0 calc(.8rem + env(safe-area-inset-bottom, 0px));
}
.hero-step-analyze.is-active:not(.is-collapsed) .analysis-loader.visible {
align-self: center;
}
.hero-step-upload.is-active:not(.is-collapsed) .upload-btn.compact {
width: 100%;
min-height: 100%;
height: 100%;
justify-self: center;
align-self: stretch;
}
.hero-steps.is-initial .hero-step-upload .upload-btn.compact {
padding: 0;
border: 0;
border-radius: 0;
background: transparent;
box-shadow: none;
}
.hero-steps.is-initial .hero-step-upload .upload-btn.compact::before {
display: none;
}
.hero-steps.is-initial .hero-step-upload .upload-btn.compact:hover {
border: 0;
background: transparent;
transform: none;
}
.hero-steps.is-initial .hero-step-upload .upload-icon {
width: 82px;
height: 82px;
border-radius: 24px;
}
.hero-steps.is-initial .hero-step-upload .upload-icon svg {
width: 38px;
height: 38px;
}
.hero-steps.is-initial .hero-step-upload .upload-title {
font-size: clamp(1.4rem, 6vw, 1.75rem);
font-weight: 850;
line-height: 1.15;
white-space: nowrap;
}
.hero-step-header {
grid-template-columns: 1fr;
justify-items: center;
min-height: 72px;
gap: .2rem;
padding: .7rem 0 .45rem;
border-bottom: 0;
text-align: center;
}
.hero-step-header .hero-step-title {
align-self: auto;
font-size: 1.08rem;
font-weight: 850;
}
.step-skeleton {
gap: .34rem;
padding: .05rem 0 0;
}
.step-skeleton-line {
height: 7px;
}
.step-skeleton-block {
height: 32px;
border-radius: 0;
}
.step-skeleton-state {
font-size: .66rem;
}
.workflow-card-content {
gap: .35rem;
}
.workflow-panels-slot,
.hero-step {
scroll-margin-top: calc(88px + env(safe-area-inset-top));
}
.simple-analysis-summary {
gap: .55rem;
padding: .72rem .6rem;
border-inline: 0;
border-radius: 0;
}
.simple-summary-title {
font-size: 1rem;
}
.simple-summary-detail {
font-size: .72rem;
}
.simple-facts {
gap: .28rem;
}
.simple-fact {
padding: .48rem .42rem;
border-radius: 8px;
}
.simple-fact span {
font-size: .6rem;
}
.simple-fact strong {
font-size: .72rem;
}
.workflow-card-content .upload-btn.compact,
.upload-btn.compact {
min-height: 82px;
padding: .5rem;
gap: .22rem;
border-inline: 0;
border-radius: 0;
}
.upload-btn.compact .upload-icon {
width: 32px;
height: 32px;
border-radius: 8px;
}
.upload-btn.compact .upload-icon svg {
width: 16px;
height: 16px;
}
.upload-title {
font-size: .8rem;
}
.upload-subtitle {
font-size: .64rem;
line-height: 1.25;
}
#preview-wrap {
inset: 0;
border-radius: 0;
}
.status {
margin-top: .12rem;
font-size: .68rem;
}
.analysis-loader {
position: relative;
inset: auto;
width: 100%;
min-height: 66px;
padding: .58rem .2rem .3rem;
border-radius: 0;
}
.analysis-loader-visual {
width: 34px;
height: 34px;
}
.analysis-loader-stage {
max-width: 50vw;
font-size: .65rem;
}
.workspace-results,
.results-dock {
gap: .35rem;
margin-top: .35rem;
padding-top: 0;
border-top: 0;
}
.workflow-panels-slot {
gap: .35rem;
}
.workflow-panels-slot .dock-stage {
margin-top: .35rem;
}
.dock-tabs,
.workflow-panels-slot .dock-tabs {
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 0;
}
.dock-tab {
min-height: 56px;
padding: .35rem .2rem;
border-inline: 0;
border-radius: 0;
box-shadow: none;
justify-items: center;
align-content: center;
text-align: center;
gap: .15rem;
}
.dock-tab:hover,
.dock-tab.is-active {
transform: none;
box-shadow: none;
}
.dock-tab::after {
display: none;
}
.dock-icon {
width: 27px;
height: 27px;
border-radius: 7px;
box-shadow: none;
}
.dock-icon svg {
width: 14px;
height: 14px;
}
.dock-copy {
gap: 0;
}
.dock-title {
font-size: .66rem;
}
.dock-subtitle {
display: none;
}
.dock-stage,
.analysis-canvas,
.card,
.control-card,
.intake-panel {
border-inline: 0;
border-radius: 0;
box-shadow: none;
}
.dock-panel {
padding: .55rem;
}
.dock-panel-head {
margin-bottom: .4rem;
padding-bottom: .32rem;
gap: .4rem;
}
.dock-panel-title {
font-size: .72rem;
letter-spacing: .03em;
white-space: nowrap;
}
/* The note repeats what the numbered steps below already say. */
.dock-panel-note {
display: none;
}
.analysis-visual {
margin-bottom: .35rem;
}
.analysis-canvas,
.analysis-canvas img {
max-height: 54vh;
max-height: 54dvh;
}
.analysis-readout {
left: 7px;
right: 7px;
bottom: 7px;
gap: .24rem;
}
.analysis-readout span {
padding: .28rem .45rem;
font-size: .62rem;
}
.workflow-next-btn {
position: sticky;
bottom: .45rem;
z-index: 8;
min-height: 50px;
margin-top: .2rem;
border-radius: 12px;
box-shadow: 0 10px 24px rgba(85,0,0,.2);
}
.improve-intro,
.copy-ready-card {
border-inline: 0;
border-radius: 0;
}
.copy-ready-main {
grid-template-columns: 82px 1fr;
gap: .55rem !important;
}
.copy-ready-actions {
gap: .3rem !important;
}
.prompt-mode-switch {
grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
gap: .16rem;
margin-bottom: .4rem;
padding: .16rem;
border-radius: 11px;
}
/* Narrow screens get one line per mode: an icon over a single word. The
full name and the description would wrap to three lines here. */
.prompt-mode-btn {
justify-items: center;
gap: .12rem !important;
padding: .3rem .12rem !important;
text-align: center;
}
.prompt-mode-btn::before { display: none; }
.prompt-mode-btn strong,
.prompt-mode-btn .prompt-mode-note { display: none; }
.prompt-mode-icon {
display: grid;
place-items: center;
color: var(--mode-color);
}
.prompt-mode-icon svg { width: 15px; height: 15px; }
.prompt-mode-short {
display: block;
font-size: .53rem;
font-style: normal;
font-weight: 850;
line-height: 1.1;
white-space: normal;
overflow-wrap: anywhere;
max-width: 100%;
}
.personal-change-panel {
gap: .5rem;
padding: .6rem .55rem;
border-inline: 0;
border-radius: 0;
}
.personal-suggestion-chip {
min-height: 31px;
padding: .31rem .5rem;
font-size: .63rem;
}
.personal-note-label textarea {
min-height: 62px;
}
.custom-improvements {
padding: .55rem;
border-inline: 0;
border-radius: 0;
}
.custom-improvement-grid {
display: flex;
flex-wrap: wrap;
gap: .3rem;
}
.custom-improvement-btn {
min-height: 42px;
padding: .45rem;
border-radius: 8px;
font-size: .68rem;
}
.smart-actions-card {
gap: .55rem;
padding: .65rem .55rem;
border-inline: 0;
border-radius: 0;
box-shadow: none;
}
.analysis-learning-card {
padding: .35rem 0;
border: 0;
border-radius: 0;
background: transparent;
box-shadow: none;
}
.smart-actions-head { align-items: center; }
.smart-action-grid { grid-template-columns: 1fr; gap: .32rem; }
.smart-action-btn {
min-height: 58px;
padding: .55rem 2rem .55rem .55rem;
border-radius: 9px;
}
[dir="rtl"] .smart-action-btn { padding: .55rem .55rem .55rem 2rem; }
.smart-action-btn::after { top: .5rem; inset-inline-end: .5rem; }
.format-chip-row {
flex-wrap: nowrap;
overflow-x: auto;
padding-bottom: .25rem;
scroll-snap-type: x proximity;
}
.format-chip {
flex: 0 0 auto;
min-height: 40px;
scroll-snap-align: start;
}
.insight,
.custom-improvement-btn,
.ai-code-pre,
.ai-meta-block,
.url-input,
.url-btn {
border-radius: 0;
}
.insight {
padding: .38rem .45rem;
border-inline-start-width: 2px;
}
.size-choice-row {
display: grid;
grid-template-columns: repeat(5, minmax(0, 1fr));
gap: .25rem;
margin: .3rem 0 .1rem;
overflow: visible;
}
.size-choice {
grid-template-columns: minmax(0, 1fr);
justify-items: center;
min-width: 0;
min-height: 0;
gap: .12rem;
padding: .32rem .12rem;
border-radius: 9px;
text-align: center;
}
.size-choice-icon {
width: 18px;
height: 18px;
border-radius: 5px;
}
.size-choice-icon svg {
width: 12px;
height: 12px;
}
.size-choice-copy { justify-items: center; text-align: center; }
.size-choice-title { font-size: .53rem; }
.size-choice-ratio { font-size: .5rem; opacity: .75; }
}
body.landing-active {
overflow: hidden;
background: var(--bg);
}
body.landing-active::before,
body.landing-active::after {
display: none;
}
body.landing-active > .site-header,
body.landing-active > main {
display: none;
}
.landing-page {
position: fixed;
inset: 0;
z-index: 1000;
min-height: 100%;
display: grid;
place-items: center;
overflow-x: hidden;
overflow-y: auto;
padding: clamp(1.25rem, 4vw, 3rem);
--text: #1a1d26;
--muted: #6b6460;
/* One soft warm wash. The old three-stop diagonal ran brand-tint into
cream into brand-tint again, which muddied the middle of the page
exactly where the footage sits. */
background-color: #f7f4f1;
background-image: radial-gradient(
120% 80% at 50% 0%,
color-mix(in srgb, var(--brand-light) 34%, #ffffff) 0%,
#f7f4f1 58%
);
}
.landing-page[hidden] { display: none; }
.landing-language {
position: absolute;
top: clamp(1rem, 3vw, 1.75rem);
inset-inline-end: clamp(1rem, 3vw, 1.75rem);
min-height: 44px;
display: inline-flex;
align-items: center;
gap: .5rem;
padding: .6rem .9rem;
border: 1px solid color-mix(in srgb, var(--line) 82%, transparent);
border-radius: 999px;
color: var(--text);
background: transparent;
box-shadow: none;
font-weight: 600;
cursor: pointer;
transition: transform .2s ease, border-color .2s ease;
}
.landing-language:hover { transform: translateY(-2px); border-color: var(--brand-light); }
.landing-language svg { width: 18px; height: 18px; }
#lang-btn.is-clicked svg,
.landing-language.is-clicked svg {
animation: languageIconClick .48s cubic-bezier(.2,.8,.3,1);
transform-origin: center;
}
.landing-shell {
width: min(100%, 650px);
display: flex;
flex-direction: column;
align-items: center;
/* One gap governs the whole column. Each child used to carry its own
margin-top, which drifted out of step at every breakpoint. */
gap: clamp(.55rem, 1.6vh, .95rem);
text-align: center;
animation: landingArrive .8s cubic-bezier(.2,.75,.25,1) both;
}
/* The logo asset is a cream mark on transparency, so this tile is what
makes it legible — it cannot be dropped. What it no longer does is ring
itself in a glow, overlay a radial sheen, double up shadows and bob
forever: one flat fill and one shadow carry it. */
.landing-logo-stage {
width: clamp(112px, 13vw, 136px);
aspect-ratio: 1;
display: grid;
place-items: center;
padding: 8px;
border-radius: 26px;
background: var(--brand);
box-shadow: 0 14px 30px rgba(85, 0, 0, .22);
}
.landing-logo {
width: 100%;
height: 100%;
object-fit: contain;
display: block;
}
.landing-logo-stage picture,
.site-logo-wrap picture {
width: 100%;
height: 100%;
display: block;
}
.landing-beta {
display: inline-flex;
align-items: center;
padding: .2rem .5rem;
border-radius: 999px;
background: color-mix(in srgb, var(--muted) 12%, transparent);
color: var(--muted);
font-size: .56rem;
font-weight: 800;
letter-spacing: .12em;
text-transform: uppercase;
}
/* The headline stays on one line at every width. The English string is
~14.5em wide, so the viewport-relative slope is what holds it — not a
max-width, which is what made it wrap in the first place.
At the 3.2rem cap the line runs ~742px, wider than the 650px shell, so
it deliberately overflows its flex parent and centres against the page
instead. That is safe because the cap is only reached around 900px
viewport, where the padded page still offers ~826px, and because
.landing-page clips overflow-x so a stray pixel cannot scroll the page.
The 5.7vw slope is the small-screen limit and is already near it — at
320px it yields 18.2px against a 19.3px ceiling — so raise the cap when
the headline needs to grow, never the slope. */
.landing-primary {
max-width: none;
margin-top: clamp(.2rem, 1vh, .55rem);
color: var(--brand);
font-size: clamp(1rem, 5.7vw, 3.2rem);
font-weight: 800;
line-height: 1.06;
letter-spacing: -.02em;
white-space: nowrap;
}
/* The Arabic headline is ~10 characters longer than the English string
these slopes were tuned for, so with the same ramp it clipped at both
edges on phones. Same one-line rule, its own smaller ramp. */
[dir="rtl"] .landing-primary {
font-size: clamp(1rem, 4.9vw, 2.75rem);
letter-spacing: 0;
}
.landing-summary {
max-width: 58ch;
margin: -.15rem auto .05rem;
color: var(--muted);
font-size: clamp(.76rem, 1.8vw, .92rem);
font-weight: 500;
line-height: 1.45;
text-wrap: balance;
}
.landing-start {
margin-top: 1rem;
min-width: min(100%, 260px);
min-height: 54px;
display: inline-flex;
align-items: center;
justify-content: center;
gap: .65rem;
padding: .85rem 2rem;
border: 0;
border-radius: 999px;
color: #fff;
/* Flat brand fill. The diagonal gradient shifted the button's weight to
one corner, which fought the centred column it sits in. */
background: var(--brand);
box-shadow: 0 10px 24px rgba(85,0,0,.22);
font-size: 1rem;
font-weight: 700;
cursor: pointer;
transition: transform .22s ease, box-shadow .22s ease, background-color .22s ease;
}
.landing-start:hover {
transform: translateY(-2px);
background: #8d251c;
box-shadow: 0 16px 32px rgba(85,0,0,.26);
}
.landing-start svg { width: 20px; height: 20px; transition: transform .22s ease; }
.landing-start:hover svg { transform: translateX(4px); }
[dir="rtl"] .landing-start svg { transform: scaleX(-1); }
[dir="rtl"] .landing-start:hover svg { transform: translateX(-4px) scaleX(-1); }
.landing-cta {
display: grid;
justify-items: center;
gap: .5rem;
width: min(100%, 340px);
margin-inline: auto;
text-align: center;
}
.landing-cta .landing-start { margin-top: 0; width: 100%; }
.landing-or {
display: grid;
grid-template-columns: 1fr auto 1fr;
align-items: center;
gap: .6rem;
width: 100%;
margin: .05rem 0;
color: var(--muted);
font-size: .68rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: .06em;
}
.landing-or::before,
.landing-or::after {
content: "";
height: 1px;
background: color-mix(in srgb, var(--muted) 28%, transparent);
}
.landing-google {
display: inline-flex;
align-items: center;
justify-content: center;
gap: .6rem;
width: 100%;
min-height: 48px;
padding: .7rem 1.4rem;
border: 1px solid var(--line);
border-radius: 999px;
background: #fff;
color: #3c4043;
font-size: .92rem;
font-weight: 700;
cursor: pointer;
transition: transform .2s ease, box-shadow .2s ease;
}
.landing-google:hover { transform: translateY(-2px); box-shadow: 0 12px 24px rgba(26,29,38,.16); }
.landing-google svg { flex: none; }
.landing-secondary {
width: 100%;
min-height: 48px;
border: 1px solid color-mix(in srgb, var(--line) 80%, transparent);
border-radius: 999px;
background: rgba(255,255,255,.55);
color: var(--text);
font-size: .92rem;
font-weight: 700;
cursor: pointer;
transition: border-color .2s ease, color .2s ease, background-color .2s ease;
}
.landing-secondary:hover {
border-color: var(--brand);
color: var(--brand);
background: #fff;
}
.landing-page.is-leaving { animation: landingLeave .34s ease both; }
@keyframes landingArrive { from { opacity: 0; transform: translateY(24px) scale(.98); } to { opacity: 1; transform: none; } }
@keyframes landingLeave { to { opacity: 0; transform: scale(1.02); } }
@keyframes languageIconClick {
0% { transform: rotate(0) scale(1); }
45% { transform: rotate(190deg) scale(.78); }
72% { transform: rotate(330deg) scale(1.18); }
100% { transform: rotate(360deg) scale(1); }
}
@media (max-width: 560px) {
body.landing-active {
min-height: 100svh;
min-height: 100dvh;
padding-top: 0;
overflow-x: hidden;
overflow-y: auto;
}
.landing-page {
position: relative;
inset: auto;
width: 100%;
min-height: 100svh;
min-height: 100dvh;
overflow: visible;
padding:
calc(5.25rem + env(safe-area-inset-top, 0px))
1.25rem
calc(1rem + env(safe-area-inset-bottom, 0px));
align-items: stretch;
}
.landing-shell {
min-height: calc(100vh - 6.25rem - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px));
min-height: calc(100dvh - 6.25rem - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px));
margin-inline: auto;
gap: .5rem;
/* Replaces the old two-auto-margin trick, which only opened space in two
spots (before the logo, before the CTA) and left the logo, beta pill,
headline and footage clumped together in between. space-evenly treats
every gap the same — before the logo, between each element, and
before the CTA — so the whole column fills the screen instead of
just its two ends. It only works because nothing below still sets
margin: auto on the main axis; an auto margin on any child would
claim the free space for itself first and starve this. */
justify-content: space-evenly;
}
.landing-logo-stage { width: 128px; }
.landing-logo { border-radius: 24px; }
/* Pushed to the practical ceiling for this string. 30 characters on one
line is what caps it, not taste: at 375px the line already spans ~342
of 375 available pixels, so the headline is allowed to overflow the
padded shell and centre against the viewport instead. Going further
means shorter copy, not a bigger number. */
.landing-primary { font-size: clamp(1rem, 6.3vw, 2.2rem); }
/* Arabic: 40 characters against English's 30 — at 6.3vw it spanned
~402px of a 375px phone and the last word was cut off. */
[dir="rtl"] .landing-primary { font-size: clamp(1rem, 5.3vw, 1.9rem); }
.landing-language {
top: calc(1rem + env(safe-area-inset-top, 0px));
min-height: 40px;
padding: .48rem .75rem;
}
.landing-cta {
width: min(calc(100% - 1.5rem), 320px);
padding-top: .5rem;
flex-shrink: 0;
}
.landing-start {
position: relative;
z-index: 1;
left: auto;
bottom: auto;
min-width: 0;
min-height: 54px;
flex-shrink: 0;
transform: none;
}
.landing-cta .landing-start { width: 100%; margin-top: 0; }
.landing-start:hover { transform: translateY(-3px); }
.landing-google { min-height: 48px; font-size: .88rem; }
.landing-secondary { min-height: 46px; font-size: .87rem; }
}
@media (max-width: 560px) and (max-height: 740px) {
.landing-page {
padding-top: calc(4.5rem + env(safe-area-inset-top, 0px));
}
.landing-shell {
min-height: calc(100vh - 5.5rem - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px));
min-height: calc(100dvh - 5.5rem - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px));
gap: .4rem;
}
.landing-logo-stage { width: 76px; }
.landing-logo { border-radius: 17px; }
/* Short screens trade headline size for vertical room, but still on one
line — hence a smaller vw slope rather than a fixed size. */
.landing-primary { font-size: clamp(1rem, 5.4vw, 1.75rem); line-height: 1.1; }
.landing-cta { gap: .45rem; }
.landing-start { min-height: 50px; }
.landing-cta .landing-start { margin-top: 0; }
.landing-google { min-height: 44px; font-size: .86rem; }
.landing-secondary { min-height: 42px; font-size: .85rem; }
}
@media (prefers-reduced-motion: reduce) {
.landing-shell,
#lang-btn.is-clicked svg,
.landing-language.is-clicked svg,
.hero-steps.is-initial.steps-ready .upload-icon,
.analysis-loader-ring,
.analysis-loader-focus,
.analysis-improvement-point,
.analysis-improvement-point::before,
.analysis-loader-stage.is-changing,
.analysis-loader-track::after,
.upload-btn.is-analyzing #preview-wrap::after,
.workflow-next-arrow {
animation: none !important;
}
}
.auth-menu-credits {
width: 100%;
border: 0;
cursor: pointer;
text-align: start;
font-family: inherit;
}
.profile-credit-card {
display: grid;
grid-template-columns: auto 1fr auto;
align-items: center;
gap: .7rem;
width: 100%;
padding: .78rem;
border: 1px solid color-mix(in srgb, var(--accent) 26%, var(--line));
border-radius: 13px;
background: color-mix(in srgb, var(--accent) 7%, var(--surface));
color: var(--text);
text-align: start;
cursor: pointer;
font: inherit;
}
.profile-credit-card > span:nth-child(2) { display: grid; gap: .12rem; }
.profile-credit-card strong { font-size: .85rem; }
.profile-credit-card small { color: var(--muted); font-size: .67rem; }
.profile-credit-icon {
display: grid;
place-items: center;
width: 34px;
height: 34px;
border-radius: 10px;
background: var(--accent);
color: var(--accent-fg);
}
.profile-credit-icon svg { width: 18px; height: 18px; }
#credits-overlay { --credits-accent: #8f2f21; }
.credits-dialog {
width: min(600px, calc(100vw - 1.5rem));
max-height: min(92dvh, 780px);
justify-items: stretch;
gap: .85rem;
padding: 1.45rem;
overflow-y: auto;
text-align: start;
overscroll-behavior: contain;
}
.credits-heading {
display: grid;
gap: .35rem;
padding-inline-end: 2.4rem;
}
.credits-heading .auth-title {
font-size: 1.35rem;
line-height: 1.2;
text-align: start;
}
.credits-subtitle {
margin: 0;
color: var(--muted);
font-size: .75rem;
line-height: 1.45;
}
.credits-provider {
display: inline-flex;
align-items: center;
gap: .34rem;
width: max-content;
padding: .28rem .55rem;
border-radius: 999px;
background: #111827;
color: #fff;
font-size: .58rem;
font-weight: 750;
letter-spacing: .03em;
}
.credits-provider::before {
content: "";
width: 6px;
height: 6px;
border-radius: 50%;
background: #4ade80;
box-shadow: 0 0 0 3px rgba(74, 222, 128, .16);
}
.credits-balance {
display: grid;
grid-template-columns: 1fr auto;
align-items: center;
gap: 1rem;
padding: .9rem 1rem;
border-radius: 16px;
background: linear-gradient(135deg, #7b2117, #a83b2a);
color: #fff;
box-shadow: 0 12px 30px rgba(123, 33, 23, .18);
}
.credits-balance-copy { display: grid; gap: .16rem; }
.credits-balance-copy > span { font-size: .68rem; opacity: .8; }
.credits-balance-copy small { font-size: .6rem; opacity: .72; }
.credits-balance strong { font-size: 1.5rem; white-space: nowrap; }
.credits-balance small { font-size: .66rem; font-weight: 650; opacity: .8; }
.credit-cost-list { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; }
.credit-cost-list > div {
display: flex;
align-items: center;
justify-content: space-between;
gap: .5rem;
padding: .7rem;
border: 1px solid var(--line);
border-radius: 11px;
background: color-mix(in srgb, var(--surface) 90%, var(--brand-light) 10%);
}
.credit-cost-list > div > span { color: var(--muted); font-size: .65rem; }
.credit-cost-list strong { font-size: .74rem; white-space: nowrap; }
.credit-cost-list strong span { color: inherit; font-size: inherit; }
.credits-section-label {
margin: .05rem 0 -.25rem;
color: var(--text);
font-size: .72rem;
font-weight: 850;
}
.credit-package-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: .5rem; }
.credits-coming-soon {
display: grid;
justify-items: center;
gap: .35rem;
margin: .4rem 0 .2rem;
padding: 1rem .9rem;
border: 1px dashed color-mix(in srgb, var(--accent) 34%, var(--line));
border-radius: 14px;
background: color-mix(in srgb, var(--surface) 88%, var(--brand-light) 12%);
text-align: center;
}
.credits-coming-soon-icon {
display: grid;
place-items: center;
width: 38px;
height: 38px;
border-radius: 50%;
background: color-mix(in srgb, var(--accent) 14%, transparent);
color: var(--accent);
}
.credits-coming-soon-icon svg { width: 20px; height: 20px; }
.credits-coming-soon strong { font-size: .84rem; color: var(--text); }
.credits-coming-soon small { color: var(--muted); font-size: .68rem; line-height: 1.5; max-width: 34ch; }
.credit-package {
position: relative;
display: grid;
align-content: start;
gap: .42rem;
min-width: 0;
min-height: 150px;
padding: .78rem;
border: 1px solid var(--line);
border-radius: 15px;
background: var(--surface);
color: var(--text);
cursor: pointer;
font: inherit;
text-align: start;
transition: border-color .16s ease, box-shadow .16s ease, transform .16s ease;
}
.credit-package:hover {
border-color: color-mix(in srgb, var(--credits-accent) 55%, var(--line));
transform: translateY(-1px);
}
.credit-package.is-selected {
border-color: var(--credits-accent);
background: color-mix(in srgb, var(--surface) 92%, var(--brand-light) 8%);
box-shadow: 0 0 0 2px color-mix(in srgb, var(--credits-accent) 18%, transparent);
}
.credit-package.is-popular:not(.is-selected) { border-color: color-mix(in srgb, var(--accent) 70%, var(--line)); }
.credit-package-top {
display: flex;
align-items: center;
justify-content: space-between;
gap: .35rem;
min-height: 21px;
}
.credit-package-name { color: var(--muted); font-size: .62rem; font-weight: 800; }
.credit-popular-badge {
padding: .17rem .34rem;
border-radius: 999px;
background: color-mix(in srgb, var(--accent) 12%, var(--surface));
color: var(--accent);
font-size: .5rem;
font-weight: 850;
white-space: nowrap;
}
.credit-package-check {
display: none;
place-items: center;
width: 20px;
height: 20px;
border-radius: 50%;
background: var(--credits-accent);
color: #fff;
font-size: .68rem;
font-weight: 900;
}
.credit-package.is-selected .credit-popular-badge { display: none; }
.credit-package.is-selected .credit-package-check { display: grid; }
.credit-package-main { display: flex; align-items: baseline; gap: .28rem; }
.credit-package-main strong { font-size: 1.12rem; }
.credit-package-main span { color: var(--muted); font-size: .62rem; font-weight: 700; }
.credit-package-price { margin-top: auto; font-size: .86rem; font-weight: 850; color: var(--accent); }
.credit-package > small { color: var(--muted); font-size: .56rem; line-height: 1.35; }
.credit-package:disabled { opacity: .52; cursor: not-allowed; }
.credits-payment-step {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(190px, auto);
align-items: center;
gap: .7rem;
padding: .75rem;
border: 1px solid color-mix(in srgb, var(--credits-accent) 30%, var(--line));
border-radius: 15px;
background: color-mix(in srgb, var(--surface) 90%, var(--brand-light) 10%);
}
.credits-payment-summary { display: grid; gap: .12rem; min-width: 0; }
.credits-payment-summary > span { color: var(--muted); font-size: .6rem; font-weight: 700; }
.credits-payment-summary strong { font-size: .9rem; }
.credits-payment-summary small { color: var(--accent); font-size: .72rem; font-weight: 850; }
.moyasar-start-button {
display: inline-flex;
align-items: center;
justify-content: center;
gap: .55rem;
min-height: 46px;
padding: .62rem .8rem;
border: 0;
border-radius: 12px;
background: #111827;
color: #fff;
cursor: pointer;
font: inherit;
font-size: .75rem;
font-weight: 850;
box-shadow: 0 8px 18px rgba(17, 24, 39, .16);
}
.moyasar-start-button:hover { background: #020617; }
.moyasar-start-button:disabled { opacity: .65; cursor: wait; }
.moyasar-mark {
display: inline-grid;
place-items: center;
min-width: 34px;
height: 22px;
padding: 0 .3rem;
border-radius: 6px;
background: #fff;
color: #111827;
font-size: .68rem;
font-weight: 950;
letter-spacing: -.02em;
}
.moyasar-payment-form {
grid-column: 1 / -1;
width: 100%;
padding-top: .35rem;
}
.moyasar-payment-form,
.moyasar-payment-form .mysr-form { width: 100%; }
.moyasar-payment-form .mysr-form-button {
background: #111827;
border-radius: 12px;
}
.credits-payment-note {
grid-column: 1 / -1;
margin-top: -.3rem;
color: var(--muted);
font-size: .56rem;
text-align: center;
}
.studio3d-stage { min-height: 500px; max-height: min(72vh, 760px); }
.studio-side-trigger {
position: absolute;
z-index: 6;
top: 50%;
display: grid;
place-items: center;
width: 42px;
height: 58px;
padding: 0;
border: 1px solid rgba(255,255,255,.2);
background: rgba(14,15,17,.76);
color: #fff;
backdrop-filter: blur(10px);
cursor: pointer;
}
.auth-menu-item svg { width: 16px; height: 16px; flex: none; }
.auth-menu-item-label { min-width: 0; }
.studio-side-trigger svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; }
.studio-side-trigger.is-left { left: 0; border-radius: 0 12px 12px 0; }
.studio-side-trigger.is-right { right: 0; border-radius: 12px 0 0 12px; }
[dir="rtl"] .studio-side-trigger.is-left { left: auto; right: 0; border-radius: 12px 0 0 12px; }
[dir="rtl"] .studio-side-trigger.is-right { right: auto; left: 0; border-radius: 0 12px 12px 0; }
.studio-side-panel {
position: absolute;
z-index: 7;
top: 0;
bottom: 0;
width: min(350px, 86%);
display: grid;
grid-template-rows: auto minmax(0, 1fr);
background: rgba(15, 16, 19, .96);
color: #fff;
box-shadow: 0 0 34px rgba(0,0,0,.3);
backdrop-filter: none;
transition: transform .22s ease;
will-change: transform;
touch-action: pan-y;
cursor: default;
}
.studio-side-panel.is-left { left: 0; transform: translateX(-102%); }
.studio-side-panel.is-right { right: 0; transform: translateX(102%); }
.studio-side-panel.is-open { transform: translateX(0); }
[dir="rtl"] .studio-side-panel.is-left { left: auto; right: 0; transform: translateX(102%); }
[dir="rtl"] .studio-side-panel.is-right { right: auto; left: 0; transform: translateX(-102%); }
[dir="rtl"] .studio-side-panel.is-open { transform: translateX(0); }
.studio-side-panel-head {
display: flex;
align-items: center;
justify-content: space-between;
gap: .6rem;
padding: .8rem;
border-bottom: 1px solid rgba(255,255,255,.12);
}
.studio-side-panel-head strong { font-size: .78rem; }
.studio-side-close {
display: grid;
place-items: center;
width: 30px;
height: 30px;
padding: 0;
border: 0;
border-radius: 8px;
background: rgba(255,255,255,.1);
color: #fff;
cursor: pointer;
}
.studio-panel-scroll {
min-height: 0;
overflow-y: auto;
overscroll-behavior: contain;
padding: .72rem;
scrollbar-width: thin;
}
.studio-panel-scroll > * + * { margin-top: .68rem; }
.studio-side-panel .studio3d-dock {
position: static;
display: grid;
gap: .45rem;
padding: .65rem;
border: 1px solid rgba(255,255,255,.11);
border-radius: 12px;
background: rgba(255,255,255,.055);
backdrop-filter: none;
}
.studio-side-panel .studio3d-dock .studio3d-label {
flex-basis: auto;
color: rgba(255,255,255,.72);
}
.studio-side-panel .studio3d-dock .studio3d-chips,
.studio-side-panel .studio3d-dock .studio3d-swatches {
flex-wrap: wrap;
overflow: visible;
}
.studio-side-panel .studio-control-block,
.studio-side-panel .personal-suggestion-group,
.studio-side-panel .creative-preference-block {
padding: .65rem;
border: 1px solid rgba(255,255,255,.11);
border-radius: 12px;
background: rgba(255,255,255,.055);
}
.studio-side-panel .studio-control-head span,
.studio-side-panel .personal-group-head span,
.studio-side-panel .creative-reason { color: rgba(255,255,255,.58); }
.studio-side-panel .studio-light-toggle,
.studio-side-panel .creative-choice,
.studio-side-panel .personal-suggestion {
border-color: rgba(255,255,255,.13);
background: rgba(255,255,255,.075);
color: #fff;
}
.studio-side-panel .studio-light-toggle.is-active,
.studio-side-panel .creative-choice.is-selected,
.studio-side-panel .personal-suggestion.is-selected {
border-color: #fff;
background: #fff;
color: #181312;
}
.studio-side-panel .studio-light-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.studio-generate-button {
position: absolute;
z-index: 6;
inset-inline-end: .75rem;
bottom: .75rem;
display: inline-flex;
align-items: center;
justify-content: center;
gap: .5rem;
min-width: 0;
min-height: 38px;
padding: .48rem .72rem;
border: 1px solid rgba(255,255,255,.26);
border-radius: 999px;
background: linear-gradient(135deg, #7b2117, #a73b29);
color: #fff;
box-shadow: 0 8px 24px rgba(70,20,14,.32);
cursor: pointer;
font: inherit;
font-size: .69rem;
font-weight: 850;
}
.studio-generate-button:disabled { opacity: .62; cursor: wait; }
/* The result column keeps its own Generate button in studio mode too: the
studio's button sits under the 3D stage, far from the image it produces. */
.generated-image-frame.is-loading { overflow: hidden; }
@media (max-width: 640px) {
.auth-overlay {
place-items: end center;
padding: 0;
overscroll-behavior: contain;
}
.auth-overlay .auth-dialog {
width: 100%;
max-width: none;
max-height: 94dvh;
margin: auto 0 0;
padding: 1.2rem .95rem calc(1rem + env(safe-area-inset-bottom));
border-width: 1px 0 0;
border-radius: 24px 24px 0 0;
justify-items: stretch;
gap: .72rem;
overflow-y: auto;
text-align: start;
overscroll-behavior: contain;
box-shadow: 0 -18px 50px rgba(10, 8, 7, .24);
}
.auth-overlay .auth-dialog::before {
content: "";
justify-self: center;
width: 42px;
height: 4px;
margin: -.45rem 0 .05rem;
border-radius: 999px;
background: color-mix(in srgb, var(--muted) 38%, transparent);
}
.auth-overlay .auth-close {
top: .85rem;
inset-inline-end: .8rem;
width: 34px;
height: 34px;
border-radius: 10px;
background: color-mix(in srgb, var(--surface) 88%, var(--brand-light) 12%);
}
.auth-overlay .auth-title {
padding-inline-end: 2.4rem;
font-size: 1.18rem;
line-height: 1.25;
text-align: start;
}
.auth-overlay .auth-note {
margin: -.18rem 0 .12rem;
font-size: .71rem;
line-height: 1.5;
text-align: start;
}
.auth-overlay .auth-field,
.auth-overlay .auth-names,
.auth-overlay .auth-rules,
.auth-overlay .auth-divider,
.auth-overlay .landing-google,
.auth-overlay .auth-switch,
.auth-overlay .auth-status {
width: 100%;
}
.auth-overlay .auth-field .url-input { min-height: 48px; }
.auth-overlay .auth-dialog .action-btn,
.auth-overlay .landing-google { min-height: 49px; }
#profile-dialog .profile-credit-card {
min-height: 68px;
border-radius: 15px;
}
#upload-choice-overlay .upload-choice-dialog {
gap: .65rem;
}
#upload-choice-overlay .upload-choice-preview {
width: 82px;
height: 82px;
justify-self: center;
border-radius: 16px;
}
#upload-choice-overlay .auth-title,
#upload-choice-overlay .auth-note {
text-align: center;
padding-inline: 1.8rem;
}
#upload-choice-overlay .upload-choice-actions {
grid-template-columns: 1fr;
gap: .5rem;
}
#upload-choice-overlay .upload-choice-action {
grid-template-columns: 38px minmax(0, 1fr) auto;
grid-template-rows: auto auto;
align-items: center;
align-content: center;
justify-items: stretch;
min-height: 82px;
gap: .16rem .65rem;
padding: .72rem;
border-radius: 14px;
text-align: start;
}
#upload-choice-overlay .upload-choice-action svg {
grid-column: 1;
grid-row: 1 / 3;
width: 25px;
height: 25px;
justify-self: center;
}
#upload-choice-overlay .upload-choice-action strong {
grid-column: 2;
grid-row: 1;
font-size: .82rem;
}
#upload-choice-overlay .upload-choice-action > span {
grid-column: 2;
grid-row: 2;
max-width: none;
font-size: .62rem;
}
#upload-choice-overlay .upload-choice-action small {
grid-column: 3;
grid-row: 1 / 3;
color: var(--accent);
font-size: .61rem;
font-weight: 850;
white-space: nowrap;
}
#credits-overlay {
place-items: end center;
padding: 0;
}
.credits-dialog {
width: 100%;
max-height: 94dvh;
margin: auto 0 0;
padding: 1.15rem .85rem calc(.9rem + env(safe-area-inset-bottom));
border-width: 1px 0 0;
border-radius: 24px 24px 0 0;
gap: .68rem;
}
.credits-dialog::before { margin-bottom: -.1rem; }
.credits-heading { gap: .25rem; padding-inline-end: 2.2rem; }
.credits-heading .auth-title { font-size: 1.2rem; }
.credits-subtitle { font-size: .69rem; }
.credits-provider { font-size: .53rem; }
.credits-balance { padding: .72rem .8rem; border-radius: 13px; }
.credits-balance strong { font-size: 1.28rem; }
.credit-cost-list { gap: .4rem; }
.credit-cost-list > div { display: grid; gap: .16rem; padding: .58rem; }
.credit-cost-list span { font-size: .58rem; }
.credit-cost-list strong { font-size: .67rem; }
.credit-package-grid { grid-template-columns: 1fr; gap: .45rem; }
.credit-package {
grid-template-columns: minmax(0, 1fr) auto;
grid-template-rows: auto auto;
min-height: 0;
gap: .2rem .7rem;
padding: .68rem .72rem;
border-radius: 12px;
}
.credit-package-top { grid-column: 1; grid-row: 1; justify-content: flex-start; }
.credit-package-main { grid-column: 1; grid-row: 2; }
.credit-package-price {
grid-column: 2;
grid-row: 1 / 3;
align-self: center;
margin: 0;
font-size: .9rem;
}
.credit-package > small { display: none; }
.credit-package-check { position: absolute; inset-inline-end: -.28rem; top: -.28rem; }
.credits-payment-step {
position: sticky;
z-index: 3;
bottom: calc(-.9rem - env(safe-area-inset-bottom));
grid-template-columns: 1fr;
gap: .5rem;
margin: .05rem -.85rem 0;
padding: .72rem .85rem calc(.78rem + env(safe-area-inset-bottom));
border-width: 1px 0 0;
border-radius: 16px 16px 0 0;
background: var(--surface);
box-shadow: 0 -12px 28px rgba(20, 14, 12, .12);
}
.credits-payment-summary {
grid-template-columns: 1fr auto;
align-items: center;
}
.credits-payment-summary > span { grid-column: 1; }
.credits-payment-summary strong { grid-column: 1; }
.credits-payment-summary small { grid-column: 2; grid-row: 1 / 3; font-size: .8rem; }
.moyasar-start-button { width: 100%; min-height: 48px; }
.credits-payment-note { margin: -.18rem 0 0; }
.studio3d-stage { min-height: 56vh; max-height: 68vh; aspect-ratio: auto; }
.studio-side-trigger { width: 34px; height: 46px; }
.studio-side-trigger svg { width: 17px; height: 17px; }
.studio-side-panel { width: min(300px, 84%); backdrop-filter: none; }
.studio-side-panel-head { padding: .58rem .65rem; }
.studio-panel-scroll { padding: .5rem; }
.studio-side-panel .studio-control-block,
.studio-side-panel .personal-suggestion-group,
.studio-side-panel .creative-preference-block,
.studio-side-panel .studio3d-dock { padding: .5rem; border-radius: 10px; }
.studio-side-panel .studio-light-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.studio-side-panel .studio-light-toggle,
.studio-side-panel .creative-choice,
.studio-side-panel .personal-suggestion { min-height: 36px; padding: .38rem; font-size: .62rem; }
.studio-generate-button { inset-inline-end: .5rem; bottom: .5rem; min-height: 34px; padding: .42rem .62rem; }
}
/* Mobile/install polish and the unified Improve comparison. */
.landing-studio-preview {
width: 100%;
min-height: 46px;
display: inline-flex;
align-items: center;
justify-content: center;
gap: .5rem;
padding: .65rem 1rem;
border: 0;
background: transparent;
color: var(--brand);
font: inherit;
font-size: .84rem;
font-weight: 800;
cursor: pointer;
}
.landing-studio-preview svg { width: 17px; height: 17px; }
.landing-studio-preview:hover { color: #8d251c; }
/* These five links had no styling at all — they inherited the global anchor
colour and ran together as one pale strip under the buttons. */
.landing-legal-links {
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
gap: .25rem .95rem;
margin-top: .5rem;
}
.landing-legal-links a {
color: var(--muted);
font-size: .74rem;
font-weight: 600;
text-decoration: none;
white-space: nowrap;
transition: color .18s ease;
}
.landing-legal-links a:hover {
color: var(--brand);
text-decoration: underline;
text-underline-offset: 3px;
}
/* Kept beside the base rule on purpose: the landing's 560px block sits
earlier in this stylesheet, so an override written there loses to these
at equal specificity. */
@media (max-width: 560px) {
.landing-summary {
max-width: 40ch;
font-size: .75rem;
line-height: 1.35;
}
.landing-legal-links { gap: .2rem .6rem; }
.landing-legal-links a { font-size: .7rem; }
}
.guest-studio-banner {
display: none;
align-items: center;
justify-content: space-between;
gap: .8rem;
margin-bottom: .75rem;
padding: .75rem .8rem;
border: 1px solid color-mix(in srgb, var(--accent) 22%, var(--line));
border-radius: 14px;
background: color-mix(in srgb, var(--surface) 84%, var(--brand-light) 16%);
}
body.guest-studio-preview .guest-studio-banner { display: flex; }
.guest-studio-banner > span { display: grid; gap: .1rem; min-width: 0; }
.guest-studio-banner strong { font-size: .8rem; }
.guest-studio-banner small { color: var(--muted); font-size: .65rem; line-height: 1.4; }
.guest-studio-banner button {
flex: none;
min-height: 38px;
padding: .45rem .75rem;
border: 0;
border-radius: 999px;
background: var(--accent);
color: var(--accent-fg);
font: inherit;
font-size: .7rem;
font-weight: 850;
cursor: pointer;
}
body.guest-studio-preview #output-size-section,
body.guest-studio-preview #ai-relocation-card > .improve-section-label,
body.guest-studio-preview .generated-prompt-panel {
display: none;
}
body.guest-studio-preview .prompt-mode-switch {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
/* A guest is previewing the studio itself; the analysis-backed and
look-picking modes need an account, so they stay out of the switch. */
body.guest-studio-preview .prompt-mode-btn[data-prompt-mode="model"],
body.guest-studio-preview .prompt-mode-btn[data-prompt-mode="presets"],
body.guest-studio-preview .prompt-mode-btn[data-prompt-mode="trends"] {
display: none;
}
body.guest-studio-preview .workflow-header-steps { visibility: hidden; }
.studio-side-trigger {
grid-template-rows: auto auto;
gap: .16rem;
touch-action: manipulation;
}
.studio-side-trigger span {
font-size: .5rem;
font-weight: 850;
line-height: 1;
}
.studio3d-expand,
.studio3d-exit-fullscreen {
touch-action: manipulation;
-webkit-tap-highlight-color: transparent;
}
.studio3d.is-fullscreen,
.studio3d:fullscreen {
width: 100vw;
width: 100dvw;
height: 100vh;
height: 100dvh;
max-width: none;
max-height: none;
padding: 0;
border: 0;
border-radius: 0;
overflow: hidden;
}
.studio3d:fullscreen::backdrop { background: #0d0a09; }
.studio3d.is-fullscreen .studio3d-stage,
.studio3d:fullscreen .studio3d-stage {
min-height: 100vh;
min-height: 100dvh;
height: 100vh;
height: 100dvh;
max-height: none;
}
.studio3d.is-fullscreen .studio-side-panel,
.studio3d:fullscreen .studio-side-panel {
position: fixed;
top: 0;
bottom: 0;
max-height: 100dvh;
}
body.studio-fullscreen-active { overflow: hidden !important; }
/* Fullscreen means the stage owns the whole viewport — a sticky/fixed
header would float over the scene on every platform that fakes
fullscreen instead of using the real Fullscreen API. */
body.studio-fullscreen-active .site-header,
body.studio-fullscreen-active .site-legal-footer { display: none !important; }
#ai-relocation-card > .dock-panel-head {
padding: .2rem 0 .75rem;
border-bottom: 1px solid color-mix(in srgb, var(--line) 75%, transparent);
}
#ai-relocation-card > .dock-panel-head .dock-panel-title { font-size: 1rem; }
#output-size-section {
padding: .7rem;
border: 1px solid color-mix(in srgb, var(--line) 82%, transparent);
border-radius: 14px;
background: color-mix(in srgb, var(--surface) 90%, var(--brand-light) 10%);
}
#output-size-section .improve-section-label { margin-top: 0; }
.image-comparison-item {
min-width: 0;
display: flex;
flex-direction: column;
gap: .4rem;
}
.image-comparison-item.is-reference { grid-area: ref; }
.image-comparison-item.is-generated { grid-area: gen; }
.image-comparison-head {
display: grid;
justify-items: center;
align-content: start;
min-height: 0;
padding-inline: .1rem;
text-align: center;
}
/* The caption names the picture, so it sits under it. */
.image-comparison-caption {
display: block;
width: 100%;
margin-top: .35rem;
color: var(--text);
font-size: .72rem;
font-weight: 850;
text-align: center;
}
.image-comparison-action {
flex: none;
min-height: 31px;
display: inline-flex;
align-items: center;
justify-content: center;
gap: .3rem;
padding: .35rem .58rem;
border: 1px solid color-mix(in srgb, var(--accent) 28%, var(--line));
border-radius: 9px;
background: var(--surface);
color: var(--accent);
font: inherit;
font-size: .62rem;
font-weight: 800;
cursor: pointer;
}
.image-comparison-action svg { width: 14px; height: 14px; }
.image-comparison-action:hover { background: color-mix(in srgb, var(--surface) 88%, var(--brand-light) 12%); }
/* Generate is the primary action on this screen, so it reads as filled
while "Upload new image" stays a quiet outline. */
.image-comparison-action.is-primary {
width: 100%;
border-color: var(--accent);
background: var(--accent);
color: var(--accent-fg);
font-size: .68rem;
}
/* The price rides inside the button it applies to, after a divider, so the
cost is read as part of the action rather than as separate prose. */
.generate-price {
display: inline-flex;
align-items: center;
gap: .18rem;
padding-inline-start: .42rem;
margin-inline-start: .42rem;
border-inline-start: 1px solid color-mix(in srgb, currentColor 42%, transparent);
font-weight: 850;
line-height: 1;
opacity: .92;
}
.generate-price svg { width: 12px; height: 12px; }
.generate-price b { font-weight: 850; }
.image-comparison-action.is-primary:disabled .generate-price { opacity: .7; }
.image-comparison-action.is-primary:hover {
background: color-mix(in srgb, var(--accent) 88%, #000 12%);
}
.image-comparison-action.is-primary:disabled {
opacity: .55;
cursor: default;
}
/* Saving is the device's own long-press action on the rendered image, so
the only thing needed here is the instruction. */
.konvrt-save-hint {
display: block;
width: 100%;
margin-top: .3rem;
color: var(--muted);
font-size: .5rem;
font-weight: 700;
line-height: 1.2;
text-align: center;
}
.konvrt-save-hint.hidden { display: none !important; }
/* Replace-from-Explore: the locked scene already decided the art
direction, so the workspace chooser and the styling panels stand down
and the screen reduces to upload → format/strength → Generate. */
body.remix-scene-active .prompt-mode-switch,
body.remix-scene-active .look-preset-panel,
body.remix-scene-active .trend-panel,
body.remix-scene-active .personal-change-panel { display: none !important; }
/* The header's Explore pill: an wearing the pill look. On phones the
bottom nav owns Explore, so the pill retires there. */
.pill-explore {
display: inline-flex;
align-items: center;
gap: .3rem;
text-decoration: none;
font-weight: 700;
font-size: .68rem;
}
.pill-explore svg { width: 15px; height: 15px; }
@media (max-width: 720px) {
#explore-pill { display: none !important; }
}
/* Share to Explore: a quiet pill under the render; filled once shared. */
.konvrt-share-btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: .35rem;
margin: .4rem auto 0;
min-height: 34px;
padding: .3rem .85rem;
border: 1px solid var(--line);
border-radius: 999px;
background: var(--surface);
color: var(--text);
font-size: .68rem;
font-weight: 700;
cursor: pointer;
}
.konvrt-share-btn svg { width: 15px; height: 15px; }
.konvrt-share-btn.is-shared {
background: var(--accent);
border-color: var(--accent);
color: var(--accent-fg);
}
.konvrt-share-btn.hidden { display: none !important; }
.generated-prompt-layout {
grid-template-columns: repeat(2, minmax(0, 1fr));
grid-template-areas: "ref gen";
align-items: start;
min-width: 0;
max-width: 100%;
}
.improvement-reference-frame {
min-height: 0;
height: auto;
align-self: stretch;
}
.improvement-reference-frame img {
width: 100%;
height: 100%;
max-height: none;
object-fit: contain;
}
.image-frame-empty { display: none; color: var(--muted); font-size: .68rem; }
.improvement-reference-frame img:not([src]) + .image-frame-empty { display: block; }
.generated-image-loading { padding: .55rem; }
.generated-image-skeleton { grid-template-rows: minmax(0, 1fr) 8px 8px; }
@media (max-width: 640px) {
html,
body {
width: 100%;
min-height: 100%;
background-color: var(--bg);
}
body {
background-image: linear-gradient(
180deg,
color-mix(in srgb, var(--bg) 90%, var(--brand-light) 10%),
var(--bg) 34%
);
background-attachment: fixed;
}
body.landing-active {
position: fixed;
inset: 0;
width: 100%;
height: 100vh;
height: 100dvh;
min-height: 0;
overflow: hidden;
background: #f6f2ef;
}
.landing-page {
position: fixed;
inset: 0;
width: 100%;
height: 100vh;
height: 100dvh;
min-height: 0;
overflow-x: hidden;
overflow-y: auto;
overscroll-behavior: contain;
background-color: #f6f2ef;
}
.landing-shell { min-height: 100%; }
.auth-menu {
position: absolute;
top: calc(100% + .55rem);
left: auto;
right: 0;
inset-inline-end: 0;
width: min(260px, calc(100vw - 1rem));
max-height: calc(100dvh - 76px - env(safe-area-inset-top, 0px));
padding: .65rem;
border-radius: 16px;
overflow-y: auto;
box-shadow: 0 20px 50px rgba(20,14,12,.24);
}
html[dir="rtl"] .auth-menu {
left: auto;
right: 0;
inset-inline-start: auto;
inset-inline-end: 0;
}
.auth-menu-head { padding: .3rem .5rem .65rem; }
.auth-menu-credits,
.auth-menu-item {
min-height: 46px;
padding: .62rem .65rem;
border-radius: 11px;
font-size: .78rem;
}
.auth-menu-item + .auth-menu-item { border-top: 1px solid color-mix(in srgb, var(--line) 72%, transparent); }
#ai-relocation-card { padding: .55rem; background: var(--bg); }
#ai-relocation-card > .dock-panel-head {
margin: 0 0 .45rem;
padding: .1rem .1rem .4rem;
}
#ai-relocation-card > .dock-panel-head .dock-panel-title {
font-size: .78rem;
white-space: nowrap;
}
#output-size-section {
margin-inline: -.05rem;
padding: .5rem .45rem;
border-radius: 12px;
}
.improve-section-label {
margin: .5rem 0 .22rem;
font-size: .62rem;
letter-spacing: .04em;
}
.personal-change-panel {
margin-inline: -.65rem;
margin-bottom: .65rem;
padding: 0;
border-inline: 0;
border-radius: 0;
background: transparent;
}
.studio3d { gap: 0; }
.studio3d-stage {
min-height: min(58dvh, 520px);
height: min(58dvh, 520px);
max-height: none;
aspect-ratio: auto;
border-inline: 0;
border-radius: 0;
}
.studio-side-trigger {
width: 38px;
height: 40px;
gap: .08rem;
}
.studio-side-trigger svg { width: 15px; height: 15px; }
.studio-side-trigger span { display: block; font-size: .44rem; }
.studio-side-panel {
width: min(350px, 92%);
backdrop-filter: blur(10px);
}
.studio-side-panel-head { padding: .72rem .78rem; }
.studio-panel-scroll { padding: .68rem; }
.studio-side-panel .studio-control-block,
.studio-side-panel .personal-suggestion-group,
.studio-side-panel .creative-preference-block,
.studio-side-panel .studio3d-dock {
padding: .65rem;
border-radius: 12px;
}
.studio-side-panel .studio-light-toggle,
.studio-side-panel .creative-choice,
.studio-side-panel .personal-suggestion {
min-height: 44px;
padding: .5rem;
font-size: .68rem;
}
.studio3d-expand { width: 38px; height: 38px; }
.studio3d-exit-fullscreen { top: calc(.7rem + env(safe-area-inset-top, 0px)); }
.studio3d.is-fullscreen .studio3d-stage,
.studio3d:fullscreen .studio3d-stage {
min-height: 100dvh;
height: 100dvh;
}
.studio3d.is-fullscreen .studio-side-trigger,
.studio3d:fullscreen .studio-side-trigger { top: 50%; }
.guest-studio-banner {
align-items: stretch;
flex-direction: column;
margin: 0 0 .65rem;
}
.guest-studio-banner button { width: 100%; }
.generated-prompt-panel {
width: 100%;
min-width: 0;
max-width: 100%;
margin: .8rem 0 0;
padding: .75rem 0 0;
border-top: 1px solid color-mix(in srgb, var(--line) 72%, transparent);
}
.generated-prompt-head { padding-inline: .1rem; }
.generated-prompt-layout {
grid-template-columns: repeat(2, minmax(0, 1fr));
grid-template-areas: "ref gen";
gap: .5rem;
}
.image-comparison-head {
min-height: 0;
align-content: start;
gap: .25rem;
}
.image-comparison-caption { margin-top: .3rem; font-size: .64rem; }
.image-comparison-action {
width: 100%;
min-height: 30px;
padding: .3rem .35rem;
font-size: .56rem;
}
.improvement-reference-frame,
.improvement-reference-frame.is-empty,
#improvement-reference-frame,
#generated-image-frame {
width: 100%;
min-height: 0;
max-height: none;
}
#improvement-reference-frame img,
#generated-image-frame img { max-height: none; }
.generated-image-placeholder { padding: .55rem; font-size: .62rem; }
}
/* Clear, unified studio and responsive shell. These rules intentionally
live last so the current mobile cascade has one authoritative outcome. */
.mobile-menu-button {
display: none;
width: 44px;
height: 44px;
padding: 0;
border: 1px solid color-mix(in srgb, var(--line) 82%, transparent);
border-radius: 12px;
background: color-mix(in srgb, var(--surface) 90%, var(--brand-light) 10%);
color: var(--text);
cursor: pointer;
place-content: center;
gap: 4px;
}
.mobile-menu-button > span {
display: block;
width: 18px;
height: 2px;
border-radius: 999px;
background: currentColor;
transition: transform .18s ease, opacity .18s ease;
}
.auth-account.is-open .mobile-menu-button > span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.auth-account.is-open .mobile-menu-button > span:nth-child(2) { opacity: 0; }
.auth-account.is-open .mobile-menu-button > span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }
.auth-menu-theme { display: none; }
.prompt-mode-switch { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.studio-subject-switch {
position: absolute;
z-index: 5;
top: .55rem;
left: 50%;
transform: translateX(-50%);
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
min-width: 150px;
padding: 2px;
border: 1px solid rgba(255,255,255,.22);
border-radius: 9px;
background: rgba(12,13,15,.74);
box-shadow: 0 10px 26px rgba(0,0,0,.2);
backdrop-filter: blur(10px);
}
.studio-subject-switch button {
min-height: 24px;
padding: .2rem .5rem;
border: 0;
border-radius: 7px;
background: transparent;
color: rgba(255,255,255,.7);
font: inherit;
font-size: .58rem;
font-weight: 800;
cursor: pointer;
}
.studio-subject-switch button.is-active {
background: #fff;
color: #181312;
box-shadow: 0 4px 12px rgba(0,0,0,.2);
}
.studio-quality-badge {
position: absolute;
z-index: 4;
top: 2.9rem;
left: .65rem;
display: inline-flex;
align-items: center;
gap: .38rem;
max-width: min(460px, calc(100% - 1.3rem));
padding: .24rem .28rem .24rem .56rem;
border-radius: 999px;
background: rgba(12,13,15,.58);
color: rgba(255,255,255,.84);
font-size: .58rem;
font-weight: 700;
pointer-events: auto;
backdrop-filter: blur(8px);
}
/* The status dot is gone; state now reads from the text and the button. */
.studio-quality-badge i { display: none; }
.studio-quality-badge > span {
min-width: 0;
white-space: normal;
overflow-wrap: anywhere;
}
/* Icon only. The label stays in the DOM for screen readers and for the
state machine that rewrites it, but it is not painted. */
.studio-extract-3d {
width: 26px;
height: 26px;
min-height: 26px;
display: inline-grid;
place-items: center;
flex: none;
padding: 0;
border: 1px solid rgba(255,255,255,.28);
border-radius: 50%;
background: rgba(255,255,255,.94);
color: #201a18;
box-shadow: 0 3px 9px rgba(0,0,0,.16);
font: inherit;
cursor: pointer;
transition: transform .18s ease, background .18s ease, opacity .18s ease;
}
.studio-extract-3d > span {
position: absolute;
width: 1px;
height: 1px;
overflow: hidden;
clip-path: inset(50%);
white-space: nowrap;
}
/* While the mesh is building the cube is replaced by a spinning ring. */
.studio-extract-3d::after {
content: "";
display: none;
width: 13px;
height: 13px;
border: 2px solid color-mix(in srgb, #201a18 22%, transparent);
border-top-color: #201a18;
border-radius: 50%;
animation: studio-extract-spin .7s linear infinite;
}
.studio-quality-badge[data-state="working"] .studio-extract-3d > svg { display: none; }
.studio-quality-badge[data-state="working"] .studio-extract-3d::after { display: block; }
@keyframes studio-extract-spin { to { transform: rotate(360deg); } }
.studio-extract-3d:hover:not(:disabled) {
transform: translateY(-1px);
background: #fff;
}
.studio-extract-3d:disabled { cursor: wait; opacity: .74; }
.studio-extract-3d > svg { width: 14px; height: 14px; flex: none; }
.studio-quality-badge[data-state="working"] i {
background: #f7c566;
box-shadow: 0 0 0 3px rgba(247,197,102,.18);
animation: studio-3d-pulse 1s ease-in-out infinite;
}
.studio-quality-badge[data-state="ready"] i {
background: #75dfab;
box-shadow: 0 0 0 3px rgba(117,223,171,.18);
}
.studio-quality-badge[data-state="fallback"] i {
background: #f2a65f;
box-shadow: 0 0 0 3px rgba(242,166,95,.18);
}
@keyframes studio-3d-pulse {
50% { opacity: .45; transform: scale(.76); }
}
[dir="rtl"] .studio-quality-badge { left: auto; right: .65rem; }
.personalize-button-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: .4rem;
margin-top: .5rem;
}
.personalize-prompt-button {
min-height: 54px;
display: flex;
align-items: center;
gap: .48rem;
padding: .5rem;
border: 1px solid rgba(255,255,255,.13);
border-radius: 10px;
background: rgba(255,255,255,.075);
color: #fff;
text-align: start;
font: inherit;
cursor: pointer;
}
.personalize-prompt-button svg {
width: 18px;
height: 18px;
flex: none;
fill: none;
stroke: currentColor;
stroke-width: 1.8;
}
.personalize-prompt-button > span { display: grid; place-items: center; flex: none; }
.personalize-prompt-button strong { font-size: .66rem; font-weight: 780; line-height: 1.25; }
.personalize-prompt-button.is-selected {
border-color: #fff;
background: #fff;
color: #181312;
}
.studio-side-panel.is-context-editing .studio-panel-scroll > :not(.studio-context-editor) {
display: none !important;
}
.studio-side-panel.is-context-editing .studio-context-editor {
border-color: rgba(255,255,255,.25);
background: rgba(255,255,255,.085);
}
.studio3d-chips.is-visual {
display: grid !important;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: .42rem;
width: 100%;
}
.studio3d-chip.has-preview {
min-width: 0;
min-height: 56px;
display: grid;
grid-template-columns: 40px minmax(0, 1fr);
align-items: center;
gap: .48rem;
padding: .38rem !important;
text-align: start;
}
.studio3d-chip-preview {
width: 40px;
height: 40px;
display: grid;
place-items: center;
overflow: hidden;
border: 1px solid rgba(255,255,255,.22);
border-radius: 8px;
background: var(--preview-color, #9d948b);
box-shadow: inset 0 1px 0 rgba(255,255,255,.26);
}
.studio3d-chip-preview[data-texture="wood"] {
background:
radial-gradient(ellipse at 72% 24%, transparent 0 9%, rgba(50,24,10,.28) 10% 12%, transparent 13%),
repeating-linear-gradient(5deg, rgba(255,255,255,.08) 0 2px, transparent 2px 6px, rgba(55,24,8,.16) 6px 7px),
var(--preview-color);
}
.studio3d-chip-preview[data-texture="marble"] {
background:
linear-gradient(122deg, transparent 0 28%, rgba(104,112,122,.2) 29% 31%, transparent 32% 55%, rgba(128,136,145,.18) 56% 58%, transparent 59%),
linear-gradient(150deg, #fff, var(--preview-color));
}
.studio3d-chip-preview[data-texture="concrete"] {
background:
radial-gradient(circle at 20% 24%, rgba(255,255,255,.3) 0 1px, transparent 1.5px),
radial-gradient(circle at 72% 62%, rgba(36,34,32,.22) 0 1px, transparent 1.6px),
radial-gradient(circle at 48% 82%, rgba(255,255,255,.2) 0 1px, transparent 1.4px),
var(--preview-color);
background-size: 11px 13px, 15px 12px, 9px 15px, auto;
}
.studio3d-chip-preview[data-texture="metal"] {
background:
repeating-linear-gradient(0deg, rgba(255,255,255,.35) 0 1px, transparent 1px 3px),
linear-gradient(135deg, #aeb3b9, #f2f4f5 44%, #8f969d);
}
.studio3d-chip-preview[data-texture="matte"] {
background: linear-gradient(145deg, color-mix(in srgb, var(--preview-color) 82%, #fff), var(--preview-color));
}
.studio3d-chip-preview[data-shape]::before {
content: "";
width: 28px;
height: 8px;
border-radius: 2px;
background: #d4af7d;
box-shadow: 0 9px 0 -2px #8d6746;
}
.studio3d-chip-preview[data-shape="round"]::before { width: 28px; border-radius: 50%; }
.studio3d-chip-preview[data-shape="square"]::before { width: 22px; }
.studio3d-chip-preview[data-shape="rect"]::before { width: 31px; }
.studio3d-chip-preview[data-shape="pedestal"]::before {
width: 20px;
height: 24px;
border-radius: 3px 3px 6px 6px;
box-shadow: none;
}
.studio3d-chip-label { min-width: 0; font-size: .65rem; font-weight: 760; line-height: 1.2; }
.studio-piece-picker {
display: grid;
grid-auto-flow: column;
grid-auto-columns: minmax(0, 1fr);
gap: .28rem;
margin-bottom: .5rem;
}
.studio-piece-picker button {
display: grid;
justify-items: center;
gap: .16rem;
padding: .38rem .2rem;
border: 1px solid var(--line);
border-radius: 10px;
background: var(--surface);
color: var(--text);
font: inherit;
font-size: .58rem;
font-weight: 800;
cursor: pointer;
transition: border-color .16s ease, background .16s ease;
}
.studio-piece-picker button svg { width: 16px; height: 16px; }
.studio-piece-picker button.is-active {
border-color: var(--accent);
background: color-mix(in srgb, var(--accent) 12%, var(--surface));
color: var(--accent);
}
.studio-piece-picker button.hidden { display: none; }
.look-preset-panel,
.trend-panel {
margin: .6rem 0 .3rem;
padding: .7rem;
border: 1px solid color-mix(in srgb, var(--line) 82%, transparent);
border-radius: 14px;
background: color-mix(in srgb, var(--surface) 92%, var(--brand-light) 8%);
}
.look-preset-group { margin-top: .55rem; }
.look-preset-group:first-child { margin-top: .3rem; }
.look-preset-tabs {
display: grid;
grid-template-columns: repeat(5, minmax(0, 1fr));
gap: .3rem;
margin-top: .55rem;
padding: .24rem;
border: 1px solid color-mix(in srgb, #168d7f 18%, var(--line));
border-radius: 13px;
background: color-mix(in srgb, #168d7f 7%, var(--surface));
}
.look-preset-tab {
min-height: 40px;
padding: .4rem .32rem;
border: 1px solid transparent;
border-radius: 10px;
background: transparent;
color: var(--muted);
font: inherit;
font-size: .62rem;
font-weight: 800;
cursor: pointer;
transition: border-color .16s ease, background .16s ease, color .16s ease;
}
.look-preset-tab.is-active {
border-color: color-mix(in srgb, #168d7f 36%, var(--line));
background: var(--surface);
color: #168d7f;
box-shadow: 0 5px 14px color-mix(in srgb, #168d7f 10%, transparent);
}
.look-preset-active-group {
margin-top: .55rem;
padding: .58rem;
border: 1px solid color-mix(in srgb, #168d7f 18%, var(--line));
border-radius: 13px;
background: color-mix(in srgb, var(--surface) 94%, #e2f7f3 6%);
}
.look-preset-label {
display: block;
margin-bottom: .28rem;
color: var(--accent);
font-size: .6rem;
font-weight: 850;
letter-spacing: .05em;
text-transform: uppercase;
}
.look-preset-row {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(108px, 1fr));
gap: .42rem;
}
.look-preset-choice,
.trend-choice {
display: grid;
gap: .25rem;
padding: .34rem;
border: 1px solid var(--line);
border-radius: 10px;
background: var(--surface);
color: var(--text);
font: inherit;
cursor: pointer;
text-align: start;
transition: border-color .16s ease, box-shadow .16s ease;
}
.look-preset-choice strong { font-size: .58rem; font-weight: 800; line-height: 1.15; }
.look-preset-swatch {
position: relative;
display: grid;
place-items: center;
/* The tiles are 4:3 photographs of the option applied to the shared
cup subject. A fixed short height cover-cropped them to a thin
landscape sliver on phones (owner report 2026-08-11); matching the
source ratio shows the whole picture at every column width. */
height: auto;
aspect-ratio: 4 / 3;
overflow: hidden;
border-radius: 9px;
border: 1px solid color-mix(in srgb, var(--line) 70%, transparent);
background: color-mix(in srgb, var(--surface) 82%, var(--brand-light) 18%);
}
/* cover, not contain: these are photographic examples of a look, and
letterboxing them inside the tile left a band of empty background on
every card and made the whole grid read as unfinished. */
.look-preset-swatch img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
background: color-mix(in srgb, var(--bg) 72%, var(--surface));
}
/* The icon remains as a small category cue over the real-photo example. */
.look-preset-icon {
position: absolute;
inset-inline-end: 5px;
bottom: 5px;
display: grid;
place-items: center;
width: 24px;
height: 24px;
border-radius: 7px;
background: rgba(255, 255, 255, .9);
color: #241a17;
box-shadow: 0 3px 9px rgba(0, 0, 0, .2);
backdrop-filter: blur(5px);
}
.look-preset-icon svg { width: 14px; height: 14px; }
.look-preset-choice.is-active,
.trend-choice.is-active {
border-color: var(--accent);
box-shadow: 0 0 0 1px var(--accent), 0 6px 14px color-mix(in srgb, var(--accent) 14%, transparent);
}
.trend-groups {
display: grid;
gap: .7rem;
margin-top: .55rem;
}
.trend-group {
padding: .62rem;
border: 1px solid color-mix(in srgb, var(--trend-group-color, #a94caf) 20%, var(--line));
border-radius: 14px;
background: color-mix(in srgb, var(--surface) 94%, var(--trend-group-tint, #f7e8f7) 6%);
}
.trend-group[data-change-type="scene"] { --trend-group-color: #3976d8; --trend-group-tint: #eaf3ff; }
.trend-group[data-change-type="light-color"] { --trend-group-color: #b66a31; --trend-group-tint: #fff0e4; }
.trend-group[data-change-type="texture-finish"] { --trend-group-color: #16856f; --trend-group-tint: #e7f7f2; }
.trend-group[data-change-type="graphic-experimental"] { --trend-group-color: #8a55c5; --trend-group-tint: #f1eafb; }
.trend-group-title {
display: block;
margin-bottom: .45rem;
color: var(--trend-group-color);
font-size: .64rem;
font-weight: 900;
letter-spacing: .035em;
text-transform: uppercase;
}
.trend-group-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
gap: .45rem;
}
.trend-choice { grid-template-columns: 84px minmax(0, 1fr); align-items: center; gap: .55rem; }
.trend-swatch {
position: relative;
overflow: hidden;
width: 84px;
height: 62px;
border-radius: 10px;
border: 1px solid color-mix(in srgb, var(--line) 70%, transparent);
}
.trend-swatch img {
display: block;
width: 100%;
height: 100%;
object-fit: contain;
background: color-mix(in srgb, var(--bg) 72%, var(--surface));
}
.trend-copy { display: grid; gap: .05rem; min-width: 0; }
.trend-copy strong { font-size: .62rem; font-weight: 850; line-height: 1.15; }
.trend-copy small { color: var(--muted); font-size: .53rem; line-height: 1.25; }
@media (max-width: 640px) {
.look-preset-panel,
.trend-panel { padding: .55rem; }
.look-preset-tabs {
display: flex;
gap: .25rem;
overflow-x: auto;
padding: .2rem;
scrollbar-width: none;
}
.look-preset-tabs::-webkit-scrollbar { display: none; }
.look-preset-tab {
flex: 0 0 auto;
min-width: 78px;
min-height: 36px;
}
.look-preset-active-group { padding: .45rem; }
.look-preset-row { grid-template-columns: repeat(auto-fit, minmax(82px, 1fr)); }
.look-preset-swatch { height: auto; }
.look-preset-icon { width: 19px; height: 19px; }
.look-preset-icon svg { width: 12px; height: 12px; }
.trend-group { padding: .5rem; }
.trend-group-grid { grid-template-columns: repeat(auto-fit, minmax(148px, 1fr)); }
.trend-choice { grid-template-columns: 62px minmax(0, 1fr); }
.trend-swatch { width: 62px; height: 46px; }
}
.model-suggestion-gate {
display: grid;
grid-template-columns: auto minmax(0, 1fr) auto;
align-items: center;
gap: .8rem;
margin: .75rem 0;
padding: .9rem;
border: 1px solid color-mix(in srgb, var(--accent) 25%, var(--line));
border-radius: 16px;
background: color-mix(in srgb, var(--surface) 88%, var(--brand-light) 12%);
}
.model-gate-preview {
position: relative;
overflow: hidden;
width: 74px;
height: 74px;
display: grid;
place-items: center;
border-radius: 12px;
border: 1px solid color-mix(in srgb, var(--line) 80%, transparent);
background: var(--code-bg);
}
.model-gate-preview img {
width: 100%;
height: 100%;
object-fit: cover;
display: none;
}
.model-gate-preview.has-image img { display: block; }
.model-gate-preview.has-image .model-gate-preview-empty { display: none; }
.model-gate-preview-empty {
padding: 0 .3rem;
color: var(--muted);
font-size: .55rem;
font-weight: 700;
text-align: center;
}
/* Same sweep the analyze step uses, so a gated analysis reads as the
identical operation rather than a different kind of wait. */
.model-gate-preview.is-scanning::before,
.model-gate-preview.is-scanning::after {
content: "";
position: absolute;
left: 0;
right: 0;
pointer-events: none;
z-index: 2;
}
.model-gate-preview.is-scanning::before {
top: 0;
height: 34%;
background: linear-gradient(180deg,
transparent 0%,
color-mix(in srgb, var(--accent) 18%, transparent) 72%,
color-mix(in srgb, var(--accent) 30%, transparent) 100%);
animation: analysisScanBand 2.4s cubic-bezier(.55,0,.45,1) infinite;
}
.model-gate-preview.is-scanning::after {
top: 0;
height: 2px;
background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--accent) 85%, #fff 15%), transparent);
box-shadow: 0 0 12px color-mix(in srgb, var(--accent) 60%, transparent);
animation: analysisScanLine 2.4s cubic-bezier(.55,0,.45,1) infinite;
}
.model-gate-copy { display: grid; gap: .15rem; min-width: 0; }
.model-suggestion-gate strong { font-size: .8rem; }
.model-suggestion-gate small { color: var(--muted); font-size: .66rem; line-height: 1.4; }
.model-suggestion-gate > button {
min-height: 44px;
display: grid;
justify-items: center;
gap: .04rem;
padding: .48rem .75rem;
border: 0;
border-radius: 11px;
background: var(--accent);
color: var(--accent-fg);
font: inherit;
font-size: .72rem;
font-weight: 820;
cursor: pointer;
}
.model-suggestion-gate > button small { color: inherit; font-size: .53rem; opacity: .75; }
#ai-relocation-card.is-model-analysis-gated #output-size-section { display: none; }
@media (min-width: 900px) {
.page-shell { max-width: 1360px; }
.control-card,
.results-grid { width: min(100%, 1280px); }
.studio-side-panel .studio-control-head strong,
.studio-side-panel .personal-group-head strong,
.studio-side-panel .studio3d-label { font-size: .72rem; }
.studio-side-panel .studio-control-head span,
.studio-side-panel .personal-group-head span { font-size: .63rem; line-height: 1.4; }
}
@media (max-width: 640px) {
body:not(.landing-active) {
padding-top: calc(var(--site-header-h, 102px) + .35rem);
}
html { scroll-padding-top: calc(var(--site-header-h, 102px) + .6rem); }
.site-header {
position: fixed;
inset: 0 0 auto;
margin: 0;
}
.site-header-inner,
.site-header-inner.has-workflow-steps {
width: calc(100% - 1rem);
min-height: calc(50px + env(safe-area-inset-top));
margin: .28rem auto 0;
padding: calc(.2rem + env(safe-area-inset-top)) .42rem .2rem;
display: grid !important;
grid-template-columns: auto minmax(0, 1fr) auto !important;
grid-template-rows: 42px !important;
gap: 0 .35rem;
border-radius: 14px;
pointer-events: auto;
}
.site-header-lead {
position: static !important;
grid-column: 1;
grid-row: 1;
align-self: center;
justify-self: start;
transform: none;
}
.site-logo-wrap {
width: auto;
height: 30px;
padding: .12rem .28rem;
border-radius: 8px;
}
.site-logo {
width: auto;
height: 24px;
max-width: 64px;
}
.site-header-actions {
position: static !important;
grid-column: 3;
grid-row: 1;
align-self: center;
justify-self: end;
transform: none;
}
#theme-btn,
#lang-btn,
.auth-avatar { display: none !important; }
.mobile-menu-button { display: grid; }
.auth-menu-lang,
.auth-menu-theme { display: flex; }
.workflow-header-steps {
display: flex !important;
grid-column: 2 !important;
grid-row: 1 !important;
width: 100%;
min-height: 32px;
max-width: none;
margin: 0 !important;
padding: 2px;
gap: 0;
align-items: stretch;
justify-content: stretch;
border-radius: 9px;
}
.workflow-header-step {
display: flex !important;
/* Equal shares so the three steps fill the pill edge to edge instead of
huddling in the middle of an oversized bar. */
flex: 1 1 0;
min-width: 0;
min-height: 28px;
align-items: center;
justify-content: center;
justify-items: center;
padding: .22rem .2rem;
border-radius: 7px;
}
.workflow-header-title {
font-size: .6rem;
line-height: 1.1;
white-space: normal;
overflow-wrap: anywhere;
}
/* The arrows carry the direction, so the numbered badges are redundant. */
.workflow-header-number { display: none !important; }
.workflow-header-arrow {
display: grid;
place-items: center;
flex: 0 0 auto;
width: 12px;
color: var(--muted);
opacity: .55;
}
.workflow-header-arrow svg { width: 11px; height: 11px; }
/* Arabic reads right-to-left, so the progress arrows must point left. */
html[dir="rtl"] .workflow-header-arrow svg { transform: scaleX(-1); }
.workflow-panels-slot,
.hero-step { scroll-margin-top: calc(var(--site-header-h, 102px) + .7rem); }
.auth-menu {
top: calc(100% + .5rem);
inset-inline-end: 0;
width: min(290px, calc(100vw - 1.25rem));
}
.wrap,
.wrap-wide {
width: 100%;
padding: .5rem .75rem .9rem;
}
.page-shell { gap: .65rem; }
.hero-steps.is-initial {
min-height: 0;
padding-inline: 0;
}
.hero-step,
.hero-step.is-active {
padding: .72rem;
border: 1px solid color-mix(in srgb, var(--line) 78%, transparent);
border-radius: 16px;
background: var(--surface);
box-shadow: 0 12px 30px rgba(26,29,38,.08);
}
.hero-step-upload.is-active:not(.is-collapsed) {
min-height: 0;
display: block;
}
.hero-step-upload.is-active:not(.is-collapsed) .workflow-card-content {
display: grid;
min-height: 0;
padding: 0;
}
.hero-steps.is-initial .hero-step-upload .upload-btn.compact {
min-height: clamp(310px, 48dvh, 430px);
height: auto;
padding: 1rem;
border: 1px dashed color-mix(in srgb, var(--accent) 36%, var(--line));
border-radius: 14px;
background: color-mix(in srgb, var(--surface) 90%, var(--brand-light) 10%);
}
.hero-steps.is-initial .hero-step-upload .upload-title {
max-width: 18ch;
white-space: normal;
text-align: center;
}
.dock-stage,
.analysis-canvas,
.card,
.control-card,
.intake-panel,
.simple-analysis-summary,
.improve-intro,
.copy-ready-card,
.custom-improvements,
.smart-actions-card {
border-inline: 1px solid var(--line);
border-radius: 14px;
}
.prompt-mode-btn { min-height: 48px; }
.prompt-mode-btn strong { font-size: .74rem; }
.prompt-mode-btn span { font-size: .62rem; }
.personal-change-panel {
margin-inline: -.75rem;
padding: 0;
}
.studio3d-stage {
min-height: clamp(420px, 62dvh, 620px);
height: clamp(420px, 62dvh, 620px);
max-height: none;
}
.studio-subject-switch {
top: .45rem;
min-width: min(146px, calc(100% - 7rem));
}
.studio-subject-switch button { min-height: 28px; padding: .24rem .5rem; font-size: .6rem; border-radius: 999px; }
.studio3d-spec { display: none; }
.studio-quality-badge {
top: 3.2rem;
left: 50%;
right: auto;
transform: translateX(-50%);
max-width: calc(100% - 5rem);
white-space: normal;
overflow-wrap: anywhere;
}
.studio-quality-badge > #studio-3d-status-text { display: none; }
.studio-extract-3d { width: 28px; height: 28px; min-height: 28px; }
[dir="rtl"] .studio-quality-badge { left: 50%; right: auto; }
.studio-side-trigger { width: 38px; height: 40px; gap: .08rem; }
.studio-side-trigger svg { width: 15px; height: 15px; }
.studio-side-trigger span { font-size: .44rem; }
.studio-side-panel { width: min(360px, 92%); }
.studio-side-panel .studio-control-head strong,
.studio-side-panel .personal-group-head strong { font-size: .75rem; }
.studio-side-panel .studio-control-head span,
.studio-side-panel .personal-group-head span { font-size: .65rem; line-height: 1.4; }
.studio-side-panel .studio-light-toggle,
.studio-side-panel .creative-choice,
.studio-side-panel .personal-suggestion,
.personalize-prompt-button { min-height: 46px; font-size: .7rem; }
.studio3d-chip.has-preview { min-height: 58px; }
.studio3d-chip-preview { width: 42px; height: 42px; }
.model-suggestion-gate {
grid-template-columns: auto minmax(0, 1fr);
gap: .6rem;
padding: .7rem;
}
.model-gate-preview { width: 62px; height: 62px; }
.model-suggestion-gate > button {
grid-column: 1 / -1;
width: 100%;
}
.generated-prompt-layout {
grid-template-columns: repeat(2, minmax(0, 1fr));
grid-template-areas: "ref gen";
}
.image-comparison-head { min-height: 0; }
.image-comparison-action { min-height: 40px; font-size: .6rem; }
}
/* ======================================================================
Full-bleed flat app shell
Last block in the sheet on purpose: it has to win over the responsive
rules above, which were written for a stack of floating cards. The app
is now one continuous surface — every panel drops its own frame and
sections are told apart by a hairline and by their labels.
====================================================================== */
.wrap {
width: 100%;
max-width: none;
margin: 0;
padding: 0 0 clamp(.8rem, 1.6vw, 1.6rem);
}
.page-shell,
.page-left,
.control-hero,
.hero-steps,
.control-card,
.results-dock,
.results-grid,
.workspace-results,
#upload-workspace {
width: 100%;
max-width: none;
margin-inline: 0;
}
.control-card,
.results-dock,
.results-grid,
.workspace-results,
.card,
.intake-panel,
.dock-stage,
.dock-panel,
.hero-step,
.simple-analysis-summary {
border: 0;
border-radius: 0;
background: none;
box-shadow: none;
overflow: visible;
}
.control-card::before,
.control-card::after,
.dock-stage::before,
.hero-step::before,
.hero-step::after { display: none !important; }
.hero-step,
.control-card,
.dock-panel {
padding-inline: clamp(.7rem, 2vw, 1.4rem);
}
.hero-steps {
display: grid;
gap: 0;
}
/* One hairline between things, instead of a border around each thing.
Scoped to containers whose children are all real sections — a slot that
holds display:none siblings would put a rule above its first visible
child and read as a stray line under the heading. */
.hero-steps > .hero-step + .hero-step,
#ai-relocation-card > * + * {
margin-top: .7rem;
padding-top: .7rem;
border-top: 1px solid color-mix(in srgb, var(--line) 60%, transparent);
}
/* Labels introduce the control right below them, so a rule between the two
would split a single idea in half. */
#ai-relocation-card > .improve-section-label + *,
#ai-relocation-card > .dock-panel-head + * {
margin-top: .3rem;
padding-top: 0;
border-top: 0;
}
#ai-relocation-card > .improve-section-label {
margin-bottom: 0;
}
/* Content surfaces keep an edge: these hold a picture, not a layout. */
.studio3d-stage,
.improvement-reference-frame,
.analysis-canvas {
border-radius: 14px;
overflow: hidden;
}
/* --------------------------------------------- Blender-style materials
A material is judged by looking at it, so the swatch is the control and
the name is a caption underneath it, not a label beside it. */
.studio3d-chips.is-visual {
display: grid !important;
grid-template-columns: repeat(auto-fill, minmax(64px, 1fr));
gap: .34rem;
overflow: visible;
}
.studio3d-chip.has-preview {
display: grid !important;
grid-template-columns: minmax(0, 1fr) !important;
justify-items: stretch;
min-height: 0 !important;
gap: .2rem !important;
padding: 0 !important;
border: 0 !important;
border-radius: 0 !important;
background: none !important;
text-align: center !important;
}
.studio3d-chip.has-preview .studio3d-chip-preview {
width: 100% !important;
height: auto !important;
aspect-ratio: 1 / 1;
border-radius: 9px;
border: 2px solid transparent;
transition: border-color .16s ease, transform .16s ease;
}
.studio3d-chip.has-preview:hover .studio3d-chip-preview { transform: translateY(-1px); }
.studio3d-chip.has-preview.is-selected {
background: none !important;
color: inherit !important;
}
.studio3d-chip.has-preview.is-selected .studio3d-chip-preview {
border-color: var(--accent);
box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 45%, transparent);
}
.studio3d-chip.has-preview .studio3d-chip-label {
font-size: .52rem;
font-weight: 700;
line-height: 1.15;
opacity: .82;
overflow-wrap: anywhere;
}
.studio-side-panel .studio3d-chips.is-visual {
grid-template-columns: repeat(auto-fill, minmax(56px, 1fr));
}
/* ----------------------------------------------- compact studio panels
The drawers were sized like full pages: large padding, tall control
blocks and every group expanded at once, so reaching a control meant
scrolling past everything above it. Everything here tightens the
density and lets a group collapse. */
.studio-side-panel { width: min(300px, 84%); }
.studio-side-panel-head { padding: .5rem .6rem; }
.studio-side-panel-head strong { font-size: .7rem; }
.studio-side-close { width: 26px; height: 26px; }
.studio-panel-scroll { padding: .5rem; }
.studio-panel-scroll > * + * { margin-top: .4rem; }
.studio-side-panel .studio-control-block {
gap: .28rem;
padding-top: .4rem;
}
.studio-side-panel .studio-control-head { gap: .4rem; }
.studio-side-panel .studio-control-head strong { font-size: .66rem; }
.studio-side-panel .studio-control-head span { font-size: .56rem; line-height: 1.3; }
.studio-side-panel .studio3d-dock { gap: .32rem; padding: .45rem; }
.studio-side-panel .studio-light-grid { gap: .26rem; }
.studio-side-panel .studio-light-toggle {
min-height: 30px;
padding: .26rem .32rem;
font-size: .56rem;
gap: .22rem;
}
.studio-side-panel .studio-light-toggle svg { width: 13px; height: 13px; }
.studio-side-panel .personalize-button-grid { gap: .26rem; }
.studio-side-panel .personalize-prompt-button {
min-height: 30px;
padding: .26rem .34rem;
font-size: .56rem;
}
.studio-side-panel .fabric-color-row { gap: .22rem; }
.studio-side-panel .studio3d-chip:not(.has-preview) { padding: .22rem .3rem; font-size: .56rem; }
.studio-side-panel .creative-preference-block { gap: .24rem; padding-top: .35rem; }
.studio-side-panel .personal-group-head strong { font-size: .66rem; }
.studio-side-panel .personal-group-head span { font-size: .55rem; }
.studio-piece-picker { gap: .22rem; margin-bottom: .4rem; }
.studio-piece-picker button { padding: .3rem .16rem; font-size: .54rem; }
.studio-piece-picker button svg { width: 14px; height: 14px; }
/* Group headings become the panel's navigation: tap one to collapse it and
bring the rest into reach without scrolling. */
.studio-side-panel .studio-control-head,
.studio-side-panel .personal-group-head {
position: relative;
padding-inline-end: 1rem;
cursor: pointer;
user-select: none;
}
.studio-side-panel .studio-control-head::after,
.studio-side-panel .personal-group-head::after {
content: "";
position: absolute;
inset-inline-end: .1rem;
top: .42rem;
width: 6px;
height: 6px;
border-right: 1.6px solid currentColor;
border-bottom: 1.6px solid currentColor;
transform: rotate(45deg);
opacity: .55;
transition: transform .16s ease;
}
.studio-side-panel .is-collapsed .studio-control-head::after,
.studio-side-panel .is-collapsed .personal-group-head::after {
transform: rotate(-45deg);
}
.studio-side-panel .studio-control-block.is-collapsed > :not(.studio-control-head),
.studio-side-panel .creative-preference-block.is-collapsed > :not(.personal-group-head),
.studio-side-panel .personal-suggestion-group.is-collapsed > :not(.personal-group-head) {
display: none;
}
/* The header was a floating pill; it is now the top edge of the app. The
grid columns set in the responsive blocks above are left alone. */
.site-header-inner,
.site-header-inner.has-workflow-steps {
width: 100%;
max-width: none;
margin: 0;
padding-inline: clamp(.6rem, 2vw, 1.4rem);
border: 0;
border-bottom: 1px solid color-mix(in srgb, var(--line) 62%, transparent);
border-radius: 0;
background: color-mix(in srgb, var(--bg) 90%, transparent);
box-shadow: none;
backdrop-filter: blur(14px) saturate(130%);
}
.site-header { margin: 0; }
@media (max-width: 640px) {
.wrap { padding-inline: 0; }
.hero-step,
.control-card,
.dock-panel { padding-inline: .6rem; }
.site-header-inner,
.site-header-inner.has-workflow-steps { padding-inline: .5rem; }
.prompt-mode-icon svg { width: 16px; height: 16px; }
}
/* Keep the analyzer's workflow header visible. Main navigation remains for
the supporting History and Editor pages. */
.site-header-inner,
.site-header-inner.has-workflow-steps {
grid-template-columns: auto minmax(0, 1fr) auto;
align-items: center;
gap: clamp(.65rem, 2vw, 1.75rem);
}
.site-header-inner.has-workflow-steps {
grid-template-columns: auto minmax(0, 920px) auto;
}
.site-header-inner.has-workflow-steps .workflow-header-steps {
display: grid !important;
grid-column: 2;
grid-row: 1;
}
.site-header-inner.has-workflow-steps .site-header-nav {
display: none !important;
}
.site-header-nav {
grid-column: 2;
grid-row: 1;
display: flex;
justify-self: center;
}
@media (max-width: 640px) {
.site-header-inner,
.site-header-inner.has-workflow-steps {
width: 100% !important;
min-height: 56px !important;
margin: 0 !important;
padding: .42rem .5rem !important;
grid-template-columns: auto minmax(0, 1fr) auto !important;
grid-template-rows: 42px !important;
border-radius: 0 !important;
}
.site-header-nav {
grid-column: 2 !important;
grid-row: 1 !important;
width: auto !important;
min-height: 0 !important;
padding: 0 !important;
display: flex !important;
}
.site-header-nav .nav-link-main {
padding-inline: .35rem;
font-size: .68rem;
}
.site-header-inner.has-workflow-steps .workflow-header-steps {
display: flex !important;
grid-column: 2 !important;
grid-row: 1 !important;
}
.site-header-inner.has-workflow-steps .site-header-nav {
display: none !important;
}
}
/* ------------------------------------------ clearer section interiors
Every major workspace block gets a quiet colour identity. The tints are
mixed with theme variables so the hierarchy survives in light and dark
modes without becoming a collection of saturated cards. */
.hero-step-upload { --section-color: #3976d8; --section-soft: #eaf3ff; }
.hero-step-analyze { --section-color: #16856f; --section-soft: #e7f7f2; }
.hero-step-improve { --section-color: #8a55c5; --section-soft: #f1eafb; }
.hero-step:not(.is-collapsed) {
border: 1px solid color-mix(in srgb, var(--section-color) 24%, var(--line));
background:
linear-gradient(145deg,
color-mix(in srgb, var(--surface) 88%, var(--section-soft) 12%),
color-mix(in srgb, var(--surface) 97%, var(--section-soft) 3%));
}
.hero-step-header {
border-bottom-color: color-mix(in srgb, var(--section-color) 22%, var(--line));
background: color-mix(in srgb, var(--section-soft) 32%, transparent);
}
.hero-step-number {
background: color-mix(in srgb, var(--section-color) 14%, var(--surface));
color: var(--section-color);
}
.hero-step-improve #output-size-section,
.hero-step-improve .prompt-mode-switch,
.hero-step-improve .personal-change-panel,
.hero-step-improve .look-preset-panel,
.hero-step-improve .trend-panel,
.hero-step-improve .custom-improvements,
.hero-step-improve .model-suggestion-gate,
.hero-step-improve .generated-prompt-panel {
padding: clamp(.72rem, 1.5vw, 1rem);
border: 1px solid var(--section-border, color-mix(in srgb, var(--section-accent, #8a55c5) 24%, var(--line)));
border-radius: 18px;
background:
linear-gradient(145deg,
color-mix(in srgb, var(--surface) 84%, var(--section-tint, #f1eafb) 16%),
color-mix(in srgb, var(--surface) 96%, var(--section-tint, #f1eafb) 4%));
box-shadow: 0 10px 26px color-mix(in srgb, var(--section-accent, #8a55c5) 8%, transparent);
}
.hero-step-improve #output-size-section {
--section-accent: #4169d8;
--section-tint: #e8efff;
}
.hero-step-improve .prompt-mode-switch {
--section-accent: #7457c9;
--section-tint: #eee9ff;
}
.hero-step-improve .personal-change-panel {
--section-accent: #b66a31;
--section-tint: #fff0e4;
}
.hero-step-improve .look-preset-panel {
--section-accent: #168d7f;
--section-tint: #e2f7f3;
}
.hero-step-improve .trend-panel {
--section-accent: #a94caf;
--section-tint: #f7e8f7;
}
.hero-step-improve .custom-improvements,
.hero-step-improve .model-suggestion-gate {
--section-accent: #6657d9;
--section-tint: #ebe9ff;
}
.hero-step-improve .generated-prompt-panel {
--section-accent: #257a56;
--section-tint: #e7f6ed;
}
.hero-step-improve .prompt-mode-switch {
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: .45rem;
}
.hero-step-improve .personal-group-head,
.hero-step-improve .dock-panel-head {
padding-bottom: .5rem;
border-bottom: 1px solid color-mix(in srgb, var(--section-accent, var(--accent)) 18%, var(--line));
}
.look-preset-choice,
.trend-choice,
.size-choice,
.smart-action-btn {
background: color-mix(in srgb, var(--surface) 94%, var(--section-tint, var(--brand-light)) 6%);
border-color: color-mix(in srgb, var(--section-accent, var(--accent)) 18%, var(--line));
}
@media (max-width: 640px), (max-width: 900px) and (max-height: 500px) {
.hero-step:not(.is-collapsed) {
border-inline: 0;
border-radius: 0;
}
.hero-step-header {
border-radius: 0;
}
.hero-step-improve #output-size-section,
.hero-step-improve .prompt-mode-switch,
.hero-step-improve .personal-change-panel,
.hero-step-improve .look-preset-panel,
.hero-step-improve .trend-panel,
.hero-step-improve .custom-improvements,
.hero-step-improve .model-suggestion-gate,
.hero-step-improve .generated-prompt-panel {
margin-inline: .05rem;
padding: .65rem;
border-radius: 14px;
box-shadow: 0 7px 18px color-mix(in srgb, var(--section-accent, #8a55c5) 7%, transparent);
}
.hero-step-improve .prompt-mode-switch {
gap: .28rem;
}
}
/* Keep the desktop before/after comparison readable at a glance. */
@media (min-width: 721px) {
.generated-prompt-layout {
width: min(100%, 760px);
margin-inline: auto;
gap: 1rem;
}
#improvement-reference-frame,
#generated-image-frame {
height: 280px;
min-height: 280px;
max-height: 280px;
}
#improvement-reference-frame img,
#generated-image-frame img {
width: 100%;
height: 100%;
max-height: 280px;
object-fit: contain;
}
}
/* ================================================= continuous canvas
The application is one background, not a stack of cards. Sections use
spacing and a single hairline; only interactive controls react. */
body:not(.landing-active) {
background:
radial-gradient(circle at 14% 4%, color-mix(in srgb, #dfe9ff 45%, transparent), transparent 30rem),
radial-gradient(circle at 88% 22%, color-mix(in srgb, #f4e4f4 38%, transparent), transparent 34rem),
var(--bg);
}
.workflow-header-steps,
.hero-step-number,
.workflow-header-number {
display: none !important;
}
.page-shell,
.page-left,
.control-hero,
.hero-steps,
.hero-step,
.hero-step:not(.is-collapsed),
.hero-step.is-active,
.workflow-card-content,
.control-layout,
.control-form,
.workspace-results,
.results-grid,
.results-dock,
.dock-stage,
.dock-panel,
.card,
.control-card,
.intake-panel,
.simple-analysis-summary,
.smart-actions-card,
.analysis-learning-card,
.custom-improvements,
.model-suggestion-gate,
.personal-change-panel,
.look-preset-panel,
.trend-panel,
.generated-prompt-panel,
#output-size-section {
border: 0 !important;
border-radius: 0 !important;
background: transparent !important;
box-shadow: none !important;
}
.hero-steps {
gap: 0 !important;
}
.hero-step {
padding-inline: clamp(.75rem, 3vw, 3rem) !important;
}
.hero-step + .hero-step {
border-top: 1px solid color-mix(in srgb, var(--line) 72%, transparent) !important;
}
.hero-step-header {
min-height: 58px;
padding: .8rem 0 !important;
border: 0 !important;
background: transparent !important;
box-shadow: none !important;
text-align: start;
}
.hero-step-title {
font-size: clamp(1rem, 1.6vw, 1.3rem) !important;
font-weight: 850 !important;
}
.simple-analysis-summary,
.analysis-learning-card,
.smart-actions-card {
padding: .8rem 0 !important;
}
.simple-fact {
border: 0 !important;
border-inline-start: 2px solid color-mix(in srgb, var(--accent) 34%, var(--line)) !important;
border-radius: 0 !important;
background: transparent !important;
box-shadow: none !important;
}
.upload-btn.compact,
.workflow-card-content .upload-btn.compact {
border: 0 !important;
border-radius: 0 !important;
background: transparent !important;
box-shadow: none !important;
}
.upload-btn.compact::before { display: none !important; }
.upload-btn.compact:hover {
border: 0 !important;
background: transparent !important;
box-shadow: none !important;
transform: none !important;
}
.upload-btn.compact:hover .upload-icon {
color: var(--accent);
transform: translateY(-2px);
}
.dock-tabs {
display: grid;
gap: 0 !important;
border: 0 !important;
border-bottom: 1px solid color-mix(in srgb, var(--line) 64%, transparent) !important;
border-radius: 0 !important;
background: transparent !important;
box-shadow: none !important;
}
.dock-tab {
border: 0 !important;
border-inline-end: 1px solid color-mix(in srgb, var(--line) 54%, transparent) !important;
border-radius: 0 !important;
background: transparent !important;
box-shadow: inset 0 -2px 0 transparent !important;
transform: none !important;
}
.dock-tab:last-child { border-inline-end: 0 !important; }
.dock-tab:hover {
background: color-mix(in srgb, var(--accent) 6%, transparent) !important;
box-shadow: inset 0 -2px 0 color-mix(in srgb, var(--accent) 45%, transparent) !important;
}
.dock-tab.is-active {
background: color-mix(in srgb, var(--accent) 8%, transparent) !important;
box-shadow: inset 0 -3px 0 var(--accent) !important;
}
#results,
#ai-relocation-card,
#results-dock-stage {
width: 100% !important;
max-width: none !important;
margin: 0 !important;
padding: 0 !important;
}
#ai-relocation-card > .dock-panel-head,
#ai-relocation-card > .guest-studio-banner,
#ai-relocation-card > .model-suggestion-gate,
#ai-relocation-card > .personal-change-panel,
#ai-relocation-card > .look-preset-panel,
#ai-relocation-card > .trend-panel,
#ai-relocation-card > .custom-improvements,
#ai-relocation-card > .generated-prompt-panel {
padding-inline: clamp(.8rem, 3vw, 3rem) !important;
}
#ai-relocation-card > * + * {
margin-top: 0 !important;
padding-top: clamp(1rem, 2vw, 1.5rem) !important;
padding-bottom: clamp(1rem, 2vw, 1.5rem) !important;
border: 0 !important;
border-top: 1px solid color-mix(in srgb, var(--line) 70%, transparent) !important;
border-radius: 0 !important;
background: transparent !important;
box-shadow: none !important;
}
#ai-relocation-card > .improve-section-label {
margin: 0 !important;
padding: 1rem clamp(.8rem, 3vw, 3rem) .45rem !important;
border: 0 !important;
color: var(--muted);
font-size: .66rem;
}
/* Four direct, full-width workspaces. */
#ai-relocation-card > .improve-section-label + .prompt-mode-switch,
.hero-step-improve .prompt-mode-switch {
width: 100% !important;
margin: 0 !important;
padding: 0 !important;
display: grid !important;
grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
gap: 0 !important;
border: 0 !important;
border-top: 1px solid color-mix(in srgb, var(--line) 64%, transparent) !important;
border-bottom: 1px solid color-mix(in srgb, var(--line) 64%, transparent) !important;
border-radius: 0 !important;
background: transparent !important;
box-shadow: none !important;
}
.prompt-mode-btn {
min-height: 104px !important;
padding: .9rem .45rem !important;
border: 0 !important;
border-inline-end: 1px solid color-mix(in srgb, var(--line) 58%, transparent) !important;
border-radius: 0 !important;
background: transparent !important;
box-shadow: inset 0 -3px 0 transparent !important;
transform: none !important;
}
.prompt-mode-btn:last-child { border-inline-end: 0 !important; }
.prompt-mode-btn:hover {
background: color-mix(in srgb, var(--mode-color) 8%, transparent) !important;
box-shadow: inset 0 -3px 0 color-mix(in srgb, var(--mode-color) 50%, transparent) !important;
}
.prompt-mode-btn.is-active {
background: color-mix(in srgb, var(--mode-color) 11%, transparent) !important;
box-shadow: inset 0 -4px 0 var(--mode-color) !important;
}
.prompt-mode-icon {
width: 40px !important;
height: 40px !important;
border: 0 !important;
border-radius: 50% !important;
background: color-mix(in srgb, var(--mode-color) 12%, transparent) !important;
box-shadow: none !important;
}
/* Mode contents sit directly on the canvas. */
.personal-change-panel,
.look-preset-panel,
.trend-panel,
.custom-improvements,
.model-suggestion-gate,
.generated-prompt-panel {
margin: 0 !important;
padding-top: clamp(1rem, 2vw, 1.5rem) !important;
padding-bottom: clamp(1rem, 2vw, 1.5rem) !important;
}
.personal-group-head,
.dock-panel-head {
padding: 0 0 .65rem !important;
border: 0 !important;
border-bottom: 1px solid color-mix(in srgb, var(--line) 64%, transparent) !important;
background: transparent !important;
}
.look-preset-tabs {
padding: 0 !important;
gap: 0 !important;
border: 0 !important;
border-bottom: 1px solid color-mix(in srgb, var(--line) 64%, transparent) !important;
border-radius: 0 !important;
background: transparent !important;
}
.look-preset-tab {
min-height: 46px;
border: 0 !important;
border-radius: 0 !important;
background: transparent !important;
box-shadow: inset 0 -2px 0 transparent !important;
}
.look-preset-tab:hover {
color: #168d7f;
background: color-mix(in srgb, #168d7f 6%, transparent) !important;
}
.look-preset-tab.is-active {
color: #168d7f;
box-shadow: inset 0 -3px 0 #168d7f !important;
}
.look-preset-active-group,
.trend-group {
margin-top: .8rem !important;
padding: 0 !important;
border: 0 !important;
border-radius: 0 !important;
background: transparent !important;
box-shadow: none !important;
}
.trend-group + .trend-group {
padding-top: 1rem !important;
border-top: 1px solid color-mix(in srgb, var(--line) 58%, transparent) !important;
}
.look-preset-choice,
.trend-choice,
.smart-action-btn,
.creative-choice,
.personal-suggestion,
.personalize-prompt-button {
border: 0 !important;
background: transparent !important;
box-shadow: none !important;
}
.look-preset-choice:hover,
.trend-choice:hover,
.smart-action-btn:hover,
.creative-choice:hover,
.personal-suggestion:hover,
.personalize-prompt-button:hover {
background: color-mix(in srgb, var(--accent) 7%, transparent) !important;
}
/* Selection has to survive a photo behind it and a phone screen in
daylight. A 1px border at 32% accent did neither — on the picture tiles
the chosen card was genuinely hard to find. This states it four ways at
once: a solid 2px ring, a real background tint, an accent label, and a
tick badge on the image itself. */
.look-preset-choice.is-active,
.trend-choice.is-active,
.smart-action-btn.is-active,
.creative-choice.is-selected,
.personal-suggestion.is-selected {
background: color-mix(in srgb, var(--accent) 16%, var(--surface)) !important;
border-color: var(--accent) !important;
outline: 2px solid var(--accent);
outline-offset: -2px;
box-shadow: 0 4px 14px color-mix(in srgb, var(--accent) 26%, transparent) !important;
}
/* Arming a drag is a deliberate, visible mode — it must not look like the
passive selection state around it. */
.studio-move-toggle {
width: 100%;
min-height: 40px;
margin-bottom: .5rem;
padding: .5rem .7rem;
border: 1px solid color-mix(in srgb, var(--accent) 40%, var(--line));
border-radius: 11px;
background: var(--surface);
color: color-mix(in srgb, var(--accent) 88%, var(--text));
font: inherit;
font-size: .8rem;
font-weight: 800;
cursor: pointer;
transition: background-color .16s ease, color .16s ease, box-shadow .16s ease;
}
.studio-move-toggle.is-active {
border-color: var(--accent);
background: var(--accent);
color: #fff;
box-shadow: 0 4px 14px color-mix(in srgb, var(--accent) 34%, transparent);
}
.look-preset-choice.is-active strong,
.trend-choice.is-active strong {
color: color-mix(in srgb, var(--accent) 82%, var(--text));
}
/* The tick sits on the swatch, because on a grid of photographs the image
is what the eye lands on, not the frame around it. */
.look-preset-choice.is-active .look-preset-swatch::after,
.trend-choice.is-active .trend-swatch::after {
content: "✓";
position: absolute;
z-index: 3;
top: 4px;
inset-inline-start: 4px;
width: 19px;
height: 19px;
display: grid;
place-items: center;
border-radius: 50%;
background: var(--accent);
color: #fff;
font-size: 11px;
font-weight: 900;
line-height: 1;
box-shadow: 0 2px 6px rgba(0, 0, 0, .3);
}
.look-preset-choice.is-active .look-preset-swatch,
.trend-choice.is-active .trend-swatch {
border-color: var(--accent);
}
.look-preset-swatch,
.trend-swatch {
border: 0 !important;
background: transparent !important;
}
.guest-studio-banner {
border: 0 !important;
border-radius: 0 !important;
background: transparent !important;
box-shadow: none !important;
}
.studio-side-panel .studio-control-block,
.studio-side-panel .personal-suggestion-group,
.studio-side-panel .creative-preference-block {
padding: .65rem 0 !important;
border: 0 !important;
border-top: 1px solid rgba(255,255,255,.12) !important;
border-radius: 0 !important;
background: transparent !important;
box-shadow: none !important;
}
.studio-side-panel .studio-panel-scroll > :first-child {
border-top: 0 !important;
}
/* Image size lives with the result, immediately before Generate. */
.generated-prompt-panel #output-size-section {
width: min(100%, 760px);
margin: 0 auto .8rem !important;
padding: 0 0 .8rem !important;
border: 0 !important;
border-bottom: 1px solid color-mix(in srgb, var(--line) 64%, transparent) !important;
background: transparent !important;
}
.generated-prompt-panel #output-size-section .improve-section-label {
margin: 0 0 .45rem !important;
}
.size-choice-row {
gap: 0 !important;
border: 0 !important;
border-bottom: 1px solid color-mix(in srgb, var(--line) 58%, transparent);
}
.size-choice {
min-height: 56px;
border: 0 !important;
border-radius: 0 !important;
background: transparent !important;
box-shadow: inset 0 -2px 0 transparent !important;
}
.size-choice:hover {
background: color-mix(in srgb, var(--format-color) 7%, transparent) !important;
}
.size-choice.is-active {
background: color-mix(in srgb, var(--format-color) 8%, transparent) !important;
box-shadow: inset 0 -3px 0 var(--format-color) !important;
}
.generated-prompt-panel {
border-top: 1px solid color-mix(in srgb, var(--line) 70%, transparent) !important;
}
.generated-prompt-head {
width: min(100%, 760px);
margin-inline: auto;
}
@media (max-width: 720px) {
.hero-step {
padding-inline: .65rem !important;
}
#ai-relocation-card > .dock-panel-head,
#ai-relocation-card > .guest-studio-banner,
#ai-relocation-card > .model-suggestion-gate,
#ai-relocation-card > .personal-change-panel,
#ai-relocation-card > .look-preset-panel,
#ai-relocation-card > .trend-panel,
#ai-relocation-card > .custom-improvements,
#ai-relocation-card > .generated-prompt-panel {
padding-inline: .65rem !important;
}
.prompt-mode-btn {
min-height: 76px !important;
padding: .55rem .18rem !important;
}
.prompt-mode-icon {
width: 32px !important;
height: 32px !important;
}
.look-preset-tabs {
display: flex !important;
overflow-x: auto;
}
.look-preset-tab {
flex: 0 0 auto;
min-width: 84px;
}
.generated-prompt-panel #output-size-section {
width: 100%;
}
}
/* The import preview is a real image viewer: keep the complete source
visible instead of letting a fixed thumbnail crop its edges. */
.upload-btn.compact.has-preview {
height: clamp(220px, 42vh, 520px);
min-height: 220px;
max-height: 520px;
padding: .45rem;
}
.upload-btn.compact.has-preview #preview-wrap {
inset: .45rem;
display: grid;
place-items: center;
background: color-mix(in srgb, var(--code-bg) 82%, var(--surface) 18%);
}
.upload-btn.compact.has-preview #preview {
width: 100%;
height: 100%;
object-fit: contain !important;
object-position: center;
}
@media (max-width: 640px) {
.upload-btn.compact.has-preview {
height: min(52vh, 360px);
min-height: 180px;
max-height: 360px;
}
.upload-btn.compact.has-preview #preview-wrap { inset: 0; }
}
/* ================================================================
Single-screen creative workspace
Import first, then one fixed canvas with four creative sections.
The document never scrolls; only the controls pane can scroll.
================================================================ */
body:not(.landing-active) {
height: 100dvh;
min-height: 100dvh;
overflow: hidden !important;
background:
radial-gradient(circle at 8% 0%, color-mix(in srgb, #dce9ff 46%, transparent), transparent 31rem),
radial-gradient(circle at 94% 14%, color-mix(in srgb, #f3dff0 38%, transparent), transparent 30rem),
var(--bg);
}
body:not(.landing-active) > .site-header {
flex: 0 0 auto;
margin: 0 !important;
background: color-mix(in srgb, var(--bg) 96%, transparent);
}
body:not(.landing-active) .site-header-inner,
body:not(.landing-active) .site-header-inner.has-workflow-steps {
min-height: 58px;
padding-block: .42rem;
grid-template-columns: auto minmax(0, 1fr) auto !important;
}
body:not(.landing-active) .site-header-inner.has-workflow-steps .workflow-header-steps,
body:not(.landing-active) .site-header-inner.has-workflow-steps .site-header-nav {
display: none !important;
}
body:not(.landing-active) > main.wrap {
flex: 1 1 auto;
width: 100%;
height: auto;
min-height: 0;
margin: 0;
padding: 0 !important;
overflow: hidden;
}
body:not(.landing-active) > .site-legal-footer {
display: none !important;
}
/* Clean signed-in import screen. */
body:not(.landing-active):not(.konvrt-workspace-active) .page-shell,
body:not(.landing-active):not(.konvrt-workspace-active) .page-left,
body:not(.landing-active):not(.konvrt-workspace-active) #upload-workspace,
body:not(.landing-active):not(.konvrt-workspace-active) .control-hero,
body:not(.landing-active):not(.konvrt-workspace-active) .hero-steps {
width: 100%;
height: 100%;
min-height: 0;
}
body:not(.landing-active):not(.konvrt-workspace-active) .control-hero,
body:not(.landing-active):not(.konvrt-workspace-active) .hero-steps {
display: grid !important;
place-items: center;
}
body:not(.landing-active):not(.konvrt-workspace-active) .hero-step-upload {
display: block !important;
width: min(720px, calc(100% - 2rem));
height: auto !important;
max-height: calc(100dvh - var(--site-header-h, 58px) - 2rem);
margin: 0;
padding: 0 !important;
border: 0 !important;
border-radius: 0 !important;
background: transparent !important;
box-shadow: none !important;
overflow: visible;
}
body:not(.landing-active):not(.konvrt-workspace-active) .hero-step-analyze,
body:not(.landing-active):not(.konvrt-workspace-active) .hero-step-improve,
body:not(.landing-active):not(.konvrt-workspace-active) .control-layout,
body:not(.landing-active):not(.konvrt-workspace-active) #results {
display: none !important;
}
body:not(.landing-active):not(.konvrt-workspace-active) .hero-step-upload .workflow-card-content {
display: grid !important;
height: auto !important;
gap: clamp(.8rem, 2vh, 1.15rem);
align-content: center;
width: 100%;
max-height: 100%;
padding: 0 !important;
overflow: visible;
}
.import-intro {
display: grid;
justify-items: center;
gap: .3rem;
text-align: center;
}
.import-kicker {
color: var(--accent);
font-size: .68rem;
font-weight: 800;
letter-spacing: .1em;
text-transform: uppercase;
}
.import-intro h1 {
margin: 0;
color: var(--text);
font-size: clamp(1.8rem, 4vw, 3.4rem);
line-height: 1;
letter-spacing: -.055em;
}
.import-intro p {
max-width: 44ch;
margin: 0;
color: var(--muted);
font-size: clamp(.78rem, 1.2vw, .95rem);
}
body:not(.landing-active):not(.konvrt-workspace-active) .upload-btn.compact {
min-height: clamp(220px, 40vh, 430px);
border: 1.5px dashed color-mix(in srgb, var(--accent) 48%, var(--line)) !important;
border-radius: 24px;
background:
linear-gradient(145deg,
color-mix(in srgb, var(--surface) 68%, #e5efff 32%),
color-mix(in srgb, var(--surface) 84%, #f5dfed 16%)) !important;
box-shadow: 0 24px 70px color-mix(in srgb, var(--accent) 8%, transparent) !important;
}
body:not(.landing-active):not(.konvrt-workspace-active) .upload-btn.compact:hover {
transform: translateY(-3px);
border-color: color-mix(in srgb, var(--accent) 64%, var(--line));
box-shadow: 0 30px 80px color-mix(in srgb, var(--accent) 13%, transparent);
}
body:not(.landing-active):not(.konvrt-workspace-active) .upload-btn.compact.has-preview {
height: min(52vh, 480px);
min-height: 240px;
max-height: 480px;
}
/* Four-section chooser shown immediately after importing an image. */
#upload-choice-overlay .upload-choice-dialog {
width: min(1020px, calc(100% - 2rem));
max-height: calc(100dvh - 2rem);
padding: clamp(1rem, 2vw, 1.5rem);
border: 1px solid color-mix(in srgb, var(--line) 82%, transparent);
border-radius: 28px;
background: color-mix(in srgb, var(--surface) 94%, transparent);
box-shadow: 0 36px 100px rgba(35, 24, 22, .22);
backdrop-filter: blur(24px) saturate(120%);
overflow: hidden;
}
#upload-choice-overlay .upload-choice-preview {
width: 100%;
height: clamp(110px, 18vh, 180px);
margin: 0 0 .85rem;
border-radius: 18px;
background: color-mix(in srgb, var(--bg) 82%, var(--surface) 18%);
}
#upload-choice-overlay .upload-choice-preview img {
width: 100%;
height: 100%;
object-fit: contain;
}
#upload-choice-overlay .auth-title {
display: block;
margin: 0 0 .8rem;
font-size: clamp(1.15rem, 2vw, 1.55rem);
text-align: center;
}
#upload-choice-overlay .upload-choice-actions {
display: grid !important;
grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
gap: .65rem;
}
#upload-choice-overlay .upload-choice-action {
--choice-color: #3578d4;
min-width: 0;
min-height: 152px;
padding: .9rem .8rem;
display: grid;
grid-template-rows: auto auto 1fr auto;
justify-items: start;
align-content: start;
gap: .38rem;
color: var(--text);
text-align: start;
border: 1px solid color-mix(in srgb, var(--choice-color) 22%, var(--line));
border-radius: 18px;
background: color-mix(in srgb, var(--surface) 94%, var(--choice-color) 6%);
box-shadow: none;
transition: transform .2s ease, border-color .2s ease, background .2s ease, box-shadow .2s ease;
}
#upload-choice-overlay #upload-choice-studio { --choice-color: #7659d6; }
#upload-choice-overlay #upload-choice-presets { --choice-color: #d47a20; }
#upload-choice-overlay #upload-choice-trends { --choice-color: #c54e84; }
#upload-choice-overlay .upload-choice-action:hover {
transform: translateY(-4px);
border-color: color-mix(in srgb, var(--choice-color) 65%, var(--line));
background: color-mix(in srgb, var(--surface) 86%, var(--choice-color) 14%);
box-shadow: 0 18px 36px color-mix(in srgb, var(--choice-color) 14%, transparent);
}
#upload-choice-overlay .upload-choice-action svg {
width: 34px;
height: 34px;
padding: .45rem;
color: var(--choice-color);
stroke: currentColor;
fill: none;
border-radius: 11px;
background: color-mix(in srgb, var(--choice-color) 13%, transparent);
}
#upload-choice-overlay .upload-choice-action strong {
color: var(--text);
font-size: .86rem;
}
#upload-choice-overlay .upload-choice-action > span {
color: var(--muted);
font-size: .65rem;
line-height: 1.42;
}
#upload-choice-overlay .upload-choice-action small {
color: var(--choice-color);
font-size: .58rem;
font-weight: 700;
}
/* The active workspace fills the remaining viewport. */
body.konvrt-workspace-active .page-shell,
body.konvrt-workspace-active .page-left,
body.konvrt-workspace-active #upload-workspace,
body.konvrt-workspace-active .control-hero,
body.konvrt-workspace-active .hero-steps,
body.konvrt-workspace-active .hero-step-improve,
body.konvrt-workspace-active .hero-step-improve > .workflow-card-content,
body.konvrt-workspace-active #workflow-improve-panels {
width: 100%;
height: 100%;
min-height: 0;
margin: 0;
padding: 0 !important;
}
body.konvrt-workspace-active .hero-steps {
display: block !important;
max-width: none !important;
}
body.konvrt-workspace-active .hero-step-upload,
body.konvrt-workspace-active .hero-step-analyze,
body.konvrt-workspace-active .hero-step-improve > .hero-step-header,
body.konvrt-workspace-active .hero-step-improve > .step-skeleton,
body.konvrt-workspace-active .control-layout,
body.konvrt-workspace-active #results {
display: none !important;
}
body.konvrt-workspace-active .hero-step-improve {
display: block !important;
border: 0 !important;
border-radius: 0 !important;
background: transparent !important;
box-shadow: none !important;
animation: none !important;
transform: none !important;
opacity: 1 !important;
overflow: hidden;
}
body.konvrt-workspace-active .hero-step-improve > .workflow-card-content {
display: block !important;
overflow: hidden;
}
body.konvrt-workspace-active #ai-relocation-card {
width: 100%;
height: 100%;
min-height: 0;
margin: 0 !important;
padding: 0 !important;
display: grid !important;
grid-template-rows: auto minmax(0, 1fr);
gap: 0 !important;
border: 0 !important;
border-radius: 0 !important;
background: transparent !important;
box-shadow: none !important;
animation: none !important;
transform: none !important;
opacity: 1 !important;
overflow: hidden;
}
body.konvrt-workspace-active #ai-relocation-card > .dock-panel-head,
body.konvrt-workspace-active #ai-relocation-card > .guest-studio-banner,
body.konvrt-workspace-active #ai-relocation-card > .improve-section-label {
display: none !important;
}
/* Four colored modes sit directly below the header. */
.konvrt-mode-bar {
min-height: 72px;
margin: 0 !important;
padding: 0 clamp(.65rem, 2vw, 1.4rem) !important;
display: grid;
align-items: stretch;
border-bottom: 1px solid color-mix(in srgb, var(--line) 72%, transparent);
background: color-mix(in srgb, var(--bg) 82%, var(--surface) 18%);
}
.konvrt-mode-bar .prompt-mode-switch,
.hero-step-improve .konvrt-mode-bar .prompt-mode-switch {
width: 100% !important;
height: 100%;
margin: 0 !important;
padding: 0 !important;
display: grid !important;
grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
gap: 0 !important;
border: 0 !important;
background: transparent !important;
}
.konvrt-mode-bar .prompt-mode-btn {
--mode-color: #3578d4;
position: relative;
min-width: 0;
min-height: 72px !important;
padding: .55rem .5rem !important;
display: flex !important;
flex-direction: row;
align-items: center;
justify-content: center;
gap: .5rem;
color: color-mix(in srgb, var(--text) 74%, var(--mode-color) 26%) !important;
border: 0 !important;
border-inline-end: 1px solid color-mix(in srgb, var(--line) 58%, transparent) !important;
border-radius: 0 !important;
background: transparent !important;
box-shadow: inset 0 -3px 0 transparent !important;
transform: none !important;
transition: color .2s ease, background .2s ease, box-shadow .2s ease !important;
}
.konvrt-mode-bar .prompt-mode-btn[data-prompt-mode="studio"] { --mode-color: #7659d6; }
.konvrt-mode-bar .prompt-mode-btn[data-prompt-mode="presets"] { --mode-color: #d47a20; }
.konvrt-mode-bar .prompt-mode-btn[data-prompt-mode="trends"] { --mode-color: #c54e84; }
/* Explore rides in the bar as a fifth destination pill: an in the
mode-pill anatomy. Hidden on phones (the bottom nav owns Explore via
the #explore-pill rule), where the switch falls back to four tracks. */
.konvrt-mode-bar .prompt-mode-btn.prompt-mode-explore { --mode-color: #2f9d7a; }
a.prompt-mode-btn { text-decoration: none; }
.konvrt-mode-bar .prompt-mode-switch.has-explore,
.hero-step-improve .konvrt-mode-bar .prompt-mode-switch.has-explore {
grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
}
@media (max-width: 720px) {
.konvrt-mode-bar .prompt-mode-switch.has-explore,
.hero-step-improve .konvrt-mode-bar .prompt-mode-switch.has-explore {
grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
}
}
.konvrt-mode-bar .prompt-mode-btn:last-child { border-inline-end: 0 !important; }
.konvrt-mode-bar .prompt-mode-btn:hover {
color: var(--mode-color) !important;
background: color-mix(in srgb, var(--mode-color) 8%, transparent) !important;
}
.konvrt-mode-bar .prompt-mode-btn.is-active {
color: var(--mode-color) !important;
background: color-mix(in srgb, var(--mode-color) 11%, transparent) !important;
box-shadow: inset 0 -3px 0 var(--mode-color) !important;
}
.konvrt-mode-bar .prompt-mode-icon {
width: 34px !important;
height: 34px !important;
flex: 0 0 34px;
color: var(--mode-color) !important;
border: 0 !important;
border-radius: 11px !important;
background: color-mix(in srgb, var(--mode-color) 12%, transparent) !important;
}
.konvrt-mode-bar .prompt-mode-icon svg {
width: 17px;
height: 17px;
}
.konvrt-mode-bar .prompt-mode-short,
.konvrt-mode-bar .prompt-mode-note {
display: none !important;
}
.konvrt-mode-bar .prompt-mode-btn strong {
display: block !important;
min-width: 0;
color: inherit !important;
font-size: clamp(.72rem, 1vw, .86rem) !important;
font-style: normal;
white-space: normal;
line-height: 1.1;
overflow-wrap: anywhere;
}
/* Left controls and right output phone. */
.konvrt-workspace-body {
min-height: 0;
margin: 0 !important;
padding: 0 !important;
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(300px, 390px);
animation: none !important;
transform: none !important;
opacity: 1 !important;
overflow: hidden;
}
.konvrt-controls-pane {
min-width: 0;
min-height: 0;
padding: clamp(.8rem, 1.7vw, 1.25rem) clamp(.8rem, 2vw, 1.5rem);
display: flex;
flex-direction: column;
gap: .8rem;
overflow-x: hidden;
overflow-y: auto;
overscroll-behavior: contain;
scrollbar-width: thin;
border-inline-end: 1px solid color-mix(in srgb, var(--line) 72%, transparent);
}
.konvrt-controls-pane::-webkit-scrollbar { width: 6px; }
.konvrt-controls-pane::-webkit-scrollbar-thumb {
border-radius: 999px;
background: color-mix(in srgb, var(--muted) 32%, transparent);
}
.konvrt-controls-pane > *,
.konvrt-model-controls > * {
width: 100%;
min-width: 0;
}
.konvrt-model-controls {
display: none;
min-height: 0;
flex: 1 1 auto;
flex-direction: column;
gap: .75rem;
}
body[data-workspace-mode="model"] .konvrt-model-controls {
display: flex;
}
.konvrt-controls-pane #output-size-section {
flex: 0 0 auto;
width: 100% !important;
margin: 0 !important;
padding: 0 0 .75rem !important;
border: 0 !important;
border-bottom: 1px solid color-mix(in srgb, var(--line) 66%, transparent) !important;
background: transparent !important;
}
.konvrt-controls-pane #output-size-section .improve-section-label {
margin: 0 0 .45rem !important;
color: var(--muted);
font-size: .65rem;
letter-spacing: .08em;
text-transform: uppercase;
}
.konvrt-controls-pane .size-choice-row {
display: grid !important;
grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
gap: .32rem !important;
border: 0 !important;
}
.konvrt-controls-pane .size-choice {
min-width: 0;
min-height: 52px;
padding: .36rem .2rem;
border: 1px solid transparent !important;
border-radius: 11px !important;
background: transparent !important;
box-shadow: none !important;
}
.konvrt-controls-pane .size-choice:hover {
border-color: color-mix(in srgb, var(--format-color) 30%, var(--line)) !important;
background: color-mix(in srgb, var(--format-color) 7%, transparent) !important;
}
.konvrt-controls-pane .size-choice.is-active {
color: var(--format-color);
border-color: color-mix(in srgb, var(--format-color) 48%, var(--line)) !important;
background: color-mix(in srgb, var(--format-color) 10%, transparent) !important;
box-shadow: inset 0 -2px 0 var(--format-color) !important;
}
.konvrt-controls-pane .model-suggestion-gate,
.konvrt-controls-pane .personal-change-panel,
.konvrt-controls-pane .look-preset-panel,
.konvrt-controls-pane .trend-panel,
.konvrt-controls-pane .custom-improvements {
margin: 0 !important;
padding: 0 !important;
border: 0 !important;
border-radius: 0 !important;
background: transparent !important;
box-shadow: none !important;
}
.konvrt-controls-pane .simple-analysis-summary {
flex: 0 0 auto;
margin: 0;
padding: .75rem 0;
border: 0;
border-bottom: 1px solid color-mix(in srgb, var(--line) 62%, transparent);
border-radius: 0;
background: transparent;
}
.konvrt-controls-pane .simple-summary-title {
font-size: clamp(1.05rem, 1.7vw, 1.4rem);
}
.konvrt-controls-pane .custom-improvements {
flex: 1 1 auto;
min-height: 0;
overflow: visible;
}
.konvrt-controls-pane .smart-action-grid {
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)) !important;
gap: .45rem !important;
}
.konvrt-controls-pane .look-preset-panel,
.konvrt-controls-pane .trend-panel {
flex: 1 1 auto;
min-height: 0;
}
.konvrt-controls-pane .look-preset-tabs {
position: sticky;
top: 0;
z-index: 2;
padding-block: .2rem .45rem;
background: var(--bg);
}
.konvrt-controls-pane .look-preset-row,
.konvrt-controls-pane .trend-grid {
grid-template-columns: repeat(auto-fill, minmax(126px, 1fr)) !important;
gap: .5rem !important;
}
.konvrt-controls-pane .personal-change-panel {
flex: 1 1 auto;
min-height: 420px;
}
.konvrt-controls-pane .studio3d,
.konvrt-controls-pane .studio3d-stage {
width: 100%;
height: 100%;
min-height: 420px;
border-radius: 22px;
}
.konvrt-phone-pane {
min-width: 0;
min-height: 0;
padding: .7rem .8rem .8rem;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: .45rem;
overflow: hidden;
background:
radial-gradient(circle at 50% 12%, color-mix(in srgb, #fff 64%, transparent), transparent 55%),
color-mix(in srgb, var(--bg) 70%, var(--surface) 30%);
}
.konvrt-phone-label {
flex: 0 0 auto;
display: inline-flex;
align-items: center;
gap: .36rem;
color: var(--muted);
font-size: .62rem;
font-weight: 700;
letter-spacing: .04em;
text-transform: uppercase;
}
.konvrt-phone-label i {
width: 7px;
height: 7px;
border-radius: 50%;
background: #2aa96b;
box-shadow: 0 0 0 4px color-mix(in srgb, #2aa96b 13%, transparent);
}
.konvrt-phone-frame {
position: relative;
height: min(100%, 720px);
max-height: calc(100dvh - var(--site-header-h, 58px) - 96px);
max-width: 100%;
aspect-ratio: 9 / 19.5;
padding: 8px;
border: 2px solid #4c4c50;
border-radius: 46px;
background: linear-gradient(145deg, #29292d, #08080a);
box-shadow:
0 30px 70px rgba(20, 18, 18, .24),
inset 0 0 0 2px rgba(255,255,255,.08);
}
.konvrt-phone-frame::before,
.konvrt-phone-frame::after {
content: "";
position: absolute;
left: -4px;
width: 3px;
border-radius: 3px 0 0 3px;
background: #39393d;
}
.konvrt-phone-frame::before { top: 22%; height: 9%; }
.konvrt-phone-frame::after { top: 34%; height: 14%; }
.konvrt-phone-island {
position: absolute;
z-index: 8;
top: 15px;
left: 50%;
width: 31%;
height: 22px;
transform: translateX(-50%);
border-radius: 999px;
background: #050506;
box-shadow: inset 0 -1px 0 rgba(255,255,255,.08);
}
.konvrt-phone-screen {
position: relative;
width: 100%;
height: 100%;
overflow: hidden;
border-radius: 37px;
background: color-mix(in srgb, var(--surface) 94%, var(--bg) 6%);
}
.konvrt-phone-screen .generated-prompt-panel {
position: relative;
width: 100% !important;
height: 100%;
min-height: 0;
margin: 0 !important;
padding: 2.2rem .65rem .7rem !important;
display: flex;
flex-direction: column;
gap: .45rem;
overflow: hidden;
border: 0 !important;
border-radius: 0 !important;
background: transparent !important;
box-shadow: none !important;
}
.konvrt-phone-screen .generated-prompt-head {
flex: 0 0 auto;
width: 100%;
min-width: 0;
margin: 0;
padding: 0 0 .35rem;
display: flex;
align-items: center;
justify-content: space-between;
gap: .4rem;
border-bottom: 1px solid color-mix(in srgb, var(--line) 62%, transparent);
}
.konvrt-phone-screen .generated-prompt-copy {
min-width: 0;
display: grid;
gap: .08rem;
}
.konvrt-phone-screen .generated-prompt-copy strong {
font-size: .68rem;
}
.konvrt-phone-screen .selected-output-summary {
max-width: 22ch;
color: var(--muted);
font-size: .48rem;
white-space: normal;
overflow-wrap: anywhere;
}
.konvrt-phone-screen #start-again-btn {
flex: 0 0 auto;
padding: .28rem .42rem;
color: var(--accent);
font-size: .48rem;
font-weight: 700;
border: 1px solid color-mix(in srgb, var(--accent) 24%, var(--line));
border-radius: 7px;
background: transparent;
}
.konvrt-phone-screen .generated-prompt-layout {
position: relative;
flex: 1 1 auto;
width: 100% !important;
min-height: 0;
margin: 0 !important;
padding: 0 !important;
display: block !important;
overflow: hidden;
}
.konvrt-phone-screen .image-comparison-item.is-generated {
width: 100%;
height: 100%;
min-height: 0;
display: grid;
grid-template-rows: auto minmax(0, 1fr) auto;
gap: .35rem;
}
.konvrt-phone-screen .image-comparison-item.is-generated .image-comparison-head {
min-height: 0;
margin: 0;
}
.konvrt-phone-screen #generate-image-btn {
width: 100%;
min-height: 34px;
padding: .4rem .55rem;
justify-content: center;
border-radius: 10px;
font-size: .62rem;
box-shadow: none;
}
.konvrt-phone-screen #generated-image-frame {
position: relative;
align-self: center;
justify-self: center;
width: auto !important;
height: 100%;
max-width: 100%;
max-height: 100%;
min-width: 0;
min-height: 0 !important;
margin: 0 auto;
display: grid;
place-items: center;
overflow: hidden;
border: 1px solid color-mix(in srgb, var(--line) 82%, transparent);
border-radius: 14px;
background:
linear-gradient(135deg, color-mix(in srgb, var(--bg) 88%, #fff 12%), var(--bg));
}
.konvrt-phone-screen #generated-image-result {
width: 100%;
height: 100%;
object-fit: contain;
object-position: center;
}
.konvrt-phone-screen .generated-image-placeholder {
padding: .65rem;
color: var(--muted);
font-size: .57rem;
line-height: 1.35;
text-align: center;
}
.konvrt-phone-screen .image-comparison-item.is-generated > .image-comparison-caption {
color: var(--muted);
font-size: .5rem;
text-align: center;
}
.konvrt-phone-screen .image-comparison-item.is-reference {
position: absolute;
z-index: 5;
inset: auto auto .8rem .55rem;
width: 31%;
min-width: 64px;
margin: 0;
padding: .24rem;
display: grid;
gap: .18rem;
border: 1px solid rgba(255,255,255,.7);
border-radius: 12px;
background: color-mix(in srgb, var(--surface) 90%, transparent);
box-shadow: 0 12px 28px rgba(20,18,18,.22);
backdrop-filter: blur(10px);
}
html[dir="rtl"] .konvrt-phone-screen .image-comparison-item.is-reference {
inset: auto .55rem .8rem auto;
}
.konvrt-phone-screen .image-comparison-item.is-reference .image-comparison-head {
display: none;
}
.konvrt-phone-screen #improvement-reference-frame {
width: 100%;
max-height: 120px;
min-height: 0 !important;
margin: 0;
border: 0;
border-radius: 8px;
background: var(--bg);
}
.konvrt-phone-screen #improvement-reference-frame img {
width: 100%;
height: 100%;
max-height: 120px;
object-fit: contain;
}
.konvrt-phone-screen .image-comparison-item.is-reference .image-comparison-caption {
color: var(--muted);
font-size: .42rem;
line-height: 1.2;
text-align: center;
}
.konvrt-phone-screen .prompt-helpful-card,
.konvrt-phone-screen .generate-footer-note,
.konvrt-phone-screen .copy-ready-status {
display: none !important;
}
@media (max-width: 900px) {
.konvrt-workspace-body {
grid-template-columns: minmax(0, 1fr) minmax(190px, 38vw);
}
.konvrt-controls-pane {
padding: .7rem;
}
.konvrt-phone-pane {
padding: .5rem;
}
.konvrt-controls-pane .personal-change-panel,
.konvrt-controls-pane .studio3d,
.konvrt-controls-pane .studio3d-stage {
min-height: 340px;
}
}
@media (max-width: 720px) {
body:not(.landing-active) .site-header-inner,
body:not(.landing-active) .site-header-inner.has-workflow-steps {
min-height: 52px !important;
padding: .3rem .45rem !important;
}
.konvrt-mode-bar {
min-height: 58px;
padding-inline: .3rem;
}
.konvrt-mode-bar .prompt-mode-btn {
min-height: 58px !important;
padding: .32rem .14rem !important;
flex-direction: column;
gap: .16rem;
}
.konvrt-mode-bar .prompt-mode-icon {
width: 27px !important;
height: 27px !important;
flex-basis: 27px;
border-radius: 8px !important;
}
.konvrt-mode-bar .prompt-mode-icon svg {
width: 14px;
height: 14px;
}
.konvrt-mode-bar .prompt-mode-btn strong {
font-size: .58rem !important;
}
.konvrt-workspace-body {
grid-template-columns: minmax(0, 1fr) minmax(128px, 38vw);
}
.konvrt-controls-pane {
padding: .52rem;
gap: .55rem;
}
.konvrt-controls-pane .size-choice-row {
gap: .12rem !important;
}
.konvrt-controls-pane .size-choice {
min-height: 44px;
padding: .22rem .06rem;
}
.konvrt-controls-pane .size-choice-icon {
width: 19px;
height: 19px;
}
.konvrt-controls-pane .size-choice-title { font-size: .48rem; }
.konvrt-controls-pane .size-choice-ratio { font-size: .44rem; }
.konvrt-controls-pane .smart-action-grid,
.konvrt-controls-pane .look-preset-row,
.konvrt-controls-pane .trend-grid {
grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}
.konvrt-phone-pane {
padding: .3rem;
justify-content: center;
}
.konvrt-phone-label { display: none; }
.konvrt-phone-frame {
width: 100%;
height: auto;
max-height: 100%;
padding: 4px;
border-radius: 26px;
}
.konvrt-phone-island {
top: 8px;
height: 12px;
}
.konvrt-phone-screen {
border-radius: 20px;
}
.konvrt-phone-screen .generated-prompt-panel {
padding: 1.25rem .28rem .35rem !important;
gap: .25rem;
}
.konvrt-phone-screen .generated-prompt-head {
gap: .18rem;
}
.konvrt-phone-screen .generated-prompt-copy strong { font-size: .5rem; }
.konvrt-phone-screen .selected-output-summary { font-size: .38rem; }
.konvrt-phone-screen #start-again-btn {
padding: .18rem .25rem;
font-size: .36rem;
}
.konvrt-phone-screen #generate-image-btn {
min-height: 27px;
padding: .25rem;
font-size: .48rem;
}
.konvrt-phone-screen .generate-price {
font-size: .42rem;
}
.konvrt-phone-screen .image-comparison-item.is-reference {
inset-block-end: .35rem;
inset-inline-start: .25rem;
width: 38%;
min-width: 44px;
padding: .16rem;
border-radius: 7px;
}
#upload-choice-overlay .upload-choice-dialog {
width: min(560px, calc(100% - 1rem));
max-height: calc(100dvh - 1rem);
padding: .75rem;
overflow-y: auto;
}
#upload-choice-overlay .upload-choice-preview {
height: min(16vh, 110px);
margin-bottom: .55rem;
}
#upload-choice-overlay .auth-title {
margin-bottom: .55rem;
font-size: 1rem;
}
#upload-choice-overlay .upload-choice-actions {
grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
gap: .4rem;
}
#upload-choice-overlay .upload-choice-action {
min-height: 104px;
padding: .55rem;
grid-template-rows: auto auto 1fr;
}
#upload-choice-overlay .upload-choice-action svg {
width: 27px;
height: 27px;
padding: .34rem;
}
#upload-choice-overlay .upload-choice-action strong { font-size: .7rem; }
#upload-choice-overlay .upload-choice-action > span { font-size: .54rem; }
#upload-choice-overlay .upload-choice-action small { display: none; }
.import-intro h1 { font-size: clamp(1.65rem, 9vw, 2.5rem); }
.import-intro p { max-width: 34ch; font-size: .72rem; }
body:not(.landing-active):not(.konvrt-workspace-active) .hero-step-upload {
width: min(100% - 1rem, 620px);
}
body:not(.landing-active):not(.konvrt-workspace-active) .upload-btn.compact,
body:not(.landing-active):not(.konvrt-workspace-active) .upload-btn.compact.has-preview {
min-height: 190px;
height: min(42vh, 340px);
max-height: 340px;
border-radius: 18px;
}
}
/* The analyzer opens inside the workspace and owns the controls pane while running. */
body.konvrt-workspace-active.konvrt-analyzing[data-workspace-mode="model"] .konvrt-controls-pane #output-size-section,
body.konvrt-workspace-active.konvrt-analyzing[data-workspace-mode="model"] .konvrt-model-controls > :not(.analysis-loader),
body.konvrt-workspace-active.konvrt-analyzing[data-workspace-mode="model"] .model-suggestion-gate {
display: none !important;
}
.konvrt-model-controls > .analysis-loader {
flex: 1 1 auto;
min-height: 0;
padding: .5rem 0;
align-content: center;
}
.konvrt-model-controls > .analysis-loader.visible .analysis-loader-preview {
display: block;
max-height: min(48vh, 430px);
margin-bottom: 1rem;
}
.konvrt-model-controls > .analysis-loader.visible .analysis-loader-preview img {
max-height: min(48vh, 430px);
border-radius: 18px;
}
.konvrt-model-controls > .analysis-loader.visible .analysis-loader-visual {
width: 48px;
height: 48px;
}
.konvrt-model-controls > .analysis-loader.visible .analysis-loader-title {
font-size: clamp(.9rem, 1.35vw, 1.08rem);
}
.konvrt-model-controls > .analysis-loader.visible .analysis-loader-stage {
font-size: clamp(.72rem, 1vw, .84rem);
}
/* Reference and actions live above the device; its screen is output-only. */
.konvrt-phone-pane {
justify-content: flex-start;
}
.konvrt-preview-tools {
flex: 0 0 auto;
width: 100%;
max-width: 360px;
padding: 0 .1rem .65rem;
border-bottom: 1px solid color-mix(in srgb, var(--line) 64%, transparent);
}
.konvrt-preview-tools .generated-prompt-panel {
width: 100% !important;
min-height: 0 !important;
margin: 0 !important;
padding: 0 !important;
display: grid !important;
gap: .45rem !important;
border: 0 !important;
border-radius: 0 !important;
background: transparent !important;
box-shadow: none !important;
}
.konvrt-preview-tools .generated-prompt-panel.hidden {
display: none !important;
}
.konvrt-preview-tools .generated-prompt-head {
min-width: 0;
padding: 0 0 .4rem;
display: flex;
align-items: center;
justify-content: space-between;
gap: .55rem;
border-bottom: 1px solid color-mix(in srgb, var(--line) 58%, transparent);
}
.konvrt-preview-tools .generated-prompt-copy {
min-width: 0;
display: grid;
gap: .06rem;
}
.konvrt-preview-tools .generated-prompt-copy strong {
font-size: .72rem;
}
.konvrt-preview-tools .selected-output-summary {
color: var(--muted);
font-size: .54rem;
white-space: normal;
overflow-wrap: anywhere;
}
.konvrt-preview-tools #start-again-btn {
flex: 0 0 auto;
padding: .34rem .5rem;
color: var(--accent);
font-size: .52rem;
font-weight: 750;
border: 1px solid color-mix(in srgb, var(--accent) 24%, var(--line));
border-radius: 8px;
background: transparent;
}
.konvrt-preview-tools .generated-prompt-layout {
width: 100% !important;
min-height: 0 !important;
margin: 0 !important;
padding: 0 !important;
display: grid !important;
grid-template-areas: "ref gen" !important;
grid-template-columns: 74px minmax(0, 1fr) !important;
align-items: center;
gap: .55rem !important;
overflow: visible !important;
}
.konvrt-preview-tools .image-comparison-item.is-reference {
min-width: 0;
margin: 0;
display: grid;
gap: .2rem;
}
.konvrt-preview-tools .image-comparison-item.is-reference .image-comparison-head {
display: none;
}
.konvrt-preview-tools #improvement-reference-frame {
width: 74px;
height: 58px;
min-height: 0 !important;
margin: 0;
overflow: hidden;
border: 1px solid color-mix(in srgb, var(--line) 76%, transparent);
border-radius: 10px;
background: color-mix(in srgb, var(--bg) 84%, var(--surface) 16%);
aspect-ratio: auto !important;
}
.konvrt-preview-tools #improvement-reference-frame img {
width: 100%;
height: 100%;
object-fit: contain;
}
.konvrt-preview-tools .image-comparison-item.is-reference .image-comparison-caption {
color: var(--muted);
font-size: .48rem;
line-height: 1.15;
text-align: center;
}
.konvrt-preview-tools .image-comparison-item.is-generated {
min-width: 0;
margin: 0;
display: flex;
align-items: center;
}
.konvrt-preview-tools .image-comparison-item.is-generated .image-comparison-head {
width: 100%;
margin: 0;
display: flex;
align-items: center;
gap: .35rem;
}
.konvrt-preview-tools #generate-image-btn {
flex: 1 1 auto;
width: auto;
min-height: 38px;
padding: .48rem .65rem;
justify-content: center;
border-radius: 11px;
font-size: .66rem;
box-shadow: none;
}
.konvrt-preview-tools .image-comparison-item.is-generated > .image-comparison-caption,
.konvrt-preview-tools .copy-ready-status,
.konvrt-preview-tools .prompt-helpful-card,
.konvrt-preview-tools .generate-footer-note {
display: none !important;
}
body.konvrt-analyzing .konvrt-preview-tools .image-comparison-item.is-generated {
opacity: .38;
pointer-events: none;
}
.konvrt-phone-label {
margin-top: .45rem;
}
.konvrt-phone-frame {
flex: 1 1 auto;
height: auto;
min-height: 210px;
max-height: min(560px, calc(100dvh - var(--site-header-h, 58px) - 238px));
}
.konvrt-phone-screen {
display: grid;
place-items: center;
padding: 0;
background: color-mix(in srgb, var(--surface) 94%, var(--bg) 6%);
}
.konvrt-phone-screen #generated-image-frame {
width: 100% !important;
height: 100% !important;
max-width: 100%;
max-height: 100%;
min-width: 0;
min-height: 0 !important;
margin: 0;
display: grid;
place-items: center;
overflow: hidden;
border: 0;
/* Square render corners by owner request: the 35px screen curve was
clipping the generated image whenever it filled the frame. */
border-radius: 0;
background: transparent;
aspect-ratio: auto !important;
}
.konvrt-phone-screen #generated-image-result {
/* Owner's call 2026-08-11: the generated render shows SQUARE corners.
Hug the picture so no stray rounding from earlier rules can land on
it, and keep radius explicitly zero. */
width: auto;
height: auto;
max-width: 100%;
max-height: 100%;
object-fit: contain;
object-position: center;
border-radius: 0;
}
.konvrt-phone-screen #generated-image-frame.is-empty .generated-image-placeholder {
display: none;
}
/* Mobile uses a compact result dock instead of a second tall column. */
@media (max-width: 720px) {
.konvrt-workspace-body {
grid-template-columns: minmax(0, 1fr) !important;
grid-template-rows: minmax(0, 1fr) 116px;
}
.konvrt-controls-pane {
border-inline-end: 0;
border-bottom: 1px solid color-mix(in srgb, var(--line) 68%, transparent);
}
.konvrt-phone-pane {
width: 100%;
height: 116px;
min-height: 116px;
padding: .42rem .5rem;
display: grid;
grid-template-columns: minmax(0, 1fr) 94px;
grid-template-rows: minmax(0, 1fr);
align-items: stretch;
justify-content: stretch;
gap: .5rem;
overflow: hidden;
border-top: 0;
background: color-mix(in srgb, var(--surface) 46%, var(--bg) 54%);
}
.konvrt-preview-tools {
width: 100%;
max-width: none;
height: 100%;
min-width: 0;
padding: 0;
overflow: hidden;
border: 0;
}
.konvrt-preview-tools .generated-prompt-panel {
height: 100%;
grid-template-columns: 78px minmax(0, 1fr);
grid-template-rows: minmax(0, 1fr);
align-items: stretch;
gap: .38rem !important;
}
.konvrt-preview-tools .generated-prompt-head {
width: 100%;
height: 100%;
min-height: 0;
padding: 0;
display: flex;
border: 0;
}
.konvrt-preview-tools .generated-prompt-copy {
display: none;
}
.konvrt-preview-tools #start-again-btn {
width: 100%;
height: 100%;
min-height: 0;
padding: .28rem;
display: grid;
place-items: center;
font-size: .44rem;
line-height: 1.25;
text-align: center;
white-space: normal;
}
.konvrt-preview-tools .generated-prompt-layout {
height: 100%;
grid-template-columns: 54px minmax(0, 1fr) !important;
align-items: center;
gap: .38rem !important;
}
.konvrt-preview-tools #improvement-reference-frame {
width: 54px;
height: 54px;
border-radius: 7px;
}
.konvrt-preview-tools .image-comparison-item.is-reference .image-comparison-caption {
display: none;
}
.konvrt-preview-tools #generate-image-btn {
min-height: 32px;
padding: .35rem .4rem;
font-size: .54rem;
}
.konvrt-phone-label,
.konvrt-phone-island,
.konvrt-phone-frame::before,
.konvrt-phone-frame::after {
display: none;
}
.konvrt-phone-frame {
width: 100%;
height: 100%;
min-height: 0;
max-height: none;
padding: 0;
border: 0;
border-radius: 14px;
background: color-mix(in srgb, var(--bg) 70%, var(--surface) 30%);
box-shadow: none;
aspect-ratio: auto;
}
.konvrt-phone-screen,
.konvrt-phone-screen #generated-image-frame {
border-radius: 14px;
}
.konvrt-phone-screen #generated-image-frame {
border: 1px solid color-mix(in srgb, var(--line) 70%, transparent);
}
.konvrt-model-controls > .analysis-loader.visible .analysis-loader-preview,
.konvrt-model-controls > .analysis-loader.visible .analysis-loader-preview img {
max-height: min(31vh, 245px);
}
}
@media (max-width: 430px) {
.konvrt-workspace-body {
grid-template-rows: minmax(0, 1fr) 104px;
}
.konvrt-phone-pane {
height: 104px;
min-height: 104px;
grid-template-columns: minmax(0, 1fr) 78px;
padding: .34rem .4rem;
gap: .4rem;
}
.konvrt-preview-tools .selected-output-summary {
display: none;
}
.konvrt-preview-tools .generated-prompt-panel {
grid-template-columns: 66px minmax(0, 1fr);
}
.konvrt-preview-tools .generated-prompt-layout {
grid-template-columns: 46px minmax(0, 1fr) !important;
}
.konvrt-preview-tools #improvement-reference-frame {
width: 46px;
height: 46px;
}
}
/* Compact, transparent output rail. The device screen is the only output
surface; the surrounding column no longer reads as another card. */
.konvrt-phone-pane {
background: transparent !important;
}
.konvrt-preview-tools {
padding-bottom: .35rem;
border-bottom: 0;
}
.konvrt-preview-tools .generated-prompt-head {
padding-bottom: .22rem;
border-bottom: 0;
}
/* ---- Output rail: toolbar on top, device with history beside it --------
The history is a vertical column next to the phone rather than a strip
under it, so the device keeps the full height of the pane. */
.konvrt-workspace-body {
grid-template-columns: minmax(0, 1fr) minmax(348px, 452px);
}
.konvrt-phone-pane {
--rail-gap: .6rem;
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
grid-template-rows: auto minmax(0, 1fr);
align-items: start;
justify-items: stretch;
gap: var(--rail-gap);
padding: .75rem .7rem .8rem;
}
.konvrt-preview-tools { grid-column: 1 / -1; grid-row: 1; }
.konvrt-preview-tools {
width: 100%;
padding-bottom: 0;
}
/* One card holds the reference, the size read-out and both actions, so the
old empty column beside the Generate button is gone. */
.konvrt-preview-tools .generated-prompt-panel {
gap: .5rem !important;
padding: .5rem !important;
border: 1px solid color-mix(in srgb, var(--line) 62%, transparent) !important;
border-radius: 14px !important;
background: color-mix(in srgb, var(--surface) 82%, transparent) !important;
}
.konvrt-preview-tools .generated-prompt-head {
padding: 0;
display: grid;
grid-template-columns: auto minmax(0, 1fr) auto;
align-items: center;
gap: .5rem;
}
.konvrt-preview-tools .generated-prompt-head .image-comparison-item.is-reference {
grid-area: auto;
gap: 0;
}
.konvrt-preview-tools .generated-prompt-head .image-comparison-caption {
display: none;
}
.konvrt-preview-tools #improvement-reference-frame {
width: 42px;
height: 42px;
border-radius: 9px;
}
.konvrt-preview-tools .selected-output-summary {
display: block;
color: var(--text);
font-size: .58rem;
font-weight: 700;
letter-spacing: .01em;
}
.konvrt-preview-tools #start-again-btn {
white-space: nowrap;
}
/* Only the generated action remains in the layout row, so it spans it. */
.konvrt-preview-tools .generated-prompt-layout {
grid-template-areas: "gen" !important;
grid-template-columns: minmax(0, 1fr) !important;
gap: 0 !important;
}
.konvrt-preview-tools #generate-image-btn {
min-height: 40px;
}
.konvrt-history-rail {
flex: 0 0 auto;
min-width: 0;
}
.konvrt-history-rail[hidden] { display: none; }
.konvrt-history-track {
height: 100%;
max-height: 100%;
display: flex;
flex-direction: column;
align-items: center;
gap: .4rem;
padding: .1rem .28rem .1rem .1rem;
overflow-x: hidden;
overflow-y: auto;
overscroll-behavior-y: contain;
scrollbar-width: thin;
scroll-snap-type: y proximity;
}
.konvrt-history-track::-webkit-scrollbar { width: 5px; }
.konvrt-history-track::-webkit-scrollbar-thumb {
border-radius: 999px;
background: color-mix(in srgb, var(--muted) 34%, transparent);
}
.konvrt-history-thumb {
position: relative;
flex: 0 0 auto;
width: 52px;
height: 52px;
padding: 0;
overflow: hidden;
border: 1px solid color-mix(in srgb, var(--line) 74%, transparent);
border-radius: 10px;
background: color-mix(in srgb, var(--bg) 86%, var(--surface) 14%);
cursor: pointer;
scroll-snap-align: start;
transition: border-color .16s ease, transform .16s ease;
}
.konvrt-history-thumb:hover { transform: translateY(-1px); }
.konvrt-history-thumb.is-active {
border-color: var(--accent);
box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 22%, transparent);
}
.konvrt-history-thumb img {
width: 100%;
height: 100%;
display: block;
object-fit: cover;
}
.konvrt-history-stored-icon {
position: absolute;
inset: 0 0 .65rem;
display: grid;
place-items: center;
color: var(--accent);
font-size: .9rem;
font-weight: 850;
background:
linear-gradient(135deg, color-mix(in srgb, var(--accent) 13%, transparent), transparent 66%),
color-mix(in srgb, var(--bg) 86%, var(--surface) 14%);
}
.konvrt-history-ratio {
position: absolute;
inset: auto 0 0 0;
padding: .06rem .1rem;
color: #fff;
font-size: .4rem;
font-weight: 800;
text-align: center;
background: rgba(20, 18, 18, .58);
}
/* The render keeps its own shape inside the screen. The ratio lives on the
![]()
, not on the frame: an auto-sized frame with aspect-ratio around a
100%/100% image is circular sizing, and the image fell back to its native
1080x1920 and burst out of the screen. An image at auto size with max
bounds is the one form that always keeps its true ratio. */
.konvrt-phone-screen #generated-image-frame {
width: 100% !important;
height: 100% !important;
display: grid;
place-items: center;
padding: 0;
overflow: hidden;
border: 0;
/* Square render corners by owner request: the 35px screen curve was
clipping the generated image whenever it filled the frame. */
border-radius: 0;
background: transparent;
}
.konvrt-phone-screen #generated-image-result {
width: auto !important;
height: auto !important;
max-width: 100%;
max-height: 100%;
display: block;
object-fit: contain;
border-radius: 14px;
box-shadow: 0 10px 26px rgba(20, 18, 18, .26);
}
.konvrt-phone-frame {
flex: 0 1 auto;
/* The history moved out of this column, so the device takes the height. */
max-height: min(760px, calc(100dvh - var(--site-header-h, 58px) - 172px));
}
@media (max-width: 720px) {
/* The dock grows only when there is history to show. */
.konvrt-workspace-body {
grid-template-rows: minmax(0, 1fr) auto !important;
}
.konvrt-phone-pane {
height: auto;
min-height: 116px;
grid-template-columns: minmax(0, 1fr) 94px;
grid-template-rows: minmax(116px, auto) auto;
gap: .45rem;
padding: .45rem .5rem .5rem;
}
.konvrt-preview-tools { grid-column: 1; grid-row: 1; }
.konvrt-phone-frame {
grid-column: 2;
grid-row: 1;
justify-self: stretch;
max-height: none;
}
/* In the dock there is no height for a column, so history lies flat. */
/* Stale dock-era placement removed: the rail lives in the
composition's named "history" area now. */
.konvrt-history-rail {
height: auto;
}
.konvrt-history-track {
height: auto;
max-height: none;
flex-direction: row;
overflow-x: auto;
overflow-y: hidden;
overscroll-behavior-x: contain;
scroll-snap-type: x proximity;
padding: .1rem;
}
.konvrt-history-track::-webkit-scrollbar { width: auto; height: 4px; }
/* Stacked: reference + upload on top, Generate underneath. */
.konvrt-preview-tools .generated-prompt-panel {
grid-template-columns: minmax(0, 1fr) !important;
grid-template-rows: auto minmax(0, 1fr) !important;
align-content: center;
gap: .4rem !important;
padding: .42rem !important;
}
.konvrt-preview-tools .generated-prompt-head {
width: auto;
height: auto;
grid-template-columns: auto minmax(0, 1fr) auto;
}
.konvrt-preview-tools .generated-prompt-copy { display: block; }
.konvrt-preview-tools .selected-output-summary { font-size: .5rem; }
.konvrt-preview-tools #improvement-reference-frame {
width: 38px;
height: 38px;
border-radius: 8px;
}
.konvrt-preview-tools #start-again-btn {
width: auto;
height: auto;
padding: .3rem .42rem;
font-size: .46rem;
white-space: nowrap;
}
.konvrt-preview-tools #generate-image-btn { min-height: 34px; }
.konvrt-history-thumb { width: 38px; height: 38px; }
.konvrt-phone-screen #generated-image-frame.is-empty { border-radius: 14px; }
}
@media (max-width: 430px) {
.konvrt-phone-pane {
grid-template-columns: minmax(0, 1fr) 78px;
grid-template-rows: minmax(104px, auto) auto;
}
.konvrt-preview-tools .selected-output-summary { display: block; font-size: .46rem; }
.konvrt-preview-tools #improvement-reference-frame { width: 34px; height: 34px; }
.konvrt-history-thumb { width: 34px; height: 34px; }
}
.konvrt-phone-screen #generated-image-frame.is-empty .generated-image-placeholder {
display: block;
width: min(78%, 210px);
padding: .8rem;
color: color-mix(in srgb, var(--muted) 84%, var(--text) 16%);
font-size: .68rem;
font-weight: 650;
line-height: 1.45;
text-align: center;
}
/* Quick Picks exposes every decision at once. Group and option icons make
lighting, camera, color and finish distinguishable before reading. */
.look-preset-groups.is-all-visible {
display: grid;
gap: .55rem;
margin-top: .5rem;
}
.look-preset-groups.is-all-visible .look-preset-group {
min-width: 0;
padding: 0 0 .58rem;
display: grid;
grid-template-columns: 112px minmax(0, 1fr);
align-items: start;
gap: .65rem;
border-bottom: 1px solid color-mix(in srgb, var(--line) 66%, transparent);
}
.look-preset-groups.is-all-visible .look-preset-group:last-child {
padding-bottom: 0;
border-bottom: 0;
}
.look-preset-group-head {
min-height: 38px;
padding-top: .2rem;
display: flex;
align-items: center;
gap: .48rem;
color: var(--text);
}
.look-preset-group-head strong {
font-size: .65rem;
font-weight: 850;
line-height: 1.2;
}
.look-preset-group-icon {
flex: 0 0 31px;
width: 31px;
height: 31px;
display: grid;
place-items: center;
color: var(--accent);
border-radius: 10px;
background: color-mix(in srgb, var(--accent) 10%, transparent);
}
.look-preset-group-icon svg {
width: 17px;
height: 17px;
}
.konvrt-controls-pane .look-preset-groups.is-all-visible .look-preset-row {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(92px, 1fr)) !important;
gap: .38rem !important;
}
.look-preset-groups.is-all-visible .look-preset-choice {
min-width: 0;
padding: .28rem;
border-radius: 11px;
}
.look-preset-groups.is-all-visible .look-preset-swatch {
height: auto;
}
.look-preset-groups.is-all-visible .look-preset-choice strong {
padding-inline: .08rem;
font-size: .56rem;
}
.look-preset-groups.is-all-visible .look-preset-icon {
width: 27px;
height: 27px;
color: var(--accent);
border: 1px solid rgba(255,255,255,.78);
}
.look-preset-groups.is-all-visible .look-preset-icon svg {
width: 15px;
height: 15px;
}
/* Trends uses one-open-at-a-time disclosure so a large library stays calm. */
.trend-groups {
gap: .42rem;
}
.trend-group {
padding: 0;
overflow: hidden;
border-radius: 12px;
}
.trend-group-toggle {
width: 100%;
min-height: 54px;
padding: .62rem .72rem;
display: flex;
align-items: center;
justify-content: space-between;
gap: .7rem;
border: 0;
background: transparent;
color: var(--text);
font: inherit;
text-align: start;
cursor: pointer;
transition: background .16s ease, color .16s ease;
}
.trend-group-toggle:hover,
.trend-group.is-open .trend-group-toggle {
color: var(--trend-group-color);
background: color-mix(in srgb, var(--trend-group-color) 8%, transparent);
}
.trend-group-heading {
min-width: 0;
display: grid;
gap: .08rem;
}
.trend-group-heading strong {
font-size: .67rem;
font-weight: 850;
line-height: 1.2;
}
.trend-group-heading small {
color: var(--muted);
font-size: .54rem;
line-height: 1.25;
white-space: normal;
overflow-wrap: anywhere;
}
.trend-group-chevron {
flex: 0 0 18px;
width: 18px;
height: 18px;
transition: transform .18s ease;
}
.trend-group.is-open .trend-group-chevron {
transform: rotate(180deg);
}
.trend-group-grid[hidden] {
display: none !important;
}
.trend-group.is-open .trend-group-grid {
padding: .15rem .62rem .62rem;
}
/* Signed-in desktop account controls stay at the far edge. Language now
lives with the rest of the account settings in the profile menu. */
@media (min-width: 721px) {
body:not(.landing-active) .site-header-inner,
body:not(.landing-active) .site-header-inner.has-workflow-steps {
display: grid !important;
grid-template-columns: auto minmax(0, 920px) auto !important;
align-items: center;
}
body:not(.landing-active) .site-header-inner > .site-header-lead {
position: static !important;
grid-column: 1 !important;
grid-row: 1 !important;
justify-self: start;
transform: none !important;
}
body:not(.landing-active) .site-header-inner > .site-header-actions {
position: static !important;
grid-column: 3 !important;
grid-row: 1 !important;
justify-self: end !important;
margin-inline-start: 0 !important;
transform: none !important;
}
body:not(.landing-active) .site-header-inner:has(#auth-account:not(.hidden)) #lang-btn {
display: none !important;
}
body:not(.landing-active) .auth-menu-lang {
display: flex !important;
}
body:not(.landing-active) .auth-account {
position: relative;
}
body:not(.landing-active) .auth-menu {
inset-inline-start: auto !important;
inset-inline-end: 0 !important;
}
}
@media (max-width: 720px) {
.konvrt-phone-pane {
background: transparent !important;
}
.konvrt-phone-screen #generated-image-frame.is-empty .generated-image-placeholder {
width: 100%;
padding: .3rem;
font-size: .45rem;
line-height: 1.25;
}
.look-preset-groups.is-all-visible .look-preset-group {
grid-template-columns: 1fr;
gap: .32rem;
padding-bottom: .58rem;
}
.look-preset-group-head {
min-height: 30px;
padding-top: 0;
}
.look-preset-group-icon {
flex-basis: 26px;
width: 26px;
height: 26px;
border-radius: 8px;
}
.look-preset-group-icon svg {
width: 14px;
height: 14px;
}
.konvrt-controls-pane .look-preset-groups.is-all-visible .look-preset-row {
grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
}
.look-preset-groups.is-all-visible .look-preset-swatch {
height: auto;
}
.trend-group-toggle {
min-height: 48px;
padding: .52rem .58rem;
}
.trend-group.is-open .trend-group-grid {
padding: .1rem .5rem .5rem;
}
}
/* Trends is a visual picker: one large reference above a swipeable strip
of thumbnails. This keeps every direction visible without turning the
workspace into a stack of small disclosure groups. */
.konvrt-controls-pane .trend-panel:not(.hidden) {
display: flex !important;
flex-direction: column;
overflow: hidden;
}
.trend-gallery {
flex: 1 1 auto;
min-height: 0;
padding-top: .65rem;
display: grid;
grid-template-rows: minmax(260px, 1fr) auto;
gap: .7rem;
}
.trend-feature {
position: relative;
min-height: 0;
overflow: hidden;
border-radius: 20px;
background: color-mix(in srgb, var(--surface) 72%, #f3e7ed 28%);
box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--line) 68%, transparent);
isolation: isolate;
}
.trend-feature::after {
content: "";
position: absolute;
inset: 42% 0 0;
z-index: 1;
pointer-events: none;
background: linear-gradient(transparent, rgba(14, 9, 8, .76));
}
.trend-feature-image {
display: block;
width: 100%;
height: 100%;
min-height: 260px;
object-fit: cover;
object-position: center;
}
.trend-feature-copy {
position: absolute;
z-index: 2;
inset-inline: clamp(.85rem, 2vw, 1.35rem);
bottom: clamp(.8rem, 2vw, 1.2rem);
display: grid;
gap: .22rem;
color: #fff;
text-shadow: 0 1px 8px rgba(0, 0, 0, .42);
}
.trend-feature-type {
justify-self: start;
padding: .24rem .5rem;
border: 1px solid rgba(255, 255, 255, .3);
border-radius: 999px;
background: rgba(12, 8, 8, .34);
font-size: .54rem;
font-weight: 800;
letter-spacing: .05em;
text-transform: uppercase;
backdrop-filter: blur(8px);
}
.trend-feature-copy strong {
font-size: clamp(1.15rem, 2.35vw, 1.85rem);
font-weight: 900;
line-height: 1.08;
}
.trend-feature-copy small {
max-width: 48ch;
color: rgba(255, 255, 255, .88);
font-size: .7rem;
line-height: 1.35;
}
.trend-picker {
min-width: 0;
display: grid;
gap: .35rem;
}
.trend-picker-head {
display: flex;
align-items: center;
justify-content: space-between;
gap: .75rem;
padding-inline: .1rem;
}
.trend-picker-head strong {
font-size: .64rem;
font-weight: 850;
}
.trend-picker-head span {
color: var(--muted);
font-size: .54rem;
}
.trend-thumbnail-strip {
display: flex;
align-items: flex-start;
gap: .5rem;
min-width: 0;
padding: .2rem .15rem .52rem;
overflow-x: auto;
overflow-y: hidden;
scroll-snap-type: x proximity;
overscroll-behavior-inline: contain;
scrollbar-width: thin;
scrollbar-color: color-mix(in srgb, #c54e84 62%, var(--line)) transparent;
}
.trend-thumbnail-strip::-webkit-scrollbar { height: 5px; }
.trend-thumbnail-strip::-webkit-scrollbar-track { background: transparent; }
.trend-thumbnail-strip::-webkit-scrollbar-thumb {
border-radius: 999px;
background: color-mix(in srgb, #c54e84 62%, var(--line));
}
.trend-thumbnail {
flex: 0 0 80px;
min-width: 0;
padding: 0;
display: grid;
justify-items: center;
gap: .28rem;
border: 0;
background: transparent;
color: var(--text);
font: inherit;
text-align: center;
cursor: pointer;
scroll-snap-align: start;
}
.trend-thumbnail-image {
position: relative;
width: 68px;
height: 68px;
padding: 3px;
overflow: hidden;
border: 2px solid color-mix(in srgb, var(--line) 88%, transparent);
border-radius: 50%;
background: var(--surface);
transition: border-color .16s ease, transform .16s ease, box-shadow .16s ease;
}
.trend-thumbnail-image img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
border-radius: inherit;
}
.trend-thumbnail-label {
width: 100%;
color: var(--muted);
font-size: .51rem;
font-weight: 750;
line-height: 1.15;
white-space: normal;
overflow-wrap: anywhere;
}
.trend-thumbnail:hover .trend-thumbnail-image {
transform: translateY(-2px);
border-color: color-mix(in srgb, #c54e84 66%, var(--line));
}
.trend-thumbnail.is-active .trend-thumbnail-image {
border-color: #c54e84;
box-shadow: 0 0 0 3px color-mix(in srgb, #c54e84 18%, transparent), 0 6px 15px rgba(82, 25, 49, .18);
}
.trend-thumbnail.is-active .trend-thumbnail-image::after {
content: "✓";
position: absolute;
right: 1px;
bottom: 1px;
width: 18px;
height: 18px;
display: grid;
place-items: center;
border: 2px solid var(--surface);
border-radius: 50%;
background: #c54e84;
color: #fff;
font-size: .62rem;
font-weight: 900;
}
.trend-thumbnail.is-active .trend-thumbnail-label {
color: #a12f63;
font-weight: 850;
}
.trend-thumbnail:focus-visible {
outline: 2px solid #c54e84;
outline-offset: 3px;
border-radius: 10px;
}
@media (max-width: 720px) {
.trend-gallery {
grid-template-rows: minmax(230px, 58vh) auto;
gap: .55rem;
}
.trend-feature { border-radius: 16px; }
.trend-thumbnail { flex-basis: 70px; }
.trend-thumbnail-image { width: 60px; height: 60px; }
.trend-picker-head span { display: none; }
}
/* Desktop has more vertical room than the phone. Do not turn it into a
larger crop: show the complete trend reference instead. */
@media (min-width: 721px) {
.trend-feature-image { object-fit: contain; }
}
/* The landing animation tells the product story without loading the
interactive 3D studio. It starts close to the capture, then reveals the
lights and the phone that contains the whole scene. */
.landing-motion {
position: relative;
width: min(100%, 520px);
}
.landing-motion-stage {
position: relative;
width: 100%;
aspect-ratio: 16 / 9;
overflow: hidden;
border-radius: 20px;
/* The first frame sits under the video so the stage is never empty while
its compact source arrives. The pale gradient is the last resort
and matches the footage, which opens on a bright white studio. */
background:
url("/static/image/landing-studio.jpg") center / cover no-repeat,
linear-gradient(150deg, #f2efec, #ddd6d0);
/* Neutral shadow, not maroon-tinted — the footage carries its own colour
and a red-cast shadow under it read as a printing error. */
box-shadow: 0 18px 40px rgba(32, 20, 16, .16);
isolation: isolate;
}
.landing-motion-video {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
}
.landing-motion-toggle {
position: absolute;
inset-inline-end: .65rem;
bottom: .65rem;
z-index: 2;
width: 44px;
height: 44px;
display: grid;
place-items: center;
border: 1px solid rgba(255,255,255,.72);
border-radius: 999px;
color: #fff;
background: rgba(26,29,38,.68);
box-shadow: 0 5px 16px rgba(0,0,0,.18);
backdrop-filter: blur(8px);
cursor: pointer;
}
.landing-motion-toggle:hover { background: rgba(85,0,0,.82); }
.landing-motion-toggle:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }
.landing-motion-toggle span { font-size: 1rem; line-height: 1; }
/* On mobile the result becomes a small floating "magic phone" beside one
compact action strip. It keeps the final image visible without taking a
second screen's worth of height. */
@media (max-width: 720px) {
.konvrt-workspace-body {
grid-template-rows: minmax(0, 1fr) 116px !important;
}
.konvrt-phone-pane {
position: relative;
isolation: isolate;
width: auto !important;
height: 108px !important;
min-height: 108px !important;
margin: 0 .42rem .42rem;
padding: .5rem .52rem !important;
/* Four areas rather than two columns. The reference and the result are
in different DOM subtrees (the JS moves #generated-image-frame into
the phone frame), so they are flattened onto this grid with
display:contents below and placed side by side here — the only way
to pair them without changing the shared desktop markup. */
/* Reads left to right as what actually happens: your photo, the button
that transforms it, the result. Generate sits *between* the two
tiles because it is the step between them — putting it off to one
side with a caption above was what made this bar read as a form. */
display: grid !important;
grid-template-columns: 56px minmax(0, 1fr) 56px !important;
grid-template-rows: minmax(0, 1fr) !important;
grid-template-areas: "ref btn gen" !important;
align-items: stretch !important;
column-gap: .66rem !important;
overflow: visible !important;
border: 1px solid color-mix(in srgb, var(--accent) 18%, var(--line)) !important;
border-radius: 24px !important;
background:
linear-gradient(122deg,
color-mix(in srgb, var(--surface) 90%, var(--accent) 10%),
color-mix(in srgb, var(--bg) 82%, #f1d7c9 18%)) !important;
box-shadow:
0 -12px 34px rgba(85, 0, 0, .1),
inset 0 1px 0 rgba(255,255,255,.72);
}
.konvrt-phone-pane::before {
content: "";
position: absolute;
z-index: -1;
width: 118px;
height: 118px;
inset-inline-end: -12px;
top: -10px;
border-radius: 50%;
background: radial-gradient(circle,
color-mix(in srgb, var(--accent) 24%, transparent),
transparent 68%);
filter: blur(5px);
pointer-events: none;
}
/* These three wrappers are dissolved so their contents become direct
items of the pane grid above. They exist to group things on desktop;
on a 108px bar they only nest boxes and force the reference and the
result apart. */
.konvrt-preview-tools {
display: contents !important;
}
.konvrt-preview-tools .generated-prompt-panel:not(.hidden) {
display: contents !important;
}
.konvrt-preview-tools .generated-prompt-layout {
display: contents !important;
}
/* No matter where this text went it read as a heading for the button
under it. So it stops being text: it becomes a badge on the corner of
the thumbnail it acts on, the way replacing a profile photo works. */
.konvrt-preview-tools .generated-prompt-head {
grid-area: ref;
z-index: 4;
align-self: start;
justify-self: end;
display: block !important;
width: auto !important;
height: auto !important;
min-height: 0;
margin: -5px -5px 0 0;
padding: 0;
border: 0;
border-radius: 0;
background: transparent;
box-shadow: none;
}
/* Duplicated the size already shown by the selected tile above this bar
— dropped rather than shrunk further. */
.konvrt-preview-tools .generated-prompt-copy {
display: none !important;
}
/* font-size:0 hides the words but keeps them as the button's accessible
name, so screen readers still announce "Upload new image" while the
glyph carries it visually. */
.konvrt-preview-tools #start-again-btn {
width: 22px !important;
height: 22px !important;
min-height: 0 !important;
padding: 0 !important;
display: grid !important;
place-items: center;
border: 0 !important;
border-radius: 50% !important;
background: var(--brand) !important;
color: #fff !important;
font-size: 0 !important;
line-height: 0;
box-shadow: 0 2px 7px rgba(85, 0, 0, .34);
}
.konvrt-preview-tools #start-again-btn::before {
content: "⟳";
font-size: 12px;
font-weight: 700;
line-height: 1;
}
/* Reference and result: same box, same size, side by side, so the bar
reads as before -> after the way the desktop comparison does. */
.konvrt-preview-tools .image-comparison-item.is-reference {
grid-area: ref;
position: relative;
display: block !important;
min-width: 0;
}
.konvrt-preview-tools .image-comparison-item.is-reference .image-comparison-head,
.konvrt-preview-tools .image-comparison-item.is-reference .image-comparison-caption {
display: none !important;
}
.konvrt-preview-tools #improvement-reference-frame {
width: 100% !important;
height: 100% !important;
aspect-ratio: auto !important;
border: 1px solid color-mix(in srgb, var(--line) 68%, transparent) !important;
border-radius: 13px !important;
background: color-mix(in srgb, var(--surface) 78%, var(--bg)) !important;
box-shadow: none !important;
}
.konvrt-preview-tools #improvement-reference-image {
width: 100% !important;
height: 100% !important;
object-fit: cover !important;
}
/* Chevrons in each gap carry the eye through the sequence. They are
pseudo-elements on the tiles either side, so they need no markup. */
.konvrt-preview-tools .image-comparison-item.is-reference::after,
.konvrt-phone-frame::before {
content: "›";
position: absolute;
z-index: 3;
top: 50%;
display: grid !important;
place-items: center;
width: .66rem;
color: color-mix(in srgb, var(--accent) 70%, var(--muted));
font-size: .95rem;
font-weight: 700;
line-height: 1;
pointer-events: none;
}
.konvrt-preview-tools .image-comparison-item.is-reference::after {
inset-inline-end: -.66rem;
transform: translateY(-50%);
}
.konvrt-phone-frame::before {
inset-inline-start: -.66rem;
left: auto;
height: auto;
background: none;
border-radius: 0;
transform: translateY(-50%);
}
[dir="rtl"] .konvrt-preview-tools .image-comparison-item.is-reference::after,
[dir="rtl"] .konvrt-phone-frame::before {
content: "‹";
}
.konvrt-preview-tools .image-comparison-item.is-generated {
grid-area: btn;
display: flex !important;
align-items: center;
min-width: 0;
}
.konvrt-preview-tools .image-comparison-item.is-generated .image-comparison-head {
width: 100%;
min-width: 0;
display: flex;
align-items: center;
gap: .38rem;
}
.konvrt-preview-tools .image-comparison-item.is-generated > .image-comparison-caption {
display: none !important;
}
/* 38px was under the 44px touch-target floor, and .47rem text on the
label above was unreadable — both are real defects, not polish. */
/* The hero of the bar: it fills the span between the two tiles and is the
tallest thing in the row, so the eye lands on it before anything else. */
.konvrt-preview-tools #generate-image-btn {
width: 100% !important;
min-height: 52px !important;
padding: .4rem .7rem !important;
border: 0 !important;
border-radius: 15px !important;
font-size: .88rem !important;
font-weight: 800 !important;
line-height: 1.15;
letter-spacing: .01em;
background: linear-gradient(112deg, var(--brand), color-mix(in srgb, var(--accent) 76%, #b05c45)) !important;
box-shadow: 0 10px 22px color-mix(in srgb, var(--accent) 24%, transparent) !important;
}
/* The result preview used to be a miniature plastic phone — a dark
bezel, a notch, a rotated frame — none of which say anything about
the actual photo, the one thing this pane exists to show. It is a
plain rounded tile now, matching the reference thumb next to it. */
/* ::before is reclaimed above as the second chevron; it used to draw a
fake phone side-button. */
.konvrt-phone-label,
.konvrt-phone-island,
.konvrt-phone-frame::after {
display: none !important;
}
.konvrt-phone-frame {
grid-area: gen;
position: relative;
justify-self: stretch;
align-self: stretch;
width: 100% !important;
height: 100% !important;
min-height: 0 !important;
max-height: none !important;
padding: 0 !important;
/* visible, not hidden: the ::before chevron sits outside this box.
.konvrt-phone-screen does the actual image clipping. */
overflow: visible !important;
border: 1px solid color-mix(in srgb, var(--line) 68%, transparent) !important;
border-radius: 13px !important;
background: color-mix(in srgb, var(--surface) 92%, var(--bg)) !important;
box-shadow: none !important;
transform: none !important;
aspect-ratio: auto !important;
}
[dir="rtl"] .konvrt-phone-frame {
transform: none !important;
}
.konvrt-phone-screen {
width: 100%;
height: 100%;
overflow: hidden;
border-radius: 12px !important;
background: transparent !important;
}
.konvrt-phone-screen #generated-image-frame {
width: 100% !important;
height: 100% !important;
border: 0 !important;
border-radius: 12px !important;
background: transparent !important;
}
/* At 58px wide there is no room for a sentence — the star alone carries
"result goes here", and the words were unreadable at any size that
fit. */
.konvrt-phone-screen #generated-image-frame.is-empty .generated-image-placeholder {
width: 100% !important;
height: 100%;
padding: 0 !important;
display: grid !important;
place-items: center;
font-size: 0 !important;
}
.konvrt-phone-screen #generated-image-frame.is-empty .generated-image-placeholder::before {
content: "✦";
color: color-mix(in srgb, var(--accent) 62%, var(--muted));
font-size: 1.15rem;
line-height: 1;
text-shadow: 0 0 15px color-mix(in srgb, var(--accent) 40%, transparent);
}
.konvrt-phone-screen #generated-image-result {
object-fit: cover !important;
}
}
/* Mobile dock, final word. The bar above pins itself to 108px, which left
no room for the history row and cropped the render to fill the tile.
The dock now grows only when there is history, and the render keeps its
real ratio here too — a story must read as tall, not as a square crop. */
@media (max-width: 720px) {
.konvrt-workspace-body {
grid-template-rows: minmax(0, 1fr) auto !important;
}
.konvrt-phone-pane {
height: auto !important;
min-height: 108px;
display: grid !important;
grid-template-columns: minmax(0, 1fr) 96px;
grid-template-rows: minmax(104px, auto) auto;
align-items: center;
gap: .45rem;
}
.konvrt-preview-tools { grid-column: 1; grid-row: 1; }
.konvrt-phone-frame {
grid-column: 2;
grid-row: 1;
justify-self: stretch;
align-self: stretch;
height: 100% !important;
max-height: none !important;
}
/* Stale dock-era placement removed: the rail lives in the
composition's named "history" area now. */
.konvrt-history-rail {
height: auto;
}
.konvrt-history-track {
height: auto;
max-height: none;
flex-direction: row;
justify-content: flex-start;
overflow-x: auto;
overflow-y: hidden;
scroll-snap-type: x proximity;
padding: .1rem .1rem .22rem;
}
.konvrt-history-track::-webkit-scrollbar { width: auto; height: 4px; }
.konvrt-phone-screen #generated-image-result {
width: auto !important;
height: auto !important;
max-width: 100%;
max-height: 100%;
object-fit: contain !important;
border-radius: 9px;
box-shadow: 0 4px 12px rgba(20, 18, 18, .22);
}
}
@media (max-width: 560px) {
/* Was full-bleed at 100vw; pulled in slightly so the rounded corners sit
inside the screen edge instead of touching it. The negative margin
still cancels the shell's own padding, then the fixed inset opens the
gap the corners need. */
.landing-motion {
width: calc(100vw - 1.5rem);
margin-inline: calc(50% - 50vw + .75rem);
}
.landing-motion-stage {
border-radius: 18px;
box-shadow: 0 10px 26px rgba(32, 20, 16, .14);
}
}
@media (max-width: 430px) {
.konvrt-workspace-body {
grid-template-rows: minmax(0, 1fr) 108px !important;
}
.konvrt-phone-pane {
height: 100px !important;
min-height: 100px !important;
margin: 0 .32rem .32rem;
padding: .42rem !important;
grid-template-columns: 48px minmax(0, 1fr) 48px !important;
grid-template-areas: "ref btn gen" !important;
column-gap: .56rem !important;
border-radius: 21px !important;
}
.konvrt-preview-tools .image-comparison-item.is-reference::after {
inset-inline-end: -.56rem;
}
.konvrt-phone-frame::before {
inset-inline-start: -.56rem;
}
.konvrt-preview-tools #start-again-btn {
width: 20px !important;
height: 20px !important;
}
/* Kept at 44px even here — the smallest phones are exactly where a
cramped touch target hurts most, not where it should shrink further. */
.konvrt-preview-tools #generate-image-btn {
min-height: 44px !important;
padding: .32rem .5rem !important;
font-size: .7rem !important;
}
}
/* Final compact preview composition: the device is reserved for the
generated picture, while its input, action and history stay visibly
attached to it instead of consuming a second, distant column. */
.konvrt-phone-pane {
display: flex;
align-items: center;
justify-content: flex-start;
gap: .42rem;
overflow: visible;
padding-inline: .45rem;
}
.konvrt-preview-tools {
width: min(100%, 330px);
flex: 0 0 auto;
}
.konvrt-preview-tools .generated-prompt-panel {
padding: .38rem .45rem !important;
gap: .34rem !important;
}
.konvrt-preview-tools #generate-image-btn {
min-height: 32px !important;
padding: .28rem .48rem !important;
font-size: .56rem !important;
border-radius: 8px;
}
/* The reference is deliberately a tiny device-shaped preview, rather than
a competing full-size image beside the result. */
/* The tiny dark-bezel reference thumbnail is gone: the uploaded image is
a full card in the comparison grid, sized by its own content. */
.konvrt-phone-frame {
position: relative;
flex: 0 1 auto;
align-self: center;
}
/* The rail was once pinned beside the device with position: absolute.
It is a normal grid row now ("history" area) — never reposition it. */
/* An empty phone should be calm. The generated image itself remains and
appears here as soon as a new or saved result is selected. */
.konvrt-phone-screen #generated-image-frame.is-empty .generated-image-placeholder {
display: none !important;
}
@media (max-width: 720px) {
.konvrt-phone-pane { overflow: visible; }
}
/* Output size belongs with the output action. Keep all five formats in a
compact strip directly above the generate controls. */
.konvrt-preview-tools #output-size-section {
width: 100%;
max-width: none;
margin: 0 !important;
padding: .25rem !important;
border: 1px solid color-mix(in srgb, var(--line) 70%, transparent) !important;
border-radius: 12px !important;
background: color-mix(in srgb, var(--surface) 88%, var(--bg)) !important;
}
.konvrt-preview-tools #output-size-section .size-choice-row {
display: grid !important;
grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
gap: .2rem !important;
margin: 0 !important;
}
.konvrt-preview-tools #output-size-section .size-choice {
min-width: 0;
min-height: 34px;
padding: .2rem .1rem;
grid-template-columns: 16px minmax(0, 1fr);
gap: .18rem;
border-radius: 8px;
}
.konvrt-preview-tools #output-size-section .size-choice-icon {
width: 16px;
height: 16px;
border-radius: 5px;
}
.konvrt-preview-tools #output-size-section .size-choice-icon svg {
width: 10px;
height: 10px;
}
.konvrt-preview-tools #output-size-section .size-choice-copy {
display: grid;
gap: 0;
}
.konvrt-preview-tools #output-size-section .size-choice-title {
font-size: .5rem;
}
.konvrt-preview-tools #output-size-section .size-choice-ratio {
font-size: .44rem;
opacity: .68;
}
/* Full-space output mode: remove the floating white control card and let
the phone be the clear destination for this whole side of the studio. */
.konvrt-phone-pane {
min-height: min(72vh, 680px);
padding-top: .25rem;
justify-content: flex-start;
background: transparent !important;
}
.konvrt-preview-tools .generated-prompt-panel {
border: 0 !important;
border-radius: 0 !important;
background: transparent !important;
box-shadow: none !important;
}
.konvrt-preview-tools .generated-prompt-head {
padding-inline: .1rem;
}
.konvrt-phone-frame {
height: min(62vh, 610px) !important;
max-height: calc(100dvh - var(--site-header-h, 58px) - 110px) !important;
min-height: 420px;
flex: 0 0 auto;
}
.konvrt-phone-screen {
background: color-mix(in srgb, var(--surface) 96%, var(--bg) 4%);
}
@media (max-width: 720px) {
.konvrt-phone-pane {
min-height: 0;
}
.konvrt-phone-frame {
height: min(58vh, 520px) !important;
min-height: 300px;
}
}
/* Use the preview column edge-to-edge. The handset grows with the column
instead of being surrounded by a second layer of empty side padding. */
@media (min-width: 721px) {
.konvrt-phone-pane {
padding-inline: 0 !important;
gap: .28rem;
}
.konvrt-phone-frame {
/* Leave room for the compact controls above the device so the entire
handset, including its bottom edge, remains visible in the viewport. */
height: min(60vh, 540px) !important;
min-height: 0;
max-height: calc(100dvh - var(--site-header-h, 58px) - 180px) !important;
}
}
/* A quieter, denser workspace header and size picker. */
#output-size-section > .improve-section-label {
display: none !important;
}
#output-size-section {
margin: 0 !important;
padding-block: .2rem !important;
}
#output-size-section .size-choice-row {
gap: .18rem !important;
}
.konvrt-mode-bar {
min-height: 56px !important;
}
.konvrt-mode-bar .prompt-mode-btn {
min-height: 56px !important;
padding-block: .28rem !important;
}
.konvrt-mode-bar .prompt-mode-icon {
width: 28px !important;
height: 28px !important;
}
/* Empty state: no broken-image alt text, only the requested preview cue. */
.konvrt-phone-screen #generated-image-frame.is-empty .generated-image-placeholder {
display: grid !important;
place-items: center;
width: min(78%, 210px) !important;
height: auto;
padding: .6rem !important;
color: var(--muted);
font-size: .62rem !important;
line-height: 1.35;
text-align: center;
background: transparent !important;
box-shadow: none !important;
}
.konvrt-phone-screen #generated-image-frame.is-empty .generated-image-placeholder::before {
content: none !important;
}
.konvrt-phone-screen #generated-image-frame.is-empty {
position: absolute;
inset: 0;
width: 100% !important;
height: 100% !important;
aspect-ratio: auto !important;
display: grid;
place-items: center;
}
.konvrt-phone-screen #generated-image-frame.is-empty .generated-image-placeholder {
align-self: center;
justify-self: center;
margin: 0;
}
.konvrt-history-thumb {
overflow: hidden;
}
.konvrt-history-thumb .konvrt-history-image {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
background: color-mix(in srgb, var(--surface) 86%, var(--bg));
}
.konvrt-history-thumb .konvrt-history-ratio {
position: absolute;
right: 2px;
bottom: 2px;
z-index: 1;
padding: 1px 3px;
border-radius: 4px;
color: #fff;
font-size: .38rem;
line-height: 1;
background: rgba(0,0,0,.62);
}
@media (min-width: 721px) {
.konvrt-history-thumb .konvrt-history-ratio {
right: 3px;
bottom: 3px;
font-size: .46rem;
}
}
/* Compact navigation: a centered segmented control with clear active
state, instead of four oversized full-width tabs. */
.konvrt-mode-bar {
min-height: 50px !important;
padding: .35rem clamp(.6rem, 2vw, 1.25rem) !important;
display: flex !important;
justify-content: center;
align-items: center;
background: transparent !important;
}
.konvrt-mode-bar .prompt-mode-switch,
.hero-step-improve .konvrt-mode-bar .prompt-mode-switch {
width: min(720px, 100%) !important;
height: auto !important;
padding: .22rem !important;
gap: .22rem !important;
border: 1px solid color-mix(in srgb, var(--line) 76%, transparent) !important;
border-radius: 14px !important;
background: color-mix(in srgb, var(--surface) 90%, var(--bg)) !important;
box-shadow: 0 5px 16px rgba(35, 25, 25, .05);
}
.konvrt-mode-bar .prompt-mode-btn {
min-height: 38px !important;
padding: .28rem .48rem !important;
gap: .34rem !important;
border: 0 !important;
border-radius: 10px !important;
box-shadow: none !important;
}
.konvrt-mode-bar .prompt-mode-btn.is-active {
background: color-mix(in srgb, var(--mode-color) 13%, var(--surface)) !important;
box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--mode-color) 34%, transparent),
0 3px 9px color-mix(in srgb, var(--mode-color) 10%, transparent) !important;
}
.konvrt-mode-bar .prompt-mode-icon {
width: 24px !important;
height: 24px !important;
flex-basis: 24px !important;
border-radius: 8px !important;
}
.konvrt-mode-bar .prompt-mode-icon svg { width: 13px; height: 13px; }
.konvrt-mode-bar .prompt-mode-btn strong { font-size: .68rem !important; }
/* Output formats are compact chips: one scan line, small touch targets and
no large empty boxes between the label and ratio. */
.konvrt-controls-pane #output-size-section {
width: fit-content;
max-width: 100%;
padding: .3rem !important;
border: 1px solid color-mix(in srgb, var(--line) 70%, transparent) !important;
border-radius: 13px !important;
background: color-mix(in srgb, var(--surface) 88%, var(--bg)) !important;
}
.konvrt-controls-pane #output-size-section .size-choice-row {
display: flex !important;
flex-wrap: nowrap;
align-items: center;
gap: .28rem !important;
margin: 0 !important;
}
.konvrt-controls-pane #output-size-section .size-choice {
width: auto;
min-width: 98px;
min-height: 36px;
padding: .28rem .38rem;
grid-template-columns: 20px auto;
align-items: center;
gap: .3rem;
border-radius: 9px;
}
.konvrt-controls-pane #output-size-section .size-choice-icon {
width: 20px;
height: 20px;
border-radius: 6px;
}
.konvrt-controls-pane #output-size-section .size-choice-icon svg {
width: 12px;
height: 12px;
}
.konvrt-controls-pane #output-size-section .size-choice-copy {
display: flex;
align-items: baseline;
gap: .24rem;
}
.konvrt-controls-pane #output-size-section .size-choice-title { font-size: .6rem; }
.konvrt-controls-pane #output-size-section .size-choice-ratio {
font-size: .52rem;
opacity: .68;
}
/* Modern, simple Quick picks (owner request 2026-08-27): no boxed cards,
no colored spines — flat sections split by hairlines, the color coding
lives only in each group's small icon chip, and the photographs ARE
the tiles. */
.look-preset-groups.is-all-visible {
gap: .8rem;
margin-top: .5rem;
}
.look-preset-groups.is-all-visible .look-preset-group {
--group-tone: #8a4f46;
padding: 0 0 .8rem !important;
grid-template-columns: 104px minmax(0, 1fr);
align-items: start;
gap: .6rem;
border: 0 !important;
border-bottom: 1px solid color-mix(in srgb, var(--line) 58%, transparent) !important;
border-radius: 0;
background: transparent;
box-shadow: none;
}
.look-preset-groups.is-all-visible .look-preset-group:last-child {
border-bottom: 0 !important;
padding-bottom: .1rem !important;
}
.look-preset-groups.is-all-visible .look-preset-group:nth-child(2) { --group-tone: #b36b32; }
.look-preset-groups.is-all-visible .look-preset-group:nth-child(3) { --group-tone: #4a72a8; }
.look-preset-groups.is-all-visible .look-preset-group:nth-child(4) { --group-tone: #7c529d; }
.look-preset-groups.is-all-visible .look-preset-group:nth-child(5) { --group-tone: #168d7f; }
.look-preset-group-head {
min-height: 34px;
padding: 0;
color: var(--group-tone);
}
.look-preset-group-head strong {
color: var(--text);
font-size: .68rem;
}
.look-preset-group-icon {
width: 29px;
height: 29px;
flex-basis: 29px;
color: var(--group-tone);
background: color-mix(in srgb, var(--group-tone) 12%, transparent);
}
.look-preset-groups.is-all-visible .look-preset-swatch { height: auto; }
/* Tiles: just the photograph and its name. The little icon chip on every
image was noise; the group icon already says what the row is. */
.look-preset-groups.is-all-visible .look-preset-icon { display: none; }
.look-preset-groups.is-all-visible .look-preset-choice {
padding: 0 !important;
gap: .3rem;
border: 0 !important;
border-radius: 12px;
background: transparent !important;
outline: 0 !important;
box-shadow: none !important;
}
.look-preset-groups.is-all-visible .look-preset-choice .look-preset-swatch {
border-radius: 12px;
transition: transform .16s ease, box-shadow .16s ease;
}
.look-preset-groups.is-all-visible .look-preset-choice:hover .look-preset-swatch {
transform: translateY(-2px);
box-shadow: 0 8px 18px rgba(30, 15, 10, .14);
}
.look-preset-groups.is-all-visible .look-preset-choice strong {
text-align: center;
color: var(--muted);
transition: color .16s ease;
}
.look-preset-groups.is-all-visible .look-preset-choice:hover strong { color: var(--text); }
/* Selection stays unmissable: accent ring around the photo, the tick
badge on the image, and the label in accent. */
.look-preset-groups.is-all-visible .look-preset-choice.is-active .look-preset-swatch {
outline: 2px solid var(--accent);
outline-offset: 2px;
}
.look-preset-groups.is-all-visible .look-preset-choice.is-active strong {
color: var(--accent);
font-weight: 850;
}
@media (prefers-reduced-motion: reduce) {
.look-preset-groups.is-all-visible .look-preset-choice:hover .look-preset-swatch {
transform: none;
}
}
/* The complete preview toolbar spans its column and aligns its actions with
the handset/history composition below. */
.konvrt-phone-pane { width: 100%; }
.konvrt-preview-tools {
width: 100% !important;
max-width: none;
}
.konvrt-preview-tools .generated-prompt-panel { width: 100% !important; }
.konvrt-preview-tools .image-comparison-item.is-generated .image-comparison-head {
display: flex;
align-items: center;
gap: .35rem;
}
.konvrt-preview-tools #generate-image-btn { flex: 1 1 auto; }
.konvrt-phone-frame { margin-inline-end: 62px; }
@media (max-width: 720px) {
.konvrt-mode-bar .prompt-mode-btn strong { font-size: .56rem !important; }
.konvrt-controls-pane #output-size-section {
width: 100%;
overflow-x: auto;
}
.konvrt-controls-pane #output-size-section .size-choice { min-width: 88px; }
.look-preset-groups.is-all-visible .look-preset-group {
grid-template-columns: 1fr;
align-items: start;
}
.konvrt-phone-frame { margin-inline-end: 38px; }
}
/* Generation modes live in the persistent header, leaving the workspace
canvas free for the actual controls and result. */
.site-header-inner > .konvrt-mode-bar {
grid-column: 2;
grid-row: 1;
align-self: center;
justify-self: center;
width: min(680px, 100%);
min-height: 0 !important;
margin: 0 !important;
padding: 0 !important;
border: 0 !important;
pointer-events: auto;
z-index: 4;
}
.site-header-inner > .konvrt-mode-bar .prompt-mode-switch,
.hero-step-improve .site-header-inner > .konvrt-mode-bar .prompt-mode-switch {
width: 100% !important;
padding: .16rem !important;
border-radius: 11px !important;
box-shadow: none;
}
.site-header-inner > .konvrt-mode-bar .prompt-mode-btn {
min-height: 32px !important;
padding: .2rem .38rem !important;
border-radius: 8px !important;
}
.site-header-inner > .konvrt-mode-bar .prompt-mode-icon {
width: 21px !important;
height: 21px !important;
flex-basis: 21px !important;
}
.site-header-inner > .konvrt-mode-bar .prompt-mode-icon svg {
width: 11px;
height: 11px;
}
.site-header-inner > .konvrt-mode-bar .prompt-mode-btn strong {
font-size: .62rem !important;
}
body.landing-active .site-header-inner > .konvrt-mode-bar {
display: none !important;
}
@media (max-width: 720px) {
.site-header-inner > .konvrt-mode-bar {
width: calc(100% - 118px);
}
.site-header-inner > .konvrt-mode-bar .prompt-mode-btn {
padding-inline: .2rem !important;
}
.site-header-inner > .konvrt-mode-bar .prompt-mode-btn strong {
display: none !important;
}
}
/* Clean output composition: no tinted canvas behind the two workspace
columns and no card background around the format selector. */
.konvrt-workspace-body,
.konvrt-controls-pane,
.konvrt-phone-pane {
background: transparent !important;
box-shadow: none !important;
}
.konvrt-preview-tools #output-size-section {
padding: 0 !important;
border: 0 !important;
border-radius: 0 !important;
background: transparent !important;
box-shadow: none !important;
}
.konvrt-preview-tools #output-size-section .size-choice-row {
gap: .3rem !important;
}
.konvrt-preview-tools #output-size-section .size-choice {
min-height: 43px;
padding: .3rem .18rem;
grid-template-columns: 20px minmax(0, 1fr);
gap: .24rem;
border-radius: 10px;
}
.konvrt-preview-tools #output-size-section .size-choice-icon {
width: 20px;
height: 20px;
border-radius: 6px;
}
.konvrt-preview-tools #output-size-section .size-choice-icon svg {
width: 12px;
height: 12px;
}
.konvrt-preview-tools #output-size-section .size-choice-title {
font-size: .56rem;
}
.konvrt-preview-tools #output-size-section .size-choice-ratio {
font-size: .49rem;
}
/* The generation action is intentionally compact and centered. */
.konvrt-preview-tools .image-comparison-item.is-generated .image-comparison-head {
justify-content: center;
}
.konvrt-preview-tools #generate-image-btn {
flex: 0 0 auto;
width: auto !important;
min-width: 132px;
min-height: 30px !important;
padding: .25rem .62rem !important;
font-size: .54rem !important;
border-radius: 8px;
}
/* Enlarge the uploaded reference while retaining the phone-shaped frame. */
@media (max-width: 720px) {
.konvrt-preview-tools #generate-image-btn {
min-width: 110px;
}
}
/* Natural full-page workspace: remove the remaining signed-in gradient,
start immediately below the header, and keep the legal footer reachable. */
body:not(.landing-active),
body.konvrt-workspace-active {
height: auto !important;
min-height: 100dvh;
overflow-x: hidden !important;
overflow-y: auto !important;
background: var(--bg) !important;
}
body.konvrt-workspace-active > main.wrap {
flex: 0 0 auto;
width: 100%;
height: auto !important;
min-height: calc(100dvh - var(--site-header-h, 58px));
overflow: visible !important;
}
body.konvrt-workspace-active .page-shell,
body.konvrt-workspace-active .page-left,
body.konvrt-workspace-active #upload-workspace,
body.konvrt-workspace-active .control-hero,
body.konvrt-workspace-active .hero-steps,
body.konvrt-workspace-active .hero-step-improve,
body.konvrt-workspace-active .hero-step-improve > .workflow-card-content,
body.konvrt-workspace-active #workflow-improve-panels,
body.konvrt-workspace-active #ai-relocation-card {
width: 100% !important;
max-width: none !important;
height: auto !important;
min-height: 0;
overflow: visible !important;
}
body.konvrt-workspace-active #ai-relocation-card {
display: block !important;
}
body.konvrt-workspace-active .konvrt-workspace-body {
min-height: calc(100dvh - var(--site-header-h, 58px));
padding-top: 0 !important;
overflow: visible;
background: transparent !important;
}
body.konvrt-workspace-active .konvrt-controls-pane,
body.konvrt-workspace-active .konvrt-phone-pane {
padding-top: 0 !important;
overflow: visible;
background: transparent !important;
}
body.konvrt-workspace-active .konvrt-phone-pane::before,
body.konvrt-workspace-active .konvrt-phone-pane::after,
body.konvrt-workspace-active .konvrt-workspace-body::before,
body.konvrt-workspace-active .konvrt-workspace-body::after {
display: none !important;
background: none !important;
}
body:not(.landing-active) > .site-legal-footer,
body.konvrt-workspace-active > .site-legal-footer {
display: block !important;
flex: 0 0 auto;
}
@media (max-width: 720px) {
body.konvrt-workspace-active .konvrt-workspace-body {
min-height: 0;
}
}
/* One-screen application shell: header, studio and footer all fit in the
viewport, with no document scrollbar. */
body.konvrt-workspace-active {
height: 100dvh !important;
min-height: 100dvh !important;
overflow: hidden !important;
}
body.konvrt-workspace-active > main.wrap {
flex: 1 1 auto;
height: auto !important;
min-height: 0 !important;
overflow: hidden !important;
}
body.konvrt-workspace-active .page-shell,
body.konvrt-workspace-active .page-left,
body.konvrt-workspace-active #upload-workspace,
body.konvrt-workspace-active .control-hero,
body.konvrt-workspace-active .hero-steps,
body.konvrt-workspace-active .hero-step-improve,
body.konvrt-workspace-active .hero-step-improve > .workflow-card-content,
body.konvrt-workspace-active #workflow-improve-panels,
body.konvrt-workspace-active #ai-relocation-card,
body.konvrt-workspace-active .konvrt-workspace-body {
height: 100% !important;
min-height: 0 !important;
overflow: hidden !important;
}
body.konvrt-workspace-active .konvrt-controls-pane,
body.konvrt-workspace-active .konvrt-phone-pane {
min-height: 0;
overflow: hidden !important;
}
body.konvrt-workspace-active > .site-legal-footer {
display: block !important;
flex: 0 0 auto;
margin: 0 !important;
}
/* Larger, easier-to-scan output-format controls. */
.konvrt-preview-tools #output-size-section .size-choice {
min-height: 52px;
padding: .38rem .22rem;
grid-template-columns: 24px minmax(0, 1fr);
gap: .3rem;
border-radius: 11px;
}
.konvrt-preview-tools #output-size-section .size-choice-icon {
width: 24px;
height: 24px;
border-radius: 7px;
}
.konvrt-preview-tools #output-size-section .size-choice-icon svg {
width: 14px;
height: 14px;
}
.konvrt-preview-tools #output-size-section .size-choice-title {
font-size: .62rem;
}
.konvrt-preview-tools #output-size-section .size-choice-ratio {
font-size: .54rem;
}
/* The old generated-prompt-head layout is gone; the comparison grid now
places the reference item via grid-area, so nothing may pin it to a
fixed cell here (a leftover `grid-column: 2 !important` once threw the
uploaded image into the generated column). */
/* Full format names remain readable by stacking each icon above its copy. */
.konvrt-preview-tools #output-size-section .size-choice {
min-height: 64px;
padding: .38rem .2rem;
grid-template-columns: minmax(0, 1fr);
grid-template-rows: 25px auto;
justify-items: center;
align-content: center;
gap: .2rem;
text-align: center;
}
.konvrt-preview-tools #output-size-section .size-choice-copy {
width: 100%;
display: grid;
justify-items: center;
gap: .02rem;
text-align: center;
}
.konvrt-preview-tools #output-size-section .size-choice-title {
width: 100%;
overflow: visible;
font-size: .6rem;
line-height: 1.05;
white-space: normal;
overflow-wrap: anywhere;
}
.konvrt-preview-tools #output-size-section .size-choice-ratio {
font-size: .54rem;
line-height: 1;
}
/* The old size read-out header stays hidden; the reference item is now a
full card placed by the comparison grid below, so nothing pins it to a
72px corner thumbnail anymore. */
.konvrt-preview-tools .generated-prompt-copy {
display: none !important;
}
.konvrt-preview-tools .image-comparison-item.is-reference {
padding: 0 !important;
border: 0 !important;
background: transparent !important;
box-shadow: none !important;
}
.konvrt-preview-tools #improvement-reference-frame {
background: color-mix(in srgb, var(--bg) 84%, var(--surface) 16%) !important;
box-shadow: none !important;
}
.konvrt-preview-tools #improvement-reference-image {
object-fit: contain !important;
}
/* Two-column preview composition requested by the workspace layout:
generated phone on the left, source/history utilities on the right. */
.konvrt-phone-pane {
display: block !important;
padding-inline: .45rem !important;
}
.konvrt-preview-tools,
.konvrt-preview-tools .generated-prompt-panel {
width: 100% !important;
height: 100%;
min-height: 0;
}
.konvrt-preview-tools {
/* Bands stack and hug their content. The brand row makes the child
count variable, so no fixed row template — a 1fr track once caught
the ad card and stretched it into a huge empty box. */
display: flex;
flex-direction: column;
gap: .42rem;
}
.konvrt-preview-tools .generated-prompt-panel {
padding: 0 !important;
overflow: visible;
}
/* Two-up comparison (owner request 2026-08-12): no device chrome anymore.
Actions on top, uploaded reference and generated render side by side as
equal cards, history strip spanning below — the same arrangement the
phone layout uses. The primary/side wrappers only group DOM for the
mobile CSS; display: contents lets this grid place their children. */
.konvrt-phone-composition {
width: 100%;
height: 100%;
min-height: 0;
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
grid-template-areas:
"actions actions"
"reference-label generated-label"
"reference generated"
"save-hint save-hint"
"history history";
align-items: start;
align-content: start;
column-gap: .55rem;
row-gap: .3rem;
}
.konvrt-phone-primary,
.konvrt-phone-side {
display: contents;
}
.konvrt-phone-primary > .image-comparison-head {
grid-area: actions;
width: 100%;
min-height: 0;
display: flex;
align-items: center;
justify-content: center;
gap: .3rem;
}
.konvrt-reference-label { grid-area: reference-label; }
.konvrt-generated-label { grid-area: generated-label; }
.konvrt-save-hint { grid-area: save-hint; }
.konvrt-phone-primary #generated-image-frame {
grid-area: generated;
width: 100% !important;
height: auto !important;
min-height: 0 !important;
max-height: none !important;
margin: 0 !important;
}
.konvrt-phone-side .image-comparison-item.is-reference {
grid-area: reference;
position: static !important;
inset: auto !important;
width: 100% !important;
height: auto !important;
flex: none !important;
margin: 0 !important;
padding: 0 !important;
display: grid;
justify-self: stretch;
}
.konvrt-phone-side .image-comparison-item.is-reference .image-comparison-head,
.konvrt-phone-side .image-comparison-item.is-reference .image-comparison-caption {
display: none !important;
}
/* History is a horizontal strip under both cards; the track scrolls
sideways once the thumbnails overflow. */
.konvrt-phone-side .konvrt-history-rail {
grid-area: history;
position: static !important;
inset: auto !important;
width: 100% !important;
height: auto;
max-height: none;
overflow: hidden;
}
.konvrt-phone-side .konvrt-history-track {
width: 100%;
max-height: none;
display: flex;
flex-direction: row;
align-items: center;
gap: .35rem;
padding: 0 0 .25rem;
overflow-x: auto;
overflow-y: hidden;
overscroll-behavior-inline: contain;
-webkit-overflow-scrolling: touch;
scroll-snap-type: x proximity;
/* A visible thin scrollbar: mouse users need something to grab, and
the wheel handler in app.js covers the rest. */
scrollbar-width: thin;
scrollbar-color: color-mix(in srgb, var(--text) 28%, transparent) transparent;
}
.konvrt-phone-side .konvrt-history-track::-webkit-scrollbar {
display: block;
height: 5px;
}
.konvrt-phone-side .konvrt-history-track::-webkit-scrollbar-thumb {
border-radius: 999px;
background: color-mix(in srgb, var(--text) 28%, transparent);
}
.konvrt-phone-side .konvrt-history-track::-webkit-scrollbar-track {
background: transparent;
}
/* Thumbnails show the whole render, uncropped, tall enough to judge
without clicking it back onto the generated card. */
.konvrt-phone-side .konvrt-history-thumb {
width: auto !important;
min-width: 44px;
height: 96px !important;
flex: 0 0 auto;
scroll-snap-align: start;
}
.konvrt-phone-side .konvrt-history-thumb img,
.konvrt-phone-side .konvrt-history-thumb .konvrt-history-image {
width: auto;
height: 100%;
object-fit: contain;
}
/* Separate sizing from preview, clarify source/history, and use the full
remaining height for the handset. */
.konvrt-preview-tools .generated-prompt-panel {
margin-top: 0 !important;
padding-top: .52rem !important;
border-top: 1px solid color-mix(in srgb, var(--line) 72%, transparent) !important;
}
/* Both cards get a matching quiet caption above them. */
.konvrt-reference-label,
.konvrt-generated-label {
display: block;
width: 100%;
margin: 0;
color: var(--muted);
font-size: .54rem;
font-weight: 750;
line-height: 1.1;
letter-spacing: 0;
text-align: center;
text-transform: none;
}
/* The save hint is an aside, not a heading. */
.konvrt-save-hint {
color: var(--muted) !important;
font-size: .5rem !important;
font-weight: 600 !important;
text-align: center;
}
/* Equal cards: each frame fills its half column and takes its height from
the image (reference) or the chosen format's inline ratio (generated). */
.konvrt-phone-side #improvement-reference-frame {
width: 100% !important;
height: auto !important;
min-height: 120px !important;
max-height: none !important;
/* Empty: mirror the generated card's shape so the two sides match.
Once an image loads, its natural ratio is written as an inline style
by the load handler and wins over this (deliberately un-!important). */
aspect-ratio: var(--gen-aspect, 3 / 4);
border: 1px solid color-mix(in srgb, var(--line) 76%, transparent) !important;
border-radius: 12px !important;
}
/* No upload yet: dashed slot with its centered label, same language as
the generated card's empty state. A src-less ![]()
paints nothing
useful, so it is removed from layout. */
.konvrt-phone-side #improvement-reference-image:not([src]) {
display: none !important;
}
.konvrt-phone-side #improvement-reference-frame:has(#improvement-reference-image:not([src])) {
border-style: dashed !important;
}
.konvrt-phone-side #improvement-reference-frame .image-frame-empty {
padding: .55rem;
color: var(--muted);
font-size: .56rem;
text-align: center;
}
.konvrt-phone-side #improvement-reference-image {
width: 100% !important;
height: auto !important;
max-height: 46vh !important;
object-fit: contain !important;
}
.konvrt-phone-primary #generated-image-frame #generated-image-result {
width: 100%;
height: auto;
max-height: 46vh;
object-fit: contain;
}
/* The empty generated card centers its placeholder inside the dashed box. */
#generated-image-frame.is-empty .generated-image-placeholder {
margin: 0 !important;
padding: .55rem;
font-size: .56rem;
}
.konvrt-phone-side .konvrt-history-rail {
margin-top: .12rem;
padding-top: .45rem;
border-top: 2px solid color-mix(in srgb, var(--text) 48%, var(--line));
}
/* Keep legal links geometrically centered and remove the clipped tagline. */
body.konvrt-workspace-active .site-legal-footer-inner {
position: relative;
display: grid !important;
grid-template-columns: 1fr auto 1fr;
align-items: center;
width: 100%;
}
body.konvrt-workspace-active .site-legal-summary {
grid-column: 1;
justify-self: start;
}
body.konvrt-workspace-active .site-legal-summary span {
display: none !important;
}
body.konvrt-workspace-active .site-legal-footer nav {
grid-column: 2;
justify-self: center;
}
body.konvrt-workspace-active .site-legal-footer small {
grid-column: 3;
justify-self: end;
}
@media (max-width: 720px) {
.konvrt-phone-side .image-comparison-item.is-reference,
.konvrt-phone-side #improvement-reference-frame {
width: 62px !important;
height: 110px !important;
}
.konvrt-phone-side .image-comparison-item.is-reference { flex-basis: 110px; }
body.konvrt-workspace-active .site-legal-summary { display: none; }
}
/* The output pane is part of the same canvas, not a tinted sidebar. */
body.konvrt-workspace-active .konvrt-workspace-body,
body.konvrt-workspace-active .konvrt-phone-pane {
background-color: var(--bg) !important;
background-image: none !important;
backdrop-filter: none !important;
box-shadow: none !important;
}
body.konvrt-workspace-active .konvrt-phone-pane > .konvrt-preview-tools,
body.konvrt-workspace-active .konvrt-preview-tools > .generated-prompt-panel,
body.konvrt-workspace-active .konvrt-phone-composition,
body.konvrt-workspace-active .konvrt-phone-primary,
body.konvrt-workspace-active .konvrt-phone-side {
background-color: transparent !important;
background-image: none !important;
backdrop-filter: none !important;
box-shadow: none !important;
}
body.konvrt-workspace-active .konvrt-phone-pane::before,
body.konvrt-workspace-active .konvrt-phone-pane::after {
content: none !important;
}
.konvrt-history-title {
display: block;
width: 100%;
margin: 0 0 .4rem;
color: var(--muted);
font-size: .54rem;
font-weight: 750;
line-height: 1;
letter-spacing: 0;
text-align: center;
}
/* Remove the obsolete separator above the grid-based workspace.
body.konvrt-app-header lets OTHER pages (Explore) wear this exact
header without the workspace's page-level height/overflow locks. */
body.konvrt-app-header > .site-header,
body.konvrt-app-header .site-header-inner,
body.konvrt-workspace-active > .site-header,
body.konvrt-workspace-active .site-header-inner,
body.konvrt-workspace-active > main.wrap,
body.konvrt-workspace-active .page-shell,
body.konvrt-workspace-active #ai-relocation-card,
body.konvrt-workspace-active .konvrt-workspace-body {
border-top: 0 !important;
border-bottom-color: transparent !important;
box-shadow: none !important;
}
body.konvrt-workspace-active .konvrt-workspace-body {
margin-top: 0 !important;
}
/* Modes now live in the header, so the workspace can use its parent's
exact bounds without a translated, oversized compensation box. */
body.konvrt-workspace-active .hero-step-improve {
margin: 0 !important;
}
body.konvrt-workspace-active .konvrt-workspace-body {
position: relative;
top: 0;
height: 100% !important;
}
/* Balanced application header: equal side columns keep the mode switch
truly centered while preserving comfortable, consistent edge spacing. */
body.konvrt-app-header .site-header-inner,
body.konvrt-workspace-active .site-header-inner,
body.konvrt-workspace-active .site-header-inner.has-workflow-steps {
display: grid !important;
width: 100%;
max-width: none;
min-height: 54px;
margin: 0;
padding: .38rem 1.2rem !important;
grid-template-columns: 112px minmax(420px, 620px) 112px !important;
justify-content: space-between;
align-items: center;
column-gap: 1rem;
}
body.konvrt-app-header .site-header-lead,
body.konvrt-workspace-active .site-header-lead {
position: static !important;
inset: auto !important;
grid-column: 1;
grid-row: 1;
justify-self: start;
transform: none !important;
}
body.konvrt-app-header .site-header-inner > .konvrt-mode-bar,
body.konvrt-workspace-active .site-header-inner > .konvrt-mode-bar {
grid-column: 2;
grid-row: 1;
width: 100%;
justify-self: center;
}
body.konvrt-app-header .site-header-actions,
body.konvrt-workspace-active .site-header-actions {
position: static !important;
inset: auto !important;
grid-column: 3;
grid-row: 1;
justify-self: end;
transform: none !important;
}
/* A page wearing the app header centers the mode bar, so the text nav
stands down exactly as it does on the workspace. */
body.konvrt-app-header .site-header-nav { display: none !important; }
@media (max-width: 900px) {
body.konvrt-app-header .site-header-inner,
body.konvrt-workspace-active .site-header-inner,
body.konvrt-workspace-active .site-header-inner.has-workflow-steps {
padding-inline: .55rem !important;
grid-template-columns: 44px minmax(0, 1fr) 44px !important;
column-gap: .4rem;
}
body.konvrt-app-header .site-header-inner > .konvrt-mode-bar,
body.konvrt-workspace-active .site-header-inner > .konvrt-mode-bar {
width: 100%;
}
body.konvrt-app-header .site-name,
body.konvrt-app-header #lang-btn,
body.konvrt-app-header #theme-btn,
body.konvrt-workspace-active .site-name,
body.konvrt-workspace-active #lang-btn,
body.konvrt-workspace-active #theme-btn {
display: none !important;
}
}
/* Give the format grid a clear beginning without turning it back into a
card. The existing translated label is reused as a quiet caption. */
body.konvrt-workspace-active .konvrt-preview-tools #output-size-section {
padding-top: .42rem !important;
border-top: 1px solid color-mix(in srgb, var(--text) 24%, var(--line)) !important;
}
body.konvrt-workspace-active .konvrt-preview-tools #output-size-section > .improve-section-label,
body.konvrt-workspace-active .konvrt-preview-tools #edit-strength-section > .improve-section-label {
display: block !important;
width: 100%;
margin: 0 0 .3rem;
color: var(--muted);
font-size: .56rem;
font-weight: 750;
line-height: 1;
letter-spacing: 0;
text-align: center;
text-transform: none;
}
html[dir="rtl"] body.konvrt-workspace-active .konvrt-preview-tools #output-size-section > .improve-section-label,
html[dir="rtl"] body.konvrt-workspace-active .konvrt-preview-tools #edit-strength-section > .improve-section-label {
margin-right: 0;
margin-left: 0;
}
/* Header modes are independent navigation pills. Removing the outer
capsule makes each destination easier to distinguish at a glance.
body.konvrt-app-header shares these exact pills with other pages. */
body.konvrt-app-header .site-header-inner > .konvrt-mode-bar .prompt-mode-switch,
body.konvrt-workspace-active .site-header-inner > .konvrt-mode-bar .prompt-mode-switch {
padding: 0 !important;
gap: .38rem !important;
border: 0 !important;
border-radius: 0 !important;
background: transparent !important;
box-shadow: none !important;
}
body.konvrt-app-header .site-header-inner > .konvrt-mode-bar .prompt-mode-btn,
body.konvrt-workspace-active .site-header-inner > .konvrt-mode-bar .prompt-mode-btn {
min-height: 34px !important;
padding: .28rem .55rem !important;
gap: .38rem !important;
border: 1px solid color-mix(in srgb, var(--line) 84%, transparent) !important;
border-radius: 999px !important;
background: color-mix(in srgb, var(--surface) 92%, var(--bg)) !important;
color: color-mix(in srgb, var(--text) 82%, var(--muted)) !important;
box-shadow: 0 2px 7px rgba(35, 25, 25, .035) !important;
transform: none !important;
}
body.konvrt-app-header .site-header-inner > .konvrt-mode-bar .prompt-mode-btn:hover,
body.konvrt-workspace-active .site-header-inner > .konvrt-mode-bar .prompt-mode-btn:hover {
border-color: color-mix(in srgb, var(--mode-color) 42%, var(--line)) !important;
color: var(--mode-color) !important;
background: color-mix(in srgb, var(--mode-color) 7%, var(--surface)) !important;
transform: translateY(-1px) !important;
}
body.konvrt-app-header .site-header-inner > .konvrt-mode-bar .prompt-mode-btn.is-active,
body.konvrt-workspace-active .site-header-inner > .konvrt-mode-bar .prompt-mode-btn.is-active {
border-color: var(--mode-color) !important;
background: var(--mode-color) !important;
color: #fff !important;
box-shadow: 0 5px 13px color-mix(in srgb, var(--mode-color) 24%, transparent) !important;
transform: none !important;
}
body.konvrt-app-header .site-header-inner > .konvrt-mode-bar .prompt-mode-icon,
body.konvrt-workspace-active .site-header-inner > .konvrt-mode-bar .prompt-mode-icon {
width: 20px !important;
height: 20px !important;
flex-basis: 20px !important;
border-radius: 999px !important;
color: var(--mode-color) !important;
background: color-mix(in srgb, var(--mode-color) 12%, transparent) !important;
}
body.konvrt-app-header .site-header-inner > .konvrt-mode-bar .prompt-mode-btn.is-active .prompt-mode-icon,
body.konvrt-workspace-active .site-header-inner > .konvrt-mode-bar .prompt-mode-btn.is-active .prompt-mode-icon {
color: #fff !important;
background: rgba(255, 255, 255, .18) !important;
}
body.konvrt-app-header .site-header-inner > .konvrt-mode-bar .prompt-mode-btn strong,
body.konvrt-workspace-active .site-header-inner > .konvrt-mode-bar .prompt-mode-btn strong {
font-size: .61rem !important;
font-weight: 800;
}
@media (max-width: 720px) {
body.konvrt-app-header .site-header-inner > .konvrt-mode-bar .prompt-mode-switch,
body.konvrt-workspace-active .site-header-inner > .konvrt-mode-bar .prompt-mode-switch {
gap: .18rem !important;
}
body.konvrt-app-header .site-header-inner > .konvrt-mode-bar .prompt-mode-btn,
body.konvrt-workspace-active .site-header-inner > .konvrt-mode-bar .prompt-mode-btn {
min-width: 0;
padding-inline: .28rem !important;
}
}
/* The preview column meets the legal footer exactly; a legacy bottom
inset otherwise leaves a narrow strip of the page canvas visible. */
body.konvrt-workspace-active .konvrt-workspace-body > .konvrt-phone-pane {
height: 100%;
align-self: stretch;
padding-bottom: 0 !important;
margin-bottom: 0 !important;
}
body.konvrt-workspace-active #ai-relocation-card > #konvrt-workspace-body {
padding: 0 !important;
}
/* Compact legal bar: keep every item on one line while returning more
vertical room to the phone and workspace. */
body.konvrt-workspace-active > .site-legal-footer .site-legal-footer-inner {
min-height: 34px;
padding: .32rem clamp(.7rem, 2vw, 1.4rem) !important;
gap: .65rem 1rem;
}
body.konvrt-workspace-active > .site-legal-footer a,
body.konvrt-workspace-active > .site-legal-footer small,
body.konvrt-workspace-active > .site-legal-footer .site-legal-summary strong {
line-height: 1;
}
/* Each action spans its own column, sitting exactly over its card:
Upload above the uploaded image, Generate above the generated one.
The column gap matches the comparison grid so the edges line up. */
body.konvrt-workspace-active .konvrt-phone-primary > .image-comparison-head {
display: grid !important;
grid-template-columns: repeat(2, minmax(0, 1fr));
column-gap: .55rem;
width: 100%;
}
body.konvrt-workspace-active .konvrt-phone-primary #generate-image-btn {
grid-column: 2;
grid-row: 1;
width: 100% !important;
min-width: 0 !important;
flex: none !important;
}
body.konvrt-workspace-active .konvrt-phone-primary #start-again-btn {
grid-column: 1;
grid-row: 1;
position: static !important;
inset: auto !important;
display: inline-flex !important;
align-items: center;
justify-content: center;
gap: .3rem;
width: 100% !important;
min-width: 0 !important;
min-height: 38px;
padding: .25rem .55rem !important;
border-radius: 11px;
font-size: .52rem;
line-height: 1.1;
white-space: nowrap;
}
body.konvrt-workspace-active .konvrt-phone-primary #start-again-btn .upload-new-image-icon {
width: 12px;
height: 12px;
flex: 0 0 12px;
stroke: currentColor;
}
body.konvrt-workspace-active .konvrt-phone-side {
padding-top: 0;
}
body.konvrt-workspace-active #ai-relocation-card.is-model-analysis-gated #output-size-section {
display: block !important;
}
body.konvrt-workspace-active #generate-image-btn.is-analysis-required {
opacity: .52;
cursor: not-allowed;
filter: saturate(.55);
box-shadow: none !important;
}
body.konvrt-workspace-active #generate-image-btn.is-analysis-required:hover {
transform: none !important;
}
/* Before AI analysis, present one unmistakable centered call to action.
The loading view takes over normally as soon as analysis begins. */
body.konvrt-workspace-active:not(.konvrt-analyzing)
#ai-relocation-card.is-model-analysis-gated .konvrt-controls-pane {
display: grid !important;
place-items: center;
}
body.konvrt-workspace-active:not(.konvrt-analyzing)
#ai-relocation-card.is-model-analysis-gated .konvrt-model-controls {
display: none !important;
}
body.konvrt-workspace-active:not(.konvrt-analyzing)
#ai-relocation-card.is-model-analysis-gated #model-suggestion-gate:not(.hidden) {
width: min(92%, 560px);
max-width: 560px;
margin: 0 !important;
padding: clamp(1.4rem, 4vh, 2.5rem) clamp(1.1rem, 3vw, 2.2rem) !important;
display: grid !important;
grid-template-columns: minmax(0, 1fr);
justify-items: center;
align-content: center;
gap: .9rem;
text-align: center;
}
body.konvrt-workspace-active:not(.konvrt-analyzing)
#ai-relocation-card.is-model-analysis-gated .model-gate-preview {
width: 104px;
height: 104px;
border-radius: 18px;
}
body.konvrt-workspace-active:not(.konvrt-analyzing)
#ai-relocation-card.is-model-analysis-gated .model-gate-copy {
width: 100%;
justify-items: center;
gap: .42rem;
}
body.konvrt-workspace-active:not(.konvrt-analyzing)
#ai-relocation-card.is-model-analysis-gated .model-gate-copy strong {
max-width: 24ch;
font-size: clamp(1.25rem, 2.2vw, 1.65rem);
line-height: 1.12;
letter-spacing: -.025em;
}
body.konvrt-workspace-active:not(.konvrt-analyzing)
#ai-relocation-card.is-model-analysis-gated .model-gate-copy small {
max-width: 48ch;
font-size: .8rem;
line-height: 1.5;
}
body.konvrt-workspace-active:not(.konvrt-analyzing)
#ai-relocation-card.is-model-analysis-gated #model-suggestion-analyze {
min-width: 180px;
min-height: 52px;
padding: .62rem 1.1rem;
border-radius: 13px;
font-size: .82rem;
}
@media (max-width: 720px) {
body.konvrt-workspace-active:not(.konvrt-analyzing)
#ai-relocation-card.is-model-analysis-gated #model-suggestion-gate:not(.hidden) {
width: min(94%, 440px);
padding: 1.2rem .8rem !important;
}
body.konvrt-workspace-active:not(.konvrt-analyzing)
#ai-relocation-card.is-model-analysis-gated .model-gate-preview {
width: 82px;
height: 82px;
}
}
@media (max-width: 720px) {
body.konvrt-workspace-active .konvrt-phone-primary > .image-comparison-head {
gap: .25rem;
}
body.konvrt-workspace-active .konvrt-phone-primary #start-again-btn {
min-width: 78px;
padding-inline: .35rem !important;
font-size: .46rem;
}
}
/* Footer destinations move into the mobile account list, returning the
full lower edge of the viewport to the workspace. */
.auth-menu-legal {
display: none;
}
.studio-mobile-piece-actions {
display: none;
}
/* Desktop workspace: the same bottom bar as the phone. One control system
on both sizes — the edge triggers are gone and every studio section is a
labelled button along the bottom of the stage. */
@media (min-width: 721px) {
body.konvrt-workspace-active .studio3d:not(.is-fullscreen) .studio-side-trigger.is-left,
body.konvrt-workspace-active .studio3d:not(.is-fullscreen) .studio-side-trigger.is-right {
display: none !important;
}
body.konvrt-workspace-active .studio3d:not(.is-fullscreen) .studio-mobile-piece-actions {
position: absolute;
z-index: 8;
inset: auto 0 0 0;
height: 48px;
margin: 0;
display: flex;
align-items: stretch;
justify-content: center;
gap: 0;
border-top: 1px solid rgba(255,255,255,.14);
background: rgba(14,15,17,.86);
backdrop-filter: blur(10px);
}
body.konvrt-workspace-active .studio3d:not(.is-fullscreen) .studio-mobile-piece-actions button {
flex: 0 0 auto;
width: 62px;
min-width: 62px;
min-height: 0;
padding: 0;
display: grid;
grid-template-rows: auto auto;
gap: 2px;
place-items: center;
align-content: center;
border: 0;
border-right: 1px solid rgba(255,255,255,.14);
border-radius: 0;
background: transparent;
color: rgba(255,255,255,.82);
cursor: pointer;
}
[dir="rtl"] body.konvrt-workspace-active .studio3d:not(.is-fullscreen) .studio-mobile-piece-actions button {
border-right: 0;
border-left: 1px solid rgba(255,255,255,.14);
}
body.konvrt-workspace-active .studio3d:not(.is-fullscreen) .studio-mobile-piece-actions button:hover {
color: #fff;
background: rgba(255,255,255,.08);
}
body.konvrt-workspace-active .studio3d:not(.is-fullscreen) .studio-mobile-piece-actions button svg {
width: 17px;
height: 17px;
}
body.konvrt-workspace-active .studio3d:not(.is-fullscreen) .studio-mobile-piece-actions button > span {
font-size: .42rem;
font-weight: 700;
line-height: 1;
letter-spacing: .01em;
white-space: nowrap;
}
body.konvrt-workspace-active .studio3d:not(.is-fullscreen) .studio-mobile-piece-actions button[data-studio-quick-piece="table"],
body.konvrt-workspace-active .studio3d:not(.is-fullscreen) .studio-mobile-piece-actions button[data-studio-quick-piece="camera"] {
border-inline-start: 2px solid rgba(255,255,255,.38);
}
body.konvrt-workspace-active .studio3d:not(.is-fullscreen) .studio-mobile-piece-actions button.is-active {
color: #fff;
background: color-mix(in srgb, var(--accent) 62%, transparent);
}
}
@media (max-width: 720px) {
body > .site-legal-footer,
body:not(.landing-active) > .site-legal-footer,
body.konvrt-workspace-active > .site-legal-footer,
body:not(.landing-active).konvrt-workspace-active > .site-legal-footer {
display: none !important;
}
.auth-menu-legal {
margin-top: .15rem;
padding-top: .35rem;
display: grid;
gap: .08rem;
border-top: 1px solid color-mix(in srgb, var(--line) 78%, transparent);
}
.auth-menu-legal .auth-menu-item {
min-height: 38px;
padding-block: .4rem;
text-decoration: none;
}
.auth-menu-legal-icon {
width: 20px;
height: 20px;
flex: 0 0 20px;
display: grid;
place-items: center;
border-radius: 6px;
background: color-mix(in srgb, var(--accent) 9%, transparent);
color: var(--accent);
font-size: .63rem;
font-weight: 900;
}
/* Mobile is a deliberate vertical story: creative controls first, then
output size, the uploaded reference, the generated phone and history. */
body.konvrt-workspace-active .konvrt-workspace-body {
display: grid !important;
grid-template-columns: minmax(0, 1fr) !important;
grid-template-rows: max-content max-content !important;
align-content: start;
height: 100% !important;
overflow-x: hidden !important;
overflow-y: auto !important;
overscroll-behavior-y: contain;
-webkit-overflow-scrolling: touch;
}
body.konvrt-workspace-active .konvrt-controls-pane {
height: auto !important;
min-height: 0 !important;
padding: .65rem .75rem !important;
overflow: visible !important;
border-inline-end: 0 !important;
}
body.konvrt-workspace-active .konvrt-phone-pane {
height: auto !important;
min-height: 0 !important;
padding: .38rem .5rem .55rem !important;
align-self: auto !important;
overflow: visible !important;
border-top: 1px solid color-mix(in srgb, var(--text) 18%, var(--line));
}
body.konvrt-workspace-active .konvrt-preview-tools,
body.konvrt-workspace-active .konvrt-preview-tools .generated-prompt-panel {
height: auto !important;
min-height: 0 !important;
overflow: visible !important;
}
body.konvrt-workspace-active .konvrt-preview-tools {
display: flex !important;
flex-direction: column;
gap: .32rem;
}
body.konvrt-workspace-active .konvrt-controls-pane .personal-change-panel,
body.konvrt-workspace-active .konvrt-controls-pane .studio3d,
body.konvrt-workspace-active .konvrt-controls-pane .studio3d-stage {
min-height: clamp(460px, 64svh, 600px) !important;
height: clamp(460px, 64svh, 600px) !important;
max-height: none !important;
}
body.konvrt-workspace-active .studio-quality-badge,
body.konvrt-workspace-active [dir="rtl"] .studio-quality-badge {
top: .55rem !important;
left: .55rem !important;
right: auto !important;
transform: none !important;
max-width: 118px !important;
}
body.konvrt-workspace-active .studio-subject-switch {
top: .55rem !important;
}
body.konvrt-workspace-active .studio3d-hint,
body.konvrt-workspace-active .studio3d-spec {
display: none !important;
}
/* .studio-mobile-piece-actions, the side panels and their scroll boxes
are fully restyled by the "two thin bars" block further down — this
used to duplicate and fight it with a higher-specificity `overflow:
visible !important` that silently defeated the tray's horizontal
scroll. Only the rules still in use (stage height, badge position,
hiding the hint/spec) are kept here. */
body.konvrt-workspace-active .konvrt-controls-pane .personal-change-panel,
body.konvrt-workspace-active .konvrt-controls-pane .studio3d {
min-height: 0 !important;
height: auto !important;
}
body.konvrt-workspace-active .konvrt-preview-tools #output-size-section {
order: 1 !important;
width: 100% !important;
padding: .24rem 0 .32rem !important;
overflow-x: hidden;
border-top: 0 !important;
border-bottom: 1px solid color-mix(in srgb, var(--text) 20%, var(--line)) !important;
scrollbar-width: none;
}
body.konvrt-workspace-active .konvrt-preview-tools #output-size-section::-webkit-scrollbar {
display: none;
}
body.konvrt-workspace-active .konvrt-preview-tools #output-size-section .size-choice-row {
width: 100% !important;
min-width: 0 !important;
grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
gap: .08rem !important;
}
body.konvrt-workspace-active .konvrt-preview-tools #output-size-section .improve-section-label,
body.konvrt-workspace-active .konvrt-preview-tools #edit-strength-section .improve-section-label {
margin-bottom: .18rem !important;
font-size: .55rem !important;
}
body.konvrt-workspace-active .konvrt-preview-tools #output-size-section .size-choice {
min-width: 0 !important;
min-height: 46px !important;
padding: .18rem .02rem !important;
gap: .06rem !important;
}
body.konvrt-workspace-active .konvrt-preview-tools #output-size-section .size-choice-icon {
width: 21px !important;
height: 21px !important;
}
body.konvrt-workspace-active .konvrt-preview-tools #output-size-section .size-choice-icon svg {
width: 14px !important;
height: 14px !important;
}
body.konvrt-workspace-active .konvrt-preview-tools #output-size-section .size-choice-title {
max-width: 100%;
font-size: .54rem !important;
line-height: 1.05 !important;
white-space: normal;
overflow-wrap: anywhere;
}
body.konvrt-workspace-active .konvrt-preview-tools #output-size-section .size-choice-ratio {
font-size: .48rem !important;
line-height: 1 !important;
}
body.konvrt-workspace-active .konvrt-preview-tools .generated-prompt-panel {
order: 2 !important;
display: block !important;
padding: 0 !important;
border-top: 0 !important;
}
body.konvrt-workspace-active .konvrt-phone-composition {
width: 100%;
height: auto !important;
display: grid !important;
grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
grid-template-areas:
"actions actions"
"reference-label generated-label"
"reference generated"
"save-hint save-hint"
"history history";
justify-items: center;
align-items: start;
column-gap: .5rem;
row-gap: .25rem;
}
body.konvrt-workspace-active .konvrt-phone-primary,
body.konvrt-workspace-active .konvrt-phone-side {
display: contents !important;
}
body.konvrt-workspace-active .konvrt-reference-label {
grid-area: reference-label;
margin-top: 0;
font-size: .52rem;
}
body.konvrt-workspace-active .konvrt-generated-label {
grid-area: generated-label;
display: block;
width: 100%;
margin-top: 0;
color: var(--muted);
font-size: .52rem;
font-weight: 800;
line-height: 1.1;
letter-spacing: .04em;
text-align: center;
text-transform: uppercase;
}
body.konvrt-workspace-active .konvrt-phone-side .image-comparison-item.is-reference {
grid-area: reference !important;
position: static !important;
inset: auto !important;
box-sizing: border-box;
width: min(100%, 160px) !important;
height: auto !important;
flex: none !important;
aspect-ratio: 9 / 16 !important;
margin: 0 !important;
overflow: hidden !important;
justify-self: center !important;
border: 2px solid color-mix(in srgb, var(--text) 72%, var(--accent)) !important;
border-radius: 14px !important;
box-shadow:
0 0 0 3px color-mix(in srgb, var(--accent) 12%, transparent),
0 9px 20px rgba(30, 18, 17, .2) !important;
}
body.konvrt-workspace-active .konvrt-phone-side #improvement-reference-frame {
box-sizing: border-box;
width: 100% !important;
height: 100% !important;
aspect-ratio: 9 / 16 !important;
border: 0 !important;
border-radius: 13px !important;
}
body.konvrt-workspace-active .konvrt-phone-primary {
width: auto;
}
body.konvrt-workspace-active .konvrt-phone-primary > .image-comparison-head {
grid-area: actions;
display: grid !important;
grid-template-columns: repeat(2, minmax(0, 1fr));
width: 100%;
column-gap: .5rem;
}
body.konvrt-workspace-active .konvrt-phone-primary #generate-image-btn,
body.konvrt-workspace-active .konvrt-phone-primary #start-again-btn {
box-sizing: border-box;
width: min(100%, 160px) !important;
min-width: 0 !important;
flex: none !important;
justify-self: center;
padding-inline: .42rem !important;
}
body.konvrt-workspace-active .konvrt-phone-primary #generate-image-btn {
grid-column: 2;
min-height: 34px !important;
order: 2;
}
body.konvrt-workspace-active .konvrt-phone-primary #start-again-btn {
grid-column: 1;
min-height: 34px !important;
order: 1;
padding-inline: .42rem !important;
display: inline-flex !important;
align-items: center;
justify-content: center;
gap: .3rem;
border: 0 !important;
border-radius: 15px !important;
background: linear-gradient(112deg, #2f2b30, #55494d) !important;
color: #fff !important;
font-size: .54rem !important;
font-weight: 800;
line-height: 1.15 !important;
box-shadow: 0 10px 22px rgba(35, 29, 31, .22) !important;
}
body.konvrt-workspace-active .konvrt-phone-primary #start-again-btn::before {
content: none !important;
display: none !important;
}
body.konvrt-workspace-active .konvrt-phone-primary #start-again-btn > span {
display: inline !important;
font-size: inherit !important;
line-height: inherit !important;
}
body.konvrt-workspace-active .konvrt-phone-primary #generated-image-frame {
grid-area: generated;
width: min(100%, 160px) !important;
height: auto !important;
max-height: none !important;
max-width: 160px !important;
min-height: 0 !important;
flex: none !important;
margin: 0 auto !important;
padding: 0 !important;
overflow: hidden !important;
border: 1px solid color-mix(in srgb, var(--line) 72%, transparent) !important;
border-radius: 14px !important;
background: color-mix(in srgb, var(--surface) 92%, var(--bg)) !important;
box-shadow: none !important;
/* The card previews the chosen output format's shape. */
aspect-ratio: var(--gen-aspect, 9 / 16) !important;
}
body.konvrt-workspace-active .konvrt-preview-tools .image-comparison-item.is-reference::after {
content: none !important;
display: none !important;
}
body.konvrt-workspace-active .konvrt-phone-side .konvrt-history-rail {
grid-area: history;
position: static !important;
inset: auto !important;
width: 100% !important;
height: auto !important;
max-height: none !important;
margin: .18rem 0 0 !important;
padding: .35rem 0 0 !important;
overflow: hidden !important;
border-top: 2px solid color-mix(in srgb, var(--text) 42%, var(--line));
}
body.konvrt-workspace-active .konvrt-history-title {
margin-bottom: .3rem;
font-size: .7rem;
text-align: center;
}
body.konvrt-workspace-active .konvrt-phone-side .konvrt-history-track {
width: 100%;
max-height: none;
padding: 0 0 .2rem;
display: flex;
flex-direction: row;
align-items: center;
gap: .35rem;
overflow-x: auto;
overflow-y: hidden;
overscroll-behavior-inline: contain;
-webkit-overflow-scrolling: touch;
scroll-snap-type: x proximity;
scrollbar-width: none;
}
body.konvrt-workspace-active .konvrt-phone-side .konvrt-history-track::-webkit-scrollbar {
display: none !important;
width: 0 !important;
height: 0 !important;
}
body.konvrt-workspace-active .konvrt-phone-side .konvrt-history-thumb {
width: 56px !important;
height: 56px !important;
flex: 0 0 56px !important;
scroll-snap-align: start;
border-radius: 9px;
}
body.konvrt-workspace-active .konvrt-phone-side .konvrt-history-ratio {
padding: .08rem .12rem;
font-size: .52rem;
line-height: 1.1;
}
}
/* Phone studio: two thin bars and nothing else. The main bar is welded to
the bottom edge of the 3D stage and holds every section; tapping one
raises a second bar directly above it with that section's options. Both
scroll horizontally, so neither ever grows past a single row. */
/* One control system at every width: this block used to be phone-only
(max-width: 720px); the media wrapper was removed so the desktop studio
uses the same bottom bar and shallow tray instead of side drawers. */
@media (min-width: 0px) {
/* Declared on .studio3d, not the stage: the panels are the stage's
siblings, so anything set on the stage never reaches them. */
body.konvrt-workspace-active .konvrt-controls-pane .studio3d:not(.is-fullscreen) {
--studio-bar: 48px;
--studio-tray: 56px;
/* The tray is positioned against this box, so it has to be the offset
parent or it escapes to the page and lands over the panels below. */
position: relative;
}
/* .studio-side-trigger.is-left and .studio-mobile-piece-actions are two
independent absolutely-positioned siblings in the stage, not two items
of a shared flex row — so making "one bar" out of them means giving
the piece-actions bar its own leading Lights button and hiding the
separate trigger, rather than trying to line the two boxes up. */
body.konvrt-workspace-active .studio3d:not(.is-fullscreen) .studio-side-trigger.is-left {
display: none !important;
}
body.konvrt-workspace-active .studio3d:not(.is-fullscreen) .studio-mobile-piece-actions,
[dir="rtl"] body.konvrt-workspace-active .studio3d:not(.is-fullscreen) .studio-mobile-piece-actions {
position: absolute !important;
z-index: 8;
top: auto !important;
bottom: 0 !important;
left: 0 !important;
right: 0 !important;
height: var(--studio-bar) !important;
margin: 0;
display: flex !important;
align-items: stretch;
gap: 0 !important;
overflow-x: auto;
overflow-y: hidden;
scrollbar-width: none;
border-radius: 0 !important;
border-width: 1px 0 0 0 !important;
border-color: rgba(255,255,255,.14) !important;
background: rgba(14,15,17,.86);
backdrop-filter: blur(10px);
transform: none !important;
}
body.konvrt-workspace-active .studio3d:not(.is-fullscreen) .studio-mobile-piece-actions::-webkit-scrollbar {
display: none;
}
/* Personalize is redundant: every piece button below opens that same panel. */
body.konvrt-workspace-active .studio3d:not(.is-fullscreen) .studio-side-trigger.is-right {
display: none !important;
}
/* Icon over a one-word label: each section reads without guessing what
an icon means. Seven buttons still fit; the bar scrolls if not. */
body.konvrt-workspace-active .studio3d:not(.is-fullscreen) .studio-mobile-piece-actions button,
[dir="rtl"] body.konvrt-workspace-active .studio3d:not(.is-fullscreen) .studio-mobile-piece-actions button {
flex: 0 0 auto;
width: 52px !important;
min-width: 52px !important;
min-height: 0 !important;
padding: 0 !important;
display: grid !important;
grid-template-rows: auto auto;
gap: 2px;
place-items: center;
align-content: center;
border: 0 !important;
border-right: 1px solid rgba(255,255,255,.14) !important;
border-radius: 0 !important;
background: transparent !important;
color: rgba(255,255,255,.82);
}
[dir="rtl"] body.konvrt-workspace-active .studio3d:not(.is-fullscreen) .studio-mobile-piece-actions button {
border-right: 0 !important;
border-left: 1px solid rgba(255,255,255,.14) !important;
}
body.konvrt-workspace-active .studio3d:not(.is-fullscreen) .studio-mobile-piece-actions button svg {
width: 16px;
height: 16px;
}
body.konvrt-workspace-active .studio3d:not(.is-fullscreen) .studio-mobile-piece-actions button > span {
position: static;
width: auto;
height: auto;
overflow: hidden;
clip-path: none;
white-space: nowrap;
max-width: 50px;
font-size: .4rem;
font-weight: 700;
line-height: 1;
letter-spacing: .01em;
}
/* The bar is three groups — lighting, the set, the camera — and the
boundary between them is drawn heavier than the dividers inside one. */
body.konvrt-workspace-active .studio3d:not(.is-fullscreen) .studio-mobile-piece-actions button[data-studio-quick-piece="table"],
body.konvrt-workspace-active .studio3d:not(.is-fullscreen) .studio-mobile-piece-actions button[data-studio-quick-piece="camera"] {
border-inline-start: 2px solid rgba(255,255,255,.38) !important;
}
body.konvrt-workspace-active .studio3d:not(.is-fullscreen) .studio-mobile-piece-actions button.is-active {
color: #fff;
background: color-mix(in srgb, var(--accent) 62%, transparent) !important;
}
/* The options bar. One row, riding directly on top of the main bar. */
body.konvrt-workspace-active .konvrt-controls-pane .studio3d:not(.is-fullscreen) .studio-side-panel,
[dir="rtl"] body.konvrt-workspace-active .konvrt-controls-pane .studio3d:not(.is-fullscreen) .studio-side-panel {
position: absolute !important;
z-index: 7;
inset: auto 0 var(--studio-bar) 0 !important;
width: auto !important;
height: var(--studio-tray) !important;
max-height: var(--studio-tray) !important;
display: block !important;
border-radius: 0;
border-top: 1px solid rgba(255,255,255,.12);
box-shadow: none;
transform: translateY(100%) !important;
/* An older workspace rule drops this panel out of the stage and into
normal flow below the studio; the tray has to claim it back. */
inset-block-start: auto !important;
}
body.konvrt-workspace-active .konvrt-controls-pane .studio3d:not(.is-fullscreen) .studio-side-panel.is-open,
[dir="rtl"] body.konvrt-workspace-active .konvrt-controls-pane .studio3d:not(.is-fullscreen) .studio-side-panel.is-open {
transform: translateY(0) !important;
}
/* Two bars and nothing else: no panel header, no close button, and no
second copy of the section buttons that the main bar already carries.
Tapping the lit section in the main bar is what closes this. */
body.konvrt-workspace-active .studio3d:not(.is-fullscreen) .studio-side-panel-head,
body.konvrt-workspace-active .studio3d:not(.is-fullscreen) .studio-side-panel .studio-piece-picker {
display: none !important;
}
/* Closed, the bar is only translated out of the way — and the studio does
not clip it, so it used to hang below the stage over the page.
Descendant, not child: the Lights panel sits inside #studio3d-stage
while the scene panel is a direct child of .studio3d, so a `>` here
silently styles only one of the two. */
body.konvrt-workspace-active .konvrt-controls-pane .studio3d:not(.is-fullscreen) .studio-side-panel:not(.is-open) {
visibility: hidden;
}
/* The panel still carried `touch-action: pan-y` from its drawer days,
which tells the browser to allow vertical panning only — so a finger
swipe sideways did nothing even though the box scrolled fine
programmatically. The bars are horizontal now. */
body.konvrt-workspace-active .studio3d:not(.is-fullscreen) .studio-side-panel,
body.konvrt-workspace-active .studio3d:not(.is-fullscreen) .studio-mobile-piece-actions {
touch-action: pan-x !important;
}
body.konvrt-workspace-active .studio3d:not(.is-fullscreen) .studio-panel-scroll {
touch-action: pan-x;
overscroll-behavior-x: contain;
height: 100%;
display: flex !important;
align-items: center;
gap: .45rem;
padding: 0 .5rem !important;
overflow-x: auto !important;
overflow-y: hidden !important;
max-height: none !important;
scrollbar-width: none;
}
body.konvrt-workspace-active .studio3d:not(.is-fullscreen) .studio-panel-scroll::-webkit-scrollbar,
body.konvrt-workspace-active .studio3d:not(.is-fullscreen) .studio-mobile-piece-actions::-webkit-scrollbar {
display: none;
}
body.konvrt-workspace-active .studio3d:not(.is-fullscreen) .studio-mobile-piece-actions {
scrollbar-width: none;
}
/* Every block inside becomes an inline group on that one row. */
body.konvrt-workspace-active .studio3d:not(.is-fullscreen) .studio-panel-scroll > *,
body.konvrt-workspace-active .studio3d:not(.is-fullscreen) .studio-side-panel .studio-control-block,
body.konvrt-workspace-active .studio3d:not(.is-fullscreen) .studio-side-panel .studio3d-dock,
body.konvrt-workspace-active .studio3d:not(.is-fullscreen) .studio-side-panel .personal-suggestion-group,
body.konvrt-workspace-active .studio3d:not(.is-fullscreen) .studio-side-panel .studio3d-context-body,
body.konvrt-workspace-active .studio3d:not(.is-fullscreen) .studio-side-panel .creative-preference-block {
flex: 0 0 auto;
margin: 0 !important;
padding: 0 !important;
display: flex !important;
align-items: center;
gap: .3rem !important;
border: 0 !important;
border-radius: 0 !important;
background: none !important;
box-shadow: none !important;
}
/* Section name stays as a quiet caption; the long description does not. */
body.konvrt-workspace-active .studio3d:not(.is-fullscreen) .studio-side-panel .studio-control-head,
body.konvrt-workspace-active .studio3d:not(.is-fullscreen) .studio-side-panel .personal-group-head {
flex: 0 0 auto;
display: block !important;
padding: 0 !important;
}
body.konvrt-workspace-active .studio3d:not(.is-fullscreen) .studio-side-panel .studio-control-head span,
body.konvrt-workspace-active .studio3d:not(.is-fullscreen) .studio-side-panel .personal-group-head span,
body.konvrt-workspace-active .studio3d:not(.is-fullscreen) .studio-side-panel .studio3d-context-head,
body.konvrt-workspace-active .studio3d:not(.is-fullscreen) .studio-side-panel .creative-reason {
display: none !important;
}
body.konvrt-workspace-active .studio3d:not(.is-fullscreen) .studio-side-panel .studio-control-head strong,
body.konvrt-workspace-active .studio3d:not(.is-fullscreen) .studio-side-panel .personal-group-head strong,
body.konvrt-workspace-active .studio3d:not(.is-fullscreen) .studio-side-panel .studio3d-label {
display: block;
max-width: 62px;
overflow: hidden;
color: rgba(255,255,255,.5) !important;
font-size: .46rem !important;
font-weight: 800;
line-height: 1.1;
text-transform: uppercase;
letter-spacing: .04em;
}
/* Option rows: one line, scrolling with the bar. */
body.konvrt-workspace-active .studio3d:not(.is-fullscreen) .studio-side-panel .studio-light-grid,
body.konvrt-workspace-active .studio3d:not(.is-fullscreen) .studio-side-panel .studio3d-chips,
body.konvrt-workspace-active .studio3d:not(.is-fullscreen) .studio-side-panel .studio3d-swatches,
body.konvrt-workspace-active .studio3d:not(.is-fullscreen) .studio-side-panel .personalize-button-grid {
display: flex !important;
flex-wrap: nowrap !important;
grid-template-columns: none !important;
gap: .28rem !important;
overflow: visible !important;
}
body.konvrt-workspace-active .studio3d:not(.is-fullscreen) .studio-side-panel .studio-light-toggle,
body.konvrt-workspace-active .studio3d:not(.is-fullscreen) .studio-side-panel .creative-choice,
body.konvrt-workspace-active .studio3d:not(.is-fullscreen) .studio-side-panel .personal-suggestion,
body.konvrt-workspace-active .studio3d:not(.is-fullscreen) .studio-side-panel .studio3d-chips > * {
flex: 0 0 auto;
min-height: 40px !important;
padding: .22rem .4rem !important;
border-radius: 9px !important;
font-size: .5rem !important;
white-space: nowrap;
}
body.konvrt-workspace-active .studio3d:not(.is-fullscreen) .studio-side-panel .studio-light-toggle svg {
width: 13px;
height: 13px;
}
body.konvrt-workspace-active .studio3d:not(.is-fullscreen) .studio-side-panel .studio3d-swatches > * {
flex: 0 0 auto;
width: 26px !important;
height: 26px !important;
}
/* Preview chips are built as a 40px tile with a label under it, which is
taller than the bar. In here they lie down: a small swatch with its
name beside it, clipped rather than wrapped. */
body.konvrt-workspace-active .studio3d:not(.is-fullscreen) .studio-side-panel .studio3d-chip.has-preview {
min-height: 36px !important;
max-width: 116px;
grid-template-columns: 20px minmax(0, 1fr) !important;
gap: .3rem !important;
padding: .18rem .34rem !important;
}
body.konvrt-workspace-active .studio3d:not(.is-fullscreen) .studio-side-panel .studio3d-chip-preview {
width: 20px !important;
height: 20px !important;
border-radius: 6px;
}
body.konvrt-workspace-active .studio3d:not(.is-fullscreen) .studio-side-panel .studio3d-chip {
min-height: 36px !important;
padding: .18rem .38rem !important;
font-size: .46rem !important;
}
body.konvrt-workspace-active .studio3d:not(.is-fullscreen) .studio-side-panel .studio3d-chip span,
body.konvrt-workspace-active .studio3d:not(.is-fullscreen) .studio-side-panel .studio-light-toggle span {
white-space: normal;
overflow-wrap: anywhere;
}
body.konvrt-workspace-active .studio3d:not(.is-fullscreen) .studio-side-panel .studio-light-toggle {
min-height: 36px !important;
font-size: .46rem !important;
}
/* ---- icon-only interior ----------------------------------------
Nothing inside the studio bars carries a written label. Every
control is its icon, swatch or material preview; the name lives on
as title + aria-label so it is still announced and still available
on hover / long press. */
body.konvrt-workspace-active .studio3d:not(.is-fullscreen) .studio-side-panel .studio3d-label,
body.konvrt-workspace-active .studio3d:not(.is-fullscreen) .studio-side-panel .studio3d-chip-label,
body.konvrt-workspace-active .studio3d:not(.is-fullscreen) .studio-side-panel .studio-light-toggle span,
body.konvrt-workspace-active .studio3d:not(.is-fullscreen) .studio-side-panel .studio-move-toggle span,
body.konvrt-workspace-active .studio3d:not(.is-fullscreen) .studio-side-panel .personalize-prompt-button strong,
body.konvrt-workspace-active .studio3d:not(.is-fullscreen) .studio-side-panel .personalize-prompt-button span:not([aria-hidden]),
body.konvrt-workspace-active .studio3d:not(.is-fullscreen) .studio-side-panel .studio-control-head,
body.konvrt-workspace-active .studio3d:not(.is-fullscreen) .studio-side-panel .personal-group-head {
display: none !important;
}
/* Every option is the same square tap target, whatever it is made of. */
body.konvrt-workspace-active .studio3d:not(.is-fullscreen) .studio-side-panel .studio-light-toggle,
body.konvrt-workspace-active .studio3d:not(.is-fullscreen) .studio-side-panel .studio-move-toggle,
body.konvrt-workspace-active .studio3d:not(.is-fullscreen) .studio-side-panel .personalize-prompt-button,
body.konvrt-workspace-active .studio3d:not(.is-fullscreen) .studio-side-panel .studio3d-chip,
body.konvrt-workspace-active .studio3d:not(.is-fullscreen) .studio-side-panel .studio3d-chip.has-preview {
width: 40px !important;
min-width: 40px !important;
max-width: 40px !important;
height: 40px !important;
min-height: 40px !important;
padding: 0 !important;
display: grid !important;
grid-template-columns: none !important;
place-items: center !important;
gap: 0 !important;
border-radius: 10px !important;
}
body.konvrt-workspace-active .studio3d:not(.is-fullscreen) .studio-side-panel .studio-light-toggle svg,
body.konvrt-workspace-active .studio3d:not(.is-fullscreen) .studio-side-panel .studio-move-toggle svg,
body.konvrt-workspace-active .studio3d:not(.is-fullscreen) .studio-side-panel .personalize-prompt-button svg,
body.konvrt-workspace-active .studio3d:not(.is-fullscreen) .studio-side-panel .studio3d-chip svg {
width: 18px !important;
height: 18px !important;
fill: none;
stroke: currentColor;
stroke-width: 1.8;
stroke-linecap: round;
stroke-linejoin: round;
}
body.konvrt-workspace-active .studio3d:not(.is-fullscreen) .studio-side-panel .studio3d-chip-preview {
width: 26px !important;
height: 26px !important;
border-radius: 7px;
}
body.konvrt-workspace-active .studio3d:not(.is-fullscreen) .studio-side-panel .studio3d-swatch {
width: 26px !important;
height: 26px !important;
min-width: 26px !important;
}
/* Rows no longer need their caption column, so they collapse to just
their options and the groups sit tighter together. */
body.konvrt-workspace-active .studio3d:not(.is-fullscreen) .studio-side-panel .studio3d-dock-row {
display: flex !important;
align-items: center;
gap: .28rem !important;
margin: 0 !important;
padding: 0 !important;
}
}
.workflow-header-analyze-logo,
.mobile-social-nav { display: none; }
@media (max-width: 720px) {
body.has-workflow-mobile-nav:not(.landing-active) {
padding-top: 0 !important;
padding-bottom: calc(70px + env(safe-area-inset-bottom)) !important;
}
body.has-workflow-mobile-nav:not(.landing-active) > .site-header {
position: fixed !important;
inset: auto 0 0 0 !important;
top: auto !important;
bottom: 0 !important;
z-index: 1200;
}
body.has-workflow-mobile-nav:not(.landing-active) > .site-header .site-header-inner.has-workflow-steps {
width: 100%;
max-width: none;
/* Compact bar (owner request 2026-08-27): the sheet hugs its icons
instead of floating a tall band over the content. The !importants
are load-bearing — the workspace header rules set their own
min-height/padding with !important and otherwise win here. */
min-height: 56px !important;
margin: 0;
padding: .28rem .6rem calc(.24rem + env(safe-area-inset-bottom)) !important;
display: grid;
grid-template-columns: 38px minmax(0, 1fr) 38px !important;
align-items: center;
border: 1px solid var(--line);
border-bottom: 0;
border-radius: 22px 22px 0 0;
background: color-mix(in srgb, var(--card) 94%, transparent);
box-shadow: 0 -10px 32px rgba(0, 0, 0, .16);
backdrop-filter: blur(18px);
}
body.has-workflow-mobile-nav:not(.landing-active) .site-header-lead,
body.has-workflow-mobile-nav:not(.landing-active) .site-header-actions {
width: 38px;
min-width: 38px;
}
body.has-workflow-mobile-nav:not(.landing-active) .site-brand,
body.has-workflow-mobile-nav:not(.landing-active) #lang-btn,
body.has-workflow-mobile-nav:not(.landing-active) #theme-btn,
body.has-workflow-mobile-nav:not(.landing-active) #auth-avatar-btn {
display: none !important;
}
body.has-workflow-mobile-nav:not(.landing-active) .workflow-header-steps {
grid-column: 2;
width: 100%;
height: 50px;
display: flex !important;
align-items: center;
justify-content: space-around;
gap: .3rem;
overflow: visible;
}
body.has-workflow-mobile-nav:not(.landing-active) .workflow-header-arrow,
body.has-workflow-mobile-nav:not(.landing-active) .workflow-header-number {
display: none !important;
}
body.has-workflow-mobile-nav:not(.landing-active) .workflow-header-step {
flex: 1 1 0;
min-width: 0;
min-height: 46px;
padding: .24rem .2rem;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: .15rem;
border: 0;
background: transparent;
}
body.has-workflow-mobile-nav:not(.landing-active) .workflow-header-step .workflow-header-icon {
width: 23px;
height: 23px;
}
body.has-workflow-mobile-nav:not(.landing-active) .workflow-header-step .workflow-header-title {
font-size: .61rem;
line-height: 1;
}
body.has-workflow-mobile-nav:not(.landing-active) .workflow-header-step[data-header-step="analyze"] {
flex: 0 0 70px;
min-height: 70px;
margin-top: -28px;
padding: 0;
border-radius: 50%;
background: linear-gradient(145deg, var(--accent), #7057ff);
box-shadow: 0 8px 22px color-mix(in srgb, var(--accent) 38%, transparent), 0 0 0 5px var(--card);
opacity: 1;
}
body.has-workflow-mobile-nav:not(.landing-active) .workflow-header-step[data-header-step="analyze"] .workflow-header-icon,
body.has-workflow-mobile-nav:not(.landing-active) .workflow-header-step[data-header-step="analyze"] .workflow-header-copy {
display: none !important;
}
body.has-workflow-mobile-nav:not(.landing-active) .workflow-header-analyze-logo {
width: 58px;
height: 58px;
display: grid;
place-items: center;
border-radius: 50%;
overflow: hidden;
}
body.has-workflow-mobile-nav:not(.landing-active) .workflow-header-analyze-logo img {
width: 100%;
height: 100%;
display: block;
object-fit: cover;
}
body.has-workflow-mobile-nav:not(.landing-active) .workflow-header-step:disabled {
cursor: wait;
filter: saturate(.5);
opacity: .55;
}
body.has-workflow-mobile-nav:not(.landing-active) .workflow-header-step[data-header-step="analyze"]:disabled {
opacity: .72;
}
body.has-workflow-mobile-nav:not(.landing-active) .site-header-actions {
grid-column: 3;
}
body.has-workflow-mobile-nav:not(.landing-active) .mobile-menu-button {
display: none !important;
}
}
/* Floating social-style mobile navigation. Desktop keeps the compact
three-step workflow header; this bar is only the phone shell. */
@media (max-width: 720px) {
/* The bar is flush with the bottom edge and reserves only its own height,
so the page keeps every pixel above it. */
body.has-workflow-mobile-nav:not(.landing-active) {
padding-bottom: calc(46px + env(safe-area-inset-bottom)) !important;
}
body.has-workflow-mobile-nav:not(.landing-active) > .site-header {
left: 0 !important;
right: 0 !important;
bottom: 0 !important;
width: auto !important;
border: 0 !important;
background: transparent !important;
box-shadow: none !important;
overflow: visible !important;
}
body.has-workflow-mobile-nav:not(.landing-active) > .site-header .site-header-inner.has-workflow-steps {
position: relative;
min-height: 0;
/* The workspace header rules force a three-column grid with !important.
On a phone that traps this bar in the 44px side column, so all five
items collapse onto each other at the left edge. The phone bar owns
the whole row and has to win the box back. */
padding: 0 !important;
display: block !important;
grid-template-columns: none !important;
border: 0;
border-radius: 0;
background: transparent;
box-shadow: none;
/* The earlier phone-header block frosts this box; a backdrop-filter
still paints a full-width blurred band even over a transparent
background, which is the slab that showed up behind the bar. */
backdrop-filter: none;
-webkit-backdrop-filter: none;
overflow: visible;
}
body.has-workflow-mobile-nav:not(.landing-active) .site-header-lead,
body.has-workflow-mobile-nav:not(.landing-active) .workflow-header-steps,
body.has-workflow-mobile-nav:not(.landing-active) .site-header-nav,
body.has-workflow-mobile-nav:not(.landing-active) .site-header-inner > .konvrt-mode-bar {
display: none !important;
}
body.has-workflow-mobile-nav:not(.landing-active) .konvrt-controls-pane > .konvrt-mode-bar {
position: static !important;
width: 100% !important;
margin: 0 0 .65rem !important;
padding: 0 !important;
display: block !important;
transform: none !important;
}
body.has-workflow-mobile-nav:not(.landing-active) .konvrt-controls-pane > .konvrt-mode-bar .prompt-mode-switch {
width: 100% !important;
padding: .22rem !important;
display: grid !important;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: .22rem !important;
border-radius: 16px !important;
}
body.has-workflow-mobile-nav:not(.landing-active) .konvrt-controls-pane > .konvrt-mode-bar .prompt-mode-btn {
min-width: 0 !important;
min-height: 42px !important;
padding: .28rem .18rem !important;
display: flex !important;
border-radius: 12px !important;
}
body.has-workflow-mobile-nav:not(.landing-active) .konvrt-controls-pane > .konvrt-mode-bar .prompt-mode-btn strong {
display: block !important;
font-size: .56rem !important;
white-space: normal;
overflow-wrap: anywhere;
}
body.has-workflow-mobile-nav:not(.landing-active) .mobile-social-nav {
width: min(100%, 500px);
min-height: 0;
margin: 0 auto;
padding: 2px 6px calc(2px + env(safe-area-inset-bottom));
display: grid;
/* Six slots since Explore joined the bar (2026-08-23). */
grid-template-columns: repeat(6, minmax(0, 1fr));
align-items: end;
gap: 2px;
/* No card behind the bar: the items sit straight on the page. */
border: 0;
background: transparent;
color: var(--text);
box-shadow: none;
backdrop-filter: none;
-webkit-backdrop-filter: none;
/* Arabic puts the document in RTL, which would mirror these five slots
and move every icon. The bar is a fixed piece of furniture, so its
order stays put in both languages. */
direction: ltr;
}
/* Labels show in full (owner request 2026-08-27: no "…" anywhere); a
longer translation wraps to a second tight line instead of clipping. */
body.has-workflow-mobile-nav:not(.landing-active) .mobile-social-item > span:last-child {
width: 100%;
text-align: center;
white-space: normal;
line-height: 1.05;
overflow-wrap: anywhere;
}
body.has-workflow-mobile-nav:not(.landing-active) .mobile-social-item {
min-width: 0;
min-height: 0;
padding: 2px 2px 1px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-end;
gap: 2px;
border: 0;
border-radius: 14px;
background: transparent;
color: color-mix(in srgb, var(--text) 58%, transparent);
font: inherit;
font-size: .6rem;
font-weight: 650;
line-height: 1;
white-space: nowrap;
transition: color .18s ease, background .18s ease, transform .18s ease;
}
body.has-workflow-mobile-nav:not(.landing-active) .mobile-social-item:not(.mobile-social-konvrt).is-active {
color: var(--accent);
background: color-mix(in srgb, var(--accent) 12%, transparent);
}
body.has-workflow-mobile-nav:not(.landing-active) .mobile-social-item:active {
transform: scale(.96);
}
body.has-workflow-mobile-nav:not(.landing-active) .mobile-social-icon {
width: 24px;
height: 24px;
display: grid;
place-items: center;
}
body.has-workflow-mobile-nav:not(.landing-active) .mobile-social-icon svg {
width: 100%;
height: 100%;
}
/* The profile slot wears the account's first letter instead of a glyph. */
/* No circle anywhere in the bar (owner request 2026-08-23): the account
letter renders like its icon neighbours — a bare glyph, coloured by
the slot's own state. */
body.has-workflow-mobile-nav:not(.landing-active) .mobile-social-avatar-letter {
width: 100%;
height: 100%;
display: grid;
place-items: center;
border-radius: 0;
background: transparent;
color: currentColor;
font-size: .95rem;
font-weight: 800;
line-height: 1;
}
/* The four generation modes now live in this bar, so the duplicate strip
above the controls would only repeat them and steal a row of height. */
body.has-workflow-mobile-nav:not(.landing-active) .konvrt-controls-pane > .konvrt-mode-bar {
display: none !important;
}
/* The Analyzer slot's raised logo orb is gone (owner request
2026-08-23): every slot is now a plain same-size icon over a label,
so the orb, picture and centre-label rules left with the markup. */
body.has-workflow-mobile-nav:not(.landing-active) .mobile-social-item:disabled {
cursor: wait;
opacity: .45;
}
body.has-workflow-mobile-nav:not(.landing-active) .site-header-actions {
/* Same reason as the bar above: the workspace rules pin this to
`position: static !important` in grid column 3. */
position: absolute !important;
right: 0 !important;
bottom: 44px !important;
width: 0;
min-width: 0;
height: 0;
display: block !important;
overflow: visible;
}
body.has-workflow-mobile-nav:not(.landing-active) .auth-account:not(.hidden) {
display: block !important;
}
body.has-workflow-mobile-nav:not(.landing-active) .auth-menu {
position: fixed !important;
left: 12px !important;
right: 12px !important;
top: auto !important;
bottom: calc(52px + env(safe-area-inset-bottom)) !important;
width: auto !important;
max-height: min(70dvh, 520px);
overflow-y: auto;
border-radius: 22px;
}
}
/* Mobile preview containers describe what they hold: the reference keeps the
uploaded photo's own proportions, and the generated device takes the ratio
the user picked in the format row instead of a fixed 9:16 shape.
These must outrank the `body.konvrt-workspace-active` mobile rules above,
so they carry the same prefix rather than relying on source order. */
@media (max-width: 720px) {
body.konvrt-workspace-active .konvrt-phone-composition {
--gen-aspect: 3 / 4;
}
/* Reference: natural aspect ratio, written onto the frame by the image
`load` handler. Height must come from the image, not a forced box. */
body.konvrt-workspace-active .konvrt-phone-side .image-comparison-item.is-reference {
width: min(100%, 190px) !important;
height: auto !important;
aspect-ratio: auto !important;
}
body.konvrt-workspace-active .konvrt-phone-side #improvement-reference-frame {
width: 100% !important;
height: auto !important;
aspect-ratio: auto !important;
overflow: hidden !important;
}
body.konvrt-workspace-active .konvrt-phone-side #improvement-reference-image {
position: static !important;
inset: auto !important;
display: block !important;
width: 100% !important;
height: auto !important;
object-fit: contain !important;
}
/* Generated: the card is the chosen output format. It lives in a narrow
`minmax(0, 1fr)` grid column, so the width is the constrained axis —
height must be derived from it, or a fixed height plus a clamped
width produces the same box for every ratio. */
body.konvrt-workspace-active .konvrt-phone-primary #generated-image-frame {
width: 100% !important;
max-width: 100% !important;
height: auto !important;
min-height: 0 !important;
max-height: none !important;
aspect-ratio: var(--gen-aspect) !important;
justify-self: center !important;
align-self: start !important;
}
}
/* ===== Studio piece editor: options sit ABOVE the trigger row as one
horizontally scrolling strip, on desktop exactly like the phone tray.
The DOM order is head, body, picker — flex column keeps it that way. */
.studio3d .studio3d-dock {
display: flex;
flex-direction: column;
gap: .45rem;
}
/* The panel header already names the piece being edited; the inner
duplicate title row and its second close button only repeated it. */
.studio-side-panel.is-context-editing .studio3d-context-head {
display: none !important;
}
.studio3d .studio3d-context-body .studio3d-chips,
.studio3d .studio3d-context-body .studio3d-swatches {
display: flex !important;
flex-wrap: nowrap !important;
align-items: stretch;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
scrollbar-width: thin;
padding-bottom: .25rem;
}
.studio3d .studio3d-context-body .studio3d-chips > *,
.studio3d .studio3d-context-body .studio3d-swatches > * {
flex: 0 0 auto;
}
/* ===== Desktop: the 3D stage fills its whole pane instead of stopping at
a 4:3 box capped to 58vh. */
@media (min-width: 721px) {
body.konvrt-workspace-active .konvrt-controls-pane .personal-change-panel,
body.konvrt-workspace-active .konvrt-controls-pane .studio3d {
height: 100%;
min-height: 0;
}
body.konvrt-workspace-active .konvrt-controls-pane .studio3d-stage {
height: 100%;
max-height: none;
aspect-ratio: auto;
}
}
/* The ad section lives in the scrollable controls pane on phones (the
preview bar has no room for its fields to expand). The pane is a flex
column, and the section's own `overflow: hidden` (rounded corners)
removes its min-content floor — without an explicit no-shrink flex it is
the one child flex squeezes to a sliver, which clipped the revealed
fields to nothing. Same fix the size picker already carries. */
@media (max-width: 720px) {
body.konvrt-workspace-active .konvrt-controls-pane > #mk-mode-section {
flex: 0 0 auto;
margin: .55rem .6rem .7rem;
}
}
/* ===== One group per main button. When the scene tray is opened from a
bar button, only that button's group is on the tray — the piece editor
for Table/Floor/Backdrop/Camera, or exactly one creative group.
The specificity here is deliberate, not decorative. The tray block
above turns every panel child into a flex row with
`body.konvrt-workspace-active .studio3d:not(.is-fullscreen)
.studio-side-panel .creative-preference-block { display: flex
!important }` — one element plus five classes, (0,5,1). A hide rule
written with five classes and no element is (0,5,0) and quietly loses,
which is what made every bar button show the whole tray. Matching the
`body` prefix and adding the panel's own class puts the hide at (0,7,1)
and each show at (0,8,1). The lighting panel dodges this by carrying an
id inside `:not()`; do not copy that trick, it is an accident. */
body.konvrt-workspace-active .studio3d:not(.is-fullscreen) .studio-side-panel[data-studio-panel="scene"][data-scene-focus] .studio-panel-scroll > * {
display: none !important;
}
/* `:not(.hidden)` is required, not tidiness. These shows carry an id, so
they outrank `.hidden { display: none !important }` — without it the
background group would be forced back on screen in People mode, where
renderStudioModeControls() deliberately hides it. */
body.konvrt-workspace-active .studio3d:not(.is-fullscreen) .studio-side-panel[data-studio-panel="scene"][data-scene-focus="piece"] .studio-panel-scroll > .studio3d-dock:not(.hidden),
body.konvrt-workspace-active .studio3d:not(.is-fullscreen) .studio-side-panel[data-studio-panel="scene"][data-scene-focus="setup"] .studio-panel-scroll > #studio-setup-block:not(.hidden),
body.konvrt-workspace-active .studio3d:not(.is-fullscreen) .studio-side-panel[data-studio-panel="scene"][data-scene-focus="background"] .studio-panel-scroll > #studio-background-preferences:not(.hidden),
body.konvrt-workspace-active .studio3d:not(.is-fullscreen) .studio-side-panel[data-studio-panel="scene"][data-scene-focus="background"] .studio-panel-scroll > #people-fabric-controls:not(.hidden),
body.konvrt-workspace-active .studio3d:not(.is-fullscreen) .studio-side-panel[data-studio-panel="scene"][data-scene-focus="mood"] .studio-panel-scroll > #studio-mood-block:not(.hidden),
body.konvrt-workspace-active .studio3d:not(.is-fullscreen) .studio-side-panel[data-studio-panel="scene"][data-scene-focus="personalize"] .studio-panel-scroll > #studio-quick-personalize:not(.hidden),
body.konvrt-workspace-active .studio3d:not(.is-fullscreen) .studio-side-panel[data-studio-panel="scene"][data-scene-focus="priority"] .studio-panel-scroll > #studio-priority-block:not(.hidden) {
display: flex !important;
}
/* In the tray each option is its own button, so the sentence of
explanation under the name only makes the row wider than the bar. */
body.konvrt-workspace-active .studio3d:not(.is-fullscreen) .studio-side-panel .creative-choice-copy > span {
display: none !important;
}
/* A mode-hidden bar button must actually disappear — the tray styles set
display on these buttons with !important, so .hidden needs to outrank. */
.studio-mobile-piece-actions button.hidden {
display: none !important;
}
/* The creative-direction group starts at Shot; draw the same heavier
boundary the bar uses between lighting, the set, and the camera. */
body.konvrt-workspace-active .studio3d:not(.is-fullscreen) .studio-mobile-piece-actions button[data-studio-quick-piece="setup"] {
border-inline-start: 2px solid rgba(255,255,255,.38) !important;
}
/* ===== The bar holds twelve sections now, and it was centred. A centred
flex row that overflows spills past BOTH edges, and the part that spills
past the start edge cannot be scrolled back to — which is why several
buttons were simply unreachable. Start-aligned, the row scrolls
normally; the buttons also grow to share any spare width so nothing
scrolls at all on a wide pane. */
body.konvrt-workspace-active .studio3d:not(.is-fullscreen) .studio-mobile-piece-actions {
justify-content: flex-start !important;
scroll-snap-type: x proximity;
/* Fades the last button at the trailing edge so it reads as "more here"
rather than as a button that happens to be cut in half. */
-webkit-mask-image: linear-gradient(to right, #000 calc(100% - 22px), transparent 100%);
mask-image: linear-gradient(to right, #000 calc(100% - 22px), transparent 100%);
}
[dir="rtl"] body.konvrt-workspace-active .studio3d:not(.is-fullscreen) .studio-mobile-piece-actions {
-webkit-mask-image: linear-gradient(to left, #000 calc(100% - 22px), transparent 100%);
mask-image: linear-gradient(to left, #000 calc(100% - 22px), transparent 100%);
}
body.konvrt-workspace-active .studio3d:not(.is-fullscreen) .studio-mobile-piece-actions button {
flex: 1 1 auto !important;
width: auto !important;
min-width: 46px !important;
max-width: 78px !important;
scroll-snap-align: start;
}
/* ===== Readable tray. The icon-only interior left controls as anonymous
40px squares, and several (the Quality buttons among them) kept their
page text colour — black glyphs on the dark bar. Every option now shows
its icon over its name in light-on-dark, and each tray leads with a
small caption naming the section. Same selector prefix as the tray
block, later in the sheet, so these win at equal specificity. */
body.konvrt-workspace-active .konvrt-controls-pane .studio3d:not(.is-fullscreen) {
--studio-tray: 74px;
}
body.konvrt-workspace-active .studio3d:not(.is-fullscreen) .studio-side-panel .studio-control-head,
body.konvrt-workspace-active .studio3d:not(.is-fullscreen) .studio-side-panel .personal-group-head {
display: block !important;
flex: 0 0 auto;
margin: 0 !important;
padding: 0 !important;
max-width: 64px;
/* The heads double as collapse toggles in the drawer; on a one-row tray
a collapsing caption is a trap, so they are inert here. */
pointer-events: none;
}
body.konvrt-workspace-active .studio3d:not(.is-fullscreen) .studio-side-panel .studio-control-head strong,
body.konvrt-workspace-active .studio3d:not(.is-fullscreen) .studio-side-panel .personal-group-head strong,
body.konvrt-workspace-active .studio3d:not(.is-fullscreen) .studio-side-panel .studio3d-label {
display: block !important;
color: rgba(255,255,255,.55) !important;
font-size: .42rem !important;
font-weight: 800;
line-height: 1.15;
text-transform: uppercase;
letter-spacing: .05em;
white-space: normal;
max-width: 64px;
overflow: hidden;
}
body.konvrt-workspace-active .studio3d:not(.is-fullscreen) .studio-side-panel .studio-control-head span,
body.konvrt-workspace-active .studio3d:not(.is-fullscreen) .studio-side-panel .personal-group-head span {
display: none !important;
}
body.konvrt-workspace-active .studio3d:not(.is-fullscreen) .studio-side-panel .studio-light-toggle,
body.konvrt-workspace-active .studio3d:not(.is-fullscreen) .studio-side-panel .studio-move-toggle,
body.konvrt-workspace-active .studio3d:not(.is-fullscreen) .studio-side-panel .personalize-prompt-button,
body.konvrt-workspace-active .studio3d:not(.is-fullscreen) .studio-side-panel .personal-suggestion-chip,
body.konvrt-workspace-active .studio3d:not(.is-fullscreen) .studio-side-panel .creative-choice,
body.konvrt-workspace-active .studio3d:not(.is-fullscreen) .studio-side-panel .studio3d-chip,
body.konvrt-workspace-active .studio3d:not(.is-fullscreen) .studio-side-panel .studio3d-chip.has-preview {
width: auto !important;
min-width: 52px !important;
max-width: 92px !important;
height: 52px !important;
min-height: 52px !important;
padding: .16rem .3rem !important;
display: grid !important;
grid-template-columns: none !important;
grid-template-rows: auto auto !important;
place-items: center !important;
align-content: center !important;
gap: 2px !important;
border: 1px solid rgba(255,255,255,.16) !important;
border-radius: 10px !important;
background: rgba(255,255,255,.08) !important;
color: rgba(255,255,255,.9) !important;
box-shadow: none !important;
}
body.konvrt-workspace-active .studio3d:not(.is-fullscreen) .studio-side-panel .studio-light-toggle.is-active,
body.konvrt-workspace-active .studio3d:not(.is-fullscreen) .studio-side-panel .studio-move-toggle.is-active,
body.konvrt-workspace-active .studio3d:not(.is-fullscreen) .studio-side-panel .personalize-prompt-button.is-selected,
body.konvrt-workspace-active .studio3d:not(.is-fullscreen) .studio-side-panel .personal-suggestion-chip.is-selected,
body.konvrt-workspace-active .studio3d:not(.is-fullscreen) .studio-side-panel .creative-choice.is-selected,
body.konvrt-workspace-active .studio3d:not(.is-fullscreen) .studio-side-panel .studio3d-chip.is-selected,
body.konvrt-workspace-active .studio3d:not(.is-fullscreen) .studio-side-panel .studio3d-chip[aria-pressed="true"] {
background: color-mix(in srgb, var(--accent) 72%, transparent) !important;
border-color: transparent !important;
color: #fff !important;
}
/* Names back on every option: icon above, name below, one line each. */
body.konvrt-workspace-active .studio3d:not(.is-fullscreen) .studio-side-panel .studio-light-toggle span,
body.konvrt-workspace-active .studio3d:not(.is-fullscreen) .studio-side-panel .studio-move-toggle span,
body.konvrt-workspace-active .studio3d:not(.is-fullscreen) .studio-side-panel .personalize-prompt-button strong,
body.konvrt-workspace-active .studio3d:not(.is-fullscreen) .studio-side-panel .personal-suggestion-chip span,
body.konvrt-workspace-active .studio3d:not(.is-fullscreen) .studio-side-panel .creative-choice-copy strong,
body.konvrt-workspace-active .studio3d:not(.is-fullscreen) .studio-side-panel .studio3d-chip-label {
display: block !important;
position: static !important;
width: auto !important;
max-width: 84px;
white-space: normal;
overflow-wrap: anywhere;
font-size: .4rem !important;
font-weight: 700;
line-height: 1.1;
color: inherit !important;
letter-spacing: .01em;
}
body.konvrt-workspace-active .studio3d:not(.is-fullscreen) .studio-side-panel .studio-light-toggle svg,
body.konvrt-workspace-active .studio3d:not(.is-fullscreen) .studio-side-panel .studio-move-toggle svg,
body.konvrt-workspace-active .studio3d:not(.is-fullscreen) .studio-side-panel .personalize-prompt-button svg,
body.konvrt-workspace-active .studio3d:not(.is-fullscreen) .studio-side-panel .personal-suggestion-chip svg,
body.konvrt-workspace-active .studio3d:not(.is-fullscreen) .studio-side-panel .creative-choice-icon svg {
width: 16px !important;
height: 16px !important;
fill: none !important;
stroke: currentColor !important;
stroke-width: 1.8;
stroke-linecap: round;
stroke-linejoin: round;
}
body.konvrt-workspace-active .studio3d:not(.is-fullscreen) .studio-side-panel .creative-choice-icon {
width: auto !important;
height: auto !important;
background: none !important;
border: 0 !important;
color: inherit !important;
}
/* Material/preview chips keep their swatch, gaining the name under it. */
body.konvrt-workspace-active .studio3d:not(.is-fullscreen) .studio-side-panel .studio3d-chip-preview {
width: 22px !important;
height: 22px !important;
border-radius: 6px;
}
/* ===== Extract 3D: the button only changed its words while it worked, so
a long TripoSR queue looked like nothing happening. */
.studio-extract-3d .studio-3d-spinner { display: none; }
.studio-quality-badge[data-state="working"] .studio-extract-3d svg:not(.studio-3d-spinner) { display: none; }
.studio-quality-badge[data-state="working"] .studio-extract-3d .studio-3d-spinner {
display: block;
animation: studio3dSpin .8s linear infinite;
}
.studio-quality-badge[data-state="working"] .studio-extract-3d { cursor: progress; }
@keyframes studio3dSpin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
.studio-quality-badge[data-state="working"] .studio-extract-3d .studio-3d-spinner { animation-duration: 2.4s; }
}
/* ===== Desktop declutter (owner request 2026-08-11). Same two-pane
layout, quieter chrome: the decorative blurred background wash is
hidden in the workspace and every drop shadow inside the two panes is
removed, so panels and cards read flat and calm. Purely decorative
properties only — structure, spacing, colors and focus outlines are
untouched. Last block in the sheet so it wins the cascade. */
@media (min-width: 721px) {
body.konvrt-workspace-active::before,
body.konvrt-workspace-active::after {
display: none;
}
body.konvrt-workspace-active .konvrt-controls-pane *,
body.konvrt-workspace-active .konvrt-phone-pane * {
box-shadow: none !important;
}
body.konvrt-workspace-active .site-header-inner {
box-shadow: none !important;
}
}
/* ── Brand manager dialog ──────────────────────────────────────────────
One calm sheet: saved brands on top, the AI upload tile as the hero,
then the three fields and one primary action. */
#brand-manager-overlay {
backdrop-filter: blur(6px);
-webkit-backdrop-filter: blur(6px);
animation: bm-overlay-in .18s ease;
}
@keyframes bm-overlay-in { from { opacity: 0; } }
.bm-sheet {
width: 100%;
max-width: 560px;
max-height: 88vh;
overflow-y: auto;
overscroll-behavior: contain;
scrollbar-width: thin;
display: grid;
gap: .8rem;
padding: 1.2rem 1.3rem 1.3rem;
border-radius: 22px;
border: 1px solid color-mix(in srgb, var(--line) 55%, transparent);
background: var(--surface, #fff);
color: var(--text, #1a1d26);
box-shadow: 0 30px 90px rgba(20, 8, 6, .35);
animation: bm-sheet-in .26s cubic-bezier(.16, 1, .3, 1);
}
@keyframes bm-sheet-in {
from { transform: translateY(14px) scale(.97); opacity: 0; }
}
/* Phones: the dialog rides up from the bottom like an app sheet. */
@media (max-width: 640px) {
#brand-manager-overlay {
align-items: flex-end !important;
padding: 0 !important;
}
.bm-sheet {
max-width: none;
max-height: 92dvh;
border-radius: 24px 24px 0 0;
border-bottom: 0;
padding: 1.35rem 1.05rem calc(1.15rem + env(safe-area-inset-bottom));
animation: bm-sheet-up .3s cubic-bezier(.16, 1, .3, 1);
}
@keyframes bm-sheet-up { from { transform: translateY(40%); opacity: .4; } }
/* Grabber: says "this sheet is a surface you dismiss downward". */
.bm-sheet::before {
content: "";
position: absolute;
top: 8px;
left: 50%;
transform: translateX(-50%);
width: 40px;
height: 4px;
border-radius: 999px;
background: color-mix(in srgb, var(--muted) 40%, transparent);
}
.bm-sheet { position: relative; }
}
@media (prefers-reduced-motion: reduce) {
#brand-manager-overlay, .bm-sheet { animation: none !important; }
}
.bm-head {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: .6rem;
}
.bm-head-copy { display: grid; gap: .15rem; min-width: 0; }
.bm-head-copy strong { font-size: .82rem; line-height: 1.15; }
.bm-head-copy span { color: var(--muted); font-size: .56rem; line-height: 1.3; }
.bm-close {
flex: 0 0 30px;
width: 30px;
height: 30px;
display: grid;
place-items: center;
padding: 0;
border: 1px solid color-mix(in srgb, var(--line) 85%, transparent);
border-radius: 999px;
background: transparent;
color: var(--muted);
cursor: pointer;
transition: color .15s ease, border-color .15s ease;
}
.bm-close:hover { color: var(--text); border-color: var(--muted); }
.bm-close svg { width: 13px; height: 13px; }
/* Saved brands: the Swatch Rack. Every brand is a big square paint-swatch
card — hang-hole on top, logo/monogram coin in the middle, and the card
literally dipped in that brand's own palette along the bottom. The
active brand carries a wax seal pressed onto the paint line. */
.bm-list {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 12px;
padding: 4px;
overflow-y: auto;
max-height: min(52vh, 420px);
}
.bm-tile-wrap { position: relative; min-width: 0; }
.bm-tile {
display: block;
width: 100%;
aspect-ratio: 1;
position: relative;
overflow: hidden;
padding: 0;
border: 1px solid var(--line);
border-radius: 14px;
background: var(--surface);
color: var(--text);
cursor: pointer;
transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
/* Brand paper stock: the zone above the dip is tinted by the brand's own
first color; mixing against --surface keeps it right in dark theme. */
.bm-tile.has-tint { background: color-mix(in srgb, var(--surface) 93%, var(--c1) 7%); }
.bm-tile::after {
content: "";
position: absolute;
inset: 0;
pointer-events: none;
background: linear-gradient(115deg, rgba(255, 255, 255, .14), transparent 40%);
}
html.dark .bm-tile::after { background: linear-gradient(115deg, rgba(255, 255, 255, .06), transparent 40%); }
.bm-tile.is-live {
outline: 1.5px solid var(--accent);
outline-offset: 1px;
box-shadow: 0 6px 18px color-mix(in srgb, var(--accent) 25%, transparent);
}
.bm-tile-hole {
position: absolute;
top: 10px;
left: 50%;
transform: translateX(-50%);
width: 12px;
height: 12px;
border-radius: 50%;
background: color-mix(in srgb, var(--text) 8%, var(--surface));
box-shadow: inset 0 1px 2px rgba(0, 0, 0, .28);
}
.bm-tile-face {
position: absolute;
inset: 0 0 40% 0;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: .35rem;
padding: 16px 10px 0;
min-width: 0;
}
.bm-tile-coin {
flex: 0 0 auto;
width: 44px;
height: 44px;
border-radius: 50%;
display: grid;
place-items: center;
background: color-mix(in srgb, var(--text) 16%, var(--surface));
box-shadow: inset 0 2px 3px rgba(255, 255, 255, .5), inset 0 -2px 3px rgba(0, 0, 0, .18);
font-size: 20px;
font-weight: 700;
color: var(--c1, var(--accent));
}
.bm-tile-logo {
flex: 0 0 auto;
width: 48px;
height: 48px;
object-fit: contain;
filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .15));
}
.bm-tile-name {
max-width: calc(100% - 8px);
font-size: 13px;
font-weight: 600;
line-height: 1.15;
text-align: center;
white-space: normal;
overflow-wrap: anywhere;
}
/* The dip: the palette itself, text-free, bottom 40% of the card. */
.bm-tile-dip {
position: absolute;
inset-inline: 0;
bottom: 0;
height: 40%;
background: var(--dip, linear-gradient(to top, var(--accent) 0 55%, var(--brand-light) 55% 100%));
}
/* Wet-paint dribbles rising off the dip's top edge. */
.bm-tile-dip::before,
.bm-tile-dip::after {
content: "";
position: absolute;
bottom: 100%;
width: 9px;
border-radius: 5px 5px 0 0;
background: var(--dip-top, var(--brand-light));
transition: height .18s ease;
}
.bm-tile-dip::before { inset-inline-start: 22%; height: 10px; }
.bm-tile-dip::after { inset-inline-start: 64%; height: 16px; }
.bm-tile-wrap:hover .bm-tile-dip::before { height: 12px; }
.bm-tile-wrap:hover .bm-tile-dip::after { height: 18px; }
/* The wax seal: display-only stamp on the active card, ghost dashed
button (tap to set active) on the rest. Straddles the paint line. */
.bm-seal {
position: absolute;
inset-inline-end: 10px;
bottom: calc(40% - 16px);
width: 32px;
height: 32px;
padding: 0;
display: grid;
place-items: center;
border: 1.5px dashed var(--muted);
border-radius: 50%;
background: transparent;
color: transparent;
font-size: 14px;
font-weight: 800;
line-height: 1;
cursor: pointer;
opacity: .35;
transition: opacity .15s ease, color .15s ease;
}
.bm-tile-wrap:hover .bm-seal,
.bm-tile-wrap:focus-within .bm-seal { opacity: 1; color: var(--muted); }
.bm-seal.is-live {
border: 0;
border-radius: 46% 54% 50% 50% / 52% 48% 55% 45%;
background: radial-gradient(circle at 35% 30%, color-mix(in srgb, var(--accent) 70%, white), var(--accent) 60%, color-mix(in srgb, var(--accent) 72%, black));
color: var(--accent-fg);
text-shadow: 0 1px 1px rgba(0, 0, 0, .25);
opacity: 1;
cursor: default;
}
@keyframes bm-stamp {
from { transform: scale(1.6); opacity: 0; }
60% { transform: scale(.92); }
to { transform: scale(1); }
}
/* The new-brand card: a blank swatch waiting to be dipped. */
.bm-tile-new { border: 1.5px dashed var(--line); background: transparent; }
.bm-tile-new .bm-tile-coin {
background: transparent;
border: 1.5px dashed var(--muted);
box-shadow: none;
color: var(--muted);
font-size: 22px;
font-weight: 600;
transition: color .15s ease, border-color .15s ease;
}
.bm-tile-new .bm-tile-name { color: var(--muted); }
.bm-tile-tray {
position: absolute;
inset-inline: 0;
bottom: 0;
height: 40%;
border-top: 1px dashed var(--line);
background: color-mix(in srgb, var(--muted) 8%, transparent);
transition: background .18s ease;
}
.bm-tile-new:hover,
.bm-tile-new:focus-visible { border-color: var(--accent); }
.bm-tile-new:hover .bm-tile-coin,
.bm-tile-new:focus-visible .bm-tile-coin { color: var(--accent); border-color: var(--accent); }
.bm-tile-new:hover .bm-tile-tray,
.bm-tile-new:focus-visible .bm-tile-tray { background: color-mix(in srgb, var(--brand-light) 45%, transparent); }
.bm-tile:focus-visible,
.bm-seal:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
@media (prefers-reduced-motion: no-preference) {
.bm-tile:hover,
.bm-tile:focus-visible {
transform: translateY(-3px) rotate(-.4deg);
box-shadow: 0 10px 24px rgba(0, 0, 0, .14);
}
[dir="rtl"] .bm-tile:hover,
[dir="rtl"] .bm-tile:focus-visible { transform: translateY(-3px) rotate(.4deg); }
.bm-tile:active { transform: translateY(0) scale(.98); }
.bm-seal.is-stamping { animation: bm-stamp .28s ease-out; }
}
/* One slim, quiet dropzone row — still a real drag-and-drop target
(JS toggles .is-drag while a file hovers), no longer a dominant box. */
.bm-upload {
display: flex;
align-items: center;
gap: .7rem;
padding: .65rem .8rem;
border: 1.5px dashed color-mix(in srgb, var(--accent) 30%, var(--line));
border-radius: 14px;
background: color-mix(in srgb, var(--accent) 3%, var(--surface));
text-align: start;
cursor: pointer;
transition: border-color .16s ease, background .16s ease;
}
.bm-upload:hover,
.bm-upload.is-drag {
border-color: var(--accent);
background: color-mix(in srgb, var(--accent) 7%, var(--surface));
}
.bm-upload.is-drag { border-style: solid; }
.bm-upload svg {
flex: 0 0 auto;
width: 18px;
height: 18px;
color: var(--accent);
box-sizing: content-box;
padding: 8px;
border-radius: 999px;
background: color-mix(in srgb, var(--accent) 10%, transparent);
}
.bm-upload-copy { display: grid; gap: .12rem; min-width: 0; }
.bm-upload strong { font-size: .66rem; line-height: 1.25; }
.bm-upload span span,
.bm-upload-copy > span { color: var(--muted); font-size: .54rem; line-height: 1.4; }
/* Section eyebrow: whitespace does the separating, not another line. */
.bm-form-title {
margin-top: .35rem;
color: var(--muted);
font-size: .58rem;
font-weight: 850;
letter-spacing: .05em;
text-transform: uppercase;
}
html[dir="rtl"] .bm-form-title { letter-spacing: 0; }
.bm-field { display: grid; gap: .28rem; min-width: 0; }
.bm-field > label,
.bm-label {
color: var(--muted);
font-size: .56rem;
font-weight: 800;
letter-spacing: .02em;
}
.bm-field input[type="text"],
.bm-field textarea {
width: 100%;
min-height: 44px;
padding: .55rem .7rem;
border: 1px solid var(--line);
border-radius: 12px;
background: color-mix(in srgb, var(--surface) 60%, var(--bg));
color: var(--text);
font: inherit;
font-size: .7rem;
line-height: 1.4;
transition: border-color .14s ease, background .14s ease, box-shadow .14s ease;
}
.bm-field textarea { resize: vertical; min-height: 58px; }
.bm-field input[type="text"]:hover,
.bm-field textarea:hover { border-color: color-mix(in srgb, var(--accent) 30%, var(--line)); }
.bm-field input[type="text"]:focus-visible,
.bm-field textarea:focus-visible {
outline: 0;
border-color: var(--accent);
background: var(--surface);
box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 16%, transparent);
}
.bm-hint { color: var(--muted); font-size: .52rem; line-height: 1.35; }
.bm-colors { display: flex; align-items: center; gap: .4rem; flex-wrap: wrap; }
/* The native color input dressed as a modern "add a color" chip: dashed
circle with a plus, the picked color never shown on the trigger. */
.bm-colors input[type="color"] {
width: 30px;
height: 30px;
padding: 0;
border: 1.5px dashed color-mix(in srgb, var(--muted) 65%, transparent);
border-radius: 999px;
background:
url('data:image/svg+xml;utf8,') center / 13px no-repeat;
cursor: pointer;
transition: border-color .15s ease, transform .15s ease;
}
.bm-colors input[type="color"]:hover { border-color: var(--accent); transform: scale(1.06); }
.bm-colors input[type="color"]::-webkit-color-swatch-wrapper { padding: 0; opacity: 0; }
.bm-colors input[type="color"]::-webkit-color-swatch { opacity: 0; border: 0; }
.bm-colors input[type="color"]::-moz-color-swatch { opacity: 0; border: 0; }
.bm-chips { display: flex; gap: .35rem; flex-wrap: wrap; }
.bm-chip {
width: 30px;
height: 30px;
padding: 0;
border: 1px solid color-mix(in srgb, var(--line) 80%, transparent);
border-radius: 999px;
box-shadow: inset 0 1px 2px rgba(255, 255, 255, .25), 0 1px 3px rgba(0, 0, 0, .12);
cursor: pointer;
position: relative;
transition: transform .15s ease;
}
.bm-chip:hover { transform: scale(1.08); }
.bm-chip:hover::after {
content: "\00d7";
position: absolute;
inset: 0;
display: grid;
place-items: center;
color: #fff;
font-weight: 800;
text-shadow: 0 1px 3px rgba(0, 0, 0, .6);
background: rgba(0, 0, 0, .28);
border-radius: 999px;
}
.bm-logo-row {
display: flex;
align-items: center;
gap: .5rem;
padding: .4rem .5rem;
border: 1px solid var(--line);
border-radius: 10px;
}
.bm-logo-row img {
height: 32px;
max-width: 110px;
object-fit: contain;
border-radius: 6px;
}
.bm-logo-row .bm-hint { flex: 1 1 auto; min-width: 0; }
.bm-logo-row button {
border: 1px solid var(--line);
background: transparent;
color: var(--muted);
border-radius: 8px;
min-height: 28px;
padding: .15rem .5rem;
font-size: .55rem;
cursor: pointer;
}
/* Action footer: quiet danger on the start side, one confident primary.
No divider — the whitespace above it is the separation. */
.bm-actions {
display: flex;
align-items: center;
gap: .5rem;
flex-wrap: wrap;
margin-top: .3rem;
}
.bm-actions button {
min-height: 46px;
padding: .45rem 1rem;
border: 1px solid var(--line);
border-radius: 13px;
background: transparent;
color: var(--text);
font: inherit;
font-size: .68rem;
font-weight: 750;
cursor: pointer;
transition: transform .15s ease, box-shadow .15s ease, background .15s ease, border-color .15s ease;
}
.bm-actions .bm-primary {
flex: 1 1 auto;
order: 2;
border: 0;
background: linear-gradient(135deg, var(--accent, #550000), color-mix(in srgb, var(--accent, #550000) 76%, #a36d52 24%));
color: var(--accent-fg, #fff);
font-weight: 800;
box-shadow: 0 8px 20px color-mix(in srgb, var(--accent) 26%, transparent);
}
.bm-actions .bm-primary:hover { transform: translateY(-1px); }
.bm-actions .bm-primary:active { transform: translateY(0) scale(.99); }
.bm-actions .bm-danger {
order: 1;
border-color: transparent;
color: #c0392b;
}
.bm-actions .bm-danger:hover {
border-color: color-mix(in srgb, #c0392b 45%, transparent);
background: color-mix(in srgb, #c0392b 7%, transparent);
}
.bm-status { min-height: 1.1em; color: var(--muted); font-size: .58rem; line-height: 1.4; }
/* ────────────────────────────── Studio stage v3 (2026-08-13) ──────────────────────────────
Before/after stage: the uploaded photo and the generated slot sit side
by side in the chosen format's shape, each with a skeleton shimmer
while empty and a small badge naming it. History is a vertical glass
rail on the stage's end edge. The floating bar holds ONLY the change
chips (size / strength / brand & ad); Upload and Generate live in
their own action row under the stage. */
.konvrt-preview-tools .generated-prompt-panel.kv-stage {
position: relative;
display: block !important;
flex: 1 1 auto;
width: 100% !important;
height: auto !important;
min-height: min(50vh, 480px) !important;
margin: 0 !important;
padding: 0 !important;
border: 1px solid color-mix(in srgb, var(--line) 78%, transparent) !important;
border-radius: 18px !important;
overflow: hidden;
background:
radial-gradient(color-mix(in srgb, var(--text) 8%, transparent) 1px, transparent 1.2px) 0 0 / 19px 19px,
radial-gradient(120% 90% at 50% 0%, color-mix(in srgb, var(--surface) 88%, var(--bg)), var(--bg)) !important;
box-shadow: inset 0 1px 0 color-mix(in srgb, #fff 45%, transparent) !important;
}
/* The signed-in workspace strips panel backgrounds wholesale; the stage
is the one panel that keeps its own surface. */
body.konvrt-workspace-active .konvrt-preview-tools > .generated-prompt-panel.kv-stage {
background-color: var(--bg) !important;
background-image:
radial-gradient(color-mix(in srgb, var(--text) 8%, transparent) 1px, transparent 1.2px),
radial-gradient(120% 90% at 50% 0%, color-mix(in srgb, var(--surface) 88%, var(--bg)), var(--bg)) !important;
background-size: 19px 19px, 100% 100% !important;
box-shadow: inset 0 1px 0 color-mix(in srgb, #fff 45%, transparent) !important;
}
/* Canvas zone: the before/after pair, as big as the stage allows. */
.kv-stage .kv-canvas {
position: absolute;
inset: 0;
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
grid-template-rows: minmax(0, 1fr) auto auto auto;
align-items: center;
justify-items: center;
column-gap: .7rem;
row-gap: .25rem;
padding: .7rem;
}
/* The two slots: equal, format-shaped, centered in their halves. */
.kv-stage #generated-image-frame,
.kv-stage .image-comparison-item.is-reference {
position: relative !important;
inset: auto !important;
place-self: center;
/* As big as the stage allows: fill the half column, the chosen
format's ratio sets the height, the row height is the only cap. */
width: 100% !important;
max-width: 100% !important;
height: auto !important;
min-height: 0 !important;
max-height: 100% !important;
aspect-ratio: var(--gen-aspect, 3 / 4) !important;
margin: 0 !important;
padding: 0 !important;
display: block !important;
overflow: hidden !important;
border: 0 !important;
border-radius: 14px !important;
background: var(--surface) !important;
box-shadow: 0 16px 38px rgba(28, 15, 12, .16);
}
.kv-stage .image-comparison-item.is-reference {
grid-area: auto !important;
grid-column: 1 !important;
grid-row: 1 !important;
}
.kv-stage #generated-image-frame {
grid-column: 2 !important;
grid-row: 1 !important;
min-width: 0;
}
.kv-stage #improvement-reference-frame {
position: absolute !important;
inset: 0 !important;
width: 100% !important;
height: 100% !important;
min-height: 0 !important;
max-height: none !important;
aspect-ratio: auto !important;
margin: 0 !important;
border: 0 !important;
border-radius: 0 !important;
background: transparent !important;
}
.kv-stage #improvement-reference-image,
.kv-stage #generated-image-result {
width: 100% !important;
height: 100% !important;
max-height: none !important;
object-fit: cover !important;
}
.kv-stage .image-comparison-item.is-reference .image-comparison-head,
.kv-stage .image-comparison-item.is-reference .image-comparison-caption {
display: none !important;
}
/* Skeleton shimmer while a slot is empty. */
@keyframes kv-shimmer {
to { background-position: -200% 0, 0 0; }
}
.kv-stage #generated-image-frame.is-empty,
.kv-stage .image-comparison-item.is-reference:has(#improvement-reference-image:not([src])) {
background:
linear-gradient(100deg,
transparent 38%,
color-mix(in srgb, var(--text) 7%, transparent) 50%,
transparent 62%) 200% 0 / 200% 100% no-repeat,
color-mix(in srgb, var(--surface) 80%, var(--bg)) !important;
box-shadow: none;
animation: kv-shimmer 1.8s linear infinite;
}
@media (prefers-reduced-motion: reduce) {
.kv-stage #generated-image-frame.is-empty,
.kv-stage .image-comparison-item.is-reference:has(#improvement-reference-image:not([src])) {
animation: none;
}
}
.kv-stage #generated-image-frame.is-empty .generated-image-placeholder {
position: absolute;
inset: 0;
display: grid;
place-items: center;
margin: 0 !important;
padding: .9rem;
color: var(--muted);
font-size: .54rem;
line-height: 1.4;
text-align: center;
}
.kv-stage .image-comparison-item.is-reference .image-frame-empty {
position: absolute;
inset: 0;
display: none;
place-items: center;
padding: .9rem;
color: var(--muted);
font-size: .54rem;
line-height: 1.4;
text-align: center;
}
.kv-stage .image-comparison-item.is-reference:has(#improvement-reference-image:not([src])) .image-frame-empty {
display: grid;
}
.kv-stage .image-comparison-item.is-reference:has(#improvement-reference-image:not([src])) #improvement-reference-image {
display: none !important;
}
/* Slot badges: one quiet word naming each side. */
.kv-slot-badge {
position: absolute;
top: .5rem;
inset-inline-start: .5rem;
z-index: 2;
padding: .18rem .5rem;
border-radius: 999px;
background: rgba(20, 12, 10, .58);
backdrop-filter: blur(5px);
color: #fff;
font-size: .48rem;
font-weight: 750;
line-height: 1.2;
letter-spacing: .02em;
pointer-events: none;
}
.kv-stage .konvrt-save-hint {
grid-column: 1 / -1;
grid-row: 2;
margin: 0;
color: var(--muted) !important;
font-size: .5rem !important;
font-weight: 600 !important;
text-align: center;
}
/* The Share-to-Explore pill takes the canvas's last row, under the hint
(and under the history viewer when that is open). */
.kv-stage .konvrt-share-btn {
grid-column: 1 / -1;
grid-row: 4;
margin: 0;
}
/* History: horizontal strip at the very bottom of the pane. */
.konvrt-preview-tools > .konvrt-history-rail {
position: static !important;
width: 100% !important;
height: auto !important;
max-height: none !important;
margin: .45rem 0 0 !important;
padding: .35rem 0 0 !important;
overflow: hidden;
border: 0 !important;
border-top: 1px solid color-mix(in srgb, var(--line) 70%, transparent) !important;
border-radius: 0;
background: transparent !important;
backdrop-filter: none;
}
.konvrt-preview-tools > .konvrt-history-rail .konvrt-history-title {
display: block !important;
margin: 0 0 .25rem;
color: var(--muted);
font-size: .52rem;
font-weight: 750;
letter-spacing: 0;
text-align: start;
}
.konvrt-preview-tools > .konvrt-history-rail .konvrt-history-track {
width: 100%;
height: auto;
max-height: none;
display: flex;
flex-direction: row;
align-items: center;
gap: .3rem;
padding: 0 0 .25rem;
overflow-x: auto;
overflow-y: hidden;
overscroll-behavior-inline: contain;
-webkit-overflow-scrolling: touch;
scroll-snap-type: x proximity;
scrollbar-width: thin;
scrollbar-color: color-mix(in srgb, var(--text) 28%, transparent) transparent;
}
.konvrt-preview-tools > .konvrt-history-rail .konvrt-history-track::-webkit-scrollbar {
display: block;
height: 5px;
}
.konvrt-preview-tools > .konvrt-history-rail .konvrt-history-track::-webkit-scrollbar-thumb {
border-radius: 999px;
background: color-mix(in srgb, var(--text) 28%, transparent);
}
.konvrt-preview-tools > .konvrt-history-rail .konvrt-history-track::-webkit-scrollbar-track {
background: transparent;
}
.konvrt-preview-tools > .konvrt-history-rail .konvrt-history-thumb {
width: auto !important;
min-width: 40px;
height: 68px !important;
min-height: 0;
flex: 0 0 auto;
scroll-snap-align: start;
overflow: hidden;
border-radius: 9px;
border: 1px solid color-mix(in srgb, var(--line) 70%, transparent);
opacity: .88;
transition: opacity .15s ease, border-color .15s ease;
}
.konvrt-preview-tools > .konvrt-history-rail .konvrt-history-thumb:hover { opacity: 1; }
.konvrt-preview-tools > .konvrt-history-rail .konvrt-history-thumb.is-active {
opacity: 1;
border-color: var(--accent);
box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 25%, transparent);
}
.konvrt-preview-tools > .konvrt-history-rail .konvrt-history-thumb img,
.konvrt-preview-tools > .konvrt-history-rail .konvrt-history-thumb .konvrt-history-image {
position: static;
width: auto;
height: 100%;
object-fit: contain;
display: block;
}
/* The chips bar sits in flow under the stage, above history. Its
popovers still anchor to the dock and open upward over the stage. */
.kv-dock {
position: relative;
z-index: 6;
display: flex;
justify-content: center;
width: 100%;
margin-top: .5rem;
}
.kv-bar {
display: flex;
align-items: stretch;
gap: .25rem;
min-width: 0;
max-width: 100%;
padding: .28rem;
border: 1px solid color-mix(in srgb, var(--line) 72%, transparent);
border-radius: 999px;
background: color-mix(in srgb, var(--surface) 76%, transparent);
backdrop-filter: blur(14px) saturate(1.15);
-webkit-backdrop-filter: blur(14px) saturate(1.15);
box-shadow: 0 14px 34px rgba(26, 14, 12, .18);
}
.kv-chip {
display: inline-flex;
align-items: center;
gap: .26rem;
flex: 0 1 auto;
min-width: 0;
min-height: 36px;
padding: .2rem .55rem;
border: 1px solid transparent;
border-radius: 999px;
background: transparent;
color: var(--text);
font-size: .56rem;
font-weight: 750;
white-space: nowrap;
cursor: pointer;
transition: background .14s ease, border-color .14s ease;
}
.kv-chip-label {
min-width: 0;
white-space: normal;
overflow-wrap: anywhere;
}
.kv-chip:hover { background: color-mix(in srgb, var(--accent) 7%, transparent); }
.kv-chip.is-open {
border-color: color-mix(in srgb, var(--accent) 45%, var(--line));
background: color-mix(in srgb, var(--accent) 10%, transparent);
}
.kv-chip > svg:first-child {
width: 14px;
height: 14px;
flex: 0 0 14px;
color: var(--muted);
}
.kv-chip.is-open > svg:first-child { color: var(--accent); }
.kv-chip-caret {
width: 11px;
height: 11px;
flex: 0 0 11px;
color: var(--muted);
transition: transform .16s ease;
}
.kv-chip.is-open .kv-chip-caret { transform: rotate(180deg); }
.kv-chip.has-dot { position: relative; }
.kv-chip.has-dot::after {
content: "";
position: absolute;
top: 6px;
inset-inline-end: 6px;
width: 6px;
height: 6px;
border-radius: 50%;
background: var(--accent);
box-shadow: 0 0 0 2px var(--surface);
}
/* Popovers: the real control sections, floating above the bar. */
.kv-pop {
position: absolute;
inset-inline: 0;
bottom: calc(100% + .5rem);
z-index: 7;
max-height: min(56vh, 430px);
overflow-y: auto;
overflow-x: hidden;
padding: .6rem .65rem;
border: 1px solid color-mix(in srgb, var(--line) 76%, transparent);
border-radius: 16px;
background: color-mix(in srgb, var(--surface) 94%, transparent);
backdrop-filter: blur(16px) saturate(1.15);
-webkit-backdrop-filter: blur(16px) saturate(1.15);
box-shadow: 0 18px 44px rgba(26, 14, 12, .22);
}
.kv-pop[hidden] { display: none !important; }
.kv-pop #output-size-section { padding: 0 !important; border: 0 !important; }
.kv-pop .size-choice-row {
display: grid !important;
grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
gap: .3rem !important;
}
.kv-pop .edit-strength-row {
width: 100% !important;
grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
gap: .3rem !important;
}
.kv-pop .edit-strength-choice { min-height: 40px; }
.kv-pop .edit-strength-note {
display: block !important;
color: var(--muted);
font-size: .44rem;
line-height: 1.15;
}
.kv-pop .improve-section-label {
display: block !important;
margin: 0 0 .35rem !important;
color: var(--muted);
font-size: .56rem;
font-weight: 750;
letter-spacing: 0;
text-align: start;
text-transform: none;
}
.kv-pop #mk-mode-section {
margin: 0 !important;
border: 0 !important;
border-radius: 0 !important;
background: transparent !important;
box-shadow: none !important;
overflow: visible !important;
}
.kv-inpop .mk-mode-head { display: none !important; }
.kv-inpop .mk-mode-fields {
border-top: 0 !important;
background: transparent !important;
padding: .3rem 0 0 !important;
}
#mk-mode-section.kv-inpop #mk-mode-fields,
#mk-mode-section.kv-inpop #brand-workspace-row { display: grid !important; }
/* Actions under the stage: Upload beside one big Generate. */
.kv-actions {
display: flex;
align-items: stretch;
gap: .5rem;
margin: 0 0 .55rem;
}
.kv-actions #start-again-btn {
position: static !important;
inset: auto !important;
display: inline-flex !important;
align-items: center;
justify-content: center;
gap: .35rem;
flex: 0 0 auto !important;
width: auto !important;
min-width: 0 !important;
min-height: 46px;
padding: .4rem .8rem !important;
border: 1px solid color-mix(in srgb, var(--accent) 26%, var(--line));
border-radius: 14px;
background: transparent;
color: var(--accent);
font-size: .58rem;
font-weight: 750;
white-space: nowrap;
}
.kv-actions #start-again-btn > span { display: inline !important; }
.kv-actions #start-again-btn .upload-new-image-icon {
width: 14px;
height: 14px;
flex: 0 0 14px;
stroke: currentColor;
}
.kv-actions #generate-image-btn {
flex: 1 1 auto !important;
width: auto !important;
min-width: 0 !important;
min-height: 46px !important;
justify-content: center;
padding: .45rem 1rem !important;
border-radius: 14px !important;
font-size: .72rem !important;
white-space: nowrap;
box-shadow: 0 10px 24px color-mix(in srgb, var(--accent) 26%, transparent) !important;
}
@keyframes kv-generate-pulse {
0%, 100% { box-shadow: 0 10px 24px color-mix(in srgb, var(--accent) 26%, transparent); }
50% { box-shadow: 0 10px 30px color-mix(in srgb, var(--accent) 50%, transparent), 0 0 0 5px color-mix(in srgb, var(--accent) 12%, transparent); }
}
.konvrt-preview-tools:has(.kv-stage.kv-has-source #generated-image-frame.is-empty) .kv-actions #generate-image-btn:not([disabled]) {
animation: kv-generate-pulse 2.4s ease-in-out infinite;
}
@media (prefers-reduced-motion: reduce) {
.kv-actions #generate-image-btn { animation: none !important; }
}
/* Mobile: same stage, tighter; the pane grows with its content. */
@media (max-width: 720px) {
body.konvrt-workspace-active .konvrt-workspace-body {
grid-template-rows: minmax(0, 1fr) auto !important;
}
body.konvrt-workspace-active .konvrt-phone-pane {
height: auto !important;
min-height: 0 !important;
display: block !important;
overflow: visible !important;
padding: .45rem .5rem .55rem !important;
}
.konvrt-preview-tools .generated-prompt-panel.kv-stage {
min-height: min(40vh, 380px) !important;
}
.kv-stage .kv-canvas {
column-gap: .5rem;
padding: .5rem;
}
.konvrt-preview-tools > .konvrt-history-rail .konvrt-history-thumb {
height: 56px !important;
}
.kv-chip { padding-inline: .42rem; font-size: .52rem; }
.kv-actions #start-again-btn > span { display: none !important; }
.kv-actions #start-again-btn { min-width: 46px !important; padding: .3rem !important; }
.kv-actions #generate-image-btn { min-height: 44px !important; font-size: .66rem !important; }
}
/* ── History viewer + store popover + manual logo + mobile parity ────── */
/* A clicked history render opens here, under the two slots. */
.kv-stage .kv-history-viewer {
grid-column: 1 / -1;
grid-row: 3;
position: relative;
width: 100%;
display: grid;
justify-items: center;
padding-top: .45rem;
margin-top: .2rem;
border-top: 1px dashed color-mix(in srgb, var(--line) 80%, transparent);
}
.kv-stage .kv-history-viewer.hidden { display: none !important; }
.kv-stage .kv-history-viewer.is-loading { opacity: .55; }
.kv-stage .kv-history-viewer img {
max-width: 100%;
max-height: 30vh;
border-radius: 12px;
box-shadow: 0 12px 30px rgba(28, 15, 12, .18);
}
.kv-stage .kv-history-viewer .kv-slot-badge {
top: .85rem;
inset-inline-start: auto;
}
.kv-history-viewer-close {
position: absolute;
top: .8rem;
inset-inline-end: .35rem;
z-index: 3;
width: 26px;
height: 26px;
display: grid;
place-items: center;
padding: 0;
border: 1px solid color-mix(in srgb, var(--line) 80%, transparent);
border-radius: 999px;
background: color-mix(in srgb, var(--surface) 92%, transparent);
color: var(--muted);
cursor: pointer;
}
.kv-history-viewer-close:hover { color: var(--text); }
.kv-history-viewer-close svg { width: 11px; height: 11px; }
/* Store popover host: the brand row renders inside with its own styles. */
#kv-store-host { display: grid; gap: .3rem; min-width: 0; }
/* Manual logo fallback in the brand manager. */
.bm-manual-logo {
justify-self: center;
margin-top: -.45rem;
padding: .15rem .3rem;
border: 0;
background: transparent;
color: var(--muted);
font-size: .55rem;
font-weight: 700;
text-underline-offset: 2px;
cursor: pointer;
transition: color .14s ease;
}
.bm-manual-logo:hover { color: var(--accent); text-decoration: underline; }
/* Mobile parity with desktop (owner request): the kv stack renders the
same at every width — old dock-era mobile grids must not reshape it. */
@media (max-width: 720px) {
body.konvrt-workspace-active .konvrt-preview-tools,
.konvrt-preview-tools {
display: flex !important;
flex-direction: column !important;
width: 100% !important;
max-width: none !important;
height: auto !important;
min-height: 0 !important;
padding: 0 !important;
overflow: visible !important;
border: 0 !important;
}
body.konvrt-workspace-active .konvrt-preview-tools .generated-prompt-panel.kv-stage,
.konvrt-preview-tools .generated-prompt-panel.kv-stage {
order: 0 !important;
display: block !important;
width: 100% !important;
padding: 0 !important;
}
.konvrt-preview-tools .kv-actions { order: -1; }
.kv-stage .kv-history-viewer img { max-height: 24vh; }
}
/* ── Model suggestions: compact selectable cards ─────────────────────────
The workspace pane stretched the grid row, turning each suggestion
into a tall empty pillar. Cards now hug their text: a tidy auto-fill
grid of small tappable cards with a clear check state. */
.konvrt-model-controls { align-content: start; }
.konvrt-model-controls .custom-improvements,
.custom-improvements {
height: auto !important;
min-height: 0 !important;
flex: 0 0 auto;
align-content: start;
}
.smart-action-grid {
display: grid !important;
grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)) !important;
gap: .45rem !important;
align-content: start !important;
align-items: start !important;
grid-auto-rows: min-content !important;
height: auto !important;
min-height: 0 !important;
}
.smart-action-btn {
height: auto !important;
min-height: 0 !important;
align-self: start;
gap: .18rem;
padding: .55rem 1.9rem .6rem .65rem !important;
border: 1px solid color-mix(in srgb, var(--line) 85%, transparent) !important;
border-radius: 13px !important;
background: var(--surface) !important;
box-shadow: none;
transition: transform .14s ease, border-color .14s ease, box-shadow .14s ease, background .14s ease;
}
[dir="rtl"] .smart-action-btn { padding: .55rem .65rem .6rem 1.9rem !important; }
.smart-action-btn:hover {
transform: translateY(-1px);
border-color: color-mix(in srgb, var(--accent) 40%, var(--line)) !important;
box-shadow: 0 6px 16px rgba(28, 15, 12, .08);
}
.smart-action-btn strong { font-size: .64rem !important; line-height: 1.25 !important; }
.smart-action-btn span {
font-size: .54rem !important;
line-height: 1.35 !important;
overflow-wrap: anywhere;
}
.smart-action-btn.is-active {
border-color: color-mix(in srgb, var(--accent) 65%, var(--line)) !important;
background: linear-gradient(160deg, color-mix(in srgb, var(--accent) 9%, var(--surface)), var(--surface)) !important;
box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 26%, transparent) !important;
}
.smart-action-btn::after {
top: .55rem !important;
width: 17px;
height: 17px;
transition: transform .15s ease, background .15s ease, border-color .15s ease;
}
.smart-action-btn.is-active::after { transform: scale(1.08); }
.smart-action-empty {
padding: .6rem .7rem;
border: 1px dashed color-mix(in srgb, var(--line) 85%, transparent);
border-radius: 12px;
color: var(--muted);
font-size: .58rem;
line-height: 1.4;
}
@media (max-width: 720px) {
.smart-action-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
}
/* ── Suggestion cards: unmistakable applied / skipped states ────────────
Applied = filled maroon card with a white check that flips to an x on
hover. Skipped = quiet dashed card. Each card names its own state and
the head carries the live count with one Apply all / Skip all switch. */
.custom-improvements .personal-group-head {
display: flex;
align-items: center;
gap: .5rem;
flex-wrap: wrap;
}
.smart-actions-toggle-all {
margin-inline-start: auto;
min-height: 28px;
padding: .18rem .6rem;
border: 1px solid color-mix(in srgb, var(--accent) 35%, var(--line));
border-radius: 999px;
background: transparent;
color: var(--accent);
font-size: .54rem;
font-weight: 750;
cursor: pointer;
transition: background .14s ease;
}
.smart-actions-toggle-all:hover {
background: color-mix(in srgb, var(--accent) 8%, transparent);
}
.smart-action-state {
display: block;
margin-top: .22rem;
color: var(--muted);
font-size: .46rem;
font-style: normal;
font-weight: 750;
letter-spacing: .02em;
}
/* Applied: the card itself is the checkmark. */
.smart-action-btn.is-active:not(.is-readonly) {
border-color: transparent !important;
background: linear-gradient(150deg, var(--accent), color-mix(in srgb, var(--accent) 72%, #2a100d)) !important;
box-shadow: 0 8px 18px color-mix(in srgb, var(--accent) 25%, transparent) !important;
color: #fff;
}
.smart-action-btn.is-active:not(.is-readonly) strong { color: #fff; }
.smart-action-btn.is-active:not(.is-readonly) span { color: rgba(255, 255, 255, .78) !important; }
.smart-action-btn.is-active:not(.is-readonly) .smart-action-state { color: rgba(255, 255, 255, .88); }
.smart-action-btn.is-active:not(.is-readonly)::after {
content: "\2713";
border-color: #fff;
background: #fff;
color: var(--accent);
}
.smart-action-btn.is-active:not(.is-readonly):hover {
filter: saturate(.88) brightness(1.04);
}
.smart-action-btn.is-active:not(.is-readonly):hover::after {
content: "\00d7";
font-size: .8rem;
line-height: 1;
}
/* Skipped: clearly out of the plan, one tap brings it back. */
.smart-action-btn:not(.is-active):not(.is-readonly) {
border-style: dashed !important;
background: color-mix(in srgb, var(--surface) 88%, var(--bg)) !important;
}
.smart-action-btn:not(.is-active):not(.is-readonly) strong {
color: color-mix(in srgb, var(--text) 72%, var(--muted));
}
.smart-action-btn:not(.is-active):not(.is-readonly):hover {
border-style: solid !important;
border-color: color-mix(in srgb, var(--accent) 45%, var(--line)) !important;
background: var(--surface) !important;
}
.smart-action-btn:not(.is-active):not(.is-readonly):hover::after {
content: "\2713";
border-color: var(--accent);
color: var(--accent);
background: transparent;
}
/* ── Studio report board: the analysis pane's empty space earns its keep ─ */
#kv-report {
margin-top: .7rem;
padding: .75rem .8rem .85rem;
border: 1px solid color-mix(in srgb, var(--line) 80%, transparent);
border-radius: 16px;
background:
radial-gradient(color-mix(in srgb, var(--text) 6%, transparent) 1px, transparent 1.2px) 0 0 / 17px 17px,
color-mix(in srgb, var(--surface) 88%, var(--bg));
}
#kv-report.hidden { display: none !important; }
.kv-report-head {
display: flex;
align-items: baseline;
gap: .6rem;
flex-wrap: wrap;
margin-bottom: .6rem;
}
.kv-report-head strong { font-size: .72rem; }
.kv-report-head span {
color: var(--muted);
font-size: .56rem;
line-height: 1.35;
min-width: 0;
}
.kv-report-grid { display: grid; gap: .55rem; }
@media (min-width: 721px) {
.kv-report-grid {
grid-template-columns: 120px minmax(0, 1fr);
align-items: stretch;
}
.kv-report-cols, .kv-report-strip { grid-column: 1 / -1; }
}
/* The grade as a conic dial — one glance says how close to done this is. */
.kv-grade {
display: grid;
justify-items: center;
align-content: center;
gap: .35rem;
padding: .6rem .4rem;
border: 1px solid color-mix(in srgb, var(--line) 75%, transparent);
border-radius: 14px;
background: var(--surface);
}
.kv-grade-ring {
position: relative;
display: grid;
place-items: center;
width: 76px;
height: 76px;
border-radius: 50%;
background: conic-gradient(var(--kv-grade-color) calc(var(--kv-grade) * 1%), color-mix(in srgb, var(--line) 55%, transparent) 0);
}
.kv-grade-ring::before {
content: "";
position: absolute;
inset: 7px;
border-radius: 50%;
background: var(--surface);
}
.kv-grade-ring b {
position: relative;
font-size: 1.05rem;
line-height: 1;
color: var(--kv-grade-color);
}
.kv-grade-ring i {
position: relative;
font-style: normal;
color: var(--muted);
font-size: .48rem;
}
.kv-grade em {
font-style: normal;
font-size: .54rem;
font-weight: 800;
color: var(--kv-grade-color);
text-align: center;
line-height: 1.2;
}
.kv-keyfix {
display: grid;
align-content: center;
gap: .3rem;
padding: .6rem .7rem;
border: 1px solid color-mix(in srgb, var(--accent) 30%, var(--line));
border-inline-start: 4px solid var(--accent);
border-radius: 14px;
background: color-mix(in srgb, var(--accent) 5%, var(--surface));
}
.kv-keyfix strong {
color: var(--accent);
font-size: .56rem;
letter-spacing: .02em;
text-transform: none;
}
.kv-keyfix p {
margin: 0;
font-size: .62rem;
line-height: 1.45;
}
.kv-report-cols {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
gap: .55rem;
}
.kv-report-col {
padding: .55rem .65rem;
border-radius: 14px;
border: 1px solid color-mix(in srgb, var(--line) 75%, transparent);
background: var(--surface);
}
.kv-report-col strong { display: block; margin-bottom: .3rem; font-size: .56rem; }
.kv-report-col.is-good strong { color: #168d5c; }
.kv-report-col.is-bad strong { color: #b3462e; }
.kv-report-col ul { margin: 0; padding: 0; list-style: none; display: grid; gap: .28rem; }
.kv-report-col li {
display: flex;
gap: .35rem;
align-items: flex-start;
font-size: .56rem;
line-height: 1.4;
color: color-mix(in srgb, var(--text) 88%, var(--muted));
}
.kv-report-col li i {
flex: 0 0 14px;
width: 14px;
height: 14px;
display: grid;
place-items: center;
border-radius: 50%;
font-size: .5rem;
font-style: normal;
font-weight: 900;
margin-top: .05rem;
}
.kv-report-col.is-good li i { background: color-mix(in srgb, #168d5c 14%, transparent); color: #168d5c; }
.kv-report-col.is-bad li i { background: color-mix(in srgb, #b3462e 14%, transparent); color: #b3462e; }
.kv-report-strip {
display: flex;
align-items: flex-start;
gap: .6rem;
flex-wrap: wrap;
}
.kv-palette { flex: 1 1 240px; min-width: 0; }
.kv-palette strong, .kv-light strong {
display: block;
margin-bottom: .3rem;
color: var(--muted);
font-size: .52rem;
font-weight: 750;
}
.kv-palette-row { display: flex; gap: .3rem; flex-wrap: wrap; }
.kv-swatch {
position: relative;
width: 46px;
height: 34px;
padding: 0;
border: 1px solid color-mix(in srgb, var(--line) 60%, transparent);
border-radius: 9px;
background: var(--sw);
cursor: pointer;
overflow: hidden;
transition: transform .14s ease;
}
.kv-swatch:hover { transform: translateY(-2px); }
.kv-swatch span {
position: absolute;
inset-inline: 0;
bottom: 0;
padding: 1px 2px;
background: rgba(15, 10, 9, .55);
color: #fff;
font-size: .4rem;
line-height: 1.2;
text-align: center;
opacity: 0;
transition: opacity .14s ease;
}
.kv-swatch:hover span { opacity: 1; }
.kv-swatch.is-copied::after {
content: "✓";
position: absolute;
inset: 0;
display: grid;
place-items: center;
background: rgba(15, 10, 9, .5);
color: #fff;
font-weight: 900;
}
.kv-light {
flex: 0 1 auto;
padding: .45rem .6rem;
border: 1px solid color-mix(in srgb, var(--line) 75%, transparent);
border-radius: 12px;
background: var(--surface);
}
.kv-light span { font-size: .56rem; color: color-mix(in srgb, var(--text) 85%, var(--muted)); }
/* ── Studio report as a bento board (2026 dashboard pattern) ────────────
Asymmetric tiles that size themselves to the data, frosted-glass
surfaces, one accent per meaning, generous whitespace. Supersedes the
earlier .kv-report-grid block; those class names are gone from the DOM. */
#kv-report {
margin-top: .8rem;
padding: .85rem .9rem 1rem;
border: 1px solid color-mix(in srgb, var(--line) 72%, transparent);
border-radius: 20px;
background:
radial-gradient(120% 140% at 0% 0%, color-mix(in srgb, var(--accent) 6%, transparent), transparent 60%),
radial-gradient(color-mix(in srgb, var(--text) 5%, transparent) 1px, transparent 1.2px) 0 0 / 18px 18px,
color-mix(in srgb, var(--surface) 82%, var(--bg));
}
.kv-bento {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
grid-auto-rows: minmax(0, auto);
gap: .5rem;
align-items: stretch;
}
.kv-tile {
position: relative;
display: grid;
align-content: start;
gap: .3rem;
min-width: 0;
padding: .65rem .7rem;
border: 1px solid color-mix(in srgb, var(--line) 62%, transparent);
border-radius: 15px;
background: color-mix(in srgb, var(--surface) 72%, transparent);
backdrop-filter: blur(10px) saturate(1.1);
-webkit-backdrop-filter: blur(10px) saturate(1.1);
transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}
.kv-tile:hover {
transform: translateY(-1px);
border-color: color-mix(in srgb, var(--accent) 28%, var(--line));
box-shadow: 0 10px 24px rgba(28, 15, 12, .08);
}
.kv-tile > strong {
color: var(--muted);
font-size: .5rem;
font-weight: 800;
letter-spacing: .04em;
text-transform: uppercase;
line-height: 1.2;
}
.kv-tile-value {
font-size: .62rem;
line-height: 1.35;
color: color-mix(in srgb, var(--text) 90%, var(--muted));
}
/* Grade dial: the board's anchor, spans two rows when there is room. */
.kv-tile-grade {
grid-row: span 2;
justify-items: center;
align-content: center;
gap: .4rem;
background: color-mix(in srgb, var(--surface) 88%, transparent);
}
.kv-tile-grade em {
font-style: normal;
font-size: .54rem;
font-weight: 800;
color: var(--kv-grade-color);
text-align: center;
line-height: 1.25;
}
/* The one fix: the loudest tile, spans the full width of the board. */
.kv-tile-keyfix {
grid-column: 1 / -1;
border-color: color-mix(in srgb, var(--accent) 32%, var(--line));
border-inline-start: 4px solid var(--accent);
background: color-mix(in srgb, var(--accent) 7%, var(--surface));
}
.kv-tile-keyfix > strong { color: var(--accent); }
.kv-tile-keyfix p {
margin: 0;
font-size: .64rem;
line-height: 1.5;
}
@media (min-width: 721px) {
.kv-tile-grade { grid-column: span 1; }
.kv-tile-keyfix { grid-column: span 2; }
.kv-tile-palette, .kv-tile-objects { grid-column: span 2; }
}
.kv-tile-col ul { margin: 0; padding: 0; list-style: none; display: grid; gap: .3rem; }
.kv-tile-col li {
display: flex;
gap: .35rem;
align-items: flex-start;
font-size: .56rem;
line-height: 1.42;
color: color-mix(in srgb, var(--text) 88%, var(--muted));
}
.kv-tile-col li i {
flex: 0 0 14px;
width: 14px;
height: 14px;
display: grid;
place-items: center;
border-radius: 50%;
font-size: .48rem;
font-style: normal;
font-weight: 900;
margin-top: .08rem;
}
.kv-tile-col.is-good > strong { color: #168d5c; }
.kv-tile-col.is-bad > strong { color: #b3462e; }
.kv-tile-col.is-good li i { background: color-mix(in srgb, #168d5c 14%, transparent); color: #168d5c; }
.kv-tile-col.is-bad li i { background: color-mix(in srgb, #b3462e 14%, transparent); color: #b3462e; }
/* Chips for detected objects, materials and preserved text. */
.kv-chips { display: flex; flex-wrap: wrap; gap: .25rem; }
.kv-chips span {
padding: .16rem .45rem;
border: 1px solid color-mix(in srgb, var(--line) 70%, transparent);
border-radius: 999px;
background: color-mix(in srgb, var(--surface) 90%, transparent);
color: color-mix(in srgb, var(--text) 86%, var(--muted));
font-size: .5rem;
line-height: 1.4;
white-space: normal;
max-width: 100%;
overflow-wrap: anywhere;
}
.kv-chips.is-text span {
font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
background: color-mix(in srgb, var(--bg) 70%, var(--surface));
}
/* Verdict tile: stands in for the dial when the analyzer scored nothing
numeric (the local measured path returns a status, not a grade). */
.kv-tile-status {
justify-items: center;
align-content: center;
gap: .3rem;
text-align: center;
background: color-mix(in srgb, var(--surface) 88%, transparent);
}
.kv-tile-status em {
font-style: normal;
font-size: .78rem;
font-weight: 800;
line-height: 1.2;
color: var(--text);
}
/* ── Konvrt-only analysis tiles ─────────────────────────────────────────
Crop survival, the scroll test, brand match and model confidence.
All measured client-side from data the analyzer already returned. */
@media (min-width: 721px) {
.kv-tile-crop { grid-column: span 2; }
.kv-tile-thumb, .kv-tile-brandmatch, .kv-tile-confidence { grid-column: span 1; }
}
/* Crop survival: four real centre-crops of the user's own photo. */
.kv-crop-row {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: .4rem;
}
.kv-crop {
display: grid;
justify-items: center;
gap: .16rem;
min-width: 0;
}
.kv-crop-frame {
position: relative;
display: block;
width: 100%;
max-width: 62px;
overflow: hidden;
border-radius: 8px;
border: 2px solid var(--kv-crop-color, var(--line));
background: color-mix(in srgb, var(--bg) 80%, var(--surface));
}
.kv-crop-frame img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
display: block;
}
.kv-crop b {
font-size: .44rem;
font-weight: 750;
color: var(--muted);
line-height: 1.2;
text-align: center;
white-space: normal;
overflow-wrap: anywhere;
max-width: 100%;
}
.kv-crop i {
font-style: normal;
font-size: .5rem;
font-weight: 900;
color: var(--kv-crop-color, var(--muted));
}
.kv-crop.is-safe { --kv-crop-color: #168d5c; }
.kv-crop.is-tight { --kv-crop-color: #c07f2a; }
.kv-crop.is-cut { --kv-crop-color: #b3462e; }
/* Scroll test: real thumbnail beside a squinted one. */
.kv-thumb-row { display: flex; align-items: center; gap: .4rem; }
.kv-thumb-shot {
flex: 0 0 auto;
width: 46px;
height: 46px;
overflow: hidden;
border-radius: 9px;
border: 1px solid color-mix(in srgb, var(--line) 70%, transparent);
}
.kv-thumb-shot img { width: 100%; height: 100%; object-fit: cover; display: block; }
.kv-thumb-shot.is-squint img { filter: blur(2.4px) saturate(.85); }
.kv-thumb-score {
margin-inline-start: auto;
display: flex;
align-items: baseline;
gap: .1rem;
}
.kv-thumb-score b { font-size: 1rem; line-height: 1; }
.kv-thumb-score i { font-style: normal; font-size: .46rem; color: var(--muted); }
/* Brand match bar. */
.kv-match-bar {
display: block;
height: 7px;
border-radius: 999px;
background: color-mix(in srgb, var(--line) 60%, transparent);
overflow: hidden;
}
.kv-match-bar i {
display: block;
height: 100%;
border-radius: 999px;
background: linear-gradient(90deg, var(--accent), color-mix(in srgb, var(--accent) 60%, #d98a21));
}
.kv-palette-row.is-missing { margin-top: .1rem; }
.kv-swatch.is-static { width: 26px; height: 20px; cursor: default; opacity: .85; }
.kv-swatch.is-static:hover { transform: none; }
/* Model confidence bars. */
.kv-conf-list { margin: 0; padding: 0; list-style: none; display: grid; gap: .26rem; }
.kv-conf-list li {
display: grid;
grid-template-columns: minmax(0, 1fr) 44px auto;
align-items: center;
gap: .35rem;
font-size: .5rem;
color: color-mix(in srgb, var(--text) 86%, var(--muted));
}
.kv-conf-list li > span:first-child {
white-space: normal;
overflow-wrap: anywhere;
}
.kv-conf-bar {
height: 5px;
border-radius: 999px;
background: color-mix(in srgb, var(--line) 60%, transparent);
overflow: hidden;
}
.kv-conf-bar i {
display: block;
height: 100%;
border-radius: 999px;
background: color-mix(in srgb, var(--accent) 72%, transparent);
}
.kv-conf-list b { font-size: .46rem; color: var(--muted); }
/* ── Measured-only tiles: pixel facts, platform readiness, raw meters ── */
@media (min-width: 721px) {
.kv-tile-facts { grid-column: span 1; }
.kv-tile-ready { grid-column: span 2; }
.kv-tile-meters { grid-column: span 2; }
}
.kv-facts-dim {
font-size: .92rem;
font-weight: 800;
line-height: 1.1;
letter-spacing: -.01em;
}
.kv-facts-row {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: .3rem;
margin-top: .15rem;
}
.kv-facts-row > span { display: grid; gap: .05rem; min-width: 0; }
.kv-facts-row b { font-size: .6rem; font-weight: 800; line-height: 1.1; }
.kv-facts-row i {
font-style: normal;
font-size: .42rem;
color: var(--muted);
line-height: 1.2;
}
.kv-ready-list { margin: 0; padding: 0; list-style: none; display: grid; gap: .26rem; }
.kv-ready-list li {
display: grid;
grid-template-columns: 14px minmax(0, 1fr) auto;
align-items: center;
gap: .35rem;
font-size: .53rem;
color: color-mix(in srgb, var(--text) 88%, var(--muted));
}
.kv-ready-list li > span {
white-space: normal;
overflow-wrap: anywhere;
}
.kv-ready-list i {
width: 14px;
height: 14px;
display: grid;
place-items: center;
border-radius: 50%;
font-style: normal;
font-size: .46rem;
font-weight: 900;
}
.kv-ready-list li.is-ready i { background: color-mix(in srgb, #168d5c 15%, transparent); color: #168d5c; }
.kv-ready-list li.is-short i { background: color-mix(in srgb, #c07f2a 18%, transparent); color: #c07f2a; }
.kv-ready-list li.is-ready b { color: #168d5c; }
.kv-ready-list li.is-short b { color: #c07f2a; }
.kv-ready-list b { font-size: .48rem; font-weight: 800; white-space: nowrap; }
.kv-meter {
display: grid;
grid-template-columns: minmax(0, 74px) minmax(0, 1fr) auto;
align-items: center;
gap: .4rem;
font-size: .5rem;
color: color-mix(in srgb, var(--text) 86%, var(--muted));
}
.kv-meter > span:first-child {
white-space: normal;
overflow-wrap: anywhere;
}
.kv-meter-bar {
height: 5px;
border-radius: 999px;
background: color-mix(in srgb, var(--line) 60%, transparent);
overflow: hidden;
}
.kv-meter-bar i {
display: block;
height: 100%;
border-radius: 999px;
background: color-mix(in srgb, var(--accent) 68%, transparent);
}
.kv-meter b { font-size: .48rem; color: var(--muted); font-variant-numeric: tabular-nums; }
/* ── "Your photo" shows the real upload, whole ──────────────────────────
The reference slot used to be forced into the chosen OUTPUT ratio and
cover-cropped, so the user was shown a trimmed version of their own
file. It now takes the upload's natural proportions (--src-aspect,
written by the image load handler) and contains rather than crops.
The crop-survival previews and the feed thumbnails keep `cover` on
purpose: cropping is exactly what they are demonstrating. */
.kv-stage .image-comparison-item.is-reference {
aspect-ratio: var(--src-aspect, var(--gen-aspect, 3 / 4)) !important;
}
.kv-stage #improvement-reference-image,
.kv-stage #generated-image-result {
object-fit: contain !important;
background: color-mix(in srgb, var(--bg) 70%, var(--surface));
}
/* ── Image zoom slider (inside its dock popover) ─────────────────────── */
.kv-zoom { display: grid; gap: .35rem; min-width: 210px; }
.kv-zoom-readout {
display: flex;
align-items: baseline;
gap: .35rem;
}
.kv-zoom-readout b { font-size: .92rem; line-height: 1; font-variant-numeric: tabular-nums; }
.kv-zoom-readout span { color: var(--muted); font-size: .55rem; font-weight: 750; }
#kv-zoom-slider {
width: 100%;
height: 22px;
margin: 0;
background: transparent;
cursor: pointer;
-webkit-appearance: none;
appearance: none;
}
#kv-zoom-slider::-webkit-slider-runnable-track {
height: 5px;
border-radius: 999px;
background: linear-gradient(90deg,
color-mix(in srgb, var(--accent) 30%, transparent),
var(--accent));
}
#kv-zoom-slider::-moz-range-track {
height: 5px;
border-radius: 999px;
background: linear-gradient(90deg,
color-mix(in srgb, var(--accent) 30%, transparent),
var(--accent));
}
#kv-zoom-slider::-webkit-slider-thumb {
-webkit-appearance: none;
appearance: none;
width: 17px;
height: 17px;
margin-top: -6px;
border: 2px solid var(--surface);
border-radius: 50%;
background: var(--accent);
box-shadow: 0 2px 6px rgba(28, 15, 12, .3);
}
#kv-zoom-slider::-moz-range-thumb {
width: 17px;
height: 17px;
border: 2px solid var(--surface);
border-radius: 50%;
background: var(--accent);
box-shadow: 0 2px 6px rgba(28, 15, 12, .3);
}
#kv-zoom-slider:disabled { opacity: .5; cursor: not-allowed; }
.kv-zoom-scale {
display: flex;
justify-content: space-between;
gap: .3rem;
color: var(--muted);
font-size: .44rem;
font-weight: 700;
}
.kv-zoom-note {
margin: 0;
color: var(--muted);
font-size: .5rem;
line-height: 1.35;
}
/* ── Uniform boxes (owner request 2026-08-13) ───────────────────────────
Suggestion cards were ragged because each sized to its own text, and
the crop frames varied in footprint because each carried its own
platform ratio. Cards now share a row height; crop frames share one
height and centre inside equal cells, keeping their true shape. */
.smart-action-grid {
grid-auto-rows: 1fr !important;
align-items: stretch !important;
}
.smart-action-btn {
align-self: stretch !important;
height: 100% !important;
}
/* The state line pins to the bottom so every card's footer lines up. */
.smart-action-btn .smart-action-state { margin-top: auto; padding-top: .2rem; }
.kv-crop {
align-content: start;
gap: .22rem;
}
.kv-crop-frame {
/* One height for all four; width follows the platform's real ratio, so
the boxes read as a matched set without faking the shapes. */
height: 58px;
width: auto !important;
max-width: 100%;
margin-inline: auto;
}
/* ── Pre-flight panel: what the next Generate will produce ─────────────── */
@media (min-width: 721px) {
.kv-tile-preflight { grid-column: span 2; }
.kv-tile-keyfix { grid-column: span 2; }
.kv-tile-crop { grid-column: span 2; }
}
.kv-tile-preflight {
gap: .5rem;
border-color: color-mix(in srgb, var(--accent) 26%, var(--line));
background: color-mix(in srgb, var(--surface) 88%, transparent);
}
.kv-pre-rows { margin: 0; padding: 0; display: grid; gap: .3rem; }
.kv-pre-rows > div {
display: grid;
grid-template-columns: 92px minmax(0, 1fr);
align-items: baseline;
gap: .5rem;
}
.kv-pre-rows dt {
color: var(--muted);
font-size: .52rem;
font-weight: 750;
}
.kv-pre-rows dd {
margin: 0;
font-size: .6rem;
font-weight: 700;
line-height: 1.3;
color: var(--text);
overflow-wrap: anywhere;
}
.kv-pre-rows > div.is-muted dd {
color: var(--muted);
font-weight: 600;
}
.kv-pre-cost {
display: flex;
align-items: baseline;
gap: .5rem;
flex-wrap: wrap;
padding-top: .45rem;
border-top: 1px solid color-mix(in srgb, var(--line) 70%, transparent);
}
.kv-pre-price { display: flex; align-items: baseline; gap: .2rem; }
.kv-pre-price b {
font-size: 1.1rem;
line-height: 1;
color: var(--accent);
font-variant-numeric: tabular-nums;
}
.kv-pre-price i { font-style: normal; font-size: .5rem; color: var(--muted); font-weight: 750; }
.kv-pre-balance { color: var(--muted); font-size: .52rem; margin-inline-start: auto; }
.kv-pre-warnings {
margin: 0;
padding: 0;
list-style: none;
display: grid;
gap: .28rem;
}
.kv-pre-warnings li {
position: relative;
padding-inline-start: 1.1rem;
color: #b3462e;
font-size: .55rem;
line-height: 1.4;
font-weight: 650;
}
.kv-pre-warnings li::before {
content: "!";
position: absolute;
inset-inline-start: 0;
top: .05rem;
width: 14px;
height: 14px;
display: grid;
place-items: center;
border-radius: 50%;
background: color-mix(in srgb, #b3462e 15%, transparent);
font-size: .46rem;
font-weight: 900;
}
.kv-pre-clear {
margin: 0;
color: #168d5c;
font-size: .55rem;
font-weight: 700;
}
/* ── Mobile generate pane: authoritative rules ──────────────────────────
These come last on purpose. Several dock-era rules still target the
same ids (`.konvrt-preview-tools #start-again-btn { min-height: 0 }`,
`.generated-prompt-panel { min-height: 0 }`) and were collapsing the
stage to 1px and the Upload button to 20px. Everything here is scoped
to the signed-in workspace so it outranks them. */
@media (max-width: 720px) {
/* The page scrolls; neither pane is squeezed into a fixed band. */
body.konvrt-workspace-active .konvrt-workspace-body {
grid-template-columns: minmax(0, 1fr) !important;
grid-template-rows: auto auto !important;
height: auto !important;
min-height: 0 !important;
overflow: visible !important;
}
body.konvrt-workspace-active .konvrt-controls-pane {
height: auto !important;
min-height: 0 !important;
overflow: visible !important;
}
body.konvrt-workspace-active .konvrt-phone-pane {
display: block !important;
width: 100% !important;
height: auto !important;
min-height: 0 !important;
overflow: visible !important;
padding: .5rem .55rem .8rem !important;
}
body.konvrt-workspace-active .konvrt-phone-pane > .konvrt-preview-tools {
display: flex !important;
flex-direction: column !important;
width: 100% !important;
height: auto !important;
min-height: 0 !important;
gap: .5rem !important;
overflow: visible !important;
}
/* The stage holds only absolutely-positioned children, so without a
real floor it has no height of its own. */
body.konvrt-workspace-active .konvrt-preview-tools > .generated-prompt-panel.kv-stage {
flex: 0 0 auto !important;
height: auto !important;
min-height: min(48vh, 400px) !important;
}
/* Actions: one wide Generate beside a square Upload, both full height
and never clipped. */
body.konvrt-workspace-active .kv-actions {
display: flex !important;
align-items: stretch !important;
gap: .45rem !important;
width: 100% !important;
margin: 0 0 .1rem !important;
}
body.konvrt-workspace-active .kv-actions #generate-image-btn,
body.konvrt-workspace-active .kv-actions #start-again-btn {
height: 46px !important;
min-height: 46px !important;
align-self: stretch !important;
border-radius: 13px !important;
}
body.konvrt-workspace-active .kv-actions #generate-image-btn {
flex: 1 1 auto !important;
width: auto !important;
min-width: 0 !important;
padding: .35rem .7rem !important;
font-size: .68rem !important;
justify-content: center !important;
}
body.konvrt-workspace-active .kv-actions #start-again-btn {
flex: 0 0 52px !important;
width: 52px !important;
min-width: 52px !important;
padding: 0 !important;
justify-content: center !important;
}
body.konvrt-workspace-active .kv-actions #start-again-btn .upload-new-image-icon {
width: 17px !important;
height: 17px !important;
flex: 0 0 17px !important;
}
/* Chip bar stays on one line and inside the screen. */
body.konvrt-workspace-active .kv-dock {
position: relative !important;
inset: auto !important;
width: 100% !important;
margin-top: 0 !important;
}
body.konvrt-workspace-active .kv-bar {
width: 100% !important;
justify-content: space-between !important;
}
body.konvrt-workspace-active .kv-bar .kv-chip {
padding-inline: .35rem !important;
font-size: .5rem !important;
}
/* Popovers must not spill off-screen. */
body.konvrt-workspace-active .kv-pop {
inset-inline: 0 !important;
max-height: 54vh !important;
}
body.konvrt-workspace-active .konvrt-preview-tools > .konvrt-history-rail {
width: 100% !important;
}
}
/* The workspace card is a fixed-height viewport built for the desktop
two-pane layout (`overflow: hidden`, panes scrolling inside). Stacked
on a phone its content is ~2000px tall, so without this the generate
section sat below the clip and could not be reached at all. */
@media (max-width: 720px) {
body.konvrt-workspace-active #ai-relocation-card {
grid-template-rows: auto auto !important;
overflow-y: auto !important;
overflow-x: hidden !important;
overscroll-behavior-y: contain;
-webkit-overflow-scrolling: touch;
}
}
/* The controls pane is a fixed-height column with `overflow: hidden`, so
any panel taller than the viewport simply lost its bottom rows — Quick
picks clipped its last look row with no way to reach it. It scrolls on
its own now; mobile keeps its own rules, where the card scrolls. */
@media (min-width: 721px) {
body.konvrt-workspace-active .konvrt-controls-pane {
overflow-y: auto !important;
overflow-x: hidden !important;
overscroll-behavior-y: contain;
scrollbar-width: thin;
scrollbar-color: color-mix(in srgb, var(--text) 26%, transparent) transparent;
padding-bottom: .6rem;
}
body.konvrt-workspace-active .konvrt-controls-pane::-webkit-scrollbar {
width: 6px;
}
body.konvrt-workspace-active .konvrt-controls-pane::-webkit-scrollbar-thumb {
border-radius: 999px;
background: color-mix(in srgb, var(--text) 26%, transparent);
}
body.konvrt-workspace-active .konvrt-controls-pane::-webkit-scrollbar-track {
background: transparent;
}
}
/* Extract 3D was a 26px icon-only circle — under the 44px touch-target
guidance and easy to miss entirely, which made a working feature feel
broken. Bigger everywhere, comfortably tappable on a phone. */
.studio-extract-3d {
width: 36px !important;
height: 36px !important;
min-height: 36px !important;
}
.studio-extract-3d > svg { width: 18px !important; height: 18px !important; }
.studio-extract-3d::after { width: 16px !important; height: 16px !important; }
@media (max-width: 720px) {
.studio-extract-3d {
width: 44px !important;
height: 44px !important;
min-height: 44px !important;
}
.studio-extract-3d > svg { width: 21px !important; height: 21px !important; }
}
/* Replace-from-Explore, final word (kept at the end of the file on purpose):
the locked scene decided the art direction, so the workspace bar and every
styling panel stand down on all layouts, including the phone controls pane
whose own display rules carry heavy specificity above. Since 2026-08-26 the
chip dock (size/strength/store/ad/zoom) and the history rail retire too:
the screen is exactly upload → Generate, nothing else. */
body.remix-scene-active .konvrt-mode-bar,
body.remix-scene-active .prompt-mode-switch,
body.remix-scene-active .look-preset-panel,
body.remix-scene-active .trend-panel,
body.remix-scene-active .personal-change-panel,
body.remix-scene-active .kv-dock,
body.remix-scene-active .konvrt-history-rail,
body.remix-scene-active #edit-strength-section,
body.remix-scene-active #mk-mode-section,
body.remix-scene-active #output-size-section,
body.has-workflow-mobile-nav.remix-scene-active:not(.landing-active) .konvrt-controls-pane > .konvrt-mode-bar,
body.has-workflow-mobile-nav.remix-scene-active:not(.landing-active) .konvrt-controls-pane > .konvrt-mode-bar .prompt-mode-switch {
display: none !important;
}
/* ── One phone bottom bar across the whole site (owner request 2026-08-30) ──
Explore, History and the public pages render partials/mobile_nav.html — a
solid white sheet with a hairline border, 22px top corners and a lifted
shadow. The app's own bar (.mobile-social-nav, inside the bottom-fixed
header) already shares the slot metrics, icon sizes, label sizes and the
tinted active pill, but sat transparent and flush on the page. It now
wears the same sheet, so the bar is identical on every page. Appended last
so it wins over the workspace header rules above. */
@media (max-width: 720px) {
body.has-workflow-mobile-nav:not(.landing-active) {
padding-bottom: calc(70px + env(safe-area-inset-bottom)) !important;
}
body.has-workflow-mobile-nav:not(.landing-active) .mobile-social-nav {
width: 100% !important;
max-width: none !important;
margin: 0 !important;
min-height: 56px !important;
padding: .28rem .6rem calc(.24rem + env(safe-area-inset-bottom)) !important;
border: 1px solid var(--line) !important;
border-bottom: 0 !important;
border-radius: 22px 22px 0 0 !important;
background: var(--surface) !important;
box-shadow: 0 -10px 32px rgba(0, 0, 0, .14) !important;
}
}