/* ═══════════════════════════════════════════════════════════════════
   QIDIAN · 移动端层（迭代 8）· 2026-08-25
   ───────────────────────────────────────────────────────────────────
   这是整个改造里第一次认真看手机版。查出来一个真 bug：

   🔴 手机上顶部导航默认就是展开的，把首屏大标题压掉 29px。
      根因不在我这几层（对 .nav-links 零命中），是站自己的：
        site.css  @media(max-width:1000px){ .nav-links{display:none} }
        qidian-system.css:5006  .qnav{display:flex}      ← 后加载，权重相同，它赢
      也就是 2026-08-22 那次「顶部导航改成任务面板」把手机端汉堡菜单打坏了：
      按钮 aria-expanded 一直是 false、容器也没有 .open，但它就是展开着。
      实况取证：computed display=flex / hasOpen=false / btnExpanded=false。

   顺带把移动端整体过一遍：首屏留白、字号、各处网格列数、导航面板配色。
   ═══════════════════════════════════════════════════════════════════ */

@media (max-width:1000px){

  /* ── 1. 把汉堡菜单修回来 ────────────────────────────────────────
     权重要压过 qidian-system.css 的 .qnav{display:flex}，
     所以带上 html body 前缀，并且只在没有 .open 时隐藏。 */
  html body .nav-links.qnav{display:none!important}
  html body .nav-links.qnav.open{display:flex!important}
  html body .menu{display:block!important}

  /* 展开时按星河语言来，别再是那块冷蓝 #07151d */
  html body .nav-links.qnav.open{
    background:var(--xh-bg3)!important;
    border-bottom:1px solid var(--xh-hair)!important;
    padding:18px 5vw 26px!important;gap:2px!important}
  html body .nav-links.qnav.open .qnav__item{width:100%}
  html body .nav-links.qnav.open .qnav__top{
    display:block;width:100%;padding:15px 0!important;
    font-size:16px!important;
    border-bottom:1px solid var(--xh-hair-soft)!important}
  /* 手机上不展开二级面板，一层就够 */
  html body .nav-links.qnav .qnav__panel{display:none!important}

  /* 手机上主 CTA 不该藏（site.css 把它 display:none 了）——
     首屏第一眼就该有一个能点的动作 */
  html body .nav-cta{display:inline-flex!important;
    padding:8px 13px!important;font-size:13px!important}

  /* ── 2. 首屏：手机上收紧留白，让标题和按钮都在第一屏 ───────── */
  html body .qh3{
    padding:clamp(84px,13vh,120px) 20px clamp(40px,7vh,64px)!important}
  html body .qh3 h1{
    font-size:clamp(34px,10.4vw,52px)!important;line-height:1.14!important}
  html body .qh3__lede{font-size:15px!important;line-height:1.85!important;
    max-width:none!important}
  html body .qh3__meta{
    top:clamp(74px,10vh,96px)!important;
    gap:10px 16px!important;font-size:9.5px!important}
  html body .qh3__act{flex-direction:column;align-items:stretch;gap:12px!important}
  html body .qh3__btn{width:100%;text-align:center;padding:15px 20px!important}
  html body .qh3__alt{text-align:center}

  /* ── 3. 各处网格：手机上一到两栏，别硬挤 ────────────────────── */
  html body .qpb__grid{grid-template-columns:repeat(2,1fr)!important}
  html body .qpb__i{padding:22px 16px!important}
  html body .qpb__i b{font-size:34px!important}
  html body .qind{grid-template-columns:1fr!important}
  html body .qind__i{border-right:0!important}
  html body section[aria-labelledby="s-cases"] .qds-content-grid{
    grid-template-columns:1fr!important}
  html body section[aria-labelledby="s-cases"] .qds-content-card{
    border-right:0!important}
  html body .qds-process-grid{grid-template-columns:repeat(2,1fr)!important}
  html body .qds-status-grid{grid-template-columns:repeat(2,1fr)!important}

  /* ── 4. 标题与区块节奏：手机上整体降一档，但保持衬线的分量 ──── */
  html body h2{font-size:clamp(21px,6.4vw,28px)!important;
    line-height:1.44!important;max-width:none!important}
  html body .qds-section,html body .qroute,
  html body .qtry,html body .qds-contact{
    padding-block:clamp(48px,8vh,72px)!important}
  html body .qds-section-head{grid-template-columns:1fr!important;gap:14px!important}

  /* ── 5. 分流四条：手机上序号缩小、CTA 换行到下面 ─────────────── */
  html body .qroute__no{font-size:26px!important;min-width:1.5em}
  html body .qroute__txt b{font-size:19px!important}

  /* ── 6. 现场照带：手机上小一档，图注留住 ────────────────────── */
  html body .qstrip figure{
    width:clamp(250px,74vw,300px)!important;
    height:clamp(166px,49vw,200px)!important}

  /* ── 7. Demo 控制台：手机上标签页可横滑，不挤成三行 ─────────── */
  html body .qdemo__chips{
    display:flex!important;overflow-x:auto!important;
    scrollbar-width:none;-webkit-overflow-scrolling:touch}
  html body .qdemo__chips::-webkit-scrollbar{display:none}
  html body .qdemo__chips button,
  html body .qdemo__chips [role="tab"]{
    flex:0 0 auto;padding:14px 16px!important;font-size:13.5px!important;
    white-space:nowrap}
  html body .qdemo__ask{font-size:19px!important}
  html body .qdemo__meta{grid-template-columns:1fr 1fr!important}
}

