/* =====================================================
   multi-ai-generator / ai-generator.css
   Fitly design system (matches fitly.pics top page)
   ===================================================== */

/* ── Hero ─────────────────────────────────────── */
.gen-hero {
    text-align: center;
    padding: 0 20px 20px;
    margin: 0 auto;
}

.gen-eyebrow {
    display: inline-block;
    font-size: 9px;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: var(--muted);
    border: 1.5px solid var(--sand);
    padding: 4px 14px;
    border-radius: 20px;
    margin-bottom: 16px;
    font-family: 'Noto Sans JP', sans-serif;
}

.generator-title {
    font-family: 'Noto Sans JP', sans-serif;
    font-size: 26px;
    font-weight: 800;
    line-height: 1.3;
    letter-spacing: -0.5px;
    color: var(--ink);
    margin-bottom: 14px;
}

.generator-title .t-accent { color: var(--accent); }

.generator-catch {
    font-family: 'Noto Sans JP', sans-serif;
    font-size: 14px;
    color: var(--muted);
    line-height: 1.8;
    text-align: center;
    max-width: 560px;
    margin: 0 auto 8px;
}

.free-badge {
    display: inline-block;
    margin-top: 8px;
    font-size: 11px;
    font-weight: bold;
    color: var(--accent);
    font-family: 'Noto Sans JP', sans-serif;
    letter-spacing: 0.5px;
}

/* ── Status Bar ───────────────────────────────── */

/* 共通ベース */
.gen-status-bar {
    display: flex;
    background: #fafafa;
    border: none;
}

.status-credit-block {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 14px 16px;
    flex-shrink: 0;
}

#credit-display {
    font-family: 'Noto Sans JP', sans-serif;
    font-size: 13px;
    font-weight: bold;
    color: var(--ink);
}

#credit-count {
    font-size: 22px;
    font-weight: 800;
    color: var(--accent);
    font-family: 'Noto Sans JP', sans-serif;
    line-height: 1;
}

.status-license-block {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 16px;
    flex: 1;
    min-width: 0;
}

.status-license-label {
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--muted);
    font-family: 'Noto Sans JP', sans-serif;
    white-space: nowrap;
    flex-shrink: 0;
    border-left: 3px solid var(--accent);
    padding-left: 7px;
}

#my-license-code {
    font-family: 'Noto Sans JP', sans-serif;
    font-size: 12px;
    font-weight: bold;
    letter-spacing: 1.5px;
    color: var(--ink);
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.btn-restore-toggle {
    font-size: 10px;
    letter-spacing: 0.5px;
    color: var(--muted);
    background: transparent;
    border: 1.5px solid var(--sand);
    padding: 4px 10px;
    cursor: pointer;
    font-family: 'Noto Sans JP', sans-serif;
    border-radius: 100px;
    transition: border-color 0.15s, color 0.15s;
    white-space: nowrap;
    flex-shrink: 0;
}
.btn-restore-toggle:hover { border-color: var(--ink); color: var(--ink); }

.premium-mode .status-credit-block #credit-display { color: var(--accent); }

/* インライン表示（≤1599px）*/
@media (max-width: 1599px) {
    .gen-status-bar {
        align-items: center;
        justify-content: center;
        flex-wrap: wrap;
        gap: 0;
        max-width: 760px;
        margin: 0 auto 10px;
        box-shadow: 2px 2px 5px rgba(0,0,0,0.15);
        border-radius: 5px;
        overflow: hidden;
    }
    .status-license-block {
        border-top: 1.5px dashed var(--sand);
    }
}

/* 固定浮遊（≥1600px）*/
@media (min-width: 1600px) {
    .gen-status-bar {
        position: fixed;
        left: 10px;
        top: 50%;
        transform: translateY(-50%);
        flex-direction: column;
        align-items: stretch;
        width: 250px;
        margin: 0;
        max-width: none;
        justify-content: flex-start;
        flex-wrap: nowrap;
        gap: 0;
        z-index: 50;
        box-shadow: 2px 2px 5px rgba(0,0,0,0.2);
        border-radius: 5px;
        overflow: hidden;
    }

    .status-credit-block {
        flex-direction: column;
        align-items: flex-start;
        gap: 6px;
        padding: 20px 16px 14px;
        border-bottom: 1.5px dashed var(--sand);
    }

    #credit-display {
        font-size: 11px;
        line-height: 1.5;
    }

    #credit-count {
        font-size: 36px;
        display: block;
    }

    .status-license-block {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
        padding: 14px 16px 16px;
        border-left: none;
        flex: 0 0 auto;
    }

    .status-license-label {
        font-size: 9px;
        letter-spacing: 2px;
    }

    #my-license-code {
        font-size: 12px;
        white-space: normal;
        word-break: break-all;
        flex: none;
        letter-spacing: 2px;
    }

    .btn-restore-toggle {
        width: 100%;
        text-align: center;
        margin-top: 2px;
    }
}

/* ── Restore Panel ────────────────────────────── */

/* インライン（≤1599px）*/
.gen-restore-panel {
    max-width: 760px;
    margin: 0 auto 28px;
    background: #fafafa;
    border-top: none;
    padding: 14px 16px;
    display: flex;
    gap: 8px;
    align-items: center;
    animation: fadeUp 0.2s ease both;
    box-shadow: 2px 2px 5px rgba(0,0,0,0.15);
    border-radius: 0 0 5px 5px;
}

/* 固定浮遊（≥1600px）*/
@media (min-width: 1600px) {
    .gen-restore-panel {
        position: fixed;
        left: 274px; /* 10px + 250px + 14px gap */
        top: 50%;
        transform: translateY(-50%);
        width: 300px;
        margin: 0;
        border-radius: 5px;
        box-shadow: 2px 2px 5px rgba(0,0,0,0.2);
        flex-direction: column;
        gap: 8px;
    }
}

#input-license {
    flex: 1;
    padding: 10px 14px;
    border: 1.5px solid var(--sand);
    background: #fff;
    font-family: 'Noto Sans JP', sans-serif;
    font-size: 14px;
    letter-spacing: 2px;
    color: var(--ink);
    border-radius: var(--radius);
    outline: none;
    transition: border-color 0.15s;
}
#input-license:focus { border-color: var(--ink); }
#input-license::placeholder { letter-spacing: 0.5px; color: var(--muted); font-size: 12px; }

#btn-restore {
    padding: 10px 18px;
    background: var(--ink);
    color: var(--paper);
    border: 1.5px solid var(--ink);
    font-family: 'Noto Sans JP', sans-serif;
    font-size: 11px;
    font-weight: bold;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    cursor: pointer;
    border-radius: var(--radius);
    white-space: nowrap;
    transition: background 0.15s;
    box-shadow: 2px 2px 0 var(--accent);
}
#btn-restore:hover { background: var(--accent); border-color: var(--accent); }

/* ── Generator Container ──────────────────────── */
.generator-container {
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 20px 80px;
}

/* ── Input Panel ──────────────────────────────── */
.input-panel {
    border: 2px solid var(--ink);
    background: #fff;
    margin-bottom: 24px;
    animation: fadeUp 0.4s ease both;
}

.input-panel-header {
    padding: 14px 20px;
    border-bottom: 2px solid var(--ink);
    display: flex;
    justify-content: flex-end;
    margin-top: 10px;
}

/* =========================================
   利用案内・料金表セクション (新設)
========================================= */
.info-section {
    margin-top: 50px;
    margin-bottom: 50px;
    border-top: 4px solid var(--ink);
    padding-top: 40px;
    font-family: 'DM Mono', monospace;
}

.info-heading {
    font-size: 24px;
    font-weight: 800;
    margin-bottom: 20px;
    text-align: center;
    color: var(--ink);
}

/* 料金表グリッド */
.pricing-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 20px;
    margin-bottom: 40px;
}

.pricing-card {
    background: var(--paper);
    border: 2px solid var(--ink);
    border-radius: var(--radius);
    padding: 25px;
    text-align: center;
    box-shadow: 4px 4px 0px var(--ink);
    display: flex;
    flex-direction: column;
}

.pricing-card.popular {
    border-color: var(--accent);
    box-shadow: 4px 4px 0px var(--accent);
    position: relative;
    transform: translateY(-5px);
}

.popular-badge {
    position: absolute;
    top: -12px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--accent);
    color: white;
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: bold;
    border: 2px solid var(--ink);
    white-space: nowrap;
}

.pricing-tier {
    font-size: 18px;
    font-weight: bold;
    color: var(--muted);
    margin-bottom: 10px;
}

.pricing-credits {
    font-size: 32px;
    font-weight: 900;
    color: var(--ink);
    margin-bottom: 5px;
}

.pricing-price {
    font-size: 20px;
    font-weight: bold;
    color: var(--accent);
    margin-bottom: 20px;
}

.pricing-desc {
    font-size: 13px;
    line-height: 1.5;
    color: var(--ink);
    margin-bottom: 25px;
    flex-grow: 1;
}

.btn-buy {
    display: block;
    width: 100%;
    padding: 15px;
    background: var(--ink);
    color: var(--paper);
    text-decoration: none;
    font-weight: bold;
    font-size: 16px;
    border-radius: var(--radius);
    border: 2px solid var(--ink);
    transition: 0.2s;
}

