*,*::before,*::after{margin:0;padding:0;box-sizing:border-box;}

[data-theme="light"]{
  --bg:#f5f5f7;
  --card:rgba(255,255,255,0.75);
  --border:#d8d8d8;
  --border2:#ebebeb;
  --text:#1d1d1f;
  --text2:#6e6e73;
  --text3:#aeaeb2;
  --sub:rgba(245,245,247,0.7);
  --blue:#0055d4;
  --nav-bg:rgba(255,255,255,0.75);
  --src-bg:rgba(238,243,255,0.85);
  --src-text:#0055d4;
  --src-border:rgba(0,85,212,0.15);
  --input-bg:rgba(255,255,255,0.85);
  --input-border:#c8c8c8;
  --lose:#b0b0b0;
  --grad1:rgba(0,85,212,0.12);
  --grad2:rgba(100,180,255,0.10);
  --grad3:rgba(180,100,255,0.08);
}
[data-theme="dark"]{
  --bg:#111111;
  --card:rgba(30,30,30,0.75);
  --border:#333333;
  --border2:#2a2a2a;
  --text:#f0f0f0;
  --text2:#cccccc;
  --text3:#888888;
  --sub:rgba(24,24,24,0.7);
  --blue:#3d9bff;
  --nav-bg:rgba(17,17,17,0.75);
  --src-bg:rgba(13,29,53,0.85);
  --src-text:#3d9bff;
  --src-border:rgba(61,155,255,0.2);
  --input-bg:rgba(42,42,42,0.85);
  --input-border:#444444;
  --lose:#999999;
  --grad1:rgba(0,85,212,0.18);
  --grad2:rgba(61,155,255,0.12);
  --grad3:rgba(150,80,255,0.10);
}

body{
  font-family:'Anuphan',sans-serif;
  font-variant-numeric:tabular-nums;
  color:var(--text);
  min-height:100vh;
  transition:background .25s,color .25s;
  position:relative;
  background:var(--bg);
  overflow-x:hidden;
}

/* ══ GRADIENT BACKGROUND ══ */
body::before{
  content:'';
  position:fixed;
  inset:0;
  z-index:-2;
  background:var(--bg);
}
body::after{
  content:'';
  position:fixed;
  inset:0;
  z-index:-1;
  background:
    radial-gradient(ellipse 80% 60% at 15% 20%, var(--grad1) 0%, transparent 60%),
    radial-gradient(ellipse 60% 70% at 85% 10%, var(--grad2) 0%, transparent 55%),
    radial-gradient(ellipse 70% 50% at 50% 90%, var(--grad3) 0%, transparent 60%),
    radial-gradient(ellipse 50% 40% at 80% 70%, var(--grad1) 0%, transparent 50%);
  filter:blur(40px);
  pointer-events:none;
}

/* ══ VIEWS ══ */
.view{display:none;}
.view.active{display:block;}
#home.active{display:flex;flex-direction:column;}

