/* ==========================================================
   Tools Main — 工具页 v3
   心岛暖桃色系 · 毛玻璃卡片 · Material Symbols 图标
   ========================================================== */

/* ===== 页面容器 ===== */
#page-3 { background:#fef7f5; overflow-y:auto; }

/* ===== 背景渐变 ===== */
.tk-bg {
  position:absolute; top:0; left:0; right:0; height:220px; overflow:hidden; pointer-events:none; z-index:0;
  background:
    radial-gradient(ellipse at 70% -8%, rgba(192,137,158,.14), transparent 40%),
    radial-gradient(ellipse at 18% 10%, rgba(192,137,158,.08), transparent 35%),
    linear-gradient(180deg, #fff6f8 0%, #fef7f5 60%, #fef7f5 100%);
}

/* ===== 滚动区 ===== */
.tk-scroll { position:relative; z-index:5; padding:0 18px 20px; display:flex; flex-direction:column; gap:18px; }

/* ===== Hero ===== */
.tk-hero { padding-top:8px; }
.tkh-title { margin:0 0 2px; font-family:'Georgia',serif; font-size:28px; font-weight:700; color:#362040; letter-spacing:.03em; }
.tkh-sub { margin:0 0 16px; font-size:13px; color:#9a7e8a; }

/* Hero 卡片 — 暖紫渐变毛玻璃 */
.tkh-card {
  position:relative; overflow:hidden;
  min-height:120px; border-radius:22px;
  background:linear-gradient(135deg, rgba(255,237,244,.92) 0%, rgba(245,238,250,.88) 48%, rgba(238,244,255,.82) 100%);
  backdrop-filter:blur(24px); -webkit-backdrop-filter:blur(24px);
  border:1px solid rgba(180,140,160,.08);
  box-shadow:0 8px 26px rgba(120,68,100,.05), 0 2px 8px rgba(120,68,100,.03);
  padding:20px;
}
.tkhc-text { position:relative; z-index:2; max-width:58%; }
.tkhc-text strong { display:block; font-size:16px; font-weight:680; color:#362040; line-height:1.45; margin-bottom:6px; }
.tkhc-text span { font-size:12px; color:#8a7a80; line-height:1.5; }

/* Hero 装饰 — 蜡烛 + 光晕 */
.tkhc-illust { position:absolute; right:22px; bottom:18px; z-index:1; }
.tkhci-candle {
  position:absolute; right:34px; bottom:26px;
  width:14px; height:44px; border-radius:6px 6px 3px 3px;
  background:linear-gradient(180deg,#ffffff,#d5c8f2);
  box-shadow:0 -10px 0 -3px rgba(192,137,158,.64);
}
.tkhci-base {
  position:absolute; right:6px; bottom:16px;
  width:80px; height:34px; border-radius:55% 48% 40% 42%;
  background:linear-gradient(180deg, rgba(220,170,190,.48), rgba(196,155,180,.28));
}
/* 蜡烛光晕 */
.tkhc-illust::before {
  content:''; position:absolute; right:30px; bottom:62px;
  width:22px; height:22px; border-radius:50%;
  background:rgba(255,235,180,.5); box-shadow:0 0 24px rgba(255,218,150,.35);
}

/* ===== Section 通用 ===== */
.tk-section { margin-top:6px; }
.tks-head { display:flex; align-items:flex-end; justify-content:space-between; margin-bottom:12px; }
.tksh-title { display:flex; align-items:center; gap:6px; }
.tksh-star { font-size:16px; color:#c0899e; font-variation-settings:'FILL' 1; }
.tksh-title h2 { margin:0; font-family:'Georgia',serif; font-size:17px; font-weight:700; color:#362040; }
.tksh-edit { font-size:12px; color:#b8a2b4; cursor:pointer; }
.tksh-progress { font-size:12px; color:#9a7e8a; }

/* ===== 卡片容器 ===== */
.tk-block-card {
  background:rgba(255,255,255,.88); backdrop-filter:blur(24px); -webkit-backdrop-filter:blur(24px);
  border:1px solid rgba(180,140,160,.08);
  border-radius:22px;
  box-shadow:0 6px 20px rgba(120,68,100,.04), 0 3px 10px rgba(120,68,100,.03);
  padding:16px;
}

/* ===== 最近使用 (3-col grid) ===== */
.tk-recent-row { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; }
.tkr-card {
  min-height:96px; border-radius:18px;
  background:rgba(255,255,255,.88); backdrop-filter:blur(18px); -webkit-backdrop-filter:blur(18px);
  border:1px solid rgba(180,140,160,.06);
  box-shadow:0 4px 14px rgba(120,68,100,.035), 0 2px 6px rgba(120,68,100,.025);
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:10px; padding:14px 8px; cursor:pointer; transition:transform .18s;
}
.tkr-card:active { transform:scale(.96); }
.tkr-icon-wrap {
  width:42px; height:42px; border-radius:14px;
  background:linear-gradient(135deg,#f8eaf4,#eee2f8);
  display:flex; align-items:center; justify-content:center;
}
.tkr-icon { font-size:22px; color:#c0899e; }
.tkr-icon-img { width:28px; height:28px; object-fit:contain; border-radius:4px; }
.tkr-card p { margin:0; font-size:13px; font-weight:650; color:#362040; }

/* ===== 工具 2x2 网格 ===== */
.tk-tool-grid { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.tkt-card {
  min-height:108px; padding:14px 12px; border-radius:18px;
  background:rgba(255,255,255,.88); backdrop-filter:blur(18px); -webkit-backdrop-filter:blur(18px);
  border:1px solid rgba(180,140,160,.08);
  display:flex; gap:12px; align-items:center;
  cursor:pointer; transition:transform .18s, box-shadow .18s;
}
.tkt-card:active { transform:scale(.97); box-shadow:0 2px 8px rgba(120,68,100,.06); }
.tkt-icon-wrap {
  width:48px; height:48px; border-radius:18px; flex-shrink:0;
  background:linear-gradient(135deg,#f8eaf4,#f2e6f6);
  display:flex; align-items:center; justify-content:center;
}
.tkt-icon { font-size:24px; color:#c0899e; }
.tkt-icon-img { width:32px; height:32px; object-fit:contain; border-radius:4px; }
.tkt-icon-purple { background:linear-gradient(135deg,#efe6fa,#e2d6f4); }
.tkt-icon-purple .tkt-icon { color:#8060a0; }
.tkt-icon-pink { background:linear-gradient(135deg,#fce4ef,#f8d8e8); }
.tkt-icon-pink .tkt-icon { color:#c07085; }
.tkt-icon-blue { background:linear-gradient(135deg,#eef4ff,#e2edfc); }
.tkt-icon-blue .tkt-icon { color:#6a88b8; }
.tkt-info { flex:1; min-width:0; }
.tkt-info h3 { margin:0 0 4px; font-size:14px; font-weight:680; color:#362040; }
.tkt-info p { margin:0; font-size:11px; line-height:1.45; color:#9a7e8a; }

/* ===== 学习列表 ===== */
.tk-learn-list { display:flex; flex-direction:column; gap:8px; }
.tkl-item {
  display:flex; align-items:center; gap:12px;
  min-height:60px; padding:12px; border-radius:18px;
  background:rgba(255,255,255,.88); backdrop-filter:blur(18px); -webkit-backdrop-filter:blur(18px);
  border:1px solid rgba(180,140,160,.06);
  cursor:pointer; transition:transform .15s, box-shadow .15s;
}
.tkl-item:active { transform:scale(.985); box-shadow:0 2px 8px rgba(120,68,100,.04); }
.tkl-icon-wrap {
  width:40px; height:40px; border-radius:14px; flex-shrink:0;
  background:linear-gradient(135deg,#fce4ef,#f2e0f2);
  display:flex; align-items:center; justify-content:center;
}
.tkl-icon { font-size:20px; color:#c0899e; }
.tkl-icon-img { width:26px; height:26px; object-fit:contain; border-radius:4px; }
.tkl-icon-zodiac { background:linear-gradient(135deg,#ffeef5,#fce0f0); }
.tkl-icon-zodiac .tkl-icon { color:#c07085; }
.tkl-icon-planet { background:linear-gradient(135deg,#eef4ff,#e2ebf8); }
.tkl-icon-planet .tkl-icon { color:#6a88b8; }
.tkl-icon-progress { background:linear-gradient(135deg,#efe6fa,#e4daf4); }
.tkl-icon-progress .tkl-icon { color:#8b6fd6; }
.tkl-info { flex:1; min-width:0; }
.tkl-info h3 { margin:0 0 3px; font-size:14px; font-weight:680; color:#362040; }
.tkl-info p { margin:0; font-size:11px; color:#9a7e8a; line-height:1.4; }
.tkl-arrow { font-size:18px; color:#c4b8c8; flex-shrink:0; }

/* ===== Responsive ===== */
@media (max-width:360px) {
  .tk-tool-grid { grid-template-columns:1fr; }
  .tkh-title { font-size:25px; }
}