.btn-buy:hover {
    background: var(--accent);
    color: white;
    transform: translateY(-2px);
    box-shadow: 2px 2px 0px var(--ink);
}

.pricing-card.popular .btn-buy {
    background: var(--accent);
    color: white;
    border-color: var(--ink);
}
.pricing-card.popular .btn-buy:hover {
    background: var(--ink);
}

/* アラート・注意書き */
.info-alert {
    background: #fff3cd;
    border: 2px solid #ffeeba;
    border-left: 6px solid #ffc107;
    padding: 15px 20px;
    border-radius: var(--radius);
    margin-bottom: 30px;
    color: #856404;
}

.info-alert.danger {
    background: #f8d7da;
    border-color: #f5c6cb;
    border-left-color: var(--accent);
    color: #721c24;
}

.info-alert-title {
    font-weight: bold;
    margin-bottom: 8px;
    font-size: 16px;
}

.info-alert p {
    margin: 0;
    font-size: 14px;
    line-height: 1.6;
}

/* 活用術 */
.usage-tips {
    background: var(--paper);
    border: 2px dashed var(--ink);
    padding: 25px;
    border-radius: var(--radius);
}

.usage-tips h4 {
    margin-top: 0;
    margin-bottom: 15px;
    color: var(--ink);
    font-size: 18px;
}

.usage-tips ul {
    margin: 0;
    padding-left: 20px;
}

.usage-tips li {
    font-size: 14px;
    line-height: 1.6;
    margin-bottom: 10px;
    color: var(--ink);
}

.input-panel-label {
    font-size: 9px;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: var(--muted);
    font-family: 'Noto Sans JP', sans-serif;
    flex: 1;
}

.input-panel-label::after {
    display: none;
}

.input-panel-body {
    padding: 20px 22px;
}

#prompt-input {
    width: 100%;
    min-height: 100px;
    padding: 14px 16px;
    font-size: 15px;
    border: 1.5px solid var(--sand);
    border-radius: var(--radius);
    background: var(--paper);
    color: var(--ink);
    resize: vertical;
    transition: border-color 0.18s;
    font-family: 'Noto Sans JP', sans-serif;
    line-height: 1.7;
    margin-bottom: 12px;
    display: block;
}
#prompt-input:focus { outline: none; border-color: var(--ink); }
#prompt-input::placeholder { color: var(--muted); font-size: 13px; }

/* Tips */
.tips-details {
    font-size: 12px;
    color: var(--muted);
    margin-bottom: 16px;
    cursor: pointer;
    line-height: 1.7;
}
.tips-summary {
    font-size: 11px;
    font-family: 'Noto Sans JP', sans-serif;
    font-weight: bold;
    color: var(--ink);
    letter-spacing: 0.5px;
    list-style: none;
    cursor: pointer;
}
.tips-summary::-webkit-details-marker { display: none; }
.tips-content {
    margin-top: 10px;
    padding: 14px;
    background: rgba(209,202,190,0.3);
    border-left: 3px solid var(--sand);
    font-family: 'Noto Sans JP', sans-serif;
    line-height: 1.8;
    font-size: 12px;
}
.canva-link { color: var(--accent); font-weight: bold; }

/* Form Actions */
.form-actions {
    display: flex;
    gap: 10px;
    align-items: stretch;
}

.btn-sample {
    flex: 0 0 auto;
    padding: 14px 18px;
    font-size: 12px;
    font-weight: bold;
    color: var(--ink);
    background: transparent;
    border: 1.5px solid var(--ink);
    border-radius: var(--radius);
    cursor: pointer;
    font-family: 'Noto Sans JP', sans-serif;
    letter-spacing: 0.5px;
    transition: background 0.15s;
    white-space: nowrap;
}
.btn-sample:hover { background: var(--sand); }

#submit-btn {
    flex: 1;
    padding: 15px 20px;
    font-size: 14px;
    font-weight: bold;
    color: var(--paper);
    background: var(--ink);
    border: 1.5px solid var(--ink);
    border-radius: var(--radius);
    cursor: pointer;
    font-family: 'Noto Sans JP', sans-serif;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    transition: all 0.18s;
    box-shadow: 3px 3px 0 var(--accent);
}
#submit-btn:hover:not(:disabled) {
    background: var(--accent);
    border-color: var(--accent);
    box-shadow: 5px 5px 0 var(--ink);
    transform: translate(-1px, -1px);
}
#submit-btn:disabled {
    opacity: 0.35;
    cursor: not-allowed;
    box-shadow: none;
}

.error-text {
    color: var(--accent);
    font-size: 13px;
    font-weight: bold;
    text-align: center;
    margin-top: 10px;
    font-family: 'Noto Sans JP', sans-serif;
}

/* Pro plan link */
.pro-plan-link-wrapper {
    text-align: center;
    margin-top: 16px;
    padding-top: 14px;
    border-top: 1px solid var(--sand);
}
#link-pro-plan {
    font-size: 11px;
    color: var(--muted);
    text-decoration: none;
    letter-spacing: 0.5px;
    font-family: 'Noto Sans JP', sans-serif;
    transition: color 0.15s;
    border-bottom: 1px dotted var(--sand);
    padding-bottom: 2px;
}
#link-pro-plan:hover { color: var(--accent); border-bottom-color: var(--accent); }

/* ── Results Grid ─────────────────────────────── */
.results-section {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    margin-bottom: 30px;
}

/* ── AI Card ──────────────────────────────────── */
.ai-card {
    border: 2px solid var(--ink);
    background: var(--paper);
    display: flex;
    flex-direction: column;
    animation: fadeUp 0.5s ease both;
}

/* Card Header */
.ai-card-header {
    padding: 14px 16px 12px;
    background: #fff;
    border-bottom: 2px solid var(--ink);
}

.ai-card-top-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 6px;
}

.ai-card-eyebrow {
    font-size: 9px;
    letter-spacing: 2.5px;
    text-transform: uppercase;
    color: var(--muted);
    font-family: 'Noto Sans JP', sans-serif;
}

.ai-badge {
    font-size: 9px;
    font-weight: bold;
    font-family: 'Noto Sans JP', sans-serif;
    padding: 3px 10px;
    letter-spacing: 1px;
    text-transform: uppercase;
    border-radius: 20px;
    white-space: nowrap;
}
.ai-badge-photo   { background: rgba(200,75,47,0.1);  color: var(--accent); border: 1px solid var(--accent); }
.ai-badge-illust  { background: rgba(45,106,79,0.12); color: var(--green);  border: 1px solid var(--green);  }
.ai-badge-anime   { background: rgba(184,147,58,0.12);color: var(--gold);   border: 1px solid var(--gold);   }

.ai-card-model {
    font-family: 'Noto Sans JP', sans-serif;
    font-size: 18px;
    font-weight: 800;
    color: var(--ink);
    letter-spacing: -0.5px;
    line-height: 1.2;
    margin-bottom: 2px;
}

.ai-card-sub {
    font-family: 'Noto Sans JP', sans-serif;
    font-size: 11px;
    color: var(--muted);
    line-height: 1.4;
}

/* Image Area */
.image-container-new {
    aspect-ratio: 1 / 1;
    background: var(--sand);
    position: relative;
    overflow: hidden;
}

.image-container-new img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: opacity 0.3s;
}

.pre-generate-label {
    position: absolute;
    inset: 0;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 18px;
    color: #fff;
    font-family: 'Noto Sans JP', sans-serif;
    font-size: 14px;
    font-weight: 900;
    line-height: 1.35;
    text-align: center;
    text-shadow: 0 2px 14px rgba(0, 0, 0, .72);
}

.pre-generate-label::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: rgba(0, 0, 0, .54);
}

.pre-generate-label.is-hidden {
    display: none;
}

/* Loader */
.loader-wrapper {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: rgba(245,241,235,0.96);
    z-index: 10;
    gap: 14px;
}

.loader {
    width: 26px;
    height: 26px;
    border: 3px solid var(--sand);
    border-top-color: var(--ink);
    border-radius: 50%;
    animation: spin 0.75s linear infinite;
}

.progress-bar-container {
    width: 64%;
    height: 3px;
    background: var(--sand);
    border-radius: 2px;
    overflow: hidden;
}
.progress-bar {
    height: 100%;
    background: var(--ink);
    transition: width 0.3s ease;
}
.progress-text {
    font-size: 10px;
    color: var(--muted);
    font-family: 'Noto Sans JP', sans-serif;
    letter-spacing: 1px;
}

/* Action Buttons */
.action-buttons {
    display: flex;
    gap: 8px;
    padding: 12px;
    background: #fff;
    border-top: 1.5px solid var(--sand);
}

.action-buttons button {
    flex: 1;
    padding: 9px 6px;
    font-size: 11px;
    font-weight: bold;
    border-radius: var(--radius);
    cursor: pointer;
    transition: all 0.15s;
    font-family: 'Noto Sans JP', sans-serif;
    letter-spacing: 0.3px;
}

