/* 全局重置：去掉body默认margin，导航贴顶 */
html, body {
  margin: 0 !important;
  padding: 0 !important;
  width: 100%;
}
* { box-sizing: border-box; }

/* ============================================================
   壹标网 · 设计系统 Design Tokens v1.0
   主色：深空青（数据科技 · 明亮专业）
   生成：2026-09-18
   用法：所有页面 <link rel="stylesheet" href="design-tokens.css">
         组件样式通过 var(--xxx) 引用，改一个变量全站生效
   ============================================================ */

:root{
  /* ===== 一、品牌主色：深空青色阶 ===== */
  --brand-50:  #ecfeff;
  --brand-100: #cffafe;
  --brand-200: #a5f3fc;
  --brand-300: #67e8f9;
  --brand-400: #22d3ee;
  --brand-500: #06b6d4;  /* 高亮·hover·数据图表 */
  --brand-600: #0891b2;  /* ★主色·主按钮·品牌标识·链接 */
  --brand-700: #0e7490;  /* active·深色文字·hover */
  --brand-800: #155e75;
  --brand-900: #164e63;

  /* 快捷别名（兼容旧代码） */
  --brand:        var(--brand-600);
  --brand-hover:  var(--brand-700);
  --brand-light:  var(--brand-50);
  --brand-lighter:var(--brand-100);
  --brand-dark:   var(--brand-800);

  /* ===== 二、辅助色：科技蓝 ===== */
  --sec-50:  #eff6ff;
  --sec-100: #dbeafe;
  --sec-200: #bfdbfe;
  --sec-300: #93c5fd;
  --sec-400: #60a5fa;
  --sec-500: #3b82f6;
  --sec-600: #2563eb;  /* 辅助按钮·数据图表第二色·信息提示 */
  --sec-700: #1d4ed8;

  /* ===== 三、点缀色：琥珀（西柚蜜桃方向·冷暖对比） ===== */
  --acc-50:  #fffbeb;
  --acc-100: #fef3c7;
  --acc-200: #fde68a;
  --acc-300: #fcd34d;
  --acc-400: #fbbf24;
  --acc-500: #f59e0b;  /* ★点缀·警告·重点提醒·登录页渐变 */
  --acc-600: #d97706;
  --acc-700: #b45309;

  /* ===== 四、中性色 ===== */
  --bg:          #f8fafc;  /* 页面背景 */
  --bg-2:        #f1f5f9;  /* 次级背景·斑马纹 */
  --card:        #ffffff;  /* 卡片·弹窗·表单 */
  --card-hover:  #f8fafc;
  --text:        #0f172a;  /* 标题·正文（近黑） */
  --text-2:      #475569;  /* 辅助文字·说明 */
  --text-3:      #94a3b8;  /* 占位符·次要说明 */
  --text-4:      #cbd5e1;  /* 禁用文字 */
  --border:      #e2e8f0;  /* 卡片边框·分割线 */
  --border-2:    #cbd5e1;  /* 输入框边框·强调分割 */
  --border-3:    #94a3b8;

  /* ===== 五、语义色 ===== */
  --success:      #16a34a;  /* 已注册·通过·成功 */
  --success-light:#f0fdf4;
  --success-dark: #15803d;
  --warning:      #f59e0b;  /* 近似风险·待审核·警告 */
  --warning-light:#fffbeb;
  --warning-dark: #d97706;
  --error:        #dc2626;  /* 已驳回·无效·错误 */
  --error-light:  #fef2f2;
  --error-dark:   #b91c1c;
  --info:         #2563eb;  /* 信息提示·链接 */
  --info-light:   #eff6ff;
  --info-dark:    #1d4ed8;

  /* ===== 六、8px 基准栅格间距 ===== */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-8:  32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;

  /* 页面容器 */
  --container-max: 1200px;
  --container-pad: 24px;   /* 桌面左右留白 */
  --container-pad-m: 16px; /* 手机左右留白 */

  /* ===== 七、六级排版规范 ===== */
  /* H1 页面大标题 */
  --fs-h1:   28px;  --lh-h1: 1.3;  --fw-h1: 700;
  /* H2 区块标题 */
  --fs-h2:   20px;  --lh-h2: 1.4;  --fw-h2: 700;
  /* H3 小标题 */
  --fs-h3:   16px;  --lh-h3: 1.5;  --fw-h3: 600;
  /* Body 正文 */
  --fs-body: 14px;  --lh-body: 1.7; --fw-body: 400;
  /* Caption 辅助 */
  --fs-cap:  12px;  --lh-cap: 1.5;  --fw-cap: 400;
  /* Button 按钮 */
  --fs-btn:  15px;  --lh-btn: 1.0;  --fw-btn: 600;

  /* 手机端字号 */
  --fs-h1-m: 24px;
  --fs-h2-m: 18px;
  --fs-body-m: 15px;

  /* 字体栈 */
  --font-sans: "Noto Sans SC","PingFang SC","Microsoft YaHei",system-ui,-apple-system,sans-serif;
  --font-mono: "SF Mono","Consolas","Monaco",monospace;

  /* ===== 八、三级卡片规范 ===== */
  /* 一级卡片：核心内容·查询结果 */
  --card-1-radius: 16px;
  --card-1-pad:    24px;
  --card-1-shadow: 0 4px 16px rgba(0,0,0,.08);
  --card-1-shadow-hover: 0 8px 24px rgba(8,145,178,.15);
  /* 二级卡片：功能入口·次要信息 */
  --card-2-radius: 12px;
  --card-2-pad:    20px;
  --card-2-shadow: 0 2px 8px rgba(0,0,0,.06);
  /* 三级卡片：标签·状态·小入口 */
  --card-3-radius: 8px;
  --card-3-pad:    12px;

  /* ===== 九、按钮规范 ===== */
  --btn-radius:    10px;
  --btn-radius-sm: 8px;
  --btn-radius-lg: 12px;
  --btn-pad:       9px 20px;
  --btn-pad-sm:    6px 14px;
  --btn-pad-lg:    12px 28px;
  --btn-shadow:    0 2px 8px rgba(0,0,0,.12);
  --btn-shadow-hover: 0 4px 12px rgba(0,0,0,.18);

  /* ===== 十、阴影层级 ===== */
  --shadow-xs: 0 1px 2px rgba(0,0,0,.05);
  --shadow-sm: 0 1px 3px rgba(0,0,0,.06);
  --shadow:    0 4px 16px rgba(0,0,0,.08);
  --shadow-md: 0 8px 24px rgba(0,0,0,.10);
  --shadow-lg: 0 12px 32px rgba(0,0,0,.12);
  --shadow-xl: 0 20px 48px rgba(0,0,0,.16);
  --shadow-brand: 0 4px 16px rgba(8,145,178,.20);

  /* ===== 十一、圆角 ===== */
  --radius-xs: 4px;
  --radius-sm: 8px;
  --radius:    12px;
  --radius-lg: 16px;
  --radius-xl: 20px;
  --radius-full: 9999px;

  /* ===== 十二、过渡动画 ===== */
  --transition:       all .25s ease;
  --transition-fast:  all .15s ease;
  --transition-slow:  all .4s ease;

  /* ===== 十三、Z-index 层级 ===== */
  --z-dropdown: 100;
  --z-sticky:   200;
  --z-modal:    300;
  --z-toast:    400;
  --z-tooltip:  500;

  /* ===== 十四、导航栏 ===== */
  --nav-height:     60px;
  --nav-height-m:   52px;
  --nav-bg:         var(--card);
  --nav-border:     var(--border);
  --nav-shadow:     var(--shadow-sm);

  /* ===== 十五、表单 ===== */
  --input-radius:   10px;
  --input-pad:      10px 14px;
  --input-border:   1.5px solid var(--border);
  --input-focus-border: 1.5px solid var(--brand-500);
  --input-focus-shadow: 0 0 0 3px var(--brand-50);
  --input-bg:       var(--card);
  --input-disabled-bg: var(--bg-2);

  /* ===== 十六、表格 ===== */
  --table-head-bg:  var(--brand-600);
  --table-head-color: #fff;
  --table-row-hover: var(--brand-50);
  --table-zebra:    var(--bg);

  /* ===== 十七、Hero 渐变（全站仅两处允许渐变） ===== */
  --hero-gradient: linear-gradient(135deg, var(--brand-600), var(--brand-700));
  --login-gradient: linear-gradient(135deg, #fef3c7, #fde68a, #ecfeff);

  /* ===== 十八、品牌色使用比例 60-30-10（参考） ===== */
  /* 60% 中性色（bg/card/text/border） */
  /* 30% 品牌主色（brand-600 按钮/链接/图标/选中） */
  /* 10% 辅助+点缀（sec-600 数据图表 / acc-500 警告提醒） */
}

/* ============================================================
   深色模式（监控大屏·数据看板专用）
   用法：<body class="dark"> 或 data-theme="dark"
   ============================================================ */
body.dark,
[data-theme="dark"]{
  --bg:          #0f172a;
  --bg-2:        #1e293b;
  --card:        #1e293b;
  --card-hover:  #334155;
  --text:        #e2e8f0;
  --text-2:      #94a3b8;
  --text-3:      #64748b;
  --text-4:      #475569;
  --border:      #334155;
  --border-2:    #475569;
  --border-3:    #64748b;
  --brand-50:    #164e63;
  --brand-100:   #155e75;
  --brand-400:   #22d3ee;  /* 深色模式下霓虹高亮 */
  --brand-500:   #06b6d4;
  --brand-600:   #0891b2;
  --shadow-sm:   0 1px 3px rgba(0,0,0,.3);
  --shadow:      0 4px 16px rgba(0,0,0,.4);
  --shadow-lg:   0 12px 32px rgba(0,0,0,.5);
  --input-bg:    #0f172a;
  --input-disabled-bg: #1e293b;
  --table-head-bg: #1e293b;
  --table-row-hover: #334155;
  --hero-gradient: linear-gradient(135deg, #0e7490, #164e63);
}

/* ============================================================
   基础重置（所有页面引入后自动生效）
   ============================================================ */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  font-family:var(--font-sans);
  background:var(--bg);
  color:var(--text);
  font-size:var(--fs-body);
  line-height:var(--lh-body);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}
img{max-width:100%;height:auto;display:block}
a{color:var(--brand-600);text-decoration:none;transition:var(--transition-fast)}
a:hover{color:var(--brand-700)}
button{font-family:inherit;cursor:pointer;border:none;background:none}
input,textarea,select{font-family:inherit;font-size:inherit}
/* 数字等宽（表格/数据不飘忽） */
.tnum,.num{font-variant-numeric:tabular-nums;font-feature-settings:"tnum"}
/* 焦点态统一（可访问性） */
a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible{
  outline:2px solid var(--brand-500);
  outline-offset:2px;
  border-radius:var(--radius-sm);
}
/* 选中文字颜色 */
::selection{background:var(--brand-100);color:var(--brand-800)}
/* 滚动条 */
::-webkit-scrollbar{width:8px;height:8px}
::-webkit-scrollbar-track{background:var(--bg-2)}
::-webkit-scrollbar-thumb{background:var(--border-2);border-radius:4px}
::-webkit-scrollbar-thumb:hover{background:var(--text-3)}

/* ============================================================
   设计规范补充 v1.1
   ============================================================ */

:root{
  /* ===== 三、圆角规范 ===== */
  --r-xs:    4px;   /* 小标签、badge */
  --r-sm:    6px;   /* 小按钮、输入框 */
  --r-md:    8px;   /* ★标准按钮、卡片 */
  --r-lg:    12px;  /* 大卡片、弹窗 */
  --r-xl:    16px;  /* 超大卡片 */
  --r-pill:  999px; /* 胶囊形 */

  /* ===== 四、间距规范（8px栅格） ===== */
  --space-xs:  4px;
  --space-sm:  8px;
  --space-md:  16px;  /* ★标准间距 */
  --space-lg:  24px;
  --space-xl:  32px;
  --space-2xl: 48px;

  /* ===== 五、字体规范 ===== */
  --font-sans: "Source Han Sans SC","Noto Sans SC",-apple-system,BlinkMacSystemFont,"PingFang SC","Microsoft YaHei",sans-serif;
  
  --fs-xs:   12px;
  --fs-sm:   13px;
  --fs-md:   14px;  /* ★正文字号 */
  --fs-lg:   16px;  /* ★标题字号 */
  --fs-xl:   20px;
  --fs-2xl:  24px;
  --fs-3xl:  32px;
  --fs-4xl:  40px;

  /* ===== 六、阴影规范 ===== */
  --shadow-sm: 0 1px 2px rgba(0,0,0,0.05);
  --shadow-md: 0 2px 8px rgba(0,0,0,0.08);  /* ★标准卡片阴影 */
  --shadow-lg: 0 4px 16px rgba(0,0,0,0.12);
  --shadow-xl: 0 8px 24px rgba(0,0,0,0.16);

  /* ===== 七、文字颜色 ===== */
  --ink:      #1a1a2e;  /* 主文字 */
  --ink-2:    #4b5563;  /* 次要文字 */
  --ink-3:    #9ca3af;  /* 占位、提示 */
  --line:     #e5e7eb;  /* 边框线 */
  --bg:       #f9fafb;  /* 背景色 */
  --card:     #ffffff;  /* 卡片背景 */
}

/* ===== 八、按钮规范（统一） ===== */
.ds-btn{
  font-family: var(--font-sans);
  font-size: var(--fs-md);
  padding: 10px 20px;
  border-radius: var(--r-md);
  transition: all 0.16s ease;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}
.ds-btn-primary{
  background: var(--brand);
  color: #fff;
  border: none;
}
.ds-btn-primary:hover{
  background: var(--brand-hover);
  box-shadow: var(--shadow-md);
}
.ds-btn-outline{
  background: transparent;
  color: var(--brand);
  border: 1px solid var(--brand);
}
.ds-btn-outline:hover{
  background: var(--brand-light);
}

/* ===== 九、卡片规范（统一） ===== */
.ds-card{
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: var(--space-lg);
  box-shadow: var(--shadow-sm);
}
.ds-card:hover{
  box-shadow: var(--shadow-md);
}

/* ===== 十、输入框规范（统一） ===== */
.ds-input{
  font-family: var(--font-sans);
  font-size: var(--fs-md);
  padding: 10px 14px;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--card);
  transition: border-color 0.16s ease;
}
.ds-input:focus{
  outline: none;
  border-color: var(--brand);
  box-shadow: 0 0 0 3px var(--brand-light);
}


