/* Marbos Leads — Complete Design System */
:root{--bg:#070B17;--surface:#0E1326;--surface-hover:#111830;--primary:#635BFF;--secondary:#00D4FF;--text:#FFF;--text-secondary:#94A3B8;--text-muted:#64748B;--border:rgba(255,255,255,.08);--border-hover:rgba(99,91,255,.3);--success:#4ade80;--error:#FF6B8A;--warning:#facc15;--radius:12px;--radius-lg:16px;--radius-xl:20px;--font-heading:'Sora',sans-serif;--font-body:'Inter',sans-serif}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{background:var(--bg);color:var(--text);font-family:var(--font-body);font-size:14px;line-height:1.6;min-height:100vh;-webkit-font-smoothing:antialiased}
h1,h2,h3,h4,h5,h6{font-family:var(--font-heading);font-weight:600;line-height:1.3}
a{color:inherit;text-decoration:none}
img{max-width:100%}
input,select,textarea,button{font:inherit;color:inherit}
::selection{background:var(--primary);color:#fff}
::-webkit-scrollbar{width:6px}::-webkit-scrollbar-track{background:transparent}::-webkit-scrollbar-thumb{background:var(--border-hover);border-radius:3px}

/* Utilities */
.container{max-width:1200px;margin:0 auto;padding:0 16px}
.text-center{text-align:center}.text-right{text-align:right}
.text-primary{color:var(--primary)}.text-secondary{color:var(--text-secondary)}.text-muted{color:var(--text-muted)}.text-success{color:var(--success)}.text-error{color:var(--error)}
.text-sm{font-size:13px}.text-xs{font-size:11px}.text-lg{font-size:18px}
.fw-500{font-weight:500}.fw-600{font-weight:600}
.mb-1{margin-bottom:4px}.mb-2{margin-bottom:8px}.mb-3{margin-bottom:12px}.mb-4{margin-bottom:16px}.mb-6{margin-bottom:24px}.mb-8{margin-bottom:32px}
.mt-4{margin-top:16px}.mt-6{margin-top:24px}.mt-8{margin-top:32px}
.ml-2{margin-left:8px}.mr-2{margin-right:8px}.my-3{margin:12px 0}
.p-5{padding:20px}.p-6{padding:24px}.p-12{padding:48px}
.py-12{padding:48px 0}
.gap-1{gap:4px}.gap-2{gap:8px}.gap-3{gap:12px}.gap-6{gap:24px}
.flex{display:flex;align-items:center}.flex-1{flex:1}
.flex-between{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap}
.flex-wrap{flex-wrap:wrap}
.items-center{align-items:center}.self-center{align-self:center}
.inline-svg{vertical-align:middle;display:inline}
/* max-width utilities — centered horizontally so authenticated page content
   lands in the middle of the main column (the space right of the sidebar)
   rather than pinned to the left on wide displays. */
.max-w-lg,.max-w-2xl,.max-w-3xl,.max-w-4xl,.max-w-5xl{margin-left:auto;margin-right:auto}
.max-w-2xl{max-width:640px}.max-w-3xl{max-width:768px}.max-w-4xl{max-width:896px}.max-w-5xl{max-width:1024px}.max-w-lg{max-width:512px}
.mx-auto{margin-left:auto;margin-right:auto}
.space-y-6>*+*{margin-top:24px}

.gradient-text{background:linear-gradient(135deg,var(--primary),var(--secondary));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.gradient-primary{background:linear-gradient(135deg,var(--primary),var(--secondary))}

/* Headings */
.heading-xl{font-size:clamp(28px,5vw,48px);font-weight:700}
.heading-lg{font-size:24px;font-weight:700}
.heading-md{font-size:20px;font-weight:600}
.heading-sm{font-size:16px;font-weight:600}

/* Cards */
.card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg)}
.card-hover{transition:transform .3s,box-shadow .3s,border-color .3s}.card-hover:hover{transform:translateY(-2px);box-shadow:0 8px 32px rgba(99,91,255,.15);border-color:var(--border-hover)}

/* Buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;font-weight:500;border-radius:var(--radius);border:none;cursor:pointer;transition:all .3s;white-space:nowrap}
.btn-sm{padding:6px 12px;font-size:13px}.btn-lg{padding:12px 24px;font-size:15px}
.btn:not(.btn-sm):not(.btn-lg){padding:8px 20px;font-size:14px}
.btn-primary{background:linear-gradient(135deg,var(--primary),var(--secondary));color:#fff}.btn-primary:hover{box-shadow:0 4px 20px rgba(99,91,255,.3);transform:translateY(-1px)}
.btn-ghost{background:var(--surface);border:1px solid var(--border);color:var(--text)}.btn-ghost:hover{border-color:var(--border-hover);background:var(--surface-hover)}
.btn-danger{background:rgba(255,107,138,.1);border:1px solid rgba(255,107,138,.2);color:var(--error)}.btn-danger:hover{background:rgba(255,107,138,.2)}
.btn-full{width:100%}
.btn:disabled{opacity:.5;cursor:not-allowed;transform:none!important}
.btn-icon{background:none;border:none;padding:6px;border-radius:8px;cursor:pointer;transition:all .2s;display:inline-flex}.btn-icon:hover{background:var(--surface-hover)}
.hover-danger:hover{color:var(--error)!important;background:rgba(255,107,138,.1)!important}

/* Forms */
.form-group{margin-bottom:16px}
.form-group label{display:block;font-size:13px;font-weight:500;color:var(--text-secondary);margin-bottom:6px}
input[type="text"],input[type="email"],input[type="password"],input[type="number"],input[type="tel"],input[type="url"],input[type="search"],select,textarea{width:100%;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:10px 14px;color:var(--text);transition:all .2s}
input:focus,select:focus,textarea:focus{outline:none;border-color:rgba(99,91,255,.5);box-shadow:0 0 0 2px rgba(99,91,255,.2)}

/* Placeholder — consistent across browsers (Firefox dims by default). */
input::placeholder,textarea::placeholder{color:var(--text-muted);opacity:1}

/* Browser autofill — Chromium, Safari, and Edge inject a yellow/white
   background on recognized fields (phone, email, URL, etc). The classic
   `-webkit-box-shadow inset` trick is the only supported override; direct
   background-color is ignored by the UA during autofill. Covers all
   autofill states so the field stays dark while typing and after blur. */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active,
textarea:-webkit-autofill,
textarea:-webkit-autofill:hover,
textarea:-webkit-autofill:focus,
select:-webkit-autofill,
select:-webkit-autofill:hover,
select:-webkit-autofill:focus{
    -webkit-text-fill-color:var(--text)!important;
    -webkit-box-shadow:0 0 0 1000px var(--surface) inset!important;
    box-shadow:0 0 0 1000px var(--surface) inset!important;
    caret-color:var(--text);
    /* Absurd transition duration defers the UA's autofill fade long enough
       that the override wins even during the autofill animation frame. */
    transition:background-color 9999s ease-in-out 0s,color 9999s ease-in-out 0s
}

/* Firefox — its autofill puts a peach-coloured filter on matched fields. */
input:autofill,
textarea:autofill,
select:autofill{
    filter:none;
    background-color:var(--surface)!important;
    color:var(--text)!important
}
select{appearance:none;background-image:url("data:image/svg+xml,%3Csvg width='10' height='6' viewBox='0 0 10 6' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%2364748B' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 12px center;padding-right:32px;cursor:pointer}
input[type="checkbox"]{accent-color:var(--primary);width:16px;height:16px;cursor:pointer}

/* Badges */
.badge{display:inline-flex;align-items:center;gap:4px;padding:3px 10px;border-radius:8px;font-size:12px;font-weight:500;border:1px solid}
.badge-primary{background:rgba(99,91,255,.1);color:var(--primary);border-color:rgba(99,91,255,.2)}
.badge-success{background:rgba(74,222,128,.1);color:var(--success);border-color:rgba(74,222,128,.2)}
.badge-warning{background:rgba(250,204,21,.1);color:var(--warning);border-color:rgba(250,204,21,.2)}
.badge-danger{background:rgba(255,107,138,.1);color:var(--error);border-color:rgba(255,107,138,.2)}
.badge-default{background:var(--surface-hover);color:var(--text-secondary);border-color:var(--border)}

/* Alerts */
.alert{padding:12px 16px;border-radius:var(--radius);margin-bottom:16px;font-size:13px}
.alert-error{background:rgba(255,107,138,.1);border:1px solid rgba(255,107,138,.2);color:var(--error)}
.alert-success{background:rgba(74,222,128,.1);border:1px solid rgba(74,222,128,.2);color:var(--success)}
.alert p+p{margin-top:4px}

/* Tables */
.table-wrap{overflow-x:auto}
.data-table{width:100%;border-collapse:collapse;font-size:13px}
.data-table th{padding:12px;text-align:left;color:var(--text-muted);font-weight:500;border-bottom:1px solid var(--border)}
.data-table td{padding:10px 12px;border-bottom:1px solid rgba(255,255,255,.04)}
.data-table tr:hover{background:var(--surface-hover)}
.row-alt{background:rgba(7,11,23,.3)}.row-selected{background:rgba(99,91,255,.05)!important}

/* Rating */
.rating{display:inline-flex;align-items:center;gap:3px;color:var(--warning)}

/* Pagination */
.pagination{display:flex;align-items:center;justify-content:space-between;padding:12px 16px;border-top:1px solid var(--border)}
.page-btns{display:flex;gap:4px}
.page-btn{width:32px;height:32px;border-radius:8px;border:none;background:transparent;color:var(--text-muted);cursor:pointer;font-size:13px;transition:all .2s}
.page-btn:hover{background:var(--surface-hover)}.page-btn.active{background:linear-gradient(135deg,var(--primary),var(--secondary));color:#fff}

/* Navigation */
.nav-public{position:fixed;top:0;left:0;right:0;z-index:50;background:rgba(7,11,23,.8);backdrop-filter:blur(20px);border-bottom:1px solid var(--border)}
.nav-inner{max-width:1200px;margin:0 auto;padding:0 16px;height:56px;display:flex;align-items:center;justify-content:space-between}
.logo{display:flex;align-items:center;gap:8px;font-family:var(--font-heading);font-weight:700;font-size:17px}
.logo-icon{width:32px;height:32px;border-radius:8px;background:linear-gradient(135deg,var(--primary),var(--secondary));display:flex;align-items:center;justify-content:center;color:#fff}
.logo-icon-sm{width:24px;height:24px;border-radius:6px}
.nav-links{display:flex;align-items:center;gap:12px}
.nav-link{font-size:14px;color:var(--text-secondary);transition:color .2s}.nav-link:hover{color:var(--text)}

/* Sidebar */
.sidebar{position:fixed;top:0;left:0;height:100%;width:256px;background:var(--surface);border-right:1px solid var(--border);z-index:50;display:flex;flex-direction:column;transform:translateX(-100%);transition:transform .3s}
.sidebar.open{transform:translateX(0)}
.sidebar-overlay{position:fixed;inset:0;background:rgba(0,0,0,.5);backdrop-filter:blur(4px);z-index:40;display:none}
.sidebar-toggle{position:fixed;top:12px;left:12px;z-index:50;padding:8px;border-radius:var(--radius);background:var(--surface);border:1px solid var(--border);color:var(--text);cursor:pointer}
.sidebar-close{background:none;border:none;color:var(--text-muted);cursor:pointer;padding:4px}
.sidebar-header{padding:20px;border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between}
.sidebar-nav{flex:1;padding:12px;display:flex;flex-direction:column;gap:4px}
.sidebar-link{display:flex;align-items:center;gap:10px;padding:8px 12px;border-radius:var(--radius);font-size:14px;font-weight:500;color:var(--text-secondary);transition:all .2s;border:1px solid transparent}
.sidebar-link:hover{color:var(--text);background:var(--surface-hover)}
.sidebar-link.active{color:var(--primary);background:rgba(99,91,255,.1);border-color:rgba(99,91,255,.2)}
.sidebar-footer{padding:12px;border-top:1px solid var(--border)}
.credit-box{background:var(--bg);border-radius:var(--radius);padding:12px;margin-bottom:12px}
.credit-header{display:flex;justify-content:space-between;margin-bottom:6px}
.credit-label{font-size:11px;color:var(--text-muted)}.credit-value{font-size:14px;font-weight:600;color:var(--primary)}
.credit-bar{width:100%;height:6px;background:var(--surface-hover);border-radius:3px;overflow:hidden}
.credit-bar-lg{height:12px;border-radius:6px}
.credit-fill{height:100%;background:linear-gradient(135deg,var(--primary),var(--secondary));border-radius:inherit;transition:width .5s}
.credit-buy{display:block;text-align:center;font-size:12px;color:var(--secondary);margin-top:8px;transition:color .2s}.credit-buy:hover{color:var(--primary)}
.credit-warning{display:flex;align-items:center;gap:6px;justify-content:center;font-size:12px;color:var(--warning, #f59e0b);margin-top:8px;transition:color .2s;font-weight:500}.credit-warning:hover{color:#fbbf24}
.credit-fill-low{background:linear-gradient(135deg,var(--warning, #f59e0b),var(--error, #ef4444)) !important}
.upgrade-link{font-size:10px;color:var(--primary);margin-left:4px;font-weight:600;text-transform:uppercase;letter-spacing:.5px}.upgrade-link:hover{text-decoration:underline}
.sidebar-user{display:flex;align-items:center;gap:10px}
.avatar{width:32px;height:32px;border-radius:50%;background:linear-gradient(135deg,var(--primary),var(--secondary));display:flex;align-items:center;justify-content:center;color:#fff;font-size:14px;font-weight:600;flex-shrink:0}
.user-info{flex:1;min-width:0}.user-name{display:block;font-size:13px;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.user-plan{display:block;font-size:11px;color:var(--text-muted);text-transform:capitalize}
.logout-btn{padding:6px;border-radius:8px;color:var(--text-muted);transition:all .2s}.logout-btn:hover{color:var(--error);background:rgba(255,107,138,.1)}

/* App layout */
.app-body{display:flex;min-height:100vh}
.app-main{flex:1;display:flex;flex-direction:column;min-height:100vh}
.topbar{position:sticky;top:0;z-index:30;background:rgba(7,11,23,.8);backdrop-filter:blur(20px);border-bottom:1px solid var(--border);padding:8px 20px;display:flex;align-items:center;justify-content:space-between}
.topbar-spacer{width:40px}
.topbar-right{display:flex;align-items:center;gap:10px;margin-left:auto}
.credit-pill{display:flex;align-items:center;gap:6px;padding:6px 12px;border-radius:var(--radius);background:var(--surface);border:1px solid var(--border);font-size:13px;transition:border-color .2s}.credit-pill:hover{border-color:var(--border-hover)}
.credit-pill strong{color:var(--primary)}
.app-content{flex:1;padding:20px}

/* Modals */
.modal-overlay{position:fixed;inset:0;z-index:60;display:flex;align-items:center;justify-content:center;padding:16px}
.modal-overlay::before{content:'';position:absolute;inset:0;background:rgba(0,0,0,.6);backdrop-filter:blur(4px)}
.modal{position:relative;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-xl);padding:24px;max-width:420px;width:100%;animation:fadeIn .3s}
.modal-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px}
.modal-header h3{font-size:18px;font-weight:600}
.modal-close{background:none;border:none;color:var(--text-muted);font-size:24px;cursor:pointer;padding:4px;line-height:1}.modal-close:hover{color:var(--text)}
.modal-body{}

/* Export modal */
.export-fields-grid{display:grid;grid-template-columns:1fr 1fr;gap:6px 16px;max-height:200px;overflow-y:auto;padding:8px;background:var(--bg);border-radius:var(--radius);border:1px solid var(--border)}

/* Danger zone */
.danger-zone{border-left:3px solid var(--error);background:rgba(255,107,138,.03)}
.delete-list{list-style:none;padding:0}.delete-list li{padding:3px 0;padding-left:20px;position:relative;color:var(--text-secondary)}.delete-list li::before{content:'';position:absolute;left:0;top:11px;width:6px;height:6px;border-radius:50%;background:var(--error)}

/* Billing modal */
.billing-modal .modal{max-width:480px}
.billing-modal .modal-body{max-height:70vh;overflow-y:auto;padding-right:4px}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.form-error{color:var(--error);font-size:12px;margin-top:4px;display:none}
.form-group.has-error input{border-color:var(--error)}
.form-group.has-error .form-error{display:block}
.invoice-toggle{display:flex;align-items:center;gap:10px;padding:12px 16px;background:var(--bg);border:1px solid var(--border);border-radius:var(--radius);cursor:pointer;margin-bottom:16px;transition:border-color .2s;user-select:none}
.invoice-toggle:hover{border-color:var(--border-hover)}
.invoice-toggle input[type="checkbox"]{width:18px;height:18px;accent-color:var(--primary);cursor:pointer;flex-shrink:0}
.invoice-toggle .toggle-label{font-size:14px;font-weight:500}
.invoice-toggle .toggle-hint{font-size:12px;color:var(--text-muted)}
.invoice-fields{max-height:0;overflow:hidden;transition:max-height .4s ease,opacity .3s ease;opacity:0}
.invoice-fields.open{max-height:500px;opacity:1}
.invoice-fields-inner{padding-top:4px}
.billing-divider{height:1px;background:var(--border);margin:16px 0}
.billing-summary{font-size:13px;color:var(--text-secondary);margin-bottom:16px;display:flex;align-items:center;gap:8px}
.billing-summary .plan-name{color:var(--primary);font-weight:600}

/* Verification banner */
.verification-banner{background:#f59e0b;color:#000;padding:10px 16px;text-align:center;font-size:13px;font-weight:500;display:flex;align-items:center;justify-content:center;gap:8px;flex-wrap:wrap}
.verification-banner a{color:#000;text-decoration:underline;font-weight:700}
.verification-banner strong{font-weight:700}

/* Password field with toggle */
.password-field{position:relative;display:flex;align-items:center}
.password-field input{padding-right:40px;width:100%}
.password-toggle{position:absolute;right:8px;background:none;border:none;color:var(--text-muted);cursor:pointer;padding:4px;display:flex}.password-toggle:hover{color:var(--text)}
.password-strength{min-height:20px}

/* Warning alert */
.alert-warning{background:rgba(245,158,11,.1);border:1px solid rgba(245,158,11,.2);color:#f59e0b}
.bg-warning-10{background:rgba(245,158,11,.1)}

/* Toast */
.toast-container{position:fixed;top:16px;right:16px;z-index:100;display:flex;flex-direction:column;gap:8px}
.toast{display:flex;align-items:center;gap:10px;padding:12px 16px;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);min-width:280px;box-shadow:0 8px 32px rgba(0,0,0,.3);font-size:13px}
.toast-close{background:none;border:none;color:var(--text-muted);cursor:pointer;font-size:18px;margin-left:auto;padding:0 0 0 8px}

/* Animations */
@keyframes fadeIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
.fade-in{animation:fadeIn .4s ease forwards}
.spinner{width:16px;height:16px;border:2px solid rgba(255,255,255,.3);border-top-color:#fff;border-radius:50%;animation:spin .6s linear infinite;display:inline-block}
@keyframes spin{to{transform:rotate(360deg)}}
.skeleton{background:linear-gradient(90deg,var(--surface) 25%,#1a2040 50%,var(--surface) 75%);background-size:200% 100%;animation:shimmer 1.5s ease-in-out infinite;border-radius:8px;height:16px;margin-bottom:12px}
@keyframes shimmer{0%{background-position:-200% 0}100%{background-position:200% 0}}
.skeleton-rows{padding:20px}

/* Auth pages */
.auth-page{min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:80px 16px 48px}
.auth-bg{position:fixed;inset:0;z-index:-1;pointer-events:none}
.bg-blob{position:absolute;border-radius:50%;filter:blur(120px)}
.bg-blob-1{top:20%;left:25%;width:400px;height:400px;background:rgba(99,91,255,.08)}
.bg-blob-2{bottom:20%;right:25%;width:400px;height:400px;background:rgba(0,212,255,.08)}
.auth-card{width:100%;max-width:420px;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-xl);padding:32px}
.auth-title{font-size:24px;text-align:center;margin-bottom:8px}
.auth-subtitle{text-align:center;color:var(--text-secondary);margin-bottom:24px;font-size:14px}
.auth-form{display:flex;flex-direction:column;gap:0}
.auth-footer-text{text-align:center;font-size:13px;color:var(--text-secondary);margin-top:24px}

/* Search layout */
.search-layout{display:flex;gap:24px;max-width:1240px;margin-left:auto;margin-right:auto}
.search-filters{width:300px;flex-shrink:0}
.search-results{flex:1;min-width:0}
.premium-overlay{text-align:center;margin:8px 0}
.premium-filters.locked{position:relative;opacity:.5;pointer-events:none}

/* Empty state */
.empty-state{text-align:center;padding:48px 16px}
.empty-state h3{font-size:18px;margin-bottom:8px}
.empty-icon{width:64px;height:64px;border-radius:var(--radius-lg);display:flex;align-items:center;justify-content:center;margin:0 auto 16px}

/* Stats */
.stats-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
.stat-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);padding:16px;transition:all .3s}.stat-card:hover{border-color:var(--border-hover)}
.stat-icon{width:40px;height:40px;border-radius:var(--radius);display:flex;align-items:center;justify-content:center;margin-bottom:12px}
.bg-primary-10{background:rgba(99,91,255,.1)}.bg-success-10{background:rgba(74,222,128,.1)}.bg-secondary-10{background:rgba(0,212,255,.1)}.bg-warning-10{background:rgba(250,204,21,.1)}
.stat-value{font-size:24px;font-family:var(--font-heading);font-weight:700}.stat-label{font-size:13px;color:var(--text-muted)}

/* Chart */
.chart-bars{display:flex;align-items:flex-end;gap:4px;height:128px}
.chart-col{flex:1;display:flex;flex-direction:column;align-items:center;gap:4px;height:100%}
.chart-bar-wrap{flex:1;width:100%;display:flex;align-items:flex-end}
.chart-bar{width:100%;background:linear-gradient(135deg,var(--primary),var(--secondary));border-radius:4px 4px 0 0;min-height:2px;transition:height .5s}
.chart-label{font-size:10px;color:var(--text-muted)}

/* Recent list */
.recent-list{display:flex;flex-direction:column;gap:4px}
.recent-item{display:flex;align-items:center;justify-content:space-between;padding:8px 12px;border-radius:var(--radius);transition:background .2s}.recent-item:hover{background:var(--surface-hover)}

/* Grid */
.grid-2{display:grid;grid-template-columns:repeat(2,1fr)}

/* Landing page */
.landing{padding-top:56px}
.hero{position:relative;padding:80px 16px;overflow:hidden}
.hero-bg{position:absolute;inset:0;z-index:-1}
.hero-title{font-size:clamp(32px,6vw,56px);font-weight:700;line-height:1.15;margin-bottom:20px}
.hero-subtitle{font-size:clamp(16px,2.5vw,20px);color:var(--text-secondary);max-width:640px;margin:0 auto 32px}
.hero-ctas{display:flex;flex-wrap:wrap;gap:12px;justify-content:center}
.section{padding:64px 16px}
.bg-surface-half{background:rgba(14,19,38,.5)}
.steps-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:32px;text-align:center}
.step-card h3{font-size:20px;margin-bottom:8px}
.step-icon{width:64px;height:64px;border-radius:var(--radius-lg);background:var(--surface);border:1px solid var(--border);display:flex;align-items:center;justify-content:center;margin:0 auto 16px}
.step-num{font-size:13px;color:var(--text-muted);margin-bottom:4px}
.demo-table-card{overflow:hidden;box-shadow:0 20px 60px rgba(0,0,0,.3)}
.demo-search-bar{padding:16px;border-bottom:1px solid var(--border);display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.demo-chip{display:flex;align-items:center;gap:6px;padding:8px 12px;border-radius:var(--radius);background:var(--bg);border:1px solid var(--border);font-size:13px}
.stats-row{display:grid;grid-template-columns:repeat(3,1fr);gap:32px;text-align:center}
.stat-big{font-size:clamp(32px,5vw,48px);font-family:var(--font-heading);font-weight:700;margin-bottom:8px}

/* Pricing */
.pricing-page{padding-top:56px;min-height:100vh}
.pricing-bg{position:fixed;inset:0;z-index:-1}

/* Grid: 64px top breathing for the floating "Legnépszerűbb" badge clearance
   above. Badge lives at top:-16px on the Pro card AND on the .recommended
   credit pack — both grids need clear room above so the badge never overlaps
   the toggle row or any other element above. */
.pricing-page,.pricing-page .container{overflow:visible}
.pricing-grid{
    display:grid;grid-template-columns:repeat(4,1fr);
    gap:24px;
    margin-top:64px;
    margin-bottom:0;
    align-items:stretch;
    overflow:visible
}

/* Cards are flex columns so the CTA button always anchors to the bottom of
   whichever card in the row is tallest. NO min-height — heights are content-
   driven. align-items:stretch on the parent grid forces equal heights,
   without forcing dead whitespace inside short cards. */
.pricing-card{
    background:var(--surface);
    border:1px solid var(--border);
    border-radius:var(--radius-xl);
    padding:28px 24px;
    display:flex;flex-direction:column;
    transition:transform .25s ease,box-shadow .25s ease,border-color .25s ease;
    position:relative;
    overflow:visible  /* CRITICAL: never clip the floating Legnépszerűbb badge */
}
.pricing-card > .btn,
.pricing-card > a.btn{margin-top:auto}

/* Recommended (Pro) — real gradient border via mask trick + soft glow.
   Slight scale on desktop so it visually leads the row. */
.pricing-card.recommended{
    border:1px solid transparent;
    background:
        linear-gradient(var(--surface),var(--surface)) padding-box,
        linear-gradient(135deg,var(--primary),var(--secondary)) border-box;
    box-shadow:0 16px 48px rgba(99,91,255,.22),0 0 0 1px rgba(99,91,255,.08)
}
@media(min-width:1024px){
    .pricing-card.recommended{transform:scale(1.04);z-index:1}
}

/* Floating "Legnépszerűbb" badge — top-center, fully ABOVE the card top edge.
   top:-16px (was -13) gives extra clearance so it can never look "cut off" by
   the card border. The badge itself uses solid gradient + white text + bigger
   padding so it dominates visually and can't be confused with a faint chip. */
.recommended-badge{
    position:absolute;top:-16px;left:50%;transform:translateX(-50%);
    z-index:5;white-space:nowrap;pointer-events:none
}
.recommended-badge .badge{
    background:linear-gradient(135deg,var(--primary),var(--secondary));
    color:#fff;
    border:none;
    padding:6px 14px;
    font-size:11px;
    font-weight:700;
    text-transform:uppercase;
    letter-spacing:.06em;
    border-radius:999px;
    box-shadow:0 6px 20px rgba(99,91,255,.45),0 0 0 2px rgba(7,11,23,1);
    /* The 2px navy outer-ring "carves out" a moat around the badge, making it
       visually float clear of any card border the eye may interpret as cutting it. */
}

/* Card content rhythm */
/* Plan names: WHITE by default for non-recommended tiers; only the .recommended
   tier (Pro) gets the purple accent — visually marks the recommended option. */
.pricing-name{
    font-size:48px;
    font-family:var(--font-heading);
    font-weight:700;
    color:#fff;
    font-variant-numeric:tabular-nums;
    line-height:1;
    letter-spacing:-.02em;
    margin-bottom:14px
}
.pricing-card.recommended .pricing-name{color:var(--primary)}
.pricing-price{margin-bottom:6px;display:flex;align-items:baseline;flex-wrap:wrap;gap:2px}
.price-amount{font-size:28px;font-family:var(--font-heading);font-weight:700;line-height:1.1;letter-spacing:-.01em;font-variant-numeric:tabular-nums}
.price-period{font-size:14px;color:var(--text-muted)}
/* Yearly total line — positive top margin (was negative), reserves vertical
   space whether shown or hidden so the card layout doesn't jump on toggle.
   Use min-height so monthly view keeps the same content offset as yearly. */
.price-yearly-note{font-size:12px;color:var(--text-muted);margin:4px 0 18px;min-height:18px}
/* Features list takes all remaining vertical space AND vertically centers its
   items inside that space. This prevents the "tall card with empty bottom gap"
   look on cards with fewer features (Ingyenes has 3, Business has 6). */
.pricing-features{
    list-style:none;
    flex:1 1 auto;
    margin:24px 0;
    display:flex;
    flex-direction:column;
    justify-content:center;
    gap:6px
}
.pricing-features li{display:flex;align-items:flex-start;gap:10px;font-size:13px;color:var(--text-secondary);line-height:1.5}
.pricing-features svg{flex-shrink:0;margin-top:3px}

/* Interval toggle — wraps cleanly so the 20% badge never collides with the
   toggle thumb or labels. Row-gap when wrapping. */
.interval-toggle{
    display:flex;align-items:center;justify-content:center;
    gap:14px;flex-wrap:wrap;row-gap:8px;
    padding:0 12px;margin-bottom:8px
}
.interval-label{font-size:14px;color:var(--text-muted);transition:color .2s}
.interval-label.active-label{color:var(--text);font-weight:600}
.toggle-track{width:52px;height:28px;background:var(--surface);border:1px solid var(--border);border-radius:14px;position:relative;cursor:pointer;flex-shrink:0;padding:0}
.toggle-thumb{width:22px;height:22px;border-radius:50%;background:linear-gradient(135deg,var(--primary),var(--secondary));position:absolute;top:2px;left:2px;transition:transform .3s cubic-bezier(0.22,1,0.36,1)}
.toggle-thumb.active{transform:translateX(24px)}
#yearlyBadge{margin-left:0}

/* Credit packs — same equal-stretch grid + bottom-anchored button.
   Cards are larger now: more internal padding + bigger pack-credits number,
   so they feel as substantial as the subscription cards above. */
.credit-packs-grid{
    display:grid;grid-template-columns:repeat(3,1fr);
    gap:24px;
    margin-top:32px;
    align-items:stretch;
    overflow:visible
}
.credit-pack-card{
    background:var(--surface);
    border:1px solid var(--border);
    border-radius:var(--radius-xl);
    padding:40px 28px;text-align:center;
    display:flex;flex-direction:column;justify-content:space-between;
    transition:transform .25s ease,box-shadow .25s ease,border-color .25s ease;
    position:relative;
    overflow:visible;  /* CRITICAL: floating Legnépszerűbb badge on the 500 pack */
    min-height:260px
}
.credit-pack-card > .btn{margin-top:auto}
/* Credit numbers: WHITE by default for non-recommended packs; only the
   .recommended-pack (500) gets the purple accent — same logic as plan names. */
.pack-credits{
    font-size:48px;font-family:var(--font-heading);font-weight:700;
    color:#fff;font-variant-numeric:tabular-nums;
    line-height:1;letter-spacing:-.02em;
    margin-bottom:4px
}
.credit-pack-card.recommended-pack .pack-credits{color:var(--primary)}
.pack-price{font-size:22px;font-weight:600;margin-top:8px}

/* Recommended credit pack (500) — same treatment as Pro plan card */
.credit-pack-card.recommended-pack{
    border:1px solid transparent;
    background:
        linear-gradient(var(--surface),var(--surface)) padding-box,
        linear-gradient(135deg,var(--primary),var(--secondary)) border-box;
    box-shadow:0 16px 48px rgba(99,91,255,.22),0 0 0 1px rgba(99,91,255,.08)
}
.credit-pack-card.recommended-pack .pack-price{color:var(--text)}

/* ── "vagy" section divider — TIGHT spacing (32px above + ~18px element +
   28px below ≈ 78px total from card bottom to heading top, per spec 60-80px).
   Two horizontal gradient lines (transparent → accent → transparent). ─── */
.section-divider{
    display:flex;align-items:center;
    margin:32px auto 28px;
    max-width:560px;
    color:var(--text-muted);
    font-size:13px;
    letter-spacing:.02em;
    line-height:1
}
.section-divider::before,
.section-divider::after{
    content:'';flex:1;height:1px;
    background:linear-gradient(90deg,transparent,rgba(99,91,255,.3),transparent)
}
.section-divider span{
    padding:0 18px;
    font-weight:500;
    color:var(--text-secondary);
    text-transform:lowercase
}

/* Credit packs section — full container width (no max-w-3xl constraint).
   Heading + subtitle are constrained via CSS for readability; the cards grid
   spans the full available width like the subscription grid above. */
.credit-packs-section{
    margin-top:0;
    width:100%
}
.credit-packs-section h2{
    font-size:26px;font-weight:700;margin-bottom:8px;
    font-family:var(--font-heading);
    max-width:640px;margin-left:auto;margin-right:auto
}
.credit-packs-section > p,
.credit-packs-section .text-secondary{
    font-size:15px;
    max-width:640px;margin-left:auto;margin-right:auto
}

/* Tablet (768–1199px): Pro card scale OFF (would clip in 2-col layout) */
@media(max-width:1199px){
    .pricing-card.recommended{transform:none}
}
@media(max-width:767px){
    /* Mobile: tighter divider, smaller "vagy" */
    .section-divider{margin:48px auto 40px;max-width:320px}
    .section-divider span{padding:0 14px;font-size:12px}
    /* Mobile: features list naturally fits content (single-col stacked cards) */
    .pricing-features{justify-content:flex-start;margin:20px 0}
}

/* ============================================================
   Logged-in pricing card state — current plan / unavailable tier.
   `.pricing-card-dimmed` is added server-side by pages/arak.php for every
   card at or below the user's current plan. The matching CTA carries
   `.pricing-cta-state` (+ a variant class) so the button reads as inert.
   Guest view (logged out) never gets these classes — pixel-identical.
   ============================================================ */

.pricing-card.pricing-card-dimmed{
    opacity:.55;
    filter:saturate(.75);
    transition:opacity .3s ease,filter .3s ease
}
/* Kill hover lift on dimmed cards — mirrors the existing `@media(hover:hover)`
   gate used elsewhere so touch devices aren't affected. */
@media(hover:hover) and (pointer:fine){
    .pricing-card.pricing-card-dimmed:hover{
        transform:none!important;
        box-shadow:none!important
    }
}
/* Neutralize the recommended (Pro) gradient border + scale when dimmed so
   an already-owned Pro tier doesn't visually compete with an upgradeable
   Business card next to it. */
.pricing-card.pricing-card-dimmed.recommended{
    background:var(--surface);
    border:1px solid var(--border);
    box-shadow:none;
    transform:none!important
}
.pricing-card.pricing-card-dimmed .recommended-badge{opacity:.65}

/* CTA — "Jelenlegi csomagod" / "Alacsonyabb csomag". Muted surface so it
   reads as a state pill, not a button. `pointer-events:none` + `disabled`
   attribute are both set server-side; the cursor/background overrides here
   are belt-and-braces in case a theme override tries to re-enable hover. */
.pricing-cta-state{
    background:rgba(255,255,255,.05)!important;
    background-image:none!important;
    color:rgba(255,255,255,.65)!important;
    border:1px solid rgba(255,255,255,.12)!important;
    box-shadow:none!important;
    cursor:default!important;
    pointer-events:none;
    font-weight:500
}
.pricing-cta-state:hover,
.pricing-cta-state:focus,
.pricing-cta-state:active{
    background:rgba(255,255,255,.05)!important;
    color:rgba(255,255,255,.65)!important;
    transform:none!important;
    box-shadow:none!important
}
/* "Current plan" variant reads slightly stronger than "lower tier" so the
   user's own plan is still the visual anchor among the dimmed cards. */
.pricing-cta-current{
    color:rgba(255,255,255,.80)!important;
    border-color:rgba(255,255,255,.18)!important
}

/* Footer */
.footer{border-top:1px solid var(--border);padding:24px 16px}
.footer-inner{max-width:1200px;margin:0 auto;display:flex;align-items:center;justify-content:space-between}
.footer-brand{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--text-muted)}
.footer-links{display:flex;gap:20px;font-size:13px;color:var(--text-muted)}
.footer-links a:hover{color:var(--text)}

/* Footer trust row — "Minden rendszer működik" + "Made in Hungary" (V2.2).
   Sits as the middle flex item in `.footer-inner` (space-between spreads
   brand / trust / links across the row). */
.footer-trust{
    display:flex;align-items:center;gap:12px;flex-wrap:wrap;
    font-size:13px;color:rgba(245,247,250,0.5)
}
.footer-trust-status,
.footer-trust-hu{
    display:inline-flex;align-items:center;gap:6px
}
.footer-trust-sep{color:rgba(245,247,250,0.3)}
.footer-trust-dot{
    width:7px;height:7px;border-radius:50%;
    background:var(--success);
    box-shadow:0 0 8px rgba(74,222,128,0.65);
    animation:footerTrustDotPulse 2s ease-in-out infinite
}
@keyframes footerTrustDotPulse{
    0%,100%{opacity:1;transform:scale(1)}
    50%{opacity:0.55;transform:scale(0.78)}
}
@media (prefers-reduced-motion:reduce){
    .footer-trust-dot{animation:none}
}

/* Verified badge */
.badge-verified{background:#10b981;color:#fff;font-size:10px;padding:2px 8px;border-radius:4px;border:none;font-weight:600;letter-spacing:.3px}
.badge-own{background:#2dd4bf;color:#000;font-size:11px;padding:3px 8px;border-radius:4px;font-weight:600;display:inline-block}

/* Claim promo banner */
.claim-banner{display:flex;align-items:center;gap:12px;padding:12px 16px;background:linear-gradient(135deg,rgba(99,91,255,.08),rgba(0,212,255,.08));border:1px solid rgba(99,91,255,.2);border-radius:var(--radius);margin-bottom:24px}
.claim-banner p{font-size:13px;flex:1}.claim-banner .text-primary{font-weight:600}
.claim-banner-close{background:none;border:none;color:var(--text-muted);cursor:pointer;font-size:18px;padding:4px;line-height:1}.claim-banner-close:hover{color:var(--text)}

/* Landing claim CTA */
.claim-cta-card{background:var(--surface);border:2px solid transparent;border-image:linear-gradient(135deg,var(--primary),var(--secondary)) 1;border-radius:0;padding:48px;text-align:center;position:relative}
.claim-cta-card::before{content:'';position:absolute;inset:-2px;border-radius:var(--radius-xl);background:linear-gradient(135deg,var(--primary),var(--secondary));z-index:-1}
.claim-cta-card{border-radius:var(--radius-xl);border:none;background:var(--surface)}
.claim-features{display:flex;flex-wrap:wrap;justify-content:center;gap:16px;margin:24px 0}
.claim-features li{display:flex;align-items:center;gap:6px;font-size:14px;color:var(--text-secondary);list-style:none}
.claim-features svg{color:var(--success);flex-shrink:0}

/* Source badges */
.src-badge{display:inline-block;width:18px;height:18px;border-radius:4px;font-size:10px;font-weight:700;text-align:center;line-height:18px;margin-right:2px;color:#fff}
.src-google{background:#4ade80}
.src-osm{background:#60a5fa}
.src-foursquare{background:#a78bfa}
.src-tomtom{background:#f87171}
.src-geoapify{background:#2dd4bf}
.src-locationiq{background:#fbbf24;color:#000}
.src-telefonkonyv{background:#fb923c}

/* Search progress indicator */
.search-progress{text-align:center;padding:48px 16px}.search-progress .spinner{width:32px;height:32px;margin-bottom:16px}
.search-progress p{margin-bottom:8px}

/* Website link in results */
.website-link{color:var(--secondary);font-size:12px;transition:color .2s;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:inline-block;max-width:140px;vertical-align:middle}
.website-link:hover{color:var(--primary);text-decoration:underline}

/* Enrichment indicator */
.enriched-dot{display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--success);margin-left:5px;vertical-align:middle;flex-shrink:0}

/* Locked contact data */
.locked-data{color:var(--text-muted);display:inline-flex;align-items:center;gap:4px;opacity:.5}
.locked-data svg{color:var(--primary);opacity:.7}

/* Bulk actions bar */
#bulkActions,.bulk-actions-bar{display:flex;align-items:center;gap:8px;padding:8px 12px;margin-bottom:16px;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);flex-wrap:wrap}
.bulk-actions-bar .bulk-count{font-size:13px;color:var(--text-secondary);margin-right:4px}
.bulk-actions-bar .bulk-count strong{color:var(--text)}

/* Revealed-history picker (list detail "add from revealed" modal) */
.revealed-picker-list{max-height:320px;overflow-y:auto;border:1px solid var(--border);border-radius:var(--radius);background:rgba(255,255,255,.01)}
.revealed-picker-row{display:flex;gap:12px;align-items:center;padding:10px 14px;border-bottom:1px solid var(--border);cursor:pointer;transition:background .15s ease}
.revealed-picker-row:last-child{border-bottom:none}
.revealed-picker-row:hover{background:var(--surface-hover)}
.revealed-picker-row input[type="checkbox"]{flex-shrink:0;margin:0}
.revealed-picker-info{flex:1;min-width:0}
.revealed-picker-info .fw-500{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* Per-row add-to-list popover (search results) */
.list-popover{
    position:absolute;z-index:1000;
    background:var(--surface);border:1px solid var(--border);
    border-radius:var(--radius-lg);box-shadow:0 12px 40px rgba(0,0,0,.45);
    display:flex;flex-direction:column;
    max-height:360px;overflow:hidden;
    animation:fadeIn .15s ease
}
.list-popover-header{padding:12px 14px 8px;border-bottom:1px solid var(--border)}
.list-popover-search{padding:8px 10px;border-bottom:1px solid var(--border)}
.list-popover-filter{
    width:100%;padding:7px 10px;font-size:13px;
    background:rgba(255,255,255,.03);border:1px solid var(--border);
    border-radius:var(--radius);color:var(--text)
}
.list-popover-filter:focus{outline:none;border-color:var(--primary)}
.list-popover-items{overflow-y:auto;flex:1;max-height:200px}
.list-popover-item{
    display:flex;align-items:center;gap:10px;
    padding:9px 14px;cursor:pointer;font-size:13px;
    border-bottom:1px solid rgba(255,255,255,.04);
    transition:background .15s ease
}
.list-popover-item:last-child{border-bottom:none}
.list-popover-item:hover{background:var(--surface-hover)}
.list-popover-item input[type="checkbox"]{margin:0;flex-shrink:0;cursor:pointer}
.list-popover-item-name{flex:1;color:var(--text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.list-popover-item-count{font-size:11px;color:var(--text-muted);font-variant-numeric:tabular-nums}
.list-popover-create{
    display:flex;gap:6px;padding:10px;border-top:1px solid var(--border);
    background:rgba(255,255,255,.01)
}
.list-popover-create input{
    flex:1;min-width:0;padding:6px 10px;font-size:13px;
    background:rgba(255,255,255,.03);border:1px solid var(--border);
    border-radius:var(--radius);color:var(--text)
}
.list-popover-create input:focus{outline:none;border-color:var(--primary)}

/* Mobile: popover becomes bottom sheet */
@media(max-width:600px){
    .list-popover{
        position:fixed!important;
        top:auto!important;bottom:0!important;left:0!important;
        width:100%!important;max-width:100%;max-height:70vh;
        border-radius:var(--radius-lg) var(--radius-lg) 0 0;
        padding-bottom:env(safe-area-inset-bottom)
    }
}

/* Mobile table improvements */
@media(max-width:768px){.table-wrap{-webkit-overflow-scrolling:touch}.data-table th,.data-table td{padding:8px 6px;font-size:12px;white-space:nowrap}.reveal-btn{padding:4px 8px;font-size:11px}}

/* Responsive */
/* Tablet (768–1199px) — 2-col pricing grid. Mobile (<768) → 1-col below. */
@media(max-width:1199px){.pricing-grid{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1024px){.sidebar{transform:translateX(0)}.sidebar-toggle,.sidebar-close,.sidebar-overlay{display:none}.app-main{margin-left:256px}.topbar-spacer{display:none}.lg-hidden{display:none!important}}
@media(max-width:1023px){.search-filters{position:fixed;top:0;left:0;height:100%;width:300px;z-index:50;background:var(--surface);transform:translateX(-100%);transition:transform .3s;overflow-y:auto;padding:20px}.search-filters.open{transform:translateX(0)}.search-layout{flex-direction:column}}
@media(max-width:768px){.steps-grid{grid-template-columns:1fr;gap:24px}.stats-row{grid-template-columns:1fr;gap:16px}.stats-grid{grid-template-columns:1fr}.grid-2{grid-template-columns:1fr}.pricing-grid{grid-template-columns:1fr}.credit-packs-grid{grid-template-columns:1fr}.hero-ctas{flex-direction:column;align-items:stretch}.footer-inner{flex-direction:column;gap:12px}.hide-sm{display:none!important}}
@media(max-width:640px){.hide-xs{display:none!important}.auth-card{padding:20px}.p-12{padding:24px}}
@media(max-width:480px){.hide-md{display:none!important}}

/* ═══════════════════════════════════════════════════════════════════
   MOBILE RESPONSIVE OVERHAUL (added 2026-04-14)
   Strategy: preserve existing desktop-first cascade, add mobile rules below.
   Phases: 1 base hygiene, 2 filter panel, 3 results cards, 4 sidebar/topbar.
   ═══════════════════════════════════════════════════════════════════ */

/* ── Phase 1: global hygiene (applies at every size) ────────────── */
html,body{overflow-x:hidden;max-width:100vw}
body{padding-left:env(safe-area-inset-left);padding-right:env(safe-area-inset-right)}
/* iOS auto-zoom prevention — requires 16px minimum on form fields */
input[type="text"],input[type="email"],input[type="password"],input[type="number"],input[type="search"],input[type="tel"],input[type="url"],select,textarea{font-size:16px}
/* Body scroll-lock utility — JS toggles this on filter/sidebar/modal open */
body.no-scroll{overflow:hidden;position:fixed;width:100%;left:0;right:0}

/* ── Phase 1: footer legal links ────────────────────────────────── */
.footer-legal{color:var(--secondary);transition:color .2s;font-size:13px;font-weight:500}
.footer-legal:hover{color:var(--primary)}
.footer-legal-muted{color:var(--text-muted);opacity:.7;font-weight:400}
.footer-legal-muted:hover{color:var(--text-secondary);opacity:1}
.footer-app{border-top:1px solid var(--border);padding:16px 20px;padding-bottom:max(16px,env(safe-area-inset-bottom))}
.footer-app-links{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:6px 12px;text-align:center;font-size:13px}
.footer-sep{color:var(--text-muted);opacity:.4}

/* Registration consent checkbox (used Phase 5 — pre-wire styling) */
.consent-row{display:flex;align-items:flex-start;gap:10px;padding:12px;background:var(--bg);border:1px solid var(--border);border-radius:var(--radius);margin:16px 0;font-size:13px;line-height:1.55}
.consent-row input[type="checkbox"]{flex-shrink:0;margin-top:2px;width:18px;height:18px}
.consent-row a{color:var(--secondary);text-decoration:underline;text-underline-offset:2px}
.consent-row a:hover{color:var(--primary)}
.consent-row.has-error{border-color:var(--error);background:rgba(255,107,138,.05)}

/* ── Phase 2: filter panel full-screen overlay on mobile+tablet ──
   Supersedes the earlier @media(max-width:1023px) rule above (source order wins).
*/
.search-filters-backdrop{position:fixed;inset:0;background:rgba(0,0,0,.55);backdrop-filter:blur(4px);z-index:55;display:none;animation:fadeIn .25s ease forwards}
.search-filters-backdrop.open{display:block}

@media(max-width:1023px){
    .search-filters{
        position:fixed;inset:0;z-index:60;
        width:100vw;height:100vh;height:100dvh;max-width:100vw;
        background:var(--bg);
        padding:16px;
        padding-top:max(16px,env(safe-area-inset-top));
        padding-bottom:max(16px,env(safe-area-inset-bottom));
        transform:translateY(100%);
        transition:transform .32s cubic-bezier(.2,.8,.2,1);
        overflow-y:auto;-webkit-overflow-scrolling:touch;
        will-change:transform;
        visibility:hidden
    }
    .search-filters.open{transform:translateY(0);visibility:visible}
    .search-filters .card{border:none;background:transparent;padding:0;box-shadow:none}
    /* Sticky Keresés button anchored to bottom of filter panel */
    .search-filters #searchBtn{
        position:sticky;bottom:0;
        margin-left:-16px;margin-right:-16px;margin-bottom:-16px;margin-top:20px;
        border-radius:0;
        padding:16px;min-height:56px;
        font-size:15px;font-weight:600;
        box-shadow:0 -12px 28px -8px rgba(7,11,23,.7)
    }
    /* The `Szűrők megjelenítése` toggle on the results side */
    #filtersToggle{min-height:44px;padding:10px 16px;font-size:14px}
    /* Filter close button — make it tappable */
    #filtersClose{min-width:44px;min-height:44px;display:flex;align-items:center;justify-content:center}
}

/* ── Phase 4: sidebar + topbar mobile polish ────────────────────── */
@media(max-width:1023px){
    /* Sidebar — already slides in from left. Widen it + touch targets. */
    .sidebar{width:min(300px,86vw);padding-bottom:env(safe-area-inset-bottom)}
    .sidebar-link{min-height:48px;padding:12px 14px;font-size:15px}
    .sidebar-toggle{min-width:44px;min-height:44px;display:flex;align-items:center;justify-content:center}
    .sidebar-close{min-width:44px;min-height:44px;display:flex;align-items:center;justify-content:center}
    .sidebar-header{padding:16px 20px}
    .sidebar-footer{padding:16px;padding-bottom:max(16px,env(safe-area-inset-bottom))}
    .topbar{padding:8px 12px 8px 60px}  /* left room for sidebar-toggle */
}

/* ── Phase 4: topbar credit pill + buy button compression ───────── */
@media(max-width:767px){
    .topbar{padding:8px 12px 8px 56px}
    .topbar-right{gap:8px}
    .credit-pill{font-size:12px;padding:6px 10px;gap:4px;min-height:36px}
    .credit-pill svg{width:14px;height:14px}
    .topbar-right .btn-sm{min-height:36px;padding:6px 12px;font-size:12px}
    .topbar-right .btn-sm svg{width:13px;height:13px}
}
@media(max-width:420px){
    /* Ultra-narrow: Vásárlás → icon-only. .btn-label spans are introduced
       in header-app.php for this purpose. */
    .topbar-right .btn-sm .btn-label{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}
    .topbar-right .btn-sm{padding:8px 12px;min-width:44px}
    /* Also shorten "kredit" to just the number */
    .credit-pill .credit-pill-unit{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}
    .credit-pill{padding:6px 10px}
}

/* ── Phase 3 (REBUILT v2): results card — vertical stack, left-aligned ──
   Replaces the label:value flex format. Each <tr> renders as a premium card:
     ┌─ Cégnév (big, bold, white)    [checkbox corner]
     │  [Város pill]
     │  ★★★★☆ 4.2 (128)
     │  Weboldal / Email / Telefon (muted, left-aligned)
     │  ─────────────────────────
     │  [    FELOLDÁS full-width button    ]
     └────────────────────────────────
*/
@media(max-width:767px){
    .table-wrap{overflow-x:visible;border:none;background:transparent;padding:0}
    .data-table,.data-table thead,.data-table tbody,.data-table tr,.data-table td,.data-table th{display:block;width:100%}
    .data-table thead{position:absolute;top:-9999px;left:-9999px}
    .data-table{font-size:14px}

    /* Each row = a card with subtle gradient depth + inner highlight */
    .data-table tr{
        background:linear-gradient(180deg,rgba(17,24,48,.7) 0%,var(--surface) 100%);
        border:1px solid var(--border);
        border-radius:var(--radius-lg);
        padding:16px;
        margin-bottom:12px;
        position:relative;
        box-shadow:inset 0 1px 0 rgba(255,255,255,.04),0 1px 2px rgba(0,0,0,.2);
        transition:border-color .22s cubic-bezier(0.22,1,0.36,1),box-shadow .22s,transform .22s
    }
    .data-table tr.row-selected{border-color:rgba(99,91,255,.55);box-shadow:inset 0 1px 0 rgba(255,255,255,.05),0 0 0 2px rgba(99,91,255,.18)}
    .data-table tr:hover{background:linear-gradient(180deg,rgba(17,24,48,.7) 0%,var(--surface) 100%);transform:none}

    /* All cells: block-level, left-aligned, no label prefix */
    .data-table td{
        padding:0;border:none;text-align:left;
        display:block;width:100%;line-height:1.5;
        margin:0 0 8px
    }
    .data-table td::before{display:none}
    .data-table td:last-child{margin-bottom:0}

    /* Checkbox — absolute corner, padded hit area */
    .data-table td:first-child{
        position:absolute;top:12px;right:12px;
        padding:8px;margin:0;width:auto;
        z-index:2
    }
    .data-table td:first-child input[type="checkbox"]{width:20px;height:20px;cursor:pointer}

    /* Cégnév — the dominant line */
    .data-table td[data-label="Cégnév"]{
        font-size:17px;font-weight:600;color:#fff;
        letter-spacing:-.01em;line-height:1.35;
        padding-right:44px;
        margin-bottom:10px
    }
    .data-table td[data-label="Cégnév"] .badge-verified{
        display:inline-block;vertical-align:middle;margin-left:6px;
        font-size:10px;padding:2px 7px
    }
    .data-table td[data-label="Cégnév"] .text-xs{font-size:11px;margin-left:4px}

    /* Város — compact cyan pill with pin-dot */
    .data-table td[data-label="Város"]{
        display:inline-flex;align-items:center;gap:6px;width:auto;
        padding:4px 10px;border-radius:999px;
        background:rgba(0,212,255,.08);border:1px solid rgba(0,212,255,.22);
        color:var(--secondary);font-size:12px;font-weight:500;
        margin-bottom:10px
    }
    .data-table td[data-label="Város"]::before{
        display:inline-block;content:'';
        width:5px;height:5px;border-radius:50%;background:var(--secondary)
    }

    /* Értékelés — inline stars */
    .data-table td[data-label="Értékelés"]{font-size:13px;margin-bottom:8px}
    .data-table td[data-label="Értékelés"] .rating{color:var(--warning)}

    /* Weboldal / Email / Telefon — subtle secondary lines */
    .data-table td[data-label="Weboldal"],
    .data-table td[data-label="Email"],
    .data-table td[data-label="Telefon"]{
        color:var(--text-secondary);font-size:13px;
        display:flex;align-items:center;gap:8px;
        padding:4px 0;word-break:break-word
    }
    .data-table td[data-label="Weboldal"] .website-link{color:var(--secondary);max-width:none;white-space:normal;word-break:break-all}
    .data-table td[data-label="Email"] .text-success{color:var(--success);word-break:break-all}
    .data-table td[data-label="Email"]::before,
    .data-table td[data-label="Telefon"]::before,
    .data-table td[data-label="Weboldal"]::before{display:none}

    /* Forrás — too noisy inside a card, hidden on mobile */
    .data-table td[data-label="Forrás"]{display:none}

    /* Művelet — full-width gradient CTA, visually terminal to the card */
    .data-table td[data-label="Művelet"]{
        margin-top:12px;padding-top:14px;
        border-top:1px solid var(--border);
        text-align:center
    }
    .data-table td[data-label="Művelet"] .btn,
    .data-table td[data-label="Művelet"] .badge,
    .data-table td[data-label="Művelet"] .badge-own{
        display:flex;width:100%;text-align:center;justify-content:center;align-items:center
    }
    .data-table td[data-label="Művelet"] .btn{
        min-height:48px;padding:12px 16px;font-size:15px;font-weight:600;
        box-shadow:0 4px 16px rgba(99,91,255,.24)
    }
    .data-table td[data-label="Művelet"] .badge,
    .data-table td[data-label="Művelet"] .badge-own{padding:10px 12px;font-size:13px}
    .reveal-btn{min-height:48px!important;width:100%!important;padding:12px 16px!important;font-size:15px!important;font-weight:600!important}

    /* Pagination + bulk toolbar — stack */
    .pagination{flex-direction:column;gap:12px;padding:16px;align-items:stretch}
    .page-btns{justify-content:center;flex-wrap:wrap}
    .page-btn{width:40px;height:40px;font-size:14px}
    .src-badge{width:20px;height:20px;line-height:20px;font-size:11px}
    #bulkActions{flex-direction:column;align-items:stretch;gap:8px;padding:12px}
    #bulkActions .btn{width:100%;justify-content:center;min-height:44px}
}

/* ── Phase 3 + 4: general mobile polish ────────────────────────── */
@media(max-width:767px){
    /* Touch targets */
    .btn{min-height:44px}
    .btn-sm{min-height:40px;padding:8px 14px;font-size:13px}
    input[type="text"],input[type="email"],input[type="password"],input[type="number"],input[type="search"],input[type="tel"],select,textarea{min-height:46px;padding:12px 14px}
    input[type="checkbox"]{width:20px;height:20px}
    .modal-close,.claim-banner-close,.toast-close{min-width:40px;min-height:40px;display:inline-flex;align-items:center;justify-content:center}
    /* Modals — near-full-width, safe-area-respecting */
    .modal-overlay{padding:12px;padding-bottom:max(12px,env(safe-area-inset-bottom))}
    .modal{padding:20px;max-height:calc(100vh - 24px);max-height:calc(100dvh - 24px);overflow-y:auto;-webkit-overflow-scrolling:touch;border-radius:var(--radius-lg)}
    .export-fields-grid{grid-template-columns:1fr;max-height:260px}
    /* Verification banner compacted */
    .verification-banner{font-size:12px;padding:10px 12px;line-height:1.4}
    /* Nav public — tighten & wrap cleanly */
    .nav-inner{padding:0 12px;height:52px}
    .nav-links{gap:6px}
    .nav-links .btn-sm{padding:6px 10px;font-size:12px;min-height:36px}
    /* Cards: tighter padding */
    .p-5{padding:16px}.p-6{padding:18px}.p-12{padding:20px}
    .stat-card{padding:14px}
    /* Auth pages */
    .auth-page{padding:24px 12px 48px;min-height:100vh;min-height:100dvh}
    .auth-card{padding:20px;max-width:100%;border-radius:var(--radius-lg)}
    .auth-title{font-size:22px}
    /* Hero & landing sections */
    .hero{padding:48px 16px}
    .section{padding:48px 12px}
    .hero-ctas .btn{width:100%}
    /* Landing stats: 2×2 grid on mobile per spec */
    .stats-row{grid-template-columns:repeat(2,1fr);gap:12px}
    .stat-big{font-size:clamp(24px,6vw,32px)}
    /* Pricing tighten */
    .pricing-card{padding:24px;min-height:auto}
    .credit-pack-card{padding:32px 24px;min-height:auto}
    .pack-credits{font-size:42px}
    .pricing-name{font-size:42px}
    .pack-price{font-size:20px}
    /* Footer public stacks (already at 768) + spacing */
    .footer{padding:20px 16px;padding-bottom:max(20px,env(safe-area-inset-bottom))}
    .footer-inner{padding:0}
    /* Search-layout: results full width when no filter shown */
    .search-results{width:100%}
    /* Claim banner: stack on tiny */
    .claim-banner{flex-wrap:wrap;gap:8px;padding:12px}
    .claim-banner p{font-size:12px}
    /* Form row: stack 2-col grids */
    .form-row{grid-template-columns:1fr;gap:0}
    /* Billing modal body: proper mobile height */
    .billing-modal .modal-body{max-height:calc(100vh - 180px);max-height:calc(100dvh - 180px)}
    /* Danger zone — visual breathing room */
    .danger-zone{padding:16px}
}

/* ── Fine-tune on very narrow phones (iPhone SE, old Androids) ── */
@media(max-width:380px){
    .auth-page{padding:16px 10px 32px}
    .auth-card{padding:16px}
    .topbar{padding:8px 10px 8px 52px}
    .data-table tr{padding:14px}
    .modal{padding:16px}
    .heading-lg{font-size:20px}
    .heading-md{font-size:18px}
}

/* ── Coarse-pointer (touch) tweaks regardless of width ─────────── */
@media(hover:none) and (pointer:coarse){
    .card-hover:hover{transform:none;box-shadow:none;border-color:var(--border)}
    .btn-primary:hover{transform:none;box-shadow:none}
    .sidebar-link{padding:12px 14px}
    /* Tap feedback instead of hover */
    .btn:active{transform:scale(.98);transition:transform .1s}
}

/* ── Reduced-motion preference ─────────────────────────────────── */
@media(prefers-reduced-motion:reduce){
    *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
    .search-filters{transition:none}
}

/* ═══════════════════════════════════════════════════════════════════
   ANIMATION LAYER (added 2026-04-14, second pass)
   — Hover effects gated behind (hover:hover) to prevent sticky-hover on touch
   — All motion on transform/opacity only (per ui-animation skill)
   — Enter curve: cubic-bezier(0.22, 1, 0.36, 1)
   — Move curve: cubic-bezier(0.25, 1, 0.5, 1)
   ═══════════════════════════════════════════════════════════════════ */

/* --- 1. Eliminate 300ms tap delay + native momentum scroll on iOS --- */
a,button,input,select,textarea,[role="button"],.clickable,.btn,.sidebar-link,.nav-link,.reveal-btn{touch-action:manipulation}
.search-filters,.modal-body,.table-wrap,.sidebar,.app-content{-webkit-overflow-scrolling:touch}
/* Subtle overscroll bounce feel on scroll containers (iOS native, polyfill via CSS) */
.app-content,.search-results{overscroll-behavior-y:contain}

/* --- 2. Hidden-until-revealed base state for JS-driven entries ------
   STRATEGY: elements are VISIBLE BY DEFAULT. They only hide when ALL of:
     (1) html.js-ready is set (the inline head script ran successfully)
     (2) .revealed is NOT yet on the element (GSAP hasn't completed its tween)
   If JS is disabled, fails, or app.js isn't loaded → .js-ready may be set
   but nothing hides because rules (1)+(2) require .js-ready AND target+anim.
   If everything works → elements hide briefly, animate in, get .revealed,
   and the hide rule stops matching → visible again permanently.
   The forceShow safety net is STILL there as last resort (animation at t=3s).
*/
/* Explicit default: visible. Prevents any cascade accident from hiding content. */
[data-reveal],[data-scroll-reveal],[data-scroll-stagger] > *{opacity:1;transform:none}

/* Hide only when JS is ready AND animation hasn't completed */
html.js-ready [data-reveal]:not(.revealed){opacity:0;transform:translateY(16px);will-change:transform,opacity}

@keyframes forceShowReveal{
    to{opacity:1;transform:none}
}
/* Safety net: force-show at t=3s if .revealed never got added for any reason */
html.js-ready [data-reveal]:not(.revealed),
html.js-ready [data-scroll-reveal]:not(.revealed),
html.js-ready [data-scroll-stagger] > *:not(.revealed){
    animation:forceShowReveal 0s 3s forwards
}

/* --- 3. Link underline slide-in (only on fine pointers) ------------- */
@media(hover:hover) and (pointer:fine){
    .nav-link,.footer-legal{position:relative}
    .nav-link::after,.footer-legal::after{
        content:'';position:absolute;left:0;bottom:-2px;height:2px;width:100%;
        background:currentColor;
        transform:scaleX(0);transform-origin:left;
        transition:transform .24s cubic-bezier(0.22,1,0.36,1)
    }
    .nav-link:hover::after,.footer-legal:hover::after{transform:scaleX(1)}
}

/* --- 4. Button hover + press feedback (subtle translateY, no scale) ---- */
.btn{transition:transform .2s ease,box-shadow .2s ease,background-color .2s ease,border-color .2s ease,opacity .2s ease}
@media(hover:hover) and (pointer:fine){
    .btn-primary:hover{transform:translateY(-1px);box-shadow:0 6px 18px rgba(99,91,255,.28)}
    .btn-ghost:hover{transform:translateY(-1px);box-shadow:0 4px 12px rgba(0,0,0,.18)}
    .btn-danger:hover{transform:translateY(-1px)}
    .btn-icon:hover{background:var(--surface-hover)}
}
.btn:active{transform:translateY(0);transition-duration:.1s}

/* --- 5. Card hover lift (cards only, not rows) ------------------ */
@media(hover:hover) and (pointer:fine){
    .card-hover:hover{transform:translateY(-4px);box-shadow:0 12px 40px rgba(99,91,255,.15);border-color:var(--border-hover)}
    .stat-card:hover{transform:translateY(-2px);border-color:var(--border-hover)}
    .pricing-card:hover{transform:translateY(-4px);box-shadow:0 16px 48px rgba(0,0,0,.3)}
    .credit-pack-card:hover{transform:translateY(-2px);border-color:var(--border-hover)}
    /* Recommended cards keep the gradient border on hover — don't let the generic
       hover rule above swap border-color (would override the background-clip trick). */
    .pricing-card.recommended:hover,
    .credit-pack-card.recommended-pack:hover{border-color:transparent;box-shadow:0 16px 48px rgba(99,91,255,.28)}
    /* Search result rows — subtle background-color change only, NO transform or shadow */
    .data-table tbody tr{transition:background-color .15s ease}
    .data-table tbody tr:hover{background-color:rgba(255,255,255,.03)}
}

/* --- 6. Sidebar link hover — simple colour change + active accent bar ------ */
.sidebar-link{position:relative;overflow:hidden;transition:color .2s,background-color .2s}
.sidebar-link::before{
    content:'';position:absolute;left:0;top:0;bottom:0;width:3px;
    background:linear-gradient(180deg,var(--primary),var(--secondary));
    transform:scaleY(0);transform-origin:center;
    transition:transform .2s ease
}
@media(hover:hover) and (pointer:fine){
    .sidebar-link:hover::before{transform:scaleY(1)}
}
.sidebar-link.active::before{transform:scaleY(1)}

/* --- 7. Credit balance pulse (triggered via JS class toggle) ------- */
@keyframes creditPulse{
    0%{transform:scale(1)}
    40%{transform:scale(1.18);color:var(--success)}
    100%{transform:scale(1);color:var(--primary)}
}
#topbarCredits.is-pulsing,#creditDisplay.is-pulsing{animation:creditPulse .6s cubic-bezier(0.22,1,0.36,1);display:inline-block}

/* --- 8. Skeleton loading — enhanced shimmer for results area ----- */
.skeleton-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);padding:16px;margin-bottom:12px}
.skeleton-line{background:linear-gradient(90deg,rgba(255,255,255,.04) 25%,rgba(255,255,255,.08) 50%,rgba(255,255,255,.04) 75%);background-size:200% 100%;animation:skelShimmer 1.4s ease-in-out infinite;border-radius:6px;height:12px;margin-bottom:10px}
.skeleton-line.sk-title{height:16px;width:60%;margin-bottom:12px}
.skeleton-line.sk-mid{width:80%}
.skeleton-line.sk-short{width:40%;margin-bottom:0}
.skeleton-line.sk-btn{height:40px;margin-top:14px;border-radius:var(--radius)}
@keyframes skelShimmer{0%{background-position:200% 0}100%{background-position:-200% 0}}

/* --- 9. Toast enter/exit — spring-ish curve via CSS -------------- */
.toast{transform:translateX(calc(100% + 24px));opacity:0;transition:transform .42s cubic-bezier(0.34,1.56,0.64,1),opacity .28s ease}
.toast.toast-in{transform:translateX(0);opacity:1}
.toast.toast-out{transform:translateX(calc(100% + 24px));opacity:0;transition:transform .28s cubic-bezier(0.4,0,1,1),opacity .2s ease}

/* --- 10. Copy-to-clipboard flash (utility class) ---------------- */
@keyframes copyFlash{
    0%{background-color:transparent}
    30%{background-color:rgba(74,222,128,.2);box-shadow:0 0 0 2px rgba(74,222,128,.4)}
    100%{background-color:transparent;box-shadow:0 0 0 0 transparent}
}
.copy-flash{animation:copyFlash .7s cubic-bezier(0.22,1,0.36,1);border-radius:var(--radius)}

/* --- 11. Modal enter/exit animation ----------------------------- */
.modal-overlay{opacity:0;transition:opacity .22s ease}
.modal-overlay[style*="flex"]{animation:modalOverlayIn .22s ease forwards}
@keyframes modalOverlayIn{to{opacity:1}}
.modal-overlay .modal{transform:translateY(12px) scale(.96);opacity:0;animation:modalIn .32s cubic-bezier(0.22,1,0.36,1) forwards .04s}
@keyframes modalIn{to{transform:translateY(0) scale(1);opacity:1}}

/* --- 12. Filter panel slide-up — smoother spring on open -------- */
@media(max-width:1023px){
    .search-filters{transition:transform .42s cubic-bezier(0.22,1,0.36,1),visibility 0s .42s}
    .search-filters.open{transition:transform .42s cubic-bezier(0.22,1,0.36,1),visibility 0s}
}

/* --- 13. Filter field stagger (set by app.js on open) ----------- */
.search-filters.is-staggering .form-group{opacity:0;transform:translateY(12px)}
.search-filters.is-staggering.open .form-group{animation:fieldIn .38s cubic-bezier(0.22,1,0.36,1) forwards}
.search-filters.is-staggering.open .form-group:nth-child(1){animation-delay:.08s}
.search-filters.is-staggering.open .form-group:nth-child(2){animation-delay:.13s}
.search-filters.is-staggering.open .form-group:nth-child(3){animation-delay:.18s}
.search-filters.is-staggering.open .form-group:nth-child(4){animation-delay:.23s}
.search-filters.is-staggering.open .form-group:nth-child(5){animation-delay:.28s}
.search-filters.is-staggering.open .form-group:nth-child(6){animation-delay:.33s}
.search-filters.is-staggering.open .form-group:nth-child(7){animation-delay:.38s}
.search-filters.is-staggering.open .form-group:nth-child(8){animation-delay:.43s}
@keyframes fieldIn{to{opacity:1;transform:translateY(0)}}

/* --- 14. Backdrop animated fade-in ------------------------------- */
.search-filters-backdrop{opacity:0;transition:opacity .24s ease}
.search-filters-backdrop.open{opacity:1}

/* --- 15. Result card entry stagger (set by search.js) ----------- */
.data-table tr.result-enter{opacity:0;transform:translateY(14px)}
.data-table tr.result-enter.result-in{opacity:1;transform:translateY(0);transition:opacity .42s cubic-bezier(0.22,1,0.36,1),transform .42s cubic-bezier(0.22,1,0.36,1)}

/* --- 16. Spinner — smoother with GPU transform ------------------ */
.spinner{transform:translateZ(0);will-change:transform}

/* --- 17. Focus-visible (accessibility — keyboard-only ring) ----- */
:focus-visible{outline:2px solid var(--primary);outline-offset:2px;border-radius:4px}
button:focus-visible,a:focus-visible,.btn:focus-visible{outline:2px solid var(--secondary);outline-offset:3px}
input:focus-visible,select:focus-visible,textarea:focus-visible{outline:none;border-color:var(--primary);box-shadow:0 0 0 3px rgba(99,91,255,.25)}

/* --- 18/19. REMOVED — badge hover and rating-glow removed per simplification pass. --- */

/* --- 20. Pricing toggle micro-anim ------------------------------ */
.toggle-track{transition:border-color .22s,box-shadow .22s}
@media(hover:hover) and (pointer:fine){
    .toggle-track:hover{border-color:var(--border-hover);box-shadow:0 0 0 3px rgba(99,91,255,.1)}
}

/* --- 21. Password-toggle button micro-feedback ------------------- */
.password-toggle:active{transform:scale(.9);transition-duration:.08s}

/* --- 22. Checkbox tap feedback ---------------------------------- */
input[type="checkbox"]:active{transform:scale(.88);transition:transform .1s}

/* --- 23. Bigger reduced-motion kill + GSAP neutralization ------- */
@media(prefers-reduced-motion:reduce){
    [data-reveal]{opacity:1!important;transform:none!important}
    [data-scroll-reveal],[data-scroll-stagger] > *{opacity:1!important;transform:none!important}
    .toast{transform:none!important;opacity:1!important}
    .search-filters.is-staggering .form-group,
    .search-filters.is-staggering.open .form-group{opacity:1!important;transform:none!important;animation:none!important}
    .data-table tr.result-enter{opacity:1!important;transform:none!important}
    .modal-overlay .modal{animation:none!important;transform:none!important;opacity:1!important}
    #topbarCredits.is-pulsing,#creditDisplay.is-pulsing{animation:none!important}
    .claim-cta-card[data-claim-glow]::before{animation:none!important}
    .recommended-float{animation:none!important}
}

/* ═══════════════════════════════════════════════════════════════════
   SECOND POLISH PASS (2026-04-14) — bug fixes + premium feel
   ═══════════════════════════════════════════════════════════════════ */

/* ── A. FOOTER — two-row stack on mobile, no overflow ────────── */
.footer-links{display:flex;gap:20px;font-size:13px;color:var(--text-muted);flex-wrap:wrap}
.footer-links-row{display:flex;gap:20px;flex-wrap:wrap;align-items:center}
.footer-links-row-legal{gap:14px}
@media(max-width:768px){
    .footer{padding:20px 16px;padding-bottom:max(20px,env(safe-area-inset-bottom))}
    .footer-inner{flex-direction:column;gap:14px;padding:0;text-align:center}
    .footer-brand{justify-content:center}
    .footer-links{flex-direction:column;align-items:center;gap:10px;width:100%}
    .footer-links-row{justify-content:center;gap:8px 18px;row-gap:6px;flex-wrap:wrap;width:100%;padding:0 8px}
    .footer-links-row-legal{border-top:1px solid var(--border);padding-top:10px}
    .footer-links a{font-size:13px;padding:4px 2px;min-height:30px;display:inline-flex;align-items:center}
}
@media(max-width:767px){
    .footer-app-links{flex-direction:column;gap:4px;line-height:1.6}
    .footer-app-links .footer-sep{display:none}
    .footer-app-links a{padding:8px 0;min-height:40px;display:flex;align-items:center;justify-content:center}
}

/* ── B. MOBILE INLINE SEARCH BAR ──────────────────────────────── */
.mobile-search-bar{display:none}
@media(max-width:1023px){
    .mobile-search-bar{
        display:block;
        background:linear-gradient(180deg,var(--surface) 0%,rgba(14,19,38,.9) 100%);
        border:1px solid var(--border);
        border-radius:var(--radius-lg);
        padding:14px;
        margin-bottom:16px;
        box-shadow:inset 0 1px 0 rgba(255,255,255,.04),0 2px 8px rgba(0,0,0,.2)
    }
    .msb-row{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:10px}
    .msb-row input{min-height:44px;padding:10px 12px;font-size:15px}
    .msb-actions{display:flex;flex-direction:column;gap:6px}
    .msb-actions .btn-primary{min-height:48px;font-size:15px;font-weight:600}
    .msb-more{background:transparent;color:var(--text-secondary);min-height:38px;padding:6px 12px;font-size:13px;border:1px dashed rgba(255,255,255,.1)}
    .msb-more:hover{border-color:var(--border-hover);color:var(--text)}
}
@media(max-width:380px){
    .msb-row{grid-template-columns:1fr;gap:8px}
}

/* ── C. LANDING: CLAIM CARD — no glow overflow + glassmorphism + pulse ── */
.claim-cta-card{
    position:relative;
    background:rgba(14,19,38,.6);
    backdrop-filter:blur(20px);
    -webkit-backdrop-filter:blur(20px);
    overflow:visible;
    margin:0 16px  /* mobile inset to keep glow inside viewport */
}
@media(min-width:768px){
    .claim-cta-card{margin:0}
}
.claim-cta-card[data-claim-glow]::before{
    content:'';position:absolute;inset:-1px;
    border-radius:inherit;
    padding:1px;
    background:linear-gradient(135deg,rgba(99,91,255,.6),rgba(0,212,255,.6));
    -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
    -webkit-mask-composite:xor;
            mask-composite:exclude;
    pointer-events:none;
    opacity:.5;
    animation:claimGlowPulse 3s ease-in-out infinite
}
@keyframes claimGlowPulse{
    0%,100%{opacity:.4}
    50%{opacity:.85}
}
/* Consistent checkmark list on mobile */
.claim-features-stack{display:flex;flex-direction:column;gap:10px;margin:20px 0;padding:0;list-style:none}
.claim-features-stack li{
    display:flex;align-items:flex-start;gap:10px;
    font-size:14px;color:var(--text-secondary);line-height:1.5;
    padding-left:0
}
.claim-features-stack li svg{flex-shrink:0;margin-top:2px;color:var(--success)}
@media(min-width:768px){
    .claim-features-stack{display:flex;flex-direction:row;flex-wrap:wrap;justify-content:center;gap:16px 20px}
    .claim-features-stack li{font-size:15px}
}

/* ── D. LANDING: SECTION HEADING with gradient accent line ──── */
.section-heading{position:relative;padding-top:16px}
.section-heading::before{
    content:'';position:absolute;top:0;left:50%;transform:translateX(-50%);
    width:40px;height:2px;border-radius:2px;
    background:linear-gradient(90deg,var(--primary),var(--secondary))
}

/* ── E. SCROLL-REVEAL initial hidden state (GSAP animates on viewport enter) ──
   Same `:not(.revealed)` gate as [data-reveal] — see section 2 comment.
*/
html.js-ready [data-scroll-reveal]:not(.revealed){opacity:0;transform:translateY(40px);will-change:transform,opacity}
html.js-ready [data-scroll-stagger] > *:not(.revealed){opacity:0;transform:translateY(32px);will-change:transform,opacity}
[data-counter-to]{font-variant-numeric:tabular-nums}

/* ── F. LANDING STATS — bigger + tabular-nums for aligned digits ── */
.stat-big{font-variant-numeric:tabular-nums;letter-spacing:-.02em}
@media(min-width:768px){
    .stats-row{gap:48px}
}

/* ── G. PRIMARY BUTTON — gradient position shift on hover (subtle) ── */
.btn-primary{background:linear-gradient(135deg,var(--primary) 0%,var(--secondary) 50%,var(--primary) 100%);background-size:200% 100%;background-position:0% 0%;transition:background-position .35s ease,transform .2s ease,box-shadow .2s ease}
@media(hover:hover) and (pointer:fine){
    .btn-primary:hover{background-position:100% 0%;transform:translateY(-1px);box-shadow:0 8px 24px rgba(99,91,255,.3)}
}

/* ── H. SECONDARY BUTTON — subtle accent border on hover ──────── */
@media(hover:hover) and (pointer:fine){
    .btn-ghost:hover{border-color:rgba(0,212,255,.35);color:var(--secondary)}
}

/* ── I. DEPTH — very subtle grain overlay on dark background ── */
body::before{
    content:'';position:fixed;inset:0;pointer-events:none;z-index:0;
    background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='1' stitchTiles='stitch'/></filter><rect width='100' height='100' filter='url(%23n)' opacity='0.22'/></svg>");
    opacity:.04;
    mix-blend-mode:overlay
}
body > *{position:relative;z-index:1}

/* ── J. LAYERED SURFACES — inner top highlight on key cards ── */
.card,.pricing-card,.step-card,.stat-card,.credit-pack-card,.auth-card{
    box-shadow:inset 0 1px 0 rgba(255,255,255,.04),0 1px 2px rgba(0,0,0,.1)
}

/* ── K. RECOMMENDED CARDS — float animation REMOVED so equal-height grid
       behaves predictably and the gradient border stays static under the
       (subtle) box-shadow. The gradient border + soft glow already draws
       enough attention without the bounce. ───────────────────────── */

/* ── L. HERO GRADIENT TEXT clean-up (prevent blurry render on some devices) ── */
.hero-title .gradient-text{display:inline-block}

/* ── M. Duplicate data-reveal rule removed (see section 2 for the canonical one with :not(.revealed) gate) ── */

/* ── N. Safe-area bottom for final content blocks (overscroll-behavior
       kept OFF html/body — it breaks wheel scroll on some browsers.
       Applied only to scroll containers below). ─────────────────── */
.app-content,.landing{padding-bottom:max(24px,env(safe-area-inset-bottom))}
.search-filters,.sidebar,.modal,.modal-body{overscroll-behavior:contain}

/* ── O. LANDING HERO — tighter mobile spacing + punchier typography ── */
@media(max-width:767px){
    .hero{padding:56px 16px 40px}
    .hero-title{font-size:clamp(30px,7.5vw,42px);line-height:1.15;margin-bottom:16px}
    .hero-subtitle{font-size:15px;margin-bottom:24px}
    .hero-ctas{gap:10px}
    .hero-ctas .btn-lg{padding:14px 20px;font-size:15px}
    .section{padding:48px 16px}
    .heading-xl{font-size:clamp(24px,6.5vw,32px)}
    .step-card{text-align:center;padding:20px;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg)}
    .step-icon{margin:0 auto 12px;width:48px;height:48px}
    .step-icon svg{width:24px;height:24px}
    .step-num{font-size:12px;text-transform:uppercase;letter-spacing:.08em}
    .step-card h3{font-size:17px;margin-bottom:6px}
    .step-card p.text-secondary{font-size:14px}
    .stats-row{gap:20px}
    .stat-big{font-size:32px}
    .claim-cta-card{padding:24px 20px;margin:0 16px}
    .claim-cta-card .heading-xl{font-size:24px}
    .claim-cta-card .text-lg{font-size:15px}
    .claim-cta-card .btn-lg{width:100%;padding:14px 20px;font-size:15px}
    /* Demo table on landing — show FULL desktop layout with horizontal scroll.
       This overrides the generic mobile card-transform for .data-table, scoped
       to .demo-table-card only. Real search results keep the card layout. */
    .demo-table-card{overflow:hidden;position:relative;margin:0}
    .demo-search-bar{padding:12px;gap:8px}
    .demo-chip{font-size:12px;padding:6px 10px}

    /* The scroll container */
    .demo-table-card .table-wrap{
        overflow-x:auto;
        -webkit-overflow-scrolling:touch;
        border:none;background:transparent;padding:0
    }

    /* Restore native table rendering (card-transform earlier made everything display:block) */
    .demo-table-card .data-table{display:table;width:100%;min-width:680px;font-size:13px}
    .demo-table-card .data-table thead{display:table-header-group;position:static;top:auto;left:auto}
    .demo-table-card .data-table tbody{display:table-row-group}
    .demo-table-card .data-table tr{
        display:table-row;width:auto;margin:0;padding:0;
        background:inherit;border:none;border-radius:0;box-shadow:none;position:static
    }
    .demo-table-card .data-table tr.row-alt{background:rgba(7,11,23,.3)}
    .demo-table-card .data-table th,
    .demo-table-card .data-table td{
        display:table-cell;width:auto;
        padding:10px 12px;margin:0;
        font-size:13px;line-height:1.45;
        text-align:left;white-space:nowrap;
        border:none
    }
    .demo-table-card .data-table th{
        padding:12px;color:var(--text-muted);font-weight:500;
        border-bottom:1px solid var(--border)
    }
    .demo-table-card .data-table td{border-bottom:1px solid rgba(255,255,255,.04)}
    .demo-table-card .data-table td::before{display:none}
    /* Bring back every column — this is the product showcase, show all of it */
    .demo-table-card .data-table .hide-xs,
    .demo-table-card .data-table .hide-sm,
    .demo-table-card .data-table .hide-md{display:table-cell!important}
}

/* ═══════════════════════════════════════════════════════════════════
   PHASE 7 — per-page mobile polish (dashboard, listák, sajat-ceg,
   ceg-regisztracio, settings, auth pages, verify, lista). All scoped
   ≤767px. Desktop untouched.
   ═══════════════════════════════════════════════════════════════════ */
@media(max-width:767px){
    /* ── DASHBOARD ─────────────────────────────────────────────── */
    /* Claim banner: tighter & wrap label */
    .claim-banner{padding:12px;gap:10px;flex-wrap:wrap;align-items:flex-start}
    .claim-banner > svg{flex-shrink:0}
    .claim-banner p{font-size:13px;line-height:1.5;margin:0}
    .claim-banner-close{margin-left:auto;min-width:32px;min-height:32px;display:inline-flex;align-items:center;justify-content:center}
    /* Chart compactness on narrow screens */
    .chart-bars{height:96px;gap:3px}
    .chart-label{font-size:9px}
    /* Recent searches list: subtle padding so taps don't fight neighbours */
    .recent-item{padding:12px;min-height:56px}
    .recent-item p.fw-500{font-size:14px}
    .recent-item p.text-xs{font-size:11px;margin-top:2px}
    /* Stats card: bigger numbers, breathing room */
    .stat-value{font-size:22px}
    .stat-label{font-size:12px}

    /* ── LISTÁK / LISTA ────────────────────────────────────────── */
    /* "Mentett Listák" header + "Új lista" button — stack on mobile to avoid overflow */
    .max-w-4xl > .flex-between:first-child,
    .max-w-3xl > .flex-between:first-child,
    .max-w-5xl > .flex-between:first-child{
        flex-direction:column;align-items:stretch;gap:12px
    }
    .max-w-4xl > .flex-between:first-child .btn,
    .max-w-3xl > .flex-between:first-child .btn,
    .max-w-5xl > .flex-between:first-child .btn{width:100%;justify-content:center}
    /* List card density */
    .card.p-5.card-hover .heading-sm,
    .card.p-5.card-hover h3{font-size:15px}
    .card.p-5 > .flex-between{align-items:flex-start;gap:8px}

    /* ── SAJAT-CEG ──────────────────────────────────────────────── */
    /* Header pair (cégnév + verifikált badge + reg. date) — give it breathing room */
    .card.p-6 > .flex.gap-3{flex-wrap:wrap;gap:8px}
    /* Long form: more space between sections */
    .card.p-6{padding:18px}
    .card.p-6 + .card.p-6{margin-top:14px}

    /* ── CEG-REGISZTRACIO ──────────────────────────────────────── */
    /* Section card icons should not push the heading off the line */
    .card.p-6 .heading-sm{display:flex;align-items:center;flex-wrap:wrap;gap:6px;font-size:15px}
    .card.p-6 .heading-sm svg{flex-shrink:0}
    /* Long-form submit area — sticky-feeling generous spacing */
    .card.p-6:last-of-type{padding:18px}

    /* ── BEALLITASOK (settings) ─────────────────────────────────── */
    /* Section spacing in a long settings page */
    .max-w-3xl > .card,
    .max-w-3xl > section.card{margin-bottom:14px;padding:18px}
    /* Mentés button full-width on mobile */
    .max-w-3xl form .btn-primary,
    .max-w-3xl form .btn:not(.btn-sm){width:100%;justify-content:center;min-height:48px;margin-top:8px}
    /* Danger zone clearly separated */
    .danger-zone{border-left-width:4px;padding:18px}
    .danger-zone .btn-danger{width:100%;justify-content:center;min-height:44px}

    /* ── AUTH PAGES (login/register/forgot/reset/verify) ──────── */
    .auth-page{padding:32px 14px 40px;justify-content:flex-start}
    .auth-card{padding:22px;width:100%}
    .auth-title{font-size:22px;margin-bottom:6px}
    .auth-subtitle{font-size:13px;margin-bottom:20px}
    .auth-form .form-group{margin-bottom:14px}
    .auth-form input{min-height:48px}
    .auth-form .btn-lg{min-height:50px;width:100%;font-size:15px}
    .auth-form .flex-between{flex-wrap:wrap;gap:8px}
    .auth-footer-text{font-size:13px;margin-top:18px}
    /* Background blobs eat CPU on phones — soften */
    .bg-blob{filter:blur(80px);opacity:.6}

    /* ── VERIFY / VERIFY-REMINDER ──────────────────────────────── */
    /* Same auth-style cards work; just tighten banner-style notices */
    .alert{padding:12px 14px;font-size:13px;line-height:1.5}

    /* ── PRICING TOGGLE (Havi / Éves) ──────────────────────────── */
    /* Wider tap target for the toggle on touch */
    .interval-toggle{gap:14px;flex-wrap:wrap;justify-content:center}
    .toggle-track{width:52px;height:28px;border-radius:14px}
    .toggle-thumb{width:22px;height:22px}
    .toggle-thumb.active{transform:translateX(26px)}
    .interval-label{font-size:14px}

    /* ── BILLING MODAL on mobile (inside arak.php) ────────────── */
    .billing-modal .modal{max-width:none;border-radius:var(--radius-lg)}
    .billing-modal .modal-body{max-height:calc(100dvh - 100px);padding-right:2px}
    .invoice-toggle{padding:12px;gap:8px}
    .invoice-toggle .toggle-label{font-size:13px}
    .invoice-toggle .toggle-hint{font-size:11px}
    .billing-summary{font-size:12px;flex-wrap:wrap}

    /* ── PRICING LEGAL NOTE ─────────────────────────────────────── */
    .pricing-legal-note{padding:0 12px;line-height:1.55}

    /* ── DELETE ACCOUNT MODAL ──────────────────────────────────── */
    /* The deletion modal can be tall — ensure it scrolls on small screens */
    #deleteAccountModal .modal{max-width:none;max-height:calc(100dvh - 32px);overflow-y:auto}
    .delete-list{font-size:12px;padding-left:0}
    .delete-list li{padding-left:18px}

    /* ── GENERIC: any inline alert message inside a tight section ── */
    .alert-error,.alert-success,.alert-warning{margin-bottom:14px}
}

/* ── P. ENSURE RESULT ROW ENTER STATE visible only on first page load ── */
.data-table tr{opacity:1;transform:none}

/* ── Q. KEEP FILTERS backdrop above everything when open ──────── */
.search-filters-backdrop{z-index:58}
.search-filters{z-index:60}

/* ── R. MOBILE-ONLY CELL (Iparág pill, added from search.js) ─── */
@media(min-width:768px){.data-table td.mobile-only-cell{display:none}}
@media(max-width:767px){
    .data-table td[data-label="Iparág"]{
        display:inline-flex;align-items:center;gap:6px;width:auto;
        padding:4px 10px;border-radius:999px;
        background:rgba(99,91,255,.1);border:1px solid rgba(99,91,255,.25);
        color:var(--primary);font-size:12px;font-weight:500;
        margin-right:6px;margin-bottom:10px
    }
    .data-table td[data-label="Iparág"]::before{display:none}
}

/* ═══════════════════════════════════════════════════════════════════
   SEARCH PAGE REDESIGN — Apollo toolbar + chip system + popover +
   full-screen mobile sheet (Fix 1 + Fix 3).
   Brand: #0A0E1A bg, #635BFF primary, #00D4FF cyan. Sora/Inter.
   ═══════════════════════════════════════════════════════════════════ */

/* Neutralize old sidebar — sheet now hosts the filter form. */
.search-layout{display:block}
.search-filters{display:none !important}
.search-results{width:100%;flex:none;min-width:0}
.search-filters-backdrop{display:none !important}
.premium-overlay{display:none}

/* Page wrapper */
.search-page{max-width:1280px;margin:0 auto}
.search-page-header{margin-bottom:20px}
.search-subtitle{margin-top:4px;font-size:14px}

/* Utility: desktop-only class (counterpart to .lg-hidden) */
.lg-only{display:none}
@media (min-width:1024px){
    .lg-only{display:block}
}

/* ─── Toolbar (desktop ≥1024px) ─── */
.search-toolbar{
    background:rgba(18,22,39,.5);
    border:1px solid var(--border);
    border-radius:14px;
    padding:14px;
    margin-bottom:16px;
    -webkit-backdrop-filter:blur(12px);
    backdrop-filter:blur(12px);
}
.search-toolbar-main{display:flex;gap:12px;align-items:stretch}
.toolbar-input{
    flex:1;height:48px;padding:0 14px;
    background:rgba(10,14,26,.6);
    border:1px solid var(--border);
    border-radius:10px;color:var(--text);
    font-size:15px;font-family:inherit;
    transition:border-color .2s,box-shadow .2s;
}
.toolbar-input:focus{outline:none;border-color:var(--primary);box-shadow:0 0 0 3px rgba(99,91,255,.18)}
.search-toolbar-main .toolbar-input:first-child{flex:1.3}
.toolbar-search-btn{
    display:inline-flex;align-items:center;gap:8px;
    height:48px;padding:0 22px;white-space:nowrap;
    font-weight:600;border-radius:10px;
}

/* ─── Chip row ─── */
.search-toolbar-chips{
    display:flex;flex-wrap:wrap;gap:8px;
    margin-top:12px;
}
.chip{
    position:relative;
    display:inline-flex;align-items:center;gap:6px;
    height:34px;padding:0 12px;
    background:rgba(10,14,26,.6);
    border:1px solid var(--border);
    border-radius:999px;
    color:var(--text-secondary);
    font-size:13px;font-family:inherit;
    cursor:pointer;
    transition:border-color .18s,background .18s,color .18s;
}
.chip:hover{border-color:var(--border-strong,rgba(255,255,255,.2));color:var(--text)}
.chip:focus-visible{outline:2px solid var(--primary);outline-offset:2px}
.chip svg{flex-shrink:0}
.chip .chip-label{font-weight:500}
.chip .chip-sep{color:var(--text-muted);opacity:.7}
.chip .chip-value{color:var(--text-muted)}
.chip .chip-caret{color:var(--text-muted);margin-left:2px}

/* Active state — a filter is set */
.chip.chip-active{
    background:rgba(99,91,255,.12);
    border-color:rgba(99,91,255,.5);
    color:var(--text);
}
.chip.chip-active .chip-value{color:var(--primary);font-weight:600}
.chip.chip-active .chip-sep{opacity:1}

/* Toggle chip (Csak kontakttal) — no popover, no value */
.chip.chip-toggle{padding-right:14px}
.chip.chip-toggle-on{
    background:rgba(99,91,255,.15);
    border-color:rgba(99,91,255,.6);
    color:var(--text);
}
.chip.chip-toggle-on svg:first-child{color:var(--primary)}

/* Business chip — locked state (free user) */
.chip.chip-business-badge,
.chip-business-badge{
    display:inline-flex;align-items:center;
    padding:2px 8px;margin-left:2px;
    background:linear-gradient(135deg,#635BFF,#00D4FF);
    color:#fff;font-size:10px;font-weight:700;
    border-radius:999px;letter-spacing:.03em;
}
.chip.chip-locked{opacity:.75}
.chip.chip-locked:hover{opacity:1}
.chip.chip-locked .chip-value{color:var(--text-muted)}

/* ─── Active filter pills row ─── */
.search-active-filters{
    display:flex;flex-wrap:wrap;gap:8px;align-items:center;
    margin-top:10px;padding-top:10px;
    border-top:1px solid var(--border);
}
.search-active-filters-label{font-size:12px;color:var(--text-muted);margin-right:4px}
.search-active-filters-list{display:flex;flex-wrap:wrap;gap:6px;flex:1;min-width:0}
.active-pill{
    display:inline-flex;align-items:center;gap:6px;
    height:26px;padding:0 10px;
    background:rgba(99,91,255,.18);
    border:1px solid rgba(99,91,255,.4);
    border-radius:999px;color:var(--text);
    font-size:12px;font-family:inherit;cursor:pointer;
    transition:background .15s;
}
.active-pill:hover{background:rgba(99,91,255,.28)}
.active-pill svg{color:rgba(255,255,255,.6)}
.active-pill:hover svg{color:#fff}
.search-active-filters-clear{
    background:none;border:none;
    color:var(--text-muted);font-size:12px;
    text-decoration:underline;cursor:pointer;
    padding:2px 4px;font-family:inherit;
}
.search-active-filters-clear:hover{color:var(--text)}

/* ─── Popover (anchored under chip — desktop) ─── */
.popover{
    position:absolute;z-index:80;
    background:rgba(18,22,39,.98);
    border:1px solid var(--border);
    border-radius:12px;
    box-shadow:0 12px 36px rgba(0,0,0,.5);
    -webkit-backdrop-filter:blur(16px);
    backdrop-filter:blur(16px);
    animation:popIn .18s ease forwards;
    padding:12px;
    min-width:240px;max-height:360px;overflow-y:auto;
}
.popover.above{animation:popInAbove .18s ease forwards}
.popover[hidden]{display:none !important}
.popover-header{
    display:flex;align-items:center;gap:8px;
    padding:0 0 10px 0;margin-bottom:8px;
    border-bottom:1px solid var(--border);
    font-size:14px;
}
.popover-options{display:flex;flex-direction:column;gap:2px;max-height:260px;overflow-y:auto}
.popover-option{
    display:flex;align-items:center;gap:10px;
    padding:8px 10px;border-radius:8px;
    cursor:pointer;font-size:14px;color:var(--text);
    transition:background .12s;
}
.popover-option:hover{background:rgba(99,91,255,.1)}
.popover-option input[type="radio"]{accent-color:var(--primary);cursor:pointer}

.popover-header-business{flex-direction:row-reverse;justify-content:flex-start}
.popover-upgrade-body{display:flex;flex-direction:column;gap:10px;padding:4px 0}
.popover-upgrade-cta{
    display:inline-flex !important;align-items:center;gap:6px;justify-content:center;
    text-decoration:none;
}

@keyframes popIn{
    from{opacity:0;transform:translateY(-4px)}
    to{opacity:1;transform:translateY(0)}
}
@keyframes popInAbove{
    from{opacity:0;transform:translateY(4px)}
    to{opacity:1;transform:translateY(0)}
}

/* ─── Mobile filter sheet (Fix 1) ─── */
/* Full-screen slide-up modal. NO filter:blur() — business filters are visible but dim (opacity:0.55). */
.filter-sheet{
    position:fixed;inset:0;z-index:90;
    display:none;
}
.filter-sheet:not([hidden]){display:block}
.filter-sheet-backdrop{
    position:absolute;inset:0;
    background:rgba(0,0,0,.55);
    opacity:0;transition:opacity .3s;
}
.filter-sheet.open .filter-sheet-backdrop{opacity:1}
.filter-sheet-panel{
    position:absolute;
    left:0;right:0;bottom:0;
    max-height:92vh;
    display:flex;flex-direction:column;
    background:rgba(10,14,26,.98);
    border-top:1px solid var(--border);
    border-radius:16px 16px 0 0;
    -webkit-backdrop-filter:blur(16px);
    backdrop-filter:blur(16px);
    transform:translateY(100%);
    transition:transform .35s cubic-bezier(.22,1,.36,1);
}
.filter-sheet.open .filter-sheet-panel{transform:translateY(0)}
.filter-sheet-header{
    position:sticky;top:0;
    display:flex;align-items:center;justify-content:space-between;
    height:56px;padding:0 16px;
    background:rgba(10,14,26,.98);
    border-bottom:1px solid var(--border);
    z-index:2;
}
.filter-sheet-close{
    width:40px;height:40px;
    display:inline-flex;align-items:center;justify-content:center;
    background:none;border:none;color:var(--text);cursor:pointer;
    border-radius:8px;transition:background .15s;
}
.filter-sheet-close:hover{background:rgba(255,255,255,.08)}
.filter-sheet-body{
    flex:1;overflow-y:auto;
    padding:16px;
    display:flex;flex-direction:column;gap:14px;
}
.filter-sheet-body .form-group{margin:0}
.filter-sheet-footer{
    position:sticky;bottom:0;
    display:flex;gap:12px;align-items:center;justify-content:space-between;
    height:64px;padding:0 16px;
    background:rgba(10,14,26,.98);
    border-top:1px solid var(--border);
    z-index:2;
}
.filter-sheet-clear{
    background:none;border:none;color:var(--text-muted);
    font-size:14px;cursor:pointer;padding:8px 4px;font-family:inherit;
    text-decoration:underline;
}
.filter-sheet-clear:hover{color:var(--text)}
.filter-sheet-apply{
    display:inline-flex;align-items:center;gap:8px;
    height:44px;padding:0 22px;font-weight:600;
}

/* Business section inside sheet */
.filter-sheet-business{
    padding-top:14px;margin-top:6px;
    border-top:1px solid var(--border);
    display:flex;flex-direction:column;gap:14px;
}
.filter-sheet-business-header{
    display:flex;align-items:center;gap:10px;
    font-size:12px;color:var(--text-muted);
    text-transform:uppercase;letter-spacing:.04em;
}
.filter-sheet-business-title{font-weight:600}

/* Locked business filter — visible but dim. NO filter:blur(). */
.form-group.filter-locked{opacity:.55;position:relative}
.form-group.filter-locked select{cursor:not-allowed}
.form-group.filter-locked::after{
    content:"";position:absolute;inset:0;z-index:1;
    /* Transparent overlay captures clicks → upgrade toast */
    cursor:pointer;
}

/* ─── Quick-start preset chips (empty state) ─── */
.search-empty{padding:56px 16px 32px}
.quick-start{margin-top:28px;display:flex;flex-direction:column;align-items:center;gap:10px}
.quick-start-label{font-size:13px;color:var(--text-muted)}
.quick-start-row{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;max-width:640px}
.preset-chip{
    padding:8px 14px;
    background:rgba(18,22,39,.6);
    border:1px solid var(--border);
    border-radius:999px;
    color:var(--text);font-size:13px;font-family:inherit;
    cursor:pointer;
    transition:border-color .18s,background .18s,transform .18s;
}
.preset-chip:hover{
    border-color:rgba(99,91,255,.5);
    background:rgba(99,91,255,.12);
    transform:translateY(-1px);
}
.preset-chip:focus-visible{outline:2px solid var(--primary);outline-offset:2px}

/* ─── Responsive ─── */
@media (max-width:1023px){
    .search-toolbar{display:none}
    /* On tablet/mobile, the toolbar content lives in the sheet + mobile-search-bar */
}
@media (min-width:1024px){
    .mobile-search-bar{display:none !important}
    .filter-sheet{display:none !important}
}

/* Small-screen sheet polish */
@media (max-width:767px){
    .filter-sheet-panel{max-height:95vh}
    .filter-sheet-body{padding:14px}
    .filter-sheet-footer{padding:0 14px}
}

/* Reduced motion — instant transitions */
@media (prefers-reduced-motion:reduce){
    .filter-sheet-panel,.filter-sheet-backdrop,.popover,.chip,.active-pill,.preset-chip{
        transition:none !important;animation:none !important
    }
}

/* ───────────────────────────────────────────────────────────────
   SETTINGS PAGE LAYOUT (Fix 2 — v3 szekció-headerek 2026-04-18 este)
   ─ Mobile: single column stack, headerek megmaradnak
   ─ ≥1024px: per-row sub-grids szekció-headerekkel
       Row 1 — "Profil és hozzáférés"    (2 col): Profil │ Jelszó
       Row 2 — "Előfizetés és kreditek"  (3 col): Előfizetés │ Kredit │ Számlák
       Row 3 — "Számlázás"               (full):  Számlázási adatok
       Row 4 — "Veszélyzóna"             (full):  Fiók törlése (full-width, NEM centered 600px)
   ─ Vertikális: 48px a row-ok közt, 24px a card-ok közt (row-on belül)
   ─ Cards equal-height per row via grid `stretch` default
   ─ Action buttons a kártya aljára (flex-column + margin-top:auto)
   ─────────────────────────────────────────────────────────────── */
.settings-layout{max-width:1200px;margin:0 auto;padding:0}
.settings-title{margin-bottom:32px}
.settings-alert{margin-bottom:24px}

/* Szekció wrapper — a row és a header együtt */
.settings-section{margin-bottom:48px}
.settings-section:last-child{margin-bottom:0}

/* SPEC: Számlázási adatok — feltételes business mezők smooth megjelenés/eltűnés.
   Page load: `is-visible` class a checkbox szerver-oldali állapotából → nincs transition villanás.
   Toggle: 250ms max-height + 200ms opacity transition. */
.billing-business-fields{
    overflow:hidden;
    max-height:0;
    opacity:0;
    transition:max-height .25s ease, opacity .2s ease;
}
.billing-business-fields.is-visible{
    max-height:600px; /* elég 3 form-group-ra (~240px), + buffer ha validation error bekerülne később */
    opacity:1;
}
@media (prefers-reduced-motion:reduce){
    .billing-business-fields{transition:none}
}

/* Szekció-header tipográfia — Sora SemiBold, uppercase, tertiary text + thin divider */
.settings-section-header{
    font-family:var(--font-heading);
    font-size:13px;
    font-weight:600;
    line-height:1.3;
    text-transform:uppercase;
    letter-spacing:.08em;
    color:rgba(255,255,255,.38);
    margin:0 0 16px 0;
    padding-bottom:12px;
    border-bottom:1px solid rgba(255,255,255,.06);
}
/* Veszélyzóna szekció-header — subtle red-pink tint a témához */
.settings-section-header-danger{color:rgba(255,107,138,.55)}

/* Row-level grid — mobilon mindig 1 col; desktopon a .settings-row-N választja meg */
.settings-row{display:grid;gap:24px;grid-template-columns:1fr}

@media (min-width:1024px){
    .settings-row-2{grid-template-columns:1fr 1fr}
    .settings-row-3{grid-template-columns:1fr 1fr 1fr}
    /* .settings-row-1 már 1fr a default szabály alapján — Row 3 (Számlázási) és Row 4 (Fiók törlése) teljes container-szélességet kapnak, ami a .settings-layout max-width:1200px */

    /* Cards equal-height per row + action-button bottom alignment */
    .settings-row > section.card{
        display:flex;
        flex-direction:column;
    }
    .settings-row > section.card > form{
        display:flex;
        flex-direction:column;
        flex:1;
        margin:0;
    }
    .settings-row > section.card > form > button[type="submit"]:last-child,
    .settings-row > section.card > form > button.btn:last-child{
        margin-top:auto;
        align-self:flex-start;
    }
    .settings-row > section.card > button:last-child,
    .settings-row > section.card > a.btn:last-child{
        margin-top:auto;
        align-self:flex-start;
    }
    .settings-row > section.card > .flex:last-child{
        margin-top:auto;
        flex-wrap:wrap;
    }
}

/* ============================================
   WORKSPACE SWITCHER — Phase 0 (2026-04-27)
   ============================================ */
.ws-switcher{
    position:relative;
    font-family:var(--font-body);
    color:var(--text);
}
.ws-switcher--sidebar{display:none}
.ws-switcher__trigger{
    height:36px;
    max-width:260px;
    display:inline-flex;
    align-items:center;
    gap:8px;
    padding:0 11px;
    background:rgba(14,19,38,.92);
    border:1px solid var(--border);
    border-radius:8px;
    color:var(--text);
    cursor:pointer;
    transition:border-color .15s ease,background .15s ease,box-shadow .15s ease;
}
.ws-switcher__trigger:hover,
.ws-switcher.is-open .ws-switcher__trigger{
    border-color:rgba(99,91,255,.45);
    background:rgba(17,24,48,.96);
    box-shadow:0 0 0 3px rgba(99,91,255,.12);
}
.ws-switcher__trigger:focus-visible{
    outline:2px solid var(--primary);
    outline-offset:2px;
}
.ws-switcher__trigger-icon,
.ws-switcher__item-icon{
    width:24px;
    height:24px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    flex:0 0 auto;
    border-radius:8px;
    background:rgba(99,91,255,.14);
    color:var(--secondary);
}
.ws-switcher__trigger-text{
    min-width:0;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
    font-family:var(--font-heading);
    font-weight:800;
    font-size:13px;
    line-height:1.2;
}
.ws-switcher__caret{
    flex:0 0 auto;
    color:var(--text-muted);
    transition:transform .15s ease;
}
.ws-switcher.is-open .ws-switcher__caret{transform:rotate(180deg)}
.ws-switcher__overlay{display:none}
.ws-switcher__dropdown{
    position:absolute;
    top:calc(100% + 8px);
    right:0;
    z-index:95;
    width:320px;
    max-width:calc(100vw - 32px);
    padding:10px;
    background:rgba(10,14,26,.98);
    border:1px solid var(--border);
    border-radius:8px;
    box-shadow:0 18px 50px rgba(0,0,0,.46);
    opacity:0;
    pointer-events:none;
    transform:translateY(-4px);
    transition:opacity .15s ease,transform .15s ease;
}
.ws-switcher.is-open .ws-switcher__dropdown{
    opacity:1;
    pointer-events:auto;
    transform:translateY(0);
}
.ws-switcher__head{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px;
    padding:2px 2px 9px;
    border-bottom:1px solid var(--border);
}
.ws-switcher__title{
    font-family:var(--font-heading);
    font-weight:700;
    font-size:12px;
    text-transform:uppercase;
    letter-spacing:.08em;
    color:var(--text-muted);
}
.ws-switcher__close{
    width:30px;
    height:30px;
    display:none;
    align-items:center;
    justify-content:center;
    background:transparent;
    border:0;
    border-radius:8px;
    color:var(--text-secondary);
    cursor:pointer;
}
.ws-switcher__close:hover{background:rgba(255,255,255,.07);color:var(--text)}
.ws-switcher__list{
    display:flex;
    flex-direction:column;
    gap:3px;
    padding:8px 0;
    max-height:280px;
    overflow:auto;
}
.ws-switcher__item{
    width:100%;
    min-height:48px;
    display:flex;
    align-items:center;
    gap:10px;
    padding:7px 8px;
    background:transparent;
    border:0;
    border-radius:8px;
    color:var(--text);
    text-align:left;
    cursor:pointer;
    transition:background .15s ease,color .15s ease;
}
.ws-switcher__item:hover{background:rgba(99,91,255,.11)}
.ws-switcher__item:focus-visible{outline:2px solid var(--primary);outline-offset:2px}
.ws-switcher__item--active{background:rgba(99,91,255,.16)}
.ws-switcher__item-main{
    min-width:0;
    display:flex;
    flex-direction:column;
    gap:2px;
    flex:1;
}
.ws-switcher__item-name{
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
    font-family:var(--font-heading);
    font-weight:800;
    font-size:13px;
}
.ws-switcher__role{
    width:max-content;
    max-width:100%;
    padding:1px 6px;
    border-radius:999px;
    background:rgba(255,255,255,.07);
    color:var(--text-muted);
    font-size:10px;
    font-weight:600;
    text-transform:uppercase;
    letter-spacing:.04em;
}
.ws-switcher__check{
    flex:0 0 auto;
    color:var(--secondary);
}
.ws-switcher__actions{
    display:flex;
    flex-direction:column;
    gap:3px;
    padding-top:8px;
    border-top:1px solid var(--border);
}
.ws-switcher__action{
    min-height:36px;
    display:flex;
    align-items:center;
    gap:8px;
    padding:7px 8px;
    border-radius:8px;
    color:var(--text-secondary);
    font-size:13px;
    transition:background .15s ease,color .15s ease;
}
.ws-switcher__action:hover{
    background:rgba(0,212,255,.09);
    color:var(--text);
}
.ws-switcher__action svg{color:var(--secondary);flex:0 0 auto}

@media (max-width:767px){
    .topbar .ws-switcher--topbar{display:none}
    .sidebar .ws-switcher--sidebar{
        display:block;
        margin-bottom:12px;
    }
    .ws-switcher--sidebar .ws-switcher__trigger{
        width:100%;
        max-width:none;
        justify-content:flex-start;
        height:42px;
        background:rgba(255,255,255,.04);
    }
    .ws-switcher__overlay{
        position:fixed;
        inset:0;
        z-index:94;
        background:rgba(0,0,0,.56);
        opacity:0;
        pointer-events:none;
        transition:opacity .15s ease;
    }
    .ws-switcher.is-open .ws-switcher__overlay{
        display:block;
        opacity:1;
        pointer-events:auto;
    }
    .ws-switcher__dropdown{
        position:fixed;
        top:auto;
        left:12px;
        right:12px;
        bottom:12px;
        width:auto;
        max-width:none;
        max-height:76vh;
        display:flex;
        flex-direction:column;
        border-radius:8px;
        transform:translateY(18px);
    }
    .ws-switcher.is-open .ws-switcher__dropdown{transform:translateY(0)}
    .ws-switcher__close{display:inline-flex}
    .ws-switcher__list{max-height:none}
}

@media (min-width:768px){
    .ws-switcher--topbar{display:block}
    .ws-switcher--sidebar{display:none!important}
}

@media (prefers-reduced-motion:reduce){
    .ws-switcher__trigger,
    .ws-switcher__caret,
    .ws-switcher__dropdown,
    .ws-switcher__item,
    .ws-switcher__action,
    .ws-switcher__overlay{transition:none}
}

/* ============================================
   CRM PHASE 1 — Pipelines, Deals, Kanban
   ============================================ */
.crm-page{width:100%;max-width:1440px;margin:0 auto;overflow:visible}
.crm-page__header{position:relative;z-index:2;display:flex;align-items:flex-start;justify-content:space-between;gap:20px;margin-bottom:24px;overflow:visible}
.crm-page__eyebrow{font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--secondary);margin-bottom:4px}
.crm-page__header:focus-within{z-index:45}
.crm-page__actions{position:relative;z-index:3;display:flex;align-items:center;justify-content:flex-end;gap:8px;flex-wrap:wrap;overflow:visible}
.crm-toolbar-select{position:relative;z-index:4;min-width:220px}
.crm-toolbar-select:focus-within{z-index:46}
.crm-toolbar-select select{position:relative;z-index:5;min-height:38px;padding-top:7px;padding-bottom:7px;line-height:1.2}
.crm-panel{background:var(--surface);border:1px solid var(--border);border-radius:8px;padding:18px}
.crm-kanban{position:relative;z-index:1;display:flex;gap:14px;width:100%;max-width:100%;overflow-x:auto;overflow-y:visible;overscroll-behavior-x:contain;-webkit-overflow-scrolling:touch;padding-bottom:16px;min-height:520px;scrollbar-width:thin;scrollbar-color:rgba(99,91,255,.75) rgba(255,255,255,.06)}
.crm-kanban::-webkit-scrollbar{height:10px}
.crm-kanban::-webkit-scrollbar-track{background:rgba(255,255,255,.06);border-radius:999px}
.crm-kanban::-webkit-scrollbar-thumb{background:linear-gradient(90deg,var(--primary),var(--secondary));border:2px solid rgba(7,11,23,.92);border-radius:999px}
.crm-kanban::-webkit-scrollbar-thumb:hover{background:var(--secondary)}
.crm-kanban__column{flex:0 0 320px;width:320px;min-width:320px;display:flex;flex-direction:column;background:rgba(255,255,255,.025);border:1px solid var(--border);border-radius:8px;padding:10px}
.crm-kanban__stage-toggle{width:100%;display:flex;align-items:center;gap:8px;background:transparent;border:0;color:var(--text);font-family:var(--font-heading);font-size:14px;font-weight:700;text-align:left;cursor:pointer;padding:4px 2px}
.crm-kanban__stage-dot{width:9px;height:9px;border-radius:999px;box-shadow:0 0 0 3px rgba(255,255,255,.04)}
.crm-kanban__count{margin-left:auto;min-width:24px;height:22px;display:inline-flex;align-items:center;justify-content:center;border-radius:999px;background:rgba(255,255,255,.07);color:var(--text-secondary);font-family:var(--font-body);font-size:12px}
.crm-kanban__stage-meta{display:flex;align-items:center;justify-content:space-between;gap:8px;color:var(--text-muted);font-size:12px;margin:2px 2px 10px}
.crm-kanban__cards{display:flex;flex-direction:column;gap:10px;min-height:80px;flex:1}
.crm-deal-card{display:block;background:var(--surface);border:1px solid var(--border);border-radius:8px;padding:12px;color:var(--text);transition:transform .15s ease,border-color .15s ease,background .15s ease}
.crm-deal-card:hover{transform:translateY(-1px);border-color:var(--border-hover);background:var(--surface-hover)}
.crm-deal-card--stale{border-color:rgba(245,158,11,.42);box-shadow:inset 3px 0 0 rgba(245,158,11,.8)}
.crm-deal-card__top{display:flex;align-items:flex-start;justify-content:space-between;gap:8px;margin-bottom:5px}
.crm-deal-card__top strong{font-family:var(--font-heading);font-size:13px;line-height:1.35;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.crm-deal-card__title{color:var(--text-secondary);font-size:13px;margin-bottom:10px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.crm-deal-card__meta,.crm-deal-card__footer{display:flex;align-items:center;justify-content:space-between;gap:10px;color:var(--text-muted);font-size:12px}
.crm-deal-card__footer{margin-top:10px}
.crm-avatar{width:24px;height:24px;border-radius:999px;background:rgba(99,91,255,.18);color:var(--secondary);display:inline-flex;align-items:center;justify-content:center;font-size:11px;font-weight:700}
.crm-priority{display:inline-flex;align-items:center;border-radius:999px;padding:2px 6px;font-size:10px;font-weight:700;text-transform:uppercase;border:1px solid var(--border);color:var(--text-muted)}
.crm-priority--high{color:#F59E0B;border-color:rgba(245,158,11,.35);background:rgba(245,158,11,.08)}
.crm-priority--urgent{color:var(--error);border-color:rgba(255,107,138,.35);background:rgba(255,107,138,.08)}
.crm-priority--low{color:var(--text-muted)}
.crm-priority--medium{color:var(--secondary);border-color:rgba(0,212,255,.28);background:rgba(0,212,255,.07)}
.kanban-card-ghost{opacity:.5;transform:scale(.95)}
.crm-detail{display:grid;grid-template-columns:minmax(0,65%) minmax(320px,35%);gap:18px;align-items:start}
.crm-detail__main,.crm-detail__side{min-width:0}
.crm-form__grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.crm-form__section{font-family:var(--font-heading);font-size:13px;font-weight:700;color:var(--secondary);text-transform:uppercase;letter-spacing:.06em;margin:18px 0 10px}
.crm-tristate{display:grid;grid-template-columns:90px repeat(3,1fr);align-items:center;gap:8px;margin-bottom:8px;font-size:12px;color:var(--text-secondary)}
.crm-tristate span{font-weight:600;color:var(--text)}
.crm-tristate label{display:flex;align-items:center;gap:5px;margin:0;color:var(--text-secondary);font-size:12px}
.crm-modal{max-width:560px}
.crm-page input:not([type]),
.crm-page input[type="text"],
.crm-page input[type="email"],
.crm-page input[type="password"],
.crm-page input[type="number"],
.crm-page input[type="tel"],
.crm-page input[type="url"],
.crm-page input[type="search"],
.crm-page input[type="date"],
.crm-page select,
.crm-page textarea,
.crm-modal input:not([type]),
.crm-modal input[type="text"],
.crm-modal input[type="email"],
.crm-modal input[type="password"],
.crm-modal input[type="number"],
.crm-modal input[type="tel"],
.crm-modal input[type="url"],
.crm-modal input[type="search"],
.crm-modal input[type="date"],
.crm-modal select,
.crm-modal textarea,
.crm-row-popover input:not([type]),
.crm-row-popover input[type="text"],
.crm-row-popover input[type="email"],
.crm-row-popover input[type="password"],
.crm-row-popover input[type="number"],
.crm-row-popover input[type="tel"],
.crm-row-popover input[type="url"],
.crm-row-popover input[type="search"],
.crm-row-popover input[type="date"],
.crm-row-popover select,
.crm-row-popover textarea{
    width:100%;
    background:var(--surface);
    border:1px solid var(--border);
    border-radius:var(--radius);
    padding:10px 14px;
    color:var(--text);
    transition:all .2s;
}
.crm-page input:not([type])::placeholder,
.crm-page input[type="text"]::placeholder,
.crm-page input[type="email"]::placeholder,
.crm-page input[type="password"]::placeholder,
.crm-page input[type="number"]::placeholder,
.crm-page input[type="tel"]::placeholder,
.crm-page input[type="url"]::placeholder,
.crm-page input[type="search"]::placeholder,
.crm-page input[type="date"]::placeholder,
.crm-page textarea::placeholder,
.crm-modal input:not([type])::placeholder,
.crm-modal input[type="text"]::placeholder,
.crm-modal input[type="email"]::placeholder,
.crm-modal input[type="password"]::placeholder,
.crm-modal input[type="number"]::placeholder,
.crm-modal input[type="tel"]::placeholder,
.crm-modal input[type="url"]::placeholder,
.crm-modal input[type="search"]::placeholder,
.crm-modal input[type="date"]::placeholder,
.crm-modal textarea::placeholder,
.crm-row-popover input:not([type])::placeholder,
.crm-row-popover input[type="text"]::placeholder,
.crm-row-popover input[type="email"]::placeholder,
.crm-row-popover input[type="password"]::placeholder,
.crm-row-popover input[type="number"]::placeholder,
.crm-row-popover input[type="tel"]::placeholder,
.crm-row-popover input[type="url"]::placeholder,
.crm-row-popover input[type="search"]::placeholder,
.crm-row-popover input[type="date"]::placeholder,
.crm-row-popover textarea::placeholder{color:var(--text-muted);opacity:1}
.crm-page input:not([type]):focus,
.crm-page input[type="text"]:focus,
.crm-page input[type="email"]:focus,
.crm-page input[type="password"]:focus,
.crm-page input[type="number"]:focus,
.crm-page input[type="tel"]:focus,
.crm-page input[type="url"]:focus,
.crm-page input[type="search"]:focus,
.crm-page input[type="date"]:focus,
.crm-page select:focus,
.crm-page textarea:focus,
.crm-modal input:not([type]):focus,
.crm-modal input[type="text"]:focus,
.crm-modal input[type="email"]:focus,
.crm-modal input[type="password"]:focus,
.crm-modal input[type="number"]:focus,
.crm-modal input[type="tel"]:focus,
.crm-modal input[type="url"]:focus,
.crm-modal input[type="search"]:focus,
.crm-modal input[type="date"]:focus,
.crm-modal select:focus,
.crm-modal textarea:focus,
.crm-row-popover input:not([type]):focus,
.crm-row-popover input[type="text"]:focus,
.crm-row-popover input[type="email"]:focus,
.crm-row-popover input[type="password"]:focus,
.crm-row-popover input[type="number"]:focus,
.crm-row-popover input[type="tel"]:focus,
.crm-row-popover input[type="url"]:focus,
.crm-row-popover input[type="search"]:focus,
.crm-row-popover input[type="date"]:focus,
.crm-row-popover select:focus,
.crm-row-popover textarea:focus{
    outline:none;
    border-color:rgba(99,91,255,.5);
    box-shadow:0 0 0 2px rgba(99,91,255,.2);
}
.crm-page input:not([type])[readonly],
.crm-page input[type="text"][readonly],
.crm-page input[type="email"][readonly],
.crm-page input[type="password"][readonly],
.crm-page input[type="number"][readonly],
.crm-page input[type="tel"][readonly],
.crm-page input[type="url"][readonly],
.crm-page input[type="search"][readonly],
.crm-page input[type="date"][readonly],
.crm-page input:not([type]):disabled,
.crm-page input[type="text"]:disabled,
.crm-page input[type="email"]:disabled,
.crm-page input[type="password"]:disabled,
.crm-page input[type="number"]:disabled,
.crm-page input[type="tel"]:disabled,
.crm-page input[type="url"]:disabled,
.crm-page input[type="search"]:disabled,
.crm-page input[type="date"]:disabled,
.crm-page select:disabled,
.crm-page textarea:disabled{
    background:rgba(255,255,255,.04);
    color:var(--text-secondary);
    opacity:1;
}
.crm-page input[type="date"],
.crm-modal input[type="date"]{color-scheme:dark}
.crm-page input[type="date"]::-webkit-calendar-picker-indicator,
.crm-modal input[type="date"]::-webkit-calendar-picker-indicator{
    filter:invert(1) brightness(2);
    cursor:pointer;
    opacity:.7;
    transition:opacity .15s;
}
.crm-page input[type="date"]::-webkit-calendar-picker-indicator:hover,
.crm-modal input[type="date"]::-webkit-calendar-picker-indicator:hover{opacity:1}
.crm-business-picker{position:relative}
.crm-business-picker__results{position:absolute;left:0;right:0;top:calc(100% + 6px);z-index:110;background:rgba(10,14,26,.98);border:1px solid var(--border);border-radius:8px;box-shadow:0 16px 40px rgba(0,0,0,.4);max-height:260px;overflow:auto;padding:6px}
.crm-business-picker__item{width:100%;display:flex;flex-direction:column;gap:2px;background:transparent;border:0;border-radius:8px;color:var(--text);text-align:left;padding:9px;cursor:pointer}
.crm-business-picker__item:hover{background:rgba(99,91,255,.12)}
.crm-business-picker__item span,.crm-business-picker__empty{color:var(--text-muted);font-size:12px}
.crm-business-picker__empty{padding:12px;text-align:center}
.crm-filters{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:10px;margin-bottom:16px}
.crm-table th a{color:var(--text-muted)}
.crm-table th a:hover{color:var(--text)}
.crm-stage-pill{display:inline-flex;align-items:center;gap:5px;border-radius:999px;padding:3px 8px;background:color-mix(in srgb,var(--stage-color) 16%,transparent);color:var(--text);border:1px solid color-mix(in srgb,var(--stage-color) 42%,transparent)}
.crm-pipeline-manage{display:flex;flex-direction:column;gap:16px}
.crm-pipeline-card__head,.crm-form--inline{display:grid;grid-template-columns:minmax(180px,1fr) minmax(220px,2fr) auto auto auto;gap:10px;align-items:center}
.crm-stage-list{display:flex;flex-direction:column;gap:8px;margin-top:14px}
.crm-stage-row{display:grid;grid-template-columns:28px minmax(160px,1.5fr) 56px 90px 110px auto;gap:8px;align-items:center;padding:8px;border:1px solid var(--border);border-radius:8px;background:rgba(255,255,255,.025)}
.crm-stage-row__handle{cursor:grab;color:var(--text-muted);text-align:center;font-weight:700}
.crm-row-popover{position:absolute;z-index:120;width:320px;max-width:calc(100vw - 24px);padding:12px;background:rgba(10,14,26,.98);border:1px solid var(--border);border-radius:8px;box-shadow:0 18px 50px rgba(0,0,0,.46)}
.crm-row-popover__header{display:flex;align-items:flex-start;justify-content:space-between;gap:10px;margin-bottom:10px}
.crm-row-popover__title{font-family:var(--font-heading);font-size:13px;font-weight:700}
.crm-row-popover__close{background:transparent;border:0;color:var(--text-muted);cursor:pointer;font-size:20px;line-height:1}
.crm-row-popover .form-group{margin-bottom:10px}
.crm-row-popover label{font-size:12px}
.crm-row-popover__actions{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:10px}
.add-pipeline-btn{color:var(--secondary)}

@media (max-width:1024px){
    .crm-page__header{flex-direction:column}
    .crm-page__actions{justify-content:flex-start}
    .crm-detail{grid-template-columns:1fr}
    .crm-filters{grid-template-columns:repeat(2,minmax(0,1fr))}
}

@media (min-width:1024px){
    .sidebar-header,
    .topbar{
        height:72px;
        min-height:72px;
        padding-top:0;
        padding-bottom:0;
        align-items:center;
    }
    .topbar-right{height:100%;align-items:center}
    .crm-page--wide{max-width:none;width:100%;margin-left:0;margin-right:0;overflow:visible}
    .crm-page--wide .crm-toolbar-select{min-width:280px}
    .app-body--crm .app-main,
    .app-body--crm .app-content,
    .app-body--crm .crm-page,
    .app-body--crm .crm-page--wide,
    .app-body--crm .crm-page--pipeline{
        min-width:0;
    }
    .app-body--crm .app-main{
        max-width:calc(100vw - 256px);
    }
    .app-body--crm .app-content{
        width:100%;
        max-width:100%;
    }
    .app-body--crm .crm-kanban{
        overflow-x:scroll;
        overflow-y:visible;
        width:100%;
        max-width:100%;
        min-width:0;
    }
}

@media (max-width:768px){
    .crm-kanban{display:flex;flex-direction:column;overflow:visible;min-height:0}
    .crm-kanban__column{flex:0 0 auto;width:100%;min-width:0}
    .crm-kanban__column--collapsed .crm-kanban__stage-meta,
    .crm-kanban__column--collapsed .crm-kanban__cards{display:none}
    .crm-kanban__cards{min-height:0}
    .crm-deal-card{cursor:pointer}
    .crm-form__grid,.crm-filters,.crm-pipeline-card__head,.crm-form--inline,.crm-stage-row{grid-template-columns:1fr}
    .crm-tristate{grid-template-columns:1fr;gap:5px;padding:8px;border:1px solid var(--border);border-radius:8px}
    .crm-row-popover{position:fixed!important;left:12px!important;right:12px!important;bottom:12px!important;top:auto!important;width:auto}
}

/* ============================================
   CRM PHASE 2 — Activities timeline + Tasks
   ============================================ */
.sidebar-link__badge{margin-left:auto;min-width:20px;height:20px;padding:0 6px;border-radius:999px;background:var(--error);color:#fff;display:inline-flex;align-items:center;justify-content:center;font-size:11px;font-weight:700;line-height:1}
.crm-empty-state{border:1px dashed var(--border);border-radius:8px;padding:18px;color:var(--text-muted);text-align:center;background:rgba(255,255,255,.02)}
.crm-page--deal .crm-panel{border-radius:8px}
.crm-timeline{display:flex;flex-direction:column;gap:18px}
.crm-timeline__head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;padding-bottom:2px}
.crm-timeline__head .heading-sm,.crm-task-list__head .heading-sm{font-size:17px;line-height:1.25}
.crm-timeline__tabs{display:flex;flex-wrap:wrap;gap:8px;padding:6px;border:1px solid var(--border);border-radius:8px;background:rgba(7,11,23,.48);box-shadow:inset 0 1px 0 rgba(255,255,255,.03)}
.crm-timeline__tab{appearance:none;display:inline-flex;align-items:center;justify-content:center;min-height:38px;border:1px solid rgba(255,255,255,.08);border-radius:7px;background:rgba(255,255,255,.06);color:var(--text-secondary);padding:8px 12px;font-family:var(--font-body);font-size:13px;font-weight:700;line-height:1;cursor:pointer;transition:background-color .15s,border-color .15s,color .15s,box-shadow .15s,transform .15s}
.crm-timeline__tab:hover{color:var(--text);background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.14)}
.crm-timeline__tab:focus-visible{outline:none;box-shadow:0 0 0 2px rgba(0,212,255,.28)}
.crm-timeline__tab.is-active{color:#fff;background:linear-gradient(135deg,rgba(99,91,255,.92),rgba(0,212,255,.7));border-color:rgba(0,212,255,.45);box-shadow:0 8px 22px rgba(99,91,255,.18)}
.crm-timeline__forms{position:relative;border:1px solid var(--border);border-radius:8px;background:rgba(255,255,255,.018);padding:14px}
.crm-timeline__form{display:none!important;gap:12px}
.crm-timeline__form[hidden]{display:none!important}
.crm-timeline__form.is-active{display:flex!important;flex-direction:column}
.crm-timeline input:not([type]),
.crm-timeline input[type="text"],
.crm-timeline input[type="number"],
.crm-timeline input[type="date"],
.crm-timeline input[type="time"],
.crm-timeline input[type="datetime-local"],
.crm-timeline input[type="file"],
.crm-timeline select,
.crm-timeline textarea,
.crm-task-inline input[type="date"],
.crm-task-inline input[type="time"],
.crm-task-inline input[type="datetime-local"],
.crm-task-inline input,
.crm-activity-filters input,
.crm-activity-filters select{width:100%;min-height:42px;background:var(--surface)!important;border:1px solid var(--border);border-radius:var(--radius);padding:10px 12px;color:var(--text)!important;box-shadow:inset 0 1px 0 rgba(255,255,255,.025);transition:border-color .15s,box-shadow .15s,background-color .15s}
.crm-timeline textarea{resize:vertical;min-height:96px;line-height:1.5}
.crm-timeline input[type="file"]{padding:9px}
.crm-timeline input[type="file"]::file-selector-button{margin-right:10px;border:1px solid rgba(99,91,255,.32);border-radius:7px;background:rgba(99,91,255,.16);color:var(--text);padding:7px 10px;cursor:pointer}
.crm-timeline input::placeholder,.crm-timeline textarea::placeholder,.crm-task-inline input::placeholder{color:var(--text-muted);opacity:1}
.crm-timeline input:focus,.crm-timeline select:focus,.crm-timeline textarea:focus,.crm-task-inline input:focus,.crm-activity-filters input:focus,.crm-activity-filters select:focus{outline:none;border-color:rgba(99,91,255,.55);box-shadow:0 0 0 2px rgba(99,91,255,.22)}
.crm-timeline select{appearance:none;background-image:linear-gradient(45deg,transparent 50%,var(--text-muted) 50%),linear-gradient(135deg,var(--text-muted) 50%,transparent 50%);background-position:calc(100% - 16px) 18px,calc(100% - 11px) 18px;background-size:5px 5px,5px 5px;background-repeat:no-repeat;padding-right:34px}
.crm-task-inline input[type="datetime-local"],
.crm-task-inline input[type="date"],
.crm-task-inline input[type="time"],
.crm-activity-filters input[type="datetime-local"],
.crm-activity-filters input[type="date"],
.crm-activity-filters input[type="time"],
.crm-timeline input[type="datetime-local"],
.crm-timeline input[type="date"],
.crm-timeline input[type="time"]{color-scheme:dark}
.crm-activity-filters input[type="datetime-local"]::-webkit-calendar-picker-indicator,
.crm-activity-filters input[type="date"]::-webkit-calendar-picker-indicator,
.crm-activity-filters input[type="time"]::-webkit-calendar-picker-indicator,
.crm-task-inline input[type="datetime-local"]::-webkit-calendar-picker-indicator,
.crm-task-inline input[type="date"]::-webkit-calendar-picker-indicator,
.crm-task-inline input[type="time"]::-webkit-calendar-picker-indicator,
.crm-timeline input[type="datetime-local"]::-webkit-calendar-picker-indicator,
.crm-timeline input[type="date"]::-webkit-calendar-picker-indicator,
.crm-timeline input[type="time"]::-webkit-calendar-picker-indicator{filter:invert(1) brightness(2);opacity:.72;cursor:pointer}
.crm-activity-filters input[type="datetime-local"]::-webkit-calendar-picker-indicator:hover,
.crm-activity-filters input[type="date"]::-webkit-calendar-picker-indicator:hover,
.crm-activity-filters input[type="time"]::-webkit-calendar-picker-indicator:hover,
.crm-task-inline input[type="datetime-local"]::-webkit-calendar-picker-indicator:hover,
.crm-task-inline input[type="date"]::-webkit-calendar-picker-indicator:hover,
.crm-task-inline input[type="time"]::-webkit-calendar-picker-indicator:hover,
.crm-timeline input[type="datetime-local"]::-webkit-calendar-picker-indicator:hover,
.crm-timeline input[type="date"]::-webkit-calendar-picker-indicator:hover,
.crm-timeline input[type="time"]::-webkit-calendar-picker-indicator:hover{opacity:1}
.crm-timeline__feed{display:flex;flex-direction:column;gap:12px}
.crm-timeline__activity{display:grid;grid-template-columns:34px minmax(0,1fr);gap:12px;padding:13px;border:1px solid var(--border);border-radius:8px;background:rgba(255,255,255,.025);transition:border-color .15s,background .15s}
.crm-timeline__activity:hover{border-color:var(--border-hover);background:rgba(255,255,255,.04)}
.crm-timeline__activity--system{background:rgba(255,255,255,.015);opacity:.82}
.crm-timeline__icon{width:34px;height:34px;border-radius:999px;display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:800;background:rgba(99,91,255,.16);color:var(--secondary);border:1px solid rgba(99,91,255,.28)}
.crm-timeline__activity--note .crm-timeline__icon{background:rgba(250,204,21,.12);color:#facc15;border-color:rgba(250,204,21,.28)}
.crm-timeline__activity--call .crm-timeline__icon{background:rgba(0,212,255,.12);color:var(--secondary);border-color:rgba(0,212,255,.28)}
.crm-timeline__activity--meeting .crm-timeline__icon{background:rgba(16,185,129,.12);color:#10B981;border-color:rgba(16,185,129,.28)}
.crm-timeline__activity--email .crm-timeline__icon{background:rgba(99,91,255,.16);color:var(--primary);border-color:rgba(99,91,255,.32)}
.crm-timeline__activity--task .crm-timeline__icon{background:rgba(245,158,11,.13);color:#F59E0B;border-color:rgba(245,158,11,.32)}
.crm-timeline__activity--file .crm-timeline__icon{background:rgba(156,163,175,.14);color:#D1D5DB;border-color:rgba(156,163,175,.28)}
.crm-timeline__activity-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin-bottom:6px}
.crm-timeline__activity-head strong{font-family:var(--font-heading);font-size:14px;color:var(--text)}
.crm-timeline__activity-head time{white-space:nowrap;color:var(--text-muted);font-size:12px}
.crm-timeline__body p{color:var(--text-secondary);font-size:13px;line-height:1.55;margin-bottom:8px}
.crm-meta-badge{display:inline-flex;margin:0 6px 6px 0;border-radius:999px;border:1px solid var(--border);padding:3px 8px;color:var(--text-secondary);font-size:12px;background:rgba(255,255,255,.04)}
.crm-file-link{display:inline-flex;margin:4px 0 6px;color:var(--secondary);font-size:13px}
.crm-timeline__footer{display:flex;align-items:center;justify-content:space-between;gap:10px;color:var(--text-muted);font-size:12px}
.crm-timeline__actions{display:flex;gap:8px;opacity:0;transition:opacity .15s}
.crm-timeline__activity:hover .crm-timeline__actions{opacity:1}
.crm-timeline__actions button{border:0;background:transparent;color:var(--secondary);font-size:12px;cursor:pointer}
.crm-upload-progress{height:8px;border-radius:999px;background:rgba(255,255,255,.06);overflow:hidden}
.crm-upload-progress span{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--primary),var(--secondary));transition:width .15s}
.crm-task-list{margin-top:16px}
.crm-task-list__head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:12px}
.crm-task-item{display:grid;grid-template-columns:20px minmax(0,1fr);gap:10px;align-items:flex-start;padding:10px;border:1px solid var(--border);border-radius:8px;background:rgba(255,255,255,.025);cursor:pointer;margin-bottom:8px}
.crm-task-item:hover{border-color:var(--border-hover);background:rgba(255,255,255,.04)}
.crm-task-item input[type="checkbox"],.crm-activity-row__check input[type="checkbox"],.crm-type-filter input[type="checkbox"]{accent-color:var(--primary)}
.crm-task-item strong{display:block;font-size:13px;color:var(--text);line-height:1.35}
.crm-task-item small{display:block;color:var(--text-muted);font-size:12px;margin-top:2px}
.crm-task-item--overdue{border-color:rgba(255,107,138,.42);box-shadow:inset 3px 0 0 rgba(255,107,138,.82)}
.crm-task-item--completed{opacity:.55;text-decoration:line-through}
.crm-task-inline{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr) auto;gap:8px;margin-top:12px}
.crm-card-task-indicator{display:inline-flex;align-items:center;gap:4px;border-radius:999px;border:1px solid rgba(245,158,11,.35);background:rgba(245,158,11,.1);color:#F59E0B;padding:2px 7px;font-size:11px;font-weight:800}
.crm-card-task-indicator--overdue{border-color:rgba(255,107,138,.46);background:rgba(255,107,138,.11);color:var(--error)}
.crm-deal-card__footer-actions{display:inline-flex;align-items:center;gap:7px;flex-shrink:0}
.crm-activity-filters{display:grid;grid-template-columns:repeat(5,minmax(0,1fr)) auto;gap:10px;align-items:end}
.crm-type-filter{display:flex;flex-wrap:wrap;gap:8px 14px;margin-top:12px;color:var(--text-secondary);font-size:12px}
.crm-type-filter label{display:inline-flex;align-items:center;gap:7px;border:1px solid var(--border);border-radius:999px;background:rgba(255,255,255,.035);padding:6px 10px;line-height:1;cursor:pointer;transition:background-color .15s,border-color .15s,color .15s}
.crm-type-filter label:hover{color:var(--text);border-color:var(--border-hover);background:rgba(255,255,255,.06)}
.crm-activity-list{display:flex;flex-direction:column;gap:8px;margin-top:18px}
.crm-activity-list__group{font-family:var(--font-heading);font-size:13px;text-transform:uppercase;letter-spacing:.06em;color:var(--secondary);margin:14px 2px 4px}
.crm-activity-row{display:grid;grid-template-columns:28px minmax(0,1fr) auto;gap:12px;align-items:center;border:1px solid var(--border);border-radius:8px;background:var(--surface);padding:12px}
.crm-activity-row:hover{border-color:var(--border-hover);background:rgba(255,255,255,.04)}
.crm-activity-row--overdue{border-color:rgba(255,107,138,.42)}
.crm-activity-row--completed{opacity:.6}
.crm-activity-row__check{display:flex;align-items:center;justify-content:center;min-height:28px}
.crm-activity-row__main strong{display:block;font-size:14px;color:var(--text);margin-bottom:3px}
.crm-activity-row__main a{color:var(--secondary);text-decoration:none}
.crm-activity-row__main a:hover{text-decoration:underline}
.crm-activity-row__main span,.crm-activity-row__meta{color:var(--text-muted);font-size:12px}
.crm-activity-row__meta{display:flex;flex-direction:column;align-items:flex-end;gap:3px}
.crm-pagination{display:flex;align-items:center;justify-content:flex-end;gap:8px;margin-top:16px}

@media (min-width:1024px){
    .crm-page--deal .crm-detail{align-items:stretch;min-height:calc(100vh - 132px)}
    .crm-page--deal .crm-detail__main,
    .crm-page--deal .crm-detail__side{display:flex;flex-direction:column;min-height:100%}
    .crm-page--deal .crm-detail__main>.crm-panel{flex:1}
    .crm-page--deal .crm-detail__side{gap:16px}
    .crm-page--deal .crm-detail__side>form.crm-panel{flex:1}
    .crm-page--deal .crm-task-list{margin-top:0}
}

@media (max-width:1024px){
    .crm-activity-filters{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:768px){
    .crm-timeline__activity{grid-template-columns:1fr}
    .crm-timeline__icon{width:28px;height:28px}
    .crm-timeline__activity-head{flex-direction:column;gap:4px}
    .crm-timeline__actions{opacity:1}
    .crm-activity-filters,.crm-activity-row,.crm-task-inline{grid-template-columns:1fr}
    .crm-activity-row__meta{align-items:flex-start}
}

/* ============================================
   CRM PHASE 3 — Email templates + tracking
   ============================================ */
.crm-email-form{gap:14px}
.crm-email-form__template-picker{display:flex;flex-direction:column;gap:7px}
.crm-email-form__template-picker>label{font-size:13px;font-weight:600;color:var(--text-secondary)}
.crm-email-form__template-row{display:grid;grid-template-columns:minmax(0,1fr) auto auto;gap:8px;align-items:center}
.crm-email-form__toggle-row{display:flex;flex-wrap:wrap;gap:10px}
.crm-email-form__toggle-row label,.crm-email-form__inline-check{display:inline-flex;align-items:center;gap:8px;border:1px solid var(--border);border-radius:999px;background:rgba(255,255,255,.035);padding:8px 11px;color:var(--text-secondary);font-size:13px;line-height:1.2}
.crm-email-form__toggle-row input,.crm-email-form__inline-check input{accent-color:var(--primary)}
.crm-email-form__action-buttons{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.crm-email-form__banner{border:1px solid var(--border);border-radius:8px;padding:12px 13px;display:flex;align-items:center;gap:10px;flex-wrap:wrap;font-size:13px}
.crm-email-form__banner[hidden]{display:none}
.crm-email-form__banner--warning{border-color:rgba(245,158,11,.45);background:rgba(245,158,11,.1);color:#FDE68A}
.crm-email-form__banner--muted{border-color:rgba(0,212,255,.26);background:rgba(0,212,255,.07);color:var(--secondary)}
.crm-template-layout{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:18px;align-items:start}
.crm-template-form textarea,.crm-template-item textarea{min-height:180px}
.crm-template-list{display:flex;flex-direction:column;gap:14px}
.crm-template-item__footer{display:flex;align-items:center;gap:10px;flex-wrap:wrap;justify-content:flex-end}
.crm-template-item__footer .crm-email-form__inline-check{margin-right:auto}
.crm-template-variables-help{position:sticky;top:88px}
.crm-template-variables-help__list{display:flex;flex-wrap:wrap;gap:8px}
.crm-template-variables-help code{border:1px solid var(--border);border-radius:7px;background:rgba(255,255,255,.04);color:var(--secondary);padding:6px 8px;font-size:12px}
.settings-email-tracking .form-group label{display:flex;align-items:center;gap:8px;color:var(--text)}
.settings-email-tracking input[type="checkbox"]{accent-color:var(--primary)}
.public-legal{max-width:900px;margin:0 auto;padding:96px 20px 64px}
.public-legal__panel{border:1px solid var(--border);border-radius:8px;background:var(--surface);padding:28px}
.public-legal__content{display:flex;flex-direction:column;gap:14px;margin-top:22px}
.public-legal__content h2{font-family:var(--font-heading);font-size:18px;color:var(--text);margin-top:8px}
.public-legal__content p{color:var(--text-secondary);line-height:1.65}
body.public-legal-body{background:var(--bg);color:var(--text);min-height:100vh}

@media (max-width:900px){
    .crm-email-form__template-row,.crm-template-layout{grid-template-columns:1fr}
    .crm-template-variables-help{position:static}
}

/* ============================================
   CRM PHASE 4 — Analytics dashboard + Forecast
   ============================================ */
.analytics-page{width:100%;max-width:1600px;margin:0 auto;display:flex;flex-direction:column;gap:18px}
.analytics-page__header{display:flex;align-items:flex-start;justify-content:space-between;gap:18px;margin-bottom:2px}
.analytics-period{display:flex;align-items:end;gap:10px;flex-wrap:wrap;border:1px solid var(--border);border-radius:8px;background:rgba(255,255,255,.035);padding:10px}
.analytics-period label{display:flex;flex-direction:column;gap:6px;color:var(--text-secondary);font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.04em}
.analytics-period select,.analytics-period input[type="date"]{min-height:38px;border:1px solid var(--border);border-radius:8px;background:rgba(10,14,26,.86);color:var(--text);padding:8px 10px;font:inherit}
.analytics-period select:focus,.analytics-period input[type="date"]:focus{outline:none;border-color:var(--primary);box-shadow:0 0 0 3px rgba(99,91,255,.16)}
.analytics-period__custom{display:flex;align-items:center;gap:8px}
.analytics-period__custom[hidden]{display:none}
.analytics-alert{border:1px solid rgba(245,158,11,.42);border-radius:8px;background:rgba(245,158,11,.09);color:#FDE68A;padding:12px 14px;font-size:14px}
.dashboard-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
.kpi-card{position:relative;overflow:hidden;border:1px solid var(--border);border-radius:8px;background:linear-gradient(180deg,rgba(255,255,255,.06),rgba(255,255,255,.025));padding:16px;min-height:132px;display:flex;flex-direction:column;gap:8px;transition:transform .15s,border-color .15s,background-color .15s}
.kpi-card:hover{transform:translateY(-1px);border-color:var(--border-hover);background:rgba(255,255,255,.055)}
.kpi-card--empty{opacity:.72}
.kpi-card--health{background:linear-gradient(135deg,rgba(99,91,255,.16),rgba(0,212,255,.07))}
.kpi-card__label{color:var(--text-muted);font-size:12px;font-weight:800;text-transform:uppercase;letter-spacing:.06em}
.kpi-card__value{font-family:var(--font-heading);font-size:clamp(24px,2vw,34px);line-height:1;color:var(--text)}
.kpi-card__meta{color:var(--text-secondary);font-size:13px;line-height:1.35;min-height:18px}
.kpi-card__change{display:inline-flex;align-items:center;width:max-content;border-radius:999px;padding:4px 8px;font-size:12px;font-weight:800}
.kpi-card__change--positive{background:rgba(16,185,129,.11);color:#34D399}
.kpi-card__change--negative{background:rgba(239,68,68,.11);color:#F87171}
.kpi-card__change--neutral{background:rgba(255,255,255,.06);color:var(--text-muted)}
.kpi-card__healthbar{height:8px;border-radius:999px;background:rgba(255,255,255,.08);overflow:hidden;margin-top:auto}
.kpi-card__healthbar span{display:block;height:100%;border-radius:inherit;background:linear-gradient(90deg,var(--primary),var(--secondary))}
.analytics-layout{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(360px,.8fr);gap:16px;align-items:start}
.analytics-panel{border:1px solid var(--border);border-radius:8px;background:var(--surface);padding:16px;min-width:0}
.analytics-panel--funnel{grid-row:span 2}
.analytics-panel__header{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin-bottom:14px}
.analytics-panel__header h2{font-family:var(--font-heading);font-size:18px;margin:0;color:var(--text)}
.analytics-panel__header p{margin:4px 0 0;color:var(--text-muted);font-size:13px}
.funnel-chart{display:flex;flex-direction:column;gap:12px}
.funnel-chart__row{display:grid;grid-template-columns:140px minmax(160px,1fr) 150px 56px;gap:12px;align-items:center;color:var(--text-secondary);font-size:13px}
.funnel-chart__label{color:var(--text);font-weight:700;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.funnel-chart__track{height:14px;border-radius:999px;background:rgba(255,255,255,.06);overflow:hidden}
.funnel-chart__bar{display:block;height:100%;border-radius:inherit;box-shadow:0 0 18px color-mix(in srgb,currentColor 40%,transparent)}
.funnel-chart__meta{white-space:nowrap;color:var(--text-secondary)}
.funnel-chart__pct{justify-self:end;color:var(--secondary);font-weight:800}
.chart-container{position:relative;width:100%;height:300px}
.chart-container--compact{height:260px}
.chart-container--tall{height:360px}
.forecast-summary{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.forecast-summary__item{border:1px solid var(--border);border-radius:8px;background:linear-gradient(135deg,rgba(99,91,255,.14),rgba(0,212,255,.06));padding:18px;display:flex;flex-direction:column;gap:8px}
.forecast-summary__item span{color:var(--text-muted);font-size:12px;font-weight:800;text-transform:uppercase;letter-spacing:.06em}
.forecast-summary__item strong{font-family:var(--font-heading);font-size:30px;color:var(--text);line-height:1}
.forecast-summary__item small{color:var(--text-secondary);font-size:13px}
.forecast-table-wrap{overflow-x:auto;border-radius:8px}
.forecast-table{width:100%;border-collapse:collapse;min-width:780px}
.forecast-table th,.forecast-table td{border-bottom:1px solid var(--border);padding:12px 10px;text-align:left;font-size:13px}
.forecast-table th{color:var(--text-muted);font-size:11px;text-transform:uppercase;letter-spacing:.06em}
.forecast-table td{color:var(--text-secondary)}
.forecast-table td:first-child,.forecast-table a{color:var(--text);font-weight:700;text-decoration:none}
.forecast-table a:hover{color:var(--secondary)}
.forecast-table__empty{text-align:center!important;color:var(--text-muted)!important;padding:28px!important}
.forecast-stage{display:inline-flex;align-items:center;gap:7px;color:var(--text)}
.forecast-stage:before{content:"";width:8px;height:8px;border-radius:999px;background:var(--stage-color)}

@media (min-width:1024px){
    .analytics-page{max-width:none;margin-left:0;margin-right:0}
}
@media (max-width:1180px){
    .dashboard-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
    .analytics-layout{grid-template-columns:1fr}
    .analytics-panel--funnel{grid-row:auto}
}
@media (max-width:768px){
    .analytics-page__header,.analytics-panel__header{flex-direction:column}
    .analytics-period{width:100%;align-items:stretch}
    .analytics-period label,.analytics-period select,.analytics-period input[type="date"],.analytics-period .btn{width:100%}
    .analytics-period__custom{width:100%;display:grid;grid-template-columns:1fr}
    .dashboard-grid,.forecast-summary{grid-template-columns:1fr}
    .funnel-chart__row{grid-template-columns:1fr;gap:6px;border-bottom:1px solid var(--border);padding-bottom:10px}
    .funnel-chart__pct{justify-self:start}
    .chart-container{height:260px}
}

/* ============================================
   CHECKPOINT 2.5 — Dashboard + Pipeline polish
   ============================================ */
.analytics-page{gap:32px}
.analytics-page__header{align-items:center;margin-bottom:0;padding-bottom:4px}
.analytics-period{align-items:center;gap:8px;border-color:rgba(255,255,255,.12);background:rgba(10,14,26,.72);box-shadow:0 10px 30px rgba(0,0,0,.16)}
.analytics-period label{flex-direction:row;align-items:center;gap:8px;white-space:nowrap}
.analytics-period select{min-width:168px}
.analytics-period .btn{min-height:38px}
.dashboard-section{display:flex;flex-direction:column;gap:14px}
.dashboard-section__header{display:flex;align-items:flex-end;justify-content:space-between;gap:12px;border-bottom:1px solid rgba(255,255,255,.08);padding-bottom:10px}
.dashboard-section__header span{font-family:var(--font-heading);font-size:15px;font-weight:800;color:var(--text);letter-spacing:.01em}
.dashboard-section__header p{margin:0;color:var(--text-muted);font-size:13px}
.dashboard-grid{gap:16px}
.dashboard-grid--money{grid-template-columns:1.25fr 1fr 1fr}
.dashboard-grid--operations{grid-template-columns:repeat(5,minmax(0,1fr))}
.kpi-card{isolation:isolate;min-height:148px;padding:22px;border-color:rgba(255,255,255,.12);background:linear-gradient(180deg,rgba(255,255,255,.065),rgba(255,255,255,.025));box-shadow:0 12px 34px rgba(0,0,0,.12);transition:transform .18s ease,border-color .18s ease,box-shadow .18s ease,background-color .18s ease}
.kpi-card:before{content:"";position:absolute;left:0;right:0;top:0;height:3px;background:rgba(255,255,255,.16)}
.kpi-card:hover{transform:translateY(-2px);border-color:rgba(255,255,255,.2);box-shadow:0 20px 50px rgba(0,0,0,.22)}
.kpi-card--primary:before{background:linear-gradient(90deg,var(--primary),var(--secondary))}
.kpi-card--primary .kpi-card__value{color:var(--secondary);font-size:clamp(32px,3vw,46px)}
.kpi-card--secondary:before{background:var(--secondary)}
.kpi-card--success:before{background:#10B981}
.kpi-card--warning:before{background:#F59E0B}
.kpi-card--neutral:before{background:#9CA3AF}
.kpi-card--health{background:linear-gradient(135deg,rgba(99,91,255,.18),rgba(0,212,255,.08));border-color:rgba(99,91,255,.26)}
.kpi-card--health:before{background:linear-gradient(90deg,#10B981,var(--secondary))}
.kpi-card--empty{opacity:.62;filter:saturate(.75)}
.kpi-card__label{font-size:11px;color:var(--text-muted)}
.kpi-card__value{font-weight:800;font-variant-numeric:tabular-nums;color:var(--text);letter-spacing:0}
.kpi-card__change{margin-top:auto;border:1px solid transparent;box-shadow:inset 0 0 0 1px rgba(255,255,255,.04)}
.kpi-card__change--positive{background:rgba(16,185,129,.16);border-color:rgba(16,185,129,.32);color:#6EE7B7}
.kpi-card__change--negative{background:rgba(239,68,68,.16);border-color:rgba(239,68,68,.34);color:#FCA5A5}
.kpi-card__change--neutral{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.1)}
.analytics-layout{gap:22px;margin-top:4px}
.analytics-panel{padding:24px;border-color:rgba(255,255,255,.12);background:linear-gradient(180deg,rgba(255,255,255,.045),rgba(255,255,255,.02));box-shadow:0 14px 38px rgba(0,0,0,.14)}
.analytics-panel__header{margin-bottom:20px}
.analytics-panel__header h2{font-size:20px;font-weight:800}
.analytics-panel__header p{font-size:13px}
.analytics-panel--compact-chart .chart-container{height:220px;max-height:220px;max-width:360px;margin:0 auto}
.chart-container{height:284px}
.funnel-chart{gap:10px}
.funnel-chart__row{grid-template-columns:150px minmax(220px,1fr) 150px 74px;padding:9px 10px;border:1px solid transparent;border-radius:8px;transition:background-color .16s,border-color .16s,transform .16s}
.funnel-chart__row:hover{background:rgba(255,255,255,.045);border-color:rgba(255,255,255,.1);transform:translateX(2px)}
.funnel-chart__label{display:flex;align-items:center;gap:8px}
.funnel-chart__dot{width:9px;height:9px;border-radius:999px;background:var(--stage-color);box-shadow:0 0 0 3px color-mix(in srgb,var(--stage-color) 20%,transparent)}
.funnel-chart__track{height:28px;background:rgba(255,255,255,.045);border:1px solid rgba(255,255,255,.07);padding:4px}
.funnel-chart__bar{width:var(--funnel-width);margin:0 auto;background:linear-gradient(90deg,color-mix(in srgb,var(--stage-color) 80%,#fff 0%),var(--stage-color));box-shadow:0 8px 22px color-mix(in srgb,var(--stage-color) 26%,transparent)}
.funnel-chart__pct{justify-self:end;display:inline-flex;align-items:center;justify-content:center;min-width:58px;border-radius:999px;border:1px solid color-mix(in srgb,var(--stage-color) 38%,transparent);background:color-mix(in srgb,var(--stage-color) 14%,transparent);color:var(--text);font-weight:900}

.crm-page--pipelines .crm-page__header{margin-bottom:22px}
.crm-new-pipeline{display:grid;grid-template-columns:minmax(280px,.9fr) minmax(0,1.4fr);gap:18px;align-items:center;margin-bottom:22px;border-style:dashed;border-color:rgba(0,212,255,.28);background:linear-gradient(135deg,rgba(0,212,255,.08),rgba(99,91,255,.06))}
.crm-new-pipeline__copy{display:flex;align-items:center;gap:14px}
.crm-new-pipeline__icon{width:38px;height:38px;border-radius:10px;display:inline-flex;align-items:center;justify-content:center;background:rgba(0,212,255,.12);border:1px solid rgba(0,212,255,.28);color:var(--secondary);font-size:24px;font-weight:800}
.crm-new-pipeline h2{margin:0 0 4px;font-family:var(--font-heading);font-size:17px;color:var(--text)}
.crm-new-pipeline p{margin:0;color:var(--text-muted);font-size:13px}
.crm-new-pipeline__form{grid-template-columns:minmax(180px,1fr) minmax(220px,1.4fr) auto}
.crm-pipeline-manage{gap:18px}
.crm-pipeline-card{padding:22px;border-color:rgba(255,255,255,.12);box-shadow:0 14px 34px rgba(0,0,0,.12)}
.crm-pipeline-card__head{grid-template-columns:minmax(220px,1.1fr) minmax(260px,1.7fr) auto auto auto;gap:12px;padding-bottom:18px;border-bottom:1px solid rgba(255,255,255,.08)}
.crm-pipeline-card__title-field,.crm-pipeline-card__description-field,.crm-stage-field{display:flex;flex-direction:column;gap:6px;margin:0}
.crm-pipeline-card__title-field label,.crm-pipeline-card__description-field label,.crm-stage-field>span{font-size:11px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--text-muted)}
.crm-pipeline-card__title-field input{font-family:var(--font-heading);font-size:20px;font-weight:800;padding:11px 13px}
.crm-default-badge{display:inline-flex;align-items:center;justify-content:center;border-radius:999px;border:1px solid rgba(16,185,129,.32);background:rgba(16,185,129,.12);color:#6EE7B7;padding:6px 10px;font-size:11px;font-weight:900;letter-spacing:.06em}
.crm-dirty-save{opacity:0;visibility:hidden;pointer-events:none;transform:translateY(2px);transition:opacity .16s,visibility .16s,transform .16s}
.is-dirty .crm-dirty-save{opacity:1;visibility:visible;pointer-events:auto;transform:translateY(0)}
.crm-stage-list{gap:10px;margin-top:16px}
.crm-stage-row{grid-template-columns:42px minmax(180px,1.35fr) minmax(210px,1.35fr) 92px 110px auto;gap:12px;align-items:end;padding:12px;border-color:rgba(255,255,255,.1);background:rgba(255,255,255,.026);transition:border-color .16s,background-color .16s,transform .16s}
.crm-stage-row--terminal{grid-template-columns:42px minmax(180px,1.35fr) minmax(210px,1.35fr) 92px auto}
.crm-stage-row:hover{border-color:rgba(255,255,255,.18);background:rgba(255,255,255,.04)}
.crm-stage-row.is-dirty{border-color:rgba(99,91,255,.42);background:rgba(99,91,255,.06)}
.crm-stage-row__handle{width:34px;height:38px;display:inline-flex;align-items:center;justify-content:center;border:1px solid rgba(255,255,255,.1);border-radius:8px;background:rgba(255,255,255,.035);color:var(--text-muted);font-size:20px;cursor:grab;transition:color .16s,border-color .16s,background-color .16s}
.crm-stage-row__handle:hover{color:var(--secondary);border-color:rgba(0,212,255,.28);background:rgba(0,212,255,.08)}
.crm-stage-row__handle:active{cursor:grabbing}
.crm-color-swatches{display:flex;align-items:center;gap:7px;flex-wrap:wrap;min-height:38px}
.crm-color-swatch{width:22px;height:22px;border-radius:999px;border:2px solid rgba(255,255,255,.12);background:var(--swatch-color);cursor:pointer;box-shadow:0 0 0 0 rgba(99,91,255,0);transition:transform .14s,border-color .14s,box-shadow .14s}
.crm-color-swatch:hover{transform:translateY(-1px) scale(1.06);border-color:rgba(255,255,255,.4)}
.crm-color-swatch--active{border-color:var(--text);box-shadow:0 0 0 4px rgba(99,91,255,.18)}
.crm-stage-field--number input{text-align:center;font-variant-numeric:tabular-nums;padding-left:8px;padding-right:8px}

@media (max-width:1180px){
    .dashboard-grid--money,.dashboard-grid--operations{grid-template-columns:repeat(2,minmax(0,1fr))}
    .crm-new-pipeline,.crm-pipeline-card__head,.crm-stage-row,.crm-stage-row--terminal{grid-template-columns:1fr}
    .crm-stage-row__handle{width:100%;height:34px}
}
@media (max-width:768px){
    .analytics-page{gap:24px}
    .analytics-page__header{align-items:stretch}
    .analytics-period{align-items:stretch}
    .dashboard-section__header{align-items:flex-start;flex-direction:column}
    .dashboard-grid--money,.dashboard-grid--operations{grid-template-columns:1fr}
    .kpi-card{padding:18px;min-height:132px}
    .funnel-chart__row{grid-template-columns:1fr}
    .funnel-chart__track{height:24px}
    .crm-new-pipeline__form{grid-template-columns:1fr}
}

/* ============================================
   CHECKPOINT 2.6 — UI redo stabilization
   ============================================ */
@media (min-width:1024px){
    .analytics-layout{
        display:grid;
        grid-template-columns:minmax(0,1fr) minmax(0,1fr);
        gap:22px;
        align-items:stretch;
    }
    .analytics-layout>.analytics-panel{min-height:0}
    .analytics-panel--funnel{grid-row:auto}
}
.analytics-panel--compact-chart .chart-container{height:240px;max-height:240px;max-width:420px}
.funnel-chart{gap:8px}
.funnel-chart__row{
    grid-template-columns:150px minmax(180px,1fr) 150px 68px;
    padding:8px 0;
    border:0;
    border-radius:0;
    background:transparent;
}
.funnel-chart__row:hover{
    transform:none;
    background:rgba(255,255,255,.035);
    border-color:transparent;
}
.funnel-chart__track{
    height:16px;
    padding:0;
    border:1px solid rgba(255,255,255,.08);
    background:rgba(255,255,255,.055);
}
.funnel-chart__bar{
    width:var(--funnel-width);
    margin:0;
    background:var(--stage-color);
    box-shadow:none;
}
.funnel-chart__pct{
    min-width:52px;
    padding:3px 8px;
    border-radius:999px;
    background:rgba(255,255,255,.055);
    border-color:rgba(255,255,255,.12);
    color:var(--text-secondary);
}

.crm-stage-row,
.crm-stage-row--terminal{
    grid-template-columns:42px minmax(220px,1.4fr) 64px 92px 110px 84px;
    align-items:end;
}
.crm-stage-field--color{position:relative;width:64px}
.crm-color-picker{position:relative;width:40px}
.crm-color-trigger{
    width:40px;
    height:40px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    border:1px solid rgba(255,255,255,.16);
    border-radius:999px;
    background:rgba(255,255,255,.045);
    cursor:pointer;
    transition:border-color .15s,box-shadow .15s,transform .15s;
}
.crm-color-trigger:hover{border-color:rgba(0,212,255,.36);box-shadow:0 0 0 4px rgba(0,212,255,.08);transform:translateY(-1px)}
.crm-color-trigger span{
    width:24px;
    height:24px;
    border-radius:999px;
    background:var(--stage-color);
    box-shadow:inset 0 0 0 1px rgba(255,255,255,.24);
}
.crm-color-popover{
    position:absolute;
    top:calc(100% + 10px);
    left:0;
    z-index:180;
    width:258px;
    padding:12px;
    border:1px solid rgba(255,255,255,.14);
    border-radius:8px;
    background:rgba(10,14,26,.98);
    box-shadow:0 22px 60px rgba(0,0,0,.48);
}
.crm-color-popover[hidden]{display:none}
.crm-color-popover__title{
    font-family:var(--font-heading);
    font-size:13px;
    font-weight:800;
    color:var(--text);
    margin-bottom:10px;
}
.crm-color-popover__grid{
    display:grid;
    grid-template-columns:repeat(5,28px);
    gap:9px;
}
.crm-color-popover .crm-color-swatch{
    width:28px;
    height:28px;
}
.crm-color-popover__divider{
    height:1px;
    background:rgba(255,255,255,.1);
    margin:12px 0;
}
.crm-color-popover__hex{
    display:grid;
    grid-template-columns:1fr 34px;
    gap:8px;
    align-items:end;
}
.crm-color-popover__hex span{
    grid-column:1/-1;
    font-size:11px;
    font-weight:800;
    letter-spacing:.06em;
    text-transform:uppercase;
    color:var(--text-muted);
}
.crm-color-popover__hex input{
    min-height:36px;
    text-transform:uppercase;
    font-variant-numeric:tabular-nums;
}
.crm-color-popover__hex input.is-invalid{
    border-color:rgba(239,68,68,.6);
    box-shadow:0 0 0 2px rgba(239,68,68,.16);
}
.crm-color-popover__hex i{
    width:34px;
    height:36px;
    border-radius:8px;
    border:1px solid rgba(255,255,255,.16);
    background:var(--preview-color);
}
.crm-color-popover__actions{
    display:flex;
    justify-content:flex-end;
    gap:8px;
    margin-top:12px;
}
.crm-stage-muted-cell{
    min-height:40px;
    display:flex;
    align-items:center;
    justify-content:center;
    border:1px solid rgba(255,255,255,.08);
    border-radius:8px;
    background:rgba(255,255,255,.025);
    color:var(--text-muted);
    font-weight:800;
}
@media (max-width:1180px){
    .crm-stage-row,
    .crm-stage-row--terminal{grid-template-columns:1fr}
    .crm-stage-field--color,.crm-color-picker{width:100%}
    .crm-color-popover{left:0;right:auto}
}

/* ============================================
   CRM PHASE 5 - Company analytics (USP)
   ============================================ */
.company-analytics-page{max-width:1600px}
.sidebar-link--locked{opacity:.58}
.sidebar-link--locked:hover{opacity:.82}
.sidebar-link__lock{margin-left:auto;display:inline-flex;align-items:center;color:var(--text-muted)}
.industry-tab-nav{display:flex;align-items:center;gap:8px;border:1px solid var(--border);border-radius:10px;background:rgba(255,255,255,.035);padding:6px;overflow-x:auto}
.industry-tab-nav__item{display:inline-flex;align-items:center;justify-content:center;min-height:38px;padding:0 14px;border-radius:8px;color:var(--text-secondary);font-weight:800;font-size:13px;text-decoration:none;white-space:nowrap;transition:background-color .15s,color .15s}
.industry-tab-nav__item:hover{background:rgba(255,255,255,.065);color:var(--text)}
.industry-tab-nav__item.is-active{background:linear-gradient(135deg,rgba(99,91,255,.92),rgba(0,212,255,.62));color:#fff}
.industry-tab-panel{display:none}
.industry-tab-panel.is-active{display:block}
.industry-dashboard{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
.industry-metric-card{position:relative;overflow:hidden;border:1px solid var(--border);border-radius:10px;background:linear-gradient(180deg,rgba(255,255,255,.06),rgba(255,255,255,.025));padding:20px;min-height:138px;display:flex;flex-direction:column;gap:9px}
.industry-metric-card:before{content:"";position:absolute;inset:0 auto 0 0;width:3px;background:rgba(255,255,255,.14)}
.industry-metric-card--primary:before{background:linear-gradient(180deg,var(--primary),var(--secondary))}
.industry-metric-card span{color:var(--text-muted);font-size:12px;text-transform:uppercase;font-weight:900;letter-spacing:.06em}
.industry-metric-card strong{font-family:var(--font-heading);font-size:34px;line-height:1;color:var(--text)}
.industry-metric-card small{color:var(--text-secondary);font-size:13px}
.industry-city-list{display:flex;flex-direction:column;gap:12px}
.industry-city-list__row{display:grid;grid-template-columns:minmax(140px,220px) 1fr 70px;align-items:center;gap:12px}
.industry-city-list__row span{font-weight:800;color:var(--text)}
.industry-city-list__row div{height:13px;border-radius:999px;background:rgba(255,255,255,.055);overflow:hidden}
.industry-city-list__row div i{display:block;width:var(--city-width);height:100%;border-radius:999px;background:linear-gradient(90deg,var(--primary),var(--secondary))}
.industry-city-list__row strong{text-align:right;color:var(--text-secondary);font-variant-numeric:tabular-nums}
.company-data-chip{display:inline-flex;align-items:center;min-height:28px;padding:0 10px;border-radius:999px;border:1px solid rgba(0,212,255,.24);background:rgba(0,212,255,.08);color:var(--secondary);font-size:12px;font-weight:900}
.heatmap-container{height:560px;min-height:420px;border:1px solid var(--border);border-radius:10px;overflow:hidden;background:#0A0E1A}
.heatmap-container .leaflet-container{font-family:var(--font-body)}
.company-panel-note{margin-top:12px;padding:12px 14px;border-radius:8px;border:1px solid var(--border);background:rgba(255,255,255,.035);color:var(--text-secondary);font-size:13px}
.company-panel-note--error{border-color:rgba(239,68,68,.35);background:rgba(239,68,68,.09);color:#fecaca}
.company-locked,.feature-locked{display:flex;align-items:center;justify-content:space-between;gap:18px;border:1px dashed rgba(99,91,255,.42);border-radius:10px;background:linear-gradient(135deg,rgba(99,91,255,.13),rgba(0,212,255,.05));padding:22px}
.company-locked__icon{width:42px;height:42px;border-radius:10px;background:rgba(99,91,255,.18);display:flex;align-items:center;justify-content:center;color:var(--secondary);font-weight:900}
.company-locked h3,.feature-locked h2{margin:0 0 6px;color:var(--text);font-family:var(--font-heading)}
.company-locked p,.feature-locked p{margin:0;color:var(--text-secondary)}
.feature-locked--large{min-height:320px;justify-content:center;text-align:left}
.feature-locked__content{max-width:520px;display:flex;flex-direction:column;align-items:flex-start;gap:12px}
.feature-locked__badge{display:inline-flex;align-items:center;min-height:26px;padding:0 10px;border-radius:999px;background:rgba(16,185,129,.13);border:1px solid rgba(16,185,129,.32);color:#86efac;font-size:12px;font-weight:900;text-transform:uppercase;letter-spacing:.06em}
.competitor-finder{display:flex;flex-direction:column;gap:8px}
.competitor-finder label{color:var(--text-muted);font-size:12px;font-weight:900;text-transform:uppercase;letter-spacing:.06em}
.competitor-finder__bar{display:grid;grid-template-columns:1fr auto;gap:10px}
.competitor-finder__bar input{min-height:44px}
.competitor-finder__results{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-top:16px}
.competitor-search-picks{grid-column:1/-1;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.competitor-search-picks button{border:1px solid var(--border);border-radius:9px;background:rgba(255,255,255,.035);color:var(--text);padding:12px;text-align:left;cursor:pointer;transition:border-color .15s,background-color .15s}
.competitor-search-picks button:hover{border-color:var(--primary);background:rgba(99,91,255,.12)}
.competitor-search-picks strong,.competitor-result-card strong{display:block;color:var(--text);font-weight:900}
.competitor-search-picks span,.competitor-result-card span{display:block;margin-top:3px;color:var(--text-secondary);font-size:12px}
.competitor-result-card{position:relative;border:1px solid var(--border);border-radius:10px;background:rgba(255,255,255,.035);padding:16px;min-height:128px;display:flex;flex-direction:column;gap:10px;transition:transform .15s,border-color .15s}
.competitor-result-card:hover{transform:translateY(-1px);border-color:rgba(0,212,255,.32)}
.competitor-result-card__score{position:absolute;top:14px;right:14px;min-width:58px;text-align:center;border-radius:999px;background:rgba(16,185,129,.13);border:1px solid rgba(16,185,129,.3);color:#86efac;font-weight:900;font-size:12px;padding:5px 8px}
.competitor-result-card p{margin:auto 0 0;color:var(--text-muted);font-size:12px}
.lead-quality-table-wrap{overflow-x:auto;border-radius:10px;border:1px solid var(--border)}
.lead-quality-table{width:100%;border-collapse:collapse;min-width:980px}
.lead-quality-table th,.lead-quality-table td{border-bottom:1px solid var(--border);padding:14px 12px;text-align:left;vertical-align:middle}
.lead-quality-table th{color:var(--text-muted);font-size:11px;text-transform:uppercase;letter-spacing:.06em;font-weight:900;background:rgba(255,255,255,.025)}
.lead-quality-table td{color:var(--text-secondary);font-size:13px}
.lead-quality-table td strong{display:block;color:var(--text);font-weight:900}
.lead-quality-table td span{display:block;margin-top:3px}
.lead-quality-table tr:hover td{background:rgba(255,255,255,.025)}
.lead-quality-table__empty{text-align:center!important;color:var(--text-muted)!important;padding:34px!important}
.lead-score-ring{--score-color:var(--primary);width:54px;height:54px;border-radius:50%;display:grid;place-items:center;background:conic-gradient(var(--score-color) calc(var(--score)*1%),rgba(255,255,255,.08) 0);position:relative}
.lead-score-ring:after{content:"";position:absolute;inset:5px;border-radius:50%;background:var(--surface)}
.lead-score-ring span{position:relative;z-index:1;margin:0!important;color:var(--text)!important;font-weight:900;font-variant-numeric:tabular-nums}
.lead-quality-tier-badge{display:inline-flex!important;align-items:center;justify-content:center;min-height:28px;padding:0 10px;border-radius:999px;font-size:12px;font-weight:900}
.lead-quality-tier-badge--a{background:rgba(16,185,129,.14);border:1px solid rgba(16,185,129,.35);color:#86efac}
.lead-quality-tier-badge--b{background:rgba(0,212,255,.12);border:1px solid rgba(0,212,255,.32);color:var(--secondary)}
.lead-quality-tier-badge--c{background:rgba(245,158,11,.13);border:1px solid rgba(245,158,11,.34);color:#fcd34d}
.lead-quality-tier-badge--d{background:rgba(239,68,68,.12);border:1px solid rgba(239,68,68,.34);color:#fca5a5}
.lead-signal-row{display:flex;flex-wrap:wrap;gap:6px}
.lead-signal-row span{display:inline-flex!important;margin:0!important;align-items:center;min-height:24px;padding:0 8px;border-radius:999px;background:rgba(255,255,255,.055);color:var(--text-secondary);font-size:11px;font-weight:800}
.lead-quality-modal{position:fixed;inset:0;z-index:1000;display:grid;place-items:center;padding:24px}
.lead-quality-modal[hidden]{display:none}
.lead-quality-modal__backdrop{position:absolute;inset:0;background:rgba(5,8,18,.78);backdrop-filter:blur(8px)}
.lead-quality-modal__panel{position:relative;width:min(620px,100%);border:1px solid var(--border);border-radius:12px;background:var(--surface);box-shadow:0 28px 80px rgba(0,0,0,.42);padding:24px}
.lead-quality-modal__close{position:absolute;top:12px;right:12px;width:34px;height:34px;border:1px solid var(--border);border-radius:8px;background:rgba(255,255,255,.04);color:var(--text);cursor:pointer;font-size:20px;line-height:1}
.lead-breakdown-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin:18px 0 22px}
.lead-breakdown-grid__item{border:1px solid var(--border);border-radius:10px;background:rgba(255,255,255,.035);padding:14px;display:flex;flex-direction:column;gap:8px}
.lead-breakdown-grid__item span{color:var(--text-muted);font-size:12px;font-weight:900;text-transform:uppercase;letter-spacing:.05em}
.lead-breakdown-grid__item strong{color:var(--text);font-size:20px}
.lead-breakdown-grid__item i{height:8px;border-radius:999px;background:linear-gradient(90deg,var(--primary) var(--breakdown),rgba(255,255,255,.08) 0)}
@media (max-width:1024px){
    .industry-dashboard{grid-template-columns:repeat(2,minmax(0,1fr))}
    .competitor-finder__results,.competitor-search-picks{grid-template-columns:1fr}
}
@media (max-width:768px){
    .industry-dashboard{grid-template-columns:1fr}
    .company-locked{align-items:flex-start;flex-direction:column}
    .competitor-finder__bar{grid-template-columns:1fr}
    .heatmap-container{height:420px}
    .industry-city-list__row{grid-template-columns:1fr}
    .industry-city-list__row strong{text-align:left}
    .lead-breakdown-grid{grid-template-columns:1fr}
}

/* === Search page export modal — inline styles extracted in Phase 7 cleanup === */
.modal.modal--export{max-width:500px}
.modal--export .field-label{display:block}
.modal--export label.flex{cursor:pointer}
.modal--export #exportEncoding{width:100%}