
:root {
  --bg: #f6f2e8;
  --card: #ffffff;
  --text: #1f2933;
  --muted: #5f6b63;
  --line: #d9d2c3;
  --accent: #2f6b3b;
  --accent-2: #e7f1e5;
  --accent-dark: #214c2a;
  --sand: #b78a3e;
  --success: #e9f8ee;
  --warn: #fff6df;
  --danger: #ffe7e7;
}
* { box-sizing: border-box; }
body { margin:0; font-family: Arial, Helvetica, sans-serif; color:var(--text); background:linear-gradient(180deg,#f6f2e8 0%,#efe7d5 100%); }
a { color: var(--accent-dark); }
.topbar {
  display:flex; justify-content:space-between; gap:20px; align-items:flex-start; padding:22px 24px;
  background:linear-gradient(135deg, #16311d 0%, #2f6b3b 56%, #6f8b42 100%); color:#fff;
  border-bottom: 4px solid var(--sand);
  box-shadow: 0 8px 24px rgba(0,0,0,.12);
}
.topbar h1 { margin:0 0 4px; font-size:28px; line-height:1.15; max-width: 780px; }
.subtitle { margin:0; color:#e7efe5; font-size:14px; }
.topbar nav { display:flex; flex-wrap:wrap; gap:10px; }
.topbar nav a { color:#fff; text-decoration:none; background:rgba(255,255,255,.10); padding:10px 14px; border-radius:10px; border:1px solid rgba(255,255,255,.12); }
.topbar nav a:hover { background:rgba(255,255,255,.16); }
.container { max-width:1200px; margin:0 auto; padding:22px; }
.card { background:var(--card); border-radius:18px; padding:20px; box-shadow:0 8px 24px rgba(39,49,43,.08); margin-bottom:18px; border:1px solid rgba(183,138,62,.15); }
.grid { display:grid; gap:18px; }
.grid.two { grid-template-columns: 1fr 1fr; }
.grid.three { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 900px) { .grid.two, .grid.three { grid-template-columns: 1fr; } .topbar{flex-direction:column;} .topbar h1{font-size:24px;} }
label { display:block; font-weight:bold; margin-bottom:6px; color:#203127; }
input, select, textarea, button { width:100%; padding:12px; border-radius:12px; border:1px solid var(--line); font-size:16px; }
input:focus, select:focus, textarea:focus { outline:none; border-color: var(--accent); box-shadow:0 0 0 3px rgba(47,107,59,.12); }
textarea { min-height: 90px; }
button, .button { background:var(--accent); color:#fff; border:none; cursor:pointer; text-decoration:none; display:inline-block; width:auto; padding:12px 18px; border-radius:12px; font-weight:700; }
button:hover, .button:hover { filter: brightness(.97); }
button.secondary, .button.secondary { background:#78592c; }
button.light, .button.light { background:#ece7dc; color:#1f2933; }
button.ghost, .button.ghost { background:#f5f2ea; color:#8b8b84; border:1px dashed #d7cfbf; cursor:default; pointer-events:none; }
.inline-actions { display:flex; gap:10px; flex-wrap:wrap; }
.flash { padding:14px 16px; border-radius:12px; margin-bottom:16px; border-left:4px solid transparent; }
.flash.success { background:var(--success); border-left-color:#2f6b3b; }
.flash.warning { background:var(--warn); border-left-color:#b78a3e; }
.flash.error { background:var(--danger); border-left-color:#b42318; }
.stats { display:grid; grid-template-columns: repeat(4, 1fr); gap:12px; }
@media (max-width: 900px) { .stats { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 550px) { .stats { grid-template-columns: 1fr; } }
.stat { background:linear-gradient(180deg,#f8fbf7 0%, #edf5eb 100%); border-radius:16px; padding:14px; border:1px solid rgba(47,107,59,.10); }
.stat h3 { margin:0 0 8px; font-size:13px; color:#35553d; text-transform:uppercase; letter-spacing:.03em; }
.stat .value { font-size:28px; font-weight:bold; color:#16311d; }
.table-wrap { overflow:auto; }
table.matrix { width:100%; border-collapse:collapse; min-width:980px; }
table.matrix th, table.matrix td { border:1px solid var(--line); padding:10px; text-align:center; background:#fff; }
table.matrix th { background:#f0ece2; position:sticky; top:0; color:#203127; }
table.matrix td.total { font-weight:bold; background:#edf5eb; color:#16311d; }
table.matrix td.missing { background:#fff9db; color:#665200; }
table.matrix td.note { border-bottom:3px solid var(--sand); }
.small { color:var(--muted); font-size:13px; }
.login-wrap { max-width:500px; margin:48px auto; }
.footer { text-align:center; color:#6b6b63; padding:12px 20px 34px; font-size:13px; }
.badge { display:inline-block; border-radius:999px; padding:6px 10px; font-size:12px; background:var(--accent-2); color:#214c2a; font-weight:700; }
.warning-box { background:var(--warn); padding:14px; border-radius:12px; margin:12px 0; }
.readonly { opacity:.82; }
.help-list { margin: 0; padding-left: 20px; }
.portal-mark { display:inline-block; background:#edf5eb; color:#214c2a; border:1px solid rgba(47,107,59,.14); padding:6px 10px; border-radius:999px; font-size:12px; font-weight:700; margin-bottom:10px; }
.brand-strip { height: 6px; background: linear-gradient(90deg, #b78a3e 0%, #2f6b3b 40%, #6f8b42 100%); border-radius: 999px; margin-top: 10px; width: 180px; }

.hero-card { background: linear-gradient(180deg,#ffffff 0%, #f7fbf6 100%); }
.usage-cell.normal { background:#f6fbf5; }
.usage-cell.watch { background:#fff8e7; }
.usage-cell.high { background:#fff0f0; }
.usage-chip { border-radius:14px; padding:12px 14px; margin-top:12px; border:1px solid transparent; }
.usage-chip.normal { background:#eef8ee; border-color:rgba(47,107,59,.18); color:#214c2a; }
.usage-chip.watch { background:#fff6df; border-color:rgba(183,138,62,.28); color:#6d520e; }
.usage-chip.high { background:#ffe7e7; border-color:rgba(180,35,24,.2); color:#8b1e17; }
.spark-grid { display:grid; grid-template-columns: repeat(12, minmax(54px, 1fr)); gap:12px; align-items:end; overflow:auto; }
.spark-item { min-width:54px; text-align:center; }
.spark-bar { width:100%; border-radius:12px 12px 4px 4px; min-height:12px; background:#d8e7d9; }
.spark-bar.normal { background:#dcefdc; }
.spark-bar.watch { background:#f0d79c; }
.spark-bar.high { background:#efb0ac; }
.spark-bar.na { background:#e5e7eb; }
.spark-value { font-size:12px; color:#35553d; margin-top:8px; }
.spark-label { font-size:11px; color:#5f6b63; margin-top:4px; }

.year-export-grid { display:grid; gap:12px; }
.year-export-item { display:flex; align-items:center; justify-content:space-between; gap:16px; padding:14px; border:1px solid var(--line); border-radius:14px; background:#faf8f3; }
.inline-actions.compact { gap:8px; }
.inline-actions.compact .button, .inline-actions.compact button { padding:10px 14px; }
.owner-hero { background:linear-gradient(135deg, #102717 0%, #214c2a 52%, #6f8b42 100%); color:#fff; border:1px solid rgba(255,255,255,.08); }
.owner-hero-grid { display:grid; grid-template-columns: 2fr 1fr; gap:18px; align-items:start; }
.owner-health-card { background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.10); border-radius:18px; padding:18px; }
.owner-health-title { font-size:24px; font-weight:700; margin:6px 0 10px; }
.portal-mark.gold { background:rgba(255,255,255,.12); color:#fff3d5; border-color:rgba(255,255,255,.14); }
.coverage-list { display:grid; gap:14px; }
.coverage-item { padding:14px; border:1px solid rgba(47,107,59,.12); border-radius:14px; background:#fbfcfa; }
.coverage-top { display:flex; justify-content:space-between; gap:12px; margin-bottom:8px; }
.coverage-bar { height:12px; background:#e7ebdf; border-radius:999px; overflow:hidden; margin-bottom:8px; }
.coverage-bar span { display:block; height:100%; background:linear-gradient(90deg, #b78a3e 0%, #2f6b3b 100%); border-radius:999px; }
.notes-feed { display:grid; gap:12px; }
.note-card { padding:14px; border-radius:14px; background:#faf6ea; border:1px solid rgba(183,138,62,.18); }
.printable-report { border:1px solid rgba(33,76,42,.16); }
.report-head { display:flex; justify-content:space-between; gap:16px; align-items:center; margin-bottom:14px; }
.premium-report-table { min-width: 640px; }
.status-pill { display:inline-block; padding:6px 10px; border-radius:999px; font-size:12px; font-weight:700; }
.status-pill.normal { background:#eef8ee; color:#214c2a; }
.status-pill.watch { background:#fff6df; color:#6d520e; }
.status-pill.high { background:#ffe7e7; color:#8b1e17; }
.status-pill.na { background:#eef0f2; color:#55606d; }
@media (max-width: 900px) { .owner-hero-grid { grid-template-columns: 1fr; } .year-export-item, .report-head { flex-direction:column; align-items:flex-start; } }
@media print {
  .topbar nav, .inline-actions, .footer { display:none !important; }
  body { background:#fff; }
  .container { max-width:none; padding:0; }
  .card { box-shadow:none; border:1px solid #ddd; }
}