@media (max-width:560px){
  html body .qpb__grid{grid-template-columns:1fr!important}
  html body .qds-process-grid,html body .qds-status-grid{
    grid-template-columns:1fr!important}
  html body .qds-process-grid>article,
  html body .qds-status-card{border-right:0!important}
}

/* ═══════════════════════════════════════════════════════════════════
   迭代 9 · 产品截图展示区（图片 + 结构 + UI + 内容 一起动）
   ───────────────────────────────────────────────────────────────────
   查实：site/media/site/demo-shots/ 下 4 张 2100×1400 的真实产品界面截图，
   首页引用次数 = 0，一直白放着；Demo 那一节 <img> 数量 = 0。
   这 4 张是产品界面，没有人脸、不存在打码问题 —— 正好补上老叶最恨的那点
   （「打完码看啥呀」）。装上首页是全站性价比最高的一块。
   ═══════════════════════════════════════════════════════════════════ */

.qshots{background:var(--xh-bg2)!important;
  border-top:1px solid var(--xh-hair-soft);
  padding-block:clamp(60px,8.5vh,110px)}

.qshots__grid{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:clamp(18px,2.2vw,32px);
  margin-top:clamp(28px,3.6vw,48px)}

.qshot{display:block;text-decoration:none;
  border:1px solid var(--xh-hair);
  background:var(--xh-bg4);overflow:hidden;
  transition:border-color .35s cubic-bezier(.16,1,.3,1),
             transform .45s cubic-bezier(.16,1,.3,1)}
.qshot:hover{border-color:rgba(226,192,121,.52);
  transform:translate3d(0,-3px,0)}

.qshot__f{margin:0;overflow:hidden;background:#06070A;
  border-bottom:1px solid var(--xh-hair);line-height:0}
.qshot__f img{width:100%;height:auto;display:block;
  /* 截图本身是深色 UI，稍微压一点让它和页面同调，hover 回到原色 */
  filter:brightness(.88) saturate(.92);
  transform:scale(1.005);
  transition:filter .5s cubic-bezier(.16,1,.3,1),
             transform .8s cubic-bezier(.16,1,.3,1)}
.qshot:hover .qshot__f img{filter:brightness(1.04) saturate(1);
  transform:scale(1.035)}

.qshot__t{padding:clamp(20px,2.2vw,30px) clamp(20px,2.2vw,28px)
          clamp(24px,2.6vw,34px)}
.qshot__n{display:inline-block;font-family:var(--xh-mono);
  font-size:10.5px;letter-spacing:.16em;color:var(--xh-gold);
  margin-bottom:13px}
.qshot__t b{display:block;font-family:var(--xh-serif);font-weight:400;
  font-size:clamp(18px,2vw,25px);line-height:1.4;
  color:var(--xh-fg0);margin-bottom:10px}
.qshot__t p{font-size:14px;line-height:1.82;color:var(--xh-fg2);
  max-width:42ch;margin:0}
