/* Kiki's app — a phone app on every screen size.
   One column, top bar + bottom tabs. On bigger screens it stays phone-width, centred.
   Colours and fonts come from /css/app.css and the approved Kiki design. */

/* ── App frame ─────────────────────────────────────────── */
.kiki-app { --appw: 520px; }
.kiki-app .shell { display: block; max-width: var(--appw); margin: 0 auto; min-height: 100vh; position: relative; }
.kiki-app .shell > div { min-width: 0; }
.kiki-app .side { display: none !important; }
.kiki-app .mtop { display: flex; align-items: center; gap: 10px; position: sticky; top: 0; z-index: 20; padding: calc(8px + env(safe-area-inset-top, 0px)) 14px 8px; background: rgba(8,11,32,.92); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-bottom: 1px solid var(--line); }
.kiki-app .mtop .logo-link img { height: 40px; width: auto; display: block; }
.kiki-app .mtop .back { display: inline-flex; align-items: center; gap: 4px; min-height: 44px; padding: 0 12px 0 6px; border-radius: 12px; color: var(--text); text-decoration: none; font-weight: 700; font-size: .95rem; background: rgba(255,255,255,.06); border: 1px solid var(--line); }
.kiki-app .mtop .sp { flex: 1; }
.kiki-app .mtop .iconbtn { width: 44px; height: 44px; }
.kiki-app .main, .main.kiki { max-width: none; width: 100%; padding: 14px 14px calc(104px + var(--safe-b)); }
.kiki-app .tabbar { display: grid; grid-template-columns: repeat(5, 1fr); position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; max-width: var(--appw); margin: 0 auto; background: rgba(10,13,38,.97); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-top: 1px solid var(--line); padding: 6px 4px calc(6px + var(--safe-b)); }
.kiki-app .tabbar a { display: grid; justify-items: center; gap: 2px; min-height: 52px; align-content: center; color: var(--dim); text-decoration: none; font-size: .68rem; font-weight: 800; letter-spacing: .4px; }
.kiki-app .tabbar a .ico { font-size: 1.35rem; }
.kiki-app .tabbar a.on { color: var(--pink); }
@media (min-width: 560px) { .kiki-app .shell { border-left: 1px solid var(--line); border-right: 1px solid var(--line); } }

