:root {
  --forest-950: #12352e;
  --forest-900: #19483d;
  --forest-800: #235f50;
  --forest-700: #2f7862;
  --accent: #8a3336;
  --accent-soft: #f9eeee;
  --ink: #17322b;
  --muted: #667b73;
  --canvas: #f6f9f8;
  --surface: #ffffff;
  --line: #f0f3f2;
  --line-green: #dce9e3;
  --shadow: 0 12px 40px rgba(0, 0, 0, .06);
  --shadow-hover: 0 18px 48px rgba(18, 53, 46, .12);
  --radius: 12px;
  --font-numeric: "DIN Alternate", "Bahnschrift", "Arial Narrow", sans-serif;
}
* { box-sizing: border-box; }
html { min-width: 320px; background: var(--canvas); }
body {
  min-width: 320px; margin: 0; color: var(--ink); background: var(--canvas);
  font-family: sans-serif; font-size: 15px; line-height: 1.65;
}
body::before {
  content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(rgba(246,249,248,.94), rgba(246,249,248,.98)), url("https://picsum.photos/seed/bg/1920/1080?blur=2") center/cover;
}
.nav {
  min-height: 72px; display: flex; align-items: center; justify-content: space-between; gap: 24px;
  padding: 0 max(28px, calc((100vw - 1280px) / 2)); color: #edf7f1; background: var(--forest-950);
  box-shadow: 0 4px 22px rgba(18,53,46,.18);
}
.brand { display: inline-flex; align-items: center; gap: 11px; min-width: 0; color: #fff; font-weight: 700; }
.brand-logo { width: 40px; height: 40px; flex: 0 0 40px; object-fit: contain; filter: brightness(0) invert(1) drop-shadow(0 0 5px rgba(255,255,255,.42)); }
.box .brand-logo { filter: none; }
.brand span { display: block; white-space: nowrap; }
.brand small { display: block; margin-top: 1px; color: #c4ddd1; font-size: 11px; font-weight: 400; }
.nav > span { display: inline-flex; align-items: center; gap: 10px; white-space: nowrap; }
.nav-avatar { width: 36px; height: 36px; border: 2px solid rgba(255,255,255,.45); border-radius: 50%; object-fit: cover; }
.nav a { display: inline-flex; align-items: center; gap: 5px; color: #fff; text-decoration: none; font-weight: 600; }
.nav a:hover { color: #bfe3cf; }
iconify-icon { display: inline-block; vertical-align: -2px; font-size: 1.1em; }
.wrap { width: min(1280px, calc(100% - 48px)); margin: 0 auto; padding: 42px 0 72px; }
.msg, .error { padding: 12px 16px; margin-bottom: 20px; border-radius: 9px; }
.msg { color: #216743; background: #edf8f1; border: 1px solid #cce8d5; }
.error { color: #9f3f43; background: #fff1f1; border: 1px solid #efcdd0; }
h1, h2 { color: var(--ink); letter-spacing: 0; }
h1 { margin: 0 0 10px; font-size: 28px; line-height: 1.3; }
h2 { margin: 0 0 16px; font-size: 20px; line-height: 1.35; }
.muted, .label, .hint { color: var(--muted); }
.tabs { display: flex; flex-wrap: wrap; gap: 4px; margin: 0 0 30px; padding: 6px; background: #eaf2ee; border: 1px solid var(--line-green); border-radius: 10px; }
.tabs a { display: inline-flex; align-items: center; gap: 6px; padding: 9px 14px; color: #4d6c5e; border-radius: 7px; text-decoration: none; font-weight: 600; transition: .2s ease; }
.tabs a.active, .tabs a:hover { color: var(--forest-900); background: #fff; box-shadow: 0 2px 8px rgba(18,53,46,.09); }
.cards, .two, .forms, .target-actions { display: grid; gap: 20px; }
.cards { grid-template-columns: repeat(4, minmax(0, 1fr)); margin-bottom: 24px; }
.two, .forms, .target-actions { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: stretch; margin-bottom: 24px; }
.card, .panel { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); }
.card { position: relative; overflow: hidden; padding: 24px; transition: transform .2s ease, box-shadow .2s ease; }
.card:hover, .panel:hover { transform: translateY(-3px); box-shadow: var(--shadow-hover); }
.card::before { content: ""; position: absolute; inset: 0 0 auto; height: 3px; background: var(--forest-700); }
.card:nth-child(2)::before { background: #4c9b79; } .card:nth-child(3)::before { background: var(--accent); } .card:nth-child(4)::before { background: #6ba58c; }
.panel { min-width: 0; margin-bottom: 24px; padding: 28px; transition: transform .2s ease, box-shadow .2s ease; }
.cards .card { margin: 0; }
.value, .performance-value, .chart-value, .goal-grid b { font-family: var(--font-numeric); font-variant-numeric: tabular-nums; }
.value { margin-top: 5px; color: var(--forest-900); font-size: 29px; font-weight: 700; line-height: 1.2; }
.goal-grid { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 12px; margin-top: 18px; }
.goal-grid div { padding: 15px; background: #f5faf7; border: 1px solid var(--line-green); border-radius: 9px; }
.goal-grid b { display: block; margin-top: 5px; color: var(--forest-900); font-size: 17px; }
.progress { height: 10px; overflow: hidden; background: #e8efeb; border-radius: 999px; }
.progress span { display: block; height: 100%; background: linear-gradient(90deg, var(--forest-700), #86c49d); border-radius: inherit; }
.chart { display: flex; align-items: flex-end; gap: 12px; height: 240px; padding: 18px 8px 0; border-bottom: 1px solid #dce9e3; }
.chart .col { display: flex; flex: 1 1 0; flex-direction: column; justify-content: flex-end; align-items: center; min-width: 30px; height: 100%; }
.bar { display: block; width: min(36px, 80%); min-height: 14px; background: linear-gradient(180deg, #91caa5, var(--forest-700)); border-radius: 7px 7px 2px 2px; }
.chart-value { display: inline-block; margin-bottom: 7px; padding: 2px 6px; color: var(--forest-900); background: #eef7f1; border: 1px solid #dcebe0; border-radius: 5px; font-size: 11px; font-weight: 700; }
.day { display: block; margin-top: 8px; color: #71847b; font-size: 11px; white-space: nowrap; }
.trend-scroll { width: 100%; max-width: 100%; overflow-x: auto; padding: 5px 8px; background: #fbfdfb; border: 1px solid #e5eee8; border-radius: 9px; }
.trend-chart { width: 1912px; min-width: 1912px; gap: 10px; }
.trend-chart .col { flex: 0 0 56px; min-width: 56px; }
table { width: 100%; border-collapse: separate; border-spacing: 0; overflow: hidden; font-size: 14px; }
th, td { padding: 15px 16px; text-align: left; vertical-align: middle; border-bottom: 1px solid #f0f3f2; }
th { color: #527063; background: #eff8f2; font-size: 12px; font-weight: 700; }
.summary-row td { color: var(--forest-950); background: #dcefe4; border-top: 2px solid var(--forest-700); border-bottom-color: #c6e2d1; font-size: 15px; font-weight: 800; }
.summary-row td:first-child { box-shadow: inset 4px 0 0 var(--forest-700); }
.summary-row .performance-value { color: var(--forest-900); font-size: 16px; }
tbody tr { transition: background .16s ease; } tbody tr:hover { background: #f7fbf8; }
tbody tr:last-child td { border-bottom: 0; }
input, select, button { min-height: 46px; border-radius: 8px; font: inherit; }
input, select { min-width: 150px; padding: 0 13px; color: var(--ink); background: #fff; border: 1px solid #d9e6df; outline: none; transition: border-color .18s, box-shadow .18s; }
input:focus, select:focus { border-color: var(--forest-700); box-shadow: 0 0 0 4px rgba(47,120,98,.15); }
button { display: inline-flex; align-items: center; justify-content: center; gap: 7px; min-width: 96px; padding: 0 18px; color: #fff; background: var(--forest-700); border: 1px solid transparent; box-shadow: 0 5px 12px rgba(47,120,98,.16); cursor: pointer; font-weight: 700; transition: transform .15s, background .18s, box-shadow .18s; }
button:hover { background: var(--forest-800); box-shadow: 0 8px 18px rgba(47,120,98,.2); } button:active { transform: scale(.98); }
button:focus-visible { outline: 0; box-shadow: 0 0 0 4px rgba(119,173,132,.38); }
button.secondary, button.warn { color: var(--forest-800); background: #edf5f0; border-color: #d6e7dc; box-shadow: none; }
button.danger { color: var(--accent); background: transparent; border-color: #e7c5c7; box-shadow: none; }
button.danger:hover { background: var(--accent-soft); }
.actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; } .actions form { display: flex; align-items: center; gap: 8px; margin: 0; } .actions button { min-width: auto; padding: 0 12px; font-size: 13px; }
.create { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 12px; align-items: end; } .create button { width: auto; justify-self: end; }
.inline { display: flex; flex-wrap: wrap; align-items: end; gap: 10px; } .inline div { flex: 1 1 180px; min-width: 150px; }
.inline label { display: block; margin: 0 0 5px 2px; font-size: 13px; font-weight: 600; }
.upload { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 15px; min-height: 220px; padding: 34px 28px; text-align: center; background: linear-gradient(145deg, #163f35, #12352e); border: 1px dashed #729889; border-radius: 12px; transition: border-color .2s, transform .2s; }
.upload:hover { border-color: #82c69b; transform: translateY(-2px); } .upload::before { content: "\\e9f3"; color: #a9d7bc; font-family: "Material Design Icons"; font-size: 42px; }
.upload input[type=file] { width: min(620px, 100%); min-width: 0; color: #e6f4eb; border-color: rgba(255,255,255,.24); background: rgba(255,255,255,.08); }
.upload input[type=file]::file-selector-button { margin-right: 10px; padding: 8px 14px; color: var(--forest-900); background: #eff8f1; border: 0; border-radius: 6px; cursor: pointer; }
.filter-form { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 0 0 12px; }
.table-scroll { overflow-x: auto; }
.empty-state { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; min-height: 170px; padding: 18px; color: var(--muted); text-align: center; }
.empty-state img { display: block; width: min(260px, 100%); height: 150px; object-fit: cover; border-radius: 8px; opacity: .82; }
.badge { display: inline-flex; align-items: center; gap: 6px; padding: 4px 9px; border-radius: 999px; font-size: 12px; font-weight: 700; }
.badge.success { color: #216743; background: #e9f7ed; } .badge.fail { color: #a13d43; background: #fff0f0; } .badge::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.status-active { color: #216743; } .status-off { color: #76817d; } .status-active::before, .status-off::before { content: ""; display: inline-block; width: 7px; height: 7px; margin-right: 6px; border-radius: 50%; background: currentColor; }
.box { width: min(440px, calc(100% - 32px)); margin: 10vh auto; padding: 38px; background: rgba(255,255,255,.95); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: 0 18px 55px rgba(18,53,46,.13); }
.box .brand { color: var(--forest-900); } .box .brand small { color: var(--muted); } .box h1 { margin: 22px 0 10px; font-size: 26px; }
.box form { display: block; } .box form > input:not([type=checkbox]) { display: block; width: 100%; min-width: 0; margin: 12px 0; } .box button { width: 100%; margin: 14px 0; }
.remember { display: flex; align-items: center; gap: 8px; color: #50675d; } .remember input { width: 16px; min-width: 16px; height: 16px; min-height: 16px; }
@media (max-width: 900px) { .cards { grid-template-columns: repeat(2, minmax(0,1fr)); } .create { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (max-width: 760px) { .nav { min-height: 64px; flex-wrap: wrap; padding: 12px 16px; } .nav > span { width: 100%; justify-content: space-between; } .wrap { width: min(100% - 32px, 640px); padding: 28px 0 48px; } .panel { padding: 22px; } .two, .forms, .target-actions { grid-template-columns: 1fr; } .tabs { margin-bottom: 22px; } th, td { padding: 12px 10px; white-space: nowrap; } .goal-grid { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (max-width: 420px) { .cards, .create { grid-template-columns: 1fr; } .box { padding: 26px; } h1 { font-size: 24px; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; scroll-behavior: auto !important; } }
.person { display: inline-flex; align-items: center; gap: 9px; font-weight: 600; }
.person img { width: 32px; height: 32px; border-radius: 50%; object-fit: cover; border: 2px solid #e2eee7; }
.change { display: inline-flex; align-items: center; gap: 3px; font-family: var(--font-numeric); font-variant-numeric: tabular-nums; font-weight: 700; }
.change.up { color: var(--forest-700); } .change.down { color: var(--accent); }
.goal-progress { display: flex; align-items: center; gap: 10px; min-width: 150px; }
.goal-progress .progress { flex: 1; min-width: 80px; height: 8px; }
.goal-progress b { min-width: 48px; color: var(--forest-900); font-family: var(--font-numeric); font-variant-numeric: tabular-nums; }
.upload-icon { color: #a9d7bc; font-size: 42px; }
.upload::before { display: none; }