/* Mecânica Medellín - Global Styles (Orange/Graphite Premium Dark) */
:root{
  --bg0:#070707;
  --bg1:#111111;
  --card: rgba(255,255,255,.045);
  --card2: rgba(255,255,255,.06);
  --border: rgba(255,255,255,.10);
  --border2: rgba(255,255,255,.16);
  --text:#f3f3f3;
  --muted:#c7c7c7;
  --muted2:#9f9f9f;

  --primary:#ff7e1d;
  --primary2:#ff9b45;
  --secondary:#dedede;
  --secondary2:#a9a9a9;
  --primary-rgb:255,126,29;
  --primary2-rgb:255,155,69;
  --secondary-rgb:222,222,222;
  --secondary2-rgb:169,169,169;
  --warm-rgb:255,176,89;

  --blue:var(--primary);
  --blue2:var(--primary2);
  --purple:var(--secondary);
  --purple2:var(--secondary2);

  --success:#22c55e;
  --danger:#ef4444;

  --radius: 16px;
  --radius-sm: 12px;
  --shadow: 0 12px 34px rgba(0,0,0,.45);
  --shadow-soft: 0 8px 20px rgba(0,0,0,.34);
  --glow-blue: 0 0 14px rgba(var(--primary-rgb),.22);
  --glow-purple: 0 0 12px rgba(var(--secondary-rgb),.08);

  --max: 1200px;
}

*{margin:0;padding:0;box-sizing:border-box}
html,body{height:100%;background:
    radial-gradient(900px 500px at 50% -50%, rgba(var(--secondary-rgb),.12), transparent 60%),
    radial-gradient(900px 600px at 10% 0%, rgba(var(--primary-rgb),.22), transparent 55%),
    radial-gradient(900px 600px at 90% 10%, rgba(var(--warm-rgb),.12), transparent 55%),
    linear-gradient(180deg, var(--bg0), var(--bg1));}
body{
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, "Apple Color Emoji", "Segoe UI Emoji";
  color:var(--text);
  background:
    radial-gradient(900px 500px at 50% -50%, rgba(var(--secondary-rgb),.12), transparent 60%),
    radial-gradient(900px 600px at 10% 0%, rgba(var(--primary-rgb),.22), transparent 55%),
    radial-gradient(900px 600px at 90% 10%, rgba(var(--warm-rgb),.12), transparent 55%),
    linear-gradient(180deg, var(--bg0), var(--bg1));
  overflow-x:hidden;
}

a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
svg{display:block}

/* Subtle noise overlay (premium feel) */
body:before{
  content:"";
  display:none;
  position:fixed; inset:0;
  pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23n)' opacity='.14'/%3E%3C/svg%3E");
  opacity:.22;
  mix-blend-mode:overlay;
}

/* Mechanical pattern overlay (exclusive, subtle) */
body:after{
  content:"";
  display:none;
  position:fixed; inset:-40px;
  pointer-events:none;
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20width%3D%27220%27%20height%3D%27220%27%20viewBox%3D%270%200%20220%20220%27%3E%0A%20%20%3Cg%20opacity%3D%270.12%27%20fill%3D%27none%27%20stroke%3D%27white%27%20stroke-width%3D%273%27%3E%0A%20%20%20%20%3Cpath%20d%3D%27M110%2058c-28.7%200-52%2023.3-52%2052s23.3%2052%2052%2052%2052-23.3%2052-52-23.3-52-52-52z%27/%3E%0A%20%20%20%20%3Cpath%20d%3D%27M110%2078c-17.7%200-32%2014.3-32%2032s14.3%2032%2032%2032%2032-14.3%2032-32-14.3-32-32-32z%27/%3E%0A%20%20%20%20%3Cpath%20d%3D%27M166%2098l18-8%2010%2018-18%208z%27%20opacity%3D%270.7%27/%3E%0A%20%20%20%20%3Cpath%20d%3D%27M54%20122l-18%208-10-18%2018-8z%27%20opacity%3D%270.7%27/%3E%0A%20%20%20%20%3Cpath%20d%3D%27M70%2050l14%2014-12%2012-14-14z%27%20opacity%3D%270.5%27/%3E%0A%20%20%20%20%3Cpath%20d%3D%27M150%20170l-14-14%2012-12%2014%2014z%27%20opacity%3D%270.5%27/%3E%0A%20%20%3C/g%3E%0A%20%20%3Cg%20opacity%3D%270.08%27%20fill%3D%27none%27%20stroke%3D%27white%27%20stroke-width%3D%274%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%0A%20%20%20%20%3Cpath%20d%3D%27M46%20184l28-28m-6-22a18%2018%200%201%200%2016%2016l-18%2018-10-10%2018-18z%27/%3E%0A%20%20%20%20%3Cpath%20d%3D%27M156%2044c16%200%2028%2012%2028%2028%200%206-2%2012-5%2016l-18-18%208-8-8-8-10%2010-8-8%208-8c4-2%2010-4%2015-4z%27%20opacity%3D%270.7%27/%3E%0A%20%20%3C/g%3E%0A%3C/svg%3E");
  background-size: 220px 220px;
  background-repeat: repeat;
  opacity:.18;
  filter: blur(.2px);
  mix-blend-mode: soft-light;
}

