/* =====================================================================
   U-OS - stil
   Alt maales i px paa "designstoerrelse" (U-Phone = 400 x 840).
   app.js skalerer hele telefonen med transform: scale etter skjermhoeyde + innstilling.
   ===================================================================== */
:root {
  --fd: 'Sora', 'Segoe UI', system-ui, sans-serif;
  --fb: 'Manrope', 'Segoe UI', system-ui, sans-serif;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; overflow: hidden; background: transparent; user-select: none; }
button { font: inherit; color: inherit; }
[hidden] { display: none !important; }

/* ---------- Tema ---------- */
.theme-dark {
  --bg: #151518; --bg2: #121215; --surf: #222226; --surf2: #1c1c20; --surf3: #2a2a2f;
  --line: rgba(255,255,255,.08); --tx: #ffffff; --tx2: #cecece; --tx3: #8e8e96;
  --glass: rgba(34,34,38,.76); --icbg: #222226; --ictx: #ffffff; --shade: rgba(0,0,0,.45);
}
.theme-light {
  --bg: #f1f1f4; --bg2: #e8e8ed; --surf: #ffffff; --surf2: #f6f6f8; --surf3: #e4e4ea;
  --line: rgba(0,0,0,.08); --tx: #141416; --tx2: #4f4f57; --tx3: #85858e;
  --glass: rgba(255,255,255,.78); --icbg: #ffffff; --ictx: #141416; --shade: rgba(0,0,0,.18);
}

/* ---------- Plassering paa skjermen ---------- */
#anchor { position: fixed; right: 3.2vw; bottom: 2.4vh; pointer-events: none; }
#scaler { transform-origin: 100% 100%; }
#stage {
  pointer-events: auto;
  transform-origin: bottom right;
  transition: transform .34s cubic-bezier(.2,.9,.25,1), opacity .25s ease;
}
#stage.hidden { transform: translateY(calc(100% + 80px)); opacity: 0; pointer-events: none; }
/* Lukket telefon med nytt varsel: titter opp nederst i hjoernet (bare toppen av skjermen synes) */
#stage.peekup { transform: translateY(calc(100% - 120px)); opacity: 1; pointer-events: none; } /* bare toppen med varselet */
#stage.peekup.uflipdev { transform: translateY(40%); }

