:root{font:16px/1.5 system-ui,sans-serif;color:#142622;background:#f0f4f2;--ink:#142622;--muted:#526760;--line:#d7e2dd;--green:#155a46}
*{box-sizing:border-box}
body{margin:0}
header{background:#143d33;color:white;padding:1rem 1.25rem}
header div,main{max-width:1024px;margin:auto}
.brand{font-size:.78rem;font-weight:750;letter-spacing:.14em;margin-right:1rem}
main{padding:2.25rem 1.25rem 4rem}
.intro{margin-bottom:1.65rem}
h1,h2,p{margin:0}
h1{font-size:clamp(2rem,5vw,3rem);line-height:1.1;letter-spacing:-.035em;margin:.25rem 0 .65rem}
h2{font-size:1.15rem;margin-bottom:.75rem}
.eyebrow{color:var(--green);font-size:.75rem;font-weight:750;letter-spacing:.13em}
.intro p:last-child,.hint,.empty,small{color:var(--muted)}
section{background:white;border:1px solid var(--line);border-radius:12px;padding:1.2rem 1.4rem;margin-bottom:1rem}
.month{display:flex;align-items:flex-end;gap:.6rem;flex-wrap:wrap}
label{font-size:.88rem;font-weight:650;display:grid;gap:.25rem}
input,select,button{font:inherit;color:var(--ink);border-radius:6px;border:1px solid #a3b8b0;padding:.49rem .68rem;background:white}
button{background:var(--green);border-color:var(--green);color:white;cursor:pointer;font-weight:650}
button.secondary{background:white;color:var(--green)}
button:hover,a:hover{filter:brightness(.85)}
a{color:var(--green);text-underline-offset:.18em}
.hint{font-size:.88rem;margin-top:.6rem;overflow-wrap:anywhere}
.metrics{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem;margin-top:.85rem}
.metrics div{border-top:2px solid var(--line);padding-top:.65rem}
.metrics span{display:block;font-size:.9rem;color:var(--muted)}
.metrics strong{font-size:clamp(1.1rem,3vw,1.65rem);font-variant-numeric:tabular-nums}
.table{overflow-x:auto}
table{width:100%;border-collapse:collapse}
th,td{text-align:left;border-bottom:1px solid var(--line);padding:.6rem .25rem;vertical-align:top;overflow-wrap:anywhere}
th{font-size:.85rem;color:var(--muted)}
small{display:block;margin-top:.2rem}
.table+button{margin-top:1rem}
.notice{padding:.65rem 1rem;border:1px solid #b0d5c3;background:#e8f7ef;border-radius:7px;margin-bottom:1rem}
.notice.error{background:#fff0ef;border-color:#e6a7a3;color:#742e2b}
@media(max-width:560px){section{padding:1rem}.metrics{grid-template-columns:1fr}th:first-child,td:first-child{min-width:170px}}

:root{color:#182943;background:#f2f5f9;--ink:#182943;--muted:#576b89;--line:#d7e1ef;--green:#1258c8}
.workspace{display:grid;grid-template-columns:214px minmax(0,1fr);min-height:100vh}
.sidebar{background:#112039;color:#b9c9e0;padding:26px 14px;display:flex;flex-direction:column}
.sidebar .brand{display:block;margin:0}
.brand img{display:block;width:176px;max-width:100%;height:auto}
.product,.sidebar nav p{text-transform:uppercase;font-size:.75rem;letter-spacing:.13em;font-weight:650}
.product{margin-top:14px}
.sidebar nav{margin-top:36px;display:grid;gap:7px}
.sidebar nav p{margin:0 12px 9px}
.sidebar nav a{display:flex;gap:12px;align-items:center;padding:12px;border-radius:8px;color:inherit;text-decoration:none;font-size:.9rem;font-weight:650}
.sidebar nav a[aria-current],.sidebar nav a:hover{background:#223c61;color:white;filter:none}
.sidebar-user{margin-top:auto;padding-top:18px;border-top:1px solid #2d4262;font-size:.85rem;overflow-wrap:anywhere}
.work-area{min-width:0}
.topbar{min-height:71px;background:white;color:var(--muted);padding:10px 32px;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;gap:12px;font-size:.9rem}
.topbar div{margin:0}
.top-actions,.user-actions{display:flex;gap:12px;align-items:center;flex-wrap:wrap}
.avatar{display:grid;place-items:center;width:34px;height:34px;border-radius:50%;background:#344b6a;color:white;font-weight:700}
main{max-width:1300px;margin:0 auto;padding:32px 36px 48px}
h1{font-size:clamp(1.65rem,3vw,2rem);letter-spacing:-.035em}
input,select,button{border-color:#cbd8e9}
button{border-color:var(--green)}
button.secondary{color:var(--ink);border-color:var(--line)}
input{min-width:0;width:100%}
.stack{display:grid;gap:14px;justify-items:start}
.stack label,.form-grid{width:100%}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.login-panel{max-width:540px}
.user-row{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;padding:18px 0;border-top:1px solid var(--line)}
.user-row strong,.user-row small{overflow-wrap:anywhere}
.user-actions details{min-width:160px}
.user-actions summary{color:var(--green);cursor:pointer}
.user-actions details form{padding-top:8px}
@media(max-width:760px){.workspace{grid-template-columns:1fr}.sidebar{padding:16px}.brand img{width:145px}.product,.sidebar nav p,.sidebar-user{display:none}.sidebar nav{display:flex;flex-wrap:wrap;margin-top:10px}.sidebar nav a{padding:7px 9px}.topbar{padding:10px 16px;min-height:56px}main{padding:24px 16px}.user-row{flex-direction:column}}
@media(max-width:460px){.form-grid{grid-template-columns:1fr}.top-actions{gap:6px}.avatar{display:none}}

.login-layout {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    min-height: 100vh;
    min-height: 100svh;
}

.login-brand {
    display: grid;
    grid-template-rows: auto 1fr auto;
    gap: 32px;
    background: #0a295e;
    color: white;
    padding: clamp(32px, 6vh, 66px) clamp(32px, 7vw, 100px);
}

.login-logo {
    display: block;
    width: 240px;
    max-width: 100%;
    height: auto;
}

.login-brand-copy { align-self: center; }

.login-eyebrow {
    color: #a5d2f4;
    text-transform: uppercase;
    letter-spacing: .25em;
    font-size: .75rem;
    font-weight: 650;
    margin-bottom: 20px;
}

.login-brand-title {
    max-width: 11ch;
    font-size: clamp(2.5rem, 4.05vw, 3.4rem);
    font-weight: 750;
    line-height: 1.1;
    letter-spacing: -.045em;
}

.login-accent {
    display: flex;
    gap: 12px;
    margin: 32px 0;
}

.login-accent span {
    width: 46px;
    height: 4px;
    border-radius: 4px;
    background: #00c5e9;
}

.login-accent span:nth-child(2) { opacity: .55; }
.login-accent span:nth-child(3) { opacity: .28; }
.login-description, .login-brand footer { color: #bed1eb; }
.login-description { max-width: 38ch; }
.login-brand footer { font-size: .8rem; }

.login-main {
    display: grid;
    place-items: center;
    width: 100%;
    max-width: none;
    padding: clamp(32px, 6vw, 72px);
}

.login-content { width: min(100%, 405px); }

.login-icon {
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    border-radius: 12px;
    color: #0853cd;
    background: #e5eefc;
    margin-bottom: 24px;
}

.login-content h1 { margin: 0; }
.login-subtitle { color: var(--muted); margin: 14px 0 30px; }
.login-content form { gap: 20px; justify-items: stretch; }
.login-content label { gap: 8px; }
.login-content input, .login-content button { min-height: 52px; border-radius: 8px; }
.login-content input { padding-inline: 14px; }
.login-content button { background: #0953c9; }
.login-help { color: var(--muted); font-size: .83rem; margin-top: 52px; }

@media (max-width: 760px) {
    .login-layout { grid-template-columns: 1fr; grid-template-rows: auto 1fr; }
    .login-brand { display: block; padding: 24px 28px; }
    .login-logo { width: 164px; }
    .login-brand-copy { margin-top: 20px; }
    .login-eyebrow { margin-bottom: 0; }
    .login-brand-title, .login-accent, .login-description, .login-brand footer { display: none; }
    .login-main { padding: 32px 24px 42px; }
    .login-icon { margin-bottom: 16px; }
    .login-help { margin-top: 30px; }
}