/* Page-specific states and responsive refinements. */

.page-copy {
        display: grid;
        gap: 8px;
        max-width: 768px;
        margin-bottom: 48px;
      }

/* Study plan page. */

#plan.active {
        padding: 24px;
      }

.plan-shell {
        max-width: 1280px;
        margin: 0 auto;
        display: grid;
        grid-template-columns: minmax(0, 1fr) 320px;
        gap: 24px;
      }

.plan-builder {
        display: grid;
        gap: 32px;
        min-width: 0;
      }

.plan-step-card,
      .plan-history-card,
      .plan-insight-card {
        border: 1px solid var(--line-soft);
        border-radius: 12px;
        background: var(--surface);
        box-shadow: 0 1px 1px rgba(0, 0, 0, 0.05);
      }

.plan-step-card {
        padding: 24px;
      }

.plan-step-label,
      .plan-insight-kicker {
        color: var(--muted);
        font-family: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
        font-size: 13px;
        line-height: 16px;
        font-weight: 700;
        letter-spacing: 0.02em;
      }

.plan-goal-label {
        display: block;
        margin: 16px 0;
        color: #000000;
        font-size: 18px;
        line-height: 24px;
        font-weight: 650;
      }

.plan-goal-input {
        min-height: 112px;
        padding: 0;
        border: 0;
        background: #ffffff;
        font-size: 17px;
        line-height: 28px;
        resize: vertical;
      }

.plan-goal-input:focus {
        box-shadow: none;
      }

.plan-goal-footer,
      .plan-section-head,
      .plan-progress-row {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 16px;
      }

.plan-goal-footer {
        margin-top: 18px;
        padding-top: 16px;
        border-top: 1px solid var(--line-soft);
      }

.plan-goal-footer span,
      .plan-note {
        color: var(--muted);
        font-family: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
        font-size: 13px;
      }

.plan-section-head {
        margin-bottom: 16px;
      }

.plan-source-list {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
        gap: 14px;
        margin-top: 16px;
      }

.plan-source-card {
        min-width: 0;
        min-height: 112px;
        display: grid;
        grid-template-columns: 40px minmax(0, 1fr) 24px;
        align-items: start;
        gap: 12px;
        padding: 16px;
        border: 1px solid var(--line-soft);
        border-radius: 12px;
        background: #ffffff;
        color: var(--text);
        text-align: left;
        cursor: pointer;
      }

.plan-source-card.selected {
        border-color: var(--primary);
        box-shadow: inset 0 0 0 1px var(--primary);
      }

.plan-source-card strong {
        display: block;
        overflow: hidden;
        color: var(--text);
        text-overflow: ellipsis;
        white-space: nowrap;
      }

.plan-source-card em {
        display: block;
        margin-top: 5px;
        color: var(--muted);
        font-size: 13px;
        font-style: normal;
      }

.plan-source-check {
        color: var(--secondary);
        opacity: 0;
      }

.plan-source-card.selected .plan-source-check {
        opacity: 1;
      }

.plan-empty-source,
      .plan-empty-preview {
        display: grid;
        gap: 8px;
        padding: 22px;
        border: 1px dashed var(--line-soft);
        border-radius: 12px;
        background: var(--surface-2);
        color: var(--muted);
      }

.plan-empty-source strong,
      .plan-empty-preview strong {
        color: var(--text);
      }

.plan-duration-grid {
        display: grid;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 14px;
        margin-top: 16px;
      }

.plan-duration,
      .plan-custom-duration {
        min-height: 88px;
        display: grid;
        place-items: center;
        gap: 6px;
        padding: 14px;
        border: 1px solid var(--line-soft);
        border-radius: 12px;
        background: #ffffff;
        color: var(--text);
        text-align: center;
      }

.plan-duration.active {
        border-color: var(--primary);
        box-shadow: inset 0 0 0 1px var(--primary);
      }

.plan-duration strong {
        font-size: 18px;
      }

.plan-duration span,
      .plan-custom-duration span {
        color: var(--muted);
        font-family: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
        font-size: 10px;
        text-transform: uppercase;
      }

.plan-custom-duration .field {
        max-width: 96px;
        text-align: center;
      }

.plan-generated-card {
        padding-bottom: 32px;
      }

.plan-timeline {
        position: relative;
        display: grid;
        gap: 20px;
      }

.plan-task {
        display: grid;
        grid-template-columns: 40px minmax(0, 1fr);
        gap: 22px;
        position: relative;
      }

.plan-task::before {
        content: "";
        position: absolute;
        left: 20px;
        top: 44px;
        bottom: -20px;
        width: 1px;
        background: var(--line-soft);
      }

.plan-task:last-child::before {
        display: none;
      }

.plan-task-day {
        z-index: 1;
        width: 40px;
        height: 40px;
        display: grid;
        place-items: center;
        border-radius: 999px;
        color: #ffffff;
        background: var(--primary);
        font-family: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
        font-size: 13px;
        font-weight: 700;
      }

.plan-task.done .plan-task-day {
        background: var(--secondary);
      }

.plan-task-card {
        min-width: 0;
        padding: 20px;
        border: 1px solid var(--line-soft);
        border-radius: 12px;
        background: #ffffff;
      }

.plan-task-head {
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
        gap: 14px;
        margin-bottom: 10px;
      }

.plan-task-head h3 {
        min-width: 0;
        font-size: 18px;
        line-height: 24px;
      }

.plan-task-head span {
        flex: 0 0 auto;
        padding: 4px 8px;
        border-radius: 4px;
        background: var(--surface-2);
        color: var(--primary);
        font-family: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
        font-size: 10px;
        text-transform: uppercase;
      }

.plan-task-card p {
        color: var(--muted);
        line-height: 1.6;
      }

.plan-task-meta {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
        margin-top: 14px;
      }

.plan-task-meta span {
        padding: 5px 8px;
        border-radius: 6px;
        background: var(--surface-2);
        color: var(--muted);
        font-size: 13px;
      }

.plan-side {
        display: grid;
        align-content: start;
        gap: 24px;
        min-width: 0;
      }

.plan-velocity {
        padding: 24px;
        border-radius: 16px;
        color: #ffffff;
        background: var(--primary);
        box-shadow: 0 14px 32px rgba(15, 23, 42, 0.18);
      }

.plan-velocity > span {
        color: rgba(255, 255, 255, 0.62);
        font-family: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
        font-size: 13px;
      }

.plan-velocity h3 {
        margin: 8px 0 24px;
        font-size: 24px;
        line-height: 32px;
      }

.plan-progress-row {
        font-size: 13px;
      }

.plan-progress-track,
      .plan-mini-progress {
        overflow: hidden;
        height: 8px;
        margin-top: 10px;
        border-radius: 999px;
        background: rgba(255, 255, 255, 0.14);
      }

.plan-progress-track span,
      .plan-mini-progress span {
        display: block;
        height: 100%;
        border-radius: inherit;
        background: #ffffff;
      }

.plan-velocity .btn {
        width: 100%;
        margin-top: 22px;
        color: var(--primary);
      }

.plan-history-card,
      .plan-insight-card {
        padding: 20px;
      }

.plan-history-card h3 {
        color: var(--muted);
        font-family: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
        font-size: 13px;
        text-transform: uppercase;
      }

.plan-history-list {
        display: grid;
        gap: 14px;
      }

.plan-history-item {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        gap: 10px;
        align-items: center;
        padding-bottom: 14px;
        border-bottom: 1px solid var(--line-soft);
      }

.plan-history-item:last-child {
        padding-bottom: 0;
        border-bottom: 0;
      }

.plan-history-main {
        min-width: 0;
      }

.plan-history-title-row {
        min-width: 0;
        display: flex;
        align-items: center;
        gap: 6px;
      }

