/* nowu-ui.css — app screens rebuilt for the website drafts.
   Sizes are in cqw of the phone screen (1cqw = 1 % of its width; the
   app's 402 pt width → 1 pt ≈ .249cqw), so a screen looks the same at
   any size. Colours from Theme.swift (dark mode). */

.nw-device{position:relative;aspect-ratio:402/874;border-radius:14.5% / 6.7%;padding:1.6%;
  background:linear-gradient(145deg,#3a3d42,#121316 40%,#2a2c30 70%,#0d0e10);
  box-shadow:0 0 0 1px rgba(255,255,255,.08) inset,0 60px 120px -40px rgba(0,0,0,.9),0 30px 60px -30px rgba(0,0,0,.7)}
.nw-device::before{content:"";position:absolute;inset:.6%;border-radius:inherit;border:1px solid rgba(255,255,255,.06);pointer-events:none}
.nw-dev-screen{position:relative;width:100%;height:100%;border-radius:12.6% / 5.8%;overflow:hidden;background:#0a0c0e;container-type:inline-size;isolation:isolate}
.nw-island{position:absolute;left:50%;top:2.6cqw;width:30cqw;height:8.6cqw;transform:translateX(-50%);border-radius:5cqw;background:#000;z-index:50}
.nw-status-bar{position:absolute;left:0;right:0;top:0;height:13cqw;display:flex;justify-content:space-between;align-items:center;padding:1.5cqw 9cqw 0 10cqw;font:600 4cqw/1 -apple-system,"SF Pro Text","Helvetica Neue",sans-serif;color:#eef1ea;z-index:49}
.nw-status-bar svg{width:17cqw;height:3.4cqw}

/* ---------- shared bits ---------- */
.nw-glass{background:linear-gradient(180deg,rgba(255,255,255,.13),rgba(255,255,255,.05));border:1px solid rgba(255,255,255,.14);
  -webkit-backdrop-filter:blur(3cqw) saturate(1.4);backdrop-filter:blur(3cqw) saturate(1.4);box-shadow:0 1cqw 4cqw -1cqw rgba(0,0,0,.45),inset 0 1px 0 rgba(255,255,255,.12)}
.nw-scan svg,.nw-screen svg,.nw-tabbar svg{fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.nw-screen,.nw-scan{font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;color:#eef1ea;-webkit-font-smoothing:antialiased}

/* ---------- NOWU VISION (ScanView) ---------- */
.nw-scan{position:absolute;inset:0;overflow:hidden;background:#050607;container-type:inline-size}
.nw-amb{position:absolute;inset:-10%;background-size:cover;background-position:center;filter:blur(16cqw);opacity:.5}
.nw-amb-shade{position:absolute;inset:0;background:linear-gradient(rgba(5,6,7,.25),rgba(5,6,7,.8))}
.nw-top{position:absolute;left:6cqw;right:6cqw;top:18.4cqw;display:flex;justify-content:space-between;align-items:center;z-index:5}
.nw-x{width:10cqw;height:10cqw;border-radius:50%;display:grid;place-items:center}
.nw-x svg{width:4.4cqw;height:4.4cqw;stroke-width:2.6}
.nw-vt{font:600 2.6cqw/1 "SF Mono",ui-monospace,Menlo,monospace;letter-spacing:.75cqw;color:#9aa294}
.nw-frame{position:absolute;left:5.6cqw;right:5.6cqw;top:29.6cqw;height:126cqw}
.nw-frame-bg{position:absolute;inset:0;border-radius:7cqw;background:#0b0d0f;box-shadow:0 6cqw 12cqw -3cqw rgba(0,0,0,.35)}
.nw-frame canvas{position:absolute;inset:0;width:100%;height:100%}
.nw-rim{position:absolute;inset:0;border-radius:7cqw;pointer-events:none;padding:1px;
  background:linear-gradient(135deg,rgba(255,255,255,.3),rgba(255,255,255,.04));-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude}
.nw-labels{position:absolute;inset:0}
.nw-label{position:absolute;display:flex;align-items:center;gap:1.75cqw;padding:1.75cqw 3cqw;border-radius:99cqw;white-space:nowrap;
  transform:translate(-50%,-50%) scale(.5);opacity:0;transition:transform .45s cubic-bezier(.34,1.56,.64,1),opacity .3s}
.nw-label.on{transform:translate(-50%,-50%);opacity:1}
.nw-label i{width:1.5cqw;height:1.5cqw;border-radius:50%;background:#d6d9df}
.nw-label span{font-weight:600;font-size:2.75cqw}
.nw-label b{font-weight:600;font-size:2.5cqw;color:#e6e8ec;opacity:.8}
.nw-mode{position:absolute;left:50%;bottom:-6.2cqw;transform:translateX(-50%);width:69cqw;display:flex;padding:1.2cqw;border-radius:99cqw;transition:opacity .3s}
.nw-mode span{flex:1;text-align:center;padding:2.6cqw 0;font-size:3.3cqw;color:#c5cbbf;border-radius:99cqw}
.nw-mode span.on{background:rgba(255,255,255,.14);color:#eef1ea}
.nw-modehint{position:absolute;left:0;right:0;top:165cqw;text-align:center;font-size:2.7cqw;color:#828a7c;transition:opacity .3s}
.nw-status{position:absolute;left:50%;top:150cqw;transform:translateX(-50%);display:flex;align-items:center;gap:2cqw;padding:2cqw 4cqw;border-radius:99cqw;white-space:nowrap;opacity:0;transition:top .5s cubic-bezier(.2,.9,.2,1)}
.nw-status.low{top:150cqw}
.nw-status i{width:1.5cqw;height:1.5cqw;border-radius:50%;background:#d6d9df}
.nw-status span{font:400 2.86cqw/1.2 "SF Mono",ui-monospace,Menlo,monospace;color:#c5cbbf}
.nw-hint{position:absolute;left:5.6cqw;right:5.6cqw;top:170.4cqw;height:11cqw;border-radius:99cqw;display:flex;align-items:center;gap:2.6cqw;padding:0 1.6cqw 0 4.4cqw;transition:opacity .3s}
.nw-hint i{width:1.6cqw;height:1.6cqw;border-radius:50%;background:#828a7c}
.nw-hint span{flex:1;font-size:3.4cqw;color:#7a8273}
.nw-hint b{width:9cqw;height:9cqw;border-radius:50%;background:rgba(255,255,255,.12);display:grid;place-items:center}
.nw-hint b svg{width:4.4cqw;height:4.4cqw;stroke-width:2.6}
.nw-row{position:absolute;left:0;right:0;top:183cqw;height:24cqw;display:flex;justify-content:center;align-items:center;gap:10cqw}
.nw-side{width:13cqw;height:13cqw;border-radius:50%;display:grid;place-items:center;color:#eef1ea}
.nw-side svg{width:5.6cqw;height:5.6cqw}
.nw-shutter{position:relative;width:19.4cqw;height:19.4cqw;border-radius:50%;border:.87cqw solid #eef1ea;display:grid;place-items:center}
.nw-shutter i{width:15.4cqw;height:15.4cqw;border-radius:50%;background:#eef1ea;transition:background .35s,box-shadow .35s}
.nw-shutter.busy i{background:#d6d9df;box-shadow:0 0 5cqw rgba(214,217,223,.6)}
.nw-sheet{position:absolute;left:0;right:0;top:56%;bottom:0;transform:translateY(102%);border-radius:8cqw 8cqw 0 0;overflow:hidden;z-index:8;
  background:linear-gradient(rgba(23,24,27,.86),rgba(5,6,7,.96));-webkit-backdrop-filter:blur(8cqw);backdrop-filter:blur(8cqw);border-top:1px solid rgba(255,255,255,.18)}
.nw-sheet-in{padding:2.6cqw 6cqw 10cqw}
.nw-grab{width:10.5cqw;height:1cqw;border-radius:1cqw;background:rgba(255,255,255,.13);margin:0 auto 4cqw}
.nw-sh-top{display:flex;justify-content:space-between;align-items:center;font:500 2.4cqw/1 "SF Mono",ui-monospace,monospace;letter-spacing:.3cqw;color:#c3c7ce}
.nw-sh-top b{font:600 2.4cqw/1 "Helvetica Neue",sans-serif;letter-spacing:0;padding:1.4cqw 2.4cqw;border-radius:99cqw;background:rgba(255,255,255,.08);color:#c5cbbf}
.nw-sheet h4{margin:2.4cqw 0 3.4cqw;font-size:5cqw;font-weight:600;line-height:1.15}
.nw-kai{display:flex;gap:2.4cqw;padding:3.4cqw;border-radius:3.5cqw;background:linear-gradient(135deg,rgba(180,184,192,.16),rgba(180,184,192,.05));border:1px solid rgba(180,184,192,.15);font-size:3cqw;line-height:1.45;color:#eceef1}
.nw-kai i{flex:none;width:1.6cqw;height:1.6cqw;margin-top:1.2cqw;border-radius:50%;background:#e1e3e8;box-shadow:0 0 2cqw #e1e3e8;animation:nwPulse 1.6s infinite}
@keyframes nwPulse{50%{opacity:.35}}
.nw-item{padding:3.4cqw 0;border-bottom:1px solid rgba(255,255,255,.04)}
.nw-it-h{display:flex;justify-content:space-between;font-size:3.4cqw}
.nw-it-h b{font-weight:600}
.nw-it-s{display:flex;align-items:center;gap:2cqw;margin-top:1.4cqw;font-size:2.5cqw;color:#7a8273}
.nw-it-s em{font-style:normal}
.nw-conf{flex:1;height:.8cqw;border-radius:1cqw;background:rgba(255,255,255,.1);overflow:hidden}
.nw-conf i{display:block;height:100%;background:rgba(214,217,223,.7)}
.nw-it-sl{display:flex;align-items:center;gap:3cqw;margin-top:1.8cqw;color:#9aa294;font-size:4cqw}
.nw-it-sl span:first-child,.nw-it-sl span:last-child{width:6cqw;height:6cqw;border-radius:50%;border:1px solid rgba(255,255,255,.14);display:grid;place-items:center;font-size:3.4cqw}
.nw-track{flex:1;position:relative;height:1.1cqw;border-radius:1cqw;background:rgba(255,255,255,.12)}
.nw-track i{position:absolute;top:50%;width:5.4cqw;height:3.4cqw;border-radius:99cqw;background:#eef1ea;transform:translate(-50%,-50%);box-shadow:0 .6cqw 1.6cqw rgba(0,0,0,.4)}
.nw-kor{margin-top:5cqw;font:500 2.4cqw/1 "SF Mono",monospace;letter-spacing:.3cqw;color:#c3c7ce}
.nw-kor-f{margin-top:2.4cqw;padding:3.4cqw 4cqw;border-radius:3.5cqw;font-size:3cqw;color:#7a8273}
.nw-macros{display:flex;gap:2.4cqw;margin-top:4cqw}
.nw-macros span{flex:1;text-align:center;padding:2.4cqw 0;border-radius:3.5cqw;font-size:3cqw;font-weight:600;color:var(--c);background:color-mix(in srgb,var(--c) 12%,transparent);border:1px solid color-mix(in srgb,var(--c) 30%,transparent)}
.nw-total{display:flex;justify-content:space-between;align-items:baseline;margin-top:5cqw}
.nw-total span{font-size:3cqw;color:#9aa294}
.nw-total b{font-size:6.4cqw;font-weight:600;color:#e6e8ec}
.nw-add{margin-top:3.4cqw;padding:3.8cqw;text-align:center;border-radius:99cqw;font-size:3.4cqw;font-weight:600;color:#0b0d0f;background:linear-gradient(180deg,#e9ebee,#c9ccd2);box-shadow:inset 0 1px 0 rgba(255,255,255,.7)}
.nw-new{margin-top:2.4cqw;padding:3.4cqw;text-align:center;border-radius:99cqw;font-size:3.2cqw;color:#c5cbbf;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1)}

/* ---------- Heute ---------- */
.nw-screen{position:absolute;inset:0;padding:13cqw 5.6cqw 30cqw;overflow:hidden;background:radial-gradient(90cqw 70cqw at 50% 30cqw,rgba(48,224,112,.05),transparent),#0a0c0e}
.nw-h-top{display:flex;justify-content:space-between;margin-top:4cqw}
.nw-ic{width:10.4cqw;height:10.4cqw;border-radius:50%;display:grid;place-items:center}
.nw-ic svg{width:4.8cqw;height:4.8cqw;stroke-width:2.2}
.nw-ic.sm{width:8.6cqw;height:8.6cqw}
.nw-score{position:relative;width:62cqw;margin:2cqw auto 0}
.nw-ring{display:block;overflow:visible}
.nw-arc{transition:stroke-dashoffset 1.4s cubic-bezier(.2,.9,.2,1)}
.nw-score-c{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center}
.nw-score-c div{display:flex;align-items:baseline}
.nw-score-c b{font-size:20cqw;font-weight:700;color:#30e070;line-height:.9;letter-spacing:-.04em}
.nw-score-c small{font-size:6.4cqw;color:#9aa294;margin-left:.6cqw}
.nw-score-c em{font-style:normal;color:#30e070;font-size:5.2cqw;font-weight:500;margin-top:2cqw}
.nw-score-c span{color:#9aa294;font-size:4cqw;margin-top:1.4cqw}
.nw-macros4{display:grid;grid-template-columns:repeat(4,1fr);gap:3.2cqw;margin-top:7cqw}
.nw-m{position:relative}
.nw-m-c{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center}
.nw-m-c b{font-size:4.6cqw;font-weight:700}
.nw-m-c b small{font-size:2.8cqw;color:#9aa294;font-weight:400}
.nw-m-c span{font-size:2.1cqw;letter-spacing:.25cqw;color:#9aa294;margin-top:.6cqw;line-height:1.15}
.nw-steps{display:flex;flex-direction:column;align-items:center;margin-top:5cqw;gap:.8cqw}
.nw-steps svg{width:4cqw;height:4cqw;fill:#9aa294;stroke:none}
.nw-steps b{font-size:4.6cqw}
.nw-steps span{font-size:2.6cqw;letter-spacing:.4cqw;color:#9aa294}
.nw-line{height:1px;background:rgba(255,255,255,.1);margin:5cqw 0 4cqw}
.nw-streak-h{display:flex;align-items:center;gap:3cqw}
.nw-streak-h>span:first-child{flex:1;font-size:2.8cqw;letter-spacing:.5cqw;color:#c5cbbf}
.nw-streak-h b{font-size:5.4cqw;font-weight:600}
.nw-streak-h b small{font-size:3.6cqw;color:#c5cbbf;font-weight:400}
.nw-streak{display:flex;justify-content:space-between;padding:4cqw 2.6cqw 0}
.nw-day{display:flex;flex-direction:column;align-items:center;gap:2.4cqw}
.nw-day span{width:6.6cqw;height:6.6cqw;border-radius:50%;background:#d6d9df;display:grid;place-items:center;color:#0b0d0f}
.nw-day span svg{width:4cqw;height:4cqw;stroke-width:3}
.nw-day.today span{outline:.45cqw solid #eef1ea;outline-offset:.7cqw}
.nw-day.open span{background:none;border:.35cqw dashed #828a7c}
.nw-day em{font-style:normal;font-size:2.8cqw;color:#9aa294}
.nw-day.today em{color:#eef1ea}
.nw-kaicard{margin-top:5cqw;padding:3.6cqw 4cqw;border-radius:4.4cqw;background:linear-gradient(135deg,rgba(180,184,192,.15),rgba(180,184,192,.05));border:1px solid rgba(255,255,255,.12)}
.nw-kc-h{display:flex;justify-content:space-between;font-size:2.6cqw;color:#9aa294}
.nw-kc-h b{font-weight:500;letter-spacing:.45cqw;color:#c3c7ce;display:flex;align-items:center;gap:1.8cqw}
.nw-kc-h b::before{content:"";width:2cqw;height:2cqw;border-radius:50%;background:#c3c7ce}
.nw-kaicard p,.nw-muster p{margin-top:2cqw;font-size:3.3cqw;line-height:1.42;color:#eceef1}
.nw-muster p.dim{color:#9aa294}

/* ---------- tab bar ---------- */
.nw-tabbar{position:absolute;left:4.4cqw;right:4.4cqw;bottom:6cqw;display:flex;gap:2.6cqw;align-items:center;z-index:20}
.nw-tabs{flex:1;display:flex;padding:1.2cqw;border-radius:99cqw;position:relative}
.nw-tab{flex:1;display:flex;flex-direction:column;align-items:center;gap:.9cqw;padding:1.8cqw 0 1.6cqw;border-radius:99cqw;color:#c5cbbf;transition:background .4s,color .4s}
.nw-tab svg{width:6.6cqw;height:6.6cqw}
.nw-tab b{font-size:2.7cqw;font-weight:500}
.nw-tab.on{background:rgba(255,255,255,.12);color:#fff}
.nw-plus{width:15cqw;height:15cqw;border-radius:50%;display:grid;place-items:center;color:#eef1ea}
.nw-plus svg{width:6.6cqw;height:6.6cqw;stroke-width:2.2}

/* ---------- Training ---------- */
.nw-training h3,.nw-trends h3{font-size:8cqw;font-weight:600;margin-top:6cqw}
.nw-training h5{font-size:6.4cqw;font-weight:600;margin:5cqw 0 3cqw}
.nw-card{border-radius:5.4cqw;background:linear-gradient(160deg,rgba(255,255,255,.07),rgba(255,255,255,.02));border:1px solid rgba(255,255,255,.1)}
.nw-run{padding:4cqw}
.nw-run-h{display:flex;justify-content:space-between;align-items:center;font-size:2.8cqw;color:#c5cbbf}
.nw-run-h span{display:flex;align-items:center;gap:1.6cqw;letter-spacing:.45cqw}
.nw-run-h svg{width:4cqw;height:4cqw}
.nw-run-h em{font-style:normal;color:#9aa294}
.nw-run-b{display:flex;gap:4cqw;margin-top:3cqw;align-items:center}
.nw-run-r{position:relative;width:24cqw;flex:none}
.nw-run-r>div{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center}
.nw-run-r b{font-size:6.6cqw;font-weight:600}
.nw-run-r span{font-size:2.6cqw;color:#9aa294}
.nw-run-s{flex:1}
.nw-wk{display:flex;align-items:flex-end;gap:1.2cqw;height:12cqw}
.nw-wk i{flex:1;border-radius:1cqw 1cqw .4cqw .4cqw;background:rgba(255,255,255,.18);min-height:.8cqw;transition:height 1s}
.nw-wk i.now{background:linear-gradient(#2a2c30 0 80%,#e9ebee 80%)}
.nw-run-n{display:flex;gap:6cqw;margin-top:3cqw}
.nw-run-n b{display:block;font-size:3.8cqw;font-weight:500}
.nw-run-n span{font-size:2.8cqw;color:#9aa294}
.nw-two{display:grid;grid-template-columns:1fr 1fr;gap:3.4cqw}
.nw-act{padding:4cqw;min-height:36cqw;display:flex;flex-direction:column;justify-content:flex-end;gap:.6cqw;position:relative;background:linear-gradient(160deg,rgba(255,255,255,.16),rgba(255,255,255,.04))}
.nw-act .nw-ic2{position:absolute;left:4cqw;top:4cqw;width:10cqw;height:10cqw;border-radius:50%;background:rgba(255,255,255,.12);display:grid;place-items:center}
.nw-act .nw-ic2 svg{width:4.8cqw;height:4.8cqw}
.nw-act b{font-size:4.2cqw;font-weight:500}
.nw-act span{font-size:3cqw;color:#c5cbbf;line-height:1.25}
.nw-seg{display:flex;padding:1.2cqw;border-radius:99cqw;margin:4cqw 0}
.nw-seg span{flex:1;text-align:center;padding:2.4cqw 0;font-size:3.5cqw;color:#c5cbbf;border-radius:99cqw}
.nw-seg span.on{background:rgba(255,255,255,.16);color:#fff}
.nw-seg.sm{margin:0;width:44cqw}
.nw-stat{padding:4.4cqw 0;text-align:center}
.nw-stat b{font-size:6.6cqw;font-weight:600}
.nw-stat span{display:block;margin-top:1.4cqw;font-size:2.6cqw;letter-spacing:.4cqw;color:#9aa294}

/* ---------- Trends ---------- */
.nw-tr-h{display:flex;justify-content:space-between;align-items:center;margin-top:4cqw}
.nw-tr-h h3{margin:0}
.nw-recap{margin-top:4cqw;padding:3.6cqw 4.4cqw;display:flex;align-items:center;gap:3cqw}
.nw-recap div{flex:1}
.nw-recap span{font-size:2.5cqw;letter-spacing:.35cqw;color:#c5cbbf}
.nw-recap b{display:block;font-size:4.2cqw;font-weight:500;margin-top:1.2cqw}
.nw-recap strong{font-size:10cqw;font-weight:500}
.nw-recap em{font-style:normal;font-size:5cqw;color:#9aa294}
.nw-week{margin-top:3.4cqw;padding:5cqw 4cqw 3.4cqw;position:relative}
.nw-goal{position:absolute;left:4cqw;right:4cqw;top:17cqw;height:1px;background:rgba(255,255,255,.18)}
.nw-goal span{position:absolute;right:0;top:-4.4cqw;font-size:2.4cqw;letter-spacing:.4cqw;color:#9aa294}
.nw-bars{display:flex;gap:2.6cqw;height:44cqw;align-items:flex-end}
.nw-bars div{flex:1;height:100%;display:flex;flex-direction:column;justify-content:flex-end;align-items:center;gap:2cqw}
.nw-bars i{width:100%;border-radius:2cqw 2cqw .6cqw .6cqw;background:#25272b;transition:height 1.1s cubic-bezier(.2,.9,.2,1)}
.nw-bars span{font-size:2.8cqw;color:#9aa294}
.nw-bars .now i{background:#e9ebee;box-shadow:0 0 5cqw rgba(233,235,238,.45)}
.nw-bars .now span{color:#eef1ea}
.nw-wk-f{margin-top:3cqw;padding-top:3cqw;border-top:1px solid rgba(255,255,255,.08);font-size:3.2cqw;color:#c5cbbf}
.nw-muster{margin-top:3.4cqw;padding:4cqw}