yana-web 0.1.0

package/mobile/m-system.jsx

@@ -0,0 +1,355 @@
+// Yana Mobile — Agents + Providers + Settings
+/* ---------- Agents ---------- */
+function MAgentCard({ a }) {
+  return (
+    <div className="glass" style={{ borderRadius: "var(--r-lg)", padding: "15px 16px", display: "flex", flexDirection: "column", gap: 10 }}>
+      <div style={{ display: "flex", alignItems: "center", gap: 11 }}>
+        <div style={{
+          width: 36, height: 36, borderRadius: 12, flex: "none", display: "grid", placeItems: "center",
+          fontSize: 14.5, fontWeight: 500, color: "var(--primary)",
+          background: "var(--primary-soft)", boxShadow: "inset 0 1px 0 rgba(255,255,255,.5)",
+        }}>{a.name[0]}</div>
+        <div style={{ lineHeight: 1.25, minWidth: 0, flex: 1 }}>
+          <div style={{ fontSize: 14.5, fontWeight: 500, display: "flex", alignItems: "center", gap: 7 }}>
+            {a.name}
+            {a.core && <span className="chip gold" style={{ fontSize: 10, padding: "1px 7px" }}>Core</span>}
+          </div>
+          <div style={{ fontSize: 12, color: "var(--ink-3)" }}>{a.role}</div>
+        </div>
+        <span className={"dot " + (a.status === "active" ? "on" : "idle")}></span>
+      </div>
+      <div style={{ fontSize: 12.5, color: "var(--ink-2)", lineHeight: 1.5 }}>{a.specialty}</div>
+      <div style={{
+        fontSize: 12, color: a.status === "active" ? "var(--primary)" : "var(--ink-3)",
+        display: "flex", alignItems: "center", gap: 7, paddingTop: 9, borderTop: "1px solid var(--border)",
+      }}>
+        {a.status === "active" ? Icons.spark(13) : Icons.clock(13)} {a.load}
+      </div>
+    </div>
+  );
+}
+
+function MAgents() {
+  const D = window.YANA;
+  const [filter, setFilter] = React.useState("all");
+  const filters = [["all", L("All", "Tất cả")], ["active", L("Active", "Đang chạy")], ["idle", L("Idle", "Nghỉ")]];
+  const list = filter === "all" ? D.agents : D.agents.filter((a) => a.status === filter);
+  const rest = Math.max(0, D.stats.agents - D.agents.length);
+  return (
+    <div data-screen-label="Agent Space" style={{ display: "flex", flexDirection: "column", gap: "var(--gap)" }}>
+      <MHead title={L("Agents", "Tác nhân")} sub={D.stats.agentsActive + L(" of ", " / ") + D.stats.agents + L(" active · Navigator orchestrates, Sentinel reviews", " hoạt động · Navigator điều phối, Sentinel giám sát")}>
+        <button className="pill-primary" style={{ padding: "8px 13px" }}>{Icons.plus(15)} {L("New", "Mới")}</button>
+      </MHead>
+      <div className="hscroll">
+        {filters.map(([id, lbl]) => (
+          <button key={id} className="fchip" data-on={filter === id ? "1" : "0"} onClick={() => setFilter(id)}>{lbl}</button>
+        ))}
+      </div>
+      <div style={{ display: "flex", flexDirection: "column", gap: 11 }}>
+        {list.map((a) => <MAgentCard key={a.id} a={a} />)}
+        {rest > 0 && <div style={{
+          borderRadius: "var(--r-lg)", border: "1.5px dashed var(--border-strong)",
+          display: "grid", placeItems: "center", minHeight: 64, color: "var(--ink-3)", fontSize: 12.5, textAlign: "center", padding: 14,
+        }}>+ {rest} {L("more specialist agents", "tác nhân chuyên môn khác")}</div>}
+      </div>
+    </div>
+  );
+}
+
+/* ---------- Providers ---------- */
+function MProviderCard({ p }) {
+  const keyless = p.id === "ollama" || p.id === "9router";
+  const vault = typeof YanaVault !== "undefined" ? YanaVault : null;
+  const [hasKey, setHasKey] = React.useState(() => keyless || !!(vault && vault.getKey(p.id)));
+  const connected = hasKey;
+
+  async function promptKey() {
+    if (!vault) { window.alert(L("Vault not available.", "Vault chưa sẵn sàng.")); return; }
+    const current = vault.getKey(p.id) || "";
+    const raw = window.prompt(
+      L("API key for ", "API key cho ") + p.name + L(" (leave blank to clear):", " (để trống để xóa):"),
+      current
+    );
+    if (raw === null) return;
+    const trimmed = raw.trim();
+    if (trimmed) { await vault.setKey(p.id, trimmed); setHasKey(true); }
+    else         { vault.removeKey(p.id); setHasKey(false); }
+  }
+
+  const keyDisplay = keyless
+    ? L("Keyless", "Không cần key")
+    : hasKey
+      ? (vault && vault.getKey(p.id) || "").slice(0, 8) + "····"
+      : L("Not set", "Chưa đặt");
+
+  return (
+    <div className="glass" style={{ borderRadius: "var(--r-lg)", padding: "15px 16px", display: "flex", flexDirection: "column", gap: 11 }}>
+      <div style={{ display: "flex", alignItems: "center", gap: 11 }}>
+        <div style={{
+          width: 36, height: 36, borderRadius: 12, flex: "none", display: "grid", placeItems: "center",
+          fontSize: 14.5, fontWeight: 500, color: "var(--primary)",
+          background: "var(--primary-soft)", boxShadow: "inset 0 1px 0 rgba(255,255,255,.5)",
+        }}>{p.name[0]}</div>
+        <div style={{ lineHeight: 1.25, minWidth: 0, flex: 1 }}>
+          <div style={{ fontSize: 14.5, fontWeight: 500 }}>{p.name}</div>
+          <div style={{ fontSize: 12, color: "var(--ink-3)" }}>{p.company}</div>
+        </div>
+        <span className={"chip " + (connected ? "" : "gold")} style={{ fontSize: 11, flex: "none" }}>
+          <span className={"dot " + (connected ? "on" : "idle")} style={{ width: 6, height: 6, boxShadow: "none" }}></span>
+          {connected ? L("Connected", "Đã nối") : L("Standby", "Chờ")}
+        </span>
+      </div>
+      <div style={{ fontSize: 12.5, color: "var(--ink-2)", lineHeight: 1.5 }}>{p.role}</div>
+      <div style={{ display: "flex", gap: 6, flexWrap: "wrap" }}>
+        {p.models.map((m) => <span key={m} className="chip neutral" style={{ fontSize: 11 }}>{m}</span>)}
+      </div>
+      <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between", gap: 10, paddingTop: 10, borderTop: "1px solid var(--border)" }}>
+        <div style={{ lineHeight: 1.35, minWidth: 0 }}>
+          <div style={{ fontSize: 10.5, color: "var(--ink-3)" }}>{L("Key", "Khoá")}</div>
+          <div style={{ fontSize: 11.5, fontWeight: 500, whiteSpace: "nowrap", overflow: "hidden", textOverflow: "ellipsis", maxWidth: 160 }}>{keyDisplay}</div>
+        </div>
+        {!keyless && (
+          <button onClick={promptKey} className={"pill-" + (hasKey ? "neutral" : "primary")} style={{ padding: "6px 13px", fontSize: 12 }}>
+            {hasKey ? L("Change", "Đổi") : L("Set key", "Thêm key")}
+          </button>
+        )}
+      </div>
+    </div>
+  );
+}
+
+function MProviders() {
+  const D = window.YANA;
+  const vault = typeof YanaVault !== "undefined" ? YanaVault : null;
+  const connected = vault ? D.providers.filter((p) => p.id === "ollama" || p.id === "9router" || vault.getKey(p.id)).length : 0;
+  return (
+    <div data-screen-label="Providers" style={{ display: "flex", flexDirection: "column", gap: "var(--gap)" }}>
+      <MHead title={L("Providers", "Nhà cung cấp")} sub={connected + " / " + D.providers.length + L(" connected", " đã nối")} />
+      <div style={{ display: "flex", flexDirection: "column", gap: 11 }}>
+        {D.providers.map((p) => <MProviderCard key={p.id} p={p} />)}
+      </div>
+    </div>
+  );
+}
+
+/* ---------- Settings ---------- */
+const M_THEME_PREVIEWS = [
+  { label: "Lotus Dawn 🌸",  accent: "#b96b80", sky: "linear-gradient(160deg, #faf5f3 30%, #f2dfdc 100%)", wash: "rgba(236,196,134,.45)" },
+  { label: "Jade Lake 🌿",   accent: "#2f7e6e", sky: "linear-gradient(160deg, #f6faf7 30%, #ddeee7 100%)", wash: "rgba(122,184,168,.40)" },
+  { label: "Morning Mist ☁️", accent: "#4a7a6a", sky: "linear-gradient(160deg, #f8f7f4 30%, #ecebe5 100%)", wash: "rgba(214,222,214,.55)" },
+  { label: "Glass Silver ✨", accent: "#3a7ca5", sky: "linear-gradient(160deg, #f3f6fa 30%, #dde6ef 100%)", wash: "rgba(168,199,224,.45)" },
+];
+
+function MThemeCard({ p, active, onPick }) {
+  return (
+    <button onClick={onPick} style={{ background: "none", border: "none", padding: 0, cursor: "pointer", textAlign: "center", color: "inherit", flex: "none" }}>
+      <div style={{
+        width: 96, height: 60, borderRadius: 12, background: p.sky, position: "relative", overflow: "hidden",
+        boxShadow: active ? `0 0 0 2px var(--bg-base), 0 0 0 4px ${p.accent}` : "inset 0 0 0 1px var(--border)",
+        transition: "box-shadow .15s",
+      }}>
+        <div style={{ position: "absolute", inset: 0, background: `radial-gradient(70px 36px at 80% 100%, ${p.wash}, transparent 70%)` }}></div>
+        <div style={{ position: "absolute", left: 7, top: 7, bottom: 7, width: 22, borderRadius: 5, background: "rgba(255,255,255,.65)" }}></div>
+        <div style={{ position: "absolute", left: 34, top: 7, right: 7, height: 18, borderRadius: 5, background: "rgba(255,255,255,.6)" }}></div>
+        <div style={{ position: "absolute", left: 34, top: 29, right: 7, bottom: 7, borderRadius: 5, background: "rgba(255,255,255,.5)" }}></div>
+        <div style={{ position: "absolute", left: 11, top: 11, width: 9, height: 9, borderRadius: 3, background: p.accent, opacity: .9 }}></div>
+      </div>
+      <div style={{ fontSize: 11.5, marginTop: 7, fontWeight: active ? 500 : 400, color: active ? "var(--ink)" : "var(--ink-2)" }}>{p.label}</div>
+    </button>
+  );
+}
+
+function MSwitch({ value, onChange }) {
+  return (
+    <button onClick={() => onChange(!value)} aria-pressed={value} style={{
+      width: 42, height: 25, borderRadius: 99, border: "none", cursor: "pointer", flex: "none",
+      background: value ? "var(--primary)" : "rgba(var(--shadow-rgb), .15)",
+      position: "relative", transition: "background .18s",
+    }}>
+      <span style={{
+        position: "absolute", top: 2, left: value ? 19 : 2, width: 21, height: 21, borderRadius: "50%",
+        background: "white", boxShadow: "0 1px 3px rgba(0,0,0,.25)", transition: "left .18s",
+      }}></span>
+    </button>
+  );
+}
+
+function MSeg({ options, value, onChange }) {
+  return (
+    <div style={{ display: "inline-flex", gap: 2, padding: 3, borderRadius: 10, background: "rgba(var(--shadow-rgb), .07)" }}>
+      {options.map((o) => (
+        <button key={o} onClick={() => onChange(o)} style={{
+          padding: "6px 13px", borderRadius: 8, border: "none", cursor: "pointer", fontSize: 12.5,
+          fontWeight: value === o ? 500 : 400,
+          background: value === o ? "rgba(var(--surface-rgb), .95)" : "transparent",
+          boxShadow: value === o ? "0 1px 3px rgba(var(--shadow-rgb), .15)" : "none",
+          color: "var(--ink)", transition: "background .15s",
+        }}>{o}</button>
+      ))}
+    </div>
+  );
+}
+
+function MSliderRow({ label, value, onChange }) {
+  return (
+    <div style={{ display: "grid", gridTemplateColumns: "92px 1fr 38px", alignItems: "center", gap: 12, padding: "8px 0" }}>
+      <span style={{ fontSize: 13 }}>{label}</span>
+      <input type="range" min="0" max="100" value={value} onChange={(e) => onChange(+e.target.value)}
+        style={{ width: "100%", accentColor: "var(--primary)", height: 4 }} />
+      <span style={{ fontSize: 12, color: "var(--ink-3)", textAlign: "right" }}>{value}%</span>
+    </div>
+  );
+}
+
+const M_ACCENTS = ["#2f7e6e", "#56949f", "#3a7ca5", "#7d6aa8", "#b96b80", "#b07a4f", "#b78f3d", "#6f8f5a", "#5b7282"];
+
+function MAboutField({ id, label, hint, placeholder }) {
+  const key = "yana.about." + id;
+  const [v, setV] = React.useState(() => localStorage.getItem(key) || "");
+  const [saved, setSaved] = React.useState(false);
+  const timer = React.useRef(null);
+  function onChange(e) {
+    const val = e.target.value;
+    setV(val);
+    localStorage.setItem(key, val);
+    setSaved(false);
+    clearTimeout(timer.current);
+    timer.current = setTimeout(() => setSaved(true), 800);
+  }
+  return (
+    <div style={{ display: "flex", flexDirection: "column", gap: 6 }}>
+      <div style={{ display: "flex", alignItems: "baseline", justifyContent: "space-between", gap: 10 }}>
+        <label style={{ fontSize: 13, fontWeight: 500 }}>{label}</label>
+        <span style={{ fontSize: 10.5, color: "var(--good)", opacity: saved ? 1 : 0, transition: "opacity .3s", display: "inline-flex", alignItems: "center", gap: 4, flex: "none" }}>
+          {Icons.check(11)} {L("Planted", "Đã trồng")}
+        </span>
+      </div>
+      {hint && <div style={{ fontSize: 12, color: "var(--ink-3)", marginTop: -3 }}>{hint}</div>}
+      <textarea value={v} onChange={onChange} rows={3} placeholder={placeholder}
+        style={{
+          width: "100%", resize: "vertical", padding: "10px 13px", borderRadius: "var(--r-sm)",
+          border: "1px solid var(--border)", background: "rgba(var(--surface-rgb), .6)", color: "var(--ink)",
+          fontFamily: "inherit", fontSize: 13.5, lineHeight: 1.55, outline: "none",
+        }}
+        onFocus={(e) => e.target.style.borderColor = "var(--primary)"}
+        onBlur={(e) => e.target.style.borderColor = "var(--border)"} />
+    </div>
+  );
+}
+
+function MSettingRow({ label, desc, value }) {
+  return (
+    <div className="mrow" style={{ display: "flex", alignItems: "center", justifyContent: "space-between", gap: 14 }}>
+      <div style={{ lineHeight: 1.35, minWidth: 0 }}>
+        <div style={{ fontSize: 13.5, fontWeight: 500 }}>{label}</div>
+        {desc && <div style={{ fontSize: 11.5, color: "var(--ink-3)" }}>{desc}</div>}
+      </div>
+      <span className="chip neutral" style={{ flex: "none", fontSize: 11 }}>{value}</span>
+    </div>
+  );
+}
+
+function _mDetectTz() {
+  try {
+    const tz = Intl.DateTimeFormat().resolvedOptions().timeZone || "UTC";
+    const offMin = -new Date().getTimezoneOffset();
+    const sign = offMin >= 0 ? "+" : "−";
+    const h = Math.floor(Math.abs(offMin) / 60);
+    const m = Math.abs(offMin) % 60;
+    return "GMT" + sign + h + (m ? ":" + String(m).padStart(2, "0") : "") + " · " + tz.split("/").pop().replace(/_/g, " ");
+  } catch (_) { return "UTC"; }
+}
+
+const M_PROVIDER_NAMES = { claude: "Claude", openai: "OpenAI", gemini: "Gemini", groq: "Groq", deepseek: "DeepSeek", openrouter: "OpenRouter", "9router": "9Router", ollama: "Ollama" };
+
+function MSettings({ t, setTweak }) {
+  const _p = mGetProviderConfig().provider;
+  const _orchModel = M_CHAT_MODELS[_p] || _p;
+  const _wname = localStorage.getItem("yana.workspace.name") ||
+    ((window.YANA.username ? window.YANA.username + "'s Lake" : L("Yana's Lake", "Mặt hồ của Yana")));
+  const _chain = (() => {
+    const order = ["claude", "openai", "gemini", "groq", "deepseek", "openrouter", "9router"];
+    if (typeof YanaVault === "undefined") return "—";
+    const found = order.filter((id) => YanaVault.getKey(id));
+    return found.map((id) => M_PROVIDER_NAMES[id] || id).join(" → ") || L("None — add key in Providers", "Chưa có — thêm key ở Providers");
+  })();
+  return (
+    <div data-screen-label="Settings" style={{ display: "flex", flexDirection: "column", gap: "var(--gap)" }}>
+      <MHead title={L("Settings", "Cài đặt")} sub={L("Quiet defaults. Everything supervised by YAMTAM Core.", "Mặc định tĩnh lặng. Mọi thứ do YAMTAM Core giám sát.")} />
+
+      <MCard title={L("Appearance", "Giao diện")}>
+        <div className="hscroll" style={{ marginBottom: 6 }}>
+          {M_THEME_PREVIEWS.map((p) => (
+            <MThemeCard key={p.label} p={p} active={t.theme === p.label} onPick={() => setTweak("theme", p.label)} />
+          ))}
+        </div>
+
+        <div style={{ display: "flex", alignItems: "center", gap: 12, padding: "13px 0", borderTop: "1px solid var(--border)", flexWrap: "wrap" }}>
+          <span style={{ fontSize: 13, fontWeight: 500 }}>{L("Accent", "Màu nhấn")}</span>
+          <div style={{ display: "flex", gap: 9, alignItems: "center", flexWrap: "wrap" }}>
+            <button onClick={() => setTweak("accent", "")} title="Theme default" style={{
+              width: 24, height: 24, borderRadius: "50%", cursor: "pointer", padding: 0, border: "none",
+              background: "conic-gradient(#2f7e6e, #3a7ca5, #b96b80, #b78f3d, #2f7e6e)",
+              boxShadow: !t.accent ? "0 0 0 2px var(--bg-base), 0 0 0 4px var(--ink-3)" : "inset 0 0 0 1px rgba(0,0,0,.08)",
+            }}></button>
+            {M_ACCENTS.map((c) => (
+              <button key={c} onClick={() => setTweak("accent", c)} style={{
+                width: 24, height: 24, borderRadius: "50%", cursor: "pointer", padding: 0, border: "none", background: c,
+                boxShadow: t.accent === c ? `0 0 0 2px var(--bg-base), 0 0 0 4px ${c}` : "inset 0 0 0 1px rgba(0,0,0,.08)",
+              }}></button>
+            ))}
+          </div>
+        </div>
+
+        <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between", gap: 12, padding: "13px 0", borderTop: "1px solid var(--border)" }}>
+          <span style={{ fontSize: 13, fontWeight: 500 }}>{L("Density", "Mật độ")}</span>
+          <MSeg options={["Compact", "Regular", "Spacious"]} value={t.layout} onChange={(v) => setTweak("layout", v)} />
+        </div>
+
+        <div style={{ padding: "8px 0 4px", borderTop: "1px solid var(--border)" }}>
+          <MSliderRow label={L("Blur", "Mờ")} value={t.blur} onChange={(v) => setTweak("blur", v)} />
+          <MSliderRow label={L("Transparency", "Trong suốt")} value={t.transparency} onChange={(v) => setTweak("transparency", v)} />
+          <MSliderRow label={L("Reflection", "Phản chiếu")} value={t.reflection} onChange={(v) => setTweak("reflection", v)} />
+          <MSliderRow label={L("Depth", "Chiều sâu")} value={t.depth} onChange={(v) => setTweak("depth", v)} />
+        </div>
+
+        <div style={{ paddingTop: 8, borderTop: "1px solid var(--border)" }}>
+          {[[L("Show agents on Lake", "Tác nhân trên Mặt hồ"), "showAgents"], [L("Show missions on Lake", "Nhiệm vụ trên Mặt hồ"), "showMissions"], [L("Show Memory Garden", "Vườn ký ức"), "showMemory"], [L("Show system status", "Trạng thái hệ thống"), "showSystem"]].map(([label, key]) => (
+            <div key={key} style={{ display: "flex", alignItems: "center", justifyContent: "space-between", gap: 12, padding: "9px 0" }}>
+              <span style={{ fontSize: 13 }}>{label}</span>
+              <MSwitch value={t[key]} onChange={(v) => setTweak(key, v)} />
+            </div>
+          ))}
+        </div>
+      </MCard>
+
+      <MCard title={L("About you", "Về bạn")} aside={<span className="chip pink" style={{ fontSize: 10.5 }}>{Icons.memory(12)} {L("Pinned", "Đã ghim")}</span>}>
+        <p style={{ margin: "0 0 14px", fontSize: 12.5, color: "var(--ink-2)", lineHeight: 1.55 }}>
+          {L("Yana reads this before every mission. The more honestly you describe yourself, the better she routes and plans for you.", "Yana đọc phần này trước mỗi nhiệm vụ. Bạn mô tả càng thật, Yana càng định tuyến và lập kế hoạch tốt hơn.")}
+        </p>
+        <div style={{ display: "flex", flexDirection: "column", gap: 16 }}>
+          <MAboutField id="who" label={L("Who you are", "Bạn là ai")} hint={L("Role, what you're building, how you work", "Vai trò, đang xây gì, cách làm việc")} placeholder={L("e.g. I'm a system builder. I think in workflows, not code.", "vd: Tôi là người dựng hệ thống. Tôi nghĩ theo quy trình, không phải code.")} />
+          <MAboutField id="strengths" label={L("Strengths", "Điểm mạnh")} hint={L("What Yana should lean on", "Điều Yana nên dựa vào")} placeholder={L("e.g. Big-picture architecture, fast decisions.", "vd: Kiến trúc tổng thể, quyết định nhanh.")} />
+          <MAboutField id="style" label={L("How Yana should respond", "Cách Yana trả lời")} hint={L("Tone, length, language", "Giọng, độ dài, ngôn ngữ")} placeholder={L("e.g. Calm and brief. No hype.", "vd: Bình tĩnh, ngắn gọn. Không hô hào.")} />
+        </div>
+      </MCard>
+
+      <MCard title={L("Workspace", "Không gian")}>
+        <MSettingRow label={L("Workspace name", "Tên không gian")} value={_wname} />
+        <MSettingRow label={L("Timezone", "Múi giờ")} desc={L("Detected from device", "Phát hiện từ thiết bị")} value={_mDetectTz()} />
+      </MCard>
+      <MCard title={L("Orchestration", "Điều phối")}>
+        <MSettingRow label={L("Default orchestrator", "Điều phối mặc định")} desc={L("Plans and delegates missions", "Lập kế hoạch & giao việc")} value={"Navigator · " + _orchModel} />
+        <MSettingRow label={L("Active provider", "Nhà cung cấp hiện dùng")} desc={L("First key you have set", "Key đầu tiên đã cài")} value={M_PROVIDER_NAMES[_p] || _p} />
+        <MSettingRow label={L("Fallback chain", "Chuỗi dự phòng")} value={_chain} />
+      </MCard>
+      <MCard title={L("Safety", "An toàn")}>
+        <MSettingRow label={L("Gate mode", "Chế độ cổng")} desc={L("Every action is reviewed", "Mọi hành động được duyệt")} value={L("Strict", "Nghiêm ngặt")} />
+        <MSettingRow label={L("Merge protection", "Bảo vệ merge")} desc={L("Sentinel sign-off before main", "Sentinel duyệt trước main")} value={L("On", "Bật")} />
+        <MSettingRow label={L("Incident retention", "Lưu sự cố")} value={L("90 days", "90 ngày")} />
+      </MCard>
+    </div>
+  );
+}
+
+Object.assign(window, { MAgents, MProviders, MSettings });