.plan-history-title-row strong {
        min-width: 0;
        flex: 1 1 auto;
        display: block;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }

.plan-version-chip {
        flex: 0 0 auto;
        padding: 2px 6px;
        border-radius: 999px;
        color: var(--muted);
        background: var(--surface-2);
        font-family: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
        font-size: 10px;
        line-height: 14px;
      }

.plan-version-chip.regenerated {
        color: #4338ca;
        background: #eef2ff;
      }

.reader-shell {
        display: grid;
        gap: 16px;
      }

.reader-hero {
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
        gap: 18px;
        padding: 22px;
        border: 1px solid var(--line-soft);
        border-radius: 8px;
        background: var(--surface);
      }

.reader-kicker,
.reader-section-title {
        display: block;
        margin-bottom: 8px;
        color: var(--muted);
        font-family: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
        font-size: 12px;
        font-weight: 700;
        letter-spacing: 0;
        text-transform: uppercase;
      }

.reader-hero h3 {
        margin: 0 0 6px;
        font-size: 24px;
        line-height: 1.25;
      }

.reader-hero p {
        margin: 0;
        color: var(--muted);
      }

.reader-actions {
        display: flex;
        flex-wrap: wrap;
        justify-content: flex-end;
        gap: 8px;
      }

.reader-layout {
        display: grid;
        grid-template-columns: minmax(220px, 280px) minmax(0, 1fr);
        gap: 16px;
        align-items: start;
      }

.reader-index-panel,
.reader-content-panel {
        border: 1px solid var(--line-soft);
        border-radius: 8px;
        background: var(--surface);
      }

.reader-index-panel {
        position: sticky;
        top: 16px;
        max-height: calc(100vh - 132px);
        display: flex;
        min-height: 0;
        flex-direction: column;
        padding: 16px;
      }

.reader-content-panel {
        min-width: 0;
        padding: 18px;
      }

.reader-chunk-index {
        display: grid;
        gap: 8px;
        min-height: 0;
        overflow-y: auto;
        overscroll-behavior: contain;
        padding-right: 4px;
      }

.reader-index-item {
        display: grid;
        gap: 4px;
        width: 100%;
        padding: 10px 12px;
        border: 1px solid var(--line-soft);
        border-radius: 8px;
        background: var(--surface-2);
        color: var(--text);
        text-align: left;
        cursor: pointer;
      }

.reader-index-item.active,
.reader-index-item:hover {
        border-color: rgba(0, 148, 136, 0.34);
        background: #eef8f6;
      }

.reader-index-item strong,
.reader-index-item span {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }

.reader-index-item span {
        color: var(--muted);
        font-size: 12px;
      }

.reader-content {
        display: block;
      }

.reader-chunk {
        padding: 0;
        border: 0;
        border-radius: 0;
        background: transparent;
      }

.reader-chunk + .reader-chunk {
        margin-top: 18px;
        padding-top: 18px;
        border-top: 1px dashed var(--line-soft);
      }

.reader-chunk.focused {
        margin-left: -18px;
        padding: 16px 0 16px 15px;
        border-left: 3px solid #009488;
        border-radius: 0 6px 6px 0;
        background: rgba(0, 148, 136, 0.05);
      }

.reader-chunk-head {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        margin-bottom: 10px;
        color: var(--muted);
        font-family: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
        font-size: 12px;
      }

.reader-chunk-head.quiet {
        display: none;
      }

.reader-chunk h4 {
        margin: 0 0 8px;
        font-size: 17px;
      }

.reader-chunk p {
        margin: 0;
        color: var(--text);
        font-size: 15px;
        line-height: 1.75;
        white-space: pre-wrap;
      }

.reader-empty {
        display: grid;
        gap: 6px;
        padding: 22px;
        border: 1px dashed var(--line);
        border-radius: 8px;
        background: var(--surface-2);
        color: var(--muted);
      }

.btn.tiny {
        min-height: 30px;
        padding: 5px 10px;
        font-size: 12px;
      }

.plan-task-action {
        justify-self: start;
        margin-top: 10px;
      }

.plan-history-main span {
        display: block;
        margin-top: 4px;
        color: var(--muted);
        font-size: 13px;
      }

.plan-mini-progress {
        height: 5px;
        background: var(--surface-2);
      }

.plan-mini-progress span {
        background: var(--secondary);
      }

.plan-history-actions {
        display: flex;
        gap: 4px;
      }

.plan-insight-card {
        background: #f5f3ff;
        border-color: #ddd6fe;
      }

.plan-insight-kicker {
        display: flex;
        align-items: center;
        gap: 8px;
        margin-bottom: 12px;
        color: #4338ca;
        font-size: 10px;
      }

.plan-insight-card p {
        color: #334155;
        font-size: 13px;
        line-height: 1.65;
      }

.page-copy h3 {
        color: #000000;
        font-size: 32px;
        line-height: 40px;
        font-weight: 700;
        letter-spacing: 0;
      }

.page-copy p {
        color: var(--muted);
        font-size: 17px;
        line-height: 28px;
      }

#library.active {
        padding: 48px;
        background: var(--bg);
      }

#assessment.active {
        padding: 48px;
        background: var(--bg);
      }

.assessment-shell {
        width: 100%;
        max-width: 1280px;
        display: flex;
        flex-direction: column;
        gap: 32px;
      }

.assessment-setup-card {
        display: flex;
        align-items: center;
        justify-content: space-between;
        flex-wrap: wrap;
        gap: 24px;
        padding: 25px;
        border: 1px solid var(--line-soft);
        border-radius: 12px;
        background: #ffffff;
        box-shadow: 0 1px 1px rgba(0, 0, 0, 0.05);
      }

.assessment-copy {
        display: grid;
        gap: 8px;
        max-width: 672px;
        flex: 1 1 340px;
      }

.assessment-copy h3 {
        color: var(--text);
        font-size: 32px;
        line-height: 40px;
        font-weight: 760;
        letter-spacing: -0.02em;
      }

.assessment-copy p {
        color: var(--muted);
        font-size: 15px;
        line-height: 24px;
      }

.assessment-controls {
        display: flex;
        align-items: center;
        justify-content: flex-end;
        flex: 1 1 420px;
        flex-wrap: wrap;
        gap: 12px;
        min-width: 0;
      }

.assessment-controls.active {
        display: flex;
      }

.assessment-controls .select {
        width: 260px;
        max-width: 100%;
        min-width: 0;
        height: 40px;
        border-radius: 8px;
        background: var(--bg);
      }

.assessment-controls .field {
        width: 72px;
        height: 40px;
        text-align: center;
        background: var(--bg);
      }

.assessment-generate {
        min-height: 40px;
        color: #ffffff;
        border-color: #4f46e5;
        background: #4f46e5;
        font-family: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
        font-size: 13px;
      }

.assessment-layout {
        display: grid;
        grid-template-columns: minmax(0, 2fr) minmax(300px, 1fr);
        gap: 32px;
        align-items: start;
      }

.assessment-quiz-column,
      .assessment-result-column {
        min-width: 0;
      }

.assessment-quiz-column {
        display: flex;
        flex-direction: column;
        gap: 24px;
      }

.assessment-result-column {
        display: flex;
        flex-direction: column;
        gap: 24px;
      }

.assessment-quiz-head,
      .assessment-progress-row {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 16px;
      }

.assessment-heading-line {
        display: flex;
        align-items: center;
        gap: 12px;
        min-width: 0;
      }

.assessment-heading-line .icon {
        width: 20px;
        height: 20px;
        color: var(--muted);
      }

.assessment-heading-line h3 {
        overflow: hidden;
        color: var(--text);
        font-size: 18px;
        line-height: 24px;
        font-weight: 700;
        text-overflow: ellipsis;
        white-space: nowrap;
      }