.btn-download {
    background: transparent;
    color: var(--muted);
    border: 1.5px solid var(--sand);
}
.btn-download:hover { border-color: var(--ink); color: var(--ink); background: var(--sand); }

.btn-modify {
    background: var(--ink);
    color: var(--paper);
    border: 1.5px solid var(--ink);
}
.btn-modify:hover { background: var(--accent); border-color: var(--accent); }

/* HD Download */
.hd-download-wrap {
    text-align: center;
    padding: 0 12px 10px;
    background: #fff;
}
.hd-download-wrap a {
    font-size: 10px;
    color: var(--muted);
    text-decoration: none;
    font-family: 'Noto Sans JP', sans-serif;
    letter-spacing: 0.3px;
    transition: color 0.15s;
}
.hd-download-wrap a:hover { color: var(--accent); }

/* Modify Area */
.modify-area {
    padding: 12px;
    background: var(--paper);
    border-top: 1.5px solid var(--sand);
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.modify-input {
    width: 100%;
    padding: 10px 12px;
    border: 1.5px solid var(--sand);
    border-radius: var(--radius);
    background: #fff;
    font-family: 'Noto Sans JP', sans-serif;
    font-size: 13px;
    color: var(--ink);
    resize: vertical;
    line-height: 1.6;
    transition: border-color 0.15s;
    box-sizing: border-box;
}
.modify-input:focus { outline: none; border-color: var(--ink); }

.btn-regenerate {
    background: var(--green);
    color: white;
    border: 1.5px solid var(--ink);
    padding: 10px;
    border-radius: var(--radius);
    cursor: pointer;
    font-weight: bold;
    font-family: 'Noto Sans JP', sans-serif;
    font-size: 12px;
    letter-spacing: 0.5px;
    transition: all 0.15s;
    box-shadow: 2px 2px 0 var(--ink);
    width: 100%;
}
.btn-regenerate:hover {
    background: #235638;
    transform: translate(-1px, -1px);
    box-shadow: 3px 3px 0 var(--ink);
}

/* ── Modals ───────────────────────────────────── */
.modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(10,9,8,0.82);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
}
.modal-overlay.is-visible {
    display: flex !important;
}
.multi-ai-page #submit-btn.is-credit-empty {
    background: #0f0e0c;
    border-color: #0f0e0c;
}

.multi-ai-page .account-panel-label {
    display: none;
}
.multi-ai-page .status-license-block,
.multi-ai-page .gen-restore-panel {
    display: none !important;
}
.multi-ai-page .pay-success-google-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    min-height: 46px;
    border-radius: 999px;
    background: #fff;
    border: 1px solid #eee5dc;
    color: #121212;
    font-weight: 800;
    text-decoration: none;
}
.multi-ai-page .pay-success-google-btn:hover {
    border-color: #4285f4;
    box-shadow: 0 0 0 3px rgba(66, 133, 244, .12);
    text-decoration: none;
}

@media (min-width: 1440px) {
    .multi-ai-page .gen-status-bar {
        position: fixed !important;
        left: max(18px, calc((100vw - 1120px) / 2 - 300px)) !important;
        top: 128px !important;
        z-index: 80;
        width: 230px !important;
        display: flex;
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 0;
        margin: 0 !important;
        padding: 16px !important;
        border: 1px solid #eee5dc;
        border-radius: 10px;
        background: #fff !important;
        box-shadow: 0 18px 46px rgba(18, 18, 18, .12);
        overflow: visible;
    }
    .multi-ai-page .account-panel-label {
        display: block;
        margin: 0 0 10px;
        color: #e51b0f;
        font-size: 11px;
        font-weight: 900;
        letter-spacing: 2px;
        text-transform: uppercase;
    }
    .multi-ai-page .status-login-block,
    .multi-ai-page .status-credit-block {
        width: 100%;
        padding: 0;
        border: 0;
    }
    .multi-ai-page .status-credit-block {
        order: -1;
        margin: 0 0 14px;
        padding: 0 0 14px;
        border-bottom: 1px solid #eee5dc;
    }
    .multi-ai-page .status-login-block {
        margin-left: 0;
    }
    .multi-ai-page #login-section,
    .multi-ai-page #logged-in-section {
        width: 100%;
    }
    .multi-ai-page #logged-in-section {
        flex-wrap: wrap;
    }
    .multi-ai-page .btn-google-login {
        font-size: 13px;
    }
    .multi-ai-page .login-hint {
        text-align: left;
        line-height: 1.6;
    }
}

@media (max-width: 1439px) {
    .multi-ai-page .gen-status-bar {
        position: static;
    }
}

/* Compact tool-first layout */
.gen-seo-lead {
    width: min(1120px, calc(100% - 40px));
    margin: 44px auto 18px;
    text-align: center;
}
.gen-seo-lead h1 {
    margin: 0;
    color: #121212;
    font-size: clamp(26px, 3vw, 28px);
    font-weight: 900;
    line-height: 1.35;
    letter-spacing: 0;
}
.multi-ai-main-h2{
    font-size: 15px;
  text-align: center;
  margin: 20px auto 0;
  color: #555;
  font-weight: normal;
}
.gen-seo-lead h3 {
    margin: 10px 0 0;
    color: #555;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.8;
}
.multi-ai-page .gen-hero {
    margin-top: 0;
    margin-bottom: 22px;
}
.multi-ai-page .gen-hero-copy {
    min-height: 320px;
    padding: 42px 38px;
}
.multi-ai-page .gen-hero-preview {
    min-height: 320px;
}
.multi-ai-page .generator-title {
    max-width: 700px;
}
.multi-ai-page .generator-catch {
    max-width: 680px;
}
.multi-ai-page .tips-details,
.multi-ai-page .usage-tips,
.multi-ai-page .description-wrap {
    display: none;
}
.multi-ai-page .gen-value-grid {
    display: none;
}
.multi-ai-page .gen-value-card {
    min-height: 156px;
}
.multi-ai-page .compact-note {
    margin-top: 24px;
}
.multi-ai-page .compact-note p {
    margin-bottom: 0;
}
.gen-blog-guide {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 22px;
    margin: 44px 0 0;
    padding: 24px;
    border: 1px solid #eee5dc;
    border-radius: 8px;
    box-shadow: 0 18px 46px rgba(18, 18, 18, .06);
}
.multi-ai-page .gen-blog-guide {
    background: #fff;
}
.gen-blog-guide-label {
    display: inline-flex;
    margin-bottom: 8px;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: #e51b0f;
}
.gen-blog-guide h3 {
    margin: 0 0 8px;
    color: #121212;
    font-size: 22px;
    line-height: 1.35;
}
.gen-blog-guide p {
    margin: 0;
    color: #5f5851;
    font-size: 14px;
    line-height: 1.8;
    font-weight: 500;
}
.gen-blog-guide-links {
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    gap: 14px;
}
.gen-blog-guide-btn {
    min-height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 18px;
    border-radius: 999px;
    border: 1.5px solid #c8bdb5;
    background: transparent;
    color: #5f5851;
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
    transition: border-color .15s ease, color .15s ease;
}
.gen-blog-guide-btn:hover {
    border-color: #e51b0f;
    color: #e51b0f;
    text-decoration: none;
}

.multi-ai-page .gen-status-bar {
    overflow: visible;
}
.multi-ai-page .status-credit-block {
    min-width: 230px;
    justify-content: center;
    padding: 18px 22px;
    background: #fff !important;
}
.multi-ai-page #credit-display {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 6px;
    color: #121212;
    font-size: 13px;
    font-weight: 900;
    line-height: 1.2;
    text-align: center;
}
.multi-ai-page #credit-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 56px;
    color: #e51b0f;
    font-size: 44px;
    font-weight: 900;
    line-height: 1;
}
.multi-ai-page .status-login-block {
    padding: 14px 18px;
}
.generation-flow-note {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 0 0 14px;
    padding: 12px 14px;
    border: 0;
    border-radius: 8px;
    background: #fff8f5;
    color: #121212;
}
.generation-flow-note span,
.results-heading span {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 24px;
    padding: 0 10px;
    border-radius: 999px;
    background: #e51b0f;
    color: #fff;
    font-size: 11px;
    font-weight: 900;
    letter-spacing: .04em;
}
.generation-flow-note strong {
    font-size: 14px;
    line-height: 1.7;
}
.multi-ai-page .prompt-detail-note {
    margin: -6px 0 14px;
    color: #e51b0f;
    font-size: 13px;
    font-weight: 800;
    line-height: 1.7;
}
.results-heading {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 0 0 14px;
    padding: 12px 14px;
    border: 0;
    border-radius: 8px;
    background: #fff !important;
    color: #5f5851;
    text-align: left;
}
.input-panel-results {
    padding: 0 22px 22px;
    background: #fff !important;
}
.results-heading strong {
    color: #121212;
    font-size: 14px;
    font-weight: 900;
    line-height: 1.7;
}
.multi-ai-page .input-panel {
    border-color: #e51b0f;
    box-shadow: 0 18px 46px rgba(229, 27, 15, .09);
}
.multi-ai-page .results-section {
    padding: 16px;
    border: 1px solid #ffe0d8;
    border-radius: 10px;
    background: #fffdf9;
    box-shadow: 0 18px 46px rgba(15, 14, 12, .06);
}
.multi-ai-page .pricing-card {
    padding-top: 34px;
}
.multi-ai-page .pricing-card.popular {
    overflow: visible;
    z-index: 1;
}
.multi-ai-page .popular-badge {
    top: -16px;
    z-index: 5;
    padding: 7px 16px;
    border-radius: 999px;
    color: #fff;
    font-size: 12px;
    box-shadow: 0 12px 24px rgba(229, 27, 15, .22);
}
.multi-ai-page .pricing-price {
    margin: 6px 0 12px;
    font-size: 34px;
    font-weight: 900;
    line-height: 1;
}
.multi-ai-page .pricing-price span {
    font-size: 17px;
    font-weight: 900;
}
.multi-ai-page .gen-value-grid {
    display: none !important;
}
.multi-ai-page {
    background: var(--paper) !important;
}
.multi-ai-page .gen-status-bar,
.multi-ai-page .input-panel,
.multi-ai-page .ai-card,
.multi-ai-page .pricing-card,
.multi-ai-page .info-alert,
.multi-ai-page .modal-content,
.multi-ai-page .pay-success-google-btn,
.multi-ai-page .premium-features li {
    background: var(--paper) !important;
}
.multi-ai-page .input-panel-body,
.multi-ai-page #prompt-input,
.multi-ai-page .results-section,
.multi-ai-page .status-credit-block,
.multi-ai-page .generation-flow-note,
.multi-ai-page .compact-note,
.multi-ai-page .gen-blog-guide {
    background: #fff !important;
}
.multi-ai-page #prompt-input {
    background: #fff !important;
}
.multi-ai-page .generation-flow-note {
    background: #fff !important;
}

