:root{
  --bg0:#081424;
  --bg1:#0e2239;
  --bg2:#15324f;

  --shellLine: rgba(160,208,248,.030);
  --shellSweep: rgba(126,188,238,.15);
  --shellSweepSoft: rgba(86,154,214,.10);

  --frame: rgba(20,42,68,.68);
  --frameDeep: rgba(14,32,54,.76);
  --frameEdge: rgba(152,205,247,.24);
  --frameEdgeStrong: rgba(178,220,251,.33);
  --frameTop: rgba(196,230,255,.12);

  --surface: rgba(25,50,78,.74);
  --surfaceDeep: rgba(20,42,66,.80);
  --surfaceEdge: rgba(132,188,233,.22);

  --text: rgba(243,248,252,.95);
  --muted: rgba(207,226,241,.68);
  --muted2: rgba(184,208,227,.50);

  --accent: #2e86de;
  --accent2:#7fc6ff;
  --accentSoft: rgba(46,134,222,.18);

  --ok:#4fc390;
  --warn:#dbbb72;
  --danger:#dd7078;

  --r12:10px;
  --r16:14px;
  --r20:16px;
  --r24:18px;

  --shadowFrame: 0 10px 24px rgba(3,16,30,.24);
  --shadowSurface: 0 6px 14px rgba(3,16,30,.18);
  --focusRing: 0 0 0 3px rgba(90,171,238,.20);
}

html, body{
  color-scheme: dark;
}

body{
  background-image:
    linear-gradient(112deg, rgba(126,188,238,.13) 0%, rgba(126,188,238,0) 34%),
    radial-gradient(900px 560px at 86% -8%, rgba(86,154,214,.08), transparent 68%),
    url("/assets/cg-facade-window-grid.svg?v=20260519-facade1"),
    linear-gradient(180deg, var(--shellLine) 0 1px, transparent 1px),
    linear-gradient(90deg, var(--shellLine) 0 1px, transparent 1px),
    repeating-linear-gradient(118deg, transparent 0 132px, rgba(160,208,248,.020) 133px, transparent 134px),
    linear-gradient(180deg, var(--bg0), var(--bg1) 48%, var(--bg2));
  background-position:
    center center,
    center center,
    center center,
    left top,
    left top,
    center center,
    center center;
  background-size:
    auto,
    auto,
    100% 100%,
    100% 92px,
    92px 100%,
    auto,
    auto;
  background-repeat:
    no-repeat,
    no-repeat,
    no-repeat,
    repeat,
    repeat,
    repeat,
    no-repeat;
  background-attachment: fixed;
}

body::before{
  content:"";
  position:fixed;
  left:0;
  bottom:-62px;
  width:clamp(500px, 42vw, 760px);
  height:clamp(330px, 44vh, 500px);
  z-index:-1;
  pointer-events:none;
  user-select:none;
  opacity:.40;
  mix-blend-mode:screen;
  background:url("/assets/moscow-city-skyline-exact-transparent-site.svg?v=20260519-edge6") left bottom / auto 100% no-repeat;
}

body::after{
  content:"";
  position:fixed;
  right:0;
  bottom:-62px;
  width:clamp(500px, 42vw, 760px);
  height:clamp(330px, 44vh, 500px);
  z-index:-1;
  pointer-events:none;
  user-select:none;
  opacity:.40;
  mix-blend-mode:screen;
  background:url("/assets/moscow-city-skyline-exact-transparent-site.svg?v=20260519-edge6") right bottom / auto 100% no-repeat;
}

@media (max-width: 980px){
  body::before,
  body::after{
    bottom:-42px;
    width:58vw;
    height:300px;
    opacity:.22;
  }
}

.topbar,
.card,
.modal,
.dbgPanel,
.deviceGateCard,
.qcEditToast,
.tableWrap,
.toolbar,
.seg,
.reportTableWrap,
.simpleSummaryCard,
.attentionSimple,
.attentionSimpleRow,
.kpi,
.toast{
  border: 1px solid var(--frameEdge) !important;
  background:
    linear-gradient(180deg, var(--frameTop), rgba(196,230,255,.03) 34%, rgba(196,230,255,0) 52%),
    linear-gradient(180deg, var(--frame), var(--frameDeep)) !important;
  box-shadow: var(--shadowFrame) !important;
  backdrop-filter: blur(5px) saturate(1.06);
}