.assessment-pill {
        min-height: 28px;
        display: inline-flex;
        align-items: center;
        padding: 0 13px;
        border: 1px solid var(--line-soft);
        border-radius: 999px;
        color: var(--muted);
        background: #eceef0;
        font-family: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
        font-size: 13px;
        white-space: nowrap;
      }

.assessment-stepper {
        display: none;
      }

.assessment-question-list {
        display: none;
      }

.assessment-question-list.active {
        display: block;
      }

.assessment-form {
        display: flex;
        flex-direction: column;
        gap: 24px;
      }

.assessment-question-card {
        position: relative;
        padding: 25px;
        border: 1px solid var(--line-soft);
        border-radius: 12px;
        background: #ffffff;
        box-shadow: 0 1px 1px rgba(0, 0, 0, 0.05);
      }

.assessment-question-card.active::before {
        content: "";
        position: absolute;
        inset: 0 auto 0 0;
        width: 4px;
        border-radius: 12px 0 0 12px;
        background: rgba(79, 70, 229, 0.22);
      }

.assessment-question-body {
        display: flex;
        align-items: flex-start;
        gap: 12px;
      }

.assessment-question-index {
        width: 24px;
        height: 24px;
        display: inline-grid;
        place-items: center;
        flex: 0 0 auto;
        border-radius: 999px;
        color: var(--muted);
        background: #e6e8ea;
        font-family: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
        font-size: 13px;
      }

.assessment-question-content {
        display: grid;
        gap: 14px;
        min-width: 0;
        flex: 1 1 auto;
      }

.assessment-question-text {
        color: var(--text);
        font-size: 17px;
        line-height: 27.63px;
      }

.assessment-question-tags {
        display: flex;
        flex-wrap: wrap;
        gap: 6px;
      }

.assessment-question-tags span {
        min-height: 22px;
        padding: 2px 8px;
        border-radius: 999px;
        color: var(--muted);
        background: #eceef0;
        font-family: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
        font-size: 12px;
      }

.assessment-answer-area {
        display: grid;
        gap: 8px;
      }

.assessment-answer {
        min-height: 104px;
        background: var(--bg);
      }

.assessment-option {
        align-items: center;
        min-height: 52px;
        border-color: var(--line-soft);
        border-radius: 8px;
        background: var(--bg);
      }

.assessment-option:has(input:checked) {
        border: 2px solid #10b981;
        background: #f0fdf4;
      }

.assessment-submit-row {
        display: flex;
        justify-content: flex-end;
        padding-top: 8px;
      }

.assessment-submit {
        min-height: 40px;
        padding: 0 24px;
        font-family: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
        font-size: 13px;
      }

.assessment-chart-compat {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        opacity: 0;
        pointer-events: none;
      }

.assessment-result-list {
        display: flex;
        flex-direction: column;
        gap: 24px;
      }

