*{margin:0;padding:0;box-sizing:border-box}

:root{
    --bg:#ffffff;
    --surface:#f7f7f6;
    --surface-2:#f0f0ef;
    --surface-3:#fafafa;
    --border:#ebebea;
    --border-strong:#d8d8d6;
    --accent:#39507d;
    --accent-soft:rgba(57,80,125,.08);
    --accent-border:rgba(57,80,125,.22);
    --text:#0d0d0d;
    --muted:#6b6b6b;
    --soft:#3d3d3c;
    --success:#2f7a52;
    --radius:16px;
    --shadow:0 16px 40px rgba(13,13,13,.06);
}

[data-theme="dark"]{
    --bg:#1a1a1a;
    --surface:#212120;
    --surface-2:#262625;
    --surface-3:#1f1f1e;
    --border:#2e2e2c;
    --border-strong:#3c3c39;
    --accent:#7d94c4;
    --accent-soft:rgba(125,148,196,.1);
    --accent-border:rgba(125,148,196,.28);
    --text:#f5f5f4;
    --muted:#9b9b9b;
    --soft:#c7c7c5;
    --success:#5cb787;
    --shadow:0 16px 40px rgba(0,0,0,.3);
}

html{scroll-behavior:smooth}

body{
    min-height:100vh;
    background:var(--bg);
    color:var(--text);
    font-family:"Inter",-apple-system,BlinkMacSystemFont,sans-serif;
    transition:background .2s ease,color .2s ease;
}

.app{position:relative;width:min(1180px,calc(100% - 48px));margin:auto;padding:24px 0 18px}

/* Topbar */
.topbar{height:56px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--border);padding-bottom:22px}
.brand{display:flex;align-items:center;gap:10px;color:var(--text);text-decoration:none;font-size:17px;font-weight:600;letter-spacing:-.3px}
.brand strong{font-weight:700}
.brand-mark{width:30px;height:30px;display:grid;place-items:center;border-radius:9px;background:var(--text);color:var(--bg)}
.brand-mark svg{width:16px;fill:currentColor}

.topbar-right{display:flex;align-items:center;gap:10px}

.theme-toggle{
    display:grid;place-items:center;width:36px;height:36px;border-radius:999px;
    border:1px solid var(--border);background:var(--surface);color:var(--muted);
    cursor:pointer;transition:.2s;
}
.theme-toggle:hover{border-color:var(--border-strong);color:var(--text)}
.theme-toggle svg{width:16px;height:16px}
.theme-toggle .icon-moon{display:none}
[data-theme="dark"] .theme-toggle .icon-sun{display:none}
[data-theme="dark"] .theme-toggle .icon-moon{display:block}

.status-pill{display:flex;align-items:center;gap:8px;color:var(--muted);font-size:12px;font-weight:500;padding:8px 12px;background:var(--surface);border:1px solid var(--border);border-radius:999px}
.status-pill span,.output-status span{width:6px;height:6px;background:var(--success);border-radius:50%}

/* Profile nav */
.profile-nav{position:relative}

