@charset "UTF-8";
:root {
    --ink:#213b3b;
    --muted:#778582;
    --teal:#24796c;
    --teal-dark:#185d53;
    --mint:#eaf3ed;
    --paper:#fff;
    --canvas:#f5f6f2;
    --line:#e3e8e1;
    --sidebar:#193b3a;
    --radius:16px;
}

* {
    box-sizing:border-box;
}

html {
    scroll-behavior:smooth;
    scroll-padding-top:24px;
}

body {
    margin:0;
    background:var(--canvas);
    color:var(--ink);
    font-family:"Segoe UI",Arial,sans-serif;
    font-size:14px;
    line-height:1.55;
}

a {
    color:inherit;
    text-decoration:none;
}

button,input,select {
    font:inherit;
}

button,a,input,select,summary {
    -webkit-tap-highlight-color:transparent;
}

button {
    cursor:pointer;
}

button:disabled {
    cursor:wait;
    opacity:.65;
}

input[type=checkbox],input[type=radio] {
    accent-color:var(--teal);
    width:17px;
    height:17px;
    flex-shrink:0;
    cursor:pointer;
}

input[type=text],select {
    width:100%;
    min-width:0;
    border:1px solid #dce3dd;
    border-radius:8px;
    padding:11px 12px;
    color:var(--ink);
    background:#fff;
    transition:border-color .15s,box-shadow .15s;
}

input::placeholder {
    color:#a3ada6;
}

input:focus,select:focus {
    outline:none;
    border-color:var(--teal);
    box-shadow:0 0 0 3px #24796c18;
}

:focus-visible {
    outline:3px solid #73b4a6;
    outline-offset:4px;
}

[hidden] {
    display:none!important;
}

.sidebar {
    position:fixed;
    inset:0 auto 0 0;
    width:232px;
    background:var(--sidebar);
    color:#eaf2e8;
    padding:35px 20px 22px;
    display:flex;
    flex-direction:column;
    z-index:10;
}

.brand {
    display:flex;
    align-items:center;
    gap:12px;
    padding:0 11px;
    font-size:24px;
    line-height:1.2;
    font-weight:650;
    letter-spacing:-.8px;
}

.brand-mark {
    width:38px;
    height:43px;
    display:grid;
    place-items:center;
    background:#c9ddbe;
    color:var(--sidebar);
    border-radius:8px 8px 17px 8px;
    font-family:Georgia,serif;
    font-weight:700;
    font-size:34px;
}

.brand-caption {
    display:block;
    font-size:7px;
    letter-spacing:1.55px;
    margin-top:9px;
    font-weight:500;
    color:#acc5bc;
}

.nav-label {
    font-size:8px;
    letter-spacing:1.5px;
    color:#8faea3;
    margin:52px 13px 17px;
}

.nav-item {
    display:flex;
    align-items:center;
    gap:9px;
    padding:13px 12px;
    border-radius:8px;
    font-size:12px;
    margin-bottom:6px;
    transition:background .15s;
}

.nav-item.active {
    background:#30524d;
    color:#f3f7ed;
}

.nav-item:hover:not(.unavailable) {
    background:#2d504b;
}

.nav-item.unavailable {
    color:#89a19b;
}

.nav-icon {
    font-size:20px;
    width:21px;
    line-height:1;
}

.nav-number {
    margin-left:auto;
    font-size:10px;
    opacity:.5;
}

.sidebar-note {
    margin:auto 12px 32px;
    padding-top:60px;
}

.small-symbol {
    font-size:28px;
    color:#c4d7ad;
    display:block;
    margin-bottom:12px;
}

.sidebar-note strong {
    font-size:15px;
    font-weight:500;
    line-height:1.6;
}

.sidebar-note p {
    font-size:11px;
    color:#a5bcb1;
    line-height:1.85;
    margin-top:13px;
}

.sidebar-footer {
    border-top:1px solid #385651;
    padding:19px 11px 0;
    font-size:10px;
    color:#b3c7bd;
    display:flex;
    align-items:center;
    gap:8px;
}

