:root {
    color-scheme: dark;
    --bg: #0b111a;
    --surface: #151e2b;
    --surface-2: #1a2635;
    --border: #2c3b4f;
    --text: #f4f7fb;
    --muted: #aab6c7;
    --accent: #e02d3c;
    --accent-hover: #f04452;
    --blue: #4385ff;
    --green: #2fb86e;
    --yellow: #e0a82d;
    --radius: 14px;
}

* { box-sizing: border-box; }
html { font-size: 16px; }
body {
    margin: 0;
    min-height: 100vh;
    font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    background: radial-gradient(circle at 20% 0%, #172236 0, var(--bg) 36rem);
    color: var(--text);
}
button, input, select, textarea { font: inherit; }
button { cursor: pointer; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; }
.muted { color: var(--muted); }
.brand { display: flex; align-items: center; gap: .6rem; font-weight: 800; letter-spacing: .01em; }
.brand span { background: var(--accent); color: #fff; border-radius: .45rem; padding: .22rem .42rem; font-size: 1.15rem; }

.auth-page { display: grid; place-items: center; padding: 1rem; }
.auth-card {
    width: min(440px, 100%);
    padding: 2rem;
    background: rgba(21, 30, 43, .96);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: 0 24px 70px rgba(0, 0, 0, .36);
}
.setup-card { width: min(680px, 100%); }
.auth-card h1 { margin: 1.6rem 0 .35rem; font-size: 2rem; }
label { display: block; margin: 1rem 0 .45rem; color: #dbe3ee; font-weight: 700; }
input, select, textarea {
    width: 100%;
    border: 1px solid var(--border);
    border-radius: .65rem;
    background: #0d1520;
    color: var(--text);
    outline: none;
}
input, select { min-height: 48px; padding: .75rem .85rem; }
input:focus, select:focus, textarea:focus { border-color: var(--blue); box-shadow: 0 0 0 3px rgba(67, 133, 255, .18); }
.field-help { color: var(--muted); font-size: .875rem; line-height: 1.45; margin: .45rem 0 0; }
.two-columns { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }

.primary {
    border: 0;
    border-radius: .65rem;
    background: var(--accent);
    color: #fff;
    font-weight: 800;
    min-height: 46px;
    padding: .72rem 1.15rem;
}
.primary:hover { background: var(--accent-hover); }
.primary:disabled { opacity: .65; cursor: wait; }
.full { width: 100%; margin-top: 1.4rem; }
.alert { border-radius: .65rem; padding: .85rem 1rem; margin: 1rem 0; line-height: 1.45; }
.alert.error { background: rgba(224, 45, 60, .12); border: 1px solid rgba(224, 45, 60, .5); }
.alert.success { background: rgba(47, 184, 110, .12); border: 1px solid rgba(47, 184, 110, .45); }

.topbar {
    position: sticky;
    top: 0;
    z-index: 10;
    min-height: 66px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: .75rem max(1rem, calc((100vw - 1180px) / 2));
    background: rgba(11, 17, 26, .92);
    border-bottom: 1px solid var(--border);
    backdrop-filter: blur(12px);
}
.user-area { display: flex; align-items: center; gap: .9rem; color: var(--muted); }
.user-area form { margin: 0; }
.text-button, .copy-button {
    border: 1px solid var(--border);
    color: #dce5f0;
    background: var(--surface-2);
    border-radius: .5rem;
    padding: .45rem .7rem;
}
.text-button:hover, .copy-button:hover { border-color: var(--blue); }

.workspace { width: min(1180px, calc(100% - 2rem)); margin: 2rem auto 4rem; }
.panel { background: rgba(21, 30, 43, .96); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: 0 14px 34px rgba(0, 0, 0, .18); }
.input-panel, .output-panel, .check-panel { padding: 1.35rem; }
.panel-heading, .section-title, .form-footer { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.eyebrow { margin: 0 0 .25rem; color: var(--accent-hover); text-transform: uppercase; font-size: .78rem; font-weight: 900; letter-spacing: .13em; }
.panel h1, .panel h2, .panel h3 { margin-top: 0; }
.panel h1 { margin-bottom: .95rem; font-size: clamp(1.45rem, 3vw, 2rem); }
.panel h2 { margin-bottom: 0; font-size: 1.25rem; }
.privacy-note { color: var(--muted); font-size: .875rem; }
textarea { min-height: 360px; resize: vertical; padding: 1rem; line-height: 1.6; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: .95rem; }
.form-footer { margin-top: .85rem; }
.counter { color: var(--muted); font-size: .875rem; }
.result-stack { display: grid; gap: 1rem; margin-top: 1rem; }
.result-grid { display: grid; grid-template-columns: 1.35fr .65fr; gap: 1rem; }
.section-title { padding-bottom: 1rem; border-bottom: 1px solid var(--border); }
.prose-output { padding-top: 1.15rem; line-height: 1.72; white-space: normal; }
.output-list { margin: 1rem 0 0; padding-left: 1.5rem; }
.output-list li { padding: .42rem 0 .42rem .25rem; line-height: 1.5; }
.output-list.roomy li { padding-block: .65rem; }
.length { display: inline-block; color: var(--muted); font-size: .8rem; margin-left: .4rem; }
.standout-output { font-size: 1.15rem; line-height: 1.55; margin: 1rem 0 0; font-weight: 700; }
.check-panel { border-left: 5px solid var(--green); }
.check-panel.check-warning { border-left-color: var(--yellow); }
.status-badge { padding: .3rem .6rem; border-radius: 99px; background: rgba(47, 184, 110, .14); color: #6ee7a3; font-weight: 800; font-size: .85rem; }
.check-warning .status-badge { background: rgba(224, 168, 45, .14); color: #ffd474; }
.check-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem 1.4rem; padding-top: 1rem; }
.check-group h3 { margin-bottom: .5rem; font-size: 1rem; }
.check-group p, .check-group ul { margin: 0; line-height: 1.5; }

.loading-overlay { position: fixed; inset: 0; z-index: 50; place-items: center; background: rgba(5, 9, 14, .8); backdrop-filter: blur(4px); }
.loading-overlay:not([hidden]) { display: grid; }
.loading-card { width: min(360px, calc(100% - 2rem)); display: grid; justify-items: center; gap: .75rem; padding: 2rem; text-align: center; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); }
.loading-card span { color: var(--muted); }
.spinner { width: 42px; height: 42px; border: 4px solid var(--border); border-top-color: var(--accent); border-radius: 50%; animation: spin .8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

@media (max-width: 760px) {
    .two-columns, .result-grid, .check-grid { grid-template-columns: 1fr; }
    .workspace { width: min(100% - 1rem, 1180px); margin-top: .75rem; }
    .input-panel, .output-panel, .check-panel { padding: 1rem; }
    .panel-heading { align-items: flex-start; }
    textarea { min-height: 300px; }
    .topbar { padding-inline: .75rem; }
    .user-area > span { display: none; }
}