:root {
  color-scheme: dark;
  --bg: #050b12;
  --bg-2: #081521;
  --surface: rgba(13, 24, 37, .76);
  --surface-2: rgba(18, 34, 53, .66);
  --surface-3: rgba(27, 49, 77, .72);
  --line: rgba(117, 151, 184, .26);
  --line-soft: rgba(117, 151, 184, .14);
  --text: #f4f8fb;
  --muted: #9fb0c2;
  --muted-2: #708497;
  --accent: #51edc5;
  --accent-2: #42cfff;
  --accent-3: #76ff5f;
  --danger: #ff6f7a;
  --warning: #f4c768;
  --shadow: 0 24px 70px rgba(0, 0, 0, .36);
  --glow: 0 0 26px rgba(66, 207, 255, .18);
}

* { box-sizing: border-box; }

html { min-height: 100%; }

body {
  margin: 0;
  min-height: 100vh;
  background:
    linear-gradient(135deg, rgba(6, 13, 22, .96), rgba(7, 17, 29, .96)),
    url("/public/assets/scc-grid-bg.png") center / cover fixed no-repeat;
  color: var(--text);
  font: 14px/1.45 Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  letter-spacing: 0;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(90deg, rgba(81, 237, 197, .08), transparent 20%, transparent 78%, rgba(66, 207, 255, .10)),
    repeating-linear-gradient(0deg, rgba(255,255,255,.022) 0 1px, transparent 1px 92px),
    repeating-linear-gradient(90deg, rgba(255,255,255,.018) 0 1px, transparent 1px 92px);
  opacity: .82;
}

a { color: inherit; }
button, input, select { font: inherit; }

.icon {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
  flex: 0 0 auto;
}

.shell {
  position: relative;
  z-index: 1;
  min-height: 100vh;
  display: grid;
  grid-template-columns: 286px minmax(0, 1fr);
}

.shell-auth {
  display: block;
}

.shell-auth .main {
  min-height: 100vh;
  padding: 0;
}

.sidebar {
  position: sticky;
  top: 0;
  height: 100vh;
  border-right: 1px solid var(--line);
  background: linear-gradient(180deg, rgba(9, 19, 32, .92), rgba(7, 15, 25, .86));
  padding: 30px 22px 24px;
  display: flex;
  flex-direction: column;
  box-shadow: inset -1px 0 0 rgba(255,255,255,.03);
  backdrop-filter: blur(18px);
}

.brand {
  display: flex;
  gap: 14px;
  align-items: center;
  margin-bottom: 36px;
}

.brand strong, .brand small { display: block; }
.brand strong { font-size: 17px; line-height: 1.15; }
.brand small { color: var(--muted); }

.brand-mark {
  width: 42px;
  height: 42px;
  border-radius: 10px;
  background: linear-gradient(135deg, rgba(81, 237, 197, .96), rgba(66, 207, 255, .88));
  display: inline-block;
  position: relative;
  box-shadow: 0 0 26px rgba(66, 207, 255, .28);
}

.brand-mark::before,
.brand-mark::after {
  content: "";
  position: absolute;
  left: 10px;
  right: 10px;
  height: 8px;
  border: 2px solid rgba(5, 17, 29, .82);
  transform: skewY(-28deg);
}

.brand-mark::before { top: 10px; }
.brand-mark::after { bottom: 10px; }
.brand-mark-large { width: 58px; height: 58px; border-radius: 14px; }
.brand-mark-large::before { top: 16px; left: 14px; right: 14px; }
.brand-mark-large::after { bottom: 16px; left: 14px; right: 14px; }

nav {
  display: grid;
  gap: 10px;
}

nav a {
  position: relative;
  display: flex;
  align-items: center;
  gap: 15px;
  text-decoration: none;
  color: #c4d2df;
  padding: 14px 16px;
  border: 1px solid transparent;
  border-radius: 8px;
  transition: background .18s ease, border-color .18s ease, color .18s ease, transform .18s ease;
}

