/* ============================================================
 * 雾海珍珠 Ocean Pearl · 设计系统（无构建版）
 *
 * 移植自「投手帮」packages/ui：
 *   - src/tailwind-preset.ts  （色板 / 圆角 / 阴影 / 渐变 / 动效）
 *   - src/styles/globals.css  （ocean-* 组件材质）
 *
 * 风格关键词：淡雅海蓝、珍珠白底、冰晶边框、玻璃浮层、深海文字、贝壳金点缀
 * 本文件只放「设计系统」层，业务样式在 app.css。
 * ========================================================== */

/* ---------- 1. Design Tokens ---------- */
:root {
  /* 主品牌色 Brand Ocean */
  --brand-50:  #F0FAFC;
  --brand-100: #DDF3F7;
  --brand-200: #BFE6EE;
  --brand-300: #91D2DF;
  --brand-400: #5DB8CA;
  --brand-500: #3F9FB6;
  --brand-600: #2F879D;
  --brand-700: #286F82;
  --brand-800: #245D6E;
  --brand-900: #173D49;
  --brand-950: #0D2831;

  /* 中性色 Neutral Pearl */
  --pearl-0:   #FFFFFF;
  --pearl-50:  #FAFDFD;
  --pearl-100: #F6FBFC;
  --pearl-200: #EEF7F9;
  --pearl-300: #E4F1F4;
  --pearl-400: #D5E7EB;
  --pearl-500: #B8D1D8;

  /* 文字色 Deep Sea */
  --sea-500: #75929A;
  --sea-600: #557984;
  --sea-700: #315D68;
  --sea-800: #1C4652;
  --sea-900: #12313B;
  --sea-950: #0D2630;

  /* 点缀色 */
  --shell-gold:      #D8B46A;
  --shell-gold-soft: #F5EBD0;
  --coral:      #E65F5C;
  --coral-soft: #FFF0EF;
  --coral-deep: #A93532;
  --aqua: #28A88F;
  --iris: #7C73D9;

  /* 状态色 */
  --success-50: #ECFDF7; --success-100: #D8F7EB; --success-200: #C2EFDC;
  --success-500: #16A37B; --success-600: #0E8A66; --success-700: #087052;
  --warning-50: #FFF8E8; --warning-100: #FCEFCC; --warning-200: #F4DFA0;
  --warning-500: #D99A22; --warning-600: #B07D14; --warning-700: #8A5B0A;
  --danger-50: #FFF0EF;  --danger-100: #FFD9D7;  --danger-200: #F7B5B2;
  --danger-500: #E65F5C; --danger-600: #C94B49;  --danger-700: #A93532;
  --info-50: #EEF8FB;    --info-100: #D8EEF4;    --info-200: #BCDFE8;
  --info-500: #3F9FB6;   --info-600: #2F879D;    --info-700: #236D80;

  /* 圆角阶梯 */
  --r-xs: 6px; --r-sm: 8px; --r-md: 12px; --r-lg: 16px;
  --r-xl: 20px; --r-2xl: 24px; --r-pill: 999px;

  /* 阴影（蓝灰偏冷光） */
  --sh-l1: 0 1px 2px rgba(15,74,88,.04), 0 6px 16px -8px rgba(15,74,88,.08);
  --sh-l2: 0 2px 4px rgba(15,74,88,.05), 0 12px 28px -12px rgba(15,74,88,.14);
  --sh-l3: 0 6px 12px rgba(15,74,88,.08), 0 18px 36px -14px rgba(15,74,88,.18);
  --sh-l4: 0 12px 24px rgba(15,74,88,.10), 0 28px 60px -20px rgba(28,115,135,.22);
  --sh-inset: inset 0 1px 0 rgba(255,255,255,.75), inset 0 -1px 0 rgba(15,74,88,.04);
  --sh-focus: 0 0 0 3px rgba(63,159,182,.18);

  /* 动效 */
  --ease-ocean: cubic-bezier(.2,.8,.2,1);

  /* 布局 */
  --header-h: 68px;
  /* 内容区宽度：卡片墙一行 4 个，太窄会挤成小图看不清 */
  --pc-content: 1520px;
  --pc-content-xl: 1720px;
}
/* 投手帮那套自定义贝壳鼠标指针（40×40 内联 SVG）这里不用 —— 太大了，压在小按钮上很别扭。
   一律走系统默认指针。 */

