/* Muhabir Performans Aracı — Fiko Mio paleti (ink/bone/sun/ember/sea) */
:root{
  --ink:#1a2238; --bone:#f4f1ea; --sun:#f6c945; --ember:#e8602c; --sea:#2f7d8c;
  --ink-soft:#3a4259; --line:#e2ddd2; --ok:#2e9e5b; --bad:#c0392b; --muted:#7a8095;
}
*{box-sizing:border-box}
body{margin:0;font-family:"Segoe UI",system-ui,Arial,sans-serif;background:var(--bone);color:var(--ink);}
a{color:var(--sea);text-decoration:none}
a:hover{text-decoration:underline}
header.topbar{background:var(--ink);color:var(--bone);padding:.7rem 1.2rem;display:flex;align-items:center;gap:1.2rem;flex-wrap:wrap}
header.topbar .brand{font-weight:700;font-size:1.05rem;color:var(--sun)}
header.topbar nav{display:flex;gap:1rem;flex-wrap:wrap}
header.topbar nav a{color:var(--bone);font-size:.92rem}
header.topbar nav a.active{color:var(--sun);font-weight:600}
header.topbar .sag{margin-left:auto;display:flex;align-items:center;gap:.8rem;font-size:.85rem}
.badge{background:var(--ember);color:#fff;border-radius:10px;padding:.1rem .5rem;font-size:.75rem;font-weight:600}
main{max-width:1100px;margin:1.5rem auto;padding:0 1.2rem}
h1{font-size:1.5rem;margin:.2rem 0 1rem}
h2{font-size:1.15rem;margin:1.6rem 0 .6rem;color:var(--ink-soft)}
.card{background:#fff;border:1px solid var(--line);border-radius:12px;padding:1.1rem 1.3rem;margin-bottom:1.1rem;box-shadow:0 1px 3px rgba(26,34,56,.05)}
table{width:100%;border-collapse:collapse;font-size:.9rem}
th,td{text-align:left;padding:.5rem .6rem;border-bottom:1px solid var(--line)}
th{color:var(--muted);font-weight:600;font-size:.8rem;text-transform:uppercase;letter-spacing:.03em}
.score{font-weight:700}
.score.hi{color:var(--ok)} .score.mid{color:var(--sun)} .score.lo{color:var(--bad)}
.pill{display:inline-block;border-radius:20px;padding:.15rem .6rem;font-size:.78rem;font-weight:600}
.pill.ok{background:#e3f5ea;color:var(--ok)} .pill.no{background:#fae6e3;color:var(--bad)}
.pill.veto{background:#fbeecb;color:#9a6a00}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:1.1rem}
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem}
@media(max-width:760px){.grid2,.grid3{grid-template-columns:1fr}}
.kpi{text-align:center}
.kpi .big{font-size:2rem;font-weight:800;color:var(--ink)}
.kpi .lbl{color:var(--muted);font-size:.8rem}
select,input[type=text],input[type=password],input[type=file],textarea,button{
  font:inherit;padding:.45rem .6rem;border:1px solid var(--line);border-radius:8px;background:#fff;color:var(--ink)}
button,.btn{background:var(--sea);color:#fff;border:none;cursor:pointer;font-weight:600}
button:hover,.btn:hover{background:#266676;text-decoration:none}
button.warn{background:var(--ember)} button.ghost{background:#fff;color:var(--ink);border:1px solid var(--line)}
.row{display:flex;gap:.5rem;align-items:center;flex-wrap:wrap}
label.chk{display:inline-flex;gap:.25rem;align-items:center;font-size:.85rem}
.muted{color:var(--muted)}
.flex-between{display:flex;justify-content:space-between;align-items:center;gap:1rem;flex-wrap:wrap}
.login-wrap{max-width:360px;margin:8vh auto}
.login-wrap .card{padding:1.6rem}
.note{background:var(--bone);border-left:3px solid var(--sun);padding:.6rem .8rem;border-radius:6px;margin:.5rem 0}
.note .meta{font-size:.75rem;color:var(--muted)}
.alert{padding:.7rem 1rem;border-radius:8px;margin:.6rem 0}
.alert.ok{background:#e3f5ea;color:#1c6b3c} .alert.err{background:#fae6e3;color:#9a2820}
small.hint{color:var(--muted);font-size:.78rem}
canvas{max-width:100%}