nav a::before {
  content: "";
  width: 3px;
  position: absolute;
  left: 0;
  top: 10px;
  bottom: 10px;
  border-radius: 99px;
  background: transparent;
}

nav a.active,
nav a:hover {
  background: linear-gradient(100deg, rgba(33, 74, 119, .74), rgba(23, 42, 66, .72));
  border-color: rgba(93, 172, 240, .22);
  color: var(--text);
  box-shadow: var(--glow);
}

nav a.active::before {
  background: linear-gradient(180deg, var(--accent), var(--accent-2));
  box-shadow: 0 0 18px rgba(81, 237, 197, .9);
}

nav .icon { color: #9bc8ff; }
nav a.active .icon, nav a:hover .icon { color: var(--accent-2); }

.sidebar-status {
  margin-top: auto;
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: linear-gradient(145deg, rgba(14, 29, 45, .76), rgba(8, 18, 30, .78));
  box-shadow: var(--shadow);
  overflow: hidden;
}

.sidebar-status strong,
.sidebar-status small {
  display: block;
}

.sidebar-status strong {
  margin: -17px 0 4px 22px;
}

.sidebar-status small {
  color: var(--muted);
  margin-left: 22px;
}

.status-wave {
  display: block;
  height: 44px;
  margin-top: 20px;
  background:
    linear-gradient(180deg, transparent 52%, rgba(66, 207, 255, .14)),
    url("data:image/svg+xml,%3Csvg width='220' height='44' viewBox='0 0 220 44' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 31 C12 31 14 20 24 20 C37 20 38 36 50 36 C61 36 62 14 74 14 C86 14 89 29 99 29 C110 29 111 16 121 16 C132 16 134 34 146 34 C158 34 158 17 170 17 C182 17 184 31 194 31 C205 31 208 20 220 20' fill='none' stroke='%2342cfff' stroke-width='2.5'/%3E%3Cpath d='M0 38 C12 38 14 26 24 26 C37 26 38 42 50 42 C61 42 62 20 74 20 C86 20 89 35 99 35 C110 35 111 22 121 22 C132 22 134 40 146 40 C158 40 158 23 170 23 C182 23 184 37 194 37 C205 37 208 26 220 26' fill='none' stroke='%2351edc5' stroke-opacity='.4' stroke-width='2'/%3E%3C/svg%3E") center / cover no-repeat;
}

.main {
  min-width: 0;
  padding: 30px 34px 22px;
}

.topbar {
  display: flex;
  gap: 18px;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 28px;
}

.topbar h1,
.auth-card h1 {
  margin: 0;
  font-size: 28px;
  line-height: 1.15;
  letter-spacing: 0;
}

.topbar p,
.panel-title p,
.muted {
  color: var(--muted);
  margin: 6px 0 0;
}

.top-actions {
  display: flex;
  align-items: center;
  gap: 14px;
}

.user-pill,
button,
.action,
.mini-link {
  border: 1px solid var(--line);
  background: linear-gradient(145deg, rgba(19, 34, 52, .78), rgba(11, 22, 35, .72));
  color: var(--text);
  border-radius: 8px;
  padding: 12px 15px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.04);
}

button,
.action,
.mini-link {
  cursor: pointer;
  text-decoration: none;
  transition: transform .18s ease, border-color .18s ease, background .18s ease;
}

button:hover,
.action:hover,
.mini-link:hover {
  border-color: rgba(81, 237, 197, .46);
  background: linear-gradient(145deg, rgba(28, 55, 83, .84), rgba(12, 28, 45, .78));
}

button:disabled {
  cursor: not-allowed;
  color: var(--muted);
  opacity: .68;
}

