* {
  box-sizing: border-box;
}

:root {
  color-scheme: dark;

  --night: #06131d;
  --deep: #081c28;
  --panel: #0c2530;
  --panel-2: #0e3038;
  --border: #214751;

  --text: #eef9f7;
  --muted: #8db1b0;

  --sea: #3fd7c8;
  --sea-2: #7ee7da;
  --sand: #e9cf8d;
  --sun: #ffad5a;
  --coral: #ff7b6b;
  --palm: #80d36b;
}

html,
body {
  min-height: 100%;
  margin: 0;

  background:
    radial-gradient(circle at 75% -15%, rgba(255, 173, 90, 0.10), transparent 32%),
    radial-gradient(circle at 20% 0%, rgba(63, 215, 200, 0.08), transparent 28%),
    var(--night);

  color: var(--text);
}

body {
  min-height: 100vh;

  font-family:
    "SFMono-Regular",
    Consolas,
    "Liberation Mono",
    Menlo,
    monospace;
}

button,
input {
  font: inherit;
}

.tiki-shell {
  width: min(1380px, calc(100% - 32px));
  margin: 0 auto;
  padding: 30px 0 24px;
}

.tiki-window {
  overflow: hidden;

  background: rgba(6, 19, 29, 0.97);

  border: 1px solid var(--border);
  border-radius: 14px;

  box-shadow:
    0 30px 100px rgba(0, 0, 0, 0.43),
    0 0 0 1px rgba(255, 255, 255, 0.015) inset;
}

.tiki-titlebar {
  height: 48px;

  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 12px;

  padding: 0 16px;

  background: #122934;
  border-bottom: 1px solid #21414a;
}

.window-buttons {
  display: flex;
  gap: 8px;
}

.window-dot {
  width: 12px;
  height: 12px;
  display: inline-block;
  border-radius: 50%;
}

a.window-dot {
  text-decoration: none;
  cursor: pointer;
}

.window-dot.red {
  background: #ff5f57;
}

.window-dot.yellow {
  background: #febc2e;
}

.window-dot.green {
  background: #28c840;
}

a.window-dot.red:hover,
a.window-dot.red:focus-visible {
  outline: 2px solid rgba(255, 95, 87, 0.35);
  outline-offset: 3px;
  transform: scale(1.08);
}

.tiki-title {
  color: #a9c4c4;
  font-size: 0.78rem;
}

.tiki-status {
  justify-self: end;

  display: flex;
  align-items: center;
  gap: 7px;

  color: var(--sea-2);

  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.06em;
}

.status-dot {
  width: 7px;
  height: 7px;

  border-radius: 50%;
  background: var(--sea);

  box-shadow: 0 0 12px rgba(63, 215, 200, 0.52);
}

.tiki-console {
  padding: 18px;

  background:
    linear-gradient(rgba(5, 17, 25, 0.94), rgba(5, 17, 25, 0.94)),
    repeating-linear-gradient(
      0deg,
      transparent 0 25px,
      rgba(255, 255, 255, 0.012) 25px 26px
    );
}

.beach-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 18px;

  margin-bottom: 16px;
  padding: 16px 18px;

  background:
    linear-gradient(105deg, rgba(14, 48, 56, 0.96), rgba(10, 34, 46, 0.90));

  border: 1px solid #214751;
  border-radius: 10px;
}

.eyebrow {
  color: var(--sea);

  font-size: 0.64rem;
  font-weight: 800;
  letter-spacing: 0.14em;
}

.beach-header h1 {
  margin: 5px 0 6px;

  color: #fff4d0;

  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(1.8rem, 4vw, 3rem);
  font-weight: 700;
}

.beach-header p {
  max-width: 700px;
  margin: 0;

  color: #a8c4c2;

  font-size: 0.75rem;
  line-height: 1.6;
}

.sun-disc {
  flex: 0 0 auto;

  width: 72px;
  height: 72px;

  display: grid;
  place-items: center;

  color: #3d2911;
  background: var(--sun);

  border-radius: 50%;

  font-size: 2rem;

  box-shadow:
    0 0 40px rgba(255, 173, 90, 0.18),
    0 0 0 10px rgba(255, 173, 90, 0.035);
}

.tiki-grid {
  display: grid;
  grid-template-columns: minmax(260px, 0.72fr) minmax(0, 1.5fr);
  gap: 13px;
}

.beach-dashboard,
.terminal-panel {
  min-width: 0;

  background: rgba(8, 28, 40, 0.92);

  border: 1px solid var(--border);
  border-radius: 9px;
}

.beach-dashboard {
  padding: 14px;
}

.dashboard-title {
  margin-bottom: 10px;

  color: var(--sand);

  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.12em;
}

.stat-row {
  display: flex;
  justify-content: space-between;
  gap: 12px;

  padding: 7px 0;

  border-bottom: 1px solid rgba(33, 71, 81, 0.55);

  font-size: 0.72rem;
}

.stat-row span {
  color: #81a5a5;
}

.stat-row strong {
  color: #e7f5f3;
}

.condition-card {
  margin: 14px 0;
  padding: 12px;

  background: rgba(255, 173, 90, 0.07);

  border: 1px solid rgba(255, 173, 90, 0.22);
  border-radius: 7px;
}

.condition-card span {
  display: block;

  margin-bottom: 5px;

  color: #aa9c73;

  font-size: 0.61rem;
  letter-spacing: 0.08em;
}

.condition-card strong {
  color: var(--sand);
}

.mini-bars {
  display: grid;
  gap: 9px;
}