/* Layout helpers */
.bg-dark{background:
    radial-gradient(900px 500px at 50% -50%, rgba(var(--secondary-rgb),.12), transparent 60%),
    radial-gradient(900px 600px at 10% 0%, rgba(var(--primary-rgb),.22), transparent 55%),
    radial-gradient(900px 600px at 90% 10%, rgba(var(--warm-rgb),.12), transparent 55%),
    linear-gradient(180deg, var(--bg0), var(--bg1));}
.container{
  width:100%;
  max-width:var(--max);
  margin:0 auto;
  padding: 0 22px 60px;
}

/* Navbar */
.navbar{
  position:sticky; top:0; z-index:50;
  padding: 16px 22px;
  display:flex; align-items:center; justify-content:space-between;
  border-bottom:1px solid rgba(255,255,255,.08);
  background: rgba(8,8,8,.78);
  backdrop-filter: none;
}
.navbar:after{
  content:"";
  position:absolute; left:0; right:0; bottom:-1px; height:1px;
  background: linear-gradient(90deg, transparent, rgba(var(--primary-rgb),.48), rgba(var(--secondary-rgb),.22), transparent);
  opacity:.7;
}
.navbar-brand{display:flex; align-items:center; gap:12px; font-weight:800; letter-spacing:.2px}
.navbar-logo{width:34px;height:34px;border-radius:10px; box-shadow: var(--glow-blue), var(--glow-purple)}
.navbar-nav{display:flex; gap:14px; align-items:center; flex-wrap:wrap}
.navbar-nav a{
  font-size: 13px;
  color: var(--muted);
  padding: 9px 12px;
  border-radius: 999px;
  transition: .2s ease;
}
.navbar-nav a:hover{
  color: var(--text);
  background: rgba(255,255,255,.06);
  box-shadow: 0 0 0 1px rgba(255,255,255,.06) inset;
}

/* Buttons */
.btn, .btn-primary, .btn-secondary, .btn-ghost, .btn-danger, .btn-discord, .box-btn{
  display:inline-flex; align-items:center; justify-content:center;
  gap:10px;
  padding: 10px 14px;
  border-radius: 999px;
  font-weight: 700;
  font-size: 13px;
  border: 1px solid transparent;
  transition: transform .15s ease, box-shadow .15s ease, background .15s ease, border-color .15s ease;
  user-select:none;
}
.btn-primary{
  background: linear-gradient(135deg, rgba(var(--primary-rgb),.98), rgba(var(--primary2-rgb),.90));
  box-shadow: var(--glow-blue), var(--glow-purple);
  color: #171717;
}
.btn-primary:hover{transform: translateY(-1px); box-shadow: 0 0 18px rgba(var(--primary-rgb),.30)}
.btn-secondary{
  background: rgba(255,255,255,.06);
  border-color: rgba(255,255,255,.10);
  color: var(--text);
}
.btn-secondary:hover{transform: translateY(-1px); border-color: rgba(255,255,255,.18); background: rgba(255,255,255,.08)}
.btn-ghost{
  background: transparent;
  border-color: rgba(255,255,255,.10);
  color: var(--muted);
}
.btn-ghost:hover{transform: translateY(-1px); color: var(--text); background: rgba(255,255,255,.05); border-color: rgba(255,255,255,.18)}
.btn-danger{
  background: rgba(239,68,68,.12);
  border-color: rgba(239,68,68,.25);
  color: #ffd1d1;
}
.btn-danger:hover{transform: translateY(-1px); background: rgba(239,68,68,.18); border-color: rgba(239,68,68,.35)}
.btn-discord{
  background: rgba(var(--primary-rgb),.14);
  border-color: rgba(var(--primary-rgb),.32);
  color: var(--text);
}
.btn-discord:hover{transform: translateY(-1px); background: rgba(var(--primary-rgb),.22); border-color: rgba(var(--primary-rgb),.46); box-shadow: 0 0 16px rgba(var(--primary-rgb),.20)}