.topbar,
.card,
.modal,
.deviceGateCard,
.qcEditToast{
  position:relative;
  overflow:hidden;
}

.topbar::before,
.card::before,
.modal::before,
.deviceGateCard::before,
.qcEditToast::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  border-radius:inherit;
  background:
    linear-gradient(90deg, transparent 12%, rgba(186,226,255,.20), transparent 88%) top / 100% 1px no-repeat;
}

.topbar{
  border-radius:18px !important;
}

.card{
  border-radius:18px !important;
}

.modal,
.deviceGateCard{
  border-radius:18px !important;
}

.table,
table.table,
.tableWrap,
.toolbar{
  border-radius:16px !important;
}

.itemRow,
.roleIcon,
.cellBtn,
.reportArrival,
.plannerTable td input,
.plannerTable td select,
table.table tbody tr,
.table tbody tr{
  background:
    linear-gradient(180deg, rgba(48,84,121,.24), rgba(28,60,92,.24)) !important;
  border-color: var(--surfaceEdge) !important;
  box-shadow: var(--shadowSurface);
}

.itemRow.today,
.itemRow.now{
  background:
    linear-gradient(180deg, rgba(68,124,182,.28), rgba(38,84,131,.30)) !important;
  border-color: rgba(136,202,250,.42) !important;
}

.leftBlock{
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
  gap: 10px !important;
}

.itemDay{
  width: 70px;
  opacity: .92;
}

.itemDay .muted{
  color: rgba(197,220,238,.70) !important;
}

.vSep{
  width: 2px !important;
  height: 38px !important;
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(92,159,219,.50), rgba(74,140,199,.34)) !important;
  box-shadow: none !important;
}

.pill,
.badge,
.miniBadge,
.rolePill,
.employeeMiniStatus,
.legendItem,
.attentionBadge,
.status-badge{
  border-color: rgba(128,183,229,.22) !important;
  background: rgba(95,150,199,.12) !important;
  color: rgba(236,245,252,.92) !important;
  box-shadow: none;
}

.btn,
button.btn,
.dbgFab,
.actApplyBtn,
.cellBtn,
.plSel,
select.inp,
select.actSel,
.inp.actSel,
.reportModeBtn{
  border-radius:11px !important;
  border: 1px solid rgba(130,186,233,.22) !important;
  background:
    linear-gradient(180deg, rgba(137,194,239,.13), rgba(67,121,171,.10)) !important;
  color: var(--text) !important;
  box-shadow: 0 4px 10px rgba(6,20,35,.16), inset 0 1px 0 rgba(255,255,255,.06);
  transition:
    transform .16s ease,
    background .16s ease,
    border-color .16s ease,
    box-shadow .16s ease,
    color .16s ease;
}

.btn:hover,
button.btn:hover,
.dbgFab:hover,
.actApplyBtn:hover,
.cellBtn:hover,
.plSel:hover,
select.inp:hover,
select.actSel:hover,
.inp.actSel:hover,
.reportModeBtn:hover{
  transform: translateY(-1px);
  border-color: rgba(154,210,250,.36) !important;
  background:
    linear-gradient(180deg, rgba(155,211,252,.18), rgba(78,141,199,.14)) !important;
  box-shadow: 0 6px 14px rgba(6,20,35,.20), inset 0 1px 0 rgba(255,255,255,.08);
}

.btn:disabled:hover,
button.btn:disabled:hover,
.btn[aria-disabled="true"]:hover,
button.btn[aria-disabled="true"]:hover,
[data-write-action]:disabled:hover,
[data-write-action][aria-disabled="true"]:hover{
  transform: none !important;
  border-color: rgba(130,186,233,.22) !important;
  filter: saturate(.72);
  box-shadow: 0 4px 10px rgba(6,20,35,.10), inset 0 1px 0 rgba(255,255,255,.04) !important;
}

