:root{
  --bg:#050814; --bg2:#0c1020;
  --border:rgba(255,255,255,.10);
  --text:#f5f7ff; --muted:#a2acc7;
  --accent:#0b7fab; --accent2:#18a4d4;
  --danger:#e74c3c; --ok:#19d46b;
  --radius:18px;
  --shadow:0 18px 60px rgba(0,0,0,.55);
  --shadow2:0 10px 30px rgba(0,0,0,.35);
  --font:"Segoe UI",system-ui,-apple-system,Arial,sans-serif;


  /* === Typography tokens (safe defaults) === */
  --gx-text: var(--text);
  --gx-heading: var(--text);
  --gx-partner-text: var(--text);
}

*{box-sizing:border-box} html,body{
  scrollbar-gutter: stable;
height:100%}
body{
  margin:0; font-family:var(--font); color:var(--text);
  background:
    radial-gradient(1200px 700px at 70% 30%, rgba(24,164,212,.20), transparent 60%),
    radial-gradient(900px 600px at 20% 70%, rgba(11,127,171,.18), transparent 55%),
    linear-gradient(180deg, #050814, #050814);
}
.hidden{display:none!important}
.muted{color:var(--muted)}
#app{min-height:100%}

.gx-login{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:28px}
.gx-login-card{
  width:min(520px,100%);
  background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.04));
  border:1px solid var(--border);
  border-radius:24px;
  box-shadow:var(--shadow);
  padding:28px;
}
.gx-brand{display:flex;gap:12px;align-items:center;margin-bottom:14px}
.gx-logo{
  width:44px;height:44px;border-radius:14px;
  display:flex;align-items:center;justify-content:center;
  background:linear-gradient(135deg, rgba(19,64,116,.95), rgba(11,127,171,.75));
  box-shadow:0 10px 30px rgba(11,127,171,.25);
  font-weight:800;
}
.gx-logo.small{width:66px;height:66px;border-radius:12px;font-size:26px}
.gx-title{font-size:20px;font-weight:800;letter-spacing:.3px}
.gx-subtitle{font-size:12px;color:var(--muted)}
.gx-form{display:flex;flex-direction:column;gap:10px;margin-top:14px}
label{font-size:13px;color:var(--muted)}
input,select,textarea{
  width:100%; background:rgba(10,14,30,.55); color:var(--text);
  border:1px solid rgba(255,255,255,.10); border-radius:14px;
  padding:12px 14px; outline:none;
}
input:focus,select:focus,textarea:focus{
  border-color:rgba(24,164,212,.6);
  box-shadow:0 0 0 4px rgba(24,164,212,.15);
}
.btn{
  border:1px solid rgba(255,255,255,.10);
  background:rgba(255,255,255,.06);
  color:var(--text);
  border-radius:16px;
  padding:10px 14px;
  cursor:pointer;
  box-shadow:var(--shadow2);
}
.btn:hover{background:rgba(255,255,255,.08)}
.btn.primary{
  border-color:rgba(11,127,171,.55);
  background:linear-gradient(135deg, rgba(19,64,116,.95), rgba(11,127,171,.75));
}
.pill{
  padding:8px 12px; border-radius:999px;
  border:1px solid rgba(255,255,255,.10);
  background:rgba(255,255,255,.05);
  font-size:13px;
}
.gx-login-foot{margin-top:14px;font-size:12px}

.gx-shell{min-height:100vh}
.gx-topbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  min-height:72px;
  padding:0 18px;
  border-bottom:1px solid rgba(255,255,255,.08);
  background:linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.02));
  backdrop-filter:saturate(140%) blur(16px);
  -webkit-backdrop-filter:saturate(140%) blur(16px);
  position:relative;
  z-index:1500;
}
.gx-topbar-left{display:flex;align-items:center;gap:14px}
.gx-brandtext{line-height:1.05;;font-size:20px}
.gx-topbar-right{
  display:flex;
  align-items:center;
  gap:10px;
  padding:8px 10px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.10);
  background:rgba(255,255,255,.04);
  backdrop-filter: blur(10px);
}
.gx-topbar-right .btn{padding:8px 12px;border-radius:14px}
.gx-topbar-right .pill{padding:7px 10px}

/* =========================
   GX LAYOUT – BASE + L2
   ========================= */