/* Small buttons used in Tunagem/Manutenção top actions */
.btn-small{
  display:inline-flex; align-items:center; justify-content:center;
  gap:10px;
  padding: 8px 12px;
  font-size: 12px;
  border-radius: 999px;
  font-weight: 800;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.10);
  color: var(--text);
  transition: transform .15s ease, box-shadow .15s ease, background .15s ease, border-color .15s ease;
}
.btn-small:hover{
  transform: translateY(-1px);
  border-color: rgba(255,255,255,.18);
  background: rgba(255,255,255,.08);
}
.btn-small.primary{
  background: linear-gradient(135deg, rgba(var(--primary-rgb),.98), rgba(var(--primary2-rgb),.90));
  border-color: transparent;
  box-shadow: var(--glow-blue), var(--glow-purple);
  color: #171717;
}
.btn-small.primary:hover{box-shadow: 0 0 18px rgba(var(--primary-rgb),.30)}

.btn:focus-visible,
.btn-primary:focus-visible,
.btn-secondary:focus-visible,
.btn-ghost:focus-visible,
.btn-danger:focus-visible,
.btn-discord:focus-visible,
a:focus-visible,
button:focus-visible,
input:focus-visible{
  outline:none;
  box-shadow: 0 0 0 3px rgba(var(--primary-rgb),.28), 0 0 0 1px rgba(255,255,255,.18) inset;
}

/* Cards */
.card, .feature-card, .calculator-box, .hierarchy-card, .summary-box, .modal-card{
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-soft);
  contain: layout paint;
}
.feature-card, .hierarchy-card{padding: 18px}
.card{padding: 18px}
.feature-icon{
  width: 36px; height: 36px;
  border-radius: 12px;
  display:flex; align-items:center; justify-content:center;
  background: linear-gradient(135deg, rgba(var(--primary-rgb),.22), rgba(var(--secondary-rgb),.12));
  border: 1px solid rgba(255,255,255,.10);
  box-shadow: var(--glow-blue);
  margin-bottom: 12px;
  color: var(--blue2);
}
.feature-card h3{font-size: 14px; margin-bottom: 6px}
.feature-card p{font-size: 12px; color: var(--muted2); line-height: 1.5}

/* Home */
.page-home .hero{
  margin: 34px auto 26px;
  max-width: 920px;
  padding: 54px 26px;
  text-align:center;
  border-radius: 22px;
  border: 1px solid rgba(255,255,255,.10);
  background:
    radial-gradient(700px 380px at 50% 0%, rgba(var(--primary-rgb),.26), transparent 65%),
    radial-gradient(700px 420px at 30% 30%, rgba(var(--secondary-rgb),.10), transparent 65%),
    rgba(255,255,255,.03);
  box-shadow: var(--shadow);
}
.hero-tag{
  display:inline-flex;
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.10);
  color: var(--muted);
  font-size: 12px;
  margin-bottom: 16px;
}
.hero h1{font-size: clamp(30px, 4vw, 46px); line-height: 1.1; font-weight: 900; letter-spacing: -0.6px}
.hero .highlight{color: var(--primary); text-shadow: none}
.hero p{
  margin-top: 14px;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.6;
  max-width: 720px;
  margin-left:auto; margin-right:auto;
}
.hero-buttons{margin-top: 22px; display:flex; gap:12px; justify-content:center; flex-wrap:wrap}

/* Keep every section visually centered and symmetric on Home */
.page-home .features,
.page-home .calculators,
.page-home .hierarchy,
.page-home .faq,
.page-home .footer{
  width:100%;
  max-width: var(--max);
  margin-left:auto;
  margin-right:auto;
  padding-left:22px;
  padding-right:22px;
}

.page-home .features,
.page-home .calculators,
.page-home .hierarchy,
.page-home .faq,
.category-accordion,
.category-section,
.admin-panel{
  content-visibility: auto;
  contain-intrinsic-size: 1px 320px;
}

.features{
  margin-top: 28px;
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}
.section-title{
  font-size: 20px;
  font-weight: 900;
  letter-spacing:-.3px;
  margin: 34px 0 14px;
}
.calculator-grid{
  display:grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
  margin-top: 14px;
}
.calculator-box{
  padding: 18px;
}
.calculator-box h3{font-size: 16px; margin-bottom: 8px}
.calculator-box p{color: var(--muted2); font-size: 12px; line-height:1.5; margin-bottom: 14px}
.box-btn{width: fit-content}

