/* ============================================================
   FloraForce CRM — Styles
   ============================================================ */

:root{--bg:#0a0f0d;--surface:#111915;--surface2:#172118;--border:#1e2e22;--border2:#253529;--accent:#4ade80;--accent2:#22c55e;--accent-dim:rgba(74,222,128,0.12);--accent-dim2:rgba(74,222,128,0.06);--text:#e8f5ec;--text2:#9db8a4;--text3:#5a7562;--danger:#f87171;--warn:#fbbf24;--info:#60a5fa;--purple:#a78bfa;--radius:10px;--shadow:0 4px 24px rgba(0,0,0,.5)}
*{box-sizing:border-box;margin:0;padding:0}
body{font-family:'DM Sans',sans-serif;background:var(--bg);color:var(--text);min-height:100vh}

/* ── LOADING ── */
#loading-screen{position:fixed;inset:0;background:var(--bg);z-index:9999;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px}
.loader-logo{font-family:'Syne',sans-serif;font-size:32px;font-weight:800;color:var(--accent)}
.loader-bar{width:220px;height:4px;background:var(--border2);border-radius:2px;overflow:hidden}
.loader-fill{height:100%;background:var(--accent);border-radius:2px;transition:width .4s ease;width:0%}
.loader-msg{font-size:13px;color:var(--text3)}

/* ── LOGIN ── */
#login-screen{display:none;position:fixed;inset:0;background:var(--bg);z-index:8888;align-items:center;justify-content:center}
.login-card{background:var(--surface);border:1px solid var(--border2);border-radius:16px;padding:40px;width:100%;max-width:380px;box-shadow:var(--shadow)}
.login-logo{font-family:'Syne',sans-serif;font-size:24px;font-weight:800;color:var(--accent);text-align:center;margin-bottom:6px}
.login-sub{font-size:13px;color:var(--text3);text-align:center;margin-bottom:28px}
.login-field{display:flex;flex-direction:column;gap:6px;margin-bottom:14px}
.login-field label{font-size:11px;text-transform:uppercase;letter-spacing:.8px;color:var(--text3);font-weight:600}
.login-input{background:var(--bg);border:1px solid var(--border2);color:var(--text);border-radius:8px;padding:10px 12px;font-size:14px;font-family:'DM Sans',sans-serif;transition:border-color .2s}
.login-input:focus{outline:none;border-color:var(--accent)}
.login-btn{width:100%;padding:12px;background:var(--accent);color:#0a0f0d;border:none;border-radius:8px;font-size:14px;font-weight:700;font-family:'Syne',sans-serif;cursor:pointer;transition:background .15s;margin-top:6px}
.login-btn:hover{background:var(--accent2)}
.login-btn:disabled{opacity:.5;cursor:not-allowed}
.login-error{background:rgba(248,113,113,.1);border:1px solid rgba(248,113,113,.3);color:var(--danger);border-radius:8px;padding:10px 12px;font-size:13px;display:none;margin-top:8px}

/* ── LAYOUT ── */
#app{display:none}
#app.app-visible{display:grid;grid-template-columns:260px 1fr;grid-template-rows:110px 1fr;height:100vh;overflow:hidden}

/* ── TOPBAR ── */
#topbar{grid-column:1/-1;background:var(--surface);border-bottom:1px solid var(--border);display:flex;align-items:center;gap:12px;padding:0 20px;position:sticky;top:0;z-index:100;height:110px;overflow:visible}
.logo{font-family:'Syne',sans-serif;font-weight:800;font-size:18px;color:var(--accent);letter-spacing:-.5px;white-space:nowrap;display:flex;align-items:center;gap:6px}
.logo span{color:var(--text2);font-weight:400;font-size:12px;margin-left:6px}
.topbar-stats{display:flex;gap:10px;margin-left:auto}
.tstat{display:flex;flex-direction:column;align-items:center;background:var(--accent-dim2);border:1px solid var(--border2);border-radius:8px;padding:4px 10px}
.tstat-val{font-family:'Syne',sans-serif;font-size:14px;font-weight:700;color:var(--accent)}
.tstat-lbl{font-size:9px;color:var(--text3);text-transform:uppercase;letter-spacing:.5px}
.topbar-right{display:flex;align-items:center;gap:8px;margin-left:12px}
.user-chip{display:flex;align-items:center;gap:6px;background:var(--surface2);border:1px solid var(--border2);border-radius:8px;padding:5px 10px;font-size:12px}
.user-role{font-size:10px;color:var(--text3)}
.tab-btn{padding:6px 12px;border-radius:8px;border:1px solid var(--border2);background:transparent;color:var(--text2);cursor:pointer;font-size:12px;font-weight:500;font-family:'DM Sans',sans-serif;transition:all .15s}
.tab-btn:hover,.tab-btn.active{border-color:var(--accent);color:var(--accent);background:var(--accent-dim)}
.sync-indicator{font-size:11px;color:var(--text3);display:flex;align-items:center;gap:5px}
.sync-dot{width:7px;height:7px;border-radius:50%;background:var(--accent);display:inline-block}
.sync-dot.syncing{background:var(--warn);animation:blink .5s infinite}
.sync-dot.error{background:var(--danger);animation:none}
@keyframes blink{0%,100%{opacity:1}50%{opacity:.3}}
.btn-logout{background:transparent;border:1px solid var(--border2);color:var(--text3);border-radius:8px;padding:5px 10px;cursor:pointer;font-size:11px;font-family:'DM Sans',sans-serif;transition:all .15s}
.btn-logout:hover{border-color:var(--danger);color:var(--danger)}

/* ── SIDEBAR ── */
#sidebar{background:var(--surface);border-right:1px solid var(--border);padding:16px;overflow-y:auto;display:flex;flex-direction:column;gap:12px}
.sidebar-section{display:flex;flex-direction:column;gap:6px}
.sidebar-label{font-size:10px;text-transform:uppercase;letter-spacing:1px;color:var(--text3);font-weight:600;padding:0 4px}
.filter-input{background:var(--bg);border:1px solid var(--border2);color:var(--text);border-radius:8px;padding:8px 10px;font-size:13px;font-family:'DM Sans',sans-serif;width:100%;transition:border-color .2s}
.filter-input:focus{outline:none;border-color:var(--accent)}
.filter-select{appearance:none;cursor:pointer}
.filter-chips{display:flex;flex-wrap:wrap;gap:4px}
.chip{background:var(--accent-dim2);border:1px solid var(--border2);color:var(--text2);border-radius:20px;padding:4px 10px;font-size:11px;cursor:pointer;transition:all .15s;white-space:nowrap}
.chip:hover{border-color:var(--accent);color:var(--accent)}
.chip.active{background:var(--accent-dim);border-color:var(--accent);color:var(--accent);font-weight:600}
.progress-wrap{margin-top:4px}
.progress-label{display:flex;justify-content:space-between;font-size:11px;color:var(--text2);margin-bottom:4px}
.progress-bar{background:var(--border2);border-radius:4px;height:6px;overflow:hidden}
.progress-fill{background:linear-gradient(90deg,var(--accent2),var(--accent));height:100%;border-radius:4px;transition:width .4s ease}
.sidebar-divider{border:none;border-top:1px solid var(--border);margin:4px 0}
.kpi-mini{display:grid;grid-template-columns:1fr 1fr;gap:6px}
.kpi-m{background:var(--bg);border:1px solid var(--border2);border-radius:8px;padding:8px}
.kpi-m-val{font-family:'Syne',sans-serif;font-size:16px;font-weight:700;color:var(--accent)}
.kpi-m-lbl{font-size:10px;color:var(--text3)}

/* ── MAIN ── */
#main{overflow-y:auto;display:flex;flex-direction:column}
.tabs{display:flex;border-bottom:1px solid var(--border);background:var(--surface);padding:0 20px;position:sticky;top:0;z-index:50}
.tab{padding:14px 18px;font-size:13px;font-weight:500;cursor:pointer;border-bottom:2px solid transparent;color:var(--text3);transition:all .15s;white-space:nowrap}
.tab:hover{color:var(--text2)}
.tab.active{color:var(--accent);border-bottom-color:var(--accent)}

/* ── TABLE ── */
#leads-container{padding:16px;flex:1}
.leads-toolbar{display:flex;gap:8px;margin-bottom:12px;align-items:center;flex-wrap:wrap}
.leads-count{font-size:12px;color:var(--text3)}
.leads-count strong{color:var(--accent)}
.btn{display:inline-flex;align-items:center;gap:6px;padding:7px 14px;border-radius:8px;font-size:12px;font-weight:500;cursor:pointer;border:1px solid;transition:all .15s;font-family:'DM Sans',sans-serif}
.btn-primary{background:var(--accent);color:#0a0f0d;border-color:var(--accent)}
.btn-primary:hover{background:var(--accent2)}
.btn-ghost{background:transparent;color:var(--text2);border-color:var(--border2)}
.btn-ghost:hover{border-color:var(--accent);color:var(--accent)}
.btn-ghost.active{background:var(--accent-dim);border-color:var(--accent);color:var(--accent);font-weight:600}
input[type=number]::-webkit-outer-spin-button,
input[type=number]::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
input[type=number]{-moz-appearance:textfield;appearance:textfield}
.notif-wrap{position:relative}
.notif-btn{position:relative;background:transparent;border:1px solid var(--border2);color:var(--text2);border-radius:8px;padding:6px 10px;cursor:pointer;font-size:14px;transition:all .15s}
.notif-btn:hover{border-color:var(--accent);color:var(--accent)}
.notif-badge{position:absolute;top:-6px;right:-6px;background:var(--danger);color:#fff;border-radius:10px;font-size:10px;font-weight:700;padding:2px 6px;min-width:18px;text-align:center;line-height:1}
.notif-dropdown{position:absolute;top:calc(100% + 8px);right:0;background:var(--surface);border:1px solid var(--border);border-radius:10px;box-shadow:0 8px 24px rgba(0,0,0,.2);min-width:320px;max-width:380px;max-height:420px;overflow-y:auto;z-index:1000;padding:8px}
.notif-item{display:flex;flex-direction:column;gap:2px;padding:10px 12px;border-radius:8px;cursor:pointer;border-bottom:1px solid var(--border2)}
.notif-item:last-child{border-bottom:none}
.notif-item:hover{background:var(--surface2)}
.notif-empty{padding:16px;text-align:center;color:var(--text3);font-size:12px}
.notif-header{font-size:11px;font-weight:600;color:var(--text3);text-transform:uppercase;padding:6px 12px 8px;border-bottom:1px solid var(--border2);margin-bottom:4px}
.btn-danger{background:transparent;color:var(--danger);border-color:var(--danger)}
.leads-table-wrap{overflow-x:auto;border-radius:var(--radius);border:1px solid var(--border)}
table{width:100%;border-collapse:collapse;font-size:12px}
thead{background:var(--surface2);position:sticky;top:0;z-index:10}
thead th{padding:10px 12px;text-align:left;font-size:10px;text-transform:uppercase;letter-spacing:.8px;color:var(--text3);font-weight:600;white-space:nowrap;border-bottom:1px solid var(--border)}
tbody tr{border-bottom:1px solid var(--border);transition:background .1s;cursor:pointer}
tbody tr:hover{background:var(--accent-dim2)}
tbody tr.priority-row{background:rgba(251,191,36,.04)}
tbody td{padding:10px 12px;vertical-align:middle}
.td-company{font-weight:500;color:var(--text);max-width:180px}
.td-company small{display:block;color:var(--text3);font-size:10px;margin-top:1px}
.badge{display:inline-flex;align-items:center;padding:2px 8px;border-radius:20px;font-size:10px;font-weight:600;white-space:nowrap}
.badge-novo{background:rgba(96,165,250,.12);color:var(--info);border:1px solid rgba(96,165,250,.2)}
.badge-contatado{background:rgba(251,191,36,.12);color:var(--warn);border:1px solid rgba(251,191,36,.2)}
.badge-proposta{background:rgba(167,139,250,.12);color:var(--purple);border:1px solid rgba(167,139,250,.2)}
.badge-cliente{background:rgba(74,222,128,.12);color:var(--accent);border:1px solid rgba(74,222,128,.2)}
.priority-star{color:var(--warn);font-size:13px}
.tag-pill{display:inline-flex;padding:1px 6px;background:var(--accent-dim);color:var(--accent);border-radius:4px;font-size:9px;margin:1px}
.pagination{display:flex;align-items:center;gap:6px;padding:12px 16px;border-top:1px solid var(--border);justify-content:center;flex-wrap:wrap}
.page-btn{background:var(--surface2);border:1px solid var(--border2);color:var(--text2);border-radius:6px;padding:5px 10px;cursor:pointer;font-size:12px;transition:all .15s}
.page-btn:hover{border-color:var(--accent);color:var(--accent)}
.page-btn.active{background:var(--accent);color:#0a0f0d;border-color:var(--accent);font-weight:700}
.page-btn:disabled{opacity:.3;cursor:not-allowed}

/* ── MODAL ── */
.modal-overlay{position:fixed;inset:0;background:rgba(0,0,0,.7);backdrop-filter:blur(4px);z-index:999;display:flex;align-items:center;justify-content:center;padding:20px}
.modal{background:var(--surface);border:1px solid var(--border2);border-radius:14px;width:100%;max-width:700px;max-height:90vh;overflow-y:auto;box-shadow:var(--shadow)}
.modal-header{padding:20px 24px 16px;border-bottom:1px solid var(--border);display:flex;align-items:flex-start;justify-content:space-between;gap:12px}
.modal-title{font-family:'Syne',sans-serif;font-size:18px;font-weight:700}
.modal-subtitle{font-size:12px;color:var(--text3);margin-top:2px}
.modal-close{background:none;border:none;color:var(--text3);cursor:pointer;font-size:20px;padding:4px;line-height:1;transition:color .15s}
.modal-close:hover{color:var(--danger)}
.modal-body{padding:20px 24px;display:flex;flex-direction:column;gap:16px}
.modal-section{display:flex;flex-direction:column;gap:8px}
.modal-section-title{font-size:10px;text-transform:uppercase;letter-spacing:1px;color:var(--text3);font-weight:600}
.info-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.info-item{background:var(--bg);border:1px solid var(--border);border-radius:8px;padding:10px 12px}
.info-item-lbl{font-size:10px;color:var(--text3);margin-bottom:2px}
.info-item-val{font-size:13px;color:var(--text);word-break:break-all}
.info-item-val a{color:var(--accent);text-decoration:none}
.status-row{display:flex;gap:8px;flex-wrap:wrap}
.status-btn{padding:7px 14px;border-radius:8px;border:1px solid var(--border2);background:var(--bg);color:var(--text2);cursor:pointer;font-size:12px;font-weight:500;transition:all .15s;font-family:'DM Sans',sans-serif}
.status-btn:hover{border-color:var(--accent);color:var(--accent)}
.status-btn.sel{border-color:var(--accent);background:var(--accent-dim);color:var(--accent)}
.modal-textarea{background:var(--bg);border:1px solid var(--border2);color:var(--text);border-radius:8px;padding:10px 12px;font-family:'DM Sans',sans-serif;font-size:13px;resize:vertical;width:100%;min-height:80px}
.modal-textarea:focus{outline:none;border-color:var(--accent)}
.tags-input-row{display:flex;gap:6px}
.tags-input{flex:1;background:var(--bg);border:1px solid var(--border2);color:var(--text);border-radius:8px;padding:8px 10px;font-size:12px;font-family:'DM Sans',sans-serif}
.tags-input:focus{outline:none;border-color:var(--accent)}
.tags-display{display:flex;flex-wrap:wrap;gap:4px;margin-top:4px}
.tag-rm{display:inline-flex;align-items:center;gap:4px;background:var(--accent-dim);border:1px solid var(--border2);color:var(--text2);border-radius:6px;padding:3px 8px;font-size:11px}
.tag-rm button{background:none;border:none;color:var(--text3);cursor:pointer;font-size:12px;padding:0;line-height:1}
.tag-rm button:hover{color:var(--danger)}
.call-log{background:var(--bg);border:1px solid var(--border);border-radius:8px;padding:12px;font-size:12px;color:var(--text2)}
.sales-card{background:linear-gradient(135deg,rgba(74,222,128,.08),rgba(34,197,94,.03));border:1px solid rgba(74,222,128,.2);border-radius:8px;padding:12px 16px}
.sales-card-val{font-family:'Syne',sans-serif;font-size:22px;font-weight:700;color:var(--accent)}
.sales-card-sub{font-size:11px;color:var(--text3)}
.modal-footer{padding:16px 24px;border-top:1px solid var(--border);display:flex;gap:8px;justify-content:flex-end;flex-wrap:wrap}
.priority-toggle{display:flex;align-items:center;gap:8px;cursor:pointer}
.priority-toggle input{accent-color:var(--warn);width:14px;height:14px;cursor:pointer}

/* ── TIMELINE ── */
.timeline{display:flex;flex-direction:column;position:relative}
.timeline::before{content:'';position:absolute;left:15px;top:8px;bottom:8px;width:2px;background:var(--border2);border-radius:2px}
.tl-entry{display:flex;gap:12px;align-items:flex-start;padding-bottom:14px}
.tl-dot{width:10px;height:10px;border-radius:50%;background:var(--accent);border:2px solid var(--bg);flex-shrink:0;margin-top:5px;z-index:1}
.tl-body{flex:1;background:var(--bg);border:1px solid var(--border);border-radius:8px;padding:9px 12px}
.tl-meta{display:flex;justify-content:space-between;align-items:center;margin-bottom:4px;flex-wrap:wrap;gap:4px}
.tl-vendor{font-size:11px;font-weight:600;color:var(--accent)}
.tl-date{font-size:10px;color:var(--text3)}
.tl-text{font-size:12px;color:var(--text2);line-height:1.5}
.tl-empty{font-size:12px;color:var(--text3);text-align:center;padding:16px}
.tl-add{display:flex;gap:8px;align-items:flex-end;margin-top:6px}
.tl-add textarea{flex:1;background:var(--bg);border:1px solid var(--border2);color:var(--text);border-radius:8px;padding:8px 10px;font-size:12px;font-family:'DM Sans',sans-serif;resize:none;min-height:60px;transition:border-color .2s}
.tl-add textarea:focus{outline:none;border-color:var(--accent)}

/* ── DASHBOARD ── */
#dash-container{padding:20px;display:flex;flex-direction:column;gap:16px}
.kpi-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px}
.kpi-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:16px}
.kpi-card-val{font-family:'Syne',sans-serif;font-size:26px;font-weight:800;line-height:1}
.kpi-card-lbl{font-size:11px;color:var(--text3);margin-top:4px}
.kpi-card.green .kpi-card-val{color:var(--accent)}
.kpi-card.blue .kpi-card-val{color:var(--info)}
.kpi-card.teal .kpi-card-val{color:#34d399}
.kpi-card.yellow .kpi-card-val{color:var(--warn)}
.kpi-card.purple .kpi-card-val{color:var(--purple)}
.chart-row{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.chart-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:16px}
.chart-title{font-family:'Syne',sans-serif;font-size:13px;font-weight:700;margin-bottom:14px;color:var(--text2)}
.bar-chart{display:flex;flex-direction:column;gap:8px}
.bar-row{display:flex;align-items:center;gap:8px}
.bar-label{font-size:11px;color:var(--text3);width:130px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex-shrink:0}
.bar-track{flex:1;background:var(--border2);border-radius:4px;height:10px;overflow:hidden}
.bar-fill{height:100%;border-radius:4px;background:linear-gradient(90deg,var(--accent2),var(--accent))}
.bar-val{font-size:10px;color:var(--text2);width:55px;text-align:right;flex-shrink:0}

/* ── ADMIN PANEL ── */
#admin-panel{display:none;padding:20px;flex-direction:column;gap:16px;overflow-y:auto}
.admin-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.admin-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:18px;display:flex;flex-direction:column;gap:10px}
.admin-card-title{font-family:'Syne',sans-serif;font-size:13px;font-weight:700}
.admin-card-full{grid-column:1/-1}
.users-table{width:100%;border-collapse:collapse;font-size:12px}
.users-table th{padding:8px 10px;text-align:left;font-size:10px;text-transform:uppercase;letter-spacing:.8px;color:var(--text3);font-weight:600;border-bottom:1px solid var(--border)}
.users-table td{padding:9px 10px;border-bottom:1px solid var(--border2);vertical-align:middle}
.role-badge{padding:2px 8px;border-radius:20px;font-size:10px;font-weight:600}
.role-admin{background:rgba(248,113,113,.12);color:var(--danger);border:1px solid rgba(248,113,113,.2)}
.role-vendor{background:var(--accent-dim);color:var(--accent);border:1px solid rgba(74,222,128,.2)}
.kanban-wrap{display:flex;gap:12px;overflow-x:auto;padding-bottom:8px}
.kanban-col{background:var(--surface2);border:1px solid var(--border2);border-radius:10px;min-width:200px;flex-shrink:0;display:flex;flex-direction:column}
.kanban-col-header{padding:10px 14px;font-size:11px;font-weight:700;color:var(--text2);border-bottom:1px solid var(--border2);display:flex;justify-content:space-between;align-items:center}
.kanban-col-header span{background:var(--border2);color:var(--text3);border-radius:20px;padding:1px 8px;font-size:10px}
.kanban-col-body{padding:8px;display:flex;flex-direction:column;gap:6px;min-height:80px}
.kanban-col-body.drag-over{background:var(--accent-dim2);border-radius:8px}
.kanban-card{background:var(--surface);border:1px solid var(--border);border-radius:8px;padding:8px 10px;font-size:12px;cursor:grab;transition:all .15s;user-select:none}
.kanban-card:hover{border-color:var(--accent);background:var(--accent-dim2)}
.kanban-card.dragging{opacity:.4;cursor:grabbing}
.kanban-card-name{font-weight:500;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:160px}
.kanban-card-state{font-size:10px;color:var(--text3);margin-top:2px}
.activity-list{display:flex;flex-direction:column;gap:4px;max-height:360px;overflow-y:auto}
.activity-item{display:flex;gap:10px;align-items:flex-start;padding:8px 10px;background:var(--bg);border:1px solid var(--border);border-radius:8px}
.act-icon{font-size:14px;flex-shrink:0}
.act-body{flex:1;font-size:12px;color:var(--text2);line-height:1.5}
.act-body strong{color:var(--text)}
.act-time{font-size:10px;color:var(--text3);white-space:nowrap}
.add-user-form{display:flex;flex-direction:column;gap:8px}
.form-row{display:flex;gap:8px}
.form-input{flex:1;background:var(--bg);border:1px solid var(--border2);color:var(--text);border-radius:8px;padding:8px 10px;font-size:13px;font-family:'DM Sans',sans-serif}
.form-input:focus{outline:none;border-color:var(--accent)}
.form-select{background:var(--bg);border:1px solid var(--border2);color:var(--text);border-radius:8px;padding:8px 10px;font-size:13px;font-family:'DM Sans',sans-serif;cursor:pointer}

/* ── ANALYTICS ── */
#analytics-container{padding:20px;display:flex;flex-direction:column;gap:16px}
.analytics-toolbar{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:12px}
.analytics-title{font-family:'Syne',sans-serif;font-size:18px;font-weight:800}
.analytics-controls{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.date-presets{display:flex;gap:4px;flex-wrap:wrap}
.preset-btn{background:var(--surface2);border:1px solid var(--border2);color:var(--text2);border-radius:6px;padding:5px 10px;cursor:pointer;font-size:11px;font-family:'DM Sans',sans-serif;transition:all .15s}
.preset-btn:hover{border-color:var(--accent);color:var(--accent)}
.preset-btn.active{background:var(--accent-dim);border-color:var(--accent);color:var(--accent);font-weight:600}
.date-custom{display:flex;align-items:center;gap:6px}
.date-custom input{background:var(--bg);border:1px solid var(--border2);color:var(--text);border-radius:6px;padding:5px 8px;font-size:11px;font-family:'DM Sans',sans-serif}
.date-custom input:focus{outline:none;border-color:var(--accent)}
.analytics-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:16px}
.analytics-table-wrap{overflow-x:auto}
.analytics-table{width:100%;border-collapse:collapse;font-size:12px}
.analytics-table th{padding:8px 10px;text-align:left;font-size:10px;text-transform:uppercase;letter-spacing:.8px;color:var(--text3);font-weight:600;border-bottom:1px solid var(--border2);white-space:nowrap}
.analytics-table td{padding:9px 10px;border-bottom:1px solid var(--border2)}
.analytics-table td.num{text-align:right;font-family:'Syne',sans-serif;font-weight:600}
.analytics-table .conv-rate{font-weight:700}
.analytics-table .conv-rate.high{color:var(--accent)}
.analytics-table .conv-rate.mid{color:var(--warn)}
.analytics-table .conv-rate.low{color:var(--danger)}

/* ── TOAST ── */
.toast{position:fixed;bottom:20px;right:20px;background:var(--surface2);border:1px solid var(--accent);color:var(--accent);border-radius:10px;padding:10px 16px;font-size:13px;z-index:9999;animation:slideIn .3s ease;box-shadow:var(--shadow)}
@keyframes slideIn{from{transform:translateY(20px);opacity:0}to{transform:translateY(0);opacity:1}}
.empty-state{text-align:center;padding:60px 20px;color:var(--text3)}
.empty-state h3{font-size:16px;color:var(--text2);margin-bottom:6px}
::-webkit-scrollbar{width:6px;height:6px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:var(--border2);border-radius:3px}
::-webkit-scrollbar-thumb:hover{background:var(--text3)}

/* ── RESPONSIVE ── */
@media(max-width:768px){
  #app.app-visible{grid-template-columns:1fr;grid-template-rows:90px 1fr}
  #sidebar{display:none}
  #topbar{padding:0 12px;gap:8px}
  .topbar-stats{gap:6px}
  .tstat{padding:3px 7px}
  .tstat-val{font-size:12px}
  .tstat-lbl{font-size:8px}
  .topbar-right{gap:5px}
  .user-chip{display:none}
  .sync-indicator{display:none}
  .chart-row,.admin-grid{grid-template-columns:1fr}
  .modal{max-width:100%;border-radius:0;max-height:100vh;height:100vh}
  .modal-overlay{padding:0}
  .info-grid{grid-template-columns:1fr}
}