/* =====================================================================
   U-Watch (smartklokke) - stil
   Maales i px paa designstoerrelse; watch.js skalerer alt med transform.
   Ingen uskarphet, ingen glow. Animasjoner bruker kun transform og opacity.
   ===================================================================== */
#uw-anchor {
  --uw-bg: #0d0d0f; --uw-surf: #17171a; --uw-surf3: #26262b; --uw-line: #2a2a2f;
  --uw-tx: #ffffff; --uw-tx2: #cecece; --uw-tx3: #a9a9b0; --uw-acc: #ffb200; --uw-low: #ff6b6b;
  position: fixed; right: 3.2vw; bottom: 2.4vh; z-index: 40; pointer-events: none;
  transform-origin: 100% 100%;
  font-family: 'Manrope', 'Segoe UI', system-ui, sans-serif; color: var(--uw-tx);
  user-select: none;
}
#uw-slide {
  transform-origin: 100% 100%;
  transition: transform .42s cubic-bezier(.2,.9,.25,1), opacity .25s ease;
}
#uw-anchor.hidden #uw-slide { transform: translateX(calc(100% + 80px)) rotate(6deg); opacity: 0; }
#uw-anchor.hidden { visibility: hidden; transition: visibility 0s .45s; }
#uw-anchor.open .uw-case { pointer-events: auto; }
#uw-anchor.freelook #uw-slide { opacity: .3; }
#uw-anchor.freelook .uw-case { pointer-events: none; }

.uw { position: relative; display: flex; align-items: center; justify-content: center; }
.uw.kapsel { width: 360px; height: 590px; }
.uw.orbit { width: 400px; height: 560px; }

/* ---------- Maskinvare: metallkasse, glass, krone, reim ----------
   Bare statiske lag (gradienter og skygger), ingen animasjon og ingen uskarphet. */
#uw-anchor { --uw-metal: linear-gradient(150deg, #64656c 0%, #3a3b41 20%, #222327 48%, #2d2e33 74%, #55565d 100%); }

