/* SUNIFYING / MONOCHROME STUDIO - V2.1 - substantial visual rebuild */
:root{--bg:#07090c;--surface:#191c23;--text:#ebedf2;--muted:#9ba5b4;--accent:#d4dce6;--stroke:rgba(219,228,242,.15);--radius:24px;--shadow:0 18px 45px rgba(0,0,0,.45);font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI","Noto Sans HK",sans-serif}
html{background:#07090c}
body{background:radial-gradient(ellipse 500px 450px at 5% 0%,#222731,#080a0e 83%);color:#edf0f4;min-height:100vh}
.ambient{display:none}
.app-shell{position:relative;isolation:isolate;max-width:1020px;width:min(calc(100% - 20px),1020px);margin:9px auto 25px;padding:0 20px 152px;background:
 linear-gradient(138deg,rgba(255,255,255,.048),transparent 18%,transparent 79%,rgba(255,255,255,.018)),
 linear-gradient(160deg,#242831 0%,#13171d 24%,#0b0e13 53%,#181c23 100%);
 border:1px solid rgba(210,222,239,.29);border-radius:33px;
 box-shadow:inset 0 1px 0 rgba(255,255,255,.19),inset 0 -1px 0 rgba(255,255,255,.07),0 32px 88px #0009,0 0 0 4px rgba(15,18,23,.73)}
.app-shell:after{content:"";pointer-events:none;position:absolute;z-index:-1;inset:5px;border:1px solid rgba(255,255,255,.035);border-radius:29px}
.topbar{height:76px;border-bottom:1px solid rgba(233,241,252,.12);display:flex;align-items:center;justify-content:space-between}
.brand{gap:10px}
.brand-logo{height:31px;width:31px;border-radius:50%;transform:none;background:radial-gradient(circle at 30% 20%,#c4cbd6,#606977 35%,#1a202a 72%);border:1px solid #8b95a3;box-shadow:inset 0 1px 2px #fff8,inset 0 -7px 8px #080a0dae,0 2px 7px #0009}
.sun-core{height:9px;width:9px;background:#edf0f6;box-shadow:0 0 12px #c9d6f2}
.sun-ring{height:23px;width:23px;border:1px solid #e4ecfa5c}
.brand-type{font-size:13px;letter-spacing:.17em;font-weight:720}
.brand-type small{color:#a3acb9;letter-spacing:.14em}
.brand-dot,.period{color:#bdc7d5}
.top-actions{display:flex;gap:8px}
.top-search-btn,.top-avatar{display:grid;place-items:center;height:35px;width:35px;border-radius:11px;color:#c9d2dd;background:linear-gradient(147deg,#383e48,#171b22 78%);border:1px solid #68717e66;box-shadow:inset 0 1px 1px #fff4,0 5px 9px #0007}
.top-search-btn svg{width:17px;height:17px}
.avatar-ping{background:#c7d6e4;border:2px solid #1c232a}
.hero{padding-top:24px}
.hero-meta{font-size:9px;color:#aab2bf;letter-spacing:.2em}
.eyebrow-line{width:20px;background:#b8c2d0}
.hero h1{font-size:clamp(28px,7.3vw,45px);letter-spacing:-.055em;margin:11px 0 6px;line-height:1.09;font-weight:680}
.hero h1 span{color:#d1d6df}
.hero p{font-size:11px;color:#a3adba;line-height:1.6}
.hero-status{margin-top:14px;color:#b4becb;font-size:10px}
.status-orb{background:#c4d6eb;box-shadow:0 0 8px #c4d6eb77;height:6px;width:6px}
.command-head{display:flex;align-items:end;justify-content:space-between;gap:12px}
.command-label{display:flex;align-items:center;gap:7px;color:#9ea9b8;font-size:9px;font-weight:730;letter-spacing:.17em}
.command-label:before{content:"";width:5px;height:5px;border-radius:50%;background:#becbd9;box-shadow:0 0 8px #d2dfef8a}
.command-mark{display:flex;flex-direction:column;gap:5px;text-align:right}
.command-mark b{font-size:14px;color:#dce2eb;letter-spacing:.01em;font-variant-numeric:tabular-nums}
.command-mark small{font-size:8px;color:#8994a5;letter-spacing:.15em}
.search-row{margin-top:15px}
.search-box{background:linear-gradient(180deg,#0d1015,#1c2129);border:1px solid #06090d;border-top-color:#07090c;box-shadow:inset 0 2px 6px #000b,0 1px 0 #ffffff20;height:41px;border-radius:13px}
.search-box:focus-within{border-color:#8490a0;box-shadow:inset 0 2px 6px #0009,0 0 0 2px #c5cedd22}
.search-box input{font-size:12px;color:#e8edf5}
.search-box input::placeholder{color:#8e98a6}
.search-box .ico{width:17px;height:17px;color:#aab5c4}
.keycap{color:#7b8693}
.section-heading{margin:19px 0 13px}
.section-heading .mini-label{font-size:8px;color:#9aa8ba;letter-spacing:.2em}
.section-heading h2{color:#e3e8f0;font-size:19px;margin-top:5px;letter-spacing:-.045em}
.h2-count{font-size:11px;color:#afbdcf;margin-left:5px;border:1px solid #8490a02b;background:linear-gradient(160deg,#313742,#1a2028);padding:4px 7px;border-radius:9px;vertical-align:middle}
.text-button{color:#c6d0dd;font-size:11px}
.filter-row{gap:6px;margin-bottom:12px}
.filter-button{font-size:10px;padding:8px 13px;letter-spacing:.02em;border-radius:11px;background:linear-gradient(145deg,#2c333d,#161b22);border:1px solid #6c77873e;box-shadow:inset 0 1px 0 #ffffff16,0 3px 7px #0005;color:#aeb8c6}
.filter-button.active{color:#f3f5f9;border-color:#b8c5d77a;background:linear-gradient(145deg,#58616e,#2d343e);box-shadow:inset 0 1px 1px #ffffff4a,0 4px 12px #0006}
.app-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;align-items:stretch}
.app-card{
 --card-accent:#d9e0ea;--card-edge:#afbbd033;--card-edge-hover:#cfdaeb8e;
 position:relative;min-height:171px;min-width:0;display:flex;flex-direction:column;justify-content:space-between;padding:13px;
 border:1px solid #737f90a3;border-bottom-color:#07090de6;border-right-color:#303741;
 border-radius:20px;background:linear-gradient(145deg,#666d78 0%,#3c444f 11%,#20262f 43%,#11161c 100%);
 box-shadow:inset 0 1px 0 #f7faff80,inset 0 2px 4px #fafcff23,inset 0 -8px 10px #06080b67,0 5px 0 #090b10,0 12px 21px #0009;
 transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease
}
.app-card:before{content:"";position:absolute;pointer-events:none;inset:4px;border:1px solid #e5eafa1c;border-radius:16px;background:linear-gradient(127deg,#ffffff12 0%,transparent 34%,transparent 75%,#ffffff05 100%)}
.app-card:after{content:"";pointer-events:none;position:absolute;inset:auto 15px 8px 15px;height:1px;background:linear-gradient(90deg,transparent,#b6c2d439,transparent)}
.app-card:hover,.app-card:focus-visible{transform:translateY(-2px);border-color:#b6c4d4b3;box-shadow:inset 0 1px 0 #fff8,0 8px 0 #080a0e,0 18px 27px #0009}
.app-card:active{transform:translateY(3px);box-shadow:inset 0 1px 0 #fff5,0 1px 0 #080a0e,0 5px 10px #0009}
.app-card.featured{grid-column:1/-1;min-height:224px;padding:18px 18px 17px;border-radius:23px;
 background:radial-gradient(ellipse 220px 180px at 80% 53%,#737c8a77,transparent 80%),linear-gradient(130deg,#79818d,#414a57 18%,#202630 56%,#10141b 95%);
 border:1px solid #9fa9b8a8;border-right-color:#252a31;border-bottom-color:#080a0e;
 box-shadow:inset 0 1px 1px #ffffff91,inset 0 2px 6px #ffffff18,inset 0 -10px 13px #08090d6d,0 6px 0 #090b0e,0 18px 30px #000b}
.app-card.theme-mint{background:linear-gradient(145deg,#65757a,#36464c 17%,#17252d 62%,#131a22);--card-accent:#dae5ec}
.app-card.theme-rose{background:linear-gradient(146deg,#776d76,#4a424e 19%,#27212b 62%,#17161d);--card-accent:#e1dbe2}
.app-card.theme-violet{background:linear-gradient(145deg,#747380,#414250 20%,#242534 62%,#151720);--card-accent:#e0e1ed}
.app-card.theme-blue{background:linear-gradient(145deg,#6b7887,#3b4a5b 19%,#1b2835 63%,#151b23);--card-accent:#dce8f7}
.app-card.theme-amber{--card-accent:#f1eee8}
.app-card.theme-neutral{background:linear-gradient(145deg,#666b75,#363d45 17%,#1e232b 61%,#12171e)}
.card-top{position:relative;z-index:4}
.app-glyph{display:grid;place-items:center;width:34px;height:34px;border-radius:11px;color:#e6edf5;background:radial-gradient(ellipse at 30% 15%,#8390a078,#1b232d 80%);border:1px solid #dce8fa53;box-shadow:inset 0 1px 0 #ffffff66,inset 0 -3px 6px #0009,0 3px 5px #000a}
.app-glyph svg{width:19px;height:19px}
.card-open{color:#d3dbe6;opacity:.85;border:none;background:linear-gradient(155deg,#505864,#1b212b);width:25px;height:25px;display:grid;place-items:center;border:1px solid #a4b2c34a;border-radius:9px;box-shadow:inset 0 1px 0 #ffffff34,0 2px 5px #000a}
.card-open svg{height:14px;width:14px}
.card-copy{position:relative;z-index:4;min-width:0}
.card-kicker{color:#b5c3d5;font-size:8px;letter-spacing:.19em;font-weight:730;margin-bottom:6px;text-shadow:0 1px 2px #0005}
.app-card h3{font-size:15px;color:#f4f6fa;letter-spacing:-.025em;font-weight:720;line-height:1.18;text-shadow:0 1px 2px #0008;overflow-wrap:anywhere}
.app-card p{font-size:10px;max-width:100%;color:#bfc7d2;line-height:1.35;margin:5px 0 0;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.app-card.featured h3{font-size:23px;line-height:1.13}
.app-card.featured p{font-size:12px;color:#c3cbd4;max-width:62%}
.app-card.featured .app-glyph{width:39px;height:39px}
.app-card.featured .card-kicker{font-size:9px}
.app-card .card-art{position:absolute;z-index:2;pointer-events:none;color:#d8e5fa!important}
.app-card.featured .card-art{width:197px;height:190px;right:4px;top:28px}
.app-card:not(.featured) .card-art{width:125px;height:120px;right:-29px;top:32px}
.orbit-art{filter:drop-shadow(0 3px 3px #0008)}
.orbit{border-color:#e3ebf78a;opacity:.35}
.orbit:nth-child(1){background:radial-gradient(circle at 35% 25%,#c6d0de4f,#34404d70 47%,transparent 65%);border-width:8px;opacity:.32}
.orbit:nth-child(2){border:1px solid #f2f6ffa1;box-shadow:0 0 7px #ffffff31}
.orbit-symbol{font-size:52px;opacity:.22;color:#ffffff}
.performance-wave{opacity:.75;filter:drop-shadow(0 0 8px #e4edfd74) grayscale(1)}
.shoe-art svg{opacity:.28;stroke-width:1.1}
.cards-art{opacity:.7;transform:scale(.83) rotate(-9deg);filter:grayscale(.83)}
.mecha-art svg{opacity:.3;filter:grayscale(1)}
.family-art svg{opacity:.3}
.weather-art{position:relative;width:100%;height:100%}
.weather-art:before{content:"";position:absolute;left:17px;top:15px;height:88px;width:88px;border-radius:50%;border:1px solid #e3ecfd55;box-shadow:inset 0 4px 12px #ffffff18,0 0 0 12px #a9bfd50e,0 0 0 23px #d6e4f30b}
.weather-art svg{position:absolute;left:33px;top:31px;width:58px;height:58px;opacity:.28}
.add-tile{grid-column:1/-1;min-height:65px;border:1px dashed #a5b4c44d;border-radius:16px;background:linear-gradient(145deg,#282e37,#161b22);box-shadow:inset 0 1px 0 #ffffff19,0 4px 7px #0007;padding:12px 15px}
.add-icon{height:32px;width:32px;background:linear-gradient(150deg,#4b5563,#242a33);border-color:#c2d0e344;border-radius:10px}
.add-title{font-size:12px}.add-caption{font-size:10px}
.family-section{grid-column:1/-1;min-width:0;margin-top:7px}
.family-label{display:flex;align-items:center;gap:8px;color:#acb8c8;font-size:9px;letter-spacing:.17em;margin:5px 0 13px;font-weight:720}
.family-label:after{content:"";height:1px;background:linear-gradient(90deg,#c1cfdf6b,transparent);flex:1}
.family-panel{position:relative;overflow:hidden;border:1px solid #a5b2c495;border-right-color:#29313c;border-bottom-color:#080a0d;border-radius:23px;
 background:radial-gradient(ellipse at 93% 0%,#9daabe45,transparent 64%),linear-gradient(151deg,#667180,#343f4d 19%,#1c2531 62%,#131821);
 box-shadow:inset 0 1px 0 #ffffff87,inset 0 -8px 13px #070a105c,0 5px 0 #090b0f,0 14px 23px #0009;padding:17px}
.family-panel:before{content:"";position:absolute;inset:4px;border:1px solid #ffffff14;border-radius:19px;pointer-events:none}
.family-panel-header{display:flex;align-items:center;gap:11px;position:relative;z-index:1}
.family-symbol{width:37px;height:37px;display:grid;place-items:center;border-radius:12px;background:linear-gradient(150deg,#808b9d,#323c4b 65%,#202734);border:1px solid #d4dff15c;color:#eef3ff;box-shadow:inset 0 1px 0 #ffffff81,inset 0 -3px 5px #0007,0 4px 7px #0007}
.family-symbol svg{width:20px;height:20px}
.family-head-copy{display:flex;flex-direction:column;gap:4px}
.family-head-copy strong{font-size:14px;color:#edf2f8}
.family-head-copy span{font-size:10px;color:#b0c0d0}
.family-pulse{margin-left:auto;width:6px;height:6px;border-radius:50%;background:#e5eefa;box-shadow:0 0 9px #cadbf4a8}
.family-actions{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px;margin-top:15px;position:relative;z-index:1}
.family-link{min-width:0;display:flex;align-items:center;gap:7px;padding:12px 9px;min-height:59px;color:#e7edf7;border:1px solid #8491a39e;border-right-color:#1b2028;border-bottom-color:#12151b;background:linear-gradient(142deg,#4a5565,#293340 35%,#202a36 80%);border-radius:13px;box-shadow:inset 0 1px 0 #ffffff65,inset 0 -3px 5px #090d1588,0 3px 0 #0b0e14,0 6px 8px #0008;transition:transform .16s}
.family-link:active{transform:translateY(2px);box-shadow:inset 0 1px 0 #ffffff40}
.family-link-icon{display:grid;place-items:center;width:25px;height:25px;flex:none;border-radius:8px;background:#ced9eb13;border:1px solid #ffffff24}
.family-link-icon svg{width:14px;height:14px}
.family-link-copy{min-width:0;display:flex;flex-direction:column;gap:3px}
.family-link-copy strong{font-size:11px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.family-link-copy small{font-size:9px;color:#abb9c9}
.family-link-arrow{height:12px;width:12px;margin-left:auto;flex:none;color:#c9d5e8}
.home-footer{color:#9aa8b9;padding-top:28px;font-size:9px}
.footer-version{color:#c5cedb}
.bottom-dock{width:min(calc(100vw - 80px),334px);height:64px;bottom:calc(16px + env(safe-area-inset-bottom));padding:6px;background:linear-gradient(155deg,#666e7bdb,#292f39e8 25%,#131820ed 85%);border:1px solid #b9c4d39e;border-right-color:#2c333d;border-bottom-color:#0b0e13;border-radius:20px;-webkit-backdrop-filter:blur(22px);backdrop-filter:blur(22px);box-shadow:inset 0 1px 0 #ffffff72,inset 0 -4px 6px #0007,0 5px 0 #090d12,0 12px 32px #000d}
.dock-tab{border-radius:15px;color:#b3c0cf;font-size:9px}
.dock-tab.active{background:linear-gradient(149deg,#87909f,#3a4655 52%,#26303c);color:#f6f8fe;border:1px solid #dce7fa65;box-shadow:inset 0 1px 0 #ffffff73,inset 0 -3px 5px #0008,0 3px 6px #0007}
.dock-tab svg{width:19px;height:19px}
.dock-divider{opacity:.3}
.page-intro{padding-top:30px}
.page-intro h1{font-size:clamp(32px,8vw,46px);color:#eff2f8}
.library-search{margin-bottom:18px}
.library-item,.settings-panel{background:linear-gradient(145deg,#3d4551,#1a222b 23%,#11171e);border:1px solid #a9b7c957;border-bottom-color:#07090c;box-shadow:inset 0 1px 0 #ffffff34,0 5px 0 #090d12,0 11px 18px #0008}
.library-item{border-radius:17px}
.settings-panel{border-radius:21px}
.primary-action{background:linear-gradient(150deg,#d9e1ed,#778598 70%);border:1px solid #f3f7ff70;color:#101720;box-shadow:inset 0 1px 0 #fff7,0 3px 6px #0008}
.app-dialog{background:linear-gradient(160deg,#303945,#101820 65%);border:1px solid #9baac079;box-shadow:0 24px 90px #000d}
@media(min-width:700px){
 body{background:radial-gradient(ellipse at 50% -10%,#2b313d,#080a0e 68%)}
 .app-shell{width:min(calc(100% - 60px),1000px);padding:0 30px 150px;margin-top:26px}
 .topbar{height:84px}.hero{padding-top:31px}.hero h1{font-size:46px}
 .app-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:15px}
 .app-card{min-height:206px;padding:17px}
 .app-card.featured{grid-column:span 2;min-height:217px;padding:21px}
 .app-card h3{font-size:17px}.app-card.featured h3{font-size:25px}
 .app-card p{font-size:11px}
 .family-section{grid-column:span 2;margin-top:0;align-self:stretch}
 .family-panel{height:100%;display:flex;flex-direction:column;justify-content:space-between}
 .add-tile{grid-column:span 2}
}
@media(max-width:365px){
 .app-shell{width:calc(100% - 10px);padding:0 13px 126px;margin-top:5px;border-radius:25px}
 .app-card{min-height:159px;padding:12px}.app-card.featured{min-height:198px;padding:16px}
 .app-card h3{font-size:13px}.app-card.featured h3{font-size:21px}
 .family-link{padding:9px 7px;gap:5px}.family-link-copy strong{font-size:10px}
 .hero h1{font-size:29px}
 .bottom-dock{width:calc(100vw - 76px)}
}
@media(hover:none){.app-card:hover{transform:none}}
@media(prefers-reduced-motion:reduce){.app-card,.family-link{transition:none!important}}