/* ================================
   ROOT
================================ */

:root{

--bg:#0b0c0f;
--panel:#12131a;

--text:#e9e6df;
--muted:rgba(233,230,223,.65);

--stroke:rgba(255,255,255,.08);

--ok:#2bd67b;
--warn:#ffcc55;
--danger:#ff5b5b;

--radius:16px;

}

/* ================================
   BASE
================================ */

*{
box-sizing:border-box
}

html,body{
height:100%
}

body{

margin:0;

font-family:Inter,system-ui,-apple-system,sans-serif;

color:var(--text);

background:
radial-gradient(900px 500px at 25% -10%, rgba(212,176,106,.22), transparent 60%),
radial-gradient(900px 500px at 80% 0%, rgba(120,120,255,.12), transparent 60%),
linear-gradient(180deg, #07070a, #0b0c0f 40%, #07070a);

overflow:hidden;

}

/* ================================
   GLASS POPOVER
================================ */

.payPop{

position:absolute;
z-index:9999;

width:360px;
max-width:92vw;

padding:18px;

border-radius:18px;

background:
linear-gradient(
180deg,
rgba(20,20,24,.96),
rgba(10,10,12,.92)
);

backdrop-filter:blur(18px);

border:1px solid var(--stroke);

box-shadow:
0 25px 70px rgba(0,0,0,.65),
inset 0 1px 0 rgba(255,255,255,.05);

opacity:0;

transform:translateY(-6px) scale(.98);

pointer-events:none;

transition:all .18s ease;

}

.payPop.is-open{

opacity:1;

transform:translateY(0) scale(1);

pointer-events:auto;

}

/* arrow */

.payPop::before{

content:"";

position:absolute;

top:-8px;
right:22px;

width:14px;
height:14px;

transform:rotate(45deg);

background:rgba(18,18,22,.95);

border-left:1px solid var(--stroke);
border-top:1px solid var(--stroke);

}

/* arrow when open upwards */

.payPop.payPop--up::before{

top:auto;
bottom:-8px;

transform:rotate(225deg);

border-left:none;
border-top:none;

border-right:1px solid var(--stroke);
border-bottom:1px solid var(--stroke);

}

/* ================================
   HEADER
================================ */

.payPop__head{

display:flex;

justify-content:space-between;

align-items:flex-start;

gap:12px;

margin-bottom:14px;

}

.payPop__title{

font-weight:800;

font-size:14px;

letter-spacing:.2px;

}

.payPop__sub{

margin-top:4px;

font-size:12px;

color:var(--muted);

}

/* close */

.payPop__close{

border:1px solid var(--stroke);

background:rgba(255,255,255,.03);

border-radius:10px;

padding:5px 8px;

cursor:pointer;

color:#fff;

transition:.15s;

}

.payPop__close:hover{

background:rgba(255,255,255,.08);

}

/* ================================
   LAYOUT
================================ */

.payPop__grid{

display:grid;

grid-template-columns:1fr 1fr;

gap:10px;

margin-top:12px;

}

.payPop__row{

display:flex;

gap:10px;

align-items:center;

margin-top:10px;

}

.payPop__actions{

display:flex;

gap:10px;

margin-top:12px;

}

.payPop .btn{
width:100%
}

/* ================================
   STATUS
================================ */

.payPop__statusPill{

display:inline-flex;

align-items:center;

gap:8px;

font-size:12px;

padding:6px 10px;

border-radius:999px;

border:1px solid var(--stroke);

background:rgba(255,255,255,.03);

}

.payPop__statusDot{

width:8px;
height:8px;

border-radius:50%;

}

.payPop__statusDot--ok{
background:var(--ok)
}

.payPop__statusDot--warn{
background:var(--warn)
}

.payPop__statusDot--danger{
background:var(--danger)
}

/* ================================
   ERROR
================================ */

.payPop__err{

margin-top:12px;

padding:10px 12px;

border-radius:12px;

border:1px solid rgba(255,80,80,.25);

background:rgba(255,80,80,.10);

font-size:12px;

display:none;

}

.payPop__err.show{
display:block
}

/* ================================
   HINT
================================ */

.payPop__hint{

margin-top:12px;

font-size:12px;

line-height:1.4;

color:var(--muted);

border-top:1px solid var(--stroke);

padding-top:10px;

}

/* ================================
   MODAL OVERLAY
================================ */

.tagModalOverlay{

position:fixed;

inset:0;

display:flex;

align-items:center;

justify-content:center;

background:rgba(0,0,0,.55);

backdrop-filter:blur(6px);

z-index:9999;

}

.tagModalOverlay .payPop{

position:relative;

top:auto;
left:auto;

width:420px;
max-width:92vw;

}

/* ================================
   TAGS
================================ */

.client-tags{

display:flex;

gap:6px;

flex-wrap:wrap;

}

.tag{

padding:3px 8px;

border-radius:8px;

font-size:12px;

background:#0f172a;

border:1px solid rgba(255,255,255,.08);

color:#e2e8f0;

}

.tag-muted{

opacity:.5

}

/* colored tag */

.tag--custom{

--tag-color:#64748b;

background:var(--tag-color);

border:1px solid color-mix(in srgb,var(--tag-color) 70%,black);

color:#fff;

font-weight:600;

padding:3px 8px;

border-radius:8px;

}

/* ================================
   TAG EDITOR
================================ */

#tagList{

display:flex;

gap:6px;

flex-wrap:wrap;

margin-bottom:10px;

}

