:root{
  --bg:#fbfbfd; --bg-card:#ffffff; --bg-elev:#f5f5f7;
  --text:#1d1d1f; --text-2:#424245; --text-3:#6e6e73; --text-4:#86868b;
  --border:#e5e7eb; --border-soft:#e5e7eb;
  --accent:#0071e3; --accent-hover:#0077ed;
  --danger:#ff3b30; --success:#34c759; --warning:#ff9500;
}
*{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;-webkit-tap-highlight-color:transparent}
html{scroll-behavior:smooth; width:100%; overflow-x:hidden;}
body{font-family:'Inter',-apple-system,BlinkMacSystemFont,'SF Pro Display','SF Pro Text','Helvetica Neue',sans-serif;background:var(--bg);color:var(--text);letter-spacing:-0.015em;width:100%;overflow-x:hidden}
.display-text{letter-spacing:-0.035em;line-height:1.05}
.text-balance{text-wrap:balance}

.grid-bg{background-image:linear-gradient(rgba(0,0,0,0.018) 1px,transparent 1px),linear-gradient(90deg,rgba(0,0,0,0.018) 1px,transparent 1px);background-size:64px 64px;mask-image:radial-gradient(ellipse 80% 60% at 50% 30%,black 30%,transparent 80%);-webkit-mask-image:radial-gradient(ellipse 80% 60% at 50% 30%,black 30%,transparent 80%);}
.hero-glow{background:radial-gradient(circle at 50% 35%,rgba(0,113,227,0.10),transparent 55%),radial-gradient(circle at 30% 60%,rgba(175,82,222,0.06),transparent 50%),radial-gradient(circle at 70% 50%,rgba(255,69,58,0.05),transparent 50%);filter:blur(20px);}

.search-shell{background:rgba(255,255,255,0.85);backdrop-filter:saturate(180%) blur(20px);-webkit-backdrop-filter:saturate(180%) blur(20px);box-shadow:0 1px 2px rgba(0,0,0,0.04),0 4px 16px rgba(0,0,0,0.04),0 16px 48px rgba(0,0,0,0.06),inset 0 0 0 1px rgba(0,0,0,0.04);transition:all 0.4s cubic-bezier(0.4,0,0.2,1);}
.search-shell:focus-within{box-shadow:0 1px 2px rgba(0,0,0,0.05),0 8px 28px rgba(0,113,227,0.12),0 24px 64px rgba(0,113,227,0.08),inset 0 0 0 1.5px rgba(0,113,227,0.4);transform:translateY(-1px);}

.btn-primary{background:#1d1d1f;color:#fff;transition:all 0.2s ease;}
.btn-primary:hover{background:#000}
.btn-primary:active{transform:scale(0.97)}
.btn-ghost{background:rgba(0,0,0,0.04);transition:all 0.2s ease;}
.btn-ghost:hover{background:rgba(0,0,0,0.07)}
.btn-ghost:active{transform:scale(0.97)}

.platform-chip{background:rgba(255,255,255,0.7);backdrop-filter:blur(10px);border:1px solid rgba(0,0,0,0.06);transition:all 0.25s cubic-bezier(0.4,0,0.2,1);}
.platform-chip:hover{transform:translateY(-2px);box-shadow:0 8px 20px rgba(0,0,0,0.08);border-color:rgba(0,0,0,0.1);}

@keyframes cardIn{from{opacity:0;transform:translateY(16px) scale(0.98)}to{opacity:1;transform:translateY(0) scale(1)}}
.result-card{animation:cardIn 0.5s cubic-bezier(0.16,1,0.3,1)}
@keyframes dot{0%,60%,100%{opacity:0.3;transform:translateY(0)}30%{opacity:1;transform:translateY(-3px)}}
.loading-dot{animation:dot 1.4s ease-in-out infinite}
.loading-dot:nth-child(2){animation-delay:0.15s}
.loading-dot:nth-child(3){animation-delay:0.3s}
@keyframes shimmer{0%{background-position:-200% 0}100%{background-position:200% 0}}
.skeleton{background:linear-gradient(90deg,#f0f0f2 25%,#e4e4e8 50%,#f0f0f2 75%);background-size:200% 100%;animation:shimmer 1.4s infinite;}
@keyframes shake{0%,100%{transform:translateX(0)}25%{transform:translateX(-5px)}75%{transform:translateX(5px)}}
.shake{animation:shake 0.4s ease}
@keyframes toastIn{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}
.toast{animation:toastIn 0.3s cubic-bezier(0.16,1,0.3,1)}
@keyframes statusPulse{0%{box-shadow:0 0 0 0 rgba(52,199,89,0.5)}70%{box-shadow:0 0 0 8px rgba(52,199,89,0)}100%{box-shadow:0 0 0 0 rgba(52,199,89,0)}}
.status-dot{animation:statusPulse 2s infinite}
@keyframes modalIn{from{opacity:0;transform:scale(0.95)}to{opacity:1;transform:scale(1)}}
.modal-card{animation:modalIn 0.3s cubic-bezier(0.16,1,0.3,1)}

::-webkit-scrollbar{width:8px;height:8px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:var(--border);border-radius:4px}

.search-input{caret-color:var(--accent)}

.glass-card{background:rgba(255,255,255,0.72);backdrop-filter:saturate(180%) blur(20px);-webkit-backdrop-filter:saturate(180%) blur(20px);border:1px solid rgba(255,255,255,0.6);box-shadow:0 1px 2px rgba(0,0,0,0.04),0 8px 32px rgba(0,0,0,0.06);}

.line-clamp-2{display:-webkit-box;-webkit-line-clamp:2;line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;}

@media (prefers-reduced-motion: reduce){*,*::before,*::after{animation-duration:0.01ms !important;animation-iteration-count:1 !important;transition-duration:0.01ms !important}}
::selection{background:rgba(0,113,227,0.15);color:#003580}