/* Portfolio desktop — original artwork with a familiar window layout. */
:root {
  --site-wallpaper: url('assets/wallpapers/sunset-lake.jpg');
  --font: -apple-system, BlinkMacSystemFont, 'Helvetica Neue', sans-serif;
  --menubar-h: 28px;
  --sidebar-w: 180px;
  --dock-icon-size: 52px;
  --win-radius: 18px;
  --accent: #007aff;
  --text-primary: #f0f0f0;
  --text-secondary: #a2a2a5;
  --text-tertiary: #727275;
  --win-bg: #1e1e1e;
  --win-sidebar: rgba(40,40,40,.92);
  --row-stripe: #282828;
  --glass-bg: rgba(49,49,49,.82);
  --glass-border: rgba(255,255,255,.16);
  --file-icon-size: 56px;
  color-scheme: dark;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { width: 100%; height: 100%; overflow: hidden; background: #111; font-family: var(--font); font-size: 13px; color: var(--text-primary); -webkit-font-smoothing: antialiased; user-select: none; }
button, input, select { font: inherit; }
button { color: inherit; border: 0; background: none; cursor: default; }
button:disabled { opacity: .35; pointer-events: none; }
button:focus-visible, [tabindex]:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
input { min-width: 0; color: inherit; outline: none; }
input[type=search]::-webkit-search-cancel-button { cursor: pointer; }
input[type=range] { accent-color: #929297; }
input[type=search], input[type=password] { user-select: text; }
[hidden], .hidden { display: none !important; }
.svg-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.symbol { width: 18px; height: 18px; flex-shrink: 0; fill: none; stroke: currentColor; stroke-width: 1.55; stroke-linecap: round; stroke-linejoin: round; }
.desktop { position: fixed; inset: 0; overflow: hidden; }
.desktop-wallpaper, .lock-bg, .login-bg { position: absolute; inset: 0; background: #090a0d var(--site-wallpaper) center / cover no-repeat; }
.phone-shell { display:none; }
.menu-bar { position: absolute; top: 0; left: 0; right: 0; height: var(--menubar-h); z-index: 5000; display: flex; justify-content: space-between; align-items: center; padding: 0 12px; background: rgba(22,22,24,.32); backdrop-filter: blur(30px) saturate(150%); -webkit-backdrop-filter: blur(30px) saturate(150%); color: #f6f6f6; }
.menu-left, .menu-right { display: flex; align-items: center; height: 100%; }
.menu-item { height: 100%; padding: 0 11px; display: flex; align-items: center; white-space: nowrap; border-radius: 5px; font-size: 13px; }
.menu-item:hover, .menu-item[aria-expanded=true] { background: rgba(255,255,255,.14); }
.menu-apple { padding: 0 10px 0 5px; }
.menu-apple .symbol { width: 21px; height: 23px; }
.menu-app-name { font-weight: 650; padding-right: 16px; }
.menu-icon { padding: 0 9px; }
.menu-icon .symbol { width: 16px; height: 16px; }
#menu-battery .symbol { width: 24px; height: 16px; }
.menu-clock { font-variant-numeric: tabular-nums; padding-right: 3px; }
.desktop-icons { position: absolute; top: 48px; right: 22px; bottom: 120px; z-index: 5; display: grid; grid-auto-flow: column; grid-template-rows: repeat(5, 92px); gap: 14px 8px; align-content: start; justify-content: end; }
.desktop-widgets { position:absolute; top:344px; left:22px; z-index:5; width:242px; display:grid; gap:12px; }
.desktop-widget { min-height:144px; position:relative; overflow:hidden; padding:15px 16px; display:flex; flex-direction:column; align-items:flex-start; text-align:left; border-radius:22px; color:#f8f8fb; background:linear-gradient(145deg,#ffffff28,#ffffff0c 42%,#17182455); border:.5px solid #ffffff42; box-shadow:0 13px 32px #0006,inset 0 1px 0 #ffffff30; backdrop-filter:blur(28px) saturate(135%); -webkit-backdrop-filter:blur(28px) saturate(135%); }
.desktop-widget::after { content:''; position:absolute; width:150px; height:150px; right:-62px; top:-77px; border-radius:50%; background:radial-gradient(circle,#9dcaff50,transparent 66%); pointer-events:none; }
.desktop-widget.experience::after { background:radial-gradient(circle,#c7a1ff55,transparent 66%); }
.desktop-widget-icon { width:28px; height:28px; display:grid; place-items:center; margin-bottom:7px; border-radius:9px; background:#6fb4ffb8; box-shadow:inset 0 1px 0 #ffffff5c; }
.desktop-widget.experience .desktop-widget-icon { background:#a979f0bc; }
.desktop-widget-icon .symbol { width:17px; height:17px; }
.desktop-widget-label { font-size:10px; line-height:13px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:#ffffffbd; }
.desktop-widget strong { width:100%; margin-top:3px; font-size:14px; line-height:18px; letter-spacing:-.15px; overflow:hidden; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; }
.desktop-widget small { width:100%; margin-top:4px; font-size:11px; line-height:14px; color:#ffffffbd; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.desktop-widget em { margin-top:3px; font-size:10px; line-height:13px; color:#ffffff91; font-style:normal; }
.desktop-widget-open { margin-top:auto; font-size:11px; font-weight:650; color:#ffffffdf; }
.desktop-widget:hover { transform:translateY(-2px); border-color:#ffffff77; box-shadow:0 18px 38px #0008,inset 0 1px 0 #ffffff45; }
.desktop-icon { width: 94px; min-height: 88px; display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 4px; }
.icon-image { width: 62px; height: 62px; display: grid; place-items: center; border-radius: 7px; }
.icon-image img { width: 58px; height: 58px; object-fit: contain; pointer-events: none; filter: drop-shadow(0 2px 3px #0005); }
.icon-label { font-size: 12px; font-weight: 550; line-height: 16px; text-align: center; text-shadow: 0 1px 3px #000, 0 1px 8px #0009; border-radius: 3px; padding: 1px 3px; max-width: 96px; }
.desktop-icon.selected .icon-image { background: #ffffff25; box-shadow: inset 0 0 0 1px #ffffff50; }
.desktop-icon.selected .icon-label { background: #007aff; }
.window { position: absolute; z-index: 100; display: flex; flex-direction: column; background: var(--win-bg); border-radius: var(--win-radius); border: .5px solid #ffffff3b; box-shadow: 0 20px 48px #0007, 0 0 0 .5px #0009; overflow: hidden; }
.window.focused { z-index: 200; box-shadow: 0 24px 64px #0009, 0 0 0 .5px #000; }
.window:not(.focused) .traffic-light { background: #58585a; }
.window:not(.focused) .window-title, .window:not(.focused) .toolbar-btn { color: #858589; }
.window.opening { animation: window-open .2s ease-out; }
@keyframes window-open { from { opacity: 0; scale: .97; } to { opacity: 1; scale: 1; } }
.window-titlebar { height: 54px; min-height: 54px; display: flex; align-items: center; flex-shrink: 0; background: linear-gradient(90deg,var(--win-sidebar) var(--sidebar-w),var(--win-bg) var(--sidebar-w)); }
.traffic-lights { width: var(--sidebar-w); min-width: var(--sidebar-w); padding-left: 20px; display: flex; gap: 8px; align-items: center; }
.traffic-light { width: 12px; height: 12px; flex-shrink: 0; border-radius: 50%; box-shadow: inset 0 0 0 .5px #0002; position: relative; }
.traffic-light.red { background: #ff5f57; }
.traffic-light.yellow { background: #febc2e; }
.traffic-light.green { background: #28c840; }
.traffic-lights:hover .red::before, .traffic-lights:hover .red::after { content: ''; position: absolute; left: 3px; top: 5.5px; width: 6px; height: 1px; background: #590800; transform: rotate(45deg); }
.traffic-lights:hover .red::after { transform: rotate(-45deg); }
.traffic-lights:hover .yellow::before { content: ''; position: absolute; width: 7px; height: 1px; left: 2.5px; top: 5.5px; background: #765000; }
.traffic-lights:hover .green::before { content: '↗'; color: #005900; position: absolute; font-size: 10px; line-height: 12px; left: 2px; top: 0; }
.window-toolbar { display: flex; align-items: center; gap: 8px; flex: 1; padding: 0 10px 0 8px; min-width: 0; }
.window-title { font-size: 14px; font-weight: 650; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-left: 3px; min-width: 70px; }
.toolbar-spacer { flex: 1; min-width: 2px; }
.toolbar-group { display: flex; align-items: center; gap: 1px; padding: 3px; border: .5px solid #0008; border-radius: 23px; background: linear-gradient(#ffffff07,#ffffff02); box-shadow: inset 0 .5px 0 #ffffff16, 0 .5px 0 #ffffff0c; }
.toolbar-btn { width: 29px; height: 29px; display: flex; align-items: center; justify-content: center; color: #b9b9bc; border-radius: 50%; flex-shrink: 0; }
.toolbar-btn:hover { background: #ffffff0c; color: #e8e8e8; }
.toolbar-btn.active { background: #ffffff19; color: #dedede; box-shadow: inset 0 0 0 .5px #ffffff10; }
.nav-toggles .toolbar-btn { width: 27px; }
.nav-toggles .toolbar-btn + .toolbar-btn { border-left: .5px solid #ffffff0a; border-radius: 0 15px 15px 0; }
.glass-button { width: 35px; height: 35px; background: linear-gradient(#ffffff08,#ffffff02); border: .5px solid #0008; box-shadow: inset 0 .5px 0 #ffffff16; }
.toolbar-search { height: 35px; width: 35px; display: flex; align-items: center; gap: 6px; padding: 0 9px; border-radius: 22px; background: #ffffff06; border: .5px solid #0008; box-shadow: inset 0 .5px 0 #ffffff16; color: #a2a2a5; transition: width .15s; }
.toolbar-search:focus-within { width: 155px; box-shadow: 0 0 0 2px var(--accent); }
.toolbar-search .symbol { width: 16px; height: 16px; }
.search-input { width: 100%; border: 0; background: none; font-size: 12px; padding: 0; }
.toolbar-search:not(:focus-within) .search-input { width: 0; }
.finder-window { width: min(960px,calc(100vw - 80px)); height: min(590px,calc(100dvh - 155px)); min-width: 600px; min-height: 300px; top: max(65px,calc((100dvh - 590px) / 2 - 20px)); left: max(30px,calc((100vw - 960px) / 2)); }
.window-body { display: flex; flex: 1; min-height: 0; }
.finder-sidebar { width: var(--sidebar-w); min-width: var(--sidebar-w); background: var(--win-sidebar); padding: 1px 10px 12px; overflow-y: auto; }
.sidebar-section { margin-top: 14px; }
.sidebar-section:first-child { margin-top: 0; }
.sidebar-heading { padding: 5px 6px 3px; color: #838386; font-size: 11px; font-weight: 600; line-height: 17px; }
.sidebar-item { display: flex; align-items: center; gap: 8px; width: 100%; padding: 0 8px; height: 32px; text-align: left; border-radius: 8px; color: #cbcbce; white-space: nowrap; font-size: 13px; }
.sidebar-item img, .sidebar-item .symbol { width: 18px; height: 18px; flex-shrink: 0; object-fit: contain; color: #a0a0a3; }
.sidebar-item:hover { background: #ffffff08; }
.sidebar-item.active { background: #ffffff15; color: #fff; }
.sidebar-item .eject { margin-left: auto; width: 12px; height: 12px; color: #888; }
.tag-dot { width: 10px; height: 10px; border-radius: 50%; margin: 0 4px; flex-shrink: 0; box-shadow: inset 0 0 0 1px #ffffff16; }
.finder-main { flex: 1; min-width: 0; display: flex; flex-direction: column; background: var(--win-bg); }
.finder-content { flex: 1; overflow: auto; min-height: 0; }
.finder-grid { display: grid; grid-template-columns: repeat(auto-fill,minmax(100px,1fr)); gap: 18px 12px; padding: 22px 18px; align-content: start; }
.file-item { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 4px; text-align: center; border-radius: 6px; min-width: 0; }
.file-icon { width: calc(var(--file-icon-size) + 8px); height: calc(var(--file-icon-size) + 8px); display: grid; place-items: center; border-radius: 6px; }
.file-icon img, .file-icon svg { width: var(--file-icon-size); height: var(--file-icon-size); object-fit: contain; pointer-events: none; filter: drop-shadow(0 2px 2px #0003); }
.file-name { font-size: 12px; line-height: 16px; max-width: 106px; overflow-wrap: anywhere; padding: 1px 4px; border-radius: 4px; }
.file-item.selected .file-icon { background: #ffffff12; }
.file-item.selected .file-name { background: var(--accent); color: white; }
.finder-list { min-height: 100%; position: relative; }
.list-fill { position: absolute; bottom: 0; left: 10px; right: 10px; overflow: hidden; pointer-events: none; }
.list-blank { height: 20px; margin-top: 20px; border-radius: 6px; background: var(--row-stripe); }
.finder-list-header, .list-item { display: grid; grid-template-columns: minmax(165px,1fr) 180px 80px 120px; align-items: center; }
.finder-list-header { height: 28px; position: sticky; top: 0; z-index: 1; background: var(--win-bg); border-bottom: 1px solid #ffffff1d; color: #99999c; font-size: 11px; padding: 0 16px 0 26px; }
.finder-list-header button { text-align: left; color: inherit; font-size: inherit; height: 18px; border-right: .5px solid #ffffff17; padding-left: 6px; }
.finder-list-header button:first-child { font-weight: 600; color: var(--text-primary); padding-left: 16px; }
.list-item { height: 20px; margin: 0 10px; border-radius: 6px; padding: 0 6px; color: #e4e4e4; font-size: 13px; }
.list-item:nth-child(odd) { background: var(--row-stripe); }
.list-item:hover { background: #ffffff0b; }
.list-item.selected { background: var(--accent); color: #fff; }
.window:not(.focused) .list-item.selected { background: #57575a; }
.list-item-name { display: flex; align-items: center; gap: 4px; min-width: 0; }
.list-item-name .disclosure { color: #747478; width: 8px; font-size: 14px; flex-shrink: 0; text-align: center; }
.list-item-name span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.list-item-name img, .list-item-name svg { width: 16px; height: 16px; object-fit: contain; flex-shrink: 0; pointer-events: none; }
.list-item-date, .list-item-kind, .list-item-size { font-size: 12px; color: #b1b1b4; padding-left: 6px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.list-item.selected > span { color: #fff; }
.list-item-size { text-align: right; padding-right: 10px; }
.finder-columns { display: flex; min-height: 100%; }
.finder-column { width: 235px; flex-shrink: 0; border-right: .5px solid #ffffff1c; padding: 6px 6px; }
.column-item { display: flex; align-items: center; gap: 6px; padding: 2px 5px; height: 23px; border-radius: 5px; font-size: 12px; }
.column-item img, .column-item svg { width: 16px; height: 16px; object-fit: contain; }
.column-item span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.column-item.selected { background: var(--accent); }
.column-item-arrow { margin-left: auto; }
.column-preview { padding: 40px 22px; flex: 1; text-align: center; color: var(--text-secondary); }
.column-preview img, .column-preview > svg { width: 100px; height: 100px; object-fit: contain; margin-bottom: 16px; }
.column-preview h3 { color: var(--text-primary); font-size: 14px; margin-bottom: 7px; }
.gallery-view { padding: 28px; height: 100%; display: flex; flex-direction: column; }
.gallery-preview { flex: 1; display: grid; place-content: center; text-align: center; gap: 16px; }
.gallery-preview img, .gallery-preview > svg { width: 160px; height: 160px; object-fit: contain; margin: auto; }
.gallery-strip { display: flex; gap: 10px; overflow: auto; padding-top: 20px; }
.gallery-strip .file-item { min-width: 85px; max-width: 85px; }
.finder-pathbar { display: flex; align-items: center; gap: 7px; height: 25px; font-size: 11px; color: #99999c; padding: 0 14px; border-top: .5px solid #ffffff10; flex-shrink: 0; }
.finder-pathbar .symbol { width: 12px; height: 12px; }
.finder-statusbar { height: 25px; min-height: 25px; display: flex; align-items: center; justify-content: center; gap: 4px; font-size: 11px; color: #8f8f93; border-top: .5px solid #ffffff0b; position: relative; }
#finder-item-count::after { content: ','; }
#icon-size { position: absolute; right: 14px; width: 75px; height: 12px; }
.finder-main:has(.finder-list) #icon-size, .finder-main:has(.finder-columns) #icon-size { display: none; }
.resize-handle { position: absolute; right: 0; bottom: 0; width: 14px; height: 14px; cursor: nwse-resize; }
.empty-state { display: grid; place-content: center; text-align: center; color: var(--text-secondary); height: 100%; gap: 8px; }
.empty-state .symbol { width: 42px; height: 42px; margin: 0 auto 8px; opacity: .5; }
/* The Dock uses the same 52-point icon size configured on the reference Mac. */
.dock-container { position: absolute; bottom: 8px; left: 50%; transform: translateX(-50%); z-index: 3000; max-width: calc(100vw - 16px); }
.dock { display: flex; align-items: end; padding: 5px 8px 3px; gap: 1px; border-radius: 23px; border: .5px solid #ffffff38; background: rgba(90,90,94,.29); backdrop-filter: blur(35px) saturate(150%); -webkit-backdrop-filter: blur(35px) saturate(150%); box-shadow: 0 6px 20px #0005, inset 0 .5px 0 #ffffff25; }
.dock-item { position: relative; display: flex; flex-direction: column; align-items: center; width: var(--dock-icon-size); padding-bottom: 2px; flex-shrink: 0; }
.dock-icon { width: var(--dock-icon-size); height: var(--dock-icon-size); transition: transform .16s ease-out; transform-origin: center bottom; }
.dock-icon img { width: 100%; height: 100%; object-fit: contain; pointer-events: none; filter: drop-shadow(0 2px 2px #0004); }
.dock-item:hover .dock-icon { transform: translateY(-7px) scale(1.18); }
.dock-item:hover + .dock-item .dock-icon, .dock-item:has(+ .dock-item:hover) .dock-icon { transform: translateY(-2px) scale(1.05); }
.dock-separator { height: 43px; width: .5px; background: #ffffff2f; margin: 0 7px 7px; }
.dock-indicator { width: 3px; height: 3px; border-radius: 50%; background: #ddd; margin-top: 1px; opacity: 0; }
.dock-indicator.active { opacity: .85; }
.dock-tooltip { position: absolute; bottom: calc(var(--dock-icon-size) + 20px); left: 50%; transform: translateX(-50%); padding: 5px 12px; background: rgba(45,45,47,.85); border: .5px solid #ffffff2b; backdrop-filter: blur(25px); -webkit-backdrop-filter: blur(25px); box-shadow: 0 4px 12px #0004; border-radius: 8px; font-size: 13px; white-space: nowrap; opacity: 0; pointer-events: none; }
.dock-tooltip::after { content: ''; position: absolute; bottom: -4px; left: calc(50% - 4px); width: 8px; height: 8px; rotate: 45deg; background: #39393b; border-right: .5px solid #ffffff20; border-bottom: .5px solid #ffffff20; }
.dock-item:hover .dock-tooltip { opacity: 1; }
.dock-item.bouncing .dock-icon { animation: dock-bounce .55s ease; }
@keyframes dock-bounce { 0%,100% { translate: 0 0; } 30% { translate: 0 -20px; } 65% { translate: 0 -5px; } }
/* Shared menus and floating glass panels. */
.dropdown-menu, .context-menu { position: fixed; z-index: 6000; min-width: 225px; padding: 5px; border-radius: 10px; border: .5px solid #ffffff30; background: rgba(49,49,50,.9); backdrop-filter: blur(40px) saturate(140%); -webkit-backdrop-filter: blur(40px) saturate(140%); box-shadow: 0 10px 26px #0007; }
.dropdown-menu { display: none; top: 29px; left: 12px; }
.dropdown-menu.show { display: block; }
.dropdown-item { width: 100%; padding: 4px 11px; min-height: 25px; display: flex; align-items: center; text-align: left; border-radius: 5px; font-size: 13px; white-space: nowrap; gap: 25px; }
.dropdown-item:hover { background: var(--accent); color: #fff; }
.dropdown-item kbd { margin-left: auto; font-family: inherit; font-size: 12px; color: #999; }
.dropdown-item:hover kbd { color: #ffffffb3; }
.dropdown-item:disabled { opacity: .35; }
.dropdown-divider { height: .5px; background: #ffffff22; margin: 4px 8px; }
.system-popover { position: absolute; z-index: 4000; top: 36px; right: 16px; border-radius: 22px; padding: 15px; background: var(--glass-bg); border: .5px solid var(--glass-border); backdrop-filter: blur(45px) saturate(150%); -webkit-backdrop-filter: blur(45px) saturate(150%); box-shadow: 0 16px 40px #0006, inset 0 .5px 0 #ffffff20; }
.control-center { width: 340px; }
.control-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.control-tile { border-radius: 15px; padding: 11px; background: #ffffff09; border: .5px solid #ffffff0d; }
.connectivity { grid-row: span 2; display: flex; flex-direction: column; gap: 14px; }
.control-line { display: flex; align-items: center; gap: 9px; text-align: left; }
.control-icon { width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; background: #ffffff12; flex-shrink: 0; }
.control-icon.on { background: #007aff; color: white; }
.control-line strong { display: block; font-size: 12px; font-weight: 600; }
.control-line small { display: block; font-size: 10px; color: #b7b7b9; margin-top: 2px; }
.control-wide { margin-top: 10px; padding: 12px; }
.control-wide strong { font-size: 12px; font-weight: 600; display: block; margin-bottom: 8px; }
.control-slider { position: relative; height: 26px; border-radius: 20px; background: #ffffff1d; display: flex; align-items: center; padding: 0 8px; gap: 10px; }
.control-slider .symbol { width: 16px; height: 16px; }
.control-slider input { width: 100%; }
.control-media { display: flex; align-items: center; gap: 10px; }
.control-media .album { width: 43px; height: 43px; background: #ffffff0d; border-radius: 8px; display: grid; place-items: center; }
.control-media span { flex: 1; color: #aaa; font-size: 12px; }
.control-footer { margin: 14px 3px 0; color: #bdbdc0; font-size: 11px; display: flex; justify-content: space-between; }
.status-popover { width: 300px; border-radius: 16px; }
.status-popover h3 { font-size: 14px; margin: 1px 0 15px; }
.status-popover p { color: #b7b7bb; font-size: 12px; margin-top: 8px; }
.status-popover .dropdown-item { margin-top: 8px; padding-left: 0; }
.spotlight { position: absolute; z-index: 4500; width: min(640px,calc(100vw - 30px)); top: 22%; left: 50%; transform: translateX(-50%); background: rgba(35,35,38,.94); border: .5px solid #ffffff38; border-radius: 20px; overflow: hidden; backdrop-filter: blur(45px); -webkit-backdrop-filter: blur(45px); box-shadow: 0 25px 80px #0008; }
.spotlight-search { display: flex; align-items: center; gap: 15px; padding: 18px 21px; }
.spotlight-search .symbol { width: 25px; height: 25px; color: #999; }
.spotlight-search input { background: none; border: 0; font-size: 24px; flex: 1; letter-spacing: -.5px; }
.spotlight-search kbd { padding: 2px 5px; border: .5px solid #ffffff25; border-radius: 4px; font: 11px var(--font); color: #888; }
.spotlight-body { padding: 0 12px 10px; max-height: 350px; overflow: auto; }
.spotlight-result { width: 100%; display: flex; align-items: center; padding: 7px 10px; gap: 12px; border-radius: 9px; text-align: left; }
.spotlight-result:hover, .spotlight-result.active { background: var(--accent); }
.spotlight-result img { width: 32px; height: 32px; object-fit: contain; }
.spotlight-result small { margin-left: auto; color: #ffffff65; }
.spotlight-footer { display: flex; justify-content: space-between; border-top: .5px solid #ffffff12; padding: 10px 20px; color: #888; font-size: 11px; }
/* System Settings follows the native 232-point sidebar and grouped cards. */
.settings-window { width: min(740px,calc(100vw - 40px)); height: min(780px,calc(100dvh - 132px)); left: max(20px,calc((100vw - 740px) / 2 + 75px)); top: 55px; --sidebar-w: 232px; }
.settings-toolbar { display: flex; align-items: center; gap: 12px; padding-left: 8px; }
.settings-toolbar strong { font-size: 14px; }
.settings-sidebar { width: 232px; min-width: 232px; background: var(--win-sidebar); padding: 7px 10px 18px; overflow: auto; }
.settings-search { display: flex; height: 29px; align-items: center; gap: 5px; padding: 0 9px; background: #ffffff18; border-radius: 18px; box-shadow: inset 0 0 0 .5px #ffffff17; }
.settings-search .symbol { width: 14px; height: 14px; color: #aaa; }
.settings-search input { background: none; border: none; width: 100%; font-size: 13px; }
.settings-account { display: flex; align-items: center; gap: 9px; width: 100%; padding: 14px 5px 21px; text-align: left; }
.user-avatar { display: grid; place-items: center; background: radial-gradient(circle at 30% 20%,#efdbbc,#9b8062 70%,#473f38); color: #fff; font-weight: 500; border-radius: 50%; border: .5px solid #ffffff40; }
.settings-account .user-avatar { width: 38px; height: 38px; font-size: 13px; }
.settings-account strong { font-size: 13px; display: block; }
.settings-account small { font-size: 11px; color: #aaa; display: block; margin-top: 2px; }
.settings-nav-item { width: 100%; height: 32px; display: flex; align-items: center; gap: 7px; padding: 0 9px; text-align: left; border-radius: 7px; color: #d6d6d8; }
.settings-nav-item.active { background: var(--accent); color: white; }
.settings-nav-item:hover:not(.active) { background: #ffffff08; }
.settings-nav-icon { width: 21px; height: 21px; border-radius: 5px; display: grid; place-items: center; color: white; box-shadow: inset 0 0 0 .5px #ffffff25; }
.settings-nav-icon .symbol { width: 16px; height: 16px; }
.settings-nav-gap { height: 13px; }
.settings-content { flex: 1; min-width: 0; overflow: auto; padding: 10px 20px 25px; }
.settings-hero { padding: 26px 25px 20px; text-align: center; border-radius: 15px; background: #ffffff03; margin-bottom: 10px; }
.settings-hero img { width: 50px; height: 50px; object-fit: contain; margin-bottom: 9px; }
.settings-hero h1 { font-size: 22px; font-weight: 700; letter-spacing: -.5px; margin-bottom: 2px; }
.settings-hero p { color: #aaa; font-size: 12px; line-height: 17px; }
.settings-group { background: #ffffff04; border: .5px solid #ffffff04; border-radius: 13px; padding: 0 11px; margin-bottom: 10px; }
.settings-group-title { font-size: 13px; font-weight: 600; margin: 27px 10px 9px; }
.settings-row { display: flex; align-items: center; gap: 10px; min-height: 48px; width: 100%; text-align: left; font-size: 13px; }
.settings-row + .settings-row { border-top: .5px solid #ffffff0b; }
.settings-row .settings-nav-icon { width: 24px; height: 24px; border-radius: 6px; }
.settings-row .chevron { margin-left: auto; color: #727275; font-size: 20px; }
.settings-row .row-value { margin-left: auto; color: #b8b8ba; font-size: 12px; }
.settings-row:hover { background: #ffffff02; }
.settings-row .toggle { margin-left: auto; }
.toggle { width: 33px; height: 19px; border-radius: 14px; background: #5b5b5e; padding: 2px; flex-shrink: 0; box-shadow: inset 0 0 0 .5px #ffffff15; }
.toggle::after { content: ''; width: 15px; height: 15px; display: block; border-radius: 50%; background: white; box-shadow: 0 1px 2px #0003; }
.toggle.on { background: var(--accent); }
.toggle.on::after { margin-left: 14px; }
.appearance-row { align-items: start; min-height: 97px; padding: 12px 0; }
.appearance-choices { display: flex; gap: 12px; margin-left: auto; }
.appearance-choice { text-align: center; font-size: 11px; color: #b0b0b4; }
.appearance-thumb { width: 67px; height: 45px; display: block; border-radius: 6px; background: #d7e7fa var(--site-wallpaper) center / cover; padding: 14px 5px 0; border: .5px solid #ffffff25; margin-bottom: 4px; }
.appearance-thumb::after { content: '● ● ●'; display: block; text-align: left; font-size: 8px; letter-spacing: 2px; color: #ff5f57; background: #e5e5e5; border-radius: 5px 5px 0 0; height: 30px; padding: 3px; }
.appearance-choice[data-appearance=dark] .appearance-thumb::after { background: #252525; }
.appearance-choice[data-appearance=auto] .appearance-thumb::after { background: linear-gradient(90deg,#e5e5e5 50%,#252525 50%); }
.appearance-choice.selected .appearance-thumb { outline: 3px solid var(--accent); outline-offset: 2px; }
.appearance-choice.selected { color: var(--text-primary); font-weight: 600; }
.colour-swatches { display: flex; gap: 9px; margin-left: auto; }
.colour-swatch { width: 23px; height: 23px; border-radius: 50%; background: var(--swatch); }
.colour-swatch.selected { outline: 2px solid var(--accent); outline-offset: 3px; }
.glass-example { height: 145px; width: 248px; margin-left: auto; border-radius: 12px; background: var(--site-wallpaper) center/cover; padding: 13px; display: flex; align-items: start; gap: 8px; }
.glass-example .glass-button { background: #ffffff25; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.glass-example .glass-search { flex: 1; border-radius: 20px; background: #ffffff25; height: 35px; display: flex; align-items: center; padding: 0 10px; gap: 7px; color: #bfc1c5; }
.wallpaper-preview { height: 170px; margin: 10px 0 15px; border-radius: 10px; background: var(--site-wallpaper) center/cover; box-shadow: inset 0 0 0 .5px #ffffff20; }
.settings-subtitle { color: #a7a7aa; font-size: 12px; line-height: 18px; margin: 8px 4px 18px; }
/* About and file previews. */
.about-window { width: 340px; left: calc(50% - 170px); top: max(55px,calc((100dvh - 560px) / 2)); border-radius: 23px; background: #242424; }
.about-titlebar { height: 38px; padding-top: 10px; }
.about-titlebar .traffic-lights { padding-left: 18px; }
.about-titlebar .yellow, .about-titlebar .green { background: #48484a; pointer-events: none; }
.about-body { padding: 0 28px 24px; text-align: center; }
.about-macbook-img { width: 250px; height: 150px; object-fit: contain; margin: 3px 0 17px; }
.about-body h1 { font-size: 28px; font-weight: 700; letter-spacing: -.6px; }
.about-model { margin-top: 5px; color: #99999d; font-size: 13px; }
.about-specs { display: grid; grid-template-columns: 1fr 1.2fr; gap: 8px 14px; margin: 26px 0; font-size: 13px; }
.about-specs dt { text-align: right; font-weight: 600; }
.about-specs dd { text-align: left; color: #a1a1a5; }
.about-btn { padding: 6px 20px; border: .5px solid #ffffff25; border-radius: 16px; background: #ffffff18; box-shadow: 0 1px 2px #0003; }
.about-btn:hover { background: #ffffff22; }
.about-regulatory { color: #88888b; font-size: 11px; margin: 24px 0 7px; }
.about-copyright { color: #727275; font-size: 10px; line-height: 14px; }
.preview-window { width: min(600px,calc(100vw - 40px)); height: min(460px,calc(100dvh - 160px)); top: 110px; left: max(20px,calc((100vw - 600px) / 2 + 70px)); }
.preview-window .window-titlebar { background: #2b2b2b; }
.preview-window .traffic-lights { width: 110px; min-width: 110px; }
.preview-window #preview-content { overflow: auto; flex: 1; padding: 28px; display: grid; place-content: center; text-align: center; gap: 12px; }
.preview-art { max-width: 100%; max-height: 290px; object-fit: contain; }
.preview-document { background: #fafafa; color: #333; padding: 30px; width: 300px; text-align: left; min-height: 270px; line-height: 1.6; box-shadow: 0 3px 10px #0004; user-select: text; }
.preview-document h2 { margin-bottom: 18px; font-size: 20px; }
.preview-note { color: #8f8f93; font-size: 11px; }
.notification-center { position: absolute; z-index: 4000; top: 40px; right: 16px; width: 330px; }
.notification-heading { color: white; font-size: 18px; font-weight: 600; margin: 7px 7px 17px; text-shadow: 0 1px 3px #000; }
.widget { padding: 17px; border-radius: 22px; background: #313133c7; border: .5px solid #ffffff20; backdrop-filter: blur(30px); -webkit-backdrop-filter: blur(30px); box-shadow: 0 10px 30px #0004; margin-bottom: 14px; }
.widget small { color: #ff625d; font-size: 11px; font-weight: 600; text-transform: uppercase; }
.widget-date { font-size: 42px; font-weight: 350; letter-spacing: -1px; }
.widget p { font-size: 12px; color: #aaa; margin-top: 9px; }
.calendar-week { display: grid; grid-template-columns: repeat(7,1fr); gap: 8px; text-align: center; font-size: 11px; margin-top: 20px; }
.calendar-week span { height: 22px; display: grid; place-items: center; }
.calendar-week .today { border-radius: 50%; background: #ff453a; color: white; }
.apps-panel { position: absolute; z-index: 3500; bottom: 93px; left: 50%; transform: translateX(-50%); width: min(810px,calc(100vw - 32px)); max-height: calc(100dvh - 155px); border-radius: 24px; border: .5px solid #ffffff35; background: #252527e8; backdrop-filter: blur(50px); -webkit-backdrop-filter: blur(50px); box-shadow: 0 20px 60px #0007; padding: 20px; overflow: auto; }
.apps-search { display: flex; align-items: center; gap: 9px; background: #ffffff0b; border-radius: 20px; padding: 8px 12px; width: min(320px,100%); margin: 0 auto 25px; color: #aaa; }
.apps-search input { border: none; background: none; width: 100%; }
.apps-grid { display: grid; grid-template-columns: repeat(auto-fill,minmax(95px,1fr)); gap: 20px 10px; }
.apps-grid button { display: flex; flex-direction: column; align-items: center; gap: 5px; font-size: 11px; }
.apps-grid button img { width: 58px; height: 58px; object-fit: contain; }
/* Optional lock and login states are accessible from the workspace menu. */
.lock-screen, .login-screen { position: fixed; inset: 0; z-index: 8000; color: white; }
.lock-content { position: absolute; top: 12%; width: 100%; text-align: center; }
.lock-date { font-size: 23px; font-weight: 600; margin-bottom: 8px; }
.lock-time { font-size: clamp(85px,12vw,140px); line-height: 1; font-weight: 650; letter-spacing: -5px; color: #ffffffdc; }
.lock-user { position: absolute; left: 50%; bottom: 8%; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 9px; }
.lock-user .user-avatar { width: 60px; height: 60px; font-size: 22px; }
.lock-user > span:nth-child(2) { font-size: 14px; font-weight: 600; }
.lock-hint { font-size: 11px; color: #ffffff80; }
.login-bg { filter: brightness(.75); }
.login-content { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-40%); width: 280px; text-align: center; }
.login-avatar { width: 84px; height: 84px; font-size: 32px; margin: 0 auto 16px; }
.login-username { font-size: 18px; font-weight: 600; margin-bottom: 18px; }
.login-input-wrap { display: flex; align-items: center; width: 230px; height: 35px; margin: auto; border-radius: 22px; border: .5px solid #ffffff3b; background: #ffffff22; backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); padding: 0 4px 0 13px; }
.login-input { background: none; border: none; flex: 1; font-size: 12px; }
.login-input::placeholder { color: #ffffff85; }
.login-submit { width: 26px; height: 26px; border: .5px solid #ffffff5b; border-radius: 50%; font-size: 17px; }
.login-hint-text { font-size: 11px; color: #ffffff70; margin: 9px 0 50px; }
.login-actions { display: flex; justify-content: center; gap: 25px; font-size: 11px; color: #ffffffa0; }
/* Light appearance is a demo preference, independent of system settings. */
body.light { --text-primary: #242426; --text-secondary: #747477; --text-tertiary: #9b9b9f; --win-bg: #fff; --win-sidebar: rgba(232,232,234,.96); --row-stripe: #f1f1f1; --glass-bg: rgba(241,241,244,.9); --glass-border: #ffffffb0; color-scheme: light; }
.light .window { border-color: #0003; }
.light .toolbar-btn, .light .sidebar-item { color: #65656a; }
.light .sidebar-item.active { color: #222; background: #00000010; }
.light .list-item { color: #242426; }
.light .list-item.selected { color: white; }
.light .list-item-date, .light .list-item-size, .light .list-item-kind { color: #747478; }
.light .settings-row + .settings-row { border-color: #0000000c; }
.light .settings-group, .light .settings-hero { background: #f3f3f5; }
.light .settings-nav-item { color: #363638; }
.light .settings-nav-item.active { color: white; }
.light .settings-row .row-value { color: #747477; }
.light .settings-group { border-color: #00000005; }
.light .about-window { background: #ededee; }
.light .toolbar-group, .light .glass-button, .light .toolbar-search { background: #00000004; border-color: #00000015; }
.light .toolbar-btn.active { background: #0000000a; color: #444; }
::-webkit-scrollbar { width: 7px; height: 7px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #88888845; border: 2px solid transparent; border-radius: 8px; background-clip: padding-box; }
@media (max-width: 1050px) {
  :root { --dock-icon-size: clamp(28px,calc((100vw - 70px) / 18),45px); }
  .finder-window { width: calc(100vw - 50px); left: 25px; }
  .window-toolbar { gap: 5px; }
  #finder-share, #finder-tags { display: none; }
  .settings-window { left: calc((100vw - min(740px,100vw - 40px)) / 2); }
  .desktop-widgets { left:12px; width:220px; }
}
@media (max-width: 720px) {
  :root { --sidebar-w: 150px; --dock-icon-size: 37px; }
  .menu-item { padding: 0 7px; font-size: 12px; }
  .menu-left [data-menu=go], .menu-left [data-menu=window], #menu-battery { display: none; }
  .finder-window { min-width: 0; width: calc(100vw - 20px); left: 10px; top: 58px; height: calc(100dvh - 155px); }
  .traffic-lights { padding-left: 15px; }
  .finder-sidebar { padding: 0 6px; }
  .sidebar-item { font-size: 12px; gap: 6px; }
  .view-toggles .toolbar-btn { width: 25px; }
  .view-toggles [data-view=gallery], #finder-group, #finder-more { display: none; }
  .window-title { font-size: 13px; min-width: 0; }
  .finder-list-header, .list-item { grid-template-columns: minmax(145px,1fr) 120px; }
  .list-item-size, .list-item-kind, .finder-list-header > button:nth-child(n+3) { display: none; }
  .list-item-date { font-size: 11px; }
  .dock { gap: 0; padding-inline: 5px; border-radius: 19px; }
  .dock-item[data-app=Contacts], .dock-item[data-app=Reminders], .dock-item[data-app=FaceTime], .dock-item[data-app=Maps] { display: none; }
  .settings-window { --sidebar-w: 175px; width: calc(100vw - 20px); left: 10px; top: 45px; height: calc(100dvh - 125px); }
  .desktop-widgets { display:none; }
  .settings-sidebar { width: 175px; min-width: 175px; padding: 7px 7px; }
  .settings-content { padding: 10px; }
  .settings-account strong { font-size: 11px; }
  .appearance-choices { gap: 8px; }
  .appearance-thumb { width: 50px; }
  .appearance-row { flex-wrap: wrap; gap: 13px; }
  .colour-swatches { gap: 5px; }
  .colour-swatch { width: 17px; height: 17px; }
}
@media (max-width: 480px) {
  :root { --sidebar-w: 120px; --dock-icon-size: clamp(22px,calc((100vw - 27px) / 11),33px); }
  .menu-left [data-menu=file], .menu-left [data-menu=edit], .menu-left [data-menu=view], .menu-left [data-menu=help], #menu-wifi { display: none; }
  .menu-clock { font-size: 11px; }
  .desktop-icons { right: 8px; }
  .sidebar-item { gap: 5px; padding: 0 5px; font-size: 11px; }
  .sidebar-item img, .sidebar-item .symbol { width: 16px; height: 16px; }
  .window-toolbar { gap: 4px; padding: 0 6px; }
  .window-title { flex: 1; }
  .nav-toggles { display: none; }
  .view-toggles .toolbar-btn { width: 25px; height: 27px; }
  .view-toggles [data-view=column] { display: none; }
  .toolbar-search:focus-within { width: 100px; }
  .finder-list-header, .list-item { grid-template-columns: minmax(140px,1fr); }
  .list-item-date, .finder-list-header > button:nth-child(2) { display: none; }
  .dock-item[data-app=Mail], .dock-item[data-app=Calendar], .dock-item[data-app=Music] { display: none; }
  .dock-separator { margin-inline: 4px; }
  .settings-window { --sidebar-w: 55px; }
  .settings-sidebar { width: 55px; min-width: 55px; padding: 7px 5px; }
  .settings-search, .settings-nav-label, .settings-account>span:last-child { display: none; }
  .settings-account { justify-content:center;padding:8px 0 12px; }
  .settings-nav-item { justify-content: center; padding: 0; }
  .settings-row { font-size: 12px; }
  .control-center { width: calc(100vw - 24px); right: 12px; }
  .notification-center { width: calc(100vw - 32px); }
}
/* ========================================================
   Device Mode Switcher & Preview Styles
   ======================================================== */
.device-switcher-pill {
  display: inline-flex;
  align-items: center;
  background: rgba(255, 255, 255, 0.15);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 999px;
  padding: 2px 3px;
  gap: 2px;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  margin-right: 6px;
}
.device-btn {
  background: transparent;
  border: 0;
  color: rgba(255, 255, 255, 0.78);
  font-size: 11px;
  font-weight: 500;
  padding: 2px 8px;
  border-radius: 999px;
  cursor: pointer;
  transition: all 0.18s ease;
  line-height: 16px;
}
.device-btn:hover {
  color: #fff;
  background: rgba(255, 255, 255, 0.15);
}
.device-btn.active {
  background: rgba(255, 255, 255, 0.32);
  color: #fff;
  font-weight: 600;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}

.device-preview-bar {
  position: fixed;
  top: 10px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 100000;
  display: flex;
  align-items: center;
  gap: 12px;
  background: rgba(20, 20, 25, 0.88);
  border: 1px solid rgba(255, 255, 255, 0.2);
  box-shadow: 0 12px 36px rgba(0, 0, 0, 0.45);
  border-radius: 999px;
  padding: 6px 16px 6px 18px;
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  animation: fadeInDown 0.3s ease;
}
.device-preview-tag {
  font-size: 12px;
  font-weight: 600;
  color: #fff;
  display: flex;
  align-items: center;
  gap: 6px;
}
.device-preview-tag::before {
  content: '';
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #34c759;
  box-shadow: 0 0 8px #34c759;
}
.device-preview-note {
  font-size: 11px;
  color: rgba(255, 255, 255, 0.6);
}
.device-preview-exit-btn {
  background: rgba(255, 255, 255, 0.15);
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: #fff;
  font-size: 11px;
  font-weight: 500;
  padding: 4px 12px;
  border-radius: 999px;
  cursor: pointer;
  transition: all 0.15s ease;
}
.device-preview-exit-btn:hover {
  background: #007aff;
  border-color: #007aff;
}

/* Multitasking and Done buttons */
.window-multitask-pill {
  display: none;
}
.ios-done-btn {
  display: none;
}
.tablet-shell {
  display: none;
}
.ios-files-header {
  display: none;
}
.ios-files-tab-bar {
  display: none;
}

/* ========================================================
   iPhone (phone-ui) Dedicated Experience
   ======================================================== */
body.phone-ui {
  background: #000;
}
body.phone-ui .tablet-shell {
  display: none !important;
}
body.phone-ui .menu-bar,
body.phone-ui .dock,
body.phone-ui .desktop-icons,
body.phone-ui .desktop-widgets,
body.phone-ui .about-window {
  display: none !important;
}

/* iPhone Lock Screen */
body.phone-ui .lock-screen {
  cursor: pointer;
  background: #000;
}
body.phone-ui .lock-bg {
  background: #1a1934 var(--site-wallpaper) center / cover no-repeat;
  opacity: 0.95;
}
body.phone-ui .lock-camera-indicator {
  position: absolute;
  top: 14px;
  left: 50%;
  transform: translateX(-50%);
  width: 90px;
  height: 26px;
  border-radius: 20px;
  background: #000;
  box-shadow: 0 0 1px rgba(255, 255, 255, 0.25);
  z-index: 5;
}
body.phone-ui .lock-content {
  top: 68px;
  width: 100%;
  padding: 0 20px;
}
body.phone-ui .lock-date {
  font-size: 18px;
  font-weight: 600;
  color: #e5edff;
  letter-spacing: -0.2px;
  margin-bottom: 2px;
}
body.phone-ui .lock-time {
  font-size: clamp(78px, 24vw, 114px);
  font-weight: 700;
  letter-spacing: -3.5px;
  line-height: 0.95;
  color: #fff;
  text-shadow: 0 2px 14px rgba(0, 0, 0, 0.3);
}
body.phone-ui .lock-glance {
  display: inline-flex;
  align-items: center;
  margin-top: 14px;
  padding: 6px 14px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.16);
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: #fff;
  font-size: 11px;
  font-weight: 500;
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
}
body.phone-ui .lock-user {
  bottom: 84px;
}
body.phone-ui .lock-user .user-avatar,
body.phone-ui .lock-user > span:nth-child(2) {
  display: none;
}
body.phone-ui .lock-hint {
  padding: 10px 22px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.18);
  border: 1px solid rgba(255, 255, 255, 0.25);
  color: #fff;
  font-size: 13px;
  font-weight: 500;
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
}
body.phone-ui .lock-quick-actions {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 28px;
  display: flex;
  justify-content: space-between;
  padding: 0 44px;
  z-index: 6;
}
body.phone-ui .lock-action-btn {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.18);
  border: 1px solid rgba(255, 255, 255, 0.24);
  color: #fff;
  display: grid;
  place-items: center;
  backdrop-filter: blur(25px);
  -webkit-backdrop-filter: blur(25px);
}
body.phone-ui .lock-action-btn .symbol {
  width: 22px;
  height: 22px;
}
body.phone-ui .lock-screen::after {
  content: '';
  position: absolute;
  left: 50%;
  bottom: 8px;
  transform: translateX(-50%);
  width: 138px;
  height: 5px;
  border-radius: 999px;
  background: #fff;
  opacity: 0.95;
  box-shadow: 0 0 10px rgba(255, 255, 255, 0.6);
}

/* iPhone Home Screen Shell */
body.phone-ui .phone-shell {
  position: absolute;
  inset: 0;
  z-index: 45;
  display: flex;
  flex-direction: column;
  color: white;
  overflow: hidden;
  padding: 48px 18px 20px;
  background: #1a1934 var(--site-wallpaper) center / cover no-repeat;
}
body.phone-ui.phone-app-open .phone-shell {
  z-index: 10000;
  background: transparent;
  pointer-events: none;
}

/* iPhone Status Bar */
body.phone-ui .phone-status {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 24px 0;
  font-size: 14px;
  font-weight: 600;
  z-index: 10;
}
body.phone-ui .phone-dynamic-island {
  position: absolute;
  left: 50%;
  top: 9px;
  transform: translateX(-50%);
  width: 108px;
  height: 27px;
  border-radius: 20px;
  background: #000;
  box-shadow: inset 0 0 1px rgba(255, 255, 255, 0.2), 0 2px 10px rgba(0, 0, 0, 0.4);
}
body.phone-ui .phone-status-icons {
  display: flex;
  align-items: center;
  gap: 6px;
}
body.phone-ui .cell-bars {
  display: inline-flex;
  align-items: flex-end;
  gap: 1.5px;
  height: 11px;
}
body.phone-ui .cell-bars span {
  width: 2.5px;
  background: #fff;
  border-radius: 1px;
}
body.phone-ui .cell-bars span:nth-child(1) { height: 3px; }
body.phone-ui .cell-bars span:nth-child(2) { height: 6px; }
body.phone-ui .cell-bars span:nth-child(3) { height: 9px; }
body.phone-ui .cell-bars span:nth-child(4) { height: 11px; }
body.phone-ui .net-type {
  font-size: 10px;
  font-weight: 700;
  margin-right: 2px;
}
body.phone-ui .battery-pill {
  width: 24px;
  height: 12px;
  border: 1px solid rgba(255, 255, 255, 0.7);
  border-radius: 3.5px;
  display: flex;
  align-items: center;
  padding: 1px;
  position: relative;
}
body.phone-ui .battery-pill::after {
  content: '';
  position: absolute;
  right: -3px;
  top: 3px;
  width: 2px;
  height: 4px;
  border-radius: 0 1px 1px 0;
  background: rgba(255, 255, 255, 0.7);
}
body.phone-ui .battery-pill em {
  font-style: normal;
  font-size: 8px;
  font-weight: 700;
  width: 100%;
  text-align: center;
  line-height: 1;
}

/* iPhone Widgets */
body.phone-ui .phone-widgets {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin: 8px 0 16px;
  transition: transform 0.32s ease, opacity 0.24s ease, filter 0.24s ease;
}
body.phone-ui .phone-widget {
  min-height: 110px;
  padding: 14px;
  border-radius: 22px;
  text-align: left;
  background: rgba(255, 255, 255, 0.16);
  border: 1px solid rgba(255, 255, 255, 0.22);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35), 0 12px 28px rgba(0, 0, 0, 0.25);
  backdrop-filter: blur(28px) saturate(150%);
  -webkit-backdrop-filter: blur(28px) saturate(150%);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  cursor: pointer;
  transition: transform 0.16s ease;
}
body.phone-ui .phone-widget:active {
  transform: scale(0.96);
}
body.phone-ui .phone-widget-head {
  display: flex;
  align-items: center;
  gap: 8px;
}
body.phone-ui .phone-widget-avatar {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  object-fit: cover;
  border: 1.5px solid #fff;
}
body.phone-ui .phone-widget small {
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: rgba(255, 255, 255, 0.75);
}
body.phone-ui .phone-widget strong {
  font-size: 14px;
  font-weight: 600;
  line-height: 1.25;
  color: #fff;
  margin: 6px 0 2px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
body.phone-ui .phone-widget span {
  font-size: 11px;
  color: rgba(255, 255, 255, 0.85);
  line-height: 1.3;
}
body.phone-ui .phone-widget-badge {
  display: inline-block;
  font-size: 9px;
  font-weight: 600;
  padding: 2px 7px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.2);
  color: #fff;
  width: fit-content;
  margin-top: 4px;
}

/* iPhone App Grid */
body.phone-ui .phone-home-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px 10px;
  align-content: start;
  transition: transform 0.32s ease, opacity 0.24s ease, filter 0.24s ease;
}
body.phone-ui.phone-app-open .phone-widgets,
body.phone-ui.phone-app-open .phone-home-grid,
body.phone-ui.phone-app-open .phone-search-pill,
body.phone-ui.phone-app-open .phone-dock {
  transform: scale(0.96);
  opacity: 0;
  filter: blur(8px);
  pointer-events: none;
}
body.phone-ui .phone-app-icon {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  min-width: 0;
  text-align: center;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  transition: transform 0.16s ease;
}
body.phone-ui .phone-app-icon:active {
  transform: scale(0.88);
}
body.phone-ui .phone-app-icon > span {
  width: 58px;
  height: 58px;
  display: grid;
  place-items: center;
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.32);
  overflow: hidden;
}
body.phone-ui .phone-app-icon img {
  width: 58px;
  height: 58px;
  object-fit: cover;
}
body.phone-ui .phone-app-icon strong {
  max-width: 72px;
  color: #fff;
  font-size: 11px;
  line-height: 13px;
  font-weight: 500;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.8);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* iPhone Search Pill */
body.phone-ui .phone-search-pill {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  width: 80px;
  height: 27px;
  margin: auto auto 94px;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.18);
  border: 1px solid rgba(255, 255, 255, 0.22);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  color: #fff;
  font-size: 11px;
  font-weight: 500;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
  transition: opacity 0.24s ease;
}
body.phone-ui .phone-search-pill .symbol {
  width: 12px;
  height: 12px;
}

/* iPhone Dock */
body.phone-ui .phone-dock {
  position: absolute;
  left: 14px;
  right: 14px;
  bottom: 20px;
  min-height: 80px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  padding: 11px 12px;
  border-radius: 30px;
  background: rgba(255, 255, 255, 0.24);
  border: 1px solid rgba(255, 255, 255, 0.32);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 16px 36px rgba(0, 0, 0, 0.35);
  backdrop-filter: blur(32px) saturate(160%);
  -webkit-backdrop-filter: blur(32px) saturate(160%);
  transition: transform 0.32s ease, opacity 0.24s ease, filter 0.24s ease;
}
body.phone-ui .phone-dock .phone-app-icon strong {
  display: none;
}

/* iPhone Home Indicator Button */
body.phone-ui .phone-home-button {
  position: fixed;
  left: 50%;
  bottom: 6px;
  transform: translateX(-50%);
  z-index: 10050;
  display: block;
  width: 136px;
  height: 20px;
  background: none;
  border: 0;
  cursor: pointer;
}
body.phone-ui.phone-app-open .phone-home-button {
  pointer-events: auto;
}
body.phone-ui .phone-home-button::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 6px;
  height: 5px;
  border-radius: 999px;
  background: #fff;
  opacity: 0.95;
  box-shadow: 0 0 8px rgba(255, 255, 255, 0.5);
}

/* iPhone Files App Experience */
body.phone-ui .finder-window {
  left: 0 !important;
  top: 0 !important;
  width: 100vw !important;
  height: 100dvh !important;
  min-width: 0 !important;
  min-height: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  background: #f2f2f7 !important;
  color: #000 !important;
  display: flex;
  flex-direction: column !important;
  z-index: 9999;
}
body.phone-ui #finder-titlebar,
body.phone-ui .finder-sidebar,
body.phone-ui .finder-pathbar,
body.phone-ui .finder-statusbar,
body.phone-ui .finder-list-header {
  display: none !important;
}

/* iOS Files Header */
body.phone-ui .ios-files-header {
  display: flex !important;
  flex-direction: column;
  background: rgba(248, 248, 250, 0.94);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-bottom: 1px solid #d1d1d6;
  padding: 44px 16px 10px;
  z-index: 12;
}
body.phone-ui .ios-files-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 44px;
}
body.phone-ui .ios-files-back-btn {
  display: flex;
  align-items: center;
  gap: 4px;
  background: none;
  border: 0;
  color: #007aff;
  font-size: 17px;
  font-weight: 400;
  cursor: pointer;
  padding: 4px 0;
}
body.phone-ui .ios-files-back-btn[hidden] {
  visibility: hidden;
}
body.phone-ui .ios-files-back-btn .symbol {
  width: 18px;
  height: 18px;
  stroke-width: 2.2;
}
body.phone-ui .ios-files-heading {
  font-size: 20px;
  font-weight: 700;
  color: #000;
  margin: 0;
  max-width: 160px;
  text-align: center;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
body.phone-ui .ios-files-top-actions {
  display: flex;
  align-items: center;
  gap: 12px;
}
body.phone-ui .ios-files-view-btn {
  background: none;
  border: 0;
  color: #007aff;
  cursor: pointer;
  display: grid;
  place-items: center;
  padding: 4px;
}
body.phone-ui .ios-files-view-btn .symbol {
  width: 20px;
  height: 20px;
}
body.phone-ui .ios-files-done-btn {
  display: block;
  background: none;
  border: 0;
  color: #007aff;
  font-size: 17px;
  font-weight: 600;
  cursor: pointer;
}
body.phone-ui .ios-files-search-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  background: #e3e3e8;
  border-radius: 10px;
  padding: 7px 10px;
  margin-top: 8px;
}
body.phone-ui .ios-files-search-bar .symbol {
  width: 16px;
  height: 16px;
  color: #8e8e93;
}
body.phone-ui .ios-files-search-bar input {
  background: none;
  border: 0;
  color: #000;
  font-size: 16px;
  width: 100%;
  outline: none;
}

/* iOS Files Content & Browse Hub */
body.phone-ui .finder-main {
  flex: 1;
  display: flex;
  flex-direction: column;
  background: #f2f2f7;
  overflow: hidden;
}
body.phone-ui .finder-content {
  flex: 1;
  overflow-y: auto;
  padding: 14px 16px 72px;
  -webkit-overflow-scrolling: touch;
}
body.phone-ui .ios-browse-group {
  margin-bottom: 24px;
}
body.phone-ui .ios-group-title {
  font-size: 13px;
  font-weight: 600;
  text-transform: uppercase;
  color: #6e6e73;
  margin: 0 0 7px 12px;
  letter-spacing: 0.4px;
}
body.phone-ui .ios-browse-card {
  background: #fff;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}
body.phone-ui .ios-browse-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  border-bottom: 1px solid #ededf0;
  background: #fff;
  border-radius: 0;
  width: 100%;
  text-align: left;
  cursor: pointer;
  border-top: 0;
  border-left: 0;
  border-right: 0;
}
body.phone-ui .ios-browse-row:last-child {
  border-bottom: 0;
}
body.phone-ui .ios-browse-row:active {
  background: #e5e5ea;
}
body.phone-ui .ios-browse-icon {
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  flex-shrink: 0;
}
body.phone-ui .ios-browse-icon img,
body.phone-ui .ios-browse-icon .symbol {
  width: 24px;
  height: 24px;
}
body.phone-ui .ios-browse-name {
  font-size: 16px;
  font-weight: 500;
  color: #000;
  flex: 1;
}
body.phone-ui .ios-browse-count {
  font-size: 14px;
  color: #8e8e93;
}
body.phone-ui .ios-browse-chevron {
  font-size: 18px;
  color: #c7c7cc;
}
body.phone-ui .ios-tag-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  flex-shrink: 0;
}

/* iOS Files Folder Grid */
body.phone-ui .finder-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px 10px;
  padding: 6px 0 20px;
}
body.phone-ui .file-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 6px;
  background: none;
  border: 0;
  padding: 4px;
  border-radius: 10px;
  cursor: pointer;
}
body.phone-ui .file-item:active {
  background: rgba(0, 0, 0, 0.06);
}
body.phone-ui .file-icon {
  width: 54px;
  height: 54px;
  display: grid;
  place-items: center;
}
body.phone-ui .file-name {
  font-size: 12px;
  font-weight: 500;
  color: #000;
  text-shadow: none;
  max-width: 90px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  line-height: 1.25;
}

/* iOS Files Folder List */
body.phone-ui .finder-list {
  background: #fff;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}
body.phone-ui .list-item {
  height: 48px;
  margin: 0;
  padding: 0 14px;
  border-radius: 0;
  color: #000;
  background: #fff !important;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
body.phone-ui .list-item + .list-item {
  border-top: 1px solid #ededf0;
}
body.phone-ui .list-item:active {
  background: #e5e5ea !important;
}

/* iOS Files Bottom Tab Bar */
body.phone-ui .ios-files-tab-bar {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 58px;
  background: rgba(248, 248, 250, 0.94);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-top: 1px solid #d1d1d6;
  display: flex !important;
  align-items: center;
  justify-content: space-around;
  z-index: 15;
  padding-bottom: 6px;
}
body.phone-ui .ios-files-tab {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  background: none;
  border: 0;
  color: #8e8e93;
  font-size: 10px;
  font-weight: 500;
  cursor: pointer;
  padding: 4px 16px;
}
body.phone-ui .ios-files-tab .symbol {
  width: 22px;
  height: 22px;
}
body.phone-ui .ios-files-tab.active {
  color: #007aff;
}

/* Other Apps on iPhone (Safari, Notes, Photos, Settings, Mail) */
body.phone-ui .preview-window.portfolio-window {
  left: 0 !important;
  top: 0 !important;
  width: 100vw !important;
  height: 100dvh !important;
  min-width: 0 !important;
  min-height: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}
body.phone-ui .preview-window.portfolio-window #preview-titlebar {
  display: none;
}
body.phone-ui .preview-window.portfolio-window #preview-content {
  height: 100dvh;
}
body.phone-ui .preview-window.portfolio-window::before {
  display: none;
}
body.phone-ui .preview-window.portfolio-window::after {
  content: '';
  position: absolute;
  left: 50%;
  bottom: 7px;
  transform: translateX(-50%);
  width: 136px;
  height: 5px;
  border-radius: 9px;
  background: #111;
  z-index: 20;
  pointer-events: none;
  opacity: 0.85;
}
body.phone-ui .settings-window {
  left: 0 !important;
  top: 0 !important;
  width: 100vw !important;
  height: 100dvh !important;
  min-width: 0 !important;
  min-height: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  background: #f2f2f7;
  color: #1d1d1f;
  --sidebar-w: 0px;
}
body.phone-ui .settings-window .window-titlebar {
  height: 82px;
  min-height: 82px;
  padding: 36px 16px 8px;
  background: #f8f8fb;
  border-bottom: 1px solid #d7d7dc;
}
body.phone-ui .settings-window .traffic-lights,
body.phone-ui .settings-window #settings-back,
body.phone-ui .settings-window .toolbar-btn[disabled] {
  display: none;
}
body.phone-ui .settings-toolbar {
  width: 100%;
  padding: 0;
  justify-content: space-between;
}
body.phone-ui .settings-toolbar strong {
  font-size: 17px;
}
body.phone-ui .settings-window .settings-done-btn {
  display: block;
}
body.phone-ui .settings-window .window-body {
  display: block;
  overflow: hidden;
}
body.phone-ui .settings-sidebar {
  display: none;
}
body.phone-ui .settings-content {
  height: calc(100dvh - 82px);
  padding: 16px 15px 36px;
  background: #f2f2f7;
  color: #1d1d1f;
}
body.phone-ui .settings-group,
body.phone-ui .settings-hero {
  background: #fff;
  border-color: rgba(0, 0, 0, 0.05);
}
body.phone-ui .settings-row + .settings-row,
body.phone-ui .portfolio-device-row + .portfolio-device-row {
  border-color: #ededf0;
}


/* ========================================================
   iPad (tablet-ui) Dedicated Experience
   ======================================================== */
body.tablet-ui {
  background: #050509;
}
body.tablet-ui .phone-shell {
  display: none !important;
}
body.tablet-ui .menu-bar,
body.tablet-ui .dock,
body.tablet-ui .desktop-icons,
body.tablet-ui .desktop-widgets,
body.tablet-ui .about-window {
  display: none !important;
}

/* iPad Lock Screen */
body.tablet-ui .lock-screen {
  cursor: pointer;
}
body.tablet-ui .lock-bg { background-image: var(--site-wallpaper); }
body.tablet-ui .lock-camera-indicator { display: none; }
body.tablet-ui .lock-content {
  top: 86px;
}
body.tablet-ui .lock-date {
  font-size: 24px;
  font-weight: 600;
  color: #e5edff;
}
body.tablet-ui .lock-time {
  font-size: clamp(100px, 15vw, 160px);
  letter-spacing: -5px;
  color: #fff;
  font-weight: 700;
}
body.tablet-ui .lock-glance {
  display: inline-flex;
  margin-top: 18px;
  padding: 8px 18px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.16);
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: #fff;
  font-size: 13px;
  font-weight: 500;
  backdrop-filter: blur(20px);
}
body.tablet-ui .lock-user {
  bottom: 70px;
}
body.tablet-ui .lock-user .user-avatar,
body.tablet-ui .lock-user > span:nth-child(2) {
  display: none;
}
body.tablet-ui .lock-hint {
  padding: 12px 24px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.2);
  border: 1px solid rgba(255, 255, 255, 0.26);
  color: #fff;
  font-size: 14px;
  backdrop-filter: blur(20px);
}
body.tablet-ui .lock-quick-actions {
  display: none;
}
body.tablet-ui .lock-screen::after {
  content: '';
  position: absolute;
  left: 50%;
  bottom: 10px;
  transform: translateX(-50%);
  width: 190px;
  height: 6px;
  border-radius: 9px;
  background: #fff;
  opacity: 0.92;
}

/* iPad Home Screen Shell */
body.tablet-ui .tablet-shell {
  position: absolute;
  inset: 0;
  z-index: 45;
  display: flex !important;
  flex-direction: column;
  color: white;
  overflow: hidden;
  padding: 16px 36px 28px;
  background: #1a1934 var(--site-wallpaper) center / cover no-repeat;
}
body.tablet-ui.phone-app-open .tablet-shell {
  z-index: 10000;
  background: transparent;
  pointer-events: none;
}

/* iPad Status Bar */
body.tablet-ui .tablet-status {
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 14px;
  font-weight: 600;
  margin-bottom: 22px;
}
body.tablet-ui .tablet-multitask-pill {
  width: 54px;
  height: 22px;
  border-radius: 12px;
  background: rgba(0, 0, 0, 0.35);
  border: 1px solid rgba(255, 255, 255, 0.12);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
}
body.tablet-ui .tablet-multitask-pill span {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.75);
}
body.tablet-ui .tablet-status-right {
  display: flex;
  align-items: center;
  gap: 10px;
}
body.tablet-ui .tablet-status-right .battery-pill {
  width: 26px;
  height: 13px;
  border: 1px solid rgba(255, 255, 255, 0.75);
  border-radius: 3.5px;
  display: flex;
  align-items: center;
  padding: 1px;
  position: relative;
}
body.tablet-ui .tablet-status-right .battery-pill::after {
  content: '';
  position: absolute;
  right: -3px;
  top: 3px;
  width: 2px;
  height: 4px;
  border-radius: 0 1px 1px 0;
  background: rgba(255, 255, 255, 0.75);
}
body.tablet-ui .tablet-status-right .battery-pill em {
  font-style: normal;
  font-size: 8px;
  font-weight: 700;
  width: 100%;
  text-align: center;
}

/* iPad Home Layout (Today Widgets Column + Apps Grid) */
body.tablet-ui .tablet-home-layout {
  display: grid;
  grid-template-columns: 290px 1fr;
  gap: 32px;
  flex: 1;
  min-height: 0;
  align-items: start;
  max-width: 1100px;
  margin: 0 auto;
  width: 100%;
  transition: transform 0.32s ease, opacity 0.24s ease, filter 0.24s ease;
}
body.tablet-ui.phone-app-open .tablet-home-layout,
body.tablet-ui.phone-app-open .tablet-dock-wrap {
  transform: scale(0.97);
  opacity: 0;
  filter: blur(8px);
  pointer-events: none;
}

/* iPad Today View Widgets */
body.tablet-ui .tablet-today-view {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
body.tablet-ui .tablet-widget {
  padding: 18px 20px;
  border-radius: 24px;
  text-align: left;
  background: rgba(255, 255, 255, 0.18);
  border: 1px solid rgba(255, 255, 255, 0.24);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35), 0 14px 32px rgba(0, 0, 0, 0.22);
  backdrop-filter: blur(30px) saturate(150%);
  -webkit-backdrop-filter: blur(30px) saturate(150%);
  cursor: pointer;
  transition: transform 0.16s ease;
}
body.tablet-ui .tablet-widget:active {
  transform: scale(0.97);
}
body.tablet-ui .tablet-widget-head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
}
body.tablet-ui .tablet-widget-avatar {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid #fff;
}
body.tablet-ui .tablet-widget small {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: rgba(255, 255, 255, 0.8);
}
body.tablet-ui .tablet-widget strong {
  display: block;
  font-size: 16px;
  font-weight: 600;
  line-height: 1.3;
  color: #fff;
  margin: 4px 0 2px;
}
body.tablet-ui .tablet-widget p {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.82);
  line-height: 1.45;
  margin: 0;
}
body.tablet-ui .tablet-widget-tags {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-top: 10px;
}
body.tablet-ui .tablet-widget-tag {
  font-size: 10px;
  font-weight: 600;
  padding: 3px 8px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.2);
  color: #fff;
}

/* iPad Apps Grid */
body.tablet-ui .tablet-main-grid-area {
  display: flex;
  flex-direction: column;
}
body.tablet-ui .tablet-home-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 28px 16px;
  align-content: start;
}
body.tablet-ui .tablet-app-icon {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 7px;
  min-width: 0;
  text-align: center;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  transition: transform 0.16s ease;
}
body.tablet-ui .tablet-app-icon:active {
  transform: scale(0.9);
}
body.tablet-ui .tablet-app-icon > span {
  width: 68px;
  height: 68px;
  display: grid;
  place-items: center;
  border-radius: 17px;
  background: #fff;
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.3);
  overflow: hidden;
}
body.tablet-ui .tablet-app-icon img {
  width: 68px;
  height: 68px;
  object-fit: cover;
}
body.tablet-ui .tablet-app-icon strong {
  max-width: 86px;
  color: #fff;
  font-size: 12px;
  line-height: 14px;
  font-weight: 500;
  text-shadow: 0 1px 5px rgba(0, 0, 0, 0.85);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
body.tablet-ui .tablet-search-pill {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 120px;
  height: 30px;
  margin: 32px auto 0;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.18);
  border: 1px solid rgba(255, 255, 255, 0.22);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  color: #fff;
  font-size: 12px;
  font-weight: 500;
}
body.tablet-ui .tablet-search-pill .symbol {
  width: 13px;
  height: 13px;
}

/* iPad Dock */
body.tablet-ui .tablet-dock-wrap {
  margin-top: auto;
  padding-top: 16px;
  transition: opacity 0.24s ease, filter 0.24s ease;
}
body.tablet-ui .tablet-dock {
  margin: 0 auto;
  width: fit-content;
  min-height: 84px;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 10px 18px;
  border-radius: 32px;
  background: rgba(255, 255, 255, 0.22);
  border: 1px solid rgba(255, 255, 255, 0.32);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.42), 0 18px 40px rgba(0, 0, 0, 0.35);
  backdrop-filter: blur(34px) saturate(160%);
  -webkit-backdrop-filter: blur(34px) saturate(160%);
}
body.tablet-ui .tablet-dock .tablet-app-icon strong {
  display: none;
}
body.tablet-ui .tablet-dock-divider {
  width: 1px;
  height: 42px;
  background: rgba(255, 255, 255, 0.3);
  margin: 0 4px;
}
body.tablet-ui .tablet-home-button {
  position: fixed;
  left: 50%;
  bottom: 8px;
  transform: translateX(-50%);
  z-index: 10050;
  display: block;
  width: 190px;
  height: 20px;
  background: none;
  border: 0;
  cursor: pointer;
}
body.tablet-ui.phone-app-open .tablet-home-button {
  pointer-events: auto;
}
body.tablet-ui .tablet-home-button::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 6px;
  height: 6px;
  border-radius: 999px;
  background: #fff;
  opacity: 0.94;
  box-shadow: 0 0 8px rgba(255, 255, 255, 0.5);
}

/* iPad Files App Experience */
body.tablet-ui .finder-window {
  left: 0 !important;
  top: 0 !important;
  width: 100vw !important;
  height: 100dvh !important;
  min-width: 0 !important;
  min-height: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  background: #f2f2f7 !important;
  color: #1d1d1f !important;
  display: flex;
  flex-direction: column !important;
  z-index: 9999;
}
body.tablet-ui .window-multitask-pill {
  position: absolute;
  left: 50%;
  top: 8px;
  transform: translateX(-50%);
  width: 48px;
  height: 18px;
  border-radius: 10px;
  background: rgba(0, 0, 0, 0.4);
  display: flex !important;
  align-items: center;
  justify-content: center;
  gap: 3.5px;
  z-index: 25;
}
body.tablet-ui .window-multitask-pill span {
  width: 3.5px;
  height: 3.5px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.8);
}
body.tablet-ui .finder-window .traffic-lights {
  display: none !important;
}
body.tablet-ui #finder-titlebar {
  height: 64px;
  min-height: 64px;
  padding: 18px 22px 8px;
  background: #f8f8fb;
  border-bottom: 1px solid #d1d1d6;
  display: flex !important;
  align-items: center;
}
body.tablet-ui .finder-sidebar-toggle {
  display: flex !important;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 8px;
  background: #ededf0;
  border: 0;
  color: #007aff;
  cursor: pointer;
  margin-right: 8px;
}
body.tablet-ui .finder-sidebar-toggle .symbol {
  width: 20px;
  height: 20px;
}
body.tablet-ui .finder-window .nav-toggles {
  display: flex !important;
  gap: 2px;
}
body.tablet-ui .finder-window .window-title {
  font-size: 17px;
  font-weight: 600;
  color: #1d1d1f;
  margin: 0 12px;
}
body.tablet-ui .finder-window .toolbar-search {
  width: 180px;
  height: 34px;
  background: #ededf0;
  border-radius: 10px;
  border: 0;
}
body.tablet-ui .finder-ipad-done {
  display: block !important;
  background: none;
  border: 0;
  color: #007aff;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  margin-left: 10px;
  padding: 6px 10px;
}
body.tablet-ui .finder-window .window-body {
  display: flex !important;
  flex: 1;
  min-height: 0;
  overflow: hidden;
  background: #f2f2f7;
}
body.tablet-ui .finder-sidebar {
  width: 260px !important;
  min-width: 260px !important;
  background: #ebebf0 !important;
  border-right: 1px solid #d1d1d6;
  padding: 16px 12px;
  overflow-y: auto;
  transition: margin-left 0.28s cubic-bezier(0.2, 0.9, 0.4, 1);
}
body.tablet-ui .finder-window.sidebar-collapsed .finder-sidebar {
  margin-left: -260px !important;
}
body.tablet-ui .finder-sidebar .sidebar-heading {
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  color: #6e6e73;
  margin: 16px 8px 6px;
  letter-spacing: 0.4px;
}
body.tablet-ui .finder-sidebar .sidebar-item {
  height: 38px;
  border-radius: 9px;
  padding: 0 10px;
  font-size: 14px;
  font-weight: 500;
  color: #1c1c1e;
  gap: 10px;
  margin-bottom: 2px;
}
body.tablet-ui .finder-sidebar .sidebar-item:hover {
  background: rgba(0, 0, 0, 0.05);
}
body.tablet-ui .finder-sidebar .sidebar-item.active {
  background: #007aff;
  color: #fff;
}
body.tablet-ui .finder-sidebar .sidebar-item.active span,
body.tablet-ui .finder-sidebar .sidebar-item.active .symbol {
  color: #fff !important;
}
body.tablet-ui .finder-main {
  flex: 1;
  display: flex;
  flex-direction: column;
  background: #fff;
}
body.tablet-ui .finder-content {
  flex: 1;
  overflow-y: auto;
  padding: 24px 30px;
}
body.tablet-ui .finder-grid {
  grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)) !important;
  gap: 28px 18px !important;
  padding: 8px 0;
}
body.tablet-ui .file-item {
  padding: 10px;
  border-radius: 12px;
}
body.tablet-ui .file-item:hover {
  background: rgba(0, 0, 0, 0.04);
}
body.tablet-ui .file-item.selected {
  background: #e5f0ff;
}
body.tablet-ui .file-icon {
  width: 64px;
  height: 64px;
}
body.tablet-ui .file-name {
  color: #1c1c1e;
  text-shadow: none;
  font-size: 13px;
  font-weight: 500;
  line-height: 1.3;
}
body.tablet-ui .finder-list {
  margin: 12px 0;
  background: #fff;
  border-radius: 14px;
  border: 1px solid #ededf0;
  overflow: hidden;
}
body.tablet-ui .finder-list-header {
  background: #f8f8fb;
  color: #6e6e73;
  border-bottom: 1px solid #ededf0;
}
body.tablet-ui .list-item {
  height: 48px;
  padding: 0 16px;
  color: #1c1c1e;
}
body.tablet-ui .list-item + .list-item {
  border-top: 1px solid #ededf0;
}
body.tablet-ui .finder-pathbar,
body.tablet-ui .finder-statusbar {
  display: none !important;
}

/* Other Apps on iPad */
body.tablet-ui .preview-window.portfolio-window,
body.tablet-ui .settings-window {
  left: 0 !important;
  top: 0 !important;
  width: 100vw !important;
  height: 100dvh !important;
  min-width: 0 !important;
  min-height: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}
body.tablet-ui .preview-done-btn,
body.tablet-ui .settings-done-btn {
  display: block !important;
  background: none;
  border: 0;
  color: #007aff;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  padding: 6px 12px;
}
body.tablet-ui .preview-window.portfolio-window #preview-titlebar {
  display: none;
}
body.tablet-ui .preview-window.portfolio-window #preview-content {
  height: 100dvh;
}
body.tablet-ui .preview-window.portfolio-window::after {
  content: '';
  position: absolute;
  left: 50%;
  bottom: 8px;
  transform: translateX(-50%);
  width: 190px;
  height: 6px;
  border-radius: 9px;
  background: #111;
  z-index: 20;
  pointer-events: none;
  opacity: 0.88;
}
body.tablet-ui .settings-window {
  background: #f2f2f7;
  color: #1d1d1f;
  --sidebar-w: 0px;
}
body.tablet-ui .settings-window .window-titlebar {
  height: 70px;
  min-height: 70px;
  padding: 24px 24px 8px;
  background: #f8f8fb;
  border-bottom: 1px solid #d7d7dc;
}
body.tablet-ui .settings-window .traffic-lights,
body.tablet-ui .settings-window #settings-back,
body.tablet-ui .settings-window .toolbar-btn[disabled] {
  display: none;
}
body.tablet-ui .settings-toolbar {
  width: 100%;
  padding: 0;
  justify-content: space-between;
}
body.tablet-ui .settings-toolbar strong {
  font-size: 18px;
}
body.tablet-ui .settings-window .window-body {
  display: block;
  overflow: hidden;
}
body.tablet-ui .settings-sidebar {
  display: none;
}
body.tablet-ui .settings-content {
  max-width: 780px;
  height: calc(100dvh - 70px);
  margin: 0 auto;
  padding: 24px 30px 48px;
  background: #f2f2f7;
  color: #1d1d1f;
}
body.tablet-ui .settings-group,
body.tablet-ui .settings-hero {
  background: #fff;
  border-color: rgba(0, 0, 0, 0.05);
}
body.tablet-ui .settings-row + .settings-row,
body.tablet-ui .portfolio-device-row + .portfolio-device-row {
  border-color: #ededf0;
}
body.tablet-ui .settings-subtitle,
body.tablet-ui .settings-row .row-value,
body.tablet-ui .portfolio-device-row small {
  color: #7b7b80;
}
/* ========================================================
   Desktop Monitor Framing for iPhone & iPad Previews
   ======================================================== */
@media (min-width: 601px) {
  body.phone-ui {
    display: flex;
    align-items: center;
    justify-content: center;
    background: #000;
    min-height: 100vh;
  }
  body.phone-ui .phone-shell {
    position: relative;
    width: 393px;
    height: 852px;
    max-height: calc(100vh - 40px);
    margin: auto;
    border-radius: 54px;
    box-shadow: 0 0 0 10px #1c1c1e, 0 0 0 13px #2c2c2e, 0 30px 80px rgba(0, 0, 0, 0.85);
    overflow: hidden;
  }
  body.phone-ui .lock-screen {
    width: 393px;
    height: 852px;
    max-height: calc(100vh - 40px);
    margin: auto;
    border-radius: 54px;
    box-shadow: 0 0 0 10px #1c1c1e, 0 0 0 13px #2c2c2e, 0 30px 80px rgba(0, 0, 0, 0.85);
    overflow: hidden;
    position: relative;
  }
  body.phone-ui .finder-window,
  body.phone-ui .preview-window.portfolio-window,
  body.phone-ui .settings-window {
    width: 393px !important;
    height: 852px !important;
    max-height: calc(100vh - 40px) !important;
    left: 50% !important;
    top: 50% !important;
    transform: translate(-50%, -50%) !important;
    border-radius: 54px !important;
    box-shadow: 0 0 0 10px #1c1c1e, 0 0 0 13px #2c2c2e, 0 30px 80px rgba(0, 0, 0, 0.85) !important;
    overflow: hidden !important;
  }
  body.phone-ui .phone-home-button {
    position: absolute;
    bottom: 8px;
  }
}

@media (min-width: 1025px) {
  body.tablet-ui {
    display: flex;
    align-items: center;
    justify-content: center;
    background: #050509;
    min-height: 100vh;
  }
  body.tablet-ui .tablet-shell {
    position: relative;
    width: 1080px;
    height: 760px;
    max-width: calc(100vw - 40px);
    max-height: calc(100vh - 40px);
    margin: auto;
    border-radius: 36px;
    box-shadow: 0 0 0 10px #1c1c1e, 0 0 0 13px #2c2c2e, 0 30px 80px rgba(0, 0, 0, 0.85);
    overflow: hidden;
  }
  body.tablet-ui .lock-screen {
    width: 1080px;
    height: 760px;
    max-width: calc(100vw - 40px);
    max-height: calc(100vh - 40px);
    margin: auto;
    border-radius: 36px;
    box-shadow: 0 0 0 10px #1c1c1e, 0 0 0 13px #2c2c2e, 0 30px 80px rgba(0, 0, 0, 0.85);
    overflow: hidden;
    position: relative;
  }
  body.tablet-ui .finder-window,
  body.tablet-ui .preview-window.portfolio-window,
  body.tablet-ui .settings-window {
    width: 1080px !important;
    height: 760px !important;
    max-width: calc(100vw - 40px) !important;
    max-height: calc(100vh - 40px) !important;
    left: 50% !important;
    top: 50% !important;
    transform: translate(-50%, -50%) !important;
    border-radius: 36px !important;
    box-shadow: 0 0 0 10px #1c1c1e, 0 0 0 13px #2c2c2e, 0 30px 80px rgba(0, 0, 0, 0.85) !important;
    overflow: hidden !important;
  }
  body.tablet-ui .tablet-home-button {
    position: absolute;
    bottom: 8px;
  }
}

@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; } }