/*   状态栏本体不动：不修改 .status-bar / .status-right* 的高度、位置、图标或 padding。
*/
:root {
  --pad: clamp(18px, 5.2vw, 30px);
  --dock-bottom: max(14px, env(safe-area-inset-bottom));
  --dock-h: 92px;
  --grid-gap: 20px;
  --grid-cell: calc((100vw - (var(--pad) * 2) - (var(--grid-gap) * 3)) / 4);
  --grid-2h: clamp(134px, calc(var(--grid-cell) * 2 + var(--grid-gap)), 178px);
  --input-bar-size: clamp(50px, 14vw, 58px);
  --dock-app-size: var(--input-bar-size);
  --grid-app-size: var(--input-bar-size);
  --app-glyph-ratio: .50;
  --dock-glyph-ratio: .50;
  --ink: #121212;
  --muted: #7c7c7c;
  --card: rgba(244,244,244,.82);
  --card2: rgba(236,236,236,.72);
  --icon-fill:#fbfbfb;
  --icon-glyph:#8f8f8f;
}
* { box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
html,body { width:100%; height:100%; margin:0; overflow:hidden; background:#d6d6d6; color:var(--ink); font-family:-apple-system,BlinkMacSystemFont,"SF Pro Display","Inter","Helvetica Neue",Arial,sans-serif; }
button { border:0; background:none; color:inherit; font:inherit; padding:0; }
.phone-desktop { position:relative; width:100vw; height:100dvh; overflow:hidden; background-color:#d6d6d6; background-image:radial-gradient(circle, rgba(255,255,255,.94) 0 3.4px, transparent 3.7px); background-size:23px 23px; background-position:0 0; }
/* 顶部内容区只避让状态栏自身 50px：不使用 safe-area，不修改状态栏本体。 */
.viewport { position:absolute; inset:0; padding-top:var(--Kirishima-status-h); padding-bottom:calc(var(--dock-h) + var(--dock-bottom) + 58px); overflow:hidden; }
.pages { width:100%; height:100%; display:flex; overflow-x:auto; overflow-y:hidden; scroll-snap-type:x mandatory; scroll-behavior:smooth; scrollbar-width:none; -webkit-overflow-scrolling:touch; touch-action:pan-x; }
.pages::-webkit-scrollbar { display:none; }
.pages.is-manual-swiping { scroll-snap-type:none; scroll-behavior:auto; }
.page { flex:0 0 100%; width:100%; height:100%; scroll-snap-align:start; overflow-y:hidden; overflow-x:hidden; padding:0 var(--pad) 16px; scrollbar-width:none; }
.page::-webkit-scrollbar { display:none; }
.stack { width:min(100%, 650px); margin:0 auto; display:flex; flex-direction:column; gap:var(--grid-gap); }
.widget { border-radius:29px; background:linear-gradient(180deg, rgba(250,250,250,.92), rgba(239,239,239,.78)); box-shadow:0 10px 26px rgba(0,0,0,.03); backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px); }
/* Grid plan for the next movable layout: full widgets = 4×2, half widgets = 2×2; app-grid restores the 2×2 reference spacing, with app cards matching Dock icon size. */
.date-quote,.record-card,.wide-music,.polaroid-widget { height:var(--grid-2h); }
.quote-card,.weather-card { height:var(--grid-2h); }
.two-col { display:grid; grid-template-columns:1fr 1fr; gap:var(--grid-gap); align-items:start; }
.two-col > div { min-width:0; }
.date-quote { display:grid; grid-template-columns:.9fr 1px 1.1fr; align-items:center; padding:18px 30px; }
/* 修改④：第二页上方日期组件，月份与星期/日期文字统一按 50% 中心线对齐 */
.date-big { position:relative; text-align:center; min-width:0; display:flex; flex-direction:column; align-items:center; justify-content:center; }
.date-num { font-size:clamp(70px, 19vw, 86px); line-height:.78; letter-spacing:-.09em; color:#b5b5b5; font-weight:820; text-align:center; }
.date-month { position:absolute; top:34px; left:50%; transform:translateX(-50%); font-size:clamp(25px, 7vw, 30px); line-height:1; font-weight:760; letter-spacing:-.05em; white-space:nowrap; text-align:center; }
.date-day { width:100%; font-size:clamp(21px, 6vw, 25px); line-height:1; margin-top:9px; letter-spacing:-.04em; font-weight:400; text-align:center; }
.divider { width:1.5px; height:68%; min-height:72px; background:#1b1b1b; justify-self:center; }
.quote-list { font-size:clamp(12px, 3.3vw, 14px); line-height:1.18; padding-left:22px; color:#292929; overflow-wrap:anywhere; }
.quote-card { position:relative; border-radius:26px; padding:18px 20px 19px; display:flex; flex-direction:column; justify-content:flex-end; color:#686868; font-size:clamp(12px, 3.25vw, 14px); line-height:1.52; letter-spacing:-.035em; overflow:hidden; }
.quote-mark { position:absolute; top:16px; left:20px; font-size:34px; line-height:.72; font-weight:800; color:#8b8b8b; margin:0; }
.quote-lines { width:100%; }
.quote-lines div { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.quote-lines div:nth-child(2) { color:#b9b9b9; }
.app-grid { height:var(--grid-2h); display:grid; grid-template-columns:repeat(2, var(--grid-app-size)); grid-template-rows:repeat(2, calc(var(--grid-app-size) + 17px)); align-content:space-between; justify-content:start; align-items:start; justify-items:center; column-gap:clamp(22px, 6.8vw, 30px); padding-left:clamp(10px, 3.8vw, 18px); min-width:0; }
.app-tile { position:relative; width:var(--grid-app-size); height:calc(var(--grid-app-size) + 17px); min-height:0; display:flex; flex-direction:column; align-items:center; justify-content:flex-start; gap:4px; overflow:visible; }
.app-icon { position:relative; inset:auto; width:var(--grid-app-size); height:var(--grid-app-size); border-radius:calc(var(--grid-app-size) * .30); background:var(--icon-fill); opacity:1; box-shadow:0 8px 16px rgba(0,0,0,.035); display:grid; place-items:center; flex:0 0 auto; }
.dock-app { width:var(--dock-app-size); height:var(--dock-app-size); border-radius:calc(var(--dock-app-size) * .30); background:var(--icon-fill); opacity:1; box-shadow:0 8px 16px rgba(0,0,0,.035); display:grid; place-items:center; flex:0 0 auto; }
.app-glyph { width:calc(var(--grid-app-size) * var(--glyph-ratio, var(--app-glyph-ratio))); height:calc(var(--grid-app-size) * var(--glyph-ratio, var(--app-glyph-ratio))); color:var(--icon-glyph); display:grid; place-items:center; }
.app-glyph svg { width:100%; height:100%; fill:currentColor; display:block; overflow:visible; }
.dock-glyph { width:calc(var(--dock-app-size) * var(--glyph-ratio, var(--dock-glyph-ratio))); height:calc(var(--dock-app-size) * var(--glyph-ratio, var(--dock-glyph-ratio))); color:var(--icon-glyph); display:grid; place-items:center; }
.dock-glyph svg { width:100%; height:100%; fill:currentColor; display:block; overflow:visible; }
.app-tile[aria-label="档案"] .app-glyph { --glyph-ratio:.455; }
.app-tile[aria-label="微信"] .app-glyph { --glyph-ratio:.515; }
.app-tile[aria-label="购物"] .app-glyph { --glyph-ratio:.545; }
.dock-app[aria-label="游戏"] .dock-glyph { --glyph-ratio:.585; }
.dock-app[aria-label="邂逅"] .dock-glyph { --glyph-ratio:.42; transform:translate(-1px, -3px); }
.app-tile[aria-label="抖音"] .app-glyph { --glyph-ratio:.47; transform:translate(1.5px, -1.8px); }
.app-tile[aria-label="沉沦"] .app-glyph { --glyph-ratio:.47; }
.app-name { position:static; z-index:1; display:block; width:calc(var(--grid-app-size) + 12px); height:auto; padding:0; text-align:center; font-size:clamp(9px, 2.25vw, 10px); line-height:1.08; font-weight:500; letter-spacing:0; color:#111; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; overflow-wrap:normal; word-break:keep-all; }
.wide-music { padding:22px 28px 18px; display:grid; grid-template-columns:minmax(0,1fr) clamp(48px, 14vw, 56px); gap:14px; position:relative; align-items:start; }
.wm-title { font-size:clamp(20px, 6vw, 24px); line-height:1.05; font-weight:700; letter-spacing:-.04em; margin-top:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.wm-artist { margin-top:8px; font-size:clamp(15px, 4.6vw, 19px); line-height:1.1; color:#626262; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.wm-more { font-size:24px; line-height:1; font-weight:700; letter-spacing:.08em; margin-top:5px; }
.album { align-self:start; justify-self:end; width:clamp(48px, 14vw, 56px); height:clamp(48px, 14vw, 56px); border-radius:7px; background:#e7e7e7; box-shadow:none; position:relative; overflow:hidden; }
.player-line { position:absolute; left:28px; right:28px; bottom:47px; }
.track-meta { display:flex; justify-content:space-between; font-size:13px; color:#111; margin-bottom:4px; }
.bar { height:5px; background:#d4d4d4; border-radius:999px; overflow:hidden; }
.bar span { display:block; height:100%; width:33%; border-radius:999px; background:#050505; }
.controls { position:absolute; left:28px; right:28px; bottom:16px; display:flex; justify-content:space-between; align-items:center; gap:13px; }
.ctrl { width:20px; height:20px; display:grid; place-items:center; color:#060606; }
.ctrl svg { width:100%; height:100%; fill:currentColor; }
.ctrl.play { width:23px; height:23px; }
.ctrl[data-player-toggle="true"] { cursor:pointer; touch-action:manipulation; user-select:none; -webkit-user-select:none; }
/* 修改③：第一页上方音乐组件。
   精确口径：黑胶不是“整个组件居中”，而是在左侧唱片栏内水平居中。
   修正点：黑胶使用绝对定位 top:50% + translateY(-50%)，确保在 record-card 内部垂直居中。
   右侧歌名/歌词固定在第二栏，不被黑胶覆盖。 */
.record-card {
  --record-card-px:28px;
  --record-card-gap:20px;
  --record-left-ratio:.46;
  display:grid;
  grid-template-columns:.92fr 1.08fr;
  gap:var(--record-card-gap);
  padding:22px var(--record-card-px);
  align-items:center;
  position:relative;
  overflow:hidden;
}
.headphone { position:absolute; top:16px; left:16px; width:17px; height:17px; color:#090909; z-index:3; }
.headphone svg { width:100%; height:100%; fill:currentColor; }
.record {
  width:clamp(110px, 36vw, 150px);
  height:clamp(110px, 36vw, 150px);
  border-radius:50%;
  position:absolute;
  left:calc(var(--record-card-px) + ((100% - (var(--record-card-px) * 2) - var(--record-card-gap)) * var(--record-left-ratio) / 2));
  top:50%;
  transform:translate(-50%, -50%);
  z-index:1;
  background:radial-gradient(circle at 50% 50%,#efefef 0 29%,#d8d8d8 30% 36%,#0b0b0b 37% 42%,#1d1d1d 43% 48%,#050505 49% 70%,#151515 71% 100%);
  box-shadow:inset 0 0 18px rgba(255,255,255,.2), 0 12px 18px rgba(0,0,0,.06);
  overflow:hidden;
}
.record:before { content:""; position:absolute; inset:32%; border-radius:50%; background:radial-gradient(circle,#f4f4f4 0 45%,#d5d5d5 46% 100%); opacity:.92; }
.record:after { content:""; position:absolute; left:50%; top:50%; width:38%; height:38%; transform:translate(-50%,-50%) rotate(-10deg); background:#5d5d5d; clip-path:polygon(50% 0,61% 35%,98% 35%,68% 56%,79% 91%,50% 69%,21% 91%,32% 56%,2% 35%,39% 35%); }
.record-lines { position:absolute; inset:0; border-radius:50%; background:repeating-radial-gradient(circle at 50% 50%, transparent 0 5px, rgba(255,255,255,.08) 5.5px 6px); }
/* 修改③补充：右侧文案层恢复正常网格流，只保证不挤压唱片，不做绝对覆盖。 */
.record-copy { min-width:0; grid-column:2; grid-row:1; position:relative; z-index:2; }
.rc-title-row { display:flex; align-items:center; gap:10px; margin-bottom:13px; min-width:0; }
.song-title { font-size:clamp(14px, 4vw, 16px); line-height:1; font-weight:700; letter-spacing:-.03em; white-space:nowrap; }
.song-artist { font-size:clamp(13px, 3.8vw, 16px); line-height:1; white-space:nowrap; color:#151515; overflow:hidden; text-overflow:ellipsis; }
.lyrics { font-size:clamp(11px, 3.3vw, 14px); line-height:1.2; max-height:48px; max-width:230px; overflow:hidden; overflow-wrap:anywhere; }
.short-progress { width:100%; max-width:215px; height:2px; background:#d6d6d6; margin-top:15px; position:relative; }
.short-progress:before { content:""; position:absolute; inset:0 auto 0 0; width:73%; background:#151515; }
.time-row { width:100%; max-width:215px; display:flex; justify-content:space-between; color:#8a8a8a; font-size:12px; margin-top:5px; }
.mini-controls { width:min(150px, 100%); margin-top:8px; display:flex; align-items:center; justify-content:space-between; }
.mini-controls span { width:18px; height:18px; display:grid; place-items:center; }
.mini-controls svg { width:100%; height:100%; fill:#000; }
.play-dot { width:27px !important; height:27px !important; border-radius:50%; background:#000; padding:7px; }
.play-dot svg { fill:#fff; }
.polaroid-widget { display:flex; align-items:center; justify-content:center; padding:18px 20px; overflow:hidden; }
.photos { position:relative; width:100%; height:calc(var(--grid-2h) - 36px); max-width:560px; transform:scale(1.08); transform-origin:center center; }
.photo { position:absolute; width:clamp(62px, 20vw, 82px); height:clamp(84px, 26vw, 108px); background:#f9f9f9; border:0; box-shadow:0 4px 9px rgba(0,0,0,.06); padding:6px 6px 18px; }
.pic { height:100%; background:#e7e7e7; border-radius:2px; }
.cap { position:absolute; left:7px; right:7px; bottom:6px; font-family:Georgia,serif; font-size:clamp(8px, 2.15vw, 9px); font-style:italic; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.p1 { left:0; top:8%; transform:rotate(-.5deg); z-index:1; } .p2 { left:25%; top:25%; transform:rotate(.4deg); z-index:2; } .p3 { left:50%; top:4%; transform:rotate(-.2deg); z-index:4; } .p4 { right:0; top:23%; transform:rotate(.8deg); z-index:3; }
.weather-card { position:relative; border-radius:26px; padding:0; display:block; color:#858585; overflow:hidden; }
.weather-card { cursor:pointer; }
.weather-card.is-loading .weather-temp,.weather-card.is-loading .weather-bottom { opacity:.72; }
.weather-date { position:absolute; left:clamp(18px, 5vw, 24px); top:clamp(18px, 5vw, 24px); font-weight:600; color:#858585; letter-spacing:-.06em; text-align:left; }
.weather-month { font-size:clamp(23px, 6.0vw, 28px); line-height:1; white-space:nowrap; }
.weather-day { margin-top:clamp(4px, 1.2vw, 7px); font-size:clamp(39px, 10.4vw, 49px); line-height:.88; }
.weather-temp { position:absolute; left:46%; top:clamp(24px, 6vw, 31px); font-size:clamp(9.5px, 2.65vw, 12.5px); line-height:1.72; font-weight:500; text-align:left; white-space:nowrap; }
.weather-bottom { position:absolute; left:clamp(18px, 5vw, 24px); bottom:clamp(15px, 4.2vw, 21px); font-size:clamp(10.5px, 2.95vw, 13.5px); line-height:1.52; font-weight:600; text-align:left; white-space:nowrap; }
.page-bottom-ui { position:absolute; z-index:8; left:50%; transform:translateX(-50%); bottom:calc(var(--dock-h) + var(--dock-bottom) + 10px); min-height:34px; display:grid; place-items:center; pointer-events:auto; }
.dots { height:34px; min-width:74px; border-radius:999px; background:transparent; display:flex; align-items:center; justify-content:center; gap:9px; pointer-events:auto; }
.dot { width:8px; height:8px; border-radius:50%; background:#fff; box-shadow:0 1px 4px rgba(0,0,0,.08); transition:width .22s, background .22s; }
.dot.active { width:22px; border-radius:999px; background:#fff; }
.dock { position:absolute; z-index:9; left:var(--pad); right:var(--pad); bottom:var(--dock-bottom); height:var(--dock-h); border-radius:34px; background:rgba(225,225,225,.86); box-shadow:0 12px 30px rgba(0,0,0,.05); display:grid; grid-template-columns:repeat(4,1fr); align-items:center; justify-items:center; padding:0 clamp(16px,4vw,30px); backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px); }
.dock-name { display:none; }
@media (max-width:420px) {
  :root { --pad:22px; --dock-h:88px; }
  .widget { border-radius:27px; }
  .date-quote { padding:16px 23px; }
  .two-col { gap:var(--grid-gap); }
  .wide-music { padding:20px 21px 16px; grid-template-columns:minmax(0,1fr) clamp(48px, 14vw, 54px); gap:12px; }
  .player-line { left:21px; right:21px; bottom:45px; }
  .controls { left:21px; right:21px; bottom:15px; }
  .record-card { --record-card-px:23px; --record-card-gap:16px; padding:20px var(--record-card-px); gap:var(--record-card-gap); }
  .headphone { top:16px; left:16px; }
  .polaroid-widget { padding:15px 14px; }
  .weather-card { padding:15px 16px; }
  .dock { height:88px; border-radius:32px; }
}
@media (max-height:760px) {
  :root { --dock-h:82px; --grid-2h:134px; --input-bar-size:50px; --dock-app-size:var(--input-bar-size); --grid-app-size:var(--input-bar-size); }
  .viewport { padding-bottom:calc(var(--dock-h) + var(--dock-bottom) + 48px); }
  .page-bottom-ui { bottom:calc(var(--dock-h) + var(--dock-bottom) + 8px); }
  .dock { height:82px; border-radius:30px; }
  .record-card { padding-top:18px; padding-bottom:18px; }
  .record { width:110px; height:110px; }
  .polaroid-widget { padding-top:13px; padding-bottom:13px; }
}



/* layout move / infinite pages: rebuilt from clean desktop data, not from captured DOM fallback */
:root { --layout-row: max(calc(var(--grid-app-size) + 17px), calc((var(--grid-2h) - var(--grid-gap)) / 2)); }
.phone-desktop.is-editing { cursor:grabbing; }
.stack.is-layout-grid {
  --layout-rows:6;
  width:min(100%, 650px);
  margin:0 auto;
  display:grid;
  grid-template-columns:repeat(4, minmax(0, 1fr));
  grid-template-rows:repeat(var(--layout-rows), var(--layout-row));
  gap:var(--grid-gap);
  min-height:calc((var(--layout-row) * var(--layout-rows)) + (var(--grid-gap) * (var(--layout-rows) - 1)));
  align-items:stretch;
}
.desktop-item {
  min-width:0;
  min-height:0;
  position:relative;
  display:flex;
  align-items:stretch;
  justify-content:stretch;
  user-select:none;
  -webkit-user-select:none;
  touch-action:none;
  -webkit-user-drag:none;
  transition:filter .18s ease, opacity .18s ease;
}
.desktop-item > .widget,
.desktop-item > .app-tile,
.desktop-item > .date-quote,
.desktop-item > .record-card,
.desktop-item > .wide-music,
.desktop-item > .polaroid-widget,
.desktop-item > .quote-card,
.desktop-item > .weather-card {
  width:100%;
  height:100%;
}
.desktop-item > .app-tile {
  align-self:start;
  justify-self:center;
  margin:0 auto;
  height:calc(var(--grid-app-size) + 17px);
  touch-action:none;
}
.desktop-item.is-drag-source {
  opacity:1;
  filter:none;
}
.desktop-drag-clone {
  position:fixed !important;
  left:0;
  top:0;
  margin:0;
  z-index:70;
  pointer-events:none;
  opacity:.98;
  filter:drop-shadow(0 18px 24px rgba(0,0,0,.13));
  transition:none !important;
  will-change:transform;
}
.desktop-drag-clone * {
  pointer-events:none !important;
}
.phone-desktop.is-editing .desktop-item:not(.desktop-drag-clone) {
  cursor:grab;
}
.phone-desktop.is-editing .desktop-item:not(.desktop-drag-clone)::after {
  content:none;
  display:none;
}
.dock {
  --dock-count:4;
  --dock-slot:clamp(56px, 15.5vw, 70px);
  left:50%;
  right:auto;
  width:auto;
  max-width:calc(100vw - (var(--pad) * 2));
  min-width:0;
  height:var(--dock-h);
  transform:translateX(-50%);
  display:grid;
  grid-template-columns:repeat(var(--dock-count), var(--dock-slot));
  gap:clamp(10px, 3vw, 18px);
  justify-content:center;
  padding:0 clamp(14px, 4vw, 24px);
  transition:opacity .18s ease, transform .18s ease, width .18s ease;
}
.dock.is-empty {
  opacity:0;
  transform:translateX(-50%) translateY(calc(100% + 22px));
  pointer-events:none;
}
.phone-desktop.is-dock-target .dock {
  --dock-count:4;
  opacity:1;
  transform:translateX(-50%) translateY(0);
  pointer-events:auto;
}
.dock-app {
  user-select:none;
  -webkit-user-select:none;
  touch-action:none;
  -webkit-user-drag:none;
}
.dock-app.is-drag-source {
  opacity:.45;
}
.desktop-item > .dock-app {
  width:var(--grid-app-size);
  height:calc(var(--grid-app-size) + 17px);
  min-height:0;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:flex-start;
  gap:4px;
  background:transparent;
  box-shadow:none;
  border-radius:0;
  margin:0 auto;
  overflow:visible;
}
.desktop-item > .dock-app .dock-glyph {
  width:var(--grid-app-size);
  height:var(--grid-app-size);
  border-radius:calc(var(--grid-app-size) * .30);
  background:var(--icon-fill);
  opacity:1;
  box-shadow:0 8px 16px rgba(0,0,0,.035);
  color:var(--icon-glyph);
  display:grid;
  place-items:center;
  flex:0 0 auto;
}
.desktop-item > .dock-app .dock-glyph svg {
  width:calc(var(--grid-app-size) * var(--glyph-ratio, var(--app-glyph-ratio)));
  height:calc(var(--grid-app-size) * var(--glyph-ratio, var(--app-glyph-ratio)));
}
.desktop-item > .dock-app .dock-name {
  display:block;
  width:calc(var(--grid-app-size) + 12px);
  text-align:center;
  font-size:clamp(9px, 2.25vw, 10px);
  line-height:1.08;
  font-weight:500;
  letter-spacing:0;
  color:#111;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  overflow-wrap:normal;
  word-break:keep-all;
}
.edit-done {
  position:absolute;
  z-index:60;
  right:var(--pad);
  top:max(12px, env(safe-area-inset-top));
  height:34px;
  padding:0 17px;
  border-radius:999px;
  background:rgba(255,255,255,.82);
  box-shadow:0 8px 20px rgba(0,0,0,.08);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  font-size:16px;
  font-weight:650;
  opacity:0;
  transform:translateY(-8px);
  pointer-events:none;
  transition:opacity .18s ease, transform .18s ease;
}
.phone-desktop.is-editing .edit-done {
  opacity:1;
  transform:translateY(0);
  pointer-events:auto;
}


/* Component image slots + popup copy editor: source-level add; status bar keeps fixed 50px, no extra top gap */
.pic,
.album {
  background-color:#e7e7e7;
  background-image:none;
  background-size:cover;
  background-position:center center;
  background-repeat:no-repeat;
  cursor:pointer;
}
.pic.is-custom-image,
.album.is-custom-image {
  background-color:#e7e7e7;
}
.component-copy-editable {
  cursor:text;
}
.time-row,
.track-meta,
.short-progress,
.player-line,
.player-line .bar,
.player-line .track-meta span,
.time-row span {
  cursor:default;
  -webkit-user-select:none;
  user-select:none;
}
.component-edit-mask {
  position:fixed;
  inset:0;
  z-index:120;
  display:none;
  align-items:flex-end;
  justify-content:center;
  padding:0 18px max(18px, env(safe-area-inset-bottom));
  background:rgba(0,0,0,.18);
  backdrop-filter:blur(7px);
  -webkit-backdrop-filter:blur(7px);
}
.component-edit-mask.is-open {
  display:flex;
}
.component-edit-sheet {
  width:min(100%, 430px);
  border-radius:24px;
  background:rgba(248,248,248,.94);
  box-shadow:0 20px 52px rgba(0,0,0,.16);
  padding:16px 16px 14px;
  color:#111;
}
.component-edit-title {
  margin:0 0 12px;
  font-size:15px;
  line-height:1.2;
  font-weight:700;
  letter-spacing:-.035em;
  text-align:center;
}
.component-edit-field {
  width:100%;
  min-height:46px;
  max-height:132px;
  resize:none;
  border:0;
  outline:none;
  border-radius:17px;
  background:rgba(232,232,232,.88);
  padding:13px 14px;
  color:#111;
  font:500 15px/1.35 -apple-system,BlinkMacSystemFont,"SF Pro Display","Inter","Helvetica Neue",Arial,sans-serif;
  letter-spacing:-.025em;
  overflow:auto;
}
.component-edit-actions {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px;
  margin-top:12px;
}
.component-edit-btn {
  height:42px;
  border-radius:999px;
  background:rgba(232,232,232,.86);
  font-size:14px;
  font-weight:650;
  letter-spacing:-.03em;
}
.component-edit-btn[data-action="save"] {
  background:#111;
  color:#fff;
}
.component-hidden-file {
  position:fixed;
  left:-9999px;
  top:auto;
  width:1px;
  height:1px;
  opacity:0;
  pointer-events:none;
}
:root { --Kirishima-status-h:50px; }
.status-bar {
  position:absolute;
  top:max(0px, env(safe-area-inset-top));
  left:0;
  right:0;
  height:var(--Kirishima-status-h);
  z-index:70;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:0 34px;
  color:var(--ink);
  font-size:19px;
  font-weight:600;
  line-height:1;
  pointer-events:none;
  user-select:none;
  -webkit-user-select:none;
}
.status-bar .time {
  min-width:60px;
  font-size:20px;
  font-weight:650;
  letter-spacing:.015em;
  text-align:left;
  font-variant-numeric:tabular-nums;
}
.status-right {
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:9px;
  min-width:120px;
}
.Kirishima-signal {
  width:24px;
  height:16px;
  display:block;
  color:currentColor;
  flex:0 0 auto;
}
.Kirishima-network {
  margin-left:-4px;
  font-size:19px;
  font-weight:650;
  line-height:1;
  letter-spacing:-.025em;
}
.Kirishima-battery {
  position:relative;
  width:35px;
  height:16px;
  margin-left:-4px;
  flex:0 0 auto;
}
.Kirishima-battery-shell {
  position:relative;
  width:30px;
  height:16px;
  border-radius:5px;
  overflow:hidden;
  background:#A9A9A9;
}
.Kirishima-battery-level {
  position:absolute;
  left:0;
  top:0;
  bottom:0;
  width:80%;
  background:currentColor;
}
.Kirishima-battery-num {
  position:absolute;
  inset:0;
  z-index:1;
  display:flex;
  align-items:center;
  justify-content:center;
  color:#fff;
  font-size:16px;
  font-weight:800;
  line-height:1;
  letter-spacing:-.08em;
  font-variant-numeric:tabular-nums;
}
.Kirishima-battery-cap {
  position:absolute;
  left:31px;
  top:50%;
  width:3px;
  height:5px;
  transform:translateY(-50%);
  border-radius:0 999px 999px 0;
  background:#A9A9A9;
}
@media (max-width:420px) {
  .status-bar { padding:0 30px; }
}
@media (max-height:760px) {
  :root { --Kirishima-status-h:50px; }
}

/* ===== Kirishima WeChat independent page: source-level standalone app page ===== */
.kw-app {
  position:fixed;
  inset:0;
  z-index:220;
  display:flex;
  flex-direction:column;
  background:#f7f7f5;
  color:#171717;
  opacity:0;
  pointer-events:none;
  transform:translateY(12px);
  transition:opacity .22s ease, transform .22s ease;
  font-family:-apple-system,BlinkMacSystemFont,"SF Pro Display","Inter","Helvetica Neue",Arial,sans-serif;
}
.kw-app.is-open {
  opacity:1;
  pointer-events:auto;
  transform:translateY(0);
}
.kw-app,
.kw-app * {
  box-sizing:border-box;
  -webkit-tap-highlight-color:transparent;
}
.kw-app button {
  border:0;
  padding:0;
  margin:0;
  background:transparent;
  color:inherit;
  font:inherit;
}
.kw-toolbar {
  position:absolute;
  top:max(14px, env(safe-area-inset-top));
  right:18px;
  z-index:6;
  height:36px;
  display:flex;
  align-items:center;
  justify-content:flex-end;
}
.kw-toolbar-pill {
  height:36px;
  min-width:82px;
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:6px;
  padding:4px;
  border-radius:999px;
  background:rgba(255,255,255,.82);
  box-shadow:0 8px 20px rgba(0,0,0,.06), inset 0 0 0 1px rgba(0,0,0,.045);
  backdrop-filter:blur(16px);
  -webkit-backdrop-filter:blur(16px);
}
.kw-toolbar-dot {
  width:28px;
  height:28px;
  border-radius:50%;
  display:grid;
  place-items:center;
  background:rgba(246,246,244,.96);
  color:#8f8f8c;
}
.kw-close {
  width:28px;
  height:28px;
  border-radius:50%;
  display:grid;
  place-items:center;
  background:#171717;
  color:#fff;
  box-shadow:0 7px 14px rgba(0,0,0,.12);
}
.kw-toolbar svg,
.kw-tabs svg,
.kw-icon svg,
.kw-search-round svg,
.kw-add-ring svg,
.kw-badge svg {
  display:block;
  width:100%;
  height:100%;
  fill:currentColor;
}
.kw-close svg {
  width:13px;
  height:13px;
  stroke:currentColor;
  stroke-width:2.25;
  stroke-linecap:round;
  fill:none;
}
.kw-toolbar-dot svg {
  width:16px;
  height:16px;
}
.kw-content {
  flex:1;
  min-height:0;
  overflow:hidden;
  position:relative;
}
.kw-panel {
  position:absolute;
  inset:0;
  overflow-y:auto;
  padding:calc(max(56px, env(safe-area-inset-top)) + 18px) 22px calc(104px + env(safe-area-inset-bottom));
  opacity:0;
  pointer-events:none;
  transform:translateX(10px);
  transition:opacity .18s ease, transform .18s ease;
  scrollbar-width:none;
  -webkit-overflow-scrolling:touch;
}
.kw-panel::-webkit-scrollbar { display:none; }
.kw-panel.is-active {
  opacity:1;
  pointer-events:auto;
  transform:translateX(0);
}
.kw-tabs-wrap {
  position:absolute;
  left:0;
  right:0;
  bottom:max(12px, env(safe-area-inset-bottom));
  z-index:7;
  display:flex;
  justify-content:center;
  pointer-events:none;
  padding:0 18px;
}
.kw-tabs {
  width:min(100%, 430px);
  min-height:72px;
  border-radius:999px;
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  align-items:center;
  padding:7px 9px;
  background:rgba(255,255,255,.84);
  box-shadow:0 18px 44px rgba(0,0,0,.10), inset 0 0 0 1px rgba(0,0,0,.04);
  backdrop-filter:blur(20px) saturate(1.25);
  -webkit-backdrop-filter:blur(20px) saturate(1.25);
  pointer-events:auto;
}
.kw-tab {
  min-width:0;
  height:58px;
  border-radius:999px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:3px;
  color:#9c9c98;
  font-size:10.5px;
  line-height:1;
  font-weight:620;
  letter-spacing:-.02em;
}
.kw-tab.is-active {
  color:#171717;
  background:rgba(242,242,240,.92);
}
.kw-tab-ico {
  width:23px;
  height:23px;
  display:grid;
  place-items:center;
}
.kw-avatar {
  position:relative;
  border-radius:50%;
  background:
    radial-gradient(circle at 34% 28%, rgba(255,255,255,.88) 0 11%, transparent 12%),
    linear-gradient(145deg, #dbdbd8 0%, #f7f7f4 48%, #c9c9c5 100%);
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.04), 0 10px 24px rgba(0,0,0,.055);
  overflow:hidden;
  flex:0 0 auto;
}
.kw-avatar::after {
  content:"";
  position:absolute;
  left:50%;
  bottom:10%;
  width:58%;
  height:34%;
  transform:translateX(-50%);
  border-radius:50% 50% 42% 42%;
  background:rgba(196,196,190,.78);
}
.kw-avatar::before {
  content:"";
  position:absolute;
  left:50%;
  top:21%;
  width:30%;
  height:30%;
  transform:translateX(-50%);
  border-radius:50%;
  background:rgba(182,182,176,.82);
  z-index:1;
}
.kw-avatar-main { width:76px; height:76px; margin:0 auto; }
.kw-avatar-small { width:56px; height:56px; }
.kw-avatar-big { width:88px; height:88px; }
.kw-profile-head {
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
}
.kw-name-row {
  margin-top:12px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:5px;
  font-size:21px;
  line-height:1.1;
  font-weight:780;
  letter-spacing:-.045em;
}
.kw-badge {
  width:17px;
  height:17px;
  color:#171717;
  display:inline-grid;
  place-items:center;
}
.kw-id {
  margin-top:6px;
  color:#8a8a86;
  font-size:12px;
  line-height:1.2;
  font-weight:520;
  letter-spacing:.01em;
}
.kw-bio-card {
  position:relative;
  margin:22px auto 18px;
  max-width:330px;
  min-height:62px;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:16px 20px;
  border-radius:18px;
  background:#ededeb;
  color:#5f5f5c;
  font-size:14px;
  line-height:1.35;
  font-weight:560;
  letter-spacing:-.02em;
  text-align:center;
}
.kw-bio-card::before {
  content:"";
  position:absolute;
  left:50%;
  top:-8px;
  width:16px;
  height:16px;
  transform:translateX(-50%) rotate(45deg);
  border-radius:3px 0 0 0;
  background:#ededeb;
}
.kw-filter-line {
  width:min(100%, 390px);
  margin:0 auto 22px;
  display:grid;
  grid-template-columns:44px minmax(0,1fr);
  gap:10px;
  align-items:center;
}
.kw-search-round {
  width:44px;
  height:44px;
  border-radius:50%;
  display:grid;
  place-items:center;
  background:#fff;
  color:#999995;
  box-shadow:0 8px 18px rgba(0,0,0,.045), inset 0 0 0 1px rgba(0,0,0,.035);
}
.kw-search-round svg { width:17px; height:17px; fill:none; stroke:currentColor; stroke-width:2.2; stroke-linecap:round; }
.kw-group-pill {
  min-width:0;
  height:44px;
  border-radius:999px;
  background:#fff;
  display:grid;
  grid-template-columns:repeat(4, minmax(0,1fr));
  align-items:center;
  padding:4px;
  box-shadow:0 8px 18px rgba(0,0,0,.045), inset 0 0 0 1px rgba(0,0,0,.035);
}
.kw-group-pill button {
  min-width:0;
  height:36px;
  border-radius:999px;
  color:#9a9a96;
  font-size:11px;
  line-height:1;
  font-weight:720;
  letter-spacing:-.02em;
  white-space:nowrap;
}
.kw-group-pill button.is-on {
  background:#f0f0ee;
  color:#171717;
}
.kw-empty {
  width:min(100%, 390px);
  margin:0 auto;
  min-height:118px;
  border-radius:22px;
  display:grid;
  place-items:center;
  text-align:center;
  color:#9b9b97;
  background:rgba(255,255,255,.58);
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.035);
  font-size:13px;
  font-weight:620;
  letter-spacing:-.025em;
}
.kw-story-rail {
  display:flex;
  align-items:center;
  justify-content:center;
  gap:18px;
  margin:0 auto 20px;
}
.kw-ring-avatar {
  position:relative;
  width:62px;
  height:62px;
  border-radius:50%;
  display:grid;
  place-items:center;
  background:conic-gradient(from 210deg, #d9d9d6, #fff, #cfcfcc, #f6f6f3, #d9d9d6);
  box-shadow:0 8px 18px rgba(0,0,0,.045);
}
.kw-ring-avatar > .kw-avatar { width:54px; height:54px; }
.kw-add-ring {
  width:62px;
  height:62px;
  border-radius:50%;
  display:grid;
  place-items:center;
  color:#8d8d89;
  background:#fff;
  box-shadow:inset 0 0 0 1.4px #d4d4d1, 0 8px 18px rgba(0,0,0,.04);
}
.kw-add-ring svg {
  width:24px;
  height:24px;
  fill:none;
  stroke:currentColor;
  stroke-width:1.8;
  stroke-linecap:round;
}
.kw-search-bar {
  width:min(100%, 390px);
  height:44px;
  margin:0 auto 22px;
  border-radius:999px;
  background:#fff;
  display:flex;
  align-items:center;
  gap:9px;
  padding:0 16px;
  color:#a0a09c;
  box-shadow:0 8px 18px rgba(0,0,0,.045), inset 0 0 0 1px rgba(0,0,0,.035);
}
.kw-search-bar svg {
  width:16px;
  height:16px;
  fill:none;
  stroke:currentColor;
  stroke-width:2.2;
  stroke-linecap:round;
  flex:0 0 auto;
}
.kw-search-bar span {
  font-size:13px;
  font-weight:560;
  color:#aaa9a5;
}
.kw-section-title {
  width:min(100%, 390px);
  margin:0 auto 13px;
  color:#2a2a28;
  font-size:12px;
  line-height:1;
  font-weight:820;
  letter-spacing:.025em;
}
.kw-alpha-card {
  width:min(100%, 390px);
  margin:0 auto;
  border-radius:20px;
  overflow:hidden;
  background:rgba(255,255,255,.62);
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.035);
}
.kw-alpha-head {
  padding:13px 17px 8px;
  color:#8e8e8a;
  font-size:12px;
  font-weight:760;
}
.kw-alpha-empty {
  padding:22px 17px 26px;
  color:#a0a09c;
  font-size:13px;
  font-weight:560;
  text-align:center;
}
.kw-social-head {
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
  padding-top:4px;
}
.kw-social-head .kw-avatar { width:82px; height:82px; }
.kw-social-name {
  margin-top:13px;
  font-size:22px;
  line-height:1.05;
  font-weight:820;
  letter-spacing:-.05em;
}
.kw-signature {
  margin-top:7px;
  width:min(320px,100%);
  color:#81817d;
  font-size:12px;
  line-height:1.35;
  font-weight:560;
}
.kw-stats {
  margin:20px auto 26px;
  width:min(100%, 330px);
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:8px;
  text-align:center;
}
.kw-stat strong {
  display:block;
  color:#171717;
  font-size:20px;
  line-height:1;
  font-weight:820;
  letter-spacing:-.05em;
}
.kw-stat span {
  display:block;
  margin-top:6px;
  color:#8d8d89;
  font-size:11px;
  line-height:1;
  font-weight:650;
}
.kw-me-top {
  width:min(100%, 390px);
  margin:0 auto 16px;
  display:grid;
  grid-template-columns:88px minmax(0,1fr);
  gap:18px;
  align-items:center;
}
.kw-me-stats {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:4px;
  text-align:center;
}
.kw-me-intro {
  width:min(100%, 390px);
  margin:0 auto 20px;
  text-align:left;
}
.kw-me-name {
  color:#171717;
  font-size:24px;
  line-height:1.05;
  font-weight:840;
  letter-spacing:-.055em;
}
.kw-me-id {
  margin-top:7px;
  color:#8b8b87;
  font-size:12px;
  font-weight:600;
}
.kw-me-sign {
  margin-top:9px;
  color:#5f5f5b;
  font-size:13px;
  line-height:1.35;
  font-weight:560;
}
.kw-day-row {
  width:min(100%, 390px);
  margin:0 auto 18px;
}
.kw-day-label {
  margin-bottom:10px;
  color:#171717;
  font-size:13px;
  font-weight:820;
  letter-spacing:-.02em;
}
.kw-photo-grid {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:8px;
}
.kw-photo-slot {
  aspect-ratio:1 / 1;
  border-radius:0;
  background:#e8e8e6;
}
.kw-menu {
  width:min(100%, 390px);
  margin:0 auto 20px;
  display:grid;
  gap:10px;
}
.kw-menu-row {
  min-height:52px;
  display:flex;
  align-items:center;
  gap:12px;
  padding:0 15px;
  border-radius:18px;
  background:#fff;
  box-shadow:0 8px 18px rgba(0,0,0,.04), inset 0 0 0 1px rgba(0,0,0,.035);
  color:#171717;
  font-size:14px;
  font-weight:690;
  letter-spacing:-.025em;
}
.kw-icon {
  width:28px;
  height:28px;
  border-radius:50%;
  display:grid;
  place-items:center;
  color:#777773;
  background:#f1f1ef;
}
.kw-icon svg {
  width:16px;
  height:16px;
  fill:none;
  stroke:currentColor;
  stroke-width:1.9;
  stroke-linecap:round;
  stroke-linejoin:round;
}
.kw-switch-account {
  width:min(250px, 76%);
  height:46px;
  margin:4px auto 0;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:18px;
  background:#171717;
  color:#fff;
  font-size:14px;
  font-weight:760;
  letter-spacing:-.025em;
  box-shadow:0 10px 22px rgba(0,0,0,.12);
}
@media (max-height:760px) {
  .kw-panel { padding-top:calc(max(50px, env(safe-area-inset-top)) + 12px); }
  .kw-avatar-main { width:68px; height:68px; }
  .kw-bio-card { margin-top:18px; margin-bottom:14px; }
  .kw-tabs { min-height:66px; }
  .kw-tab { height:52px; }
}
@media (max-width:360px) {
  .kw-panel { padding-left:18px; padding-right:18px; }
  .kw-filter-line { grid-template-columns:40px minmax(0,1fr); gap:8px; }
  .kw-search-round,
  .kw-group-pill,
  .kw-search-bar { height:40px; }
  .kw-group-pill button { height:32px; font-size:10px; }
}