/* ═══════════ EMPTY STATE ═══════════ */
.empty-state{display:flex;flex-direction:column;align-items:center;justify-content:center;
  height:100%;text-align:center;padding:2rem;color:var(--ink-muted)}
.empty-state-icon{font-size:4rem;margin-bottom:1rem;opacity:0.3}
.empty-state h3{font-family:'Bricolage Grotesque',sans-serif;font-size:1.3rem;color:var(--ink-soft);margin-bottom:0.5rem}
.empty-state p{font-size:0.9rem;max-width:320px;line-height:1.5;margin-bottom:1.5rem}
.empty-state-btn{padding:0.75rem 1.5rem;background:var(--amber);color:#fff;font-weight:700;
  border-radius:var(--radius-md);font-size:0.95rem;transition:all var(--transition)}
.empty-state-btn:hover{background:var(--amber-dark);transform:translateY(-2px);box-shadow:var(--shadow-md)}

/* ═══════════ MODAL ═══════════ */
.modal-overlay{position:fixed;inset:0;background:rgba(26,26,46,0.5);z-index:900;
  display:flex;align-items:center;justify-content:center;opacity:0;pointer-events:none;
  transition:opacity var(--motion-fade);backdrop-filter:blur(4px)}
.modal-overlay.open{opacity:1;pointer-events:auto}
.modal{background:var(--surface);border-radius:var(--radius-xl);padding:2rem;
  max-width:500px;width:90%;box-shadow:var(--shadow-xl);transform:translateY(10px);
  transition:transform var(--motion-slide)}
.modal-overlay.open .modal{transform:translateY(0)}
.modal-title{font-family:'Bricolage Grotesque',sans-serif;font-size:1.3rem;font-weight:700;margin-bottom:0.5rem}
.modal-sub{color:var(--ink-muted);font-size:0.9rem;margin-bottom:1.5rem}
.modal-actions{display:flex;gap:0.5rem;justify-content:flex-end;margin-top:1.5rem}
.modal-btn{padding:0.6rem 1.25rem;border-radius:var(--radius-sm);font-weight:600;font-size:0.85rem;
  transition:all var(--transition)}
.modal-btn-cancel{color:var(--ink-muted)}
.modal-btn-cancel:hover{background:var(--surface-active);color:var(--ink)}
.modal-btn-primary{background:var(--amber);color:#fff}
.modal-btn-primary:hover{background:var(--amber-dark)}

/* Push Modal specifics */
.push-options{display:flex;flex-direction:column;gap:0.75rem}
.push-option{padding:1rem;border:1.5px solid var(--border);border-radius:var(--radius-md);
  cursor:pointer;transition:all var(--transition);display:flex;align-items:center;gap:0.75rem}
.push-option:hover{border-color:var(--amber);background:var(--fk-noun-bg)}
.push-option-icon{font-size:1.5rem;width:40px;text-align:center;flex-shrink:0}
.push-option-text h4{font-size:0.9rem;font-weight:700;margin-bottom:0.15rem}
.push-option-text p{font-size:0.75rem;color:var(--ink-muted)}
.qr-display{text-align:center;padding:1.5rem}
.qr-display canvas{border-radius:var(--radius-md);box-shadow:var(--shadow-md)}
.qr-display p{margin-top:0.75rem;font-size:0.8rem;color:var(--ink-muted)}

/* Push Modal Tabs */
.push-tab-bar{display:flex;gap:0;border-bottom:2px solid var(--border-light);margin-bottom:1.25rem}
.push-tab{padding:0.6rem 1rem;font-size:0.82rem;font-weight:600;color:var(--ink-muted);
  border-bottom:2px solid transparent;margin-bottom:-2px;transition:all var(--transition);cursor:pointer;
  background:none;border-top:none;border-left:none;border-right:none}
.push-tab:hover{color:var(--ink)}
.push-tab.active{color:var(--amber-dark);border-bottom-color:var(--amber)}
.push-tab-content{display:none}
.push-tab-content.active{display:block}

/* Device List */
.device-list{max-height:240px;overflow-y:auto}
.device-item{display:flex;align-items:center;padding:0.75rem;border:1.5px solid var(--border);
  border-radius:var(--radius-md);margin-bottom:0.5rem;transition:all var(--transition)}
.device-item:hover{border-color:var(--amber-light);background:var(--fk-noun-bg)}
.device-item-icon{font-size:1.3rem;margin-right:0.75rem}
.device-item-info{flex:1}
.device-item-info h4{font-size:0.85rem;font-weight:700;margin:0}
.device-item-info p{font-size:0.7rem;color:var(--ink-muted);margin:0}
.device-item-push{padding:0.4rem 0.8rem;background:var(--amber);color:#fff;border-radius:var(--radius-sm);
  font-size:0.75rem;font-weight:700;transition:all var(--transition);cursor:pointer;border:none}
.device-item-push:hover{background:var(--amber-dark)}
.device-item-push:disabled{opacity:0.5;cursor:not-allowed}

/* Serial Input */
.serial-input-row{display:flex;gap:0.5rem;margin-bottom:1rem}
.serial-input{flex:1;padding:0.6rem 0.75rem;border:1.5px solid var(--border);border-radius:var(--radius-sm);
  font-size:0.9rem;outline:none;background:var(--bg)}
.serial-input:focus{border-color:var(--amber)}

/* Scan Button */
.scan-btn{width:100%;padding:0.7rem;border-radius:var(--radius-md);background:var(--ink);
  color:#fff;font-weight:700;font-size:0.85rem;transition:all var(--transition);cursor:pointer;border:none;
  display:flex;align-items:center;justify-content:center;gap:0.5rem;margin-bottom:1rem}
.scan-btn:hover{background:var(--amber-dark)}
.scan-btn:disabled{opacity:0.5;cursor:not-allowed}
.scan-btn .spinner{display:inline-block;width:14px;height:14px;border:2px solid rgba(255,255,255,0.3);
  border-top-color:#fff;border-radius:50%;animation:spin 0.8s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

/* Push Status */
.push-status{padding:0.6rem 0.85rem;border-radius:var(--radius-sm);font-size:0.8rem;font-weight:600;
  margin-top:0.75rem;display:none}
.push-status.success{display:block;background:#E8F5E9;color:#2E7D32}
.push-status.error{display:block;background:#FFEBEE;color:#C62828}
.push-status.info{display:block;background:#E3F2FD;color:#1565C0}

/* ═══════════ TOAST ═══════════ */
.toast{position:fixed;bottom:1.5rem;left:50%;transform:translateX(-50%) translateY(100px);
  background:var(--ink);color:#fff;padding:0.75rem 1.5rem;border-radius:var(--radius-lg);
  font-size:0.85rem;font-weight:600;z-index:2000;box-shadow:var(--shadow-lg);
  transition:transform var(--motion-slide);display:flex;align-items:center;gap:0.5rem}
.toast.show{transform:translateX(-50%) translateY(0)}
.toast-icon{font-size:1.1rem}

/* ═══════════ BOARD SETTINGS MODAL ═══════════ */
.settings-grid{display:grid;grid-template-columns:1fr 1fr;gap:0.75rem}
.settings-grid .full{grid-column:1/-1}
.settings-select{width:100%;padding:0.6rem 0.75rem;border:1.5px solid var(--border);
  border-radius:var(--radius-sm);background:var(--bg);font-size:0.9rem;outline:none;cursor:pointer}
.settings-select:focus{border-color:var(--amber)}