<!-- eslint-disable vue/max-attributes-per-line -->
<template>
  <div
    id="screen"
    class="qa-screen"
    :style="{
      width: `${style.width}px`,
      height: `${style.height}px`,
      transform: style.transform
    }"
  >
    <div class="title-png">
      <span class="title-text">产线通讯信号可视化监控看板</span>
      <div class="df-header__right">
        <div class="df-header__timebar">
          <span class="df-header__year">{{ headerDateCn }}</span>
          <span class="df-header__time">{{ headerTime }}</span>
        </div>
      </div>
    </div>
    <div class="leftLine"></div>
    <div class="rightLine"></div>

    <div class="main-content">
      <iframe v-if="iframeAddress" allowtransparency="true" class="model-bg-frame" :src="iframeAddress" title="三维模型"></iframe>
      <div v-else class="model-placeholder">等待配置三维模型地址</div>

      <div class="left-box qa-scroll">
        <section class="qa-panel qa-panel--combined">
          <div class="left-title-header">
            <span class="left-title-text">线体联动监控</span>
          </div>
          <div class="qa-panel-body qa-scroll">
            <div v-for="row in lineMonitorRows" :key="row.name" class="monitor-card">
              <div class="monitor-head">
                <div class="monitor-title">
                  <strong>{{ row.name }}</strong>
                  <p>{{ row.summary }}</p>
                </div>
                <span class="status-pill" :class="`status-pill--${row.type}`">{{ row.status }}</span>
              </div>

              <div class="monitor-main">
                <div class="monitor-task">
                  <span>任务流向</span>
                  <strong>{{ row.start }} -> {{ row.end }}</strong>
                  <p>{{ row.recipe }} / {{ row.pallet }} / {{ row.part }}</p>
                </div>
                <div class="monitor-signals">
                  <div v-for="signal in row.signals" :key="signal.label" class="signal-item">
                    <span class="dot" :class="`dot--${signal.color}`"></span>
                    <span>{{ signal.label }}</span>
                  </div>
                </div>
              </div>

              <div class="monitor-flow">
                <span class="monitor-flow-label">反馈流程</span>
                <div class="steps">
                  <span v-for="step in row.steps" :key="step.label" class="step" :class="`step--${step.state}`">
                    {{ step.label }}
                  </span>
                </div>
              </div>
            </div>
          </div>
        </section>
      </div>

      <div class="right-box qa-scroll">
        <section class="qa-panel">
          <div class="right-title-header">
            <span class="right-title-text">加工设备状态</span>
          </div>
          <div class="qa-panel-body qa-scroll">
            <div
              v-for="item in equipmentList"
              :key="item.name"
              class="equipment-row"
              :class="{ 'equipment-row--alarm': item.type === 'alarm' }"
            >
              <strong class="equipment-name">{{ item.name }}</strong>
              <div class="equipment-program">
                <span>目标</span>
                <b>{{ item.target }}</b>
              </div>
              <div class="equipment-program">
                <span>实际</span>
                <b>{{ item.actual }}</b>
              </div>
              <div class="equipment-tags">
                <span v-for="tag in item.tags" :key="tag.text" class="status-pill status-pill--compact" :class="`status-pill--${tag.type}`">
                  {{ tag.text }}
                </span>
              </div>
              <span class="status-pill equipment-status" :class="`status-pill--${item.type}`">{{ item.status }}</span>
            </div>
          </div>
        </section>

        <section class="qa-panel">
          <div class="right-title-header">
            <span class="right-title-text">辅助设备状态</span>
          </div>
          <div class="qa-panel-body qa-scroll">
            <div class="assist-grid">
              <div v-for="item in assistList" :key="item.name" class="assist-card">
                <div class="assist-title">
                  <strong>{{ item.name }}</strong>
                  <span class="status-pill" :class="`status-pill--${item.type}`">{{ item.status }}</span>
                </div>
                <div class="assist-flow">
                  <span v-for="tag in item.tags" :key="tag.text" class="status-pill status-pill--compact" :class="`status-pill--${tag.type}`">
                    {{ tag.text }}
                  </span>
                </div>
              </div>
            </div>
          </div>
        </section>
      </div>

      <div class="bottom-box">
        <section class="qa-panel">
          <div class="center-title-header">
            <span>物料库位矩阵</span>
          </div>
          <div class="qa-panel-body qa-panel-body--storage">
            <div class="storage-groups">
              <div v-for="group in storageGroups" :key="group.name" class="storage-card">
                <div class="storage-head">
                  <strong>{{ group.name }}</strong>
                  <span>{{ group.filled }} / {{ group.total }}</span>
                </div>
                <div class="slots">
                  <span v-for="slot in group.slots" :key="slot.name" class="slot" :class="{ 'slot--filled': slot.filled }">
                    {{ slot.name }}
                  </span>
                </div>
              </div>
            </div>
          </div>
        </section>

        <section class="qa-panel">
          <div class="center-title-header">
            <span>报警与异常事件</span>
          </div>
          <div class="qa-panel-body qa-scroll">
            <div v-for="event in alarmEvents" :key="event.time + event.device" class="event-row">
              <span>{{ event.time }}</span>
              <strong>{{ event.device }}</strong>
              <span class="status-pill" :class="`status-pill--${event.type}`">{{ event.level }}</span>
              <p>{{ event.message }}</p>
            </div>
          </div>
        </section>

        <section class="qa-panel">
          <div class="center-title-header">
            <span>任务日志</span>
          </div>
          <div class="qa-panel-body qa-scroll">
            <div v-for="log in taskLogs" :key="log.time + log.text" class="log-row">
              <span>{{ log.time }}</span>
              <p>{{ log.text }}</p>
            </div>
          </div>
        </section>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'DaLuJiaTV1',
  data() {
    return {
      style: {
        width: 1920,
        height: 1080,
        transform: 'scaleY(1) scaleX(1) translate(-50%, -50%)'
      },
      headerDateCn: '',
      headerTime: '',
      iframeAddress: '',
      clockTimer: null,
      resizeHandler: null,
      lineMonitorRows: [
        {
          name: '长地轨',
          summary: '自动模式 / 允许接任务 / PCS 在线',
          status: '执行中',
          type: 'on',
          start: '01',
          end: '06',
          recipe: 'RCP-01',
          pallet: 'Pallet-A',
          part: '长轴',
          signals: [
            { label: 'PCS 运行', color: 'green' },
            { label: '允许接任务', color: 'green' },
            { label: '自动模式', color: 'green' },
            { label: '急停未触发', color: 'gray' }
          ],
          steps: [
            { label: 'FLAG', state: 'done' },
            { label: 'READY', state: 'done' },
            { label: 'BUSY', state: 'active' },
            { label: 'COMPLETE', state: 'idle' }
          ]
        },
        {
          name: '短地轨',
          summary: '自动模式 / 允许接任务 / PCS 在线',
          status: '准备就绪',
          type: 'ok',
          start: '03',
          end: '09',
          recipe: 'RCP-09',
          pallet: 'Pallet-C',
          part: '短轴',
          signals: [
            { label: 'PCS 运行', color: 'green' },
            { label: '允许接任务', color: 'green' },
            { label: '自动模式', color: 'green' },
            { label: '急停未触发', color: 'gray' }
          ],
          steps: [
            { label: 'FLAG', state: 'done' },
            { label: 'READY', state: 'active' },
            { label: 'BUSY', state: 'idle' },
            { label: 'COMPLETE', state: 'idle' }
          ]
        },
        {
          name: '关节机器人',
          summary: '人工确认中 / 自动待恢复 / PCS 在线',
          status: '异常中断',
          type: 'alarm',
          start: '02',
          end: '04',
          recipe: 'RCP-11',
          pallet: 'Pallet-B',
          part: '长轴',
          signals: [
            { label: 'PCS 运行', color: 'green' },
            { label: '允许接任务', color: 'green' },
            { label: '自动待恢复', color: 'yellow' },
            { label: '急停未触发', color: 'gray' }
          ],
          steps: [
            { label: 'FLAG', state: 'done' },
            { label: 'READY', state: 'done' },
            { label: 'BUSY', state: 'error' },
            { label: 'COMPLETE', state: 'idle' }
          ]
        }
      ],
      equipmentList: [
        { name: 'F500', target: '1202', actual: '1202', status: '正常', type: 'ok', tags: [{ text: '上料完成', type: 'ok' }, { text: '下料完成', type: 'ok' }, { text: '运行中', type: 'on' }] },
        { name: 'L2000LSY', target: '2206', actual: '2206', status: '正常', type: 'ok', tags: [{ text: '上料完成', type: 'ok' }, { text: '下料完成', type: 'ok' }, { text: '待命', type: 'idle' }] },
        { name: 'L2100SY', target: '3301', actual: '3298', status: '预警', type: 'warn', tags: [{ text: '程序待同步', type: 'warn' }, { text: '运行中', type: 'on' }] },
        { name: '新日', target: '4108', actual: '4108', status: '正常', type: 'ok', tags: [{ text: '上料就绪', type: 'ok' }, { text: '下料等待', type: 'idle' }, { text: '运行中', type: 'on' }] },
        { name: 'MAZAK', target: '-', actual: '-', status: '异常', type: 'alarm', tags: [{ text: '上料就绪', type: 'ok' }, { text: '运行中', type: 'on' }, { text: '报警', type: 'alarm' }] },
        { name: 'YKD5132H', target: '5104', actual: '5104', status: '正常', type: 'ok', tags: [{ text: '上料就绪', type: 'ok' }, { text: '下料就绪', type: 'ok' }, { text: '待命', type: 'idle' }] }
      ],
      assistList: [
        { name: '打标机', status: '待机中', type: 'ok', tags: [{ text: '开机中', type: 'ok' }, { text: 'START=0', type: 'idle' }, { text: 'BUSY=0', type: 'idle' }] },
        { name: '清洗机', status: '打标完成保持', type: 'on', tags: [{ text: '开机中', type: 'ok' }, { text: 'START 已触发', type: 'warn' }, { text: 'BUSY=1', type: 'on' }] },
        { name: '桁架', status: '待命', type: 'idle', tags: [{ text: '开机中', type: 'ok' }, { text: '等待任务', type: 'idle' }, { text: 'IDLE=1', type: 'idle' }] },
        { name: '测量仪', status: '运行中', type: 'on', tags: [{ text: '上料就绪', type: 'ok' }, { text: 'BUSY=1', type: 'on' }, { text: '等待下料', type: 'idle' }] },
        { name: '复测工位', status: '错误', type: 'alarm', tags: [{ text: '复测等待', type: 'warn' }, { text: 'ERROR=1', type: 'alarm' }, { text: '下料未就绪', type: 'idle' }] }
      ],
      storageGroups: [
        {
          name: 'A 库区',
          total: 9,
          filled: 6,
          slots: this.createSlots(['S1', 'S2', 'S4', 'S6', 'S7', 'S9'], 9)
        },
        {
          name: 'B 库区',
          total: 9,
          filled: 6,
          slots: this.createSlots(['S1', 'S3', 'S4', 'S6', 'S8', 'S9'], 9)
        },
        {
          name: 'C 库区',
          total: 6,
          filled: 4,
          slots: this.createSlots(['S1', 'S3', 'S5', 'S6'], 6)
        }
      ],
      alarmEvents: [
        { time: '10:26', device: 'MAZAK', level: '严重', type: 'alarm', message: 'ALARM=1，建议定位机床侧运行条件。' },
        { time: '10:22', device: '测量仪', level: '严重', type: 'alarm', message: '测量流程中断，等待复测确认。' },
        { time: '10:18', device: 'L2100SY', level: '警告', type: 'warn', message: '目标程序与实际程序不一致。' },
        { time: '10:12', device: '关节机器人', level: '警告', type: 'warn', message: '自动模式待恢复，需要人工确认。' }
      ],
      taskLogs: [
        { time: '10:31', text: '长地轨从 01 工位向 06 工位搬运，机器人保持 BUSY。' },
        { time: '10:29', text: '短地轨任务已下发，READY=1，等待进入 BUSY。' },
        { time: '10:24', text: '关节机器人在测量仪工位异常中断，ERROR=1。' },
        { time: '10:21', text: 'F500 上料完成，L2000LSY 下料完成，任务链路继续派发。' }
      ]
    }
  },
  mounted() {
    this.iframeAddress = window.dt_Config && window.dt_Config.iframeAddress ? window.dt_Config.iframeAddress : ''
    this.updateTime()
    this.setScale()
    this.clockTimer = setInterval(this.updateTime, 1000)
    this.resizeHandler = () => this.setScale()
    window.addEventListener('resize', this.resizeHandler)
  },
  beforeDestroy() {
    if (this.clockTimer) {
      clearInterval(this.clockTimer)
      this.clockTimer = null
    }
    if (this.resizeHandler) {
      window.removeEventListener('resize', this.resizeHandler)
      this.resizeHandler = null
    }
  },
  methods: {
    createSlots(filledNames, total) {
      return Array.from({ length: total }, (_, index) => {
        const name = `S${index + 1}`
        return {
          name,
          filled: filledNames.includes(name)
        }
      })
    },
    setScale() {
      const scaleX = window.innerWidth / this.style.width
      const scaleY = window.innerHeight / this.style.height
      this.style.transform = `scaleY(${scaleY}) scaleX(${scaleX}) translate(-50%, -50%)`
    },
    updateTime() {
      const now = new Date()
      const pad = value => String(value).padStart(2, '0')
      this.headerDateCn = `${now.getFullYear()}-${pad(now.getMonth() + 1)}-${pad(now.getDate())}`
      this.headerTime = `${pad(now.getHours())}:${pad(now.getMinutes())}:${pad(now.getSeconds())}`
    }
  }
}
</script>

