@charset "utf-8";

/* ==========================================================================
   数据结构可视化 — 站点样式（首页 / 文档页）
   统一的配色、间距与排版，供 index.html 等页面使用
   ========================================================================== */

:root {
   --brand: #146b52;
   --brand-dark: #0d4b39;
   --brand-darker: #093528;
   --brand-light: #e9f5f0;
   --accent: #f0a92e;
   --accent-dark: #cf8b13;

   --text: #1f2933;
   --text-muted: #5b6b74;
   --line: #dfe6e3;
   --surface: #ffffff;
   --page-bg: #f4f7f6;

   --radius: 10px;
   --radius-sm: 6px;
   --shadow-sm: 0 1px 2px rgba(16, 44, 34, .08);
   --shadow: 0 4px 14px rgba(16, 44, 34, .10);
   --shadow-lg: 0 10px 30px rgba(16, 44, 34, .14);

   --sans: "Segoe UI", "Microsoft YaHei", "PingFang SC", "Hiragino Sans GB",
      "Helvetica Neue", Helvetica, Arial, sans-serif;
   --mono: "Cascadia Mono", Consolas, "SFMono-Regular", Menlo, Monaco,
      "Courier New", monospace;
}

/* ---------- 基础 ---------- */

* {
   box-sizing: border-box;
}

html {
   -webkit-text-size-adjust: 100%;
}

body {
   margin: 0;
   padding: 0;
   font-family: var(--sans);
   font-size: 15px;
   line-height: 1.65;
   color: var(--text);
   background: var(--page-bg);
}

a {
   color: var(--brand);
   text-decoration: none;
}

a:hover {
   color: var(--accent-dark);
   text-decoration: underline;
}

h1,
h2,
h3 {
   line-height: 1.3;
   color: var(--brand-dark);
}

/* ---------- 页面骨架 ---------- */

.container {
   max-width: 1180px;
   margin: 0 auto;
   background: var(--surface);
   box-shadow: var(--shadow);
   min-height: 100vh;
}

.header {
   display: flex;
   align-items: center;
   justify-content: space-between;
   gap: 16px;
   flex-wrap: wrap;
   padding: 18px 32px;
   color: #fff;
   background: linear-gradient(120deg, var(--brand-darker), var(--brand) 65%, #1c8465);
   border-bottom: 3px solid var(--accent);
}

.header h1 {
   margin: 0;
   font-size: 24px;
   font-weight: 600;
   letter-spacing: .5px;
   color: #fff;
}

.header a {
   color: #fff;
}

/* ---------- 正文 ---------- */

.content {
   flex: 1 1 auto;
   min-width: 0;
   padding: 30px 40px 56px;
}

.content h1 {
   margin: 0 0 18px;
   padding-bottom: 10px;
   font-size: 26px;
   border-bottom: 2px solid var(--brand-light);
}

.content h2 {
   margin: 32px 0 12px;
   font-size: 20px;
}

.content h3 {
   margin: 24px 0 10px;
   font-size: 17px;
   color: var(--brand);
}

.content p {
   margin: 0 0 14px;
}

.content ul,
.content ol {
   padding-left: 26px;
}

.content li {
   margin: 4px 0;
}

.content em {
   font-style: italic;
   font-weight: 600;
   color: var(--accent-dark);
}

/* 代码块 */
.code {
   margin: 14px 0 18px;
   padding: 14px 18px;
   max-width: 100%;
   overflow-x: auto;
   font-family: var(--mono);
   font-size: 13px;
   line-height: 1.55;
   color: #e9f5f0;
   background: #14261f;
   border: 1px solid #243c33;
   border-radius: var(--radius-sm);
   tab-size: 4;
}

.code pre {
   margin: 0;
   font-family: inherit;
   font-size: inherit;
   white-space: pre;
}

/* 少数示例代码块是裸 <pre>（未包在 .code 中），同样需要可横向滚动 */
.content pre {
   max-width: 100%;
   overflow-x: auto;
}

/* ---------- 旧页面可能残留的元素，保持中性外观 ---------- */
.about {
   text-align: center;
}

.text,
.personal,
.contact {
   font-family: var(--sans);
}

/* ---------- 算法总览：分组卡片 ---------- */

.algo-intro {
   margin: 0 0 26px;
   color: var(--text-muted);
}

.algo-grid {
   display: grid;
   grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
   gap: 20px;
}

.algo-card {
   padding: 18px 20px 20px;
   background: var(--surface);
   border: 1px solid var(--line);
   border-top: 3px solid var(--brand);
   border-radius: var(--radius);
   box-shadow: var(--shadow-sm);
   transition: box-shadow .2s ease, transform .2s ease, border-color .2s ease;
}

.algo-card:hover {
   box-shadow: var(--shadow);
   transform: translateY(-2px);
   border-top-color: var(--accent);
}

.algo-card>h2 {
   display: flex;
   align-items: center;
   gap: 9px;
   margin: 0 0 12px;
   font-size: 16px;
   font-weight: 700;
   letter-spacing: .3px;
   color: var(--brand-dark);
}

.algo-card>h2::before {
   content: "";
   width: 8px;
   height: 8px;
   border-radius: 50%;
   background: var(--accent);
   flex: 0 0 auto;
}

.algo-card ul {
   margin: 0;
   padding: 0;
   list-style: none;
}

.algo-card li {
   margin: 0;
}

.algo-card li+li {
   border-top: 1px dashed var(--line);
}

.algo-card a {
   display: block;
   padding: 7px 4px;
   color: var(--brand-dark);
   border-radius: var(--radius-sm);
   transition: background .15s ease, color .15s ease, padding-left .15s ease;
}

.algo-card a:hover {
   color: var(--brand-darker);
   background: var(--brand-light);
   padding-left: 10px;
   text-decoration: none;
}

.algo-card .sub {
   margin-left: 18px;
   padding-left: 10px;
   border-left: 2px solid var(--line);
}

.algo-card .muted {
   padding: 7px 4px;
   color: var(--text-muted);
}

.algo-card .muted a {
   display: inline;
   padding: 0;
   background: none;
}

.algo-card .muted a:hover {
   padding: 0;
   background: none;
   text-decoration: underline;
}

/* ---------- 页脚 ---------- */

.footer {
   padding: 22px 32px 26px;
   font-size: 13px;
   color: var(--text-muted);
   background: #eef3f1;
   border-top: 1px solid var(--line);
}

.footer p {
   margin: 0;
}

.footer a {
   color: var(--brand-dark);
}

/* ---------- 响应式 ---------- */

@media (max-width: 860px) {
   .header {
      padding: 16px 20px;
   }

   .content {
      padding: 22px 20px 40px;
   }
}