/* ============================================================
   DESIGN TOKENS — derived from brand #002CB7
   Light mode = default; dark mode = auto via prefers-color-scheme
   ============================================================ */
:root{
  --brand:        #002CB7;
  --brand-strong: #001E82;
  --brand-soft:   #E7ECFB;
  --on-brand:     #FFFFFF;

  --bg:           #F5F6FB;
  --surface:      #FFFFFF;
  --surface-2:    #ECEFF9;
  --border:       #E3E6F0;

  --text:         #0B1020;
  --text-muted:   #656E85;
  --text-faint:   #9AA1B4;

  --success:      #16A34A;
  --success-soft: #E3F6EA;
  --rest:         #9AA1B4;
  --rest-soft:    #EEF0F5;
  --gold:         #C8860D;
  --gold-soft:    #FBF0DA;
  --danger:       #C1443B;

  --radius-lg: 20px;
  --radius-md: 14px;
  --radius-sm: 10px;
  --shadow: 0 1px 2px rgba(16,24,64,0.04), 0 8px 24px rgba(16,24,64,0.06);
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
}

@media (prefers-color-scheme: dark){
  :root{
    --brand:        #5C7DF5;
    --brand-strong: #7C97F7;
    --brand-soft:   rgba(92,125,245,0.16);
    --on-brand:     #0A0F1E;

    --bg:           #0A0F1E;
    --surface:      #131A2E;
    --surface-2:    #1A2238;
    --border:       #232B45;

    --text:         #EDEFF7;
    --text-muted:   #9098B3;
    --text-faint:   #5C6480;

    --success:      #34D399;
    --success-soft: rgba(52,211,153,0.14);
    --rest:         #6B7390;
    --rest-soft:    #171F36;
    --gold:         #F0B94E;
    --gold-soft:    rgba(240,185,78,0.14);
    --danger:       #E17A72;

    --shadow: 0 1px 2px rgba(0,0,0,0.3), 0 8px 24px rgba(0,0,0,0.35);
  }
}

*{ box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html{ height:100%; }
body{
  margin:0;
  min-height:100dvh;
  background:var(--bg);
  color:var(--text);
  font-family:'Be Vietnam Pro', -apple-system, BlinkMacSystemFont, sans-serif;
  font-feature-settings:'tnum' 1;
  -webkit-font-smoothing:antialiased;
  touch-action: manipulation;
}
button{ font-family:inherit; }

.app{
  max-width:480px;
  margin:0 auto;
  padding-top:calc(var(--safe-top) + 14px);
  padding-bottom:calc(var(--safe-bottom) + 32px);
  min-height:100dvh;
}

/* ============================================================
   HEADER / STATS
   ============================================================ */
.stats-header{ padding:0 18px 6px; }

.brand{ display:flex; align-items:center; gap:8px; margin-bottom:16px; }
.brand-dot{
  width:10px; height:10px; border-radius:50%;
  background:var(--brand);
}
.brand-name{
  font-weight:700; font-size:15px; letter-spacing:-0.01em;
  color:var(--text);
}

.stats-grid{
  display:grid;
  grid-template-columns:auto 1fr 1fr;
  gap:10px;
}
.stat-card{
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--radius-md);
  padding:12px 14px;
  display:flex;
  flex-direction:column;
  justify-content:center;
}
.stat-value{
  font-size:22px; font-weight:800; letter-spacing:-0.02em;
  font-variant-numeric: tabular-nums;
  line-height:1.1;
}
.stat-label{
  font-size:11.5px; color:var(--text-muted); margin-top:2px;
  font-weight:500;
}

.ring-card{
  position:relative;
  align-items:center;
  justify-content:center;
  width:80px;
  padding:8px;
}
.ring{ width:64px; height:64px; transform:rotate(-90deg); }
.ring-bg{ fill:none; stroke:var(--surface-2); stroke-width:6; }
.ring-fg{
  fill:none; stroke:var(--brand); stroke-width:6; stroke-linecap:round;
  stroke-dasharray:169.6; stroke-dashoffset:169.6;
  transition:stroke-dashoffset .5s cubic-bezier(.4,0,.2,1);
}
.ring-label{
  position:absolute; inset:0;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
}
.ring-label span{ font-size:14px; font-weight:800; font-variant-numeric:tabular-nums; }
.ring-label small{ font-size:9px; color:var(--text-muted); font-weight:600; margin-top:-1px; }

/* ============================================================
   BANNER
   ============================================================ */
.banner{
  margin:14px 18px 0;
  background:var(--brand-soft);
  color:var(--brand-strong);
  border-radius:var(--radius-sm);
  padding:10px 14px;
  font-size:13px;
  font-weight:500;
  line-height:1.5;
}
.banner strong{ font-weight:700; }

/* ============================================================
   WEEK NAV + STRIP
   ============================================================ */
