.date-control input { width: 145px; min-height: 42px; padding: .55rem .7rem; color: var(--text); background: var(--surface); border: 1px solid var(--border); border-radius: 11px; }
.avatar { width: 42px; height: 42px; border: 1px solid #31528a; border-radius: 13px; color: #dbeafe; background: #1c3152; font-weight: 800; }
.preview-pill, .subtle-tag { display: inline-flex; align-items: center; gap: .5rem; border: 1px solid var(--border); border-radius: 999px; padding: .45rem .7rem; color: var(--muted); background: #121a26; font-size: .7rem; white-space: nowrap; }
.metric-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; }
.metric-card, .panel { min-width: 0; border: 1px solid var(--border); border-radius: var(--radius); background: var(--card); box-shadow: var(--shadow); }
.metric-card { position: relative; overflow: hidden; padding: 1.15rem; animation: rise-in .45s both; }
.metric-card::before { position: absolute; inset: 0 auto 0 0; width: 3px; background: var(--metric-accent); content: ""; }
.metric-card.blue { --metric-accent: var(--blue); }
.metric-card.cyan { --metric-accent: var(--cyan); }
.metric-card.violet { --metric-accent: var(--violet); }
.metric-card.green { --metric-accent: var(--green); }
.metric-heading { display: flex; justify-content: space-between; gap: .6rem; color: var(--muted); font-size: .78rem; }
.metric-icon { color: var(--metric-accent); font-size: 1.15rem; }
.metric-value { margin: 1.15rem 0 .35rem; font-size: clamp(1.15rem, 1.8vw, 1.6rem); font-weight: 760; letter-spacing: -.04em; }
.metric-foot { margin: 0; color: #8290a4; font-size: .7rem; }
.panel { padding: 1.25rem; }
.panel-heading { display: flex; align-items: center; justify-content: space-between; gap: .7rem; margin-bottom: 1.25rem; }
.button { display: inline-flex; min-height: 43px; align-items: center; justify-content: center; gap: .45rem; padding: .65rem .9rem; border: 1px solid transparent; border-radius: 11px; font-weight: 700; cursor: pointer; transition: background .18s, border-color .18s, transform .18s, box-shadow .18s; }
.button:active { transform: translateY(1px) scale(.99); }
.button-primary { color: white; background: var(--blue); box-shadow: 0 6px 20px #3b82f626; }
.button-primary:hover { background: #5594ff; box-shadow: 0 7px 24px #3b82f640; }
.button-secondary { color: #dce7f8; background: #202b3b; border-color: #35445a; }
.button-secondary:hover { background: #2a394d; border-color: #4b607e; }
.button:disabled { opacity: .45; cursor: not-allowed; box-shadow: none; }
.empty-state { display: grid; justify-items: center; padding: 1.5rem .6rem 1.3rem; color: var(--muted); text-align: center; }
.empty-state strong { margin-top: .6rem; color: var(--text); font-size: .86rem; }
.empty-state p { margin: .35rem 0 0; font-size: .76rem; }
.empty-icon { display: grid; width: 42px; height: 42px; place-items: center; border: 1px solid #315044; border-radius: 14px; color: var(--green); background: #153027; font-size: 1.25rem; }
.panel-note { margin: 1rem 0 0; color: #8491a4; font-size: .72rem; }
.subject-row { display: grid; grid-template-columns: 9px 1fr auto; align-items: center; gap: .7rem; padding: .8rem 0; border-bottom: 1px solid #283343; }
.subject-row:last-of-type { border-bottom: 0; }
.subject-state { color: #8592a5; font-size: .7rem; }
.subject-dot { width: 8px; height: 8px; border-radius: 50%; }
.biology { background: var(--green); }.chemistry { background: var(--blue); }.physics { background: var(--cyan); }.mathematics { background: var(--violet); }
.quick-actions { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: .65rem; }
.toast { position: fixed; right: 1rem; bottom: 1rem; z-index: 9999; max-width: min(420px, calc(100vw - 2rem)); padding: .95rem 1.1rem; border: 1px solid #60a5fa; border-left: 5px solid #60a5fa; border-radius: 14px; background: #102a46; color: #f8fafc; font-weight: 700; line-height: 1.45; box-shadow: 0 16px 42px #0009; opacity: 0; pointer-events: none; transform: translateY(10px); transition: opacity .2s, transform .2s; }
.toast.show { opacity: 1; transform: translateY(0); }
.toast.toast-success { background: #103b2a; border-color: #4ade80; border-left-color: #4ade80; color: #f0fdf4; }
.toast.toast-error { background: #481b22; border-color: #fb7185; border-left-color: #fb7185; color: #fff1f2; }
.toast.toast-info { background: #102a46; border-color: #60a5fa; border-left-color: #60a5fa; color: #eff6ff; }
@media (max-width: 600px) { .toast { right: .75rem; bottom: calc(5.5rem + env(safe-area-inset-bottom)); max-width: calc(100vw - 1.5rem); } }

/* Stage 2: authentication gate */
.auth-gate { min-height: 100vh; display: grid; place-items: center; padding: 1.25rem; background: radial-gradient(ellipse at 50% 0%, #152644 0%, var(--bg) 54%); }
.auth-gate[hidden], .app-shell[hidden], [hidden] { display: none !important; }
.auth-card { width: min(100%, 430px); padding: clamp(1.3rem, 5vw, 2.2rem); border: 1px solid var(--border); border-radius: 22px; background: #121a26; box-shadow: 0 24px 80px #0006; animation: rise-in .35s both; }
.auth-brand { padding: 0 0 2rem; }
.auth-card h1 { margin: .35rem 0 .55rem; }
.auth-card > .muted { margin-bottom: 1.5rem; font-size: .88rem; }
.auth-form { display: grid; gap: 1rem; }
.form-field { display: grid; gap: .45rem; color: #dce5f2; font-size: .78rem; font-weight: 650; }
.form-field input { width: 100%; min-height: 46px; padding: .75rem .85rem; border: 1px solid #35445a; border-radius: 11px; background: #0c121b; color: var(--text); font-weight: 450; }
.form-field input::placeholder { color: #66758b; }
.auth-submit { width: 100%; min-height: 47px; margin-top: .2rem; }
.auth-status { min-height: 1.2rem; margin: .85rem 0 .35rem; color: var(--muted); font-size: .77rem; overflow-wrap: anywhere; }
.auth-status[data-kind="success"] { color: var(--green); }
.auth-status[data-kind="error"] { color: var(--red); }
.auth-status[data-kind="warning"] { color: var(--amber); }
.auth-links { display: flex; justify-content: space-between; flex-wrap: wrap; gap: .7rem; }
.text-button { padding: .25rem 0; border: 0; color: #7eb2ff; background: transparent; font-size: .76rem; cursor: pointer; }
.text-button:hover { color: var(--cyan); text-decoration: underline; }
.text-button:disabled { opacity: .5; cursor: not-allowed; }
.auth-security { display: flex; align-items: center; gap: .5rem; margin: 1.5rem 0 0; padding-top: 1rem; border-top: 1px solid #283343; color: #8491a4; font-size: .68rem; }
.auth-security .status-dot { background: var(--green); }
.account-email { max-width: 180px; overflow: hidden; color: var(--muted); font-size: .72rem; text-overflow: ellipsis; white-space: nowrap; }
.sign-out-button { min-height: 38px; padding: .45rem .65rem; font-size: .75rem; }

/* Stage 1 functional trackers */
.feature-view { margin: 1.1rem 0 1.5rem; animation: rise-in .25s both; }
.feature-view[hidden] { display: none !important; }
.feature-heading { display:flex; align-items:center; justify-content:space-between; gap:1rem; margin: .8rem 0 1rem; }
.feature-heading h2 { margin:.2rem 0 0; font-size:clamp(1.35rem,3vw,2rem); letter-spacing:-.04em; }
.feature-intro { max-width:760px; margin:0 0 1rem; color:var(--muted); font-size:.86rem; line-height:1.6; }
.record-form { margin:1rem 0; padding:1.1rem; border:1px solid var(--border); border-radius:var(--radius); background:var(--card); box-shadow:var(--shadow); }
.form-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:.9rem; margin-bottom:1rem; }
.form-field { display:grid; gap:.45rem; min-width:0; color:#dce5f2; font-size:.78rem; font-weight:650; }
.form-field input,.form-field select,.form-field textarea { width:100%; min-height:44px; padding:.7rem .8rem; border:1px solid #35445a; border-radius:10px; color:var(--text); background:#0c121b; font:inherit; font-weight:450; }
.form-field textarea { resize:vertical; min-height:100px; }
.form-field input:focus,.form-field select:focus,.form-field textarea:focus { outline:2px solid #3b82f6; outline-offset:1px; }
.record-list-panel { margin-top:1rem; }
.record-list { display:grid; gap:.6rem; }
.record-item { display:flex; align-items:flex-start; justify-content:space-between; gap:.75rem; padding:.85rem; border:1px solid #283343; border-radius:12px; background:#111a27; }
.record-item.is-done { opacity:.72; }
.record-item.is-done .record-title-row strong { text-decoration:line-through; }
.record-main { min-width:0; flex:1; }
.record-title-row { display:flex; align-items:center; gap:.55rem; flex-wrap:wrap; color:var(--text); font-size:.88rem; overflow-wrap:anywhere; }
.record-item p { margin:.35rem 0 0; color:var(--muted); font-size:.75rem; line-height:1.5; overflow-wrap:anywhere; }
.record-item small { display:block; margin-top:.35rem; color:var(--muted); }
.delete-button,.task-toggle { border:1px solid #35445a; border-radius:9px; color:#dce7f8; background:#202b3b; cursor:pointer; }
.delete-button { min-height:34px; padding:.35rem .55rem; font-size:.72rem; flex-shrink:0; }
.delete-button:hover { border-color:#ef4444; color:#fecaca; }
.task-toggle { width:30px; height:30px; flex-shrink:0; }
.analytics-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:.75rem; margin:1rem 0; }
.analytics-number { display:block; margin:.55rem 0; font-size:1.8rem; letter-spacing:-.04em; }
.task-preview-list { width:100%; display:grid; gap:.5rem; text-align:left; }
.task-preview { display:flex; gap:.6rem; align-items:center; width:100%; color:var(--text); font-size:.78rem; }
.task-preview.is-done { color:var(--muted); text-decoration:line-through; }
@media(max-width:760px) { .form-grid { grid-template-columns:minmax(0,1fr); } .feature-heading { align-items:flex-start; } .feature-heading .button { min-height:38px; padding:.5rem .65rem; font-size:.72rem; } .record-form { padding:.9rem; } .analytics-grid { gap:.6rem; } .analytics-grid .panel { padding:.85rem; } .analytics-number { font-size:1.45rem; } }

/* Stage 1B tracker refinement: clean dedicated pages and modal entry forms */
.tracker-page { max-width: 1120px; margin: 1.25rem auto 2rem; animation: rise-in .2s ease both; }
.tracker-heading { display:flex; align-items:flex-start; justify-content:space-between; gap:1.25rem; margin: .4rem 0 1.5rem; padding:1.4rem; border:1px solid #29374b; border-radius:18px; background:linear-gradient(135deg,#182638,#141d2b 70%); box-shadow:0 14px 35px #0002; }
.tracker-heading h2 { margin:.25rem 0 .45rem; font-size:clamp(1.5rem,3vw,2.2rem); letter-spacing:-.045em; }
.tracker-subtitle { max-width:640px; margin:0; color:var(--muted); font-size:.86rem; line-height:1.65; }
.tracker-actions { display:flex; align-items:center; gap:.6rem; flex-shrink:0; }
.record-list-panel { padding:1.15rem; }
.record-list-heading { display:flex; justify-content:space-between; align-items:center; gap:1rem; margin-bottom:1rem; }
.record-list-heading h3 { margin:.2rem 0 0; font-size:1.15rem; }
.record-list { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:.75rem; }
.record-item { min-height:100px; padding:1rem; border-color:#2b3a4f; background:linear-gradient(145deg,#172232,#121b28); }
.record-title-row strong { font-size:.9rem; }
.record-item p { font-size:.78rem; }
.delete-button { min-height:36px; padding:.45rem .75rem; color:#fecaca; border:1px solid #7f1d1d; background:#451a20; font-weight:700; }
.delete-button:hover { color:#fff; border-color:#ef4444; background:#b91c1c; }
.compact-empty { min-height:170px; padding:1.6rem; border:1px dashed #35445a; border-radius:14px; background:#111a27; }
.record-modal-backdrop[hidden] { display:none !important; }
.record-modal-backdrop { position:fixed; inset:0; z-index:1000; display:grid; place-items:center; padding:1.2rem; background:rgba(3,7,14,.78); backdrop-filter:blur(9px); animation:modal-fade .16s ease both; }
.record-modal { width:min(620px,100%); max-height:min(88dvh,850px); overflow:auto; padding:1.35rem; border:1px solid #354660; border-radius:20px; background:linear-gradient(155deg,#192638,#101722 75%); box-shadow:0 30px 100px #0009; animation:modal-rise .2s ease both; }
.modal-heading { display:flex; align-items:flex-start; justify-content:space-between; gap:1rem; padding-bottom:1rem; margin-bottom:1.1rem; border-bottom:1px solid #2a3749; }
.modal-heading h2 { margin:.25rem 0 0; font-size:1.45rem; letter-spacing:-.035em; }
.modal-close { display:grid; place-items:center; width:40px; height:40px; flex-shrink:0; border:1px solid #3a485b; border-radius:12px; color:#e5edf9; background:#202d40; font-size:1.6rem; cursor:pointer; }
.modal-close:hover { background:#34445b; }
.record-modal .form-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:1rem; margin-bottom:1.2rem; }
.record-modal .form-field { gap:.5rem; font-size:.82rem; }
.record-modal .form-field input,.record-modal .form-field select,.record-modal .form-field textarea { min-height:48px; background:#0a111b; border-color:#3b4c63; }
.record-modal .form-field:has(textarea) { grid-column:1/-1; }
.modal-actions { display:flex; justify-content:flex-end; gap:.65rem; padding-top:1rem; border-top:1px solid #2a3749; }
.nav-item[aria-current="page"] { color:#fff; background:#1b2b45; border-color:#2c4c78; box-shadow:inset 3px 0 var(--blue); }
.nav-item[aria-current="page"] span { color:#60a5fa; }
.mobile-nav-item[aria-current="page"] { color:#fff; background:#1b2b45; }
body.modal-open { overflow:hidden; }
@keyframes modal-fade { from { opacity:0; } to { opacity:1; } }
@keyframes modal-rise { from { opacity:0; transform:translateY(10px) scale(.99); } to { opacity:1; transform:translateY(0) scale(1); } }
@media(max-width:760px) {
 .tracker-heading { flex-direction:column; padding:1rem; }
 .tracker-actions { width:100%; }
 .tracker-actions .button { flex:1; }
 .record-list { grid-template-columns:minmax(0,1fr); }
 .record-modal { padding:1rem; border-radius:17px; }
 .record-modal .form-grid { grid-template-columns:minmax(0,1fr); }
 .record-modal .form-field:has(textarea) { grid-column:auto; }
 .modal-actions .button { flex:1; }
}


/* Stage 1B clean-fix: tracker pages replace the overview instead of appearing below it. */
body.tracker-open .main-content > .welcome-row,
body.tracker-open .main-content > .metric-grid,
body.tracker-open .main-content > .content-grid,
body.tracker-open .main-content > .page-footer {
  display: none !important;
}
body.tracker-open .main-content > #feature-view {
  display: block !important;
  width: 100%;
  max-width: 1120px;
  margin: 1.25rem auto 2rem;
}
body.tracker-open .main-content > #feature-view[hidden] {
  display: none !important;
}
#feature-view .tracker-page { width: 100%; }
#feature-view .tracker-heading {
  align-items: center;
  padding: clamp(1.1rem, 2.5vw, 1.8rem);
  margin-bottom: 1.1rem;
  background: linear-gradient(135deg, #1b2b42 0%, #151d2b 68%, #192538 100%);
  border-color: #344660;
}
#feature-view .record-list-panel {
  padding: clamp(1rem, 2vw, 1.4rem);
  border-color: #2e4058;
  background: linear-gradient(150deg, #172333, #121a27);
}
#feature-view .record-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 330px), 1fr));
  gap: .85rem;
}
#feature-view .record-item {
  min-width: 0;
  border: 1px solid #34445a;
  border-radius: 14px;
  background: linear-gradient(145deg, #1b293b, #131c29);
  box-shadow: 0 7px 18px #0002;
}
#feature-view .delete-button {
  color: #fff !important;
  background: #b91c1c !important;
  border: 1px solid #ef4444 !important;
  border-radius: 9px;
  font-weight: 800 !important;
}
#feature-view .delete-button:hover {
  background: #dc2626 !important;
  border-color: #fca5a5 !important;
}
#record-modal-backdrop, .record-modal-backdrop {
  z-index: 9999 !important;
}
.record-modal-backdrop:not([hidden]) {
  position: fixed !important;
  inset: 0 !important;
  display: grid !important;
  place-items: center !important;
  padding: 1rem !important;
  background: rgba(3, 7, 14, .82) !important;
  backdrop-filter: blur(8px);
}
.record-modal {
  width: min(620px, 100%) !important;
  max-height: min(88vh, 850px) !important;
  overflow: auto !important;
  border: 1px solid #435a78 !important;
  background: linear-gradient(155deg, #1b2a3f, #101722 78%) !important;
  box-shadow: 0 30px 100px #000b !important;
}
@media (max-width: 760px) {
  body.tracker-open .main-content > #feature-view { margin-top: .7rem; }
  #feature-view .tracker-heading { align-items: stretch; }
  #feature-view .tracker-actions { flex-wrap: wrap; }
  #feature-view .tracker-actions .button { flex: 1 1 auto; }
}

/* Strong final UI polish: clearly separated, colourful record cards and destructive actions. */
#feature-view .record-list { display:grid !important; grid-template-columns:repeat(auto-fit,minmax(min(100%,320px),1fr)) !important; gap:1rem !important; margin-top:1rem; }
#feature-view .record-item { display:flex !important; align-items:flex-start; gap:1rem; padding:1.1rem !important; border:1px solid #3a4d67 !important; border-radius:16px !important; background:linear-gradient(140deg,#1b2b40,#131d2b) !important; box-shadow:0 10px 25px #0003; }
#feature-view .record-main { flex:1; min-width:0; }
#feature-view .record-title-row strong { font-size:.98rem; color:#f5f8ff; }
#feature-view .record-item p { margin-top:.55rem; font-size:.84rem; line-height:1.6; color:#b9c7da; }
#feature-view .delete-button { background:#c62828 !important; color:#fff !important; border:1px solid #ff6464 !important; border-radius:10px !important; padding:.6rem .9rem !important; min-height:40px; font-weight:800 !important; letter-spacing:.01em; box-shadow:0 4px 12px #b91c1c40; }
#feature-view .delete-button:hover { background:#ef4444 !important; border-color:#fecaca !important; transform:translateY(-1px); }
#record-modal.record-modal-backdrop { display:none !important; }
#record-modal.record-modal-backdrop:not([hidden]) { display:grid !important; position:fixed !important; inset:0 !important; z-index:99999 !important; place-items:center !important; padding:1rem !important; background:rgba(3,7,14,.84) !important; backdrop-filter:blur(8px); }
#record-modal .record-modal { width:min(620px,100%) !important; padding:clamp(1.1rem,3vw,1.7rem) !important; border:1px solid #526b8c !important; border-radius:20px !important; background:linear-gradient(150deg,#1e3048,#101722 80%) !important; box-shadow:0 30px 100px #000b !important; }


/* FINAL Stage 1B layout contract: only the selected tracker is visible. */
.main-content.tracker-mode > :not(.topbar):not(#feature-view) {
  display: none !important;
}
.main-content.tracker-mode > #feature-view {
  display: block !important;
  width: 100% !important;
  max-width: 1120px !important;
  margin: 1.25rem auto 2rem !important;
  grid-column: 1 / -1 !important;
}
.main-content.tracker-mode > #feature-view[hidden] { display: none !important; }
#feature-view .record-list {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)) !important;
  gap: 1rem !important;
  margin-top: 1rem !important;
}
#feature-view .record-item {
  display: flex !important;
  align-items: flex-start !important;
  gap: 1rem !important;
  min-width: 0 !important;
  padding: 1.1rem !important;
  border: 1px solid #3a4d67 !important;
  border-radius: 16px !important;
  background: linear-gradient(140deg, #1b2b40, #131d2b) !important;
  box-shadow: 0 10px 25px #0003 !important;
}
#feature-view .record-main { flex: 1 1 auto !important; min-width: 0 !important; }
#feature-view .record-title-row strong { color: #f5f8ff !important; font-size: 1rem !important; }
#feature-view .record-item p { margin-top: .55rem !important; color: #b9c7da !important; font-size: .85rem !important; line-height: 1.6 !important; }
#feature-view .delete-button {
  flex: 0 0 auto !important;
  min-height: 40px !important;
  padding: .6rem .9rem !important;
  border: 1px solid #ff6464 !important;
  border-radius: 10px !important;
  background: #c62828 !important;
  color: #fff !important;
  font-weight: 800 !important;
  letter-spacing: .01em !important;
  box-shadow: 0 4px 12px #b91c1c40 !important;
}
#feature-view .delete-button:hover { background: #ef4444 !important; border-color: #fecaca !important; transform: translateY(-1px); }
/* Modal: hidden by default, fixed overlay only when opened. */
#record-modal[hidden] { display: none !important; }
#record-modal:not([hidden]) {
  position: fixed !important;
  inset: 0 !important;
  z-index: 99999 !important;
  display: grid !important;
  place-items: center !important;
  padding: 1rem !important;
  background: rgba(3, 7, 14, .84) !important;
  backdrop-filter: blur(8px) !important;
}
#record-modal:not([hidden]) > .record-modal {
  width: min(620px, 100%) !important;
  max-height: min(88vh, 850px) !important;
  overflow: auto !important;
  padding: clamp(1.1rem, 3vw, 1.7rem) !important;
  border: 1px solid #526b8c !important;
  border-radius: 20px !important;
  background: linear-gradient(150deg, #1e3048, #101722 80%) !important;
  box-shadow: 0 30px 100px #000b !important;
}
#record-modal .form-grid { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 1rem !important; }
#record-modal .form-field input, #record-modal .form-field select, #record-modal .form-field textarea {
  width: 100% !important; min-height: 46px !important; padding: .75rem .85rem !important;
  border: 1px solid #435a78 !important; border-radius: 10px !important;
  background: #0a111b !important; color: #f5f8ff !important; box-sizing: border-box !important;
}
#record-modal .form-field:has(textarea) { grid-column: 1 / -1 !important; }
@media (max-width: 760px) {
  #feature-view .record-list { grid-template-columns: minmax(0, 1fr) !important; }
  #record-modal .form-grid { grid-template-columns: minmax(0, 1fr) !important; }
  #record-modal .form-field:has(textarea) { grid-column: auto !important; }
  #record-modal .modal-actions .button { flex: 1 1 auto; }
}


/* Stage 1B personal command-centre upgrades */
[hidden] { display:none !important; }
.live-clock { font-variant-numeric:tabular-nums; color:var(--text-muted,#a9b5c8); font-size:.9rem; padding:.35rem .5rem; border:1px solid #2b394d; border-radius:9px; }
.limit-under { color:#34d399 !important; }
.limit-over { color:#fb7185 !important; }
.limit-neutral { color:#cbd5e1 !important; }
.calorie-limit-settings { display:flex; align-items:end; gap:.8rem; flex-wrap:wrap; border-top:1px solid #2b394d; padding-top:1rem; margin-top:1rem; }
.calorie-limit-settings .form-field { min-width:210px; max-width:280px; }
.limit-status { padding:.55rem .8rem; border-radius:10px; font-weight:700; background:#202b3b; color:#cbd5e1; }
.limit-status.under { color:#6ee7b7; background:#063d32; }
.limit-status.over { color:#fda4af; background:#4c1721; }
.calorie-chart { display:grid; gap:1.15rem; margin:1.2rem 0; }
.calorie-bar-label { display:flex; justify-content:space-between; gap:1rem; color:#cbd5e1; font-size:.9rem; margin-bottom:.45rem; }
.calorie-bar-track { height:15px; overflow:hidden; background:#0b1220; border:1px solid #2d3b50; border-radius:99px; }
.calorie-bar { display:block; height:100%; border-radius:99px; transition:width .25s ease; }
.calorie-bar.intake { background:linear-gradient(90deg,#60a5fa,#818cf8); }
.calorie-bar.burned { background:linear-gradient(90deg,#34d399,#10b981); }
.login-screen { position:fixed; inset:0; z-index:100000; display:grid; place-items:center; padding:1.2rem; background:radial-gradient(ellipse at 20% 0%,#1e3a5f 0%,#0b1019 48%,#080b11 100%); }
.login-card { width:min(430px,100%); padding:clamp(1.4rem,4vw,2.4rem); text-align:center; border:1px solid #344761; border-radius:26px; background:linear-gradient(145deg,#182639,#0e1520); box-shadow:0 28px 90px #0008; }
.login-pfp { display:block; width:112px; height:112px; object-fit:cover; border-radius:50%; margin:0 auto 1.2rem; border:3px solid #60a5fa; background:linear-gradient(135deg,#263a55,#101722); box-shadow:0 0 0 7px #60a5fa20; }
.login-pfp.pfp-missing { visibility:visible; border:3px dashed #50627a; }
.login-card h1 { margin:.35rem 0 .6rem; font-size:2rem; letter-spacing:-.04em; }
.login-card form { display:grid; gap:1rem; text-align:left; margin-top:1.5rem; }
.login-submit { width:100%; min-height:48px; }
.login-note { margin-top:1.2rem; color:#8292a9; font-size:.75rem; line-height:1.5; }
.analytics-toolbar { display:flex; align-items:flex-end; justify-content:space-between; flex-wrap:wrap; gap:1rem; margin-bottom:1rem; }
.analytics-toolbar .form-field { min-width:230px; }
.analytics-summary { display:flex; flex-wrap:wrap; gap:.7rem; }
.analytics-summary > div { display:grid; gap:.35rem; padding:.75rem .9rem; border:1px solid #34445a; border-radius:12px; background:#101a28; }
.analytics-summary span { color:#9aabc1; font-size:.75rem; }
.analytics-summary strong { color:#e7eef9; font-size:1.05rem; }
.analytics-chart { margin:1rem 0; padding:1.15rem; }
.chart-title { display:flex; justify-content:space-between; align-items:flex-start; flex-wrap:wrap; gap:.75rem; margin-bottom:.8rem; }
.chart-title h3 { margin:.25rem 0; }
.chart-legend { display:flex; flex-wrap:wrap; gap:.7rem; }
.chart-legend-item { display:inline-flex; align-items:center; gap:.35rem; font-size:.74rem; color:#b9c7da; }
.chart-legend-item i { display:inline-block; width:9px; height:9px; border-radius:3px; }
.chart-svg-wrap { width:100%; overflow-x:auto; }
.chart-svg-wrap svg { display:block; width:100%; min-width:520px; height:auto; }
.record-actions { display:flex; flex-direction:column; gap:.5rem; align-items:stretch; }
.edit-button { color:#e0f2fe !important; border-color:#3b82f6 !important; background:#183452 !important; font-weight:700 !important; }
.status-toggle { border:1px solid #3b82f6; background:#173453; color:#bfdbfe; border-radius:9px; padding:.5rem .7rem; font-weight:750; cursor:pointer; margin-top:.65rem; }
.status-toggle.complete { border-color:#059669; background:#064e3b; color:#a7f3d0; }
.status-toggle.review { border-color:#d97706; background:#422006; color:#fde68a; }
.status-pill { font-size:.7rem; padding:.3rem .5rem; border-radius:99px; font-weight:800; }
.status-pill.complete { color:#a7f3d0; background:#064e3b; }
.status-pill.review { color:#fde68a; background:#422006; }
.record-timestamp { display:block; margin-top:.6rem; color:#8395ad; font-size:.74rem; }
.data-tools { display:flex; align-items:center; gap:.75rem; flex-wrap:wrap; margin-top:1rem; }
.data-tools h3, .data-tools p { flex-basis:100%; margin:0; }
@media(max-width:700px) {
  .live-clock { font-size:.75rem; padding:.25rem; }
  .calorie-limit-settings { align-items:stretch; }
  .calorie-limit-settings .form-field { max-width:none; width:100%; }
  .analytics-toolbar .form-field { min-width:0; width:100%; }
  .analytics-summary { width:100%; }
  .record-actions { flex-direction:row; flex-wrap:wrap; }
  .record-actions button { flex:1; }
}


/* Stage 1B bug-fix pass: clock, spacing, and visible analytics */
.live-clock { display:inline-flex !important; align-items:center; justify-content:center; min-width:4.6rem; min-height:2.4rem; white-space:nowrap; }
.calorie-limit-settings { gap:1.1rem 1.25rem !important; align-items:flex-end !important; }
.calorie-limit-settings .form-field { margin:0 .25rem .25rem 0 !important; }
.calorie-limit-settings #save-calorie-limit { margin:0 0 .25rem .25rem !important; min-height:44px; }
.calorie-limit-settings .limit-status { margin:0 0 .25rem .25rem; }
#feature-view .analytics-chart { display:block !important; visibility:visible !important; opacity:1 !important; min-height:250px; }
#feature-view .chart-svg-wrap { display:block !important; min-height:180px; }
#feature-view .chart-svg-wrap svg { display:block !important; min-height:180px; }
#feature-view .record-actions .edit-button { display:inline-flex !important; align-items:center; justify-content:center; }
#feature-view .record-actions .delete-button { display:inline-flex !important; align-items:center; justify-content:center; }
@media(max-width:700px) {
 .calorie-limit-settings #save-calorie-limit { margin-left:0 !important; }
 .calorie-limit-settings .limit-status { margin-left:0; }
}


/* Stage 1C reliability and layout pass */
.button-save-limit { color:#052e1b !important; background:#34d399 !important; border:1px solid #6ee7b7 !important; font-weight:850 !important; box-shadow:0 5px 18px #10b98130 !important; }
.button-save-limit:hover { background:#6ee7b7 !important; }
.calorie-limit-settings { display:grid !important; grid-template-columns:minmax(0,1fr) auto; align-items:end !important; gap:1rem 1.25rem !important; }
.calorie-limit-settings .form-field { width:100%; max-width:320px; min-width:0; margin:0 !important; }
.calorie-limit-settings #save-calorie-limit { margin:0 !important; align-self:end; }
.calorie-limit-settings .limit-status { grid-column:1 / -1; justify-self:start; margin:0 !important; }
#feature-view .record-actions { display:flex !important; flex-direction:column; align-items:stretch; gap:.5rem; flex:0 0 94px; min-width:94px; }
#feature-view .record-actions .edit-button, #feature-view .record-actions .delete-button { display:inline-flex !important; min-height:42px; width:100%; align-items:center; justify-content:center; visibility:visible !important; opacity:1 !important; }
#feature-view .analytics-chart { display:block !important; visibility:visible !important; opacity:1 !important; width:100%; min-height:260px; }
#feature-view .chart-svg-wrap { display:block !important; width:100%; min-height:180px; overflow-x:auto; }
#feature-view .chart-svg-wrap svg { display:block !important; width:100%; min-width:520px; height:auto; visibility:visible !important; }
#page-title { overflow-wrap:anywhere; }
@media(max-width:700px) {
 .calorie-limit-settings { grid-template-columns:minmax(0,1fr) !important; gap:.9rem !important; }
 .calorie-limit-settings .form-field { max-width:none; }
 .calorie-limit-settings #save-calorie-limit { width:100%; }
 .calorie-limit-settings .limit-status { grid-column:auto; }
 #feature-view .record-item { flex-wrap:wrap; }
 #feature-view .record-actions { flex:1 1 100%; min-width:0; flex-direction:row; }
 #feature-view .record-actions button { flex:1 1 0; }
}

/* Stage 1D polish: custom confirmations, password form, and calorie comparison colours */
.confirm-message { color: var(--text-secondary, #b9c7da); line-height: 1.65; margin: 1rem 0 1.4rem; }
.button-danger { background: #e5484d !important; color: #fff !important; border-color: #e5484d !important; }
#login-password { width: 100%; }
.login-note { text-align: left; }
.calorie-bar.intake { background: #f59e0b !important; }
.calorie-bar.burned { background: #34d399 !important; }
.chart-legend-item i { display:inline-block; width:9px; height:9px; border-radius:3px; margin-right:6px; }

/* Prominent event countdown badges */
.calendar-countdown { display:inline-flex; align-items:center; border:1px solid #365a49; border-radius:999px; padding:.22rem .55rem; color:#a7f3d0; background:rgba(34,197,94,.13); font-size:.68rem; font-weight:750; letter-spacing:.01em; white-space:nowrap; }
.calendar-countdown.today { color:#ffedd5; border-color:#9a5b23; background:rgba(249,115,22,.18); }
.calendar-countdown.past { color:#cbd5e1; border-color:#475569; background:rgba(100,116,139,.16); }

/* Stage 1D reliability fixes: make event countdowns impossible to miss. */
.calendar-countdown { display:inline-flex !important; align-items:center; justify-content:center; margin:.15rem 0; padding:.35rem .65rem !important; min-height:28px; color:#d1fae5 !important; background:#064e3b !important; border:1px solid #34d399 !important; border-radius:999px; font-size:.72rem !important; font-weight:850 !important; letter-spacing:.035em; white-space:nowrap; flex-shrink:0; }
.calendar-countdown.today { color:#fff7ed !important; background:#9a3412 !important; border-color:#fb923c !important; }
.calendar-countdown.past { color:#e2e8f0 !important; background:#334155 !important; border-color:#94a3b8 !important; }
#login-welcome-title { overflow-wrap:anywhere; }


/* Final-round login identity and live calendar countdown */
.login-pfp-wrap { width:112px; height:112px; position:relative; margin:0 auto 1.2rem; }
.login-pfp-wrap .login-pfp { width:112px; height:112px; margin:0; }
.login-pfp-fallback { width:112px; height:112px; border-radius:50%; display:grid; place-items:center; border:3px dashed #50627a; color:#dbeafe; font-size:1.65rem; font-weight:850; background:linear-gradient(135deg,#263a55,#101722); box-shadow:0 0 0 7px #60a5fa20; }
.login-pfp-fallback[hidden], .login-pfp-wrap img[hidden] { display:none !important; }
.login-card h1 { display:flex; flex-direction:column; align-items:center; gap:.12rem; line-height:1.18; }
.login-welcome-line { font-size:1.5rem; }
.login-name-line { font-size:1.22rem; color:#cbd5e1; font-weight:650; letter-spacing:-.02em; }
.calendar-live-countdown { display:inline-flex; align-items:center; margin:.35rem 0 .25rem; padding:.38rem .7rem; border-radius:9px; background:rgba(245,158,11,.14); border:1px solid rgba(245,158,11,.6); color:#fde68a; font-size:.9rem; font-weight:850; font-variant-numeric:tabular-nums; letter-spacing:.02em; }
.calendar-live-countdown.countdown-ended { color:#cbd5e1; background:rgba(100,116,139,.16); border-color:#64748b; }

/* Stage 1D final reliability fixes: respect hidden attributes and keep timer visible. */
[hidden] { display: none !important; }
.login-pfp[hidden], #login-name-field[hidden] { display: none !important; }
.calendar-live-countdown { display: inline-flex !important; visibility: visible !important; opacity: 1 !important; white-space: nowrap; }
.calendar-countdown { display: inline-flex !important; }
#login-welcome-title .login-welcome-line { display:block; }
#login-welcome-title .login-name-line { display:block; font-size:.78em; line-height:1.25; margin-top:.12em; }

/* Final login reliability and inline password error */
.login-screen[hidden], #app-shell[hidden] { display:none !important; }
.login-screen:not([hidden]) { display:grid !important; }
#login-welcome-title .login-welcome-line { display:block !important; margin-bottom:.12em; }
#login-welcome-title .login-name-line { display:block !important; font-size:.78em !important; line-height:1.25; margin-top:.12em; color:#cbd5e1; font-weight:650; }
.login-error { color:#fecaca; background:rgba(127,29,29,.3); border:1px solid #ef4444; border-radius:10px; padding:.7rem .8rem; margin:.2rem 0 0; font-size:.85rem; font-weight:750; text-align:center; }
.login-error[hidden] { display:none !important; }

/* Persistent inline login feedback: intentionally separate from dashboard toasts. */
.login-error { display:block; color:#fecaca; background:rgba(127,29,29,.34); border:1px solid #ef4444; border-radius:10px; padding:.75rem .85rem; margin:.15rem 0 0; font-size:.9rem; font-weight:800; text-align:center; line-height:1.4; }
.login-error[hidden] { display:none !important; }

/* Stage 2C usability polish: profile photo, running indicator, journal and overview studies */
.project-status-dot { background:#34d399 !important; box-shadow:0 0 12px #34d39966 !important; }
.avatar { display:inline-flex; align-items:center; justify-content:center; overflow:hidden; padding:0; border-radius:50%; flex:0 0 42px; }
.avatar img { display:block; width:100%; height:100%; object-fit:cover; border-radius:50%; }
.button-danger { color:#fff !important; background:#b91c1c !important; border-color:#ef4444 !important; box-shadow:0 6px 18px #ef444422 !important; }
.button-danger:hover { background:#dc2626 !important; }
.overview-studies-panel { min-width:0; }
.overview-study-list { display:grid; gap:.7rem; margin-bottom:1rem; }
.overview-study-item { display:flex; align-items:center; justify-content:space-between; gap:.8rem; padding:.8rem; border:1px solid #2b394d; border-radius:12px; background:#0e1724; }
.overview-study-copy { display:grid; gap:.25rem; min-width:0; }
.overview-study-copy strong { color:#edf4ff; overflow-wrap:anywhere; font-size:.88rem; }
.overview-study-copy span { color:#91a2ba; font-size:.74rem; }
.overview-study-item .status-toggle { flex:0 0 auto; margin:0; font-size:.72rem; }
.journal-form-intro { display:flex; align-items:center; gap:.9rem; grid-column:1/-1; padding:1rem; border:1px solid #354b67; border-radius:15px; background:linear-gradient(135deg,#182a40,#151d2b); }
.journal-form-icon { display:grid; place-items:center; width:42px; height:42px; flex:0 0 42px; border-radius:13px; color:#c4b5fd; background:#4c1d952b; font-size:1.3rem; }
.journal-form-intro strong { display:block; color:#eef4ff; }
.journal-form-intro p { margin:.25rem 0 0; color:#9aabc1; font-size:.78rem; line-height:1.5; }
#record-modal:has(.journal-form-intro) .record-modal { max-width:720px; }
#record-modal:has(.journal-form-intro) .form-field:has(textarea) { grid-column:1/-1 !important; }
#record-modal:has(.journal-form-intro) textarea { min-height:125px !important; resize:vertical; line-height:1.6; }
#record-modal:has(.journal-form-intro) .form-field input,
#record-modal:has(.journal-form-intro) .form-field select,
#record-modal:has(.journal-form-intro) .form-field textarea { border-color:#394e6b !important; background:#0c1420 !important; }
@media(max-width:700px) {
 .overview-study-item { align-items:flex-start; flex-direction:column; }
 .overview-study-item .status-toggle { width:100%; }
 .journal-form-intro { grid-column:auto; }
}


/* Corrected Stage 2C polish: final overrides and cache-busted deployment. */
.sidebar-footer { display:flex !important; align-items:center !important; gap:.6rem !important; color:#d1fae5 !important; font-weight:750 !important; }
.sidebar-footer .project-status-dot { display:inline-block !important; width:10px !important; height:10px !important; min-width:10px !important; border-radius:50% !important; background:#22c55e !important; box-shadow:0 0 0 4px rgba(34,197,94,.14),0 0 14px rgba(34,197,94,.65) !important; }
#profile-button.avatar { width:42px !important; height:42px !important; min-width:42px !important; padding:0 !important; overflow:hidden !important; border-radius:50% !important; border:1px solid #53657e !important; background:#172235 !important; display:inline-flex !important; align-items:center !important; justify-content:center !important; }
#profile-button.avatar img { width:100% !important; height:100% !important; display:block !important; object-fit:cover !important; border-radius:50% !important; }
#live-clock { font-variant-numeric:tabular-nums !important; white-space:nowrap !important; min-width:5.5em !important; }
.button-danger, #confirm-yes.button-danger { background:#b91c1c !important; color:#fff !important; border:1px solid #ef4444 !important; box-shadow:0 6px 18px rgba(239,68,68,.18) !important; }
.button-danger:hover, #confirm-yes.button-danger:hover { background:#dc2626 !important; }
.overview-studies-panel { display:flex; flex-direction:column; gap:.4rem; }
.overview-study-list { display:grid; gap:.7rem; margin-bottom:1rem; }
.overview-study-item { display:flex; align-items:center; justify-content:space-between; gap:.8rem; padding:.8rem; border:1px solid #2b394d; border-radius:12px; background:#0e1724; }
.overview-study-copy { display:grid; gap:.25rem; min-width:0; }
.overview-study-copy strong { overflow-wrap:anywhere; }
.journal-form-intro { display:flex; align-items:center; gap:.9rem; grid-column:1/-1; padding:1rem; border:1px solid #354b67; border-radius:15px; background:linear-gradient(135deg,#182a40,#151d2b); }
.journal-form-icon { display:grid; place-items:center; width:42px; height:42px; flex:0 0 42px; border-radius:13px; color:#c4b5fd; background:#4c1d952b; font-size:1.3rem; }
.journal-form-intro strong { display:block; color:#eef4ff; }
.journal-form-intro p { margin:.25rem 0 0; color:#9aabc1; font-size:.78rem; line-height:1.5; }
#record-modal:has(.journal-form-intro) .record-modal { max-width:720px; }
#record-modal:has(.journal-form-intro) .form-field:has(textarea) { grid-column:1/-1 !important; }
#record-modal:has(.journal-form-intro) textarea { min-height:125px !important; resize:vertical; line-height:1.6; }
@media(max-width:700px) { .overview-study-item { align-items:stretch; flex-direction:column; } .overview-study-item .status-toggle { width:100%; } }

/* Stage 2C interaction polish: subtle lift and glow on hover-capable devices. */
@media (hover: hover) and (pointer: fine) {
  .metric-card,
  .panel,
  .record-form,
  .record-list-panel,
  .overview-card,
  .overview-section,
  .study-card,
  .journal-card {
    transition: transform 180ms ease, box-shadow 180ms ease, border-color 180ms ease;
    will-change: transform;
  }

  .metric-card:hover,
  .panel:hover,
  .record-form:hover,
  .record-list-panel:hover,
  .overview-card:hover,
  .overview-section:hover,
  .study-card:hover,
  .journal-card:hover {
    transform: translateY(-3px);
    border-color: color-mix(in srgb, var(--blue, #60a5fa) 48%, var(--border, #334155));
    box-shadow: 0 10px 28px #0003, 0 0 0 1px #60a5fa18, 0 0 20px #60a5fa12;
  }

  .button, button, .nav-item, a.card-link {
    transition: transform 150ms ease, box-shadow 150ms ease, filter 150ms ease;
  }
  .button:hover, button:hover, .nav-item:hover, a.card-link:hover {
    filter: brightness(1.08);
  }
  .button:active, button:active, .nav-item:active, a.card-link:active {
    transform: translateY(1px) scale(.99);
  }
}

@media (prefers-reduced-motion: reduce) {
  .metric-card, .panel, .record-form, .record-list-panel,
  .overview-card, .overview-section, .study-card, .journal-card,
  .button, button, .nav-item, a.card-link {
    transition: none !important;
  }
}

/* Date-aware record forms */
.form-field-wrap { min-width: 0; }
.field-help { display: block; margin: .35rem 0 .15rem; color: var(--muted); font-size: .76rem; line-height: 1.5; }
.form-field-wrap .form-field { margin-bottom: 0; }

/* Stage 2C movement/exercise split and form polish */
.form-section-label { grid-column: 1 / -1; padding: .7rem .85rem; border: 1px solid #2e4560; border-radius: 11px; color: #93c5fd; background: linear-gradient(110deg, #1b2b42, #172333); font-size: .68rem; font-weight: 800; letter-spacing: .12em; }
.field-help { display: block; color: #93a5bc; font-size: .72rem; font-weight: 450; line-height: 1.5; }
.record-modal .form-grid { align-items: start; }
.record-modal .form-field > span:first-child { color: #e3ebf7; font-size: .79rem; font-weight: 700; }
.record-modal .form-field input:hover,.record-modal .form-field select:hover,.record-modal .form-field textarea:hover { border-color: #526984; }
.record-modal .form-field input:focus,.record-modal .form-field select:focus,.record-modal .form-field textarea:focus { border-color: #60a5fa; box-shadow: 0 0 0 3px #3b82f622; }
.record-modal .form-field input[type="date"],.record-modal .form-field input[type="time"],.record-modal .form-field input[type="number"] { font-variant-numeric: tabular-nums; }
.record-modal .form-field:has(textarea) { grid-column: 1 / -1; }
@media(max-width:760px) { .form-section-label { padding: .65rem .75rem; } .field-help { font-size: .7rem; } }