
#settings-app.tk-settings-app {
  --ios-blue:#0a84ff;
  --ios-green: #34c759;
  --set-bg: #000;
  --set-sidebar: rgba(24,24,28,.90);
  --set-card: rgba(28,28,30,.88);
  --set-foreground: #f5f5f7;
  --set-muted: #98989d;
  --set-line: rgba(255,255,255,.10);
  --set-soft: rgba(255,255,255,.05);
  background: var(--set-bg);
  color: var(--set-foreground);
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", "Segoe UI", Arial, sans-serif;
  letter-spacing: -.02em;
}
#settings-app[data-mode="light"] {
  --set-bg: #f2f2f7;
  --set-sidebar: rgba(242,242,247,.92);
  --set-card: rgba(255,255,255,.88);
  --set-foreground: #111114;
  --set-muted: #6e6e73;
  --set-line: rgba(0,0,0,.11);
  --set-soft: rgba(0,0,0,.04);
}

#settings-app .tk-settings-shell {
  position: absolute; inset: 36px 0 0;
  display: grid; grid-template-columns: 29% minmax(0,1fr);
  min-height: 0; overflow: hidden;
}
#settings-app .tk-settings-sidebar {
  min-width: 0; padding: 18px 14px 14px;
  display: flex; flex-direction: column;
  background: var(--set-sidebar);
  backdrop-filter: blur(22px); -webkit-backdrop-filter: blur(22px);
  border-right: 1px solid var(--set-line);
  overflow-y: auto;
}
#settings-app .tk-settings-side-top { display:block; }
#settings-app .tk-settings-search {
  display:flex; align-items:center; gap:10px; height:46px; padding:0 16px;
  margin: 0 4px 16px; border-radius: 23px; border: 1px solid rgba(255,255,255,.12);
  background: linear-gradient(180deg, rgba(255,255,255,.12), rgba(255,255,255,.06));
  color: var(--set-muted); box-shadow: inset 0 1px 0 rgba(255,255,255,.04);
}
#settings-app[data-mode="light"] .tk-settings-search { background: rgba(118,118,128,.12); border-color: rgba(0,0,0,.08); }
#settings-app .tk-settings-search input { width:100%; border:0; background:transparent; color:var(--set-foreground); font:inherit; font-size:16px; outline:none; }
#settings-app .tk-settings-search input::placeholder { color:#a1a1aa; }
#settings-app .tk-settings-profile {
  width:100%; margin: 0 0 16px; padding: 10px 10px 12px 12px;
  display:flex; align-items:center; gap:14px; text-align:left;
  border:0; border-radius: 16px; background: rgba(255,255,255,.04); color: var(--set-foreground); cursor:pointer;
}
#settings-app .tk-settings-avatar { width:52px; height:52px; border-radius:50%; background:#848692; color:white; display:grid; place-items:center; font-size:17px; font-weight:700; }
#settings-app .tk-settings-profile strong { display:block; font-size:19px; font-weight:700; line-height:1.15; }
#settings-app .tk-settings-profile small { display:block; margin-top:5px; color:var(--set-muted); font-size:12px; line-height:1.35; }
#settings-app .tk-settings-profile-chevron { margin-left:auto; font-size:24px; color:var(--set-muted); opacity:.75; }
#settings-app .tk-settings-nav-group { display:flex; flex-direction:column; gap:14px; padding:0 2px 10px; }
#settings-app .tk-settings-nav-cluster { display:flex; flex-direction:column; gap:3px; }
#settings-app .tk-settings-nav-item {
  width:100%; min-height: 52px; padding: 8px 12px; border: 0; border-radius: 12px; background: transparent;
  display:flex; align-items:center; gap:12px; text-align:left; color:var(--set-foreground); cursor:pointer;
  font-size:16px; font-weight:510; line-height:1.28;
}
#settings-app .tk-settings-nav-item:hover { background: var(--set-soft); }
#settings-app .tk-settings-nav-item.selected { background: linear-gradient(180deg, #2f95ff, #0a84ff); color: white; box-shadow: inset 0 0 0 1px rgba(255,255,255,.18); }
#settings-app .tk-settings-nav-icon { width:34px; height:34px; border-radius:10px; display:grid; place-items:center; color:white; flex:none; }
#settings-app .i-airplane{background:#ff9f0a} #settings-app .i-network{background:#0a84ff} #settings-app .i-battery{background:#30d158}
#settings-app .i-general{background:#8e8e93} #settings-app .i-controls{background:#34c759} #settings-app .i-accessibility{background:#0a84ff}
#settings-app .i-appearance{background:#0a84ff} #settings-app .i-wallpaper{background:#64d2ff} #settings-app .i-homescreen{background:#5e5ce6}
#settings-app .i-notifications{background:#ff453a} #settings-app .i-privacy{background:#0a84ff} #settings-app .i-flight{background:#ff9f0a}
#settings-app .i-simconnections{background:#40c8e0} #settings-app .i-language{background:#5e5ce6} #settings-app .i-icons{background:#af52de} #settings-app .i-about{background:#8e8e93}
#settings-app .tk-settings-nav-trail { margin-left:auto; color: var(--set-muted); font-size: 13px; }
#settings-app .tk-settings-nav-item.selected .tk-settings-nav-trail { color: rgba(255,255,255,.88); }
#settings-app .tk-settings-label { flex:1; }
#settings-app .tk-settings-detail {
  min-width:0; min-height:0; overflow-y:auto; overflow-x:hidden;
  padding: 24px clamp(24px, 4cqw, 68px) 65px;
  background: var(--set-bg);
}
#settings-app .tk-settings-detail-header { max-width: 760px; margin: 0 auto 22px; text-align:center; }
#settings-app .tk-settings-detail-header h2 { margin:0; font-size: 21px; font-weight: 700; letter-spacing: -.03em; }
#settings-app .tk-settings-detail-header p, #settings-app .tk-settings-eyebrow { display:none; }
#settings-app .tk-settings-panel { max-width: 760px; margin: 0 auto; }
#settings-app .tk-settings-compact-header { margin: 4px 0 14px; text-align:center; }
#settings-app .tk-settings-compact-header h3 { margin:0; font-size: 18px; font-weight:700; }
#settings-app .tk-settings-hero { margin:0 0 24px; padding: 24px; border-radius: 24px; background: var(--set-card); border: 1px solid var(--set-line); backdrop-filter: blur(var(--tk-settings-blur, 18px)); -webkit-backdrop-filter: blur(var(--tk-settings-blur, 18px)); }
#settings-app .tk-settings-hero-icon { display:grid; place-items:center; width:56px; height:56px; border-radius:16px; color:white; margin-bottom:14px; }
#settings-app .tk-settings-hero h3 { margin:0 0 8px; font-size: 28px; font-weight:700; }
#settings-app .tk-settings-hero p { margin:0; color:var(--set-muted); font-size: 16px; line-height:1.45; }
#settings-app .tk-settings-card {
  background: var(--set-card); border: 1px solid var(--set-line); border-radius: 24px; overflow:hidden;
  backdrop-filter: blur(var(--tk-settings-blur,18px)); -webkit-backdrop-filter: blur(var(--tk-settings-blur,18px));
}
#settings-app .tk-settings-group-gap { margin-top: 22px; }
#settings-app .tk-settings-row {
  min-height: 62px; padding: 12px 20px; display:flex; align-items:center; justify-content:space-between; gap:16px;
  color: var(--set-foreground); font-size: 18px; font-weight: 430; line-height:1.25; border-bottom: 1px solid var(--set-line); background: transparent;
}
#settings-app .tk-settings-row:last-child { border-bottom: 0; }
#settings-app label.tk-settings-row, #settings-app button.tk-settings-row { width:100%; border:0; cursor:pointer; text-align:left; }
#settings-app button.tk-settings-row:hover { background: var(--set-soft); }
#settings-app .tk-settings-trailing, #settings-app .tk-settings-row small { color:var(--set-muted); font-size:16px; font-weight:400; }
#settings-app .tk-settings-row-end { display:inline-flex; align-items:center; gap:12px; margin-left:auto; }
#settings-app .tk-settings-badge { display:inline-grid; place-items:center; width:24px; height:24px; border-radius:999px; background:#ff453a; color:white; font-size:13px; font-weight:700; }
#settings-app .tk-settings-chevron { font-size: 28px; font-weight: 300; color: #b0b0b8; }
#settings-app .tk-settings-section-label { margin: 24px 0 10px 16px; color: var(--set-muted); font-size: 12px; font-weight: 700; letter-spacing: .06em; }
#settings-app .tk-settings-note { margin: 11px 16px 22px; color: var(--set-muted); font-size: 13px; line-height: 1.55; }
#settings-app .tk-settings-secondary, #settings-app .tk-settings-primary, #settings-app .tk-icon-apply-button {
  border-radius: 12px; padding: 11px 16px; font-family: inherit; font-size: 13px; font-weight: 650; cursor:pointer;
}
#settings-app .tk-settings-primary, #settings-app .tk-icon-apply-button { background: var(--ios-blue); color: white; border:0; }
#settings-app .tk-settings-secondary { background: rgba(10,132,255,.12); color: var(--ios-blue); border: 1px solid rgba(10,132,255,.25); }
#settings-app .tk-settings-choice-grid { display:grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 14px; }
#settings-app .tk-settings-choice-grid-two { grid-template-columns: repeat(2, minmax(0,1fr)); }
#settings-app .tk-settings-appearance-box { padding: 20px; }
#settings-app .tk-settings-box-title { margin: 0 0 16px; color: var(--set-muted); font-size: 13px; font-weight: 650; }
#settings-app .tk-settings-mode {
  position:relative; border: 2px solid var(--set-line); border-radius: 18px; background: rgba(255,255,255,.03); color: var(--set-foreground);
  padding: 14px; display:flex; flex-direction:column; align-items:center; gap:10px; font-size: 14px; font-weight:600; cursor:pointer;
}
#settings-app .tk-settings-mode[data-selected="true"] { border-color: var(--ios-blue); box-shadow: inset 0 0 0 1px var(--ios-blue); }
#settings-app .tk-settings-mode-preview {
  width: 138px; max-width: 100%; height: 185px; border-radius: 20px; position: relative; overflow:hidden;
  display:flex; flex-direction:column; gap:14px; justify-content:center; padding: 22px 18px;
}
#settings-app .tk-settings-mode-preview i { display:block; height: 28px; border-radius: 7px; background: rgba(255,255,255,.34); }
#settings-app .tk-settings-mode-preview i:first-of-type { margin-top: 18px; }
#settings-app .tk-settings-mode-preview em { position:absolute; top:22px; left:0; right:0; text-align:center; font-style:normal; font-size:20px; font-weight:700; color:white; }
#settings-app .dark-preview { background: linear-gradient(180deg, #0a2f6f 0%, #0a7385 100%); }
#settings-app .light-preview { background: linear-gradient(180deg, #cfe9ff 0%, #63a4ff 100%); }
#settings-app .light-preview em { color: white; }
#settings-app .system-preview { background: linear-gradient(90deg, #273e70 0 50%, #d6eaff 50% 100%); }
#settings-app .tk-settings-mode-system { grid-column: 1 / -1; max-width: 230px; justify-self:center; }
#settings-app .tk-settings-range-wrap { display:flex; align-items:center; gap:12px; width: 56%; min-width: 220px; }
#settings-app .tk-settings-glyph { color: var(--set-muted); font-size: 18px; line-height:1; }
#settings-app .tk-settings-glyph-large { font-size: 24px; }
#settings-app input[type="range"] { width:100%; accent-color: var(--ios-blue); }
#settings-app .tk-settings-segment-row { align-items:center; }
#settings-app .tk-settings-segmented { display:inline-flex; align-items:center; gap:8px; padding: 6px; background: rgba(10,132,255,.10); border-radius: 15px; }
#settings-app .tk-settings-segmented button {
  min-width: 110px; padding: 9px 14px; border-radius: 12px; border: 1px solid transparent; background: transparent; color: var(--set-muted);
  font: inherit; font-size: 14px; font-weight: 600; cursor:pointer;
}
#settings-app .tk-settings-segmented button[data-selected="true"] { background: rgba(10,132,255,.22); border-color: rgba(10,132,255,.45); color: var(--ios-blue); }
#settings-app .tk-settings-switch { appearance:none; -webkit-appearance:none; width:56px; height:32px; border-radius:999px; background:#3a3a3f; position:relative; cursor:pointer; flex:none; }
#settings-app .tk-settings-switch::after { content:""; position:absolute; top:2px; left:2px; width:28px; height:28px; border-radius:50%; background:#fff; box-shadow:0 1px 3px rgba(0,0,0,.3); transition: transform .2s ease; }
#settings-app .tk-settings-switch:checked { background: var(--ios-green); }
#settings-app .tk-settings-switch:checked::after { transform: translateX(24px); }
#settings-app .tk-settings-row select {
  border: 1px solid var(--set-line); border-radius: 10px; background: rgba(255,255,255,.03); color: var(--set-muted);
  padding: 8px 12px; font: inherit; font-size: 15px; text-align:right; max-width: 52%;
}
#settings-app .tk-settings-color-options { display:flex; gap:18px; padding: 20px; flex-wrap:wrap; }
#settings-app .tk-settings-color-options button { display:flex; flex-direction:column; align-items:center; gap:8px; border:0; background:transparent; color:var(--set-muted); cursor:pointer; }
#settings-app .tk-settings-color-options button > span { width:38px; height:38px; border-radius:50%; background: var(--swatch); box-shadow: inset 0 0 0 2px rgba(255,255,255,.18); }
#settings-app .tk-settings-color-options button[data-selected="true"] > span { box-shadow: 0 0 0 3px var(--ios-blue), inset 0 0 0 2px rgba(255,255,255,.18); }
#settings-app .tk-settings-color-options small { font-size:12px; }
#settings-app .tk-settings-apply-bar { display:flex; align-items:center; justify-content:space-between; gap:14px; margin-top: 16px; }
#settings-app .tk-settings-apply-bar .tk-settings-note { margin:0; }
#settings-app .tk-wallpaper-gallery { display:grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 14px; }
#settings-app .tk-wallpaper-card { border:2px solid transparent; border-radius: 18px; padding:8px; background: var(--set-card); color: var(--set-foreground); cursor:pointer; }
#settings-app .tk-wallpaper-card img { width:100%; aspect-ratio:1.35; object-fit:cover; border-radius:12px; display:block; }
#settings-app .tk-wallpaper-card .tk-wallpaper-name { display:block; margin-top:8px; text-align:center; font-size:13px; }
#settings-app .tk-wallpaper-card[data-selected="true"] { border-color: var(--ios-blue); }
#settings-app .tk-wallpaper-check { display:none; }
#settings-app .tk-wallpaper-preview { min-height: 320px; border-radius: 24px; border: 1px solid var(--set-line); overflow:hidden; position:relative; }
#settings-app .icon-theme-options { display:grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 16px; }
#settings-app .icon-theme-option { background: var(--set-card); border: 1px solid var(--set-line); border-radius: 18px; }
#settings-app .icon-theme-option.selected { border-color: var(--ios-blue); }
#settings-app .tk-settings-about-brand { display:flex; flex-direction:column; align-items:center; gap:10px; padding: 30px 20px; }
#settings-app .tk-settings-about-brand img { width:68px; height:68px; object-fit:contain; }
#settings-app .tk-settings-about-brand h3 { margin:0; font-size:24px; }
#settings-app .tk-settings-toast { position: sticky; bottom: 18px; width: fit-content; margin: 24px auto 0; padding: 10px 16px; background: rgba(10,132,255,.92); color: white; border-radius: 14px; font-size: 13px; }
#settings-app .tk-settings-exit { margin: 10px 6px 0; border:0; background:transparent; color: var(--ios-blue); font-size: 13px; text-align:left; cursor:pointer; }
#settings-app .tk-settings-nav-item:focus-visible,
#settings-app button:focus-visible,
#settings-app select:focus-visible,
#settings-app input:focus-visible { outline: 2px solid var(--ios-blue); outline-offset: 2px; }
#settings-app[data-smudges="true"] .tk-settings-detail::before,
#settings-app[data-smudges="true"] .tk-settings-detail::after {
  content:""; position:absolute; pointer-events:none; opacity:.18; mix-blend-mode:screen;
}
#settings-app .tk-settings-detail { position:relative; }
#settings-app[data-smudges="true"] .tk-settings-detail::before {
  width:240px; height:240px; left: 40px; top: 120px;
  background: radial-gradient(circle at 30% 30%, rgba(255,255,255,.14), rgba(255,255,255,0) 55%), radial-gradient(circle at 72% 58%, rgba(255,255,255,.09), rgba(255,255,255,0) 52%);
  filter: blur(10px);
}
#settings-app[data-smudges="true"] .tk-settings-detail::after {
  width:220px; height:220px; right: 48px; bottom: 48px;
  background: radial-gradient(circle at 55% 40%, rgba(255,255,255,.12), rgba(255,255,255,0) 55%);
  filter: blur(14px);
}
#settings-app[data-compact="true"] .tk-settings-row { min-height: 52px; padding-top: 9px; padding-bottom:9px; }
#settings-app[data-compact="true"] .tk-settings-hero { padding: 18px 20px; }
@container display (max-width: 1120px) {
  #settings-app .tk-settings-shell { grid-template-columns: 31% minmax(0,1fr); }
  #settings-app .tk-settings-detail { padding: 20px 30px 80px; }
  #settings-app .tk-settings-nav-item { min-height: 46px; font-size:14px; }
  #settings-app .tk-settings-nav-icon { width:30px; height:30px; }
  #settings-app .tk-settings-row { font-size:16px; min-height:56px; }
  #settings-app .tk-settings-mode-preview { height: 150px; }
}
@container display (max-width: 820px) {
  #settings-app .tk-settings-shell { grid-template-columns: 33% minmax(0,1fr); }
  #settings-app .tk-settings-sidebar { padding: 12px 8px; }
  #settings-app .tk-settings-detail { padding: 16px 18px 68px; }
  #settings-app .tk-settings-row { font-size: 13px; min-height: 48px; padding: 8px 11px; }
  #settings-app .tk-settings-trailing, #settings-app .tk-settings-row small, #settings-app .tk-settings-row select { font-size: 11px; }
  #settings-app .tk-settings-nav-trail { display:none; }
  #settings-app .tk-settings-choice-grid, #settings-app .tk-settings-wallpaper-gallery { grid-template-columns: repeat(2, minmax(0,1fr)); }
  #settings-app .tk-settings-mode-system { grid-column: auto; max-width:none; }
  #settings-app .tk-settings-mode-preview { height: 120px; }
}
@container display (max-width: 560px) {
  #settings-app .tk-settings-shell { grid-template-columns: 1fr; grid-template-rows: auto minmax(0,1fr); }
  #settings-app .tk-settings-sidebar { border-right:0; border-bottom:1px solid var(--set-line); }
  #settings-app .tk-settings-nav-group { overflow-x:auto; flex-direction:row; gap:6px; }
  #settings-app .tk-settings-nav-cluster { flex-direction:row; gap:4px; }
  #settings-app .tk-settings-nav-item { width:auto; min-height:42px; white-space:nowrap; }
  #settings-app .tk-settings-label { white-space:nowrap; }
  #settings-app .tk-settings-search, #settings-app .tk-settings-profile { display:none; }
}