/* ===== 统一组件规范 ===== */

/* 按钮圆角统一为8px */
button, .btn, [class*='btn-'] {
  border-radius: 8px !important;
}

/* 卡片圆角统一为12px */
.card, [class*='card-'], [class*='panel-'] {
  border-radius: 12px !important;
}

/* 输入框圆角统一为8px */
input, select, textarea {
  border-radius: 8px !important;
}

/* 统一间距：外边距 */
.mt-1 { margin-top: 8px !important; }
.mt-2 { margin-top: 16px !important; }
.mt-3 { margin-top: 24px !important; }
.mt-4 { margin-top: 32px !important; }

.mb-1 { margin-bottom: 8px !important; }
.mb-2 { margin-bottom: 16px !important; }
.mb-3 { margin-bottom: 24px !important; }
.mb-4 { margin-bottom: 32px !important; }

/* 统一主色 */
:root {
  --primary: #0e7c6e;
  --primary-light: #0d9488;
  --primary-dark: #065f46;
}

/* 统一按钮主色 */
.btn-primary, [class*='primary'] {
  background: var(--primary) !important;
  border-color: var(--primary) !important;
}


/* ===== 手机端适配 ===== */
@media (max-width: 768px) {
  /* 九大板块：手机上1列 */
  .feature-card {
    width: 100% !important;
    max-width: 100% !important;
  }
  
  /* 页面内容左右边距 */
  .wrap, .container, .main-container {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }
  
  /* 搜索框手机上占满宽度 */
  .search-input, input[type='text'], input[type='search'] {
    width: 100% !important;
    font-size: 16px !important; /* 防止iPhone自动缩放 */
  }
  
  /* 按钮手机上够大 */
  .btn, button {
    min-height: 44px !important;
    font-size: 16px !important;
  }
}

