:root {
  --bg: #020b18;
  --panel: rgba(3, 16, 31, .9);
  --panel-2: rgba(4, 21, 42, .92);
  --line: rgba(52, 132, 226, .27);
  --text: #dceaff;
  --muted: #7f96b4;
  --blue: #2e98ff;
  --cyan: #26e5e8;
  --green: #61f078;
  --violet: #a861ff;
  --orange: #ff9145;
  --yellow: #ffd648;
  --red: #ff5368;
}

* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  color: var(--text);
  font-family: "Segoe UI", Roboto, Arial, sans-serif;
  background:
    radial-gradient(circle at 18% 0%, rgba(0, 112, 255, .14), transparent 30%),
    radial-gradient(circle at 74% 18%, rgba(0, 255, 204, .05), transparent 27%),
    linear-gradient(180deg, #010611 0%, #021124 52%, #020813 100%);
  overflow: hidden;
}

button, input { font: inherit; color: inherit; }
button { cursor: pointer; border: 0; }
button:disabled, .disabled { opacity: .35; cursor: not-allowed; filter: grayscale(.5); }
button:active { transform: translateY(1px) scale(.995); }
.svg-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.icon {
  width: 1em;
  height: 1em;
  display: inline-block;
  flex: 0 0 auto;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.glyph-fill {
  fill: currentColor;
  stroke: none;
  opacity: .86;
}

.shell {
  width: 100vw;
  height: 100vh;
  min-width: 1100px;
  display: grid;
  grid-template-columns: 200px minmax(0, 1fr) 340px;
  grid-template-rows: minmax(0, 1fr) 52px;
  gap: 10px;
  padding: 0 14px 10px 0;
  background: linear-gradient(90deg, rgba(5, 24, 47, .9), transparent 16%, rgba(4, 18, 36, .92));
}

.sidebar {
  grid-row: 1;
  border: 1px solid rgba(50, 125, 218, .2);
  background: linear-gradient(180deg, rgba(2, 17, 34, .98), rgba(0, 10, 22, .98));
  box-shadow: inset -1px 0 0 rgba(68, 145, 255, .12);
  padding: 13px 12px;
  display: flex;
  flex-direction: column;
}

.brand {
  height: 58px;
  display: flex;
  align-items: center;
  gap: 12px;
  border-bottom: 1px solid rgba(57, 137, 242, .12);
}
.brand strong { display: block; font-size: 20px; line-height: 18px; letter-spacing: .01em; font-weight: 800; }
.brand small { display: block; color: #93a7c1; font-size: 11px; line-height: 13px; margin-top: 3px; }
.logo { width: 58px; height: 30px; position: relative; filter: drop-shadow(0 0 12px rgba(26, 144, 255, .9)); }
.logo span { position: absolute; width: 34px; height: 20px; border: 7px solid #148cff; border-radius: 22px; transform: rotate(-35deg); top: 5px; }
.logo span:first-child { left: 1px; border-right-color: #31d2ff; }
.logo span:last-child { right: 1px; border-left-color: #31d2ff; }

.side-nav { display: grid; gap: 8px; margin-top: 14px; }
.side-nav button {
  height: 38px;
  padding: 0 15px;
  text-align: left;
  display: flex;
  align-items: center;
  gap: 12px;
  color: #aab9ce;
  font-weight: 700;
  font-size: 11px;
  letter-spacing: .01em;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 5px;
}
.side-nav button:hover, .side-nav button.active {
  color: white;
  border-color: rgba(45, 154, 255, .72);
  background: linear-gradient(90deg, rgba(25, 117, 218, .48), rgba(8, 35, 67, .78));
  box-shadow: inset 0 0 17px rgba(47, 157, 255, .18), 0 0 15px rgba(36, 142, 255, .24);
}
.side-nav .icon { width: 18px; height: 18px; color: #99b5d7; stroke-width: 1.85; }
.side-nav button.active .icon, .side-nav button:hover .icon { color: #dbeeff; filter: drop-shadow(0 0 6px rgba(74, 166, 255, .75)); }
.search { margin-top: auto; display: flex; align-items: center; gap: 8px; height: 27px; padding: 0 9px; border: 1px solid rgba(57, 137, 242, .16); border-radius: 5px; background: #041326; color: #627c9c; }
.search .icon { width: 13px; height: 13px; }
.search input { min-width: 0; flex: 1; border: 0; outline: 0; background: transparent; font-size: 10px; font-weight: 700; }
kbd { color: #889bb4; font-size: 9px; font-weight: 800; }

.content { min-width: 0; min-height: 0; margin-left: 10px; padding-top: 14px; display: grid; grid-template-rows: 58px 32px 172px 155px minmax(0, 1fr); gap: 9px; }
.top { display: flex; align-items: start; min-width: 0; }
h1 { margin: 0; font-size: 31px; line-height: 34px; letter-spacing: .01em; font-weight: 700; text-shadow: 0 0 12px rgba(163, 202, 255, .28); }
.top p { margin: 3px 0 0; color: #bac8da; font-size: 14px; line-height: 17px; font-weight: 400; }
.clock-card, .system-card, .command, .panel, .tile, .cta, .bottom button {
  border: 1px solid var(--line);
  background: linear-gradient(180deg, rgba(4, 21, 41, .94), rgba(2, 13, 28, .96));
  box-shadow: inset 0 0 15px rgba(39, 119, 218, .08), 0 0 0 1px rgba(0, 0, 0, .18);
}
.clock-card, .system-card { height: 50px; border-radius: 6px; padding: 10px 14px; }
.clock-card strong { display: block; font-size: 15px; }
.clock-card span, .clock-card small { color: #94a9c2; font-size: 10px; font-weight: 700; }
.system-card { display: flex; align-items: center; gap: 13px; }
.system-card b { width: 17px; height: 17px; border-radius: 50%; background: #18df4b; box-shadow: 0 0 15px #18df4b; }
.system-card strong, .system-card span { display: block; font-size: 10px; font-weight: 900; }
.system-card span { color: #5aff7b; margin-top: 3px; }

.command { height: 32px; border-radius: 5px; display: flex; align-items: center; gap: 12px; padding: 0 10px; color: #8fa6c0; font-size: 10px; font-weight: 700; }
.command .prompt { color: #4eb4ff; font-size: 15px; }
.command strong { color: #bdd2ef; flex: 1; }
.command button { width: 24px; height: 24px; display: grid; place-items: center; background: transparent; color: #b9cee7; }
.command button .icon { width: 15px; height: 15px; }

.tiles { display: grid; grid-template-columns: repeat(6, minmax(92px, 1fr)); gap: 5px; }
.tile { position: relative; height: 84px; border-radius: 6px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; overflow: hidden; }
.tile::before, .step::before { content: ""; position: absolute; inset: -35%; background: radial-gradient(circle, color-mix(in srgb, currentColor 22%, transparent), transparent 48%); opacity: .58; }
.tile:hover, .tile.selected { border-color: color-mix(in srgb, currentColor 72%, #fff 8%); box-shadow: inset 0 0 20px rgba(50, 145, 255, .13), 0 0 15px color-mix(in srgb, currentColor 28%, transparent); }
.tile .icon { position: relative; width: 32px; height: 32px; stroke-width: 1.7; filter: drop-shadow(0 0 8px currentColor); }
.tile strong { position: relative; font-size: 10px; line-height: 12px; font-weight: 800; }
.tile span { position: absolute; right: 11px; bottom: 10px; min-width: 22px; padding: 2px 5px; border-radius: 10px; color: #07131f; font-size: 9px; line-height: 11px; font-weight: 800; }
.tile.blue span { background: var(--blue); }
.tile.cyan span { background: var(--cyan); }
.tile.green span { background: var(--green); }
.tile.violet span, .tile.purple span { background: var(--violet); }
.tile.orange span { background: var(--orange); }
.tile.yellow span { background: var(--yellow); }
.tile.teal span { background: #2fe1d0; }
.tile.magenta span { background: #ff6ef3; }
.tile.lime span { background: #91f481; }
.blue { color: var(--blue); } .cyan { color: var(--cyan); } .green { color: var(--green); } .violet, .purple { color: var(--violet); } .orange { color: var(--orange); } .yellow { color: var(--yellow); } .teal { color: #2fe1d0; } .magenta { color: #ff6ef3; } .lime { color: #91f481; } .red { color: var(--red); }

.panel { border-radius: 6px; overflow: hidden; }
.panel-title { height: 31px; padding: 0 13px; display: flex; justify-content: space-between; align-items: center; color: #aebeda; font-size: 10px; font-weight: 800; letter-spacing: .005em; }
.panel-title b { margin-left: 8px; padding: 2px 6px; border-radius: 10px; color: white; background: #147eea; }
.panel-title button { background: transparent; color: #78aef3; font-size: 10px; font-weight: 800; }
.flow { height: 92px; display: grid; grid-template-columns: repeat(11, auto); align-items: center; justify-content: center; gap: 10px; }
.flow em { color: #86a2c2; font-size: 29px; font-style: normal; opacity: .55; }
.step { position: relative; width: 76px; height: 84px; display: grid; place-items: center; text-align: center; }
.step .icon { width: 56px; height: 56px; padding: 13px; border: 1px solid color-mix(in srgb, currentColor 62%, transparent); border-radius: 50%; background: rgba(7, 25, 47, .82); box-shadow: 0 0 15px color-mix(in srgb, currentColor 34%, transparent); stroke-width: 1.75; }
.step b { color: #dfeaff; font-size: 10px; line-height: 12px; font-weight: 700; }
.step span { color: #a9bad0; font-size: 16px; line-height: 8px; font-weight: 400; }
.workflow p { margin: 0 0 8px; text-align: center; color: #8198b5; font-size: 11px; }

.queue { min-height: 0; }
.table-scroll { height: calc(100% - 31px); overflow: auto; padding: 0 7px 8px; }
table { width: 100%; border-collapse: collapse; table-layout: fixed; font-size: 9px; font-weight: 700; }
th { color: #7187a4; text-transform: uppercase; text-align: left; height: 24px; }
td { height: 22px; border-top: 1px solid rgba(57, 137, 242, .1); color: #b8c7da; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
td:first-child { color: #36a9ff; }
tbody tr:hover, tbody tr:focus { background: rgba(36, 136, 255, .12); outline: 1px solid rgba(62, 158, 255, .35); }
.state { color: #4fc6ff; }
.priority { padding: 3px 6px; border-radius: 3px; }
.priority.high { color: #ff6b78; background: rgba(255, 82, 105, .16); }
.priority.mid { color: #ffd664; background: rgba(255, 202, 64, .15); }
.priority.low { color: #57f07d; background: rgba(87, 240, 125, .14); }
.row-menu { background: transparent; color: #7390ad; }

.rightbar { padding-top: 14px; display: grid; grid-template-rows: 58px 250px minmax(0, 1fr) 60px 40px; gap: 8px; min-width: 0; min-height: 0; }
.right-top { display: grid; grid-template-columns: 1fr 1.12fr; gap: 8px; }
.right-top .clock-card, .right-top .system-card { height: 50px; }
.status-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; padding: 0 8px 8px; }
.metric { min-height: 64px; border: 1px solid rgba(58, 130, 214, .16); border-radius: 5px; padding: 9px 10px; display: grid; grid-template-columns: 32px 1fr 35px; gap: 2px 8px; align-items: center; background: rgba(3, 16, 31, .74); }
.metric .icon { grid-row: 1 / 4; width: 26px; height: 26px; stroke-width: 1.75; filter: drop-shadow(0 0 7px currentColor); }
.metric b { color: #dce7f5; font-size: 9px; line-height: 12px; font-weight: 800; }
.metric strong { grid-column: 2; font-size: 17px; }
.metric span { grid-column: 3; grid-row: 2; color: #95a7bf; font-size: 9px; }
.metric div { grid-column: 2 / 4; height: 3px; background: #10243b; border-radius: 8px; overflow: hidden; }
.metric em { display: block; height: 100%; background: currentColor; box-shadow: 0 0 9px currentColor; }
.muted { color: #b8c9dc; }

.projects { min-height: 0; }
.project-list { height: 154px; overflow-y: auto; padding: 2px 8px 0; }
.project-list article { display: grid; grid-template-columns: 10px 1fr 70px 70px; gap: 8px; align-items: center; height: 31px; border-top: 1px solid rgba(57, 137, 242, .12); }
.dot { width: 7px; height: 7px; border-radius: 50%; box-shadow: 0 0 10px currentColor; }
.project-list strong { display: block; font-size: 10px; line-height: 12px; font-weight: 800; }
.project-list span, .project-list em { color: #8da3bc; font-size: 9px; line-height: 11px; font-style: normal; }
meter { width: 68px; height: 5px; }
.project-list article:has(.dot.green) meter { color: var(--green); }
.project-list article:has(.dot.blue) meter { color: var(--blue); }
.project-list article:has(.dot.yellow) meter { color: var(--yellow); }
.project-list article:has(.dot.violet) meter { color: var(--violet); }
.project-list article:has(.dot.cyan) meter { color: var(--cyan); }
meter::-webkit-meter-bar {
  height: 5px;
  border: 0;
  border-radius: 8px;
  background: #10243b;
}
meter::-webkit-meter-optimum-value,
meter::-webkit-meter-suboptimum-value,
meter::-webkit-meter-even-less-good-value {
  border-radius: 8px;
  background: currentColor;
  box-shadow: 0 0 7px currentColor;
}
meter::-moz-meter-bar {
  border-radius: 8px;
  background: currentColor;
}
.open-all { width: calc(100% - 16px); margin: 7px 8px 8px; height: 24px; color: #76b8ff; background: rgba(20, 91, 168, .18); border: 1px solid rgba(66, 154, 255, .14); border-radius: 5px; font-size: 10px; font-weight: 800; }

.cta { height: 60px; border-radius: 6px; display: grid; grid-template-columns: 42px 1fr 22px; align-items: center; gap: 8px; padding: 0 16px; text-align: left; color: #ddecff; }
.cta.primary { background: linear-gradient(135deg, #005eea, #008bff 52%, #0644a2); border-color: #25a9ff; box-shadow: inset 0 0 22px rgba(255,255,255,.1), 0 0 15px rgba(18, 125, 255, .48); }
.cta:not(.primary) { height: 40px; }
.cta > .icon:first-child { width: 29px; height: 29px; stroke-width: 1.7; }
.cta .arrow { width: 22px; height: 22px; }
.cta strong { display: block; font-size: 16px; line-height: 18px; font-weight: 800; }
.cta small { display: block; margin-top: 3px; color: #b7c8de; font-size: 8px; line-height: 10px; font-weight: 700; }
.cta b { font-size: 28px; font-weight: 300; }
.cta:not(.primary) strong { font-size: 11px; }

.bottom { grid-column: 1 / 4; display: grid; grid-template-columns: 162px repeat(5, minmax(118px, 1fr)) 162px; gap: 8px; padding-left: 16px; }
.bottom button { border-radius: 6px; color: #b8cae0; font-size: 10px; font-weight: 900; display: flex; align-items: center; justify-content: center; gap: 9px; }
.bottom .icon { width: 13px; height: 13px; stroke-width: 1.9; }
.bottom button:hover { border-color: rgba(64, 154, 255, .64); box-shadow: 0 0 16px rgba(35, 134, 255, .28); }
.bottom b { min-width: 18px; height: 18px; display: inline-grid; place-items: center; border-radius: 10px; color: white; background: #1689ff; }
.bottom .danger { color: #ff7a80; background: linear-gradient(180deg, rgba(86, 16, 30, .85), rgba(40, 11, 21, .95)); border-color: rgba(255, 75, 89, .22); }

::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: rgba(8, 24, 44, .95); border-radius: 8px; }
::-webkit-scrollbar-thumb { background: linear-gradient(var(--blue), #28496c); border-radius: 8px; }

@media (max-width: 1180px) {
  .shell { min-width: 0; grid-template-columns: 170px 1fr; grid-template-rows: auto auto 55px; padding-right: 8px; overflow: auto; }
  .rightbar { grid-column: 2; grid-row: 2; grid-template-rows: auto; padding-top: 0; }
  .bottom { grid-column: 1 / 3; grid-template-columns: repeat(4, 1fr); }
  .content { grid-template-rows: auto 32px auto 155px 180px; }
  .tiles { grid-template-columns: repeat(4, 1fr); }
}