/* iOS Base — стили компонентов. Значения берутся из tokens.css. */
*{box-sizing:border-box}
body{margin:0;background:var(--bg-grouped);color:var(--label);font-family:var(--font-sans)}
button,input{font:inherit;color:inherit}
svg.ios-i{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;flex:none}

.ios-stage{padding:var(--space-4);display:flex;flex-wrap:wrap;gap:var(--space-6);align-items:flex-start}
.ios-phone{width:var(--screen-width);max-width:100%;background:var(--bg);border-radius:var(--radius-xl);overflow:hidden;position:relative}
.ios-phone--grouped{background:var(--bg-grouped)}
.ios-pad{padding:var(--space-4)}
.ios-stack{display:grid;gap:var(--space-3)}
.ios-cap{color:var(--label-secondary);margin:0 0 var(--space-2)}

/* Button */
.ios-btn{display:flex;align-items:center;justify-content:center;gap:var(--space-2);width:100%;min-height:var(--cta-height);padding:0 var(--space-5);border:0;border-radius:var(--radius-md);background:var(--accent);color:var(--on-accent);cursor:pointer}
.ios-btn--tinted{background:var(--accent-tint);color:var(--accent)}
.ios-btn--plain{background:transparent;color:var(--accent)}
.ios-btn--danger{background:var(--danger);color:var(--on-danger)}
.ios-btn--sm{min-height:var(--touch-target);width:auto}
.ios-btn.is-pressed{filter:brightness(.88)}
.ios-btn.is-disabled,.ios-btn[disabled]{opacity:.4;cursor:default}
.ios-btn:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

/* TextField */
.ios-field{display:grid;gap:var(--space-1)}
.ios-field__label{color:var(--label-secondary)}
.ios-input{width:100%;min-height:var(--cta-height);padding:0 var(--space-4);border:1px solid var(--border-control);border-radius:var(--radius-md);background:var(--surface);color:var(--label)}
.ios-input::placeholder{color:var(--label-tertiary)}
.ios-input.is-focus,.ios-input:focus{outline:2px solid var(--accent);outline-offset:0;border-color:var(--accent)}
.ios-input.is-error{border-color:var(--danger)}
.ios-field__msg{display:flex;align-items:center;gap:var(--space-1);color:var(--label-secondary)}
.ios-field__msg.is-error{color:var(--danger)}
.ios-field__msg svg{width:16px;height:16px}

/* Liquid Glass: только слой навигации (таб-бар, кнопки навбара) */
.ios-phone,.ios-dev{--edge:var(--bg)}
.ios-phone--grouped{--edge:var(--bg-grouped)}
.ios-tabbar,.ios-tabbar__search,.ios-navbar__back,.ios-navbar__action,.ios-navbar__group{background:var(--glass);border:.5px solid var(--glass-border);box-shadow:var(--shadow-glass);-webkit-backdrop-filter:blur(var(--glass-blur)) saturate(180%);backdrop-filter:blur(var(--glass-blur)) saturate(180%)}
@media (prefers-reduced-transparency:reduce){.ios-tabbar,.ios-tabbar__search,.ios-navbar__back,.ios-navbar__action,.ios-navbar__group{background:var(--surface-elevated);-webkit-backdrop-filter:none;backdrop-filter:none}}

