/* Англійська Марка — стиль: білий фон, м'які блоки без рамок, палітра з додатка завдань */
:root {
  --ink: #1E1A2B;
  --muted: #5E586B;
  --c4: #4A4458;
  --sand: #F4F1EC;
  --sand2: #E6E1DA;
  --line: #EDEAE5;
  --purple: #3F0C7F;
  --purple2: #5A2A9C;
  --purple-p: #F1ECFA;
  --purple-ink: #4A3D66;
  --lime: #C0F17F;
  --lime-p: #EEF9E0;
  --lime-m: #E4F7CB;
  --lime-ink: #1E3A12;
  --green: #007056;
  --green-ink: #005A45;
  --coral: #FC6D5B;
  --coral-p: #FFECE9;
  --coral-ink: #3A0F08;
  --yellow: #FFD45C;
  --yellow-p: #FFF4D6;
  --yellow-ink: #3A2A00;
  --teal: #0291A3;
  --teal-p: #E3F4F6;
  --teal-ink: #00414A;
  --tan: #CDA28A;
  --tan-p: #F7EEE8;
  --tan-ink: #3B2417;
}

* { box-sizing: border-box; }
html, body {
  margin: 0; background: #FFFFFF; color: var(--ink);
  font-family: 'Rubik', system-ui, -apple-system, 'Helvetica Neue', sans-serif;
  -webkit-text-size-adjust: 100%; -webkit-tap-highlight-color: transparent;
}
body { overscroll-behavior: none; }
button {
  font: inherit; color: inherit; border: 0; background: none; padding: 0; margin: 0;
  cursor: pointer; touch-action: manipulation; -webkit-user-select: none; user-select: none;
}
button:disabled { cursor: default; opacity: .5; }
input, textarea, select { font: inherit; color: inherit; }
svg { flex: none; }
.boot { min-height: 100vh; display: flex; align-items: center; justify-content: center; color: var(--muted); font-size: 18px; }

