/* 叮格考研 · 备考周期数据大屏 V3 电视投屏版 */

:root{
  --navy:#071633;
  --navy2:#0f2a5c;
  --blue:#1f5cff;
  --cyan:#35c7ff;
  --line:rgba(31,92,255,.16);
  --text:#102033;
  --muted:#667085;
  --red:#e84d4d;
  --orange:#f5a524;
  --green:#19b37b;
  --shadow:0 20px 58px rgba(7,22,51,.12);
}

*{box-sizing:border-box}

html,
body{
  margin:0;
  width:100%;
  height:100%;
  overflow:hidden;
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Microsoft YaHei",Arial,sans-serif;
  background:#eaf2ff;
  color:var(--text);
}

body:before{
  content:"";
  position:fixed;
  inset:0;
  z-index:0;
  background:
    radial-gradient(circle at 14% 12%,rgba(31,92,255,.16),transparent 24%),
    radial-gradient(circle at 84% 12%,rgba(53,199,255,.16),transparent 24%),
    linear-gradient(180deg,#ffffff 0%,#edf4ff 52%,#e5eefb 100%);
}

body:after{
  content:"";
  position:fixed;
  inset:-18%;
  z-index:0;
  opacity:.38;
  background:repeating-linear-gradient(120deg,transparent 0 130px,rgba(31,92,255,.07) 131px,transparent 133px);
}

.tv-screen{
  position:relative;
  z-index:1;
  width:100vw;
  height:100vh;
  padding:18px 22px 16px;
  display:grid;
  grid-template-rows:158px 1fr 34px;
  gap:14px;
}

.fullscreen-btn{
  position:fixed;
  z-index:20;
  top:18px;
  right:22px;
  border:0;
  border-radius:999px;
  padding:12px 18px;
  background:var(--navy);
  color:#fff;
  font-size:14px;
  font-weight:900;
  cursor:pointer;
  box-shadow:0 16px 40px rgba(7,22,51,.22);
  transition:opacity .28s ease, transform .28s ease;
}

body.is-idle .fullscreen-btn{
  opacity:0;
  transform:translateY(-10px);
  pointer-events:none;
}

.screen-header{
  display:grid;
  grid-template-columns:1.12fr 3.35fr;
  gap:16px;
  min-height:0;
}

.brand-panel{
  border-radius:22px;
  background:linear-gradient(135deg,var(--navy),var(--navy2));
  color:#fff;
  padding:17px 20px;
  box-shadow:var(--shadow);
  position:relative;
  overflow:hidden;
}

.brand-panel:after{
  content:"";
  position:absolute;
  right:-56px;
  top:-70px;
  width:160px;
  height:160px;
  border-radius:50%;
  background:rgba(53,199,255,.26);
  filter:blur(18px);
}

.brand-eyebrow,
.brand-panel h1,
.brand-panel p,
.brand-meta{
  position:relative;
  z-index:1;
}

.brand-eyebrow{
  color:rgba(255,255,255,.66);
  font-size:12px;
  font-weight:900;
  letter-spacing:.06em;
  margin-bottom:8px;
}

.brand-panel h1{
  margin:0;
  font-size:27px;
  letter-spacing:-.045em;
  font-weight:950;
}

.brand-panel p{
  margin:7px 0 0;
  color:rgba(255,255,255,.74);
  font-size:12px;
  line-height:1.42;
}

.brand-meta{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  margin-top:10px;
}

.brand-meta span{
  border-radius:999px;
  background:rgba(255,255,255,.12);
  border:1px solid rgba(255,255,255,.16);
  padding:6px 9px;
  color:rgba(255,255,255,.88);
  font-size:11px;
}

.kpi-grid{
  display:grid;
  grid-template-columns:repeat(5,1fr);
  gap:12px;
}

.kpi-card{
  padding:16px 16px;
  border-radius:22px;
  background:rgba(255,255,255,.92);
  border:1px solid var(--line);
  box-shadow:var(--shadow);
  position:relative;
  overflow:hidden;
  backdrop-filter:blur(18px);
}

.kpi-card:before{
  content:"";
  position:absolute;
  left:0;
  top:0;
  width:100%;
  height:3px;
  background:linear-gradient(90deg,transparent,var(--blue),var(--cyan),transparent);
}

.kpi-card small{
  display:block;
  color:var(--muted);
  font-size:12px;
  margin-bottom:6px;
}

.kpi-card strong{
  display:block;
  color:var(--navy);
  font-size:31px;
  line-height:1;
  letter-spacing:-.055em;
}

.kpi-blue strong{color:var(--blue)}
.kpi-red strong{color:var(--red)}

.kpi-card p{
  margin:8px 0 0;
  color:var(--muted);
  font-size:11px;
  line-height:1.35;
}

.screen-main{
  min-height:0;
  display:grid;
  grid-template-columns:1.05fr 1.42fr .92fr;
  gap:14px;
}

.left-stack,
.right-stack{
  display:grid;
  grid-template-rows:1fr 1fr;
  gap:14px;
  min-height:0;
}

.panel{
  background:linear-gradient(180deg,rgba(255,255,255,.96),rgba(255,255,255,.84));
  border:1px solid var(--line);
  border-radius:22px;
  box-shadow:var(--shadow);
  position:relative;
  overflow:hidden;
  min-height:0;
  padding:16px;
  backdrop-filter:blur(18px);
}

.panel:before{
  content:"";
  position:absolute;
  inset:0;
  border-radius:22px;
  pointer-events:none;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.7);
}

