/* «Матове скло», синій варіант (власник 25.10.2026, зразок /data/bizplans/dyzain/panel_uhod_zrazok.html).
   Лише вигляд — розмітка й функції CRM ті самі. Підключається ПІСЛЯ crm.css; прибрати стиль = прибрати цей файл.
   Розмиття (backdrop-filter) — лише на великих панелях; картки угод напівпрозорі без розмиття, щоб дошка на 400+ карток не гальмувала. */
:root{
  --g-ink:#0e1a33; --g-mute:rgba(14,26,51,.62); --g-acc:#1f6bff;
  --g-panel:rgba(255,255,255,.18); --g-solid:rgba(255,255,255,.74); --g-line:rgba(255,255,255,.42);
  --g-blur:blur(26px) saturate(140%);
  --g-shadow:0 10px 40px rgba(10,30,80,.22), inset 0 1px 0 rgba(255,255,255,.5);
  --d-ink:var(--g-ink); --d-mute:var(--g-mute); --d-blue:var(--g-acc); --d-line:rgba(14,26,51,.10);
  --d-card:var(--g-solid); --d-bg:rgba(232,240,252,.86); --d-blue-soft:rgba(31,107,255,.12);
  --r:18px;
}
html body{color:var(--g-ink);
  background:
    radial-gradient(55% 40% at 20% 0%,#0b2a6b 0,transparent 70%),
    radial-gradient(45% 35% at 90% 15%,#3f7fe0 0,transparent 70%),
    radial-gradient(40% 35% at 10% 65%,#cfe2ff 0,transparent 70%),
    radial-gradient(40% 40% at 85% 70%,#7fb2ff 0,transparent 70%),
    linear-gradient(180deg,#0d2f73 0%,#3c74d1 30%,#dce9fb 55%,#5f93e0 80%,#0a2560 100%) !important;
  background-attachment:fixed !important}
a{color:var(--g-acc)}

/* кнопки й поля — «пігулки» */
.btn{border-radius:22px; background:var(--g-acc)}
.btn.dr{background:rgba(255,255,255,.5); color:var(--g-ink); border:1px solid var(--g-line)}
.btn.dr:hover{background:rgba(255,255,255,.75)}
.inp{border-radius:14px; background:rgba(255,255,255,.92); border:1px solid rgba(14,26,51,.16)}
.inp:focus{border-color:var(--g-acc); box-shadow:0 0 0 3px rgba(31,107,255,.18)}

/* верхній рядок — темне скло над темно-синім верхом тла */
.top{background:rgba(9,30,80,.42); border-bottom:1px solid rgba(255,255,255,.18); box-shadow:0 6px 24px rgba(5,20,60,.25);
  backdrop-filter:var(--g-blur); -webkit-backdrop-filter:var(--g-blur)}
.top .inp{background:rgba(255,255,255,.88); border-radius:22px}
.top .btn.dr, .top .btn.zbtn{background:rgba(255,255,255,.12); color:#fff; border-color:rgba(255,255,255,.35)}
.top .btn.dr:hover, .top .btn.zbtn:hover{background:rgba(255,255,255,.22)}

/* смуга підсумків */
.kpi{background:transparent}
.kpi .k{background:var(--g-panel); border:1px solid var(--g-line); border-radius:16px; box-shadow:var(--g-shadow);
  backdrop-filter:var(--g-blur); -webkit-backdrop-filter:var(--g-blur)}
.kpi .kl{color:rgba(255,255,255,.85)}
.kpi b{color:#fff}
.kpi .k.hot{background:linear-gradient(150deg,rgba(31,107,255,.85),rgba(31,107,255,.45))}

/* бічне меню — світле скло, активний пункт — біла пігулка */
.side{background:rgba(255,255,255,.55); border-right:1px solid var(--g-line); box-shadow:var(--g-shadow);
  backdrop-filter:var(--g-blur); -webkit-backdrop-filter:var(--g-blur)}
.side a, .side-t{color:var(--g-ink)}
.side a:hover{background:rgba(255,255,255,.5)}
.side a.on{background:#fff; color:var(--g-acc); box-shadow:0 2px 10px rgba(0,0,0,.10)}

/* дошка: колонки — скляні панелі, картки — майже білі */
.col{background:var(--g-panel); border:1px solid var(--g-line); border-radius:var(--r); box-shadow:var(--g-shadow);
  backdrop-filter:var(--g-blur); -webkit-backdrop-filter:var(--g-blur); padding:6px}
.col h3{border-radius:14px}
.col .empty{color:rgba(14,26,51,.7)}
.card{background:var(--g-solid); border:1px solid rgba(255,255,255,.7); border-radius:16px; box-shadow:0 4px 18px rgba(10,30,80,.10)}
.card:hover{background:rgba(255,255,255,.9); border-color:var(--g-acc)}

/* розділи сторінок, список контактів */
.box, .crow{background:var(--g-solid); border:1px solid rgba(255,255,255,.7); box-shadow:var(--g-shadow);
  backdrop-filter:var(--g-blur); -webkit-backdrop-filter:var(--g-blur)}

/* вікна поверх: угода, завдання, перевірка */
.drawer{background:var(--d-bg); backdrop-filter:var(--g-blur); -webkit-backdrop-filter:var(--g-blur); border-left:1px solid var(--g-line)}
.drawer .bar{background:rgba(255,255,255,.55)}
.zvikno, .pv{background:rgba(240,246,255,.9); border:1px solid var(--g-line); border-radius:22px;
  backdrop-filter:var(--g-blur); -webkit-backdrop-filter:var(--g-blur)}
.zvikno-bg, .pv-bg{background:rgba(8,25,70,.35); backdrop-filter:blur(3px); -webkit-backdrop-filter:blur(3px)}
.msgs{background:rgba(255,255,255,.45)}
.msg.in{background:rgba(255,255,255,.85)}

/* текст просто на тлі: угорі тло темно-синє — світлий текст */
.per{display:inline-block; background:rgba(255,255,255,.7); padding:4px 12px; border-radius:14px}
.toast{border-radius:22px}
main:not(.login) > p.mute, main > p.empty, main > .empty{background:rgba(255,255,255,.72); padding:10px 14px; border-radius:14px; color:var(--g-ink)}
/* вхід — скляна картка посередині */
.login{margin:0 auto; position:relative; top:12vh; padding:24px 26px; background:rgba(255,255,255,.7); border:1px solid var(--g-line);
  border-radius:24px; box-shadow:var(--g-shadow); backdrop-filter:var(--g-blur); -webkit-backdrop-filter:var(--g-blur)}

@media (max-width:700px){
  .zvikno, .pv{border-radius:0}
}