.btn:active,
button.btn:active,
.dbgFab:active,
.actApplyBtn:active,
.cellBtn:active{
  transform: translateY(0) scale(.99);
}

.btn-primary,
.btn.primary,
.primary,
.btn-ok,
.reportModeBtn.active,
.seg button.active,
.seg .tabBtn.active{
  border-color: rgba(121,193,250,.46) !important;
  background:
    linear-gradient(180deg, rgba(52,140,222,.74), rgba(25,86,146,.62)) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.14),
    0 8px 18px rgba(8,42,78,.34) !important;
}

.btn-danger,
.btn.danger{
  border-color: rgba(221,112,120,.42) !important;
  background: linear-gradient(180deg, rgba(221,112,120,.18), rgba(122,40,52,.12)) !important;
}

.seg{
  border-radius:14px !important;
  padding:7px !important;
  gap:7px !important;
}

.seg button,
.seg .tabBtn{
  border-radius:10px !important;
  font-weight:760 !important;
  letter-spacing:.12px;
  position:relative;
  overflow:hidden;
}

.seg button.active::after,
.seg .tabBtn.active::after{
  content:"";
  position:absolute;
  left:12px;
  right:12px;
  bottom:4px;
  height:2px;
  border-radius:999px;
  background: linear-gradient(90deg, transparent, rgba(171,223,255,.96), transparent);
  box-shadow: 0 0 10px rgba(80,168,242,.42);
}

input,
select,
textarea,
.inp{
  border:1px solid rgba(126,183,230,.22) !important;
  background:
    linear-gradient(180deg, rgba(30,61,92,.66), rgba(20,44,70,.62)) !important;
  color: var(--text) !important;
  border-radius:11px !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.05);
  transition: border-color .16s ease, box-shadow .16s ease, background .16s ease;
}

input:focus,
select:focus,
textarea:focus,
.inp:focus{
  border-color: rgba(118,194,255,.52) !important;
  box-shadow: var(--focusRing), inset 0 1px 0 rgba(255,255,255,.08) !important;
}

select,
select.inp,
select.actSel,
.inp.actSel,
.plSel{
  appearance:none;
  -webkit-appearance:none;
  min-height:38px;
  padding:8px 34px 8px 12px !important;
  border-radius:11px !important;
  border-color: rgba(123,188,241,.26) !important;
  background:
    linear-gradient(45deg, transparent 50%, rgba(204,235,255,.95) 50%) calc(100% - 18px) 50% / 6px 6px no-repeat,
    linear-gradient(135deg, rgba(204,235,255,.95) 50%, transparent 50%) calc(100% - 13px) 50% / 6px 6px no-repeat,
    linear-gradient(180deg, rgba(94,165,224,.24), rgba(46,102,152,.24)) !important;
  color: rgba(241,248,253,.95) !important;
  font-weight:740;
  letter-spacing:.05px;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.07),
    0 6px 14px rgba(0,0,0,.16) !important;
  cursor:pointer;
}

select:hover,
select.inp:hover,
select.actSel:hover,
.inp.actSel:hover,
.plSel:hover{
  border-color: rgba(144,209,255,.40) !important;
  background:
    linear-gradient(45deg, transparent 50%, rgba(228,246,255,.98) 50%) calc(100% - 18px) 50% / 6px 6px no-repeat,
    linear-gradient(135deg, rgba(228,246,255,.98) 50%, transparent 50%) calc(100% - 13px) 50% / 6px 6px no-repeat,
    linear-gradient(180deg, rgba(111,184,242,.30), rgba(54,117,173,.28)) !important;
}

select:focus,
select.inp:focus,
select.actSel:focus,
.inp.actSel:focus,
.plSel:focus{
  border-color: rgba(124,202,255,.56) !important;
  box-shadow:
    var(--focusRing),
    inset 0 1px 0 rgba(255,255,255,.09),
    0 8px 18px rgba(0,0,0,.18) !important;
}

