/* ============================================================
   schreiben.css — Student Schreiben listing (page-scoped)
   Loaded globally via header.php (matches hoeren.css pattern),
   but every selector is scoped to .schreiben-* to avoid bleed.
   ============================================================ */

.schreiben-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 1.25rem;
}

.schreiben-card {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    padding: 1.25rem 1.25rem 1rem;
    background: #fff;
    border: 1px solid rgba(15, 23, 42, 0.08);
    border-radius: 16px;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04),
                0 8px 24px -16px rgba(15, 23, 42, 0.12);
    transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.schreiben-card:hover {
    transform: translateY(-2px);
    border-color: rgba(15, 23, 42, 0.14);
    box-shadow: 0 2px 4px rgba(15, 23, 42, 0.05),
                0 14px 32px -16px rgba(15, 23, 42, 0.20);
}
.schreiben-card.is-locked-card {
    background: linear-gradient(180deg, #fdfdfd 0%, #f7f7fa 100%);
}

.schreiben-card__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    margin-bottom: 0.25rem;
}

.schreiben-level {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2.25rem;
    padding: 0.2rem 0.55rem;
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    background: rgba(59, 130, 246, 0.12);
    color: #1d4ed8;
}

.schreiben-status {
    display: inline-flex;
    align-items: center;
    padding: 0.25rem 0.65rem;
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    line-height: 1;
}
.schreiben-status.is-free {
    background: rgba(16, 185, 129, 0.12);
    color: #047857;
}
.schreiben-status.is-premium {
    background: rgba(245, 158, 11, 0.14);
    color: #b45309;
}
.schreiben-status.is-locked {
    background: rgba(100, 116, 139, 0.14);
    color: #475569;
}

.schreiben-card__title {
    margin: 0;
    font-size: 1.05rem;
    font-weight: 700;
    line-height: 1.35;
    color: #0f172a;
    /* Keep German titles LTR-readable inside RTL layouts */
    unicode-bidi: plaintext;
}

.schreiben-card__desc {
    margin: 0;
    color: #475569;
    font-size: 0.92rem;
    line-height: 1.5;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    unicode-bidi: plaintext;
}

.schreiben-card__meta {
    margin: 0;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    color: #64748b;
    font-size: 0.82rem;
}
.schreiben-card__meta i { color: #94a3b8; }

.schreiben-card__foot {
    margin-top: auto;
    padding-top: 0.5rem;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0.4rem;
}

.schreiben-start-btn,
.schreiben-unlock-btn {
    font-weight: 600;
    border-radius: 10px;
    padding: 0.55rem 0.9rem;
}
.schreiben-start-btn[disabled] {
    opacity: 0.65;
    cursor: not-allowed;
}

.schreiben-card__hint {
    font-size: 0.74rem;
    color: #94a3b8;
    text-align: center;
    font-style: italic;
}

/* ── Responsive ─────────────────────────────────────────────── */
@media (max-width: 768px) {
    .schreiben-grid {
        grid-template-columns: 1fr;
        gap: 1rem;
    }
}
@media (max-width: 360px) {
    .schreiben-card {
        padding: 1rem 1rem 0.9rem;
        border-radius: 14px;
    }
    .schreiben-card__title { font-size: 1rem; }
}

/* ── RTL adjustments ───────────────────────────────────────── */
[dir="rtl"] .schreiben-card__meta { direction: rtl; }
[dir="rtl"] .schreiben-card__hint { text-align: center; }

/* ============================================================
   Schreiben workspace (/schreiben/theme/{id})
   ============================================================ */

/* ── Header ─────────────────────────────────────────────── */
.sw-header {
    margin-bottom: 1.5rem;
}
.sw-back {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.9rem;
    color: #475569;
    text-decoration: none;
    margin-bottom: 0.75rem;
    transition: color .15s ease;
}
.sw-back:hover { color: #0f172a; }

.sw-header__row {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
}
.sw-header__title {
    margin: 0;
    font-size: 1.6rem;
    font-weight: 700;
    color: #0f172a;
    unicode-bidi: plaintext;
}
.sw-header__desc {
    margin: 0.5rem 0 0;
    color: #475569;
    font-size: 0.95rem;
    line-height: 1.55;
    unicode-bidi: plaintext;
}
.sw-header__meta {
    margin: 0.6rem 0 0;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    color: #64748b;
    font-size: 0.88rem;
}
.sw-header__meta i { color: #94a3b8; }
.sw-header__hint { color: #94a3b8; font-style: italic; }

/* ── Grid ───────────────────────────────────────────────── */
.sw-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 1.5rem;
    align-items: start;
}
.sw-col { min-width: 0; display: flex; flex-direction: column; gap: 1.25rem; }

/* ── Info blocks (Situation / Aufgabe) ──────────────────── */
.sw-block {
    background: #fff;
    border: 1px solid rgba(15, 23, 42, 0.08);
    border-radius: 16px;
    padding: 1.25rem 1.35rem;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04),
                0 8px 24px -18px rgba(15, 23, 42, 0.12);
}
.sw-block__title {
    margin: 0 0 0.75rem;
    font-size: 1.05rem;
    font-weight: 700;
    color: #0f172a;
    letter-spacing: 0.01em;
}
.sw-block__de {
    color: #1e293b;
    line-height: 1.65;
    font-size: 0.98rem;
    white-space: normal;
    unicode-bidi: plaintext;
}
.sw-block__de--list { white-space: normal; }

.sw-block__toggle {
    margin-top: 0.85rem;
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}
.sw-tr-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.4rem 0.85rem;
    border: 1px solid rgba(59, 130, 246, 0.25);
    background: rgba(59, 130, 246, 0.06);
    color: #1d4ed8;
    border-radius: 999px;
    font-size: 0.82rem;
    font-weight: 600;
    cursor: pointer;
    transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.sw-tr-btn:hover { background: rgba(59, 130, 246, 0.12); }
.sw-tr-btn.is-active {
    background: #1d4ed8;
    color: #fff;
    border-color: #1d4ed8;
}

.sw-block__tr {
    margin-top: 0.9rem;
    padding: 0.85rem 1rem;
    background: #f8fafc;
    border: 1px solid rgba(15, 23, 42, 0.06);
    border-radius: 12px;
    color: #334155;
    line-height: 1.7;
    font-size: 0.95rem;
    opacity: 0;
    max-height: 0;
    overflow: hidden;
    transition: opacity .25s ease, max-height .35s ease, margin-top .25s ease, padding .25s ease;
    unicode-bidi: plaintext;
}
.sw-block__tr.is-open {
    opacity: 1;
    max-height: 2000px;
}
.sw-block__tr[hidden] { display: none; }

/* ── Editor ─────────────────────────────────────────────── */
.sw-editor {
    position: sticky;
    top: 1rem;
    background: #fff;
    border: 1px solid rgba(15, 23, 42, 0.08);
    border-radius: 16px;
    padding: 1.25rem 1.35rem;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04),
                0 8px 24px -18px rgba(15, 23, 42, 0.12);
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
}
.sw-editor__title {
    margin: 0;
    font-size: 1.05rem;
    font-weight: 700;
    color: #0f172a;
}
.sw-chars {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
}
.sw-char-btn {
    min-width: 2.25rem;
    padding: 0.35rem 0.6rem;
    border: 1px solid rgba(15, 23, 42, 0.12);
    background: #f8fafc;
    color: #0f172a;
    border-radius: 8px;
    font-weight: 600;
    font-size: 1rem;
    cursor: pointer;
    transition: background .12s ease, transform .12s ease, border-color .12s ease;
}
.sw-char-btn:hover {
    background: #eef2f7;
    border-color: rgba(15, 23, 42, 0.2);
}
.sw-char-btn:active { transform: translateY(1px); }

.sw-textarea {
    width: 100%;
    min-height: 360px;
    padding: 1rem 1.1rem;
    border: 1px solid rgba(15, 23, 42, 0.14);
    border-radius: 12px;
    font-family: 'Inter', system-ui, -apple-system, Segoe UI, sans-serif;
    font-size: 1rem;
    line-height: 1.7;
    color: #0f172a;
    background: #fcfcfd;
    resize: vertical;
    transition: border-color .15s ease, box-shadow .15s ease, background .15s ease;
    unicode-bidi: plaintext;
}
.sw-textarea:focus {
    outline: none;
    border-color: #3b82f6;
    background: #fff;
    box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.12);
}

.sw-meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5rem;
    font-size: 0.85rem;
}
.sw-counter {
    color: #0f172a;
    font-weight: 600;
}
.sw-counter__rec {
    color: #64748b;
    font-weight: 400;
    margin-left: 0.25rem;
}
.sw-counter__hint {
    color: #94a3b8;
    font-style: italic;
}

