/* Patient profile + PIN screen — "Oxblood Atelier" (build spec v13, 9 Oct 2026;
   prototype profile-luxury_v3.html). Own layout (views/portal/layout.ejs): no
   site header, nav or site stylesheets, so this file is the whole look. Light mode only.
   Premium cues: a silk-soft aurora, paper grain, hairlines instead of puffy
   shadows, small radii, one dark oxblood card, champagne-gold details, 3D depth
   (lit top edges, layered shadows, buttons that press down onto their edge),
   Bricolage Grotesque for display type with tight tracking, Inter for text,
   tabular numerals, and slow ease-out motion (no bounce, no pulsing). */
:root{
  --bg:#F3ECE8;--a1:#E9CFC6;--a2:#DFC0C4;--a3:#DCD0D8;--a4:#EEDFD2;
  --ink:#1C1013;--ink2:#3D2B2F;--mute:#5E4C50;--hair:rgba(22,17,15,.12);--hair2:rgba(22,17,15,.07);
  --surface:rgba(255,251,250,.76);--surface-solid:#FFFBFA;--stone:#EADDD8;
  --gold:#B08A57;--gold-ink:#664423;--acc:#5E1A28;--acc-ink:#F8EEE8;--oxblood:#5E1A28;
  --hero-bg:#2B0D16;--hero-ink:#F8EEE8;--hero-mute:#D8C1BE;--hero-hair:rgba(217,185,138,.26);--ring:#D9B98A;--ring-trk:rgba(247,241,232,.12);
  --ok:#2F5D45;--warn:#7A4513;--bad:#8E2A22;--info:#2A4A7A;
  --r:14px;--rs:10px;
  --fh:'Bricolage Grotesque',system-ui,sans-serif;--fb:'Inter',system-ui,sans-serif;
  --ease:cubic-bezier(.22,.61,.36,1);--slow:cubic-bezier(.19,1,.22,1)}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;-webkit-tap-highlight-color:transparent}
body.pt-body{margin:0;min-height:100vh;background:var(--bg);color:var(--ink);font:14.5px/1.55 var(--fb);font-feature-settings:'tnum' 1,'cv11' 1;position:relative;overflow-x:hidden;-webkit-font-smoothing:antialiased}

/* silk aurora: very soft, very slow */
body.pt-body::before{content:'';position:fixed;inset:-30%;z-index:-2;pointer-events:none;
  background:radial-gradient(34% 26% at 16% 10%,var(--a1),transparent 70%),radial-gradient(30% 24% at 88% 6%,var(--a2),transparent 70%),
    radial-gradient(38% 30% at 74% 52%,var(--a3),transparent 72%),radial-gradient(34% 28% at 10% 70%,var(--a4),transparent 72%);
  filter:blur(40px);opacity:.9;animation:silk 48s ease-in-out infinite alternate}
@keyframes silk{to{transform:translate3d(-3%,2%,0) rotate(5deg) scale(1.05)}}
/* paper grain — the "printed on good stock" feel */
body.pt-body::after{content:'';position:fixed;inset:0;z-index:-1;pointer-events:none;opacity:.07;mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}

.pt-main{max-width:540px;margin:0 auto;padding:max(14px,env(safe-area-inset-top)) 16px 24px}
body.pt-has-ti .pt-main{padding-bottom:92px}
.pt-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.pt-i{width:17px;height:17px;stroke:currentColor;fill:none;stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0}
.js .pt-nojs{display:none!important}
.c,.pt-center{text-align:center}
:where(a,button,input,select,textarea,label,[tabindex]):focus-visible{outline:1.5px solid var(--gold);outline-offset:3px}

/* type */
.pt-eyebrow,.pt-lbl2,.pt-bal .pt-small,.pt-lesson small,.pt-date small{font:600 10.5px/1.4 var(--fb);letter-spacing:.2em;text-transform:uppercase;color:var(--mute)}
.pt-eyebrow{display:block;margin:0}
.pt-lbl2{display:flex;align-items:center;gap:10px;margin:20px 2px 10px}
.pt-lbl2::after{content:'';flex:1;height:1px;background:var(--hair)}
.pt-h2{font:600 18px/1.25 var(--fh);letter-spacing:-.02em;margin:0 0 6px}
.pt-h3{font:600 15px/1.3 var(--fb);margin:0}
.pt-small{font-size:13px;color:var(--mute);margin:3px 0 0;line-height:1.5}