.profile-menu-credit{
    display:flex;align-items:center;gap:6px;padding:12px 14px;
    font-size:12px;font-weight:600;color:var(--text);
    border-bottom:1px solid var(--border);background:var(--surface);
}
.credit-icon{color:var(--accent);font-size:9px}
.profile-trigger{
    display:flex;align-items:center;gap:9px;padding:6px 12px 6px 6px;
    border:1px solid var(--border);border-radius:999px;background:var(--surface);
    cursor:pointer;transition:.2s;
}
.profile-trigger:hover{border-color:var(--border-strong)}
.profile-avatar{
    width:26px;height:26px;border-radius:50%;display:grid;place-items:center;
    background:var(--text);color:var(--bg);font-size:11px;font-weight:700;flex:none;
}
.profile-name{font-size:13px;font-weight:500;color:var(--text);max-width:120px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.profile-chevron{color:var(--muted);font-size:10px;transition:transform .2s}
.profile-nav.open .profile-chevron{transform:rotate(180deg)}

.profile-menu{
    position:absolute;top:calc(100% + 8px);right:0;min-width:200px;
    background:var(--bg);border:1px solid var(--border);border-radius:12px;
    box-shadow:var(--shadow);overflow:hidden;z-index:100;
    opacity:0;visibility:hidden;transform:translateY(-4px);transition:.15s ease;
}
.profile-nav.open .profile-menu{opacity:1;visibility:visible;transform:translateY(0)}
.profile-menu-item{
    display:flex;align-items:center;gap:10px;padding:11px 14px;
    color:var(--text);font-size:13px;font-weight:500;cursor:pointer;
    background:none;border:0;width:100%;text-align:left;
}
.profile-menu-item:hover{background:var(--surface)}
.profile-menu-item.danger{color:#c0392b}
.profile-menu-divider{height:1px;background:var(--border);margin:4px 0}

/* Hero */
.hero{display:flex;align-items:flex-end;justify-content:space-between;gap:50px;padding:54px 6px 45px}
.hero>div:first-child{max-width:680px}
.eyebrow{display:flex;align-items:center;gap:8px;color:var(--muted);font-size:12px;font-weight:600;text-transform:uppercase;letter-spacing:1px;margin-bottom:18px}
.eyebrow span{color:var(--accent);background:var(--accent-soft);border:1px solid var(--accent-border);padding:4px 7px;border-radius:5px;font-size:9px}
.hero h1{font-size:clamp(34px,4vw,54px);line-height:1.1;letter-spacing:-1.5px;font-weight:700}
.hero h1 em{font-style:normal;color:var(--accent)}
.hero p{max-width:600px;margin-top:18px;color:var(--muted);font-size:16px;line-height:1.65}

.step-guide{display:flex;align-items:center;margin-bottom:8px}
.step{display:flex;align-items:center;gap:10px;color:var(--muted)}
.step b{display:grid;place-items:center;width:30px;height:30px;border:1px solid var(--border-strong);border-radius:50%;font-size:10px;font-weight:700;color:var(--muted)}
.step span{font-size:11px;font-weight:700;line-height:1.35;text-transform:uppercase;letter-spacing:.5px;white-space:nowrap;color:var(--soft)}
.step small{font-weight:400;text-transform:none;letter-spacing:0;color:var(--muted)}
.step.active{color:var(--text)}.step.active b{border-color:var(--accent);background:var(--accent-soft);color:var(--accent)}
.step.done b{border-color:var(--success);background:rgba(47,122,82,.08);color:var(--success);font-size:0}
.step.done b::before{content:"✓";font-size:12px}
.step.done span{color:var(--soft)}
.step-guide i{display:block;width:36px;height:1px;background:var(--border);margin:0 10px;transition:background .2s}

.studio-grid{display:grid;grid-template-columns:minmax(400px,.86fr) minmax(500px,1.14fr);gap:18px;align-items:stretch}

footer{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;color:var(--muted);font-size:11px;padding:25px 5px 0}
footer span:first-child{font-weight:700;color:var(--soft)}
footer span:last-child{text-align:right}
.footer-links{display:flex;justify-content:center;gap:18px}
.footer-links a{color:var(--muted);text-decoration:none;transition:.15s}
.footer-links a:hover{color:var(--text)}

/* Focus states */
.upload-zone:focus-within .preview{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
.theme-toggle:focus-visible,
.profile-trigger:focus-visible,
.replace-image:focus-visible,
.generate-button:focus-visible,
.action:focus-visible,
.footer-links a:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
select:focus-visible{outline:2px solid var(--accent);outline-offset:1px}

/* =========================================
   Login Modal
========================================= */

.modal-overlay{
    position:fixed;
    inset:0;
    background:rgba(13,13,13,.4);
    display:grid;
    place-items:center;
    z-index:1000;
    padding:20px;
}

.modal-overlay[hidden]{display:none}
[data-theme="dark"] .modal-overlay{background:rgba(0,0,0,.6)}

.modal{
    position:relative;
    width:100%;
    max-width:380px;
    background:var(--bg);
    border:1px solid var(--border);
    border-radius:16px;
    box-shadow:var(--shadow);
    padding:32px 28px 28px;
}

.modal-close{
    position:absolute;
    top:14px;
    right:14px;
    width:28px;
    height:28px;
    border:0;
    border-radius:8px;
    background:var(--surface);
    color:var(--muted);
    font-size:12px;
    cursor:pointer;
    transition:.15s;
}
.modal-close:hover{background:var(--surface-2);color:var(--text)}
.modal-close:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

.modal h3{
    font-size:18px;
    font-weight:700;
    letter-spacing:-.3px;
}

.modal-subtitle{
    margin-top:6px;
    color:var(--muted);
    font-size:12px;
}

.modal-form{
    margin-top:20px;
    display:flex;
    flex-direction:column;
    gap:12px;
}

.modal-form .field{display:flex;flex-direction:column;gap:6px}
.modal-form .field span{color:var(--soft);font-size:11px;font-weight:600}
.modal-form .field input{
    height:42px;
    padding:0 13px;
    border:1px solid var(--border);
    border-radius:9px;
    background:var(--surface);
    color:var(--text);
    outline:none;
    font:500 13px "Inter",sans-serif;
    transition:.15s;
}
.modal-form .field input:focus{
    border-color:var(--accent);
    box-shadow:0 0 0 3px var(--accent-soft);
    background:var(--bg);
}

.modal-links{
    display:flex;
    justify-content:center;
    gap:8px;
    margin-top:18px;
    color:var(--muted);
    font-size:12px;
}
.modal-links a{color:var(--soft);text-decoration:none;font-weight:600}
.modal-links a:hover{color:var(--accent)}
.modal-links a:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:4px}