.qshot__go{display:inline-block;margin-top:16px;font-size:13.5px;
  color:var(--xh-fg3);
  transition:color .28s,transform .28s cubic-bezier(.16,1,.3,1)}
.qshot:hover .qshot__go{color:var(--xh-gold-hi);transform:translate3d(4px,0,0)}

@media(max-width:820px){
  .qshots__grid{grid-template-columns:1fr}
}

@media (prefers-reduced-motion: no-preference){
  @supports (animation-timeline: view()){
    .qshot{animation:qxRise .9s cubic-bezier(.16,1,.3,1) both;
      animation-timeline:view();animation-range:entry 4% cover 28%}
    .qshot:nth-child(2){animation-range:entry 4% cover 32%}
    .qshot:nth-child(3){animation-range:entry 4% cover 36%}
    .qshot:nth-child(4){animation-range:entry 4% cover 40%}
  }
}

/* ═══════════════════════════════════════════════════════════════════
   迭代 12 · 联系区收口（图片 + 结构 + 内容 + UI）
   ───────────────────────────────────────────────────────────────────
   整页最后一节原来只有一段字加一个按钮，写着「创始人叶玉浩本人接待，
   不转客服」却看不到人、也看不到怎么找 —— 滚到底没有落点。
   现在：真人形象照 + 二维码直接摆出来 + 三条可核验事实当收口。
   ═══════════════════════════════════════════════════════════════════ */

.qds-contact{background:var(--xh-bg2)!important;
  border-top:1px solid var(--xh-hair)!important}
.qds-contact__grid{
  display:grid!important;
  grid-template-columns:minmax(0,1fr) minmax(0,1.05fr)!important;
  gap:clamp(30px,5vw,80px)!important;align-items:center}

.qcta{display:grid;grid-template-columns:auto minmax(0,1fr);
  gap:clamp(20px,2.6vw,38px);align-items:end}

/* 真人：宋体图注压在照片下沿，金色发丝线收边 */
.qcta__face{margin:0;position:relative;
  border:1px solid var(--xh-hair);background:var(--xh-bg4);
  overflow:hidden;max-width:300px}
.qcta__face img{width:100%;height:auto;display:block;
  filter:grayscale(.08) contrast(1.02)}
.qcta__face figcaption{position:absolute;left:0;right:0;bottom:0;
  padding:26px 14px 12px;
  background:linear-gradient(to top,rgba(11,10,8,.94),transparent);
  font-family:var(--xh-mono);font-size:11px;letter-spacing:.1em;
  color:var(--xh-fg1)}

.qcta__side{display:flex;flex-direction:column;gap:clamp(16px,2vw,24px)}