.gx-layout{
  display:grid;
  grid-template-columns: 320px 1fr; /* L1 | MAIN */
  min-height: calc(100vh - 72px);
}
/* aktivní L2: L1 | L2 | MAIN */
.gx-layout.has-subrail{
  grid-template-columns: 320px 260px 1fr;
}


/* Prevent grid children from forcing horizontal overflow (critical for responsive shrink) */
.gx-layout > *{ min-width:0; }
.gx-main{ min-width:0; }
.gx-main-inner{ max-width:100%; min-width:0; }

.gx-sidebar{
  border-right:1px solid rgba(255,255,255,.08);
  padding:16px 14px;
  background:linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.01));
}
.gx-menu{display:flex;flex-direction:column;gap:10px}
.gx-menu a{
  display:flex;align-items:center;gap:12px;
  padding:14px 14px;
  border-radius:18px;
  border:1px solid rgba(255,255,255,.08);
  background:rgba(255,255,255,.03);
  color:var(--text); text-decoration:none;
}
.gx-menu a:hover{background:rgba(255,255,255,.06)}
.gx-menu a.active{outline:1px solid rgba(24,164,212,.35); background:rgba(24,164,212,.08)}
.gx-sidebar-footer{margin-top:14px;font-size:12px;opacity:.85}
.gx-main{padding:16px}
.gx-main-inner{
  min-height:calc(100vh - 72px - 32px);
  border:1px solid rgba(255,255,255,.08);
  border-radius:24px;
  background:linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02));
  box-shadow:var(--shadow2);
  padding:18px;
}
.gx-header-row{display:flex;justify-content:space-between;align-items:flex-start;gap:14px;flex-wrap:wrap}
.gx-h1{font-size:34px;margin:6px 0 10px}
.gx-sub{color:var(--muted);margin:0 0 16px}
.gx-actions{display:flex;gap:10px;flex-wrap:wrap}
.card{border:1px solid rgba(255,255,255,.08);background:rgba(255,255,255,.03);border-radius:24px;padding:16px}
.table{width:100%;border-collapse:separate;border-spacing:0 10px}
.table th{color:var(--muted);font-weight:600;text-align:left;padding:8px 10px}
.table td{padding:12px 10px;background:rgba(255,255,255,.03);border-top:1px solid rgba(255,255,255,.06);border-bottom:1px solid rgba(255,255,255,.06)}
.table td:first-child{border-left:1px solid rgba(255,255,255,.06);border-radius:16px 0 0 16px}
.table td:last-child{border-right:1px solid rgba(255,255,255,.06);border-radius:0 16px 16px 0}
.badge{display:inline-flex;align-items:center;gap:8px;padding:6px 10px;border-radius:999px;border:1px solid rgba(255,255,255,.10);background:rgba(255,255,255,.05);font-size:12px}
.badge.ok{border-color:rgba(25,212,107,.5);background:rgba(25,212,107,.12)}
.badge.danger{border-color:rgba(231,76,60,.5);background:rgba(231,76,60,.12)}
.toast-wrap{position:fixed;right:16px;bottom:16px;display:flex;flex-direction:column;gap:10px;z-index:9999}
.toast{width:min(420px,calc(100vw - 32px));border-radius:18px;border:1px solid rgba(255,255,255,.10);background:rgba(10,14,30,.78);box-shadow:var(--shadow);padding:12px 14px}
.toast .t{font-weight:700;margin-bottom:4px}
.toast .m{color:var(--muted);font-size:13px}
@media (max-width:980px){
  /* Mobile layout: single-column main; sidebar becomes off-canvas (hamburger) */
  .gx-layout{ grid-template-columns: 1fr; }
  .gx-layout.has-subrail{ grid-template-columns: 1fr; }

  


/* L2 subrail must not squeeze mainframe on small screens */
.gx-subrail{ display:none !important; }
.gx-layout.has-subrail{ grid-template-columns: 1fr !important; }

/* Allow tables / wide toolbars to scroll instead of breaking layout */
.gx-main-inner{ overflow-x:auto; }
.table{ display:block; overflow-x:auto; -webkit-overflow-scrolling:touch; }
/* Off-canvas sidebar */
  .gx-sidebar{
    position: fixed;
    top: var(--gx-topbar-h, 72px);
    left: 0;
    bottom: 0;
    width: min(320px, 86vw);
    z-index: 1200;
    border-right: 1px solid rgba(255,255,255,.08);
    border-bottom: 0;
    transform: translateX(-110%);
    transition: transform .18s ease;
    overflow: auto;
  }
  body.gx-nav-open .gx-sidebar{ transform: translateX(0); }

  /* Backdrop for off-canvas */
  .gx-nav-backdrop{
    position: fixed;
    inset: 0;
    z-index: 1100;
    background: rgba(0,0,0,.35);
    backdrop-filter: blur(2px);
    opacity: 0;
    pointer-events: none;
    transition: opacity .18s ease;
  }
  body.gx-nav-open .gx-nav-backdrop{
    opacity: 1;
    pointer-events: auto;
  }

  /* Main content takes full width; keep comfortable padding */
  .gx-main{ padding: 14px; }
}

