:root {
  color-scheme: light dark;
  --bg: #fff8ef;
  --ink: #1d1d1f;
  --muted: #6e6e73;
  --glass: rgba(255, 255, 255, .66);
  --line: rgba(255, 255, 255, .86);
  --shadow: 0 22px 70px rgba(40, 40, 35, .11);
  --control: rgba(255, 255, 255, .72);
  --card: rgba(255, 255, 255, .72);
  --accent: #ef5b3f;
  --accent-2: #f29a38;
  --orb-1: #ff7657;
  --orb-2: #f6c64b;
  --orb-3: #72d49b;
  --orb-4: #48c7bd;
  --orb-5: #ef6f82;
}
@media (prefers-color-scheme: dark) { :root { --bg:#15130f; --ink:#fffaf2; --muted:#b8b1a6; --glass:rgba(31,29,25,.68); --line:rgba(255,255,255,.14); --shadow:0 24px 80px rgba(0,0,0,.38); --control:rgba(255,255,255,.09); --card:rgba(25,24,22,.84); } }
* { box-sizing: border-box; }
body { margin:0; min-height:100vh; font:16px/1.5 -apple-system,BlinkMacSystemFont,"SF Pro Display","PingFang SC",sans-serif; color:var(--ink); background:var(--bg); overflow-x:hidden; }
.ambient-orbs { position:fixed; inset:0; z-index:-1; overflow:hidden; pointer-events:none; }
.orb { position:absolute; display:block; border-radius:50%; filter:blur(62px); opacity:.58; will-change:transform; }
.orb-coral { width:42vw; height:42vw; min-width:340px; min-height:340px; left:-13vw; top:-16vw; background:var(--orb-1); animation:drift-a 20s ease-in-out infinite alternate; }
.orb-sun { width:34vw; height:34vw; min-width:280px; min-height:280px; right:-8vw; top:5vh; background:var(--orb-2); animation:drift-b 24s ease-in-out -7s infinite alternate; }
.orb-mint { width:38vw; height:38vw; min-width:320px; min-height:320px; left:14vw; bottom:-22vw; background:var(--orb-3); animation:drift-a 27s ease-in-out -12s infinite alternate-reverse; }
.orb-cyan { width:28vw; height:28vw; min-width:240px; min-height:240px; right:8vw; bottom:-10vw; background:var(--orb-4); opacity:.42; animation:drift-b 22s ease-in-out -4s infinite alternate-reverse; }
.orb-berry { width:23vw; height:23vw; min-width:210px; min-height:210px; left:42vw; top:30vh; background:var(--orb-5); opacity:.36; animation:drift-c 19s ease-in-out -9s infinite alternate; }
@keyframes drift-a { from { transform:translate3d(-4%,2%,0) scale(.94); } to { transform:translate3d(18%,-10%,0) scale(1.14); } }
@keyframes drift-b { from { transform:translate3d(5%,-6%,0) scale(1); } to { transform:translate3d(-20%,14%,0) scale(1.18); } }
@keyframes drift-c { from { transform:translate3d(-18%,-8%,0) scale(.9); } to { transform:translate3d(22%,18%,0) scale(1.2); } }
body[data-theme="light"] { color-scheme:light; --bg:#fff8ef; --ink:#1d1d1f; --muted:#5e5e63; --glass:rgba(255,255,255,.72); --line:rgba(255,255,255,.9); --shadow:0 22px 70px rgba(70,48,28,.12); --control:rgba(255,255,255,.78); --card:rgba(255,255,255,.68); }
body[data-theme="dark"] { color-scheme:dark; --bg:#15130f; --ink:#fffaf2; --muted:#c4bdb2; --glass:rgba(31,29,25,.68); --line:rgba(255,255,255,.13); --shadow:0 24px 80px rgba(0,0,0,.38); --control:rgba(255,255,255,.09); --card:rgba(25,24,22,.86); }
.shell { width:min(1080px,calc(100% - 32px)); margin:auto; padding:22px 0 44px; }
.glass { background:var(--glass); border:1px solid var(--line); box-shadow:var(--shadow); backdrop-filter:blur(28px) saturate(150%); -webkit-backdrop-filter:blur(28px) saturate(150%); }
.topbar { position:relative; z-index:30; display:flex; justify-content:space-between; align-items:center; padding:12px 14px 12px 18px; border-radius:24px; }
.brand { display:flex; gap:10px; align-items:center; min-width:0; font-weight:700; letter-spacing:-.02em; }.brand > span:last-child{line-height:1.15}.brand-mark { flex:none; display:grid; place-items:center; width:30px; height:30px; border-radius:50%; color:#fff; background:linear-gradient(135deg,var(--accent),var(--accent-2) 62%,var(--orb-3)); box-shadow:0 8px 22px color-mix(in srgb,var(--accent) 35%,transparent); }.utility-actions{position:relative;z-index:40;display:flex;justify-content:flex-end;align-items:center;gap:9px;margin:12px 4px 0}.contact-menu{position:relative}.contact-button{min-width:96px;border:1px solid var(--line);border-radius:13px;padding:9px 13px;color:var(--ink);background:var(--control);font:inherit;font-size:14px;font-weight:700;cursor:pointer}.contact-panel{position:absolute;z-index:100;right:0;top:calc(100% + 10px);width:250px;padding:8px;border-radius:18px;transform-origin:top right}.contact-panel:not([hidden]){display:block;animation:contact-pop .24s cubic-bezier(.2,.85,.25,1) both}.contact-panel button{display:grid;gap:2px;width:100%;padding:11px 12px;border:0;border-radius:12px;text-align:left;color:var(--ink);background:transparent;font:inherit;cursor:pointer}.contact-panel button:hover{background:color-mix(in srgb,var(--accent) 12%,transparent)}.contact-panel span{color:var(--muted);font-size:13px}.contact-panel strong{font-size:15px}.copy-toast{position:fixed;z-index:999;left:50%;top:calc(env(safe-area-inset-top,0px) + 76px);bottom:auto;transform:translate(-50%,-12px) scale(.96);padding:11px 17px;border-radius:999px;color:#fff;background:rgba(25,24,22,.94);box-shadow:0 12px 32px #0005;opacity:0;pointer-events:none;transition:.25s;white-space:nowrap}.copy-toast.show{opacity:1;transform:translate(-50%,0) scale(1)}.udid-button{display:flex;align-items:center;gap:7px;border:1px solid color-mix(in srgb,var(--accent) 28%,var(--line));border-radius:13px;padding:9px 13px;color:#fff;background:linear-gradient(110deg,var(--accent),var(--accent-2));box-shadow:0 8px 22px color-mix(in srgb,var(--accent) 22%,transparent);font:inherit;font-size:14px;font-weight:700;cursor:pointer;transition:transform .2s ease,filter .2s ease}.udid-button span{font-size:19px;line-height:1}.udid-button:hover{transform:translateY(-1px);filter:saturate(1.1)}.udid-button:disabled{opacity:.64;cursor:wait;transform:none}.theme-button { border:0; border-radius:13px; width:38px; height:38px; color:var(--ink); background:rgba(110,110,115,.12); font-size:20px; cursor:pointer; }
.hero { padding:70px 8px 34px; }.eyebrow { color:var(--muted); font-weight:700; margin:0 0 10px; }.hero h1 { font-size:clamp(42px,7vw,76px); line-height:.98; letter-spacing:-.065em; margin:0; max-width:760px; }.hero h1 span { color:var(--ink); }.intro { color:var(--muted); font-size:18px; margin:22px 0; }.status { display:inline-flex; align-items:center; gap:9px; padding:8px 13px; border-radius:999px; color:var(--muted); font-size:14px; }.status i { width:8px; height:8px; border-radius:50%; background:#48a868; box-shadow:0 0 0 5px #48a86825; }
.employee-panel { display:flex; align-items:center; justify-content:space-between; gap:22px; padding:22px; border-radius:26px; margin-bottom:18px; }.employee-panel h2 { margin:0; font-size:22px; letter-spacing:-.03em; }.employee-panel p:not(.eyebrow) { color:var(--muted); margin:5px 0 0; }.employee-panel.is-unselected{border-color:color-mix(in srgb,var(--accent) 30%,var(--line));}.device-limit{max-width:650px;line-height:1.55}.employee-select { display:grid; gap:6px; min-width:230px; color:var(--muted); font-size:13px; }.employee-select select { appearance:none; border:1px solid var(--line); border-radius:14px; padding:13px 38px 13px 14px; color:var(--ink); background:var(--control); font:inherit; cursor:pointer; }.employee-panel.is-unselected .employee-select select{border-color:color-mix(in srgb,var(--accent) 48%,var(--line));}
.toolbar { display:flex; gap:12px; align-items:center; margin:16px 0 22px; flex-wrap:wrap; }.search { display:flex; gap:8px; align-items:center; padding:0 14px; border-radius:16px; min-width:230px; flex:1; height:48px; }.search span { font-size:25px; color:var(--muted); }.search input { border:0; outline:0; width:100%; background:transparent; color:var(--ink); font:inherit; }.chip-row { display:flex; gap:8px; }.chip { border:1px solid var(--line); border-radius:999px; background:var(--glass); color:var(--muted); padding:10px 14px; cursor:pointer; }.chip.active { background:var(--accent); border-color:var(--accent); color:white; }
.app-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:15px; }.app-card { position:relative; padding:20px; border-radius:26px; overflow:hidden; background:var(--card); transition:transform .25s ease,box-shadow .25s ease; }.app-card::after { content:""; position:absolute; width:120px; height:120px; border-radius:50%; right:-55px; top:-55px; background:linear-gradient(135deg,color-mix(in srgb,var(--accent-2) 45%,transparent),color-mix(in srgb,var(--orb-3) 32%,transparent)); filter:blur(18px); pointer-events:none; }.app-card > * { position:relative; z-index:1; }.app-card:hover { transform:translateY(-4px); box-shadow:0 25px 70px rgba(35,30,25,.2); }.app-icon-wrap { position:relative; width:54px; height:54px; isolation:isolate; }.icon-aura { position:absolute; inset:7px; z-index:0; border-radius:18px; background:linear-gradient(135deg,var(--c1),var(--c2)); filter:blur(15px) saturate(1.45); opacity:.72; transform:scale(1.25); pointer-events:none; }.icon-aura img { width:100%; height:100%; border-radius:14px; object-fit:cover; }.app-icon { position:relative; z-index:1; width:54px; height:54px; display:grid; place-items:center; border-radius:17px; color:#fff; font-size:24px; font-weight:700; background:linear-gradient(135deg,var(--c1),var(--c2)); box-shadow:0 8px 18px rgba(20,20,20,.16); overflow:hidden; }.app-icon img { width:100%; height:100%; object-fit:cover; }.app-card h2 { font-size:20px; margin:18px 0 3px; }.meta { color:var(--muted); font-size:14px; }.description { color:var(--muted); font-size:15px; line-height:1.55; min-height:3.1em; margin:10px 0 0; overflow-wrap:anywhere; white-space:normal; }.install { display:block; width:100%; border:0; text-align:center; text-decoration:none; color:#fff; background:linear-gradient(110deg,var(--accent),var(--accent-2)); box-shadow:0 10px 24px color-mix(in srgb,var(--accent) 26%,transparent); border-radius:14px; padding:11px; margin-top:18px; font:inherit; font-weight:700; cursor:pointer; transition:transform .2s ease,filter .2s ease; }.install:hover { filter:saturate(1.12); transform:translateY(-1px); }.install.blocked { background:#785d55; }.install.revoked { background:linear-gradient(110deg,#7b7775,#514e4d); box-shadow:none; }.empty { padding:28px; text-align:center; border-radius:22px; color:var(--muted); } footer { display:flex; justify-content:space-between; color:var(--muted); font-size:13px; padding:30px 5px 0; }
.icon-aura img { display:block; max-width:54px; max-height:54px; }
@keyframes section-arrive { from { opacity:0; transform:translateY(18px); } to { opacity:1; transform:translateY(0); } }
@keyframes card-arrive { 0% { opacity:0; transform:translateY(26px) scale(.965); } 70% { opacity:1; transform:translateY(-2px) scale(1.006); } 100% { opacity:1; transform:translateY(0) scale(1); } }
@keyframes aura-breathe { from { opacity:.42; transform:scale(1.08); } to { opacity:.82; transform:scale(1.42); } }
@keyframes status-pulse { 0%,100% { transform:scale(1); box-shadow:0 0 0 5px #48a86825; } 50% { transform:scale(1.12); box-shadow:0 0 0 9px #48a86812; } }
@keyframes button-sheen { from { left:-35%; } to { left:125%; } }
@keyframes contact-pop { from { opacity:0; transform:translateY(-8px) scale(.94); } to { opacity:1; transform:translateY(0) scale(1); } }
.topbar,.utility-actions,.hero,.employee-panel,.toolbar,footer { animation:section-arrive .7s cubic-bezier(.2,.8,.2,1) both; }
.topbar { animation-delay:.03s; }.utility-actions{animation-delay:.07s}.hero { animation-delay:.1s; }.employee-panel { animation-delay:.18s; }.toolbar { animation-delay:.25s; }footer { animation-delay:.32s; }
.app-card { animation:card-arrive .68s cubic-bezier(.18,.82,.22,1) both; }
.icon-aura { animation:aura-breathe 3.2s ease-in-out infinite alternate; }
.status i { animation:status-pulse 2.2s ease-in-out infinite; }
.app-icon { transition:transform .35s cubic-bezier(.2,.8,.2,1); }
.app-card:hover .app-icon { transform:translateY(-3px) rotate(-2deg) scale(1.04); }
.install { position:relative; overflow:hidden; }
.install::after { content:""; position:absolute; inset:-30% auto -30% -35%; width:24%; background:linear-gradient(90deg,transparent,rgba(255,255,255,.58),transparent); transform:skewX(-20deg); pointer-events:none; }
.app-card:hover .install::after { animation:button-sheen .9s ease-out .08s; }
.search:focus-within { border-color:color-mix(in srgb,var(--accent) 38%,white); box-shadow:0 18px 55px color-mix(in srgb,var(--accent) 13%,transparent); transform:translateY(-1px); }
.search { transition:transform .25s ease,border-color .25s ease,box-shadow .25s ease; }
@media (prefers-reduced-motion: reduce) { .orb,.topbar,.utility-actions,.hero,.employee-panel,.toolbar,footer,.app-card,.icon-aura,.status i,.install::after { animation:none!important; }.app-card,.app-icon,.install,.search { transition:none!important; } }
@media (max-width:760px) { .shell{width:min(100% - 22px,560px);padding-top:11px}.topbar{padding-left:14px}.utility-actions{gap:7px}.contact-button,.udid-button{padding:9px 11px;font-size:13px}.hero{padding:48px 4px 26px}.app-grid{grid-template-columns:1fr 1fr}.app-card{padding:16px;border-radius:22px}.app-card h2{font-size:17px}.install{font-size:14px}footer{gap:12px;flex-direction:column} }
@media (max-width:760px) { .employee-panel{align-items:stretch;flex-direction:column}.employee-select{min-width:0} }
@media (max-width:430px) { .brand{font-size:12px;gap:6px}.brand-mark{width:28px;height:28px}.utility-actions{width:100%;justify-content:stretch;margin:10px 0 0}.contact-menu,.contact-button,.udid-button{flex:1}.contact-button{width:100%}.udid-button{justify-content:center}.contact-button,.udid-button{padding:9px 10px}.udid-button span{display:none}.theme-button{width:36px;height:36px}.contact-panel{right:auto;left:0}.app-grid{grid-template-columns:1fr}.hero h1{font-size:48px}.toolbar{display:block}.search{margin-bottom:10px}.chip-row{overflow:auto;padding-bottom:3px} }