/* Comece por aqui (cards) */
.calculator-box{
  position: relative;
  overflow:hidden;
  padding: 26px;
  min-height: 200px;
  background:
    radial-gradient(500px 240px at 20% 10%, rgba(var(--primary-rgb),.18), transparent 60%),
    radial-gradient(520px 260px at 90% 40%, rgba(var(--secondary-rgb),.10), transparent 62%),
    rgba(255,255,255,.035);
}
.calculator-box:hover{
  border-color: rgba(255,255,255,.16);
  box-shadow: var(--shadow-soft);
}
.start-badge{
  width: 44px; height: 44px;
  border-radius: 14px;
  display:flex; align-items:center; justify-content:center;
  background: linear-gradient(135deg, rgba(var(--primary-rgb),.98), rgba(var(--primary2-rgb),.86));
  box-shadow: 0 10px 22px rgba(var(--primary-rgb),.20);
  border: 1px solid rgba(255,255,255,.16);
  margin-bottom: 18px;
}
.start-badge svg{width:22px;height:22px;color:#171717}
.start-illustration{
  position:absolute;
  right:-18px; top:-18px;
  width: 180px; height: 180px;
  opacity: .12;
  transform: rotate(12deg);
  filter: none;
}
.start-illustration svg{width:100%;height:100%; color:var(--secondary)}
.calculator-box h3{font-size: 18px; margin-bottom: 8px}
.calculator-box p{max-width: 46ch}

.hierarchy{
  margin-top: 26px;
}
.hierarchy-grid{
  display:grid;
  grid-template-columns: 1fr;
  gap: 18px;
}
.hierarchy-row-title{
  display:flex;
  align-items:center;
  gap: 14px;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: .14em;
  text-transform: uppercase;
  margin-bottom: 10px;
  color: rgba(var(--primary-rgb), .95);
}

.hierarchy-row-title::after{
  content:"";
  height: 2px;
  flex: 1;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(var(--primary-rgb),.9), rgba(var(--primary-rgb),.0));
  opacity: .85;
}

.region-norte.hierarchy-row-title{color: rgba(var(--primary-rgb),.96)}
.region-norte.hierarchy-row-title::after{background: linear-gradient(90deg, rgba(var(--primary-rgb),.9), rgba(var(--primary-rgb),.0));}
.region-central.hierarchy-row-title{color: rgba(var(--secondary-rgb),.96)}
.region-central.hierarchy-row-title::after{background: linear-gradient(90deg, rgba(var(--secondary-rgb),.62), rgba(var(--secondary-rgb),.0));}
.region-sul.hierarchy-row-title{color: rgba(var(--warm-rgb),.96)}
.region-sul.hierarchy-row-title::after{background: linear-gradient(90deg, rgba(var(--warm-rgb),.72), rgba(var(--warm-rgb),.0));}

/* Hierarchy: symmetric grid (no squeezed thin columns) */
.hierarchy-row-wrapper{
  display:flex;
  flex-direction:column;
  gap:10px;
  padding: 0;
  border-radius: var(--radius);
}
.hierarchy-row{
  display:flex;
  gap: 14px;
  overflow-x:auto;
  padding-bottom: 10px;
  scroll-snap-type: x mandatory;
}
.hierarchy-card{
  flex: 0 0 260px;
  height: 220px;
  padding: 14px;
  scroll-snap-align: start;
}
.hierarchy-card h3{
  font-size: 12px;
  letter-spacing:.2px;
  text-transform: uppercase;
  color: var(--text);
  margin-bottom: 10px;
  padding-bottom: 10px;
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.hierarchy-card ul{
  list-style:none;
  display:flex;
  flex-direction:column;
  gap: 6px;
  max-height: 150px;
  overflow:auto;
  padding-right: 6px;
}

.hierarchy-row::-webkit-scrollbar{height: 10px}
.hierarchy-row::-webkit-scrollbar-thumb{background: rgba(255,255,255,.10); border-radius: 999px}
.hierarchy-row::-webkit-scrollbar-track{background: rgba(255,255,255,.04); border-radius: 999px}
.hierarchy-card li{font-size: 12px; color: var(--muted); line-height: 1.35}
.hierarchy-card ul::-webkit-scrollbar{width: 8px}
.hierarchy-card ul::-webkit-scrollbar-thumb{background: rgba(255,255,255,.10); border-radius: 999px}
.text-muted{color: var(--muted)}
.footer{
  margin-top: 42px;
  padding: 22px 0 0;
  border-top: 1px solid rgba(255,255,255,.08);
  color: var(--muted2);
  text-align:center;
  font-size: 12px;
}

/* FAQ */
.faq{margin-top: 26px}
.faq-item{
  border: 1px solid rgba(255,255,255,.08);
  background: rgba(255,255,255,.03);
  border-radius: var(--radius);
  overflow:hidden;
  margin-bottom: 12px;
}
.faq-question{
  padding: 14px 16px;
  cursor:pointer;
  display:flex;
  justify-content:space-between;
  align-items:center;
  font-weight:800;
}
.faq-question:hover{background: rgba(255,255,255,.04)}
.faq-answer{
  max-height: 0;
  overflow: hidden;
  padding: 0 16px;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.6;
  transition: max-height .25s ease, padding .25s ease;
}
.faq-item.active .faq-answer{
  max-height: 240px;
  padding: 0 16px 14px;
}
.faq-chevron{transition: transform .2s ease; opacity:.85}
.faq-item.active .faq-chevron{transform: rotate(180deg)}

/* Forms */
.form-group{display:flex; flex-direction:column; gap:6px; margin-bottom: 10px}
.form-label{font-size: 12px; color: var(--muted)}
.form-input, .search-input, input, select, textarea{
  width:100%;
  padding: 11px 12px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.28);
  color: var(--text);
}
.form-input::placeholder, .search-input::placeholder{color: rgba(var(--secondary-rgb),.55)}
.search-box{margin-bottom: 14px}
.search-input{max-width: 420px}

