:root {
  --bg: #0f172a;
  --card: #111827;
  --card-2: #1f2937;
  --text: #f3f4f6;
  --muted: #94a3b8;
  --accent: #22c55e;
  --accent-2: #86efac;
  --warn: #f59e0b;
  --border: rgba(255,255,255,0.08);
}
* { box-sizing: border-box; }
body { margin: 0; font-family: system-ui, -apple-system, Segoe UI, Roboto, sans-serif; background: linear-gradient(180deg,#0b1220,#111827 35%,#0b1220); color: var(--text); }
a { color: inherit; text-decoration: none; }
.container { padding: 16px; max-width: 980px; margin: 0 auto 40px; }
.topbar { display: flex; justify-content: space-between; align-items: center; padding: 16px; max-width: 980px; margin: 0 auto; gap: 12px; }
.topbar-actions { display:flex; gap:8px; flex-wrap:wrap; }
h1,h2,h3 { margin: 0 0 6px; }
.muted { color: var(--muted); margin: 0; }
.cards { display: grid; grid-template-columns: repeat(2,1fr); gap: 12px; margin: 12px 0 20px; }
.stats-grid { grid-template-columns: repeat(2,1fr); }
.card, .panel, .login-card, .nav-tile { background: rgba(17,24,39,0.86); border: 1px solid var(--border); border-radius: 18px; backdrop-filter: blur(8px); box-shadow: 0 12px 28px rgba(0,0,0,.18); }
.card { padding: 14px; }
.card span { display:block; color: var(--muted); font-size: .85rem; margin-bottom: 8px; }
.card strong { font-size: 1.25rem; }
.card .good, strong.good { color: var(--accent-2); }
.panel { padding: 16px; margin-bottom: 16px; }
.panel-head { display:flex; justify-content: space-between; align-items:center; gap:12px; margin-bottom: 14px; flex-wrap: wrap; }
.entry-form { display:grid; grid-template-columns: 1fr 1fr; gap: 12px; }
label { display:flex; flex-direction:column; gap: 6px; font-size: .92rem; color: var(--muted); }
input, textarea, button { border-radius: 14px; border:1px solid var(--border); background: var(--card-2); color: var(--text); padding: 12px 14px; font: inherit; }
input[type="file"] { padding: 10px; }
button { cursor:pointer; }
.save-btn { background: var(--accent); color: #052e16; font-weight: 700; border: none; }
.ghost-btn { padding: 10px 14px; background: transparent; border: 1px solid var(--border); border-radius: 12px; color: var(--text); }
.full { grid-column: 1 / -1; }
.table-wrap { overflow-x: auto; }
table { width:100%; border-collapse: collapse; font-size: .92rem; }
th, td { text-align:left; padding: 10px 8px; border-bottom:1px solid var(--border); }
.success, .alert { margin: 10px 0 16px; padding: 12px 14px; border-radius: 14px; }
.success { background: rgba(34,197,94,.15); color: #bbf7d0; }
.alert { background: rgba(239,68,68,.15); color: #fecaca; }
.inline-date { display:flex; gap: 8px; }
.chart-tabs { display:flex; gap:8px; flex-wrap:wrap; margin-bottom:12px; }
.tab-btn { background: var(--card-2); }
.tab-btn.active { background: rgba(34,197,94,.18); border-color: rgba(34,197,94,.45); color: #dcfce7; }
.chart-card { background: #0f172a; border:1px solid var(--border); border-radius: 18px; padding: 12px; }
#trendChart { width: 100%; display:block; }
.photo-card { margin:0; display:flex; flex-direction:column; gap:8px; }
.photo-card span { color: var(--muted); font-size: .9rem; }
.photo-card img, .photo-placeholder { width:100%; aspect-ratio: 3 / 4; border-radius: 16px; border:1px solid var(--border); background:#0f172a; object-fit:cover; }
.photo-placeholder { display:grid; place-items:center; color: var(--muted); }
.hero { display:grid; grid-template-columns: 1.2fr .8fr; gap:16px; overflow:hidden; position:relative; }
.hero-copy { position:relative; z-index:2; }
.hero-badge { display:inline-block; padding:6px 10px; border-radius:999px; font-size:.82rem; color:#dcfce7; background:rgba(34,197,94,.16); border:1px solid rgba(34,197,94,.32); margin-bottom:10px; }
.hero-art { min-height:180px; position:relative; }
.blob { position:absolute; border-radius:999px; filter: blur(2px); }
.blob-1 { width:160px; height:160px; right:20px; top:0; background: radial-gradient(circle at 30% 30%, rgba(134,239,172,.8), rgba(34,197,94,.12)); }
.blob-2 { width:110px; height:110px; right:110px; bottom:10px; background: radial-gradient(circle at 50% 50%, rgba(96,165,250,.7), rgba(59,130,246,.08)); }
.phone-frame { position:absolute; right:28px; top:20px; width:155px; height:255px; border-radius:28px; padding:16px 12px; background:linear-gradient(180deg, rgba(15,23,42,.95), rgba(31,41,55,.9)); border:1px solid rgba(255,255,255,.08); box-shadow: 0 25px 60px rgba(0,0,0,.35); transform: rotate(8deg); }
.mini-card { height:44px; border-radius:14px; background:linear-gradient(180deg, rgba(34,197,94,.22), rgba(17,24,39,.6)); border:1px solid rgba(255,255,255,.08); margin-bottom:12px; }
.mini-card-wide { height:86px; }
.home-actions { display:grid; gap:14px; margin: 16px 0 10px; }
.nav-tile { display:grid; grid-template-columns: 64px 1fr; gap:14px; padding:18px; position:relative; overflow:hidden; }
.nav-tile::after { content:""; position:absolute; inset:auto -20px -20px auto; width:120px; height:120px; border-radius:999px; opacity:.14; }
.entry-tile::after { background: radial-gradient(circle, #22c55e, transparent 70%); }
.dashboard-tile::after { background: radial-gradient(circle, #60a5fa, transparent 70%); }
.tile-icon { width:64px; height:64px; display:grid; place-items:center; border-radius:18px; background:rgba(255,255,255,.04); color:#dcfce7; border:1px solid var(--border); }
.tile-icon svg, .streak-card svg, .photo-reminder svg, .slideshow-metrics svg { width:24px; height:24px; }
.nav-tile p { margin:0; color: var(--muted); }
.tile-cta { grid-column: 2; margin-top:4px; color:#dcfce7; font-weight:600; }
.compact-top { margin-top: 0; }
.quick-glance .mini-stats { display:grid; grid-template-columns: repeat(2,1fr); gap:12px; }
.mini-stat { padding:14px; border-radius:16px; background:rgba(255,255,255,.03); border:1px solid var(--border); }
.mini-stat span { display:block; color:var(--muted); font-size:.85rem; margin-bottom:6px; }
.mini-stat strong { font-size:1.06rem; }
.photo-reminder { display:flex; gap:12px; align-items:flex-start; padding:14px; border-radius:16px; border:1px solid rgba(34,197,94,.2); background:rgba(34,197,94,.08); margin-bottom:14px; }
.photo-reminder.warn { border-color: rgba(245,158,11,.35); background: rgba(245,158,11,.12); }
.photo-reminder strong, .photo-reminder span { display:block; }
.motivation-row { display:grid; grid-template-columns: repeat(2,1fr); gap:12px; margin-bottom:14px; }
.streak-card { display:flex; gap:12px; align-items:center; padding:14px; border-radius:16px; border:1px solid rgba(34,197,94,.25); background:rgba(34,197,94,.12); }
.streak-card.subtle { background:rgba(255,255,255,.03); border-color: var(--border); }
.streak-card span { display:block; color:var(--muted); font-size:.85rem; }
.streak-card strong { font-size:1.18rem; }
.timeline-badge { padding:6px 10px; border-radius:999px; background:rgba(96,165,250,.15); border:1px solid rgba(96,165,250,.28); color:#dbeafe; font-size:.85rem; }
.timeline-toolbar { display:grid; grid-template-columns:auto 1fr auto; gap:12px; align-items:center; margin-bottom:14px; }
.timeline-date-wrap { text-align:center; display:grid; gap:4px; }
.timeline-chart-wrap { margin-bottom:10px; }
.timeline-slider-wrap { margin: 8px 0 14px; }
.timeline-slider-wrap input[type="range"] { width:100%; padding:0; background:transparent; }
.photo-trio-grid { display:grid; gap:12px; grid-template-columns: repeat(3, 1fr); }
.slideshow-footer { display:flex; justify-content:space-between; gap:12px; align-items:center; flex-wrap:wrap; margin-top:14px; }
.slideshow-metrics { display:flex; gap:12px; flex-wrap:wrap; }
.slideshow-metrics span { display:flex; align-items:center; gap:8px; padding:10px 12px; border-radius:14px; background:rgba(255,255,255,.03); border:1px solid var(--border); }
.photo-placeholder.large { width:100%; border-radius:18px; border:1px solid var(--border); background:#0f172a; aspect-ratio: 3 / 1; display:grid; place-items:center; }
.timeline-chart-wrap canvas { cursor: crosshair; }
@media (min-width: 860px) {
  .stats-grid { grid-template-columns: repeat(4,1fr); }
}
@media (max-width: 760px) {
  .cards, .entry-form, .hero, .quick-glance .mini-stats, .timeline-toolbar, .motivation-row { grid-template-columns: 1fr; }
  .photo-trio-grid { grid-template-columns: 1fr; }
  .topbar { align-items:flex-start; flex-direction: column; }
  .topbar-actions { width:100%; }
  .inline-date { width:100%; }
  .inline-date input, .inline-date button, .topbar-actions a { flex:1; text-align:center; }
  .hero-art { min-height:150px; }
  .phone-frame { right:10px; width:125px; height:210px; transform: rotate(6deg); }
  .nav-tile { grid-template-columns: 56px 1fr; }
  .tile-icon { width:56px; height:56px; }
  .timeline-date-wrap { text-align:left; }
  .slideshow-footer { align-items:stretch; }
  .slideshow-footer .ghost-btn { width:100%; text-align:center; }
}


.progress-panel {
  gap: 14px;
}
.progress-wrap {
  margin-top: 6px;
}
.progress-track {
  width: 100%;
  height: 12px;
  border-radius: 999px;
  background: rgba(148, 163, 184, 0.16);
  overflow: hidden;
}
.progress-track.large {
  height: 16px;
}
.progress-fill {
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #22c55e 0%, #60a5fa 100%);
}
.progress-caption-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}
@media (max-width: 640px) {
  .progress-caption-grid {
    grid-template-columns: 1fr;
  }
}


.workout-hero { overflow: hidden; position: relative; }
.sport-grid { display:grid; gap:12px; }
.sport-card { display:grid; grid-template-columns: 1.25fr .75fr; gap:12px; align-items:center; padding:16px; border-radius:18px; border:1px solid var(--border); background:linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02)); }
.sport-kicker { display:inline-block; margin-bottom:8px; color:#dcfce7; font-size:.82rem; padding:5px 10px; border-radius:999px; background:rgba(34,197,94,.14); border:1px solid rgba(34,197,94,.22); }
.sport-card h3 { margin:0 0 8px; }
.sport-art { display:grid; place-items:center; min-height:96px; }
.sport-art svg { width:100%; max-width:190px; height:auto; fill:none; stroke-linecap:round; stroke-linejoin:round; stroke-width:5; }
.cardio-card svg { stroke:#86efac; }
.strength-card svg { stroke:#93c5fd; }
.focus-card { grid-template-columns: 1fr auto; }
.streak-ring { width:96px; height:96px; border-radius:999px; display:grid; place-items:center; padding:10px; position:relative; background:conic-gradient(#22c55e 0deg, #60a5fa 210deg, rgba(255,255,255,.07) 0deg); }
.streak-ring::before { content:""; width:100%; height:100%; border-radius:inherit; background:#0f172a; display:block; }
.ring-center { position:absolute; font-weight:800; font-size:1.4rem; color:#dcfce7; }
@media (max-width:760px) {
  .sport-card { grid-template-columns: 1fr; }
  .focus-card { grid-template-columns: 1fr; }
  .streak-ring { margin-top:8px; }
}

.mini-chart-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}.mini-chart-card{padding:14px;border-radius:18px;border:1px solid var(--border);background:linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,.02))}.mini-chart-head{display:flex;justify-content:space-between;gap:12px;align-items:center;margin-bottom:8px}.mini-chart-head span{color:var(--muted);font-size:.9rem}.mini-chart-head strong{font-size:1rem}.heatmap-grid{display:grid;grid-template-columns:repeat(12,1fr);gap:6px}.heat-cell{aspect-ratio:1;border-radius:8px;border:1px solid rgba(255,255,255,.05);display:grid;place-items:center;font-size:.6rem;color:rgba(255,255,255,.38)}.heat-0{background:rgba(255,255,255,.03)}.heat-1{background:rgba(34,197,94,.22)}.heat-2{background:rgba(34,197,94,.38)}.heat-3{background:rgba(34,197,94,.58)}.heat-4{background:rgba(34,197,94,.82);color:#03210f}.heatmap-legend{display:flex;align-items:center;gap:8px;margin-top:12px;color:var(--muted);font-size:.82rem}.heatmap-legend div{width:18px;height:18px;border-radius:6px;border:1px solid rgba(255,255,255,.05)}
@media (max-width:760px){.mini-chart-grid{grid-template-columns:1fr}.heatmap-grid{grid-template-columns:repeat(7,1fr)}}


/* v11 bootstrap/mobile refinements */
body { padding-bottom: 24px; }
.container { max-width: 1100px; }
.dashboard-kpi {
  background: linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.02));
  border: 1px solid var(--border);
  border-radius: 18px;
  padding: 16px;
  color: var(--text);
}
.dashboard-kpi span {
  display:block;
  color:var(--muted);
  font-size:.82rem;
  margin-bottom:6px;
}
.dashboard-kpi strong {
  display:block;
  font-size:1.25rem;
  line-height:1.1;
}
.dashboard-kpi small {
  display:block;
  margin-top:8px;
  color:var(--muted);
}
.dashboard-kpi.accent {
  background: linear-gradient(180deg, rgba(34,197,94,.18), rgba(96,165,250,.10));
}
.dashboard-accordion .accordion-item {
  overflow: hidden;
}
.accordion-button {
  background: #111827;
  color: var(--text);
  box-shadow: none !important;
  font-weight: 700;
}
.accordion-button:not(.collapsed) {
  background: rgba(34,197,94,.10);
  color: #e5ffe9;
}
.accordion-button::after {
  filter: invert(1);
}
.accordion-body {
  background: rgba(255,255,255,.015);
}
.chart-frame,
.chart-card-mobile {
  width: 100%;
  overflow: hidden;
}
.chart-card-mobile {
  padding: 10px;
  min-height: 180px;
}
.chart-tight {
  padding: 8px;
}
.chart-card canvas,
.chart-frame canvas,
.timeline-chart-wrap canvas {
  width: 100% !important;
  max-width: 100%;
  display: block;
}
.mobile-stack {
  display:grid;
  grid-template-columns: auto 1fr auto;
  gap:12px;
  align-items:center;
}
.table-wrap {
  -webkit-overflow-scrolling: touch;
}
.table-wrap table {
  min-width: 640px;
}
@media (max-width: 760px) {
  .dashboard-kpis .col-6 {
    width: 50%;
  }
  .mobile-stack {
    grid-template-columns: 1fr;
  }
  .timeline-toolbar .ghost-btn,
  .panel-head .ghost-btn {
    width:100%;
    text-align:center;
  }
  .chart-card-mobile {
    padding: 8px;
    min-height: 150px;
  }
  .table-wrap table {
    min-width: 560px;
  }
  .topbar-actions {
    display:grid;
    grid-template-columns: repeat(2, 1fr);
    gap:8px;
  }
  .topbar-actions .ghost-btn {
    width:100%;
  }
}