html {
  position: relative;
  min-height: 100%;
  height: 100%;
}

body {
  font: 14px "Lucida Grande", Helvetica, Arial, sans-serif;
  height: 100%;
  background: linear-gradient(135deg, #edf9ef 0%, #eef6ff 48%, #f8efe0 100%);
  color: #1d2a35;
}

body > .container {
  padding: 60px 15px 0;
}

.container .text-muted {
  margin: 20px 0;
}

body > .container-fluid {
  padding: 60px 15px 0;
}

.container-fluid .text-muted {
  margin: 20px 0;
}

input {
  font-family: monospace;
}

.well-success {
  background: rgb(223, 240, 216);
}

.well-error {
  background: rgb(250, 220, 220);
}

.github-ribbon {
  position: absolute;
  top: 0;
  left: 0;
  border: 0;
  z-index: 20000;
}

.page-header {
  border-bottom: 1px solid #dce6ef;
  margin-top: 0;
}

.navbar-inverse {
  background: linear-gradient(135deg, #174a35, #1b6a48);
  border-color: #16472d;
}

.navbar-inverse .navbar-brand,
.navbar-inverse .navbar-nav > li > a {
  color: #eefcf4;
}

.navbar-inverse .navbar-nav > .active > a,
.navbar-inverse .navbar-nav > .active > a:hover,
.navbar-inverse .navbar-nav > .active > a:focus {
  background: #0f4031;
  color: #fff;
}

.panel-demo {
  border-radius: 12px;
  overflow: hidden;
  border: 0;
  box-shadow: 0 8px 24px rgba(30, 99, 88, 0.12);
}

.panel-demo .panel-heading {
  background: #175f48;
  color: #fff;
  border: 0;
}

.panel-demo.panel-primary .panel-heading {
  background: linear-gradient(135deg, #185745, #2b8062);
}

.panel-demo.panel-success .panel-heading {
  background: linear-gradient(135deg, #146144, #1c7a45);
}

.panel-demo.panel-info .panel-heading {
  background: linear-gradient(135deg, #256785, #377986);
}

.panel-demo .panel-body {
  background: #fff;
}

.demo-hero {
  background: linear-gradient(120deg, #153f35, #255b59);
  color: white;
  padding: 26px 28px 24px;
  border-radius: 14px;
  margin-bottom: 24px;
  border: 1px solid rgba(255,255,255,0.25);
  box-shadow: 0 12px 35px rgba(25, 80, 75, 0.2);
}

.demo-hero h1 {
  font-size: 34px;
  margin-top: 8px;
  margin-bottom: 12px;
  color: #eefdf7;
}

.demo-hero .lead {
  color: white;
  font-size: 15px;
  opacity: 0.95;
}

.kicker {
  display: inline-block;
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  border-radius: 999px;
  padding: 6px 12px;
  background: rgba(255,255,255,0.15);
  color: #d8fff2;
}

.hero-actions {
  margin-top: 18px;
}

.hero-actions .btn {
  margin-right: 10px;
}

.status-card {
  background: rgba(255,255,255,0.08);
  border-radius: 12px;
  padding: 16px 18px;
  border: 1px solid rgba(255,255,255,0.16);
  min-height: 130px;
}

.status-header {
  display: flex;
  align-items: center;
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #bee1d0;
}

.status-dot {
  display: inline-block;
  width: 10px;
  height: 10px;
  margin-right: 8px;
  border-radius: 50%;
  background: #7affb5;
  animation: pulse 1.8s ease-out infinite;
}

.status-value {
  display: block;
  font-weight: bold;
  font-size: 38px;
  margin-top: 10px;
  color: white;
}

.status-subtitle {
  margin-top: 4px;
  font-size: 12px;
  color: #d6eee4;
}

.panel-demo textarea,
.panel-demo input {
  border-radius: 8px;
}

.live-toolbar {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 12px;
  color: #58736c;
  margin-bottom: 12px;
}

.live-title {
  font-weight: 700;
  color: #184934;
}

.live-badge {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #18b766;
  border: 2px solid #fff;
  display: inline-block;
}

.status-online {
  box-shadow: 0 0 0 0 rgba(24,183,102,0.6);
  animation: livePulse 2s infinite;
}

#lastSync {
  font-family: "Consolas", Monaco, monospace;
  color: #174f39;
}

.wakaf-page-header {
  background: linear-gradient(145deg, #deefe4, #eef8f1);
  padding: 20px 24px;
  border-radius: 12px;
  border-left: 5px solid #216b4d;
  margin-bottom: 20px;
}

.wakaf-page-header h1 {
  margin-top: 0;
  color: #174f39;
}

.wakaf-page-header .lead {
  color: #4d6a61;
  margin-bottom: 0;
}

.chain-strip {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 16px;
  padding: 12px 16px;
  border-radius: 10px;
  background: linear-gradient(90deg, #244b36, #1b6a45);
  color: #edfdf2;
  border: 1px solid #b1ead4;
}

.chain-strip .chain-title {
  font-weight: 700;
  letter-spacing: 0.06em;
}

.chain-status {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: #d2f0e1;
}

.node-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #a3ff73;
  border: 2px solid #fff;
  display: inline-block;
  animation: nodeBlink 1.2s infinite;
}

.chain-network {
  display: flex;
  align-items: center;
  gap: 5px;
  flex: 1;
}

.chain-network .chain-node {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  border: 2px solid #a1f3b4;
  background: transparent;
  display: inline-block;
  animation: nodeFlow 2s ease-in-out infinite;
}

.chain-network .chain-node:nth-child(2) { animation-delay: 150ms; }
.chain-network .chain-node:nth-child(3) { animation-delay: 300ms; }
.chain-network .chain-node:nth-child(4) { animation-delay: 450ms; }
.chain-network .chain-node:nth-child(5) { animation-delay: 600ms; }

.row-horizon .col-xs-7 {
  animation: chainCardIn 700ms ease both;
}

.row-horizon .col-xs-7:nth-child(1) { animation-delay: 100ms; }
.row-horizon .col-xs-7:nth-child(2) { animation-delay: 150ms; }
.row-horizon .col-xs-7:nth-child(3) { animation-delay: 200ms; }
.row-horizon .col-xs-7:nth-child(4) { animation-delay: 250ms; }
.row-horizon .col-xs-7:nth-child(5) { animation-delay: 300ms; }

.peer-orbit-summary {
  margin-bottom: 24px;
}

.peer-action-row {
  margin-bottom: 20px;
}

.peer-action-panel {
  background: linear-gradient(160deg, #f8fffa, #eefdf1);
  border-radius: 12px;
  padding: 16px;
  border: 1px solid #bccfbf;
  box-shadow: 0 8px 22px rgba(33, 95, 84, 0.11);
}

.peer-action-panel .panel-title {
  font-weight: 800;
  color: #174b38;
  font-size: 15px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  margin-bottom: 12px;
}

.peer-action-panel .form-group {
  margin-bottom: 12px;
}

.peer-action-panel label {
  font-size: 11px;
  font-weight: 700;
  color: #395d51;
}

.peer-action-panel #triggerClone {
  width: 100%;
  border-radius: 10px;
}

.clone-board {
  background: linear-gradient(135deg, #173d36, #1c563b);
  border-radius: 12px;
  padding: 14px;
  color: white;
  border: 1px solid #8dceb4;
}

.clone-board-head {
  display: flex;
  align-items: center;
  gap: 10px;
}

.board-icon {
  display: inline-block;
  width: 12px;
  height: 12px;
  border-radius: 999px;
  background: #eaff49;
  box-shadow: 0 0 0 4px rgba(255,255,255,0.2);
}

.board-title {
  font-weight: 800;
  color: #eefcf1;
}

.clone-board-content {
  margin-top: 12px;
}

.clone-status-main {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
}

.source-label {
  color: #afeed0;
}

.arrow-label {
  color: #fff;
  font-weight: 800;
}

#sourceText, #targetText {
  font-weight: 800;
}

.clone-status-detail {
  margin-top: 12px;
  font-size: 12px;
  color: #ccebd7;
}

.clone-board-footer {
  margin-top: 16px;
  display: flex;
  align-items: center;
  gap: 12px;
}

.orbit-stat {
  border-radius: 12px;
  background: linear-gradient(135deg, #184b39, #235c54);
  padding: 16px;
  color: #eefdf4;
  min-height: 96px;
  border: 1px solid rgba(255,255,255,0.3);
  box-shadow: inset 0 0 10px rgba(255,255,255,0.2);
}

.orbit-stat .orbit-label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.10em;
  color: #b8edc7;
}

.orbit-stat .orbit-value {
  display: block;
  margin-top: 12px;
  font-size: 30px;
  font-weight: 700;
}

.peer-grid {
  margin-bottom: 24px;
}

.peer-card {
  background: #fff;
  border-radius: 14px;
  padding: 20px;
  min-height: 330px;
  border: 1px solid #baded6;
  box-shadow: 0 10px 24px rgba(35, 95, 79, 0.10);
  margin-bottom: 20px;
  transition: transform 230ms ease, border-color 230ms ease, box-shadow 230ms ease;
}

.peer-card.peer-update {
  border-color: #e3ba39;
  box-shadow: 0 0 0 3px rgba(252, 210, 70, 0.3), 0 12px 24px rgba(35, 95, 79, 0.12);
}

.peer-card.peer-clone {
  border-color: #62c186;
  transform: translateY(-3px) scale(1.01);
}

.peer-head {
  display: flex;
  align-items: center;
  gap: 14px;
}

.peer-head h3 {
  margin: 0 0 4px;
  font-size: 24px;
  color: #114b38;
}

.peer-head small {
  color: #6a7d73;
}

.peer-icon {
  position: relative;
  width: 58px;
  height: 58px;
  border-radius: 12px;
  background: linear-gradient(135deg, #194c36, #2d7257);
  display: inline-flex;
  justify-content: center;
  align-items: center;
  border: 2px solid #b2ffc1;
}

.peer-icon:before {
  content: '';
  position: absolute;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 2px solid #d8fff2;
}

.server-slots {
  width: 22px;
  height: 22px;
  display: inline-block;
  border-radius: 50%;
  border: 2px solid #bdfbd0;
  background: #90e5b8;
}

.peer-server-status {
  display: flex;
  align-items: center;
  gap: 10px;
  padding-top: 10px;
  font-size: 11px;
  color: #7f8a85;
  border-top: 1px solid #e2ece7;
  margin-top: 14px;
}

.server-state {
  color: #0a7242;
  font-weight: 700;
}

.server-label {
  color: #173d36;
}

.server-role {
  padding: 4px 10px;
  border-radius: 999px;
  background: #dcf8e9;
  border: 1px solid #87ddac;
  color: #17603c;
}

.peer-chain {
  margin-top: 18px;
  display: flex;
  gap: 8px;
  align-items: center;
}

.peer-chain .chain-block {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  background: #eaffee;
  border-radius: 8px;
  border: 1px solid #88b99c;
  color: #1d5d42;
  font-size: 11px;
  font-weight: 700;
  animation: nodeFlow 2s ease-in-out infinite;
}

.peer-chain .chain-block:nth-child(2) { animation-delay: 120ms; }
.peer-chain .chain-block:nth-child(3) { animation-delay: 240ms; }
.peer-chain .chain-block:nth-child(4) { animation-delay: 360ms; }

.peer-clone-status {
  margin-top: 16px;
  padding-top: 12px;
  border-top: 1px dashed #b9d5cf;
}

.clone-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 11px;
  margin-bottom: 8px;
}

.clone-label {
  color: #70877d;
}

.clone-value {
  font-weight: 700;
  color: #184e39;
}

.peer-flow-stage {
  background: linear-gradient(135deg, #ecfff4, #d5efe6);
  border-radius: 12px;
  border: 1px solid #95cbb2;
  padding: 14px 16px;
  margin-bottom: 16px;
}

.peer-flow-title {
  font-size: 14px;
  font-weight: 800;
  letter-spacing: 0.10em;
  color: #174b38;
  text-transform: uppercase;
}

.peer-flow-body {
  margin-top: 12px;
}

.peer-flow-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}

.flow-node {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 6px 12px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 800;
  background: white;
  border: 1px solid #9dd2bd;
  color: #184d38;
}

.flow-node-bwi {
  background: #eaffbd;
}

.flow-node-kemenag {
  background: #daf2ff;
}

.flow-node-atr {
  background: #ffeecb;
}

.flow-line {
  height: 4px;
  width: 58px;
  background: repeating-linear-gradient(90deg, #879b8d 0 2px, transparent 2px 4px);
  position: relative;
}

.flow-line:after {
  content: '';
  position: absolute;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  top: -2px;
  left: 0;
  background: #40b875;
}

.flow-line.active {
  background: linear-gradient(90deg, #f7b928, #1aae58);
  animation: clonePulse 900ms ease-in-out infinite alternate;
}

.clone-flow-map {
  background: linear-gradient(135deg, #eefaf3, #e2f2e9);
  border: 1px solid #a5d9c8;
  border-radius: 12px;
  padding: 14px 16px;
  margin-bottom: 20px;
}

.flow-title {
  font-size: 14px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.10em;
  color: #174a38;
}

.flow-network {
  margin-top: 10px;
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.flow-peer {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 6px 14px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  background: #d8eee2;
  border: 1px solid #87b39a;
  color: #124b3a;
}

.flow-peer.flow-source {
  background: #ffc84d;
  color: #453101;
  border-color: #ba7f00;
}

.flow-peer.flow-target {
  background: #ecfff4;
}

.flow-arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  color: #194b39;
}

.flow-network.active .flow-arrow,
.flow-network.active .flow-peer {
  animation: clonePulse 900ms ease-in-out infinite alternate;
}

.clone-console {
  background: linear-gradient(180deg, #102b26, #175245);
  border-radius: 12px;
  padding: 14px 16px;
  color: #eefef5;
}

.clone-console-title {
  font-size: 15px;
  font-weight: 700;
  margin-bottom: 10px;
}

.clone-console-body {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}

.clone-log {
  flex: 1;
}

.clone-log-row {
  padding: 6px 0;
  font-size: 11px;
  color: #d5ffec;
}

.log-time {
  color: #b2e9ba;
  margin-right: 8px;
}

.clone-actions {
  white-space: nowrap;
}

.sync-badge {
  display: inline-block;
  border-radius: 999px;
  padding: 4px 12px;
  background: #a4ffbd;
  color: #08391d;
  font-size: 11px;
  font-weight: 700;
}

.sync-text {
  margin-left: 10px;
  font-size: 11px;
  color: #d1fce6;
}

.well-wakaf {
  background: linear-gradient(160deg, #fafffb, #eefafb);
  border-radius: 12px;
  border: 1px solid #c3ddd4;
  box-shadow: 0 12px 35px rgba(36, 95, 80, 0.10);
}

#hash {
  background: linear-gradient(180deg, #10251e, #253c34);
  color: #b9fdd2;
  font-family: "Consolas", "Lucida Console", monospace;
}

#hash.hash-updated {
  box-shadow: inset 0 0 0 2px #9dffbd, 0 0 12px rgba(94, 219, 129, 0.55);
  transition: box-shadow 200ms ease;
}

#hashPreview {
  white-space: pre-wrap;
  word-break: break-all;
  background: #eef6ff;
  color: #334;
  min-height: 120px;
  padding: 12px;
  border-radius: 4px;
}

.table-demo th {
  background: #215b42;
  color: white;
}

.table-demo td.hash-cell {
  font-family: "Consolas", Monaco, monospace;
  font-size: 12px;
  color: #0f5b46;
}

@keyframes pulse {
  70% {
    transform: scale(1.15);
    opacity: 0.75;
  }
}

@keyframes livePulse {
  70% {
    box-shadow: 0 0 0 8px transparent;
  }
}

@keyframes nodeBlink {
  50% { opacity: 0.5; transform: scale(1.1); }
}

@keyframes nodeFlow {
  50% { background: #9affcd; transform: scale(1.25); }
}

@keyframes chainCardIn {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes clonePulse {
  from { opacity: 0.75; transform: scale(1); }
  to { opacity: 1; transform: scale(1.08); }
}

.heartbeat {
  transform: scale(1.25);
  border-color: #fff;
}