*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{
  --bg:#0c0e13;--surface:#15171e;--surface2:#1c1f28;--surface3:#232732;--border:#2a2d38;
  --text:#e8eaed;--text2:#9499a8;--text3:#6b7180;
  --accent:#3b82f6;--accent-glow:#3b82f640;--accent-dim:#3b82f618;
  --green:#22c55e;--green-glow:#22c55e30;--red:#ef4444;--red-glow:#ef444430;
  --orange:#f59e0b;--orange-glow:#f59e0b30;--purple:#a855f7;
  --radius:12px;--tr:.18s cubic-bezier(.4,0,.2,1);
  color-scheme:dark;
}
html{font-size:15px}
body{
  font-family:'DM Sans',system-ui,-apple-system,sans-serif;background:var(--bg);color:var(--text);
  min-height:100vh;
  background-image:
    radial-gradient(ellipse 800px 500px at 15% -5%,#3b82f60a,transparent),
    radial-gradient(ellipse 600px 400px at 85% 105%,#22c55e08,transparent);
  background-attachment:fixed;
}
a{color:var(--accent);text-decoration:none}
a:hover{text-decoration:underline}
code,.mono{font-family:'JetBrains Mono',ui-monospace,monospace}

/* ── Layout ─────────────────────────────────────────── */
.shell{display:grid;grid-template-columns:230px 1fr;min-height:100vh}
.sidebar{
  border-right:1px solid var(--border);background:#0f1116;
  padding:22px 14px;display:flex;flex-direction:column;gap:4px;position:sticky;top:0;height:100vh;
}
.logo{display:flex;align-items:center;gap:9px;padding:0 10px 18px;font-weight:700;letter-spacing:-.02em;font-size:1.02rem}
.logo svg{color:var(--accent);flex-shrink:0}
.logo small{display:block;font-weight:400;font-size:.68rem;color:var(--text3);letter-spacing:.04em;margin-top:1px}
.nav-item{
  display:flex;align-items:center;gap:10px;padding:9px 11px;border-radius:9px;
  color:var(--text2);font-size:.87rem;font-weight:500;cursor:pointer;transition:all var(--tr);
  border:1px solid transparent;
}
.nav-item:hover{background:var(--surface2);color:var(--text);text-decoration:none}
.nav-item.active{background:var(--accent-dim);color:var(--accent);border-color:#3b82f630}
.nav-item .badge{margin-left:auto;background:var(--surface3);color:var(--text2);
  font-size:.68rem;padding:1px 6px;border-radius:20px;font-weight:600}
.nav-sep{height:1px;background:var(--border);margin:12px 10px}
.nav-foot{margin-top:auto;padding:10px;font-size:.72rem;color:var(--text3);line-height:1.5}
.nav-foot b{color:var(--text2);font-weight:600;display:block}
.main{padding:26px 30px 60px;max-width:1240px;width:100%}

/* ── Nagłówek widoku ────────────────────────────────── */
.page-head{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;margin-bottom:22px;flex-wrap:wrap}
.page-head h1{font-size:1.45rem;font-weight:700;letter-spacing:-.03em}
.page-head p{color:var(--text2);font-size:.84rem;margin-top:3px}
.head-actions{display:flex;gap:8px;align-items:center}

/* ── Karty ──────────────────────────────────────────── */
.card{background:var(--surface);border:1px solid var(--border);border-radius:14px;padding:20px;
  box-shadow:0 2px 16px #00000025}
.card + .card{margin-top:16px}
.card h2{font-size:.78rem;font-weight:700;text-transform:uppercase;letter-spacing:.06em;
  color:var(--text2);margin-bottom:14px;display:flex;align-items:center;gap:9px}
.card h2::after{content:'';flex:1;height:1px;background:var(--border)}
.grid{display:grid;gap:16px}
.grid.c2{grid-template-columns:repeat(auto-fit,minmax(320px,1fr))}
.grid.c4{grid-template-columns:repeat(auto-fit,minmax(180px,1fr))}

/* ── Kafelki statystyk ──────────────────────────────── */
.stat{background:var(--surface);border:1px solid var(--border);border-radius:14px;padding:16px 18px}
.stat .label{font-size:.72rem;text-transform:uppercase;letter-spacing:.06em;color:var(--text3);font-weight:600}
.stat .value{font-size:1.9rem;font-weight:700;letter-spacing:-.03em;margin-top:6px;line-height:1}
.stat .sub{font-size:.75rem;color:var(--text2);margin-top:5px}
.stat.ok .value{color:var(--green)}
.stat.warn .value{color:var(--orange)}
.stat.bad .value{color:var(--red)}

/* ── Formularze ─────────────────────────────────────── */
.field{margin-bottom:15px}
.field > label{display:flex;align-items:center;gap:7px;font-size:.75rem;font-weight:600;
  color:var(--text2);margin-bottom:6px;letter-spacing:.04em;text-transform:uppercase}
.field > label .hint{font-weight:400;text-transform:none;letter-spacing:0;opacity:.65;font-size:.72rem}
.input-wrap{display:flex;align-items:center;background:var(--surface2);border:1.5px solid var(--border);
  border-radius:var(--radius);transition:border-color var(--tr),box-shadow var(--tr)}
.input-wrap:focus-within{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-glow)}
.input-wrap .prefix{padding-left:13px;color:var(--text3);font-size:.86rem;user-select:none;white-space:nowrap}
input,textarea,select{width:100%;padding:10px 13px;background:none;border:none;outline:none;
  color:var(--text);font-family:inherit;font-size:.9rem}
select{cursor:pointer;appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%239499a8' stroke-width='3'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 13px center;padding-right:34px}
option{background:var(--surface2);color:var(--text)}
textarea{resize:vertical;min-height:104px;line-height:1.55}
input::placeholder,textarea::placeholder{color:var(--text3);opacity:.7}
input[type=checkbox]{width:auto;padding:0;accent-color:var(--accent);cursor:pointer}
.row{display:flex;gap:12px;flex-wrap:wrap}
.row > *{flex:1;min-width:180px}
.check{display:flex;align-items:center;gap:8px;font-size:.82rem;color:var(--text2);cursor:pointer;
  text-transform:none;letter-spacing:0;font-weight:500}

/* ── Przyciski ──────────────────────────────────────── */
.btn{padding:10px 18px;font-family:inherit;font-size:.87rem;font-weight:600;color:#fff;
  background:var(--accent);border:none;border-radius:10px;cursor:pointer;transition:all var(--tr);
  display:inline-flex;align-items:center;justify-content:center;gap:8px;white-space:nowrap}
.btn:hover:not(:disabled){background:#2563eb;transform:translateY(-1px);box-shadow:0 4px 14px var(--accent-glow)}
.btn:active:not(:disabled){transform:none}
.btn:disabled{opacity:.45;cursor:not-allowed}
.btn.ghost{background:none;border:1.5px solid var(--border);color:var(--text2)}
.btn.ghost:hover:not(:disabled){border-color:var(--accent);color:var(--accent);background:none;box-shadow:none}
.btn.danger{background:var(--red)}
.btn.danger:hover:not(:disabled){background:#dc2626;box-shadow:0 4px 14px var(--red-glow)}
.btn.sm{padding:6px 12px;font-size:.78rem;border-radius:8px}
.btn.full{width:100%}
.btn .spin{width:16px;height:16px;border:2.5px solid #fff4;border-top-color:#fff;border-radius:50%;
  animation:spin .6s linear infinite;display:none}
.btn.loading .spin{display:block}
.btn.loading .lbl{display:none}
@keyframes spin{to{transform:rotate(360deg)}}
.btn-icon{width:32px;height:32px;border-radius:8px;border:1.5px solid var(--border);background:var(--surface2);
  color:var(--text2);cursor:pointer;display:flex;align-items:center;justify-content:center;
  transition:all var(--tr);flex-shrink:0;font-size:1rem}
.btn-icon:hover{border-color:var(--accent);color:var(--accent)}
.btn-icon.rm:hover{border-color:var(--red);color:var(--red)}

/* ── Tabele ─────────────────────────────────────────── */
.table-wrap{overflow-x:auto;margin:0 -4px}
table{width:100%;border-collapse:collapse;font-size:.84rem}
th{text-align:left;font-size:.7rem;text-transform:uppercase;letter-spacing:.06em;color:var(--text3);
  font-weight:700;padding:8px 10px;border-bottom:1px solid var(--border);white-space:nowrap}
td{padding:11px 10px;border-bottom:1px solid #ffffff08;vertical-align:top}
tbody tr{transition:background var(--tr)}
tbody tr:hover{background:#ffffff04}
tbody tr.clickable{cursor:pointer}
td.wrap{max-width:420px;color:var(--text2);line-height:1.45}
.empty{text-align:center;padding:36px;color:var(--text3);font-size:.86rem}

/* ── Statusy ────────────────────────────────────────── */
.pill{display:inline-flex;align-items:center;gap:5px;padding:3px 9px;border-radius:20px;
  font-size:.71rem;font-weight:600;white-space:nowrap;border:1px solid transparent}
.pill::before{content:'';width:5px;height:5px;border-radius:50%;background:currentColor}
.pill.delivered,.pill.ok{background:var(--green-glow);color:var(--green);border-color:#22c55e35}
.pill.sent{background:#3b82f625;color:var(--accent);border-color:#3b82f635}
.pill.queued,.pill.scheduled,.pill.sending{background:var(--orange-glow);color:var(--orange);border-color:#f59e0b35}
.pill.failed,.pill.rejected,.pill.expired,.pill.blocked{background:var(--red-glow);color:var(--red);border-color:#ef444435}
.pill.received{background:#a855f725;color:var(--purple);border-color:#a855f735}
.pill.muted{background:var(--surface3);color:var(--text2)}

/* ── Odbiorcy ───────────────────────────────────────── */
.recipients{display:flex;flex-direction:column;gap:7px}
.rec-row{display:flex;gap:8px;align-items:center}
.rec-row .input-wrap{flex:1}

/* ── Licznik segmentów ──────────────────────────────── */
.meter{display:flex;justify-content:space-between;align-items:center;gap:12px;
  font-size:.75rem;color:var(--text2);margin-top:7px;flex-wrap:wrap}
.meter .warn{color:var(--orange);font-weight:600}
.meter .bad{color:var(--red);font-weight:600}
.meter .tags{display:flex;gap:6px;align-items:center}
.tag{background:var(--surface3);padding:2px 8px;border-radius:6px;font-size:.7rem;font-weight:600}
.tag.ucs{background:var(--orange-glow);color:var(--orange)}
.tag.gsm{background:var(--green-glow);color:var(--green)}

/* ── Notki ──────────────────────────────────────────── */
.note{padding:11px 14px;border-radius:10px;font-size:.79rem;line-height:1.55;
  border:1px solid;display:flex;gap:9px;align-items:flex-start}
.note.info{background:#3b82f610;border-color:#3b82f628;color:#a9c6f5}
.note.warn{background:#f59e0b10;border-color:#f59e0b28;color:#f5cf8a}
.note.ok{background:#22c55e10;border-color:#22c55e28;color:#93e0ab}
.note b{color:inherit;font-weight:700}
.note .ic{flex-shrink:0;font-size:.95rem;line-height:1.4}

/* ── Toast ──────────────────────────────────────────── */
.toast{position:fixed;top:18px;right:18px;z-index:999;padding:13px 18px;border-radius:var(--radius);
  font-size:.86rem;font-weight:500;line-height:1.45;border:1px solid;max-width:400px;
  transform:translateX(130%);opacity:0;transition:all .32s cubic-bezier(.4,0,.2,1);
  box-shadow:0 8px 32px #00000060}
.toast.show{transform:translateX(0);opacity:1}
.toast.success{background:#0d1f11;border-color:#22c55e50;color:var(--green)}
.toast.error{background:#1f0d0d;border-color:#ef444450;color:var(--red)}
.toast.info{background:#0d1421;border-color:#3b82f650;color:#93b8f0}

/* ── Modal ──────────────────────────────────────────── */
.modal{position:fixed;inset:0;z-index:500;padding:18px;background:#000000bb;backdrop-filter:blur(5px);
  display:none;align-items:center;justify-content:center}
.modal.show{display:flex}
.modal-box{background:var(--surface);border:1px solid var(--border);border-radius:16px;width:100%;
  max-width:600px;max-height:88vh;overflow-y:auto;padding:24px;box-shadow:0 16px 56px #00000070}
.modal-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:18px}
.modal-head h3{font-size:1.05rem;font-weight:700;letter-spacing:-.02em}
.modal-close{font-size:1.6rem;line-height:1;color:var(--text3);cursor:pointer;padding:0 5px;transition:color var(--tr)}
.modal-close:hover{color:var(--red)}
.modal-actions{display:flex;gap:9px;justify-content:flex-end;margin-top:18px}

/* ── Logowanie ──────────────────────────────────────── */
.login-wrap{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:20px}
.login-box{width:100%;max-width:390px}
.login-box .logo{justify-content:center;padding-bottom:22px}
.login-box .card{padding:28px}

/* ── Konwersacje ────────────────────────────────────── */
.thread{display:flex;flex-direction:column;gap:9px;max-height:520px;overflow-y:auto;padding:4px}
.bubble{max-width:76%;padding:10px 14px;border-radius:14px;font-size:.86rem;line-height:1.5}
.bubble.out{align-self:flex-end;background:var(--accent);color:#fff;border-bottom-right-radius:5px}
.bubble.in{align-self:flex-start;background:var(--surface3);border-bottom-left-radius:5px}
.bubble .meta{font-size:.68rem;opacity:.7;margin-top:5px;display:flex;gap:7px;align-items:center}
.bubble.enc{font-style:italic;opacity:.75}

::-webkit-scrollbar{width:8px;height:8px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:var(--border);border-radius:4px}
::-webkit-scrollbar-thumb:hover{background:var(--surface3)}

.skeleton{background:linear-gradient(90deg,var(--surface2) 25%,var(--surface3) 50%,var(--surface2) 75%);
  background-size:200% 100%;animation:sk 1.4s infinite;border-radius:8px;height:14px}
@keyframes sk{0%{background-position:200% 0}100%{background-position:-200% 0}}

@media(max-width:860px){
  .shell{grid-template-columns:1fr}
  .sidebar{position:static;height:auto;flex-direction:row;overflow-x:auto;border-right:none;
    border-bottom:1px solid var(--border);padding:12px;align-items:center}
  .logo,.nav-sep,.nav-foot{display:none}
  .nav-item{white-space:nowrap}
  .main{padding:18px 16px 50px}
  html{font-size:14px}
  .toast{left:12px;right:12px;max-width:none}
}