<style>
html,
body,
#app {
  margin: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: #06101f;
}
</style>

<style scoped>
.qa-screen {
  position: fixed;
  left: 50%;
  top: 50%;
  transform-origin: 0 0;
  overflow: hidden;
  color: #e8f3ff;
  font-family: "Microsoft YaHei", "PingFang SC", "Segoe UI", sans-serif;
  background: #06101f url("/png/背景底图.png") no-repeat center center;
  background-size: cover;
}

.qa-screen::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 25% 22%, rgba(42, 151, 255, 0.18), transparent 28%),
    radial-gradient(circle at 74% 26%, rgba(39, 217, 128, 0.08), transparent 26%),
    linear-gradient(180deg, rgba(2, 9, 22, 0.35), rgba(3, 13, 31, 0.66));
  pointer-events: none;
}

.title-png {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 40;
  width: 100%;
  height: 100px;
  background-image: url("/png/top1.png");
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  pointer-events: none;
  display: flex;
  justify-content: center;
}

.title-text {
  margin-right: 37px;
  color: #fff;
  font-size: 37px;
  font-weight: 700;
  line-height: 70px;
  text-align: center;
  text-shadow: 0 0 18px rgba(97, 215, 255, 0.45);
}

.df-header__right {
  position: absolute;
  top: 30px;
  right: 30px;
  width: 236px;
}

