:root {
    --bg: #0f1720; --panel: #17212b; --panel-2: #1e2b38; --line: #2a3a49;
    --text: #e6edf3; --muted: #93a4b3; --accent: #e4002b; --accent-2: #2f81f7;
    --ok: #3fb950; --strategic: #3fb950; --prime: #58a6ff; --radius: 12px;
    --focus-ring: #2f81f766;   /* keep in sync with style.css */
}
* { box-sizing: border-box; }
html { color-scheme: dark; }
html, body { margin: 0; overflow-x: hidden; }
body { background: var(--bg); color: var(--text); font: 15px/1.5 "Segoe UI", system-ui, -apple-system, Arial, sans-serif; }
input, select, textarea { min-width: 0; max-width: 100%; }

.bhead { background: var(--panel); border-bottom: 1px solid var(--line); padding: 14px 18px; position: sticky; top: 0; z-index: 10; }
.bh-title { display: flex; align-items: center; gap: 12px; max-width: 720px; margin: 0 auto; }
.bh-title .logo { color: var(--accent); font-size: 26px; background: #fff1; width: 42px; height: 42px; display: grid; place-items: center; border-radius: 10px; }
.bh-title .t { font-weight: 800; font-size: 18px; }
.bh-title .s { color: var(--muted); font-size: 13px; }

.bwrap { max-width: 720px; margin: 0 auto; padding: 18px; }

.search-card { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 18px; }
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.fld { display: block; margin-bottom: 14px; }
.fld > span { display: block; color: var(--muted); font-size: 13px; margin-bottom: 6px; }
.fld input, .fld select, .fld textarea {
    width: 100%; background: var(--panel-2); color: var(--text); border: 1px solid var(--line);
    border-radius: 10px; padding: 12px; font: inherit; outline: none;
}
.fld input:focus, .fld select:focus, .fld textarea:focus { border-color: var(--accent-2); }
/* Ring paints outside the border box without taking layout space; the 14px
   .fld margin and the .big button's margin-top keep it clear of neighbours. */
.fld input:focus-visible, .fld select:focus-visible, .fld textarea:focus-visible,
button:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--focus-ring); }
.chk input[type=checkbox]:focus-visible { outline: 2px solid var(--accent-2); outline-offset: 2px; box-shadow: none; }
.row-actions { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.chk { display: flex; align-items: center; gap: 8px; color: var(--muted); font-size: 13px; }

button.primary { background: var(--accent); color: #fff; border: 0; padding: 12px 22px; border-radius: 10px; font-weight: 700; font-size: 15px; cursor: pointer; }
button.primary:disabled { opacity: .5; }
button.primary.big { width: 100%; padding: 15px; margin-top: 6px; font-size: 16px; }

.binfo { color: var(--muted); text-align: center; padding: 26px 10px; font-size: 14px; }

.results { display: grid; gap: 12px; margin-top: 16px; }
.pos-card { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 14px 16px; }
.pos-card.busy { opacity: .6; }
.pos-card.reco { border-color: var(--ok); box-shadow: inset 0 0 0 1px #3fb95044; }
.reco-badge { display: inline-block; background: #3fb95022; color: var(--ok); font-size: 11px; font-weight: 800; padding: 1px 7px; border-radius: 6px; margin-right: 4px; vertical-align: middle; }
.pos-card .pc-top { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.pos-card .pc-name { font-weight: 700; font-size: 16px; }
.pos-card .pc-addr { color: var(--muted); font-size: 13.5px; margin-top: 4px; }
.pos-card .pc-bottom { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 12px; flex-wrap: wrap; }
.pos-card .pc-phone { font-size: 14px; }
.pos-card .pc-phone a { color: var(--accent-2); text-decoration: none; font-weight: 600; }
.pill { display: inline-block; padding: 2px 9px; border-radius: 999px; font-size: 12px; font-weight: 700; white-space: nowrap; }
.pill.Strategic { background: #3fb95022; color: var(--strategic); }
.pill.Prime { background: #58a6ff22; color: var(--prime); }
.busy-tag { background: #d2992222; color: #d29922; padding: 2px 9px; border-radius: 999px; font-size: 12px; font-weight: 700; }
.pick { background: var(--panel-2); border: 1px solid var(--accent); color: #fff; padding: 9px 18px; border-radius: 9px; font-weight: 700; cursor: pointer; }

.modal, .done { position: fixed; inset: 0; z-index: 40; display: grid; place-items: center; padding: 18px; }
.modal-bg { position: absolute; inset: 0; background: #000a; }
.modal-card, .done-card {
    position: relative; background: var(--panel); border: 1px solid var(--line); border-radius: 16px;
    padding: 22px; width: 100%; max-width: 460px; box-shadow: 0 10px 40px #000a;
}
.modal-x { position: absolute; top: 12px; right: 14px; background: none; border: 0; color: var(--muted); font-size: 20px; cursor: pointer; }
.modal-card h3 { margin: 0 6px 12px 0; }
.minfo { background: var(--panel-2); border: 1px solid var(--line); border-radius: 10px; padding: 12px; font-size: 13.5px; margin-bottom: 14px; }
.minfo .mrow { display: flex; gap: 8px; margin: 2px 0; }
.minfo .mk { color: var(--muted); min-width: 84px; }

.done-card { text-align: center; }
.done-card .tick { width: 58px; height: 58px; border-radius: 50%; background: #3fb95022; color: var(--ok); font-size: 30px; display: grid; place-items: center; margin: 0 auto 12px; }
.done-card p { color: var(--muted); }
.calllink { display: inline-block; margin: 6px 0 16px; padding: 12px 20px; border-radius: 10px; background: var(--panel-2); border: 1px solid var(--accent-2); color: var(--accent-2); text-decoration: none; font-weight: 700; }

.toast { position: fixed; bottom: 22px; left: 50%; transform: translateX(-50%); background: var(--panel-2); border: 1px solid var(--line); padding: 12px 20px; border-radius: 10px; z-index: 60; font-size: 14px; }
.toast.err { border-color: var(--accent); }
.hidden { display: none !important; }

/* ---- help ---- */
.help-fab {
    position: fixed; right: 18px; bottom: 18px; z-index: 55;
    width: 48px; height: 48px; border-radius: 50%; border: 0;
    background: var(--accent-2); color: #fff; font-size: 24px; font-weight: 800;
    cursor: pointer; box-shadow: 0 6px 20px rgba(0,0,0,.4);
}
.help-modal { position: fixed; inset: 0; z-index: 70; }
.help-bg { position: absolute; inset: 0; background: #000a; }
.help-panel {
    position: absolute; right: 0; top: 0; height: 100%; width: min(520px, 96vw);
    background: var(--panel); border-left: 1px solid var(--line); box-shadow: 0 10px 40px #000a;
    padding: 22px 24px; overflow-y: auto;
}
.help-close { position: absolute; top: 12px; right: 16px; background: none; border: 0; color: var(--muted); font-size: 18px; cursor: pointer; }
.help-panel h2 { margin: 0 40px 6px 0; font-size: 19px; }
.help-intro { color: var(--muted); font-size: 13.5px; margin-bottom: 16px; line-height: 1.55; }
.help-item { padding: 9px 0; border-bottom: 1px solid var(--line); display: grid; gap: 3px; }
.hi-term { font-weight: 700; font-size: 13.5px; }
.hi-desc { color: var(--muted); font-size: 13px; line-height: 1.5; }
.help-tip { margin-top: 16px; padding: 12px 14px; background: #2f81f715; border: 1px solid #2f81f733; border-radius: 9px; font-size: 12.5px; line-height: 1.5; }

@media (max-width: 520px) {
    .grid2 { grid-template-columns: 1fr; }
    .row-actions { flex-direction: column; align-items: stretch; }
    .row-actions .primary { width: 100%; }
}