/* Presentation only: scoped to Live and Configuration. */
.workspace { --bg:#0b1117; --bg-elev:#101922; --panel:#141e27; --panel-2:#1a2732; --line:#2a3945; --text:#e8eef5; --muted:#a3b1bf; --accent:#34d399; font-size:15px; line-height:1.5; }
.workspace [hidden] { display:none!important; }
.workspace :focus-visible { outline:2px solid var(--accent); outline-offset:4px; }
.workspace .topbar { background:#0f1820; padding:14px 24px; }
.workspace .brand-mark { border-radius:11px; width:40px; height:40px; box-shadow:none; }
.workspace .brand h1 { font-size:16px; letter-spacing:.03em; }
.workspace .brand p { font-size:12px; }
.workspace .btn,.workspace .nav-link { min-height:44px; display:inline-flex; align-items:center; justify-content:center; font-size:14px; }
.workspace .btn { background:#187654; border-color:#248b68; font-weight:600; }
.workspace .btn.ghost { background:transparent; border-color:var(--line); }
.workspace .nav-link.active { color:var(--accent); }
.workspace .card { box-shadow:0 8px 28px #0002; border-radius:14px; }
.workspace .card-hd { padding:16px 18px; background:none; }
.workspace .card-hd h2 { font-size:15px; }
.workspace .card-bd { padding:16px 18px; }
.session-strip { display:flex; flex-wrap:wrap; gap:8px; padding:12px 24px 0; }
.workspace .pill { font-size:12px; padding:5px 10px; }
.workspace .pill .dot { box-shadow:none; }
#pillClock { margin-left:auto; }
.workspace .layout { grid-template-columns:minmax(0,2.8fr) minmax(320px,1fr); gap:18px; padding:16px 24px 24px; }
.workspace .layout>* { min-width:0; }
.workspace .video-stage { max-height:none; aspect-ratio:16/9; }
.workspace .video-stage video { object-fit:contain; }
.workspace .hud { padding:14px; }
.workspace .hud-chip { font-size:12px; }
.workspace .hud-row:last-child { margin-bottom:38px; }
#streamSub { display:block; max-width:100%; overflow-wrap:anywhere; font-size:12px; }
.workspace .tele-grid { gap:10px; margin-top:16px; }
.workspace .tele { padding:12px; min-width:0; }
.workspace .tele .k { font-size:11px; letter-spacing:.025em; }
.workspace .tele .v { overflow-wrap:anywhere; }
.workspace .tele .u { font-size:12px; }
.workspace .aside-col { gap:18px; }
.workspace .gis-map { height:clamp(280px,34vh,420px); }
.workspace .lot-row .k { font-size:12px; text-transform:none; }
.workspace .lot-row .v { font-size:14px; }
.workspace .map-foot,.workspace .map-lot-hint { font-size:12px; overflow-wrap:anywhere; }
.workspace .map-btn { min-height:44px; }
.video-empty { position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px; padding:28px; text-align:center; color:var(--muted); background:radial-gradient(ellipse at center,#1a2a35,#080d12 75%); }
.video-empty strong { font-size:20px; color:var(--text); font-weight:600; }
.video-empty>span:last-child { font-size:14px; }
.empty-icon { font-size:38px; color:var(--accent); }
.view-switch { display:none; }
.workspace.video-focus .layout { grid-template-columns:1fr; }
.workspace.video-focus .aside-col { display:grid; grid-template-columns:1fr 1fr; }
.workspace.video-focus .video-stage { max-height:78vh; }
.config-layout { display:grid; grid-template-columns:230px minmax(0,1fr); gap:28px; width:min(1240px,100%); padding:28px 24px 40px; margin:0 auto; align-items:start; }
.config-nav { position:sticky; top:100px; display:flex; flex-direction:column; gap:8px; }
.eyebrow { color:var(--muted); font-size:11px; letter-spacing:.12em; padding:12px; }
.config-nav a { color:var(--text); border-radius:8px; padding:12px; font-size:14px; }
.config-nav a:hover,.config-nav a:focus-visible { background:var(--panel); color:var(--accent); }
.config-nav p { font-size:13px; color:var(--muted); padding:0 12px; }
.config-content { min-width:0; }
.config-page .card { overflow:visible; }
.config-page .card-bd { padding:24px; }
.config-page .stack { gap:16px; }
.config-page .section-title { border-top:1px solid var(--line); padding-top:24px; margin:12px 0 0; font-size:18px; font-weight:600; scroll-margin-top:100px; }
#cfgSession { scroll-margin-top:100px; }
.workspace .field label { text-transform:none; font-size:13px; letter-spacing:0; margin-bottom:7px; }
.workspace .field input,.workspace .field select,.workspace .field textarea { min-height:44px; font-size:15px; padding:10px 12px; }
.workspace .meta-grid { gap:14px 20px; }
.workspace .meta-grid>* { min-width:0; }
.workspace .hint { font-size:13px; line-height:1.65; border-style:solid; }
.workspace .period-hint { font-size:13px; }
.workspace summary { min-height:44px; padding:10px 0; }
.workspace .toolbar-inline input { padding:10px; border:1px solid var(--line); border-radius:8px; background:var(--bg); color:var(--text); min-width:0; width:100%; }
.save-bar { position:sticky; bottom:12px; z-index:10; border:1px solid var(--line); background:#101922f5; border-radius:12px; padding:12px; box-shadow:0 8px 25px #0005; }
.save-bar #btnSave { order:3; margin-left:auto; }
#saveMsg { font-size:13px; color:var(--accent); }
#statusBox { max-height:280px; overflow:auto; overflow-wrap:anywhere; }
@media(min-width:1800px) { .workspace .layout { grid-template-columns:minmax(0,3fr) minmax(380px,1fr); } }
@media(max-width:1199px) { .workspace .layout { grid-template-columns:minmax(0,1.8fr) minmax(300px,1fr); padding:16px; gap:14px; } .workspace .tele-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } .config-layout { grid-template-columns:190px minmax(0,1fr); gap:16px; } }
@media(max-width:959px) { .workspace .layout { grid-template-columns:1fr; } .workspace .aside-col { display:grid; grid-template-columns:1fr 1fr; } .workspace .tele-grid { grid-template-columns:repeat(4,minmax(0,1fr)); } .config-layout { display:block; padding:16px; } .config-nav { position:static; flex-direction:row; flex-wrap:wrap; gap:4px; margin-bottom:16px; } .config-nav .eyebrow,.config-nav p { display:none; } .config-nav a { border:1px solid var(--line); } }
@media(max-width:639px) { .workspace .topbar { padding:12px; flex-wrap:wrap; gap:12px; position:relative; } .workspace .brand h1 { font-size:14px; } .workspace .brand p { font-size:11px; } .workspace .topbar-right { justify-content:flex-start; width:100%; } .session-strip { padding:10px 12px; gap:6px; } #pillClock { display:none; } .workspace .pill { font-size:11px; padding:4px 8px; } .workspace .layout { padding:0 12px 20px; gap:12px; } .workspace .aside-col,.workspace.video-focus .aside-col { display:flex; } .workspace .tele-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } .workspace .card-hd,.workspace .card-bd { padding:12px; } .workspace .hud-chip { font-size:10px; } .workspace .video-actions { display:grid; grid-template-columns:1fr 1fr; } .workspace .video-actions .btn { padding:8px; font-size:12px; } .workspace .video-empty strong { font-size:16px; } .workspace .video-empty>span:last-child { font-size:12px; } .workspace .empty-icon { font-size:24px; } .workspace .video-empty { gap:3px; } .workspace .meta-grid { grid-template-columns:1fr; } .workspace .db-status { flex-wrap:wrap; } .workspace .db-status-text { flex-basis:70%; } .workspace .period-row .field { min-width:0; flex-basis:100%; max-width:none!important; } .config-layout { padding:12px; } .save-bar { bottom:8px; } .save-bar .btn { flex:1 1 100%; } .save-bar #btnSave { margin-left:0; } .workspace .toolbar-inline { gap:8px; } .workspace .toolbar-inline input { flex-basis:100%; } .workspace .gis-map { height:380px; max-height:65dvh; } .view-switch { display:flex; margin:0 12px 12px; padding:4px; background:var(--panel); border:1px solid var(--line); border-radius:10px; } .view-switch button { flex:1; min-height:44px; background:transparent; color:var(--muted); border:0; border-radius:7px; cursor:pointer; } .view-switch button[aria-pressed=true] { color:var(--text); background:var(--panel-2); } .live-page[data-view=video] .aside-col,.live-page[data-view=map] .live-main,.live-page[data-view=info] .live-main,.live-page[data-view=map] .lot-card,.live-page[data-view=info] .map-card { display:none; } #btnFocusVideo { display:none; } }
@media(prefers-reduced-motion:reduce) { * { scroll-behavior:auto!important; } }

/* Keep mobile actions compact and reserve space below the form. */
@media(max-width:639px) {
 .config-page { padding-bottom:82px; }
 .save-bar { position:fixed; left:12px; right:12px; bottom:8px; margin:0; padding:8px; display:flex; }
 .save-bar .btn { flex:1; min-width:0; font-size:13px; padding:8px; }
 .save-bar #btnCheck { display:none; }
 .config-page .card-bd { padding-bottom:24px; }
}

/* Toast — góc dưới phải (trên save-bar trên mobile) */
.toast-host {
  position: fixed;
  z-index: 9999;
  right: 20px;
  bottom: 24px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  pointer-events: none;
  max-width: min(360px, calc(100vw - 24px));
}
.toast {
  pointer-events: none;
  padding: 12px 16px;
  border-radius: 10px;
  font-size: 14px;
  line-height: 1.4;
  color: #e8eef5;
  background: #1a2732;
  border: 1px solid #2a3945;
  box-shadow: 0 10px 28px #0006;
  opacity: 0;
  transform: translateY(10px);
  transition: opacity .22s ease, transform .22s ease;
}
.toast.show {
  opacity: 1;
  transform: translateY(0);
}
.toast-ok {
  border-color: #248b68;
  background: linear-gradient(180deg, #1a3d30, #14262a);
}
.toast-ok::before {
  content: "";
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #34d399;
  margin-right: 8px;
  vertical-align: 1px;
}
.toast-err {
  border-color: #a04444;
  background: linear-gradient(180deg, #3a1e1e, #1a1518);
}
.toast-info {
  border-color: #3a5a78;
}
@media(max-width:639px) {
  .toast-host { left: 12px; right: 12px; bottom: 72px; max-width: none; }
}