/* APK 1.2.0 appearance. Layout/shape values come from the packaged XML.
   Missing raster glyphs use the separately recorded supplemental atlas. */
:root { --surface:#2a2a2a; --surface-2:#2a2a2a; --surface-3:#171717; --line:#2d2d2d; --muted:#9e9e9e; --quiet:#808080; --accent:#ff1676; --gold:#ffd54f; --control-radius:9px; --card-radius:11px; --action-gradient:linear-gradient(90deg,#ff1676,#fe5f6a); }
body { color:var(--text); font-weight:400; }
.app-shell { box-shadow:none; }
.native-glyph,.menu-icon,.nav-icon,.credit-coin,.tool-icon { display:inline-block; flex-shrink:0; background-color:transparent; background-image:url('assets/native/icon-atlas-flat.webp'); background-size:400% 600%; background-repeat:no-repeat; mix-blend-mode:normal; }
.native-glyph { width:32px; height:32px; }
[data-native-icon="home"] { background-position:0 0; }
[data-native-icon="discover"] { background-position:33.333333% 0; }
[data-native-icon="profile"] { background-position:66.666667% 0; }
[data-native-icon="avatar"] { background-position:100% 0; }
[data-native-icon="coin"] { background-position:0 20%; }
[data-native-icon="pro"] { background-position:33.333333% 20%; }
.menu-icon[data-icon="history"] { background-position:66.666667% 20%; }
.menu-icon[data-icon="credits"],.menu-icon[data-icon="wallet"] { background-position:100% 20%; }
.menu-icon[data-icon="referral"] { background-position:0 40%; }
.menu-icon[data-icon="checkin"] { background-position:33.333333% 40%; }
.menu-icon[data-icon="faq"] { background-position:66.666667% 40%; }
.menu-icon[data-icon="about"] { background-position:100% 40%; }
.menu-icon[data-icon="terms"] { background-position:0 60%; }
.menu-icon[data-icon="privacy"] { background-position:33.333333% 60%; }
.menu-icon[data-icon="contact"] { background-position:66.666667% 60%; }
.menu-icon[data-icon="install"] { background-position:100% 60%; }
.menu-icon[data-icon="share"] { background-image:url('assets/native/ic_action_share.svg'); background-size:24px 24px; background-position:center; }
.menu-icon[data-icon="logout"] { background-position:100% 100%; }
.bottom-nav { width:282px; height:57px; padding:6px; border-radius:28px; background:#2d2d2d; box-shadow:0 8px 14px #0005; }
.bottom-nav::before { content:none; }
.bottom-nav button { display:grid; flex:0 0 90px; width:90px; height:45px; place-items:center; border-radius:23px; color:var(--text); }
.bottom-nav button.active { background:#3d3d3d; }
.bottom-nav .nav-icon { display:block; width:38px; height:38px; opacity:.65; }
.bottom-nav .nav-icon svg { display:none; }
.bottom-nav [data-route="home"] .nav-icon { background-position:0 2.35%; }
.bottom-nav [data-route="discover"] .nav-icon { background-position:33.333333% 2.35%; }
.bottom-nav [data-route="profile"] .nav-icon { background-position:66.666667% 2.35%; }
.bottom-nav button.active .nav-icon { opacity:1; }
.home-tools { height:73px; gap:10px; margin:17px 16px 0 13px; }
.home-tool { height:73px; grid-template-rows:38px 1fr; gap:2px; padding:9px 0 6px; border:0; border-radius:11px; background:linear-gradient(#2c2c2c,#545454); }
.home-tool .tool-icon { width:34px; height:34px; background-image:url('assets/native/icon-atlas-flat.webp'); background-size:400% 600%; }
.home-tool-reference .tool-icon { background-position:0 100%; }
.home-tool-image .tool-icon { background-position:33.333333% 100%; }
.home-tool-ai-image .tool-icon { background:url('assets/native/ai-image-glass-v2.webp') center/42px 28px no-repeat; }
.home-tool .tool-icon.native-animation-ready { background-image:none; mix-blend-mode:normal; }
.tool-icon svg { display:block; width:100%; height:100%; }
.tool-caption { padding:0 3px; font-size:10px; font-weight:400; line-height:13px; }
.home-heading { padding-top:20px; }
.home-heading h1 { font-size:20px; font-weight:700; }
.hero-dots { gap:5px; align-items:center; }
.hero-dots button { display:grid; width:12px; height:14px; padding:0; place-items:center; border:0; background:transparent; }
.hero-dots button::before { content:''; width:4px; height:4px; border-radius:2px; background:#ffffff73; }
.hero-dots button[aria-current="true"]::before { width:12px; background:#fff; }
.hero-dots:empty { display:none; }
.template-card { border-radius:8px; background:#2a2a2a; }
.template-card > img { display:block; }
.template-card > video { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.template-card .preview-poster-fallback { display:none; }
.native-template-media { position:relative; width:100%; }
.native-template-media>.template-image-preview { display:block; width:100%; height:min(72dvh,610px); object-fit:contain; background:#000; }
.template-preview-full { position:absolute; right:16px; bottom:16px; display:grid; width:44px; height:44px; place-items:center; padding:0; border:0; border-radius:50%; background:#0008; }
.template-preview-full img { width:40px; height:40px; }
video[data-template-preview][controls] { pointer-events:auto; }
.template-info strong { font-size:13px; font-weight:700; line-height:18px; }
.card-favorite { font-size:0; }
.card-favorite::after { content:''; display:block; width:24px; height:24px; background:var(--accent); -webkit-mask:url('assets/native/dislike-heart.webp') center/contain no-repeat; mask:url('assets/native/dislike-heart.webp') center/contain no-repeat; }
.back-button,.history-button,.favorite-button,.delete-button,.commerce-toolbar>button:first-child,.secondary-toolbar>button { position:relative; font-size:0; }
.back-button>span,.favorite-button>span,.commerce-toolbar>button:first-child>span { font-size:0; }
.back-button::before,.secondary-toolbar>button[aria-label="Back"]::before,.commerce-toolbar>button:first-child::before { content:''; width:24px; height:24px; background:currentColor; -webkit-mask:url('assets/native/ic_arrow_back_black_24.svg') center/contain no-repeat; mask:url('assets/native/ic_arrow_back_black_24.svg') center/contain no-repeat; }
.history-button::before,.secondary-toolbar [data-action="reload-orders"]::before { content:''; display:block; width:22px; height:22px; background:currentColor; -webkit-mask:url('assets/native/ic_clock_black_24dp.svg') center/contain no-repeat; mask:url('assets/native/ic_clock_black_24dp.svg') center/contain no-repeat; }
.favorite-button::before { content:''; display:block; width:36px; height:36px; background:url('assets/native/icon-atlas-flat.webp') 33.333333% 80%/400% 600% no-repeat; mix-blend-mode:normal; }
.favorite-button.selected::before { background-image:url('assets/native/dislike-heart.webp'); background-size:23px 23px; background-position:center; }
.delete-button::before { content:''; display:block; width:36px; height:36px; background:url('assets/native/icon-atlas-flat.webp') 66.666667% 80%/400% 600% no-repeat; mix-blend-mode:normal; }
.chevron,.member-arrow,.profile-menu button>span:last-child:not([data-content-text]),.home-heading button>span:last-child[aria-hidden] { display:inline-grid; width:16px; height:20px; place-items:center; font-size:0; }
.chevron::before,.member-arrow::before,.profile-menu button>span:last-child:not([data-content-text])::before,.home-heading button>span:last-child[aria-hidden]::before { content:''; width:16px; height:16px; background:#9e9e9e; -webkit-mask:url('assets/native/arrow-right.svg') center/contain no-repeat; mask:url('assets/native/arrow-right.svg') center/contain no-repeat; }
.clock-mark,.heart-mark,.history-search>span,.search-icon { border:0; background-position:center; background-repeat:no-repeat; font-size:0; }
.clock-mark { background-image:url('assets/native/ic_clock_black_24dp.svg'); filter:invert(1); }
.heart-mark { width:22px; height:22px; background:url('assets/native/icon-atlas-flat.webp') 33.333333% 80%/400% 600% no-repeat; mix-blend-mode:normal; }
.history-search>span,.search-icon { width:24px; height:24px; background:url('assets/native/icon-atlas-flat.webp') 100% 80%/400% 600% no-repeat; mix-blend-mode:normal; transform:none; }
.history-search>span::after,.search-icon::before,.search-icon::after { content:none; }
.app-toolbar,.secondary-toolbar { background:var(--bg); backdrop-filter:none; }
.app-toolbar h1,.secondary-toolbar h1 { font-size:17px; font-weight:700; }
.creator-medium { border-bottom:0; height:44px; background:#242424; border-radius:8px; padding:3px; margin-top:4px; }
.creator-medium button { border:0; border-radius:6px; font-size:13px; }
.creator-medium button.active { background:#3d3d3d; }
.mode-tabs { min-height:44px; border-color:#2d2d2d; }
.mode-tab { font-size:12px; }
.creator-scroll { padding-top:16px; }
.selector-row,.upload-area,.prompt-box { border:0; border-radius:9px; background:var(--surface); }
.selector-row { padding:8px 14px; }
.model-glyph { background:transparent url('assets/native/ic_video_model.svg') center/24px no-repeat; color:transparent; font-size:0; }
.selector-label { font-size:14px; font-weight:400; }
.selector-value strong { font-size:12px; }
.selector-value small { font-size:10px; }
.api-state { color:#808080; font-size:10px; }
.prompt-section>label { font-size:17px; font-weight:700; }
.setting-group { min-height:42px; padding:0 16px; background:#2a2a2a; border-radius:9px; }
.option-group button { min-height:28px; border-radius:6px; font-size:11px; background:#2a2a2a; }
.option-group button.selected { outline:0; background:var(--action-gradient); color:#fff; }
.toggle-row { border-radius:9px; background:#2a2a2a; }
.generate-dock { min-height:57px; padding:8px 0; }
.generate-button { min-height:41px; border-radius:9px; background:var(--action-gradient); }
.credit-coin { width:24px; height:24px; border:0; border-radius:0; background:url('assets/native/gold-coin-v2.webp') center/contain no-repeat; }
.credits-pill .credit-coin { width:22px; height:22px; }
.profile-top { height:197px; background:linear-gradient(180deg,#212121,#121212); }
.profile-top>h1 { padding-top:15px; font-weight:700; }
.account-row { grid-template-columns:64px minmax(0,1fr) auto; min-height:81px; gap:16px; padding-left:19px; margin-top:17px; }
.profile-avatar { width:64px; height:64px; padding:0; border:0; background:transparent; box-shadow:none; }
.profile-avatar::before { content:''; position:absolute; inset:0; background:url('assets/native/avatar-portrait-v2.webp') center/contain no-repeat; mix-blend-mode:normal; }
.profile-avatar img { position:relative; z-index:1; }
.account-copy strong { font-size:16px; font-weight:700; }
.account-copy span { color:#808080; font-size:12px; }
.credit-ribbon { position:relative; min-width:104px; height:43px; gap:6px; padding:0 15px; border:0; border-radius:24px 0 0 24px; background:linear-gradient(90deg,#ed1268,#e64756); box-shadow:none; }
.credit-ribbon .credit-coin { position:static; width:24px; height:24px; }
.credit-ribbon strong { font-family:var(--font-ui); font-size:17px; font-weight:400; }
.profile-content { min-height:calc(100dvh - 163px); margin-top:-34px; padding:19px 19px 100px; position:relative; border-radius:21px 21px 0 0; background:#131313; }
.member-banner { min-height:78px; grid-template-columns:56px minmax(0,1fr) 16px; padding:11px 18px; gap:12px; border:0; border-radius:11px; background:linear-gradient(110deg,#2d2822,#242424); box-shadow:none; }
.member-pro { width:56px; height:56px; background:url('assets/native/member-gem-v2.webp') center/contain no-repeat; }
.member-banner strong { font-size:16px; font-weight:700; }
.member-banner small { color:#808080; font-size:12px; }
.profile-menu { margin-top:16px; padding:0; border:0; border-radius:0; background:transparent; }
.profile-menu button { min-height:52px; grid-template-columns:24px minmax(0,1fr) auto; gap:10px; padding:14px 0; border-bottom:1px solid #2d2d2d; font-size:14px; line-height:20px; }
.profile-menu button:last-child { border-bottom:1px solid #2d2d2d; }
.menu-icon { width:24px; height:24px; background-size:400% 600%; }
.profile-menu button>strong { color:#fff; font-size:13px; }
.auth-brand { background:transparent; border-radius:12px; }
.auth-tabs,.auth-field>input,.password-input,.social-login button { border-radius:9px; border-color:#3f3f3f; background:#2a2a2a; box-shadow:none; }
.auth-submit,.contact-link,.page-primary,.modal-actions .primary,.save-link.primary { border:0; background:var(--action-gradient); border-radius:9px; color:#fff; }
.auth-content h1 { font-size:24px; }
.modal-backdrop { background:#0009; backdrop-filter:none; }
.modal { background:#202020; border-radius:16px 16px 0 0; box-shadow:none; }
.modal h2 { font-size:20px; font-weight:700; }
.modal-actions button,.save-link { border-radius:9px; font-size:14px; }
.model-option { min-height:66px; border:1px solid #3f3f3f; border-radius:9px; background:#2a2a2a; }
.model-option.selected { border-color:var(--accent); background:#30262b; }
.model-option strong { font-size:13px; }
.model-option>span:last-child { font-size:11px; }
.history-search,.library-search { background:#2a2a2a; border:0; border-radius:9px; }
body.route-creations .bottom-nav { display:none; }
.history-view { padding-bottom:32px; }
.history-tabs { gap:0; }
.history-tabs button { font-size:14px; }
.creation-card,.creation-actions,.purchase-order { background:#2a2a2a; border-radius:9px; border:0; }
.creation-item .creation-card { border-radius:9px 9px 0 0; }
.creation-actions { border-radius:0 0 9px 9px; }
.creation-actions button,.page-secondary,.purchase-history-more { border-radius:6px; border-color:#4a4a4a; background:transparent; }
.empty-mark,.pwa-generation-icon { border-radius:0; background:transparent url('assets/native/ic_empty_list.svg') center/contain no-repeat; color:transparent; box-shadow:none; }
.transaction-icon { background:#2a2a2a; font-weight:500; }
.credit-detail-summary { background:#1a1a1a; border-color:#2d2d2d; }
.template-detail-copy dl div,.result-copy dl div { border:0; border-radius:9px; background:#2a2a2a; }
.overlay-toolbar { background:var(--bg); }
.page-action-dock,.result-action-dock { background:var(--bg); border:0; backdrop-filter:none; }
.commerce-view { background:#151515; }
.commerce-sheet { background:linear-gradient(transparent,#151515 68px); }
.commerce-visual-fade { background:linear-gradient(transparent,#151515); }
.commerce-option { min-height:74px; border:2px solid #3f3f3f; border-radius:18.5px; background:#2a2a2a; box-shadow:none; }
.commerce-option[data-selected="true"] { border-color:#ffd54f; background:#29271e; box-shadow:none; }
.commerce-option-copy strong { font-size:17px; }
.commerce-option-price { font-size:16px; }
.commerce-primary { min-height:58px; border:0; border-radius:29px; background:var(--action-gradient); }
#credits-purchase { border-radius:29px; background:linear-gradient(90deg,#fe6fe4,#ef5c1a,#ffd54f); }
.commerce-status { color:#9e9e9e; font-size:11px; }
.membership-bundle-row,.credit-checkout .checkout-receipt,.checkout-summary,.checkout-summary-total { border-radius:9px; box-shadow:none; }
.pwa-update-banner,.pwa-install-guide,.pwa-generation-dialog,.referral-promo { border-radius:16px; background:#202020; box-shadow:0 8px 24px #0005; }
.pwa-generation-primary,.pwa-update-banner button:first-of-type { background:var(--accent); }
.referral-promo-reward { border-radius:11px; background:#2a2a2a; border:0; }
.referral-promo-reward small { color:#9e9e9e; }
.referral-promo-reward b { border:0; border-radius:0; box-shadow:none; background:transparent url('assets/native/icon-atlas-flat.webp') 0 20%/400% 600% no-repeat; font-size:0; }
.referral-promo-primary { border-radius:9px; background:var(--action-gradient); box-shadow:none; }
@media (prefers-reduced-motion:reduce) { .tool-icon svg { animation:none; } }
