:root {
  --bg: #f3f1ee;
  --surface: #ffffff;
  --surface-warm: #fffaf5;
  --sidebar: #1f1b18;
  --sidebar-soft: #3a312b;
  --primary: #f27616;
  --primary-dark: #b94b05;
  --primary-soft: #fff2e7;
  --text: #25211e;
  --muted: #746b63;
  --border: #ded7cf;
  --success: #237a57;
  --success-soft: #eaf7f0;
  --warning: #9a5b0b;
  --warning-soft: #fff4dc;
  --danger: #a92332;
  --shadow-sm: 0 6px 18px rgba(31, 27, 24, .06);
  --shadow-md: 0 14px 34px rgba(31, 27, 24, .10);
  --focus: 0 0 0 3px rgba(242, 118, 22, .24);
  --radius: 10px;
}

* { box-sizing: border-box; }
html { color: var(--text); background: var(--bg); font-family: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif; scroll-behavior: smooth; }
body { margin: 0; min-height: 100vh; background: var(--bg); color: var(--text); font-size: 15px; line-height: 1.5; }
a { color: inherit; }
button, input { font: inherit; }
button { cursor: pointer; }
[hidden] { display: none !important; }

.skip-link { position: fixed; left: 16px; top: -60px; z-index: 2000; padding: 10px 14px; background: var(--primary); color: #fff; border-radius: 8px; text-decoration: none; box-shadow: var(--shadow-md); }
.skip-link:focus { top: 16px; }

.app-shell { min-height: 100vh; display: flex; }
.sidebar { width: 268px; background: var(--sidebar); color: #fff; padding: 22px 16px; display: flex; flex-direction: column; position: fixed; inset: 0 auto 0 0; z-index: 100; overflow-y: auto; box-shadow: 10px 0 28px rgba(0, 0, 0, .16); }
.sidebar-brand { display: flex; gap: 12px; align-items: center; padding: 0 8px 24px; text-decoration: none; color: #fff; }
.sidebar-brand-mark { width: 46px; height: 46px; border-radius: 8px; display: grid; place-items: center; overflow: hidden; border: 1px solid rgba(242, 118, 22, .45); box-shadow: 0 8px 18px rgba(0, 0, 0, .22); flex: 0 0 46px; }
.sidebar-brand-mark img { width: 100%; height: 100%; object-fit: contain; display: block; }
.sidebar-brand strong, .sidebar-brand small { display: block; }
.sidebar-brand strong { font-size: 1.02rem; }
.sidebar-brand small { color: #b9c2d3; margin-top: 1px; font-size: .77rem; }
.sidebar-nav { display: flex; flex-direction: column; gap: 4px; }
.nav-label { padding: 0 12px 7px; color: #91877f; font-size: .65rem; letter-spacing: .14em; font-weight: 800; }
.sidebar-link { color: #d8deea; text-decoration: none; border-radius: 8px; padding: 11px 12px; display: flex; gap: 10px; align-items: center; min-height: 42px; font-weight: 650; }
.sidebar-link:hover, .sidebar-link.active { background: var(--sidebar-soft); color: #fff; }
.sidebar-link.active { box-shadow: inset 3px 0 0 var(--primary); }
.nav-icon { width: 20px; text-align: center; color: #ffad69; }
.sidebar-help { margin: 24px 4px 18px; padding: 14px; border: 1px solid rgba(255, 255, 255, .10); border-radius: 9px; background: rgba(255, 255, 255, .045); }
.sidebar-help strong { font-size: .79rem; }
.sidebar-help p { margin: 5px 0 0; color: #ada69f; font-size: .73rem; line-height: 1.45; }
.sidebar-user { margin-top: auto; padding: 14px 8px 0; border-top: 1px solid rgba(255, 255, 255, .12); display: flex; align-items: center; gap: 10px; }
.user-avatar { width: 34px; height: 34px; border-radius: 9px; display: grid; place-items: center; flex: 0 0 34px; color: #fff; background: var(--primary); font-weight: 800; }
.user-copy { min-width: 0; flex: 1; }
.user-copy strong, .user-copy small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.user-copy strong { font-size: .79rem; }.user-copy small { color: #9e9892; font-size: .68rem; }
.logout-link { width: 30px; height: 30px; display: grid; place-items: center; border-radius: 7px; color: #ffb36b; text-decoration: none; font-size: 1.1rem; }
.logout-link:hover { background: rgba(255, 255, 255, .08); }

.content.dashboard { margin-left: 268px; width: calc(100% - 268px); min-height: 100vh; padding: 26px clamp(22px, 3.2vw, 46px) 56px; }
.dashboard-topbar { min-height: 62px; display: flex; justify-content: space-between; align-items: center; gap: 24px; position: sticky; top: 0; z-index: 20; margin: -4px 0 22px; padding: 8px 0 12px; background: rgba(243, 241, 238, .94); backdrop-filter: blur(12px); }
.topbar-title { display: flex; align-items: center; gap: 12px; min-width: 0; }
.topbar-title h1 { margin: 1px 0 0; font-size: 1.5rem; line-height: 1.15; letter-spacing: -.02em; }
.topbar-kicker { color: var(--primary-dark); font-size: .65rem; letter-spacing: .14em; font-weight: 850; }
.mobile-menu-btn { display: none; width: 42px; height: 42px; border: 1px solid var(--border); border-radius: 8px; background: #fff; color: var(--text); font-size: 1.3rem; }
.search { width: min(410px, 100%); min-height: 44px; display: flex; align-items: center; gap: 10px; padding: 0 10px 0 14px; border: 1px solid var(--border); border-radius: 9px; background: #fff; box-shadow: var(--shadow-sm); }
.search:focus-within { border-color: var(--primary); box-shadow: var(--focus); }
.search-icon { color: var(--primary-dark); font-size: 1.2rem; }
.search input { width: 100%; min-width: 0; height: 42px; padding: 0; border: 0; outline: 0; background: transparent; color: var(--text); }
.search input::placeholder { color: #928a83; }
.search kbd { min-width: 24px; height: 24px; display: grid; place-items: center; border: 1px solid var(--border); border-radius: 6px; background: #faf8f5; color: var(--muted); font-size: .72rem; box-shadow: 0 1px 0 #d3cbc3; }
.search-clear { width: 28px; height: 28px; border: 0; border-radius: 6px; background: var(--primary-soft); color: var(--primary-dark); font-size: 1.2rem; line-height: 1; }

.welcome-panel { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; padding: 24px 26px; border: 1px solid var(--border); border-top: 3px solid rgba(242, 118, 22, .34); border-radius: var(--radius); background: linear-gradient(125deg, #fff 0%, #fffaf5 100%); box-shadow: var(--shadow-sm); scroll-margin-top: 90px; }
.eyebrow { margin: 0 0 7px; color: var(--primary-dark); font-size: .67rem; letter-spacing: .14em; font-weight: 850; }
.welcome-panel h2 { margin: 0; font-size: clamp(1.55rem, 3vw, 2.15rem); line-height: 1.18; letter-spacing: -.035em; }
.welcome-panel p:not(.eyebrow) { margin: 8px 0 0; color: var(--muted); }
.welcome-status { display: inline-flex; align-items: center; gap: 8px; flex: 0 0 auto; padding: 8px 11px; border: 1px solid #cee7da; border-radius: 999px; background: var(--success-soft); color: var(--success); font-size: .75rem; font-weight: 750; }
.status-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--success); box-shadow: 0 0 0 4px rgba(35, 122, 87, .10); }

.summary-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin: 16px 0 28px; }
.summary-card { min-height: 84px; display: flex; align-items: center; gap: 13px; padding: 15px 17px; border: 1px solid var(--border); border-radius: var(--radius); background: #fff; box-shadow: 0 4px 12px rgba(31, 27, 24, .035); }
.summary-icon { width: 38px; height: 38px; display: grid; place-items: center; flex: 0 0 38px; border-radius: 9px; background: var(--primary-soft); color: var(--primary-dark); }
.summary-icon.accent { background: var(--success-soft); color: var(--success); }.summary-icon.neutral { background: #f0eeeb; color: #655e58; }
.summary-card strong, .summary-card span { display: block; }.summary-card strong { font-size: 1.35rem; line-height: 1; }.summary-card div span { margin-top: 5px; color: var(--muted); font-size: .75rem; }

.results-meta { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 10px; color: var(--muted); font-size: .75rem; }
.results-meta #results-count { color: var(--text); font-weight: 750; }
.systems-section { padding-top: 20px; scroll-margin-top: 76px; }
.systems-section + .systems-section { margin-top: 26px; }
.section-heading { display: flex; justify-content: space-between; align-items: end; gap: 18px; margin-bottom: 16px; }
.section-heading h2 { margin: 0; font-size: 1.35rem; letter-spacing: -.02em; }.section-heading > span { color: var(--muted); font-size: .75rem; }
.cards { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 15px; }
.featured-cards { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.system-card { position: relative; min-height: 226px; display: flex; flex-direction: column; padding: 20px; overflow: hidden; border: 1px solid var(--border); border-top: 3px solid rgba(242, 118, 22, .22); border-radius: var(--radius); background: #fff; color: var(--text); text-decoration: none; box-shadow: var(--shadow-sm); cursor: pointer; transform: translateY(0); transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease; }
.system-card.featured { min-height: 246px; padding: 22px; }.system-card.compact { min-height: 218px; }
.system-card::before { content: ""; position: absolute; inset: 0; background: linear-gradient(135deg, rgba(242, 118, 22, .055), transparent 48%); opacity: 0; pointer-events: none; transition: opacity .2s ease; }
.system-card:hover, .system-card:focus-visible { transform: translateY(-4px); border-color: rgba(242, 118, 22, .70); box-shadow: 0 18px 38px rgba(31, 27, 24, .13); outline: none; }
.system-card:hover::before, .system-card:focus-visible::before { opacity: 1; }.system-card:focus-visible { box-shadow: var(--focus), 0 18px 38px rgba(31, 27, 24, .13); }.system-card:active { transform: translateY(-1px) scale(.993); }
.card-top { display: flex; justify-content: space-between; align-items: start; gap: 12px; }
.system-icon { width: 44px; height: 44px; display: grid; place-items: center; flex: 0 0 44px; border-radius: 9px; background: var(--primary-soft); color: var(--primary-dark); font-size: .88rem; font-weight: 850; }
.access-badge { padding: 5px 8px; border-radius: 999px; background: #f0eeeb; color: #655e58; font-size: .61rem; font-weight: 850; text-transform: uppercase; letter-spacing: .05em; white-space: nowrap; }
.access-badge.direct { background: var(--success-soft); color: var(--success); }.access-badge.external { background: var(--warning-soft); color: var(--warning); }
.access-badge.public { background: var(--primary-soft); color: var(--primary-dark); }
.card-content { margin-top: 17px; }.category-label { color: var(--primary-dark); font-size: .65rem; font-weight: 800; text-transform: uppercase; letter-spacing: .07em; }
.system-card h3 { margin: 4px 0 6px; font-size: 1.08rem; letter-spacing: -.015em; }.system-card p { margin: 0; color: var(--muted); font-size: .82rem; line-height: 1.48; }
.access-link { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: auto; padding-top: 14px; border-top: 1px solid #eee8e2; color: var(--primary-dark); font-size: .78rem; font-weight: 800; }
.access-link strong { font-size: 1.05rem; transition: transform .2s ease; }.system-card:hover .access-link strong, .system-card:focus-visible .access-link strong { transform: translateX(4px); }

.alert { margin: 18px 0; padding: 12px 14px; border: 1px solid #f3c8cd; border-radius: 9px; background: #fff0f1; color: var(--danger); font-size: .85rem; }
.empty-state { padding: 58px 20px; text-align: center; border: 1px dashed #cabfb5; border-radius: var(--radius); background: rgba(255, 255, 255, .55); }
.empty-state > span { width: 46px; height: 46px; display: grid; place-items: center; margin: 0 auto 12px; border-radius: 50%; background: var(--primary-soft); color: var(--primary-dark); font-size: 1.3rem; }.empty-state h2 { margin: 0; font-size: 1.15rem; }.empty-state p { margin: 5px 0 16px; color: var(--muted); }.empty-state button { padding: 9px 13px; border: 0; border-radius: 8px; background: var(--primary); color: #fff; font-weight: 750; }
.footer { text-align: center; color: #837a72; font-size: .73rem; padding: 18px 24px; }

/* Login */
.login-page { min-height: calc(100vh - 50px); display: grid; place-items: center; padding: 28px; background: radial-gradient(circle at 50% 8%, rgba(242, 118, 22, .20), transparent 34%), linear-gradient(135deg, #1f1b18, #3a312b); }
.login-card { width: min(410px, 100%); padding: 34px; border: 1px solid var(--border); border-top: 4px solid var(--primary); border-radius: var(--radius); background: #fff; box-shadow: 0 24px 70px rgba(0, 0, 0, .24); }
.login-logo { width: 64px; height: 64px; margin: 0 0 20px; overflow: hidden; }.login-logo img { width: 100%; height: 100%; display: block; object-fit: contain; }
.login-card h1 { margin: 0 0 7px; font-size: 1.75rem; letter-spacing: -.025em; }.muted { margin: 0 0 24px; color: var(--muted); }.login-card label { display: block; margin: 15px 0 6px; color: #4e463f; font-size: .79rem; font-weight: 750; }.login-card input { width: 100%; height: 46px; padding: 0 12px; border: 1px solid #d8d0c8; border-radius: 8px; outline: 0; color: var(--text); }.login-card input:focus { border-color: var(--primary); box-shadow: var(--focus); }
.password-field { position: relative; }.password-field input { padding-right: 72px; }.toggle-password { position: absolute; right: 7px; top: 7px; height: 32px; padding: 0 8px; border: 0; border-radius: 6px; background: var(--primary-soft); color: var(--primary-dark); font-size: .72rem; font-weight: 750; }
.primary-button { width: 100%; height: 47px; margin-top: 22px; border: 0; border-radius: 8px; background: var(--primary); color: #fff; font-weight: 800; box-shadow: 0 10px 24px rgba(242, 118, 22, .22); }.primary-button:hover { background: #d85f08; }.primary-button:focus-visible { outline: none; box-shadow: var(--focus); }

.js-ready .system-card { opacity: 0; transform: translateY(8px); }.js-ready.cards-visible .system-card { opacity: 1; transform: translateY(0); transition: opacity .32s ease, transform .32s ease, box-shadow .2s ease, border-color .2s ease; }.js-ready.cards-visible .system-card:nth-child(2) { transition-delay: .035s; }.js-ready.cards-visible .system-card:nth-child(3) { transition-delay: .07s; }.js-ready.cards-visible .system-card:nth-child(4) { transition-delay: .105s; }

@media (max-width: 1180px) { .cards, .featured-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }.access-badge { white-space: normal; text-align: center; } }
@media (max-width: 900px) {
  body.sidebar-open { overflow: hidden; }.sidebar { width: min(86vw, 320px); transform: translateX(-105%); transition: transform .2s ease; }.sidebar-open .sidebar { transform: translateX(0); }.sidebar-backdrop { display: none; position: fixed; inset: 0; z-index: 90; background: rgba(31, 27, 24, .46); }.sidebar-open .sidebar-backdrop { display: block; }
  .content.dashboard { margin-left: 0; width: 100%; padding: 18px; }.mobile-menu-btn { display: grid; place-items: center; }.featured-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }.dashboard-topbar { align-items: stretch; flex-direction: column; }.search { width: 100%; }.topbar-title { width: 100%; }
}
@media (max-width: 620px) {
  .content.dashboard { padding: 12px 12px 38px; }.dashboard-topbar { margin-bottom: 14px; }.topbar-title h1 { font-size: 1.25rem; }.search kbd { display: none; }
  .welcome-panel { align-items: flex-start; flex-direction: column; padding: 19px; }.welcome-status { align-self: flex-start; }.summary-grid { grid-template-columns: 1fr; gap: 9px; margin-bottom: 23px; }.summary-card { min-height: 68px; padding: 11px 13px; }
  .cards, .featured-cards { grid-template-columns: 1fr; }.system-card, .system-card.featured, .system-card.compact { min-height: 210px; padding: 18px; }.section-heading > span, .results-hint { display: none; }.systems-section + .systems-section { margin-top: 18px; }.login-page { padding: 18px; }.login-card { padding: 28px 22px; }
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; }.sidebar, .system-card, .system-card::before, .access-link strong, .js-ready .system-card, .js-ready.cards-visible .system-card { transition: none !important; transform: none !important; opacity: 1 !important; } }