/* ---------- 2. Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; padding: 0; border-color: var(--pearl-400); }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 16px);
}

html, body {
  background-color: var(--pearl-100);
  color: var(--sea-800);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  -webkit-tap-highlight-color: transparent;
  text-rendering: optimizeLegibility;
}

body {
  font-family: 'Inter', 'PingFang SC', 'Microsoft YaHei', system-ui, -apple-system, sans-serif;
  font-size: 15px;
  line-height: 1.65;
  font-feature-settings: 'rlig' 1, 'calt' 1;
  min-height: 100vh;
  overflow-x: hidden;
}

img, svg { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
button, a { -webkit-user-select: none; user-select: none; }
button, input, select, textarea { font: inherit; color: inherit; }
button { background: none; border: 0; cursor: pointer; }
ul, ol { list-style: none; }
table { border-collapse: collapse; width: 100%; }

h1, h2, h3, h4, h5 { color: var(--sea-950); font-weight: 700; line-height: 1.3; letter-spacing: -.01em; }

::selection { background: var(--brand-200); color: var(--sea-950); }

/* 滚动条 */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--pearl-200); }
::-webkit-scrollbar-thumb { background: var(--pearl-500); border-radius: var(--r-pill); border: 2px solid var(--pearl-200); }
::-webkit-scrollbar-thumb:hover { background: var(--brand-300); }

/* ---------- 3. 雾海背景 ---------- */
.ocean-app-bg {
  background-color: var(--pearl-100);
  background-image:
    radial-gradient(60% 50% at 0% 0%,     rgba(191,230,238,.55) 0%, rgba(246,251,252,0) 60%),
    radial-gradient(48% 40% at 100% 0%,   rgba(145,210,223,.32) 0%, rgba(246,251,252,0) 55%),
    radial-gradient(70% 60% at 100% 100%, rgba(216,244,250,.45) 0%, rgba(246,251,252,0) 55%),
    linear-gradient(180deg, #F6FBFC 0%, #EEF7F9 100%);
  background-attachment: fixed;
}

/* 鼠标设备上的微交互（不改鼠标指针样式，用系统默认的） */
@media (pointer: fine) {
  body.ocean-app-bg :where(a[href], button:not(:disabled), [role='button'], summary, label[for],
    select:not(:disabled), input[type='checkbox'], input[type='radio'], .cursor-pointer) {
    touch-action: manipulation;
  }
  body.ocean-app-bg :where(button:not(:disabled), a[href], [role='button'], .cursor-pointer):hover { filter: saturate(1.04); }
  body.ocean-app-bg :where(button:not(:disabled), a[href], [role='button']):active { transform: translateY(1px) scale(.992); }
}

/* ---------- 4. 容器 ---------- */
.container-responsive {
  width: 100%;
  padding: 0 16px;
  margin: 0 auto;
}
@media (min-width: 640px)  { .container-responsive { padding: 0 20px; } }
@media (min-width: 1024px) { .container-responsive { padding: 0 32px; max-width: var(--pc-content); } }
@media (min-width: 1680px) { .container-responsive { padding: 0 40px; max-width: var(--pc-content-xl); } }

/* ---------- 5. 表面材质 ---------- */
.ocean-surface {
  background-color: var(--pearl-0);
  border: 1px solid var(--pearl-400);
  border-radius: var(--r-lg);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.85),
    0 1px 2px rgba(15,74,88,.04),
    0 6px 16px -8px rgba(15,74,88,.08);
}

.ocean-glass {
  background-color: rgba(246,251,252,.78);
  -webkit-backdrop-filter: saturate(140%) blur(14px);
  backdrop-filter: saturate(140%) blur(14px);
  border: 1px solid rgba(191,230,238,.7);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.7),
    0 6px 24px -12px rgba(15,74,88,.18);
}

.ocean-card {
  position: relative;
  background-color: var(--pearl-0);
  border: 1px solid var(--pearl-400);
  border-radius: var(--r-lg);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.85),
    0 1px 2px rgba(15,74,88,.04),
    0 6px 16px -8px rgba(15,74,88,.08);
  transition:
    transform 220ms var(--ease-ocean),
    box-shadow 220ms var(--ease-ocean),
    border-color 180ms var(--ease-ocean);
}
.ocean-card-hoverable:hover {
  transform: translateY(-2px);
  border-color: var(--brand-300);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.9),
    0 2px 4px rgba(15,74,88,.05),
    0 12px 28px -12px rgba(15,74,88,.16);
}
.ocean-card-hoverable:active {
  transform: translateY(0) scale(.996);
  box-shadow: inset 0 1px 2px rgba(15,74,88,.10), 0 1px 2px rgba(15,74,88,.06);
}

