/* ========== Fotoluxo Studio (luxury light) ========== */
:root{
    --bg:#faf7f2;            /* ivory */
    --card:#ffffff;
    --ink:#1c1a19;
    --muted:#6d6762;
    --gold:#c9a227;          /* champagne */
    --gold-2:#e3cd7a;
    --line:#eee7dd;
    --shadow:0 10px 28px rgba(34, 25, 13, .08);
    --radius:18px;
}

*{box-sizing:border-box}
html,body{height:100%}
body.studio-body{
    margin:0;
    font-family:Inter, system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, "Noto Sans", "Apple Color Emoji", "Segoe UI Emoji";
    background:var(--bg);
    color:var(--ink);
    -webkit-font-smoothing:antialiased;
    text-rendering:optimizeLegibility;
}

/* Header */
.studio-header{
    position:sticky; top:0; z-index:20;
    display:flex; align-items:center; justify-content:space-between;
    padding:14px 16px; background:linear-gradient(180deg,#fff,rgba(255,255,255,.92));
    border-bottom:1px solid var(--line);
    backdrop-filter:saturate(1.2) blur(6px);
}
.studio-brand{display:flex; align-items:center; gap:12px}
.studio-logo{
    width:40px; height:40px; border-radius:12px; display:grid; place-items:center;
    font-weight:700; color:#fff; background:linear-gradient(135deg,var(--gold),var(--gold-2));
    box-shadow:0 6px 18px rgba(201,162,39,.35);
    flex-shrink: 0;
}
.studio-title{display:flex; flex-direction:column; line-height:1.1}
.studio-name{font-weight:700}
.studio-sub{font-size:12px; color:var(--muted)}

.studio-header-actions{display:flex; align-items:center; gap:10px}
.studio-balance{
    border:1px solid var(--line);
    background:var(--card); border-radius:999px; padding:8px 12px;
    font-weight:600; cursor:default;
}
.studio-topup{
    border:none; border-radius:999px; padding:10px 14px; font-weight:600; cursor:pointer;
    color:#fff; background:linear-gradient(135deg,var(--gold),var(--gold-2));
    box-shadow:0 6px 18px rgba(201,162,39,.35);
}

@media (max-width: 720px) {
    .studio-header-actions {
        flex-direction: column;
    }
    .studio-balance {
        border: none;
        background: transparent;
        padding: 0;
    }
}

/* Layout */
.studio-main{max-width:1200px; margin:18px auto; padding:0 12px}
.studio-stage{
    display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-bottom:16px;
}
.studio-stage-col{min-width:0}
.studio-frame{
    background:var(--card); border:1px solid var(--line); border-radius:var(--radius);
    box-shadow:var(--shadow);
}
.studio-frame-head{
    display:flex; align-items:center; justify-content:space-between;
    padding:12px 14px; border-bottom:1px solid var(--line);
    height: 60px;
}
.studio-frame-title{font-weight:600}
.studio-change-photo{
    border:1px solid var(--line); background:#fff; border-radius:10px; padding:8px 12px; cursor:pointer;
}
.studio-image-wrap{position:relative; aspect-ratio:4/5; width:100%; background:#cdcdcd; border-radius:0 0 var(--radius) var(--radius); overflow:hidden; }
.studio-image{width:100%; height:100%; object-fit:contain; display:none; object-position: center}
.studio-image-ph{
    position:absolute; inset:0; display:grid; place-items:center;
    color:var(--muted); font-size:14px; padding:10px; text-align:center;
}

/* Controls */
.studio-controls{display:grid; gap:14px; margin-bottom:18px}
.studio-control-card{
    background:var(--card); border:1px solid var(--line); border-radius:var(--radius);
    box-shadow:var(--shadow); padding:14px;
}
.studio-label{font-weight:600; margin-bottom:8px; display:block}
.studio-input-row{display:flex; gap:10px}
.studio-input{
    flex:1; min-width:0;
    border:1px solid var(--line); background:#fff; border-radius:12px;
    padding:12px 14px; font-size:15px; outline:none;
}
.studio-input:focus{border-color:var(--gold)}
.studio-cta{
    white-space:nowrap; border:none; border-radius:12px; padding:12px 14px; font-weight:700;
    color:#fff; background:linear-gradient(135deg,var(--gold),var(--gold-2)); cursor:pointer;
    box-shadow:0 8px 20px rgba(201,162,39,.35);
}
.studio-cta:disabled{
    opacity:.6; cursor:not-allowed; background:#cbbf95; box-shadow:none;
}
.studio-hint{margin-top:8px; color:var(--muted); font-size:12px}

.studio-presets{
    display:grid; gap:10px;
    grid-template-columns:repeat(5,1fr);
}
.studio-preset{
    border:1px solid var(--line); background:#fff; border-radius:12px; padding:10px; cursor:pointer;
    display:flex; align-items:center; gap:8px; transition:transform .08s ease, box-shadow .08s ease, border-color .08s ease;
}
.studio-preset:hover{transform:translateY(-1px); box-shadow:0 8px 20px rgba(201,162,39,.12)}
.studio-preset-dot{width:10px; height:10px; border-radius:50%; background:linear-gradient(135deg,var(--gold),var(--gold-2))}
.studio-preset.active{border-color:var(--gold); box-shadow:0 8px 20px rgba(201,162,39,.18)}

.studio-result-tags{display:flex; gap:6px; flex-wrap:wrap; display: none}
.studio-tag{
    font-size:12px; color:#735e1a; background:#fbf4da; border:1px solid #f3e6b5;
    padding:4px 8px; border-radius:999px;
}

/* History */
.studio-history{background:transparent; padding-bottom: 20px}
.studio-history-head{display:flex; align-items:baseline; justify-content:space-between; margin-bottom:8px}
.studio-history-sub{color:var(--muted); font-size:12px}
.studio-history-list{display:grid; gap:10px; grid-template-columns:repeat(6,1fr)}
.studio-thumb{
    background:var(--card); border:1px solid var(--line); border-radius:12px; overflow:hidden; cursor:pointer;
    box-shadow:var(--shadow);
}
.studio-thumb img{width:100%; aspect-ratio:1/1; object-fit:cover; display:block}
.studio-thumb-meta{display:flex; justify-content:space-between; padding:6px 8px; font-size:12px; color:var(--muted)}

@media (max-width: 720px) {
    .studio-history-head {
        flex-direction: column;
    }
}
/* Camera overlay */
.studio-cam-overlay{
    position:fixed; inset:0; background:rgba(18, 15, 10, .38); display:none; z-index:50000000;
    backdrop-filter: blur(2px);
}
.studio-cam-card{
    position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
    width:min(720px,94vw); background:var(--card); border:1px solid var(--line); border-radius:16px;
    box-shadow:0 24px 40px rgba(34,25,13,.25); padding:14px;
}
.studio-cam-head{display:flex; justify-content:space-between; align-items:center; margin-bottom:8px}
.studio-cam-title{font-weight:700}
.studio-cam-close{
    width:36px; height:36px; border-radius:10px; border:1px solid var(--line); background:#fff; cursor:pointer; font-size:20px; line-height:1;
}
.studio-cam-body{position:relative; background:#111; border-radius:12px; overflow:hidden}
.studio-cam-video, .studio-cam-shot{width:100%; height:auto; display:block}
.studio-cam-canvas{display:none}
.studio-cam-shot{display:none; object-fit:cover}
.studio-cam-actions{display:flex; gap:8px; margin-top:10px; flex-wrap:wrap; justify-content: space-between}
.studio-cam-btn{
    border:1px solid var(--line); border-radius:12px; padding:10px 14px; background:#fff; cursor:pointer; font-weight:600;
}
.studio-cam-btn.primary{color:#fff; border:none; background:linear-gradient(135deg,var(--gold),var(--gold-2))}
.studio-cam-btn.subtle{background:#f7f2ea}

.studio-cam-foot{margin-top:6px; color:var(--muted); font-size:12px}

/* Spinner */
.studio-spinner{
    position:fixed; inset:0; display:grid; place-items:center; background:rgba(250,247,242,.75); z-index:40ж;
    left: 0;
    right: 0;
    margin: auto;
    align-items: center;
    justify-content: center;
}
.studio-spinner-dot{
    width:14px; height:14px; border-radius:50%; background:linear-gradient(135deg,var(--gold),var(--gold-2));
    display:inline-block; margin:0 6px; animation:studio-bounce 1s infinite ease-in-out both;
}
.studio-spinner-dot:nth-child(2){animation-delay:.15s}
.studio-spinner-dot:nth-child(3){animation-delay:.3s}
@keyframes studio-bounce{
    0%,80%,100%{transform:scale(0)}
    40%{transform:scale(1)}
}

#studio-spinner { display: none; }
#studio-spinner.is-on { display: flex; } /* покажем только когда явно «включим» */

/* Toasts */
.studio-toasts{position:fixed; left:50%; bottom:16px; transform:translateX(-50%); display:grid; gap:8px; z-index:60}
.studio-toast{
    background:var(--card); border:1px solid var(--line); border-left:6px solid var(--gold); border-radius:12px; padding:10px 14px; box-shadow:var(--shadow);
}

/* Placeholders visibility */
.studio-image--visible{display:block}
.studio-image-ph--hidden{display:none}

/* Responsive */
@media (max-width: 980px){
    .studio-presets{grid-template-columns:repeat(3,1fr)}
    .studio-history-list{grid-template-columns:repeat(4,1fr)}
}
@media (max-width: 720px){
    .studio-stage{grid-template-columns:1fr; gap:12px}
    .studio-input-row{flex-direction:column; align-items:stretch; display: block}
    .studio-cta{width:100%}
    .studio-presets{grid-template-columns:repeat(2,1fr)}
    .studio-history-list{grid-template-columns:repeat(3,1fr)}
}
@media (max-width: 420px){
    .studio-history-list{grid-template-columns:repeat(2,1fr)}
}

/* Minor */
.studio-noscript{padding:10px; text-align:center; background:#fff3cd; color:#7b5d00}




/* === Added: result navigation & download controls === */
.studio-head-actions{
    display:flex; align-items:center; gap:8px;
    margin-left:auto;
}

.studio-icon-btn{
    display:inline-flex; align-items:center; justify-content:center;
    width:40px; height:40px;                /* круглая форма + немного крупнее */
    border:1px solid var(--line); background:#fff; border-radius:50%;
    cursor:pointer;
    transition:box-shadow .12s ease, transform .06s ease, border-color .12s ease, filter .12s ease, opacity .12s ease;
}
.studio-icon-btn:hover{
    border-color:var(--gold);
    box-shadow:0 6px 16px rgba(201,162,39,.15);
    transform:translateY(-1px);
}
.studio-icon-btn:focus{
    outline:none;
    border-color:var(--gold);
    box-shadow:0 0 0 3px rgba(201,162,39,.20);
}
.studio-icon-btn[disabled],
.studio-icon-btn.is-disabled{
    opacity:.55; cursor:not-allowed; box-shadow:none; transform:none;
    filter:grayscale(1);                    /* засеривание в disabled */
}

.studio-icon-btn svg{
    width:18px; height:18px; display:block;
}
a.studio-icon-btn{ text-decoration:none; color:inherit }

@media (max-width:420px){
    .studio-head-actions{ gap:6px }
    .studio-icon-btn{ width:36px; height:36px }
}



/* autosize for textarea prompt */
.studio-input--textarea{
    height:auto;
    min-height:48px;
    resize:vertical;
    overflow:hidden;
    line-height:1.4;
}
/* autosize для текстовой области промпта */
textarea.studio-input{
    resize: none;
    overflow: hidden;               /* скрываем скролл пока помещается */
    min-height: 48px;
    line-height: 1.4;
    max-height: calc(1.4em * 7 + 24px); /* максимум ~7 строк (паддинги 12px сверху/снизу) */
    -webkit-overflow-scrolling: touch;
}

@media (max-width:780px) {
    textarea.studio-input {
        width: 100%;
    }
}