.user-pill,
.icon-button,
.action,
.mini-link,
.auth-assurance span {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

.status-dot,
.dot {
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: var(--accent);
  display: inline-block;
  box-shadow: 0 0 16px rgba(81, 237, 197, .74);
}

.dot.bad { background: var(--danger); box-shadow: 0 0 16px rgba(255, 111, 122, .65); }
.dot.ok { background: #65e69a; }

.primary {
  background: linear-gradient(135deg, #61f2ce, #4bd0ff);
  color: #06131d;
  border-color: transparent;
  font-weight: 850;
  box-shadow: 0 12px 32px rgba(75, 208, 255, .18);
}

.danger-button {
  color: #fff;
  background: rgba(74, 18, 26, .86);
  border-color: rgba(255, 111, 122, .42);
}

.dashboard-grid,
.grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 24px;
}

.panel {
  position: relative;
  background:
    linear-gradient(145deg, rgba(14, 29, 45, .74), rgba(8, 18, 30, .78)),
    rgba(11, 22, 35, .78);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 22px;
  min-width: 0;
  box-shadow: var(--shadow), inset 0 1px 0 rgba(255,255,255,.04);
  backdrop-filter: blur(18px);
  overflow: hidden;
}

.panel::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(130deg, rgba(66, 207, 255, .08), transparent 32%, rgba(81, 237, 197, .04));
}

.panel > * {
  position: relative;
  z-index: 1;
}

.span-4 { grid-column: span 4; }
.span-5 { grid-column: span 5; }
.span-7 { grid-column: span 7; }
.span-8 { grid-column: span 8; }
.span-2,
.full { grid-column: 1 / -1; }

.panel-head,
.panel-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}

.panel-title {
  justify-content: flex-start;
  margin-bottom: 24px;
}

.panel-title h2 {
  margin: 0;
  font-size: 18px;
}

.panel-icon {
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  border-radius: 8px;
  background: linear-gradient(145deg, rgba(46, 90, 139, .58), rgba(18, 48, 66, .58));
  color: var(--accent);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.05), 0 0 24px rgba(81, 237, 197, .12);
}

.panel-more {
  margin-left: auto;
  color: var(--muted);
}

.metric-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 14px;
}

.metric {
  min-height: 146px;
  display: grid;
  align-content: start;
  gap: 12px;
  padding: 18px;
  background: linear-gradient(150deg, rgba(18, 35, 55, .78), rgba(9, 20, 33, .68));
  border: 1px solid var(--line-soft);
  border-radius: 8px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.035);
  overflow: hidden;
}

.metric .icon {
  color: var(--accent-2);
  width: 24px;
  height: 24px;
}

.metric small,
.metric em,
.app-card small,
.deploy-card small,
.timeline span {
  color: var(--muted);
  display: block;
  font-style: normal;
}

.metric strong {
  display: block;
  margin: 2px 0 2px;
  font-size: 22px;
  line-height: 1.15;
  overflow-wrap: anywhere;
}