.tagChip{

padding:4px 8px;

border-radius:6px;

font-size:12px;

color:#fff;

display:flex;

gap:6px;

align-items:center;

}

.tagChip span{
cursor:pointer
}

.tagColors{

display:flex;

gap:6px;

}

.tagColor{

width:18px;
height:18px;

border-radius:50%;

cursor:pointer;

border:2px solid transparent;

}

.tagColor.is-active{

border:2px solid #fff

}

/* ================================
   PAYMENT ALERT PULSE
================================ */

.pay--pulse{

position:relative;

}

.pay--pulse::after{

content:"";

position:absolute;

inset:0;

border-radius:999px;

box-shadow:0 0 0 0 rgba(255,60,60,.6);

animation:pulseRing 1.8s infinite;

}

@keyframes pulseRing{

0%{
box-shadow:0 0 0 0 rgba(255,60,60,.6)
}

70%{
box-shadow:0 0 0 8px rgba(255,60,60,0)
}

100%{
box-shadow:0 0 0 0 rgba(255,60,60,0)
}

}

/* ================================
   PERFORMANCE
================================ */

.dashScroll{

content-visibility:auto;

contain-intrinsic-size:800px;

overscroll-behavior:contain;

will-change:scroll-position;

}
/* =========================
   BADGE / TAG
========================= */

.tag{
display:inline-flex;
align-items:center;
gap:6px;

padding:5px 12px;

border-radius:999px;

font-size:12px;
font-weight:600;

letter-spacing:.2px;

border:1px solid rgba(255,255,255,.08);

background:rgba(255,255,255,.03);

color:#e9e6df;

backdrop-filter:blur(6px);

box-shadow:
inset 0 1px 0 rgba(255,255,255,.05),
0 2px 6px rgba(0,0,0,.25);

transition:.15s;
}

.tag:hover{
transform:translateY(-1px);
box-shadow:
0 6px 14px rgba(0,0,0,.35),
inset 0 1px 0 rgba(255,255,255,.08);
}


/* =========================
   ACTIVE
========================= */

.tag--ok{

background:
linear-gradient(
180deg,
rgba(43,214,123,.22),
rgba(20,120,70,.22)
);

border:1px solid rgba(43,214,123,.45);

color:#9cf2c4;

box-shadow:
0 0 0 1px rgba(43,214,123,.15),
0 6px 14px rgba(0,0,0,.25);
}


/* =========================
   WARNING
========================= */

.tag--warn{

background:
linear-gradient(
180deg,
rgba(255,204,85,.18),
rgba(120,90,20,.18)
);

border:1px solid rgba(255,204,85,.45);

color:#ffe6a6;

}


/* =========================
   DANGER
========================= */

.tag--danger{

background:
linear-gradient(
180deg,
rgba(255,91,91,.20),
rgba(120,30,30,.18)
);

border:1px solid rgba(255,91,91,.45);

color:#ffb3b3;

}


/* =========================
   TEAL (payment future)
========================= */