@media (min-width: 1440px) {
    .multi-ai-page .gen-status-bar {
        position: fixed !important;
        left: max(18px, calc((100vw - 1120px) / 2 - 300px)) !important;
        top: 128px !important;
        z-index: 80 !important;
        width: 230px !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 0 !important;
        margin: 0 !important;
        padding: 16px !important;
        border: 1px solid #eee5dc !important;
        border-radius: 10px !important;
        background: #fff !important;
        box-shadow: 0 18px 46px rgba(18, 18, 18, .12) !important;
        overflow: visible !important;
    }
    .multi-ai-page .status-credit-block {
        order: -1 !important;
        width: 100% !important;
        min-width: 0 !important;
        margin: 0 0 14px !important;
        padding: 0 0 14px !important;
        border-bottom: 1px solid #eee5dc !important;
    }
    .multi-ai-page .status-login-block {
        width: 100% !important;
        margin-left: 0 !important;
        padding: 0 !important;
    }
}

.multi-ai-page #credit-display {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-wrap: wrap !important;
    gap: 6px !important;
    color: #121212 !important;
    font-size: 13px !important;
    font-weight: 900 !important;
    line-height: 1.2 !important;
    text-align: center !important;
}
.multi-ai-page #credit-count {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-width: 56px !important;
    color: #e51b0f !important;
    font-size: 44px !important;
    font-weight: 900 !important;
    line-height: 1 !important;
}

@media (max-width: 760px) {
    .multi-ai-page .gen-hero-copy,
    .multi-ai-page .gen-hero-preview {
        min-height: auto;
    }
    .multi-ai-page .gen-hero-copy {
        padding: 30px 22px;
    }
    .gen-blog-guide {
        align-items: stretch;
        flex-direction: column;
    }
    .gen-blog-guide-links {
        width: 100%;
    }
    .gen-blog-guide-btn {
        width: 100%;
    }
    .gen-seo-lead {
        width: min(100% - 28px, 1120px);
        margin-top: 30px;
    }
    .generation-flow-note {
        align-items: flex-start;
        flex-direction: column;
    }
    .multi-ai-page .results-section {
        padding: 12px;
    }
}

.modal-content {
    background: var(--paper);
    padding: 30px 26px;
    border: 2px solid var(--ink);
    border-radius: var(--radius);
    max-width: 460px;
    width: 92%;
    position: relative;
    box-shadow: 8px 8px 0 var(--ink);
    animation: fadeUp 0.22s ease both;
}

.modal-close {
    position: absolute;
    top: 12px;
    right: 14px;
    font-size: 20px;
    cursor: pointer;
    color: var(--muted);
    background: none;
    border: none;
    line-height: 1;
    transition: color 0.15s;
}
.modal-close:hover { color: var(--accent); }

.modal-header h2 {
    font-family: 'Noto Sans JP', sans-serif;
    font-size: 19px;
    font-weight: 800;
    color: var(--ink);
    margin: 0 0 12px;
    letter-spacing: -0.4px;
}

.modal-body > p {
    font-family: 'Noto Sans JP', sans-serif;
    font-size: 14px;
    color: var(--ink);
    line-height: 1.7;
    margin-bottom: 16px;
}

.premium-features {
    list-style: none;
    padding: 0;
    margin: 0 0 20px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.premium-features li {
    font-size: 13px;
    color: var(--ink);
    padding: 9px 14px;
    background: #fff;
    border: 1.5px solid var(--sand);
    border-radius: var(--radius);
    font-family: 'Noto Sans JP', sans-serif;
}

.btn-subscribe {
    width: 100%;
    padding: 14px;
    background: var(--ink);
    color: var(--paper);
    border: 1.5px solid var(--ink);
    font-size: 14px;
    font-weight: bold;
    border-radius: var(--radius);
    cursor: pointer;
    font-family: 'Noto Sans JP', sans-serif;
    letter-spacing: 0.5px;
    box-shadow: 3px 3px 0 var(--accent);
    transition: all 0.18s;
}
.btn-subscribe:hover {
    background: var(--accent);
    border-color: var(--accent);
    transform: translate(-1px, -1px);
    box-shadow: 5px 5px 0 var(--ink);
}

/* Out of Credits Modal */
.out-of-credits-content { text-align: center; }

.ooc-title {
    font-family: 'Noto Sans JP', sans-serif;
    font-size: 19px;
    font-weight: 800;
    color: var(--ink);
    margin-bottom: 10px;
}
.ooc-desc {
    font-family: 'Noto Sans JP', sans-serif;
    font-size: 13px;
    color: var(--muted);
    line-height: 1.7;
    margin-bottom: 20px;
}
.ooc-buy-btn {
    display: block;
    padding: 13px;
    background: var(--ink);
    color: var(--paper);
    text-decoration: none;
    border: 1.5px solid var(--ink);
    font-weight: bold;
    font-family: 'Noto Sans JP', sans-serif;
    font-size: 13px;
    margin-bottom: 10px;
    border-radius: var(--radius);
    box-shadow: 3px 3px 0 var(--accent);
    transition: all 0.18s;
    letter-spacing: 0.5px;
}
.ooc-buy-btn:hover {
    background: var(--accent);
    border-color: var(--accent);
    transform: translate(-1px, -1px);
    box-shadow: 5px 5px 0 var(--ink);
    color: white;
}
.ooc-close-btn {
    background: none;
    border: none;
    color: var(--muted);
    cursor: pointer;
    text-decoration: underline;
    font-family: 'Noto Sans JP', sans-serif;
    font-size: 11px;
}

/* ── Animations ───────────────────────────────── */
@keyframes spin {
    to { transform: rotate(360deg); }
}
@keyframes fadeUp {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ── Responsive ───────────────────────────────── */
@media (max-width: 900px) {
    .results-section {
        grid-template-columns: 1fr;
        max-width: 500px;
        margin-left: auto;
        margin-right: auto;
    }
}

@media (max-width: 640px) {
    .generator-title { font-size: 26px; }

    .gen-status-bar { flex-direction: column; max-width: 100%; border-radius: 5px; overflow: hidden; }
    .status-credit-block { width: 100%; justify-content: center; border-bottom: 1.5px dashed var(--sand); padding: 12px 16px; }
    .status-license-block { width: 100%; justify-content: center; flex-wrap: wrap; padding: 10px 16px; border-top: none; }
    #credit-count { font-size: 18px; }
    .gen-restore-panel { flex-direction: column; border-radius: 0 0 5px 5px; }

    .input-panel-body { padding: 16px 14px; }

    .form-actions { flex-direction: column; }
    .btn-sample { order: 2; text-align: center; }
    #submit-btn { order: 1; }

}

@media (max-width: 400px) {
    .generator-title { font-size: 21px; }
    .ai-card-model { font-size: 15px; }
}

/* ── Google Login Block ─────────────────────── */
.status-login-block {
    padding: 14px 16px;
    border-bottom: 1.5px dashed var(--sand);
}
.btn-google-login {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    padding: 9px 12px;
    background: white;
    border: 1.5px solid var(--sand);
    border-radius: 8px;
    font-family: 'Noto Sans JP', sans-serif;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--ink);
    text-decoration: none;
    cursor: pointer;
    transition: border-color 0.15s, box-shadow 0.15s;
    white-space: nowrap;
}
.btn-google-login:hover {
    border-color: #4285F4;
    box-shadow: 0 0 0 2px rgba(66,133,244,0.15);
}
.login-hint {
    font-size: 0.68rem;
    color: var(--muted);
    margin: 5px 0 0;
    text-align: center;
}
#logged-in-section {
    display: flex;
    align-items: center;
    gap: 8px;
}
.user-avatar {
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
}
.user-name-label {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--ink);
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.btn-logout {
    font-size: 0.72rem;
    color: var(--muted);
    text-decoration: underline;
    cursor: pointer;
    white-space: nowrap;
    flex-shrink: 0;
}
.btn-logout:hover { color: var(--ink); }

