/*
  AK07 Game Tools — Unified Theme v2 (Apple-inspired)
  参考：getdesign.md / Apple Inspired Design System

  目标：
  - 用“Apple-like”的：克制留白 / 高级灰 / 玻璃导航 / 清晰排版
  - 让 /game 下各页面逐步统一到同一套 tokens + 组件

  使用：
    <link rel="stylesheet" href="./assets/ak07-theme.css">
    （子目录页面用 ../assets/ak07-theme.css）
*/

:root{
  /* Apple Palette */
  --ak-bg-0:#ffffff;      /* White (纯白背景) */
  --ak-bg-1:#ffffff;      /* White */
  --ak-ink:#1d1d1f;       /* Near Black */
  --ak-ink-2:rgba(0,0,0,.72);
  --ak-ink-3:rgba(0,0,0,.48);

  /* Surfaces */
  --ak-surface: rgba(255,255,255,.92);
  --ak-surface-2: #ffffff;
  --ak-border: rgba(0,0,0,.10);
  --ak-border-2: rgba(0,0,0,.16);

  /* Text */
  --ak-text: var(--ak-ink);
  --ak-text-2: var(--ak-ink-2);
  --ak-text-3: var(--ak-ink-3);

  /* Interactive (Monochrome) */
  --ak-accent:#1d1d1f;     /* Primary: near black */
  --ak-accent-2:#424245;   /* Hover/secondary */
  --ak-accent-3:#6e6e73;   /* Links/tertiary */

  /* Radius & Shadow (Apple-like) */
  --ak-radius-1: 8px;      /* Buttons / Cards */
  --ak-radius-2: 12px;     /* Cards */
  --ak-radius-3: 11px;     /* Search */
  --ak-shadow-1: 0 3px 5px rgba(0,0,0,.10), 0 14px 30px rgba(0,0,0,.12);
  --ak-shadow-2: 0 10px 40px rgba(0,0,0,.18);

  /* Typography (system SF on macOS) */
  --ak-font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display",
    "Helvetica Neue", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei",
    Arial, sans-serif;
  --ak-font-display: -apple-system, BlinkMacSystemFont, "SF Pro Display",
    "Helvetica Neue", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei",
    Arial, sans-serif;

  /* Focus ring */
  --ak-focus: 0 0 0 4px rgba(0,0,0,.14);
}

/* Reset-ish */
*,*::before,*::after{ box-sizing:border-box; }
html,body{ height:100%; }
body{
  margin:0;
  font-family:var(--ak-font);
  color:var(--ak-text);
  background: #ffffff;
  line-height: 1.6;
}

a{ color:inherit; text-decoration:none; }
a:hover{ text-decoration: underline; text-underline-offset: 3px; }

/* 玻璃质感容器 */
.ak-surface{
  background: var(--ak-surface);
  border: 1px solid var(--ak-border);
  border-radius: var(--ak-radius-2);
  box-shadow: var(--ak-shadow-1);
  backdrop-filter: blur(18px) saturate(180%);
}

.ak-card{
  background: var(--ak-surface-2);
  border: 1px solid var(--ak-border);
  border-radius: var(--ak-radius-2);
  box-shadow: var(--ak-shadow-1);
}

.ak-title{
  font-family: var(--ak-font-display);
  letter-spacing: -0.2px;
}

/* 顶部栏（可选） */
.ak-topbar{
  position: sticky;
  top: 0;
  z-index: 1000;
  display:flex;
  align-items:center;
  gap: 12px;
  padding: 14px 16px;
  margin: 0;
  border-bottom: 1px solid rgba(0,0,0,.08);
  background: rgba(255,255,255,.92);
  backdrop-filter: blur(22px) saturate(180%);
}

.ak-topbar .ak-brand{
  display:flex;
  align-items:center;
  gap: 10px;
  font-weight: 800;
  letter-spacing: .4px;
}