select option,
select.inp option,
select.actSel option,
.plSel option{
  background:#163555;
  color: rgba(241,248,253,.96);
}

.pill:has(select.inp),
.pill:has(select.actSel){
  gap:10px;
  padding:6px 8px 6px 11px !important;
  border-color: rgba(126,186,236,.20) !important;
  background:
    linear-gradient(180deg, rgba(72,132,186,.11), rgba(20,48,82,.10)) !important;
}

.pill select.inp{
  width:auto;
  max-width:100%;
}

.qcEditRow .pill select.inp{
  min-width:88px;
}

.table th,
table.table th{
  background: rgba(77,131,185,.13) !important;
  color: rgba(225,241,252,.88) !important;
  font-size:12px !important;
  font-weight:760 !important;
  letter-spacing:.18px;
}

.table td,
table.table td{
  border-bottom-color: rgba(120,178,227,.12) !important;
  color: rgba(234,244,252,.90);
}

.table tbody tr,
table.table tbody tr,
.clickRow,
#plTable tbody tr{
  transition-property: background, box-shadow, transform;
  transition-duration: .16s;
  transition-timing-function: ease;
}

.table tbody tr:hover,
table.table tbody tr:hover,
.clickRow:hover,
#plTable tbody tr:hover{
  box-shadow: inset 3px 0 0 rgba(126,197,255,.26), var(--shadowSurface);
}

.table td:first-child,
table.table td:first-child{
  text-wrap: pretty;
}

.reportTable{
  border-collapse: separate !important;
  border-spacing: 0 !important;
}

.reportTable th{
  background:
    linear-gradient(180deg, rgba(92,139,184,.36), rgba(44,79,116,.46)) !important;
}

.reportTable tbody td{
  background:
    linear-gradient(180deg, rgba(48,84,121,.24), rgba(28,60,92,.24)) !important;
}

.reportTable th:first-child{
  background:
    linear-gradient(180deg, rgba(92,139,184,.36), rgba(44,79,116,.46)) !important;
  z-index: 5 !important;
}

.reportTable td:first-child{
  background:
    linear-gradient(180deg, rgba(48,84,121,.24), rgba(28,60,92,.24)) !important;
  border-right: 1px solid rgba(132,188,233,.16);
  z-index: 4 !important;
}

.reportTable th:first-child,
.reportTable td:first-child{
  min-width: 242px !important;
  width: 242px !important;
  box-shadow: 1px 0 0 rgba(160,208,248,.14);
}

.reportTable th:nth-child(2),
.reportTable td:nth-child(2){
  padding-left: 24px !important;
}

.reportTable tr:hover td:first-child{
  background: rgba(88,160,222,.14) !important;
}

.table tr:hover td,
table.table tr:hover td,
.clickRow:hover td,
#plTable tbody tr:hover td{
  background: rgba(88,160,222,.14) !important;
}

table.table td:first-child b,
.nameTop .nm,
.reportEmployeeName,
.roleName{
  color: rgba(245,249,252,.98) !important;
  font-weight:820 !important;
  letter-spacing:.10px;
}

.muted,
.help,
.authSub,
.brand .sub{
  color: var(--muted) !important;
}

svg.ico,
.ico{
  width:19px;
  height:19px;
  opacity:1 !important;
  color: rgba(216,236,252,.92);
  shape-rendering: geometricPrecision;
}

svg.ico *,
.ico *{
  vector-effect: non-scaling-stroke;
}

button:hover svg.ico,
a:hover svg.ico,
.btn:hover .ico{
  color: rgba(242,249,255,.98);
}

.seg button.active svg.ico,
.seg .tabBtn.active svg.ico,
button.active .ico{
  color: #adddff !important;
  filter: drop-shadow(0 0 8px rgba(78,170,248,.38));
}

.brand img,
.authLogo{
  filter: drop-shadow(0 8px 18px rgba(24,112,196,.20)) drop-shadow(0 2px 6px rgba(0,0,0,.38)) !important;
}