.tag--teal{

background:
linear-gradient(
180deg,
rgba(0,200,160,.20),
rgba(0,90,70,.18)
);

border:1px solid rgba(0,200,160,.40);

color:#7ef5d8;

}


/* =========================
   MUTED
========================= */

.tag-muted{

background:rgba(255,255,255,.03);

border:1px dashed rgba(255,255,255,.12);

color:rgba(255,255,255,.45);

}


/* =========================
   TAG CLOUD
========================= */

.client-tags{
display:flex;
gap:6px;
flex-wrap:wrap;
}


/* =========================
   TAG CHIP (editor)
========================= */

.tagChip{

display:flex;
align-items:center;
gap:6px;

padding:4px 10px;

border-radius:999px;

font-size:12px;

background:rgba(255,255,255,.05);

border:1px solid rgba(255,255,255,.12);

color:#fff;

box-shadow:
inset 0 1px 0 rgba(255,255,255,.06);

}

.tagChip span{
cursor:pointer;
opacity:.7;
}

.tagChip span:hover{
opacity:1;
}


/* =========================
   TAG COLORS
========================= */

.tagColors{
display:flex;
gap:8px;
}

.tagColor{

width:18px;
height:18px;

border-radius:50%;

cursor:pointer;

border:2px solid transparent;

transition:.15s;

}

.tagColor:hover{
transform:scale(1.1);
}

.tagColor.is-active{

border:2px solid #fff;

box-shadow:0 0 0 2px rgba(255,255,255,.15);

}
/* ===== QUICK NOTE MODAL ===== */

.quickNoteOverlay{
position:fixed;
inset:0;

display:flex;
align-items:center;
justify-content:center;

background:rgba(0,0,0,.55);
backdrop-filter:blur(6px);

z-index:9999;
}

.quickNoteBox{

width:420px;
max-width:92vw;

padding:22px;

border-radius:18px;

background:
linear-gradient(
180deg,
rgba(20,20,24,.96),
rgba(10,10,12,.92)
);

border:1px solid rgba(255,255,255,.08);

box-shadow:
0 30px 70px rgba(0,0,0,.7),
inset 0 1px 0 rgba(255,255,255,.05);
}

.quickNoteHeader{
display:flex;
justify-content:space-between;
align-items:center;
margin-bottom:14px;
}

.quickNoteTitle{
font-weight:700;
font-size:15px;
}

.quickNoteClose{

border:1px solid rgba(255,255,255,.08);
background:rgba(255,255,255,.03);

border-radius:8px;

padding:5px 9px;

cursor:pointer;

color:#fff;
}

.quickNoteInput{

width:100%;
height:130px;

border-radius:12px;

border:1px solid rgba(255,255,255,.08);

background:#0b0c0f;

color:#fff;

padding:12px;

resize:none;

font-family:inherit;
}

.quickNoteActions{

margin-top:14px;

display:flex;
justify-content:flex-end;
gap:10px;
}

.btnGhost{

background:transparent;
border:1px solid rgba(255,255,255,.12);

color:#ccc;

padding:7px 14px;

border-radius:10px;

cursor:pointer;
}

.quickNoteActions #quickNoteSave{

background:#d4b06a;

border:1px solid rgba(212,176,106,.6);

color:#1a1408;

font-weight:700;

padding:8px 16px;

border-radius:10px;

cursor:pointer;

transition:all .15s ease;

}

.btnPrimary:hover{

background:#34e085;

transform:translateY(-1px);

box-shadow:
0 10px 20px rgba(0,0,0,.35),
inset 0 1px 0 rgba(255,255,255,.3);

}
/* =========================
   REMINDERS SECTION
   ========================= */

.remindersList{
  display:flex;
  flex-direction:column;
  gap:12px;
  margin-top:16px;
}

.reminderCard{

  display:flex;
  align-items:center;
  justify-content:space-between;

  padding:14px 16px;

  background:rgba(255,255,255,0.02);

  border:1px solid rgba(255,255,255,0.05);

  border-radius:12px;

  transition:all .15s ease;
}

.reminderCard:hover{
  background:rgba(255,255,255,0.04);
}

.reminderLeft{
  display:flex;
  flex-direction:column;
  gap:4px;
}

.reminderTitle{
  font-weight:600;
  font-size:14px;
}

.reminderDate{
  font-size:12px;
  color:#888;
}

