:root {
  --black: #0a0a0a;
  --white: #ffffff;
  --pink-pale: #fce8ef;
  --pink-dark: #d985a5;
  --pink-neon: #ff4fa3;
  --font-title: 'Bodoni Moda', serif;
  --font-type: 'Special Elite', monospace;
  --font-jp: 'Noto Serif JP', serif;
  --font-script: 'Pinyon Script', cursive;
  --font-cn: 'PingFang SC', 'Microsoft YaHei', sans-serif;
  --wallpaper: none;
  --ink: #0a0a0a;
  --on-paper: #0a0a0a;
  --on-black: #fce8ef;
  --safe-t: constant(safe-area-inset-top, 0px);
  --safe-t: env(safe-area-inset-top, 0px);
  --safe-b: constant(safe-area-inset-bottom, 0px);
  --safe-b: env(safe-area-inset-bottom, 0px);
  --bar-top: calc(4px + var(--safe-t));
  --bar-bot: calc(52px + var(--safe-b));
  --ios-chrome: var(--pink-pale);
  --s: 1px;
  --ui-x: calc(16 * var(--s));
  --ui-gap: calc(12 * var(--s));
  --ui-card: calc(16 * var(--s));
  --ui-face: calc(56 * var(--s));
  --ui-face-lg: calc(60 * var(--s));
  --ui-title: clamp(18px, calc(24 * var(--s)), 26px);
  --ui-sub: clamp(13px, calc(16 * var(--s)), 18px);
  --ui-name: clamp(14px, calc(16 * var(--s)), 18px);
  --ui-sm: clamp(10px, calc(11 * var(--s)), 12px);
}

