/* ===== Air Street AI Network — Clean Light Theme ===== */
:root {
  --bg-page: #FAFAFA;
  --bg-surface: #FFFFFF;
  --bg-elevated: #F5F5F5;
  --bg-hover: #F0F0F0;
  --bg-input: #FFFFFF;
  --border: #E8E8E8;
  --border-strong: #D4D4D4;
  --text: #0A0A0A;
  --text-secondary: #525252;
  --text-muted: #999999;
  --accent: #010061;
  --accent-hover: #1a1a8a;
  --accent-subtle: rgba(1, 0, 97, 0.06);
  --gold: #ff9900;
  --gold-hover: #e68a00;
  --gold-subtle: rgba(255, 153, 0, 0.08);
  --success: #10B978;
  --warning: #F59E0B;
  --error: #EF4444;
  --radius: 12px;
  --radius-sm: 8px;
  --radius-xs: 6px;
  --shadow: 0 1px 2px rgba(0,0,0,0.04);
  --shadow-md: 0 4px 12px rgba(0,0,0,0.06);
  --shadow-lg: 0 12px 40px rgba(0,0,0,0.10);
  --transition: 0.18s ease;
}
html { height:100%; background:var(--accent); overscroll-behavior:none; overflow-x:hidden; }
*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }
body { font-family:'Inter',system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif; background:var(--bg-page); color:var(--text); line-height:1.55; min-height:100vh; -webkit-font-smoothing:antialiased; display:flex; flex-direction:column; overflow-x:hidden; width:100%; }
html.login-viewport-lock,
body.login-viewport-lock {
  height:100%;
  min-height:100svh;
  min-height:100dvh;
  overflow:hidden;
  overscroll-behavior:none;
  background:var(--accent);
}
body > .site-footer { margin-top:auto; }
a { color:var(--accent); text-decoration:none; }
a:hover { color:var(--accent-hover); }
::selection { background:var(--gold); color:white; }

