:root{
  --bg:#0b0f17;
  --card:#111827;
  --card2:#0f172a;
  --text:#e5e7eb;
  --muted:#9ca3af;
  --line:rgba(255,255,255,.08);
  --primary:#7c3aed;
  --primary2:#a78bfa;

  --good:#22c55e;
  --mid:#f59e0b;
  --bad:#ef4444;

  --radius:16px;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, "Apple Color Emoji","Segoe UI Emoji";
  background: radial-gradient(1200px 800px at 10% 0%, rgba(124,58,237,.25), transparent 55%),
              radial-gradient(1200px 800px at 90% 20%, rgba(34,197,94,.12), transparent 50%),
              var(--bg);
  color:var(--text);
}

/* ---------- Topbar ---------- */
.topbar{
  position:sticky; top:0; z-index:10;
  backdrop-filter: blur(10px);
  background: rgba(11,15,23,.7);
  border-bottom: 1px solid var(--line);
  padding: 14px 16px;
  display:flex; gap:12px; align-items:center; justify-content:space-between;
  flex-wrap: wrap;
}

.brand{display:flex; gap:12px; align-items:center; min-width: 220px;}
.logo{
  width:40px; height:40px; border-radius:14px;
  display:grid; place-items:center;
  background: linear-gradient(135deg, rgba(124,58,237,.9), rgba(167,139,250,.7));
  font-weight:800;
  flex: 0 0 auto;
}
.title{font-weight:800; letter-spacing:.2px}
.subtitle{color:var(--muted); font-size:12px}

/* Hamburger (default hidden, shown on mobile) */
.hamburger{
  display:none;
  font-size:22px;
  background:none;
  border:1px solid var(--line);
  color:var(--text);
  padding:8px 12px;
  border-radius:12px;
  cursor:pointer;
  font-weight:900;
  transition:.15s transform, .15s border, .15s background;
}
.hamburger:hover{transform: translateY(-1px); border-color: rgba(167,139,250,.45)}

/* Tabs */
.tabs{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  align-items:center;
  justify-content:flex-end;
}
.tab{
  border:1px solid var(--line);
  background: rgba(17,24,39,.6);
  color: var(--text);
  padding:10px 12px;
  border-radius: 999px;
  cursor:pointer;
  font-weight:600;
  transition: .15s transform, .15s background, .15s border;
  white-space: nowrap;
}
.tab:hover{transform: translateY(-1px); border-color: rgba(167,139,250,.45)}
.tab.is-active{
  background: rgba(124,58,237,.25);
  border-color: rgba(167,139,250,.6);
}

/* ---------- Zitat oben ---------- */
.top-quote{
  max-width:1100px;
  margin:12px auto 0;
  padding:0 16px;
}

/* ---------- Layout ---------- */
.container{
  max-width:1100px;
  margin: 16px auto;
  padding: 0 16px 84px; /* mehr bottom padding wegen fixed footer */
}
.view{display:none}
.view.is-active{display:block}

.viewHead{
  display:flex; align-items:flex-end; justify-content:space-between; gap:12px;
  margin: 18px 0 12px;
  flex-wrap:wrap;
}
h1{margin:0; font-size:28px}
.h3{margin:0 0 6px; font-size:16px}
.muted{color:var(--muted)}
.small{font-size:12px}

.headActions{
  display:flex;
  gap:8px;
  align-items:center;
  flex-wrap:wrap;
}

