/* CTF8 主题系统：暗色(默认) / 白色 / 暖色 —— 全部通过 CSS 变量驱动 */

/* ============ 主题变量定义 ============ */
/* 颜色一律存 RGB 通道值，使用 rgb(var(--x) / alpha) 语法以支持透明度 */

:root,
html[data-theme="dark"] {
  color-scheme: dark;
  /* Tailwind slate 灰阶（暗色=原生值）：数字越大越暗 */
  --tw-s100: 241 245 249;
  --tw-s200: 226 232 240;
  --tw-s300: 203 213 225;
  --tw-s400: 148 163 184;
  --tw-s500: 100 116 139;
  --tw-s600: 71 85 105;
  --tw-s700: 51 65 85;
  --tw-white: 255 255 255;   /* bg-white/5 悬浮底纹 */
  --tw-amber4: 251 191 36;   /* 点缀：琥珀 */
  --tw-red4: 248 113 113;    /* 点缀：红 */
  --rgb-bg: 5 7 13;        /* 深空黑 */
  --rgb-panel: 10 17 32;   /* 面板深蓝 */
  --rgb-panel2: 13 22 41;  /* 卡片亮一档 */
  --rgb-line: 22 35 61;    /* 边框 */
  --rgb-cyan: 0 240 255;   /* 霓虹青（主强调） */
  --rgb-green: 0 255 136;  /* 荧光绿（次强调/成功） */
  --rgb-red: 255 107 107;  /* 危险 */
  --rgb-amber: 251 191 36; /* 警示 */
  --rgb-text: 201 214 238; /* 正文 */
  --rgb-dim: 100 116 143;  /* 次要文字 */
  /* 页面背景（网格 + 顶部辉光） */
  --bg-image:
    radial-gradient(ellipse 80% 50% at 50% -10%, rgb(var(--rgb-cyan) / .08), transparent),
    linear-gradient(rgb(var(--rgb-cyan) / .035) 1px, transparent 1px),
    linear-gradient(90deg, rgb(var(--rgb-cyan) / .035) 1px, transparent 1px);
  --panel-bg: rgb(var(--rgb-panel) / .82);
  --card-bg: linear-gradient(160deg, rgb(var(--rgb-panel2) / .9), rgb(var(--rgb-panel) / .92));
  --term-bg: rgb(3 6 12 / .85);
  --mask-bg: rgb(3 6 12 / .72);
  --toast-bg: rgb(var(--rgb-panel) / .95);
}

