:root {
    color-scheme: dark;
    --ink: #f1efed;
    --muted: #9b9898;
    --canvas: #171719;
    --surface: #202022;
    --surface-raised: #262628;
    --stroke: #38383b;
    --red: #b7333e;
    --red-light: #df5961;
    --red-deep: #70252c;
    --bs-body-bg: var(--canvas);
    --bs-body-color: var(--ink);
    --bs-secondary-color: var(--muted);
    --bs-primary: var(--red);
    --bs-primary-rgb: 183, 51, 62;
    --bs-border-color: var(--stroke);
    --bs-link-color: #e4777d;
    --bs-link-hover-color: #f09298;
}

* { box-sizing: border-box; }

body {
    min-height: 100vh;
    margin: 0;
    background:
        radial-gradient(ellipse at 49% -18%, rgba(104, 44, 48, .25), transparent 54%),
        var(--canvas);
    color: var(--ink);
    font-family: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
}

a { color: var(--red-light); }
a:hover { color: #f09298; }

.app-container { max-width: 1120px; }
.topbar { border-bottom: 1px solid #2d2d30; background: rgba(22, 22, 24, .84); }
.topbar-inner { display: flex; align-items: center; justify-content: space-between; min-height: 74px; gap: 1rem; }
.brand { display: inline-flex; align-items: center; gap: .72rem; color: var(--ink); text-decoration: none; }
.brand strong { display: block; font-size: .9rem; letter-spacing: .12em; line-height: 1.1; }
.brand strong span { color: var(--red-light); }
.brand small { display: block; margin-top: .25rem; color: #929092; font-size: .58rem; letter-spacing: .16em; }
.topbar-actions { display: flex; align-items: center; gap: .55rem; }
.topbar-actions form { margin: 0; }
.user-label { color: #b9b6b5; font-size: .8rem; margin-right: .25rem; }
.btn-outline-light { --bs-btn-color: #ddd9d8; --bs-btn-border-color: #4a4849; --bs-btn-hover-bg: #302e2f; --bs-btn-hover-border-color: #777; --bs-btn-hover-color: #fff; }
.btn-quiet { color: #b8b4b3; border: 1px solid transparent; }
.btn-quiet:hover { color: #fff; border-color: var(--stroke); background: var(--surface); }

.intro { padding: .5rem 0 .55rem; }
.eyebrow, .section-index { color: #c26368; font-size: .67rem; font-weight: 700; letter-spacing: .16em; }
.eyebrow { display: flex; align-items: center; gap: .55rem; }
.eyebrow span, .private-badge span { width: 7px; height: 7px; border-radius: 50%; background: var(--red-light); box-shadow: 0 0 0 3px rgba(183, 51, 62, .14); }
.intro h1 { margin: .6rem 0 .45rem; font-size: clamp(2rem, 5vw, 3.15rem); font-weight: 650; letter-spacing: -.055em; }
.intro h1 em { color: var(--red-light); font-style: normal; }
.intro p { max-width: 640px; margin: 0; color: var(--muted); font-size: .98rem; }

.workspace-grid { display: grid; grid-template-columns: minmax(0, 1.07fr) minmax(0, .93fr); gap: 1.1rem; align-items: start; }
.compose-card, .suggestion-card, .history-section { border: 1px solid var(--stroke); border-radius: 14px; background: linear-gradient(145deg, rgba(37, 37, 40, .96), rgba(29, 29, 31, .98)); box-shadow: 0 18px 52px rgba(0, 0, 0, .18); }
.compose-card { padding: clamp(1rem, 3vw, 1.55rem); }
.card-heading, .results-heading, .history-heading { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; }
.card-heading { margin-bottom: 1.3rem; }
.card-heading h2, .results-heading h2, .history-heading h2 { margin: .36rem 0 0; font-size: 1.12rem; font-weight: 620; letter-spacing: -.02em; }
.private-badge { display: inline-flex; align-items: center; gap: .43rem; margin-top: .15rem; color: #a5a1a1; font-size: .61rem; letter-spacing: .13em; white-space: nowrap; }
.private-badge span { width: 6px; height: 6px; background: #a0a477; box-shadow: none; }

.form-label { margin-bottom: .5rem; color: #d2cecd; font-size: .82rem; font-weight: 560; }
.form-control, .form-select {
    min-height: 44px;
    border-color: #424144;
    border-radius: 8px;
    background-color: #19191b;
    color: var(--ink);
    font-size: .86rem;
}
.form-control:focus, .form-select:focus { border-color: #a8464d; background-color: #1b1a1c; color: var(--ink); box-shadow: 0 0 0 .2rem rgba(183, 51, 62, .17); }
.form-control::placeholder { color: #757174; }
.form-select option { background-color: #222224; color: var(--ink); }
.idea-input { min-height: 174px; padding: .85rem .95rem; line-height: 1.6; resize: vertical; }
.input-meta { display: flex; justify-content: space-between; gap: .75rem; margin-top: .5rem; color: #858183; font-size: .7rem; }
.selectors-row { margin-top: 1.1rem; }
.submit-row { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-top: 1.35rem; padding-top: 1.1rem; border-top: 1px solid #38373a; }
.privacy-note { color: #8f8c8d; font-size: .69rem; line-height: 1.4; }
.generate-button { display: inline-flex; align-items: center; justify-content: center; gap: .85rem; min-height: 44px; padding: .65rem 1rem; border: 1px solid #c6464e; border-radius: 8px; background: linear-gradient(135deg, #b7333e, #8f2932); color: #fff; font-size: .83rem; font-weight: 650; box-shadow: 0 7px 18px rgba(137, 35, 43, .2); }
.generate-button:hover, .generate-button:focus { border-color: #e15b63; background: linear-gradient(135deg, #ca3f49, #a12e38); color: #fff; }
.generate-button:disabled { border-color: #5a3739; background: #60383a; color: #d0bfc0; }
.button-arrow { font-size: 1.15rem; line-height: .8; }

.results-column { min-width: 0; }
.results-heading { align-items: center; padding: .55rem .2rem 1rem; }
.result-count, .history-count { display: inline-grid; min-width: 30px; min-height: 30px; place-items: center; border: 1px solid #484548; border-radius: 50%; color: #c7c2c1; font-size: .75rem; }
.suggestions { display: grid; gap: .8rem; }
.empty-state { display: flex; min-height: 268px; flex-direction: column; align-items: center; justify-content: center; padding: 2rem; border: 1px dashed #484548; border-radius: 14px; background: rgba(31, 31, 33, .6); text-align: center; }
.empty-mark { display: grid; width: 46px; height: 46px; place-items: center; margin-bottom: 1rem; border: 1px solid #5b3538; border-radius: 13px; background: rgba(135, 42, 49, .16); color: #dc646b; font-size: 1.75rem; }
.empty-state strong { font-size: .9rem; font-weight: 600; }
.empty-state > span { max-width: 290px; margin-top: .45rem; color: #928e8f; font-size: .78rem; line-height: 1.55; }
.suggestion-card { padding: 1.1rem 1.15rem; }
.suggestion-top { display: flex; align-items: center; justify-content: space-between; gap: .7rem; margin-bottom: .85rem; }
.suggestion-label { color: #d76b71; font-size: .67rem; font-weight: 700; letter-spacing: .13em; }
.copy-button { padding: .32rem .55rem; border: 1px solid #484548; border-radius: 6px; background: #252426; color: #ccc7c6; font-size: .7rem; }
.copy-button:hover { border-color: #a8464d; color: #fff; }
.suggestion-text { margin: 0; color: #e0dcda; font-size: .86rem; line-height: 1.72; white-space: pre-wrap; overflow-wrap: anywhere; }
.results-footnote { margin: .75rem .2rem 0; color: #858183; font-size: .7rem; }
.alert-danger { border-color: #713a3e; background: #382326; color: #f0c6c8; font-size: .83rem; }
.config-alert { margin-bottom: 1.1rem; border-color: #5b4b34; background: #302a21; color: #e5d2ad; font-size: .84rem; }
.config-alert a { color: #f0b16c; }
.config-alert code { color: #f2c47d; }
.config-message { border-color: #3f654d; background: #202e26; color: #c4e0cc; }

.config-notice { display: flex; align-items: flex-start; gap: .8rem; padding: 1rem 1.1rem; border: 1px solid #5b4b34; border-radius: 10px; background: #302a21; color: #e5d2ad; }
.notice-mark { display: grid; flex: 0 0 24px; width: 24px; height: 24px; place-items: center; border: 1px solid #886e46; border-radius: 50%; color: #f2c47d; font-size: .8rem; font-weight: 700; }
.config-notice strong, .config-notice span { display: block; }
.config-notice strong { margin-bottom: .2rem; font-size: .82rem; }
.config-notice span { color: #c6b99f; font-size: .75rem; line-height: 1.5; }
.settings-section { margin-top: 1.8rem; }
.settings-heading { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: .8rem; }
.settings-heading h2 { margin: .35rem 0 0; font-size: 1.12rem; font-weight: 620; }
.settings-add { white-space: nowrap; }
.settings-list { overflow: hidden; border: 1px solid var(--stroke); border-radius: 12px; background: rgba(32, 32, 34, .88); }
.settings-item { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1rem 1.1rem; border-bottom: 1px solid #38373a; }
.settings-item:last-child { border-bottom: 0; }
.settings-item-main { min-width: 0; }
.settings-item-title { display: flex; flex-wrap: wrap; align-items: center; gap: .55rem; color: #e7e3e1; font-size: .86rem; }
.settings-item-detail { display: block; margin-top: .3rem; color: #969293; font-size: .72rem; overflow-wrap: anywhere; }
.status-pill { display: inline-flex; align-items: center; padding: .19rem .48rem; border: 1px solid #4b484a; border-radius: 999px; color: #aaa5a5; font-size: .62rem; font-weight: 550; }
.status-on { border-color: #45624d; background: #253329; color: #b7d1bd; }
.status-default { border-color: #704148; background: #382528; color: #e4a6aa; }
.settings-item-actions { display: flex; flex: 0 0 auto; align-items: center; gap: .45rem; }
.settings-item-actions form { margin: 0; }
.btn-danger-outline { border: 1px solid #684045; color: #df969b; }
.btn-danger-outline:hover { border-color: #a64a53; background: #382326; color: #f2c6c8; }
.settings-empty { margin: 0; padding: 1.2rem; color: var(--muted); font-size: .8rem; }
.tone-description { margin: .5rem 0 0; color: #b3aeae; font-size: .76rem; line-height: 1.5; }
.config-form-card { max-width: 760px; }
.config-form-card .form-check-input { background-color: #19191b; border-color: #555155; }
.config-form-card .form-check-input:checked { background-color: var(--red); border-color: var(--red); }
.config-checkbox { margin: .8rem 0 1.1rem; }
.config-checkbox .form-check-label { color: #d2cecd; font-size: .82rem; }
.field-help { margin-top: .35rem; color: #918c8d; font-size: .72rem; }
.field-error { margin-top: .35rem; color: #f09a9f; font-size: .75rem; }
.key-state { display: flex; align-items: center; gap: .5rem; margin: .6rem 0 1rem; color: #b7d1bd; font-size: .75rem; }
.key-state span { width: 7px; height: 7px; border-radius: 50%; background: #91b99c; }
.config-form-actions { display: flex; justify-content: flex-end; gap: .6rem; margin-top: 1.4rem; padding-top: 1rem; border-top: 1px solid #38373a; }

.history-section { padding: 1.2rem 1.35rem; }
.history-heading { align-items: center; margin-bottom: .9rem; }
.history-heading h2 { font-size: 1rem; }
.history-actions { display: flex; align-items: center; gap: .55rem; }
.history-count { display: inline-flex; min-width: auto; min-height: auto; padding: .35rem .6rem; border-radius: 999px; font-size: .68rem; }
.history-list { border-top: 1px solid #3a393c; }
.history-item { border-bottom: 1px solid #3a393c; }
.history-item:last-child { border-bottom: 0; }
.history-item summary { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .85rem .15rem; cursor: pointer; list-style: none; }
.history-item summary::-webkit-details-marker { display: none; }
.history-summary-text { overflow: hidden; color: #d2cecd; font-size: .78rem; text-overflow: ellipsis; white-space: nowrap; }
.history-meta { flex: 0 0 auto; color: #858183; font-size: .68rem; }
.history-content { display: grid; gap: .6rem; padding: 0 .2rem .9rem; }
.history-suggestion { padding: .75rem; border-left: 2px solid #8f343a; border-radius: 0 6px 6px 0; background: #1b1b1d; color: #c7c2c1; font-size: .76rem; line-height: 1.6; white-space: pre-wrap; }
.app-footer { padding: 1.2rem 1rem; border-top: 1px solid #2d2d30; color: #7f7c7d; font-size: .68rem; text-align: center; }
.app-footer span { padding: 0 .25rem; color: #bd565d; }

.login-page { display: grid; min-height: 100vh; place-items: center; padding: 1.2rem; }
.login-card { width: min(100%, 430px); padding: clamp(1.4rem, 6vw, 2.2rem); border: 1px solid var(--stroke); border-radius: 14px; background: linear-gradient(145deg, #252527, #1d1d1f); box-shadow: 0 24px 80px rgba(0, 0, 0, .32); }
.login-brand { margin-bottom: 2rem; }
.login-copy { margin-bottom: 1.4rem; }
.login-copy h1 { margin: .55rem 0 .3rem; font-size: 1.75rem; font-weight: 650; letter-spacing: -.04em; }
.login-copy p { margin: 0; color: var(--muted); font-size: .85rem; }

@media (max-width: 767.98px) {
    .topbar-inner { min-height: 66px; }
    .topbar-actions { gap: .35rem; }
    .topbar-actions .btn { padding: .33rem .45rem; font-size: .68rem; }
    .user-label { display: none; }
    .brand img { width: 36px; height: 36px; }
    .workspace-grid { grid-template-columns: 1fr; }
    .results-heading { padding-top: .4rem; }
}

@media (max-width: 440px) {
    .topbar-actions .btn-outline-light:first-of-type { display: none !important; }
    .submit-row { align-items: stretch; flex-direction: column; }
    .generate-button { width: 100%; }
    .history-item summary { align-items: flex-start; flex-direction: column; gap: .35rem; }
    .settings-item { align-items: flex-start; flex-direction: column; }
    .settings-item-actions { width: 100%; }
    .settings-item-actions .btn { flex: 1; }
    .settings-heading { align-items: flex-start; }
    .settings-add { max-width: 48%; white-space: normal; }
    .history-actions { align-items: flex-end; flex-direction: column; }
}