/* 二维码：白底才扫得出来，四周留白，别贴边 */
.qcta__qr{margin:0;width:clamp(132px,13vw,168px)}
.qcta__qr img{width:100%;height:auto;display:block;
  background:#fff;padding:10px;border:1px solid var(--xh-hair)}
.qcta__qr figcaption{margin-top:9px;font-family:var(--xh-mono);
  font-size:10.5px;letter-spacing:.12em;color:var(--xh-fg3)}

/* 三条事实：mono 标签 + 金色值，跟全站数据条同一套语言 */
.qcta__facts{border-top:1px solid var(--xh-hair);margin:0}
.qcta__facts>div{display:flex;flex-wrap:wrap;gap:4px 14px;
  align-items:baseline;padding:11px 0;
  border-bottom:1px solid var(--xh-hair-soft)}
.qcta__facts dt{font-family:var(--xh-mono);font-size:10.5px;
  letter-spacing:.14em;color:var(--xh-gold);min-width:6.5em}
.qcta__facts dd{margin:0;font-size:14px;color:var(--xh-fg1)}

.qds-contact .btn.gold{align-self:flex-start;padding:14px 26px!important}

@media(max-width:900px){
  .qds-contact__grid{grid-template-columns:1fr!important;
    gap:clamp(26px,4vw,40px)!important}
  .qcta{grid-template-columns:1fr;gap:22px;align-items:start}
  .qcta__face{max-width:220px}
}

@media (prefers-reduced-motion: no-preference){
  @supports (animation-timeline: view()){
    .qcta__face,.qcta__side{
      animation:qxRise .9s cubic-bezier(.16,1,.3,1) both;
      animation-timeline:view();animation-range:entry 4% cover 30%}
    .qcta__side{animation-range:entry 4% cover 36%}
  }
}

/* ═══════════════════════════════════════════════════════════════════
   迭代 13 · 页脚站点地图精修 + 手机可点性（结构 + UI）
   ───────────────────────────────────────────────────────────────────
   手机端体检量出来的真问题：8 个可点元素高度只有 20~30px，
   手指点不准（页脚那 40 多条链接全是 30px，「打开完整 Demo」只有 20px）。
   顺带把整个站点地图按星河语言重做：六栏标题走衬线、链接分档、
   「全部 XX →」做成金色收口。
   ═══════════════════════════════════════════════════════════════════ */

/* ── 站点地图 ─────────────────────────────────────────────────── */
.qfootmap{background:var(--xh-bg2)!important;
  border-top:1px solid var(--xh-hair)!important;
  padding-block:clamp(48px,7vh,88px)!important}

/* 顶部那条「说不清卡在哪」CTA：做成一条横贯的收口带 */
.qfootmap__cta{
  display:flex!important;flex-wrap:wrap;align-items:center;
  gap:12px clamp(16px,2.4vw,34px);
  padding:clamp(20px,2.4vw,30px) 0 clamp(24px,2.8vw,34px)!important;
  border-top:0!important;
  border-bottom:1px solid var(--xh-hair)!important;
  background:transparent!important;
  margin-bottom:clamp(32px,4vw,52px)}
.qfootmap__cta b{font-family:var(--xh-serif)!important;font-weight:400!important;
  font-size:clamp(18px,2.1vw,26px)!important;color:var(--xh-fg0)!important;
  line-height:1.4}
.qfootmap__cta span{font-size:14px;color:var(--xh-fg2)!important;
  flex:1 1 280px}
.qfootmap__cta button{margin-left:auto;
  background:var(--xh-gold)!important;color:#1A1408!important;
  border:0!important;border-radius:2px!important;font-weight:600!important;
  padding:13px 24px!important;min-height:44px}
.qfootmap__cta button:hover{background:var(--xh-gold-hi)!important}

/* 六栏：标题走衬线，加一条金色短线，跟全站眉标同一套语言 */
.qfootmap__grid{gap:clamp(22px,2.6vw,40px) clamp(18px,2.2vw,32px)!important}
.qfootmap__col h3{
  position:relative;padding-bottom:12px;margin-bottom:6px!important;
  font-family:var(--xh-serif)!important;font-weight:400!important;
  font-size:clamp(15px,1.5vw,18px)!important;
  color:var(--xh-fg0)!important;letter-spacing:.01em}
.qfootmap__col h3::after{content:"";position:absolute;left:0;bottom:0;
  width:26px;height:1px;background:var(--xh-gold);opacity:.72}
.qfootmap__col ul{list-style:none;margin:0;padding:0}
.qfootmap__col li{margin:0}

/* 🔴 可点性：手机端体检量到页脚链接只有 30px 高，手指点不准。
   拉到 40px（Apple/Google 都建议 44，这里给行内文字链留一点余量按 40）。 */
.qfootmap__col li a{
  display:flex;align-items:center;min-height:40px;
  padding:2px 0;font-size:13.5px;line-height:1.5;
  color:var(--xh-fg2)!important;text-decoration:none;
  transition:color .22s,transform .28s cubic-bezier(.16,1,.3,1)}
.qfootmap__col li a:hover{color:var(--xh-gold-hi)!important;
  transform:translate3d(3px,0,0)}
.qfootmap__more{color:var(--xh-gold)!important;font-weight:500}
.qfootmap__more:hover{color:var(--xh-gold-hi)!important}

/* ── 版权条 ───────────────────────────────────────────────────── */
.footer{background:var(--xh-bg)!important;
  border-top:1px solid var(--xh-hair-soft)!important;
  padding-block:clamp(26px,3vw,38px)!important}
.footer a{min-height:40px;display:inline-flex;align-items:center;
  padding:0 2px}

/* 「打开完整 Demo」这类正文里的行内链接：手机上体检量到只有 20px */
.qdemo__note a,.qds-demo-hook a{
  display:inline-flex;align-items:center;min-height:40px;padding:0 2px}

@media(max-width:1000px){
  .qfootmap__cta{flex-direction:column;align-items:flex-start}
  .qfootmap__cta button{margin-left:0;width:100%;justify-content:center}
  .qfootmap__grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}
}
@media(max-width:560px){
  .qfootmap__grid{grid-template-columns:1fr!important}
}