.assessment-score-card {
        position: relative;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 8px;
        min-height: 177px;
        overflow: hidden;
        padding: 25px;
        border: 1px solid var(--line-soft);
        border-radius: 12px;
        background: linear-gradient(150deg, #eef2ff 0%, #ffffff 58%);
        box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
        text-align: center;
      }

.assessment-score-card.muted-score {
        background: #ffffff;
      }

.assessment-score-icon {
        color: #4f46e5;
      }

.assessment-score-icon .icon {
        width: 28px;
        height: 28px;
      }

.assessment-score-card h3 {
        color: var(--text);
        font-size: 18px;
        line-height: 24px;
        font-weight: 700;
      }

.assessment-score-value {
        color: var(--text);
        font-size: 48px;
        line-height: 60px;
        font-weight: 800;
      }

.assessment-score-value span {
        margin-left: 2px;
        color: var(--muted);
        font-size: 18px;
        font-weight: 400;
      }

.assessment-score-chip {
        display: inline-flex;
        align-items: center;
        gap: 4px;
        min-height: 24px;
        padding: 4px 12px;
        border-radius: 999px;
        color: #10b981;
        background: #dcfce7;
        font-family: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
        font-size: 13px;
      }

.assessment-score-chip .icon {
        width: 12px;
        height: 12px;
      }

.assessment-score-card p {
        color: var(--muted);
        font-size: 13px;
        line-height: 20px;
      }

.assessment-feedback-card,
      .assessment-history-card {
        overflow: hidden;
        border: 1px solid var(--line-soft);
        border-radius: 12px;
        background: #ffffff;
        box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
      }

.assessment-feedback-head {
        display: flex;
        align-items: center;
        gap: 8px;
        padding: 16px 20px;
        border-bottom: 1px solid var(--line-soft);
        background: var(--bg);
      }

.assessment-feedback-head h3 {
        flex: 1 1 auto;
        color: var(--text);
        font-family: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
        font-size: 13px;
        line-height: 16px;
        font-weight: 800;
      }

.assessment-feedback-head .icon {
        width: 15px;
        height: 15px;
        color: #4f46e5;
      }

.assessment-feedback-list {
        max-height: 400px;
        overflow: auto;
      }

.assessment-feedback-item {
        display: grid;
        gap: 8px;
        padding: 20px;
        border-left: 4px solid #4f46e5;
        color: var(--text);
        font-size: 13px;
        line-height: 21px;
      }

.assessment-feedback-item + .assessment-feedback-item {
        border-top: 1px solid var(--line-soft);
      }

.assessment-feedback-item.review {
        border-left-color: #b45309;
        background: #fffbeb;
      }

.assessment-feedback-item.correct {
        border-left-color: #4f46e5;
      }

.assessment-feedback-title {
        display: flex;
        align-items: center;
        gap: 8px;
        font-family: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
        font-size: 13px;
      }

.assessment-feedback-title span {
        color: #10b981;
      }

.assessment-feedback-item.review .assessment-feedback-title span {
        color: #b45309;
      }

.assessment-reference {
        color: var(--muted);
      }

.assessment-history-list {
        display: grid;
        gap: 0;
        max-height: 260px;
        overflow: auto;
      }

.assessment-history-item {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        padding: 14px 20px;
        border-top: 1px solid var(--line-soft);
      }

.assessment-history-item:first-child {
        border-top: 0;
      }

.assessment-history-title {
        overflow: hidden;
        color: var(--text);
        font-size: 14px;
        font-weight: 700;
        text-overflow: ellipsis;
        white-space: nowrap;
      }

.assessment-history-meta {
        display: flex;
        flex-wrap: wrap;
        gap: 6px;
        margin-top: 4px;
        color: var(--muted);
        font-size: 12px;
      }

.library-shell {
        width: 100%;
        max-width: 1280px;
        display: flex;
        flex-direction: column;
        gap: 48px;
      }

.library-copy {
        margin-bottom: 0;
      }

.library-copy p {
        max-width: 672px;
      }

.library-dropzone {
        min-height: 249px;
        display: flex;
        flex-direction: column;
        gap: 16px;
        align-items: center;
        justify-content: center;
        padding: 42px;
        border: 2px dashed var(--line-soft);
        border-radius: 12px;
        background: #ffffff;
      }

.library-dropzone[hidden] {
        display: none;
      }

.library-dropzone.dragging {
        border-color: #94a3b8;
        background: #f8fafc;
      }

.library-upload-icon {
        width: 64px;
        height: 64px;
        display: inline-grid;
        place-items: center;
        border-radius: 999px;
        color: var(--muted);
        background: var(--surface-2);
      }

.library-upload-copy {
        display: grid;
        gap: 4px;
        text-align: center;
      }

.library-upload-copy strong {
        margin: 0;
        color: var(--text);
        font-size: 18px;
        line-height: 24px;
        font-weight: 700;
      }

.library-upload-copy span {
        color: var(--muted);
        font-size: 15px;
        line-height: 24px;
      }

.library-upload-copy em {
        padding-top: 12px;
        color: rgba(100, 116, 139, 0.6);
        font-family: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
        font-size: 13px;
        font-style: normal;
        line-height: 16px;
      }

.library-browse {
        min-height: 36px;
        padding: 0 24px;
      }

.upload-state {
        position: absolute;
        width: 1px;
        height: 1px;
        margin: -1px;
        overflow: hidden;
        clip: rect(0 0 0 0);
      }

.library-grid-section {
        display: flex;
        flex-direction: column;
        gap: 16px;
      }

.library-section-head {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding-bottom: 9px;
        border-bottom: 1px solid var(--line-soft);
      }

.library-section-head h3 {
        color: var(--text);
        font-size: 18px;
        line-height: 24px;
        font-weight: 700;
      }

.document-card-grid {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 24px;
      }

.document-card {
        min-width: 0;
        min-height: 219px;
        display: flex;
        flex-direction: column;
        gap: 16px;
        padding: 21px;
        border: 1px solid var(--line-soft);
        border-radius: 12px;
        background: #ffffff;
      }

.document-card.failed {
        border-color: rgba(239, 68, 68, 0.3);
        background: rgba(255, 218, 214, 0.1);
      }

.document-card-main {
        display: flex;
        align-items: center;
        gap: 12px;
        min-width: 0;
      }

.doc-file-icon {
        width: 40px;
        height: 40px;
        display: inline-grid;
        place-items: center;
        flex: 0 0 auto;
        border-radius: 4px;
        font-family: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
        font-size: 10px;
        font-weight: 800;
      }

.doc-file-icon.pdf {
        color: #ef4444;
        background: #fef2f2;
      }

.doc-file-icon.pptx {
        color: #f97316;
        background: #fff7ed;
      }

.doc-file-icon.md {
        color: #475569;
        background: #e6e8ea;
      }

.doc-file-icon.docx {
        color: #3b82f6;
        background: #eff6ff;
      }

.doc-file-icon.txt {
        color: #0d9488;
        background: #ecfdf5;
      }

.doc-title-block {
        min-width: 0;
        overflow: hidden;
      }

.doc-title-block h4 {
        overflow: hidden;
        color: var(--text);
        font-size: 18px;
        line-height: 24px;
        font-weight: 700;
        text-overflow: ellipsis;
        white-space: nowrap;
      }

.doc-title-block p {
        color: var(--muted);
        font-family: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
        font-size: 13px;
        line-height: 16px;
      }

.doc-progress-area {
        display: flex;
        flex: 1 1 auto;
        flex-direction: column;
        justify-content: flex-end;
        gap: 8px;
        min-height: 62px;
      }

.doc-progress-row {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
      }

.doc-status-chip {
        display: inline-flex;
        align-items: center;
        gap: 4px;
        min-height: 20px;
        padding: 2px 8px;
        border-radius: 4px;
        font-family: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
        font-size: 13px;
        line-height: 16px;
      }

.doc-status-chip .icon {
        width: 12px;
        height: 12px;
      }

.doc-status-chip.ready {
        color: #10b981;
        background: rgba(16, 185, 129, 0.1);
      }

.doc-status-chip.indexing {
        color: #3b82f6;
        background: rgba(59, 130, 246, 0.1);
      }

.doc-status-chip.failed {
        color: #ef4444;
        background: #ffdad6;
      }

.doc-percent {
        color: var(--muted);
        font-family: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
        font-size: 13px;
      }

.doc-progress-track {
        height: 6px;
        overflow: hidden;
        border-radius: 999px;
        background: #e6e8ea;
      }

.doc-progress-track span {
        display: block;
        height: 100%;
        border-radius: 999px;
      }

.doc-progress-track .ready {
        background: #10b981;
      }

.doc-progress-track .indexing {
        background: #3b82f6;
      }

.doc-progress-track .failed {
        background: #ef4444;
      }

.doc-error {
        padding-top: 4px;
        color: #ef4444;
        font-family: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
        font-size: 12px;
        line-height: 16px;
      }

.doc-card-actions {
        display: flex;
        align-items: center;
        justify-content: space-between;
        flex-wrap: wrap;
        gap: 8px;
        padding-top: 13px;
        border-top: 1px solid var(--line-soft);
      }

.doc-icon-actions {
        display: flex;
        align-items: center;
        gap: 8px;
      }

.doc-retry,
.doc-read {
        display: inline-flex;
        align-items: center;
        gap: 4px;
        min-height: 28px;
        padding: 0 12px;
        border: 0;
        border-radius: 4px;
        background: transparent;
        cursor: pointer;
        font-family: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
        font-size: 13px;
      }

.doc-retry {
        color: #ef4444;
      }

.doc-read {
        color: var(--text);
      }

.doc-retry:hover {
        background: rgba(239, 68, 68, 0.08);
      }

.doc-read:hover {
        background: var(--surface-2);
      }

.doc-retry .icon,
.doc-read .icon {
        width: 12px;
        height: 12px;
      }

.library-empty {
        grid-column: 1 / -1;
        min-height: 140px;
        display: grid;
        place-items: center;
        gap: 8px;
        padding: 28px;
        border: 1px dashed var(--line-soft);
        border-radius: 12px;
        color: var(--muted);
        background: #ffffff;
        text-align: center;
      }

.library-empty strong {
        color: var(--text);
      }

#progress.active {
        padding: 24px 26.5px 96px;
        background: var(--bg);
      }

.progress-shell {
        width: 100%;
        max-width: 1280px;
        display: flex;
        flex-direction: column;
        gap: 48px;
      }

.progress-hero {
        display: grid;
        gap: 8px;
        max-width: 768px;
      }

.progress-hero h3 {
        color: #000000;
        font-size: 32px;
        line-height: 40px;
        font-weight: 800;
        letter-spacing: 0;
      }

.progress-hero p {
        color: var(--muted);
        font-size: 17px;
        line-height: 28px;
      }

.progress-report-grid {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        grid-template-rows: 511px 400px;
        grid-template-areas:
          "mastery mastery profile"
          "focus report report";
        gap: 24px;
      }

.progress-card {
        min-width: 0;
        overflow: hidden;
        border: 1px solid var(--line-soft);
        border-radius: 12px;
        background: #ffffff;
        box-shadow: 0 1px 1px rgba(0, 0, 0, 0.05);
      }

.mastery-panel {
        grid-area: mastery;
        display: flex;
        flex-direction: column;
        gap: 24px;
        padding: 25px;
      }

.profile-panel {
        position: relative;
        grid-area: profile;
        display: flex;
        flex-direction: column;
        gap: 24px;
        padding: 25px;
        border-color: #c0c1ff;
        background: #f5f3ff;
        overflow: auto;
      }

.profile-panel::after {
        content: "";
        position: absolute;
        top: -32px;
        right: -32px;
        width: 128px;
        height: 128px;
        border-radius: 999px;
        background: #e1e0ff;
        opacity: 0.5;
        filter: blur(32px);
        pointer-events: none;
      }

.focus-panel {
        grid-area: focus;
        display: flex;
        flex-direction: column;
        gap: 16px;
        padding: 25px;
      }

.report-panel {
        grid-area: report;
        display: flex;
        flex-direction: column;
        padding: 0;
      }

.document-progress-panel {
        display: none;
      }

.progress-card-head,
      .report-card-head {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 16px;
      }

.progress-card-head h3,
      .report-card-head h3 {
        color: #000000;
        font-size: 18px;
        line-height: 24px;
        font-weight: 700;
      }

.progress-card-head p {
        margin-top: 4px;
        color: var(--muted);
        font-family: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
        font-size: 13px;
        line-height: 16px;
      }

.progress-title-with-icon {
        display: flex;
        align-items: center;
        gap: 12px;
        min-width: 0;
      }