/* Tunagem & Manutenção layout */
.page-tunagem .container,
.page-manutencao .container{
  padding-top: 22px;
  display:grid;
  grid-template-columns: 1fr 380px;
  gap: 18px;
  align-items:start;
}
.items-section{min-width:0}
.sidebar{
  position: sticky;
  top: 86px;
  align-self:start;
}
.summary-box{
  padding: 16px;
}
.summary-title{font-weight: 900; margin-bottom: 10px}
.summary-item{
  display:flex;
  justify-content:space-between;
  color: var(--muted);
  font-size: 13px;
  padding: 8px 0;
  border-bottom: 1px solid rgba(255,255,255,.06);
}
.summary-item:last-child{border-bottom:none}
.total{
  margin-top: 10px;
  font-size: 18px;
  font-weight: 1000;
  letter-spacing:-.3px;
  color: var(--text);
}

/* Page header (title + actions) */
.page-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 14px;
  margin-bottom: 14px;
}
.page-title{
  font-size: 28px;
  font-weight: 900;
  letter-spacing: -0.3px;
  margin: 0;
}
.top-buttons{display:flex; gap:10px; justify-content:flex-end; margin:0}

/* Accordions / categories */
.category-accordion, .category-section{
  margin-bottom: 14px;
  border-radius: var(--radius);
  overflow:hidden;
  border: 1px solid rgba(255,255,255,.08);
  background: rgba(255,255,255,.025);
}
.accordion-header{
  padding: 12px 14px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  cursor:pointer;
}
.accordion-header:hover{background: rgba(255,255,255,.035)}
.accordion-title{
  display:flex; align-items:center; gap:10px;
  font-weight: 900;
  font-size: 16px;
}
.accordion-toggle{
  display:inline-flex;
  align-items:center;
  gap:8px;
  color: var(--muted);
  font-size: 12px;
  border: 1px solid rgba(255,255,255,.10);
  padding: 7px 11px;
  border-radius: 999px;
  background: rgba(255,255,255,.03);
  user-select:none;
}
.toggle-icon{
  display:inline-block;
  transition: transform .18s ease;
  opacity:.9;
}
.accordion-header.active .toggle-icon{
  transform: rotate(180deg);
}
/* Accordion show/hide */
.accordion-content{padding: 16px 16px 18px; display:none}
.accordion-content.active{display:block}
.accordion-header.active .accordion-toggle{
  background: rgba(var(--primary-rgb),.13);
  border-color: rgba(var(--primary-rgb),.34);
  color: #fff2e8;
}

