/* Makplay Settings — calm liquid-glass surfaces with tactile controls. */
.settings-view { display:grid; gap:15px; padding:14px 0 34px; min-width:0; animation:settings-page-in .42s cubic-bezier(.2,.75,.25,1) both; }
.settings-hero {
  position:relative; display:grid; grid-template-columns:58px minmax(0,1fr); align-items:center; gap:15px;
  min-width:0; min-height:150px; padding:23px 20px; overflow:hidden; isolation:isolate; border-radius:29px;
  background:radial-gradient(ellipse at 82% 6%,rgba(135,158,255,.23),transparent 42%),radial-gradient(ellipse at 0% 100%,rgba(109,255,202,.095),transparent 48%),linear-gradient(145deg,rgba(255,255,255,.105),rgba(255,255,255,.018)),var(--glass);
}
.settings-hero::before { content:""; position:absolute; z-index:-1; width:210px; height:210px; right:-110px; top:-115px; border-radius:50%; border:1px solid rgba(255,255,255,.11); box-shadow:0 0 0 19px rgba(255,255,255,.025),0 0 0 42px rgba(255,255,255,.018); }
.settings-hero::after { content:""; position:absolute; z-index:-1; inset:-70% -35%; pointer-events:none; background:linear-gradient(105deg,transparent 38%,rgba(255,255,255,.05) 48%,transparent 58%); transform:translateX(-16%) rotate(-9deg); animation:settings-glass-sweep 13s ease-in-out infinite; }
.settings-hero-mark { position:relative; display:flex; align-items:center; justify-content:center; gap:4px; width:58px; height:58px; border:1px solid rgba(255,255,255,.28); border-radius:20px; background:linear-gradient(145deg,rgba(255,255,255,.26),rgba(255,255,255,.06)),linear-gradient(135deg,rgba(126,151,255,.48),rgba(74,224,193,.2)); box-shadow:inset 0 1px rgba(255,255,255,.38),0 12px 28px rgba(0,0,0,.2),0 0 34px rgba(117,145,255,.12); backdrop-filter:blur(20px) saturate(150%); -webkit-backdrop-filter:blur(20px) saturate(150%); animation:settings-icon-float 5s ease-in-out infinite; }
.settings-hero-mark span { width:4px; height:17px; border-radius:99px; background:var(--text); box-shadow:0 0 10px rgba(255,255,255,.19); }
.settings-hero-mark span:nth-child(2) { height:29px; } .settings-hero-mark span:nth-child(3) { height:11px; }
.settings-hero-copy { min-width:0; position:relative; z-index:1; }
.settings-hero-copy .eyebrow { color:var(--good); font-size:9px; }
.settings-hero-copy h2 { display:flex; align-items:center; gap:8px; margin:5px 0 0; font-size:clamp(27px,6.5vw,36px); line-height:1.03; letter-spacing:-.055em; }
.settings-hero-copy h2 span { color:var(--good); font-size:.55em; text-shadow:0 0 20px rgba(109,255,202,.4); }
.settings-hero-copy p { margin:9px 0 0; color:var(--muted); font-size:12px; line-height:1.5; max-width:34ch; }
.settings-live-orb { position:absolute; z-index:-1; width:74px; height:74px; right:22px; bottom:-34px; border:1px solid rgba(255,255,255,.13); border-radius:50%; background:radial-gradient(circle at 35% 25%,rgba(255,255,255,.3),rgba(130,154,255,.15) 40%,rgba(109,255,202,.08) 68%,transparent 72%); box-shadow:0 0 38px rgba(122,155,255,.16),inset 0 1px rgba(255,255,255,.28); }
.settings-card { position:relative; min-width:0; padding:19px; border-radius:25px; overflow:hidden; background:radial-gradient(ellipse at 100% 0%,rgba(255,255,255,.045),transparent 45%),linear-gradient(145deg,rgba(255,255,255,.085),rgba(255,255,255,.018)),var(--glass); animation:settings-card-in .44s cubic-bezier(.2,.75,.25,1) both; }
.settings-card:nth-of-type(2) { animation-delay:.035s; } .settings-card:nth-of-type(3) { animation-delay:.075s; } .settings-card:nth-of-type(4) { animation-delay:.115s; }
.settings-card-heading { display:grid; grid-template-columns:42px minmax(0,1fr) auto; align-items:center; gap:12px; margin:0 0 17px; }
.settings-heading-icon { display:grid; place-items:center; width:42px; height:42px; border:1px solid rgba(255,255,255,.14); border-radius:15px; color:var(--good); background:linear-gradient(145deg,rgba(255,255,255,.14),rgba(255,255,255,.025)); box-shadow:inset 0 1px rgba(255,255,255,.11); font-size:21px; }
.settings-card-heading h3 { margin:0; font-size:17px; letter-spacing:-.025em; } .settings-card-heading p { margin:4px 0 0; color:var(--muted); font-size:11px; line-height:1.45; }
.settings-current-value { align-self:start; color:var(--accent); font-size:11px; font-weight:750; text-align:right; white-space:nowrap; padding:6px 9px; border:1px solid rgba(255,255,255,.09); border-radius:999px; background:rgba(255,255,255,.045); }
.settings-choice-grid { display:grid; gap:9px; } .quality-choice-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
.settings-choice { position:relative; display:flex; flex-direction:column; align-items:flex-start; justify-content:center; gap:5px; min-width:0; min-height:89px; padding:14px; border:1px solid rgba(255,255,255,.1); border-radius:19px; color:var(--text); text-align:left; background:linear-gradient(145deg,rgba(255,255,255,.065),rgba(255,255,255,.018)); box-shadow:inset 0 1px rgba(255,255,255,.055); cursor:pointer; -webkit-tap-highlight-color:transparent; transition:transform .2s ease,border-color .25s ease,background .25s ease,box-shadow .25s ease; }
.settings-choice strong { font-size:14px; font-weight:760; letter-spacing:-.015em; line-height:1.25; } .settings-choice small { color:var(--muted); font-size:10px; line-height:1.35; } .settings-choice .choice-detail { color:var(--faint); font-size:9px; line-height:1.35; }
.settings-choice.active { border-color:color-mix(in srgb,var(--accent) 85%,white 15%); background:radial-gradient(ellipse at 100% 0%,color-mix(in srgb,var(--accent) 20%,transparent),transparent 67%),linear-gradient(145deg,color-mix(in srgb,var(--accent) 14%,transparent),rgba(255,255,255,.025)); box-shadow:inset 0 1px rgba(255,255,255,.12),0 0 0 1px color-mix(in srgb,var(--accent) 25%,transparent),0 9px 24px rgba(0,0,0,.1); }
.settings-choice.active::after { content:"✓"; position:absolute; top:10px; right:11px; display:grid; place-items:center; width:17px; height:17px; border-radius:50%; color:var(--bg); background:var(--accent); font-size:10px; font-weight:900; }
.settings-choice:hover { transform:translateY(-1px); border-color:rgba(255,255,255,.24); } .settings-choice:active { transform:scale(.985); }
.settings-auto-choice { grid-column:1 / -1; min-height:75px; } .settings-auto-choice strong { display:flex; gap:6px; align-items:center; } .auto-spark { color:var(--good); }
.settings-footnote { margin:12px 1px 0; color:var(--faint); font-size:10px; line-height:1.6; }
.appearance-choice-grid { grid-template-columns:repeat(3,minmax(0,1fr)); } .appearance-choice { align-items:center; min-height:100px; gap:8px; padding:12px 7px; text-align:center; } .appearance-choice strong { font-size:12px; } .appearance-choice small { font-size:9px; }
.appearance-swatch { display:block; width:41px; height:29px; margin-bottom:1px; border:1px solid rgba(255,255,255,.25); border-radius:11px; box-shadow:0 5px 14px rgba(0,0,0,.16),inset 0 1px rgba(255,255,255,.42); }
.swatch-white { background:linear-gradient(135deg,#fff,#dce5f0); } .swatch-blue { background:linear-gradient(135deg,#566ff0,#14a9d9 60%,#142047); } .swatch-black { background:linear-gradient(135deg,#090a0d,#2e333c 58%,#101114); }
.settings-storage-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }
.settings-storage-metric { display:flex; flex-direction:column; align-items:flex-start; gap:8px; min-width:0; padding:14px; border:1px solid rgba(255,255,255,.09); border-radius:17px; background:rgba(255,255,255,.035); }
.settings-storage-metric span { color:var(--muted); font-size:10px; } .settings-storage-metric strong { max-width:100%; overflow-wrap:anywhere; font-size:20px; letter-spacing:-.04em; font-variant-numeric:tabular-nums; }
.settings-storage-meter { height:5px; margin:12px 2px 17px; overflow:hidden; border:1px solid rgba(255,255,255,.075); border-radius:99px; background:rgba(255,255,255,.06); }
.settings-storage-meter span { display:block; width:0; height:100%; border-radius:inherit; background:linear-gradient(90deg,var(--accent),var(--good)); box-shadow:0 0 13px color-mix(in srgb,var(--accent) 42%,transparent); transition:width .5s ease; }
.settings-cache-row { display:flex; align-items:center; justify-content:space-between; gap:13px; padding:14px; border:1px solid rgba(255,255,255,.095); border-radius:18px; background:linear-gradient(135deg,rgba(255,255,255,.065),rgba(255,255,255,.018)); }
.settings-cache-copy { min-width:0; } .settings-cache-copy strong { font-size:13px; } .settings-cache-copy p { margin:5px 0 0; color:var(--muted); font-size:10px; line-height:1.5; }
.settings-secondary-button { flex:0 0 auto; min-height:38px; padding:9px 12px; border:1px solid rgba(255,255,255,.15); border-radius:13px; color:var(--text); background:rgba(255,255,255,.07); font-size:10px; font-weight:720; cursor:pointer; transition:background .2s ease,transform .2s ease; }
.settings-secondary-button:hover { background:rgba(255,255,255,.12); } .settings-secondary-button:active { transform:scale(.97); }
.settings-secondary-button:disabled,.settings-danger-button:disabled { opacity:.58; cursor:wait; }
.settings-footer-note { display:flex; gap:7px; align-items:flex-start; margin:0 3px; color:var(--faint); font-size:10px; line-height:1.6; } .settings-footer-note span { flex:0 0 auto; color:var(--good); }
.library-header-actions { display:flex; align-items:center; gap:8px; }
.library-create-button { display:inline-flex; align-items:center; justify-content:center; gap:6px; min-height:42px; padding:10px 13px; border:1px solid rgba(109,255,202,.24); border-radius:15px; color:var(--text); background:linear-gradient(145deg,rgba(109,255,202,.16),rgba(255,255,255,.04)); box-shadow:inset 0 1px rgba(255,255,255,.1),0 8px 20px rgba(0,0,0,.12); font-size:11px; font-weight:760; cursor:pointer; transition:transform .2s ease,border-color .2s ease,background .2s ease; -webkit-tap-highlight-color:transparent; }
.library-create-button span { color:var(--good); font-size:17px; line-height:1; } .library-create-button:hover { transform:translateY(-1px); border-color:rgba(109,255,202,.4); } .library-create-button:active { transform:scale(.97); }
@keyframes settings-page-in { from { opacity:0; transform:translateY(7px); } to { opacity:1; transform:translateY(0); } }
@keyframes settings-card-in { from { opacity:0; transform:translateY(9px); } to { opacity:1; transform:translateY(0); } }
@keyframes settings-icon-float { 0%,100% { transform:translateY(0) rotate(0); } 50% { transform:translateY(-3px) rotate(2deg); } }
@keyframes settings-glass-sweep { 0%,72%,100% { transform:translateX(-18%) rotate(-9deg); opacity:0; } 82% { opacity:1; } 94% { transform:translateX(18%) rotate(-9deg); opacity:0; } }
html[data-appearance="blue"] { --bg:#071329; --text:#eff5ff; --muted:rgba(224,234,255,.69); --faint:rgba(210,225,255,.43); --glass:rgba(10,22,47,.57); --glass-strong:rgba(10,23,49,.78); --glass-line:rgba(160,190,255,.16); --accent:#6996ff; --accent-strong:#3e78f6; --good:#70f3d0; --shadow:0 22px 70px rgba(0,0,0,.42); }
html[data-appearance="white"] { --bg:#f1f4f9; --text:#18202e; --muted:rgba(24,32,46,.68); --faint:rgba(24,32,46,.48); --glass:rgba(255,255,255,.57); --glass-strong:rgba(255,255,255,.79); --glass-line:rgba(30,42,62,.14); --accent:#4c65d8; --accent-strong:#334dc4; --good:#188963; --shadow:0 22px 60px rgba(35,48,71,.12); }
html[data-appearance="white"],html[data-appearance="white"] body { background:#f1f4f9; color:var(--text); }
html[data-appearance="white"] body { background:radial-gradient(circle at 18% 2%,rgba(122,151,230,.18),transparent 31%),radial-gradient(circle at 90% 38%,rgba(110,213,190,.13),transparent 32%),var(--bg); }
html[data-appearance="white"] .ambient { background:linear-gradient(180deg,rgba(247,249,253,.65),rgba(241,244,249,.87)),var(--ambient-image),#f1f4f9; background-size:cover; background-position:center; }
html[data-appearance="white"] .ambient::after { opacity:.38; } html[data-appearance="white"] .ambient-orb { opacity:.12; }
html[data-appearance="white"] .glass-panel { background:linear-gradient(145deg,rgba(255,255,255,.82),rgba(255,255,255,.48) 52%,rgba(255,255,255,.66)),var(--glass); border-color:var(--glass-line); box-shadow:inset 0 1px 1px rgba(255,255,255,.8),var(--shadow); }
html[data-appearance="white"] .glass-button { color:var(--text); border-color:rgba(31,44,68,.12); background:linear-gradient(145deg,rgba(255,255,255,.9),rgba(237,241,248,.65)); box-shadow:inset 0 1px rgba(255,255,255,.95),0 9px 24px rgba(34,49,76,.11); }
html[data-appearance="white"] .filter-chip { color:var(--text); background:rgba(255,255,255,.67); border-color:rgba(31,44,68,.11); } html[data-appearance="white"] .filter-chip.active { color:#06110c; background:linear-gradient(135deg,#a8f5d7,#66d9b0); }
html[data-appearance="white"] .settings-hero,html[data-appearance="white"] .settings-card { background:radial-gradient(ellipse at 100% 0%,rgba(111,138,222,.11),transparent 45%),linear-gradient(145deg,rgba(255,255,255,.83),rgba(255,255,255,.47)),var(--glass); }
html[data-appearance="white"] .settings-hero-mark { color:white; }
html[data-appearance="white"] .settings-choice { color:var(--text); border-color:rgba(31,44,68,.12); background:linear-gradient(145deg,rgba(255,255,255,.78),rgba(236,240,247,.53)); box-shadow:inset 0 1px rgba(255,255,255,.95),0 4px 12px rgba(40,55,80,.045); }
html[data-appearance="white"] .settings-choice.active { border-color:color-mix(in srgb,var(--accent) 72%,white 28%); background:linear-gradient(145deg,color-mix(in srgb,var(--accent) 9%,white),rgba(255,255,255,.62)); box-shadow:inset 0 1px rgba(255,255,255,.95),0 0 0 1px color-mix(in srgb,var(--accent) 20%,transparent); }
html[data-appearance="white"] .settings-current-value,html[data-appearance="white"] .settings-storage-metric,html[data-appearance="white"] .settings-cache-row { background:rgba(255,255,255,.57); border-color:rgba(31,44,68,.1); }
html[data-appearance="white"] .settings-secondary-button { color:var(--text); border-color:rgba(31,44,68,.15); background:rgba(255,255,255,.72); }
html[data-appearance="white"] .library-create-button { color:var(--text); border-color:rgba(24,137,99,.24); background:linear-gradient(145deg,rgba(30,184,131,.12),rgba(255,255,255,.8)); }
html[data-appearance="white"] .nav-item { color:rgba(24,32,46,.6); } html[data-appearance="white"] .nav-item.active { color:var(--text); }
html[data-appearance="white"] .view-heading h2,html[data-appearance="white"] .hero-copy h1,html[data-appearance="white"] .section-heading h2,html[data-appearance="white"] .settings-card-heading h3 { color:var(--text); }
html[data-appearance="white"] .search-box,html[data-appearance="white"] .playlist-sheet,html[data-appearance="white"] .queue-panel { color:var(--text); } html[data-appearance="white"] .settings-data-danger { background:rgba(222,60,82,.055); }
@media (min-width:700px) {
  .settings-view { gap:17px; padding-top:18px; } .settings-hero { grid-template-columns:66px minmax(0,1fr); min-height:174px; padding:28px; gap:18px; } .settings-hero-mark { width:66px; height:66px; border-radius:22px; } .settings-card { padding:23px; } .settings-card-heading { margin-bottom:20px; } .quality-choice-grid { grid-template-columns:repeat(4,minmax(0,1fr)); } .settings-auto-choice { grid-column:auto; } .settings-choice,.settings-auto-choice { min-height:106px; }
}
@media (max-width:420px) {
  .settings-view { gap:12px; padding-top:10px; } .settings-hero { grid-template-columns:48px minmax(0,1fr); gap:12px; min-height:126px; padding:17px 15px; border-radius:23px; } .settings-hero-mark { width:48px; height:48px; border-radius:16px; } .settings-hero-mark span { width:3px; } .settings-hero-copy h2 { font-size:27px; } .settings-hero-copy p { font-size:11px; }
  .settings-card { padding:15px; border-radius:22px; } .settings-card-heading { grid-template-columns:36px minmax(0,1fr); gap:10px; } .settings-heading-icon { width:36px; height:36px; border-radius:12px; } .settings-card-heading h3 { font-size:15px; } .settings-current-value { grid-column:2; justify-self:start; margin-top:-4px; font-size:10px; }
  .settings-choice { padding:12px 11px; min-height:85px; border-radius:16px; } .settings-choice strong { font-size:13px; } .settings-auto-choice { min-height:71px; } .appearance-choice { padding:10px 4px; min-height:91px; } .appearance-swatch { width:35px; height:25px; }
  .settings-storage-grid { gap:7px; } .settings-storage-metric { padding:11px; gap:7px; } .settings-storage-metric strong { font-size:18px; } .settings-cache-row { align-items:flex-start; flex-direction:column; padding:12px; } .settings-secondary-button { width:100%; } .settings-data-danger { align-items:flex-start; flex-direction:column; padding:13px; } .settings-danger-button { width:100%; }
  .library-create-button { min-height:39px; padding:8px 10px; font-size:10px; } .library-header-actions { gap:6px; }
}


/* Network diagnostics: compact, readable cards matching Makplay's Liquid Glass settings. */
.settings-network-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:9px; }
.settings-network-metric { display:flex; flex-direction:column; justify-content:space-between; gap:7px; min-width:0; min-height:67px; padding:12px; border:1px solid rgba(255,255,255,.09); border-radius:15px; background:linear-gradient(145deg,rgba(255,255,255,.065),rgba(255,255,255,.018)); }
.settings-network-metric span { color:var(--muted); font-size:10px; line-height:1.4; }
.settings-network-metric strong { overflow-wrap:anywhere; color:var(--text); font-size:12px; font-weight:760; line-height:1.45; font-variant-numeric:tabular-nums; }
.settings-network-actions { display:flex; flex-wrap:wrap; gap:8px; margin-top:13px; }
.settings-network-actions .settings-secondary-button { flex:1 1 145px; }
.settings-network-card .settings-card-heading { align-items:start; }
@media (min-width:700px) { .settings-network-grid { grid-template-columns:repeat(3,minmax(0,1fr)); } }


/* Compact, expandable network status: the connection summary stays visible by default. */
.settings-network-details { padding:0; }
.settings-network-summary { display:block; padding:17px 18px; cursor:pointer; list-style:none; -webkit-tap-highlight-color:transparent; }
.settings-network-summary::-webkit-details-marker { display:none; }
.settings-network-summary:focus-visible { outline:2px solid var(--accent); outline-offset:3px; border-radius:20px; }
.settings-network-summary .settings-card-heading { grid-template-columns:42px minmax(0,1fr) auto; gap:11px; margin:0; }
.settings-network-summary-copy { min-width:0; }
.settings-network-summary-copy p { margin-top:5px; font-size:11px; line-height:1.4; }
.settings-network-summary-side { display:flex; align-items:center; justify-content:flex-end; gap:8px; }
.settings-network-summary .settings-current-value { align-self:center; max-width:112px; white-space:normal; line-height:1.35; font-size:10px; }
.settings-network-chevron { display:grid; flex:0 0 auto; place-items:center; width:28px; height:28px; border:1px solid rgba(255,255,255,.13); border-radius:50%; color:var(--muted); background:rgba(255,255,255,.045); font-size:17px; line-height:1; transition:transform .22s ease,background .22s ease; }
.settings-network-details[open] .settings-network-chevron { transform:rotate(180deg); background:rgba(255,255,255,.09); }
.settings-network-details[open] .settings-network-summary { border-bottom:1px solid rgba(255,255,255,.085); }
.settings-network-body { padding:0 18px 18px; }
.settings-network-intro { margin:13px 0 12px; color:var(--muted); font-size:11px; line-height:1.5; }
.settings-network-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:9px; }
.settings-network-metric { display:flex; flex-direction:column; justify-content:space-between; gap:7px; min-width:0; min-height:67px; padding:12px; border:1px solid rgba(255,255,255,.09); border-radius:15px; background:linear-gradient(145deg,rgba(255,255,255,.065),rgba(255,255,255,.018)); }
.settings-network-metric span { color:var(--muted); font-size:10px; line-height:1.4; }
.settings-network-metric strong { overflow-wrap:anywhere; color:var(--text); font-size:12px; font-weight:760; line-height:1.45; font-variant-numeric:tabular-nums; }
.settings-network-actions { display:flex; flex-wrap:wrap; gap:8px; margin-top:13px; }
.settings-network-actions .settings-secondary-button { flex:1 1 145px; }
.settings-network-details .settings-card-heading { align-items:center; }
.settings-network-details .settings-network-summary-side { min-width:0; }
.settings-offline-cache-row { border-color:rgba(255,91,112,.29); background:linear-gradient(135deg,rgba(255,72,93,.12),rgba(255,72,93,.045)); }
.settings-offline-cache-row .settings-cache-copy strong { color:#ff8e9b; }
.settings-offline-heading { display:flex; align-items:center; flex-wrap:wrap; gap:8px; }
.settings-offline-badge { display:inline-flex; align-items:center; min-height:21px; padding:3px 8px; border:1px solid rgba(255,91,112,.3); border-radius:999px; color:#ff9aa5; background:rgba(255,72,93,.12); font-size:9px; font-weight:800; letter-spacing:.015em; }
html[data-appearance="white"] .settings-offline-cache-row { border-color:rgba(180,35,53,.24); background:linear-gradient(135deg,rgba(235,67,88,.09),rgba(235,67,88,.025)); }
html[data-appearance="white"] .settings-offline-cache-row .settings-cache-copy strong,html[data-appearance="white"] .settings-offline-badge { color:#b52b3b; }
html[data-appearance="white"] .settings-offline-badge { border-color:rgba(181,43,59,.22); background:rgba(235,67,88,.08); }
@media (min-width:700px) { .settings-network-grid { grid-template-columns:repeat(3,minmax(0,1fr)); } }
@media (max-width:420px) {
  .settings-network-summary { padding:15px 13px; }
  .settings-network-summary .settings-card-heading { grid-template-columns:37px minmax(0,1fr) auto; gap:8px; }
  .settings-network-summary .settings-heading-icon { width:37px; height:37px; border-radius:13px; }
  .settings-network-summary-side { gap:5px; }
  .settings-network-summary .settings-current-value { max-width:88px; padding:5px 7px; font-size:9px; }
  .settings-network-chevron { width:25px; height:25px; }
  .settings-network-body { padding:0 13px 14px; }
}



/* Device-local motion preference switch. */
.settings-motion-row { display:flex; align-items:center; justify-content:space-between; gap:14px; }
.settings-motion-row .settings-card-heading { flex:1 1 auto; min-width:0; margin:0; }
.settings-motion-switch { position:relative; flex:0 0 auto; width:54px; height:32px; padding:0; border:1px solid rgba(255,255,255,.2); border-radius:999px; background:rgba(255,255,255,.1); box-shadow:inset 0 2px 5px rgba(0,0,0,.18); cursor:pointer; -webkit-tap-highlight-color:transparent; transition:background .2s ease,border-color .2s ease; }
.settings-motion-switch[aria-checked="true"] { border-color:rgba(109,255,202,.5); background:linear-gradient(135deg,rgba(109,255,202,.65),rgba(76,204,170,.72)); }
.settings-motion-thumb { position:absolute; left:3px; top:3px; width:24px; height:24px; border-radius:50%; background:#f7fffc; box-shadow:0 2px 6px rgba(0,0,0,.22),inset 0 1px 0 rgba(255,255,255,.9); transition:transform .2s cubic-bezier(.2,.75,.22,1); }
.settings-motion-switch[aria-checked="true"] .settings-motion-thumb { transform:translateX(22px); }
.settings-motion-switch:focus-visible { outline:2px solid var(--accent); outline-offset:3px; }
.settings-motion-switch[aria-checked="false"] .settings-motion-thumb { background:#d4dae4; }
@media(max-width:420px) { .settings-motion-row .settings-card-heading { grid-template-columns:36px minmax(0,1fr); } .settings-motion-row .settings-card-heading h3 { font-size:14px; } .settings-motion-row .settings-card-heading p { font-size:10px; } }