/* Tracks Apps — shared visual system (same look as Car Log / Whacka) */
:root{
  --bg:#F3F4F6;--surface:#FFFFFF;--surface-2:#ECEEF1;--line:#DCDFE4;--fg:#1F2227;--muted:#585E68;
  --accent:#E08A50;--accent-fg:#FFFFFF;--accent-2:#3A3F48;
  --good:#3F9A72;--warn:#B98A3E;--bad:#C0624F;--good-soft:#E3F2E9;--mint:#CFE8D8;--warn-soft:#FBF0DA;--bad-soft:#F9E3DE;
  --c1:#E08A50;--c2:#E3C36E;--c3:#8FAAD9;--c4:#7EC4AA;--c5:#A996D6;--c6:#7DBFD9;--c7:#E29AAE;--c8:#9AA1AB;
  --font-display:"Cairo",system-ui,sans-serif;--font-body:"Cairo",system-ui,sans-serif;--font-data:"Cairo",system-ui,sans-serif;
  --r:20px;
}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){
  --bg:#15171B;--surface:#1F2227;--surface-2:#292D33;--line:rgba(255,255,255,.1);--fg:#F4F5F7;--muted:#AEB4BD;
  --accent:#E89B66;--accent-fg:#1A0F06;--accent-2:#C3C8CF;--good:#8FCCA8;--warn:#E0BC78;--bad:#DE8576;--good-soft:#1B2E26;--mint:#2A4A3A;--warn-soft:#352A14;--bad-soft:#3A1C17;color-scheme:dark}}
:root[data-theme="dark"]{
  --bg:#15171B;--surface:#1F2227;--surface-2:#292D33;--line:rgba(255,255,255,.1);--fg:#F4F5F7;--muted:#AEB4BD;
  --accent:#E89B66;--accent-fg:#1A0F06;--accent-2:#C3C8CF;--good:#8FCCA8;--warn:#E0BC78;--bad:#DE8576;--good-soft:#1B2E26;--mint:#2A4A3A;--warn-soft:#352A14;--bad-soft:#3A1C17;color-scheme:dark}
*{box-sizing:border-box}
html,body{height:100%}
html{font-size:var(--fs,19px);-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--fg);font-family:var(--font-body);font-size:1rem;line-height:1.6;-webkit-tap-highlight-color:transparent;padding-top:env(safe-area-inset-top,0px)}
body::before{content:"";position:fixed;inset:-20% -20% auto -20%;height:60vh;pointer-events:none;z-index:-1;background:radial-gradient(60% 60% at 75% 20%,color-mix(in srgb,var(--accent) 12%,transparent),transparent 70%),radial-gradient(50% 50% at 15% 10%,color-mix(in srgb,var(--accent-2) 9%,transparent),transparent 70%)}
button,input,select,textarea{font:inherit;color:inherit}
h1,h2,h3{font-family:var(--font-display);margin:0;font-weight:800;text-wrap:balance}
[hidden]{display:none!important}
img{max-width:100%}
.num{font-family:var(--font-data);font-weight:700;font-variant-numeric:tabular-nums;direction:ltr;unicode-bidi:isolate}
.note{font-size:0.875rem;color:var(--muted)}
.err{color:var(--bad);font-size:0.875rem;font-weight:600}
.warnmsg{color:var(--warn);font-size:0.875rem;font-weight:600}

.top{position:sticky;top:env(safe-area-inset-top,0px);z-index:20;background:var(--bg);border-bottom:1px solid var(--line);padding:12px 16px;display:flex;align-items:center;gap:10px}
.top .logo{width:44px;height:44px;border-radius:14px;flex:none;overflow:hidden}
.top .logo img{width:100%;height:100%;display:block}
.top .title{flex:1;min-width:0;font-family:var(--font-display);font-weight:800;font-size:1.188rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.iconbtn{width:44px;height:44px;border-radius:14px;border:1px solid var(--line);background:var(--surface);display:grid;place-items:center;cursor:pointer;font-size:0.875rem;font-weight:700;flex:none;color:var(--fg)}

main{max-width:760px;margin:0 auto;padding-inline:16px;padding-block:16px calc(var(--tabsH,calc(64px + env(safe-area-inset-bottom,0px))) + 90px)}
.stack{display:flex;flex-direction:column;gap:14px}
.row{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.grid2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
@media (min-width:620px){.grid3{grid-template-columns:repeat(3,minmax(0,1fr))}}
.sec-title{display:flex;align-items:center;justify-content:space-between;gap:10px}
.sec-title h2{font-size:1.5rem}
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:18px;box-shadow:0 1px 2px rgba(0,0,0,.35),0 14px 34px -18px rgba(0,0,0,.7);min-width:0}
.hero{background:linear-gradient(135deg,color-mix(in srgb,var(--accent) 16%,transparent),transparent 55%),linear-gradient(315deg,color-mix(in srgb,var(--accent-2) 12%,transparent),transparent 60%),var(--surface)}
.tile{background:var(--surface-2);border-radius:16px;padding:12px 14px;min-width:0}
.tile .lbl,.gauge .lbl{font-size:0.875rem;color:var(--muted)}
.gauge .val{font-family:var(--font-data);font-size:1.75rem;font-weight:800;direction:ltr;unicode-bidi:plaintext}
.gauge .unit{font-size:0.8125rem;color:var(--muted);margin-inline-start:4px}
.big{font-size:1.5rem}

.alert{border-radius:18px;padding:14px 16px;display:flex;gap:10px;align-items:flex-start;border:1px solid transparent}
.alert b{display:block;font-family:var(--font-display);font-weight:800;font-size:1rem}
.alert.bad{background:var(--bad-soft);border-color:color-mix(in srgb,var(--bad) 30%,transparent)}
.alert.warn{background:var(--warn-soft);border-color:color-mix(in srgb,var(--warn) 30%,transparent)}
.alert.good{background:var(--good-soft);border-color:color-mix(in srgb,var(--good) 30%,transparent)}
.alert .dot{width:10px;height:10px;border-radius:50%;margin-top:8px;flex:none}
.bad .dot{background:var(--bad)}.warn .dot{background:var(--warn)}.good .dot{background:var(--good)}

.pill{display:inline-flex;align-items:center;gap:4px;font-size:0.8125rem;padding:4px 12px;border-radius:99px;font-weight:700;white-space:nowrap}
.pill.good{background:var(--good-soft);color:var(--good)}.pill.warn{background:var(--warn-soft);color:var(--warn)}.pill.bad{background:var(--bad-soft);color:var(--bad)}.pill.gray{background:var(--surface-2);color:var(--muted)}
.bar{height:8px;border-radius:99px;background:var(--surface-2);overflow:hidden}
.bar>i{display:block;height:100%;border-radius:99px}

.list{display:flex;flex-direction:column;gap:10px}
.item{background:var(--surface);border:1px solid var(--line);border-radius:18px;padding:14px;display:flex;gap:12px;align-items:center;cursor:pointer;box-shadow:0 1px 2px rgba(0,0,0,.35),0 14px 34px -18px rgba(0,0,0,.7);transition:transform .15s ease,background .15s ease;min-width:0}
.item:hover{background:var(--surface-2)}
.item .main{flex:1;min-width:0}
.item .t{font-size:1.031rem;font-weight:700;display:flex;align-items:center;gap:8px;min-width:0}
.item .t .tt{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
.item .s{font-size:0.875rem;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.item .end{font-family:var(--font-data);font-weight:800;font-size:1rem;text-align:end;flex:none}
.item.done{opacity:.55}
.item.done .tt{text-decoration:line-through}
.ico{width:42px;height:42px;border-radius:13px;display:grid;place-items:center;flex:none;background:color-mix(in srgb,var(--tc,var(--c8)) 16%,transparent);color:var(--tc,var(--c8));font-size:1.25rem}
.tag{font-size:0.75rem;font-weight:700;padding:3px 10px;border-radius:999px;background:color-mix(in srgb,var(--tc,var(--c8)) 16%,transparent);color:var(--tc,var(--c8));flex:none;white-space:nowrap}
.tc1{--tc:var(--c1)}.tc2{--tc:var(--c2)}.tc3{--tc:var(--c3)}.tc4{--tc:var(--c4)}.tc5{--tc:var(--c5)}.tc6{--tc:var(--c6)}.tc7{--tc:var(--c7)}.tc8{--tc:var(--c8)}
.thumbs{display:flex;gap:6px;flex-wrap:wrap;margin-top:6px}
.thumbs img{width:48px;height:48px;object-fit:cover;border-radius:10px;border:1px solid var(--line)}
.check{width:28px;height:28px;border-radius:9px;border:2px solid var(--line);display:grid;place-items:center;flex:none;cursor:pointer;background:transparent;color:var(--accent-fg)}
.check.on{background:var(--good);border-color:var(--good)}

.btn{border:0;border-radius:16px;padding:12px 18px;font-weight:700;font-size:1rem;cursor:pointer;background:var(--surface-2);color:var(--fg);font-family:var(--font-display);transition:transform .12s ease,filter .15s ease;text-decoration:none;display:inline-flex;align-items:center;justify-content:center;gap:6px}
.btn.primary{background:linear-gradient(135deg,color-mix(in srgb,var(--accent) 85%,#fff),var(--accent));color:var(--accent-fg);box-shadow:0 8px 22px -10px color-mix(in srgb,var(--accent) 80%,transparent)}
.btn.ghost{background:var(--surface-2);border:1px solid var(--line)}
.btn.danger{background:var(--bad-soft);color:var(--bad)}
.btn.big{width:100%;padding:16px;font-size:1.062rem}
.btn.sm{padding:8px 13px;font-size:0.875rem;border-radius:12px}
.btn:focus-visible,.iconbtn:focus-visible,.tab:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,.chip:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.item:active,.btn:active,.tab:active,.chip:active,.card[data-act]:active{transform:scale(.97)}

.chips{display:flex;gap:6px;overflow-x:auto;padding-bottom:2px;scrollbar-width:none}
.chip{flex:none;border:1px solid var(--line);background:var(--surface);border-radius:99px;padding:8px 14px;font-size:0.875rem;font-weight:600;cursor:pointer;color:var(--fg)}
.chip.on{background:var(--accent);border-color:var(--accent);color:var(--accent-fg)}
.seg{display:flex;background:var(--surface-2);border-radius:14px;padding:4px;gap:4px}
.seg button{flex:1;border:0;background:transparent;border-radius:11px;padding:9px;cursor:pointer;font-weight:600;font-size:0.9375rem;color:var(--fg)}
.seg button.on{background:var(--accent);color:var(--accent-fg)}

.tabs{position:fixed;inset-inline:0;bottom:0;z-index:30;background:color-mix(in srgb,var(--surface) 88%,transparent);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-top:1px solid var(--line);display:grid;grid-auto-flow:column;grid-auto-columns:1fr;padding-bottom:env(safe-area-inset-bottom,0px)}
.tab{border:0;background:transparent;padding:8px 2px 9px;display:flex;flex-direction:column;align-items:center;gap:2px;font-size:0.75rem;font-weight:600;color:var(--muted);cursor:pointer;position:relative}
.tab .ti{font-size:1.375rem;line-height:1.1}
.tab.on{color:var(--accent)}
.tab.on::after{content:"";position:absolute;top:0;width:28px;height:3px;border-radius:0 0 4px 4px;background:var(--accent)}
.fab{position:fixed;inset-inline-end:16px;bottom:calc(var(--tabsH,calc(64px + env(safe-area-inset-bottom,0px))) + 14px);z-index:25;border:0;border-radius:18px;background:linear-gradient(135deg,color-mix(in srgb,var(--accent) 85%,#fff),var(--accent));color:var(--accent-fg);padding:14px 20px;font-weight:800;font-size:1rem;font-family:var(--font-display);box-shadow:0 10px 26px -8px color-mix(in srgb,var(--accent) 80%,transparent);cursor:pointer}

.sheet{position:fixed;inset:0;z-index:50;background:rgba(0,0,0,.5);display:flex;align-items:flex-end;justify-content:center}
.sheet-card{background:var(--bg);width:100%;max-width:640px;max-height:92%;overflow:auto;border-radius:22px 22px 0 0;padding:16px 16px calc(22px + env(safe-area-inset-bottom,0px))}
@media (min-width:700px){.sheet{align-items:center}.sheet-card{border-radius:22px}}
.sheet-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:12px}
.sheet-head h3{font-size:1.188rem}
.form{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.form .full{grid-column:1/-1}
.field{display:flex;flex-direction:column;gap:5px;min-width:0}
.field>label{font-size:0.875rem;color:var(--muted);font-weight:600}
.field input,.field select,.field textarea{background:var(--surface-2);border:1px solid var(--line);border-radius:14px;padding:13px 14px;width:100%;min-width:0;font-size:1.062rem}
.field textarea{min-height:90px;resize:vertical}
.field.checkf{flex-direction:row;align-items:center;gap:10px}
.field.checkf input{width:24px;height:24px;accent-color:var(--accent)}
.confirm-me input,.confirm-me select,.confirm-me textarea{border-color:var(--warn);background:var(--warn-soft)}
.stars{display:flex;gap:4px;direction:ltr}
.stars button{border:0;background:transparent;font-size:1.75rem;cursor:pointer;color:var(--line);padding:0 2px;line-height:1}
.stars button.on{color:#FBBF24}
.rows{display:flex;flex-direction:column;gap:8px}
.rowline{display:flex;gap:6px;align-items:center}
.rowline input{background:var(--surface-2);border:1px solid var(--line);border-radius:12px;padding:10px;min-width:0;font-size:1rem}
.empty{text-align:center;padding:36px 16px;color:var(--muted)}
.empty .em{font-size:2.75rem}
.empty h2{color:var(--fg);margin:6px 0}
.kv{display:grid;grid-template-columns:auto 1fr;gap:6px 14px;font-size:0.9375rem}
.kv dt{color:var(--muted)}.kv dd{margin:0;overflow-wrap:anywhere}
.photo-full{width:100%;border-radius:14px}
.sample-badge{background:var(--warn-soft);color:var(--warn);border-radius:12px;padding:10px 14px;font-size:0.875rem;font-weight:700}
#toast{position:fixed;inset-inline:16px;bottom:calc(var(--tabsH,calc(64px + env(safe-area-inset-bottom,0px))) + 24px);z-index:60;display:flex;justify-content:center;pointer-events:none}
#toast span{background:var(--fg);color:var(--bg);padding:11px 18px;border-radius:14px;font-weight:700;box-shadow:0 6px 18px rgba(0,0,0,.25)}
textarea.json{width:100%;min-height:120px;font-size:0.6875rem;direction:ltr;background:var(--surface-2);border:1px solid var(--line);border-radius:12px;padding:10px}
.cal{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:4px}
.cal .dow{font-size:0.75rem;color:var(--muted);text-align:center;font-weight:700}
.cal .day{min-height:58px;border-radius:12px;background:var(--surface);border:1px solid var(--line);padding:4px;font-size:0.75rem;cursor:pointer;overflow:hidden}
.cal .day.out{opacity:.35}
.cal .day.today{border-color:var(--accent)}
.cal .day .dn{font-family:var(--font-data);font-weight:700}
.cal .dotrow{display:flex;gap:3px;flex-wrap:wrap;margin-top:3px}
.cal .dotrow i{width:8px;height:8px;border-radius:50%;background:var(--tc,var(--accent))}
.drive-btn{width:100%;border:0;border-radius:28px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;font-family:var(--font-display);font-weight:800;cursor:pointer;color:#fff}
@media (prefers-reduced-motion:no-preference){
  #view.anim .stack>*,#view.anim .list>*,#view.anim .grid2>*{animation:rise .4s cubic-bezier(.2,.7,.2,1) both}
  #view.anim .stack>*:nth-child(2),#view.anim .list>*:nth-child(2),#view.anim .grid2>*:nth-child(2){animation-delay:.04s}
  #view.anim .stack>*:nth-child(3),#view.anim .list>*:nth-child(3),#view.anim .grid2>*:nth-child(3){animation-delay:.08s}
  #view.anim .stack>*:nth-child(4),#view.anim .list>*:nth-child(4),#view.anim .grid2>*:nth-child(4){animation-delay:.12s}
  #view.anim .stack>*:nth-child(n+5),#view.anim .list>*:nth-child(n+5),#view.anim .grid2>*:nth-child(n+5){animation-delay:.16s}
  @keyframes rise{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
  .sheet-card{animation:up .22s ease-out}@keyframes up{from{transform:translateY(24px);opacity:.6}to{transform:none;opacity:1}}
  .pulse{animation:pulse 1.4s ease-in-out infinite}@keyframes pulse{0%,100%{box-shadow:0 0 0 0 rgba(238,107,85,.6)}50%{box-shadow:0 0 0 22px rgba(238,107,85,0)}}
}

/* ===== v2 look: bigger, clearer, richer (shared by every app) ===== */
body::before{inset:-30%;height:auto;bottom:-30%;background:
  radial-gradient(38% 30% at 82% 8%,color-mix(in srgb,var(--accent) 22%,transparent),transparent 70%),
  radial-gradient(34% 28% at 10% 22%,color-mix(in srgb,var(--accent-2) 16%,transparent),transparent 70%),
  radial-gradient(40% 30% at 60% 95%,color-mix(in srgb,var(--accent) 10%,transparent),transparent 70%)}
body::after{content:"";position:fixed;inset:0;pointer-events:none;z-index:-1;background:linear-gradient(180deg,transparent 0,color-mix(in srgb,var(--bg) 40%,transparent) 100%)}
.top{background:color-mix(in srgb,var(--bg) 78%,transparent);backdrop-filter:blur(16px) saturate(1.4);-webkit-backdrop-filter:blur(16px) saturate(1.4);padding:12px 16px;border-bottom:1px solid color-mix(in srgb,var(--accent) 22%,var(--line))}
.top .logo{width:48px;height:48px;border-radius:15px;box-shadow:0 6px 18px -6px color-mix(in srgb,var(--accent) 70%,transparent)}
.top .title{font-size:1.3rem}
.iconbtn{width:46px;height:46px;font-size:.95rem}
.note{font-size:.88rem;font-weight:600}
.sec-title h2{font-size:1.45rem}
.card,.item{border-color:color-mix(in srgb,var(--fg) 9%,transparent);background:linear-gradient(180deg,color-mix(in srgb,var(--fg) 4%,var(--surface)),var(--surface))}
.card{border-radius:22px;padding:18px}
.hero{background:radial-gradient(120% 90% at 100% 0,color-mix(in srgb,var(--accent) 26%,transparent),transparent 60%),radial-gradient(90% 80% at 0 100%,color-mix(in srgb,var(--accent-2) 18%,transparent),transparent 60%),var(--surface);border-color:color-mix(in srgb,var(--accent) 30%,transparent)}
.gauge .val{font-size:1.9rem}
.item{padding:14px 15px;border-radius:20px;gap:13px}
.item:hover{transform:translateY(-1px)}
.item .t{font-size:1.06rem;font-weight:800}
.item .t .tt{white-space:normal;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.item .s{font-size:.9rem;font-weight:600;white-space:normal;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.item .end{font-size:1.02rem}
.ico{width:48px;height:48px;border-radius:15px;font-size:1.4rem;background:linear-gradient(145deg,color-mix(in srgb,var(--tc,var(--c8)) 30%,transparent),color-mix(in srgb,var(--tc,var(--c8)) 12%,transparent));box-shadow:inset 0 1px 0 color-mix(in srgb,#fff 18%,transparent),0 6px 16px -8px var(--tc,var(--c8))}
.tag{font-size:.8rem;padding:3px 11px}
.pill{font-size:.84rem;padding:5px 12px}
.check{width:32px;height:32px;border-radius:10px}
.btn{min-height:48px;font-size:1rem;border-radius:16px}
.btn.sm{min-height:40px;font-size:.9rem}
.btn.big{font-size:1.1rem;min-height:56px}
.chip{font-size:.92rem;padding:9px 15px;font-weight:700}
.seg button{font-size:.95rem;font-weight:700;padding:10px}
.tab{font-size:.78rem;font-weight:700}
.tab .ti{font-size:1.55rem}
.tab.on .ti{transform:translateY(-2px) scale(1.08);transition:transform .25s cubic-bezier(.3,1.6,.5,1)}
.fab{font-size:1.05rem;padding:15px 22px;border-radius:20px}
.field>label{font-size:.9rem}
.field input,.field select,.field textarea{font-size:1.05rem;font-weight:600}
.rowline input{font-size:1rem;font-weight:600}
.kv{font-size:.98rem}
.alert b{font-size:1.02rem}
.sheet{backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
#toast span{font-size:1rem}
@media (prefers-reduced-motion:no-preference){
  ::view-transition-old(root){animation:vtOut .22s ease both}
  ::view-transition-new(root){animation:vtIn .32s cubic-bezier(.2,.8,.2,1) both}
  @keyframes vtOut{to{opacity:0;transform:scale(.985)}}
  @keyframes vtIn{from{opacity:0;transform:translateY(14px) scale(.99)}}
  body::before{animation:drift 22s ease-in-out infinite alternate}
  @keyframes drift{to{transform:translate3d(-3%,2%,0) rotate(4deg)}}
  .splash{position:fixed;inset:0;z-index:100;display:grid;place-items:center;background:var(--bg);animation:splashOut .45s ease .55s forwards;pointer-events:none}
  .splash img{width:104px;height:104px;border-radius:28px;box-shadow:0 18px 50px -12px color-mix(in srgb,var(--accent) 80%,transparent);animation:pop .55s cubic-bezier(.3,1.5,.5,1) both}
  .splash b{display:block;text-align:center;margin-top:14px;font-family:var(--font-display);font-size:1.4rem;animation:rise .5s .15s both}
  @keyframes pop{from{transform:scale(.4) rotate(-8deg);opacity:0}}
  @keyframes splashOut{to{opacity:0;visibility:hidden}}
  .item:active{transform:scale(.97)}
}
#themeBtn{display:none}
.top .title{white-space:normal;line-height:1.25;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;font-size:1.2rem}

.xfercard{border:2px dashed var(--accent,#E08A50);border-radius:18px;padding:14px;background:linear-gradient(160deg,rgba(224,138,80,.10),rgba(255,255,255,.03))}
.sheet-card>.sheet-head{position:sticky;top:-16px;z-index:5;background:var(--bg);margin:-16px -16px 12px;padding:14px 16px 10px;border-bottom:1px solid var(--line,rgba(255,255,255,.08))}
.scanbtn{width:100%;font-size:1.05rem;padding:14px}
.vaultcard{border:2px solid #6DBE8E;border-radius:18px;padding:14px;background:linear-gradient(160deg,rgba(34,197,94,.14),rgba(255,255,255,.03));margin-bottom:10px}

#taBusy{position:fixed;inset:0;z-index:9999;display:grid;place-items:center;background:rgba(10,10,12,.55);backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px);opacity:0;transition:opacity .25s}
#taBusy.on{opacity:1}
.tabusy-card{background:var(--surface,#1d1f24);color:var(--fg,#fff);border-radius:24px;padding:26px 30px;display:flex;flex-direction:column;align-items:center;gap:10px;box-shadow:0 24px 60px -20px rgba(0,0,0,.7);max-width:86vw;text-align:center}
.tabusy-card b{font-size:1.25rem}.tabusy-card small{opacity:.75;font-size:.95rem}
.tabusy-spin{width:56px;height:56px;border-radius:50%;border:6px solid rgba(218,127,72,.25);border-top-color:var(--accent,#da7f48);animation:tabspin .9s linear infinite}
@keyframes tabspin{to{transform:rotate(360deg)}}

.asstfab{position:fixed;inset-inline-start:14px;bottom:calc(var(--tabsH,calc(64px + env(safe-area-inset-bottom,0px))) + 14px);z-index:24;border:0;border-radius:40px;padding:4px 14px 4px 4px;display:flex;align-items:center;gap:8px;background:var(--surface,#23252b);color:var(--fg,#fff);font-family:inherit;font-weight:800;font-size:1rem;box-shadow:0 10px 26px -10px rgba(0,0,0,.7),0 0 0 2px var(--accent,#da7f48);cursor:pointer;animation:rise .3s ease-out}
.vbfab{position:fixed;inset-inline-start:14px;bottom:calc(var(--tabsH,calc(64px + env(safe-area-inset-bottom,0px))) + 14px);z-index:24;width:50px;height:50px;border-radius:50%;border:0;background:var(--surface,#23252b);color:var(--fg,#fff);font-size:1.35rem;box-shadow:0 6px 18px rgba(0,0,0,.28);cursor:pointer}.vbfab.up{bottom:calc(var(--tabsH,calc(64px + env(safe-area-inset-bottom,0px))) + 74px)}
[dir="rtl"] .asstfab{padding:4px 4px 4px 14px}
.asstfab svg{border-radius:50%;display:block}
.asstlog{max-height:52vh;overflow-y:auto;display:flex;flex-direction:column;gap:8px;padding:4px 2px}
.am{max-width:86%;padding:10px 14px;border-radius:18px;font-size:1.05rem;line-height:1.6;white-space:pre-wrap}
.am.u{align-self:flex-end;background:var(--accent,#da7f48);color:#fff;border-end-end-radius:6px}
.am.a{align-self:flex-start;background:var(--surface-2,#2c2f36);border-end-start-radius:6px}
.am.typing{opacity:.7;animation:pulse 1.2s infinite}
.batchbar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:0 0 12px;padding:12px 14px;border-radius:14px;background:color-mix(in srgb,var(--accent) 16%,var(--surface));border:1px solid color-mix(in srgb,var(--accent) 45%,transparent)}.batchbar b{font-size:1.08rem}.batchbar .btn{margin-inline-start:auto}

.rdcard{border:1.5px solid var(--accent,#e08a50);background:linear-gradient(160deg,rgba(224,138,80,.10),transparent 60%)}.rdpg{background:var(--accent,#e08a50);color:#fff;border-radius:20px;padding:2px 10px;font-weight:700}.rdtour{margin:8px 0}.rdtour summary{cursor:pointer;font-weight:600}.rdtour ol{margin:6px 0 0;padding-inline-start:22px;line-height:1.8}.rdlist{display:grid;gap:8px;margin-top:10px}.rdrow{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:14px;background:var(--surface2,rgba(127,127,127,.08))}.rdrow.ok{opacity:.6}.rdn{width:28px;height:28px;flex:0 0 28px;border-radius:50%;display:grid;place-items:center;font-weight:700;background:rgba(127,127,127,.18)}.rdrow.ok .rdn{background:var(--good,#6DBE8E);color:#fff}
/* ---- layout tidy-up (v201): nothing may push the page sideways; wrapped chips become a neat grid; segments wrap ---- */
html,body{max-width:100%;overflow-x:hidden}
#view,.card,.stack,.field,.sheet-card,#sheetCard,.item .main{min-width:0;max-width:100%}
.chips{max-width:100%}
.chips[style*="wrap"],.chips.wrapc,.chips.wrapchips{display:grid;grid-template-columns:repeat(auto-fill,minmax(7.6em,1fr));gap:6px;overflow:visible}
.chips[style*="wrap"] .chip,.chips.wrapc .chip,.chips.wrapchips .chip{white-space:normal;text-align:center;line-height:1.3;padding:8px 8px;font-size:.84rem;display:flex;align-items:center;justify-content:center;gap:4px;min-height:42px}
.chip{font-size:.86rem;padding:8px 13px}
.seg{flex-wrap:wrap}
.seg button{flex:1 1 auto;white-space:nowrap;padding:9px 10px;font-size:.88rem;line-height:1.25}
.item .ico{flex:0 0 auto}
.sec-title h2{font-size:1.2rem}
.note{overflow-wrap:anywhere}
.asstfab{padding:4px!important;border-radius:50%!important}.asstfab span{display:none}
.vbfab{width:48px;height:48px}.vbfab.up{bottom:calc(var(--tabsH,calc(64px + env(safe-area-inset-bottom,0px))) + 72px)}
#view{padding-bottom:calc(var(--tabsH,72px) + 120px)}

/* ===== v209 — fixed top bar + a denser, professional look (more on one screen, less scrolling) ===== */
/* the page scrolls on the window again (overflow-x:hidden on html+body turned <body> into its own scroller: the bar slid down and some lists wouldn't scroll) */
html{overflow-x:hidden}
body{overflow-x:visible;overflow-x:clip;padding-top:0}
.top{position:sticky;top:0;padding:calc(env(safe-area-inset-top,0px) + 6px) 12px 8px;gap:8px;background:color-mix(in srgb,var(--bg) 92%,transparent)}
.top .logo{width:34px;height:34px;border-radius:10px}
.top .title{font-size:1.02rem!important;-webkit-line-clamp:1}
.iconbtn{width:34px;height:34px;border-radius:10px;font-size:.8rem}
.sheet-card{max-height:calc(100% - env(safe-area-inset-top,0px) - 10px);overscroll-behavior:contain;-webkit-overflow-scrolling:touch;padding:14px 14px calc(18px + env(safe-area-inset-bottom,0px))}
.sheet-card>.sheet-head{top:-14px;margin:-14px -14px 10px;padding:10px 14px 8px}
.sheet-head h3{font-size:1.02rem;line-height:1.35}
main{padding-inline:12px;padding-block:10px calc(var(--tabsH,calc(64px + env(safe-area-inset-bottom,0px))) + 80px)}
.stack{gap:10px}
.card{padding:13px 14px;border-radius:18px}
.item{padding:10px 12px;border-radius:15px;gap:10px}
.item .t{font-size:.95rem}
.item .s{font-size:.8rem}
.item .end{font-size:.92rem}
.ico{width:38px;height:38px;border-radius:12px;font-size:1.15rem}
.btn{min-height:42px;font-size:.92rem;padding:9px 14px;border-radius:13px}
.btn.sm{min-height:34px;font-size:.82rem;padding:6px 11px;border-radius:10px}
.btn.big{min-height:48px;font-size:1rem;padding:12px}
.chip{font-size:.8rem;padding:6px 11px}
.seg button{font-size:.82rem;padding:7px 8px}
.note{font-size:.8rem;font-weight:500}
.pill{font-size:.75rem;padding:3px 10px}.tag{font-size:.72rem}
.sec-title h2{font-size:1.08rem}
.gauge .val{font-size:1.5rem}
.field>label{font-size:.8rem}
.field input,.field select,.field textarea{font-size:.95rem;padding:10px 12px;border-radius:12px}
.kv{font-size:.88rem}
.tab{font-size:.68rem;padding:6px 2px 7px}.tab .ti{font-size:1.3rem}
.fab{font-size:.92rem;padding:12px 18px;border-radius:16px}
.vbfab{width:44px;height:44px}.asstfab svg{width:40px;height:40px}
#toast span{font-size:.9rem}
.item .s{-webkit-line-clamp:3}
.am{font-size:.95rem}
h2{font-size:1.15rem}h3{font-size:1.02rem}
.numrtl{font-family:var(--font-data);font-weight:700;font-variant-numeric:tabular-nums}
#toast .tbtn{pointer-events:auto;margin-inline-start:8px;border:0;border-radius:9px;padding:4px 10px;font-weight:800;background:var(--accent,#e08a50);color:#fff;font-family:inherit;cursor:pointer}

/* ===== v222 «pop» layer — every app gets its own colours (set per app at build: --p1/--p2 page, --pc1/--pc2 cards, --pm main, --pmark watermark)
   on the shared Tracks identity: many colours, shapes (circles, triangles, hexagons), glowing picks, Tracks orange in titles ===== */
body.pop{--bg:var(--p2);--surface:var(--pc2);--surface-2:color-mix(in srgb,var(--pc1) 85%,#fff);--line:rgba(255,255,255,.14);--fg:#F4F6F8;--muted:#C3CAD3;--accent:var(--pm);--accent-fg:#111;color:var(--fg);color-scheme:dark;
  background:radial-gradient(110% 55% at 85% -8%,color-mix(in srgb,var(--pm) 32%,transparent) 0,transparent 60%),radial-gradient(80% 45% at -5% 35%,color-mix(in srgb,var(--pc1) 70%,transparent) 0,transparent 60%),linear-gradient(180deg,var(--p1),var(--p2) 75%)!important;background-attachment:fixed!important}
body.pop::before{background:var(--pmark)!important;inset:0!important;height:auto!important;animation:none!important}
body.pop::after{background:none!important}
body.pop .top{background:color-mix(in srgb,var(--p2) 86%,transparent)!important;border-bottom-color:color-mix(in srgb,var(--pm) 35%,transparent)!important}
body.pop .top .title{color:#F2AE7E!important}
body.pop .tabs{background:color-mix(in srgb,var(--p2) 94%,transparent)!important;border-top-color:color-mix(in srgb,var(--pm) 30%,transparent)!important}
body.pop .tab.on{color:var(--pm)!important}body.pop .tab.on .ti{filter:drop-shadow(0 0 8px color-mix(in srgb,var(--pm) 80%,transparent))}
body.pop .card,body.pop .item{background:linear-gradient(165deg,var(--pc1),var(--pc2) 75%)!important;border:1px solid rgba(255,255,255,.14)!important;box-shadow:0 12px 26px -16px rgba(0,0,0,.7)}
body.pop #view .stack>.card,body.pop #view>.stack>.card{position:relative;overflow:hidden}
body.pop #view .stack>.card:nth-of-type(6n+1){border-top:3px solid #4AA3F0!important}body.pop #view .stack>.card:nth-of-type(6n+2){border-top:3px solid #F29A4A!important}body.pop #view .stack>.card:nth-of-type(6n+3){border-top:3px solid #9B7CF5!important}
body.pop #view .stack>.card:nth-of-type(6n+4){border-top:3px solid #5CC46A!important}body.pop #view .stack>.card:nth-of-type(6n+5){border-top:3px solid #F06A64!important}body.pop #view .stack>.card:nth-of-type(6n){border-top:3px solid #F2C44E!important}
body.pop #view .stack>.card::after{content:"";position:absolute;pointer-events:none;inset-inline-end:-22px;top:-22px;width:84px;height:84px;border-radius:50%;background:radial-gradient(circle,color-mix(in srgb,var(--pm) 35%,transparent),transparent 70%)}
body.pop #view .stack>.card:nth-of-type(3n+2)::after{border-radius:0;clip-path:polygon(50% 0,100% 100%,0 100%);top:-12px;inset-inline-end:-8px;width:64px;height:56px;background:linear-gradient(160deg,rgba(242,154,74,.32),transparent)}
body.pop #view .stack>.card:nth-of-type(3n)::after{border-radius:0;clip-path:polygon(25% 5%,75% 5%,100% 50%,75% 95%,25% 95%,0 50%);width:70px;height:62px;top:-16px;background:linear-gradient(160deg,rgba(155,124,245,.34),transparent)}
body.pop #view .stack>.card>h3:first-child,body.pop #view .stack>.card>b:first-child,body.pop .sec-title h2{display:inline-flex;align-items:center;gap:6px;padding:4px 13px;border-radius:999px;width:max-content;max-width:100%;background:linear-gradient(135deg,rgba(255,255,255,.16),rgba(255,255,255,.04));box-shadow:0 6px 16px -8px rgba(0,0,0,.6),inset 0 1px 0 rgba(255,255,255,.2)}
body.pop #view .stack>.card:nth-of-type(6n+1)>b:first-child,body.pop #view .stack>.card:nth-of-type(6n+1)>h3:first-child{color:#9FD0FF}body.pop #view .stack>.card:nth-of-type(6n+2)>b:first-child,body.pop #view .stack>.card:nth-of-type(6n+2)>h3:first-child{color:#FFC08A}
body.pop #view .stack>.card:nth-of-type(6n+3)>b:first-child,body.pop #view .stack>.card:nth-of-type(6n+3)>h3:first-child{color:#C9B8FF}body.pop #view .stack>.card:nth-of-type(6n+4)>b:first-child,body.pop #view .stack>.card:nth-of-type(6n+4)>h3:first-child{color:#A9E8A8}
body.pop #view .stack>.card:nth-of-type(6n+5)>b:first-child,body.pop #view .stack>.card:nth-of-type(6n+5)>h3:first-child{color:#FFADA8}body.pop #view .stack>.card:nth-of-type(6n)>b:first-child,body.pop #view .stack>.card:nth-of-type(6n)>h3:first-child{color:#FFE08A}
body.pop .item .s b,body.pop .note b,body.pop .item .end{color:#FFE08A}
body.pop .item .end{padding:2px 10px;border-radius:999px;background:rgba(255,224,138,.12)}
body.pop .ico{box-shadow:0 6px 14px -8px rgba(0,0,0,.7),inset 0 1px 0 rgba(255,255,255,.2)}
body.pop .list .item:nth-child(6n+1) .ico{background:radial-gradient(circle at 35% 30%,#7CC4FF,#2F7FD0)!important;border-radius:50%!important;color:#fff}
body.pop .list .item:nth-child(6n+2) .ico{background:linear-gradient(180deg,#FFC08A,#E07A35)!important;clip-path:polygon(25% 4%,75% 4%,100% 50%,75% 96%,25% 96%,0 50%);border-radius:0!important}
body.pop .list .item:nth-child(6n+3) .ico{background:linear-gradient(180deg,#B9A6FF,#7656EC)!important;border-radius:16px!important}
body.pop .list .item:nth-child(6n+4) .ico{background:radial-gradient(circle at 35% 30%,#A9EBA0,#3FA24C)!important;border-radius:50%!important}
body.pop .list .item:nth-child(6n+5) .ico{background:linear-gradient(180deg,#FFA8A3,#D9504A)!important;clip-path:polygon(50% 0,100% 38%,82% 100%,18% 100%,0 38%);border-radius:0!important}
body.pop .list .item:nth-child(6n) .ico{background:linear-gradient(180deg,#FFE08A,#E3A92A)!important;border-radius:14px!important}
body.pop .btn{background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.12)}
body.pop .btn.primary,body.pop .fab{background:linear-gradient(180deg,color-mix(in srgb,var(--pm) 70%,#fff),var(--pm))!important;color:#111!important;border:0;box-shadow:0 10px 22px -10px var(--pm)}
body.pop .fab{border-radius:999px!important}
body.pop .btn.ghost{border:1px dashed rgba(242,174,126,.55)!important;color:#F2AE7E;background:none}
body.pop .btn:active,body.pop .item:active,body.pop .chip:active{transform:scale(.97);box-shadow:0 0 0 2px var(--pm)!important}
body.pop .chip{color:#EEF1F4!important;border-width:1.5px!important;background:rgba(255,255,255,.06)}
body.pop .chip:nth-child(6n+1){border-color:rgba(74,163,240,.5)}body.pop .chip:nth-child(6n+2){border-color:rgba(242,154,74,.55)}body.pop .chip:nth-child(6n+3){border-color:rgba(155,124,245,.55)}body.pop .chip:nth-child(6n+4){border-color:rgba(92,196,106,.55)}body.pop .chip:nth-child(6n+5){border-color:rgba(240,106,100,.55)}body.pop .chip:nth-child(6n){border-color:rgba(242,196,78,.55)}
body.pop .chips[style*="wrap"] .chip::before,body.pop .chips.wrapc .chip::before{content:"";display:inline-block;width:9px;height:9px;margin-inline-end:6px;background:currentColor;border-radius:50%;opacity:.8;vertical-align:1px}
body.pop .chips[style*="wrap"] .chip:nth-child(3n+2)::before{border-radius:0;clip-path:polygon(50% 0,100% 100%,0 100%)}body.pop .chips[style*="wrap"] .chip:nth-child(3n)::before{border-radius:2px;transform:rotate(45deg)}
body.pop .chip.on{color:#111!important;font-weight:900!important;transform:translateY(-1px)}
body.pop .chip.on::before{content:"✓"!important;width:auto!important;height:auto!important;background:none!important;clip-path:none!important;transform:none!important;opacity:1!important;margin-inline-end:5px}
body.pop .chip:nth-child(6n+1).on{background:linear-gradient(180deg,#9FD0FF,#3F93E8)!important;box-shadow:0 0 0 2px rgba(159,208,255,.4),0 8px 18px -8px #3F93E8!important}
body.pop .chip:nth-child(6n+2).on{background:linear-gradient(180deg,#FFC08A,#E8853F)!important;box-shadow:0 0 0 2px rgba(255,192,138,.4),0 8px 18px -8px #E8853F!important}
body.pop .chip:nth-child(6n+3).on{background:linear-gradient(180deg,#C9B8FF,#7B5CF0)!important;color:#fff!important;box-shadow:0 0 0 2px rgba(201,184,255,.4),0 8px 18px -8px #7B5CF0!important}
body.pop .chip:nth-child(6n+4).on{background:linear-gradient(180deg,#B6EC94,#45B649)!important;box-shadow:0 0 0 2px rgba(182,236,148,.4),0 8px 18px -8px #45B649!important}
body.pop .chip:nth-child(6n+5).on{background:linear-gradient(180deg,#FFADA8,#E0564F)!important;box-shadow:0 0 0 2px rgba(255,173,168,.4),0 8px 18px -8px #E0564F!important}
body.pop .chip:nth-child(6n).on{background:linear-gradient(180deg,#FFE08A,#E3A92A)!important;box-shadow:0 0 0 2px rgba(255,224,138,.4),0 8px 18px -8px #E3A92A!important}
body.pop .seg{background:rgba(255,255,255,.07)!important}body.pop .seg button.on{background:linear-gradient(180deg,#FFC08A,#E07A35)!important;color:#2A1408!important;box-shadow:0 8px 18px -8px #E07A35}
body.pop .tag,body.pop .pill{border-radius:999px!important;font-weight:800!important}
body.pop .field>label{color:#FFC08A}
body.pop .field input,body.pop .field select,body.pop .field textarea{background:rgba(0,0,0,.28)!important;border:1px solid rgba(255,255,255,.18)!important;color:#fff;box-shadow:inset 0 2px 6px rgba(0,0,0,.35)}
body.pop .field input:focus,body.pop .field textarea:focus,body.pop .field select:focus{border-color:#F2AE7E!important;box-shadow:0 0 0 3px rgba(242,174,126,.25)!important;outline:0}
body.pop .sheet-card{background:linear-gradient(180deg,var(--pc2),var(--p2))!important}body.pop .sheet-card>.sheet-head{background:var(--pc2)!important}
body.pop .gauge .val,body.pop .tile .val{color:#fff}body.pop .hero{background:radial-gradient(120% 90% at 100% 0,color-mix(in srgb,var(--pm) 40%,transparent),transparent 60%),linear-gradient(165deg,var(--pc1),var(--pc2))!important}
body.pop .xfercard{border-color:#F29A4A!important;background:linear-gradient(150deg,rgba(242,154,74,.22),rgba(74,163,240,.12) 60%,var(--pc2))!important}
/* v223: calmer main colour, and every tile/icon in its own colour */
body.pop{background:radial-gradient(110% 55% at 85% -8%,color-mix(in srgb,var(--pm) 18%,transparent) 0,transparent 60%),radial-gradient(80% 45% at -5% 35%,color-mix(in srgb,var(--pc1) 60%,transparent) 0,transparent 60%),linear-gradient(180deg,var(--p1),var(--p2) 75%)!important;background-attachment:fixed!important}
body.pop #view [class*="grid"]>:not(.field):not(input):not(label):nth-child(6n+1){--tc:#4AA3F0}body.pop #view [class*="grid"]>:not(.field):not(input):not(label):nth-child(6n+2){--tc:#F29A4A}
body.pop #view [class*="grid"]>:not(.field):not(input):not(label):nth-child(6n+3){--tc:#9B7CF5}body.pop #view [class*="grid"]>:not(.field):not(input):not(label):nth-child(6n+4){--tc:#5CC46A}
body.pop #view [class*="grid"]>:not(.field):not(input):not(label):nth-child(6n+5){--tc:#F06A64}body.pop #view [class*="grid"]>:not(.field):not(input):not(label):nth-child(6n){--tc:#E8B92A}
body.pop #view [class*="grid"]>:is(button,a,.card,.tile,.gauge){background:linear-gradient(160deg,color-mix(in srgb,var(--tc,#4AA3F0) 30%,transparent),color-mix(in srgb,var(--tc,#4AA3F0) 8%,transparent))!important;border:1.5px solid color-mix(in srgb,var(--tc,#4AA3F0) 55%,transparent)!important;box-shadow:0 10px 22px -14px var(--tc,#000)}
body.pop #view [class*="grid"]>:is(button,a,.card,.tile)>span:first-child{display:inline-grid;place-items:center;width:44px;height:44px;font-size:1.35rem;border-radius:50%;background:radial-gradient(circle at 35% 30%,color-mix(in srgb,var(--tc,#4AA3F0) 65%,#fff),var(--tc,#4AA3F0));box-shadow:0 6px 14px -6px var(--tc,#000),inset 0 1px 0 rgba(255,255,255,.35)}
body.pop #view [class*="grid"]>:nth-child(3n+2)>span:first-child{border-radius:14px}body.pop #view [class*="grid"]>:nth-child(3n)>span:first-child{border-radius:0;clip-path:polygon(25% 4%,75% 4%,100% 50%,75% 96%,25% 96%,0 50%)}
body.pop #view [class*="grid"]>:is(button,a,.card,.tile) b{color:color-mix(in srgb,var(--tc,#fff) 45%,#fff)}
body.pop .tile .lbl,body.pop .gauge .lbl{color:color-mix(in srgb,var(--tc,#fff) 50%,#fff)}
body.pop .item .ico{color:#fff!important}
/* ===== v229 «gym-level» colours for every app: pulse rings + week chart, each list row its own colour, coloured pills/bars/buttons, varied shapes ===== */
.pulse{position:relative;overflow:hidden}
.phead{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:10px}.phead b{font-size:1.02rem}
.phead .pill{padding:3px 11px;border-radius:999px;background:linear-gradient(135deg,#F2AE7E,#D9783F);color:#2A1408;font-weight:900;font-size:.8rem;box-shadow:0 6px 14px -6px #D9783F}
.prings{display:grid;grid-template-columns:repeat(auto-fit,minmax(70px,1fr));gap:8px;text-align:center}
.pring{position:relative;display:flex;flex-direction:column;align-items:center;min-width:0}
.pring svg{width:74px;height:74px;filter:drop-shadow(0 6px 12px color-mix(in srgb,var(--tc) 45%,transparent))}
.pring .pr0{fill:none;stroke:rgba(255,255,255,.12);stroke-width:9}
.pring .pr1{fill:none;stroke-width:9;stroke-linecap:round;transform:rotate(-90deg);transform-origin:center;animation:prIn .9s cubic-bezier(.2,.8,.2,1)}
@keyframes prIn{from{stroke-dasharray:0 999}}
.pring .pv{position:absolute;top:0;height:74px;display:grid;place-items:center;width:74px;font-size:1.25rem;font-weight:900;color:#fff;text-shadow:0 2px 8px color-mix(in srgb,var(--tc) 70%,#000)}
.pring b{font-size:.74rem;line-height:1.3;color:color-mix(in srgb,var(--tc) 45%,#fff);margin-top:2px;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pring small{font-size:.66rem;font-weight:800;color:#FFE08A}
.pchart{margin-top:12px;padding:10px 10px 6px;border-radius:16px;background:rgba(0,0,0,.22);box-shadow:inset 0 2px 8px rgba(0,0,0,.3)}
.pct{display:flex;justify-content:space-between;align-items:center;font-size:.82rem;margin-bottom:6px}.pct span{color:#F2AE7E;font-weight:900}
.pbars{display:grid;grid-template-columns:repeat(7,1fr);gap:6px;height:92px;align-items:end}
.pbar{height:100%;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;gap:2px;min-width:0}
.pbar i{display:block;width:70%;min-height:6px;border-radius:8px 8px 3px 3px;background:linear-gradient(180deg,color-mix(in srgb,var(--tc) 55%,#fff),var(--tc));box-shadow:0 4px 12px -4px var(--tc);animation:pbIn .8s cubic-bezier(.2,.8,.2,1)}
@keyframes pbIn{from{transform:scaleY(0);transform-origin:bottom}}
.pbar em{font-style:normal;font-size:.66rem;font-weight:900;color:#fff;min-height:1em}.pbar span{font-size:.66rem;color:var(--muted);font-weight:700}
.pbar.td span{color:#F2AE7E;font-weight:900}.pbar.td i{background:linear-gradient(180deg,#FFC08A,#E07A35);box-shadow:0 0 14px -2px #E07A35}

/* each list row in its own colour (stripe + soft tint + pill) */
body.pop .list .item{--tc:#4AA3F0;background:linear-gradient(100deg,color-mix(in srgb,var(--tc) 16%,var(--pc1)),var(--pc2) 70%)!important;border-inline-start:4px solid var(--tc)!important}
body.pop .list .item:nth-child(6n+2){--tc:#F29A4A}body.pop .list .item:nth-child(6n+3){--tc:#9B7CF5}body.pop .list .item:nth-child(6n+4){--tc:#5CC46A}body.pop .list .item:nth-child(6n+5){--tc:#F06A64}body.pop .list .item:nth-child(6n){--tc:#E8B92A}
body.pop .list .item .end{color:#fff!important;background:linear-gradient(180deg,color-mix(in srgb,var(--tc) 75%,#fff),var(--tc))!important;box-shadow:0 6px 14px -6px var(--tc);text-shadow:0 1px 2px rgba(0,0,0,.35)}
body.pop .list .item .t{color:#fff}body.pop .list .item .bar>i{background:linear-gradient(90deg,var(--tc),color-mix(in srgb,var(--tc) 50%,#fff))!important;box-shadow:0 0 10px -2px var(--tc)}
body.pop .bar{background:rgba(0,0,0,.3)!important;height:9px}
body.pop .item .btn.sm{background:linear-gradient(180deg,color-mix(in srgb,var(--tc,#5CC46A) 70%,#fff),var(--tc,#5CC46A))!important;color:#111!important;border:0;font-weight:900}
/* varied card silhouettes: not all rounded rectangles */
body.pop #view .stack>.card:nth-of-type(4n+2){border-radius:28px 8px 28px 8px}
body.pop #view .stack>.card:nth-of-type(4n+3){border-radius:8px 28px 8px 28px}
body.pop .list .item:nth-child(3n+2){border-radius:22px 6px 22px 6px!important}
/* rows of buttons: each button its own colour, small shape before the label */
body.pop #view .row>.btn:not(.primary):not(.ghost),body.pop #view .stack>.btn:not(.primary):not(.ghost){--tc:#4AA3F0;border:1.5px solid color-mix(in srgb,var(--tc) 60%,transparent)!important;background:linear-gradient(180deg,color-mix(in srgb,var(--tc) 22%,transparent),color-mix(in srgb,var(--tc) 6%,transparent))!important;color:color-mix(in srgb,var(--tc) 35%,#fff)!important;font-weight:800}
body.pop #view .row>.btn:nth-child(6n+2),body.pop #view .stack>.btn:nth-of-type(6n+2){--tc:#F29A4A}body.pop #view .row>.btn:nth-child(6n+3),body.pop #view .stack>.btn:nth-of-type(6n+3){--tc:#9B7CF5}
body.pop #view .row>.btn:nth-child(6n+4),body.pop #view .stack>.btn:nth-of-type(6n+4){--tc:#5CC46A}body.pop #view .row>.btn:nth-child(6n+5),body.pop #view .stack>.btn:nth-of-type(6n+5){--tc:#F06A64}body.pop #view .row>.btn:nth-child(6n),body.pop #view .stack>.btn:nth-of-type(6n){--tc:#E8B92A}
body.pop #view .btn.primary{border-radius:999px!important;font-weight:900}
body.pop .sec-title h2{background:linear-gradient(135deg,rgba(242,174,126,.28),rgba(242,174,126,.06))!important;color:#FFD3B0;border:1px solid rgba(242,174,126,.35)}
body.pop .sec-title .note,body.pop .sec-title>span{color:#FFE08A;font-weight:800}
body.pop .tag{background:color-mix(in srgb,var(--pm) 22%,transparent)!important;color:color-mix(in srgb,var(--pm) 40%,#fff)!important;border:1px solid color-mix(in srgb,var(--pm) 45%,transparent)!important}
body.pop .field input[type=search],body.pop #view>.stack>.field:first-child input{border-radius:999px!important}
body.pop .sample-badge{background:linear-gradient(135deg,rgba(242,174,126,.3),rgba(232,185,42,.12))!important;color:#FFD3B0!important;border-radius:999px!important}
/* v229 fix: text labels in grid tiles are not icon bubbles */
body.pop #view [class*="grid"]>:is(button,a,.card,.tile)>span.lbl:first-child,body.pop #view [class*="grid"]>:is(button,a,.card,.tile)>span.cnt:first-child{display:block;width:auto;height:auto;font-size:.9rem;border-radius:0;clip-path:none;background:none;box-shadow:none;font-weight:800}

/* «النبض الأكتف» — rings and day bars are buttons that open their section */
button.pring,button.pbar{background:none;border:0;color:inherit;font:inherit;padding:4px 2px;border-radius:16px;cursor:pointer;-webkit-tap-highlight-color:transparent;transition:transform .15s,background .15s}
button.pring:active,button.pbar:active{transform:scale(.93);background:color-mix(in srgb,var(--tc) 18%,transparent)}
button.pring::after{content:"›";position:absolute;top:2px;inset-inline-end:6px;font-weight:900;color:var(--tc);opacity:.8;font-size:.9rem}
button.pbar{display:flex}
/* ===== v236 — top bar bigger & crisp (no blur), coloured icon buttons in different shapes, app name/logo stand out ===== */
.top{backdrop-filter:none!important;-webkit-backdrop-filter:none!important;background:linear-gradient(180deg,color-mix(in srgb,var(--p1,#1F2227) 92%,#000),color-mix(in srgb,var(--p2,#15171B) 96%,#000))!important;padding:calc(env(safe-area-inset-top,0px) + 8px) 12px 10px!important;gap:7px!important;border-bottom:2px solid color-mix(in srgb,var(--pm,#E08A50) 60%,transparent)!important;box-shadow:0 10px 22px -14px rgba(0,0,0,.9)}
.top .logo{width:46px!important;height:46px!important;border-radius:50%!important;box-shadow:0 0 0 2.5px var(--pm,#F2AE7E),0 8px 18px -6px var(--pm,#F2AE7E)!important}
.top .title{font-size:1.22rem!important;font-weight:900!important;color:#F2AE7E!important;text-shadow:0 2px 12px rgba(242,154,74,.4)}
.top .iconbtn{--ic:#4AA3F0;width:40px!important;height:40px!important;font-size:1.08rem!important;font-weight:900;border:0!important;color:#fff!important;border-radius:50%!important;background:radial-gradient(circle at 35% 28%,color-mix(in srgb,var(--ic) 72%,#fff),var(--ic))!important;box-shadow:0 6px 14px -5px var(--ic),inset 0 1px 0 rgba(255,255,255,.4)!important;text-shadow:0 1px 3px rgba(0,0,0,.35);transition:transform .15s}
.top .iconbtn:active{transform:scale(.88)}
.top>.iconbtn:last-child{--ic:#6B7484;clip-path:polygon(25% 4%,75% 4%,100% 50%,75% 96%,25% 96%,0 50%);border-radius:0!important;width:44px!important}
.top>.iconbtn:nth-last-child(2){--ic:#45B06A;border-radius:12px!important}
.top>.iconbtn:nth-last-child(3){--ic:#8B6CF0}
.top>.iconbtn:nth-last-child(4){--ic:#3F93E8;border-radius:0!important;clip-path:polygon(50% 0,100% 38%,82% 100%,18% 100%,0 38%);width:44px!important}
.top>.iconbtn:nth-last-child(4):not(:has(>*)){font-size:1rem!important}
.top .homebtn{--ic:#E8853F!important;border-radius:14px!important;transform:none!important}
.top select{border-radius:999px!important;border:1.5px solid var(--pm,#E08A50)!important;font-weight:800}
/* the floating mic: big, clear, coloured — it only opens the voice box; recording starts on its own button */
.vbfab{width:54px!important;height:54px!important;font-size:1.55rem!important;background:radial-gradient(circle at 35% 28%,#FFB98A,#E0703A)!important;color:#fff!important;box-shadow:0 0 0 4px rgba(242,154,74,.22),0 10px 22px -6px #E0703A!important}
body.recon .vbfab{background:radial-gradient(circle at 35% 28%,#FF9A94,#D93A33)!important;animation:recP 1.1s ease-in-out infinite}
#recPill{position:fixed;z-index:9990;top:calc(env(safe-area-inset-top,0px) + 70px);left:50%;transform:translateX(-50%);border:0;border-radius:999px;padding:9px 18px;background:linear-gradient(180deg,#F0605A,#C9302A);color:#fff;font:800 .95rem var(--font-body);box-shadow:0 10px 26px -8px #C9302A;display:flex;align-items:center;gap:8px;cursor:pointer}
#recPill i{width:11px;height:11px;border-radius:50%;background:#fff;animation:recP 1.1s infinite}
@keyframes recP{50%{box-shadow:0 0 0 10px rgba(240,96,90,0);opacity:.55}}
/* the pulse beats like a heart (faster + red when something is late) and shows today's most important line */
.pulse{animation:hb 2.6s ease-in-out infinite;border:1.5px solid color-mix(in srgb,var(--pm,#E08A50) 45%,transparent)!important}
.pheart{font-style:normal;display:inline-block;animation:hbi 1.3s ease-in-out infinite}
@keyframes hb{0%,100%{box-shadow:0 12px 26px -16px rgba(0,0,0,.7)}12%{box-shadow:0 0 0 3px color-mix(in srgb,var(--pm,#E08A50) 35%,transparent),0 0 26px -4px var(--pm,#E08A50)}24%{box-shadow:0 12px 26px -16px rgba(0,0,0,.7)}36%{box-shadow:0 0 0 2px color-mix(in srgb,var(--pm,#E08A50) 25%,transparent),0 0 18px -6px var(--pm,#E08A50)}}
@keyframes hbi{0%,100%{transform:scale(1)}15%{transform:scale(1.3)}30%{transform:scale(1)}45%{transform:scale(1.18)}}
.pulse .pring svg{animation:hbr 2.6s ease-in-out infinite}@keyframes hbr{12%{transform:scale(1.06)}24%{transform:scale(1)}36%{transform:scale(1.03)}}
.pulse.pl-bad{--pm:#F06A64;animation-duration:1.4s}.pulse.pl-bad .pring svg{animation-duration:1.4s}
.pulse.pl-ok .pheart{filter:hue-rotate(0)}
.palert{margin:-2px 0 10px;padding:7px 12px;border-radius:999px;font-weight:800;font-size:.86rem;background:linear-gradient(90deg,rgba(242,154,74,.28),rgba(242,154,74,.06));border:1px solid rgba(242,154,74,.45);color:#FFD9B8}
.pl-bad .palert{background:linear-gradient(90deg,rgba(240,106,100,.32),rgba(240,106,100,.06));border-color:rgba(240,106,100,.55);color:#FFD0CC}
.pl-good .palert{background:linear-gradient(90deg,rgba(92,196,106,.28),rgba(92,196,106,.06));border-color:rgba(92,196,106,.5);color:#D4F5D8}
@media (prefers-reduced-motion:reduce){.pulse,.pheart,.pulse .pring svg{animation:none}}
/* v236: short values at the end of a row become round / hexagon / diamond badges (not long pills) */
body.pop .list .item .end.endc{width:56px;height:56px;min-width:56px;padding:0!important;display:flex!important;flex-direction:column;align-items:center;justify-content:center;line-height:1.05;border-radius:50%!important;text-align:center;font-size:.8rem}
body.pop .list .item .end.endc b{font-size:1.05rem;font-weight:900}body.pop .list .item .end.endc small{font-size:.66rem;font-weight:800;opacity:.95}
body.pop .list .item:nth-child(3n+2) .end.endc{border-radius:0!important;clip-path:polygon(25% 4%,75% 4%,100% 50%,75% 96%,25% 96%,0 50%);width:60px}
body.pop .list .item:nth-child(3n) .end.endc{border-radius:16px!important}
/* v236 bubbles: filter rows as round coloured bubbles */
.bubs{display:flex;gap:12px;overflow-x:auto;padding:6px 2px 8px;scrollbar-width:none;-webkit-overflow-scrolling:touch}.bubs::-webkit-scrollbar{display:none}
.bub{--bc:#4AA3F0;flex:none;width:66px;border:0;background:none;color:var(--fg);font-family:inherit;display:flex;flex-direction:column;align-items:center;gap:4px;cursor:pointer;position:relative;padding:0}
.bub:nth-child(6n+2){--bc:#F29A4A}.bub:nth-child(6n+3){--bc:#9B7CF5}.bub:nth-child(6n+4){--bc:#5CC46A}.bub:nth-child(6n+5){--bc:#F06A64}.bub:nth-child(6n){--bc:#E8B92A}
.bub i{font-style:normal;width:52px;height:52px;display:grid;place-items:center;font-size:1.5rem;border-radius:50%;background:radial-gradient(circle at 35% 28%,color-mix(in srgb,var(--bc) 45%,transparent),color-mix(in srgb,var(--bc) 18%,transparent));border:2px solid color-mix(in srgb,var(--bc) 60%,transparent);transition:transform .15s}
.bub span{font-size:.72rem;font-weight:800;line-height:1.2;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:color-mix(in srgb,var(--bc) 35%,#fff)}
.bub em{position:absolute;top:-3px;inset-inline-end:2px;font-style:normal;min-width:20px;height:20px;padding:0 5px;border-radius:999px;background:var(--bc);color:#111;font-size:.7rem;font-weight:900;display:grid;place-items:center}
.bub.on i{background:radial-gradient(circle at 35% 28%,color-mix(in srgb,var(--bc) 70%,#fff),var(--bc));border-color:#fff;box-shadow:0 0 0 3px color-mix(in srgb,var(--bc) 40%,transparent),0 8px 18px -6px var(--bc);transform:scale(1.08)}
.bub.on span{color:#fff;font-weight:900}.bub:active i{transform:scale(.9)}
.bhex .bub i{border-radius:0;clip-path:polygon(25% 4%,75% 4%,100% 50%,75% 96%,25% 96%,0 50%);border:0;width:56px}
.bhex .bub:nth-child(even) i{clip-path:none;border-radius:16px;border:2px solid color-mix(in srgb,var(--bc) 60%,transparent);width:50px}
.bpeople .bub i{font-size:1.7rem}
/* traffic-light status row */
.lights{display:grid;grid-template-columns:repeat(5,1fr);gap:6px;padding:8px 6px;border-radius:999px;background:rgba(0,0,0,.25);box-shadow:inset 0 2px 8px rgba(0,0,0,.35)}
.lt{--bc:#9AA1AB;border:0;background:none;color:var(--fg);font-family:inherit;display:flex;flex-direction:column;align-items:center;gap:3px;cursor:pointer;padding:0;min-width:0}
.lt i{font-style:normal;position:relative;width:42px;height:42px;border-radius:50%;display:grid;place-items:center;font-size:1.15rem;background:color-mix(in srgb,var(--bc) 25%,transparent);border:2px solid color-mix(in srgb,var(--bc) 70%,transparent)}
.lt em{position:absolute;bottom:-5px;inset-inline-end:-6px;font-style:normal;min-width:19px;height:19px;border-radius:999px;background:var(--bc);color:#111;font-size:.68rem;font-weight:900;display:grid;place-items:center;padding:0 4px}
.lt span{font-size:.66rem;font-weight:800;white-space:nowrap;color:color-mix(in srgb,var(--bc) 40%,#fff)}
.lt.on i{background:radial-gradient(circle at 35% 28%,color-mix(in srgb,var(--bc) 70%,#fff),var(--bc));box-shadow:0 0 16px -2px var(--bc);border-color:#fff}
.fdet{border-radius:18px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.12);padding:4px 12px}
.fdet>summary{min-height:40px;display:flex;align-items:center;gap:6px;font-weight:800;cursor:pointer;color:#FFD3B0;list-style:none}.fdet>summary::-webkit-details-marker{display:none}.fdet>summary::after{content:"▾";margin-inline-start:auto}
.fdet>summary b{padding:1px 10px;border-radius:999px;background:rgba(242,174,126,.22);color:#fff}
/* v236: big round action bubbles (instead of full-width rectangles) */
.bacts{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;padding:4px 0}
.bact{--bc:#F29A4A;border:0;background:none;color:#fff;font-family:inherit;display:flex;flex-direction:column;align-items:center;gap:5px;cursor:pointer;padding:0}
.bact i{font-style:normal;width:62px;height:62px;display:grid;place-items:center;font-size:1.7rem;border-radius:50%;background:radial-gradient(circle at 35% 28%,color-mix(in srgb,var(--bc) 65%,#fff),var(--bc));box-shadow:0 0 0 4px color-mix(in srgb,var(--bc) 22%,transparent),0 10px 20px -8px var(--bc),inset 0 1px 0 rgba(255,255,255,.4);transition:transform .15s}
.bact:nth-child(4n+2) i{border-radius:20px}.bact:nth-child(4n+3) i{border-radius:0;clip-path:polygon(25% 4%,75% 4%,100% 50%,75% 96%,25% 96%,0 50%);width:68px;box-shadow:none}.bact:nth-child(4n) i{border-radius:0;clip-path:polygon(50% 0,100% 38%,82% 100%,18% 100%,0 38%);width:66px;box-shadow:none}
.bact span{font-size:.76rem;font-weight:800;color:color-mix(in srgb,var(--bc) 35%,#fff);text-align:center;line-height:1.25}
.bact:active i{scale:.9}
/* v236: two-tile summaries get leaf shapes (not plain rectangles) */
body.pop #view .grid2>:is(button,.card,.tile):nth-child(odd){border-radius:38px 10px 38px 10px!important}
body.pop #view .grid2>:is(button,.card,.tile):nth-child(even){border-radius:10px 38px 10px 38px!important}
body.pop #view .grid2>:is(button,.card,.tile) .lbl{display:inline-flex!important;align-items:center;gap:6px;padding:3px 12px!important;border-radius:999px!important;background:rgba(0,0,0,.25)!important;width:max-content;max-width:100%}
/* v236: alert cards in every app — each with its own strong colour, an icon bubble instead of a tiny dot, varied shape */
body.pop .alert{--ac:#F29A4A;position:relative;overflow:hidden;border:0!important;border-inline-start:5px solid var(--ac)!important;background:linear-gradient(100deg,color-mix(in srgb,var(--ac) 34%,var(--pc1)),color-mix(in srgb,var(--ac) 8%,var(--pc2)) 75%)!important;box-shadow:0 12px 24px -16px var(--ac)}
body.pop .alert.bad{--ac:#F06A64}body.pop .alert.warn{--ac:#E8B92A}body.pop .alert.good{--ac:#5CC46A}
body.pop #view .stack>.alert:nth-of-type(3n+2):not(.bad):not(.good){--ac:#4AA3F0}body.pop #view .stack>.alert:nth-of-type(3n):not(.bad):not(.good){--ac:#9B7CF5}
body.pop .alert b{color:color-mix(in srgb,var(--ac) 30%,#fff)!important;font-size:1.05rem}
body.pop .alert .dot{width:30px;height:30px;margin-top:0;display:grid;place-items:center;background:radial-gradient(circle at 35% 28%,color-mix(in srgb,var(--ac) 60%,#fff),var(--ac))!important;box-shadow:0 0 0 4px color-mix(in srgb,var(--ac) 25%,transparent),0 0 14px -2px var(--ac);animation:hbi 2.4s ease-in-out infinite}
body.pop .alert .dot::after{content:"!";color:#111;font-weight:900;font-size:.95rem}body.pop .alert.good .dot::after{content:"✓"}
body.pop .alert:nth-of-type(odd){border-radius:24px 8px 24px 8px!important}
body.pop .alert .btn,body.pop .alert button{background:linear-gradient(180deg,color-mix(in srgb,var(--ac) 70%,#fff),var(--ac))!important;color:#111!important;border:0!important;font-weight:900;border-radius:999px!important}

/* v250 🧩 tiles for long pages (settings…) */
@keyframes tileIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.tilegrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(98px,1fr));gap:10px;margin:2px 0 6px}
.tile2{display:flex;flex-direction:column;align-items:center;gap:7px;padding:12px 6px 10px;border:1px solid var(--line);border-radius:18px;cursor:pointer;color:var(--fg);font:600 .78rem/1.35 inherit;font-family:inherit;
 background:radial-gradient(120% 90% at 50% 0%,color-mix(in srgb,var(--tc) 22%,transparent),transparent 70%),var(--surface);box-shadow:0 10px 22px -16px rgba(0,0,0,.9);transition:transform .15s,box-shadow .2s;animation:tileIn .3s ease both}
.tile2:active{transform:scale(.95)}
.tile2:hover{box-shadow:0 12px 26px -14px color-mix(in srgb,var(--tc) 60%,#000)}
.ti2{width:50px;height:50px;display:grid;place-items:center;font-size:1.55rem;background:linear-gradient(145deg,color-mix(in srgb,var(--tc) 85%,#fff),color-mix(in srgb,var(--tc) 60%,#000));box-shadow:0 6px 14px -6px color-mix(in srgb,var(--tc) 70%,#000),inset 0 1px 0 rgba(255,255,255,.35)}
.tn2{text-align:center;text-wrap:balance}
.tileback{width:100%;justify-content:flex-start;margin-bottom:8px;gap:6px}
.tilegrid .tile2{font-size:12.5px!important;line-height:1.3!important;min-height:0!important;height:auto!important;width:auto!important;letter-spacing:0;text-transform:none}
.tilegrid .tn2{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;font-size:12.5px!important;max-width:100%}
.tilegrid .ti2{font-size:26px!important;flex:none}

.tile2{position:relative}.tile2 .tbadge{position:absolute;top:6px;inset-inline-end:6px;min-width:20px;height:20px;border-radius:10px;background:#D9776A;color:#fff;font-style:normal;font-weight:900;font-size:.75rem;display:grid;place-items:center;box-shadow:0 2px 6px rgba(0,0,0,.35)}.tsearch input{width:100%}