/* Navbar */
.navbar { background:var(--accent); border-bottom:none; padding:0 24px; height:56px; display:flex; align-items:center; justify-content:space-between; position:sticky; top:0; z-index:100; width:100%; overflow:hidden; }
.navbar-brand { display:flex; align-items:center; gap:10px; font-size:17px; font-weight:700; color:#fff; text-decoration:none; letter-spacing:-0.3px; white-space:nowrap; flex-shrink:1; min-width:0; overflow:hidden; }
.navbar-brand span { color:var(--gold); }
.navbar-brand:hover { color:#fff; }
.navbar-brand:hover span { color:var(--gold); }
.navbar-links { display:flex; align-items:center; gap:20px; flex-shrink:0; }
.navbar-links a { color:rgba(255,255,255,0.75); font-size:14px; font-weight:500; transition:color var(--transition); white-space:nowrap; }
.navbar-links a:hover { color:#fff; }
.navbar-links .user-info { font-size:13px; color:rgba(255,255,255,0.55); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:180px; }
.btn-logout { background:transparent; border:1px solid rgba(255,255,255,0.25); color:rgba(255,255,255,0.8); padding:5px 14px; border-radius:var(--radius-xs); cursor:pointer; font-size:13px; transition:all var(--transition); white-space:nowrap; flex-shrink:0; }
.btn-logout:hover { background:rgba(255,255,255,0.1); color:#fff; border-color:rgba(255,255,255,0.4); }

/* Hamburger button — hidden on desktop */
.hamburger { display:none; background:none; border:none; cursor:pointer; padding:4px; flex-direction:column; gap:5px; z-index:200; }
.hamburger span { display:block; width:22px; height:2px; background:#fff; border-radius:2px; transition:all 0.3s ease; }
.hamburger.open span:nth-child(1) { transform:rotate(45deg) translate(5px,5px); }
.hamburger.open span:nth-child(2) { opacity:0; }
.hamburger.open span:nth-child(3) { transform:rotate(-45deg) translate(5px,-5px); }

/* Forms */
.form-group { margin-bottom:18px; }
.form-group label { display:block; font-size:13px; font-weight:500; color:var(--text-secondary); margin-bottom:6px; }
.form-control { width:100%; min-width:0; padding:10px 14px; background:var(--bg-input); border:1px solid var(--border-strong); border-radius:var(--radius-xs); color:var(--text); font-size:14px; font-family:inherit; transition:border-color var(--transition),box-shadow var(--transition); outline:none; }
.form-control::placeholder { color:var(--text-muted); }
.form-control:focus { border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-subtle); }
select.form-control { appearance:none; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23636368' d='M6 8L1 3h10z'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 12px center; padding-right:36px; }
select.form-control option { background:var(--bg-surface); color:var(--text); }
.form-hint { font-size:11px; color:var(--text-muted); margin-top:6px; }

.multi-select { position:relative; }
.multi-select-trigger { width:100%; display:flex; align-items:center; justify-content:space-between; gap:12px; padding:10px 14px; background:var(--bg-input); border:1px solid var(--border-strong); border-radius:var(--radius-xs); color:var(--text); font-size:14px; cursor:pointer; transition:border-color var(--transition), box-shadow var(--transition); text-align:left; }
.multi-select-trigger:hover { border-color:var(--accent); }
.multi-select.open .multi-select-trigger { border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-subtle); }
.multi-select-summary { flex:1; min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.multi-select-summary.is-empty { color:var(--text-muted); }
.multi-select-arrow { color:var(--text-muted); font-size:12px; transition:transform var(--transition); }
.multi-select.open .multi-select-arrow { transform:rotate(180deg); }
.multi-select-menu { position:absolute; top:calc(100% + 8px); left:0; right:0; display:none; padding:10px; background:linear-gradient(180deg, #ffffff 0%, #fbfbfd 100%); border:1px solid var(--border-strong); border-radius:10px; box-shadow:var(--shadow-lg); z-index:30; max-height:280px; overflow-y:auto; }
.multi-select.open .multi-select-menu { display:block; }
/* Scope option rows to the dropdown so the global form label rule doesn't stack checkbox text underneath. */
.multi-select-menu .multi-select-option { position:relative; display:grid; grid-template-columns:20px minmax(0,1fr); align-items:center; column-gap:14px; padding:12px 14px; border-radius:10px; color:var(--text); font-size:14px; font-weight:500; cursor:pointer; transition:background var(--transition), transform var(--transition); user-select:none; margin-bottom:0; }
.multi-select-menu .multi-select-option:hover { background:var(--accent-subtle); }
.multi-select-menu .multi-select-option + .multi-select-option { margin-top:4px; }
.multi-select-menu .multi-select-option input[type="checkbox"] { position:absolute; width:1px; height:1px; opacity:0; pointer-events:none; }
.multi-select-check { width:20px; height:20px; border:1.5px solid var(--border-strong); border-radius:6px; background:#fff; display:flex; align-items:center; justify-content:center; box-shadow:inset 0 1px 1px rgba(0,0,0,0.03); transition:all var(--transition); }
.multi-select-check::after { content:''; width:10px; height:6px; border-left:2px solid #fff; border-bottom:2px solid #fff; transform:rotate(-45deg) scale(0.85); transform-origin:center; opacity:0; margin-top:-2px; transition:opacity var(--transition), transform var(--transition); }
.multi-select-menu .multi-select-option:hover .multi-select-check { border-color:var(--accent); }
.multi-select-menu .multi-select-option input[type="checkbox"]:checked + .multi-select-check { background:var(--accent); border-color:var(--accent); box-shadow:0 6px 16px rgba(1,0,97,0.16); }
.multi-select-menu .multi-select-option input[type="checkbox"]:checked + .multi-select-check::after { opacity:1; transform:rotate(-45deg) scale(1); }
.multi-select-menu .multi-select-option input[type="checkbox"]:focus-visible + .multi-select-check { box-shadow:0 0 0 3px var(--accent-subtle); border-color:var(--accent); }
.multi-select-option-text { line-height:1.35; }
.multi-select-menu .multi-select-option input[type="checkbox"]:checked ~ .multi-select-option-text { font-weight:600; }
.multi-select-tags { display:flex; flex-wrap:wrap; gap:6px; margin-top:8px; }
.selection-chip { display:inline-flex; align-items:center; padding:4px 10px; border-radius:20px; background:var(--accent-subtle); color:var(--accent); font-size:12px; font-weight:500; letter-spacing:0.01em; }

/* Buttons */
.btn { display:inline-flex; align-items:center; justify-content:center; gap:8px; padding:10px 20px; border-radius:var(--radius-xs); font-size:14px; font-weight:600; border:none; cursor:pointer; transition:all var(--transition); }
.btn-primary { background:var(--accent); color:white; width:100%; padding:12px; }
.btn-primary:hover { background:var(--accent-hover); transform:translateY(-1px); box-shadow:0 4px 16px rgba(1,0,97,0.25); }
.btn-secondary { background:var(--bg-elevated); color:var(--text); border:1px solid var(--border-strong); }
.btn-secondary:hover { background:var(--bg-hover); border-color:var(--border-strong); }
.btn-outline { background:transparent; border:1px solid var(--border-strong); color:var(--text-secondary); }
.btn-outline:hover { background:var(--bg-hover); color:var(--text); }
.btn-small { padding:6px 14px; font-size:13px; }
.btn-icon { padding:6px 8px; }
.btn-icon svg { display:block; }
.btn:disabled { opacity:0.5; cursor:not-allowed; transform:none; }

/* Main Layout */
.main-container { max-width:1400px; margin:0 auto; padding:24px; width:100%; }
.page-header { margin-bottom:24px; }
.page-header h1 { font-size:22px; margin-bottom:4px; letter-spacing:-0.3px; }
.page-header p { color:var(--text-secondary); font-size:14px; }

/* Search & Filters */
.search-section { background:var(--bg-surface); border:1px solid var(--border); border-radius:var(--radius); padding:20px 24px; margin-bottom:24px; }
.search-bar { display:flex; gap:10px; margin-bottom:14px; }
.search-bar .form-control { flex:1; }
.search-mode-toggle { display:flex; align-items:center; gap:10px; margin-bottom:14px; }
.search-mode-toggle label { font-size:13px; color:var(--text-secondary); cursor:pointer; display:flex; align-items:center; gap:6px; }
.toggle-switch { position:relative; width:38px; height:22px; }
.toggle-switch input { opacity:0; width:0; height:0; }
.toggle-slider { position:absolute; inset:0; background:var(--bg-hover); border:1px solid var(--border-strong); border-radius:11px; cursor:pointer; transition:all var(--transition); }
.toggle-slider::before { content:''; position:absolute; width:16px; height:16px; border-radius:50%; background:var(--text-secondary); top:2px; left:2px; transition:all var(--transition); }
.toggle-switch input:checked + .toggle-slider { background:rgba(1,0,97,0.12); border-color:var(--accent); }
.toggle-switch input:checked + .toggle-slider::before { background:var(--accent); transform:translateX(16px); }
.filters-row { display:flex; gap:10px; flex-wrap:wrap; }
.filters-row .form-group { flex:1; min-width:150px; margin-bottom:0; }
.active-filters { display:flex; flex-wrap:wrap; gap:8px; margin-top:12px; }
.filter-tag { display:inline-flex; align-items:center; gap:6px; padding:4px 12px; background:var(--bg-elevated); border:1px solid var(--border); border-radius:20px; font-size:12px; color:var(--text-secondary); }
.filter-tag button { background:none; border:none; cursor:pointer; font-size:14px; color:var(--text-muted); line-height:1; transition:color var(--transition); }
.filter-tag button:hover { color:var(--accent); }

/* Stats Bar */
.stats-bar { display:flex; align-items:center; justify-content:space-between; margin-bottom:20px; font-size:13px; color:var(--text-muted); }
.stats-bar .result-count { font-weight:600; color:var(--text); }
.stats-bar .sort-controls { display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.stats-bar .sort-controls label { font-size:12px; color:var(--text-muted); }
.stats-bar .sort-controls select { padding:4px 28px 4px 8px; font-size:12px; border:1px solid var(--border); border-radius:var(--radius-xs); background:var(--bg-surface); color:var(--text-secondary); cursor:pointer; appearance:none; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 10 10'%3E%3Cpath fill='%23636368' d='M5 7L1 3h8z'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 8px center; }
.stats-bar .sort-controls .sort-direction-label { margin-left:4px; }

/* Interest Quick-Filter Pills */
.interest-pills { display:flex; flex-wrap:wrap; gap:8px; margin-bottom:20px; overflow-x:auto; -webkit-overflow-scrolling:touch; }
.interest-pill { display:inline-flex; align-items:center; gap:6px; padding:8px 16px; background:var(--bg-surface); border:1px solid var(--border); border-radius:24px; font-size:13px; font-weight:500; color:var(--text-secondary); cursor:pointer; transition:all var(--transition); }
.interest-pill:hover { border-color:var(--accent); color:var(--accent); background:var(--accent-subtle); }
.interest-pill.active { background:var(--accent); color:#fff; border-color:var(--accent); }
.interest-pill .pill-count { font-size:11px; font-weight:600; background:rgba(0,0,0,0.08); padding:1px 7px; border-radius:10px; }
.interest-pill.active .pill-count { background:rgba(255,255,255,0.2); }

/* New Badge */
.badge-new { display:inline-block; padding:2px 7px; background:var(--gold-subtle); color:var(--gold); border:1px solid rgba(255,153,0,0.2); border-radius:10px; font-size:10px; font-weight:700; letter-spacing:0.3px; margin-left:6px; vertical-align:middle; text-transform:uppercase; }
.badge-repeat { display:inline-block; padding:2px 7px; background:rgba(16,185,120,0.1); color:#059669; border:1px solid rgba(16,185,120,0.2); border-radius:10px; font-size:10px; font-weight:700; letter-spacing:0.3px; margin-left:6px; vertical-align:middle; text-transform:uppercase; }
.badge-repeat-modal { display:inline-flex; align-items:center; gap:4px; padding:4px 10px; background:rgba(16,185,120,0.08); border:1px solid rgba(16,185,120,0.15); border-radius:20px; font-size:11px; color:#059669; font-weight:600; margin-bottom:8px; }

/* Similar People Section in Modal */
.similar-section { margin-top:20px; padding-top:16px; border-top:1px solid var(--border); }
.similar-section h4 { font-size:13px; font-weight:600; color:var(--text-muted); margin-bottom:12px; text-transform:uppercase; letter-spacing:0.5px; }
.similar-list { display:flex; flex-direction:column; gap:8px; }
.similar-card { display:flex; align-items:center; gap:10px; padding:10px 12px; background:var(--bg-elevated); border:1px solid var(--border); border-radius:var(--radius-sm); cursor:pointer; transition:all var(--transition); }
.similar-card:hover { background:var(--bg-hover); border-color:var(--border-strong); }
.similar-card .avatar { width:32px; height:32px; font-size:12px; }
.similar-card .sim-info { flex:1; min-width:0; }
.similar-card .sim-info .sim-name { font-size:13px; font-weight:600; color:var(--text); }
.similar-card .sim-info .sim-role { font-size:12px; color:var(--text-muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.similar-card .sim-reason { font-size:11px; color:var(--accent); font-weight:500; flex-shrink:0; }

/* Mutual Context */
.mutual-badge { display:inline-flex; align-items:center; gap:4px; padding:4px 10px; background:rgba(1,0,97,0.05); border:1px solid rgba(1,0,97,0.1); border-radius:20px; font-size:11px; color:var(--accent); margin-bottom:12px; }

/* Intro Templates */
.intro-templates { display:flex; flex-wrap:wrap; gap:6px; margin-bottom:14px; }
.intro-template-btn { padding:5px 12px; background:var(--bg-elevated); border:1px solid var(--border); border-radius:20px; font-size:12px; color:var(--text-secondary); cursor:pointer; transition:all var(--transition); }
.intro-template-btn:hover { border-color:var(--accent); color:var(--accent); background:var(--accent-subtle); }

/* Privacy Settings */
.privacy-section { background:var(--bg-surface); border:1px solid var(--border); border-radius:var(--radius); padding:20px 24px; margin-bottom:24px; }
.privacy-section h3 { font-size:15px; font-weight:600; margin-bottom:12px; }
.privacy-option { display:flex; align-items:center; justify-content:space-between; padding:12px 0; border-bottom:1px solid var(--border); gap:12px; }
.privacy-option:last-child { border-bottom:none; }
.privacy-option > div:first-child { flex:1; min-width:0; }
.privacy-option .priv-label { font-size:14px; color:var(--text); }
.privacy-option .priv-desc { font-size:12px; color:var(--text-muted); margin-top:2px; word-break:break-word; }
.privacy-option .toggle-switch { flex-shrink:0; }

/* Settings Layout */
.settings-container { max-width:640px; overflow-x:hidden; }
.settings-layout { display:block; min-width:0; }
.settings-section { margin-bottom:24px; min-width:0; overflow:hidden; }
.settings-preview-card { width:100%; max-width:360px; }
.settings-form-grid { display:grid; grid-template-columns:1fr; column-gap:18px; min-width:0; }
.settings-form-grid .form-group { margin-bottom:18px; min-width:0; }
.settings-full-span { grid-column:1 / -1; }
.settings-profile-actions { display:flex; flex-direction:column; align-items:stretch; gap:8px; margin-top:8px; }
.settings-profile-actions .btn-primary { width:100%; }
.settings-profile-status { display:none; font-size:13px; }

/* ===== FIXED: Equal-height profile cards ===== */
.cards-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(min(320px,100%),1fr)); gap:12px; }
.profile-card { background:var(--bg-surface); border:1px solid var(--border); border-radius:var(--radius); padding:22px; transition:all var(--transition); cursor:pointer; position:relative; display:flex; flex-direction:column; }
.profile-card:hover { border-color:var(--border-strong); background:var(--bg-surface); transform:translateY(-2px); box-shadow:0 8px 24px rgba(0,0,0,0.08); }
.profile-card .card-header { display:flex; align-items:flex-start; gap:14px; margin-bottom:14px; }
.avatar { width:44px; height:44px; border-radius:50%; background:var(--accent); color:#fff; display:flex; align-items:center; justify-content:center; font-weight:700; font-size:16px; flex-shrink:0; overflow:hidden; }
.btn-save { background:none; border:none; cursor:pointer; font-size:20px; color:var(--text-muted); padding:2px 4px; line-height:1; transition:all var(--transition); margin-left:auto; flex-shrink:0; }
.btn-save:hover { color:var(--accent); transform:scale(1.15); }
.btn-save.saved { color:var(--gold); }
.card-header .info h3 { font-size:15px; font-weight:700; margin-bottom:3px; color:var(--text); }
/* Typography: name bold, company bold, role normal weight */
.card-header .info .role-text { font-size:13px; color:var(--text-secondary); font-weight:400; }
.card-header .info .company-text { font-size:13px; color:var(--text); font-weight:600; }
.card-body { flex:1; display:flex; flex-direction:column; }
.card-body .bio { font-size:13px; color:var(--text-secondary); line-height:1.5; margin-bottom:14px; display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; }
.card-tags { display:flex; flex-wrap:wrap; gap:6px; margin-top:auto; padding-bottom:14px; }
.tag { display:inline-block; padding:5px 14px; border-radius:20px; font-size:11px; font-weight:500; }
.tag-city { background:rgba(1,0,97,0.08); color:#010061; }
.tag-date { background:rgba(16,185,120,0.08); color:#059669; }
.tag-interest { background:rgba(255,153,0,0.08); color:#d97706; }
.tag-sector { background:rgba(139,92,246,0.08); color:#7c3aed; }
.tag-event { background:rgba(1,0,97,0.08); color:#010061; }
.card-footer { display:flex; align-items:center; justify-content:space-between; padding-top:14px; border-top:1px solid var(--border); margin-top:auto; }
.card-footer .btn-outline { font-size:12px; padding:5px 12px; }
.btn-intro { background:var(--accent); color:white; border:none; padding:6px 16px; border-radius:var(--radius-xs); font-size:13px; font-weight:600; cursor:pointer; transition:all var(--transition); }
.btn-intro:hover { background:var(--accent-hover); box-shadow:0 2px 12px rgba(1,0,97,0.2); }

/* Modal */
.modal-overlay { position:fixed; inset:0; background:rgba(0,0,0,0.4); backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px); display:flex; align-items:center; justify-content:center; z-index:200; opacity:0; pointer-events:none; transition:opacity 0.3s; padding:20px; }
.modal-overlay.active { opacity:1; pointer-events:auto; }
.modal { background:var(--bg-surface); border:1px solid var(--border-strong); border-radius:var(--radius); width:100%; max-width:540px; max-height:90vh; overflow-y:auto; overflow-x:hidden; box-shadow:var(--shadow-lg); transform:translateY(20px) scale(0.97); transition:transform 0.3s; }
.modal-overlay.active .modal { transform:translateY(0) scale(1); }
.modal-header { padding:24px 24px 0; display:flex; align-items:flex-start; justify-content:space-between; }
.modal-close { background:none; border:none; font-size:22px; cursor:pointer; color:var(--text-muted); padding:4px; line-height:1; transition:color var(--transition); }
.modal-close:hover { color:var(--text); }
.modal-body { padding:20px 24px 24px; }
.modal-body .full-bio { font-size:14px; line-height:1.7; color:var(--text-secondary); margin-bottom:20px; }
.modal-body .detail-row { display:flex; gap:8px; margin-bottom:10px; font-size:14px; }
.modal-body .detail-row .label { font-weight:600; color:var(--text); min-width:120px; }
.modal-body .detail-row .value { color:var(--text-secondary); }
/* Improved modal role/company */
.modal-role-company { margin-bottom:4px; }
.modal-role { font-size:15px; color:var(--text-secondary); font-weight:400; }
.modal-company { font-size:15px; color:var(--text); font-weight:600; }
.modal-tags { display:flex; flex-wrap:wrap; gap:12px 14px; align-items:flex-start; }
.btn-remove-saved { background:transparent; border:1px solid var(--border-strong); color:var(--text-muted); padding:6px 14px; border-radius:var(--radius-xs); font-size:13px; cursor:pointer; transition:all var(--transition); margin-left:auto; }
.btn-remove-saved:hover { border-color:var(--error); color:var(--error); background:rgba(239,68,68,0.06); }
.modal-footer { padding:16px 24px; border-top:1px solid var(--border); display:flex; gap:10px; align-items:center; }
.modal-footer .btn, .modal-footer .btn-outline, .modal-footer .btn-intro, .modal-footer a.btn, .modal-footer button { padding:8px 16px; font-size:13px; border-radius:var(--radius-xs); line-height:1.2; box-sizing:border-box; }
.intro-modal .modal { max-width:480px; }
.intro-modal textarea { width:100%; min-height:120px; padding:12px; background:var(--bg-input); border:1px solid var(--border-strong); border-radius:var(--radius-xs); color:var(--text); font-size:14px; font-family:inherit; resize:vertical; outline:none; }
.intro-modal textarea::placeholder { color:var(--text-muted); }
.intro-modal textarea:focus { border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-subtle); }
.intro-count { font-size:12px; color:var(--text-muted); margin-top:8px; }

/* Connections Page */
.tabs { display:flex; gap:0; border-bottom:1px solid var(--border); margin-bottom:24px; }
.tab { padding:12px 24px; font-size:14px; font-weight:500; color:var(--text-muted); cursor:pointer; border-bottom:2px solid transparent; transition:all var(--transition); background:none; border-top:none; border-left:none; border-right:none; }
.tab:hover { color:var(--text-secondary); }
.tab.active { color:var(--text); border-bottom-color:var(--gold); }
.tab .badge { display:inline-flex; align-items:center; justify-content:center; min-width:20px; height:20px; padding:0 6px; background:var(--bg-hover); border-radius:10px; font-size:11px; font-weight:600; color:var(--text-muted); margin-left:8px; }
.tab.active .badge { background:var(--gold-subtle); color:var(--gold); }
.tab-content { display:none; }
.tab-content.active { display:block; }
.connection-card { background:var(--bg-surface); border:1px solid var(--border); border-radius:var(--radius); padding:14px 20px; margin-bottom:8px; display:flex; align-items:center; gap:14px; transition:all var(--transition); cursor:pointer; }
.connection-card:hover { border-color:var(--border-strong); background:var(--bg-elevated); }
.connection-card .conn-info { flex:1; min-width:0; }
.connection-card .conn-info h3 { font-size:14px; font-weight:600; margin-bottom:1px; }
.connection-card .conn-info .conn-subtitle { font-size:13px; color:var(--text-secondary); }
.connection-card .conn-tags { display:flex; gap:6px; flex-wrap:wrap; flex-shrink:0; }
.connection-card .conn-info .conn-message { font-size:13px; color:var(--text-muted); margin-top:6px; font-style:italic; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.conn-meta { display:flex; flex-direction:column; align-items:flex-end; gap:6px; flex-shrink:0; }
.status-badge { padding:3px 10px; border-radius:20px; font-size:11px; font-weight:600; }
.status-badge.pending { background:rgba(245,158,11,0.1); color:#d97706; }
.status-badge.accepted { background:rgba(16,185,120,0.1); color:#059669; }
.conn-actions { display:flex; gap:8px; flex-shrink:0; }
.conn-actions button { background:var(--bg-hover); border:1px solid var(--border); color:var(--text-secondary); padding:5px 12px; border-radius:var(--radius-xs); font-size:12px; cursor:pointer; transition:all var(--transition); }
.conn-actions button:hover { background:var(--bg-elevated); color:var(--text); }
.conn-actions button.remove:hover { color:var(--error); }
.conn-date { font-size:12px; color:var(--text-muted); }
.empty-tab { text-align:center; padding:48px 20px; color:var(--text-muted); }
.empty-tab h3 { color:var(--text-secondary); font-size:16px; margin-bottom:6px; }
.empty-tab p { font-size:14px; }
.empty-state { text-align:center; padding:60px 20px; color:var(--text-muted); }
.empty-state .empty-icon { font-size:48px; margin-bottom:16px; opacity:0.4; }
.empty-state h3 { font-size:18px; margin-bottom:8px; color:var(--text); }
.empty-state p { font-size:14px; }

/* Toast */
.toast-container { position:fixed; bottom:24px; right:24px; z-index:300; display:flex; flex-direction:column; gap:8px; }
.toast { background:var(--bg-surface); color:var(--text); padding:12px 20px; border:1px solid var(--border); border-radius:var(--radius-sm); font-size:14px; box-shadow:0 8px 24px rgba(0,0,0,0.12); animation:toast-in 0.3s ease; display:flex; align-items:center; gap:8px; }
.toast.success { border-left:3px solid var(--success); }
.toast.error { border-left:3px solid var(--error); }
@keyframes toast-in { from{opacity:0;transform:translateY(10px)} to{opacity:1;transform:translateY(0)} }

/* Pagination */
.pagination { display:flex; align-items:center; justify-content:center; gap:8px; margin-top:32px; padding:20px 0; }
.pagination button { padding:8px 16px; background:var(--bg-surface); border:1px solid var(--border-strong); border-radius:var(--radius-xs); color:var(--text-secondary); cursor:pointer; font-size:13px; transition:all var(--transition); }
.pagination button:hover:not(:disabled) { background:var(--bg-hover); color:var(--text); }
.pagination button:disabled { opacity:0.3; cursor:not-allowed; }
.pagination .page-info { font-size:13px; color:var(--text-muted); }
.pagination .page-num { min-width:36px; text-align:center; padding:8px 10px; }
.pagination .page-num.active { background:var(--accent); color:#fff; border-color:var(--accent); font-weight:600; }
.pagination .page-ellipsis { font-size:13px; color:var(--text-muted); padding:0 4px; }

/* Spinner */
.spinner { display:inline-block; width:20px; height:20px; border:2px solid var(--border-strong); border-top-color:var(--accent); border-radius:50%; animation:spin 0.6s linear infinite; }
@keyframes spin { to { transform:rotate(360deg); } }

/* ===== Responsive ===== */

/* Large tablets / small laptops — hide email to save space */
@media(max-width:1024px) {
  .cards-grid { grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); }
  .navbar-links .user-info { display:none; }
  .navbar-links { gap:14px; }
}

@media(min-width:1025px) {
  .settings-container { max-width:1160px; }
  .settings-layout {
    display:grid;
    grid-template-columns:minmax(300px, 360px) minmax(0, 1fr);
    gap:24px;
    align-items:start;
  }
  .settings-preview-panel {
    grid-column:1;
    grid-row:1;
    align-self:start;
  }
  .settings-profile-panel {
    grid-column:2;
    grid-row:1 / span 2;
    padding:24px 28px;
  }
  .settings-privacy-panel {
    grid-column:1;
    grid-row:2;
    align-self:start;
  }
  .settings-preview-card { max-width:none; }
  .settings-form-grid {
    grid-template-columns:repeat(2, minmax(0, 1fr));
    column-gap:18px;
  }
  .settings-profile-panel .form-group { margin-bottom:20px; }
  .settings-profile-actions {
    flex-direction:row;
    align-items:center;
    gap:12px;
  }
  .settings-profile-actions .btn-primary {
    width:auto;
    min-width:180px;
  }
}

/* Tablet + Mobile: hamburger menu kicks in */
@media(max-width:768px) {
  .hamburger { display:flex; }
  .navbar { padding:0 16px; height:52px; overflow:visible; }
  .navbar-brand { font-size:15px; flex-shrink:0; overflow:visible; }
  .navbar-links {
    display:none;
    position:fixed;
    top:52px;
    left:0;
    right:0;
    background:var(--accent);
    flex-direction:column;
    align-items:stretch;
    gap:0;
    padding:8px 0;
    box-shadow:0 4px 12px rgba(0,0,0,0.3);
    z-index:150;
  }
  .navbar-links.open { display:flex; }
  .navbar-links a {
    padding:14px 20px;
    font-size:15px;
    border-bottom:1px solid rgba(255,255,255,0.08);
  }
  .navbar-links a:hover { background:rgba(255,255,255,0.06); }
  .navbar-links .user-info {
    display:block;
    padding:10px 20px;
    font-size:13px;
    color:rgba(255,255,255,0.45);
    max-width:none;
    overflow:visible;
  }
  .navbar-links .btn-logout {
    margin:8px 20px 12px;
    text-align:center;
    padding:10px;
    border-radius:8px;
    width:auto;
  }
  .main-container { padding:16px; }
  .cards-grid { grid-template-columns:1fr; gap:10px; }
  .filters-row { flex-direction:column; gap:10px; }
  .search-bar { flex-direction:column; }
  .search-section { padding:16px; }
  .access-request-card,
  .access-request-header { flex-direction:column; }
  .access-request-actions { width:100%; margin-left:0; align-self:stretch; }
  .access-request-actions .btn { flex:1; }
  .access-request-details { grid-template-columns:1fr; }
  /* iOS Safari zooms focused inputs below 16px. Keep mobile form controls at 16px to prevent layout jump/side scroll. */
  input.form-control,
  select.form-control,
  textarea.form-control,
  .login-input,
  .intro-modal textarea,
  .multi-select-trigger {
    font-size:16px !important;
  }
  .modal-overlay {
    align-items:flex-start;
    overflow-y:auto;
    overflow-x:hidden;
    overscroll-behavior-x:none;
    padding:
      calc(env(safe-area-inset-top, 0px) + 28px)
      16px
      calc(env(safe-area-inset-bottom, 0px) + 72px);
  }
  .modal {
    margin:0 auto;
    width:100%;
    max-width:100%;
    max-height:calc(100dvh - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px) - 100px);
    border-radius:16px;
  }
  .modal-header { padding:20px 20px 0; gap:12px; }
  #profile-modal .modal-header > div:first-child { flex:1; min-width:0; }
  #profile-modal .modal-header > div:first-child > div:last-child { min-width:0; }
  #profile-modal .modal-header > div:last-child { flex-shrink:0; }
  #modal-name { max-width:100%; overflow-wrap:anywhere; word-break:break-word; }
  .modal-body { padding:16px 20px 24px; }
  .modal-footer {
    padding:
      14px
      20px
      calc(env(safe-area-inset-bottom, 0px) + 44px);
    flex-wrap:wrap;
  }
  .page-header h1 { font-size:20px; }
  .page-header p { font-size:13px; }
  .stats-bar { flex-wrap:wrap; gap:8px; }
  .interest-pills { gap:6px; }
  .interest-pill { padding:6px 12px; font-size:12px; }
  /* Prevent horizontal overflow on settings page */
  #page-settings { overflow-x:hidden; }
  .privacy-section { overflow:hidden; word-break:break-word; }
  .admin-panel { overflow:hidden; }
  .admin-form-grid { grid-template-columns:1fr; }
}

/* Small phones */
@media(max-width:480px) {
  .navbar-brand { font-size:14px; gap:8px; }
  .navbar-logo { width:28px; height:28px; }
  .profile-card { padding:16px; }
  .card-footer { flex-direction:column; gap:10px; align-items:stretch; }
  .btn-intro { width:100%; text-align:center; }
  .card-header .info h3 { font-size:14px; }
  .avatar { width:38px; height:38px; font-size:14px; }
  .search-mode-toggle label { font-size:12px; }
  .stats-bar { font-size:12px; }
  .login-title { font-size:24px; }
  .login-subtitle { font-size:14px; margin-bottom:32px; }
  .login-features { gap:20px; }
  .login-feature-label { font-size:12px; }
  .modal-tags { gap:14px 16px; }
}

/* Very small phones */
@media(max-width:360px) {
  .main-container { padding:12px; }
  .search-section { padding:12px; }
  .profile-card { padding:14px; }
  .card-tags { gap:4px; }
  .tag { font-size:10px; padding:2px 8px; }
  .navbar { padding:0 12px; }
  .navbar-brand { font-size:13px; gap:6px; }
}

/* Connection cards on small screens */
@media(max-width:640px) {
  .connection-card { flex-direction:column; align-items:stretch; gap:12px; }
  .conn-meta { flex-direction:row; align-items:center; justify-content:space-between; }
}
::-webkit-scrollbar{width:8px;} ::-webkit-scrollbar-track{background:var(--bg-page);} ::-webkit-scrollbar-thumb{background:#D4D4D4;border-radius:4px;} ::-webkit-scrollbar-thumb:hover{background:#AAAAAA;}
.navbar-logo { width:32px; height:32px; border-radius:6px; flex-shrink:0; }

/* Avatar Upload */
.avatar-upload-area { display:flex; align-items:center; gap:16px; flex-wrap:wrap; }
.avatar-upload-preview { flex-shrink:0; }
.avatar-upload-controls { display:flex; align-items:center; gap:8px; flex-wrap:wrap; }

/* Admin Event Editor */
.admin-event-rows { display:flex; flex-direction:column; gap:6px; }
.event-row { display:flex; align-items:center; gap:8px; }
.event-row-select { flex:1 1 0; min-width:0; font-size:13px; padding:8px 10px; }
.event-row-custom { display:none; flex:1.2 1 0; min-width:0; font-size:13px; padding:8px 10px; }
.event-row.is-custom .event-row-select { flex:0 0 122px; max-width:122px; }
.event-row.is-custom .event-row-custom { display:block; }
.event-row-date-wrap { flex:0 0 150px; min-width:150px; }
.event-row-date { width:100%; font-size:13px; font-family:inherit; font-variant-numeric:tabular-nums; }
.event-row-date::-webkit-datetime-edit,
.event-row-date::-webkit-datetime-edit-fields-wrapper,
.event-row-date::-webkit-datetime-edit-text,
.event-row-date::-webkit-datetime-edit-month-field,
.event-row-date::-webkit-datetime-edit-day-field,
.event-row-date::-webkit-datetime-edit-year-field { font:inherit; color:inherit; }
.event-row-remove { background:none; border:none; color:var(--text-muted); font-size:18px; cursor:pointer; padding:0 4px; line-height:1; flex-shrink:0; }
.event-row-remove:hover { color:var(--accent); }
.admin-event-add-btn { margin-top:6px; background:none; border:1px dashed var(--border); color:var(--text-muted); padding:4px 12px; border-radius:6px; cursor:pointer; font-size:12px; transition:border-color var(--transition),color var(--transition),background var(--transition); }
.admin-event-add-btn:hover { border-color:var(--accent); color:var(--accent); background:var(--accent-subtle); }

@media(max-width:768px) {
  .event-row { flex-wrap:wrap; align-items:stretch; }
  .event-row-select { flex:1 1 100%; }
  .event-row.is-custom .event-row-select { flex:0 0 108px; max-width:108px; }
  .event-row-custom { flex:1 1 calc(100% - 116px); }
  .event-row-date-wrap { flex:1 1 100%; min-width:0; }
  .event-row-remove { margin-left:auto; }
}

/* Card Footer Links */
.card-footer-links { display:flex; flex-wrap:wrap; gap:6px; align-items:center; }

/* Admin Luma Sync Panel */
.admin-panel { background:var(--bg-surface); border:1px solid var(--border); border-radius:var(--radius); padding:20px; margin-top:24px; min-width:0; overflow:hidden; }
.admin-panel h3 { margin:0 0 4px; }
.admin-panel .form-row { display:flex; gap:10px; margin-bottom:10px; }
.admin-panel .form-row input { flex:1; }
.admin-form-grid { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.access-request-card { padding:18px 20px; border:1px solid var(--border); border-radius:12px; margin-bottom:12px; display:flex; justify-content:space-between; align-items:flex-start; gap:18px; background:linear-gradient(180deg, #ffffff 0%, #fcfcfe 100%); }
.access-request-main { flex:1; min-width:0; }
.access-request-header { display:flex; justify-content:space-between; gap:16px; align-items:flex-start; margin-bottom:14px; }
.access-request-name { font-size:16px; font-weight:700; color:var(--text); }
.access-request-email { margin-top:4px; font-size:14px; color:var(--text-secondary); overflow-wrap:anywhere; }
.access-request-email a { color:inherit; text-decoration:none; }
.access-request-email a:hover { color:var(--accent); text-decoration:underline; }
.access-request-date { flex-shrink:0; font-size:12px; color:var(--text-muted); white-space:nowrap; }
.access-request-details { display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:12px 16px; }
.access-request-detail { padding:12px 14px; background:var(--bg-elevated); border:1px solid var(--border); border-radius:10px; min-width:0; }
.access-request-detail-wide { grid-column:1 / -1; }
.access-request-label { font-size:11px; font-weight:700; color:var(--text-muted); text-transform:uppercase; letter-spacing:0.04em; margin-bottom:6px; }
.access-request-value { font-size:13px; color:var(--text); line-height:1.5; overflow-wrap:anywhere; }
.access-request-link { color:var(--accent); text-decoration:none; font-weight:500; }
.access-request-link:hover { text-decoration:underline; }
.access-request-empty { color:var(--text-muted); font-style:italic; }
.access-request-actions { display:flex; gap:8px; margin-left:12px; flex-shrink:0; align-self:center; }
.sync-log { background:var(--bg-elevated); border:1px solid var(--border); border-radius:var(--radius-sm); padding:12px; font-family:monospace; font-size:12px; max-height:200px; overflow-y:auto; white-space:pre-wrap; margin-top:12px; display:none; }
.site-footer { background:var(--accent); color:rgba(255,255,255,0.7); text-align:center; padding:28px 24px; font-size:13px; line-height:1.6; }
.site-footer a { color:var(--gold); text-decoration:none; font-weight:500; }
.site-footer a:hover { text-decoration:underline; color:var(--gold-hover); }
.site-footer .footer-copyright { margin-bottom:4px; }

/* ===== Login / Landing Page ===== */
.page-login { display:flex; flex-direction:column; align-items:center; justify-content:center; min-height:100svh; min-height:100dvh; background:var(--accent); color:#fff; text-align:center; padding:40px 24px; width:100%; max-width:100vw; overflow-x:hidden; overflow-x:clip; overscroll-behavior-x:none; }
.login-card { width:min(100%, 420px); max-width:100%; min-width:0; margin:0 auto; }
.login-logo { width:80px; height:80px; border-radius:18px; margin-bottom:28px; box-shadow:0 8px 32px rgba(0,0,0,0.3); }
.login-title { font-size:32px; font-weight:700; margin-bottom:8px; letter-spacing:-0.5px; }
.login-title span { color:var(--gold); }
.login-subtitle { font-size:16px; color:rgba(255,255,255,0.6); margin-bottom:48px; line-height:1.5; }
.login-btn { display:inline-flex; align-items:center; gap:12px; background:#fff; color:var(--text); border:none; border-radius:12px; padding:14px 32px; font-size:15px; font-weight:600; font-family:'Inter',sans-serif; cursor:pointer; transition:all 0.2s; box-shadow:0 4px 16px rgba(0,0,0,0.15); }
.login-btn:hover { transform:translateY(-1px); box-shadow:0 6px 24px rgba(0,0,0,0.25); }
.login-btn:disabled { opacity:0.58; cursor:not-allowed; transform:none; box-shadow:none; }
.login-btn svg { flex-shrink:0; }
.login-divider { display:flex; align-items:center; gap:16px; margin:28px 0; color:rgba(255,255,255,0.35); font-size:13px; }
.login-divider::before, .login-divider::after { content:''; flex:1; height:1px; background:rgba(255,255,255,0.15); }
.login-features { display:flex; gap:32px; justify-content:center; margin-top:56px; }
.login-feature { text-align:center; }
.login-feature-icon { width:44px; height:44px; border-radius:12px; background:rgba(255,255,255,0.1); display:flex; align-items:center; justify-content:center; margin:0 auto 10px; }
.login-feature-label { font-size:13px; color:rgba(255,255,255,0.55); }
.login-footer { margin-top:56px; font-size:12px; color:rgba(255,255,255,0.3); }
.login-email-form { width:100%; max-width:100%; min-width:0; }
.login-input-wrap { display:flex; align-items:center; gap:12px; min-width:0; max-width:100%; background:rgba(255,255,255,0.08); border:1px solid rgba(255,255,255,0.15); border-radius:12px; padding:4px 4px 4px 16px; margin-bottom:12px; transition:border-color 0.2s; }
.login-input-wrap:focus-within { border-color:var(--gold); }
.login-input { flex:1; min-width:0; width:100%; background:none; border:none; outline:none; color:#fff; font-size:15px; font-family:'Inter',sans-serif; padding:10px 0; }
.login-input::placeholder { color:rgba(255,255,255,0.35); }
.login-btn-gold { background:var(--gold) !important; color:#000 !important; border:none !important; width:100%; justify-content:center; }
.login-btn-gold:hover { background:var(--gold-hover) !important; }
.login-hint { font-size:13px; color:rgba(255,255,255,0.35); margin-top:16px; }
.login-sent-icon { margin-bottom:16px; }
.login-sent-title { font-size:22px; font-weight:600; margin-bottom:8px; }
.login-sent-text { font-size:15px; color:rgba(255,255,255,0.6); line-height:1.5; }
.login-sent-text strong { color:#fff; }
.login-error { color:#ff6b6b; font-size:13px; margin-top:8px; display:none; }
.login-footer a { color:var(--gold); text-decoration:none; opacity:0.7; }
.login-footer a:hover { opacity:1; text-decoration:underline; }
.login-title, .login-subtitle, .login-footer, #magic-link-email { max-width:100%; overflow-wrap:anywhere; word-break:break-word; }
.page-login.lock-viewport {
  min-height:100%;
  height:100%;
  padding:
    calc(env(safe-area-inset-top, 0px) + 40px)
    24px
    calc(env(safe-area-inset-bottom, 0px) + 28px);
  overflow:hidden;
  overscroll-behavior:none;
}

/* ===== Upcoming Events ===== */
.events-header { display:flex; align-items:flex-start; justify-content:space-between; gap:16px; }
.events-subscribe-btn { white-space:nowrap; flex-shrink:0; margin-top:2px; background:var(--gold) !important; color:#000 !important; border-color:var(--gold) !important; font-weight:600; }
.events-subscribe-btn:hover { background:var(--gold-hover) !important; border-color:var(--gold-hover) !important; transform:translateY(-1px); box-shadow:0 4px 16px rgba(255,153,0,0.25); }
.events-grid { display:flex; flex-direction:column; gap:32px; max-width:720px; margin:0 auto; }
.events-date-group { }
.events-date-heading { font-size:15px; font-weight:600; color:var(--text-muted); text-transform:uppercase; letter-spacing:0.5px; margin-bottom:16px; padding-bottom:8px; border-bottom:1px solid var(--border); }
.event-card { background:var(--bg-surface); border:1px solid var(--border); border-radius:var(--radius); overflow:hidden; transition:all var(--transition); cursor:pointer; margin-bottom:12px; }
.event-card:hover { border-color:var(--border-strong); transform:translateY(-2px); box-shadow:0 8px 24px rgba(0,0,0,0.08); }
.event-card-cover { width:100%; aspect-ratio:16/9; object-fit:cover; display:block; background-color:var(--accent); }
.event-card-body { padding:22px; }
.event-card-name { font-size:18px; font-weight:700; color:var(--text); margin-bottom:12px; letter-spacing:-0.2px; }
.event-card-details { display:flex; flex-wrap:wrap; gap:16px; margin-bottom:14px; }
.event-card-detail { display:flex; align-items:center; gap:6px; font-size:14px; color:var(--text-secondary); }
.event-card-detail svg { color:var(--text-muted); flex-shrink:0; }
.event-card-desc { font-size:13px; color:var(--text-secondary); line-height:1.6; margin-bottom:18px; display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; }
.event-card-btn { width:auto; padding:10px 28px; font-size:14px; display:inline-flex; }

.event-card-attendees { margin-bottom:14px; }
.event-card-attendees-loading { display:flex; align-items:center; gap:8px; padding:4px 0; }
.event-attendees-toggle { display:flex; align-items:center; gap:8px; font-size:14px; color:var(--accent); font-weight:600; cursor:pointer; padding:8px 0; user-select:none; }
.event-attendees-toggle:hover { opacity:0.8; }
.event-attendees-chevron { transition:transform 0.2s; flex-shrink:0; }
.event-card-attendees.expanded .event-attendees-chevron { transform:rotate(180deg); }
.event-attendees-list { display:none; padding:8px 0; border-top:1px solid var(--border); max-height:260px; overflow-y:auto; }
.event-card-attendees.expanded .event-attendees-list { display:block; }
.event-attendee-row { display:flex; align-items:center; gap:10px; padding:8px 4px; border-radius:8px; cursor:pointer; }
.event-attendee-row:hover { background:var(--bg-hover, #f5f5f5); }
.event-attendee-avatar { flex-shrink:0; }
.event-attendee-info { display:flex; flex-direction:column; min-width:0; }
.event-attendee-name { font-size:14px; font-weight:600; color:var(--text); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.event-attendee-role { font-size:12px; color:var(--text-secondary); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

@media(max-width:768px) {
  .events-header { flex-direction:column; gap:12px; }
  .events-subscribe-btn { align-self:flex-start; }
  .event-card-cover { aspect-ratio:16/9; }
  .event-card-body { padding:16px; }
  .event-card-name { font-size:16px; }
  .event-card-details { gap:10px; }
  .event-card-btn { width:100%; }
}

/* ===== Merge Mode ===== */
.profile-card.merge-mode { cursor:pointer; }
.profile-card.merge-mode:hover { border-color:var(--gold); }
.profile-card.merge-selected { border-color:var(--gold) !important; box-shadow:0 0 0 2px var(--gold), 0 4px 12px rgba(255,153,0,0.15) !important; }
.merge-checkbox { position:absolute; top:10px; right:10px; width:22px; height:22px; border:2px solid var(--border-strong); border-radius:4px; background:var(--bg-surface); display:flex; align-items:center; justify-content:center; z-index:5; transition:all 0.15s; font-size:14px; color:transparent; }
.merge-selected .merge-checkbox { background:var(--gold); border-color:var(--gold); color:#fff; }
.merge-table { width:100%; border-collapse:collapse; font-size:13px; }
.merge-table th { text-align:left; padding:8px 10px; background:var(--bg-elevated); color:var(--text-muted); font-weight:500; font-size:12px; text-transform:uppercase; letter-spacing:0.3px; border-bottom:1px solid var(--border); }
.merge-table td { padding:10px; border-bottom:1px solid var(--border); vertical-align:top; }
.merge-table td.field-label { font-weight:600; color:var(--text-secondary); width:100px; white-space:nowrap; background:var(--bg-elevated); }
.merge-option { display:flex; align-items:flex-start; gap:6px; cursor:pointer; padding:4px 6px; border-radius:var(--radius-xs); transition:background 0.12s; }
.merge-option:hover { background:var(--bg-hover); }
.merge-option input[type="radio"] { margin-top:3px; accent-color:var(--gold); flex-shrink:0; }
.merge-option label { cursor:pointer; word-break:break-word; line-height:1.4; }
.merge-option.auto-merged { background:var(--accent-subtle); border-radius:var(--radius-xs); padding:6px 8px; }
.merge-option.auto-merged label { color:var(--accent); font-weight:500; }