/* Sunifying / Solar Glass v2.2
   Vibrant sunrise palette on top of the v2.1 tactile metal geometry.
   Accessible labels stay light; saturated colour is used for accents and illumination. */
:root {
  --bg:#090d15;
  --surface:#19202c;
  --surface-2:#202a38;
  --muted:#abb5c5;
  --text:#fff7e8;
  --stroke:rgba(254,224,168,.15);
  --accent:#ffcb70;
  --shadow:0 20px 54px rgba(1,5,14,.56);
}
html { background:#090d15 }
body {
  color:#fff7eb;
  background:
    radial-gradient(ellipse 510px 410px at 92% -9%,rgba(255,159,69,.25),transparent 70%),
    radial-gradient(ellipse 560px 590px at -27% 30%,rgba(45,100,137,.21),transparent 75%),
    radial-gradient(ellipse 520px 550px at 113% 82%,rgba(129,73,151,.11),transparent 80%),
    #090d15;
}
.app-shell {
  background:
    radial-gradient(ellipse 380px 250px at 98% 1%,rgba(249,153,67,.19),transparent 78%),
    linear-gradient(135deg,rgba(255,234,184,.085),transparent 25%,rgba(255,255,255,.007) 60%),
    linear-gradient(158deg,#323340 0%,#151e2b 28%,#0d141f 64%,#1b2330 100%);
  border-color:rgba(251,210,145,.34);
  box-shadow:
    inset 0 1px 0 rgba(255,245,225,.24),
    inset 0 -1px 0 rgba(245,225,197,.09),
    0 31px 92px rgba(0,0,0,.65),
    0 0 0 4px rgba(23,27,36,.76);
}
.app-shell:after { border-color:rgba(255,220,154,.073) }
.topbar { border-bottom-color:rgba(255,222,167,.15) }
.brand-logo {
  border:1px solid #ffdc9d;
  background:
    radial-gradient(circle at 34% 27%,#fff6c5 2%,#ffd77c 24%,#ef9e49 52%,#72401f 76%,#22202a 99%);
  box-shadow:inset 0 2px 3px #fff4,inset 0 -6px 10px #492310c9,0 2px 9px #02040b,0 0 21px #efa44e3b;
}
.sun-core {
  background:#fff1bf;
  box-shadow:0 0 10px 3px rgba(255,221,127,.68);
}
.sun-ring { border-color:#fff1c6c2 }
.brand-dot,.period { color:#ffc56c }
.brand-type { color:#fff1dc }
.brand-type small { color:#b7b3ae }
.top-search-btn,.top-avatar {
  color:#ffdfaa;
  background:linear-gradient(140deg,#4c4550,#252a37 48%,#141c29);
  border-color:rgba(255,210,148,.3);
  box-shadow:inset 0 1px 0 #ffe6b646,0 4px 9px #0008;
}
.avatar-ping { background:#ffc46c;border-color:#1a2230;box-shadow:0 0 7px #ffb25266 }
.hero { position:relative; isolation:isolate }
.hero:before {
  content:"";position:absolute;z-index:-1;
  width:178px;height:178px;right:-12px;top:-37px;pointer-events:none;
  border-radius:50%;
  background:
    radial-gradient(circle at 45% 43%,rgba(255,236,168,.88),rgba(255,187,83,.78) 21%,rgba(248,143,58,.40) 36%,rgba(244,142,62,.10) 60%,transparent 73%);
  filter:blur(1px);
  opacity:.67;
}
.hero:after {
  content:"";position:absolute;z-index:-1;pointer-events:none;
  right:3px;top:-20px;width:170px;height:170px;border-radius:50%;
  border:1px solid rgba(255,207,129,.13);
  box-shadow:0 0 0 18px rgba(255,203,118,.025),0 0 0 41px rgba(255,200,115,.016);
}
.hero-meta { color:#d7ba8c }
.eyebrow-line { background:linear-gradient(90deg,#ffe2a2,#ea9752) }
.hero h1 { color:#fff7e8; text-shadow:0 2px 11px #0a101850 }
.hero h1 span { color:#ffda97 }
.hero p { color:#c6bdaf }
.command-label { color:#ffdbab }
.command-label:before { background:#ffd483;box-shadow:0 0 8px #fdb660 }
.command-mark b { color:#ffe0ae }
.command-mark small { color:#cba675 }
.hero-status { color:#e6c9a1 }
.status-orb { background:#ffc86d;box-shadow:0 0 12px #ffb95d }
.search-box {
  border-color:#221b1c;
  background:linear-gradient(180deg,#0d1520,#252633);
  box-shadow:inset 0 2px 7px #000a,0 1px 0 #ffe6c32e;
}
.search-box:focus-within {
  border-color:#e2ad6f;
  box-shadow:inset 0 2px 7px #000a,0 0 0 2px #ffc57926,0 0 21px #eaa9581a;
}
.search-box input { color:#f8f5ed }
.search-box input::placeholder { color:#abb6c7 }
.search-box .ico { color:#facb86 }
.keycap { color:#c1a78d }
.section-heading .mini-label { color:#b9a991 }
.section-heading h2 { color:#fff3df }
.h2-count {
  color:#ffe0a5;
  border-color:#f7c67a38;
  background:linear-gradient(150deg,#594637,#292632);
  box-shadow:inset 0 1px 0 #ffdb9e33;
}
.text-button { color:#ffcb80 }
.filter-button {
  color:#c4c6d1;border-color:#8a83874f;
  background:linear-gradient(145deg,#414251,#1b2635);
  box-shadow:inset 0 1px 0 #ffe8c11f,0 3px 7px #0006;
}
.filter-button.active {
  color:#261807;
  border-color:#ffde9e;
  background:linear-gradient(150deg,#ffe9b7,#ffd080 52%,#dc9250);
  box-shadow:inset 0 1px 1px #ffffffab,0 4px 12px #0008,0 0 15px #ffaf5840;
}
.app-card {
  --card-accent:#ffd08a;
  --card-glow:rgba(255,183,84,.22);
  color:#fff8ee;
  border-color:rgba(255,209,152,.48);
  border-right-color:rgba(71,50,51,.84);
  border-bottom-color:#0b111a;
  background:
    radial-gradient(ellipse at 88% 4%,var(--card-glow),transparent 56%),
    linear-gradient(144deg,#6a5660 0%,#3b3541 19%,#202838 56%,#101b2a 100%);
  box-shadow:
    inset 0 1px 0 #ffe9d0a1,inset 0 2px 4px #fff0d11c,
    inset 0 -7px 11px #050b166d,
    0 5px 0 #080c15,0 12px 24px #0009;
}
.app-card:before {
  background:linear-gradient(121deg,rgba(255,255,255,.20),transparent 31%,transparent 69%,rgba(255,236,210,.04));
  border-color:rgba(255,250,235,.10);
}
.app-card:after { background:linear-gradient(90deg,transparent,var(--card-accent),transparent);opacity:.27 }
.app-card:focus-visible,.app-card:hover {
  border-color:var(--card-accent);
  box-shadow:inset 0 1px 0 #fff7dfab,0 8px 0 #070b13,0 18px 33px #000b,0 0 22px var(--card-glow);
}
.app-card.featured,.app-card.theme-amber {
  --card-accent:#ffdb91;
  --card-glow:rgba(255,162,63,.34);
  background:
    radial-gradient(ellipse 220px 210px at 93% 37%,rgba(255,201,108,.35),transparent 72%),
    linear-gradient(125deg,#8a654c 0%,#59433e 22%,#2b303c 60%,#111c2c 100%);
  border-color:rgba(255,217,161,.65);
  border-right-color:#4a3540;
  border-bottom-color:#0b1019;
}
.app-card.theme-mint {
  --card-accent:#a6f4d4;
  --card-glow:rgba(53,218,167,.31);
  background:radial-gradient(ellipse at 92% 14%,rgba(69,236,171,.31),transparent 62%),
    linear-gradient(144deg,#4d867c,#28565b 28%,#193440 61%,#13202b);
  border-color:rgba(130,241,198,.46);border-right-color:#194036;border-bottom-color:#071518;
}
.app-card.theme-rose {
  --card-accent:#ffd0ae;
  --card-glow:rgba(249,93,111,.31);
  background:radial-gradient(ellipse at 92% 12%,rgba(255,109,112,.33),transparent 63%),
    linear-gradient(144deg,#a96872,#633944 24%,#3e273b 65%,#1d192a);
  border-color:rgba(255,164,170,.54);border-right-color:#4b2632;border-bottom-color:#160b16;
}
.app-card.theme-violet {
  --card-accent:#d9c8ff;
  --card-glow:rgba(155,104,255,.3);
  background:radial-gradient(ellipse at 90% 9%,rgba(175,127,255,.33),transparent 60%),
    linear-gradient(140deg,#8674a8,#473d76 24%,#272850 65%,#171b35);
  border-color:rgba(198,172,255,.48);border-right-color:#39305b;border-bottom-color:#100f20;
}
.app-card.theme-blue {
  --card-accent:#b4e4ff;
  --card-glow:rgba(98,197,255,.28);
  background:radial-gradient(ellipse at 90% 10%,rgba(110,199,250,.32),transparent 62%),
    linear-gradient(142deg,#6188a4,#35566f 22%,#234157 65%,#141f32);
  border-color:rgba(147,217,255,.52);border-right-color:#263f55;border-bottom-color:#081724;
}
.app-card.theme-neutral {
  --card-accent:#fbd6a4;--card-glow:rgba(249,167,81,.19);
  background:radial-gradient(ellipse at 86% 7%,rgba(244,183,97,.21),transparent 60%),linear-gradient(145deg,#74695e,#3c3d49 22%,#1a2632 78%);
}
.app-glyph {
  color:var(--card-accent);
  background:linear-gradient(143deg,color-mix(in srgb,var(--card-accent) 32%,#192337),rgba(11,22,34,.88) 74%);
  border-color:color-mix(in srgb,var(--card-accent) 55%,transparent);
  box-shadow:inset 0 1px 0 #fff9dd73,inset 0 -4px 8px #0008,0 3px 9px #0009,0 0 14px var(--card-glow);
}
.card-open {
  color:var(--card-accent);
  background:linear-gradient(140deg,color-mix(in srgb,var(--card-accent) 18%,#354155),#1a2435);
  border-color:color-mix(in srgb,var(--card-accent) 30%,transparent);
}
.card-kicker {color:var(--card-accent)}
.app-card h3 {color:#fff8f0}
.app-card p {color:#e1dce0}
.app-card .card-art {color:var(--card-accent)!important}
.app-card.featured .card-art {filter:drop-shadow(0 0 22px rgba(255,200,114,.18))}
.orbit {border-color:#ffdaad90}
.orbit:nth-child(2) {border-color:#ffddaa;box-shadow:0 0 11px rgba(255,196,93,.34)}
.orbit:nth-child(1) {background:radial-gradient(circle at 40% 27%,#ffd18a69,#b1703862 45%,transparent 72%)}
.performance-wave {filter:drop-shadow(0 0 7px #ffc67c88);opacity:.85}
.shoe-art svg {opacity:.35;stroke-width:1.2}
.cards-art {filter:none;opacity:.9}
.cards-art:before {background:#4c78c8}
.cards-art:after {background:#329b84}
.cards-art span {background:linear-gradient(158deg,#f38961,#c54979);color:#fff3ce}
.mecha-art svg {filter:none;opacity:.34}
.weather-art:before {border-color:#c0e9ff8f;box-shadow:inset 0 4px 14px #97d9f622,0 0 0 13px #6cbff019,0 0 0 27px #b4e8ff0c}
.add-tile {
  color:#ffdfad;
  background:linear-gradient(140deg,#49404b,#252637 60%,#151d2c);
  border-color:#f2bb754f;
  box-shadow:inset 0 1px 0 #ffe4be36,0 5px 10px #0008;
}
.add-icon {
  color:#ffe0a9;border-color:#ffd29b77;
  background:linear-gradient(145deg,#886245,#352b38 85%);
}
.add-title {color:#fff2d7}
.add-caption {color:#cebdac}
.family-label {color:#ffd9a4}
.family-label:after {background:linear-gradient(90deg,#ffcf8870,transparent)}
.family-panel {
  background:
    radial-gradient(ellipse at 96% 2%,rgba(255,179,123,.25),transparent 59%),
    linear-gradient(150deg,#7b6474 0%,#413d60 22%,#26324d 60%,#182638);
  border-color:#dfb9b48c;border-right-color:#352941;border-bottom-color:#0c1320;
  box-shadow:inset 0 1px 0 #ffe8d48a,inset 0 -8px 12px #070e1e88,0 5px 0 #0c1220,0 14px 23px #000a;
}
.family-panel:before {border-color:#ffe6e128}
.family-symbol {
  color:#ffdbb6;background:linear-gradient(153deg,#e0a28e,#7c597a 42%,#333c60);
  border-color:#fbd3c17d;
  box-shadow:inset 0 1px 0 #fff4dc8f,inset 0 -3px 5px #0006,0 4px 10px #0008;
}
.family-head-copy strong {color:#fff6e9}
.family-head-copy span {color:#e2d0e1}
.family-pulse {background:#ffc38a;box-shadow:0 0 10px #ffa66b99}
.family-link {
  color:#ffeff2;
  background:linear-gradient(142deg,#805b66,#473c5b 48%,#2e3550);
  border-color:#dab4bd80;border-right-color:#38293d;border-bottom-color:#201a2d;
  box-shadow:inset 0 1px 0 #ffe4e186,inset 0 -3px 5px #120e2788,0 3px 0 #0f1021,0 6px 10px #0008;
}
.family-link:first-child {background:linear-gradient(145deg,#a57c56,#624b49 36%,#333748 89%);border-color:#f9c89190;border-right-color:#43302d;border-bottom-color:#1e1419}
.family-link:nth-child(2) {background:linear-gradient(143deg,#9f667d,#63446e 45%,#354061);border-color:#e9b2d38c;border-right-color:#422a44;border-bottom-color:#1a1529}
.family-link-icon {color:#ffdfc3;background:#ffe1b025;border-color:#fff0d042}
.family-link-copy strong {color:#fff7ef}
.family-link-copy small {color:#e8cbd5}
.family-link-arrow {color:#ffe3c6}
.bottom-dock {
  background:linear-gradient(153deg,rgba(139,111,100,.9),rgba(57,51,67,.96) 27%,rgba(22,32,48,.97) 90%);
  border-color:#efc99d91;border-right-color:#514451;border-bottom-color:#141221;
  box-shadow:inset 0 1px 0 #fff5dd81,inset 0 -4px 6px #0008,0 5px 0 #11121e,0 12px 34px #000d,0 0 25px #ffaa5130;
}
.dock-tab {color:#ddd0c5}
.dock-tab.active {
  color:#261a14;
  background:linear-gradient(145deg,#fff1c5,#f4c47d 56%,#d79765);
  border-color:#ffe9b8;
  box-shadow:inset 0 1px 0 #fff9e2da,inset 0 -3px 4px #c7773f77,0 3px 7px #0007,0 0 16px #f4b2607a;
}
.dock-tab.active svg {stroke:#49301c}
.page-intro h1 {color:#fff1db}
.library-item,.settings-panel {
  background:
    radial-gradient(ellipse at 5% 0%,rgba(255,186,117,.12),transparent 58%),
    linear-gradient(145deg,#4c4851,#282d3b 26%,#151e2d 90%);
  border-color:#e7bc9770;border-bottom-color:#090e18;
  box-shadow:inset 0 1px 0 #ffead863,0 5px 0 #101019,0 11px 18px #0008;
}
.library-item:hover {background:linear-gradient(145deg,#564a55,#2b3348)}
.library-icon {color:#ffdcaa}
.primary-action {
  background:linear-gradient(148deg,#fff0bd,#ffd27d 40%,#e9a052);
  border-color:#ffeec6;color:#2b1b0f;
  box-shadow:inset 0 1px 0 #fffadcbd,0 4px 9px #0008;
}
.app-dialog {
  background:linear-gradient(158deg,#564452,#263044 40%,#111c2b 88%);
  border-color:#f7c39887;
}
:where(.app-card,.family-link,.bottom-dock,.filter-button,.top-search-btn):focus-visible {
  outline:2px solid #ffe1a8;outline-offset:3px;
}
@media(min-width:700px){
  body {background:radial-gradient(ellipse 750px 520px at 82% -18%,#543b42,#111b2b 68%,#090d15)}
  .hero:before {height:216px;width:216px;top:-42px;right:33px;opacity:.75}
  .hero:after {height:215px;width:215px;top:-28px;right:38px}
}
@media(max-width:365px){
  .hero:before {width:122px;height:122px;right:-18px;top:-6px;opacity:.5}
  .hero:after {width:122px;height:122px;right:-18px;top:-6px}
}
@media(prefers-reduced-motion:reduce){.app-card,.family-link,.dock-tab{transition:none!important}}