:root {
  --blue: #1478f5;
  --blue-dark: #075fd8;
  --ink: #10213d;
  --muted: #6f7f98;
  --line: #dce7f5;
  --surface: #ffffff;
  --canvas: #f2f7ff;
  --success: #35ba68;
  --warning: #ff8a1c;
  --danger: #ff5d45;
  --shadow: 0 14px 38px rgba(24, 76, 139, 0.13);
  color-scheme: light;
  font-family: "Microsoft YaHei", "PingFang SC", "Noto Sans CJK SC", system-ui, sans-serif;
}

* { box-sizing: border-box; }

html {
  min-height: 100%;
  background: #eaf3ff;
}

body {
  min-height: 100%;
  margin: 0;
  color: var(--ink);
  background:
    radial-gradient(circle at 16% 8%, rgba(114, 190, 255, 0.28), transparent 28rem),
    radial-gradient(circle at 84% 84%, rgba(49, 126, 247, 0.18), transparent 32rem),
    #eef6ff;
}

button, input { font: inherit; }

button {
  -webkit-tap-highlight-color: transparent;
  cursor: pointer;
}

button:focus-visible,
input:focus-visible {
  outline: 3px solid rgba(20, 120, 245, 0.28);
  outline-offset: 2px;
}

.phone-shell {
  position: relative;
  width: min(100%, 448px);
  min-height: 100vh;
  margin: 0 auto;
  background: #101820;
}

.app-screen {
  min-height: 100vh;
  overflow-x: hidden;
  background: var(--canvas);
}

.hero {
  position: relative;
  min-height: 330px;
  padding: 0 18px 22px;
  overflow: hidden;
  color: white;
  background:
    linear-gradient(145deg, rgba(10, 106, 235, 0.96), rgba(53, 151, 255, 0.92)),
    radial-gradient(circle at 80% 45%, rgba(255,255,255,.25), transparent 12rem);
}

.hero::before,
.hero::after {
  position: absolute;
  content: "";
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
}

.hero::before { width: 280px; height: 280px; right: -120px; top: 34px; }
.hero::after { width: 180px; height: 180px; left: -86px; top: 145px; }

.status-bar {
  position: relative;
  z-index: 2;
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 38px;
  padding: 8px 3px 0;
  font-size: 13px;
  font-weight: 700;
}

.status-icons { letter-spacing: 1px; font-size: 11px; opacity: 0.9; }

.hero-copy {
  position: relative;
  z-index: 2;
  min-height: 136px;
  padding: 18px 0 0 4px;
}

.eyebrow,
.section-kicker,
.module-index {
  margin: 0 0 5px;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 1.6px;
  text-transform: uppercase;
}

.hero .eyebrow { color: rgba(255,255,255,.78); }

.hero h1 {
  max-width: 290px;
  margin: 0;
  font-size: clamp(31px, 8vw, 38px);
  line-height: 1.18;
  letter-spacing: -1px;
}

.subtitle { margin: 8px 0 0; font-size: 18px; color: rgba(255,255,255,.92); }

.hero-illustration {
  position: absolute;
  right: -5px;
  top: 11px;
  width: 130px;
  height: 138px;
}

.chef-halo {
  position: absolute;
  inset: 8px 5px 5px 3px;
  border-radius: 46% 54% 42% 58%;
  background: linear-gradient(145deg, rgba(255,255,255,.28), rgba(255,255,255,.06));
  transform: rotate(-7deg);
}

.chef {
  position: absolute;
  right: 15px;
  top: 9px;
  font-size: 86px;
  filter: drop-shadow(0 12px 12px rgba(0,46,117,.18));
}