/* ===== Loader ===== */
.gx-loader{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;z-index:9998;background:rgba(0,0,0,.35)}
.gx-loader.hidden{display:none}
.gx-loader-card{display:flex;align-items:center;gap:12px;padding:14px 16px;border-radius:18px;border:1px solid rgba(255,255,255,.10);background:rgba(10,14,30,.85);box-shadow:var(--shadow)}
.gx-loader-spin{width:18px;height:18px;border-radius:50%;border:2px solid rgba(255,255,255,.18);border-top-color:rgba(24,164,212,.85);animation:gxspin 1s linear infinite}
.gx-loader-text{color:var(--muted);font-size:13px}
@keyframes gxspin{to{transform:rotate(360deg)}}

/* ===== Modal ===== */
.gx-modal{position:fixed;inset:0;z-index:9997;display:flex;align-items:center;justify-content:center;padding:20px}
.gx-modal.hidden{display:none}
.gx-modal-backdrop{position:absolute;inset:0;background:rgba(0,0,0,.55)}
.gx-modal-card{position:relative;width:min(860px,100%);max-height:calc(100vh - 40px);overflow:auto;border-radius:24px;border:1px solid rgba(255,255,255,.10);background:rgba(10,14,30,.92);box-shadow:var(--shadow)}
.gx-modal-head{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 16px;border-bottom:1px solid rgba(255,255,255,.08)}
.gx-modal-title{font-weight:800}
.gx-modal-body{padding:16px}
.gx-modal-foot{padding:14px 16px;border-top:1px solid rgba(255,255,255,.08)}

/* ================================
   GX – selected row (unified)
   ================================ */
.gx-row{
  cursor:pointer;
  border:1px solid rgba(255,255,255,.06);
  background: rgba(255,255,255,.03);
  border-radius:16px;
  transition: transform .08s ease, background .12s ease, border-color .12s ease;
}
.gx-row:hover{
  background: rgba(255,255,255,.045);
  border-color: rgba(255,255,255,.10);
}
.gx-row.is-selected{
  background: linear-gradient(180deg, rgba(11,127,171,.14), rgba(255,255,255,.03));
  border-color: rgba(11,127,171,.45);
  box-shadow: 0 0 0 4px rgba(11,127,171,.10), var(--shadow2);
  transform: translateY(-1px);
}




/* =========================
   GX Layer (overlay detail)
   ========================= */