/* surfaces: flat, hairline, a whisper of depth */
.pt-card,.pt-lesson,.pt-row,.pt-grp,.pt-rlist,.pt-notice{background:var(--surface);border:1px solid var(--hair);border-radius:var(--r);box-shadow:0 1px 0 rgba(255,255,255,.7) inset,0 12px 24px -22px rgba(22,17,15,.35);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.pt-card{padding:16px;margin:0 0 10px}
.pt-btn{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;min-height:50px;border-radius:var(--rs);border:0;background:var(--acc);color:var(--acc-ink);font:600 13px var(--fb);letter-spacing:.14em;text-transform:uppercase;cursor:pointer;text-decoration:none;margin-top:12px;transition:opacity .3s var(--ease)}
.pt-btn:active{opacity:.85}
.pt-btn.ghost{background:transparent;color:var(--ink);border:1px solid var(--hair)}
.pt-link{background:none;border:0;color:var(--ink);font:500 13.5px var(--fb);text-decoration:underline;text-decoration-color:var(--gold);text-decoration-thickness:1px;text-underline-offset:4px;cursor:pointer;min-height:44px}
.pt-note{border-radius:var(--rs);padding:11px 14px;font-size:13.5px;font-weight:500;margin:10px 0;background:var(--surface);border:1px solid var(--hair);border-left:2px solid var(--warn);color:var(--warn)}
.pt-note.ok{border-left-color:var(--ok);color:var(--ok)}.pt-note.bad{border-left-color:var(--bad);color:var(--bad)}

/* ── header ── */
.pt-hero{margin:4px 0 14px}
.pt-ftabs{display:flex;gap:6px;flex-wrap:wrap;margin:0 0 14px}
.pt-ftab{display:flex;align-items:center;gap:8px;border-radius:var(--rs);padding:4px 12px 4px 4px;min-height:44px;font-weight:500;font-size:13px;color:var(--ink);text-decoration:none;border:1px solid var(--hair);background:var(--surface)}
.pt-ftab[aria-current="page"]{background:var(--ink);color:var(--acc-ink);border-color:var(--ink)}
.pt-av{width:32px;height:32px;border-radius:50%;display:grid;place-items:center;font:600 12px var(--fh);color:var(--ink);background:var(--stone);object-fit:cover;flex-shrink:0}
.pt-meline{display:flex;align-items:center;gap:14px}
.pt-me{position:relative;flex:0 0 58px}
.pt-av.xl{width:58px;height:58px;font-size:19px;letter-spacing:-.02em;background:var(--surface-solid);box-shadow:0 0 0 1px var(--gold),0 0 0 4px var(--bg),0 0 0 5px var(--hair)}
.pt-photoform{margin:0}
.pt-cam{position:absolute;right:-4px;bottom:-4px;width:24px;height:24px;border-radius:50%;background:var(--ink);color:var(--acc-ink);display:grid;place-items:center;cursor:pointer}
.pt-cam::before{content:'';position:absolute;inset:-11px}
.pt-cam .pt-i{width:12px;height:12px}
.pt-file{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}
.pt-metx{min-width:0}
.pt-name{font:600 27px/1.08 var(--fh);letter-spacing:-.035em;margin:3px 0 4px;overflow-wrap:anywhere}
.pt-sub{font-size:12.5px;color:var(--mute);margin:0;letter-spacing:.02em}
.pt-chips{margin:12px 0 0}
.pt-chip{display:inline-flex;align-items:center;gap:7px;font:600 10.5px var(--fb);letter-spacing:.16em;text-transform:uppercase;color:var(--gold-ink);padding:0;background:none;border:0}
.pt-chip .pt-i{width:13px;height:13px}

/* ── the one onyx card: Your treatment ── */
.pt-float{position:relative;overflow:hidden;border-radius:18px;padding:18px 18px 16px;background:var(--hero-bg);color:var(--hero-ink);border:1px solid #000;
  box-shadow:0 0 0 1px var(--hero-hair) inset,0 26px 44px -30px rgba(22,17,15,.8)}
.pt-float::before{content:'';position:absolute;inset:-50%;pointer-events:none;opacity:.55;
  background:radial-gradient(26% 22% at 82% 18%,rgba(217,185,138,.28),transparent 70%),radial-gradient(28% 24% at 12% 92%,rgba(190,80,100,.30),transparent 70%);
  filter:blur(18px);animation:silk 30s ease-in-out infinite alternate}
.pt-float > *{position:relative}
.pt-float .pt-eyebrow{color:var(--ring)}
.pt-float .pt-small{color:var(--hero-mute)}
.pt-prog{display:flex;align-items:center;gap:20px;margin-top:12px;padding-top:14px;border-top:1px solid var(--hero-hair)}
.pt-ring{flex:0 0 104px;width:104px;height:104px}
.pt-ring circle{fill:none;stroke-width:2.5}
.pt-ring .trk{stroke:var(--ring-trk)}
.pt-ring .arc{stroke:var(--ring);stroke-linecap:round;transform:rotate(-90deg);transform-origin:50% 50%;animation:draw 2s .4s var(--slow) both}
@keyframes draw{from{stroke-dasharray:0 400}}
.pt-ring text{fill:currentColor}
.pt-ring .n{font:500 34px var(--fh);letter-spacing:-.04em}
.pt-ring .u{font:500 9.5px var(--fb);letter-spacing:.14em;text-transform:uppercase;fill:var(--hero-mute)}
.pt-legend3{list-style:none;margin:0;padding:0;display:grid;gap:8px;font-size:13px;flex:1}
.pt-legend3 li{display:flex;align-items:baseline;gap:10px;padding-bottom:7px;border-bottom:1px solid var(--hero-hair);animation:fade .9s var(--ease) both}
.pt-legend3 li:last-child{border-bottom:0;padding-bottom:0}
.pt-legend3 li:nth-child(2){animation-delay:.1s}.pt-legend3 li:nth-child(3){animation-delay:.2s}.pt-legend3 li:nth-child(4){animation-delay:.3s}.pt-legend3 li:nth-child(5){animation-delay:.4s}
.pt-legend3 b{order:3;margin-left:auto;font:500 17px var(--fh);letter-spacing:-.02em}
.pt-legend3 span{order:2;color:var(--hero-mute)}
.pt-legend3 i{order:1;width:6px;height:6px;border-radius:50%;flex:0 0 6px;align-self:center}
.lg-c{background:var(--ring)}.lg-i{background:#C8A27A}.lg-a{background:#B46A64}.lg-m{background:var(--hero-mute);opacity:.5}.lg-r{box-shadow:inset 0 0 0 1px var(--hero-mute)}
.pt-legend3.big{display:flex;justify-content:space-between;gap:10px;margin-top:12px}
.pt-legend3.big li{flex-direction:column;align-items:flex-start;border:0;padding:0}
.pt-legend3.big b{order:0;margin:0;font-size:22px}.pt-legend3.big span{color:var(--mute)}

/* notices */
.pt-notices{display:grid;gap:8px;margin:0 0 10px}
.pt-notice{display:flex;gap:12px;align-items:flex-start;padding:13px 14px;position:relative;animation:fade 1s .3s var(--ease) both}
.pt-notice::before{content:'';position:absolute;left:-1px;top:14px;bottom:14px;width:2px;background:var(--gold);border-radius:2px}
.pt-bell{width:30px;height:30px;border-radius:50%;border:1px solid var(--hair);color:var(--gold-ink);display:grid;place-items:center;flex-shrink:0}
.pt-bell .pt-i{width:14px;height:14px}
.pt-ntx{flex:1;min-width:0}
.pt-ntx small{font:600 10.5px var(--fb);letter-spacing:.16em;text-transform:uppercase;color:var(--gold-ink)}
.pt-ntx p{margin:4px 0 0;font-size:14px;line-height:1.5;white-space:pre-line;color:var(--ink2)}
.pt-notice form{margin:0}
.pt-notice button{border:1px solid var(--hair);background:transparent;color:var(--ink);font:600 10.5px var(--fb);letter-spacing:.14em;text-transform:uppercase;min-height:34px;padding:0 12px;border-radius:var(--rs);cursor:pointer;transition:background .3s}
.pt-notice button:hover{background:var(--surface-solid)}
.pt-new{display:inline-block;font:600 9px var(--fb);letter-spacing:.18em;color:var(--gold-ink);border:1px solid var(--gold);border-radius:4px;padding:1px 5px;margin-left:8px;vertical-align:1px}

/* ── tabs: quiet text, gold hairline that glides ── */
.pt-tabs{position:sticky;top:0;z-index:5;display:flex;margin:14px -16px 12px;padding:4px 16px 0;background:color-mix(in srgb,var(--bg) 82%,transparent);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);border-bottom:1px solid var(--hair)}
.pt-tab{flex:1 1 0;min-width:0;display:flex;align-items:center;justify-content:center;gap:6px;min-height:46px;font:500 13px var(--fb);letter-spacing:.02em;color:var(--mute);text-decoration:none;white-space:nowrap;transition:color .4s var(--ease)}
.pt-tab[aria-selected="true"]{color:var(--ink);font-weight:600}
.pt-thumb{position:absolute;bottom:-1px;left:16px;width:calc((100% - 32px)/4);height:1.5px;transform:translateX(calc(var(--i,0) * 100%));transition:transform .7s var(--slow);pointer-events:none}
.pt-thumb::after{content:'';position:absolute;left:28%;right:28%;top:0;bottom:0;background:var(--gold)}
.pt-tdot{width:5px;height:5px;border-radius:50%;background:var(--gold);flex:none}

/* entrance: slow fades, small lift, gentle stagger */
.pt-hero,.pt-float,.pt-tabs,.pt-lock,.pt-num,.pt-pin{animation:fade 1s var(--ease) both}
.pt-float{animation-delay:.12s}.pt-tabs{animation-delay:.22s}.pt-num{animation-delay:.15s}.pt-pin{animation-delay:.25s}
.pt-pane > *{animation:fade .9s var(--ease) both}
.pt-pane > *:nth-child(2){animation-delay:.07s}.pt-pane > *:nth-child(3){animation-delay:.14s}.pt-pane > *:nth-child(4){animation-delay:.21s}
.pt-pane > *:nth-child(5){animation-delay:.28s}.pt-pane > *:nth-child(n+6){animation-delay:.35s}
@keyframes fade{from{opacity:0;transform:translateY(8px)}}

/* overview */
.pt-next{display:flex;align-items:center;gap:14px;margin-top:10px}
.pt-date{flex:0 0 56px;text-align:center;padding:8px 0 7px;line-height:1.05;border:1px solid var(--hair);border-radius:var(--rs);background:var(--surface-solid)}
.pt-date small{display:block;letter-spacing:.16em;font-size:9.5px}
.pt-date b{display:block;font:500 25px var(--fh);letter-spacing:-.03em;margin:2px 0}
.pt-next > div:last-child > b{font:600 15px var(--fb)}
.pt-ckup{margin-top:10px}.pt-ckup b{color:var(--ink);font-weight:600}
.pt-bal{display:flex;justify-content:space-between;align-items:center;gap:10px}
.pt-bal .pt-small{margin:0}
.pt-bal b{font:500 28px var(--fh);letter-spacing:-.035em}
.pt-pill{display:inline-flex;align-items:center;gap:5px;font:600 10px var(--fb);letter-spacing:.16em;text-transform:uppercase;padding:7px 10px;border-radius:6px;border:1px solid currentColor;color:var(--ok);white-space:nowrap}
.pt-pill.warn{color:var(--warn)}
.pt-row{display:flex;align-items:center;gap:12px;width:100%;padding:13px 14px;margin-bottom:8px;min-height:52px;font:500 14px var(--fb);color:var(--ink);text-decoration:none;cursor:pointer;text-align:left;transition:background .4s var(--ease)}
.pt-row:hover{background:var(--surface-solid)}
.pt-row > .pt-i:first-child{color:var(--gold-ink)}
.pt-ch{margin-left:auto;color:var(--mute);transition:transform .5s var(--slow)}
.pt-row:hover .pt-ch,.pt-rlist a:hover .pt-ch{transform:translateX(4px)}
.pt-out{margin-top:16px}
.pt-row.out{justify-content:center;font:600 11px var(--fb);letter-spacing:.16em;text-transform:uppercase;color:var(--bad);background:transparent}
.pt-row.out .pt-i{color:var(--bad)}

/* advice */
.pt-lesson{display:flex;gap:14px;padding:14px 16px;margin-bottom:8px}
.pt-dn{width:30px;height:30px;border-radius:50%;border:1px solid var(--gold);color:var(--gold-ink);display:grid;place-items:center;flex-shrink:0;margin-top:2px}
.pt-dn .pt-i{width:14px;height:14px}
.pt-lesson p{margin:5px 0 0;font-size:14.5px;line-height:1.55;white-space:pre-line;overflow-wrap:anywhere;color:var(--ink2)}

/* treatment days */
.pt-strip{display:grid;grid-template-columns:repeat(5,1fr);gap:6px;margin:14px 0 12px;padding:0;list-style:none}
.pt-sd{aspect-ratio:1/1;border-radius:var(--rs);display:grid;place-items:center;font:500 15px var(--fh);letter-spacing:-.02em;border:1px solid var(--hair);color:var(--mute);background:transparent;animation:fade .8s var(--ease) both}
.pt-sd:nth-child(2){animation-delay:.04s}.pt-sd:nth-child(3){animation-delay:.08s}.pt-sd:nth-child(4){animation-delay:.12s}.pt-sd:nth-child(5){animation-delay:.16s}
.pt-sd:nth-child(6){animation-delay:.2s}.pt-sd:nth-child(7){animation-delay:.24s}.pt-sd:nth-child(8){animation-delay:.28s}.pt-sd:nth-child(9){animation-delay:.32s}.pt-sd:nth-child(n+10){animation-delay:.36s}
.pt-sd.c{background:var(--ink);border-color:var(--ink);color:var(--ring)}
.pt-sd.i{border-color:#C8A27A;color:var(--warn)}
.pt-sd.a{border-color:#B46A64;color:var(--bad)}
.pt-sd.m{background:var(--stone);border-color:transparent}
.pt-sd.t{border:1.5px solid var(--gold);color:var(--ink);background:var(--surface-solid)}
.pt-legend{display:flex;flex-wrap:wrap;gap:6px 14px;font-size:11.5px;color:var(--mute);letter-spacing:.02em}
.pt-bar{height:2px;background:var(--hair);overflow:hidden;margin-top:12px}
.pt-bar i{display:block;height:100%;background:var(--gold);transform-origin:left;animation:grow 1.8s .4s var(--slow) both}
@keyframes grow{from{transform:scaleX(0)}}

/* receipts */
.pt-rlist{list-style:none;margin:0 0 10px;padding:0 14px}
.pt-rlist li + li{border-top:1px solid var(--hair2)}
.pt-rlist a{display:flex;align-items:center;gap:12px;padding:12px 0;color:inherit;text-decoration:none;min-height:54px}
.pt-ric{width:32px;height:32px;border-radius:50%;border:1px solid var(--hair);color:var(--gold-ink);display:grid;place-items:center;flex-shrink:0}
.pt-ric .pt-i{width:15px;height:15px}
.pt-rtx{display:flex;flex-direction:column;min-width:0}.pt-rtx .pt-small{margin:0;font-size:12px}
.pt-no{font-weight:600;letter-spacing:.02em}
.pt-rlist b{margin-left:auto;font:500 16px var(--fh);letter-spacing:-.02em;white-space:nowrap}
.pt-rlist .pt-ch{margin-left:0}

/* details */
.pt-dhead{display:flex;align-items:center;gap:10px;margin-top:2px}
.pt-dhead .pt-h2{margin:0;font-size:21px}
.pt-edit{margin-left:auto;display:inline-flex;align-items:center;gap:7px;border-radius:var(--rs);padding:0 14px;min-height:40px;font:600 10.5px var(--fb);letter-spacing:.16em;text-transform:uppercase;text-decoration:none;color:var(--ink);border:1px solid var(--hair);background:var(--surface)}
.pt-edit .pt-i{width:13px;height:13px}
.pt-grp{list-style:none;margin:0 0 4px;padding:0 14px}
.pt-r{display:flex;align-items:center;gap:12px;min-height:52px;padding:8px 0;font-size:14px}
.pt-r + .pt-r{border-top:1px solid var(--hair2)}
.pt-rl{flex-shrink:0;color:var(--mute);font-size:12.5px}
.pt-rv{margin-left:auto;text-align:right;min-width:0;display:flex;flex-direction:column;align-items:flex-end;gap:3px}
.pt-rv b{font-weight:500;overflow-wrap:anywhere}
.pt-lockt{display:inline-flex;align-items:center;gap:4px;font-size:11px;color:var(--mute)}.pt-lockt .pt-i{width:11px;height:11px}
.pt-mk{font-size:10.5px;font-weight:600;color:var(--warn)}
.pt-pend{font-size:12px;color:var(--info)}
.pt-rej{font-size:12px;color:var(--mute)}
.pt-racts{flex-direction:row;gap:6px;align-items:center}.pt-racts form{margin:0}
.pt-mini{display:inline-flex;align-items:center;min-height:36px;padding:0 12px;border-radius:var(--rs);border:1px solid var(--hair);background:transparent;color:var(--ink);font:600 10.5px var(--fb);letter-spacing:.14em;text-transform:uppercase;cursor:pointer}
.pt-mini.bad{color:var(--bad)}

/* edit form */
.pt-form{display:block}
.pt-info{display:flex;gap:8px;align-items:flex-start;color:var(--ink2);font-size:13px;margin:0 0 12px;padding:10px 12px;border:1px solid var(--hair);border-radius:var(--rs);background:var(--surface)}
.pt-info .pt-i{width:15px;height:15px;margin-top:2px;color:var(--gold-ink)}
.pt-fld{display:flex;align-items:center;gap:10px;background:var(--surface-solid);border:1px solid var(--hair);border-radius:var(--rs);padding:6px 14px;margin-bottom:8px;transition:border-color .4s var(--ease);animation:fade .8s var(--ease) both}
.pt-fld > div{flex:1;min-width:0}.pt-fld > .pt-i{color:var(--mute)}
.pt-fld:focus-within{border-color:var(--gold)}
.pt-fld label,.pt-flbl{display:block;font:600 10px var(--fb);letter-spacing:.16em;text-transform:uppercase;color:var(--mute)}
.pt-fld input,.pt-fld select,.pt-fld textarea{border:0;outline:0;width:100%;font:15px var(--fb);color:var(--ink);background:transparent;padding:4px 0;min-height:30px}
.pt-fld.lock{background:transparent;border-style:dashed}
.pt-fval{display:block;font-size:15px;padding:4px 0}
.pt-pair{display:flex;gap:10px}.pt-pair .pt-btn{flex:1}

/* ── PIN screen ── */
.pt-lock{text-align:center;padding:22px 4px 4px}
.pt-brand{position:relative;width:72px;height:72px;border-radius:50%;display:grid;place-items:center;margin:0 auto;background:var(--surface-solid);box-shadow:0 0 0 1px var(--gold),0 0 0 6px var(--bg),0 0 0 7px var(--hair),0 20px 34px -24px rgba(22,17,15,.6)}
.pt-brand img{width:48px;height:48px;object-fit:contain;display:block}
.pt-brand[hidden]{display:none}
.pt-lockh{font:500 28px/1.12 var(--fh);letter-spacing:-.035em;margin:20px 0 6px}
.pt-locksub{font-size:13.5px;color:var(--mute);margin:0;line-height:1.5}
#ptStepPhone{padding-top:16px}
.pt-lbl{display:block;font:600 10.5px var(--fb);letter-spacing:.18em;text-transform:uppercase;color:var(--mute);margin-bottom:8px}
.pt-phone{display:flex;border-radius:var(--rs);overflow:hidden;min-height:54px;background:var(--surface-solid);border:1px solid var(--hair);transition:border-color .4s}
.pt-phone span{display:grid;place-items:center;padding:0 12px;font:500 16px var(--fh);color:var(--gold-ink);border-right:1px solid var(--hair)}
.pt-phone input,.pt-plain{border:0;flex:1;padding:0 14px;font:500 18px var(--fh);letter-spacing:.04em;min-width:0;background:transparent;color:inherit}
.pt-phone:focus-within{border-color:var(--gold)}
.pt-phone input:focus{outline:none}
.pt-plain{border:1px solid var(--hair);border-radius:var(--rs);min-height:50px;width:100%;margin-bottom:6px;background:var(--surface-solid)}
.pt-help{margin-top:16px;padding:14px 16px;border-radius:var(--r);background:var(--surface);border:1px solid var(--hair)}
.pt-msg{min-height:20px;font-size:13px;font-weight:500;margin:10px 0 0;text-align:center;letter-spacing:.01em}
.pt-msg.bad{color:var(--bad)}.pt-msg.ok{color:var(--ok)}
.pt-num{display:flex;align-items:center;gap:12px;margin:18px 0 22px;padding:12px 12px 12px 14px;border-radius:var(--r);text-align:left;background:var(--surface);border:1px solid var(--hair)}
.pt-numic{width:34px;height:34px;border-radius:50%;border:1px solid var(--hair);color:var(--gold-ink);display:grid;place-items:center;flex-shrink:0}
.pt-numic .pt-i{width:15px;height:15px}
.pt-numtx{min-width:0}.pt-numtx small{display:block;font:600 10px var(--fb);letter-spacing:.16em;text-transform:uppercase;color:var(--mute)}
.pt-numtx b{font:500 17px var(--fh);letter-spacing:.01em;white-space:nowrap}
.pt-num .pt-link{margin-left:auto;font-size:13px;white-space:nowrap;padding:0 4px;display:inline-flex;align-items:center}
.pt-dots{display:flex;justify-content:center;gap:18px;margin:0 0 24px}
.pt-dot{width:10px;height:10px;border-radius:999px;box-shadow:inset 0 0 0 1px rgba(22,17,15,.45);position:relative;transition:width .55s var(--slow),box-shadow .55s var(--slow)}
.pt-dot::after{content:'';position:absolute;inset:0;border-radius:inherit;background:var(--ink);opacity:0;transform:scale(.4);transition:opacity .35s var(--ease),transform .45s var(--slow)}
.pt-dot.on::after{opacity:1;transform:none}
.pt-pin{position:relative}
.pt-pin.err .pt-dot::after{background:var(--bad)}
.pt-pin.err .pt-dots{animation:shake .5s cubic-bezier(.36,.07,.19,.97)}
@keyframes shake{20%,60%{transform:translateX(-6px)}40%,80%{transform:translateX(6px)}}
/* Correct PIN (owner, 10 Oct): the dots stretch into green pills, left to right.
   Transitions, not keyframes, so with reduced motion the pills are simply green. */
.pt-dot::before{content:'';position:absolute;inset:-1px;border-radius:inherit;z-index:1;opacity:0;background:linear-gradient(180deg,#2A975B,#1C7F49);transition:opacity .35s var(--ease)}
.pt-pin.ok .pt-dot{width:30px;box-shadow:0 0 0 4px rgba(46,157,98,.14)}
.pt-pin.ok .pt-dot::before{opacity:1}
.pt-pin.ok .pt-dot:nth-child(2),.pt-pin.ok .pt-dot:nth-child(2)::before{transition-delay:.08s}
.pt-pin.ok .pt-dot:nth-child(3),.pt-pin.ok .pt-dot:nth-child(3)::before{transition-delay:.16s}
.pt-pin.ok .pt-dot:nth-child(4),.pt-pin.ok .pt-dot:nth-child(4)::before{transition-delay:.24s}
.pt-keys{display:grid;grid-template-columns:repeat(3,70px);justify-content:center;gap:12px 30px;margin:0}
.pt-key{width:70px;height:70px;border-radius:50%;border:1px solid var(--hair);background:transparent;font:300 28px var(--fh);letter-spacing:-.02em;color:var(--ink);cursor:pointer;position:relative;overflow:hidden;display:grid;place-items:center;transition:background .35s var(--ease),border-color .35s var(--ease)}
.pt-key:active{background:var(--ink);color:var(--acc-ink);border-color:var(--ink);transition-duration:.05s}
.pt-key.fn{font:600 13px var(--fb);letter-spacing:.03em;color:var(--key-red)}
.pt-key.fn:active{color:var(--key-red-ink)}
.pt-key.fn .pt-i{width:26px;height:26px;stroke-width:1.7}
.pt-key:disabled{opacity:.4}
.pt-rip{display:none}
#ptForgot{display:flex;margin:14px auto 0}
.pt-trust{display:flex;align-items:center;justify-content:center;gap:7px;font:600 10px var(--fb);letter-spacing:.16em;text-transform:uppercase;color:var(--mute);margin:2px 0 0}
.pt-trust .pt-i{width:13px;height:13px;color:var(--gold-ink)}
@media (max-width:340px){.pt-keys{grid-template-columns:repeat(3,62px);gap:10px 22px}.pt-key{width:62px;height:62px}}

/* ── install toast: ivory card, onyx button ── */
.pt-ti{position:fixed;left:50%;bottom:12px;transform:translateX(-50%);width:calc(100% - 24px);max-width:516px;z-index:20;display:flex;align-items:center;gap:12px;padding:10px 10px 10px 12px;border-radius:16px;
  background:color-mix(in srgb,var(--surface-solid) 94%,transparent);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);border:1px solid var(--hair);box-shadow:0 18px 34px -22px rgba(22,17,15,.55);animation:toast 1.1s .8s var(--slow) both}
.pt-ti[hidden]{display:none}
@keyframes toast{from{opacity:0;transform:translate(-50%,24px)}to{opacity:1;transform:translate(-50%,0)}}
.pt-ti-ib{flex:0 0 40px;height:40px;border-radius:50%;display:grid;place-items:center;border:1px solid var(--hair);background:#fff}
.pt-logo{width:22px;height:22px}
.pt-ti-tx{flex:1;min-width:0;line-height:1.35}
.pt-ti-tx small{display:block;font:600 10px var(--fb);letter-spacing:.16em;text-transform:uppercase;color:var(--gold-ink)}
.pt-ti-tx strong{display:block;font-size:13px;font-weight:500;color:var(--ink)}
.pt-ti-tx em{font-style:normal;font-weight:600}
.pt-ti-go{flex:0 0 auto;min-height:42px;padding:0 16px;border-radius:var(--rs);border:0;background:var(--acc);color:var(--acc-ink);font:600 10.5px var(--fb);letter-spacing:.16em;text-transform:uppercase;cursor:pointer}
.pt-ti-x{position:absolute;top:-13px;right:-6px;width:30px;height:30px;border-radius:50%;border:1px solid var(--hair);background:var(--surface-solid);color:var(--ink);display:grid;place-items:center;font:400 19px/1 var(--fb);cursor:pointer;padding:0}
.pt-ti-x::after{content:'';position:absolute;inset:-7px}
.pt-ti-help{position:absolute;left:0;right:0;bottom:calc(100% + 10px);margin:0;padding:14px 16px;border-radius:14px;background:var(--ink);color:var(--acc-ink);font-size:13.5px;line-height:1.5}
.pt-ti-help[hidden]{display:none}

@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}}

/* ═══ Depth layer — light from above: every surface has a lit top edge, a body,
   and a cast shadow; every button has a real "edge" it travels down onto when
   pressed. Kept luxury: short travel (2–3px), soft layered shadows, no bounce. ═══ */
:root{
  --edge-light:#D9C6C1;                 /* the visible underside of ivory buttons */
  --edge-rose:#E4BFB8;                  /* …and of the rose Clear / Delete keys */
  --key-red:#A12B22;--key-red-ink:#7E1F18;  /* their label and icon (6.2:1 on the rose) */
  --acc-edge:#2A0810;                      /* the underside of dark buttons */
  --face-light:linear-gradient(180deg,#FFFEFB 0%,#F4EEE5 100%);
  --face-dark:linear-gradient(180deg,#7A2638 0%,#5E1A28 55%,#4A1220 100%);
  --lift-1:0 1px 0 rgba(255,255,255,.9) inset,0 1px 2px rgba(22,17,15,.06),0 8px 18px -10px rgba(22,17,15,.20),0 24px 40px -30px rgba(22,17,15,.32);
  --arc1:#F0D6AE;--arc2:#B0834F;--press:cubic-bezier(.3,.7,.4,1)}

/* raised surfaces */
.pt-card,.pt-lesson,.pt-grp,.pt-rlist,.pt-notice,.pt-num,.pt-help{box-shadow:var(--lift-1);border-color:rgba(22,17,15,.08)}

/* ── the onyx slab: bevelled, layered, with a gentle 3D entrance and tilt ── */
.pt-float{transform-style:preserve-3d;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.10),inset 0 -1px 0 rgba(0,0,0,.6),0 0 0 1px var(--hero-hair) inset,
    0 1px 1px rgba(0,0,0,.18),0 8px 16px -6px rgba(22,17,15,.35),0 34px 54px -30px rgba(22,17,15,.75);
  animation:slab 1.2s .1s var(--slow) backwards;transition:transform .6s var(--slow)}
@keyframes slab{from{opacity:0;transform:perspective(900px) rotateX(14deg) translateY(18px)}}
.pt-float::after{content:'';position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background:linear-gradient(160deg,rgba(255,255,255,.09) 0%,rgba(255,255,255,0) 38%)}
/* the ring sits in a convex medallion */
.pt-prog{position:relative}
.pt-prog::before{content:'';position:absolute;left:-6px;top:calc(50% + 7px - 58px);width:116px;height:116px;border-radius:50%;pointer-events:none;
  background:radial-gradient(circle at 38% 30%,rgba(255,255,255,.10),rgba(255,255,255,.02) 45%,rgba(0,0,0,.25) 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.10),inset 0 -3px 8px rgba(0,0,0,.45),0 6px 14px -6px rgba(0,0,0,.6)}
.pt-ring{position:relative}
.pt-ring circle{stroke-width:3.5}
.pt-ring .trk{stroke:rgba(0,0,0,.45)}
.pt-ring .arc{stroke:url(#ptArc);filter:drop-shadow(0 0 3px rgba(214,186,140,.45))}
.pt-ring .n{filter:drop-shadow(0 1px 0 rgba(0,0,0,.6))}

/* ── avatar + logo: gold bezel medallions ── */
.pt-av.xl{background:radial-gradient(circle at 35% 28%,#FFFFFF,#F4EEE5 55%,#E4D9C9 100%);
  box-shadow:0 0 0 1px #C9A86E,0 0 0 3px #FBF6EE,0 0 0 4px rgba(180,140,85,.55),inset 0 -2px 4px rgba(22,17,15,.12),0 10px 16px -8px rgba(22,17,15,.45)}
/* logo: plain white inside, so a logo with a white background shows no box (owner, 9 Oct) */
.pt-brand{background:#FFFFFF;
  box-shadow:0 0 0 1px #C9A86E,0 0 0 5px #FBF6EE,0 0 0 6px rgba(180,140,85,.5),inset 0 -3px 6px rgba(22,17,15,.12),0 22px 34px -18px rgba(22,17,15,.55)}

/* ── buttons: ivory (light) and onyx (dark), both with a real edge ── */
.pt-btn.ghost,.pt-edit,.pt-notice button,.pt-mini,.pt-row,.pt-ftab:not([aria-current]),.pt-ti-x{
  background:var(--face-light);border:1px solid rgba(22,17,15,.10);
  box-shadow:inset 0 1px 0 #fff,0 2px 0 var(--edge-light),0 8px 14px -9px rgba(22,17,15,.35);
  transition:transform .12s var(--press),box-shadow .12s var(--press)}
.pt-btn.ghost:active,.pt-edit:active,.pt-notice button:active,.pt-mini:active,.pt-row:active,.pt-ftab:not([aria-current]):active,.pt-ti-x:active{
  transform:translateY(2px);box-shadow:inset 0 2px 4px rgba(22,17,15,.12),0 0 0 var(--edge-light),0 3px 6px -5px rgba(22,17,15,.3)}
.pt-btn:not(.ghost),.pt-ti-go,.pt-cam,.pt-ftab[aria-current]{
  background:var(--face-dark);border:0;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.18),inset 0 -1px 0 rgba(0,0,0,.4),0 3px 0 var(--acc-edge),0 10px 18px -8px rgba(22,17,15,.55);
  transition:transform .12s var(--press),box-shadow .12s var(--press)}
.pt-btn:not(.ghost):active,.pt-ti-go:active,.pt-cam:active{transform:translateY(3px);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08),inset 0 2px 6px rgba(0,0,0,.5),0 0 0 var(--acc-edge),0 3px 8px -6px rgba(22,17,15,.45)}
.pt-row.out{background:var(--face-light)}
.pt-row:hover{background:var(--face-light)}
/* list items inside a card press in place */
.pt-rlist a{transition:transform .12s var(--press)}
.pt-rlist a:active{transform:translateY(1px) scale(.995)}

/* ── tabs: a debossed track with a raised ivory key that slides ── */
.pt-tabs{position:sticky;top:6px;margin:14px 0 12px;padding:5px;border:0;border-radius:14px;background:color-mix(in srgb,var(--stone) 88%,transparent);
  box-shadow:inset 0 2px 5px rgba(22,17,15,.13),inset 0 -1px 0 rgba(255,255,255,.75),0 1px 0 rgba(255,255,255,.6)}
.pt-tab{min-height:40px;border-radius:10px;position:relative;z-index:1;transition:color .4s var(--ease),transform .12s var(--press)}
.pt-tab:active{transform:translateY(1px)}
.pt-thumb{top:5px;bottom:5px;left:5px;width:calc((100% - 10px)/4);height:auto;border-radius:10px;background:var(--face-light);
  box-shadow:inset 0 1px 0 #fff,0 2px 0 var(--edge-light),0 6px 12px -6px rgba(22,17,15,.4);transition:transform .6s var(--slow)}
.pt-thumb::after{left:38%;right:38%;top:auto;bottom:5px;height:1.5px;border-radius:2px}

/* ── keypad: convex discs that sink when pressed ── */
.pt-key{border:1px solid rgba(22,17,15,.08);background:radial-gradient(circle at 34% 26%,#FFFFFF 0%,#FBF7F1 42%,#EDE4D7 100%);
  box-shadow:inset 0 1px 0 #fff,inset 0 -2px 4px rgba(22,17,15,.06),0 3px 0 var(--edge-light),0 12px 18px -10px rgba(22,17,15,.38);
  transition:transform .1s var(--press),box-shadow .1s var(--press),color .2s}
.pt-key:active{transform:translateY(3px);background:radial-gradient(circle at 50% 60%,#FBF7F1 0%,#ECE2D4 100%);color:var(--gold-ink);border-color:rgba(22,17,15,.12);
  box-shadow:inset 0 3px 7px rgba(22,17,15,.18),inset 0 -1px 0 rgba(255,255,255,.6),0 0 0 var(--edge-light),0 3px 6px -5px rgba(22,17,15,.3)}
/* Clear and Delete (owner, 10 Oct): rose discs, the same shape as the digits */
.pt-key.fn{border-color:rgba(142,42,34,.16);background:radial-gradient(circle at 34% 26%,#FFF8F6 0%,#FBEAE6 45%,#F1D5CF 100%);
  box-shadow:inset 0 1px 0 #fff,inset 0 -2px 4px rgba(142,42,34,.08),0 3px 0 var(--edge-rose),0 12px 18px -10px rgba(142,42,34,.38)}
.pt-key.fn:active{transform:translateY(3px);background:radial-gradient(circle at 50% 60%,#FBE5E0 0%,#EECBC4 100%);border-color:rgba(142,42,34,.22);
  box-shadow:inset 0 3px 7px rgba(142,42,34,.22),inset 0 -1px 0 rgba(255,255,255,.6),0 0 0 var(--edge-rose),0 3px 6px -5px rgba(142,42,34,.3)}
/* PIN dots: little set stones */
.pt-dot{box-shadow:inset 0 1px 2px rgba(22,17,15,.35),0 1px 0 rgba(255,255,255,.8)}
.pt-dot::after{background:radial-gradient(circle at 35% 30%,#4A403A,#0E0A09);box-shadow:0 1px 2px rgba(0,0,0,.4)}

/* ── inputs are debossed into the page ── */
.pt-phone,.pt-fld,.pt-plain{background:#FFFDF9;box-shadow:inset 0 2px 4px rgba(22,17,15,.08),inset 0 -1px 0 rgba(255,255,255,.9),0 1px 0 rgba(255,255,255,.7)}

/* ── day tiles: attended = raised onyx, upcoming = engraved, today = raised ivory with gold ── */
.pt-sd{border:0;background:rgba(236,228,217,.55);box-shadow:inset 0 2px 4px rgba(22,17,15,.10),inset 0 -1px 0 rgba(255,255,255,.75)}
.pt-sd.c{background:var(--face-dark);color:var(--ring);box-shadow:inset 0 1px 0 rgba(255,255,255,.14),0 2px 0 var(--acc-edge),0 7px 12px -6px rgba(0,0,0,.5)}
.pt-sd.t{background:var(--face-light);box-shadow:0 0 0 1.5px var(--gold),inset 0 1px 0 #fff,0 3px 0 var(--edge-light),0 8px 14px -7px rgba(22,17,15,.35)}
.pt-sd.m{background:var(--stone);box-shadow:inset 0 1px 3px rgba(22,17,15,.12)}
.pt-sd.i,.pt-sd.a{background:var(--face-light);box-shadow:inset 0 0 0 1px currentColor,0 2px 0 var(--edge-light)}
/* progress bar: an engraved groove with a gold fill */
.pt-bar{height:5px;border-radius:5px;background:var(--stone);box-shadow:inset 0 1px 2px rgba(22,17,15,.2)}
.pt-bar i{border-radius:5px;background:linear-gradient(180deg,var(--arc1),var(--arc2))}
/* date + small icon chips get a bevel */
.pt-date{background:var(--face-light);box-shadow:inset 0 1px 0 #fff,0 2px 0 var(--edge-light),0 8px 12px -8px rgba(22,17,15,.3)}
.pt-ric,.pt-numic,.pt-bell,.pt-dn{background:var(--face-light);box-shadow:inset 0 1px 0 #fff,0 1px 0 var(--edge-light),0 4px 8px -5px rgba(22,17,15,.3)}

/* ── install toast: a raised ivory slab ── */
.pt-ti{background:var(--face-light);border:1px solid rgba(22,17,15,.08);
  box-shadow:inset 0 1px 0 #fff,0 2px 0 var(--edge-light),0 18px 34px -16px rgba(22,17,15,.5)}
.pt-ti-ib{box-shadow:inset 0 1px 0 #fff,0 1px 0 var(--edge-light),0 4px 8px -5px rgba(22,17,15,.3)}
/* press lands instantly; the release eases back up */
.pt-key:active,.pt-btn:active,.pt-ti-go:active,.pt-cam:active,.pt-edit:active,.pt-notice button:active,.pt-mini:active,.pt-row:active,.pt-ftab:active,.pt-ti-x:active,.pt-tab:active,.pt-rlist a:active{transition-duration:0s}

/* ── Treatment days as small GitHub-style squares (owner, 9 Oct): colour only,
      the day and date stay in the tooltip and for screen readers ── */
.pt-strip{display:flex;flex-wrap:wrap;gap:5px;margin:14px 0 12px}
.pt-sd{width:18px;height:18px;aspect-ratio:auto;flex:0 0 18px;border-radius:4px;font-size:0;line-height:0;padding:0;
  background:rgba(236,228,217,.7);box-shadow:inset 0 1px 2px rgba(22,17,15,.14),inset 0 -1px 0 rgba(255,255,255,.7)}
.pt-sd > span[aria-hidden]{display:none}
.pt-sd.c{background:var(--face-dark);box-shadow:inset 0 1px 0 rgba(255,255,255,.16),0 1px 0 var(--acc-edge),0 2px 4px -1px rgba(0,0,0,.35)}
.pt-sd.t{background:var(--face-light);box-shadow:0 0 0 1.5px var(--gold),inset 0 1px 0 #fff,0 1px 0 var(--edge-light)}
.pt-sd.m{background:var(--stone);box-shadow:inset 0 1px 2px rgba(22,17,15,.18)}
.pt-sd.i{background:linear-gradient(180deg,#E3C29A,#C99E6E);box-shadow:inset 0 1px 0 rgba(255,255,255,.35),0 1px 0 #A57E52}
.pt-sd.a{background:linear-gradient(180deg,#D08B82,#B0645B);box-shadow:inset 0 1px 0 rgba(255,255,255,.3),0 1px 0 #8C4A42}
/* legend: the same squares, small */
.pt-legend{gap:6px 14px;font-size:11.5px}
.pt-legend span{display:inline-flex;align-items:center;gap:6px}
.pt-legend .lg-sq{width:10px;height:10px;border-radius:2.5px;flex:0 0 10px}
.lg-sq.c{background:var(--face-dark)}.lg-sq.i{background:#D4AE82}.lg-sq.a{background:#BF7168}
.lg-sq.m{background:var(--stone);box-shadow:inset 0 1px 1px rgba(22,17,15,.18)}
.lg-sq.t{background:var(--surface-solid);box-shadow:0 0 0 1.5px var(--gold)}
.lg-sq.r{background:rgba(236,228,217,.7);box-shadow:inset 0 1px 1px rgba(22,17,15,.16)}
/* Not recorded must read differently from Upcoming: a solid mid-stone vs an empty engraved square */
.pt-sd.m,.lg-sq.m{background:#C9BCAB;box-shadow:inset 0 1px 0 rgba(255,255,255,.35),0 1px 0 #AE9F8C}
.pt-sd.r,.lg-sq.r{background:rgba(255,253,250,.45);box-shadow:inset 0 0 0 1px rgba(22,17,15,.14),inset 0 1px 2px rgba(22,17,15,.08)}

/* ── course complete ── */
.pt-celebr{text-align:center;padding:24px 18px 20px}
.pt-burst{width:84px;height:84px;border-radius:50%;margin:4px auto 16px;display:grid;place-items:center;color:var(--gold-ink);
  background:radial-gradient(circle at 35% 28%,#FFFFFF,#F4EEE5 55%,#E4D9C9 100%);
  box-shadow:0 0 0 1px #C9A86E,0 0 0 4px #FBF6EE,0 0 0 5px rgba(180,140,85,.5),0 14px 22px -12px rgba(22,17,15,.45);animation:fade 1s var(--ease) both}
.pt-burst .pt-i{width:36px;height:36px;fill:var(--gold);stroke:var(--gold-ink);stroke-width:1.2}

/* ── photo crop dialog ── */
.pt-crop{border:0;border-radius:18px;padding:18px;max-width:320px;width:calc(100% - 32px);color:var(--ink);background:var(--surface-solid);margin:auto;position:fixed;inset:0;height:fit-content;
  box-shadow:0 30px 60px -20px rgba(22,17,15,.6)}
.pt-crop::backdrop{background:rgba(28,16,19,.55)}
.pt-crop .pt-h3{text-align:center;margin-bottom:12px}
.pt-stage{position:relative;width:260px;height:260px;margin:0 auto;overflow:hidden;border-radius:12px;background:#111;cursor:grab;touch-action:none}
.pt-stage:active{cursor:grabbing}
.pt-stage img{position:absolute;top:0;left:0;transform-origin:0 0;max-width:none;user-select:none;-webkit-user-drag:none}
.pt-stage::after{content:'';position:absolute;inset:0;border-radius:12px;box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.85);pointer-events:none}
.pt-zoom{display:flex;align-items:center;gap:10px;margin:14px 4px 0;font-weight:600;color:var(--mute)}
.pt-zoom input{flex:1;accent-color:var(--acc);min-height:44px}

/* ── without JavaScript: plain forms, a visible file picker ── */
html:not(.js) .pt-pin{display:none}
html:not(.js) .pt-file{position:static;width:auto;height:auto;opacity:1;pointer-events:auto}
html:not(.js) .pt-cam{position:static;width:auto;height:auto;display:flex;gap:6px;padding:8px;border-radius:10px;margin-top:10px}

@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}.pt-float{transform:none!important}}

/* ══ 1.15 patient profile (build spec 1.15 v2; prototype profile-1-15-prototype_v2.html) ══
   Calm and readable first: nothing fades or slides in, body text is 15–16px,
   labels are sentence case, Hindi gets a Devanagari font. Later wins. */
body.pt-body *,body.pt-body *::before,body.pt-body *::after{animation:none!important}
body.pt-body::before{animation:none!important}
.pt-pin.err .pt-dots{animation:shake .5s cubic-bezier(.36,.07,.19,.97)!important}
body.pt-body{font-size:15.5px}
.pt-small{font-size:14.5px}
.pt-sub{font-size:14px;letter-spacing:0}
.pt-h2{font-size:19px}
.pt-eyebrow,.pt-lbl2,.pt-bal .pt-small,.pt-lesson small,.pt-date small,.pt-ntx small,.pt-chip,.pt-new,.pt-notice button{letter-spacing:0;text-transform:none}
.pt-chips{margin:6px 0 0}.pt-chip{font-size:13px}
.pt-eyebrow,.pt-lbl2{font:600 14px/1.4 var(--fb);color:var(--mute)}
.pt-lesson small,.pt-ntx small{font:600 13px var(--fb)}
.pt-new{font-size:11px}
/* 1.31: the newest report */
.pt-latest{display:inline-block;font:700 11px var(--fb);color:#fff;background:var(--ok);border-radius:4px;padding:1px 6px;margin-left:8px;vertical-align:1px}
.pt-notice button{font-size:13.5px}
.pt-btn{font:600 15.5px var(--fb);letter-spacing:0;text-transform:none}
.pt-link{font-size:15px}
html[lang=hi] body.pt-body{--fb:'Noto Sans Devanagari','Nirmala UI','Mangal',system-ui,sans-serif;--fh:'Noto Sans Devanagari','Nirmala UI','Mangal',system-ui,sans-serif;line-height:1.65}

/* language switch: a small pill top-right of the header (and on the PIN screen) */
.pt-meline{position:relative}
.pt-langsw{margin-left:auto;align-self:flex-start;flex:none;display:inline-flex;align-items:center;min-height:36px;padding:0 12px;border-radius:999px;border:1px solid var(--hair);background:var(--surface-solid);color:var(--acc);font:600 14px var(--fb);text-decoration:none}
.pt-langtop{position:absolute;top:max(12px,env(safe-area-inset-top));right:16px;z-index:3}
.pt-metx{flex:1}

/* Call / WhatsApp / Directions: three big buttons under the name */
.pt-acts{display:grid;grid-template-columns:repeat(auto-fit,minmax(0,1fr));gap:8px;margin-top:14px}
.pt-act{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;min-height:64px;padding:6px 4px;border-radius:14px;color:var(--acc);font:700 14.5px/1.2 var(--fb);text-decoration:none;text-align:center;
  background:var(--face-light);border:1px solid rgba(22,17,15,.10);box-shadow:inset 0 1px 0 #fff,0 2px 0 var(--edge-light),0 8px 14px -9px rgba(22,17,15,.35);transition:transform .12s var(--press)}
.pt-act .pt-i{width:22px;height:22px;stroke-width:1.8}
.pt-act.wa{color:#1F7A47}
.pt-act:active{transform:translateY(2px);transition-duration:0s}

/* tabs: four words and the raised Install key, on one track that fits 360px */
.pt-tabs{display:flex;align-items:center;gap:2px;padding:4px 4px}
.pt-thumb{display:none}
.pt-tab{flex:1 1 auto;min-height:42px;padding:0 4px;font:500 13px var(--fb);letter-spacing:-.005em}
.pt-tab[aria-selected="true"]{background:var(--face-light);color:var(--ink);font-weight:700;box-shadow:inset 0 1px 0 #fff,0 2px 0 var(--edge-light),0 6px 12px -6px rgba(22,17,15,.4)}
html[lang=hi] .pt-tab{font-size:13.5px}
.pt-inst{flex:0 0 auto;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;min-width:50px;min-height:44px;margin-left:2px;padding:5px 5px 4px;border:0;border-radius:11px;cursor:pointer;
  background:linear-gradient(180deg,#7A2A3B 0%,var(--acc) 55%,#4A1320 100%);color:var(--acc-ink);font:700 11px/1.1 var(--fb);white-space:nowrap;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.28),0 3px 0 #3A0E18,0 6px 12px -4px rgba(43,13,22,.55);transform:translateY(-2px);transition:transform .12s var(--press),box-shadow .12s var(--press)}
.pt-inst[hidden]{display:none}
.pt-inst .pt-i{width:18px;height:18px;stroke-width:2.2}
.pt-inst:active{transform:translateY(1px);transition-duration:0s;box-shadow:inset 0 1px 0 rgba(255,255,255,.2),0 0 0 #3A0E18,0 2px 6px -3px rgba(43,13,22,.5)}
.pt-insthelp{margin:-4px 0 12px;padding:11px 14px;border-radius:var(--rs);background:var(--surface-solid);border:1px solid var(--hair);border-left:3px solid var(--acc);font-size:14.5px;color:var(--ink2)}

/* next session + "Can't come?" */
.pt-when{font-size:17px}
.pt-cant{margin-top:14px}
.pt-cantnote{margin-top:6px}

/* one progress line: 10 steps, colour backed by the words above */
.pt-steps{display:flex;gap:4px;margin-top:12px}
.pt-steps i{flex:1;height:10px;border-radius:3px;background:rgba(255,253,250,.6);box-shadow:inset 0 0 0 1px rgba(22,17,15,.16)}
.pt-steps i.c{background:var(--ok);box-shadow:none}
.pt-steps i.a{background:var(--bad);box-shadow:none}
.pt-steps i.i{background:#C99E6E;box-shadow:none}
.pt-steps i.m{background:#C9BCAB;box-shadow:none}
.pt-steps i.t{background:var(--surface-solid);box-shadow:0 0 0 2px var(--acc)}

/* money: fee · paid · still to pay, then each payment */
.pt-mgrid{display:grid;grid-template-columns:1fr auto;gap:8px 0;margin:10px 0 0;font-size:15.5px}
.pt-mgrid dt{color:var(--mute)}
.pt-mgrid dd{margin:0;padding-left:12px;text-align:right;font-weight:600;color:var(--ink)}
.pt-mgrid dt.due,.pt-mgrid dd.due{padding-top:8px;border-top:1px solid var(--hair);font-weight:700;color:var(--bad)}
.pt-mgrid dd.due{font-size:17px}
.pt-mgrid dd.due.ok{color:var(--ok)}
.pt-money .pt-lbl2{margin:16px 0 6px}
.pt-paylist{list-style:none;margin:0;padding:0}
.pt-paylist li{display:flex;justify-content:space-between;gap:10px;padding:9px 0;border-top:1px solid var(--hair);font-size:14.5px}
.pt-paylist li:first-child{border-top:0}
/* 1.31: products given (owner pick 3A) */
.pt-ptab{width:100%;border-collapse:collapse;margin-top:10px;font-size:14.5px;font-variant-numeric:tabular-nums}
.pt-ptab th{font:600 10.5px/1.4 var(--fb);letter-spacing:.12em;text-transform:uppercase;color:var(--mute);text-align:left;padding:0 0 6px;border-bottom:1px solid var(--hair)}
.pt-ptab td{padding:10px 0;border-bottom:1px solid var(--hair);vertical-align:top}
.pt-ptab td small{display:block;color:var(--mute);font-size:12px}
.pt-ptab .q{text-align:center;width:44px}
.pt-ptab .m{text-align:right;white-space:nowrap}
.pt-ptab .m b{font-weight:600}
.pt-cut{position:relative;display:inline-block;color:var(--mute);text-decoration:none}
.pt-cut::after{content:'';position:absolute;left:-3px;right:-3px;top:50%;height:2px;background:var(--bad);transform:rotate(-9deg);border-radius:2px}
.pt-free{display:block;width:max-content;margin:4px 0 0 auto;font:700 11px var(--fb);letter-spacing:.06em;color:#fff;background:var(--ok);border-radius:4px;padding:1px 7px}
.pt-saved{display:flex;align-items:center;gap:10px;margin:12px 0 0;padding:10px 12px;border-radius:var(--rs);background:rgba(47,93,69,.1);color:var(--ok);font-weight:600;font-size:13.5px}
.pt-saved b{margin-left:auto;font-size:16px}
.pt-paylist span{color:var(--mute)}

/* Treatment: one row per day — Day n · date · state in words */
.pt-dlist{list-style:none;margin:8px 0 0;padding:0}
.pt-dl{display:grid;grid-template-columns:minmax(58px,auto) 1fr auto;gap:8px;text-align:left;align-items:center;padding:10px 0;border-top:1px solid var(--hair);font-size:15px}
.pt-dl:first-child{border-top:0}
.pt-dl .n{font:700 15px var(--fh)}
.pt-dl .d{color:var(--ink2)}
.pt-dl .st{font-weight:700;font-size:14.5px;white-space:nowrap;text-align:right}
.pt-dl.c .st{color:var(--ok)}.pt-dl.a .st{color:var(--bad)}.pt-dl.i .st{color:var(--warn)}.pt-dl.m .st{color:var(--mute)}.pt-dl.r .st{color:var(--mute);font-weight:500}
.pt-dl.t{margin:0 -16px;padding:10px 16px;background:#F6E7D3;border-top-color:transparent}
.pt-dl.t .st{color:var(--acc)}

/* Details */
.pt-none{color:var(--mute);font-style:italic;font-weight:400}
.pt-discard{align-self:center;padding:0 10px;flex:none}
.pt-logout{display:inline-flex;align-items:center;gap:8px;color:var(--bad);text-decoration-color:currentColor}
.pt-autoout{margin:18px 0 0;font-size:13.5px}

/* PIN screen: Forgot PIN card (also replaces the keypad when the number is locked) */
.pt-forgotbtn{display:block;margin:6px auto 0}
.pt-forgot{margin-top:12px}
.pt-forgot .pt-h3{font-size:17px}
.pt-forgot .pt-btn{margin-top:10px}

@media (max-width:374px){
  .pt-tab{font-size:12.5px;padding:0 2px}
  .pt-inst{min-width:46px}
  .pt-act{font-size:13.5px}
}

/* ══ 1.18 (UI audit) ══════════════════════════════════════════════════════
   PIN answer in a box above the dots; edit form with labels above the boxes;
   Log out a quiet link; two columns on a PC. Later wins. */

/* wrong PIN / locked: a boxed message above the dots (was 13px red text under the keypad) */
#ptPinMsg{margin:0 0 14px;min-height:0}
#ptPinMsg:empty{display:none}
#ptPinMsg.bad,#ptPinMsg.ok{padding:12px 14px;border-radius:var(--rs);font-size:15.5px;font-weight:600;line-height:1.45;text-align:left;
  background:var(--surface-solid);border:1px solid var(--hair);border-left:4px solid var(--bad);color:var(--bad)}
#ptPinMsg.ok{border-left-color:var(--ok);color:var(--ok)}

/* edit form: 14px label above a 16px box (labels were 10px capitals inside the box) */
.pt-form .pt-fld{display:block;position:relative;background:none;border:0;box-shadow:none;padding:0;margin:0 0 14px}
.pt-form .pt-fld > div{display:block}
.pt-form .pt-fld label,.pt-form .pt-flbl{display:block;font:600 14px/1.4 var(--fb);letter-spacing:0;text-transform:none;color:var(--ink2);margin:0 0 6px}
.pt-form .pt-fld input,.pt-form .pt-fld select,.pt-form .pt-fld textarea,.pt-form .pt-fval{display:block;width:100%;min-height:50px;padding:12px 44px 12px 14px;font:16px/1.4 var(--fb);color:var(--ink);
  background:#FFFDF9;border:1px solid rgba(22,17,15,.28);border-radius:var(--rs);box-shadow:inset 0 2px 4px rgba(22,17,15,.06)}
.pt-form .pt-fld textarea{min-height:76px;resize:vertical}
.pt-form .pt-fld:focus-within input,.pt-form .pt-fld:focus-within select,.pt-form .pt-fld:focus-within textarea{border-color:var(--gold);outline:1.5px solid var(--gold);outline-offset:0}
.pt-form .pt-fld.bad input,.pt-form .pt-fld.bad select,.pt-form .pt-fld.bad textarea{border-color:var(--bad)}
.pt-form .pt-fld > .pt-i{position:absolute;right:14px;bottom:17px;pointer-events:none;color:var(--mute)}
.pt-form .pt-fld.lock .pt-fval{background:transparent;border-style:dashed;box-shadow:none;color:var(--ink2)}
/* Send is the one button; Discard is a plain text link beside it */
.pt-form .pt-pair{align-items:center;gap:16px;margin-top:6px}
.pt-form .pt-pair .pt-btn{flex:1 1 auto;margin-top:0}
.pt-form .pt-discard{flex:none;padding:0 4px;font-size:15px;color:var(--ink2)}

/* Log out: a quiet link at the end of Details (not red) */
.pt-out{margin-top:22px;text-align:center}
.pt-logout{color:var(--ink2);font-weight:500;text-decoration-color:var(--gold)}

/* 1.18: the owner kept the profile in one column on a PC too (the .pt-col wrappers in profile.ejs just stack) */
.pt-form .pt-fld:has(select) > .pt-i{right:38px}

/* ══ 1.20 Pay online (prototype profile-pay-online-prototype_v1.html, variant A) ══ */
.pt-payon small{font-weight:500;opacity:.85}
.pt-center{text-align:center}
.pt-paysheet{max-width:360px}
.pt-paysheet .pt-h3{margin-bottom:4px}
.pt-paychips{display:flex;flex-direction:column;gap:8px;margin-top:12px}
.pt-paychip{display:flex;align-items:center;gap:10px;min-height:52px;border:1.5px solid var(--hair);border-radius:12px;padding:10px 14px;background:var(--surface-solid);font:600 15px var(--fb);color:var(--ink);cursor:pointer}
.pt-paychip>input[type=radio]{width:20px;height:20px;margin:0;flex:none;accent-color:var(--acc)}
.pt-paychip>span{flex:1}
.pt-paychip small{display:block;font-weight:500;color:var(--mute);font-size:13px}
.pt-paychip:has(input[type=radio]:checked){border-color:var(--acc);box-shadow:0 0 0 2px rgba(94,26,40,.15)}
.pt-payown{width:110px;min-height:44px;font:700 16px var(--fb);border:1.5px solid var(--hair);border-radius:8px;padding:6px 8px;text-align:right;color:var(--ink);background:#fff}
.pt-payerr{color:var(--bad);font-size:14px;font-weight:600;margin:10px 0 0}
.pt-paysheet .pt-small .pt-i{width:14px;height:14px;vertical-align:-2px}
.pt-paidok b{font-size:16px}
html:not(.js) [data-pay-open]{display:none}

/* ══ 1.21 Course days over (prototype course-end-prototype_v1.html, variant A) ══ */
.pt-offdays{list-style:none;padding:0;margin:12px 0 0;font-size:14.5px}
.pt-offdays li{display:flex;justify-content:space-between;gap:10px;padding:9px 0;border-top:1px solid var(--hair)}
.pt-offdays li span:last-child{font-weight:600;white-space:nowrap}
.pt-offdays .a{color:var(--bad)}.pt-offdays .i{color:var(--ink2)}.pt-offdays .m{color:var(--mute)}
.pt-over .pt-note{margin-top:12px}

/* ══ 1.22 My reports (prototype reports-folder-prototype_v3.html) ══ */
.pt-reprow{width:100%;font:inherit;cursor:pointer;text-align:left}
.pt-repn{margin-left:auto;display:inline-flex;align-items:center;gap:6px;font-size:13px;font-weight:500;color:var(--mute)}
.pt-repn + .pt-ch{margin-left:6px}
.pt-repnew{display:inline-block;min-width:20px;padding:1px 7px;border-radius:10px;background:var(--acc);color:var(--acc-ink);font-size:11.5px;font-weight:700}
.pt-repsheet{max-width:440px;max-height:min(86vh,720px);overflow-y:auto}
.pt-rephd{display:flex;align-items:center;gap:8px}
.pt-rephd .pt-h3{flex:1;margin:0;text-align:left}
.pt-repx{width:44px;height:44px;border-radius:12px;border:1px solid var(--hair);background:var(--surface-solid);font:700 17px var(--fb);color:var(--ink);cursor:pointer}
.pt-repgrp{margin:14px 0 2px;font:700 12.5px var(--fb);letter-spacing:.05em;text-transform:uppercase;color:var(--mute)}
.pt-reprow2{display:flex;align-items:center;gap:10px;padding:10px 0;border-bottom:1px solid var(--hair)}
.pt-repic{width:30px;height:36px;flex:none;border-radius:5px;background:#FBE9E7;border:1px solid #EFC9C3;display:grid;place-items:center;font:800 8.5px/1 var(--fb);color:var(--bad)}
.pt-repnm{flex:1;min-width:0}
.pt-repnm b{display:block;font-weight:600;font-size:14.5px;overflow-wrap:anywhere}
.pt-repnm small{color:var(--mute);font-size:12.5px}
.pt-repbtn{display:inline-flex;align-items:center;justify-content:center;min-width:44px;min-height:44px;padding:0 10px;border-radius:10px;border:1px solid var(--hair);background:var(--surface-solid);color:var(--ink);font:600 13.5px var(--fb);text-decoration:none}
.pt-repdl .pt-i{width:18px;height:18px;stroke-width:2.2}