/* iteration 13, last tap target: the hero's secondary text link measured 30px
   tall on mobile. Everything else is now >=40px. */
@media(max-width:1000px){
  html body .qh3__alt{display:inline-flex;align-items:center;
    min-height:44px;padding:0 4px}
}

/* ═══════════════════════════════════════════════════════════════════
   迭代 14 · 首屏背景加强（老叶：要炫酷）
   ───────────────────────────────────────────────────────────────────
   上一版做了暖黑 + 一束斜光 + 透视网格，方向对但**偏平**：
   底色和光的明暗差太小，整块看着像一张棕色渐变，撑不起「炫」。

   这一版加的是「体积」，不是加特效：
     ① 底色拉开层次：中心亮、四周压到近黑，明暗差从原来的 ~15% 拉到 ~55%
     ② 光束做成体积光：两道不同角度、不同软硬的光叠加，边缘带一点色散
     ③ 地平线加一道会呼吸的辉光带，网格从那里"长出来"
     ④ 网格分两层：粗网格给结构，细网格给密度，两层速度不同 = 视差
     ⑤ 一道扫描光沿地平线缓慢横扫（雷达式，不是粒子）

   仍然守住的三条：
     · 不做发光粒子球（design-master 廉价感反例第 11 条，老叶亲骂两次）
     · 只动 transform / opacity / background-position，保 60fps，CLS 不变
     · 全部 CSS，零图片零请求
   ═══════════════════════════════════════════════════════════════════ */