/* ── Bottom actions ────────────────────────────────────── */
.sw-actions {
    margin-top: 1.5rem;
    padding: 1rem 1.1rem;
    background: #fff;
    border: 1px solid rgba(15, 23, 42, 0.08);
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    flex-wrap: wrap;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}
.sw-actions__center {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.25rem;
    flex: 1 1 auto;
}
.sw-ai-btn { font-weight: 600; border-radius: 10px; padding: 0.55rem 1.1rem; }
.sw-ai-hint { font-size: 0.75rem; color: #94a3b8; font-style: italic; }
.sw-nav-btn { font-weight: 600; border-radius: 10px; }

/* ── Locked card ───────────────────────────────────────── */
.sw-locked-card {
    max-width: 540px;
    margin: 3rem auto;
    padding: 2.25rem 1.75rem;
    text-align: center;
    background: #fff;
    border: 1px solid rgba(15, 23, 42, 0.08);
    border-radius: 18px;
    box-shadow: 0 14px 40px -22px rgba(15, 23, 42, 0.2);
}
.sw-locked-card__icon {
    font-size: 2.25rem;
    color: #f59e0b;
    display: inline-block;
    margin-bottom: 0.75rem;
}
.sw-locked-card__title { margin: 0 0 0.4rem; font-size: 1.4rem; font-weight: 700; color: #0f172a; }
.sw-locked-card__body  { margin: 0 0 1.25rem; color: #64748b; line-height: 1.55; }
.sw-locked-card__actions { display: inline-flex; gap: 0.6rem; flex-wrap: wrap; justify-content: center; }

/* ── Responsive ────────────────────────────────────────── */
@media (max-width: 1024px) {
    .sw-grid { grid-template-columns: 1fr; }
    .sw-editor { position: static; }
}
@media (max-width: 768px) {
    .sw-header__title { font-size: 1.35rem; }
    .sw-actions { flex-direction: column; align-items: stretch; }
    .sw-actions__center { order: -1; }
    .sw-nav-btn { width: 100%; justify-content: center; display: inline-flex; }
}
@media (max-width: 360px) {
    .sw-block, .sw-editor { padding: 1rem; border-radius: 14px; }
    .sw-textarea { min-height: 280px; padding: 0.85rem; }
}

/* ── RTL ───────────────────────────────────────────────── */
[dir="rtl"] .sw-header__row { flex-direction: row-reverse; justify-content: flex-end; }
[dir="rtl"] .sw-back i { transform: scaleX(-1); }

/* ============================================================
   Autosave status (Task 5)
   ============================================================ */
.sw-status {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.82rem;
    color: #64748b;
    font-weight: 500;
    line-height: 1.2;
    transition: color .15s ease;
}
.sw-status__icon { font-size: 0.95rem; }
.sw-status__time {
    color: #94a3b8;
    font-style: italic;
    font-weight: 400;
}
.sw-status[data-state="idle"]            { color: #94a3b8; }
.sw-status[data-state="unsaved"]         { color: #b45309; }
.sw-status[data-state="unsaved"] .sw-status__icon::before { content: "\F2EA"; } /* bi-pencil-square fallback */
.sw-status[data-state="saving"]          { color: #1d4ed8; }
.sw-status[data-state="saving"] .sw-status__icon {
    animation: sw-spin 0.9s linear infinite;
    display: inline-block;
}
.sw-status[data-state="saved"]           { color: #047857; }
.sw-status[data-state="restored"]        { color: #047857; }
.sw-status[data-state="save_failed"]     { color: #b91c1c; }
.sw-status[data-state="offline"]         { color: #b91c1c; }
.sw-status[data-state="session_expired"] { color: #b91c1c; font-weight: 700; }

@keyframes sw-spin {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}

/* Slightly tighten meta row when status is present */
.sw-meta { row-gap: 0.4rem; }

/* ============================================================
   Task 6 — Feedback language selector, AI loading, Result page
   ============================================================ */

/* ── Feedback language selector ── */
.sw-feedback-lang {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    flex-wrap: wrap;
    padding: 0.25rem 0.5rem;
    background: #f8fafc;
    border: 1px solid rgba(15, 23, 42, 0.08);
    border-radius: 999px;
}
.sw-feedback-lang__label {
    font-size: 0.78rem;
    color: #475569;
    margin-right: 0.25rem;
}
.sw-feedback-lang__btn {
    appearance: none;
    border: 1px solid transparent;
    background: transparent;
    color: #334155;
    font-size: 0.85rem;
    font-weight: 500;
    padding: 0.25rem 0.7rem;
    border-radius: 999px;
    cursor: pointer;
    transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.sw-feedback-lang__btn:hover {
    background: #eef2f7;
}
.sw-feedback-lang__btn.is-active {
    background: #1d4ed8;
    color: #fff;
    border-color: #1d4ed8;
}
[dir="rtl"] .sw-feedback-lang__label { margin-right: 0; margin-left: 0.25rem; }

.sw-last-corr {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    margin-inline-start: 0.5rem;
    font-size: 0.85rem;
    color: #1d4ed8;
    text-decoration: none;
}
.sw-last-corr:hover { text-decoration: underline; }

.sw-actions__center {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.6rem;
    justify-content: center;
}

/* ── AI correction premium analysis overlay ── */
.sw-ai-overlay {
    position: fixed;
    inset: 0;
    background: radial-gradient(ellipse at center, rgba(15,23,42,0.55), rgba(15,23,42,0.72));
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    padding: 16px;
    animation: sw-ai-fade-in 220ms ease-out both;
}
.sw-ai-overlay[hidden] { display: none; }

.sw-ai-panel {
    position: relative;
    background: #ffffff;
    color: #0f172a;
    width: 100%;
    max-width: 520px;
    border-radius: 20px;
    padding: 28px 28px 24px;
    box-shadow: 0 30px 80px -20px rgba(2, 6, 23, 0.55), 0 0 0 1px rgba(148,163,184,0.15);
    display: flex;
    flex-direction: column;
    align-items: stretch;
    text-align: center;
    animation: sw-ai-panel-in 320ms cubic-bezier(.2,.7,.2,1) both;
    overflow: hidden;
}
.sw-ai-panel::before {
    content: "";
    position: absolute;
    inset: -1px -1px auto -1px;
    height: 3px;
    background: linear-gradient(90deg, #6366f1, #3b82f6, #06b6d4, #6366f1);
    background-size: 200% 100%;
    animation: sw-ai-bar 3.2s linear infinite;
    border-radius: 20px 20px 0 0;
}

/* Orb */
.sw-ai-orb {
    position: relative;
    width: 78px;
    height: 78px;
    margin: 4px auto 14px;
    display: grid;
    place-items: center;
}
.sw-ai-orb__glow {
    position: absolute; inset: -10px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(99,102,241,0.35), rgba(99,102,241,0) 65%);
    filter: blur(6px);
    animation: sw-ai-pulse 3.4s ease-in-out infinite;
}
.sw-ai-orb__ring {
    position: absolute; inset: 0;
    border-radius: 50%;
    border: 1.5px dashed rgba(99,102,241,0.45);
    animation: sw-ai-spin 12s linear infinite;
}
.sw-ai-orb__dot {
    position: absolute;
    width: 10px; height: 10px;
    top: -2px; left: 50%;
    margin-left: -5px;
    background: #6366f1;
    border-radius: 50%;
    box-shadow: 0 0 12px rgba(99,102,241,0.7);
    transform-origin: 5px 41px;
    animation: sw-ai-orbit 5.5s linear infinite;
}
.sw-ai-orb__icon {
    position: relative;
    font-size: 30px;
    color: #4338ca;
    background: linear-gradient(135deg, #eef2ff, #e0e7ff);
    width: 56px; height: 56px;
    border-radius: 50%;
    display: grid; place-items: center;
    box-shadow: inset 0 0 0 1px rgba(99,102,241,0.25);
}

.sw-ai-panel__title {
    font-size: 1.2rem;
    font-weight: 700;
    margin: 0 0 6px;
    color: #0f172a;
    letter-spacing: -0.01em;
}
.sw-ai-panel__sub {
    font-size: 0.9rem;
    color: #64748b;
    margin: 0 0 18px;
}

/* Steps */
.sw-ai-steps {
    list-style: none;
    padding: 0;
    margin: 0 0 18px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    text-align: start;
}
.sw-ai-step {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    border-radius: 10px;
    background: #f8fafc;
    border: 1px solid #eef2f7;
    color: #94a3b8;
    font-size: 0.92rem;
    transition: background .25s ease, color .25s ease, border-color .25s ease;
}
.sw-ai-step__mark {
    width: 18px; height: 18px;
    border-radius: 50%;
    background: #e2e8f0;
    position: relative;
    flex: 0 0 18px;
    transition: background .25s ease, box-shadow .25s ease;
}
.sw-ai-step.is-active {
    background: #eef2ff;
    border-color: #c7d2fe;
    color: #1e293b;
    font-weight: 600;
}
.sw-ai-step.is-active .sw-ai-step__mark {
    background: #6366f1;
    box-shadow: 0 0 0 4px rgba(99,102,241,0.18);
    animation: sw-ai-pulse-dot 1.6s ease-in-out infinite;
}
.sw-ai-step.is-done {
    color: #475569;
}
.sw-ai-step.is-done .sw-ai-step__mark {
    background: #10b981;
}
.sw-ai-step.is-done .sw-ai-step__mark::after {
    content: "";
    position: absolute;
    left: 5px; top: 2px;
    width: 5px; height: 9px;
    border: solid #fff;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

/* Skeleton */
.sw-ai-skeleton {
    border-top: 1px dashed #e2e8f0;
    padding-top: 16px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.sw-ai-skel-head {
    display: flex;
    align-items: center;
    gap: 14px;
}
.sw-ai-skel-circle {
    width: 54px; height: 54px;
    border-radius: 50%;
    flex: 0 0 54px;
}
.sw-ai-skel-bars {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.sw-ai-skel-bar {
    height: 8px;
    border-radius: 4px;
}
.sw-ai-skel-lines {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.sw-ai-skel-line {
    height: 10px;
    border-radius: 5px;
}
.sw-shimmer {
    background: linear-gradient(90deg, #eef2f7 0%, #f8fafc 50%, #eef2f7 100%);
    background-size: 200% 100%;
    animation: sw-ai-shimmer 1.6s linear infinite;
}

/* Animations */
@keyframes sw-ai-fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes sw-ai-panel-in {
    from { opacity: 0; transform: translateY(8px) scale(.96); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes sw-ai-pulse {
    0%,100% { opacity: .55; transform: scale(1); }
    50%     { opacity: .9;  transform: scale(1.08); }
}
@keyframes sw-ai-pulse-dot {
    0%,100% { box-shadow: 0 0 0 4px rgba(99,102,241,0.18); }
    50%     { box-shadow: 0 0 0 7px rgba(99,102,241,0.05); }
}
@keyframes sw-ai-spin { to { transform: rotate(360deg); } }
@keyframes sw-ai-orbit {
    from { transform: rotate(0deg) translateY(0); }
    to   { transform: rotate(360deg) translateY(0); }
}
@keyframes sw-ai-bar {
    from { background-position: 0% 0; }
    to   { background-position: 200% 0; }
}
@keyframes sw-ai-shimmer {
    from { background-position: 200% 0; }
    to   { background-position: -200% 0; }
}

@media (max-width: 480px) {
    .sw-ai-panel { padding: 22px 18px 18px; border-radius: 16px; }
    .sw-ai-panel__title { font-size: 1.05rem; }
    .sw-ai-panel__sub { font-size: 0.82rem; margin-bottom: 14px; }
    .sw-ai-step { font-size: 0.85rem; padding: 7px 10px; }
    .sw-ai-skel-head { flex-direction: column; align-items: stretch; }
    .sw-ai-skel-circle { width: 44px; height: 44px; flex: 0 0 44px; margin: 0 auto; }
}

[dir="rtl"] .sw-ai-steps { text-align: start; }

@media (prefers-reduced-motion: reduce) {
    .sw-ai-overlay,
    .sw-ai-panel,
    .sw-ai-panel::before,
    .sw-ai-orb__glow,
    .sw-ai-orb__ring,
    .sw-ai-orb__dot,
    .sw-ai-step.is-active .sw-ai-step__mark,
    .sw-shimmer {
        animation: none !important;
    }
    .sw-shimmer { background: #eef2f7; }
}

/* ── Inline toast ── */
.sw-toast {
    position: fixed;
    left: 50%;
    bottom: 24px;
    transform: translateX(-50%) translateY(20px);
    background: #1e293b;
    color: #fff;
    padding: 0.65rem 1rem;
    border-radius: 8px;
    font-size: 0.9rem;
    box-shadow: 0 12px 32px -10px rgba(0,0,0,0.4);
    opacity: 0;
    transition: opacity .25s ease, transform .25s ease;
    z-index: 1100;
    max-width: 92vw;
}
.sw-toast[hidden] { display: none; }
.sw-toast.is-visible { opacity: 1; transform: translateX(-50%) translateY(0); }

/* ============================================================
   Result page
   ============================================================ */
.sr-header {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-bottom: 1.25rem;
}
.sr-header__main { display: flex; flex-direction: column; gap: 0.5rem; }
.sr-header__row { display: flex; align-items: center; gap: 0.75rem; flex-wrap: wrap; }
.sr-header__title {
    margin: 0;
    font-size: 1.5rem;
    font-weight: 700;
    color: #0f172a;
}
.sr-header__meta { display: flex; gap: 0.5rem; flex-wrap: wrap; align-items: center; }
.sr-lang-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.3rem 0.7rem;
    background: rgba(29, 78, 216, 0.08);
    color: #1d4ed8;
    border-radius: 999px;
    font-size: 0.82rem;
}
.sr-empty-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.3rem 0.7rem;
    background: rgba(245, 158, 11, 0.12);
    color: #b45309;
    border-radius: 999px;
    font-size: 0.82rem;
}

.sr-score {
    display: grid;
    grid-template-columns: minmax(180px, 240px) 1fr;
    gap: 1.5rem;
    padding: 1.5rem;
    background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
    border: 1px solid rgba(15, 23, 42, 0.08);
    border-radius: 16px;
    margin-bottom: 1.25rem;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04), 0 12px 28px -18px rgba(15,23,42,0.15);
}
.sr-score__hero {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    background: #1d4ed8;
    color: #fff;
    border-radius: 14px;
    padding: 1.25rem 1rem;
    text-align: center;
}
.sr-score__total { font-size: 3rem; font-weight: 800; line-height: 1; }
.sr-score__total span { font-size: 1.25rem; opacity: 0.85; font-weight: 600; }
.sr-score__label { margin-top: 0.4rem; font-size: 0.85rem; opacity: 0.92; text-transform: uppercase; letter-spacing: 0.06em; }

.sr-score__bars { display: flex; flex-direction: column; justify-content: center; gap: 0.85rem; }
.sr-bar__row { display: flex; justify-content: space-between; align-items: baseline; font-size: 0.9rem; margin-bottom: 0.3rem; }
.sr-bar__label { color: #334155; font-weight: 500; }
.sr-bar__val   { color: #0f172a; font-weight: 700; }
.sr-bar__track {
    height: 8px;
    background: #e2e8f0;
    border-radius: 999px;
    overflow: hidden;
}
.sr-bar__fill {
    height: 100%;
    background: linear-gradient(90deg, #3b82f6, #1d4ed8);
    border-radius: 999px;
    transition: width .3s ease;
}

.sr-panel {
    background: #fff;
    border: 1px solid rgba(15, 23, 42, 0.08);
    border-radius: 14px;
    padding: 1.1rem 1.25rem;
    margin-bottom: 1rem;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.03);
}
.sr-panel--motivation { background: linear-gradient(180deg, #fefce8 0%, #fffbeb 100%); border-color: rgba(234, 179, 8, 0.25); }
.sr-panel--tips       { background: linear-gradient(180deg, #ecfdf5 0%, #f0fdf4 100%); border-color: rgba(16, 185, 129, 0.25); }
.sr-panel--de         { background: #f8fafc; }
.sr-panel__title {
    font-size: 1.05rem;
    font-weight: 700;
    color: #0f172a;
    margin: 0 0 0.6rem;
    display: flex; align-items: center; gap: 0.45rem;
}
.sr-panel__body { color: #334155; line-height: 1.65; font-size: 0.95rem; }
.sr-de-text { font-family: "Source Serif Pro", "Georgia", serif; color: #1e293b; white-space: normal; }

/* Error analysis */
.sr-errors { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 0.75rem; }
.sr-error {
    border: 1px solid rgba(15, 23, 42, 0.08);
    border-radius: 10px;
    padding: 0.75rem 0.9rem;
    background: #fff;
}
.sr-error__head { margin-bottom: 0.45rem; }
.sr-error__cat {
    display: inline-block;
    padding: 0.15rem 0.55rem;
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    border-radius: 999px;
    background: rgba(59, 130, 246, 0.12);
    color: #1d4ed8;
}
.sr-error__cat--grammar    { background: rgba(239, 68, 68, 0.12); color: #b91c1c; }
.sr-error__cat--vocabulary { background: rgba(168, 85, 247, 0.12); color: #7e22ce; }
.sr-error__cat--structure  { background: rgba(14, 165, 233, 0.14); color: #0369a1; }
.sr-error__cat--spelling   { background: rgba(245, 158, 11, 0.14); color: #b45309; }
.sr-error__cat--task       { background: rgba(16, 185, 129, 0.14); color: #047857; }
.sr-error__glyph { margin-inline-end: 0.4rem; opacity: 0.85; font-size: 0.95em; }
@media print { .sr-error__glyph { display: none; } }
.sr-error__pair { display: grid; grid-template-columns: 1fr; gap: 0.35rem; margin-bottom: 0.4rem; }
@media (min-width: 720px) {
    .sr-error__pair { grid-template-columns: 1fr 1fr; gap: 0.6rem; }
}
.sr-error__cell {
    padding: 0.4rem 0.6rem;
    border-radius: 8px;
    font-family: "Source Serif Pro", "Georgia", serif;
    line-height: 1.55;
}
.sr-error__cell--orig { background: rgba(239, 68, 68, 0.08); color: #991b1b; }
.sr-error__cell--corr { background: rgba(16, 185, 129, 0.10); color: #065f46; }
.sr-error__tag { font-weight: 700; margin-inline-end: 0.25rem; }
.sr-error__exp { color: #475569; font-size: 0.9rem; line-height: 1.55; }

/* Verbs / phrases */
.sr-verbs, .sr-phrases { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 0.55rem; }
.sr-verb, .sr-phrase {
    padding: 0.55rem 0.75rem;
    background: #f8fafc;
    border: 1px solid rgba(15, 23, 42, 0.06);
    border-radius: 10px;
}
.sr-verb__de, .sr-phrase__de { color: #0f172a; font-size: 0.98rem; }
.sr-verb__ex { color: #475569; font-size: 0.9rem; margin-inline-start: 0.25rem; }
.sr-verb__exp, .sr-phrase__exp { color: #475569; font-size: 0.88rem; margin-top: 0.25rem; line-height: 1.55; }

.sr-lang-hint {
    margin: 0.5rem 0 1rem;
    padding: 0.6rem 0.85rem;
    color: #475569;
    font-size: 0.85rem;
    background: #f1f5f9;
    border-radius: 8px;
}
.sr-actions {
    display: flex; gap: 0.6rem; flex-wrap: wrap; justify-content: center;
    margin: 1rem 0 2rem;
}

@media (max-width: 720px) {
    .sr-score { grid-template-columns: 1fr; }
    .sr-score__hero { padding: 1rem; }
    .sr-score__total { font-size: 2.5rem; }
}

/* ============================================================
 * Task 7 — Result-page waiting (inline) + failed card
 * ============================================================ */
.sw-result-waiting {
    margin: 1.5rem 0 2rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
}
.sw-ai-panel--inline {
    position: static;
    transform: none;
    box-shadow: 0 8px 32px rgba(15, 23, 42, 0.08);
    max-width: 560px;
    width: 100%;
}
.sw-result-waiting__hint {
    color: #64748b;
    font-size: 0.9rem;
    text-align: center;
    margin: 0;
    max-width: 480px;
}

.sw-result-failed {
    margin: 2rem auto;
    max-width: 560px;
    padding: 2rem 1.5rem;
    text-align: center;
    background: #fff;
    border: 1px solid #fee2e2;
    border-radius: 14px;
    box-shadow: 0 4px 18px rgba(220, 38, 38, 0.06);
}
.sw-result-failed__icon {
    font-size: 2.5rem;
    color: #dc2626;
    display: block;
    margin-bottom: 0.75rem;
}
.sw-result-failed__title {
    font-size: 1.35rem;
    margin: 0 0 0.5rem;
    color: #0f172a;
}
.sw-result-failed__body {
    color: #475569;
    margin: 0 0 1.25rem;
}
.sw-result-failed__actions {
    display: flex;
    gap: 0.75rem;
    justify-content: center;
    flex-wrap: wrap;
}

.sw-in-progress {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.4rem 0.8rem;
    margin-inline-start: 0.5rem;
    border-radius: 999px;
    background: #fef3c7;
    color: #92400e;
    font-size: 0.85rem;
    text-decoration: none;
    border: 1px solid #fde68a;
}
.sw-in-progress:hover { background: #fde68a; color: #78350f; }

[dir="rtl"] .sw-result-failed__actions { direction: rtl; }

@media (max-width: 560px) {
    .sw-result-failed { margin: 1rem; padding: 1.5rem 1rem; }
    .sw-result-failed__actions .btn { flex: 1 1 100%; }
}

/* ============================================================
   Premium polish pass — listing signals, workspace header nav,
   word-count ring, result sticky summary + error groups,
   mobile/RTL/a11y polish.
   ============================================================ */

/* ── Listing card signals ───────────────────────────────── */
.schreiben-card__signals {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin-top: 0.1rem;
}
.schreiben-signal {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.2rem 0.55rem;
    border-radius: 999px;
    font-size: 0.74rem;
    font-weight: 600;
    background: #f1f5f9;
    color: #475569;
    line-height: 1.2;
}
.schreiben-signal i { font-size: 0.78rem; }
.schreiben-signal--score    { background: rgba(16, 185, 129, 0.12); color: #047857; }
.schreiben-signal--attempts { background: rgba(59, 130, 246, 0.10); color: #1d4ed8; }
.schreiben-signal--draft    { background: rgba(245, 158, 11, 0.14); color: #b45309; }
.schreiben-signal--new      { background: #f1f5f9; color: #64748b; font-weight: 500; }

/* ── Workspace header nav (Prev/Next chevrons) ──────────── */
.sw-header__row { row-gap: 0.5rem; }
.sw-header__nav {
    display: inline-flex;
    gap: 0.35rem;
    margin-inline-start: auto;
    align-items: center;
}
.sw-header__nav-btn {
    appearance: none;
    border: 1px solid rgba(15, 23, 42, 0.12);
    background: #fff;
    color: #334155;
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    transition: background .15s ease, border-color .15s ease, color .15s ease;
    cursor: pointer;
}
.sw-header__nav-btn:hover:not([disabled]) {
    background: #f1f5f9;
    border-color: rgba(15, 23, 42, 0.22);
    color: #0f172a;
}
.sw-header__nav-btn[disabled] { opacity: 0.4; cursor: not-allowed; }
.sw-header__nav-btn:focus-visible {
    outline: 2px solid #3b82f6;
    outline-offset: 2px;
}
[dir="rtl"] .sw-nav-chev { transform: scaleX(-1); }

/* ── Word-count ring (lightweight bar) ──────────────────── */
.sw-counter-wrap {
    display: inline-flex;
    align-items: center;
    gap: 0.65rem;
    flex-wrap: wrap;
}
.sw-wordring {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    min-width: 140px;
}
.sw-wordring__track {
    flex: 1 1 auto;
    height: 6px;
    min-width: 90px;
    background: #e2e8f0;
    border-radius: 999px;
    overflow: hidden;
}
.sw-wordring__fill {
    height: 100%;
    width: var(--pct, 0%);
    background: #94a3b8;
    border-radius: 999px;
    transition: width .45s cubic-bezier(.22,.61,.36,1), background-color .35s ease;
}
.sw-wordring__label {
    font-size: 0.74rem;
    color: #64748b;
    font-weight: 500;
    white-space: nowrap;
    transition: color .35s ease;
}
.sw-wordring__track { transition: background-color .35s ease; }
.sw-wordring.is-low  .sw-wordring__fill  { background: #fcd34d; }
.sw-wordring.is-low  .sw-wordring__label { color: #b45309; }
.sw-wordring.is-ok   .sw-wordring__fill  { background: #34d399; }
.sw-wordring.is-ok   .sw-wordring__label { color: #047857; }
.sw-wordring.is-over .sw-wordring__fill  { background: #fb923c; }
.sw-wordring.is-over .sw-wordring__label { color: #c2410c; }

/* ── Workspace actions v2 ──────────────────────────────── */
.sw-actions--v2 {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0.6rem;
}
.sw-actions--v2 .sw-actions__primary {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
    align-items: center;
    justify-content: center;
}
.sw-actions--v2 .sw-actions__secondary {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    align-items: center;
    justify-content: center;
}
.sw-actions--v2 .sw-ai-btn { padding: 0.6rem 1.4rem; }

@media (max-width: 480px) {
    .sw-actions--v2 .sw-actions__primary { flex-direction: column; align-items: stretch; }
    .sw-actions--v2 .sw-actions__primary .sw-ai-btn { width: 100%; }
    .sw-actions--v2 .sw-feedback-lang { justify-content: center; }
    .sw-counter-wrap { width: 100%; }
    .sw-wordring { width: 100%; }
}

/* ── Focus-visible polish ──────────────────────────────── */
.sw-ai-btn:focus-visible,
.sw-feedback-lang__btn:focus-visible,
.sw-tr-btn:focus-visible,
.sw-last-corr:focus-visible,
.sw-in-progress:focus-visible {
    outline: 2px solid #3b82f6;
    outline-offset: 2px;
}
.sw-char-btn:focus-visible,
.sw-char-btn--punc:focus-visible {
    outline: none;
    border-color: rgba(59,130,246,0.55);
    box-shadow: 0 0 0 2px #ffffff, 0 0 0 4px rgba(59,130,246,0.55);
}

/* ============================================================
   Result page — sticky summary + jump nav + grouped errors
   ============================================================ */
.sr-summary {
    position: sticky;
    top: 0.5rem;
    z-index: 50;
    display: flex;
    align-items: center;
    gap: 0.85rem;
    padding: 0.55rem 0.9rem;
    margin: 0 0 1rem;
    background: rgba(255,255,255,0.92);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid rgba(15, 23, 42, 0.08);
    border-radius: 14px;
    box-shadow: 0 4px 18px -10px rgba(15, 23, 42, 0.18);
}
.sr-summary__score {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: baseline;
    gap: 0.15rem;
    padding: 0.2rem 0.6rem;
    background: #1d4ed8;
    color: #fff;
    border-radius: 10px;
    font-weight: 700;
}
.sr-summary__score strong { font-size: 1.05rem; line-height: 1; }
.sr-summary__score span   { font-size: 0.78rem; opacity: 0.85; }
.sr-summary__title {
    flex: 1 1 auto;
    min-width: 0;
    font-weight: 600;
    color: #0f172a;
    font-size: 0.9rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    unicode-bidi: plaintext;
}
.sr-summary__nav {
    display: inline-flex;
    gap: 0.3rem;
    overflow-x: auto;
    scrollbar-width: thin;
    max-width: 100%;
}
.sr-jump {
    flex: 0 0 auto;
    padding: 0.3rem 0.7rem;
    background: #f1f5f9;
    color: #1d4ed8;
    text-decoration: none;
    border-radius: 999px;
    font-size: 0.78rem;
    font-weight: 600;
    border: 1px solid transparent;
    transition: background .15s ease, border-color .15s ease;
    white-space: nowrap;
}
.sr-jump:hover { background: #e0e7ff; }
.sr-jump:focus-visible {
    outline: 2px solid #3b82f6;
    outline-offset: 2px;
}

@media (max-width: 720px) {
    .sr-summary { flex-wrap: wrap; gap: 0.5rem; padding: 0.5rem 0.65rem; }
    .sr-summary__title { flex: 1 1 100%; order: 3; font-size: 0.85rem; }
    .sr-summary__nav { flex: 1 1 100%; order: 4; }
}

/* Stronger score hero */
.sr-score__total { font-size: 3.4rem; letter-spacing: -0.02em; }
.sr-score__total span { font-size: 1.4rem; margin-inline-start: 0.15rem; }

/* Anchor scroll-margin so sticky summary doesn't cover headings */
[id^="sr-"] { scroll-margin-top: 80px; }

/* Error groups */
.sr-error-groups { display: flex; flex-direction: column; gap: 0.6rem; }
.sr-error-group {
    border: 1px solid rgba(15, 23, 42, 0.08);
    border-radius: 12px;
    background: #fff;
    overflow: hidden;
}
.sr-error-group[open] { box-shadow: 0 1px 2px rgba(15,23,42,0.04); }
.sr-error-group__head {
    list-style: none;
    cursor: pointer;
    padding: 0.65rem 0.9rem;
    display: flex;
    align-items: center;
    gap: 0.55rem;
    background: #f8fafc;
    transition: background .15s ease;
}
.sr-error-group__head::-webkit-details-marker { display: none; }
.sr-error-group__head:hover { background: #f1f5f9; }
.sr-error-group__head:focus-visible { outline: 2px solid #3b82f6; outline-offset: -2px; }
.sr-error-group__count { color: #64748b; font-weight: 600; font-size: 0.85rem; }
.sr-error-group__chev {
    margin-inline-start: auto;
    color: #94a3b8;
    transition: transform .2s ease;
}
.sr-error-group[open] .sr-error-group__chev { transform: rotate(180deg); }
.sr-error-group .sr-errors {
    padding: 0.6rem 0.75rem 0.85rem;
    gap: 0.55rem;
}

.sr-count-badge {
    margin-inline-start: 0.4rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.5rem;
    padding: 0 0.45rem;
    height: 1.35rem;
    background: rgba(239, 68, 68, 0.12);
    color: #b91c1c;
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 700;
}

.sr-empty-state {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    color: #047857;
    background: rgba(16, 185, 129, 0.10);
    border: 1px solid rgba(16, 185, 129, 0.22);
    padding: 0.6rem 0.9rem;
    border-radius: 10px;
    font-size: 0.92rem;
}
.sr-empty-state i { font-size: 1rem; }

.sr-vocab-anchor { display: block; height: 0; }

/* RTL chevrons on result jump nav */
[dir="rtl"] .sr-error-group__chev { transform: rotate(0deg); }
[dir="rtl"] .sr-error-group[open] .sr-error-group__chev { transform: rotate(-180deg); }
[dir="rtl"] .sr-actions .bi-arrow-left,
[dir="rtl"] .sr-actions .bi-arrow-right { transform: scaleX(-1); }

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
    .sr-error-group__chev,
    .sw-wordring, .sw-wordring__track, .sw-wordring__fill, .sw-wordring__label { transition: none; }
    html { scroll-behavior: auto !important; }
}

/* Mobile result tightening */
@media (max-width: 480px) {
    .sr-score__total { font-size: 2.6rem; }
    .sr-score { padding: 1rem; }
    .sr-panel { padding: 0.95rem 1rem; }
}

/* ============================================================
   Result Page — Tabbed Views (Corrected / Diff / Original)
   ============================================================ */
.sr-panel--views .sr-views {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin: 0.5rem 0 1rem;
    padding: 0.3rem;
    background: #f4f6f8;
    border-radius: 999px;
    width: fit-content;
    max-width: 100%;
}
.sr-view-tab {
    appearance: none;
    border: 0;
    background: transparent;
    color: #4a5568;
    font: inherit;
    font-weight: 500;
    padding: 0.5rem 0.95rem;
    border-radius: 999px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    transition: background-color .15s ease, color .15s ease, box-shadow .15s ease;
    white-space: nowrap;
}
.sr-view-tab:hover { color: #1a202c; }
.sr-view-tab:focus-visible {
    outline: 2px solid #4f86ff;
    outline-offset: 2px;
}
.sr-view-tab[aria-selected="true"] {
    background: #fff;
    color: #1a202c;
    box-shadow: 0 1px 3px rgba(0,0,0,.08);
}
.sr-view {
    line-height: 1.7;
    font-size: 1rem;
    color: #1a202c;
}
.sr-view[hidden] { display: none; }

/* Inline diff */
.sr-diff {
    direction: ltr;
    unicode-bidi: isolate;
    white-space: pre-wrap;
    word-break: break-word;
}
.sr-diff__body {
    line-height: 1.85;
}
.sr-diff__legend {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem 1rem;
    margin-bottom: 0.75rem;
    font-size: 0.85rem;
    color: #4a5568;
}
.sr-diff__legend-item {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
}
del.sr-diff__del,
.sr-diff__del {
    background: #fdecec;
    color: #9b2c2c;
    text-decoration: line-through;
    text-decoration-color: rgba(155, 44, 44, .6);
    border-radius: 3px;
    padding: 0 3px;
}
ins.sr-diff__ins,
.sr-diff__ins {
    background: #e8f6ec;
    color: #1f6b3a;
    text-decoration: none;
    border-radius: 3px;
    padding: 0 3px;
}
.sr-diff__eq { color: inherit; }

/* Inside Arabic UI, keep the German diff LTR */
[dir="rtl"] .sr-diff,
[dir="rtl"] .sr-view[lang="de"] {
    direction: ltr;
    text-align: left;
}

/* Empty-answer how-to-start card */
.sr-howto {
    margin-top: 1rem;
    padding: 1rem 1.1rem;
    background: #f0f7ff;
    border: 1px solid #d9e8ff;
    border-radius: 12px;
}
.sr-howto__title {
    font-size: 1rem;
    margin: 0 0 0.4rem;
    color: #1f4a8a;
    display: flex;
    align-items: center;
    gap: 0.4rem;
}
.sr-howto__body { margin: 0; color: #2d3748; line-height: 1.6; }

/* RTL action chevron mirror */
[dir="rtl"] .sr-actions .bi-arrow-left,
[dir="rtl"] .sr-actions .bi-arrow-right { transform: scaleX(-1); }

/* Mobile */
@media (max-width: 480px) {
    .sr-panel--views .sr-views {
        width: 100%;
        overflow-x: auto;
        flex-wrap: nowrap;
        -webkit-overflow-scrolling: touch;
    }
    .sr-view-tab { padding: 0.45rem 0.75rem; font-size: 0.92rem; }
    .sr-view { font-size: 0.95rem; }
    .sr-diff__body { line-height: 1.75; }
}

@media (prefers-reduced-motion: reduce) {
    .sr-view-tab { transition: none; }
}

/* ============================================================
   Result Page — Premium Enhancement Pass
   ============================================================ */

/* Score band tokens */
.sr-score__hero { position: relative; }
.sr-score__hero--low    { background: linear-gradient(135deg, #b91c1c 0%, #9b2c2c 100%); }
.sr-score__hero--med    { background: linear-gradient(135deg, #b45309 0%, #92611b 100%); }
.sr-score__hero--strong { background: linear-gradient(135deg, #047857 0%, #1f6b3a 100%); }
.sr-score__band-chip {
    display: inline-block; margin-top: 0.55rem; padding: 0.18rem 0.6rem;
    border-radius: 999px; background: rgba(255,255,255,0.18); color: #fff;
    font-size: 0.78rem; font-weight: 600; letter-spacing: 0.02em;
    backdrop-filter: blur(4px);
}

/* Word-count chip on hero */
.sr-wc-chip {
    margin-top: 0.7rem; display: inline-flex; align-items: center; gap: 0.4rem;
    padding: 0.3rem 0.65rem; border-radius: 999px;
    background: rgba(255,255,255,0.16); color: #fff;
    font-size: 0.82rem; flex-wrap: wrap; justify-content: center;
}
.sr-wc-chip__sep { opacity: 0.65; }
.sr-wc-chip__rec { opacity: 0.92; }

/* Bar bands */
.sr-bar__meta { display: inline-flex; align-items: center; gap: 0.5rem; }
.sr-bar__band {
    font-size: 0.72rem; font-weight: 600; padding: 0.1rem 0.45rem;
    border-radius: 999px; letter-spacing: 0.02em;
}
.sr-bar__band--low    { background: #fdecec; color: #9b2c2c; }
.sr-bar__band--med    { background: #fff5e0; color: #92611b; }
.sr-bar__band--strong { background: #e8f6ec; color: #1f6b3a; }
.sr-bar--low    .sr-bar__fill { background: linear-gradient(90deg, #ef4444, #b91c1c); }
.sr-bar--med    .sr-bar__fill { background: linear-gradient(90deg, #f59e0b, #b45309); }
.sr-bar--strong .sr-bar__fill { background: linear-gradient(90deg, #10b981, #047857); }

/* Focus on this next */
.sr-focus {
    display: flex; gap: 1rem; align-items: flex-start;
    padding: 1rem 1.15rem; margin: 1rem 0;
    background: linear-gradient(180deg, #eef2ff 0%, #f5f3ff 100%);
    border: 1px solid rgba(99,102,241,0.22);
    border-radius: 14px;
}
.sr-focus__icon {
    flex: 0 0 auto; width: 2.4rem; height: 2.4rem; border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    background: #fff; color: #4f46e5; font-size: 1.25rem;
    box-shadow: 0 4px 12px rgba(79,70,229,0.18);
}
.sr-focus__body { flex: 1 1 auto; min-width: 0; }
.sr-focus__title {
    margin: 0 0 0.35rem; font-size: 1.05rem; color: #1e1b4b; font-weight: 700;
    display: flex; align-items: baseline; gap: 0.4rem; flex-wrap: wrap;
}
.sr-focus__chip { color: #4f46e5; font-weight: 600; font-size: 0.95rem; }
.sr-focus__text { margin: 0; color: #374151; line-height: 1.55; font-size: 0.95rem; }
.sr-focus__top-error {
    margin-top: 0.55rem; display: inline-flex; align-items: center; gap: 0.4rem;
    padding: 0.25rem 0.6rem; border-radius: 999px;
    background: rgba(79,70,229,0.10); color: #4338ca;
    font-size: 0.82rem; font-weight: 600;
}

/* Motivation: warmer accent */
.sr-panel--motivation { border-left: 4px solid #f59e0b; }
[dir="rtl"] .sr-panel--motivation { border-left: 0; border-right: 4px solid #f59e0b; }

/* Tips bullets */
.sr-tips__list {
    list-style: none; padding: 0; margin: 0;
    display: flex; flex-direction: column; gap: 0.55rem;
}
.sr-tips__list li {
    display: flex; gap: 0.55rem; align-items: flex-start;
    color: #1f2937; line-height: 1.55; font-size: 0.95rem;
}
.sr-tips__icon {
    flex: 0 0 auto; width: 1.4rem; height: 1.4rem; border-radius: 50%;
    background: #d1fae5; color: #047857;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 0.85rem; margin-top: 0.1rem;
}

/* Onboarding (default_empty) layout */
.sr-onboard {
    margin: 1rem 0;
    padding: 1.5rem 1.25rem;
    border-radius: 16px;
    background: linear-gradient(160deg, #eff6ff 0%, #f0f9ff 50%, #ecfeff 100%);
    border: 1px solid rgba(59,130,246,0.18);
}
.sr-onboard__hero { text-align: center; margin-bottom: 1rem; }
.sr-onboard__icon {
    width: 3.4rem; height: 3.4rem; margin: 0 auto 0.7rem;
    border-radius: 50%; background: #fff; color: #2563eb;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 1.65rem; box-shadow: 0 8px 22px rgba(37,99,235,0.18);
}
.sr-onboard__title { margin: 0 0 0.4rem; font-size: 1.35rem; color: #0f172a; font-weight: 800; }
.sr-onboard__body { margin: 0 auto; max-width: 36rem; color: #334155; line-height: 1.6; }
.sr-starter__sub {
    margin: 0.85rem 0 0.45rem; font-size: 0.78rem; font-weight: 700;
    text-transform: uppercase; letter-spacing: 0.08em; color: #475569;
}

/* Premium failed state additions */
.sw-result-failed--premium { background: linear-gradient(180deg, #fff7f7 0%, #fdfafa 100%); border: 1px solid rgba(220,38,38,0.18); }
.sw-result-failed__icon-wrap {
    width: 3.6rem; height: 3.6rem; margin: 0 auto 0.7rem;
    border-radius: 50%; background: #fef2f2; color: #b91c1c;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 1.55rem; box-shadow: 0 6px 18px rgba(185,28,28,0.12);
}
.sw-result-failed--premium .sw-result-failed__icon { color: #b91c1c; }
.sw-result-failed__reassure {
    margin: 0.6rem auto 0.4rem; max-width: 32rem;
    color: #065f46; font-size: 0.92rem;
    display: inline-flex; align-items: center; gap: 0.4rem; justify-content: center;
}
.sw-result-failed__ref {
    margin-top: 0.9rem; font-size: 0.78rem; color: #64748b;
}
.sw-result-failed__ref code {
    background: #f1f5f9; padding: 0.1rem 0.4rem; border-radius: 4px;
    color: #334155; font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}

/* Skeleton preview inside pending */
.sr-skeleton {
    margin-top: 1.25rem; display: flex; flex-direction: column; gap: 0.85rem;
}
.sr-skeleton__row {
    display: grid; grid-template-columns: 1fr; gap: 0.85rem;
}
@media (min-width: 700px) {
    .sr-skeleton__row { grid-template-columns: 200px 1fr; }
}
.sr-skeleton__hero {
    height: 130px; border-radius: 14px;
    background: linear-gradient(90deg, #eef2f7 0%, #f8fafc 50%, #eef2f7 100%);
    background-size: 200% 100%;
    animation: sr-shimmer 1.6s ease-in-out infinite;
}
.sr-skeleton__bars { display: flex; flex-direction: column; gap: 0.55rem; justify-content: center; }
.sr-skeleton__bar, .sr-skeleton__line, .sr-skeleton__block {
    background: linear-gradient(90deg, #eef2f7 0%, #f8fafc 50%, #eef2f7 100%);
    background-size: 200% 100%;
    animation: sr-shimmer 1.6s ease-in-out infinite;
    border-radius: 8px;
}
.sr-skeleton__bar   { height: 14px; }
.sr-skeleton__card  {
    padding: 1rem; border-radius: 12px;
    background: #fff; border: 1px solid #e2e8f0;
    display: flex; flex-direction: column; gap: 0.6rem;
}
.sr-skeleton__line  { height: 12px; }
.sr-skeleton__line--w70 { width: 70%; }
.sr-skeleton__line--w90 { width: 90%; }
.sr-skeleton__line--w50 { width: 50%; }
.sr-skeleton__block { height: 70px; }
@keyframes sr-shimmer {
    0%   { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}
@media (prefers-reduced-motion: reduce) {
    .sr-skeleton__hero,
    .sr-skeleton__bar,
    .sr-skeleton__line,
    .sr-skeleton__block { animation: none; background: #eef2f7; }
}

/* Improve diff readability */
.sr-diff__body { line-height: 1.75; }
.sr-diff__legend { gap: 0.7rem; }

/* Mobile */
@media (max-width: 480px) {
    .sr-focus { flex-direction: column; }
    .sr-onboard { padding: 1.25rem 1rem; }
    .sr-onboard__title { font-size: 1.15rem; }
}

/* ============================================================
   Final refinement pass — additions only
   ============================================================ */

/* Word-count soft hint (guidance only, no pass/fail) */
.sr-wc-hint {
    display: inline-flex; align-items: center; gap: 0.4rem;
    margin-top: 0.5rem; padding: 0.35rem 0.7rem;
    border-radius: 999px; font-size: 0.82rem; line-height: 1.3;
    background: #f1f5f9; color: #334155; border: 1px solid #e2e8f0;
}
.sr-wc-hint i { font-size: 0.9rem; opacity: 0.85; }
.sr-wc-hint--good  { background: #ecfdf5; color: #065f46; border-color: #a7f3d0; }
.sr-wc-hint--short { background: #fffbeb; color: #92400e; border-color: #fde68a; }
.sr-wc-hint--long  { background: #fff7ed; color: #9a3412; border-color: #fed7aa; }

/* Micro-rationale under each score bar */
.sr-bar__rationale {
    margin: 0.35rem 0 0; padding: 0; font-size: 0.82rem;
    color: #475569; line-height: 1.45;
}
.sr-bar--low    .sr-bar__rationale { color: #7c2d12; }
.sr-bar--med    .sr-bar__rationale { color: #78350f; }
.sr-bar--strong .sr-bar__rationale { color: #14532d; }

/* Skeleton labels */
.sr-skeleton__label {
    font-size: 0.72rem; font-weight: 700; letter-spacing: 0.08em;
    text-transform: uppercase; color: #94a3b8; margin-bottom: 0.4rem;
}
.sr-skeleton__col { display: flex; flex-direction: column; gap: 0.4rem; }

/* Failed state: support hint */
.sw-result-failed__hint {
    margin: 0.35rem auto 0; max-width: 32rem;
    color: #475569; font-size: 0.9rem;
}
.sw-result-failed__support {
    margin: 1rem auto 0; max-width: 32rem;
    color: #64748b; font-size: 0.82rem;
    display: inline-flex; align-items: center; gap: 0.4rem; justify-content: center;
}
.sw-result-failed__support i { color: #94a3b8; }

/* Motivation / Feedback / Tips — visual hierarchy refinement */
.sr-panel--motivation {
    border-left: 4px solid #fb923c;
    background: linear-gradient(180deg, #fff7ed 0%, #fffaf3 100%);
    padding-top: 0.9rem; padding-bottom: 0.9rem;
}
.sr-panel--motivation .sr-panel__title { color: #9a3412; }
.sr-panel--feedback {
    border: 1px solid #e2e8f0; background: #ffffff;
}
.sr-panel--feedback .sr-panel__body {
    line-height: 1.75; max-width: 70ch;
}
.sr-panel--tips {
    border-left: 4px solid #0d9488;
    background: linear-gradient(180deg, #f0fdfa 0%, #f7fefc 100%);
}
.sr-panel--tips .sr-panel__title { color: #115e59; }
.sr-tips__list { list-style: none; padding: 0; margin: 0.25rem 0 0; display: flex; flex-direction: column; gap: 0.5rem; }
.sr-tips__list li { display: flex; align-items: flex-start; gap: 0.55rem; line-height: 1.55; }
.sr-tips__icon { color: #0d9488; margin-top: 0.18rem; }

/* RTL mirroring for accent borders */
[dir="rtl"] .sr-panel--motivation { border-left: 0; border-right: 4px solid #fb923c; }
[dir="rtl"] .sr-panel--tips       { border-left: 0; border-right: 4px solid #0d9488; }

/* Keep German blocks LTR even inside RTL layout */
[dir="rtl"] .sr-de-text,
[dir="rtl"] .sr-diff,
[dir="rtl"] .sr-diff__body,
[dir="rtl"] .sr-verb__de,
[dir="rtl"] .sr-phrase__de,
[dir="rtl"] .sr-verb__ex,
[dir="rtl"] .sr-error__cell--orig,
[dir="rtl"] .sr-error__cell--corr {
    direction: ltr; unicode-bidi: isolate; text-align: left;
}

/* Copy-to-clipboard button */
.sr-verb, .sr-phrase { position: relative; padding-right: 2.4rem; }
[dir="rtl"] .sr-verb, [dir="rtl"] .sr-phrase { padding-right: 1rem; padding-left: 2.4rem; }
.sr-copy-btn {
    position: absolute; top: 0.5rem; right: 0.5rem;
    width: 28px; height: 28px; border-radius: 6px;
    border: 1px solid #e2e8f0; background: #f8fafc; color: #475569;
    display: inline-flex; align-items: center; justify-content: center;
    cursor: pointer; padding: 0; font-size: 0.85rem;
    transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
[dir="rtl"] .sr-copy-btn { right: auto; left: 0.5rem; }
.sr-copy-btn:hover { background: #eef2f7; color: #0f172a; }
.sr-copy-btn:focus-visible { outline: 2px solid #3b82f6; outline-offset: 2px; }
.sr-copy-btn.is-copied { background: #ecfdf5; color: #047857; border-color: #a7f3d0; }
.sr-copy-btn.is-copied i::before { content: "\F26B"; /* bi-check2 */ }

/* 768px sticky-summary fix: avoid overlap with focus card */
@media (max-width: 820px) {
    .sr-summary { position: static !important; top: auto !important; }
    .sr-summary__nav { flex-wrap: wrap; }
}

/* 360px — kill horizontal overflow, stack actions */
@media (max-width: 400px) {
    .sr-score__hero { padding: 1rem; }
    .sr-actions, .sw-result-failed__actions {
        flex-direction: column; align-items: stretch;
    }
    .sr-actions .btn, .sw-result-failed__actions .btn { width: 100%; }
    .sr-wc-chip, .sr-wc-hint { flex-wrap: wrap; }
    .sr-panel, .sr-focus, .sr-score, .sw-result-failed {
        min-width: 0; overflow-wrap: anywhere; word-break: break-word;
    }
    .sr-summary__nav { gap: 0.35rem; }
}

/* ============================================================
   Print stylesheet — clean PDF-friendly result
   ============================================================ */
@media print {
    /* Hide app chrome and interactive-only UI */
    header, nav, footer,
    .app-header, .student-sidebar, .site-footer,
    .sw-back, .sr-summary, .sr-actions, .sr-copy-btn,
    .sr-views, .sr-lang-hint, .sr-skeleton, .sw-ai-panel,
    .sw-result-failed__actions, button { display: none !important; }

    body, .student-layout, .student-content,
    .sr-panel, .sr-focus, .sr-score, .sr-onboard {
        background: #ffffff !important; color: #000000 !important;
        box-shadow: none !important;
    }
    .sr-panel, .sr-focus, .sr-score, .sr-onboard,
    .sr-error-groups, .sr-verb, .sr-phrase,
    .sw-result-failed { page-break-inside: avoid; }
    .sr-score__hero, .sr-bar__band, .sr-focus__chip,
    .sr-wc-chip, .sr-wc-hint { background: #ffffff !important; color: #000 !important; border-color: #999 !important; }
    .sr-bar__track { background: #eee !important; }
    .sr-bar__fill  { background: #555 !important; }

    /* Show corrected text only; hide diff and original tabs in print */
    #sr-view-diff, #sr-view-original { display: none !important; }
    #sr-view-corrected { display: block !important; }

    /* Open all error group details for print */
    details.sr-error-group, details.sr-error-group > * { display: block !important; }
    .sr-error-group__chev { display: none !important; }

    a, a:visited { color: #000 !important; text-decoration: none; }
    a[href]::after { content: none !important; }
}

/* ============================================================
   Previous-attempt progress section (isolated, calm, bottom of page).
   Display-only. No animation, no gamification.
   ============================================================ */
.sr-progress{
    margin: 24px 0 16px;
    padding: 18px 20px;
    border: 1px solid var(--sr-border, #e5e7eb);
    border-radius: 12px;
    background: var(--sr-surface, #fafafa);
    color: var(--sr-text, #1f2937);
}
.sr-progress__head{ margin-bottom: 10px; }
.sr-progress__title{
    margin: 0;
    font-size: 1rem;
    font-weight: 600;
    color: var(--sr-text-muted, #475569);
    display: inline-flex;
    align-items: center;
    gap: 8px;
}
.sr-progress__title i{ opacity: .7; }
.sr-progress__row{
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    margin: 6px 0 4px;
}
.sr-progress__delta{
    display: inline-block;
    min-width: 44px;
    padding: 4px 10px;
    border-radius: 999px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    border: 1px solid transparent;
    unicode-bidi: isolate;
}
.sr-progress__delta--up{
    background: #ecfdf5; color: #047857; border-color: #a7f3d0;
}
.sr-progress__delta--down{
    background: #fff7ed; color: #b45309; border-color: #fed7aa;
}
.sr-progress__label{
    color: var(--sr-text-muted, #475569);
    font-size: .95rem;
}
.sr-progress__msg{
    margin: 6px 0 12px;
    color: var(--sr-text-muted, #475569);
    line-height: 1.55;
}
.sr-progress__breakdown{
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px 16px;
}
.sr-progress__breakdown li{
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 6px 10px;
    border: 1px solid var(--sr-border, #e5e7eb);
    border-radius: 8px;
    background: #ffffff;
    min-width: 0;
}
.sr-progress__crit{
    color: var(--sr-text-muted, #475569);
    font-size: .9rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.sr-progress__num{
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    min-width: 32px;
    text-align: center;
    padding: 2px 8px;
    border-radius: 6px;
    border: 1px solid transparent;
    unicode-bidi: isolate;
}
.sr-progress__num--up{   background: #ecfdf5; color: #047857; border-color: #a7f3d0; }
.sr-progress__num--flat{ background: #f3f4f6; color: #4b5563; border-color: #e5e7eb; }
.sr-progress__num--down{ background: #fff7ed; color: #b45309; border-color: #fed7aa; }

[dir="rtl"] .sr-progress__title i{ transform: scaleX(-1); }

@media (max-width: 480px){
    .sr-progress{ padding: 14px 14px; }
    .sr-progress__breakdown{ grid-template-columns: 1fr; }
}

@media print{
    .sr-progress{
        background: #ffffff !important;
        border-color: #999 !important;
        color: #000 !important;
        page-break-inside: avoid;
    }
    .sr-progress__delta,
    .sr-progress__num{
        background: #ffffff !important;
        color: #000 !important;
        border-color: #999 !important;
    }
}

/* ============================================================
   Error → Diff linking (Task B)
   ============================================================ */
.sr-error__actions {
    margin-top: 8px;
    display: flex;
    justify-content: flex-end;
}
[dir="rtl"] .sr-error__actions { justify-content: flex-start; }

.sr-error__locate {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 32px;
    padding: 4px 10px;
    font-size: 0.85rem;
    color: var(--sr-muted, #4b5563);
    background: transparent;
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: 999px;
    text-decoration: none;
    line-height: 1.2;
    transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}
.sr-error__locate:hover,
.sr-error__locate:focus-visible {
    color: var(--sr-text, #111827);
    background: rgba(99, 102, 241, 0.08);
    border-color: rgba(99, 102, 241, 0.35);
    outline: none;
}
.sr-error__locate:focus-visible {
    box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.45);
}
.sr-error__locate .bi { font-size: 0.95em; }
[dir="rtl"] .sr-error__locate .bi { transform: scaleX(-1); }

.sr-diff__change {
    border-radius: 4px;
    scroll-margin-top: 96px;
    transition: background-color .9s ease, box-shadow .9s ease, outline-color .9s ease;
    outline: 2px solid transparent;
    outline-offset: 2px;
}
.sr-diff__change:focus { outline-color: transparent; }
.sr-diff__change--locate {
    background-color: rgba(250, 204, 21, 0.22);
    outline-color: rgba(202, 138, 4, 0.6);
}
@media (prefers-reduced-motion: reduce) {
    .sr-diff__change { transition: none; }
}

/* ============================================================
   Workspace polish pass — paper editor, focus mode, chips,
   block collapse, readiness cue, char toolbar, stats.
   ============================================================ */

/* Focus toggle in header */
.sw-focus-toggle {
    display: inline-flex; align-items: center; gap: 0.35rem;
    padding: 0.35rem 0.75rem;
    border: 1px solid rgba(15, 23, 42, 0.12);
    background: #fff; color: #334155;
    border-radius: 999px;
    font-size: 0.82rem; font-weight: 600; cursor: pointer;
    margin-inline-start: auto;
    transition: background .15s ease, border-color .15s ease, color .15s ease;
}
.sw-focus-toggle:hover { background: #f1f5f9; border-color: rgba(15,23,42,0.2); }
.sw-focus-toggle:focus-visible { outline: 2px solid #3b82f6; outline-offset: 2px; }
.sw-focus-toggle[aria-pressed="true"] {
    background: #0f172a; color: #fff; border-color: #0f172a;
}

/* Sticky "Show task" chip — only in focus mode */
.sw-show-task {
    position: sticky; top: 8px;
    z-index: 5;
    display: inline-flex; align-items: center; gap: 0.4rem;
    margin-bottom: 0.75rem;
    padding: 0.4rem 0.85rem;
    border: 1px solid rgba(15,23,42,0.12);
    background: #fff; color: #1d4ed8;
    border-radius: 999px;
    font-size: 0.85rem; font-weight: 600; cursor: pointer;
    box-shadow: 0 4px 14px -8px rgba(15,23,42,0.25);
}
.sw-show-task:focus-visible { outline: 2px solid #3b82f6; outline-offset: 2px; }
.sw-show-task[hidden] { display: none; }

/* Block head + collapse */
.sw-block__head {
    display: flex; align-items: center; justify-content: space-between;
    gap: 0.5rem;
    margin: 0 0 0.75rem;
}
.sw-block__head .sw-block__title { margin: 0; }
.sw-block__collapse {
    appearance: none;
    border: 1px solid rgba(15,23,42,0.1);
    background: #f8fafc; color: #475569;
    width: 28px; height: 28px;
    border-radius: 8px;
    display: inline-flex; align-items: center; justify-content: center;
    cursor: pointer;
    transition: background .15s ease, color .15s ease, transform .2s ease;
}
.sw-block__collapse:hover { background: #eef2f7; color: #0f172a; }
.sw-block__collapse:focus-visible { outline: 2px solid #3b82f6; outline-offset: 2px; }
.sw-block__collapse[aria-expanded="false"] i { transform: rotate(180deg); }
.sw-block__body { transition: max-height .25s ease, opacity .2s ease; }
.sw-block.is-collapsed .sw-block__body {
    max-height: 0; opacity: 0; overflow: hidden; pointer-events: none;
}
.sw-block.is-collapsed { padding-bottom: 0.85rem; }

.visually-hidden {
    position: absolute !important; width: 1px; height: 1px;
    padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0);
    white-space: nowrap; border: 0;
}

/* Premium editor (paper feel) */
.sw-editor {
    background: linear-gradient(180deg, #ffffff 0%, #fdfdfb 100%);
}
.sw-editor__head {
    display: flex; align-items: center; justify-content: space-between;
    gap: 0.75rem; flex-wrap: wrap;
    padding-bottom: 0.85rem;
    border-bottom: 1px solid rgba(15,23,42,0.06);
    margin-bottom: 0.25rem;
}
.sw-editor__title {
    font-size: 1.1rem;
    letter-spacing: -0.01em;
}

/* Structure hint chips */
.sw-structure-chips {
    display: inline-flex; flex-wrap: wrap; gap: 0.3rem;
    align-items: center;
}
.sw-chip {
    display: inline-flex; align-items: center; gap: 0.3rem;
    padding: 0.18rem 0.55rem;
    background: #f1f5f9; color: #475569;
    border: 1px solid rgba(15,23,42,0.06);
    border-radius: 999px;
    font-size: 0.74rem; font-weight: 600;
    letter-spacing: 0.01em;
    unicode-bidi: plaintext;
    transition: background-color .25s ease, color .25s ease, border-color .25s ease;
}
.sw-chip__check {
    display: inline-flex; align-items: center; justify-content: center;
    width: 0; max-width: 0; overflow: hidden; opacity: 0;
    font-size: 0.85rem; line-height: 1;
    transition: opacity .25s ease, width .25s ease, max-width .25s ease;
}
.sw-chip[data-state="checked"] {
    background: rgba(16,185,129,0.10);
    color: #065f46;
    border-color: rgba(16,185,129,0.30);
}
.sw-chip[data-state="checked"] .sw-chip__check {
    width: 0.95rem; max-width: 0.95rem; opacity: 1;
    color: #059669;
}
@media (prefers-reduced-motion: reduce) {
    .sw-chip, .sw-chip__check { transition: none; }
}

/* Char toolbar polish */
.sw-chars { align-items: center; }
.sw-chars__sep {
    display: inline-block;
    width: 1px; height: 18px;
    background: rgba(15,23,42,0.12);
    margin: 0 0.25rem;
}
/* (focus-visible for .sw-char-btn defined above with premium halo) */
.sw-char-btn--punc { font-family: "Source Serif Pro", Georgia, serif; color: #334155; }
.sw-chars__hint {
    margin: -0.25rem 0 0;
    font-size: 0.74rem; color: #94a3b8; font-style: italic;
}

/* Premium textarea */
.sw-textarea {
    background: #fffefb;
    min-height: 420px;
    font-size: 1.02rem;
    line-height: 1.75;
}

/* Sentence/paragraph stats */
.sw-stats {
    margin: -0.25rem 0 0;
    font-size: 0.78rem; color: #94a3b8;
    display: flex; gap: 0.6rem; flex-wrap: wrap;
}
.sw-stats:empty { display: none; }
@media (max-width: 360px) { .sw-stats { display: none; } }

/* CTA wrap + readiness */
.sw-cta-wrap {
    display: inline-flex; flex-direction: column; align-items: center;
    gap: 0.3rem;
}
.sw-ai-btn--premium {
    font-size: 0.98rem;
    padding: 0.65rem 1.35rem;
    border-radius: 12px;
    background: linear-gradient(135deg, #4f46e5 0%, #1d4ed8 100%);
    border: none;
    box-shadow: 0 8px 24px -10px rgba(79, 70, 229, 0.55);
    transition: transform .12s ease, box-shadow .15s ease, filter .15s ease;
}
.sw-ai-btn--premium:hover {
    transform: translateY(-1px);
    box-shadow: 0 12px 28px -10px rgba(79, 70, 229, 0.7);
    filter: brightness(1.05);
}
.sw-ai-btn--premium:focus-visible { outline: 2px solid #fff; outline-offset: 3px; box-shadow: 0 0 0 4px rgba(79,70,229,0.45); }
.sw-cta-hint { font-size: 0.74rem; color: #94a3b8; }
.sw-readiness {
    min-height: 1em;
    font-size: 0.8rem; color: #64748b;
    text-align: center;
}
.sw-readiness[data-state="short"] { color: #b45309; }
.sw-readiness[data-state="ok"]    { color: #047857; }
.sw-readiness[data-state="long"]  { color: #b45309; }

/* Feedback lang quieter */
.sw-feedback-lang { background: transparent; border-color: rgba(15,23,42,0.08); }

/* Focus mode layout */
body.sw-focus-on .sw-col--info { display: none; }
body.sw-focus-on .sw-grid { grid-template-columns: minmax(0, 1fr); max-width: 860px; margin: 0 auto; }
body.sw-focus-on .sw-show-task { display: inline-flex; }
body.sw-focus-on.sw-info-open .sw-col--info { display: flex; }
body.sw-focus-on.sw-info-open .sw-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); max-width: none; }
@media (max-width: 1024px) {
    body.sw-focus-on .sw-grid { grid-template-columns: 1fr; }
    body.sw-focus-on.sw-info-open .sw-grid { grid-template-columns: 1fr; }
}

/* Status pill tooltip-cursor */
.sw-status { cursor: help; }

/* RTL: focus toggle aligns to start of row */
[dir="rtl"] .sw-focus-toggle { margin-inline-start: auto; }

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
    .sw-ai-btn--premium,
    .sw-block__collapse i,
    .sw-block__body { transition: none !important; }
    .sw-ai-btn--premium:hover { transform: none; }
}

@media (max-width: 768px) {
    .sw-editor__head { flex-direction: column; align-items: flex-start; }
    .sw-structure-chips { width: 100%; }
    .sw-cta-wrap { width: 100%; }
    .sw-ai-btn--premium { width: 100%; }
}

/* ============================================================
   Free AI quota — note + locked button + upgrade panel
   ============================================================ */
.sw-free-ai-note {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    font-size: .85rem;
    color: #475569;
    margin-top: .35rem;
}
.sw-ai-btn.is-locked,
.sw-ai-btn--premium.is-locked {
    opacity: .55;
    cursor: not-allowed;
    filter: grayscale(0.35);
    pointer-events: auto; /* allow click to surface toast */
}
.schreiben-upgrade-notice {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .75rem;
    margin-top: .6rem;
    padding: .75rem 1rem;
    background: #fff8e6;
    border: 1px solid #f5d273;
    border-radius: .6rem;
    color: #5b4406;
}
.schreiben-upgrade-notice__text {
    margin: 0;
    font-size: .9rem;
    flex: 1 1 240px;
}
.schreiben-upgrade-notice__cta {
    white-space: nowrap;
}
[dir="rtl"] .schreiben-upgrade-notice { text-align: right; }

/* ============================================================
   Schreiben Result — default_empty enhancements (content/UI only)
   ============================================================ */
.sr-onboard__no-ai{
  display:flex; align-items:flex-start; gap:.5rem;
  margin-top:.75rem; padding:.6rem .8rem;
  background:rgba(25,135,84,.08);
  border:1px solid rgba(25,135,84,.25);
  color:#0f5132; border-radius:.5rem;
  font-size:.95rem; line-height:1.5;
}
.sr-onboard__no-ai i{ font-size:1.05rem; line-height:1.4; flex-shrink:0; }
[dir="rtl"] .sr-onboard__no-ai{ flex-direction:row; }

.sr-empty-structure__intro{ margin-bottom:1rem; }
.sr-empty-structure__list{
  list-style:none; padding:0; margin:0;
  display:flex; flex-direction:column; gap:.85rem;
}
.sr-empty-structure__row{
  display:grid; grid-template-columns:minmax(140px,1fr) minmax(220px,1.4fr) minmax(180px,1.4fr);
  gap:.75rem 1rem; align-items:center;
  padding:.75rem .9rem;
  border:1px solid rgba(0,0,0,.08);
  border-radius:.6rem;
  background:rgba(0,0,0,.015);
}
.sr-empty-structure__label{ font-weight:600; }
.sr-empty-structure__example{
  font-family: ui-monospace,SFMono-Regular,Menlo,monospace;
  background:#fff; border:1px solid rgba(0,0,0,.08);
  padding:.45rem .6rem; border-radius:.4rem;
  font-size:.95rem;
}
.sr-empty-structure__explain{ color:#555; font-size:.92rem; line-height:1.5; }
@media (max-width: 640px){
  .sr-empty-structure__row{ grid-template-columns:1fr; gap:.4rem; }
}

.sr-empty-checklist__list{
  list-style:none; padding:0; margin:0;
  display:flex; flex-direction:column; gap:.5rem;
}
.sr-empty-checklist__list li{
  display:flex; align-items:flex-start; gap:.6rem;
  line-height:1.55;
}
.sr-empty-checklist__list li i{ color:#198754; font-size:1.05rem; flex-shrink:0; margin-top:.15rem; }
[dir="rtl"] .sr-empty-checklist__list li{ flex-direction:row; }

/* ── Aufgabe as numbered task cards (Task display) ───────── */
.sw-aufgabe__intro {
    color: #0f172a;
    font-weight: 600;
    line-height: 1.6;
    font-size: 0.98rem;
    margin: 0 0 0.9rem;
    unicode-bidi: plaintext;
}
.sw-aufgabe__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}
.sw-aufgabe__item {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 0.8rem 0.95rem;
    background: #fff;
    border: 1px solid rgba(15, 23, 42, 0.08);
    border-radius: 12px;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}
.sw-aufgabe__num {
    flex: 0 0 auto;
    width: 1.6rem;
    height: 1.6rem;
    border-radius: 50%;
    background: #1d4ed8;
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 0.85rem;
    line-height: 1;
    margin-top: 0.1rem;
}
.sw-aufgabe__text {
    flex: 1 1 auto;
    color: #1e293b;
    line-height: 1.6;
    font-size: 0.96rem;
    unicode-bidi: plaintext;
}
/* When the translation panel holds cards, drop its inner box so the
   cards stand on their own. */
.sw-block__tr.sw-aufgabe {
    background: transparent;
    border: none;
    padding: 0;
}