/* Subcategory headers (e.g. Full Tuning - escolha 1) */
.subcategory-section{margin-top: 10px}
.subcategory-header{
  display:inline-flex;
  align-items:center;
  gap: 8px;
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(var(--primary-rgb),.10);
  border: 1px solid rgba(var(--primary-rgb),.26);
  color: #fff0e2;
  font-weight: 900;
  font-size: 12px;
  margin: 4px 0 12px;
}
.subcategory-header .sub-dot{
  width: 8px; height: 8px; border-radius: 999px;
  background: rgba(var(--primary-rgb),.95);
  box-shadow: 0 0 0 4px rgba(var(--primary-rgb),.13);
}
.subcategory-header .sub-meta{
  opacity: .75;
  font-weight: 800;
}
.items-grid{
  display:grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

/* Item card */
.item-card{
  position:relative;
  padding: 12px 12px 10px;
  border-radius: var(--radius);
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.03);
  transition: .15s ease;
}
.item-card:hover{
  border-color: rgba(255,255,255,.16);
  background: rgba(255,255,255,.04);
}
.item-header{display:flex; align-items:flex-start; justify-content:space-between; gap:10px}
.item-name{font-weight: 900; font-size: 13px}
.item-price{color: var(--muted); font-size: 12px; margin-top: 4px}
.item-radio{opacity:.55}
.item-tag{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding: 6px 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 800;
  margin-bottom: 10px;
  background: rgba(var(--primary-rgb),.10);
  border: 1px solid rgba(var(--primary-rgb),.24);
  color: #ffe6cf;
}
.item-tag[class*="tag-"]{ /* keep old dynamic classes harmless */ }
.item-card.selected,
.item-card.active{
  border-color: rgba(var(--primary-rgb),.44);
  box-shadow: 0 0 0 1px rgba(var(--primary-rgb),.24) inset, var(--glow-blue);
  background: rgba(var(--primary-rgb),.07);
}
.item-card.selected:after,
.item-card.active:after{
  content:"✓";
  position:absolute;
  top: 10px; right: 10px;
  width: 22px; height: 22px;
  display:flex; align-items:center; justify-content:center;
  border-radius: 999px;
  background: rgba(var(--primary-rgb),.22);
  border: 1px solid rgba(var(--primary-rgb),.42);
  color: #fff4ec;
  font-size: 12px;
  box-shadow: var(--glow-blue);
}

/* Manutenção - quantity & price buttons */
.item-prices{margin-top: 10px}
.price-lines{display:flex; flex-direction:column; gap:6px}
.price-line{display:flex; justify-content:space-between; gap:12px; color: var(--muted); font-size:12px}
.price-line strong{color:var(--text); font-weight:900}
.price-btn{
  padding: 7px 10px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.03);
  color: var(--muted);
  font-weight: 800;
  font-size: 12px;
  cursor:pointer;
}
.price-btn:hover{background: rgba(255,255,255,.05); border-color: rgba(255,255,255,.16); color: var(--text)}
.price-btn.active{
  background: rgba(var(--primary-rgb),.13);
  border-color: rgba(var(--primary-rgb),.36);
  color: #fff1e5;
  box-shadow: var(--glow-blue);
}
.item-buttons{display:flex; justify-content:flex-start; gap:10px; flex-wrap:wrap; align-items:center; margin-top: 12px}
.quantity-control{display:flex; align-items:center; gap:8px}
.item-card .quantity-control{margin-left:auto}
.qty-btn{
  width: 34px; height: 34px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.03);
  color: var(--text);
  font-weight: 1000;
  cursor:pointer;
}
.qty-btn:hover{background: rgba(255,255,255,.05); border-color: rgba(255,255,255,.16)}
.qty-input{
  width: 56px;
  text-align:center;
  padding: 9px 10px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.25);
  color: var(--text);
}

/* Empty state */
.empty-state{
  padding: 18px;
  border-radius: var(--radius);
  border: 1px dashed rgba(255,255,255,.16);
  background: rgba(255,255,255,.02);
  color: var(--muted);
}

/* Admin */
.page-admin .container{padding-top: 22px}

.page-admin .admin-header{
  display:flex; align-items:flex-end; justify-content:space-between;
  gap: 14px; margin: 6px 0 14px;
}
.page-admin .page-title{font-size: 28px; font-weight: 1000; margin: 0}
.page-admin .admin-subtitle{margin: 6px 0 0; color: var(--muted); line-height:1.45}

.page-admin .admin-help{margin-bottom: 16px}
.page-admin .admin-help .mode-toggle{margin-bottom: 10px}
.page-admin .admin-help p{margin: 0; color: var(--muted)}

.page-admin .admin-panel{padding-bottom: 6px}

.page-admin .admin-help-row{
  display:flex;
  gap: 14px;
  align-items:center;
  justify-content:space-between;
}

.page-admin .admin-sticky{
  position: sticky;
  top: 72px;
  z-index: 5;
}

.page-admin .admin-layout{
  display:grid;
  grid-template-columns: 360px minmax(0,1fr);
  gap: 16px;
}

.page-admin .admin-layout-faq{
  grid-template-columns: 420px minmax(0,1fr);
}

.page-admin .admin-sidebar{
  position: sticky;
  top: 150px;
  align-self:start;
}

