.logs-page {
  background:
    radial-gradient(circle at 88% 7%, rgba(51, 119, 101, .11), transparent 30rem),
    linear-gradient(180deg, #f4f7f6, #f7f8fc 38%);
}

.logs-page main { padding-bottom: 18px; }
.logs-intro { margin-bottom: 17px; }

.log-status-strip {
  display: grid;
  min-height: 78px;
  grid-template-columns: minmax(160px, 1.25fr) repeat(4, minmax(82px, .62fr)) minmax(190px, 1fr);
  align-items: center;
  gap: 0;
  overflow: visible;
  padding: 10px 12px;
  border-color: #dfe8e5;
  background: rgba(255, 255, 255, .86);
}

.log-live-state { display: flex; align-items: center; gap: 11px; min-width: 0; padding: 9px 13px; }
.log-live-dot { width: 10px; height: 10px; flex: 0 0 10px; border-radius: 50%; background: #b8c0bd; box-shadow: 0 0 0 5px rgba(184, 192, 189, .13); }
.is-ready .log-live-dot { background: #3db58b; box-shadow: 0 0 0 5px rgba(61, 181, 139, .13); animation: breathe 2.2s ease-in-out infinite; }
.log-live-state > div, .log-strip-metric { display: grid; min-width: 0; gap: 3px; }
.log-live-state small, .log-strip-metric small { color: #a3aeaa; font-family: var(--font-mono); font-size: 7px; font-weight: 800; letter-spacing: .11em; }
.log-live-state strong { overflow: hidden; color: #63736e; font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.is-ready .log-live-state strong { color: #358064; }
.log-strip-metric { min-height: 38px; justify-content: center; padding: 0 13px; border-left: 1px solid #edf1f0; }
.log-strip-metric strong { color: #4e5f5a; font-family: var(--font-mono); font-size: 15px; font-weight: 650; letter-spacing: -.04em; }
.log-tail-control { display: flex; align-items: center; justify-content: flex-end; gap: 8px; padding: 0 8px 0 15px; border-left: 1px solid #edf1f0; }
.log-tail-control label { display: flex; align-items: center; gap: 7px; color: #71807b; font-size: 9px; cursor: pointer; }
.log-tail-control input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.log-tail-control label span { display: flex; width: 27px; height: 16px; align-items: center; padding: 2px; border-radius: 99px; background: #d8dfdd; transition: background .2s; }
.log-tail-control label span::after { width: 12px; height: 12px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(18, 35, 31, .18); content: ""; transition: transform .2s; }
.log-tail-control input:checked + span { background: #46af89; }
.log-tail-control input:checked + span::after { transform: translateX(11px); }
.log-tail-control button { min-height: 29px; padding: 0 10px; border: 1px solid #dde5e2; border-radius: 7px; color: #6c7b76; background: #f7faf9; font-family: var(--font-mono); font-size: 8px; font-weight: 700; }
.log-tail-control button:hover:not(:disabled) { color: #315e50; border-color: #c9ddd6; background: #eef7f3; }
.log-tail-control button.is-paused { color: #bc744f; border-color: #f0d6c9; background: #fff5ef; }

.log-console {
  margin-top: 14px;
  overflow: hidden;
  border-color: #26363b;
  border-radius: 18px;
  background: #10181c;
  box-shadow: 0 25px 55px rgba(20, 36, 39, .2);
}

.log-console-toolbar { display: flex; min-height: 58px; align-items: center; gap: 10px; padding: 10px 13px; border-bottom: 1px solid #253238; background: #182226; }
.log-window-dots { display: flex; flex: 0 0 auto; gap: 5px; padding: 0 4px; }
.log-window-dots i { display: block; width: 8px; height: 8px; border-radius: 50%; background: #dc7c62; }
.log-window-dots i:nth-child(2) { background: #d9b85b; }.log-window-dots i:nth-child(3) { background: #4da77f; }
.log-search { display: flex; min-width: 190px; flex: 1; align-items: center; gap: 7px; padding: 0 10px; border: 1px solid #2c3b40; border-radius: 8px; color: #607177; background: #111a1e; }
.log-search:focus-within { border-color: #427867; box-shadow: 0 0 0 3px rgba(62, 142, 113, .12); }
.log-search .icon { width: 13px; height: 13px; }
.log-search input { width: 100%; min-height: 31px; border: 0; outline: 0; color: #d1dfda; background: transparent; font-family: var(--font-mono); font-size: 9px; }
.log-search input::placeholder { color: #59676b; }
.log-level-tabs { display: flex; align-items: center; gap: 3px; padding: 3px; border: 1px solid #2b393e; border-radius: 8px; background: #111a1e; }
.log-level-tabs button { min-height: 25px; padding: 0 7px; border: 0; border-radius: 5px; color: #78888c; background: transparent; font-family: var(--font-mono); font-size: 7px; font-weight: 800; }
.log-level-tabs button b { margin-left: 3px; color: #57666a; font-weight: 600; }
.log-level-tabs button:hover:not(:disabled) { color: #aebfba; }
.log-level-tabs button.active { color: #9ed7c1; background: #263a34; }
.log-level-tabs button.active b { color: #70aa94; }
.log-console-toolbar select { min-height: 33px; max-width: 150px; padding: 0 25px 0 9px; border: 1px solid #2c3b40; border-radius: 8px; outline: 0; color: #8c9b9e; background: #111a1e; font-family: var(--font-mono); font-size: 8px; }
.log-icon-button { display: grid; width: 32px; height: 32px; flex: 0 0 32px; place-items: center; border: 1px solid #2c3b40; border-radius: 8px; color: #8d9b9d; background: #111a1e; font-size: 14px; }
.log-icon-button:hover:not(:disabled) { color: #a9deca; border-color: #3c685a; background: #182923; transform: rotate(24deg); }

.terminal-frame { position: relative; min-height: clamp(460px, 63vh, 760px); overflow: hidden; background: #10181c; }
.terminal-watermark { position: absolute; z-index: 0; right: 25px; bottom: 21px; display: grid; justify-items: end; color: rgba(106, 148, 135, .07); pointer-events: none; }
.terminal-watermark span { font-size: clamp(42px, 7vw, 92px); font-weight: 850; letter-spacing: -.08em; line-height: .75; }
.terminal-watermark b { margin-top: 13px; font-family: var(--font-mono); font-size: 8px; letter-spacing: .3em; }
#logTerminal { position: absolute; z-index: 1; inset: 0; padding: 17px 18px; }
#logTerminal .xterm { height: 100%; }
#logTerminal .xterm-viewport { scrollbar-color: #34464b #11191d; scrollbar-width: thin; }
#logTerminal .xterm-screen { min-width: 0; }

.log-console-footer { display: grid; min-height: 36px; grid-template-columns: minmax(150px, .8fr) minmax(0, 1.4fr) auto; align-items: center; gap: 12px; padding: 0 17px; border-top: 1px solid #253238; color: #5d6b6f; background: #151f23; font-family: var(--font-mono); font-size: 7px; }
.log-console-footer > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.log-console-footer > span:first-child { display: flex; align-items: center; gap: 6px; color: #71827e; }
.footer-live-dot { width: 6px; height: 6px; border-radius: 50%; background: #566469; }
.is-ready .footer-live-dot { background: #42b184; box-shadow: 0 0 0 4px rgba(66, 177, 132, .1); }
.log-console-footer > span:nth-child(2) { text-align: center; }
.log-console-footer > span:last-child { text-align: right; }

.logs-page.is-ready .sidebar-status .status-dot { background: #3db58b; }

@container workspace (max-width: 1120px) {
  .log-status-strip { grid-template-columns: minmax(150px, 1fr) repeat(4, minmax(70px, .58fr)); }
  .log-tail-control { grid-column: 1 / -1; justify-content: flex-start; padding: 9px 13px 4px; border-top: 1px solid #edf1f0; border-left: 0; }
  .log-console-toolbar { flex-wrap: wrap; }
  .log-search { flex: 1 1 350px; }
  .log-level-tabs { order: 3; flex: 1 1 auto; }
  .log-level-tabs button { flex: 1; }
}

@container workspace (max-width: 700px) {
  .log-status-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .log-live-state { grid-column: 1 / -1; border-bottom: 1px solid #edf1f0; }
  .log-strip-metric { justify-content: start; padding: 10px 13px; border-left: 0; border-bottom: 1px solid #edf1f0; }
  .log-strip-metric:nth-of-type(even) { border-left: 1px solid #edf1f0; }
  .log-tail-control { grid-column: 1 / -1; }
  .log-window-dots { width: 100%; }
  .log-search { min-width: 100%; }
  .log-level-tabs { width: 100%; }
  .log-console-toolbar select { flex: 1; max-width: none; }
  .terminal-frame { min-height: 520px; }
  #logTerminal { padding: 13px 10px; }
  .log-console-footer { grid-template-columns: 1fr; gap: 5px; padding: 9px 13px; }
  .log-console-footer > span:nth-child(2), .log-console-footer > span:last-child { text-align: left; }
}