:root{
  --bg:#0b0d10;
  --bg-2:#111318;
  --panel:#171a20;
  --panel-2:#1e222a;
  --panel-3:#242932;
  --line:#303741;
  --line-soft:rgba(255,255,255,.08);
  --text:#f4f7fb;
  --muted:#98a3b3;
  --primary:#4fd1c5;
  --primary-2:#a3e635;
  --accent:#f59e0b;
  --coral:#fb7185;
  --violet:#a78bfa;
  --danger:#ef4444;
  --success:#22c55e;
  --shadow:0 18px 50px rgba(0,0,0,.36);
  --shadow-soft:0 10px 28px rgba(0,0,0,.24);
  --radius:8px;
  --font:Segoe UI,Tahoma,Arial,sans-serif;
}

.kb-taxonomy-group{border:1px solid var(--line);border-radius:12px;padding:14px;margin:12px 0;background:rgba(255,255,255,.025)}
.kb-taxonomy-group h4{margin:0 0 10px;color:var(--primary)}
.kb-taxonomy-row{display:grid;grid-template-columns:minmax(150px,1.5fr) minmax(130px,1fr) 80px auto auto auto;gap:8px;align-items:center;padding:8px 0;border-top:1px solid rgba(148,163,184,.18)}
.kb-taxonomy-row input,.kb-taxonomy-row select{min-width:0}
.kb-taxonomy-row .checkbox-label{white-space:nowrap}
.btn.danger{border-color:#ef6b78;color:#ff9da7}
@media(max-width:900px){.kb-taxonomy-row{grid-template-columns:1fr 1fr}.kb-taxonomy-row .checkbox-label{grid-column:1}}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
html,body{max-width:100%;overflow-x:hidden}
body{
  margin:0;
  min-height:100vh;
  font-family:var(--font);
  color:var(--text);
  background:
    linear-gradient(135deg,#08090b 0%,#111318 44%,#15120e 100%);
  letter-spacing:0;
}
body:before{
  content:"";
  position:fixed;
  inset:0;
  z-index:-1;
  pointer-events:none;
  background:
    linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.028) 1px,transparent 1px),
    linear-gradient(135deg,rgba(79,209,197,.12),transparent 34%,rgba(245,158,11,.1) 70%,transparent);
  background-size:42px 42px,42px 42px,100% 100%;
  mask-image:linear-gradient(to bottom,rgba(0,0,0,.88),rgba(0,0,0,.2));
}
a{color:#7dd3fc;text-decoration:none}
a:hover{color:#d9f99d}
img{max-width:100%;display:block}
h1,h2,h3{letter-spacing:0;margin-top:0}
h1{font-size:36px;line-height:1.12}
h2{font-size:24px}
h3{font-size:18px}
p{line-height:1.65}
hr{border:0;border-top:1px solid var(--line-soft);margin:22px 0}
code{
  display:inline-block;
  max-width:100%;
  overflow:hidden;
  white-space:nowrap;
  text-overflow:ellipsis;
  overflow-wrap:normal;
  padding:4px 7px;
  border:1px solid var(--line-soft);
  border-radius:6px;
  background:#0e1014;
  color:#d9f99d;
}
code.code-wrap{
  white-space:normal;
  overflow:visible;
  overflow-wrap:anywhere;
}

.shell{
  display:grid;
  grid-template-columns:268px minmax(0,1fr);
  min-height:100vh;
}
.sidebar{
  position:sticky;
  top:0;
  height:100vh;
  padding:22px 18px;
  border-right:1px solid rgba(255,255,255,.08);
  background:
    linear-gradient(180deg,rgba(18,21,26,.96),rgba(10,11,14,.96)),
    repeating-linear-gradient(135deg,rgba(255,255,255,.03) 0 1px,transparent 1px 12px);
  box-shadow:8px 0 34px rgba(0,0,0,.26);
}
.brand{
  display:flex;
  align-items:center;
  gap:12px;
  min-height:48px;
  color:var(--text);
}
.brand:hover{color:var(--text)}
.brand-mark{
  width:42px;
  height:42px;
  flex:0 0 42px;
  display:grid;
  place-items:center;
  border-radius:8px;
  color:#07100d;
  font-weight:900;
  background:linear-gradient(135deg,var(--primary),var(--primary-2) 58%,var(--accent));
  box-shadow:0 0 0 1px rgba(255,255,255,.14),0 14px 24px rgba(79,209,197,.18);
}
.brand strong{display:block;font-size:18px}
.brand small{display:block;margin-top:2px;color:var(--muted);font-size:12px;text-transform:uppercase}
.sidebar nav{
  display:flex;
  flex-direction:column;
  gap:8px;
  margin-top:26px;
}
.nav-link{
  position:relative;
  display:flex;
  align-items:center;
  gap:10px;
  min-height:44px;
  padding:10px 12px;
  border:1px solid transparent;
  border-radius:8px;
  color:#c8d0dc;
  transition:background .18s,border-color .18s,transform .18s,color .18s;
}
.nav-link:before{
  content:attr(data-mark);
  width:30px;
  height:26px;
  display:grid;
  place-items:center;
  border-radius:6px;
  color:#cbd5e1;
  font-size:10px;
  font-weight:800;
  background:#222832;
  border:1px solid rgba(255,255,255,.08);
}
.nav-link:hover{
  transform:translateX(3px);
  color:#fff;
  background:#1c2129;
  border-color:rgba(79,209,197,.28);
}
.nav-link.active{
  color:#f8fafc;
  background:linear-gradient(90deg,rgba(79,209,197,.18),rgba(245,158,11,.10));
  border-color:rgba(79,209,197,.38);
  box-shadow:inset 3px 0 0 var(--primary);
}
.nav-link.active:before{
  color:#07100d;
  background:linear-gradient(135deg,var(--primary),var(--primary-2));
}
.content{
  min-width:0;
  padding:24px clamp(18px,3vw,36px) 44px;
}
.topbar{
  position:sticky;
  top:0;
  z-index:10;
  display:flex;
  justify-content:space-between;
  gap:16px;
  align-items:center;
  min-height:70px;
  margin:-24px calc(clamp(18px,3vw,36px) * -1) 24px;
  padding:14px clamp(18px,3vw,36px);
  border-bottom:1px solid rgba(255,255,255,.08);
  background:rgba(11,13,16,.78);
  backdrop-filter:blur(14px);
}
.topbar-title span{
  display:block;
  margin-bottom:4px;
  color:var(--muted);
  font-size:12px;
  text-transform:uppercase;
  font-weight:800;
}
.topbar-title strong{font-size:18px}
.topbar-actions{display:flex;align-items:center;gap:10px;flex-wrap:wrap;justify-content:flex-end}
.role-pill,.badge{
  display:inline-flex;
  align-items:center;
  min-height:30px;
  padding:6px 10px;
  border-radius:999px;
  border:1px solid rgba(79,209,197,.28);
  background:rgba(79,209,197,.09);
  color:#d9f99d;
  font-size:12px;
  font-weight:800;
  text-decoration:none;
}
a.badge:hover{filter:brightness(1.12)}

.public-shell{min-height:100vh}
.public-topbar{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:16px;
  max-width:1180px;
  margin:0 auto;
  padding:22px 24px 0;
}
.public-wrap{
  width:min(1180px,100%);
  min-height:calc(100vh - 80px);
  margin:0 auto;
  padding:28px 24px 48px;
}
.auth-shell{
  min-height:100vh;
  display:grid;
  place-items:center;
  padding:24px;
}
.auth-card{
  width:min(440px,100%);
  padding:28px;
}
.auth-brand{margin-bottom:24px}

.panel,.stat-card,.type-card,.auth-card,.dash-panel,.kpi-card{
  position:relative;
  border:1px solid var(--line-soft);
  border-radius:var(--radius);
  background:
    linear-gradient(180deg,rgba(31,35,43,.92),rgba(19,22,28,.92));
  box-shadow:var(--shadow-soft);
}
.panel,.dash-panel{padding:20px;overflow:visible}
.panel:before,.dash-panel:before,.auth-card:before{
  content:"";
  position:absolute;
  left:0;
  top:0;
  width:100%;
  height:2px;
  background:linear-gradient(90deg,var(--primary),var(--accent),var(--coral));
}
.panel h1,.panel h2,.panel h3,.dash-panel h3{margin-bottom:14px}
.muted{color:var(--muted)}
.max-900{max-width:960px;margin:0 auto}
.page-head{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:18px;
  margin-bottom:18px;
}
.page-head h1,.page-head h3{margin:0}
.page-head p{margin:6px 0 0}
.grid-main{
  display:grid;
  grid-template-columns:minmax(0,1.12fr) minmax(360px,.88fr);
  gap:18px;
  align-items:start;
}
.admin-page-grid{
  grid-template-columns:minmax(420px,.95fr) minmax(560px,1.05fr);
}
.admin-form-panel,.admin-list-panel{min-width:0}
.grid-2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.grid-1{display:grid;gap:14px}
.full{grid-column:1/-1}
.card-grid{display:grid;gap:16px;margin-bottom:20px}
.card-grid.four{grid-template-columns:repeat(4,minmax(0,1fr))}

form{margin:0}
label{
  display:block;
  color:#d7dde7;
  font-size:14px;
  font-weight:700;
}
input,select,textarea{
  width:100%;
  min-height:44px;
  margin-top:8px;
  padding:12px 13px;
  border:1px solid #343d49;
  border-radius:8px;
  color:var(--text);
  background:#101319;
  outline:0;
  transition:border-color .18s,box-shadow .18s,background .18s;
}
textarea{resize:vertical;line-height:1.55}
select{appearance:auto}
input:focus,select:focus,textarea:focus{
  border-color:rgba(79,209,197,.72);
  box-shadow:0 0 0 3px rgba(79,209,197,.14);
  background:#131820;
}
input[type=checkbox]{
  width:18px;
  height:18px;
  min-height:18px;
  margin:0 8px 0 0;
  vertical-align:middle;
  accent-color:var(--primary);
}
input[type=file]{
  padding:10px;
  color:var(--muted);
}
.check-line{
  display:flex;
  align-items:center;
  min-height:44px;
  margin-top:22px;
}
.section-title{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:12px;
  margin-top:4px;
}
.section-title h3{margin:0}
.toolbar,.report-actions,.actions{
  display:flex;
  align-items:center;
  gap:12px;
  flex-wrap:wrap;
  margin-bottom:14px;
}
.toolbar input,.toolbar select{width:auto;min-width:220px;margin-top:0;flex:1}
.toolbar .btn{flex:0 0 auto}
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  min-height:42px;
  padding:10px 15px;
  border:1px solid #3a4350;
  border-radius:8px;
  color:#f8fafc;
  background:#202630;
  cursor:pointer;
  font-weight:800;
  line-height:1.2;
  transition:transform .18s,box-shadow .18s,border-color .18s,background .18s;
}
.btn:hover{
  transform:translateY(-1px);
  border-color:rgba(79,209,197,.46);
  color:#fff;
  box-shadow:0 10px 24px rgba(0,0,0,.28);
}
.btn.primary{
  color:#06110f;
  border-color:transparent;
  background:linear-gradient(135deg,var(--primary),var(--primary-2) 58%,#facc15);
}
.btn.ghost{background:rgba(255,255,255,.03)}
.alert{
  position:relative;
  padding:13px 15px;
  margin-bottom:16px;
  border-radius:8px;
  border:1px solid var(--line-soft);
  background:#171b22;
  box-shadow:var(--shadow-soft);
}
.alert.success{border-color:rgba(34,197,94,.35);background:rgba(34,197,94,.13)}
.alert.error{border-color:rgba(239,68,68,.38);background:rgba(239,68,68,.13)}

.table-scroll{width:100%;overflow:visible}
.table{
  width:100%;
  max-width:100%;
  border-collapse:separate;
  border-spacing:0;
  min-width:0;
  table-layout:auto;
}
.table th,.table td{
  padding:13px 14px;
  border-bottom:1px solid var(--line-soft);
  text-align:left;
  font-size:14px;
  vertical-align:middle;
  white-space:normal;
  overflow-wrap:break-word;
  word-break:normal;
}
.table th{
  position:sticky;
  top:0;
  z-index:1;
  color:#cbd5e1;
  font-size:12px;
  text-transform:uppercase;
  background:#1d222b;
}
.table tr:hover td{background:rgba(255,255,255,.035)}
.table td strong{color:#fff}
.table .btn{min-height:34px;padding:7px 10px}
.table .nowrap{white-space:nowrap}
.table .actions-cell{width:1%;white-space:nowrap}
.table .code-cell{overflow-wrap:anywhere;word-break:break-word}
.compact-table th,.compact-table td{padding:11px 12px}
.table input,.table select,.table textarea{
  min-width:0;
  padding:9px 10px;
  font-size:13px;
}
.pagination-bar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  flex-wrap:wrap;
  margin-top:18px;
  padding-top:16px;
  border-top:1px solid var(--line-soft);
}
.pagination-summary{
  color:var(--muted);
  font-size:13px;
  font-weight:800;
}
.pagination{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:8px;
  flex-wrap:wrap;
}
.page-btn,.page-ellipsis{
  min-width:34px;
  height:34px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius:6px;
  font-size:13px;
  font-weight:900;
  line-height:1;
}
.page-btn{
  border:1px solid rgba(255,255,255,.08);
  background:#202630;
  color:#dbe4ef;
  transition:transform .18s,border-color .18s,background .18s,color .18s;
}
.page-btn:hover{
  transform:translateY(-1px);
  border-color:rgba(79,209,197,.42);
  background:#27303b;
  color:#fff;
}
.page-btn.active{
  border-color:transparent;
  background:linear-gradient(135deg,#38bdf8,var(--primary));
  color:#06110f;
  box-shadow:0 10px 20px rgba(56,189,248,.16);
}
.page-btn.disabled{
  opacity:.45;
  cursor:not-allowed;
  transform:none;
}
.page-btn-nav{
  min-width:58px;
  padding:0 10px;
}
.page-ellipsis{
  min-width:24px;
  color:#b7c1cf;
}

.entity-list{
  display:grid;
  gap:12px;
}
.entity-card{
  position:relative;
  display:grid;
  grid-template-columns:auto minmax(0,1fr) auto;
  gap:14px;
  align-items:center;
  padding:14px;
  border:1px solid var(--line-soft);
  border-radius:8px;
  background:
    linear-gradient(135deg,rgba(16,19,25,.94),rgba(25,29,37,.9)),
    radial-gradient(circle at top right,rgba(79,209,197,.08),transparent 34%);
}
.entity-card:before{
  content:"";
  position:absolute;
  inset:0 auto 0 0;
  width:3px;
  border-radius:8px 0 0 8px;
  background:linear-gradient(var(--primary),var(--accent));
}
.entity-avatar{
  width:44px;
  height:44px;
  display:grid;
  place-items:center;
  border-radius:8px;
  color:#07100d;
  font-weight:900;
  background:linear-gradient(135deg,var(--primary),var(--primary-2) 68%,var(--accent));
  box-shadow:0 12px 24px rgba(79,209,197,.14);
}
.entity-main{
  min-width:0;
  display:grid;
  gap:4px;
}
.entity-main strong{
  color:#fff;
  font-size:16px;
  line-height:1.35;
}
.entity-main span,.entity-main small{
  color:var(--muted);
  line-height:1.45;
}
.entity-meta{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:8px;
  flex-wrap:wrap;
  min-width:0;
}
.entity-actions{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:8px;
  flex-wrap:wrap;
}
.entity-actions form{display:inline-flex}
.entity-actions .btn{min-height:36px;padding:8px 12px}
.user-card{
  grid-template-columns:auto minmax(180px,1fr) minmax(220px,.9fr) auto;
}
.role-card{
  grid-template-columns:minmax(180px,.8fr) minmax(220px,1fr) auto auto;
  align-items:center;
}
.role-permissions{min-width:0}
.permission-chips{
  display:flex;
  align-items:center;
  gap:8px;
  flex-wrap:wrap;
}
.card-check.featured{
  border-color:rgba(79,209,197,.28);
  background:linear-gradient(135deg,rgba(79,209,197,.1),rgba(163,230,53,.05));
}

.hero-center{
  max-width:980px;
  margin:8vh auto 0;
  text-align:center;
}
.hero-center h1{
  margin-bottom:10px;
  font-size:48px;
}
.hero-center>p{
  width:min(620px,100%);
  margin:0 auto;
  color:#cbd5e1;
}
.type-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:18px;
  margin-top:36px;
}
.type-card{
  min-height:220px;
  padding:28px;
  overflow:hidden;
  color:var(--text);
  text-align:left;
  background:
    linear-gradient(135deg,rgba(31,35,43,.94),rgba(15,17,21,.94));
  transition:transform .2s,border-color .2s,box-shadow .2s;
}
.type-card:before{
  content:"";
  position:absolute;
  inset:0 0 auto 0;
  height:4px;
  background:linear-gradient(90deg,var(--primary),var(--accent));
}
.type-card:after{
  content:"";
  position:absolute;
  right:-48px;
  bottom:18px;
  width:180px;
  height:38px;
  transform:rotate(-35deg);
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.11));
}
.type-card:hover{
  transform:translateY(-6px);
  border-color:rgba(79,209,197,.45);
  box-shadow:var(--shadow);
}
.type-icon{
  width:62px;
  height:62px;
  display:grid;
  place-items:center;
  margin-bottom:20px;
  border-radius:8px;
  background:#232a33;
  border:1px solid var(--line-soft);
  font-size:34px;
}
.type-card h3{font-size:24px;margin-bottom:8px}
.type-card p{color:var(--muted);margin:0}