.gx-layer-backdrop{
  position:fixed; inset:0;
  background: rgba(0,0,0,.55);
  backdrop-filter: blur(6px);
  z-index: 999;
}
.gx-layer{
  position:fixed;
  left:50%; top:50%;
  transform: translate(-50%,-50%);
  width: min(1080px, calc(100vw - 24px));
  max-height: min(88vh, calc(100vh - 24px));
  z-index: 1000;
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 18px;
  background: rgba(18,22,30,.96);
  box-shadow: 0 18px 60px rgba(0,0,0,.55);
  overflow: hidden;
}
.gx-layer-head{
  display:flex; align-items:center; justify-content:space-between;
  gap:12px;
  padding: 14px 16px;
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.gx-layer-title{ font-weight: 800; font-size: 16px; }
.gx-layer-body{
  padding: 14px 16px;
  overflow: auto;
  max-height: calc(min(88vh, calc(100vh - 24px)) - 56px);
}
body.gx-freeze{ overflow:auto; } /* nezamykat scrollbar */

/* =========================
   Dashboard widgets
   ========================= */
.gx-grid{
  display:grid;
  gap:12px;
}
.gx-grid.kpi{ grid-template-columns: repeat(5, minmax(0,1fr)); }
@media (max-width: 1100px){ .gx-grid.kpi{ grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (max-width: 520px){ .gx-grid.kpi{ grid-template-columns: 1fr; } }

.kpi-card{
  padding:14px 14px 12px;
}

/* KPI accents (subtle color variety) */
.kpi-card{ position:relative; overflow:hidden; }
.kpi-card::before{
  content:"";
  position:absolute; left:0; top:0; bottom:0;
  width:4px;
  background: rgba(110,167,255,.7);
}
.kpi-card[data-kpi="2"]::before{ background: rgba(98,255,214,.75); }
.kpi-card[data-kpi="3"]::before{ background: rgba(255,210,92,.75); }
.kpi-card[data-kpi="4"]::before{ background: rgba(255,123,172,.75); }
.kpi-card[data-kpi="5"]::before{ background: rgba(190,126,255,.75); }
.kpi-title{ font-size: 12px; opacity:.75; }
.kpi-value{ font-size: 22px; font-weight: 900; margin-top:6px; }
.kpi-sub{ margin-top:6px; font-size: 12px; opacity:.75; }
.gx-row{
  display:grid;
  gap:12px;
  grid-template-columns: 1.2fr .8fr;
}
@media (max-width: 1100px){ .gx-row{ grid-template-columns: 1fr; } }

.dash-buckets{
  display:grid;
  gap:10px;
  grid-template-columns: repeat(5, minmax(0,1fr));
}
@media (max-width: 1200px){ .dash-buckets{ grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (max-width: 520px){ .dash-buckets{ grid-template-columns: 1fr; } }
.bucket{
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 14px;
  padding: 10px;
  background: rgba(255,255,255,.03);
  min-height: 120px;
}
.bucket h4{ margin:0 0 8px; font-size: 12px; opacity:.75; letter-spacing:.3px; text-transform: uppercase; }
.bucket .item{
  padding:8px 10px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.22);
  margin-bottom:8px;
  cursor:pointer;
}
.bucket .item:last-child{ margin-bottom:0; }
.bucket .item .t{ font-weight:800; font-size: 13px; }
.bucket .item .m{ font-size: 12px; opacity:.75; margin-top:2px; display:flex; gap:8px; flex-wrap:wrap; }

.progress{
  height: 10px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.06);
  overflow: hidden;
}
.progress > div{
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, rgba(98,255,214,.9), rgba(110,167,255,.9));
}
.progress-meta{
  display:flex; justify-content:space-between; gap:10px;
  margin-top:8px; font-size:12px; opacity:.78;
}



/* Password eye toggle */
.gx-pass-wrap{position:relative;display:block}
.gx-pass-wrap input{padding-right:44px}
.gx-pass-toggle{
  position:absolute;right:10px;top:50%;transform:translateY(-50%);
  width:34px;height:34px;border-radius:10px;
  border:1px solid var(--border);
  background: rgba(255,255,255,.04);
  color: var(--text);
  cursor:pointer;
}
.gx-pass-toggle:hover{background: rgba(255,255,255,.07)}

td.gx-ellipsis{
  max-width: 360px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
td.gx-ellipsis{ max-width:360px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
tr.gx-rowlink.is-selected td{ background:rgba(120,170,255,0.10); }

/* =========================
   L2 subrail (secondary menu)
   ========================= */

/* subrail panel (hidden by default; router toggles .is-visible) */
.gx-subrail{
  display:none;
  border-right:1px solid rgba(255,255,255,.08);
  padding:16px 14px;
  background:linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.01));
}
.gx-subrail.is-visible{ display:block; }
.gx-subrail-inner{ display:flex; flex-direction:column; gap:10px; }

/* generic tile style for L2 (works for partner_profile too) */
.gx-subrail a.sub-tile,
#gx-subrail-box a{
  display:flex; align-items:center; gap:12px;
  padding:12px 12px;
  border-radius:18px;
  border:1px solid rgba(255,255,255,.10);
  background:rgba(255,255,255,.03);
  color:var(--text);
  text-decoration:none;
}
.gx-subrail a.sub-tile:hover,
#gx-subrail-box a:hover{ background:rgba(255,255,255,.06); }

.gx-subrail a.sub-tile.is-active,
#gx-subrail-box a.active{
  outline:1px solid rgba(24,164,212,.35);
  background:rgba(24,164,212,.08);
}

