/* ============================================================================
   AZALEA PETS — SKIN FILE (v56-ALT: "AURORA")
   The competing design: deep-space gradient, frosted-glass panels, soft
   colored glows, pink→violet gradient accents, airy pill shapes. The opposite
   pole from Paper II — weightless instead of chunky.

   THEME TOGGLE WORKS: Settings → Theme (Auto/Dark/Light) switches between
   - html.skin           → Aurora Night (indigo space, glass cards, glows)
   - html.skin.light     → Aurora Day (lavender-blush sky, white glass)
   All colors live in the two variable blocks below; geometry is shared.

   SWAPPING LOOKS (one-file swap, no other edits):
   - This design and Paper II both ship as a file named skin.css. Upload
     whichever skin.css you want live — that's the whole switch.
   - Original look: replace skin.css with an EMPTY file.
   UNTOUCHED: .logo/.wordmark, .auth-cat, .empty-cat, .line-cat, .think-cat,
   and the share-card preview/export (pinned to the dark brand look).
   ========================================================================= */

@import url("https://fonts.googleapis.com/css2?family=Outfit:wght@500;600;700&display=swap");

/* ---------- palette: AURORA NIGHT (dark — the app default) ---------- */
html.skin.skin.skin {
  --bg-grad: radial-gradient(120% 90% at 15% 0%, #1B1440 0%, #0C0A18 55%, #070610 100%);
  --surface: rgba(255, 255, 255, 0.055);
  --surface-dim: rgba(255, 255, 255, 0.042);   /* v57: card fill, ~10% darker */
  --surface-2: rgba(255, 255, 255, 0.09);
  --ink: #EDEBFA;
  --muted: #9A94C2;
  --pink: #FF4D8F;
  --violet: #8B5CF6;
  --grad: linear-gradient(135deg, #FF4D8F 0%, #8B5CF6 100%);
  --line: rgba(255, 255, 255, 0.14);
  --glow: 0 10px 30px rgba(0, 0, 0, 0.45);
  --glow-pink: 0 6px 22px rgba(255, 77, 143, 0.35);
  --focus: rgba(139, 92, 246, 0.65);
  --on-grad: #FFFFFF;
  --bad: #FF7A87;
  --bad-bg: rgba(255, 90, 105, 0.12);
  --radius: 20px;
  color-scheme: dark;
}

/* ---------- palette: AURORA DAY (light) ---------- */
html.skin.skin.skin.light {
  --bg-grad: radial-gradient(120% 90% at 15% 0%, #EFEAFB 0%, #F8F2F6 55%, #FBF7F2 100%);
  --surface: rgba(255, 255, 255, 0.66);
  --surface-dim: rgba(255, 255, 255, 0.56);    /* v57: card fill, ~10% dimmer */
  --surface-2: rgba(255, 255, 255, 0.9);
  --ink: #241F3D;
  --muted: #6F6994;
  --pink: #E8478A;
  --violet: #7C4DE8;
  --grad: linear-gradient(135deg, #E8478A 0%, #7C4DE8 100%);
  --line: rgba(36, 31, 61, 0.12);
  --glow: 0 10px 26px rgba(36, 31, 61, 0.10);
  --glow-pink: 0 6px 20px rgba(232, 71, 138, 0.22);
  --focus: rgba(124, 77, 232, 0.5);
  --on-grad: #FFFFFF;
  --bad: #C2273B;
  --bad-bg: rgba(194, 39, 59, 0.08);
  color-scheme: light;
}

html.skin.skin.skin body {
  background: var(--bg-grad) fixed;
  color: var(--ink);
}

/* the glass recipe */
html.skin.skin.skin .msg,
html.skin.skin.skin .composer,
html.skin.skin.skin .modal-card,
html.skin.skin.skin .auth-card,
html.skin.skin.skin .onboard-card,
html.skin.skin.skin .tut-card,
html.skin.skin.skin .tl-entry,
html.skin.skin.skin .hp-item,
html.skin.skin.skin .hp-insights,
html.skin.skin.skin .push-nudge,
html.skin.skin.skin .tl-tip,
html.skin.skin.skin .tour-tip,
html.skin.skin.skin .prof-summary,
html.skin.skin.skin .prof-spark-wrap,
html.skin.skin.skin .vetsum-card {
  -webkit-backdrop-filter: blur(18px) saturate(1.35);
  backdrop-filter: blur(18px) saturate(1.35);
}

/* display type */
html.skin.skin.skin .empty-title,
html.skin.skin.skin .modal-card h2,
html.skin.skin.skin .auth-title,
html.skin.skin.skin .tut-slide h2,
html.skin.skin.skin .tour-tip h3,
html.skin.skin.skin .spark-title,
html.skin.skin.skin .tl-head .ptitle {
  font-family: "Outfit", "Instrument Sans", sans-serif;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--ink);
}
html.skin.skin.skin .side-sec-label,
html.skin.skin.skin .chats-label,
html.skin.skin.skin .set-label,
html.skin.skin.skin .tl-act-label,
html.skin.skin.skin .dob-label {
  font-family: "Outfit", sans-serif;
  font-weight: 600;
  letter-spacing: 0.1em;
  color: var(--muted);
}
html.skin.skin.skin .hi-label {
  font-family: "Outfit", sans-serif; font-weight: 600; letter-spacing: 0.1em;
  background: var(--grad);
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
}

/* ---------- global chrome ---------- */
html.skin.skin.skin ::selection { background: var(--violet); color: #FFFFFF; }
html.skin.skin.skin .sidebar::-webkit-scrollbar-thumb,
html.skin.skin.skin .pet-list::-webkit-scrollbar-thumb,
html.skin.skin.skin #input::-webkit-scrollbar-thumb { background: var(--line); border-radius: 99px; }
html.skin.skin.skin #input::-webkit-scrollbar-track { background: transparent; }

/* ---------- topbar ---------- */
html.skin.skin.skin .topbar {
  background: transparent;
  border-bottom: 1px solid var(--line);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
}
html.skin.skin.skin .menu-btn,
html.skin.skin.skin .top-act,
html.skin.skin.skin .code-btn2,
html.skin.skin.skin .clear {
  background: var(--surface); color: var(--ink);
  border: 1px solid var(--line); border-radius: 999px;
  box-shadow: none; transition: background 0.15s ease, box-shadow 0.15s ease;
}
html.skin.skin.skin .menu-btn:hover, html.skin.skin.skin .top-act:hover,
html.skin.skin.skin .code-btn2:hover, html.skin.skin.skin .clear:hover {
  background: var(--surface-2); color: var(--ink); box-shadow: var(--glow-pink);
}

/* ---------- sidebar ---------- */
html.skin.skin.skin .sidebar {
  background: var(--surface);
  -webkit-backdrop-filter: blur(22px) saturate(1.3); backdrop-filter: blur(22px) saturate(1.3);
  border-right: 1px solid var(--line);
}
html.skin.skin.skin .side-div { background: var(--line); height: 1px; }
html.skin.skin.skin .pet-item,
html.skin.skin.skin .chat-item,
html.skin.skin.skin .new-chat,
html.skin.skin.skin #add-pet,
html.skin.skin.skin .profile-btn,
html.skin.skin.skin .pet-fold {
  background: var(--surface); color: var(--ink);
  border: 1px solid var(--line); border-radius: 16px;
  box-shadow: none; transition: background 0.15s ease, box-shadow 0.15s ease, transform 0.12s ease;
}
html.skin.skin.skin .pet-item:hover, html.skin.skin.skin .chat-item:hover,
html.skin.skin.skin .new-chat:hover, html.skin.skin.skin #add-pet:hover,
html.skin.skin.skin .profile-btn:hover, html.skin.skin.skin .pet-fold:hover {
  background: var(--surface-2); transform: translateY(-1px);
}
html.skin.skin.skin .pet-item.active {
  background: var(--surface-2); color: var(--ink);
  box-shadow: inset 0 0 0 1.5px var(--pink), var(--glow-pink);
}
html.skin.skin.skin .chat-item.active { background: var(--surface-2); box-shadow: inset 0 0 0 1.5px var(--violet); }
html.skin.skin.skin .unread-dot { background: var(--grad); }
html.skin.skin.skin .chat-item .del { color: var(--muted); }
html.skin.skin.skin .chat-item .del:hover { color: var(--bad); }
html.skin.skin.skin .user-email, html.skin.skin.skin .logout { color: var(--muted); }
html.skin.skin.skin .logout:hover { color: var(--ink); }
html.skin.skin.skin #scrim { background: rgba(7, 6, 16, 0.55); }

/* ---------- chat ---------- */
html.skin.skin.skin .msg {
  border: 1px solid var(--line);
  box-shadow: var(--glow);
  line-height: 1.55;
  border-radius: 20px;
}
html.skin.skin.skin .msg.assistant { background: var(--surface); color: var(--ink); border-radius: 20px 20px 20px 6px; }
html.skin.skin.skin .msg.user {
  background: var(--grad); color: var(--on-grad);
  border: none; border-radius: 20px 20px 6px 20px;
  box-shadow: var(--glow-pink);
}
html.skin.skin.skin .msg.thinking { background: transparent; color: var(--muted); border: 1px dashed var(--line); box-shadow: none; }
html.skin.skin.skin .msg.error { background: var(--bad-bg); color: var(--bad); border-color: var(--bad); box-shadow: none; }
html.skin.skin.skin .msg.otd { background: var(--surface-2); }
html.skin.skin.skin .otd-head { color: var(--pink); }
html.skin.skin.skin .msg .attach-note { color: inherit; opacity: 0.75; }

html.skin.skin.skin .msg .chat-photo,
html.skin.skin.skin .msg.otd img,
html.skin.skin.skin .tl-entry img,
html.skin.skin.skin .pp-thumb,
html.skin.skin.skin .prof-photo {
  border: 1px solid var(--line); border-radius: 16px; box-shadow: var(--glow);
}
html.skin.skin.skin .prof-photo-empty { border: 1px dashed var(--line); background: var(--surface); color: var(--muted); }

/* ---------- composer ---------- */
html.skin.skin.skin .composer {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: 26px; box-shadow: var(--glow);
}
html.skin.skin.skin .composer:focus-within { border-color: var(--focus); box-shadow: 0 0 0 3px var(--focus), var(--glow); }
html.skin.skin.skin #input { color: var(--ink); background: transparent; }
html.skin.skin.skin #input::placeholder { color: var(--muted); }
html.skin.skin.skin #attach { color: var(--muted); }
html.skin.skin.skin #attach:hover { color: var(--pink); }
html.skin.skin.skin #send {
  background: var(--grad); color: var(--on-grad);
  border: none; box-shadow: var(--glow-pink);
  transition: transform 0.12s ease, box-shadow 0.15s ease;
}
html.skin.skin.skin #send:active { transform: scale(0.94); }
html.skin.skin.skin #send:disabled { background: var(--surface-2); color: var(--muted); box-shadow: none; }
html.skin.skin.skin .composer-collapse { background: var(--surface); color: var(--ink); border: 1px solid var(--line); }
html.skin.skin.skin .file-chip { background: var(--surface-2); color: var(--ink); border: 1px solid var(--line); border-radius: 999px; }
html.skin.skin.skin .disclaim, html.skin.skin.skin .wake-note { color: var(--muted); }

/* ---------- empty state ---------- */
html.skin.skin.skin .empty-title { font-size: 30px; }
html.skin.skin.skin .empty-sub { color: var(--muted); }

/* ---------- buttons ---------- */
html.skin.skin.skin .auth-primary,
html.skin.skin.skin .big-btn,
html.skin.skin.skin .dl-btn,
html.skin.skin.skin .tour-btn {
  background: var(--grad); color: var(--on-grad);
  border: none; border-radius: 999px;
  box-shadow: var(--glow-pink);
  font-family: "Outfit", sans-serif; font-weight: 600;
  transition: transform 0.12s ease, box-shadow 0.15s ease, filter 0.15s ease;
}
html.skin.skin.skin .auth-primary:hover, html.skin.skin.skin .big-btn:hover,
html.skin.skin.skin .dl-btn:hover, html.skin.skin.skin .tour-btn:hover { filter: brightness(1.07); }
html.skin.skin.skin .auth-primary:active, html.skin.skin.skin .big-btn:active,
html.skin.skin.skin .dl-btn:active, html.skin.skin.skin .tour-btn:active { transform: scale(0.97); }
html.skin.skin.skin .auth-primary:disabled { background: var(--surface-2); color: var(--muted); box-shadow: none; }

html.skin.skin.skin .ghost-btn,
html.skin.skin.skin .guest-btn,
html.skin.skin.skin .hp-refresh,
html.skin.skin.skin .edit-pet,
html.skin.skin.skin .icon-btn,
html.skin.skin.skin #tour-skip2,
html.skin.skin.skin .pet-bar button {
  background: var(--surface); color: var(--ink);
  border: 1px solid var(--line); border-radius: 999px;
  transition: background 0.15s ease, box-shadow 0.15s ease;
}
html.skin.skin.skin .ghost-btn:hover, html.skin.skin.skin .guest-btn:hover,
html.skin.skin.skin .hp-refresh:hover, html.skin.skin.skin .edit-pet:hover,
html.skin.skin.skin .icon-btn:hover { background: var(--surface-2); color: var(--ink); box-shadow: var(--glow-pink); }

html.skin.skin.skin .danger-btn {
  background: var(--bad-bg); color: var(--bad);
  border: 1px solid var(--bad); border-radius: 999px;
}
html.skin.skin.skin .danger-btn:hover { background: var(--bad-bg); filter: brightness(1.1); }

/* ---------- inputs ---------- */
html.skin.skin.skin input,
html.skin.skin.skin textarea,
html.skin.skin.skin select,
html.skin.skin.skin .auth-fields input,
html.skin.skin.skin .tl-form input,
html.skin.skin.skin .tl-form textarea,
html.skin.skin.skin .tl-form select,
html.skin.skin.skin .tl-inline-form input,
html.skin.skin.skin .tl-inline-form textarea,
html.skin.skin.skin .dob-row select,
html.skin.skin.skin .modal-card select,
html.skin.skin.skin #pet-select,
html.skin.skin.skin .vetsum-concern {
  background: var(--surface); color: var(--ink);
  border: 1px solid var(--line); border-radius: 14px;
}
html.skin.skin.skin .auth-fields input:focus,
html.skin.skin.skin .tl-form input:focus,
html.skin.skin.skin .tl-form textarea:focus,
html.skin.skin.skin .tl-form select:focus,
html.skin.skin.skin .tl-inline-form input:focus,
html.skin.skin.skin .tl-inline-form textarea:focus,
html.skin.skin.skin .dob-row select:focus,
html.skin.skin.skin .vetsum-concern:focus { outline: none; border-color: var(--focus); box-shadow: 0 0 0 3px var(--focus); }

/* ---------- auth / onboarding ---------- */
html.skin.skin.skin .auth { background: var(--bg-grad); }
html.skin.skin.skin .auth-card,
html.skin.skin.skin .onboard-card,
html.skin.skin.skin .tut-card {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: 26px; box-shadow: var(--glow);
}
html.skin.skin.skin .auth-tabs button { background: transparent; color: var(--muted); border: 1px solid var(--line); border-radius: 999px; }
html.skin.skin.skin .auth-tabs button.on { color: var(--on-grad); background: var(--grad); border-color: transparent; }
html.skin.skin.skin .auth-sub, html.skin.skin.skin .onboard-sub { color: var(--muted); }
html.skin.skin.skin .forgot-link { color: var(--muted); }
html.skin.skin.skin .forgot-link:hover { color: var(--ink); }
html.skin.skin.skin .legal-links, html.skin.skin.skin .legal-links a { color: var(--muted); }
html.skin.skin.skin .tut-dots span { background: var(--surface-2); }
html.skin.skin.skin .tut-dots span.on { background: var(--grad); }

/* ---------- modals ---------- */
html.skin.skin.skin .modal { background: rgba(7, 6, 16, 0.55); }
html.skin.skin.skin .modal-card {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: 26px; box-shadow: var(--glow);
}
html.skin.skin.skin .set-opt { background: var(--surface); color: var(--muted); border: 1px solid var(--line); border-radius: 999px; }
html.skin.skin.skin .set-opt.on { background: var(--grad); color: var(--on-grad); border-color: transparent; }
html.skin.skin.skin .set-note { color: var(--muted); }
html.skin.skin.skin .set-toggle { border: none; }
html.skin.skin.skin .stat-chip { background: var(--surface-2); color: var(--ink); border: 1px solid var(--line); border-radius: 999px; }
html.skin.skin.skin .prof-row .k { color: var(--muted); }
html.skin.skin.skin .prof-summary,
html.skin.skin.skin .prof-spark-wrap,
html.skin.skin.skin .vetsum-card {
  background: var(--surface-dim); border: 1px solid var(--line);
  border-radius: 18px;
  padding: 15px 17px;   /* v57: summary/vet text clears the border */
}
html.skin.skin.skin .prof-summary.loading, html.skin.skin.skin .vetsum-body.loading { color: var(--muted); }
html.skin.skin.skin #prof-spark polyline { stroke: var(--pink); }
html.skin.skin.skin #prof-spark circle { fill: var(--violet); }
html.skin.skin.skin .spark-lbl { color: var(--muted); }

/* ---------- timeline + health ---------- */
html.skin.skin.skin .tl-panel {
  background: var(--surface);
  -webkit-backdrop-filter: blur(22px) saturate(1.3); backdrop-filter: blur(22px) saturate(1.3);
  border-left: 1px solid var(--line);
}
html.skin.skin.skin .tl-head { border-bottom: 1px solid var(--line); background: transparent; }
html.skin.skin.skin .tl-x { color: var(--ink); }
html.skin.skin.skin .tl-entry,
html.skin.skin.skin .hp-item,
html.skin.skin.skin .push-nudge,
html.skin.skin.skin .tl-tip {
  background: var(--surface-dim); border: 1px solid var(--line);
  border-radius: 18px; box-shadow: none;
  padding: 15px 17px;   /* v57: text was hugging the rounded border */
}
html.skin.skin.skin .hp-insights {
  background: var(--surface-dim); border: 1px solid var(--line);
  border-radius: 18px; color: var(--ink);
  box-shadow: inset 3px 0 0 var(--pink);
  padding: 15px 17px;   /* v57: check-in text clears the border */
}
html.skin.skin.skin .hi-when { color: var(--muted); }
html.skin.skin.skin .hi-chev { color: var(--muted); }
html.skin.skin.skin .tl-entry .tl-date, html.skin.skin.skin .tl-empty,
html.skin.skin.skin .hp-kind, html.skin.skin.skin .hp-sub { color: var(--muted); }
html.skin.skin.skin .hp-item .hp-due {
  border: 1px solid var(--line); border-radius: 999px; padding: 2px 9px;
  background: var(--surface-2); color: var(--ink);
}
html.skin.skin.skin .hp-item .hp-due.overdue { background: var(--bad-bg); color: var(--bad); border-color: var(--bad); }
html.skin.skin.skin .hp-item .hp-due.soon { background: rgba(139, 92, 246, 0.18); color: var(--ink); border-color: var(--violet); }
html.skin.skin.skin .hp-item .hp-due.was { background: rgba(255, 77, 143, 0.14); color: var(--pink); border-color: var(--pink); }
html.skin.skin.skin .hp-confirm { color: var(--muted); }
html.skin.skin.skin .tl-form, html.skin.skin.skin .tl-inline-form {
  background: var(--surface); border: 1px dashed var(--line); border-radius: 18px;
}

/* ---------- toast ---------- */
html.skin.skin.skin .toast {
  background: var(--surface-2); color: var(--ink);
  border: 1px solid var(--line); border-radius: 999px;
  -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
  box-shadow: var(--glow-pink);
  font-family: "Outfit", sans-serif; font-weight: 600;
}

/* ---------- tour ---------- */
html.skin.skin.skin .tour-backdrop { background: rgba(7, 6, 16, 0.6); }
html.skin.skin.skin .tour-tip {
  background: var(--surface-2); border: 1px solid var(--line);
  border-radius: 20px; box-shadow: var(--glow); color: var(--ink);
}
html.skin.skin.skin .tour-tip p { color: var(--muted); }
html.skin.skin.skin .tour-ring { border-color: var(--pink); }

/* ---------- share-card builder: preview pinned to the export's brand look --- */
html.skin.skin.skin .card-builder { background: var(--bg-grad); }
html.skin.skin.skin .card-preview { background: #0B0B0E; border: 1px solid var(--line); box-shadow: var(--glow); }
html.skin.skin.skin .card-preview .card-overlay { color: #ECECF1; }
html.skin.skin.skin .card-ov-title { color: #FFFFFF; }
html.skin.skin.skin .card-ov-zinger { color: rgba(255, 255, 255, 0.85); }
html.skin.skin.skin .card-fmt,
html.skin.skin.skin .card-thumb { border: 1px solid var(--line); border-radius: 14px; background: var(--surface); color: var(--ink); }
html.skin.skin.skin .card-thumb.sel { box-shadow: 0 0 0 2px var(--pink), var(--glow-pink); }
html.skin.skin.skin .card-hint { color: var(--muted); }

html.skin.skin.skin .hp-item .hp-due.done { background: rgba(110,220,150,0.12); color: #86E5AC; border-color: rgba(110,220,150,0.5); }

html.skin.skin.skin .tl-entry.chapter { box-shadow: inset 3px 0 0 var(--pink); background: var(--surface-2); }
html.skin.skin.skin .tl-entry.chapter .tl-date { background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
html.skin.skin.skin .tl-chapter-tease { border-style: dashed; background: var(--surface-dim); }

html.skin.skin.skin .scroll-hint {
  background: var(--surface-2);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  border: 1.5px solid var(--pink);
  color: var(--ink);
  box-shadow: var(--glow-pink);
}
html.skin.skin.skin .card-chapters-note { color: var(--muted); }

html.skin.skin.skin .tour-tip-icon { background: var(--surface-2); color: var(--pink); border: 1.5px solid var(--pink); box-shadow: var(--glow-pink); }
html.skin.skin.skin .tdot { background: var(--line); }
html.skin.skin.skin .tdot.on { background: var(--grad); }

html.skin.skin.skin .vetsum-mail-row input { background: var(--surface); color: var(--ink); border: 1px solid var(--line); border-radius: 14px; }

html.skin.skin.skin .story-ch-title { background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }

html.skin.skin.skin .story-new { border-color: var(--pink) !important; box-shadow: var(--glow-pink); }

/* ---------- v102: Android WebView compositing fix ----------
   backdrop-filter on a transformed, scrolling layer (the slide-in sidebar,
   the timeline panel) leaves stale tiles behind on Android WebView — the pet
   list rendered 2-3 times over itself. Android only; iOS never carries the
   native-android class, so nothing changes there. Opaque fills replace the
   frosted glass on those two panels. */
html.skin.skin.skin.native-android .sidebar,
html.skin.skin.skin.native-android .tl-panel {
  -webkit-backdrop-filter: none; backdrop-filter: none;
  background: #100D22;
}
html.skin.skin.skin.native-android.light .sidebar,
html.skin.skin.skin.native-android.light .tl-panel {
  background: #F4EFF9;
}

/* v103: second Android-only pass. The sticky section label inside the
   transformed, scrolling sidebar is what ghosts (stale raster tiles); make it
   flow normally on Android and pin the sidebar to its own compositor layer. */
html.skin.skin.skin.native-android .side-sec { position: static; }
html.skin.skin.skin.native-android .sidebar {
  will-change: transform;
  -webkit-backface-visibility: hidden; backface-visibility: hidden;
}

/* v104: slide the sidebar with `left` instead of `transform` on Android — a
   transformed fixed scroller is the layer that holds stale tiles. */
@media (max-width: 760px) {
  html.skin.skin.skin.native-android .sidebar {
    transform: none !important; will-change: left;
    right: auto; width: 82vw; left: -84vw;
    transition: left .2s ease;
  }
  html.skin.skin.skin.native-android .sidebar.open { left: 0; }
}

/* v105: THE cause on Android — `background-attachment: fixed` on body is a
   known Android WebView repaint bug (previous frame bleeds through / stacks on
   top when content changes). Move the gradient to <html> (viewport-sized app
   shell, so it still covers everything) and drop the fixed attachment. */
html.skin.skin.skin.native-android { background: var(--bg-grad); }
html.skin.skin.skin.native-android body { background: transparent; }