.week-nav{
  position:sticky; top:0; z-index:20;
  display:flex; align-items:center; justify-content:space-between;
  padding:16px 10px 8px;
  margin-top:8px;
  background:var(--bg);
}
.nav-arrow{
  width:36px; height:36px;
  border-radius:50%;
  border:1px solid var(--border);
  background:var(--surface);
  color:var(--text);
  display:flex; align-items:center; justify-content:center;
  cursor:pointer;
}
.nav-arrow:disabled{ opacity:0.3; }
.nav-arrow:active:not(:disabled){ transform:scale(0.92); }

.week-label{
  font-size:13px; font-weight:600; color:var(--text-muted);
  letter-spacing:0.01em;
}

.week-strip{
  position:sticky; top:60px; z-index:20;
  display:grid;
  grid-template-columns:repeat(7,1fr);
  gap:6px;
  padding:4px 12px 14px;
  background:var(--bg);
}
.day-chip{
  display:flex; flex-direction:column; align-items:center; gap:6px;
  padding:9px 2px 10px;
  border-radius:14px;
  border:1px solid var(--border);
  background:var(--surface);
  cursor:pointer;
}
.day-chip .dow{ font-size:10px; font-weight:600; color:var(--text-faint); letter-spacing:0.03em; }
.day-chip .num{ font-size:15px; font-weight:700; font-variant-numeric:tabular-nums; }
.day-chip .indicator{ width:6px; height:6px; border-radius:50%; margin-top:1px; }
.day-chip .indicator.rest{ background:var(--rest); opacity:.5; }
.day-chip .indicator.train{ background:var(--brand); }
.day-chip .indicator.done{ background:var(--success); }
.day-chip.selected{
  border-color:var(--brand);
  background:var(--brand-soft);
}
.day-chip.selected .num{ color:var(--brand); }
.day-chip.is-today .num::after{
  content:'';
  display:block;
}
.day-chip.is-today{ box-shadow:0 0 0 2px var(--brand) inset; }
.day-chip.locked{ opacity:0.5; }

.today-jump{
  display:block;
  margin:0 auto 4px;
  font-size:12.5px; font-weight:600;
  color:var(--brand);
  background:var(--brand-soft);
  border:none;
  padding:6px 14px;
  border-radius:20px;
  cursor:pointer;
}

/* ============================================================
   DAY PANEL
   ============================================================ */
.day-panel{ padding:6px 18px 0; }

.day-title-row{
  display:flex; justify-content:space-between; align-items:flex-start;
  margin:10px 0 4px;
}
.day-title{ font-size:20px; font-weight:800; letter-spacing:-0.01em; }
.day-sub{ font-size:12.5px; color:var(--text-muted); margin-top:3px; font-weight:500; }
.day-time-badge{
  font-size:12px; font-weight:700;
  background:var(--surface-2); color:var(--text-muted);
  padding:5px 10px; border-radius:8px;
  white-space:nowrap;
  font-variant-numeric:tabular-nums;
}

.lock-note{
  font-size:12px; color:var(--text-faint); font-weight:600;
  margin:2px 0 14px;
}

.rest-card{
  margin-top:16px;
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--radius-lg);
  padding:28px 20px;
  text-align:center;
}
.rest-card .icon{ font-size:28px; margin-bottom:8px; }
.rest-card h3{ margin:0 0 6px; font-size:16px; font-weight:700; }
.rest-card p{ margin:0; font-size:13px; color:var(--text-muted); line-height:1.6; }

.section-label{
  font-size:11.5px; font-weight:700; letter-spacing:0.08em;
  text-transform:uppercase; color:var(--text-faint);
  margin:20px 2px 8px;
}
.section-label:first-child{ margin-top:14px; }

.item-row{
  display:flex; align-items:flex-start; gap:12px;
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--radius-md);
  padding:13px 14px;
  margin-bottom:8px;
  cursor:pointer;
  transition:background .15s ease, border-color .15s ease;
}
.item-row:active{ background:var(--surface-2); }
.item-row.locked{ cursor:not-allowed; }

.check{
  width:24px; height:24px; border-radius:50%;
  border:2px solid var(--border);
  flex-shrink:0; margin-top:1px;
  display:flex; align-items:center; justify-content:center;
  transition:background .15s ease, border-color .15s ease;
}
.check svg{ width:13px; height:13px; opacity:0; transform:scale(.5); transition:opacity .15s ease, transform .15s ease; }
.item-row.done .check{ background:var(--success); border-color:var(--success); }
.item-row.done .check svg{ opacity:1; transform:scale(1); }

.item-body{ flex:1; min-width:0; }
.item-name{ font-size:14.5px; font-weight:600; line-height:1.35; }
.item-row.done .item-name{ text-decoration:line-through; color:var(--text-muted); }
.item-meta{ font-size:12px; color:var(--brand); font-weight:600; margin-top:3px; }
.item-target{ font-size:12px; color:var(--text-muted); margin-top:2px; line-height:1.4; }
.item-video{
  display:inline-flex; align-items:center; gap:4px;
  font-size:12px; font-weight:600; color:var(--text-muted);
  margin-top:6px; text-decoration:none;
  border-bottom:1px solid var(--text-faint);
  padding-bottom:1px;
}
.item-video:active{ opacity:0.6; }