.dbgFab{
  min-width:44px;
  min-height:40px;
  border-radius:11px !important;
  font-size:12px;
  letter-spacing:.2px;
}

.deviceGate{
  background:
    linear-gradient(120deg, rgba(6,14,24,.90), rgba(7,19,34,.76)),
    linear-gradient(90deg, rgba(104,178,245,.08) 0 1px, transparent 1px) !important;
  background-size:auto, 86px 100% !important;
}

.deviceGateArt{
  background:
    linear-gradient(140deg, rgba(74,143,211,.12), rgba(255,255,255,.03)),
    repeating-linear-gradient(90deg, rgba(150,206,251,.07) 0 1px, transparent 1px 34px) !important;
  border-color: rgba(122,186,235,.20) !important;
}

.deviceGatePhoto{
  border-radius:26px !important;
  border-color: rgba(150,200,241,.24) !important;
  box-shadow:
    0 16px 40px rgba(0,0,0,.38),
    0 0 0 1px rgba(120,186,237,.10),
    inset 0 1px 0 rgba(255,255,255,.12) !important;
  filter: saturate(1.02) contrast(1.06) brightness(.95) !important;
}

.toast{
  border-radius:13px !important;
}

.toast.ok,
.pill.st-ok,
.badge-ok,
.status-online,
.employeeMiniStatus.ok,
.reportArrival.ok,
.simpleSummaryCard.good{
  border-color: rgba(79,195,144,.34) !important;
  background: rgba(79,195,144,.11) !important;
}

.toast.err,
.pill.st-bad,
.badge-err,
.status-off,
.employeeMiniStatus.bad,
.reportArrival.bad,
.simpleSummaryCard.bad{
  border-color: rgba(221,112,120,.36) !important;
  background: rgba(221,112,120,.11) !important;
}

.pill.st-warn,
.status-break,
.employeeMiniStatus.warn,
.reportArrival.warn,
.simpleSummaryCard.warn{
  border-color: rgba(219,187,114,.34) !important;
  background: rgba(219,187,114,.11) !important;
}

@media (pointer:fine){
  .cg-spotlight{
    --mx: 50%;
    --my: 50%;
    position:relative;
    overflow:hidden;
  }

  .cg-spotlight::after{
    content:"";
    position:absolute;
    inset:0;
    border-radius:inherit;
    pointer-events:none;
    opacity:0;
    background:
      radial-gradient(420px circle at var(--mx) var(--my), rgba(98,176,237,.16), rgba(98,176,237,.06) 24%, transparent 58%);
    transition: opacity .20s ease;
    z-index:0;
  }

  .cg-spotlight:hover::after{
    opacity:1;
  }

  .cg-spotlight > :not(.connDot):not(.netDot){
    position:relative;
    z-index:1;
  }

  .cg-spotlight > .connDot{
    position:absolute !important;
  }

  .btn.btn-primary,
  .btn.primary,
  .seg button,
  .seg .tabBtn{
    isolation:isolate;
  }
}

.topbar{
  overflow:hidden;
}

.topbar::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:
    linear-gradient(115deg, transparent 30%, rgba(170,221,255,.10) 48%, transparent 66%);
  opacity:.25;
}

/* Product-level UI language: modern headers, live chips, and command bars. */
.topbar{
  align-items: stretch !important;
  gap: 14px !important;
}

.topbar > div:first-child{
  display:flex;
  align-items:center;
  gap: 12px;
  min-width:0;
}

.topbar .title,
.cardHd h2,
.mdSurfaceHd h2,
.mdEventsCard h2{
  letter-spacing:0 !important;
  text-wrap:balance;
}

.topbar .sub,
.tabHint,
.cardHd .muted,
.mdSurfaceHd .muted,
.mdSecretaryHead .muted{
  text-wrap:pretty;
}

.topbar .actions{
  align-content:center;
  justify-content:flex-end;
}

.cardHd,
.mdSurfaceHd,
.mdSecretaryHead{
  position:relative;
  align-items:flex-start !important;
  gap: 14px !important;
  padding-block: 16px !important;
  isolation:isolate;
}