.metric::after {
  content: "";
  display: block;
  width: 100%;
  height: 26px;
  margin-top: auto;
  background:
    linear-gradient(180deg, transparent 50%, rgba(81, 237, 197, .12)),
    url("data:image/svg+xml,%3Csvg width='180' height='28' viewBox='0 0 180 28' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 19 L10 16 L17 20 L25 8 L34 18 L43 14 L52 21 L61 10 L70 17 L78 13 L88 19 L97 15 L106 17 L116 9 L125 18 L136 12 L147 20 L158 15 L169 19 L180 11' fill='none' stroke='%2351edc5' stroke-width='2'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
  opacity: .72;
}

.action-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.action {
  min-height: 86px;
  justify-content: center;
  font-weight: 750;
}

.action .icon {
  width: 28px;
  height: 28px;
  color: var(--accent-2);
}

.app-card,
.service-line,
.row {
  display: grid;
  align-items: center;
  gap: 14px;
  border-bottom: 1px solid var(--line-soft);
}

.app-card {
  grid-template-columns: 14px minmax(0, 1fr) auto;
  padding: 16px 12px;
  border: 1px solid var(--line-soft);
  border-bottom-color: var(--line-soft);
  background: rgba(8, 18, 30, .32);
}

.app-card:first-child { border-radius: 8px 8px 0 0; }
.app-card:last-child { border-radius: 0 0 8px 8px; }

.service-line {
  grid-template-columns: 14px minmax(0, 1fr) auto;
  padding: 11px 10px;
}

.row {
  grid-template-columns: 16px minmax(0, 1fr) auto minmax(0, 1.5fr);
  padding: 12px 0;
}

.app-card:last-child,
.service-line:last-child,
.row:last-child { border-bottom: 0; }

.service-line span:last-child {
  color: #65e69a;
}

.mini-link {
  min-width: 116px;
  justify-content: center;
  padding: 10px 14px;
}

.auth-panel {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 34px;
  background:
    linear-gradient(115deg, rgba(5, 11, 18, .74), rgba(6, 14, 23, .72)),
    url("/public/assets/scc-grid-bg.png") center / cover no-repeat;
}

.login-shell {
  width: min(670px, 100%);
  display: grid;
  gap: 32px;
  justify-items: center;
}

.auth-logo {
  display: flex;
  align-items: center;
  gap: 18px;
}

.auth-logo strong,
.auth-logo small {
  display: block;
  font-size: 26px;
  font-weight: 850;
  line-height: 1.05;
}

.auth-logo small {
  color: var(--accent);
}

.auth-card {
  width: min(100%, 620px);
  background: linear-gradient(145deg, rgba(13, 25, 38, .72), rgba(11, 21, 33, .74));
  border: 1px solid rgba(143, 176, 207, .30);
  border-radius: 8px;
  padding: 42px;
  box-shadow: var(--shadow), 0 0 80px rgba(81, 237, 197, .08);
  backdrop-filter: blur(18px);
}

.auth-card h1 {
  text-align: center;
  font-size: 32px;
}

.center { text-align: center; }

.auth-card.wide {
  width: min(100%, 540px);
  text-align: center;
}

.brand.large {
  justify-content: center;
  margin-bottom: 18px;
}

.stack {
  display: grid;
  gap: 18px;
  margin-top: 30px;
}

label {
  display: grid;
  gap: 8px;
  color: var(--text);
  text-align: left;
  font-weight: 650;
}

input,
select {
  width: 100%;
  min-height: 58px;
  color: var(--text);
  background: rgba(4, 12, 20, .72);
  border: 1px solid rgba(128, 159, 188, .34);
  border-radius: 8px;
  padding: 14px 16px;
  outline: none;
}

select { min-height: 46px; }

input:focus,
select:focus {
  border-color: rgba(81, 237, 197, .7);
  box-shadow: 0 0 0 3px rgba(81, 237, 197, .10);
}

input::placeholder { color: var(--muted-2); }

.wide-button {
  justify-content: center;
  min-height: 64px;
  font-size: 16px;
}

.auth-assurance {
  margin-top: 30px;
  padding-top: 24px;
  border-top: 1px solid var(--line-soft);
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
  justify-items: center;
  font-weight: 750;
}

.auth-assurance .icon { color: var(--accent); }

.error {
  color: var(--danger);
  text-align: center;
  background: rgba(255, 111, 122, .10);
  border: 1px solid rgba(255, 111, 122, .28);
  border-radius: 8px;
  padding: 10px 12px;
}

.qr {
  display: block;
  width: 240px;
  height: 240px;
  margin: 22px auto;
  border-radius: 8px;
  border: 10px solid #fff;
}

.secret {
  display: block;
  padding: 12px;
  margin-bottom: 16px;
  background: rgba(4, 12, 20, .72);
  border: 1px solid var(--line-soft);
  border-radius: 8px;
  overflow-wrap: anywhere;
}

.desktop-launch .panel-head {
  margin-bottom: 18px;
}

.remote-stage {
  position: relative;
  min-height: 640px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #010407;
  overflow: hidden;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.02);
}