/* Status bar, NavigationBar */
.ios-status{height:var(--safe-top);display:flex;align-items:flex-end;justify-content:space-between;padding:0 var(--space-8) var(--space-2);color:var(--label);background:var(--edge,var(--bg))}
.ios-navbar{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:var(--space-2);min-height:var(--nav-bar);padding:0 var(--screen-margin) var(--space-3);color:var(--label);background:linear-gradient(to bottom,var(--edge,var(--bg)) 45%,transparent)}
.ios-navbar--float{position:absolute;left:0;right:0;top:var(--safe-top);z-index:2}
.ios-navbar__back,.ios-navbar__action{display:inline-flex;align-items:center;justify-content:center;min-width:var(--touch-target);height:var(--touch-target);border-radius:var(--radius-pill);color:var(--label);cursor:pointer}
.ios-navbar__back{justify-self:start}
.ios-navbar__action{justify-self:end}
.ios-navbar__action--text{position:relative;height:34px;padding:0 14px;font-size:15px;line-height:20px;font-weight:500}
.ios-navbar__action--text::after{content:"";position:absolute;left:0;right:0;top:-5px;bottom:-5px}
.ios-navbar__action--prominent{background:var(--accent);color:var(--on-accent);border-color:transparent;box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none}
.ios-navbar__group{justify-self:end;display:inline-flex;height:var(--touch-target);border-radius:var(--radius-pill);color:var(--label)}
.ios-navbar__group > *{width:var(--touch-target);height:100%;display:grid;place-items:center;cursor:pointer}
.ios-large-title{padding:var(--space-1) var(--space-4) var(--space-3)}

/* TabBar: плавающая стеклянная капсула */
.ios-tabbar-wrap{position:relative;display:flex;align-items:center;gap:var(--space-2);padding:var(--space-8) var(--tab-bar-inset) var(--tab-bar-inset);background:linear-gradient(to top,var(--edge,var(--bg)) 40%,transparent);pointer-events:none}
.ios-tabbar-wrap > *{pointer-events:auto}
.ios-tabbar-wrap--float{position:absolute;left:0;right:0;bottom:0;z-index:2}
.ios-tabbar{flex:1;min-width:0;display:flex;height:var(--tab-bar);padding:var(--space-1);border-radius:var(--radius-pill)}
.ios-tab{flex:1;min-width:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;border-radius:var(--radius-pill);color:var(--label);cursor:pointer}
.ios-tab.is-active{background:var(--glass-selected);color:var(--accent);font-weight:600}
.ios-tab svg.ios-i{width:24px;height:24px}
.ios-tabbar__search{flex:none;width:var(--tab-bar);height:var(--tab-bar);border-radius:var(--radius-pill);display:grid;place-items:center;color:var(--label);cursor:pointer}
.ios-scroll--tabbar{padding-bottom:calc(var(--tab-bar) + var(--tab-bar-inset) + var(--space-4))}
.ios-home{position:absolute;left:50%;bottom:var(--space-2);width:134px;height:5px;margin-left:-67px;border-radius:var(--radius-pill);background:var(--label)}

/* SegmentedControl */
.ios-seg{display:flex;padding:2px;background:var(--fill-track);border-radius:var(--radius-sm)}
.ios-seg__item{flex:1;min-height:32px;display:flex;align-items:center;justify-content:center;border-radius:6px;color:var(--label)}
.ios-seg__item.is-active{background:var(--fill-selected);box-shadow:var(--shadow-card);font-weight:600}

/* ListRow */
.ios-list{background:var(--surface);border-radius:var(--radius-md);overflow:hidden}
.ios-row{display:flex;align-items:center;gap:var(--space-3);min-height:var(--touch-target);padding:var(--space-3) var(--space-4);position:relative;color:var(--label)}
.ios-row + .ios-row::before{content:"";position:absolute;top:0;left:var(--space-4);right:0;border-top:.5px solid var(--separator)}
.ios-row__tile{width:30px;height:30px;border-radius:var(--radius-sm);background:var(--accent-tint);color:var(--accent);display:grid;place-items:center;flex:none}
.ios-row__tile svg.ios-i{width:18px;height:18px}
.ios-row__main{flex:1;min-width:0}
.ios-row__sub{color:var(--label-secondary)}
.ios-row__value{color:var(--label-secondary)}
.ios-chev{width:14px;height:14px;color:var(--label-tertiary);stroke-width:2.2}
.ios-switch{width:51px;height:31px;border-radius:var(--radius-pill);background:var(--border-control);position:relative;flex:none}
.ios-switch::after{content:"";position:absolute;top:2px;left:2px;width:27px;height:27px;border-radius:var(--radius-pill);background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.3)}
.ios-switch.is-on{background:var(--accent)}
.ios-switch.is-on::after{left:22px}
.ios-section-title{color:var(--label-secondary);padding:0 var(--space-4) var(--space-2);text-transform:none}