.gx-subrail .sub-ico{
  width:28px;height:28px;
  border-radius:12px;
  display:flex;align-items:center;justify-content:center;
  background:rgba(0,0,0,.22);
  border:1px solid rgba(255,255,255,.10);
}
.gx-subrail .sub-lbl{
  font-size:13px;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}


/* =========================
   Typography scaling hooks
   ========================= */
:root{ --gx-font-scale: 1; --gx-heading: var(--text); }
html{ font-size: calc(16px * var(--gx-font-scale)); }
h1,h2,h3,.gx-title,.gx-h1{ color: var(--gx-heading, inherit); }
body{ color: var(--gx-text, inherit); }


/* Toast/hlášky vždy nad spodním toolbarem */
.gx-toast,
.toast,
#gx-toast,
#toast,
.gx-toasts,
#gx-toasts,
#gx-toast-host,
#toast-host,
.gx-toast-host {
  position: fixed !important;
  left: 12px;
  right: 12px;
  bottom: 92px !important;   /* výška toolbaru + rezerva */
  z-index: 30000 !important; /* nad modálem i toolbarem */
  pointer-events: none;      /* ať toast neblokuje kliky */
}


/* === Prefs bar toggle (hide bottom toolbar) === */
body.gx-prefsbar-hidden .gx-toast,
body.gx-prefsbar-hidden .toast,
body.gx-prefsbar-hidden #gx-toast,
body.gx-prefsbar-hidden #toast,
body.gx-prefsbar-hidden .gx-toasts,
body.gx-prefsbar-hidden #gx-toasts,
body.gx-prefsbar-hidden #gx-toast-host,
body.gx-prefsbar-hidden #toast-host,
body.gx-prefsbar-hidden .gx-toast-host{
  bottom: 12px !important;
}


/* =========================================================
   Global UX prefs hooks (Settings) – FINAL
========================================================= */
:root{
  --gx-density: 1;
  --gx-page-max: 1100px;
}

/* Density: scale common paddings/radii without rewriting whole UI */
.card{ padding: calc(16px * var(--gx-density)); border-radius: calc(24px * (0.85 + 0.15*var(--gx-density))); }
.btn{ padding: calc(10px * var(--gx-density)) calc(14px * var(--gx-density)); border-radius: calc(16px * (0.85 + 0.15*var(--gx-density))); }
.pill{ padding: calc(6px * var(--gx-density)) calc(10px * var(--gx-density)); border-radius: calc(999px * 1); }
input,textarea,select{ padding: calc(10px * var(--gx-density)) calc(12px * var(--gx-density)); border-radius: calc(14px * (0.85 + 0.15*var(--gx-density))); }

/* Reduce motion */
.gx-reduce-motion *, .gx-reduce-motion *::before, .gx-reduce-motion *::after{
  transition: none !important;
  animation: none !important;
  scroll-behavior: auto !important;
}

/* nove pridane styly */
.gx-section-head {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

/* krizek pro CLOSE v modalnim okne */
.opps-topbar{ display:flex; justify-content:flex-end; margin:2px 2px 8px 2px; }
#opps-close-x{ width:34px; height:34px; border-radius:12px; font-size:16px; }

/* Topbar theme selector – always visible */
#gx-theme{
  min-width: 240px;
  height: 38px;
  padding: 0 14px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.22);
  background: rgba(0,0,0,.26);
  color: rgba(255,255,255,.92);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

#gx-theme:focus{
  outline: none;
  box-shadow: 0 0 0 3px rgba(115,240,198,.35);
  border-color: rgba(115,240,198,.55);
}

/* option text on white dropdown list */
#gx-theme option{
  color: #0b1f33;
}

/* === Toast visibility + status accents (override) === */
.toast{
  color: rgba(255,255,255,.95);
  border: 1px solid rgba(255,255,255,.16);
}
.toast .m{
  color: rgba(255,255,255,.78);
}
.toast.toast-ok{
  border-color: rgba(25,212,107,.85);
  box-shadow: 0 0 0 1px rgba(25,212,107,.25), 0 10px 30px rgba(0,0,0,.35);
}
.toast.toast-danger{
  border-color: rgba(231,76,60,.85);
  box-shadow: 0 0 0 1px rgba(231,76,60,.22), 0 10px 30px rgba(0,0,0,.35);
}