.progress-title-with-icon .icon {
        width: 16px;
        height: 16px;
        color: #4f46e5;
      }

.profile-panel .progress-title-with-icon h3 {
        color: #07006c;
      }

.progress-pill {
        min-height: 24px;
        padding: 4px 12px;
        border-radius: 999px;
        color: #000000;
        background: #eceef0;
        font-family: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
        font-size: 13px;
        line-height: 16px;
        cursor: pointer;
      }

.mastery-chart-wrap {
        height: 300px;
        display: grid;
        place-items: center;
        border: 1px solid var(--line-soft);
        border-radius: 8px;
        background: var(--surface-2);
      }

.mastery-chart-wrap .chart {
        width: min(300px, 100%);
        height: 272px;
        border: 0;
        background: transparent;
      }

.mastery-stat-grid {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 16px;
        padding-top: 25px;
        border-top: 1px solid var(--line-soft);
      }

.mastery-stat-cell {
        display: flex;
        align-items: flex-start;
        gap: 4px;
        min-width: 0;
      }

.mastery-stat-cell div {
        min-width: 0;
      }

.mastery-dot {
        width: 8px;
        height: 8px;
        flex: 0 0 auto;
        margin-top: 4px;
        border-radius: 999px;
      }

.mastery-dot.strong {
        background: #006a61;
      }

.mastery-dot.developing {
        background: #f59e0b;
      }

.mastery-dot.active {
        background: #3b82f6;
      }

.mastery-stat-cell p {
        color: var(--muted);
        font-family: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
        font-size: 13px;
        line-height: 16px;
      }

.mastery-stat-cell strong {
        display: block;
        overflow: hidden;
        margin-top: 4px;
        color: #000000;
        font-size: 16px;
        line-height: 24px;
        font-weight: 700;
        text-overflow: ellipsis;
        white-space: nowrap;
      }

.focus-copy {
        color: var(--muted);
        font-size: 15px;
        line-height: 24px;
      }

.focus-chip-list {
        display: flex;
        flex-direction: column;
        gap: 8px;
      }

.focus-chip {
        width: fit-content;
        max-width: 100%;
        min-height: 30px;
        display: inline-flex;
        align-items: center;
        gap: 8px;
        padding: 7px 13px;
        border: 1px solid var(--line-soft);
        border-radius: 6px;
        color: #000000;
        background: var(--bg);
        font-family: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
        font-size: 13px;
        line-height: 16px;
      }

.focus-chip span {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }

.focus-chip strong {
        color: var(--muted);
        font-weight: 600;
      }

.focus-action {
        width: 100%;
        min-height: 34px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        margin-top: auto;
        border: 1px solid var(--line-soft);
        border-radius: 8px;
        color: var(--muted);
        background: #ffffff;
        font-family: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
        font-size: 13px;
        cursor: pointer;
      }

.profile-insight-list {
        position: relative;
        z-index: 1;
      }

.profile-insight-card {
        display: grid;
        gap: 20px;
      }

.profile-insight-section {
        display: grid;
        gap: 4px;
      }

.profile-insight-section h4,
      .recent-profile-note h4 {
        color: #7073ff;
        opacity: 0.9;
        font-family: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
        font-size: 13px;
        line-height: 16px;
        font-weight: 700;
        letter-spacing: 0.325px;
      }

.profile-insight-section p {
        color: #000000;
        font-size: 15px;
        line-height: 24px;
      }

.recent-profile-note {
        display: grid;
        gap: 8px;
      }

.recent-profile-note p {
        padding: 13px;
        border: 1px solid #ffffff;
        border-radius: 8px;
        color: #000000;
        background: rgba(255, 255, 255, 0.6);
        font-size: 13px;
        font-style: italic;
        line-height: 18px;
      }

.report-card-head {
        min-height: 66px;
        padding: 16px 24px;
        border-bottom: 1px solid var(--line-soft);
      }

.report-actions {
        display: flex;
        align-items: center;
        gap: 8px;
      }

.report-generate {
        min-height: 34px;
        font-family: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
        font-size: 13px;
      }

.report-generate {
        color: #ffffff;
        background: #000000;
      }

.report-controls {
        display: flex;
        flex-wrap: wrap;
        flex: 1 1 auto;
        gap: 8px;
        min-width: 0;
      }

.report-controls .field {
        min-height: 34px;
        max-width: 150px;
        background: var(--bg);
      }

.report-history-list {
        flex: 1 1 auto;
        min-height: 0;
        overflow: auto;
      }

.report-history-item {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        padding: 12px 16px;
        border-top: 1px solid var(--line-soft);
      }

.report-history-item:first-child {
        border-top: 0;
      }

.report-history-title {
        overflow: hidden;
        color: #000000;
        font-size: 14px;
        line-height: 20px;
        font-weight: 700;
        text-overflow: ellipsis;
        white-space: nowrap;
      }

.report-history-meta {
        color: var(--muted);
        font-size: 12px;
        line-height: 18px;
      }

.report-history-actions {
        display: flex;
        gap: 6px;
        flex: 0 0 auto;
      }

.settings-shell {
        max-width: 1000px;
        margin: 0 auto;
        padding-bottom: 72px;
      }

.settings-hero {
        margin-bottom: 48px;
      }

.settings-hero h3 {
        max-width: 760px;
        color: #1e293b;
        font-size: 32px;
        line-height: 40px;
        font-weight: 800;
      }

.settings-hero p {
        max-width: 616px;
        margin-top: 8px;
        color: #64748b;
        font-size: 17px;
        line-height: 28px;
      }

.settings-layout {
        display: grid;
        grid-template-columns: minmax(0, 2fr) minmax(320px, 1fr);
        gap: 24px;
        align-items: start;
      }

.settings-column {
        display: grid;
        gap: 24px;
        min-width: 0;
      }

.settings-card {
        min-width: 0;
        padding: 25px;
        border: 1px solid var(--line-soft);
        border-radius: 12px;
        background: #ffffff;
        box-shadow: 0 1px 1px rgba(0, 0, 0, 0.05);
      }

.settings-card h3 {
        color: #1e293b;
        font-size: 18px;
        line-height: 24px;
        font-weight: 700;
      }

.settings-card-head {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 16px;
      }

.settings-card-copy {
        margin-top: 4px;
        color: #64748b;
        font-size: 15px;
        line-height: 24px;
      }

.account-profile-body {
        display: grid;
        grid-template-columns: 180px minmax(0, 1fr);
        gap: 24px;
        align-items: start;
        margin-top: 20px;
      }

.account-avatar-wrap {
        display: grid;
        gap: 12px;
        justify-items: start;
      }

