/* assets/css/styles.css — modern UI layer over local utility CSS */
:root{
  --bg:#F6F7FB;
  --surface:#FFFFFF;
  --surface-2:#F9FAFC;
  --text:#101828;
  --muted:#667085;
  --border:#E4E7EC;
  --accent:#E11D48;
  --accent-hover:#BE123C;
  --accent-soft:#FFF1F3;
  --ring:rgba(225,29,72,.18);
  --shadow:0 1px 2px rgba(16,24,40,.05),0 10px 24px rgba(16,24,40,.08);
  --shadow-hover:0 3px 6px rgba(16,24,40,.08),0 18px 40px rgba(16,24,40,.12);
  --radius:24px;
}

html{scroll-behavior:smooth;background:var(--bg)}
body{
  color:var(--text)!important;
  background:
    radial-gradient(circle at 12% -10%, rgba(225,29,72,.10), transparent 30rem),
    radial-gradient(circle at 90% 0%, rgba(99,102,241,.09), transparent 26rem),
    var(--bg)!important;
  text-rendering:optimizeLegibility;
}

/* Existing Tailwind color/border classes mapped to the new system */
.bg-\[\#FFFEF9\]{background-color:var(--surface-2)!important}
.bg-white{background-color:var(--surface)!important}
.bg-\[\#FCD34D\]{background:linear-gradient(135deg,var(--accent),#F43F5E)!important;color:#fff!important;border-color:transparent!important}
.text-black{color:var(--text)!important}
.text-black\/60,.text-black\/70,.text-black\/80{color:var(--muted)!important}
.border-black{border-color:var(--border)!important}
.border-\[3px\],.border-2{border-width:1px!important}
.hard-shadow{box-shadow:var(--shadow)!important}
.lowercase{text-transform:none!important}
.no-select{user-select:none}

/* Layout surfaces */
header.sticky{
  border-bottom:1px solid rgba(228,231,236,.85)!important;
  background:rgba(255,255,255,.86)!important;
  backdrop-filter:blur(16px);
  box-shadow:0 1px 0 rgba(16,24,40,.04);
}
main > section,
footer > div,
aside,
.cardRoot{
  border-radius:var(--radius)!important;
}
.rounded-2xl{border-radius:20px!important}
.rounded-3xl{border-radius:26px!important}
.rounded-full{border-radius:999px!important}

/* Controls */
input,select,button,a.pressable,.tabBtn{
  transition:border-color .16s ease,box-shadow .16s ease,background .16s ease,color .16s ease,transform .16s ease,filter .16s ease;
}
input:focus,select:focus{
  border-color:var(--accent)!important;
  box-shadow:0 0 0 4px var(--ring)!important;
  outline:none!important;
}
.pressable:hover,.tabBtn:hover{
  transform:translateY(-1px)!important;
  box-shadow:var(--shadow-hover)!important;
  filter:none!important;
}
.pressable:active,.tabBtn:active{transform:translateY(0)!important}
#tableClear.pressable:hover,#tableClear.pressable:active{transform:translateY(-50%)!important}
.accent-black{accent-color:var(--accent)!important}
.focus\:ring-black:focus{--tw-ring-color:var(--accent)!important}
.group-open\:bg-\[\#FCD34D\]:is(.group[open] *){background:var(--accent)!important;color:#fff!important}

/* Cards */
.cardRoot{
  position:relative;
  overflow:hidden;
  cursor:pointer;
  background:linear-gradient(180deg,#fff,#fff 70%,#FBFCFE)!important;
}
.cardRoot::before{
  content:"";
  position:absolute;
  inset:0 0 auto 0;
  height:4px;
  background:linear-gradient(90deg,var(--accent),#FB7185,#F97316);
  opacity:.95;
}
.cardRoot:hover{
  transform:translateY(-2px);
  box-shadow:var(--shadow-hover)!important;
}
.cardRoot a,.cardRoot button,.cardRoot input,.cardRoot select,.cardRoot label{cursor:pointer}
.cardRoot .compareBtn{background:#fff!important;color:var(--text)!important}
.cardRoot .compareBtn.bg-\[\#FCD34D\]{background:var(--accent-soft)!important;color:var(--accent)!important;border-color:#FDA4AF!important}

/* Rating visuals */
.ratingBox{
  max-width:380px;
  border:1px solid var(--border);
  background:var(--surface-2);
  border-radius:18px;
  padding:12px;
}
.ratingBox__head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  font-size:12px;
  font-weight:800;
  color:var(--muted);
}
.ratingBox__head strong{font-size:18px;color:var(--text)}
.ratingBar{
  margin-top:9px;
  height:10px;
  border-radius:999px;
  background:#EAECF0;
  overflow:hidden;
}
.ratingBar span{
  display:block;
  height:100%;
  border-radius:999px;
  background:linear-gradient(90deg,var(--accent),#FB7185);
}
.ratingBox__caption{margin-top:8px;font-size:11px;font-weight:700;color:var(--muted)}
.scoreMini{display:flex;align-items:center;gap:8px;min-width:92px}
.scoreMini strong{font-size:13px;color:var(--text)}
.scoreMini span{display:block;width:54px;height:8px;overflow:hidden;border-radius:999px;background:#EAECF0}
.scoreMini i{display:block;height:100%;border-radius:999px;background:linear-gradient(90deg,var(--accent),#FB7185)}

/* Top metrics */
#statAvg,#statBest,#statCheap{letter-spacing:-.02em}
#statBest{display:inline-block;max-width:100%;color:var(--text)!important;text-decoration-color:rgba(225,29,72,.35)!important}
#statBest:hover{color:var(--accent)!important;text-decoration-color:var(--accent)!important}
#statBestScore{color:var(--muted)}

/* Tables */
table{border-collapse:separate;border-spacing:0}
thead.bg-\[\#FCD34D\]{background:#FFF1F3!important;color:#9F1239!important}
thead tr{border-color:#FDA4AF!important}
tbody tr{border-color:var(--border)!important;transition:background .14s ease}
tbody tr:hover{background:#FFF7F8!important}
th{white-space:nowrap;color:#9F1239!important}
td{color:var(--text)}

/* Links */
a{transition:color .14s ease,text-decoration-color .14s ease,background .14s ease}
a:hover{color:var(--accent)}
a[target="_blank"]{text-underline-offset:3px}

/* Utility cleanup */
[style*="2px 2px 0"]{box-shadow:var(--shadow)!important}
img{max-width:100%}

@media (max-width:640px){
  :root{--radius:20px}
  main{padding-left:14px!important;padding-right:14px!important}
  .ratingBox{max-width:none}
}


/* Rating separation: catalog score vs external reviews */
.ratingSplit{
  display:grid;
  grid-template-columns:minmax(0,1.3fr) minmax(180px,.85fr);
  gap:12px;
  max-width:640px;
}
.ratingSplit .ratingBox{max-width:none;height:100%}
.trustBox{
  border:1px solid var(--border);
  background:#fff;
  border-radius:18px;
  padding:12px;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  min-height:92px;
}
.trustBox__label{font-size:12px;font-weight:900;color:var(--muted);text-transform:none}
.trustBox__value{margin-top:6px;font-size:18px;font-weight:900;color:var(--text);letter-spacing:-.02em}
.trustBox__meta{margin-top:6px;font-size:11px;font-weight:700;color:var(--muted)}
.trustBox--empty{background:var(--surface-2);color:var(--muted)}
.linkCheckBadge{
  display:inline-flex;
  align-items:center;
  gap:8px;
  max-width:100%;
  border:1px solid var(--border);
  border-radius:999px;
  background:var(--surface-2);
  padding:6px 10px;
  font-size:11px;
  font-weight:800;
  color:var(--muted);
  line-height:1.2;
  vertical-align:middle;
}
.linkCheckBadge__dot{width:8px;height:8px;border-radius:999px;background:#98A2B3;flex:0 0 auto}
.linkCheckBadge--ok{background:#ECFDF3;border-color:#ABEFC6;color:#067647}
.linkCheckBadge--ok .linkCheckBadge__dot{background:#17B26A}
.linkCheckBadge--warn{background:#FFFAEB;border-color:#FEDF89;color:#B54708}
.linkCheckBadge--warn .linkCheckBadge__dot{background:#F79009}
.linkCheckBadge--error{background:#FEF3F2;border-color:#FECDCA;color:#B42318}
.linkCheckBadge--error .linkCheckBadge__dot{background:#F04438}
.linkCheckBadge small{font-weight:700;color:inherit;opacity:.78}
@media (max-width:640px){.ratingSplit{grid-template-columns:1fr}.trustBox{min-height:auto}}