*{box-sizing:border-box}html,body{height:100%}body{margin:0;font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;background:#0b0c10;color:#e8e8ea}
.topbar{display:flex;gap:18px;align-items:flex-start;justify-content:space-between;padding:14px 16px;border-bottom:1px solid #22242a;background:#0f1117;position:sticky;top:0;z-index:10}
.brand{display:flex;gap:12px;align-items:center}
.logo{width:44px;height:44px;border-radius:12px;background:#1f2937;display:flex;align-items:center;justify-content:center;font-weight:800;letter-spacing:.5px}
.title{font-size:18px;font-weight:700}
.subtitle{font-size:12px;color:#a3a3ad}
.controls{display:flex;gap:18px;align-items:flex-start;flex-wrap:wrap}
.filebox{display:flex;flex-direction:column;gap:6px;min-width:320px}
.label{font-size:12px;color:#a3a3ad}
.row{display:flex;gap:8px;align-items:center}
.actions{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.btn{border:1px solid #2b2f3a;background:#1f2937;color:#e8e8ea;padding:8px 10px;border-radius:10px;font-weight:600;cursor:pointer}
.btn:hover{filter:brightness(1.05)}
.btn.secondary{background:#131826}
.btn.ghost{background:transparent;border-color:transparent;color:#a3a3ad}
.btn.ghost:hover{background:#141824;border-color:#2b2f3a;color:#e8e8ea}
select,input[type="search"],input[type="file"],input[type="text"]{background:#0f1117;border:1px solid #2b2f3a;color:#e8e8ea;border-radius:10px;padding:8px 10px}
select{min-width:180px}

/* Layout updated to 4 columns to match index.html */
.layout{display:grid;grid-template-columns:280px 1fr 320px 300px;gap:12px;padding:12px;min-height:calc(100% - 120px)}

.panel{background:#0f1117;border:1px solid #20232b;border-radius:14px;overflow:hidden;display:flex;flex-direction:column;min-height:500px}
.panelHeader{display:flex;justify-content:space-between;align-items:baseline;padding:12px 12px;border-bottom:1px solid #20232b}
.panelTitle{font-weight:800}
.muted{color:#a3a3ad;font-size:12px}
.searchBox{padding:12px}
.sortRow{padding:0 12px 12px;display:flex;gap:8px;align-items:center}
.hint{padding:0 12px 12px;color:#a3a3ad;font-size:12px}
.categoryList{padding:0 12px 12px;overflow:auto}
.cat{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:8px 10px;border:1px solid #20232b;border-radius:12px;margin-bottom:8px}
.cat label{display:flex;gap:10px;align-items:center;cursor:pointer}
.count{font-size:12px;color:#a3a3ad}
.results{padding:12px;overflow:auto;display:flex;flex-direction:column;gap:8px}
.card{border:1px solid #20232b;border-radius:14px;padding:10px 10px;background:#0b0c10;cursor:pointer}
.card:hover{border-color:#2b2f3a}
.cardHeader{display:flex;justify-content:space-between;gap:8px;align-items:flex-start}
.name{font-weight:800}
.tags{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
.tag{font-size:11px;color:#cbd5e1;border:1px solid #243041;background:#0f172a;padding:3px 7px;border-radius:999px}
.phoneChip{font-size:11px;border:1px solid #3a2b2b;background:#1a0f0f;color:#fca5a5;padding:3px 7px;border-radius:999px;cursor:pointer}
.phoneChip:hover{filter:brightness(1.08)}
.personPane{padding:12px;overflow:auto}
.emptyState{color:#a3a3ad;padding:14px;border:1px dashed #2b2f3a;border-radius:14px}
.field{display:flex;flex-direction:column;gap:6px;margin-bottom:12px}
.field label{font-size:12px;color:#a3a3ad}
.grid{display:grid;grid-template-columns:1fr;gap:8px}
.capItem{display:flex;justify-content:space-between;align-items:center;border:1px solid #20232b;border-radius:12px;padding:8px 10px}
.footer{padding:10px 16px;color:#a3a3ad;font-size:12px;border-top:1px solid #22242a;background:#0f1117}
.modalOverlay{position:fixed;inset:0;background:rgba(0,0,0,.6);display:flex;align-items:center;justify-content:center;padding:18px;z-index:50}
.modalOverlay.hidden{display:none}
.modal{width:min(720px,100%);background:#0f1117;border:1px solid #20232b;border-radius:16px;overflow:hidden}
.modalHeader{display:flex;justify-content:space-between;align-items:center;padding:12px 12px;border-bottom:1px solid #20232b}
.modalTitle{font-weight:800}
.modalBody{padding:12px;max-height:60vh;overflow:auto}
.modalFooter{padding:12px;border-top:1px solid #20232b;display:flex;justify-content:flex-end;gap:8px;flex-wrap:wrap}
hr{border:none;border-top:1px solid #20232b;margin:12px 0}
@media (max-width:1100px){.layout{grid-template-columns:1fr}.panel{min-height:unset}}

.headerRight{display:flex;gap:8px;align-items:center;flex-wrap:wrap;justify-content:flex-end}
.smallSelect{min-width:120px}
.bulkRow{padding:0 12px 12px;display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.bulkRow .muted{max-width:220px}
.card.compact{padding:8px 10px}
.card.compact .tags{display:none}
.card.compact .name{font-weight:700}

.personPane .smallSelect{min-width:140px}

/* Toast */
.toast{position:fixed;top:14px;left:50%;transform:translateX(-50%);z-index:9999;
  padding:10px 14px;border-radius:12px;box-shadow:0 10px 30px rgba(0,0,0,.12);
  background:#111;color:#fff;font-weight:600;max-width:min(720px,92vw);text-align:center}
.toast.hidden{display:none}
.toast.ok{background:#0b5}
.toast.warn{background:#c80}
.toast.err{background:#c33}

.smallBtn{padding:6px 10px;font-size:12px;border-radius:10px}

.phoneActions{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.actionChip{display:inline-flex;gap:6px;align-items:center;padding:6px 10px;border-radius:999px;
  background:rgba(0,0,0,.06);cursor:pointer;font-weight:600}
.actionChip:hover{background:rgba(0,0,0,.10)}
.actionLink{color:inherit;text-decoration:none}

.personPane .smallSelect{min-width:140px}

.iconBtn{padding:6px 10px;font-size:14px;border-radius:10px}
.searchBox{display:flex;gap:8px;align-items:center}
.savedFlash{filter:brightness(1.1);}
.panel.resultsPanel .searchBox{margin-bottom:10px}

/* Mobile Safari Specific Rendering Fixes */
@media (max-width: 1100px) {
  .layout {
    display: flex !important;
    flex-direction: column !important;
    height: auto !important;
    min-height: 100vh;
  }
  .panel {
    min-height: unset !important; 
    height: auto !important;
    margin-bottom: 8px;
  }
  .results {
    flex: 1 1 auto !important;
    overflow-y: visible !important; /* Prevents hidden lists in nested scrolls */
  }
  .panel-body {
    display: none;
    padding: 0 12px 12px;
  }
  .panel-body.active {
    display: block;
  }
    /* icon rotation logic */
  .panel-body.active + .panelHeader .toggle-icon,
  .panelHeader.active .toggle-icon {
    transform: rotate(180deg);
  }
  .panelHeader {
    cursor: pointer;
    background: #1a1c23; /* Visual cue for tappable area */
  }
  .toggle-icon {
    float: right;
    transition: transform 0.3s;
  }
  .panel-body.active + .panelHeader .toggle-icon {
    transform: rotate(180deg);
  }
}