:root {
  color: #19213d;
  background: #eef3ff;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  min-height: 100vh;
  background:
    radial-gradient(circle at 12% 8%, rgba(112, 139, 255, 0.26), transparent 26%),
    radial-gradient(circle at 88% 14%, rgba(85, 213, 190, 0.24), transparent 30%),
    linear-gradient(135deg, #f8fbff 0%, #edf3ff 48%, #e8f1ff 100%);
}

button, a { font: inherit; }
button { cursor: pointer; }

.app-shell {
  min-height: 100vh;
  display: grid;
  grid-template-columns: 76px 320px minmax(0, 1fr);
}

.rail {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
  padding: 22px 12px;
  background: #ffffffcc;
  border-right: 1px solid rgba(111, 130, 180, 0.18);
  backdrop-filter: blur(18px);
}

.brand-mark {
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border-radius: 16px;
  color: white;
  font-weight: 900;
  letter-spacing: -0.05em;
  background: linear-gradient(135deg, #7b61ff, #36d2b6);
  box-shadow: 0 18px 42px rgba(90, 99, 255, 0.28);
}

.rail-icon {
  width: 44px;
  height: 44px;
  border: 0;
  border-radius: 15px;
  color: #72809f;
  background: transparent;
}

.rail-icon.active,
.rail-icon:hover {
  color: #3154ff;
  background: #eef2ff;
}

.wallet-panel {
  padding: 26px;
  background: rgba(255, 255, 255, 0.72);
  border-right: 1px solid rgba(111, 130, 180, 0.18);
  backdrop-filter: blur(22px);
}

.brand-row,
.topbar,
.panel-heading,
.account-topline,
.top-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.eyebrow {
  margin: 0 0 6px;
  color: #7a88a8;
  text-transform: uppercase;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.14em;
}

h1, h2, h3, p { margin-top: 0; }
h1 { margin-bottom: 0; font-size: 24px; line-height: 1.1; }
h2 { margin-bottom: 0; font-size: 30px; letter-spacing: -0.04em; }
h3 { margin-bottom: 0; font-size: 18px; }

.status-dot,
.feature-status,
.risk {
  display: inline-flex;
  align-items: center;
  height: 28px;
  padding: 0 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 800;
}

.status-dot,
.feature-status { color: #3154ff; background: #edf1ff; }

.account-card,
.panel,
.balance-card,
.metric-card {
  border: 1px solid rgba(111, 130, 180, 0.18);
  border-radius: 28px;
  background: rgba(255, 255, 255, 0.82);
  box-shadow: 0 20px 60px rgba(65, 78, 128, 0.12);
}

.account-card {
  margin: 24px 0;
  padding: 22px;
  background: linear-gradient(145deg, #22305b, #11172c);
  color: white;
  box-shadow: 0 22px 60px rgba(24, 35, 78, 0.28);
}

.account-card p { color: #aebbe2; }
.account-card strong { font-size: 21px; }

.account-actions {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin-top: 18px;
}

.account-actions button,
.primary,
.secondary,
.ghost-button {
  border: 0;
  border-radius: 14px;
  padding: 10px 14px;
  font-weight: 800;
}

.account-actions button,
.primary {
  color: white;
  background: linear-gradient(135deg, #6f64ff, #35ceb4);
}

.secondary { color: #3154ff; background: #eef2ff; }
.ghost-button { color: #647194; background: #f3f6ff; }
.account-card .ghost-button { color: white; background: rgba(255, 255, 255, 0.12); }

.side-list { display: grid; gap: 10px; }
.side-list a {
  display: flex;
  justify-content: space-between;
  padding: 14px 16px;
  color: #62708f;
  text-decoration: none;
  border-radius: 16px;
}
.side-list a.active,
.side-list a:hover { color: #24345f; background: #f2f5ff; }

.content {
  min-width: 0;
  padding: 30px;
  overflow: auto;
}

.topbar { margin-bottom: 24px; }

.hero-grid {
  display: grid;
  grid-template-columns: 1.5fr repeat(2, minmax(180px, 0.7fr));
  gap: 16px;
  margin-bottom: 16px;
}

.balance-card,
.metric-card,
.panel { padding: 22px; }
.balance-card { color: white; background: linear-gradient(145deg, #4e64ff, #8c62ff); }
.balance-card p,
.balance-card span { color: rgba(255, 255, 255, 0.76); }
.balance-card strong { display: block; font-size: 42px; letter-spacing: -0.05em; }
.metric-card strong { display: block; font-size: 36px; letter-spacing: -0.04em; }
.metric-card p,
.metric-card span { color: #7a88a8; }
.metric-card.warning strong { color: #ff7a45; }

.two-column {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(320px, 0.9fr);
  gap: 16px;
  margin-bottom: 16px;
}

.asset-list,
.approval-list,
.activity-list,
.settings-grid,
.feature-grid { margin-top: 18px; }

.asset-row,
.approval-row,
.activity-row {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 0;
  border-top: 1px solid #edf1fb;
}

.asset-row:first-child,
.approval-row:first-child,
.activity-row:first-child { border-top: 0; }

.coin-mark {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  color: white;
  font-weight: 900;
  border-radius: 50%;
  background: linear-gradient(135deg, #35ceb4, #3154ff);
}

.asset-row span,
.approval-row span,
.activity-row small { display: block; color: #8390ad; }
.asset-value { margin-left: auto; text-align: right; }

.risk.high,
.risk.critical { color: #b94b18; background: #fff0e8; }
.risk.medium { color: #8a6500; background: #fff6d8; }
.risk.low { color: #147a58; background: #e5fbf3; }

.settings-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}
.settings-grid div {
  padding: 14px;
  border-radius: 16px;
  background: #f7f9ff;
}
.settings-grid span { display: block; color: #7d89a5; font-size: 12px; }

.vault-form {
  margin-top: 18px;
  padding-top: 18px;
  border-top: 1px solid #edf1fb;
}
.vault-form label {
  display: block;
  margin-bottom: 8px;
  color: #4a5878;
  font-weight: 800;
}
.vault-row { display: flex; gap: 8px; }
.vault-row input {
  min-width: 0;
  flex: 1;
  border: 1px solid #dfe6f7;
  border-radius: 14px;
  padding: 10px 12px;
  color: #24345f;
  background: #f8faff;
}
.vault-form small {
  display: block;
  margin-top: 10px;
  color: #7d89a5;
  overflow-wrap: anywhere;
}

.feature-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 12px;
}
.feature-card {
  padding: 16px;
  border-radius: 20px;
  background: #f8faff;
  border: 1px solid #edf1fb;
}
.feature-card strong { display: block; margin: 12px 0 8px; }
.feature-card p { color: #6c7895; margin-bottom: 0; }
.doc-link { color: #3154ff; text-decoration: none; font-weight: 800; }

@media (max-width: 1080px) {
  .app-shell { grid-template-columns: 68px 1fr; }
  .wallet-panel { display: none; }
  .hero-grid,
  .two-column { grid-template-columns: 1fr; }
}


.terminal-panel { margin-bottom: 16px; }
.terminal-form { margin-top: 18px; display: grid; gap: 12px; }
.terminal-form input { width: 100%; border: 1px solid #dfe6f6; border-radius: 14px; padding: 12px 14px; color: #253052; background: #f8faff; font: 14px/1.4 ui-monospace, SFMono-Regular, Consolas, monospace; }
.terminal-form pre { min-height: 120px; margin: 0; padding: 16px; border-radius: 18px; color: #b9fbcf; background: #12182b; white-space: pre-wrap; overflow: auto; font: 13px/1.5 ui-monospace, SFMono-Regular, Consolas, monospace; }


.settings-form { margin-top: 18px; padding-top: 16px; border-top: 1px solid #edf1fb; display: grid; gap: 8px; }
.settings-form label { color: #62708f; font-weight: 800; }
.settings-form select { flex: 1; min-width: 0; border: 1px solid #dfe6f6; border-radius: 14px; padding: 11px 12px; color: #253052; background: #f8faff; }


.ssh-grid { margin-top: 18px; display: grid; grid-template-columns: 1fr 0.7fr 1.2fr; gap: 10px; }
.ssh-grid input { min-width: 0; border: 1px solid #dfe6f6; border-radius: 14px; padding: 12px 14px; color: #253052; background: #f8faff; }
.runtime-output { min-height: 100px; margin: 12px 0 0; padding: 16px; border-radius: 18px; color: #b9fbcf; background: #12182b; white-space: pre-wrap; overflow: auto; font: 13px/1.5 ui-monospace, SFMono-Regular, Consolas, monospace; }
@media (max-width: 720px) { .ssh-grid { grid-template-columns: 1fr; } }