.ak-chip{
  display:inline-flex;
  align-items:center;
  gap: 8px;
  padding: 8px 10px;
  border-radius: 999px;
  border: 1px solid rgba(0,0,0,.10);
  background: rgba(255,255,255,.60);
}

.ak-container{
  width: min(1200px, calc(100% - 28px));
  margin: 0 auto;
  padding: 22px 0 42px;
}

/* 表单 / 按钮 */
input,select,textarea,button{
  font: inherit;
}

.ak-input{
  width: 100%;
  padding: 12px 12px;
  border-radius: var(--ak-radius-3);
  border: 1px solid rgba(0,0,0,.14);
  background: rgba(255,255,255,.92);
  color: var(--ak-text);
  outline: none;
  transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}
.ak-input:focus{
  border-color: var(--ak-accent);
  box-shadow: var(--ak-focus);
}

.ak-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap: 10px;
  padding: 11px 14px;
  border-radius: 980px;
  border: 1px solid rgba(0,0,0,.12);
  cursor: pointer;
  background: var(--ak-accent);
  color: #ffffff;
  font-weight: 600;
  letter-spacing: -0.1px;
  box-shadow: 0 1px 0 rgba(0,0,0,.08);
  transition: transform .12s ease, filter .12s ease;
}
.ak-btn:hover{ transform: translateY(-1px); filter: brightness(1.06); }
.ak-btn:active{ transform: translateY(0); filter: brightness(.98); }
.ak-btn.ak-btn-ghost{
  background: rgba(255,255,255,.78);
  color: var(--ak-ink);
}

/* 小提示/状态 */
.ak-muted{ color: var(--ak-text-2); }
.ak-help{ color: var(--ak-text-3); font-size: 13px; }

/* 表格（后台页面常用） */
.ak-table{
  width: 100%;
  border-collapse: collapse;
  overflow: hidden;
  border-radius: var(--ak-radius-2);
  border: 1px solid rgba(0,0,0,.10);
}
.ak-table th,.ak-table td{
  padding: 10px 12px;
  border-bottom: 1px solid rgba(0,0,0,.08);
  vertical-align: top;
}
.ak-table th{
  text-align: left;
  font-size: 12px;
  letter-spacing: .5px;
  color: rgba(0,0,0,.60);
  background: rgba(245,245,247,.72);
}

/* 滚动条 */
::-webkit-scrollbar{ width: 8px; height: 8px; }
::-webkit-scrollbar-track{ background: transparent; }
::-webkit-scrollbar-thumb{
  background: linear-gradient(180deg, rgba(0,0,0,.28), rgba(0,0,0,.14));
  border-radius: 999px;
}

@media (max-width: 720px){
  .ak-container{ width: calc(100% - 18px); }
  .ak-topbar{ padding: 12px 12px; }
}

/* ------------------------------------------------------------------
   Force Light Mode (global)
   目的：即使各页面仍残留“暗色主题”的 :root / body，也尽量强制变为浅色 Apple 风格
   说明：使用 !important 让统一主题覆盖多数页面的内联变量定义
------------------------------------------------------------------- */

:root{
  /* 兼容旧页面常用变量名（统一覆盖） */
  --primary-color: var(--ak-accent) !important;
  --primary-hover: var(--ak-accent-2) !important;
  --secondary-color: var(--ak-accent-2) !important;
  --accent-color: var(--ak-accent-3) !important;
  --success-color: #34c759 !important;
  --warning-color: #ff9f0a !important;
  --danger-color: #ff3b30 !important;
  --error-color: #ff3b30 !important;

  --text-primary: var(--ak-text) !important;
  --text-secondary: var(--ak-text-2) !important;
  --text-muted: var(--ak-text-3) !important;

  --border-color: var(--ak-border) !important;
  --border-light: var(--ak-border) !important;

  --surface-color: var(--ak-surface-2) !important;
  --panel-bg: var(--ak-surface) !important;
  --card-bg: var(--ak-surface-2) !important;

  /* 很多页面会用 --dark-bg / --light-bg 控制 body 背景 */
  --dark-bg: transparent !important;
  --light-bg: transparent !important;
  --background-color: transparent !important;
}