.panel-title{
  position:relative;
  z-index:2;
  min-height:44px;
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:14px;
  margin-bottom:8px;
}

.panel-title h2{
  margin:0;
  color:var(--navy);
  font-size:16px;
  letter-spacing:-.02em;
}

.panel-title p{
  margin:5px 0 0;
  color:var(--muted);
  font-size:11px;
  line-height:1.45;
}

.panel-title span{
  flex:0 0 auto;
  color:var(--muted);
  font-size:11px;
}

.chart{
  height:calc(100% - 54px);
  min-height:160px;
}

.cycle-panel{
  display:grid;
  grid-template-rows:auto auto 1fr auto;
  gap:12px;
}

.position-bar{
  display:grid;
  grid-template-columns:auto 1fr;
  align-items:center;
  gap:14px;
  padding:13px 14px;
  border-radius:16px;
  background:linear-gradient(135deg,#edf4ff,#fff);
  border:1px solid rgba(31,92,255,.16);
}

.position-bar span{
  border-radius:999px;
  padding:7px 11px;
  background:var(--blue);
  color:#fff;
  font-size:11px;
  font-weight:900;
}

.position-bar strong{
  color:var(--navy);
  font-size:15px;
  letter-spacing:-.02em;
}

.cycle-map{
  min-height:0;
  border-radius:20px;
  background:radial-gradient(circle at 50% 12%,rgba(31,92,255,.10),transparent 45%),linear-gradient(180deg,#f8fbff,#eef4ff);
  border:1px solid rgba(31,92,255,.14);
  padding:18px;
  overflow:hidden;
}

.stages{
  height:100%;
  display:grid;
  grid-template-columns:repeat(5,1fr);
  gap:12px;
  align-items:center;
}

.stage{
  min-height:255px;
  border-radius:18px;
  background:rgba(255,255,255,.86);
  border:1px solid rgba(31,92,255,.14);
  padding:15px;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  box-shadow:0 14px 34px rgba(7,22,51,.08);
}

.stage.done{
  background:linear-gradient(180deg,#f2fff9,#fff);
  border-color:rgba(25,179,123,.22);
}

.stage.active{
  background:linear-gradient(180deg,#eaf1ff,#fff);
  border-color:rgba(31,92,255,.42);
  box-shadow:0 18px 42px rgba(31,92,255,.17);
}

.stage-dot{
  width:19px;
  height:19px;
  border-radius:50%;
  background:var(--blue);
  box-shadow:0 0 0 8px rgba(31,92,255,.11),0 0 22px rgba(31,92,255,.30);
  margin-bottom:10px;
}

.stage.done .stage-dot{background:var(--green)}

.stage small{
  color:var(--blue);
  font-size:11px;
  font-weight:900;
}

.stage.done small{color:var(--green)}

.stage h3{
  margin:7px 0 7px;
  color:var(--navy);
  font-size:18px;
  letter-spacing:-.035em;
}

.stage p{
  margin:0;
  color:var(--muted);
  font-size:12px;
  line-height:1.5;
}

.stage b{
  display:block;
  margin-top:10px;
  color:var(--text);
  font-size:12px;
}

.stage em{
  font-style:normal;
  color:var(--blue);
}

.alarm-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:10px;
}

.alarm-card{
  border-radius:15px;
  background:#fff;
  border:1px solid rgba(31,92,255,.14);
  padding:12px;
  box-shadow:0 12px 28px rgba(7,22,51,.06);
}

.alarm-card small{
  display:block;
  color:var(--muted);
  font-size:11px;
}

.alarm-card strong{
  display:block;
  margin-top:5px;
  color:var(--navy);
  font-size:18px;
}

.alarm-card p{
  margin:6px 0 0;
  color:var(--muted);
  font-size:11px;
  line-height:1.42;
}

.alarm-card.danger strong{color:var(--red)}

.rank{
  display:grid;
  gap:9px;
}

.rank-row{
  display:grid;
  grid-template-columns:24px 1fr 42px;
  gap:10px;
  align-items:start;
  padding:10px;
  border-radius:13px;
  background:#f5f8ff;
  border:1px solid rgba(31,92,255,.08);
  transition:all .3s ease;
}

.rank-row.is-hot{
  background:#edf4ff;
  border-color:rgba(31,92,255,.25);
  transform:translateX(3px);
}

.rank-row i{
  font-style:normal;
  width:24px;
  height:24px;
  border-radius:8px;
  background:#e8f0ff;
  display:flex;
  align-items:center;
  justify-content:center;
  color:var(--blue);
  font-size:12px;
  font-weight:900;
}

.rank-row b{
  display:block;
  color:var(--text);
  font-size:13px;
  margin-bottom:3px;
}

.rank-row small{
  display:block;
  color:var(--muted);
  font-size:11px;
  line-height:1.35;
}

.rank-row span{
  color:var(--muted);
  font-size:12px;
  text-align:right;
}

.funnel-panel{
  position:relative;
}

.funnel-note{
  position:absolute;
  left:20px;
  right:20px;
  bottom:14px;
  padding:10px 12px;
  border-radius:13px;
  background:#f5f8ff;
  color:var(--navy);
  font-weight:900;
  font-size:12px;
  text-align:center;
}

.screen-footer{
  display:flex;
  justify-content:space-between;
  align-items:center;
  color:rgba(16,32,51,.52);
  font-size:12px;
}

.screen-footer strong{
  color:var(--navy);
  letter-spacing:.08em;
}

@media (max-width: 1280px){
  html,body{overflow:auto}
  .tv-screen{
    height:auto;
    min-height:100vh;
    grid-template-rows:auto auto auto;
  }

  .screen-header,
  .screen-main{
    grid-template-columns:1fr;
  }

  .kpi-grid{
    grid-template-columns:repeat(2,1fr);
  }

  .stages,
  .alarm-grid{
    grid-template-columns:1fr;
  }

  .stage{
    min-height:auto;
  }
}


/* V3.1 修正：顶部信息不裁切 + 日期秒级跳动 */
.brand-meta{
  max-height:32px;
  overflow:visible;
}

.brand-meta span{
  line-height:1;
  white-space:nowrap;
}

@media (min-width: 1281px){
  .brand-panel{
    min-height:158px;
  }

  .brand-panel h1{
    font-size:27px;
  }

  .brand-panel p{
    max-width:96%;
  }
}


/* ===============================
   V3.5 电视终极展示优化
   适合3米观看：大字号、动态感、防烧屏
   =============================== */

body.anti-burn{
  transform:translateY(1px);
}

.tv-screen{
  grid-template-rows:158px 1fr 36px;
  padding:18px 22px 16px;
}

.screen-header{
  grid-template-columns:1.15fr 3.3fr;
}

.brand-panel{
  padding:22px 24px;
}

.brand-panel h1{
  font-size:34px;
  line-height:1.05;
}

.brand-panel p{
  font-size:15px;
  line-height:1.45;
}

.brand-meta{
  margin-top:12px;
}

.brand-meta span{
  font-size:12px;
}

.kpi-card{
  padding:20px 22px;
}

.kpi-card small{
  font-size:15px;
}

.kpi-card strong{
  font-size:42px;
  transition:transform .22s ease;
}

.kpi-card strong.pulse{
  transform:scale(1.06);
}

.kpi-card p{
  font-size:14px;
}

.panel-title{
  min-height:62px;
}

.panel-title h2{
  font-size:23px;
}

.panel-title p{
  font-size:15px;
  line-height:1.45;
}

.panel-title span{
  font-size:13px;
}

.position-bar{
  padding:16px 18px;
}

.position-bar span{
  font-size:14px;
  padding:9px 14px;
}

.position-bar strong{
  font-size:20px;
}

.stage{
  min-height:288px;
  padding:18px;
}

.stage small{
  font-size:14px;
}

.stage h3{
  font-size:24px;
}

.stage p{
  font-size:16px;
  line-height:1.52;
}

.stage b{
  font-size:15px;
}

.stage.active{
  animation:dg-breath 2.8s ease-in-out infinite;
}

@keyframes dg-breath{
  0%,100%{transform:translateY(0)}
  50%{transform:translateY(-4px)}
}

.alarm-card small{
  font-size:13px;
}

.alarm-card strong{
  font-size:22px;
}

.alarm-card p{
  font-size:14px;
}

.rank-row{
  padding:13px;
  grid-template-columns:30px 1fr 54px;
}

.rank-row.is-hot{
  background:#dfeaff;
  border-color:rgba(31,92,255,.30);
  transform:scale(1.018);
}

.rank-row i{
  width:30px;
  height:30px;
  font-size:15px;
}

.rank-row b{
  font-size:16px;
}

.rank-row small{
  font-size:14px;
}

.rank-row span{
  font-size:14px;
}

.funnel-note{
  font-size:15px;
}

.screen-footer{
  font-size:14px;
}

.screen-footer strong::after{
  content:" · DINGGE DIAGNOSTIC SYSTEM";
  letter-spacing:.10em;
}

@media (max-width: 1280px){
  .tv-screen{
    grid-template-rows:auto auto auto;
  }
}