/* 交易卡：左侧海蓝锚点条 */
.ocean-trading-card {
  position: relative;
  background-color: var(--pearl-0);
  border: 1px solid var(--pearl-400);
  border-radius: var(--r-lg);
  overflow: hidden;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.85),
    0 1px 2px rgba(15,74,88,.04),
    0 8px 18px -10px rgba(15,74,88,.10);
  transition:
    transform 220ms var(--ease-ocean),
    box-shadow 220ms var(--ease-ocean),
    border-color 180ms var(--ease-ocean);
}
.ocean-trading-card::before {
  content: '';
  position: absolute;
  left: 0; top: 14px; bottom: 14px;
  width: 3px;
  border-radius: 0 2px 2px 0;
  background: linear-gradient(180deg, var(--brand-300) 0%, var(--brand-500) 100%);
  opacity: .6;
  transition: opacity 180ms var(--ease-ocean);
  z-index: 2;
}
.ocean-trading-card:hover {
  transform: translateY(-2px);
  border-color: var(--brand-300);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.9),
    0 4px 8px rgba(15,74,88,.06),
    0 14px 32px -14px rgba(15,74,88,.18);
}
.ocean-trading-card:hover::before { opacity: 1; }

/* 重点面板 */
.ocean-premium-panel {
  position: relative;
  border-radius: var(--r-2xl);
  border: 1px solid rgba(191,230,238,.8);
  background-color: var(--pearl-0);
  background-image:
    radial-gradient(80% 60% at 0% 0%,   rgba(191,230,238,.55) 0%, rgba(255,255,255,0) 60%),
    radial-gradient(60% 50% at 100% 0%, rgba(216,180,106,.16) 0%, rgba(255,255,255,0) 60%),
    linear-gradient(180deg, #FFFFFF 0%, #F6FBFC 100%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.9),
    0 6px 12px rgba(15,74,88,.06),
    0 18px 36px -14px rgba(15,74,88,.18);
  overflow: hidden;
}
.ocean-premium-panel::after {
  content: '';
  position: absolute; inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background: linear-gradient(135deg, rgba(63,159,182,.18) 0%, rgba(191,230,238,0) 30%, rgba(216,180,106,.12) 100%);
  mix-blend-mode: screen;
  opacity: .7;
}

/* ---------- 6. 按钮 ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-wrap: nowrap;      /* 图标 + 文字永远一行，宁可整块被挤窄也不换行 */
  flex-shrink: 0;         /* 在 header 这种 flex 行里不许被压得比内容还窄 */
  gap: 8px;
  min-height: 44px;
  padding: 0 18px;
  border-radius: var(--r-md);
  font-size: 14px;
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
  transition:
    transform 140ms var(--ease-ocean),
    box-shadow 180ms var(--ease-ocean),
    border-color 180ms var(--ease-ocean),
    background-color 180ms var(--ease-ocean),
    background-image 180ms var(--ease-ocean);
}
.btn:focus-visible { outline: none; box-shadow: var(--sh-focus); }
.btn:disabled { opacity: .5; cursor: not-allowed; transform: none !important; }
.btn-sm { min-height: 36px; padding: 0 12px; font-size: 13px; border-radius: var(--r-sm); }
.btn-lg { min-height: 52px; padding: 0 26px; font-size: 16px; }
.btn-block { width: 100%; }

.btn-primary {
  background-image: linear-gradient(180deg, #3F9FB6 0%, #2F879D 60%, #286F82 100%);
  color: #FFFFFF;
  border: 1px solid rgba(15,74,88,.25);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.4),
    inset 0 -1px 0 rgba(15,74,88,.12),
    0 1px 2px rgba(15,74,88,.10),
    0 8px 18px -10px rgba(28,115,135,.45);
}
.btn-primary:hover:not(:disabled) {
  background-image: linear-gradient(180deg, #4BABBF 0%, #2F879D 55%, #245D6E 100%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.45),
    inset 0 -1px 0 rgba(15,74,88,.12),
    0 2px 4px rgba(15,74,88,.10),
    0 14px 28px -12px rgba(28,115,135,.55);
  transform: translateY(-1px);
}
.btn-primary:active:not(:disabled) {
  transform: translateY(0);
  box-shadow: inset 0 1px 2px rgba(15,74,88,.18), 0 1px 1px rgba(15,74,88,.08);
}

.btn-soft {
  background-image: linear-gradient(180deg, #DDF3F7 0%, #BFE6EE 100%);
  color: var(--brand-800);
  border: 1px solid var(--brand-300);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.85), 0 1px 2px rgba(15,74,88,.05);
}
.btn-soft:hover:not(:disabled) {
  border-color: var(--brand-400);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.9), 0 4px 10px -4px rgba(15,74,88,.18);
  transform: translateY(-1px);
}

