/* ══ BAZA IPTV — App CSS ══════════════════════════════════════════════ */
:root {
  --bg:#f4f6fb; --white:#fff; --border:#e3e8f0;
  --text:#1a2035; --text2:#6b7592; --text3:#b0b8d4;
  --accent:#4361ee; --accent-l:#eef0ff;
  --green:#059669; --green-l:#ecfdf5;
  --red:#dc2626; --red-l:#fef2f2;
  --orange:#d97706; --orange-l:#fffbeb;
  --purple:#7c3aed; --purple-l:#f5f3ff;
  --gray:#6b7280; --gray-l:#f9fafb;
  --yellow:#b45309; --yellow-l:#fffbeb;
  --r14:14px; --r10:10px; --r8:8px;
  --sh:0 1px 4px rgba(0,0,0,.06);
  --sh2:0 4px 20px rgba(0,0,0,.10);
}
*,*::before,*::after{box-sizing:border-box}
body{font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;margin:0;padding:0;background:var(--bg);color:var(--text);-webkit-font-smoothing:antialiased;min-height:100vh;padding-bottom:70px}

/* ── Topbar ── */
.topbar{position:sticky;top:0;z-index:200;background:var(--white);border-bottom:1px solid var(--border);box-shadow:var(--sh);padding:8px 12px;display:flex;flex-direction:column;gap:6px}
.topbar-row{display:flex;align-items:center;gap:8px}
.topbar-logo{height:26px;width:auto}
.topbar-module{display:flex;align-items:center;gap:6px;font-size:.9rem;font-weight:700;color:var(--text)}
.topbar-module img{height:20px}
.topbar-badge{background:var(--accent);color:#fff;font-size:.65rem;font-weight:700;padding:1px 7px;border-radius:10px;margin-left:4px}
.topbar-spacer{flex:1}
.topbar-user{font-size:.78rem;color:var(--text2)}
.topbar-user b{color:var(--text)}
.icon-btn{width:30px;height:30px;border-radius:8px;border:1px solid var(--border);background:none;display:flex;align-items:center;justify-content:center;color:var(--text2);text-decoration:none;cursor:pointer;transition:background .12s,color .12s;flex-shrink:0}
.icon-btn:hover{background:var(--accent-l);color:var(--accent)}
.icon-btn.danger:hover{background:#fee2e2;color:var(--red)}
.ham-btn{width:34px;height:34px;border-radius:var(--r10);border:1px solid var(--border);background:none;display:flex;align-items:center;justify-content:center;color:var(--text2);cursor:pointer;font-size:1rem;flex-shrink:0;transition:background .12s}
.ham-btn:hover{background:var(--accent-l);color:var(--accent)}

/* ── Drawer ── */
.drawer-overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,.4);z-index:299}
.drawer-overlay.open{display:block}
.drawer{position:fixed;top:0;left:0;height:100%;width:240px;background:var(--white);z-index:300;transform:translateX(-100%);transition:transform .22s ease;box-shadow:var(--sh2);display:flex;flex-direction:column}
.drawer.open{transform:translateX(0)}
.drawer-head{padding:16px;border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between}
.drawer-title{font-size:1rem;font-weight:800}
.drawer-title span{color:var(--accent)}
.drawer-close{width:28px;height:28px;border:none;background:none;font-size:1.1rem;cursor:pointer;color:var(--text2);border-radius:6px;display:flex;align-items:center;justify-content:center}
.drawer-close:hover{background:var(--bg)}
.drawer-body{padding:10px 8px;flex:1;overflow-y:auto}
.drawer-item{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:var(--r10);color:var(--text);text-decoration:none;font-size:.9rem;font-weight:500;transition:background .12s}
.drawer-item:hover{background:var(--accent-l);color:var(--accent)}
.drawer-item.active{background:var(--accent-l);color:var(--accent);font-weight:700}
.drawer-item.danger{color:var(--red)}
.drawer-item.danger:hover{background:#fee2e2}
.drawer-item .ico{font-size:1.1rem;width:24px;text-align:center}
.drawer-sub{
  padding-left:28px;font-size:.84rem;color:var(--text2);
  position:relative;
}
.drawer-sub::before{
  content:'';position:absolute;left:20px;top:50%;
  width:6px;height:1px;background:var(--border);
}
.drawer-sub:hover{color:var(--accent);background:var(--accent-l)}
.drawer-sep{height:1px;background:var(--border);margin:8px 12px}
.drawer-badge{margin-left:auto;background:var(--accent);color:#fff;font-size:.65rem;font-weight:700;padding:1px 7px;border-radius:10px}

/* ── Search ── */
.search-wrap{position:relative;flex:1}
.search-ico{position:absolute;left:9px;top:50%;transform:translateY(-50%);color:var(--text3);font-size:.8rem;pointer-events:none}
.search-input{width:100%;padding:7px 9px 7px 29px;border:1.5px solid var(--border);border-radius:var(--r8);font-size:.85rem;color:var(--text);background:var(--bg);outline:none;transition:border-color .12s;font-family:inherit}
.search-input:focus{border-color:var(--accent);background:#fff}

/* ── Selects ── */
.app-select{padding:7px 8px;border:1.5px solid var(--border);border-radius:var(--r8);font-size:.78rem;color:var(--text);background:var(--white);cursor:pointer;outline:none;flex-shrink:0;font-family:inherit}
.app-select:focus{border-color:var(--accent)}

/* ── Chips ── */
.chips{display:flex;flex-wrap:wrap;gap:5px}
.chip{padding:3px 10px;border-radius:20px;border:1.5px solid var(--border);background:var(--white);color:var(--text2);font-size:.72rem;font-weight:500;cursor:pointer;transition:all .12s;white-space:nowrap;user-select:none;flex-shrink:0;font-family:inherit}
.chip:hover{border-color:var(--accent);color:var(--accent)}
.chip.active{background:var(--accent);border-color:var(--accent);color:#fff;font-weight:600}
.chip.s1.active{background:var(--green);border-color:var(--green)}
.chip.s2.active{background:var(--red);border-color:var(--red)}
.chip.s3.active{background:var(--purple);border-color:var(--purple)}
.chip.s4.active{background:var(--orange);border-color:var(--orange)}
.chip.s5.active{background:var(--gray);border-color:var(--gray)}
.chip.s0.active{background:var(--yellow);border-color:var(--yellow)}

/* Filter selects mobile */
.filter-select{flex:1;padding:6px 8px;border:1.5px solid var(--border);border-radius:var(--r8);font-size:.78rem;color:var(--text);background:var(--white);cursor:pointer;outline:none;font-family:inherit;transition:border-color .12s,background .12s}
.filter-select.st-all{border-color:var(--accent);background:var(--accent-l);color:var(--accent);font-weight:600}
.filter-select.st-1{border-color:var(--green);background:var(--green-l);color:var(--green);font-weight:600}
.filter-select.st-2{border-color:var(--red);background:var(--red-l);color:var(--red);font-weight:600}
.filter-select.st-3{border-color:var(--purple);background:var(--purple-l);color:var(--purple);font-weight:600}
.filter-select.st-4{border-color:var(--orange);background:var(--orange-l);color:var(--orange);font-weight:600}
.filter-select.st-5{border-color:var(--gray);background:var(--gray-l);color:var(--gray);font-weight:600}
.filter-select.st-0{border-color:var(--yellow);background:var(--yellow-l);color:var(--yellow);font-weight:600}

/* ── Buttons ── */
.btn{display:inline-flex;align-items:center;gap:6px;padding:8px 16px;border-radius:var(--r8);border:1px solid var(--border);background:var(--white);color:var(--text);font-size:.82rem;font-weight:600;cursor:pointer;transition:all .12s;white-space:nowrap;font-family:inherit}
.btn:hover{border-color:var(--accent);color:var(--accent);background:var(--accent-l)}
.btn.primary{background:var(--accent);border-color:var(--accent);color:#fff}
.btn.primary:hover{background:#3451d1}
.btn.teal{background:linear-gradient(135deg,#0891b2,#0e7490);border-color:#0891b2;color:#fff}
.btn.teal:hover{opacity:.9}
.btn.sm{padding:5px 12px;font-size:.76rem}

/* ── Cards grid ── */
.cards-grid{padding:12px;display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:10px}
.card{background:var(--white);border:1.5px solid var(--border);border-radius:var(--r14);overflow:hidden;box-shadow:var(--sh);transition:box-shadow .15s,border-color .15s}
.card:hover{box-shadow:var(--sh2);border-color:#c8d0e8}
.card.flash{outline:2.5px solid var(--accent);border-color:var(--accent)}
.card-head{display:flex;align-items:center;gap:9px;padding:11px 13px 9px;border-bottom:1px solid var(--border)}
.card-title{flex:1;font-size:.85rem;font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.card-id{font-size:.68rem;color:var(--text3);font-family:monospace;flex-shrink:0}
.card-body{padding:9px 13px 11px;display:flex;flex-direction:column;gap:5px}
.card-row{display:flex;align-items:baseline;gap:6px}
.card-row.center{align-items:center}
.card-lbl{font-size:.62rem;text-transform:uppercase;letter-spacing:.07em;color:var(--text3);font-weight:700;flex-shrink:0;width:52px}
.card-val{font-size:.82rem;color:var(--text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-family:'SF Mono','Consolas',monospace}
.card-val.normal{font-family:inherit}
.card-val.muted{color:var(--text2);font-size:.78rem}
.card-foot{display:flex;border-top:1px solid var(--border)}
.card-act{flex:1;display:flex;align-items:center;justify-content:center;padding:9px 0;background:none;border:none;color:var(--text2);font-size:.9rem;cursor:pointer;transition:background .1s,color .1s;font-family:inherit;gap:4px}
.card-act:not(:last-child){border-right:1px solid var(--border)}
.card-act:hover{background:var(--bg);color:var(--accent)}
.card-act.danger:hover{color:var(--red)}

/* ── Badges ── */
.badge{display:inline-flex;align-items:center;padding:1px 7px;border-radius:20px;font-size:.68rem;font-weight:700}
.badge-ok{background:var(--green-l);color:var(--green)}
.badge-err{background:var(--red-l);color:var(--red)}
.badge-ban{background:var(--purple-l);color:var(--purple)}
.badge-cred{background:var(--orange-l);color:var(--orange)}
.badge-bad{background:var(--gray-l);color:var(--gray)}
.badge-wait{background:var(--yellow-l);color:var(--yellow)}
.badge-cat{background:var(--accent-l);color:var(--accent)}
.badge-gb{background:var(--green-l);color:var(--green)}
.dot{width:7px;height:7px;border-radius:50%;flex-shrink:0}
.dot-0{background:var(--yellow)}
.dot-1{background:var(--green);box-shadow:0 0 5px rgba(5,150,105,.4)}
.dot-2{background:var(--red)}
.dot-3{background:var(--purple)}
.dot-4{background:var(--orange)}
.dot-5{background:var(--gray)}
.exp-ok{color:var(--green);font-weight:600}
.exp-warn{color:var(--orange);font-weight:600}
.exp-dead{color:var(--red);font-weight:600}

/* ── Paginacja ── */
.pager{position:sticky;bottom:0;z-index:100;background:var(--white);border-top:1px solid var(--border);padding:8px 12px;display:flex;align-items:center;justify-content:space-between;gap:8px;box-shadow:0 -2px 8px rgba(0,0,0,.05)}
.pager-info{font-size:.8rem;color:var(--text2)}
.pager-btns{display:flex;gap:5px;align-items:center}
.pager-btn{padding:6px 14px;border-radius:var(--r8);border:1.5px solid var(--border);background:var(--white);color:var(--text);font-size:.8rem;font-weight:600;cursor:pointer;transition:all .12s;font-family:inherit}
.pager-btn:disabled{opacity:.35;cursor:default}
.pager-btn:not(:disabled):hover{border-color:var(--accent);color:var(--accent)}
.pager-num{min-width:30px;text-align:center;padding:6px 8px;border-radius:var(--r8);background:var(--accent);color:#fff;font-size:.8rem;font-weight:700}

/* ── Loader/Empty ── */
.loader{grid-column:1/-1;display:flex;align-items:center;justify-content:center;gap:10px;padding:60px 0;color:var(--text2)}
.spinner{width:20px;height:20px;border:2px solid var(--border);border-top-color:var(--accent);border-radius:50%;animation:spin .7s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.empty{grid-column:1/-1;text-align:center;padding:60px 20px;color:var(--text2)}
.empty-icon{font-size:2.5rem;margin-bottom:12px}

/* ── Dashboard ── */
.dash-grid{padding:20px;display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:14px}
.dash-card{background:var(--white);border:1.5px solid var(--border);border-radius:var(--r14);padding:20px;box-shadow:var(--sh);display:flex;flex-direction:column;gap:10px;transition:box-shadow .15s,border-color .15s;text-decoration:none;color:inherit;cursor:pointer}
.dash-card:hover{box-shadow:var(--sh2);border-color:var(--accent)}
.dash-card-icon{font-size:1.8rem}
.dash-card-label{font-size:.78rem;font-weight:600;color:var(--text2);text-transform:uppercase;letter-spacing:.05em}
.dash-card-value{font-size:2rem;font-weight:800;color:var(--text);line-height:1}
.dash-card-sub{font-size:.75rem;color:var(--text2)}
.dash-card.c-accent{border-color:var(--accent)}
.dash-card.c-green{border-color:var(--green)}
.dash-card.c-red{border-color:var(--red)}
.dash-card.c-orange{border-color:var(--orange)}
.dash-card.c-gray{border-color:var(--gray)}

/* ── Form ── */
.form-field{margin-bottom:12px}
.form-label{display:block;font-size:.7rem;font-weight:700;color:var(--text2);text-transform:uppercase;letter-spacing:.06em;margin-bottom:4px}
.form-input{width:100%;padding:8px 10px;border:1.5px solid #d1d5db;border-radius:8px;font-size:.85rem;color:var(--text);background:#f9fafb;outline:none;transition:border-color .12s,background .12s;font-family:inherit}
.form-input:focus{border-color:var(--accent);background:#fff}
textarea.form-input{resize:vertical}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.form-wrap{text-align:left}
.copy-btn{flex-shrink:0;padding:2px 8px;border:1px solid var(--border);border-radius:6px;background:var(--bg);cursor:pointer;font-size:.75rem;color:var(--text2);transition:all .12s;font-family:inherit}
.copy-btn:hover{border-color:var(--accent);color:var(--accent)}

/* ── Filter bar (pod topbarem, sticky) ── */
.filter-bar{
  position:sticky;top:var(--topbar-h, 60px);z-index:190;
  background:var(--white);border-bottom:1px solid var(--border);
  padding:6px 12px;display:flex;flex-direction:column;gap:5px;
  box-shadow:0 2px 4px rgba(0,0,0,.04);
}

/* ── Bar chips (desktop wrap / mobile select) ── */
.bar-chips{display:flex;align-items:center;gap:5px;flex-wrap:wrap}
.bar-selects{display:none;gap:6px}
/* Kolory filter-select statusów */
.filter-select.st-all,.filter-sel.st-all{border-color:var(--accent);background:var(--accent-l);color:var(--accent);font-weight:600}
.filter-select.st-1,.filter-sel.st-1{border-color:var(--green);background:var(--green-l);color:var(--green);font-weight:600}
.filter-select.st-2,.filter-sel.st-2{border-color:var(--red);background:var(--red-l);color:var(--red);font-weight:600}
.filter-select.st-3,.filter-sel.st-3{border-color:var(--purple);background:var(--purple-l);color:var(--purple);font-weight:600}
.filter-select.st-4,.filter-sel.st-4{border-color:var(--orange);background:var(--orange-l);color:var(--orange);font-weight:600}
.filter-select.st-5,.filter-sel.st-5{border-color:var(--gray);background:var(--gray-l);color:var(--gray);font-weight:600}
.filter-select.st-0,.filter-sel.st-0{border-color:var(--yellow);background:var(--yellow-l);color:var(--yellow);font-weight:600}
.filter-sel{flex:1;padding:6px 8px;border:1.5px solid var(--border);border-radius:var(--r8);font-size:.78rem;color:var(--text);background:var(--white);cursor:pointer;outline:none;transition:border-color .12s,background .12s;font-family:inherit}
.filter-sel:focus{border-color:var(--accent)}

/* ── Narzędzia ── */
.tool-section{background:var(--white);border:1.5px solid var(--border);border-radius:var(--r14);padding:20px;box-shadow:var(--sh);margin-bottom:16px}
.tool-section-title{font-size:.85rem;font-weight:700;color:var(--text);margin-bottom:14px;display:flex;align-items:center;gap:8px}
.tool-row{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:10px}
.tool-result{border-radius:var(--r8);padding:12px 14px;font-size:.8rem;background:var(--bg);border:1px solid var(--border);margin-top:10px}
.tool-result.ok{background:var(--green-l);border-color:#86efac;color:#15803d}
.tool-result.err{background:var(--red-l);border-color:#fca5a5;color:var(--red)}
.tool-result.info{background:var(--accent-l);border-color:#a5b4fc;color:var(--accent)}
.tool-result pre{margin:0;font-size:.75rem;white-space:pre-wrap;word-break:break-all;max-height:400px;overflow-y:auto}
.tool-log-line{padding:2px 0;border-bottom:1px solid rgba(0,0,0,.04);font-family:'SF Mono','Consolas',monospace;font-size:.73rem;line-height:1.5}
.tool-log-line.ok{color:var(--green)}
.tool-log-line.err{color:var(--red)}
.tool-log-line.warn{color:var(--orange)}
.tool-log-line.info{color:var(--accent)}
.tool-table{width:100%;border-collapse:collapse;font-size:.82rem}
.tool-table th{padding:8px 12px;text-align:left;font-size:.7rem;color:var(--text2);text-transform:uppercase;letter-spacing:.06em;font-weight:700;background:var(--bg);border-bottom:1px solid var(--border)}
.tool-table td{padding:8px 12px;border-bottom:1px solid var(--border)}
.tool-table tr:hover td{background:var(--bg)}
.tool-nav-card{display:flex;align-items:center;gap:14px;padding:16px 18px;background:var(--white);border:1.5px solid var(--border);border-radius:var(--r14);box-shadow:var(--sh);text-decoration:none;color:var(--text);transition:all .15s;cursor:pointer}
.tool-nav-card:hover{border-color:var(--accent);box-shadow:var(--sh2)}
.tool-nav-card.active{border-color:var(--accent);background:var(--accent-l)}
.tool-nav-icon{width:44px;height:44px;border-radius:12px;display:flex;align-items:center;justify-content:center;font-size:1.3rem;flex-shrink:0}
.tool-nav-title{font-weight:700;font-size:.9rem}
.tool-nav-desc{font-size:.75rem;color:var(--text2);margin-top:2px}

/* ── Responsive ── */
@media(max-width:600px){
  .chips{display:none!important}
  .chips-mobile{display:flex!important}
  .bar-chips{display:none!important}
  .bar-selects{display:flex!important}
  .cards-grid{grid-template-columns:1fr;padding:8px}
  .dash-grid{grid-template-columns:1fr 1fr;padding:12px;gap:10px}
  .form-grid{grid-template-columns:1fr}
  .hide-mobile{display:none!important}
}
@media(min-width:601px){
  .chips-mobile{display:none!important}
  .show-mobile{display:none!important}
  .bar-selects{display:none!important}
  .bar-chips{display:flex!important}
}
@media(min-width:900px){.cards-grid{grid-template-columns:repeat(auto-fill,minmax(320px,1fr))}}
@media(min-width:1300px){.cards-grid{grid-template-columns:repeat(auto-fill,minmax(360px,1fr))}}