.cardHd::after,
.mdSurfaceHd::after,
.mdSecretaryHead::after{
  content:"";
  position:absolute;
  left:16px;
  right:16px;
  bottom:0;
  height:1px;
  pointer-events:none;
  background:linear-gradient(90deg, rgba(124,202,255,.34), rgba(255,255,255,.04), transparent);
}

.cardHd > div:first-child,
.mdSurfaceHd > div:first-child,
.mdSecretaryHead > div:first-child{
  display:grid;
  gap:6px;
  min-width:0;
}

.cardHd h2,
.mdSurfaceHd h2,
.mdEventsCard h2,
.mdSecretaryTitle{
  font-size: clamp(16px, 1.4vw, 20px) !important;
  line-height:1.08 !important;
  font-weight: 860 !important;
  color: rgba(246,250,254,.98) !important;
}

[data-md-state-hint]{
  width:max-content;
  max-width:100%;
  min-height:30px;
  display:inline-flex;
  align-items:center;
  gap:0;
  padding:6px 10px;
  border-radius:999px;
  border:1px solid rgba(124,202,255,.20);
  background:
    linear-gradient(180deg, rgba(88,154,215,.14), rgba(31,72,111,.10));
  color:rgba(218,238,252,.84) !important;
  font-size:12px !important;
  line-height:1.2;
  font-weight:700;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06);
}

[data-md-state-hint]:empty{
  display:none !important;
}

[data-md-state-hint]::before,
.tabHint:not(:empty)::before{
  content:none !important;
  display:none !important;
}

[data-md-state-hint]:not(:empty)::before{
  animation:none !important;
}

@keyframes cg-live-pulse{
  0%, 100%{ transform:scale(.92); opacity:.72; }
  45%{ transform:scale(1); opacity:1; }
}

.dot,
.connDot,
.netDot{
  width:12px !important;
  height:12px !important;
  border-radius:999px !important;
  background:rgba(103,205,151,.95) !important;
  border:1px solid rgba(197,255,222,.28) !important;
  box-shadow:
    0 0 0 4px rgba(103,205,151,.11),
    0 0 18px rgba(103,205,151,.22) !important;
}

.dot.err,
.connDot.err,
.netDot.err{
  background:rgba(221,112,120,.96) !important;
  border-color:rgba(255,197,205,.24) !important;
  box-shadow:
    0 0 0 4px rgba(221,112,120,.12),
    0 0 18px rgba(221,112,120,.20) !important;
}

.connDot.mid,
.netDot.mid{
  background:rgba(219,187,114,.95) !important;
  border-color:rgba(255,235,184,.26) !important;
  box-shadow:
    0 0 0 4px rgba(219,187,114,.12),
    0 0 18px rgba(219,187,114,.18) !important;
}

#plDirtyDot{
  display:none !important;
}

#plDirtyDot.isDirty{
  display:none !important;
}

.tabHint{
  display:none !important;
}

#pillRole .dot{
  display:none !important;
}

#pillRole{
  padding-inline:12px !important;
}

.actions .pill:has(.dot),
.actions .pill:has(.connDot),
.actions .pill:has(.netDot){
  min-height:38px;
  gap:9px;
  padding:8px 11px !important;
  border-color:rgba(124,202,255,.18) !important;
  background:linear-gradient(180deg, rgba(88,154,215,.12), rgba(31,72,111,.08)) !important;
}

.toolbar,
.mdToolbar{
  position:relative;
  gap:8px !important;
  padding:10px !important;
  border-color:rgba(124,202,255,.16) !important;
  background:
    linear-gradient(180deg, rgba(88,154,215,.08), rgba(24,58,90,.07)) !important;
}

.mdToolbar{
  border:1px solid rgba(124,202,255,.14);
  border-radius:14px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.04);
}

.toolbar .spacer,
.mdToolbar::before{
  min-width:8px;
}

