:root{
    --brand:#316CB1; --brand-600:#255995; --fg:#14202b; --muted:#5b6b7a; --bg:#f7f9fc; --card:#fff; --border:#e6eaf0; --danger:#b00020;
    --radius:12px; --wrap:clamp(16rem, 92vw, 1080px);
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans","Liberation Sans",sans-serif;color:var(--fg);background:var(--bg)}
a{color:var(--brand);text-decoration:none}
a:hover{text-decoration:underline}

.wrap{max-width:var(--wrap);margin:2rem auto;padding:0 1rem}
.h2{font-size:1.5rem;margin:0 0 1rem}

/* NAV */
.nav{display:flex;align-items:center;gap:.75rem;background:#fff;border-bottom:1px solid var(--border);padding:.6rem 1rem;position:sticky;top:0;z-index:50}
.brand{display:flex;align-items:center;gap:.5rem;font-weight:600;color:var(--brand)}
.brand .logo{height:28px;width:auto;display:block}
.brand .brand-text{color:var(--fg)}
.nav-links{display:flex;align-items:center;gap:.75rem;margin-left:.5rem;flex:1 1 auto;flex-wrap:wrap}
.nav .logout{margin-left:auto}
.btn{background:var(--brand);color:#fff;border:0;border-radius:10px;padding:.6rem 1rem;cursor:pointer;display:inline-block}
.btn:hover{background:var(--brand-600)}
.btn--secondary{background:#fff;color:var(--brand);border:1px solid var(--brand)}
.btn--small{padding:.35rem .6rem;border-radius:8px}
.btn--link{background:transparent;color:var(--brand);padding:.25rem .5rem}
.btn--link:hover{background:#eef4ff}

/* Dropdown (click/tap) */
.dropdown{position:relative;display:inline-flex;align-items:center}
.menu-btn{display:inline-flex;align-items:center;gap:.35rem;background:#fff;border:1px solid var(--border);border-radius:10px;padding:.45rem .65rem;cursor:pointer}
.menu-btn:focus{outline:2px solid var(--brand);outline-offset:2px}
.dropdown .menu{position:absolute;top:calc(100% + .4rem);left:0;display:none;flex-direction:column;background:#fff;border:1px solid var(--border);border-radius:10px;min-width:220px;box-shadow:0 8px 22px rgba(16,24,40,.08)}
.dropdown.open .menu{display:flex}
.dropdown .menu a{padding:.6rem .8rem;white-space:nowrap}
.dropdown .menu a:hover{background:#f5f7fb}
.chev{pointer-events:none}

/* Cards & grid */
.card{background:var(--card);border:1px solid var(--border);border-radius:var(--radius);padding:1rem;display:flex;flex-direction:column;gap:.5rem;min-height:140px}
.card--center{max-width:420px;margin:10vh auto}
.grid{display:grid;gap:1rem;grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}
.metric{font-size:2rem;line-height:1.2;margin:.25rem 0 .25rem}
.card .btn{margin-top:auto}

/* Tables */
.table-wrap{overflow:auto}
.table{width:100%;border-collapse:collapse;background:#fff;border:1px solid var(--border);border-radius:12px;overflow:hidden}
.table th,.table td{padding:.65rem .75rem;border-bottom:1px solid var(--border)}
.table thead th{background:#fafbfd;font-weight:600}
.t-right{text-align:right}

/* Forms */
label{display:block;margin:.75rem 0 .25rem}
input,select,textarea{width:100%;padding:.55rem .6rem;border:1px solid var(--border);border-radius:10px;background:#fff}
input:focus,select:focus,textarea:focus{outline:2px solid var(--brand);outline-offset:2px}
.alert{background:#fff3f3;color:#7b0010;border:1px solid #f1c2c2;padding:.75rem;border-radius:10px;margin-bottom:.75rem}

/* Utilities */
.muted{color:var(--muted)}
.small{font-size:.875rem}

/* Auth */
.auth body{display:flex;min-height:100vh}

/* Honeypot */
.hp{position:absolute;left:-9999px;opacity:0;width:1px;height:1px}

/* Options & Security niceties */
.options{-moz-appearance:none;-webkit-appearance:none;appearance:none}