:root{
  color-scheme:dark;
  --bg:#02090e;--panel:#06131b;--panel2:#081923;--line:#263943;
  --text:#f6f7f8;--muted:#aeb9c0;--green:#b8df00;--yellow:#ffbf00;
  --orange:#ff8400;--red:#ff281b;--unit:250px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:linear-gradient(180deg,#01070b,#031018 60%,#02090d);color:var(--text);font-family:Arial,Helvetica,sans-serif;line-height:1.35}
.topbar{position:sticky;top:0;z-index:40;height:44px;display:flex;align-items:center;gap:22px;padding:0 16px;background:rgba(2,9,13,.96);border-bottom:1px solid var(--line)}
.topbar a{color:var(--text);text-decoration:none;font-size:14px}
.page{max-width:1600px;margin:auto;padding:10px}
.review-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));grid-auto-rows:var(--unit);grid-auto-flow:dense;gap:8px}
.panel{background:linear-gradient(145deg,var(--panel2),#020a0f);border:1px solid var(--line);border-radius:12px;padding:14px;overflow:hidden;min-width:0;min-height:0}
.w1{grid-column:span 1}.w2{grid-column:span 2}.h1{grid-row:span 1}.h2{grid-row:span 2}
.panel h2{font-size:18px;margin:0 0 10px}.panel h2 small{font-size:11px;color:var(--muted);font-weight:400}
.panel p{margin:7px 0}.green{color:var(--green)}.yellow{color:var(--yellow)}.orange{color:var(--orange)}.red,.danger{color:var(--red)}.strong{font-weight:800}
.identity-panel{display:grid;grid-template-columns:42% 58%;gap:14px}
.phone-frame,.media-frame{width:100%;height:100%;display:flex;align-items:center;justify-content:center;background:#02090d;border:1px solid var(--line);border-radius:9px;overflow:hidden}
.phone-frame img,.media-frame img{width:100%;height:100%;object-fit:contain}
.identity-copy h1{font:700 39px Georgia,serif;margin:0}.brand{font-size:18px}.lead{font-size:18px}
.meta-list{display:grid;gap:7px;margin:18px 0}.meta-list div{display:flex;justify-content:space-between;gap:12px}.meta-list span{color:var(--muted)}.meta-list b{text-align:right}
.build-box{border:1px solid #5d4527;border-radius:9px;padding:10px;display:grid}.build-box b{font-size:20px}.build-box small{color:var(--muted)}
.score-panel{text-align:center;display:flex;flex-direction:column;justify-content:center;align-items:center}
.eyebrow{text-transform:uppercase;letter-spacing:.1em;color:var(--muted);font-size:11px}
.score-ring{width:160px;height:160px;border-radius:50%;background:conic-gradient(var(--red) 0 48%,#646b70 48%);display:grid;place-items:center;position:relative;margin:9px auto}
.score-ring::before{content:"";position:absolute;inset:14px;border-radius:50%;background:var(--panel)}
.score-ring span{position:relative;z-index:1;color:var(--red);font-size:52px;font-weight:800}
.method-panel{display:grid;grid-template-rows:repeat(3,minmax(0,1fr));gap:8px}
.method-card{display:grid;grid-template-columns:40px minmax(0,1fr) auto;gap:10px;align-items:center;border:1px solid var(--line);border-radius:9px;padding:9px}
.method-icon{width:36px;height:36px;border:1px solid currentColor;border-radius:9px;display:grid;place-items:center;font-size:20px}
.method-text b,.method-text small{display:block}.method-text small{color:var(--muted);font-size:12px}.method-card strong{font-size:30px}
.issue-strip{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}.issue-strip div{border:1px solid #781313;border-radius:8px;padding:8px}.issue-strip span{display:block;color:var(--muted);font-size:12px}
.range-grid{display:grid;grid-template-columns:repeat(7,1fr);border:1px solid #6b5a42;border-radius:8px;overflow:hidden}.range-grid div{text-align:center;border-right:1px solid #6a6258;padding:12px 6px}.range-grid div:last-child{border-right:0}.range-grid b,.range-grid span{display:block}.range-grid div:nth-child(-n+3){color:var(--green)}.range-grid div:nth-child(4),.range-grid div:nth-child(5){color:var(--orange)}.range-grid div:nth-child(6){color:#ffa000}.range-grid div:nth-child(7){color:var(--red)}
.metric-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:7px}
.metric{display:grid;grid-template-columns:40px minmax(0,1fr);gap:8px;align-items:center;border:1px solid var(--line);border-radius:9px;padding:8px;min-height:78px}.metric-icon{width:36px;height:36px;border:1px solid currentColor;border-radius:8px;display:grid;place-items:center;font-size:20px}.metric b,.metric em{display:block}.metric em{font-size:12px;font-style:normal}.stars{color:var(--yellow);letter-spacing:1px;font-size:12px}
.timeline{margin:0;padding-left:21px}.timeline li{margin:7px 0}.timeline span{display:block;color:var(--muted);font-size:12px}
.used-list div{display:grid;grid-template-columns:minmax(0,1fr) auto auto;gap:7px;align-items:center;border-bottom:1px solid var(--line);padding:6px 0}.hotspot-row{display:flex;justify-content:space-between;margin-top:8px;border:1px solid #617400;border-radius:8px;padding:9px;color:var(--green)}
.spec-grid{display:grid;grid-template-columns:1fr 1fr;gap:0 16px;font-size:12px}.spec-grid div{display:flex;justify-content:space-between;gap:12px;min-height:31px;border-bottom:1px solid var(--line);padding:6px 0}.spec-grid b{color:var(--muted);font-weight:400;flex:0 0 43%}.spec-grid span{text-align:right}.spec-note{font-size:12px;color:var(--muted);border-top:1px solid var(--line);padding-top:8px}
.issues-panel ul,.ent-copy ul{padding-left:18px}.reports-panel div{display:flex;justify-content:space-between;border-bottom:1px solid var(--line);padding:6px 0}.reports-panel span{color:var(--orange)}
.entertainment-panel{display:grid;grid-template-columns:40% 60%;gap:12px}.media-frame img{object-fit:contain}
.practical-panel{display:flex;align-items:center;justify-content:center}.practical-copy{max-width:640px}.practical-tags{display:flex;flex-wrap:wrap;gap:8px}.practical-tags span{border:1px solid var(--line);border-radius:999px;padding:7px 10px}
.recommend-grid{display:grid;gap:10px}.recommend-grid div{display:grid;gap:4px}.recommend-grid span{color:var(--muted);font-size:12px}
.footer{max-width:1600px;margin:auto;padding:13px;display:flex;justify-content:space-between;gap:20px;color:var(--muted);font-size:12px}

@media(max-width:1100px){
  :root{--unit:230px}
  .review-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .w1{grid-column:span 1}.w2{grid-column:span 2}
  .metric-grid{grid-template-columns:repeat(2,1fr)}
}

@media(max-width:700px){
  :root{--unit:auto}
  .review-grid{display:block}.panel{margin-bottom:8px;overflow:visible}
  .identity-panel,.entertainment-panel{display:block}
  .phone-frame{height:auto;aspect-ratio:3/4.2;margin-bottom:12px}
  .media-frame{height:auto;aspect-ratio:16/9}.media-frame img{object-fit:contain}
  .range-grid{grid-template-columns:1fr}.range-grid div{display:grid;grid-template-columns:1fr 1fr;text-align:left;border-right:0;border-bottom:1px solid #6a6258}.range-grid div:last-child{border-bottom:0}.range-grid span{text-align:right}
  .metric-grid{grid-template-columns:1fr 1fr}.used-list div{grid-template-columns:minmax(0,1fr) auto}.used-list .stars{display:none}
  .spec-grid{grid-template-columns:1fr}.spec-grid{font-size:12px}.spec-grid b{flex:0 0 43%}
  .footer{display:block}
}


/* Template 3.1 additions — content-preserving visual restoration */
.icon-library{position:absolute;width:0;height:0;overflow:hidden}
.meta-svg{width:17px;height:17px;vertical-align:-3px;fill:none;stroke:currentColor;stroke-width:2}
.legacy-metric-grid{
  display:grid;
  grid-template-columns:repeat(7,minmax(0,1fr));
  gap:6px;
}
.legacy-metric{
  min-width:0;
  min-height:92px;
  display:grid;
  grid-template-columns:44px minmax(0,1fr);
  gap:8px;
  align-items:center;
  padding:9px;
  border:1px solid var(--line);
  border-radius:8px;
  background:linear-gradient(145deg,#071925,#020b11);
}
.legacy-icon{
  width:40px;height:40px;
  fill:none;stroke:currentColor;stroke-width:2.1;
  stroke-linecap:round;stroke-linejoin:round;
}
.legacy-metric b,.legacy-metric small,.legacy-metric em{display:block}
.legacy-metric b{font-size:13px;line-height:1.15}
.legacy-metric small{font-size:11px;color:var(--muted);line-height:1.15;margin-top:2px}
.legacy-metric em{font-style:normal;font-size:12px;font-weight:700;margin-top:4px}
.pending{color:#68c7ff}
.muted-rating{color:#d0d4d7}
.pending-box{border-color:#2f789a;color:#68c7ff;background:rgba(39,121,159,.08)}
.rating-scope-note{
  margin-top:9px!important;
  padding:9px 10px;
  border-left:3px solid var(--yellow);
  background:rgba(255,191,0,.055);
  color:var(--muted);
  font-size:11.5px;
  line-height:1.35;
}
.rating-scope-note b{color:var(--text)}
.spec-highlight{
  grid-column:span 2;
  border:1px solid #6c8500!important;
  border-radius:8px;
  padding:8px 9px!important;
  background:rgba(184,223,0,.065);
}
.spec-inline-icon{width:17px;height:17px;vertical-align:-4px;fill:none;stroke:currentColor;stroke-width:2}
.storage-advantage{
  display:grid;
  grid-template-columns:48px minmax(0,1fr);
  gap:12px;
  margin-top:12px;
  padding:11px;
  border:1px solid #6c8500;
  border-radius:9px;
  background:linear-gradient(145deg,rgba(184,223,0,.08),rgba(2,10,15,.94));
}
.advantage-icon{width:42px;height:42px;fill:none;stroke:currentColor;stroke-width:2}
.storage-advantage b{color:var(--green)}
.storage-advantage p{font-size:11.5px;color:var(--muted);margin:5px 0!important}
.scenario-system{
  display:grid;
  grid-template-columns:repeat(5,minmax(0,1fr));
  gap:7px;
  margin:12px 0;
}
.scenario{
  min-width:0;
  display:grid;
  grid-template-columns:34px minmax(0,1fr);
  grid-template-rows:auto auto;
  gap:2px 7px;
  align-items:center;
  padding:8px;
  border:1px solid var(--line);
  border-radius:8px;
  background:#041018;
}
.scenario svg{
  grid-row:1/3;
  width:32px;height:32px;
  fill:none;stroke:currentColor;stroke-width:2;
}
.scenario b{font-size:12px}
.scenario small{font-size:10px;color:var(--muted)}
.scenario.active{border-color:#6c8500;color:var(--green);background:rgba(184,223,0,.07)}
.scenario.future{border-style:dashed;color:#77cfff}
@media(max-width:1300px){
  .legacy-metric-grid{grid-template-columns:repeat(5,minmax(0,1fr))}
  .scenario-system{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media(max-width:1100px){
  .legacy-metric-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media(max-width:700px){
  .legacy-metric-grid{grid-template-columns:1fr 1fr}
  .legacy-metric{min-height:88px}
  .scenario-system{grid-template-columns:1fr}
  .spec-highlight{grid-column:span 1}
  .storage-advantage{grid-template-columns:38px minmax(0,1fr)}
  .advantage-icon{width:34px;height:34px}
}


/* Template 3.2 — desktop text-fit and factory-reset warnings */

/* Short warning used in two compact locations */
.factory-warning{
  display:inline-flex;
  align-items:center;
  gap:5px;
  max-width:100%;
  color:#ffb000;
  border:1px solid #8a5a00;
  background:rgba(255,176,0,.08);
  border-radius:7px;
  padding:6px 8px;
  font-size:11px;
  font-weight:700;
  line-height:1.15;
}
.factory-warning.compact{
  margin-top:8px;
  justify-content:center;
  text-align:center;
}
.entertainment-warning{
  margin-top:8px;
}
.reset-note{
  margin-top:9px!important;
  padding:8px 9px;
  border-left:3px solid #ffb000;
  background:rgba(255,176,0,.055);
  color:var(--muted);
  font-size:11px;
  line-height:1.35;
}
.reset-note b{color:#ffb000}

/* Desktop: fix clipped text in What Matters Most */
@media (min-width:1301px){
  .performance-panel{
    overflow:visible;
  }

  .legacy-metric-grid{
    grid-template-columns:repeat(6,minmax(0,1fr));
    gap:6px;
  }

  .legacy-metric{
    min-height:94px;
    grid-template-columns:38px minmax(0,1fr);
    gap:7px;
    padding:8px;
    overflow:visible;
  }

  .legacy-icon{
    width:35px;
    height:35px;
  }

  .legacy-metric b{
    font-size:12px;
    line-height:1.12;
    overflow-wrap:anywhere;
    word-break:normal;
  }

  .legacy-metric small{
    font-size:10.5px;
    line-height:1.15;
    overflow-wrap:anywhere;
  }

  .legacy-metric em{
    font-size:11px;
    line-height:1.12;
    overflow-wrap:anywhere;
  }
}

/* Medium desktop / small PC windows */
@media (min-width:1101px) and (max-width:1300px){
  .legacy-metric-grid{
    grid-template-columns:repeat(5,minmax(0,1fr));
  }

  .legacy-metric{
    min-height:98px;
    overflow:visible;
  }

  .legacy-metric b{
    font-size:11.5px;
    overflow-wrap:anywhere;
  }

  .legacy-metric small,
  .legacy-metric em{
    font-size:10.5px;
    overflow-wrap:anywhere;
  }
}

/* Mobile/tablet behavior remains as before; only warning sizing is tuned */
@media(max-width:700px){
  .factory-warning{
    font-size:10.5px;
    padding:6px 7px;
  }

  .entertainment-warning{
    display:flex;
    width:100%;
  }
}


/* Template 3.3 — PC/tablet panel-height correction only */

/*
  The content in these two panels is taller than two fixed grid units
  at some desktop widths. Give them one additional grid unit so no
  rows, notes, or highlights are clipped.
*/
@media (min-width:701px){
  .performance-panel{
    grid-row:span 3 !important;
    overflow:hidden;
  }

  .specs-panel{
    grid-row:span 3 !important;
    overflow:hidden;
  }
}

/*
  On narrower desktop/tablet layouts, preserve all text and allow the
  internal content to use the full third row cleanly.
*/
@media (min-width:701px) and (max-width:1100px){
  .performance-panel .legacy-metric-grid{
    align-content:start;
  }

  .specs-panel .storage-advantage{
    margin-bottom:8px;
  }
}

/* Mobile remains exactly as before. */
@media (max-width:700px){
  .performance-panel,
  .specs-panel{
    grid-row:auto !important;
    overflow:visible;
  }
}


/* v3.4 */
.scenario b{
  font-size:11px;
  line-height:1.15;
}
.scenario small{
  font-size:10px;
  line-height:1.2;
}
.scenario{
  padding:10px 8px;
}
@media (min-width:1101px){
  .scenario{
    grid-template-columns:30px 1fr;
  }
}