.bkp-app { --bkp-ink:var(--byleron-text,#18212a); --bkp-muted:var(--byleron-muted,#5f6b76); --bkp-surface:var(--byleron-surface,#fff); --bkp-soft:var(--byleron-soft,#f0f7f6); --bkp-border:var(--byleron-border,#dfe9e7); --bkp-mint:var(--byleron-primary,#3bcdaa); --bkp-purple:var(--byleron-purple,#9973dc); width:min(100% - 24px,1180px); margin:24px auto; color:var(--bkp-ink); font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; line-height:1.5; }
.bkp-app *, .bkp-app *::before, .bkp-app *::after { box-sizing:border-box; }
.bkp-app button,.bkp-app input,.bkp-app select { font:inherit; }
.bkp-app button:focus-visible,.bkp-app input:focus-visible,.bkp-app select:focus-visible { outline:4px solid rgba(105,187,245,.55); outline-offset:2px; }
.bkp-app [hidden] { display:none!important; }
.bkp-back { display:inline-flex; min-height:48px; align-items:center; gap:8px; margin:0 0 12px; padding:10px 16px; border:2px solid var(--bkp-border,#dfe9e7); border-radius:15px; background:var(--bkp-surface,#fff); color:var(--bkp-ink,#18212a); font-weight:900; text-decoration:none; box-shadow:0 5px 16px rgba(24,33,42,.06); }
.bkp-back:hover { border-color:var(--bkp-mint,#3bcdaa); background:var(--bkp-soft,#f0f7f6); }
.bkp-back:focus-visible { outline:4px solid rgba(105,187,245,.55); outline-offset:2px; }
.bkp-page-nav { display:flex; flex-wrap:wrap; gap:9px; }
.bkp-hero { padding:40px clamp(20px,5vw,60px); border:1px solid var(--bkp-border); border-radius:30px; background:radial-gradient(circle at 90% 0,rgba(255,213,104,.34),transparent 30%),linear-gradient(145deg,#effcf8,#f4efff); text-align:center; }
.bkp-eyebrow { margin:0 0 7px; color:#168f73; font-size:12px; font-weight:900; letter-spacing:.1em; text-transform:uppercase; }
.bkp-hero h2 { margin:0; font-size:clamp(38px,7vw,68px); letter-spacing:-.055em; line-height:1; }
.bkp-hero p:last-child { margin:13px auto 0; max-width:680px; color:var(--bkp-muted); font-size:17px; }
.bkp-layout { display:grid; grid-template-columns:1fr; gap:20px; margin-top:0; }
.bkp-sidebar,.bkp-panel { border:1px solid var(--bkp-border); border-radius:26px; background:var(--bkp-surface); box-shadow:0 12px 34px rgba(24,33,42,.08); }
.bkp-sidebar { align-self:start; padding:18px; }
.bkp-sidebar__head { display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:13px; }
.bkp-sidebar h3,.bkp-panel h3 { margin:0; font-size:22px; }
.bkp-button { min-height:48px; padding:9px 15px; border:1px solid var(--bkp-border); border-radius:14px; background:#fff; color:var(--bkp-ink); cursor:pointer; font-weight:850; }
.bkp-button--primary { border-color:#168f73; background:var(--bkp-mint); color:#063e37; }
.bkp-button--danger { color:#9b3025; }
.bkp-profile-list { display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,280px)); justify-content:start; gap:12px; }
.bkp-profile-card { display:grid; grid-template-columns:64px minmax(0,1fr); align-items:center; gap:10px; width:100%; min-height:92px; padding:10px; border:2px solid var(--bkp-border); border-radius:18px; background:#fff; color:var(--bkp-ink); cursor:pointer; text-align:left; }
.bkp-profile-card.is-active { border-color:var(--bkp-purple); background:#f6f1ff; }
.bkp-profile-card > span { display:grid; }
.bkp-profile-card strong { font-size:17px; }
.bkp-profile-card small { color:var(--bkp-muted); font-size:11px; }
.bkp-profile-card em { grid-column:2; justify-self:start; margin-top:-10px; color:#6947a7; font-size:10px; font-style:normal; font-weight:900; text-transform:uppercase; }
.bkp-main { display:contents; }
.bkp-panel { padding:clamp(20px,4vw,38px); }
.bkp-overview { display:grid; grid-column:1; grid-template-columns:190px 1fr auto; align-items:center; gap:26px; background:linear-gradient(145deg,#effcf8,#f7f2ff); }
.bkp-current-head { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:10px; margin-bottom:8px; }
.bkp-current-head .bkp-eyebrow { margin:0; }
.bkp-overview__avatar { display:grid; min-height:240px; place-items:center; overflow:hidden; border-radius:22px; background:rgba(255,255,255,.72); }
.bkp-overview__copy h2 { margin:0; font-size:clamp(34px,5vw,56px); letter-spacing:-.05em; line-height:1; }
.bkp-overview__copy > p:not(.bkp-eyebrow,.bkp-status) { margin:10px 0; color:var(--bkp-muted); }
.bkp-overview__favorites { color:#6947a7; font-size:13px; font-weight:800; text-transform:capitalize; }
.bkp-overview-actions { display:grid; gap:9px; min-width:145px; }
.bkp-voice-panel { grid-column:1/-1; background:linear-gradient(145deg,#fff,#effcf8); }
.bkp-voice-panel__head { display:flex; align-items:center; justify-content:space-between; gap:18px; margin-bottom:16px; }
.bkp-voice-panel__head p:last-child { margin:5px 0 0; color:var(--bkp-muted); }
.bkp-voice-panel__head > span { display:grid; flex:0 0 58px; width:58px; aspect-ratio:1; place-items:center; border-radius:18px; background:#dcf8f1; font-size:30px; }
.bkp-voice-controls { display:grid; grid-template-columns:2fr 1fr; gap:14px; }
.bkp-editor { display:grid; grid-template-columns:240px 1fr; gap:28px; align-items:start; }
[data-bkp-editor-panel], .bkp-main > .bkp-panel:last-child { grid-column:1/-1; }
.bkp-avatar-stage { display:grid; min-height:300px; place-items:center; border-radius:24px; background:radial-gradient(circle at 50% 34%,#fff 0 28%,transparent 29%),linear-gradient(145deg,#dff7f1,#e9e2ff); overflow:hidden; }
.bkp-fields { display:grid; grid-template-columns:repeat(2,1fr); gap:14px; }
.bkp-field { display:grid; gap:5px; color:var(--bkp-muted); font-size:12px; font-weight:850; }
.bkp-field input,.bkp-field select { width:100%; min-height:49px; padding:9px 12px; border:2px solid var(--bkp-border); border-radius:13px; background:var(--bkp-surface); color:var(--bkp-ink); }
.bkp-field--wide { grid-column:1/-1; }
.bkp-settings-title { display:grid; gap:2px; margin-top:5px; padding:12px 14px; border-left:5px solid var(--bkp-mint); border-radius:10px; background:var(--bkp-soft); color:var(--bkp-ink); }
.bkp-settings-title strong { font-size:17px; }
.bkp-settings-title small { color:var(--bkp-muted); font-weight:600; }
.bkp-favorites { display:flex; flex-wrap:wrap; gap:7px; }
.bkp-favorites label { position:relative; }
.bkp-favorites input { position:absolute; opacity:0; }
.bkp-favorites span { display:block; min-height:44px; padding:10px 13px; border:2px solid var(--bkp-border); border-radius:999px; background:var(--bkp-surface); cursor:pointer; }
.bkp-favorites input:checked + span { border-color:var(--bkp-purple); background:#f3edff; color:#6947a7; }
.bkp-panel-intro { margin:6px 0 18px; color:var(--bkp-muted); }
.bkp-learning-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:10px; }
.bkp-learning-card { display:grid; grid-template-columns:44px 1fr; align-items:center; gap:10px; min-height:112px; padding:14px; border:2px solid var(--bkp-border); border-radius:18px; background:var(--bkp-soft); }
.bkp-learning-card > span { display:grid; width:44px; aspect-ratio:1; place-items:center; border-radius:14px; background:var(--bkp-surface); font-size:25px; }
.bkp-learning-card > div { display:grid; min-width:0; }.bkp-learning-card small { color:var(--bkp-muted); font-size:11px; }.bkp-learning-card b { grid-column:1/-1; justify-self:start; padding:4px 9px; border-radius:999px; background:var(--bkp-surface); color:var(--bkp-muted); font-size:10px; }
.bkp-learning-card[data-status="exploring"] b { background:#e5f5ff; color:#286c9d; }.bkp-learning-card[data-status="practising"] b { background:#eee7ff; color:#6947a7; }.bkp-learning-card[data-status="very-active"] b { background:#dcf8ef; color:#14725e; }
.bkp-settings-sheet { position:fixed; z-index:99999; inset:0; display:grid; justify-items:end; }
.bkp-settings-backdrop { position:absolute; inset:0; width:100%; height:100%; border:0; background:rgba(15,25,28,.52); cursor:default; }
.bkp-settings-sheet > section { position:relative; display:grid; grid-template-rows:auto 1fr; width:min(520px,100%); height:100%; padding:24px; overflow:auto; background:var(--bkp-surface); color:var(--bkp-ink); box-shadow:-20px 0 60px rgba(10,25,25,.24); }
.bkp-settings-sheet header { display:flex; align-items:center; justify-content:space-between; gap:20px; padding-bottom:20px; border-bottom:1px solid var(--bkp-border); }.bkp-settings-sheet header h2 { margin:0; font-size:30px; }.bkp-settings-x { display:grid; width:48px; height:48px; place-items:center; border:1px solid var(--bkp-border); border-radius:50%; background:var(--bkp-soft); color:var(--bkp-ink); cursor:pointer; font-size:28px; }
.bkp-settings-content { padding-top:24px; }.bkp-settings-open { overflow:hidden; }
.bkp-actions { display:flex; flex-wrap:wrap; gap:9px; margin-top:18px; }
.bkp-public-option { display:grid; grid-template-columns:24px 1fr; align-items:start; gap:10px; padding:13px; border:2px solid var(--bkp-border); border-radius:16px; background:var(--bkp-soft); cursor:pointer; }
.bkp-public-option input { width:20px; height:20px; margin-top:3px; }
.bkp-public-option > span { display:grid; }
.bkp-public-option small { color:var(--bkp-muted); font-weight:500; }
.bkp-status { margin:10px 0 0; color:var(--bkp-muted); font-size:12px; }
.bkp-reward-summary { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin:16px 0 25px; }
.bkp-reward-summary article { display:grid; min-height:125px; place-items:center; align-content:center; gap:1px; border:2px solid #f1dc8b; border-radius:20px; background:#fff9dc; }
.bkp-reward-summary span { font-size:31px; }
.bkp-reward-summary strong { font-size:29px; line-height:1; }
.bkp-reward-summary small { color:var(--bkp-muted); font-size:11px; font-weight:800; }
.bkp-badge-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:9px; margin-top:13px; }
.bkp-badge { display:grid; min-height:150px; place-items:center; align-content:center; gap:5px; padding:12px; border:2px solid var(--bkp-border); border-radius:19px; text-align:center; }
.bkp-badge > span { font-size:38px; filter:grayscale(1); }
.bkp-badge strong { font-size:14px; }
.bkp-badge small { color:var(--bkp-muted); font-size:10px; }
.bkp-badge.is-earned { border-color:#edc544; background:#fff9dc; }
.bkp-badge.is-earned > span { filter:none; }
.bkp-badge.is-locked { opacity:.64; }
.bkp-privacy { margin:18px 0 0; color:var(--bkp-muted); font-size:12px; text-align:center; }
.bkl-app { --bkp-ink:var(--byleron-text,#18212a); --bkp-muted:var(--byleron-muted,#5f6b76); --bkp-surface:var(--byleron-surface,#fff); --bkp-soft:var(--byleron-soft,#f0f7f6); --bkp-border:var(--byleron-border,#dfe9e7); --bkp-mint:var(--byleron-primary,#3bcdaa); --bkp-purple:var(--byleron-purple,#9973dc); width:min(100% - 24px,920px); margin:24px auto; color:var(--bkp-ink); font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; }
.bkl-hero { padding:38px 24px; border:1px solid var(--bkp-border,#dfe9e7); border-radius:28px; background:linear-gradient(145deg,#fff8d5,#effcf8); text-align:center; }
.bkl-hero h2 { margin:0; font-size:clamp(36px,6vw,62px); letter-spacing:-.05em; line-height:1; }.bkl-hero p:last-child { color:#5f6b76; }
.bkl-list { display:grid; gap:10px; margin-top:18px; }
.bkl-row { display:grid; grid-template-columns:58px 58px 1fr auto; align-items:center; gap:12px; min-height:88px; padding:11px 18px; border:2px solid #dfe9e7; border-radius:20px; background:#fff; box-shadow:0 7px 20px rgba(24,33,42,.06); }
.bkl-row:nth-child(1) { border-color:#e7bd35; background:#fff9dc; }.bkl-row:nth-child(2) { border-color:#aeb8bd; }.bkl-row:nth-child(3) { border-color:#c98351; }
.bkl-place { text-align:center; font-size:28px; font-weight:900; }.bkl-avatar { display:grid; width:54px; aspect-ratio:1; place-items:center; border:4px solid #fff; border-radius:50%; background:var(--bkl-color,#20a990); color:#fff; box-shadow:0 3px 12px rgba(24,33,42,.17); font-size:23px; font-weight:900; text-transform:uppercase; }
.bkl-row > span:nth-child(3) { display:grid; }.bkl-row strong { font-size:18px; }.bkl-row small { color:#5f6b76; font-size:11px; }.bkl-row b { color:#6c4f00; font-size:18px; }.bkl-empty { padding:50px 20px; border:2px dashed #dfe9e7; border-radius:20px; color:#5f6b76; text-align:center; }

.bkp-avatar { --skin:#e6ae83; --hair:#e3ad35; --eye:#3a8fd1; --shirt:#20a990; position:relative; width:180px; height:225px; }
.bkp-avatar[data-skin="porcelain"] { --skin:#f6d9c4; }.bkp-avatar[data-skin="light"] { --skin:#f1c7a7; }.bkp-avatar[data-skin="tan"] { --skin:#bf7f55; }.bkp-avatar[data-skin="brown"] { --skin:#965f42; }.bkp-avatar[data-skin="deep"] { --skin:#75452f; }
.bkp-avatar[data-hair-color="light-brown"] { --hair:#9b6841; }.bkp-avatar[data-hair-color="dark-brown"] { --hair:#5b351f; }.bkp-avatar[data-hair-color="black"] { --hair:#23242a; }.bkp-avatar[data-hair-color="auburn"] { --hair:#8e472c; }.bkp-avatar[data-hair-color="red"] { --hair:#bd5a31; }
.bkp-avatar[data-eye-color="brown"] { --eye:#75452f; }.bkp-avatar[data-eye-color="dark-brown"] { --eye:#33251f; }.bkp-avatar[data-eye-color="green"] { --eye:#3c9b6b; }.bkp-avatar[data-eye-color="hazel"] { --eye:#8b7a3c; }.bkp-avatar[data-eye-color="grey"] { --eye:#71808c; }
.bkp-avatar[data-shirt="coral"] { --shirt:#f06f62; }.bkp-avatar[data-shirt="purple"] { --shirt:#8b68c8; }.bkp-avatar[data-shirt="yellow"] { --shirt:#e8b92f; }.bkp-avatar[data-shirt="blue"] { --shirt:#4d9ed7; }.bkp-avatar[data-shirt="green"] { --shirt:#57aa68; }.bkp-avatar[data-shirt="pink"] { --shirt:#e873aa; }.bkp-avatar[data-shirt="red"] { --shirt:#d9574f; }
.bkp-avatar__shirt { position:absolute; z-index:1; bottom:0; left:21px; width:138px; height:75px; border-radius:55px 55px 20px 20px; background:var(--shirt); box-shadow:inset 0 7px 0 rgba(255,255,255,.2); }
.bkp-avatar__neck { position:absolute; z-index:2; bottom:61px; left:72px; width:36px; height:42px; border-radius:15px; background:var(--skin); }
.bkp-avatar__ears { position:absolute; z-index:3; top:84px; left:27px; width:126px; height:38px; border-radius:20px; background:var(--skin); }
.bkp-avatar__face { position:absolute; z-index:5; top:35px; left:38px; width:104px; height:130px; border-radius:48% 48% 46% 46%; background:var(--skin); box-shadow:inset 0 -8px 0 rgba(130,70,45,.08); }
.bkp-avatar__eyes::before,.bkp-avatar__eyes::after { position:absolute; top:53px; width:16px; height:21px; border:5px solid #fff; border-radius:50%; background:var(--eye); box-shadow:0 0 0 2px rgba(50,30,20,.45),inset 0 0 0 3px #17191c; content:""; }
.bkp-avatar__eyes::before { left:20px; }.bkp-avatar__eyes::after { right:20px; }
.bkp-avatar__nose { position:absolute; top:78px; left:48px; width:9px; height:12px; border-radius:50%; border-bottom:2px solid rgba(100,55,40,.35); }
.bkp-avatar__smile { position:absolute; top:96px; left:37px; width:31px; height:17px; border-bottom:4px solid #8b3f3b; border-radius:50%; }
.bkp-avatar__freckles::before,.bkp-avatar__freckles::after { display:none; position:absolute; top:88px; width:18px; color:rgba(120,60,35,.38); content:"···"; font-size:11px; letter-spacing:1px; }.bkp-avatar[data-face-detail="freckles"] .bkp-avatar__freckles::before,.bkp-avatar[data-face-detail="freckles"] .bkp-avatar__freckles::after { display:block; }.bkp-avatar__freckles::before { left:10px; }.bkp-avatar__freckles::after { right:7px; }
.bkp-avatar__cheeks::before,.bkp-avatar__cheeks::after { display:none; position:absolute; top:87px; width:17px; height:9px; border-radius:50%; background:rgba(231,100,107,.32); content:""; }.bkp-avatar[data-face-detail="rosy"] .bkp-avatar__cheeks::before,.bkp-avatar[data-face-detail="rosy"] .bkp-avatar__cheeks::after { display:block; }.bkp-avatar__cheeks::before { left:10px; }.bkp-avatar__cheeks::after { right:10px; }
.bkp-avatar__hair { position:absolute; z-index:4; background:var(--hair); }
.bkp-avatar__hair--back { top:18px; left:25px; width:130px; height:159px; border-radius:55% 55% 40% 40%; }
.bkp-avatar[data-hair-length="short"] .bkp-avatar__hair--back { height:112px; }.bkp-avatar[data-hair-length="long"] .bkp-avatar__hair--back { height:196px; }
.bkp-avatar__hair--front { z-index:6; top:23px; left:37px; width:108px; height:48px; border-radius:70% 35% 55% 25%; transform:rotate(-4deg); }
.bkp-avatar[data-hair-style="wavy"] .bkp-avatar__hair--back { border-radius:50% 50% 35% 35% / 35% 35% 65% 65%; clip-path:polygon(0 0,100% 0,100% 87%,89% 77%,78% 91%,66% 79%,54% 94%,42% 80%,29% 92%,15% 78%,0 88%); }
.bkp-avatar[data-hair-style="curly"] .bkp-avatar__hair--back { width:150px; left:15px; border-radius:45%; filter:drop-shadow(8px 5px 0 var(--hair)) drop-shadow(-8px 5px 0 var(--hair)); }
.bkp-avatar[data-hair-style="curly"] .bkp-avatar__hair--front { height:58px; border-radius:50%; filter:drop-shadow(18px 4px 0 var(--hair)) drop-shadow(-14px 5px 0 var(--hair)); }
.bkp-avatar[data-hair-style="coily"] .bkp-avatar__hair--back { width:150px; left:15px; border-radius:42%; filter:drop-shadow(9px 8px 0 var(--hair)) drop-shadow(-9px 8px 0 var(--hair)); }.bkp-avatar[data-hair-style="coily"] .bkp-avatar__hair--front { height:60px; border-radius:48%; filter:drop-shadow(15px 3px 0 var(--hair)) drop-shadow(-12px 4px 0 var(--hair)); }
.bkp-avatar[data-hair-style="braids"] .bkp-avatar__hair--back { width:118px; left:31px; clip-path:polygon(0 0,100% 0,88% 48%,100% 100%,76% 88%,62% 100%,50% 86%,36% 100%,22% 88%,0 100%,12% 48%); }.bkp-avatar[data-hair-style="puffs"] .bkp-avatar__hair--back { top:35px; height:115px; background:transparent; filter:drop-shadow(-52px -14px 0 var(--hair)) drop-shadow(52px -14px 0 var(--hair)); }.bkp-avatar[data-hair-style="puffs"] .bkp-avatar__hair--front { border-radius:50%; }
.bkp-avatar[data-hair-length="very-short"] .bkp-avatar__hair--back { height:88px; }
.bkp-avatar__accessory { position:absolute; z-index:8; pointer-events:none; }.bkp-avatar[data-accessory="round-glasses"] .bkp-avatar__accessory,.bkp-avatar[data-accessory="square-glasses"] .bkp-avatar__accessory { top:83px; left:49px; width:82px; height:30px; border-top:4px solid #46515c; }.bkp-avatar[data-accessory="round-glasses"] .bkp-avatar__accessory::before,.bkp-avatar[data-accessory="round-glasses"] .bkp-avatar__accessory::after,.bkp-avatar[data-accessory="square-glasses"] .bkp-avatar__accessory::before,.bkp-avatar[data-accessory="square-glasses"] .bkp-avatar__accessory::after { position:absolute; top:-13px; width:31px; height:27px; border:4px solid #46515c; content:""; }.bkp-avatar[data-accessory="round-glasses"] .bkp-avatar__accessory::before,.bkp-avatar[data-accessory="round-glasses"] .bkp-avatar__accessory::after { border-radius:50%; }.bkp-avatar__accessory::before { left:0; }.bkp-avatar__accessory::after { right:0; }.bkp-avatar[data-accessory="headband"] .bkp-avatar__accessory { top:31px; left:37px; width:108px; height:28px; border-top:9px solid #f06f9d; border-radius:50%; }.bkp-avatar[data-accessory="bow"] .bkp-avatar__accessory { top:22px; right:27px; width:28px; height:28px; background:#f06f9d; clip-path:polygon(0 0,50% 35%,100% 0,82% 50%,100% 100%,50% 65%,0 100%,18% 50%); }.bkp-avatar[data-accessory="cap"] .bkp-avatar__accessory { top:9px; left:31px; width:119px; height:47px; border-radius:60px 60px 10px 10px; background:#4d9ed7; box-shadow:25px 20px 0 -13px #397bad; }
.bkp-avatar[data-character="boy"][data-hair-length="medium"] .bkp-avatar__hair--back { height:125px; }.bkp-avatar[data-character="boy"][data-hair-length="long"] .bkp-avatar__hair--back { height:180px; }
.bkp-avatar--small { width:62px; height:70px; transform-origin:top left; }.bkp-avatar--small > * { transform:scale(.31); transform-origin:top left; }.bkp-avatar--tiny { width:52px; height:55px; }.bkp-avatar--tiny > * { transform:scale(.24); transform-origin:top left; }

@media (max-width:800px) { .bkp-layout { grid-template-columns:1fr; }.bkp-sidebar { position:static; }.bkp-profile-list { grid-template-columns:repeat(2,1fr); }.bkp-overview { grid-column:1; grid-template-columns:120px 1fr; }.bkp-overview__avatar { min-height:170px; }.bkp-overview-actions { grid-column:1/-1; grid-template-columns:repeat(2,1fr); }.bkp-editor { grid-template-columns:1fr; }.bkp-avatar-stage { min-height:270px; }.bkp-badge-grid,.bkp-learning-grid { grid-template-columns:repeat(2,1fr); } }
@media (max-width:480px) { .bkp-app { width:min(100% - 14px,1180px); margin:7px auto; }.bkp-profile-list,.bkp-learning-grid { grid-template-columns:1fr; }.bkp-overview { grid-template-columns:1fr; text-align:center; }.bkp-current-head { display:grid; justify-content:stretch; }.bkp-overview__avatar { min-height:230px; }.bkp-fields,.bkp-voice-controls,.bkp-overview-actions { grid-template-columns:1fr; }.bkp-field--wide { grid-column:auto; }.bkp-reward-summary { gap:5px; }.bkp-reward-summary article { min-height:110px; }.bkp-panel,.bkp-sidebar { padding:15px; border-radius:20px; }.bkp-settings-sheet { align-items:end; }.bkp-settings-sheet > section { width:100%; height:min(88vh,720px); border-radius:24px 24px 0 0; padding:18px; } }
@media (max-width:560px) { .bkl-app { width:min(100% - 14px,920px); }.bkl-row { grid-template-columns:42px 46px 1fr auto; gap:7px; padding:9px; }.bkl-avatar { width:44px; }.bkl-row small { display:none; }.bkl-row b { font-size:14px; } }
@media (prefers-color-scheme:dark) { .bkp-app { --bkp-ink:#eef5f3; --bkp-muted:#aebbb7; --bkp-surface:#17211f; --bkp-soft:#111a18; --bkp-border:#34443f; }.bkp-hero { background:radial-gradient(circle at 90% 0,rgba(255,213,104,.16),transparent 30%),linear-gradient(145deg,#18332c,#29213a); }.bkp-voice-panel { background:linear-gradient(145deg,#17211f,#18332c); }.bkp-voice-panel__head > span { background:#21483f; }.bkp-button,.bkp-profile-card { background:var(--bkp-surface); color:var(--bkp-ink); }.bkp-profile-card.is-active,.bkp-favorites input:checked + span { background:#2b2440; }.bkp-favorites span { background:var(--bkp-surface); }.bkp-reward-summary article,.bkp-badge.is-earned { background:#332f1e; }.bkl-app { color:#eef5f3; }.bkl-app .bkp-back { border-color:#34443f; background:#17211f; color:#eef5f3; }.bkl-hero { border-color:#514b35; background:linear-gradient(145deg,#39331d,#18332c); }.bkl-hero p:last-child,.bkl-row small,.bkl-app .bkp-privacy { color:#aebbb7; }.bkl-row,.bkl-row:nth-child(1),.bkl-row:nth-child(2),.bkl-row:nth-child(3) { border-color:#34443f; background:#17211f; }.bkl-row:nth-child(1) { border-color:#9b7d25; background:#332f1e; }.bkl-row b { color:#ffe17a; } }
@media (prefers-reduced-motion:reduce) { .bkp-app * { transition-duration:.01ms!important; animation-duration:.01ms!important; } }
/* Follow the host theme's manual dark-mode toggle as well as OS preference. */
html.dark-mode .bkp-app,html.dark-mode .bkl-app { --bkp-ink:var(--byleron-text,#eef5f3); --bkp-muted:var(--byleron-muted,#aebbb7); --bkp-surface:var(--byleron-surface,#17211f); --bkp-soft:var(--byleron-soft,#111a18); --bkp-border:var(--byleron-border,#34443f); color:var(--bkp-ink); }
html.dark-mode .bkp-hero { background:radial-gradient(circle at 90% 0,rgba(255,213,104,.16),transparent 30%),linear-gradient(145deg,#18332c,#29213a); }
html.dark-mode .bkp-voice-panel { background:linear-gradient(145deg,#17211f,#18332c); }
html.dark-mode .bkp-button,html.dark-mode .bkp-profile-card,html.dark-mode .bkp-favorites span { background:var(--bkp-surface); color:var(--bkp-ink); border-color:var(--bkp-border); }
html.dark-mode .bkp-profile-card.is-active { background:#2b2440; }
html.dark-mode .bkp-reward-summary article,html.dark-mode .bkp-badge.is-earned { background:#332f1e; }
html.dark-mode .bkl-app .bkp-back { border-color:var(--bkp-border); background:var(--bkp-surface); color:var(--bkp-ink); }
html.dark-mode .bkl-row { border-color:var(--bkp-border); background:var(--bkp-surface); }
html.dark-mode .bkl-hero { border-color:#514b35; background:linear-gradient(145deg,#39331d,#18332c); }
html.dark-mode .bkl-hero p:last-child,html.dark-mode .bkl-row small,html.dark-mode .bkl-app .bkp-privacy { color:var(--bkp-muted); }