/* Bluekettle Live AI Demo. Reads the theme tokens with fallbacks. */
.bkd-demo {
	--d-bg: var(--bk-bg-deep, #121c26); --d-surface: var(--bk-surface, #1f2f3f); --d-line: var(--bk-line, rgba(137,176,207,.18));
	--d-line2: var(--bk-line-strong, rgba(137,176,207,.34)); --d-text: var(--bk-text, #e9eff5); --d-muted: var(--bk-muted, #a3b5c6);
	--d-brass: var(--bk-brass, #e0a458); --d-steel: var(--bk-steel, #89b0cf);
	background: linear-gradient(180deg, var(--d-surface), var(--d-bg)); border: 1px solid var(--d-line); border-radius: 22px;
	padding: clamp(20px, 3.5vw, 40px); color: var(--d-text);
}
.bkd-form { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: clamp(20px, 3vw, 36px); align-items: stretch; }
@media (max-width: 820px) { .bkd-form { grid-template-columns: 1fr; } }
.bkd-hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; }
.bkd-drop { position: relative; display: flex; align-items: center; justify-content: center; min-height: 280px; border: 1.5px dashed var(--d-line2); border-radius: 16px; background: rgba(18,28,38,.6); cursor: pointer; text-align: center; padding: 24px; transition: border-color .15s ease, background .15s ease; }
.bkd-drop:hover, .bkd-drop.is-over { border-color: var(--d-brass); background: rgba(224,164,88,.06); }
.bkd-file { position: absolute; inset: 0; opacity: 0; cursor: pointer; width: 100%; }
.bkd-drop__empty { display: flex; flex-direction: column; align-items: center; gap: 10px; color: var(--d-muted); pointer-events: none; }
.bkd-drop__empty svg { color: var(--d-steel); }
.bkd-drop__empty strong { color: var(--d-text); font-size: 1.08rem; font-family: var(--bk-font-head, inherit); }
.bkd-drop__empty span { font-size: .9rem; }
.bkd-drop__preview { display: flex; flex-direction: column; align-items: center; gap: 10px; pointer-events: none; }
.bkd-drop__preview[hidden] { display: none; }
.bkd-preview { max-height: 230px; max-width: 100%; border-radius: 10px; box-shadow: 0 10px 30px rgba(0,0,0,.35); }
.bkd-filename { color: var(--d-muted); font-size: .85rem; word-break: break-all; }
.bkd-change { color: var(--d-brass); font-size: .85rem; font-weight: 600; }
.bkd-fields { display: flex; flex-direction: column; justify-content: center; }
.bkd-field { margin: 0 0 16px; }
.bkd-field label { display: block; font-size: .88rem; font-weight: 600; margin-bottom: 7px; }
.bkd-opt { color: var(--d-muted); font-weight: 400; }
.bkd-req { color: var(--d-brass); }
.bkd-field input { width: 100%; font: inherit; color: var(--d-text); background: var(--d-bg); border: 1px solid var(--d-line2); border-radius: 10px; padding: 13px 14px; box-sizing: border-box; }
.bkd-go { width: 100%; padding: 17px 24px !important; font-size: 1.04rem !important; }
.bkd-go[disabled] { opacity: .6; cursor: progress; }
.bkd-fine { color: var(--d-muted); font-size: .8rem; margin: 12px 0 0; }
.bkd-msg:empty { display: none; }
.bkd-msg { grid-column: 1 / -1; background: rgba(239,138,122,.1); border: 1px solid rgba(239,138,122,.35); color: #ef8a7a; padding: 12px 14px; border-radius: 10px; font-size: .95rem; }
.bkd-working { text-align: center; padding: 40px 0 20px; }
.bkd-working[hidden] { display: none; }
.bkd-spinner { width: 44px; height: 44px; margin: 0 auto 22px; border-radius: 50%; border: 3px solid var(--d-line2); border-top-color: var(--d-brass); animation: bkd-spin .9s linear infinite; }
@keyframes bkd-spin { to { transform: rotate(360deg); } }
.bkd-steps { list-style: none; padding: 0; margin: 0 auto; max-width: 380px; text-align: left; }
.bkd-steps li { color: var(--d-muted); padding: 8px 0 8px 28px; position: relative; font-size: .95rem; opacity: .45; transition: opacity .3s ease, color .3s ease; }
.bkd-steps li::before { content: ""; position: absolute; left: 0; top: 50%; width: 14px; height: 14px; margin-top: -7px; border-radius: 50%; border: 2px solid var(--d-line2); }
.bkd-steps li.is-on { opacity: 1; color: var(--d-text); }
.bkd-steps li.is-on::before { border-color: var(--d-brass); background: var(--d-brass); }
.bkd-result[hidden] { display: none; }
.bkd-result { margin-top: 8px; }
.bkd-read { font-family: var(--bk-font-head, inherit); font-size: clamp(1.1rem, 2vw, 1.35rem); line-height: 1.4; margin: 0 0 24px; color: #fff; }
.bkd-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: 24px; }
@media (max-width: 900px) { .bkd-grid { grid-template-columns: 1fr; } }
.bkd-panel { background: rgba(18,28,38,.65); border: 1px solid var(--d-line); border-radius: 16px; padding: 22px; }
.bkd-panel h4 { font-family: var(--bk-font-head, inherit); font-size: .78rem; letter-spacing: .12em; text-transform: uppercase; color: var(--d-muted); margin: 0 0 12px; }
.bkd-panel h4 + * { margin-top: 0; }
.bkd-panel ul { margin: 0 0 18px; padding-left: 18px; }
.bkd-panel li { margin-bottom: 8px; font-size: .95rem; line-height: 1.5; }
.bkd-panel li::marker { color: var(--d-brass); }
.bkd-gaps li::marker { color: var(--d-steel); }
.bkd-thumb { width: 100%; max-height: 220px; object-fit: contain; border-radius: 10px; margin-bottom: 18px; background: #0d151d; }
.bkd-scores { display: grid; gap: 9px; margin: 0 0 20px; }
.bkd-score { display: grid; grid-template-columns: 120px 1fr 28px; align-items: center; gap: 10px; font-size: .86rem; color: var(--d-muted); }
.bkd-bar { height: 6px; background: var(--d-line); border-radius: 99px; overflow: hidden; }
.bkd-bar i { display: block; height: 100%; background: linear-gradient(90deg, var(--d-steel), var(--d-brass)); border-radius: 99px; }
.bkd-score b { color: var(--d-text); text-align: right; font-variant-numeric: tabular-nums; }
.bkd-brief { border-color: rgba(224,164,88,.4); }
.bkd-brief__name { font-family: var(--bk-font-head, inherit); color: var(--d-brass); font-weight: 600; font-size: .85rem; letter-spacing: .1em; text-transform: uppercase; margin: 0 0 6px; }
.bkd-brief__angle { color: var(--d-muted); margin: 0 0 18px; font-size: .95rem; }
.bkd-ad { background: #fff; color: #1c1e21; border-radius: 12px; overflow: hidden; margin: 0 0 18px; font-family: -apple-system, "Segoe UI", Roboto, sans-serif; }
.bkd-ad__text { padding: 12px 14px; font-size: .92rem; line-height: 1.4; margin: 0; }
.bkd-ad__visual { background: #e9ecef; aspect-ratio: 1 / 1; display: flex; align-items: center; justify-content: center; color: #65676b; font-size: .85rem; padding: 18px; text-align: center; }
.bkd-ad__visual img { width: 100%; height: 100%; object-fit: cover; }
.bkd-ad__foot { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 10px 14px; background: #f0f2f5; }
.bkd-ad__headline { font-weight: 700; font-size: .95rem; margin: 0; }
.bkd-ad__cta { background: #e4e6eb; color: #1c1e21; font-weight: 600; font-size: .85rem; border-radius: 6px; padding: 8px 12px; white-space: nowrap; }
.bkd-dl { margin: 0; }
.bkd-dl dt { font-size: .78rem; letter-spacing: .1em; text-transform: uppercase; color: var(--d-muted); margin-top: 14px; font-weight: 600; }
.bkd-dl dd { margin: 4px 0 0; font-size: .95rem; line-height: 1.55; }
.bkd-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 24px; align-items: center; }
.bkd-copy { background: transparent !important; color: var(--d-text) !important; border: 1px solid var(--d-line2) !important; }
.bkd-again { color: var(--d-muted); font-size: .9rem; background: none; border: 0; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
.bkd-demo--off { text-align: center; }
.bkd-off { max-width: 560px; margin: 0 auto; padding: 24px 0; }
.bkd-off__title { font-family: var(--bk-font-head, inherit); font-size: 1.4rem; color: #fff; margin-bottom: 8px; }
.bkd-off p { color: var(--d-muted); }
.bkd-grid { align-items: start; }