package/mobile/mobile.css

@@ -0,0 +1,180 @@
+/* ============================================================
+   Yana Mobile — layout shell on top of yana/themes.css tokens.
+   A phone-shaped app column, centered on the lake on wider screens,
+   full-bleed on a real handset. Translucent top bar + tab bar,
+   slide-up sheets — native iOS rhythm over Yana's liquid glass.
+   ============================================================ */
+
+html, body { height: 100%; overflow: hidden; }
+#root { height: 100%; }
+body { overscroll-behavior: none; }
+
+/* centers the app column on the lake */
+.app-stage { position: fixed; inset: 0; z-index: 1; display: grid; place-items: center; }
+
+.app-mobile {
+  position: relative;
+  width: 100%;
+  max-width: 460px;
+  height: 100dvh;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+}
+@media (min-width: 500px) {
+  .app-mobile {
+    height: min(900px, calc(100dvh - 36px));
+    border-radius: 34px;
+    border: 1px solid var(--border);
+    box-shadow:
+      0 1px 0 rgba(255,255,255,.5) inset,
+      0 40px 90px rgba(var(--shadow-rgb), .22);
+  }
+}
+
+/* ---------- Top bar (translucent) ---------- */
+.mtopbar {
+  flex: none;
+  display: flex; align-items: center; justify-content: space-between; gap: 10px;
+  padding: calc(env(safe-area-inset-top, 0px) + 11px) 16px 11px;
+  background: rgba(var(--surface-rgb), calc(0.72 - var(--alpha) * 0.18));
+  -webkit-backdrop-filter: blur(calc(var(--glass-blur-max) * var(--blur))) saturate(1.2);
+  backdrop-filter: blur(calc(var(--glass-blur-max) * var(--blur))) saturate(1.2);
+  border-bottom: 1px solid var(--border);
+  z-index: 20;
+}
+.mtopbar-l { display: flex; align-items: center; gap: 8px; min-width: 0; }
+.mtopbar-title { font-size: 17px; font-weight: 500; letter-spacing: -0.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
+.mtopbar-r { display: flex; align-items: center; gap: 8px; flex: none; }
+
+.icon-btn {
+  width: 36px; height: 36px; border-radius: 50%; border: none; cursor: pointer; flex: none;
+  display: grid; place-items: center; color: var(--ink-2);
+  background: rgba(var(--surface-rgb), .5);
+}
+.icon-btn:active { background: var(--primary-soft); color: var(--primary); }
+
+.lang-pill {
+  height: 30px; padding: 0 12px; border-radius: 99px; border: 1px solid var(--border);
+  background: rgba(var(--surface-rgb), .5); color: var(--ink-2);
+  font: 600 11.5px/1 var(--font-ui); letter-spacing: .06em; cursor: pointer;
+}
+.lang-pill:active { color: var(--primary); border-color: var(--primary-soft); }
+
+.avatar-btn {
+  width: 32px; height: 32px; border-radius: 50%; border: none; cursor: pointer; flex: none;
+  color: white; font: 600 12px/1 var(--font-ui); display: grid; place-items: center;
+  background: linear-gradient(145deg, var(--gold), color-mix(in oklab, var(--gold) 55%, white));
+  box-shadow: 0 2px 8px color-mix(in oklab, var(--gold) 30%, transparent);
+}
+
+/* ---------- Main scroll region ---------- */
+.mmain {
+  flex: 1; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch;
+  display: flex; flex-direction: column; gap: var(--gap);
+  padding: 18px 16px calc(22px + env(safe-area-inset-bottom, 0px));
+}
+.mmain.flush { padding: 0; gap: 0; overflow: hidden; }
+.mmain::-webkit-scrollbar { width: 0; }
+
+/* large title block */
+.mhead { margin: 2px 0 4px; }
+.mhead-row { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; }
+.mhead-title { margin: 0; font-size: 27px; }
+.mhead-sub { margin: 6px 0 0; font-size: 13px; color: var(--ink-2); line-height: 1.45; }
+
+/* ---------- Bottom tab bar (translucent) ---------- */
+.mtabbar {
+  flex: none;
+  display: flex; gap: 2px;
+  padding: 7px 6px calc(env(safe-area-inset-bottom, 0px) + 7px);
+  background: rgba(var(--surface-rgb), calc(0.76 - var(--alpha) * 0.16));
+  -webkit-backdrop-filter: blur(calc(var(--glass-blur-max) * var(--blur))) saturate(1.25);
+  backdrop-filter: blur(calc(var(--glass-blur-max) * var(--blur))) saturate(1.25);
+  border-top: 1px solid var(--border);
+  z-index: 20;
+}
+.mtab {
+  flex: 1; min-width: 0; border: none; background: none; cursor: pointer;
+  display: flex; flex-direction: column; align-items: center; gap: 3px;
+  padding: 6px 2px 4px; min-height: 50px; color: var(--ink-3);
+  font: 500 10px/1 var(--font-ui); letter-spacing: .01em;
+  transition: color .15s;
+}
+.mtab[data-on="1"] { color: var(--primary); }
+.mtab span { white-space: nowrap; }
+.mtab .tab-ic { transition: transform .18s cubic-bezier(.3,.7,.4,1); }
+.mtab[data-on="1"] .tab-ic { transform: translateY(-1px); }
+
+/* ---------- Slide-up sheet ---------- */
+.sheet-backdrop {
+  position: absolute; inset: 0; z-index: 40;
+  background: rgba(var(--shadow-rgb), .32);
+  -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px);
+  opacity: 0; transition: opacity .28s ease;
+}
+.sheet-backdrop[data-show="1"] { opacity: 1; }
+.sheet {
+  position: absolute; left: 0; right: 0; bottom: 0; z-index: 41;
+  max-height: 86%; display: flex; flex-direction: column;
+  padding: 8px 18px calc(20px + env(safe-area-inset-bottom, 0px));
+  background: rgba(var(--surface-rgb), calc(0.95 - var(--alpha) * 0.18));
+  -webkit-backdrop-filter: blur(34px) saturate(1.5); backdrop-filter: blur(34px) saturate(1.5);
+  border-top: 1px solid rgba(255,255,255,.5);
+  border-radius: 26px 26px 0 0;
+  box-shadow: 0 -10px 40px rgba(var(--shadow-rgb), .18);
+  transform: translateY(100%); transition: transform .3s cubic-bezier(.32,.72,.3,1);
+}
+.sheet[data-show="1"] { transform: translateY(0); }
+.sheet-grab { width: 38px; height: 5px; border-radius: 99px; background: var(--border-strong); margin: 4px auto 12px; flex: none; }
+.sheet-title { font-size: 12px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 12px; }
+.sheet-body { overflow-y: auto; display: flex; flex-direction: column; gap: 12px; min-height: 0; }
+.sheet-body::-webkit-scrollbar { width: 0; }
+
+/* ---------- More sheet ---------- */
+.more-grid { display: flex; flex-direction: column; gap: 6px; }
+.more-item {
+  display: flex; align-items: center; gap: 13px; width: 100%; text-align: left;
+  padding: 13px 14px; border-radius: var(--r-md); border: none; cursor: pointer; color: inherit;
+  background: rgba(var(--surface-rgb), .55);
+}
+.more-item:active { background: var(--primary-soft); }
+.more-ic { width: 34px; height: 34px; border-radius: 11px; flex: none; display: grid; place-items: center; color: var(--primary); background: var(--primary-soft); }
+.more-lbl { flex: 1; font-size: 14.5px; font-weight: 500; }
+.more-chev { color: var(--ink-3); display: inline-flex; }
+
+/* ---------- Horizontal scroll rails ---------- */
+.hscroll {
+  display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none;
+  margin: 0 -16px; padding: 2px 16px;
+}
+.hscroll::-webkit-scrollbar { height: 0; }
+.hscroll > * { flex: none; }
+
+/* ---------- Pill / filter chips ---------- */
+.fchip {
+  padding: 7px 15px; border-radius: 99px; font: 500 13px/1 var(--font-ui); cursor: pointer;
+  border: 1px solid var(--border); background: rgba(var(--surface-rgb), .55); color: var(--ink-2);
+  white-space: nowrap;
+}
+.fchip[data-on="1"] { background: var(--primary); color: white; border-color: transparent; }
+
+/* primary action pill */
+.pill-primary {
+  display: inline-flex; align-items: center; gap: 7px; padding: 9px 16px; border-radius: 99px;
+  border: none; cursor: pointer; background: var(--primary); color: white;
+  font: 500 13px/1 var(--font-ui); flex: none;
+  box-shadow: 0 4px 14px color-mix(in oklab, var(--primary) 30%, transparent);
+}
+.pill-ghost {
+  display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px; border-radius: 99px;
+  border: 1px solid var(--border); cursor: pointer; background: rgba(var(--surface-rgb), .5);
+  color: var(--ink-2); font: 500 12.5px/1 var(--font-ui); flex: none;
+}
+
+/* hairline list rows inside cards */
+.mrow { padding: 11px 0; border-bottom: 1px solid var(--border); }
+.mrow:last-child { border-bottom: none; }
+.mrow:first-child { padding-top: 2px; }
+
+input, textarea, select, button { font-family: var(--font-ui); }