html[data-theme="light"] {
  color-scheme: light;
  /* 灰阶亮度轴反转：白底下 slate-100 为最深主文字，数字越大越浅 */
  --tw-s100: 15 23 42;
  --tw-s200: 30 41 59;
  --tw-s300: 51 65 85;
  --tw-s400: 71 85 105;
  --tw-s500: 100 116 139;
  --tw-s600: 148 163 184;
  --tw-s700: 203 213 225;
  --tw-white: 15 23 42;    /* 悬浮底纹改为深色微透明 */
  --tw-amber4: 180 83 6;
  --tw-red4: 220 38 38;
  --rgb-bg: 246 248 251;
  --rgb-panel: 255 255 255;
  --rgb-panel2: 255 255 255;
  --rgb-line: 219 228 240;
  --rgb-cyan: 8 145 178;   /* cyan-600 白底可读 */
  --rgb-green: 5 150 105;  /* emerald-600 */
  --rgb-red: 220 38 38;
  --rgb-amber: 217 119 6;
  --rgb-text: 30 41 59;
  --rgb-dim: 100 116 139;
  --bg-image:
    radial-gradient(ellipse 80% 50% at 50% -10%, rgb(var(--rgb-cyan) / .06), transparent),
    linear-gradient(rgb(var(--rgb-cyan) / .025) 1px, transparent 1px),
    linear-gradient(90deg, rgb(var(--rgb-cyan) / .025) 1px, transparent 1px);
  --panel-bg: rgb(var(--rgb-panel) / .9);
  --card-bg: linear-gradient(160deg, #ffffff, rgb(250 252 255));
  --term-bg: rgb(15 23 42 / .92);
  --mask-bg: rgb(15 23 42 / .45);
  --toast-bg: #ffffff;
}

html[data-theme="warm"] {
  color-scheme: light;
  /* 灰阶换棕调：奶油底下 slate-100 为深棕主文字 */
  --tw-s100: 41 32 24;
  --tw-s200: 63 50 40;
  --tw-s300: 87 71 56;
  --tw-s400: 110 92 72;
  --tw-s500: 138 121 96;
  --tw-s600: 165 150 128;
  --tw-s700: 196 182 160;
  --tw-white: 63 50 40;    /* 悬浮底纹改为深棕微透明 */
  --tw-amber4: 180 83 9;
  --tw-red4: 190 18 60;
  --rgb-bg: 250 244 235;   /* 奶油米 */
  --rgb-panel: 255 251 242;
  --rgb-panel2: 255 253 247;
  --rgb-line: 227 213 189; /* 焦糖描边 */
  --rgb-cyan: 180 83 9;    /* 琥珀焦糖（主强调） */
  --rgb-green: 77 124 15;  /* 暖橄榄绿 */
  --rgb-red: 190 18 60;
  --rgb-amber: 180 83 9;
  --rgb-text: 63 50 40;    /* 深棕文字 */
  --rgb-dim: 138 121 96;   /* 浅棕次要 */
  --bg-image:
    radial-gradient(ellipse 80% 50% at 50% -10%, rgb(var(--rgb-cyan) / .07), transparent),
    linear-gradient(rgb(var(--rgb-cyan) / .025) 1px, transparent 1px),
    linear-gradient(90deg, rgb(var(--rgb-cyan) / .025) 1px, transparent 1px);
  --panel-bg: rgb(var(--rgb-panel) / .92);
  --card-bg: linear-gradient(160deg, #fffdf8, rgb(255 248 235));
  --term-bg: rgb(41 32 24 / .92);
  --mask-bg: rgb(63 50 40 / .4);
  --toast-bg: #fffdf8;
}

html { color-scheme: dark; }
html[data-theme="light"], html[data-theme="warm"] { color-scheme: light; }

body {
  background-color: rgb(var(--rgb-bg));
  color: rgb(var(--rgb-text));
  font-family: "JetBrains Mono", "Cascadia Code", Consolas, "PingFang SC", "Microsoft YaHei", monospace;
  min-height: 100vh;
  background-image: var(--bg-image);
  background-size: 100% 100%, 44px 44px, 44px 44px;
  transition: background-color .25s ease, color .25s ease;
}

::selection { background: rgb(var(--rgb-cyan) / .3); }
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-thumb { background: rgb(var(--rgb-line)); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: rgb(var(--rgb-cyan) / .5); }

/* ---- 面板 / 卡片 ---- */
.cy-panel {
  background: var(--panel-bg);
  border: 1px solid rgb(var(--rgb-line));
  border-radius: .75rem;
  backdrop-filter: blur(6px);
}
.cy-card {
  position: relative;
  background: var(--card-bg);
  border: 1px solid rgb(var(--rgb-line));
  border-radius: .75rem;
  transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}
.cy-card:hover {
  transform: translateY(-3px);
  border-color: rgb(var(--rgb-cyan) / .55);
  box-shadow: 0 0 0 1px rgb(var(--rgb-cyan) / .2), 0 8px 32px rgb(var(--rgb-cyan) / .12);
}
.cy-card-solved { border-color: rgb(var(--rgb-green) / .4); }
.cy-card-solved:hover { border-color: rgb(var(--rgb-green) / .7); box-shadow: 0 0 0 1px rgb(var(--rgb-green) / .25), 0 8px 32px rgb(var(--rgb-green) / .1); }

/* 卡片四角装饰 */
.cy-corner::before, .cy-corner::after {
  content: ""; position: absolute; width: 14px; height: 14px; pointer-events: none;
}
.cy-corner::before { top: -1px; left: -1px; border-top: 2px solid rgb(var(--rgb-cyan)); border-left: 2px solid rgb(var(--rgb-cyan)); border-top-left-radius: .75rem; }
.cy-corner::after { bottom: -1px; right: -1px; border-bottom: 2px solid rgb(var(--rgb-cyan)); border-right: 2px solid rgb(var(--rgb-cyan)); border-bottom-right-radius: .75rem; }

/* ---- 按钮 ---- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .45rem;
  padding: .5rem 1.1rem; border-radius: .5rem; font-size: .875rem; font-weight: 600;
  border: 1px solid transparent; cursor: pointer; transition: all .16s ease;
  user-select: none; text-decoration: none; line-height: 1.25;
}
.btn:disabled { opacity: .45; cursor: not-allowed; }
.btn-primary {
  background: linear-gradient(135deg, rgb(var(--rgb-cyan) / .14), rgb(var(--rgb-green) / .10));
  border-color: rgb(var(--rgb-cyan) / .5); color: rgb(var(--rgb-cyan));
  box-shadow: 0 0 18px rgb(var(--rgb-cyan) / .12) inset;
}
.btn-primary:hover:not(:disabled) { border-color: rgb(var(--rgb-cyan)); box-shadow: 0 0 24px rgb(var(--rgb-cyan) / .25); }
.btn-green {
  background: linear-gradient(135deg, rgb(var(--rgb-green) / .14), rgb(var(--rgb-cyan) / .08));
  border-color: rgb(var(--rgb-green) / .5); color: rgb(var(--rgb-green));
}
.btn-green:hover:not(:disabled) { border-color: rgb(var(--rgb-green)); box-shadow: 0 0 24px rgb(var(--rgb-green) / .25); }
.btn-ghost { border-color: rgb(var(--rgb-line)); color: rgb(var(--rgb-text)); background: rgb(var(--rgb-text) / .03); }
.btn-ghost:hover:not(:disabled) { border-color: rgb(var(--rgb-cyan) / .45); color: rgb(var(--rgb-cyan)); }
.btn-danger { border-color: rgb(var(--rgb-red) / .45); color: rgb(var(--rgb-red)); background: rgb(var(--rgb-red) / .06); }
.btn-danger:hover:not(:disabled) { border-color: rgb(var(--rgb-red)); box-shadow: 0 0 20px rgb(var(--rgb-red) / .2); }
.btn-sm { padding: .3rem .7rem; font-size: .78rem; border-radius: .4rem; }

/* ---- 表单 ---- */
.input {
  width: 100%; padding: .6rem .85rem; border-radius: .5rem;
  background: rgb(var(--rgb-bg) / .6); border: 1px solid rgb(var(--rgb-line));
  color: rgb(var(--rgb-text)); font-size: .9rem; outline: none; transition: border-color .15s;
}
.input:focus { border-color: rgb(var(--rgb-cyan) / .6); box-shadow: 0 0 0 3px rgb(var(--rgb-cyan) / .08); }
.input::placeholder { color: rgb(var(--rgb-dim) / .7); }
select.input option { background: rgb(var(--rgb-panel)); color: rgb(var(--rgb-text)); }
label.lbl { display: block; font-size: .78rem; color: rgb(var(--rgb-dim)); margin-bottom: .35rem; letter-spacing: .05em; }

/* ---- 徽章 ---- */
.badge { display: inline-flex; align-items: center; gap: .3rem; padding: .12rem .55rem; border-radius: .35rem; font-size: .72rem; border: 1px solid; line-height: 1.5; white-space: nowrap; }
.badge-cyan { color: rgb(var(--rgb-cyan)); border-color: rgb(var(--rgb-cyan) / .4); background: rgb(var(--rgb-cyan) / .07); }
.badge-green { color: rgb(var(--rgb-green)); border-color: rgb(var(--rgb-green) / .4); background: rgb(var(--rgb-green) / .07); }
.badge-amber { color: rgb(var(--rgb-amber)); border-color: rgb(var(--rgb-amber) / .4); background: rgb(var(--rgb-amber) / .07); }
.badge-red { color: rgb(var(--rgb-red)); border-color: rgb(var(--rgb-red) / .4); background: rgb(var(--rgb-red) / .07); }
.badge-gray { color: rgb(var(--rgb-dim)); border-color: rgb(var(--rgb-line)); background: rgb(var(--rgb-dim) / .06); }

/* ---- 表格 ---- */
.cy-table { width: 100%; border-collapse: collapse; font-size: .85rem; }
.cy-table th {
  text-align: left; padding: .6rem .75rem; color: rgb(var(--rgb-dim)); font-weight: 600;
  font-size: .72rem; letter-spacing: .08em; border-bottom: 1px solid rgb(var(--rgb-line));
  white-space: nowrap;
}
.cy-table td { padding: .65rem .75rem; border-bottom: 1px solid rgb(var(--rgb-line) / .55); }
.cy-table tbody tr:hover { background: rgb(var(--rgb-cyan) / .03); }

/* ---- Toast ---- */
#toast-box { position: fixed; top: 1.25rem; right: 1.25rem; z-index: 999; display: flex; flex-direction: column; gap: .5rem; }
.toast {
  min-width: 240px; max-width: 360px; padding: .7rem 1rem; border-radius: .6rem; font-size: .85rem;
  border: 1px solid; animation: toastIn .25s ease; background: var(--toast-bg); backdrop-filter: blur(8px);
  box-shadow: 0 8px 30px rgb(0 0 0 / .25);
}
.toast-ok { border-color: rgb(var(--rgb-green) / .5); color: rgb(var(--rgb-green)); }
.toast-err { border-color: rgb(var(--rgb-red) / .5); color: rgb(var(--rgb-red)); }
.toast-info { border-color: rgb(var(--rgb-cyan) / .5); color: rgb(var(--rgb-cyan)); }
.toast.fade-out { animation: toastOut .3s ease forwards; }
@keyframes toastIn { from { opacity: 0; transform: translateX(30px); } to { opacity: 1; transform: none; } }
@keyframes toastOut { to { opacity: 0; transform: translateX(30px); } }

/* ---- 模态框 ---- */
.modal-mask { position: fixed; inset: 0; z-index: 900; background: var(--mask-bg); backdrop-filter: blur(4px); display: flex; align-items: center; justify-content: center; animation: fadeIn .18s ease; }
.modal-box { width: min(92vw, 480px); animation: popIn .2s ease; }
@keyframes fadeIn { from { opacity: 0; } }
@keyframes popIn { from { opacity: 0; transform: scale(.94) translateY(10px); } }

/* ---- 终端风文本（保持深色终端观感） ---- */
.cy-term { background: var(--term-bg); border: 1px solid rgb(var(--rgb-line)); border-radius: .5rem; padding: .8rem 1rem; font-size: .82rem; color: rgb(0 255 136); overflow-x: auto; }
.cy-term .prompt::before { content: "$ "; color: rgb(0 240 255); }

/* ---- 进度条 ---- */
.cy-bar { height: 8px; border-radius: 4px; background: rgb(var(--rgb-line) / .6); overflow: hidden; }
.cy-bar > div { height: 100%; background: linear-gradient(90deg, rgb(var(--rgb-cyan)), rgb(var(--rgb-green))); box-shadow: 0 0 12px rgb(var(--rgb-cyan) / .6); transition: width .4s ease; border-radius: 4px; }

/* ---- 链接 ---- */
a.cy-link { color: rgb(var(--rgb-cyan)); text-decoration: none; }
a.cy-link:hover { text-shadow: 0 0 8px rgb(var(--rgb-cyan) / .7); }

/* ---- 扫描线动画（hero 区）---- */
.scanline { position: relative; overflow: hidden; }
.scanline::after {
  content: ""; position: absolute; left: 0; right: 0; top: -40%;
  height: 40%; background: linear-gradient(rgb(var(--rgb-cyan) / 0), rgb(var(--rgb-cyan) / .06), rgb(var(--rgb-cyan) / 0));
  animation: scan 5s linear infinite; pointer-events: none;
}
@keyframes scan { to { top: 130%; } }

/* ---- 发光文字 ---- */
html[data-theme="dark"] .glow { text-shadow: 0 0 12px rgb(var(--rgb-cyan) / .65); }
html[data-theme="dark"] .glow-green { text-shadow: 0 0 12px rgb(var(--rgb-green) / .65); }
html:not([data-theme="dark"]) .glow, html:not([data-theme="dark"]) .glow-green { text-shadow: none; }

/* ---- 分页 ---- */
.pager { display: flex; gap: .35rem; align-items: center; }
.pager button { min-width: 2rem; height: 2rem; border-radius: .4rem; border: 1px solid rgb(var(--rgb-line)); background: rgb(var(--rgb-text) / .03); color: rgb(var(--rgb-text)); font-size: .8rem; cursor: pointer; }
.pager button.cur { border-color: rgb(var(--rgb-cyan) / .6); color: rgb(var(--rgb-cyan)); background: rgb(var(--rgb-cyan) / .07); }
.pager button:hover:not(.cur):not(:disabled) { border-color: rgb(var(--rgb-cyan) / .4); }
.pager button:disabled { opacity: .35; cursor: not-allowed; }

/* ---- Tab ---- */
.cy-tabs { display: flex; gap: .25rem; border-bottom: 1px solid rgb(var(--rgb-line)); }
.cy-tab { padding: .55rem 1rem; font-size: .85rem; color: rgb(var(--rgb-dim)); cursor: pointer; border-bottom: 2px solid transparent; transition: all .15s; background: none; border-top: none; border-left: none; border-right: none; }
.cy-tab:hover { color: rgb(var(--rgb-text)); }
.cy-tab.on { color: rgb(var(--rgb-cyan)); border-bottom-color: rgb(var(--rgb-cyan)); }
html[data-theme="dark"] .cy-tab.on { text-shadow: 0 0 10px rgb(var(--rgb-cyan) / .5); }

/* ---- 抽屉（管理端编辑）---- */
.drawer-mask { position: fixed; inset: 0; background: var(--mask-bg); z-index: 800; animation: fadeIn .18s ease; }
.drawer { position: fixed; top: 0; right: -520px; bottom: 0; width: min(92vw, 500px); z-index: 801; overflow-y: auto; animation: slideIn .25s ease; }
@keyframes slideIn { to { right: 0; } }

/* ---- loading ---- */
.cy-spin { width: 18px; height: 18px; border: 2px solid rgb(var(--rgb-cyan) / .25); border-top-color: rgb(var(--rgb-cyan)); border-radius: 50%; animation: spin .8s linear infinite; display: inline-block; }
@keyframes spin { to { transform: rotate(360deg); } }

/* ---- flag 成功特效 ---- */
@keyframes scorePop { 0% { opacity: 0; transform: translateY(8px) scale(.9);} 20% { opacity: 1; transform: none; } 80% { opacity: 1; } 100% { opacity: 0; transform: translateY(-14px); } }
.score-pop { animation: scorePop 2.2s ease forwards; color: rgb(var(--rgb-green)); font-weight: 700; }
html[data-theme="dark"] .score-pop { text-shadow: 0 0 14px rgb(var(--rgb-green) / .8); }

/* ---- 主题切换器 ---- */
.theme-switch { display: inline-flex; border: 1px solid rgb(var(--rgb-line)); border-radius: .45rem; overflow: hidden; }
.theme-switch button {
  padding: .2rem .55rem; font-size: .72rem; color: rgb(var(--rgb-dim)); background: transparent;
  border: none; cursor: pointer; transition: all .15s; line-height: 1.5;
}
.theme-switch button:hover { color: rgb(var(--rgb-text)); }
.theme-switch button.on { color: rgb(var(--rgb-cyan)); background: rgb(var(--rgb-cyan) / .1); }

/* ---- 页脚 ---- */
.site-footer {
  border-top: 1px solid rgb(var(--rgb-line) / .7);
  color: rgb(var(--rgb-dim));
}
.site-footer a { color: rgb(var(--rgb-dim)); text-decoration: none; transition: color .15s; }
.site-footer a:hover { color: rgb(var(--rgb-cyan)); }

/* markdown 简易渲染容器 */
.md h1,.md h2,.md h3 { color: rgb(var(--rgb-text)); margin: .9em 0 .4em; font-weight: 700; }
.md h1{font-size:1.2rem}.md h2{font-size:1.08rem}.md h3{font-size:1rem}
.md p { margin: .5em 0; line-height: 1.75; }
.md code { background: rgb(var(--rgb-cyan) / .08); color: rgb(var(--rgb-cyan)); padding: .1em .4em; border-radius: .3rem; font-size: .85em; }
.md pre { background: var(--term-bg); border: 1px solid rgb(var(--rgb-line)); border-radius: .5rem; padding: .8rem 1rem; overflow-x: auto; margin: .6em 0; }
.md pre code { background: none; padding: 0; color: rgb(var(--rgb-green)); }
.md ul,.md ol { padding-left: 1.4em; margin: .5em 0; line-height: 1.8; }
.md ul { list-style: disc; } .md ol { list-style: decimal; }
.md a { color: rgb(var(--rgb-cyan)); }
.md img { max-width: 100%; border-radius: .5rem; }
.md blockquote { border-left: 3px solid rgb(var(--rgb-cyan) / .5); padding-left: 1rem; color: rgb(var(--rgb-dim)); margin: .6em 0; }