.reminderActions{
  display:flex;
  gap:8px;
}

.reminderEmpty{
  margin-top:30px;
  color:#777;
  font-size:14px;
}

/* =========================
   REMINDER MODAL
   ========================= */

.reminderModalBackdrop{
  position:fixed;
  inset:0;

  background:rgba(0,0,0,0.6);

  display:flex;
  align-items:center;
  justify-content:center;

  z-index:2000;
}

.reminderModal{

  width:420px;

  background:#121212;

  border:1px solid rgba(255,255,255,0.06);

  border-radius:14px;

  padding:22px;

  display:flex;
  flex-direction:column;
  gap:14px;
}

.reminderModal h3{
  font-size:16px;
  font-weight:600;
}

.reminderModal input,
.reminderModal textarea{

  width:100%;

  background:#0c0c0c;

  border:1px solid rgba(255,255,255,0.08);

  border-radius:8px;

  padding:10px;

  color:white;

  font-size:13px;
}

.reminderModal textarea{
  resize:none;
}

.reminderModalButtons{
  display:flex;
  justify-content:flex-end;
  gap:10px;
  margin-top:10px;
}
/* =========================
   REMINDERS POPOVER
========================= */

.notifications-popover {
  position: absolute;
  left: 260px; /* szerokość sidebar + odstęp */
  top: 0;

  width: 360px;
  max-height: 75vh;

  background: #0f172a;
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 18px;

  box-shadow: 0 20px 60px rgba(0,0,0,0.4);

  z-index: 99999;
  overflow: hidden;

  display: flex;
  flex-direction: column;

  animation: popIn 0.15s ease;
}

.notifications-popover.hidden {
  display: none;
}

@keyframes popIn {
  from {
    opacity: 0;
    transform: translateX(-10px) scale(0.98);
  }
  to {
    opacity: 1;
    transform: translateX(0) scale(1);
  }
}

/* HEADER */

.notifications-popover__header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;

  padding: 16px;
  border-bottom: 1px solid rgba(255,255,255,0.06);
}

.notifications-popover__title {
  color: #fff;
  font-size: 18px;
  font-weight: 700;
}

.notifications-popover__subtitle {
  color: #94a3b8;
  font-size: 12px;
  margin-top: 4px;
}

/* CLOSE BUTTON */

.notifications-popover__close {
  background: rgba(255,255,255,0.06);
  border: none;
  color: #fff;
  width: 32px;
  height: 32px;
  border-radius: 10px;
  cursor: pointer;
}

.notifications-popover__close:hover {
  background: rgba(255,255,255,0.12);
}

/* TABS */

.notifications-popover__tabs {
  padding: 10px 16px;
  border-bottom: 1px solid rgba(255,255,255,0.06);
}

.notifications-tab {
  background: #fff;
  color: #0f172a;
  border: none;
  border-radius: 999px;
  padding: 6px 12px;
  font-size: 12px;
  font-weight: 600;
}

/* BODY */

.notifications-popover__body {
  padding: 12px;
  overflow-y: auto;
}

/* EMPTY */

.notifications-empty {
  color: #64748b;
  font-size: 13px;
  text-align: center;
  padding: 20px;
}

/* CARD */

.notification-card {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 14px;
  padding: 12px;
  margin-bottom: 10px;
}

.notification-card__title {
  color: #fff;
  font-weight: 600;
  font-size: 14px;
}

.notification-card__time {
  color: #94a3b8;
  font-size: 11px;
  margin-top: 4px;
}

.notification-card__text {
  color: #cbd5f5;
  font-size: 13px;
  margin-top: 6px;
}

.notification-card__actions {
  margin-top: 10px;
  display: flex;
  gap: 6px;
}

.notification-card__btn {
  border: none;
  border-radius: 8px;
  padding: 6px 10px;
  font-size: 12px;
  cursor: pointer;
}

.notification-card__btn--primary {
  background: #fff;
  color: #0f172a;
}

.notification-card__btn--ghost {
  background: rgba(255,255,255,0.08);
  color: #fff;
}
/* CREATE */

.reminder-create {
  display: flex;
  gap: 6px;
  margin-bottom: 12px;
}

.reminder-create input {
  flex: 1;
  background: rgba(255,255,255,0.06);
  border: none;
  border-radius: 8px;
  padding: 8px;
  color: #fff;
  font-size: 12px;
}

