/* A local App Store for the phone's built-in and imported applications. */
.store-page {
    --store-blue: #007aff; --store-paper: #fff; --store-ink: #161618;
    --store-secondary: #85858b; --store-fill: #f2f2f7; --store-line: #3c3c4324;
    --page-back-ink: var(--store-blue); --page-back-active: var(--store-fill);
    background: var(--store-paper); color: var(--store-ink);
    font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'Helvetica Neue', 'Noto Sans CJK SC', sans-serif;
    letter-spacing: 0;
}
[data-theme="dark"] .store-page { --store-blue: #0a84ff; --store-paper: #000; --store-ink: #f5f5f7; --store-secondary: #98989f; --store-fill: #1c1c1e; --store-line: #ffffff26; }
#page-app-store, #page-web-app { background: var(--store-paper); color: var(--store-ink); }
.store-page [hidden] { display: none !important; }
.store-page button, .store-page input { font: inherit; letter-spacing: 0; }
.store-page button { cursor: pointer; -webkit-tap-highlight-color: transparent; }
.store-page button:focus-visible, .store-page input:focus-visible { outline: 2px solid var(--store-blue); outline-offset: 2px; }
.store-page button:disabled { opacity: .45; cursor: wait; }
.store-toolbar { display: grid; grid-template-columns: 44px minmax(0, 1fr) 44px; align-items: center; gap: 8px; flex-shrink: 0; min-height: calc(54px + env(safe-area-inset-top, 0px)); padding: env(safe-area-inset-top, 0px) 12px 0; text-align: center; font-size: 17px; font-weight: 600; }
.store-toolbar > :is(span,strong) { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.store-toolbar-import { display: grid; place-items: center; width: 44px; height: 44px; border: 0; background: transparent; color: var(--store-blue); border-radius: 10px; }
.store-toolbar-import svg { width: 24px; height: 24px; }
.store-scroll { flex: 1; min-height: 0; overflow: auto; overscroll-behavior: contain; padding: 10px 22px 28px; scrollbar-width: none; }
.store-heading { display: flex; justify-content: space-between; align-items: flex-end; gap: 12px; margin-bottom: 22px; }
.store-heading p { color: var(--store-secondary); font-size: 12px; font-weight: 650; margin: 0 0 5px; }
.store-heading h1 { font-size: 34px; line-height: 1.15; font-weight: 750; letter-spacing: -.9px; margin: 0; }
.store-monogram { display: grid; place-items: center; width: 39px; height: 39px; border-radius: 50%; background: var(--store-fill); color: var(--store-blue); font-size: 23px; font-weight: 750; }
.store-feature { position: relative; isolation: isolate; overflow: hidden; min-height: 354px; border-radius: 23px; padding: 25px 23px 0; margin-bottom: 24px; background: linear-gradient(140deg, #fce8e0, #f5e7fa 55%, #dbe9fb); color: #332738; box-shadow: 0 7px 22px #28243c12; }
.store-feature > small { position: relative; z-index: 1; color: #786779; font-size: 11px; letter-spacing: 1.5px; font-weight: 700; }
.store-feature h2 { position: relative; z-index: 1; font-size: clamp(25px, 6vw, 33px); line-height: 1.24; font-weight: 750; margin: 9px 0 0; letter-spacing: -1px; }
.store-feature-art { position: absolute; width: 175px; height: 175px; right: 8px; top: 108px; transform: rotate(-12deg); filter: drop-shadow(0 15px 20px #a07f8b24); }
.store-feature-art svg { display: block; width: 100%; height: 100%; }
.store-feature-caption { position: relative; z-index: 1; width: 135px; margin: 25px 0 0; font-size: 13px; line-height: 1.7; color: #746779; }
.store-feature-foot { position: absolute; bottom: 0; left: 0; right: 0; display: flex; align-items: center; gap: 10px; padding: 15px 17px; background: #ffffff91; backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); }
.store-feature-foot .store-icon { width: 43px; height: 43px; border-radius: 11px; }
.store-feature-foot .store-icon svg { width: 28px; height: 28px; }
.store-feature-foot strong { font-size: 15px; }
.store-feature-foot small { display: block; color: #837b86; font-size: 10px; margin-top: 3px; }
.store-feature-foot .store-action { background: #ffffffd9; }
.store-feature-copy { flex: 1; min-width: 0; }
.store-section-heading { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; margin: 24px 0 8px; }
.store-section-heading h2 { font-size: 21px; font-weight: 720; margin: 0; letter-spacing: -.4px; }
.store-section-heading > span { color: var(--store-secondary); font-size: 12px; }
.store-app-list { display: grid; }
.store-app-row { display: flex; align-items: center; gap: 13px; min-width: 0; min-height: 91px; }
.store-icon { display: grid; place-items: center; flex-shrink: 0; width: 61px; height: 61px; overflow: hidden; border-radius: 15px; background: linear-gradient(145deg, #62b5ff, #175ce7); color: #fff; box-shadow: inset 0 0 0 .5px #00000010; }
.store-icon svg { width: 35px; height: 35px; }
.store-icon img { width: 100%; height: 100%; object-fit: cover; }
.store-icon-gallery { background: conic-gradient(#ffbe32, #fb734d, #e552a1, #8261ce, #51a0e5, #76c56d, #ffbe32); }
.store-icon-music { background: linear-gradient(145deg, #ff617a, #f51d41); }
.store-icon-chat, .store-icon-ai-chat { background: linear-gradient(145deg, #72e18b, #22b84b); }
.store-icon-notes, .store-icon-wordcards { background: linear-gradient(145deg, #ffd35c, #ffa82d); }
.store-icon-mood, .store-icon-wardrobe { background: linear-gradient(145deg, #f6a6c6, #d55a97); }
.store-icon-characters, .store-icon-memories { background: linear-gradient(145deg, #bca1ef, #7a61d2); }
.store-icon-theme { background: linear-gradient(145deg, #79d7d9, #379fae); }
.store-icon-settings { background: linear-gradient(145deg, #a8adb6, #686e7b); }
.store-icon-web-app { background: linear-gradient(145deg, #79a6fb, #8565da); }
.store-app-info { display: flex; flex: 1; min-width: 0; align-items: center; gap: 8px; min-height: 91px; border-bottom: .5px solid var(--store-line); }
.store-app-copy { flex: 1; min-width: 0; }
.store-app-copy strong { display: block; font-size: 16px; font-weight: 550; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.store-app-copy small { display: block; color: var(--store-secondary); font-size: 11px; margin-top: 4px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.store-action { flex-shrink: 0; border: 0; border-radius: 30px; background: var(--store-fill); color: var(--store-blue); font-size: 13px !important; font-weight: 700 !important; min-width: 68px; min-height: 36px; padding: 8px 16px; }
.store-app-details { flex-shrink: 0; width: 44px; height: 44px; border: 0; padding: 0; background: transparent; color: var(--store-secondary); font-size: 20px !important; }
.store-empty { padding: 48px 12px; text-align: center; color: var(--store-secondary); font-size: 14px; line-height: 1.8; }
.store-empty strong { display: block; font-size: 18px; color: var(--store-ink); margin-bottom: 6px; }
.store-filters { display: flex; gap: 8px; overflow: auto; scrollbar-width: none; padding: 0 0 3px; margin: -2px 0 18px; }
.store-filters button { flex-shrink: 0; border: 0; padding: 8px 13px; background: var(--store-fill); border-radius: 20px; color: var(--store-secondary); font-size: 12px; }
.store-filters button[aria-pressed="true"] { color: #fff; background: var(--store-blue); }
.store-import-banner { display: flex; align-items: center; gap: 12px; border: 0; width: 100%; padding: 16px; background: var(--store-fill); border-radius: 16px; color: var(--store-ink); text-align: left; }
.store-import-symbol { display: grid; place-items: center; width: 38px; height: 38px; background: var(--store-paper); color: var(--store-blue); border-radius: 11px; font-size: 26px; }
.store-import-banner > span:nth-child(2) { flex: 1; min-width: 0; }
.store-import-banner strong { display: block; font-size: 13px; font-weight: 600; }
.store-import-banner small { display: block; color: var(--store-secondary); font-size: 10px; margin-top: 4px; }
.store-import-banner > span:last-child { color: var(--store-secondary); font-size: 23px; }
.store-search { display: flex; align-items: center; gap: 8px; border-radius: 11px; padding: 0 12px; background: var(--store-fill); margin: 0 0 22px; color: var(--store-secondary); }
.store-search svg { width: 19px; height: 19px; flex-shrink: 0; }
.store-search input { width: 100%; min-width: 0; border: 0; color: var(--store-ink); background: transparent; height: 42px; padding: 0; font-size: 15px; outline-offset: 3px; }
.store-tabs { display: flex; flex-shrink: 0; justify-content: space-around; border-top: .5px solid var(--store-line); background: var(--store-paper); padding: 6px 14px calc(6px + env(safe-area-inset-bottom, 0px)); }
.store-tabs button { display: grid; justify-items: center; gap: 3px; min-height: 46px; min-width: 64px; padding: 2px 12px; border: 0; background: transparent; color: var(--store-secondary); font-size: 10px; }
.store-tabs svg { width: 24px; height: 24px; }
.store-tabs [aria-current="page"] { color: var(--store-blue); }
.store-status { color: var(--store-secondary); font-size: 12px; line-height: 1.5; margin: 12px 0 0; }
.store-dialog { color: var(--store-ink); background: var(--store-paper); border: 0; padding: 12px 24px calc(24px + env(safe-area-inset-bottom, 0px)); width: min(100%, 460px); max-height: min(90dvh, 700px); overflow: auto; border-radius: 25px 25px 0 0; inset: auto 0 0; margin: 0 auto; box-sizing: border-box; box-shadow: 0 -10px 45px #0002; }
.store-dialog::backdrop { background: #0006; backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); }
.store-sheet-handle { width: 34px; height: 5px; border-radius: 10px; background: var(--store-line); margin: 0 auto 12px; }
.store-dialog header { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.store-dialog h2 { margin: 0; font-size: 23px; overflow-wrap: anywhere; }
.store-dialog-close { display: grid; place-items: center; flex-shrink: 0; width: 44px; height: 44px; border: 0; background: var(--store-fill); border-radius: 50%; color: var(--store-secondary); font-size: 26px !important; }
.store-dialog p { color: var(--store-secondary); font-size: 12px; line-height: 1.8; overflow-wrap: anywhere; }
.store-import-preview { display: flex; align-items: center; gap: 13px; margin: 24px 0; min-width: 0; }
.store-file-icon { display: grid; place-items: center; flex-shrink: 0; width: 58px; height: 58px; border-radius: 15px; background: linear-gradient(145deg, #79a6fb, #8565da); color: #fff; font-size: 21px; font-weight: 650; }
.store-import-preview > div { min-width: 0; }
.store-import-preview strong { display: block; font-size: 14px; overflow-wrap: anywhere; }
.store-import-preview small { display: block; margin-top: 5px; font-size: 11px; color: var(--store-secondary); }
.store-dialog label { display: block; color: var(--store-secondary); font-size: 12px; margin-bottom: 7px; }
.store-dialog input:not([type="file"]) { width: 100%; padding: 13px; border: 0; border-radius: 12px; box-sizing: border-box; background: var(--store-fill); color: var(--store-ink); font-size: 16px; }
.store-primary, .store-delete { border: 0; border-radius: 13px; width: 100%; min-height: 48px; padding: 12px; font-size: 15px !important; font-weight: 600 !important; }
.store-primary { color: #fff; background: var(--store-blue); }
.store-delete { color: #ff3b30; background: var(--store-fill); margin-top: 12px; }
.store-dialog .store-form-error { color: #ff453a; min-height: 0; }
#page-web-app { overflow: hidden; padding-bottom: env(safe-area-inset-bottom, 0px); }
#web-app-host { display: flex; flex: 1; min-height: 0; }
#web-app-frame { display: block; flex: 1; min-height: 0; width: 100%; border: 0; background: #fff; }
#web-app-status { margin: 8px 20px 16px; }
@media (min-width: 700px) { .store-scroll { padding-inline: max(26px, calc((100% - 680px) / 2)); } .store-app-list { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 28px; } .store-feature { min-height: 340px; } .store-feature-art { right: 20%; } .store-feature h2 { font-size: 34px; } .store-feature-caption { width: 200px; } }
@media (max-width: 350px) { .store-scroll { padding-inline: 16px; } .store-app-row { gap: 10px; } .store-icon { width: 53px; height: 53px; border-radius: 13px; } .store-app-info { gap: 5px; } .store-action { min-width: 59px; padding-inline: 12px; } .store-app-copy strong { font-size: 14px; } .store-feature { padding-inline: 18px; } .store-feature-art { right: -18px; } }