/* Bridge demo — scoped under .app */
.app{
  --b-bg:#070b14;--b-panel:#0d1424;--b-line:rgba(148,180,230,.14);--b-line2:rgba(148,180,230,.26);
  --b-ink:#e6eefb;--b-ink2:#9fb0cc;--b-mute:#66789a;
  --b-acc:#38bdf8;--b-lime:#a3e635;--b-amber:#fbbf24;--b-red:#f43f5e;--b-teal:#22d3ee;
  position:relative;overflow:hidden;padding:14px;display:flex;flex-direction:column;gap:14px;color:var(--b-ink);font:400 14px/1.45 var(--body);
  background:
    linear-gradient(rgba(148,180,230,.04) 1px,transparent 1px) 0 0/28px 28px,
    linear-gradient(90deg,rgba(148,180,230,.04) 1px,transparent 1px) 0 0/28px 28px,
    radial-gradient(800px 400px at 50% 0,rgba(56,189,248,.10),transparent 70%),var(--b-bg);
}
.app button{border:0;background:none;color:inherit;cursor:pointer}

/* controls */
.app .b-controls{display:flex;align-items:center;gap:12px 16px;flex-wrap:wrap}
.app .b-brand{display:flex;align-items:center;gap:10px;margin-right:auto}
.app .b-brand b{display:block;font:700 16px var(--display);letter-spacing:-.02em}
.app .b-brand small{display:block;font:500 10.5px var(--mono);color:var(--b-mute);letter-spacing:.06em;text-transform:uppercase}
.app .b-logo{width:30px;height:30px;border-radius:9px;background:linear-gradient(135deg,#1e3a5f,#0b1220);border:1px solid var(--b-line2);position:relative;flex:none}
.app .b-logo i{position:absolute;top:50%;width:9px;height:9px;margin-top:-4.5px;border-radius:50%}
.app .b-logo i:first-child{left:5px;background:#93c5fd}
.app .b-logo i:last-child{right:5px;background:var(--b-teal);box-shadow:0 0 8px var(--b-teal)}
.app .b-slider{display:flex;align-items:center;gap:10px;font:500 12px var(--mono);color:var(--b-ink2);min-height:40px}
.app .b-slider b{color:var(--b-acc)}
.app .b-slider input{width:130px;accent-color:var(--b-acc);height:28px}
.app .b-btns{display:flex;gap:6px}
.app .b-btn{display:inline-flex;align-items:center;gap:7px;height:40px;padding:0 13px;border-radius:11px;background:var(--b-panel)!important;border:1px solid var(--b-line2)!important;font:600 13px var(--body);transition:border-color .2s,color .2s}
.app .b-btn:hover{border-color:var(--b-acc)!important}
.app .b-btn[aria-pressed="true"]{color:var(--b-amber);border-color:var(--b-amber)!important}
.app .b-btn:disabled{opacity:.45;cursor:default}
.app .b-toggle{display:flex;align-items:center;gap:10px;min-height:40px;font:600 13px var(--body);cursor:pointer;padding:0 12px 0 6px;border-radius:11px;border:1px solid rgba(244,63,94,.35);background:rgba(244,63,94,.06);color:#fecdd3}
.app .b-toggle input{position:absolute;opacity:0;width:1px;height:1px}
.app .b-sw{width:38px;height:22px;border-radius:11px;background:#2a3346;position:relative;flex:none;transition:background .2s}
.app .b-sw::after{content:"";position:absolute;top:3px;left:3px;width:16px;height:16px;border-radius:50%;background:#cbd5e1;transition:transform .25s var(--ease)}
.app .b-toggle input:checked + .b-sw{background:var(--b-red)}
.app .b-toggle input:checked + .b-sw::after{transform:translateX(16px);background:#fff}
.app .b-toggle input:focus-visible + .b-sw{outline:2px solid var(--b-red);outline-offset:2px}

/* three-column layout */
.app .b-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.12fr) minmax(0,1fr);gap:14px;align-items:start}

/* public portal (light theme) */
.app .b-portal{position:relative;background:#f5f7fb;color:#0f172a;border-radius:16px;padding:14px;border:1px solid #dbe3ef;box-shadow:0 20px 50px -30px rgba(56,189,248,.5)}
.app .p-zone,.app .c-zone{position:absolute;top:-1px;right:14px;font:700 9.5px var(--mono);letter-spacing:.14em;padding:3px 8px;border-radius:0 0 7px 7px}
.app .p-zone{background:#2563eb;color:#fff}
.app .c-zone{background:var(--b-teal);color:#042029}
.app .p-head{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:6px}
.app .p-logo{display:flex;align-items:center;gap:8px;min-width:0}
.app .p-logo b{display:block;font:700 14.5px var(--body);letter-spacing:-.01em}
.app .p-logo small{display:block;font:500 10.5px var(--mono);color:#64748b;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.app .p-bell{position:relative;width:40px;height:40px;border-radius:11px;display:grid;place-items:center;background:#fff!important;border:1px solid #dbe3ef!important;color:#334155;flex:none}
.app .p-bell span{position:absolute;top:-5px;right:-5px;min-width:18px;height:18px;border-radius:9px;background:#16a34a;color:#fff;font:700 10.5px/18px var(--mono);text-align:center;padding:0 4px}
.app .p-bell span.pop{animation:bpop .5s var(--ease)}
@keyframes bpop{0%{transform:scale(.3)}60%{transform:scale(1.3)}100%{transform:none}}
.app .p-who{margin-top:8px;font-size:12px;color:#64748b}
.app .p-who b{color:#0f172a}
.app .p-notice{margin-top:10px;padding:10px 12px;border-radius:11px;background:#ecfdf5;border:1px solid #a7f3d0;color:#065f46;font-size:13px;animation:bslide .5s var(--ease)}
.app .p-notice.warn{background:#fffbeb;border-color:#fde68a;color:#92400e}
@keyframes bslide{from{opacity:0;transform:translateY(-6px)}}
.app .p-form{margin-top:12px;display:grid;gap:9px;padding:12px;border-radius:13px;background:#fff;border:1px solid #e2e8f0}
.app .p-form h3{font:700 15px var(--body);letter-spacing:-.01em;margin-bottom:2px}
.app .p-row{display:grid;grid-template-columns:1fr 1fr;gap:9px}
.app .p-form label{display:grid;gap:3px;font:600 10.5px var(--mono);letter-spacing:.05em;text-transform:uppercase;color:#64748b;min-width:0}
.app .p-form input{width:100%;min-width:0;height:38px;padding:0 10px;border-radius:9px;border:1px solid #cbd5e1;background:#f8fafc;color:#0f172a;font:500 13.5px var(--body);text-transform:none;letter-spacing:0;outline:0}
.app .p-form input:focus{border-color:#2563eb;box-shadow:0 0 0 3px rgba(37,99,235,.15)}
.app .p-photos{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:6px}
.app .p-ph{position:relative;aspect-ratio:4/3;border-radius:8px;overflow:hidden;display:grid;place-items:center;color:rgba(255,255,255,.85);border:0!important}
.app .p-ph small{position:absolute;left:4px;bottom:3px;font:600 8.5px var(--mono);letter-spacing:.04em;text-transform:uppercase;color:#fff;text-shadow:0 1px 2px rgba(0,0,0,.4)}
.app .p-ph svg{width:62%;height:auto}
.app .p-ph.add{background:#f1f5f9!important;color:#64748b;border:1.5px dashed #cbd5e1!important;font:600 18px var(--body)}
.app .p-ph.in{animation:bslide .4s var(--ease)}
.app .p-submit{display:flex;align-items:center;justify-content:center;gap:8px;height:42px;border-radius:11px;background:#2563eb!important;color:#fff!important;font:700 14px var(--body);transition:background .2s,transform .15s}
.app .p-submit:hover{background:#1d4ed8!important}
.app .p-submit:active{transform:scale(.98)}
.app .p-submit:disabled{background:#94a3b8!important;cursor:default}
.app .p-mine{margin-top:12px}
.app .p-mine h4{margin:0 0 6px;font:700 11px var(--mono);letter-spacing:.08em;text-transform:uppercase;color:#64748b}
.app .p-mine ul{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.app .p-mine li{display:flex;align-items:center;gap:8px;padding:9px 10px;border-radius:10px;background:#fff;border:1px solid #e2e8f0;font-size:13px}
.app .p-mine li b{font-weight:600}
.app .p-mine li small{color:#64748b;font-size:11.5px;display:block}
.app .p-mine li.p-empty{color:#94a3b8;justify-content:center}
.app .chip{margin-left:auto;flex:none;padding:3px 8px;border-radius:999px;font:700 10px var(--mono);letter-spacing:.04em;text-transform:uppercase;white-space:nowrap}
.app .chip.q{background:#f1f5f9;color:#475569}
.app .chip.d{background:#dbeafe;color:#1d4ed8}
.app .chip.a{background:#dcfce7;color:#15803d}
.app .chip.w{background:#fef3c7;color:#b45309}
.app .chip.flash{animation:bchip 1s var(--ease)}
@keyframes bchip{0%{box-shadow:0 0 0 4px rgba(34,197,94,.45)}100%{box-shadow:0 0 0 0 transparent}}

/* middle */
.app .b-mid{display:grid;gap:12px;min-width:0}
.app .b-diagram{position:relative;display:grid;grid-template-columns:1fr auto 1fr;align-items:stretch;gap:0;padding:14px 10px;border-radius:16px;background:rgba(13,20,36,.8);border:1px solid var(--b-line)}
.app .b-side{display:flex;flex-direction:column;align-items:center;gap:8px;padding:4px 6px}
.app .b-side>small{font:700 9.5px var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--b-mute)}
.app .b-side.pub>small{color:#93c5fd}
.app .b-side.priv>small{color:var(--b-teal)}
.app .b-node{position:relative;display:flex;flex-direction:column;align-items:center;gap:3px;width:100%;max-width:150px;padding:14px 8px 12px;border-radius:14px;background:var(--b-panel);border:1px solid var(--b-line2);text-align:center;transition:box-shadow .3s,border-color .3s}
.app .b-node b{font:600 13px var(--body)}
.app .b-node em{font-style:normal;font:500 10.5px var(--mono);color:var(--b-mute)}
.app #nPortal{color:#93c5fd}
.app #nPortal b{color:var(--b-ink)}
.app #nRunner{color:var(--b-teal)}
.app #nRunner b{color:var(--b-ink)}
.app .b-node.hit{border-color:var(--b-acc);box-shadow:0 0 0 3px rgba(56,189,248,.18),0 0 24px -4px rgba(56,189,248,.6)}
.app .b-ring{position:absolute;top:6px;right:6px;width:22px;height:22px;transform:rotate(-90deg)}
.app .b-ring circle{fill:none;stroke:rgba(34,211,238,.15);stroke-width:4}
.app .b-ring #ring{stroke:var(--b-teal);stroke-dasharray:106.8;stroke-dashoffset:106.8;stroke-linecap:round}
.app .b-wall{position:relative;width:70px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;text-align:center}
.app .b-wall i{width:6px;flex:1;min-height:60px;border-radius:3px;background:repeating-linear-gradient(180deg,#f43f5e 0 8px,#3b1420 8px 14px);opacity:.75;transition:box-shadow .2s,opacity .2s}
.app .b-wall span,.app .b-wall b{font:600 9px var(--mono);letter-spacing:.06em;text-transform:uppercase;color:#fda4af;line-height:1.2}
.app .b-wall b{color:var(--b-mute);font-weight:500}
.app .b-wall.zap i{opacity:1;box-shadow:0 0 0 4px rgba(244,63,94,.25),0 0 30px 4px rgba(244,63,94,.7)}
.app .b-wall.zap b{color:var(--b-red)}

.app .b-card{padding:12px;border-radius:14px;background:rgba(13,20,36,.85);border:1px solid var(--b-line);min-width:0}
.app .b-card h5{margin:0 0 8px;display:flex;align-items:baseline;gap:8px;flex-wrap:wrap;font:700 12px var(--mono);color:var(--b-ink)}
.app .b-card h5 span{font-weight:500;font-size:10.5px;color:var(--b-mute)}
.app .b-tablewrap{overflow-x:auto}
.app .b-table{width:100%;border-collapse:collapse;font:500 11.5px var(--mono)}
.app .b-table th{text-align:left;font-weight:500;color:var(--b-mute);padding:4px 6px;border-bottom:1px solid var(--b-line)}
.app .b-table td{padding:6px;border-bottom:1px solid rgba(148,180,230,.07);white-space:nowrap;color:var(--b-ink2)}
.app .b-table tr.new td{animation:brow 1.2s var(--ease)}
@keyframes brow{0%{background:rgba(56,189,248,.18)}100%{background:transparent}}
.app .b-qempty td{text-align:center;color:var(--b-mute)}
.app .st{display:inline-block;padding:1px 7px;border-radius:999px;font-size:10px;font-weight:700;letter-spacing:.04em;text-transform:uppercase}
.app .st.queued{background:rgba(148,163,184,.18);color:#cbd5e1}
.app .st.claimed{background:rgba(251,191,36,.16);color:var(--b-amber)}
.app .st.acked{background:rgba(163,230,53,.16);color:var(--b-lime)}
.app .b-sig pre{margin:0;font:500 11px/1.6 var(--mono);color:var(--b-ink2);white-space:pre-wrap;overflow-wrap:anywhere;min-height:88px}
.app .b-sig pre .k{color:var(--b-mute)}
.app .b-sig pre .m{color:var(--b-acc);font-weight:600}
.app .b-sig pre .h{color:#c4b5fd}
.app .b-ok{display:inline-flex;align-items:center;padding:2px 8px;border-radius:999px;background:rgba(163,230,53,.14);color:var(--b-lime)!important;font:700 10.5px var(--mono)!important;animation:bslide .3s}

/* private CRM (dark navy) */
.app .b-crm{position:relative;border-radius:16px;padding:14px;background:linear-gradient(180deg,#0e2142,#091631);border:1px solid rgba(34,211,238,.25);box-shadow:0 20px 50px -30px rgba(34,211,238,.6)}
.app .c-head{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:6px}
.app .c-logo{display:flex;align-items:center;gap:8px;min-width:0}
.app .c-logo b{display:block;font:700 15px var(--display);letter-spacing:-.02em}
.app .c-logo small{display:block;font:500 10.5px var(--mono);color:#7d93b8;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.app .c-lock{display:inline-flex;align-items:center;gap:5px;flex:none;font:700 10px var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--b-teal);padding:4px 8px;border-radius:999px;border:1px solid rgba(34,211,238,.3)}
.app .c-outbox{margin-top:10px;padding:8px 10px;border-radius:10px;background:rgba(2,8,20,.45);border:1px dashed rgba(148,197,255,.2);font:500 11.5px var(--mono);color:#7d93b8}
.app .c-outbox.has{color:var(--b-amber);border-color:rgba(251,191,36,.4)}
.app .c-deals{list-style:none;margin:10px 0 0;padding:0;display:grid;gap:8px}
.app .c-deals li.c-empty{padding:26px 10px;text-align:center;color:#6f82a3;font-size:13px;border:1px dashed rgba(148,197,255,.18);border-radius:12px}
.app .c-deal{padding:11px 12px;border-radius:12px;background:rgba(148,190,255,.07);border:1px solid rgba(148,197,255,.16)}
.app .c-deal.in{animation:cin .9s var(--ease)}
@keyframes cin{0%{opacity:0;transform:translateY(-8px);box-shadow:0 0 0 2px var(--b-teal)}100%{box-shadow:0 0 0 0 transparent}}
.app .c-deal header{display:flex;align-items:center;gap:8px;font:500 11px var(--mono);color:#7d93b8}
.app .c-deal header .cs{margin-left:auto}
.app .c-deal h4{margin:4px 0 0;font:600 14px var(--body)}
.app .c-deal p{margin:1px 0 0;font-size:12.5px;color:#a9bad6}
.app .c-thumbs{display:flex;gap:4px;margin-top:8px}
.app .c-thumbs i{width:26px;height:19px;border-radius:4px}
.app .c-acts{display:flex;gap:6px;margin-top:10px;flex-wrap:wrap}
.app .c-acts button{flex:1;min-width:110px;height:38px;border-radius:10px;font:600 12.5px var(--body)}
.app .c-acts .ok{background:linear-gradient(135deg,#22d3ee,#2dd4bf)!important;color:#042029!important}
.app .c-acts .ask{background:rgba(148,190,255,.08)!important;border:1px solid rgba(148,197,255,.25)!important}
.app .cs{padding:2px 8px;border-radius:999px;font:700 9.5px var(--mono);letter-spacing:.05em;text-transform:uppercase}
.app .cs.n{background:rgba(148,163,184,.2);color:#cbd5e1}
.app .cs.a{background:rgba(52,211,153,.16);color:#34d399}
.app .cs.w{background:rgba(251,191,36,.16);color:var(--b-amber)}
.app .c-sync{margin-top:8px;font:500 10.5px var(--mono);color:#7d93b8}
.app .c-sync.ok{color:var(--b-lime)}

/* console */
.app .b-console{border-radius:14px;background:#04070d;border:1px solid var(--b-line);overflow:hidden}
.app .b-console__h{display:flex;align-items:center;justify-content:space-between;padding:6px 8px 6px 12px;border-bottom:1px solid var(--b-line);font:600 11px var(--mono);color:var(--b-mute);letter-spacing:.08em;text-transform:uppercase}
.app .b-console__h span{display:flex;align-items:center;gap:8px}
.app .b-console__h i{width:7px;height:7px;border-radius:50%;background:var(--b-lime);box-shadow:0 0 8px var(--b-lime)}
.app .b-console__h button{min-height:32px;padding:0 10px;font:500 11px var(--mono);color:var(--b-ink2);text-transform:lowercase}
.app .b-console ol{list-style:none;margin:0;padding:8px 12px;height:180px;overflow-y:auto;font:500 11.5px/1.65 var(--mono);color:var(--b-ink2)}
.app .b-console li{display:flex;gap:10px;animation:bslide .25s}
.app .b-console li time{color:var(--b-mute);flex:none}
.app .b-console li span{min-width:0;overflow-wrap:anywhere}
.app .b-console li.out span{color:var(--b-acc)}
.app .b-console li.in span{color:var(--b-lime)}
.app .b-console li.sx span{color:var(--b-amber)}
.app .b-console li.err span{color:var(--b-red)}
.app .b-console li.dim span{color:var(--b-mute)}

/* packets */
.app .b-layer{position:absolute;inset:0;pointer-events:none;z-index:20}
.app .pk{position:absolute;left:0;top:0;padding:3px 9px;border-radius:999px;font:700 10px var(--mono);letter-spacing:.03em;white-space:nowrap;color:#04121c;background:var(--b-acc);box-shadow:0 0 0 3px rgba(56,189,248,.2),0 0 22px rgba(56,189,248,.7);will-change:transform}
.app .pk.in{background:var(--b-lime);box-shadow:0 0 0 3px rgba(163,230,53,.2),0 0 22px rgba(163,230,53,.7)}
.app .pk.sx{background:var(--b-amber);box-shadow:0 0 0 3px rgba(251,191,36,.2),0 0 22px rgba(251,191,36,.7)}
.app .pk.bad{background:var(--b-red);color:#fff;box-shadow:0 0 0 3px rgba(244,63,94,.25),0 0 22px rgba(244,63,94,.8)}
.app .pk.lock::before{content:"🔏 "}
.app .spark{position:absolute;width:6px;height:6px;border-radius:50%;background:var(--b-red);box-shadow:0 0 8px var(--b-red)}
.app .b-blocked{position:absolute;z-index:30;left:50%;top:40%;transform:translate(-50%,0);width:min(420px,calc(100% - 28px));padding:16px 18px;border-radius:14px;background:rgba(40,8,16,.96);border:1px solid var(--b-red);box-shadow:0 30px 80px -20px rgba(244,63,94,.6);text-align:center;animation:bshake .5s}
.app .b-blocked b{display:block;color:#fecdd3;font:700 15px var(--body)}
.app .b-blocked span{display:block;margin-top:4px;font-size:12.5px;color:#fda4af}
@keyframes bshake{0%,100%{transform:translate(-50%,0)}20%{transform:translate(calc(-50% - 8px),0)}40%{transform:translate(calc(-50% + 7px),0)}60%{transform:translate(calc(-50% - 5px),0)}80%{transform:translate(calc(-50% + 3px),0)}}

@media (max-width:1100px){
  .app .b-grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .app .b-mid{grid-column:1/-1;order:-1;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr)}
  .app .b-diagram{grid-column:1/-1}
}
@media (max-width:720px){
  .app{padding:12px}
  .app .b-grid{grid-template-columns:minmax(0,1fr)}
  .app .b-mid{order:0;grid-template-columns:minmax(0,1fr)}
  .app .b-controls{gap:10px}
  .app .b-brand{flex-basis:100%}
  .app .b-slider{flex:1}
  .app .b-slider input{flex:1;width:auto;min-width:0}
  .app .b-btns{flex-basis:100%}
  .app .b-btns .b-btn{flex:1;justify-content:center}
  .app .b-toggle{flex-basis:100%}
  .app .p-photos{grid-template-columns:repeat(5,minmax(0,1fr))}
  .app .b-console ol{height:200px}
}