:root{
  --navy:#1A2744; --orange:#F59E0B; --grey:#6B7280; --greyline:#E5E7EB;
  --cream:#FFF7EA; --bg:#FAFAFC; --white:#fff; --red:#B91C1C; --green:#166534;
}
*{box-sizing:border-box}
body{margin:0;font-family:'Poppins',Arial,sans-serif;font-size:14px;color:var(--navy);background:var(--bg)}
a{color:var(--navy)}
main{max-width:1100px;margin:0 auto;padding:16px}

header.top{display:flex;flex-wrap:wrap;gap:10px 24px;align-items:center;background:var(--navy);color:#fff;padding:10px 16px}
.brand{display:flex;align-items:center;gap:10px}
.app-name{font-weight:600;letter-spacing:.3px}
header.top nav{display:flex;gap:4px;flex-wrap:wrap}
header.top nav a{color:#D7DCE6;text-decoration:none;padding:6px 12px;border-radius:6px}
header.top nav a.on,header.top nav a:hover{background:rgba(255,255,255,.12);color:#fff}
.who{margin-left:auto;font-size:12px;color:#B2B9C8}
.who a{color:#B2B9C8}

.banner{padding:9px 16px;font-size:13px}
.banner.demo{background:var(--orange);color:var(--navy);font-weight:500}
.banner.error{background:#FEE2E2;color:var(--red);border-bottom:1px solid #FCA5A5}
.banner.ok{background:#DCFCE7;color:var(--green)}

h1{font-size:20px;font-weight:600;margin:14px 0 4px}
h1 .count{background:var(--navy);color:#fff;border-radius:99px;font-size:12px;padding:2px 9px;margin-left:8px;vertical-align:middle}
.lede{color:var(--grey);margin:0 0 16px;max-width:70ch}
.empty{background:var(--cream);border:1px solid #F3E2C2;border-radius:8px;padding:14px;color:var(--grey)}
.footnote{color:var(--grey);font-size:12px}

.card{display:flex;gap:14px;background:var(--white);border:1px solid var(--greyline);border-left:4px solid var(--navy);border-radius:10px;padding:14px;margin-bottom:12px}
.card.conflict{border-left-color:var(--red)}
.card .rank{font-size:18px;font-weight:600;color:var(--orange);min-width:24px}
.card h2{font-size:15px;margin:0 0 4px}
.card .body{flex:1;min-width:0}
.meta{color:var(--grey);font-size:12px;display:flex;flex-wrap:wrap;gap:4px 10px;margin-bottom:6px}
.tag{background:var(--cream);border:1px solid #F3E2C2;color:var(--navy);border-radius:4px;padding:1px 6px;font-size:11px;white-space:nowrap}
.tag.big{background:var(--orange);border-color:var(--orange);color:var(--navy);font-weight:600}
.deadline.urgent,.needed.urgent{color:var(--red);font-weight:600}
.positioning{margin:4px 0;font-size:13px}
.recommends{background:var(--cream);border-radius:6px;padding:8px 10px;margin:6px 0}
.needed{margin-left:8px;color:var(--grey);font-size:12px}
.decided{color:var(--green);font-size:12px;margin:4px 0}
.conflict-note{color:var(--red);font-size:13px;font-weight:500}

form.decide{display:flex;gap:6px;flex-wrap:wrap;margin-top:8px}
form.decide select,form.decide input[type=text]{font-family:inherit;font-size:13px;padding:7px 8px;border:1px solid var(--greyline);border-radius:6px;background:#fff}
form.decide input[type=text]{flex:1;min-width:180px}
form.decide button{font-family:inherit;font-size:13px;font-weight:500;padding:7px 14px;border:0;border-radius:6px;background:var(--navy);color:#fff;cursor:pointer}
form.decide button:hover{background:#243357}
form.decide.compact select,form.decide.compact input[type=text]{font-size:12px;padding:5px 6px}
form.decide.compact input[type=text]{min-width:120px}
form.decide.compact button{font-size:12px;padding:5px 10px}

form.filters{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:12px}
form.filters input,form.filters select,form.filters button{font-family:inherit;font-size:13px;padding:7px 9px;border:1px solid var(--greyline);border-radius:6px;background:#fff}
form.filters button{background:var(--navy);color:#fff;border:0;cursor:pointer}

.tablewrap{overflow-x:auto;background:var(--white);border:1px solid var(--greyline);border-radius:10px}
table{border-collapse:collapse;width:100%;font-size:13px}
th{background:var(--navy);color:#fff;text-align:left;padding:9px 10px;font-weight:500;white-space:nowrap}
td{border-top:1px solid var(--greyline);padding:9px 10px;vertical-align:top}
tr.conflict td{background:#FEF2F2}
.sub{color:var(--grey);font-size:11px;margin-top:2px}
.sub.decided{color:var(--green)}

.auth{max-width:440px;margin:60px auto;text-align:center;background:#fff;border:1px solid var(--greyline);border-radius:12px;padding:36px 28px}
.auth p{color:var(--grey)}
.google-btn{display:inline-block;margin:14px 0;background:var(--navy);color:#fff;text-decoration:none;padding:12px 22px;border-radius:8px;font-weight:500}
.google-btn:hover{background:#243357}

footer{max-width:1100px;margin:28px auto 20px;padding:12px 16px 0;border-top:2px solid var(--orange);color:var(--grey);font-size:11px}

@media (max-width:720px){
  .tablewrap table,.tablewrap tr,.tablewrap td{display:block;width:100%}
  .tablewrap th{display:none}
  .tablewrap td{border:0;padding:4px 12px}
  .tablewrap td::before{content:attr(data-th) ": ";color:var(--grey);font-size:11px}
  .tablewrap tr{border-top:1px solid var(--greyline);padding:8px 0}
  .card{flex-direction:column;gap:6px}
}