/* ============================================================
 * 青清龙的魔法工坊 · 个人小站
 * 2026-09-30 第三版：页脚加 ICP 备案号徽章（.beian / .beian-ico）
 * 2026-09-21 第二版：手机优先重做
 *   · 单页，没有导航、没有列表页、没有任何文章页
 *   · 整站零 JavaScript、零表单 —— 页面上不存在可交互的东西
 *   · 二次元一点：夜空紫粉渐变、会转的魔法阵、闪的星、一弯月亮
 * 色彩：魔法紫 #7c6bd9 / 星青 #4fb0c6 / 樱粉 #f2a0be / 星光金 #e8b84b
 * 不引任何外部资源（字体、图标、图片全不用），图都是内联 SVG 自己画的
 *
 * ★ 这份样式是「手机优先」写的：不带 media query 的就是手机上的样子，
 *   只有 @media (min-width: 600px) 那块是给平板/电脑加宽的。
 * ★ 改了这份文件，记得把 index.html 里 style.css?v= 后面的数字加一 ——
 *   服务器给静态文件发 7 天强缓存，不加戳浏览器会一直用旧的。
 * ============================================================ */

:root {
  --magic:   #7c6bd9;
  --magic-d: #5b4bb5;
  --aqua:    #4fb0c6;
  --pink:    #f2a0be;
  --gold:    #e8b84b;
  --ink:     #33304a;
  --ink-2:   #6b6588;
  --ink-3:   #9d97b6;
  --paper:   #faf8ff;
  --line:    rgba(124, 107, 217, .15);
  --shadow:  0 6px 18px rgba(124, 107, 217, .10);
  --shadow-lift: 0 14px 34px rgba(91, 75, 181, .16), 0 3px 10px rgba(91, 75, 181, .08);
}

* { box-sizing: border-box; }

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

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei",
               "Noto Sans CJK SC", "Source Han Sans SC", sans-serif;
  /* 手机上中文正文 16px 才够看，15px 在安卓上偏小 */
  font-size: 16px;
  line-height: 1.9;
  overflow-x: hidden;
}

/* 手机上正文小一号：16px 是基准，但卡片里的说明文字用 14.5px 不挤 */
p { margin: 0; }

/* ==================== 顶部：夜空 ==================== */