/* Everything stacks in one column, whatever the screen width */
.kiki-app .grid, .kiki-app .g2, .kiki-app .g3, .kiki-app .g4 { grid-template-columns: minmax(0, 1fr) !important; }
.kiki-app h1 { font-size: 1.45rem; }
.kiki-app .card { padding: 16px; }
.kiki-app .btn { min-height: 46px; }
.kiki-app .btn.sm { min-height: 40px; }
.kiki-app .row > .btn { flex: 1 1 auto; }
.kiki-app .item { min-height: 56px; }
.kiki-app .modal-bg { place-items: end center; padding: 0; }
.kiki-app .modal { width: 100%; max-width: var(--appw); border-radius: 22px 22px 0 0; max-height: 90vh; padding: 20px 16px calc(20px + var(--safe-b)); }
.kiki-app #toast { bottom: calc(92px + var(--safe-b)); width: min(480px, 92vw); }
.kiki-app .tbl th { width: 34%; }
.kiki-app .checks label { min-height: 44px; }
.fmt { display: inline-block; background: rgba(255,255,255,.18); color: #fff; font-size: .7rem; font-weight: 800; letter-spacing: .8px; padding: 3px 8px; border-radius: 6px; }

/* ── Page header ───────────────────────────────────────── */
.k-head { margin-bottom: 14px; }
.k-head h1 { margin: 0; text-wrap: balance; }
.k-head .sub { color: var(--muted); font-size: .95rem; margin-top: 2px; }
.k-head .extra { margin-top: 10px; display: flex; gap: 8px; flex-wrap: wrap; }
.k-hello { display: flex; align-items: center; gap: 12px; padding: 14px; border-radius: 20px; background: rgba(13,18,52,.75); border: 1px solid var(--line); margin-bottom: 12px; }
.k-hello .sun { font-size: 2.2rem; filter: drop-shadow(0 0 12px rgba(255,225,26,.6)); }
.k-hello h1 { margin: 0; font-size: 1.5rem; }
.k-hello .sub { color: var(--muted); font-size: .95rem; }
.k-hello .chips { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 8px; }
.k-hello .chips .pill { padding: 5px 10px; font-size: .78rem; }
.k-avatar { display: flex; align-items: center; gap: 10px; text-decoration: none; color: inherit; }
.k-avatar .pic { width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center; font-family: var(--display); font-weight: 700; font-size: 1.15rem; background: linear-gradient(135deg, #FF2E93, #9B4DFF); box-shadow: 0 0 0 2px #FF2E93, 0 0 14px rgba(255,46,147,.5); overflow: hidden; flex: none; }
.k-avatar .pic img { width: 100%; height: 100%; object-fit: cover; }
.k-avatar .nm { font-family: var(--display); font-weight: 700; font-size: 1.15rem; line-height: 1.1; }
.k-avatar .md { font-size: .78rem; color: var(--muted); display: flex; align-items: center; gap: 6px; }
.k-avatar .md::after { content: ''; width: 9px; height: 9px; border-radius: 50%; background: var(--green); box-shadow: 0 0 8px var(--green); }

/* ── Do now / Next ─────────────────────────────────────── */
.k-now { display: grid; gap: 10px; margin-bottom: 12px; }
.k-now .blk { border-radius: 18px; padding: 14px; display: grid; gap: 10px; }
.k-now .doit { background: linear-gradient(135deg, #FF2E93, #B0177E); box-shadow: 0 10px 30px rgba(255,46,147,.3); }
.k-now .nxt { background: rgba(19,26,64,.9); border: 1px solid var(--line); grid-template-columns: auto 1fr; align-items: center; }
.k-now .tag { justify-self: start; font-family: var(--display); font-weight: 700; font-size: .78rem; letter-spacing: 1px; padding: 4px 9px; border-radius: 8px; background: rgba(0,0,0,.3); white-space: nowrap; }
.k-now .what { min-width: 0; }
.k-now .what b { display: block; font-family: var(--display); font-size: 1.3rem; font-weight: 700; line-height: 1.2; }
.k-now .nxt .what b { font-size: 1.05rem; }
.k-now .what span { font-size: .88rem; opacity: .9; }
.k-now .row { display: grid; grid-template-columns: repeat(auto-fit, minmax(96px, 1fr)); gap: 8px; }
.k-now .row .btn { width: 100%; }

/* ── Cards ─────────────────────────────────────────────── */
.k-row1 { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; margin-bottom: 12px; }
.k-card { border-radius: 20px; padding: 16px; position: relative; overflow: hidden; border: 1.5px solid transparent; }
.k-card h4 { font-family: var(--display); font-weight: 700; font-size: .8rem; letter-spacing: 1px; text-transform: uppercase; margin: 0; padding: 5px 10px; border-radius: 8px; display: inline-flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.k-card.show { background: linear-gradient(135deg, #3C0B5E, #8E1670 55%, #E0247F); border-color: rgba(255,46,147,.6); box-shadow: 0 0 30px rgba(255,46,147,.25); display: block; }
.k-card.show h4 { background: rgba(0,0,0,.35); }
.k-card.show .name { font-family: var(--display); font-weight: 700; font-size: 1.5rem; line-height: 1.1; margin: 12px 0 8px; max-width: 72%; }
.k-card.show .segs { font-size: .92rem; line-height: 1.5; max-width: 66%; }
.k-card.show .when { margin-top: 12px; font-weight: 700; }
.k-card.show .art { position: absolute; right: -14px; bottom: -14px; width: 34%; max-width: 150px; }
.k-card.show .art .pic { width: 100%; aspect-ratio: 1; border-radius: 50%; display: grid; place-items: center; font-size: 2.8rem; background: radial-gradient(circle at 40% 35%, rgba(255,255,255,.25), transparent 60%), linear-gradient(135deg, #FF5FAF, #9B4DFF); box-shadow: 0 0 40px rgba(255,46,147,.5); }
.k-card.prod { background: linear-gradient(135deg, #2E2205, #6B4A06 60%, #A57A0A); border-color: rgba(255,225,26,.55); box-shadow: 0 0 30px rgba(255,200,0,.18); }
.k-card.prod h4 { background: rgba(0,0,0,.35); color: #FFE9A8; }
.k-card.prod .pname { font-family: var(--display); font-weight: 700; font-size: 1.35rem; margin-top: 12px; max-width: 62%; line-height: 1.15; }
.k-card.prod .pcat { opacity: .85; }
.k-card.prod .badge { display: inline-block; margin: 10px 0 6px; padding: 5px 12px; border-radius: 8px; background: var(--yellow); color: #231800; font-weight: 800; font-size: .75rem; letter-spacing: .5px; }
.k-card.prod .pp { font-family: var(--display); font-weight: 700; font-size: 1.8rem; }
.k-card.prod .ps { color: rgba(255,255,255,.65); text-decoration: line-through; font-weight: 600; }
.k-card.prod .pimg { position: absolute; right: 14px; top: 48px; width: 30%; max-width: 120px; aspect-ratio: 1; border-radius: 16px; display: grid; place-items: center; font-size: 2.6rem; background: rgba(0,0,0,.18); overflow: hidden; }
.k-card.prod .pimg img { width: 100%; height: 100%; object-fit: contain; }
.k-card.prod .go { position: absolute; right: 14px; bottom: 14px; width: 46px; height: 46px; border-radius: 12px; background: var(--yellow); color: #231800; display: grid; place-items: center; font-size: 1.2rem; font-weight: 800; text-decoration: none; }
.k-card.mission { background: linear-gradient(160deg, #06303A, #0B2B3E); border-color: rgba(20,211,255,.45); box-shadow: 0 0 30px rgba(20,211,255,.15); }
.k-card.mission h4 { background: rgba(20,211,255,.15); color: #B6F2FF; }
.k-check { display: flex; align-items: center; gap: 12px; padding: 6px 2px; min-height: 48px; cursor: pointer; border: 0; background: none; color: inherit; width: 100%; text-align: left; font-size: .98rem; }
.k-check .ic { width: 30px; height: 30px; border-radius: 8px; display: grid; place-items: center; flex: none; font-size: .95rem; }
.k-check .tx { flex: 1; min-width: 0; }
.k-check .box { width: 26px; height: 26px; border-radius: 50%; border: 2px solid var(--green); flex: none; display: grid; place-items: center; color: #06303A; font-weight: 900; font-size: .8rem; }
.k-check.done .box { background: var(--green); box-shadow: 0 0 10px var(--green); }
.k-check.done .tx { opacity: .6; text-decoration: line-through; }
.k-card.prog { background: linear-gradient(160deg, #1B1050, #2A1366); border-color: rgba(155,77,255,.55); box-shadow: 0 0 30px rgba(155,77,255,.2); }
.k-card.prog h4 { background: rgba(155,77,255,.2); color: #E3D1FF; }
.k-prog { display: flex; align-items: center; gap: 16px; margin-top: 14px; }
.k-ring { --p: 0; width: 112px; height: 112px; flex: none; border-radius: 50%; display: grid; place-items: center; background: conic-gradient(#22E36F, #14D3FF calc(var(--p) * 1%), rgba(255,255,255,.08) 0); }
.k-ring > div { width: 88px; height: 88px; border-radius: 50%; background: #170E45; display: grid; place-items: center; text-align: center; font-family: var(--display); font-size: 1.7rem; font-weight: 700; line-height: 1; }
.k-ring small { display: block; font-family: var(--body); font-size: .62rem; color: var(--muted); margin-top: 4px; font-weight: 600; }
.k-prog ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; font-size: .9rem; min-width: 0; }
.k-prog li { display: flex; gap: 8px; align-items: center; }
.k-prog li::before { content: ''; width: 20px; height: 20px; flex: none; border-radius: 50%; background: var(--green); display: grid; place-items: center; font-size: .7rem; font-weight: 900; color: #08301A; }
.k-prog li.no::before { background: rgba(255,255,255,.15); content: ''; }

/* ── Live studio ───────────────────────────────────────── */
.k-row2 { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; margin-bottom: 12px; }
.k-studio { border-radius: 22px; border: 1.5px solid rgba(255,46,147,.4); background: radial-gradient(400px 260px at 60% 30%, rgba(155,77,255,.25), transparent 70%), linear-gradient(160deg, #120B33, #1C0C3A); overflow: hidden; }
.k-studio .bar { display: flex; align-items: center; gap: 8px; padding: 12px 14px; background: rgba(0,0,0,.35); flex-wrap: wrap; }
.k-studio .bar b { font-family: var(--display); font-size: 1.05rem; letter-spacing: .5px; }
.k-studio .bar .note { width: 100%; font-size: .8rem; color: var(--muted); }
.k-studio .bar .btn { width: 100%; }
.offair { background: #2A2F55; color: #C9CCF0; font-weight: 800; font-size: .72rem; letter-spacing: 1px; padding: 4px 8px; border-radius: 8px; }
.k-studio .body { display: grid; gap: 12px; padding: 12px; }
.k-pcard { background: rgba(10,12,34,.85); border: 1px solid var(--line); border-radius: 16px; padding: 12px; display: grid; gap: 8px; }
.k-pcard .top { display: flex; gap: 10px; align-items: center; }
.k-pcard .thumb { width: 64px; height: 64px; border-radius: 12px; background: rgba(255,255,255,.08); display: grid; place-items: center; font-size: 1.8rem; overflow: hidden; flex: none; }
.k-pcard .thumb img { width: 100%; height: 100%; object-fit: contain; background: #fff; }
.k-pcard .nm { font-family: var(--display); font-weight: 700; font-size: 1.05rem; }
.k-pcard .tag { justify-self: start; display: inline-block; background: var(--red); color: #fff; font-weight: 800; font-size: .72rem; padding: 3px 8px; border-radius: 6px; }
.k-pcard .pr { font-family: var(--display); font-weight: 700; font-size: 1.6rem; }
.k-pcard .buy { display: grid; place-items: center; min-height: 50px; border-radius: 12px; background: var(--yellow); color: #231800; font-family: var(--display); font-weight: 700; font-size: 1.1rem; text-decoration: none; }
.k-pcard .qr { display: flex; gap: 12px; align-items: center; background: rgba(255,255,255,.05); padding: 8px; border-radius: 12px; }
.k-pcard .qr .code { width: 76px; height: 76px; background: #fff; border-radius: 8px; padding: 4px; flex: none; display: grid; place-items: center; color: #000; font-size: .6rem; text-align: center; }
.k-pcard .qr .code img, .k-pcard .qr .code canvas { width: 68px !important; height: 68px !important; }
.k-stage { display: none; }
.k-comments { display: none; }
.k-contact { display: grid; gap: 2px; padding: 8px 12px 12px; background: rgba(0,0,0,.35); }
.k-contact a, .k-contact div { display: flex; gap: 12px; align-items: center; color: #fff; text-decoration: none; min-height: 56px; }
.k-contact .ci { width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center; font-size: 1.2rem; flex: none; }
.k-contact small { display: block; font-weight: 700; font-size: .7rem; letter-spacing: .8px; opacity: .85; }
.k-contact strong { font-family: var(--display); font-size: 1.02rem; user-select: all; }

/* ── Schedule ──────────────────────────────────────────── */
.k-sched { border-radius: 22px; background: rgba(13,18,52,.85); border: 1px solid var(--line); padding: 14px 12px; }
.k-sched .head, .k-feat .head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; }
.k-sched .head b, .k-feat .head b { font-family: var(--display); font-size: 1rem; letter-spacing: .5px; text-transform: uppercase; }
.k-sched .head a, .k-feat .head a { min-height: 44px; display: inline-flex; align-items: center; }
.k-slot { display: grid; grid-template-columns: 78px minmax(0, 1fr); border-radius: 12px; overflow: hidden; margin-bottom: 6px; background: rgba(255,255,255,.03); border: 1px solid var(--line); cursor: pointer; min-height: 56px; }
.k-slot .tm { padding: 8px 6px; font-weight: 700; font-size: .82rem; color: var(--muted); display: grid; place-items: center; background: rgba(0,0,0,.2); text-align: center; }
.k-slot .ev { padding: 8px 10px; display: flex; gap: 10px; align-items: center; min-width: 0; }
.k-slot .ev .ic { width: 34px; height: 34px; border-radius: 9px; display: grid; place-items: center; flex: none; }
.k-slot .ev .t { font-weight: 700; font-size: .92rem; }
.k-slot .ev .d { font-size: .75rem; color: var(--muted); }
.k-slot.now { border-color: var(--pink); background: rgba(255,46,147,.14); }
.k-slot.now .tm { background: var(--pink); color: #fff; }
.k-slot.done { opacity: .5; }
.nowtag { display: inline-block; background: var(--pink); color: #fff; font-size: .62rem; font-weight: 800; padding: 2px 6px; border-radius: 5px; margin-top: 2px; }

/* ── Action tiles ──────────────────────────────────────── */
.k-tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-bottom: 12px; }
.k-tiles a, .k-tiles button { border-radius: 16px; padding: 14px 8px; text-align: center; color: #fff; text-decoration: none; display: grid; gap: 4px; justify-items: center; align-content: center; border: 1px solid rgba(255,255,255,.12); cursor: pointer; min-height: 100px; font: inherit; }
.k-tiles .ico { font-size: 1.6rem; }
.k-tiles b { font-family: var(--display); font-size: .95rem; font-weight: 700; letter-spacing: .3px; }
.k-tiles span { font-size: .75rem; opacity: .85; }
.k-tiles .golive { grid-column: 1 / -1; display: flex; gap: 14px; justify-content: center; align-items: center; min-height: 76px; background: linear-gradient(135deg, #FF3B5C, #C8123F); box-shadow: 0 8px 26px rgba(255,59,92,.35); }
.k-tiles .golive b { font-size: 1.3rem; display: block; text-align: left; }
.k-tiles .golive .ico { font-size: 2rem; }
.k-tiles .soon { position: relative; }
.k-tiles .soon::after { content: attr(data-phase); position: absolute; top: 6px; right: 6px; font-size: .58rem; font-weight: 800; padding: 2px 5px; border-radius: 5px; background: rgba(0,0,0,.35); }

/* ── Featured products (swipe) ─────────────────────────── */
.k-feat { border-radius: 22px; background: rgba(13,18,52,.85); border: 1px solid var(--line); padding: 14px 12px; }
.k-carousel .arr { display: none; }
.k-track { display: flex; gap: 10px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; padding: 2px; -webkit-overflow-scrolling: touch; }
.k-track::-webkit-scrollbar { display: none; }
.k-fp { flex: 0 0 78%; max-width: 260px; scroll-snap-align: start; background: #fff; color: #111; border-radius: 14px; padding: 10px; display: grid; grid-template-columns: 68px minmax(0, 1fr); gap: 10px; text-decoration: none; position: relative; min-height: 96px; }
.k-fp .im { width: 68px; height: 68px; border-radius: 10px; display: grid; place-items: center; font-size: 2rem; background: #F3F3F8; overflow: hidden; }
.k-fp .im img { width: 100%; height: 100%; object-fit: contain; }
.k-fp .nm { font-weight: 700; font-size: .9rem; margin-top: 18px; }
.k-fp .pr { font-family: var(--display); font-weight: 700; font-size: 1.15rem; }
.k-fp .st { font-size: .75rem; color: #888; text-decoration: line-through; }
.k-fp .bd { position: absolute; top: 8px; right: 8px; font-size: .62rem; font-weight: 800; padding: 3px 7px; border-radius: 6px; }
.bd.top { background: #FFE11A; color: #3A2A00; } .bd.stock { background: #CFF8DE; color: #0B6B33; } .bd.hot { background: #FF3B5C; color: #fff; } .bd.new { background: #CDE6FF; color: #0B4A8F; } .bd.unv { background: #FFE6C2; color: #7A4A00; }
.k-fp .cart { position: absolute; right: 8px; bottom: 8px; width: 34px; height: 34px; border-radius: 9px; background: #FF2E93; color: #fff; display: grid; place-items: center; font-size: 1rem; }

/* ── Calendar ──────────────────────────────────────────── */
.k-week { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; }
.k-day { border-radius: 16px; background: rgba(19,26,64,.9); border: 1px solid var(--line); padding: 12px 14px; display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 4px 12px; }
.k-day .when { grid-row: span 6; }
.k-day.today { border-color: var(--pink); box-shadow: 0 0 20px rgba(255,46,147,.25); }
.k-day .dn { font-family: var(--display); font-weight: 700; }
.k-day .dd { font-size: .8rem; color: var(--muted); }
.k-weeknav { display: grid; grid-template-columns: 1fr 1.4fr 1fr; gap: 8px; margin-bottom: 12px; }

/* ── Telecast on a phone ───────────────────────────────── */
.kiki-app .tc-bar { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; padding: calc(8px + env(safe-area-inset-top, 0px)) 8px 8px; }
.kiki-app .tc-bar .btn { min-height: 44px; padding: 6px 4px; width: 100%; font-size: .9rem; }
.kiki-app .tc-bar .lbl { display: none; }
.kiki-app .tc-bar .chip { grid-column: 1 / -1; justify-self: center; }
.kiki-app .tc-bar #tc-speed { display: grid; place-items: center; font-size: 1rem; }
.kiki-app .tc-facts { flex-wrap: nowrap; }
.kiki-app .tc-view { padding: 40vh 18px 60vh; }
.kiki-app .safe { left: 8px; right: 8px; max-width: calc(var(--appw) - 16px); margin: 0 auto; max-height: 75vh; overflow-y: auto; }
.k-row2 .k-sched { order: -1; }
.k-tiles > :last-child:nth-child(even) { grid-column: 1 / -1; }

/* ── Kiki Coach ────────────────────────────────────────── */
.coach-fab { position: fixed; right: max(14px, calc(50vw - var(--appw) / 2 + 14px)); bottom: calc(80px + var(--safe-b)); z-index: 25; display: flex; align-items: center; gap: 6px; min-height: 48px; padding: 0 16px; border-radius: 999px; background: linear-gradient(135deg, #FF2E93, #9B4DFF); color: #fff; text-decoration: none; font-family: var(--display); font-weight: 700; font-size: .95rem; box-shadow: 0 8px 24px rgba(155,77,255,.45); }
.coach-fab span { font-size: 1.15rem; }
.coach { display: grid; gap: 10px; }
#coach-log { display: grid; gap: 10px; }
.cb { max-width: 88%; padding: 12px 14px; border-radius: 18px; line-height: 1.5; font-size: .97rem; }
.cb p { margin: 0 0 .5em; } .cb p:last-child { margin: 0; }
.cb ul, .cb ol { margin: .2em 0 .6em; padding-left: 1.2em; } .cb li { margin: .25em 0; }
.cb.ai { justify-self: start; background: linear-gradient(160deg, #1B1050, #24135A); border: 1px solid rgba(155,77,255,.45); border-bottom-left-radius: 6px; }
.cb.me { justify-self: end; background: linear-gradient(135deg, #FF2E93, #C0157A); color: #fff; border-bottom-right-radius: 6px; }
.cb.thinking { color: var(--muted); display: flex; align-items: center; gap: 8px; }
.cb.err { border-color: rgba(255,77,94,.5); color: #FFB3BB; }
.dots { display: inline-flex; gap: 4px; } .dots i { width: 7px; height: 7px; border-radius: 50%; background: var(--pink); animation: dot 1s infinite ease-in-out; } .dots i:nth-child(2) { animation-delay: .15s; } .dots i:nth-child(3) { animation-delay: .3s; }
@keyframes dot { 0%, 80%, 100% { opacity: .25; transform: translateY(0); } 40% { opacity: 1; transform: translateY(-3px); } }
@media (prefers-reduced-motion: reduce) { .dots i { animation: none; } }
.starters { display: grid; gap: 8px; }
.chip-btn { text-align: left; min-height: 48px; padding: 10px 14px; border-radius: 14px; border: 1px solid rgba(155,77,255,.45); background: rgba(155,77,255,.12); color: var(--text); font: 600 .92rem var(--body); cursor: pointer; }
.coach-box { position: sticky; bottom: calc(76px + var(--safe-b)); display: grid; grid-template-columns: minmax(0, 1fr) 54px; gap: 8px; align-items: end; padding: 8px; border-radius: 18px; background: rgba(10,13,38,.97); border: 1px solid var(--line); }
.coach-box textarea { min-height: 48px; max-height: 140px; resize: none; }
.coach-box .btn { min-height: 48px; padding: 0; }
.starters[hidden] { display: none; }


/* ── Line icons (Option B · Fine Line, Phosphor Light) ─────────────── */
.li { width: 1em; height: 1em; display: inline-block; vertical-align: -0.16em; flex: none; }
.li-neon { width: 1em; height: 1em; display: inline-block; vertical-align: -0.16em; flex: none; -webkit-mask-size: contain; mask-size: contain; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center; background: linear-gradient(135deg, #FF3B5C, #FF8A00 25%, #FFE11A 42%, #22E36F 58%, #14D3FF 72%, #3B7BFF 85%, #FF2E93); filter: drop-shadow(0 0 5px rgba(255,46,147,.55)); }
.tinted { border: 1px solid; }
.k-check .ic { font-size: 18px; }
.k-check .box { font-size: 15px; }
.k-slot .ev .ic { font-size: 20px; }
.kiki-app .tabbar a .ico { font-size: 1.55rem; line-height: 1; }
.kiki-app .mtop .iconbtn { font-size: 1.35rem; }
.k-hello .sun { color: #FFE11A; font-size: 2.3rem; line-height: 1; }
.k-card.show .art .pic { color: #fff; }
.k-card.prod .pimg { color: #FFE9A8; }
.k-pcard .thumb { color: #C9B6FF; }
.k-fp .im { color: #9B4DFF; }
.k-studio .bar .bi { color: #FF2E93; font-size: 1.25rem; line-height: 1; }
.k-tiles .ico { line-height: 1; }
.mi-ico { font-size: 1.4rem; color: #C9B6FF; line-height: 1; display: inline-flex; }
.kiki-app .tc-bar .btn .li { width: 1.45em; height: 1.45em; }
.kiki-app #toast .t { display: flex; gap: 10px; align-items: center; }
.kiki-app #toast .t > .li { font-size: 1.25rem; color: #C9B6FF; }
.kiki-app #toast .t.ok > .li { color: var(--green); }
.kiki-app #toast .t.err > .li { color: #FF8A95; }
.k-head h1 .li, .modal h2 .li { color: #C9B6FF; }
.k-prog li::before { content: ''; background: var(--green) url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%20256%20256%22%20fill%3D%22%2308301A%22%3E%3Cpath%20stroke%3D%22%2308301A%22%20stroke-width%3D%228%22%20d%3D%22M228.24%2C76.24l-128%2C128a6%2C6%2C0%2C0%2C1-8.48%2C0l-56-56a6%2C6%2C0%2C0%2C1%2C8.48-8.48L96%2C191.51%2C219.76%2C67.76a6%2C6%2C0%2C0%2C1%2C8.48%2C8.48Z%22%3E%3C/path%3E%3C/svg%3E") center / 13px no-repeat; }
.k-card.prod .ready-btn { margin-top: 10px; background: #fff; color: #5A3E00; border: 0; font-weight: 800; max-width: 62%; }