.account-avatar-preview {
        width: 96px;
        height: 96px;
        border: 1px solid var(--line-soft);
        border-radius: 999px;
        background: #e0e3e5;
        background-image: linear-gradient(135deg, #e5e7eb, #cfd5dd);
        background-size: cover;
        background-position: center;
      }

.account-avatar-preview.has-avatar {
        background-image: var(--avatar-image);
      }

.account-avatar-wrap .btn {
        min-height: 36px;
      }

.account-avatar-wrap p {
        max-width: 180px;
        color: #64748b;
        font-size: 12px;
        line-height: 18px;
      }

.account-profile-form {
        display: grid;
        gap: 14px;
      }

.account-profile-form label {
        display: grid;
        gap: 7px;
        color: #64748b;
        font-family: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
        font-size: 12px;
        font-weight: 700;
        text-transform: uppercase;
      }

.account-profile-form .btn {
        justify-self: start;
      }

.admin-user-list {
        display: grid;
        gap: 10px;
        margin-top: 18px;
      }

.users-shell {
        display: grid;
        gap: 18px;
        max-width: 980px;
        margin: 0 auto;
      }

.users-hero,
      .registered-users-card {
        border: 1px solid var(--line-soft);
        border-radius: 10px;
        background: #ffffff;
        box-shadow: 0 18px 50px rgba(15, 23, 42, 0.04);
      }

.users-hero {
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
        gap: 18px;
        padding: 26px;
      }

.users-hero h3 {
        margin: 8px 0 8px;
        color: #1e293b;
        font-size: 26px;
        line-height: 32px;
      }

.users-hero p {
        max-width: 720px;
        margin: 0;
        color: #64748b;
        line-height: 24px;
      }

.registered-users-card {
        padding: 20px;
      }

.admin-user-summary {
        color: #64748b;
        font-family: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
        font-size: 12px;
        font-weight: 700;
        text-transform: uppercase;
      }

.admin-user-item {
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 16px;
        padding: 14px;
        border: 1px solid var(--line-soft);
        border-radius: 10px;
        background: var(--surface-2);
        color: inherit;
        cursor: pointer;
        text-align: left;
      }

.admin-user-item:hover,
      .admin-user-item.selected {
        border-color: #b8b2ff;
        background: #f7f5ff;
      }

.admin-user-label,
      .admin-user-item strong,
      .admin-user-item span,
      .admin-user-item small {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }

.admin-user-main {
        display: grid;
        gap: 4px;
        min-width: 0;
      }

.admin-user-label {
        color: #64748b;
        font-family: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
        font-size: 11px;
        font-weight: 800;
        letter-spacing: 0;
        text-transform: uppercase;
      }

.admin-user-item strong {
        color: #1e293b;
        font-size: 14px;
        line-height: 20px;
      }

.admin-user-item span,
      .admin-user-item small {
        color: #64748b;
        font-size: 12px;
        line-height: 16px;
      }

.admin-user-meta {
        display: grid;
        justify-items: end;
        gap: 4px;
        flex: 0 0 auto;
      }

.user-status-chip {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-width: 66px;
        padding: 4px 8px;
        border-radius: 999px;
        font-family: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
        font-size: 11px;
        font-weight: 800;
        line-height: 14px;
      }

.user-status-chip.active {
        border: 1px solid rgba(13, 148, 136, 0.18);
        background: #ecfdf5;
        color: #047857;
      }

.user-status-chip.disabled {
        border: 1px solid rgba(220, 38, 38, 0.18);
        background: #fef2f2;
        color: #b91c1c;
      }

.admin-user-detail {
        position: fixed;
        top: 92px;
        right: 24px;
        z-index: 35;
        width: min(380px, calc(100vw - 48px));
        max-height: calc(100vh - 116px);
        overflow: auto;
        padding: 22px;
        border: 1px solid var(--line-soft);
        border-radius: 12px;
        background: #ffffff;
        box-shadow: 0 24px 80px rgba(15, 23, 42, 0.18);
      }

.admin-user-detail-head {
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
        gap: 14px;
        padding-bottom: 18px;
        border-bottom: 1px solid var(--line-soft);
      }

.admin-user-detail-head h3 {
        margin: 6px 0 0;
        color: #1e293b;
        font-size: 22px;
        line-height: 28px;
      }

#closeAdminUserDetail .icon {
        transform: rotate(45deg);
      }

.admin-user-detail-body {
        display: grid;
        gap: 18px;
        padding-top: 20px;
      }

.admin-detail-avatar {
        width: 78px;
        height: 78px;
        border-radius: 999px;
        border: 1px solid var(--line-soft);
        background:
          linear-gradient(135deg, rgba(99, 102, 241, 0.12), rgba(13, 148, 136, 0.12)),
          #eef2f7;
      }

.admin-detail-avatar.has-avatar {
        background-image: var(--avatar-image);
        background-size: cover;
        background-position: center;
      }

.admin-detail-list {
        display: grid;
        gap: 12px;
      }

.admin-detail-list div {
        display: grid;
        gap: 5px;
        padding: 12px;
        border: 1px solid var(--line-soft);
        border-radius: 10px;
        background: var(--surface-2);
      }

.admin-detail-list dt {
        color: #64748b;
        font-family: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
        font-size: 11px;
        font-weight: 800;
        letter-spacing: 0;
        text-transform: uppercase;
      }

.admin-detail-list dd {
        min-width: 0;
        margin: 0;
        overflow: hidden;
        color: #1e293b;
        font-size: 14px;
        font-weight: 700;
        line-height: 20px;
        text-overflow: ellipsis;
        white-space: nowrap;
      }

.admin-detail-actions {
        display: grid;
        gap: 8px;
      }

.admin-detail-actions .btn {
        width: 100%;
        justify-content: center;
      }

.admin-detail-actions .btn.danger {
        border-color: rgba(220, 38, 38, 0.2);
        background: #b91c1c;
        color: #ffffff;
      }

.admin-detail-actions .btn:disabled {
        cursor: not-allowed;
        opacity: 0.56;
      }

.admin-detail-actions p {
        margin: 0;
        color: #64748b;
        font-size: 12px;
        line-height: 18px;
      }

.admin-detail-note {
        margin: 0;
        padding: 12px;
        border-left: 4px solid #0d9488;
        border-radius: 8px;
        background: #f0fdfa;
        color: #475569;
        line-height: 21px;
      }

.model-option {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 16px;
        min-height: 72px;
        margin-top: 16px;
        padding: 16px;
        border: 1px solid var(--line-soft);
        border-radius: 8px;
        background: #ffffff;
      }

.model-option.disabled {
        opacity: 0.62;
        background: var(--surface-2);
      }

.model-option.failed {
        border-color: rgba(220, 38, 38, 0.24);
        background: #fff7f7;
      }

.model-option-title {
        display: flex;
        align-items: center;
        gap: 12px;
        color: #1e293b;
        font-size: 14px;
        line-height: 20px;
        font-weight: 700;
      }

.model-option p {
        margin-top: 4px;
        color: #64748b;
        font-size: 14px;
        line-height: 20px;
      }

.model-option .model-option-warning {
        color: #b91c1c;
        font-size: 12px;
        line-height: 18px;
      }

.model-option em {
        padding: 0 12px;
        color: #e2e8f0;
        font-style: normal;
      }

.model-form {
        display: grid;
        gap: 16px;
        margin-top: 18px;
        padding: 16px;
        border: 1px solid var(--line-soft);
        border-radius: 12px;
        background: var(--surface-2);
      }

.model-form[hidden] {
        display: none;
      }

.model-provider-picker {
        display: grid;
        grid-template-columns: repeat(5, minmax(0, 1fr));
        gap: 10px;
      }

.model-provider-card {
        min-height: 78px;
        padding: 13px 14px;
        color: var(--text);
        text-align: left;
        background: #f8fafc;
        border: 1px solid var(--line-soft);
        border-radius: 10px;
        cursor: pointer;
      }

.model-provider-card strong,
      .model-provider-card span {
        display: block;
      }

.model-provider-card strong {
        font-size: 14px;
        font-weight: 850;
        line-height: 18px;
      }

.model-provider-card span {
        margin-top: 6px;
        color: var(--muted);
        font-size: 12px;
        line-height: 16px;
      }

.model-provider-card.active {
        background: #ffffff;
        border-color: #050505;
        box-shadow: inset 4px 0 0 #050505;
      }

.model-form-grid {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        column-gap: 12px;
        row-gap: 10px;
      }

.model-form-grid label,
      .model-form-options label {
        display: grid;
        gap: 6px;
        color: var(--muted);
        font-family: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
        font-size: 12px;
        font-weight: 700;
      }

.model-form-grid .wide {
        grid-column: 1 / -1;
      }

.model-form-options,
      .model-form-actions,
      .model-actions {
        display: flex;
        align-items: center;
        gap: 10px;
        flex-wrap: wrap;
      }

