:root {
  --bg: #f7f3f6;
  --surface: #fff;
  --ink: #3d2139;
  --text: #5c4559;
  --muted: #7f757e;
  --line: #e9e4e9;
  --green: #74256a;
  --green-deep: #4e1947;
  --green-soft: #f3eef3;
  --lime: #e0b4da;
  --red: #b24f4d;
  --orange: #9b702e;
  --radius: 18px;
  --shadow: 0 5px 24px #46274205;
  font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif;
  color: var(--text);
  background: var(--bg);
  font-synthesis: none;
  -webkit-font-smoothing: antialiased;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; font-size: 14px; line-height: 1.65; }
button, input, select, textarea { font: inherit; }
button, a, input, select, textarea { -webkit-tap-highlight-color: transparent; }
button { cursor: pointer; border: 0; background: none; color: inherit; }
button:disabled { cursor: wait; opacity: .55; }
button:focus-visible, a:focus-visible { outline: 3px solid #aa86a5; outline-offset: 4px; }
a { color: var(--green); text-decoration: none; }
svg.icon { width: 20px; height: 20px; vertical-align: middle; flex-shrink: 0; fill: none; stroke: currentColor; stroke-width: 1.65; stroke-linecap: round; stroke-linejoin: round; }
h1, h2, h3, p { margin: 0; }
h1, h2, h3 { color: var(--ink); font-weight: 650; }
h1 { font-size: 29px; letter-spacing: -.7px; line-height: 1.4; }
h2 { font-size: 18px; }
h3 { font-size: 16px; }
small, .small { font-size: 12px; }
.muted { color: var(--muted); }
.mono, .number { font-variant-numeric: tabular-nums; }
.line { height: 1px; background: var(--line); margin: 24px 0; }
.flex { display: flex; align-items: center; gap: 10px; min-width: 0; }
.between { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.stack { display: grid; gap: 22px; }
.hidden { display: none !important; }
.btn { display: inline-flex; gap: 8px; align-items: center; justify-content: center; padding: 10px 18px; border-radius: 10px; border: 1px solid #e3dbe2; background: #fff; white-space: nowrap; font-weight: 550; font-size: 14px; min-height: 44px; transition: background .18s, border-color .18s, box-shadow .18s; }
.btn:hover { background: #f6f1f6; border-color: #d2c6d1; }
.btn.primary { background: var(--green); border-color: var(--green); color: #fff; box-shadow: 0 3px 6px #4f1f4810; }
.btn.primary:hover { background: #4b1844; border-color: #4b1844; box-shadow: 0 4px 12px #4f1f4820; }
.btn.soft { background: var(--green-soft); color: var(--green); border-color: transparent; }
.btn.soft:hover { background: #ece0ea; }
.btn.danger { color: var(--red); border-color: #e9ceca; }
.btn.ghost { border-color: transparent; background: transparent; padding: 9px 12px; }
.btn.ghost:hover { background: var(--green-soft); }
.btn.sm { padding: 8px 12px; min-height: 40px; font-size: 13px; }
.icon-btn { width: 44px; height: 44px; display: inline-grid; place-items: center; border-radius: 10px; flex-shrink: 0; }
.icon-btn:hover { background: var(--green-soft); }
.brand { display: flex; align-items: center; gap: 12px; min-width: 0; }
.brand-mark { height: 44px; width: 44px; display: inline-grid; place-items: center; flex-shrink: 0; background: var(--green); color: #e9c8e5; border-radius: 13px 13px 13px 4px; font-weight: 500; font-size: 25px; }
.brand-title { font-size: 23px; font-weight: 650; color: var(--ink); letter-spacing: 1px; line-height: 1.4; white-space: nowrap; }
.brand-subtitle { font-size: 14px; font-weight: 450; letter-spacing: 0; margin-left: 8px; color: #80727e; }
.brand-caption { font-size: 10px; color: var(--muted); letter-spacing: 1.5px; line-height: 1.6; }
.sidebar { width: 238px; position: fixed; inset: 0 auto 0 0; background: #fdfbfd; border-right: 1px solid var(--line); display: flex; flex-direction: column; padding: 30px 18px 20px; z-index: 20; overflow-y: auto; }
.sidebar .brand { padding: 0 12px; }
.workspace { margin: 32px 8px 24px; padding: 15px 14px; background: #f4eef3; border: 1px solid #ebdfe9; border-radius: 12px; }
.workspace .tiny-label { font-size: 12px; color: #837080; margin-bottom: 5px; }
.workspace strong { display: block; font-size: 14px; color: #563b53; font-weight: 550; overflow-wrap: anywhere; }
.nav-section { font-size: 10px; font-weight: 600; color: #958993; letter-spacing: 1.6px; margin: 3px 15px 11px; }
.nav { display: grid; gap: 7px; }
.nav button { display: flex; align-items: center; gap: 13px; text-align: left; padding: 12px 15px; min-height: 47px; border-radius: 10px; font-size: 14px; color: #746872; position: relative; transition: background .18s, color .18s; }
.nav button:hover { background: #f3ecf2; color: var(--green); }
.nav button.active { background: #efe4ed; color: #55214e; font-weight: 650; }
.nav button.active::before { content: ""; position: absolute; width: 3px; height: 19px; left: 0; background: #6e3967; border-radius: 0 3px 3px 0; }
.nav .count { margin-left: auto; background: var(--green); color: #fff; padding: 0 7px; border-radius: 6px; font-size: 12px; line-height: 22px; }
.sidebar-bottom { margin-top: auto; padding-top: 22px; }
.help-note { padding: 16px 12px 22px; color: #8e7e8c; font-size: 12px; line-height: 1.9; }
.help-note .icon { height: 16px; width: 16px; margin-right: 3px; }
.profile { border-top: 1px solid var(--line); padding: 18px 5px 0; display: flex; align-items: center; gap: 10px; }
.avatar { display: inline-grid; place-items: center; flex-shrink: 0; width: 40px; height: 40px; padding: 0; border-radius: 50%; background: #ede2ec; color: #743c6d; font-size: 13px; font-weight: 600; white-space: nowrap; }
button.avatar { min-width: 44px; min-height: 44px; }
.profile .identity { min-width: 0; flex: 1; }
.identity strong { display: block; font-size: 13px; color: #523e4f; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; }
.identity small { display: block; font-size: 12px; color: var(--muted); white-space: nowrap; text-overflow: ellipsis; overflow: hidden; }
.main { margin-left: 238px; min-height: 100vh; }
.topbar { min-height: 80px; padding: 16px 40px; border-bottom: 1px solid var(--line); background: #ffffffdf; display: flex; align-items: center; justify-content: space-between; gap: 18px; }
.breadcrumbs { font-size: 13px; color: #938b92; display: flex; gap: 14px; align-items: center; white-space: nowrap; }
.breadcrumbs strong { font-weight: 550; color: #614e5e; }
.top-right { display: flex; align-items: center; gap: 22px; min-width: 0; }
.period { font-size: 12px; color: #6f5d6c; border: 1px solid #eae0e9; background: #fdf9fc; border-radius: 8px; padding: 6px 11px; display: flex; align-items: center; gap: 7px; white-space: nowrap; }
.period .icon { width: 16px; height: 16px; }
.role-label { font-size: 12px; color: #867383; display: flex; align-items: center; gap: 7px; white-space: nowrap; }
.dot { display: inline-block; height: 6px; width: 6px; background: #92668d; border-radius: 50%; flex-shrink: 0; }
.page { max-width: 1510px; margin: auto; padding: 34px 40px 28px; }
.page-header { display: flex; justify-content: space-between; align-items: center; gap: 24px; margin-bottom: 26px; }
.page-header > div { min-width: 0; }
.page-header p { font-size: 14px; color: var(--muted); margin-top: 7px; }
.greeting-spark { display: inline-block; color: #c49dbf; font-size: 27px; margin-left: 10px; vertical-align: top; }
.eyebrow { font-size: 11px; font-weight: 650; letter-spacing: 1.8px; color: #836d80; margin-bottom: 8px; }
.hero { background: #502049; border: 1px solid #502049; min-height: 206px; border-radius: var(--radius); display: flex; align-items: center; justify-content: space-between; position: relative; isolation: isolate; overflow: hidden; padding: 29px 34px; margin-bottom: 26px; }
.hero::before { content: ""; position: absolute; width: 400px; height: 400px; right: -65px; top: -190px; border: 1px solid #ffffff0d; border-radius: 50%; background: #d6b1d105; z-index: -1; }
.hero h2 { font-size: 25px; color: #f7eef6; font-weight: 550; line-height: 1.6; letter-spacing: .6px; }
.hero p { font-size: 14px; color: #cebdcc; margin: 6px 0 20px; }
.hero .hero-sub { font-size: 12px; letter-spacing: 1px; color: #caa4c5; margin-bottom: 8px; }
.hero .btn { background: #f1e1ef; border-color: #f1e1ef; color: #53304e; padding: 8px 14px; min-height: 40px; font-size: 13px; }
.hero .btn:hover { background: #fff; }
.hero-content { position: relative; z-index: 1; min-width: 0; }
.hero-visual { width: 285px; height: 150px; flex-shrink: 0; position: relative; margin-right: 15px; }
.orbit { position: absolute; border: 1px solid #e0bbdb24; border-radius: 50%; width: 245px; height: 245px; top: -47px; left: 21px; }
.orbit::after { content: ""; position: absolute; inset: 22px; border: 1px solid #e0bbdb1a; border-radius: 50%; }
.folder { position: absolute; width: 155px; height: 99px; left: 80px; top: 41px; background: #b288ac; border-radius: 8px 12px 12px 12px; transform: rotate(-9deg); box-shadow: 0 14px 24px #290d2525; }
.folder::before { content: ""; position: absolute; top: -11px; left: 0; width: 67px; height: 23px; background: #b288ac; border-radius: 8px; }
.paper { position: absolute; left: 27px; bottom: 18px; width: 107px; height: 113px; background: #f5eaf3; border-radius: 6px; transform: rotate(15deg); box-shadow: 0 3px 10px #44193f20; padding: 17px; }
.paper .icon { color: #7c5577; width: 26px; height: 26px; }
.paper i { display: block; height: 4px; background: #dcc3d9; border-radius: 3px; margin-top: 12px; width: 100%; }
.paper i:last-child { width: 65%; }
.folder-front { position: absolute; background: #dab3d5; bottom: 0; left: 0; width: 155px; height: 64px; border-radius: 4px 4px 12px 12px; border-top: 1px solid #e9d2e6; display: flex; align-items: center; padding-left: 20px; color: #9e7299; }
.check-orb { width: 43px; height: 43px; border: 5px solid #502049; border-radius: 50%; background: #e6c0e1; color: #6a3263; position: absolute; right: 23px; bottom: -2px; display: grid; place-items: center; }
.spark { position: absolute; left: 29px; top: 18px; color: #d29ccb; font-size: 23px; }
.metrics { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; margin-bottom: 26px; }
.metric { background: #fff; border: 1px solid var(--line); border-radius: 15px; padding: 20px 22px; box-shadow: var(--shadow); min-width: 0; }
.metric-top { display: flex; align-items: center; justify-content: space-between; gap: 6px; font-size: 14px; color: #746171; }
.metric-icon { height: 34px; width: 34px; border-radius: 10px; background: #f3eaf2; color: #946c8f; display: grid; place-items: center; flex-shrink: 0; }
.metric-icon .icon { width: 18px; height: 18px; }
.metric-value { font-size: 35px; color: #4b2c47; letter-spacing: -1px; line-height: 1.5; margin: 6px 0 4px; font-weight: 600; }
.metric-value small { font-size: 13px; color: #8e7c8b; font-weight: 400; margin-left: 7px; letter-spacing: 0; }
.metric-note { font-size: 12px; color: #877885; }
.dashboard-grid { display: grid; grid-template-columns: minmax(0, 1fr) 310px; gap: 24px; align-items: start; }
.panel { min-width: 0; border: 1px solid var(--line); border-radius: var(--radius); background: #fff; overflow: hidden; box-shadow: var(--shadow); }
.panel-head { padding: 23px 24px; display: flex; align-items: center; justify-content: space-between; gap: 14px; }
.panel-head h2 { font-size: 17px; display: flex; gap: 9px; align-items: center; }
.panel-head p { font-size: 12px; color: var(--muted); margin-top: 5px; }
.panel-head .link { font-size: 12px; color: #794672; white-space: nowrap; display: flex; align-items: center; min-height: 40px; padding: 4px 0 4px 8px; }
.panel-head .link .icon { width: 16px; height: 16px; }
.panel-content { padding: 0 24px 24px; }
.table-wrap { max-width: 100%; overflow-x: auto; overscroll-behavior-inline: contain; scrollbar-color: #dcd0db transparent; scrollbar-width: thin; }
table { width: 100%; border-collapse: collapse; text-align: left; white-space: nowrap; }
th { font-size: 12px; font-weight: 500; color: #877384; background: #f9f5f9; padding: 13px 22px; border-bottom: 1px solid var(--line); }
td { padding: 18px 22px; border-bottom: 1px solid #efe9ee; font-size: 14px; color: #74546f; }
tbody tr:last-child td { border-bottom: 0; }
tbody tr:hover { background: #fcf8fb; }
td strong { color: #51304c; font-size: 14px; font-weight: 550; }
.material-title { display: flex; align-items: center; gap: 12px; }
.file-icon { width: 35px; height: 42px; background: #f4e8f2; color: #9e7699; display: grid; place-items: center; border-radius: 8px; flex-shrink: 0; }
.file-icon .icon { width: 19px; }
.title-cell { max-width: 300px; white-space: normal; min-width: 180px; overflow-wrap: anywhere; }
.title-cell small { display: block; color: #8f7c8c; font-size: 12px; margin-top: 3px; }
.status { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 550; padding: 4px 9px; line-height: 1.7; border-radius: 6px; white-space: nowrap; }
.status::before { content: ""; height: 5px; width: 5px; border-radius: 50%; background: currentColor; }
.status.pending { color: #967125; background: #fbf3de; }
.status.approved { color: #7d3a74; background: #f4e8f2; }
.status.returned { color: #a26b35; background: #fbefe0; }
.status.rejected { color: #a95851; background: #faedeb; }
.row-action { display: inline-flex; align-items: center; min-height: 44px; color: #7a3d72; font-size: 13px; padding: 7px 0; }
.row-action .icon { width: 16px; height: 16px; }
.row-action:hover { color: #4f1e48; text-decoration: underline; }
.category-text { color: #80687d; background: #f4eaf3; border-radius: 5px; padding: 4px 8px; font-size: 12px; }
.table-foot { padding: 15px 24px; border-top: 1px solid var(--line); font-size: 12px; color: #8d788a; background: #fdfbfd; }
.empty { text-align: center; padding: 54px 25px; color: var(--muted); }
.empty .empty-icon { display: inline-grid; place-items: center; width: 64px; height: 64px; background: #f4eaf3; color: #a27f9d; border-radius: 20px; margin-bottom: 17px; }
.empty .empty-icon .icon { width: 27px; height: 27px; }
.empty strong { display: block; color: #6a4565; font-size: 16px; font-weight: 550; margin-bottom: 6px; }
.empty p { font-size: 13px; line-height: 1.85; margin-bottom: 20px; }
.side-panel + .side-panel { margin-top: 22px; }
.deadline-top { display: flex; gap: 14px; align-items: center; padding: 0 24px 22px; }
.calendar { width: 54px; flex-shrink: 0; border: 1px solid #e5d7e3; border-radius: 9px; text-align: center; overflow: hidden; }
.calendar small { display: block; background: #f4e7f2; font-size: 12px; color: #82667e; line-height: 23px; }
.calendar strong { display: block; font-size: 25px; color: #773e6f; line-height: 36px; font-weight: 550; }
.deadline-top h3 { font-size: 14px; color: #694464; }
.deadline-top p { font-size: 12px; color: #897586; margin-top: 4px; }
.progress-track { height: 6px; background: #f1e8f0; border-radius: 10px; overflow: hidden; }
.progress-fill { height: 100%; background: #b178a9; border-radius: 10px; }
.progress-label { font-size: 12px; display: flex; justify-content: space-between; gap: 10px; margin-bottom: 10px; color: #866e83; }
.rule-list { display: grid; gap: 17px; }
.rule-row { display: flex; justify-content: space-between; align-items: center; font-size: 13px; gap: 10px; }
.rule-row .flex { gap: 9px; }
.rule-row .idx { font-size: 11px; background: #f3e8f1; color: #967592; border-radius: 5px; width: 25px; height: 25px; display: grid; place-items: center; flex-shrink: 0; }
.rule-row .rule-cap { color: #8e778b; font-size: 12px; white-space: nowrap; }
.rule-note { border-top: 1px dashed #e4d7e2; padding-top: 16px; font-size: 12px; color: #8f7b8c; margin-top: 20px; line-height: 1.85; }
.footer { font-size: 12px; color: #9a8897; padding: 29px 0 0; display: flex; justify-content: space-between; gap: 16px; }
.footer span:last-child { letter-spacing: 1.2px; font-size: 10px; }
.notice { padding: 15px 18px; display: flex; gap: 11px; align-items: flex-start; background: #fbf6e7; border: 1px solid #eee2bb; border-radius: 12px; margin-bottom: 23px; color: #8b703b; font-size: 14px; }
.notice .icon { width: 19px; margin-top: 3px; }
.notice button { font-size: inherit; text-decoration: underline; text-underline-offset: 3px; color: inherit; padding: 0 2px; }
.notice.info { background: #f4eaf3; border-color: #e6d6e4; color: #785673; }
.toolbar { padding: 19px 24px; display: flex; gap: 12px; flex-wrap: wrap; align-items: center; border-bottom: 1px solid var(--line); }
.search-box { display: flex; align-items: center; gap: 8px; padding: 0 13px; border: 1px solid #e3d6e1; border-radius: 9px; background: #fff; min-width: 190px; min-height: 44px; flex: 1; max-width: 360px; }
.search-box .icon { width: 18px; color: #988496; }
.search-box input { border: 0; background: none; padding: 10px 0; outline: none; width: 100%; min-width: 0; font-size: 14px; color: var(--text); }
.search-box input::placeholder { color: #a38fa1; }
.search-box:focus-within { outline: 2px solid #c099bb; outline-offset: 1px; }
.filter-select { font-size: 13px; border: 1px solid #e3d6e1; border-radius: 9px; min-height: 44px; padding: 10px 28px 10px 12px; background: white; color: #785974; max-width: 205px; }
.tabs { display: flex; padding: 0 24px; gap: 30px; border-bottom: 1px solid var(--line); overflow-x: auto; scrollbar-width: thin; }
.tab { padding: 18px 0; font-size: 14px; color: #856f82; position: relative; white-space: nowrap; min-height: 52px; }
.tab.active { color: var(--green); font-weight: 650; }
.tab.active::after { content: ""; height: 3px; position: absolute; bottom: 0; left: 0; right: 0; background: #733e6c; border-radius: 3px 3px 0 0; }
.tab small { margin-left: 6px; font-size: 11px; border-radius: 5px; background: #f3e8f1; padding: 2px 6px; color: #8f718b; }
.tab.active small { background: #eddceb; color: #793b71; }
.pagination { padding: 16px 24px; display: flex; justify-content: space-between; align-items: center; gap: 10px; border-top: 1px solid var(--line); font-size: 12px; color: #887085; }
.page-controls { display: flex; align-items: center; gap: 8px; }
.page-number { color: #7b3d73; background: #f2e6f1; min-width: 34px; height: 34px; display: grid; place-items: center; border-radius: 7px; }
.mobile-menu { display: none; }
.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.field { display: grid; gap: 8px; text-align: left; min-width: 0; }
.field > span { font-size: 14px; color: #684263; font-weight: 550; }
.field > small { font-size: 12px; color: #927b8f; line-height: 1.8; }
.field input, .field select, .field textarea { width: 100%; min-width: 0; border: 1px solid #e3d6e1; background: #fff; color: #522a4d; border-radius: 9px; padding: 12px 14px; font-size: 14px; min-height: 47px; outline: none; transition: box-shadow .18s, border-color .18s; }
.field input:hover, .field select:hover, .field textarea:hover { border-color: #c4acc1; }
.field input:focus, .field select:focus, .field textarea:focus { border-color: #986b92; box-shadow: 0 0 0 3px #be97b925; }
.field textarea { min-height: 110px; resize: vertical; }
.field input::placeholder, .field textarea::placeholder { color: #a995a6; }
.field.full { grid-column: 1 / -1; }
.required { color: #b07a45; }
.form-error { color: #a85145; background: #fbede8; font-size: 13px; padding: 12px 14px; border-radius: 9px; white-space: pre-line; }
.form-error:empty { display: none; }
.form-actions { display: flex; align-items: center; justify-content: flex-end; gap: 12px; padding-top: 25px; }
.checkbox { display: flex; align-items: flex-start; gap: 10px; font-size: 14px; line-height: 1.8; color: #784f73; }
.checkbox input { accent-color: var(--green); margin: 6px 0 0; width: 16px; height: 16px; }
.settings-body { padding: 4px 26px 27px; max-width: 850px; }
.settings-body h3 { margin-bottom: 20px; }
.settings-grid { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 24px; }
.invite-code { font-size: 22px; letter-spacing: 2px; background: #f6ecf5; border: 1px dashed #dac0d6; border-radius: 11px; padding: 21px 14px; text-align: center; color: #7c3973; font-family: ui-monospace, monospace; margin: 18px 0; overflow-wrap: anywhere; }
.rules-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; }
.rule-card { padding: 26px; }
.rule-card .rule-number { font-size: 12px; color: #9e7c99; margin-bottom: 12px; letter-spacing: 2px; }
.rule-card h2 { font-size: 19px; margin-bottom: 11px; }
.rule-description { font-size: 14px; color: #896c85; line-height: 1.9; white-space: pre-wrap; overflow-wrap: anywhere; min-height: 52px; }
.rule-amounts { display: flex; gap: 40px; border-top: 1px solid var(--line); margin-top: 22px; padding-top: 18px; }
.rule-amounts strong { font-size: 28px; font-weight: 550; color: #7c3973; }
.rule-amounts small { font-size: 12px; color: #92778e; margin-left: 5px; }
.rule-amounts label { display: block; font-size: 12px; color: #92778e; }
.audit-item { display: flex; gap: 20px; padding: 19px 24px; border-bottom: 1px solid var(--line); font-size: 14px; }
.audit-item:last-child { border-bottom: 0; }
.audit-item time { color: #90768c; font-size: 12px; white-space: nowrap; }
.audit-item p { color: #8b6e87; font-size: 13px; overflow-wrap: anywhere; margin-top: 5px; }
.score-total { font-size: 17px; color: #7b3471; font-weight: 650; }
.caps-note { font-size: 12px; color: #8d7189; padding: 16px 24px; border-bottom: 1px solid var(--line); background: #fbf6fb; }
.pill { display: inline-flex; align-items: center; padding: 3px 8px; background: #f4e7f2; border: 1px solid #e7d2e4; border-radius: 6px; font-size: 12px; font-weight: 450; color: #83587d; white-space: nowrap; }
.download-link { display: inline-flex; align-items: center; gap: 5px; font-size: 13px; min-height: 44px; }
.boot { min-height: 100vh; display: grid; align-content: center; justify-items: center; gap: 20px; color: #896d86; font-size: 14px; }

/* A college identity panel and a focused sign-in surface. */
.auth-layout { min-height: 100vh; display: grid; grid-template-columns: minmax(0, .94fr) minmax(0, 1.06fr); background: #f7f3f7; }
.auth-story { background: #461b41; position: relative; isolation: isolate; padding: 44px clamp(38px, 6vw, 100px) 30px; display: flex; flex-direction: column; justify-content: space-between; overflow: hidden; }
.auth-story::before { content: ""; position: absolute; width: 680px; height: 680px; left: -290px; top: 45%; border: 1px solid #dbafd50e; background: #be98b905; border-radius: 50%; z-index: -1; }
.auth-story::after { content: ""; position: absolute; width: 450px; height: 450px; right: -290px; top: -140px; border: 1px solid #dbafd517; border-radius: 50%; z-index: -1; }
.auth-story .brand-mark { background: #e2bedd; color: #4e2549; height: 46px; width: 46px; }
.auth-story .brand-title { color: #f4e9f2; }
.auth-story .brand-title span, .auth-story .brand-subtitle { color: #ceb9cb !important; }
.auth-story .brand-caption { color: #ad91a9; }
.auth-intro { max-width: 460px; width: 100%; margin: 40px 0 28px; position: relative; z-index: 1; }
.auth-intro .eyebrow { font-size: 11px; color: #cca1c6; letter-spacing: 2.5px; margin-bottom: 17px; }
.auth-intro h1 { font-size: clamp(32px, 3.05vw, 47px); line-height: 1.6; font-weight: 500; color: #f5eaf3; letter-spacing: 1px; }
.auth-intro > p { font-size: 14px; color: #c8b4c6; line-height: 1.95; margin-top: 18px; max-width: 360px; }
.auth-art { height: 215px; display: flex; justify-content: center; align-items: center; margin-top: 8px; }
.auth-art .hero-visual { transform: scale(1.23); margin: 0 0 0 -15px; }
.auth-art .orbit { border-color: #e0bbdb1c; }
.auth-art .orbit::after { border-color: #e0bbdb12; }
.auth-art .check-orb { border-color: #461b41; }
.auth-steps { display: flex; gap: 21px; margin-top: 10px; flex-wrap: wrap; }
.auth-step { font-size: 12px; color: #d4bbd1; display: flex; align-items: center; gap: 8px; white-space: nowrap; }
.auth-step b { border: 1px solid #c599bf2f; background: #c599bf08; border-radius: 50%; font-size: 10px; width: 25px; height: 25px; display: grid; place-items: center; font-weight: 450; color: #d19dca; }
.auth-story-foot { font-size: 12px; color: #a28a9f; letter-spacing: .4px; position: relative; z-index: 1; }
.auth-form-wrap { padding: 52px 7%; display: flex; justify-content: center; align-items: center; position: relative; background: radial-gradient(ellipse at 100% 0, #eedeec55, transparent 55%); }
.auth-form { max-width: 440px; width: 100%; padding: 38px 38px 30px; border: 1px solid #e9dde7; border-radius: 23px; background: #fff; box-shadow: 0 18px 60px #4d214710, 0 2px 8px #4d214703; }
.auth-form .eyebrow { margin-bottom: 11px; color: #93728f; font-size: 10px; letter-spacing: 1.8px; }
.auth-form h2 { font-size: 27px; color: #482a44; letter-spacing: .2px; line-height: 1.5; }
.auth-form > p { font-size: 13px; color: #877485; margin-top: 9px; margin-bottom: 28px; line-height: 1.8; }
.auth-form form { display: grid; gap: 19px; }
.auth-form .field input { min-height: 49px; background: #fdf9fc; }
.auth-form .field input:focus { background: #fff; }
.auth-form .btn.primary { width: 100%; margin-top: 7px; min-height: 49px; justify-content: center; }
.auth-form .btn.primary .icon { margin-left: 5px; }
.auth-switch { font-size: 13px !important; text-align: center; margin-top: 23px !important; margin-bottom: 0 !important; }
.auth-switch button { color: #763a6e; text-decoration: underline; text-underline-offset: 4px; font-size: 13px; padding: 6px 2px; }
.auth-form .small-print { font-size: 12px; line-height: 1.9; color: #958192; margin-top: 25px; padding-top: 21px; border-top: 1px solid #efe7ee; text-align: center; }
.auth-form .form-grid { gap: 14px; }
.auth-inline-logo { display: none; }
.auth-kicker { display: grid; place-items: center; width: 45px; height: 45px; border-radius: 13px; color: #875380; background: #f4e7f2; margin-bottom: 20px; }
#toast { position: fixed; bottom: 30px; left: 50%; transform: translateX(-50%) translateY(20px); padding: 14px 24px; background: #4d2248; color: #f5e9f3; z-index: 100; box-shadow: 0 6px 25px #31172e25; border-radius: 12px; opacity: 0; pointer-events: none; font-size: 14px; transition: .2s; max-width: 90%; text-align: center; }
#toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }
dialog { border: 1px solid #e5d8e3; border-radius: 20px; padding: 0; width: min(760px, calc(100% - 32px)); max-height: 90vh; max-height: 90dvh; color: var(--text); background: white; box-shadow: 0 25px 100px #331b3028; overscroll-behavior: contain; }
dialog::backdrop { background: #31192e66; backdrop-filter: blur(4px); }
.modal-head { padding: 22px 28px; border-bottom: 1px solid var(--line); display: flex; align-items: center; justify-content: space-between; gap: 16px; position: sticky; top: 0; background: #fff; z-index: 1; }
.modal-head h2 { font-size: 19px; }
.modal-body { padding: 28px; }
.detail-meta { display: flex; gap: 16px; font-size: 12px; color: #8e728a; flex-wrap: wrap; margin-top: 10px; }
.detail-title { font-size: 22px; line-height: 1.6; overflow-wrap: anywhere; min-width: 0; }
.detail-info { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 15px; background: #f7eef6; border: 1px solid #f0e5ee; border-radius: 12px; padding: 20px; margin: 23px 0; }
.detail-info label { display: block; font-size: 12px; color: #937790; margin-bottom: 6px; }
.detail-info strong { font-size: 14px; font-weight: 550; color: #7a3f72; overflow-wrap: anywhere; }
.detail-description { white-space: pre-wrap; overflow-wrap: anywhere; font-size: 14px; color: #7a5875; line-height: 1.9; }
.section-label { font-size: 14px; font-weight: 600; color: #713a6a; margin: 24px 0 12px; }
.file-list { display: grid; gap: 10px; }
.attachment { border: 1px solid #e8dbe6; padding: 12px 14px; border-radius: 11px; display: flex; gap: 11px; align-items: center; }
.attachment .file-name { font-size: 14px; color: #7c4174; overflow-wrap: anywhere; flex: 1; min-width: 0; }
.attachment small { display: block; font-size: 12px; color: #987c95; }
.attachment .icon { color: #9c7097; }
.review-form { padding: 22px; border-radius: 14px; background: #f8eff7; border: 1px solid #ebdae9; margin-top: 26px; }
.review-form h3 { font-size: 16px; margin-bottom: 19px; }
.review-form .form-grid { gap: 17px; }
.timeline { display: grid; gap: 18px; padding: 6px 0 0 10px; }
.timeline-item { position: relative; border-left: 1px solid #e3cee0; padding: 0 0 5px 20px; }
.timeline-item::before { content: ""; position: absolute; height: 8px; width: 8px; background: #bc8bb5; border: 3px solid white; border-radius: 50%; left: -7px; top: 4px; box-sizing: content-box; }
.timeline-item strong { font-size: 13px; font-weight: 550; color: #7f4577; }
.timeline-item time { font-size: 12px; color: #9c8099; margin-left: 10px; }
.timeline-item p { font-size: 13px; color: #916e8c; margin-top: 5px; white-space: pre-wrap; overflow-wrap: anywhere; }
.upload-zone { background: #faf3f9; border: 1px dashed #c4a0bf; border-radius: 13px; padding: 26px 20px; text-align: center; }
.upload-zone .icon { width: 30px; height: 30px; color: #a778a1; margin-bottom: 10px; }
.upload-zone .field { display: block; text-align: center; }
.upload-zone input { display: block; margin: 15px auto 0; max-width: 100%; font-size: 12px; color: #8b6686; min-height: 44px; padding: 0; border: 0; background: none; }
.upload-zone input::file-selector-button { min-height: 44px; padding: 9px 14px; border: 1px solid #d8b9d4; border-radius: 8px; background: #f2e4f0; color: #823f79; margin-right: 10px; font: inherit; cursor: pointer; }
.upload-zone p { font-size: 12px; color: #967191; margin-top: 8px; }
.rule-edit { padding: 22px 0; border-bottom: 1px solid var(--line); }
.rule-edit:first-child { padding-top: 0; }
.rule-edit .form-grid { gap: 16px; }
.rule-edit + .rule-edit { margin-top: 6px; }
.check-label { display: flex; align-items: flex-start; gap: 9px; color: #82487a; font-size: 14px; margin-top: 20px; }
.check-label input { accent-color: var(--green); flex-shrink: 0; margin-top: 5px; }
.viewer-image { display: block; width: auto; max-width: 100%; max-height: 65vh; margin: auto; }
.viewer-pdf { width: 100%; height: 65vh; border: 1px solid var(--line); }
.mobile-backdrop { display: none; }

@media (min-width: 1600px) {
  .page { padding-top: 40px; }
  .hero { min-height: 222px; }
  .metrics { gap: 22px; }
  .metric { padding: 22px 25px; }
  .dashboard-grid { grid-template-columns: minmax(0, 1fr) 330px; }
  .auth-story { padding-left: max(100px, calc((100vw - 1500px) / 2)); }
  .auth-intro { margin: 55px 0 40px; }
  .auth-art { height: 250px; }
}
@media (max-width: 1250px) {
  .sidebar { width: 218px; padding-left: 14px; padding-right: 14px; }
  .sidebar .brand { padding: 0 9px; }
  .main { margin-left: 218px; }
  .page { padding: 29px 27px; }
  .topbar { padding: 15px 27px; }
  .dashboard-grid { grid-template-columns: minmax(0, 1fr) 285px; gap: 20px; }
  .metrics { gap: 13px; }
  .metric { padding: 18px 17px; }
  .metric-value { font-size: 32px; }
  .dashboard-table .optional-col { display: none; }
  .hero { padding: 27px; }
  .hero-visual { margin-right: 0; width: 240px; }
  .hero h2 { font-size: 23px; }
  .settings-grid { grid-template-columns: minmax(0, 1fr) 290px; }
  .panel-head { padding: 21px; }
  .panel-content { padding: 0 21px 22px; }
  .deadline-top { padding-left: 21px; padding-right: 21px; }
  .auth-story { padding: 39px 42px 28px; }
  .auth-form-wrap { padding: 45px 6%; }
  .auth-form { padding: 32px; }
  .auth-intro h1 { font-size: 36px; }
  .auth-steps { gap: 14px; }
}
@media (max-width: 1050px) {
  .dashboard-grid { grid-template-columns: minmax(0, 1fr); }
  .dashboard-aside { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; align-items: start; }
  .side-panel + .side-panel { margin-top: 0; }
  .metrics { gap: 12px; }
  .metric { padding: 17px 15px; }
  .metric-icon { width: 28px; height: 28px; border-radius: 8px; }
  .metric-icon .icon { width: 16px; height: 16px; }
  .metric-top { font-size: 13px; }
  .top-right { gap: 13px; }
  .role-label { display: none; }
  .settings-grid { grid-template-columns: minmax(0, 1fr); }
  .hero-visual { width: 190px; transform: scale(.86); margin-right: -10px; }
  .hero h2 { font-size: 21px; }
  .hero p { max-width: 330px; }
  .auth-story { padding: 36px 32px 27px; }
  .auth-intro h1 { font-size: 32px; }
  .auth-intro > p { font-size: 13px; }
  .auth-steps { gap: 10px; }
  .auth-step { gap: 6px; }
  .auth-form-wrap { padding: 38px 7%; }
  .auth-form { padding: 30px 28px; }
  .auth-form h2 { font-size: 25px; }
}
@media (max-width: 1050px) and (min-width: 901px) {
  .sidebar { width: 196px; padding-left: 10px; padding-right: 10px; }
  .main { margin-left: 196px; }
  .sidebar .brand { gap: 8px; }
  .sidebar .brand-mark { width: 37px; height: 40px; }
  .sidebar .brand-title { font-size: 20px; }
  .sidebar .brand-subtitle { margin-left: 5px; }
  .sidebar .brand-caption { font-size: 9px; letter-spacing: 1px; }
  .metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .page { padding: 26px 22px; }
  .page-header { align-items: flex-start; gap: 15px; }
  .page-header h1 { font-size: 25px; }
  .page-header p { font-size: 13px; }
  .hero { padding: 25px; }
  .hero-visual { position: absolute; right: -28px; opacity: .5; }
  .hero-content { max-width: 85%; }
  .dashboard-aside { grid-template-columns: 1fr; }
  .side-panel + .side-panel { margin-top: 0; }
  .auth-story { padding-left: 26px; padding-right: 26px; }
  .auth-intro h1 { font-size: 29px; }
  .auth-step { font-size: 12px; }
  .auth-steps { display: grid; grid-template-columns: 1fr; gap: 10px; }
  .auth-art { height: 180px; }
  .auth-art .hero-visual { position: relative; right: auto; opacity: 1; }
}
@media (max-width: 900px) {
  .sidebar { transform: translateX(-100%); visibility: hidden; transition: transform .2s, visibility .2s; width: 250px; }
  .sidebar.open { transform: translateX(0); visibility: visible; }
  .mobile-backdrop.visible { display: block; position: fixed; inset: 0; background: #391f3666; z-index: 19; backdrop-filter: blur(2px); }
  .main { margin-left: 0; }
  .mobile-menu { display: inline-grid; }
  .topbar { min-height: 72px; padding: 12px 20px; }
  .topbar .breadcrumbs { gap: 9px; }
  .page { padding: 27px 22px; }
  .page-header { margin-bottom: 23px; gap: 20px; }
  .page-header h1 { font-size: 26px; }
  .page-header p { max-width: 340px; font-size: 13px; line-height: 1.8; }
  .hero { padding: 26px; min-height: 201px; }
  .hero h2 { font-size: 23px; }
  .hero p { max-width: 300px; }
  .hero-visual { width: 170px; transform: scale(.82); transform-origin: center; margin-right: -22px; }
  .metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
  .metric { padding: 20px; }
  .metric-top { font-size: 14px; }
  .metric-value { font-size: 33px; }
  .metric-icon { width: 33px; height: 33px; border-radius: 10px; }
  .metric-icon .icon { width: 18px; height: 18px; }
  .rules-grid { gap: 17px; }
  .rule-card { padding: 21px; }
  .settings-body { padding: 3px 22px 24px; }
  .auth-layout { grid-template-columns: minmax(0, 1fr); min-height: 100vh; background: #f5eff4; }
  .auth-story { display: none; }
  .auth-form-wrap { padding: 40px 24px; min-height: 100vh; min-height: 100dvh; align-items: center; background: radial-gradient(ellipse at 50% 0, #e9d6e7 0, #f5eff4 64%); }
  .auth-form { max-width: 430px; padding: 32px; border-radius: 21px; }
  .auth-inline-logo { display: flex; margin-bottom: 31px; padding-bottom: 24px; border-bottom: 1px solid #efe5ee; }
  .auth-form h2 { font-size: 26px; }
  .auth-form .eyebrow { font-size: 10px; }
  .auth-form .form-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .modal-body { padding: 24px; }
  .modal-head { padding: 18px 24px; }
  .footer { font-size: 12px; }
  .top-right .period { font-size: 12px; }
  .tabs { gap: 27px; }
  .toolbar { padding: 17px 20px; }
  .search-box { max-width: none; }
}
@media (max-width: 540px) {
  .page { padding: 24px 17px; }
  .page-header { align-items: flex-start; gap: 13px; }
  .page-header h1 { font-size: 24px; }
  .page-header > .btn { padding: 10px 12px; font-size: 13px; flex-shrink: 0; }
  .page-header > .btn .icon { width: 17px; height: 17px; }
  .page-header p { max-width: 245px; font-size: 13px; }
  .greeting-spark { font-size: 23px; margin-left: 6px; }
  .topbar { padding: 10px 13px; min-height: 67px; gap: 8px; }
  .topbar > .flex { gap: 3px; }
  .topbar .breadcrumbs { font-size: 13px; }
  .topbar .breadcrumbs span:first-child, .topbar .breadcrumbs .crumb-divider { display: none; }
  .top-right { gap: 8px; }
  .topbar .period { font-size: 12px; max-width: 168px; padding: 5px 8px; overflow: hidden; }
  .topbar .period .icon { display: none; }
  .top-right .avatar { width: 36px; height: 36px; font-size: 12px; }
  .hero { padding: 24px 22px; min-height: 204px; margin-bottom: 20px; }
  .hero h2 { font-size: 22px; }
  .hero p { font-size: 13px; max-width: 260px; }
  .hero .hero-sub { font-size: 12px; letter-spacing: .3px; }
  .hero-visual { position: absolute; right: -62px; top: 55px; opacity: .26; transform: scale(.88); }
  .hero-content { max-width: 100%; }
  .hero .btn { position: relative; }
  .metrics { gap: 12px; margin-bottom: 20px; }
  .metric { padding: 17px 15px; border-radius: 13px; }
  .metric-top { font-size: 13px; }
  .metric-icon { width: 28px; height: 28px; border-radius: 8px; }
  .metric-icon .icon { width: 16px; height: 16px; }
  .metric-value { font-size: 32px; margin-top: 8px; }
  .metric-note { font-size: 12px; line-height: 1.65; }
  .dashboard-aside { grid-template-columns: minmax(0, 1fr); }
  .form-grid, .rules-grid { grid-template-columns: minmax(0, 1fr); }
  .auth-form .form-grid { grid-template-columns: minmax(0, 1fr); }
  .auth-form-wrap { padding: 24px 17px; }
  .auth-form { padding: 27px 24px; border-radius: 19px; }
  .auth-inline-logo { margin-bottom: 27px; padding-bottom: 23px; }
  .auth-form h2 { font-size: 25px; }
  .auth-form > p { font-size: 13px; }
  .auth-form .field input, .field input, .field select, .field textarea, .search-box input { font-size: 16px; }
  .auth-form .small-print { font-size: 12px; }
  .detail-info { grid-template-columns: repeat(2, minmax(0, 1fr)); padding: 18px; }
  .detail-info > div:last-child { grid-column: 1 / -1; }
  .detail-title { font-size: 19px; }
  .modal-body > .between { align-items: flex-start; gap: 10px; }
  .form-actions { flex-wrap: wrap; }
  .form-actions .btn { flex: 1; }
  .footer span:last-child { display: none; }
  dialog { width: calc(100% - 24px); border-radius: 17px; }
  .modal-body { padding: 20px; }
  .modal-head { padding: 17px 20px; }
  .modal-head h2 { font-size: 17px; }
  .panel-head { padding: 20px; gap: 10px; }
  .panel-head h2 { font-size: 16px; }
  .panel-content { padding: 0 20px 22px; }
  .deadline-top { padding-left: 20px; padding-right: 20px; }
  .empty { padding: 43px 21px; }
  .table-foot { padding: 15px 20px; }
  .filter-select { max-width: 100%; flex: 1; min-width: 110px; }
  .search-box { min-width: 100%; }
  .audit-item { flex-direction: column; gap: 6px; padding: 18px 20px; }
  .audit-item .row-action { align-self: flex-start; }
  .settings-body { padding: 2px 20px 22px; }
  .settings-grid { gap: 20px; }
  .review-form { padding: 18px; }
  .tabs { padding: 0 20px; gap: 25px; }
  .tab { font-size: 13px; }
  .pagination { padding: 14px 15px; }
  .page-controls { gap: 4px; }
  .attachment { flex-wrap: wrap; gap: 8px; padding: 12px; }
  .attachment .file-name { flex-basis: calc(100% - 35px); }
  .attachment > .btn { margin-left: 28px; }
  .timeline-item time { display: block; margin-left: 0; }
}
@media (max-width: 360px) {
  .page { padding: 22px 13px; }
  .page-header { flex-wrap: wrap; }
  .page-header > div { flex-basis: 100%; }
  .page-header > .btn { min-height: 44px; }
  .page-header p { max-width: none; }
  .hero { padding: 23px 19px; }
  .hero h2 { font-size: 20px; }
  .hero p { max-width: 230px; }
  .metric { padding: 15px 12px; }
  .metric-top { font-size: 12px; }
  .metric-icon { width: 25px; height: 25px; }
  .metric-value { font-size: 30px; }
  .metric-note { font-size: 12px; }
  .topbar { padding-left: 8px; padding-right: 8px; }
  .topbar .period { max-width: 135px; font-size: 12px; }
  .top-right { gap: 4px; }
  .auth-form-wrap { padding: 19px 13px; }
  .auth-form { padding: 24px 20px; }
  .auth-form h2 { font-size: 24px; }
  .auth-form .small-print { font-size: 12px; }
  .modal-body { padding: 17px; }
  .modal-head { padding: 14px 17px; }
  .detail-info { gap: 12px; padding: 16px; }
  .review-form { padding: 15px; }
  .settings-grid .panel-content > .flex { flex-wrap: wrap; gap: 7px; }
  .panel-head { padding: 19px 17px; }
  .panel-content { padding: 0 17px 20px; }
  .deadline-top { padding-left: 17px; padding-right: 17px; }
}
@media (max-height: 780px) and (min-width: 901px) {
  .auth-story { padding-top: 32px; padding-bottom: 26px; }
  .auth-intro { margin-top: 28px; margin-bottom: 23px; }
  .auth-intro h1 { font-size: 35px; }
  .auth-art { height: 170px; }
  .auth-art .hero-visual { transform: scale(1.08); }
  .auth-steps { margin-top: 3px; }
  .sidebar { padding-top: 24px; }
  .workspace { margin-top: 24px; margin-bottom: 20px; }
  .sidebar-bottom { padding-top: 15px; }
  .help-note { padding-bottom: 16px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition: none !important; animation: none !important; }
}

/* The college identity follows the supplied purple seal and wordmark. */
:root {
  --bg: #faf8fb;
  --ink: #40233c;
  --text: #594a56;
  --muted: #7c737c;
  --line: #eae3eb;
  --green: #74256a;
  --green-deep: #4e1947;
  --green-soft: #f6edf5;
}
.school-brand { gap: 10px; }
.school-brand .school-seal { width: 45px; height: 45px; object-fit: contain; flex-shrink: 0; mix-blend-mode: multiply; }
.school-brand .brand-title { font-size: 16px; letter-spacing: 1px; line-height: 1.6; }
.school-brand .brand-caption { font-size: 11px; letter-spacing: 1.4px; color: #96798e; }
.sidebar { background: #fefcfe; }
.sidebar-brand-row { display: flex; align-items: center; justify-content: space-between; gap: 6px; }
.sidebar-close { display: none; }
.nav button.active { background: #f2e7f1; color: #74256a; }
.nav button.active::before { background: #8d3980; }
.nav-admin-label { margin-top: 22px; }
.hero { background: #57214e; border-color: #57214e; min-height: 184px; padding-top: 25px; padding-bottom: 25px; }
.hero h2 { color: #fbf3fa; font-size: 23px; }
.hero p { color: #dac4d4; margin-bottom: 16px; }
.hero .hero-sub { color: #e3c5dd; display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.hero .btn { background: #f7ebf4; border-color: #f7ebf4; color: #743663; }
.hero-status { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; line-height: 1.6; padding: 3px 8px; background: #ffffff0e; border: 1px solid #e4c0dd33; border-radius: 6px; letter-spacing: 0; color: #efd6e9; }
.hero-status .dot { background: #dba7ca; height: 5px; width: 5px; }
.hero .check-orb { border-color: #57214e; }
.metric[data-tone="clock"] .metric-icon { color: #aa8248; background: #fbf4e8; }
.metric[data-tone="check"] .metric-icon { color: #6b8872; background: #eef5ee; }
.metric[data-tone="refresh"] .metric-icon { color: #9d7582; background: #f9f0f2; }
.status.approved { color: #4b793e; background: #edf5e7; }
.auth-layout { background: #fcfafc; }
.auth-story { background: #f2eaf3; }
.auth-story::before { background: #e7d2e63b; border-color: #d7bfd545; width: 640px; height: 640px; left: -295px; top: 52%; }
.auth-story::after { border-color: #d7bfd545; background: #ebddec38; }
.institution-brand { max-width: 455px; width: 100%; position: relative; z-index: 1; }
.institution-brand img { display: block; width: 100%; height: auto; object-fit: contain; mix-blend-mode: multiply; }
.institution-brand > span { display: block; padding-left: 2px; margin-top: 16px; font-size: 12px; letter-spacing: 3px; color: #926789; }
.auth-intro .eyebrow { color: #a8759f; }
.auth-intro h1 { color: #602655; }
.auth-intro > p { color: #83667b; }
.auth-step { color: #845678; }
.auth-step b { border-color: #c8a7c255; background: #faf5fa55; color: #a27596; }
.auth-story-foot { color: #92768a; }
.auth-form-wrap { background: radial-gradient(ellipse at 100% 0, #f2e8f34d, transparent 65%); flex-direction: column; }
.auth-form { box-shadow: 0 18px 60px #6c345110, 0 2px 8px #6c345103; border-color: #ece4ec; }
.auth-form h2 { color: #512847; }
.auth-form .eyebrow { color: #a57b9a; }
.auth-form .field input { background: #fefcfe; }
.auth-form .field input:focus { background: #fff; }
.auth-kicker { color: #965286; background: #f7eef5; width: 40px; height: 40px; border-radius: 12px; margin-bottom: 17px; }
.auth-form .small-print { display: flex; justify-content: center; align-items: flex-start; gap: 7px; font-size: 12px; color: #877380; }
.auth-form .small-print .icon { width: 15px; height: 15px; margin-top: 4px; }
.auth-period { display: block; font-size: 12px; color: #8b7786; margin-top: 2px; }
.auth-form > p { margin-bottom: 21px; }
.auth-tabs { display: flex; gap: 3px; padding: 4px; margin: 0 0 24px; background: #f7f2f7; border: 1px solid #f0e8f0; border-radius: 10px; }
.auth-tabs button { flex: 1; padding: 9px 8px; border-radius: 7px; min-height: 40px; font-size: 13px; color: #897282; }
.auth-tabs button.active { color: #74256a; background: #fff; font-weight: 600; box-shadow: 0 1px 5px #6a3d5c0b; }
.auth-tabs button:hover:not(.active) { color: #74256a; background: #f1e8f0; }
.auth-art { position: relative; max-width: 440px; }
.auth-art .hero-visual { position: relative; }
.auth-art .orbit { border-color: #b893b92b; }
.auth-art .orbit::after { border-color: #b893b926; }
.auth-art .check-orb { border-color: #f2eaf3; background: #7f396f; color: #fff; }
.auth-art .folder { box-shadow: 0 14px 24px #794e6e14; }
.auth-art-tag { position: absolute; z-index: 2; display: flex; align-items: center; gap: 7px; padding: 10px 13px; color: #89617e; font-size: 12px; background: #fffdfcf2; border: 1px solid #ffffff; border-radius: 10px; box-shadow: 0 8px 20px #794e6e09; white-space: nowrap; }
.auth-art-tag .icon { width: 16px; height: 16px; color: #b68aab; }
.auth-art-tag.tag-one { left: -2px; top: 46px; transform: rotate(-5deg); }
.auth-art-tag.tag-two { right: 0; bottom: 30px; transform: rotate(4deg); }
.auth-mobile-footer { display: none; }
.mobile-category { display: none; }
.upload-selection { text-align: left; border-top: 1px solid #e8dde6; margin-top: 18px; padding-top: 15px; }
.upload-summary { font-size: 12px; color: #9c7f92; margin-bottom: 8px; }
.upload-file-row { display: flex; align-items: flex-start; gap: 8px; font-size: 13px; color: #79566c; padding: 7px 0; }
.upload-file-row .icon { width: 16px; height: 16px; margin: 3px 0 0; color: #a5859a; }
.upload-file-row > span { min-width: 0; flex: 1; overflow-wrap: anywhere; }
.upload-file-row > small { flex-shrink: 0; color: #a08a97; font-size: 12px; padding-top: 1px; }
.upload-selection > p { font-size: 12px; color: #9c8594; }
@media (min-width: 1600px) {
  .hero { min-height: 195px; }
}
@media (max-width: 1250px) {
  .school-brand .brand-title { font-size: 15px; letter-spacing: .5px; }
  .school-brand .brand-caption { font-size: 11px; letter-spacing: .6px; }
  .school-brand .school-seal { width: 42px; height: 42px; }
  .hero h2 { font-size: 21px; }
  .auth-art-tag { padding: 9px 10px; }
}
@media (max-width: 1050px) and (min-width: 901px) {
  .sidebar .brand { padding-left: 5px; padding-right: 5px; gap: 8px; }
  .sidebar .school-brand .school-seal { width: 38px; height: 38px; }
  .sidebar .school-brand .brand-title { font-size: 14px; letter-spacing: .4px; }
  .sidebar .school-brand .brand-caption { font-size: 10px; letter-spacing: .3px; }
  .auth-art-tag { font-size: 11px; padding: 8px; }
  .auth-art-tag.tag-one { left: -12px; }
  .auth-art-tag.tag-two { right: -12px; }
}
@media (max-width: 900px) {
  body.mobile-nav-open { overflow: hidden; }
  .sidebar-close { display: inline-grid; }
  .sidebar-brand-row .brand { padding-left: 4px; padding-right: 0; }
  .sidebar .school-brand .brand-title { font-size: 15px; }
  .sidebar .school-brand .brand-caption { font-size: 11px; }
  .sidebar .school-brand .school-seal { width: 42px; height: 42px; }
  .auth-form-wrap { background: radial-gradient(ellipse at 50% 0, #eddfed 0, #faf7fa 67%); }
  .auth-mobile-footer { display: block; font-size: 12px; color: #a58c9e; margin-top: 24px; text-align: center; letter-spacing: .5px; }
  .auth-inline-logo .school-brand .brand-title { font-size: 18px; letter-spacing: 1px; }
  .auth-inline-logo .school-brand .brand-caption { font-size: 12px; letter-spacing: 1.5px; }
  .auth-inline-logo .school-brand .school-seal { width: 51px; height: 51px; }
  .auth-form .auth-kicker { display: none; }
  .hero { min-height: 183px; }
}
@media (max-width: 640px) {
  .materials-wrap { overflow: visible; }
  .materials-table, .materials-table tbody { display: block; width: 100%; }
  .materials-table thead { display: none; }
  .materials-table tr { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 15px 18px; padding: 20px; border-top: 1px solid var(--line); }
  .materials-table td { display: block; border: 0; padding: 0; white-space: normal; min-width: 0; }
  .materials-table .material-main { grid-column: 1 / -1; }
  .materials-table .material-title { align-items: flex-start; gap: 11px; }
  .materials-table .title-cell { min-width: 0; max-width: none; flex: 1; }
  .materials-table .title-cell strong { display: block; font-size: 14px; line-height: 1.8; }
  .materials-table .title-cell small { font-size: 12px; line-height: 1.8; }
  .materials-table .mobile-category { display: inline; }
  .materials-table .material-category { display: none; }
  .materials-table .material-owner::before, .materials-table .material-score::before { content: attr(data-label); display: block; font-size: 12px; color: #8d7185; margin-bottom: 4px; }
  .materials-table .material-owner { font-size: 13px; color: #8c6b82; overflow-wrap: anywhere; }
  .materials-table .material-owner .small { font-size: 12px; }
  .materials-table .material-score { font-size: 15px; text-align: right; color: #76456a; }
  .materials-table .material-status { align-self: center; }
  .materials-table .material-action { justify-self: end; }
  .materials-table .row-action { padding: 9px 13px; min-height: 44px; background: #f6edf4; border: 1px solid #eddfeb; color: #74256a; border-radius: 9px; font-weight: 550; }
  .materials-table.is-student .material-score { grid-column: 1 / -1; text-align: left; display: flex; align-items: baseline; gap: 12px; }
  .materials-table.is-student .material-score::before { display: inline; margin: 0; }
  .materials-table .material-status .status { min-height: 28px; }
}
@media (max-width: 540px) {
  .hero .hero-sub { gap: 9px; }
  .hero h2 { font-size: 21px; }
  .hero p { margin-bottom: 18px; }
  .hero-status { font-size: 11px; }
  .auth-inline-logo { margin-bottom: 24px; padding-bottom: 23px; }
  .auth-form .auth-tabs { margin-bottom: 23px; }
  .auth-form .auth-tabs button { min-height: 44px; }
  .auth-form .small-print { gap: 5px; font-size: 12px; }
  .auth-form .small-print .icon { width: 14px; height: 14px; }
  .auth-form .small-print span { min-width: 0; }
  .auth-form .auth-switch button { min-height: 44px; }
}
@media (max-width: 360px) {
  .materials-table tr { padding: 18px 17px; gap: 14px; }
  .hero h2 { font-size: 19px; }
  .auth-inline-logo .school-brand .brand-title { font-size: 17px; }
  .auth-inline-logo .school-brand .brand-caption { font-size: 11px; letter-spacing: 1px; }
  .auth-inline-logo .school-brand .school-seal { width: 47px; height: 47px; }
  .auth-form .small-print { text-align: left; }
  .auth-mobile-footer { font-size: 12px; }
}
@media (max-width: 900px) {
  .auth-form-wrap > .auth-inline-logo { width: 100%; max-width: 430px; margin-bottom: 24px; padding: 0 5px; border: 0; }
}
@media (min-width: 901px) and (max-height: 820px) {
  .auth-form-wrap { padding-top: 30px; padding-bottom: 30px; }
  .auth-login .auth-form { padding-top: 29px; padding-bottom: 25px; }
  .auth-login .auth-kicker { display: none; }
  .auth-login .auth-form > p { margin-bottom: 18px; }
  .auth-login .auth-tabs { margin-bottom: 20px; }
  .auth-login .auth-form .small-print { margin-top: 21px; padding-top: 18px; }
}

@media (max-width: 480px) {
  .modal-body > .between { align-items: flex-start; flex-direction: column; gap: 10px; }
}

/* Sheet 2 categories keep each submission and review in a clear context. */
.catalog-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; margin: 0 0 18px; }
.catalog-heading > div { min-width: 0; }
.catalog-heading h2 { font-size: 19px; line-height: 1.5; }
.catalog-heading p { margin-top: 5px; font-size: 13px; line-height: 1.8; color: #7f6c79; }
.catalog-heading > small, .catalog-heading .catalog-source { display: block; max-width: 310px; font-size: 12px; line-height: 1.75; color: #8f7c89; }
.dimension-tabs { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; margin-bottom: 20px; min-width: 0; }
.dimension-tabs > button { display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: 5px; position: relative; min-width: 0; min-height: 79px; padding: 13px 15px; background: #fff; border: 1px solid #e8e0e8; border-radius: 12px; color: #786470; text-align: left; font-size: 14px; line-height: 1.6; transition: background .18s, border-color .18s, box-shadow .18s; }
.dimension-tabs > button:hover { border-color: #cba6c3; background: #fcf8fc; }
.dimension-tabs > button.active { background: #f7edf5; border-color: #b576a6; color: #74256a; box-shadow: inset 0 0 0 1px #b576a60b; }
.dimension-tabs > button.active::after { content: ""; width: 20px; height: 3px; border-radius: 2px; background: #8b3e7c; position: absolute; bottom: 0; left: 15px; }
.dimension-tabs > button > strong, .dimension-tabs > button > .dimension-label { font-size: 14px; font-weight: 550; line-height: 1.6; }
.dimension-tabs code, .dimension-tabs small, .dimension-tabs .dimension-code { color: #a18a9b; font-size: 11px; font-weight: 500; font-family: inherit; letter-spacing: .7px; }
.dimension-tabs > button.active code, .dimension-tabs > button.active small { color: #9d5d8f; }
.dimension-tabs .badge, .dimension-tabs .count, .dimension-tabs .pill { display: inline-grid; place-items: center; align-self: flex-start; min-width: 20px; min-height: 20px; padding: 0 5px; color: #98778e; background: #f4eef3; border: 0; border-radius: 5px; font-size: 11px; font-weight: 500; line-height: 1.7; letter-spacing: 0; }
.dimension-tabs > button.active .badge, .dimension-tabs > button.active .count, .dimension-tabs > button.active .pill { color: #864478; background: #efdeeb; }
.dimension-tabs > button > .flex, .dimension-tabs > button > .between { width: 100%; gap: 8px; }
.catalog-summary { display: flex; align-items: flex-start; justify-content: space-between; gap: 22px; padding: 17px 20px; margin-bottom: 18px; border-radius: 12px; border: 1px solid #ece4eb; background: #fcf9fc; }
.catalog-summary > div { min-width: 0; }
.catalog-summary h2, .catalog-summary h3 { font-size: 16px; color: #653453; }
.catalog-summary p { color: #88717e; font-size: 13px; line-height: 1.85; margin-top: 3px; }
.catalog-summary > span, .catalog-summary > small { font-size: 12px; color: #8a6d80; flex-shrink: 0; padding-top: 2px; }
.catalog-summary .pill { background: #f5eaf2; color: #98668a; border-color: #ebdce6; }
.item-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-bottom: 24px; min-width: 0; }
.item-card { position: relative; display: flex; flex-direction: column; min-width: 0; border: 1px solid #e7dfe7; border-radius: 14px; padding: 20px; background: #fff; box-shadow: 0 3px 14px #67345103; transition: border-color .18s, box-shadow .18s; }
.item-card:hover { border-color: #ceb1c6; box-shadow: 0 5px 18px #67345108; }
.item-card.selected { border-color: #a86797; box-shadow: 0 0 0 2px #ad79a113; background: #fffdff; }
.item-code { display: inline-flex; align-items: center; width: fit-content; min-height: 23px; border: 1px solid #e9dfeb; background: #f8f1f7; color: #98688c; border-radius: 5px; padding: 1px 7px; margin-bottom: 11px; font-size: 11px; line-height: 1.7; font-family: inherit; letter-spacing: .5px; }
.item-card-title { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.item-card-title h3, h3.item-card-title { font-size: 17px; line-height: 1.6; color: #5f3451; font-weight: 600; }
.item-card-title .item-code { flex-shrink: 0; margin-bottom: 0; }
.item-card-title .pill { max-width: 150px; white-space: normal; text-align: right; }
.item-card > h3 { font-size: 17px; line-height: 1.6; color: #5f3451; }
.item-card-desc { font-size: 13px; color: #8c7682; line-height: 1.85; margin-top: 8px; overflow-wrap: anywhere; }
.item-card-desc + .item-card-desc { margin-top: 5px; }
.item-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; padding-top: 18px; margin-top: auto; }
.item-stats > div, .item-stats > span { min-width: 0; padding-left: 12px; border-left: 1px solid #efe6ed; font-size: 12px; line-height: 1.7; color: #927588; }
.item-stats > :first-child { padding-left: 0; border-left: 0; }
.item-stats strong, .item-stats b { display: block; color: #70445f; font-size: 22px; line-height: 1.5; font-weight: 550; font-variant-numeric: tabular-nums; }
.item-stats small, .item-stats label { display: block; font-size: 12px; color: #977d8d; }
.item-stats .number { color: #70445f; }
.item-card-actions { display: flex; align-items: center; justify-content: flex-end; gap: 10px; flex-wrap: wrap; padding-top: 16px; margin-top: 17px; border-top: 1px solid #f0e8ef; }
.item-card-actions .btn { min-height: 42px; font-size: 13px; padding: 9px 13px; }
.item-card-actions > .small, .item-card-actions > small { margin-right: auto; color: #93798a; font-size: 12px; }
.item-card-actions > .btn:only-child { margin-left: auto; }
.catalog-picker { min-width: 0; }
.catalog-picker > p, .catalog-picker > .muted { font-size: 14px; color: #82707b; margin-bottom: 20px; }
.catalog-picker .dimension-tabs { gap: 8px; }
.catalog-picker .dimension-tabs > button { min-height: 75px; padding: 11px; font-size: 13px; }
.catalog-picker .dimension-tabs > button > strong, .catalog-picker .dimension-tabs > button > .dimension-label { font-size: 13px; }
.catalog-picker .dimension-tabs > button.active::after { left: 11px; }
.catalog-picker .catalog-summary { padding: 15px 17px; }
.catalog-picker .item-grid { margin-bottom: 0; }
.catalog-picker .item-card { padding: 18px; }
.catalog-picker .item-card-title h3, .catalog-picker h3.item-card-title { font-size: 16px; }
.catalog-picker .item-card-desc { font-size: 13px; }
.catalog-picker .item-card-actions { margin-top: auto; padding-top: 17px; border-top: 0; }
.catalog-picker .item-card-actions > .btn { flex: 1; }
.submission-context { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; background: #f8f0f7; border: 1px solid #eadce7; border-radius: 13px; padding: 19px 20px; margin-bottom: 25px; }
.submission-context > div { min-width: 0; }
.submission-context h2, .submission-context h3, .submission-context strong { font-size: 18px; line-height: 1.6; color: #70365f; }
.submission-context p, .submission-context small { display: block; font-size: 12px; line-height: 1.8; color: #9a758d; margin-top: 5px; }
.submission-context .pill { font-size: 11px; background: #fffafd; color: #99658a; border-color: #e9d7e4; margin-top: 7px; }
.submission-context .switch-item { flex-shrink: 0; align-self: flex-start; border: 1px solid #e3cede; background: #fffafd; color: #8e577d; border-radius: 9px; padding: 8px 11px; min-height: 42px; font-size: 12px; }
.submission-context .switch-item:hover { background: #fff; border-color: #bb8eae; }
.form-section { min-width: 0; padding-top: 24px; margin-top: 24px; border-top: 1px solid #ece4eb; }
.form-section:first-of-type { margin-top: 0; padding-top: 0; border-top: 0; }
.section-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 17px; font-size: 16px; font-weight: 600; color: #633b54; }
.section-heading h3, .section-heading h2 { font-size: 16px; color: #633b54; }
.section-heading .icon { width: 18px; height: 18px; color: #aa7b98; }
.section-heading > small { font-size: 12px; color: #99818f; font-weight: 400; }
.form-section-note { font-size: 13px; line-height: 1.85; color: #8a7581; margin-top: -6px; margin-bottom: 17px; }
.proof-guide { background: #faf5fa; border: 1px solid #ecdfeb; border-radius: 10px; padding: 15px 17px; margin-bottom: 19px; font-size: 13px; line-height: 1.85; color: #93657f; overflow-wrap: anywhere; }
.proof-guide strong { font-size: 13px; color: #794667; }
.proof-guide .icon { width: 17px; height: 17px; margin-right: 5px; color: #aa7c9a; }
.proof-guide p + p { margin-top: 5px; }
.proof-guide ul, .proof-guide ol { margin: 8px 0 0; padding-left: 20px; }
.policy-fields { min-width: 0; }
.policy-fields .field { align-content: start; }
.policy-fields .field > small { font-size: 12px; color: #917685; }
.score-guidance { min-width: 0; padding: 13px 15px; background: #fbf8fb; border: 1px solid #eee5ed; border-radius: 10px; font-size: 12px; line-height: 1.85; color: #917587; }
.score-guidance strong { display: block; font-size: 13px; color: #7d536b; margin-bottom: 4px; }
.score-guidance p + p { margin-top: 4px; }
.score-guidance .icon { width: 16px; height: 16px; color: #a17c92; }
.review-dialog { width: min(1060px, calc(100% - 40px)); }
.review-dialog .modal-body { padding: 26px; }
.review-layout { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 26px; align-items: start; min-width: 0; }
.review-layout > :first-child { min-width: 0; }
.review-layout .detail-title { font-size: 21px; }
.review-layout .detail-info { padding: 17px; gap: 12px; }
.review-layout .detail-info strong { font-size: 13px; }
.review-layout .detail-meta { gap: 7px 14px; }
.review-layout .section-label { margin-top: 23px; }
.review-sidebar { position: sticky; top: 96px; min-width: 0; }
.review-sidebar .review-form { margin-top: 0; padding: 20px; background: #fcf8fc; border-color: #e9dce6; }
.review-sidebar .review-form > h3 { font-size: 17px; color: #71385e; margin-bottom: 17px; }
.review-sidebar .form-grid { grid-template-columns: minmax(0, 1fr); gap: 17px; }
.review-sidebar .form-actions { padding-top: 20px; }
.review-sidebar .form-actions .btn { width: 100%; white-space: normal; }
.review-sidebar .field > span { font-size: 13px; }
.review-sidebar .field input, .review-sidebar .field select, .review-sidebar .field textarea { font-size: 14px; }
.review-sidebar .field textarea { min-height: 115px; }
.review-checklist { display: grid; min-width: 0; gap: 5px; padding: 13px 15px; margin: 17px 0; border: 1px solid #eee2eb; background: #fffafd; border-radius: 10px; }
.review-checklist > h3, .review-checklist > h4, .review-checklist > strong { font-size: 13px; font-weight: 600; color: #86526f; margin: 0 0 5px; }
.review-check { display: flex; align-items: flex-start; gap: 9px; min-height: 37px; padding: 6px 0; font-size: 14px; color: #7d5b70; line-height: 1.8; cursor: pointer; }
.review-check input { flex-shrink: 0; width: 16px; height: 16px; margin: 4px 0 0; accent-color: #8c3f7c; }
.review-check > span { min-width: 0; }
.review-reference { padding: 16px; border: 1px solid #eadde7; border-radius: 11px; background: #f7eff6; font-size: 12px; line-height: 1.9; color: #926681; overflow-wrap: anywhere; }
.review-reference + .review-form, .review-checklist + .review-form { margin-top: 18px; }
.review-reference strong, .review-reference h3 { display: block; margin: 0 0 6px; font-size: 13px; color: #784563; }
.review-reference p + p { margin-top: 7px; }
.review-reference ul { padding-left: 17px; margin: 7px 0 0; }
.review-reference a { text-decoration: underline; text-underline-offset: 3px; }
.detail-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 20px; padding: 0 18px; margin: 14px 0 20px; background: #fcfafc; border: 1px solid #eee6ed; border-radius: 11px; min-width: 0; }
.detail-fields > div { min-width: 0; padding: 14px 0; border-bottom: 1px solid #eee6ed; }
.detail-fields > div:nth-last-child(-n + 2) { border-bottom: 0; }
.detail-fields dt, .detail-fields label { display: block; margin: 0 0 5px; font-size: 12px; color: #a07f93; }
.detail-fields dd, .detail-fields strong { display: block; margin: 0; font-size: 14px; font-weight: 500; line-height: 1.75; color: #78546a; white-space: pre-wrap; overflow-wrap: anywhere; }
.detail-fields > .full { grid-column: 1 / -1; }
.catalog-rule-panel { border: 1px solid #e8dfe7; border-radius: 15px; background: #fff; margin-bottom: 22px; overflow: hidden; }
.catalog-rule-panel > .panel-head { background: #fcf9fc; border-bottom: 1px solid #eee5ed; }
.catalog-rule-panel > h2, .catalog-rule-panel > h3 { padding: 19px 22px; border-bottom: 1px solid #eee5ed; font-size: 18px; background: #fcf9fc; }
.catalog-rule-panel .item-grid { padding: 20px; margin: 0; }
.catalog-rule-panel .item-card { box-shadow: none; }
.catalog-rule-panel > .catalog-summary { border: 0; border-bottom: 1px solid #eee5ed; border-radius: 0; margin-bottom: 0; }
.catalog-rule-panel > .rule-note { padding: 15px 21px; margin: 0; background: #fcfafc; }
.bucket-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 15px; margin-bottom: 24px; }
.bucket-card { min-width: 0; padding: 20px 21px; border: 1px solid #e8e0e8; border-radius: 13px; background: #fff; }
.bucket-card > h3, .bucket-card > strong { display: block; font-size: 14px; font-weight: 550; color: #77506b; }
.bucket-card > code, .bucket-card > small, .bucket-card .bucket-code { display: inline-block; margin-bottom: 5px; font-size: 11px; font-family: inherit; letter-spacing: .6px; color: #a7869b; }
.bucket-value { margin-top: 9px; color: #76315f; font-size: 29px; font-weight: 600; line-height: 1.5; font-variant-numeric: tabular-nums; letter-spacing: -.5px; }
.bucket-value small, .bucket-value span { font-size: 12px; font-weight: 400; color: #a08093; margin-left: 6px; letter-spacing: 0; }
.bucket-card > p { font-size: 12px; color: #9b7c8f; margin-top: 4px; line-height: 1.8; }
@media (max-width: 1250px) {
  .dimension-tabs { gap: 8px; }
  .dimension-tabs > button { padding: 12px 11px; }
  .dimension-tabs > button.active::after { left: 11px; }
  .dimension-tabs > button > strong, .dimension-tabs > button > .dimension-label { font-size: 13px; }
  .item-card { padding: 19px; }
}
@media (max-width: 1050px) and (min-width: 901px) {
  .dimension-tabs { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .dimension-tabs > button { min-height: 70px; }
  .item-grid { gap: 13px; }
  .item-card { padding: 17px; }
  .item-card-actions { gap: 7px; }
  .item-card-actions .btn { padding: 9px 10px; font-size: 12px; }
}
@media (max-width: 900px) {
  .review-dialog { width: min(740px, calc(100% - 32px)); }
  .review-layout { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .review-sidebar { position: static; }
  .review-sidebar .review-form { padding: 21px; }
  .review-sidebar .form-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .review-sidebar .form-actions .btn { width: auto; }
  .review-layout .detail-title { font-size: 20px; }
  .review-checklist { gap: 3px; }
  .review-check { min-height: 42px; padding-top: 8px; padding-bottom: 8px; }
}
@media (max-width: 680px) {
  .catalog-heading { flex-direction: column; gap: 8px; }
  .catalog-heading > small, .catalog-heading .catalog-source { max-width: none; }
  .dimension-tabs { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 9px; margin-bottom: 18px; }
  .dimension-tabs > button { min-height: 72px; padding: 11px 12px; }
  .catalog-summary { padding: 16px 17px; gap: 12px; flex-wrap: wrap; }
  .catalog-summary > span, .catalog-summary > small { padding-top: 0; }
  .item-grid { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .item-card { padding: 20px; }
  .item-card-title h3, h3.item-card-title, .item-card > h3 { font-size: 17px; }
  .item-stats { padding-top: 17px; }
  .item-card-actions .btn { min-height: 44px; padding: 9px 13px; }
  .catalog-picker .dimension-tabs { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .catalog-picker .item-card { padding: 19px; }
  .catalog-picker .item-card-actions { padding-top: 15px; }
  .bucket-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .bucket-card { padding: 18px; }
  .catalog-rule-panel .item-grid { padding: 17px; }
}
@media (max-width: 540px) {
  .catalog-heading { margin-bottom: 16px; }
  .catalog-heading h2 { font-size: 18px; }
  .catalog-heading p { font-size: 13px; }
  .dimension-tabs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dimension-tabs > button { min-height: 72px; padding: 12px 13px; }
  .dimension-tabs > button > strong, .dimension-tabs > button > .dimension-label { font-size: 14px; }
  .dimension-tabs > button.active::after { left: 13px; }
  .catalog-picker .dimension-tabs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .catalog-picker .dimension-tabs > button { min-height: 68px; padding: 11px 12px; }
  .catalog-summary h2, .catalog-summary h3 { font-size: 15px; }
  .catalog-summary p { font-size: 13px; }
  .item-card { padding: 18px; }
  .item-card-title { gap: 9px; }
  .item-card-title .pill { max-width: 110px; }
  .item-card-title h3, h3.item-card-title, .item-card > h3 { font-size: 16px; }
  .item-card-desc { font-size: 13px; }
  .item-card-actions { justify-content: stretch; gap: 9px; }
  .item-card-actions > .btn { flex: 1; }
  .item-card-actions > .btn:only-child { margin-left: 0; }
  .item-card-actions > .small, .item-card-actions > small { flex-basis: 100%; }
  .submission-context { padding: 16px 17px; gap: 12px; flex-wrap: wrap; margin-bottom: 23px; }
  .submission-context h2, .submission-context h3, .submission-context strong { font-size: 17px; }
  .submission-context .switch-item { min-height: 44px; }
  .section-heading { gap: 8px; align-items: flex-start; flex-wrap: wrap; font-size: 15px; }
  .section-heading h3, .section-heading h2 { font-size: 15px; }
  .form-section { margin-top: 23px; padding-top: 23px; }
  .form-section-note, .proof-guide { font-size: 13px; }
  .proof-guide { padding: 14px 15px; }
  .policy-fields.form-grid { grid-template-columns: minmax(0, 1fr); }
  .review-dialog { width: calc(100% - 24px); }
  .review-dialog .modal-body { padding: 20px; }
  .review-layout { gap: 22px; }
  .review-sidebar .review-form { padding: 18px; }
  .review-sidebar .form-grid { grid-template-columns: minmax(0, 1fr); }
  .review-sidebar .field input, .review-sidebar .field select, .review-sidebar .field textarea { font-size: 16px; }
  .review-sidebar .form-actions .btn { width: 100%; }
  .review-checklist { padding: 12px 13px; }
  .review-check { font-size: 14px; min-height: 44px; }
  .review-reference { padding: 15px; }
  .detail-fields { padding: 0 15px; gap: 0 16px; }
  .detail-fields dd, .detail-fields strong { font-size: 14px; }
  .catalog-rule-panel > h2, .catalog-rule-panel > h3 { padding: 18px; font-size: 17px; }
  .catalog-rule-panel .item-grid { padding: 15px; }
  .catalog-rule-panel .item-card { padding: 17px; }
  .bucket-card { padding: 17px 15px; }
  .bucket-card > h3, .bucket-card > strong { font-size: 13px; }
  .bucket-value { font-size: 27px; }
}
@media (max-width: 360px) {
  .dimension-tabs { gap: 8px; }
  .dimension-tabs > button { padding: 11px; }
  .dimension-tabs > button > strong, .dimension-tabs > button > .dimension-label { font-size: 13px; }
  .dimension-tabs > button.active::after { left: 11px; }
  .catalog-summary { padding: 15px; }
  .item-card { padding: 17px; }
  .item-stats { gap: 8px; }
  .item-stats > div, .item-stats > span { padding-left: 9px; font-size: 12px; }
  .item-stats > :first-child { padding-left: 0; }
  .item-stats strong, .item-stats b { font-size: 21px; }
  .item-card-actions { gap: 7px; }
  .item-card-actions .btn { padding: 9px 10px; font-size: 12px; }
  .submission-context { padding: 15px; }
  .review-dialog .modal-body { padding: 17px; }
  .review-sidebar .review-form { padding: 16px; }
  .review-layout .detail-title { font-size: 19px; }
  .detail-fields { grid-template-columns: minmax(0, 1fr); }
  .detail-fields > div:nth-last-child(-n + 2) { border-bottom: 1px solid #eee6ed; }
  .detail-fields > div:last-child { border-bottom: 0; }
  .bucket-grid { gap: 10px; }
  .bucket-card { padding: 15px 13px; }
  .bucket-value { font-size: 25px; }
}

/* Match the catalogue form and review markup. */
.modal-head h2 { flex: 1; min-width: 0; line-height: 1.5; overflow-wrap: anywhere; }
.modal-head > .icon-btn { align-self: flex-start; }
.catalog-heading > span { display: flex; align-items: flex-start; gap: 8px; min-width: 0; font-size: 13px; line-height: 1.85; color: #856978; }
.catalog-heading > span .icon { margin-top: 3px; width: 17px; height: 17px; }
.dimension-tabs > button > .dimension-code { display: block; font-size: 11px; font-weight: 500; letter-spacing: .6px; }
.dimension-tabs > button > small { display: inline-block; font-size: 12px; color: #97798b; line-height: 1.6; letter-spacing: 0; }
.dimension-tabs > button.active > small { color: #996388; }
.item-code { gap: 8px; }
.item-code > span { padding-left: 8px; border-left: 1px solid #dbc4d5; font-size: 11px; color: #a08096; letter-spacing: 0; }
.submission-context > div > small:first-child { margin-top: 0; }
.submission-context > div > small + h3 { margin-top: 4px; }
.form-section > .score-guidance { margin: 17px 0 20px; }
.form-section > .upload-zone { margin-top: 19px; }
.proof-guide { display: flex; align-items: flex-start; gap: 10px; }
.proof-guide > .icon { margin: 3px 0 0; flex-shrink: 0; }
.proof-guide > div { min-width: 0; flex: 1; }
.proof-guide > div > p { margin-top: 3px; }
form > .review-reference { margin-top: 22px; }
form > .form-error:not(:empty) { margin-top: 17px; }
.review-sidebar > h3 { font-size: 16px; color: #7b4768; margin: 22px 0 12px; }
.review-sidebar .review-form .score-guidance { margin-top: 18px; }
.review-sidebar .review-checklist + .form-section-note { margin-top: 0; margin-bottom: 19px; }
.review-sidebar .review-checklist .review-check:has(input:disabled) { cursor: default; }
.review-sidebar .review-checklist input:disabled { opacity: .8; }
.review-dialog .submission-context { margin-bottom: 23px; }
.catalog-rule-panel .panel-content { padding-top: 18px; }
.catalog-rule-panel .panel-content > .proof-guide { display: block; margin: 16px 0; }
.catalog-rule-panel .panel-content > .proof-guide > p { margin-top: 4px; }
.catalog-rule-panel .panel-head h2 { overflow-wrap: anywhere; }
.catalog-rule-panel .panel-head > .btn { flex-shrink: 0; }
.rule-edit > h3 { font-size: 16px; line-height: 1.7; margin-bottom: 17px; }
.rule-edit > h3 > .pill { margin-left: 5px; vertical-align: middle; }
.bucket-card > .pill { margin-bottom: 11px; font-size: 11px; }
.bucket-card > h3 { min-height: 23px; line-height: 1.75; overflow-wrap: anywhere; }
.bucket-value { overflow-wrap: anywhere; }
.bucket-card > p { overflow-wrap: anywhere; }
@media (max-width: 540px) {
  .modal-head { gap: 10px; }
  .modal-head h2 { font-size: 17px; }
  .catalog-heading > span { font-size: 13px; }
  .catalog-rule-panel .panel-head { align-items: flex-start; flex-wrap: wrap; gap: 13px; }
  .catalog-rule-panel .panel-head > div { flex: 1 1 180px; min-width: 0; }
  .catalog-rule-panel .panel-head > .btn { margin-left: auto; }
  .catalog-rule-panel .panel-content { padding-top: 17px; }
  .catalog-rule-panel .panel-content > p { font-size: 14px; line-height: 1.85; }
  .catalog-rule-panel .panel-content > p.small { font-size: 12px; }
  .review-sidebar .review-form .stack { gap: 18px; }
  .review-dialog .submission-context { margin-bottom: 21px; }
  .bucket-card > .pill { margin-bottom: 8px; }
}
@media (max-width: 360px) {
  .modal-head { padding: 14px 15px; gap: 8px; }
  .modal-head h2 { font-size: 16px; }
  .modal-head > .icon-btn { width: 44px; height: 44px; flex: 0 0 44px; }
  .dimension-tabs > button > .dimension-code { font-size: 11px; }
  .dimension-tabs > button > small { font-size: 12px; }
  .item-code { gap: 6px; }
  .item-code > span { padding-left: 6px; }
  .item-card-actions .btn { font-size: 12px; gap: 5px; }
  .item-card-actions .btn .icon { width: 17px; height: 17px; }
  .submission-context { gap: 11px; }
  .submission-context > .status, .submission-context > .pill { flex-shrink: 0; }
  .proof-guide { gap: 8px; padding: 13px; }
  .bucket-card > h3 { font-size: 13px; line-height: 1.75; }
  .bucket-card > p { font-size: 12px; }
}

/* Collection platform: Ant Design's Header / Sider / Content layout rhythm. */
:root {
  --bg: #f5f5f5;
  --surface: #fff;
  --ink: #262626;
  --text: #434343;
  --muted: #737373;
  --line: #ebebeb;
  --green: #74256a;
  --green-deep: #541a4d;
  --green-soft: #f7eef6;
  --radius: 10px;
  --shadow: 0 1px 2px #00000003;
}
body { line-height: 1.6; }
h1 { font-size: 25px; letter-spacing: 0; }
h2, h3 { color: var(--ink); }
.btn, .btn.sm, .icon-btn { border-radius: 8px; }
.btn { min-height: 40px; padding: 8px 16px; font-weight: 500; border-color: #d9d9d9; }
.btn.sm { min-height: 36px; padding: 6px 12px; }
.btn.primary { box-shadow: 0 2px 0 #00000005; }
.btn.soft { border-color: #ead9e7; }
.icon-btn { width: 40px; height: 40px; }
.field > span { color: #434343; }
.field input, .field select, .field textarea { min-height: 42px; border-radius: 8px; padding: 9px 12px; border-color: #d9d9d9; color: #262626; }
.field input::placeholder, .field textarea::placeholder, .search-box input::placeholder { color: #a3a3a3; }
.field > small { color: #737373; }
.field { gap: 6px; }
.form-grid { gap: 18px; }
.stack { gap: 20px; }
.notice, .notice.info { border-radius: 8px; padding: 12px 16px; font-size: 13px; margin-bottom: 20px; }

/* Sign-in has only the college identity and the account form. */
.login-page { min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; align-items: center; justify-content: center; position: relative; padding: 116px 24px 72px; background: #f5f5f5; }
.login-brand { position: absolute; left: 40px; top: 28px; width: min(380px, calc(100% - 80px)); }
.login-brand img { display: block; width: 100%; height: auto; mix-blend-mode: multiply; }
.login-card { width: min(420px, 100%); background: #fff; border: 1px solid #e8e8e8; border-radius: 12px; padding: 36px 40px 40px; box-shadow: 0 8px 32px #26262606; }
.login-emblem { width: 54px; height: 54px; margin: 0 auto 18px; }
.login-emblem img { display: block; width: 100%; height: 100%; object-fit: contain; }
.login-card h1 { font-size: 23px; line-height: 1.5; text-align: center; font-weight: 600; margin-bottom: 30px; color: #30242e; letter-spacing: 0; }
.login-card form { display: grid; gap: 20px; }
.login-card .field > span { font-size: 14px; font-weight: 500; }
.login-card .field input, .login-card .field select { min-height: 44px; background: #fff; }
.login-card .btn.primary { width: 100%; min-height: 44px; margin-top: 4px; font-size: 15px; letter-spacing: 2px; }
.login-card .form-grid { gap: 16px; }
.login-card .form-error:not(:empty) { margin-top: 0; }

/* Application frame. */
.sidebar { width: 232px; padding: 24px 16px 16px; background: #fff; border-right-color: #e8e8e8; }
.sidebar .brand { padding: 0 7px; }
.school-brand .brand-title { color: #333; font-size: 16px; letter-spacing: 0; }
.school-brand .brand-caption { color: #737373; font-size: 11px; letter-spacing: .5px; }
.school-brand .school-seal { width: 42px; height: 42px; }
.workspace { margin: 24px 0 22px; padding: 12px; background: #fafafa; border-color: #ededed; border-radius: 8px; }
.workspace .tiny-label { color: #8c8c8c; margin-bottom: 3px; }
.workspace strong { color: #434343; }
.nav-section { margin: 0 12px 8px; font-size: 11px; color: #8c8c8c; letter-spacing: 0; }
.nav-admin-label { margin-top: 24px; }
.nav { gap: 4px; }
.nav button { border-radius: 8px; min-height: 42px; padding: 9px 12px; gap: 10px; color: #595959; }
.nav button.active { background: #f7eef6; color: #74256a; font-weight: 600; }
.nav button.active::before { display: none; }
.nav button:hover { background: #faf5f9; }
.nav button .icon { width: 18px; height: 18px; }
.nav .count { font-size: 11px; min-width: 20px; line-height: 20px; text-align: center; }
.sidebar-bottom { padding-top: 24px; }
.profile { padding: 16px 0 0; }
.identity strong { color: #434343; }
.identity small { color: #8c8c8c; }
.help-note { color: #8c8c8c; padding: 10px 8px 16px; }
.main { margin-left: 232px; }
.topbar { min-height: 64px; padding: 12px 24px; background: #fff; border-bottom-color: #ebebeb; position: sticky; top: 0; z-index: 10; }
.breadcrumbs { color: #8c8c8c; gap: 10px; }
.breadcrumbs strong { color: #434343; font-weight: 500; }
.top-right { gap: 16px; }
.period { background: #fafafa; border-color: #ededed; color: #595959; padding: 5px 10px; border-radius: 6px; }
.role-label { color: #737373; }
.page { max-width: 1560px; padding: 24px; }
.page-header { margin-bottom: 20px; gap: 20px; }
.page-header h1 { font-size: 24px; color: #262626; }
.page-header p { margin-top: 5px; color: #737373; font-size: 13px; }
.eyebrow { color: #8c8c8c; letter-spacing: .5px; margin-bottom: 4px; }
.platform-welcome { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 20px 24px; margin-bottom: 20px; border: 1px solid #ebebeb; border-left: 3px solid #74256a; border-radius: 8px; background: #fff; }
.platform-welcome > div { min-width: 0; }
.platform-welcome h2 { font-size: 18px; font-weight: 600; line-height: 1.5; }
.platform-welcome p { margin-top: 5px; color: #737373; font-size: 13px; line-height: 1.8; }
.platform-welcome > .btn { flex-shrink: 0; }
.platform-welcome .pill { vertical-align: middle; margin-left: 8px; }
.metrics { gap: 16px; margin-bottom: 20px; }
.metric { padding: 18px 20px; border-radius: 10px; border-color: #ebebeb; box-shadow: none; }
.metric-top { color: #595959; font-size: 13px; }
.metric-icon { width: 30px; height: 30px; border-radius: 8px; }
.metric-value { color: #262626; font-size: 32px; line-height: 1.4; margin: 8px 0 5px; letter-spacing: 0; font-weight: 550; }
.metric-value small, .metric-note { color: #8c8c8c; }
.dashboard-grid { gap: 20px; grid-template-columns: minmax(0, 1fr) 300px; }
.panel { border-color: #ebebeb; box-shadow: none; }
.panel-head { padding: 16px 20px; }
.panel-head h2 { color: #262626; font-size: 16px; }
.panel-head p { color: #8c8c8c; }
.panel-content { padding: 0 20px 20px; }
.side-panel + .side-panel { margin-top: 20px; }
.deadline-top { padding: 0 20px 18px; }
.deadline-top h3 { color: #434343; }
.deadline-top p, .progress-label, .rule-row .rule-cap, .rule-note { color: #737373; }
.rule-list { gap: 14px; }
.rule-row { color: #595959; }
.table-wrap { scrollbar-color: #d9d9d9 transparent; }
th { background: #fafafa; color: #737373; padding: 12px 20px; font-weight: 500; }
td { padding: 14px 20px; color: #595959; border-bottom-color: #f0f0f0; }
td strong { color: #434343; }
tbody tr:hover { background: #fcfafc; }
.title-cell small { color: #8c8c8c; }
.table-foot { padding: 12px 20px; background: #fff; color: #8c8c8c; }
.toolbar { padding: 16px 20px; }
.search-box, .filter-select { min-height: 40px; border-radius: 8px; border-color: #d9d9d9; }
.filter-select { padding-top: 8px; padding-bottom: 8px; color: #595959; }
.search-box input { padding: 8px 0; }
.tabs { padding: 0 20px; gap: 28px; }
.tab { padding: 14px 0; min-height: 48px; color: #737373; }
.tab.active::after { height: 2px; }
.pagination { padding: 12px 20px; color: #8c8c8c; }
.footer { padding-top: 24px; color: #999; font-size: 12px; }
.footer span:last-child { font-size: 12px; letter-spacing: 0; }

/* Consistent catalogue, form, and review surfaces. */
.dimension-tabs { gap: 12px; }
.dimension-tabs > button { min-height: 76px; padding: 12px 16px; border-radius: 8px; border-color: #e5e5e5; color: #595959; }
.dimension-tabs > button.active { background: #f9f1f8; border-color: #ba89b2; box-shadow: none; }
.dimension-tabs > button.active::after { left: 16px; height: 2px; }
.dimension-tabs > button > .dimension-code, .dimension-tabs > button > small { color: #8c8c8c; }
.catalog-heading h2 { color: #262626; }
.catalog-heading p, .catalog-heading > span { color: #737373; }
.catalog-summary { background: #fafafa; border-color: #e8e8e8; border-radius: 8px; padding: 14px 18px; }
.catalog-summary h2, .catalog-summary h3 { color: #434343; }
.catalog-summary p, .catalog-summary > span { color: #737373; }
.item-grid { gap: 16px; margin-bottom: 20px; }
.item-card, .catalog-picker .item-card { padding: 20px; border-radius: 10px; border-color: #e8e8e8; box-shadow: none; }
.item-card:hover { box-shadow: 0 3px 10px #00000003; }
.item-card.selected { border-color: #ba89b2; box-shadow: 0 0 0 1px #ba89b21a; }
.item-card-title h3, h3.item-card-title, .item-card > h3 { font-size: 16px; color: #333; }
.item-card-desc { color: #737373; line-height: 1.8; }
.item-stats strong, .item-stats b, .item-stats .number { color: #434343; font-size: 22px; }
.item-stats small, .item-stats label, .item-stats > div, .item-stats > span { color: #8c8c8c; }
.item-card-actions { margin-top: 16px; padding-top: 14px; border-top-color: #f0f0f0; }
.item-card-actions .btn { min-height: 38px; padding-top: 7px; padding-bottom: 7px; }
.catalog-rule-panel { border-color: #e8e8e8; border-radius: 10px; margin-bottom: 20px; }
.catalog-rule-panel > .panel-head { background: #fafafa; }
.bucket-card { border-radius: 10px; border-color: #e8e8e8; }
.bucket-card > h3, .bucket-card > strong { color: #595959; }
.bucket-card > p { color: #8c8c8c; }
.bucket-value { color: #434343; }
.submission-context, .review-reference, .detail-fields, .detail-info, .review-checklist, .attachment, .score-guidance, .review-form, .upload-zone { border-radius: 8px; }
.submission-context { padding: 16px 18px; margin-bottom: 20px; }
.form-section { padding-top: 20px; margin-top: 20px; }
.section-heading, .section-heading h3, .section-heading h2 { color: #434343; }
.section-heading { margin-bottom: 16px; }
.form-section-note { color: #737373; }
.proof-guide { border-radius: 8px; }
.detail-fields { background: #fafafa; border-color: #ebebeb; }
.detail-fields dt, .detail-fields label { color: #8c8c8c; }
.detail-fields dd, .detail-fields strong, .detail-description { color: #595959; }
.detail-title { color: #262626; }
.review-sidebar .review-form { background: #fafafa; border-color: #e8e8e8; }
.review-checklist { background: #fff; border-color: #ebebeb; }
.review-check { color: #595959; }
.review-sidebar .review-form > h3 { color: #434343; }
.settings-body { padding: 4px 20px 24px; }
.audit-item { padding: 16px 20px; }
.audit-item p { color: #737373; }
dialog { border-radius: 12px; border-color: #e5e5e5; box-shadow: 0 20px 64px #00000026; }
dialog::backdrop { background: #00000066; backdrop-filter: none; }
.modal-head { padding: 16px 24px; }
.modal-head h2 { font-size: 18px; color: #262626; }
.modal-body, .review-dialog .modal-body { padding: 24px; }
#toast { border-radius: 8px; }

@media (max-width: 1250px) and (min-width: 901px) {
  .sidebar { width: 216px; padding-left: 12px; padding-right: 12px; }
  .main { margin-left: 216px; }
  .school-brand .brand-title { font-size: 15px; }
  .school-brand .brand-caption { font-size: 11px; letter-spacing: 0; }
  .dashboard-grid { grid-template-columns: minmax(0, 1fr) 270px; }
  .page { padding: 20px; }
  .topbar { padding-left: 20px; padding-right: 20px; }
}
@media (max-width: 1050px) {
  .dashboard-grid { grid-template-columns: minmax(0, 1fr); }
  .dashboard-aside { gap: 20px; }
  .dashboard-aside .side-panel + .side-panel { margin-top: 0; }
}
@media (max-width: 900px) {
  .sidebar { width: 250px; padding: 24px 16px 16px; }
  .main { margin-left: 0; }
  .topbar { padding: 10px 16px; min-height: 64px; }
  .page { padding: 20px; }
  .page-header h1 { font-size: 24px; }
  .platform-welcome { padding: 18px 20px; }
  .metric { padding: 18px; }
  .metrics { gap: 16px; }
  .review-dialog .modal-body { padding: 22px; }
  .review-sidebar .review-form { padding: 20px; }
}
@media (max-width: 640px) {
  .login-page { padding: 112px 20px 48px; }
  .login-brand { width: min(335px, calc(100% - 40px)); left: 20px; top: 26px; }
  .login-card { padding: 32px; }
  .login-card h1 { font-size: 22px; margin-bottom: 28px; }
  .platform-welcome { align-items: flex-start; gap: 16px; flex-wrap: wrap; }
  .platform-welcome > div { flex: 1 1 250px; }
  .platform-welcome > .btn { margin-left: auto; }
  .materials-table tr { padding: 18px 20px; }
  .materials-table .material-owner, .materials-table .material-owner .small { color: #737373; }
  .materials-table .material-owner::before, .materials-table .material-score::before { color: #8c8c8c; }
  .materials-table .material-score { color: #434343; }
}
@media (max-width: 540px) {
  .page { padding: 20px 16px; }
  .topbar { padding: 10px 12px; }
  .page-header { margin-bottom: 20px; }
  .page-header h1 { font-size: 22px; }
  .page-header p { font-size: 13px; }
  .btn, .btn.sm, .icon-btn, .row-action { min-height: 44px; }
  .icon-btn { width: 44px; height: 44px; }
  .field input, .field select, .field textarea, .search-box input { font-size: 16px; }
  .field input, .field select, .filter-select, .search-box { min-height: 44px; }
  .platform-welcome { padding: 16px; border-radius: 8px; margin-bottom: 16px; }
  .platform-welcome h2 { font-size: 17px; }
  .platform-welcome p { font-size: 12px; }
  .metrics { gap: 12px; margin-bottom: 20px; }
  .metric { padding: 16px; border-radius: 8px; }
  .metric-top { font-size: 12px; }
  .metric-value { font-size: 29px; }
  .metric-icon { width: 26px; height: 26px; }
  .metric-note { font-size: 12px; }
  .panel-head { padding: 16px; }
  .panel-content { padding: 0 16px 18px; }
  .deadline-top { padding: 0 16px 18px; }
  .table-foot { padding: 12px 16px; }
  .toolbar { padding: 16px; }
  .tabs { padding: 0 16px; }
  .materials-table tr { padding: 18px 16px; }
  .item-card, .catalog-picker .item-card { padding: 18px; border-radius: 8px; }
  .item-card-actions .btn { min-height: 44px; }
  .dimension-tabs { gap: 10px; }
  .dimension-tabs > button { min-height: 72px; padding: 12px; }
  .dimension-tabs > button.active::after { left: 12px; }
  .catalog-rule-panel .panel-content { padding: 16px; }
  .catalog-rule-panel .item-grid { padding: 16px; }
  .catalog-summary { padding: 14px 16px; }
  .submission-context { padding: 15px 16px; }
  .bucket-card { padding: 16px; border-radius: 8px; }
  .bucket-value { font-size: 27px; }
  .modal-head { padding: 14px 16px; }
  .modal-head h2 { font-size: 17px; }
  .modal-body, .review-dialog .modal-body { padding: 18px; }
  .review-sidebar .review-form { padding: 16px; }
  .settings-body { padding: 4px 16px 20px; }
  .footer { padding-top: 20px; }
}
@media (max-width: 360px) {
  .login-page { padding: 100px 16px 36px; }
  .login-brand { width: calc(100% - 36px); left: 18px; top: 24px; }
  .login-card { padding: 28px 24px; }
  .login-card h1 { font-size: 20px; }
  .login-emblem { width: 48px; height: 48px; margin-bottom: 16px; }
  .page { padding: 18px 12px; }
  .topbar { padding-left: 8px; padding-right: 8px; }
  .platform-welcome { padding: 15px; }
  .metric { padding: 14px 12px; }
  .metric-value { font-size: 27px; }
  .metric-icon { width: 24px; height: 24px; }
  .dimension-tabs { gap: 8px; }
  .dimension-tabs > button { padding: 11px; }
  .item-card, .catalog-picker .item-card { padding: 16px; }
  .bucket-card { padding: 14px 12px; }
  .modal-body, .review-dialog .modal-body { padding: 16px; }
  .modal-head { padding: 12px 14px; }
  .modal-head h2 { font-size: 16px; }
  .review-sidebar .review-form { padding: 14px; }
}
@media (max-height: 650px) {
  .login-page { justify-content: flex-start; padding-top: 108px; padding-bottom: 32px; }
}
.platform-period { color: #74256a; font-size: 12px; line-height: 1.6; margin-bottom: 4px; }
.welcome-divider { margin: 0 10px; color: #bfbfbf; }
.welcome-status { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }

/* The home queue keeps its review action visible inside the dashboard card. */
@media (min-width: 641px) {
  .dashboard-table { table-layout: fixed; }
  .dashboard-table .optional-col { display: none; }
  .dashboard-table .mobile-category { display: inline; }
  .dashboard-table th, .dashboard-table td { padding-left: 12px; padding-right: 12px; }
  .dashboard-table th:first-child, .dashboard-table td:first-child { padding-left: 20px; }
  .dashboard-table th:last-child, .dashboard-table td:last-child { padding-right: 20px; }
  .dashboard-table.is-staff th:nth-child(2) { width: 88px; }
  .dashboard-table.is-staff th:nth-child(4), .dashboard-table.is-student th:nth-child(3) { width: 64px; }
  .dashboard-table.is-staff th:nth-child(5), .dashboard-table.is-student th:nth-child(4) { width: 96px; }
  .dashboard-table th:last-child { width: 92px; }
  .dashboard-table .material-title { gap: 10px; align-items: flex-start; }
  .dashboard-table .title-cell { min-width: 0; max-width: none; flex: 1; }
  .dashboard-table .title-cell strong, .dashboard-table .title-cell small { white-space: normal; overflow-wrap: anywhere; }
  .dashboard-table .title-cell small { line-height: 1.65; }
  .dashboard-table .material-owner, .dashboard-table .material-score { white-space: normal; overflow-wrap: anywhere; }
  .dashboard-table .row-action { white-space: nowrap; }
}