/* ≥1600px: 縦並びに対応 */
@media (min-width: 1600px) {
    .status-login-block {
        border-bottom: none;
        border-top: 1.5px dashed var(--sand);
        order: 3;
        padding: 14px 16px 16px;
    }
    .btn-google-login { font-size: 0.75rem; }
}

/* ── Toast 通知 ─────────────────────────────── */
.fitly-toast {
    position: fixed;
    bottom: 24px;
    left: 50%;
    transform: translateX(-50%) translateY(12px);
    background: var(--ink);
    color: var(--paper);
    padding: 10px 20px;
    border-radius: 8px;
    font-size: 0.85rem;
    font-family: 'Noto Sans JP', sans-serif;
    opacity: 0;
    transition: opacity 0.25s, transform 0.25s;
    z-index: 2000;
    pointer-events: none;
    white-space: nowrap;
}
.fitly-toast-show {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}
.fitly-toast-error { background: #c0392b; }

/* ── Payment Success Modal ───────────────────── */
.pay-success-content {
    max-width: 420px;
    text-align: center;
}
.pay-success-icon {
    font-size: 2.8rem;
    margin-bottom: 6px;
}
.pay-success-title {
    font-size: 1.4rem;
    font-weight: 800;
    font-family: 'Noto Sans JP', sans-serif;
    margin: 0 0 4px;
}
.pay-success-credits {
    font-size: 1rem;
    color: var(--accent);
    font-weight: 700;
    margin: 0 0 20px;
}
.pay-success-code-box {
    background: #f0ece5;
    border: 1.5px solid var(--sand);
    border-radius: 10px;
    padding: 16px;
    margin-bottom: 16px;
    text-align: left;
}
.pay-success-code-label {
    font-size: 0.72rem;
    font-weight: 700;
    color: var(--muted);
    letter-spacing: 0.04em;
    margin-bottom: 8px;
}
.pay-success-code {
    font-size: 1.5rem;
    font-weight: 800;
    font-family: 'Courier New', monospace;
    letter-spacing: 0.15em;
    color: var(--ink);
    margin-bottom: 6px;
}
.pay-success-code-note {
    font-size: 0.72rem;
    color: var(--muted);
    margin: 0;
    line-height: 1.4;
}
.pay-success-login-nudge {
    background: linear-gradient(135deg, #fff8f0 0%, #fdf4ee 100%);
    border: 1.5px solid #e8d5c5;
    border-radius: 10px;
    padding: 16px;
    margin-bottom: 16px;
    text-align: left;
}
.pay-success-nudge-title {
    font-weight: 700;
    font-size: 0.88rem;
    margin-bottom: 6px;
    color: var(--ink);
}
.pay-success-nudge-desc {
    font-size: 0.78rem;
    color: var(--muted);
    margin: 0 0 12px;
    line-height: 1.55;
}
.pay-success-google-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 10px 14px;
    border: 1.5px solid var(--sand);
    border-radius: 8px;
    background: white;
    font-family: 'Noto Sans JP', sans-serif;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--muted);
    cursor: not-allowed;
    opacity: 0.7;
}
.coming-soon-badge {
    margin-left: auto;
    background: var(--sand);
    color: var(--muted);
    font-size: 0.62rem;
    padding: 2px 7px;
    border-radius: 4px;
    font-weight: 700;
    white-space: nowrap;
}
.pay-success-skip-btn {
    background: none;
    border: none;
    color: var(--muted);
    font-size: 0.82rem;
    cursor: pointer;
    padding: 4px 12px;
    text-decoration: underline;
    font-family: 'Noto Sans JP', sans-serif;
}
.pay-success-skip-btn:hover { color: var(--ink); }

/* ── Download Gate Modal ────────────────────── */
.dg-content {
    max-width: 400px;
    text-align: center;
}
.dg-icon  { font-size: 2.4rem; margin-bottom: 8px; }
.dg-title {
    font-size: 1.2rem;
    font-weight: 800;
    font-family: 'Noto Sans JP', sans-serif;
    margin: 0 0 8px;
}
.dg-desc {
    font-size: 0.85rem;
    color: var(--muted);
    line-height: 1.6;
    margin: 0 0 18px;
}
#dg-login-section {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0;
    margin-bottom: 4px;
}
.dg-google-btn {
    width: 100%;
    justify-content: center;
    margin-bottom: 0;
}
.dg-divider {
    font-size: 0.72rem;
    color: var(--muted);
    padding: 10px 0;
    position: relative;
    width: 100%;
    text-align: center;
}
.dg-divider::before,
.dg-divider::after {
    content: '';
    position: absolute;
    top: 50%;
    width: 30%;
    height: 1px;
    background: var(--sand);
}
.dg-divider::before { left: 0; }
.dg-divider::after  { right: 0; }
.dg-purchase-btn {
    width: 100%;
    padding: 12px;
    background: var(--accent);
    color: white;
    border: none;
    border-radius: 8px;
    font-family: 'Noto Sans JP', sans-serif;
    font-size: 0.9rem;
    font-weight: 700;
    cursor: pointer;
    transition: opacity 0.15s;
    margin-top: 8px;
}
.dg-purchase-btn:hover { opacity: 0.88; }

/* ── 履歴ボタン（サイドバー） ───────────────────── */
.btn-history {
    font-size: 0.72rem;
    color: var(--ink);
    text-decoration: none;
    font-weight: 600;
    white-space: nowrap;
    flex-shrink: 0;
    padding: 3px 6px;
    border: 1px solid var(--sand);
    border-radius: 5px;
}
.btn-history:hover { border-color: var(--ink); }

/* ── 履歴ページ ─────────────────────────────────── */
.history-main {
    max-width: 1100px;
    margin: 0 auto;
    padding: 32px 20px 60px;
}
.history-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 28px;
    padding-bottom: 20px;
    border-bottom: 2px solid var(--ink);
}
.history-header-left {
    display: flex;
    align-items: center;
    gap: 12px;
}
.history-header-actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
}
.history-title {
    font-size: 1.3rem;
    font-weight: 800;
    font-family: 'Noto Sans JP', sans-serif;
    margin: 0 0 2px;
}
.history-sub {
    font-size: 0.78rem;
    color: var(--muted);
    margin: 0;
}
.btn-back-to-gen {
    display: inline-block;
    padding: 9px 18px;
    background: var(--ink);
    color: var(--paper);
    border-radius: 8px;
    font-size: 0.85rem;
    font-weight: 700;
    text-decoration: none;
    font-family: 'Noto Sans JP', sans-serif;
    white-space: nowrap;
}
.btn-back-to-gen:hover { opacity: 0.85; }
.btn-history-credit {
    display: inline-block;
    padding: 9px 18px;
    border: 1.5px solid var(--ink);
    border-radius: 8px;
    background: #fff;
    color: var(--ink);
    font-family: 'Noto Sans JP', sans-serif;
    font-size: 0.85rem;
    font-weight: 700;
    text-decoration: none;
    white-space: nowrap;
}
.btn-history-credit:hover {
    border-color: var(--accent);
    color: var(--accent);
}

.history-notes {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    margin: 0 0 24px;
}
.history-note {
    padding: 14px 16px;
    border: 1px solid #eee5dc;
    border-radius: 8px;
    background: #fffdf9;
}
.history-note strong {
    display: block;
    margin-bottom: 6px;
    color: var(--ink);
    font-size: 0.82rem;
    font-weight: 800;
}
.history-note p {
    margin: 0;
    color: var(--muted);
    font-size: 0.76rem;
    font-weight: 600;
    line-height: 1.7;
}

.history-empty {
    text-align: center;
    padding: 80px 20px;
}
.history-empty-icon { font-size: 3rem; margin-bottom: 12px; }
.history-empty-text {
    font-size: 1rem;
    color: var(--muted);
    margin-bottom: 24px;
}

.history-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}
@media (max-width: 900px)  { .history-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px)  { .history-grid { grid-template-columns: 1fr; } }

.history-card {
    border: 1.5px solid var(--sand);
    border-radius: 12px;
    overflow: hidden;
    background: white;
    transition: box-shadow 0.15s;
}
.history-card:hover { box-shadow: 0 4px 16px rgba(0,0,0,0.1); }

.history-img-wrap {
    position: relative;
    aspect-ratio: 4/3;
    background: #f0ece5;
    overflow: hidden;
}
.history-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.history-img-expired {
    display: none;
    position: absolute;
    inset: 0;
    background: #f0ece5;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
    color: var(--muted);
    text-align: center;
}
.history-img-error .history-img         { display: none; }
.history-img-error .history-img-expired { display: flex; }
.history-img-placeholder {
    background: #f0ece5;
}