.df-header__timebar {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 18px;
  color: #ffffff;
}

.df-header__year {
  font-size: 16px;
  opacity: 0.9;
}

.df-header__time {
  font-size: 22px;
  font-weight: 700;
}

.leftLine,
.rightLine {
  position: absolute;
  top: 50px;
  z-index: 30;
  width: 54px;
  height: 1020px;
  background-size: 100% 100%;
  background-position: center;
  pointer-events: none;
}

.leftLine {
  left: 10px;
  background-image: url("/png/左边条.png");
}

.rightLine {
  right: 10px;
  background-image: url("/png/右边条.png");
}

.main-content {
  position: absolute;
  z-index: 2;
  left: 64px;
  right: 64px;
  top: 100px;
  bottom: 26px;
}

.model-bg-frame {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  background: transparent;
  z-index: 1;
}

.model-placeholder {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #77d9ff;
  font-size: 24px;
  background: radial-gradient(circle at center, rgba(37, 111, 184, 0.24), rgba(4, 12, 28, 0.92));
}

.left-box {
  position: absolute;
  top: 0;
  left: 0;
  width: 360px;
  bottom: 260px;
  z-index: 10;
  overflow-y: auto;
}

.right-box {
  position: absolute;
  top: 0;
  right: 0;
  width: 360px;
  bottom: 260px;
  z-index: 10;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.bottom-box {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 248px;
  z-index: 10;
  display: grid;
  grid-template-columns: 1.2fr 1fr 1fr;
  gap: 12px;
}

.left-box .qa-panel {
  height: 100%;
  display: flex;
  flex-direction: column;
}

.right-box .qa-panel:first-child {
  flex: 1;
  min-height: 0;
}

.right-box .qa-panel:last-child {
  flex-shrink: 0;
  height: 236px;
}

.qa-panel {
  min-height: 0;
  overflow: hidden;
  border: 1px solid rgba(91, 180, 255, 0.36);
  background: linear-gradient(180deg, rgba(17, 52, 98, 0.68) 0%, rgba(7, 26, 56, 0.72) 100%);
  box-shadow:
    inset 0 0 22px rgba(37, 111, 184, 0.25),
    0 10px 30px rgba(0, 0, 0, 0.26);
}

.qa-panel-body {
  height: calc(100% - 42px);
  padding: 10px 12px 12px;
  box-sizing: border-box;
}

.qa-panel-body--storage {
  padding: 8px 10px 10px;
}

.qa-scroll {
  overflow: auto;
}

.qa-scroll::-webkit-scrollbar {
  width: 6px;
}

.qa-scroll::-webkit-scrollbar-thumb {
  background: rgba(111, 212, 255, 0.22);
}

.left-title-header,
.right-title-header,
.center-title-header {
  height: 42px;
  display: flex;
  align-items: center;
  padding: 0 18px;
  box-sizing: border-box;
}

.left-title-header {
  justify-content: flex-start;
  background: url("/png/left.png") no-repeat center center;
  background-size: 100% 100%;
}

.right-title-header {
  justify-content: flex-end;
  padding-right: 24px;
  background: url("/png/right.png") no-repeat center center;
  background-size: 100% 100%;
}

.center-title-header {
  border-bottom: 1px solid rgba(114, 206, 255, 0.16);
  background: linear-gradient(90deg, rgba(25, 72, 128, 0.45), rgba(8, 24, 46, 0.12));
}

.left-title-text,
.right-title-text,
.center-title-header span {
  color: #ffffff;
  font-size: 17px;
  font-weight: 700;
}

.right-title-text {
  text-align: right;
}

.status-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 3px 9px;
  border-radius: 999px;
  color: #aac4d8;
  background: rgba(255, 255, 255, 0.06);
  font-size: 12px;
  white-space: nowrap;
}