body{
  background: #ffffff !important;
  color: var(--ak-text) !important;
}

/* 常见顶栏类名：强制为 Apple 玻璃浅色 */
.top-nav,
nav.top-nav,
.header,
.navbar{
  background: rgba(255,255,255,.92) !important;
  backdrop-filter: blur(22px) saturate(180%) !important;
  border-bottom: 1px solid rgba(0,0,0,.08) !important;
  color: var(--ak-text) !important;
}

/* 顶栏布局统一（解决“顶部被挤压/变成多行占太高”）
   - 桌面端尽量保持单行：中间 tabs 横向滚动
   - 小屏才允许换行
*/
.top-nav{
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  padding: 10px 12px !important;
  /* 允许换行，但用 order 控制：最多两行（第二行给 filter-groups） */
  flex-wrap: wrap !important;
}
.top-nav .search-box{ order: 1 !important; flex: 0 1 420px !important; max-width: none !important; min-width: 240px !important; }
.top-nav .id-search-form{ order: 2 !important; flex: 0 0 auto !important; gap: 8px !important; }
.top-nav .category-tabs{
  order: 3 !important;
  flex: 1 1 auto !important;
  width: auto !important;
  min-width: 220px !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  white-space: nowrap !important;
  -webkit-overflow-scrolling: touch;
  margin: 0 !important;
  padding: 0 !important;
}
.top-nav .language-switcher{
  order: 4 !important;
  margin-left: auto !important;
  flex: 0 0 auto !important;
}
.top-nav .resource-link{ order: 5 !important; flex: 0 0 auto !important; }
.top-nav .ak07-global-links,
.top-nav .ak-admin-links{
  flex: 0 0 auto !important;
}
.top-nav .ak07-global-links{
  order: 6 !important;
  margin-left: auto !important;
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  flex-wrap: nowrap !important;
}

@media (max-width: 980px){
  .top-nav{ flex-wrap: wrap !important; }
  .top-nav .search-box{ flex: 1 1 100% !important; }
  .top-nav .category-tabs{ flex: 1 1 100% !important; padding: 2px 0 6px !important; }
  .top-nav .ak07-global-links{ margin-left: 0 !important; width: 100% !important; justify-content: flex-end !important; }
}

/* filter-groups 永远放第二行（避免把“中英文”挤下去） */
.top-nav .filter-groups{
  order: 20 !important;
  flex: 1 1 100% !important;
  width: 100% !important;
  margin: 2px 0 0 !important;
  padding: 2px 0 6px !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  white-space: nowrap !important;
  -webkit-overflow-scrolling: touch;
}

/* 管理后台专属入口：默认隐藏（只在 body.ak-admin 显示） */
.ak07-global-links,
.ak-admin-links{
  display: none !important;
}
body.ak-admin .ak07-global-links,
body.ak-admin .ak-admin-links{
  display: flex !important;
}

/* 取消“小眼睛隐藏/显示”功能按钮（nav-toggle / panel-toggle） */
.nav-toggle,
.panel-toggle{
  display: none !important;
}

/* 防止旧脚本给导航/面板加 hidden 后把页面挤乱 */
.top-nav.hidden,
nav.top-nav.hidden{
  transform: none !important;
}
.selection-panel.force-hidden,
#selectionPanel.force-hidden{
  transform: none !important;
}

/* 常见卡片类名：统一为浅色卡片 */
.card,
.character-card,
.result-card,
.project-card,
.modal-content,
.panel,
.toolbar{
  background: var(--ak-surface-2) !important;
  border: 1px solid rgba(0,0,0,.10) !important;
  box-shadow: var(--ak-shadow-1) !important;
}

/* 表单控件：统一浅色 */
input[type="text"],
input[type="search"],
input[type="number"],
input[type="password"],
select,
textarea{
  background: rgba(255,255,255,.92) !important;
  border: 1px solid rgba(0,0,0,.14) !important;
  color: var(--ak-text) !important;
}