.history-card-body {
    padding: 12px 14px 14px;
}
.history-card-meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 8px;
}
.history-model-name {
    font-size: 0.72rem;
    color: var(--muted);
    font-weight: 600;
}
.history-date {
    font-size: 0.68rem;
    color: var(--muted);
    margin-left: auto;
}
.history-expire {
    margin: -2px 0 8px;
    font-size: 0.68rem;
    color: #8f8172;
    font-weight: 600;
}
.history-prompt {
    font-size: 0.78rem;
    color: var(--ink);
    line-height: 1.5;
    margin: 0 0 10px;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.btn-regen {
    display: block;
    font-size: 0.75rem;
    color: var(--accent);
    text-decoration: none;
    font-weight: 600;
}
.btn-regen:hover { text-decoration: underline; }
.history-actions {
    display: grid;
    gap: 8px;
}
.btn-history-download {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 34px;
    padding: 8px 10px;
    border: 1px solid var(--sand);
    border-radius: 999px;
    background: var(--ink);
    color: #fff;
    font-size: 0.74rem;
    font-weight: 700;
    text-decoration: none;
}
.btn-history-download:hover {
    background: var(--accent);
    border-color: var(--accent);
}

.history-pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    margin-top: 40px;
}
.pagination-btn {
    padding: 8px 18px;
    border: 1.5px solid var(--ink);
    border-radius: 8px;
    font-size: 0.85rem;
    font-weight: 600;
    text-decoration: none;
    color: var(--ink);
    font-family: 'Noto Sans JP', sans-serif;
}
.pagination-btn:hover { background: var(--ink); color: var(--paper); }
.pagination-info {
    font-size: 0.85rem;
    color: var(--muted);
}

.history-affiliate-text {
    margin-top: 44px;
    padding: 18px;
    border: 1px solid #eee5dc;
    border-radius: 8px;
    background: #fff;
}
.history-affiliate-head {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 12px;
}
.history-affiliate-label {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 34px;
    min-height: 22px;
    border-radius: 999px;
    background: var(--accent);
    color: #fff;
    font-size: 0.68rem;
    font-weight: 900;
    letter-spacing: 0.08em;
}
.history-affiliate-head h2 {
    margin: 0;
    color: var(--ink);
    font-size: 0.95rem;
    font-weight: 850;
}
.history-affiliate-list {
    display: grid;
    gap: 10px;
}
.history-affiliate-list p {
    margin: 0;
    color: #4f4741;
    font-size: 0.78rem;
    font-weight: 600;
    line-height: 1.75;
}
.history-affiliate-list a {
    color: var(--accent);
    text-decoration: none;
}
.history-affiliate-list a:hover {
    text-decoration: underline;
}

@media (max-width: 680px) {
    .history-header-actions {
        width: 100%;
    }
    .btn-back-to-gen,
    .btn-history-credit {
        flex: 1 1 160px;
        text-align: center;
    }
    .history-notes {
        grid-template-columns: 1fr;
    }
}

/* =====================================================
   Renewal: flagship AI generator page
   ===================================================== */