/* === Toast icons + spacing (override) === */
.toast{
  display:flex;
  gap:10px;
  align-items:flex-start;
}
.toast .ti{
  font-size: 16px;
  line-height: 1;
  margin-top: 2px;
  filter: drop-shadow(0 2px 6px rgba(0,0,0,.35));
}
.toast .t{
  flex:1;
  min-width:0;
}



/* Opportunities - View B team tiny pills */
.opps-pill{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width: 34px;
  height: 18px;
  padding: 0 6px;
  border-radius: 999px;
  border: 1px solid var(--gx-border, rgba(0,0,0,.12));
  font-size: 11px;
  line-height: 1;
  letter-spacing: .1px;
  margin-right: 6px;
  opacity: .95;
  white-space: nowrap;
}
.opps-pill.owner{ font-weight: 700; }
.opps-pill.assigned{ font-weight: 600; }
.opps-pill.edit{ }
.opps-pill.view{ opacity: .8; }



/* =========================================================
   FUTURE TAB – WOW EFFECT: BORDER RUNNER (LIGHT TRAVELING)
   ========================================================= */

#ma-root .ma-fx-runner{
  position:relative;
}

#ma-root .ma-fx-runner:hover{
  border-color: color-mix(in srgb, var(--ma-blue) 45%, transparent);
}

#ma-root .ma-fx-runner::after{
  content:"";
  position:absolute;
  inset:0;
  border-radius:inherit;
  padding:1px;
  pointer-events:none;
  opacity:0;
  transition:opacity .18s ease;

  background:
    conic-gradient(
      from var(--ma-runner-a, 0turn),
      transparent 0turn,
      transparent .92turn,
      rgba(255,255,255,.95) .94turn,
      color-mix(in srgb, var(--ma-blue) 70%, transparent) .955turn,
      transparent .975turn,
      transparent 1turn
    );

  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  mask-composite: exclude;

  filter: drop-shadow(0 0 10px color-mix(in srgb, var(--ma-blue) 55%, transparent));
}

#ma-root .ma-fx-runner:hover::after{
  opacity:1;
  animation: ma-runner-spin 1.35s linear infinite;
}

@keyframes ma-runner-spin{
  to{ --ma-runner-a: 1turn; }
}

@media (prefers-reduced-motion: reduce){
  #ma-root .ma-fx-runner:hover::after{
    animation:none;
    opacity:1;
  }
}


/* =========================================================
   BASELINE PATCH (2026-01-13)
   - Keep visited links readable on dark UI
   - Prevent menu emoji icons from "disappearing" by forcing emoji font fallback
   - Add positive action button style (.btn.positive)
========================================================= */

