:root{
  --bg0:#eefcf8;
  --bg1:#e9f6ff;
  --border:rgba(6,95,70,.16);
  --text:#172033;
  --muted:#61708a;
  --accent:#0f766e;
  --accent2:#0284c7;
  --ok:#16a34a;
  --warn:#d97706;
  --bad:#dc2626;
  --shadow: 0 10px 28px rgba(30,58,138,.08);
  --glow: 0 0 0 1px rgba(15,118,110,.14), 0 8px 20px rgba(2,132,199,.10);
  --premium-shadow: 0 12px 30px rgba(15,23,42,.08), 0 1px 0 rgba(255,255,255,.45) inset;
  --radius: 18px;
  --radius2: 24px;
  --mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  --sans: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, "Noto Sans", "Liberation Sans", sans-serif;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:var(--sans);
  color:var(--text);
  background: radial-gradient(1200px 700px at 10% 10%, rgba(15,118,110,.16), transparent 60%),
              radial-gradient(1000px 700px at 90% 20%, rgba(2,132,199,.14), transparent 55%),
              radial-gradient(900px 580px at 50% 120%, rgba(20,184,166,.11), transparent 60%),
              linear-gradient(180deg,var(--bg0),var(--bg1));
  overflow-x:hidden;
}

.bg{
  position:fixed; inset:-30% -30%;
  background:
    radial-gradient(600px 380px at 20% 10%, rgba(15,118,110,.13), transparent 55%),
    radial-gradient(600px 380px at 85% 35%, rgba(2,132,199,.11), transparent 60%),
    radial-gradient(520px 320px at 40% 85%, rgba(20,184,166,.09), transparent 55%);
  filter: blur(36px);
  opacity:.95;
  pointer-events:none;
}

.topbar{
  position:sticky; top:0; z-index:5;
  display:flex; align-items:center; justify-content:space-between;
  padding:18px 24px;
  border-bottom:1px solid var(--border);
  background: linear-gradient(180deg, rgba(255,255,255,.94), rgba(255,255,255,.82));
  backdrop-filter: blur(22px) saturate(140%);
  box-shadow: 0 8px 24px rgba(30,58,138,.08);
}

.brand{display:flex; gap:14px; align-items:center}
.brand-mark{
  width:42px;
  height:42px;
  border-radius:12px;
  object-fit:contain;
  background: rgba(255,255,255,.92);
  padding:4px;
  box-shadow: 0 10px 24px rgba(2,132,199,.20), 0 0 0 1px rgba(15,118,110,.16);
  border:1px solid rgba(15,23,42,.08);
}
.brand-title{
  font-weight:800;
  font-size:18px;
  letter-spacing:.02em;
  line-height:1.15;
}
.brand-sub{
  font-size:11px;
  color:var(--muted);
  letter-spacing:.08em;
  text-transform:uppercase;
}

.top-actions{display:flex; gap:10px; align-items:center}
.shell{max-width:1200px; margin:0 auto; padding:28px 22px 52px}
.hidden{display:none !important}

.card{
  position:relative;
  border:1px solid var(--border);
  background: linear-gradient(180deg, rgba(255,255,255,.92), rgba(248,251,255,.9));
  border-radius: var(--radius2);
  box-shadow: var(--premium-shadow);
  padding:22px;
  overflow:hidden;
  transition: box-shadow .22s ease, border-color .22s ease;
}

.card::before{
  content:"";
  position:absolute;
  top:0;
  left:0;
  right:0;
  height:1px;
  background: linear-gradient(90deg, rgba(15,118,110,.0), rgba(15,118,110,.52), rgba(2,132,199,.0));
  pointer-events:none;
}

.card:hover{
  box-shadow: 0 14px 34px rgba(30,58,138,.10);
  border-color: rgba(15,118,110,.28);
}

.login{max-width:860px; margin:34px auto 0}
.muted{color:var(--muted)}
.small{font-size:12px}
.hr{height:1px; background:var(--border); margin:16px 0}

.grid2{display:grid; grid-template-columns:1fr 1fr; gap:20px}
@media (max-width:920px){ .grid2{grid-template-columns:1fr} }

.field label{display:block; font-size:12px; color:var(--muted); margin:2px 0 6px}
.field input, .field textarea, .field select, .search, select{
  width:100%;
  padding:12px 12px;
  border-radius:14px;
  border:1px solid rgba(30,64,175,.15);
  background: rgba(255,255,255,.94);
  color:var(--text);
  outline:none;
  transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}