.status-pill--compact {
  padding: 2px 7px;
  font-size: 11px;
}

.status-pill--ok {
  color: #8effc2;
  background: rgba(39, 217, 128, 0.18);
}

.status-pill--on {
  color: #9be7ff;
  background: rgba(49, 166, 255, 0.18);
}

.status-pill--warn {
  color: #ffe08b;
  background: rgba(243, 198, 78, 0.18);
}

.status-pill--alarm {
  color: #ff98a3;
  background: rgba(255, 93, 108, 0.18);
}

.status-pill--idle {
  color: #b6c7d5;
  background: rgba(255, 255, 255, 0.06);
}


.monitor-card,
.equipment-row,
.assist-card,
.storage-card,
.event-row,
.log-row {
  border: 1px solid rgba(114, 206, 255, 0.16);
  background: rgba(5, 20, 44, 0.66);
  box-shadow: inset 0 0 14px rgba(42, 133, 205, 0.12);
}

.monitor-card {
  margin-bottom: 10px;
  padding: 11px 12px;
}

.monitor-head,
.assist-title,
.storage-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
}

.monitor-title strong {
  display: block;
  color: #fff;
  font-size: 18px;
}

.monitor-title p,
.monitor-task p {
  margin: 4px 0 0;
  color: #9fc3dc;
  font-size: 12px;
  line-height: 1.4;
}

