:root { --navy:#14283f; --accent:#1f6f8b; --bg:#f3f5f8; --line:#dde3ea; --text:#1c2733; --muted:#6a7787; --good:#1c7c54; --bad:#b3342f; }
* { box-sizing: border-box; }
body { margin:0; font:14px/1.45 -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; color:var(--text); background:var(--bg); }
a { color:var(--accent); text-decoration:none; } a:hover { text-decoration:underline; }
.top { background:var(--navy); color:#fff; display:flex; align-items:center; gap:2rem; padding:0 1.5rem; height:52px; position:sticky; top:0; z-index:5; }
.brand { color:#fff; font-size:1.2rem; letter-spacing:.02em; } .brand b { color:#7fd1e8; }
.top nav { display:flex; gap:1.1rem; flex-wrap:wrap; } .top nav a { color:#c9d6e3; } .top nav a:hover { color:#fff; text-decoration:none; }
main { max-width:1400px; margin:0 auto; padding:1.2rem 1.5rem 3rem; }
h1 { font-size:1.5rem; margin:.3rem 0 .8rem; } h2 { font-size:1.05rem; margin:0 0 .7rem; } h3 { margin:.2rem 0 .6rem; }
.muted, small { color:var(--muted); } small { display:block; font-size:.78rem; }
.card { background:#fff; border:1px solid var(--line); border-radius:8px; padding:1rem 1.2rem; margin:1rem 0; }
.kpis { display:flex; gap:.8rem; flex-wrap:wrap; margin:.6rem 0 1rem; }
.kpi { background:#fff; border:1px solid var(--line); border-radius:8px; padding:.7rem 1rem; min-width:190px; }
.kpi span { display:block; color:var(--muted); font-size:.78rem; text-transform:uppercase; letter-spacing:.04em; } .kpi b { font-size:1.35rem; font-variant-numeric:tabular-nums; }
table.data { width:100%; border-collapse:collapse; background:#fff; border:1px solid var(--line); border-radius:8px; overflow:hidden; font-variant-numeric:tabular-nums; }
.card table.data { border:0; }
.data th { background:#eaeff4; text-align:left; font-weight:600; font-size:.78rem; text-transform:uppercase; letter-spacing:.03em; padding:.5rem .6rem; border-bottom:1px solid var(--line); white-space:nowrap; }
.data td { padding:.4rem .6rem; border-bottom:1px solid #edf0f4; }
.data tr:hover td { background:#f8fafc; } .data .num { text-align:right; white-space:nowrap; }
.data.totals tbody tr:last-child td { font-weight:700; border-top:2px solid var(--navy); }
.data tr.first td { border-top:1px solid var(--line); } .data tr.termination td { background:#fdf0ef; }
.data.compact td, .data.compact th { padding:.3rem .5rem; }
.sticky thead th { position:sticky; top:0; } .scroll { max-height:520px; overflow:auto; }
.report .scroll, .card .scroll { overflow-x:auto; }
.empty { text-align:center; color:var(--muted); padding:1.6rem !important; }
.neg { color:var(--bad); }
.status, .tag { display:inline-block; padding:.05rem .5rem; border-radius:999px; font-size:.72rem; font-weight:600; background:#e6ebf1; color:#3b4a5c; vertical-align:middle; }
.status.active { background:#dcf3e8; color:var(--good); } .status.upcoming { background:#e0eefb; color:#1b5e9a; }
.status.terminated { background:#fbe1df; color:var(--bad); } .status.expired { background:#e9ecef; color:#566; }
.tag.locked { background:#dcf3e8; color:var(--good); }
.filters { display:flex; gap:.5rem; flex-wrap:wrap; align-items:center; margin:.6rem 0 1rem; }
input, select, button, .button { font:inherit; padding:.42rem .6rem; border:1px solid #c5ced8; border-radius:6px; background:#fff; }
input[type=checkbox] { width:auto; } input[type=search] { min-width:260px; }
button, .button { background:var(--accent); border-color:var(--accent); color:#fff; cursor:pointer; display:inline-block; }
button:hover, .button:hover { filter:brightness(1.08); text-decoration:none; } button:disabled { opacity:.5; cursor:not-allowed; }
button.secondary, .button.secondary { background:#fff; color:var(--accent); } button.primary { background:var(--navy); border-color:var(--navy); }
.flash { padding:.7rem 1rem; border-radius:6px; margin-bottom:1rem; border:1px solid; }
.flash.success { background:#e5f6ee; border-color:#a5dcc0; } .flash.error { background:#fcecea; border-color:#efb3ae; } .flash ul { margin:.3rem 0 0 1.1rem; padding:0; }
.head-row { display:flex; justify-content:space-between; align-items:flex-start; gap:1rem; flex-wrap:wrap; } .head-row form { display:inline; }
.actions { display:flex; gap:.6rem; margin-top:1rem; }
.tabs { display:flex; gap:.3rem; border-bottom:1px solid var(--line); margin:.4rem 0 1rem; }
.tabs a { padding:.45rem .9rem; border-radius:6px 6px 0 0; color:var(--muted); } .tabs a.on { background:#fff; border:1px solid var(--line); border-bottom-color:#fff; margin-bottom:-1px; color:var(--text); font-weight:600; }
dl.terms { display:grid; grid-template-columns:max-content 1fr; gap:.3rem 1.5rem; margin:0; } dl.terms dt { color:var(--muted); } dl.terms dd { margin:0; }
.wizard-layout { display:grid; grid-template-columns:minmax(0,1fr) 340px; gap:1.2rem; align-items:start; }
.wizard { background:#fff; border:1px solid var(--line); border-radius:8px; padding:1.2rem; }
.preview { background:#fff; border:1px solid var(--line); border-radius:8px; padding:1rem 1.2rem; position:sticky; top:68px; }
.preview .row { display:flex; justify-content:space-between; padding:.25rem 0; border-bottom:1px solid #edf0f4; } .preview .big { font-size:1.4rem; font-weight:700; }
.steps { display:flex; gap:.4rem; list-style:none; padding:0; margin:0 0 1rem; } .steps li { padding:.3rem .8rem; background:#eaeff4; border-radius:999px; font-size:.8rem; color:var(--muted); cursor:pointer; } .steps li.on { background:var(--navy); color:#fff; }
.field { margin-bottom:.8rem; display:grid; grid-template-columns:220px minmax(0,1fr); gap:.2rem .8rem; align-items:center; } .field label { font-weight:600; } .field small, .field .errorlist { grid-column:2; }
.errorlist { color:var(--bad); list-style:none; margin:0; padding:0; font-size:.82rem; }
.js fieldset[data-step]:not(.on) { display:none; } fieldset { border:0; padding:0; margin:0; }
.option-row { display:flex; gap:.6rem; align-items:center; margin-bottom:.5rem; }
.pager { margin-top:.6rem; display:flex; gap:1rem; align-items:center; }
@media (max-width:900px) { .wizard-layout { grid-template-columns:1fr; } .field { grid-template-columns:1fr; } .field small, .field .errorlist { grid-column:1; } .top { height:auto; flex-wrap:wrap; padding:.6rem 1rem; } }
[hidden] { display: none !important; }