/* Reim: stikker ut over og under kassa og tones ut */
.uw-strap { position: absolute; left: 50%; width: 226px; height: 128px; transform: translateX(-50%); }
.uw-strap.top { top: 0; border-radius: 36px 36px 0 0;
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 70%); mask-image: linear-gradient(to bottom, transparent, #000 70%); }
.uw-strap.bot { bottom: 0; border-radius: 0 0 36px 36px;
  -webkit-mask-image: linear-gradient(to top, transparent, #000 70%); mask-image: linear-gradient(to top, transparent, #000 70%); }
.orbit .uw-strap { width: 196px; }
/* Sport: myk gummi med lys kant og pinnehull */
.band-sport .uw-strap { background:
  radial-gradient(circle at 50% 50%, #0b0b0d 0 4px, transparent 4.5px) 0 0 / 100% 26px repeat-y,
  linear-gradient(90deg, #111214 0%, #1f2024 14%, #26272b 50%, #1f2024 86%, #111214 100%); }
.band-sport .uw-strap.top { background:
  linear-gradient(90deg, #111214 0%, #1f2024 14%, #26272b 50%, #1f2024 86%, #111214 100%); }
/* Vevd: fin stoff-tekstur */
.band-woven .uw-strap { background:
  repeating-linear-gradient(45deg, rgba(255,255,255,.045) 0 2px, transparent 2px 5px),
  repeating-linear-gradient(-45deg, rgba(0,0,0,.25) 0 2px, transparent 2px 5px),
  linear-gradient(90deg, #26272c 0%, #34353b 50%, #26272c 100%); }
/* Lenke: boerstet staal i ledd */
.band-link .uw-strap { background:
  repeating-linear-gradient(180deg, transparent 0 21px, rgba(0,0,0,.6) 21px 23px),
  linear-gradient(90deg, #2c2d32 0%, #2c2d32 22%, #1c1d21 22.5%, #1c1d21 23.5%, #4a4b51 24%, #6c6d74 50%, #4a4b51 76%, #1c1d21 76.5%, #1c1d21 77.5%, #2c2d32 78%, #2c2d32 100%); }

/* Hanker (Orbit): metall mellom kasse og reim */
.uw-lug { display: none; position: absolute; left: 50%; width: 236px; height: 74px; transform: translateX(-50%); background: var(--uw-metal);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.2), inset 0 -1px 0 rgba(0,0,0,.5); }
.orbit .uw-lug { display: block; }
.uw-lug.top { top: 78px; clip-path: polygon(10% 0, 90% 0, 100% 100%, 0 100%); border-radius: 10px 10px 0 0; }
.uw-lug.bot { bottom: 78px; clip-path: polygon(0 0, 100% 0, 90% 100%, 10% 100%); border-radius: 0 0 10px 10px; }

/* Kasse */
.uw-case { position: relative; box-sizing: border-box; background: var(--uw-metal);
  box-shadow: inset 0 1.5px 0 rgba(255,255,255,.24), inset 0 -2px 0 rgba(0,0,0,.55), inset 0 0 0 1px rgba(255,255,255,.06),
    0 3px 0 #111114, 0 30px 70px rgba(0,0,0,.55); }
.kapsel .uw-case { width: 360px; height: 430px; padding: 14px; border-radius: 122px; }
.orbit .uw-case { width: 400px; height: 400px; padding: 20px; border-radius: 200px; }
/* Svart glasskant rundt skjermen (Kapsel) */
.kapsel .uw-case::before { content: ''; position: absolute; inset: 8px; border-radius: 114px; background: #050506;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.07); pointer-events: none; }
/* Keramisk ramme med minuttmerker (Orbit) */
.uw-ceramic { display: none; position: absolute; inset: 6px; border-radius: 50%; background: radial-gradient(circle, #19191c 86%, #0f0f11 100%);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.06), inset 0 2px 6px rgba(0,0,0,.6); pointer-events: none; }
.orbit .uw-ceramic { display: block; }
.uw-bezel { position: absolute; left: 0; top: 0; width: 400px; height: 400px; display: none; pointer-events: none; }
.orbit .uw-bezel { display: block; }

/* Krone med riller og gul kant, kronebeskytter (Kapsel), knapper */
.uw-crown { position: absolute; z-index: 2; width: 15px; border: 0; padding: 0; border-radius: 7px; cursor: pointer; transition: transform .1s;
  background: repeating-linear-gradient(180deg, #74757c 0 1.5px, #303136 1.5px 3.5px);
  box-shadow: inset -3px 0 0 var(--uw-acc), inset 0 0 0 1px rgba(0,0,0,.55), 2px 0 3px rgba(0,0,0,.4); }
.uw-crown::after { content: ''; position: absolute; inset: -8px -10px; }
.uw-crown:active { transform: translateX(-2px); }
.kapsel .uw-crown { right: -12px; top: 124px; height: 62px; }
.orbit .uw-crown { right: -13px; top: 172px; height: 56px; }
.uw-guard { display: none; position: absolute; right: -6px; top: 108px; width: 12px; height: 94px; border-radius: 6px; background: var(--uw-metal);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.2), inset 0 -1px 0 rgba(0,0,0,.5); pointer-events: none; }
.kapsel .uw-guard { display: block; }
.uw-sbtn { position: absolute; pointer-events: none; background: linear-gradient(90deg, #26272b, #5d5e65); border-radius: 4px; box-shadow: inset 0 0 0 1px rgba(0,0,0,.5); }
.kapsel .uw-sbtn { right: -7px; top: 218px; width: 8px; height: 74px; }
.orbit .uw-sbtn { display: none; }
.uw-push { display: none; position: absolute; width: 22px; height: 12px; border-radius: 4px; pointer-events: none;
  background: linear-gradient(180deg, #6a6b72, #2a2b30); box-shadow: inset 0 0 0 1px rgba(0,0,0,.5); }
.orbit .uw-push { display: block; }
.uw-push.p1 { right: 34px; top: 66px; transform: rotate(45deg); }
.uw-push.p2 { right: 34px; bottom: 66px; transform: rotate(-45deg); }

/* Skjerm + glass (svak refleks og dybde i kanten) */
.uw-screen { position: relative; overflow: hidden; background: radial-gradient(circle at 50% 42%, #121215 0%, var(--uw-bg) 70%); }
.kapsel .uw-screen { width: 332px; height: 402px; border-radius: 104px; }
.orbit .uw-screen { width: 360px; height: 360px; border-radius: 180px; }
.uw-glass { position: absolute; inset: 0; z-index: 8; border-radius: inherit; pointer-events: none;
  background: linear-gradient(140deg, rgba(255,255,255,.06) 0%, rgba(255,255,255,.015) 28%, transparent 46%);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.035), inset 0 0 22px rgba(0,0,0,.55); }

.uw-layer { position: absolute; inset: 0; box-sizing: border-box; transition: transform .32s cubic-bezier(.2,.9,.25,1), opacity .22s ease; }
.uw-layer.off { opacity: 0; transform: scale(.92); pointer-events: none; visibility: hidden; transition: transform .32s cubic-bezier(.2,.9,.25,1), opacity .22s ease, visibility 0s .32s; }

/* ---------- Urskive ---------- */
.uw-face { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; cursor: default; }
#uw-anchor.open .uw-face { cursor: pointer; }
.uw-ticks { position: absolute; left: 0; top: 0; width: 332px; height: 402px; pointer-events: none; }
.orbit .uw-ticks { display: none; }
/* Minuttmerket: en prikk i aksentfargen som gaar rundt skalaen (sitter i kassa) */
.uw-mark { position: absolute; left: 50%; top: 50%; width: 0; height: 0; pointer-events: none; transition: transform .6s cubic-bezier(.3,.8,.3,1), opacity .2s; }
.uw-mark::before { content: ''; position: absolute; left: -4px; width: 8px; height: 8px; border-radius: 4px; background: var(--uw-acc); }
.kapsel .uw-mark { left: 180px; top: 215px; }
.kapsel .uw-mark::before { top: -4px; }
.orbit .uw-mark::before { top: -194px; }
.kapsel:not(.vface) .uw-mark { opacity: 0; }
.uw-date { font: 700 13px 'Manrope', sans-serif; letter-spacing: 2px; color: var(--uw-tx2); text-transform: uppercase; }
.uw-time { font: 600 76px/1 'Sora', sans-serif; letter-spacing: -4px; }
.orbit .uw-time { font-size: 70px; }
.uw-tick { stroke: #2c2c31; transition: stroke .5s ease; }
.uw-tick.major { stroke: #44444b; }
.orbit .uw-bezel .uw-tick { stroke: #3c3c43; }
.orbit .uw-bezel .uw-tick.major { stroke: #6a6a72; }
.uw-tick.on, .uw-tick.major.on, .orbit .uw-bezel .uw-tick.on { stroke: var(--uw-acc); }
.uw-cmps { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-top: 12px; }
.uw-cmp { width: 104px; height: 54px; border-radius: 22px; background: var(--uw-surf); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; }
.orbit .uw-cmp { width: 96px; height: 50px; border-radius: 20px; }
.uw-cmp b { font: 600 18px 'Sora', sans-serif; font-variant-numeric: tabular-nums; }
.uw-cmp b.low { color: var(--uw-low); }
.uw-cmp span { font: 700 12px 'Manrope', sans-serif; letter-spacing: 1px; color: var(--uw-tx3); }

/* ---------- App-rutenett ---------- */
.uw-grid { display: grid; grid-template-columns: repeat(3, 76px); justify-content: center; align-content: center; gap: 12px 14px; padding: 30px 20px; }
.orbit .uw-grid { grid-template-columns: repeat(3, 70px); gap: 8px 14px; padding: 40px 30px; }
.uw-appbtn { border: 0; padding: 0; background: none; color: var(--uw-tx); display: flex; flex-direction: column; align-items: center; gap: 5px; cursor: pointer; font: 700 12px 'Manrope', sans-serif; }
.uw-appbtn i { width: 62px; height: 62px; border-radius: 31px; display: flex; align-items: center; justify-content: center; color: #fff;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.28), inset 0 -12px 18px rgba(0,0,0,.16); transition: transform .12s ease; }
.orbit .uw-appbtn i { width: 56px; height: 56px; border-radius: 28px; }
.uw-appbtn:hover i { transform: scale(1.06); }
.uw-appbtn:active i { transform: scale(.94); }
.uw-appbtn svg { width: 28px; height: 28px; }
.uw-appbtn span { max-width: 84px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ---------- App ---------- */
.uw-app { display: flex; flex-direction: column; padding: 46px 30px 30px; }
.orbit .uw-app { padding: 56px 46px 40px; }
.uw-head { display: flex; align-items: center; gap: 8px; margin-bottom: 14px; }
.uw-back { width: 44px; height: 44px; flex: none; border: 0; border-radius: 22px; background: var(--uw-surf3); color: var(--uw-tx); display: flex; align-items: center; justify-content: center; cursor: pointer; }
.uw-back svg { width: 20px; height: 20px; }
.uw-title { font: 600 20px 'Sora', sans-serif; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.uw-body { flex: 1; display: flex; flex-direction: column; gap: 8px; min-height: 0; overflow: hidden; }
.uw-soon { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 10px; }
.uw-soon i { width: 72px; height: 72px; border-radius: 36px; display: flex; align-items: center; justify-content: center; color: #fff; }
.uw-soon i svg { width: 34px; height: 34px; }
.uw-soon b { font: 600 18px 'Sora', sans-serif; }
.uw-soon span { font: 500 14px/1.4 'Manrope', sans-serif; color: var(--uw-tx2); max-width: 230px; }
.uw-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 16px; border-radius: 20px; background: var(--uw-surf); font: 600 14px 'Manrope', sans-serif; }
.uw-row span { color: var(--uw-tx3); }
.uw-row b { font-weight: 700; text-align: right; }
.uw-note { font: 500 13px/1.4 'Manrope', sans-serif; color: var(--uw-tx3); padding: 4px 6px 0; }

/* ---------- Fase 2: varsler, svar, anrop, innstillinger ---------- */
.uw.buzz .uw-case { animation: uwBuzz .45s linear; }
@keyframes uwBuzz { 0%,100% { transform: translateX(0); } 15%,45%,75% { transform: translateX(-3px) rotate(-.4deg); } 30%,60%,90% { transform: translateX(3px) rotate(.4deg); } }

.uw-body { overflow-y: auto; scrollbar-width: none; padding-bottom: 18px; }
.uw-body::-webkit-scrollbar { display: none; }
.uw-sub { font: 700 12px 'Manrope', sans-serif; letter-spacing: 1px; color: var(--uw-tx3); text-transform: uppercase; margin: 8px 6px 0; }
.uw-err { color: var(--uw-low); }
.uw-empty { flex: 1; display: flex; align-items: center; justify-content: center; font: 600 15px 'Manrope', sans-serif; color: var(--uw-tx2); }

.uw-seg { display: flex; gap: 4px; padding: 4px; border-radius: 18px; background: var(--uw-surf); }
.uw-seg button { flex: 1; min-height: 40px; border: 0; border-radius: 14px; background: none; color: var(--uw-tx2); font: 700 13px 'Manrope', sans-serif; cursor: pointer; }
.uw-seg button.on { background: var(--uw-acc); color: #151518; }

.uw-tg { position: relative; width: 48px; height: 28px; flex: none; border: 0; border-radius: 14px; background: #3a3a40; cursor: pointer; padding: 0; transition: background .15s; }
.uw-tg i { position: absolute; left: 3px; top: 3px; width: 22px; height: 22px; border-radius: 11px; background: #fff; transition: transform .15s; }
.uw-tg.on { background: var(--uw-acc); }
.uw-tg.on i { transform: translateX(20px); }

.uw-nrow { display: flex; flex-direction: column; align-items: stretch; gap: 3px; width: 100%; text-align: left; border: 0; padding: 11px 14px; border-radius: 20px; background: var(--uw-surf); color: var(--uw-tx); cursor: pointer; font-family: 'Manrope', sans-serif; }
.uw-nrow-top { display: flex; justify-content: space-between; font: 700 11px 'Manrope', sans-serif; color: var(--uw-tx3); letter-spacing: .5px; }
.uw-nrow b { font: 700 14px 'Manrope', sans-serif; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.uw-nrow-txt { font: 500 13px 'Manrope', sans-serif; color: var(--uw-tx2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Varsel */
.uw-notif { display: flex; flex-direction: column; gap: 8px; padding: 50px 30px 30px; overflow: hidden; }
.orbit .uw-notif { padding: 62px 44px 44px; }
.uw-nhead { display: flex; align-items: center; gap: 8px; min-height: 30px; }
.uw-nhead .uw-back { width: 40px; height: 40px; border-radius: 20px; }
.uw-napp { font: 700 13px 'Manrope', sans-serif; color: var(--uw-acc); }
.uw-nwhen { margin-left: auto; font: 600 12px 'Manrope', sans-serif; color: var(--uw-tx3); }
.uw-ntitle { font: 600 22px 'Sora', sans-serif; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.orbit .uw-ntitle { font-size: 20px; }
.uw-ntext { font: 500 15px/1.4 'Manrope', sans-serif; color: var(--uw-tx2); display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; }
.uw-hint { margin-top: auto; text-align: center; font: 600 12px 'Manrope', sans-serif; color: var(--uw-tx3); }
.uw-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }
.uw-chip { min-height: 38px; padding: 0 12px; border: 0; border-radius: 19px; background: var(--uw-surf3); color: var(--uw-tx); font: 700 13px 'Manrope', sans-serif; cursor: pointer; }
.uw-chip:disabled { opacity: .5; cursor: default; }
.uw-reply { display: flex; gap: 6px; }
.uw-reply input { flex: 1; min-width: 0; height: 40px; padding: 0 14px; border: 1.5px solid transparent; border-radius: 20px; background: var(--uw-surf); color: var(--uw-tx); font: 600 13px 'Manrope', sans-serif; outline: none; }
.uw-reply input:focus { border-color: var(--uw-acc); }
.uw-reply input::placeholder { color: var(--uw-tx3); }
.uw-send { width: 40px; height: 40px; flex: none; border: 0; border-radius: 20px; background: var(--uw-acc); color: #151518; display: flex; align-items: center; justify-content: center; cursor: pointer; }
.uw-send svg { width: 18px; height: 18px; }
.uw-sent { display: flex; align-items: center; gap: 8px; padding: 10px 14px; border-radius: 20px; background: var(--uw-surf); font: 700 13px 'Manrope', sans-serif; }
.uw-sent svg { width: 18px; height: 18px; flex: none; color: #22c55e; }
.uw-sent span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Lite varsel oeverst */
.uw-toast { position: absolute; left: 36px; right: 36px; top: 26px; z-index: 5; display: flex; flex-direction: column; gap: 2px; padding: 10px 14px; border-radius: 20px; background: #26262b;
  box-shadow: 0 8px 20px rgba(0,0,0,.4); opacity: 0; transform: translateY(-16px); transition: opacity .2s, transform .3s cubic-bezier(.2,.9,.25,1); pointer-events: none; cursor: pointer; }
.orbit .uw-toast { left: 70px; right: 70px; top: 34px; }
.uw-toast.show { opacity: 1; transform: none; pointer-events: auto; }
.uw-toast b { font: 700 13px 'Manrope', sans-serif; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.uw-toast span { font: 500 12px 'Manrope', sans-serif; color: var(--uw-tx2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Anrop */
.uw-call { display: flex; align-items: center; justify-content: center; padding: 30px; }
.uw-cwrap { display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; max-width: 100%; }
.uw-cav { width: 84px; height: 84px; border-radius: 42px; background: var(--uw-surf3); display: flex; align-items: center; justify-content: center; font: 600 30px 'Sora', sans-serif; color: var(--uw-acc); }
.orbit .uw-cav { width: 72px; height: 72px; font-size: 26px; }
.uw-cname { font: 600 22px 'Sora', sans-serif; max-width: 260px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.uw-csub { font: 600 14px 'Manrope', sans-serif; color: var(--uw-tx2); }
.uw-clabel { font: 700 12px 'Manrope', sans-serif; letter-spacing: 2px; color: var(--uw-tx2); }
.uw-ctime { font: 600 50px/1 'Sora', sans-serif; letter-spacing: -2px; font-variant-numeric: tabular-nums; }
.uw-badge { display: flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 14px; background: rgba(255,178,0,.14); color: var(--uw-acc); font: 700 12px 'Manrope', sans-serif; }
.uw-badge svg { width: 15px; height: 15px; }
.uw-cbtns { display: flex; gap: 36px; margin-top: 10px; }
.uw-cb { width: 64px; height: 64px; border: 0; border-radius: 32px; display: flex; align-items: center; justify-content: center; color: #fff; cursor: pointer; transition: transform .1s; }
.uw-cb:active { transform: scale(.94); }
.uw-cb svg { width: 26px; height: 26px; }
.uw-cb.red { background: #ef4444; }
.uw-cb.green { background: #1f9a48; }
.uw-cb.dark { background: var(--uw-surf3); }
.uw-cbtns.three { gap: 20px; }
.orbit .uw-cbtns.three .uw-cb { width: 58px; height: 58px; border-radius: 29px; }

/* ---------- Fase 3: hjemskjerm ---------- */
.uw-grid.ring, .uw-grid.stack { display: block; padding: 0; }
/* Ring (Orbit) */
.uw-ringsvg { position: absolute; left: 0; top: 0; width: 360px; height: 360px; pointer-events: none; }
.uw-ricon { position: absolute; border: 0; padding: 0; background: none; cursor: pointer; border-radius: 50%;
  transition: left .35s cubic-bezier(.2,.9,.25,1), top .35s cubic-bezier(.2,.9,.25,1), width .3s, height .3s, opacity .3s; opacity: .82; }
.uw-ricon i { position: absolute; inset: 0; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: #fff;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.28), inset 0 -12px 18px rgba(0,0,0,.18); }
.uw-ricon svg { width: 44%; height: 44%; }
.uw-ricon.on { opacity: 1; }
.uw-ricon.on i { box-shadow: 0 0 0 3px var(--uw-bg), 0 0 0 6px var(--uw-acc); }
.uw-rbadge { position: absolute; right: -4px; top: -4px; min-width: 20px; height: 20px; padding: 0 5px; box-sizing: border-box; border-radius: 10px; background: var(--uw-acc); color: #151518;
  font: 800 11px/20px 'Manrope', sans-serif; text-align: center; box-shadow: 0 0 0 3px var(--uw-bg); }
.uw-rcenter { position: absolute; left: 96px; top: 96px; width: 168px; height: 168px; border: 0; border-radius: 50%; background: #141417; color: var(--uw-tx);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; cursor: pointer; font-family: 'Manrope', sans-serif; }
.uw-rtime { font: 700 12px 'Manrope', sans-serif; letter-spacing: 2px; color: var(--uw-tx3); }
.uw-rname { font: 600 22px 'Sora', sans-serif; max-width: 150px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.uw-rlive { font: 700 13px 'Manrope', sans-serif; color: var(--uw-acc); max-width: 150px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.uw-ropen { margin-top: 5px; padding: 4px 12px; border-radius: 12px; background: var(--uw-surf3); font: 700 11px 'Manrope', sans-serif; color: var(--uw-tx2); }
/* Smartstabel (Kapsel) */
.uw-stack { position: absolute; inset: 0; overflow-y: auto; scrollbar-width: none; box-sizing: border-box; padding: 44px 22px 40px; display: flex; flex-direction: column; gap: 8px; }
.uw-stack::-webkit-scrollbar { display: none; }
.uw-shead { display: flex; justify-content: space-between; align-items: baseline; padding: 0 6px 4px; }
.uw-stime { font: 600 30px/1 'Sora', sans-serif; letter-spacing: -1px; }
.uw-sdate { font: 700 12px 'Manrope', sans-serif; letter-spacing: 1px; color: var(--uw-tx3); text-transform: uppercase; }
.uw-tile { width: 100%; box-sizing: border-box; border: 0; text-align: left; border-radius: 24px; background: var(--uw-surf); color: var(--uw-tx); padding: 12px 14px;
  display: flex; align-items: center; gap: 12px; cursor: pointer; font-family: 'Manrope', sans-serif; transition: background .15s, transform .1s; }
.uw-tile:hover { background: #1d1d21; }
.uw-tile:active { transform: scale(.98); }
.uw-tile.col { flex-direction: column; align-items: stretch; gap: 6px; }
.uw-tile.center { align-items: center; }
.uw-tile.static { cursor: default; }
.uw-tile.static:hover { background: var(--uw-surf); }
.uw-trow { display: flex; gap: 8px; }
.uw-trow .uw-tile { flex: 1; min-width: 0; }
.uw-tdot { width: 40px; height: 40px; flex: none; border-radius: 20px; display: flex; align-items: center; justify-content: center; color: #fff; }
.uw-tdot svg { width: 20px; height: 20px; }
.uw-tcol { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.uw-tlab { font: 700 11px 'Manrope', sans-serif; letter-spacing: 1px; color: var(--uw-tx3); }
.uw-tlab.red { color: #ff8a8a; }
.uw-ttxt { font: 700 14px 'Manrope', sans-serif; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.uw-pval { display: flex; align-items: baseline; gap: 4px; }
.uw-pval b { font: 600 26px/1 'Sora', sans-serif; font-variant-numeric: tabular-nums; }
.uw-pval span { font: 600 12px 'Manrope', sans-serif; color: var(--uw-tx3); }
.uw-ekg svg { display: block; width: 100%; height: 18px; }
.uw-sring { position: relative; width: 62px; height: 62px; }
.uw-sring svg { width: 62px; height: 62px; }
.uw-sarc, .uw-aarc { transition: stroke-dasharray .6s ease; }
.uw-spct { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font: 700 12px 'Manrope', sans-serif; }
.uw-brow { display: flex; justify-content: space-between; align-items: center; }
.uw-bval { font: 700 12px 'Manrope', sans-serif; }
.uw-bval.low { color: var(--uw-low); }
.uw-bar { display: block; height: 6px; border-radius: 3px; background: #2a2a2f; overflow: hidden; }
.uw-bar i { display: block; height: 100%; width: 0; background: var(--uw-acc); transition: width .5s ease; }
.uw-bar i.low { background: var(--uw-low); }
.uw-minis { display: flex; justify-content: center; gap: 8px; padding-top: 4px; }
.uw-mini { width: 46px; height: 46px; border: 0; border-radius: 23px; display: flex; align-items: center; justify-content: center; color: #fff; cursor: pointer;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.28), inset 0 -10px 14px rgba(0,0,0,.18); transition: transform .1s; }
.uw-mini:active { transform: scale(.94); }
.uw-mini svg { width: 22px; height: 22px; }

/* ---------- Fase 3: Helse og Aktivitet ---------- */
.uw-hero { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 4px 0 6px; }
.uw-heart { width: 40px; height: 40px; color: #e5484d; }
.uw-heart svg { width: 40px; height: 40px; fill: #e5484d; }
.uw.beat .uw-heart { animation: uwBeat var(--uw-beat, 1s) ease-in-out infinite; }
/* Uten transform (transform-animasjoner gjør klokka uskarp i FiveM) */
@keyframes uwBeat { 0%, 100% { opacity: 1; } 14% { opacity: .55; } 28% { opacity: 1; } 42% { opacity: .7; } 60% { opacity: 1; } }
.uw-pval.big b { font-size: 44px; letter-spacing: -1px; }
.uw-pword { font: 700 13px 'Manrope', sans-serif; color: var(--uw-tx2); }
.uw-step { display: flex; align-items: center; gap: 8px; padding: 8px; border-radius: 22px; background: var(--uw-surf); }
.uw-sbtn2 { width: 40px; height: 40px; flex: none; border: 0; border-radius: 20px; background: var(--uw-surf3); color: var(--uw-tx); font: 600 22px/1 'Sora', sans-serif; cursor: pointer; }
.uw-smid { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 1px; }
.uw-smid b { font: 600 18px 'Sora', sans-serif; color: var(--uw-acc); font-variant-numeric: tabular-nums; }
.uw-ahero { display: flex; justify-content: center; padding: 2px 0 6px; }
.uw-aring { position: relative; width: 132px; height: 132px; }
.uw-aring svg { width: 132px; height: 132px; }
.uw-ain { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.uw-ain b { font: 600 24px 'Sora', sans-serif; font-variant-numeric: tabular-nums; }
.uw-ain span { font: 600 12px 'Manrope', sans-serif; color: var(--uw-tx3); }
.uw-week { display: flex; gap: 6px; align-items: flex-end; height: 92px; padding: 8px 10px; border-radius: 20px; background: var(--uw-surf); }
.uw-wcol { flex: 1; height: 100%; display: flex; flex-direction: column; align-items: center; gap: 4px; }
.uw-wbar { flex: 1; width: 100%; max-width: 18px; display: flex; align-items: flex-end; border-radius: 6px; background: #1f1f24; overflow: hidden; }
.uw-wbar i { display: block; width: 100%; border-radius: 6px; background: #2f7f4a; }
.uw-wbar i.done { background: #22c55e; }
.uw-wcol.today .uw-wbar i { background: var(--uw-acc); }
.uw-wday { font: 700 10px 'Manrope', sans-serif; color: var(--uw-tx3); }
.uw-wcol.today .uw-wday { color: var(--uw-tx); }

/* Tastaturfokus */
#uw-anchor :focus { outline: none; }
#uw-anchor :focus-visible { outline: 2px solid var(--uw-acc); outline-offset: 3px; }
.uw-face:focus-visible { outline-offset: -8px; border-radius: inherit; }

/* ALT-pille */
.uw-flpill { position: fixed; left: 50%; bottom: 34px; transform: translateX(-50%); z-index: 50; display: flex; align-items: center; gap: 8px;
  padding: 8px 14px; border-radius: 18px; background: rgba(7,7,10,.9); color: #fff; font: 700 13px 'Manrope', sans-serif; pointer-events: none; }
.uw-flpill kbd { font: 700 11.5px/1 system-ui, sans-serif; background: #eef0f3; color: #101317; border-radius: 4px; padding: 3px 6px; box-shadow: 0 2px 0 rgba(0,0,0,.4); }

@media (prefers-reduced-motion: reduce) {
  #uw-slide, .uw-layer, .uw-mark, .uw-toast { transition: none !important; }
  .uw.buzz .uw-case { animation: none; }
  .uw.beat .uw-heart { animation: none; }
  .uw-ricon, .uw-tick, .uw-sarc, .uw-aarc, .uw-bar i { transition: none !important; }
}

/* =====================================================================
   Fase 4: urskiver, reimer, Klokke, Vaer, Finn min U og U-Store
   Alt er statisk; de eneste animasjonene (radarsveip, alarmvibrering) stopper naar klokka er nede.
   ===================================================================== */
.ws-prev { --uw-bg: #0d0d0f; --uw-surf: #17171a; --uw-surf3: #26262b; --uw-line: #2a2a2f;
  --uw-tx: #ffffff; --uw-tx2: #cecece; --uw-tx3: #a9a9b0; --uw-acc: #ffb200; --uw-low: #ff6b6b;
  --uw-metal: linear-gradient(150deg, #64656c 0%, #3a3b41 20%, #222327 48%, #2d2e33 74%, #55565d 100%);
  font-family: 'Manrope', 'Segoe UI', system-ui, sans-serif; color: var(--uw-tx); }

/* Reimer (U-Store) */
.band-sand .uw-strap { background: radial-gradient(circle at 50% 50%, #8c7b62 0 4px, transparent 4.5px) 0 0/100% 26px repeat-y, linear-gradient(90deg,#8e7d63,#c4b294 50%,#8e7d63); }
.band-sand .uw-strap.top { background: linear-gradient(90deg,#8e7d63,#c4b294 50%,#8e7d63); }
.band-red .uw-strap { background: radial-gradient(circle at 50% 50%, #3e0f12 0 4px, transparent 4.5px) 0 0/100% 26px repeat-y, linear-gradient(90deg,#4a1418,#86262b 50%,#4a1418); }
.band-red .uw-strap.top { background: linear-gradient(90deg,#4a1418,#86262b 50%,#4a1418); }
.band-white .uw-strap { background: radial-gradient(circle at 50% 50%, #9a9a9f 0 4px, transparent 4.5px) 0 0/100% 26px repeat-y, linear-gradient(90deg,#a9a9ae,#e4e4e7 50%,#a9a9ae); }
.band-white .uw-strap.top { background: linear-gradient(90deg,#a9a9ae,#e4e4e7 50%,#a9a9ae); }
.band-gold .uw-strap { background: repeating-linear-gradient(180deg, transparent 0 21px, rgba(40,25,0,.55) 21px 23px),
  linear-gradient(90deg,#6b4f1c 0%,#6b4f1c 22%,#3a2a0c 22.5%,#3a2a0c 23.5%,#a07a2e 24%,#e2c06c 50%,#a07a2e 76%,#3a2a0c 76.5%,#3a2a0c 77.5%,#6b4f1c 78%,#6b4f1c 100%); }
.band-leather .uw-strap { overflow: hidden; background: repeating-linear-gradient(100deg, rgba(0,0,0,.06) 0 3px, transparent 3px 7px), linear-gradient(90deg,#3d2616,#6e4528 50%,#3d2616); }
.band-leatherblk .uw-strap { overflow: hidden; background: repeating-linear-gradient(100deg, rgba(255,255,255,.025) 0 3px, transparent 3px 7px), linear-gradient(90deg,#141416,#2a2a2e 50%,#141416); }
.band-leather .uw-strap::after, .band-leatherblk .uw-strap::after { content: ''; position: absolute; inset: -4px 9px; border: 2px dashed rgba(226,196,150,.55); border-radius: 30px; }
.band-leatherblk .uw-strap::after { border-color: rgba(255,178,0,.55); }
.band-mesh .uw-strap { background: repeating-linear-gradient(0deg, rgba(0,0,0,.35) 0 1px, transparent 1px 3px), repeating-linear-gradient(90deg, rgba(255,255,255,.06) 0 1px, transparent 1px 3px), linear-gradient(90deg,#3c3d42,#8b8c93 50%,#3c3d42); }
.band-nato .uw-strap { background: repeating-linear-gradient(0deg, rgba(255,255,255,.035) 0 1px, transparent 1px 3px),
  linear-gradient(90deg,#1c1e22 0 30%,#5a5c62 30% 36%,#ffb200 36% 64%,#5a5c62 64% 70%,#1c1e22 70%); }
.band-carbon .uw-strap { background: linear-gradient(90deg, rgba(0,0,0,.5), transparent 20%, transparent 80%, rgba(0,0,0,.5)), repeating-conic-gradient(#1b1b1e 0 25%, #303035 0 50%) 0 0/9px 9px; }

/* Urskiver */
.uw-fx { position: absolute; inset: 0; display: none; border-radius: inherit; overflow: hidden; pointer-events: none; }
.uw-face.alt > :not(.uw-fx) { display: none; }
.uw-face.alt .uw-fx { display: block; }
.uw.fx-alt .uw-mark { opacity: 0; }
/* Skrittmaalet i rammen hoerer til standardskiva */
.uw.fx-alt .uw-tick.on { stroke: #3c3c43; }
.uw.fx-alt .uw-tick.major.on { stroke: #6a6a72; }
.kapsel.fx-alt .uw-tick.on { stroke: #2c2c31; }
.fx { position: absolute; inset: 0; overflow: hidden; border-radius: inherit; }
.fx-svg { position: absolute; left: 0; top: 0; width: 100%; height: 100%; }
.uw-fstd { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; background: var(--uw-bg); }
.uw-fstd > :not(.fx-svg) { position: relative; }
.fx-kick { font: 800 13px 'Manrope', sans-serif; letter-spacing: .12em; color: var(--uw-acc); }
.fx-kick.dim { color: #6c6c74; letter-spacing: .14em; }
.fx-flip { position: relative; border-radius: 16px; background: linear-gradient(#26262b 50%, #1e1e22 50%); display: flex; align-items: center; justify-content: center;
  font-family: 'Sora', sans-serif; font-weight: 700; color: #f2f2f2; box-shadow: inset 0 1px 0 rgba(255,255,255,.06), 0 4px 10px rgba(0,0,0,.5); font-variant-numeric: tabular-nums; }
.fx-flip i { position: absolute; left: 0; right: 0; top: 50%; height: 2px; background: #0b0b0d; }
.fx-mhead { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.fx-mhead.c { justify-content: center; }
.fx-mhead b { font: 800 50px/1 'Manrope', sans-serif; letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.orbit .fx-mhead b, .ws-prev.o .fx-mhead b { font-size: 42px; }
.fx-mhead span { font: 800 12px 'Manrope', sans-serif; color: var(--uw-acc); }
.fx-tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.fx-tile { background: #17171a; border-radius: 18px; padding: 9px 12px; display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.fx-tile > span:first-child { font: 800 10px 'Manrope', sans-serif; letter-spacing: .06em; }
.fx-tile b { font: 800 19px 'Manrope', sans-serif; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-variant-numeric: tabular-nums; }
.fx-tile > span:last-child { font: 700 10px 'Manrope', sans-serif; color: #8a8a92; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fx-bar { display: flex; align-items: center; gap: 8px; padding: 0 4px; font: 800 10px 'Manrope', sans-serif; color: #9a9aa2; }
.fx-bar > span { width: 44px; }
.fx-bar > i { flex: 1; height: 6px; border-radius: 3px; background: #26262b; position: relative; overflow: hidden; }
.fx-bar > i > i { position: absolute; left: 0; top: 0; bottom: 0; }
.fx-lcd { position: absolute; inset: 26px; border-radius: 78px; background: linear-gradient(170deg, #b3bea2, #97a385); box-shadow: inset 0 3px 8px rgba(0,0,0,.45); }
.fx-lcd.o { inset: 30px; border-radius: 50%; }
.fx-words { font-family: 'Manrope', sans-serif; font-weight: 800; line-height: 1.02; letter-spacing: -.02em; color: #fff; }
.fx-words span { color: var(--uw-acc); }
.fx-wsub { font: 700 13px 'Manrope', sans-serif; color: #8a8a92; margin-top: 14px; }
.fx-term { display: flex; white-space: nowrap; }
.fx-term span { display: inline-block; flex: none; color: #5d7a5c; }
.fx-term b { font-weight: 500; color: #9cc79a; overflow: hidden; text-overflow: ellipsis; }
.fx-term b.warn { color: #e0a35a; }
.fx-cursor { display: inline-block; width: 11px; height: 18px; background: var(--uw-acc); vertical-align: middle; }
.fx-sweep { position: absolute; width: 340px; height: 340px; border-radius: 50%;
  background: conic-gradient(from var(--fxa), transparent 0deg, transparent 300deg, rgba(120,200,170,.3) 360deg); animation: fxSweep 4s linear infinite; }
/* Vinkelen i gradienten animeres (ikke transform: transform-animasjoner gjør klokka uskarp i FiveM) */
@property --fxa { syntax: '<angle>'; inherits: false; initial-value: 0deg; }
@keyframes fxSweep { to { --fxa: 360deg; } }
#uw-anchor.hidden .fx-sweep, .uw-pscr .fx-sweep, .ws-prev .fx-sweep { animation: none; }

/* Alarm som ringer: klokka vibrerer med jevne mellomrom til den slaas av */
.uw-alarm { display: flex; align-items: center; justify-content: center; padding: 30px; }
.uw-aic { width: 72px; height: 72px; border-radius: 36px; background: rgba(255,178,0,.14); color: var(--uw-acc); display: flex; align-items: center; justify-content: center; }
.uw-aic svg { width: 34px; height: 34px; }
.uw.alarming .uw-case { animation: uwRing 1.6s linear infinite; }
#uw-anchor.hidden .uw.alarming .uw-case { animation: none; }
@keyframes uwRing { 0%, 34%, 100% { margin-left: 0; } 4%, 12%, 20%, 28% { margin-left: -3px; } 8%, 16%, 24%, 32% { margin-left: 3px; } }

/* Knapper og rader i appene */
.uw-wbtn { flex: 1; min-height: 46px; border: 0; border-radius: 23px; font: 700 15px 'Manrope', sans-serif; cursor: pointer; transition: transform .1s; padding: 0 14px; }
.uw-wbtn:active { transform: scale(.97); }
.uw-wbtn.dark { background: var(--uw-surf3); color: var(--uw-tx); }
.uw-wbtn.acc { background: var(--uw-acc); color: #151518; }
.uw-wbtn.red { background: #ef4444; color: #fff; }
.uw-wbtn.wide { flex: none; width: 100%; }
.uw-cbtn2 { display: flex; gap: 8px; width: 100%; margin-top: 4px; }
.uw-cwrap .uw-cbtn2 { min-width: 230px; margin-top: 12px; }
.uw-link { width: 100%; border: 0; color: var(--uw-tx); cursor: pointer; text-align: left; }
.uw-link:hover { background: #1d1d21; }
.uw-link b { color: var(--uw-tx2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 150px; }
.uw-chip.on { background: var(--uw-acc); color: #151518; }
.uw-note.c { text-align: center; }
.uw-empty.sm { flex: none; padding: 18px 0; font-size: 14px; }
.uw-row.mono b { font-variant-numeric: tabular-nums; }

/* Urskive- og reimvelger */
.uw-picks { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.uw-pick { border: 0; padding: 6px 4px 8px; border-radius: 22px; background: var(--uw-surf); color: var(--uw-tx); display: flex; flex-direction: column; align-items: center; gap: 6px; cursor: pointer; }
.uw-pick.on { box-shadow: inset 0 0 0 2px var(--uw-acc); }
.uw-pthumb { position: relative; display: block; overflow: hidden; background: var(--uw-bg); }
.uw-pthumb.k { width: 112px; height: 136px; border-radius: 36px; }
.uw-pthumb.o { width: 118px; height: 118px; border-radius: 50%; }
.uw-pscr { position: absolute; left: 0; top: 0; display: block; transform-origin: 0 0; pointer-events: none; }
.uw-pthumb.k .uw-pscr { width: 332px; height: 402px; transform: scale(.3374); }
.uw-pthumb.o .uw-pscr { width: 360px; height: 360px; transform: scale(.3278); }
.uw-pname { font: 700 12px 'Manrope', sans-serif; color: var(--uw-tx2); }
.uw-pick.on .uw-pname { color: var(--uw-acc); }
.uw-brow2 { display: flex; align-items: center; gap: 12px; width: 100%; padding: 8px 14px 8px 8px; border: 0; border-radius: 20px; background: var(--uw-surf); color: var(--uw-tx); cursor: pointer; text-align: left; }
.uw-brow2.on .uw-pname { color: var(--uw-acc); }
.uw-brow2 .uw-pname { flex: 1; font-size: 14px; }
.uw-bsw { position: relative; width: 26px; height: 40px; flex: none; border-radius: 9px; overflow: hidden; }
.uw-bsw .uw-strap { position: absolute; inset: 0; left: 0; width: auto; height: auto; transform: none; border-radius: 9px; -webkit-mask-image: none; mask-image: none; }
.uw-bsw .uw-strap::after { inset: -6px 3px; border-width: 1.5px; border-radius: 8px; }
.uw-bck { width: 20px; height: 20px; color: var(--uw-acc); }
.uw-bck svg { width: 20px; height: 20px; }

/* Klokke */
.uw-rt { display: flex; align-items: baseline; justify-content: space-between; padding: 0 6px 2px; }
.uw-rt span { font: 700 11px 'Manrope', sans-serif; letter-spacing: 1px; color: var(--uw-tx3); }
.uw-rt b { font: 600 22px 'Sora', sans-serif; font-variant-numeric: tabular-nums; }
.uw-addbtn { min-height: 42px; border: 0; border-radius: 21px; background: var(--uw-surf3); color: var(--uw-tx); font: 700 14px 'Manrope', sans-serif; cursor: pointer; }
.uw-arow { display: flex; align-items: center; gap: 10px; padding: 8px 14px 8px 6px; border-radius: 20px; background: var(--uw-surf); }
.uw-arow.off .uw-al b { color: var(--uw-tx3); }
.uw-al { flex: 1; min-width: 0; border: 0; background: none; color: var(--uw-tx); text-align: left; padding: 2px 8px; cursor: pointer; display: flex; flex-direction: column; gap: 1px; }
.uw-al b { font: 600 24px/1.1 'Sora', sans-serif; font-variant-numeric: tabular-nums; }
.uw-al span { font: 600 12px 'Manrope', sans-serif; color: var(--uw-tx3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.uw-abig { text-align: center; font: 600 52px/1 'Sora', sans-serif; letter-spacing: -2px; font-variant-numeric: tabular-nums; padding: 4px 0 6px; }
.uw-presets { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.uw-presets .uw-chip { padding: 0; }
.uw-tbig { text-align: center; font: 600 50px/1.1 'Sora', sans-serif; letter-spacing: -1px; font-variant-numeric: tabular-nums; padding: 8px 0 4px; }
.orbit .uw-tbig { font-size: 44px; }

/* Vaer */
.uw-wx { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 0 0 6px; }
.uw-wzone { font: 700 12px 'Manrope', sans-serif; letter-spacing: 1px; color: var(--uw-tx3); text-transform: uppercase; text-align: center; max-width: 240px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.uw-wic { width: 54px; height: 54px; margin-top: 4px; color: #9fb4c8; }
.uw-wic svg { width: 54px; height: 54px; }
.uw-wic.sun { color: var(--uw-acc); }
.uw-wic.rain, .uw-wic.storm { color: #6cb6e8; }
.uw-wic.snow { color: #e6eef6; }
.uw-wtemp { font: 600 56px/1 'Sora', sans-serif; letter-spacing: -2px; }
.uw-wlab { font: 700 14px 'Manrope', sans-serif; color: var(--uw-tx2); }

/* Finn min U */
.uw-flist { display: flex; flex-direction: column; gap: 8px; }
.uw-fhero { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 2px 0 4px; }
.uw-fic { width: 56px; height: 56px; border-radius: 28px; background: #0f8f6e; color: #fff; display: flex; align-items: center; justify-content: center; }
.uw-fic svg { width: 26px; height: 26px; }

@media (prefers-reduced-motion: reduce) {
  .fx-sweep, .uw.alarming .uw-case { animation: none !important; }
}

/* ---------- U-Store paa telefonen: fanen U-Watch (bruker telefonens farger) ---------- */
.ws-wrap { display: flex; flex-direction: column; }
.ws-note { margin: 0 16px 12px; font-size: 12.5px; line-height: 1.4; color: var(--tx3); }
.ws-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; padding: 0 16px 18px; }
.ws-card { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 10px 8px 12px; border-radius: 20px; background: var(--surf); min-width: 0; }
.ws-card.on { box-shadow: inset 0 0 0 2px var(--acc); }
.ws-name { font: 700 13.5px var(--fb); color: var(--tx); text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.ws-prev { position: relative; width: 124px; height: 172px; overflow: hidden; pointer-events: none; }
.ws-zoom { position: absolute; left: 50%; top: 0; width: 400px; height: 590px; margin-left: -200px; display: flex; justify-content: center; transform: scale(.29); transform-origin: 50% 0; }

/* ---------- Musikk (U-Tunes) ---------- */
.uw-mhero { display: flex; flex-direction: column; align-items: center; gap: 3px; text-align: center; padding: 0 0 4px; }
.uw-mart { width: 92px; height: 92px; border-radius: 20px; overflow: hidden; background: #2a1520; color: #d6336c; display: flex; align-items: center; justify-content: center; margin-bottom: 6px; flex: none; }
.orbit .uw-mart { width: 64px; height: 64px; border-radius: 50%; margin-bottom: 2px; }
.orbit .uw-mart svg { width: 30px; height: 30px; }
.orbit .uw-mctl { gap: 14px; }
.orbit .uw-mb { width: 44px; height: 44px; }
.orbit .uw-mb.big { width: 56px; height: 56px; }
.orbit .uw-mtitle { font-size: 16px; }
.uw-mart img { width: 100%; height: 100%; object-fit: cover; }
.uw-mart svg { width: 44px; height: 44px; }
.uw-mtitle { font: 600 17px 'Sora', sans-serif; max-width: 250px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.orbit .uw-mtitle { max-width: 220px; }
.uw-martist { font: 600 13px 'Manrope', sans-serif; color: var(--uw-tx3); max-width: 230px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.uw-mctl { display: flex; align-items: center; justify-content: center; gap: 18px; padding: 4px 0; }
.uw-mb { width: 50px; height: 50px; border: 0; border-radius: 25px; background: var(--uw-surf3); color: var(--uw-tx); display: flex; align-items: center; justify-content: center; cursor: pointer; transition: transform .1s; }
.uw-mb:active { transform: scale(.94); }
.uw-mb svg { width: 22px; height: 22px; }
.uw-mb.big { width: 64px; height: 64px; border-radius: 32px; background: var(--uw-acc); color: #151518; }
.uw-mb.big svg { width: 28px; height: 28px; }
.uw-mctl.jam .uw-mb:not(.big) { opacity: .4; }
.uw-mvol { display: flex; align-items: center; gap: 10px; padding: 2px 4px; }
.uw-mvol .uw-bar { flex: 1; }