/* Links: never purple (visited) */
.gx-main-inner a,
.card a,
.gx-layer a{
  color: var(--gx-link, #73F0C6);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.gx-main-inner a:visited,
.card a:visited,
.gx-layer a:visited{
  color: var(--gx-link, #73F0C6);
}
.gx-main-inner a:hover,
.card a:hover,
.gx-layer a:hover{
  filter: brightness(1.15);
  text-decoration-thickness: 2px;
}

/* Menu icons: force emoji fallback so they never vanish */
.gx-menu a span:first-child,
#gx-subrail-box a span:first-child{
  font-family: "Apple Color Emoji","Segoe UI Emoji","Noto Color Emoji",system-ui,sans-serif !important;
  font-size: 18px;
  line-height: 1;
  opacity: 1 !important;
  color: var(--text) !important;
  -webkit-text-fill-color: var(--text) !important;
}

/* Positive action button */
.btn.positive{
  background: linear-gradient(180deg, #2ecc71, #27ae60);
  border: 1px solid rgba(46, 204, 113, 0.65);
  color: #0b1f14;
  font-weight: 700;
  box-shadow:
    0 0 0 0 rgba(46,204,113,0),
    0 8px 24px rgba(46,204,113,0.25);
}
.btn.positive:hover{
  filter: brightness(1.08);
  box-shadow:
    0 0 0 3px rgba(46,204,113,0.25),
    0 10px 28px rgba(46,204,113,0.35);
}
.btn.positive:active{
  transform: translateY(1px);
}


/* === Convert to Project – PRIMARY GREEN CTA === */
.btn-project-convert{
  background: linear-gradient(135deg, #22c55e, #16a34a);
  color: #ffffff !important;
  border: 1px solid rgba(34,197,94,0.55);
  font-weight: 700;
  box-shadow:
    0 8px 26px rgba(34,197,94,0.35),
    inset 0 0 0 1px rgba(255,255,255,0.12);
}

.btn-project-convert:hover{
  background: linear-gradient(135deg, #2dd36f, #16a34a);
  box-shadow:
    0 10px 34px rgba(34,197,94,0.45),
    inset 0 0 0 1px rgba(255,255,255,0.18);
}

.btn-project-convert:active{
  transform: translateY(1px);
  box-shadow:
    0 6px 18px rgba(34,197,94,0.35);
}

/* disabled / archived */
.btn-project-convert:disabled{
  opacity: 0.45;
  filter: grayscale(0.6);
  cursor: not-allowed;
}


#access-project-convert{
  background: linear-gradient(135deg, #22c55e, #16a34a) !important;
  border: 1px solid rgba(34,197,94,0.55) !important;
  color:#fff !important;
  box-shadow: 0 8px 26px rgba(34,197,94,0.35) !important;
}
#access-project-convert:hover{
  background: linear-gradient(135deg, #2dd36f, #16a34a) !important;
}

/* ============================
   Opportunity – Offer tab
   UNDER CONSTRUCTION (Nabídka)
============================ */

.offer-under-construction{
  position: relative;
  background: rgba(180, 60, 60, 0.22);
  border: 1px solid rgba(255, 120, 120, 0.35);
  border-radius: 16px;
  padding: 18px;
  overflow: hidden;
}

/* Watermark */
.offer-under-construction .uc-watermark{
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;

  font-size: 64px;
  font-weight: 800;
  letter-spacing: 4px;
  text-transform: uppercase;

  color: rgba(255,255,255,0.12);
  transform: rotate(-12deg);
  pointer-events: none;
  user-select: none;
  white-space: nowrap;
}

/* Content above watermark */
.offer-under-construction .uc-content{
  position: relative;
  z-index: 2;
}

/* Make disabled state obvious inside this tab */
.offer-under-construction .uc-disabled{
  opacity: 0.85;
}
.offer-under-construction input[disabled],
.offer-under-construction textarea[disabled],
.offer-under-construction select[disabled],
.offer-under-construction button[disabled]{
  opacity: 0.60;
  cursor: not-allowed;
}

/* ============================
   Opportunity tab badge
   UNDER CONSTRUCTION
============================ */

.opps-tab{
  position: relative;
}

/* red dot */
.opps-tab-dot{
  position: absolute;
  top: 6px;
  right: 6px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #ff5a5a;
  box-shadow:
    0 0 0 2px rgba(20,26,40,0.9),   /* oddělení od pozadí */
    0 0 6px rgba(255,90,90,0.8);   /* jemný glow */
}

/* když je tab aktivní, dot zůstává, ale je klidnější */
.opps-tab.active .opps-tab-dot{
  opacity: 0.75;
}

/* =========================================================
   GLOBAL SCROLLBAR – GX THEME
   Works: Chrome / Edge / Safari / Firefox
========================================================= */

/* === Tokens (navázané na váš design) === */
:root{
  --gx-scroll-size: 10px;
  --gx-scroll-radius: 999px;

  --gx-scroll-track: rgba(255,255,255,.06);
  --gx-scroll-thumb: rgba(24,164,212,.45);   /* accent */
  --gx-scroll-thumb-hover: rgba(24,164,212,.75);
}

/* === Chrome / Edge / Safari === */
::-webkit-scrollbar{
  width: var(--gx-scroll-size);
  height: var(--gx-scroll-size);
}

::-webkit-scrollbar-track{
  background: var(--gx-scroll-track);
}

::-webkit-scrollbar-thumb{
  background-color: var(--gx-scroll-thumb);
  border-radius: var(--gx-scroll-radius);
  border: 2px solid var(--gx-scroll-track); /* air-gap */
}

::-webkit-scrollbar-thumb:hover{
  background-color: var(--gx-scroll-thumb-hover);
}

/* roh (např. tabulky) */
::-webkit-scrollbar-corner{
  background: transparent;
}

/* === Firefox === */
*{
  scrollbar-width: thin;
  scrollbar-color:
    var(--gx-scroll-thumb)
    var(--gx-scroll-track);
}

/* ===== GX Glass Buttons (restore) ===== */
.btn{
  appearance:none;
  border-radius: 999px;
  padding: 8px 14px;
  border: 1px solid rgba(255,255,255,0.14);
  background: rgba(255,255,255,0.06);
  color: rgba(255,255,255,0.90);

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

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.10),
    0 12px 30px rgba(0,0,0,0.20);

  cursor:pointer;
  transition: transform .12s ease, background .12s ease, border-color .12s ease, box-shadow .12s ease;
}

.btn:hover{
  transform: translateY(-1px);
  background: rgba(255,255,255,0.085);
  border-color: rgba(255,255,255,0.22);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.12),
    0 16px 40px rgba(0,0,0,0.26);
}

.btn:active{
  transform: translateY(0);
  background: rgba(255,255,255,0.065);
  box-shadow:
    inset 0 2px 10px rgba(0,0,0,0.25),
    0 10px 26px rgba(0,0,0,0.20);
}

.btn:focus-visible{
  outline: none;
  box-shadow:
    0 0 0 3px rgba(120,160,255,0.35),
    inset 0 1px 0 rgba(255,255,255,0.12),
    0 16px 40px rgba(0,0,0,0.26);
}

/* Primary = “blue glass” */
.btn.primary{
  border-color: rgba(120,160,255,0.60);
  background: rgba(80,120,220,0.26);
  color: #fff;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.12),
    0 14px 36px rgba(80,120,220,0.16);
}
.btn.primary:hover{
  background: rgba(80,120,220,0.34);
  border-color: rgba(120,160,255,0.75);
}

/* Optional: subtle “outline” variants keep glass feel */
.btn.gx-btn-outline-red,
.btn.gx-btn-outline-blue,
.btn.gx-btn-outline-green{
  background: rgba(255,255,255,0.03);
}


/* ===== GX Glass Buttons (restored) ===== */
.btn{
  appearance:none;
  border-radius: 999px;
  padding: 8px 14px;
  border: 1px solid rgba(255,255,255,0.14);
  background: rgba(255,255,255,0.06);
  color: rgba(255,255,255,0.90);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.10),
    0 12px 30px rgba(0,0,0,0.20);
}

/* dotted leader between checkbox and assignee */
.assignee-row{
  display:flex;
  align-items:center;
  gap:12px;
}
.assignee-row .leader{
  flex:1;
  border-bottom:1px dotted rgba(255,255,255,0.35);
  margin:0 6px;
}



/* Version badge */
.gx-version{ margin-top:6px; display:inline-flex; align-items:center; gap:6px; font-size:11px; letter-spacing:.4px; text-transform:uppercase; opacity:.85; padding:4px 10px; border-radius:999px; border:1px solid rgba(255,255,255,.12); background:rgba(255,255,255,.05); }


/* ======================================================
   ENV indicator (DEV/PROD)
   - Color is controlled by CSS variable: --gx-env-color (set in config.js)
====================================================== */
.gx-envbar{
  height: 7px;
  width: 100%;
  background: var(--gx-env-color, transparent);
  border-bottom: 1px solid rgba(255,255,255,.10);
  box-shadow: 0 6px 20px rgba(0,0,0,.25);
}

.pill.gx-env-pill{
  margin-left: 8px;
  padding: 4px 10px;
  font-weight: 700;
  letter-spacing: .3px;
  color: #0b0e1a;
  border: none;
  box-shadow: 0 8px 20px rgba(0,0,0,.25);
}
html[data-gx-env="PROD"] .pill.gx-env-pill{
  color: #062010;
}


/* === ENV (DEV/PROD) UI helpers === */
.gx-topbar{ position: relative; }
.gx-envbar{
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  pointer-events: none;
  z-index: 5;
}
.gx-topbar-left, .gx-topbar-right{ position: relative; z-index: 6; }

.gx-meta-row{
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 4px;
}

.is-focus{
  outline: 2px solid rgba(255,190,90,0.9);
  outline-offset: 2px;
  box-shadow: 0 0 0 6px rgba(255,190,90,0.18);
  border-radius: 10px;
  transition: all .25s ease;
}