.btn-glass {
  background-color: rgba(255,255,255,.78);
  color: var(--sea-800);
  border: 1px solid rgba(191,230,238,.85);
  -webkit-backdrop-filter: saturate(140%) blur(8px);
  backdrop-filter: saturate(140%) blur(8px);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.85), 0 1px 2px rgba(15,74,88,.04);
}
.btn-glass:hover:not(:disabled) { background-color: rgba(238,247,249,.95); border-color: var(--brand-300); }

.btn-gold {
  background-image: linear-gradient(180deg, #E7C883 0%, #D8B46A 60%, #B89348 100%);
  color: #3E2C05;
  border: 1px solid rgba(138,91,10,.3);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.5), 0 8px 18px -10px rgba(184,147,72,.5);
}
.btn-gold:hover:not(:disabled) { transform: translateY(-1px); box-shadow: inset 0 1px 0 rgba(255,255,255,.55), 0 14px 28px -12px rgba(184,147,72,.6); }

.btn-coral {
  background-image: linear-gradient(180deg, #ED7674 0%, #E65F5C 60%, #C94B49 100%);
  color: #FFFFFF;
  border: 1px solid rgba(169,53,50,.28);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.35), 0 8px 18px -10px rgba(201,75,73,.5);
}
.btn-coral:hover:not(:disabled) { transform: translateY(-1px); }

.btn-ghost { color: var(--sea-700); border: 1px solid transparent; }
.btn-ghost:hover:not(:disabled) { background-color: var(--pearl-200); border-color: var(--pearl-400); }

.btn-danger { background-color: var(--danger-50); color: var(--danger-700); border: 1px solid var(--danger-200); }
.btn-danger:hover:not(:disabled) { background-color: var(--danger-100); border-color: var(--danger-500); }

/* ---------- 7. 表单 ---------- */
.ocean-input,
.ocean-select,
.ocean-textarea {
  display: block;
  width: 100%;
  min-height: 44px;
  padding: 10px 14px;
  background-color: var(--pearl-0);
  color: var(--sea-950);
  border: 1px solid var(--pearl-400);
  border-radius: var(--r-md);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.9), inset 0 1px 2px rgba(15,74,88,.04);
  transition: border-color 180ms var(--ease-ocean), box-shadow 180ms var(--ease-ocean), background-color 180ms var(--ease-ocean);
}
.ocean-textarea { min-height: 110px; resize: vertical; line-height: 1.7; }
.ocean-select {
  -webkit-appearance: none; appearance: none;
  padding-right: 38px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23557984' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 13px center;
}
.ocean-input::placeholder, .ocean-textarea::placeholder { color: var(--sea-500); }
.ocean-input:hover:not(:disabled):not(:focus-visible),
.ocean-select:hover:not(:disabled):not(:focus-visible),
.ocean-textarea:hover:not(:disabled):not(:focus-visible) { border-color: var(--brand-300); }
.ocean-input:focus-visible, .ocean-select:focus-visible, .ocean-textarea:focus-visible {
  outline: none;
  border-color: var(--brand-500);
  background-color: var(--pearl-50);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.9), 0 0 0 3px rgba(63,159,182,.18);
}
.ocean-input[aria-invalid='true'], .ocean-input.is-invalid {
  border-color: var(--coral);
  background-color: var(--coral-soft);
}

.field { display: block; margin-bottom: 16px; }
.field-label {
  display: block;
  margin-bottom: 6px;
  font-size: 13px;
  font-weight: 600;
  color: var(--sea-700);
}
.field-hint { margin-top: 6px; font-size: 12px; color: var(--sea-500); line-height: 1.6; }
.field-row { display: grid; gap: 16px; }
@media (min-width: 768px) { .field-row-2 { grid-template-columns: 1fr 1fr; } .field-row-3 { grid-template-columns: repeat(3, 1fr); } }