.multi-ai-page {
    max-width: none;
    padding: 0 0 92px;
    background: #f6f6f6;
}
.multi-ai-page .gen-hero,
.multi-ai-page .gen-status-bar,
.multi-ai-page .gen-restore-panel,
.multi-ai-page .gen-value-grid,
.multi-ai-page .generator-container {
    width: min(1120px, calc(100% - 40px));
}
.multi-ai-page .gen-hero {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(300px, .95fr);
    gap: 34px;
    align-items: stretch;
    margin: 54px auto 18px;
    padding: 0;
    text-align: left;
}
.gen-hero-copy {
    position: relative;
    overflow: hidden;
    min-height: 430px;
    padding: 46px;
    border-radius: 8px;
    background:
        linear-gradient(90deg, rgba(0, 0, 0, .94), rgba(0, 0, 0, .66)),
        url("https://images.unsplash.com/photo-1677442136019-21780ecad995?w=1200&q=80") center / cover;
    color: #fff;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    box-shadow: 0 20px 54px rgba(10, 10, 10, .18);
}
.gen-hero-copy::after {
    content: "";
    position: absolute;
    inset: auto -8% -28% 24%;
    height: 220px;
    border: 1px solid rgba(255, 255, 255, .18);
    border-radius: 50%;
    pointer-events: none;
}
.gen-hero-badges {
    position: relative;
    z-index: 1;
    display: flex;
    flex-wrap: wrap;
    gap: 9px;
    margin-bottom: 18px;
}
.gen-hero-badges span {
    min-height: 32px;
    display: inline-flex;
    align-items: center;
    padding: 6px 12px;
    border: 1px solid rgba(255, 255, 255, .34);
    border-radius: 999px;
    background: rgba(255, 255, 255, .12);
    color: #fff;
    font-size: 12px;
    font-weight: 800;
    line-height: 1;
}
.multi-ai-page .generator-title {
    position: relative;
    z-index: 1;
    max-width: 760px;
    margin: 0;
    color: #fff;
    font-size: clamp(34px, 4.3vw, 46px);
    font-weight: 800;
    line-height: 1.18;
    letter-spacing: 0;
    text-align: left;
}
.multi-ai-page .generator-catch {
    position: relative;
    z-index: 1;
    max-width: 720px;
    margin: 18px 0 0;
    color: rgba(255, 255, 255, .88);
    font-size: 16px;
    font-weight: 500;
    line-height: 1.9;
    text-align: left;
}
.gen-hero-actions {
    position: relative;
    z-index: 1;
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 30px;
}
.gen-hero-primary,
.gen-hero-secondary {
    min-height: 46px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 12px 18px;
    border-radius: 999px;
    font-size: 14px;
    font-weight: 800;
    text-decoration: none;
    transition: transform .18s ease, box-shadow .18s ease, background .18s ease;
}
.gen-hero-primary {
    background: #e51b0f;
    color: #fff;
    box-shadow: 0 14px 30px rgba(229, 27, 15, .24);
}
.gen-hero-secondary {
    border: 1px solid rgba(255, 255, 255, .38);
    background: rgba(255, 255, 255, .12);
    color: #fff;
}
.gen-hero-primary:hover,
.gen-hero-secondary:hover {
    transform: translateY(-2px);
    text-decoration: none;
}
.gen-hero-preview {
    min-height: 430px;
    display: grid;
    gap: 14px;
}
.gen-preview-card {
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    min-height: 130px;
    padding: 22px;
    border-radius: 8px;
    background: #111;
    color: #fff;
    box-shadow: 0 14px 36px rgba(15, 14, 12, .12);
}
.gen-preview-card::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(0, 0, 0, .04), rgba(0, 0, 0, .68));
}
.gen-preview-card span,
.gen-preview-card strong {
    position: relative;
    z-index: 1;
}
.gen-preview-card span {
    color: rgba(255, 255, 255, .72);
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
}
.gen-preview-card strong {
    margin-top: 4px;
    font-size: 24px;
    line-height: 1.2;
}
.gen-preview-card-photo {
    background:
        linear-gradient(180deg, rgba(0,0,0,.05), rgba(0,0,0,.7)),
        url("https://images.unsplash.com/photo-1568992687947-868a62a9f521?w=900&q=80") center / cover;
}
.gen-preview-card-illust {
    background:
        linear-gradient(180deg, rgba(0,0,0,.05), rgba(0,0,0,.68)),
        url("https://images.unsplash.com/photo-1513364776144-60967b0f800f?w=900&q=80") center / cover;
}
.gen-preview-card-anime {
    background:
        linear-gradient(180deg, rgba(0,0,0,.05), rgba(0,0,0,.7)),
        url("https://images.unsplash.com/photo-1613376023733-0a73315d9b06?w=900&q=80") center / cover;
}
.gen-value-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
    margin: 18px auto 26px;
}
.gen-value-card {
    min-height: 188px;
    padding: 24px;
    border: 1px solid #eee5dc;
    border-radius: 8px;
    background: #fff;
    box-shadow: 0 14px 36px rgba(15, 14, 12, .07);
}
.gen-value-icon {
    width: 42px;
    height: 42px;
    display: grid;
    place-items: center;
    margin-bottom: 18px;
    border-radius: 4px;
    background: #fff0ee;
    color: #b00012;
}
.gen-value-card h3 {
    margin: 0 0 10px;
    color: #121212;
    font-size: 18px;
    font-weight: 800;
    line-height: 1.45;
}
.gen-value-card p {
    margin: 0;
    color: #5f5851;
    font-size: 14px;
    font-weight: 500;
    line-height: 1.8;
}
.multi-ai-page .gen-status-bar {
    position: static;
    left: auto;
    top: auto;
    transform: none;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    margin: 0 auto 18px;
    border: 1px solid #eee5dc;
    border-radius: 8px;
    background: #fff;
    box-shadow: 0 12px 30px rgba(15, 14, 12, .05);
    overflow: hidden;
}
.multi-ai-page .status-credit-block,
.multi-ai-page .status-license-block,
.multi-ai-page .status-login-block {
    flex-direction: row;
    align-items: center;
    width: auto;
    border-top: 0;
    border-bottom: 0;
}
.multi-ai-page .status-login-block {
    order: 0;
    margin-left: auto;
}
.multi-ai-page #credit-count {
    display: inline;
    font-size: 22px;
}
.multi-ai-page .gen-restore-panel {
    margin: -8px auto 22px;
    border: 1px solid #eee5dc;
    border-radius: 8px;
    background: #fffdf9;
}
.multi-ai-page .generator-container {
    max-width: none;
    padding: 0 0 80px;
}
.multi-ai-page .input-panel,
.multi-ai-page .ai-card,
.multi-ai-page .pricing-card,
.multi-ai-page .usage-tips {
    border: 1px solid #eee5dc;
    border-radius: 8px;
    background: #fff;
    box-shadow: 0 14px 36px rgba(15, 14, 12, .07);
    overflow: hidden;
}
.multi-ai-page .input-panel {
    margin-bottom: 24px;
}
.multi-ai-page .input-panel-header {
    justify-content: flex-start;
    margin-top: 0;
    padding: 18px 22px;
    border-bottom: 1px solid #eee5dc;
    background: #080808;
}
.multi-ai-page .input-panel-label {
    color: #fff;
    font-size: 13px;
    font-weight: 800;
    letter-spacing: 0;
    text-transform: none;
}
.multi-ai-page .input-panel-body {
    padding: 22px;
}
.multi-ai-page #prompt-input {
    min-height: 132px;
    border: 1px solid #eee5dc;
    border-radius: 8px;
    background: #fffdf9;
    font-size: 15px;
}
.multi-ai-page #prompt-input:focus {
    border-color: rgba(229, 27, 15, .45);
    box-shadow: 0 0 0 4px rgba(229, 27, 15, .08);
}
.multi-ai-page .tips-details {
    padding: 14px;
    border: 1px solid #eee5dc;
    border-radius: 8px;
    background: #fff;
}
.multi-ai-page .tips-content {
    border-left-color: #e51b0f;
    background: #fff0ee;
}
.multi-ai-page .btn-sample,
.multi-ai-page #submit-btn,
.multi-ai-page .btn-buy,
.multi-ai-page .dg-purchase-btn,
.multi-ai-page .ooc-buy-btn,
.multi-ai-page .btn-subscribe {
    border-radius: 999px;
}
.multi-ai-page #submit-btn {
    border-color: #e51b0f;
    background: #e51b0f;
    box-shadow: 0 14px 30px rgba(229, 27, 15, .20);
    letter-spacing: 0;
}
.multi-ai-page #submit-btn:hover:not(:disabled) {
    background: #c9150b;
    border-color: #c9150b;
    box-shadow: 0 18px 36px rgba(229, 27, 15, .24);
    transform: translateY(-2px);
}
.multi-ai-page .btn-sample {
    border-color: #eee5dc;
    background: #fff;
}
.multi-ai-page .btn-sample:hover {
    border-color: rgba(229, 27, 15, .28);
    background: #fff0ee;
    color: #b00012;
}
.multi-ai-page .results-section {
    gap: 18px;
    margin-bottom: 30px;
}
.multi-ai-page .ai-card {
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.multi-ai-page .ai-card:hover {
    transform: translateY(-4px);
    border-color: rgba(229, 27, 15, .26);
    box-shadow: 0 18px 42px rgba(176, 0, 18, .12);
}
.multi-ai-page .ai-card-header {
    padding: 18px;
    border-bottom: 1px solid #eee5dc;
}
.multi-ai-page .ai-card-eyebrow {
    color: #756d66;
    letter-spacing: .08em;
}
.multi-ai-page .ai-card-model {
    font-size: 20px;
    letter-spacing: 0;
}
.multi-ai-page .ai-card-sub {
    color: #5f5851;
    font-weight: 500;
}
.multi-ai-page .ai-badge {
    border: 0;
    font-size: 10px;
    font-weight: 900;
    letter-spacing: 0;
}
.multi-ai-page .ai-badge-photo,
.multi-ai-page .ai-badge-illust,
.multi-ai-page .ai-badge-anime {
    background: #fff0ee;
    color: #b00012;
}
.multi-ai-page .image-container-new {
    background: #eee5dc;
}
.multi-ai-page .action-buttons {
    border-top: 1px solid #eee5dc;
}
.multi-ai-page .action-buttons button {
    border-radius: 999px;
}
.multi-ai-page .btn-modify {
    background: #080808;
}
.multi-ai-page .btn-modify:hover {
    background: #e51b0f;
}
.multi-ai-page .info-section {
    scroll-margin-top: 96px;
    margin-top: 58px;
    padding: 0 22px 24px;
    border: 1px solid #eee5dc;
    border-radius: 8px;
    background: #fff;
    box-shadow: 0 14px 36px rgba(15, 14, 12, .07);
    overflow: hidden;
    font-family: 'Noto Sans JP', sans-serif;
}
.multi-ai-page .info-heading {
    position: relative;
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 0 -22px;
    padding: 18px 22px;
    border: 0;
    border-radius: 0;
    background: #080808;
    color: #fff;
    font-size: 18px;
    font-weight: 900;
    line-height: 1.35;
    text-align: left;
    box-shadow: none;
}
.multi-ai-page .info-heading::before {
    content: none;
}
.multi-ai-page .pricing-lead {
    margin: 0;
    padding: 20px 0 18px;
    color: #555;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.8;
}
.multi-ai-page .pricing-grid {
    gap: 22px;
    padding: 26px;
    border-radius: 8px;
    background: #f4f2ef !important;
}
.multi-ai-page .pricing-card {
    display: flex;
    flex-direction: column;
    min-height: 430px;
    padding: 0 0 20px;
    border: 1px solid #d8d4ce;
    border-radius: 6px;
    background: #fff !important;
    box-shadow: 0 14px 36px rgba(15, 14, 12, .07);
}
.multi-ai-page .pricing-card.popular {
    border-color: #f6b321;
    box-shadow: 0 18px 42px rgba(246, 179, 33, .18);
    transform: translateY(-6px);
}
.multi-ai-page .popular-badge {
    top: -14px;
    border: 0;
    background: #e51b0f;
}
.multi-ai-page .pricing-price,
.multi-ai-page .pricing-credits {
    color: #121212;
}
.multi-ai-page .pricing-tier {
    min-height: 86px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 18px 14px;
    border-bottom: 1px solid #d8d4ce;
    background: #eeeeee;
    color: #121212;
    font-size: 20px;
    font-weight: 900;
    text-align: center;
}
.multi-ai-page .pricing-card.popular .pricing-tier {
    background: #f6b321;
}
.multi-ai-page .pricing-credits {
    margin: 22px 0 6px;
    font-size: 34px;
    font-weight: 900;
}
.multi-ai-page .pricing-price {
    margin: 0 0 16px;
    color: #b00012;
    font-size: 36px;
    font-weight: 900;
}
.multi-ai-page .pricing-desc {
    min-height: 68px;
    padding: 0 22px;
    color: #4f4842;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.75;
}
.multi-ai-page .pricing-features {
    display: grid;
    gap: 8px;
    margin: 18px 22px 20px;
    padding: 14px;
    border-radius: 4px;
    background: #f7f5f2;
    color: #25221f;
    font-size: 12px;
    font-weight: 700;
    line-height: 1.55;
    list-style: none;
    text-align: left;
}
.multi-ai-page .pricing-features li {
    position: relative;
    padding-left: 18px;
}
.multi-ai-page .pricing-features li::before {
    content: "";
    position: absolute;
    left: 0;
    top: .62em;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #e51b0f;
}
.multi-ai-page .pricing-card.popular .pricing-features {
    background: #fff8df;
}
.multi-ai-page .btn-buy {
    position: relative;
    z-index: 20;
    width: calc(100% - 44px);
    margin: auto 22px 0;
    border: 0;
    background: #080808;
    box-shadow: none;
    pointer-events: auto !important;
}
.multi-ai-page .pricing-card.popular .btn-buy,
.multi-ai-page .btn-buy:hover {
    background: #e51b0f;
    box-shadow: 0 14px 28px rgba(229, 27, 15, .18);
}
.multi-ai-page .info-alert,
.multi-ai-page .usage-tips {
    border: 1px solid #eee5dc;
    border-left: 4px solid #e51b0f;
    background: #fffdf9;
    color: #4f4842;
}
.multi-ai-page .description-wrap {
    display: block !important;
    max-width: 1120px;
    margin: 76px auto 0 !important;
    color: #121212;
}
.multi-ai-page .description-wrap h3.description {
    margin: 60px 0 12px;
    padding: 0 0 0 16px;
    border: 0;
    border-left: 4px solid #c84b2f;
    color: #121212;
    font-size: 22px;
    font-weight: 800;
    line-height: 1.5;
    text-align: left;
}
.multi-ai-page .description-wrap h3.description:first-child {
    margin-top: 0;
}
.multi-ai-page .description-wrap h3.description span {
    color: inherit;
}
.multi-ai-page .description-wrap > p,
.multi-ai-page .description-wrap > div {
    margin: 0 0 18px;
    padding: 24px;
    border: 1px solid #eee5dc;
    border-radius: 8px;
    background: #fff;
    box-shadow: 0 12px 30px rgba(15, 14, 12, .05);
}
.multi-ai-page .description-wrap p {
    color: #4f4842;
    font-size: 14px;
    font-weight: 500;
    line-height: 1.9;
}
.multi-ai-page .description-wrap a {
    color: #c84b2f;
    font-weight: 800;
    text-decoration: underline;
    text-underline-offset: 3px;
}
.multi-ai-page .description-wrap a:hover {
    color: #0f0e0c;
}
@media (max-width: 980px) {
    .multi-ai-page .gen-hero {
        grid-template-columns: 1fr;
    }
    .gen-hero-preview {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        min-height: auto;
    }
}
@media (max-width: 760px) {
    .multi-ai-page .gen-hero,
    .multi-ai-page .gen-status-bar,
    .multi-ai-page .gen-restore-panel,
    .multi-ai-page .gen-value-grid,
    .multi-ai-page .generator-container {
        width: min(100% - 28px, 1120px);
    }
    .multi-ai-page .gen-hero {
        margin-top: 34px;
    }
    .gen-hero-copy {
        min-height: 430px;
        padding: 30px 22px;
    }
    .multi-ai-page .generator-title {
        font-size: 34px;
    }
    .gen-hero-preview,
    .gen-value-grid,
    .multi-ai-page .results-section {
        grid-template-columns: 1fr;
    }
    .gen-preview-card {
        min-height: 118px;
    }
    .multi-ai-page .form-actions {
        flex-direction: column;
    }
    .multi-ai-page .input-panel-body {
        padding: 18px;
    }
    .multi-ai-page .info-section {
        padding-inline: 14px;
    }
    .multi-ai-page .info-heading {
        margin-inline: -14px;
        padding-inline: 14px;
    }
    .multi-ai-page .pricing-grid {
        grid-template-columns: minmax(0, 1fr);
        padding: 14px !important;
        gap: 16px;
        overflow: hidden;
    }
    .multi-ai-page .pricing-card {
        width: 100%;
        max-width: 100%;
        min-width: 0;
        margin-inline: auto;
    }
    .multi-ai-page .pricing-card.popular {
        transform: none;
    }
}
@media (max-width: 420px) {
    .multi-ai-page .generator-title {
        font-size: 30px;
    }
}

.multi-ai-page .ai-image-wrap {
    aspect-ratio: 1 / 1;
}
.multi-ai-page .ai-image-wrap img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    user-select: none;
    -webkit-user-drag: none;
}

