:root{
  --max-width: 1200px;
  --container-padding: 1rem;
  /* layout-specific variables (do not override theme tokens in tokens.css) */
  --ui-radius: 8px;
  --ui-gap: 1rem;
  --ui-fs-base: 1rem;
}

/* grid helpers */
.grid { display: grid; gap: var(--gap); }
.grid.auto-fit-240 { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }

.container { padding: var(--container-padding); width:100%; max-width:var(--max-width); margin-left:auto; margin-right:auto; box-sizing:border-box; }
.card { max-width: var(--max-width); margin: 10px auto; padding: 1.25rem 1.5rem; border: 1px solid var(--border); border-radius: var(--ui-radius); background: var(--surface); color: var(--text); }
.node-state-box {
    margin-left: auto;     /* <-- pushes it fully to the RIGHT */
    display: flex;
    align-items: center;
    gap: 12px;
}

.node-state-box .small {
    opacity: 0.65;
    font-size: 0.85em;
}

.logo { text-align: center; margin-bottom: 1px; }
.logo img { max-width: 150px; width: 100%; height: auto; display: inline-block; filter: drop-shadow(0 2px 6px rgba(0,0,0,.35)); }
   
/* Utilities */
.row { display:flex; gap:var(--ui-gap); align-items:center; flex-wrap:wrap; }
.col { flex:1 1 0; min-width:0; }
.btn { padding: .5rem .75rem; border-radius:6px; border:1px solid var(--border); background:var(--surface-2); color:var(--text); cursor:pointer; font-weight:600; }
.btn-primary { background:var(--primary); color:var(--text); border-color:var(--primary-600); }
.small { font-size:.875rem; color:var(--muted); }

/* table wrapper for horizontal scroll on small devices */
.table-wrap { 
   width:100%; overflow:auto; 
   -webkit-overflow-scrolling:touch; 
    border: 2px solid #00aeffdd;
    border-radius: 0 9px 9px 9px;
}
.table-wrapper { 
   width:100%; overflow:auto; 
   -webkit-overflow-scrolling:touch; 
}

img { max-width:100%; height:auto; display:block; }

/* Narrow card modifier for pages that need a smaller centered card */
.card--narrow { max-width: 640px; }

/* Note variants */
.note { margin: .5rem 0; }
.note--warning { color: var(--warning); }

/* Mobile media queries */
@media (max-width: 767px) {
  :root {
    --container-padding: 0.75rem;
  }
  
  .card {
    margin: 8px auto;
    padding: 1rem 1rem;
  }
  
  .btn, button {
    width: 100%;
    text-align: center;
  }
  
  .row {
    flex-direction: column;
  }
  
  .footer-inner {
    flex-direction: column;
    align-items: flex-start;
  }
}