.status-dot {
    display:inline-block;
    width:6px;
    height:6px;
    border-radius:50%;
    background:#7aab80;
    flex-shrink:0;
}

.workspace {
    margin-left:232px;
    min-height:100vh;
    display:flex;
    flex-direction:column;
}

.topbar {
    height:75px;
    flex-shrink:0;
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:0 44px;
    border-bottom:1px solid var(--line);
    font-size:11px;
    color:var(--muted);
    background:#fafbf7;
}

.topbar strong {
    color:#476158;
    font-weight:500;
}

.breadcrumb-slash {
    padding:0 13px;
    color:#bac4bc;
}

.topbar-tag {
    letter-spacing:1.4px;
    font-size:8px;
    color:#7b9085;
}

main {
    width:100%;
    max-width:1510px;
    padding:40px 44px;
    margin:0 auto;
    flex:1;
}

.page-footer {
    padding:20px 44px;
    display:flex;
    justify-content:space-between;
    color:#8e9b92;
    font-size:10px;
    border-top:1px solid var(--line);
    margin-top:20px;
}

.eyebrow {
    font-size:9px;
    letter-spacing:1.6px;
    color:#6f8978;
    font-weight:600;
    display:flex;
    align-items:center;
    gap:8px;
}

h1,h2,h3,p {
    margin-top:0;
}

h1 {
    font-family:Georgia,"Times New Roman",serif;
    font-size:43px;
    letter-spacing:-1.5px;
    font-weight:400;
    line-height:1.17;
    margin-bottom:12px;
}

h2 {
    font-size:21px;
    letter-spacing:-.45px;
    font-weight:600;
    margin:5px 0 0;
}

h3 {
    font-size:14px;
    font-weight:600;
    margin:0;
}

.muted {
    color:var(--muted);
    font-size:12px;
}

.card {
    background:var(--paper);
    border:1px solid var(--line);
    border-radius:var(--radius);
}

.card-heading {
    display:flex;
    align-items:center;
    justify-content:space-between;
    margin-bottom:25px;
    gap:12px;
}

.button {
    border:1px solid transparent;
    border-radius:8px;
    padding:12px 20px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:24px;
    font-size:12px;
    font-weight:600;
    transition:background .18s,transform .18s;
    white-space:nowrap;
}

.button:active {
    transform:translateY(1px);
}

.primary {
    background:var(--teal);
    color:#fff;
}

.primary:hover {
    background:var(--teal-dark);
}

.primary span {
    font-size:18px;
}

.secondary {
    background:#fff;
    border-color:#dbe2db;
    color:#496357;
}

.secondary:hover {
    background:#edf3eb;
}

.notice {
    display:flex;
    flex-direction:column;
    gap:4px;
    border:1px solid #e6dcbf;
    border-radius:10px;
    background:#fbf8ee;
    color:#87744b;
    padding:14px 17px;
    font-size:12px;
    margin:0 0 22px;
}

.notice.error {
    background:#fff0ee;
    color:#9a473d;
    border-color:#efcbc5;
}

.welcome {
    display:grid;
    grid-template-columns:1.3fr 1fr;
    align-items:center;
    gap:40px;
    min-height:360px;
    padding:17px 0 42px;
}

.welcome h1 {
    font-size:clamp(38px,4.4vw,67px);
    margin:22px 0 21px;
    line-height:1.07;
    letter-spacing:-2.5px;
}

.welcome h1 em {
    color:var(--teal);
    font-weight:400;
}

.lead {
    max-width:430px;
    color:#7c8a80;
    font-size:14px;
    line-height:1.85;
    margin-bottom:23px;
}

.welcome-pills {
    display:flex;
    flex-wrap:wrap;
    gap:8px;
}

.welcome-pills span {
    font-size:9px;
    border:1px solid #dce4d9;
    padding:5px 9px;
    border-radius:5px;
    color:#6b8270;
    background:#f0f4eb;
}