/* Account panel refinement */
.multi-ai-page .gen-status-bar,
.multi-ai-page .status-login-block,
.multi-ai-page #login-section,
.multi-ai-page #logged-in-section {
    background: #fff !important;
}
.multi-ai-page #logged-in-section {
    width: 100%;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 8px !important;
}
.multi-ai-page .account-user-row {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}
.multi-ai-page .user-name-label {
    min-width: 0;
    overflow: hidden;
    color: #121212;
    font-size: 13px;
    font-weight: 800;
    line-height: 1.35;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.multi-ai-page .btn-history,
.multi-ai-page .btn-logout {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 34px;
    padding: 8px 10px;
    border: 1px solid #eee5dc;
    border-radius: 6px;
    background: #fff;
    color: #121212;
    font-size: 12px;
    font-weight: 800;
    line-height: 1.2;
    text-align: center;
    text-decoration: none;
}
.multi-ai-page .btn-logout {
    color: #5f5a55;
}
.multi-ai-page .btn-history:hover,
.multi-ai-page .btn-logout:hover {
    border-color: #e51b0f;
    color: #e51b0f;
    transform: translateY(-1px);
}
@media (max-width: 760px) {
    .multi-ai-page .gen-status-bar,
    .multi-ai-page .status-login-block,
    .multi-ai-page .status-credit-block,
    .multi-ai-page #login-section,
    .multi-ai-page #logged-in-section {
        background: #fff !important;
    }
}

/* Account panel responsive alignment */
.multi-ai-page #logged-in-section {
    flex-direction: row !important;
    align-items: center !important;
    gap: 8px !important;
    flex-wrap: nowrap !important;
}
.multi-ai-page .status-login-block {
    margin-left: 0 !important;
}
.multi-ai-page .account-user-row {
    flex: 1 1 auto;
    gap: 8px !important;
}
.multi-ai-page .btn-history,
.multi-ai-page .btn-logout {
    width: auto;
    min-height: 30px;
    padding: 7px 9px;
    flex: 0 0 auto;
    white-space: nowrap;
}
@media (max-width: 520px) {
    .multi-ai-page #logged-in-section {
        flex-wrap: wrap !important;
        align-items: stretch !important;
    }
    .multi-ai-page .account-user-row {
        flex: 1 0 100%;
    }
    .multi-ai-page .btn-history,
    .multi-ai-page .btn-logout {
        flex: 1 1 calc(50% - 4px);
        justify-content: center;
    }
}

/* Mobile sticky account/status box */
@media (max-width: 760px) {
    .multi-ai-page .gen-status-bar {
        position: sticky !important;
        top: 70px;
        z-index: 85;
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) auto;
        align-items: center !important;
        gap: 14px;
        width: min(100% - 12px, 1120px) !important;
        margin: 0 auto 18px !important;
        padding: 14px 18px !important;
        overflow: visible;
        border: 1px solid #eee5dc;
        border-radius: 6px;
        background: #fff !important;
        box-shadow: 0 10px 26px rgba(15, 14, 12, .08);
    }
    .multi-ai-page .status-login-block {
        min-width: 0;
        margin: 0 !important;
        padding: 0 !important;
        border: 0 !important;
        background: transparent !important;
    }
    .multi-ai-page .status-credit-block {
        display: flex;
        align-items: center;
        justify-content: flex-end;
        width: auto !important;
        min-width: max-content;
        margin: 0 !important;
        padding: 0 !important;
        border: 0 !important;
        background: transparent !important;
    }
    .multi-ai-page #logged-in-section {
        display: flex;
        width: 100%;
        flex-wrap: wrap !important;
        align-items: center !important;
        gap: 8px 10px !important;
        background: transparent !important;
    }
    .multi-ai-page .account-user-row {
        flex: 1 0 100%;
        gap: 8px !important;
        min-width: 0;
        align-items: center;
    }
    .multi-ai-page .user-avatar {
        width: 28px;
        height: 28px;
        border-radius: 50%;
        object-fit: cover;
    }
    .multi-ai-page .user-name-label {
        color: #121212;
        font-size: 13px;
        font-weight: 850;
        line-height: 1.2;
    }
    .multi-ai-page .btn-history,
    .multi-ai-page .btn-logout {
        flex: 0 0 100px;
        min-height: 31px;
        padding: 7px 10px;
        border: 1px solid #eee5dc;
        border-radius: 5px;
        background: #fff;
        color: #3a332d;
        font-size: 12px;
        font-weight: 800;
        line-height: 1;
    }
    .multi-ai-page #credit-display {
        display: flex !important;
        align-items: baseline !important;
        justify-content: left !important;
        flex-wrap: wrap !important;
        gap: 13px !important;
        color: #121212 !important;
        font-size: 13px !important;
        font-weight: 900 !important;
        line-height: 1.2 !important;
        text-align: center !important;
        white-space: nowrap;
    }
    .multi-ai-page #credit-display .credit-paid-label {
        background: #222;
        padding: 5px;
        color: white;
        font-size: 11px;
        margin-bottom: -30px;
        border-radius: 3px;
    }
    .multi-ai-page #credit-display .credit-remaining-label {
        display: inline-flex;
        align-items: baseline;
        gap: 6px;
    }
    .multi-ai-page #credit-count {
        color: #e51b0f;
        font-size: 42px;
        font-weight: 900;
        line-height: .9;
    }
}

@media (max-width: 420px) {
    .multi-ai-page .gen-status-bar {
        gap: 10px;
        padding: 12px 14px !important;
    }
    .multi-ai-page .btn-history,
    .multi-ai-page .btn-logout {
        flex-basis: 92px;
        font-size: 11px;
    }
    .multi-ai-page #credit-count {
        font-size: 38px;
    }
}

.multi-ai-page #credit-display {
    display: flex !important;
    align-items: baseline !important;
    justify-content: left !important;
    flex-wrap: wrap !important;
    gap: 13px !important;
    color: #121212 !important;
    font-size: 13px !important;
    font-weight: 900 !important;
    line-height: 1.2 !important;
    text-align: center !important;
}

.multi-ai-page #credit-display .credit-paid-label {
    background: #222 !important;
    padding: 5px !important;
    color: white !important;
    font-size: 11px !important;
    margin-bottom: -30px !important;
    border-radius: 3px !important;
}

@media (max-width: 760px) {
    .multi-ai-page #credit-display {
        flex-flow: column !important;
    }
}