/* Image Studio uses the same local Inter typography and public Studio layout. */
:root { --ink:#342922; --muted:#7a6c61; --green:#a35430; --line:#e8e0d9; --paper:#fdfbf9; }
.status-dot { box-shadow:0 0 0 4px #f5e9df; }.feature-icon { background:#f8ebdf; }.button:hover { background:#f6e9df; }.sample-label { background:#f4ece6; }.limits-grid article { border-color:#d7b69f; }
.image-preview { min-width:0; background:white; border:1px solid var(--line); border-radius:16px; overflow:hidden; box-shadow:0 24px 65px -35px #bda797; }
.image-preview-toolbar { display:flex; justify-content:space-between; align-items:center; gap:10px; padding:18px; font-size:11px; font-weight:600; }.image-preview-toolbar i { margin-right:7px; color:var(--green); }
.image-pair { display:grid; grid-template-columns:1fr 1fr; gap:8px; padding:0 12px; }.image-pair figure { margin:0; position:relative; overflow:hidden; border-radius:9px; }.image-pair img { display:block; width:100%; height:330px; object-fit:cover; }.image-pair figcaption { position:absolute; bottom:12px; left:10px; right:10px; padding:7px 9px; background:#171717bd; border-radius:5px; color:white; font-size:9px; }
.image-preview-prompt { padding:22px; }.image-preview-prompt > span { font-size:10px; color:var(--green); font-weight:600; }.image-preview-prompt p { font-size:14px; line-height:1.8; margin:12px 0 18px; }
.comparison-panel { display:grid; grid-template-columns:1fr 1fr; gap:55px; border:1px solid var(--line); border-radius:15px; padding:36px; background:#f7f1eb; }.comparison-panel p:not(.eyebrow) { font-size:13px; line-height:1.85; color:var(--muted); }.comparison-flow { list-style:none; padding:0; margin:0; display:flex; flex-direction:column; justify-content:center; gap:20px; }.comparison-flow li { display:flex; gap:18px; padding:18px 0; border-bottom:1px solid #e7d9cf; }.comparison-flow li > span { color:var(--green); font-size:11px; padding-top:3px; }.comparison-flow strong { font-size:14px; }.comparison-flow p { margin:8px 0 0; }
.image-planner { background:white; border:1px solid var(--line); border-radius:15px; margin-top:28px; overflow:hidden; }.intent-picker { display:flex; flex-wrap:wrap; gap:10px; padding:20px 25px; background:#f7f1eb; border-bottom:1px solid var(--line); }.intent-picker button { font-size:12px; line-height:1.6; padding:11px 16px; border-radius:8px; border:1px solid var(--line); background:white; color:var(--ink); cursor:pointer; }.intent-picker button i { margin-right:6px; }.intent-picker button[aria-pressed=true] { color:white; background:var(--ink); border-color:var(--ink); }
.image-plan-panel { padding:28px; }.image-plan-panel[hidden] { display:none; }.image-plan-panel h3 { font-size:22px; font-weight:600; letter-spacing:-.03em; margin:15px 0; }.image-plan-panel > p { max-width:720px; color:var(--muted); font-size:13px; line-height:1.8; }
.image-plan-panel label,.image-plan-panel legend { display:block; font-size:12px; font-weight:600; margin-bottom:12px; }.image-plan-panel textarea { display:block; width:100%; padding:15px; resize:vertical; border:1px solid #d8c9bd; border-radius:9px; font-size:13px; line-height:1.8; color:var(--ink); background:var(--paper); margin-bottom:23px; }.image-plan-panel select { max-width:100%; padding:12px; font-size:12px; border:1px solid #d8c9bd; border-radius:8px; color:var(--ink); background:white; }
.prompt-ideas { display:flex; flex-wrap:wrap; gap:8px; margin-bottom:25px; }.prompt-ideas button { display:flex; align-items:center; gap:8px; font-size:11px; padding:10px; border-radius:7px; border:1px solid var(--line); color:var(--muted); background:white; cursor:pointer; }.prompt-ideas button:hover { border-color:var(--green); color:var(--green); }
.image-plan-options { display:grid; grid-template-columns:1.7fr 1fr; gap:40px; }.image-plan-options fieldset { min-width:0; padding:0; border:0; margin:0; }.image-models { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:9px; }.image-models button { display:flex; flex-direction:column; gap:8px; text-align:left; padding:12px; border:1px solid var(--line); border-radius:8px; background:white; color:var(--ink); cursor:pointer; font-size:12px; }.image-models small { font-size:10px; color:var(--muted); }.image-models [aria-pressed=true] { border-color:var(--green); background:#fcf3e9; box-shadow:0 0 0 1px var(--green); }.field-note { color:var(--muted); font-size:10px!important; line-height:1.8; margin:12px 0 0; }
.image-cost { display:flex; flex-direction:column; gap:8px; margin-top:25px; padding:18px; border:1px solid var(--line); border-radius:8px; background:#faf6f1; }.image-cost strong { font-size:20px; font-weight:600; letter-spacing:-.03em; }.image-cost span { font-size:11px; color:var(--muted); }
.image-plan-footer { display:flex; align-items:center; gap:25px; padding:23px 28px; border-top:1px solid var(--line); }.image-plan-footer .button { flex-shrink:0; }.image-plan-footer .action-note { margin:0; max-width:560px; }
@media(max-width:1100px) { .image-pair img { height:285px; }.comparison-panel { gap:30px; }.image-models { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media(max-width:760px) { .image-pair img { height:260px; }.comparison-panel,.image-plan-options { grid-template-columns:1fr; gap:25px; }.comparison-panel { padding:24px; }.intent-picker { padding:17px; }.intent-picker button { flex:1 1 auto; }.image-plan-panel { padding:22px; }.image-plan-footer { flex-direction:column; align-items:flex-start; padding:22px; gap:15px; }.image-preview-toolbar { font-size:10px; padding:15px; }.image-cost { margin-top:15px; } }
@media(max-width:360px) { .image-pair img { height:220px; }.image-preview-toolbar { flex-wrap:wrap; }.image-models { grid-template-columns:1fr; }.prompt-ideas button { flex:1 1 auto; } }
.hero h1 { text-wrap:balance; }