.remote-stage:not(.connected) .remote-toolbar { display: none; }

.remote-stage.connected {
  position: fixed;
  inset: 0;
  z-index: 9999;
  width: 100vw;
  height: 100dvh;
  min-height: 100dvh;
  border: 0;
  border-radius: 0;
  margin: 0;
  padding: 0;
}

.remote-toolbar {
  height: 52px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 0 16px;
  background: rgba(8, 18, 30, .96);
  border-bottom: 1px solid var(--line);
  backdrop-filter: blur(16px);
}

.remote-frame {
  width: 100%;
  height: 640px;
  border: 0;
  display: block;
  background: #010407;
}

.remote-stage.connected .remote-frame { height: calc(100dvh - 52px); }
html.remote-active,
body.remote-active {
  width: 100%;
  height: 100%;
  overflow: hidden !important;
}

body.remote-active .remote-stage.connected {
  position: fixed !important;
  inset: 0 !important;
  z-index: 9999 !important;
}

body.remote-active .remote-stage.connected .remote-frame {
  width: 100vw !important;
  height: calc(100dvh - 52px) !important;
}

.logs,
.file-list {
  white-space: pre-wrap;
  overflow: auto;
  min-height: 360px;
  max-height: calc(100vh - 190px);
  background: rgba(4, 12, 20, .72);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 16px;
  color: #dce8ef;
}

.logs.compact {
  min-height: 180px;
  max-height: 360px;
}

.deploy-board {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}

.deploy-card {
  background: linear-gradient(150deg, rgba(18, 35, 55, .78), rgba(9, 20, 33, .68));
  border: 1px solid var(--line-soft);
  border-radius: 8px;
  padding: 18px;
  display: grid;
  gap: 12px;
}

.timeline {
  margin: 0;
  padding-left: 20px;
  display: grid;
  gap: 14px;
}

.timeline li { padding-left: 4px; }
.timeline strong,
.timeline span { display: block; }

.dashboard-footer {
  color: var(--muted);
  text-align: center;
  margin-top: 28px;
  padding: 18px 0 0;
  border-top: 1px solid var(--line-soft);
}

.dashboard-footer span::before {
  content: "•";
  padding: 0 10px;
}

.skeleton {
  min-height: 130px;
  border-radius: 8px;
  background:
    linear-gradient(90deg, transparent, rgba(255,255,255,.045), transparent),
    repeating-linear-gradient(90deg, rgba(20, 39, 59, .74), rgba(20, 39, 59, .74) 18px, rgba(26, 49, 73, .74) 18px, rgba(26, 49, 73, .74) 36px);
  background-size: 220px 100%, auto;
  animation: loading 1.3s linear infinite;
}

@keyframes loading {
  from { background-position: -220px 0, 0 0; }
  to { background-position: calc(100% + 220px) 0, 0 0; }
}

@media (max-width: 1260px) {
  .metric-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 1100px) {
  .deploy-board { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .span-4,
  .span-5,
  .span-7,
  .span-8 { grid-column: 1 / -1; }
}

@media (max-width: 920px) {
  .shell { grid-template-columns: 1fr; }
  .sidebar {
    position: relative;
    height: auto;
    border-right: 0;
    border-bottom: 1px solid var(--line);
  }
  .sidebar-status { display: none; }
  nav { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  nav a { justify-content: center; padding: 12px; }
  nav a span { display: none; }
  .main { padding: 24px 18px; }
  .metric-grid,
  .action-grid,
  .deploy-board,
  .auth-assurance { grid-template-columns: 1fr; }
  .topbar {
    align-items: flex-start;
    flex-wrap: wrap;
  }
  .auth-card { padding: 30px 22px; }
}

@media (max-width: 560px) {
  .auth-panel { padding: 18px; }
  .auth-logo strong,
  .auth-logo small { font-size: 22px; }
  .top-actions { width: 100%; justify-content: space-between; }
  .user-pill { min-width: 0; }
}