/* TALK ICON */
    #talkIconWrap{grid-column:2;margin-left:20px;display:flex;align-items:center}
    #talkIcon{
      width:44px;height:28px;object-fit:contain;cursor:pointer;user-select:none;
      transition:opacity .15s ease, filter .15s ease, transform .05s ease;
    }
    #talkIcon.faded{opacity:.35;filter:grayscale(100%)}
    #talkIcon:active{transform:scale(.96)}

    /* Floating doorbell window */
    #doorbellFloat{
      position:fixed;right:12px;bottom:12px;width:360px;height:280px;border-radius:12px;
      overflow:hidden;background:#000;box-shadow:0 12px 28px rgba(0,0,0,.35);display:none;z-index:9997
    }
    #doorbellHead{position:absolute;left:0;right:0;bottom:0;height:34px;background:rgba(0,0,0,.55);display:flex;align-items:center;gap:8px;padding:4px 6px;color:#fff}
    .btn-round{width:24px;height:24px;border-radius:999px;border:0;cursor:pointer;display:flex;align-items:center;justify-content:center;font-weight:700}
    .btn-red{background:#d04d4d;color:#fff}
    .btn-yellow{background:#ffcc33;color:#000}
    #audioState{margin-left:auto;font-size:12px;opacity:.9}
    #doorbellVideo, #doorbellFrame {width:100%;height:100%;display:block;border:0}

    /* allow drag */
    #doorbellFloat.dragging{opacity:.92;cursor:grabbing}
:root{--page-bg:#e6e6e6;--card-bg:#232524;--placeholder:#bfbfbf;--text:#fff;--brand-color:#DA281B;--action:#E3735D;--action-hover:#cc5e4b}
    html,body{height:100%}
    body{margin:0;background:var(--page-bg);color:var(--text);font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif}
    .hidden{display:none!important}

    /* ---- HEADER ---- */
    .gallery-top{
      position:sticky;top:0;z-index:40;
      display:grid;grid-template-columns:auto 1fr auto auto;align-items:center;
      padding:6px 10px 8px;background:var(--page-bg);border-bottom:1px solid rgba(0,0,0,.06)
    }
    #galleryHomeLogo{grid-column:1;width:85px;height:85px;object-fit:contain;cursor:pointer;user-select:none;justify-self:start}
    .quick-find{grid-column:4;justify-self:end;display:flex;gap:6px;align-items:center}
    #quickFind{
      width:120px;height:32px;border-radius:999px;border:1px solid #ccc;background:#fff;color:#111;
      padding:4px 10px;font-size:14px;outline:none;
    }
    #quickFind.invalid{color:#b00020;border-color:#f0a0a0}
    #quickFindGo{
      width:32px;height:32px;border-radius:999px;border:0;background:var(--brand-color);color:#fff;cursor:pointer;
      display:inline-flex;align-items:center;justify-content:center;box-shadow:0 2px 6px rgba(0,0,0,.2)
    }

    /* ---- VIEW WRAPPERS ---- */
    #backBar{display:none} /* keep it present but hidden */
    .gallery{max-width:980px;margin:0 auto;padding:0 12px 80px}
    .back-btn{font-size:14px;padding:8px 12px;border-radius:10px;border:0;cursor:pointer;background:#f7f7f7;color:#0b3d91;box-shadow:0 2px 6px rgba(0,0,0,.2)}

    /* ---- GALLERY CARDS ---- */
    .style-header{margin:18px 6px 8px;font:800 20px/1.1 system-ui;color:var(--brand-color)}
    .inv-card{position:relative;background:var(--card-bg);color:var(--text);border-radius:18px;padding:16px;margin:14px 0;box-shadow:0 8px 24px rgba(0,0,0,.25)}
    .inv-card.highlight{box-shadow:0 0 0 3px var(--brand-color),0 10px 24px rgba(0,0,0,.35);animation:blink 1.2s ease-in-out 1}
    @keyframes blink{0%{filter:brightness(1)}50%{filter:brightness(1.25)}100%{filter:brightness(1)}}
    .inv-head{display:flex;align-items:center;justify-content:space-between}
    .inv-head .lot{font-weight:800;letter-spacing:.3px;font-size:18px}
    .inv-logo-btn{width:70px;height:40px;object-fit:contain;cursor:pointer;user-select:none}
    .inv-photos{display:flex;gap:16px;margin:14px 0 10px}
    .inv-photo{flex:1;aspect-ratio:4/3;border-radius:8px;overflow:hidden;background:var(--placeholder);position:relative}
    .inv-photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center;display:block}
    .inv-row{display:flex;align-items:baseline;justify-content:space-between;gap:24px;margin-top:8px}
    .inv-price{font-variant-numeric:tabular-nums}
    .inv-right{display:flex;gap:18px;align-items:baseline}
    .inv-status{font-weight:800}
    .inv-status.Available{color:#7CFF7C}
    .inv-status.OnHold{color:#FFD27A}
    .inv-status.Sold{color:#FF8A8A}
    .inv-size{opacity:.95}
    .inv-smrow{display:flex;justify-content:space-between;gap:24px;margin-top:10px;opacity:.95}
    .inv-note{margin-top:10px;white-space:pre-wrap;line-height:1.25;opacity:.95}
    @media (max-width:640px){.inv-head .lot{font-size:16px}}

    /* ---- MANAGER ---- */
    #manageView{padding:16px;max-width:1000px;margin:0 auto;background:#fff;color:#111}
    #manageView h2{margin:6px 0 12px}
    #manageView .toolbar{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:12px;position:sticky;top:0;z-index:10;background:#fff;padding:8px 0;border-bottom:1px solid #eee}
    #manageView input,#manageView button,#manageView select,#manageView textarea{padding:10px;font-size:16px}
    #manageView input,#manageView select,#manageView textarea{border:1px solid #ddd;border-radius:8px}
    #manageView button{border:1px solid #ccc;border-radius:10px;background:#f7f7f7;cursor:pointer}
    #manageView button:hover{background:#f0f0f0}
    #manageView .card{border:1px solid #e3e3e3;border-radius:12px;padding:12px;margin:12px 0;background:#fff}
    #manageView .card.highlight{outline:3px solid var(--brand-color);animation:blink 1.2s ease-in-out 1}
    #manageView .hdr{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px;gap:8px;flex-wrap:wrap}
    #manageView .status{font-weight:700}
    #manageView .Available{color:green}
    #manageView .OnHold{color:#c58f00}
    #manageView .Sold{color:#b00020}
    #manageView .actions{display:flex;gap:8px;flex-wrap:wrap}
    #manageView label{display:block;margin-top:8px;margin-bottom:4px;font-weight:600}
    #manageView img{max-height:160px;width:auto;border:1px solid #eee;border-radius:8px;background:#fafafa}
    #manageView .offline{color:#b00020;font-weight:600;margin:8px 0}
    .muted{color:#666}
    .inline-controls{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-top:8px}
    .record-photos{display:flex;gap:8px;flex-wrap:wrap;margin:8px 0 4px}
    .record-fields{display:grid;grid-template-columns:1fr;gap:8px}
    .btn-primary{background:var(--action)!important;border-color:var(--action)!important;color:#fff!important}
    .btn-primary:hover{background:var(--action-hover)!important;border-color:var(--action-hover)!important}
    .status-btn{border:1px solid #bbb;background:#f7f7f7;border-radius:10px;padding:10px 12px;cursor:pointer}
    .status-btn.is-current{background:#ffc0d0;border-color:#ffc0d0}

    /* Banner editor card */
    .banner-editor{background:#e2ebfa;border:2px solid #cae3ff;border-radius:12px;padding:12px;margin:16px 0}
    .banner-row{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
    .banner-row input[type="text"]{min-width:260px;flex:1}
    .banner-preview{margin-top:8px;padding:8px 12px;border-radius:10px;background:#232524;color:#fff;font-weight:700}

    /* error surface */
    #errorPane{max-width:980px;margin:8px auto 0;padding:8px 12px;border-radius:10px;background:#fff;color:#b00020;border:1px solid #f2c5c5;display:none}
    #errorPane pre{white-space:pre-wrap;word-break:break-word;margin:6px 0 0}
    #retryBtn{margin-left:8px}

    /* context menu */
    #ctxMenu{
      position:fixed;z-index:9999;min-width:210px;background:#fff;color:#111;border:1px solid #ddd;border-radius:12px;
      box-shadow:0 10px 28px rgba(0,0,0,.25);padding:6px;display:none
    }
    #ctxMenu button{
      display:flex;gap:8px;align-items:center;width:100%;padding:10px 12px;border:0;background:#fff;border-radius:8px;cursor:pointer
    }
    #ctxMenu button:hover{background:#f5f5f5}
    /* toast */
    #toast{
      position:fixed;left:50%;bottom:18px;transform:translateX(-50%);
      background:#111;color:#fff;padding:8px 12px;border-radius:8px;opacity:0;pointer-events:none;transition:opacity .2s
    }
    #toast.show{opacity:.93}

    /* share bar (two-step share) */
    #shareBar{
      position:fixed;left:50%;bottom:16px;transform:translateX(-50%);
      background:#fff;color:#111;border:1px solid #ddd;border-radius:12px;box-shadow:0 12px 28px rgba(0,0,0,.25);
      display:none;gap:8px;align-items:center;padding:10px;
    }
    #shareBar .lbl{margin-right:6px}
    #shareBar button{padding:8px 10px;border-radius:10px;border:1px solid #ccc;background:#f7f7f7;cursor:pointer}
    #shareBar button.primary{background:var(--brand-color);border-color:var(--brand-color);color:#fff}

    /* ===== Simple PIN modal ===== */
    #pinGate{
      position:fixed;inset:0;background:rgba(0,0,0,.6);display:none;align-items:center;justify-content:center;z-index:9998
    }
    #pinCard{
      background:#ffffff;border-radius:14px;padding:16px 16px 12px;max-width:320px;width:92%;box-shadow:0 16px 40px rgba(0,0,0,.35);color:#111
    }
    #pinCard h3{margin:0 0 6px 0}
    #pinCard input{width:100%;padding:12px;border-radius:10px;border:1px solid #ddd;font-size:18px;letter-spacing:6px;text-align:center}
    #pinCard .row{display:flex;gap:8px;margin-top:8px}
    #pinOK{flex:1;border-radius:10px;border:1px solid #ccc;background:#f7f7f7;cursor:pointer;padding:10px}
    #pinMsg{margin-top:6px;color:#b00020;min-height:1.2em}
    #pinLockBtn{margin-left:auto}
  

/* Quick Find width override */
.quick-find input, .quick-find input[type="search"]{ width:100px; }

/* --- Doorbell setup dialog --- */
.dlg::backdrop { background: rgba(0,0,0,.35); }
.dlg { border: 0; border-radius: 14px; padding: 0; }
.dlg-body { padding: 16px 16px 12px; min-width: 280px; background: #fff; color: #222; }
.dlg-body h3 { margin: 0 0 6px; font-size: 18px; }
.dlg-body .subtle { margin: 0 0 10px; opacity: .8; font-size: 13px; }
.dlg-body .field { display: grid; gap: 6px; margin: 10px 0; }
.dlg-body label { font-size: 14px; }
.dlg-body input[type="url"] { padding: 8px 10px; border-radius: 8px; border: 1px solid #ccc; font-size: 14px; }
.dlg-body .actions { display: flex; gap: 8px; justify-content: flex-end; margin-top: 12px; }
.dlg-body .btn { padding: 8px 12px; border-radius: 10px; border: 1px solid #ccc; background: #f6f6f6; cursor: pointer; }
.dlg-body .btn-primary { background: #0b3d91; color: #fff; border-color: #0b3d91; }

/* Talk icon (already present) kept; floating window already styled */