/* ---------- Rammer ---------- */
.dev {
  position: relative;
  transition: width .45s cubic-bezier(.3,.8,.3,1), height .45s cubic-bezier(.3,.8,.3,1), padding .45s, border-radius .45s;
  box-shadow: inset 0 0 0 2px #45464d, 0 30px 80px rgba(0,0,0,.5);
  background: #26262b;
}
.dev .screen {
  position: relative; width: 100%; height: 100%; overflow: hidden;
  background: var(--bg); color: var(--tx); font-family: var(--fb);
  transition: border-radius .45s, opacity .25s;
}
.sbtn, .hinge, .lens-row, .engrave, .cover { display: none; }
.sbtn { position: absolute; width: 3px; border-radius: 2px; background: #45464d; cursor: pointer; transition: transform .08s; }
.sbtn::after { content: ''; position: absolute; top: 0; bottom: 0; left: -10px; right: -10px; }
.sbtn:active { transform: scaleX(.5); }
.dev.vib { animation: uosVib .5s linear; }
@keyframes uosVib { 0%,100% { transform: translateX(0); } 10%,30%,50%,70%,90% { transform: translateX(-2px) rotate(-.3deg); } 20%,40%,60%,80% { transform: translateX(2px) rotate(.3deg); } }
.dev.rm.vib { animation: none; }

/* U-Phone */
.dev.uphone { width: 400px; height: 840px; padding: 11px; border-radius: 62px; background: #2a2a2f;
  box-shadow: inset 0 0 0 1.5px #5a5a63, inset 0 0 0 5px #1b1b1f, 0 30px 80px rgba(0,0,0,.5); }
.dev.uphone .screen { border-radius: 52px; }
.dev.uphone .sbtn { display: block; background: #44444b; }
.dev.uphone .s1 { left: -3px; top: 170px; height: 32px; }
.dev.uphone .s2 { left: -3px; top: 228px; height: 60px; }
.dev.uphone .s3 { left: -3px; top: 300px; height: 60px; }
.dev.uphone .s4 { right: -3px; top: 250px; height: 94px; }

/* U-Sung */
.dev.usung { width: 396px; height: 846px; padding: 8px; border-radius: 44px; background: #232428; }
.dev.usung .screen { border-radius: 36px; }
.dev.usung .s1, .dev.usung .s2 { display: block; }
.dev.usung .s1 { right: -3px; top: 200px; height: 82px; }
.dev.usung .s2 { right: -3px; top: 300px; height: 48px; }

/* U-Flip */
.dev.uflip { width: 372px; height: 900px; padding: 9px; border-radius: 46px; }
.dev.uflip .screen { border-radius: 38px; }
.dev.uflip .hinge { display: block; position: absolute; top: 430px; width: 4px; height: 40px; border-radius: 2px; background: #3b3b42; transition: top .45s; }
.dev.uflip .hinge.l { left: -3px; } .dev.uflip .hinge.r { right: -3px; }
.dev.uflip .s1 { display: block; right: -3px; top: 250px; height: 70px; }
.dev.uflip.folded { height: 452px; }
.dev.uflip.folded .hinge { top: auto; bottom: -4px; left: 34px; right: 34px; width: auto; height: 12px; border-radius: 0 0 10px 10px; }
.dev.uflip.folded .hinge.r { display: none; }
.dev.uflip.folded .s1 { top: 120px; }
.dev.uflip.folded .screen { opacity: 0; pointer-events: none; }
.dev.uflip.folded .cover, .dev.uflip.folded .lens-row, .dev.uflip.folded .engrave { display: block; }

/* U-Fold */
.dev.ufold { width: 760px; height: 830px; padding: 10px; border-radius: 34px; }
.dev.ufold .screen { border-radius: 26px; }
.dev.ufold .s1 { display: block; right: -3px; top: 180px; height: 80px; }
.dev.ufold.folded { width: 350px; padding: 9px; border-radius: 36px; }
.dev.ufold.folded .screen { border-radius: 28px; }
.dev.ufold.folded .hinge.l { display: block; position: absolute; left: -4px; top: 60px; bottom: 60px; width: 5px; border-radius: 3px; background: #33333a; }
/* Utbrettet U-Fold: hengselet midt paa rammen oeverst og nederst. Trykk = brett sammen. */
.dev.ufold:not(.folded) .hinge { display: block; position: absolute; left: 50%; width: 54px; height: 5px; margin-left: -27px; border-radius: 3px;
  background: linear-gradient(90deg, #2c2c32, #4a4a52 50%, #2c2c32); box-shadow: 0 0 0 1px rgba(0,0,0,.35); transition: background-color .2s, box-shadow .2s; }
.dev.ufold:not(.folded) .hinge.l { top: 2px; }
.dev.ufold:not(.folded) .hinge.r { bottom: 2px; }
.dev.ufold:not(.folded) .hinge:hover { background: #FFB200; box-shadow: 0 0 0 1px rgba(255,178,0,.35), 0 0 10px rgba(255,178,0,.25); }
.dev.ufold:not(.folded) .hinge::before { inset: -8px -14px; }
.dev.ufold:not(.folded) .hinge { z-index: 75; }
.dev.ufold.fx-busy .hinge { opacity: 0; }

/* Kamera-utsparing */
.cam { position: absolute; z-index: 70; background: #000; pointer-events: none; }
.uphone .cam { top: 12px; left: 50%; transform: translateX(-50%); width: 120px; height: 34px; border-radius: 20px; }
.usung .cam, .uflip .cam, .ufold .cam { top: 16px; left: 50%; transform: translateX(-50%); width: 13px; height: 13px; border-radius: 7px; box-shadow: 0 0 0 2px #1a1a1d; }
.ufold:not(.folded) .cam { left: 75%; top: 18px; }

/* Flip: ytterskjerm */
.cover { position: absolute; top: 14px; left: 14px; right: 14px; height: 286px; border-radius: 34px; background: #151518; color: #fff; font-family: var(--fb); overflow: hidden; }
.cover-top { display: flex; justify-content: space-between; padding: 16px 22px 0; font: 600 13px var(--fd); }
.cover-top span:last-child { color: #cecece; }
.cover-clock { text-align: center; font: 600 64px/1 var(--fd); letter-spacing: -3px; margin-top: 30px; }
.cover-date { text-align: center; font-size: 14px; color: #cecece; margin-top: 8px; }
.cover-notif { margin: 22px 18px 0; text-align: center; font-size: 13px; font-weight: 700; color: var(--acc); }
.lens-row { position: absolute; left: 30px; bottom: 34px; }
.lens-row .lens { display: inline-block; width: 40px; height: 40px; border-radius: 20px; background: #101012; box-shadow: inset 0 0 0 3px #3a3a40, inset 0 0 0 9px #18181b; margin-right: 12px; vertical-align: middle; }
.lens-row .flash { display: inline-block; width: 10px; height: 10px; border-radius: 5px; background: #6b6b55; vertical-align: middle; }
.engrave { position: absolute; right: 34px; bottom: 36px; font: 700 34px var(--fd); color: rgba(255,255,255,.12); }

/* ---------- Bakgrunn ---------- */
.wall { position: absolute; inset: 0; color: var(--acc); pointer-events: none; }
.wall svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.wall.carbon { background: repeating-linear-gradient(45deg, rgba(128,128,128,.06) 0 2px, transparent 2px 9px); }
.wall.midnight { background: radial-gradient(circle at 50% 110%, rgba(128,128,140,.16), transparent 60%); }

/* ---------- Statuslinje ---------- */
.statusbar { position: absolute; top: 0; left: 0; right: 0; z-index: 65; height: 56px; padding: 0 34px; display: flex; justify-content: space-between; align-items: center; font: 600 14px var(--fd); color: var(--tx); cursor: pointer; }
.usung .statusbar, .uflip .statusbar, .ufold .statusbar { padding: 0 28px; height: 52px; }
.sb-right { display: flex; gap: 7px; align-items: center; }
.sb-dnd { width: 12px; height: 12px; border-radius: 6px; background: var(--acc); }
.sb-ic { display: inline-flex; align-items: center; }
.sb-ic[hidden] { display: none; }

/* ---------- Volum (sideknappene) ---------- */
.volhud { position: absolute; z-index: 95; top: 50%; right: 14px; width: 44px; padding: 12px 0; border-radius: 22px; background: linear-gradient(rgba(30,30,34,.82), rgba(30,30,34,.7)); color: #fff; display: flex; flex-direction: column; align-items: center; gap: 10px; transform: translate(70px, -50%); opacity: 0; transition: transform .25s cubic-bezier(.2,.9,.25,1), opacity .2s; pointer-events: none; box-shadow: 0 8px 24px rgba(0,0,0,.35); }
.volhud.left { right: auto; left: 14px; transform: translate(-70px, -50%); }
.volhud.show { transform: translate(0, -50%); opacity: 1; }
.volhud .vh-ic { display: flex; }
.volhud .vh-bar { position: relative; width: 8px; height: 120px; border-radius: 4px; background: rgba(255,255,255,.18); overflow: hidden; }
.volhud .vh-bar b { position: absolute; left: 0; right: 0; bottom: 0; background: var(--acc); border-radius: 4px; transition: height .15s; }

/* ---------- Lag ---------- */
.layer { position: absolute; inset: 0; transition: opacity .25s ease, transform .3s cubic-bezier(.2,.9,.25,1); }
.layer.off { opacity: 0; pointer-events: none; }
.lock.off { transform: translateY(-40px); }
.home.off { transform: scale(.94); }
.appview { background: var(--bg); z-index: 20; transform-origin: 50% 60%; }
.appview.off { transform: scale(.9); }

/* ---------- Glass ---------- */
.glass { background: var(--glass); border: 1px solid var(--line); }

/* ---------- Laaseskjerm ---------- */
.lock { z-index: 30; display: flex; flex-direction: column; padding-top: 56px; }
.lock-wide { display: flex; flex-direction: column; flex: 1; min-height: 0; }
.lock-head { text-align: center; margin-top: 26px; }
.lock-date { display: inline-flex; gap: 8px; align-items: center; font-size: 16px; font-weight: 600; color: var(--tx2); }
.lock-date svg { color: var(--acc-ink); }
.lock-clock { font: 600 100px/1 var(--fd); letter-spacing: -4px; margin-top: 6px; }
.lock-list { margin: 28px 14px 0; display: flex; flex-direction: column; gap: 8px; overflow: hidden; flex: 1; }
.lock-foot { padding: 0 0 36px; text-align: center; font-size: 12px; font-weight: 600; color: var(--tx2); cursor: pointer; }
.lock-foot b { display: block; width: 26px; height: 26px; margin: 0 auto 8px; color: var(--acc-ink); }
.lock-ready .lock-foot { color: var(--tx); }
.lock-ready { cursor: pointer; }
.ufold:not(.folded) .lock { padding-top: 52px; }
.ufold:not(.folded) .lock-wide { display: flex; flex-direction: row; justify-content: space-between; padding: 30px 44px 0; flex: 1; }
.ufold:not(.folded) .lock-wide .lock-head { text-align: left; margin: 0; }
.ufold:not(.folded) .lock-wide .lock-clock { font-size: 120px; }
.ufold:not(.folded) .lock-wide .lock-list { width: 310px; flex: none; margin: 4px 0 0; }

/* Varselkort */
.nc { border-radius: 22px; padding: 13px 15px; display: flex; gap: 12px; align-items: flex-start; }
.nc-ic { width: 38px; height: 38px; border-radius: 12px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; background: var(--surf3); color: var(--acc-ink); }
.nc-ic.acc { background: var(--acc); color: var(--on-acc); }
.nc-body { flex: 1; min-width: 0; }
.nc-top { display: flex; justify-content: space-between; font-size: 13px; color: var(--tx2); }
.nc-top b { color: var(--tx); }
.nc-txt { font-size: 14px; margin-top: 3px; color: var(--tx); opacity: .92; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; word-break: break-word; }

/* ---------- Banner (varsel mens telefonen er oppe) ---------- */
.banner { position: absolute; z-index: 80; top: 10px; left: 10px; right: 10px; transform: translateY(-140%); transition: transform .38s cubic-bezier(.2,.9,.25,1); cursor: pointer; }
.banner.show { transform: translateY(0); }
.banner .nc { background: var(--surf); box-shadow: 0 14px 40px var(--shade); border: 1px solid var(--line); }
.uphone .banner { top: 8px; left: 50%; right: auto; width: 120px; height: 34px; transform: translateX(-50%); border-radius: 20px; background: #000; overflow: hidden; transition: width .42s cubic-bezier(.2,.9,.25,1), height .42s cubic-bezier(.2,.9,.25,1), border-radius .42s, opacity .2s; opacity: 0; }
.uphone .banner .nc { background: transparent; box-shadow: none; border: 0; color: #fff; opacity: 0; transition: opacity .2s .15s; }
.uphone .banner .nc-top b, .uphone .banner .nc-txt { color: #fff; }
.uphone .banner.show { width: 350px; height: 76px; border-radius: 30px; opacity: 1; transform: translateX(-50%); }
.uphone .banner.show .nc { opacity: 1; }
.ufold:not(.folded) .banner { left: auto; right: 14px; width: 340px; }

/* ---------- Varsel naar telefonen er lukket ---------- */
#peek-wrap { position: fixed; right: 3.2vw; bottom: 3vh; transform-origin: 100% 100%; display: flex; flex-direction: column; gap: 8px; align-items: flex-end; pointer-events: none; }
.peek { width: 340px; font-family: var(--fb); color: var(--tx); transform: translateX(120%); transition: transform .4s cubic-bezier(.2,.9,.25,1), opacity .3s; }
.peek.show { transform: translateX(0); }
.peek.gone { opacity: 0; }
.peek .nc { background: var(--glass); border: 1px solid var(--line); box-shadow: 0 14px 40px rgba(0,0,0,.4); }

/* ---------- Hjemskjerm ---------- */
.home { z-index: 10; display: flex; flex-direction: column; padding-top: 56px; }
.widgets { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; padding: 12px 22px 0; }
.wd { height: 148px; border-radius: 26px; padding: 16px; display: flex; flex-direction: column; justify-content: space-between; }
.wd-head { display: flex; justify-content: space-between; align-items: center; font-size: 13px; font-weight: 700; }
.wd-head svg { color: var(--acc-ink); }
.wd-big { font: 600 44px/1 var(--fd); letter-spacing: -2px; }
.wd-mid { font: 600 22px/1.1 var(--fd); letter-spacing: -.5px; }
.wd-sub { font-size: 12px; color: var(--tx2); }
/* App-widget (v0.9.3) */
.wd-app .wd-head span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.wd-appic { width: 22px; height: 22px; border-radius: 7px; flex: none; }
.wd-btn { align-self: flex-start; border: 0; border-radius: 14px; padding: 6px 14px; font: 700 12px/1 var(--fd); color: #111; background: var(--acc); cursor: pointer; }
.wd-btn:active { transform: scale(.95); }
.wd-btn.busy { opacity: .55; }
.grid { flex: 1; overflow-y: auto; display: grid; grid-template-columns: repeat(auto-fill, minmax(78px, 1fr)); align-content: start; row-gap: 20px; padding: 24px 18px 140px; justify-items: center; }
.grid::-webkit-scrollbar { display: none; }
.app { display: flex; flex-direction: column; align-items: center; gap: 7px; font-size: 11.5px; font-weight: 600; color: var(--tx); background: none; border: 0; padding: 0; cursor: pointer; width: 76px; }
.app span.l { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 76px; opacity: .92; }
.ic { position: relative; width: 62px; height: 62px; border-radius: 19px; background: var(--icbg); border: 1px solid var(--line); box-shadow: inset 0 1px 0 rgba(255,255,255,.06); display: flex; align-items: center; justify-content: center; color: var(--ictx); transition: transform .12s; }
.app:active .ic { transform: scale(.92); }
.ic.acc { background: var(--acc); border-color: var(--acc); color: var(--on-acc); }
.ic img { width: 100%; height: 100%; border-radius: 18px; object-fit: cover; }
.bdg { position: absolute; top: -6px; right: -6px; min-width: 22px; height: 22px; padding: 0 6px; box-sizing: border-box; border-radius: 11px; background: #FF3B30; color: #fff; font-size: 12px; font-weight: 800; line-height: 1; font-variant-numeric: tabular-nums; display: flex; align-items: center; justify-content: center; box-shadow: 0 0 0 2px rgba(0,0,0,.55), 0 2px 6px rgba(0,0,0,.35); z-index: 3; pointer-events: none; }
.dock { position: absolute; left: 14px; right: 14px; bottom: 24px; height: 88px; border-radius: 32px; display: flex; justify-content: space-around; align-items: center; padding: 0 10px; }
.dock .app { width: auto; }
.ufold:not(.folded) .dock { left: 50%; right: auto; width: 420px; transform: translateX(-50%); }
.ufold:not(.folded) .widgets { grid-template-columns: repeat(4, minmax(0, 1fr)); padding: 14px 30px 0; }
.ufold:not(.folded) .grid { padding: 26px 30px 140px; grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); }
.ufold.folded .ic { width: 56px; height: 56px; border-radius: 17px; }
.ufold.folded .grid { grid-template-columns: repeat(auto-fill, minmax(70px, 1fr)); padding: 22px 12px 130px; }
.ufold.folded .app { width: 70px; }
.ufold.folded .dock { left: 10px; right: 10px; height: 82px; }

/* ---------- App-visning ---------- */
.apphead { padding: 64px 22px 14px; display: flex; justify-content: space-between; align-items: flex-end; }
.usung .apphead, .uflip .apphead, .ufold .apphead { padding-top: 60px; }
.apphead h1 { margin: 0; font: 600 36px/1 var(--fd); letter-spacing: -1px; }
.apphead .sub { margin-top: 8px; font-size: 14px; color: var(--tx2); }
.ib { width: 42px; height: 42px; border-radius: 21px; border: none; background: var(--surf); color: var(--tx); display: flex; align-items: center; justify-content: center; padding: 0; cursor: pointer; flex-shrink: 0; }
.appbody { position: absolute; top: 0; left: 0; right: 0; bottom: 0; overflow-y: auto; padding-bottom: 40px; }
.appbody::-webkit-scrollbar { display: none; }
.appframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: 0; background: var(--bg); }

.soon { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 14px; padding: 0 40px; height: calc(100% - 200px); color: var(--tx2); }
.soon .ic { width: 84px; height: 84px; border-radius: 26px; }
.soon b { color: var(--tx); font: 600 20px var(--fd); }

/* ---------- Innstillinger ---------- */
.set-wrap { padding: 0 16px; display: grid; gap: 14px; }
.ufold:not(.folded) .set-wrap { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; padding: 0 24px; }
.card { background: var(--surf); border-radius: 24px; padding: 6px 0; border: 1px solid var(--line); }
.card h3 { margin: 12px 18px 4px; font-size: 12px; font-weight: 700; letter-spacing: .6px; text-transform: uppercase; color: var(--tx3); }
.rowi { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 18px; min-height: 52px; font-size: 15px; font-weight: 600; }
.rowi + .rowi { border-top: 1px solid var(--line); }
.rowi .v { color: var(--tx2); font-weight: 500; font-size: 14px; }
.profile { display: flex; align-items: center; gap: 14px; padding: 16px 18px; }
.profile .av { width: 54px; height: 54px; border-radius: 27px; background: var(--acc); color: var(--on-acc); display: flex; align-items: center; justify-content: center; font: 700 26px var(--fd); }
.profile .pn { font: 600 20px var(--fd); }
.profile .pl { font-size: 13px; color: var(--tx2); margin-top: 3px; }
.seg { display: flex; background: var(--surf3); border-radius: 14px; padding: 3px; gap: 3px; }
.seg button { border: 0; background: none; padding: 7px 14px; border-radius: 11px; font-size: 13px; font-weight: 700; color: var(--tx2); cursor: pointer; }
.seg button.on { background: var(--surf); color: var(--tx); box-shadow: 0 1px 3px rgba(0,0,0,.25); }
.sw { display: flex; flex-wrap: wrap; gap: 10px; padding: 4px 18px 16px; }
.sw button { width: 34px; height: 34px; border-radius: 17px; border: 0; cursor: pointer; padding: 0; box-shadow: inset 0 0 0 1px rgba(0,0,0,.15); }
.sw button.on { box-shadow: 0 0 0 3px var(--surf), 0 0 0 5px var(--tx); }
.wp { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; padding: 4px 18px 16px; }
.wp button { position: relative; display: block; width: 100%; aspect-ratio: 9 / 16; border-radius: 12px; border: 2px solid transparent; overflow: hidden; cursor: pointer; padding: 0; background: var(--bg); }
.wp button.on { border-color: var(--acc); }
.wp button .wall { color: var(--acc); }
.wp-l { display: block; text-align: center; font-size: 11px; color: var(--tx2); margin-top: 5px; }
.tg { position: relative; width: 50px; height: 30px; border-radius: 15px; border: 0; background: var(--surf3); cursor: pointer; padding: 0; transition: background .2s; flex-shrink: 0; }
.tg::after { content: ''; position: absolute; top: 3px; left: 3px; width: 24px; height: 24px; border-radius: 12px; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.3); transition: transform .2s; }
.tg.on { background: var(--acc); }
.tg.on::after { transform: translateX(20px); }
.range { width: 100%; padding: 2px 18px 16px; display: flex; align-items: center; gap: 12px; font-size: 13px; color: var(--tx2); }
input[type=range] { flex: 1; accent-color: var(--acc); }

/* ---------- Kalkulator ---------- */
.calc { position: absolute; top: 120px; left: 0; right: 0; bottom: 0; display: flex; flex-direction: column; justify-content: flex-end; padding: 0 18px 40px; }
.calc-exp { text-align: right; font-size: 18px; color: var(--tx2); min-height: 26px; padding: 0 8px; }
.calc-out { text-align: right; font: 600 64px/1.1 var(--fd); letter-spacing: -2px; padding: 0 8px 18px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.calc-keys { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.calc-keys button { height: 72px; border-radius: 36px; border: 0; background: var(--surf); color: var(--tx); font: 600 26px var(--fd); cursor: pointer; }
.calc-keys button.fn { background: var(--surf3); font-size: 20px; }
.calc-keys button.op { background: var(--acc); color: var(--on-acc); }
.calc-keys button.op.on { background: var(--tx); color: var(--bg); }
.calc-keys button.zero { grid-column: span 2; text-align: left; padding-left: 28px; }
.ufold:not(.folded) .calc { left: 50%; transform: translateX(-50%); width: 420px; }

/* ---------- Hurtiginnstillinger ---------- */
.qs { position: absolute; z-index: 75; left: 0; right: 0; top: 0; padding: 60px 16px 18px; background: var(--glass); border-bottom: 1px solid var(--line); border-radius: 0 0 30px 30px; transform: translateY(-105%); transition: transform .35s cubic-bezier(.2,.9,.25,1); }
.qs.show { transform: translateY(0); }
.qs-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.qt { display: flex; align-items: center; gap: 10px; padding: 14px; border-radius: 20px; border: 0; background: var(--surf); color: var(--tx); text-align: left; cursor: pointer; font-size: 13px; font-weight: 700; }
.qt i { width: 34px; height: 34px; border-radius: 17px; display: flex; align-items: center; justify-content: center; background: var(--surf3); flex-shrink: 0; }
.qt.on i { background: var(--acc); color: var(--on-acc); }
.qt small { display: block; font-weight: 500; color: var(--tx2); font-size: 11px; margin-top: 1px; }
.qs-grab { width: 40px; height: 5px; border-radius: 3px; background: var(--tx3); margin: 14px auto 0; cursor: pointer; }
.ufold:not(.folded) .qs { left: auto; width: 380px; right: 14px; border-radius: 0 0 30px 30px; }

/* ---------- Hjem-strek ---------- */
.homebar { position: absolute; z-index: 90; bottom: 4px; left: 50%; transform: translateX(-50%); width: 160px; height: 20px; border: 0; background: none; padding: 0; cursor: pointer; }
.homebar::after { content: ''; position: absolute; left: 16px; right: 16px; top: 7px; height: 5px; border-radius: 3px; background: var(--tx); opacity: .55; }
.ufold.folded .wd { padding: 14px; height: 138px; }
.ufold.folded .wd-mid { font-size: 18px; }
.ufold.folded .wd-big { font-size: 38px; }
.ufold:not(.folded) .set-wrap { display: block; columns: 2; column-gap: 14px; }
.ufold:not(.folded) .set-wrap .card { break-inside: avoid; margin-bottom: 14px; }

/* =====================================================================
   OEYER (designrunde 2)
   Ingen sanntids-uskarphet (backdrop-filter) noe sted - alt er faste farger.
   Animasjoner bruker kun transform og opacity.
   ===================================================================== */
.theme-dark { --bg: #0d0d0f; --surf: #17171a; --surf3: #26262b; --island: rgba(7,7,10,.9); }
.theme-light { --island: rgba(255,255,255,.95); }
.glass { background: var(--island); border: 0; backdrop-filter: none; }
.qs { background: var(--island); backdrop-filter: none; border-bottom: 0; border-radius: 0 0 34px 34px; }
.peek .nc { background: var(--island); border: 0; backdrop-filter: none; border-radius: 32px; padding: 12px 18px 12px 12px; align-items: center; }

/* Varsler som oeyer */
.nc-ic { width: 42px; height: 42px; border-radius: 21px; }
.lock-list .nc { border-radius: 32px; padding: 13px 18px 13px 13px; align-items: center; }
.banner .nc { border-radius: 30px; align-items: center; }

/* Fargede ikoner */
.ic.col { border: 0; border-radius: 20px; box-shadow: inset 0 1px 0 rgba(255,255,255,.3), inset 0 -14px 20px rgba(0,0,0,.16), 0 8px 18px rgba(0,0,0,.28); }
.ufold.folded .ic.col { border-radius: 18px; }

/* Widgets og dock som oeyer */
.wd { border-radius: 34px; }
.dock { left: 18px; right: 18px; height: 82px; border-radius: 41px; }
.ufold.folded .dock { left: 12px; right: 12px; height: 78px; border-radius: 39px; }

/* Ikonene spretter inn ved opplaasing */
.home .app, .home .wd, .home .dock { transition: transform .55s cubic-bezier(.34,1.45,.55,1), opacity .3s ease; }
.home.pre .app { transform: translateY(26px) scale(.7); opacity: 0; transition: none; }
.home.pre .wd, .home.pre .dock { transform: translateY(18px) scale(.94); opacity: 0; transition: none; }

/* Kanten som tegnes ved opplaasing */
#edge { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 85; pointer-events: none; opacity: 0; }
#edge rect { fill: none; stroke: var(--acc); stroke-width: 2.5; }

/* Pillen (U-Phone) fjaerer, lysglimt naar varsel kommer */
.uphone .banner { transition: width .55s cubic-bezier(.34,1.4,.55,1), height .55s cubic-bezier(.34,1.4,.55,1), border-radius .55s, opacity .2s; }
.uphone .banner.show { box-shadow: 0 16px 40px rgba(0,0,0,.45); }
.banner { transition: transform .5s cubic-bezier(.34,1.3,.55,1); }
.sheen { position: absolute; top: 0; bottom: 0; left: 0; width: 40%; pointer-events: none; background: linear-gradient(90deg, transparent, var(--acc-a), transparent); transform: translateX(-140%) skewX(-20deg); }
.banner.show .sheen { animation: sheen 1.1s ease .2s 1 both; }
@keyframes sheen { from { transform: translateX(-140%) skewX(-20deg); } to { transform: translateX(300%) skewX(-20deg); } }

/* App som vokser ut fra ikonet */
.appview { transform-origin: 0 0; }
.appview.off { transform: none; }
.appview.grow { transition: transform .5s cubic-bezier(.2,.9,.25,1), border-radius .5s cubic-bezier(.2,.9,.25,1), background-color .3s ease, opacity .2s ease; }
.appview .app-inner { position: absolute; inset: 0; transition: opacity .22s ease; }
.appview.shrunk .app-inner { opacity: 0; }

/* Redusert bevegelse */
.rm *, .rm *::before, .rm *::after { transition-duration: 0s !important; animation: none !important; }

/* =====================================================================
   FASE 2a: oppsett, kodelaas, kontoskjermer
   ===================================================================== */
.su { position: absolute; inset: 0; z-index: 50; background: var(--bg); color: var(--tx); font-family: var(--fb); }
.su-page { position: absolute; inset: 0; display: flex; flex-direction: column; gap: 12px; padding: 92px 26px 40px; animation: suIn .35s cubic-bezier(.2,.9,.25,1) both; overflow-y: auto; }
.su-page::-webkit-scrollbar { display: none; }
.su-page.center { align-items: center; text-align: center; }
.su-page.inapp { position: relative; inset: auto; min-height: 100%; padding-top: 64px; }
.su-page h1 { margin: 0; font: 600 34px/1.1 var(--fd); letter-spacing: -1px; }
.su-page p { margin: 0; font-size: 15px; line-height: 1.5; color: var(--tx2); }
.su-page .grow { flex: 1; min-height: 12px; }
.su-page .note { font-size: 12px; color: var(--tx3); text-align: center; }
@keyframes suIn { from { opacity: 0; transform: translateX(24px); } to { opacity: 1; transform: none; } }
.su-logo { width: 84px; height: 84px; border-radius: 26px; background: var(--acc); color: var(--on-acc); display: flex; align-items: center; justify-content: center; font: 700 48px var(--fd); margin: 40px 0 10px; }
.su-check { width: 84px; height: 84px; border-radius: 42px; background: var(--acc); color: var(--on-acc); display: flex; align-items: center; justify-content: center; margin: 40px 0 10px; }
.su-look { display: flex; flex-direction: column; gap: 10px; margin-top: 8px; }
.su-look .seg { align-self: flex-start; }
.su-look .sw, .su-look .wp { padding: 0; }

/* Oppstart */
.boot { position: absolute; inset: 0; background: #000; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px; }
.boot-u { width: 96px; height: 96px; border-radius: 30px; background: var(--acc); color: #111; display: flex; align-items: center; justify-content: center; font: 700 56px var(--fd); animation: bootU 1.1s cubic-bezier(.34,1.45,.55,1) both; }
.boot-t { font: 600 18px var(--fd); letter-spacing: 6px; color: #fff; animation: bootT .6s ease .55s both; }
@keyframes bootU { from { transform: scale(.4); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes bootT { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* Knapper og skjema */
.btn { height: 52px; border-radius: 26px; border: 0; background: var(--acc); color: var(--on-acc); font: 800 15px var(--fb); cursor: pointer; padding: 0 22px; flex-shrink: 0; transition: transform .12s ease, opacity .15s; }
.btn:active { transform: scale(.97); }
.btn:disabled { opacity: .6; }
.btn.sec { background: var(--surf); color: var(--tx); }
.btn.link { background: none; color: var(--acc-ink); height: 40px; }
.btn.danger { background: rgba(255,90,95,.14); color: #ff6b6b; }
.btn.small { height: 36px; border-radius: 18px; padding: 0 16px; font-size: 13px; }
.su-page > .btn:not(.small):not(.link):not(.backbtn) { width: 100%; }
.backbtn { position: absolute; top: 56px; left: 18px; width: 42px; height: 42px; padding: 0; border-radius: 21px; background: var(--surf); color: var(--tx); display: flex; align-items: center; justify-content: center; }
.backbtn + h1, .backbtn + .padwrap { margin-top: 40px; }
.form { display: flex; flex-direction: column; gap: 12px; margin-top: 6px; }
.form .btn { width: 100%; }
.fld { display: flex; flex-direction: column; gap: 6px; font-size: 13px; font-weight: 700; color: var(--tx2); }
.fld input, .fld select { height: 50px; border-radius: 16px; border: 1px solid var(--line); background: var(--surf); color: var(--tx); padding: 0 16px; font: 500 15px var(--fb); outline: none; }
.fld input:focus, .fld select:focus { border-color: var(--acc); }
.err { color: #ff6b6b; font-size: 13px; min-height: 18px; font-weight: 600; }
.err.pad18 { padding: 0 18px 8px; min-height: 0; }

/* Kodelaas-tastatur */
.padwrap { display: flex; flex-direction: column; align-items: center; gap: 12px; margin-top: 10px; }
.padwrap.onlock { position: absolute; inset: 0; padding: 110px 30px 40px; }
.pad-title { font: 600 24px var(--fd); }
.pad-sub { font-size: 13px; color: var(--tx2); min-height: 18px; }
.pad-sub.bad { color: #ff6b6b; }
.dots { display: flex; gap: 16px; margin: 8px 0 18px; }
.dot { width: 14px; height: 14px; border-radius: 7px; box-shadow: inset 0 0 0 2px var(--tx); transition: background .12s; }
.dot.on { background: var(--tx); }
.dots.shake { animation: shake .4s ease; }
@keyframes shake { 20% { transform: translateX(-10px); } 40% { transform: translateX(9px); } 60% { transform: translateX(-6px); } 80% { transform: translateX(4px); } }
.pad { display: grid; grid-template-columns: repeat(3, 76px); gap: 16px 22px; }
.key { width: 76px; height: 76px; border-radius: 38px; border: 0; background: var(--island); color: var(--tx); font: 500 30px var(--fd); cursor: pointer; display: flex; align-items: center; justify-content: center; transition: transform .1s ease, background .1s; }
.key:active { transform: scale(.92); background: var(--surf3); }
.key.del { background: none; }

/* Innstillinger: konto, sky, SIM */
.rowi.btns { justify-content: flex-start; gap: 10px; }
.rowi.plan .sm { font-size: 12px; margin-top: 2px; }
.tag { font-size: 12px; font-weight: 800; color: var(--on-acc); background: var(--acc); border-radius: 10px; padding: 4px 10px; }
.sheet { background: var(--bg); }
/* Innhold som rulles skal ikke synes bak statuslinja */
.app-inner::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 56px; background: var(--bg); z-index: 3; pointer-events: none; }
.usung .app-inner::before, .uflip .app-inner::before, .ufold .app-inner::before { height: 52px; }
.su-page.inapp .backbtn { top: 62px; }

/* =====================================================================
   SIM-SKUFF
   ===================================================================== */
.tray-clip { position: absolute; left: -176px; top: 300px; width: 176px; height: 60px; overflow: hidden; z-index: 5; }
.tray { position: absolute; left: 0; top: 6px; width: 172px; height: 48px; border-radius: 12px 2px 2px 12px; background: linear-gradient(180deg, #55555e, #2c2c32 55%, #222227); box-shadow: inset 0 1px 0 rgba(255,255,255,.25), 0 6px 16px rgba(0,0,0,.45); cursor: grab; touch-action: none; }
.tray.grab { cursor: grabbing; }
.tray-pin { position: absolute; left: 8px; top: 21px; width: 6px; height: 6px; border-radius: 3px; background: #0b0b0d; box-shadow: inset 0 1px 1px rgba(0,0,0,.8); }
.tray-grip { position: absolute; right: 14px; top: 14px; width: 26px; height: 20px; background: repeating-linear-gradient(90deg, rgba(255,255,255,.18) 0 2px, transparent 2px 6px); border-radius: 2px; }
.tray-slot { position: absolute; left: 22px; top: 3px; width: 76px; height: 42px; border-radius: 6px; background: #0b0b0d; box-shadow: inset 0 2px 6px rgba(0,0,0,.9), inset 0 0 0 1px rgba(255,180,0,.12); }
.tray-slot .simcard { position: absolute; left: 4px; top: 1px; }

.simcard { position: relative; width: 68px; height: 40px; border-radius: 5px; background: #1d1d22; box-shadow: inset 0 0 0 1px #4a4a52, 0 4px 10px rgba(0,0,0,.4); clip-path: polygon(0 0, calc(100% - 12px) 0, 100% 12px, 100% 100%, 0 100%); cursor: grab; touch-action: none; user-select: none; flex-shrink: 0; }
.simcard.dragging { position: absolute; z-index: 200; cursor: grabbing; box-shadow: inset 0 0 0 1px #ffb200, 0 14px 30px rgba(0,0,0,.55); }
.sc-chip { position: absolute; left: 8px; top: 9px; width: 18px; height: 14px; border-radius: 3px; background: #ffb200; box-shadow: inset 0 0 0 1px rgba(120,80,0,.6); }
.sc-u { position: absolute; right: 16px; top: 6px; font: 700 11px var(--fd); color: #ffb200; }
.sc-num { position: absolute; left: 8px; bottom: 4px; font: 700 7.5px var(--fb); color: #cecece; letter-spacing: .3px; white-space: nowrap; }

.sim-panel { position: absolute; left: -300px; top: 384px; width: 264px; padding: 16px; border-radius: 24px; background: rgba(7,7,10,.92); color: #fff; font-family: var(--fb); opacity: 0; transform: translateX(-24px); transition: opacity .3s ease, transform .45s cubic-bezier(.2,.9,.25,1); z-index: 6; box-shadow: 0 16px 40px rgba(0,0,0,.4); }
.sim-panel.show { opacity: 1; transform: none; }
.sp-title { font-size: 12px; font-weight: 800; letter-spacing: .8px; text-transform: uppercase; color: #ffb200; margin-bottom: 12px; }
.sp-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px 10px; min-height: 40px; }
.sp-empty { font-size: 13px; color: #8e8e96; }

.sim-hint { position: absolute; z-index: 95; top: 60px; left: 14px; right: 14px; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 10px 10px 16px; border-radius: 24px; background: var(--island); color: var(--tx); font-size: 13px; font-weight: 700; animation: suIn .3s ease both; transition: opacity .25s; }
.sim-hint.gone { opacity: 0; }
.rowi .v.sm { font-size: 12px; margin-top: 2px; }

/* =====================================================================
   FASE 2b: Kontakter, Telefon, Meldinger
   ===================================================================== */
.apphead .hbtns { display: flex; gap: 8px; }
.apphead .sub2 { margin-top: 8px; font-size: 14px; color: var(--tx2); }
.apphead .sub2 b { color: var(--acc-ink); }
.av { border-radius: 50%; display: flex; align-items: center; justify-content: center; flex-shrink: 0; color: #fff; font-family: var(--fd); font-weight: 700; box-shadow: inset 0 0 0 1px rgba(255,255,255,.08); }
.theme-light .av { color: #fff; }
.emptynote { padding: 30px 30px; text-align: center; font-size: 14px; color: var(--tx3); line-height: 1.5; }

.search { margin: 0 16px 10px; height: 44px; border-radius: 22px; background: var(--surf); display: flex; align-items: center; gap: 10px; padding: 0 16px; color: var(--tx3); }
.search input { flex: 1; min-width: 0; border: 0; background: none; outline: none; color: var(--tx); font: 500 15px var(--fb); }
.btn.padx { margin: 0 16px 8px; }

.clist { display: flex; flex-direction: column; padding: 0 8px; }
.cletter, .csection { padding: 14px 14px 6px; font-size: 12px; font-weight: 800; letter-spacing: .8px; text-transform: uppercase; color: var(--acc-ink); }
.crow { display: flex; align-items: center; gap: 12px; width: 100%; padding: 9px 10px; border: 0; background: none; border-radius: 20px; text-align: left; cursor: pointer; transition: background .12s; }
.crow:active { background: var(--surf); }
.crow + .crow { box-shadow: 0 -1px 0 var(--line); }
.crow.conv { padding: 11px 10px; }
.ctext { flex: 1; min-width: 0; }
.cname { font-size: 15.5px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cname.red { color: #ff6b6b; }
.cnum { font-size: 13px; color: var(--tx2); margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: flex; align-items: center; gap: 2px; }
.cnum.strong { color: var(--tx); font-weight: 700; }
.cfav { color: var(--acc-ink); display: flex; }
.cfav svg { fill: currentColor; }
.cright { display: flex; flex-direction: column; align-items: flex-end; gap: 5px; flex-shrink: 0; }
.ctime { font-size: 12px; color: var(--tx3); flex-shrink: 0; }
.ctime.acc { color: var(--acc-ink); font-weight: 700; }
.ubadge { min-width: 20px; height: 20px; padding: 0 6px; border-radius: 10px; background: var(--acc); color: var(--on-acc); font-size: 11.5px; font-weight: 800; display: flex; align-items: center; justify-content: center; }
.callic { display: inline-flex; color: var(--tx3); }
.callic.missed { color: #ff6b6b; }
.chk { width: 24px; height: 24px; border-radius: 12px; box-shadow: inset 0 0 0 2px var(--tx3); display: flex; align-items: center; justify-content: center; color: transparent; flex-shrink: 0; }
.crow.picked .chk { background: var(--acc); box-shadow: none; color: var(--on-acc); }

.favrow { display: flex; gap: 14px; padding: 4px 18px 8px; overflow-x: auto; }
.favrow::-webkit-scrollbar { display: none; }
.favitem { display: flex; flex-direction: column; align-items: center; gap: 6px; border: 0; background: none; padding: 0; cursor: pointer; font-size: 12px; font-weight: 600; color: var(--tx2); width: 62px; }
.favitem span { max-width: 62px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.cdetail { display: flex; flex-direction: column; align-items: center; padding: 0 16px 20px; }
.cdname { font: 600 28px var(--fd); letter-spacing: -.5px; margin-top: 14px; text-align: center; }
.cdnum { font-size: 15px; color: var(--tx2); margin-top: 4px; }
.cacts { display: flex; gap: 10px; margin-top: 20px; width: 100%; padding: 0 18px; box-sizing: border-box; justify-content: center; }
.cact { flex: 1 1 0; min-width: 0; max-width: 88px; height: 72px; border: 0; border-radius: 24px; background: var(--surf); color: var(--tx); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; cursor: pointer; font-size: 12px; font-weight: 700; transition: transform .12s; }
.cact:active { transform: scale(.95); }
.cact i { display: flex; color: var(--acc-ink); }
.cact.green i { color: #22c55e; }
.cact.on i svg { fill: currentColor; }
.formpage { padding-top: 0 !important; min-height: 0 !important; }

/* Telefon: faner nederst */
.appbody.withtabs { bottom: 0; padding-bottom: 120px; }
.tabs { position: absolute; z-index: 4; left: 18px; right: 18px; bottom: 26px; height: 70px; border-radius: 35px; display: flex; justify-content: space-around; align-items: center; padding: 0 8px; }
.tab { flex: 1; height: 56px; border: 0; border-radius: 28px; background: none; color: var(--tx3); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; font-size: 11px; font-weight: 700; cursor: pointer; }
.tab i { display: flex; }
.tab.on { color: var(--acc-ink); }
.ufold:not(.folded) .tabs { left: 50%; right: auto; width: 420px; transform: translateX(-50%); }

.dial-num { text-align: center; font: 500 38px/1.2 var(--fd); letter-spacing: 1px; min-height: 52px; margin-top: 18px; }
.dial-name { text-align: center; font-size: 14px; color: var(--acc-ink); font-weight: 700; min-height: 20px; margin-bottom: 18px; }
.dial-add { border: 0; background: none; padding: 0; font: inherit; color: var(--acc-ink); cursor: pointer; }
.cnew { display: flex; align-items: center; gap: 12px; width: calc(100% - 16px); margin: 4px 8px 6px; padding: 9px 10px; border: 0; border-radius: 20px; background: none; color: var(--acc-ink); font-weight: 700; font-size: 15px; text-align: left; cursor: pointer; }
.cnew:active { background: var(--surf); }
.cnew-ic { width: 40px; height: 40px; border-radius: 50%; flex-shrink: 0; display: flex; align-items: center; justify-content: center; background: var(--acc); color: var(--on-acc); }
.cadd { width: 30px; height: 30px; margin-left: 2px; border-radius: 50%; flex-shrink: 0; display: flex; align-items: center; justify-content: center; background: var(--surf3); color: var(--acc-ink); }
.cadd:active { background: var(--acc); color: var(--on-acc); }
.pad.dial { margin: 0 auto; justify-content: center; }
.dial-call { display: flex; justify-content: center; margin-top: 20px; }

.callbtn { width: 70px; height: 70px; border-radius: 35px; border: 0; display: flex; align-items: center; justify-content: center; cursor: pointer; color: #fff; transition: transform .12s; }
.callbtn:active { transform: scale(.92); }
.callbtn.green { background: #22c55e; }
.callbtn.red { background: #ff4d55; }
.callbtn.dark { background: rgba(255,255,255,.12); }
.callbtn.green svg, .callbtn.red svg { fill: currentColor; }

/* Anropsskjerm */
.callscreen { position: absolute; inset: 0; z-index: 78; background: #0a0a0c; color: #fff; display: flex; flex-direction: column; justify-content: space-between; padding: 110px 30px 70px; opacity: 0; transform: translateY(30px); pointer-events: none; transition: opacity .25s ease, transform .4s cubic-bezier(.2,.9,.25,1); }
.callscreen::before { content: ''; position: absolute; left: -20%; right: -20%; top: -10%; height: 60%; background: radial-gradient(ellipse at 50% 40%, var(--acc-a), transparent 65%); pointer-events: none; }
.callscreen.show { opacity: 1; transform: none; pointer-events: auto; }
.cs-top { position: relative; display: flex; flex-direction: column; align-items: center; text-align: center; }
.cs-name { font: 600 32px var(--fd); letter-spacing: -.5px; margin-top: 18px; }
.cs-status { font-size: 16px; color: #cecece; margin-top: 6px; }
.cs-status.on { color: var(--acc); font-family: var(--fd); font-weight: 600; }
.cs-num { font-size: 13px; color: #8e8e96; margin-top: 4px; }
.cs-btns { position: relative; display: flex; justify-content: space-around; align-items: flex-start; }
.cbw { cursor: pointer; display: flex; flex-direction: column; align-items: center; gap: 8px; font-size: 12px; font-weight: 700; color: #cecece; }

/* Samtalepille */
.live { position: absolute; z-index: 66; top: 14px; left: 22px; height: 28px; padding: 0 12px 0 8px; border: 0; border-radius: 14px; background: #22c55e; color: #fff; display: flex; align-items: center; gap: 7px; cursor: pointer; font: 600 13px var(--fd); opacity: 0; transform: scale(.6); pointer-events: none; transition: opacity .2s, transform .35s cubic-bezier(.34,1.4,.55,1); }
.live.show { opacity: 1; transform: none; pointer-events: auto; }
.lv-ic { display: flex; }
.lv-ic svg { fill: currentColor; }
.lv-bars { display: none; }
.uphone .live { top: 12px; left: 50%; height: 34px; width: 214px; margin-left: -107px; border-radius: 20px; background: #000; justify-content: space-between; padding: 0 14px; z-index: 69; transform: scaleX(.56); }
.uphone .live.show { transform: none; }
.uphone .live .lv-ic { color: #22c55e; }
.uphone .live .lv-t { color: #22c55e; }
.usung .live, .uflip .live, .ufold .live { top: 12px; }

/* Samtale (tråd) */
.thread { position: absolute; inset: 0; display: flex; flex-direction: column; }
.th-head { display: flex; align-items: center; gap: 10px; padding: 60px 14px 10px; border-bottom: 1px solid var(--line); flex-shrink: 0; }
.th-head .ib { width: 38px; height: 38px; }
.th-title { flex: 1; min-width: 0; }
.th-list { flex: 1; overflow-y: auto; padding: 14px 14px 10px; display: flex; flex-direction: column; gap: 4px; }
.th-list::-webkit-scrollbar { display: none; }
.th-comp { display: flex; align-items: center; gap: 8px; padding: 10px 12px 34px; flex-shrink: 0; }
.th-comp input { flex: 1; min-width: 0; height: 44px; border-radius: 22px; border: 1px solid var(--line); background: var(--surf); color: var(--tx); padding: 0 16px; font: 500 15px var(--fb); outline: none; }
.th-comp input:focus { border-color: var(--acc); }
.ib.acc { background: var(--acc); color: var(--on-acc); }
.msg { display: flex; flex-direction: column; max-width: 78%; }
.msg.out { align-self: flex-end; align-items: flex-end; }
.msg.in { align-self: flex-start; align-items: flex-start; }
.msender { font-size: 11px; font-weight: 700; color: var(--acc-ink); margin: 6px 0 2px 12px; }
.bubble { padding: 10px 14px; border-radius: 22px; font-size: 15px; line-height: 1.35; word-break: break-word; white-space: pre-wrap; user-select: text; }
.msg.in .bubble { background: var(--surf3); color: var(--tx); border-bottom-left-radius: 8px; }
.msg.out .bubble { background: var(--acc); color: var(--on-acc); border-bottom-right-radius: 8px; }
.bubble.loc { padding: 0; overflow: hidden; width: 230px; border: 0; cursor: pointer; text-align: left; color: var(--acc); background: var(--surf3) !important; }
.bubble.loc svg { display: block; width: 100%; height: 100px; }
.loccap { padding: 8px 12px 10px; color: var(--tx); font-size: 14px; font-weight: 700; }
.loccap .sm { font-size: 12px; font-weight: 500; color: var(--tx2); margin-top: 2px; }
.mtime { font-size: 10.5px; color: var(--tx3); margin: 3px 8px 6px; }
.ufold:not(.folded) .thread { left: 50%; width: 640px; margin-left: -320px; }
.ufold:not(.folded) .clist, .ufold:not(.folded) .search { max-width: 660px; margin-left: auto; margin-right: auto; width: calc(100% - 32px); }
.banner:not(.show) { pointer-events: none; }

/* Demp / hoeyttaler */
.cs-btns { flex-direction: column; align-items: center; gap: 26px; }
.cs-btns > .cbw { align-self: center; }
.cs-opts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; width: 100%; }
.cs-opts .callbtn { width: 62px; height: 62px; border-radius: 31px; }
.cs-opts .callbtn svg { width: 24px; height: 24px; }
.callbtn.dark.on { background: #fff; color: #111; }
.lv-mute { display: flex; opacity: .9; }
.uphone .live .lv-mute { color: #cecece; }
.uphone .live { justify-content: flex-start; gap: 6px; }
.uphone .live .lv-t { margin-left: auto; }
.cs-listen { display: inline-flex; align-items: center; gap: 6px; margin-top: 12px; padding: 6px 12px; border-radius: 14px; background: rgba(255,255,255,.08); font-size: 12.5px; font-weight: 700; color: #cecece; }
.cs-listen svg { color: var(--acc); }

/* =====================================================================
   FASE 2c: Finn min U, mistet-modus, deling
   ===================================================================== */
.toast { position: absolute; z-index: 96; left: 50%; bottom: 46px; transform: translateX(-50%); max-width: 80%; padding: 10px 16px; border-radius: 20px; background: var(--island); color: var(--tx); font-size: 13px; font-weight: 700; text-align: center; box-shadow: 0 10px 30px var(--shade); animation: toastIn .3s ease both; transition: opacity .3s; pointer-events: none; }
@keyframes toastIn { from { opacity: 0; transform: translate(-50%, 12px); } to { opacity: 1; transform: translate(-50%, 0); } }
.toast.bad { color: #ff6b6b; }
.toast.gone { opacity: 0; }
.tag { display: inline-block; margin-left: 4px; padding: 2px 8px; border-radius: 9px; background: var(--acc); color: var(--on-acc); font-size: 10.5px; font-weight: 800; vertical-align: 2px; }
.find-ic { width: 40px; height: 40px; border-radius: 20px; background: #16a34a; color: #fff; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.find-ic.lost { background: #ef4444; }
.find-ic.wiped { background: var(--surf3); color: var(--tx2); }
.cnum.red { color: #ff6b6b; }
.find-map { position: relative; height: 220px; margin: 0 16px 14px; border-radius: 28px; overflow: hidden; background: #0f1a14; }
.theme-light .find-map { background: #e3efe7; }
.fm-grid { position: absolute; inset: -40px; background-image: linear-gradient(rgba(34,197,94,.12) 1px, transparent 1px), linear-gradient(90deg, rgba(34,197,94,.12) 1px, transparent 1px); background-size: 28px 28px; transform: rotate(-12deg); }
.fm-ring { position: absolute; left: 50%; top: 44%; width: 120px; height: 120px; margin: -60px 0 0 -60px; border-radius: 50%; background: rgba(34,197,94,.18); animation: fmPulse 2.4s ease-out infinite; }
/* Uten transform (transform-animasjoner gjør hele telefonen uskarp i FiveM) */
.fm-dot { position: absolute; left: 50%; top: 44%; width: 40px; height: 40px; margin: -20px 0 0 -20px; border-radius: 20px; background: #16a34a; color: #fff; display: flex; align-items: center; justify-content: center; box-shadow: 0 0 0 4px rgba(255,255,255,.9); }
.find-map.none .fm-ring { display: none; }
.find-map.none .fm-dot { background: var(--surf3); color: var(--tx2); }
@keyframes fmPulse { from { width: 36px; height: 36px; margin: -18px 0 0 -18px; opacity: 1; } to { width: 168px; height: 168px; margin: -84px 0 0 -84px; opacity: 0; } }
.rm .fm-ring { animation: none; }
.fm-cap { position: absolute; left: 12px; right: 12px; bottom: 12px; padding: 10px 14px; border-radius: 18px; background: var(--island); display: flex; flex-direction: column; gap: 2px; }
.fm-cap b { font-size: 14px; color: var(--tx); }
.fm-cap span { font-size: 12px; color: var(--tx2); }
.fm-cap span.live { color: #22c55e; font-weight: 800; }
.find-act { width: 100%; border: 0; background: none; text-align: left; cursor: pointer; justify-content: flex-start; color: var(--tx); }
.find-act i { display: flex; width: 34px; height: 34px; border-radius: 17px; background: var(--surf3); align-items: center; justify-content: center; color: var(--acc-ink); flex-shrink: 0; }
.find-act .grow { flex: 1; min-width: 0; }
.find-act.red, .find-act.red i { color: #ff6b6b; }
.form .btn.danger { background: #ef4444; color: #fff; }

.lostlock { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; text-align: center; padding: 80px 30px 50px; gap: 10px; background: rgba(0,0,0,.35); }
.ll-clock { font: 600 64px/1 var(--fd); letter-spacing: -2px; margin-bottom: 26px; }
.ll-ic { width: 76px; height: 76px; border-radius: 38px; background: #ef4444; color: #fff; display: flex; align-items: center; justify-content: center; }
.lostlock h2 { margin: 8px 0 0; font: 600 26px var(--fd); }
.lostlock p { margin: 0; font-size: 15px; line-height: 1.5; color: var(--tx2); }
.ll-num { margin-top: 6px; font: 600 24px var(--fd); color: var(--acc-ink); }
.lostlock .grow { flex: 1; }
.lostlock .btn { width: 100%; }
.su-check.lockic { background: #ef4444; color: #fff; }

.modal { position: absolute; inset: 0; z-index: 94; background: rgba(0,0,0,.45); display: flex; align-items: flex-end; padding: 14px 14px 40px; animation: fadeIn .2s ease both; }
.modal-box { width: 100%; background: var(--surf); border-radius: 32px; padding: 22px 18px 18px; display: flex; flex-direction: column; align-items: center; gap: 4px; animation: suIn .35s cubic-bezier(.2,.9,.25,1) both; }
.mb-k { font-size: 12px; font-weight: 800; letter-spacing: .6px; text-transform: uppercase; color: var(--acc-ink); margin-bottom: 10px; }
.mb-btns { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; width: 100%; margin-top: 16px; }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }

/* =====================================================================
   FASE 3: Kamera og Galleri
   ===================================================================== */
.cam-start { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 14px; padding: 20px 30px; }
.cs-lens { width: 110px; height: 110px; border-radius: 55px; background: #111; color: #fff; display: flex; align-items: center; justify-content: center; box-shadow: inset 0 0 0 6px #2a2a2f, inset 0 0 0 14px #18181b; }
.cam-start p { margin: 0; color: var(--tx2); font-size: 14px; line-height: 1.5; }
.cam-start .btn { width: 100%; }
.cam-keys { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; width: 100%; margin: 4px 0 8px; }
.cam-keys div { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-radius: 14px; background: var(--surf); font-size: 12px; font-weight: 700; color: var(--tx2); }
kbd { font: 800 11px var(--fb); padding: 3px 7px; border-radius: 6px; background: var(--surf3); color: var(--tx); }

#stage.camhide { opacity: 0; transform: translateY(40px); pointer-events: none; }
/* Fri kamera (ALT): telefonen dempes litt, pille nederst paa skjermen */
#stage.freelook { opacity: .82; pointer-events: none; }
.fl-pill { position: fixed; left: 50%; bottom: 34px; transform: translateX(-50%); z-index: 50; display: flex; align-items: center; gap: 8px;
  padding: 7px 14px; border-radius: 20px; background: rgba(10,12,16,.82); color: #eef0f3; font: 600 13px/1 system-ui, sans-serif;
  box-shadow: 0 6px 18px rgba(0,0,0,.35); pointer-events: none; animation: fadeIn .2s ease both; }
.fl-pill 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); }
.camui { position: fixed; inset: 0; z-index: 50; pointer-events: none; font-family: 'Manrope', 'Segoe UI', sans-serif; color: #fff; text-shadow: 0 1px 3px rgba(0,0,0,.45); }
.camui kbd { background: rgba(255,255,255,.18); color: #fff; margin: 0 2px; text-shadow: none; }
/* Rutenett (tredjedeler) */
.cu-grid { position: absolute; inset: 0; opacity: 0; transition: opacity .25s; }
.camui.grid-on .cu-grid { opacity: 1; }
.cu-grid i { position: absolute; background: rgba(255,255,255,.28); }
.cu-grid i:nth-child(1), .cu-grid i:nth-child(2) { top: 0; bottom: 0; width: 1px; }
.cu-grid i:nth-child(1) { left: 33.33%; } .cu-grid i:nth-child(2) { left: 66.66%; }
.cu-grid i:nth-child(3), .cu-grid i:nth-child(4) { left: 0; right: 0; height: 1px; }
.cu-grid i:nth-child(3) { top: 33.33%; } .cu-grid i:nth-child(4) { top: 66.66%; }
/* Fokusramme */
.cu-focus { position: absolute; left: 50%; top: 50%; width: 92px; height: 92px; margin: -46px 0 0 -46px; }
.cu-focus i { position: absolute; width: 18px; height: 18px; border: 0 solid #ffb200; }
.cu-focus i:nth-child(1) { left: 0; top: 0; border-left-width: 2px; border-top-width: 2px; }
.cu-focus i:nth-child(2) { right: 0; top: 0; border-right-width: 2px; border-top-width: 2px; }
.cu-focus i:nth-child(3) { left: 0; bottom: 0; border-left-width: 2px; border-bottom-width: 2px; }
.cu-focus i:nth-child(4) { right: 0; bottom: 0; border-right-width: 2px; border-bottom-width: 2px; }
.cu-focus.lock { animation: cuLock .35s ease-out; }
@keyframes cuLock { from { transform: scale(1.18); opacity: .6; } to { transform: none; opacity: 1; } }
.cu-fd { position: absolute; left: 50%; top: 100%; transform: translateX(-50%); margin-top: 6px; font-size: 12px; font-weight: 800; color: #ffb200; white-space: nowrap; }
.camui.m-selfie .cu-focus, .camui.selfie .cu-focus { display: none; }
/* Vater */
.cu-level { position: absolute; left: 50%; top: 50%; width: 220px; height: 2px; transform: translate(-50%, 0); transition: transform .12s linear; }
.cu-level span { position: absolute; inset: 0; background: rgba(255,255,255,.45); border-radius: 1px; }
.cu-level.flat span { background: #ffb200; }
.camui:not(.grid-on) .cu-level { display: none; }
/* Toppen */
.cu-top { position: absolute; top: 3vh; left: 4vw; right: 4vw; display: flex; align-items: center; justify-content: space-between; }
.cu-right { display: flex; gap: 8px; }
.cu-pill { display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px; border-radius: 18px; background: rgba(0,0,0,.5); font-size: 12.5px; font-weight: 800; position: relative; }
.cu-pill[data-k]::after { content: attr(data-k); margin-left: 4px; padding: 1px 6px; border-radius: 5px; background: rgba(255,255,255,.18); font-size: 10.5px; }
.cu-pill.on { background: rgba(255,178,0,.92); color: #151518; text-shadow: none; }
.cu-pill.off { opacity: .55; }
.cu-tag { font-family: 'Sora', sans-serif; letter-spacing: 1.5px; text-transform: uppercase; color: #ffb200; }
/* Meldinger og nedtelling */
.cu-toast { position: absolute; top: 11vh; left: 50%; transform: translate(-50%, -10px); padding: 9px 16px; border-radius: 18px; background: rgba(0,0,0,.65); font-size: 13px; font-weight: 700; opacity: 0; transition: opacity .25s, transform .3s; }
.cu-toast.show { opacity: 1; transform: translate(-50%, 0); }
.cu-toast.bad { color: #ff8a8a; }
.cu-count { position: absolute; left: 50%; top: 42%; transform: translate(-50%, -50%); font: 700 120px/1 'Sora', sans-serif; color: #fff; text-shadow: 0 4px 30px rgba(0,0,0,.5); }
.cu-count.tick { animation: cuTick 1s ease-out; }
@keyframes cuTick { from { transform: translate(-50%, -50%) scale(1.4); opacity: 0; } 20% { opacity: 1; } to { transform: translate(-50%, -50%) scale(.9); opacity: .2; } }
/* Bunnen */
.cu-bottom { position: absolute; left: 0; right: 0; bottom: 2.5vh; display: flex; flex-direction: column; align-items: center; gap: 12px; }
.cu-variant { display: flex; gap: 10px; min-height: 30px; }
.cu-variant span { padding: 6px 12px; border-radius: 15px; background: rgba(0,0,0,.5); font-size: 12.5px; }
.cu-variant b { color: #ffb200; }
.cu-lenses { display: flex; gap: 6px; padding: 5px; border-radius: 22px; background: rgba(0,0,0,.4); min-height: 10px; }
.cu-lenses:empty { display: none; }
.cu-lenses span { min-width: 34px; height: 34px; padding: 0 6px; border-radius: 17px; display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 800; background: rgba(255,255,255,.12); }
.cu-lenses span.on { background: rgba(0,0,0,.6); color: #ffb200; min-width: 42px; height: 42px; border-radius: 21px; font-size: 13px; }
.cu-modes { display: flex; gap: 22px; font-size: 13px; font-weight: 800; letter-spacing: 1px; text-transform: uppercase; }
.cu-modes span { opacity: .6; transition: opacity .2s, color .2s; }
.cu-modes span.on { opacity: 1; color: #ffb200; }
.cu-row { display: flex; align-items: center; gap: 54px; }
.cu-thumb { width: 56px; height: 56px; border-radius: 14px; background: rgba(255,255,255,.12) center / cover no-repeat; box-shadow: 0 0 0 2px rgba(255,255,255,.75); }
.cu-thumb.pop { animation: cuPop .45s cubic-bezier(.34,1.5,.55,1); }
@keyframes cuPop { from { transform: scale(.4); } to { transform: none; } }
.cu-shutter { width: 80px; height: 80px; border-radius: 40px; box-shadow: inset 0 0 0 4px #fff, 0 4px 20px rgba(0,0,0,.35); display: flex; align-items: center; justify-content: center; }
.cu-shutter span { width: 64px; height: 64px; border-radius: 32px; background: #fff; transition: transform .15s, background .2s; }
.camui.m-night .cu-shutter span { background: #ffd770; }
.camui.m-portrait .cu-shutter span { background: #ffb200; }
.cu-flip { width: 56px; height: 56px; border-radius: 28px; background: rgba(0,0,0,.45); display: flex; align-items: center; justify-content: center; position: relative; }
.cu-flip b { position: absolute; right: -2px; bottom: -2px; font-size: 10px; padding: 1px 5px; border-radius: 5px; background: rgba(255,255,255,.2); text-shadow: none; }
.cu-keys { display: flex; gap: 16px; font-size: 11.5px; font-weight: 700; opacity: .85; }
.cu-flash { position: absolute; inset: 0; background: #fff; opacity: 0; }
.cu-flash.go { animation: cuFlash .35s ease-out; }
@keyframes cuFlash { from { opacity: .85; } to { opacity: 0; } }

.gal-seg { margin: 0 16px 12px; display: inline-flex; }
.gal-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 3px; padding: 0 3px; }
.ufold:not(.folded) .gal-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.gal-t { position: relative; aspect-ratio: 1; border: 0; padding: 0; background: var(--surf); cursor: pointer; overflow: hidden; border-radius: 4px; }
.gal-t img { width: 100%; height: 100%; object-fit: cover; display: block; }
.gal-fav { position: absolute; left: 6px; bottom: 6px; color: #fff; display: flex; filter: drop-shadow(0 1px 2px rgba(0,0,0,.6)); }
.gal-fav svg { fill: currentColor; }
.pview { position: absolute; inset: 0; z-index: 10; background: #000; display: flex; align-items: center; justify-content: center; animation: fadeIn .2s ease both; }
.pview > img { max-width: 100%; max-height: 100%; object-fit: contain; }
.pv-top { position: absolute; top: 56px; left: 14px; right: 14px; display: flex; align-items: center; justify-content: space-between; color: #fff; font-size: 13px; font-weight: 700; }
.pv-top .ib { background: rgba(255,255,255,.15); color: #fff; }
.pv-bar { position: absolute; left: 14px; right: 14px; bottom: 30px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; padding: 10px; border-radius: 28px; background: rgba(20,20,24,.92); }
.pv-b { border: 0; background: none; color: #fff; display: flex; flex-direction: column; align-items: center; gap: 4px; font-size: 11px; font-weight: 700; cursor: pointer; padding: 6px 0; }
.pv-b i { display: flex; }
.pv-b.on { color: #ffb200; }
.pv-b.on svg { fill: currentColor; }
.pv-b.red { color: #ff6b6b; }
.pv-pick { position: absolute; left: 0; right: 0; bottom: 0; max-height: 72%; z-index: 12; background: var(--bg); color: var(--tx); border-radius: 30px 30px 0 0; overflow-y: auto; padding-bottom: 30px; animation: suIn .3s ease both; box-shadow: 0 -10px 40px rgba(0,0,0,.4); }
.pv-pick::-webkit-scrollbar { display: none; }
.pv-pick-h { position: sticky; top: 0; z-index: 1; display: flex; align-items: center; justify-content: space-between; padding: 16px 18px 10px; background: var(--bg); font-size: 16px; }
.thread .pv-pick { z-index: 5; }
.bubble.img { padding: 3px; border: 0; cursor: pointer; overflow: hidden; background: var(--surf3) !important; }
.bubble.img img { display: block; width: 220px; max-height: 260px; object-fit: cover; border-radius: 19px; }

.pv-info { flex: 1; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 1px; text-shadow: 0 1px 3px rgba(0,0,0,.6); }
.pv-info b { font-size: 13px; }
.pv-info span { font-size: 11.5px; opacity: .8; font-weight: 600; }

/* Galleri: delt visning paa U-Fold, stripe paa smale skjermer */
.gal-wrap { display: block; }
.appbody.gal-split { overflow: hidden; display: flex; flex-direction: column; padding-bottom: 0; }
.gal-split .apphead, .gal-split .gal-seg { flex: none; }
.gal-split .gal-seg { align-self: flex-start; }
.gal-split .gal-wrap { flex: 1; min-height: 0; display: flex; gap: 16px; padding: 0 20px 34px; }
.gal-split .gal-left { width: 42%; flex: none; overflow-y: auto; border-radius: 14px; }
.gal-split .gal-left::-webkit-scrollbar { display: none; }
.ufold:not(.folded) .gal-split .gal-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); padding: 0; }
.gal-t.sel { outline: 3px solid var(--acc); outline-offset: -3px; }
.gal-t.sel img { opacity: .85; }
.gal-right { flex: 1; min-width: 0; position: relative; display: flex; flex-direction: column; gap: 10px; }
.gr-stage { flex: 1; min-height: 0; position: relative; border-radius: 22px; background: #000; overflow: hidden; display: flex; align-items: center; justify-content: center; }
.gr-stage img { max-width: 100%; max-height: 100%; object-fit: contain; animation: fadeIn .2s ease both; }
.gr-nav { position: absolute; top: 50%; margin-top: -21px; width: 42px; height: 42px; border-radius: 21px; border: 0; background: rgba(0,0,0,.5); color: #fff; display: flex; align-items: center; justify-content: center; cursor: pointer; }
.gr-nav.prev { left: 12px; }
.gr-nav.next { right: 12px; }
.gr-nav.next svg { transform: rotate(180deg); }
.gr-info { flex: none; align-items: flex-start; text-align: left; color: var(--tx); text-shadow: none; padding: 0 6px; }
.gr-info span { color: var(--tx2); }
.gr-bar { position: static; flex: none; background: var(--surf); left: auto; right: auto; bottom: auto; }
.gr-bar .pv-b { color: var(--tx); }
.gr-bar .pv-b.on { color: var(--acc-ink); }
.gr-bar .pv-b.red { color: #ff6b6b; }
.gal-empty { flex: 1; display: flex; align-items: center; justify-content: center; border-radius: 22px; background: var(--surf); color: var(--tx3); }
.gal-right .pv-pick { border-radius: 22px; }
.pv-infoh { flex: 1; display: flex; justify-content: center; }
.pv-strip { position: absolute; left: 0; right: 0; bottom: 104px; display: flex; gap: 6px; justify-content: center; padding: 4px 14px; overflow: hidden; }
.pv-s { width: 42px; height: 42px; flex: none; border-radius: 10px; overflow: hidden; border: 0; padding: 0; cursor: pointer; opacity: .55; background: #222; transition: opacity .15s, transform .15s; }
.pv-s img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pv-s.on { opacity: 1; outline: 2px solid #ffb200; outline-offset: -2px; transform: scale(1.08); }
.pv-zone { position: absolute; top: 110px; bottom: 170px; width: 30%; border: 0; background: none; cursor: pointer; }
.pv-zone.l { left: 0; }
.pv-zone.r { right: 0; }

/* Galleri v2: bedre plassering paa Fold, oppe/nede paa Flip */
.gal-split .gal-wrap { align-items: stretch; }
.gal-split .gal-right { justify-content: flex-start; gap: 12px; }
.gal-split .gr-stage { flex: none; display: block; line-height: 0; background: var(--surf); border-radius: 20px; }
.gal-split .gr-stage img { width: 100%; height: auto; max-height: 440px; object-fit: contain; background: #000; display: block; }
.gal-split .gr-info { padding: 0 4px; gap: 3px; }
.gal-split .gr-info b { font-size: 16px; }
.gal-split .gr-info span { font-size: 13px; }
.gal-split .gr-bar { border-radius: 22px; }
.gal-split-h .gal-wrap { gap: 20px; padding: 0 24px 30px; }
.gal-split-h .gal-left { width: 46%; }
.gal-split-h .gal-seg { margin-left: 24px; }
.gal-split-h .apphead { padding-left: 24px; padding-right: 24px; }
.gal-split-h .gr-stage img { max-height: 470px; }
/* Flip: rutenett i oevre halvdel, valgt bilde i nedre */
.gal-split-v .apphead { padding-top: 58px; padding-bottom: 10px; }
.gal-split-v .apphead h1 { font-size: 30px; }
.gal-split-v .gal-seg { margin-bottom: 10px; }
.gal-split-v .gal-wrap { flex-direction: column; gap: 0; padding: 0; position: static; }
.gal-split-v .gal-left { position: absolute; left: 16px; right: 16px; top: 168px; bottom: calc(50% + 10px); width: auto; }
.uflip:not(.folded) .gal-split-v .gal-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); padding: 0; }
.gal-split-v .gal-right { position: absolute; left: 16px; right: 16px; top: calc(50% + 8px); bottom: 30px; gap: 8px; }
.gal-split-v .gr-stage img { max-height: 210px; }
.gal-split-v .gr-info b { font-size: 14px; }
.gal-split-v .gr-bar { padding: 6px; }

/* U-Fold: storvisning av bilde */
.gr-stage.zoomable img { cursor: zoom-in; }
.fz { position: absolute; inset: 0; z-index: 79; background: rgba(0,0,0,0); transition: background .35s ease; }
.fz.show { background: #000; }
.fz-img { position: absolute; cursor: zoom-out; border-radius: 6px; transition: transform .38s cubic-bezier(.2,.9,.25,1); }
.fz-top, .fz-bar, .fz-x, .fz-nav { opacity: 0; transition: opacity .3s ease; }
.fz.show .fz-top, .fz.show .fz-bar, .fz.show .fz-x, .fz.show .fz-nav { opacity: 1; }
.fz.show.idle .fz-top, .fz.show.idle .fz-bar, .fz.show.idle .fz-x, .fz.show.idle .fz-nav { opacity: 0; }
.fz.idle { cursor: none; }
.fz-top { position: absolute; top: 22px; left: 50%; transform: translateX(-50%); padding: 8px 18px; border-radius: 18px; background: rgba(0,0,0,.55); color: #fff; }
.fz-top .pv-info b { font-size: 15px; }
.fz-x { position: absolute; top: 18px; right: 18px; background: rgba(0,0,0,.55); color: #fff; }
.fz-bar { position: absolute; left: 50%; right: auto; bottom: 26px; width: 440px; margin-left: -220px; background: rgba(20,20,24,.82); }
.fz-nav { z-index: 1; }

/* =====================================================================
   FASE 4: Notater, Klokke, Mail
   ===================================================================== */
.ib.pin.on { color: var(--acc-ink); }
.ib.pin.on svg { fill: currentColor; }
.note-card { margin: 0 16px 12px; background: var(--surf); border-radius: 22px; overflow: hidden; }
.note-row { display: block; width: 100%; text-align: left; padding: 13px 18px; border: 0; background: none; cursor: pointer; color: var(--tx); }
.note-row + .note-row { box-shadow: 0 -1px 0 var(--line); }
.note-row:active { background: var(--surf3); }
.nr-title { font-size: 15.5px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nr-sub { font-size: 13px; color: var(--tx2); margin-top: 3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nr-sub b { color: var(--tx); font-weight: 600; margin-right: 4px; }
.note-ed { display: flex; flex-direction: column; padding: 0 22px 30px; min-height: calc(100% - 130px); }
.ne-title { border: 0; background: none; outline: none; color: var(--tx); font: 600 28px/1.2 var(--fd); letter-spacing: -.5px; padding: 0; }
.ne-status { font-size: 12px; color: var(--tx3); min-height: 18px; margin: 6px 0 10px; }
.ne-body { flex: 1; min-height: 420px; border: 0; background: none; outline: none; resize: none; color: var(--tx); font: 500 15.5px/1.6 var(--fb); padding: 0; }
.ufold:not(.folded) .note-ed, .ufold:not(.folded) .notes-list { max-width: 680px; margin: 0 auto; width: 100%; }

.clk-now { padding: 0 22px 12px; font-size: 14px; color: var(--tx2); font-weight: 600; }
.alarm-row { gap: 10px; }
.alarm-l { flex: 1; min-width: 0; border: 0; background: none; text-align: left; padding: 0; cursor: pointer; color: var(--tx); }
.al-time { font: 500 40px/1.05 var(--fd); letter-spacing: -1px; }
.alarm-row.off .al-time, .alarm-row.off .v { opacity: .45; }
.clk-timer { display: flex; flex-direction: column; align-items: center; gap: 22px; padding: 30px 20px; }
.clk-big { font: 300 72px/1 var(--fd); letter-spacing: -2px; }
.clk-big.mono, .mono { font-variant-numeric: tabular-nums; }
.clk-btns { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; width: 100%; max-width: 340px; }
.clk-presets { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; width: 100%; max-width: 340px; }
.clk-presets button { height: 64px; border-radius: 22px; border: 0; background: var(--surf); color: var(--tx); font: 600 16px var(--fd); cursor: pointer; }
.clk-presets button:active { background: var(--surf3); }
.clk-custom { display: flex; align-items: center; gap: 8px; width: 100%; max-width: 340px; }
.clk-custom input { width: 80px; height: 50px; border-radius: 16px; border: 1px solid var(--line); background: var(--surf); color: var(--tx); text-align: center; font: 600 18px var(--fd); outline: none; }
.clk-custom span { font: 600 20px var(--fd); }
.clk-custom .btn { flex: 1; }
.clk-laps { width: 100%; max-width: 340px; }
.clk-laps .rowi { min-height: 44px; padding: 8px 4px; }
.al-pick { display: flex; align-items: center; justify-content: center; gap: 8px; margin: 10px 0 12px; }
.al-pick select { height: 76px; width: 110px; border-radius: 22px; border: 1px solid var(--line); background: var(--surf); color: var(--tx); font: 500 44px var(--fd); text-align: center; text-align-last: center; outline: none; appearance: none; -webkit-appearance: none; cursor: pointer; }
.al-pick span { font: 500 44px var(--fd); }
.day-chips { display: flex; gap: 6px; }
.day-chips button { flex: 1; height: 42px; border-radius: 21px; border: 0; background: var(--surf); color: var(--tx2); font-weight: 800; font-size: 12.5px; cursor: pointer; }
.day-chips button.on { background: var(--acc); color: var(--on-acc); }
.alarm-ed .btn { width: 100%; }
.ring-modal { align-items: center; z-index: 97; }
.ring-ic { width: 70px; height: 70px; border-radius: 35px; background: var(--acc); color: var(--on-acc); display: flex; align-items: center; justify-content: center; margin-bottom: 6px; animation: ringWiggle 1.2s ease-out infinite; }
@keyframes ringWiggle { 0% { box-shadow: 0 0 0 0 var(--acc-a); } 70%, 100% { box-shadow: 0 0 0 16px transparent; } }
.rm .ring-ic { animation: none; }
.ring-time { font: 500 56px/1 var(--fd); letter-spacing: -2px; }

.mail-boxes { display: flex; gap: 8px; padding: 0 16px 10px; overflow-x: auto; }
.mail-boxes::-webkit-scrollbar { display: none; }
.mb-chip { display: flex; align-items: center; gap: 6px; flex: none; height: 36px; padding: 0 14px; border-radius: 18px; border: 0; background: var(--surf); color: var(--tx2); font-size: 13px; font-weight: 700; cursor: pointer; }
.mb-chip.on { background: var(--tx); color: var(--bg); }
.mb-chip b { min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: var(--acc); color: var(--on-acc); font-size: 11px; display: flex; align-items: center; justify-content: center; }
.mail-row { align-items: flex-start; }
.mail-row .ctext { display: flex; flex-direction: column; gap: 2px; }
.mr-top { display: flex; justify-content: space-between; gap: 8px; align-items: baseline; }
.mr-top .cname { font-weight: 600; }
.mail-row.unread .mr-top .cname, .mail-row.unread .mr-subj { font-weight: 800; color: var(--tx); }
.mail-row.unread::before { content: ''; width: 8px; height: 8px; border-radius: 4px; background: var(--acc); flex: none; margin: 18px -6px 0 -2px; }
.mr-subj { font-size: 13.5px; color: var(--tx); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: flex; align-items: center; gap: 5px; }
.mr-subj i { display: flex; color: var(--tx3); }
.mail-view { padding: 0 22px 30px; }
.mail-view h2 { margin: 0 0 16px; font: 600 24px/1.25 var(--fd); letter-spacing: -.4px; }
.mv-head { display: flex; gap: 12px; align-items: flex-start; padding-bottom: 14px; border-bottom: 1px solid var(--line); }
.mv-head .cnum { white-space: normal; }
.mv-body { padding: 16px 0; font-size: 15px; line-height: 1.6; white-space: pre-wrap; word-break: break-word; user-select: text; }
.mv-att { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
.mv-att .gal-t { border-radius: 14px; }
.mail-ta { min-height: 200px; border-radius: 16px; border: 1px solid var(--line); background: var(--surf); color: var(--tx); padding: 12px 16px; font: 500 15px/1.5 var(--fb); outline: none; resize: vertical; }
.mail-ta:focus { border-color: var(--acc); }
.mail-atts { display: flex; gap: 8px; flex-wrap: wrap; }
.ma-chip { position: relative; width: 64px; height: 64px; border-radius: 14px; border: 0; padding: 0; overflow: hidden; cursor: pointer; background: var(--surf); }
.ma-chip img { width: 100%; height: 100%; object-fit: cover; }
.ma-chip span { position: absolute; right: 4px; top: 4px; width: 20px; height: 20px; border-radius: 10px; background: rgba(0,0,0,.6); color: #fff; display: flex; align-items: center; justify-content: center; }
.ma-add { height: 64px; padding: 0 16px; border-radius: 14px; border: 1px dashed var(--tx3); background: none; color: var(--tx2); display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 700; cursor: pointer; }
.ufold:not(.folded) .mail-view, .ufold:not(.folded) .mail-comp { max-width: 680px; margin: 0 auto; }

/* Kart */
.map-top { display: flex; gap: 16px; align-items: center; margin: 0 16px 14px; padding: 16px; border-radius: 26px; background: var(--surf); }
.map-compass { position: relative; width: 104px; height: 104px; flex: none; }
.mc-ring { position: absolute; inset: 0; border-radius: 50%; box-shadow: inset 0 0 0 2px var(--line), inset 0 0 0 14px var(--surf3); transition: transform .5s linear; }
.mc-ring b, .mc-ring i { position: absolute; font: 800 11px var(--fd); font-style: normal; color: var(--tx2); }
.mc-ring b { left: 50%; top: 2px; transform: translateX(-50%); color: #ef4444; }
.mc-ring i:nth-of-type(1) { right: 4px; top: 50%; transform: translateY(-50%); }
.mc-ring i:nth-of-type(2) { left: 50%; bottom: 2px; transform: translateX(-50%); }
.mc-ring i:nth-of-type(3) { left: 4px; top: 50%; transform: translateY(-50%); }
.mc-me { position: absolute; left: 50%; top: 50%; width: 44px; height: 44px; margin: -22px 0 0 -22px; border-radius: 22px; background: var(--acc); color: var(--on-acc); display: flex; align-items: center; justify-content: center; box-shadow: 0 0 0 6px var(--acc-a); }
.map-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.mi-k { font-size: 11px; font-weight: 800; letter-spacing: .6px; text-transform: uppercase; color: var(--acc-ink); }
.map-info b { font: 600 17px/1.25 var(--fd); }
.map-info > span { font-size: 13px; color: var(--tx2); }
.mi-acts { display: flex; gap: 8px; margin-top: 10px; flex-wrap: wrap; }
.map-row { gap: 10px; }
.map-ic { width: 40px; height: 40px; border-radius: 20px; background: var(--surf3); color: var(--acc-ink); display: flex; align-items: center; justify-content: center; flex: none; }
.map-dir { display: flex; flex-direction: column; align-items: center; gap: 2px; min-width: 54px; flex: none; }
.md-arrow { display: flex; width: 26px; height: 26px; border-radius: 13px; align-items: center; justify-content: center; background: var(--acc); color: var(--on-acc); transition: transform .5s linear; }
.md-dist { font-size: 11.5px; font-weight: 800; color: var(--tx2); white-space: nowrap; }
.map-gps, .map-del { width: 36px; height: 36px; }
.map-del { color: #ff6b6b; }
.ufold:not(.folded) .map-top, .ufold:not(.folded) .map-list { max-width: 720px; margin-left: auto; margin-right: auto; }
.mi-acts .btn.sec { background: var(--surf3); }

/* =====================================================================
   FASE 4: Bank (p_banking)
   ===================================================================== */
@keyframes bkFade { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@keyframes bkDraw { to { stroke-dashoffset: 0; } }
@keyframes bkShow { to { opacity: 1; } }
.fadein { animation: bkFade .3s ease both; }
.bk-cashpill { display: flex; justify-content: space-between; align-items: center; margin: 0 22px 14px; padding: 10px 16px; border-radius: 16px; background: var(--surf); font-size: 13px; font-weight: 600; color: var(--tx3); }
.bk-cashpill b { color: var(--tx); font-weight: 700; }

/* Kontokort */
.bk-cards { display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 2px 22px 4px; scroll-padding: 0 22px; }
.bk-cards::-webkit-scrollbar { display: none; }
.bk-card { position: relative; flex: 0 0 calc(100% - 44px); scroll-snap-align: start; height: 196px; border-radius: 26px; padding: 18px 20px; overflow: hidden; display: flex; flex-direction: column; justify-content: space-between; border: 0; text-align: left; color: #fff; cursor: pointer; transition: transform .35s cubic-bezier(.2,.9,.25,1), opacity .35s ease; box-shadow: 0 14px 34px rgba(0,0,0,.28); }
.bk-card::after { content: ''; position: absolute; right: -70px; bottom: -96px; width: 250px; height: 250px; border-radius: 50%; border: 34px solid rgba(255,255,255,.07); pointer-events: none; }
.bk-card::before { content: ''; position: absolute; right: 40px; top: -120px; width: 220px; height: 220px; border-radius: 50%; background: radial-gradient(closest-side, rgba(255,255,255,.22), transparent); pointer-events: none; }
.bk-card.t-personal { background: linear-gradient(145deg, #3fbf66, #14743a 70%, #0f5c2d); }
.bk-card.t-shared { background: linear-gradient(145deg, #2a6b43, #123822 75%); }
.bk-card.t-society { background: linear-gradient(145deg, #262a27, #0b0d0c 75%); }
.bk-card.t-society::after { border-color: rgba(47,184,94,.16); }
.bk-card.t-society .fl-mark { background: #1f9a48; }
.bk-card.dim { transform: scale(.94); opacity: .55; }
.bk-card.hero { margin: 4px 16px 0; flex: none; cursor: default; }
.bk-card.sk { margin: 4px 22px; background: var(--surf3); box-shadow: none; animation: skPulse 1.1s ease-in-out infinite alternate; }
.bk-card > * { position: relative; z-index: 1; }
.bkc-top { display: flex; justify-content: space-between; align-items: flex-start; }
.bkc-brand b { display: block; font: 800 14px var(--fd); letter-spacing: .3px; }
.bkc-brand span { display: block; font-size: 11.5px; font-weight: 600; opacity: .75; margin-top: 2px; }
.bkc-chip svg { display: block; width: 34px; height: 26px; fill: rgba(255,255,255,.28); stroke: rgba(0,0,0,.22); stroke-width: 1; }
.bkc-bal { display: flex; align-items: baseline; gap: 6px; }
.bkc-bal span { font: 600 34px/1 var(--fd); letter-spacing: -1px; font-variant-numeric: tabular-nums; }
.bkc-bal small { font: 700 14px var(--fd); opacity: .7; }
.bkc-bot { display: flex; justify-content: space-between; gap: 10px; font-size: 12.5px; font-weight: 700; opacity: .85; }
.bkc-bot span:first-child { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bk-dots { display: flex; justify-content: center; gap: 6px; margin: 12px 0 2px; }
.bk-dots i { width: 6px; height: 6px; border-radius: 3px; background: var(--surf3); transition: width .25s ease, background-color .25s ease; }
.bk-dots i.on { width: 18px; background: var(--acc); }

/* Snarveier */
.bk-qas { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin: 14px 16px 4px; }
.bk-qas.two { grid-template-columns: repeat(2, 1fr); }
.bk-qa { display: flex; flex-direction: column; align-items: center; gap: 7px; padding: 12px 6px; border: 0; border-radius: 20px; background: var(--surf); color: var(--tx); font: 700 12.5px var(--fb); cursor: pointer; transition: transform .14s ease, opacity .2s ease; }
.bk-qa:active { transform: scale(.95); }
.bk-qa i { width: 42px; height: 42px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: var(--surf3); color: var(--tx); }
.bk-qa:first-child i { background: var(--acc); color: var(--on-acc); }
.bk-qa.off { opacity: .45; }

/* Lister */
.bk-row { display: flex; align-items: center; gap: 12px; width: 100%; padding: 12px 16px; border: 0; background: none; text-align: left; color: var(--tx); cursor: pointer; }
.bk-row.tx { cursor: default; }
.bk-row + .bk-row { box-shadow: 0 -1px 0 var(--line); }
.bk-row.on { background: var(--surf3); }
button.bk-row:active { background: var(--surf3); }
.bk-ic { width: 38px; height: 38px; border-radius: 12px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; background: var(--surf3); color: var(--tx2); }
.bk-ic.t-personal, .bk-ic.in { color: var(--acc-ink); }
.bk-tx { flex: 1; min-width: 0; }
.bk-name { font-size: 15px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bk-sub { font-size: 12.5px; color: var(--tx3); margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bk-amt { font-size: 14.5px; font-weight: 700; white-space: nowrap; font-variant-numeric: tabular-nums; }
.bk-amt.in { color: var(--acc-ink); }
.bk-foot { padding: 6px 26px 30px; font-size: 12px; color: var(--tx3); text-align: center; }

/* Saldograf */
.bk-graph { margin: 14px 16px 4px; padding: 14px 16px 12px; border-radius: 22px; background: var(--surf); color: var(--acc-ink); }
.bk-graph:empty { display: none; }
.bkg-head { display: flex; justify-content: space-between; font-size: 12.5px; font-weight: 700; color: var(--tx3); }
.bkg-head b { color: var(--tx); }
.bkg-head b.up { color: var(--acc-ink); }
.bk-graph svg { display: block; width: 100%; height: 96px; margin-top: 10px; overflow: visible; }
.bkg-line { fill: none; stroke: currentColor; stroke-width: 2.5; stroke-linejoin: round; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 1; animation: bkDraw .9s .12s cubic-bezier(.4,0,.2,1) forwards; }
.bkg-area { opacity: 0; animation: bkShow .6s .45s ease forwards; }
.bk-graph circle { fill: currentColor; stroke: var(--surf); stroke-width: 3; opacity: 0; animation: bkShow .25s .95s ease forwards; }

/* Overfoering: hvem */
.search.big { height: 52px; border-radius: 18px; }
.bk-found { padding: 0 8px; }
.bk-found .bk-who { padding: 4px 14px 10px; }
.bk-found .skel { padding: 0 8px; }
.bk-hit { background: var(--surf); margin-bottom: 6px; }
.bk-go { display: flex; color: var(--tx3); transform: rotate(180deg); }
.crow.busy { opacity: .5; }
.bk-who { min-height: 17px; font-size: 12.5px; font-weight: 600; color: var(--tx3); }
.bk-who.bad { color: #ff6b6b; }

/* Overfoering: beloep */
.bk-amtpage .apphead { padding-bottom: 0; }
.bk-towho { display: flex; flex-direction: column; align-items: center; gap: 3px; margin-top: -30px; }
.bk-towho .av { margin-bottom: 6px; }
.bk-tn { font: 700 17px var(--fd); }
.bk-ts { font-size: 12.5px; color: var(--tx3); }
.bk-disp { display: flex; justify-content: center; align-items: baseline; gap: 8px; margin: 18px 0 2px; }
.bk-disp span { font: 600 60px/1 var(--fd); letter-spacing: -2px; font-variant-numeric: tabular-nums; transition: color .2s ease; }
.bk-disp small { font: 600 18px var(--fd); color: var(--tx3); }
.bk-disp.long span { font-size: 46px; }
.bk-disp.small span { font-size: 42px; }
.bk-disp.bad span { color: #ff6b6b; }
.bk-disp.bump span { animation: bkBump .16s ease; }
@keyframes bkBump { 50% { transform: scale(1.05); } }
.bk-warn { text-align: center; min-height: 18px; color: #ff6b6b; font-size: 13px; font-weight: 700; }
.bk-from { display: flex; align-items: center; gap: 8px; margin: 8px 16px 0; width: calc(100% - 32px); padding: 12px 16px; border-radius: 16px; border: 0; background: var(--surf); color: var(--tx); font: 600 13.5px var(--fb); cursor: pointer; }
.bk-from > span:first-child { color: var(--tx3); }
.bk-from b { flex: 1; text-align: left; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bk-from .mono { color: var(--tx2); }
.bk-from i { display: flex; color: var(--tx3); }
.bk-msg { display: block; margin: 8px 16px 0; width: calc(100% - 32px); height: 42px; border-radius: 14px; border: 1px dashed var(--line); background: none; color: var(--tx); padding: 0 14px; font: 500 14px var(--fb); outline: none; text-align: center; }
.bk-msg:focus { border: 1px solid var(--acc); }
.numpad { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 12px 16px 10px; }
.numkey { height: 52px; border: 0; border-radius: 18px; background: var(--surf); color: var(--tx); font: 500 24px var(--fd); cursor: pointer; display: flex; align-items: center; justify-content: center; }
.numkey.fn { background: none; }
.numkey:active { background: var(--surf3); transform: scale(.94); }
.btn.bk-next { display: block; margin: 0 16px 26px; width: calc(100% - 32px); }

/* Overfoering: bekreft */
.bk-sum { margin: 0 16px; padding: 24px 18px 6px; border-radius: 26px; background: var(--surf); display: flex; flex-direction: column; align-items: center; gap: 4px; }
.bk-sum .bk-disp { margin: 10px 0 0; }
.bk-sumrows { width: 100%; margin-top: 16px; }
.bk-sumrows > div { display: flex; justify-content: space-between; gap: 12px; padding: 12px 2px; font-size: 13.5px; box-shadow: 0 -1px 0 var(--line); }
.bk-sumrows span { color: var(--tx3); }
.bk-sumrows b { font-weight: 700; text-align: right; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bk-slide { --p: 0; position: relative; margin: 22px 16px 4px; height: 66px; border-radius: 33px; background: var(--surf); overflow: hidden; user-select: none; }
.bk-slide::before { content: ''; position: absolute; inset: 0; background: var(--acc); opacity: .22; transform-origin: 0 50%; transform: scaleX(var(--p)); }
.bks-l { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; padding-left: 50px; font: 700 15px var(--fb); color: var(--tx2); opacity: calc(1 - var(--p) * 1.8); }
.bks-k { position: absolute; left: 6px; top: 6px; width: 54px; height: 54px; border-radius: 50%; background: var(--acc); color: var(--on-acc); display: flex; align-items: center; justify-content: center; cursor: grab; touch-action: none; box-shadow: 0 4px 14px rgba(0,0,0,.3); }
.sending .bks-k svg { opacity: 0; }
.sending .bks-k::after { content: ''; position: absolute; width: 26px; height: 26px; background: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18'%3E%3Ccircle cx='9' cy='9' r='7' fill='none' stroke='%23000' stroke-opacity='.25' stroke-width='2.5'/%3E%3Cpath d='M9 2a7 7 0 0 1 7 7' fill='none' stroke='%23000' stroke-width='2.5' stroke-linecap='round'%3E%3CanimateTransform attributeName='transform' type='rotate' from='0 9 9' to='360 9 9' dur='.7s' repeatCount='indefinite'/%3E%3C/path%3E%3C/svg%3E") center / contain no-repeat; }
@keyframes bkSpin { to { transform: rotate(360deg); } }

/* Sendt */
.bk-okring { width: 112px; height: 112px; margin-top: 46px; }
.bk-okring circle { fill: none; stroke: var(--acc); stroke-width: 5; stroke-dasharray: 1; stroke-dashoffset: 1; transform: rotate(-90deg); transform-origin: 50% 50%; animation: bkDraw .6s cubic-bezier(.6,0,.3,1) forwards; }
.bk-okring path { fill: none; stroke: var(--acc-ink); stroke-width: 7; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 1; animation: bkDraw .35s .5s ease-out forwards; }
.bk-done h1 { animation: bkFade .4s .55s both; }
.bk-done .bk-disp, .bk-done p { animation: bkFade .4s .65s both; }
.bk-done .bk-disp { margin: 0; }

.ufold:not(.folded) .bank .bk-cards { padding: 2px calc(50% - 300px) 4px; scroll-padding: 0 calc(50% - 300px); }
.ufold:not(.folded) .bank .bk-card:not(.hero) { flex-basis: 600px; }
.ufold:not(.folded) .bank > :not(.apphead):not(.mini-bar):not(.bk-cards):not(.bk-dots) { max-width: 640px; margin-left: auto; margin-right: auto; width: calc(100% - 32px); }

/* =====================================================================
   Bevegelse: sider som glir, liten tittel, skisser, trykk
   Kun transform/opacity (billig i CEF). Av med «Reduser bevegelse».
   ===================================================================== */
.appbody, .thread { background: var(--bg); }
.nav-in-fwd  { z-index: 2; animation: navInF .4s cubic-bezier(.22,.9,.25,1) both; box-shadow: -18px 0 40px rgba(0,0,0,.35); }
.nav-out-fwd { z-index: 1; animation: navOutF .4s cubic-bezier(.22,.9,.25,1) both; pointer-events: none; }
.nav-in-back  { z-index: 1; animation: navInB .4s cubic-bezier(.22,.9,.25,1) both; }
.nav-out-back { z-index: 2; animation: navOutB .4s cubic-bezier(.22,.9,.25,1) both; pointer-events: none; box-shadow: -18px 0 40px rgba(0,0,0,.35); }
.nav-in-fade  { z-index: 2; animation: navFadeIn .26s ease both; }
.nav-out-fade { z-index: 1; animation: navFadeOut .26s ease both; pointer-events: none; }
@keyframes navInF  { from { transform: translate3d(100%,0,0); } to { transform: none; } }
@keyframes navOutF { to { transform: translate3d(-26%,0,0); opacity: .35; } }
@keyframes navInB  { from { transform: translate3d(-26%,0,0); opacity: .35; } to { transform: none; opacity: 1; } }
@keyframes navOutB { to { transform: translate3d(100%,0,0); } }
@keyframes navFadeIn  { from { opacity: 0; } to { opacity: 1; } }
@keyframes navFadeOut { to { opacity: 0; } }

/* Liten tittel naar man har scrollet */
.mini-bar { position: sticky; top: 0; height: 0; z-index: 4; pointer-events: none; }
.mini-bar > * { position: absolute; top: 52px; opacity: 0; transform: translateY(-6px); transition: opacity .2s ease, transform .2s ease; }
.mini-bar::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 96px; background: var(--bg); box-shadow: 0 1px 0 var(--line); opacity: 0; transition: opacity .2s ease; }
.mini-t { left: 60px; right: 60px; height: 40px; line-height: 40px; text-align: center; font: 700 16px var(--fd); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--tx); }
.mini-back { left: 12px; width: 40px; height: 40px; border: 0; border-radius: 50%; background: var(--surf); color: var(--tx); display: flex; align-items: center; justify-content: center; cursor: pointer; }
.scrolled > .mini-bar { pointer-events: auto; }
.scrolled > .mini-bar::before, .scrolled > .mini-bar > * { opacity: 1; transform: none; }
.usung .mini-bar > *, .uflip .mini-bar > *, .ufold .mini-bar > * { top: 50px; }
.uflip .mini-bar::before, .usung .mini-bar::before, .ufold .mini-bar::before { height: 94px; }

/* Skisser mens noe lastes */
.skel { padding: 4px 16px; }
.sk-row { display: flex; align-items: center; gap: 12px; padding: 12px 4px; }
.sk-dot { width: 40px; height: 40px; border-radius: 12px; background: var(--surf3); flex-shrink: 0; }
.sk-lines { flex: 1; display: flex; flex-direction: column; gap: 8px; }
.sk-lines b { display: block; height: 11px; border-radius: 6px; background: var(--surf3); width: 70%; }
.sk-lines b.short { width: 40%; opacity: .7; }
.skel { animation: skPulse 1.1s ease-in-out infinite alternate; }
@keyframes skPulse { from { opacity: .55; } to { opacity: 1; } }

/* Trykk-respons */
.crow, .note-row, .bk-row, .ib, .tab, .clk-presets button, .numkey, .bk-qa { transition: transform .14s ease, background-color .15s ease; }
.crow:active, .note-row:active, button.bk-row:active, .clk-presets button:active { transform: scale(.98); }
.ib:active, .tab:active { transform: scale(.92); }
.btn:active { transform: scale(.97); }

/* =====================================================================
   Meldinger: grupperte bobler med hale, skiller, send-animasjon
   ===================================================================== */
.th-list { gap: 2px; }
.msg.ge { margin-bottom: 8px; }
.msg:not(.ge) .mtime { display: none; }
.msg:not(.gs) .msender { display: none; }
.msg .bubble { border-radius: 20px; }
.msg.out:not(.gs) .bubble { border-top-right-radius: 7px; }
.msg.out:not(.ge) .bubble { border-bottom-right-radius: 7px; }
.msg.in:not(.gs) .bubble { border-top-left-radius: 7px; }
.msg.in:not(.ge) .bubble { border-bottom-left-radius: 7px; }
.msg.out.ge .bubble.t, .msg.in.ge .bubble.t { position: relative; }
.msg.out.ge .bubble.t::before { content: ''; position: absolute; bottom: 0; right: -7px; width: 20px; height: 18px; background: var(--acc); border-bottom-left-radius: 15px 13px; }
.msg.out.ge .bubble.t::after  { content: ''; position: absolute; bottom: 0; right: -11px; width: 11px; height: 19px; background: var(--bg); border-bottom-left-radius: 10px; }
.msg.in.ge .bubble.t::before  { content: ''; position: absolute; bottom: 0; left: -7px; width: 20px; height: 18px; background: var(--surf3); border-bottom-right-radius: 15px 13px; }
.msg.in.ge .bubble.t::after   { content: ''; position: absolute; bottom: 0; left: -11px; width: 11px; height: 19px; background: var(--bg); border-bottom-right-radius: 10px; }
.msg.out .mtime { margin-right: 10px; }
.msg.in .mtime { margin-left: 10px; }
.mday { align-self: center; font-size: 11.5px; font-weight: 700; color: var(--tx3); margin: 12px 0 8px; letter-spacing: .2px; }
.msg.new.out { animation: msgOut .34s cubic-bezier(.2,1.2,.4,1) both; transform-origin: 100% 100%; }
.msg.new.in  { animation: msgIn .34s cubic-bezier(.2,1.2,.4,1) both; transform-origin: 0 100%; }
@keyframes msgOut { from { opacity: 0; transform: translate3d(0,18px,0) scale(.9); } to { opacity: 1; transform: none; } }
@keyframes msgIn  { from { opacity: 0; transform: translate3d(0,10px,0) scale(.92); } to { opacity: 1; transform: none; } }
.th-comp .ib.acc { transition: transform .22s cubic-bezier(.2,1.4,.4,1), opacity .2s ease; }
.th-comp:not(.has) .ib.acc { transform: scale(.82); opacity: .45; }
.th-head { background: var(--bg); }

/* =====================================================================
   Klokke: analog urskive, ring på timer og stoppeklokke
   Viserne går med CSS steps() = maks én oppdatering i sekundet.
   ===================================================================== */
.aclock { display: flex; flex-direction: column; align-items: center; gap: 14px; padding: 4px 0 18px; }
.ac-face { position: relative; width: 210px; height: 210px; border-radius: 50%; background: radial-gradient(circle at 50% 35%, var(--surf3), var(--surf) 70%); box-shadow: 0 18px 40px rgba(0,0,0,.3), inset 0 0 0 1px var(--line); }
.ac-face svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.ac-face line { stroke: var(--tx3); stroke-width: 1.4; stroke-linecap: round; }
.ac-face line.b { stroke: var(--tx); stroke-width: 3; }
.ac-face text { fill: var(--tx); font: 600 19px var(--fd); text-anchor: middle; }
.ac-face > i { position: absolute; left: 50%; bottom: 50%; transform-origin: 50% 100%; border-radius: 3px; }
.ac-h { width: 6px; height: 54px; margin-left: -3px; background: var(--tx); }
.ac-m { width: 4px; height: 78px; margin-left: -2px; background: var(--tx); }
.ac-s { width: 2px; height: 90px; margin-left: -1px; background: var(--acc); bottom: calc(50% - 16px) !important; transform-origin: 50% calc(100% - 16px) !important; }
.ac-c { position: absolute; left: 50%; top: 50%; width: 12px; height: 12px; margin: -6px; border-radius: 50%; background: var(--acc); box-shadow: 0 0 0 3px var(--surf); }
@keyframes acTurn { to { transform: rotate(360deg); } }
.ac-dig { text-align: center; }
.ac-time { font: 300 46px/1 var(--fd); letter-spacing: -1px; }
.ac-date { margin-top: 6px; font-size: 14px; font-weight: 600; color: var(--tx3); text-transform: capitalize; }

.clk-ring { position: relative; width: 260px; height: 260px; flex-shrink: 0; }
.clk-ring svg { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); }
.cr-bg { fill: none; stroke: var(--surf); stroke-width: 10; }
.cr-p { fill: none; stroke: var(--acc); stroke-width: 10; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 0; animation-name: crDrain; animation-timing-function: linear; animation-fill-mode: forwards; }
@keyframes crDrain { to { stroke-dashoffset: 1; } }
.cr-in { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; }
.clk-ring .clk-big { font-size: 56px; }
.clk-ring.sw .clk-big { font-size: 44px; }
.clk-ends { font-size: 13px; font-weight: 700; color: var(--tx3); }
.cr-dotw { position: absolute; inset: 0; }   /* snus av JS (ingen transform-animasjon) */
.cr-dot { position: absolute; left: 50%; top: 5px; width: 14px; height: 14px; margin-left: -7px; border-radius: 50%; background: var(--acc); box-shadow: 0 0 12px var(--acc); }

/* Fleeca: bankens egne farger inne i bank-appen (uavhengig av telefonens aksent) */
.fleeca { --acc: #1f9a48; --acc-ink: #3cc46a; --on-acc: #ffffff; }
.theme-light .fleeca { --acc-ink: #178a3e; }
.bkc-brand b { display: flex; align-items: center; gap: 7px; }
.fl-mark { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 7px; background: rgba(255,255,255,.22); color: #fff; }
.fl-mark svg { stroke-width: 2.6; }

/* =====================================================================
   Fase 6: egne apper (vindu), dialoger fra apper, U-Store
   ===================================================================== */
.app-inner.customapp::before { display: none; }
.app-inner.customapp .appframe { background: transparent; }
.ca-load { position: absolute; inset: 0; z-index: 2; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 22px; background: var(--bg); transition: opacity .25s ease; }
.ca-load.done { opacity: 0; pointer-events: none; }
.ca-ic { width: 84px; height: 84px; border-radius: 22px; overflow: hidden; background: var(--surf); box-shadow: 0 14px 34px rgba(0,0,0,.3); }
.ca-ic img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ca-spin { width: 24px; height: 24px; background: var(--acc); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18'%3E%3Ccircle cx='9' cy='9' r='7' fill='none' stroke='%23000' stroke-opacity='.25' stroke-width='2.5'/%3E%3Cpath d='M9 2a7 7 0 0 1 7 7' fill='none' stroke='%23000' stroke-width='2.5' stroke-linecap='round'%3E%3CanimateTransform attributeName='transform' type='rotate' from='0 9 9' to='360 9 9' dur='.7s' repeatCount='indefinite'/%3E%3C/path%3E%3C/svg%3E") center / contain no-repeat; }
.nc-ic.img { overflow: hidden; padding: 0; background: var(--surf3); }
.nc-ic.img img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Dialog / valgark som apper kan vise */
.adlg-wrap { position: absolute; inset: 0; z-index: 14; display: flex; align-items: center; justify-content: center; padding: 28px; background: rgba(0,0,0,.45); animation: navFadeIn .18s ease both; }
/* Dialog paa hjemskjermen (f.eks. fra en aapen mappe) skal ligge over mappa og menyen */
#home > .adlg-wrap { z-index: 46; }
.adlg-wrap.sheet { align-items: flex-end; padding: 12px 12px 30px; }
.adlg-wrap.out { animation: navFadeOut .18s ease both; }
.adlg { width: 100%; max-width: 330px; padding: 22px 18px 16px; border-radius: 26px; background: var(--surf); color: var(--tx); text-align: center; box-shadow: 0 24px 60px rgba(0,0,0,.45); animation: adlgIn .24s cubic-bezier(.2,1.1,.4,1) both; }
.sheet .adlg { max-width: none; padding: 16px 12px 10px; animation: adlgUp .28s cubic-bezier(.2,.9,.25,1) both; }
@keyframes adlgIn { from { opacity: 0; transform: scale(.92); } to { opacity: 1; transform: none; } }
@keyframes adlgUp { from { transform: translateY(40px); opacity: 0; } to { transform: none; opacity: 1; } }
.adlg-t { display: block; font: 700 17px var(--fd); }
.adlg-p { margin: 8px 0 0; font-size: 14px; line-height: 1.45; color: var(--tx2); white-space: pre-wrap; }
.adlg-btns { display: flex; gap: 8px; margin-top: 18px; }
.adlg-btns.col { flex-direction: column; }
.adlg-btns.col .adlg-b { flex: none; }
.adlg-b { flex: 1; height: 46px; border: 0; border-radius: 15px; background: var(--surf3); color: var(--tx); font: 700 14.5px var(--fb); cursor: pointer; transition: transform .14s ease; }
.adlg-b:active { transform: scale(.97); }
.adlg-b.main { background: var(--acc); color: var(--on-acc); }
.adlg-b.red { color: #ff6b6b; }
.adlg-b.cancel { margin-top: 4px; background: transparent; color: var(--tx2); }

/* U-Store */
.st-hero { display: block; width: calc(100% - 32px); margin: 2px 16px 6px; padding: 18px; border: 0; border-radius: 26px; text-align: left; cursor: pointer; color: #fff; background: linear-gradient(140deg, #ec4899, #7c3aed 60%, #312e81); box-shadow: 0 16px 36px rgba(0,0,0,.3); transition: transform .16s ease; }
.st-hero:active { transform: scale(.98); }
.st-kicker { display: block; font-size: 11.5px; font-weight: 800; letter-spacing: .9px; text-transform: uppercase; opacity: .85; }
.st-hrow { display: flex; align-items: center; gap: 14px; margin-top: 12px; }
.st-ht b { display: block; font: 700 21px var(--fd); }
.st-ht span { display: block; margin-top: 3px; font-size: 13px; opacity: .85; line-height: 1.35; }
.st-ic { flex-shrink: 0; border-radius: 24%; overflow: hidden; background: var(--surf3); display: flex; align-items: center; justify-content: center; color: var(--tx2); box-shadow: inset 0 0 0 1px rgba(255,255,255,.06); }
.st-ic img { width: 100%; height: 100%; object-fit: cover; display: block; }
.st-row { display: flex; align-items: center; gap: 12px; padding: 11px 14px; cursor: pointer; }
.st-row + .st-row { box-shadow: 0 -1px 0 var(--line); }
.st-row:active { background: var(--surf3); }
.st-t { flex: 1; min-width: 0; }
.st-t b { display: block; font-size: 15px; font-weight: 700; }
.st-t span { display: block; margin-top: 2px; font-size: 12.5px; color: var(--tx3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.st-get { position: relative; min-width: 72px; height: 32px; padding: 0 16px; border: 0; border-radius: 16px; background: var(--surf3); color: var(--acc-ink); font: 800 13.5px var(--fb); cursor: pointer; transition: opacity .14s ease, background-color .2s ease; }
.st-get.on { color: var(--tx); }
.st-get.big { height: 36px; min-width: 96px; background: var(--acc); color: var(--on-acc); }
.st-get.big.on { background: var(--surf3); color: var(--tx); }
.st-get:active { opacity: .7; }
/* Snurring UTEN transform: telefonen er skalert med transform, og en transform-animasjon inni den
   kan faa FiveM sin nettleser til aa tegne hele skjermen uskarpt. SVG-en animerer seg selv (SMIL). */
.st-get.busy::after { content: ''; position: absolute; left: 50%; top: 50%; width: 18px; height: 18px; margin: -9px; background: var(--acc);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18'%3E%3Ccircle cx='9' cy='9' r='7' fill='none' stroke='%23000' stroke-opacity='.25' stroke-width='2.5'/%3E%3Cpath d='M9 2a7 7 0 0 1 7 7' fill='none' stroke='%23000' stroke-width='2.5' stroke-linecap='round'%3E%3CanimateTransform attributeName='transform' type='rotate' from='0 9 9' to='360 9 9' dur='.7s' repeatCount='indefinite'/%3E%3C/path%3E%3C/svg%3E") center / contain no-repeat; }
.st-get.pop { animation: stPop .35s ease; }
@keyframes stPop { 40% { box-shadow: 0 0 0 5px rgba(255,255,255,.14); } }
.st-top { display: flex; gap: 16px; align-items: center; padding: 0 22px 18px; margin-top: -24px; }
.st-tt { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 4px; }
.st-tt h2 { margin: 0; font: 700 23px var(--fd); letter-spacing: -.4px; }
.st-tt > span { font-size: 13px; color: var(--tx3); margin-bottom: 6px; }
.st-facts { display: grid; grid-template-columns: repeat(3, 1fr); margin: 0 16px; padding: 12px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); text-align: center; }
.st-facts > div + div { box-shadow: -1px 0 0 var(--line); }
.st-facts span { display: block; font-size: 11px; font-weight: 700; letter-spacing: .5px; text-transform: uppercase; color: var(--tx3); }
.st-facts b { display: block; margin-top: 4px; font-size: 14px; }
.st-desc { margin: 16px 22px; font-size: 14.5px; line-height: 1.55; color: var(--tx2); }
.btn.st-rm { display: block; width: calc(100% - 44px); margin: 8px 22px 30px; color: #ff6b6b; }
.ufold:not(.folded) .store > :not(.apphead):not(.mini-bar) { max-width: 640px; margin-left: auto; margin-right: auto; }

/* =====================================================================
   Hjemskjerm: sider, prikker, rediger-modus, mapper, App-bibliotek
   ===================================================================== */
.hp-wrap { position: relative; flex: 1; overflow: hidden; min-height: 0; }
.hp-track { display: flex; height: 100%; transition: transform .42s cubic-bezier(.2,.9,.25,1); }
.rm .hp-track.hp-sliding { transition: transform .55s cubic-bezier(.45,.05,.2,1) !important; }
.hp-page { flex: 0 0 100%; height: 100%; display: flex; flex-direction: column; min-width: 0; }
.grid.hp-grid { flex: none; overflow: visible; padding: 22px 18px 0; row-gap: 0; align-content: start; align-items: start; }
.ufold:not(.folded) .grid.hp-grid { padding: 22px 30px 0; }
.ufold.folded .grid.hp-grid { padding: 18px 12px 0; }
.editing .hp-dots { opacity: 0; pointer-events: none; }
.hp-dots { position: absolute; left: 0; right: 0; bottom: 120px; display: flex; justify-content: center; gap: 7px; z-index: 3; }
.hp-dots button { width: 7px; height: 7px; padding: 0; border: 0; border-radius: 4px; background: rgba(255,255,255,.32); cursor: pointer; transition: background-color .2s ease, transform .2s ease; display: flex; align-items: center; justify-content: center; color: transparent; }
.hp-dots button.on { background: #fff; transform: scale(1.15); }
.hp-dots button.lib { width: 12px; height: 12px; background: none; color: rgba(255,255,255,.45); margin-top: -2px; }
.hp-dots button.lib.on { color: #fff; }
.theme-light .hp-dots button { background: rgba(0,0,0,.25); }
.theme-light .hp-dots button.on { background: #111; }
.theme-light .hp-dots button.lib { color: rgba(0,0,0,.4); background: none; }

/* Rediger-modus */
.hdel { position: absolute; top: -6px; left: -6px; width: 22px; height: 22px; border-radius: 50%; background: rgba(60,60,66,.92); color: #fff; font: 700 16px/22px var(--fb); text-align: center; box-shadow: 0 2px 6px rgba(0,0,0,.35); opacity: 0; transform: scale(.4); transition: opacity .18s ease, transform .18s ease; pointer-events: none; z-index: 2; }
.editing .hp-grid .hdel, .hf-ov.editing .hdel { opacity: 1; transform: none; pointer-events: auto; cursor: pointer; }
.editing .hp-grid .app .ic, .editing .dock .app .ic, .hf-ov.editing .app .ic { position: relative; animation: jiggle .28s ease-in-out infinite alternate; }
/* Hjemskjerm-ikonene faar takt fra jigglePhase() i app.js; dock og mapper bruker disse */
.editing .dock .app:nth-child(2n) .ic, .hf-ov.editing .app:nth-child(2n) .ic { animation-duration: .31s; animation-delay: -.14s; }
.editing .dock .app:nth-child(3n) .ic, .hf-ov.editing .app:nth-child(3n) .ic { animation-duration: .26s; animation-delay: -.07s; }
@keyframes jiggle { from { left: -1px; top: .5px; } to { left: 1px; top: -.5px; } }
/* Redusert bevegelse: fortsatt en svak risting, saa man ser at man er i rediger-modus */
.rm .editing .hp-grid .app .ic, .rm .editing .dock .app .ic, .rm .hf-ov.editing .app .ic { animation: jiggleSoft .34s ease-in-out infinite alternate !important; }
.rm .editing .hp-grid .hp-target .ic { animation: none !important; }
@keyframes jiggleSoft { from { left: -.5px; } to { left: .5px; } }
.hp-done { position: absolute; bottom: 110px; left: 50%; transform: translateX(-50%); z-index: 36; height: 30px; padding: 0 18px; border: 0; border-radius: 16px; background: rgba(255,255,255,.9); color: #111; font: 800 13.5px var(--fb); cursor: pointer; animation: bkFade .25s ease both; }
.hp-hole { opacity: 0; }
.hp-ghost { position: absolute; left: 0; top: 0; z-index: 40; pointer-events: none; transform: scale(1.12); transition: none !important; filter: drop-shadow(0 12px 18px rgba(0,0,0,.4)); }
#screen img { -webkit-user-drag: none; }
.hp-ghost .ic { animation: none !important; }
.hp-ghost .hdel { display: none; }
.hp-target .ic { transform: scale(1.18) !important; animation: none !important; box-shadow: 0 0 0 3px rgba(255,255,255,.55); transition: transform .18s ease; }
.app.lift .ic { transform: scale(1.1); transition: transform .2s cubic-bezier(.2,1.4,.4,1); }

/* Hold-inne-meny */
.hq-menu { position: absolute; z-index: 45; width: 220px; padding: 4px; border-radius: 16px; background: rgba(36,36,40,.97); box-shadow: 0 18px 40px rgba(0,0,0,.45); animation: hqIn .2s cubic-bezier(.2,1.2,.4,1) both; }
.hq-menu.out { animation: hqOut .15s ease both; }
@keyframes hqIn { from { opacity: 0; transform: scale(.85); } to { opacity: 1; transform: none; } }
@keyframes hqOut { to { opacity: 0; transform: scale(.92); } }
.hq-menu button { display: flex; width: 100%; height: 42px; align-items: center; justify-content: space-between; padding: 0 12px; border: 0; border-radius: 12px; background: none; color: #fff; font: 600 14px var(--fb); cursor: pointer; }
.hq-menu button + button { box-shadow: 0 -1px 0 rgba(255,255,255,.07); }
.hq-menu button:hover { background: rgba(255,255,255,.08); }
.hq-menu button.red { color: #ff6b6b; }
.theme-light .hq-menu { background: rgba(250,250,252,.98); }
.theme-light .hq-menu button { color: #111; }
.theme-light .hq-menu button + button { box-shadow: 0 -1px 0 rgba(0,0,0,.06); }

/* Mappe-ikon og aapen mappe */
.hf-ic { display: grid !important; grid-template-columns: repeat(3, 14px); grid-auto-rows: 14px; gap: 4px; padding: 0; align-content: center; justify-content: center; background: rgba(255,255,255,.18) !important; border: 1px solid rgba(255,255,255,.12) !important; }
.theme-light .hf-ic { background: rgba(0,0,0,.12) !important; }
.hf-mini { width: 14px; height: 14px; border-radius: 4px; overflow: hidden; display: flex; align-items: center; justify-content: center; }
.hf-mini img { width: 100%; height: 100%; object-fit: cover; }
.hf-ov { position: absolute; inset: 0; z-index: 35; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px; background: rgba(0,0,0,.55); animation: navFadeIn .2s ease both; }
.hf-ov.out { animation: navFadeOut .2s ease both; }
.hf-title { font: 700 26px var(--fd); color: #fff; letter-spacing: -.5px; text-align: center; max-width: 280px; }
input.hf-title { border: 0; background: rgba(255,255,255,.12); border-radius: 14px; padding: 6px 12px; outline: none; }
.hf-panel { width: 300px; max-height: 60%; overflow-y: auto; padding: 18px 10px; border-radius: 34px; background: rgba(40,40,46,.9); animation: hfIn .28s cubic-bezier(.2,1.05,.4,1) both; }
.hf-panel::-webkit-scrollbar { display: none; }
.hf-ov.out .hf-panel { animation: hfOut .2s ease both; }
@keyframes hfIn { from { transform: scale(.25); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes hfOut { to { transform: scale(.4); opacity: 0; } }
.hf-grid { display: grid; grid-template-columns: repeat(3, 1fr); row-gap: 16px; justify-items: center; }
.theme-light .hf-panel { background: rgba(245,245,248,.94); }

/* App-bibliotek */
.hp-lib { padding: 14px 16px 0; }
.lib-head { flex: none; }
.lib-search { margin: 4px 0 8px; }
.lib-list { flex: 1; overflow-y: auto; padding-bottom: 150px; }
.lib-list::-webkit-scrollbar { display: none; }
.lib-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); row-gap: 14px; justify-items: center; padding: 4px 0 6px; }
.ufold:not(.folded) .lib-grid { grid-template-columns: repeat(7, minmax(0, 1fr)); }
.lib-app.is-hidden .ic { opacity: .55; }
.hp-lib .hdel { display: none; }

/* Egne apper paa aapen U-Fold: telefonkolonne */
/* Utbrettet U-Fold, telefonapp: «fyll-modus». Appen som et kort i midten i full
   hoeyde, kantene fylles med appens egne farger (hentet fra appen, ingen ekstra lasting). */
.app-inner.customapp.phonecol { background: #0a0a0c; }
.app-inner.customapp.phonecol::after { content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background:
    radial-gradient(60% 55% at 0% 22%, var(--fa, #23232a), transparent 72%),
    radial-gradient(60% 55% at 100% 78%, var(--fb, #1b1b21), transparent 72%),
    radial-gradient(70% 60% at 50% 50%, var(--fa, #16161a), transparent 80%);
  opacity: .9; transition: background .5s ease; }
.app-inner.customapp.phonecol::before { display: block; content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none; height: auto;
  background: radial-gradient(75% 65% at 50% 50%, transparent 55%, rgba(0,0,0,.55)); }
.app-inner.customapp.phonecol .appframe { z-index: 1; top: 46px; height: calc(100% - 66px); left: 50%; width: 384px; margin-left: -192px; border-radius: 24px;
  background: var(--fa, #0b0b0d); box-shadow: 0 24px 60px rgba(0,0,0,.55), 0 0 0 1px rgba(255,255,255,.07); }
.app-inner.customapp.phonecol .ca-load { z-index: 2; }
/* Utbrettet U-Fold: alle apper fyller hele skjermen, under statuslinja */
.app-inner.customapp.foldwide { background: var(--fa, var(--bg)); transition: background .3s ease; }
.app-inner.customapp.foldwide .appframe { top: 40px; height: calc(100% - 40px); }
/* Apper fra andre script (bare telefonoppsett): forstoerres til hele skjermen */
.app-inner.customapp.foldscale { --fk: 1.3; }
.app-inner.customapp.foldscale .appframe { width: calc(100% / var(--fk)); height: calc((100% - 40px) / var(--fk)); transform: scale(var(--fk)); transform-origin: 0 0; }

/* To ruter (Meldinger, Telefon, Kontakter) paa utbrettet U-Fold */
.app-inner.fsplit::before { display: none; }
.fs-pane { position: absolute; top: 0; bottom: 0; overflow: hidden; }
.fs-l { left: 0; width: 330px; }
.fs-r { left: 330px; right: 0; border-left: 1px solid var(--line); }
.fs-pane::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 52px; background: var(--bg); z-index: 3; pointer-events: none; }
.ufold:not(.folded) .fs-pane .clist, .ufold:not(.folded) .fs-pane .search { max-width: none; margin-left: 0; margin-right: 0; width: auto; }
.ufold:not(.folded) .fs-pane .search { margin: 0 14px 10px; }
.ufold:not(.folded) .fs-pane .thread { left: 0; width: auto; margin-left: 0; }
.ufold:not(.folded) .fs-pane .tabs { left: 50%; right: auto; width: 300px; transform: translateX(-50%); }
.fs-l .apphead h1 { font-size: 30px; }
.fs-l .crow { border-radius: 16px; transition: background .15s ease, box-shadow .15s ease; }
.fs-l .crow.fs-sel { background: var(--surf); box-shadow: inset 3px 0 0 var(--acc) !important; }
.fs-l .crow.fs-sel + .crow { box-shadow: none; }
.fs-r .appbody, .fs-r .thread { background: var(--bg); }
.ufold:not(.folded) .fs-r .set-wrap { columns: auto; display: block; max-width: 440px; margin: 0 auto; padding: 0 20px; }
.ufold:not(.folded) .fs-r .formpage { max-width: 460px; margin: 0 auto; }
.fs-empty { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; text-align: center; padding: 40px; color: var(--tx2); font-size: 14px; line-height: 1.45; }
.fs-empty > div:last-child { max-width: 260px; }
.fs-empty-ic { width: 76px; height: 76px; border-radius: 24px; background: var(--surf); color: var(--acc-ink); display: flex; align-items: center; justify-content: center; }
.fs-empty:has(> div:last-child:empty) .fs-empty-ic { display: none; }
/* Telefon: tastaturet til venstre */
.fs-l .appbody.withtabs { padding-bottom: 30px; }
.fs-l .pad.dial { margin-left: auto; margin-right: auto; }

.statusbar.sb-dark { color: #111; }

/* =====================================================================
   FASE 5: Video i kameraet og Galleri
   ===================================================================== */
.cu-vframe { display: none; position: absolute; top: 0; bottom: 0; left: 50%; width: calc(100vh * var(--vr, .5625)); transform: translateX(-50%); box-shadow: 0 0 0 100vw rgba(0,0,0,.42); border-left: 1px solid rgba(255,255,255,.22); border-right: 1px solid rgba(255,255,255,.22); }
.camui.m-video .cu-vframe { display: block; }
.cu-rec { position: absolute; top: 76px; left: 50%; transform: translateX(-50%); display: none; align-items: center; gap: 8px; background: rgba(0,0,0,.55); padding: 7px 15px; border-radius: 999px; font: 700 15px var(--fd); color: #fff; text-shadow: none; font-variant-numeric: tabular-nums; }
.cu-rec b { width: 10px; height: 10px; border-radius: 50%; background: #ff3b3b; animation: recBlink 1s steps(2, start) infinite; }
.cu-rec em { font-style: normal; opacity: .6; font-weight: 600; }
.camui.recording .cu-rec { display: flex; }
.camui.recording .cu-tag { opacity: 0; }
.camui.m-video .cu-shutter span { background: #ff3b3b; }
.camui.recording .cu-shutter span { border-radius: 8px; transform: scale(.5); }
.camui.recording .cu-modes, .camui.recording .cu-keys { opacity: .35; }
@keyframes recBlink { to { visibility: hidden; } }
.gal-t video, .pv-s video { width: 100%; height: 100%; object-fit: cover; display: block; pointer-events: none; }
.gal-vid { position: absolute; right: 6px; bottom: 6px; color: #fff; display: flex; filter: drop-shadow(0 1px 2px rgba(0,0,0,.6)); }
.pv-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; background: #000; }
.gr-stage video { max-width: 100%; max-height: 100%; background: #000; border-radius: 6px; }
.sx-light .statusbar { color: #fff; }
.sx-light .homebar::after { background: #fff; }

.profile .copynr { margin-left: auto; }
.rowi .v.copyable { cursor: pointer; display: inline-flex; align-items: center; gap: 6px; }
.rowi .v.copyable:hover { color: var(--tx); }

/* ---------- Utbrettet U-Fold: appene bruker hele bredden ---------- */
.ufold:not(.folded) .bank .bk-cards { padding: 2px 30px 4px; scroll-padding: 0 30px; }
.ufold:not(.folded) .bank .bk-card:not(.hero) { flex-basis: calc(50% - 36px); }
.ufold:not(.folded) .bank > :not(.apphead):not(.mini-bar):not(.bk-cards):not(.bk-dots) { max-width: none; width: auto; margin-left: 30px; margin-right: 30px; }
.ufold:not(.folded) .store > :not(.apphead):not(.mini-bar) { max-width: none; margin-left: 14px; margin-right: 14px; }
.ufold:not(.folded) .map-top, .ufold:not(.folded) .map-list { max-width: none; margin-left: 24px; margin-right: 24px; }
.ufold:not(.folded) .fs-pane .note-ed, .ufold:not(.folded) .fs-pane .notes-list,
.ufold:not(.folded) .fs-pane .mail-view, .ufold:not(.folded) .fs-pane .mail-comp { max-width: none; margin: 0; }
.fs-r .note-ed { padding-left: 22px; padding-right: 22px; }

/* Krysse ut varsler (laaseskjerm og banner) */
.nc.canx { position: relative; }
.nc-x { position: absolute; top: 9px; right: 10px; width: 24px; height: 24px; border-radius: 12px; border: 0; padding: 0; display: flex; align-items: center; justify-content: center;
  background: var(--surf3); color: var(--tx); opacity: 0; transform: scale(.8); transition: opacity .15s, transform .15s; cursor: pointer; }
.nc.canx:hover .nc-x { opacity: 1; transform: scale(1); }
.nc.canx:hover .nc-top span { opacity: 0; }
.nc-top span { transition: opacity .15s; }
.nc-x:hover { background: var(--acc); color: var(--on-acc); }
.nc.nc-gone { opacity: 0; transform: translateX(40px); transition: opacity .2s, transform .2s; }
.lock-lhead { display: flex; justify-content: flex-end; margin-bottom: -2px; }
.lock-clear { border: 0; background: var(--surf3); color: var(--tx); font: 700 12px var(--fb, inherit); padding: 6px 12px; border-radius: 14px; cursor: pointer; opacity: .85; }
.lock-clear:hover { opacity: 1; background: var(--acc); color: var(--on-acc); }
.lock-more { text-align: center; font-size: 12px; font-weight: 700; color: var(--tx2); padding-top: 2px; }

/* ---------- U-Face: rask skanning paa laaseskjermen ---------- */
.ufq { position: absolute; z-index: 60; left: 50%; bottom: 104px; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 6px; pointer-events: none;
  padding: 12px 16px 10px; border-radius: 26px; background: rgba(0,0,0,.55); animation: ufqIn .25s ease both; }
.ufq-svg { width: 54px; height: 54px; overflow: visible; }
.ufq-dots circle { fill: var(--acc); opacity: .25; animation: ufqDot 0.9s ease-in-out infinite; }
.ufq-u { stroke: var(--acc); stroke-dasharray: 130; stroke-dashoffset: 130; animation: ufqDraw .6s cubic-bezier(.2,.8,.2,1) .05s forwards; }
.ufq-ok { stroke: var(--acc); stroke-dasharray: 70; stroke-dashoffset: 70; opacity: 0; }
.ufq-t { font: 700 11px var(--fb); color: #fff; letter-spacing: .4px; white-space: nowrap; }
.ufq.uf-ok .ufq-dots circle { animation: none; opacity: .9; transition: opacity .2s; }
.ufq.uf-ok .ufq-u { opacity: 0; transition: opacity .15s; }
.ufq.uf-ok .ufq-ok { opacity: 1; animation: ufqDraw .3s ease forwards; }
.ufq.uf-fail { animation: ufqShake .4s ease both; }
.ufq.uf-fail .ufq-dots circle { animation: none; fill: #ef4444; opacity: .7; }
.ufq.uf-fail .ufq-u { stroke: #ef4444; }
.ufq.uf-fail .ufq-t { color: #ffb4b4; }
.ufold:not(.folded) .ufq { bottom: 96px; }
@keyframes ufqIn { from { opacity: 0; transform: translateX(-50%) scale(.9); } to { opacity: 1; transform: translateX(-50%) scale(1); } }
@keyframes ufqDot { 0%, 100% { opacity: .2; } 50% { opacity: 1; } }
@keyframes ufqDraw { to { stroke-dashoffset: 0; } }
@keyframes ufqShake { 0%, 100% { transform: translateX(-50%); } 20% { transform: translateX(calc(-50% - 8px)); } 40% { transform: translateX(calc(-50% + 8px)); } 60% { transform: translateX(calc(-50% - 5px)); } 80% { transform: translateX(calc(-50% + 4px)); } }

/* ---------- U-Face: registrering (hele skjermen over kameraet) ---------- */
.ufe { position: fixed; inset: 0; z-index: 9000; pointer-events: none; font-family: var(--fb); color: #fff; --r: 25vmin; --cy: 44%; --ac: var(--acc, #ffb200); }
.ufe-mask { position: absolute; inset: 0; background: radial-gradient(circle at 50% var(--cy), rgba(0,0,0,0) calc(var(--r) - 1px), rgba(0,0,0,.94) var(--r)); transition: background .6s ease; }
.ufe:not(.uf-live) .ufe-mask { background: radial-gradient(circle at 50% var(--cy), rgba(0,0,0,.6) calc(var(--r) - 1px), rgba(0,0,0,.94) var(--r)); }
.ufe-ring { position: absolute; left: 50%; top: var(--cy); width: calc(var(--r) * 2.44); height: calc(var(--r) * 2.44); transform: translate(-50%, -50%); }
.ufe-ring svg { width: 100%; height: 100%; overflow: visible; }
.ufe-ticks line { stroke: rgba(255,255,255,.22); stroke-width: 5; stroke-linecap: round; transition: stroke .25s, stroke-width .25s; }
.ufe-ticks line.on { stroke: var(--ac); stroke-width: 6; }
.ufe-ticks line.on2 { stroke: #fff; stroke-width: 7; }
.ufe.uf-half .ufe-ticks line.on { stroke: color-mix(in srgb, var(--ac) 55%, transparent); }
.ufe-u { stroke: var(--ac); stroke-width: 16; stroke-dasharray: 900; stroke-dashoffset: 900; opacity: 0; }
.ufe-ok { stroke: #fff; stroke-width: 20; stroke-dasharray: 260; stroke-dashoffset: 260; opacity: 0; }
.ufe.uf-done .ufe-mask { background: radial-gradient(circle at 50% var(--cy), rgba(0,0,0,.8) calc(var(--r) - 1px), rgba(0,0,0,.94) var(--r)); }
.ufe.uf-done .ufe-ticks line { stroke: var(--ac); stroke-width: 6; }
.ufe.uf-done .ufe-u { opacity: 1; animation: ufeDraw .9s cubic-bezier(.2,.8,.2,1) forwards; }
.ufe.uf-done .ufe-ok { opacity: 1; animation: ufeDraw .45s ease .55s forwards; }
.ufe-top { position: absolute; top: 5vh; left: 50%; transform: translateX(-50%); display: flex; align-items: center; gap: 10px; font: 700 16px var(--fb); letter-spacing: .3px; }
.ufe-top b { width: 30px; height: 30px; border-radius: 10px; background: var(--ac); color: #151518; display: flex; align-items: center; justify-content: center; font: 800 18px var(--fd); }
.ufe-txt { position: absolute; left: 0; right: 0; top: calc(var(--cy) + var(--r) * 1.3); text-align: center; padding: 0 20px; }
.ufe-txt h2 { margin: 0 0 8px; font: 700 28px var(--fd); letter-spacing: -.3px; }
.ufe-txt p { margin: 0; font-size: 16px; color: rgba(255,255,255,.7); font-weight: 600; }
.ufe-keys { position: absolute; bottom: 5vh; left: 50%; transform: translateX(-50%); font-size: 13px; color: rgba(255,255,255,.6); font-weight: 600; }
.ufe-keys kbd { font: 700 12px var(--fb); padding: 3px 8px; border-radius: 6px; background: rgba(255,255,255,.12); color: #fff; margin-right: 6px; }
@keyframes ufeDraw { to { stroke-dashoffset: 0; } }

/* Oppsett: U-Face-ikon */
.su-face { width: 96px; height: 96px; border-radius: 30px; margin: 40px 0 10px; display: flex; align-items: center; justify-content: center; color: var(--acc);
  background: radial-gradient(circle at 50% 40%, var(--acc-a, rgba(255,178,0,.3)), rgba(0,0,0,0) 70%), var(--surf3); }
.su-face svg { width: 60px; height: 60px; }

/* ---------- U-Drop og Mitt kort ---------- */
.crow.mycard { width: calc(100% - 16px); margin: 6px 8px 2px; padding: 10px 12px; border-radius: 22px; background: var(--surf2); box-shadow: inset 0 0 0 1px var(--line); }
.crow.mycard + .cnew { margin-top: 8px; }
.mycard-drop { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; padding: 6px 11px; border-radius: 14px; background: var(--acc); color: var(--on-acc); flex-shrink: 0; }
.mycard-drop b { font-size: 12px; font-weight: 800; }
.cdtop { display: flex; flex-direction: column; align-items: center; padding: 10px 0 6px; }
.udrop-go { margin: 12px 18px 4px; width: calc(100% - 36px); display: flex; align-items: center; justify-content: center; gap: 8px; }
.udrop-seg { margin-top: 8px; }
.udrop-seg button { flex: 1; }
.udrop-radar { position: relative; width: 120px; height: 120px; margin: 12px auto 6px; display: flex; align-items: center; justify-content: center; }
.udrop-radar b { position: relative; z-index: 1; width: 56px; height: 56px; border-radius: 28px; background: var(--acc); color: var(--on-acc); display: flex; align-items: center; justify-content: center; }
.udrop-radar i { position: absolute; inset: 0; border-radius: 50%; border: 2px solid var(--acc); opacity: 0; animation: udropPulse 2.1s ease-out infinite; }
.udrop-radar i:nth-child(2) { animation-delay: .7s; }
.udrop-radar i:nth-child(3) { animation-delay: 1.4s; }
.udrop-radar.done i { animation-iteration-count: 2; }
@keyframes udropPulse { 0% { inset: 27%; opacity: .7; } 100% { inset: -8%; opacity: 0; } }
.udrop-btns { display: grid; gap: 10px; padding: 14px 18px 8px; }
.mb-note { font-size: 13px; color: var(--acc-ink); font-weight: 700; margin-top: 6px; }
.pv-top .pv-save { width: auto; padding: 0 14px 0 10px; gap: 6px; border-radius: 20px; display: inline-flex; align-items: center; font-size: 13px; font-weight: 700; }
.pv-top .pv-save.done { background: var(--acc); color: var(--on-acc); }
.udrop-note { font-size: 12.5px; line-height: 1.45; color: var(--tx2); margin-top: 10px; }

/* ---------- Bretting: myk overgang (U-Fold / U-Flip) ---------- */
.fxveil { position: absolute; inset: 0; z-index: 300; background: var(--bg); opacity: 0; pointer-events: none; transition: opacity .11s linear; }
.dev.fx-out .fxveil, .dev.fx-busy .fxveil { opacity: 1; }
.dev.fx-in .fxveil { opacity: 0; transition: opacity .3s ease; }
/* Mens rammen endrer stoerrelse regnes ikke innholdet ut paa nytt (bare rammen animeres) */
.dev.fx-busy .screen > .layer, .dev.fx-busy .callscreen, .dev.fx-busy .qs, .dev.fx-busy .banner { content-visibility: hidden; }
.dev.fx-busy .screen { will-change: contents; }
.dev.fx-out, .dev.fx-busy { will-change: width, height; }
.dev.uflip.fx-in .screen { animation: flipOpen .44s cubic-bezier(.2,.8,.2,1) both; transform-origin: 50% 100%; }
.dev.ufold.fx-in .screen { animation: foldOpen .4s cubic-bezier(.2,.8,.2,1) both; }
@keyframes flipOpen { from { transform: perspective(1400px) rotateX(12deg) scale(.985); } to { transform: none; } }
@keyframes foldOpen { from { transform: scale(.985); } to { transform: none; } }
.dev.rm .fxveil { transition: none; }

/* Hengselet kan klikkes for aa brette */
.dev.uflip .hinge, .dev.ufold .hinge { cursor: pointer; pointer-events: auto; }
.dev.uflip .hinge::before, .dev.ufold .hinge::before { content: ''; position: absolute; inset: -12px; }

/* ---------- U-Flip: ytterskjermen ---------- */
.dev.uflip.folded .cover { animation: coverIn .32s ease both; }
@keyframes coverIn { from { opacity: 0; } to { opacity: 1; } }
.cover { pointer-events: auto; }
.cover-clock.sm { font-size: 40px; margin-top: 10px; letter-spacing: -2px; }
.cover-date { margin-top: 6px; }
.cv-b { border: 0; padding: 0; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; color: #fff; flex-shrink: 0; transition: transform .1s, background .15s; }
.cv-b:active { transform: scale(.94); }
.cv-b.ghost { width: 30px; height: 30px; border-radius: 15px; background: rgba(255,255,255,.08); }
.cv-b.ghost:hover { background: rgba(255,255,255,.16); }
.cv-b.flipx svg { transform: rotate(180deg); }
.cv-b.acc { width: 34px; height: 34px; border-radius: 17px; background: var(--acc); color: #151518; }
.cv-b.open { height: 30px; padding: 0 12px 0 9px; gap: 5px; border-radius: 15px; background: var(--acc); color: #151518; font: 800 12px var(--fb); }
.cv-note { margin: 10px 12px 0; }
.nc.cv { background: #222226; border-radius: 22px; padding: 9px 12px 9px 9px; gap: 10px; align-items: center; cursor: pointer; }
.nc.cv .nc-ic { width: 34px; height: 34px; border-radius: 17px; }
.nc.cv .nc-top { font-size: 12px; color: #a9a9b0; }
.nc.cv .nc-top b { color: #fff; }
.nc.cv .nc-txt { font-size: 12.5px; color: #e9e9ee; -webkit-line-clamp: 1; }
.nc.cv .nc-x { top: 6px; right: 8px; width: 22px; height: 22px; background: #33333a; color: #fff; }
.cv-nav { display: flex; align-items: center; justify-content: center; gap: 10px; margin-top: 6px; font: 700 11px var(--fb); color: #a9a9b0; }
.cv-media { margin: 8px 12px 0; display: flex; align-items: center; gap: 8px; padding: 7px 8px 7px 14px; border-radius: 20px; background: #222226; }
.cv-mt { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.cv-mt b, .cv-mt span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cv-mt b { font-size: 12.5px; }
.cv-mt span { font-size: 11px; color: #a9a9b0; }
.cv-short { position: absolute; left: 14px; right: 14px; bottom: 12px; display: flex; align-items: center; justify-content: space-between; }
.cover.cv-call { background: radial-gradient(circle at 50% 30%, rgba(52,199,89,.16), rgba(0,0,0,0) 62%), #151518; }
.cv-callbox { display: flex; flex-direction: column; align-items: center; margin-top: 12px; gap: 2px; }
.cv-name { font: 700 19px var(--fd); margin-top: 8px; max-width: 280px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cv-status { font-size: 13px; color: #a9a9b0; font-weight: 600; }
.cv-callbtns { position: absolute; left: 0; right: 0; bottom: 18px; display: flex; justify-content: center; align-items: center; gap: 40px; }
.cv-b.red, .cv-b.green { width: 58px; height: 58px; border-radius: 29px; }
.cv-b.red { background: #ef4444; }
.cv-b.green { background: #34c759; }
.cv-b.dark { width: 50px; height: 50px; border-radius: 25px; background: rgba(255,255,255,.12); }
.cv-b.dark.on { background: #fff; color: #151518; }
.cv-hint { font-size: 12px; font-weight: 700; color: #cecece; }
/* Brettet U-Flip: den skjulte hovedskjermen skal ikke ta imot klikk (ytterskjermen ligger oeverst) */
.dev.uflip.folded .screen, .dev.uflip.folded .screen * { pointer-events: none !important; }
.dev.uflip.folded .cover { z-index: 5; }
/* Bakgrunnsbildet blir staaende under bretting; bare innholdet toner ut og inn */
.fxveil { display: none; }
.dev.fx-out .screen > .layer, .dev.fx-out .callscreen, .dev.fx-out .homebar, .dev.fx-out .statusbar, .dev.fx-out .qs, .dev.fx-out .banner {
  opacity: 0 !important; transition: opacity .11s linear !important; }
.dev.fx-in .screen > .layer:not(.off), .dev.fx-in .homebar, .dev.fx-in .statusbar { animation: fxIn .3s ease both; }
@keyframes fxIn { from { opacity: 0; } to { opacity: 1; } }
/* Mikrofon-merke i kameraet (bare i Video) */
.cu-mic { display: none; }
.camui.m-video .cu-mic { display: inline-flex; }
.cu-mic svg { flex: none; }
.cu-mic.on { color: #6ee7a8; }
.cu-mic.off { color: #ff8a8a; }
.cu-mic.wait, .cu-mic.idle { color: rgba(255,255,255,.75); }

/* Innstillinger: ringetoner (to kolonner, valgt med aksentfarge) */
.ringgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.ringopt { padding: 9px 10px; border-radius: 10px; border: 1px solid var(--line, rgba(255,255,255,.08)); background: var(--surf2, rgba(255,255,255,.05)); color: inherit; font: inherit; font-size: 13px; text-align: left; cursor: pointer; }
.ringopt.on { border-color: var(--acc); color: var(--acc); }

/* U-Store: faner og ringetoner */
.st-tabs { display: flex; gap: 6px; margin: 0 16px 12px; padding: 4px; border-radius: 14px; background: var(--surf); }
.st-tab { flex: 1; height: 34px; border: 0; border-radius: 10px; background: transparent; color: var(--tx2); font: 700 13.5px var(--fb); cursor: pointer; }
.st-tab.on { background: var(--surf3); color: var(--tx); }
.rs-wrap { display: flex; flex-direction: column; }
.rs-pack { position: relative; display: flex; flex-direction: column; gap: 4px; margin: 2px 16px 12px; padding: 16px 18px; border-radius: 22px; color: #fff;
  background: radial-gradient(120% 140% at 100% 0%, rgba(255,120,150,.55), rgba(0,0,0,0) 60%), linear-gradient(140deg, #b91c3c, #4c1d95 70%, #1e1b4b); box-shadow: 0 14px 30px rgba(0,0,0,.28); }
.rs-pack-t { font: 800 20px var(--fd); }
.rs-pack-d { font-size: 13px; opacity: .85; }
.rs-pack .rs-buy { position: absolute; right: 16px; bottom: 16px; }
.rs-pack-top { display: flex; align-items: center; gap: 8px; }
.rs-off { font: 800 11px var(--fb); padding: 2px 7px; border-radius: 10px; background: #fff; color: #9f1239; }
.rs-pack-left { font-size: 11.5px; opacity: .75; margin-top: 2px; padding-right: 110px; }
.rs-pack-t, .rs-pack-d { padding-right: 0; }
.rs-row.pick { cursor: pointer; }
.rs-row.pick.on .rs-t b { color: var(--acc); }
.rs-check { flex: none; width: 22px; text-align: center; font: 800 16px var(--fb); color: var(--acc); }
.rowi .chev { opacity: .5; margin-left: 2px; }
.rs-chips { display: flex; gap: 6px; overflow-x: auto; padding: 0 16px 10px; scrollbar-width: none; }
.rs-chips::-webkit-scrollbar { display: none; }
.rs-chip { flex: none; height: 30px; padding: 0 13px; border: 0; border-radius: 15px; background: var(--surf); color: var(--tx2); font: 700 12.5px var(--fb); cursor: pointer; }
.rs-chip.on { background: var(--acc); color: var(--on-acc); }
.rs-row { display: flex; align-items: center; gap: 12px; padding: 10px 14px; }
.rs-row + .rs-row { box-shadow: 0 -1px 0 var(--line); }
.rs-play { position: relative; flex: none; width: 40px; height: 40px; border: 0; border-radius: 50%; background: var(--surf3); color: var(--tx); cursor: pointer; display: grid; place-items: center; }
.rs-tri { width: 0; height: 0; border-left: 11px solid currentColor; border-top: 7px solid transparent; border-bottom: 7px solid transparent; margin-left: 3px; }
.rs-wave { display: none; align-items: flex-end; gap: 2px; height: 16px; }
.rs-wave i { width: 3px; height: 4px; border-radius: 2px; background: var(--on-acc); animation: rsWave .9s ease-in-out infinite; }
.rs-wave i:nth-child(2) { animation-delay: .15s; } .rs-wave i:nth-child(3) { animation-delay: .3s; } .rs-wave i:nth-child(4) { animation-delay: .45s; }
@keyframes rsWave { 0%, 100% { height: 4px; } 50% { height: 15px; } }
.rs-row.playing .rs-play { background: var(--acc); }
.rs-row.playing .rs-tri { display: none; }
.rs-row.playing .rs-wave { display: flex; }
.rs-t { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.rs-t b { font: 700 14.5px var(--fb); display: flex; align-items: center; gap: 6px; }
.rs-t > span { font-size: 12px; color: var(--tx3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rs-cat { font: 700 10px var(--fb); letter-spacing: .05em; text-transform: uppercase; color: var(--acc); }
.rs-buy { flex: none; min-width: 74px; height: 32px; padding: 0 12px; border: 0; border-radius: 16px; background: var(--surf3); color: var(--acc-ink); font: 800 12.5px var(--fb); cursor: pointer; white-space: nowrap; }
.rs-buy.big { height: 34px; background: #fff; color: #1b1030; }
.rs-buy.owned { color: var(--tx); }
.rs-buy.owned.using { background: transparent; color: var(--tx3); cursor: default; }
.rs-buy.big.owned { background: rgba(255,255,255,.2); color: #fff; }
.ringopt.paid { font-weight: 600; }
.ringmore { margin-top: 2px; }
@media (prefers-reduced-motion: reduce) { .rs-wave i { animation: none; height: 10px; } }

/* Bilde paa kontakter og Mitt kort */
.av.img { background-size: cover; background-position: center; background-repeat: no-repeat; }
.av-edit { position: relative; border: 0; background: none; padding: 0; cursor: pointer; border-radius: 50%; display: inline-flex; }
.av-edit:active { transform: scale(.97); }
.av-pen { position: absolute; right: 0; bottom: 0; width: 28px; height: 28px; border-radius: 50%; background: var(--acc); color: #111; display: flex; align-items: center; justify-content: center; box-shadow: 0 0 0 3px var(--bg, #111); }
.mb-btns.col { grid-template-columns: 1fr; }

/* Apper med eget ikonbilde */
.ic.col.hasimg { overflow: visible; background: transparent; }
.ic.col.hasimg img { border-radius: inherit; display: block; pointer-events: none; }

/* ---------- U-Pay (betalingsark) ---------- */
.adlg-wrap.fpay { z-index: 60; padding: 12px 12px 26px; }   /* over appvinduet (.appview er 20) */
.fpay-box { max-width: 360px; padding: 18px 18px 14px; text-align: center; }
.fpay-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.fpay-logo { height: 18px; width: auto; display: block; opacity: .9; }
.fpay-brand { display: inline-flex; align-items: center; gap: 6px; font: 800 17px var(--fd); color: var(--tx); }
.fpay-brand svg { width: 20px; height: 20px; color: #2fb352; }
.st-get.paid { background: #208838; color: #fff; }
.fpay-logo-t { font: 800 17px var(--fd); color: #2fb352; }
.fpay-tag { font: 700 11px var(--fb); letter-spacing: .6px; text-transform: uppercase; color: var(--tx2); }
.fpay-merchant { display: block; font: 700 17px var(--fd); }
.fpay-title { margin-top: 3px; font-size: 13px; color: var(--tx2); }
.fpay-sum { margin: 12px 0 14px; font: 800 34px var(--fd); letter-spacing: -.5px; white-space: nowrap; }
.fpay-accs { display: flex; flex-direction: column; gap: 6px; text-align: left; }
.fpay-acc { display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%; padding: 10px 12px; border: 2px solid transparent; border-radius: 14px; background: var(--surf3); color: var(--tx); font: inherit; cursor: default; text-align: left; }
.fpay-accs.pick .fpay-acc { cursor: pointer; }
.fpay-accs.pick .fpay-acc.on { border-color: #2fb352; }
.fpay-acc.low { opacity: .55; }
.fpay-acc-l, .fpay-acc-r { display: flex; flex-direction: column; min-width: 0; }
.fpay-acc-r { align-items: flex-end; flex-shrink: 0; }
.fpay-acc b { font: 700 14px var(--fb); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fpay-acc small { font-size: 11px; color: var(--tx2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fpay-acc.low .fpay-acc-r small { color: #ff6b6b; }
.fpay-msg { min-height: 16px; margin-top: 10px; font-size: 12.5px; color: var(--tx2); }
.fpay-msg.bad { color: #ff6b6b; }
.fpay-box .adlg-btns { margin-top: 8px; }
.fpay-box .adlg-b.main { background: #208838; color: #fff; }
.fpay-box .adlg-b:disabled { opacity: .5; cursor: default; }
.fpay-face { display: flex; align-items: center; justify-content: center; gap: 8px; }
.fpay-clock { margin-top: 10px; font-size: 11.5px; color: var(--tx2); }
.fpay-box .ufq.fpay-ufq { position: static; transform: none; width: 100%; margin: 6px 0 2px; padding: 10px 0 6px; min-height: 120px; justify-content: center; background: none; animation: fpayIn .25s ease both; }
.fpay-box .ufq.fpay-ufq.uf-fail { animation: shake .4s ease both; }
@keyframes fpayIn { from { opacity: 0; transform: scale(.9); } to { opacity: 1; transform: none; } }
.fpay-box .ufq.fpay-ufq .ufq-t { color: var(--tx); }
.fpay-box .padwrap.fpay-pad { margin-top: 0; gap: 10px; }
.fpay-box .padwrap.fpay-pad .pad-title { font-size: 20px; }
.fpay-box .padwrap.fpay-pad .pad { grid-template-columns: repeat(3, 68px); gap: 10px 18px; }
.fpay-box .padwrap.fpay-pad .key { width: 68px; height: 68px; border-radius: 34px; font-size: 27px; }
.fpay-ok { width: 72px; height: 72px; margin: 6px auto 12px; color: #2fb352; animation: adlgIn .3s ease both; }
.fpay-ok svg { width: 100%; height: 100%; }

/* ---------- U-Printer: polaroider ---------- */
.pol { position: relative; width: 210px; margin: 6px auto 0; padding: 11px 11px 34px; background: #fcfcf9; color: #222; border-radius: 3px; box-shadow: 0 8px 24px rgba(0,0,0,.35), 0 1px 0 rgba(255,255,255,.6) inset; transform: rotate(-2deg); }
.pol-img { display: block; width: 100%; aspect-ratio: 1 / 1; object-fit: cover; background: #d9d9d4; }
.pol.wide { width: 272px; }
.pol.wide .pol-img { aspect-ratio: 16 / 9; object-fit: contain; background: #15151a; }
.print-fmt { display: flex; gap: 8px; margin: 16px 18px 0; }
.print-fmt-b { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 10px 6px; border-radius: 16px; border: 1px solid var(--line); background: var(--surf); color: var(--tx); cursor: pointer; }
.print-fmt-b b { font: 800 14px var(--fb); }
.print-fmt-b small { font: 600 11px var(--fb); color: var(--tx2); }
.print-fmt-b.on { background: var(--acc); border-color: transparent; color: var(--on-acc); }
.print-fmt-b.on small { color: inherit; opacity: .8; }
.pol-txt { margin-top: 12px; min-height: 22px; text-align: center; font: 600 17px 'Segoe Print', 'Bradley Hand', 'Comic Sans MS', cursive; color: #2b2b2b; line-height: 1.25; word-break: break-word; }
.pol-meta { margin-top: 4px; text-align: center; font: 600 10px var(--fb); letter-spacing: .3px; color: #9a9a94; }
.print-sheet .fld { margin: 18px 18px 0; }
.print-sheet .print-note { margin: 12px 18px 0; font-size: 12px; line-height: 1.4; color: var(--tx2); }
.print-sheet .print-btn { display: block; width: calc(100% - 36px); margin: 14px 18px 0; }
.print-sheet.done .pol { animation: polOut .6s ease both; }
@keyframes polOut { to { transform: translateY(140px) rotate(-2deg); opacity: 0; } }
/* Visning oppaa alt (ogsaa med telefonen i lomma). .mine = den som holder den (kan leke), .passive = de rundt */
.polaroid-ov { position: fixed; inset: 0; z-index: 9999; display: flex; align-items: center; justify-content: center; background: rgba(0,0,0,.4); animation: fadeIn .25s ease both; perspective: 1100px; perspective-origin: 50% 45%; user-select: none; }
.polaroid-ov.out { animation: polFade .22s ease both; }
@keyframes polFade { to { opacity: 0; } }
.pol-stage { position: relative; width: min(360px, 72vw); transform-style: preserve-3d; animation: polIn .8s cubic-bezier(.2, .9, .3, 1.15) both; }
.pol-stage.wide { width: min(620px, 84vw); }
.polaroid-ov.mine .pol-stage { cursor: grab; }
.polaroid-ov.mine .pol-stage.drag { cursor: grabbing; }
.pol-flip { position: relative; transform-style: preserve-3d; transition: transform .14s ease-out; }
.pol-stage.drag .pol-flip { transition: transform .06s linear; }
.polaroid-ov .pol, .pol-back { backface-visibility: hidden; -webkit-backface-visibility: hidden; transform: none; }
.polaroid-ov .pol { position: relative; width: auto; margin: 0; padding: 16px 16px 22px; display: flex; flex-direction: column; box-shadow: 0 24px 60px rgba(0,0,0,.55), 0 1px 0 rgba(255,255,255,.6) inset; }
.polaroid-ov .pol.wide { padding-bottom: 18px; }
.polaroid-ov .pol.wide .pol-txt { font-size: 22px; margin-top: 14px; }
.pol-back { position: absolute; inset: 0; }
.polaroid-ov .pol-img { flex: none; }
.polaroid-ov .pol-txt { margin-top: 18px; font-size: 26px; }
.polaroid-ov .pol-meta { font-size: 12px; }
/* glans som foelger musa (bare den som holder den) */
@property --mx { syntax: '<percentage>'; inherits: false; initial-value: 50%; }
@property --my { syntax: '<percentage>'; inherits: false; initial-value: 50%; }
.pol-shine { position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity .25s; mix-blend-mode: soft-light;
  background: radial-gradient(circle at var(--mx, 50%) var(--my, 50%), rgba(255,255,255,.95), rgba(255,255,255,.25) 28%, rgba(255,255,255,0) 60%); }
.pol-stage.near .pol-shine { opacity: .9; }
/* baksiden: papp med stempel og notat */
.pol-back { transform: rotateY(180deg); background: #e9e4d6 repeating-linear-gradient(0deg, rgba(0,0,0,.025) 0 2px, transparent 2px 7px); border-radius: 3px; box-shadow: 0 24px 60px rgba(0,0,0,.55);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; padding: 24px; color: #4a4336; }
.pol-stamp { font: 800 13px var(--fb); letter-spacing: 4px; color: #b8402a; border: 3px solid #b8402a; border-radius: 6px; padding: 6px 12px; transform: rotate(-8deg); opacity: .8; }
.pol-note { text-align: center; font: 600 18px 'Segoe Print', 'Bradley Hand', 'Comic Sans MS', cursive; line-height: 1.5; color: #3a3328; }
.pol-note-q { margin-top: 8px; font-size: 16px; color: #6a6050; }
.pol-made { position: absolute; bottom: 12px; font: 600 10px var(--fb); letter-spacing: 1px; color: #a39b88; text-transform: uppercase; }
@keyframes polIn { from { transform: translateY(180px) rotateX(-35deg) rotateZ(6deg); opacity: 0; } to { transform: translateY(0) rotateX(0) rotateZ(0); opacity: 1; } }
/* de rundt: rolig vugging og en glans som sveiper over */
.polaroid-ov.passive .pol-flip { transform: rotateY(-4deg) rotateX(2deg); }   /* fast vinkel (vugging gjorde telefonen uskarp) */
@keyframes polSway { 0%, 100% { transform: rotateY(-7deg) rotateX(3deg); } 50% { transform: rotateY(7deg) rotateX(-3deg); } }
.polaroid-ov.passive .pol-shine { opacity: .6; animation: polSweep 6s ease-in-out .8s infinite; }
@keyframes polSweep { 0%, 100% { --mx: 15%; --my: 30%; } 50% { --mx: 85%; --my: 70%; } }
.pol-hint { position: absolute; left: 0; right: 0; bottom: 34px; text-align: center; color: #fff; font: 600 13px var(--fb); text-shadow: 0 1px 6px rgba(0,0,0,.7); animation: fadeIn .6s ease .5s both; pointer-events: none; }
.pol-put { position: absolute; top: 28px; right: 28px; height: 44px; padding: 0 20px; border: 1px solid rgba(255,255,255,.28); border-radius: 22px; background: rgba(255,255,255,.14); color: #fff; font: 800 14px var(--fb); cursor: pointer; }
.pol-put:hover { background: rgba(255,255,255,.24); }

/* Ingen fokusramme (firkant) rundt knapper etter klikk + tastetrykk */
button:focus, button:focus-visible, [role="button"]:focus-visible { outline: none; }

/* 999: telefonsvareren (ingen svarte) */
.cs-vm { width: 100%; margin-top: 18px; display: flex; flex-direction: column; gap: 10px; text-align: left; }
.cs-vm .vm-say { font-size: 14px; line-height: 1.45; color: rgba(255,255,255,.75); text-align: center; }
.cs-vm .vm-chips { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; }
.cs-vm .vm-chip { border: 1px solid rgba(255,255,255,.16); background: rgba(255,255,255,.06); color: #fff; font: 600 12.5px var(--fb); padding: 6px 10px; border-radius: 14px; cursor: pointer; }
.cs-vm .vm-chip:hover { background: rgba(255,255,255,.12); }
.cs-vm .vm-ta { width: 100%; box-sizing: border-box; min-height: 92px; resize: none; border-radius: 16px; border: 1px solid rgba(255,255,255,.14); background: rgba(255,255,255,.06); color: #fff; padding: 12px 14px; font: 500 14.5px/1.45 var(--fb); outline: none; }
.cs-vm .vm-ta:focus { border-color: var(--acc); }
.cs-vm .vm-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.cs-vm .vm-count { font-size: 12px; color: rgba(255,255,255,.45); font-variant-numeric: tabular-nums; }
.cs-vm .vm-send { border: 0; border-radius: 18px; background: var(--acc); color: var(--on-acc); font: 700 14px var(--fb); padding: 10px 18px; cursor: pointer; }
.cs-vm .vm-send:disabled { opacity: .4; cursor: default; }
.cs-vm .vm-ok { width: 56px; height: 56px; margin: 8px auto 0; border-radius: 28px; background: rgba(98,196,130,.18); color: #62C482; display: flex; align-items: center; justify-content: center; }
.cs-vm .vm-done { font: 700 18px var(--fd); text-align: center; }
.cs-vm .vm-sub { font-size: 13.5px; color: rgba(255,255,255,.65); text-align: center; line-height: 1.45; }
/* Ingen sprett/glød når en liste eller app scrolles forbi enden: CEF tegnet da hele den
   skalerte telefonen i lavere oppløsning (uklar). Gjelder telefonen og alle innebygde apper. */
*{overscroll-behavior:none}

/* Dra for aa bla: ingen tekstmarkering mens man drar */
.dev.udrag, .dev.udrag * { user-select: none !important; cursor: grabbing !important; }

/* ---------- Videosamtale ---------- */
.vidcall { position: absolute; inset: 0; z-index: 77; background: #000; overflow: hidden; display: none; }
.vidcall.show { display: block; }
.vid-remote { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; background: #000; }
.vid-over { position: absolute; inset: 0; display: none; flex-direction: column; align-items: center; justify-content: center; gap: 14px; background: #0a0a0c; }
.vid-over.show { display: flex; }
.vid-over .vid-ot { font: 600 15px var(--fd); color: #cecece; }
.vid-self { position: absolute; top: 64px; right: 14px; width: 92px; height: 164px; border-radius: 16px; overflow: hidden; background: #18181b; box-shadow: 0 6px 20px rgba(0,0,0,.45), 0 0 0 1.5px rgba(255,255,255,.18); cursor: grab; touch-action: none; z-index: 2; }
.vid-self canvas { width: 100%; height: 100%; display: block; }
.vid-self.off canvas { visibility: hidden; }
.vid-selfoff { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; pointer-events: none; }
.vid-self.off .vid-selfoff { background: #18181b; }
.vid-offic { width: 40px; height: 40px; border-radius: 20px; background: rgba(255,255,255,.1); color: #cecece; display: flex; align-items: center; justify-content: center; }
/* Samtaleskjermen oppå videoen */
.callscreen.vid { background: transparent; padding-top: 58px; }
.callscreen.vid::before { display: none; }
.callscreen.vid .cs-top { align-items: flex-start; text-align: left; padding-right: 110px; }
.callscreen.vid .cs-top > .av { display: none; }
.callscreen.vid .cs-name { font-size: 22px; margin-top: 0; text-shadow: 0 1px 6px rgba(0,0,0,.7); }
.callscreen.vid .cs-status, .callscreen.vid .cs-num { text-shadow: 0 1px 5px rgba(0,0,0,.8); }
.callscreen.vid .cs-btns { margin: 0 -30px -70px; padding: 26px 30px 54px; background: linear-gradient(to top, rgba(0,0,0,.78), rgba(0,0,0,.45) 70%, transparent); }
.callscreen.vid .cs-opts { display: flex; justify-content: space-between; gap: 4px; margin: 0 -14px; width: calc(100% + 28px); }
.callscreen.vid .cs-opts .callbtn { width: 48px; height: 48px; border-radius: 24px; background: rgba(0,0,0,.45); }
.callscreen.vid .cs-opts .callbtn.dark.on { background: #fff; color: #111; }
.callscreen.vid .cs-opts .callbtn svg { width: 21px; height: 21px; }
.callscreen.vid .cbw { font-size: 11px; color: #fff; text-shadow: 0 1px 4px rgba(0,0,0,.8); }
/* Skjult samtale: lite videovindu */
.vidcall.mini { inset: auto; top: 52px; right: 12px; width: 96px; height: 170px; border-radius: 16px; z-index: 67; cursor: pointer; box-shadow: 0 6px 22px rgba(0,0,0,.5), 0 0 0 1.5px rgba(255,255,255,.2); }
.vidcall.mini .vid-self { display: none; }
.vidcall.mini .vid-over .av { width: 44px !important; height: 44px !important; font-size: 17px !important; }
.vidcall.mini .vid-over .vid-ot { font-size: 11px; text-align: center; padding: 0 6px; }
/* Utbrettet U-Fold: hele bildet, deg selv større */
.vidcall.wide .vid-remote { object-fit: contain; }
.vidcall.wide .vid-self { width: 120px; height: 214px; }
.vidcall.wide.mini { width: 120px; height: 150px; }
/* Spørsmål om video, og merket på anrop */
.cs-vask { display: flex; align-items: center; gap: 8px; margin-top: 14px; padding: 8px 8px 8px 12px; border-radius: 18px; background: rgba(255,255,255,.1); }
.cs-vask .vq-ic { color: var(--acc); display: flex; }
.cs-vask .vq-t { font-size: 13.5px; font-weight: 700; margin-right: 4px; }
.cs-vask button { border: 0; border-radius: 14px; padding: 7px 12px; font: 700 13px var(--fb); cursor: pointer; }
.cs-vask .vq-no { background: rgba(255,255,255,.12); color: #fff; }
.cs-vask .vq-yes { background: #22c55e; color: #fff; }
.cs-vtag { display: inline-flex; align-items: center; gap: 6px; margin-bottom: 14px; padding: 5px 11px; border-radius: 13px; background: rgba(255,255,255,.1); font-size: 12px; font-weight: 800; letter-spacing: .3px; color: #fff; }
.cs-vtag svg { color: var(--acc); }