.clipboard {
  position: absolute;
  right: 70px;
  bottom: 2px;
  width: 42px;
  height: 52px;
  display: grid;
  place-items: center;
  color: #29496d;
  font-size: 26px;
  border: 2px solid rgba(255,255,255,.8);
  border-radius: 7px;
  background: linear-gradient(#eaf4ff,#b9d0e5);
  transform: rotate(-7deg);
}

.progress-copy {
  position: relative;
  z-index: 2;
  display: flex;
  justify-content: space-between;
  margin: 4px 4px 6px;
  font-size: 13px;
  font-weight: 700;
}

.progress-track,
.module-progress {
  position: relative;
  z-index: 2;
  height: 7px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(255,255,255,.38);
}

.progress-track span,
.module-progress span {
  display: block;
  width: 16.666%;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #55dc83, #37c86a);
  transition: width .35s ease;
}

.hero-actions {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: .9fr 1.45fr;
  gap: 10px;
  margin-top: 17px;
}

.hero-actions .primary-button,
.hero-actions .secondary-button {
  white-space: nowrap;
  font-size: 14px;
}

.primary-button,
.secondary-button,
.ghost-button,
.read-button {
  min-height: 48px;
  border-radius: 13px;
  border: 0;
  font-weight: 800;
  transition: transform .16s ease, box-shadow .16s ease, background .16s ease;
}

.primary-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  color: white;
  background: linear-gradient(135deg, #1478f5, #0b68e8);
  box-shadow: 0 10px 18px rgba(13, 105, 230, .22);
}
.secondary-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}
.hero .primary-button { border: 1px solid rgba(255,255,255,.48); box-shadow: 0 10px 24px rgba(0, 64, 160, .25); }