.document-art {
    height:325px;
    position:relative;
    display:grid;
    place-items:center;
    background:radial-gradient(ellipse,#e3ecdf 0,transparent 68%);
}

.paper {
    position:relative;
    transform:rotate(-7deg);
    width:243px;
    height:285px;
    padding:25px 21px;
    background:#fffef9;
    box-shadow:0 16px 30px #254f3d13;
    border:1px solid #e3e6dc;
}

.paper-shadow {
    position:absolute;
    width:243px;
    height:285px;
    background:#dbe5d4;
    transform:rotate(5deg);
    border:1px solid #c8d6c2;
}

.paper-brand {
    font-size:12px;
    letter-spacing:3px;
    font-weight:600;
    display:flex;
    justify-content:space-between;
}

.paper-brand span {
    color:#9ab49b;
}

.paper-rule {
    height:2px;
    background:#487e6a;
    margin:16px 0;
}

.paper-line {
    height:5px;
    background:#e1e8de;
    margin-bottom:8px;
    border-radius:2px;
}

.paper-line.wide {
    width:70%;
}

.paper-line.short {
    width:42%;
}

.paper-line.bottom {
    margin-top:24px;
    height:2px;
}

.paper-table {
    display:grid;
    grid-template-columns:2.7fr repeat(3,1fr);
    font-size:7px;
    margin-top:19px;
}

.paper-table div {
    border-bottom:1px solid #dfe7dc;
    padding:7px 2px;
    text-align:center;
}

.paper-table div:nth-child(4n+1) {
    text-align:left;
}

.paper-table div:nth-child(-n+4) {
    background:#eff4eb;
    font-size:6px;
    color:#6d816d;
}

.paper-signature {
    font-size:7px;
    color:#9aa68f;
}

.art-label {
    position:absolute;
    bottom:9px;
    right:0;
    background:var(--teal);
    color:white;
    border-radius:7px;
    padding:10px 15px;
    font-size:10px;
    box-shadow:0 8px 22px #1d524524;
}

.upload-layout {
    display:grid;
    grid-template-columns:minmax(0,1.65fr) minmax(240px,1fr);
    gap:38px;
    margin-top:25px;
}

.upload-card {
    padding:28px 30px;
}

.file-type {
    font-size:9px;
    letter-spacing:1px;
    background:#f2f5ee;
    border:1px solid #e3eadf;
    border-radius:5px;
    padding:5px 9px;
    color:#68896c;
}

.dropzone {
    min-height:227px;
    position:relative;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    background:#f8faf5;
    border:1px dashed #bbcfb7;
    border-radius:12px;
    text-align:center;
    gap:8px;
    cursor:pointer;
    padding:24px;
    transition:background .2s,border-color .2s;
}

.dropzone:hover,.dropzone.dragover,.dropzone.has-file {
    background:#edf5e9;
    border-color:var(--teal);
}

.dropzone:focus-within {
    outline:3px solid #73b4a6;
    outline-offset:3px;
}

.dropzone input {
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    opacity:0;
    cursor:pointer;
}

.dropzone strong {
    font-size:15px;
    font-weight:600;
    word-break:break-word;
}

.dropzone>span:not(.upload-icon) {
    font-size:11px;
    color:#849382;
}

.upload-icon {
    font-size:29px;
    line-height:1;
    background:#e6efdf;
    color:#527b57;
    width:52px;
    height:52px;
    border-radius:13px;
    display:grid;
    place-items:center;
    margin-bottom:9px;
}

.dropzone .file-limit {
    margin-top:6px;
    font-size:9px!important;
    color:#a0ad98!important;
}

.upload-actions {
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:18px;
    margin-top:23px;
}

.upload-actions .muted {
    font-size:10px;
    max-width:180px;
}

.upload-guide {
    padding:20px 5px;
}

.steps {
    padding:0;
    margin:28px 0 0;
    list-style:none;
}

.steps li {
    display:flex;
    gap:16px;
    padding:0 0 28px;
}

.steps li>span {
    font-size:10px;
    color:#8caa87;
    padding-top:3px;
}

.steps strong {
    font-size:13px;
    font-weight:600;
}

.steps p {
    font-size:12px;
    line-height:1.8;
    color:#83917f;
    margin:6px 0 0;
    max-width:260px;
}

.inline-error {
    color:#9a473d;
    font-size:12px;
    margin:13px 0;
}

.page-heading {
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:20px;
    margin-bottom:27px;
}

.page-heading .eyebrow {
    margin-bottom:12px;
}

.page-heading p {
    margin-bottom:0;
}

.source-bar {
    display:flex;
    align-items:center;
    gap:13px;
    border:1px solid var(--line);
    border-radius:11px;
    background:#edf2e9;
    padding:14px 18px;
    margin-bottom:30px;
}

.source-icon {
    display:grid;
    place-items:center;
    color:#698263;
    font-size:23px;
    background:#e1e9d9;
    width:37px;
    height:40px;
    border-radius:6px;
    flex-shrink:0;
}

.source-bar>div {
    min-width:0;
}

.source-bar strong {
    font-size:11px;
    display:block;
    overflow-wrap:anywhere;
    font-weight:500;
}

.source-bar>div>span {
    font-size:10px;
    color:#83917b;
    display:block;
    margin-top:3px;
}

.badge {
    display:inline-flex;
    align-items:center;
    gap:6px;
    padding:5px 8px;
    border:1px solid #d0dfc9;
    border-radius:5px;
    color:#6c8a65;
    font-size:9px;
    white-space:nowrap;
    margin-left:auto;
}

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

.editor-main {
    min-width:0;
}

.details-card {
    padding:25px;
}

.subtle-icon {
    font-size:22px;
    color:#90a98c;
}

.fields-grid {
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:18px;
}

.field {
    min-width:0;
}

.wide-field {
    grid-column:1/-1;
}

.field>label {
    display:block;
    font-size:11px;
    font-weight:500;
    color:#637a6a;
    margin-bottom:7px;
}

.field label>span {
    font-size:10px;
    color:#95a18f;
    margin-left:5px;
}

.field-hint,.field-excluded {
    display:block;
    font-size:10px;
    color:#97a18f;
    margin-top:6px;
}

.field.is-excluded {
    opacity:.55;
}

.field.is-excluded input,.field.is-excluded select {
    background:#f2f4ef;
}

.student-picker {
    background:#f2f7ee;
    border:1px solid #e0e9d8;
    padding:15px;
    border-radius:10px;
}

.section-heading {
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:15px;
    margin:34px 0 12px;
}

.section-description {
    font-size:11px;
    line-height:1.8;
}

.small-note {
    color:#8fa186;
    font-size:9px;
    text-align:right;
}

.grade-group {
    margin:26px 0;
}

.group-heading {
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding-bottom:13px;
    border-bottom:1px solid #dfe5da;
    gap:12px;
}

.group-heading h3 {
    font-size:13px;
}

.group-heading>span {
    font-size:10px;
    color:#8a9b82;
}

.period-controls {
    display:flex;
    gap:8px;
    flex-wrap:wrap;
    align-items:center;
    margin:15px 0;
}

.period-controls>span {
    font-size:10px;
    color:#8b9981;
    margin-right:3px;
}

.period-chip {
    display:inline-flex;
    align-items:center;
    gap:5px;
    border:1px solid #d9e5d3;
    border-radius:6px;
    background:#eef5e9;
    padding:5px 8px;
    font-size:10px;
    cursor:pointer;
}

.period-chip input {
    width:13px;
    height:13px;
    margin:0;
}

.period-chip:has(input:not(:checked)) {
    background:#f4f5f0;
    color:#9caa93;
    border-color:#e2e7dc;
    text-decoration:line-through;
}

.subject-card {
    background:#fff;
    border:1px solid var(--line);
    border-radius:11px;
    margin:10px 0;
    overflow:hidden;
    transition:opacity .15s;
}

.subject-card summary {
    list-style:none;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px;
    padding:15px 16px;
    cursor:pointer;
}

.subject-card summary::-webkit-details-marker {
    display:none;
}

.subject-choice {
    display:inline-flex;
    align-items:center;
    gap:10px;
    font-size:12px;
    min-width:0;
    cursor:pointer;
}

.subject-choice input {
    margin:0;
}

.subject-choice strong {
    font-weight:500;
}

.subject-state {
    font-size:9px;
    color:#8da582;
    white-space:nowrap;
}

.subject-state span {
    margin-left:12px;
}

.subject-card.is-excluded {
    opacity:.5;
}

.table-scroll {
    overflow-x:auto;
    width:100%;
}

.edit-table {
    border-collapse:collapse;
    width:100%;
    font-size:12px;
}

.edit-table th {
    text-align:left;
    background:#f7f9f3;
    color:#8a9a80;
    font-weight:500;
    font-size:10px;
    padding:10px 13px;
    border-top:1px solid #e9ede3;
    border-bottom:1px solid #e9ede3;
}

.edit-table td {
    padding:9px 12px;
    border-bottom:1px solid #eef1e9;
    transition:opacity .2s;
}

.edit-table tbody tr:last-child td {
    border-bottom:0;
}

.edit-table input[type=text] {
    padding:8px;
    border-color:#e6eadf;
    font-size:12px;
}

.progress-table th:first-child {
    width:90px;
}

.progress-table th:last-child {
    width:75px;
}

.period-name {
    color:#78906c;
    font-size:10px;
}

.mark-input {
    text-align:center;
    min-width:45px;
}

.edit-table .is-excluded,.edit-table tr.is-excluded {
    opacity:.35;
}

.export-panel {
    position:sticky;
    top:22px;
}

.settings-card {
    padding:23px 21px;
}

.settings-card .card-heading {
    margin-bottom:11px;
}

.settings-card h2 {
    font-size:18px;
}

.settings-card>p {
    font-size:11px;
    line-height:1.8;
    margin-bottom:24px;
}

.settings-label {
    font-size:8px;
    letter-spacing:1.3px;
    color:#92a085;
    font-weight:600;
    margin:22px 0 12px;
}

.switch-row {
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    min-height:36px;
    cursor:pointer;
    font-size:11px;
    color:#5b735f;
}

.switch-row input.switch {
    appearance:none;
    -webkit-appearance:none;
    background:#dbe2d5;
    width:29px;
    height:17px;
    border:0;
    border-radius:20px;
    margin:0;
    position:relative;
    transition:background .2s;
}

.switch:before {
    content:"";
    position:absolute;
    width:11px;
    height:11px;
    border-radius:50%;
    background:white;
    left:3px;
    top:3px;
    box-shadow:0 1px 2px #223b3320;
    transition:transform .2s;
}

.switch-row input.switch:checked {
    background:var(--teal);
}

.switch:checked:before {
    transform:translateX(12px);
}

.mode-options {
    border:1px solid var(--line);
    border-radius:9px;
    overflow:hidden;
}

.mode-options label {
    display:flex;
    align-items:center;
    gap:9px;
    padding:12px 10px;
    cursor:pointer;
}

.mode-options label+label {
    border-top:1px solid var(--line);
}

.mode-options label:has(input:checked) {
    background:#f0f6eb;
}

.mode-options input {
    margin:0;
    width:14px;
    height:14px;
}

.mode-options strong {
    display:block;
    font-size:10px;
    font-weight:500;
}

.mode-options small {
    display:block;
    font-size:8px;
    color:#93a087;
    margin-top:2px;
}

.text-button {
    display:block;
    border:0;
    background:none;
    padding:0;
    color:var(--teal);
    font-size:11px;
    margin:22px 0 0;
    text-decoration:underline;
    text-underline-offset:3px;
}

.export-note {
    display:flex;
    align-items:flex-start;
    gap:10px;
    background:#f6f8f1;
    border-radius:8px;
    padding:13px 11px;
    margin-top:22px;
    color:#829375;
}

.export-note>span {
    font-size:18px;
}

.export-note p {
    font-size:9px;
    line-height:1.8;
    margin:0;
}

.format-card {
    display:flex;
    align-items:center;
    gap:14px;
    margin:18px 0 0;
    padding:0 13px;
}

.format-icon {
    border:1px solid #ccd8c2;
    border-radius:3px;
    width:28px;
    height:36px;
    display:grid;
    place-items:center;
    font-size:10px;
    color:#91a581;
}

.format-card strong {
    font-size:11px;
    font-weight:500;
}

.format-card p {
    font-size:9px;
    color:#94a488;
    margin:2px 0 0;
}

.export-toolbar {
    position:sticky;
    bottom:18px;
    z-index:5;
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:20px;
    background:#fff;
    border:1px solid #dce5d6;
    box-shadow:0 8px 30px #203e3210;
    border-radius:12px;
    padding:17px 22px;
    margin-top:32px;
}

.toolbar-label {
    display:block;
    font-size:8px;
    letter-spacing:1.3px;
    color:#9aaa8e;
    margin-bottom:3px;
}

.export-toolbar strong {
    display:block;
    font-size:11px;
    font-weight:500;
}

.toolbar-actions {
    display:flex;
    align-items:center;
    gap:20px;
}

.toolbar-actions .muted {
    font-size:9px;
}

.empty-state {
    text-align:center;
    border:1px dashed #d5dfcd;
    border-radius:12px;
    padding:50px 20px;
    margin-top:22px;
    color:#7f9475;
    background:#f0f4e9;
}

.empty-state>span {
    display:block;
    font-size:32px;
    margin-bottom:15px;
    color:#a5b59a;
}

.empty-state h3 {
    font-size:14px;
}

.empty-state p {
    font-size:11px;
    margin:8px 0 0;
}

.final-table {
    min-width:500px;
}

.final-table th {
    min-width:86px;
    text-align:center;
}

.final-table th:first-child {
    min-width:210px;
    text-align:left;
}

.final-table .subject-choice {
    font-size:11px;
}

.final-table input[type=text] {
    min-width:55px;
    max-width:90px;
    text-align:center;
}

.final-table td:not(:first-child) {
    text-align:center;
}

.final-table tr.is-excluded td {
    opacity:.4;
}

.final-table .column-choice {
    display:flex;
    gap:5px;
    align-items:flex-start;
    justify-content:center;
    line-height:1.5;
    cursor:pointer;
}

.column-choice input {
    width:13px;
    height:13px;
    margin:2px 0 0;
}

.final-table-container {
    background:white;
    border:1px solid var(--line);
    border-radius:11px;
    overflow:hidden;
    margin:18px 0;
}

.final-table-title {
    padding:13px 15px;
    color:#6d8262;
    font-size:10px;
    display:flex;
    align-items:center;
    gap:9px;
}

.final-table-title span {
    background:#edf4e6;
    padding:2px 6px;
    border-radius:4px;
    font-size:8px;
}

.final-container .period-controls {
    margin-top:22px;
}

@media(min-width:1500px) {
    .editor-layout {
        grid-template-columns:minmax(0,1fr) 320px;
    }
    .settings-card {
        padding:27px;
    }
    .sidebar {
        width:250px;
    }
    .workspace {
        margin-left:250px;
    }
    main {
        padding-top:48px;
    }
    .welcome {
        min-height:410px;
    }
    .document-art {
        height:360px;
    }
    .paper,.paper-shadow {
        width:265px;
        height:307px;
    }
    .paper {
        padding:28px 24px;
    }
    .upload-card {
        padding:32px 35px;
    }
}

@media(max-width:1150px) {
    .sidebar {
        width:195px;
        padding-left:12px;
        padding-right:12px;
    }
    .workspace {
        margin-left:195px;
    }
    .brand {
        font-size:21px;
    }
    .brand-caption {
        font-size:6px;
    }
    .topbar {
        padding:0 28px;
    }
    main {
        padding:30px 28px;
    }
    .page-footer {
        padding:20px 28px;
    }
    .editor-layout {
        grid-template-columns:minmax(0,1fr) 250px;
        gap:18px;
    }
    .settings-card {
        padding:20px 16px;
    }
    .details-card {
        padding:21px;
    }
    .toolbar-actions .muted {
        display:none;
    }
    .welcome {
        gap:20px;
    }
    .welcome h1 {
        font-size:48px;
    }
    .welcome .eyebrow {
        font-size:7px;
    }
    .upload-layout {
        gap:25px;
    }
    .upload-card {
        padding:23px;
    }
    .upload-actions {
        flex-wrap:wrap;
    }
    .upload-actions .muted {
        max-width:none;
    }
    .badge {
        font-size:8px;
    }
    .fields-grid {
        gap:15px;
    }
}

@media(max-width:920px) {
    .sidebar {
        width:76px;
        padding:27px 12px;
    }
    .brand {
        padding:0;
        justify-content:center;
    }
    .brand>span:last-child,.nav-label,.nav-item:not(.active),.nav-number,.sidebar-note,.sidebar-footer {
        display:none;
    }
    .nav-item.active {
        font-size:0;
        justify-content:center;
        padding:12px 6px;
        margin-top:35px;
    }
    .nav-item.active .nav-icon {
        font-size:22px;
    }
    .workspace {
        margin-left:76px;
    }
    .editor-layout {
        grid-template-columns:minmax(0,1fr) 235px;
        gap:15px;
    }
    .topbar {
        height:62px;
    }
    .welcome h1 {
        font-size:43px;
    }
    .paper,.paper-shadow {
        width:210px;
        height:270px;
    }
    .document-art {
        height:310px;
    }
    .paper {
        padding:23px 18px;
    }
    .art-label {
        font-size:8px;
    }
    .upload-layout {
        grid-template-columns:1fr;
    }
    .upload-guide {
        padding:12px 0;
    }
    .steps {
        display:flex;
        gap:25px;
    }
    .steps li {
        flex:1;
        gap:9px;
    }
    .steps p {
        font-size:10px;
    }
    .source-bar .badge {
        display:none;
    }
    .switch-row {
        font-size:10px;
    }
    .card-heading {
        gap:8px;
    }
    .settings-card h2 {
        font-size:16px;
    }
    .fields-grid {
        grid-template-columns:1fr;
    }
    .wide-field {
        grid-column:auto;
    }
    .small-note {
        display:none;
    }
}

@media(max-width:680px) {
    .sidebar {
        position:relative;
        inset:auto;
        width:100%;
        height:62px;
        flex-direction:row;
        align-items:center;
        justify-content:space-between;
        padding:10px 20px;
    }
    .brand {
        font-size:20px;
        gap:9px;
    }
    .brand>span:last-child {
        display:block;
    }
    .brand-caption {
        display:none;
    }
    .brand-mark {
        width:29px;
        height:33px;
        font-size:25px;
    }
    .sidebar nav {
        display:flex;
        gap:6px;
    }
    .nav-item.active {
        margin:0;
        padding:6px;
        background:transparent;
    }
    .sidebar nav .nav-item:first-child {
        display:flex;
        font-size:0;
    }
    .nav-icon {
        font-size:20px;
    }
    .workspace {
        margin-left:0;
    }
    .topbar {
        height:47px;
        padding:0 20px;
        font-size:9px;
    }
    .topbar-tag {
        display:none;
    }
    main {
        padding:26px 20px;
    }
    .page-footer {
        padding:16px 20px;
        font-size:8px;
    }
    .page-footer>span:last-child {
        display:none;
    }
    .welcome {
        grid-template-columns:1fr;
        gap:10px;
        padding:7px 0 20px;
    }
    .welcome h1 {
        font-size:49px;
        letter-spacing:-2px;
    }
    .welcome .eyebrow {
        font-size:7px;
    }
    .welcome-copy .lead {
        font-size:13px;
        max-width:100%;
    }
    .document-art {
        display:none;
    }
    .upload-layout {
        margin-top:10px;
        gap:28px;
    }
    .upload-card {
        padding:23px 20px;
    }
    .upload-actions {
        gap:16px;
    }
    .upload-actions .button {
        width:100%;
    }
    .upload-actions .muted {
        font-size:9px;
    }
    .steps {
        display:block;
        margin:23px 0 0;
    }
    .steps li {
        gap:16px;
        padding-bottom:23px;
    }
    .steps p {
        max-width:none;
        font-size:11px;
    }
    .dropzone {
        min-height:220px;
    }
    .dropzone strong {
        font-size:13px;
    }
    .dropzone>span:not(.upload-icon) {
        font-size:10px;
    }
    .page-heading {
        align-items:flex-start;
        gap:12px;
    }
    .page-heading h1 {
        font-size:35px;
    }
    .page-heading .eyebrow {
        font-size:7px;
        letter-spacing:1px;
    }
    .page-heading .muted {
        font-size:11px;
    }
    .page-heading .button {
        padding:8px 10px;
        font-size:9px;
        margin-top:20px;
    }
    .editor-layout {
        display:flex;
        flex-direction:column;
    }
    .editor-main,.export-panel {
        width:100%;
    }
    .export-panel {
        position:static;
    }
    .settings-card {
        padding:24px;
    }
    .settings-card h2 {
        font-size:20px;
    }
    .switch-row {
        font-size:12px;
        min-height:41px;
    }
    .fields-grid {
        grid-template-columns:1fr 1fr;
        gap:15px;
    }
    .wide-field {
        grid-column:1/-1;
    }
    .details-card {
        padding:21px 18px;
    }
    .field>label {
        font-size:10px;
    }
    input[type=text],select {
        font-size:12px;
        padding:10px;
    }
    .source-bar {
        padding:12px;
        margin-bottom:23px;
    }
    .source-bar strong {
        font-size:10px;
    }
    .source-bar>div>span {
        font-size:9px;
    }
    .export-toolbar {
        bottom:8px;
        padding:14px;
        gap:10px;
        margin-top:22px;
    }
    .toolbar-label {
        font-size:7px;
    }
    .export-toolbar strong {
        font-size:9px;
    }
    .export-toolbar .button {
        padding:11px 12px;
        gap:10px;
        font-size:10px;
    }
    .toolbar-actions {
        gap:0;
    }
    .subject-card summary {
        padding:13px 12px;
    }
    .subject-choice {
        font-size:11px;
        gap:7px;
    }
    .progress-table th:first-child {
        width:70px;
    }
    .edit-table th,.edit-table td {
        padding:8px;
    }
    .period-name {
        font-size:9px;
    }
    .progress-table th:last-child {
        width:65px;
    }
    .format-card {
        margin:15px 0;
    }
    .mode-options strong {
        font-size:12px;
    }
    .mode-options small {
        font-size:10px;
    }
    .mode-options label {
        padding:14px;
    }
    .settings-label {
        font-size:9px;
    }
    .export-note p {
        font-size:11px;
    }
}

.export-panel {
    max-height:calc(100vh - 130px);
    overflow-y:auto;
    scrollbar-width:thin;
    scrollbar-color:#c3d3bc transparent;
    padding-bottom:12px;
}

@media(max-width:680px) {
    .export-panel {
        max-height:none;
        overflow:visible;
        padding-bottom:0;
    }
}

@media(prefers-reduced-motion:reduce) {
    html {
        scroll-behavior:auto;
    }
    *,*:before {
        transition:none!important;
    }
}