/* =====================================================
   FRUTIGER AERO BLOG — style.css
   ★ EDIT GUIDE:
     Colors    → :root variables below
     Fonts     → body { font-family: ... }
     Max width → .site { max-width: ... }
     BG        → body { background: ... }
===================================================== */
:root {
  --sky1: #c8ecff;
  --sky2: #8dd4f8;
  --sky3: #44a8e8;
  --sky4: #1878c8;
  --aqua1: #c0f4ec;
  --aqua2: #70d8c4;
  --aqua3: #28b098;
  --green1: #c8f0a0;
  --green2: #80d048;
  --green3: #3a9018;
  --glass: rgba(210,242,255,0.55);
  --border-glass: rgba(255,255,255,0.78);
  --text-dark: #0e3858;
  --text-mid: #1e6080;
  --text-light: #4898b8;
  --white: #ffffff;
}

* { margin:0; padding:0; box-sizing:border-box; }

body {
  min-height: 100vh;
  font-family: MS Gothic, Tahoma, 'Trebuchet MS', Arial, sans-serif;
  font-size: 12px;
  background:
    linear-gradient(160deg, #cceeff 0%, #b8e8f8 25%, #c0f0e0 55%, #b8d8ff 100%);
  background-attachment: fixed;
  overflow-x: hidden;
  color: var(--text-dark);
}

/* Bubbles */
.bubble { position:fixed;border-radius:50%;pointer-events:none;z-index:1;background:radial-gradient(circle at 30% 28%,rgba(255,255,255,.85),rgba(160,224,255,.35) 55%,transparent 75%);border:1px solid rgba(255,255,255,.65);animation:bubbleRise linear infinite; }
@keyframes bubbleRise { 0%{transform:translateY(100vh) scale(.6);opacity:0} 8%{opacity:1} 90%{opacity:.6} 100%{transform:translateY(-120px) translateX(25px) scale(1);opacity:0} }
.leaf { position:fixed;pointer-events:none;z-index:1;font-size:18px;opacity:.18;animation:leafDrift linear infinite; }
@keyframes leafDrift { 0%{transform:translateY(-40px) rotate(0deg);opacity:0} 10%{opacity:.2} 90%{opacity:.15} 100%{transform:translateY(100vh) translateX(40px) rotate(180deg);opacity:0} }

/* Site wrapper */
.site { max-width:920px;margin:0 auto;position:relative;z-index:10;display:flex;flex-direction:column;min-height:100vh; }

/* ======== HEADER ======== */
header { background:linear-gradient(180deg,rgba(180,232,255,.97) 0%,rgba(120,196,248,.98) 45%,rgba(64,158,230,.99) 100%);border-bottom:2px solid rgba(255,255,255,.5);box-shadow:0 4px 20px rgba(40,120,200,.25),inset 0 1px 0 rgba(255,255,255,.7);position:relative;overflow:hidden; }
header::after { content:'';position:absolute;top:0;left:0;right:0;height:48%;background:linear-gradient(180deg,rgba(255,255,255,.28),transparent);pointer-events:none; }

.hdr-titlebar { background:linear-gradient(180deg,rgba(100,180,240,.95),rgba(48,128,210,.98));padding:5px 14px;display:flex;align-items:center;gap:10px;border-bottom:1px solid rgba(255,255,255,.35); }
.hdr-tb-dots { display:flex;gap:5px; }
.hdr-dot { width:13px;height:13px;border-radius:50%;border:1px solid rgba(0,0,0,.18);box-shadow:inset 0 1px 1px rgba(255,255,255,.5); }
.hdr-dot.r { background:radial-gradient(circle at 35% 32%,#ff9090,#d82020); }
.hdr-dot.y { background:radial-gradient(circle at 35% 32%,#ffe080,#d8a010); }
.hdr-dot.g { background:radial-gradient(circle at 35% 32%,#90f080,#28b018); }
.hdr-tb-title { flex:1;text-align:center;font-size:11px;color:rgba(255,255,255,.88);font-weight:bold;letter-spacing:1px;text-shadow:0 1px 2px rgba(0,50,120,.4); }
.hdr-tb-url { font-size:10px;color:rgba(255,255,255,.65);background:rgba(255,255,255,.15);padding:2px 10px;border-radius:8px;border:1px solid rgba(255,255,255,.2); }

.hdr-main { padding:18px 20px 14px;display:flex;align-items:center;gap:18px;position:relative;z-index:2; }
.hdr-mascot { font-size:58px;filter:drop-shadow(0 4px 12px rgba(0,80,180,.3));animation:mascotFloat 3s ease-in-out infinite;flex-shrink:0; }
@keyframes mascotFloat { 0%,100%{transform:translateY(0) rotate(-4deg)} 50%{transform:translateY(-8px) rotate(4deg)} }
.hdr-mascot .icon-img { width:58px;height:58px;object-fit:contain;display:block; }
.hdr-mascot .icon-fallback { font-size:58px;display:none; }

.hdr-text { flex:1; }
.site-name { font-size:26px;font-weight:bold;color:#fff;text-shadow:0 2px 0 rgba(0,80,180,.3),0 0 20px rgba(160,220,255,.6),1px 1px 0 rgba(0,60,140,.2);letter-spacing:1px;margin-bottom:4px; }
.site-name span { color:#d0f8ff; }
.site-desc { font-size:12px;color:rgba(255,255,255,.85);line-height:1.5;margin-bottom:10px;text-shadow:0 1px 2px rgba(0,60,140,.3); }

.hdr-badges { display:flex;gap:5px;flex-wrap:wrap; }
.aero-badge { padding:3px 10px 6px;border-radius:12px;font-size:10px;font-weight:bold;color:white;text-shadow:0 1px 2px rgba(0,0,0,.25);border:1px solid rgba(255,255,255,.4);box-shadow:0 2px 6px rgba(0,80,160,.2),inset 0 1px 0 rgba(255,255,255,.35);position:relative;overflow:hidden;cursor:default; }
.aero-badge::before { content:'';position:absolute;top:0;left:0;right:0;height:50%;background:linear-gradient(180deg,rgba(255,255,255,.35),transparent); }
.ab-blue  { background:linear-gradient(180deg,#60b0f0,#2880d0); }
.ab-aqua  { background:linear-gradient(180deg,#40d0b8,#1898a0); }
.ab-green { background:linear-gradient(180deg,#70c840,#308810); }
.ab-sky   { background:linear-gradient(180deg,#80c8f8,#3890d8); }
.ab-teal  { background:linear-gradient(180deg,#30c0a8,#107888); }

/* Nav */
nav { background:linear-gradient(180deg,rgba(100,185,248,.98),rgba(50,140,215,.99));border-top:1px solid rgba(255,255,255,.3);padding:0 16px;display:flex;gap:2px;align-items:flex-end; }
.nav-tab { padding:7px 16px 11px;font-size:9px;font-weight:bold;color:rgba(255,255,255,.8);background:linear-gradient(180deg,rgba(255,255,255,.12),rgba(255,255,255,.04));border:1px solid rgba(255,255,255,.2);border-bottom:none;border-radius:7px 7px 0 0;cursor:pointer;text-decoration:none;transition:all .12s;display:flex;align-items:center;gap:5px;text-shadow:0 1px 2px rgba(0,50,120,.4); }
.nav-tab.active { background:linear-gradient(180deg,rgba(255,255,255,.45),rgba(255,255,255,.25));color:var(--text-dark);text-shadow:none;border-color:rgba(255,255,255,.5); }
.nav-tab:hover:not(.active) { background:rgba(255,255,255,.2);color:#fff; }
 
@media (max-width: 680px) {
  .body-wrap { grid-template-columns: 1fr; }
  .site-name { font-size: 20px; }

  nav {
    display: flex !important;
  }

  .nav-tab {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
  }

  .nav-tab span + text, 
  .nav-tab {
    line-height: 1.6 !important; 
  }
}


/* ══ Frutiger Aero Breadcrumb ══ */

.breadcrumb {
  position: relative;
  display: flex;
  align-items: center;
  gap: 7px;

  padding: 7px 16px;
  font-size: 10.5px;
  color: var(--text-light);

  /* 冰蓝色玻璃背景 */
  background:
    linear-gradient(
      180deg,
      rgba(255, 255, 255, .82) 0%,
      rgba(218, 244, 255, .76) 35%,
      rgba(174, 224, 255, .72) 100%
    );

  border-top: 1px solid rgba(255, 255, 255, .95);
  border-bottom: 1px solid rgba(111, 193, 239, .45);

  /* 玻璃质感 */
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .75),
    inset 0 -2px 5px rgba(99, 190, 245, .12),
    0 2px 7px rgba(66, 157, 215, .08);

  overflow: hidden;
}

/* 顶部水光高光 */
.breadcrumb::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 45%;

  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, .52),
    rgba(255, 255, 255, 0)
  );

  pointer-events: none;
}

/* 导航链接 */
.breadcrumb a {
  position: relative;
  z-index: 1;

  color: var(--sky3);
  text-decoration: none;
  text-shadow: 0 1px 0 rgba(255, 255, 255, .7);

  transition:
    color .2s ease,
    text-shadow .2s ease;
}

.breadcrumb a:hover {
  color: #1688c9;
  text-decoration: none;
  text-shadow: 0 0 7px rgba(80, 190, 255, .4);
}

/* 立体玻璃地球 */
.bc-globe {
  position: relative;
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  border-radius: 50%;

  background:
    radial-gradient(
      circle at 30% 22%,
      #ffffff 0%,
      #c9f2ff 15%,
      #79d2ff 42%,
      #35a5eb 72%,
      #1680ca 100%
    );

  border: 1px solid rgba(255, 255, 255, .9);

  box-shadow:
    inset 1px 1px 2px rgba(255, 255, 255, .85),
    inset -2px -2px 4px rgba(0, 93, 170, .25),
    0 1px 4px rgba(34, 139, 205, .25);
}

/* 地球表面的玻璃反光 */
.bc-globe::after {
  content: "";
  position: absolute;
  top: 2px;
  left: 3px;
  width: 5px;
  height: 3px;
  border-radius: 50%;

  background: rgba(255, 255, 255, .95);
  filter: blur(.3px);
}

/* 可选：面包屑文字分隔符 */
.breadcrumb .bc-separator {
  color: rgba(64, 151, 205, .65);
  font-size: 12px;
  text-shadow: 0 1px 0 rgba(255, 255, 255, .8);
}
.breadcrumb {
  border-radius: 12px;
  margin: 6px 10px;
  border: 1px solid rgba(255, 255, 255, .8);
  overflow: hidden;
}

/* Body layout */
.body-wrap { flex:1;display:grid;grid-template-columns:1fr 250px;gap:12px;padding:14px;align-items:start; }

/* ======== GLASS PANEL ======== */
.glass { background:linear-gradient(145deg,rgba(230,248,255,.72) 0%,rgba(210,240,255,.68) 60%,rgba(220,252,244,.65) 100%);border:1px solid var(--border-glass);border-radius:10px;box-shadow:0 6px 24px rgba(40,120,200,.14),0 1px 4px rgba(40,120,200,.08),inset 0 1px 0 rgba(255,255,255,.82);backdrop-filter:blur(10px);overflow:hidden; }

.glass-header { background:linear-gradient(180deg,rgba(100,190,248,.88) 0%,rgba(50,150,225,.92) 100%);padding:6px 12px;display:flex;align-items:center;gap:7px;border-bottom:1px solid rgba(255,255,255,.4);position:relative; }
.glass-header::after { content:'';position:absolute;top:0;left:0;right:0;height:50%;background:linear-gradient(180deg,rgba(255,255,255,.25),transparent);pointer-events:none; }

.gh-icon { width:16px;height:16px;border-radius:50%;flex-shrink:0;box-shadow:0 2px 4px rgba(0,80,160,.3),inset 0 1px 0 rgba(255,255,255,.5); }
.gh-icon.aqua  { background:radial-gradient(circle at 35% 30%,#90f0e0,#28b098); }
.gh-icon.green { background:radial-gradient(circle at 35% 30%,#a0f060,#38a810); }
.gh-icon.blue  { background:radial-gradient(circle at 35% 30%,#90d0ff,#2890e0); }
.gh-icon.pink  { background:radial-gradient(circle at 35% 30%,#ffc0e0,#e060a8); }
.gh-title { font-size:11px;font-weight:bold;color:white;text-shadow:0 1px 2px rgba(0,60,140,.4);letter-spacing:.5px;flex:1; }
.gh-count { font-size:10px;color:rgba(255,255,255,.7); }

/* Tabs */
.tab-pane { display:none; }
.tab-pane.active { display:flex;flex-direction:column;gap:12px; }

/* Main col */
.main-col { display:flex;flex-direction:column;gap:12px; }

/* Posts */
.post { transition:transform .15s; }
.post:hover { transform:translateY(-2px); }
.post-inner { padding:14px 16px 12px; }

.post-meta { display:flex;align-items:center;gap:7px;margin-bottom:8px;flex-wrap:wrap; }
.post-date { font-size:10px;color:var(--text-light);background:rgba(100,200,255,.15);border:1px solid rgba(120,200,248,.3);padding:2px 7px;border-radius:8px; }
.post-tag { font-size:10px;font-weight:bold;padding:2px 9px;border-radius:10px;border:1px solid transparent;position:relative;overflow:hidden; }
.post-tag::before { content:'';position:absolute;top:0;left:0;right:0;height:50%;background:linear-gradient(180deg,rgba(255,255,255,.4),transparent); }
.pt-art   { background:linear-gradient(180deg,#ffc0e8,#e060b0);color:#fff;text-shadow:0 1px 1px rgba(0,0,0,.2); }
.pt-life  { background:linear-gradient(180deg,#90d8ff,#3098e8);color:#fff;text-shadow:0 1px 1px rgba(0,0,0,.2); }
.pt-game  { background:linear-gradient(180deg,#a0e870,#48b818);color:#fff;text-shadow:0 1px 1px rgba(0,0,0,.2); }
.pt-music { background:linear-gradient(180deg,#a8e8f8,#38b8d8);color:#fff;text-shadow:0 1px 1px rgba(0,0,0,.2); }

/* Post thumbnail */
.post-thumb { width:100%;height:120px;border-radius:8px;margin-bottom:10px;display:flex;align-items:center;justify-content:center;position:relative;overflow:hidden;border:1px solid rgba(255,255,255,.7);box-shadow:0 3px 10px rgba(40,120,200,.15),inset 0 1px 0 rgba(255,255,255,.6); }
.post-thumb::after { content:'';position:absolute;top:0;left:0;right:0;height:40%;background:linear-gradient(180deg,rgba(255,255,255,.35),transparent);pointer-events:none; }
.thumb-1 { background:linear-gradient(135deg,#b8f0f8,#80d8f0 40%,#a0e8d0); }
.thumb-2 { background:linear-gradient(135deg,#c0f0c0,#80e8a0 40%,#a0d8f8); }
.thumb-3 { background:linear-gradient(135deg,#d0e8ff,#a0c8f8 40%,#c0f0e8); }
.post-thumb .icon-img { width:100%;height:100%;object-fit:cover;display:block;position:relative;z-index:1; }
.post-thumb .icon-fallback { font-size:44px;display:none;position:relative;z-index:1; }

.post-title { font-size:14px;font-weight:bold;color:var(--text-dark);margin-bottom:6px;text-shadow:0 1px 0 rgba(255,255,255,.7);line-height:1.4; }
.post-title a { color:inherit;text-decoration:none; }
.post-title a:hover { color:var(--sky3); }
.post-excerpt { font-size:11.5px;color:var(--text-mid);line-height:1.65;margin-bottom:10px; }
.post-footer { display:flex;justify-content:space-between;align-items:center; }

/* Aero buttons */
.aero-btn { padding:5px 14px;border-radius:12px;font-size:11px;font-weight:bold;cursor:pointer;text-decoration:none;border:1px solid rgba(255,255,255,.5);position:relative;overflow:hidden;transition:all .12s;box-shadow:0 3px 8px rgba(40,120,200,.2),inset 0 1px 0 rgba(255,255,255,.5);display:inline-block; }
.aero-btn::before { content:'';position:absolute;top:0;left:0;right:0;height:50%;background:linear-gradient(180deg,rgba(255,255,255,.45),transparent); }
.aero-btn:hover { transform:translateY(-1px);filter:brightness(1.08); }
.btn-blue  { background:linear-gradient(180deg,#80c8f8,#2888d8);color:white;text-shadow:0 1px 2px rgba(0,60,140,.4);border-color:rgba(255,255,255,.4); }
.btn-green { background:linear-gradient(180deg,#90d848,#389010);color:white;text-shadow:0 1px 2px rgba(0,60,0,.4);border-color:rgba(255,255,255,.4); }
.btn-aqua  { background:linear-gradient(180deg,#60d8c8,#189880);color:white;text-shadow:0 1px 2px rgba(0,60,80,.4);border-color:rgba(255,255,255,.4); }

.post-stats { font-size:11px;color:var(--text-light);display:flex;gap:8px;align-items:center; }
.stat-bubble { width:8px;height:8px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#90d8ff,#2890e0);display:inline-block; }

/* Pagination */
.pagination { display:flex;justify-content:center;gap:5px;padding:12px; }
.page-btn { padding-top:2px;padding-left: 2px; width:28px;height:28px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:9px;cursor:pointer;text-decoration:none;border:1px solid rgba(255,255,255,.5);position:relative;overflow:hidden;transition:all .12s;box-shadow:0 2px 6px rgba(40,120,200,.18); }
.page-btn::before { content:'';position:absolute;top:0;left:0;right:0;height:50%;background:linear-gradient(180deg,rgba(255,255,255,.4),transparent); }
.page-btn.active { background:linear-gradient(180deg,#80c8f8,#2888d8);color:white;border-color:rgba(255,255,255,.4); }
.page-btn:not(.active) { background:linear-gradient(180deg,rgba(220,245,255,.8),rgba(190,230,255,.7));color:var(--text-mid); }
.page-btn:hover:not(.active) { background:rgba(255,255,255,.9); }


/* ======== ABOUT TAB ======== */
.about-hero {
  width: 100%;
  min-height: 110px;
  height: auto;
  border-radius: 8px;
  background: linear-gradient(135deg, #b8f0e8, #80d8f0);
  border: 1px solid rgba(255,255,255,.7);
  margin-bottom: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: visible;
  box-shadow: 0 3px 10px rgba(40,120,200,.15);
}

.about-hero::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 100%;
  background: linear-gradient(
    180deg,
    rgba(255,255,255,.35),
    transparent
  );
  pointer-events: none;
}

.about-hero .icon-img {
  width: 100%;
  height: auto;
  max-width: 100%;
  object-fit: contain;
  display: block;
  position: relative;
  z-index: 1;
}

.about-hero .icon-fallback {
  font-size: 50px;
  display: none;
  position: relative;
  z-index: 1;
}

.about-text {
  font-size: 12px;
  color: var(--text-mid);
  line-height: 1.7;
  margin-bottom: 10px;
}

.about-facts {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.about-facts li {
  font-size: 11.5px;
  color: var(--text-mid);
  padding: 5px 8px;
  background: rgba(255,255,255,.4);
  border: 1px solid rgba(160,210,245,.3);
  border-radius: 7px;
  display: flex;
  align-items: center;
  gap: 7px;
}

.af-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
  box-shadow: 0 1px 3px rgba(0,0,0,.15);
}


/* ======== ART TAB ======== */
.art-grid { display:grid;grid-template-columns:repeat(3,1fr);gap:7px; }
.art-item { aspect-ratio:1;border-radius:8px;border:2px solid rgba(255,255,255,.7);box-shadow:0 3px 8px rgba(80,160,200,.2),inset 0 1px 0 rgba(255,255,255,.6);display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all .15s;position:relative;overflow:hidden;background:linear-gradient(135deg,var(--sky1),var(--aqua1)); }
.art-item:nth-child(2){background:linear-gradient(135deg,#c8f0d0,#90e0f8)}
.art-item:nth-child(3){background:linear-gradient(135deg,#d8c8f8,#a8d8ff)}
.art-item:nth-child(4){background:linear-gradient(135deg,#f8d8c8,#f0b8e8)}
.art-item:nth-child(5){background:linear-gradient(135deg,#d8f8c8,#b8e8ff)}
.art-item:nth-child(6){background:linear-gradient(135deg,#f8f0c8,#c8f0e0)}
.art-item::before { content:'';position:absolute;top:0;left:0;right:0;height:40%;background:linear-gradient(180deg,rgba(255,255,255,.45),transparent);pointer-events:none;z-index:2; }
.art-item:hover { transform:scale(1.05);box-shadow:0 6px 16px rgba(80,160,200,.35); }
.art-item .icon-img { width:100%;height:100%;object-fit:cover;display:block;position:relative;z-index:1; }
.art-item .icon-fallback { font-size:28px;display:none;position:relative;z-index:1; }

/* ======== DIARY TAB ======== */
.diary-post { padding:12px 14px; }
.diary-date { display:flex;align-items:center;gap:7px;margin-bottom:6px; }
.diary-title { font-size:14px;font-weight:bold;color:var(--text-dark);margin-bottom:6px;line-height:1.4; }
.diary-title a { color:inherit;text-decoration:none; }
.diary-title a:hover { color:var(--sky3); }
.diary-thumb { width:100%;height:80px;border-radius:7px;margin-bottom:8px;display:flex;align-items:center;justify-content:center;position:relative;overflow:hidden;border:1px solid rgba(255,255,255,.6); }
.diary-thumb .icon-img { width:100%;height:100%;object-fit:cover;display:block;position:relative;z-index:1; }
.diary-thumb .icon-fallback { font-size:30px;display:none;position:relative;z-index:1; }
.dt-pink { background:linear-gradient(135deg,#ffd8f0,#f8c8e8); }
.dt-aqua { background:linear-gradient(135deg,#c8f0e8,#a0d8f8); }
.diary-excerpt { font-size:11.5px;color:var(--text-mid);line-height:1.6;margin-bottom:8px; }

/* Diary images: show the complete image */
.diary-thumb {
  height: auto;
  overflow: visible;
}

.diary-thumb .icon-img {
  display: block;
  width: 100%;
  height: auto;
  max-height: none;
  object-fit: contain;
}


/* ======== LINKS TAB ======== */
.links-row { display:flex;align-items:center;gap:10px;padding:8px 10px;background:rgba(255,255,255,.45);border:1px solid rgba(160,210,245,.4);border-radius:8px;text-decoration:none;transition:all .12s;box-shadow:0 2px 6px rgba(80,160,200,.1),inset 0 1px 0 rgba(255,255,255,.7); }
.links-row:hover { background:rgba(255,255,255,.7);transform:translateX(3px); }
.lk-name  { font-size:12px;font-weight:bold;color:var(--text-dark); }
.lk-sub   { font-size:10.5px;color:var(--text-light); }
.lk-arrow { font-size:10px;color:var(--sky3);opacity:.7; }

/* ======== SIDEBAR ======== */
.sidebar { display:flex;flex-direction:column;gap:10px; }

/* Profile */
.sb-profile .post-inner { display:flex;flex-direction:column;align-items:center;text-align:center;gap:8px; }
.sb-avatar { width:76px;height:76px;border-radius:12px;background:linear-gradient(135deg,#b0f0e8,#80c8f8 50%,#a0d8ff);border:2px solid rgba(255,255,255,.8);box-shadow:0 5px 16px rgba(40,120,200,.25),inset 0 1px 0 rgba(255,255,255,.7);display:flex;align-items:center;justify-content:center;position:relative;overflow:hidden; }
.sb-avatar::before { content:'';position:absolute;top:3px;left:3px;right:3px;height:35%;background:linear-gradient(180deg,rgba(255,255,255,.55),transparent);border-radius:8px 8px 50% 50%;z-index:2;pointer-events:none; }
.sb-avatar .icon-img { width:100%;height:100%;object-fit:cover;border-radius:10px;display:block;position:relative;z-index:1; }
.sb-avatar .icon-fallback { font-size:36px;display:none;position:relative;z-index:1; }
.sb-name { font-size:14px;font-weight:bold;color:var(--text-dark);text-shadow:0 1px 0 rgba(255,255,255,.7); }
.sb-sub  { font-size:10.5px;color:var(--text-light);line-height:1.4; }
.sb-status { display:flex;align-items:center;gap:5px;font-size:11px;color:var(--aqua3);font-weight:bold; padding-bottom:5px; }
.sb-status-dot { width:9px;height:9px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#a0ff80,#30d020);animation:onlinePulse 2s ease-in-out infinite; margin-top:2px; }
@keyframes onlinePulse { 0%,100%{box-shadow:0 0 0 0 rgba(50,200,50,.5)} 50%{box-shadow:0 0 0 4px rgba(50,200,50,0)} }

.msn-icons { display:flex;gap:6px; }
.msn-icon { width:30px;height:30px;border-radius:50%;display:flex;align-items:center;justify-content:center;cursor:pointer;text-decoration:none;transition:all .14s;border:1px solid rgba(255,255,255,.5);box-shadow:0 3px 7px rgba(40,120,200,.22),inset 0 1px 0 rgba(255,255,255,.6);position:relative;overflow:hidden; }
.msn-icon::before { content:'';position:absolute;top:0;left:0;right:0;height:50%;background:linear-gradient(180deg,rgba(255,255,255,.45),transparent);border-radius:50% 50% 0 0; }
.msn-icon:hover { transform:scale(1.12) translateY(-2px); }
.msn-icon .icon-img { width:16px;height:16px;object-fit:contain;display:block;position:relative;z-index:1; }
.msn-icon .icon-fallback { font-size:13px;display:none;position:relative;z-index:1; }
.i-blue  { background:radial-gradient(circle at 38% 32%,#a8d8ff,#3090e0); }
.i-aqua  { background:radial-gradient(circle at 38% 32%,#90f0e0,#28b098); }
.i-green { background:radial-gradient(circle at 38% 32%,#a0f068,#38a810); }
.i-pink  { background:radial-gradient(circle at 38% 32%,#ffc8e8,#e068b8); }
.i-sky   { background:radial-gradient(circle at 38% 32%,#b0e0ff,#5ab8f8); }

/* About block */
.about-block { padding:10px 12px; }
.about-block p { font-size:11.5px;color:var(--text-mid);line-height:1.6;margin-bottom:8px; }
.about-list { list-style:none;display:flex;flex-direction:column;gap:2px; }
.about-list li { font-size:11px;color:var(--text-mid);padding:3px 0;border-bottom:1px dashed rgba(100,190,248,.25);display:flex;align-items:center;gap:6px; }
.about-list li:last-child { border:none; }
.al-dot { width:8px;height:8px;border-radius:50%;flex-shrink:0;box-shadow:0 1px 3px rgba(0,0,0,.15); }

/* ======== MINI PLAYER ======== */
#sc-player-fa { width:1px;height:1px;position:absolute;opacity:0;pointer-events:none;border:none; }
.mp-track { font-size:10px;color:var(--text-mid);font-weight:bold;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-bottom:6px; }
.mp-track.scrolling { animation:mpScroll 8s linear infinite; }
@keyframes mpScroll { 0%,15%{text-indent:0} 85%,100%{text-indent:-80px} }
.mp-controls { display:flex;align-items:center;gap:6px; }
.mp-disc { width:22px;height:22px;border-radius:50%;flex-shrink:0;position:relative;box-shadow:0 1px 4px rgba(60,140,200,.4);cursor:pointer;
  background:
    radial-gradient(circle at 50% 50%,#d8f0ff 0%,#d8f0ff 14%,transparent 14%),
    radial-gradient(circle at 50% 50%,transparent 24%,rgba(255,255,255,.6) 26%,transparent 29%),
    conic-gradient(from 0deg,rgba(180,230,255,.9),rgba(160,255,220,.8),rgba(200,180,255,.8),rgba(160,220,255,.9),rgba(180,255,200,.8),rgba(220,180,255,.8),rgba(180,230,255,.9));
  border:1px solid rgba(255,255,255,.7);
}
.mp-disc::before { content:'';position:absolute;inset:0;border-radius:50%;background:radial-gradient(circle at 35% 30%,rgba(255,255,255,.5) 0%,transparent 55%);pointer-events:none; }
.mp-disc::after { content:'';position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:5px;height:5px;background:#e8f6ff;border-radius:50%;border:1px solid rgba(160,210,245,.6); }
.mp-disc.spinning { animation:mpSpin 3s linear infinite; }
@keyframes mpSpin { from{transform:rotate(0deg)} to{transform:rotate(360deg)} }
.mp-btn { width:22px;height:22px;border-radius:50%;background:linear-gradient(180deg,rgba(160,220,255,.7),rgba(80,170,230,.8));border:1px solid rgba(255,255,255,.6);box-shadow:0 2px 5px rgba(60,140,200,.25),inset 0 1px 0 rgba(255,255,255,.5);display:flex;align-items:center;justify-content:center;font-size:9px;color:white;cursor:pointer;flex-shrink:0;transition:all .12s;position:relative;overflow:hidden; }
.mp-btn::before { content:'';position:absolute;top:0;left:0;right:0;height:50%;background:linear-gradient(180deg,rgba(255,255,255,.35),transparent);border-radius:50% 50% 0 0; }
.mp-btn:hover { filter:brightness(1.12);transform:scale(1.08); }
.mp-bars { display:flex;align-items:flex-end;gap:2px;height:14px;margin-left:2px; }
.mp-bar { width:2px;height:3px;background:linear-gradient(180deg,rgba(80,180,240,.9),rgba(60,150,220,.7));border-radius:1px; }
.mp-bars.active .mp-bar { animation:mpBar .5s ease-in-out infinite alternate; }
.mp-bars.active .mp-bar:nth-child(1){animation-delay:0s}
.mp-bars.active .mp-bar:nth-child(2){animation-delay:.08s}
.mp-bars.active .mp-bar:nth-child(3){animation-delay:.16s}
.mp-bars.active .mp-bar:nth-child(4){animation-delay:.04s}
@keyframes mpBar { from{height:2px} to{height:12px} }

/* Categories */
.cat-body { padding:10px 12px;display:flex;flex-direction:column;gap:4px; }
.cat-row { display:flex;align-items:center;gap:8px;padding:5px 8px;border-radius:8px;background:rgba(255,255,255,.4);border:1px solid rgba(160,215,248,.3);cursor:pointer;text-decoration:none;transition:all .12s;box-shadow:0 1px 4px rgba(40,120,200,.08),inset 0 1px 0 rgba(255,255,255,.6); }
.cat-row:hover { background:rgba(255,255,255,.72);transform:translateX(2px); }
.cat-orb { width:11px;height:11px;border-radius:50%;flex-shrink:0;box-shadow:0 1px 4px rgba(0,0,0,.15),inset 0 1px 0 rgba(255,255,255,.5); }
.co-sky   { background:radial-gradient(circle at 35% 30%,#a0d8ff,#3090e0); }
.co-aqua  { background:radial-gradient(circle at 35% 30%,#80f0e0,#28b090); }
.co-green { background:radial-gradient(circle at 35% 30%,#a0f060,#38a810); }
.co-teal  { background:radial-gradient(circle at 35% 30%,#70e8d8,#189880); }
.cat-name { flex:1;font-size:11px;color:var(--text-dark);font-weight:bold; }
.cat-num { font-size:10px;color:var(--text-light);background:rgba(100,200,255,.15);padding:1px 6px;border-radius:6px;border:1px solid rgba(100,190,248,.25); }

/* Recent */
.recent-body { padding:8px 12px; }
.recent-row { display:flex;align-items:center;gap:8px;padding:6px 0;border-bottom:1px dashed rgba(100,190,248,.3);cursor:pointer;text-decoration:none;transition:all .1s; }
.recent-row:last-child { border:none; }
.recent-row:hover { padding-left:4px; }
.recent-orb { width:9px;height:9px;border-radius:50%;flex-shrink:0;background:radial-gradient(circle at 35% 30%,#90d8ff,#2890e0);box-shadow:0 1px 3px rgba(0,80,160,.2); }
.recent-info { flex:1; }
.recent-title { font-size:11px;color:var(--text-dark);font-weight:bold;display:block;line-height:1.3;margin-bottom:1px; }
.recent-date  { font-size:10px;color:var(--text-light); }

/* Counter */
.counter-body { padding:12px 14px;text-align:center; }
.counter-digits { font-family:'Courier New',monospace;font-size:20px;font-weight:bold;color:var(--sky3);text-shadow:0 0 12px rgba(80,180,255,.5),0 1px 0 rgba(255,255,255,.7);background:linear-gradient(135deg,rgba(200,240,255,.5),rgba(180,230,252,.5));border:1px solid rgba(160,215,248,.4);border-radius:8px;padding:8px 12px;letter-spacing:4px;box-shadow:inset 0 2px 6px rgba(40,120,200,.1);margin-bottom:5px; }
.counter-sub { font-size:10.5px;color:var(--text-light); }

/* Tags */
.tags-body { padding:10px 12px;display:flex;flex-wrap:wrap;gap:5px; }
.tag-pill { padding:3px 9px;border-radius:10px;font-size:10.5px;background:linear-gradient(180deg,rgba(220,245,255,.8),rgba(190,230,255,.7));border:1px solid rgba(160,215,248,.45);color:var(--text-mid);cursor:pointer;text-decoration:none;transition:all .1s;box-shadow:0 1px 4px rgba(40,120,200,.1),inset 0 1px 0 rgba(255,255,255,.7); }
.tag-pill:hover { background:rgba(255,255,255,.9);transform:scale(1.06);color:var(--sky3); }

/* ======== FOOTER ======== */
footer { background:linear-gradient(180deg,rgba(120,195,248,.96),rgba(48,148,222,.98));border-top:1px solid rgba(255,255,255,.4);box-shadow:0 -4px 16px rgba(40,120,200,.15),inset 0 1px 0 rgba(255,255,255,.4);padding:10px 20px;display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:8px;position:relative;overflow:hidden; }
footer::before { content:'';position:absolute;top:0;left:0;right:0;height:50%;background:linear-gradient(180deg,rgba(255,255,255,.2),transparent); }
.footer-copy { font-size:10.5px;color:rgba(255,255,255,.85);text-shadow:0 1px 2px rgba(0,60,140,.3);font-weight:bold;position:relative; }
.footer-icons { display:flex;gap:8px;position:relative; }
.footer-orb { width:24px;height:24px;border-radius:50%;border:1px solid rgba(255,255,255,.5);display:flex;align-items:center;justify-content:center;font-size:11px;box-shadow:0 2px 6px rgba(0,80,180,.25),inset 0 1px 0 rgba(255,255,255,.4);animation:orbFloat 2.5s ease-in-out infinite; }
.footer-orb:nth-child(2){animation-delay:.4s}
.footer-orb:nth-child(3){animation-delay:.8s}
@keyframes orbFloat { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-3px)} }
.fo-blue  { background:radial-gradient(circle at 38% 32%,#90d0ff,#2888d8); }
.fo-aqua  { background:radial-gradient(circle at 38% 32%,#80f0e0,#28a890); }
.fo-green { background:radial-gradient(circle at 38% 32%,#90e860,#38a010); }
.footer-made { font-size:10.5px;color:rgba(255,255,255,.75);text-shadow:0 1px 2px rgba(0,60,140,.3);position:relative; }

/* Scrollbar */
::-webkit-scrollbar { width:9px; }
::-webkit-scrollbar-track { background:rgba(200,238,255,.4); }
::-webkit-scrollbar-thumb { background:linear-gradient(180deg,#88c8f8,#3898d8);border-radius:5px;border:1px solid rgba(255,255,255,.4); }

@media (max-width:680px) {
  .body-wrap { grid-template-columns:1fr; }
  .site-name  { font-size:20px; }
}

/* ======== IMAGE LIGHTBOX ======== */
.lightbox-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.75);
  z-index: 9999;
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(4px);
  cursor: pointer;
  animation: lbFadeIn .2s ease;
}
.lightbox-overlay.open { display: flex; }
@keyframes lbFadeIn { from{opacity:0} to{opacity:1} }

.lightbox-img {
  max-width: 90vw;
  max-height: 85vh;
  border-radius: 10px;
  box-shadow: 0 8px 40px rgba(0,0,0,.6);
  animation: lbPop .25s cubic-bezier(.34,1.56,.64,1);
  cursor: default;
}
@keyframes lbPop { from{transform:scale(.8);opacity:0} to{transform:scale(1);opacity:1} }

.lightbox-close {
  position: absolute;
  top: 16px; right: 20px;
  font-size: 28px;
  color: white;
  cursor: pointer;
  line-height: 1;
  text-shadow: 0 2px 8px rgba(0,0,0,.5);
  transition: transform .15s;
}
.lightbox-close:hover { transform: scale(1.2); }


/* Vertical 9:16 blog video player */
.blog-video {
  display: block;
  width: 100%;
  max-width: 320px;
  aspect-ratio: 9 / 16;
  height: auto;
  object-fit: contain;
  background: #111;
  border-radius: 14px;
  margin: 12px auto 0;
}

/* Vertical videos: 工作剪辑专用 */
.blog-video-vertical {
  display: block;
  width: 100%;
  max-width: 280px;
  aspect-ratio: 9 / 16;
  height: auto;
  object-fit: contain;
  background: #111;
  border-radius: 14px;
  margin: 16px auto;
}

/* Work Edits: three vertical videos in a row */
.work-videos-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  align-items: start;
  margin-top: 16px;
}

.blog-video-vertical {
  display: block;
  width: 100%;
  max-width: none;
  aspect-ratio: 9 / 16;
  height: auto;
  object-fit: contain;
  background: #111;
  border-radius: 12px;
  margin: 0;
}

/* Mobile: stack videos vertically on narrow screens */
@media (max-width: 600px) {
  .work-videos-grid {
    grid-template-columns: 1fr;
    gap: 20px;
  }

  .blog-video-vertical {
    width: 100%;
    max-width: 320px;
    margin: 0 auto;
  }
}

/* Music player layout */
.music-player-inner {
  padding: 12px;
  position: relative;
}

.music-player .mp-track {
  text-align: center;
  overflow-wrap: anywhere;
  margin-bottom: 14px;
}


.music-player .mp-controls {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: nowrap;
  gap: 14px;
  margin: 12px 0 20px;
  width: 100%;
  box-sizing: border-box;
}

.music-player .mp-btn {
  width: 42px;
  min-width: 42px;
  height: 42px;
  min-height: 42px;
  padding: 0;
  flex: 0 0 42px;
}

.music-player .mp-disc {
  width: 62px;
  min-width: 62px;
  height: 62px;
  padding: 0;
  flex: 0 0 62px;
}

.music-player .mp-bars {
  display: none;
}


.music-playlist summary::after {
  content: "＋";
}

.music-playlist[open] summary::after {
  content: "−";
}

.playlist-hint {
  font-size: 11px;
  font-weight: normal;
  opacity: 0.7;
}

.music-track-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 12px;
}

.music-track-item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 10px 12px;
  border: 1px solid rgba(120, 190, 230, 0.25);
  border-radius: 10px;
  background: rgba(190, 230, 255, 0.12);
  color: inherit;
  text-align: left;
  font: inherit;
  cursor: pointer;
}

.music-track-item:hover,
.music-track-item.active {
  background: rgba(150, 215, 255, 0.32);
  border-color: rgba(100, 180, 230, 0.65);
}

.music-track-number {
  min-width: 22px;
  opacity: 0.7;
}

.music-track-name {
  flex: 1;
  overflow-wrap: anywhere;
}

.music-credit {
  margin-top: 12px;
  text-align: center;
  font-size: 11px;
  opacity: 0.65;
}

#music-status {
  margin-left: auto;
  font-size: 10px;
  opacity: 0.75;
}

/* ══ Music Platform Cards ══ */
.music-platform-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  margin-top: 20px;
}

.music-platform-card {
  position: relative;
  display: flex;
  align-items: center;
  gap: 14px;
  min-width: 0;
  padding: 20px 18px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.65);
  border-radius: 20px;
  background: linear-gradient(
    135deg,
    rgba(255, 255, 255, 0.72),
    rgba(210, 240, 255, 0.35)
  );
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.9),
    0 6px 18px rgba(75, 155, 210, 0.12);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  color: inherit;
  text-decoration: none;
  cursor: pointer;
  transition:
    transform 0.22s ease,
    box-shadow 0.22s ease,
    border-color 0.22s ease;
}

.music-platform-card:hover {
  transform: translateY(-4px);
  border-color: rgba(100, 200, 245, 0.8);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.95),
    0 12px 26px rgba(65, 160, 220, 0.22);
}

.music-platform-card:focus-visible {
  outline: 3px solid rgba(65, 160, 220, 0.8);
  outline-offset: 3px;
}

.music-platform-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 48px;
  width: 48px;
  height: 48px;
  border-radius: 15px;
  color: white;
  font-size: 27px;
  font-weight: 700;
  box-shadow: inset 0 1px 2px rgba(255, 255, 255, 0.4);
}

.spotify-icon {
  background: linear-gradient(145deg, #64df91, #169b57);
  text-shadow: 0 1px 3px rgba(0, 70, 30, 0.2);
}

.yt-music-icon {
  background: linear-gradient(145deg, #ff8b9b, #ef334f);
  font-size: 21px;
}

.music-platform-info {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.music-platform-label {
  color: #5894b7;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 2px;
}

.music-platform-name {
  color: #28536f;
  font-size: 17px;
  font-weight: 800;
  overflow-wrap: anywhere;
}

.music-platform-desc {
  color: #64889e;
  font-size: 11px;
  line-height: 1.5;
}

.music-platform-arrow {
  align-self: flex-start;
  color: #65a8c9;
  font-size: 20px;
  transition: transform 0.22s ease;
}

.music-platform-card:hover .music-platform-arrow {
  transform: translate(3px, -3px);
}

@media (max-width: 600px) {
  .music-platform-grid {
    grid-template-columns: 1fr;
  }

  .music-platform-card {
    padding: 17px 15px;
  }
}

/* 手机端导航栏：允许横向滑动 */
@media (max-width: 600px) {
  nav {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    max-width: 100%;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }

  nav::-webkit-scrollbar {
    display: none;
  }

  nav .nav-tab {
    flex: 0 0 auto;
    white-space: nowrap;
  }
}

/* ══ Guestbook ══ */
.guestbook-intro {
  color: #64889e;
  font-size: 13px;
  margin-bottom: 20px;
}

.guestbook-form {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.guestbook-form label {
  color: #4d809e;
  font-size: 12px;
  font-weight: 700;
}

.guestbook-form input,
.guestbook-form textarea {
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
  padding: 12px 14px;
  border: 1px solid rgba(130, 200, 230, 0.5);
  border-radius: 13px;
  background: rgba(255, 255, 255, 0.52);
  color: #28536f;
  font: inherit;
  font-size: 13px;
  outline: none;
}

.guestbook-form input:focus,
.guestbook-form textarea:focus {
  border-color: #75c9e9;
  box-shadow: 0 0 0 3px rgba(117, 201, 233, 0.16);
}

.guestbook-form textarea {
  resize: vertical;
  min-height: 100px;
}

.guestbook-form button {
  align-self: flex-start;
  max-width: 100%;
  padding: 11px 18px;
  border: 1px solid rgba(255, 255, 255, 0.8);
  border-radius: 14px;
  background: linear-gradient(135deg, #b8edfa, #91d8f5);
  color: #28536f;
  font: inherit;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(70, 160, 205, 0.15);
}

.guestbook-form button:disabled {
  opacity: 0.6;
  cursor: wait;
}

#guestbook-status {
  min-height: 18px;
  color: #5485a1;
  font-size: 12px;
  overflow-wrap: anywhere;
}

.guestbook-honeypot {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
}

.guestbook-list-heading {
  margin-top: 26px;
  margin-bottom: 14px;
  padding-bottom: 10px;
  border-bottom: 1px solid rgba(120, 190, 220, 0.3);
  color: #5485a1;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 1.5px;
}

.guestbook-entry {
  margin-bottom: 12px;
  padding: 14px;
  border: 1px solid rgba(255, 255, 255, 0.7);
  border-radius: 15px;
  background: rgba(255, 255, 255, 0.38);
  overflow-wrap: anywhere;
}

.guestbook-entry-head {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 6px 12px;
  margin-bottom: 8px;
}

.guestbook-entry-name {
  color: #347fa5;
  font-size: 13px;
  font-weight: 800;
}

.guestbook-entry-date {
  color: #7d9eaf;
  font-size: 10px;
}

.guestbook-entry-message {
  color: #456c82;
  font-size: 13px;
  line-height: 1.7;
  white-space: pre-wrap;
}

@media (max-width: 600px) {
  .guestbook-form button {
    align-self: stretch;
    width: 100%;
  }
}

/* ══ Y2K Floating Stickers ══ */

.floating-stickers {
  position: fixed;
  inset: 0;
  z-index: 100;
  pointer-events: none;
  overflow: hidden;
}

.floating-sticker {
  position: absolute;
  display: block;
  width: 64px;
  height: auto;
  object-fit: contain;
  user-select: none;
  -webkit-user-drag: none;
  filter: drop-shadow(0 3px 5px rgba(65, 120, 160, 0.16));
  animation: sticker-float 4s ease-in-out infinite;
}

/* 左上角：星星 */
.sticker-star {
  top: 15%;
  left: 3%;
  width: 58px;
  animation-delay: -1s;
}

/* 右上角：蝴蝶 */
.sticker-butterfly {
  top: 23%;
  right: 4%;
  width: 76px;
  animation-delay: -2.5s;
}

/* 左下角：像素猫 */
.sticker-cat {
  bottom: 12%;
  left: 4%;
  width: 72px;
  animation-delay: -0.8s;
}

/* 右下角：爱心 */
.sticker-heart {
  bottom: 18%;
  right: 3%;
  width: 52px;
  animation-delay: -3s;
}

/* 轻柔的上下漂浮 */
@keyframes sticker-float {
  0%, 100% {
    transform: translateY(0) rotate(-4deg);
  }

  50% {
    transform: translateY(-12px) rotate(4deg);
  }
}

/* 手机端：缩小贴纸，避免遮挡内容 */
@media (max-width: 600px) {
  .floating-sticker {
    opacity: 0.78;
  }

  .sticker-star {
    top: 13%;
    left: 1%;
    width: 36px;
  }

  .sticker-butterfly {
    top: 20%;
    right: 1%;
    width: 44px;
  }

  .sticker-cat {
    bottom: 8%;
    left: 1%;
    width: 44px;
  }

  .sticker-heart {
    bottom: 13%;
    right: 1%;
    width: 32px;
  }
}

/* 尊重系统的减少动态效果设置 */
@media (prefers-reduced-motion: reduce) {
  .floating-sticker {
    animation: none;
  }
}
/* ══ Pinned Post Tag ══ */
.pt-pinned {
  color: #426d91;
  background: linear-gradient(
    135deg,
    rgba(220, 243, 255, 0.95),
    rgba(192, 215, 242, 0.9)
  );
  border: 1px solid rgba(135, 181, 218, 0.7);
  box-shadow: 0 2px 8px rgba(100, 160, 205, 0.18);
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.8);
}/* ══ Sticker inside a specific card ══ */

/* 让目标卡片成为贴纸的定位参照 */
.glass.post {
  position: relative;
}

/* 卡片内部的 GIF 贴纸 */
.card-sticker {
  position: absolute;
  top: 35px;
  right: 5px;

  width: 80px;
  height: auto;

  z-index: 10;
  pointer-events: none;
  user-select: none;
}

/* Hide diary thumbnail */
.diary-thumb.dt-aqua {
  display: none !important;
}/* ══ Diary Author ══ */

.diary-author {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 18px;
}

.diary-avatar {
  width: 48px;
  height: 48px;
  flex-shrink: 0;
  object-fit: cover;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.85);
  box-shadow: 0 2px 10px rgba(100, 160, 205, 0.2);
}

.diary-author-info {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.diary-nickname {
  font-size: 15px;
  font-weight: 700;
  color: inherit;
}

.diary-time {
  font-size: 11px;
  color: #7f98aa;
  letter-spacing: 0.3px;
}

.diary-content {
  font-size: 14px;
  line-height: 1.8;
  overflow-wrap: anywhere;
}
/* ══ Friends Form — Guestbook matching style ══ */

#tab-friends .friend-form {
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 100%;
  min-width: 0;
  margin-top: 16px;
}

#tab-friends .friend-form label {
  display: block;
  margin: 0;
  color: #4d809e;
  font-size: 12px;
  font-weight: 700;
}

#tab-friends .friend-form input,
#tab-friends .friend-form textarea {
  display: block;
  box-sizing: border-box;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  margin: 0;
  padding: 12px 14px;
  border: 1px solid rgba(130, 200, 230, 0.5);
  border-radius: 13px;
  background: rgba(255, 255, 255, 0.52);
  color: #28536f;
  font: inherit;
  font-size: 13px;
  outline: none;
}

#tab-friends .friend-form input:focus,
#tab-friends .friend-form textarea:focus {
  border-color: #75c9e9;
  box-shadow: 0 0 0 3px rgba(117, 201, 233, 0.16);
}

#tab-friends .friend-form textarea {
  resize: vertical;
  min-height: 100px;
}

#tab-friends .friend-form button {
  align-self: flex-start;
  box-sizing: border-box;
  max-width: 100%;
  padding: 11px 18px;
  border: 1px solid rgba(255, 255, 255, 0.8);
  border-radius: 14px;
  background: linear-gradient(135deg, #b8edfa, #91d8f5);
  color: #28536f;
  font: inherit;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(70, 160, 205, 0.15);
}

#tab-friends .friend-form button:disabled {
  opacity: 0.6;
  cursor: wait;
}

#tab-friends #friend-status {
  min-height: 18px;
  margin: 0;
  color: #5485a1;
  font-size: 12px;
  overflow-wrap: anywhere;
}

#tab-friends .friends-list-heading {
  margin-top: 26px;
  margin-bottom: 14px;
  padding-bottom: 10px;
  border-bottom: 1px solid rgba(120, 190, 220, 0.3);
  color: #5485a1;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 1.5px;
}

#tab-friends #friends-list {
  margin-top: 14px;
}

@media (max-width: 600px) {
  #tab-friends .friend-form button {
    align-self: stretch;
    width: 100%;
  }
}

/* ══ Friends List: 2 columns × 4 rows ══ */

#tab-friends #friends-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  margin-top: 18px;
}

/* Friend card */
#tab-friends .friend-card {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
  padding: 14px;
  border: 1px solid rgba(255, 255, 255, 0.75);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.4);
  box-shadow: 0 4px 12px rgba(70, 160, 205, 0.08);
  text-decoration: none;
  transition: transform 0.2s ease, background 0.2s ease;
}

#tab-friends .friend-card:hover {
  transform: translateY(-2px);
  background: rgba(255, 255, 255, 0.65);
}

/* Avatar */
#tab-friends .friend-avatar {
  flex: 0 0 64px;
  width: 64px;
  height: 64px;
  border-radius: 14px;
  object-fit: cover;
  background: rgba(145, 216, 245, 0.25);
  border: 1px solid rgba(255, 255, 255, 0.8);
}

/* Name and description */
#tab-friends .friend-info {
  flex: 1;
  min-width: 0;
}

#tab-friends .friend-name {
  margin: 0 0 6px;
  color: #347fa5;
  font-size: 13px;
  font-weight: 800;
  overflow-wrap: anywhere;
}

#tab-friends .friend-description {
  margin: 0;
  color: #64889e;
  font-size: 12px;
  line-height: 1.6;
  overflow-wrap: anywhere;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  overflow: hidden;
}

/* Pagination */
#tab-friends .friends-pagination {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 8px;
  margin-top: 24px;
}

#tab-friends .friends-page-btn {
  min-width: 36px;
  padding: 8px 12px;
  border: 1px solid rgba(130, 200, 230, 0.5);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.48);
  color: #5485a1;
  font: inherit;
  font-size: 12px;
  cursor: pointer;
}

#tab-friends .friends-page-btn:hover,
#tab-friends .friends-page-btn.active {
  background: linear-gradient(135deg, #b8edfa, #91d8f5);
  color: #28536f;
}

#tab-friends .friends-page-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

#tab-friends .friends-empty {
  grid-column: 1 / -1;
  padding: 24px 12px;
  color: #64889e;
  text-align: center;
  font-size: 13px;
}

/* Mobile: keep two columns, reduce card size */
@media (max-width: 600px) {
  #tab-friends #friends-list {
    gap: 8px;
  }

  #tab-friends .friend-card {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    padding: 10px;
  }

  #tab-friends .friend-avatar {
    flex-basis: auto;
    width: 48px;
    height: 48px;
  }

  #tab-friends .friend-name {
    font-size: 12px;
  }

  #tab-friends .friend-description {
    font-size: 11px;
  }
}

/* ══ Diary Images ══ */

#tab-diary .diary-image {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
  margin: 16px 0;
  border-radius: 14px;
  object-fit: contain;
  box-sizing: border-box;
}

/* Optional: image with a soft glass-like frame */
#tab-diary .diary-image-frame {
  padding: 6px;
  border: 1px solid rgba(255, 255, 255, 0.8);
  border-radius: 17px;
  background: rgba(255, 255, 255, 0.4);
  box-shadow: 0 4px 14px rgba(70, 160, 205, 0.1);
}

/* ══ Diary Image Lightbox ══ */

#diary-lightbox.diary-lightbox {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 99999;
  align-items: center;
  justify-content: center;
  padding: 48px 20px 20px;
  box-sizing: border-box;
  background: rgba(15, 30, 45, 0.88);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  cursor: zoom-out;
}

#diary-lightbox.diary-lightbox.active {
  display: flex;
}

#diary-lightbox #diary-lightbox-image {
  display: block;
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  border-radius: 12px;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
  cursor: default;
}

#diary-lightbox .diary-lightbox-close {
  position: absolute;
  top: 14px;
  right: 20px;
  width: 42px;
  height: 42px;
  border: 1px solid rgba(255, 255, 255, 0.45);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.18);
  color: white;
  font-size: 30px;
  line-height: 1;
  cursor: pointer;
}

#diary-lightbox .diary-lightbox-close:hover {
  background: rgba(255, 255, 255, 0.3);
}

/* ══ Frutiger Aero Background ══ */

body {
  background-color: #168fe5;
  background-image: url("aero-background.jpg");
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
  background-attachment: fixed;
}

/* Mobile background */
@media (max-width: 768px) {
  body {
    background-attachment: scroll;
    background-position: center center;
  }
}

/* ═══════════════════════════════════════════════
   Frutiger Aero Glass Refresh — Phase 1
   Glass panels only; preserves existing layout/JS.
   ═══════════════════════════════════════════════ */

.glass {
  background:
    radial-gradient(ellipse at 12% 0%, rgba(255, 255, 255, 0.48) 0%, transparent 48%),
    linear-gradient(135deg,
      rgba(190, 232, 255, 0.52) 0%,
      rgba(100, 190, 250, 0.34) 48%,
      rgba(210, 247, 255, 0.42) 100%);
  border: 1px solid rgba(255, 255, 255, 0.78);
  border-radius: 16px;
  box-shadow:
    0 12px 32px rgba(0, 76, 160, 0.18),
    0 3px 8px rgba(0, 100, 190, 0.10),
    inset 0 1.5px 0 rgba(255, 255, 255, 0.88),
    inset 0 -1px 0 rgba(120, 210, 255, 0.24);
  -webkit-backdrop-filter: blur(18px) saturate(145%);
  backdrop-filter: blur(18px) saturate(145%);
  overflow: hidden;
}

.glass-header {
  background:
    linear-gradient(180deg,
      rgba(210, 244, 255, 0.62) 0%,
      rgba(91, 185, 247, 0.48) 48%,
      rgba(36, 142, 225, 0.54) 100%);
  border-bottom: 1px solid rgba(255, 255, 255, 0.62);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.82),
    0 1px 0 rgba(65, 160, 230, 0.10);
  -webkit-backdrop-filter: blur(14px) saturate(150%);
  backdrop-filter: blur(14px) saturate(150%);
}

.glass-header::after {
  height: 58%;
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.36) 0%,
    rgba(255, 255, 255, 0.10) 55%,
    transparent 100%
  );
}

.post {
  transition:
    transform 180ms ease,
    box-shadow 180ms ease,
    border-color 180ms ease;
}

.post:hover {
  transform: translateY(-2px);
  border-color: rgba(255, 255, 255, 0.94);
  box-shadow:
    0 16px 36px rgba(0, 76, 160, 0.22),
    0 4px 10px rgba(0, 100, 190, 0.12),
    inset 0 1.5px 0 rgba(255, 255, 255, 0.92),
    inset 0 -1px 0 rgba(120, 210, 255, 0.28);
}

@media (prefers-reduced-motion: reduce) {
  .post {
    transition: none;
  }
  .post:hover {
    transform: none;
  }
}


/* ═══════════════════════════════════════════════
   Frutiger Aero Glass Refresh — Phase 2
   Navigation: translucent blue crystal tabs
   ═══════════════════════════════════════════════ */

/* Main navigation glass rail */
nav {
  position: relative;
  z-index: 5;
  gap: 7px;
  align-items: center;
  padding: 10px 14px;
  background:
    linear-gradient(180deg,
      rgba(224, 248, 255, 0.62) 0%,
      rgba(95, 190, 248, 0.48) 42%,
      rgba(28, 132, 220, 0.54) 100%);
  border-top: 1px solid rgba(255, 255, 255, 0.82);
  border-bottom: 1px solid rgba(255, 255, 255, 0.52);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.72),
    0 5px 16px rgba(0, 75, 150, 0.12);
  -webkit-backdrop-filter: blur(18px) saturate(155%);
  backdrop-filter: blur(18px) saturate(155%);
}

/* Individual crystal-like navigation buttons */
nav .nav-tab {
  position: relative;
  isolation: isolate;
  flex: 0 0 auto;
  justify-content: center;
  padding: 9px 14px;
  min-height: 36px;
  box-sizing: border-box;
  border: 1px solid rgba(255, 255, 255, 0.52);
  border-radius: 12px;
  background:
    linear-gradient(180deg,
      rgba(255, 255, 255, 0.44) 0%,
      rgba(191, 235, 255, 0.24) 42%,
      rgba(50, 157, 235, 0.22) 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.88),
    inset 0 -1px 0 rgba(70, 170, 235, 0.18),
    0 3px 8px rgba(0, 72, 145, 0.12);
  color: rgba(255, 255, 255, 0.98);
  font-size: 10px;
  text-shadow: 0 1px 3px rgba(0, 62, 130, 0.42);
  text-decoration: none;
  white-space: nowrap;
  overflow: hidden;
  transition:
    transform 180ms ease,
    background 180ms ease,
    box-shadow 180ms ease,
    border-color 180ms ease;
}

/* Soft reflective shine across each tab */
nav .nav-tab::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 1px 1px auto;
  height: 52%;
  border-radius: 10px 10px 50% 50%;
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.38),
    rgba(255, 255, 255, 0.08) 68%,
    transparent
  );
  pointer-events: none;
}

nav .nav-tab:hover:not(.active) {
  transform: translateY(-2px);
  border-color: rgba(255, 255, 255, 0.9);
  background:
    linear-gradient(180deg,
      rgba(255, 255, 255, 0.62),
      rgba(172, 229, 255, 0.38) 52%,
      rgba(47, 157, 240, 0.34));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.95),
    0 6px 14px rgba(0, 75, 155, 0.18);
  color: #ffffff;
}

nav .nav-tab.active {
  transform: translateY(-1px);
  border-color: rgba(255, 255, 255, 0.98);
  background:
    linear-gradient(180deg,
      rgba(255, 255, 255, 0.88) 0%,
      rgba(216, 246, 255, 0.76) 48%,
      rgba(121, 207, 255, 0.66) 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 1),
    inset 0 -2px 0 rgba(255, 255, 255, 0.32),
    0 4px 12px rgba(0, 70, 145, 0.18),
    0 0 0 1px rgba(90, 190, 255, 0.18);
  color: #1268a8;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.72);
}

nav .nav-tab:active {
  transform: translateY(1px) scale(0.985);
}

/* Keep the existing horizontally scrollable mobile navigation */
@media (max-width: 680px) {
  nav {
    align-items: stretch;
    gap: 6px;
    padding: 8px 10px;
  }

  nav .nav-tab {
    min-height: 42px;
    padding: 7px 12px;
    border-radius: 11px;
    flex-direction: column;
    gap: 3px;
    line-height: 1.4;
  }
}

@media (prefers-reduced-motion: reduce) {
  nav .nav-tab {
    transition: none;
  }
  nav .nav-tab:hover:not(.active),
  nav .nav-tab.active,
  nav .nav-tab:active {
    transform: none;
  }
}


/* ═══════════════════════════════════════════════
   Frutiger Aero Glass Refresh — Phase 3
   Header / Logo area: clear sky-blue crystal glass
   ═══════════════════════════════════════════════ */

/* Main header: let the sky background show through */
header {
  position: relative;
  isolation: isolate;
  background:
    linear-gradient(180deg,
      rgba(194, 239, 255, 0.40) 0%,
      rgba(77, 183, 247, 0.34) 46%,
      rgba(16, 129, 220, 0.42) 100%);
  border: 1px solid rgba(255, 255, 255, 0.78);
  border-bottom: 1px solid rgba(255, 255, 255, 0.70);
  border-radius: 20px;
  overflow: hidden;
  box-shadow:
    inset 0 1.5px 0 rgba(255, 255, 255, 0.95),
    inset 0 -1px 0 rgba(100, 205, 255, 0.30),
    0 12px 30px rgba(0, 83, 164, 0.16),
    0 2px 8px rgba(0, 115, 210, 0.10);
  -webkit-backdrop-filter: blur(20px) saturate(165%);
  backdrop-filter: blur(20px) saturate(165%);
}

/* Glass sheen, like light reflecting off a curved surface */
header::after {
  z-index: 0;
  height: 58%;
  background:
    linear-gradient(180deg,
      rgba(255, 255, 255, 0.42) 0%,
      rgba(255, 255, 255, 0.14) 38%,
      rgba(255, 255, 255, 0.00) 100%);
  pointer-events: none;
}

.hdr-titlebar {
  position: relative;
  z-index: 1;
  background:
    linear-gradient(180deg,
      rgba(238, 251, 255, 0.52) 0%,
      rgba(115, 202, 255, 0.32) 52%,
      rgba(38, 151, 232, 0.28) 100%);
  border-bottom: 1px solid rgba(255, 255, 255, 0.60);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.76);
  -webkit-backdrop-filter: blur(14px) saturate(155%);
  backdrop-filter: blur(14px) saturate(155%);
}

.hdr-tb-title {
  color: rgba(255, 255, 255, 0.98);
  text-shadow:
    0 1px 2px rgba(0, 67, 137, 0.42),
    0 0 12px rgba(255, 255, 255, 0.28);
}

.hdr-tb-url {
  color: rgba(255, 255, 255, 0.96);
  background: rgba(220, 246, 255, 0.22);
  border-color: rgba(255, 255, 255, 0.54);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.72),
    0 2px 6px rgba(0, 80, 155, 0.08);
}

.hdr-main {
  position: relative;
  z-index: 1;
  background: linear-gradient(115deg,
    rgba(215, 246, 255, 0.16),
    rgba(255, 255, 255, 0.05) 52%,
    rgba(55, 166, 244, 0.12));
}

.hdr-mascot {
  filter:
    drop-shadow(0 3px 7px rgba(0, 81, 160, 0.24))
    drop-shadow(0 0 10px rgba(255, 255, 255, 0.32));
}

.site-name {
  color: #ffffff;
  letter-spacing: 0.7px;
  text-shadow:
    0 1px 0 rgba(255, 255, 255, 0.44),
    0 2px 4px rgba(0, 65, 132, 0.34),
    0 0 18px rgba(220, 248, 255, 0.38);
}

.site-name span {
  color: #e0faff;
  text-shadow: 0 1px 3px rgba(0, 92, 165, 0.25);
}

.site-desc {
  color: rgba(255, 255, 255, 0.96);
  text-shadow:
    0 1px 3px rgba(0, 65, 130, 0.42),
    0 0 10px rgba(255, 255, 255, 0.12);
}

/* Small profile badges: translucent instead of solid candy colors */
.aero-badge {
  color: #ffffff;
  background: linear-gradient(180deg,
    rgba(234, 250, 255, 0.46),
    rgba(53, 159, 236, 0.32));
  border-color: rgba(255, 255, 255, 0.70);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.86),
    inset 0 -1px 0 rgba(57, 155, 225, 0.18),
    0 3px 8px rgba(0, 79, 150, 0.10);
  text-shadow: 0 1px 3px rgba(0, 62, 125, 0.38);
  -webkit-backdrop-filter: blur(10px) saturate(150%);
  backdrop-filter: blur(10px) saturate(150%);
}

.aero-badge::before {
  height: 58%;
  background: linear-gradient(180deg,
    rgba(255, 255, 255, 0.48),
    rgba(255, 255, 255, 0.10) 72%,
    transparent);
}

.ab-blue,
.ab-aqua,
.ab-green,
.ab-sky,
.ab-teal {
  background: linear-gradient(180deg,
    rgba(238, 252, 255, 0.48),
    rgba(65, 168, 239, 0.32));
}

/* Mobile: keep the glass header airy without crowding */
@media (max-width: 680px) {
  header {
    border-radius: 15px;
  }

  .hdr-main {
    gap: 12px;
    padding: 15px 13px 13px;
  }

  .hdr-mascot,
  .hdr-mascot .icon-img {
    width: 48px;
    height: 48px;
    font-size: 48px;
  }

  .site-name {
    font-size: clamp(20px, 5.5vw, 26px);
  }

  .site-desc {
    font-size: 11px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .hdr-mascot {
    animation: none;
  }
}

/* ═══════════════════════════════════════════════
   Frutiger Aero Glass Refresh — Phase 4
   Content cards: clear aqua-blue crystal glass
   ═══════════════════════════════════════════════ */

/* Brighter, clearer glass while keeping body text readable */
.glass {
  background:
    radial-gradient(ellipse at 14% 0%, rgba(255,255,255,.48) 0%, rgba(255,255,255,0) 45%),
    linear-gradient(145deg,
      rgba(188, 232, 255, .40) 0%,
      rgba(73, 174, 245, .27) 48%,
      rgba(200, 244, 255, .34) 100%);
  border: 1px solid rgba(255,255,255,.78);
  border-radius: 18px;
  box-shadow:
    inset 0 1.5px 0 rgba(255,255,255,.88),
    inset 0 -1px 0 rgba(128,220,255,.28),
    0 10px 28px rgba(0,76,160,.14),
    0 2px 7px rgba(0,110,195,.09);
  -webkit-backdrop-filter: blur(22px) saturate(165%);
  backdrop-filter: blur(22px) saturate(165%);
}

/* Crystal-like title strip: brighter at the top, aqua-blue below */
.glass-header {
  background:
    linear-gradient(180deg,
      rgba(237, 251, 255, .60) 0%,
      rgba(115, 205, 255, .40) 52%,
      rgba(40, 151, 231, .34) 100%);
  border-bottom: 1px solid rgba(255,255,255,.68);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.88),
    0 1px 0 rgba(67,163,230,.08);
  -webkit-backdrop-filter: blur(16px) saturate(165%);
  backdrop-filter: blur(16px) saturate(165%);
}

.glass-header::after {
  height: 62%;
  background: linear-gradient(180deg,
    rgba(255,255,255,.48) 0%,
    rgba(255,255,255,.15) 58%,
    transparent 100%);
}

/* Content cards have a gentle lift, not a heavy shadow */
.glass.post {
  border-color: rgba(255,255,255,.78);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.86),
    inset 0 -1px 0 rgba(130,220,255,.20),
    0 9px 24px rgba(0,82,160,.13),
    0 2px 6px rgba(0,110,200,.08);
}

.glass.post:hover {
  border-color: rgba(255,255,255,.94);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.94),
    inset 0 -1px 0 rgba(130,220,255,.28),
    0 13px 30px rgba(0,82,160,.18),
    0 3px 9px rgba(0,110,200,.11);
}

/* Diary: translucent author and content area, with crisp readable text */
.diary-post {
  background: linear-gradient(135deg,
    rgba(231,249,255,.10),
    rgba(76,174,242,.08) 58%,
    rgba(255,255,255,.08));
}

.diary-avatar {
  border-color: rgba(255,255,255,.94);
  box-shadow:
    0 0 0 1px rgba(104,199,255,.30),
    0 3px 12px rgba(0,85,165,.18);
}

.diary-time {
  color: rgba(239,250,255,.94);
  text-shadow: 0 1px 3px rgba(0,65,130,.34);
}

.diary-content {
  color: #f8fdff;
  text-shadow: 0 1px 3px rgba(0,57,115,.34);
}

/* Music playlist rows: small glass tiles */
.music-track-item {
  background: linear-gradient(135deg,
    rgba(235,250,255,.32),
    rgba(76,174,242,.20));
  border-color: rgba(255,255,255,.52);
  border-radius: 12px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.48);
  -webkit-backdrop-filter: blur(10px) saturate(150%);
  backdrop-filter: blur(10px) saturate(150%);
  transition: background 160ms ease, border-color 160ms ease, transform 160ms ease, box-shadow 160ms ease;
}

.music-track-item:hover,
.music-track-item.active {
  background: linear-gradient(135deg,
    rgba(247,253,255,.55),
    rgba(93,190,255,.38));
  border-color: rgba(255,255,255,.84);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.78), 0 3px 10px rgba(0,90,170,.10);
  transform: translateY(-1px);
}

/* Diary and gallery images inherit a clean glass frame when present */
#tab-diary .diary-image,
#tab-photos img,
#tab-video video {
  border: 1px solid rgba(255,255,255,.74);
  border-radius: 13px;
  box-shadow:
    0 5px 16px rgba(0,75,150,.16),
    inset 0 1px 0 rgba(255,255,255,.70);
}

/* Form fields: translucent ice-blue rather than opaque white */
#tab-friends .friend-form input,
#tab-friends .friend-form textarea,
#tab-friends .friend-form select {
  color: #f8fdff;
  background: linear-gradient(135deg,
    rgba(235,250,255,.28),
    rgba(85,178,239,.18));
  border-color: rgba(255,255,255,.62);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.42);
  -webkit-backdrop-filter: blur(12px) saturate(145%);
  backdrop-filter: blur(12px) saturate(145%);
}

#tab-friends .friend-form input::placeholder,
#tab-friends .friend-form textarea::placeholder {
  color: rgba(240,250,255,.78);
}

#tab-friends .friend-form input:focus,
#tab-friends .friend-form textarea:focus,
#tab-friends .friend-form select:focus {
  outline: none;
  border-color: rgba(255,255,255,.94);
  box-shadow: 0 0 0 3px rgba(164,224,255,.22), inset 0 1px 0 rgba(255,255,255,.62);
}

@media (prefers-reduced-motion: reduce) {
  .music-track-item { transition: none; }
  .music-track-item:hover,
  .music-track-item.active { transform: none; }
}

/* ═══════════════════════════════════════════════════════════════
   PHASE 5 — Crystal buttons & small controls
   Bright, transparent Frutiger Aero finish; existing behavior kept.
   ═══════════════════════════════════════════════════════════════ */

/* Shared crystal surface for interactive controls */
.nav-tab,
#music-prev,
#music-next,
#mp-disc-fa,
#guestbook-submit,
#friend-preview,
#friend-submit,
#tab-friends .friends-page-btn,
#diary-lightbox .diary-lightbox-close {
  position: relative;
  isolation: isolate;
  border: 1px solid rgba(255,255,255,.76);
  background: linear-gradient(180deg,
    rgba(255,255,255,.48) 0%,
    rgba(170,228,255,.30) 38%,
    rgba(42,157,236,.24) 100%);
  color: #f8fdff;
  text-shadow: 0 1px 3px rgba(0,65,130,.32);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.88),
    inset 0 -1px 0 rgba(72,174,235,.24),
    0 3px 10px rgba(0,91,165,.13);
  -webkit-backdrop-filter: blur(12px) saturate(155%);
  backdrop-filter: blur(12px) saturate(155%);
  transition: transform .18s ease, background .18s ease,
    box-shadow .18s ease, border-color .18s ease, filter .18s ease;
}

/* Fine highlight on top edge, like a rounded glass button */
.nav-tab::before,
#music-prev::before,
#music-next::before,
#mp-disc-fa::before,
#guestbook-submit::before,
#friend-preview::before,
#friend-submit::before,
#tab-friends .friends-page-btn::before {
  content: "";
  position: absolute;
  pointer-events: none;
  inset: 1px 2px auto;
  height: 44%;
  border-radius: inherit;
  background: linear-gradient(180deg,
    rgba(255,255,255,.38), rgba(255,255,255,0));
  opacity: .82;
  z-index: -1;
}

.nav-tab:hover,
#music-prev:hover,
#music-next:hover,
#mp-disc-fa:hover,
#guestbook-submit:hover,
#friend-preview:hover,
#friend-submit:hover,
#tab-friends .friends-page-btn:not(:disabled):hover {
  transform: translateY(-2px);
  border-color: rgba(255,255,255,.96);
  background: linear-gradient(180deg,
    rgba(255,255,255,.64),
    rgba(177,232,255,.42) 44%,
    rgba(42,164,244,.34));
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.96),
    0 6px 16px rgba(0,96,176,.18),
    0 0 0 1px rgba(190,238,255,.20);
}

.nav-tab:active,
#music-prev:active,
#music-next:active,
#mp-disc-fa:active,
#guestbook-submit:active,
#friend-preview:active,
#friend-submit:active,
#tab-friends .friends-page-btn:not(:disabled):active {
  transform: translateY(0) scale(.98);
  box-shadow: inset 0 2px 5px rgba(0,91,165,.16),
    0 1px 4px rgba(0,91,165,.12);
}

/* Selected navigation tab: brighter ice-blue glass */
.nav-tab.active,
.nav-tab[aria-current="page"] {
  color: #07558e;
  text-shadow: 0 1px 0 rgba(255,255,255,.72);
  border-color: rgba(255,255,255,.98);
  background: linear-gradient(180deg,
    rgba(255,255,255,.78),
    rgba(190,238,255,.58) 46%,
    rgba(74,181,246,.44));
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.98),
    inset 0 -1px 0 rgba(64,159,224,.18),
    0 3px 12px rgba(0,104,184,.16),
    0 0 12px rgba(206,244,255,.18);
}

/* Music transport: rounder, brighter crystal controls */
#music-prev,
#music-next {
  border-radius: 999px;
  min-width: 40px;
  min-height: 40px;
}

#mp-disc-fa {
  border-radius: 50%;
  border-color: rgba(255,255,255,.92);
  background: radial-gradient(circle at 34% 24%,
    rgba(255,255,255,.82),
    rgba(171,231,255,.54) 38%,
    rgba(34,150,239,.44) 100%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.98),
    inset 0 -3px 8px rgba(0,93,168,.12),
    0 5px 14px rgba(0,92,170,.20);
}

/* Form submit buttons: vivid aqua-blue glass, still readable */
#guestbook-submit,
#friend-submit {
  border-radius: 999px;
  font-weight: 600;
  background: linear-gradient(180deg,
    rgba(111,211,255,.90),
    rgba(29,160,244,.88) 55%,
    rgba(0,125,221,.90));
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.86),
    inset 0 -2px 0 rgba(0,79,160,.12),
    0 4px 12px rgba(0,104,190,.22);
}

#guestbook-submit:hover,
#friend-submit:hover {
  background: linear-gradient(180deg,
    rgba(151,225,255,.98),
    rgba(48,177,250,.94) 55%,
    rgba(8,140,232,.96));
}

#guestbook-submit:disabled,
#friend-submit:disabled,
#tab-friends .friends-page-btn:disabled {
  opacity: .52;
  filter: saturate(.72);
  cursor: not-allowed;
  transform: none;
}

#tab-friends .friends-page-btn.active {
  color: #07558e;
  border-color: rgba(255,255,255,.98);
  background: linear-gradient(180deg,
    rgba(255,255,255,.78), rgba(170,229,255,.58), rgba(58,165,240,.42));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.95),
    0 3px 10px rgba(0,94,172,.15);
}

/* Keyboard focus remains visible and accessible */
.nav-tab:focus-visible,
#music-prev:focus-visible,
#music-next:focus-visible,
#mp-disc-fa:focus-visible,
#guestbook-submit:focus-visible,
#friend-preview:focus-visible,
#friend-submit:focus-visible,
#tab-friends .friends-page-btn:focus-visible,
#diary-lightbox .diary-lightbox-close:focus-visible {
  outline: 2px solid rgba(255,255,255,.98);
  outline-offset: 3px;
  box-shadow: 0 0 0 5px rgba(49,164,239,.30);
}

@media (max-width: 680px) {
  .nav-tab {
    -webkit-backdrop-filter: blur(8px) saturate(145%);
    backdrop-filter: blur(8px) saturate(145%);
  }

  #music-prev,
  #music-next {
    min-width: 36px;
    min-height: 36px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .nav-tab,
  #music-prev,
  #music-next,
  #mp-disc-fa,
  #guestbook-submit,
  #friend-preview,
  #friend-submit,
  #tab-friends .friends-page-btn {
    transition: none;
  }
  .nav-tab:hover,
  #music-prev:hover,
  #music-next:hover,
  #mp-disc-fa:hover,
  #guestbook-submit:hover,
  #friend-preview:hover,
  #friend-submit:hover,
  #tab-friends .friends-page-btn:not(:disabled):hover {
    transform: none;
  }
}


/* ═══════════════════════════════════════════════
   PHASE 6 — Frutiger Aero typography & glass bubbles
   "Frutiger" is used when installed locally. A licensed
   font file is needed for consistent rendering elsewhere.
═══════════════════════════════════════════════ */

/* Frutiger-first font stack with cross-platform fallbacks */
body,
button,
input,
select,
textarea,
.nav-tab,
.aero-badge,
.glass-header,
.diary-nickname,
.diary-time {
  font-family: "Frutiger", "Frutiger LT 55 Roman",
               "Frutiger LT Std", "Segoe UI", "Trebuchet MS",
               Arial, sans-serif;
}

/* Keep technical readouts intentionally monospaced */
.counter-digits,
code,
pre,
kbd,
samp {
  font-family: "Courier New", monospace;
}

/* Softer, clearer type rendering on blue glass */
body {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* Brighter crystal edges and subtle inner reflections */
.bubble {
  background:
    radial-gradient(circle at 28% 23%,
      rgba(255,255,255,.98) 0%,
      rgba(255,255,255,.62) 8%,
      rgba(215,246,255,.24) 22%,
      rgba(113,204,255,.16) 48%,
      rgba(255,255,255,.04) 68%,
      rgba(255,255,255,0) 76%);
  border: 1px solid rgba(255,255,255,.82);
  box-shadow:
    inset 1px 1px 3px rgba(255,255,255,.92),
    inset -2px -3px 7px rgba(65,165,235,.18),
    0 0 10px rgba(195,238,255,.18);
  -webkit-backdrop-filter: blur(1px);
  backdrop-filter: blur(1px);
}

.bubble::before {
  content: "";
  position: absolute;
  width: 26%;
  height: 12%;
  top: 17%;
  left: 20%;
  border-radius: 50%;
  background: rgba(255,255,255,.9);
  filter: blur(1px);
  transform: rotate(-35deg);
  pointer-events: none;
}

.bubble::after {
  content: "";
  position: absolute;
  width: 10%;
  height: 10%;
  top: 31%;
  left: 16%;
  border-radius: 50%;
  background: rgba(255,255,255,.7);
  box-shadow: 0 0 5px rgba(255,255,255,.5);
  pointer-events: none;
}

/* Respect visitors who prefer reduced motion */
@media (prefers-reduced-motion: reduce) {
  .bubble,
  .leaf {
    animation: none !important;
    opacity: .18;
  }
}

/* ══ Phase 7: Clear typography & balanced spacing ══ */
:root {
  --aero-text-main: #f8fdff;
  --aero-text-soft: rgba(245, 252, 255, .88);
  --aero-text-muted: rgba(232, 247, 255, .76);
  --aero-space-xs: 6px;
  --aero-space-sm: 10px;
  --aero-space-md: 16px;
  --aero-space-lg: 22px;
}

/* Use a readable system fallback if Frutiger is not installed. */
body {
  color: var(--aero-text-main);
  font-family: "Frutiger", "Frutiger LT 55 Roman", "Frutiger LT Std",
               "Segoe UI", "Trebuchet MS", Arial, sans-serif;
  line-height: 1.6;
  letter-spacing: .01em;
}

/* Improve readability on translucent blue surfaces without changing layout. */
.glass,
.glass.post,
.post,
.diary-post,
.diary-content,
.music-playlist,
.music-track,
.friend-card,
.link-card {
  line-height: 1.6;
}

.glass-header {
  line-height: 1.35;
  letter-spacing: .025em;
}

.gh-title {
  line-height: 1.35;
  letter-spacing: .02em;
  text-shadow: 0 1px 5px rgba(18, 104, 169, .16);
}

/* Consistent paragraph rhythm, scoped to content areas. */
.diary-content p,
.post-content p,
.blog-content p,
#tab-blog p,
#tab-diary .diary-content p {
  margin-top: 0;
  margin-bottom: 1em;
  line-height: 1.8;
  overflow-wrap: anywhere;
}

.diary-content p:last-child,
.post-content p:last-child,
.blog-content p:last-child {
  margin-bottom: 0;
}

.diary-nickname,
.diary-author-info .diary-nickname {
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: .015em;
}

.diary-time {
  display: block;
  margin-top: 3px;
  font-size: .82rem;
  line-height: 1.45;
  color: var(--aero-text-muted);
}

.diary-author {
  gap: 12px;
  margin-bottom: 16px;
}

.diary-author-info {
  min-width: 0;
  line-height: 1.45;
}

/* Form controls and small labels stay compact but easy to scan. */
input,
textarea,
select,
button {
  font: inherit;
}

input,
textarea,
select {
  line-height: 1.5;
}

button,
.nav-tab {
  letter-spacing: .01em;
}

/* Avoid long words or URLs stretching glass cards on narrow screens. */
.glass,
.post,
.diary-content,
.music-track-list {
  min-width: 0;
  overflow-wrap: anywhere;
}

@media (max-width: 768px) {
  body {
    line-height: 1.55;
  }

  .diary-author {
    gap: 10px;
    margin-bottom: 13px;
  }

  .diary-content p,
  .post-content p,
  .blog-content p,
  #tab-blog p {
    line-height: 1.72;
  }
}

/* ═══════════════════════════════════════════════════════
   PHASE 8 — Frutiger Aero floating glass bubbles
   Customize sizes and positions with the variables below.
   ═══════════════════════════════════════════════════════ */

/* Decorative layer never blocks links, tabs, or player controls. */
.aero-bubble-layer {
  position: fixed;
  inset: 0;
  z-index: 2;
  overflow: hidden;
  pointer-events: none;
  user-select: none;
}

.aero-bubble {
  position: absolute;
  left: var(--bubble-x, 10%);
  top: var(--bubble-y, 30%);
  width: var(--bubble-size, 54px);
  aspect-ratio: 1;
  border-radius: 50%;
  opacity: var(--bubble-opacity, .62);
  background:
    radial-gradient(ellipse at 28% 20%, rgba(255,255,255,.98) 0 4%, rgba(255,255,255,.56) 12%, transparent 30%),
    radial-gradient(ellipse at 68% 76%, rgba(73,178,255,.18), transparent 45%),
    radial-gradient(circle at 36% 30%, rgba(255,255,255,.5), rgba(176,230,255,.20) 42%, rgba(91,184,255,.12) 65%, rgba(255,255,255,.42) 72%, rgba(255,255,255,.08) 79%, transparent 82%);
  border: 1px solid rgba(255,255,255,.76);
  box-shadow: inset 2px 2px 7px rgba(255,255,255,.65), inset -3px -4px 9px rgba(57,158,235,.13), 0 4px 14px rgba(38,135,205,.10);
  animation: aero-bubble-drift var(--bubble-speed, 12s) ease-in-out infinite;
  animation-delay: var(--bubble-delay, 0s);
}

.aero-bubble::before {
  content: "";
  position: absolute;
  top: 17%;
  left: 22%;
  width: 28%;
  height: 12%;
  border-radius: 50%;
  background: rgba(255,255,255,.9);
  filter: blur(1px);
  transform: rotate(-32deg);
}

.aero-bubble::after {
  content: "";
  position: absolute;
  right: 17%;
  bottom: 19%;
  width: 12%;
  height: 12%;
  border-radius: 50%;
  background: rgba(255,255,255,.7);
  filter: blur(.5px);
}

@keyframes aero-bubble-drift {
  0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
  50% { transform: translate3d(7px, -18px, 0) scale(1.035); }
}

/* Keep content above the decorative bubbles. */
.site { position: relative; z-index: 3; }

/* The existing stickers can be repositioned by changing these values. */
.floating-sticker { cursor: default; }
.sticker-star { --sticker-x: 3%; }

@media (max-width: 600px) {
  .aero-bubble { opacity: .38; }
  .aero-bubble:nth-child(2n) { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .aero-bubble { animation: none; }
}

/* ══ PHASE 9 — Draggable sticker studio ══ */
.floating-sticker {
  pointer-events: auto;
  touch-action: none;
  cursor: grab;
  -webkit-user-select: none;
  user-select: none;
  transition: filter .18s ease, opacity .18s ease;
}
.floating-sticker.is-dragging {
  cursor: grabbing;
  animation-play-state: paused;
  z-index: 1000;
  filter: drop-shadow(0 7px 12px rgba(37, 115, 180, .28));
}
.floating-sticker.is-dragging,
.floating-sticker.is-selected { animation-play-state: paused; }
.sticker-edit-mode .floating-sticker.is-selected {
  filter: drop-shadow(0 0 5px rgba(83, 190, 255, .9)) drop-shadow(0 4px 7px rgba(65, 120, 160, .2));
}
.sticker-studio {
  position: fixed;
  left: 50%;
  bottom: 14px;
  transform: translateX(-50%);
  z-index: 1001;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  max-width: calc(100vw - 20px);
  padding: 8px 10px;
  border: 1px solid rgba(255,255,255,.82);
  border-radius: 18px;
  background: linear-gradient(135deg, rgba(245,252,255,.92), rgba(191,231,255,.78));
  box-shadow: 0 8px 28px rgba(40,119,177,.2), inset 0 1px 0 rgba(255,255,255,.95);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  color: #285b7d;
  font: 12px/1.2 inherit;
}
.sticker-studio button {
  border: 1px solid rgba(116,177,214,.48);
  border-radius: 10px;
  padding: 6px 9px;
  color: #285b7d;
  background: linear-gradient(180deg, rgba(255,255,255,.95), rgba(219,242,255,.88));
  box-shadow: 0 2px 5px rgba(58,130,180,.1);
  cursor: pointer;
  white-space: nowrap;
}
.sticker-studio button:hover { background: #fff; }
.sticker-studio button:focus-visible { outline: 2px solid #56baff; outline-offset: 2px; }
#sticker-selected-label {
  max-width: 100px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  opacity: .85;
}
body:not(.sticker-edit-mode) .floating-sticker { cursor: default; }
@media (max-width: 600px) {
  .sticker-studio { bottom: 8px; gap: 4px; padding: 6px; border-radius: 14px; }
  .sticker-studio button { padding: 6px 7px; font-size: 11px; }
  #sticker-selected-label { display: none; }
}

/* ══ PHASE 10 — Collapsible Frutiger Aero sticker management panel ══ */
.sticker-studio {
  display: block;
  width: max-content;
  max-width: calc(100vw - 20px);
  padding: 7px;
}
.sticker-studio-bar {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  flex-wrap: wrap;
}
.sticker-studio-panel {
  width: min(560px, calc(100vw - 34px));
  max-height: min(62vh, 420px);
  overflow: auto;
  padding: 10px 4px 4px;
  color: #285b7d;
}
.sticker-studio-panel[hidden] { display: none; }
.sticker-control-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 7px;
  margin: 5px 0 10px;
  font-size: 12px;
}
.sticker-control-row label,
.sticker-add-form label { font-weight: 700; }
#sticker-opacity { width: 100px; accent-color: #55b8ed; }
#sticker-tab-select,
.sticker-add-form input {
  min-width: 0;
  border: 1px solid rgba(116,177,214,.55);
  border-radius: 9px;
  padding: 7px 9px;
  background: rgba(255,255,255,.88);
  color: #285b7d;
  font: inherit;
}
.sticker-add-form {
  display: grid;
  grid-template-columns: 1fr 1fr auto;
  gap: 7px;
  padding-top: 9px;
  border-top: 1px solid rgba(116,177,214,.3);
}
.sticker-add-form label { grid-column: 1 / -1; }
.sticker-add-form small { grid-column: 1 / -1; opacity: .78; line-height: 1.4; }
.sticker-add-form button {
  border: 1px solid rgba(116,177,214,.48);
  border-radius: 10px;
  padding: 7px 10px;
  color: #285b7d;
  background: linear-gradient(180deg, #fff, #d8f0ff);
  cursor: pointer;
  white-space: nowrap;
}
@media (max-width: 600px) {
  .sticker-studio { left: 8px; right: 8px; bottom: 8px; width: auto; max-width: none; transform: none; }
  .sticker-studio-bar { gap: 4px; }
  .sticker-studio-panel { width: auto; }
  .sticker-add-form { grid-template-columns: 1fr; }
  .sticker-add-form label, .sticker-add-form small { grid-column: auto; }
  #sticker-selected-label { display: inline-block; max-width: 90px; }
}


/* ══ PHASE 11 — Sticker scene presets and quick library ══ */
.sticker-scene-presets,
.sticker-library-row {
  display: flex; align-items: center; flex-wrap: wrap; gap: 7px;
  margin: 7px 0 10px; padding: 8px 0;
  border-bottom: 1px solid rgba(116,177,214,.28);
  color: #285b7d; font-size: 12px;
}
.sticker-scene-presets strong,
.sticker-library-row label { font-weight: 700; margin-right: 2px; }
.sticker-scene-presets button { border-radius: 999px; padding: 6px 10px; }
#sticker-library-select {
  flex: 1 1 180px; min-width: 150px; max-width: 100%;
  border: 1px solid rgba(116,177,214,.55); border-radius: 9px;
  padding: 7px 9px; background: rgba(255,255,255,.9); color: #285b7d; font: inherit;
}
#sticker-library-add { flex: 0 0 auto; }
@media (max-width: 600px) {
  .sticker-scene-presets, .sticker-library-row { align-items: stretch; }
  .sticker-scene-presets strong, .sticker-library-row label { flex-basis: 100%; }
  #sticker-library-select { flex-basis: 100%; }
}

/* 仅海豚图片轻微摆动 */
.dolphin-mascot {
  transform-origin: center bottom;
  animation: dolphin-sway 2s ease-in-out infinite;
}

@keyframes dolphin-sway {
  0%, 100% {
    transform: rotate(-5deg);
  }

  50% {
    transform: rotate(5deg);
  }
}

/* ══════════════════════════════════════
   Frutiger Aero Diary 2.0
   ══════════════════════════════════════ */

/* Diary card */

/* Diary card — seamless connection with header */
.diary-post {
  position: relative;
  min-width: 0;
  padding: 16px;
  overflow: hidden;

  /* 移除内层顶部的圆角和边框 */
  border: 1px solid rgba(255, 255, 255, 0.72);
  border-top: 0;
  border-radius: 0 0 16px 16px;

  background: linear-gradient(
    145deg,
    rgba(255, 255, 255, 0.48),
    rgba(205, 239, 255, 0.22)
  );

  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.35),
    0 5px 18px rgba(66, 157, 215, 0.08);
}

}

/* Author row */
.diary-author {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
  margin-bottom: 16px;
}

.diary-avatar {
  width: 46px;
  height: 46px;
  flex: 0 0 46px;
  display: block;
  object-fit: cover;
  border: 2px solid rgba(255, 255, 255, 0.95);
  border-radius: 50%;
  box-shadow:
    0 2px 8px rgba(50, 145, 200, 0.18),
    inset 0 0 0 1px rgba(95, 190, 235, 0.2);
}

.diary-author-info {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  min-width: 0;
}

.diary-nickname {
  color: var(--text-mid);
  font-size: 13px;
  font-weight: 700;
  line-height: 1.4;
}

.diary-time {
  color: var(--text-light);
  font-size: 10.5px;
  line-height: 1.4;
  font-variant-numeric: tabular-nums;
}

/* Diary text */
.diary-content {
  position: relative;
  z-index: 1;
  min-width: 0;
  overflow-wrap: anywhere;
}

.diary-content p {
  margin: 0 0 14px;
  color: var(--text-mid);
  font-size: 13px;
  line-height: 1.9;
}

/* Image gallery */
.diary-images {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  width: 100%;
  min-width: 0;
  margin-top: 12px;
}

.diary-images.diary-gallery-empty {
  display: none;
}

/* Single image: centered, not stretched */
.diary-images.diary-gallery-single {
  grid-template-columns: minmax(0, 1fr);
}

.diary-gallery-single .diary-image {
  width: 100%;
  max-width: 420px;
  max-height: 460px;
  justify-self: start;
  object-fit: contain;
}

/* Multiple images: responsive grid */
.diary-images.diary-gallery-multiple {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.diary-gallery-multiple .diary-image {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
}

/* Shared image appearance */
.diary-image {
  display: block;
  min-width: 0;
  height: auto;
  max-width: 100%;
  border: 1px solid rgba(255, 255, 255, 0.9);
  border-radius: 12px;
  background: rgba(190, 232, 250, 0.18);
  box-shadow:
    0 3px 10px rgba(52, 140, 195, 0.12),
    inset 0 1px 0 rgba(255, 255, 255, 0.75);
  cursor: zoom-in;
  transition:
    transform 0.22s ease,
    box-shadow 0.22s ease;
}

.diary-image[hidden] {
  display: none !important;
}

.diary-image:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(52, 140, 195, 0.2);
}

/* Decorative bubble */
.diary-thumb {
  pointer-events: none;
}

/* ══ Mobile layout ══ */
@media (max-width: 600px) {
  .diary-post {
    padding: 12px;
    border-radius: 0 0 13px 13px;
  }
}

  .diary-author {
    gap: 10px;
    margin-bottom: 12px;
  }

  .diary-avatar {
    width: 42px;
    height: 42px;
    flex-basis: 42px;
  }

  .diary-content p {
    font-size: 12.5px;
    line-height: 1.85;
  }

  .diary-images {
    gap: 7px;
    margin-top: 10px;
  }

  .diary-gallery-single .diary-image {
    max-width: 100%;
    max-height: 360px;
  }

  .diary-gallery-multiple .diary-image {
    aspect-ratio: 1 / 1;
  }
}

/* Reduce motion for users who prefer it */
@media (prefers-reduced-motion: reduce) {
  .diary-image {
    transition: none;
  }
}/* ══ Sidebar Subtitle · Frutiger Aero Glow ══ */

.sb-sub.frutiger-glow-text {
  color: #236B9A;
  text-shadow:
    0 1px 1px rgba(255, 255, 255, 0.45),
    0 0 5px rgba(72, 201, 232, 0.18);
  letter-spacing: 0.5px;
}/* ══ Friends Intro · Frutiger Aero Glow ══ */

.friends-intro {
  color: #236B9A;
  font-style: italic;
  text-shadow:
    0 1px 1px rgba(255, 255, 255, 0.45),
    0 0 5px rgba(72, 201, 232, 0.18);
  letter-spacing: 0.5px;
}