:root {
  color-scheme: light;
  --blue: #0877ed;
  --blue-deep: #064bc9;
  --cyan: #22bdf0;
  --navy: #061a50;
  --muted: #657fa6;
  --ice: #eaf6ff;
  --glass: rgba(255, 255, 255, .82);
  --mobile-safe-top: env(safe-area-inset-top, 0px);
  --mobile-safe-bottom: env(safe-area-inset-bottom, 0px);
  font-family: Inter, "PingFang SC", "Microsoft YaHei", system-ui, sans-serif;
}
* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; background: #e7f3fd; color: var(--navy); }
body { overflow-x: hidden; }
button, input { font: inherit; }
.mobile-h5-splash { position: fixed; inset: 0; z-index: 10000; min-height: 100vh; min-height: 100dvh; overflow: hidden; color: #fff; background: #0756d9; opacity: 1; transition: opacity .35s ease; }
.mobile-h5-splash::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(180deg, rgba(0, 35, 130, .34) 0, rgba(0, 55, 164, .04) 29%, rgba(0, 31, 111, .06) 70%, rgba(0, 28, 101, .34) 100%); }
.mobile-h5-splash-art { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; }
.mobile-splash-skip { position: absolute; z-index: 1; top: calc(env(safe-area-inset-top, 0px) + 14px); left: 16px; min-height: 36px; padding: 6px 16px; border: 1px solid rgba(255,255,255,.4); border-radius: 22px; background: rgba(0,35,130,.2); color: #fff; font-size: 14px; cursor: pointer; }
.mobile-h5-splash.is-exiting { opacity: 0; pointer-events: none; }
.mobile-h5-splash.is-hidden { display: none; }
@keyframes mobileSplashFailsafe { to { opacity: 0; visibility: hidden; pointer-events: none; } }
.mobile-h5-splash { animation: mobileSplashFailsafe .01s linear 4s forwards; }
@media (prefers-reduced-motion: reduce) {
  .mobile-h5-splash { transition-duration: .08s; }
}

.mobile-auth-modal[hidden]{display:none!important}.mobile-auth-modal{position:fixed;inset:0;z-index:1200;display:grid;place-items:end center}.mobile-auth-backdrop{position:absolute;inset:0;background:rgba(10,28,58,.52);backdrop-filter:blur(5px)}.mobile-auth-sheet{position:relative;width:min(100%,520px);padding:26px 22px calc(28px + env(safe-area-inset-bottom));border-radius:28px 28px 0 0;background:linear-gradient(155deg,#f9fcff,#eaf4ff);box-shadow:0 -16px 50px rgba(11,64,126,.24);color:#102b57}.mobile-auth-close{position:absolute;top:14px;right:16px;width:36px;height:36px;border:0;border-radius:50%;background:#e6f0fc;color:#477098;font-size:26px}.mobile-auth-brand{margin-bottom:20px}.mobile-auth-brand b{display:block;font-size:19px}.mobile-auth-brand small{color:#4e91d4;letter-spacing:.18em;font-size:9px}.mobile-auth-sheet h2{margin:0;font-size:27px}.mobile-auth-sheet>p{color:#7790aa;font-size:13px}.mobile-auth-sheet form{display:grid;gap:13px}.mobile-auth-sheet form label:not(.mobile-auth-remember){display:grid;gap:7px;color:#56718e;font-size:13px;font-weight:700}.mobile-auth-sheet input[type=text],.mobile-auth-sheet input[type=password]{box-sizing:border-box;width:100%;border:1px solid #cbdff4;border-radius:13px;padding:14px 15px;background:#fff;color:#15345f;font-size:16px}.mobile-auth-remember{display:flex;align-items:center;gap:8px;color:#68819c;font-size:13px}.mobile-auth-submit{border:0;border-radius:14px;padding:14px;color:#fff;font-size:17px;font-weight:800;background:linear-gradient(100deg,#075bc8,#11add0)}.mobile-auth-error{margin:0;color:#c43b4b;font-size:13px}body.mobile-auth-open{overflow:hidden}

/* H5 登录器使用整页比例，与手机端页面保持一致，不使用底部半框抽屉。 */
.mobile-auth-modal { position: fixed !important; inset: 0 !important; z-index: 99999 !important; display: flex !important; align-items: stretch !important; justify-content: stretch !important; }
.mobile-auth-modal[hidden] { display: none !important; }
.mobile-auth-backdrop { background: #edf6ff !important; backdrop-filter: none !important; }
.mobile-auth-sheet { width: 100% !important; min-height: 100% !important; box-sizing: border-box !important; border-radius: 0 !important; padding: max(54px, env(safe-area-inset-top)) 24px calc(30px + env(safe-area-inset-bottom)) !important; display: flex !important; flex-direction: column !important; justify-content: center !important; background: linear-gradient(180deg,#eef8ff 0%,#f8fbff 48%,#e8f4ff 100%) !important; box-shadow: none !important; }
.mobile-auth-sheet h2 { text-align: center !important; font-size: 30px !important; letter-spacing: .04em !important; }
.mobile-auth-sheet > p { text-align: center !important; }
.mobile-auth-brand { text-align: center !important; margin-bottom: 30px !important; }
.mobile-auth-brand b { font-size: 24px !important; color: #102b57 !important; }
.mobile-auth-brand small { display: none !important; }
.mobile-auth-sheet form { width: min(100%,420px); margin: 10px auto 0; }
.mobile-auth-sheet form label:not(.mobile-auth-remember) { font-size: 14px !important; }
.mobile-auth-sheet { max-height: calc(100vh - 16px); max-height: calc(100dvh - 16px); overflow-y: auto; }
.mobile-auth-sheet form label.mobile-auth-agreement { display: flex; align-items: flex-start; gap: 8px; color: #607b96; font-size: 12px !important; font-weight: 500; line-height: 1.5; }
.mobile-auth-agreement input { flex: 0 0 auto; width: 17px; height: 17px; margin: 1px 0 0; accent-color: #0877df; }
.mobile-auth-agreement a { color: #0877df; text-decoration: underline; }
.mobile-auth-sheet input[type=text], .mobile-auth-sheet input[type=password] { background: #fff !important; border-color: #d5e5f4 !important; border-radius: 5px !important; min-height: 52px !important; }
.mobile-auth-submit { min-height: 52px !important; border-radius: 5px !important; margin-top: 8px !important; }
.mobile-auth-close { background: rgba(255,255,255,.86) !important; }

/* 桌面预览时只覆盖中间的手机画布；窄屏设备仍然自然占满屏幕。 */
.mobile-auth-modal { left: 50% !important; right: auto !important; width: min(100vw, 430px) !important; transform: translateX(-50%) !important; }
.mobile-app { position: relative; width: 100%; min-height: 100vh; min-height: 100dvh; margin: 0 auto; padding-top: var(--mobile-safe-top); overflow: hidden; background: #edf8ff; }
.mobile-app button { -webkit-tap-highlight-color: transparent; }
.mobile-app button:active { transform: translateY(1px); }
.mobile-app svg { fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.lucide-icon { --lucide-icon: none; display: inline-block; width: 1em; height: 1em; flex: 0 0 auto; color: #0877e8; background-color: currentColor; -webkit-mask: var(--lucide-icon) center / contain no-repeat; mask: var(--lucide-icon) center / contain no-repeat; font-size: inherit; font-style: normal; }
img.lucide-icon { object-fit: contain; background: transparent; -webkit-mask: none; mask: none; }
.lucide-icon[data-icon="bell-dot"] { --lucide-icon: url("/icons/mobile-h5/lucide/bell-dot.svg"); }
.lucide-icon[data-icon="box"] { --lucide-icon: url("/icons/mobile-h5/lucide/box.svg"); }
.lucide-icon[data-icon="building-2"] { --lucide-icon: url("/icons/mobile-h5/lucide/building-2.svg"); }
.lucide-icon[data-icon="clipboard-list"] { --lucide-icon: url("/icons/mobile-h5/lucide/clipboard-list.svg"); }
.lucide-icon[data-icon="crown"] { --lucide-icon: url("/icons/mobile-h5/lucide/crown.svg"); }
.lucide-icon[data-icon="eraser"] { --lucide-icon: url("/icons/mobile-h5/lucide/eraser.svg"); }
.lucide-icon[data-icon="file-down"] { --lucide-icon: url("/icons/mobile-h5/lucide/file-down.svg"); }
.lucide-icon[data-icon="file-pen-line"] { --lucide-icon: url("/icons/mobile-h5/lucide/file-pen-line.svg"); }
.lucide-icon[data-icon="file-text"] { --lucide-icon: url("/icons/mobile-h5/lucide/file-text.svg"); }
.lucide-icon[data-icon="hd"] { --lucide-icon: url("/icons/mobile-h5/lucide/hd.svg"); }
.lucide-icon[data-icon="hexagon"] { --lucide-icon: url("/icons/mobile-h5/lucide/hexagon.svg"); }
.lucide-icon[data-icon="history"] { --lucide-icon: url("/icons/mobile-h5/lucide/history.svg"); }
.lucide-icon[data-icon="house"] { --lucide-icon: url("/icons/mobile-h5/lucide/house.svg"); }
.lucide-icon[data-icon="image"] { --lucide-icon: url("/icons/mobile-h5/lucide/image.svg"); }
.lucide-icon[data-icon="layers-3"] { --lucide-icon: url("/icons/mobile-h5/lucide/layers-3.svg"); }
.lucide-icon[data-icon="layout-grid"] { --lucide-icon: url("/icons/mobile-h5/lucide/layout-grid.svg"); }
.lucide-icon[data-icon="log-out"] { --lucide-icon: url("/icons/mobile-h5/lucide/log-out.svg"); }
.lucide-icon[data-icon="map-pin"] { --lucide-icon: url("/icons/mobile-h5/lucide/map-pin.svg"); }
.lucide-icon[data-icon="package"] { --lucide-icon: url("/icons/mobile-h5/lucide/package.svg"); }
.lucide-icon[data-icon="panels-top-left"] { --lucide-icon: url("/icons/mobile-h5/lucide/panels-top-left.svg"); }
.lucide-icon[data-icon="pen-tool"] { --lucide-icon: url("/icons/mobile-h5/lucide/pen-tool.svg"); }
.lucide-icon[data-icon="plus"] { --lucide-icon: url("/icons/mobile-h5/lucide/plus.svg"); }
.lucide-icon[data-icon="presentation"] { --lucide-icon: url("/icons/mobile-h5/lucide/presentation.svg"); }
.lucide-icon[data-icon="scan-line"] { --lucide-icon: url("/icons/mobile-h5/lucide/scan-line.svg"); }
.lucide-icon[data-icon="search"] { --lucide-icon: url("/icons/mobile-h5/lucide/search.svg"); }
.lucide-icon[data-icon="shield-check"] { --lucide-icon: url("/icons/mobile-h5/lucide/shield-check.svg"); }
.lucide-icon[data-icon="sparkles"] { --lucide-icon: url("/icons/mobile-h5/lucide/sparkles.svg"); }
.lucide-icon[data-icon="user-round"] { --lucide-icon: url("/icons/mobile-h5/lucide/user-round.svg"); }
.lucide-icon[data-icon="vector-square"] { --lucide-icon: url("/icons/mobile-h5/lucide/vector-square.svg"); }
.lucide-icon[data-icon="video"] { --lucide-icon: url("/icons/mobile-h5/lucide/video.svg"); }
.lucide-icon[data-icon="wand-sparkles"] { --lucide-icon: url("/icons/mobile-h5/lucide/wand-sparkles.svg"); }
.mobile-page { width: 100%; min-height: 100vh; min-height: 100dvh; }
.mobile-brand { display: flex; min-width: 0; align-items: center; }
.mobile-brand img { display: block; width: 112px; height: auto; object-fit: contain; }
.mobile-brand > i { width: 1px; height: 23px; margin: 0 13px; background: rgba(38, 73, 126, .55); }
.mobile-brand > span { color: #18366b; font-size: 13px; font-weight: 800; white-space: nowrap; }

/* Landing */
.mobile-landing { position: relative; padding-bottom: 28px; background: radial-gradient(circle at 52% 32%, rgba(112, 205, 255, .38), transparent 26%), radial-gradient(circle at 8% 71%, rgba(95, 191, 255, .22), transparent 28%), linear-gradient(155deg, #fff 1%, #e6f5ff 45%, #f7fbff 100%); }
.mobile-landing::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(110deg, transparent 12%, rgba(135, 197, 255, .16) 28%, transparent 42%, rgba(91, 178, 242, .12) 65%, transparent 78%); }
.landing-header, .home-header { position: relative; z-index: 12; display: flex; align-items: center; justify-content: space-between; }
.landing-header { height: 72px; padding: 0 20px; }
.hamburger { display: grid; width: 44px; height: 44px; align-content: center; justify-content: center; gap: 6px; border: 0; background: transparent; }
.hamburger span { display: block; width: 24px; height: 3px; border-radius: 4px; background: #052a76; }
.mobile-landing main { position: relative; z-index: 1; padding: 24px 16px 0; }
.landing-hero { text-align: center; }
.eyebrow { margin: 5px 0 13px; color: #1379e5; font: 800 11px/1.2 Arial, sans-serif; letter-spacing: .34em; }
.landing-hero h1 { margin: 0; color: #071951; font-size: 35px; font-weight: 950; line-height: 1.06; letter-spacing: -.055em; text-shadow: 0 4px 18px rgba(6, 45, 110, .09); }
.landing-hero h1 em { display: block; margin-top: 5px; color: transparent; font-size: 45px; font-style: normal; letter-spacing: -.07em; background: linear-gradient(90deg, #0758d1, #168ef4 68%, #13b7d8); -webkit-background-clip: text; background-clip: text; }
.landing-lead { margin: 22px auto 20px; color: #244979; font-size: 16px; font-weight: 650; line-height: 1.65; }
.landing-actions { display: flex; justify-content: center; gap: 12px; }
.landing-actions button { display: flex; height: 52px; min-width: 154px; align-items: center; justify-content: center; gap: 10px; padding: 0 22px; border: 0; border-radius: 999px; color: #fff; background: linear-gradient(105deg, #0638b9, #0789f1 64%, #18c2e7); box-shadow: 0 13px 28px rgba(7, 100, 216, .25); font-size: 16px; font-weight: 900; }
.landing-actions button:nth-child(2) { min-width: 142px; color: #0e408a; background: rgba(255, 255, 255, .82); box-shadow: 0 8px 22px rgba(38, 89, 145, .08); }
.landing-actions button i { display: grid; width: 25px; height: 25px; place-items: center; border-radius: 50%; color: #fff; background: #0c58b9; font-size: 9px; font-style: normal; }
.robot-stage { position: relative; height: 468px; margin: 15px -2px 8px; }
.robot-halo { position: absolute; left: 50%; top: 78px; width: 276px; height: 320px; overflow: visible; transform: translateX(-50%); }
.robot-halo::before { content: ""; position: absolute; z-index: -1; inset: 22px -10px -8px; border-radius: 48%; background: radial-gradient(circle at 50% 48%, rgba(255, 255, 255, .98) 0, rgba(169, 226, 255, .58) 48%, transparent 73%); filter: blur(3px); }
.robot-halo::after { content: ""; position: absolute; left: 35px; right: 35px; bottom: 5px; height: 38px; border: 2px solid rgba(52, 185, 255, .68); border-radius: 50%; box-shadow: 0 0 22px #45c8ff, 0 0 0 12px rgba(98, 194, 255, .14); }
.robot-halo > span { position: absolute; z-index: 2; right: -2px; bottom: 5px; width: 122px; height: 40px; background: linear-gradient(145deg, transparent, rgba(220,244,255,.9) 58%, rgba(232,248,255,.98)); filter: blur(3px); pointer-events: none; }
.robot-halo img { display: block; width: 100%; height: 100%; object-fit: contain; object-position: center; -webkit-mask-image: radial-gradient(ellipse 72% 73% at 50% 48%, #000 66%, rgba(0,0,0,.78) 78%, transparent 100%); mask-image: radial-gradient(ellipse 72% 73% at 50% 48%, #000 66%, rgba(0,0,0,.78) 78%, transparent 100%); filter: saturate(1.04) drop-shadow(0 18px 28px rgba(24, 120, 205, .22)); }
.robot-stage > p { position: absolute; right: 42px; bottom: 10px; margin: 0; color: #1269d4; font-size: 15px; font-weight: 850; font-style: italic; transform: rotate(-8deg); }
.robot-feature { position: absolute; z-index: 3; display: grid; width: 130px; min-height: 116px; grid-template-columns: 43px 1fr; align-items: center; padding: 13px 10px; border: 1px solid rgba(255, 255, 255, .78); border-radius: 20px; text-align: left; background: linear-gradient(145deg, rgba(255,255,255,.92), rgba(239,248,255,.72)); box-shadow: 0 13px 30px rgba(36, 99, 165, .15), inset 0 1px 0 #fff; backdrop-filter: blur(15px); }
.robot-feature.left { left: 0; }
.robot-feature.right { right: 0; }
.robot-feature.top { top: 58px; }
.robot-feature.bottom { top: 265px; }
.robot-feature b { display: block; color: #082d67; font-size: 14px; white-space: nowrap; }
.robot-feature span { display: block; margin-top: 7px; color: #6983a6; font-size: 11px; line-height: 1.45; }
.robot-feature > button { position: absolute; width: 34px; height: 34px; bottom: -17px; border: 0; border-radius: 50%; color: #0879e5; background: rgba(255,255,255,.96); box-shadow: 0 5px 16px rgba(29, 90, 151, .16); font-weight: 900; }
.robot-feature.left > button { left: 18px; }
.robot-feature.right > button { right: 18px; }
.feature-icon { display: grid; width: 42px; height: 58px; place-items: center; border-radius: 13px; color: #0877e5; background: rgba(245,251,255,.92); box-shadow: inset 0 0 0 1px rgba(174, 215, 249, .65); font-size: 25px; font-style: normal; }
.feature-icon .lucide-icon { width: 25px; height: 25px; }
.feature-preview { width: 42px; height: 58px; border-radius: 13px; object-fit: cover; box-shadow: inset 0 0 0 1px rgba(174,215,249,.65), 0 7px 16px rgba(31,123,208,.09); }
.robot-feature > img { width: 41px; height: 60px; object-fit: cover; border-radius: 8px; }
.robot-feature.right.bottom { grid-template-columns: 38px 1fr; }
.robot-feature.right.bottom span { font-size: 10px; white-space: normal; }
.landing-capabilities { display: grid; min-height: 136px; grid-template-columns: repeat(4, 1fr); margin-top: 12px; padding: 18px 4px; border-radius: 22px; background: rgba(255, 255, 255, .82); box-shadow: 0 15px 34px rgba(32, 103, 175, .11), inset 0 1px 0 #fff; backdrop-filter: blur(14px); }
.landing-capabilities article { display: grid; min-width: 0; place-items: center; align-content: start; padding: 0 6px; border-right: 1px solid rgba(166, 203, 235, .58); }
.landing-capabilities article:last-child { border-right: 0; }
.landing-capabilities i { display: grid; height: 42px; place-items: center; color: #0877e8; font-size: 28px; font-style: normal; }
.landing-capabilities b { margin-top: 7px; color: #082961; font-size: 13px; white-space: nowrap; }
.landing-capabilities span { margin-top: 7px; color: #7084a4; font-size: 11px; line-height: 1.45; text-align: center; }
.landing-bottom-cta { display: flex; width: 100%; height: 62px; align-items: center; justify-content: center; gap: 13px; margin: 18px 0 0; border: 0; border-radius: 999px; color: #fff; background: linear-gradient(105deg, #0638bc, #087fe9 58%, #25bff0); box-shadow: 0 15px 28px rgba(9, 91, 200, .22); font-size: 18px; font-weight: 900; }

/* Robot scene: real layered UI around the central character. */
.robot-stage::before { content: ""; position: absolute; z-index: 0; left: 50%; top: 94px; width: 286px; height: 286px; border-radius: 50%; background: radial-gradient(circle, rgba(255,255,255,.98) 0 28%, rgba(99,207,255,.31) 51%, rgba(61,160,236,.08) 68%, transparent 73%); transform: translateX(-50%); filter: blur(1px); }
.robot-ui-orbit { position: absolute; z-index: 1; left: 50%; top: 72px; width: 286px; height: 322px; transform: translateX(-50%); pointer-events: none; }
.orbit-ring { position: absolute; left: 28px; right: 28px; bottom: 19px; height: 54px; border: 2px solid rgba(38,178,255,.68); border-radius: 50%; box-shadow: 0 0 16px rgba(33,181,255,.72), inset 0 0 17px rgba(45,183,255,.24), 0 0 0 9px rgba(79,190,255,.09); }
.orbit-card { position: absolute; display: grid; place-items: center; border: 1px solid rgba(255,255,255,.88); border-radius: 11px; color: #1682e8; background: linear-gradient(145deg,rgba(246,253,255,.82),rgba(89,186,245,.2)); box-shadow: 0 8px 22px rgba(21,117,195,.16), inset 0 1px 0 rgba(255,255,255,.9); backdrop-filter: blur(8px); }
.orbit-image { left: 23px; top: 58px; width: 57px; height: 48px; transform: rotate(-7deg); }
.orbit-image span { position: relative; width: 30px; height: 22px; overflow: hidden; border-radius: 4px; background: linear-gradient(145deg,#2398f1,#73d5ff); }
.orbit-image span::before { content: ""; position: absolute; left: 5px; bottom: -4px; width: 18px; height: 18px; background: rgba(255,255,255,.9); transform: rotate(45deg); }
.orbit-image span::after { content: ""; position: absolute; right: 5px; top: 4px; width: 5px; height: 5px; border-radius: 50%; background: #fff; }
.orbit-copy { right: 20px; top: 80px; width: 62px; height: 55px; transform: rotate(7deg); }
.orbit-copy b { font: 900 25px/1 Arial,sans-serif; color: rgba(32,128,223,.88); }
.orbit-lines { left: 35px; bottom: 86px; width: 62px; height: 49px; gap: 4px; padding: 11px; transform: rotate(5deg); }
.orbit-lines span { display: block; width: 100%; height: 4px; border-radius: 9px; background: linear-gradient(90deg,#32a5f3,rgba(59,159,230,.18)); }
.orbit-lines span:nth-child(2) { width: 72%; justify-self: start; }
.orbit-gallery { right: 30px; bottom: 78px; width: 56px; height: 49px; transform: rotate(-6deg); }
.orbit-gallery span { width: 27px; height: 28px; border: 2px solid rgba(34,133,227,.75); border-radius: 5px; box-shadow: -7px 6px 0 rgba(62,180,241,.22); }
.orbit-spark { position: absolute; color: rgba(24,155,239,.82); font-style: normal; text-shadow: 0 0 12px rgba(26,176,248,.7); }
.orbit-spark.one { left: 10px; top: 155px; font-size: 15px; }
.orbit-spark.two { right: 5px; top: 175px; font-size: 11px; }
.robot-halo { z-index: 2; }
.robot-feature { z-index: 5; min-height: 118px; padding: 13px 10px 17px; border-color: rgba(255,255,255,.94); background: linear-gradient(145deg,rgba(255,255,255,.93),rgba(230,246,255,.75)); box-shadow: 0 15px 35px rgba(35,95,158,.17), inset 0 1px 0 #fff; }
.robot-feature .feature-icon { box-shadow: inset 0 0 0 1px rgba(160,209,247,.65), 0 7px 16px rgba(31,123,208,.09); }
.feature-icon.wand { position: relative; color: transparent; }
.feature-icon.wand::before { content: ""; width: 5px; height: 30px; border-radius: 4px; background: linear-gradient(#29a3ff,#0965df); transform: rotate(40deg); box-shadow: 0 0 0 2px rgba(255,255,255,.8); }
.feature-icon.wand::after { content: "✦"; position: absolute; right: 6px; top: 6px; color: #0e7de9; font-size: 17px; text-shadow: -11px 8px 0 rgba(42,165,244,.7); }
.feature-icon.layers { display: flex; flex-direction: column; justify-content: center; gap: 0; }
.feature-icon.layers span { display: block; width: 25px; height: 14px; margin: -3px 0; border: 3px solid #0b76e5; border-radius: 3px; background: rgba(241,250,255,.94); transform: rotate(45deg) skew(-7deg,-7deg); }
.robot-feature.template-card { grid-template-columns: 49px 1fr; column-gap: 8px; }
.robot-feature.template-card > img { width: 48px; height: 70px; border-radius: 8px; box-shadow: 0 7px 16px rgba(11,76,145,.2); }
.robot-feature.export-card { display: flex; width: 140px; min-height: 124px; align-items: stretch; flex-direction: column; gap: 7px; padding: 12px 10px 13px; }
.export-title { display: flex; align-items: center; gap: 7px; }
.export-title .feature-icon { width: 30px; height: 30px; flex: 0 0 auto; border-radius: 9px; font-size: 17px; }
.export-title b { font-size: 13px; }
.format-icons { display: grid; grid-template-columns: repeat(4,1fr); gap: 4px; }
.format-icons i { display: grid; height: 31px; place-items: center; border-radius: 6px; color: #fff; background: #086ce0; box-shadow: 0 4px 10px rgba(17,82,153,.13); font: 800 10px/1 Arial,sans-serif; }
.format-icons .psd { color: #63c8ff; background: #082253; }
.format-icons .ai { color: #ffb239; background: #2b1b08; }
.format-icons .jpg { background: linear-gradient(145deg,#328bf1,#5cbbed); }
.format-icons .pdf { background: linear-gradient(145deg,#f15a5a,#ed4141); }
.robot-feature.export-card > span { margin-top: 0; font-size: 9px; text-align: center; white-space: nowrap; }

/* Unified landing visual: the capabilities share one glass layer with the robot scene. */
.landing-visual { position: relative; height: 240px; margin: 20px 0 0; overflow: hidden; border: 1px solid rgba(255,255,255,.9); border-radius: 24px; background: #dff4ff; box-shadow: 0 18px 40px rgba(19,91,163,.15), inset 0 1px 0 #fff; text-align: left; }
.landing-visual::after { content: ""; position: absolute; inset: 45% 0 0; pointer-events: none; background: linear-gradient(180deg,transparent,rgba(4,46,100,.26)); }
.landing-visual img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center; }
.landing-actions button .lucide-icon { width: 20px; height: 20px; }
.landing-actions button:nth-child(2) .lucide-icon { color: #0c58b9; }
.landing-capabilities { position: relative; z-index: 4; display: grid; min-height: 0; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 0; margin: -20px 12px 0; padding: 8px; border: 1px solid rgba(255,255,255,.92); border-radius: 18px; background: rgba(247,252,255,.9); box-shadow: 0 14px 30px rgba(23,82,145,.15), inset 0 1px 0 #fff; backdrop-filter: blur(22px); }
.landing-capabilities > article, .landing-capabilities > button { display: grid; min-width: 0; height: 62px; place-items: center; align-content: center; gap: 5px; padding: 6px 3px; border: 0; border-right: 1px solid rgba(166,203,235,.58); color: inherit; background: transparent; text-align: center; }
.landing-capabilities > :last-child { border-right: 0; }
.landing-capabilities > * > .lucide-icon { width: 29px; height: 29px; padding: 6px; border-radius: 9px; color: #0877e8; background: #eaf5ff; box-shadow: inset 0 0 0 1px rgba(167,207,241,.64); }
.landing-capabilities > * > span { display: block; min-width: 0; margin: 0; color: inherit; text-align: center; }
.landing-capabilities b { margin: 0; color: #082961; font-size: 10px; white-space: nowrap; }

/* Home */
.mobile-workspace { padding-bottom: calc(72px + var(--mobile-safe-bottom)); background: radial-gradient(circle at 35% 0, rgba(255,255,255,.98), transparent 28%), linear-gradient(155deg, #f9fcff, #e8f5ff 48%, #f7fbff); }
.home-header { height: 70px; padding: 0 16px; background: rgba(255,255,255,.18); }
.home-header .mobile-brand img { width: 108px; }
.home-header .mobile-brand > i { height: 22px; margin-inline: 11px; }
.home-header .mobile-brand > span { font-size: 12px; }
.home-header nav { display: flex; align-items: center; gap: 12px; }
.home-header nav button { position: relative; display: flex; min-width: 30px; height: 40px; align-items: center; justify-content: center; gap: 4px; padding: 0; border: 0; color: #082a6b; background: transparent; }
.home-header nav .lucide-icon { width: 25px; height: 25px; color: #082a6b; }
.home-header .support-robot-icon { display: block; width: 36px; height: 36px; object-fit: contain; filter: drop-shadow(0 3px 6px rgba(10,91,169,.18)); }
.home-header nav span { font-size: 12px; font-weight: 800; }
.home-header nav button[data-message]::after { content: ""; position: absolute; right: 0; top: 4px; width: 7px; height: 7px; border-radius: 50%; background: #ff4258; }
.home-scroll { padding: 0 16px 30px; }
.mobile-search { display: flex; height: 58px; align-items: center; gap: 12px; padding: 0 16px; border-radius: 17px; background: rgba(255,255,255,.9); box-shadow: 0 10px 28px rgba(31, 93, 159, .09), inset 0 0 0 1px rgba(189, 217, 244, .55); }
.mobile-search > .lucide-icon { width: 24px; height: 24px; flex: 0 0 auto; color: #153d70; }
.mobile-search input { min-width: 0; flex: 1; border: 0; outline: 0; color: #153d70; background: transparent; font-size: 14px; }
.mobile-search input::placeholder { color: #7288aa; }
.mobile-search button { display: grid; width: 36px; height: 36px; place-items: center; padding: 0; border: 0; color: #0969d3; background: transparent; }
.mobile-search button .lucide-icon { width: 24px; height: 24px; }
.mobile-template-search { margin-bottom: 14px; }
.home-hero-banner { position: relative; display: grid; height: 220px; grid-template-columns: 1.3fr .7fr; margin-top: 18px; overflow: hidden; border-radius: 22px; background: radial-gradient(circle at 77% 43%,rgba(255,255,255,.96),transparent 29%), linear-gradient(115deg, rgba(255,255,255,.96), rgba(190,228,255,.86) 66%,rgba(126,204,250,.5)); box-shadow: 0 14px 34px rgba(27, 93, 161, .12), inset 0 1px 0 #fff; }
.home-hero-banner::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(120deg,transparent 24%,rgba(106,195,248,.12) 46%,rgba(255,255,255,.48) 54%,transparent 72%); }
.home-hero-banner > div { position: relative; z-index: 6; padding: 24px 0 18px 18px; }
.home-hero-banner > div::before { content: ""; position: absolute; z-index: 7; inset: 0 -36px 0 0; background: linear-gradient(90deg,rgba(247,252,255,.92) 0 66%,rgba(235,248,255,.66) 82%,transparent 100%); pointer-events: none; }
.home-hero-banner > div > * { position: relative; z-index: 8; }
.home-hero-banner small { color: #0b72dc; font-size: 9px; font-weight: 850; letter-spacing: .23em; }
.home-hero-banner h1 { width: 242px; margin: 13px 0 10px; color: #071e57; font-size: 23px; line-height: 1.12; letter-spacing: -.065em; white-space: nowrap; background: linear-gradient(90deg,transparent 0 72%,rgba(240,249,255,.92) 88%,transparent 100%); }
.home-hero-banner h1 em { display: block; margin-top: 2px; color: #0b70e1; font-size: 32px; font-style: normal; }
.home-hero-banner p { margin: 0; color: #31527c; font-size: 13px; line-height: 1.5; }
.home-hero-banner ol { display: flex; gap: 8px; margin: 17px 0 0; padding: 0; list-style: none; color: #163f70; font-size: 11px; }
.home-hero-banner li { display: flex; align-items: center; gap: 5px; white-space: nowrap; }
.home-hero-banner li i { display: grid; width: 23px; height: 23px; place-items: center; border-radius: 50%; color: #0878e6; background: rgba(226,241,255,.9); font-style: normal; font-weight: 900; }
.home-hero-banner figure { position: relative; z-index: 1; margin: 0; overflow: visible; background: radial-gradient(circle at 46% 48%,rgba(255,255,255,.9),rgba(123,211,255,.17) 53%,transparent 69%); }
.home-hero-banner figure img { position: absolute; z-index: 3; left: 54%; top: 13px; width: 194px; height: 194px; object-fit: contain; object-position: center; transform: translateX(-50%); -webkit-mask-image: radial-gradient(ellipse 72% 74% at 50% 50%, #000 66%, rgba(0,0,0,.75) 80%, transparent 100%); mask-image: radial-gradient(ellipse 72% 74% at 50% 50%, #000 66%, rgba(0,0,0,.75) 80%, transparent 100%); filter: drop-shadow(0 12px 18px rgba(21, 120, 205, .18)); }
.banner-ui-layer { position: absolute; z-index: 2; inset: 5px -8px 4px -18px; pointer-events: none; }
.banner-ring { position: absolute; left: 24px; right: 13px; bottom: 15px; height: 34px; border: 2px solid rgba(35,177,249,.55); border-radius: 50%; box-shadow: 0 0 14px rgba(48,189,255,.55),0 0 0 7px rgba(85,193,250,.08); }
.banner-glow { position: absolute; left: 19px; top: 25px; width: 145px; height: 145px; border-radius: 50%; background: radial-gradient(circle,rgba(255,255,255,.9),rgba(90,198,249,.14) 59%,transparent 72%); }
.banner-panel { position: absolute; z-index: 4; display: grid; place-items: center; border: 1px solid rgba(255,255,255,.9); border-radius: 9px; color: #1680e5; background: linear-gradient(145deg,rgba(255,255,255,.82),rgba(91,185,244,.22)); box-shadow: 0 7px 17px rgba(17,105,179,.14); backdrop-filter: blur(6px); font-style: normal; }
.banner-panel.image { left: 6px; top: 29px; width: 45px; height: 39px; transform: rotate(-5deg); }
.banner-panel.image span { position: relative; width: 24px; height: 18px; overflow: hidden; border-radius: 4px; background: #2498ef; }
.banner-panel.image span::before { content: ""; position: absolute; left: 5px; bottom: -7px; width: 18px; height: 18px; background: #fff; transform: rotate(45deg); }
.banner-panel.text { left: -5px; top: 112px; width: 41px; height: 38px; font: 900 20px/1 Arial,sans-serif; transform: rotate(5deg); }
.banner-panel.pen { right: 1px; top: 37px; width: 48px; height: 48px; font-size: 25px; transform: rotate(5deg); }
.banner-panel.tiny { right: 3px; bottom: 48px; width: 46px; height: 36px; gap: 4px; padding: 9px; transform: rotate(-5deg); }
.banner-panel.tiny span { display: block; width: 100%; height: 4px; border-radius: 9px; background: linear-gradient(90deg,#1684e8,rgba(22,132,232,.18)); }
.tool-panel { margin-top: 18px; padding: 16px 12px; border-radius: 22px; background: rgba(255,255,255,.8); box-shadow: 0 12px 30px rgba(34, 88, 151, .09), inset 0 1px 0 #fff; }
.tool-panel header, .featured-templates header { display: flex; align-items: center; justify-content: space-between; padding: 0 2px 14px; }
.tool-panel h2, .featured-templates h2 { margin: 0; color: #08285f; font-size: 21px; }
.tool-panel header button, .featured-templates header button { max-width: 58%; border: 0; color: #6686af; background: transparent; font-size: 12px; line-height: 1.4; text-align: right; }
.image-tools header button { max-width: none; white-space: nowrap; font-size: 11px; line-height: 1; }
.design-tool-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px 8px; }
.design-tool-grid button, .image-tool-grid button { --module-icon: url('/icons/mobile-h5/lucide/sparkles.svg'); position: relative; display: grid; min-width: 0; height: 88px; place-items: center; align-content: center; gap: 8px; overflow: hidden; border: 0; border-radius: 16px; color: #0b2b67; background: rgba(255,255,255,.96); box-shadow: 0 7px 18px rgba(31,89,151,.07), inset 0 0 0 1px rgba(182,207,233,.48); }
.design-tool-grid button:active, .image-tool-grid button:active { background: #e8f4ff; }
.design-tool-grid i, .image-tool-grid i { display: grid; height: 31px; place-items: center; color: #0a6ee0; font-size: 25px; font-style: normal; font-weight: 900; }
.design-tool-grid .module-preview, .image-tool-grid .module-preview { display: none; }
.design-tool-grid .module-symbol, .image-tool-grid .module-symbol { position: relative; display: block; width: 38px; height: 38px; border-radius: 12px; background: transparent; box-shadow: none; }
.design-tool-grid .module-symbol::before, .image-tool-grid .module-symbol::before { content: ""; position: absolute; inset: 8px; background: #0b4d91; -webkit-mask: var(--module-icon) center / contain no-repeat; mask: var(--module-icon) center / contain no-repeat; }
.design-tool-grid button[data-workspace-module="flat_design"] { --module-icon: url('/icons/mobile-h5/lucide/pen-tool.svg'); }
.design-tool-grid button[data-workspace-module="two_d_to_3d"] { --module-icon: url('/icons/mobile-h5/lucide/layers-3.svg'); }
.design-tool-grid button[data-workspace-module="three_d_render"] { --module-icon: url('/icons/mobile-h5/lucide/box.svg'); }
.design-tool-grid button[data-workspace-module="packaging_design"] { --module-icon: url('/icons/mobile-h5/lucide/package.svg'); }
.design-tool-grid button[data-workspace-module="culture_wall"] { --module-icon: url('/icons/mobile-h5/lucide/panels-top-left.svg'); }
.design-tool-grid button[data-workspace-module="signage_design"] { --module-icon: url('/icons/mobile-h5/lucide/map-pin.svg'); }
.design-tool-grid button[data-workspace-module="logo_design"] { --module-icon: url('/icons/mobile-h5/lucide/hexagon.svg'); }
.design-tool-grid button[data-workspace-module="home_design"] { --module-icon: url('/icons/mobile-h5/lucide/house.svg'); }
.design-tool-grid button[data-workspace-module="showroom_design"] { --module-icon: url('/icons/mobile-h5/lucide/presentation.svg'); }
.design-tool-grid button[data-workspace-module="image_to_video"] { --module-icon: url('/icons/mobile-h5/lucide/video.svg'); }
.image-tool-grid button[data-workspace-module="image_breakdown"] { --module-icon: url('/icons/mobile-h5/lucide/layers-3.svg'); }
.image-tool-grid button[data-workspace-module="ai_cutout"] { --module-icon: url('/icons/mobile-h5/lucide/scan-line.svg'); }
.image-tool-grid button[data-workspace-module="upscale"] { --module-icon: url('/icons/mobile-h5/lucide/hd.svg'); }
.image-tool-grid button[data-workspace-module="ai_edit"] { --module-icon: url('/icons/mobile-h5/lucide/file-pen-line.svg'); }
.image-tool-grid button[data-workspace-module="ai_remove"] { --module-icon: url('/icons/mobile-h5/lucide/eraser.svg'); }
.image-tool-grid button[data-workspace-module="line_art"] { --module-icon: url('/icons/mobile-h5/lucide/pen-tool.svg'); }
.image-tool-grid button[data-workspace-module="vectorize"] { --module-icon: url('/icons/mobile-h5/lucide/vector-square.svg'); }
.design-tool-grid span, .image-tool-grid span { font-size: 12px; font-weight: 800; white-space: nowrap; }
.image-tool-grid { display: grid; grid-template-columns: repeat(8,1fr); gap: 10px 5px; }
.image-tool-grid button { height: 84px; grid-column: span 2; border-radius: 15px; }
.image-tool-grid button:nth-child(5) { grid-column: 2 / span 2; }
.image-tool-grid button:nth-child(6) { grid-column: 4 / span 2; }
.image-tool-grid button:nth-child(7) { grid-column: 6 / span 2; }
.image-tool-grid span { font-size: 11px; }
.mobile-categories { display: flex; gap: 9px; margin: 18px 0 0; overflow-x: auto; scrollbar-width: none; }
.mobile-categories::-webkit-scrollbar { display: none; }
.mobile-categories button { height: 42px; flex: 0 0 auto; padding: 0 16px; border: 0; border-radius: 14px; color: #2c4e7b; background: rgba(255,255,255,.88); box-shadow: 0 5px 15px rgba(34, 88, 151, .07); font-size: 12px; font-weight: 800; }
.mobile-categories button:has(.lucide-icon) { display: flex; align-items: center; gap: 5px; }
.mobile-categories .lucide-icon { width: 14px; height: 14px; color: currentColor; }
.mobile-categories button.active { color: #fff; background: linear-gradient(105deg,#0871e8,#18a8ef); }
.mobile-categories .mobile-category-more { display: flex; align-items: center; gap: 5px; }
.mobile-template-categories { display: grid; gap: 16px; margin-top: 12px; padding: 16px; border: 1px solid #d4e5f6; border-radius: 18px; background: #f7fbff; }
.mobile-template-categories[hidden] { display: none; }
.mobile-template-category-group h3 { margin: 0 0 9px; color: #274f7b; font-size: 13px; }
.mobile-template-category-group > div { display: flex; flex-wrap: wrap; gap: 7px; }
.mobile-template-category-group button { max-width: 100%; min-height: 36px; padding: 7px 11px; border: 1px solid #d5e5f5; border-radius: 10px; color: #315777; background: #fff; font-size: 12px; line-height: 1.4; text-align: left; overflow-wrap: break-word; }
.mobile-template-category-group button.active { border-color: #0871e8; color: #fff; background: #0871e8; }
.mobile-template-categories-empty { margin: 0; color: #607b96; font-size: 13px; line-height: 1.5; }
.featured-templates { margin-top: 24px; }
.featured-templates header { padding-bottom: 12px; }
.featured-templates header > div { display: flex; align-items: baseline; gap: 10px; }
.featured-templates header span { color: #7890ad; font-size: 11px; }
.featured-templates header button { color: #092e68; font-size: 12px; font-weight: 850; }
.mobile-template-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.mobile-template-grid > .subpage-empty { grid-column: 1 / -1; min-height: 180px; padding: 24px 16px; font-size: 14px; line-height: 1.6; }
.mobile-template-card { position: relative; display: block; height: 220px; overflow: hidden; padding: 0; border: 0; border-radius: 18px; background: #dceafb; box-shadow: 0 10px 26px rgba(24, 79, 139, .1); }
.mobile-template-card img { width: 100%; height: 100%; object-fit: cover; }
.mobile-template-card span { position: absolute; left: 9px; right: 9px; bottom: 9px; overflow: hidden; padding: 8px 9px; border-radius: 10px; color: #123b6f; background: rgba(255,255,255,.88); font-size: 11px; font-weight: 850; text-overflow: ellipsis; white-space: nowrap; backdrop-filter: blur(7px); }
.mobile-template-pair { display: grid; width: 100%; height: 100%; grid-template-columns: 1fr 1fr; gap: 2px; padding-bottom: 34px; background: #dceafb; font-style: normal; }
.mobile-template-pair em { position: relative; display: block; min-width: 0; overflow: hidden; font-style: normal; }
.mobile-template-pair em > small { position: absolute; z-index: 2; left: 5px; top: 5px; padding: 3px 5px; border-radius: 999px; color: #fff; background: rgba(7,44,83,.72); font-size: 8px; font-weight: 850; }
.mobile-template-pair img { width: 100%; height: 100%; object-fit: cover; }
.mobile-template-summary { min-height: 20px; margin: -5px 0 12px !important; color: #577598 !important; font-size: 12px !important; }
.mobile-template-load-more { display: block; width: 100%; height: 48px; margin-top: 16px; border: 0; border-radius: 15px; color: #fff; background: linear-gradient(105deg,#0756d4,#0a91ee 63%,#18bfc5); font-size: 14px; font-weight: 850; box-shadow: 0 8px 20px rgba(8,105,218,.2); }
.mobile-template-load-more[hidden] { display: none; }
.template-skeleton { height: 220px; border-radius: 18px; background: linear-gradient(110deg,#dfeaf5 8%,#f6faff 18%,#dfeaf5 33%); background-size: 200% 100%; animation: skeleton 1.2s linear infinite; }
@keyframes skeleton { to { background-position-x: -200%; } }

/* Existing subpages and interactions */
.mobile-subpage { background: linear-gradient(160deg,#f9fcff,#eaf5ff); }
.mobile-subpage > header { display: grid; height: 64px; grid-template-columns: 48px 1fr 48px; align-items: center; padding: 0 10px; background: rgba(255,255,255,.84); box-shadow: 0 5px 20px rgba(30,77,128,.06); }
.mobile-subpage > header button { width: 40px; height: 40px; border: 0; color: #0a4d9e; background: transparent; font-size: 30px; }
.mobile-subpage h1 { margin: 0; color: #092c65; font-size: 21px; text-align: center; }
.mobile-subpage > main { padding: 18px 16px; }
.mobile-subpage[data-page="create"] > main { padding-top: 7px; }
.subpage-card { padding: 19px; border-radius: 20px; background: rgba(255,255,255,.92); box-shadow: 0 10px 28px rgba(31,79,136,.09); }
.subpage-card h2 { margin: 0; color: #0a2d64; font-size: 21px; }
.subpage-card p { color: #6f86a2; font-size: 14px; line-height: 1.65; }
.subpage-card textarea { width: 100%; height: 200px; margin-top: 10px; padding: 15px; border: 0; border-radius: 16px; outline: 0; resize: none; color: #173b68; background: #f5faff; box-shadow: inset 0 0 0 1px rgba(181,211,239,.8); font-size: 14px; }
.subpage-primary { width: 100%; height: 54px; margin-top: 14px; border: 0; border-radius: 17px; color: #fff; background: linear-gradient(105deg,#0756d4,#0a91ee 63%,#18bfc5); font-size: 16px; font-weight: 900; }
.subpage-tool-list { display: grid; grid-template-columns: 1fr 1fr; gap: 11px; margin-top: 14px; }
.subpage-tool-list button { height: 78px; border: 0; border-radius: 16px; color: #184878; background: #f6faff; box-shadow: inset 0 0 0 1px rgba(196,219,241,.75); font-size: 14px; font-weight: 800; }
.mobile-profile { display: grid; gap: 14px; }
.mobile-profile-identity, .mobile-profile-stats, .mobile-profile-menu, .mobile-profile-panel, .mobile-profile-management { border: 1px solid rgba(193,216,238,.72); background: rgba(255,255,255,.94); box-shadow: 0 10px 28px rgba(31,79,136,.08); }
.mobile-profile-identity { display: flex; align-items: center; gap: 15px; padding: 18px; border-radius: 22px; }
.mobile-profile-avatar { position: relative; display: grid; width: 72px; height: 72px; flex: 0 0 auto; place-items: center; overflow: hidden; padding: 0; border: 0; border-radius: 50%; color: #69809b; background: #edf2f7; box-shadow: inset 0 0 0 1px rgba(164,187,210,.55); }
.mobile-profile-avatar > img, .mobile-profile-avatar > span { width: 100%; height: 100%; object-fit: cover; }
.mobile-profile-avatar > span { display: grid; place-items: center; }
.mobile-profile-avatar .lucide-icon { width: 30px; height: 30px; color: #8798aa; }
.mobile-profile-avatar small { position: absolute; right: 0; bottom: 0; left: 0; padding: 4px 0; color: #fff; background: rgba(5,37,74,.68); font-size: 9px; }
.mobile-profile-identity > div { min-width: 0; flex: 1; }
.mobile-profile-identity > div > div { display: flex; align-items: center; gap: 8px; }
.mobile-profile-identity h2 { overflow: hidden; font-size: 20px; text-overflow: ellipsis; white-space: nowrap; }
.mobile-profile-identity b { flex: 0 0 auto; padding: 4px 8px; border-radius: 999px; color: #0868c8; background: #e7f3ff; font-size: 10px; }
.mobile-profile-identity p { margin: 7px 0 0; font-size: 12px; }
.mobile-profile-stats { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); padding: 14px 8px; border-radius: 20px; }
.mobile-profile-stats article { min-width: 0; padding: 2px 9px; text-align: center; }
.mobile-profile-stats article + article { border-left: 1px solid #e1ebf4; }
.mobile-profile-stats small { display: block; color: #7d91a9; font-size: 10px; }
.mobile-profile-stats b { display: block; overflow: hidden; margin-top: 6px; color: #123d70; font-size: 15px; text-overflow: ellipsis; white-space: nowrap; }
.mobile-profile-management { display: flex; width: 100%; min-height: 68px; align-items: center; gap: 12px; padding: 12px 15px; border-radius: 19px; color: #fff; background: linear-gradient(115deg,#0a5fd7,#139fd4); text-align: left; }
.mobile-profile-management > .lucide-icon { width: 28px; height: 28px; color: #fff; }
.mobile-profile-management span { display: grid; flex: 1; gap: 3px; }
.mobile-profile-management b { font-size: 14px; }
.mobile-profile-management small { color: rgba(255,255,255,.76); font-size: 10px; }
.mobile-profile-management em { font-size: 12px; font-style: normal; font-weight: 800; }
.mobile-profile-menu { overflow: hidden; border-radius: 22px; }
.mobile-profile-menu h3 { margin: 0; padding: 16px 17px 11px; color: #0c3268; font-size: 15px; }
.mobile-profile-menu > div { padding: 0 12px 7px; }
.mobile-profile-menu button { display: flex; width: 100%; min-height: 64px; align-items: center; gap: 12px; padding: 10px 5px; border: 0; border-top: 1px solid #e7eef6; color: #173f6d; background: transparent; text-align: left; }
.mobile-profile-menu button > .lucide-icon { width: 23px; height: 23px; color: #176fc8; }
.mobile-profile-menu button span { display: grid; flex: 1; gap: 4px; }
.mobile-profile-menu button b { font-size: 14px; }
.mobile-profile-menu button small { color: #8092a7; font-size: 10px; }
.mobile-profile-menu button em { color: #9cadbe; font-size: 21px; font-style: normal; }
.mobile-profile-menu .mobile-profile-logout-entry > .lucide-icon, .mobile-profile-menu .mobile-profile-logout-entry b { color: #c54b54; }
.mobile-profile-detail-open { overflow: hidden; }
.mobile-profile-panel { position: fixed; z-index: 120; inset: 0; display: flex; width: 100%; height: 100vh; height: 100dvh; height: var(--mobile-viewport-height,100dvh); max-height: 100vh; max-height: 100dvh; flex-direction: column; overflow: hidden; border: 0; border-radius: 0; background: linear-gradient(160deg,#f9fcff,#eaf5ff); box-shadow: none; }
.mobile-profile-panel[hidden] { display: none; }
.mobile-profile-panel > header { display: grid; min-height: calc(64px + var(--mobile-safe-top)); flex: 0 0 auto; grid-template-columns: 48px 1fr 48px; align-items: center; padding-top: var(--mobile-safe-top); padding-right: max(10px,env(safe-area-inset-right,0px)); padding-left: max(10px,env(safe-area-inset-left,0px)); border-bottom: 1px solid #e2ebf4; background: rgba(255,255,255,.96); box-shadow: 0 5px 20px rgba(30,77,128,.06); }
.mobile-profile-panel > header button { width: 40px; height: 40px; border: 0; color: #0c5faf; background: transparent; font-size: 27px; }
.mobile-profile-panel > header h3 { margin: 0; color: #0d3568; font-size: 18px; text-align: center; }
.mobile-profile-detail-content { flex: 1; min-height: 0; overflow-y: auto; padding-top: 16px; padding-right: max(16px,env(safe-area-inset-right,0px)); padding-bottom: max(24px,var(--mobile-safe-bottom)); padding-left: max(16px,env(safe-area-inset-left,0px)); overscroll-behavior: contain; }
.mobile-profile-panel[data-profile-view="support"] .mobile-profile-detail-content { display: flex; min-height: 0; flex-direction: column; overflow: hidden; padding-bottom: max(12px,var(--mobile-safe-bottom)); }
.mobile-profile-panel-body, .mobile-credit-list, .mobile-support-messages { padding: 15px; }
.mobile-profile-panel-body, .mobile-credit-list, .mobile-support-messages, .mobile-security-form { border: 1px solid rgba(193,216,238,.72); background: rgba(255,255,255,.96); box-shadow: 0 10px 28px rgba(31,79,136,.08); }
.mobile-profile-panel-body, .mobile-credit-list, .mobile-support-messages, .mobile-security-form { border-radius: 20px; }
.mobile-membership-card { padding: 18px; border-radius: 17px; color: #fff; background: linear-gradient(135deg,#0a57cf,#0a95dd); }
.mobile-membership-card small { color: rgba(255,255,255,.72); }
.mobile-membership-card h4 { margin: 6px 0 0; font-size: 22px; }
.mobile-membership-card p { margin: 7px 0 14px; color: rgba(255,255,255,.78); font-size: 11px; }
.mobile-membership-card dl { display: grid; grid-template-columns: 1fr 1fr; margin: 0; padding-top: 13px; border-top: 1px solid rgba(255,255,255,.22); }
.mobile-membership-card dl div { display: grid; gap: 4px; }
.mobile-membership-card dt { color: rgba(255,255,255,.7); font-size: 10px; }
.mobile-membership-card dd { margin: 0; font-size: 16px; font-weight: 900; }
.mobile-recharge-modal[hidden] { display: none !important; }
.mobile-recharge-modal { position: fixed; inset: 0; z-index: 1201; display: grid; place-items: end center; }
.mobile-recharge-backdrop { position: absolute; inset: 0; background: rgba(9, 27, 58, .58); }
.mobile-recharge-sheet { position: relative; width: min(100%, 520px); max-height: min(88vh, 760px); max-height: min(88dvh, 760px); overflow-y: auto; padding: 22px 20px calc(20px + env(safe-area-inset-bottom)); border-radius: 24px 24px 0 0; color: #173a65; background: #f8fbff; box-shadow: 0 -14px 42px rgba(4, 39, 92, .24); }
.mobile-recharge-sheet header { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.mobile-recharge-sheet header small { color: #2583d6; font-size: 12px; font-weight: 800; }
.mobile-recharge-sheet h2 { margin: 6px 0 3px; font-size: 23px; line-height: 1.3; }
.mobile-recharge-sheet header p { margin: 0; color: #738ba6; font-size: 13px; }
.mobile-recharge-sheet header button { flex: 0 0 34px; height: 34px; border: 0; border-radius: 50%; color: #456d96; background: #e7f1fb; font-size: 24px; line-height: 1; }
.mobile-recharge-options { display: grid; gap: 10px; margin-top: 20px; }
.mobile-recharge-option { display: grid; grid-template-columns: 1fr auto; gap: 5px 12px; width: 100%; padding: 15px; border: 1px solid #d1e1f2; border-radius: 16px; color: #173a65; background: #fff; text-align: left; }
.mobile-recharge-option.is-selected { border-color: #0877ed; background: #edf7ff; box-shadow: 0 0 0 2px rgba(8, 119, 237, .12); }
.mobile-recharge-option b { font-size: 17px; }
.mobile-recharge-option strong { color: #0b67cf; font-size: 19px; }
.mobile-recharge-option small { grid-column: 1 / -1; color: #718ba7; font-size: 12px; line-height: 1.5; }
.mobile-recharge-summary { margin: 14px 0 0; color: #56738f; font-size: 12px; line-height: 1.6; }
.mobile-recharge-status { margin: 12px 0 0; padding: 10px 12px; border-radius: 10px; color: #9f3646; background: #fff1f3; font-size: 12px; }
.mobile-recharge-pay { width: 100%; min-height: 48px; margin-top: 18px; border: 0; border-radius: 13px; color: #fff; background: linear-gradient(100deg, #0b64d4, #10afd0); font-size: 16px; font-weight: 800; }
.mobile-recharge-pay:disabled { background: #9fb3c8; }
.mobile-recharge-legal { margin: 11px 0 0; color: #8598ab; font-size: 11px; text-align: center; }
.mobile-recharge-legal a { color: #2378ca; }
body.mobile-recharge-open { overflow: hidden; }
.mobile-membership-recharge { width: 100%; min-height: 46px; margin-top: 14px; border: 0; border-radius: 12px; color: #fff; background: linear-gradient(100deg, #0b64d4, #10afd0); font-size: 15px; font-weight: 800; }
.mobile-credit-list article { display: flex; min-height: 58px; align-items: center; gap: 10px; border-bottom: 1px solid #e8eff6; }
.mobile-credit-list article span { display: grid; flex: 1; gap: 4px; }
.mobile-credit-list article b { color: #21466f; font-size: 12px; }
.mobile-credit-list article small { color: #8a9bad; font-size: 9px; }
.mobile-credit-list strong { font-size: 14px; }
.mobile-credit-list strong.plus { color: #16845e; }
.mobile-credit-list strong.minus { color: #d3545a; }
.mobile-support-messages { display: grid; min-height: 280px; max-height: calc(100vh - 240px); max-height: calc(100dvh - 240px); gap: 10px; overflow-y: auto; background: #f5f9fd; }
.mobile-profile-panel[data-profile-view="support"] .mobile-support-messages { min-height: 0; max-height: none; flex: 1 1 auto; align-content: start; overscroll-behavior: contain; }
.mobile-profile-panel[data-profile-view="support"] .mobile-support-messages:has(.mobile-profile-empty) { place-content: center; }
.mobile-support-messages article { display: grid; max-width: 84%; gap: 4px; }
.mobile-support-messages article.mine { justify-self: end; }
.mobile-support-messages article p { margin: 0; padding: 9px 11px; border-radius: 13px; color: #21466f; background: #fff; font-size: 12px; line-height: 1.5; }
.mobile-support-messages article.mine p { color: #fff; background: #1478db; }
.mobile-support-messages article small, .mobile-support-messages article time { color: #8b9caf; font-size: 8px; }
.mobile-support-messages article.mine small, .mobile-support-messages article.mine time { text-align: right; }
.mobile-support-form { display: grid; grid-template-columns: minmax(0,1fr) 70px; gap: 8px; margin-top: 12px; padding: 12px; border: 1px solid #d5e4f2; border-radius: 18px; background: #fff; }
.mobile-profile-panel[data-profile-view="support"] .mobile-support-form { flex: 0 0 auto; }
.mobile-support-form textarea { width: 100%; height: 88px; margin: 0; padding: 12px; resize: none; border: 1px solid #d7e5f2; border-radius: 12px; outline: 0; color: #173d68; background: #f8fbfe; font-size: 12px; line-height: 1.55; }
.mobile-support-form button, .mobile-security-form button { border: 0; border-radius: 12px; color: #fff; background: #0b72da; font-weight: 800; }
.mobile-security-form { display: grid; gap: 12px; padding: 16px; }
.mobile-security-form label { display: grid; gap: 6px; color: #486888; font-size: 11px; font-weight: 800; }
.mobile-security-form input { height: 44px; padding: 0 12px; border: 1px solid #d2e1ef; border-radius: 12px; outline: 0; color: #173d68; background: #f8fbfe; }
.mobile-security-form button { height: 46px; }
.mobile-profile-loading, .mobile-profile-empty { margin: 0; padding: 30px 18px; color: #7d91a8; font-size: 12px; text-align: center; }
.mobile-profile-login { min-height: 310px; text-align: center; }
.mobile-profile-login > .lucide-icon { width: 62px; height: 62px; margin: 28px auto 16px; color: #8498ad; }
.mobile-creator-card { padding-bottom: 22px; }
.mobile-creator-heading { display: flex; align-items: center; gap: 13px; }
.mobile-creator-heading > i, .mobile-creator-upload > i { display: grid; width: 48px; height: 48px; flex: 0 0 auto; place-items: center; border-radius: 15px; background: linear-gradient(145deg,#e5f3ff,#e9fbff); }
.mobile-creator-heading img, .mobile-creator-upload > i img { width: 24px; height: 24px; }
.mobile-creator-heading > .mobile-module-preview { overflow: hidden; background: #eaf4fb; box-shadow: 0 6px 15px rgba(25,91,151,.15); }
.mobile-creator-heading > .mobile-module-preview img { width: 100%; height: 100%; object-fit: cover; }
.mobile-creator-heading small { color: #6f8cac; font-size: 11px; }
.mobile-creator-heading h2 { margin-top: 2px; }
.mobile-creator-heading p { margin: 4px 0 0; font-size: 12px; }
.mobile-creator-label { display: block; margin-top: 20px; color: #173d6c; font-size: 14px; font-weight: 900; }
.mobile-prompt-library-open { display: grid; width: 100%; min-height: 62px; grid-template-columns: 34px minmax(0,1fr) auto; grid-template-rows: auto auto; align-items: center; gap: 2px 9px; margin-top: 11px; padding: 10px 12px; border: 1px solid #b8d8f4; border-radius: 15px; color: #164b7d; background: linear-gradient(135deg,#f4faff,#e6f5ff); text-align: left; box-shadow: 0 5px 14px rgba(19,91,151,.08); }
.mobile-prompt-library-open > .prompt-library-icon { display: grid; width: 36px; height: 36px; grid-row: 1/3; place-items: center; border-radius: 11px; color: #fff; background: linear-gradient(145deg,#0b54d8 0%,#168ee6 54%,#18c7c8 100%); box-shadow: 0 7px 15px rgba(13,107,205,.25), inset 0 1px 0 rgba(255,255,255,.3); }
.mobile-prompt-library-open .prompt-library-icon svg { display:block; width:25px; height:25px; overflow:visible; }
.mobile-prompt-library-open .prompt-library-icon rect,.mobile-prompt-library-open .prompt-library-icon path { fill:none; stroke:currentColor; stroke-width:1.65; stroke-linecap:round; stroke-linejoin:round; }
.mobile-prompt-library-open .prompt-library-icon .prompt-library-spark { fill:currentColor; stroke:none; }
.mobile-prompt-library-open b { align-self: end; font-size: 13px; }
.mobile-prompt-library-open small { align-self: start; color: #7891ab; font-size: 10px; }
.mobile-prompt-library-open em { grid-column: 3; grid-row: 1/3; color: #0873cc; font-size: 11px; font-style: normal; font-weight: 800; }
.mobile-prompt-library-open { overflow: hidden; }
.mobile-prompt-library { position: fixed; z-index: 1800; top: 0; bottom: 0; left: 50%; display: grid; width: min(100vw,430px); height: 100vh; height: 100dvh; grid-template-rows: auto auto auto minmax(0,1fr); color: #102f57; background: #f2f8ff; transform: translateX(-50%); }
.mobile-prompt-library-open { touch-action: manipulation; }
body.mobile-prompt-library-visible { overflow: hidden; }
.mobile-prompt-library > header { display: flex; align-items: flex-start; gap: 12px; padding: calc(14px + env(safe-area-inset-top,0px)) 15px 12px; border-bottom: 1px solid #d9e7f4; background: #fff; }
.mobile-prompt-library > header > div { min-width: 0; flex: 1; }
.mobile-prompt-library > header small { color: #2185cd; font-size: 9px; font-weight: 900; letter-spacing: .08em; }
.mobile-prompt-library > header h2 { margin: 2px 0; color: #113b70; font-size: 22px; }
.mobile-prompt-library > header p { margin: 0; color: #71869c; font-size: 10px; line-height: 1.45; }
.mobile-prompt-library > header button { width: 36px; height: 36px; flex: 0 0 auto; border: 0; border-radius: 50%; color: #315a83; background: #edf4fb; font-size: 25px; line-height: 1; }
.mobile-prompt-library > label { display: flex; align-items: center; gap: 7px; margin: 10px 12px; padding: 0 11px; border: 1px solid #cfdfef; border-radius: 12px; background: #fff; }
.mobile-prompt-library > label > span { color: #5d7e9f; font-size: 18px; }
.mobile-prompt-library > label input { width: 100%; min-width: 0; height: 42px; border: 0; outline: 0; color: #173d68; background: transparent; font-size: 13px; }
.mobile-prompt-library > label em { flex: 0 0 auto; color: #748ba2; font-size: 10px; font-style: normal; }
.mobile-prompt-library > nav { display: flex; gap: 7px; overflow-x: auto; padding: 0 12px 9px; border-bottom: 1px solid #dbe8f5; scrollbar-width: none; }
.mobile-prompt-library > nav::-webkit-scrollbar { display: none; }
.mobile-prompt-library > nav button { display: flex; min-width: max-content; align-items: center; gap: 5px; padding: 8px 10px; border: 0; border-radius: 10px; color: #496986; background: #e8f1fb; font-size: 11px; font-weight: 800; }
.mobile-prompt-library > nav button.active { color: #0872c9; background: #fff; box-shadow: 0 4px 12px rgba(25,91,151,.12); }
.mobile-prompt-library > nav em { color: #8498aa; font-size: 9px; font-style: normal; }
#mobilePromptLibraryCards { overflow-y: auto; padding: 11px 12px calc(24px + env(safe-area-inset-bottom,0px)); }
.mobile-prompt-card { margin-bottom: 12px; padding: 12px; border: 1px solid #d7e5f2; border-radius: 16px; background: #fff; box-shadow: 0 5px 16px rgba(23,67,112,.06); }
.mobile-prompt-card header small { color: #2b88c5; font-size: 9px; font-weight: 900; }
.mobile-prompt-card header h3 { margin: 2px 0 9px; color: #173f6e; font-size: 15px; }
.mobile-prompt-visuals { display: grid; grid-template-columns: minmax(0,1fr) 20px minmax(0,1fr); align-items: center; gap: 5px; }
.mobile-prompt-visuals figure { position: relative; min-width: 0; margin: 0; overflow: hidden; border: 1px solid #d8e5f1; border-radius: 11px; background: #edf4fb; }
.mobile-prompt-visuals figcaption { position: absolute; z-index: 1; top: 6px; left: 6px; padding: 4px 6px; border-radius: 999px; color: #fff; background: rgba(5,35,68,.82); font-size: 8px; font-weight: 900; }
.mobile-prompt-visuals img { display: block; width: 100%; height: 134px; object-fit: cover; }
.mobile-prompt-visuals > i { display: grid; width: 20px; height: 20px; place-items: center; border-radius: 50%; color: #0875c4; background: #e4f4ff; font-size: 12px; font-style: normal; font-weight: 900; }
.mobile-prompt-card > section { margin-top: 10px; padding: 11px; border-radius: 11px; background: #f3f8fd; }
.mobile-prompt-card > section b { color: #173f69; font-size: 10px; }
.mobile-prompt-card > section p { margin: 5px 0 0; color: #4f687f; font-size: 11px; line-height: 1.65; white-space: pre-wrap; }
.mobile-prompt-card > section small { display: block; margin-top: 6px; color: #8193a6; font-size: 9px; line-height: 1.5; }
.mobile-prompt-card > button { width: 100%; height: 42px; margin-top: 10px; border: 0; border-radius: 10px; color: #fff; background: linear-gradient(110deg,#0878dc,#176cc2); font-size: 12px; font-weight: 900; }
.mobile-prompt-empty { display: grid; min-height: 180px; place-items: center; color: #748aa0; font-size: 12px; line-height: 1.8; text-align: center; }
.mobile-creator-upload { display: flex; width: 100%; min-height: 72px; align-items: center; gap: 12px; margin-top: 12px; padding: 10px 12px; border: 1px dashed #9fc7ed; border-radius: 16px; color: #1b4c7e; background: #f2f8ff; text-align: left; }
.mobile-creator-upload span { display: grid; gap: 4px; min-width: 0; }
.mobile-creator-upload b { overflow: hidden; font-size: 13px; text-overflow: ellipsis; white-space: nowrap; }
.mobile-creator-upload small { color: #7f95ae; font-size: 10px; }
.mobile-creator-upload.mobile-edit-replace-source { min-height: 48px; padding: 8px 12px; border-style: solid; }
.mobile-creator-upload.mobile-edit-replace-source span { display: flex; width: 100%; align-items: center; justify-content: space-between; gap: 10px; }
.mobile-creator-upload.mobile-edit-replace-source b { flex: 0 0 auto; }
.mobile-creator-upload.mobile-edit-replace-source small { text-align: right; }
.mobile-reference-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 10px; margin-top: 12px; }
.mobile-reference-grid[hidden] { display: none; }
.mobile-reference-card { min-width: 0; margin: 0; overflow: hidden; border: 1px solid #cddfee; border-radius: 13px; background: #f4f9ff; }
.mobile-reference-card > img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: contain; background: #e7f1fa; }
.mobile-reference-card figcaption { display: flex; min-width: 0; align-items: center; gap: 5px; padding: 7px 8px; }
.mobile-reference-card figcaption b { flex: 0 0 auto; color: #14568d; font-size: 11px; }
.mobile-reference-card figcaption span { min-width: 0; overflow: hidden; color: #627f99; font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.mobile-reference-card figcaption button { flex: 0 0 auto; margin-left: auto; padding: 3px 5px; border: 0; border-radius: 5px; color: #9b4850; background: #ffedf0; font-size: 10px; }
.mobile-creator-model { display: grid; gap: 7px; margin-top: 14px; padding: 12px; border: 1px solid #dbe8f5; border-radius: 15px; color: #607e9e; background: #f6faff; }
.mobile-creator-model > span { font-size: 12px; font-weight: 800; }
.mobile-creator-model select { width: 100%; min-height: 42px; padding: 0 10px; border: 1px solid #cddfed; border-radius: 9px; color: #153e6d; background: #fff; font-size: 13px; }
.mobile-creator-model small { color: #7890a8; font-size: 11px; }
.mobile-creator-history-warning { margin: 12px 0 0; padding: 11px 12px; border: 1px solid #f2c8a7; border-radius: 10px; color: #955624; background: #fff7eb; font-size: 12px; line-height: 1.6; }
.mobile-creator-result-source-hint { margin: 12px 0 0; padding: 11px 12px; border: 1px solid #b8d9f6; border-radius: 12px; color: #265780; background: #eef7ff; font-size: 12px; line-height: 1.6; }
.mobile-edit-panel { margin-top: 12px; padding: 12px; border: 1px solid #c8dcf2; border-radius: 16px; background: #f4f9ff; }
.mobile-edit-panel p { margin: 8px 2px 0; color: #526b89; font-size: 12px; line-height: 1.5; }
.mobile-edit-surface { position: relative; width: 100%; overflow: hidden; border-radius: 12px; background: #e7eff7; touch-action: none; user-select: none; -webkit-user-select: none; }
.mobile-edit-surface img { display: block; width: 100%; height: auto; pointer-events: none; }
.mobile-edit-surface [data-mobile-edit-selection] { position: absolute; box-sizing: border-box; border: 2px solid #0e7bef; background: rgba(14,123,239,.22); box-shadow: 0 0 0 9999px rgba(6,24,52,.3); pointer-events: none; }
.mobile-creator-options { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 14px; }
.mobile-creator-options[hidden] { display: none; }
.mobile-creator-options fieldset { min-width: 0; margin: 0; padding: 11px; border: 1px solid #dbe8f5; border-radius: 15px; }
.mobile-creator-options legend { padding: 0 5px; color: #607e9e; font-size: 11px; font-weight: 800; }
.mobile-creator-options fieldset > div { display: grid; grid-template-columns: repeat(2,1fr); gap: 7px; }
.mobile-creator-options button { height: 34px; border: 0; border-radius: 9px; color: #557391; background: #eef5fc; font-size: 11px; font-weight: 800; }
.mobile-creator-options button[data-creator-ratio] { display: flex; height: 55px; flex-direction: column; align-items: center; justify-content: center; gap: 5px; padding: 4px; }
.mobile-creator-options button[data-creator-ratio]::before { content: ""; display: block; width: 24px; height: 18px; box-sizing: border-box; border: 2px solid currentColor; border-radius: 3px; background: rgba(255,255,255,.42); box-shadow: inset 0 0 0 2px rgba(255,255,255,.28); }
.mobile-creator-options button[data-creator-ratio="auto"]::before { width: 25px; height: 25px; border: 0; border-radius: 0; background: currentColor; box-shadow: none; -webkit-mask: url('/icons/mobile-h5/lucide/scan-line.svg') center / 25px 25px no-repeat; mask: url('/icons/mobile-h5/lucide/scan-line.svg') center / 25px 25px no-repeat; }
.mobile-creator-options button[data-creator-ratio="1:1"]::before { width: 19px; height: 19px; }
.mobile-creator-options button[data-creator-ratio="4:3"]::before { width: 25px; height: 19px; }
.mobile-creator-options button[data-creator-ratio="3:4"]::before { width: 17px; height: 22px; }
.mobile-creator-options button[data-creator-ratio="16:9"]::before { width: 31px; height: 18px; }
.mobile-creator-options button[data-creator-ratio="9:16"]::before { width: 14px; height: 25px; }
.mobile-creator-options button[data-creator-ratio="3:2"]::before { width: 28px; height: 19px; }
.mobile-creator-options button[data-creator-ratio="2:3"]::before { width: 16px; height: 24px; }
.mobile-creator-options button[data-creator-ratio="21:9"]::before { width: 33px; height: 15px; }
.mobile-creator-options button.active, .mobile-module-switcher button.active { color: #fff; background: linear-gradient(105deg,#0870e5,#18a7eb); box-shadow: none; }
.mobile-module-switcher { max-height: 200px; overflow-y: auto; padding-right: 3px; }
.mobile-module-switcher button { height: 48px; }
.subpage-primary:disabled { cursor: wait; opacity: .72; }
.mobile-creator-output { margin-top: 16px; }
.mobile-creator-progress { display: flex; align-items: center; gap: 12px; padding: 14px; border: 1px solid #cfe1f3; border-radius: 15px; background: #f4f9ff; }
.mobile-creator-progress > i { width: 25px; height: 25px; flex: 0 0 auto; border: 3px solid #c9def4; border-top-color: #0879e8; border-radius: 50%; animation: mobileCreatorSpin .8s linear infinite; }
.mobile-creator-progress > div { display: grid; gap: 4px; }
.mobile-creator-progress b { color: #153e6d; font-size: 13px; }
.mobile-creator-progress span { color: #7189a2; font-size: 11px; line-height: 1.5; }
.mobile-creator-progress.error > i { border: 0; background: #ef5b62; animation: none; }
.mobile-creator-output-head small { color: #1684df; font-weight: 800; }
.mobile-creator-output-head h3 { margin: 4px 0 10px; color: #153e6d; font-size: 16px; }
.mobile-creator-results { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 10px; }
.mobile-creator-results article { overflow: hidden; border: 1px solid #d5e4f2; border-radius: 14px; background: #fff; }
.mobile-creator-results img,
.mobile-creator-results video { display: block; width: 100%; aspect-ratio: 1/1; object-fit: contain; background: #edf5fb; }
.mobile-creator-results a { display: block; padding: 10px; color: #0874dc; font-size: 12px; font-weight: 900; text-align: center; text-decoration: none; }
.mobile-result-actions { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 7px; padding: 8px 9px 0; }
.mobile-result-actions button { min-height: 36px; padding: 6px 3px; border: 1px solid #8dbdf0; border-radius: 9px; color: #075eb3; background: #f0f7ff; font-size: 11px; font-weight: 800; cursor: pointer; }
.mobile-result-actions button:last-child { border-color: #117adb; color: #fff; background: linear-gradient(105deg,#0969d8,#139bdf); }
.mobile-result-actions button:focus-visible { outline: 2px solid #0b68cf; outline-offset: 2px; }
.mobile-example-results { grid-template-columns: minmax(0,1fr); }
.mobile-example-results img { max-height: 430px; aspect-ratio: auto; object-fit: contain; }
.mobile-example-results span { display: block; padding: 10px 12px; color: #65809c; font-size: 11px; line-height: 1.5; text-align: center; }
@keyframes mobileCreatorSpin { to { transform: rotate(360deg); } }
.subpage-empty { display: grid; min-height: 390px; place-items: center; color: #7790ac; text-align: center; }
.subpage-empty i { color: #a9c9e9; font-size: 50px; font-style: normal; }
.mobile-tasks-panel { display: grid; gap: 12px; }
.mobile-tasks-heading { display: flex; align-items: center; justify-content: space-between; padding: 4px 3px 2px; }
.mobile-tasks-heading small { color: #7190b1; font-size: 12px; }
.mobile-tasks-heading h2 { margin: 3px 0 0; color: #0a2d64; font-size: 23px; }
.mobile-tasks-heading button { width: 38px; height: 38px; border: 0; border-radius: 50%; color: #1265b5; background: #e7f3ff; font-size: 25px; }
.mobile-task-search { display: grid; gap: 5px; color: #6785a4; font-size: 11px; font-weight: 800; }
.mobile-task-search input { width: 100%; min-height: 44px; padding: 0 12px; border: 1px solid #d1e2f2; border-radius: 12px; outline-color: #1684df; color: #173e6d; background: #fff; font-size: 14px; }
.mobile-task-summary { margin: 0 2px; color: #7890aa; font-size: 11px; }
.mobile-tasks-more { min-height: 42px; border: 1px solid #c9def1; border-radius: 11px; color: #1265b5; background: #f3f9ff; font-size: 12px; font-weight: 800; }
.mobile-tasks-more[hidden] { display: none; }
.mobile-task-list { display: grid; gap: 12px; }
.mobile-tasks-loading, .mobile-tasks-empty { display: grid; min-height: 230px; place-items: center; align-content: center; gap: 8px; padding: 28px 20px; border-radius: 20px; color: #7890aa; background: rgba(255,255,255,.92); box-shadow: 0 10px 28px rgba(31,79,136,.09); text-align: center; }
.mobile-tasks-empty i { color: #8bb8e4; font-size: 38px; font-style: normal; }
.mobile-tasks-empty b { color: #173e6d; font-size: 17px; }
.mobile-tasks-empty span { max-width: 280px; font-size: 12px; line-height: 1.6; }
.mobile-tasks-empty .subpage-primary { max-width: 260px; }
.mobile-task-card { overflow: hidden; padding: 15px; border: 1px solid rgba(193,216,238,.72); border-radius: 20px; background: rgba(255,255,255,.95); box-shadow: 0 10px 28px rgba(31,79,136,.08); }
.mobile-task-card > header { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.mobile-task-card h3 { margin: 0; color: #123b6d; font-size: 16px; }
.mobile-task-card p { overflow: hidden; margin: 5px 0 0; color: #7890aa; font-size: 11px; line-height: 1.5; text-overflow: ellipsis; white-space: nowrap; }
.mobile-task-status { flex: 0 0 auto; padding: 5px 8px; border-radius: 999px; color: #197345; background: #e7f8ee; font-size: 10px; }
.mobile-task-status.running { color: #a66c09; background: #fff4d9; }
.mobile-task-status.failed { color: #b33b45; background: #ffeaed; }
.mobile-task-meta { display: flex; justify-content: space-between; margin-top: 10px; color: #94a6ba; font-size: 10px; }
.mobile-task-results { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 9px; margin-top: 12px; }
.mobile-task-result-item { min-width: 0; }
.mobile-task-results a { display: block; overflow: hidden; aspect-ratio: 1; border-radius: 10px; background: #eef5fb; }
.mobile-task-results img { display: block; width: 100%; height: 100%; object-fit: cover; }
.mobile-task-result-role { display: block; margin-top: 5px; color: #446b96; font-size: 11px; font-weight: 800; }
.mobile-task-results .mobile-result-actions { gap: 5px; padding: 6px 0 0; }
.mobile-task-results .mobile-result-actions button { min-height: 32px; font-size: 10px; }
.mobile-task-no-result { margin-top: 12px; padding: 14px; border-radius: 12px; color: #7890aa; background: #f5faff; font-size: 11px; text-align: center; }
.mobile-task-card { cursor: pointer; }
.mobile-task-open-hint { display: block; margin-top: 11px; color: #1473c7; font-size: 11px; text-align: right; }
.mobile-task-detail-open { overflow: hidden; }
.mobile-task-detail { position: fixed; z-index: 160; inset: 0; display: grid; place-items: end center; }
.mobile-task-detail-backdrop { position: absolute; inset: 0; background: rgba(8,35,70,.42); }
.mobile-task-detail-sheet { position: relative; display: flex; width: min(100%, 430px); max-height: min(88vh,760px); max-height: min(88dvh,760px); flex-direction: column; overflow: hidden; border-radius: 24px 24px 0 0; background: linear-gradient(160deg,#f9fcff,#eaf5ff); box-shadow: 0 -10px 35px rgba(18,60,105,.2); }
.mobile-task-detail-sheet > header { display: grid; min-height: 58px; grid-template-columns: 44px 1fr 44px; align-items: center; border-bottom: 1px solid #dce9f4; background: rgba(255,255,255,.96); }
.mobile-task-detail-sheet > header button { width: 40px; height: 40px; border: 0; color: #0b5eac; background: transparent; font-size: 30px; }
.mobile-task-detail-sheet > header h2 { margin: 0; color: #0d3568; font-size: 18px; text-align: center; }
.mobile-task-detail-body { overflow-y: auto; padding: 18px 16px 28px; }
.mobile-task-detail-title { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.mobile-task-detail-title h3 { margin: 0; color: #123b6d; font-size: 21px; }
.mobile-task-detail-title b { padding: 5px 9px; border-radius: 999px; color: #197345; background: #e7f8ee; font-size: 10px; }
.mobile-task-detail-date { margin: 7px 0 16px; color: #8498ae; font-size: 11px; }
.mobile-task-prompt, .mobile-task-detail-results { padding: 15px; border: 1px solid rgba(193,216,238,.72); border-radius: 17px; background: rgba(255,255,255,.95); }
.mobile-task-prompt small, .mobile-task-detail-results > small { color: #7190ad; font-size: 11px; font-weight: 800; }
.mobile-task-prompt p { margin: 8px 0 0; color: #173e6d; font-size: 14px; line-height: 1.7; white-space: pre-wrap; }
.mobile-task-detail-results { margin-top: 12px; }
.mobile-task-detail-results > div { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 9px; margin-top: 10px; }
.mobile-task-detail-results a { display: block; overflow: hidden; aspect-ratio: 1; border-radius: 12px; background: #edf5fb; }
.mobile-task-detail-results img { display: block; width: 100%; height: 100%; object-fit: cover; }
.mobile-task-detail-results video { display: block; width: 100%; aspect-ratio: 1; border-radius: 12px; background: #edf5fb; object-fit: cover; }
.mobile-task-detail-results .mobile-result-actions { gap: 5px; padding: 6px 0 0; }
.mobile-task-detail-results .mobile-result-actions button { min-height: 32px; font-size: 10px; }
.mobile-creator-upload.has-reference { display: grid; grid-template-columns: minmax(0,1fr); align-items: stretch; gap: 9px; padding: 10px; }
.mobile-creator-upload.has-reference .mobile-reference-preview { display: block; width: 100%; height: auto; max-height: 430px; border-radius: 12px; object-fit: contain; background: #e7f1fa; box-shadow: 0 2px 8px rgba(20,70,120,.14); }
.mobile-creator-upload .mobile-reference-copy { padding: 0 3px 2px; }
.mobile-lightbox-open { overflow: hidden; }
.mobile-image-lightbox { position: fixed; z-index: 240; inset: 0; display: grid; place-items: center; padding: 22px; background: rgba(3,18,38,.88); }
.mobile-image-lightbox img { display: block; max-width: 100%; max-height: 88vh; max-height: 88dvh; border-radius: 12px; object-fit: contain; box-shadow: 0 12px 40px rgba(0,0,0,.35); }
.mobile-image-lightbox > button { position: absolute; top: max(16px,env(safe-area-inset-top)); right: 16px; width: 42px; height: 42px; border: 0; border-radius: 50%; color: #173b68; background: #fff; font-size: 30px; line-height: 1; }
.mobile-result-detail-open { overflow: hidden; }
.mobile-result-detail { position: fixed; z-index: 245; inset: 0; display: grid; place-items: center; }
.mobile-result-detail-backdrop { position: absolute; inset: 0; background: rgba(5,22,48,.75); }
.mobile-result-detail-sheet { position: relative; display: grid; grid-template-rows: auto minmax(0,1fr) auto; width: min(520px,100%); height: min(860px,100vh); height: min(860px,100dvh); overflow: hidden; border-radius: 22px; background: #f6faff; box-shadow: 0 22px 70px rgba(1,12,33,.35); }
.mobile-result-detail-sheet > header { display: grid; grid-template-columns: 44px 1fr 44px; align-items: center; min-height: 58px; padding: 7px 14px; border-bottom: 1px solid #deebf7; color: #163f70; text-align: center; }
.mobile-result-detail-sheet > header button { width: 36px; height: 36px; border: 0; border-radius: 10px; color: #234b78; background: #e8f2fc; font-size: 26px; line-height: 1; cursor: pointer; }
.mobile-result-detail-body { overflow: auto; overscroll-behavior: contain; }
.mobile-result-detail-image { display: grid; min-height: 280px; max-height: 58vh; max-height: 58dvh; padding: 12px; place-items: center; background: #e7f0fb; }
.mobile-result-detail-image img { display: block; max-width: 100%; max-height: 54vh; max-height: 54dvh; border-radius: 10px; object-fit: contain; box-shadow: 0 8px 30px rgba(11,44,89,.12); }
.mobile-result-detail-info { padding: 18px 20px 10px; }
.mobile-result-detail-info small { color: #5883ae; font-size: 11px; font-weight: 800; }
.mobile-result-detail-info p { margin: 7px 0; color: #193b63; font-size: 14px; line-height: 1.6; white-space: pre-wrap; overflow-wrap: anywhere; }
.mobile-result-detail-info > span { color: #6989a7; font-size: 11px; }
.mobile-result-detail-thumbs { display: flex; gap: 8px; padding: 8px 20px 18px; overflow-x: auto; }
.mobile-result-detail-thumbs[hidden] { display: none; }
.mobile-result-detail-thumbs button { flex: 0 0 58px; width: 58px; height: 58px; padding: 2px; border: 2px solid transparent; border-radius: 10px; background: #fff; cursor: pointer; }
.mobile-result-detail-thumbs button.active { border-color: #0872dd; }
.mobile-result-detail-thumbs img { width: 100%; height: 100%; border-radius: 7px; object-fit: cover; }
.mobile-result-detail-sheet > footer { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 8px; padding: 12px 16px calc(12px + var(--mobile-safe-bottom)); border-top: 1px solid #d8e8f7; background: #fff; }
.mobile-result-detail-sheet > footer button,.mobile-result-detail-sheet > footer a { display: grid; min-height: 44px; padding: 8px; place-items: center; border: 1px solid #b6d6f4; border-radius: 12px; color: #1266b7; background: #f2f8ff; font-size: 12px; font-weight: 800; text-align: center; text-decoration: none; cursor: pointer; }
.mobile-result-detail-sheet > footer .primary { border-color: #0674db; color: #fff; background: linear-gradient(110deg,#085dcc,#10a5ca); }
.mobile-result-detail-sheet > footer button:disabled { opacity: .55; cursor: wait; }
.mobile-result-detail-tools { grid-column: 1 / -1; display: grid; gap: 7px; padding-top: 9px; border-top: 1px solid #e4edf7; }
.mobile-result-detail-tools small { color: #6989a7; font-size: 11px; font-weight: 800; }
.mobile-result-detail-tools > div { display: grid; grid-template-columns: repeat(5,minmax(0,1fr)); gap: 5px; }
.mobile-result-detail-sheet > footer .mobile-result-detail-tools button { min-height: 36px; padding: 5px 2px; border-color: #dce9f5; background: #f7fbff; font-size: 11px; }
@media (max-width: 600px) { .mobile-result-detail-sheet { width: 100%; height: 100vh; height: 100dvh; border-radius: 0; } .mobile-result-detail-sheet > header { padding-top: var(--mobile-safe-top); } }
.landing-drawer { position: fixed; z-index: 80; inset: 0; visibility: hidden; pointer-events: none; }
.landing-drawer.open { visibility: visible; pointer-events: auto; }
.landing-drawer > button { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; opacity: 0; background: rgba(5,27,60,.4); transition: opacity .2s; }
.landing-drawer.open > button { opacity: 1; }
.landing-drawer nav { position: absolute; top: 0; right: 0; display: flex; width: min(78%,320px); height: 100%; padding: calc(18px + var(--mobile-safe-top)) 17px; flex-direction: column; gap: 9px; background: linear-gradient(180deg,#faffff,#e9f5ff); transform: translateX(102%); transition: transform .22s; }
.landing-drawer.open nav { transform: none; }
.landing-drawer header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; padding-bottom: 14px; box-shadow: 0 1px rgba(189,215,239,.65); }
.landing-drawer header img { width: 120px; }
.landing-drawer header button { width: 40px; height: 40px; border: 0; border-radius: 13px; color: #315c87; background: #e4f1ff; font-size: 24px; }
.landing-drawer nav > button { height: 52px; padding: 0 15px; border: 0; border-radius: 15px; color: #163e6e; background: rgba(255,255,255,.76); font-size: 15px; font-weight: 800; text-align: left; }
.mobile-h5-toast { position: fixed; z-index: 100; left: 50%; bottom: calc(96px + var(--mobile-safe-bottom)); max-width: calc(100% - 40px); padding: 11px 16px; border-radius: 999px; color: #fff; background: rgba(5,28,59,.9); font-size: 13px; font-weight: 700; white-space: nowrap; opacity: 0; transform: translate(-50%,10px); transition: .18s; pointer-events: none; }
.mobile-h5-toast.show { opacity: 1; transform: translate(-50%,0); }

/* 941x1672 reference calibration: 375px wide maps to a 667px visual canvas. */
@media (max-width: 430px) {
  html, body { scrollbar-width: none; }
  html::-webkit-scrollbar, body::-webkit-scrollbar { display: none; }

  .mobile-brand img { width: 74px; }
  .mobile-brand > i { height: 16px; margin: 0 9px; }
  .mobile-brand > span { font-size: 9px; }

  /* Landing */
  .mobile-landing { min-height: 667px; padding-bottom: 7px; }
  .landing-header { height: 36px; padding: 0 13px; }
  .hamburger { width: 29px; height: 29px; gap: 4px; }
  .hamburger span { width: 18px; height: 2px; }
  .mobile-landing main { padding: 5px 12px 0; }
  .eyebrow { margin: 2px 0 5px; font-size: 6px; letter-spacing: .31em; }
  .landing-hero h1 { font-size: 25px; line-height: 1.04; letter-spacing: -.055em; }
  .landing-hero h1 em { margin-top: 2px; font-size: 31px; letter-spacing: -.07em; }
  .landing-lead { margin: 10px auto 8px; font-size: 11px; line-height: 1.5; }
  .landing-actions { gap: 8px; }
  .landing-actions button { height: 27px; min-width: 84px; gap: 5px; padding: 0 11px; box-shadow: 0 7px 15px rgba(7,100,216,.2); font-size: 10px; }
  .landing-actions button:nth-child(2) { min-width: 80px; }
  .landing-actions button i { width: 15px; height: 15px; font-size: 6px; }
  .landing-actions button .lucide-icon { width: 13px; height: 13px; }
  .landing-visual { height: 170px; margin-top: 10px; border-radius: 14px; box-shadow: 0 9px 22px rgba(19,91,163,.14), inset 0 1px 0 #fff; }

  .robot-stage { height: 178px; margin: 4px -1px 3px; }
  .robot-stage::before { top: 18px; width: 166px; height: 166px; }
  .robot-halo { top: 2px; width: 162px; height: 180px; }
  .robot-halo::before { inset: 10px -5px -4px; filter: blur(2px); }
  .robot-halo::after { left: 22px; right: 22px; bottom: 2px; height: 22px; border-width: 1px; box-shadow: 0 0 12px #45c8ff, 0 0 0 6px rgba(98,194,255,.13); }
  .robot-halo > span { right: 0; bottom: 2px; width: 72px; height: 22px; }
  .robot-halo img { filter: saturate(1.04) drop-shadow(0 9px 15px rgba(24,120,205,.2)); }
  .robot-stage > p { right: 72px; bottom: 0; font-size: 7px; }
  .robot-ui-orbit { top: 4px; width: 170px; height: 176px; }
  .orbit-ring { left: 20px; right: 20px; bottom: 6px; height: 28px; border-width: 1px; box-shadow: 0 0 9px rgba(33,181,255,.65), inset 0 0 9px rgba(45,183,255,.2), 0 0 0 4px rgba(79,190,255,.08); }
  .orbit-card { border-radius: 6px; box-shadow: 0 4px 11px rgba(21,117,195,.14), inset 0 1px 0 rgba(255,255,255,.9); }
  .orbit-image { left: 12px; top: 34px; width: 33px; height: 28px; }
  .orbit-image span { width: 18px; height: 13px; border-radius: 2px; }
  .orbit-image span::before { left: 3px; bottom: -3px; width: 11px; height: 11px; }
  .orbit-image span::after { right: 3px; top: 2px; width: 3px; height: 3px; }
  .orbit-copy { right: 11px; top: 46px; width: 36px; height: 32px; }
  .orbit-copy b { font-size: 14px; }
  .orbit-lines { left: 19px; bottom: 45px; width: 37px; height: 29px; gap: 2px; padding: 6px; }
  .orbit-lines span { height: 2px; }
  .orbit-gallery { right: 16px; bottom: 41px; width: 34px; height: 29px; }
  .orbit-gallery span { width: 16px; height: 17px; border-width: 1px; box-shadow: -4px 3px 0 rgba(62,180,241,.2); }
  .orbit-spark.one { left: 6px; top: 88px; font-size: 8px; }
  .orbit-spark.two { right: 3px; top: 99px; font-size: 7px; }

  .robot-feature { width: 92px; min-height: 70px; grid-template-columns: 28px 1fr; padding: 7px 6px 9px; border-radius: 11px; box-shadow: 0 7px 18px rgba(35,95,158,.15), inset 0 1px 0 #fff; }
  .robot-feature.top { top: 7px; }
  .robot-feature.bottom { top: 98px; }
  .robot-feature b { font-size: 9px; }
  .robot-feature span { margin-top: 3px; font-size: 7px; line-height: 1.35; }
  .robot-feature > button { width: 20px; height: 20px; bottom: -8px; font-size: 9px; }
  .robot-feature.left > button { left: 11px; }
  .robot-feature.right > button { right: 11px; }
  .feature-icon { width: 27px; height: 36px; border-radius: 8px; font-size: 15px; }
  .feature-preview { width: 27px; height: 36px; border-radius: 8px; }
  .feature-icon .lucide-icon { width: 17px; height: 17px; }
  .feature-icon.wand::before { width: 3px; height: 20px; }
  .feature-icon.wand::after { right: 3px; top: 3px; font-size: 10px; text-shadow: -7px 5px 0 rgba(42,165,244,.7); }
  .feature-icon.layers span { width: 16px; height: 9px; margin: -2px 0; border-width: 2px; }
  .robot-feature.template-card { grid-template-columns: 31px 1fr; column-gap: 5px; }
  .robot-feature.template-card > img { width: 30px; height: 44px; border-radius: 5px; }
  .robot-feature.export-card { width: 96px; min-height: 73px; gap: 4px; padding: 7px 6px 8px; }
  .export-title { gap: 4px; }
  .export-title .feature-icon { width: 19px; height: 19px; border-radius: 5px; font-size: 10px; }
  .export-title b { font-size: 8px; }
  .format-icons { gap: 2px; }
  .format-icons i { height: 18px; border-radius: 3px; font-size: 6px; }
  .robot-feature.export-card > span { font-size: 6px; }

  .landing-capabilities { min-height: 0; grid-template-columns: repeat(4,minmax(0,1fr)); margin: -14px 7px 0; padding: 5px; border-radius: 12px; box-shadow: 0 8px 18px rgba(23,82,145,.14), inset 0 1px 0 #fff; }
  .landing-capabilities > article, .landing-capabilities > button { height: 42px; gap: 3px; padding: 4px 2px; }
  .landing-capabilities > * > .lucide-icon { width: 20px; height: 20px; padding: 4px; border-radius: 6px; }
  .landing-capabilities b { margin: 0; font-size: 7px; }
  .landing-bottom-cta { height: 38px; gap: 7px; margin-top: 5px; box-shadow: 0 8px 15px rgba(9,91,200,.2); font-size: 12px; }

  /* Operation home */
  .mobile-workspace, .mobile-subpage { min-height: 667px; padding-bottom: calc(58px + var(--mobile-safe-bottom)); }
  .home-header { height: 28px; padding: 0 14px; }
  .home-header .mobile-brand img { width: 68px; }
  .home-header .mobile-brand > i { height: 14px; margin-inline: 7px; }
  .home-header .mobile-brand > span { font-size: 8px; }
  .home-header nav { gap: 7px; }
  .home-header nav button { min-width: 21px; height: 25px; gap: 2px; }
  .home-header nav .lucide-icon { width: 16px; height: 16px; }
  .home-header .support-robot-icon { width: 25px; height: 25px; }
  .home-header nav span { font-size: 8px; }
  .home-header nav button[data-message]::after { right: 0; top: 2px; width: 4px; height: 4px; }
  .home-scroll { padding: 0 14px 12px; }
  .mobile-search { height: 28px; gap: 7px; padding: 0 10px; border-radius: 9px; box-shadow: 0 5px 14px rgba(31,93,159,.08), inset 0 0 0 1px rgba(189,217,244,.55); }
  .mobile-search > .lucide-icon { width: 14px; height: 14px; }
  .mobile-search input { font-size: 8px; }
  .mobile-search button { width: 20px; height: 20px; }
  .mobile-search button .lucide-icon { width: 14px; height: 14px; }
  .home-hero-banner { height: 98px; grid-template-columns: 1.25fr .75fr; margin-top: 7px; border-radius: 12px; box-shadow: 0 7px 17px rgba(27,93,161,.11), inset 0 1px 0 #fff; }
  .home-hero-banner > div { padding: 10px 0 7px 11px; }
  .home-hero-banner > div::before { inset: 0 -18px 0 0; }
  .home-hero-banner small { font-size: 5px; letter-spacing: .2em; }
  .home-hero-banner h1 { width: 170px; margin: 5px 0 4px; font-size: 14px; line-height: 1.08; }
  .home-hero-banner h1 em { margin-top: 1px; font-size: 19px; }
  .home-hero-banner p { font-size: 8px; line-height: 1.25; }
  .home-hero-banner ol { gap: 5px; margin-top: 7px; font-size: 7px; }
  .home-hero-banner li { gap: 3px; }
  .home-hero-banner li i { width: 14px; height: 14px; font-size: 7px; }
  .home-hero-banner figure img { left: 53%; top: 4px; width: 96px; height: 96px; filter: drop-shadow(0 6px 10px rgba(21,120,205,.16)); }
  .banner-ui-layer { inset: 2px -4px 2px -9px; }
  .banner-ring { left: 12px; right: 7px; bottom: 6px; height: 18px; border-width: 1px; box-shadow: 0 0 7px rgba(48,189,255,.5), 0 0 0 3px rgba(85,193,250,.07); }
  .banner-glow { left: 9px; top: 12px; width: 74px; height: 74px; }
  .banner-panel { border-radius: 5px; box-shadow: 0 3px 9px rgba(17,105,179,.13); }
  .banner-panel.image { left: 3px; top: 14px; width: 25px; height: 22px; }
  .banner-panel.image span { width: 14px; height: 10px; border-radius: 2px; }
  .banner-panel.image span::before { left: 3px; bottom: -4px; width: 10px; height: 10px; }
  .banner-panel.text { left: -2px; top: 53px; width: 23px; height: 21px; font-size: 11px; }
  .banner-panel.pen { right: 1px; top: 17px; width: 27px; height: 27px; font-size: 14px; }
  .banner-panel.tiny { right: 2px; bottom: 22px; width: 26px; height: 20px; gap: 2px; padding: 5px; }
  .banner-panel.tiny span { height: 2px; }

  .tool-panel { margin-top: 6px; padding: 6px 7px; border-radius: 12px; box-shadow: 0 6px 15px rgba(34,88,151,.08), inset 0 1px 0 #fff; }
  .tool-panel header, .featured-templates header { padding: 0 1px 4px; }
  .tool-panel h2, .featured-templates h2 { font-size: 13px; }
  .tool-panel header button, .featured-templates header button { font-size: 7px; line-height: 1.25; }
  .design-tool-grid { gap: 4px; }
  .design-tool-grid button, .image-tool-grid button { height: 58px; gap: 5px; border-radius: 10px; box-shadow: 0 3px 9px rgba(31,89,151,.07), inset 0 0 0 1px rgba(203,224,244,.5); }
  .design-tool-grid .module-symbol, .image-tool-grid .module-symbol { width: 27px; height: 27px; border-radius: 8px; }
  .design-tool-grid .module-symbol::before, .image-tool-grid .module-symbol::before { inset: 6px; }
  .design-tool-grid span { font-size: 8px; }
  .image-tool-grid { gap: 6px 4px; }
  .image-tool-grid button { height: 60px; border-radius: 10px; }
  .image-tool-grid span { font-size: 8px; }
  .mobile-categories { gap: 5px; margin-top: 6px; }
  .mobile-categories button { height: 23px; padding: 0 9px; border-radius: 8px; box-shadow: 0 3px 8px rgba(34,88,151,.06); font-size: 7px; }
  .mobile-categories .lucide-icon { width: 8px; height: 8px; }
  .featured-templates { margin-top: 7px; }
  .featured-templates header { padding-bottom: 4px; }
  .featured-templates header > div { gap: 6px; }
  .featured-templates header span { font-size: 7px; }
  .featured-templates header button { font-size: 7px; }
  .mobile-template-grid { gap: 7px; }
  .mobile-template-card, .template-skeleton { height: 104px; border-radius: 10px; }
  .mobile-template-card { box-shadow: 0 5px 13px rgba(24,79,139,.09); }
  .mobile-template-card span { left: 5px; right: 5px; bottom: 5px; padding: 4px 5px; border-radius: 5px; font-size: 6px; }
  .mobile-template-summary { min-height: 14px; margin: -3px 0 8px !important; font-size: 8px !important; }
  .mobile-template-load-more { height: 34px; margin-top: 10px; border-radius: 10px; font-size: 10px; }
}

@media (min-width: 431px) {
  body { background: #dfe9f3; }
  .mobile-h5-splash { inset: 0 auto 0 50%; width: min(100%,480px); transform: translateX(-50%); box-shadow: 0 0 70px rgba(25,61,102,.2); }
  .mobile-app { max-width: 430px; box-shadow: 0 0 70px rgba(25,61,102,.16); }
  .mobile-profile-panel { left: 50%; right: auto; width: 430px; transform: translateX(-50%); }
}
@media (max-width: 374px) {
  .landing-hero h1 { font-size: 23px; }
  .landing-hero h1 em { font-size: 29px; }
  .landing-actions { gap: 6px; }
  .landing-actions button { min-width: 78px; padding-inline: 9px; }
  .landing-actions button:nth-child(2) { min-width: 74px; }
  .robot-feature { width: 86px; }
  .home-scroll, .home-header { padding-inline: 10px; }
  .home-header nav { gap: 5px; }
  .design-tool-grid, .image-tool-grid { gap-inline: 4px; }
  .mobile-creator-options { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}

/* H5 login methods: keep password login and the production SMS flow together. */
.mobile-auth-methods{display:grid;grid-template-columns:1fr 1fr;gap:8px;padding:4px;border-radius:12px;background:#e3eef9}
.mobile-auth-methods button{min-height:42px;border:0;border-radius:9px;background:transparent;color:#66809c;font-size:14px;font-weight:800}
.mobile-auth-methods button.active{background:#fff;color:#075fc9;box-shadow:0 4px 14px rgba(25,82,142,.12)}
.mobile-auth-panel{display:grid;gap:13px}
.mobile-auth-panel[hidden]{display:none!important}
.mobile-auth-sheet input[type=tel]{box-sizing:border-box;width:100%;min-height:52px;border:1px solid #d5e5f4;border-radius:5px;padding:14px 15px;background:#fff;color:#15345f;font-size:16px}
.mobile-sms-code-row{display:grid;grid-template-columns:minmax(0,1fr) 116px;gap:9px}
.mobile-sms-code-row button{border:1px solid #9ec9ee;border-radius:5px;background:#edf7ff;color:#0871ce;font-weight:800}
.mobile-sms-code-row button:disabled{opacity:.58}

/* Keep the header inside the 430px app even on wider phones. */
.mobile-workspace .home-header {
  display: grid;
  grid-template-columns: clamp(84px, 24vw, 104px) minmax(0, 1fr);
  gap: 8px;
  height: auto;
  padding: 14px 14px 10px;
}
.mobile-workspace .home-header .mobile-brand {
  min-width: 0;
}
.mobile-workspace .home-header .mobile-brand img {
  flex: none;
  width: 100%;
}
.mobile-workspace .home-header nav {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
  width: 100%;
  min-width: 0;
}
.mobile-workspace .home-header nav button {
  width: 100%;
  min-width: 0;
  min-height: 40px;
  height: 40px;
  gap: 4px;
  white-space: nowrap;
}
.mobile-workspace .home-header nav .lucide-icon {
  flex: none;
  width: 22px;
  height: 22px;
}
.mobile-workspace .home-header nav span {
  flex: none;
  font-size: 12px;
  white-space: nowrap;
}
.mobile-workspace .home-header nav .usage-guide-mobile-trigger {
  min-width: 0;
  min-height: 40px;
  height: 40px;
  font-size: 11px;
}
.mobile-workspace .home-header .support-robot-icon {
  flex: none;
  width: 30px;
  height: 30px;
}
.mobile-workspace .home-header nav button[data-message]::after {
  right: calc(50% - 15px);
  top: 3px;
  width: 6px;
  height: 6px;
}

/* Mobile references replace the empty upload panel with the desktop thumbnail strip. */
body.mobile-reference-ui .mobile-brief-card .mobile-reference-grid{
  display:flex;flex-wrap:nowrap;align-items:center;gap:10px;min-width:0;min-height:94px;margin:10px 0 0;padding:12px;box-sizing:border-box;border:1px solid #d4e3f1;border-radius:18px;background:#fff;overflow-x:auto;overflow-y:hidden;overscroll-behavior-x:contain;scrollbar-width:none;touch-action:pan-x pan-y
}
body.mobile-reference-ui .mobile-brief-card .mobile-reference-grid::-webkit-scrollbar{display:none}
body.mobile-reference-ui .mobile-brief-card .mobile-reference-grid[hidden],
body.mobile-reference-ui .mobile-brief-card>.mobile-creator-upload[hidden]{display:none!important}
body.mobile-reference-ui .mobile-brief-card .mobile-reference-card{
  position:relative;flex:0 0 68px;width:68px;height:68px;min-width:68px;margin:0;padding:0;overflow:hidden;border:1px solid #c9dbea;border-radius:14px;background:#edf3f8;box-shadow:0 2px 8px rgba(27,69,107,.08)
}
body.mobile-reference-ui .mobile-brief-card .mobile-reference-card>img{
  display:block;width:100%;height:100%;aspect-ratio:1;padding:0;object-fit:cover;background:#edf3f8;cursor:zoom-in
}
body.mobile-reference-ui .mobile-brief-card .mobile-reference-card figcaption{
  position:absolute;top:4px;left:4px;right:4px;display:flex;align-items:flex-start;justify-content:space-between;gap:2px;min-height:0;padding:0;pointer-events:none
}
body.mobile-reference-ui .mobile-brief-card .mobile-reference-card figcaption b{
  flex:0 1 auto;min-width:0;max-width:28px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding:1px 3px;border-radius:4px;background:rgba(9,42,61,.8);color:#fff;font-size:10px;line-height:18px;font-weight:700;box-sizing:border-box
}
body.mobile-reference-ui .mobile-brief-card .mobile-reference-card figcaption span{display:none}
body.mobile-reference-ui .mobile-brief-card .mobile-reference-card figcaption button{
  flex:0 0 28px;width:28px;min-width:28px;height:22px;min-height:22px;margin:0;padding:0;border:1px solid #bdd0df;border-radius:999px;color:#345f7d;background:rgba(255,255,255,.95);font-size:10px;line-height:20px;box-shadow:none;pointer-events:auto
}
body.mobile-reference-ui .mobile-brief-card>.mobile-creator-upload:not(.has-reference):has(.mobile-reference-cloud){
  position:relative;display:grid;grid-template-columns:52px minmax(0,1fr);align-items:center;gap:12px;width:100%;height:80px;min-height:80px;margin:10px 0 0;padding:10px 14px;box-sizing:border-box;border:1px dashed #b6d7f7;border-radius:12px;background:#f2f8ff;text-align:left
}
body.mobile-reference-ui .mobile-brief-card>.mobile-creator-upload>.mobile-reference-cloud{
  display:block;width:52px;height:39px;margin:0;padding:0;border:0;border-radius:0;background:transparent
}
body.mobile-reference-ui .mobile-brief-card>.mobile-creator-upload>.mobile-reference-cloud svg{display:block;width:100%;height:100%}
body.mobile-reference-ui .mobile-brief-card>.mobile-creator-upload:has(.mobile-reference-cloud)>span:not(.mobile-reference-context){display:grid;min-width:0;gap:4px;padding:0}
body.mobile-reference-ui .mobile-brief-card>.mobile-creator-upload:has(.mobile-reference-cloud) b{color:#8199c1;font-size:18px;line-height:24px;font-weight:600;letter-spacing:.5px}
body.mobile-reference-ui .mobile-brief-card>.mobile-creator-upload:has(.mobile-reference-cloud) small{color:#9bb3d3;font-size:13px;line-height:18px;font-weight:500;white-space:nowrap}
body.mobile-reference-ui .mobile-brief-card>.mobile-creator-upload>.mobile-reference-context{
  position:absolute;display:block;width:1px;height:1px;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap
}
@media(max-width:350px){
  body.mobile-reference-ui .mobile-brief-card .mobile-reference-grid{gap:10px}
  body.mobile-reference-ui .mobile-brief-card>.mobile-creator-upload:not(.has-reference):has(.mobile-reference-cloud){grid-template-columns:44px minmax(0,1fr);gap:10px;padding:10px}
  body.mobile-reference-ui .mobile-brief-card>.mobile-creator-upload>.mobile-reference-cloud{width:44px;height:33px}
  body.mobile-reference-ui .mobile-brief-card>.mobile-creator-upload:has(.mobile-reference-cloud) b{font-size:17px}
  body.mobile-reference-ui .mobile-brief-card>.mobile-creator-upload:has(.mobile-reference-cloud) small{font-size:12px}
}