/* OPCBOOK Design System — Linear / Stripe / Notion 级国际化科技品牌质感 */
:root {
  --brand: #2563EB;
  --brand-50: #EFF6FF;
  --brand-100: #DBEAFE;
  --brand-200: #BFDBFE;
  --brand-600: #1D4ED8;
  --brand-900: #0D1B2A;
  --ink: #0D1B2A;
  --slate: #64748B;
  --cloud: #E5E7EB;
  --mist: #F8FAFC;
  --agent: #06B6D4;
}

* { -webkit-font-smoothing: antialiased; }
body { font-family: Inter, "HarmonyOS Sans SC", "PingFang SC", system-ui, sans-serif; }

/* Container */
.container-x { max-width: 1280px; margin-left: auto; margin-right: auto; padding-left: 1.5rem; padding-right: 1.5rem; }
@media (max-width: 768px) { .container-x { padding-left: 1rem; padding-right: 1rem; } }

/* Buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: .5rem; font-weight: 500; border-radius: .625rem; transition: all .15s ease; cursor: pointer; white-space: nowrap; user-select: none; border: 1px solid transparent; }
.btn-primary { background: var(--brand); color: #fff; }
.btn-primary:hover { background: var(--brand-600); box-shadow: 0 4px 12px rgba(13,27,42,.08); }
.btn-outline { background: #fff; color: var(--ink); border-color: var(--cloud); }
.btn-outline:hover { border-color: var(--brand); color: var(--brand); }
.btn-ghost { background: transparent; color: var(--slate); }
.btn-ghost:hover { color: var(--ink); background: var(--mist); }
.btn-sm { height: 2rem; padding: 0 .875rem; font-size: .8125rem; }
.btn-md { height: 2.5rem; padding: 0 1.125rem; font-size: .875rem; }
.btn-lg { height: 3rem; padding: 0 1.5rem; font-size: 1rem; }

/* Cards */
.card { background: #fff; border: 1px solid var(--cloud); border-radius: 1rem; padding: 1.5rem; transition: all .15s ease; }
.card:hover { box-shadow: 0 4px 12px rgba(13,27,42,.08); }
.card-ai { background: linear-gradient(135deg, #EFF6FF 0%, #ECFEFF 100%); border-color: var(--brand-200); border-radius: 1rem; padding: 1.5rem; }

/* Tags */
.tag { display: inline-flex; align-items: center; padding: .125rem .625rem; font-size: .75rem; font-weight: 500; border-radius: 9999px; background: var(--mist); color: var(--slate); border: 1px solid var(--cloud); }
.tag-brand { background: var(--brand-50); color: var(--brand-600); border-color: var(--brand-200); }
.tag-agent { background: var(--agent); color: #fff; border-color: var(--agent); }
.tag-success { background: #ECFDF5; color: #047857; border-color: #A7F3D0; }
.tag-warning { background: #FFFBEB; color: #B45309; border-color: #FDE68A; }

/* Avatar */
.avatar { display: inline-flex; align-items: center; justify-content: center; border-radius: 9999px; overflow: hidden; background: var(--mist); position: relative; }
.avatar-verified::after { content: '✓'; position: absolute; right: -2px; bottom: -2px; height: 1rem; width: 1rem; background: var(--brand); color: #fff; border-radius: 9999px; font-size: .65rem; display: flex; align-items: center; justify-content: center; border: 2px solid #fff; font-weight: 700; }

/* Hero gradient */
.hero-gradient { background: radial-gradient(ellipse 80% 60% at 50% 0%, rgba(37,99,235,.08), transparent 60%); }
.text-gradient { background: linear-gradient(90deg, #2563EB 0%, #06B6D4 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }

/* Animations */
@keyframes pulse-dot { 0%,100%{opacity:1;transform:scale(1)} 50%{opacity:.5;transform:scale(.85)} }
.pulse-dot { animation: pulse-dot 2s ease-in-out infinite; }
@keyframes float { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-6px)} }
.float-in { animation: float 4s ease-in-out infinite; }
@keyframes fade-up { from{opacity:0;transform:translateY(12px)} to{opacity:1;transform:translateY(0)} }
.fade-up { animation: fade-up .5s ease-out both; }

/* Active nav link */
.nav-link { position: relative; padding: .5rem .75rem; font-size: .875rem; color: var(--slate); transition: color .15s; }
.nav-link:hover { color: var(--ink); }
.nav-link.active { color: var(--brand); }
.nav-link.active::after { content: ''; position: absolute; left: .75rem; right: .75rem; bottom: -1px; height: 2px; background: var(--brand); border-radius: 2px; }

/* Scrollbar */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-thumb { background: var(--cloud); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: #cbd5e1; }

/* Skeleton dotted bg */
.dot-grid { background-image: radial-gradient(rgba(37,99,235,.12) 1px, transparent 1px); background-size: 24px 24px; }