:root {
  color-scheme: dark;
  --bg: #070b10;
  --bg-2: #0b1118;
  --panel: rgba(18, 25, 34, 0.94);
  --panel-2: rgba(23, 31, 42, 0.92);
  --panel-soft: rgba(255,255,255,0.045);
  --line: rgba(220, 190, 151, 0.16);
  --line-strong: rgba(220, 190, 151, 0.28);
  --text: #f6efe6;
  --muted: #aab2bc;
  --gold: #d1aa75;
  --red: #ef4f4a;
  --red-2: #bc2f2f;
  --green: #70dd8d;
  --green-2: #2e9d58;
  --violet: #8c82f7;
  --cyan: #6fd8f5;
  --shadow: 0 20px 60px rgba(0,0,0,.42);
  --radius: 20px;
  --font-scale: 1;
  --brightness: 1;
  --contrast: 1;
  --red-strength: 1;
  --green-strength: 1;
  --safe-top: max(14px, env(safe-area-inset-top));
  --safe-bottom: max(14px, env(safe-area-inset-bottom));
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; min-height: 100%; background: var(--bg); }
body {
  font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI", sans-serif;
  color: var(--text);
  font-size: calc(16px * var(--font-scale));
  overscroll-behavior: none;
  filter: brightness(var(--brightness)) contrast(var(--contrast));
}
button, input, textarea, select { font: inherit; }
button { color: inherit; }
button:disabled { opacity:.42; cursor:not-allowed; }
a { color: inherit; }

body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(circle at 20% 0%, rgba(239,79,74,.09), transparent 28%),
    radial-gradient(circle at 85% 22%, rgba(112,221,141,.065), transparent 24%),
    radial-gradient(circle at 50% 100%, rgba(209,170,117,.07), transparent 34%),
    linear-gradient(180deg, #070a0f, #0a1017 48%, #070b10);
  z-index: -2;
}
body::after {
  content: "";
  position: fixed;
  inset: 0;
  opacity: .15;
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.18'/%3E%3C/svg%3E");
  z-index: -1;
}

