/* Site-wide visual polish (coach + trainee). Loaded last; uses the existing theme tokens. */
html{scroll-behavior:smooth}
body{line-height:1.7;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased}
::selection{background:#c45bdb55;color:var(--text)}
.stat-num,.workout-stat b{font-variant-numeric:tabular-nums}

/* Depth: cards get a soft top highlight and lift only when they are actually clickable */
.card{border:1px solid var(--line);background:var(--surface);box-shadow:inset 0 1px 0 #ffffff0d,0 8px 24px #0000002e}
.card[role="button"],.card[data-goto],a.card{transition:transform .18s,border-color .18s}
.card[role="button"]:hover,.card[data-goto]:hover,a.card:hover{transform:translateY(-2px);border-color:#c45bdb66}

/* Buttons: clear press + keyboard states */
.btn-primary{background:linear-gradient(135deg,var(--purple),var(--pink));box-shadow:0 6px 18px #8b4ac346;transition:transform .15s,box-shadow .15s,filter .15s}
.btn-primary:hover{filter:brightness(1.08);box-shadow:0 8px 22px #8b4ac36b}
.btn-primary:active{transform:translateY(1px) scale(.99)}
.btn-quiet{transition:background .15s,color .15s}
.btn-quiet:hover{background:#c45bdb1c;color:var(--text)}
button:focus-visible,a:focus-visible,[tabindex]:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:none;box-shadow:var(--focus-ring);border-color:var(--pink)}
button:disabled{opacity:.55;cursor:not-allowed}

/* Forms */
input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file]):not([type=color]):not([type=button]):not([type=submit]),select,textarea{border:1px solid var(--line);border-radius:12px;background:var(--panel2);color:var(--text);transition:border-color .15s,box-shadow .15s}
input::placeholder,textarea::placeholder{color:var(--muted);opacity:.7}
input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file]):not([type=color]):not([type=button]):not([type=submit]):hover,select:hover,textarea:hover{border-color:#5a5570}

/* Top bar: stays readable over scrolling content.
   backdrop-filter turns .top into its own stacking context, so the account menu
   (z-index:25) was trapped inside it and painted UNDER any later positioned
   card/hero. Give the header an explicit layer above page content (below modals
   and overlays), and lift it a bit more while the account menu is open. */
.top{position:relative;z-index:15;backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}
.top:has(.account-menu:not([hidden])){z-index:35}

/* Empty states read as an invitation, not an error */
.notice{color:var(--muted);line-height:1.8}

/* Scrollbars */
*{scrollbar-width:thin;scrollbar-color:#4a4560 transparent}
::-webkit-scrollbar{width:8px;height:8px}
::-webkit-scrollbar-thumb{background:#4a4560;border-radius:8px}

@media (max-width:760px){.card{box-shadow:none}.view>.headrow .title{font-size:22px}}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important}}

/* ===== Light theme: "Pearl & Violet" — cool pearl base, deep violet to magenta energy, one sun-amber accent ===== */
body.theme-light{
  --bg:#f3f4f9;--panel:#ffffff;--panel2:#eef0f8;--line:#dfe2ee;
  --text:#1f1b33;--muted:#64627d;
  --purple:#5b3cc4;--pink:#c2308f;--gold:#e89a2b;--green:#14966f;
  --surface:#ffffff;--surface-raised:#fbfbff;--focus-ring:0 0 0 3px #5b3cc433;
  background:radial-gradient(ellipse at 88% 0,#5b3cc417,transparent 42%),radial-gradient(ellipse at 6% 92%,#c2308f10,transparent 38%),#f3f4f9;
}
body.theme-light .card{box-shadow:inset 0 1px 0 #fff,0 1px 2px #1f1b330a,0 12px 32px #3b2f7a12}
body.theme-light .side{background:#fff;box-shadow:0 12px 40px #3b2f7a14}
body.theme-light .nav button{color:#4a4763}
body.theme-light .nav button:hover{background:#5b3cc410;color:var(--text)}
body.theme-light .nav button.active{background:#ece8fb;color:#4a2fb0;border-color:#d9d2f6}
body.theme-light .nav button.active::before{background:linear-gradient(var(--purple),var(--pink))}
body.theme-light .btn-primary,body.theme-light .desk-actions button:first-child{background:linear-gradient(135deg,#5b3cc4,#c2308f);color:#fff;box-shadow:0 8px 22px #5b3cc435}
body.theme-light .logo,body.theme-light .avatar{background:linear-gradient(135deg,#5b3cc4,#8a3fc0)}
body.theme-light .desk-actions button:not(:first-child){background:#fff;color:#3a3555}
body.theme-light .desk-actions button:not(:first-child):hover{background:#ece8fb;border-color:#b9aaf0}
body.theme-light #dashboard .grid2>.card:has(#schedulePreview){border-top-color:var(--gold)}
body.theme-light input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file]):not([type=color]):not([type=button]):not([type=submit]),body.theme-light select,body.theme-light textarea{background:#fff;border-color:#d6d9e8}
body.theme-light input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file]):not([type=color]):not([type=button]):not([type=submit]):hover,body.theme-light select:hover,body.theme-light textarea:hover{border-color:#a99ae6}
body.theme-light .btn-quiet:hover{background:#5b3cc412;color:#4a2fb0}
body.theme-light .top{background:#f3f4f9b8}
body.theme-light ::selection{background:#5b3cc433}

/* ===== Mobile & touch ===== */
*{-webkit-tap-highlight-color:transparent}
button,a,select,label,[role="button"]{touch-action:manipulation}
img,video,canvas,svg{max-width:100%}
.main{min-width:0}
.title,.subtitle,.notice,.card h3{overflow-wrap:anywhere}
@media (hover:none){.card[role="button"]:hover,.card[data-goto]:hover,a.card:hover{transform:none}}
@media (max-width:760px){
  /* 16px fields stop iOS from zooming on focus; 44px targets are easy to hit with a thumb */
  input,select,textarea{font-size:16px}
  .btn-primary,.btn-quiet,.icon-btn,.nav button,.app-bottom-nav button{min-height:44px}
  .icon-btn{min-width:44px}
  .headrow{flex-wrap:wrap;gap:12px}
  .headrow>.btn-primary{width:100%}
  .form{grid-template-columns:1fr}
  .form .field.full{grid-column:auto}
  .side{height:100dvh}
  .card{border-radius:18px}
}
@media (max-width:380px){
  .view>.headrow .title{font-size:20px}
  .card{padding-inline:14px}
  .desk-actions button{padding:9px 13px;font-size:13px}
}