/* ============================================================
   MITSUBISHI SALES SITE — Shared stylesheet
   Dipakai oleh semua halaman (index, lineup, detail, promo, kontak)
   ============================================================ */

:root{
  --ink:#12151a;
  --ink-soft:#1c2028;
  --paper:#eef0f2;
  --paper-2:#ffffff;
  --red:#e4002b;
  --red-dark:#a80020;
  --gold:#b98a3b;       /* aksen premium, dipakai tipis-tipis saja */
  --steel:#6b7280;
  --chrome:#c7ccd3;
  --text:#15181d;
  --text-soft:#4b5560;
  --radius:3px;
  --shadow-sm:0 6px 16px rgba(18,21,26,0.08);
  --shadow-md:0 18px 40px rgba(18,21,26,0.14);
  --shadow-lg:0 30px 60px rgba(18,21,26,0.22);
}

*{box-sizing:border-box; margin:0; padding:0;}
html{scroll-behavior:smooth;}
body{
  background:var(--paper);
  color:var(--text);
  font-family:'Barlow', sans-serif;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
}
img,svg{display:block; max-width:100%; height:auto;}
a{color:inherit;}
.mono{font-family:'JetBrains Mono', monospace;}
.display{font-family:'Barlow Condensed', sans-serif; text-transform:uppercase; letter-spacing:0.02em;}

.wrap{max-width:1180px; margin:0 auto; padding:0 24px;}
@media (max-width:640px){ .wrap{padding:0 18px;} }

.diamond{width:9px; height:9px; background:var(--red); transform:rotate(45deg); flex:none; display:inline-block;}

/* scroll reveal */
.reveal{opacity:0; transform:translateY(18px); transition:opacity .6s ease, transform .6s ease;}
.reveal.in{opacity:1; transform:translateY(0);}
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto;}
  .reveal{opacity:1; transform:none; transition:none;}
  *{animation:none !important;}
}