.sky {
  position: relative;
  overflow: hidden;
  /* 上面留出状态栏的高度（viewport-fit=cover 下才有值），不然站名会顶到刘海 */
  padding: calc(54px + env(safe-area-inset-top, 0px)) 20px 84px;
  text-align: center;
  color: #fff;
  background-image:
    radial-gradient(125% 85% at 50% -18%, rgba(255, 255, 255, .28), rgba(255, 255, 255, 0) 62%),
    linear-gradient(170deg,
      #3f3480 0%, #6355bf 30%, #8f79d4 58%, #c893c9 80%, #f2a0be 100%);
}

/* 星星：十几颗小白点，慢慢一明一暗 */
.sky::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(1.6px 1.6px at  8% 16%, #fff, transparent),
    radial-gradient(1.2px 1.2px at 19% 46%, #fff, transparent),
    radial-gradient(2.1px 2.1px at 27% 10%, #fff, transparent),
    radial-gradient(1.2px 1.2px at 34% 62%, #fff, transparent),
    radial-gradient(1.5px 1.5px at 44% 28%, #fff, transparent),
    radial-gradient(1.2px 1.2px at 52% 74%, #fff, transparent),
    radial-gradient(1.9px 1.9px at 61% 16%, #fff, transparent),
    radial-gradient(1.2px 1.2px at 69% 52%, #fff, transparent),
    radial-gradient(1.5px 1.5px at 77% 30%, #fff, transparent),
    radial-gradient(1.2px 1.2px at 84% 68%, #fff, transparent),
    radial-gradient(2.0px 2.0px at 91% 22%, #fff, transparent),
    radial-gradient(1.2px 1.2px at 14% 78%, #fff, transparent),
    radial-gradient(1.4px 1.4px at 47% 88%, #fff, transparent),
    radial-gradient(1.2px 1.2px at 72% 86%, #fff, transparent),
    radial-gradient(1.5px 1.5px at  4% 52%, #fff, transparent),
    radial-gradient(1.2px 1.2px at 96% 60%, #fff, transparent);
  animation: twinkle 5.2s ease-in-out infinite alternate;
}

/* 压在标题后面的魔法阵，缓缓转 */
.circle {
  position: absolute;
  top: 50%; left: 50%;
  width: 300px; height: 300px;
  margin: -150px 0 0 -150px;
  opacity: .48;
  animation: spin 54s linear infinite;
}

/* 右上角一弯月亮 */
.moon {
  position: absolute;
  top: calc(14px + env(safe-area-inset-top, 0px));
  right: 18px;
  width: 34px; height: 34px;
  opacity: .95;
  filter: drop-shadow(0 0 11px rgba(255, 233, 168, .7));
}

.sky-inner { position: relative; z-index: 1; }

.hello {
  margin: 0 0 10px;
  font-size: 12px;
  letter-spacing: .32em;
  text-indent: .32em;
  color: rgba(255, 255, 255, .8);
}

.sky h1 {
  margin: 0 0 12px;
  font-size: 26px;
  font-weight: 700;
  letter-spacing: .1em;
  text-indent: .1em;
  text-shadow: 0 2px 16px rgba(48, 30, 96, .5), 0 0 26px rgba(255, 255, 255, .32);
}

.tagline {
  margin: 0;
  font-size: 13.5px;
  letter-spacing: .08em;
  color: rgba(255, 255, 255, .9);
}

/* ==================== 正文 ==================== */

main {
  max-width: 620px;
  margin: 0 auto;
  padding: 0 16px;
}

.sec { margin: 30px 0; }

/* 第一块（关于我）往上提，压在夜空的下边缘上，手机上是常见的资料卡布局 */
.sec:first-child { margin-top: -48px; }

.sec:last-child { margin-bottom: 0; }

/* ---- 板块标题：左侧一道渐变竖条 + 一颗小星星 ---- */

.sec-title {
  display: flex;
  align-items: center;
  gap: 9px;
  margin: 0 0 14px;
  font-size: 17px;
  font-weight: 700;
  letter-spacing: .06em;
  color: var(--magic-d);
}

.bar {
  flex: none;
  width: 4px;
  height: 17px;
  border-radius: 2px;
  background-image: linear-gradient(180deg, var(--magic), var(--pink));
}

.spark {
  flex: none;
  width: 13px; height: 13px;
  fill: var(--gold);
  opacity: .9;
}

/* ---- 关于我：压在夜空上的资料卡 ---- */

.profile {
  /* ★ position/z-index 不能删：夜空 .sky 是 position:relative，按绘制顺序
     定位元素会盖在静态元素上面 —— 不写这两行，这张压上去的白卡会被整个吞掉。
     （.sky-inner 也是 z-index:1，同层级下后来者居上，所以这里能压过它。）*/
  position: relative;
  z-index: 1;

  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 18px 17px;
  background: #fff;
  border-radius: 20px;
  box-shadow: var(--shadow-lift);
}

.avatar {
  flex: none;
  width: 58px; height: 58px;
  border-radius: 50%;
  padding: 2px;
  background-image: linear-gradient(140deg, var(--magic), var(--pink));
}
.avatar svg { display: block; width: 100%; height: 100%; border-radius: 50%; }

.profile-main { min-width: 0; }

.profile-label {
  margin: 0 0 5px;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: .08em;
  color: var(--magic-d);
}

.profile-bio {
  font-size: 14.5px;
  line-height: 1.85;
  color: var(--ink-2);
}

/* ---- 喜欢的东西：2×2 小卡片，每张跟自己的圆点同色 ---- */

.likes {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 11px;
}

.like {
  padding: 13px 13px 14px;
  border: 1px solid var(--line);
  border-radius: 15px;
  box-shadow: var(--shadow);
}
/* 四张卡的淡色底，分别对着 d1~d4 的点色（紫/粉/青/金） */
.likes .like:nth-child(1) { background-image: linear-gradient(158deg, #f4f0ff, #fff 72%); }
.likes .like:nth-child(2) { background-image: linear-gradient(158deg, #fdeff5, #fff 72%); }
.likes .like:nth-child(3) { background-image: linear-gradient(158deg, #ecf8fa, #fff 72%); }
.likes .like:nth-child(4) { background-image: linear-gradient(158deg, #fdf6e7, #fff 72%); }

.like h3 {
  display: flex;
  align-items: center;
  gap: 7px;
  margin: 0 0 6px;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: .04em;
  color: var(--ink);
}

.dot {
  flex: none;
  width: 8px; height: 8px;
  border-radius: 50%;
  box-shadow: 0 0 0 3px rgba(255, 255, 255, .9);
}
.d1 { background: var(--magic); }
.d2 { background: var(--pink); }
.d3 { background: var(--aqua); }
.d4 { background: var(--gold); }

.like p {
  font-size: 13.5px;
  line-height: 1.7;
  color: var(--ink-2);
}

/* ---- 最近记的几笔：时间轴 ---- */

.timeline {
  position: relative;
  margin: 0;
  padding: 4px 0 4px 22px;
  list-style: none;
}
/* 那条竖线 */
.timeline::before {
  content: "";
  position: absolute;
  left: 4px;
  top: 12px;
  bottom: 12px;
  width: 2px;
  border-radius: 1px;
  background-image: linear-gradient(180deg,
    rgba(124, 107, 217, .5), rgba(242, 160, 190, .28) 62%, rgba(242, 160, 190, 0));
}

.timeline li {
  position: relative;
  padding-bottom: 18px;
}
.timeline li:last-child { padding-bottom: 0; }

/* 竖线上的小圆点，中心正好落在线上。
   ul 的 padding-left 是 22px、竖线在 ul 左侧 4px、线宽 2px（中心 5px），
   所以左边缘 = 5 - 5(半径) - 22 = -22px。改 padding 记得同步改这里。 */
.tl-dot {
  position: absolute;
  left: -22px;
  top: 8px;
  width: 10px; height: 10px;
  border-radius: 50%;
  background: #fff;
  border: 2px solid var(--magic);
  box-shadow: 0 0 0 3px rgba(124, 107, 217, .13);
}
.timeline li:nth-child(2) .tl-dot { border-color: #b98ad0; box-shadow: 0 0 0 3px rgba(185, 138, 208, .15); }
.timeline li:nth-child(3) .tl-dot { border-color: var(--pink); box-shadow: 0 0 0 3px rgba(242, 160, 190, .18); }

.tl-date {
  display: block;
  font-size: 12.5px;
  letter-spacing: .1em;
  color: var(--ink-3);
}

.timeline p {
  margin-top: 2px;
  font-size: 15px;
  line-height: 1.8;
  color: var(--ink);
}

/* ---- 本站说明 ---- */

.notice {
  padding: 17px 18px;
  background-image: linear-gradient(158deg, #f4f0ff, #fdf1f7);
  border: 1px dashed rgba(124, 107, 217, .34);
  border-radius: 17px;
}

.notice p {
  font-size: 14.5px;
  line-height: 1.85;
  color: #564f78;
}
.notice p + p { margin-top: 9px; }

.notice strong { color: var(--magic-d); }

/* ==================== 页脚 ==================== */

.site-footer {
  margin-top: 42px;
  padding: 24px 20px calc(28px + env(safe-area-inset-bottom, 0px));
  text-align: center;
  border-top: 1px solid var(--line);
  color: var(--ink-3);
  font-size: 12.5px;
  line-height: 1.9;
}

.foot-mark {
  display: block;
  margin: 0 auto 10px;
  width: 15px; height: 15px;
}
.foot-mark svg { display: block; width: 100%; height: 100%; fill: var(--gold); opacity: .7; }

.copy { letter-spacing: .05em; }

/* 备案号：页脚最底下那枚小徽章（2026-09-30 备案通过时加的）
   工信部要求首页底部看得见 + 号本身链到 beian.miit.gov.cn，两条都落在这条上。
   颜色故意比页脚的 .copy 深一档：备案号是要给人看清的，不是装饰。 */
.beian {
  margin-top: 13px;
  display: flex;
  justify-content: center;
}

.beian a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 14px 5px 11px;
  border: 1px solid rgba(124, 107, 217, .22);
  border-radius: 999px;
  background-image: linear-gradient(135deg, rgba(124, 107, 217, .07), rgba(242, 160, 190, .10));
  color: var(--ink-2);
  font-size: 12px;
  letter-spacing: .04em;
  text-decoration: none;
  transition: color .18s ease, border-color .18s ease,
              background-image .18s ease, transform .18s ease;
}

/* 盾牌 + 对勾：跟站里其它图一样自己画的，不引外部图标 */
.beian-ico {
  flex: none;
  width: 13px; height: 13px;
  fill: none;
  stroke: var(--gold);
  stroke-width: 1.7;
  stroke-linejoin: round;
  stroke-linecap: round;
  opacity: .9;
}
.beian-ico .tick { stroke: var(--aqua); }

.beian a:hover {
  color: var(--magic-d);
  border-color: rgba(124, 107, 217, .42);
  background-image: linear-gradient(135deg, rgba(124, 107, 217, .13), rgba(242, 160, 190, .16));
  transform: translateY(-1px);
}
.beian a:active { transform: translateY(0); }
.beian a:focus-visible { outline: 2px solid rgba(124, 107, 217, .5); outline-offset: 2px; }

/* ==================== 动画 ==================== */

@keyframes spin {
  to { transform: rotate(360deg); }
}

@keyframes twinkle {
  from { opacity: .5; }
  to   { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .circle, .sky::before { animation: none !important; }
}

/* ==================== 平板 / 电脑：只是放宽，不改结构 ==================== */

@media (min-width: 600px) {
  body { font-size: 16.5px; }

  .sky { padding: calc(74px + env(safe-area-inset-top, 0px)) 24px 104px; }
  .sky h1 { font-size: 33px; }
  .hello { font-size: 12.5px; }
  .tagline { font-size: 14px; }
  .circle { width: 380px; height: 380px; margin: -190px 0 0 -190px; }
  .moon { width: 42px; height: 42px; right: 26px; }

  main { padding: 0 22px; }
  .sec { margin: 38px 0; }
  .sec:first-child { margin-top: -56px; }

  .profile { padding: 22px 22px; gap: 18px; }
  .avatar { width: 68px; height: 68px; }
  .profile-bio { font-size: 15px; }

  .likes { gap: 14px; }
  .like { padding: 16px 16px 17px; }
  .like p { font-size: 14px; }

  .timeline { padding-left: 24px; }
  .tl-dot { left: -24px; }
  .timeline p { font-size: 15.5px; }
}

/* 特别窄的机器（<=340px）两列会挤，退成一列 */
@media (max-width: 340px) {
  .likes { grid-template-columns: 1fr; }
  .sky h1 { font-size: 22px; }
  .profile { gap: 11px; padding: 15px 13px; }
  .avatar { width: 52px; height: 52px; }
}