/* ---------- утиліти ---------- */
.slab { font-family: 'Kelly Slab', Georgia, serif; font-weight: 400; }
.row { display: flex; align-items: center; gap: 14px; }
.col { display: flex; flex-direction: column; gap: 18px; min-width: 0; }
.col12 { display: flex; flex-direction: column; gap: 12px; }
.col16 { display: flex; flex-direction: column; gap: 16px; }
.grow { flex: 1; min-width: 0; }
.sb { justify-content: space-between; }
.ae { align-items: flex-end; }
.ac { align-items: center; }
.jc { justify-content: center; }
.tl { text-align: left; }
.tr { text-align: right; }
.tc { text-align: center; }
.db { display: block; }
.m0 { margin: 0; }
.mt-auto { margin-top: auto; }
.mt10 { margin-top: 10px; }
.mt22 { margin-top: 22px; }
.lh { line-height: 1.45; }
.lh1 { line-height: 1; }
.w150 { width: 150px; flex: none; }
.w260 { width: 260px; }
.f12 { font-size: 12px; } .f13 { font-size: 13px; } .f14 { font-size: 14px; } .f15 { font-size: 15px; }
.f16 { font-size: 16px; } .f17 { font-size: 17px; } .f18 { font-size: 18px; } .f19 { font-size: 19px; }
.f20 { font-size: 20px; } .f22 { font-size: 22px; } .f26 { font-size: 26px; } .f27 { font-size: 27px; }
.f28 { font-size: 28px; } .f30 { font-size: 30px; } .f34 { font-size: 34px; } .f36 { font-size: 36px; }
.f40 { font-size: 40px; } .f44 { font-size: 44px; } .f52 { font-size: 52px; } .f56 { font-size: 56px; }
.b6 { font-weight: 600; } .b7 { font-weight: 700; }
.muted { color: var(--muted); }
.c4 { color: var(--c4); }
.lt { color: #E9E1F7; }
.cap { display: block; font-size: 13px; color: #D9CCF0; letter-spacing: .06em; text-transform: uppercase; }
.c-purple { color: var(--purple); }
.c-pdark { color: var(--purple-ink); }
.c-green, .green { color: var(--green); }
.green-ink { color: var(--green-ink); }
.c-teal-ink { color: var(--teal-ink); }
.c-teal-ink2 { color: #2E5257; }
.c-tan-ink { color: var(--tan-ink); }
.c-tan-ink2 { color: #6A5246; }

/* ---------- екран iPad ---------- */
.scr {
  min-height: 100vh;
  padding: calc(env(safe-area-inset-top) + 22px) calc(env(safe-area-inset-right) + 28px) calc(env(safe-area-inset-bottom) + 26px) calc(env(safe-area-inset-left) + 28px);
  display: flex; flex-direction: column; gap: 20px;
}
.hd h1 { margin: 0; font-size: 42px; line-height: 1.05; }
.g2 { display: grid; grid-template-columns: 380px minmax(0, 1fr); gap: 22px; flex: 1; min-height: 0; }
.g11 { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 22px; flex: 1; min-height: 0; }
.g2b { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; align-self: stretch; }
.g12b { display: grid; grid-template-columns: 1fr 2fr; gap: 14px; }
@media (max-width: 900px) {
  .g2, .g11 { grid-template-columns: minmax(0, 1fr); }
  .scr { padding-left: calc(env(safe-area-inset-left) + 18px); padding-right: calc(env(safe-area-inset-right) + 18px); }
}

.card { border-radius: 28px; padding: 22px; }
button.card { display: flex; flex-direction: column; gap: 16px; width: 100%; text-align: left; }
.bg-purple { background: var(--purple); color: #FFFFFF; }
.bg-purplep { background: var(--purple-p); }
.bg-yellow { background: var(--yellow); color: var(--yellow-ink); }
.bg-yellowp { background: var(--yellow-p); color: var(--yellow-ink); }
.bg-sand { background: var(--sand); }
.bg-coralp { background: var(--coral-p); color: var(--coral-ink); }
.bg-tealp { background: var(--teal-p); }
.bg-limep { background: var(--lime-p); color: var(--lime-ink); }
.bg-tanp { background: var(--tan-p); }

.pill { display: inline-flex; align-items: center; gap: 8px; border-radius: 999px; padding: 10px 18px 10px 14px; font-weight: 700; font-size: 20px; flex: none; }
.nugp { background: var(--yellow-p); color: #5A3E00; }
.nugw { background: var(--yellow-p); color: #5A3E00; font-size: 17px; padding: 7px 12px; gap: 4px; }
.sq { width: 52px; height: 52px; border-radius: 16px; background: var(--sand); display: flex; align-items: center; justify-content: center; flex: none; }

.bar { flex: 1; height: 14px; border-radius: 999px; background: var(--line); overflow: hidden; }
.bar > i { display: block; height: 100%; border-radius: 999px; background: var(--green); transition: width .3s; }
.bar > i.pur { background: var(--purple); }
.bar.dark { flex: none; background: var(--purple2); }
.bar.dark > i { background: var(--lime); }
.bar.yel { background: #FFE79A; height: 16px; }

.btn { display: flex; align-items: center; justify-content: center; gap: 10px; min-height: 64px; border-radius: 22px; font-weight: 600; font-size: 20px; padding: 0 22px; text-align: center; }
.btn-green { background: var(--green); color: #FFFFFF; }
.btn-sand { background: var(--sand); }
.btn-coral { background: var(--coral); color: var(--coral-ink); }
.btn-tan { background: var(--tan-p); color: var(--tan-ink); }
.btn-purplep { background: var(--purple-p); color: var(--purple); }
.btn-purple { background: var(--purple); color: #FFFFFF; }
.btn-yellow { background: var(--yellow); color: var(--yellow-ink); }
.link { display: inline-flex; align-items: center; gap: 6px; color: var(--purple); font-weight: 600; font-size: 16px; padding: 8px 0; align-self: center; }

/* ---------- головний ---------- */
.rank .av { width: 76px; height: 76px; border-radius: 24px; background: var(--purple2); display: flex; align-items: center; justify-content: center; color: var(--yellow); flex: none; }
.mis { display: flex; align-items: center; gap: 16px; }
.misic { width: 56px; height: 56px; border-radius: 18px; background: #FFE79A; display: flex; align-items: center; justify-content: center; flex: none; }
.lesson { display: flex; flex-direction: column; gap: 20px; }
.dots { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px; }
.dot { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.dot span { width: 64px; height: 64px; border-radius: 50%; background: var(--sand2); color: var(--c4); display: flex; align-items: center; justify-content: center; font-weight: 600; font-size: 21px; }
.dot em { font-style: normal; font-size: 15px; color: var(--c4); }
.dot.done span { background: var(--lime); color: var(--lime-ink); }
.dot.cur span { background: var(--purple); color: #FFFFFF; font-weight: 700; }
.dot.cur em { color: var(--purple); font-weight: 600; }
.tiles4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
@media (max-width: 700px) { .tiles4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.tile4 { border-radius: 24px; padding: 16px; display: flex; flex-direction: column; align-items: flex-start; gap: 4px; text-align: left; }
.tile4 .ti { width: 48px; height: 48px; border-radius: 16px; display: flex; align-items: center; justify-content: center; margin-bottom: 8px; }
.t-teal { background: var(--teal-p); } .t-teal .ti { background: var(--teal); color: #FFFFFF; } .t-teal .sub { color: #4F5A5C; }
.t-green { background: var(--lime-p); } .t-green .ti { background: var(--green); color: #FFFFFF; } .t-green .sub { color: #4C5A40; }
.t-tan { background: var(--tan-p); } .t-tan .ti { background: var(--tan); color: var(--tan-ink); } .t-tan .sub { color: #6A5246; }
.t-coral { background: var(--coral-p); } .t-coral .ti { background: var(--coral); color: var(--coral-ink); } .t-coral .sub { color: #6E3A33; }

/* ---------- урок ---------- */
.lhead { gap: 16px; }
.chip { flex: none; border-radius: 999px; padding: 9px 16px; font-size: 15px; font-weight: 600; max-width: 46%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ch-purple { background: var(--purple-p); color: var(--purple); }
.ch-teal { background: var(--teal-p); color: #00616E; }
.ch-yellow { background: var(--yellow-p); color: #5A3E00; }
.ch-green { background: var(--lime-p); color: var(--green-ink); }
.ch-tan { background: var(--tan-p); color: #6A3F2A; }
.lhead .pill { font-size: 18px; padding: 8px 14px 8px 10px; }
@media (max-width: 900px) { .lhead .pill { display: none; } }

.wcard { border-radius: 32px; padding: 28px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; text-align: center; min-height: 280px; }
.big { font-size: clamp(52px, 8.5vw, 100px); line-height: 1.05; word-break: break-word; }
.spkbig { width: 104px; height: 104px; border-radius: 50%; background: var(--purple); color: #FFFFFF; display: flex; align-items: center; justify-content: center; }
.pillbtn { height: 60px; border-radius: 999px; background: #FFFFFF; color: var(--purple); padding: 0 22px; display: flex; align-items: center; gap: 10px; font-size: 18px; font-weight: 600; }
.playbig { width: 190px; height: 190px; border-radius: 50%; background: var(--teal); color: #FFFFFF; display: flex; align-items: center; justify-content: center; }
.spkw { width: 68px; height: 68px; border-radius: 50%; background: #FFFFFF; color: var(--tan-ink); display: flex; align-items: center; justify-content: center; }

.mic { width: 150px; height: 150px; border-radius: 50%; background: var(--green); color: #FFFFFF; display: flex; align-items: center; justify-content: center; }
.mic.on { background: var(--coral); color: var(--coral-ink); animation: pulse 1.1s infinite; }
@keyframes pulse { 0% { box-shadow: 0 0 0 0 rgba(252, 109, 91, .45); } 100% { box-shadow: 0 0 0 40px rgba(252, 109, 91, 0); } }
.hint { background: var(--tan-p); color: var(--tan-ink); border-radius: 16px; padding: 10px 16px; font-size: 20px; letter-spacing: .08em; }

.fb { display: flex; align-items: center; gap: 12px; border-radius: 22px; padding: 16px 20px; font-size: 19px; line-height: 1.35; align-self: stretch; text-align: left; }
.fb.ok { background: var(--lime-p); color: var(--lime-ink); }
.fb.bad { background: var(--coral-p); color: var(--coral-ink); }
.fb.info { background: var(--sand); color: var(--ink); }
.plus { background: var(--lime); color: var(--lime-ink); border-radius: 999px; padding: 4px 11px; font-size: 15px; font-weight: 700; flex: none; }

.opts { display: grid; grid-template-columns: 1fr 1fr; grid-auto-rows: minmax(120px, 1fr); gap: 16px; flex: 1; }
.opt { position: relative; border-radius: 28px; background: var(--sand); font-size: 34px; font-weight: 500; padding: 10px; word-break: break-word; }
.opt.ok { background: var(--lime); color: var(--lime-ink); font-weight: 600; }
.opt.bad { background: var(--coral); color: var(--coral-ink); font-weight: 600; }
.okmark { position: absolute; top: 14px; right: 14px; width: 36px; height: 36px; border-radius: 50%; background: var(--lime-p); display: flex; align-items: center; justify-content: center; }
.nextrow { display: grid; grid-template-columns: minmax(0, 1fr) 210px; gap: 14px; align-items: stretch; }
.nextrow .fb { align-self: stretch; }

.orow { display: flex; align-items: center; gap: 14px; min-height: 84px; border-radius: 24px; background: var(--sand); padding: 0 18px 0 12px; }
.orow .spk { width: 60px; height: 60px; border-radius: 50%; background: #FFFFFF; color: var(--purple); display: flex; align-items: center; justify-content: center; flex: none; }
.orow .w { flex: 1; align-self: stretch; text-align: left; font-size: 30px; font-weight: 500; }
.orow .mk { width: 40px; height: 40px; border-radius: 50%; display: flex; align-items: center; justify-content: center; flex: none; }
.orow.ok { background: var(--lime); color: var(--lime-ink); } .orow.ok .spk, .orow.ok .mk { background: var(--lime-p); color: var(--lime-ink); }
.orow.bad { background: var(--coral-p); color: var(--coral-ink); } .orow.bad .spk { color: var(--coral-ink); } .orow.bad .mk { background: var(--coral); }

.pairs { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 20px; flex: 1; }
.pb { border-radius: 20px; background: var(--sand); font-size: 24px; font-weight: 500; display: flex; align-items: center; justify-content: center; gap: 10px; padding: 6px 10px; min-height: 56px; word-break: break-word; }
.pb.sel { background: var(--purple); color: #FFFFFF; font-weight: 600; }
.pb.m { background: var(--lime-m); color: #3E5A2A; }
.pb.bad { background: var(--coral); color: var(--coral-ink); font-weight: 600; }

.attempts i { width: 14px; height: 14px; border-radius: 50%; background: #E0DBD3; display: block; }
.attempts i.bad { background: var(--coral); }
.attempts i.cur { background: var(--green); }

.seg { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; background: var(--sand); border-radius: 20px; padding: 5px; }
.seg button { min-height: 50px; border-radius: 16px; font-size: 17px; font-weight: 500; color: var(--c4); padding: 4px 8px; }
.seg button.on { background: var(--purple); color: #FFFFFF; font-weight: 600; }

.slots { display: flex; justify-content: center; flex-wrap: wrap; gap: 10px; padding: 8px 0; }
.slot { width: 64px; height: 80px; border-radius: 18px; background: var(--sand); display: flex; align-items: center; justify-content: center; font-size: 40px; font-weight: 600; }
.slots.sm .slot { width: 48px; height: 62px; font-size: 30px; border-radius: 14px; }
.slot.f { background: var(--purple-p); color: var(--purple); }
.slot.n { background: var(--sand2); }
.slot.okc { background: var(--lime-m); color: var(--lime-ink); }
.slot.badc { background: var(--coral); color: var(--coral-ink); }
.tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-rows: 84px; gap: 14px; }
.tile { border-radius: 22px; background: var(--yellow); color: var(--yellow-ink); font-size: 38px; font-weight: 600; }
.tile.u { background: var(--sand); color: #8A8494; }
.tiles.parts .tile { font-size: 30px; }

.fld { width: 100%; min-height: 48px; border: 0; border-radius: 16px; background: var(--sand); padding: 0 14px; font-size: 16px; outline: none; }
.fld:focus { background: #EDE8E0; }
.fld.ta { height: 170px; padding: 12px 14px; line-height: 1.5; resize: none; }
.fld.bigin { min-height: 74px; font-size: 34px; font-weight: 600; letter-spacing: .06em; padding: 0 22px; border-radius: 22px; background: var(--sand); }
.hardg { flex: none; }
.hardg .wcard { min-height: 260px; }

/* ---------- мапа ---------- */
.trail { position: relative; }
.trail .ln { position: absolute; top: 44px; height: 8px; border-radius: 4px; }
.stops { position: relative; display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; }
.stop { display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; }
.stop .o { width: 92px; height: 92px; border-radius: 50%; background: #FFFFFF; display: flex; align-items: center; justify-content: center; }
.stop .i { width: 78px; height: 78px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: var(--line); color: #6B6577; }
.stop.done .i { background: var(--lime); color: var(--lime-ink); }
.stop.cur .o { background: var(--yellow-p); }
.stop.cur .i { background: var(--yellow); color: var(--yellow-ink); }
.stop.fort .i { background: var(--purple); color: var(--yellow); }
.stop b { font-size: 15px; font-weight: 600; }
.stop.lock b { color: var(--c4); }
.stop.cur b { color: #5A3E00; font-weight: 700; }
@media (max-width: 900px) {
  .stop .o { width: 68px; height: 68px; } .stop .i { width: 58px; height: 58px; } .trail .ln { top: 32px; }
  .stop b { font-size: 13px; }
}
.friend { display: flex; align-items: center; gap: 14px; background: #FFFFFF; border-radius: 20px; padding: 12px 14px; }
.friend .fa { width: 52px; height: 52px; border-radius: 50%; background: var(--lime); display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 20px; flex: none; }
.friend.wait { background: #F6FCEE; }
.friend.wait .fa { background: var(--sand2); color: var(--c4); }

/* ---------- герой ---------- */
.rk { display: flex; align-items: center; gap: 12px; min-height: 44px; }
.rk .b { width: 36px; height: 36px; border-radius: 50%; background: var(--sand2); color: #6B6577; display: flex; align-items: center; justify-content: center; flex: none; }
.rk.done .b { background: var(--lime); color: var(--lime-ink); }
.rk.cur { background: #FFFFFF; border-radius: 14px; margin: 0 -8px; padding: 0 8px; color: var(--purple); font-weight: 600; }
.rk.cur .b { background: var(--purple); color: var(--yellow); }
.rk.last .b { background: var(--yellow); color: var(--yellow-ink); }
.shop { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; flex: 1; }
.item { border-radius: 28px; padding: 22px; display: flex; flex-direction: column; gap: 10px; background: var(--sand); }
.item.own { background: var(--lime-p); }
.item .ib { width: 64px; height: 64px; border-radius: 20px; display: flex; align-items: center; justify-content: center; }
.price { align-self: flex-start; margin-top: auto; display: flex; align-items: center; gap: 6px; min-height: 46px; border-radius: 999px; padding: 0 18px; font-size: 16px; font-weight: 700; background: var(--line); color: var(--c4); }
.price.can { background: var(--yellow); color: var(--yellow-ink); }
.owned { align-self: flex-start; margin-top: auto; background: var(--lime); color: var(--lime-ink); border-radius: 999px; padding: 8px 14px; font-size: 14px; font-weight: 600; }

/* ---------- результат ---------- */
.stars { display: flex; justify-content: center; align-items: flex-end; gap: 14px; }
.stat3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; align-self: stretch; }
.stat3 > div { border-radius: 24px; padding: 18px; display: flex; flex-direction: column; gap: 4px; text-align: center; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chips span { background: #FFFFFF; border-radius: 999px; padding: 6px 13px; font-size: 15px; font-weight: 600; }
.chips.lg span { padding: 7px 14px; font-size: 16px; }
.chips span.ok { background: var(--lime); color: var(--lime-ink); }
.chips span.bad { background: #FFC2B9; color: var(--coral-ink); }

/* ---------- Speed Run ---------- */
.ringwrap { position: relative; width: 260px; height: 260px; }
.ringwrap .t { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; }

/* ---------- тато (телефон) ---------- */
.ph {
  max-width: 560px; margin: 0 auto;
  padding: calc(env(safe-area-inset-top) + 16px) 16px calc(env(safe-area-inset-bottom) + 104px);
  display: flex; flex-direction: column; gap: 14px;
}
.ph h1 { margin: 0; font-size: 28px; }
.tabs { position: fixed; left: 0; right: 0; bottom: 0; padding: 8px 12px calc(env(safe-area-inset-bottom) + 8px); background: rgba(255, 255, 255, .96); z-index: 20; }
.tabs > div { max-width: 536px; margin: 0 auto; display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; background: var(--sand); border-radius: 24px; padding: 6px; }
.tab { min-height: 56px; border-radius: 18px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; font-size: 12px; color: var(--c4); }
.tab.on { background: #FFFFFF; color: var(--purple); font-weight: 600; }
.k3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.k3 > div { border-radius: 20px; padding: 12px; display: flex; flex-direction: column; gap: 4px; }
.chart { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 8px; align-items: end; height: 118px; }
.chart > div { display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 4px; height: 100%; }
.chart i { display: block; width: 100%; border-radius: 8px; background: var(--green); min-height: 4px; }
.chart i.z { background: #D9D3CA; }
.chart i.td { background: var(--teal); }
.days { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 8px; text-align: center; font-size: 12px; color: var(--muted); }
.lst { display: flex; flex-direction: column; gap: 8px; }
.lst .li { display: flex; align-items: center; gap: 10px; font-size: 15px; }
.badge { border-radius: 999px; padding: 2px 9px; font-size: 12px; font-weight: 700; background: var(--coral); color: var(--coral-ink); flex: none; }
.badge.lo { background: #FFC2B9; }
.set { display: flex; flex-direction: column; background: var(--sand); border-radius: 20px; padding: 4px 16px; }
.set .sr { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 52px; font-size: 15px; }
.set .sr + .sr { border-top: 1px solid #E8E3DB; }
.step { display: flex; align-items: center; gap: 6px; }
.step button { width: 36px; height: 36px; border-radius: 12px; background: #FFFFFF; font-size: 20px; font-weight: 600; color: var(--purple); }
.step b { min-width: 34px; text-align: center; color: var(--purple); }
.mini { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; background: #FFFFFF; border-radius: 12px; padding: 3px; }
.mini button { min-height: 34px; border-radius: 10px; font-size: 13px; padding: 0 8px; color: var(--c4); }
.mini button.on { background: var(--purple); color: #FFFFFF; font-weight: 600; }
.danger { min-height: 50px; border-radius: 16px; background: var(--coral-p); color: var(--coral-ink); font-weight: 600; font-size: 15px; }
.note { border-radius: 20px; padding: 12px 14px; display: flex; align-items: center; gap: 12px; font-size: 14px; line-height: 1.4; }
.note .ni { width: 40px; height: 40px; border-radius: 14px; display: flex; align-items: center; justify-content: center; flex: none; }
.fchips { display: flex; gap: 6px; overflow-x: auto; white-space: nowrap; margin-right: -16px; padding-right: 16px; -webkit-overflow-scrolling: touch; }
.fchips button { flex: none; min-height: 36px; border-radius: 999px; background: var(--sand); padding: 0 14px; font-size: 13px; }
.fchips button.on { background: var(--purple); color: #FFFFFF; font-weight: 600; }
.searchf { display: flex; align-items: center; gap: 10px; min-height: 46px; border-radius: 16px; background: var(--sand); padding: 0 14px; color: var(--muted); }
.searchf input { flex: 1; border: 0; background: transparent; font-size: 16px; color: var(--ink); outline: none; min-width: 0; }
.tph { display: flex; align-items: center; justify-content: space-between; padding: 6px 2px 0; font-size: 14px; font-weight: 600; }
.tph button { color: var(--purple); font-size: 13px; font-weight: 600; padding: 6px 0; }
.wr { display: flex; align-items: center; gap: 10px; min-height: 58px; border-radius: 16px; background: var(--sand); padding: 0 10px 0 12px; }
.wr.s { background: var(--purple-p); }
.selc { width: 28px; height: 28px; border-radius: 50%; background: #E0DBD3; color: #FFFFFF; display: flex; align-items: center; justify-content: center; flex: none; }
.selc.on { background: var(--purple); }
.wt { flex: 1; min-width: 0; text-align: left; display: flex; flex-direction: column; padding: 8px 0; }
.wt b { font-size: 16px; font-weight: 600; }
.wt span { font-size: 13px; color: var(--muted); }
.spk2 { width: 38px; height: 38px; border-radius: 50%; background: #FFFFFF; color: var(--purple); display: flex; align-items: center; justify-content: center; flex: none; }
.st { border-radius: 999px; padding: 5px 10px; font-size: 12px; font-weight: 600; flex: none; }
.st-l { background: var(--lime); color: var(--lime-ink); }
.st-b { background: var(--purple-p); color: var(--purple); }
.st-r { background: #FFC2B9; color: var(--coral-ink); }
.sw { width: 52px; height: 32px; border-radius: 999px; background: #D9D3CA; padding: 3px; display: flex; justify-content: flex-start; flex: none; }
.sw.on { background: var(--green); justify-content: flex-end; }
.sw > i { width: 26px; height: 26px; border-radius: 50%; background: #FFFFFF; display: block; }
.bulk { position: fixed; left: 12px; right: 12px; bottom: calc(env(safe-area-inset-bottom) + 86px); max-width: 536px; margin: 0 auto; display: flex; align-items: center; gap: 8px; background: var(--purple); border-radius: 20px; padding: 8px 8px 8px 16px; color: #FFFFFF; z-index: 21; }
.bulk .grow { white-space: nowrap; }
.bulk button { min-height: 40px; border-radius: 14px; padding: 0 10px; font-size: 13px; font-weight: 600; background: var(--purple2); color: #FFFFFF; white-space: nowrap; flex: none; }
.bulk button.l { background: var(--lime); color: var(--lime-ink); font-weight: 700; }
.optc { border-radius: 18px; background: var(--sand); padding: 12px; text-align: left; display: flex; flex-direction: column; gap: 3px; }
.optc.on { background: var(--purple); color: #FFFFFF; }
.optc.on .muted { color: #E9E1F7; }
.filebtn { position: relative; overflow: hidden; display: flex; align-items: center; justify-content: center; gap: 10px; min-height: 56px; border-radius: 18px; background: var(--purple-p); color: var(--purple); font-weight: 600; cursor: pointer; }
.filebtn input { position: absolute; top: 0; left: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }
.pv { display: flex; flex-direction: column; gap: 6px; background: var(--sand); border-radius: 18px; padding: 12px 14px; font-size: 14px; }
.pv .d { width: 10px; height: 10px; border-radius: 50%; flex: none; }

.ov { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(30, 26, 43, .4); display: flex; align-items: flex-end; justify-content: center; z-index: 40; }
.sheet { background: #FFFFFF; border-radius: 24px 24px 0 0; width: 100%; max-width: 560px; padding: 20px 16px calc(env(safe-area-inset-bottom) + 20px); display: flex; flex-direction: column; gap: 12px; }

.pinw { min-height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 22px; padding: 24px; }
.pdots { display: flex; gap: 16px; }
.pdots i { width: 18px; height: 18px; border-radius: 50%; background: var(--sand2); display: block; }
.pdots i.on { background: var(--purple); }
.pdots.shake { animation: shake .4s; }
@keyframes shake { 0%, 100% { transform: translateX(0); } 25% { transform: translateX(-10px); } 75% { transform: translateX(10px); } }
.keypad { display: grid; grid-template-columns: repeat(3, 76px); gap: 14px; }
.keypad button { height: 76px; border-radius: 50%; background: var(--sand); font-size: 28px; font-weight: 500; }

.toast { position: fixed; left: 50%; top: calc(env(safe-area-inset-top) + 14px); transform: translateX(-50%); background: var(--ink); color: #FFFFFF; padding: 12px 18px; border-radius: 16px; font-size: 16px; z-index: 60; box-shadow: 0 8px 24px rgba(0, 0, 0, .15); max-width: 90vw; text-align: center; transition: opacity .3s; }