/* ---------------- NAV ---------------- */
.nav{position:sticky; top:0; z-index:50; background:rgba(18,21,26,0.97); backdrop-filter:blur(8px); border-bottom:1px solid rgba(255,255,255,0.08);}
.nav-inner{display:flex; align-items:center; justify-content:space-between; height:74px;}
.brand{display:flex; align-items:center; gap:12px; text-decoration:none;}
.brand-mark{width:30px; height:30px; flex:none;}
.brand-text{color:#fff; line-height:1.15;}
.brand-text .name{font-family:'Barlow Condensed'; font-weight:700; font-size:1.08rem; text-transform:uppercase; letter-spacing:0.03em;}
.brand-text .role{font-size:0.7rem; color:var(--chrome); letter-spacing:0.08em; text-transform:uppercase;}
.nav-links{display:flex; align-items:center; gap:30px;}
.nav-links a{color:var(--chrome); text-decoration:none; font-size:0.93rem; font-weight:500; transition:color .15s; padding:4px 0; border-bottom:2px solid transparent;}
.nav-links a:hover{color:#fff;}
.nav-links a.current{color:#fff; border-bottom-color:var(--red);}
.nav-cta{background:var(--red); color:#fff; text-decoration:none; padding:11px 20px; font-weight:600; font-size:0.88rem; border-radius:var(--radius); transition:background .15s; white-space:nowrap;}
.nav-cta:hover{background:var(--red-dark);}
.nav-toggle{display:none; background:none; border:none; color:#fff; font-size:1.6rem; cursor:pointer; padding:4px;}
@media (max-width:900px){
  .nav-links{position:absolute; top:74px; left:0; right:0; background:var(--ink); flex-direction:column; align-items:flex-start; padding:10px 24px 22px; gap:16px; display:none; border-bottom:1px solid rgba(255,255,255,0.08); max-height:80vh; overflow-y:auto;}
  .nav-links.open{display:flex;}
  .nav-links .nav-cta{width:100%; text-align:center;}
  .nav-toggle{display:block;}
}

/* ---------------- PAGE HERO (halaman selain home) ---------------- */
.page-hero{
  background:repeating-linear-gradient(115deg, rgba(228,0,43,0.10) 0 2px, transparent 2px 46px), linear-gradient(180deg, var(--ink) 0%, var(--ink-soft) 100%);
  color:#fff; padding:60px 0 52px;
}
.page-hero .kicker{display:flex; align-items:center; gap:10px; color:var(--chrome); font-size:0.8rem; letter-spacing:0.14em; text-transform:uppercase; font-weight:600; margin-bottom:14px;}
.page-hero h1{font-size:clamp(2rem,4.4vw,3.1rem); font-weight:800; line-height:1.02;}
.page-hero p{color:var(--chrome); max-width:60ch; margin-top:14px; font-size:1.02rem;}
.breadcrumb{font-size:0.82rem; color:var(--steel); margin-bottom:10px;}
.breadcrumb a{color:var(--chrome); text-decoration:none;}
.breadcrumb a:hover{color:#fff;}

/* ---------------- BUTTONS ---------------- */
.btn-primary{display:inline-flex; align-items:center; gap:10px; background:var(--red); color:#fff; text-decoration:none; padding:15px 26px; font-weight:700; font-size:0.96rem; border-radius:var(--radius); border:none; cursor:pointer; transition:transform .15s, background .15s;}
.btn-primary:hover{background:var(--red-dark); transform:translateY(-1px);}
.btn-ghost{display:inline-flex; align-items:center; gap:10px; background:transparent; color:#fff; text-decoration:none; padding:15px 26px; font-weight:600; font-size:0.96rem; border-radius:var(--radius); border:1px solid rgba(255,255,255,0.35); transition:border-color .15s, background .15s; cursor:pointer;}
.btn-ghost:hover{border-color:#fff; background:rgba(255,255,255,0.06);}
.btn-dark{display:inline-flex; align-items:center; justify-content:center; gap:8px; background:var(--ink); color:#fff; text-decoration:none; padding:13px 18px; font-weight:600; font-size:0.88rem; border-radius:var(--radius); transition:background .15s; border:none; cursor:pointer;}
.btn-dark:hover{background:var(--red);}
.btn-outline-dark{display:inline-flex; align-items:center; justify-content:center; gap:8px; background:transparent; color:var(--ink); text-decoration:none; padding:12px 18px; font-weight:600; font-size:0.88rem; border-radius:var(--radius); border:1px solid var(--chrome); transition:all .15s; cursor:pointer;}
.btn-outline-dark:hover{border-color:var(--ink); background:var(--ink); color:#fff;}

/* ---------------- HERO BERANDA (index.html) ---------------- */
.hero-home-grid{display:grid; grid-template-columns:1.15fr 0.85fr; gap:48px; align-items:center;}
@media (max-width:900px){
  .hero-home-grid{grid-template-columns:1fr; gap:32px;}
}
@media (max-width:480px){
  .hero-home-grid h1{font-size:2rem !important;}
  .hero-home-grid p{font-size:1rem !important;}
}

/* ---------------- STATS STRIP ---------------- */
.stats{background:var(--ink);}
.stats-grid{display:grid; grid-template-columns:repeat(auto-fit, minmax(150px,1fr)); border-top:1px solid rgba(255,255,255,0.08);}
.stat-item{padding:30px 20px; text-align:center; border-left:1px solid rgba(255,255,255,0.08);}
.stat-item:first-child{border-left:none;}
.stat-item .num{font-family:'JetBrains Mono'; font-weight:600; color:var(--red); font-size:clamp(1.5rem,3vw,2.1rem);}
.stat-item .label{color:var(--chrome); font-size:0.76rem; text-transform:uppercase; letter-spacing:0.08em; margin-top:6px;}
@media (max-width:700px){ .stats-grid{grid-template-columns:repeat(2,1fr);} .stat-item:nth-child(3){border-left:none;} }

/* ---------------- SECTIONS ---------------- */
section{padding:84px 0;}
@media (max-width:640px){ section{padding:54px 0;} }
.section-head{max-width:640px; margin-bottom:44px;}
.section-head .kicker{color:var(--red); font-weight:700; font-size:0.8rem; letter-spacing:0.14em; text-transform:uppercase; display:flex; align-items:center; gap:10px; margin-bottom:12px;}
.section-head h2{font-size:clamp(1.8rem,3.4vw,2.5rem); font-weight:800; line-height:1.05;}
.section-head p{color:var(--text-soft); margin-top:14px; font-size:1rem; max-width:56ch;}
.section-head.center{margin-left:auto; margin-right:auto; text-align:center;}
.section-head.center .kicker{justify-content:center;}
.section-head.center p{margin-left:auto; margin-right:auto;}

/* ---------------- STUDIO ILLUSTRATION (pengganti foto) ---------------- */
.studio{
  position:relative; border-radius:var(--radius); overflow:hidden;
  background:radial-gradient(ellipse at 50% 30%, #3a3f47 0%, #14161a 70%);
  display:flex; align-items:center; justify-content:center;
}
.studio::before{
  content:""; position:absolute; inset:0;
  background:radial-gradient(ellipse 60% 40% at 50% 85%, rgba(0,0,0,0.55), transparent 70%);
}
.studio .floor-glow{
  position:absolute; bottom:8%; left:50%; transform:translateX(-50%);
  width:70%; height:14px; background:rgba(228,0,43,0.35); filter:blur(18px); border-radius:50%;
}
.studio svg{position:relative; z-index:1; filter:drop-shadow(0 18px 22px rgba(0,0,0,0.5));}

/* ---------------- MODEL CARDS (grid lineup) ---------------- */
.model-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:22px;}
@media (max-width:980px){ .model-grid{grid-template-columns:repeat(2,1fr);} }
@media (max-width:640px){ .model-grid{grid-template-columns:1fr;} }

.model-card{border:1px solid var(--chrome); border-radius:var(--radius); overflow:hidden; background:var(--paper-2); display:flex; flex-direction:column; transition:box-shadow .18s, transform .18s; text-decoration:none; color:inherit;}
.model-card:hover{box-shadow:var(--shadow-md); transform:translateY(-4px);}
.model-figure{position:relative; height:170px;}
.model-figure .cat-chip{position:absolute; top:14px; left:14px; z-index:2; background:rgba(255,255,255,0.92); color:var(--ink); font-size:0.66rem; font-weight:700; letter-spacing:0.06em; text-transform:uppercase; padding:4px 10px; border-radius:999px;}
.model-figure .badge{position:absolute; top:14px; right:14px; z-index:2; background:var(--red); color:#fff; font-size:0.66rem; font-weight:700; letter-spacing:0.06em; text-transform:uppercase; padding:4px 10px; border-radius:999px;}
.model-body{padding:20px 22px 24px; display:flex; flex-direction:column; flex:1;}
.model-body h3{font-family:'Barlow Condensed'; font-weight:700; font-size:1.55rem; text-transform:uppercase; line-height:1;}
.model-body .tagline{color:var(--text-soft); font-size:0.88rem; margin:8px 0 14px;}
.model-price{font-family:'JetBrains Mono'; font-weight:600; color:var(--red); font-size:1.02rem; margin-bottom:14px;}
.model-price .from{font-size:0.68rem; color:var(--text-soft); display:block; font-family:'Barlow'; text-transform:uppercase; letter-spacing:0.06em; margin-bottom:2px;}
.spec-chips{display:flex; flex-wrap:wrap; gap:6px; margin-bottom:18px;}
.spec-chip{font-size:0.7rem; color:var(--text-soft); background:var(--paper); padding:4px 9px; border-radius:3px; border:1px solid var(--chrome);}
.model-cta{margin-top:auto; display:inline-flex; align-items:center; justify-content:center; gap:8px; background:var(--ink); color:#fff; text-decoration:none; padding:12px 16px; font-weight:600; font-size:0.86rem; border-radius:var(--radius); transition:background .15s;}
.model-card:hover .model-cta{background:var(--red);}

/* ---------------- FILTER BAR ---------------- */
.filter-bar{display:flex; flex-wrap:wrap; gap:24px; align-items:flex-end; justify-content:space-between; margin-bottom:36px; padding:22px; background:var(--paper-2); border:1px solid var(--chrome); border-radius:var(--radius);}
.filter-group{display:flex; flex-direction:column; gap:8px;}
.filter-group .flabel{font-size:0.76rem; font-weight:700; text-transform:uppercase; letter-spacing:0.06em; color:var(--text-soft);}
.filter-chips{display:flex; gap:8px; flex-wrap:wrap;}
.filter-btn{font-family:'Barlow'; font-weight:600; font-size:0.83rem; padding:8px 16px; border-radius:999px; border:1px solid var(--chrome); background:transparent; cursor:pointer; color:var(--text-soft); transition:all .15s;}
.filter-btn.active, .filter-btn:hover{background:var(--ink); color:#fff; border-color:var(--ink);}
.range-wrap{display:flex; align-items:center; gap:12px; min-width:240px;}
@media (max-width:480px){
  .filter-bar{flex-direction:column; align-items:stretch; padding:18px;}
  .range-wrap{min-width:0; width:100%;}
}
.range-wrap input[type=range]{flex:1; accent-color:var(--red);}
.range-val{font-family:'JetBrains Mono'; font-size:0.85rem; font-weight:600; white-space:nowrap;}
.result-count{font-size:0.85rem; color:var(--text-soft); margin-bottom:20px;}

/* ---------------- TABLE (spek) ---------------- */
.spec-table{width:100%; border-collapse:collapse; font-size:0.94rem;}
.spec-table tr{border-bottom:1px solid var(--chrome);}
.spec-table td{padding:13px 4px;}
.spec-table td:first-child{color:var(--text-soft); width:42%;}
.spec-table td:last-child{font-weight:600; font-family:'JetBrains Mono'; font-size:0.88rem; text-align:right;}

/* baris harga varian dengan tombol "Tanya" - dipakai di detail.html & fuso.html */
.variant-row-value{display:flex; align-items:center; justify-content:flex-end; gap:12px; flex-wrap:wrap;}
@media (max-width:480px){
  .variant-row-value{justify-content:space-between; width:100%;}
}

/* header tiap seri truk (ilustrasi + judul) di fuso.html */
.truck-head-grid{display:grid; grid-template-columns:220px 1fr; gap:28px; align-items:start; margin-bottom:22px;}
@media (max-width:640px){
  .truck-head-grid{grid-template-columns:1fr;}
  .truck-head-grid .studio{height:160px;}
}

/* ---------------- COLOR SWATCH ---------------- */
.color-row{display:flex; gap:12px; flex-wrap:wrap;}
.swatch{display:flex; flex-direction:column; align-items:center; gap:6px;}
.swatch .dot{width:34px; height:34px; border-radius:50%; border:2px solid #fff; box-shadow:0 0 0 1px var(--chrome), var(--shadow-sm);}
.swatch .cname{font-size:0.68rem; color:var(--text-soft); text-align:center; max-width:70px;}

/* ---------------- FEATURE LIST ---------------- */
.feature-list{list-style:none; display:grid; grid-template-columns:repeat(2,1fr); gap:12px 20px;}
@media (max-width:600px){ .feature-list{grid-template-columns:1fr;} }
.feature-list li{display:flex; gap:10px; align-items:flex-start; font-size:0.92rem;}
.feature-list li .diamond{margin-top:6px;}

/* ---------------- GALLERY ---------------- */
.gallery-main{border-radius:var(--radius); overflow:hidden; margin-bottom:14px; height:340px;}
.gallery-thumbs{display:flex; gap:10px;}
.gallery-thumbs .thumb{width:76px; height:56px; border-radius:3px; overflow:hidden; cursor:pointer; border:2px solid transparent; opacity:0.7; transition:all .15s;}
.gallery-thumbs .thumb.active{border-color:var(--red); opacity:1;}
.gallery-thumbs .thumb:hover{opacity:1;}

/* ---------------- CALCULATOR ---------------- */
.calc-box{background:var(--paper-2); border:1px solid var(--chrome); border-radius:var(--radius); padding:28px;}
.calc-box h3{font-family:'Barlow Condensed'; font-weight:700; font-size:1.4rem; text-transform:uppercase; margin-bottom:6px;}
.calc-box p.hint{color:var(--text-soft); font-size:0.88rem; margin-bottom:22px;}
.calc-field{margin-bottom:18px;}
.calc-field label{display:flex; justify-content:space-between; font-size:0.85rem; font-weight:600; margin-bottom:8px;}
.calc-field label .val{font-family:'JetBrains Mono'; color:var(--red);}
.calc-field input[type=range]{width:100%; accent-color:var(--red);}
.calc-field select{width:100%; padding:11px 14px; border:1px solid var(--chrome); border-radius:var(--radius); font-family:'Barlow'; font-size:0.95rem; background:var(--paper);}
.calc-result{background:var(--ink); color:#fff; border-radius:var(--radius); padding:22px; margin-top:8px;}
.calc-result .row{display:flex; justify-content:space-between; font-size:0.88rem; padding:8px 0; border-bottom:1px solid rgba(255,255,255,0.1);}
.calc-result .row:last-child{border-bottom:none;}
.calc-result .row .lbl{color:var(--chrome);}
.calc-result .row .v{font-family:'JetBrains Mono'; font-weight:600;}
.calc-result .highlight{background:rgba(228,0,43,0.18); margin:10px -22px -22px; padding:16px 22px; border-radius:0 0 var(--radius) var(--radius);}
.calc-result .highlight .v{color:var(--red); font-size:1.3rem;}
.calc-note{font-size:0.78rem; color:var(--text-soft); margin-top:14px; border-left:3px solid var(--red); padding-left:12px;}

/* ---------------- FAQ ---------------- */
.faq-item{border-bottom:1px solid var(--chrome);}
.faq-q{display:flex; align-items:center; justify-content:space-between; gap:16px; padding:20px 4px; cursor:pointer; font-weight:600; font-size:1rem;}
.faq-q .icon{font-size:1.3rem; color:var(--red); transition:transform .2s; flex:none;}
.faq-item.open .faq-q .icon{transform:rotate(45deg);}
.faq-a{max-height:0; overflow:hidden; transition:max-height .25s ease;}
.faq-a p{padding:0 4px 20px; color:var(--text-soft); font-size:0.94rem; max-width:70ch;}

/* ---------------- PROMO CARDS ---------------- */
.promo-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:22px;}
@media (max-width:900px){ .promo-grid{grid-template-columns:1fr;} }
.promo-card{background:var(--paper-2); border:1px solid var(--chrome); border-radius:var(--radius); overflow:hidden; display:flex; flex-direction:column;}
.promo-card .ptag{background:var(--ink); color:#fff; font-size:0.7rem; font-weight:700; text-transform:uppercase; letter-spacing:0.06em; padding:8px 18px;}
.promo-card .pbody{padding:22px; display:flex; flex-direction:column; gap:10px; flex:1;}
.promo-card h3{font-family:'Barlow Condensed'; font-weight:700; font-size:1.3rem; text-transform:uppercase;}
.promo-card p{color:var(--text-soft); font-size:0.9rem; flex:1;}
.promo-card .pfoot{font-size:0.76rem; color:var(--steel); border-top:1px dashed var(--chrome); padding-top:10px; margin-top:6px;}

/* ---------------- WHY GRID ---------------- */
.why-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:2px; background:var(--chrome);}
.why-card{background:var(--paper-2); padding:32px 28px;}
.why-card .mark{display:flex; gap:5px; margin-bottom:20px;}
.why-card h3{font-family:'Barlow Condensed'; font-weight:700; font-size:1.4rem; text-transform:uppercase; margin-bottom:10px;}
.why-card p{color:var(--text-soft); font-size:0.96rem;}
@media (max-width:820px){ .why-grid{grid-template-columns:1fr;} }

/* ---------------- TESTIMONI ---------------- */
.testi-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:22px;}
@media (max-width:900px){ .testi-grid{grid-template-columns:1fr;} }
.testi-card{background:var(--paper-2); border:1px solid var(--chrome); border-radius:var(--radius); padding:26px;}
.testi-card .stars{color:var(--red); letter-spacing:2px; margin-bottom:14px; font-size:0.95rem;}
.testi-card p.quote{font-size:0.96rem; color:var(--text); margin-bottom:18px;}
.testi-card .who{display:flex; align-items:center; gap:10px;}
.testi-card .who .initial{width:36px; height:36px; border-radius:50%; background:var(--ink); color:#fff; display:flex; align-items:center; justify-content:center; font-family:'Barlow Condensed'; font-weight:700; flex:none;}
.testi-card .who .meta{font-size:0.8rem; color:var(--text-soft); line-height:1.3;}
.testi-card .who .meta b{color:var(--text); display:block; font-weight:600;}

/* ---------------- CONTACT ---------------- */
.kontak-hero{background:var(--ink); color:#fff;}
.kontak-grid{display:grid; grid-template-columns:1fr 1fr; gap:48px; align-items:start;}
@media (max-width:860px){ .kontak-grid{grid-template-columns:1fr;} }
.contact-list{list-style:none; margin-top:10px; display:flex; flex-direction:column; gap:18px;}
.contact-list li{display:flex; gap:14px; align-items:flex-start;}
.contact-list .icon{width:38px; height:38px; border-radius:50%; background:rgba(228,0,43,0.15); color:var(--red); display:flex; align-items:center; justify-content:center; flex:none; font-size:1.05rem;}
.contact-list .label{font-size:0.76rem; color:var(--chrome); text-transform:uppercase; letter-spacing:0.06em;}
.contact-list .value{font-weight:600; font-size:1rem;}
.contact-list a{text-decoration:none; color:#fff;}
.contact-list a:hover{color:var(--red);}

.kontak-form{background:var(--paper-2); color:var(--text); border-radius:var(--radius); padding:30px;}
.kontak-form h3{font-family:'Barlow Condensed'; font-weight:700; font-size:1.4rem; text-transform:uppercase; margin-bottom:6px;}
.kontak-form p.hint{color:var(--text-soft); font-size:0.88rem; margin-bottom:22px;}
.field{margin-bottom:16px;}
.field label{display:block; font-size:0.82rem; font-weight:600; margin-bottom:6px; color:var(--text-soft);}
.field input, .field select, .field textarea{width:100%; padding:12px 14px; border:1px solid var(--chrome); border-radius:var(--radius); font-family:'Barlow'; font-size:0.95rem; background:var(--paper);}
.field textarea{resize:vertical; min-height:80px;}
.field input:focus, .field select:focus, .field textarea:focus{outline:2px solid var(--red); outline-offset:1px;}
.kontak-form .btn-primary{width:100%; justify-content:center; margin-top:4px;}

.map-box{background:var(--paper-2); border:1px solid var(--chrome); border-radius:var(--radius); padding:0; overflow:hidden; margin-top:28px;}
.map-box iframe{width:100%; height:280px; border:0; display:block;}

/* ---------------- FOOTER ---------------- */
footer{background:var(--ink-soft); color:var(--chrome); padding:44px 0 26px;}
.footer-grid{display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:32px; margin-bottom:30px;}
@media (max-width:800px){ .footer-grid{grid-template-columns:1fr 1fr;} }
@media (max-width:520px){ .footer-grid{grid-template-columns:1fr;} }
.footer-grid h4{color:#fff; font-family:'Barlow Condensed'; text-transform:uppercase; font-size:0.95rem; margin-bottom:14px; letter-spacing:0.04em;}
.footer-grid ul{list-style:none; display:flex; flex-direction:column; gap:9px;}
.footer-grid a{color:var(--chrome); text-decoration:none; font-size:0.88rem;}
.footer-grid a:hover{color:#fff;}
.footer-fbrand{display:flex; align-items:center; gap:10px; color:#fff; font-weight:600; margin-bottom:12px;}
.footer-fbrand svg, .footer-fbrand img{width:22px; height:22px;}
.footer-bottom{border-top:1px solid rgba(255,255,255,0.1); padding-top:20px; display:flex; justify-content:space-between; flex-wrap:wrap; gap:10px; font-size:0.78rem; color:var(--steel);}

/* ---------------- FLOATING WA ---------------- */
.wa-float{position:fixed; bottom:22px; right:22px; z-index:60; background:#25D366; color:#fff; text-decoration:none; width:58px; height:58px; border-radius:50%; display:flex; align-items:center; justify-content:center; box-shadow:0 10px 24px rgba(0,0,0,0.28); transition:transform .15s;}
.wa-float:hover{transform:scale(1.06);}

/* ---------------- MISC LAYOUT HELPERS ---------------- */
.two-col{display:grid; grid-template-columns:1fr 1fr; gap:48px; align-items:center;}
@media (max-width:860px){ .two-col{grid-template-columns:1fr;} }
.badge-pill{display:inline-flex; align-items:center; gap:6px; background:var(--paper); border:1px solid var(--chrome); border-radius:999px; padding:5px 12px; font-size:0.78rem; font-weight:600; color:var(--text-soft);}
.divider-diag{height:10px; background:repeating-linear-gradient(115deg, var(--red) 0 10px, var(--ink) 10px 20px); opacity:0.9;}