.mini-bars > div {
  display: grid;
  grid-template-columns: 110px 1fr 38px;
  gap: 8px;
  align-items: center;

  color: #87a6a6;

  font-size: 0.62rem;
}

.bar {
  overflow: hidden;

  height: 8px;

  background: #071820;

  border: 1px solid #1d4249;
  border-radius: 99px;
}

.bar i {
  height: 100%;
  display: block;

  background: linear-gradient(90deg, #3fd7c8, #7ee7da);
}

.bar.warning i {
  background: linear-gradient(90deg, #ffad5a, #ff7b6b);
}

.mini-bars b {
  color: #bcd1ce;
  font-weight: 600;
  text-align: right;
}

.dashboard-note {
  margin-top: 14px;

  color: #587879;

  font-size: 0.61rem;
  line-height: 1.5;
}

.terminal-panel {
  overflow: hidden;

  display: flex;
  flex-direction: column;
}

.terminal-toolbar {
  display: flex;
  justify-content: space-between;
  gap: 12px;

  padding: 10px 12px;

  color: #77999a;
  background: #0d2731;

  border-bottom: 1px solid #1f4049;

  font-size: 0.66rem;
}

.terminal-output {
  flex: 1 1 auto;

  min-height: 420px;
  max-height: 570px;
  overflow-y: auto;

  padding: 15px;

  color: #d7e8e6;
  background: #031015;

  font-size: 12px;
  line-height: 1.5;
}

.output-line {
  margin: 0 0 3px;

  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.output-command {
  margin-top: 8px;
  color: var(--sea-2);
}

.output-muted {
  color: #678788;
}

.output-sand {
  color: var(--sand);
}

.output-coral {
  color: var(--coral);
}

.output-green {
  color: var(--palm);
}

.terminal-input-row {
  display: flex;
  align-items: center;
  gap: 9px;

  min-height: 48px;

  padding: 9px 14px;

  background: #06171e;
  border-top: 1px solid #1f4049;
}

.terminal-prompt {
  color: var(--sea);

  font-size: 0.72rem;
  white-space: nowrap;
}

.terminal-input-row input {
  flex: 1 1 auto;
  min-width: 0;

  color: #f1f8f7;
  background: transparent;

  border: 0;
  outline: none;

  caret-color: var(--sea);
}

.quick-commands {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;

  padding: 9px 10px;

  background: #081b23;
  border-top: 1px solid #173740;
}

.quick-commands button {
  min-height: 32px;
  padding: 5px 8px;

  color: #8fb2b1;
  background: #0b242d;

  border: 1px solid #234751;
  border-radius: 6px;

  cursor: pointer;

  font-size: 0.62rem;
}

.quick-commands button:hover {
  color: var(--sea-2);
  border-color: #3a7d83;
}

.tiki-footer {
  display: flex;
  justify-content: center;
  gap: 18px;
  flex-wrap: wrap;

  margin-top: 13px;

  color: #547475;

  font-size: 0.62rem;
}

.tiki-note {
  margin: 12px 0 0;

  color: #557576;

  font-size: 0.68rem;
  text-align: center;
}

@media (max-width: 900px) {
  .tiki-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 650px) {
  .tiki-shell {
    width: min(100% - 18px, 1380px);
    padding-top: 12px;
  }

  .tiki-titlebar {
    padding: 0 10px;
  }

  .tiki-title {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }

  .tiki-console {
    padding: 11px;
  }

  .beach-header {
    align-items: flex-start;
  }

  .sun-disc {
    width: 52px;
    height: 52px;
    font-size: 1.4rem;
  }

  .mini-bars > div {
    grid-template-columns: 92px 1fr 34px;
  }

  .terminal-input-row {
    align-items: flex-start;
    flex-direction: column;
  }

  .terminal-input-row input {
    width: 100%;
  }
}


/* RunsLinux shared Labs workstation shell */
@media (min-width: 901px) {
  html, body { width: 100%; height: 100%; overflow: hidden; }
  body.rl-has-site-nav { background: #080d13; }
  .tiki-shell {
    position: relative !important;
    width: 100vw !important;
    max-width: none !important;
    height: calc(100vh - 54px) !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    background: url('/assets/terminal-workstation.webp') center top / cover no-repeat !important;
  }
  .tiki-shell > .tiki-window {
    position: absolute !important;
    left: 19.65% !important;
    top: 5.75% !important;
    width: 62.75% !important;
    height: 60.45% !important;
    min-height: 0 !important;
    max-height: none !important;
    margin: 0 !important;
    overflow: auto !important;
    border-radius: 10px !important;
    z-index: 3 !important;
    box-shadow: none !important;
  }
  .tiki-shell > :not(.tiki-window) { display: none !important; }
}

/* Workstation fit pass v1.1: keep the full Tiki Terminal inside the monitor. */
@media (min-width: 901px) {
  .tiki-shell > .tiki-window { overflow: hidden !important; display: flex !important; flex-direction: column !important; }
  .tiki-titlebar { flex: 0 0 42px !important; height: 42px !important; }
  .tiki-console { flex: 1 1 auto !important; min-height: 0 !important; height: auto !important; overflow: auto !important; padding: 10px 12px 12px !important; }
  .beach-header { margin-bottom: 8px !important; }
  .beach-header p { margin-bottom: 6px !important; }
  .tiki-grid { min-height: 0 !important; gap: 10px !important; }
  .terminal-panel { min-height: 0 !important; }
  .terminal-output { min-height: 180px !important; max-height: none !important; }
}