.reminder-create button {
  background: #fff;
  color: #111;
  border: none;
  border-radius: 8px;
  padding: 8px 10px;
  cursor: pointer;
  font-size: 12px;
}

/* LIST */

.reminder-item {
  display: flex;
  align-items: center;
  gap: 10px;

  padding: 10px;
  border-radius: 10px;

  background: rgba(255,255,255,0.04);
  margin-bottom: 6px;
}

.reminder-item:hover {
  background: rgba(255,255,255,0.08);
}

.reminder-item.is-done {
  opacity: 0.5;
}

/* LEFT */

.reminder-left input {
  cursor: pointer;
}

/* CENTER */

.reminder-title {
  font-size: 13px;
  color: #fff;
}

.reminder-time {
  font-size: 11px;
  color: #94a3b8;
}

/* RIGHT */

.reminder-right button {
  background: transparent;
  border: none;
  color: #aaa;
  cursor: pointer;
}
/* =========================
   REMINDERS POPOVER – CLEAN UI
========================= */

.notifications-popover {
  position: absolute;
  left: 260px;
  top: 0;

  width: 360px;
  max-height: 75vh;

  background: rgba(17, 24, 39, 0.75);
  backdrop-filter: blur(16px);

  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 16px;

  box-shadow: 0 10px 30px rgba(0,0,0,0.25);

  z-index: 99999;
  overflow: hidden;

  display: flex;
  flex-direction: column;
}

.notifications-popover.hidden {
  display: none;
}

/* HEADER */

.notifications-popover__header {
  display: flex;
  justify-content: space-between;
  align-items: center;

  padding: 14px 16px;

  border-bottom: 1px solid rgba(255,255,255,0.06);
}

.notifications-popover__title {
  color: #fff;
  font-size: 16px;
  font-weight: 600;
}

.notifications-popover__subtitle {
  color: #94a3b8;
  font-size: 12px;
  margin-top: 2px;
}

/* CLOSE BUTTON */

.notifications-popover__close {
  background: rgba(255,255,255,0.06);
  border: none;
  color: #fff;
  width: 32px;
  height: 32px;
  border-radius: 10px;
  cursor: pointer;
}

.notifications-popover__close:hover {
  background: rgba(255,255,255,0.12);
}

/* TABS */

.notifications-popover__tabs {
  padding: 8px 16px;
  border-bottom: 1px solid rgba(255,255,255,0.06);
}

.notifications-tab {
  background: transparent;
  color: #94a3b8;
  border: none;
  padding: 4px 10px;
  font-size: 12px;
  cursor: pointer;
}

.notifications-tab.is-active {
  color: #fff;
  font-weight: 600;
}

/* BODY */

.notifications-popover__body {
  padding: 12px;
  overflow-y: auto;
}

/* EMPTY */

.notifications-empty {
  color: #64748b;
  font-size: 13px;
  text-align: center;
  padding: 20px;
}


.reminder-create {
  display: flex;
  gap: 6px;
  margin-bottom: 12px;
}

.reminder-create input {
  flex: 1;

  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.06);

  border-radius: 10px;
  padding: 8px 10px;

  color: #fff;
  font-size: 12px;

  outline: none;
}

.reminder-create input:focus {
  border-color: rgba(255,255,255,0.2);
}

.reminder-create button {
  background: rgba(255,255,255,0.08);
  color: #fff;

  border: none;
  border-radius: 10px;

  padding: 8px 10px;
  cursor: pointer;
  font-size: 12px;
}

.reminder-create button:hover {
  background: rgba(255,255,255,0.14);
}

/* =========================
   LIST
========================= */

.reminder-item {
  display: flex;
  align-items: center;
  gap: 10px;

  padding: 10px;
  border-radius: 12px;

  background: rgba(255,255,255,0.03);
  border: 1px solid transparent;

  transition: all 0.15s ease;
  margin-bottom: 6px;
}

.reminder-item:hover {
  background: rgba(255,255,255,0.06);
  border-color: rgba(255,255,255,0.08);
}

.reminder-item.is-done {
  opacity: 0.5;
}

/* LEFT */

.reminder-left input {
  width: 16px;
  height: 16px;
  accent-color: #22c55e;
  cursor: pointer;
}