/* EmptyState */
.ios-empty{display:grid;justify-items:center;text-align:center;gap:var(--space-3);padding:var(--space-10) var(--space-8)}
.ios-empty__mark{width:72px;height:72px;border-radius:var(--radius-pill);background:var(--accent-tint);color:var(--accent);display:grid;place-items:center;margin-bottom:var(--space-2)}
.ios-empty__mark svg.ios-i{width:32px;height:32px}
.ios-empty__text{color:var(--label-secondary);margin:0}
.ios-empty__actions{display:grid;gap:var(--space-2);width:100%;margin-top:var(--space-4)}

/* Skeleton */
.ios-skel-group{display:grid;gap:var(--space-3)}
.ios-skel{display:block;background:var(--skeleton);border-radius:var(--radius-sm);position:relative;overflow:hidden;flex:none}
.ios-skel--text{height:12px;margin:5px 0;border-radius:var(--radius-pill)}
.ios-skel--text-sm{height:10px;margin:5px 0;border-radius:var(--radius-pill)}
.ios-skel-lines{display:flex;flex-direction:column;min-width:0}
.ios-skel--circle{border-radius:var(--radius-pill)}
.ios-skel--media{border-radius:var(--radius-lg);aspect-ratio:16/9;width:100%}
.ios-skel-group.is-shimmer .ios-skel::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,transparent,var(--skeleton-highlight),transparent);transform:translateX(-100%);animation:ios-skel-shimmer 1.2s linear infinite}
.ios-skel-group.is-pulse .ios-skel{animation:ios-skel-pulse .6s ease-in-out infinite alternate}
@keyframes ios-skel-shimmer{to{transform:translateX(100%)}}
@keyframes ios-skel-pulse{to{opacity:.5}}
@media (prefers-reduced-motion:reduce){.ios-skel-group .ios-skel,.ios-skel-group .ios-skel::after{animation:none}}

/* BottomSheet, chips */
.ios-sheet-demo{position:relative;height:560px;background:var(--bg-grouped);overflow:hidden;border-radius:var(--radius-xl)}
.ios-scrim{position:absolute;inset:0;background:var(--scrim)}
.ios-sheet{position:absolute;left:0;right:0;bottom:0;background:var(--surface-elevated);border-radius:var(--radius-xl) var(--radius-xl) 0 0;box-shadow:var(--shadow-sheet);padding:var(--space-2) var(--space-4) var(--safe-bottom);color:var(--label)}
.ios-grabber{width:36px;height:5px;border-radius:var(--radius-pill);background:var(--label-tertiary);margin:0 auto var(--space-4)}
.ios-chips{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-2);margin:var(--space-4) 0 var(--space-5)}
.ios-chip{min-height:var(--touch-target);display:flex;align-items:center;justify-content:center;border-radius:var(--radius-md);background:var(--fill-track);color:var(--label)}
.ios-chip.is-active{background:var(--accent);color:var(--on-accent);font-weight:600}
.ios-chip.is-disabled{color:var(--label-tertiary);text-decoration:line-through}

/* DeviceFrame */
.ios-dev{width:var(--screen-width);height:var(--screen-height);position:relative;background:var(--bg);border-radius:48px;overflow:hidden;transform:scale(.6);transform-origin:top left}
.ios-dev__box{position:absolute;left:0;right:0;display:flex;align-items:center;justify-content:center;color:var(--label)}
.ios-dev__box--zone{background:var(--accent-tint);color:var(--accent);font-weight:600}
.ios-dev__wrap{width:calc(var(--screen-width) * .6);height:calc(var(--screen-height) * .6);flex:none;border-radius:29px;border:1px solid var(--separator);overflow:hidden}
.ios-legend{display:grid;gap:var(--space-2);align-content:start;max-width:360px}
.ios-legend div{display:flex;justify-content:space-between;gap:var(--space-4);padding:var(--space-2) 0;border-bottom:.5px solid var(--separator)}
.ios-legend span:last-child{color:var(--label-secondary)}