.mdBusyIndicator{
  width:max-content;
  max-width:100%;
  min-height:30px;
  align-items:center;
  gap:8px;
  padding:6px 10px;
  border-radius:999px;
  border:1px solid rgba(124,202,255,.20);
  background:rgba(38,86,130,.16);
  color:rgba(222,240,252,.86);
  font-size:12px;
  font-weight:760;
}

.mdBusyIndicator[hidden],
.mdBusyIndicator:empty{
  display:none !important;
}

.mdFileMeta::before{
  content:none !important;
  display:none !important;
}

.mdBusySpinner{
  width:12px !important;
  height:12px !important;
  border-width:2px !important;
}

.card,
.topbar,
.toolbar,
.seg,
.modal,
.deviceGateCard,
.qcEditToast{
  animation: cg-panel-in .34s cubic-bezier(.2,.8,.2,1) both;
}

.qcEditToast{
  position:fixed !important;
  right:18px !important;
  bottom:18px !important;
}

@keyframes cg-panel-in{
  from{ opacity:0; transform: translateY(6px); }
  to{ opacity:1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce){
  *,
  *::before,
  *::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    scroll-behavior:auto !important;
    transition-duration:.001ms !important;
  }

  .cg-spotlight::after{
    display:none !important;
  }
}

/* First-pass polish: tactile controls without touching panel logic. */
.btn:active,
button.btn:active,
.dbgFab:active,
.actApplyBtn:active,
.cellBtn:active,
.btnIcon:active,
.reportModeBtn:active{
  transform: scale(.96) !important;
}

.btn,
button.btn,
.dbgFab,
.actApplyBtn,
.cellBtn,
.btnIcon,
.seg button,
.seg .tabBtn,
.reportModeBtn{
  min-height: 40px;
  transition-property: transform, background, border-color, box-shadow, color;
}

.btn:disabled,
button.btn:disabled,
.btn[aria-disabled="true"],
button.btn[aria-disabled="true"],
[data-write-action]:disabled,
[data-write-action][aria-disabled="true"]{
  transform: none !important;
  pointer-events: auto;
}

.actApplyBtn,
.btnIcon,
.dbgFab{
  min-width: 40px;
}

.deviceGatePhoto,
.objectGlyph img,
.mdMeetingObjectIcon{
  outline: 1px solid rgba(255,255,255,.10);
  outline-offset: -1px;
}

/* Shared shell recipes for secretary/supervisor/admin surfaces. */
.cg-profile-grid{
  gap: 14px;
}

.cg-profile-grid > .profileItem{
  border-radius: 12px;
}

.cg-profile-grid .pHead,
.cg-profile-grid .profileSub{
  text-wrap: pretty;
}

.cg-profile-grid .profileBig{
  letter-spacing: 0 !important;
}

.cg-status-card .connDot{
  transition-property: background, border-color, box-shadow, transform;
  transition-duration: .16s;
  transition-timing-function: ease;
}

.cg-status-card .connDot.ok{
  box-shadow: 0 0 0 4px rgba(79,195,144,.10), 0 0 18px rgba(79,195,144,.14);
}

.cg-status-card .connDot.mid{
  box-shadow: 0 0 0 4px rgba(219,187,114,.10), 0 0 18px rgba(219,187,114,.12);
}

.cg-status-card .connDot.err{
  box-shadow: 0 0 0 4px rgba(221,112,120,.10), 0 0 18px rgba(221,112,120,.12);
}

.cg-status-card{
  min-height:92px;
  display:flex;
  align-items:center;
  padding:16px !important;
}

.cg-status-card::after{
  content:"";
  position:absolute;
  left:16px;
  right:16px;
  top:0;
  height:2px;
  border-radius:999px;
  background:linear-gradient(90deg, rgba(103,205,151,.86), rgba(124,202,255,.46), transparent 72%);
  opacity:.72;
}

.cg-status-card .statusControls{
  width:100%;
  min-width:0;
  display:grid;
  gap:10px;
}

.cg-status-card #msg:empty{
  display:none;
}

.cg-status-actions .btn{
  text-wrap: balance;
  line-height: 1.18;
  min-height:46px;
}

