:root {
  --green-950: #042d22;
  --green-900: #063e2d;
  --green-800: #07543b;
  --green-700: #0b684a;
  --green-100: #e9f1ed;
  --gold: #d5a72c;
  --ink: #18231f;
  --muted: #68746e;
  --line: #dfe6e2;
  --bg: #f4f6f5;
  --white: #fff;
  --sans: Inter, Aptos, "Segoe UI", Arial, sans-serif;
  --serif: Georgia, "Times New Roman", serif;
}
* { box-sizing: border-box; }
body { margin: 0; color: var(--ink); font-family: var(--sans); background: var(--bg); }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; }
img { display: block; max-width: 100%; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); }
.admin-button { min-height: 46px; display: inline-flex; align-items: center; justify-content: center; gap: 18px; border: 1px solid var(--green-800); padding: 11px 21px; background: var(--green-800); color: #fff; cursor: pointer; font-size: .75rem; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; transition: .2s; }
.admin-button:hover { background: var(--green-950); }
.admin-button.secondary { border-color: #bdc9c2; background: #fff; color: var(--green-800); }
.admin-button.secondary:hover { border-color: var(--green-800); }
.admin-alert { margin-bottom: 22px; border-left: 4px solid; padding: 14px 18px; font-size: .83rem; }
.admin-alert.success { border-color: #15835c; background: #e4f3ec; color: #07543b; }
.admin-alert.error { border-color: #b74040; background: #f7e7e7; color: #8e2929; }

/* Login */
.admin-login-page { min-height: 100vh; background: #fff; }
.login-shell { min-height: 100vh; display: grid; grid-template-columns: 1.05fr .95fr; }
.login-brand { position: relative; display: flex; flex-direction: column; justify-content: space-between; overflow: hidden; padding: 60px clamp(40px, 7vw, 110px); background: linear-gradient(135deg, rgba(4,45,34,.96), rgba(7,84,59,.84)), url('../images/hero-campus.png') center/cover; color: #fff; }
.login-brand::after { position: absolute; right: -110px; bottom: -130px; width: 430px; height: 430px; border: 80px solid rgba(255,255,255,.05); border-radius: 50%; content: ''; }
.login-brand > div { position: relative; z-index: 1; display: flex; align-items: center; gap: 15px; font-family: var(--serif); font-size: 1.3rem; }
.login-brand img { width: 65px; height: 65px; }
.login-brand blockquote { position: relative; z-index: 1; max-width: 650px; margin: auto 0; font-family: var(--serif); font-size: clamp(2.6rem, 4.3vw, 5rem); line-height: 1.12; }
.login-brand > p { position: relative; z-index: 1; margin: 0; color: rgba(255,255,255,.65); font-size: .68rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.login-form-wrap { display: grid; place-items: center; padding: 45px; }
.login-form { width: min(100%, 430px); }
.back-link { display: inline-block; margin-bottom: 70px; color: var(--green-700); font-size: .74rem; font-weight: 700; }
.admin-kicker { display: block; margin-bottom: 12px; color: var(--green-700); font-size: .67rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; }
.login-form h1 { margin: 0 0 10px; font-family: var(--serif); font-size: 3.3rem; font-weight: 500; }
.login-form > p { margin: 0 0 32px; color: var(--muted); }
.login-form label, .installer-form label, .user-form label { display: block; margin-bottom: 19px; color: var(--ink); font-size: .72rem; font-weight: 750; }
.login-form input, .installer-form input, .user-form input, .user-form select { width: 100%; margin-top: 7px; border: 1px solid #cbd5d0; padding: 14px; background: #fff; outline: 0; }
.login-form input:focus, .installer-form input:focus { border-color: var(--green-700); box-shadow: 0 0 0 3px rgba(11,104,74,.1); }
.login-form .admin-button { width: 100%; margin-top: 4px; }
.setup-note { margin-top: 35px; border: 1px solid var(--line); padding: 20px; background: var(--bg); }
.setup-note strong { font-family: var(--serif); font-size: 1.1rem; }
.setup-note p { margin: 5px 0; color: var(--muted); font-size: .75rem; }
.setup-note a { color: var(--green-700); font-size: .72rem; font-weight: 800; text-transform: uppercase; }

/* Admin layout */
.admin-app { min-height: 100vh; }
.admin-sidebar { position: fixed; z-index: 50; inset: 0 auto 0 0; width: 270px; display: flex; flex-direction: column; background: var(--green-950); color: #fff; }
.admin-logo { min-height: 92px; display: flex; align-items: center; gap: 12px; border-bottom: 1px solid rgba(255,255,255,.12); padding: 16px 22px; }
.admin-logo img { width: 52px; height: 52px; }
.admin-logo span { display: flex; flex-direction: column; }
.admin-logo strong { font-family: var(--serif); font-size: 1.03rem; }
.admin-logo small { margin-top: 4px; color: rgba(255,255,255,.5); font-size: .55rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.admin-sidebar nav { flex: 1; overflow-y: auto; padding: 20px 12px; }
.admin-sidebar nav a { position: relative; min-height: 44px; display: flex; align-items: center; gap: 13px; margin-bottom: 3px; padding: 8px 13px; color: rgba(255,255,255,.7); font-size: .76rem; font-weight: 650; transition: .2s; }
.admin-sidebar nav a > span { width: 22px; color: var(--gold); font-size: 1rem; text-align: center; }
.admin-sidebar nav a:hover, .admin-sidebar nav a.active { background: rgba(255,255,255,.09); color: #fff; }
.admin-sidebar nav a.active::before { position: absolute; top: 9px; bottom: 9px; left: -12px; width: 3px; background: var(--gold); content: ''; }
.admin-sidebar nav a b { min-width: 20px; margin-left: auto; border-radius: 10px; padding: 2px 6px; background: var(--gold); color: var(--green-950); font-size: .6rem; text-align: center; }
.sidebar-footer { border-top: 1px solid rgba(255,255,255,.12); padding: 17px 24px; }
.sidebar-footer a, .sidebar-footer button { display: block; border: 0; padding: 6px 0; background: transparent; color: rgba(255,255,255,.62); cursor: pointer; font-size: .68rem; }
.sidebar-footer button:hover, .sidebar-footer a:hover { color: #fff; }
.admin-workspace { min-height: 100vh; margin-left: 270px; }
.admin-topbar { position: sticky; z-index: 40; top: 0; height: 79px; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--line); padding: 0 38px; background: rgba(255,255,255,.96); backdrop-filter: blur(10px); }
.admin-topbar > div:first-of-type { display: flex; flex-direction: column; }
.admin-topbar > div:first-of-type span { color: var(--muted); font-size: .58rem; font-weight: 750; letter-spacing: .08em; text-transform: uppercase; }
.admin-topbar > div:first-of-type strong { margin-top: 2px; font-size: .95rem; }
.admin-menu-toggle { display: none; }
.admin-user { display: flex; align-items: center; gap: 10px; }
.admin-user > span { width: 38px; height: 38px; display: grid; place-items: center; border-radius: 50%; background: var(--green-800); color: #fff; font-family: var(--serif); }
.admin-user div { display: flex; flex-direction: column; }
.admin-user strong { font-size: .75rem; }
.admin-user small { color: var(--muted); font-size: .59rem; text-transform: capitalize; }
.admin-content { width: min(calc(100% - 70px), 1400px); margin-inline: auto; padding: 43px 0 80px; }
.admin-page-title { display: flex; align-items: end; justify-content: space-between; gap: 30px; margin-bottom: 30px; }
.admin-page-title > div > span, .panel-title span { color: var(--green-700); font-size: .63rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.admin-page-title h1 { margin: 8px 0 5px; font-family: var(--serif); font-size: 2.35rem; font-weight: 500; }
.admin-page-title p { margin: 0; color: var(--muted); font-size: .82rem; }
.metric-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 17px; margin-bottom: 25px; }
.metric-grid article { display: flex; flex-direction: column; border-top: 3px solid var(--green-700); padding: 24px; background: #fff; box-shadow: 0 5px 18px rgba(4,45,34,.04); }
.metric-grid span { color: var(--muted); font-size: .65rem; font-weight: 750; text-transform: uppercase; }
.metric-grid strong { margin: 15px 0 8px; color: var(--green-900); font-family: var(--serif); font-size: 2.7rem; font-weight: 500; }
.metric-grid small { color: #89938e; font-size: .64rem; }
.dashboard-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
.admin-panel, .table-card, .form-panel, .message-card { background: #fff; box-shadow: 0 5px 18px rgba(4,45,34,.04); }
.panel-title { display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--line); padding: 22px 25px; }
.panel-title h2 { margin: 4px 0 0; font-family: var(--serif); font-size: 1.35rem; font-weight: 500; }
.panel-title > a { color: var(--green-700); font-size: .65rem; font-weight: 750; text-transform: uppercase; }
.compact-list > a { display: grid; grid-template-columns: 10px 1fr auto; align-items: center; gap: 13px; border-bottom: 1px solid #edf0ee; padding: 15px 24px; }
.compact-list > a:hover { background: var(--bg); }
.compact-list > a:last-child { border: 0; }
.compact-list div { display: flex; flex-direction: column; min-width: 0; }
.compact-list strong { overflow: hidden; font-size: .75rem; white-space: nowrap; text-overflow: ellipsis; }
.compact-list small { margin-top: 3px; color: var(--muted); font-size: .61rem; text-transform: capitalize; }
.compact-list b { color: var(--green-700); }
.status-dot { width: 7px; height: 7px; border-radius: 50%; background: #89938e; }
.status-dot.published, .status-dot.read { background: #16835e; }
.status-dot.new { background: var(--gold); }

/* Content forms and tables */
.resource-form { max-width: 1000px; }
.form-panel { padding: 35px; }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
.form-grid label { color: var(--ink); font-size: .7rem; font-weight: 750; }
.form-grid input:not([type=checkbox]), .form-grid select, .form-grid textarea { width: 100%; margin-top: 7px; border: 1px solid #ccd6d1; padding: 12px 13px; background: #fff; outline: 0; }
.form-grid textarea { resize: vertical; line-height: 1.55; }
.form-grid input:focus, .form-grid select:focus, .form-grid textarea:focus { border-color: var(--green-700); box-shadow: 0 0 0 3px rgba(11,104,74,.08); }
.form-grid label > small { display: block; margin-top: 7px; color: var(--muted); font-size: .6rem; font-weight: 500; }
.field-wide { grid-column: span 2; }
.check-field { min-height: 46px; display: flex; align-items: center; gap: 8px; margin-top: 7px; padding: 11px; background: var(--bg); font-weight: 500; }
.current-file { display: block; margin: 8px 0; color: var(--green-700); font-size: .68rem; }
.current-file img { width: 160px; height: 95px; object-fit: cover; }
.form-actions { display: flex; align-items: center; justify-content: flex-end; gap: 25px; margin-top: 20px; }
.form-actions > a { color: var(--muted); font-size: .74rem; }
.table-toolbar { min-height: 65px; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--line); padding: 10px 22px; }
.table-toolbar > span { color: var(--muted); font-size: .7rem; }
.table-toolbar input { width: 260px; border: 1px solid var(--line); padding: 10px 12px; outline: 0; }
.table-scroll { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; }
th { padding: 13px 18px; background: #f8faf9; color: var(--muted); font-size: .61rem; letter-spacing: .08em; text-align: left; text-transform: uppercase; }
td { border-top: 1px solid #edf0ee; padding: 14px 18px; color: var(--muted); font-size: .72rem; }
.item-cell { min-width: 270px; display: flex; align-items: center; gap: 12px; }
.item-cell > img, .item-cell > span { width: 45px; height: 45px; flex: 0 0 auto; object-fit: cover; }
.item-cell > span { display: grid; place-items: center; background: var(--green-100); color: var(--green-700); font-family: var(--serif); font-size: 1.2rem; }
.item-cell > div { display: flex; flex-direction: column; }
.item-cell strong { color: var(--ink); font-size: .76rem; }
.item-cell small { margin-top: 3px; color: var(--muted); font-size: .6rem; }
.status-pill { display: inline-flex; margin-right: 9px; border-radius: 12px; padding: 4px 9px; background: #ecefed; color: #59645e; font-size: .57rem; font-weight: 800; text-transform: uppercase; }
.status-pill.published, .status-pill.active { background: #e1f1ea; color: #08704d; }
.status-pill.draft, .status-pill.inactive { background: #f4e9d1; color: #8a6420; }
.row-actions { display: flex; align-items: center; gap: 12px; }
.row-actions a, .row-actions button { border: 0; padding: 0; background: none; color: var(--green-700); cursor: pointer; font-size: .65rem; font-weight: 750; }
.row-actions button { color: #a53a3a; }
.admin-empty { padding: 45px 25px; color: var(--muted); font-size: .8rem; text-align: center; }

/* Messages & users */
.message-list { display: grid; gap: 18px; }
.message-card { border-left: 4px solid #ccd5d0; padding: 27px 30px; }
.message-card.new { border-left-color: var(--gold); }
.message-meta { display: grid; grid-template-columns: 40px 1fr auto; align-items: center; gap: 12px; }
.message-meta > span { width: 40px; height: 40px; display: grid; place-items: center; border-radius: 50%; background: var(--green-100); color: var(--green-700); font-family: var(--serif); }
.message-meta > div { display: flex; flex-direction: column; }
.message-meta strong { font-size: .76rem; }
.message-meta a, .message-meta time { color: var(--muted); font-size: .62rem; }
.message-card h2 { margin: 22px 0 9px; font-family: var(--serif); font-size: 1.3rem; font-weight: 500; }
.message-card p { color: var(--muted); font-size: .8rem; line-height: 1.65; }
.message-card > small { color: var(--green-700); font-size: .65rem; }
.message-actions { display: flex; align-items: center; gap: 15px; margin-top: 20px; border-top: 1px solid var(--line); padding-top: 16px; }
.message-actions a, .message-actions button { border: 0; padding: 0; background: none; color: var(--green-700); cursor: pointer; font-size: .65rem; font-weight: 750; }
.message-actions button.danger { color: #a53a3a; }
.users-layout { display: grid; grid-template-columns: 350px 1fr; align-items: start; gap: 25px; }
.user-form { padding: 28px; }
.user-form h2 { margin-top: 0; font-family: var(--serif); font-weight: 500; }
.user-form .admin-button { width: 100%; }
.user-list { background: #fff; }
.user-list article { display: grid; grid-template-columns: 42px 1fr auto auto auto; align-items: center; gap: 13px; border-bottom: 1px solid var(--line); padding: 16px 20px; }
.user-list article > span { width: 42px; height: 42px; display: grid; place-items: center; border-radius: 50%; background: var(--green-100); color: var(--green-700); font-family: var(--serif); }
.user-list article > div { display: flex; flex-direction: column; }
.user-list strong { font-size: .76rem; }
.user-list small { color: var(--muted); font-size: .61rem; text-transform: capitalize; }
.user-list a, .user-list button { border: 0; background: none; color: var(--green-700); cursor: pointer; font-size: .65rem; font-weight: 750; }
.user-list button { color: #a53a3a; }

/* Installer */
.installer-page { min-height: 100vh; padding: 55px 20px; background: linear-gradient(135deg, var(--green-950) 0 35%, var(--bg) 35%); }
.installer-shell { width: min(100%, 850px); margin: auto; padding: 45px; background: #fff; box-shadow: 0 25px 70px rgba(0,0,0,.2); }
.installer-heading { display: flex; align-items: center; gap: 20px; margin-bottom: 35px; }
.installer-heading img { width: 75px; height: 75px; }
.installer-heading span { color: var(--green-700); font-size: .64rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.installer-heading h1 { margin: 3px 0; font-family: var(--serif); font-size: 2.7rem; font-weight: 500; }
.installer-heading p { margin: 0; color: var(--muted); font-size: .78rem; }
.installer-form fieldset { margin: 0 0 27px; border: 1px solid var(--line); padding: 25px; }
.installer-form legend { padding: 0 10px; font-family: var(--serif); font-size: 1.15rem; }
.installer-form legend span { width: 28px; height: 28px; display: inline-grid; place-items: center; margin-right: 7px; border-radius: 50%; background: var(--green-800); color: #fff; font-family: var(--sans); font-size: .65rem; }
.install-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 2px 20px; }
.install-grid .wide { grid-column: span 2; }
.installer-form label small { display: block; margin-top: 5px; color: var(--muted); font-weight: 500; }
.installer-note { color: var(--muted); font-size: .68rem; }
.install-complete { padding: 55px; background: var(--bg); text-align: center; }
.install-complete > span { width: 65px; height: 65px; display: grid; place-items: center; margin: auto; border-radius: 50%; background: var(--green-800); color: #fff; font-size: 1.8rem; }
.install-complete h2 { margin: 22px 0 10px; font-family: var(--serif); font-weight: 500; }
.install-complete p { color: var(--muted); }

@media (max-width: 1050px) {
  .metric-grid { grid-template-columns: 1fr 1fr; }
  .dashboard-grid { grid-template-columns: 1fr; }
  .users-layout { grid-template-columns: 1fr; }
}
@media (max-width: 800px) {
  .login-shell { grid-template-columns: 1fr; }
  .login-brand { min-height: 280px; padding: 35px; }
  .login-brand blockquote { margin: 35px 0; font-size: 2.5rem; }
  .login-form-wrap { padding: 45px 25px; }
  .back-link { margin-bottom: 40px; }
  .admin-sidebar { visibility: hidden; transform: translateX(-100%); transition: .25s; }
  .admin-sidebar.open { visibility: visible; transform: none; }
  .admin-workspace { margin-left: 0; }
  .admin-menu-toggle { display: block; border: 0; background: none; cursor: pointer; font-size: 1.35rem; }
  .admin-topbar { padding-inline: 20px; }
  .admin-topbar > div:first-of-type { display: none; }
  .admin-content { width: min(calc(100% - 30px), 1400px); }
  .form-grid { grid-template-columns: 1fr; }
  .field-wide { grid-column: auto; }
  .admin-page-title { align-items: start; flex-direction: column; }
  .installer-shell { padding: 30px 22px; }
}
@media (max-width: 520px) {
  .login-form h1 { font-size: 2.7rem; }
  .metric-grid { grid-template-columns: 1fr; }
  .admin-content { padding-top: 30px; }
  .table-toolbar { align-items: stretch; flex-direction: column; gap: 8px; padding-block: 15px; }
  .table-toolbar input { width: 100%; }
  .message-meta { grid-template-columns: 40px 1fr; }
  .message-meta time { grid-column: 2; }
  .message-actions { align-items: flex-start; flex-direction: column; }
  .install-grid { grid-template-columns: 1fr; }
  .install-grid .wide { grid-column: auto; }
  .installer-heading { align-items: flex-start; }
  .installer-heading img { width: 58px; height: 58px; }
  .installer-heading h1 { font-size: 2.15rem; }
}