/* Basic applications follow one iOS 26 reference. Tochat keeps its own design. */
.phone-screen[data-current-page="photos"],.phone-screen[data-current-page="calendar"],.phone-screen[data-current-page="music"],.phone-screen[data-current-page="music-collection"],.phone-screen[data-current-page="music-player"] { --app-bg:#fff; --accent:#007aff; }
.phone-screen[data-current-page="notes"],.phone-screen[data-current-page="settings"],.phone-screen[data-current-page="setting-detail"] { --app-bg:#f2f2f7; --accent:#007aff; }
.phone-screen[data-current-page="note"] { --app-bg:#fffef8; --accent:#b48717; }
.phone-screen[data-current-page="photo"] { --app-bg:#050505; color:#fff; }
.phone-screen[data-current-page="photo"] .screen-navigation button::after { background:#fff; }
.phone-screen[data-current-page="photo"] .phone-content { background:#050505; }
.ios-screen { display:flex; flex-direction:column; flex:1; min-height:0; overflow:hidden; background:var(--app-bg); }
.ios-content { flex:1; min-height:0; overflow:auto; overscroll-behavior:contain; padding:20px 20px 28px; scrollbar-width:none; }
.ios-large-title,.ios-title-row h1 { color:#141418; font-size:32px; font-weight:720; letter-spacing:-1px; line-height:1.2; margin:8px 0 22px; }
.ios-title-row { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:16px; }
.ios-title-row h1 { margin:8px 0; }
.ios-title-row button,.ios-pill { border-radius:30px; background:#e9e9ef; color:#202026; padding:9px 15px; font-size:13px; font-weight:550; }
.ios-circle { width:38px; height:38px; padding:8px!important; display:grid; place-items:center; }
.ios-circle>.icon { width:20px; height:20px; }
.ios-toolbar { display:flex; align-items:center; justify-content:space-between; min-height:44px; gap:12px; padding:0 12px; flex-shrink:0; }
.ios-toolbar>div { display:flex; gap:8px; }
.ios-toolbar button { display:flex; align-items:center; gap:3px; min-height:40px; padding:7px; color:var(--accent); font-size:15px; }
.ios-toolbar .icon { width:21px; height:21px; }
.ios-search { display:flex; align-items:center; gap:8px; padding:10px 11px; background:#e4e4e9; border-radius:13px; margin:0 0 24px; color:#7e7e87; }
.ios-search>.icon { width:18px; height:18px; }
.ios-search input { width:100%; min-width:0; border:0; padding:0; background:none; color:#17171d; font-size:16px; outline:none; }
.ios-search:focus-within { outline:2px solid #007aff55; outline-offset:2px; }
.ios-section-title { font-size:21px; letter-spacing:-.4px; color:#141418; margin:25px 0 15px; }
.ios-section-label { font-size:13px; font-weight:550; color:#73737d; margin:24px 4px 9px; }
.ios-demo { font-size:10px; line-height:1.6; color:#82828c; text-align:center; margin:16px 16px 12px; flex-shrink:0; }
.ios-empty { text-align:center; color:#8c8c96; font-size:14px; padding:26px 12px; }
.ios-tabbar { display:flex; justify-content:space-around; gap:4px; margin:5px 12px 9px; padding:7px 6px; border-radius:30px; background:#f6f6f9e8; border:1px solid #dddde4; box-shadow:0 3px 14px #2424380b; flex-shrink:0; }
.ios-tabbar button { min-width:62px; min-height:45px; flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:4px; font-size:10px; color:#7c7c85; border-radius:24px; padding:5px; }
.ios-tabbar button.selected { background:#e8e8ee; color:var(--accent); }
.ios-tabbar .icon { width:21px; height:21px; }
.ios-bottom-bar { display:flex; justify-content:space-between; gap:10px; padding:11px 20px; flex-shrink:0; background:#fafafce8; border-top:1px solid #e8e8ed; font-size:14px; }
.ios-bottom-bar button { color:var(--accent); min-height:30px; }
.ios-info-card { padding:20px; margin:20px 0; background:#fff; border-radius:17px; color:#6c6c77; font-size:13px; line-height:1.9; }
/* Photos: Library / Collections, zoomable grid, full-screen detail and filmstrip. */
.ios-photos .ios-content { padding:16px 15px 20px; }
.ios-photo-date { display:flex; align-items:center; justify-content:space-between; gap:10px; margin:22px 2px 14px; font-size:16px; font-weight:600; }
.ios-photo-date button { font-size:12px; padding:8px 11px; border-radius:20px; background:#f0f0f4; font-weight:400; }
.ios-photo-grid { display:grid; grid-template-columns:repeat(var(--photo-columns),minmax(0,1fr)); gap:3px; }
.ios-photo-grid>button { position:relative; padding:0; aspect-ratio:1; overflow:hidden; }
.ios-photo-grid .scene { width:100%; height:100%; object-fit:cover; }
.ios-photo-grid i { position:absolute; bottom:6px; right:6px; width:20px; height:20px; border-radius:50%; border:1.5px solid #fff; background:#5555; color:#fff; font-size:12px; font-style:normal; display:grid; place-items:center; }
.ios-photo-grid .picked { outline:3px solid #007aff; outline-offset:-3px; }
.ios-photo-grid .picked i { background:#007aff; }
.ios-photo-count { text-align:center; color:#96969f; font-size:12px; margin:17px 0; }
.ios-collection-grid { display:grid; grid-template-columns:1fr 1fr; gap:13px; }
.ios-collection-grid button { padding:0; text-align:left; min-width:0; }
.ios-collection-grid .scene { width:100%; border-radius:14px; aspect-ratio:1; }
.ios-collection-grid b { display:block; font-size:14px; margin:8px 0 4px; }
.ios-collection-grid span { font-size:12px; color:#8d8d97; }
.ios-photo-header { display:flex; align-items:center; justify-content:space-between; gap:10px; min-height:58px; padding:4px 11px; color:#fff; flex-shrink:0; }
.ios-photo-header>span { text-align:center; }
.ios-photo-header b { display:block; font-size:14px; }
.ios-photo-header small { display:block; font-size:10px; color:#9e9ea8; margin-top:4px; }
.ios-photo-header button { color:#fff; min-width:40px; min-height:44px; display:grid; place-items:center; }
.ios-photo-view { position:relative; min-height:0; flex:1; display:flex; align-items:center; justify-content:center; overflow:hidden; }
.ios-photo-view>.scene { width:100%; max-height:100%; object-fit:contain; }
.ios-photo-info { position:absolute; bottom:10px; left:12px; right:12px; padding:16px; border:1px solid #ffffff25; border-radius:15px; background:#17171fe8; font-size:12px; color:#d0d0d8; line-height:1.7; }
.ios-filmstrip { display:flex; justify-content:center; gap:3px; padding:14px 8px 6px; flex-shrink:0; }
.ios-filmstrip button { width:35px; height:43px; padding:0; opacity:.5; border-radius:4px; overflow:hidden; }
.ios-filmstrip button.selected { width:43px; opacity:1; outline:2px solid #fff; }
.ios-filmstrip .scene { width:100%; height:100%; object-fit:cover; }
.ios-photo-tools { display:flex; align-items:center; justify-content:space-around; padding:5px 10px 9px; flex-shrink:0; font-size:11px; color:#a5a5b0; }
.ios-photo-tools button { color:#e5e5ed; width:40px; height:40px; display:grid; place-items:center; }
.ios-photo-tools button[aria-pressed="true"] { color:#ff375f; }
/* Notes: folders, searchable lists / gallery, and a single shared editor. */
.ios-notes { --accent:#b48a19; }
.ios-notes.notes-page { padding-bottom:100px; }
.ios-notes>.ios-toolbar { margin:-15px -10px 0; }
.ios-note-list { background:#fff; border-radius:15px; overflow:hidden; }
.ios-note-list>button { display:block; width:100%; text-align:left; padding:16px; border-bottom:1px solid #e5e5ea; }
.ios-note-list>button:last-child { border-bottom:0; }
.ios-note-list b { display:block; font-size:16px; font-weight:620; color:#1d1d22; }
.ios-note-list span { display:block; font-size:12px; color:#96969e; margin-top:6px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.ios-note-list time { color:#72727b; }
.ios-note-list.gallery { background:none; display:grid; grid-template-columns:1fr 1fr; gap:12px; overflow:visible; }
.ios-note-list.gallery>button { border:0; border-radius:16px; padding:16px; min-height:140px; background:#fff; overflow:hidden; }
.ios-note-list.gallery p { font-size:12px; line-height:1.6; color:#92929c; max-height:65px; overflow:hidden; }
.phone-screen[data-current-page="notes"] .note-add-button { background:#f5c844; color:#493a0b; }
.ios-note-editor { padding:12px 22px; display:flex; flex-direction:column; flex:1; min-height:0; }
.ios-note-editor .note-title { width:100%; flex-shrink:0; background:none; border:0; font-size:27px; font-weight:700; padding:14px 0; color:#222; }
.ios-note-editor textarea { flex:1; width:100%; min-height:100px; border:0; background:none; resize:none; line-height:1.85; color:#303038; font-size:16px; }
.ios-note-tools { display:flex; align-items:center; gap:14px; padding:10px 18px; color:#b38a1c; flex-shrink:0; }
.ios-note-tools button { min-width:36px; height:36px; display:grid; place-items:center; font-size:23px; }
.ios-note-tools span { margin-left:auto; font-size:10px; color:#a5a193; }
/* Calendar: compact month/day agenda with iOS 26-inspired floating controls. */
.ios-calendar { --accent:#f04445; }
.calendar-heading { padding:18px 20px 8px; flex-shrink:0; }
.calendar-heading>span { color:#dc373c; font-size:16px; font-weight:600; }
.ios-calendar-month { display:flex; align-items:center; justify-content:space-between; margin-top:13px; }
.ios-calendar-month h1 { font-size:34px; margin:0; color:#151518; font-weight:750; letter-spacing:-.8px; }
.ios-calendar-month>div { display:flex; gap:8px; }
.ios-calendar-month button { width:44px; height:44px; display:grid; place-items:center; border-radius:50%; color:#dc373c; background:#f5f5f7; }
.calendar-content { padding:10px 16px 20px; }
.ios-weekdays,.ios-month-grid { display:grid; grid-template-columns:repeat(7,minmax(0,1fr)); text-align:center; }
.ios-weekdays { color:#6c6c74; font-size:12px; padding:0 0 12px; }
.ios-weekdays>span:nth-last-child(-n+2) { color:#929299; }
.ios-month-grid { row-gap:5px; padding:8px 0 20px; border-bottom:1px solid #ededf0; }
.ios-month-grid button { min-height:49px; padding:2px 0; display:flex; flex-direction:column; align-items:center; gap:3px; color:#19191c; font-size:21px; font-variant-numeric:tabular-nums; }
.ios-month-grid button>span { width:36px; height:36px; border-radius:50%; display:grid; place-items:center; }
.ios-month-grid button.selected>span { background:#202024; color:#fff; }
.ios-month-grid button.today>span { color:#dc373c; }
.ios-month-grid button.today.selected>span { background:#e43e43; color:#fff; }
.ios-month-grid i { width:4px; height:4px; background:#8e8e96; border-radius:50%; }
.ios-month-grid i[hidden] { display:block; visibility:hidden; }
.ios-agenda-date { font-size:17px; font-weight:650; margin:22px 4px 12px; color:#19191c; }
.calendar-list-date { font-size:13px; color:#71717a; margin:22px 4px 8px; }
.ios-event { display:flex; align-items:flex-start; gap:11px; padding:12px 4px; border-top:1px solid #ededf1; }
.ios-event time { font-size:12px; min-width:42px; color:#71717a; }
.ios-event>i { width:3px; min-height:38px; border-radius:4px; background:#6f9a83; }
.ios-event>i.pink { background:#df94a5; }
.ios-event>i.yellow { background:#d8b355; }
.ios-event b { font-size:15px; font-weight:550; }
.ios-event small { display:block; font-size:12px; margin-top:6px; color:#71717a; }
.calendar-bottom { display:flex; justify-content:space-between; align-items:center; gap:14px; padding:8px 16px 12px; flex-shrink:0; background:var(--app-bg); }
.calendar-today,.calendar-views { border-radius:28px; background:#f1f1f3; }
.calendar-today { min-height:44px; padding:0 22px; color:#dc373c; font-size:16px; font-weight:600; }
.calendar-views { display:flex; padding:4px; }
.calendar-views button { min-height:38px; padding:0 17px; border-radius:24px; color:#62626a; font-size:14px; }
.calendar-views button[aria-pressed="true"] { background:#fff; color:#161619; box-shadow:0 2px 5px #0000000a; }
/* Music: Library categories / album grid, search, mini-player and player detail. */
.ios-music { --accent:#f52d55; }
.ios-music-categories>button { display:flex; align-items:center; width:100%; gap:12px; border-bottom:1px solid #ededf1; min-height:48px; padding:10px 0; color:#f52d55; text-align:left; }
.ios-music-categories span { flex:1; font-size:19px; }
.ios-music-categories>.icon { width:21px; }
.ios-music-categories button>.icon:last-child { color:#c5c5ce; width:16px; }
.ios-album-grid { display:grid; grid-template-columns:1fr 1fr; gap:19px 14px; }
.ios-album-grid button { padding:0; text-align:left; min-width:0; }
.ios-album-grid .scene { border-radius:12px; width:100%; aspect-ratio:1; }
.ios-album-grid b { display:block; font-size:13px; font-weight:500; margin-top:8px; }
.ios-album-grid span { font-size:11px; color:#92929d; display:block; margin-top:4px; }
.ios-mini-player { display:flex; align-items:center; padding:7px 8px; margin:0 12px 3px; border:1px solid #e2e2e9; border-radius:16px; background:#f3f3f7; flex-shrink:0; }
.ios-mini-player>button:first-child { display:flex; flex:1; align-items:center; gap:10px; min-width:0; padding:0; text-align:left; }
.ios-mini-player .scene { width:39px; height:39px; border-radius:7px; }
.ios-mini-player b { display:block; font-size:12px; font-weight:550; }
.ios-mini-player small { display:block; font-size:9px; color:#92929c; margin-top:5px; }
.ios-mini-player>button:last-child { width:40px; height:40px; display:grid; place-items:center; }
.ios-mini-player .icon { width:20px; height:20px; }
.ios-music-tabs { margin-top:4px; }
.ios-music-tabs button { min-width:0; font-size:9px; }
.ios-song-row { display:flex; align-items:center; gap:12px; width:100%; text-align:left; padding:12px 0; border-bottom:1px solid #eeeef3; }
.ios-song-row>.scene { width:47px; height:47px; border-radius:8px; }
.ios-song-row>span { flex:1; min-width:0; }
.ios-song-row b { display:block; font-size:14px; font-weight:550; }
.ios-song-row small { display:block; font-size:11px; color:#9696a0; margin-top:5px; }
.ios-song-row>.icon { width:15px; height:15px; color:#bdbdc7; }
.ios-music-placeholder { text-align:center; padding:65px 0 40px; color:#9696a0; line-height:1.8; font-size:13px; }
.ios-music-placeholder>.icon { width:52px; height:52px; margin:auto; color:#c8c8d1; }
.ios-music-placeholder h2 { color:#25252d; font-size:21px; }
.ios-player { background:linear-gradient(#f7f1ee,#eae7ed); text-align:left; }
.ios-player-art { width:100%; max-width:290px; margin:22px auto 32px; border-radius:18px; overflow:hidden; box-shadow:0 20px 35px #432a3824; }
.ios-player-art>.scene { width:100%; aspect-ratio:1; }
.ios-player h1 { font-size:23px; margin:15px 0 5px; color:#28232c; }
.ios-player>p { font-size:15px; color:#a06e77; }
.ios-track-line { height:4px; background:#b8aab84d; border-radius:3px; margin-top:28px; }
.ios-track-times { display:flex; justify-content:space-between; font-size:10px; color:#9b8e9d; margin-top:9px; }
.ios-play-controls { display:flex; align-items:center; justify-content:space-around; padding:18px 0; }
.ios-play-controls button { width:44px; height:44px; display:grid; place-items:center; }
.ios-play-controls .ios-play-large { width:68px; height:68px; }
.ios-play-large>.icon { width:43px; height:43px; fill:currentColor; }
/* Settings: account card, grouped destinations, local search and drill-down pages. */
.ios-settings .ios-search { margin-bottom:23px; }
.ios-account { display:flex; width:100%; text-align:left; align-items:center; gap:13px; padding:16px; background:#fff; border-radius:16px; margin-bottom:27px; }
.ios-account>.avatar { width:57px; height:57px; border-radius:50%; }
.ios-account>span { flex:1; min-width:0; }
.ios-account b { font-size:21px; font-weight:500; }
.ios-account small { display:block; margin-top:6px; font-size:10px; color:#9696a0; }
.ios-account>.icon { width:15px; color:#c0c0c9; }
.ios-settings-group,.ios-group { background:#fff; border-radius:15px; margin:0 0 24px; overflow:hidden; }
.ios-settings-group button,.ios-group>button { display:flex; width:100%; align-items:center; text-align:left; gap:11px; padding:11px 14px; min-height:49px; font-size:14px; }
.ios-settings-group>div+div,.ios-settings-group>button+button,.ios-group>button+button { border-top:1px solid #ebebef; }
.ios-settings-group button>span:not(.setting-icon),.ios-group button>span { flex:1; }
.ios-settings-group .setting-icon { display:grid; place-items:center; width:28px; height:28px; border-radius:7px; color:#fff; margin:0; background:#2488ed; }
.ios-settings-group .setting-icon>.icon { width:18px; height:18px; }
.ios-settings-group .setting-icon.red { background:#fa4d54; }.ios-settings-group .setting-icon.gray { background:#9297a1; }.ios-settings-group .setting-icon.purple { background:#a778d7; }.ios-settings-group .setting-icon.green { background:#32bc74; }
.ios-settings-group small,.ios-group small { font-size:11px; color:#9696a0; }
.ios-settings-group button>.icon,.ios-group button>.icon:last-child { width:13px; height:13px; color:#bdbdc7; }
.ios-group>button>.icon:first-child { color:#be951f; }

.ios-title-row .ios-title-action { display:grid; place-items:center; width:40px; height:40px; padding:8px; flex-shrink:0; background:none; color:#b48717; }
.ios-title-action>.icon { width:23px; height:23px; }