.points-chip{
  flex-shrink:0;
  font-size:11.5px; font-weight:700;
  color:var(--gold);
  background:var(--gold-soft);
  padding:4px 8px;
  border-radius:8px;
  font-variant-numeric:tabular-nums;
  margin-top:1px;
}
.item-row.done .points-chip{ background:var(--success-soft); color:var(--success); }

.day-complete-banner{
  margin-top:14px;
  background:var(--success-soft);
  color:var(--success);
  border-radius:var(--radius-md);
  padding:12px 14px;
  font-size:13px; font-weight:700;
  text-align:center;
}

.resource-row{
  display:block;
  margin-top:18px;
  padding:13px 14px;
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--radius-md);
  font-size:13px; font-weight:600;
  color:var(--brand);
  text-decoration:none;
}

.principles-card{
  margin-top:22px;
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--radius-lg);
  padding:16px 18px;
}
.principles-card h3{ margin:0 0 10px; font-size:14px; font-weight:700; }
.principles-card ul{ margin:0; padding-left:16px; }
.principles-card li{ font-size:12.5px; color:var(--text-muted); line-height:1.6; margin-bottom:5px; }

.nutri-card-group{ margin-top:14px; }
.nutri-item{
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--radius-md);
  padding:12px 14px;
  margin-bottom:8px;
}
.nutri-item .tag{
  font-size:10.5px; font-weight:700; letter-spacing:0.06em; text-transform:uppercase;
  color:var(--brand); margin-bottom:4px;
}
.nutri-item p{ margin:0; font-size:12.5px; color:var(--text-muted); line-height:1.55; }

.app-footer{
  text-align:center;
  padding:26px 24px 4px;
  font-size:11px;
  color:var(--text-faint);
  line-height:1.5;
}

/* ============================================================
   RESPONSIVE — small iPhones (SE etc.)
   ============================================================ */
@media (max-width:360px){
  .stats-grid{ grid-template-columns:1fr; }
  .ring-card{ width:100%; flex-direction:row; justify-content:flex-start; gap:14px; }
  .ring{ margin-left:2px; }
}

/* ============================================================
   NETWORK STATUS
   ============================================================ */
.net-status{
  margin:10px 18px 0;
  background:var(--gold-soft);
  color:var(--gold);
  border-radius:var(--radius-sm);
  padding:8px 14px;
  font-size:12.5px;
  font-weight:600;
  text-align:center;
}

/* ============================================================
   SUBMIT BUTTON
   ============================================================ */
.submit-btn{
  display:block;
  width:100%;
  margin:20px 0 4px;
  padding:15px;
  border-radius:var(--radius-md);
  border:none;
  font-family:inherit;
  font-size:15px;
  font-weight:700;
  letter-spacing:-0.01em;
  cursor:pointer;
  transition:background .15s, opacity .15s, transform .1s;
  background:var(--surface-2);
  color:var(--text-faint);
}
.submit-btn.pending{
  background:var(--brand);
  color:var(--on-brand);
}
@media (prefers-color-scheme:dark){
  .submit-btn.pending{ color:#fff; }
}
.submit-btn.pending:active{ transform:scale(0.97); }
.submit-btn:disabled{ cursor:default; }

/* ============================================================
   DRAFT INDICATOR (chấm tím trên chip ngày chưa submit)
   ============================================================ */
.indicator.draft{
  background:var(--gold);
}

/* ============================================================
   NET STATUS — ghi đè màu theo type
   ============================================================ */
.net-status[data-type="ok"]     { background:var(--success-soft); color:var(--success); }
.net-status[data-type="warn"]   { background:var(--gold-soft);    color:var(--gold);    }
.net-status[data-type="syncing"]{ background:var(--brand-soft);   color:var(--brand);   }

/* ============================================================
   UNSAVED TOAST
   ============================================================ */
.unsaved-toast{
  margin:0 12px 10px;
  background:var(--surface);
  border:1.5px solid var(--gold);
  border-radius:var(--radius-md);
  padding:12px 14px;
  animation:slideIn .22s ease;
}
@keyframes slideIn{
  from{ opacity:0; transform:translateY(-8px); }
  to  { opacity:1; transform:none; }
}
.toast-msg{
  font-size:13.5px; font-weight:600; color:var(--text);
  margin-bottom:10px;
}
.toast-msg strong{ color:var(--gold); }
.toast-actions{ display:flex; gap:8px; }
.toast-btn{
  flex:1; padding:10px 8px;
  border-radius:var(--radius-sm);
  border:none; font-family:inherit;
  font-size:13px; font-weight:700;
  cursor:pointer;
}
.toast-submit{
  background:var(--brand); color:var(--on-brand);
}
@media (prefers-color-scheme:dark){
  .toast-submit{ color:#fff; }
}
.toast-skip{
  background:var(--surface-2); color:var(--text-muted);
}