.field textarea{resize:vertical; min-height:110px}
.field input:focus, .field textarea:focus, .field select:focus, .search:focus{
  border-color: rgba(15,118,110,.55);
  box-shadow: 0 0 0 4px rgba(15,118,110,.16), 0 8px 20px rgba(2,132,199,.14);
  transform: translateY(-1px);
}

.btn{
  border-radius: 14px;
  border:1px solid rgba(15,23,42,.14);
  padding:10px 14px;
  background: rgba(255,255,255,.92);
  color:var(--text);
  cursor:pointer;
  transition: box-shadow .18s ease, border-color .18s ease;
}
.btn-primary{
  background: linear-gradient(145deg, rgba(15,118,110,.98), rgba(2,132,199,.80));
  border-color: rgba(15,118,110,.42);
  color: #ffffff;
  font-weight:700;
  box-shadow: 0 8px 20px rgba(2,132,199,.22), 0 1px 0 rgba(255,255,255,.35) inset;
}
.btn-outline{ background: rgba(255,255,255,.95); border-color: rgba(15,118,110,.35); }
.btn-ghost{ background: transparent; }
.btn:hover{ box-shadow: 0 8px 16px rgba(15,23,42,.06); }
.btn-primary:hover{ box-shadow: 0 10px 20px rgba(2,132,199,.26); }
.row{display:flex; align-items:center; gap:12px; margin-top:12px}
.row.space{justify-content:space-between}
.msg{font-size:13px; color:var(--muted)}
.msg.ok{color:var(--ok)}
.msg.bad{color:var(--bad)}

.app{display:grid; grid-template-columns:300px 1fr; gap:24px; margin-top:18px}
@media (max-width:980px){ .app{grid-template-columns:1fr} }

.sidebar{
  border:1px solid var(--border);
  background: linear-gradient(180deg, rgba(255,255,255,.86), rgba(248,251,255,.82));
  border-radius: var(--radius2);
  padding:14px;
  box-shadow: 0 10px 24px rgba(30,58,138,.08);
  backdrop-filter: blur(22px) saturate(130%);
  position:sticky; top:88px; height:fit-content;
}
.sidebar-head{display:flex; gap:12px; align-items:center; padding:8px 8px 12px}
.avatar{
  width:44px; height:44px; border-radius:16px;
  background: radial-gradient(14px 14px at 35% 30%, rgba(255,255,255,.8), rgba(255,255,255,.2) 60%),
              linear-gradient(145deg, rgba(47,111,237,.30), rgba(56,189,248,.30));
  border:1px solid rgba(15,23,42,.10);
}
.who-name{font-weight:700}
.who-email{font-size:12px}
.staff{padding:10px 8px 14px}
.menu{display:flex; flex-direction:column; gap:6px; padding:6px}
.menu-item{
  padding:10px 12px;
  border-radius:14px;
  text-decoration:none;
  color:var(--text);
  border:1px solid transparent;
  transition: background .18s ease, border-color .18s ease;
}
.menu-item:hover{background: rgba(15,118,110,.07); border-color: rgba(15,118,110,.16)}
.menu-item.active{
  background: linear-gradient(90deg, rgba(15,118,110,.15), rgba(2,132,199,.10));
  border:1px solid rgba(15,118,110,.30);
  box-shadow: var(--glow);
}

.sidebar-foot{padding:10px 8px 8px; border-top:1px solid var(--border); margin-top:10px}
.pagehead h2{margin:0}
.pagehead p{margin:6px 0 0}
.gap{gap:24px}

.kpis{display:grid; grid-template-columns:repeat(4, 1fr); gap:18px; margin-top:18px}
@media (max-width:980px){ .kpis{grid-template-columns:1fr 1fr} }
@media (max-width:560px){ .kpis{grid-template-columns:1fr} }

.kpi{
  border:1px solid var(--border);
  border-radius: var(--radius);
  background: linear-gradient(180deg, rgba(255,255,255,.95), rgba(247,251,255,.92));
  padding:14px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.9), 0 6px 14px rgba(30,58,138,.04);
}
.kpi-label{font-size:12px; color:var(--muted)}
.kpi-value{font-size:34px; font-weight:800; margin-top:6px}
.kpi-foot{margin-top:4px}

