*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
  :root {
    --primary: #3b82f6; --primary-hover: #2563eb; --primary-fg: #fff;
    --bg: #f8fafc; --card: #ffffff; --border: #e2e8f0;
    --fg: #0f172a; --muted: #64748b; --muted-bg: #f1f5f9;
    --danger: #ef4444; --success: #22c55e; --warning: #f59e0b;
    --radius: 8px; --shadow: 0 1px 3px rgba(0,0,0,.08);
  }
  body { font-family: Inter, -apple-system, BlinkMacSystemFont, sans-serif;
         background: var(--bg); color: var(--fg); min-height: 100vh; }

  header { background: var(--card); border-bottom: 1px solid var(--border);
           padding: 0 24px; height: 56px; display: flex; align-items: center;
           justify-content: space-between; position: sticky; top: 0; z-index: 50; box-shadow: var(--shadow); }
  .logo { display: flex; align-items: center; gap: 8px; font-weight: 700; color: var(--primary); font-size: 1rem; }
  .logo-icon { width: 32px; height: 32px; background: var(--primary); border-radius: 8px;
               display: flex; align-items: center; justify-content: center; }
  .logo-icon svg { width: 18px; height: 18px; fill: none; stroke: #fff; stroke-width: 2;
                   stroke-linecap: round; stroke-linejoin: round; }
  nav { display: flex; gap: 4px; }
  nav button { background: none; border: none; cursor: pointer; padding: 6px 14px; border-radius: 6px;
               font-size: .875rem; font-weight: 500; color: var(--muted); transition: background .15s, color .15s; }
  nav button:hover { background: var(--muted-bg); color: var(--fg); }
  nav button.active { background: rgba(59,130,246,.1); color: var(--primary); }

  .app { display: none; }
  .app.active { display: block; }
  .container { max-width: 1100px; margin: 0 auto; padding: 24px 16px; }

  .card { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); }
  .card-header { padding: 14px 20px 12px; border-bottom: 1px solid var(--border); }
  .card-title { font-size: 1rem; font-weight: 600; }
  .card-desc { font-size: .8rem; color: var(--muted); margin-top: 2px; }
  .card-body { padding: 16px 20px; }

  label { font-size: .8rem; font-weight: 500; color: var(--fg); display: block; margin-bottom: 4px; }
  input, select { width: 100%; padding: 7px 10px; border: 1px solid var(--border); border-radius: 6px;
                  font-size: .875rem; background: var(--card); color: var(--fg); outline: none; transition: border-color .15s; }
  input:focus, select:focus { border-color: var(--primary); }
  input[type=number] { -moz-appearance: textfield; }
  input[type=number]::-webkit-outer-spin-button,
  input[type=number]::-webkit-inner-spin-button { -webkit-appearance: none; }

  .btn { display: inline-flex; align-items: center; gap: 6px; padding: 7px 16px; border-radius: 6px;
         font-size: .875rem; font-weight: 500; cursor: pointer; border: 1px solid transparent;
         transition: background .15s, border-color .15s; line-height: 1.2; }
  .btn-primary { background: var(--primary); color: #fff; border-color: var(--primary); }
  .btn-primary:hover { background: var(--primary-hover); }
  .btn-outline { background: var(--card); color: var(--fg); border-color: var(--border); }
  .btn-outline:hover { background: var(--muted-bg); }
  .btn-ghost { background: none; color: var(--muted); border-color: transparent; padding: 5px 10px; }
  .btn-ghost:hover { background: var(--muted-bg); color: var(--fg); }
  .btn-danger { background: none; color: var(--danger); border-color: var(--border); }
  .btn-danger:hover { background: #fef2f2; }
  .btn-sm { padding: 4px 10px; font-size: .8rem; }
  .btn:disabled { opacity: .45; cursor: not-allowed; }

  .badge { display: inline-flex; align-items: center; padding: 2px 8px; border-radius: 999px;
           font-size: .7rem; font-weight: 600; border: 1px solid; }
  .badge-blue { background: rgba(59,130,246,.1); color: var(--primary); border-color: rgba(59,130,246,.2); }
  .badge-green { background: rgba(34,197,94,.1); color: #16a34a; border-color: rgba(34,197,94,.2); }
  .badge-amber { background: rgba(245,158,11,.1); color: #b45309; border-color: rgba(245,158,11,.2); }
  .badge-red { background: rgba(239,68,68,.1); color: #dc2626; border-color: rgba(239,68,68,.2); }
  .badge-gray { background: var(--muted-bg); color: var(--muted); border-color: var(--border); }

  .grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
  .grid-3 { display: grid; grid-template-columns: repeat(3,1fr); gap: 16px; }
  .flex { display: flex; } .items-center { align-items: center; }
  .justify-between { justify-content: space-between; }
  .justify-end { justify-content: flex-end; }
  .gap-2 { gap: 8px; } .gap-3 { gap: 12px; } .gap-4 { gap: 16px; }
  .mt-1{margin-top:4px}.mt-2{margin-top:8px}.mt-3{margin-top:12px}.mt-4{margin-top:16px}
  .mb-1{margin-bottom:4px}.mb-2{margin-bottom:8px}.mb-3{margin-bottom:12px}.mb-4{margin-bottom:16px}
  .text-sm{font-size:.875rem}.text-xs{font-size:.75rem}.text-muted{color:var(--muted)}
  .font-medium{font-weight:500}.font-semibold{font-weight:600}.font-bold{font-weight:700}
  .text-right{text-align:right}.text-center{text-align:center}.w-full{width:100%}
  .space-y>*+*{margin-top:8px}

  /* Logger */
  .logger-layout { display: grid; grid-template-columns: 260px 1fr; gap: 20px; align-items: start; }
  .task-row { display: grid; grid-template-columns: 1fr 100px 80px 32px; gap: 8px;
              align-items: center; padding: 10px 0; border-bottom: 1px solid var(--border); }
  .task-row:last-child { border-bottom: none; }
  .task-name { font-size: .875rem; font-weight: 500; }
  .task-type-label { font-size: .72rem; color: var(--muted); margin-top: 1px; }
  .min-input { text-align: center; }
  .avail-row { display: flex; align-items: center; justify-content: space-between;
               padding: 8px 0; border-bottom: 1px solid var(--border); font-size: .8rem; }
  .avail-row:last-child { border-bottom: none; }
  .summary-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 12px; }
  .summary-item { background: var(--muted-bg); border-radius: 6px; padding: 10px; text-align: center; }
  .summary-value { font-size: 1.2rem; font-weight: 700; color: var(--primary); }
  .summary-label { font-size: .7rem; color: var(--muted); margin-top: 2px; }

  /* Add Task Dialog */
  .modal-overlay { position: fixed; inset: 0; background: rgba(15,23,42,.45);
                    display: flex; align-items: center; justify-content: center; z-index: 1000; padding: 16px; }
  .modal-box { background: var(--card); border-radius: var(--radius); box-shadow: 0 10px 30px rgba(0,0,0,.2);
               width: min(400px, 100%); overflow: hidden; }
  .modal-header { display: flex; align-items: center; justify-content: space-between;
                  padding: 14px 18px; border-bottom: 1px solid var(--border); }
  .modal-body { padding: 18px; }
  .modal-footer { padding: 12px 18px; border-top: 1px solid var(--border); }

  /* Dashboard */
  .kpi-grid { display: grid; grid-template-columns: repeat(5,1fr); gap: 12px; }
  .kpi-card { padding: 16px; }
  .kpi-value { font-size: 1.5rem; font-weight: 700; color: var(--primary); word-break: break-word; }
  .kpi-label { font-size: .75rem; color: var(--muted); margin-top: 2px; }
  .bar-chart { display: flex; flex-direction: column; gap: 10px; }
  .bar-row { display: grid; grid-template-columns: 120px 1fr 50px; align-items: center; gap: 8px; font-size: .8rem; }
  .bar-track { background: var(--muted-bg); border-radius: 4px; height: 18px; overflow: hidden; }
  .bar-fill { height: 100%; border-radius: 4px; background: var(--primary); transition: width .4s ease; }
  .bar-fill.green { background: #22c55e; }
  .bar-fill.amber { background: var(--warning); }
  .monthly-chart { overflow-x: auto; }
  .monthly-plot { min-width: 460px; height: 260px; display: flex; align-items: stretch; gap: 10px;
                  padding: 16px 12px 0 40px; border-bottom: 1px solid var(--border);
                  background: repeating-linear-gradient(to bottom, transparent 0, transparent 64px, var(--border) 65px); }
  .monthly-bar-group { flex: 1; min-width: 54px; height: 100%; display: flex; flex-direction: column;
                       justify-content: flex-end; align-items: center; gap: 6px; }
  .monthly-bar-stack { width: min(54px, 80%); min-height: 2px; display: flex; flex-direction: column;
                       justify-content: flex-end; border-radius: 5px 5px 0 0; overflow: visible; }
  .monthly-bar-stack.empty { height: 2px; background: var(--border); }
  .monthly-segment { min-height: 2px; transition: height .3s ease; display: flex; align-items: center; justify-content: center; }
  .monthly-segment-label { color: #fff; font-size: .65rem; font-weight: 700; line-height: 1; white-space: nowrap;
                           text-shadow: 0 1px 2px rgba(0,0,0,.45); }
  .monthly-axis { position: relative; margin-top: -260px; height: 260px; pointer-events: none; }
  .monthly-axis span { position: absolute; left: 0; transform: translateY(-50%); color: var(--muted); font-size: .7rem; }
  .monthly-axis span:nth-child(1) { top: 0; } .monthly-axis span:nth-child(2) { top: 25%; }
  .monthly-axis span:nth-child(3) { top: 50%; } .monthly-axis span:nth-child(4) { top: 75%; }
  .monthly-axis span:nth-child(5) { top: 100%; }
  .monthly-label { font-size: .72rem; color: var(--muted); white-space: nowrap; }
  .monthly-legend { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 16px; margin-top: 14px; }
  .monthly-legend-item { display: inline-flex; align-items: center; gap: 5px; font-size: .75rem; color: var(--muted); }
  .monthly-legend-swatch { width: 10px; height: 10px; border-radius: 2px; flex: 0 0 auto; }

  /* Donut chart */
  .donut-wrap { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; }
  .donut { width: 130px; height: 130px; border-radius: 50%; position: relative; flex: 0 0 auto; }
  .donut-hole { position: absolute; inset: 18px; background: var(--card); border-radius: 50%;
                display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; }
  .donut-total { font-size: .95rem; font-weight: 700; }
  .donut-total-label { font-size: .65rem; color: var(--muted); }
  .donut-legend-col { display: flex; flex-direction: column; gap: 7px; flex: 1; min-width: 140px; }
  .donut-legend-row { display: flex; align-items: center; gap: 6px; font-size: .78rem; }
  .donut-legend-name { flex: 1; color: var(--fg); }
  .donut-legend-pct { flex: 0 0 auto; }

  /* Weekly trend chart */
  .trend-svg { width: 100%; height: auto; }
  .trend-point-label { font-size: 9px; fill: var(--fg); font-weight: 700; text-anchor: middle; }
  .trend-axis-label { font-size: 9px; fill: var(--muted); text-anchor: middle; }
  .trend-target-label { font-size: 8px; fill: var(--muted); }

  /* Gauge chart */
  .gauge-wrap { display: flex; flex-direction: column; align-items: center; gap: 2px; }
  .gauge-svg { width: 100%; max-width: 230px; height: auto; }
  .gauge-percent-text { font-size: 26px; font-weight: 800; fill: var(--fg); text-anchor: middle; }
  .gauge-sub-text { font-size: 11px; fill: var(--muted); text-anchor: middle; }
  .gauge-ticks { display: flex; justify-content: space-between; width: 100%; max-width: 190px; font-size: .68rem; color: var(--muted); margin-top: -10px; }
  .gauge-stats { display: flex; gap: 18px; margin-top: 8px; font-size: .78rem; }
  .gauge-stat-logged { color: var(--primary); font-weight: 600; }
  .gauge-stat-available { color: var(--muted); font-weight: 600; }

  /* Logs */
  table { width: 100%; border-collapse: collapse; font-size: .875rem; }
  th { text-align: left; padding: 8px 12px; font-size: .75rem; font-weight: 600;
       color: var(--muted); border-bottom: 2px solid var(--border); white-space: nowrap; }
  td { padding: 10px 12px; border-bottom: 1px solid var(--border); }
  tr:last-child td { border-bottom: none; }
  tr:hover td { background: var(--muted-bg); }
  .empty-state { text-align: center; padding: 48px 0; color: var(--muted); font-size: .875rem; }

  /* Settings */
  .list-item { display: flex; align-items: center; justify-content: space-between;
               padding: 8px 0; border-bottom: 1px solid var(--border); font-size: .875rem; }
  .list-item:last-child { border-bottom: none; }

  /* Alert / Toast */
  .alert { padding: 10px 14px; border-radius: 6px; font-size: .875rem; border: 1px solid; }
  .alert-success { background: rgba(34,197,94,.08); color: #15803d; border-color: rgba(34,197,94,.2); }
  .alert-error { background: rgba(239,68,68,.08); color: #b91c1c; border-color: rgba(239,68,68,.2); }
  #toast { position: fixed; bottom: 24px; right: 24px; z-index: 999; display: none;
           min-width: 240px; max-width: 360px; box-shadow: 0 4px 12px rgba(0,0,0,.15); }

  @media (max-width: 900px) {
    .grid-3 { grid-template-columns: 1fr; }
  }

  @media (max-width: 768px) {
    .logger-layout { grid-template-columns: 1fr; }
    .kpi-grid { grid-template-columns: 1fr 1fr; }
    .grid-2 { grid-template-columns: 1fr; }
    nav button { padding: 6px 8px; font-size: .8rem; }
  }