/* styles.css - minimal, tweak to taste */
:root {

  /* COLORS */
  --color-bg: #D9D9D9;
  --color-danger: #DF4140;
  --color-accent: #E37323;
  --color-dark-blue: #1a1f35;
  --color-highlight: #f1ee00;
  --color-select: #4F96E9;
  --color-grey-10: #1A1A1A;
  --color-grey-20: #333333;
  --color-grey-30: #4D4D4D;
  --color-grey-40: #666666;
  --color-grey-50: #808080;
  --color-grey-60: #999999;
  --color-grey-70: #B2B2B2;
  --color-grey-80: #CCCCCC;
  --color-grey-90: #E5E5E5;
  --color-grey-93: #EDEDED;
  --color-white: #FFFFFF;

  /* GAPS & PADDINGS */
  --xs: 3px;
  --sm: 6px;
  --md: 9px;
  --lg: 12px;
  --xl: 15px;
  --xxl: 18px;
  --xxxl: 27px;

  /* TRANSITIONS */
  --transition-fast: all cubic-bezier(0.165, 0.84, 0.44, 1) 0.1s;
  --transition-medium: all cubic-bezier(0.165, 0.84, 0.44, 1) 0.2s;
  --transition-slow: all cubic-bezier(0.165, 0.84, 0.44, 1) 0.3s;

  /* BORDER RADIUSES */
  --br-xs: var(--xs);
  --br-sm: var(--sm);
  --br-md: var(--md);
  --br-lg: var(--lg);
  --br-xl: var(--xl);
  --br-xxl: var(--xxl);
  --br-xxxl: var(--xxxl);

  /* BORDERS */
  --border-default: 1px solid var(--color-grey-70);
  --border-light: 1px solid var(--color-grey-80);
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  font-size: 14px;
  background: var(--color-bg);
  color: var(--color-grey-10);
}

a {
  color: var(--color-grey-10);
  text-decoration: none;
}

a:hover {
  color: var(--color-accent);
}

.gap-xs {
  gap: var(--xs);
}

.gap-sm {
  gap: var(--sm);
}

.gap-md {
  gap: var(--md);
}

.gap-lg {
  gap: var(--lg);
}

.gap-xl {
  gap: var(--xl);
}

.header {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--lg) var(--xl);
  color: var(--color-grey-10);
}

.header .brand {
  font-weight: 700;
  letter-spacing: .2px;
}

.wrap {
  max-width: 780px;
  margin: var(--xxl) auto;
  padding: 0 var(--lg);
}

.panel {
  background: var(--color-white);
  border: 1px solid var(--color-grey-70);
  border-radius: var(--br-xxl);
  padding: var(--lg);
}

.myrow {
  width: 100%;
  padding: var(--lg) 0;
  padding-left: var(--md);
}

.myrow:first-child {
  padding-top: 0;
}

.myrow:not(:last-child) {
  border-bottom: 1px solid var(--color-bg);
}

.indicator {
  display: inline-block;
  width: 10px;
  height: 20px;
  border-radius: var(--br-xs);
  background: var(--color-grey-70);
  flex-shrink: 0;
}

.dot {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--color-grey-70);
  flex-shrink: 0;
}

.dot.red,
.indicator.red {
  background: var(--color-danger);
  box-shadow: 0 0 12px rgba(231, 76, 60, .7);
}

.dot.gray,
.indicator.gray {
  background: var(--color-bg);
}

/* fresh (<24h) */
.dot.green {
  background: #2ecc71;
}

/* recent (1–7d) */
.dot.yellow {
  background: #f1c40f;
}

.small {
  font-size: 12px;
}

.mono {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

.error-log-actions {
  display: flex;
  gap: var(--md);
  width: 100%;
}

.btn,
.btn:visited {
  position: relative;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  min-width: 40px;
  width: auto;
  height: 40px;
  line-height: 1em;
  font-weight: normal;
  text-align: center;
  white-space: nowrap;
  cursor: pointer;
  user-select: none;
  padding: 0 var(--xl);
  margin: 0;
  font-size: 16px;
  color: var(--color-white);
  border: 1px solid;
  border-color: var(--color-grey-70);
  border-radius: var(--br-md);
  background-color: var(--color-grey-70);
  transform: translate3d(0, 0, 0);
  transition: var(--transition-fast);
  outline: none;
  -webkit-appearance: none !important;
  appearance: none;
}

a.btn {
  color: var(--color-white);
}

.btn-outline,
.btn-outline:visited {
  color: var(--color-grey-60);
  background-color: transparent;
}

.btn:hover {
  color: var(--color-white);
  background-color: var(--color-grey-30);
  border-color: var(--color-grey-30);
}

.btn-grey {
  border-color: var(--color-grey-70);
  background-color: var(--color-grey-70);
}

.btn-black,
.btn-black:visited {
  color: var(--color-white);
  border-color: var(--color-grey-10);
  background-color: var(--color-grey-10);
}

.form {
  max-width: 360px;
  margin: 48px auto;
  padding: 20px;
  background: var(--color-white);
  border: 1px solid var(--color-grey-70);
  border-radius: 10px;
}

.form h1 {
  margin: 0 0 16px;
}

.input {
  width: 100%;
  padding: 10px 12px;
  margin: 10px 0 14px;
  border: 1px solid var(--color-grey-70);
  background: var(--color-grey-90);
  color: var(--color-grey-10);
  border-radius: 8px;
}

@media (max-width: 768px) {
  .myrow {
    padding-left: 0;
  }

  .error-log-actions {
    margin-top: var(--lg);
  }
}