.model-form-options label {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        text-transform: none;
      }

.model-advanced {
        overflow: hidden;
        background: #f8fafc;
        border: 1px solid var(--line-soft);
        border-radius: 10px;
      }

.model-advanced summary {
        padding: 13px 14px;
        color: var(--text);
        font-weight: 850;
        cursor: pointer;
      }

.model-advanced .model-form-grid {
        padding: 0 14px 14px;
      }

.field.invalid,
      .select.invalid {
        border-color: var(--red);
        box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.1);
      }

.field-error {
        display: none;
        color: var(--red);
        font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
        font-size: 12px;
        font-weight: 750;
        line-height: 16px;
        text-transform: none;
      }

.field-error:not(:empty) {
        display: block;
      }

.model-list {
        display: grid;
        gap: 12px;
        margin-top: 18px;
      }

.model-empty {
        display: grid;
        gap: 8px;
        padding: 18px;
        border: 1px dashed var(--line-soft);
        border-radius: 12px;
        background: var(--surface-2);
        color: var(--muted);
      }

.model-empty strong {
        color: var(--text);
      }

.model-chip {
        display: inline-flex;
        align-items: center;
        min-height: 24px;
        margin: 8px 8px 0 0;
        padding: 0 8px;
        border-radius: 999px;
        color: var(--primary);
        background: rgba(99, 102, 241, 0.1);
        font-family: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
        font-size: 11px;
        font-weight: 700;
      }

.memory-row {
        display: grid;
        grid-template-columns: minmax(0, 1fr) 52px;
        gap: 24px;
        align-items: start;
        margin-top: 24px;
      }

.memory-row h4 {
        color: #1e293b;
        font-size: 15px;
        line-height: 24px;
        font-weight: 700;
      }

.memory-row p {
        max-width: 540px;
        margin-top: 4px;
        color: #64748b;
        font-size: 14px;
        line-height: 20px;
      }

.settings-toggle {
        width: 44px;
        height: 24px;
        display: inline-flex;
        align-items: center;
        padding: 2px;
        border-radius: 999px;
        background: #cbd5e1;
      }

.settings-toggle span {
        width: 20px;
        height: 20px;
        border-radius: 999px;
        background: #ffffff;
        box-shadow: 0 1px 2px rgba(15, 23, 42, 0.2);
      }

.settings-toggle.active {
        justify-content: flex-end;
        background: #0d9488;
      }

.embedding-box {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 24px;
        margin-top: 40px;
        padding: 16px;
        border: 1px solid var(--line-soft);
        border-radius: 8px;
        background: #f8fafc;
      }

.embedding-box span {
        display: block;
        color: #64748b;
        font-family: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
        font-size: 13px;
        line-height: 16px;
        font-weight: 700;
      }

.embedding-box strong {
        display: block;
        margin-top: 20px;
        color: #1e293b;
        font-size: 15px;
        line-height: 24px;
        font-weight: 700;
      }

.embedding-box p {
        margin-top: 4px;
        color: #64748b;
        font-size: 13px;
        line-height: 16px;
      }

.embedding-meta {
        text-align: right;
      }

.embedding-meta strong {
        margin-top: 0;
        color: #006f66;
        font-size: 12px;
        line-height: 16px;
      }

.settings-side-column {
        gap: 24px;
      }

.health-list {
        display: grid;
        gap: 16px;
        margin-top: 24px;
      }

.health-row {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 16px;
      }

.health-row span {
        color: #1e293b;
        font-size: 14px;
        line-height: 20px;
        font-weight: 600;
      }

.health-row strong {
        color: #64748b;
        font-size: 12px;
        line-height: 16px;
        font-weight: 700;
        text-align: right;
      }

.health-row strong[data-status="ok"] {
        color: #006f66;
      }

.health-row strong[data-status="warn"] {
        color: #a8792f;
      }

.health-row strong[data-status="error"] {
        color: #b42318;
      }

.index-stat {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 16px;
        margin-top: 24px;
      }

.index-stat span {
        color: #1e293b;
        font-size: 14px;
        line-height: 20px;
        font-weight: 600;
      }

.index-stat strong {
        color: #000000;
        font-size: 18px;
        line-height: 24px;
        font-weight: 800;
      }

.index-progress {
        height: 8px;
        margin-top: 24px;
        overflow: hidden;
        border-radius: 999px;
        background: #e2e8f0;
      }

.index-progress span {
        width: 0;
        height: 100%;
        display: block;
        border-radius: inherit;
        background: #0d9488;
      }

.settings-index-card p {
        margin-top: 12px;
        color: #64748b;
        font-size: 12px;
        line-height: 16px;
      }

.settings-version-card {
        display: grid;
        justify-items: center;
        padding: 48px 25px;
        text-align: center;
      }

.settings-logo-mark {
        width: 56px;
        height: 56px;
        display: grid;
        place-items: center;
        margin-bottom: 16px;
        border-radius: 16px;
        color: #ffffff;
        background: #07006c;
      }

.settings-version-card h3 {
        font-size: 15px;
        line-height: 24px;
      }

.settings-version-card p,
      .settings-version-card span {
        color: #64748b;
        font-size: 12px;
        line-height: 16px;
      }

.textarea {
        min-height: 108px;
        padding: 11px 12px;
        resize: vertical;
        line-height: 1.55;
      }

.stepper {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
        margin-bottom: 14px;
      }

.assessment-stage {
        display: none;
      }

.assessment-stage.active {
        display: block;
      }

#assessment .assessment-controls.active {
        display: flex;
      }

#assessment .assessment-stepper {
        display: none;
      }

.option {
        display: flex;
        gap: 10px;
        align-items: flex-start;
        padding: 10px;
        border: 1px solid var(--line);
        border-radius: 7px;
        cursor: pointer;
      }

.option:has(input:checked) {
        border-color: #565e74;
        background: var(--surface-2);
      }

.stat {
        padding: 18px;
        border: 1px solid var(--line-soft);
        border-radius: 12px;
        background: var(--surface);
        box-shadow: 0 1px 1px rgba(0, 0, 0, 0.05);
      }

.stat .value {
        margin-top: 8px;
        font-size: 28px;
        font-weight: 780;
        color: var(--text);
      }

.profile-grid {
        display: grid;
        gap: 12px;
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }

.profile-field {
        padding: 12px;
        border: 1px solid var(--line-soft);
        border-radius: 12px;
        background: var(--surface-2);
        line-height: 1.65;
      }

.profile-note {
        margin-top: 12px;
      }

.onboarding-card {
        padding: 22px;
        border: 1px solid var(--line-soft);
        border-radius: 12px;
        background: var(--surface);
        box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
      }

.onboarding-card h3 {
        margin-bottom: 8px;
        font-size: 19px;
      }

.onboarding-steps {
        display: grid;
        gap: 8px;
        margin: 16px 0;
      }

.onboarding-step,
      .guided-question {
        width: 100%;
        display: flex;
        align-items: flex-start;
        gap: 10px;
        padding: 10px 11px;
        border: 1px solid var(--line-soft);
        border-radius: 8px;
        color: var(--text);
        background: var(--surface-2);
        text-align: left;
        line-height: 1.5;
      }

.onboarding-step strong {
        color: var(--text);
        white-space: nowrap;
      }

.guided-chat {
        display: grid;
        gap: 14px;
      }

.guided-intro {
        padding: 16px;
        border: 1px solid var(--line-soft);
        border-radius: 12px;
        background: #ffffff;
      }

.guided-intro h3 {
        margin-bottom: 6px;
        font-size: 18px;
      }

.guided-questions {
        display: grid;
        gap: 9px;
      }

.guided-question {
        cursor: pointer;
      }

.guided-question:hover {
        border-color: var(--line);
        background: #ffffff;
      }