.switch-label {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 9px 14px;
  border: 1px solid var(--pearl-400);
  border-radius: var(--r-md);
  background: var(--pearl-0);
  font-size: 13px; font-weight: 600; color: var(--sea-700);
  transition: border-color 180ms var(--ease-ocean), background-color 180ms var(--ease-ocean);
}
.switch-label:hover { border-color: var(--brand-300); }
.switch-label input { accent-color: var(--brand-600); width: 16px; height: 16px; }
.switch-label:has(input:checked) { background: var(--brand-50); border-color: var(--brand-300); color: var(--brand-700); }

/* ---------- 8. 徽标 / 胶囊 ---------- */
.pill {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 10px;
  border-radius: var(--r-pill);
  font-size: 12px; font-weight: 600; line-height: 1.6;
  white-space: nowrap;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.7);
}
.pill-ocean   { background: var(--info-50);    color: var(--brand-800);   border: 1px solid var(--info-200); }
.pill-gold    { background: var(--shell-gold-soft); color: var(--warning-700); border: 1px solid var(--warning-200); }
.pill-coral   { background: var(--coral-soft); color: var(--coral-deep);  border: 1px solid var(--danger-200); }
.pill-success { background: var(--success-50); color: var(--success-700); border: 1px solid var(--success-200); }
.pill-warning { background: var(--warning-50); color: var(--warning-700); border: 1px solid var(--warning-200); }
.pill-muted   { background: var(--pearl-200);  color: var(--sea-600);     border: 1px solid var(--pearl-400); }
.pill-aqua    { background: #E6F7F3;           color: #14705E;            border: 1px solid #B7E6DB; }
.pill-iris    { background: #F0EFFC;           color: #4B44A3;            border: 1px solid #CFCCF2; }

.ocean-price-pill {
  display: inline-flex; align-items: center; gap: 4px;
  background-color: var(--coral-soft);
  color: var(--coral-deep);
  border: 1px solid var(--danger-200);
  border-radius: var(--r-pill);
  padding: 2px 10px;
  font-weight: 600;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.7);
}
.ocean-price-pill--ocean { background-color: var(--info-50); color: var(--brand-800); border-color: var(--info-200); }
.ocean-price-pill--gold  { background-color: var(--shell-gold-soft); color: var(--warning-700); border-color: #E7D49A; }

/* ---------- 9. 细节工具 ---------- */
.ocean-hairline {
  height: 1px;
  background-image: linear-gradient(90deg, rgba(191,230,238,0) 0%, rgba(63,159,182,.42) 50%, rgba(191,230,238,0) 100%);
}
.ocean-shadow-l1 { box-shadow: var(--sh-l1); }
.ocean-shadow-l2 { box-shadow: var(--sh-l2); }
.ocean-shadow-l3 { box-shadow: var(--sh-l3); }
.ocean-shadow-l4 { box-shadow: var(--sh-l4); }
.tabular-nums { font-variant-numeric: tabular-nums; }
.ocean-stat-number { color: var(--sea-950); font-variant-numeric: tabular-nums; letter-spacing: -.01em; }
.ocean-skeleton {
  background-color: var(--pearl-200);
  background-image: linear-gradient(90deg, rgba(238,247,249,0) 0%, rgba(191,230,238,.65) 50%, rgba(238,247,249,0) 100%);
  background-size: 200% 100%;
  animation: ocean-shimmer 1400ms linear infinite;
  border-radius: var(--r-sm);
}

.text-gradient-ocean {
  background: linear-gradient(135deg, #2F879D 0%, #3F9FB6 45%, #5DB8CA 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}

/* ---------- 10. 动效 ---------- */
@keyframes ocean-shimmer { 0% { background-position: -200% 0; } 100% { background-position: 200% 0; } }
@keyframes fade-in       { 0% { opacity: 0; } 100% { opacity: 1; } }
@keyframes slide-up      { 0% { transform: translateY(20px); opacity: 0; } 100% { transform: translateY(0); opacity: 1; } }
@keyframes ocean-pop     { 0% { transform: translateY(8px) scale(.98); opacity: 0; } 100% { transform: translateY(0) scale(1); opacity: 1; } }
@keyframes ocean-float   { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }

.anim-fade-in  { animation: fade-in 200ms var(--ease-ocean) both; }
.anim-slide-up { animation: slide-up 250ms var(--ease-ocean) both; }
.anim-pop      { animation: ocean-pop 220ms var(--ease-ocean) both; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 1ms !important;
    transition-duration: 1ms !important;
    scroll-behavior: auto !important;
  }
}