@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');
*{box-sizing:border-box;margin:0;padding:0}
:root{
  /* Dark Glass palette */
  --bg:#0b0f1a;
  --bg2:#111827;
  --bg3:#1a2235;
  --bg4:#1e293b;
  --accent:#818cf8;
  --accent2:#a78bfa;
  --text:#e2e8f5;
  --text2:#a3adc2;
  --text3:#828da0;
  --border:rgba(255,255,255,.07);
  --border2:rgba(255,255,255,.12);
  --red:#f87171;
  --green:#34d399;
  --yellow:#fbbf24;
  --orange:#fb923c;
  --card-r:12px;--r:8px;
}
/* LIGHT THEME */
body.light{
  --bg:#f0f4fb;--bg2:#ffffff;--bg3:#f5f7fc;--bg4:#e8ecf5;
  --accent:#5b52e8;--accent2:#7c6ff7;
  --text:#1a1b2e;--text2:#4a4b6a;--text3:#8a8baa;
  --border:#dde0f0;--border2:#c8ccdf;
  --red:#dc2626;--green:#16a34a;--yellow:#ca8a04;--orange:#ea580c;
}
body.light ::-webkit-scrollbar-track{background:var(--bg3)}
body.light ::-webkit-scrollbar-thumb{background:var(--border2)}
/* THEME TOGGLE BUTTON */
.theme-toggle{display:flex;align-items:center;justify-content:center;width:32px;height:32px;border-radius:8px;border:1px solid var(--border2);background:var(--bg3);color:var(--text2);cursor:pointer;font-size:16px;transition:all .2s;flex-shrink:0}
.ksef-status-pill{display:none;align-items:center;gap:.35rem;height:32px;padding:0 .7rem;border-radius:16px;border:1px solid var(--border2);background:var(--bg3);cursor:pointer;font-size:11px;line-height:1;white-space:nowrap;transition:all .2s;flex-shrink:0}
.ksef-status-pill:hover{border-color:var(--accent2)}
.ksef-status-pill #ksef-status-dot{width:8px;height:8px;border-radius:50%;background:var(--text3);display:inline-block;flex-shrink:0}
.ksef-status-pill #ksef-status-text{font-size:11px;line-height:1}
.theme-toggle:hover{background:var(--bg4);color:var(--text)}
/* COLUMN FILTER */
.col-filter-wrap{position:relative;display:inline-block}
.col-filter-btn{display:flex;align-items:center;gap:.35rem;padding:.35rem .8rem;border-radius:6px;font-size:12px;font-weight:500;cursor:pointer;border:1px solid var(--border2);background:var(--bg3);color:var(--text2);transition:all .2s}
.col-filter-btn:hover{background:var(--bg4);color:var(--text)}
.col-filter-dropdown{display:none;position:absolute;right:0;top:calc(100% + 4px);background:var(--bg2);border:1px solid var(--border2);border-radius:var(--card-r);padding:.75rem;min-width:200px;z-index:50;box-shadow:0 4px 20px #00000033}
.col-filter-dropdown.open{display:block}
.col-filter-item{display:flex;align-items:center;gap:.5rem;padding:.35rem .4rem;border-radius:6px;cursor:pointer;transition:background .15s;user-select:none;font-size:13px;color:var(--text2)}
.col-filter-item:hover{background:var(--bg3);color:var(--text)}
.col-filter-item input[type=checkbox]{width:14px;height:14px;accent-color:var(--accent);cursor:pointer;flex-shrink:0}
body{background:var(--bg);color:var(--text);font-family:'Inter',system-ui,sans-serif;font-size:14px;min-height:100vh}
/* AUTH */
.auth-screen{display:flex;align-items:center;justify-content:center;min-height:100vh;padding:2rem}
.auth-box{background:var(--bg2);border:1px solid var(--border2);border-radius:var(--card-r);padding:2.5rem;width:100%;max-width:420px}
.logo{display:flex;align-items:center;gap:10px;margin-bottom:2rem}
.logo-icon{width:40px;height:40px;background:var(--accent);border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:20px}
.logo h1{font-size:20px;font-weight:700}
.auth-title{font-size:22px;font-weight:700;margin-bottom:.35rem}
.auth-sub{color:var(--text2);font-size:13px;margin-bottom:2rem;line-height:1.5}
.field{margin-bottom:1.1rem}
.field label{display:block;font-size:11px;font-weight:600;color:var(--text2);margin-bottom:.45rem;text-transform:uppercase;letter-spacing:.06em}
.field input[type=text],.field input[type=email],.field input[type=password],.field input[type=tel],.field input[type=number],.field input[type=date],.field select{width:100%;background:var(--bg3);border:1px solid var(--border2);border-radius:var(--r);padding:.7rem 1rem;color:var(--text);font-size:14px;outline:none;transition:border .2s}
.field input:focus,.field select:focus{border-color:var(--accent)}
.remember-row{display:flex;align-items:center;gap:.5rem;margin-bottom:1.1rem;cursor:pointer}
.remember-row input[type=checkbox]{width:16px;height:16px;accent-color:var(--accent);cursor:pointer}
.remember-row span{font-size:13px;color:var(--text2)}
.btn-primary{width:100%;background:var(--accent);color:#fff;border:none;border-radius:var(--r);padding:.8rem;font-size:14px;font-weight:600;cursor:pointer;transition:opacity .2s}
.btn-primary:hover{opacity:.9}
.btn-primary:disabled{opacity:.5;cursor:not-allowed}
.auth-switch{font-size:12px;color:var(--text3);text-align:center;margin-top:1.25rem}
.auth-switch a{color:var(--accent2);cursor:pointer}
.auth-switch a:hover{text-decoration:underline}
.err-msg{color:var(--red);font-size:12px;margin-bottom:.75rem;padding:.5rem .75rem;background:#f8717111;border-radius:6px;border:1px solid #f8717133;display:none}
.ok-msg{color:var(--green);font-size:12px;margin-bottom:.75rem;padding:.5rem .75rem;background:#34d39911;border-radius:6px;border:1px solid #34d39933;display:none}
.strength-bar{height:3px;border-radius:2px;background:var(--bg4);margin-top:.4rem;overflow:hidden}
.strength-fill{height:100%;border-radius:2px;transition:width .3s,background .3s}
/* EMAIL CONFIRM */
#confirm-screen{display:none;align-items:center;justify-content:center;min-height:100vh;padding:2rem}
.confirm-box{background:var(--bg2);border:1px solid var(--border2);border-radius:var(--card-r);padding:2.5rem;width:100%;max-width:420px;text-align:center}
.code-inputs{display:flex;gap:.5rem;justify-content:center;margin:1.5rem 0}
.code-inputs input{width:48px;height:56px;background:var(--bg3);border:1px solid var(--border2);border-radius:var(--r);text-align:center;font-size:22px;font-weight:700;color:var(--text);outline:none;transition:border .2s}
.code-inputs input:focus{border-color:var(--accent)}
.resend-link{font-size:12px;color:var(--text3);cursor:pointer;margin-top:.5rem;display:inline-block}
.resend-link:hover{color:var(--accent2)}
/* APP */
#app{display:none;flex-direction:column;min-height:100vh}
nav{background:rgba(17,24,39,.95);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-bottom:1px solid var(--border);padding:0 1.5rem;display:flex;align-items:center;justify-content:space-between;height:52px;position:sticky;top:0;z-index:100}
.nav-left{display:flex;align-items:center;gap:1rem}
.nav-logo{font-size:15px;font-weight:700;display:flex;align-items:center;gap:8px;letter-spacing:-.02em}
.nav-logo-dot{width:7px;height:7px;background:var(--accent);border-radius:50%;box-shadow:0 0 8px var(--accent)}
.nav-tabs{display:flex;gap:.1rem}
.nav-tab{padding:.4rem .85rem;border-radius:var(--r);font-size:12px;color:var(--text2);cursor:pointer;transition:all .15s;border:none;background:none;font-weight:500}
.nav-tab:hover{background:var(--bg3);color:var(--text)}
.nav-tab.active{background:rgba(129,140,248,.1);color:var(--accent);font-weight:600;border:1px solid rgba(129,140,248,.2)}
.nav-right{display:flex;align-items:center;gap:.75rem}
.user-pill{display:flex;align-items:center;gap:.5rem;background:var(--bg3);border-radius:20px;padding:.35rem .75rem .35rem .5rem;font-size:12px;color:var(--text2);border:1px solid var(--border);max-width:280px;flex-wrap:nowrap;white-space:nowrap}
.user-pill #nav-user{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:110px}
.user-avatar{width:24px;height:24px;background:linear-gradient(135deg,var(--accent),var(--accent2));border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:10px;font-weight:700;color:#fff;flex-shrink:0}
.btn-sm{padding:.35rem .8rem;border-radius:6px;font-size:12px;font-weight:500;cursor:pointer;border:1px solid var(--border2);background:var(--bg3);color:var(--text2);transition:all .15s}
.btn-sm:hover{background:var(--bg4);color:var(--text)}
main{flex:1;padding:1.5rem;max-width:1400px;width:100%;margin:0 auto}
.tab-content{display:none}.tab-content.active{display:block}
/* CARDS & KPI */
.card{background:var(--bg2);border:1px solid var(--border);border-radius:var(--card-r);padding:1.25rem}
.card-title{font-size:11px;font-weight:600;color:var(--text3);text-transform:uppercase;letter-spacing:.07em;margin-bottom:1rem}
.kpi-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(148px,1fr));gap:1rem;margin-bottom:1.5rem}
.kpi{background:var(--bg2);border:1px solid var(--border);border-radius:var(--card-r);padding:1rem 1.1rem}
.kpi-label{font-size:11px;color:var(--text3);text-transform:uppercase;letter-spacing:.06em;margin-bottom:.4rem}
.kpi-val{font-size:20px;font-weight:700}
.kpi-val.green{color:var(--green)}.kpi-val.red{color:var(--red)}.kpi-val.yellow{color:var(--yellow)}.kpi-val.orange{color:var(--orange)}
.kpi-sub{font-size:11px;color:var(--text3);margin-top:.25rem}
/* ALERT BANNER — for margin warnings */
.alert-banner{display:flex;align-items:center;gap:.75rem;padding:.75rem 1rem;border-radius:var(--r);font-size:13px;margin-bottom:1.25rem}
.alert-banner.warn{background:#f8717111;border:1px solid #f8717133;color:var(--red)}
.alert-banner.ok{background:#34d39911;border:1px solid #34d39933;color:var(--green)}
.alert-banner.info{background:#6c63ff11;border:1px solid #6c63ff33;color:var(--accent2)}
/* TABLE */
.tbl-wrap{overflow-x:auto}
table{width:100%;border-collapse:collapse}
th{font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.05em;color:var(--text3);padding:.6rem .75rem;text-align:left;border-bottom:1px solid var(--border);white-space:nowrap}
td{padding:.65rem .75rem;border-bottom:1px solid var(--border);font-size:13px}
tr:last-child td{border-bottom:none}
tr:hover td{background:var(--bg3)}
.badge{display:inline-flex;align-items:center;padding:.2rem .55rem;border-radius:4px;font-size:11px;font-weight:600}
.badge-green{background:#34d39922;color:var(--green)}.badge-red{background:#f8717122;color:var(--red)}
.badge-yellow{background:#fbbf2422;color:var(--yellow)}.badge-orange{background:#fb923c22;color:var(--orange)}
.badge-blue{background:#6c63ff22;color:var(--accent2)}.badge-gray{background:#ffffff11;color:var(--text2)}
/* IMPORT */
.import-zone{border:2px dashed var(--border2);border-radius:var(--card-r);padding:2.5rem;text-align:center;cursor:pointer;transition:all .2s;background:var(--bg2)}
.import-zone:hover,.import-zone.over{border-color:var(--accent);background:#6c63ff11}
#file-input{display:none}
.alert{padding:.75rem 1rem;border-radius:var(--r);font-size:13px;margin-bottom:1rem}
.alert-info{background:#6c63ff11;border:1px solid #6c63ff33;color:var(--accent2)}
.alert-success{background:#34d39911;border:1px solid #34d39933;color:var(--green)}
.alert-err{background:#f8717111;border:1px solid #f8717133;color:var(--red)}
.import-card{background:var(--bg2);border:1px solid var(--border);border-radius:var(--card-r);padding:1rem 1.25rem;display:flex;align-items:center;gap:1rem;margin-bottom:.75rem;transition:border .2s}
.import-card.active-import{border-color:var(--accent)}
.import-card-icon{width:40px;height:40px;background:var(--bg3);border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:18px;flex-shrink:0}
.import-card-body{flex:1;min-width:0}
.import-card-name{font-size:14px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.import-card-meta{font-size:12px;color:var(--text3);margin-top:.2rem}
.import-card-actions{display:flex;gap:.5rem;flex-shrink:0;flex-wrap:wrap}
.active-pill{display:inline-flex;align-items:center;gap:.3rem;padding:.2rem .6rem;background:#6c63ff22;border-radius:20px;font-size:11px;font-weight:600;color:var(--accent2)}
.active-dot{width:6px;height:6px;background:var(--accent);border-radius:50%}
.ic-btn{background:var(--bg3);border:1px solid var(--border2);border-radius:6px;padding:.3rem .65rem;font-size:12px;color:var(--text2);cursor:pointer;transition:all .2s}
.ic-btn:hover{background:var(--bg4);color:var(--text)}
.ic-btn.danger:hover{border-color:var(--red);color:var(--red)}
.ic-btn.accent{background:var(--accent);border-color:var(--accent);color:#fff}
.ic-btn.accent:hover{opacity:.85}
/* COSTS */
.profile-bar{display:flex;align-items:center;gap:.75rem;background:var(--bg2);border:1px solid var(--border);border-radius:var(--card-r);padding:1rem 1.25rem;margin-bottom:1.25rem;flex-wrap:wrap}
.profile-bar-label{font-size:11px;font-weight:600;color:var(--text3);text-transform:uppercase;letter-spacing:.06em;white-space:nowrap}
.profile-tabs{display:flex;gap:.4rem;flex-wrap:wrap;flex:1}
.profile-tab{padding:.3rem .75rem;border-radius:20px;font-size:12px;border:1px solid var(--border2);background:none;color:var(--text2);cursor:pointer;transition:all .2s;white-space:nowrap}
.profile-tab:hover{border-color:var(--accent2);color:var(--accent2)}
.profile-tab.active{background:var(--accent);border-color:var(--accent);color:#fff;font-weight:500}
.profile-actions{display:flex;gap:.5rem;flex-shrink:0}
.cat-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:1rem;margin-bottom:1.5rem}
.cat-card{background:var(--bg2);border:1px solid var(--border);border-radius:var(--card-r);padding:1.1rem 1.25rem}
.cat-card.wide{background:var(--bg2);border:1px solid var(--border);border-radius:var(--card-r);padding:1.1rem 1.25rem;margin-bottom:1rem}
.cat-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:.85rem}
.cat-title{display:flex;align-items:center;gap:.5rem;font-size:13px;font-weight:600}
.cat-del-btn{background:none;border:none;color:var(--text3);cursor:pointer;font-size:13px;padding:2px 4px;border-radius:4px;transition:color .2s}
.cat-del-btn:hover{color:var(--red)}
/* Standard row: label | value | unit | delete */
.cost-row{display:grid;grid-template-columns:1fr 88px 62px 26px;gap:8px;align-items:center;margin-bottom:.6rem}
/* Extended row for % with base: spans full width, two lines */
.cost-row-ext{background:var(--bg3);border:1px solid var(--border2);border-radius:var(--r);padding:.65rem .85rem;margin-bottom:.6rem}
.cost-row-ext-top{display:grid;grid-template-columns:1fr 88px 62px 26px;gap:8px;align-items:center;margin-bottom:.6rem}
.cost-row-ext-bottom{display:grid;grid-template-columns:1fr 1fr 1fr;gap:8px;align-items:center;padding-top:.5rem;border-top:1px solid var(--border)}
.cost-row-ext-bottom-label{font-size:11px;color:var(--text3);white-space:nowrap}
.cost-row input[type=text],.cost-row-ext input[type=text]{background:var(--bg3);border:1px solid var(--border2);border-radius:6px;padding:.42rem .65rem;color:var(--text);font-size:13px;outline:none;width:100%;min-width:0}
.cost-row-ext-top input[type=text]{background:transparent;border:none;padding:.1rem 0;font-size:13px;color:var(--text);outline:none;width:100%;min-width:0}
.cost-row-ext-top input[type=text]:focus{border-bottom:1px solid var(--accent)}
.cost-row input[type=text]:focus{border-color:var(--accent)}
.cost-row input[type=number],.cost-row-ext input[type=number]{background:var(--bg3);border:1px solid var(--border2);border-radius:6px;padding:.42rem .5rem;color:var(--text);font-size:13px;outline:none;width:100%;text-align:right;min-width:0}
.cost-row-ext-top input[type=number]{background:transparent;border:none;padding:.1rem 0;font-size:13px;font-weight:600;color:var(--text);outline:none;width:100%;text-align:right;min-width:0}
.cost-row input[type=number]:focus,.cost-row-ext input[type=number]:focus{border-color:var(--accent)}
.toggle-unit{display:flex;gap:2px;background:var(--bg3);border-radius:6px;padding:2px}
.cost-row-ext-top .toggle-unit{background:var(--bg4)}
.toggle-unit button{flex:1;padding:.22rem 0;border-radius:4px;font-size:10px;border:none;background:none;color:var(--text2);cursor:pointer;transition:all .2s}
.toggle-unit button.active{background:var(--bg4);color:var(--text)}
.cost-row-ext-top .toggle-unit button.active{background:var(--bg3);color:var(--text)}
.cost-del{background:none;border:none;color:var(--text3);cursor:pointer;font-size:16px;line-height:1;transition:color .2s;padding:0;text-align:center}
.cost-del:hover{color:var(--red)}
.base-input-group{display:flex;flex-direction:column;gap:3px}
.base-input-group label{font-size:10px;color:var(--text3);text-transform:uppercase;letter-spacing:.05em}
.base-input-group input{background:var(--bg2);border:1px solid var(--border2);border-radius:6px;padding:.38rem .5rem;color:var(--text);font-size:13px;outline:none;width:100%;text-align:right}
.base-input-group input:focus{border-color:var(--accent)}
.effective-badge{display:inline-flex;align-items:center;justify-content:center;background:#6c63ff22;border-radius:6px;padding:.38rem .6rem;font-size:13px;font-weight:600;color:var(--accent2)}
.add-cost-btn{display:flex;align-items:center;gap:.5rem;background:none;border:1px dashed var(--border2);border-radius:var(--r);padding:.45rem .75rem;color:var(--text2);font-size:12px;cursor:pointer;width:100%;justify-content:center;margin-top:.35rem;transition:all .2s}
.add-cost-btn:hover{border-color:var(--accent);color:var(--accent)}
.summary-item{display:flex;justify-content:space-between;padding:.45rem 0;border-bottom:1px solid var(--border);font-size:13px}
/* break-even highlight */
.be-ok{color:var(--green)}.be-warn{color:var(--yellow)}.be-bad{color:var(--red)}
.compare-grid{display:grid;grid-template-columns:1fr 1fr;gap:1.5rem;margin-bottom:1.5rem}
.period-selector{display:flex;align-items:center;gap:.5rem;margin-bottom:1rem}
.period-selector select{background:var(--bg3);border:1px solid var(--border2);border-radius:var(--r);padding:.4rem .75rem;color:var(--text);font-size:13px;outline:none;flex:1}
.period-label{font-size:12px;color:var(--text2);white-space:nowrap}
.delta-pos{color:var(--green);font-size:12px;font-weight:600}
.delta-neg{color:var(--red);font-size:12px;font-weight:600}
.delta-neu{color:var(--text3);font-size:12px}
/* MISC */
.page-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:1.5rem;flex-wrap:wrap;gap:1rem}
.page-title{font-size:20px;font-weight:700}
.page-sub{font-size:13px;color:var(--text2);margin-top:.2rem}
/* ONBOARDING WIZARD */
.wizard-bg{position:fixed;inset:0;background:#00000088;z-index:500;display:flex;align-items:center;justify-content:center;padding:1rem}
.wizard{background:var(--bg2);border:1px solid var(--border2);border-radius:16px;width:100%;max-width:620px;max-height:92vh;display:flex;flex-direction:column;overflow:hidden;box-shadow:0 24px 64px #00000066}
.wizard-header{background:linear-gradient(135deg,#6c63ff,#a78bfa);padding:2rem 2rem 1.5rem;color:#fff;text-align:center;flex-shrink:0}
.wizard-icon{font-size:48px;line-height:1;margin-bottom:.75rem}
.wizard-title{font-size:22px;font-weight:700;margin-bottom:.35rem}
.wizard-subtitle{font-size:13px;opacity:.85;line-height:1.5}
.wizard-body{padding:1.75rem 2rem;overflow-y:auto;flex:1;min-height:0}
.wizard-step{display:none}.wizard-step.active{display:block}
.wizard-steps-bar{display:flex;gap:.35rem;margin-bottom:1.5rem;justify-content:center}
.wizard-dot{width:8px;height:8px;border-radius:50%;background:var(--border2);transition:all .3s;cursor:pointer}
.wizard-dot.active{background:var(--accent);width:24px;border-radius:4px}
.wizard-dot.done{background:var(--accent2)}
.wizard-section{display:flex;gap:1rem;align-items:flex-start;padding:.85rem;background:var(--bg3);border-radius:var(--r);margin-bottom:.75rem;border:1px solid var(--border)}
.wizard-section:last-child{margin-bottom:0}
.wizard-section-icon{font-size:28px;flex-shrink:0;line-height:1}
.wizard-section-body{flex:1;min-width:0}
.wizard-section-title{font-size:13px;font-weight:700;color:var(--text);margin-bottom:.2rem}
.wizard-section-text{font-size:12px;color:var(--text2);line-height:1.6}
.wizard-section-tag{display:inline-block;font-size:10px;padding:.1rem .45rem;border-radius:10px;background:#6c63ff22;color:var(--accent2);border:1px solid #6c63ff33;margin-top:.35rem;font-weight:600}
.wizard-footer{padding:1.25rem 2rem;border-top:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;gap:.75rem;flex-shrink:0}
.wizard-progress{font-size:12px;color:var(--text3)}
@media(max-height:720px),(max-width:480px){
  .wizard-header{padding:1.1rem 1.25rem .9rem}
  .wizard-icon{font-size:34px;margin-bottom:.4rem}
  .wizard-title{font-size:18px}
  .wizard-subtitle{font-size:12px}
  .wizard-body{padding:1rem 1.15rem}
  .wizard-steps-bar{margin-bottom:1rem}
  .wizard-section{padding:.65rem;gap:.7rem;margin-bottom:.55rem}
  .wizard-section-icon{font-size:22px}
  .wizard-footer{padding:.85rem 1.15rem}
}
/* SECTION HELP BUTTON */
.section-help-btn{display:inline-flex;align-items:center;justify-content:center;width:18px;height:18px;border-radius:50%;border:1px solid var(--border2);background:var(--bg3);color:var(--text3);font-size:10px;font-weight:700;cursor:pointer;transition:all .2s;vertical-align:middle;margin-left:.35rem;flex-shrink:0}
.section-help-btn:hover{background:var(--accent);border-color:var(--accent);color:#fff}
.section-help-popup{display:none;position:fixed;background:var(--bg2);border:1px solid var(--border2);border-radius:var(--card-r);padding:1rem 1.1rem;max-width:360px;max-height:70vh;overflow-y:auto;z-index:300;box-shadow:0 8px 32px #00000044;font-size:13px;color:var(--text2);line-height:1.6}
.section-help-popup.open{display:block}
.section-help-popup strong{color:var(--text);display:block;margin-bottom:.35rem;font-size:14px}
.section-help-popup .shp-close{float:right;background:none;border:none;color:var(--text3);cursor:pointer;font-size:16px;margin:-4px -4px 0 0;padding:2px 6px}
/* GROUP DROPDOWN */
.grp-dropdown-wrap{position:relative;flex-shrink:0}
.grp-dropdown-btn{display:flex;align-items:center;gap:.4rem;padding:.3rem .75rem;border-radius:20px;font-size:12px;font-weight:500;border:1px solid var(--border2);background:var(--bg3);color:var(--text2);cursor:pointer;transition:all .2s;white-space:nowrap;max-width:180px}
.grp-dropdown-btn:hover{border-color:var(--accent);color:var(--text)}
.grp-dropdown-btn.has-filter{border-color:var(--accent);background:#6c63ff22;color:var(--accent2)}
.grp-dropdown-btn .grp-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:1}
.grp-dropdown-list{display:none;position:absolute;left:0;top:calc(100% + 4px);background:var(--bg2);border:1px solid var(--border2);border-radius:var(--card-r);min-width:200px;max-width:280px;max-height:320px;overflow-y:auto;z-index:100;box-shadow:0 4px 20px #00000044}
.grp-dropdown-list.open{display:block}
.grp-dropdown-item{padding:.5rem .85rem;font-size:13px;cursor:pointer;transition:background .15s;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--text2)}
.grp-dropdown-item:hover{background:var(--bg3);color:var(--text)}
.grp-dropdown-item.active{background:#6c63ff22;color:var(--accent2);font-weight:600}
.grp-dropdown-item.all-item{font-weight:600;color:var(--text);border-bottom:1px solid var(--border);margin-bottom:.25rem}
.seg-btn{padding:.35rem .85rem;border-radius:20px;font-size:12px;border:1px solid var(--border2);background:none;color:var(--text2);cursor:pointer;transition:all .2s}
.seg-btn:hover{border-color:var(--accent);color:var(--accent)}
.seg-btn.active{background:var(--accent);border-color:var(--accent);color:#fff}
.bar-wrap{height:6px;background:var(--bg4);border-radius:3px;overflow:hidden;margin-top:.35rem}
.bar-fill{height:100%;border-radius:3px;transition:width .4s}
.section-divider{height:1px;background:var(--border);margin:1.5rem 0}
.empty-state{text-align:center;padding:3rem 1rem;color:var(--text2)}
.empty-state .ei{font-size:2.5rem;margin-bottom:1rem;opacity:.4}
.empty-state h3{font-size:15px;font-weight:600;margin-bottom:.35rem;color:var(--text)}
.spinner{display:inline-block;width:16px;height:16px;border:2px solid #ffffff44;border-top-color:#fff;border-radius:50%;animation:spin .7s linear infinite;vertical-align:-3px;margin-right:6px}
@keyframes spin{to{transform:rotate(360deg)}}
/* Wskaźnik pobierania z KSeF — spinner + pasek "nieokreślony" (KSeF nie raportuje
   postępu, więc pasek sygnalizuje aktywność, nie procent wykonania). */
.ksef-spinner{width:15px;height:15px;border:2px solid var(--border2);border-top-color:var(--accent2);border-radius:50%;animation:spin .7s linear infinite;flex-shrink:0;display:inline-block}
@keyframes ksefBarSlide{0%{transform:translateX(-100%)}100%{transform:translateX(400%)}}
.ksef-progress-bar{width:25%;height:100%;background:linear-gradient(90deg,transparent,var(--accent2),transparent);animation:ksefBarSlide 1.4s ease-in-out infinite}
@keyframes prodFlash{0%{background:rgba(129,140,248,.35)}60%{background:rgba(129,140,248,.22)}100%{background:transparent}}
.prod-flash{animation:prodFlash 2.2s ease-out;box-shadow:inset 3px 0 0 var(--accent)}
::-webkit-scrollbar{width:6px;height:6px}
::-webkit-scrollbar-track{background:var(--bg)}
::-webkit-scrollbar-thumb{background:var(--border2);border-radius:3px}
/* MODAL */
.modal-bg{display:none;position:fixed;inset:0;background:#00000099;z-index:200;align-items:center;justify-content:center;padding:1rem}
.modal-bg.open{display:flex}
.modal{background:var(--bg2);border:1px solid var(--border2);border-radius:var(--card-r);padding:1.75rem;width:100%;max-width:480px;max-height:90vh;overflow-y:auto}
.modal-title{font-size:16px;font-weight:700;margin-bottom:.4rem}
.modal-header{display:flex;align-items:flex-start;justify-content:space-between;gap:.5rem}
.modal-header .modal-title{margin-bottom:0}
.modal-close{background:none;border:none;color:var(--text3);font-size:18px;line-height:1;cursor:pointer;padding:.1rem .3rem;flex-shrink:0}
.modal-close:hover{color:var(--text)}
.modal-sub{font-size:13px;color:var(--text2);margin-bottom:1.5rem;line-height:1.5}
.modal-actions{display:flex;gap:.75rem;margin-top:1.5rem}
.modal-actions .btn-primary{width:auto;flex:1}
.btn-cancel{flex:1;background:var(--bg3);border:1px solid var(--border2);border-radius:var(--r);padding:.75rem;font-size:14px;font-weight:600;cursor:pointer;color:var(--text2);transition:all .2s}
.btn-cancel:hover{background:var(--bg4);color:var(--text)}
.emoji-picker{display:flex;gap:.5rem;flex-wrap:wrap;margin-top:.5rem}
.emoji-opt{width:36px;height:36px;border:1px solid var(--border2);border-radius:8px;background:var(--bg3);font-size:18px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .2s}
.emoji-opt:hover,.emoji-opt.sel{border-color:var(--accent);background:#6c63ff22}
/* VAT badge in product table */
.vat-chip{display:inline-flex;align-items:center;padding:.15rem .4rem;border-radius:3px;font-size:10px;font-weight:600;background:#ffffff0d;color:var(--text3)}
/* BREAK-EVEN PERIOD CONTROL */
.be-period-bar{display:flex;align-items:center;gap:1rem;background:var(--bg2);border:1px solid var(--border);border-radius:var(--r);padding:.75rem 1.1rem;margin-bottom:1rem;flex-wrap:wrap}
.be-period-label{font-size:12px;color:var(--text2);white-space:nowrap;display:flex;align-items:center;gap:.4rem}
.be-slider{flex:1;min-width:160px;accent-color:var(--accent)}
.be-tabs{display:flex;gap:.3rem}
.be-tab{padding:.25rem .6rem;border-radius:5px;font-size:11px;font-weight:500;border:1px solid var(--border2);background:none;color:var(--text2);cursor:pointer;transition:all .2s}
.be-tab.active{background:var(--accent);border-color:var(--accent);color:#fff}
/* GLOBAL TOOLTIP — fixed position, shown via JS */
#g-tooltip{display:none;position:fixed;background:var(--bg4);border:1px solid var(--border2);border-radius:var(--r);padding:.6rem .85rem;font-size:12px;color:var(--text2);line-height:1.6;max-width:260px;z-index:9999;pointer-events:none;box-shadow:0 4px 16px #00000066}
/* TOOLTIP TRIGGER — small ? badge */
.th-help{display:inline-flex;align-items:center;justify-content:center;width:15px;height:15px;border-radius:50%;background:var(--bg4);border:1px solid var(--border2);color:var(--text3);font-size:9px;font-weight:700;cursor:help;margin-left:4px;vertical-align:middle;transition:background .15s}
.th-help:hover{background:var(--accent);color:#fff;border-color:var(--accent)}
/* FOOD/BEV GROUPING */
.cat-group-bar{display:flex;align-items:center;gap:.4rem;flex-wrap:nowrap;flex-shrink:0}
.cat-group-btn{padding:.3rem .75rem;border-radius:20px;font-size:12px;border:1px solid var(--border2);background:none;color:var(--text2);cursor:pointer;transition:all .2s;white-space:nowrap;flex-shrink:0}
.cat-group-btn:hover{border-color:var(--accent);color:var(--accent)}
.cat-group-btn.active{background:var(--accent);border-color:var(--accent);color:#fff}
.cat-group-btn.food{border-color:#34d39944;color:var(--green)}
.cat-group-btn.food.active{background:var(--green);border-color:var(--green);color:#fff}
.cat-group-btn.bev{border-color:#6c63ff44;color:var(--accent2)}
.cat-group-btn.bev.active{background:var(--accent);border-color:var(--accent);color:#fff}
.cat-group-btn.other{border-color:#fbbf2444;color:var(--yellow)}
.cat-group-btn.other.active{background:var(--yellow);border-color:var(--yellow);color:#1a1b2e}
.group-assign-pill{display:inline-flex;align-items:center;gap:3px;padding:.15rem .5rem;border-radius:10px;font-size:10px;font-weight:600;cursor:pointer;transition:all .2s;border:1px solid transparent}
.group-assign-pill.food{background:#34d39922;color:var(--green);border-color:#34d39933}
.group-assign-pill.bev{background:#6c63ff22;color:var(--accent2);border-color:#6c63ff33}
.group-assign-pill.none{background:#ffffff0d;color:var(--text3);border-color:var(--border)}
/* SORTABLE TABLE HEADERS */
th.sortable{cursor:pointer;user-select:none;white-space:nowrap}
th.sortable:hover{color:var(--text);background:var(--bg3)}
th.sortable .sort-arrow{display:inline-block;margin-left:4px;opacity:.35;font-size:10px;vertical-align:middle}
th.sortable.sort-asc .sort-arrow,th.sortable.sort-desc .sort-arrow{opacity:1;color:var(--accent2)}
/* PRODUCT SEARCH */
.prod-search-wrap{position:relative;display:flex;align-items:center;flex-shrink:0}
.prod-search-wrap input{background:var(--bg3);border:1px solid var(--border2);border-radius:var(--r);padding:.35rem .75rem .35rem 2rem;color:var(--text);font-size:12px;outline:none;width:180px;min-width:120px;transition:border .2s,width .2s}
.prod-search-wrap input:focus{border-color:var(--accent);width:240px}
.prod-search-wrap input::placeholder{color:var(--text3)}
.prod-search-icon{position:absolute;left:.6rem;color:var(--text3);font-size:13px;pointer-events:none}
.prod-count-badge{display:inline-flex;align-items:center;padding:.2rem .55rem;border-radius:20px;font-size:11px;font-weight:600;background:var(--bg3);border:1px solid var(--border2);color:var(--text2);white-space:nowrap}
/* IMPORT SWITCHER */
.imp-switch-wrap{position:relative}
.imp-switch-btn{display:flex;align-items:center;gap:.4rem;padding:.3rem .75rem;border-radius:20px;font-size:12px;font-weight:500;border:1px solid var(--border2);background:var(--bg3);color:var(--text2);cursor:pointer;transition:all .2s;max-width:220px}
.imp-switch-btn:hover{border-color:var(--accent);color:var(--text)}
.imp-switch-btn .imp-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:1}
.imp-switch-dropdown{display:none;position:absolute;right:0;top:calc(100% + 4px);background:var(--bg2);border:1px solid var(--border2);border-radius:var(--card-r);min-width:300px;max-width:420px;z-index:150;box-shadow:0 4px 20px #00000044;overflow:hidden}
.imp-switch-dropdown.open{display:block}
.imp-switch-item{display:flex;align-items:center;gap:.6rem;padding:.65rem 1rem;cursor:pointer;transition:background .15s;border-bottom:1px solid var(--border)}
.imp-switch-item:last-child{border-bottom:none}
.imp-switch-item:hover{background:var(--bg3)}
.imp-switch-item.active-imp{background:#6c63ff11}
.imp-switch-item-dot{width:8px;height:8px;border-radius:50%;background:var(--border2);flex-shrink:0}
.imp-switch-item.active-imp .imp-switch-item-dot{background:var(--accent)}
.imp-switch-item-name{font-size:12px;font-weight:500;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex:1}
.imp-switch-item-meta{font-size:11px;color:var(--text3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* INNER TABS */
.inner-tabs{display:flex;gap:.25rem;border-bottom:2px solid var(--border);margin-bottom:1.5rem}
.inner-tab{padding:.55rem 1.1rem;font-size:13px;font-weight:500;color:var(--text2);background:none;border:none;cursor:pointer;border-bottom:2px solid transparent;margin-bottom:-2px;transition:all .2s;border-radius:var(--r) var(--r) 0 0}
.inner-tab:hover{color:var(--text);background:var(--bg3)}
.inner-tab.active{color:var(--accent2);border-bottom-color:var(--accent);font-weight:600}
.inner-panel{display:none}.inner-panel.active{display:block}
/* FLOATING CALC */
.calc-panel{position:fixed;right:1.25rem;top:4.5rem;width:380px;max-width:calc(100vw - 2.5rem);background:var(--bg2);border:1px solid var(--border2);border-radius:var(--card-r);box-shadow:0 8px 32px #00000055;z-index:200;display:none;overflow:hidden}
@media (max-width:768px){
  #wa-float{bottom:78px !important;right:12px !important}
}
.calc-panel.wide{width:480px}
.calc-panel.open{display:block}
.calc-panel-header{display:flex;align-items:center;justify-content:space-between;padding:.75rem 1rem;border-bottom:1px solid var(--border);background:var(--bg3)}
.calc-panel-title{font-size:13px;font-weight:600}
.calc-panel-tabs{display:flex;gap:.25rem}
.calc-panel-tab{padding:.3rem .7rem;font-size:11px;font-weight:500;border-radius:20px;border:1px solid var(--border2);background:none;color:var(--text2);cursor:pointer;transition:all .15s}
.calc-panel-tab.active{background:var(--accent);border-color:var(--accent);color:#fff}
.calc-panel-body{padding:1rem;max-height:calc(100vh - 6rem);overflow-y:auto}
/* Expanded (wide) calculator: two-column flow to reduce vertical scrolling.
   Uses CSS multi-column so existing fields reflow without markup changes.
   Falls back to a single column on narrow viewports so nothing gets squeezed. */
.calc-panel.expanded{width:720px}
.calc-panel.expanded .calc-panel-body>div>*{break-inside:avoid}
@media (min-width:900px){
  .calc-panel.expanded #calc-tab-price,
  .calc-panel.expanded #sim-content{
    column-count:2;column-gap:1.25rem;
  }
  .calc-panel.expanded #calc-tab-price>*,
  .calc-panel.expanded #sim-content>*{
    break-inside:avoid;margin-bottom:.75rem;
  }
}
@media (max-width:899px){
  .calc-panel.expanded{width:420px}
}
/* ANALYTICS */
.abc-badge{display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;border-radius:50%;font-size:11px;font-weight:700}
.abc-a{background:#34d39922;color:var(--green)}
.abc-b{background:#6c63ff22;color:var(--accent2)}
.abc-c{background:#ffffff11;color:var(--text3)}
/* ANOMALY */
.anomaly-badge{display:inline-flex;align-items:center;gap:3px;padding:.15rem .45rem;border-radius:4px;font-size:10px;font-weight:600;background:#f8717122;color:var(--red);border:1px solid #f8717133}
/* GROUP ASSIGN TABLE */
.ga-table{width:100%;border-collapse:collapse}
.ga-table th{font-size:10px;font-weight:600;text-transform:uppercase;letter-spacing:.05em;color:var(--text3);padding:.5rem .75rem;text-align:left;border-bottom:1px solid var(--border);position:sticky;top:0;background:var(--bg2);z-index:1}
.ga-table td{padding:.5rem .75rem;border-bottom:1px solid var(--border);font-size:13px;vertical-align:middle}
.ga-table tr:last-child td{border-bottom:none}
.ga-table tr:hover td{background:var(--bg3)}
.ga-cat-btn{padding:.28rem .65rem;border-radius:20px;font-size:11px;font-weight:500;border:1px solid var(--border2);background:none;color:var(--text3);cursor:pointer;transition:all .15s;white-space:nowrap}
.ga-cat-btn:hover{border-color:var(--accent);color:var(--text)}
.ga-cat-btn.active-food{border-color:var(--green);background:#34d39922;color:var(--green);font-weight:700}
.ga-cat-btn.active-bev{border-color:var(--accent2);background:#6c63ff22;color:var(--accent2);font-weight:700}
.ga-cat-btn.active-other{border-color:var(--yellow);background:#fbbf2422;color:var(--yellow);font-weight:700}
.ga-cat-btn.active-none{border-color:var(--border2);background:var(--bg3);color:var(--text2)}
.ga-unassigned td{background:#f8717108 !important}
.ga-group-header td{background:var(--bg3);font-size:11px;font-weight:600;color:var(--text3);text-transform:uppercase;letter-spacing:.05em;padding:.4rem .75rem}
/* MANUAL IMPORT TABLE */
.me-table{width:100%;border-collapse:collapse}
.me-table th{font-size:10px;font-weight:600;text-transform:uppercase;letter-spacing:.05em;color:var(--text3);padding:.45rem .6rem;text-align:left;border-bottom:1px solid var(--border);background:var(--bg2);position:sticky;top:0;z-index:1}
.me-table td{padding:.3rem .25rem;border-bottom:1px solid var(--border);vertical-align:middle}
.me-table tr:last-child td{border-bottom:none}
.me-table tr:hover td{background:var(--bg3)}
.me-input{width:100%;background:transparent;border:1px solid transparent;border-radius:4px;padding:.3rem .45rem;color:var(--text);font-size:12px;outline:none;transition:border .15s;font-family:inherit}
.me-input:focus{border-color:var(--accent);background:var(--bg3)}
.me-input.err{border-color:var(--red)!important}
/* Hide up/down spinners on ALL number inputs app-wide — they add visual noise
   and users type values directly. */
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 }

.me-input[type=number]::-webkit-outer-spin-button,
.me-input[type=number]::-webkit-inner-spin-button{ -webkit-appearance:none; margin:0 }
.me-input[type=number]{ -moz-appearance:textfield }
.me-select{width:100%;background:var(--bg3);border:1px solid var(--border2);border-radius:4px;padding:.3rem .45rem;color:var(--text);font-size:12px;outline:none}
.me-del-btn{background:none;border:none;color:var(--text3);cursor:pointer;font-size:14px;padding:.2rem .4rem;border-radius:4px;transition:all .15s;line-height:1}
.me-del-btn:hover{color:var(--red);background:#f8717122}
.import-archived{opacity:.6;background:var(--bg2)!important}
.import-archived .import-card-icon{filter:grayscale(1)}
/* RECIPES */
.ing-row{display:flex;align-items:center;gap:.6rem;padding:.5rem 0;border-bottom:1px solid var(--border);flex-wrap:wrap}
.ing-row:last-child{border-bottom:none}
.ing-name{font-size:13px;font-weight:500;flex:1}
.ing-meta{font-size:11px;color:var(--text3)}
.ing-price-badge{font-size:12px;font-weight:600;color:var(--accent2);white-space:nowrap}
.rec-row{padding:.6rem 0;border-bottom:1px solid var(--border)}
.rec-row:last-child{border-bottom:none}
.rec-name{font-size:13px;font-weight:600}
.rec-fc{font-size:12px;color:var(--green);font-weight:600}
.rec-ing-count{font-size:11px;color:var(--text3)}
.group-fc-row{display:flex;align-items:center;gap:.75rem;padding:.5rem 0;border-bottom:1px solid var(--border);flex-wrap:wrap}
.group-fc-row:last-child{border-bottom:none}
/* INVOICE LIST */
.inv-list-row{display:flex;align-items:center;gap:.75rem;padding:.6rem 0;border-bottom:1px solid var(--border);flex-wrap:wrap}
.inv-list-row:last-child{border-bottom:none}
.inv-list-num{font-size:13px;font-weight:600;color:var(--text);min-width:140px}
.inv-list-meta{font-size:12px;color:var(--text3);flex:1}
.inv-list-amount{font-size:13px;font-weight:600;color:var(--text);white-space:nowrap}
.inv-list-cats{display:flex;gap:.3rem;flex-wrap:wrap}
.inv-list-cat{font-size:10px;padding:.15rem .45rem;border-radius:10px;background:var(--bg3);color:var(--text2);border:1px solid var(--border2)}
/* INVOICE XML */
.inv-row{display:flex;align-items:center;gap:.75rem;padding:.6rem .75rem;border-bottom:1px solid var(--border);flex-wrap:wrap}
.inv-row:last-child{border-bottom:none}
.inv-row:hover{background:var(--bg3)}
.inv-name{font-size:13px;font-weight:500;flex:1;min-width:140px}
.inv-meta{font-size:11px;color:var(--text3);white-space:nowrap}
.inv-assign-cat{background:var(--bg3);border:1px solid var(--border2);border-radius:var(--r);padding:.3rem .6rem;color:var(--text);font-size:12px;outline:none;min-width:160px}
.inv-assign-prod{background:var(--bg3);border:1px solid var(--border2);border-radius:var(--r);padding:.3rem .6rem;color:var(--text);font-size:12px;outline:none;min-width:140px}
.inv-ignored{opacity:.4;text-decoration:line-through}
/* PASSWORD TOGGLE */
.pass-wrap{position:relative}
.pass-wrap input{padding-right:2.5rem!important}
.pass-eye{position:absolute;right:.65rem;top:50%;transform:translateY(-50%);background:none;border:none;cursor:pointer;color:var(--text3);font-size:16px;line-height:1;padding:2px;transition:color .2s}
.pass-eye:hover{color:var(--text2)}
/* ── Dark Glass enhancements ─────────────────────────────────────────── */
/* KPI cards — subtle colored tints */
.kpi-card{position:relative;overflow:hidden}
.kpi-card::after{content:'';position:absolute;inset:0;border-radius:inherit;pointer-events:none;opacity:.6}
body.light .nav-tab.active{background:var(--bg2);color:var(--accent);border-color:var(--border2);box-shadow:none}
body.light nav{backdrop-filter:none;-webkit-backdrop-filter:none;background:var(--bg2)}
body.light .nav-logo-dot{box-shadow:none}
/* Card borders */
.card{border-color:var(--border)}
/* Badge improvements */
.badge{letter-spacing:.02em}
/* Chart lines */
.bar-fill{border-radius:2px}
/* Table rows */
#prod-table tr:hover td{background:rgba(255,255,255,.02)}
/* Scrollbar */
::-webkit-scrollbar{width:4px;height:4px}
::-webkit-scrollbar-track{background:var(--bg)}
::-webkit-scrollbar-thumb{background:var(--bg4);border-radius:2px}
::-webkit-scrollbar-thumb:hover{background:var(--border2)}
/* Modals */
.modal-bg{background:rgba(7,10,18,.75);backdrop-filter:blur(4px)}
#me-groups-modal{backdrop-filter:none !important;z-index:9999 !important}
#me-groups-modal .modal{overflow:hidden !important}
.modal{background:var(--bg2);border:1px solid var(--border2)}
/* Venue switcher */
.imp-switch-btn{background:var(--bg3);border:1px solid var(--border2);border-radius:20px}
.imp-switch-dropdown{border:1px solid var(--border2);background:var(--bg2)}
/* Buttons accent */
.btn-primary{background:var(--accent);letter-spacing:.01em}
/* IC buttons */
.ic-btn{border-color:var(--border2)}
.ic-btn:hover{background:rgba(129,140,248,.1);border-color:rgba(129,140,248,.3);color:var(--accent2)}
.ic-btn.accent{background:var(--accent);color:#fff;border-color:var(--accent)}

/* ══════════════════════════════════════════════════════════════════════
   MOBILE RESPONSIVE  (@media max-width: 768px)
   ══════════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {

  /* ── Nav ── */
  nav {
    padding: 0 .75rem;
    height: 48px;
  }
  .nav-tabs {
    display: none;
  }
  .nav-logo {
    font-size: 14px;
  }
  .nav-right {
    gap: .4rem;
  }
  .user-pill span#nav-user {
    display: none;
  }
  #save-status {
    bottom: 78px !important;
    left: 12px !important;
    font-size: 11px !important;
    padding: .35rem .65rem !important;
  }

  /* ── Mobile bottom nav ── */
  #mobile-nav {
    display: flex;
    position: fixed;
    bottom: 0; left: 0; right: 0;
    background: rgba(17,24,39,.97);
    backdrop-filter: blur(12px);
    border-top: 1px solid var(--border2);
    z-index: 200;
    padding: .35rem 0 calc(.35rem + env(safe-area-inset-bottom));
  }
  .mobile-nav-btn {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    padding: .4rem .25rem;
    background: none;
    border: none;
    color: var(--text3);
    font-size: 10px;
    cursor: pointer;
    transition: color .15s;
  }
  .mobile-nav-btn.active {
    color: var(--accent2);
  }
  .mobile-nav-btn .mni {
    font-size: 20px;
    line-height: 1;
  }

  /* ── Main content padding for bottom nav ── */
  #app > .main-content,
  .tab-content.active {
    padding-bottom: 72px;
  }

  /* ── Page headers ── */
  .page-header {
    flex-wrap: wrap;
    gap: .5rem;
  }
  .page-header > div:last-child {
    flex-wrap: wrap;
    gap: .4rem;
  }

  /* ── KPI grid: 2 columns ── */
  .kpi-row {
    grid-template-columns: 1fr 1fr !important;
    gap: 8px !important;
  }
  .kpi-card {
    padding: .75rem !important;
  }
  .kpi-val {
    font-size: 20px !important;
  }

  /* ── Dashboard cards: single column ── */
  .dash-row,
  .row2 {
    grid-template-columns: 1fr !important;
  }

  /* ── Products table → card view ── */
  #prod-table thead {
    display: none;
  }
  #prod-table tr {
    display: block;
    background: var(--bg2);
    border: 1px solid var(--border);
    border-radius: var(--r);
    margin-bottom: .5rem;
    padding: .75rem;
  }
  #prod-table td {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: .25rem 0;
    border: none;
    font-size: 13px;
  }
  #prod-table td::before {
    content: attr(data-label);
    font-size: 11px;
    color: var(--text3);
    text-transform: uppercase;
    letter-spacing: .04em;
    flex-shrink: 0;
    margin-right: .5rem;
  }
  #prod-table td:first-child {
    font-size: 14px;
    font-weight: 600;
    border-bottom: 1px solid var(--border);
    padding-bottom: .5rem;
    margin-bottom: .25rem;
  }
  #prod-table td:first-child::before {
    display: none;
  }

  /* ── Imports list ── */
  .imports-grid {
    grid-template-columns: 1fr !important;
  }

  /* ── Toolbar / filter bar ── */
  .products-toolbar {
    flex-wrap: wrap;
    gap: .4rem;
  }
  .products-toolbar .filter-tabs {
    order: 2;
    width: 100%;
    overflow-x: auto;
  }
  .products-toolbar .search-wrap {
    order: 1;
    flex: 1;
    min-width: 0;
  }

  /* ── Cards ── */
  .card {
    padding: .85rem !important;
  }

  /* ── Modals ── */
  .modal {
    max-width: 100% !important;
    width: 100% !important;
    margin: 0;
    border-radius: 16px 16px 0 0 !important;
    max-height: 92vh;
    overflow-y: auto;
  }
  .modal-bg {
    align-items: flex-end !important;
  }

  /* ── Venue users 2-col → 1-col ── */
  #venue-users-modal .modal > div[style*="grid-template-columns:1fr 1fr"] {
    grid-template-columns: 1fr !important;
  }

  /* ── KSeF table horizontal scroll ── */
  #ksef-invoice-list {
    overflow-x: auto;
  }

  /* ── Hide desktop-only elements ── */
  .desktop-only {
    display: none !important;
  }

  /* ── Calc panel ── */
  #calc-panel {
    width: calc(100vw - 2rem) !important;
    right: .5rem !important;
    max-height: 85vh;
    overflow-y: auto;
  }

  /* ── Wiersze kosztów: węższe kolumny, by nazwa miała miejsce ── */
  .cost-row,
  .cost-row-ext-top {
    grid-template-columns: 1fr 68px 54px 22px;
    gap: 6px;
  }
  /* Prowizje: trzy pola obok siebie nie mieszczą się — układamy w pionie */
  .cost-row-ext-bottom {
    grid-template-columns: 1fr;
    gap: 6px;
  }
  .cat-card,
  .cat-card.wide {
    padding: .85rem .9rem;
  }

  /* ── Modal pobierania z KSeF: pełna wysokość ekranu ── */
  #ksef-modal-box {
    height: 92vh !important;
    max-height: 92vh !important;
    padding: 1rem .85rem;
  }
  #ksef-date-row {
    grid-template-columns: 1fr 1fr;
    gap: .5rem;
  }
}

/* ── Mobile nav hidden on desktop ── */
#mobile-nav {
  display: none;
}

/* mobile-only / desktop-only helpers */
.mobile-only { display: none }
@media (max-width: 768px) {
  .desktop-only { display: none !important }
  .mobile-only { display: inline }
  nav { position: relative }
  /* nav-right compact — let the three switchers share the row and fit on screen */
  .nav-right { gap: .3rem; flex: 1; min-width: 0; justify-content: flex-end }
  /* Po ukryciu logo cały navbar należy do przełączników — mogą być szersze.
     flex-basis 0 z równym podziałem, ale bez sztywnego limitu 33%. */
  .nav-right .imp-switch-wrap {
    flex: 1 1 0;
    min-width: 0;
    max-width: 42%;
  }
  .nav-right .imp-switch-btn {
    max-width: 100%;
    width: 100%;
    padding: .3rem .5rem;
    gap: .25rem;
    font-size: 11px;
  }
  /* import switcher label — ellipsis, flexible width */
  .imp-switch-wrap .imp-name {
    max-width: none;
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 11px;
  }
  /* venue switcher label */
  #venue-switch-label {
    max-width: none;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  /* User pill on mobile: just the avatar, no extra padding/arrow */
  .user-pill.mobile-only {
    padding: .2rem;
    gap: 0;
    background: none;
    border: none;
    max-width: none;
    flex-shrink: 0;
  }
}

.rec-cols{grid-template-columns:1fr 340px}
@media (max-width: 900px){
  /* Przy wąskim oknie dwie kolumny się nie mieszczą — wracamy do jednej. */
  .rec-cols{grid-template-columns:1fr !important}
}
@media (max-width: 768px) {
  /* Na wąskim ekranie logo tylko zabiera miejsce, a sama kropka bez napisu
     wyglądała jak przypadkowy artefakt — chowamy cały blok. */
  .nav-logo { display: none }
}

@media (max-width: 768px) {
  /* Dropdowns stay within screen */
  .imp-switch-dropdown {
    position: fixed !important;
    left: .5rem !important;
    right: .5rem !important;
    top: 52px !important;
    min-width: unset !important;
    max-width: unset !important;
    max-height: 60vh;
    overflow-y: auto;
  }
  #mobile-menu {
    position: fixed !important;
    left: .5rem !important;
    right: .5rem !important;
    top: 52px !important;
    min-width: unset !important;
  }
}

@media (max-width: 768px) {
  #getting-started-panel { display: none !important }
  #onboarding-wizard { display: none !important }
  /* Mobile bottom nav: keep only Dashboard and Koszty (Produkty/Analityka/Dane hidden) */
  #mnav-products, #mnav-analytics, #mnav-data { display: none !important }
}

@media (max-width: 768px) {
  #data-imports > div[style*="grid-template-columns:repeat(4"] {
    grid-template-columns: repeat(2,1fr) !important;
  }
}

/* ── User account menu ─────────────────────────────────────────────── */
.menu-inner-tab.active{color:var(--accent)!important;border-bottom-color:var(--accent)!important}
.menu-inner-tab:hover{color:var(--text2)!important;background:rgba(255,255,255,.03)}

/* Hide number input spinners in cost cards */
.cost-row input[type=number]::-webkit-outer-spin-button,
.cost-row input[type=number]::-webkit-inner-spin-button,
.cost-row-ext input[type=number]::-webkit-outer-spin-button,
.cost-row-ext input[type=number]::-webkit-inner-spin-button { -webkit-appearance:none; margin:0 }
.cost-row input[type=number],
.cost-row-ext input[type=number] { -moz-appearance:textfield }

.filter-pill{font-size:12px;padding:.38rem .7rem;border-radius:13px;border:1px solid var(--border2);background:var(--bg3);color:var(--text2);cursor:pointer;transition:all .15s;font-weight:500}
.filter-pill:hover{border-color:var(--border-strong,var(--border2));color:var(--text)}
.filter-pill.active{background:var(--accent);border-color:var(--accent);color:#fff}
.ing-trend-filter.active{background:var(--accent)!important;border-color:var(--accent)!important;color:#fff!important}

/* Help center collapsible FAQ items */
#help-center-body details summary::-webkit-details-marker{display:none}
#help-center-body details summary::marker{content:''}
#help-center-body details summary::after{content:'▾';float:right;color:var(--text3);transition:transform .2s}
#help-center-body details[open] summary::after{transform:rotate(180deg)}
.help-tab-btn{transition:all .15s}

/* Contenteditable placeholder (note editor) */
#note-text:empty:before{content:attr(data-placeholder);color:var(--text3);pointer-events:none}
#note-text b,#note-text strong{font-weight:700}
#note-text i,#note-text em{font-style:italic}
#note-text ul{margin:.3rem 0 .3rem 1.2rem;padding:0}

/* ── Manual import modal: keep whole form within the viewport ──────────────
   The modal becomes a flex column capped at the screen height; only the
   product table scrolls, while the header, period selector and action
   buttons stay visible. */
#manual-import-modal .modal{
  display:flex;
  flex-direction:column;
  max-height:92vh;
  overflow:hidden;               /* inner areas handle their own scroll */
  padding:1.25rem 1.5rem;
}
/* The product table area flexes to fill leftover space and scrolls inside. */
#manual-import-modal #me-table-scroll{
  flex:1 1 auto;
  min-height:120px;              /* always show a few rows */
  max-height:42vh;               /* never dominate the screen */
}
/* Period selector may shrink; if the screen is very short it scrolls too. */
#manual-import-modal #me-period-block{flex:0 1 auto;overflow-y:auto}
/* Compact the header, hints and period block a touch to save vertical room. */
#manual-import-modal .modal-sub{margin-bottom:.5rem !important}
#manual-import-modal #me-paste-hint{margin-bottom:.5rem}
/* Pin the action row to the bottom of the modal. */
#manual-import-modal #me-actions-row{flex-shrink:0}

/* On short screens, tighten further so nothing is cut off. */
@media (max-height: 700px){
  #manual-import-modal #me-table-scroll{max-height:34vh}
  #manual-import-modal .modal{padding:1rem 1.25rem}
  #manual-import-modal .modal-sub,
  #manual-import-modal #me-info-note,
  #manual-import-modal #me-paste-hint{display:none !important}
}

/* Search-term highlight inside Help / Glossary results.
   Yellow marker that stays legible in both dark and light themes:
   the background is a solid-ish yellow and the text is forced dark, so a
   light body text colour never disappears on the highlight. */
mark.help-hl{
  background:#fbbf24;      /* amber-400 — vivid in dark mode */
  color:#1a1b2e;           /* dark text for contrast on yellow */
  border-radius:3px;
  padding:0 .12em;
  font-weight:600;
}
body.light mark.help-hl{
  background:#fde047;      /* slightly lighter yellow reads better on white */
  color:#1a1b2e;
}

/* Menu list buttons — hover highlight matching navbar tabs (.nav-tab) */
.menu-list-btn{
  transition:all .15s;
}
.menu-list-btn:hover{
  background:var(--bg3) !important;
  color:var(--text) !important;
}
/* Keep the logout button's red text on hover, just add the background */
.menu-list-btn.logout:hover{
  background:rgba(248,113,113,.1) !important;
  color:var(--red) !important;
}