/* ══ NAV ══ */
nav{
  height:52px;
  background:var(--nav-bg);
  backdrop-filter:blur(20px);
  -webkit-backdrop-filter:blur(20px);
  border-bottom:1px solid var(--border);
  position:sticky;top:0;z-index:100;
  display:flex;align-items:center;
  padding:0 20px;gap:12px;
}
.nav-logo{
  font-size:18px;font-weight:700;
  letter-spacing:-0.5px;
  text-decoration:none;cursor:pointer;
  display:flex;align-items:center;gap:1px;
  flex-shrink:0;
}
.nav-logo .nl-s{color:var(--blue);}
.nav-logo .nl-rest{color:var(--text);}
.nav-logo .nl-2{color:var(--blue);}
.nav-logo .nl-u{color:var(--text);}
.nav-menu{
  display:flex;align-items:center;gap:2px;
  margin-left:16px;
}
.nav-item{
  font-size:13px;font-weight:500;
  color:var(--text2);
  background:none;border:none;
  padding:6px 12px;border-radius:8px;
  cursor:pointer;transition:all .15s;
  white-space:nowrap;
}
.nav-item:hover{background:var(--border2);color:var(--text);}
.nav-item.active{background:var(--blue);color:#fff;}
.nav-back{
  font-family:'Inter',sans-serif;
  font-size:11px;color:var(--text2);
  background:none;border:1px solid transparent;cursor:pointer;
  display:flex;align-items:center;gap:5px;
  padding:5px 12px;border-radius:100px;
  transition:border-color .15s,color .15s,background .15s;white-space:nowrap;
}
.nav-back:hover{border-color:var(--border);background:var(--sub);color:var(--text);}
.nav-gpu-label{
  font-family:'Inter',sans-serif;
  font-size:12px;flex:1;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.nav-gpu-label strong{color:var(--text);}
.nav-gpu-label span{color:var(--text3);}
.nav-right{display:flex;align-items:center;gap:8px;margin-left:auto;}
.lang-btn{
  font-family:'Inter',sans-serif;
  font-size:10px;font-weight:600;letter-spacing:.5px;
  color:var(--text2);background:none;
  border:1px solid var(--border);
  border-radius:100px;padding:4px 12px;
  cursor:pointer;transition:border-color .15s,color .15s;
}
.lang-btn:hover{color:var(--text);border-color:var(--text3);}
.theme-btn{
  width:30px;height:30px;border-radius:100px;
  background:none;border:1px solid var(--border);
  cursor:pointer;font-size:14px;
  display:flex;align-items:center;justify-content:center;
  transition:border-color .15s,background .15s;flex-shrink:0;
}
.theme-btn:hover{border-color:var(--text3);background:var(--sub);}
.contact-nav-btn{
  width:30px;height:30px;border-radius:100px;
  background:none;border:1px solid var(--border);
  cursor:pointer;font-size:14px;color:var(--text2);
  display:flex;align-items:center;justify-content:center;
  transition:border-color .15s,background .15s,color .15s;
  flex-shrink:0;text-decoration:none;
}
.contact-nav-btn:hover{border-color:var(--blue);color:var(--blue);background:var(--src-bg);}

/* ══ HOME ══ */
.home-body{
  flex:1;display:flex;flex-direction:column;
  align-items:center;justify-content:center;
  padding:0 20px 60px;
  min-height:calc(100vh - 52px);
  gap:0;
}

/* Single search box */
.search-box.single{flex-direction:column;border-radius:16px;}
.search-box.single .s-field{padding:16px 20px 8px;}
.search-box.single .s-inp{font-size:15px;}
.search-box.single .s-btn{
  border-radius:0 0 14px 14px;
  padding:12px;font-size:15px;
  width:100%;
}

/* HOME search — Google style */
.home-search-wrap{
  width:100%;max-width:480px;
}
.search-box.home-search{
  border-radius:99px;
  display:flex;
  align-items:center;
  flex-direction:row;
  padding:0 20px;
  height:50px;
  gap:10px;
  overflow:hidden;
  box-shadow:0 1px 8px rgba(0,0,0,.1);
  border:1px solid var(--border);
  background:var(--input-bg);
  backdrop-filter:blur(20px);
  -webkit-backdrop-filter:blur(20px);
}
.search-box.home-search:focus-within{
  box-shadow:0 2px 12px rgba(0,0,0,.12);
  border-color:var(--blue);
}
.home-search-icon-left{
  font-size:16px;
  color:var(--text3);
  flex-shrink:0;
  line-height:1;
  cursor:pointer;
}
.search-box.home-search .s-inp{
  flex:1;
  font-size:15px;font-weight:400;
  color:var(--text);
  background:transparent;
  border:none;outline:none;
  height:50px;
  min-width:0;
  -webkit-appearance:none;
}
.search-box.home-search .s-inp::placeholder{
  color:var(--text3);font-weight:400;font-size:14px;
}

/* Home category cards */
.home-cat-menu{
  display:grid;grid-template-columns:repeat(4,1fr);
  gap:12px;
  margin:36px auto 0;
  width:100%;max-width:800px;
}
@property --bangle{
  syntax:'<angle>';
  inherits:false;
  initial-value:0deg;
}
.home-cat-card{
  position:relative;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;
  padding:26px 8px;border-radius:16px;
  background:var(--card);border:1px solid var(--border);
  cursor:pointer;
  transition:transform .2s,border-color .2s,box-shadow .2s;
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
}
.home-cat-card::before{
  content:'';position:absolute;inset:0;
  border-radius:inherit;padding:1px;
  background:conic-gradient(from var(--bangle),transparent 0deg,transparent 270deg,#60a5fa 320deg,#818cf8 360deg);
  -webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);
  -webkit-mask-composite:xor;
  mask-composite:exclude;
  pointer-events:none;
  animation:bangle-spin 3s linear infinite;
}
@keyframes bangle-spin{to{--bangle:360deg;}}
.home-cat-card:hover{transform:translateY(-3px);border-color:var(--blue);box-shadow:0 10px 28px rgba(0,85,212,0.18);}
.home-cat-title{
  position:relative;
  font-size:clamp(15px,2.4vw,20px);font-weight:700;color:var(--text);
  text-align:center;letter-spacing:-.2px;
  padding-bottom:10px;
  transition:color .25s ease;
}
.home-cat-title::after{
  content:'';position:absolute;left:50%;bottom:0;
  width:0;height:2px;border-radius:2px;
  background:linear-gradient(90deg,#60a5fa,#818cf8);
  transform:translateX(-50%);
  transition:width .3s ease;
}
.home-cat-card:hover .home-cat-title{color:var(--blue);}
.home-cat-card:hover .home-cat-title::after{width:36px;}
.home-cat-sub{font-size:11px;color:var(--text3);font-family:'Inter',sans-serif;letter-spacing:1.5px;text-transform:uppercase;line-height:1.6;min-height:2.6em;display:flex;align-items:center;justify-content:center;text-align:center;}

/* Cat Search */
.cat-search-wrap{
  position:relative;
  margin-bottom:12px;
}
.cat-search-inp{
  width:100%;padding:10px 16px;
  border-radius:10px;
  border:1.5px solid var(--border);
  background:var(--input-bg);
  color:var(--text);font-size:13px;
  outline:none;transition:border-color .2s;
  backdrop-filter:blur(12px);
}
.cat-search-inp:focus{border-color:var(--blue);}
.cat-search-inp::placeholder{color:var(--text3);}

/* ══ SEARCH BOX — Fixed for click accuracy ══ */
.search-wrap{
  width:100%;max-width:480px;
  margin-bottom:24px;
  position:relative;
}
.search-box{
  display:flex;
  background:var(--input-bg);
  border:1.5px solid var(--input-border);
  border-radius:14px;
  overflow:hidden;
  box-shadow:0 2px 16px rgba(0,0,0,.06);
  transition:border-color .2s;
  backdrop-filter:blur(20px);
  -webkit-backdrop-filter:blur(20px);
}
.search-box:focus-within{
  border-color:var(--blue);
  box-shadow:0 0 0 3px rgba(0,85,212,.1);
}
[data-theme="dark"] .search-box:focus-within{
  box-shadow:0 0 0 3px rgba(61,155,255,.15);
}

/* FIX: Each field is a proper clickable area */
.s-field{
  flex:1;
  display:flex;flex-direction:column;
  padding:12px 16px;
  cursor:text;
  min-width:0;
}
.s-lbl{
  font-family:'Inter',sans-serif;
  font-size:8px;color:var(--text3);
  letter-spacing:1.5px;text-transform:uppercase;
  margin-bottom:5px;
  pointer-events:none;
}
/* FIX: Input takes full area, no pointer-events issues */
.s-inp{
  font-family:'Inter',sans-serif;
  font-size:16px;font-weight:500;
  color:var(--text);
  background:transparent;
  border:none;outline:none;
  width:100%;
  display:block;
  -webkit-appearance:none;
  cursor:text;
}
.s-inp::placeholder{
  color:var(--text3);
  font-weight:400;
  font-size:13px;
}
.s-divider{
  width:1px;background:var(--border);
  flex-shrink:0;margin:10px 0;
}
.s-vs{
  font-family:'Inter',sans-serif;
  font-size:10px;color:var(--text3);
  padding:0 8px;
  display:flex;align-items:center;
  flex-shrink:0;
}
.s-btn{
  font-family:'Anuphan',sans-serif;
  font-size:14px;font-weight:600;
  background:var(--blue);color:#fff;
  border:none;
  padding:0 22px;
  cursor:pointer;
  transition:opacity .15s;
  flex-shrink:0;
  white-space:nowrap;
}
.s-btn:hover{opacity:.88;}
.s-btn:active{opacity:.75;}

.s-hint{
  font-family:'Inter',sans-serif;
  font-size:10px;color:var(--text3);
  text-align:center;margin-bottom:40px;
}

/* AUTOCOMPLETE */
.ac-drop{
  position:absolute;
  top:calc(100% + 6px);left:0;right:0;
  background:var(--card);
  border:1px solid var(--border);
  border-radius:12px;overflow:hidden;
  box-shadow:0 8px 32px rgba(0,0,0,.12);
  z-index:300;display:none;
  backdrop-filter:blur(24px);
  -webkit-backdrop-filter:blur(24px);
}
.ac-drop.open{display:block;}
.ac-row{
  display:flex;align-items:center;gap:10px;
  padding:10px 16px;
  font-size:13px;cursor:pointer;
  border-bottom:1px solid var(--border2);
  transition:background .1s;
}
.ac-row:last-child{border-bottom:none;}
.ac-row:hover{background:var(--sub);}
.ac-series{
  font-family:'Inter',sans-serif;
  font-size:9px;color:var(--text3);
  margin-left:auto;white-space:nowrap;
}

/* POPULAR */
.pop-lbl{
  font-family:'Inter',sans-serif;
  font-size:9px;color:var(--text3);
  letter-spacing:2px;text-transform:uppercase;
  margin-bottom:10px;text-align:center;
}
.chips{
  display:flex;flex-wrap:wrap;
  gap:6px;justify-content:center;
  max-width:500px;
}
.chip{
  font-family:'Inter',sans-serif;
  font-size:12px;font-weight:500;color:var(--text2);
  background:var(--card);
  border:1px solid var(--border);
  border-radius:99px;padding:8px 18px;
  cursor:pointer;transition:all .2s;
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  box-shadow:0 1px 6px rgba(0,0,0,.04);
  max-width:100%;white-space:normal;text-align:center;
  text-decoration:none;display:inline-block;
}
.chip:hover{
  color:var(--blue);border-color:var(--blue);background:var(--src-bg);
  box-shadow:0 4px 16px rgba(0,85,212,.12);transform:translateY(-1px);
}

/* ══ RESULT ══ */
.result-wrap{
  max-width:1000px;
  margin:0 auto;
  padding:24px clamp(10px,3vw,32px) 80px;
  box-sizing:border-box;
  width:100%;
}

/* VERDICT */
.verdict{
  padding:14px 16px;
  margin-bottom:16px;
  background:var(--card);
  border:1px solid var(--border);
  border-radius:12px;
  backdrop-filter:blur(20px);
  -webkit-backdrop-filter:blur(20px);
}
.verdict strong{color:var(--text);font-weight:500;}

/* VERDICT PROSE — unique SEO content */
.verdict-prose{
  padding:16px 18px;margin:18px 0 4px;
  background:var(--card);border:1px solid var(--border);
  border-radius:12px;
  backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);
}
.verdict-prose h2{
  font-size:15px;font-weight:600;color:var(--text);
  margin-bottom:8px;letter-spacing:-.3px;
}
.verdict-prose p{
  font-size:13.5px;line-height:1.7;color:var(--text2);
  margin-bottom:8px;
}
.verdict-prose p:last-child{margin-bottom:0;}
.verdict-prose b{color:var(--text);font-weight:600;}
.verdict-prose .vp-pick{
  display:inline-block;color:var(--blue);font-weight:600;
}
.recompare-head{
  font-size:14px;font-weight:600;color:var(--text);
  margin:28px 0 12px;letter-spacing:-.3px;
}

/* TABS */
.r-tabs{
  display:flex;gap:2px;
  background:var(--sub);border:1px solid var(--border);
  border-radius:8px;padding:3px;
  margin-bottom:20px;
  width:fit-content;
}
.r-tab{
  font-family:'Inter',sans-serif;
  font-size:11px;color:var(--text2);
  padding:6px 18px;border-radius:6px;
  cursor:pointer;border:none;background:none;
  transition:all .15s;white-space:nowrap;
}
.r-tab.on{
  color:var(--text);background:var(--card);
  box-shadow:0 1px 4px rgba(0,0,0,.1);
}
.r-pane{display:none;}
.r-pane.on{display:block;}

/* SOURCE BAR */
.src-bar{
  display:flex;align-items:center;gap:6px;
  background:var(--src-bg);
  border:1px solid var(--src-border);
  border-radius:8px;padding:9px 14px;
  margin-bottom:16px;flex-wrap:wrap;
}
.src-lbl{
  font-family:'Inter',sans-serif;
  font-size:9px;font-weight:500;color:var(--src-text);
}
.src-tag{
  font-family:'Inter',sans-serif;
  font-size:9px;color:var(--src-text);
  background:rgba(0,85,212,.08);
  padding:2px 8px;border-radius:4px;
}
[data-theme="dark"] .src-tag{background:rgba(61,155,255,.1);}
.report-btn{
  font-family:'Inter',sans-serif;
  font-size:9px;color:var(--text3);
  background:none;border:none;cursor:pointer;
  margin-left:auto;text-decoration:underline;
  transition:color .15s;
}
.report-btn:hover{color:#cc3300;}

/* ══ TWO PANEL — Desktop Side by Side ══ */
.two-panel{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:0;
  background:var(--card);
  border:1px solid var(--border);
  border-radius:14px;
  overflow:hidden;
  margin-bottom:14px;
  backdrop-filter:blur(24px);
  -webkit-backdrop-filter:blur(24px);
  box-shadow:0 4px 32px rgba(0,0,0,.08);
  min-width:0;
  width:100%;
}
.panel-col{
  padding:clamp(12px,2vw,18px);
  overflow-y:auto;
  min-width:0;
}
.panel-col:first-child{
  border-right:1px solid var(--border);
}

.gpu-img{
  width:100%;aspect-ratio:16/9;
  background:var(--sub);border-radius:8px;
  display:flex;align-items:center;justify-content:center;
  margin-bottom:14px;font-size:40px;
  border:1px solid var(--border2);
}
/* HW (GPU/CPU) self-drawn visual — copyright-free, no product photos */
.hw-vis{
  width:100%;height:100%;min-height:90px;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:1px;color:#fff;position:relative;
}
.hw-vis-svg{line-height:0;}
.hw-vis-num{
  font-family:'Inter',sans-serif;font-weight:700;
  font-size:17px;letter-spacing:-.5px;margin-top:5px;
}
.hw-vis-sub{
  font-family:'Inter',sans-serif;font-size:8px;
  letter-spacing:1.5px;text-transform:uppercase;opacity:.82;
}
.gpu-brand{
  font-family:'Inter',sans-serif;
  font-size:9px;color:var(--text3);
  letter-spacing:1.5px;text-transform:uppercase;margin-bottom:3px;
}
.gpu-name{
  font-size:20px;font-weight:600;letter-spacing:-.5px;
  display:flex;align-items:center;gap:6px;
  margin-bottom:4px;flex-wrap:wrap;
}
.win-badge{
  font-family:'Inter',sans-serif;
  font-size:8px;color:var(--blue);
  border:1px solid var(--blue);
  padding:2px 5px;border-radius:3px;
}
.gpu-tags{display:flex;gap:5px;margin-bottom:10px;flex-wrap:wrap;}
.gpu-tag{
  font-family:'Inter',sans-serif;
  font-size:9px;color:var(--text2);
  background:var(--sub);border:1px solid var(--border);
  padding:2px 8px;border-radius:4px;
}
.gpu-sub{
  font-family:'Inter',sans-serif;
  font-size:10px;color:var(--text2);
  margin-bottom:14px;
}

.sec-title{
  font-size:11px;font-weight:600;color:var(--blue);
  margin:16px 0 4px;padding:6px 8px;
  background:var(--sub);border-radius:6px;
  border-left:3px solid var(--blue);
  letter-spacing:0.3px;
}
.spec-row{
  display:flex;justify-content:space-between;
  align-items:center;padding:7px 0;
  border-bottom:1px solid var(--border2);
}
.spec-row:last-child{border-bottom:none;}
.sk{font-size:11px;color:var(--text2);}
.sv{
  font-family:'Inter',sans-serif;
  font-size:11px;font-weight:500;color:var(--text);
  display:flex;align-items:center;gap:4px;
}
.sv.lose{color:var(--lose);font-weight:400;}
.dot{width:4px;height:4px;border-radius:50%;background:var(--blue);flex-shrink:0;}

/* ══ TOAST ══ */
.toast{
  position:fixed;bottom:32px;left:50%;
  transform:translateX(-50%) translateY(20px);
  background:rgba(30,30,30,0.92);
  color:#fff;font-size:13px;
  padding:10px 20px;border-radius:99px;
  white-space:nowrap;
  opacity:0;pointer-events:none;
  transition:all .3s;z-index:9999;
  backdrop-filter:blur(16px);
  box-shadow:0 4px 20px rgba(0,0,0,.2);
}
.toast.show{
  opacity:1;transform:translateX(-50%) translateY(0);
}
[data-theme="light"] .toast{
  background:rgba(30,30,30,0.88);
}
.detail-wrap{
  max-width:480px;margin:0 auto;
  padding-bottom:40px;
}
.detail-hero{
  width:100%;
  background:linear-gradient(160deg,var(--src-bg),var(--sub));
  display:flex;align-items:center;justify-content:center;
  padding:48px 24px;
  position:relative;
  overflow:hidden;
}
.detail-hero::before{
  content:'';position:absolute;inset:0;
  background:radial-gradient(ellipse 80% 80% at 50% 50%,var(--grad2),transparent);
  pointer-events:none;
}
.detail-img{
  font-size:120px;
  position:relative;z-index:1;
  filter:drop-shadow(0 20px 40px rgba(0,0,0,0.15));
  animation:floatPhone 3s ease-in-out infinite;
}
@keyframes floatPhone{
  0%,100%{transform:translateY(0);}
  50%{transform:translateY(-8px);}
}
.detail-body{
  padding:20px 16px;
}
.detail-brand{
  font-family:'Inter',sans-serif;
  font-size:10px;color:var(--text3);
  letter-spacing:2px;text-transform:uppercase;
  margin-bottom:4px;
}
.detail-name{
  font-size:26px;font-weight:700;
  letter-spacing:-0.5px;color:var(--text);
  margin-bottom:10px;line-height:1.2;
}
.detail-tags{
  display:flex;gap:6px;flex-wrap:wrap;
  margin-bottom:20px;
}
.detail-tag{
  font-size:11px;padding:4px 10px;
  border-radius:99px;border:1px solid var(--border);
  background:var(--card);color:var(--text2);
  font-weight:500;
}
.detail-tag.highlight{
  background:var(--src-bg);color:var(--src-text);
  border-color:var(--src-border);
}
.detail-compare-btn{
  width:100%;padding:14px;
  border-radius:12px;border:none;
  background:var(--blue);color:#fff;
  font-size:15px;font-weight:600;
  cursor:pointer;margin-bottom:24px;
  transition:opacity .15s;
  display:flex;align-items:center;justify-content:center;gap:8px;
}
.detail-compare-btn:hover{opacity:.88;}

.shopee-buy-btn{
  width:100%;padding:14px;
  border-radius:12px;border:none;
  background:#ee4d2d;color:#fff;
  font-size:15px;font-weight:600;
  cursor:pointer;margin-bottom:12px;
  transition:opacity .15s;
  display:flex;align-items:center;justify-content:center;gap:8px;
  text-decoration:none;
  box-sizing:border-box;
}
.shopee-buy-btn:hover{opacity:.88;}

.detail-specs{
  display:flex;flex-direction:column;gap:2px;
}
.spec-section-title{
  font-size:11px;font-weight:600;
  color:var(--blue);
  padding:10px 12px 6px;
  letter-spacing:0.3px;
  margin-top:8px;
  border-left:3px solid var(--blue);
  background:var(--sub);
  border-radius:0 6px 6px 0;
}
.spec-section-title:first-child{margin-top:0;}
.detail-spec-row{
  display:flex;justify-content:space-between;
  align-items:center;
  padding:10px 12px;
  border-bottom:1px solid var(--border2);
  background:var(--card);
  backdrop-filter:blur(12px);
}
.detail-spec-row:last-child{border-bottom:none;}
.detail-spec-key{
  font-size:12px;color:var(--text2);
}
.detail-spec-val{
  font-family:'Inter',sans-serif;
  font-size:12px;font-weight:500;
  color:var(--text);text-align:right;
  max-width:60%;word-break:break-word;
}
.detail-source{
  font-size:10px;color:var(--text3);
  text-align:center;margin-top:20px;
  font-family:'Inter',sans-serif;
}
.cat-view{display:none;}
.cat-view.active{display:block;}
.cat-body{
  padding:20px 16px 40px;
  max-width:600px;margin:0 auto;
}
.cat-header{
  margin-bottom:16px;
}
.cat-title{
  font-size:22px;font-weight:700;
  letter-spacing:-0.5px;color:var(--text);
  margin-bottom:4px;
}
.cat-sub-menu{
  display:flex;gap:6px;flex-wrap:wrap;
  margin-bottom:16px;
}
.cat-sub-btn{
  display:flex;align-items:center;gap:5px;
  padding:5px 13px;border-radius:100px;
  border:1px solid var(--border);
  background:transparent;color:var(--text2);
  font-size:12px;font-weight:500;cursor:pointer;
  transition:border-color .15s,background .15s,color .15s;
  white-space:nowrap;
}
.cat-sub-btn:hover{
  border-color:var(--text3);color:var(--text);
}
.cat-sub-btn.active{
  background:var(--blue);
  border-color:var(--blue);
  color:#fff;font-weight:600;
}
.cat-sub-dot{
  width:5px;height:5px;border-radius:50%;flex-shrink:0;
  opacity:.8;
}
.cat-grid{
  display:grid;grid-template-columns:1fr 1fr;
  gap:8px;
}

/* ══ LOGO (home only) ══ */
.logo-row{
  text-align:center;
  padding:0 0 8px;
  animation:fadeUp .5s ease both;
}
.logo-mark{
  font-size:42px;font-weight:700;
  letter-spacing:-2px;line-height:1;
  margin-bottom:4px;
}
.logo-mark .lm-s{color:var(--blue);}
.logo-mark .lm-2{color:var(--blue);}
.logo-tagline{
  font-size:12px;color:var(--text3);
  letter-spacing:0.3px;
}
@keyframes fadeUp{
  from{opacity:0;transform:translateY(12px);}
  to{opacity:1;transform:translateY(0);}
}
.phone-grid{
  display:grid;grid-template-columns:1fr 1fr;
  gap:8px;margin-bottom:20px;
}
.phone-card{
  background:var(--card);border:1px solid var(--border);
  border-radius:12px;overflow:hidden;cursor:pointer;
  backdrop-filter:blur(16px);
  transition:transform .15s,box-shadow .15s;
}
.phone-card:active{transform:scale(0.97);}
.phone-card-img{
  width:100%;aspect-ratio:1/1;
  display:flex;align-items:center;justify-content:center;
  font-size:48px;background:var(--sub);
  border-bottom:1px solid var(--border2);
  position:relative;overflow:hidden;
}

/* ══ PHONE VISUAL MOCKUP ══ */
.pv-wrap{
  position:absolute;inset:0;
  display:flex;align-items:center;justify-content:center;
  background:linear-gradient(145deg,#262932,#14161b);
}
.pv-phone{
  background:linear-gradient(160deg,#1b1d23,#0b0c10);
  border-radius:12px;
  border:1px solid rgba(255,255,255,0.14);
  position:relative;
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 8px 30px rgba(0,0,0,0.5),inset 0 1px 0 rgba(255,255,255,0.09);
}
.pv-phone.sm{width:44px;height:78px;}
.pv-phone.lg{width:90px;height:158px;border-radius:20px;border-width:3px;}
.pv-cam{
  position:absolute;
  background:#2a2a2a;border-radius:50%;
  border:1px solid rgba(255,255,255,0.08);
}
.pv-phone.sm .pv-cam{width:6px;height:6px;top:6px;}
.pv-phone.lg .pv-cam{width:11px;height:11px;top:13px;}
.pv-scr{
  position:relative;overflow:hidden;
  border-radius:6px;
  display:flex;align-items:center;justify-content:center;
  box-shadow:inset 0 2px 9px rgba(0,0,0,0.32);
}
.pv-scr::before{
  content:'';position:absolute;inset:0;
  background:linear-gradient(160deg,rgba(255,255,255,0.24),rgba(255,255,255,0) 55%);
  pointer-events:none;
}
.pv-phone.sm .pv-scr{width:34px;height:53px;margin-top:8px;}
.pv-phone.lg .pv-scr{width:70px;height:110px;margin-top:16px;border-radius:12px;}
.pv-ltr{
  position:relative;
  font-weight:800;color:#fff;
  font-family:'Inter',sans-serif;letter-spacing:-1px;
  text-shadow:0 1px 3px rgba(0,0,0,0.38);
}
.pv-phone.sm .pv-ltr{font-size:13px;}
.pv-phone.lg .pv-ltr{font-size:26px;}
/* ── Wearable Card Grid ── */
.wear-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:10px;margin-top:4px;
}
@media(max-width:480px){.wear-grid{grid-template-columns:repeat(2,1fr);gap:8px;}}
.wear-card{
  border-radius:14px;
  border:1.5px solid var(--border);
  background:var(--card);
  overflow:hidden;cursor:pointer;
  transition:all .2s cubic-bezier(.25,.8,.25,1);
}
.wear-card:hover{
  border-color:var(--blue);
  transform:translateY(-2px);
  box-shadow:0 8px 24px rgba(0,122,255,0.12);
}
.wear-card-vis{
  height:96px;
  display:flex;align-items:center;justify-content:center;
  overflow:hidden;
}
.wear-card-info{padding:10px 11px 12px;}
.wear-card-brand{
  font-size:9px;color:var(--text3);
  font-family:'Inter',sans-serif;
  letter-spacing:1.5px;text-transform:uppercase;margin-bottom:2px;
}
.wear-card-name{
  font-size:13px;font-weight:700;color:var(--text);
  line-height:1.2;margin-bottom:5px;
}
.wear-card-specs{font-size:11px;color:var(--text2);line-height:1.4;margin-bottom:6px;}
.wear-card-feats{display:flex;flex-wrap:wrap;gap:4px;}
.wear-feat-tag{
  font-size:9px;font-weight:600;
  padding:2px 7px;border-radius:10px;
  background:var(--src-bg);color:var(--text2);
  border:1px solid var(--border);
}
.wear-feat-tag.yes{
  background:rgba(52,199,89,0.12);color:#34c759;
  border-color:rgba(52,199,89,0.3);
}
.phone-card-body{padding:10px;}
.phone-card-brand{
  font-size:9px;color:var(--text3);
  font-family:'Inter',sans-serif;
  letter-spacing:1px;text-transform:uppercase;
}
.phone-card-name{
  font-size:12px;font-weight:600;
  color:var(--text);margin:2px 0 4px;
  line-height:1.3;
}
.phone-card-spec{
  font-size:10px;color:var(--text2);
  line-height:1.5;
}
.phone-card-tier{
  display:inline-block;margin-top:4px;
  font-size:9px;padding:2px 6px;border-radius:4px;
  background:var(--src-bg);color:var(--src-text);
  font-weight:600;
}
.phone-cmp-btn{display:none;}

/* ══ TWO-PANEL TIER SELECTION ══ */
.tier-compare-wrap{
  grid-column:1/-1;
  display:grid;grid-template-columns:1fr 1fr;
  gap:8px;
}
.tier-panel{
  border:1px solid var(--border);
  border-radius:12px;overflow:hidden;
  background:var(--card);
  backdrop-filter:blur(16px);
  display:flex;flex-direction:column;
}
.tier-panel-label{
  padding:11px 12px;
  font-size:12px;font-weight:600;color:var(--text2);
  background:var(--sub);
  border-bottom:1px solid var(--border);
  text-align:center;letter-spacing:0.3px;
}
.tier-brand-pills{
  display:flex;gap:6px;flex-wrap:wrap;
  padding:9px 10px;
  border-bottom:1px solid var(--border2);
  background:var(--sub);
}
.tier-brand-pill{
  font-size:11px;font-weight:500;padding:5px 12px;
  border-radius:100px;
  border:1px solid var(--border);
  background:transparent;color:var(--text2);
  cursor:pointer;transition:border-color .15s,background .15s,color .15s;white-space:nowrap;
}
.tier-brand-pill:hover{border-color:var(--text3);color:var(--text);}
.tier-brand-pill.active{background:var(--blue);color:#fff;border-color:var(--blue);font-weight:600;}
.tier-panel-inp{
  width:100%;padding:9px 12px;
  border:none;border-bottom:1px solid var(--border2);
  background:var(--input-bg);
  color:var(--text);font-size:13px;
  outline:none;
}
.tier-panel-inp::placeholder{color:var(--text3);}
.tier-select-trigger{
  width:100%;padding:11px 14px;
  background:var(--input-bg);
  border:none;border-bottom:1px solid var(--border2);
  color:var(--text3);font-size:14px;font-weight:500;
  cursor:pointer;text-align:left;
  transition:background .15s;
  display:flex;align-items:center;justify-content:space-between;
}
.tier-select-trigger:hover{background:var(--sub);}
.tier-select-trigger.has{color:var(--text);font-weight:600;}
.tier-drop{
  overflow:hidden;
  max-height:0;
  transition:max-height .28s ease;
}
.tier-drop.open{max-height:380px;}
.tier-phone-list{
  overflow-y:auto;
  max-height:240px;
}
.tier-phone-item{
  display:flex;align-items:center;gap:10px;
  padding:10px 12px;
  cursor:pointer;
  border-bottom:1px solid var(--border2);
  transition:background .1s;
}
.tier-phone-item:last-child{border-bottom:none;}
.tier-phone-item:hover{background:var(--sub);}
.tier-phone-item.selected{
  background:var(--src-bg);
  border-left:3px solid var(--blue);
}
.tier-phone-mini{
  width:40px;height:40px;border-radius:9px;
  overflow:hidden;position:relative;flex-shrink:0;
}
.tier-phone-name{font-size:13px;font-weight:600;color:var(--text);line-height:1.3;font-family:'Inter','Anuphan',sans-serif;font-variant-numeric:tabular-nums;}
.tier-phone-sub{font-size:11px;color:var(--text3);margin-top:2px;}
.tier-compare-bar{
  grid-column:1/-1;
  display:flex;align-items:center;gap:8px;
  padding:10px 12px;
  background:var(--card);
  border:1px solid var(--border);
  border-radius:12px;
  backdrop-filter:blur(16px);
  margin-top:4px;
}
.tier-cmp-device{
  flex:1;font-size:11px;color:var(--text3);
  text-align:center;white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis;
}
.tier-cmp-device.has{color:var(--text);font-weight:500;}
.tier-cmp-vs{
  font-family:'Inter',sans-serif;
  font-size:10px;color:var(--text3);flex-shrink:0;
}
.tier-cmp-btn{
  padding:8px 16px;
  background:var(--blue);color:#fff;
  border:none;border-radius:8px;
  font-size:13px;font-weight:600;
  cursor:pointer;transition:opacity .15s;flex-shrink:0;
}
.tier-cmp-btn:hover{opacity:.88;}
.tier-cmp-btn:disabled{opacity:.35;cursor:not-allowed;}
@media(max-width:500px){
  .tier-phone-name{font-size:12px;}
  .tier-phone-item{padding:9px 10px;gap:8px;}
  .tier-phone-mini{width:36px;height:36px;}
}
.spec-swipe-wrap{
  position:relative;
  background:var(--card);
  border:1px solid var(--border);
  border-radius:14px;
  overflow:hidden;
  margin-bottom:14px;
  backdrop-filter:blur(24px);
  -webkit-backdrop-filter:blur(24px);
  box-shadow:0 4px 32px rgba(0,0,0,.08);
}
.spec-swipe-hd{
  display:flex;align-items:center;justify-content:space-between;
  padding:12px 16px;
  border-bottom:1px solid var(--border);
  background:var(--sub);
}
.spec-swipe-title{
  font-size:13px;font-weight:600;color:var(--text);
}
.spec-swipe-nav{
  display:flex;align-items:center;gap:8px;
}
.spec-nav-btn{
  width:28px;height:28px;border-radius:50%;
  border:1px solid var(--border);
  background:var(--card);color:var(--text);
  cursor:pointer;font-size:13px;
  display:flex;align-items:center;justify-content:center;
  transition:all .15s;
}
.spec-nav-btn:hover{background:var(--blue);color:#fff;border-color:var(--blue);}
.spec-nav-btn:disabled{opacity:0.3;cursor:not-allowed;}
.spec-dots{display:flex;gap:5px;align-items:center;}
.spec-dot{
  width:6px;height:6px;border-radius:50%;
  background:var(--border);transition:all .2s;cursor:pointer;
}
.spec-dot.on{background:var(--blue);width:16px;border-radius:3px;}

.spec-pages{
  overflow-y:auto;
  max-height:calc(100vh - 160px);
}
.spec-page-track{}
.spec-page{min-width:100%;}

/* ══ TWO-PANEL COMPARE ══ */
.tpc-wrap{width:100%;}
.tpc-sticky{
  display:grid;grid-template-columns:1fr 1fr;
  position:sticky;top:0;z-index:5;
  background:var(--card);
  backdrop-filter:blur(20px);
  -webkit-backdrop-filter:blur(20px);
  border-bottom:2px solid var(--border);
}
.tpc-head{
  padding:12px 14px;
  font-size:12px;font-weight:700;color:var(--text);
  display:flex;align-items:center;gap:6px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.tpc-head:first-child{
  border-right:1px solid var(--border);
  border-bottom:3px solid var(--blue);
}
.tpc-head:last-child{border-bottom:3px solid rgba(0,85,212,0.35);}
.tpc-section-row{
  display:grid;grid-template-columns:1fr 1fr;
  background:var(--sub);
  border-top:1px solid var(--border);
}
.tpc-section-lbl{
  padding:8px 14px;
  font-size:11px;font-weight:600;color:var(--blue);
  border-left:3px solid var(--blue);
  display:flex;align-items:center;gap:5px;
}
.tpc-section-lbl:first-child{border-right:1px solid var(--border);}
.tpc-row{
  display:grid;grid-template-columns:1fr 1fr;
  border-bottom:1px solid var(--border2);
  transition:background .1s;
}
.tpc-row:hover{background:var(--sub);}
.tpc-cell{
  padding:10px 14px;
  border-right:1px solid var(--border2);
}
.tpc-cell:last-child{border-right:none;}
.tpc-cell-label{
  font-size:9px;color:var(--text3);
  letter-spacing:0.8px;text-transform:uppercase;
  margin-bottom:3px;
}
.tpc-cell-val{
  font-size:12px;
  font-family:'Inter',sans-serif;
  color:var(--text);font-weight:400;
  display:flex;align-items:center;gap:5px;
  flex-wrap:wrap;
}
.tpc-cell-val.win{color:var(--blue);font-weight:600;}
.tpc-cell-val.lose{color:var(--lose);font-weight:400;}
.tpc-win-dot{width:5px;height:5px;border-radius:50%;background:var(--blue);flex-shrink:0;}
@media(max-width:700px){
  /* Mobile: tab switcher */
  .tpc-sticky{display:flex;gap:0;}
  .tpc-head{
    flex:1;justify-content:center;text-align:center;
    font-size:11px;padding:10px 8px;
    border-bottom:3px solid var(--border2);
    cursor:pointer;transition:all .2s;
    white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  }
  .tpc-head:first-child{border-right:none;}
  .tpc-head.tpc-active{border-bottom:3px solid var(--blue);color:var(--blue);}
  .tpc-section-row{display:block;}
  .tpc-section-lbl{padding:7px 12px;font-size:10px;}
  .tpc-section-lbl:first-child{border-right:none;}
  .tpc-section-lbl.tpc-hide{display:none;}
  .tpc-row{display:block;}
  .tpc-cell{padding:8px 12px;border-right:none;border-bottom:1px solid var(--border2);}
  .tpc-cell.tpc-hide{display:none;}
  .tpc-cell-val{font-size:12px;}
}
.spec-compare-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
}
.spec-compare-col{
  padding:16px 18px;
}
.spec-compare-col:first-child{
  border-right:1px solid var(--border);
}
.spec-col-hd{
  font-size:11px;font-weight:600;color:var(--text);
  margin-bottom:12px;padding-bottom:8px;
  border-bottom:2px solid var(--blue);
  display:flex;align-items:center;gap:6px;
}
.spec-col-hd.b-side{border-bottom-color:var(--blue);}
.spec-item{
  padding:8px 0;
  border-bottom:1px solid var(--border2);
}
.spec-item:last-child{border-bottom:none;}
.spec-item-label{
  font-size:10px;color:var(--text3);
  margin-bottom:3px;
}
.spec-item-val{
  font-family:'Inter',sans-serif;
  font-size:12px;font-weight:500;color:var(--text);
  display:flex;align-items:center;gap:4px;
}
.spec-item-val.win{color:var(--blue);}
.spec-item-val.lose{color:var(--lose);font-weight:400;}
.spec-win-dot{width:5px;height:5px;border-radius:50%;background:var(--blue);flex-shrink:0;}

/* ══ BENCHMARK ══ */
.bench-wrap{
  background:var(--card);border:1px solid var(--border);
  border-radius:14px;overflow:hidden;margin-bottom:14px;
}
.bench-hd{
  display:flex;align-items:center;justify-content:space-between;
  padding:14px 20px;border-bottom:1px solid var(--border);
  flex-wrap:wrap;gap:8px;
}
.bench-hd-l{}
.bench-ttl{font-size:13px;font-weight:500;color:var(--text);}
.bench-meta{
  font-family:'Inter',sans-serif;
  font-size:9px;color:var(--text3);margin-top:2px;
}
.res-pills{display:flex;gap:3px;}
.res-pill{
  font-family:'Inter',sans-serif;font-size:10px;
  padding:4px 12px;border-radius:20px;
  border:1px solid var(--border);background:none;
  color:var(--text2);cursor:pointer;transition:all .15s;
}
.res-pill.on{background:var(--blue);color:#fff;border-color:var(--blue);}
.bench-legend{
  display:flex;gap:18px;padding:8px 20px;
  border-bottom:1px solid var(--border2);
  background:var(--sub);
}
.leg{display:flex;align-items:center;gap:6px;font-size:11px;color:var(--text2);}
.leg-dot{width:7px;height:7px;border-radius:50%;}
.leg-dot.a{background:var(--text3);}
.leg-dot.b{background:var(--blue);}
.b-row{
  display:grid;grid-template-columns:155px 1fr 1fr;
  border-bottom:1px solid var(--border2);
  transition:background .1s;
}
.b-row:last-child{border-bottom:none;}
.b-row:hover{background:var(--sub);}
.b-game{
  padding:10px 20px;font-size:12px;color:var(--text2);
  display:flex;flex-direction:column;gap:2px;
}
.b-gsub{font-family:'Inter',sans-serif;font-size:8px;color:var(--text3);}
.b-cell{
  padding:10px 16px;border-left:1px solid var(--border2);
  display:flex;flex-direction:column;gap:4px;
}
.b-fps-wrap{display:flex;align-items:center;gap:6px;}
.b-fps{font-family:'Inter',sans-serif;font-size:12px;font-weight:500;}
.b-fps.win{color:var(--blue);}
.b-fps.lose{color:var(--lose);font-weight:400;}
.b-track{height:3px;background:var(--border);border-radius:2px;overflow:hidden;}
.b-fill{height:100%;border-radius:2px;background:var(--text3);}
.b-fill.w{background:var(--blue);}
.b-pct{
  font-family:'Inter',sans-serif;
  font-size:8px;color:var(--blue);align-self:flex-start;
}

/* ══ HOME CONTENT ══ */
.home-section{
  width:100%;max-width:520px;
  margin-top:52px;
}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;}
.site-footer{
  margin-top:52px;padding:24px 0 8px;
  border-top:1px solid var(--bdr);
  text-align:center;
}
.site-footer p{
  font-size:11px;color:var(--text3);
  line-height:1.7;margin:0 0 4px;
}
.footer-contact{margin-top:12px;}
.footer-contact-btn{
  display:inline-flex;align-items:center;gap:6px;
  font-family:'Inter',sans-serif;font-size:12px;font-weight:500;
  color:var(--text2);background:var(--card);
  border:1px solid var(--border);border-radius:99px;
  padding:8px 18px;text-decoration:none;cursor:pointer;
  transition:all .2s;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  box-shadow:0 1px 6px rgba(0,0,0,.04);
}
.footer-contact-btn:hover{
  color:var(--blue);border-color:var(--blue);background:var(--src-bg);
  box-shadow:0 4px 16px rgba(0,85,212,.12);transform:translateY(-1px);
}
.home-section-lbl{
  font-family:'Inter',sans-serif;
  font-size:10px;color:var(--text3);
  letter-spacing:2px;text-transform:uppercase;
  margin-bottom:12px;text-align:center;
}
.pop-chips{
  display:flex;flex-wrap:wrap;
  gap:8px;justify-content:center;
}
.faq-list{
  display:flex;flex-direction:column;gap:5px;
}
.faq-item{
  background:var(--card);
  border:1px solid var(--border);
  border-radius:14px;
  overflow:hidden;
  backdrop-filter:blur(12px);
  box-shadow:0 1px 8px rgba(0,0,0,.05);
}
.faq-q{
  font-size:13px;font-weight:500;
  color:var(--text);padding:14px 16px;
  cursor:pointer;
  display:flex;justify-content:space-between;align-items:center;
  gap:8px;
}
.faq-q::after{content:'›';color:var(--text3);font-size:16px;flex-shrink:0;transition:transform .25s;}
.faq-item.open .faq-q::after{transform:rotate(90deg);}
.faq-a{
  font-size:12px;color:var(--text2);
  line-height:1.65;padding:0 16px;
  max-height:0;overflow:hidden;
  transition:max-height .35s ease,padding .3s;
}
.faq-item.open .faq-a{
  max-height:200px;padding:0 16px 14px;
}

/* ══ RESPONSIVE ══ */

/* Large desktop */
@media(min-width:1280px){
  .result-wrap{max-width:1200px;}
  .home-search-wrap{max-width:560px;}
  .home-hero{padding:12px 0 10px;}
  .home-cat-menu{gap:16px;max-width:880px;}
  .home-cat-card{padding:32px 12px;}
}

/* Tablet */
@media(max-width:1024px) and (min-width:701px){
  .result-wrap{padding:20px 20px 60px;}
  .two-panel{grid-template-columns:1fr 1fr;}
  .panel-col{padding:18px 16px;}
}

/* Mobile */
@media(max-width:700px){
  nav{padding:0 14px;}
  .home-body{padding:40px 16px 36px;}
  .home-cat-menu{grid-template-columns:repeat(2,1fr);max-width:480px;gap:10px;}
  .home-cat-card{padding:24px 10px;}

  /* Search — simpler layout on mobile */
  .search-wrap{max-width:100%;}
  .search-box{border-radius:12px;flex-direction:column;}
  .s-field{padding:12px 14px;}
  .s-divider{width:100%;height:1px;margin:0 14px;width:calc(100% - 28px);}
  .s-vs{display:none;}
  .s-btn{padding:14px;font-size:13px;border-radius:0;}

  .chips{max-width:100%;}
  .chip{font-size:10px;padding:5px 12px;}

  .result-wrap{padding:14px 12px 60px;}
  .r-tabs{width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch;}
  .r-tab{padding:5px 12px;font-size:10px;}

  /* Mobile — stack panels */
  .two-panel{
    grid-template-columns:1fr;
  }
  .panel-col:first-child{
    border-right:none;
    border-bottom:1px solid var(--border);
  }
  .panel-col{padding:16px 14px;}
  .gpu-name{font-size:18px;}
  .gpu-img{aspect-ratio:auto;height:90px;font-size:32px;margin-bottom:8px;}
  .gpu-tags{margin-bottom:6px;}
  .gpu-sub{margin-bottom:6px;}

  .b-row{grid-template-columns:100px 1fr 1fr;}
  .b-game{padding:9px 10px;font-size:11px;}
  .b-cell{padding:9px 8px;}
  .b-fps{font-size:11px;}
  .bench-hd{padding:12px 14px;}
  .bench-legend{padding:8px 14px;}

  .src-bar{padding:8px 10px;}
  .src-tag{font-size:8px;}
}

/* Narrow phones (≤ 430px) */
@media(max-width:430px){
  .home-cat-menu{gap:8px;}
  .home-cat-card{padding:20px 6px;}
  .home-cat-sub{font-size:9px;letter-spacing:1px;}
  .pop-chips{gap:6px;}
  .chip{font-size:9px;padding:4px 10px;}
}

/* Small phone (≤ 380px) — iPhone SE, Redmi budget, narrow screens */
@media(max-width:380px){
  nav{padding:0 10px;}
  .nav-logo{font-size:14px;}
  .home-body{padding:32px 12px 28px;}
  .home-cat-menu{gap:6px;}
  .home-cat-card{padding:16px 4px;}
  .home-cat-title{font-size:13px;padding-bottom:6px;}
  .home-cat-sub{font-size:8px;letter-spacing:0.6px;}
  .chip{font-size:9px;padding:4px 10px;}
  .chips{gap:5px;}
  .result-wrap{padding:10px 10px 60px;}
  .panel-col{padding:12px 10px;}
  .sbc-grid{grid-template-columns:1fr;}
  .sbc-name{font-size:10px;}
  .tier-phone-name{font-size:11px;}
  .tier-phone-item{padding:8px 9px;gap:7px;}
  .two-panel{grid-template-columns:1fr;}
  .r-tab{padding:4px 10px;font-size:9px;}
  .wear-grid{grid-template-columns:repeat(2,1fr);}
  .search-wrap{max-width:100%;}
}

/* ── Stat Bar Comparison Cards ── */
.sbc-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:14px;}
.sbc-card{background:var(--card);border-radius:16px;border:1.5px solid var(--border);overflow:hidden;box-shadow:0 2px 12px rgba(0,0,0,.06);}
.sbc-head{padding:11px 12px 9px;border-bottom:1px solid var(--border2);}
.sbc-brand{font-size:9px;font-weight:700;letter-spacing:2px;text-transform:uppercase;font-family:'Inter',sans-serif;margin-bottom:2px;}
.sbc-name{font-size:13px;font-weight:700;color:var(--text);line-height:1.3;}
.sbc-stats{padding:9px 12px 12px;}
.sbc-stat{margin-bottom:11px;}
.sbc-stat:last-child{margin-bottom:0;}
.sbc-stat-top{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:4px;}
.sbc-lbl{font-size:10px;color:var(--text3);font-family:'Inter',sans-serif;letter-spacing:.3px;text-transform:uppercase;}
.sbc-val{font-size:13px;font-weight:700;font-family:'Inter',sans-serif;color:var(--text);display:flex;align-items:center;gap:4px;}
.sbc-val.lose{color:var(--lose);font-weight:500;}
.sbc-win-dot{width:6px;height:6px;border-radius:50%;background:#34c759;flex-shrink:0;}
.sbc-bar-track{height:5px;border-radius:99px;background:var(--border);overflow:hidden;}
.sbc-bar-fill{height:100%;border-radius:99px;width:0;transition:width .8s cubic-bezier(.4,0,.2,1);}
.sbc-full-btn{width:100%;padding:9px;background:none;border:none;border-top:1px solid var(--border2);font-family:'Anuphan',sans-serif;font-size:11px;font-weight:600;color:var(--blue);cursor:pointer;display:flex;align-items:center;justify-content:center;gap:4px;transition:opacity .15s;}
.sbc-full-btn:hover{opacity:.7;}
.sbc-chevron{transition:transform .2s;display:inline-block;}
.sbc-chevron.open{transform:rotate(90deg);}
.sbc-spec-panel{display:none;border-top:1px solid var(--border2);}
.sbc-spec-panel.open{display:block;}
.sbc-spec-sec{padding:5px 12px 2px;font-size:8px;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;color:var(--text3);font-family:'Inter',sans-serif;background:var(--bg);}
.sbc-spec-row{display:flex;justify-content:space-between;padding:7px 12px;border-bottom:1px solid var(--border2);font-size:11px;}
.sbc-spec-row:last-child{border-bottom:none;}
.sbc-spec-k{color:var(--text3);}
.sbc-spec-v{font-family:'Inter',sans-serif;font-weight:500;color:var(--text);text-align:right;max-width:58%;}
.sbc-summary{background:var(--card);border-radius:14px;border:1.5px solid var(--border);padding:12px 14px 10px;margin-bottom:14px;}
.sbc-sum-label{font-size:9px;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;color:var(--text3);font-family:'Inter',sans-serif;margin-bottom:8px;}
.sbc-sum-row{font-size:12px;color:var(--text);line-height:1.55;padding:5px 0;border-bottom:1px solid var(--border2);}
.sbc-sum-row:last-child{border-bottom:none;padding-bottom:0;}
.sbc-sum-win{color:var(--blue);font-weight:600;}
/* fact rows (ข้อเท็จจริง มี/ไม่มี — ไม่ใช้แท่ง) */
.sbc-facts{margin-top:11px;padding-top:10px;border-top:1px solid var(--border2);}
.sbc-fact{display:flex;justify-content:space-between;align-items:center;padding:4px 0;}
.sbc-fact-lbl{font-size:10px;color:var(--text3);font-family:'Inter',sans-serif;letter-spacing:.3px;text-transform:uppercase;}
.sbc-fact-val{font-size:13px;font-weight:700;font-family:'Inter',sans-serif;line-height:1;}
.sbc-fact-yes{color:#34c759;}
.sbc-fact-no{color:var(--text3);opacity:.45;font-weight:500;}

/* ══ HOME HERO ══ */
.home-hero{
  text-align:center;
  padding:8px 0 6px;
  animation:fadeUp .5s ease both;
}
.home-h1{
  font-size:clamp(26px,5.5vw,48px);font-weight:600;
  letter-spacing:-1.2px;line-height:1.2;
  color:var(--text);margin-bottom:14px;
}
.hero-accent{
  font-weight:700;
  background:linear-gradient(135deg,#0055d4 0%,#7c3aed 100%);
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;
  background-clip:text;
}
[data-theme="dark"] .hero-accent{
  background:linear-gradient(135deg,#4dabff 0%,#a78bfa 100%);
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;
  background-clip:text;
}
.home-trust{
  font-size:12.5px;color:var(--text2);
  line-height:1.6;max-width:520px;margin:2px auto 0;
  padding:0 16px;
}
.home-trust b{color:var(--text);font-weight:600;}
.home-cat-count{
  font-family:'Inter',sans-serif;
  font-size:10px;color:var(--blue);font-weight:600;
  letter-spacing:.3px;margin-top:6px;opacity:.9;
}
@media(max-width:480px){
  .home-trust{font-size:11px;}
  .home-cat-count{font-size:9px;}
}