:root[data-mode="ro"] body::before { opacity:.72; }
:root[data-mode="fokus"] body::after { opacity:.07; }
:root[data-mode="rap"] body::before { background:radial-gradient(circle at 20% 0%, rgba(239,79,74,.16), transparent 34%),radial-gradient(circle at 84% 18%, rgba(112,221,141,.1), transparent 30%),linear-gradient(180deg,#090b10,#101018 52%,#070b10); }
:root[data-mode="fokus"] .hero-button,:root[data-mode="fokus"] .room-card,:root[data-mode="fokus"] .compact-button,:root[data-mode="fokus"] .secondary-button { min-height:48px; }
:root[data-mode="rap"] .room-card.red,:root[data-mode="rap"] .hero-button.red { box-shadow:0 12px 34px rgba(239,79,74,.2); }
:root.reduce-motion *, :root.reduce-motion *::before, :root.reduce-motion *::after { animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; scroll-behavior:auto !important; }

.room-card.red,.hero-button.red,.record-orb { filter:saturate(var(--red-strength)); }
.room-card.green,.hero-button.green,.petter-orb { filter:saturate(var(--green-strength)); }

#app { min-height: 100dvh; }
.app-shell {
  min-height: 100dvh;
  width: min(100%, 760px);
  margin: 0 auto;
  padding: var(--safe-top) 14px calc(94px + var(--safe-bottom));
  position: relative;
}
@media (min-width: 900px) {
  .app-shell { width: min(100%, 1120px); padding-inline: 24px; }
  .home-layout { display: grid; grid-template-columns: 1.05fr .95fr; gap: 18px; align-items: start; }
  .room-wide { max-width: 1020px; margin: 0 auto; }
  .draw-layout { display: grid; grid-template-columns: minmax(0,1fr) 300px; gap: 16px; align-items: start; }
  .draw-side { position: sticky; top: 18px; }
}

.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 6px 2px 15px;
}
.brand { display:flex; align-items:center; gap:12px; min-width:0; }
.petter-orb { position:relative; display:inline-grid; place-items:center; flex:0 0 auto; width:28px; height:28px; border-radius:50%; background:radial-gradient(circle at 34% 28%,#e4ffea 0 7%,#76ee9a 18%,#2ca45b 54%,#082515 100%); border:1px solid rgba(180,255,199,.55); box-shadow:0 0 calc(22px * var(--green-strength)) rgba(112,221,141,.52),inset 0 0 11px rgba(255,255,255,.28); }
.petter-orb::after { content:""; position:absolute; inset:-7px; border-radius:50%; border:1px solid rgba(112,221,141,.14); }
.petter-orb span { width:5px; height:5px; border-radius:50%; background:white; opacity:.82; transform:translate(-4px,-4px); }
.petter-orb.large { width:52px; height:52px; box-shadow:0 0 calc(34px * var(--green-strength)) rgba(112,221,141,.48),inset 0 0 18px rgba(255,255,255,.3); }
.petter-orb.small { width:30px; height:30px; }
.avatar-wrap { position:relative; flex:0 0 auto; }
.avatar { width:52px; height:52px; border-radius:50%; object-fit:cover; border:1px solid rgba(209,170,117,.34); box-shadow:0 10px 30px rgba(0,0,0,.35); }
.online-dot { position:absolute; right:0; bottom:2px; width:13px; height:13px; border-radius:50%; background:var(--green); border:3px solid var(--bg); box-shadow:0 0 14px rgba(112,221,141,.65); }
.brand-copy { min-width:0; }
.brand-title { margin:0; font-family:Inter,ui-sans-serif,-apple-system,sans-serif; font-size:1.85rem; font-weight:820; line-height:.95; letter-spacing:-.045em; }
.brand-sub { margin:6px 0 0; color:var(--gold); font-size:.9rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.aron-mark { letter-spacing:.42em; color:var(--red); font-weight:650; font-size:.82rem; text-transform:uppercase; white-space:nowrap; text-shadow:0 0 18px rgba(239,79,74,.25); }

.icon-button, .back-button {
  border:1px solid var(--line);
  background:rgba(255,255,255,.045);
  width:44px; height:44px;
  border-radius:50%;
  display:grid; place-items:center;
  cursor:pointer;
  transition:.18s ease;
}
.icon-button:active, .back-button:active { transform:scale(.95); background:rgba(255,255,255,.09); }
.icon-glyph { font-size:1.25rem; line-height:1; }

.room-header { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:4px 0 14px; }
.room-title-wrap { display:flex; align-items:center; gap:10px; min-width:0; }
.room-title { margin:0; font-size:1.15rem; letter-spacing:-.01em; }
.room-kicker { margin:3px 0 0; color:var(--muted); font-size:.78rem; }

.card {
  background:linear-gradient(180deg, rgba(26,34,44,.96), rgba(15,21,29,.96));
  border:1px solid var(--line);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  overflow:hidden;
}
.card + .card { margin-top:14px; }
.card-inner { padding:16px; }
.section-title { margin:0; font-size:1rem; display:flex; align-items:center; gap:8px; }
.section-note { margin:5px 0 0; color:var(--muted); font-size:.82rem; line-height:1.45; }
.card-head { display:flex; align-items:flex-start; justify-content:space-between; gap:12px; margin-bottom:13px; }
.badge { display:inline-flex; align-items:center; gap:6px; border:1px solid var(--line); background:rgba(255,255,255,.055); border-radius:999px; padding:6px 9px; font-size:.72rem; color:var(--muted); white-space:nowrap; }
.badge.red { color:#ffaaa7; border-color:rgba(239,79,74,.26); background:rgba(239,79,74,.08); }
.badge.green { color:#a6f2b8; border-color:rgba(112,221,141,.25); background:rgba(112,221,141,.08); }

.hero-grid { display:grid; grid-template-columns:1.18fr .82fr; gap:10px; }
.clock-card, .weather-card { min-height:105px; padding:15px; border-radius:18px; background:rgba(255,255,255,.045); border:1px solid var(--line); display:flex; flex-direction:column; justify-content:space-between; }
.clock-time { font-size:2.35rem; letter-spacing:-.055em; line-height:1; font-variant-numeric:tabular-nums; }
.clock-date, .weather-place { color:var(--muted); font-size:.78rem; }
.weather-main { display:flex; align-items:center; justify-content:space-between; gap:8px; }
.weather-icon { font-size:2.05rem; }
.weather-temp { font-size:1.75rem; letter-spacing:-.04em; }

.home-main { display:grid; gap:14px; }
.home-hero { position:relative; overflow:hidden; border-color:rgba(112,221,141,.2); }
.home-hero::after { content:""; position:absolute; width:250px; height:250px; border-radius:50%; right:-120px; top:-130px; background:radial-gradient(circle,rgba(112,221,141,.16),transparent 68%); pointer-events:none; }
.hero-copy { max-width:560px; }
.hero-kicker { display:block; color:var(--green); font-size:.67rem; letter-spacing:.22em; font-weight:760; margin-bottom:9px; }
.hero-copy h2 { margin:0; font-size:clamp(1.55rem,6vw,2.5rem); line-height:1.02; letter-spacing:-.045em; max-width:620px; }
.hero-copy p { margin:10px 0 0; color:#c0c8d0; font-size:.9rem; line-height:1.45; }
.hero-actions { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; margin-top:18px; }
.hero-button { min-height:72px; border-radius:16px; border:1px solid var(--line); background:rgba(255,255,255,.045); display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6px; cursor:pointer; font-weight:700; }
.hero-button span { font-size:1.25rem; }
.hero-button.green { color:#bdf4ca; border-color:rgba(112,221,141,.26); background:rgba(112,221,141,.075); }
.hero-button.red { color:#ffc0bd; border-color:rgba(239,79,74,.27); background:rgba(239,79,74,.08); }
.hero-button.gold { color:#f0d1a8; border-color:rgba(209,170,117,.28); background:rgba(209,170,117,.08); }
.status-strip { display:grid; grid-template-columns:1.15fr .85fr 1fr; gap:8px; }
.status-strip > div,.status-strip > button { min-height:72px; border-radius:15px; border:1px solid var(--line); background:rgba(255,255,255,.035); padding:11px; color:inherit; display:flex; flex-direction:column; justify-content:center; text-align:left; }
.status-strip strong { font-size:1.02rem; line-height:1.1; }
.status-strip span { margin-top:5px; color:var(--muted); font-size:.66rem; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.room-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:9px; }
.room-card { position:relative; min-height:92px; border-radius:17px; border:1px solid var(--line); background:linear-gradient(145deg,rgba(255,255,255,.055),rgba(255,255,255,.025)); padding:13px; display:grid; grid-template-columns:38px 1fr 16px; align-items:center; gap:10px; text-align:left; cursor:pointer; }
.room-card:active { transform:scale(.985); }
.room-symbol { width:38px; height:38px; display:grid; place-items:center; border-radius:13px; background:rgba(255,255,255,.055); font-size:1.18rem; }
.room-card strong,.room-card small { display:block; }
.room-card strong { font-size:.88rem; }
.room-card small { margin-top:4px; color:var(--muted); font-size:.66rem; line-height:1.3; }
.room-arrow { color:#74808c; font-size:1.4rem; }
.room-card.green .room-symbol { color:var(--green); background:rgba(112,221,141,.08); }
.room-card.red .room-symbol { color:var(--red); background:rgba(239,79,74,.08); }
.room-card.gold .room-symbol { color:var(--gold); background:rgba(209,170,117,.08); }
.room-card.cyan .room-symbol { color:var(--cyan); background:rgba(111,216,245,.08); }
.room-card.violet .room-symbol { color:var(--violet); background:rgba(140,130,247,.08); }
.install-card .card-inner { display:flex; align-items:center; justify-content:space-between; gap:12px; }
.install-card .card-inner > div { display:flex; align-items:center; gap:12px; min-width:0; }
.install-card strong,.install-card small { display:block; }
.install-card strong { font-size:.82rem; }
.install-card small { color:var(--muted); font-size:.68rem; margin-top:4px; }
.install-card .compact-button { width:auto; flex:0 0 auto; }

.rikke-card { position:relative; }
.rikke-card::after { content:"✦"; position:absolute; right:15px; bottom:10px; color:rgba(209,170,117,.7); font-size:1.1rem; }
.task-row { display:flex; align-items:center; gap:10px; padding:9px 0; border-bottom:1px solid rgba(255,255,255,.055); }
.task-row:last-child { border-bottom:0; }
.task-check { width:22px; height:22px; border-radius:50%; border:1px solid rgba(255,255,255,.24); background:transparent; flex:0 0 auto; display:grid; place-items:center; cursor:pointer; }
.task-check.done { border-color:var(--green); background:rgba(112,221,141,.14); color:var(--green); }
.task-copy { flex:1; min-width:0; }
.task-copy > .task-text, .task-copy > .task-meta { display:block; }
.task-text { font-size:.9rem; line-height:1.35; }
.task-text.done { color:#7f8893; text-decoration:line-through; }
.task-meta { font-size:.7rem; color:var(--muted); margin-top:3px; }

.quick-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:9px; }
.quick-button {
  border:1px solid var(--line);
  background:rgba(255,255,255,.045);
  border-radius:15px;
  min-height:78px;
  padding:11px 7px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:7px;
  text-align:center;
  cursor:pointer;
  transition:.18s ease;
}
.quick-button:active { transform:translateY(1px) scale(.98); background:rgba(255,255,255,.085); }
.quick-button .qicon { font-size:1.45rem; }
.quick-button .qlabel { font-size:.75rem; color:#e4e8ec; line-height:1.15; }
.quick-button.red .qicon { color:var(--red); }
.quick-button.green .qicon { color:var(--green); }
.quick-button.gold .qicon { color:var(--gold); }
.quick-button.violet .qicon { color:var(--violet); }

.tool-list { display:grid; grid-template-columns:repeat(2,1fr); gap:8px; }
.tool-link { text-decoration:none; display:flex; align-items:center; gap:9px; min-height:48px; padding:10px 12px; border-radius:13px; border:1px solid var(--line); background:rgba(255,255,255,.04); cursor:pointer; overflow:hidden; }
.tool-link:active { background:rgba(255,255,255,.08); }
.tool-dot { width:10px; height:10px; border-radius:50%; flex:0 0 auto; box-shadow:0 0 13px currentColor; }
.tool-label { font-size:.82rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

.primary-button, .secondary-button, .danger-button {
  width:100%; min-height:52px; border-radius:15px; border:0; padding:12px 16px; cursor:pointer; display:flex; align-items:center; justify-content:center; gap:9px; font-weight:650; transition:.18s ease;
}
.primary-button { background:linear-gradient(180deg, #ef514d, #be3031); color:white; box-shadow:0 14px 35px rgba(190,48,49,.23); }
.primary-button:active { transform:scale(.985); }
.secondary-button { background:rgba(255,255,255,.055); border:1px solid var(--line); color:var(--text); }
.danger-button { background:rgba(239,79,74,.11); border:1px solid rgba(239,79,74,.3); color:#ffaaa7; }
.button-row { display:flex; gap:9px; }
.button-row > * { flex:1; }
.compact-button { min-height:42px; border-radius:12px; border:1px solid var(--line); background:rgba(255,255,255,.05); color:var(--text); padding:9px 12px; cursor:pointer; display:inline-flex; align-items:center; justify-content:center; gap:7px; }
.compact-button:active { background:rgba(255,255,255,.09); }

.golf-chip { display:flex; align-items:center; gap:10px; padding:12px 14px; border:1px solid rgba(239,79,74,.18); background:rgba(239,79,74,.055); border-radius:16px; margin-top:14px; cursor:pointer; }
.golf-car { font-size:1.6rem; filter:saturate(1.2); }
.golf-copy strong { display:block; font-size:.86rem; }
.golf-copy span { color:var(--muted); font-size:.74rem; }

.bottom-nav {
  position:fixed;
  z-index:40;
  left:50%; transform:translateX(-50%);
  bottom:0;
  width:min(100%, 760px);
  padding:10px 13px var(--safe-bottom);
  background:linear-gradient(180deg, rgba(7,11,16,0), rgba(7,11,16,.94) 26%, rgba(7,11,16,.985));
  display:grid;
  grid-template-columns:repeat(5,1fr);
  gap:4px;
  backdrop-filter:blur(16px);
}
@media (min-width:900px) { .bottom-nav { width:min(100%, 1120px); } }
.nav-button { border:0; background:transparent; color:#7f8893; min-height:56px; border-radius:14px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:4px; cursor:pointer; font-size:.68rem; }
.nav-button .nav-icon { font-size:1.28rem; }
.nav-button.active { color:var(--red); background:rgba(239,79,74,.08); }
.nav-button.draw.active { color:var(--green); background:rgba(112,221,141,.08); }

.form-field { margin-top:12px; }
.form-label { display:block; margin-bottom:6px; color:#d8dde2; font-size:.8rem; }
.input, .textarea, .select {
  width:100%; border-radius:14px; border:1px solid var(--line); background:#0c1219; color:var(--text); padding:12px 13px; outline:none;
}
.input:focus, .textarea:focus, .select:focus { border-color:rgba(112,221,141,.46); box-shadow:0 0 0 3px rgba(112,221,141,.08); }
.textarea { min-height:170px; resize:vertical; line-height:1.55; }
.range { width:100%; accent-color:var(--green); }
.switch-row { display:flex; align-items:center; justify-content:space-between; gap:14px; padding:12px 0; border-bottom:1px solid rgba(255,255,255,.055); }
.switch-row:last-child { border-bottom:0; }
.switch { width:50px; height:28px; border-radius:999px; background:#252e38; border:1px solid var(--line); padding:3px; cursor:pointer; transition:.2s; }
.switch::after { content:""; display:block; width:20px; height:20px; border-radius:50%; background:#d6dce2; transition:.2s; }
.switch.on { background:rgba(112,221,141,.28); border-color:rgba(112,221,141,.45); }
.switch.on::after { transform:translateX(21px); background:var(--green); box-shadow:0 0 14px rgba(112,221,141,.45); }

.reader-stage { min-height:120px; border-radius:18px; padding:14px; background:rgba(0,0,0,.22); border:1px solid var(--line); }
.reader-status { display:flex; align-items:center; gap:8px; color:var(--muted); font-size:.8rem; margin-bottom:9px; }
.reader-dot { width:9px; height:9px; border-radius:50%; background:#66707c; }
.reader-dot.playing { background:var(--green); box-shadow:0 0 12px rgba(112,221,141,.7); animation:pulse 1.4s infinite; }
@keyframes pulse { 50% { opacity:.45; } }
.reader-preview { margin:0; color:#d8dde2; line-height:1.6; max-height:120px; overflow:auto; font-family:Georgia, serif; }
.ocr-progress { margin-top:9px; display:flex; align-items:center; gap:9px; color:var(--muted); font-size:.72rem; }
.ocr-progress[hidden] { display:none; }
.ocr-progress span { width:13px; height:13px; border-radius:50%; border:2px solid rgba(255,255,255,.18); border-top-color:var(--green); animation:spin .8s linear infinite; }
@keyframes spin { to { transform:rotate(360deg); } }

.mode-quick-strip { display:grid; grid-template-columns:1fr 1fr; gap:8px; margin:12px 0; }
.mode-quick-strip button { min-height:48px; border:1px solid rgba(239,79,74,.28); border-radius:14px; background:linear-gradient(135deg,rgba(239,79,74,.13),rgba(112,221,141,.07)); color:var(--text); cursor:pointer; font-weight:720; }

.draw-room { padding-bottom:24px; }
.draw-card { overflow:visible; position:relative; }
.canvas-toolbar { display:flex; gap:7px; overflow-x:auto; padding:10px; scrollbar-width:none; border-bottom:1px solid var(--line); }
.canvas-toolbar::-webkit-scrollbar { display:none; }
.tool-button { flex:0 0 auto; min-width:53px; height:54px; border-radius:14px; border:1px solid var(--line); background:rgba(255,255,255,.045); display:flex; flex-direction:column; align-items:center; justify-content:center; gap:4px; cursor:pointer; color:#cbd2d9; }
.tool-button.active { color:var(--red); border-color:rgba(239,79,74,.42); background:rgba(239,79,74,.11); box-shadow:0 0 22px rgba(239,79,74,.08); }
.tool-button[data-tool="bubble"].active, .tool-button[data-tool="move"].active { color:var(--green); border-color:rgba(112,221,141,.4); background:rgba(112,221,141,.1); }
.tool-button small { font-size:.63rem; }
.tool-button .tool-symbol { font-size:1.18rem; }

.bubble-rail { display:flex; gap:8px; padding:10px 12px; overflow-x:auto; scrollbar-width:none; }
.bubble-rail::-webkit-scrollbar { display:none; }
.pop-bubble { flex:0 0 auto; width:38px; height:38px; border-radius:50%; border:1px solid rgba(255,255,255,.35); background:radial-gradient(circle at 30% 25%, rgba(255,255,255,.62), rgba(255,255,255,.12) 27%, rgba(255,255,255,.035) 66%, rgba(0,0,0,.26)); box-shadow:inset 0 0 12px rgba(255,255,255,.13), 0 6px 15px rgba(0,0,0,.28); cursor:pointer; transition:.12s ease; }
.pop-bubble.red { background:radial-gradient(circle at 30% 25%, #ffb1ae, #ef4f4a 26%, #751a1f 74%, #26080a); box-shadow:0 0 20px rgba(239,79,74,.35), inset 0 0 12px rgba(255,255,255,.28); }
.pop-bubble.green { background:radial-gradient(circle at 30% 25%, #c4ffd0, #70dd8d 26%, #216e3c 74%, #071f10); box-shadow:0 0 20px rgba(112,221,141,.35), inset 0 0 12px rgba(255,255,255,.28); }
.pop-bubble.popped { transform:scale(.55); opacity:.22; box-shadow:none; }

.canvas-wrap { position:relative; padding:0 10px 10px; }
.canvas-frame { position:relative; width:100%; aspect-ratio:3/4; max-height:640px; border-radius:18px; overflow:hidden; background:#efe4d2; border:1px solid rgba(209,170,117,.36); box-shadow:inset 0 0 40px rgba(93,58,31,.11), 0 18px 50px rgba(0,0,0,.3); }
#drawCanvas { width:100%; height:100%; display:block; touch-action:none; cursor:crosshair; }
.canvas-lock { position:absolute; left:12px; top:12px; display:flex; align-items:center; gap:6px; border-radius:999px; padding:7px 9px; background:rgba(7,11,16,.72); color:#e5d7c6; font-size:.68rem; border:1px solid rgba(255,255,255,.16); backdrop-filter:blur(10px); pointer-events:none; }
.canvas-hint { position:absolute; left:50%; bottom:14px; transform:translateX(-50%); border-radius:999px; padding:7px 11px; background:rgba(7,11,16,.68); color:#f0e5d7; font-size:.68rem; border:1px solid rgba(255,255,255,.12); white-space:nowrap; pointer-events:none; opacity:.85; }
.canvas-lock,.canvas-hint { z-index:5; }

.draw-controls { padding:12px; border-top:1px solid var(--line); }
.palette { display:flex; align-items:center; gap:9px; overflow-x:auto; padding-bottom:4px; }
.color-swatch { width:34px; height:34px; border-radius:50%; border:2px solid transparent; cursor:pointer; box-shadow:inset 0 0 0 1px rgba(255,255,255,.23); }
.color-swatch.active { border-color:white; transform:scale(1.08); }
.draw-actions { display:grid; grid-template-columns:repeat(4,1fr); gap:8px; margin-top:12px; }
.draw-action { min-height:45px; border-radius:12px; border:1px solid var(--line); background:rgba(255,255,255,.045); cursor:pointer; font-size:.74rem; display:flex; align-items:center; justify-content:center; gap:6px; }

html.draw-gesture-active,body.draw-gesture-active { overflow:hidden !important; overscroll-behavior:none !important; }
.draw-toolbox { border-bottom:1px solid var(--line); }
.draw-toolbox summary { cursor:pointer; list-style:none; display:flex; align-items:center; justify-content:space-between; padding:11px 13px; font-size:.78rem; font-weight:720; }
.draw-toolbox summary::-webkit-details-marker { display:none; }
.draw-toolbox summary span { color:var(--muted); font-size:.64rem; font-weight:500; }
.shape-picker { display:flex; gap:7px; overflow-x:auto; padding:0 10px 10px; scrollbar-width:none; }
.shape-picker::-webkit-scrollbar { display:none; }
.shape-chip { flex:0 0 auto; min-height:40px; border-radius:999px; border:1px solid var(--line); background:rgba(255,255,255,.04); padding:8px 11px; cursor:pointer; font-size:.69rem; }
.shape-chip.active { color:var(--green); border-color:rgba(112,221,141,.38); background:rgba(112,221,141,.09); }
.draw-mini-controls { display:flex; align-items:center; justify-content:space-between; gap:14px; padding:0 12px 12px; }
.draw-mini-controls .palette { min-width:0; flex:1; }
.draw-mini-controls > label { width:110px; color:var(--muted); font-size:.68rem; }
.canvas-frame { aspect-ratio:5/7; max-height:760px; }
.draw-surface,#drawCanvas,#shapeLayer { position:absolute; inset:0; width:100%; height:100%; touch-action:none !important; overscroll-behavior:contain; user-select:none; -webkit-user-select:none; }
.draw-surface { z-index:1; overflow:hidden; }
#drawCanvas { z-index:1; cursor:crosshair; }
#shapeLayer { z-index:2; overflow:visible; }
.shape-object { pointer-events:all; cursor:grab; }
.shape-object:active { cursor:grabbing; }
.shape-object.area-hit .shape-path { stroke:#ef4f4a; stroke-width:10; filter:drop-shadow(0 0 10px rgba(239,79,74,.6)); }
.shape-text { pointer-events:all; paint-order:stroke; stroke:rgba(255,255,255,.05); stroke-width:1px; }
.selection-box { fill:none; stroke:#72a7ff; stroke-width:4; stroke-dasharray:16 10; pointer-events:none; }
.handle-hit { fill:#fff; opacity:.001; pointer-events:all; }
.corner-handle { fill:#5d9cff; stroke:#dceaff; stroke-width:4; pointer-events:none; filter:drop-shadow(0 4px 7px rgba(0,0,0,.45)); }
.side-handle { fill:#d8ad63; stroke:#fff0cb; stroke-width:4; pointer-events:none; filter:drop-shadow(0 4px 7px rgba(0,0,0,.45)); }
.trail-handle { fill:#70dd8d; stroke:#e7ffed; stroke-width:4; pointer-events:none; }
.trail-guide { stroke:#70dd8d; stroke-width:4; stroke-dasharray:13 10; opacity:.75; pointer-events:none; }
.delete-area { fill:rgba(239,79,74,.13); stroke:#ef4f4a; stroke-width:5; stroke-dasharray:18 12; pointer-events:none; }
.area-mode { cursor:crosshair; }
.delete-actions { display:grid; grid-template-columns:repeat(3,1fr); gap:7px; padding:10px; border-top:1px solid var(--line); }
.delete-actions button { min-height:44px; border-radius:12px; border:1px solid rgba(239,79,74,.23); background:rgba(239,79,74,.075); color:#ffc0bd; font-size:.68rem; cursor:pointer; }
.record-orb { position:absolute; z-index:12; right:22px; bottom:76px; width:58px; height:58px; border-radius:50%; border:2px solid rgba(255,255,255,.7); background:radial-gradient(circle at 38% 32%,#ffaaa7,#ef4f4a 45%,#8f1d23); color:white; box-shadow:0 10px 32px rgba(239,79,74,.42); display:grid; place-items:center; cursor:pointer; }
.record-orb span { font-size:1.18rem; }
.record-orb.inline { position:relative; inset:auto; width:50px; height:50px; flex:0 0 auto; }
.record-orb.recording { animation:recordPulse 1.15s ease-in-out infinite; }
@keyframes recordPulse { 50% { transform:scale(1.08); box-shadow:0 0 0 10px rgba(239,79,74,.13),0 12px 38px rgba(239,79,74,.58); } }
.recording-time { position:absolute; z-index:13; right:18px; bottom:54px; min-width:66px; text-align:center; color:#ffd2cf; font-size:.68rem; font-variant-numeric:tabular-nums; }
.object-inspector.is-empty .selection-controls { opacity:.36; pointer-events:none; }
.selection-controls,.trail-controls { display:grid; gap:10px; margin-top:13px; }
.selection-controls .textarea { min-height:82px; margin-top:6px; }
.control-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; }
.control-grid > label { color:var(--muted); font-size:.67rem; }
.control-grid input[type="color"] { display:block; width:100%; height:40px; padding:2px; margin-top:5px; border:1px solid var(--line); border-radius:10px; background:#0c1219; }
.control-grid select,.selection-controls select { width:100%; min-height:40px; border:1px solid var(--line); border-radius:10px; background:#0c1219; color:var(--text); }
.toggle-chip.on { color:var(--green); border-color:rgba(112,221,141,.4); background:rgba(112,221,141,.09); }
.trail-controls label { display:grid; grid-template-columns:105px 1fr; align-items:center; gap:8px; color:var(--muted); font-size:.67rem; }
.trail-controls.is-disabled { opacity:.4; }
.session-list { display:grid; gap:8px; margin-top:12px; }
.session-row { display:flex; align-items:center; justify-content:space-between; gap:8px; padding:10px; border:1px solid var(--line); border-radius:13px; background:rgba(255,255,255,.035); }
.session-row strong,.session-row span { display:block; }
.session-row strong { font-size:.76rem; }
.session-row span { color:var(--muted); font-size:.62rem; margin-top:4px; }
.session-actions { display:flex; gap:4px; flex-wrap:wrap; justify-content:flex-end; }
.session-actions button { min-width:35px; min-height:35px; border-radius:9px; border:1px solid var(--line); background:#111821; color:var(--text); font-size:.66rem; }
.session-final-image { width:100%; display:block; border-radius:15px; border:1px solid var(--line); background:#efe4d2; }
.session-detail-audio { width:100%; margin-top:12px; }

.petter-help { padding:15px; }
.petter-helper-head { display:flex; align-items:center; gap:10px; margin-bottom:12px; }
.helper-avatar { width:44px; height:44px; border-radius:50%; object-fit:cover; border:1px solid var(--line-strong); }
.helper-bubble { background:rgba(255,255,255,.05); border:1px solid var(--line); border-radius:14px 14px 14px 4px; padding:10px 12px; color:#dfe4e8; font-size:.82rem; line-height:1.45; }
.helper-actions { display:grid; gap:8px; margin-top:12px; }

.family-photo { position:relative; min-height:260px; border-radius:18px; overflow:hidden; background:linear-gradient(135deg, rgba(239,79,74,.13), rgba(112,221,141,.08)), #111820; border:1px solid var(--line); display:grid; place-items:center; }
.family-photo img { width:100%; height:100%; object-fit:cover; position:absolute; inset:0; }
.family-placeholder { text-align:center; padding:24px; max-width:280px; }
.family-initials { display:flex; justify-content:center; margin-bottom:16px; }
.initial-circle { width:64px; height:64px; border-radius:50%; background:#1a232e; border:2px solid var(--line-strong); display:grid; place-items:center; font-family:Georgia,serif; font-size:1.4rem; margin-left:-8px; box-shadow:0 10px 24px rgba(0,0,0,.25); }
.initial-circle:first-child { margin-left:0; }
.family-overlay { position:absolute; inset:auto 0 0; padding:22px 16px 14px; background:linear-gradient(transparent, rgba(4,7,10,.88)); display:flex; align-items:flex-end; justify-content:space-between; gap:10px; }
.family-names { display:flex; gap:8px; flex-wrap:wrap; }
.name-chip { background:rgba(7,11,16,.65); border:1px solid rgba(255,255,255,.16); border-radius:999px; padding:6px 9px; font-size:.73rem; backdrop-filter:blur(8px); }

.shortcut-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:9px; }
.shortcut-card { position:relative; min-height:86px; border-radius:16px; border:1px solid var(--line); background:rgba(255,255,255,.045); padding:12px; display:flex; flex-direction:column; justify-content:space-between; cursor:pointer; overflow:hidden; }
.shortcut-card::after { content:"↗"; position:absolute; right:10px; top:8px; color:#73808d; font-size:.8rem; }
.shortcut-card strong { font-size:.86rem; padding-right:18px; }
.shortcut-card span { color:var(--muted); font-size:.68rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.shortcut-actions { position:absolute; right:7px; bottom:7px; display:flex; gap:4px; }
.mini-icon-button { width:28px; height:28px; border-radius:9px; border:1px solid var(--line); background:#10161e; color:#aab2bc; cursor:pointer; }

.reminder-item { padding:12px 0; border-bottom:1px solid rgba(255,255,255,.06); display:flex; gap:10px; align-items:flex-start; }
.reminder-item:last-child { border-bottom:0; }
.reminder-main { flex:1; min-width:0; }
.reminder-title { font-size:.9rem; line-height:1.35; }
.reminder-meta { color:var(--muted); font-size:.7rem; margin-top:4px; }

.mixer-track { padding:14px; background:rgba(255,255,255,.04); border:1px solid var(--line); border-radius:16px; }
.mixer-track + .mixer-track { margin-top:10px; }
.track-head { display:flex; justify-content:space-between; align-items:center; gap:10px; margin-bottom:10px; }
.track-name { font-weight:650; font-size:.9rem; }
.track-file { color:var(--muted); font-size:.7rem; max-width:180px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
audio { width:100%; height:38px; margin-top:8px; }
.preset-row { display:flex; gap:8px; overflow-x:auto; margin-top:12px; }
.preset-chip { flex:0 0 auto; border:1px solid var(--line); background:rgba(255,255,255,.045); border-radius:999px; padding:8px 11px; cursor:pointer; font-size:.75rem; }
.studio-record-head { display:flex; align-items:center; justify-content:space-between; gap:12px; }
.studio-record-head > div { display:flex; align-items:center; gap:12px; }
.studio-record-head strong,.studio-record-head small { display:block; }
.studio-record-head small { margin-top:4px; color:var(--muted); font-size:.68rem; }
#studioUnsavedActions { margin-top:12px; align-items:center; }
#studioUnsavedActions .input { min-width:0; }

.note-toolbar { display:grid; grid-template-columns:1fr auto; gap:9px; }
.note-toolbar .primary-button { width:auto; min-height:46px; }
.note-editor .textarea { min-height:190px; margin-top:10px; }
.note-image,.idea-preview { width:100%; display:block; margin-top:12px; border-radius:14px; border:1px solid var(--line); }
.idea-preview[hidden] { display:none; }
.note-audio { margin-top:12px; padding:10px; border-radius:13px; border:1px solid var(--line); background:rgba(255,255,255,.035); }
.note-audio span { color:var(--red); font-size:.72rem; }
.note-excerpt { margin:7px 0 0; line-height:1.45; color:#d1d7dd; white-space:pre-wrap; }
.idea-capture-row { display:flex; align-items:center; gap:10px; margin-top:12px; }
.idea-capture-row > span { flex:1; color:var(--muted); font-size:.72rem; }

.mail-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:9px; }
.mail-provider { min-height:130px; border-radius:17px; border:1px solid var(--line); background:rgba(255,255,255,.04); display:flex; flex-direction:column; align-items:flex-start; justify-content:center; padding:15px; text-align:left; cursor:pointer; }
.mail-provider > span { width:38px; height:38px; border-radius:12px; display:grid; place-items:center; color:white; font-weight:800; background:linear-gradient(145deg,#407cff,#2551a8); margin-bottom:11px; }
.mail-provider:nth-child(2)>span { background:linear-gradient(145deg,#ef4f4a,#b82f31); }
.mail-provider strong,.mail-provider small { display:block; }
.mail-provider strong { font-size:.82rem; }
.mail-provider small { margin-top:5px; color:var(--muted); font-size:.66rem; }

.mode-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; margin-top:13px; }
.mode-card { min-height:106px; border-radius:15px; border:1px solid var(--line); background:rgba(255,255,255,.035); padding:12px; text-align:left; cursor:pointer; }
.mode-card strong,.mode-card small { display:block; }
.mode-card strong { font-size:.8rem; }
.mode-card small { margin-top:6px; color:var(--muted); font-size:.64rem; line-height:1.35; }
.mode-card.active { border-color:rgba(112,221,141,.4); background:rgba(112,221,141,.08); box-shadow:0 0 26px rgba(112,221,141,.08); }
.shortcut-card.is-hidden { opacity:.48; border-style:dashed; }

.empty-state { text-align:center; padding:26px 16px; color:var(--muted); }
.empty-symbol { font-size:2.1rem; margin-bottom:8px; }

.modal-backdrop { position:fixed; inset:0; z-index:80; background:rgba(0,0,0,.64); backdrop-filter:blur(8px); display:flex; align-items:flex-end; justify-content:center; padding:16px; }
.modal { width:min(100%,520px); border-radius:22px; border:1px solid var(--line-strong); background:#111820; box-shadow:0 28px 80px rgba(0,0,0,.55); padding:17px; margin-bottom:var(--safe-bottom); }
.modal-head { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:12px; }
.modal-title { margin:0; font-size:1rem; }

.concept-modal img { width:100%; border-radius:14px; display:block; }

.toast { position:fixed; z-index:100; left:50%; transform:translateX(-50%) translateY(20px); bottom:calc(90px + var(--safe-bottom)); background:rgba(14,20,27,.96); border:1px solid var(--line-strong); color:#f4eee6; border-radius:999px; padding:10px 14px; font-size:.78rem; opacity:0; pointer-events:none; transition:.22s ease; box-shadow:0 14px 40px rgba(0,0,0,.38); max-width:calc(100% - 32px); text-align:center; }
.toast.show { opacity:1; transform:translateX(-50%) translateY(0); }

.hidden { display:none !important; }
.muted { color:var(--muted); }
.small { font-size:.74rem; }
.spacer-8 { height:8px; }
.spacer-12 { height:12px; }
.spacer-16 { height:16px; }
.text-red { color:var(--red); }
.text-green { color:var(--green); }
.text-gold { color:var(--gold); }

@media (max-width:390px) {
  .app-shell { padding-inline:10px; }
  .brand-title { font-size:1.95rem; }
  .quick-grid { gap:7px; }
  .quick-button { min-height:73px; }
  .draw-actions { grid-template-columns:repeat(2,1fr); }
  .hero-actions { gap:6px; }
  .hero-button { min-height:66px; font-size:.72rem; }
  .status-strip { grid-template-columns:1fr 1fr; }
  .status-strip > :first-child { grid-column:1 / -1; }
  .mode-grid { grid-template-columns:1fr; }
  .mode-card { min-height:76px; }
  .mail-grid { grid-template-columns:1fr; }
  .delete-actions { gap:5px; }
  .delete-actions button { padding:6px 4px; }
  .canvas-hint { max-width:85%; overflow:hidden; text-overflow:ellipsis; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration:.01ms !important; animation-iteration-count:1 !important; scroll-behavior:auto !important; transition-duration:.01ms !important; }
}

/* ============================================================
   PETTER v2 — Ekko + romsignaturer + lesekomfort
   ============================================================ */

/* ---------- EKKO ---------- */
.ekko-card { position:relative; overflow:hidden; }
.ekko-card::before{
  content:""; position:absolute; inset:0; pointer-events:none; z-index:0;
  background:
    radial-gradient(circle at 12% 0%, rgba(140,130,247,.16), transparent 46%),
    radial-gradient(circle at 92% 8%, rgba(111,216,245,.10), transparent 42%);
}
.ekko-card .card-inner{ position:relative; z-index:1; }
.ekko-head{ display:flex; align-items:center; gap:12px; min-width:0; }
.ekko-head .section-title{ margin:0; }

.ekko-orb{
  position:relative; flex:0 0 auto; width:34px; height:34px; border-radius:50%;
  display:grid; place-items:center;
  background:radial-gradient(circle at 34% 26%, #eae7ff 0 6%, #a79bff 20%, #6a5cf0 56%, #171233 100%);
  border:1px solid rgba(180,170,255,.5);
  box-shadow:0 0 22px rgba(140,130,247,.42), inset 0 0 12px rgba(255,255,255,.26);
}
.ekko-orb i{ width:6px; height:6px; border-radius:50%; background:#fff; opacity:.85; transform:translate(-4px,-4px); }
.ekko-orb::after{
  content:""; position:absolute; inset:-6px; border-radius:50%;
  border:1px solid rgba(140,130,247,.28);
  animation:ekkoPulse 3.6s ease-in-out infinite;
}
@keyframes ekkoPulse{
  0%,100%{ transform:scale(1); opacity:.55; }
  50%{ transform:scale(1.14); opacity:.16; }
}

.ekko-log{
  margin-top:12px; padding:14px;
  min-height:132px; max-height:320px; overflow-y:auto;
  border:1px solid var(--line);
  border-radius:16px;
  background:rgba(10,14,22,.5);
  display:flex; flex-direction:column; gap:9px;
  scroll-behavior:smooth;
}
.ekko-empty{ color:var(--muted); font-size:.92rem; line-height:1.5; margin:auto 0; }
.ekko-line{ display:flex; }
.ekko-line span{
  max-width:86%; padding:10px 13px; border-radius:15px;
  font-size:.95rem; line-height:1.5; white-space:pre-wrap; word-break:break-word;
}
.ekko-line.me{ justify-content:flex-end; }
.ekko-line.me span{
  background:linear-gradient(180deg, rgba(209,170,117,.2), rgba(209,170,117,.12));
  border:1px solid rgba(209,170,117,.3);
  border-bottom-right-radius:5px;
}
.ekko-line.ekko span{
  background:rgba(140,130,247,.13);
  border:1px solid rgba(140,130,247,.26);
  border-bottom-left-radius:5px;
}
.ekko-thinking span{ display:flex; gap:5px; align-items:center; padding:13px 15px; }
.ekko-thinking i{
  width:6px; height:6px; border-radius:50%; background:rgba(200,195,255,.85);
  animation:ekkoDot 1.25s ease-in-out infinite;
}
.ekko-thinking i:nth-child(2){ animation-delay:.16s; }
.ekko-thinking i:nth-child(3){ animation-delay:.32s; }
@keyframes ekkoDot{ 0%,60%,100%{ opacity:.25; transform:translateY(0); } 30%{ opacity:1; transform:translateY(-3px); } }

.ekko-input-row{ display:flex; gap:9px; align-items:flex-end; margin-top:12px; }
.ekko-input{ flex:1 1 auto; min-height:52px; resize:none; }
.ekko-mic{ flex:0 0 auto; font-size:1.1rem; }
.ekko-mic.listening{
  border-color:rgba(239,79,74,.6);
  background:rgba(239,79,74,.16);
  animation:ekkoListen 1.5s ease-in-out infinite;
}
@keyframes ekkoListen{ 0%,100%{ box-shadow:0 0 0 0 rgba(239,79,74,.4); } 50%{ box-shadow:0 0 0 9px rgba(239,79,74,0); } }
.ekko-send{ flex:0 0 auto; }
.ekko-presets{ margin-top:11px; }
.ekko-key{ margin-top:14px; border-top:1px solid var(--line); padding-top:12px; }
.ekko-key summary{ cursor:pointer; color:var(--gold); font-size:.92rem; padding:4px 0; }
.ekko-key[open] summary{ margin-bottom:8px; }

/* ---------- ROMSIGNATURER ----------
   Hvert rom får sin egen lysfarge, slik at du kjenner
   hvor du er før du har lest overskriften.            */
:root[data-room="reader"]  { --room-glow:239,79,74;   }
:root[data-room="draw"]    { --room-glow:112,221,141; }
:root[data-room="reminders"]{ --room-glow:209,170,117; }
:root[data-room="notes"]   { --room-glow:111,216,245; }
:root[data-room="studio"]  { --room-glow:140,130,247; }
:root[data-room="family"]  { --room-glow:112,221,141; }
:root[data-room="shortcuts"]{ --room-glow:140,130,247; }
:root[data-room="mail"]    { --room-glow:111,216,245; }
:root[data-room="settings"]{ --room-glow:209,170,117; }

body::before{ transition:background 900ms ease; }
:root[data-room]:not([data-room="home"]) body::before{
  background:
    radial-gradient(circle at 50% -6%, rgba(var(--room-glow,209,170,117), .16), transparent 46%),
    radial-gradient(circle at 12% 42%, rgba(var(--room-glow,209,170,117), .06), transparent 40%),
    linear-gradient(180deg, #070a0f, #0a1017 48%, #070b10);
}
:root[data-room]:not([data-room="home"]) .room-header::after{
  content:""; display:block; height:1px; margin-top:13px;
  background:linear-gradient(90deg, rgba(var(--room-glow,209,170,117),.5), transparent 72%);
}

/* ---------- LESEKOMFORT ----------
   Du blir sittende lenge her. Teksten skal være god å hvile i. */
#readerText{
  min-height:210px;
  line-height:1.75;
  letter-spacing:.008em;
  font-size:calc(1.02rem * var(--font-scale));
}
.room-wide .textarea:focus-visible,
.room-wide .input:focus-visible{
  outline:none;
  border-color:rgba(var(--room-glow,209,170,117),.55);
  box-shadow:0 0 0 3px rgba(var(--room-glow,209,170,117),.14);
}

/* ---------- EKTE STEMME ---------- */
.voice-real{
  border:1px solid var(--line);
  border-radius:16px;
  padding:14px;
  background:rgba(255,255,255,.028);
}
.voice-real-head{ display:flex; align-items:flex-start; justify-content:space-between; gap:12px; }
.voice-real-head .form-label{ margin-bottom:2px; }
.voice-real-head .section-note{ margin:0; }

.voice-picker{
  display:flex; gap:8px; margin-top:12px;
  overflow-x:auto; padding-bottom:4px;
  scrollbar-width:none;
}
.voice-picker::-webkit-scrollbar{ display:none; }

.voice-chip{
  position:relative; flex:0 0 auto;
  display:flex; flex-direction:column; align-items:flex-start; gap:1px;
  min-width:112px; padding:11px 13px 11px 12px;
  border:1px solid var(--line);
  border-radius:14px;
  background:rgba(255,255,255,.04);
  cursor:pointer; text-align:left;
  transition:.18s ease;
}
.voice-chip strong{ font-size:.95rem; font-weight:650; }
.voice-chip small{ color:var(--muted); font-size:.78rem; }
.voice-chip.active{
  border-color:rgba(209,170,117,.5);
  background:rgba(209,170,117,.12);
  box-shadow:0 0 0 1px rgba(209,170,117,.18);
}
.voice-try{
  position:absolute; top:8px; right:8px;
  width:24px; height:24px; border-radius:50%;
  display:grid; place-items:center;
  font-size:.62rem;
  border:1px solid var(--line-strong);
  background:rgba(10,14,22,.55);
  color:var(--gold);
}
.voice-try:active{ transform:scale(.92); }

/* ============================================================
   PETTER v5 — rolig å være i
   ============================================================ */

/* ---------- LESEMODUS ---------- */
:root { --read-size: 1.35; }
body.focus-open { overflow:hidden; }

.focus-layer{
  position:fixed; inset:0; z-index:60;
  display:flex; flex-direction:column;
  background:
    radial-gradient(circle at 50% -10%, rgba(239,79,74,.10), transparent 48%),
    linear-gradient(180deg, #080c11, #0b1018 52%, #070a0f);
  animation:focusIn .34s ease;
}
@keyframes focusIn{ from{ opacity:0; transform:scale(.985);} to{ opacity:1; transform:none;} }

.focus-top{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:calc(var(--safe-top) + 2px) 16px 10px;
}
.focus-x{
  width:40px; height:40px; border-radius:50%;
  border:1px solid var(--line); background:rgba(255,255,255,.05);
  display:grid; place-items:center; font-size:1rem; cursor:pointer;
}
.focus-count{ color:var(--muted); font-size:.84rem; letter-spacing:.04em; font-variant-numeric:tabular-nums; }
.focus-size{ display:flex; gap:6px; }
.focus-size button{
  min-width:44px; height:40px; padding:0 10px;
  border:1px solid var(--line); border-radius:12px;
  background:rgba(255,255,255,.05); cursor:pointer;
  font-size:.9rem; font-weight:600;
}
.focus-size button:active{ transform:scale(.95); }

.focus-scroll{
  flex:1 1 auto; overflow-y:auto;
  padding:8px 22px 40vh;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:none;
}
.focus-scroll::-webkit-scrollbar{ display:none; }

.focus-text{ max-width:640px; margin:0 auto; }
.focus-part{
  margin:0 0 22px;
  font-size:calc(1rem * var(--read-size));
  line-height:1.72;
  letter-spacing:.006em;
  color:rgba(246,239,230,.32);
  transition:color .45s ease, opacity .45s ease;
  cursor:pointer;
}
.focus-part.done{ color:rgba(246,239,230,.22); }
.focus-part.now{
  color:var(--text);
  text-shadow:0 0 34px rgba(209,170,117,.14);
}
.focus-part.now::before{
  content:""; display:block;
  width:26px; height:2px; margin-bottom:13px; border-radius:2px;
  background:linear-gradient(90deg, var(--gold), transparent);
}

.focus-bar{
  display:flex; align-items:center; justify-content:center; gap:12px;
  padding:12px 16px calc(var(--safe-bottom) + 10px);
  border-top:1px solid var(--line);
  background:linear-gradient(180deg, rgba(8,12,17,0), rgba(8,12,17,.92) 34%);
}
.focus-nav{
  width:52px; height:52px; border-radius:50%;
  border:1px solid var(--line); background:rgba(255,255,255,.05);
  font-size:1.5rem; line-height:1; cursor:pointer;
}
.focus-nav:active{ transform:scale(.94); }
.focus-play{
  min-width:148px; height:52px; padding:0 22px;
  border-radius:26px; cursor:pointer;
  border:1px solid rgba(209,170,117,.42);
  background:linear-gradient(180deg, rgba(209,170,117,.24), rgba(209,170,117,.13));
  font-size:1rem; font-weight:650;
  box-shadow:0 10px 30px rgba(0,0,0,.34);
}
.focus-play:active{ transform:scale(.97); }

/* ---------- DØGNET ----------
   Rommet skifter temperatur med klokka, slik at kvelden
   kjennes annerledes enn morgenen. */
:root[data-day="morgen"]      { --sky-a:209,170,117; --sky-b:112,221,141; }
:root[data-day="formiddag"]   { --sky-a:111,216,245; --sky-b:209,170,117; }
:root[data-day="ettermiddag"] { --sky-a:209,170,117; --sky-b:239,79,74;   }
:root[data-day="kveld"]       { --sky-a:140,130,247; --sky-b:239,79,74;   }
:root[data-day="natt"]        { --sky-a:140,130,247; --sky-b:111,216,245; }

:root[data-room="home"] body::before{
  background:
    radial-gradient(circle at 18% -4%, rgba(var(--sky-a,209,170,117), .13), transparent 44%),
    radial-gradient(circle at 88% 16%, rgba(var(--sky-b,112,221,141), .08), transparent 40%),
    radial-gradient(circle at 50% 104%, rgba(var(--sky-a,209,170,117), .07), transparent 36%),
    linear-gradient(180deg, #070a0f, #0a1017 48%, #070b10);
}
:root[data-day="natt"] body::after{ opacity:.10; }

/* ---------- MYKERE INNGANG ----------
   Rommene glir inn i stedet for å hoppe. */
.app-shell{ animation:roomIn .32s cubic-bezier(.22,.61,.36,1); }
@keyframes roomIn{
  from{ opacity:0; transform:translateY(7px); }
  to{ opacity:1; transform:none; }
}
.room-grid .room-card{ transition:transform .16s ease, border-color .2s ease, background .2s ease; }
.room-grid .room-card:active{ transform:scale(.975); }
.hero-button{ transition:transform .16s ease; }
.hero-button:active{ transform:scale(.97); }

/* Roligere lesekort-scene */
.reader-preview{ line-height:1.7; }

/* ============================================================
   PETTER v9 — Tegnefortelling + Spør
   ============================================================ */

/* ---------- SPØR ---------- */
.ask-input-row{ display:flex; gap:9px; align-items:flex-end; }
.ask-input{ flex:1 1 auto; }
.ask-grid{
  display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-top:13px;
}
.ask-card{
  position:relative; display:flex; flex-direction:column; align-items:flex-start; gap:2px;
  padding:14px 15px;
  border:1px solid var(--line); border-radius:16px;
  background:rgba(255,255,255,.04);
  cursor:pointer; text-align:left;
  transition:transform .15s ease, border-color .2s ease;
}
.ask-card:active{ transform:scale(.97); }
.ask-card strong{ font-size:1.02rem; font-weight:680; }
.ask-card small{ color:var(--muted); font-size:.8rem; }
.ask-card .room-arrow{ position:absolute; right:13px; top:50%; transform:translateY(-50%); color:var(--muted); }
.ask-card.green{ border-color:rgba(112,221,141,.28); }
.ask-card.red{ border-color:rgba(239,79,74,.28); }
.ask-card.gold{ border-color:rgba(209,170,117,.3); }
.ask-card.violet{ border-color:rgba(140,130,247,.3); }
.ask-card.cyan{ border-color:rgba(111,216,245,.28); }