@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+TC:wght@400;500;600;700;800&family=Noto+Serif+TC:wght@600;700;900&display=swap');

:root {
  --magenta: #b80f58;
  --magenta-deep: #86103f;
  --pink: #e78db0;
  --rose-mist: #f9e8ef;
  --gold: #cf9c28;
  --gold-pale: #f2dfaa;
  --ink: #24212a;
  --muted: #77717b;
  --line: #e9e2e5;
  --ivory: #fffaf5;
  --paper: #ffffff;
  --blue: #163f73;
  --sidebar: 256px;
  --sans: "Noto Sans TC", system-ui, sans-serif;
  --serif: "Noto Serif TC", serif;
}

* { box-sizing: border-box; }
html { font-size: 16px; min-height: 100%; }
body { margin: 0; min-height: 100vh; color: var(--ink); background: var(--ivory); font-family: var(--sans); }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; }

.app-shell { min-height: 100vh; display: grid; grid-template-columns: var(--sidebar) minmax(0, 1fr); }
.sidebar { position: fixed; inset: 0 auto 0 0; width: var(--sidebar) !important; color: white; background: linear-gradient(155deg, #a20d4c 0%, #7e0f3c 72%, #651031 100%); border-right: 0; z-index: var(--bs-offcanvas-zindex, 1045); display: flex; flex-direction: column; overflow-x: hidden; overflow-y: auto; }
.sidebar::after { content: ""; position: absolute; right: -90px; top: 47%; width: 190px; height: 190px; border: 1px solid rgba(239,194,107,.22); border-radius: 50%; pointer-events: none; }
.sidebar-brand { min-height: 92px; padding: 22px 20px; border-bottom: 1px solid rgba(255,255,255,.12); display: flex; align-items: center; justify-content: space-between; }
.brand-link { display: flex; align-items: center; gap: 12px; color: white; }
.brand-mark { width: 43px; height: 43px; display: grid; place-items: center; border: 1px solid var(--gold-pale); color: var(--gold-pale); font: 900 25px var(--serif); border-radius: 50%; box-shadow: inset 0 0 0 3px rgba(255,255,255,.08); }
.brand-copy { display: flex; flex-direction: column; line-height: 1.25; }
.brand-copy strong { font-family: var(--serif); font-size: 17px; letter-spacing: .08em; }
.brand-copy small { margin-top: 4px; color: #f6cddd; font-size: 11px; letter-spacing: .08em; }
.year-ribbon { margin: 17px 18px 2px; padding: 8px 12px; color: #6d3d12; background: linear-gradient(90deg, #e0b553, #f7e5ac 48%, #cf9526); clip-path: polygon(0 0, 95% 0, 100% 50%, 95% 100%, 0 100%, 5% 50%); font-size: 11px; font-weight: 800; letter-spacing: .14em; display: flex; justify-content: center; gap: 8px; }
.sidebar-nav { padding: 10px 12px 20px; position: relative; z-index: 1; }
.nav-caption { display: block; margin: 18px 12px 7px; color: #e2a8bf; font-size: 10px; font-weight: 700; letter-spacing: .16em; }
.nav-entry { min-height: 46px; padding: 8px 11px; display: grid; grid-template-columns: 29px 1fr auto; align-items: center; gap: 9px; color: #f8e9ef; border-radius: 9px; font-size: 14px; transition: .18s ease; }
.nav-entry i { width: 29px; height: 29px; display: grid; place-items: center; border: 1px solid rgba(255,255,255,.25); border-radius: 50%; font-size: 11px; font-style: normal; }
.nav-entry em { color: #dba6ba; font-size: 9px; font-style: normal; }
.nav-entry:hover { color: white; background: rgba(255,255,255,.08); transform: translateX(2px); }
.nav-entry.active { color: #7c113c; background: #fff8f2; font-weight: 700; box-shadow: 0 10px 24px rgba(58,0,24,.18); }
.nav-entry.active i { color: #8b1744; border-color: #d6a637; background: #f6e4b9; }
.sidebar-foot { margin: auto 18px 20px; padding: 14px 13px; border-top: 1px solid rgba(255,255,255,.13); display: flex; gap: 10px; align-items: center; position: relative; z-index: 1; }
.pulse-dot { width: 8px; height: 8px; background: #8ed29f; border-radius: 50%; box-shadow: 0 0 0 5px rgba(142,210,159,.12); }
.sidebar-foot div { display: flex; flex-direction: column; }
.sidebar-foot strong { font-size: 11px; }
.sidebar-foot small { color: #d9a8ba; font-size: 10px; margin-top: 3px; }

.app-main { grid-column: 2; min-width: 0; display: flex; min-height: 100vh; flex-direction: column; }
.topbar { min-height: 78px; padding: 12px clamp(20px, 4vw, 58px); display: flex; align-items: center; border-bottom: 1px solid var(--line); background: rgba(255,250,245,.92); backdrop-filter: blur(12px); position: sticky; top: 0; z-index: 1020; }
.topbar-title { display: flex; flex-direction: column; }
.eyebrow { color: var(--magenta); font-size: 9px; font-weight: 800; letter-spacing: .18em; }
.topbar-title strong { margin-top: 3px; font: 700 18px var(--serif); }
.account-area { margin-left: auto; display: flex; align-items: center; gap: 12px; }
.login-button { padding: 10px 15px 10px 17px; color: white; background: var(--magenta); border-radius: 99px; display: flex; gap: 16px; align-items: center; font-size: 13px; font-weight: 700; box-shadow: 0 7px 18px rgba(184,15,88,.2); }
.login-button b { color: var(--gold-pale); font-size: 18px; }
.account-chip { display: flex; gap: 9px; align-items: center; }
.account-avatar { width: 37px; height: 37px; display: grid; place-items: center; color: white; background: var(--magenta); border-radius: 50%; font-weight: 800; }
.account-name { display: flex; flex-direction: column; font-size: 12px; font-weight: 700; }
.account-name small { color: var(--muted); font-size: 10px; font-weight: 400; }
.quiet-button { border: 0; color: var(--muted); background: transparent; font-size: 12px; }
.mobile-menu { width: 38px; height: 38px; margin-right: 12px; padding: 9px; border: 1px solid var(--line); border-radius: 9px; background: white; }
.mobile-menu span { height: 2px; margin: 3px 0; display: block; background: var(--magenta); }

.page-content { width: 100%; max-width: 1540px; margin: 0 auto; padding: clamp(24px, 4vw, 56px); flex: 1; }
.toast-message { margin-bottom: 20px; padding: 13px 16px; color: #23633c; background: #eaf7ef; border: 1px solid #c8e7d3; border-radius: 9px; font-size: 13px; }
.toast-message span { margin-right: 9px; font-weight: 900; }

.welcome-band { min-height: 278px; padding: clamp(30px, 5vw, 66px); overflow: hidden; position: relative; color: white; background: linear-gradient(112deg, #8c103f 0%, #b90f58 55%, #d83579 100%); display: flex; justify-content: space-between; align-items: center; }
.welcome-band::before { content: ""; position: absolute; width: 420px; height: 420px; top: -250px; right: 10%; border: 1px solid rgba(255,225,165,.3); border-radius: 50%; box-shadow: 0 0 0 40px rgba(255,255,255,.018), 0 0 0 85px rgba(255,255,255,.018); }
.welcome-band::after { content: ""; position: absolute; inset: auto -5% 28px 35%; height: 12px; background: linear-gradient(90deg, transparent, #d9ab42 25%, #ffe7a4 49%, #b57915 75%, transparent); transform: rotate(-4deg); opacity: .8; }
.welcome-band > div:first-child { max-width: 590px; position: relative; z-index: 2; }
.section-kicker { color: #f3d493; font-size: 10px; font-weight: 800; letter-spacing: .2em; }
.welcome-band h1 { margin: 10px 0 13px; font: 900 clamp(31px, 4vw, 51px)/1.2 var(--serif); letter-spacing: .04em; }
.welcome-band h1 em { color: #f4d998; font-style: normal; }
.welcome-band p { max-width: 525px; margin: 0; color: #f9e8ef; font-size: 13px; line-height: 1.85; }
.hero-actions { margin-top: 24px; display: flex; gap: 21px; align-items: center; }
.btn-primary-brand { padding: 12px 18px; color: #7e103a; background: #fffaf4; border-radius: 4px; font-size: 13px; font-weight: 800; }
.btn-primary-brand span { margin-left: 18px; color: var(--magenta); }
.btn-text { color: white; font-size: 12px; font-weight: 700; border-bottom: 1px solid rgba(255,255,255,.4); padding-bottom: 4px; }
.btn-text span { margin-left: 8px; color: #f7db95; }
.annual-seal { width: 190px; height: 190px; margin-right: clamp(0px, 4vw, 55px); border: 1px solid rgba(255,231,171,.7); border-radius: 50%; display: flex; flex-direction: column; align-items: center; justify-content: center; position: relative; z-index: 1; box-shadow: inset 0 0 0 7px rgba(255,255,255,.035); }
.annual-seal span { color: #f3cf7e; font-size: 8px; letter-spacing: .28em; }
.annual-seal strong { font: 900 43px var(--serif); }
.annual-seal strong small { color: #e2b54c; font-size: 16px; }
.annual-seal b { padding-top: 5px; color: #f8e2aa; border-top: 1px solid rgba(255,231,171,.45); font-size: 11px; letter-spacing: .16em; }

.metrics-strip { display: grid; grid-template-columns: repeat(4, 1fr); background: white; border: 1px solid var(--line); border-top: 0; }
.metrics-strip article { min-height: 122px; padding: 22px 25px; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 15px; border-right: 1px solid var(--line); }
.metrics-strip article:last-child { border-right: 0; }
.metric-no { color: #d5cfd2; font-size: 9px; font-weight: 800; align-self: start; }
.metrics-strip strong { font: 800 clamp(26px, 3vw, 39px) var(--serif); }
.metrics-strip p { margin: 2px 0 0; color: var(--muted); font-size: 11px; }
.metrics-strip small { color: var(--gold); font-size: 11px; }

.dashboard-grid { margin-top: 27px; display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(310px, .65fr); gap: 25px; }
.content-panel { padding: 26px 28px; background: white; border: 1px solid var(--line); }
.panel-heading { margin-bottom: 21px; display: flex; align-items: end; justify-content: space-between; }
.panel-heading span, .section-heading span { color: var(--magenta); font-size: 8px; font-weight: 900; letter-spacing: .22em; }
.panel-heading h2, .section-heading h2 { margin: 3px 0 0; font: 700 20px var(--serif); }
.panel-heading a { color: var(--magenta); font-size: 11px; font-weight: 700; }
.empty-state { min-height: 170px; display: flex; flex-direction: column; align-items: center; justify-content: center; color: var(--muted); border: 1px dashed #dfd5d9; background: #fffcfa; text-align: center; }
.empty-state > span { width: 42px; height: 42px; display: grid; place-items: center; color: var(--magenta); background: var(--rose-mist); border-radius: 50%; font-family: var(--serif); }
.empty-state h3 { margin: 12px 0 4px; color: var(--ink); font-size: 14px; }
.empty-state p { margin: 0; font-size: 11px; }
.compact-list a { padding: 11px 2px; display: grid; grid-template-columns: 38px 1fr auto 14px; align-items: center; gap: 11px; border-bottom: 1px solid #f1ecee; }
.member-initial { width: 35px; height: 35px; display: grid; place-items: center; color: #8a1544; background: #f7e6ed; border-radius: 50%; font: 700 14px var(--serif); }
.compact-list a > span:nth-child(2) { display: flex; flex-direction: column; }
.compact-list strong { font-size: 13px; }
.compact-list small { margin-top: 2px; color: var(--muted); font-size: 10px; }
.compact-list em { color: #38825a; font-size: 10px; font-style: normal; }
.compact-list b { color: var(--gold); }
.ranking-list > div { padding: 12px 0; display: grid; grid-template-columns: 27px minmax(80px, 1fr) minmax(60px, 1.4fr) 52px; gap: 9px; align-items: center; border-bottom: 1px solid #f1ecee; }
.ranking-list span { color: #b9afb3; font-size: 9px; font-weight: 800; }
.ranking-list strong { font-size: 11px; }
.ranking-list i { height: 3px; background: linear-gradient(90deg, var(--magenta) var(--bar), #eee8ea var(--bar)); }
.ranking-list b { text-align: right; color: var(--muted); font-size: 10px; }
.muted-note { padding: 28px 0; color: var(--muted); font-size: 11px; text-align: center; }

.quick-links { margin-top: 30px; }
.section-heading { margin-bottom: 14px; }
.quick-links > div { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.quick-links a { min-height: 113px; padding: 20px; display: grid; grid-template-columns: 39px 1fr auto; grid-template-rows: auto auto; column-gap: 13px; color: var(--ink); background: white; border: 1px solid var(--line); transition: .18s ease; }
.quick-links a:hover { border-color: #d8a4b9; transform: translateY(-2px); box-shadow: 0 12px 28px rgba(76,18,42,.07); }
.quick-links a > span { grid-row: 1 / 3; width: 38px; height: 38px; display: grid; place-items: center; color: var(--magenta); background: var(--rose-mist); border-radius: 50%; font: 700 13px var(--serif); }
.quick-links strong { font-size: 13px; }
.quick-links small { color: var(--muted); font-size: 10px; }
.quick-links b { grid-row: 1 / 3; align-self: center; color: var(--gold); }

.page-header { margin-bottom: 24px; display: flex; justify-content: space-between; align-items: end; gap: 20px; }
.page-header h1 { margin: 3px 0 5px; font: 800 clamp(27px, 4vw, 38px) var(--serif); }
.page-header p { margin: 0; color: var(--muted); font-size: 12px; }
.brand-button, .outline-button { min-height: 42px; padding: 10px 17px; display: inline-flex; align-items: center; justify-content: center; gap: 10px; border-radius: 5px; font-size: 12px; font-weight: 800; }
.brand-button { color: white; background: var(--magenta); border: 1px solid var(--magenta); }
.outline-button { color: var(--magenta); background: white; border: 1px solid #d8a4b9; }
.filter-bar { padding: 17px; margin-bottom: 18px; display: grid; grid-template-columns: minmax(220px, 1fr) 220px 170px auto; gap: 11px; background: white; border: 1px solid var(--line); }
.form-control, .form-select { min-height: 42px; border-color: #ded6da; border-radius: 4px; font-size: 12px; }
.form-control:focus, .form-select:focus { border-color: var(--magenta); box-shadow: 0 0 0 .2rem rgba(184,15,88,.1); }
.table-shell { overflow: hidden; background: white; border: 1px solid var(--line); }
.data-table { width: 100%; margin: 0; border-collapse: collapse; }
.data-table th { padding: 12px 15px; color: #766c72; background: #fbf7f8; border-bottom: 1px solid var(--line); font-size: 10px; font-weight: 800; letter-spacing: .04em; white-space: nowrap; }
.data-table td { padding: 14px 15px; border-bottom: 1px solid #f0ebed; font-size: 12px; vertical-align: middle; }
.data-table tbody tr:hover { background: #fffafb; }
.data-table .primary-cell { color: var(--magenta-deep); font-weight: 800; }
.data-table .muted-cell { color: var(--muted); }
.row-link { color: var(--magenta); font-weight: 700; white-space: nowrap; }
.row-action { padding: 5px 9px; color: var(--magenta); background: white; border: 1px solid #dfb0c3; border-radius: 4px; font-size: 10px; font-weight: 700; }
.role-tags { display: flex; flex-wrap: wrap; gap: 4px; }
.role-tags span { padding: 3px 7px; color: #6c3c50; background: #f7e9ef; border-radius: 3px; font-size: 9px; }
.role-options { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.role-options label { padding: 15px; display: flex; gap: 11px; align-items: start; border: 1px solid var(--line); cursor: pointer; }
.role-options input { margin-top: 4px; accent-color: var(--magenta); }
.role-options span { display: flex; flex-direction: column; }
.role-options strong { font-size: 12px; }
.role-options small { margin-top: 3px; color: var(--muted); font-size: 9px; }
.report-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 15px; }
.report-grid a { min-height: 120px; padding: 21px; display: grid; grid-template-columns: 43px 1fr auto; align-items: center; gap: 13px; background: white; border: 1px solid var(--line); }
.report-grid a > span { width: 42px; height: 42px; display: grid; place-items: center; color: var(--magenta); background: var(--rose-mist); border-radius: 50%; font-size: 9px; font-weight: 900; }
.report-grid a div { display: flex; flex-direction: column; }
.report-grid strong { font-size: 13px; }
.report-grid small { margin-top: 4px; color: var(--muted); font-size: 9px; }
.report-grid b { color: var(--gold); font-size: 10px; }
.award-overview { padding: 30px; display: grid; grid-template-columns: .8fr 1.2fr; gap: 35px; color: white; background: linear-gradient(115deg, #8b103e, #bf155c); }
.award-overview > div:first-child > span { color: #f2d38c; font-size: 9px; letter-spacing: .17em; }
.award-overview h2 { margin: 8px 0; font: 700 20px var(--serif); }
.award-overview h2 strong { font-size: 42px; color: #f6d98f; }
.award-overview p { margin: 0; color: #f4dce6; font-size: 10px; line-height: 1.7; }
.award-category-bars div { padding: 9px 0; display: grid; grid-template-columns: 110px 1fr 40px; align-items: center; gap: 12px; }
.award-category-bars span, .award-category-bars b { font-size: 10px; }
.award-category-bars i { height: 4px; background: linear-gradient(90deg, #f1d180 var(--score), rgba(255,255,255,.18) var(--score)); }
.late-mark { margin-left: 5px; padding: 2px 5px; color: #943535; background: #fae4e4; border-radius: 2px; font-size: 8px; }
.form-hint { margin-top: 6px; display: block; color: var(--muted); font-size: 9px; }
.evidence-list a { padding: 11px 0; display: grid; grid-template-columns: 30px 1fr auto; align-items: center; gap: 9px; border-bottom: 1px solid var(--line); }
.evidence-list a > span { width: 29px; height: 29px; display: grid; place-items: center; color: var(--magenta); background: var(--rose-mist); border-radius: 50%; font-size: 9px; }
.evidence-list a div { display: flex; flex-direction: column; min-width: 0; }
.evidence-list strong { overflow: hidden; text-overflow: ellipsis; font-size: 10px; white-space: nowrap; }
.evidence-list small { color: var(--muted); font-size: 8px; }
.evidence-list b { color: var(--magenta); font-size: 9px; }
.upload-zone { padding: 34px; display: flex; align-items: center; gap: 22px; background: #fffbf8; border: 1px dashed #d7b7c4; }
.upload-zone > span { width: 62px; height: 62px; display: grid; place-items: center; color: var(--magenta); background: var(--rose-mist); border-radius: 50%; font-size: 11px; font-weight: 900; }
.upload-zone > div { flex: 1; }
.upload-zone label { margin-bottom: 3px; font-size: 12px; font-weight: 800; }
.upload-zone p { color: var(--muted); font-size: 9px; }
.import-errors { margin-top: 20px; padding: 17px; color: #7f3030; background: #fff0f0; border: 1px solid #eccaca; font-size: 10px; }
.import-errors ol { margin: 10px 0 0; padding-left: 18px; }
.import-result { margin-bottom: 19px; padding: 20px; display: flex; align-items: center; gap: 13px; color: #245e3d; background: #eaf6ee; border: 1px solid #c8e4d1; }
.import-result > span { width: 34px; height: 34px; display: grid; place-items: center; color: white; background: #3d8a5d; border-radius: 50%; }
.import-result p { margin: 3px 0 0; font-size: 10px; }
.temporary-secret { margin-bottom: 18px; padding: 16px 18px; display: flex; align-items: center; gap: 15px; color: #6d4c10; background: #fff5d9; border: 1px solid #ead18b; }
.temporary-secret code { padding: 6px 9px; color: #7d1641; background: white; font-size: 15px; font-weight: 800; }
.temporary-secret span { color: #866f45; font-size: 9px; }
.status-pill { padding: 4px 9px; display: inline-flex; border-radius: 99px; font-size: 10px; font-weight: 700; }
.status-active { color: #24623e; background: #e7f4eb; }
.status-warning { color: #8a5c11; background: #fbf0d6; }
.status-muted { color: #67616a; background: #ece9eb; }
.status-neutral { color: #6d3450; background: #f5e9ef; }
.result-count { padding: 12px 15px; color: var(--muted); background: #fffcfa; border-top: 1px solid var(--line); font-size: 10px; }

.form-card { padding: clamp(21px, 4vw, 38px); background: white; border: 1px solid var(--line); }
.form-section { margin-bottom: 32px; }
.form-section:last-child { margin-bottom: 0; }
.form-section-title { margin-bottom: 17px; padding-bottom: 10px; border-bottom: 1px solid var(--line); display: flex; gap: 9px; align-items: center; }
.form-section-title span { width: 24px; height: 24px; display: grid; place-items: center; color: white; background: var(--magenta); border-radius: 50%; font-size: 9px; }
.form-section-title h2 { margin: 0; font: 700 16px var(--serif); }
.form-grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: 17px 15px; }
.field { grid-column: span 4; }
.field.span-6 { grid-column: span 6; }
.field.span-8 { grid-column: span 8; }
.field.span-12 { grid-column: span 12; }
.field label { margin-bottom: 7px; color: #615b61; font-size: 11px; font-weight: 700; }
.field .required::after { content: "＊"; color: var(--magenta); }
.text-danger { font-size: 10px; }
.form-actions { margin-top: 28px; padding-top: 18px; border-top: 1px solid var(--line); display: flex; justify-content: flex-end; gap: 10px; }

.profile-head { margin-bottom: 23px; padding: 28px; display: grid; grid-template-columns: 68px 1fr auto; gap: 18px; align-items: center; color: white; background: linear-gradient(110deg, #8d103f, #bd145b); }
.profile-avatar { width: 66px; height: 66px; display: grid; place-items: center; border: 1px solid #eac874; border-radius: 50%; font: 800 25px var(--serif); }
.profile-head h1 { margin: 0 0 4px; font: 800 28px var(--serif); }
.profile-head p { margin: 0; color: #f4dce5; font-size: 11px; }
.profile-head .status-pill { align-self: start; }
.member-actions { margin: -13px 0 23px; padding: 12px 15px; display: flex; justify-content: flex-end; flex-wrap: wrap; gap: 8px; background: white; border: 1px solid var(--line); }
.member-actions a { padding: 6px 10px; color: var(--magenta); border: 1px solid #dfb0c3; border-radius: 4px; font-size: 10px; font-weight: 700; }
.member-actions a.danger { color: #8b3030; border-color: #d8b1b1; }
.detail-layout { display: grid; grid-template-columns: 1fr 330px; gap: 22px; }
.detail-panel { padding: 25px; background: white; border: 1px solid var(--line); }
.detail-panel h2 { margin: 0 0 18px; font: 700 17px var(--serif); }
.definition-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px 24px; }
.definition-grid div { display: flex; flex-direction: column; }
.definition-grid dt { color: var(--muted); font-size: 10px; font-weight: 500; }
.definition-grid dd { margin: 4px 0 0; font-size: 12px; font-weight: 600; }
.history-list { position: relative; }
.history-list::before { content: ""; position: absolute; top: 7px; bottom: 7px; left: 6px; width: 1px; background: #dfc27f; }
.history-item { padding: 0 0 19px 24px; position: relative; }
.history-item::before { content: ""; position: absolute; left: 2px; top: 5px; width: 9px; height: 9px; background: var(--gold); border-radius: 50%; box-shadow: 0 0 0 4px #fcf4df; }
.history-item strong { display: block; font-size: 12px; }
.history-item small { color: var(--muted); font-size: 10px; }
.app-footer { padding: 18px clamp(20px, 4vw, 58px); color: #8d858b; border-top: 1px solid var(--line); display: flex; justify-content: space-between; font-size: 9px; }
.login-layout { min-height: 610px; display: grid; grid-template-columns: minmax(300px, .85fr) minmax(380px, 1.15fr); background: white; border: 1px solid var(--line); }
.login-story { padding: clamp(35px, 5vw, 70px); color: white; background: linear-gradient(145deg, #870f3e, #c4145d 73%, #d72c71); position: relative; overflow: hidden; }
.login-story::after { content: ""; position: absolute; width: 340px; height: 340px; right: -180px; bottom: -120px; border: 1px solid rgba(249,220,147,.55); border-radius: 50%; box-shadow: 0 0 0 35px rgba(255,255,255,.02); }
.login-story h1 { margin: 70px 0 18px; font: 900 clamp(34px, 4vw, 50px)/1.35 var(--serif); }
.login-story h1 em { color: #f2d48d; font-style: normal; }
.login-story p { max-width: 350px; color: #f7dfe8; font-size: 12px; line-height: 1.9; }
.login-year { margin-top: 55px; color: #f1d48f; font: 700 11px var(--sans); letter-spacing: .23em; }
.login-year b { margin: 0 12px; }
.login-form-panel { max-width: 560px; width: 100%; margin: auto; padding: clamp(32px, 6vw, 78px); }
.login-form-panel h2 { margin: 7px 0 6px; font: 800 clamp(24px, 3vw, 34px) var(--serif); }
.login-form-panel > div:first-child p { margin-bottom: 29px; color: var(--muted); font-size: 11px; }
.field-login { margin-bottom: 17px; }
.field-login label { margin-bottom: 7px; color: #5f585e; font-size: 11px; font-weight: 700; }
.field-login .form-control { min-height: 48px; }
.remember-row { margin: 3px 0 21px; display: flex; gap: 8px; align-items: center; color: var(--muted); font-size: 11px; }
.remember-row input { accent-color: var(--magenta); }
.login-submit { width: 100%; min-height: 49px; border: 0; justify-content: space-between; padding-inline: 20px; }
.external-login { margin-top: 23px; padding-top: 18px; border-top: 1px solid var(--line); display: flex; justify-content: center; gap: 12px; color: var(--muted); font-size: 10px; }
.external-login a { color: #258348; font-weight: 800; }
.external-login form { margin: 0; }
.external-login button { padding: 0; color: #258348; background: transparent; border: 0; font-size: 10px; font-weight: 800; }
.login-help { margin: 19px 0 0; color: #9a9197; font-size: 9px; line-height: 1.7; text-align: center; }

@media (max-width: 1199.98px) {
  .metrics-strip { grid-template-columns: repeat(2, 1fr); }
  .metrics-strip article:nth-child(2) { border-right: 0; }
  .metrics-strip article:nth-child(-n+2) { border-bottom: 1px solid var(--line); }
  .filter-bar { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 991.98px) {
  .app-shell { display: block; }
  .app-main { min-height: 100vh; }
  .sidebar { position: fixed; }
  .dashboard-grid { grid-template-columns: 1fr; }
  .detail-layout { grid-template-columns: 1fr; }
}

@media (max-width: 767.98px) {
  .topbar { min-height: 64px; padding: 9px 16px; }
  .eyebrow { display: none; }
  .topbar-title strong { font-size: 16px; }
  .page-content { padding: 17px 14px 30px; }
  .welcome-band { min-height: 330px; padding: 33px 24px 90px; align-items: start; }
  .welcome-band h1 { font-size: 34px; }
  .annual-seal { position: absolute; right: 18px; bottom: 20px; width: 100px; height: 100px; margin: 0; }
  .annual-seal strong { font-size: 24px; }
  .annual-seal span { font-size: 5px; }
  .annual-seal b { font-size: 7px; }
  .metrics-strip { grid-template-columns: repeat(2, 1fr); }
  .metrics-strip article { min-height: 92px; padding: 15px; gap: 8px; }
  .metrics-strip strong { font-size: 25px; }
  .metric-no { display: none; }
  .quick-links > div { grid-template-columns: 1fr; }
  .page-header { align-items: start; flex-direction: column; }
  .page-header .brand-button { width: 100%; }
  .filter-bar { grid-template-columns: 1fr; }
  .table-shell { overflow-x: auto; }
  .data-table { min-width: 780px; }
  .field, .field.span-6, .field.span-8 { grid-column: span 12; }
  .profile-head { padding: 22px; grid-template-columns: 55px 1fr; }
  .profile-avatar { width: 52px; height: 52px; }
  .profile-head .status-pill { grid-column: 2; justify-self: start; }
  .definition-grid { grid-template-columns: 1fr; }
  .role-options { grid-template-columns: 1fr; }
  .report-grid { grid-template-columns: 1fr; }
  .award-overview { grid-template-columns: 1fr; }
  .account-name, .quiet-button { display: none; }
  .login-button { padding: 9px 12px; }
  .app-footer { flex-direction: column; gap: 4px; }
  .login-layout { grid-template-columns: 1fr; }
  .login-story { min-height: 210px; padding: 28px 25px; }
  .login-story h1 { margin: 27px 0 8px; font-size: 29px; }
  .login-story p { display: none; }
  .login-year { margin-top: 18px; }
  .login-form-panel { padding: 32px 24px 38px; }
}

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