.monitor-main {
  margin-top: 10px;
  display: grid;
  grid-template-columns: 128px minmax(0, 1fr);
  gap: 10px;
  align-items: start;
}

.monitor-task {
  padding: 8px 9px;
  background: rgba(0, 0, 0, 0.24);
}

.monitor-task span,
.monitor-flow-label,
.equipment-program span,
.storage-head span {
  color: #9fc3dc;
  font-size: 12px;
}

.monitor-task strong {
  display: block;
  margin-top: 6px;
  color: #fff;
  font-size: 20px;
}

.monitor-signals {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px 10px;
}

.signal-item {
  display: flex;
  align-items: center;
  gap: 7px;
  min-width: 0;
  color: #cde5f7;
  font-size: 13px;
}

.dot {
  flex: 0 0 auto;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.04);
}

.dot--green { background: #2be085; }
.dot--blue { background: #35b2ff; }
.dot--yellow { background: #f3c64e; }
.dot--red { background: #ff5d6c; }
.dot--gray { background: #5b6d81; }

.monitor-flow {
  margin-top: 12px;
}

.steps {
  margin-top: 8px;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}

.step {
  position: relative;
  padding-top: 21px;
  color: #9fc3dc;
  font-size: 11px;
  text-align: center;
}

.step::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  width: 12px;
  height: 12px;
  transform: translateX(-50%);
  border-radius: 50%;
  background: #5b6d81;
}

.step--done::before {
  background: #2be085;
  box-shadow: 0 0 12px rgba(39, 217, 128, 0.45);
}

.step--active::before {
  background: #35b2ff;
  box-shadow: 0 0 12px rgba(49, 166, 255, 0.55);
}

.step--error::before {
  background: #ff5d6c;
  box-shadow: 0 0 12px rgba(255, 93, 108, 0.5);
}

.equipment-row {
  display: grid;
  grid-template-columns: 72px 48px 48px minmax(0, 1fr) 60px;
  align-items: center;
  gap: 8px;
  min-height: 52px;
  margin-bottom: 8px;
  padding: 8px 10px;
}

.equipment-row--alarm {
  border-color: rgba(255, 93, 108, 0.4);
  background: rgba(64, 8, 20, 0.48);
}

.equipment-name {
  min-width: 0;
  color: #fff;
  font-size: 13px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.equipment-program {
  display: flex;
  flex-direction: column;
}

.equipment-program b {
  margin-top: 4px;
  color: #fff;
  font-size: 13px;
}

.equipment-tags,
.assist-flow {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  min-width: 0;
}

.equipment-status {
  justify-self: end;
}

.assist-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.assist-card {
  padding: 11px;
  min-height: 92px;
}

.assist-title {
  margin-bottom: 10px;
}

.storage-groups {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  align-items: start;
}

.storage-card {
  min-width: 0;
  padding: 9px;
}

.storage-head {
  margin-bottom: 8px;
}

.slots {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-auto-rows: 30px;
  gap: 6px;
}

.slot {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 30px;
  color: #9fc3dc;
  border: 1px solid rgba(114, 206, 255, 0.14);
  background: rgba(255, 255, 255, 0.03);
  font-size: 12px;
}

.slot--filled {
  color: #e8fbff;
  background: linear-gradient(180deg, rgba(49, 166, 255, 0.26), rgba(39, 217, 128, 0.2));
  box-shadow: inset 0 0 0 1px rgba(126, 233, 255, 0.18);
}

.event-row {
  display: grid;
  grid-template-columns: 48px 74px 48px 1fr;
  align-items: center;
  gap: 8px;
  min-height: 38px;
  margin-bottom: 8px;
  padding: 8px 10px;
  font-size: 12px;
}

.event-row p,
.log-row p {
  margin: 0;
  color: #d5edf8;
  line-height: 1.35;
}

.log-row {
  display: grid;
  grid-template-columns: 52px 1fr;
  gap: 8px;
  margin-bottom: 8px;
  padding: 9px 10px;
  font-size: 12px;
}

.event-row > span:first-child,
.log-row > span {
  color: #65ddff;
  font-weight: 700;
}
</style>