/* ---------- Grids ---------- */
.grid2{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
@media (max-width: 900px){
  .grid2{grid-template-columns: 1fr}
}

.gridAuto{
  display:grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap:12px;
}
@media (max-width: 980px){
  .gridAuto{grid-template-columns: repeat(2, minmax(0, 1fr))}
}
@media (max-width: 640px){
  .gridAuto{grid-template-columns: 1fr}
}

/* ---------- Cards ---------- */
.card{
  background: linear-gradient(180deg, rgba(17,24,39,.75), rgba(15,23,42,.75));
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 14px;
  box-shadow: 0 10px 28px rgba(0,0,0,.25);
}

.cardHead{
  display:flex; justify-content:space-between; align-items:center; gap:10px;
  margin-bottom: 10px;
}

.pill{
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: rgba(255,255,255,.03);
  font-weight:700;
  font-size:12px;
}

/* ---------- Buttons / Inputs ---------- */
.btn{
  border:1px solid var(--line);
  background: rgba(255,255,255,.03);
  color: var(--text);
  padding: 10px 12px;
  border-radius: 12px;
  cursor:pointer;
  font-weight:700;
  transition:.15s transform, .15s border, .15s background;
}
.btn:hover{transform: translateY(-1px); border-color: rgba(167,139,250,.45)}
.btn.primary{
  background: rgba(124,58,237,.35);
  border-color: rgba(167,139,250,.55);
}
.btn.danger{
  background: rgba(239,68,68,.18);
  border-color: rgba(239,68,68,.35);
}

.input, .textarea, select.input{
  width:100%;
  border:1px solid var(--line);
  background: rgba(0,0,0,.15);
  color: var(--text);
  padding: 10px 12px;
  border-radius: 12px;
  outline:none;
}
.textarea{resize: vertical}
.input:focus, .textarea:focus{
  border-color: rgba(167,139,250,.55);
  box-shadow: 0 0 0 3px rgba(124,58,237,.15);
}

.label{display:block; margin: 10px 0 6px; font-weight:700}
.label.small{margin:0; font-size:12px; color:var(--muted); font-weight:600}

.form{max-width:520px}
@media (max-width: 900px){
  .form{max-width:100%;}
}

/* ---------- Lists ---------- */
.list{display:flex; flex-direction:column; gap:10px}
.list.compact{gap:8px}

.item{
  border:1px solid var(--line);
  background: rgba(255,255,255,.02);
  border-radius: 14px;
  padding: 10px 12px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap: 10px;
}
.itemLeft{display:flex; flex-direction:column; gap:4px; min-width: 0;}
.itemTitle{font-weight:800}
.itemMeta{color:var(--muted); font-size:12px}

.row{display:flex; gap:10px; align-items:center; flex-wrap:wrap; margin-top: 8px}
.divider{height:1px; background: var(--line); margin: 12px 0}

.legend{display:flex; gap:8px; align-items:center; flex-wrap:wrap; margin-bottom:10px}
.chip{
  border:1px solid var(--line);
  border-radius: 999px;
  padding: 6px 10px;
  font-size: 12px;
  font-weight:700;
  background: rgba(255,255,255,.02);
}
.chip-done{border-color: rgba(34,197,94,.5)}
.chip-miss{border-color: rgba(239,68,68,.5)}
.chip-na{border-color: rgba(148,163,184,.45)}
.chip-none{border-color: rgba(156,163,175,.35)}

.statusBtn{
  min-width: 120px;
  text-align:center;
  padding: 10px 12px;
  border-radius: 12px;
  border:1px solid var(--line);
  cursor:pointer;
  font-weight:900;
  user-select:none;
}
.status-none{background: rgba(156,163,175,.12)}
.status-done{background: rgba(34,197,94,.18); border-color: rgba(34,197,94,.35)}
.status-miss{background: rgba(239,68,68,.18); border-color: rgba(239,68,68,.35)}
.status-na{background: rgba(148,163,184,.12); border-color: rgba(148,163,184,.28)}

/* ---------- Stats ---------- */
.stats{
  display:grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap:10px;
}
.stat{
  border:1px solid var(--line);
  border-radius: 14px;
  padding: 10px 12px;
  background: rgba(255,255,255,.02);
}
.statLabel{color:var(--muted); font-size:12px; font-weight:700}
.statValue{font-size:22px; font-weight:900; margin-top:4px}

/* ---------- Quote ---------- */
.quote{
  margin:0;
  padding: 12px;
  border-radius: 14px;
  border:1px dashed rgba(167,139,250,.35);
  background: rgba(124,58,237,.10);
  color: rgba(229,231,235,.95);
}

/* ---------- Custom weekdays ---------- */
.week{display:grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap:8px; margin-top:8px}
.week label{display:flex; gap:8px; align-items:center; font-weight:700; color: var(--muted); font-size:12px}
.customDays.is-hidden{display:none}

/* ---------- Month (wichtig: Mo–So bleibt echtes Raster; auf Handy -> horizontal scroll) ---------- */
.monthLegend{
  display:flex;
  gap:8px;
  align-items:center;
  flex-wrap:wrap;
  margin-bottom:10px;
}

/* Auf sehr schmalen Screens: Monat wird scrollbar statt zusammengequetscht */
.monthWeekdays,
.monthGrid{
  display:grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap:8px;
  min-width: 560px; /* 7 Spalten bleiben lesbar */
}
.monthWeekdays{margin-bottom:8px;}
.monthWeekdays > div{
  text-align:center;
  font-weight:900;
  color: var(--muted);
  font-size:12px;
  padding:8px 0;
  border:1px solid var(--line);
  border-radius: 12px;
  background: rgba(255,255,255,.02);
}

/* Scroll-Container */
#view-month .card{
  overflow-x:auto;
  -webkit-overflow-scrolling: touch;
}