/* ===== 手机端细节优化 ===== */
@media (max-width: 768px) {
  /* 首页主视觉：降低高度 */
  .hero, .hero-section, .jumbotron {
    min-height: auto !important;
    padding: 40px 16px !important;
  }
  .hero h1 {
    font-size: 28px !important;
  }
  .hero p {
    font-size: 14px !important;
  }
  
  /* 智能起名：两列改1列 */
  .naming-form .form-row, .naming-form .grid-2, .grid-cols-2 {
    grid-template-columns: 1fr !important;
    flex-direction: column !important;
  }
  
  /* 商标查询：45类按钮每行减少 */
  .tm-class-grid .class-btn, .category-grid .cat-btn {
    width: calc(33.33% - 8px) !important;
    flex: 0 0 calc(33.33% - 8px) !important;
  }
}

/* ===== 文件生成页优化 ===== */
.hero { padding-top: 40px !important;
  padding: 40px 0 20px !important;
}
.hero h1 {
  font-size: 36px !important;
}
.hero p {
  font-size: 15px !important;
  line-height: 1.6 !important;
}
.hero-stats {
  margin-top: 20px !important;
  gap: 30px !important;
}
.hero-card {
  padding: 20px !important;
}
.workspace {
  margin-top: 20px !important;
}
.module {
  margin-bottom: 12px !important;
}

/* 文件生成页：导航下方留白，和其他页面一致 */
.index-file-generator .hero,
.index-file-generator section:first-of-type {
  margin-top: 0 !important;
  padding-top: 40px !important;
}

/* 文件生成页：导航和主视觉之间留白 */
.hero {
  margin-top: 20px !important;
}

/* 文件生成页：导航栏上方留白 */
.index-file-generator body,
body:has(.index-file-generator) {
  padding-top: 20px !important;
}

/* 文件生成页：和其他页面布局统一 */
.index-file-generator .hero {
  background: #f8f9fa !important;
  padding-top: 40px !important;
}

/* 文件生成页hero背景改成浅灰色，和其他页面一致 */
.hero {
  background: #f8f9fa !important;
}

/* 全局统一页面背景 */
body {
  background: #f8f9fa !important;
}