@media (max-width: 1080px) {
        .plan-shell {
          grid-template-columns: 1fr;
        }

        body[data-active-tab="study"] {
          overflow: auto;
        }

        body[data-active-tab="study"] .app,
        body[data-active-tab="study"] .main {
          height: auto;
          min-height: 100vh;
          overflow: visible;
        }

        body[data-active-tab="study"] #study {
          padding: 0;
          overflow: auto;
        }

        body[data-active-tab="study"] .study-grid {
          height: auto;
          grid-template-columns: 1fr;
        }

        body[data-active-tab="study"] .study-history-panel,
        body[data-active-tab="study"] .study-context-panel,
        body[data-active-tab="study"] .study-chat-panel {
          height: auto;
          min-height: 0;
          border-width: 0 0 1px;
        }

        body[data-active-tab="study"] .study-context-panel {
          border-width: 1px 0 0;
        }

        body[data-active-tab="study"] .chat-box {
          min-height: 360px;
        }
      }

@media (max-width: 960px) {
        .app {
          grid-template-columns: 1fr;
        }

        .sidebar {
          position: static;
          height: auto;
          padding: 18px;
          border-right: 0;
          border-bottom: 1px solid var(--line-soft);
        }

        .nav {
          grid-template-columns: repeat(auto-fit, minmax(44px, 1fr));
        }

        .nav button {
          justify-content: center;
          padding: 10px 8px;
        }

        .nav .nav-label {
          display: none;
        }

        .topbar,
        .users-hero,
        .grid.two,
        .study-grid,
        .grid.three,
        .profile-grid,
        .progress-report-grid,
        .reader-layout,
        .settings-layout {
          grid-template-columns: 1fr;
        }

        .admin-user-detail {
          inset: auto 14px 14px;
          width: auto;
          max-height: 82vh;
        }

        .account-profile-body {
          grid-template-columns: 1fr;
        }

        .model-provider-picker {
          grid-template-columns: repeat(2, minmax(0, 1fr));
        }

        .reader-hero {
          align-items: stretch;
          flex-direction: column;
        }

        .reader-actions {
          justify-content: flex-start;
        }

        .reader-index-panel {
          position: static;
          max-height: none;
        }

        .progress-report-grid {
          grid-template-rows: auto;
          grid-template-areas:
            "mastery"
            "profile"
            "focus"
            "report";
        }

        .mastery-panel,
        .profile-panel,
        .focus-panel,
        .report-panel {
          min-height: 0;
        }

        .mastery-stat-grid {
          grid-template-columns: 1fr;
        }

        .study-workspace {
          min-height: 0;
        }

        body[data-active-tab="study"] {
          overflow: auto;
        }

        body[data-active-tab="study"] .app,
        body[data-active-tab="study"] .main {
          height: auto;
          min-height: 100vh;
          overflow: visible;
        }

        body[data-active-tab="study"] #study {
          padding: 0;
          overflow: auto;
        }

        body[data-active-tab="study"] .study-grid {
          height: auto;
          grid-template-columns: 1fr;
        }

        body[data-active-tab="study"] .study-history-panel,
        body[data-active-tab="study"] .study-context-panel,
        body[data-active-tab="study"] .study-chat-panel {
          height: auto;
          min-height: 0;
          border-width: 0 0 1px;
        }

        body[data-active-tab="study"] .study-context-panel {
          border-width: 1px 0 0;
        }

        .chat-box {
          height: min(62vh, 560px);
        }

        .topbar {
          align-items: flex-start;
          flex-direction: column;
        }

        #library.active {
          padding: 32px 24px 72px;
        }

        .document-card-grid {
          grid-template-columns: repeat(2, minmax(0, 1fr));
        }

        #assessment.active {
          padding: 32px 24px 72px;
        }

        .assessment-setup-card {
          align-items: stretch;
          flex-direction: column;
        }

        .assessment-controls {
          flex-wrap: wrap;
          justify-content: flex-start;
          width: 100%;
          min-width: 0;
        }

        .assessment-controls .select {
          flex: 1 1 240px;
          width: auto;
        }

        .assessment-layout {
          grid-template-columns: 1fr;
        }
      }

@media (max-width: 640px) {
        #reader.active {
          padding: 24px 16px 56px;
        }

        .reader-actions,
        .reader-chunk-head {
          align-items: stretch;
          flex-direction: column;
        }

        .reader-actions .btn {
          width: 100%;
        }

        #plan.active {
          padding: 24px 16px 56px;
        }

        .plan-step-card,
        .plan-history-card,
        .plan-insight-card,
        .plan-velocity {
          padding: 16px;
        }

        .plan-goal-footer,
        .plan-section-head,
        .plan-task-head {
          align-items: stretch;
          flex-direction: column;
        }

        .plan-duration-grid,
        .plan-source-list {
          grid-template-columns: 1fr;
        }

        .plan-task {
          grid-template-columns: 32px minmax(0, 1fr);
          gap: 14px;
        }

        .plan-task-day {
          width: 32px;
          height: 32px;
        }

        .plan-task::before {
          left: 16px;
          top: 36px;
        }

        .main {
          padding: 18px 14px 30px;
        }

        .grid.two,
        .grid.three {
          display: grid;
          grid-template-columns: 1fr;
        }

        .panel {
          padding: 14px;
        }

        .message {
          max-width: 100%;
        }

        .row.mobile-stack {
          align-items: stretch;
          flex-direction: column;
        }

        .study-controls {
          grid-template-columns: 1fr;
        }

        body[data-active-tab="study"] .study-controls {
          height: auto;
          align-items: stretch;
          flex-direction: column;
          padding: 12px 16px;
        }

        body[data-active-tab="study"] .study-controls .control-card,
        body[data-active-tab="study"] .study-controls .control-card:first-child,
        body[data-active-tab="study"] .study-controls .control-card:nth-child(2) {
          width: 100%;
          max-width: none;
          min-width: 0;
        }

        body[data-active-tab="study"] .study-controls .select {
          width: 100%;
        }

        .composer-actions {
          align-items: stretch;
          flex-direction: column;
        }

        .composer-buttons,
        .composer-actions .btn {
          width: 100%;
        }

        .composer-buttons {
          display: grid;
          grid-template-columns: 1fr;
        }

        #library.active {
          padding: 24px 14px 56px;
        }

        .library-shell {
          gap: 28px;
        }

        .library-dropzone {
          min-height: 220px;
          padding: 28px 18px;
        }

        .document-card-grid {
          grid-template-columns: 1fr;
        }

        .document-card-grid > *,
        .document-card {
          min-width: 0;
        }

        #assessment.active {
          padding: 24px 16px 56px;
        }

        .assessment-controls {
          display: grid;
          grid-template-columns: 1fr;
        }

        .model-provider-picker,
        .model-form-grid {
          grid-template-columns: 1fr;
        }

        #assessment .assessment-controls.active {
          display: grid;
        }

        .assessment-controls .select,
        .assessment-controls .field,
        .assessment-generate {
          width: 100%;
        }

        .assessment-question-body {
          flex-direction: column;
        }

        .assessment-score-value {
          font-size: 40px;
        }

        #progress.active {
          padding: 24px 16px 56px;
        }

        .progress-shell {
          gap: 28px;
        }

        .progress-hero h3 {
          font-size: 28px;
          line-height: 34px;
        }

        .progress-hero p {
          font-size: 15px;
          line-height: 24px;
        }

        .progress-card-head,
        .report-card-head,
        .report-actions,
        .report-controls {
          align-items: stretch;
          flex-direction: column;
        }

        .report-actions .btn,
        .report-controls .field {
          width: 100%;
          max-width: none;
        }

        .doc-title-block h4 {
          font-size: 16px;
        }
      }