/* ① 底色：中心亮、四周近黑，把视线锁进中间 */
.qh3{
  background:
    radial-gradient(ellipse 74% 52% at 50% 40%,
      rgba(58,44,22,.55) 0%,
      rgba(28,22,12,.30) 42%,
      transparent 72%),
    radial-gradient(ellipse 120% 90% at 50% 45%,
      transparent 40%, rgba(4,4,3,.55) 78%, #040403 100%),
    linear-gradient(180deg,#0C0A07 0%,#0A0906 46%,#060504 100%)
    !important}

/* ② 体积光：两道叠加，一硬一软，硬的那道带一点暖色色散 */
.qh3__light{
  background:
    /* 主光束：窄、亮、边缘偏暖 */
    linear-gradient(102deg,
      transparent 0%, transparent 30%,
      rgba(226,192,121,.06) 38%,
      rgba(240,214,158,.26) 46%,
      rgba(255,236,196,.34) 48.5%,
      rgba(240,214,158,.24) 51%,
      rgba(196,151,73,.07) 58%,
      transparent 68%, transparent 100%),
    /* 副光束：宽、软，错开角度，给出体积 */
    linear-gradient(88deg,
      transparent 0%, transparent 18%,
      rgba(196,151,73,.09) 40%,
      rgba(196,151,73,.13) 50%,
      rgba(196,151,73,.07) 62%,
      transparent 84%, transparent 100%),
    /* 地平线辉光：网格从这里长出来 */
    radial-gradient(ellipse 96% 16% at 50% 62%,
      rgba(226,192,121,.20) 0%, rgba(196,151,73,.07) 42%, transparent 74%),
    /* 底部收黑 */
    linear-gradient(180deg, transparent 42%, rgba(4,4,3,.70) 84%, #040403 100%)
    !important;
  background-size:200% 200%,240% 240%,100% 100%,100% 100%!important;
  background-position:0% 0%,100% 0%,0 0,0 0!important}

/* ③ 网格：粗网格 + 细网格两层，制造密度和视差 */
.qh3__grain{
  background-image:
    /* 粗 */
    linear-gradient(to right, rgba(226,192,121,.34) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(226,192,121,.26) 1px, transparent 1px),
    /* 细 */
    linear-gradient(to right, rgba(226,192,121,.13) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(226,192,121,.10) 1px, transparent 1px)
    !important;
  background-size:112px 112px,112px 112px,28px 28px,28px 28px!important;
  opacity:1!important;
  -webkit-mask-image:linear-gradient(180deg,
    transparent 0%, rgba(0,0,0,.22) 30%, #000 64%, #000 100%)!important;
  mask-image:linear-gradient(180deg,
    transparent 0%, rgba(0,0,0,.22) 30%, #000 64%, #000 100%)!important;
  transform:perspective(660px) rotateX(68deg) translate3d(0,16%,0) scale(2.6)!important;
  transform-origin:50% 100%!important}

/* ④ 扫描光：沿地平线缓慢横扫，雷达式，不是粒子 */
.qh3__in::before{
  content:"";position:absolute;left:-30%;right:-30%;
  top:52%;height:34vh;pointer-events:none;z-index:-1;
  background:linear-gradient(96deg,
    transparent 0%,
    rgba(226,192,121,.00) 34%,
    rgba(226,192,121,.13) 46%,
    rgba(255,238,200,.18) 50%,
    rgba(226,192,121,.11) 54%,
    rgba(226,192,121,.00) 66%,
    transparent 100%);
  filter:blur(26px);
  -webkit-mask-image:linear-gradient(180deg,#000 0%,transparent 92%);
  mask-image:linear-gradient(180deg,#000 0%,transparent 92%)}
.qh3__in{position:relative}

/* 噪点加重一点，把渐变的色带彻底压掉 */
.qh3::after{opacity:.075!important}

@media (prefers-reduced-motion: no-preference){
  /* 主副两道光反向运动 = 体积感的来源，不是简单来回扫 */
  @keyframes qxBeam2{
    0%   {background-position:18% 0%,86% 0%,0 0,0 0}
    100% {background-position:76% 0%,22% 0%,0 0,0 0}
  }
  .qh3__light{
    animation:qxBeam2 19s cubic-bezier(.42,0,.58,1) infinite alternate!important}

  /* 网格向前推 —— 粗细两层同一个 transform，视差靠 size 差实现 */
  @keyframes qxGrid2{
    from{transform:perspective(660px) rotateX(68deg) translate3d(0,16%,0) scale(2.6)}
    to  {transform:perspective(660px) rotateX(68deg) translate3d(0,23%,0) scale(2.86)}
  }
  .qh3__grain{
    animation:qxGrid2 30s cubic-bezier(.42,0,.58,1) infinite alternate!important}

  /* 扫描光横扫一圈 13 秒 */
  @keyframes qxSweep{
    0%   {transform:translate3d(-38%,0,0)}
    100% {transform:translate3d(38%,0,0)}
  }
  .qh3__in::before{
    animation:qxSweep 13s cubic-bezier(.45,0,.55,1) infinite alternate;
    will-change:transform}
}

/* iteration 14 refine: the 88deg sub-beam showed a hard diagonal edge on the
   left. Widen its stops so it fades instead of cutting, and lift the horizon
   glow one notch so the grid reads as growing out of light. */
.qh3__light{
  background:
    linear-gradient(102deg,
      transparent 0%, transparent 26%,
      rgba(226,192,121,.05) 34%,
      rgba(240,214,158,.24) 45%,
      rgba(255,236,196,.33) 48.5%,
      rgba(240,214,158,.22) 52%,
      rgba(196,151,73,.06) 60%,
      transparent 72%, transparent 100%),
    linear-gradient(88deg,
      transparent 0%, rgba(196,151,73,.02) 14%,
      rgba(196,151,73,.06) 30%,
      rgba(196,151,73,.11) 50%,
      rgba(196,151,73,.05) 70%,
      rgba(196,151,73,.015) 86%, transparent 100%),
    radial-gradient(ellipse 98% 19% at 50% 63%,
      rgba(240,214,158,.26) 0%, rgba(196,151,73,.10) 40%, transparent 76%),
    linear-gradient(180deg, transparent 42%, rgba(4,4,3,.68) 84%, #040403 100%)
    !important}
.qh3__grain{
  background-image:
    linear-gradient(to right, rgba(240,214,158,.40) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(240,214,158,.30) 1px, transparent 1px),
    linear-gradient(to right, rgba(226,192,121,.16) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(226,192,121,.12) 1px, transparent 1px)
    !important}