* { box-sizing: border-box; margin: 0; padding: 0; -webkit-tap-highlight-color: transparent; }
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  background: var(--ios-chrome);
}
.ios-chrome {
  display: none;
  position: fixed;
  top: 0; left: 0; right: 0;
  height: 4px;
  background: var(--ios-chrome, #fce8ef);
  pointer-events: none;
  z-index: 200;
}
html.ios-chrome-on .ios-chrome { display: block; }
html, body {
  width: 100%;
  height: 100vh;
  overflow: hidden;
}
body {
  background: var(--ios-chrome);
  display: flex;
  justify-content: center;
  align-items: center;
  overscroll-behavior: none;
  -webkit-touch-callout: none;
  font-family: var(--font-cn);
  color: var(--ink);
}

.phone-case {
  position: relative;
  width: min(390px, 100vw);
  height: min(840px, 100dvh);
  background: var(--black);
  border-radius: 24px;
  padding: 8px;
  box-shadow: 0 0 0 2px var(--pink-dark), 0 0 0 4px var(--black), 0 20px 50px rgba(0,0,0,0.9);
  display: flex;
  flex-direction: column;
  z-index: 10;
}

.screen {
  flex: 1;
  background: var(--pink-pale);
  border-radius: 16px;
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  border: 2px solid var(--black);
}

.home-view {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
}
.home-view.has-wallpaper {
  background-image: var(--wallpaper);
  background-size: cover;
  background-position: center;
}

.top-screen {
  flex: 1.05;
  display: flex;
  flex-direction: column;
  position: relative;
  min-height: 0;
  border-bottom: 3px solid var(--black);
  background-image:
    linear-gradient(45deg, rgba(0,0,0,0.03) 25%, transparent 25%, transparent 75%, rgba(0,0,0,0.03) 75%),
    linear-gradient(45deg, rgba(0,0,0,0.03) 25%, transparent 25%, transparent 75%, rgba(0,0,0,0.03) 75%);
  background-size: 20px 20px;
  background-position: 0 0, 10px 10px;
}
.home-view.has-wallpaper .top-screen,
.home-view.has-wallpaper .page-1,
.home-view.has-wallpaper .page-2,
.home-view.has-wallpaper .page-3 {
  background: transparent;
  background-image: none;
  border-left: none;
  border-right: none;
}
.home-view.has-wallpaper .header-band {
  background: color-mix(in srgb, var(--pink-pale) 78%, transparent);
}

.header-band {
  background: var(--pink-pale);
  border-bottom: 1px solid var(--black);
  padding: var(--bar-top) var(--ui-x) calc(10 * var(--s));
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  position: relative;
  flex: none;
}
.header-band::after {
  content: "";
  position: absolute;
  bottom: 0; left: 0; width: 100%; height: 3px;
  background: repeating-linear-gradient(90deg, var(--black), var(--black) 4px, transparent 4px, transparent 8px);
}
.title-main { display: flex; flex-direction: column; gap: 2px; }
.title-script { font-family: var(--font-script); font-size: clamp(28px, calc(42 * var(--s)), 42px); line-height: 0.8; color: var(--ink); text-shadow: 2px 2px 0 var(--pink-dark); }
.title-sub { font-family: var(--font-type); font-size: 10px; letter-spacing: 2px; color: #666; margin-left: 5px; }
.title-jp { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; font-family: var(--font-jp); font-size: 9px; color: #444; letter-spacing: 1px; margin-bottom: 5px; }

.window-container { flex: 1; padding: calc(15 * var(--s)) var(--ui-x); display: flex; gap: calc(15 * var(--s)); position: relative; min-height: 0; }
.polaroid-frame {
  flex: 1; background: var(--white); border: 2px solid var(--black);
  box-shadow: 3px 3px 0 var(--pink-dark); padding: 10px 10px 30px 10px;
  position: relative; transform: rotate(-2deg); cursor: pointer;
  display: flex; justify-content: center; align-items: center;
  min-width: 0;
}
.polaroid-img {
  width: 100%; height: 100%; background: #2b2226; overflow: hidden;
  display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 10px;
  color: var(--pink-dark);
}
.polaroid-img img { width: 100%; height: 100%; object-fit: cover; }
.polaroid-img svg { width: 40px; height: 40px; fill: var(--pink-dark); }
.polaroid-heart {
  width: 36px !important; height: 36px !important;
  fill: none !important; stroke: var(--pink-dark); stroke-width: 1.4;
}
.polaroid-emoji { font-size: 52px; filter: drop-shadow(0 0 8px rgba(252,232,239,0.35)); }
.polaroid-text { position: absolute; bottom: 8px; font-family: var(--font-script); font-size: 11px; color: var(--black); }
.polaroid-frame::before {
  content: "";
  position: absolute; top: -10px; left: 50%;
  transform: translateX(-50%) rotate(2deg);
  width: 60px; height: 20px;
  background: rgba(217, 133, 165, 0.6);
  border: 1px dashed rgba(255,255,255,0.8);
  z-index: 5;
}

.status-panel { flex: 1; display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.mini-card {
  background: var(--white); border: 1px solid var(--black); padding: 10px;
  box-shadow: 2px 2px 0 var(--pink-dark);
  display: flex; flex-direction: column; justify-content: center; position: relative;
}
.mini-title { font-family: var(--font-type); font-size: 9px; color: var(--pink-dark); font-weight: bold; margin-bottom: 5px; }
.ecg-line { width: 100%; height: 20px; stroke: var(--pink-dark); stroke-width: 1.5; fill: none; stroke-dasharray: 100; animation: dash 2s linear infinite; }
@keyframes dash { to { stroke-dashoffset: -200; } }

.msg-card {
  flex: 1; background: var(--black); color: var(--white);
  border: 2px solid var(--black); padding: calc(12 * var(--s)) calc(10 * var(--s));
  position: relative; min-width: 0; overflow: hidden;
  cursor: pointer; display: flex; flex-direction: column; justify-content: center;
  transform: rotate(1deg);
}
.msg-card::before { content: ""; position: absolute; inset: 4px; border: 1px dashed rgba(255,255,255,0.4); pointer-events: none; }
.msg-card h2 {
  font-family: var(--font-title); font-size: clamp(10px, calc(12 * var(--s)), 13px);
  font-style: italic; color: var(--on-black); line-height: 1.15;
  max-width: 100%; overflow-wrap: anywhere;
}
.msg-card p {
  font-family: var(--font-type); font-size: 9px; color: var(--pink-dark); margin-top: 5px;
  max-width: 100%; overflow-wrap: anywhere;
}
.svg-bow { position: absolute; top: -15px; right: 15px; width: 45px; height: 30px; z-index: 5; filter: drop-shadow(2px 3px 2px rgba(0,0,0,0.3)); }

.hinge { height: 12px; background: var(--black); width: 100%; z-index: 20; display: flex; justify-content: center; align-items: center; gap: 8px; flex: none; }
.hinge-circle { width: 3px; height: 3px; border-radius: 50%; background: #555; }
.hinge::before, .hinge::after { content: ""; flex: 1; height: 1px; background: repeating-linear-gradient(90deg, #333, #333 4px, transparent 4px, transparent 8px); }

.bottom-screen { flex: 1.25; display: flex; flex-direction: column; position: relative; overflow: hidden; min-height: 0; }

.scroll-container {
  flex: 1; display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none;
  position: relative; scroll-behavior: smooth;
}
.scroll-container::-webkit-scrollbar { display: none; }

.page {
  min-width: 100%; height: 100%;
  scroll-snap-align: center;
  padding: calc(15 * var(--s)) var(--ui-x) calc(108px + var(--bar-bot));
  display: flex; flex-direction: column; justify-content: flex-start;
}
.page-1 {
  background-image:
    linear-gradient(45deg, rgba(0,0,0,0.03) 25%, transparent 25%, transparent 75%, rgba(0,0,0,0.03) 75%),
    linear-gradient(45deg, rgba(0,0,0,0.03) 25%, transparent 25%, transparent 75%, rgba(0,0,0,0.03) 75%);
  background-size: 20px 20px; background-position: 0 0, 10px 10px;
}
.page-2 {
  background: repeating-linear-gradient(45deg, #111, #111 15px, #1a1a1a 15px, #1a1a1a 30px);
  border-left: 1px solid var(--black); border-right: 1px solid var(--black);
}
.page-3 {
  background: repeating-linear-gradient(-45deg, #fce8ef, #fce8ef 15px, #f8d4e2 15px, #f8d4e2 30px);
}

.widget-area { margin-bottom: 20px; flex: none; display: flex; justify-content: center; }
.widget-mood { background: var(--white); border: 1px solid var(--black); box-shadow: 3px 3px 0 var(--pink-dark); padding: 10px 15px; display: flex; align-items: center; gap: 15px; transform: rotate(-1deg); width: 100%; }
.widget-mood .title { font-family: var(--font-type); font-size: 10px; color: var(--on-paper); white-space: nowrap; }
.widget-mood .text { font-family: var(--font-jp); font-size: 10px; color: var(--pink-dark); }
.widget-music { background: var(--black); border: 1px solid var(--pink-dark); box-shadow: 3px 3px 0 var(--pink-pale); padding: 8px 12px; display: flex; justify-content: space-between; align-items: center; transform: rotate(1deg); color: var(--on-black); width: 100%; }
.widget-music .play-btn { width: 20px; height: 20px; border: 1px solid var(--pink-dark); border-radius: 50%; display: flex; justify-content: center; align-items: center; }
.widget-music .play-btn::after { content: "▶"; font-size: 8px; color: var(--pink-dark); }
.widget-music .info { flex:1; padding-left:10px; font-family:var(--font-type); font-size:10px; }
.widget-music .wave { display: flex; gap: 2px; align-items: flex-end; height: 12px; }
.widget-music .bar { width: 2px; background: var(--pink-dark); animation: wave 1s infinite alternate; }
@keyframes wave { 0% { height: 3px; } 100% { height: 12px; } }
.widget-system { background: var(--white); border: 2px solid var(--black); box-shadow: 4px 4px 0 var(--pink-dark); padding: 10px 12px; transform: rotate(-1deg); position: relative; width: 100%; }
.widget-system::before { content: ""; position: absolute; top: 4px; left: 4px; right: 4px; height: 1px; border-top: 1px dashed var(--black); }
.sys-title { font-family: var(--font-type); font-size: 10px; color: var(--black); margin-bottom: 4px; font-weight: bold; }
.sys-data { display: flex; justify-content: space-between; font-family: var(--font-jp); font-size: 9px; color: #444; }

.app-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px 10px; flex: none; }
.app-icon { display: flex; flex-direction: column; align-items: center; gap: 6px; cursor: pointer; transition: transform 0.2s; user-select: none; }
.app-icon:active { transform: scale(0.9) rotate(5deg); }
.icon-box {
  width: var(--ui-face); height: var(--ui-face); border-radius: 14px;
  background: var(--black); color: var(--white);
  display: flex; justify-content: center; align-items: center;
  position: relative; border: 3px solid var(--white);
  box-shadow: 0 0 0 1px var(--black), 2px 4px 6px rgba(0,0,0,0.2);
  overflow: hidden;
}
.icon-box::before { content: ""; position: absolute; inset: 3px; border: 1px dashed rgba(255,255,255,0.5); border-radius: 8px; pointer-events: none; }
.icon-box.pink-bg { background: var(--pink-dark); color: var(--black); }
.icon-box.pink-bg::before { border-color: rgba(0,0,0,0.5); }
.icon-box.checkered {
  background-image:
    linear-gradient(45deg, var(--pink-dark) 25%, transparent 25%, transparent 75%, var(--pink-dark) 75%),
    linear-gradient(45deg, var(--pink-dark) 25%, transparent 25%, transparent 75%, var(--pink-dark) 75%);
  background-size: 10px 10px; background-position: 0 0, 5px 5px; background-color: var(--white);
  color: var(--black);
}
.icon-box img { width: 100%; height: 100%; object-fit: cover; }
.icon-emoji { font-size: 26px; line-height: 1; }
.page-2 .icon-box:not(.pink-bg):not(.checkered) { background: #222; border-color: #555; color: #ddd; }
.page-2 .icon-box::before { border-color: rgba(255,255,255,0.2); }
.page-3 .icon-box:not(.pink-bg):not(.checkered) { background: var(--white); border-color: var(--black); color: var(--black); }
.page-3 .icon-box::before { border-color: rgba(0,0,0,0.3); }
.icon-svg { width: 22px; height: 22px; stroke: currentColor; fill: none; stroke-width: 1.5; }
.app-label { font-family: var(--font-cn); font-size: 9px; font-weight: 900; letter-spacing: 1px; background: var(--white); padding: 1px 5px; border: 1px solid var(--black); box-shadow: 1px 1px 0 var(--pink-dark); }
.page-2 .app-label { background: var(--black); color: var(--white); border-color: var(--pink-dark); box-shadow: 1px 1px 0 var(--white); }

.floating-area {
  position: absolute; bottom: 0; left: 0; width: 100%;
  display: flex; flex-direction: column; align-items: center; justify-content: flex-end;
  padding-bottom: var(--bar-bot); z-index: 10; pointer-events: none;
}
.page-controller {
  display: flex; justify-content: center; align-items: center; gap: 15px;
  margin-bottom: 6px; pointer-events: auto;
  font-family: var(--font-title); font-size: 11px; font-style: italic; color: #888;
  text-shadow: 0 1px 2px rgba(255,255,255,0.8);
}
.page-arrow { cursor: pointer; font-size: 14px; font-family: monospace; padding: 0 5px; color: var(--black); }
.page-arrow.disabled { color: #aaa; cursor: not-allowed; }
.page-num { cursor: pointer; transition: 0.2s; }
.page-num.active { color: var(--pink-dark); font-weight: 900; font-size: 14px; }

.dock {
  width: calc(100% - 2 * var(--ui-x)); height: calc(60 * var(--s));
  background: rgba(255, 255, 255, 0.15);
  backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
  border-radius: 20px;
  border: 2px solid rgba(0, 0, 0, 0.8);
  box-shadow: 0 10px 30px rgba(0,0,0,0.2), inset 0 1px 0 rgba(255,255,255,0.6);
  display: flex; justify-content: space-around; align-items: center;
  pointer-events: auto; position: relative;
}
.dock::before {
  content: ""; position: absolute; top: -5px; left: 15px; right: 15px; height: 5px;
  background: radial-gradient(circle, var(--black) 2px, transparent 2.5px) repeat-x;
  background-size: 10px 5px; opacity: 0.3;
}
.dock-btn { color: rgba(0,0,0,0.55); cursor: pointer; transition: 0.3s; display: flex; flex-direction: column; align-items: center; gap: 2px; }
.dock-btn svg { width: 20px; height: 20px; stroke: currentColor; fill: none; stroke-width: 2; }
.dock-btn span { font-size: 8px; font-weight: 900; letter-spacing: 0; }
.dock-btn:active { transform: translateY(-2px) scale(0.95); }
.dock-btn.active, .dock-btn:hover { color: var(--black); filter: drop-shadow(0 0 5px rgba(255,255,255,0.8)); }

.app-layer {
  position: absolute; inset: 0; z-index: 80;
  display: none; flex-direction: column;
  background: var(--pink-pale);
}
.app-layer.active { display: flex; animation: slideIn 0.28s ease-out; }
@keyframes slideIn { from { transform: translateY(8%); opacity: 0; } to { transform: translateY(0); opacity: 1; } }

.app-sheet { flex: 1; display: flex; flex-direction: column; min-height: 0; background-image: linear-gradient(45deg, rgba(0,0,0,0.03) 25%, transparent 25%, transparent 75%, rgba(0,0,0,0.03) 75%); background-size: 20px 20px; }
.app-bar {
  padding: var(--bar-top) var(--ui-x) calc(10 * var(--s));
  border-bottom: 2px dashed var(--black);
  display: flex; justify-content: space-between; align-items: center;
  background: var(--white); flex: none; gap: 8px;
}
.app-bar { color: var(--on-paper); }
.app-bar h2 { font-family: var(--font-title), var(--font-cn); font-size: var(--ui-name); font-style: italic; flex: 1; min-width: 0; text-align: center; color: var(--on-paper); }
.app-bar .sub { font-family: var(--font-type); font-size: 9px; color: var(--pink-dark); }
.ghost-btn, .solid-btn, .close-btn {
  font-family: var(--font-cn); font-size: 12px; font-weight: 900;
  border: 2px solid var(--black); padding: 5px 10px; cursor: pointer;
  background: var(--pink-pale); box-shadow: 2px 2px 0 var(--pink-dark);
  color: var(--ink); white-space: nowrap; flex: none; flex-shrink: 0;
}
.solid-btn { background: var(--black); color: var(--on-black); box-shadow: 2px 2px 0 var(--pink-dark); }
.ghost-btn:active, .solid-btn:active, .close-btn:active { transform: translate(1px, 1px); box-shadow: 1px 1px 0 var(--pink-dark); }
.app-body { flex: 1; overflow-y: auto; padding: var(--ui-x) var(--ui-x) var(--bar-bot); min-height: 0; }
.app-foot {
  padding: calc(12 * var(--s)) var(--ui-x) var(--bar-bot); border-top: 2px dashed var(--black);
  background: var(--white); display: flex; gap: 8px; flex: none;
}
.app-foot .solid-btn,
.app-foot .ghost-btn { flex: 1; text-align: center; }

.wx {
  flex: 1; min-height: 0; display: flex; flex-direction: column;
  background: var(--pink-pale);
  background-image:
    linear-gradient(45deg, rgba(209, 128, 159, 0.06) 25%, transparent 25%, transparent 75%, rgba(209, 128, 159, 0.06) 75%),
    linear-gradient(45deg, rgba(209, 128, 159, 0.06) 25%, transparent 25%, transparent 75%, rgba(209, 128, 159, 0.06) 75%);
  background-size: calc(24 * var(--s)) calc(24 * var(--s));
  background-position: 0 0, calc(12 * var(--s)) calc(12 * var(--s));
}
.wx-nav {
  position: relative; z-index: 10; flex: none;
  padding: var(--bar-top) var(--ui-x) calc(16 * var(--s));
  display: flex; justify-content: space-between; align-items: center;
}
.wx-nav::after {
  content: ""; position: absolute; bottom: calc(4 * var(--s));
  left: calc(30 * var(--s)); right: calc(30 * var(--s)); height: 1px;
  border-bottom: 2px dotted rgba(18, 18, 18, 0.3);
}
.wx-nav-btn {
  font-family: var(--font-type); font-size: var(--ui-sm); font-weight: bold;
  padding: calc(5 * var(--s)) calc(12 * var(--s));
  background: var(--white); border: 1px solid var(--black);
  border-radius: calc(20 * var(--s)); cursor: pointer; z-index: 2;
  box-shadow: 2px 2px 0 var(--pink-dark);
  color: var(--black); white-space: nowrap; flex: none;
}
.wx-nav-btn:active { transform: translate(2px, 2px); box-shadow: none; }
.wx-back::before, .wx-add::before { content: none; }
.wx-nav-title { display: flex; flex-direction: column; align-items: center; min-width: 0; }
.wx-h {
  font-family: var(--font-title); font-size: var(--ui-title); font-style: italic; font-weight: 900;
  line-height: 1; color: var(--black); text-shadow: 2px 2px 0 var(--white);
}
.wx-sub { font-family: var(--font-script); font-size: var(--ui-sub); color: var(--pink-dark); margin-top: calc(-4 * var(--s)); }

.wx-widgets {
  display: grid; grid-template-columns: 1fr 1fr; gap: calc(15 * var(--s));
  padding: calc(4 * var(--s)) var(--ui-x) calc(14 * var(--s)); z-index: 5; flex: none;
}
.wx-box {
  background: var(--white); border: 1px solid rgba(18, 18, 18, 0.8);
  box-shadow: 3px 4px 10px rgba(0,0,0,0.06), 3px 3px 0 var(--pink-dark);
  position: relative; overflow: hidden; border-radius: calc(3 * var(--s));
}
.wx-user {
  grid-column: span 2; display: flex; align-items: center;
  padding: calc(16 * var(--s)) calc(14 * var(--s)) calc(16 * var(--s)) calc(24 * var(--s));
  gap: calc(16 * var(--s));
  pointer-events: none;
  background-image: repeating-linear-gradient(transparent, transparent calc(24 * var(--s)), rgba(209, 128, 159, 0.15) calc(25 * var(--s)));
}
.wx-user::before {
  content: ""; position: absolute; left: calc(8 * var(--s)); top: 25%; bottom: 25%; width: calc(8 * var(--s));
  background: radial-gradient(circle, var(--pink-pale) calc(3 * var(--s)), transparent calc(4 * var(--s))) center top / calc(8 * var(--s)) calc(15 * var(--s)) repeat-y;
  border-right: 1px dashed rgba(209, 128, 159, 0.4);
}
.wx-user-polaroid {
  position: relative; width: var(--ui-face); height: calc(68 * var(--s)); flex: none;
  border: 1px solid rgba(18, 18, 18, 0.6); background: var(--white);
  padding: calc(3 * var(--s)) calc(3 * var(--s)) calc(16 * var(--s));
  box-shadow: 2px 2px 0 var(--pink-dark); transform: rotate(-2deg);
}
.wx-user-polaroid::before {
  content: ""; position: absolute; top: calc(-6 * var(--s)); left: 50%; transform: translateX(-50%);
  width: calc(10 * var(--s)); height: calc(12 * var(--s));
  border: 1.5px solid #555; border-radius: calc(3 * var(--s)); border-top: none;
}
.wx-user-face {
  width: 100%; height: 100%; background: #1a1a1a;
  display: flex; justify-content: center; align-items: center; overflow: hidden;
}
.wx-user-face img { width: 100%; height: 100%; object-fit: cover; }
.wx-user-ph { color: var(--pink-neon); font-size: calc(20 * var(--s)); line-height: 1; }
.wx-user-info { flex: 1; min-width: 0; pointer-events: none; }
.wx-user-name { font-family: var(--font-title); font-size: var(--ui-name); font-weight: 900; font-style: italic; margin-bottom: calc(2 * var(--s)); }
.wx-user-status { font-family: var(--font-jp); font-size: var(--ui-sm); color: #666; margin-bottom: calc(8 * var(--s)); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wx-wave { display: flex; align-items: flex-end; gap: calc(3 * var(--s)); height: calc(12 * var(--s)); }
.wx-wave i { width: calc(2 * var(--s)); background: var(--pink-dark); animation: wxWave 1s infinite alternate; }
.wx-wave i:nth-child(1) { height: calc(6 * var(--s)); animation-delay: 0.1s; }
.wx-wave i:nth-child(2) { height: calc(12 * var(--s)); animation-delay: 0.3s; }
.wx-wave i:nth-child(3) { height: calc(8 * var(--s)); animation-delay: 0.2s; }
.wx-wave i:nth-child(4) { height: calc(10 * var(--s)); animation-delay: 0.4s; }
@keyframes wxWave { 0% { height: calc(3 * var(--s)); } 100% { height: calc(12 * var(--s)); } }

.wx-clock {
  display: flex; flex-direction: column; justify-content: center; align-items: center;
  padding: calc(14 * var(--s)) calc(10 * var(--s));
  background: var(--black); color: var(--white); border: none; border-radius: 0;
  box-shadow: 3px 4px 10px rgba(0,0,0,0.2);
}
.wx-clock-time {
  font-family: var(--font-type); font-size: clamp(20px, calc(26 * var(--s)), 28px);
  letter-spacing: 3px; color: var(--pink-pale);
}
.wx-clock-date { font-family: var(--font-type); font-size: 9px; color: #888; margin-top: calc(4 * var(--s)); letter-spacing: 1px; }

.wx-status {
  padding: calc(12 * var(--s)); display: flex; flex-direction: column; justify-content: space-between;
  border: 1px dashed var(--pink-dark); box-shadow: none; border-radius: 0; background: rgba(255,255,255,0.6);
}
.wx-status-h {
  display: flex; justify-content: space-between; align-items: center;
  font-family: var(--font-type); font-size: 9px; color: var(--black); font-weight: bold;
  border-bottom: 1px solid rgba(209,128,159,0.2); padding-bottom: calc(4 * var(--s)); margin-bottom: calc(6 * var(--s));
}
.wx-status-h .warn { color: var(--pink-neon); }
.wx-status-b { display: flex; align-items: center; gap: calc(8 * var(--s)); margin-bottom: calc(5 * var(--s)); }
.wx-pill {
  width: calc(24 * var(--s)); height: calc(12 * var(--s)); border-radius: calc(6 * var(--s));
  border: 1px solid var(--black);
  background: linear-gradient(90deg, var(--pink-neon) 50%, var(--black) 50%);
  transform: rotate(-20deg); flex: none;
}
.wx-status-v { font-family: var(--font-jp); font-size: 11px; font-weight: 900; color: var(--black); line-height: 1.2; }
.wx-status-v small { font-size: 8px; color: #666; display: block; font-weight: normal; }
.wx-status-bar { width: 100%; height: calc(4 * var(--s)); background: #eee; overflow: hidden; border-radius: 2px; }
.wx-status-fill {
  width: 20%; height: 100%; background: var(--pink-dark);
  animation: wxEmpty 4s infinite alternate;
}
@keyframes wxEmpty { 0% { width: 15%; } 100% { width: 25%; } }

.wx-tabs {
  display: flex; align-items: flex-end;
  padding: calc(8 * var(--s)) var(--ui-x) 0; gap: calc(6 * var(--s)); z-index: 5; flex: none;
}
.wx-tab {
  flex: 1; text-align: center; padding: calc(8 * var(--s)) 0 calc(6 * var(--s));
  font-size: var(--ui-sm); font-family: var(--font-type); font-weight: bold;
  border: 1px solid rgba(18,18,18,0.3); border-bottom: none;
  border-radius: calc(6 * var(--s)) calc(6 * var(--s)) 0 0;
  cursor: pointer; color: #999; background: #f5e1e8;
}
.wx-tab.on {
  background: var(--white); color: var(--black); border-color: var(--black);
  padding-bottom: calc(9 * var(--s)); z-index: 2;
}

.wx-list {
  flex: 1; overflow-y: auto; min-height: 0;
  margin: 0 var(--ui-x) var(--bar-bot);
  padding: calc(16 * var(--s)) var(--ui-x) calc(16 * var(--s));
  display: flex; flex-direction: column; gap: calc(14 * var(--s));
  z-index: 5;
  background: var(--white); border: 1px solid var(--black); border-top: none;
}
.wx-list::-webkit-scrollbar { display: none; }

.wx-item {
  display: flex; align-items: center; gap: calc(14 * var(--s));
  padding: calc(16 * var(--s));
  background: var(--pink-pale); border: 1px solid rgba(209, 128, 159, 0.3);
  cursor: pointer; position: relative; overflow: visible; border-radius: calc(4 * var(--s));
}
.wx-item:active { transform: translateY(1px); }
.wx-item::before {
  content: ""; position: absolute; top: calc(-5 * var(--s)); left: 50%;
  transform: translateX(-50%) rotate(-1deg);
  width: calc(40 * var(--s)); height: calc(12 * var(--s));
  background: rgba(255,255,255,0.8); border: 1px solid rgba(0,0,0,0.05);
}
.wx-tape, .wx-clip { display: none; }

.wx-face,
.wx-polaroid {
  width: calc(45 * var(--s)); height: calc(45 * var(--s)); flex: none;
  background: var(--white); border: 1px solid var(--black); border-radius: 50%;
  box-shadow: 2px 2px 0 var(--pink-dark);
  display: flex; justify-content: center; align-items: center;
  overflow: hidden; position: relative; z-index: 2;
  color: var(--pink-neon); font-size: calc(18 * var(--s)); padding: 0;
}
.wx-polaroid-in {
  width: 100%; height: 100%; display: flex; justify-content: center; align-items: center; overflow: hidden;
}
.wx-polaroid-in::before, .wx-polaroid-tag { display: none; }
.wx-face img, .wx-polaroid img, .wx-polaroid-in img { width: 100%; height: 100%; object-fit: cover; }

.wx-info { flex: 1; overflow: hidden; z-index: 2; min-width: 0; display: flex; flex-direction: column; justify-content: center; }
.wx-name-row { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: calc(6 * var(--s)); gap: 8px; }
.wx-name {
  font-size: var(--ui-name); font-weight: 900; color: var(--black);
  font-family: var(--font-title); font-style: italic;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.wx-name::before { content: none; }
.wx-time { font-family: var(--font-type); font-size: 9px; color: #999; flex: none; }
.wx-preview {
  font-size: var(--ui-sm); color: #666; font-family: var(--font-cn);
  display: flex; justify-content: space-between; align-items: center; gap: 8px;
  background: none; padding: 0; border: none;
}
.wx-preview span:first-child {
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0;
}
.wx-unread {
  color: var(--pink-neon); font-size: 14px; flex: none; line-height: 1;
  animation: wxBeat 1.5s infinite alternate;
}
@keyframes wxBeat { 0% { transform: scale(1); opacity: 0.8; } 100% { transform: scale(1.1); opacity: 1; } }

.wx-item .wx-edit {
  z-index: 6; padding: calc(3 * var(--s)) calc(8 * var(--s)); font-size: 9px; position: relative;
  border: 1px solid var(--black); background: var(--white); color: var(--black);
  border-radius: calc(12 * var(--s)); font-family: var(--font-type);
}
.wx-empty {
  text-align: center; padding: calc(18 * var(--s)) 10px;
  font-family: var(--font-cn); font-size: var(--ui-sm); color: #c4a8b4; letter-spacing: 0.04em;
}

.dos {
  flex: 1; min-height: 0; display: flex; flex-direction: column; position: relative;
  background: var(--pink-pale);
  background-image:
    linear-gradient(45deg, rgba(217, 133, 165, 0.06) 25%, transparent 25%, transparent 75%, rgba(217, 133, 165, 0.06) 75%),
    linear-gradient(45deg, rgba(217, 133, 165, 0.06) 25%, transparent 25%, transparent 75%, rgba(217, 133, 165, 0.06) 75%);
  background-size: 20px 20px; background-position: 0 0, 10px 10px;
}
.dos-rings {
  position: absolute; left: 0; top: 18%; bottom: 18%; width: calc(20 * var(--s));
  display: flex; flex-direction: column; justify-content: space-between;
  pointer-events: none; z-index: 20;
}
.dos-rings i {
  width: calc(14 * var(--s)); height: calc(14 * var(--s));
  background: #111; border-radius: 50%; border: 2px solid #555;
  box-shadow: inset 2px 2px 4px #000; transform: translateX(-50%);
}
.dos-nav {
  position: relative; z-index: 10; flex: none;
  padding: var(--bar-top) var(--ui-x) calc(16 * var(--s));
  display: flex; justify-content: space-between; align-items: center;
}
.dos-nav::after {
  content: ""; position: absolute; bottom: 0; left: 0; width: 100%; height: 10px;
  background: radial-gradient(circle at 10px 0, var(--white) 8px, transparent 9px) repeat-x;
  background-size: 20px 10px; opacity: 0.8;
}
.dos-nav-btn {
  font-family: var(--font-cn); font-size: var(--ui-sm); font-weight: 500;
  letter-spacing: 0.12em; border: none; padding: 4px 2px;
  background: transparent; color: #9a8790; cursor: pointer; z-index: 2; flex: none;
}
.dos-nav-btn:active { color: #050505; }
.dos-nav-title { display: flex; flex-direction: column; align-items: center; min-width: 0; }
.dos-h { font-family: var(--font-title); font-size: var(--ui-title); font-style: italic; font-weight: 900; line-height: 1; }
.dos-sub { font-family: var(--font-script); font-size: var(--ui-sub); color: var(--pink-dark); margin-top: calc(-4 * var(--s)); }
.dos-body {
  flex: 1; overflow-y: auto; min-height: 0;
  padding: var(--ui-x) var(--ui-x) var(--bar-bot);
}
.dos-body::-webkit-scrollbar { display: none; }
.dos-card {
  background: #fdfdfd; border: 2px solid var(--black);
  box-shadow: 6px 6px 0 rgba(217, 133, 165, 0.4);
  position: relative;
  padding: calc(30 * var(--s)) calc(18 * var(--s)) calc(22 * var(--s));
  background-image: repeating-linear-gradient(transparent, transparent 29px, rgba(0,0,0,0.02) 30px);
  background-position: 0 10px;
}
.dos-card::before {
  content: "DOSSIER"; position: absolute; top: calc(-12 * var(--s)); left: 50%; transform: translateX(-50%);
  background: var(--black); color: var(--white); font-family: var(--font-type);
  font-size: 10px; padding: 3px 18px; letter-spacing: 3px;
  border: 1px solid var(--white); box-shadow: 2px 2px 0 var(--pink-dark);
}
.dos-inner { border: 1px dashed rgba(0,0,0,0.15); padding: var(--ui-card); }
.dos-head {
  display: flex; justify-content: space-between; align-items: flex-start;
  margin-bottom: calc(24 * var(--s)); border-bottom: 2px solid var(--black);
  padding-bottom: calc(18 * var(--s)); gap: var(--ui-gap);
}
.dos-polaroid {
  width: calc(92 * var(--s)); height: calc(112 * var(--s)); flex: none;
  background: var(--white); border: 2px solid var(--black);
  padding: 6px 6px 22px; box-shadow: 4px 4px 0 var(--pink-dark);
  transform: rotate(-3deg); position: relative; cursor: pointer;
}
.dos-polaroid::before {
  content: ""; position: absolute; top: -8px; left: 50%; transform: translateX(-50%);
  width: 10px; height: 16px; border: 2px solid #777; border-radius: 3px;
  border-top: none; z-index: 5;
}
.dos-polaroid-img {
  width: 100%; height: 100%; background: #151515; color: var(--pink-dark);
  display: flex; justify-content: center; align-items: center;
  font-size: clamp(22px, calc(30 * var(--s)), 32px); overflow: hidden;
}
.dos-polaroid-img img { width: 100%; height: 100%; object-fit: cover; }
.dos-file { display: none; }
.dos-meta { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: calc(10 * var(--s)); padding-top: 4px; }
.dos-id { font-family: var(--font-type); font-size: var(--ui-sm); font-weight: bold; letter-spacing: 1px; }
.dos-barcode {
  width: 100%; height: calc(24 * var(--s));
  background: repeating-linear-gradient(90deg, var(--black), var(--black) 2px, transparent 2px, transparent 4px, var(--black) 4px, var(--black) 7px);
  opacity: 0.8;
}
.dos-warn {
  font-family: var(--font-type); font-size: 9px; color: var(--white);
  background: var(--black); border: 1px solid var(--pink-neon); padding: 3px 8px;
  align-self: flex-start; transform: rotate(1deg); letter-spacing: 1px;
}
.dos-field { margin-bottom: calc(22 * var(--s)); }
.dos-field-last { margin-bottom: calc(8 * var(--s)); }
.dos-lab-row {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  margin-bottom: 8px;
}
.dos-lab {
  font-family: var(--font-type); font-size: 12px; font-weight: bold;
  display: flex; align-items: center; gap: 6px; min-width: 0;
}
.dos-lab::before { content: "✝"; color: var(--pink-neon); font-size: 12px; }
.dos-lab span { color: #888; font-size: 9px; font-weight: normal; }
.dos-import {
  flex: none; font-family: var(--font-cn); font-size: 10px; font-weight: 700;
  letter-spacing: 0.08em; color: #9a8790; border: 1px solid #c4b4bb;
  padding: 3px 8px; cursor: pointer; background: #fff;
}
.dos-import input { display: none; }
.dos-input {
  width: 100%; background: transparent; border: none; border-bottom: 2px dashed #aaa;
  font-family: var(--font-type); font-size: var(--ui-name); color: var(--ink);
  outline: none; padding: 8px 5px;
}
.dos-input:focus { border-bottom-color: var(--pink-neon); }
.dos-area {
  width: 100%; height: calc(110 * var(--s));
  background: rgba(252, 232, 239, 0.3); border: 1px solid rgba(0,0,0,0.15);
  font-family: var(--font-cn); font-size: 13px; color: var(--ink); outline: none;
  padding: 12px; resize: none; overflow-y: auto; line-height: 1.7;
  background-image: repeating-linear-gradient(transparent, transparent 27px, rgba(217, 133, 165, 0.2) 28px);
  background-position: 0 5px;
}
.dos-area:focus { background-color: var(--white); border-color: var(--black); }
.dos-submit { margin-top: calc(28 * var(--s)); text-align: center; position: relative; }
.dos-btn {
  position: relative; z-index: 2; width: 100%;
  padding: calc(14 * var(--s)); background: var(--black); color: var(--white);
  font-family: var(--font-type); font-size: var(--ui-name); font-weight: bold; letter-spacing: 2px;
  border: 1px solid var(--black); cursor: pointer;
  box-shadow: 5px 5px 0 var(--pink-neon);
  display: flex; justify-content: center; align-items: center; gap: 12px;
}
.dos-btn span { color: var(--pink-neon); }
.dos-btn::after {
  content: ""; position: absolute; inset: 4px; border: 1px dashed rgba(255,255,255,0.15); pointer-events: none;
}
.dos-btn:active { transform: translate(3px, 3px); box-shadow: 1px 1px 0 var(--pink-neon); }
.dos-stamp {
  position: absolute; bottom: calc(-16 * var(--s)); right: 4px;
  border: 2px solid rgba(217, 133, 165, 0.7); color: rgba(217, 133, 165, 0.7);
  font-family: var(--font-title); font-size: 11px; font-style: italic; font-weight: 900;
  padding: 4px 12px; transform: rotate(-12deg); pointer-events: none; z-index: 10;
}
.dos-stamp::before { content: ""; position: absolute; inset: 1px; border: 1px dashed rgba(217, 133, 165, 0.4); }
.dos-del {
  margin-top: calc(28 * var(--s)); text-align: center;
  font-family: var(--font-cn); font-size: var(--ui-sm); color: #9a8790; cursor: pointer;
}

.addc {
  flex: 1; min-height: 0; display: flex; flex-direction: column;
  background: var(--pink-pale);
  background-image:
    linear-gradient(45deg, rgba(217, 133, 165, 0.06) 25%, transparent 25%, transparent 75%, rgba(217, 133, 165, 0.06) 75%),
    linear-gradient(45deg, rgba(217, 133, 165, 0.06) 25%, transparent 25%, transparent 75%, rgba(217, 133, 165, 0.06) 75%);
  background-size: 20px 20px; background-position: 0 0, 10px 10px;
}
.addc-body {
  flex: 1; min-height: 0; overflow-y: auto;
  padding: var(--ui-x) var(--ui-x) var(--bar-bot);
  display: flex; flex-direction: column; gap: calc(10 * var(--s));
}
.addc-body::-webkit-scrollbar { display: none; }
.addc-q {
  width: 100%; flex: none; background: #fff; border: 1px solid #050505;
  font-family: var(--font-cn); font-size: var(--ui-sm); color: var(--ink);
  padding: calc(8 * var(--s)) var(--ui-x); outline: none;
}
.addc-bar { flex: none; display: flex; flex-direction: column; gap: calc(6 * var(--s)); }
.addc-acts { display: flex; gap: calc(6 * var(--s)); }
.addc-act {
  flex: 1; min-width: 0; text-align: center; cursor: pointer;
  padding: calc(7 * var(--s)) 4px;
  background: #fff; border: 1px solid #050505;
  font-family: var(--font-type); font-size: var(--ui-sm); font-weight: bold; letter-spacing: 0.03em;
  color: #050505;
}
.addc-act:active { background: #050505; color: #ffb6d9; }
.addc-act input { display: none; }
.addc-act-main { background: #050505; color: #ffb6d9; }
.addc-act-main:active { background: #1a1a1a; color: #ffd0e6; }
.addc-act-wait { opacity: 0.38; }
.addc-note {
  font-family: var(--font-cn); font-size: var(--ui-sm); color: #c4a8b4;
  line-height: 1.4;
}
.addc-list { flex: none; display: flex; flex-direction: column; gap: calc(18 * var(--s)); padding-top: calc(4 * var(--s)); }

.tabs { display: flex; gap: 6px; padding: 0 14px 10px; background: var(--white); border-bottom: 1px solid var(--black); }
.tab {
  flex: 1; text-align: center; padding: 6px 0;
  font-size: 11px; font-weight: 900; border: 1px solid var(--black);
  background: var(--pink-pale); cursor: pointer;
}
.tab.on { background: var(--black); color: var(--on-black); }

.list-card, .panel {
  background: var(--white); border: 1px solid var(--black);
  box-shadow: 3px 3px 0 var(--pink-dark); padding: 12px; margin-bottom: 12px;
  color: var(--on-paper);
}
.row { display: flex; align-items: center; gap: 10px; padding: 10px 0; border-bottom: 1px dashed rgba(0,0,0,0.15); cursor: pointer; }
.row:last-child { border-bottom: none; }
.avatar {
  width: 42px; height: 42px; border-radius: 10px; background: var(--pink-pale); color: var(--black);
  display: flex; align-items: center; justify-content: center; flex: none;
  border: 2px solid var(--black); overflow: hidden; font-size: 22px;
}
.avatar img { width: 100%; height: 100%; object-fit: cover; }
.row .meta { flex: 1; min-width: 0; }
.row .name { font-size: 13px; font-weight: 900; }
.row .preview { font-size: 11px; color: #666; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 2px; }
.badge {
  min-width: 16px; height: 16px; border-radius: 8px; background: var(--pink-dark); color: var(--black);
  font-size: 9px; font-weight: 900; display: flex; align-items: center; justify-content: center; padding: 0 4px;
}

.field { display: flex; flex-direction: column; gap: 4px; margin-bottom: 10px; }
.field label { font-family: var(--font-type); font-size: 9px; color: var(--pink-dark); font-weight: bold; }
.field-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.pull-btn {
  font-family: var(--font-cn); font-size: 10px; font-weight: 900;
  border: 2px solid var(--black); padding: 2px 8px; cursor: pointer;
  background: var(--black); color: var(--pink-pale); box-shadow: 1px 1px 0 var(--pink-dark);
  flex: none;
}
.pull-btn:active { transform: translate(1px, 1px); }
.field input, .field textarea, .field select {
  width: 100%; background: var(--pink-pale); border: 2px solid var(--black);
  padding: 8px 10px; font-family: var(--font-cn); font-size: 13px; outline: none; color: var(--ink);
}
.field input[type="color"] { display: none; }
.field textarea { min-height: 80px; resize: vertical; }
.field textarea.fixed { resize: none; min-height: 0; overflow-y: auto; }
.field textarea.fixed.pos { height: 110px; }
.field textarea.fixed.neg { height: 90px; }
.help { font-size: 11px; color: #666; line-height: 1.5; margin-bottom: 10px; }

.chat-area { flex: 1; padding: var(--ui-x); display: flex; flex-direction: column; gap: var(--ui-gap); overflow-y: auto; min-height: 0; }
.msg { max-width: 85%; padding: 12px; font-family: var(--font-jp); font-size: 13px; line-height: 1.65; word-break: break-word; white-space: pre-wrap; }
.msg.them { align-self: flex-start; background: var(--white); color: var(--black); border: 1px solid var(--black); box-shadow: 3px 3px 0 var(--pink-dark); position: relative; }
.msg.them::before { content: ""; position: absolute; top: -5px; left: 0; width: 100%; height: 5px; background: radial-gradient(circle, var(--black) 2px, transparent 2.5px) repeat-x; background-size: 8px 5px; }
.msg.me { align-self: flex-end; background: var(--black); color: var(--on-black); border: 2px solid var(--pink-dark); box-shadow: -3px 3px 0 var(--white); transform: rotate(1deg); }
.msg.sys { align-self: center; max-width: 92%; background: transparent; font-size: 11px; color: #777; text-align: center; font-family: var(--font-cn); }
.typing { opacity: 0.7; font-style: italic; }

.chat-area:not(.scene-area) { gap: calc(20 * var(--s)); }
.talk {
  display: flex; flex-direction: column;
  width: fit-content; max-width: 82%;
}
.talk-them { align-self: flex-start; }
.talk-me { align-self: flex-end; }
.talk-head {
  display: flex; align-items: center; gap: calc(10 * var(--s));
  padding-bottom: calc(10 * var(--s));
  position: relative;
}
.talk-me .talk-head { flex-direction: row; justify-content: flex-end; }
.talk-head::after {
  content: ""; position: absolute; bottom: 0; height: 0;
  border-bottom: 1px dashed rgba(80, 64, 72, 0.35);
}
.talk-them .talk-head::after { left: calc(17 * var(--s)); right: 0; }
.talk-me .talk-head::after { left: 0; right: calc(17 * var(--s)); }
.talk-face {
  width: calc(34 * var(--s)); height: calc(34 * var(--s)); flex: none;
  border-radius: calc(3 * var(--s)); overflow: hidden;
  background: #1a1a1a; border: 1px solid var(--black);
  box-shadow: 2px 2px 0 var(--pink-dark);
  display: flex; align-items: center; justify-content: center;
  color: var(--pink-neon); font-size: var(--ui-sm); z-index: 1;
}
.talk-face img { width: 100%; height: 100%; object-fit: cover; }
.talk-name {
  font-family: var(--font-title); font-style: italic; font-weight: 900;
  font-size: var(--ui-sm); color: var(--black); line-height: 1.1;
  letter-spacing: 0.04em;
}
.talk-body {
  display: flex; flex-direction: column; gap: calc(10 * var(--s));
  padding-top: calc(10 * var(--s));
}
.talk-them .talk-body {
  margin-left: calc(17 * var(--s));
  padding-left: 0;
  border-left: none;
  align-items: flex-start;
}
.talk-me .talk-body {
  margin-right: calc(17 * var(--s));
  padding-right: 0;
  border-right: none;
  align-items: flex-end;
}
.talk-time {
  font-family: var(--font-type); font-size: 10px; color: #9a8790;
  letter-spacing: 0.12em; padding-top: calc(6 * var(--s));
}
.talk-them .talk-time { margin-left: calc(29 * var(--s)); }
.talk-me .talk-time { margin-right: calc(29 * var(--s)); align-self: flex-end; }
.chat-area:not(.scene-area) .msg {
  width: fit-content; max-width: 100%;
  padding: calc(9 * var(--s)) calc(13 * var(--s));
  font-size: 13px; line-height: 1.55; letter-spacing: 0.04em;
  border-radius: calc(2 * var(--s));
}
.chat-area:not(.scene-area) .msg.them {
  background: #1a1a1a; color: #fff;
  border: 1px solid #2a2a2a;
  box-shadow: calc(3 * var(--s)) calc(3 * var(--s)) 0 #9a9a9a;
}
.chat-area:not(.scene-area) .msg.them::before { display: none; }
.chat-area:not(.scene-area) .msg.me {
  background: #fdfbfc; color: #3a2d33;
  border: 1px solid #c4b5bc;
  box-shadow: calc(3 * var(--s)) calc(3 * var(--s)) 0 #ebdce3;
  transform: none;
}
.chat-area:not(.scene-area) .msg.sys {
  width: auto; max-width: 90%;
  background: var(--pink-pale); border: 1px dashed var(--pink-dark);
  color: var(--black); font-family: var(--font-type); font-size: 10px;
  padding: calc(6 * var(--s)) calc(12 * var(--s)); transform: rotate(-1deg);
}

.bp {
  flex: 1; min-height: 0; display: flex; flex-direction: column;
  background: #fdfdfd;
  background-image: radial-gradient(circle at 4px 4px, rgba(217, 133, 165, 0.1) 1px, transparent 1.5px);
  background-size: calc(16 * var(--s)) calc(16 * var(--s));
}
.bp-head {
  flex: none; padding: var(--bar-top) var(--ui-x) calc(12 * var(--s));
  border-bottom: 2px solid var(--black); background: var(--pink-pale);
}
.bp-air { display: flex; justify-content: space-between; align-items: center; margin-bottom: calc(12 * var(--s)); gap: var(--ui-gap); }
.bp-nav-btn {
  font-family: var(--font-type); font-size: 10px; font-weight: bold; letter-spacing: 1px;
  padding: calc(4 * var(--s)) calc(8 * var(--s));
  background: var(--black); color: var(--pink-pale);
  border: none; cursor: pointer; flex: none;
}
.bp-nav-btn:active { background: var(--pink-neon); color: var(--black); }
.bp-air-name {
  font-family: var(--font-title); font-size: var(--ui-title); font-style: italic; font-weight: 900; color: var(--black);
  display: flex; align-items: center; gap: calc(6 * var(--s));
}
.bp-air-name::before {
  content: "";
  width: calc(11 * var(--s));
  height: calc(11 * var(--s));
  flex: none;
  background:
    linear-gradient(var(--black), var(--black)) center / 100% 1.5px no-repeat,
    linear-gradient(var(--black), var(--black)) center / 1.5px 100% no-repeat;
}
.bp-route { display: flex; justify-content: space-between; align-items: center; margin-bottom: calc(12 * var(--s)); gap: calc(8 * var(--s)); }
.bp-ap { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.bp-ap-end { align-items: flex-end; text-align: right; }
.bp-code {
  font-family: var(--font-title); font-size: clamp(18px, calc(26 * var(--s)), 30px);
  font-style: italic; font-weight: 900; line-height: 1.1; color: var(--black);
  overflow-wrap: anywhere;
}
.bp-ap-end .bp-code { font-size: clamp(16px, calc(22 * var(--s)), 26px); }
.bp-apn { font-family: var(--font-type); font-size: 10px; color: #666; letter-spacing: 1px; margin-top: calc(2 * var(--s)); }
.bp-arrow { flex: 0 1 26%; position: relative; display: flex; align-items: center; margin: 0 calc(8 * var(--s)); min-width: calc(28 * var(--s)); }
.bp-arrow i { width: 100%; border-top: 2px dashed var(--black); opacity: 0.35; }
.bp-plane {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: 16px; height: 16px; background: var(--pink-pale); padding: 0 5px;
  box-sizing: content-box; color: var(--black);
}
.bp-plane svg { display: block; width: 16px; height: 16px; }
.bp-pass { display: flex; justify-content: space-between; gap: var(--ui-gap); padding-top: calc(8 * var(--s)); border-top: 1px dashed rgba(0,0,0,0.2); }
.bp-pi { display: flex; flex-direction: column; gap: calc(2 * var(--s)); min-width: 0; }
.bp-pi span { font-family: var(--font-type); font-size: 9px; color: var(--pink-dark); }
.bp-pi b { font-family: var(--font-type); font-size: 12px; color: var(--black); font-weight: bold; }
.bp .chat-area {
  background: transparent;
  padding: var(--ui-x) var(--ui-x) calc(10 * var(--s));
}
.bp-tear {
  position: relative; flex: none; height: calc(18 * var(--s));
  display: flex; align-items: center;
}
.bp-tear i { width: 100%; border-top: 2px dashed var(--black); opacity: 0.35; }
.bp-tear::before, .bp-tear::after {
  content: ""; position: absolute; top: 50%; transform: translateY(-50%);
  width: calc(20 * var(--s)); height: calc(20 * var(--s));
  background: var(--black); border: none; border-radius: 50%; z-index: 2;
}
.bp-tear::before { left: calc(-10 * var(--s)); }
.bp-tear::after { right: calc(-10 * var(--s)); }
.bp-gate {
  flex: none; padding: calc(12 * var(--s)) var(--ui-x) var(--bar-bot);
  background: var(--pink-pale); display: flex; flex-direction: column; gap: calc(8 * var(--s));
}
.bp-gate-h { display: flex; justify-content: space-between; font-family: var(--font-type); font-size: 9px; color: #666; }
.bp-gate-h span:last-child { color: var(--pink-neon); }
.bp-console {
  background: var(--white); border: 2px solid var(--black);
  box-shadow: 4px 4px 0 var(--pink-dark);
  padding: calc(4 * var(--s)); display: flex; align-items: center; gap: calc(8 * var(--s));
}
.bp-console input {
  flex: 1; background: transparent; border: none; outline: none;
  font-family: var(--font-cn); font-size: 13px; color: var(--black);
  padding: calc(8 * var(--s)) calc(10 * var(--s));
}
.bp-console input::placeholder { color: #bbb; font-family: var(--font-type); font-size: 11px; }
.bp-console button {
  background: var(--black); color: var(--white);
  border: 1px solid var(--black); border-bottom: 4px solid #444;
  font-family: var(--font-type); font-size: 11px; font-weight: bold; letter-spacing: 1px;
  padding: 0 calc(14 * var(--s)); height: calc(36 * var(--s)); cursor: pointer; flex: none;
}
.bp-console button:active { transform: translateY(2px); border-bottom-width: 1px; }
.bp-bar {
  height: calc(18 * var(--s));
  background: repeating-linear-gradient(90deg, var(--black), var(--black) 2px, transparent 2px, transparent 4px, var(--black) 4px, var(--black) 7px);
  opacity: 0.65;
}

.input-area { padding: calc(12 * var(--s)) var(--ui-x) var(--bar-bot); border-top: 2px dashed var(--black); display: flex; gap: 8px; background: var(--white); }
.input-area input, .input-area textarea {
  flex: 1; background: var(--pink-pale); border: 2px solid var(--black);
  padding: 10px 12px; font-family: var(--font-cn); outline: none; resize: none; max-height: 80px;
}
.input-area button { background: var(--black); color: var(--white); border: 2px solid var(--black); padding: 0 14px; font-family: var(--font-type); font-style: italic; cursor: pointer; }
.input-area button.ghost { background: var(--white); color: var(--black); box-shadow: 2px 2px 0 var(--pink-dark); }
.input-area.story { flex-direction: column; align-items: stretch; }
.input-area.story textarea { max-height: 140px; min-height: 72px; }
.input-area.story .story-row { display: flex; gap: 8px; justify-content: flex-end; }
.input-area.story .story-row button { min-height: 36px; }
.scene-area { gap: 16px; }
.scene-area .msg.them, .scene-area .msg.me {
  max-width: 100%;
  transform: none;
  box-shadow: 2px 2px 0 var(--pink-dark);
}
.scene-area .msg.me { box-shadow: 2px 2px 0 var(--white); }
.scene-area .msg.them::before { display: none; }

.bank-card {
  background: var(--black); color: var(--pink-pale); border: 2px solid var(--pink-dark);
  padding: 18px; margin-bottom: 14px; position: relative; box-shadow: 4px 4px 0 var(--pink-dark);
}
.bank-card .bank-name { font-family: var(--font-title); font-style: italic; font-size: 16px; }
.bank-card .bal { font-size: 28px; font-weight: 900; margin: 10px 0 4px; letter-spacing: 1px; }
.bank-card .hint { font-family: var(--font-type); font-size: 9px; color: var(--pink-dark); }
.tx { display: flex; justify-content: space-between; gap: 8px; padding: 8px 0; border-bottom: 1px dashed rgba(0,0,0,0.12); font-size: 12px; }
.tx .plus { color: #2a7a4b; font-weight: 900; }
.tx .minus { color: #b0435c; font-weight: 900; }

.shop-card { display: flex; gap: 10px; align-items: center; }
.shop-thumb { width: 52px; height: 52px; background: var(--pink-pale); border: 1px solid var(--black); display: flex; align-items: center; justify-content: center; font-size: 26px; flex: none; }
.price { color: var(--pink-dark); font-weight: 900; }
.order-status { font-size: 10px; font-weight: 900; padding: 2px 6px; border: 1px solid var(--black); background: var(--pink-pale); }

.thread { cursor: pointer; }
.tag { display: inline-block; font-size: 10px; padding: 1px 6px; border: 1px solid var(--black); margin-right: 4px; background: var(--pink-pale); }
.post { font-size: 13px; line-height: 1.7; }
.post-meta { font-size: 11px; color: #666; margin-bottom: 6px; }

.color-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 10px; }
.swatches { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
.swatch { width: 28px; height: 28px; border: 2px solid var(--black); cursor: pointer; }
.swatch.on { outline: 2px solid var(--pink-dark); outline-offset: 2px; }

.look .look-sec {
  background: var(--white); border: 2px solid var(--black);
  box-shadow: 3px 3px 0 var(--pink-dark); padding: var(--ui-gap); margin-bottom: var(--ui-gap);
  color: var(--on-paper);
}
.look .look-h {
  font-family: var(--font-type); font-size: 11px; font-weight: bold;
  color: var(--pink-dark); letter-spacing: 1px; margin-bottom: 10px;
}
.look .look-h::before { content: "> "; }
.look .look-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.look-hint { font-size: 11px; color: #666; line-height: 1.5; margin-bottom: 10px; }
.bar-row {
  display: grid; grid-template-columns: 36px 1fr 36px;
  align-items: center; gap: 8px; margin-bottom: 10px;
}
.bar-row label {
  font-family: var(--font-type); font-size: 10px; font-weight: bold; color: var(--pink-dark);
}
.bar-row em {
  font-family: var(--font-type); font-size: 11px; font-style: normal;
  text-align: right; color: var(--on-paper);
}
.bar-row input[type='range'] {
  -webkit-appearance: none; appearance: none;
  width: 100%; height: 6px; background: var(--pink-pale);
  border: 1px solid var(--black); outline: none;
}
.bar-row input[type='range']::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 16px; height: 16px; background: var(--black);
  border: 2px solid var(--pink-dark); cursor: pointer;
}
.bar-row input[type='range']::-moz-range-thumb {
  width: 16px; height: 16px; background: var(--black);
  border: 2px solid var(--pink-dark); cursor: pointer;
}
.look .field { margin-bottom: 8px; }
.color-chip { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.color-chip-lab {
  font-family: var(--font-type); font-size: 9px; font-weight: bold; color: var(--pink-dark);
}
.color-chip-bar {
  position: relative; display: flex; align-items: center; gap: 8px;
  height: 36px; padding: 0 10px 0 6px; background: var(--pink-pale);
  border: 2px solid var(--black); cursor: pointer; overflow: hidden;
}
.color-chip-face {
  width: 22px; height: 22px; border: 2px solid var(--black); flex: none;
}
.color-chip-hex {
  font-family: var(--font-type); font-size: 11px; color: var(--ink);
  letter-spacing: 0.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.color-chip-input {
  position: absolute; inset: 0; opacity: 0; width: 100%; height: 100%;
  border: none; padding: 0; cursor: pointer;
}
.look-wall-preview {
  width: 100%; height: 72px; object-fit: cover; border: 2px solid var(--black);
  margin-bottom: 8px; display: block;
}
.look-polo-preview {
  width: 92px; height: 110px; object-fit: cover; border: 2px solid var(--black);
  margin-bottom: 8px; display: block; background: #2b2226;
}
.look-wall-row { display: flex; gap: 8px; align-items: center; }
.look-file {
  flex: 1; text-align: center; padding: 8px 10px;
  border: 2px solid var(--black); background: var(--pink-pale); color: var(--ink);
  font-family: var(--font-cn); font-size: 12px; font-weight: 900; cursor: pointer;
  box-shadow: 2px 2px 0 var(--pink-dark);
}
.look-file input { display: none; }
.look-icon-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.look-icon { border: 1px dashed var(--black); padding: 8px; background: var(--pink-pale); }
.look-icon-name { font-size: 11px; font-weight: 900; margin-bottom: 6px; }
.look-icon input {
  width: 100%; background: var(--white); border: 2px solid var(--black); color: var(--on-paper);
  padding: 6px 8px; font-family: var(--font-cn); font-size: 12px; outline: none; margin-bottom: 6px;
}
.look-icon-row { display: flex; gap: 6px; }
.look-icon-row input { flex: 1; margin-bottom: 0; }
.look-icon-row .look-file { flex: 1; padding: 6px 4px; font-size: 11px; box-shadow: none; }

.empty { text-align: center; color: #777; padding: 30px 10px; font-size: 12px; line-height: 1.7; }

.toast {
  position: absolute; left: 50%; bottom: calc(80px + var(--bar-bot)); transform: translateX(-50%);
  background: var(--black); color: var(--pink-pale); border: 2px solid var(--pink-dark);
  padding: 8px 14px; font-size: 12px; z-index: 200; max-width: 86%;
  box-shadow: 3px 3px 0 var(--pink-dark); pointer-events: none;
}

.hidden { display: none !important; }

.app-sheet:has(.sys-app) { background: none; background-image: none; }
.sys-app {
  flex: 1; min-height: 0; display: flex; flex-direction: column;
  background: var(--pink-pale);
}
.sys-app .header-band { padding: var(--bar-top) var(--ui-x) calc(10 * var(--s)); }
.sys-app .title-script { font-size: clamp(28px, calc(42 * var(--s)), 42px); }
.sys-app .window-container { padding: calc(15 * var(--s)) var(--ui-x); }
.monitor-panel {
  flex: 1; background: var(--black); border: 2px solid var(--black);
  position: relative; overflow: hidden; padding: 14px;
  display: flex; flex-direction: column; justify-content: space-between; min-height: 0;
}
.monitor-panel::before {
  content: ""; position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(217, 133, 165, 0.1) 1px, transparent 1px),
    linear-gradient(90deg, rgba(217, 133, 165, 0.1) 1px, transparent 1px);
  background-size: 15px 15px;
}
.monitor-header {
  font-family: var(--font-type); font-size: 10px; color: var(--pink-dark);
  display: flex; justify-content: space-between; z-index: 1;
}
.rec-dot { color: var(--pink-pale); animation: recPulse 1s infinite alternate; }
@keyframes recPulse { from { opacity: 0.35; } to { opacity: 1; } }
.monitor-ecg { width: 100%; height: 44px; stroke: var(--pink-dark); stroke-width: 2; fill: none; stroke-dasharray: 200; animation: dash 2s linear infinite; z-index: 1; margin-top: 8px; }
.monitor-data { font-family: var(--font-jp); font-size: 9px; color: #888; z-index: 1; display: flex; flex-direction: column; gap: 3px; }
.monitor-data span { color: var(--pink-pale); }
.monitor-data .mono { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.set-bottom {
  background: repeating-linear-gradient(45deg, #fce8ef, #fce8ef 10px, #f8d4e2 10px, #f8d4e2 20px);
}
.set-nav {
  padding: 10px 15px; display: flex; justify-content: space-between; align-items: center;
  background: var(--white); border-bottom: 2px dashed var(--black); flex: none;
}
.back-btn {
  font-family: var(--font-type); font-size: 11px; font-weight: bold;
  border: 2px solid var(--black); padding: 3px 8px; cursor: pointer;
  box-shadow: 2px 2px 0 var(--pink-dark); background: var(--pink-pale);
}
.back-btn:active { transform: translate(2px, 2px); box-shadow: 0 0 0 var(--pink-dark); }
.set-nav-title { font-family: var(--font-type); font-size: 12px; font-weight: bold; }

.settings-scroll {
  flex: 1; overflow-y: auto; padding: var(--ui-x) var(--ui-x) var(--bar-bot);
  display: flex; flex-direction: column; gap: var(--ui-gap); min-height: 0;
}
.settings-scroll::-webkit-scrollbar { display: none; }

.set-card {
  background: var(--white); border: 2px solid var(--black);
  position: relative; padding: 14px;
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  box-shadow: 3px 3px 0 var(--pink-dark);
}
.set-card:active { transform: translateY(1px); }
.set-card.paper {
  background-image: repeating-linear-gradient(transparent, transparent 25px, #eee 26px);
}
.set-card.paper::before, .set-card.paper::after {
  content: ""; position: absolute; top: 50%; transform: translateY(-50%);
  width: 10px; height: 10px; background: var(--pink-pale); border: 2px solid var(--black); border-radius: 50%;
}
.set-card.paper::before { left: -6px; }
.set-card.paper::after { right: -6px; }
.set-card.dark {
  background: var(--black); color: var(--pink-pale);
  box-shadow: 3px 3px 0 var(--white);
}
.set-card.dark .set-title { color: var(--white); }
.set-card.dark .set-desc { color: var(--pink-dark); }
.set-face {
  width: 36px; height: 36px; flex: none; z-index: 1;
  border: 2px solid var(--black); background: var(--pink-pale);
  overflow: hidden;
}
.set-face img { width: 100%; height: 100%; object-fit: cover; display: block; }
.settings-scroll:has(.user-sheet) {
  gap: 0;
  padding: var(--ui-x) var(--ui-x) var(--bar-bot);
}
.user-sheet { position: relative; padding-bottom: 8px; }
.user-sheet-title {
  font-family: var(--font-title), var(--font-cn); font-size: var(--ui-title); font-style: italic; font-weight: 900;
  text-align: center; line-height: 1; margin: 2px 0 18px;
  text-shadow: 2px 2px 0 var(--white);
}
.user-sheet .avatar-section {
  display: flex; flex-direction: column; align-items: center;
  margin-bottom: 22px; position: relative;
}
.user-sheet .avatar-section::before {
  content: ""; position: absolute; top: -8px; left: 50%;
  transform: translateX(-50%) rotate(-3deg);
  width: 54px; height: 16px; background: rgba(217, 133, 165, 0.6);
  border: 1px dashed var(--white); z-index: 2; pointer-events: none;
}
.user-sheet .avatar-frame {
  width: 104px; height: 122px; background: var(--white); border: 2px solid var(--black);
  box-shadow: 4px 4px 0 var(--pink-dark); cursor: pointer;
  display: flex; flex-direction: column; justify-content: center; align-items: center;
}
.user-sheet .avatar-frame img {
  width: 78px; height: 78px; object-fit: cover; border: 2px solid var(--black);
  margin-bottom: 8px; display: block;
}
.user-sheet .avatar-heart {
  width: 50px; height: 50px; border: 2px solid var(--black); border-radius: 8px;
  display: flex; justify-content: center; align-items: center;
  font-size: 24px; margin-bottom: 8px;
}
.user-sheet .avatar-frame span {
  font-family: var(--font-type); font-size: 9px; color: #666; letter-spacing: 1px;
}
.user-sheet .file-input { display: none; }
.user-sheet .form-group { margin-bottom: 16px; }
.user-sheet .form-label {
  font-family: var(--font-type); font-size: 11px; font-weight: bold;
  color: var(--pink-dark); margin-bottom: 8px; display: block; letter-spacing: 1px;
}
.user-sheet .form-label::before { content: "> "; }
.user-sheet .form-input {
  width: 100%; padding: 11px 12px; background: var(--white); border: 2px solid var(--black);
  font-family: var(--font-cn); font-size: 14px; color: var(--black); outline: none;
  box-shadow: 3px 3px 0 rgba(217, 133, 165, 0.4);
}
.user-sheet .form-input:focus {
  box-shadow: 4px 4px 0 var(--pink-dark);
}
.user-sheet .form-input::placeholder {
  color: #aaa; font-family: var(--font-type); font-size: 12px;
}
.user-sheet .form-area {
  min-height: 110px; resize: none; line-height: 1.55;
}
.user-sheet .gender-group { display: flex; gap: 8px; }
.user-sheet .gender-option { flex: 1; }
.user-sheet .gender-option input { display: none; }
.user-sheet .gender-label {
  text-align: center; padding: 10px 4px; background: var(--white); border: 2px solid var(--black);
  font-family: var(--font-type); font-size: 11px; cursor: pointer;
  box-shadow: 2px 2px 0 rgba(217, 133, 165, 0.4);
}
.user-sheet .gender-option input:checked + .gender-label {
  background: var(--black); color: var(--white); box-shadow: 2px 2px 0 var(--pink-dark);
}
.user-sheet .save-area { margin-top: 22px; text-align: center; }
.user-sheet .save-btn {
  width: 100%; padding: 14px 12px 18px; background: var(--black); color: var(--white);
  font-family: var(--font-title), var(--font-cn); font-size: 18px; font-style: italic; font-weight: 900;
  border: none; cursor: pointer; box-shadow: 4px 4px 0 #ff4fa3;
  clip-path: polygon(0 0, 100% 0, 100% 88%, 96% 100%, 91% 88%, 86% 100%, 81% 88%, 76% 100%, 71% 88%, 66% 100%, 61% 88%, 56% 100%, 50% 88%, 44% 100%, 39% 88%, 34% 100%, 29% 88%, 24% 100%, 19% 88%, 14% 100%, 9% 88%, 4% 100%, 0 88%);
}
.user-sheet .save-btn:active { transform: translate(2px, 2px); box-shadow: 2px 2px 0 #ff4fa3; }
.user-sheet .user-clear {
  margin-top: 12px; font-family: var(--font-type); font-size: 10px; color: #888;
  letter-spacing: 1px; cursor: pointer;
}
.set-info { display: flex; flex-direction: column; gap: 4px; z-index: 1; min-width: 0; flex: 1; }
.set-title { font-family: var(--font-cn); font-size: 15px; font-weight: 900; color: var(--black); letter-spacing: 1px; }
.set-desc { font-family: var(--font-type); font-size: 10px; color: #666; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.set-arrow { font-family: monospace; font-size: 18px; flex: none; z-index: 1; }

.toggle {
  width: 50px; height: 28px; background: #e0e0e0; border-radius: 14px;
  border: 2px solid var(--black); position: relative; cursor: pointer;
  transition: 0.3s; z-index: 1; flex: none;
}
.toggle::after {
  content: ""; position: absolute; top: 2px; left: 2px; width: 20px; height: 20px;
  background: var(--white); border: 2px solid var(--black); border-radius: 50%;
  transition: 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.toggle.on { background: var(--pink-dark); }
.toggle.on::after { left: 22px; background: var(--black); }
.set-card.dark .toggle { border-color: var(--pink-dark); }

.slider-box { width: 118px; display: flex; align-items: center; gap: 6px; z-index: 1; flex: none; }
.slider-box input[type="range"] {
  -webkit-appearance: none; appearance: none;
  width: 78px; height: 6px; background: #ddd; border: 1px solid var(--black); border-radius: 2px;
}
.slider-box input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none; width: 14px; height: 14px;
  background: var(--white); border: 2px solid var(--black); border-radius: 50%; cursor: pointer;
}
.slider-val { font-family: var(--font-type); font-size: 10px; min-width: 28px; text-align: right; }

.set-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.set-actions .set-card {
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  min-height: 68px;
  box-shadow: 2px 2px 0 var(--pink-dark);
}
.set-actions .set-card.dark { box-shadow: 2px 2px 0 var(--white); }
.set-actions .set-title { font-size: 14px; }
.set-actions .set-arrow { display: none; }

.prompt-group {
  font-family: var(--font-cn); font-size: 12px; font-weight: 900;
  letter-spacing: 1px; color: var(--pink-dark); padding: 6px 2px 0;
}
.prompt-tools { display: flex; align-items: center; gap: 6px; z-index: 1; flex: none; }
.prompt-move {
  width: 22px; height: 22px; border: 2px solid var(--black); background: var(--white);
  font-family: monospace; font-size: 12px; line-height: 18px; text-align: center;
  cursor: pointer; user-select: none;
}
.prompt-move.off { visibility: hidden; pointer-events: none; }
.field textarea.fixed.prompt-body { height: 180px; }

.danger-btn {
  margin-top: 4px; text-align: center; padding: 14px;
  background: transparent; border: 2px dashed var(--black); color: var(--black);
  font-family: var(--font-cn); font-weight: 900; cursor: pointer; font-size: 14px;
}
.danger-btn:active { background: var(--black); color: var(--white); }

@media (max-width: 1023px) {
  :root {
    --s: clamp(0.82px, calc(100vw / 390), 1.18px);
  }
  html, body {
    width: 100%;
    height: 100%;
    height: 100vh;
    background: var(--ios-chrome);
    overscroll-behavior: none;
  }
  body {
    display: block;
    align-items: stretch;
  }
  .phone-case,
  .screen,
  .home-view,
  .app-layer {
    width: 100%;
    max-width: none;
    height: 100%;
    height: 100vh;
  }
  .phone-case {
    position: fixed;
    inset: 0;
    border-radius: 0;
    padding: 0;
    box-shadow: none;
    background: var(--ios-chrome);
  }
  .screen {
    border-radius: 0;
    border: none;
    background: var(--ios-chrome);
  }
  .app-layer { background: var(--ios-chrome); }
  .header-band {
    padding: var(--bar-top) var(--ui-x) calc(8 * var(--s));
    align-items: center;
  }
  .app-bar {
    padding: var(--bar-top) var(--ui-x) calc(8 * var(--s));
    align-items: center;
  }
  .sys-app .header-band { padding: var(--bar-top) var(--ui-x) calc(8 * var(--s)); }
  .title-script { line-height: 0.72; }
  .sys-app .title-script { font-size: clamp(28px, calc(36 * var(--s)), 36px); }
  .title-sub { margin-top: 0; }
  .title-jp { margin-bottom: 0; gap: 2px; }
}

@media (min-width: 1024px) {
  :root {
    --safe-t: 0px;
    --safe-b: 0px;
    --bar-bot: 12px;
    --s: 1px;
  }
  .ios-chrome,
  html.ios-chrome-on .ios-chrome { display: none !important; }
  body { background: #111; }
}