.cg-device-gate-card{
  width: min(820px, 100%) !important;
}

.cg-device-gate-top{
  min-height: 62px;
}

.cg-device-gate-body{
  align-items: stretch;
}

.cg-device-gate-text{
  justify-content: center;
}

.cg-device-gate-actions .btn{
  min-width: 140px;
}

.cg-panel-card{
  isolation: isolate;
}

.cg-toolbar{
  row-gap: 10px;
}

.cg-toolbar .pill,
.cg-toolbar .btn{
  min-height: 40px;
}

.cg-table-wrap{
  overflow: auto;
  scrollbar-width: thin;
  scrollbar-color: rgba(160,208,248,.24) rgba(12,29,49,.36);
  overscroll-behavior: contain;
}

.cg-table-wrap::-webkit-scrollbar{
  width: 10px;
  height: 10px;
}

.cg-table-wrap::-webkit-scrollbar-track{
  background: rgba(12,29,49,.36);
  border-radius: 999px;
}

.cg-table-wrap::-webkit-scrollbar-thumb{
  background: rgba(160,208,248,.22);
  border: 2px solid transparent;
  border-radius: 999px;
  background-clip: padding-box;
}

.cg-table-wrap::-webkit-scrollbar-thumb:hover{
  background: rgba(178,220,251,.34);
  border: 2px solid transparent;
  background-clip: padding-box;
}

.cg-seg .tabBtn,
.cg-seg button{
  text-wrap: balance;
}

.cg-modal .modalTitle{
  text-wrap: balance;
}

.btn:focus-visible,
button.btn:focus-visible,
.actApplyBtn:focus-visible,
.btnIcon:focus-visible,
.seg button:focus-visible,
.seg .tabBtn:focus-visible,
.reportModeBtn:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible{
  outline: 2px solid rgba(173,221,255,.72);
  outline-offset: 2px;
}

.cg-table-wrap table.table tbody td[colspan].muted,
.cg-table-wrap table.table tbody tr:only-child td[colspan]{
  text-align: center;
  padding: 18px 16px !important;
  color: rgba(207,226,241,.76) !important;
  background: rgba(255,255,255,.025) !important;
}

.cg-table-wrap table.table th{
  position: sticky;
  top: 0;
  z-index: 2;
}

.cg-table-wrap table.table td,
.cg-table-wrap table.table th{
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1, "lnum" 1;
}

.mobileStaffCard,
.mobileUserCard,
.mobilePlannerRow,
.mobileReportCard{
  transition-property: background, border-color, box-shadow, transform;
  transition-duration: .16s;
  transition-timing-function: ease;
}

@media (pointer:fine){
  .mobileStaffCard:hover,
  .mobileUserCard:hover,
  .mobilePlannerRow:hover,
  .mobileReportCard:hover{
    transform: translateY(-1px);
    border-color: rgba(154,210,250,.32) !important;
    box-shadow: 0 8px 18px rgba(6,20,35,.20), inset 0 1px 0 rgba(255,255,255,.06);
  }
}

.mobileStatValue,
.mobilePlannerMeta,
.mobileReportStats,
.mobileReportDays{
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1, "lnum" 1;
}

.mobileUserActions .btn,
.mobileActionRow .actApplyBtn,
.mobileDayBtn{
  min-height: 40px;
}

body.readonlyMode [data-write-action]{
  opacity: .55;
  cursor: not-allowed;
  filter: saturate(.72);
}

body.readonlyMode [data-write-action]:active{
  transform: none;
}

.readonlyNotice{
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  padding: 7px 10px;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 8px;
  color: var(--muted, rgba(255,255,255,.68));
  background: rgba(255,255,255,.05);
  font-size: 13px;
  line-height: 1.25;
}

@media (max-width: 720px){
  .cg-device-gate-actions .btn{
    flex: 1 1 180px;
  }

  .cg-toolbar{
    align-items: stretch;
  }

  .cg-toolbar .btn,
  .cg-toolbar .pill{
    width: 100%;
    justify-content: center;
  }
}