.page-admin .card-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 10px;
  margin-bottom: 10px;
}

.page-admin .pill{
  display:inline-flex;
  align-items:center;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.03);
  color: var(--muted);
  font-size: 12px;
  font-weight: 900;
}
.page-admin .pill-blue{border-color: rgba(var(--primary-rgb),.38); background: rgba(var(--primary-rgb),.11); color:#fff0e4}
.page-admin .pill-purple{border-color: rgba(var(--secondary-rgb),.28); background: rgba(var(--secondary-rgb),.08); color:#f1f1f1}

.page-admin .form-grid{
  display:grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: 12px;
}

.page-admin .table-scroll{
  max-height: 520px;
  overflow: auto;
  padding-right: 2px;
}

.page-admin .table-scroll thead th{
  position: sticky;
  top: 0;
  background: rgba(14,14,14,.95);
  backdrop-filter: none;
  z-index: 2;
}

@media (max-width: 980px){
  .page-admin .admin-layout{grid-template-columns:1fr;}
  .page-admin .admin-sidebar{position:relative; top:auto;}
  .page-admin .admin-sticky{position:relative; top:auto;}
  .page-admin .form-grid{grid-template-columns:1fr;}
}

.page-admin .grid-2{display:grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 16px}
@media (max-width: 980px){ .page-admin .grid-2{grid-template-columns:1fr;} }

.page-admin .mode-toggle{display:flex; gap:8px; align-items:center; flex-wrap:wrap}
.page-admin .mode-btn{
  padding: 8px 12px;
  border-radius: 999px;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.03);
  color: var(--muted);
  cursor:pointer;
  font-weight: 900;
  font-size: 12px;
}
.page-admin .mode-btn.active{
  background: rgba(var(--primary-rgb),.13);
  border-color: rgba(var(--primary-rgb),.38);
  color:#fff0e4;
  box-shadow: var(--glow-blue);
}

.page-admin .category-list{list-style:none; padding:0; margin:0}
.page-admin .category-list li{
  display:flex; align-items:center; justify-content:space-between;
  gap: 10px;
  padding: 10px 10px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.06);
  background: rgba(255,255,255,.02);
  margin-bottom: 10px;
}
.page-admin .category-list li.active{
  border-color: rgba(var(--primary-rgb),.38);
  background: rgba(var(--primary-rgb),.09);
  box-shadow: var(--glow-blue);
}
.page-admin .cat-name{font-weight: 1000}
.page-admin .cat-name:hover{color:var(--primary)}
.page-admin .cat-actions{display:flex; gap:8px; flex-wrap:wrap; justify-content:flex-end}

.page-admin .table-wrap{overflow-x:auto}
.page-admin table{width:100%; border-collapse:separate; border-spacing:0 10px}
.page-admin thead th{
  text-align:left;
  font-size: 12px;
  color: var(--muted);
  font-weight: 900;
  padding: 0 10px 6px;
}
.page-admin tbody tr{
  background: rgba(255,255,255,.02);
  border: 1px solid rgba(255,255,255,.06);
}
.page-admin tbody td{
  padding: 10px;
  border-top: 1px solid rgba(255,255,255,.06);
  border-bottom: 1px solid rgba(255,255,255,.06);
}
.page-admin tbody tr td:first-child{
  border-left: 1px solid rgba(255,255,255,.06);
  border-top-left-radius: 14px;
  border-bottom-left-radius: 14px;
}
.page-admin tbody tr td:last-child{
  border-right: 1px solid rgba(255,255,255,.06);
  border-top-right-radius: 14px;
  border-bottom-right-radius: 14px;
}
.page-admin tbody tr:hover{
  background: rgba(var(--primary-rgb),.07);
  border-color: rgba(var(--primary-rgb),.26);
}

.page-admin .hidden{display:none !important}

.page-admin .modal-overlay{
  position:fixed; inset:0;
  background: rgba(0,0,0,.65);
  display:flex; align-items:center; justify-content:center;
  padding: 18px;
  z-index: 80;
}
.page-admin .modal-card{max-width: 760px; width:100%; padding: 16px}
.page-admin .modal-actions{display:flex; gap:10px; justify-content:flex-end; margin-top: 12px}
/* Denied page */
.page-denied .container{padding-top: 36px}
.page-denied .card{max-width: 720px; margin: 0 auto; text-align:center}
.page-denied h1{font-size: 28px; font-weight:1000; margin-bottom: 8px}
.page-denied p{color: var(--muted); line-height:1.6; margin-bottom: 16px}

