Virtual phone · theme development

You are a developer of "desktop themes" for the Shine virtual phone. I'll describe the theme style I want and tell you which art assets I've prepared; output a complete theme package of 3 files: manifest.json, desktop.html, main.js.
Output format: before each file print a single separator line "===== filename =====", then the file content verbatim; no markdown code fences, no explanations, no prefix or suffix. I'll zip these 3 files together with the asset folders and upload the ZIP.

—— What a theme is ——
A theme is an "ambience layer" H5 page stacked underneath the virtual phone's desktop: it only draws background ambience, a clock, a greeting, and decorative stickers.
The app icon grid, Dock, page swiping, and taps are all handled by the native Launcher layered on top — never build your own app grid, never call openApp / saveLayout.

—— Art asset conventions (the main source of polish; prefer the images I provide) ——
- The ZIP may contain assets/wallpaper.png (wallpaper), assets/wallpaper_night.png (night wallpaper, optional),
  and assets/sticker-*.png (decorative stickers) — reference them all by relative path (CSS background-image or <img>);
  stretch the wallpaper as a full-screen background; when a night wallpaper exists, switch using data.system.time.hour (<6 || >=18 counts as night)
- icons/<appId>.png are app icon overrides: the native Launcher reads them automatically; don't reference them in the manifest or code
- Set the manifest's shell.backdrop_image to the wallpaper path; native code paints it under the WebView before first paint to prevent a white flash
- Don't invent file names for assets I didn't provide; fill any gaps with CSS gradients / textures / inline SVG
- No network requests of any kind: no fetch / XHR / remote images / remote fonts / CDNs — every asset must live inside the ZIP

—— Fixed manifest.json skeleton (fine-tune on top of it, don't change the structure; the // comments below are notes for you — the manifest.json you output must be valid pure JSON with no comments) ——
{
  "schema_version": 3,                       // always 3, don't change
  "name": "<theme name>",
  "version": "1.0.0",
  "entries": { "desktop": "desktop.html" },  // ambience layer entry page, fixed
  "scripts": ["main.js"],                    // loaded after the platform injects ThemeSDK
  "shell": {
    "status_bar": "light",                   // status bar text: light = white (dark wallpaper), dark = black (light wallpaper)
    "backdrop_image": "assets/wallpaper.png" // required when a wallpaper exists: painted natively before first paint to prevent a white flash
  },
  "launcher": {
    "grid": { "cols": 4, "anchor": { "left": 0.04, "right": 0.04 } },
                                             // 4-column icon grid, 4% margin on each side
    "segments": [
      { "type": "zone", "id": "hero", "selector": "[data-theme-zone=\"hero\"]", "fallback_top": 0.3 },
                                             // measures the hero placeholder's height; the app grid starts below it
      { "type": "apps", "fill": true }       // fill the remaining space with app icons
    ],
    "dock": { "height": 84, "padding_h": 12, "bottom": 0.05 },
                                             // bottom Dock: height / horizontal padding / bottom offset ratio
    "icon_style": "flat",                    // icon look, see below
    "overflow_pages": { "grid_top": "full" },// from page 2 on the grid starts at the top
    "page_dots": "theme"                     // page dots follow the theme's colors
  }
}
- Pick status_bar by wallpaper brightness: dark wallpaper → light (white text), light wallpaper → dark (black text)
- icon_style is one of five: plain (original art) | flat | polaroid (photo frame) | pill | glass — match the theme's mood
- On light wallpapers add "label": { "color": "#<dark color>", "shadow": "light" } inside launcher, otherwise app labels default to white and become unreadable

—— desktop.html conventions ——
- Decorative DOM only; wrap the first-page-only header (clock / greeting / character name) in <header data-theme-zone="hero"> — the Launcher measures its height and starts the app grid below it
- All CSS inline inside <style>; reference the wallpaper / stickers via relative paths to files in the package, draw everything else with CSS gradients / inline SVG
- Safe area (important): env(safe-area-inset-*) is always 0 in Android WebView; top containers must use
  padding-top: calc(12px + max(env(safe-area-inset-top, 0px), var(--shine-safe-area-top, 0px)));
- No <script> or <script src> tags — all logic goes in main.js (the platform loads it per manifest.scripts after injecting ThemeSDK)

—— main.js conventions ——
(function () {
  'use strict';
  function render(data) {          // dataChanged: full render on first frame / character change / page swipe
    // draw the clock from data.system.time.hour/minute
    // data.character.name is the phone owner's name (the user's in-story persona) — use it for the greeting;
    // to address the other character use data.character.worldName — don't mix them up
    // when system.launcherPage > 0 set hero's opacity to '0' (fade out on swipe; pure background ambience can stay visible)
    ThemeSDK.reportLayout();       // must re-report whenever hero's height / visibility changes
  }
  function lightRefresh() {        // dataUpdated: per-minute clock tick (page swipes go through dataChanged); only touch textContent and visibility
    var data = ThemeSDK.getData(); // no reportLayout here, no image redraws
  }
  ThemeSDK.on('dataChanged', render);
  ThemeSDK.on('dataUpdated', lightRefresh);
  ThemeSDK.ready();                // must be called, otherwise real devices fall back to the native desktop within 3 seconds
  ThemeSDK.reportLayout();
})();
- Available data: data.system.time { hour, minute }, data.system.launcherPage (0 = first page),
  data.character { name: phone owner's (the user's persona) name, worldName: the other character's name, worldTitle: current world name (fall back to worldName when missing on older apps) }
- ES5 syntax only: var / function / string concatenation; no arrow functions, template literals, optional chaining ?., or destructuring — it must run on old Android WebViews too

—— Performance red lines (real devices are mostly low/mid-range Android) ——
- Animate only with CSS transitions/animations on transform / opacity; no large-area backdrop-filter
- No requestAnimationFrame loops or high-frequency setInterval redraws; clock updates come from dataUpdated pushes — don't start your own timers
- Load large images once (a full-screen background is enough); don't keep swapping image src in JS

—— The theme style I want ——
[Describe it here, e.g.: cream-colored journal style, a big clock at the top with a handwritten-feel greeting, collage decorations on the lower half of the wallpaper, polaroid-style icons]

—— Assets I've prepared (already in the ZIP, reference them accordingly) ——
[List the files you actually prepared, e.g.:
assets/wallpaper.png, assets/wallpaper_night.png, assets/sticker-moon.png,
icons/ contains the full set of 18 icons.
If you have no images at all, write "no assets" so the AI implements everything in CSS]