.dayCell{
  border:1px solid var(--line);
  border-radius: 14px;
  padding: 10px;
  background: rgba(255,255,255,.02);
  cursor:pointer;
  transition: .15s transform, .15s border;
}
.dayCell:hover{transform: translateY(-1px); border-color: rgba(167,139,250,.45)}
.dayTop{display:flex; justify-content:space-between; align-items:center; gap:8px; margin-bottom: 6px}
.dayNum{font-weight:900}
.dayRate{font-size:12px; font-weight:900; color: var(--muted)}

.good{border-color: rgba(34,197,94,.35); background: rgba(34,197,94,.10)}
.mid{border-color: rgba(245,158,11,.35); background: rgba(245,158,11,.10)}
.bad{border-color: rgba(239,68,68,.35); background: rgba(239,68,68,.10)}

/* Placeholder-Zellen */
.dayCell.placeholder{
  cursor: default;
  opacity: .55;
}
.dayCell.placeholder:hover{
  transform:none;
  border-color: var(--line);
}

/* ---------- Footer ---------- */
.footer{
  position:fixed; bottom:0; left:0; right:0;
  border-top:1px solid var(--line);
  background: rgba(11,15,23,.75);
  backdrop-filter: blur(10px);
  padding: 10px 16px;
  display:flex; justify-content:center;
}

/* ---------- Canvas ---------- */
canvas{
  width:100%;
  height:180px;
  border-radius: 14px;
  border:1px solid var(--line);
  background: rgba(255,255,255,.02)
}

/* ---------- Mobile tuning ---------- */
@media (max-width: 640px){
  .topbar{padding: 12px 12px;}
  .container{padding: 0 12px 92px;}
  h1{font-size:24px}

  /* Head actions: auf Handy lieber volle Breite */
  .viewHead{align-items:flex-start;}
  .headActions{width:100%;}
  .headActions .btn{flex: 1 1 auto;}
  #monthPicker{min-width: 160px; flex: 1 1 160px;}

  /* Reihen & Items */
  .item{align-items:flex-start;}
  .statusBtn{min-width: 110px;}

  /* Buttons im Formbereich: full width */
  .form .btn{width:100%;}
  .row .btn{flex: 1 1 auto;}
}

@media (max-width: 420px){
  .logo{width:36px; height:36px; border-radius: 12px;}
  .subtitle{display:none;}
  .statValue{font-size:20px;}
  canvas{height:160px;}
}

/* ---------- Hamburger Verhalten (Tabs einklappen) ---------- */
@media (max-width: 720px){
  .hamburger{display:block;}

  .tabs{
    display:none;
    width:100%;
    flex-direction:column;
    gap:8px;
    margin-top:10px;
    justify-content:flex-start;
  }
  .tabs.is-open{display:flex;}

  .tab{
    width:100%;
    text-align:left;
    border-radius: 14px;
    padding: 12px 12px;
    font-size: 14px;
  }
}