.secondary-button { color: var(--blue-dark); background: rgba(255,255,255,.96); }
.ghost-button { color: #334864; border: 1px solid #b9c8dc; background: white; }
.read-button { color: var(--blue-dark); border: 1px solid #b7d4fb; background: #eaf4ff; }
.read-button.is-read { color: #17733b; border-color: #aaddba; background: #e7f8ed; }
.compact { min-height: 44px; padding: 0 18px; }
.button-icon { display: grid; place-items: center; width: 26px; height: 26px; border: 1px solid currentColor; border-radius: 50%; font-size: 12px; }

button:active { transform: scale(.98); }

.content-wrap {
  position: relative;
  z-index: 3;
  margin-top: -12px;
  padding: 0 12px calc(28px + env(safe-area-inset-bottom));
  border-radius: 20px 20px 0 0;
  background: var(--canvas);
}

.search-panel {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 8px;
  padding-top: 14px;
}

.search-box {
  display: flex;
  align-items: center;
  gap: 7px;
  min-height: 42px;
  padding: 0 12px;
  color: #7090b3;
  border: 1px solid #e2ebf7;
  border-radius: 12px;
  background: white;
  box-shadow: 0 7px 20px rgba(37,88,145,.06);
}

.search-box input { min-width: 0; width: 100%; border: 0; outline: 0; color: var(--ink); background: transparent; font-size: 13px; }
.search-button { padding: 0 14px; color: white; border: 0; border-radius: 12px; background: #1478f5; font-weight: 800; }

.card {
  margin-top: 12px;
  padding: 15px;
  border: 1px solid rgba(218, 231, 247, .9);
  border-radius: 16px;
  background: var(--surface);
  box-shadow: 0 10px 28px rgba(29, 77, 133, .08);
}

.section-heading { display: flex; align-items: end; justify-content: space-between; gap: 10px; margin-bottom: 14px; }
.section-kicker { color: #7a9bc1; }
.section-heading h2 { margin: 0; font-size: 19px; letter-spacing: -.4px; }
.section-note { color: #8191a7; font-size: 11px; }
.text-button { padding: 4px 0; color: #7890ab; border: 0; background: none; font-size: 12px; }

.timeline {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 3px;
}

.timeline-item {
  display: flex;
  flex: 1 1 0;
  min-width: 0;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  padding: 0;
  color: var(--ink);
  border: 0;
  background: none;
  font-size: 14px;
  font-weight: 700;
}

.timeline-icon { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; font-size: 19px; box-shadow: inset 0 0 0 7px rgba(255,255,255,.62); }
.timeline-arrow { color: #83a5cf; font-size: 20px; transform: translateY(-9px); }
.green .timeline-icon { color:#2cad55; background:#d6f5df; }
.blue .timeline-icon { color:#1a7af4; background:#dbeaff; }
.orange .timeline-icon { color:#ee8617; background:#fff0d8; }
.cyan .timeline-icon { color:#0e9ea5; background:#dff7f7; }
.purple .timeline-icon { color:#7951df; background:#eee7ff; }
.timeline-hint { margin: 12px 0 0; padding-top: 10px; color: #8392a7; border-top: 1px dashed #dce7f4; font-size: 11px; text-align: center; }

.operation-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 7px; }
.operation-card { display: flex; min-width: 0; min-height: 112px; flex-direction: column; align-items: center; justify-content: center; gap: 5px; padding: 8px 4px; border: 0; border-radius: 13px; color: var(--ink); }
.operation-card strong { font-size: 12px; line-height: 1.3; }
.operation-card small { display: none; color: #72849a; font-size: 9px; }
.operation-icon { font-size: 27px; line-height: 1; }
.mint { background: linear-gradient(#effcf4,#e3f8ea); color:#2ca958; }
.sky { background: linear-gradient(#f2f8ff,#e5f1ff); color:#277ce7; }
.amber { background: linear-gradient(#fff8e9,#fff0d6); color:#eb8d1c; }
.lilac { background: linear-gradient(#f8f4ff,#eee8ff); color:#7950dc; }
.aqua { background: linear-gradient(#eefbfb,#ddf6f6); color:#119da3; }
.operation-card strong { color: var(--ink); }

.emergency-card {
  width: 100%;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 14px;
  margin-top: 12px;
  padding: 16px 18px;
  color: white;
  border: 0;
  border-radius: 16px;
  background: linear-gradient(110deg, #ff6548, #ff8b45);
  box-shadow: 0 14px 28px rgba(245, 92, 58, .22);
  text-align: left;
}
.warning-symbol { display:grid; place-items:center; width:42px; height:42px; color:#ff664b; border-radius:12px; background:white; font-size:28px; font-weight:900; }
.emergency-copy { display:flex; flex-direction:column; gap:3px; }
.emergency-copy strong { font-size:19px; }
.emergency-copy small { font-size:13px; letter-spacing:3px; }
.emergency-arrow { font-size:30px; }

.quick-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; margin-top: 12px; }
.quick-card { display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:8px; min-height:70px; padding:10px; color:var(--ink); border:1px solid #deebf8; border-radius:15px; background:white; box-shadow:0 8px 22px rgba(29,77,133,.07); text-align:left; }
.quick-card > span:nth-child(2) { display:flex; flex-direction:column; min-width:0; }
.quick-card strong { font-size:13px; }
.quick-card small { margin-top:3px; color:#8796a9; font-size:9px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.quick-icon { display:grid; place-items:center; width:38px; height:38px; border-radius:11px; font-size:18px; font-weight:900; }
.blue-icon { color:#1676ef; background:#e6f1ff; }
.green-icon { color:#29aa56; background:#e5f8eb; }
.indigo-icon { color:#7552d5; background:#eee9ff; }
.orange-icon { color:#f08a1b; background:#fff0dd; }

.page-footer { display:flex; justify-content:space-between; gap:10px; margin:22px 3px 0; color:#9aa8b9; font-size:10px; }
.page-footer p { margin:0; }
.page-footer button { padding:0; color:#8d9cb0; border:0; background:none; font-size:10px; text-decoration:underline; }

.overlay {
  position: fixed;
  z-index: 30;
  inset: 0;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding: 0;
  visibility: hidden;
  opacity: 0;
  background: rgba(8, 27, 52, .62);
  backdrop-filter: blur(4px);
  transition: opacity .25s ease, visibility .25s ease;
}
.overlay.is-open { visibility:visible; opacity:1; }
.bottom-sheet { width:min(100%,448px); max-height:88vh; overflow:auto; border-radius:24px 24px 0 0; background:white; box-shadow:0 -15px 45px rgba(4,31,69,.22); transform:translateY(35px); transition:transform .28s ease; }
.overlay.is-open .bottom-sheet { transform:translateY(0); }
.sheet-handle { width:46px; height:5px; margin:12px auto 5px; border-radius:999px; background:#98a5b6; }
.sheet-content { padding:16px 17px calc(18px + env(safe-area-inset-bottom)); }
.sheet-content h2 { margin:0 0 16px; font-size:24px; }
.guide-list { display:grid; gap:10px; margin:0; padding:0; list-style:none; }
.guide-list li { display:grid; grid-template-columns:54px 1fr; align-items:center; min-height:76px; padding:9px 12px 9px 8px; border-radius:15px; background:#f4f8fd; }
.guide-list li > span { display:grid; place-items:center; width:48px; height:48px; color:white; border-radius:50%; background:linear-gradient(145deg,#1b7df8,#0967e4); font-size:25px; font-weight:800; box-shadow:0 7px 15px rgba(13,105,230,.18); }
.guide-list li:nth-child(2) > span { background:linear-gradient(145deg,#55c86a,#22a949); }
.guide-list li:nth-child(3) > span { background:linear-gradient(145deg,#ff9d31,#f68109); }
.guide-list li:nth-child(4) > span { background:linear-gradient(145deg,#8a63ef,#6440d2); }
.guide-list p { margin:0 0 0 10px; font-size:14px; line-height:1.55; }
.sheet-actions { display:grid; grid-template-columns:1fr 1.1fr; gap:10px; margin-top:15px; }

.module-overlay { align-items:center; background:rgba(8,27,52,.76); }
.module-sheet { width:min(100%,448px); height:100vh; display:grid; grid-template-rows:auto 4px 1fr auto; overflow:hidden; background:#f5f8fd; transform:translateX(40px); opacity:0; transition:transform .28s ease, opacity .28s ease; }
.module-overlay.is-open .module-sheet { transform:translateX(0); opacity:1; }
.module-header { display:grid; grid-template-columns:44px 1fr 44px; align-items:center; gap:8px; padding:calc(12px + env(safe-area-inset-top)) 12px 11px; background:white; border-bottom:1px solid #e2ebf5; }
.module-header h2 { margin:0; font-size:19px; }
.module-index { margin-bottom:2px; color:#6c8caf; }
.icon-button { display:grid; place-items:center; width:40px; height:40px; padding:0; color:#2f4764; border:0; border-radius:12px; background:#eff5fc; font-size:27px; }
.module-progress { z-index:auto; height:4px; border-radius:0; background:#dce7f3; }
.module-progress span { background:linear-gradient(90deg,#177cf5,#55c989); }
.module-body { overflow-y:auto; padding:15px 14px 26px; scroll-behavior:smooth; }
.module-footer { display:grid; grid-template-columns:.8fr 1fr .8fr; gap:8px; padding:10px 12px calc(10px + env(safe-area-inset-bottom)); border-top:1px solid #dfe9f4; background:white; }
.module-footer button { min-width:0; padding:0 8px; font-size:12px; }

.article-hero { position:relative; overflow:hidden; margin-bottom:12px; padding:18px; color:white; border-radius:18px; background:linear-gradient(135deg,#0e72ec,#4da6ff); box-shadow:0 12px 28px rgba(18,105,216,.18); }
.article-hero::after { content:""; position:absolute; width:130px; height:130px; right:-55px; top:-50px; border-radius:50%; background:rgba(255,255,255,.13); }
.article-hero .tag { display:inline-block; margin-bottom:8px; padding:4px 8px; border-radius:999px; background:rgba(255,255,255,.18); font-size:10px; font-weight:800; }
.article-hero h3 { margin:0 0 7px; font-size:22px; }
.article-hero p { margin:0; color:rgba(255,255,255,.9); font-size:13px; line-height:1.65; }

.content-section { margin-top:12px; padding:15px; border:1px solid #deebf6; border-radius:16px; background:white; box-shadow:0 8px 24px rgba(29,77,133,.06); }
.content-section h3 { margin:0 0 11px; font-size:17px; }
.content-section h4 { margin:16px 0 8px; font-size:14px; }
.content-section p { margin:0; color:#50627a; font-size:13px; line-height:1.75; }
.content-section > p + p { margin-top:8px; }
.path-chip { display:block; margin:10px 0 0; padding:9px 11px; color:#0e62c8; border-radius:10px; background:#edf5ff; font-size:11px; line-height:1.55; }
.responsibility-grid { display:grid; gap:9px; }
.info-card { padding:12px; border-radius:13px; background:#f4f8fd; }
.info-card strong { display:block; margin-bottom:4px; color:#183b68; font-size:14px; }
.info-card p { font-size:12px; }
.danger-list,.plain-list,.check-list,.step-list { margin:0; padding:0; list-style:none; }
.danger-list { display:grid; gap:8px; }
.danger-list li { position:relative; padding:10px 11px 10px 35px; color:#9b3429; border-radius:11px; background:#fff0ed; font-size:12px; line-height:1.6; }
.danger-list li::before { content:"!"; position:absolute; left:10px; top:10px; display:grid; place-items:center; width:18px; height:18px; color:white; border-radius:50%; background:#f05c45; font-weight:900; }
.plain-list { display:grid; gap:8px; }
.plain-list li { position:relative; padding-left:17px; color:#50627a; font-size:12px; line-height:1.65; }
.plain-list li::before { content:""; position:absolute; left:2px; top:.62em; width:6px; height:6px; border-radius:50%; background:#2b84ee; }
.check-list { display:grid; gap:8px; }
.check-list label { display:flex; gap:9px; align-items:flex-start; padding:10px; border-radius:11px; background:#f4f8fd; color:#465d78; font-size:12px; line-height:1.55; }
.check-list input { width:18px; height:18px; flex:0 0 auto; accent-color:#1b7df3; }
.step-list { counter-reset:steps; display:grid; gap:9px; }
.step-list li { counter-increment:steps; position:relative; min-height:48px; padding:10px 10px 10px 51px; color:#465d78; border-radius:12px; background:#f4f8fd; font-size:12px; line-height:1.65; }
.step-list li::before { content:counter(steps); position:absolute; left:10px; top:10px; display:grid; place-items:center; width:30px; height:30px; color:white; border-radius:50%; background:linear-gradient(145deg,#2987f6,#0d69de); font-weight:800; }
.completion { margin-top:10px; padding:11px; color:#1c7141; border:1px solid #bce7ca; border-radius:12px; background:#edfaf1; font-size:12px; line-height:1.65; }
.completion strong { color:#116434; }
.system-image { width:100%; display:block; margin-top:10px; border:1px solid #d6e2f0; border-radius:12px; background:#eef3f8; cursor:zoom-in; }
.image-caption { margin-top:7px !important; color:#7b8ba0 !important; font-size:10px !important; line-height:1.5 !important; }

.stage-list { display:grid; gap:9px; }
.stage-card { display:grid; grid-template-columns:auto 1fr; gap:11px; padding:12px; border-radius:13px; background:#f4f8fd; }
.stage-dot { display:grid; place-items:center; width:38px; height:38px; color:white; border-radius:50%; background:linear-gradient(145deg,#2485f5,#126dde); font-size:12px; font-weight:800; }
.stage-card h4 { margin:1px 0 5px; font-size:14px; }
.stage-card p { font-size:11px; }
.stage-card small { display:block; margin-top:6px; color:#1b7b47; font-size:10px; line-height:1.5; }

.accordion { display:grid; gap:8px; }
.accordion details { overflow:hidden; border:1px solid #dce8f5; border-radius:12px; background:#f9fbfe; }
.accordion summary { padding:12px; font-weight:800; font-size:12px; cursor:pointer; }
.accordion details div { padding:0 12px 12px; color:#53677f; font-size:11px; line-height:1.7; }
.device-tabs { display:grid; grid-template-columns:repeat(2,1fr); gap:7px; margin-bottom:10px; }
.device-tab { min-height:42px; padding:7px; color:#46607e; border:1px solid #dbe7f4; border-radius:10px; background:white; font-size:11px; font-weight:800; }
.device-tab.active { color:white; border-color:#1478f5; background:#1478f5; }
.five-steps { display:grid; grid-template-columns:repeat(5,1fr); gap:4px; margin:10px 0 0; }
.five-steps span { display:grid; place-items:center; min-height:40px; color:white; border-radius:10px; background:linear-gradient(145deg,#ff7b4d,#ef5c40); font-size:11px; font-weight:900; }
.device-panel { padding:12px; border-radius:13px; background:#f4f8fd; }
.device-panel h4 { margin:0 0 9px; font-size:16px; }
.device-fact { margin-top:10px; padding-top:10px; border-top:1px dashed #cfddeb; }
.device-fact strong { display:block; margin-bottom:3px; color:#234a77; font-size:11px; }
.device-fact p { font-size:11px; }
.device-fact.danger strong,.device-fact.danger p { color:#a73f33; }

.template-box { margin-top:10px; padding:12px; color:#354d6a; border:1px dashed #a8bfdc; border-radius:12px; background:#f4f8fd; font:12px/1.8 "Microsoft YaHei", sans-serif; white-space:pre-wrap; }
.copy-button { width:100%; min-height:42px; margin-top:9px; color:white; border:0; border-radius:11px; background:#1478f5; font-weight:800; }

.quiz-form { display:grid; gap:12px; }
.quiz-card { padding:13px; border-radius:14px; background:#f4f8fd; }
.quiz-card fieldset { margin:0; padding:0; border:0; }
.quiz-card legend { margin-bottom:9px; font-size:13px; font-weight:800; line-height:1.55; }
.quiz-option { display:flex; gap:8px; align-items:flex-start; margin-top:7px; padding:8px; border:1px solid #dae6f3; border-radius:9px; background:white; color:#4b6179; font-size:11px; line-height:1.5; }
.quiz-option input { margin-top:2px; accent-color:#1478f5; }
.quiz-submit { min-height:45px; color:white; border:0; border-radius:12px; background:linear-gradient(135deg,#1478f5,#0b68e8); font-weight:800; }
.quiz-result { display:none; padding:14px; border-radius:13px; text-align:center; }
.quiz-result.show { display:block; }
.quiz-result.pass { color:#176c3d; background:#eaf9ef; }
.quiz-result.retry { color:#a24b27; background:#fff2e8; }

.lightbox { position:fixed; z-index:50; inset:0; display:flex; visibility:hidden; opacity:0; flex-direction:column; align-items:center; justify-content:center; gap:10px; padding:52px 12px 22px; background:rgba(3,13,27,.94); transition:opacity .2s ease, visibility .2s ease; }
.lightbox.is-open { visibility:visible; opacity:1; }
.lightbox img { max-width:96vw; max-height:76vh; object-fit:contain; border-radius:10px; }
.lightbox button { position:absolute; right:16px; top:16px; display:grid; place-items:center; width:42px; height:42px; color:white; border:1px solid rgba(255,255,255,.4); border-radius:50%; background:rgba(255,255,255,.12); font-size:28px; }
.lightbox p { margin:0; color:#dbe8f7; font-size:12px; text-align:center; }

.toast { position:fixed; z-index:70; left:50%; bottom:25px; max-width:calc(100% - 34px); padding:10px 15px; color:white; border-radius:999px; background:rgba(15,31,52,.94); box-shadow:var(--shadow); font-size:12px; transform:translate(-50%,20px); opacity:0; pointer-events:none; transition:opacity .2s ease, transform .2s ease; }
.toast.show { opacity:1; transform:translate(-50%,0); }

body.modal-open { overflow:hidden; }

@media (min-width: 540px) {
  body { padding: 22px 0; }
  .phone-shell { min-height: calc(100vh - 44px); border: 10px solid #111820; border-radius: 48px; box-shadow: 0 34px 80px rgba(26, 68, 118, .25); overflow: hidden; }
  .app-screen { min-height: calc(100vh - 64px); max-height: calc(100vh - 64px); overflow-y:auto; }
  .phone-shell::before { content:""; position:absolute; z-index:20; left:50%; top:8px; width:112px; height:27px; border-radius:999px; background:#080c11; transform:translateX(-50%); pointer-events:none; }
  .phone-shell::after { content:""; position:absolute; z-index:21; left:50%; bottom:8px; width:120px; height:5px; border-radius:999px; background:#0a0e12; transform:translateX(-50%); pointer-events:none; }
  .overlay { padding:22px 0; }
  .bottom-sheet { border-radius:24px; margin-bottom:10px; }
  .module-sheet { height:calc(100vh - 44px); max-height:860px; border-radius:36px; }
  .module-header { padding-top:18px; border-radius:36px 36px 0 0; }
}

@media (max-width: 380px) {
  .hero { padding-inline:14px; }
  .hero-illustration { transform:scale(.88); transform-origin:right top; }
  .hero-actions { grid-template-columns:1fr; }
  .operation-grid { grid-template-columns:repeat(3,1fr); }
  .operation-card { min-height:94px; }
  .quick-grid { grid-template-columns:1fr; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior:auto !important; transition:none !important; animation:none !important; }
}