/* CENTER */

.reminder-title {
  font-size: 13px;
  color: #fff;
}

.reminder-time {
  font-size: 11px;
  color: #94a3b8;
}

/* RIGHT */

.reminder-right button {
  background: transparent;
  border: none;
  color: #aaa;
  cursor: pointer;
  opacity: 0;
  transition: 0.2s;
}

.reminder-item:hover .reminder-right button {
  opacity: 1;
}
.tag--ok{
  background: rgba(43,214,123,.15);
  border-color: rgba(43,214,123,.35);
  color: #2bd67b;
}

.tag--warn{
  background: rgba(255,204,85,.15);
  border-color: rgba(255,204,85,.35);
  color: #ffcc55;
}

.tag--danger{
  background: rgba(255,91,91,.15);
  border-color: rgba(255,91,91,.35);
  color: #ff5b5b;
}

/* =========================
   BASE BADGE (GLASS UI)
========================= */

.badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  padding: 4px 10px;
  border-radius: 999px;

  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.2px;

  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);

  border: 1px solid rgba(255,255,255,0.12);

  white-space: nowrap;
}

/* =========================
   COLORS
========================= */

.badge--ok {
  color: #22c55e;
  background: rgba(34, 197, 94, 0.12);
  border-color: rgba(34, 197, 94, 0.25);
}

.badge--warn {
  color: #f59e0b;
  background: rgba(245, 158, 11, 0.12);
  border-color: rgba(245, 158, 11, 0.25);
}

.badge--danger {
  color: #ef4444;
  background: rgba(239, 68, 68, 0.12);
  border-color: rgba(239, 68, 68, 0.25);
}

/* =========================
   OPTIONAL: pulse (only critical)
========================= */

.badge--pulse {
  animation: badgePulse 1.8s infinite;
}

@keyframes badgePulse {
  0% { box-shadow: 0 0 0 0 rgba(239,68,68,0.4); }
  70% { box-shadow: 0 0 0 8px rgba(239,68,68,0); }
  100% { box-shadow: 0 0 0 0 rgba(239,68,68,0); }
}
/* ===== MODAL BACKDROP ===== */
.gxg-modal {
  position: fixed;
  inset: 0;
  background: rgba(10, 14, 20, 0.75);
  backdrop-filter: blur(6px);

  display: flex;
  align-items: center;
  justify-content: center;

  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease;

  z-index: 9999;
}

.gxg-modal.active {
  opacity: 1;
  pointer-events: auto;
}


/* ===== MODAL BOX ===== */
.gxg-modal-box {
  width: 100%;
  max-width: 520px;

  background: linear-gradient(180deg, #0f172a, #0b1220);
  border: 1px solid rgba(255,255,255,0.06);

  border-radius: 16px;
  box-shadow:
    0 30px 80px rgba(0,0,0,.6),
    inset 0 1px 0 rgba(255,255,255,.04);

  transform: translateY(20px) scale(.98);
  transition: all 0.2s ease;

  overflow: hidden;
}

.gxg-modal.active .gxg-modal-box {
  transform: translateY(0) scale(1);
}


/* ===== HEADER ===== */
.gxg-modal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;

  padding: 16px 18px;

  border-bottom: 1px solid rgba(255,255,255,.06);
}

.gxg-modal-title {
  font-size: 16px;
  font-weight: 700;
  color: #fff;
}


/* ===== BODY ===== */
.gxg-modal-body {
  padding: 18px;
}


/* ===== INPUT ===== */
.gxg-field {
  width: 100%;
  padding: 12px 14px;

  background: #0b1220;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 10px;

  color: #fff;
  font-size: 14px;

  outline: none;
  transition: border .15s ease, box-shadow .15s ease;
}

.gxg-field:focus {
  border-color: #3b82f6;
  box-shadow: 0 0 0 2px rgba(59,130,246,.2);
}


/* ===== BUTTONS ===== */
.gxg-btn {
  padding: 10px 14px;
  border-radius: 10px;
  font-size: 13px;
  cursor: pointer;
  border: none;
}

.gxg-btn--primary {
  background: #3b82f6;
  color: #fff;
}

.gxg-btn--primary:hover {
  background: #2563eb;
}

.gxg-btn--ghost {
  background: transparent;
  color: #9ca3af;
}