/* Responsive */
@media (max-width: 980px){
  .features{grid-template-columns: 1fr}
  .calculator-grid{grid-template-columns: 1fr}
  .hierarchy-grid{grid-template-columns: 1fr}
  .page-tunagem .container,
  .page-manutencao .container{
    grid-template-columns: 1fr;
  }
  .sidebar{position:relative; top:auto}
  .items-grid{grid-template-columns: 1fr}
  .grid-2{grid-template-columns: 1fr}
  .navbar-nav{gap:8px}
}


/* Admin toolbar */
.admin-toolbar{
  display:flex;
  gap:12px;
  align-items:center;
  justify-content:space-between;
  margin-top:12px;
}
.admin-search{
  flex:1;
}
.admin-search input{
  width:100%;
  padding:10px 12px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.10);
  background:rgba(0,0,0,.25);
  color:var(--text, #f3f3f3);
  outline:none;
}
.admin-search input:focus{
  border-color: rgba(var(--primary-rgb),.48);
  box-shadow: 0 0 0 4px rgba(var(--primary-rgb),.14);
}
.admin-actions{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  justify-content:flex-end;
}

@media (max-width: 900px){
  .admin-toolbar{flex-direction:column; align-items:stretch;}
  .admin-actions{justify-content:flex-start;}
}


/* Admin FAQ */
.admin-top-tabs{display:flex; gap:10px; margin: 10px 0 14px}
.admin-top-tabs .btn{padding: 8px 12px}
.faq-admin-row{
  border: 1px solid rgba(255,255,255,.08);
  background: rgba(255,255,255,.03);
  border-radius: 16px;
  padding: 12px;
  margin-bottom: 10px;
}
.faq-admin-row .row-head{display:flex; gap:10px; align-items:center; justify-content:space-between; margin-bottom:8px}
.faq-admin-row .row-head .mini{display:flex; gap:8px; align-items:center}
.faq-admin-row .row-actions{display:flex; gap:8px}
.faq-admin-row textarea{min-height: 78px; resize: vertical}
.faq-admin-row .small-input{max-width: 120px}

/* Admin: regras de seleção por grupo (Tunagem) */
.group-rules-list{display:flex;flex-direction:column;gap:10px}
.group-rule-row{display:flex;gap:10px;align-items:center;justify-content:space-between;padding:10px 12px;border-radius:14px;border:1px solid rgba(255,255,255,.08);background:rgba(255,255,255,.03)}
.group-rule-row .gr-left{display:flex;flex-direction:column;gap:2px}
.group-rule-row .gr-name{font-weight:800;opacity:.95}
.group-rule-row .gr-hint{font-size:12px;opacity:.7}
.group-rule-row input{width:92px;text-align:center}


/* Toast (feedback rápido) */
.toast{
  position: fixed;
  left: 50%;
  bottom: 22px;
  transform: translate(-50%, 10px);
  opacity: 0;
  padding: 12px 14px;
  border-radius: 12px;
  background: rgba(14,14,14,0.88);
  border: 1px solid rgba(255,255,255,0.10);
  color: var(--text);
  font-weight: 600;
  box-shadow: 0 18px 50px rgba(0,0,0,.45);
  backdrop-filter: none;
  z-index: 9999;
  transition: transform .18s ease, opacity .18s ease;
  max-width: min(720px, calc(100vw - 24px));
  text-align: center;
}
.toast.show{
  opacity: 1;
  transform: translate(-50%, 0);
}

/* Badge de setor (CENTRAL/NORTE/SUL) */
.sector-badge{
  padding: 6px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: .08em;
  text-transform: uppercase;
  border: 1px solid rgba(255,255,255,0.12);
  background: rgba(255,255,255,0.04);
  color: var(--secondary);
  box-shadow: 0 10px 24px rgba(0,0,0,.25);
}

/* Cores automáticas via atributo */
#sectorBadge[data-sector="CENTRAL"]{ border-color: rgba(var(--secondary-rgb),.36); box-shadow: 0 10px 26px rgba(var(--secondary-rgb),.12) }
#sectorBadge[data-sector="NORTE"]{ border-color: rgba(var(--primary-rgb),.42); box-shadow: 0 10px 26px rgba(var(--primary-rgb),.18) }
#sectorBadge[data-sector="SUL"]{ border-color: rgba(var(--warm-rgb),.34); box-shadow: 0 10px 26px rgba(var(--warm-rgb),.14) }


/* Tunagem/Manutenção - helper text */
.summary-sub{
  margin-top: 6px;
  color: rgba(var(--secondary-rgb),0.72);
  font-size: 12px;
  line-height: 1.3;
}