/* Bedýnka TV – television, parents' settings, login and plan pages. */

@font-face { font-family: 'Fredoka'; font-style: normal; font-display: swap; font-weight: 300 700; src: url(fonts/fredoka-latin-ext.woff2) format('woff2'); unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: 'Fredoka'; font-style: normal; font-display: swap; font-weight: 300 700; src: url(fonts/fredoka-latin.woff2) format('woff2'); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }

html, body { margin: 0; background: #17110d; font-family: Fredoka, system-ui, sans-serif; -webkit-tap-highlight-color: transparent; }
button, input, select { font-family: inherit; }
button { cursor: pointer; touch-action: manipulation; }
a { color: #f2b544; } a:hover { color: #ffd27a; }

/* ------------------------------------------------------------- television */

.bd-page { height: 100vh; height: 100dvh; width: 100vw; display: grid; place-items: center; box-sizing: border-box; overflow: hidden; user-select: none; -webkit-user-select: none; }
.bd-cab { box-sizing: border-box; display: flex; align-items: center; justify-content: center; }
.bd-bezel { flex: 1; align-self: stretch; min-width: 0; min-height: 0; display: grid; place-items: center; }
.bd-tube { position: relative; aspect-ratio: 4/3; max-width: 100%; max-height: 100%; width: 100%; height: auto; background: #070707; overflow: hidden; box-shadow: inset 0 0 0 3px #1a1a1a, inset 0 0 40px rgba(0,0,0,.9); }
.bd-picture { position: absolute; inset: 0; transition: transform .7s cubic-bezier(.2,.8,.2,1), opacity .5s, filter 1.4s; transform-origin: 50% 50%; }
.bd-fill { position: absolute; inset: 0; }
.bd-shield { position: absolute; inset: 0; z-index: 2; background: transparent; touch-action: none; }
.bd-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; background: #000; }
.bd-static { position: absolute; inset: 0; width: 100%; height: 100%; image-rendering: pixelated; }
.bd-glass { position: absolute; inset: 0; pointer-events: none; border-radius: inherit; background: repeating-linear-gradient(180deg, rgba(0,0,0,.10) 0 1px, transparent 1px 3px), radial-gradient(ellipse at 30% 15%, rgba(255,255,255,.10), transparent 45%); box-shadow: inset 0 0 clamp(20px,6vw,80px) rgba(0,0,0,.75); }
.bd-off { position: absolute; inset: 0; background: radial-gradient(ellipse at 50% 45%, #1d1d1d, #050505 80%); }

.bd-error { position: absolute; inset: 0; z-index: 3; display: grid; place-items: center; background: #0b1a2a; color: #f3ecdd; text-align: center; padding: 8%; font-size: clamp(16px,2.6vw,26px); font-weight: 600; }
.bd-back { position: absolute; z-index: 3; left: 3%; bottom: 4%; min-height: 48px; padding: 0 20px; border-radius: 24px; border: 0; background: rgba(255,255,255,.85); color: #1c1c1c; font-size: 18px; font-weight: 700; }

.bd-lib { position: absolute; inset: 0; z-index: 3; overflow: auto; padding: 4% 5%; box-sizing: border-box; background: linear-gradient(180deg,#14232e,#0d171f); color: #f3ecdd; }
.bd-lib-title { font-size: clamp(16px,2.6vw,26px); font-weight: 700; margin-bottom: 10px; color: #ffd27a; }
.bd-lib-group { margin-bottom: 18px; }
.bd-lib-show { font-size: clamp(13px,1.8vw,18px); font-weight: 600; opacity: .85; margin-bottom: 8px; }
.bd-lib-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(clamp(84px,12vw,140px), 1fr)); gap: 10px; }
.bd-tile { all: unset; cursor: pointer; display: flex; flex-direction: column; gap: 6px; border-radius: 10px; padding: 4px; }
.bd-tile:active { transform: scale(.96); }
.bd-tile:focus-visible { outline: 3px solid #ffd27a; }
.bd-poster { aspect-ratio: 2/3; border-radius: 8px; background: repeating-linear-gradient(45deg,#2c4252 0 8px,#243746 8px 16px); display: grid; place-items: center; font-size: clamp(22px,4vw,40px); box-shadow: 0 4px 10px rgba(0,0,0,.4); }
.bd-tile-title { font-size: clamp(11px,1.5vw,15px); font-weight: 600; line-height: 1.2; text-align: center; color: #f3ecdd; }

.bd-break { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: clamp(8px,2vw,18px); color: #2a1a0a; text-align: center; padding: 6%; box-sizing: border-box; }
.bd-break-emoji { font-size: clamp(48px,12vw,120px); line-height: 1; }
.bd-break-title { font-size: clamp(20px,4vw,40px); font-weight: 700; }
.bd-break-text { font-size: clamp(14px,2.4vw,22px); font-weight: 500; opacity: .85; }
.bd-break-done { margin-top: 6px; min-height: 64px; padding: 0 36px; border-radius: 32px; border: 0; background: #2a1a0a; color: #fff; font-size: clamp(18px,3vw,26px); font-weight: 700; box-shadow: 0 6px 0 rgba(0,0,0,.3); }
.bd-break-done:active { transform: translateY(3px); }

.bd-sleep { position: absolute; inset: 0; display: flex; flex-direction: column; background: #111; }
.bd-bars { flex: 1; background: linear-gradient(90deg,#c0c0c0 0 12.5%,#c0c000 0 25%,#00c0c0 0 37.5%,#00c000 0 50%,#c000c0 0 62.5%,#c00000 0 75%,#0000c0 0 87.5%,#101010 0); }
.bd-sleep-body { flex: 1.1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; color: #f3ecdd; text-align: center; padding: 4%; }
.bd-sleep-title { font-size: clamp(20px,4vw,38px); font-weight: 700; }
.bd-sleep-text { font-size: clamp(13px,2vw,18px); opacity: .75; }
.bd-sleep-btn { margin-top: 8px; min-height: 48px; padding: 0 24px; border-radius: 24px; border: 0; background: #f3ecdd; color: #1c1c1c; font-size: clamp(15px,2vw,18px); font-weight: 700; }

.bd-osd { position: absolute; top: 5%; right: 6%; font-family: ui-monospace, Menlo, monospace; font-size: clamp(22px,5vw,56px); font-weight: 700; color: var(--osd); text-shadow: 0 0 12px var(--osd-glow); background: rgba(0,0,0,.35); padding: 2px 12px; border-radius: 6px; max-width: 80%; }
.bd-osd-text { font-size: clamp(14px,2.6vw,26px); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bd-vol { position: absolute; left: 8%; right: 8%; bottom: 8%; display: flex; align-items: center; gap: 10px; font-family: ui-monospace, Menlo, monospace; color: var(--osd); text-shadow: 0 0 10px var(--osd-glow); font-size: clamp(14px,2.4vw,22px); font-weight: 700; }
.bd-vol-bar { flex: 1; height: 14px; background: rgba(0,0,0,.5); border: 2px solid var(--osd); border-radius: 4px; overflow: hidden; }
.bd-vol-bar > div { height: 100%; background: var(--osd); }

/* control panel */
.bd-panel-box { flex: none; align-self: center; position: relative; overflow: visible; }
.bd-panel { position: absolute; left: 0; top: 0; transform-origin: 0 0; box-sizing: border-box; display: flex; align-content: center; align-items: center; justify-content: space-evenly; gap: 12px 14px; }
.bd-press:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--btn-shadow) !important; }
.bd-power { width: 60px; height: 60px; border-radius: 50%; border: 3px solid var(--power-ring); box-shadow: 0 4px 0 var(--btn-shadow), inset 0 2px 4px rgba(255,255,255,.4); flex: none; display: grid; place-items: center; padding: 0; }
.bd-power-icon { width: 18px; height: 18px; border-radius: 50%; border: 3px solid var(--power-ring); border-top-color: transparent; position: relative; }
.bd-power-icon > div { position: absolute; left: 50%; top: -6px; width: 3px; height: 12px; background: var(--power-ring); transform: translateX(-50%); }
.bd-ctl { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.bd-label { font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--label); font-weight: 600; }
.bd-pair { display: flex; gap: 8px; }
.bd-btn { min-width: 60px; height: 56px; border-radius: 14px; border: 2px solid var(--btn-border); background: var(--btn-bg); color: var(--btn-fg); font-size: 28px; font-weight: 700; box-shadow: 0 4px 0 var(--btn-shadow); padding: 0; }
.bd-toggle { display: flex; gap: 6px; padding: 4px; border-radius: 16px; background: var(--track); box-shadow: inset 0 2px 4px rgba(0,0,0,.6); }
.bd-toggle button { height: 48px; padding: 0 18px; border-radius: 12px; border: 0; font-size: 18px; font-weight: 700; }
.bd-bottom { display: flex; align-items: center; gap: 10px; justify-content: center; }
.bd-grille { border-radius: 8px; background: var(--grille); box-shadow: inset 0 2px 4px rgba(0,0,0,.6); }
.bd-fs { width: 44px; height: 44px; border-radius: 8px; border: 1px solid var(--btn-border); background: var(--btn-bg); color: var(--btn-fg); font-size: 18px; font-weight: 700; padding: 0; }
.bd-parents { height: 44px; padding: 0 14px; border-radius: 8px; border: 1px solid var(--btn-border); background: var(--parent-bg); color: var(--parent-fg); font-size: 13px; font-weight: 700; letter-spacing: .06em; }
.bd-panel button:focus-visible, .bd-sleep-btn:focus-visible, .bd-break-done:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }

/* ---------------------------------------------------------- gate, settings */

.bd-overlay { position: fixed; inset: 0; z-index: 60; display: grid; place-items: center; background: rgba(10,6,3,.85); padding: 12px; box-sizing: border-box; user-select: text; -webkit-user-select: text; }
.bd-overlay-gate { z-index: 70; background: rgba(10,6,3,.8); padding: 16px; }
.bd-modal-head { display: flex; justify-content: space-between; align-items: center; }
.bd-x { width: 40px; height: 40px; border-radius: 50%; border: 0; background: #e2d5b8; font-size: 20px; color: #2a1a0a; flex: none; }

.bd-gate { width: min(100%, 360px); background: #f7efdd; border-radius: 22px; padding: 22px; box-sizing: border-box; box-shadow: 0 30px 60px rgba(0,0,0,.6); display: flex; flex-direction: column; gap: 14px; color: #2a1a0a; }
.bd-gate-title { font-size: 20px; font-weight: 700; }
.bd-gate-q { font-size: 17px; }
.bd-gate-q b { font-size: 20px; white-space: nowrap; }
.bd-gate-input { height: 56px; border-radius: 12px; background: #fff; border: 2px solid #cdbd9a; display: grid; place-items: center; font-size: 28px; font-weight: 700; letter-spacing: .1em; }
.bd-gate-err { color: #b3261e; font-weight: 600; text-align: center; }
.bd-keys { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.bd-key { height: 56px; border-radius: 12px; border: 0; background: #fff; color: #2a1a0a; font-size: 22px; font-weight: 700; }
.bd-key:active { transform: scale(.96); }
.bd-key-ok { background: #2a1a0a; color: #fff; }
.bd-key-del { background: #e2d5b8; }

.bd-settings { width: min(100%, 720px); max-height: calc(100vh - 24px); max-height: calc(100dvh - 24px); background: #f7efdd; border-radius: 22px; box-sizing: border-box; box-shadow: 0 30px 60px rgba(0,0,0,.6); display: flex; flex-direction: column; color: #2a1a0a; overflow: hidden; }
.bd-settings-head { padding: 18px 20px 0; }
.bd-settings-title { font-size: 22px; font-weight: 700; }
.bd-tabs { display: flex; gap: 6px; padding: 14px 20px 0; flex-wrap: wrap; }
.bd-tab { height: 40px; padding: 0 16px; border-radius: 20px; border: 0; background: #e2d5b8; color: #2a1a0a; font-size: 15px; font-weight: 600; }
.bd-tab.is-on { background: #2a1a0a; color: #fff; }
.bd-settings-body { overflow: auto; padding: 16px 20px 22px; display: flex; flex-direction: column; gap: 14px; font-size: 15px; }
.bd-settings input[type="checkbox"] { width: 22px; height: 22px; flex: none; accent-color: #7a5a2c; margin: 0; }
.bd-settings input[type="number"], .bd-settings input[type="text"], .bd-settings input[type="time"] { height: 44px; border-radius: 8px; border: 1px solid #cdbd9a; padding: 0 10px; font-size: 16px; box-sizing: border-box; background: #fff; color: #2a1a0a; min-width: 0; }
.bd-settings input:disabled { opacity: .5; }
.bd-settings button:focus-visible, .bd-settings input:focus-visible, .bd-settings a:focus-visible, .bd-gate button:focus-visible { outline: 3px solid #7a5a2c; outline-offset: 2px; }

.bd-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; }
.bd-field { display: flex; flex-direction: column; gap: 6px; padding: 12px; border-radius: 12px; background: #fff; }
.bd-field-label, .bd-strong { font-weight: 600; }
.bd-check { display: flex; flex-direction: row; align-items: center; gap: 8px; font-weight: 600; }
.bd-hint { font-size: 13px; opacity: .7; line-height: 1.4; }
.bd-inline { display: flex; align-items: center; gap: 8px; white-space: nowrap; }
.bd-settings input.bd-small { width: 62px; padding: 0 8px; }
.bd-h2 { font-weight: 700; font-size: 17px; margin-top: 4px; }
.bd-stack { display: flex; flex-direction: column; gap: 8px; }
.bd-row { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 12px; background: #fff; flex-wrap: wrap; }
.bd-emoji { font-size: 22px; }
.bd-row-name { flex: 1; font-weight: 600; min-width: 140px; }
.bd-actions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 4px; align-items: center; }
.bd-gold, .bd-plain { height: 44px; padding: 0 16px; border-radius: 12px; font-size: 15px; display: inline-flex; align-items: center; text-decoration: none; box-sizing: border-box; }
.bd-gold { border: 0; background: #c9a24b; color: #2a1a0a; font-weight: 700; }
.bd-plain { border: 1px solid #cdbd9a; background: #fff; color: #2a1a0a; font-weight: 600; }
.bd-gold:disabled { opacity: .6; }
.bd-intro { opacity: .75; line-height: 1.45; }
.bd-intro-small { font-size: 13px; }
.bd-notice { padding: 10px 12px; border-radius: 10px; background: #f3c9c4; color: #7a1d16; font-weight: 600; }
.bd-warn { color: #b3261e; font-size: 13px; font-weight: 600; }

.bd-card { display: flex; flex-direction: column; gap: 10px; padding: 12px; border-radius: 12px; background: #fff; }
.bd-card.is-off .bd-gname, .bd-card.is-off .bd-group-list { opacity: .55; }
.bd-card-head, .bd-group-head, .bd-block-head { display: flex; align-items: center; gap: 12px; }
.bd-block-head { flex-wrap: wrap; }
.bd-group-open { all: unset; cursor: pointer; flex: 1; display: flex; align-items: center; gap: 10px; min-height: 40px; min-width: 0; border-radius: 8px; }
.bd-gtext { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.bd-gname { font-weight: 700; font-size: 16px; }
.bd-card-head .bd-gname { flex: 1; }
.bd-gwhen { font-size: 12.5px; opacity: .65; }
.bd-gcount { font-family: ui-monospace, monospace; font-size: 13px; color: #7a5a2c; white-space: nowrap; }
.bd-chev { color: #7a5a2c; }
.bd-badge { font-size: 12px; font-weight: 700; padding: 3px 8px; border-radius: 999px; background: #e2d5b8; color: #5a3d14; white-space: nowrap; }
.bd-badge-soon { background: #2a1a0a; color: #ffd27a; }
.bd-badge-now { background: #2f7d3a; color: #fff; }
.bd-group-list { display: flex; flex-direction: column; border-top: 1px solid #eadfc6; padding-top: 6px; }
.bd-chan { display: flex; align-items: center; gap: 10px; min-height: 40px; cursor: pointer; }
.bd-chan-name { flex: 1; font-weight: 500; min-width: 0; }
.bd-times select { height: 44px; border-radius: 8px; border: 1px solid #cdbd9a; padding: 0 8px; font-size: 16px; background: #fff; color: #2a1a0a; font-family: inherit; }
.bd-times select:disabled { opacity: .5; }
.bd-today-btn { all: unset; cursor: pointer; font-size: 13.5px; font-weight: 600; color: #7a5a2c; align-self: flex-start; min-height: 32px; display: inline-flex; align-items: center; border-radius: 6px; }
.bd-today-row { display: flex; gap: 10px; align-items: baseline; padding: 6px 0; border-bottom: 1px dashed #eadfc6; flex-wrap: wrap; }
.bd-today-row:last-child { border-bottom: 0; }
.bd-today-ep { font-size: 13.5px; opacity: .75; flex: 2; min-width: 160px; }

.bd-custom { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; gap: 8px; align-items: center; padding: 10px; border-radius: 12px; background: #fbf6e9; border: 1px solid #eadfc6; }
.bd-film { grid-template-columns: minmax(0, 1fr) auto; background: #fff; }
.bd-custom-num { display: flex; flex-direction: column; align-items: center; gap: 6px; font-family: ui-monospace, monospace; font-size: 18px; font-weight: 700; color: #7a5a2c; }
.bd-custom-fields { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.bd-settings .bd-custom-fields input { height: 40px; font-size: 15px; }
.bd-settings .bd-custom-fields .bd-name { font-weight: 600; }
.bd-settings .bd-custom-fields .bd-url { font-size: 13px; font-family: ui-monospace, monospace; }
.bd-custom-btns { display: flex; flex-direction: column; gap: 4px; }
.bd-custom-btns button { width: 40px; height: 32px; border-radius: 8px; border: 0; background: #e2d5b8; color: #2a1a0a; }
.bd-custom-btns .bd-del { background: #f3c9c4; color: #7a1d16; font-weight: 700; }

.bd-soon { padding: 14px; border-radius: 12px; background: #fff; display: flex; flex-direction: column; gap: 8px; line-height: 1.45; border: 2px dashed #cdbd9a; }
.bd-soon-head { display: flex; align-items: center; gap: 10px; font-weight: 700; flex-wrap: wrap; }

.bd-themes { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 12px; }
.bd-theme { all: unset; cursor: pointer; display: flex; flex-direction: column; gap: 8px; padding: 10px; border-radius: 14px; background: #fff; box-sizing: border-box; border: 3px solid #e2d5b8; }
.bd-theme.is-on { border-color: #2a1a0a; }
.bd-theme:active { transform: scale(.98); }
.bd-theme-cab { aspect-ratio: 4/3; border-radius: 10px; padding: 10%; box-sizing: border-box; display: grid; place-items: center; }
.bd-theme-bezel { width: 100%; height: 100%; border-radius: 8px; padding: 8%; box-sizing: border-box; }
.bd-theme-tube { width: 100%; height: 100%; background: radial-gradient(ellipse at 50% 40%, #5aa0c8, #102030); }
.bd-theme-text { display: flex; flex-direction: column; gap: 2px; color: #2a1a0a; }
.bd-theme-name { font-weight: 700; font-size: 16px; }
.bd-theme-era { font-size: 13px; opacity: .7; }
.bd-account { gap: 12px; }

/* ------------------------------------------------- login, plans (no script) */

.bd-doc { min-height: 100vh; min-height: 100dvh; background: radial-gradient(ellipse at 50% 0%, #3d2b1d 0%, #17110d 70%) fixed; color: #2a1a0a; display: flex; flex-direction: column; align-items: center; padding: 28px 16px 40px; box-sizing: border-box; gap: 22px; }
.bd-brand { display: flex; align-items: center; gap: 12px; color: #f7efdd; font-size: 30px; font-weight: 700; text-decoration: none; }
.bd-brand img { width: 52px; height: 52px; border-radius: 12px; }
.bd-box { width: min(100%, 420px); background: #f7efdd; border-radius: 22px; padding: 24px; box-sizing: border-box; box-shadow: 0 30px 60px rgba(0,0,0,.5); display: flex; flex-direction: column; gap: 16px; }
.bd-box h1 { margin: 0; font-size: 24px; line-height: 1.2; }
.bd-box p { margin: 0; line-height: 1.45; }
.bd-switch { display: flex; gap: 6px; padding: 4px; border-radius: 999px; background: #e2d5b8; }
.bd-switch a { flex: 1; text-align: center; padding: 10px 8px; border-radius: 999px; color: #2a1a0a; text-decoration: none; font-weight: 600; }
.bd-switch a.is-on { background: #2a1a0a; color: #fff; }
.bd-form { display: flex; flex-direction: column; gap: 14px; }
.bd-form label { display: flex; flex-direction: column; gap: 6px; font-weight: 600; }
.bd-form input[type="email"], .bd-form input[type="password"] { height: 50px; border-radius: 10px; border: 1px solid #cdbd9a; padding: 0 12px; font-size: 17px; background: #fff; color: #2a1a0a; }
.bd-form .bd-terms { flex-direction: row; align-items: flex-start; gap: 10px; font-weight: 500; line-height: 1.4; }
.bd-form .bd-terms input { width: 22px; height: 22px; flex: none; accent-color: #7a5a2c; margin: 0; }
.bd-form a, .bd-box a { color: #7a4a10; }
.bd-hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; }
.bd-cta { height: 54px; border-radius: 14px; border: 0; background: #c9a24b; color: #2a1a0a; font-size: 18px; font-weight: 700; box-shadow: 0 4px 0 #8a6a25; display: flex; align-items: center; justify-content: center; text-decoration: none; padding: 0 18px; }
.bd-cta:active { transform: translateY(3px); box-shadow: 0 1px 0 #8a6a25; }
.bd-cta, .bd-cta:hover, .bd-box a.bd-cta { color: #2a1a0a; }
.bd-cta-dark, .bd-cta-dark:hover, .bd-box a.bd-cta-dark { background: #2a1a0a; color: #fff; box-shadow: 0 4px 0 #000; }
.bd-doc :focus-visible { outline: 3px solid #ffd27a; outline-offset: 2px; }
.bd-alert { padding: 12px 14px; border-radius: 12px; background: #f3c9c4; color: #7a1d16; font-weight: 600; line-height: 1.4; }
.bd-info { padding: 12px 14px; border-radius: 12px; background: #fff; line-height: 1.4; }
.bd-muted { font-size: 14px; opacity: .75; }
.bd-foot { color: #d8c8a6; font-size: 14px; text-align: center; display: flex; gap: 16px; flex-wrap: wrap; justify-content: center; }
.bd-foot a { color: #f1dcb8; }

.bd-plans-head { color: #f7efdd; text-align: center; max-width: 640px; display: flex; flex-direction: column; gap: 8px; }
.bd-plans-head h1 { margin: 0; font-size: clamp(24px, 4vw, 34px); }
.bd-plans-head p { margin: 0; opacity: .85; line-height: 1.45; }
.bd-plans { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 16px; width: min(100%, 960px); align-items: stretch; }
.bd-plan { background: #f7efdd; border-radius: 22px; padding: 22px; display: flex; flex-direction: column; gap: 12px; box-shadow: 0 20px 40px rgba(0,0,0,.4); position: relative; border: 3px solid transparent; }
.bd-plan.is-featured { border-color: #c9a24b; }
.bd-plan-flag { position: absolute; top: -13px; left: 22px; background: #c9a24b; color: #2a1a0a; font-size: 13px; font-weight: 700; padding: 3px 12px; border-radius: 999px; }
.bd-plan h2 { margin: 0; font-size: 22px; }
.bd-plan-tag { margin: 0; opacity: .75; }
.bd-price { font-size: 34px; font-weight: 700; line-height: 1; }
.bd-price small { font-size: 15px; font-weight: 500; opacity: .7; }
.bd-plan ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.bd-plan li { display: grid; grid-template-columns: 18px minmax(0, 1fr); gap: 8px; line-height: 1.35; align-items: baseline; }
.bd-plan li::before { content: "✓"; color: #2f7d3a; font-weight: 700; }
.bd-plan li.is-soon { opacity: .8; }
.bd-plan li.is-soon::before { content: "…"; color: #7a5a2c; }
.bd-plan li .bd-badge { margin-left: 6px; }
.bd-wait { display: flex; align-items: center; gap: 12px; font-weight: 600; }
.bd-spin { width: 22px; height: 22px; border-radius: 50%; border: 3px solid #cdbd9a; border-top-color: #2a1a0a; animation: bd-spin 1s linear infinite; flex: none; }
@keyframes bd-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .bd-spin { animation-duration: 3s; } .bd-picture { transition: none; } }

/* suggestion and vote inside the parents' settings */
.bd-suggest input[type="text"] { width: 100%; }
.bd-poll-row { display: flex; align-items: center; gap: 10px; padding: 6px 0; border-bottom: 1px dashed #eadfc6; flex-wrap: wrap; }
.bd-poll-row:last-child { border-bottom: 0; }
.bd-poll-row .bd-gold, .bd-poll-row .bd-plain { height: 38px; }