.stat-card{
  min-height:118px;
  padding:18px;
  overflow:hidden;
}
.stat-card:before{
  content:"";
  position:absolute;
  left:0;
  top:0;
  width:4px;
  height:100%;
  background:linear-gradient(var(--primary),var(--accent));
}
.stat-card div{color:var(--muted);font-weight:700}
.stat-card strong{
  display:block;
  margin-top:12px;
  color:#fff;
  font-size:30px;
}

.dash-hero{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
  margin-bottom:18px;
  padding:24px;
  border:1px solid rgba(255,255,255,.1);
  border-radius:8px;
  background:
    linear-gradient(135deg,rgba(28,33,40,.96),rgba(16,19,24,.96) 54%,rgba(41,33,20,.92));
  box-shadow:var(--shadow);
}
.dash-hero h1{margin:6px 0 8px}
.dash-kicker{
  color:#a3e635;
  text-transform:uppercase;
  font-size:12px;
  font-weight:900;
}
.health-ring{
  width:128px;
  height:128px;
  flex:0 0 128px;
  border-radius:50%;
  display:grid;
  place-items:center;
  background:conic-gradient(var(--primary) var(--score),#353b44 0);
  box-shadow:0 0 0 1px rgba(255,255,255,.08),0 18px 38px rgba(0,0,0,.24);
}
.health-ring>div{
  width:92px;
  height:92px;
  border-radius:50%;
  display:grid;
  place-items:center;
  background:#101319;
  border:1px solid var(--line-soft);
}
.health-ring strong{font-size:30px}
.health-ring span{margin-top:-24px;color:var(--muted);font-size:12px}
.dash-kpi-grid{
  display:grid;
  grid-template-columns:repeat(6,minmax(0,1fr));
  gap:14px;
  margin-bottom:18px;
}
.kpi-card{
  min-height:134px;
  padding:18px;
  overflow:hidden;
  color:#fff;
  transition:transform .18s,border-color .18s,box-shadow .18s;
}
.kpi-card:before{
  content:"";
  position:absolute;
  left:0;
  top:0;
  width:100%;
  height:3px;
  background:linear-gradient(90deg,var(--primary),var(--accent));
}
.kpi-card:after{
  content:"";
  position:absolute;
  right:-20px;
  bottom:18px;
  width:120px;
  height:22px;
  transform:rotate(-28deg);
  background:rgba(255,255,255,.08);
}
.kpi-card:hover{transform:translateY(-4px);box-shadow:var(--shadow)}
.kpi-card span,.kpi-card small{display:block;color:var(--muted)}
.kpi-card strong{display:block;margin:10px 0 8px;font-size:34px}
.kpi-card.hot:before,.status-dot.hot{background:var(--coral)}
.kpi-card.cyan:before,.status-dot.cyan{background:var(--primary)}
.kpi-card.green:before,.status-dot.green{background:var(--success)}
.kpi-card.amber:before,.status-dot.amber{background:var(--accent)}
.kpi-card.blue:before,.status-dot.blue{background:var(--violet)}
.kpi-card.hot{border-color:rgba(251,113,133,.3)}
.kpi-card.cyan{border-color:rgba(79,209,197,.3)}
.kpi-card.green{border-color:rgba(34,197,94,.3)}
.kpi-card.amber{border-color:rgba(245,158,11,.34)}
.kpi-card.blue{border-color:rgba(167,139,250,.3)}
.dash-main-grid{
  display:grid;
  grid-template-columns:1.35fr 1fr 1fr;
  gap:16px;
  margin-bottom:16px;
}
.dash-panel.wide{grid-column:span 2}
.panel-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-bottom:14px;
}
.panel-head h3{margin:0}
.panel-head p{margin:4px 0 0}
.trend-chart{
  height:250px;
  display:grid;
  grid-template-columns:repeat(14,1fr);
  gap:8px;
  align-items:end;
  padding:12px 0 2px;
}
.trend-col{
  height:100%;
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
  gap:8px;
  text-align:center;
}
.trend-col span{
  display:block;
  min-height:8px;
  border-radius:6px 6px 2px 2px;
  background:linear-gradient(180deg,var(--primary-2),var(--primary));
  box-shadow:0 8px 22px rgba(79,209,197,.16);
}
.trend-col small{font-size:11px;color:var(--muted)}
.type-split,.bar-list,.rank-list,.ticket-stream,.timeline{display:grid;gap:10px}
.split-row,.rank-row,.ticket-line,.timeline-item{
  padding:12px;
  border:1px solid var(--line-soft);
  border-radius:8px;
  background:#12161d;
}
.split-row>div:first-child{display:flex;justify-content:space-between;gap:10px;margin-bottom:10px}
.split-row span{color:var(--muted)}
.mini-progress,.bar-row div{
  height:9px;
  border-radius:999px;
  background:#303741;
  overflow:hidden;
}
.mini-progress span,.bar-row i{
  display:block;
  height:100%;
  border-radius:999px;
  background:linear-gradient(90deg,var(--primary-2),var(--primary));
}
.bar-row{
  display:grid;
  grid-template-columns:auto minmax(110px,1fr) 1.2fr auto;
  gap:10px;
  align-items:center;
  padding:10px 0;
  color:#fff;
}
.bar-row strong{min-width:34px;text-align:right}
.status-dot{
  width:10px;
  height:10px;
  border-radius:50%;
  background:var(--primary);
  box-shadow:0 0 0 4px rgba(79,209,197,.12);
}
.status-dot.red{background:var(--danger);box-shadow:0 0 0 4px rgba(239,68,68,.12)}
.status-dot.slate{background:#94a3b8;box-shadow:0 0 0 4px rgba(148,163,184,.12)}
.rank-row,.ticket-line{
  display:grid;
  grid-template-columns:auto 1fr auto;
  gap:10px;
  align-items:center;
  color:#fff;
  transition:border-color .18s,background .18s;
}
.rank-row:hover,.ticket-line:hover{background:#171c24;border-color:rgba(79,209,197,.28)}
.rank-row b{
  display:grid;
  place-items:center;
  width:28px;
  height:28px;
  border-radius:6px;
  color:#07100d;
  background:linear-gradient(135deg,var(--primary),var(--primary-2));
}
.rank-row span{overflow:visible;text-overflow:clip;white-space:normal}
.ticket-line{grid-template-columns:auto 1.4fr auto .8fr}
.ticket-line strong,.ticket-line small{display:block}
.ticket-line small{color:var(--muted)}
.ticket-line em{
  font-style:normal;
  padding:6px 9px;
  border-radius:999px;
  background:rgba(79,209,197,.1);
  color:#d9f99d;
  font-size:12px;
  text-align:center;
}

.report-filter{
  display:grid;
  grid-template-columns:repeat(4,minmax(180px,1fr));
  gap:14px;
  align-items:end;
}
.report-actions{margin-bottom:0}
.report-kpis{grid-template-columns:repeat(6,minmax(0,1fr));margin-top:18px}
.report-grid{margin-top:18px}

.neo-metric-strip{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:14px;
  margin:0 0 18px;
}
.neo-metric{
  position:relative;
  min-height:96px;
  display:flex;
  align-items:center;
  gap:16px;
  padding:18px;
  border:1px solid rgba(148,163,184,.14);
  border-radius:8px;
  background:
    linear-gradient(180deg,rgba(26,31,38,.98),rgba(16,20,27,.98)),
    repeating-linear-gradient(90deg,rgba(255,255,255,.035) 0 1px,transparent 1px 28px);
  box-shadow:0 20px 44px rgba(0,0,0,.24);
  overflow:hidden;
}
.neo-metric:before{
  content:"";
  position:absolute;
  inset:0 0 auto;
  height:1px;
  background:linear-gradient(90deg,transparent,rgba(125,249,255,.55),rgba(168,85,247,.5),transparent);
}
.neo-icon{
  width:44px;
  height:44px;
  display:grid;
  place-items:center;
  flex:0 0 44px;
  border-radius:50%;
  color:#071015;
  font-weight:900;
  box-shadow:0 0 28px rgba(34,211,238,.18);
}
.neo-icon.cyan{background:#22d3ee}
.neo-icon.blue{background:#8b5cf6;color:#fff}
.neo-icon.amber{background:#f59e0b}
.neo-icon.green{background:#34d399}
.neo-metric strong{display:block;color:#fff;font-size:28px;line-height:1}
.neo-metric small{display:block;margin-top:6px;color:var(--muted);font-weight:800}
.command-chart-panel{
  background:
    linear-gradient(180deg,rgba(24,29,36,.98),rgba(14,18,25,.98)),
    repeating-linear-gradient(0deg,rgba(255,255,255,.035) 0 1px,transparent 1px 44px);
  overflow:hidden;
  min-height:300px;
}
.command-chart-panel:after{
  content:"";
  position:absolute;
  left:20px;
  right:20px;
  bottom:58px;
  height:2px;
  background:linear-gradient(90deg,rgba(34,211,238,.18),rgba(139,92,246,.75),rgba(52,211,153,.2));
  box-shadow:0 0 18px rgba(139,92,246,.35);
  pointer-events:none;
}
.neo-bar-stage,.neo-report-bars{
  height:280px;
  display:grid;
  grid-auto-flow:column;
  grid-auto-columns:minmax(32px,1fr);
  gap:12px;
  align-items:end;
  padding:18px 4px 6px;
}
.neo-report-bars{
  height:218px;
  grid-auto-columns:minmax(76px,1fr);
  gap:14px;
  padding:10px 8px 0;
}
.neo-bar,.neo-report-bar{
  height:100%;
  display:grid;
  grid-template-rows:1fr auto;
  gap:8px;
  align-items:end;
  justify-items:center;
  min-width:0;
}
.neo-report-bar{position:relative}
.neo-bar i,.neo-bar em,.neo-report-bar i{
  grid-row:1;
  align-self:end;
  width:42%;
  min-height:8px;
  border-radius:8px 8px 2px 2px;
  background:linear-gradient(180deg,#3b82f6,#22d3ee);
  box-shadow:0 0 22px rgba(34,211,238,.25);
}
.neo-report-bar i{
  width:64%;
  max-width:116px;
  background:linear-gradient(180deg,#60a5fa 0%,#38bdf8 52%,#22d3ee 100%);
}
.neo-bar em{
  margin-left:46%;
  background:linear-gradient(180deg,#a855f7,#7c3aed);
  box-shadow:0 0 22px rgba(168,85,247,.25);
}
.neo-bar small,.neo-report-bar small{
  max-width:70px;
  color:var(--muted);
  font-size:10px;
  text-align:center;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.neo-report-bar span{
  grid-row:1;
  align-self:start;
  margin-top:0;
  color:#e2e8f0;
  font-size:11px;
  font-weight:900;
}
.neo-ring{
  --p:0%;
  --ring:#22d3ee;
  position:relative;
  width:132px;
  height:132px;
  display:grid;
  place-items:center;
  border-radius:50%;
  background:conic-gradient(var(--ring) var(--p),rgba(71,85,105,.32) 0);
  box-shadow:0 0 0 1px rgba(255,255,255,.08),0 18px 42px rgba(0,0,0,.24),0 0 28px color-mix(in srgb,var(--ring) 26%,transparent);
}
.neo-ring:before{
  content:"";
  position:absolute;
  width:94px;
  height:94px;
  border-radius:50%;
  background:#10151d;
  border:1px solid rgba(255,255,255,.08);
}
.neo-ring strong,.neo-ring span{position:relative;z-index:1}
.neo-ring strong{align-self:end;color:#fff;font-size:27px;line-height:1}
.neo-ring span{align-self:start;margin-top:7px;color:var(--muted);font-size:11px;font-weight:900;text-transform:uppercase}
.neo-radial-stack{
  display:grid;
  align-content:center;
  gap:16px;
}
.neo-radial-row{
  display:flex;
  justify-content:center;
  gap:16px;
}
.report-command-grid{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(360px,420px);
  gap:16px;
  align-items:stretch;
  margin-top:18px;
  margin-bottom:18px;
}
.report-radials{
  display:flex;
  flex-direction:column;
  min-height:300px;
  background:
    radial-gradient(circle at 18% 58%,rgba(52,211,153,.16),transparent 31%),
    radial-gradient(circle at 72% 58%,rgba(34,211,238,.14),transparent 29%),
    linear-gradient(180deg,rgba(27,32,41,.98),rgba(15,19,27,.98));
}
.report-ring-head{margin-bottom:12px}
.report-ring-body{
  flex:1;
  display:grid;
  grid-template-columns:150px minmax(0,1fr);
  align-items:center;
  gap:18px;
}
.neo-ring.large{width:148px;height:148px}
.neo-ring.large:before{width:104px;height:104px}
.neo-ring.large strong{font-size:32px}
.neo-ring.compact{width:96px;height:96px}
.neo-ring.compact:before{width:66px;height:66px}
.neo-ring.compact strong{font-size:20px}
.mini-ring-grid{
  display:grid;
  grid-template-columns:1fr;
  gap:14px;
  justify-items:center;
}

.detail-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:14px;
}
.detail-grid>div{
  padding:12px;
  border:1px solid var(--line-soft);
  border-radius:8px;
  background:#12161d;
}
.detail-grid strong{
  display:block;
  margin-bottom:7px;
  color:#cbd5e1;
  font-size:12px;
  text-transform:uppercase;
}
.ticket-layout{
  display:grid;
  grid-template-columns:minmax(0,1.15fr) minmax(360px,.85fr);
  gap:18px;
  align-items:start;
}
.ticket-layout>.panel:nth-child(2){
  position:sticky;
  top:88px;
  max-height:calc(100vh - 110px);
  overflow:hidden;
}
.ticket-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin:20px 0 14px;
  padding:14px;
  border:1px solid var(--line-soft);
  border-radius:8px;
  background:#12161d;
}
.ticket-header h3{margin:0}
.image-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:10px;
  margin:16px 0;
}
.image-grid img{
  width:100%;
  aspect-ratio:1.35;
  object-fit:cover;
  border-radius:8px;
  border:1px solid var(--line-soft);
  transition:transform .18s,border-color .18s;
}
.image-grid img:hover{transform:scale(1.02);border-color:rgba(79,209,197,.42)}
.chat-box{
  min-height:240px;
  height:min(460px,55vh);
  overflow-y:auto;
  overscroll-behavior:contain;
  padding:14px;
  border:1px solid var(--line-soft);
  border-radius:8px;
  background:
    linear-gradient(180deg,#11151b,#0d1015),
    repeating-linear-gradient(90deg,rgba(255,255,255,.02) 0 1px,transparent 1px 18px);
}
.max-900 .chat-box{
  height:min(380px,50vh);
}
.msg{
  width:fit-content;
  max-width:min(88%,620px);
  margin:9px 0;
  padding:10px 12px;
  border:1px solid var(--line-soft);
  border-radius:8px;
  background:#1b2029;
}
.msg strong{display:block;margin-bottom:5px;color:#fff}
.msg small{display:block;margin-top:8px;color:var(--muted)}
.msg div{
  overflow-wrap:anywhere;
  word-break:break-word;
}
.msg.public{background:linear-gradient(135deg,#1a2430,#141920)}
.msg.staff{
  margin-left:auto;
  background:linear-gradient(135deg,rgba(79,209,197,.18),rgba(18,22,27,.95));
  border-color:rgba(79,209,197,.25);
}
.chat-form{
  display:flex;
  align-items:stretch;
  gap:10px;
  margin-top:10px;
}
.chat-form input{margin:0}
.chat-form-rich input[name=message]{min-width:220px;flex:1}
.chat-file{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:42px;
  padding:10px 14px;
  border:1px solid #3a4350;
  border-radius:8px;
  background:#202630;
  color:#fff;
  cursor:pointer;
  font-weight:800;
  white-space:nowrap;
}
.chat-file:hover{border-color:rgba(79,209,197,.46)}
.chat-file input{display:none}
.chat-images{
  display:grid;
  grid-template-columns:repeat(2,minmax(90px,1fr));
  gap:8px;
  margin-top:8px;
}
.chat-images img{
  width:100%;
  height:110px;
  object-fit:cover;
  border-radius:8px;
  border:1px solid var(--line-soft);
}
.timeline{
  max-height:min(320px,34vh);
  overflow-y:auto;
  overscroll-behavior:contain;
  padding-right:4px;
}
.timeline-item{
  overflow-wrap:anywhere;
}
.feedback-panel{
  margin-top:18px;
  padding:18px;
  border:1px solid rgba(79,209,197,.26);
  border-radius:8px;
  background:
    linear-gradient(135deg,rgba(18,24,33,.98),rgba(14,18,24,.98));
}
.feedback-form{
  display:grid;
  gap:16px;
}
.rating-options{
  display:grid;
  grid-template-columns:repeat(5,minmax(0,1fr));
  gap:12px;
}
.rating-choice{
  position:relative;
  display:block;
  min-width:0;
  cursor:pointer;
}
.rating-choice input[type=radio]{
  position:absolute;
  width:1px!important;
  height:1px!important;
  min-height:0!important;
  margin:0!important;
  padding:0!important;
  border:0!important;
  opacity:0!important;
  appearance:none;
  clip-path:inset(50%);
  overflow:hidden;
}
.rating-card{
  display:grid;
  min-height:104px;
  align-content:center;
  justify-items:center;
  gap:8px;
  padding:14px 10px;
  border:1px solid rgba(148,163,184,.22);
  border-radius:8px;
  background:#121821;
  color:#fff;
  text-align:center;
  transition:border-color .18s,background .18s,transform .18s,box-shadow .18s;
}
.rating-score{
  display:grid;
  place-items:center;
  width:30px;
  height:30px;
  border-radius:999px;
  background:#1e293b;
  color:#e5e7eb;
  font-size:14px;
  font-weight:900;
}
.rating-stars{
  color:#facc15;
  font-size:18px;
  line-height:1.1;
  white-space:nowrap;
}
.rating-label{
  color:var(--muted);
  font-size:13px;
  font-weight:800;
}
.rating-choice:hover .rating-card{
  border-color:rgba(79,209,197,.46);
  background:#151d28;
  transform:translateY(-2px);
}
.rating-choice input[type=radio]:focus-visible + .rating-card{
  border-color:rgba(79,209,197,.75);
  box-shadow:0 0 0 3px rgba(79,209,197,.16);
}
.rating-choice input[type=radio]:checked + .rating-card{
  border-color:rgba(250,204,21,.7);
  background:linear-gradient(135deg,rgba(250,204,21,.17),rgba(20,24,31,.96));
  box-shadow:0 16px 32px rgba(0,0,0,.22), inset 0 0 0 1px rgba(250,204,21,.16);
  transform:translateY(-2px);
}
.rating-choice input[type=radio]:checked + .rating-card .rating-score{
  background:#facc15;
  color:#111827;
}
.feedback-form textarea{
  min-height:96px;
  margin-top:8px;
}
.feedback-summary{
  display:grid;
  grid-template-columns:auto 1fr auto;
  gap:10px;
  align-items:center;
  padding:12px;
  border:1px solid rgba(250,204,21,.32);
  border-radius:8px;
  background:rgba(250,204,21,.08);
}
.feedback-summary strong{
  color:#facc15;
  font-size:24px;
}
.feedback-summary span{font-weight:900;color:#fff}
.feedback-summary small{color:var(--muted);text-align:right}
.feedback-comment{
  grid-column:1/-1;
  margin-top:8px;
  padding:10px;
  border:1px solid var(--line-soft);
  border-radius:8px;
  background:#10141a;
  color:#dbeafe;
}
.feedback-pending{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(280px,.8fr);
  gap:14px;
  align-items:center;
  padding:14px;
  border:1px solid rgba(245,158,11,.35);
  border-radius:8px;
  background:rgba(245,158,11,.09);
}
.feedback-pending strong,
.feedback-pending span,
.feedback-pending small{display:block}
.feedback-pending strong{color:#fde68a;font-size:18px}
.feedback-pending span{margin-top:4px;color:#fff;font-weight:800}
.feedback-pending small{margin-top:4px;color:var(--muted)}
.feedback-followup{
  display:grid;
  gap:10px;
}
.feedback-followup code{
  display:block;
  max-width:100%;
  padding:10px;
  overflow-wrap:anywhere;
  border:1px solid rgba(255,255,255,.08);
  border-radius:8px;
  background:#10141a;
  color:#dbeafe;
  font-size:12px;
}
.staff-feedback{margin:16px 0}
.claim-card{
  display:flex;
  align-items:center;
  gap:12px;
  flex-wrap:wrap;
  margin-top:16px;
  padding:14px;
  border:1px solid rgba(79,209,197,.22);
  border-radius:8px;
  background:#111821;
}
.check-row{
  display:flex;
  align-items:center;
  gap:10px;
  min-height:42px;
  color:#fff;
  font-weight:900;
}
.check-row input{width:18px;height:18px;margin:0}
.ticket-actions-panel{
  margin-top:18px;
  padding:14px;
  border:1px solid rgba(255,255,255,.08);
  border-radius:8px;
  background:linear-gradient(180deg,rgba(17,24,33,.78),rgba(13,18,25,.78));
  overflow:hidden;
}
.ticket-actions-title{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:12px;
  margin-bottom:12px;
}
.ticket-actions-title strong{
  color:#fff;
  font-size:16px;
}
.ticket-actions-title span{
  color:var(--muted);
  font-size:12px;
  font-weight:800;
}
.ticket-actions-grid{
  display:grid;
  grid-template-columns:1fr;
  gap:10px;
}
.ticket-action-form{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  gap:10px;
  align-items:end;
  min-width:0;
  padding-top:10px;
  border-top:1px solid rgba(255,255,255,.07);
}
.ticket-action-form.primary-action{
  border-top-color:rgba(79,209,197,.42);
}
.ticket-action-form label{
  display:grid;
  gap:7px;
  min-width:0;
  color:#cbd5e1;
  font-size:12px;
  font-weight:900;
  text-transform:uppercase;
}
.ticket-action-form select,
.ticket-action-form input{
  width:100%;
  min-width:0;
  margin:0;
}
.ticket-action-form textarea{
  width:100%;
  min-width:0;
  margin:0;
}
.solution-form{
  margin-top:18px;
}
.ticket-action-form .btn{
  min-width:86px;
  white-space:nowrap;
}
.action-note{
  margin:12px 0 0;
  padding:10px 12px;
  border:1px solid rgba(245,158,11,.28);
  border-radius:8px;
  background:rgba(245,158,11,.08);
  color:#fde68a;
  font-weight:800;
}
.expense-panel{
  display:grid;
  gap:12px;
  margin-top:18px;
  padding:14px;
  border:1px solid rgba(255,255,255,.08);
  border-radius:8px;
  background:#111821;
}
.expense-rows{
  display:grid;
  gap:10px;
}
.expense-row{
  display:grid;
  grid-template-columns:minmax(0,1.4fr) minmax(120px,.6fr) auto;
  gap:10px;
  align-items:end;
}
.expense-row label{
  display:grid;
  gap:7px;
  min-width:0;
  color:#cbd5e1;
  font-size:12px;
  font-weight:900;
}
.expense-row input{
  width:100%;
  min-width:0;
  margin:0;
}
.expense-remove{
  min-width:70px;
}
.expense-footer{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding-top:10px;
  border-top:1px solid rgba(255,255,255,.07);
}
.expense-footer strong{
  color:#fff;
}
.expense-public{
  display:grid;
  gap:10px;
  margin-top:16px;
  padding:14px;
  border:1px solid rgba(255,255,255,.08);
  border-radius:8px;
  background:#111821;
}
.expense-list{
  display:grid;
  gap:8px;
}
.expense-list>div{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:10px 0;
  border-top:1px solid rgba(255,255,255,.07);
}
.expense-list span{
  color:#e5edf7;
  font-weight:800;
}
.expense-list strong{
  color:#fff;
  white-space:nowrap;
}
.handover-panel{margin-top:18px}
.handover-empty{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  padding:16px;
  border:1px dashed rgba(79,209,197,.36);
  border-radius:8px;
  background:#111821;
}
.handover-empty p{margin:0;color:#dbeafe}
.handover-summary{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:10px;
  margin-bottom:14px;
}
.handover-summary>div{
  padding:12px;
  border:1px solid var(--line-soft);
  border-radius:8px;
  background:#121821;
}
.handover-summary strong,
.handover-summary span{display:block}
.handover-summary strong{color:var(--muted);font-size:12px;text-transform:uppercase}
.handover-summary span{margin-top:5px;color:#fff;font-weight:900}
.handover-gallery{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:12px;
}
.handover-gallery>div{
  min-width:0;
  padding:12px;
  border:1px solid var(--line-soft);
  border-radius:8px;
  background:#111821;
}
.handover-gallery strong{display:block;margin-bottom:8px;color:#fff}
.handover-thumbs{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:8px;
}
.handover-thumbs img{
  width:100%;
  aspect-ratio:1.35;
  object-fit:cover;
  border:1px solid var(--line-soft);
  border-radius:8px;
}
.handover-form{
  display:grid;
  gap:16px;
}
.handover-form textarea{margin-top:8px}
.handover-upload-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:12px;
}
.upload-box{
  display:grid;
  gap:10px;
  min-height:96px;
  align-content:center;
  padding:16px;
  border:1px dashed rgba(148,163,184,.34);
  border-radius:8px;
  background:#111821;
  color:#fff;
  font-weight:900;
  text-align:center;
}
.upload-box input{
  width:100%;
  margin:0;
  color:var(--muted);
}
.signature-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:14px;
}
.signature-card{
  display:grid;
  gap:10px;
  min-width:0;
  padding:14px;
  border:1px solid var(--line-soft);
  border-radius:8px;
  background:#10151d;
}
.signature-card input{margin-top:8px}
.signature-pad{
  width:100%;
  height:150px;
  touch-action:none;
  border:1px solid rgba(79,209,197,.34);
  border-radius:8px;
  background:
    repeating-linear-gradient(0deg,transparent 0 31px,rgba(15,23,42,.08) 32px),
    #fff;
  cursor:crosshair;
}
.acceptance-options{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:12px;
}
.acceptance-choice{
  display:flex;
  gap:10px;
  align-items:center;
  min-height:58px;
  padding:12px;
  border:1px solid rgba(148,163,184,.24);
  border-radius:8px;
  background:#121821;
  color:#fff;
  font-weight:900;
}
.acceptance-choice input{width:18px;height:18px;margin:0;flex:0 0 auto}
.acceptance-choice:has(input:checked){
  border-color:rgba(79,209,197,.55);
  background:rgba(79,209,197,.12);
}
.handover-public-link{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  margin-top:16px;
  padding:14px;
  border:1px solid rgba(79,209,197,.28);
  border-radius:8px;
  background:rgba(79,209,197,.08);
}
.handover-public-link.waiting{
  border-color:rgba(245,158,11,.35);
  background:rgba(245,158,11,.09);
}
.handover-public-link strong,
.handover-public-link span{display:block}
.handover-public-link strong{color:#fff;font-size:16px}
.handover-public-link span{margin-top:4px;color:var(--muted)}

.search-box{
  display:grid;
  gap:6px;
  margin-top:8px;
}
.search-item{
  padding:10px 12px;
  border:1px solid var(--line-soft);
  border-radius:8px;
  background:#12161d;
  cursor:pointer;
}
.search-item:hover{border-color:rgba(79,209,197,.36);background:#171c24}
.hidden{display:none!important}
.card-check{
  display:block;
  padding:14px;
  border:1px solid var(--line-soft);
  border-radius:8px;
  background:#12161d;
}
.card-check small{display:block;margin-top:4px;color:var(--muted)}
.status-row{
  display:flex;
  justify-content:space-between;
  gap:12px;
  padding:12px 0;
  border-bottom:1px solid var(--line-soft);
}
.settings-section{
  padding:18px;
  border:1px solid var(--line-soft);
  border-radius:8px;
  background:#12161d;
}
.settings-page{
  width:min(1280px,100%);
  margin:0 auto;
}
.settings-tabs{
  position:sticky;
  top:78px;
  z-index:8;
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  margin-bottom:16px;
  padding:10px;
  border:1px solid var(--line-soft);
  border-radius:8px;
  background:rgba(17,20,26,.88);
  backdrop-filter:blur(12px);
  box-shadow:var(--shadow-soft);
}
.settings-tab{
  min-height:40px;
  padding:9px 12px;
  border:1px solid transparent;
  border-radius:8px;
  color:#cbd5e1;
  background:#171c24;
  cursor:pointer;
  font-weight:900;
}
.settings-tab:hover{
  border-color:rgba(79,209,197,.34);
  color:#fff;
}
.settings-tab.active{
  color:#06110f;
  border-color:transparent;
  background:linear-gradient(135deg,var(--primary),var(--primary-2));
}
.settings-tab-panel[hidden]{display:none!important}
.settings-tab-panel{display:block}
.settings-tab-panel>.panel{margin-bottom:0}
.settings-kpi-form{display:block}
.settings-sla-table input,.kpi-settings-table input{min-width:0}
.settings-section h2{font-size:19px;margin:0 0 8px}
.settings-hint{margin:0 0 14px}
.settings-section .toolbar{margin:8px 0 0}
.notification-list{display:grid;gap:12px}
.notification-item{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  gap:14px;
  align-items:center;
  padding:15px;
  border:1px solid var(--line-soft);
  border-radius:8px;
  background:#12161d;
}
.notification-item.unread{
  border-color:rgba(79,209,197,.42);
  background:linear-gradient(135deg,rgba(79,209,197,.12),rgba(18,22,29,.96));
  box-shadow:inset 3px 0 0 var(--primary);
}
.notification-main h3{margin:7px 0 6px}
.notification-main p{margin:0 0 8px;color:#d7dde7}
.notification-main small{color:var(--muted)}
.notification-type{
  display:inline-flex;
  align-items:center;
  min-height:26px;
  padding:5px 8px;
  border-radius:999px;
  color:#07100d;
  background:linear-gradient(135deg,var(--primary),var(--primary-2));
  font-size:12px;
  font-weight:900;
}
.notification-actions{display:flex;align-items:center;justify-content:flex-end;gap:10px;flex-wrap:wrap}
.notification-actions form{display:inline-flex}
.empty-state{padding:34px;text-align:center}

.kpi-score-grid{
  display:grid;
  grid-template-columns:1.2fr repeat(5,minmax(0,1fr));
  gap:14px;
  margin-bottom:18px;
}
.kpi-score-panel{
  position:relative;
  min-height:132px;
  padding:20px;
  border:1px solid rgba(79,209,197,.28);
  border-radius:8px;
  background:linear-gradient(135deg,rgba(20,24,31,.98),rgba(28,35,35,.95));
  box-shadow:var(--shadow-soft);
  overflow:hidden;
}
.kpi-score-panel:before{
  content:"";
  position:absolute;
  inset:0 auto 0 0;
  width:4px;
  background:var(--primary);
}
.kpi-score-panel span,.kpi-score-panel small{display:block;color:var(--muted);font-weight:800}
.kpi-score-panel strong{display:block;margin:12px 0 6px;font-size:44px;color:#fff}
.kpi-score-panel.green:before{background:var(--success)}
.kpi-score-panel.cyan:before{background:var(--primary)}
.kpi-score-panel.blue:before{background:var(--violet)}
.kpi-score-panel.amber:before{background:var(--accent)}
.kpi-score-panel.red:before{background:var(--danger)}
.score-meter{
  width:120px;
  height:8px;
  margin-bottom:7px;
  border-radius:999px;
  overflow:hidden;
  background:#29313c;
}
.score-meter span{
  display:block;
  height:100%;
  border-radius:999px;
  background:linear-gradient(90deg,var(--primary),var(--accent));
}
.score-meter.wide{
  width:100%;
  height:10px;
  margin:0;
}
.mini-score-list{
  display:flex;
  flex-wrap:wrap;
  gap:6px;
  min-width:0;
}
.mini-score-list span{
  padding:5px 7px;
  border:1px solid var(--line-soft);
  border-radius:999px;
  background:#12161d;
  color:#cbd5e1;
  font-size:12px;
  font-weight:800;
}
.badge.tone-green{border-color:rgba(34,197,94,.35);background:rgba(34,197,94,.13);color:#bbf7d0}
.badge.tone-cyan{border-color:rgba(79,209,197,.35);background:rgba(79,209,197,.13);color:#ccfbf1}
.badge.tone-blue{border-color:rgba(167,139,250,.35);background:rgba(167,139,250,.13);color:#ddd6fe}
.badge.tone-amber{border-color:rgba(245,158,11,.35);background:rgba(245,158,11,.13);color:#fde68a}
.badge.tone-red{border-color:rgba(239,68,68,.35);background:rgba(239,68,68,.13);color:#fecaca}
.pm-work-head{align-items:center}
.pm-work-stats{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:12px;
  margin-bottom:14px;
}
.pm-work-stat{
  position:relative;
  display:block;
  min-height:104px;
  padding:16px;
  border:1px solid rgba(79,209,197,.26);
  border-radius:8px;
  color:var(--text);
  background:linear-gradient(135deg,rgba(18,22,29,.98),rgba(31,35,43,.94));
  text-decoration:none;
  box-shadow:var(--shadow-soft);
}
.pm-work-stat:before{
  content:"";
  position:absolute;
  left:0;
  top:0;
  width:4px;
  height:100%;
  border-radius:8px 0 0 8px;
  background:var(--primary);
}
.pm-work-stat span{display:block;color:var(--muted);font-weight:900}
.pm-work-stat strong{display:block;margin-top:8px;font-size:34px;color:#fff}
.pm-work-stat.active{border-color:rgba(79,209,197,.62);box-shadow:0 0 0 3px rgba(79,209,197,.1),var(--shadow-soft)}
.pm-work-stat.danger:before{background:var(--danger)}
.pm-work-stat.warn:before{background:var(--accent)}
.pm-work-stat.done:before{background:var(--success)}
.pm-work-tabs{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  margin-bottom:16px;
  padding:8px;
  border:1px solid var(--line-soft);
  border-radius:8px;
  background:#11161d;
}
.pm-work-tabs a{
  display:inline-flex;
  align-items:center;
  min-height:38px;
  padding:8px 12px;
  border:1px solid transparent;
  border-radius:8px;
  color:#cbd5e1;
  text-decoration:none;
  font-weight:900;
}
.pm-work-tabs a.active{
  color:#06110f;
  background:linear-gradient(135deg,var(--primary),var(--primary-2));
}
.pm-work-list{display:grid;gap:12px}
.pm-work-card{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  gap:14px;
  align-items:center;
  padding:16px;
  border:1px solid var(--line-soft);
  border-radius:8px;
  background:linear-gradient(135deg,rgba(18,22,29,.98),rgba(27,31,39,.94));
  box-shadow:var(--shadow-soft);
}
.pm-work-card.is-overdue{border-color:rgba(239,68,68,.38);box-shadow:inset 4px 0 0 var(--danger),var(--shadow-soft)}
.pm-work-main{min-width:0;color:inherit;text-decoration:none}
.pm-work-topline{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  margin-bottom:8px;
}
.pm-work-topline strong{font-size:13px;color:var(--primary-2)}
.pm-project-label{margin:-2px 0 6px;font-size:12px;color:var(--primary-2);letter-spacing:.02em}
.pm-work-card h2{
  margin:0 0 10px;
  font-size:19px;
  line-height:1.3;
  color:#fff;
}
.pm-work-meta{
  display:flex;
  gap:7px;
  flex-wrap:wrap;
}
.pm-work-meta span{
  display:inline-flex;
  align-items:center;
  min-height:28px;
  padding:5px 8px;
  border:1px solid var(--line-soft);
  border-radius:8px;
  color:#cbd5e1;
  background:#10141b;
  font-size:12px;
  font-weight:800;
}
.pm-work-card p{margin:10px 0 0;color:#d7dde7}
.pm-work-actions{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:8px;
  flex-wrap:wrap;
}
.pm-work-actions form{display:inline-flex}
.pm-action-strip{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  margin-bottom:18px;
}
.pm-action-strip strong{display:block;color:#fff;font-size:18px}
.pm-action-strip span{display:block;margin-top:3px}
.pm-action-strip form{display:inline-flex}
.kpi-leaderboard{overflow:hidden}
.kpi-rank-list{
  display:grid;
  gap:14px;
}
.kpi-rank-card{
  position:relative;
  display:grid;
  gap:16px;
  padding:18px;
  border:1px solid var(--line-soft);
  border-radius:8px;
  background:
    linear-gradient(135deg,rgba(16,19,25,.96),rgba(27,31,39,.94)),
    radial-gradient(circle at 100% 0,rgba(79,209,197,.1),transparent 32%);
}
.kpi-rank-card:before{
  content:"";
  position:absolute;
  left:0;
  top:0;
  width:4px;
  height:100%;
  border-radius:8px 0 0 8px;
  background:var(--primary);
}
.kpi-rank-card.tone-green:before{background:var(--success)}
.kpi-rank-card.tone-cyan:before{background:var(--primary)}
.kpi-rank-card.tone-blue:before{background:var(--violet)}
.kpi-rank-card.tone-amber:before{background:var(--accent)}
.kpi-rank-card.tone-red:before{background:var(--danger)}
.kpi-rank-top{
  display:grid;
  grid-template-columns:auto minmax(0,1fr) auto;
  gap:12px;
  align-items:center;
}
.kpi-rank-no{
  width:42px;
  height:42px;
  display:grid;
  place-items:center;
  border-radius:8px;
  border:1px solid rgba(255,255,255,.1);
  color:#fff;
  background:#10141b;
  font-weight:900;
}
.kpi-rank-person{min-width:0}
.kpi-rank-person strong{
  display:block;
  color:#fff;
  font-size:18px;
  line-height:1.35;
}
.kpi-rank-person span{
  display:block;
  margin-top:2px;
  color:var(--muted);
  font-size:12px;
  font-weight:800;
}
.kpi-rank-score{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  gap:18px;
  align-items:center;
}
.kpi-rank-score>div{
  display:grid;
  gap:10px;
  min-width:0;
}
.kpi-rank-score>strong{
  color:#fff;
  font-size:36px;
  line-height:1;
}
.kpi-metric-grid{
  display:grid;
  grid-template-columns:repeat(5,minmax(120px,1fr));
  gap:10px;
}
.kpi-metric{
  min-height:76px;
  padding:12px;
  border:1px solid var(--line-soft);
  border-radius:8px;
  background:rgba(12,15,20,.62);
}
.kpi-metric span{
  display:block;
  margin-bottom:8px;
  color:var(--muted);
  font-size:12px;
  font-weight:800;
}
.kpi-metric strong{
  color:#fff;
  font-size:18px;
}
.kpi-settings-table input{min-width:0}

::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-track{background:#0d1015}
::-webkit-scrollbar-thumb{background:#343d49;border-radius:999px}
::-webkit-scrollbar-thumb:hover{background:#4b5563}

@media(max-width:1400px){
  .dash-kpi-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
  .dash-main-grid{grid-template-columns:1fr 1fr}
  .dash-panel.wide{grid-column:span 2}
  .neo-metric-strip{grid-template-columns:repeat(2,minmax(0,1fr))}
  .report-command-grid{grid-template-columns:1fr}
  .report-ring-body{grid-template-columns:150px minmax(0,1fr);justify-content:start}
  .mini-ring-grid{grid-template-columns:repeat(2,minmax(96px,1fr))}
  .report-kpis{grid-template-columns:repeat(3,minmax(0,1fr))}
  .report-filter{grid-template-columns:repeat(3,minmax(180px,1fr))}
  .kpi-score-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
  .pm-work-stats{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:1280px){
  .ticket-layout{grid-template-columns:1fr}
  .ticket-layout>.panel:nth-child(2){
    position:static;
    max-height:none;
    overflow:visible;
  }
  .settings-tabs{top:0}
}
@media(max-width:1180px){
  .admin-page-grid{grid-template-columns:1fr}
}
@media(max-width:1100px){
  .shell{grid-template-columns:1fr}
  .sidebar{
    position:relative;
    height:auto;
    padding:16px;
  }
  .sidebar nav{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    margin-top:16px;
  }
  .content{padding-top:24px}
  .topbar{position:relative;margin:0 0 20px;padding:14px;border:1px solid var(--line-soft);border-radius:8px}
  .grid-main,.ticket-layout{grid-template-columns:1fr}
  .card-grid.four,.type-grid,.grid-2,.detail-grid{grid-template-columns:1fr}
}
@media(max-width:760px){
  h1{font-size:30px}
  .hero-center h1{font-size:36px}
  .page-head,.panel-head,.topbar{
    align-items:flex-start;
    flex-direction:column;
  }
  .topbar-actions{justify-content:flex-start}
  .settings-tabs{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    position:relative;
  }
  .settings-tab{width:100%}
  .table{table-layout:auto}
  .table th,.table td{padding:10px 8px;font-size:12px}
  .chat-box,
  .max-900 .chat-box{
    height:320px;
    min-height:220px;
  }
  .timeline{max-height:260px}
  .bar-row{grid-template-columns:auto 1fr auto}
  .bar-row div{grid-column:2 / -1}
}

/* --- KB content modes and rich text --- */
.content-type-switch{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-top:8px}
.content-type-switch label{display:block;padding:12px;border:1px solid var(--line);border-radius:8px;background:#12161d;cursor:pointer}
.content-type-switch label:has(input:checked){border-color:rgba(79,209,197,.7);background:rgba(79,209,197,.1)}
.content-type-switch input{width:auto;margin-right:5px}
.content-type-switch strong,.content-type-switch small{display:block;margin-left:22px}
.content-type-switch small{color:var(--muted);font-size:12px}
.rich-field{min-width:0}
.rich-toolbar{display:flex;gap:5px;flex-wrap:wrap;margin-top:6px;padding:6px;border:1px solid var(--line);border-bottom:0;border-radius:7px 7px 0 0;background:#202630}
.rich-tool{min-height:30px;padding:4px 9px;border:1px solid #3a4350;border-radius:5px;background:#171c24;color:#dbe4ee;cursor:pointer;font-weight:800}
.rich-tool:hover,.rich-tool:focus-visible{border-color:var(--primary);color:#fff}
.rich-font-size{min-height:30px;padding:4px 8px;border:1px solid #3a4350;border-radius:5px;background:#171c24;color:#dbe4ee;font-size:12px}
.rich-editor{min-height:86px;padding:10px 11px;border:1px solid #3a4350;border-radius:0 0 7px 7px;background:#101319;color:var(--text);line-height:1.65;outline:none}
.rich-editor:focus{border-color:var(--primary);box-shadow:0 0 0 3px rgba(79,209,197,.14)}
.rich-editor:empty:before{content:'พิมพ์เนื้อหา...';color:var(--muted)}
.rich-editor ul,.rich-editor ol,.rich-output ul,.rich-output ol{padding-left:24px}
.rich-editor blockquote{margin:8px 0;padding:8px 12px;border-left:3px solid var(--primary);background:rgba(79,209,197,.08);color:#dbeafe;border-radius:0 6px 6px 0}
.rich-quote-color{min-height:30px;padding:4px 8px;border:1px solid #3a4350;border-radius:5px;background:#171c24;color:#dbe4ee;font-size:12px}
.rich-editor blockquote.quote-red,.rich-output blockquote.quote-red{border-left-color:#ef6b73;background:rgba(239,107,115,.12);color:#ffd5d8}
.rich-editor blockquote.quote-yellow,.rich-output blockquote.quote-yellow{border-left-color:#f4c95d;background:rgba(244,201,93,.12);color:#fff0b8}
.rich-editor blockquote.quote-green,.rich-output blockquote.quote-green{border-left-color:#52d273;background:rgba(82,210,115,.12);color:#d3ffdd}
.rich-editor blockquote.quote-blue,.rich-output blockquote.quote-blue{border-left-color:#5caeff;background:rgba(92,174,255,.12);color:#d8edff}
.rich-output{line-height:1.8;color:var(--text)}
.rich-output p{margin:0 0 10px}.rich-output h3,.rich-output h4{margin:16px 0 8px}.rich-output blockquote{margin:10px 0;padding:10px 14px;border-left:3px solid var(--primary);background:rgba(79,209,197,.08);color:#dbeafe}.rich-output a{color:#7dd3fc;text-decoration:underline}.rich-output pre,.rich-output code{font-family:Consolas,monospace}.rich-output pre{padding:10px;overflow:auto;background:#0d1015;border:1px solid var(--line);border-radius:6px}
.kb-content-type{display:inline-flex;align-items:center;min-height:24px;padding:4px 8px;border-radius:999px;background:rgba(167,139,250,.14);color:#ddd6fe;font-size:11px;font-weight:800}
.kb-video-only[hidden],.kb-text-only[hidden]{display:none}
.kb-video-player{width:100%;max-height:560px;border-radius:10px;background:#080b0e;border:1px solid var(--line)}
.kb-video-chapters{display:grid;gap:8px;margin-top:12px}.kb-video-chapters button{display:flex;justify-content:space-between;gap:12px;padding:10px 12px;border:0;border-left:3px solid var(--primary);border-radius:5px;background:#12161d;color:var(--text);text-align:left;cursor:pointer}.kb-video-chapters button span{color:var(--muted);font-size:12px}.kb-video-chapters button:hover{background:#202630}
.kb-transcript{margin-top:18px;padding-top:14px;border-top:1px solid var(--line)}
.chapter-input{display:grid;grid-template-columns:110px minmax(0,1fr) auto;gap:8px;margin:8px 0}.chapter-input input{margin:0}.chapter-input button{border:1px solid rgba(239,68,68,.4);border-radius:6px;background:rgba(239,68,68,.1);color:#fecaca;padding:7px 10px;cursor:pointer}
.steps-input-group .rich-field{flex:1 1 260px;margin:0}.steps-input-group .rich-editor{min-height:70px}.steps-input-group .rich-toolbar{margin-top:0}
.existing-attachments{margin-top:18px}.existing-attachments h4{margin-bottom:10px}.existing-attachments .attachment-item{justify-content:space-between}
@media(max-width:760px){.content-type-switch{grid-template-columns:1fr}.chapter-input{grid-template-columns:1fr}.steps-input-group .rich-field{width:100%}}
@media(max-width:900px){
  .dash-hero{align-items:flex-start;flex-direction:column}
  .dash-kpi-grid,.dash-main-grid,.neo-metric-strip,.report-command-grid,.report-kpis,.report-filter,.kpi-score-grid{grid-template-columns:1fr}
  .dash-panel.wide{grid-column:auto}
  .report-ring-body{grid-template-columns:1fr;justify-items:center}
  .mini-ring-grid{grid-template-columns:repeat(2,minmax(96px,1fr))}
  .neo-bar-stage,.neo-report-bars{height:220px;gap:6px}
  .ticket-line{grid-template-columns:auto 1fr}
  .ticket-line em,.ticket-line>small{grid-column:2}
  .trend-chart{gap:5px}
  .public-topbar{align-items:flex-start;flex-direction:column}
  .chat-form{flex-direction:column}
  .chat-form input,.toolbar input,.toolbar select{width:100%;min-width:0}
  .toolbar .btn,.actions .btn,.report-actions .btn{width:100%}
  .notification-item{grid-template-columns:1fr}
  .notification-actions{justify-content:flex-start}
  .rating-options{grid-template-columns:repeat(2,minmax(0,1fr))}
  .rating-card{min-height:92px}
  .feedback-summary{grid-template-columns:1fr}
  .feedback-summary small{text-align:left}
  .feedback-pending{grid-template-columns:1fr}
  .ticket-actions-grid{grid-template-columns:1fr}
  .ticket-actions-title{align-items:flex-start;flex-direction:column}
  .pm-work-card{grid-template-columns:1fr}
  .pm-work-actions{justify-content:flex-start}
  .pm-action-strip{align-items:flex-start;flex-direction:column}
  .handover-summary,.handover-gallery,.handover-upload-grid,.signature-grid,.acceptance-options{grid-template-columns:1fr}
  .handover-empty,.handover-public-link{align-items:stretch;flex-direction:column}
  .user-card,.role-card{grid-template-columns:auto minmax(0,1fr)}
  .user-card .entity-meta,.user-card .entity-actions,
  .role-card .role-permissions,.role-card .role-status,.role-card .entity-actions{
    grid-column:2 / -1;
    justify-content:flex-start;
  }
  .kpi-metric-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:620px){
  h1{font-size:28px}
  .hero-center h1{font-size:34px}
  .content,.public-wrap{padding-left:14px;padding-right:14px}
  .sidebar nav{grid-template-columns:1fr}
  .panel,.dash-panel,.auth-card{padding:16px}
  .image-grid,.chat-images,.handover-thumbs{grid-template-columns:1fr}
  .rating-options{grid-template-columns:1fr}
  .rating-card{
    grid-template-columns:auto auto 1fr;
    min-height:64px;
    justify-items:start;
    text-align:left;
  }
  .settings-tabs{grid-template-columns:1fr}
  .toolbar,.report-actions,.actions{align-items:stretch;flex-direction:column}
  .pm-work-stats{grid-template-columns:1fr}
  .pm-work-tabs{display:grid;grid-template-columns:1fr 1fr}
  .pm-work-actions,.pm-work-actions form{width:100%}
  .pm-action-strip form{width:100%}
  .ticket-action-form{grid-template-columns:1fr}
  .ticket-action-form .btn{width:100%}
  .expense-row{grid-template-columns:1fr}
  .expense-remove{width:100%}
  .expense-footer{align-items:stretch;flex-direction:column}
  .btn{width:100%}
  .type-card{min-height:180px;padding:20px}
  .entity-card,.user-card,.role-card{grid-template-columns:1fr}
  .entity-avatar{display:none}
  .entity-meta,.entity-actions,
  .user-card .entity-meta,.user-card .entity-actions,
  .role-card .role-permissions,.role-card .role-status,.role-card .entity-actions{
    grid-column:auto;
    justify-content:flex-start;
  }
  .entity-actions{width:100%}
  .entity-actions form{flex:1}
  .entity-actions .btn{width:100%}
  .section-title{align-items:flex-start;flex-direction:column}
  .kpi-rank-top,.kpi-rank-score{grid-template-columns:1fr}
  .kpi-rank-score>strong{font-size:34px}
  .kpi-metric-grid{grid-template-columns:1fr}
  .table-scroll{overflow:visible}
  .table,.table tbody,.table tr,.table td{
    display:block;
    width:100%;
  }
  .table{border-spacing:0}
  .table th{display:none}
  .table tr{
    margin-bottom:12px;
    padding:10px;
    border:1px solid var(--line-soft);
    border-radius:8px;
    background:#12161d;
  }
  .table td{
    padding:8px 0;
    border-bottom:1px solid rgba(255,255,255,.06);
  }
  .table td:last-child{border-bottom:0}
  .table input,.table select,.table textarea{width:100%}
}
.link-button{appearance:none;border:0;background:transparent;color:inherit;cursor:pointer;font:inherit;padding:0 0 0 6px}
.badge form{display:inline}
@media(max-width:420px){
  .content,.public-wrap{padding-left:10px;padding-right:10px}
  .panel,.dash-panel,.auth-card,.settings-section{padding:14px}
  .stat-card strong,.kpi-card strong{font-size:28px}
  .kpi-score-panel strong{font-size:38px}
}
@media(prefers-reduced-motion:reduce){
  *,*:before,*:after{scroll-behavior:auto!important;transition:none!important;animation:none!important}
}

/* ===================================================================
   Knowledge Base (KB) — landing menu card, list page, detail page,
   admin editor. Appended block — see assets/js/app.js for matching JS.
   =================================================================== */

/* --- Landing page: secondary KB menu card under .type-grid --- */
.kb-menu-container{
  width:min(560px,100%);
  margin:22px auto 0;
}
.kb-menu-card{
  display:block;
  position:relative;
  padding:18px 22px;
  overflow:hidden;
  border:1px solid var(--line-soft);
  border-radius:var(--radius);
  background:linear-gradient(135deg,rgba(31,35,43,.82),rgba(15,17,21,.82));
  color:var(--text);
  text-align:left;
  text-decoration:none;
  opacity:.86;
  transition:transform .2s,border-color .2s,box-shadow .2s,opacity .2s;
}
.kb-menu-card:before{
  content:"";
  position:absolute;
  inset:0 0 auto 0;
  height:3px;
  background:linear-gradient(90deg,var(--primary),var(--accent));
}
.kb-menu-card:hover,.kb-menu-card:focus-visible{
  opacity:1;
  transform:translateY(-4px);
  border-color:rgba(79,209,197,.45);
  box-shadow:var(--shadow-soft);
  color:var(--text);
}
.kb-icon{
  width:44px;
  height:44px;
  display:grid;
  place-items:center;
  margin-bottom:12px;
  border-radius:8px;
  background:#232a33;
  border:1px solid var(--line-soft);
  font-size:24px;
}
.kb-menu-card h3{font-size:18px;margin-bottom:4px}
.kb-menu-card p{color:var(--muted);margin:0;font-size:13px;line-height:1.55}

/* --- KB list page --- */
.kb-container{width:min(980px,100%);margin:0 auto}
.kb-header{text-align:center;margin-bottom:26px}
.kb-header h1{margin-bottom:8px}
.kb-header p{color:var(--muted);margin:0 auto;max-width:560px}
.kb-search-section{display:grid;gap:14px;margin-bottom:26px}
.kb-search-section .search-box{
  display:flex;
  align-items:center;
  gap:10px;
  margin-top:0;
  padding:0 14px;
  border:1px solid #343d49;
  border-radius:8px;
  background:#101319;
  min-height:48px;
  transition:border-color .18s,box-shadow .18s;
}
.kb-search-section .search-box:focus-within{
  border-color:rgba(79,209,197,.72);
  box-shadow:0 0 0 3px rgba(79,209,197,.14);
}
.kb-search-section .search-icon{flex:0 0 auto;color:var(--muted);font-size:16px}
.kb-search-section .search-box input{
  flex:1;
  min-height:0;
  margin:0;
  padding:12px 0;
  border:0;
  background:transparent;
}
.kb-search-section .search-box input:focus{border:0;box-shadow:none;background:transparent}
.filter-buttons{display:flex;gap:8px;flex-wrap:wrap;justify-content:center}
.kb-filter-bar{display:flex;align-items:flex-start;gap:12px;flex-wrap:wrap;justify-content:center}
.kb-filter-groups{display:flex;gap:10px;flex:1;justify-content:center;flex-wrap:wrap}
.kb-filter-group{min-width:210px;padding:9px 10px 10px;border:1px solid var(--line-soft);border-radius:12px;background:rgba(18,22,29,.72)}
.kb-filter-group-title{font-size:12px;font-weight:800;color:var(--muted);text-align:left;margin:0 2px 7px;padding-bottom:6px;border-bottom:1px solid rgba(148,163,184,.16)}
.kb-filter-group-options{display:flex;gap:6px;flex-wrap:wrap}
.kb-filter-group .filter-btn{min-height:32px;padding:6px 11px;font-size:12px}
.kb-filter-bar>.filter-all{align-self:stretch}
.kb-filter-shell{padding:14px;border:1px solid var(--line-soft);border-radius:16px;background:linear-gradient(135deg,rgba(20,26,35,.96),rgba(14,18,25,.96));box-shadow:0 12px 30px rgba(0,0,0,.16)}
.kb-filter-caption{display:flex;align-items:baseline;gap:10px;margin:0 2px 12px}.kb-filter-caption span{font-size:14px;font-weight:800;color:var(--text)}.kb-filter-caption small{color:var(--muted);font-size:12px}
.kb-audience-tabs{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
.kb-audience-tab{display:flex;flex-direction:column;gap:3px;padding:11px 14px;border:1px solid var(--line-soft);border-radius:11px;background:rgba(255,255,255,.025);color:var(--text);text-decoration:none;transition:.18s ease}
.kb-audience-tab span{font-weight:800}.kb-audience-tab small{color:var(--muted);font-size:11px}.kb-audience-tab:hover{transform:translateY(-1px);border-color:rgba(79,209,197,.5)}
.kb-audience-tab.active{border-color:transparent;background:linear-gradient(135deg,var(--primary),var(--primary-2));color:#06110f}.kb-audience-tab.active small{color:rgba(6,17,15,.72)}
.kb-category-picker{display:flex;align-items:center;gap:14px;margin-top:12px;padding-top:12px;border-top:1px solid rgba(148,163,184,.16)}
.kb-category-label{font-size:12px;font-weight:800;color:var(--muted);white-space:nowrap}.kb-category-options{display:flex;gap:7px;flex-wrap:wrap}.kb-category-chip{padding:7px 12px;border:1px solid var(--line-soft);border-radius:8px;color:var(--muted);font-size:12px;text-decoration:none;background:rgba(255,255,255,.02)}.kb-category-chip:hover,.kb-category-chip.active{color:var(--text);border-color:var(--primary);background:rgba(79,209,197,.1)}
@media(max-width:700px){.kb-audience-tabs{grid-template-columns:repeat(2,minmax(0,1fr))}.kb-category-picker{align-items:flex-start;flex-direction:column;gap:8px}}
.filter-btn{
  min-height:38px;
  padding:8px 16px;
  border:1px solid var(--line-soft);
  border-radius:999px;
  background:#171c24;
  color:#cbd5e1;
  font-weight:800;
  cursor:pointer;
  transition:border-color .18s,background .18s,color .18s;
}
.filter-btn:hover{border-color:rgba(79,209,197,.4);color:#fff}
.filter-btn.active{
  color:#06110f;
  border-color:transparent;
  background:linear-gradient(135deg,var(--primary),var(--primary-2));
}
.kb-articles{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:16px;
}
.kb-article{
  display:block;
  position:relative;
  padding:18px;
  border:1px solid var(--line-soft);
  border-radius:8px;
  background:linear-gradient(135deg,rgba(31,35,43,.9),rgba(15,17,21,.9));
  color:var(--text);
  text-decoration:none;
  transition:transform .18s,border-color .18s,box-shadow .18s;
}
.kb-article:hover,.kb-article:focus-visible{
  transform:translateY(-3px);
  border-color:rgba(79,209,197,.4);
  box-shadow:var(--shadow-soft);
  color:var(--text);
}
.kb-article-category{
  display:inline-flex;
  align-items:center;
  min-height:26px;
  padding:5px 9px;
  margin-bottom:10px;
  border-radius:999px;
  background:rgba(79,209,197,.14);
  color:#99f6e4;
  font-size:12px;
  font-weight:900;
}
.kb-article-category.engineer{background:rgba(167,139,250,.16);color:#ddd6fe}
.kb-article h4{margin:0 0 8px;font-size:16px;color:#fff}
.kb-article .description{color:var(--muted);font-size:13px;line-height:1.65;margin:0}
.kb-article .steps{
  margin:12px 0;
  padding:10px;
  border-left:2px solid var(--primary);
  border-radius:4px;
  background:rgba(0,0,0,.2);
  color:var(--muted);
  font-size:12px;
  line-height:1.6;
}
.kb-article .steps strong{color:var(--text)}
.kb-article .escalate-indicator{
  display:inline-flex;
  align-items:center;
  gap:6px;
  margin-top:4px;
  padding:6px 10px;
  border-radius:6px;
  background:rgba(239,68,68,.12);
  color:#fca5a5;
  font-size:12px;
  font-weight:800;
}
.kb-empty{padding:40px;text-align:center;border:1px dashed var(--line-soft);border-radius:8px}
.kb-empty h3{margin-bottom:6px}
.kb-empty p{color:var(--muted);margin:0}
.kb-escalate-cta{margin-top:28px;text-align:center}
.btn-escalate{
  display:inline-flex;
  align-items:center;
  gap:8px;
  min-height:44px;
  padding:11px 18px;
  border:1px solid rgba(245,158,11,.4);
  border-radius:8px;
  background:rgba(245,158,11,.09);
  color:#fde68a;
  font-weight:800;
  text-decoration:none;
  transition:transform .18s,border-color .18s,background .18s;
}
.btn-escalate:hover,.btn-escalate:focus-visible{
  transform:translateY(-1px);
  border-color:rgba(245,158,11,.6);
  background:rgba(245,158,11,.15);
  color:#fef3c7;
}

/* --- KB detail page --- */
.breadcrumb{
  display:flex;
  align-items:center;
  gap:6px;
  flex-wrap:wrap;
  margin-bottom:16px;
  color:var(--muted);
  font-size:13px;
}
.breadcrumb a{color:#7dd3fc}
.breadcrumb a:hover{color:#d9f99d}
.kb-detail-header{margin-bottom:18px}
.kb-detail-header h1{margin-bottom:10px}
.kb-detail-meta{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.kb-detail-badge{
  display:inline-flex;
  align-items:center;
  min-height:28px;
  padding:6px 12px;
  border-radius:999px;
  background:rgba(79,209,197,.14);
  color:#99f6e4;
  font-size:12px;
  font-weight:900;
}
.kb-detail-badge.engineer{background:rgba(167,139,250,.16);color:#ddd6fe}
.kb-detail-date{color:var(--muted);font-size:13px}
.kb-detail-section{margin:26px 0}
.kb-detail-section h2{font-size:20px;margin-bottom:14px}
.steps-list{display:grid;gap:14px}
.step-item{
  position:relative;
  display:flex;
  flex-wrap:wrap;
  align-items:flex-start;
  gap:14px;
  padding:14px;
  border-left:3px solid var(--primary);
  border-radius:4px;
  background:rgba(79,209,197,.08);
}
.step-number{
  width:28px;
  height:28px;
  flex:0 0 28px;
  display:grid;
  place-items:center;
  border-radius:50%;
  background:rgba(79,209,197,.2);
  color:var(--primary);
  font-weight:600;
  font-size:13px;
}
.step-content{flex:1 1 200px;min-width:200px;padding-top:4px}
.step-content p{margin:0;line-height:1.7}
.step-image-wrapper{
  position:relative;
  flex:0 0 100%;
  margin-top:8px;
  z-index:1;
  text-align:left;
}
.step-image-wrapper:hover,.step-image-wrapper:focus-within{z-index:50}
.step-image{
  position:relative;
  display:block;
  width:140px;
  height:100px;
  padding:0;
  border:1px solid var(--line-soft);
  border-radius:8px;
  overflow:hidden;
  background:#0d1015;
  cursor:zoom-in;
  transition:border-color .18s;
}
.step-image:hover,.step-image:focus-visible{border-color:rgba(79,209,197,.5)}
.step-image img{width:100%;height:100%;object-fit:cover;display:block}
.step-image-zoom{
  position:absolute;
  left:50%;
  bottom:100%;
  margin-bottom:12px;
  width:320px;
  max-width:min(70vw,380px);
  transform:translateX(-50%) translateY(6px) scale(.96);
  opacity:0;
  pointer-events:none;
  z-index:60;
  border:1px solid rgba(79,209,197,.4);
  border-radius:10px;
  overflow:hidden;
  background:#0d1015;
  box-shadow:0 24px 60px rgba(0,0,0,.55);
  transition:opacity .16s ease,transform .16s ease;
}
.step-image-zoom img{width:100%;height:auto;display:block}
@media(hover:hover){
  .step-image:hover .step-image-zoom{
    opacity:1;
    pointer-events:auto;
    transform:translateX(-50%) translateY(0) scale(1);
  }
}
.step-image:focus-visible .step-image-zoom{
  opacity:1;
  pointer-events:auto;
  transform:translateX(-50%) translateY(0) scale(1);
}
.step-image-hint{
  margin:6px 0 0;
  color:var(--muted);
  font-size:11px;
  line-height:1.4;
}
.escalation-box{
  margin-top:18px;
  padding:16px;
  border:1px solid rgba(245,158,11,.35);
  border-radius:8px;
  background:rgba(245,158,11,.09);
  color:#fde68a;
}
.escalation-box p{margin:0;line-height:1.7}
.attachments-section{margin:26px 0}
.attachments-list{display:grid;gap:10px}
.attachment-item{
  display:flex;
  align-items:center;
  gap:12px;
  padding:12px 14px;
  border:1px solid var(--line-soft);
  border-radius:8px;
  background:#12161d;
}
.attachment-icon{
  width:38px;
  height:38px;
  flex:0 0 38px;
  display:grid;
  place-items:center;
  border-radius:8px;
  background:#232a33;
  font-size:18px;
}
.attachment-info{flex:1;min-width:0}
.attachment-info strong{display:block;color:#fff;font-size:14px;overflow-wrap:anywhere}
.attachment-btn{
  flex:0 0 auto;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:36px;
  padding:8px 14px;
  border:1px solid #3a4350;
  border-radius:8px;
  background:#202630;
  color:#fff;
  font-weight:800;
  text-decoration:none;
  transition:border-color .18s;
}
.attachment-btn:hover,.attachment-btn:focus-visible{border-color:rgba(79,209,197,.46);color:#fff}
.related-articles{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:14px;
  margin-top:14px;
}
.related-article-card{
  display:block;
  padding:14px;
  border:1px solid var(--line-soft);
  border-radius:8px;
  background:#12161d;
  color:var(--text);
  text-decoration:none;
  transition:border-color .18s,transform .18s;
}
.related-article-card:hover,.related-article-card:focus-visible{
  border-color:rgba(79,209,197,.4);
  transform:translateY(-2px);
  color:var(--text);
}
.related-article-card strong{display:block;color:#fff;font-size:14px;margin-bottom:6px;line-height:1.4}
.feedback-section{
  margin:30px 0;
  padding:20px;
  border:1px solid var(--line-soft);
  border-radius:8px;
  background:#12161d;
  text-align:center;
}
.feedback-section p{margin:0 0 14px;color:var(--muted)}
.feedback-buttons{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}
.feedback-btn{
  min-height:44px;
  padding:11px 20px;
  border:1px solid var(--line-soft);
  border-radius:8px;
  background:#171c24;
  color:#cbd5e1;
  font-weight:800;
  cursor:pointer;
  transition:border-color .18s,background .18s,color .18s;
}
.feedback-btn:hover,.feedback-btn:focus-visible{border-color:rgba(79,209,197,.4);color:#fff}
.feedback-btn.selected{
  color:#06110f;
  border-color:transparent;
  background:linear-gradient(135deg,var(--primary),var(--primary-2));
}
.kb-detail-cta{
  display:flex;
  gap:12px;
  justify-content:center;
  flex-wrap:wrap;
  margin-top:26px;
}

/* --- Image lightbox (KB detail step images, full-screen viewer) --- */
.image-lightbox{
  position:fixed;
  inset:0;
  z-index:1000;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:24px;
  background:rgba(5,7,10,.86);
  backdrop-filter:blur(6px);
  opacity:0;
  visibility:hidden;
  transition:opacity .2s ease,visibility .2s ease;
}
.image-lightbox.active{opacity:1;visibility:visible}
.image-lightbox-content{
  position:relative;
  max-width:min(920px,92vw);
  max-height:88vh;
}
.image-lightbox-image{
  display:block;
  max-width:100%;
  max-height:88vh;
  border-radius:10px;
  box-shadow:0 30px 70px rgba(0,0,0,.6);
}
.image-lightbox-close{
  position:absolute;
  top:-14px;
  right:-14px;
  width:38px;
  height:38px;
  display:grid;
  place-items:center;
  border:1px solid var(--line-soft);
  border-radius:50%;
  background:#171c24;
  color:#fff;
  font-size:16px;
  font-weight:900;
  cursor:pointer;
  transition:border-color .18s,transform .18s;
}
.image-lightbox-close:hover,.image-lightbox-close:focus-visible{
  border-color:rgba(79,209,197,.5);
  transform:scale(1.06);
}

/* --- Admin KB editor: dynamic steps + attachment chips --- */
#stepsContainer{display:grid;gap:10px;margin-top:10px}
.steps-input-group{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.steps-input-group input[type=text],.steps-input-group textarea{flex:1 1 160px;min-width:160px;margin:0;resize:vertical}
.step-index{
  flex:0 0 28px;
  width:28px;
  height:28px;
  display:grid;
  place-items:center;
  border-radius:50%;
  background:linear-gradient(135deg,var(--primary),var(--primary-2));
  color:#07100d;
  font-weight:900;
  font-size:13px;
}
.step-image-upload{
  display:inline-flex;
  align-items:center;
  gap:6px;
  min-height:42px;
  padding:9px 12px;
  border:1px solid #3a4350;
  border-radius:8px;
  background:#202630;
  color:#cbd5e1;
  font-weight:800;
  cursor:pointer;
  white-space:nowrap;
  transition:border-color .18s;
}
.step-image-upload:hover{border-color:rgba(79,209,197,.4)}
.step-image-upload input[type=file]{display:none}
.step-thumb{
  flex:0 0 auto;
  width:42px;
  height:42px;
  object-fit:cover;
  border-radius:6px;
  border:1px solid var(--line-soft);
}
.remove-image-check{
  display:inline-flex;
  align-items:center;
  gap:6px;
  color:var(--muted);
  font-size:12px;
  font-weight:600;
  white-space:nowrap;
  cursor:pointer;
}
.remove-image-check input{margin:0}
.btn-remove-step{
  flex:0 0 auto;
  min-height:42px;
  padding:9px 12px;
  border:1px solid rgba(239,68,68,.4);
  border-radius:8px;
  background:rgba(239,68,68,.1);
  color:#fecaca;
  font-weight:800;
  cursor:pointer;
  transition:border-color .18s,background .18s;
}
.btn-remove-step:hover,.btn-remove-step:focus-visible{border-color:rgba(239,68,68,.65);background:rgba(239,68,68,.16)}
.btn-add-step{margin-top:4px}
.file-chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
.file-chip{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:6px 10px;
  border:1px solid var(--line-soft);
  border-radius:999px;
  background:#171c24;
  color:#cbd5e1;
  font-size:12px;
  font-weight:800;
}
.file-chip button{
  appearance:none;
  border:0;
  background:transparent;
  color:var(--muted);
  cursor:pointer;
  font-size:14px;
  line-height:1;
  padding:0;
}
.file-chip button:hover,.file-chip button:focus-visible{color:#fecaca}

/* --- KB accessibility: focus-visible outline for interactive elements --- */
.kb-menu-card:focus-visible,
.kb-article:focus-visible,
.filter-btn:focus-visible,
.step-image:focus-visible,
.attachment-btn:focus-visible,
.related-article-card:focus-visible,
.feedback-btn:focus-visible,
.image-lightbox-close:focus-visible,
.btn-add-step:focus-visible,
.btn-remove-step:focus-visible,
.step-image-upload:focus-within{
  outline:2px solid rgba(79,209,197,.75);
  outline-offset:2px;
}

/* --- KB responsive --- */
@media(max-width:760px){
  .kb-articles,.related-articles{grid-template-columns:1fr}
  .kb-menu-card{padding:16px 18px}
  .step-item{flex-direction:column}
  .step-image-wrapper{flex:0 0 auto;width:100%}
  .step-image{width:100%;height:auto;aspect-ratio:1.6}
  .step-image-zoom{width:min(88vw,340px)}
  .kb-detail-cta{flex-direction:column}
  .kb-detail-cta .btn{width:100%}
  .feedback-buttons{flex-direction:column}
  .feedback-btn{width:100%}
  .steps-input-group{flex-direction:column;align-items:stretch}
  .steps-input-group input[type=text],.steps-input-group textarea{min-width:0}
  .step-index{align-self:flex-start}
  .step-image-upload,.btn-remove-step{width:100%;justify-content:center}
}