*{box-sizing:border-box}
:root{
  --bg:#09121b;
  --panel:#121e29;
  --border:#253847;
  --muted:#8196a8;
  --blue:#2bace8;
  --green:#54d792;
  --red:#f07883;
}
body{
  margin:0;
  min-height:100vh;
  font-family:Arial,sans-serif;
  background:radial-gradient(circle at top,#15334c,#09121b 35%);
  color:#edf4f8;
}
a{color:#65c9f5}
.layout{display:flex;min-height:100vh}
.sidebar{
  width:250px;
  position:fixed;
  inset:0 auto 0 0;
  padding:28px 22px;
  background:#111d28;
  border-right:1px solid var(--border);
}
.brand{font-size:21px;font-weight:900}
.brand span{color:#4bbcf0}
.sidebar-sub{
  margin-top:7px;
  color:#5f788c;
  font-size:10px;
  letter-spacing:.13em;
}
nav{margin-top:34px}
nav a{
  display:block;
  padding:12px;
  margin:5px 0;
  border-radius:10px;
  color:#b9cad5;
  text-decoration:none;
  font-weight:700;
}
nav a:hover,nav a.active{background:#1c3040;color:white}
.content{
  margin-left:250px;
  width:calc(100% - 250px);
  padding:30px;
}
.page-head{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:20px;
  margin-bottom:22px;
}
.page-head h1{font-size:32px;margin:0}
.page-head p{margin:8px 0 0;color:var(--muted)}
.eyebrow{
  display:block;
  color:#4bbcf0;
  font-size:10px;
  font-weight:900;
  letter-spacing:.15em;
  margin-bottom:8px;
}
.hero{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:24px;
  padding:28px;
  border-radius:18px;
  margin-bottom:16px;
  background:linear-gradient(135deg,#173c59,#1d6688);
  border:1px solid #367ea4;
}
.hero span{display:block;color:#b8dfef;font-size:12px}
.hero strong{display:block;font-size:44px;margin:8px 0 5px}
.compare{
  text-align:right;
  background:rgba(5,20,30,.25);
  padding:16px 18px;
  border-radius:13px;
}
.compare.up strong{color:#75e2ad}
.compare.down strong{color:#ff919b}
.panel{
  background:linear-gradient(180deg,#14212d,#111b25);
  border:1px solid var(--border);
  border-radius:15px;
  padding:20px;
}
.grid-two{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:12px}
label{display:block;font-weight:800;margin:14px 0 7px}
input,select{
  width:100%;
  height:45px;
  padding:0 12px;
  border:1px solid #31495b;
  border-radius:9px;
  background:#0b151f;
  color:white;
}
.weekday-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:8px;
}
.check{
  display:flex;
  align-items:center;
  gap:7px;
  margin:0;
  padding:9px;
  background:#0e1822;
  border:1px solid #263746;
  border-radius:8px;
  font-size:12px;
}
.check input{width:auto;height:auto}
.btn{
  display:inline-block;
  margin-top:16px;
  padding:12px 17px;
  border:0;
  border-radius:9px;
  background:#229ed9;
  color:white;
  font-weight:900;
  text-decoration:none;
  cursor:pointer;
}
.btn.secondary{background:#263948}
.btn.full{width:100%;text-align:center}
.no-margin{margin:0}
.alert{padding:12px 14px;border-radius:9px;margin-bottom:14px}
.alert.success{background:#153f2d;color:#7fe4ad}
.alert.danger{background:#4d252d;color:#ffacb5}
.info-box{
  padding:13px;
  border-radius:9px;
  background:#11283a;
  color:#a8d7ec;
}
.team-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:17px;
}
.team-card{
  background:linear-gradient(180deg,#14212d,#101a24);
  border:1px solid var(--border);
  border-radius:16px;
  overflow:hidden;
}
.team-card header{
  display:flex;
  justify-content:space-between;
  padding:21px;
  border-bottom:1px solid #233644;
}
.team-card header h2{margin:5px 0;font-size:23px}
.team-card header p{margin:0;color:#7f94a6;font-size:12px}
.team-card header>strong{font-size:36px}
.metric-grid,.web-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px;
  padding:17px;
}
.metric-grid div,.web-grid div{
  padding:15px;
  border-radius:11px;
  background:#0d1721;
  border:1px solid #253846;
}
.metric-grid span,.web-grid span{
  display:block;
  color:#8197a9;
  font-size:11px;
}
.metric-grid b,.web-grid b{
  display:block;
  font-size:25px;
  margin-top:7px;
}
.team-card footer{
  display:flex;
  justify-content:space-between;
  padding:14px 18px;
  background:#0d1721;
  color:#8297a8;
  font-size:12px;
}
.positive{color:#70dda7}
.negative{color:#ff8e99}
.member-list{display:grid;gap:9px}
.member-card{
  display:flex;
  gap:11px;
  align-items:center;
  padding:12px;
  background:#0d1721;
  border:1px solid #253846;
  border-radius:10px;
}
.member-avatar{
  width:36px;
  height:36px;
  border-radius:10px;
  background:#1d3b51;
  color:#70c9f4;
  display:grid;
  place-items:center;
  font-weight:900;
}
.member-card small{
  display:block;
  color:#8196a8;
  margin-top:3px;
}
.team-tabs{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  margin-bottom:15px;
}
.team-tabs a{
  padding:9px 12px;
  background:#14212d;
  border:1px solid #293d4d;
  border-radius:8px;
  text-decoration:none;
  color:#dbe8ef;
}
table{width:100%;border-collapse:collapse;font-size:13px}
th,td{
  padding:13px 12px;
  border-bottom:1px solid #243644;
  text-align:left;
}
th{
  color:#7e94a6;
  font-size:10px;
  text-transform:uppercase;
}
.table-wrap{overflow:auto}
.block-muted{
  display:block;
  color:#7d92a4;
  margin-top:4px;
}
.rule-card{
  padding:15px;
  border-radius:11px;
  margin-bottom:11px;
  border:1px solid #2c4353;
}
.rule-card b,.rule-card span,.rule-card code{display:block}
.rule-card span{color:#8fa4b6;margin:5px 0 8px}
.rule-card code{
  background:#0b151f;
  padding:8px;
  border-radius:7px;
}
.rule-card.blue{background:#112739}
.rule-card.green{background:#102b22}
pre{
  white-space:pre-wrap;
  word-break:break-word;
  background:#0b151f;
  border:1px solid #2a4051;
  border-radius:9px;
  padding:12px;
}
.login-body{
  display:grid;
  place-items:center;
  padding:20px;
}
.login-card{
  width:100%;
  max-width:430px;
  padding:31px;
  background:#13202b;
  border:1px solid #2b4253;
  border-radius:16px;
}
@media(max-width:1000px){
  .team-grid,.grid-two{grid-template-columns:1fr}
}
@media(max-width:900px){
  .sidebar{position:static;width:100%}
  .layout{display:block}
  .content{margin:0;width:100%}
}
@media(max-width:620px){
  .content{padding:18px}
  .page-head,.hero{flex-direction:column;align-items:flex-start}
  .compare{width:100%;text-align:left}
  .metric-grid,.web-grid,.form-row{grid-template-columns:1fr}
  .weekday-grid{grid-template-columns:repeat(2,1fr)}
}

.head-actions{display:flex;gap:10px;flex-wrap:wrap}
.status-strip{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:10px;
  margin-bottom:14px;
}
.status-strip>div{
  background:#101b25;
  border:1px solid #223746;
  border-radius:11px;
  padding:12px 14px;
}
.status-strip span{display:block;color:#8095a7;font-size:11px;margin-bottom:6px}
.status-strip b{font-size:12px}
.status-ok{color:#65dda0}.status-warn{color:#f5c363}.status-bad{color:#ff8994}
.kpi-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:12px;
  margin-bottom:16px;
}
.kpi-card{
  min-height:142px;
  padding:20px;
  border:1px solid #263c4c;
  border-radius:15px;
  background:linear-gradient(180deg,#14222e,#101a24);
}
.kpi-card.primary{background:linear-gradient(135deg,#174768,#1d7297);border-color:#397fa4}
.kpi-card span{display:block;color:#9ab0bf;font-size:11px;text-transform:uppercase;letter-spacing:.06em}
.kpi-card strong{display:block;font-size:35px;margin:13px 0 8px}
.kpi-card small{color:#8297a8}
.positive-card strong{color:#67dda1}.negative-card strong{color:#ff8994}
.analytics-grid{
  display:grid;
  grid-template-columns:1.6fr 1fr;
  gap:16px;
  margin-bottom:16px;
}
.analytics-grid.lower{grid-template-columns:1fr 1fr}
.panel-head{display:flex;align-items:flex-start;justify-content:space-between;gap:15px;margin-bottom:16px}
.panel-head h2{margin:0}
.panel-head>b{font-size:13px;color:#8da3b4}
.hour-chart{
  height:235px;
  display:grid;
  grid-template-columns:repeat(24,1fr);
  gap:4px;
  align-items:end;
  padding-top:20px;
  border-bottom:1px solid #29404f;
}
.hour-column{height:100%;display:flex;flex-direction:column;justify-content:flex-end;align-items:center;min-width:0}
.hour-value{font-size:9px;color:#8da2b2;height:14px}
.hour-bar{width:72%;min-height:4px;border-radius:5px 5px 0 0;background:linear-gradient(180deg,#64d7a0,#2689bd)}
.hour-column small{font-size:8px;color:#718797;margin-top:7px}
.donut-wrap{position:relative;width:190px;height:190px;margin:8px auto 20px}
.donut{
  width:190px;height:190px;border-radius:50%;
  background:conic-gradient(#55bff0 0 var(--rdp),#a887ff var(--rdp) 360deg);
  mask:radial-gradient(circle,#0000 0 55%,#000 56%);
}
.donut-center{position:absolute;inset:0;display:grid;place-content:center;text-align:center}
.donut-center strong{font-size:29px}.donut-center span{color:#7f95a6;font-size:11px}
.legend-list{display:grid;gap:9px}
.legend-list>div{display:flex;justify-content:space-between;background:#0d1721;border:1px solid #233746;padding:10px;border-radius:9px}
.dot{width:9px;height:9px;border-radius:50%;display:inline-block;margin-right:8px}.blue-dot{background:#55bff0}.purple-dot{background:#a887ff}
.website-bars{display:grid;gap:13px}
.website-row{display:grid;gap:6px}
.website-label{display:flex;justify-content:space-between;font-size:12px}
.track{height:10px;background:#0c151e;border-radius:999px;overflow:hidden;border:1px solid #203544}
.fill{height:100%;background:linear-gradient(90deg,#2bace8,#56d89a);border-radius:999px}
.leaderboard{display:grid;gap:9px}
.leader-row{display:grid;grid-template-columns:34px 1fr auto;gap:11px;align-items:center;background:#0d1721;border:1px solid #253846;border-radius:10px;padding:11px}
.rank{width:28px;height:28px;display:grid;place-items:center;border-radius:8px;background:#1d3a50;color:#6bcaf5;font-weight:900}
.leader-row small{display:block;color:#7e93a5;margin-top:3px}
.shift-list{display:grid;gap:10px}
.shift-card{display:grid;gap:10px;background:#0d1721;border:1px solid #253846;border-radius:10px;padding:12px}
.shift-card small{display:block;color:#7f95a6;margin-top:4px}
.mini-progress{height:8px;background:#09131b;border-radius:999px;overflow:hidden}
.mini-progress div{height:100%;background:linear-gradient(90deg,#2bace8,#58d995)}
.live-feed{display:grid;gap:8px;max-height:340px;overflow:auto}
.feed-row{display:grid;grid-template-columns:48px 1fr auto;gap:10px;align-items:center;background:#0d1721;border:1px solid #253846;border-radius:10px;padding:10px}
.feed-time{font-size:11px;color:#72caf2}
.feed-row small{display:block;color:#7f95a6;margin-top:3px}
.empty-state{color:#8095a6;padding:15px;text-align:center;border:1px dashed #2a4050;border-radius:9px}
@media(max-width:1200px){
  .kpi-grid{grid-template-columns:repeat(2,1fr)}
  .analytics-grid,.analytics-grid.lower{grid-template-columns:1fr}
}
@media(max-width:700px){
  .status-strip,.kpi-grid{grid-template-columns:1fr}
  .hour-chart{overflow-x:auto;grid-template-columns:repeat(24,28px)}
}

.dashboard-controls{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.date-filter{display:flex;gap:8px;align-items:center}
.date-filter input{width:165px;height:42px}
.operations-banner{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:20px;
  background:linear-gradient(120deg,#112638,#173d58);
  border:1px solid #2b536d;
  border-radius:15px;
  padding:18px 20px;
  margin-bottom:14px;
}
.operations-banner strong{display:block;font-size:21px;margin:5px 0}
.operations-banner small,.banner-label{color:#8ca7b8}
.system-pills{display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end}
.pill{padding:8px 10px;border-radius:999px;font-size:10px;font-weight:900;letter-spacing:.04em;border:1px solid transparent}
.pill.ok{background:#123829;color:#73e0a9;border-color:#245b42}
.pill.warn{background:#3d3218;color:#f0ca67;border-color:#66562a}
.pill.bad{background:#46232a;color:#ff9da7;border-color:#6c343d}
.pill.neutral{background:#132b3d;color:#8ed2f0;border-color:#294b61}
.enterprise-kpi-grid{
  display:grid;
  grid-template-columns:repeat(6,1fr);
  gap:11px;
  margin-bottom:15px;
}
.enterprise-kpi{
  display:flex;
  align-items:center;
  gap:13px;
  min-width:0;
  padding:17px;
  border-radius:14px;
  background:linear-gradient(180deg,#14222e,#101a24);
  border:1px solid #273d4d;
}
.enterprise-kpi.accent{background:linear-gradient(135deg,#174968,#21779b);border-color:#3b87ad}
.enterprise-kpi .kpi-icon{
  width:38px;height:38px;flex:0 0 38px;
  display:grid;place-items:center;
  border-radius:11px;
  background:#0d1821;
  color:#69cbf5;
  font-weight:900;
}
.enterprise-kpi span{display:block;color:#8ca1b1;font-size:10px;text-transform:uppercase;letter-spacing:.05em}
.enterprise-kpi strong{display:block;font-size:25px;margin:5px 0}
.enterprise-kpi small{display:block;color:#7c91a2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.growth-up strong{color:#67dda1}.growth-down strong{color:#ff8994}
.enterprise-main-grid{
  display:grid;
  grid-template-columns:minmax(0,1.65fr) minmax(320px,.85fr);
  gap:15px;
  margin-bottom:15px;
}
.enterprise-secondary-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:15px;
  margin-bottom:15px;
}
.enterprise-panel{box-shadow:0 14px 35px rgba(0,0,0,.12)}
.panel-head p{margin:5px 0 0;color:#748a9b;font-size:12px}
.peak-badge{text-align:right;background:#0d1821;border:1px solid #263c4c;border-radius:10px;padding:10px 12px}
.peak-badge span,.peak-badge small{display:block;color:#7d93a4;font-size:10px}
.peak-badge b{display:block;font-size:18px;color:#69caf4;margin:3px 0}
.enterprise-hour-chart{
  height:270px;
  display:grid;
  grid-template-columns:repeat(24,minmax(12px,1fr));
  gap:5px;
  align-items:end;
  padding-top:12px;
}
.hour-column{height:100%;display:grid;grid-template-rows:18px 1fr 18px;align-items:end;text-align:center}
.hour-tooltip{font-size:9px;color:#7e94a5}
.hour-bar-shell{
  height:100%;
  display:flex;
  align-items:flex-end;
  justify-content:center;
  background:linear-gradient(180deg,rgba(26,51,69,.15),rgba(11,24,33,.48));
  border-radius:5px;
  overflow:hidden;
}
.hour-bar{width:68%;min-height:3px;background:linear-gradient(180deg,#62dba2,#2ca6dc);border-radius:5px 5px 0 0}
.hour-column small{font-size:8px;color:#718797;margin-top:5px}
.donut-section{display:grid;grid-template-columns:190px 1fr;align-items:center;gap:16px}
.donut-wrap{position:relative;width:180px;height:180px;margin:auto}
.donut{width:180px;height:180px;border-radius:50%;mask:radial-gradient(circle,#0000 0 55%,#000 56%)}
.donut-center{position:absolute;inset:0;display:grid;place-content:center;text-align:center}
.donut-center strong{font-size:29px}.donut-center span{color:#7d92a3;font-size:11px}
.composition-list{display:grid;gap:10px}
.composition-list>div{
  display:grid;
  grid-template-columns:1fr auto;
  gap:4px 12px;
  padding:12px;
  border-radius:10px;
  background:#0d1821;
  border:1px solid #263b4b;
}
.composition-list small{grid-column:2;color:#7c91a2;text-align:right}
.dot{width:9px;height:9px;border-radius:50%;display:inline-block;margin-right:7px}
.blue-dot{background:#2db3eb}.purple-dot{background:#a987ff}
.website-bars{display:grid;gap:13px}
.website-row{display:grid;gap:6px}
.website-label{display:flex;justify-content:space-between;font-size:12px}
.track{height:11px;background:#09131b;border-radius:999px;overflow:hidden;border:1px solid #203544}
.fill{height:100%;background:linear-gradient(90deg,#2bace8,#56d89a);border-radius:999px}
.enterprise-leaderboard .leader-row{padding:12px}
.rank-1{background:#5d4c19!important;color:#ffd66f!important}
.rank-2{background:#35414d!important;color:#d4e4ec!important}
.rank-3{background:#4b3323!important;color:#e7ae7b!important}
.shift-list{display:grid;gap:10px}
.shift-card{display:grid;gap:11px;background:#0d1721;border:1px solid #253846;border-radius:10px;padding:12px}
.shift-head{display:flex;justify-content:space-between;gap:12px}
.shift-head small{display:block;color:#7f95a6;margin-top:3px}
.shift-head strong{color:#6edba5}
.mini-progress{height:8px;background:#09131b;border-radius:999px;overflow:hidden}
.mini-progress div{height:100%;background:linear-gradient(90deg,#2bace8,#58d995)}
.warning-panel{border-color:#4a3a2b}
.attention-count{
  display:grid;place-items:center;
  width:36px;height:36px;border-radius:10px;
  background:#472a20;color:#ffb07c;font-weight:900
}
.missing-list{display:grid;gap:8px;max-height:290px;overflow:auto}
.missing-row{display:flex;justify-content:space-between;gap:12px;padding:11px;border-radius:9px;background:#161a1d;border:1px solid #413328}
.missing-row small{display:block;color:#8e877f;margin-top:3px}
.missing-row>span{color:#f0b47e;font-size:11px}
.success-empty{padding:16px;text-align:center;color:#72dda7;background:#10281f;border:1px solid #24543e;border-radius:9px}
.live-panel-full{margin-bottom:20px}
.live-table-wrap{overflow:auto}
.live-table{width:100%;border-collapse:collapse}
.live-table th,.live-table td{padding:12px 10px;border-bottom:1px solid #233746;text-align:left}
.live-table th{color:#7c92a3;font-size:9px;text-transform:uppercase;letter-spacing:.06em}
.live-table small{display:block;color:#748a9a;margin-top:3px}
.valid-badge{display:inline-block;padding:5px 8px;border-radius:999px;background:#153728;color:#6fe0a6;font-size:9px;font-weight:900}
@media(max-width:1450px){
  .enterprise-kpi-grid{grid-template-columns:repeat(3,1fr)}
}
@media(max-width:1100px){
  .enterprise-main-grid,.enterprise-secondary-grid{grid-template-columns:1fr}
}
@media(max-width:780px){
  .operations-banner,.dashboard-controls,.date-filter{align-items:stretch}
  .operations-banner{flex-direction:column}
  .system-pills{justify-content:flex-start}
  .enterprise-kpi-grid{grid-template-columns:1fr 1fr}
  .donut-section{grid-template-columns:1fr}
}
@media(max-width:520px){
  .enterprise-kpi-grid{grid-template-columns:1fr}
  .date-filter{flex-direction:column}
  .date-filter input{width:100%}
}