.toolbar{display:flex; gap:14px; align-items:center; margin:18px 0}
.search{flex:1}
.pill{
  display:inline-flex; align-items:center; justify-content:center;
  padding:7px 10px;
  border-radius:999px;
  border:1px solid rgba(30,64,175,.16);
  background: rgba(255,255,255,.96);
  font-size:12px;
}
.pill-muted{color:var(--muted)}
.tagrow{display:flex; flex-wrap:wrap; gap:8px; margin-top:10px}
.tag{
  font-size:12px;
  padding:7px 10px;
  border-radius:999px;
  border:1px solid rgba(15,118,110,.24);
  background: rgba(15,118,110,.10);
  color: var(--accent2);
}

.table{padding:0; overflow:hidden}
.trow{
  display:grid;
  grid-template-columns: 2.1fr .9fr 1fr 1fr .8fr;
  gap:10px;
  padding:12px 14px;
  border-bottom:1px solid var(--border);
  align-items:center;
}
@media (max-width:980px){
  .trow{grid-template-columns:1.6fr .9fr 1fr;}
  .trow > :nth-child(4), .trow > :nth-child(5){display:none}
}
.thead{background: rgba(255,255,255,.03); color:var(--muted); font-size:12px}
.thead{background: linear-gradient(180deg, rgba(53,109,255,.08), rgba(53,109,255,.03));}
.badge{
  display:inline-flex; padding:6px 10px; border-radius:999px;
  border:1px solid rgba(15,23,42,.15);
  font-size:12px;
}
.badge.ok{border-color: rgba(74,222,128,.35); background: rgba(74,222,128,.10)}
.badge.warn{border-color: rgba(251,191,36,.35); background: rgba(251,191,36,.10)}
.badge.bad{border-color: rgba(251,113,133,.35); background: rgba(251,113,133,.10)}
.mono{font-family:var(--mono)}

.cards{display:grid; grid-template-columns:1fr 1fr; gap:18px}
@media (max-width:980px){ .cards{grid-template-columns:1fr} }

.cards > .card,
.grid2 > .card{
  height:100%;
  display:flex;
  flex-direction:column;
}

.cards > .card p,
.grid2 > .card p{
  flex:1;
}

.kpis .kpi{
  min-height:146px;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
}

.mailbox{
  display:flex; justify-content:space-between; gap:10px;
  padding:10px 12px;
  border-radius:14px;
  background: linear-gradient(180deg, rgba(255,255,255,.96), rgba(248,251,255,.95));
  border:1px solid rgba(30,64,175,.12);
  margin-top:8px;
  transition: border-color .18s ease, box-shadow .18s ease;
}
.mailbox:hover{border-color: rgba(15,118,110,.22); box-shadow: 0 8px 16px rgba(2,132,199,.10)}

.content{display:flex; flex-direction:column; gap:22px}
.mt{margin-top:14px}
.compact .trow{grid-template-columns:1.2fr .9fr 1.4fr 1fr}
.trow-monitor{grid-template-columns:1.5fr .7fr .7fr .7fr 2fr}
.trow-sla{grid-template-columns:1fr .9fr 1.4fr 1fr}

.tickets{display:flex; flex-direction:column; gap:16px}
.ticket-item h3{margin:0 0 6px}

.kv{
  display:grid;
  grid-template-columns: 1fr 1.5fr;
  gap:8px 12px;
  margin-top:10px;
}
.kv .k{color:var(--muted); font-size:13px}
.kv .v{font-size:14px}

.checklist{margin:8px 0 0 18px; padding:0; display:flex; flex-direction:column; gap:6px}

.lang-select{
  border-radius:12px;
  border:1px solid rgba(30,64,175,.16);
  background: rgba(255,255,255,.95);
  color:var(--text);
  padding:8px 10px;
  box-shadow: 0 8px 18px rgba(30,58,138,.10);
}

@media (max-width:980px){
  .trow-monitor{grid-template-columns:1.2fr .8fr .8fr;}
  .trow-monitor > :nth-child(4),
  .trow-monitor > :nth-child(5){display:none}

  .trow-sla{grid-template-columns:1fr 1fr}
  .trow-sla > :nth-child(3),
  .trow-sla > :nth-child(4){display:none}
}