:root {
    --ink: #18202b; --ink-soft: #3f4b59; --muted: #687585; --navy: #131d29; --navy-soft: #1d2a38;
    --red: #c61f32; --red-dark: #981524; --red-soft: #fff1f3; --line: #dce2e8; --line-soft: #e9edf1;
    --canvas: #f4f6f8; --shadow-sm: 0 5px 18px rgba(20,32,44,.07); --shadow-lg: 0 20px 55px rgba(20,32,44,.1); --radius: 14px;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; min-height: 100vh; display: flex; flex-direction: column; color: var(--ink); font: 15px/1.7 Inter,ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; background: radial-gradient(circle at 10% 0%,rgba(198,31,50,.065),transparent 25rem),linear-gradient(180deg,#f8fafb 0,var(--canvas) 36rem); }
a { color: var(--red); text-underline-offset: 3px; }
a:hover { color: var(--red-dark); }
.container { width: min(1180px,calc(100% - 40px)); margin-inline: auto; }
.skip-link { position: fixed; left: 16px; top: -70px; z-index: 100; padding: 10px 16px; background: #fff; border-radius: 8px; box-shadow: var(--shadow-lg); }
.skip-link:focus { top: 14px; }
.site-header { position: relative; z-index: 5; background: rgba(255,255,255,.97); border-bottom: 1px solid rgba(220,226,232,.85); box-shadow: 0 4px 22px rgba(20,32,44,.055); }
.topbar { background: var(--navy); color: #d9e0e7; font-size: 12px; padding: 7px 0; letter-spacing: .015em; }
.topbar-inner,.footer-inner { display: flex; align-items: center; justify-content: space-between; gap: 18px; }
.secure-label { display: inline-flex; align-items: center; gap: 8px; color: #edf6f2; }
.secure-label i { width: 7px; height: 7px; border-radius: 50%; background: #43d39e; box-shadow: 0 0 0 4px rgba(67,211,158,.14); }
.brand-row { display: flex; align-items: center; justify-content: space-between; gap: 24px; min-height: 104px; }
.brand { display: inline-flex; align-items: center; gap: 16px; color: var(--ink); text-decoration: none; }
.brand:hover { color: var(--ink); }
.brand-mark { display: grid; place-items: center; min-width: 112px; height: 66px; padding: 7px 12px; border: 1px solid var(--line-soft); border-radius: 12px; background: #fff; box-shadow: var(--shadow-sm); }
.brand img { width: 94px; max-height: 51px; object-fit: contain; }
.brand > span:last-child { display: grid; }
.brand strong { font-size: 27px; line-height: 1.1; letter-spacing: -.02em; }
.brand small { color: var(--muted); margin-top: 6px; font-size: 13px; }
.account-links { display: flex; align-items: center; gap: 10px; }
.account-links a,.account-links button { min-height: 40px; display: inline-flex; align-items: center; border: 1px solid var(--line); border-radius: 9px; background: #fff; color: var(--ink); padding: 7px 14px; font: 600 13px/1 inherit; cursor: pointer; text-decoration: none; transition: .18s ease; }
.account-links a:hover,.account-links button:hover { border-color: var(--red); color: var(--red); box-shadow: var(--shadow-sm); transform: translateY(-1px); }
.account-links a:last-child { background: var(--red); border-color: var(--red); color: #fff; }
.account-links a:last-child:hover { background: var(--red-dark); color: #fff; }
.account-links form { margin: 0; }
.main-nav { background: var(--navy-soft); border-top: 3px solid var(--red); }
.nav-scroll { display: flex; flex-wrap: wrap; align-items: stretch; padding-block: 5px; }
.main-nav form { display: flex; margin: 0; }
.main-nav a,.main-nav button { display: flex; align-items: center; border: 0; color: #eaf0f5; background: transparent; text-decoration: none; padding: 10px 12px; border-radius: 7px; font: inherit; font-size: 12.5px; font-weight: 650; line-height: 1.35; cursor: pointer; transition: background .18s ease,color .18s ease; }
.main-nav a:hover,.main-nav button:hover { color: #fff; background: rgba(255,255,255,.09); }
.main-nav a.active { color: #fff; background: var(--red); }
.page-shell { flex: 1; width: min(1180px,calc(100% - 40px)); padding-top: 42px; padding-bottom: 72px; min-height: 62vh; }
.content-card,.form-card { position: relative; overflow: hidden; background: rgba(255,255,255,.98); border: 1px solid var(--line-soft); box-shadow: var(--shadow-lg); padding: clamp(26px,4.7vw,58px); border-radius: var(--radius); }
.content-card::before,.form-card::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 4px; background: linear-gradient(var(--red),#e04c5c); }
.form-card { max-width: 820px; margin-inline: auto; }
.form-card.narrow { max-width: 540px; }
.form-card > h1 { margin-bottom: 8px; }
.form-card > p:not(.eyebrow) { color: var(--muted); margin-top: 0; }
.page-heading { position: relative; margin-bottom: 32px; padding-bottom: 24px; border-bottom: 1px solid var(--line); }
.page-heading::after { content: ""; position: absolute; left: 0; bottom: -1px; width: 76px; height: 3px; border-radius: 4px; background: var(--red); }
.page-heading h1,.form-card h1,.admin-head h1 { margin: 0; font-size: clamp(31px,4.2vw,48px); line-height: 1.08; letter-spacing: -.035em; }
.eyebrow { margin: 0 0 9px; color: var(--red); font-size: 11px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; }
.prose { max-width: 940px; color: var(--ink-soft); font-size: 15.5px; }
.prose > :first-child { margin-top: 0; }
.prose > :last-child { margin-bottom: 0; }
.prose p { margin-block: 1em; }
.prose h2,.prose h3,.prose h4 { color: var(--ink); line-height: 1.25; letter-spacing: -.02em; margin-top: 36px; margin-bottom: 12px; }
.prose h2 { font-size: 26px; }
.prose h3 { font-size: 20px; }
.prose strong { color: var(--ink); }
.prose a { color: var(--red); font-weight: 600; }
.prose hr { border: 0; border-top: 1px solid var(--line); margin: 28px 0; }
.prose img { max-width: 100%; height: auto; border-radius: 8px; }
.prose ul,.prose ol { padding-left: 22px; }
.prose li { margin-block: 7px; }
.table-wrap { overflow: auto; border-radius: 10px; }
.prose table,table { width: 100%; border-collapse: separate; border-spacing: 0; margin: 22px 0; background: #fff; border: 1px solid var(--line); border-radius: 10px; overflow: hidden; }
.prose th,.prose td,th,td { border: 0; border-bottom: 1px solid var(--line-soft); padding: 12px 14px; text-align: left; vertical-align: top; }
.prose th + th,.prose td + td,th + th,td + td { border-left: 1px solid var(--line-soft); }
.prose tr:last-child td,tbody tr:last-child td { border-bottom: 0; }
.prose th,th { background: #f2f5f7; color: #4b5866; font-size: 11px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
tbody tr:hover { background: #fbfcfd; }
.code-block,td pre,.prose pre { white-space: pre-wrap; overflow-wrap: anywhere; background: var(--navy); color: #e9f0f5; padding: 18px; border-radius: 9px; box-shadow: inset 3px 0 var(--red); font: 13px/1.6 ui-monospace,SFMono-Regular,Consolas,monospace; }
.method { border: 1px solid var(--line); margin: 12px 0; border-radius: 10px; background: #fff; box-shadow: var(--shadow-sm); overflow: hidden; }
.method summary { cursor: pointer; padding: 14px 18px; color: var(--red); font-weight: 750; background: #fff; }
.method[open] summary { background: var(--red-soft); border-bottom: 1px solid #f5cdd3; }
.method-content { padding: 8px 20px 22px; }
.button { min-height: 45px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; border: 0; border-radius: 9px; background: var(--red); color: #fff !important; padding: 10px 19px; font-weight: 750; text-decoration: none; cursor: pointer; box-shadow: 0 8px 18px rgba(198,31,50,.18); transition: .18s ease; }
.button:hover { background: var(--red-dark); transform: translateY(-1px); box-shadow: 0 11px 24px rgba(198,31,50,.25); }
.button.secondary { color: var(--ink) !important; background: #fff; border: 1px solid var(--line); box-shadow: none; }
.button.secondary:hover { color: var(--red) !important; border-color: var(--red); }
.button:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible,a:focus-visible,summary:focus-visible { outline: 3px solid rgba(198,31,50,.24); outline-offset: 2px; }
.button.small { min-height: 36px; padding: 7px 13px; font-size: 12px; }
.stack { display: grid; gap: 19px; margin-top: 27px; }
.two-columns { grid-template-columns: 1fr 1fr; }
.form-grid { display: grid; gap: 19px; }
.wide { grid-column: 1/-1; }
label { display: grid; gap: 7px; color: #344150; font-size: 13px; font-weight: 750; }
input,textarea,select { width: 100%; border: 1px solid #c9d1d9; border-radius: 9px; background: #fff; padding: 11px 13px; color: var(--ink); font: inherit; transition: border-color .18s ease,box-shadow .18s ease; }
input:hover,textarea:hover,select:hover { border-color: #aab5bf; }
input:focus,textarea:focus,select:focus { border-color: var(--red); box-shadow: 0 0 0 4px rgba(198,31,50,.08); outline: 0; }
input:disabled,input:read-only { color: #687585; background: #f2f4f6; }
textarea { resize: vertical; }
textarea.editor { min-height: 520px; font-family: ui-monospace,SFMono-Regular,Consolas,monospace; font-size: 13px; }
.check { display: flex; align-items: center; gap: 9px; font-weight: 500; }
.check input { width: 17px; height: 17px; accent-color: var(--red); }
.alert { max-width: 820px; margin: 0 auto 22px; padding: 14px 17px; border: 1px solid transparent; border-radius: 10px; box-shadow: var(--shadow-sm); }
.alert ul { margin-bottom: 0; }
.alert.success { background: #e3f7ef; border-color: #bbe8d7; color: #075d45; }
.alert.error { background: #ffeaed; border-color: #f6c7ce; color: #8d1823; }
.badge { display: inline-flex; align-items: center; padding: 3px 9px; background: var(--red-soft); color: var(--red-dark); border: 1px solid #f2c8cf; border-radius: 20px; font-size: 12px; font-weight: 750; text-transform: capitalize; }
.link-grid,.stat-grid { display: grid; grid-template-columns: repeat(auto-fit,minmax(210px,1fr)); gap: 15px; margin-top: 28px; }
.link-card,.stat { position: relative; overflow: hidden; min-height: 112px; background: #f7f9fa; border: 1px solid var(--line); border-radius: 11px; padding: 19px; text-decoration: none; color: var(--ink); display: grid; align-content: center; transition: .2s ease; }
.link-card::before,.stat::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 4px; background: var(--red); }
.link-card:hover { color: var(--red); transform: translateY(-2px); box-shadow: var(--shadow-sm); }
.link-card span,.stat span { color: var(--muted); font-size: 13px; }
.stat strong { font-size: 34px; line-height: 1.15; letter-spacing: -.03em; }
.admin-head { display: flex; justify-content: space-between; align-items: end; gap: 20px; margin-bottom: 24px; }
.admin-head p:not(.eyebrow) { margin: 8px 0 0; color: var(--muted); }
.admin-head a,.admin-actions a { font-weight: 700; text-decoration: none; }
.admin-actions { display: flex; flex-wrap: wrap; gap: 15px; }
.admin-nav { display: flex; flex-wrap: wrap; align-items: center; gap: 5px; margin: -13px 0 30px; padding: 7px; border: 1px solid var(--line); border-radius: 12px; background: #fff; box-shadow: var(--shadow-sm); }
.admin-nav a,.admin-nav summary { display: block; padding: 8px 13px; border-radius: 8px; color: var(--ink-soft); font-size: 13px; font-weight: 700; line-height: 1.7; text-decoration: none; cursor: pointer; list-style: none; }
.admin-nav summary::-webkit-details-marker { display: none; }
.admin-nav details { position: relative; }
.admin-nav details > summary::after { content: "▾"; margin-left: 7px; color: var(--muted); font-size: 10px; }
.admin-nav details > div { position: absolute; top: calc(100% + 6px); left: 0; z-index: 20; min-width: 170px; padding: 6px; border: 1px solid var(--line); border-radius: 10px; background: #fff; box-shadow: var(--shadow-lg); }
.admin-nav details > div a { white-space: nowrap; }
.admin-nav a:hover { color: var(--red); background: var(--red-soft); }
.admin-nav a.active,.admin-nav details.active-group > summary { color: #fff; background: var(--navy-soft); }
.dashboard-hero { position: relative; overflow: hidden; display: grid; grid-template-columns: minmax(0,1fr) 260px; align-items: center; gap: 35px; margin-bottom: 36px; padding: clamp(28px,4vw,46px); border-radius: 18px; color: #fff; background: linear-gradient(125deg,#131d29 0%,#202e3d 67%,#4b1822 130%); box-shadow: 0 22px 55px rgba(19,29,41,.2); }
.dashboard-hero::before { content: ""; position: absolute; width: 330px; height: 330px; right: -125px; top: -190px; border: 70px solid rgba(255,255,255,.035); border-radius: 50%; }
.dashboard-hero::after { content: ""; position: absolute; width: 190px; height: 190px; right: 145px; bottom: -155px; border: 46px solid rgba(198,31,50,.2); border-radius: 50%; }
.dashboard-hero > * { position: relative; z-index: 1; }
.dashboard-hero .eyebrow { color: #ff8795; }
.dashboard-hero h1 { max-width: 760px; margin: 0; font-size: clamp(30px,4vw,48px); line-height: 1.08; letter-spacing: -.035em; }
.dashboard-hero > div:first-child > p:not(.eyebrow) { max-width: 690px; margin: 13px 0 0; color: #c7d0d8; }
.hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 23px; }
.dashboard-hero .button.secondary { color: #fff !important; border-color: rgba(255,255,255,.22); background: rgba(255,255,255,.08); }
.dashboard-hero .button.secondary:hover { border-color: #fff; background: rgba(255,255,255,.14); }
.text-action { padding: 8px 10px; color: #fff; font-weight: 750; text-decoration: none; }
.text-action:hover { color: #ff9aa6; }
.dashboard-status { display: grid; gap: 7px; padding: 20px; border: 1px solid rgba(255,255,255,.12); border-radius: 13px; background: rgba(255,255,255,.07); backdrop-filter: blur(8px); }
.dashboard-status span { display: flex; align-items: center; gap: 9px; color: #d9eee7; font-size: 12px; font-weight: 750; text-transform: uppercase; letter-spacing: .08em; }
.dashboard-status i { width: 8px; height: 8px; border-radius: 50%; background: #43d39e; box-shadow: 0 0 0 5px rgba(67,211,158,.14); }
.dashboard-status strong { margin-top: 4px; font-size: 24px; }
.dashboard-status small { color: #aebac5; }
.dashboard-section { margin-bottom: 26px; }
.section-heading,.panel-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 18px; }
.section-heading { margin-bottom: 16px; }
.section-heading h2,.panel-heading h2 { margin: 0; font-size: 22px; line-height: 1.2; letter-spacing: -.02em; }
.section-heading > span { color: var(--muted); font-size: 12px; }
.metric-grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 13px; }
.metric-card { --metric:#64748b; position: relative; min-height: 118px; display: grid; grid-template-columns: 44px 1fr 20px; align-items: center; gap: 13px; overflow: hidden; padding: 18px; border: 1px solid var(--line); border-radius: 13px; color: var(--ink); background: #fff; box-shadow: var(--shadow-sm); text-decoration: none; transition: transform .18s ease,box-shadow .18s ease,border-color .18s ease; }
.metric-card::after { content: ""; position: absolute; inset: auto -25px -52px auto; width: 105px; height: 105px; border: 24px solid color-mix(in srgb,var(--metric) 9%,transparent); border-radius: 50%; }
.metric-card:hover { color: var(--ink); border-color: color-mix(in srgb,var(--metric) 42%,var(--line)); box-shadow: 0 15px 34px rgba(20,32,44,.12); transform: translateY(-3px); }
.metric-icon { width: 43px; height: 43px; display: grid; place-items: center; border-radius: 11px; color: var(--metric); background: color-mix(in srgb,var(--metric) 11%,white); font-size: 13px; font-weight: 850; }
.metric-copy { display: grid; }
.metric-copy strong { font-size: 29px; line-height: 1; letter-spacing: -.035em; }
.metric-copy small { margin-top: 7px; color: var(--muted); font-size: 12px; font-weight: 650; }
.metric-arrow { position: relative; z-index: 1; color: #a8b1ba; font-size: 18px; transition: transform .18s ease,color .18s ease; }
.metric-card:hover .metric-arrow { color: var(--metric); transform: translateX(3px); }
.tone-red { --metric:#c61f32; }.tone-navy { --metric:#26394d; }.tone-blue { --metric:#2772b5; }.tone-green { --metric:#168568; }.tone-violet { --metric:#7252a3; }.tone-amber { --metric:#b66b10; }
.dashboard-layout { display: grid; grid-template-columns: minmax(0,1.5fr) minmax(300px,.8fr); gap: 18px; }
.dashboard-panel { min-width: 0; overflow: hidden; border: 1px solid var(--line); border-radius: 14px; background: #fff; box-shadow: var(--shadow-sm); }
.dashboard-panel > .panel-heading { padding: 21px 23px 17px; border-bottom: 1px solid var(--line-soft); }
.panel-heading .eyebrow { margin-bottom: 5px; }
.panel-heading > a { color: var(--red); font-size: 12px; font-weight: 750; text-decoration: none; }
.dashboard-panel-wide { min-width: 0; }
.dashboard-table { margin: 0; border: 0; border-radius: 0; }
.dashboard-table th:first-child,.dashboard-table td:first-child { padding-left: 23px; }
.dashboard-table th:last-child,.dashboard-table td:last-child { padding-right: 23px; text-align: right; }
.user-cell { display: flex; align-items: center; gap: 11px; }
.user-cell > span { flex: 0 0 35px; height: 35px; display: grid; place-items: center; border-radius: 50%; color: var(--red-dark); background: var(--red-soft); font-size: 12px; font-weight: 850; }
.user-cell div { min-width: 0; display: grid; }
.user-cell a { overflow: hidden; color: var(--ink); font-weight: 750; text-decoration: none; text-overflow: ellipsis; }
.user-cell small { overflow: hidden; color: var(--muted); text-overflow: ellipsis; }
.dashboard-empty { display: grid; justify-items: center; gap: 3px; padding: 25px; color: var(--muted); text-align: center; }
.dashboard-empty > span { width: 34px; height: 34px; display: grid; place-items: center; margin-bottom: 4px; border-radius: 50%; color: #0a7657; background: #e3f7ef; font-weight: 850; }
.dashboard-empty strong { color: var(--ink-soft); }
.quick-list,.activity-list { display: grid; }
.quick-list > a { display: grid; grid-template-columns: 42px 1fr; align-items: center; gap: 12px; padding: 15px 20px; border-bottom: 1px solid var(--line-soft); color: var(--ink); text-decoration: none; transition: background .18s ease; }
.quick-list > a:last-child,.activity-list > a:last-child { border-bottom: 0; }
.quick-list > a:hover { color: var(--red); background: #fbfcfd; }
.quick-list > a > span { width: 39px; height: 39px; display: grid; place-items: center; border-radius: 10px; color: var(--red); background: var(--red-soft); font-size: 12px; font-weight: 850; }
.quick-list div,.activity-list div { min-width: 0; display: grid; }
.quick-list strong { font-size: 13px; }
.quick-list small,.activity-list small { overflow: hidden; color: var(--muted); font-size: 11.5px; text-overflow: ellipsis; white-space: nowrap; }
.activity-list > a { display: grid; grid-template-columns: 10px minmax(0,1fr) auto; align-items: center; gap: 12px; padding: 14px 22px; border-bottom: 1px solid var(--line-soft); color: var(--ink); text-decoration: none; transition: background .18s ease; }
.activity-list > a:hover { color: var(--red); background: #fbfcfd; }
.activity-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--red); box-shadow: 0 0 0 4px var(--red-soft); }
.activity-dot.api { background: #2772b5; box-shadow: 0 0 0 4px #e8f3fc; }
.activity-list strong { overflow: hidden; font-size: 13px; text-overflow: ellipsis; white-space: nowrap; }
.activity-list time { color: var(--muted); font-size: 11px; }
.admin-form { max-width: 960px; }
.user-form { padding: clamp(22px,3vw,36px); }
.user-form > form { margin-top: 0; }
.form-section { min-width: 0; margin: 0; padding: 22px; border: 1px solid var(--line); border-radius: 12px; background: #fbfcfd; }
.form-section legend { padding: 0 9px; color: var(--ink); font-size: 17px; font-weight: 800; letter-spacing: -.015em; }
.form-section > p { margin: -5px 0 18px; color: var(--muted); font-size: 12.5px; }
.form-section label > b { color: var(--red); }
.form-section label small { color: var(--muted); font-size: 11.5px; font-weight: 500; line-height: 1.5; }
.form-section code { padding: 2px 5px; border-radius: 4px; background: #edf1f4; color: var(--ink-soft); font-size: 11px; }
.notification-check { grid-template-columns: 19px 1fr; align-items: start; gap: 11px; padding: 14px; border: 1px solid #bdded3; border-radius: 10px; background: #f0faf6; }
.notification-check input { margin-top: 3px; }
.notification-check > span { display: grid; gap: 2px; }
.notification-check strong { color: #175c48; font-size: 13px; }
.password-state { display: grid; grid-template-columns: 38px 1fr; align-items: center; gap: 12px; margin-bottom: 18px; padding: 14px; border: 1px solid #bde1d5; border-radius: 10px; background: #effaf6; }
.password-state > span { width: 36px; height: 36px; display: grid; place-items: center; border-radius: 50%; color: #087457; background: #d4f2e7; font-weight: 900; }
.password-state > div { display: grid; }
.password-state strong { color: #145b47; font-size: 13px; }
.password-state small { color: #4e7368; font-size: 11.5px; }
.password-state.missing { border-color: #f1c8cf; background: var(--red-soft); }
.password-state.missing > span { color: var(--red-dark); background: #f8dce1; }
.password-state.missing strong { color: var(--red-dark); }
.readonly-setting { display: grid; gap: 3px; margin-top: 16px; padding: 13px 15px; border: 1px solid var(--line); border-radius: 9px; background: #f2f5f7; }
.readonly-setting > span { color: var(--muted); font-size: 11px; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; }
.readonly-setting > strong { font-size: 13px; }
.readonly-setting > small { color: var(--muted); font-size: 11.5px; }
.compact-card { padding: 16px 20px; }
.compact-card table { margin: 0; }
.table-primary { color: var(--ink); font-weight: 800; text-decoration: none; }
.table-primary:hover { color: var(--red); }
.filters { display: flex; gap: 10px; margin-bottom: 18px; padding: 14px; border: 1px solid var(--line); border-radius: 11px; background: #fff; box-shadow: var(--shadow-sm); }
.filters input { flex: 1; }
.actions { white-space: nowrap; }
.actions a,.actions form { display: inline-flex; margin-right: 10px; }
.actions button { border: 0; color: var(--red); background: none; cursor: pointer; font-weight: 700; }
.empty-state { padding-block: 40px; color: var(--muted); text-align: center; }
.status-tabs { display: flex; flex-wrap: wrap; gap: 7px; margin-bottom: 17px; }
.status-tabs a { padding: 7px 12px; border: 1px solid var(--line); border-radius: 8px; background: #fff; color: var(--ink-soft); font-size: 13px; font-weight: 700; text-decoration: none; }
.admin-split { display: grid; grid-template-columns: minmax(260px,360px) 1fr; align-items: start; gap: 22px; }
.compact-form { padding: 25px; }
.compact-form h2 { margin-top: 0; }
.media-grid { display: grid; grid-template-columns: repeat(auto-fit,minmax(240px,1fr)); gap: 16px; }
.media-card { overflow: hidden; border: 1px solid var(--line); border-radius: 12px; background: #fff; box-shadow: var(--shadow-sm); }
.media-card > img,.file-icon { width: 100%; height: 170px; display: grid; place-items: center; object-fit: cover; background: #eef2f5; color: var(--muted); font-size: 30px; font-weight: 800; }
.media-card > div:last-child { display: grid; gap: 8px; padding: 16px; }
.media-card small { display: block; overflow-wrap: anywhere; color: var(--muted); }
.media-card .badge { justify-self: start; }
.menu-editor { display: grid; gap: 10px; }
.menu-editor-row { display: grid; grid-template-columns: 55px 1fr 110px; align-items: end; gap: 12px; padding: 13px; border: 1px solid var(--line); border-radius: 10px; background: #f8fafb; }
.menu-editor-row > span { align-self: center; color: var(--muted); font: 12px ui-monospace,SFMono-Regular,Consolas,monospace; }
.pager { display: flex; align-items: center; justify-content: space-between; gap: 18px; margin-top: 20px; padding: 13px 15px; border: 1px solid var(--line); border-radius: 11px; background: #fff; box-shadow: var(--shadow-sm); }
.pager p { margin: 0; color: var(--muted); font-size: 13px; }
.pager-links { display: flex; flex-wrap: wrap; align-items: center; gap: 5px; }
.pager-links a,.pager-links span { min-width: 36px; min-height: 36px; display: inline-grid; place-items: center; padding: 5px 10px; border: 1px solid var(--line); border-radius: 8px; color: var(--ink); font-size: 13px; font-weight: 700; text-decoration: none; }
.pager-links a:hover { color: var(--red); border-color: var(--red); background: var(--red-soft); }
.pager-links .current { color: #fff; border-color: var(--red); background: var(--red); }
.pager-links .ellipsis { color: #9aa4ad; background: #f5f7f8; }
.document-navigation { display: flex; align-items: stretch; justify-content: space-between; gap: 16px; margin-top: 34px; padding-top: 24px; border-top: 1px solid var(--line); }
.document-navigation-link { width: min(48%,360px); display: grid; gap: 5px; padding: 15px 17px; border: 1px solid var(--line); border-radius: 11px; background: #f8fafb; color: var(--ink); text-decoration: none; transition: border-color .15s ease,background .15s ease,transform .15s ease; }
.document-navigation-link span { color: var(--muted); font-size: 12px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; }
.document-navigation-link strong { line-height: 1.35; }
.document-navigation-link.next { margin-left: auto; text-align: right; }
.document-navigation-link:hover { border-color: var(--red); background: var(--red-soft); transform: translateY(-1px); }
.document-navigation-link:hover span { color: var(--red); }
.site-footer { background: var(--navy); color: #aeb8c2; padding: 27px 0; font-size: 12.5px; }
.site-footer span:last-child { color: #dce3e9; }
@media (max-width:800px) {
    .container,.page-shell { width: min(100% - 28px,1180px); }
    .brand-row { min-height: 92px; padding-block: 14px; }
    .brand-mark { min-width: 88px; height: 58px; padding: 5px 8px; }
    .brand img { width: 78px; }
    .brand strong { font-size: 22px; }
    .account-links { flex-wrap: wrap; justify-content: flex-end; }
    .account-links a,.account-links button { min-height: 36px; padding: 6px 11px; }
    .main-nav { overflow-x: auto; }
    .nav-scroll { width: max-content; min-width: 100%; flex-wrap: nowrap; }
    .main-nav a { padding: 10px 11px; }
    .page-shell { padding-top: 28px; padding-bottom: 48px; }
    .two-columns { grid-template-columns: 1fr; }
    .wide { grid-column: auto; }
    .admin-head { align-items: flex-start; flex-direction: column; }
    .dashboard-hero { grid-template-columns: 1fr; }
    .dashboard-status { max-width: 340px; }
    .metric-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
    .dashboard-layout { grid-template-columns: 1fr; }
    .admin-nav { overflow-x: auto; flex-wrap: nowrap; }
    .admin-nav a { white-space: nowrap; }
    .admin-nav details > div { position: fixed; top: auto; left: 20px; right: 20px; min-width: 0; }
    .filters { flex-wrap: wrap; }
    .pager { align-items: flex-start; flex-direction: column; }
    .document-navigation { flex-direction: column; }
    .document-navigation-link { width: 100%; }
    .admin-split { grid-template-columns: 1fr; }
    .menu-editor-row { grid-template-columns: 1fr; }
    .content-card,.form-card { padding: 26px 22px; border-radius: 12px; }
}
@media (max-width:540px) {
    .topbar-inner { justify-content: center; }
    .topbar-inner > span:first-child { display: none; }
    .brand-row { align-items: flex-start; }
    .brand { gap: 10px; }
    .brand small { display: none; }
    .brand-mark { min-width: 72px; width: 72px; height: 50px; }
    .brand img { width: 64px; }
    .brand strong { font-size: 19px; }
    .account-links { gap: 6px; }
    .account-links a,.account-links button { font-size: 12px; padding-inline: 9px; }
    .footer-inner { align-items: flex-start; flex-direction: column; gap: 4px; }
    .page-heading h1,.form-card h1,.admin-head h1 { font-size: 31px; }
    .dashboard-hero { margin-inline: -7px; padding: 27px 22px; border-radius: 14px; }
    .dashboard-hero h1 { font-size: 31px; }
    .metric-grid { grid-template-columns: 1fr; }
    .section-heading { align-items: flex-start; flex-direction: column; }
    .dashboard-table th:nth-child(2),.dashboard-table td:nth-child(2),.dashboard-table th:nth-child(3),.dashboard-table td:nth-child(3) { display: none; }
    .filters > * { flex-basis: 100%; }
}
@media (prefers-reduced-motion:reduce) { *,*::before,*::after { scroll-behavior: auto !important; transition: none !important; } }