:root{ --maxw:1100px; --bg:#f7f8fa; --card:#fff; --border:#e6e8eb; --text:#1f2937; --muted:#6b7280; }
*{ box-sizing:border-box; }
body{ font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans,sans-serif; background:var(--bg); color:#1f2937; margin:0; }
.container{ max-width:var(--maxw); margin:2rem auto; padding:0 1rem; }
.card{ background:var(--card); border:1px solid var(--border); border-radius:12px; padding:1rem 1.25rem; box-shadow:0 1px 2px rgba(0,0,0,.03); }
h1,h2{ margin:0 0 .75rem 0; }
h1{ font-size:1.6rem; }
h2{ font-size:1.2rem; color:var(--muted); }
.grid{ display:grid; gap:1rem; }
.grid-2{ grid-template-columns:repeat(2,1fr); }
.grid-3{ grid-template-columns:repeat(3,1fr); }
.grid-4{ grid-template-columns:repeat(4,1fr); }
.row{ display:flex; gap:1rem; align-items:center; flex-wrap:wrap; }
label{ font-weight:600; display:block; margin-bottom:.25rem;}
select, input[type=text], input[type=password], textarea{ width:100%; padding:.6rem .7rem; border:1px solid var(--border); border-radius:10px; background:#fff; }
button, .btn{ background:#111827; color:#fff; border:none; border-radius:10px; padding:.65rem 1rem; cursor:pointer; text-decoration:none; display:inline-block;}
.btn.ghost{ background:transparent; border:1px solid var(--border); color:#111827; }
.kpi{ padding:1rem; border:1px solid var(--border); border-radius:12px; background:#fafafa; }
.kpi .big{ font-size:1.6rem; font-weight:700; }
.table{ width:100%; border-collapse:collapse; }
.table th, .table td{ border-bottom:1px solid var(--border); padding:.6rem .4rem; text-align:left; }
.table th{ font-weight:700; font-size:.9rem; color:#374151; }
.footer{ color:var(--muted); margin-top:1rem; font-size:.9rem; }
hr{ border:0; border-top:1px solid var(--border); margin:1rem 0; }

.rating { display:flex; flex-direction:row-reverse; justify-content:flex-end; gap:.25rem; }
.rating input{ display:none; }
.rating label{ width:2rem; height:2rem; cursor:pointer; background:linear-gradient(180deg, #facc15, #eab308); -webkit-clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%); clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%); opacity:.35; transition:opacity .15s ease; }
.rating label:hover, .rating label:hover ~ label, .rating input:checked ~ label{ opacity:1; }
.note{ color:var(--muted); font-size:.9rem; }