.gxg-btn--ghost:hover {
  color: #fff;
}


/* ===== CLOSE BTN ===== */
.gxg-iconbtn {
  width: 32px;
  height: 32px;

  display: flex;
  align-items: center;
  justify-content: center;

  border-radius: 8px;
  background: rgba(255,255,255,0.05);
  color: #fff;
  border: none;
  cursor: pointer;
}

.gxg-iconbtn:hover {
  background: rgba(255,255,255,0.1);
}


/* ===== TEXT ===== */
.gxg-muted {
  color: rgba(255,255,255,0.6);
}
/* ===== MODAL BACKDROP (bardziej elegancki blur) ===== */
.gxg-modal {
  position: fixed;
  inset: 0;
  background: rgba(5, 8, 15, 0.75);
  backdrop-filter: blur(10px);

  display: flex;
  align-items: center;
  justify-content: center;

  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease;

  z-index: 9999;
}

.gxg-modal.active {
  opacity: 1;
  pointer-events: auto;
}


/* ===== MODAL BOX (GLASS) ===== */
.gxg-modal-box {
  width: 100%;
  max-width: 520px;

  background: rgba(15, 23, 42, 0.55); /* glass */
  backdrop-filter: blur(20px);

  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 18px;

  box-shadow:
    0 40px 100px rgba(0,0,0,.7),
    inset 0 1px 0 rgba(255,255,255,.06);

  transform: translateY(20px) scale(.98);
  transition: all 0.2s ease;

  overflow: hidden;
}

.gxg-modal.active .gxg-modal-box {
  transform: translateY(0) scale(1);
}


/* ===== HEADER ===== */
.gxg-modal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;

  padding: 16px 18px;

  border-bottom: 1px solid rgba(255,255,255,.06);
}

.gxg-modal-title {
  font-size: 15px;
  font-weight: 700;
  color: #fff;
  letter-spacing: 0.2px;
}


/* ===== INPUT (dark glass) ===== */
.gxg-field {
  width: 100%;
  padding: 12px 14px;

  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 12px;

  color: #fff;
  font-size: 14px;

  outline: none;
  transition: all .15s ease;
}

.gxg-field::placeholder {
  color: rgba(255,255,255,0.35);
}

.gxg-field:focus {
  border-color: rgba(255,255,255,0.18);
  background: rgba(255,255,255,0.06);
}


/* ===== BUTTONS ===== */
.gxg-btn {
  padding: 10px 14px;
  border-radius: 12px;
  font-size: 13px;
  cursor: pointer;
  border: none;
}

/* PRIMARY → czarne premium */
.gxg-btn--primary {
  background: linear-gradient(180deg, #1f2937, #111827);
  color: #fff;
  border: 1px solid rgba(255,255,255,0.08);
}

.gxg-btn--primary:hover {
  background: linear-gradient(180deg, #374151, #1f2937);
}

/* GHOST */
.gxg-btn--ghost {
  background: transparent;
  color: rgba(255,255,255,0.6);
}

.gxg-btn--ghost:hover {
  color: #fff;
}


/* ===== CLOSE BTN ===== */
.gxg-iconbtn {
  width: 32px;
  height: 32px;

  display: flex;
  align-items: center;
  justify-content: center;

  border-radius: 10px;
  background: rgba(255,255,255,0.05);
  color: #fff;
  border: none;
  cursor: pointer;
}

.gxg-iconbtn:hover {
  background: rgba(255,255,255,0.1);
}


/* ===== TEXT ===== */
.gxg-muted {
  color: rgba(255,255,255,0.5);
}
.sidebar__brand {
  /* Dodaj to do obecnych stylów tej klasy: */
  border-radius: 12px; /* Zaokrąglenie rogów */
  
  /* Poniżej przykładowe style, które poprawią ogólny wygląd, 
     jeśli jeszcze ich nie masz: */
  border: 1px solid rgba(255, 255, 255, 0.1); /* Delikatna, półprzezroczysta ramka pasująca do ciemnego tła */
  padding: 16px; /* Odstęp wewnątrz ramki, by tekst i zdjęcie nie dotykały krawędzi */
  display: flex;
  align-items: center;
  gap: 15px; /* Odstęp między zdjęciem a tekstem */
}