/* 公开主页。
   配色参考德国几家大物流公司的做法：深色打底 + 一个高饱和暖色做行动点。
   DSV / Kuehne+Nagel / Dachser 都是这个路子 —— 深底让白字和数字跳出来，
   暖色只留给「要点的东西」（按钮、重点数字），不到处撒。

   这里用「墨绿黑」而不是纯黑：品牌主色是青绿（单据上也是这个色），
   压深成 #05201D 当底色，跟报价单一脉相承，又比纯黑暖、比中绿沉稳。
   行动色用琥珀 #F0A340 —— 在深底上对比度足够，也不像纯红那么廉价。

   动效原则：只做「货在动」这件事，一屏一个焦点，不做无意义的入场动画；
   全部包在 prefers-reduced-motion 后面。 */

:root{
  --ink:#0d1a18; --soft:#4a5754; --faint:#616e6a;
  --line:#e2e7e5; --line-2:#f0f3f2;
  --bg:#fff; --alt:#f6f9f8;

  --deep:#05201D;          /* 深色区底色 */
  --deep-2:#0a3833;        /* 深色区次层 */
  --acc:#1C5E57;           /* 品牌青绿，跟单据一致 */
  --acc-lt:#3f978c;
  --acc-soft:#e4efec;
  --amber:#F0A340;         /* 行动色 */
  --amber-d:#9a6109;
  --warn:#9C4A15; --warn-soft:#f9efe6;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--ink);
  font:16px/1.7 -apple-system,"Segoe UI",Roboto,"Noto Sans SC","PingFang SC",
       "Microsoft YaHei",sans-serif;-webkit-font-smoothing:antialiased}
a{color:var(--acc)}
.wrap{max-width:1180px;margin:0 auto;padding:0 24px}
.mono{font-family:ui-monospace,Menlo,Consolas,monospace}

/* ---------- 顶栏：压在深色 hero 上 ---------- */
.nav{position:absolute;top:0;left:0;right:0;z-index:20}
.navin{display:flex;align-items:center;justify-content:space-between;height:78px;gap:20px}
.brand{display:flex;align-items:center;gap:10px;color:#fff;text-decoration:none;
  font-weight:700;font-size:20px;letter-spacing:-.3px}
.brand svg{color:var(--amber)}
.nav nav{display:flex;align-items:center;gap:4px}
.nav nav a{color:rgba(255,255,255,.92);text-decoration:none;font-size:15px;padding:9px 14px;
  border-radius:6px;white-space:nowrap;transition:color .15s,background .15s}
.nav nav a:hover{color:#fff;background:rgba(255,255,255,.1)}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;
  background:var(--amber);color:#231303;border:none;border-radius:6px;
  padding:15px 28px;font:inherit;font-weight:700;font-size:16px;cursor:pointer;
  text-decoration:none;letter-spacing:.01em;
  transition:transform .14s ease,box-shadow .14s ease,background .14s}
.btn:hover{background:#f7b258;transform:translateY(-2px);
  box-shadow:0 10px 26px rgba(240,163,64,.34)}
.btn.line{background:transparent;color:#fff;box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.4)}
.btn.line:hover{background:rgba(255,255,255,.1);box-shadow:inset 0 0 0 1.5px #fff}

/* .ghost 和 .sm 原来只在 app.css 里有，而 legal / market 两页加载的是这张表 ——
   于是「返回主页」「要报价」掉进了 .btn 的实心琥珀样式，字色又被
   .nav nav a（specificity 比 .btn 高）盖成白色。白字压琥珀对比度 2.1，
   远低于 AA 的 4.5。这里把两个变体补上，选择器写得比 .nav nav a 更具体。 */
.btn.ghost,.nav nav a.btn.ghost{background:transparent;color:#fff;
  box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.42)}
.btn.ghost:hover,.nav nav a.btn.ghost:hover{background:rgba(255,255,255,.12);
  box-shadow:inset 0 0 0 1.5px #fff;color:#fff}
.btn.sm{padding:9px 17px;font-size:14.5px}
/* 实心琥珀按钮进了导航也得保住深色字 */
.nav nav a.btn:not(.ghost):not(.line){color:#231303}
.btn.sm{padding:9px 17px;font-size:14.5px}
.btn.wide{width:100%;margin-top:8px;padding:16px}
.btn.dark{background:var(--acc);color:#fff}
.btn.dark:hover{background:#16504a;box-shadow:0 10px 26px rgba(28,94,87,.3)}

/* ================= HERO ================= */
.hero{position:relative;background:var(--deep);color:#fff;overflow:hidden;padding:150px 0 78px}
/* 背景三层：斜向光晕 + 细网格 + 欧洲线路网。每层都很淡，叠起来才有纵深 */
.hero .glow{position:absolute;inset:-20% -10% auto -10%;height:120%;pointer-events:none;
  background:
    radial-gradient(60% 55% at 78% 18%, rgba(63,151,140,.42), transparent 62%),
    radial-gradient(45% 42% at 12% 8%, rgba(240,163,64,.16), transparent 60%)}
.hero .grid{position:absolute;inset:0;pointer-events:none;opacity:.5;
  background-image:
    linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px);
  background-size:64px 64px;
  -webkit-mask-image:radial-gradient(75% 70% at 50% 30%, #000 30%, transparent 100%);
  mask-image:radial-gradient(75% 70% at 50% 30%, #000 30%, transparent 100%)}
.heroin{position:relative;z-index:4;max-width:640px}
.eyebrow{display:inline-flex;align-items:center;gap:9px;font-size:12.5px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--amber);font-weight:700;margin-bottom:20px;
  background:rgba(240,163,64,.12);border:1px solid rgba(240,163,64,.3);
  padding:7px 15px;border-radius:100px}
.eyebrow i{width:7px;height:7px;border-radius:50%;background:var(--amber);
  animation:blink 2s ease-in-out infinite}
@keyframes blink{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.35;transform:scale(.7)}}

.hero h1{font-size:60px;line-height:1.1;letter-spacing:-1.8px;font-weight:800;margin:0 0 20px}
.hero h1 .hl{color:var(--amber)}
.hero .lead{font-size:19px;line-height:1.75;color:rgba(255,255,255,.76);margin:0 0 34px}
.cta{display:flex;gap:14px;flex-wrap:wrap;margin-bottom:52px}
.trust{display:flex;gap:14px;flex-wrap:wrap}
.trust > div{flex:1 1 190px;display:flex;align-items:center;gap:11px;
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.11);border-radius:9px;padding:13px 17px}
.trust > div > div{min-width:0}
.trust b{display:block;font-size:14.5px;color:#fff;font-weight:700;line-height:1.35}
.trust span{display:block;font-size:13px;color:rgba(255,255,255,.58);line-height:1.4}
.trust svg{width:17px;height:17px;color:var(--amber);flex:none}

/* ---- 欧洲线路网：节点按真实经纬度算，光点沿干线跑 ---- */
/* 地图铺在首屏右侧、文字下面。左边用一层渐变压暗，保证标题永远读得清 —— */
/* 背景再好看，也不能跟正文抢。 */
/* 地图给一个像素上限：首屏一高，百分比高度会把它撑得巨大，城市名跟着变成大字标题。
   min() 保证不管首屏多高，地图和字号都停在一个正常的尺寸上。 */
.eumapwrap{position:absolute;z-index:1;right:0;top:50%;transform:translateY(-50%);
  height:min(104%, 560px);aspect-ratio:0.9943;pointer-events:none}
.eumapfade{position:absolute;inset:0;z-index:2;pointer-events:none;
  background:linear-gradient(90deg,
    var(--deep) 30%, rgba(5,32,29,.85) 46%, rgba(5,32,29,.25) 60%, transparent 70%)}
.eumap{width:100%;height:100%;display:block;overflow:visible}

/* 点阵：一条 path 里全是零长度子路径，round 端点把它们渲染成圆点。
   比一千个 <circle> 小得多，加载和重绘都轻。 */
.dm{fill:none;stroke:rgba(255,255,255,.19);stroke-width:3;stroke-linecap:round}
.ln{fill:none;stroke:rgba(255,255,255,.20);stroke-width:1}
.fl{fill:none;stroke:var(--amber);stroke-width:2.6;stroke-linecap:round;
  filter:drop-shadow(0 0 5px rgba(240,163,64,.8));
  animation-name:flow;animation-timing-function:linear;animation-iteration-count:infinite}
.fl.t{stroke:#7fd6c9;filter:drop-shadow(0 0 5px rgba(127,214,201,.7))}
@keyframes flow{from{stroke-dashoffset:var(--len)}to{stroke-dashoffset:0}}
.nd{fill:var(--deep);stroke:rgba(255,255,255,.55);stroke-width:1.2}
.nd.big{fill:#fff;stroke:none}
.pl{fill:none;stroke:var(--amber);stroke-width:1.6;transform-box:fill-box;
  transform-origin:center;animation:pulse 3s ease-out infinite}
@keyframes pulse{0%{transform:scale(.5);opacity:.9}100%{transform:scale(3.6);opacity:0}}
.lb{fill:rgba(255,255,255,.6);font-size:7.4px;letter-spacing:.12em;font-weight:700;
  font-family:-apple-system,"Segoe UI",Roboto,sans-serif}

/* ================= 数字带 ================= */
.stats{background:var(--deep-2);color:#fff}
.statsin{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));
  gap:1px;background:rgba(255,255,255,.09)}
.stat{background:var(--deep-2);padding:32px 26px;text-align:center}
.stat b{display:block;font-size:38px;font-weight:800;letter-spacing:-1.2px;line-height:1.1;
  color:var(--amber);font-variant-numeric:tabular-nums}
.stat span{display:block;font-size:14px;color:rgba(255,255,255,.66);margin-top:6px}

/* ================= 通用分节 ================= */
.sec{padding:84px 0}
.sec.alt{background:var(--alt);border-block:1px solid var(--line)}
.tag{display:inline-block;font-size:12.5px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--acc);font-weight:700;margin-bottom:12px}
h2{font-size:38px;line-height:1.2;letter-spacing:-1.1px;font-weight:800;margin:0 0 12px}
.secsub{color:var(--soft);font-size:17px;margin:0 0 40px;max-width:50em}

/* ---------- 业务卡片 ---------- */
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(255px,1fr));gap:20px}
.svc{position:relative;background:#fff;border:1px solid var(--line);border-radius:12px;
  padding:28px 24px 26px;overflow:hidden;
  transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease}
/* 顶部色条平时收着，鼠标过去铺开 —— 一点点动，够了 */
.svc::before{content:"";position:absolute;top:0;left:0;height:3px;width:0;
  background:var(--amber);transition:width .3s ease}
.svc:hover::before{width:100%}
.svc:hover{transform:translateY(-4px);border-color:#c9d6d3;
  box-shadow:0 16px 38px rgba(13,26,24,.1)}
.svc .ico{width:50px;height:50px;border-radius:11px;background:var(--acc);color:#fff;
  display:flex;align-items:center;justify-content:center;margin-bottom:16px;
  transition:background .18s,color .18s}
.svc:hover .ico{background:var(--amber);color:#231303}
.svc .ico svg{width:25px;height:25px}
.svc h3{font-size:19px;margin:0 0 3px;letter-spacing:-.3px;font-weight:700}
.svc .de{font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--faint);
  margin-bottom:11px;font-weight:600}
.svc p{margin:0;font-size:14.8px;color:var(--soft);line-height:1.7}

/* ---------- 流程 ---------- */
.steps{list-style:none;margin:0;padding:0;display:grid;
  grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:26px}
.steps li{position:relative;padding-top:16px}
.steps li::before{content:"";position:absolute;top:0;left:0;right:0;height:2px;
  background:var(--line)}
.steps li:first-child::before{background:var(--amber)}
.steps .n{display:inline-flex;align-items:center;justify-content:center;
  width:32px;height:32px;border-radius:8px;background:var(--acc);color:#fff;
  font-weight:800;font-size:15px;margin-bottom:12px}
.steps h3{font-size:18px;margin:0 0 6px;font-weight:700}
.steps p{margin:0;font-size:14.8px;color:var(--soft);line-height:1.7}

/* ================= 开户表单 ================= */
.kontakt{display:grid;grid-template-columns:1.3fr .7fr;gap:44px;align-items:start}
.leadform{margin-top:8px}
.frow{display:flex;gap:16px;flex-wrap:wrap}
.f{flex:1 1 210px;margin-bottom:17px}
.f label{display:block;font-size:13.5px;font-weight:700;color:var(--ink);margin-bottom:6px}
.f label em{color:var(--amber-d);font-style:normal}
.f input[type=text],.f input[type=email],.f select{
  width:100%;padding:13px 14px;border:1px solid var(--line);border-radius:8px;
  font:inherit;font-size:15.5px;background:#fff;color:var(--ink);
  transition:border-color .14s,box-shadow .14s}
.f input:focus,.f select:focus{outline:0;border-color:var(--acc);
  box-shadow:0 0 0 3px var(--acc-soft)}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

.chips{display:flex;flex-wrap:wrap;gap:10px}
/* 权重要追平上面的 .f label（它是 display:block），否则 chip 会变成块级 */
.chips .chip{display:inline-flex;align-items:center;gap:9px;border:1px solid var(--line);
  border-radius:100px;padding:10px 18px;font-size:14.8px;font-weight:500;color:var(--ink);
  cursor:pointer;background:#fff;margin:0;transition:border-color .14s,background .14s}
.chips .chip:hover{border-color:var(--acc-lt)}
.chips .chip input{width:16px;height:16px;accent-color:var(--acc);margin:0;flex:none}
.chips .chip:has(input:checked){background:var(--acc);border-color:var(--acc);color:#fff;
  font-weight:700}
.fine{font-size:12.8px;color:var(--faint);margin:14px 0 0;line-height:1.65}

.ok,.warn{display:flex;gap:12px;align-items:flex-start;border-radius:9px;padding:15px 17px;
  margin-bottom:20px;font-size:15px}
.ok{background:var(--acc-soft);color:var(--acc);border-left:3px solid var(--acc)}
.ok svg{width:20px;height:20px;flex:none;margin-top:2px}
.warn{background:var(--warn-soft);color:var(--warn);border-left:3px solid var(--warn)}

/* ---------- 右侧联系卡：深色，把二维码衬出来 ---------- */
.kright{background:var(--deep);color:#fff;border-radius:14px;padding:30px 28px;
  position:sticky;top:24px}
.kright h3{margin:0 0 6px;font-size:21px;font-weight:700}
.kright .ksub{font-size:14px;color:rgba(255,255,255,.6);margin:0 0 20px}
.qr{background:#fff;border-radius:12px;padding:11px;width:186px;margin:0 auto 10px}
.qr img{display:block;width:100%;height:auto;border-radius:3px}
.qrcap{text-align:center;font-size:13.5px;color:rgba(255,255,255,.62);margin:0 0 20px}
.contact{list-style:none;margin:0;padding:0}
.contact li{display:flex;gap:13px;align-items:flex-start;padding:13px 0;
  border-top:1px solid rgba(255,255,255,.11);font-size:15px}
.contact svg{width:19px;height:19px;color:var(--amber);flex:none;margin-top:3px}
.contact span{display:block;font-size:12px;color:rgba(255,255,255,.5);letter-spacing:.06em;
  text-transform:uppercase;margin-bottom:1px}
.contact a{color:#fff;text-decoration:none;word-break:break-all}
.contact a:hover{color:var(--amber)}
.contact b{color:#fff}
.hint{margin-top:20px;background:rgba(255,255,255,.06);border-radius:9px;padding:14px 16px;
  font-size:14px;color:rgba(255,255,255,.68);line-height:1.65}
.hint b{display:block;color:#fff;margin-bottom:3px}

/* ================= 页脚 ================= */
.foot{background:var(--deep);color:rgba(255,255,255,.6);padding:40px 0;font-size:14px;
  border-top:1px solid rgba(255,255,255,.09)}
.footin{display:flex;justify-content:space-between;gap:26px;flex-wrap:wrap;line-height:1.75}
.foot b{color:#fff}
.foot a{color:rgba(255,255,255,.92);text-decoration:none}
.foot a:hover{color:var(--amber)}
.fr{text-align:right}

/* ================= 法律页 ================= */
.legal h1{font-size:34px;letter-spacing:-.9px;margin:0 0 6px;font-weight:800}
.legal h1 .zh{font-size:19px;color:var(--faint);font-weight:400;margin-left:10px}
.legal h2{font-size:20px;margin:30px 0 8px;letter-spacing:-.3px}
.legal p{margin:0 0 10px;font-size:15.5px;color:var(--soft);line-height:1.78}
.legal p.zh{color:var(--faint);font-size:14.5px}
.legal b{color:var(--ink)}
.legalnav{position:static;background:var(--deep)}
.miss{color:var(--warn);font-weight:700;background:var(--warn-soft);padding:2px 8px;
  border-radius:4px}
.disclaimer{margin-top:36px;border-left:3px solid var(--amber-d);background:#fdf6ea;
  padding:16px 18px;border-radius:0 9px 9px 0;font-size:14.5px;color:#7a4a10;line-height:1.7}
.disclaimer b{display:block;color:var(--amber-d);margin-bottom:4px}
.disclaimer code{background:rgba(0,0,0,.06);color:#4a3a1c;padding:1px 6px;border-radius:3px;
  font-family:ui-monospace,Menlo,monospace;font-size:13px}

/* ================= 窄屏 ================= */
@media (max-width:1120px){
  .eumapwrap{right:-4%;height:min(96%,470px);opacity:.72}
  .eumapfade{background:linear-gradient(90deg,
    var(--deep) 6%, rgba(5,32,29,.8) 30%, rgba(5,32,29,.3) 56%, transparent 72%)}
}
@media (max-width:960px){
  /* 窄屏上地图当背景纹理就等于没有 —— 干脆让它落到文字下面，单独占一块。
     这个尺寸下城市名太小，读不了，索性藏掉，留形状和跑动的干线。 */
  .heroin{max-width:none}
  .eumapwrap{position:relative;right:auto;top:auto;transform:none;
    height:auto;width:min(520px,84vw);margin:36px auto 0;opacity:.95}
  .eumapfade{display:none}
  .lb{display:none}
  .kontakt{grid-template-columns:1fr;gap:30px}
  .kright{position:static}
  .hero h1{font-size:40px;letter-spacing:-1.1px}
  .hero .lead{font-size:17px}
  h2{font-size:29px;letter-spacing:-.7px}
}
@media (max-width:760px){
  .hero{padding:112px 0 54px}
  .hero h1{font-size:31px;letter-spacing:-.7px}
  .navin{height:66px}
  .nav nav a:not(.btn){display:none}
  .cta{margin-bottom:32px}
  .cta .btn{flex:1 1 100%}
  .trust div{flex:1 1 100%}
  .eumapwrap{width:min(320px,84vw);margin-top:26px}
  .sec{padding:54px 0}
  .stat{padding:22px 16px}
  .stat b{font-size:30px}
  .fr{text-align:left}
  .legal h1{font-size:26px}
}

/* 系统里关了动效就一律不动。不是可选项。 */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .eyebrow i,.pl{animation:none}
  .fl{animation:none;stroke-dasharray:none;opacity:.9}
  .svc:hover,.btn:hover{transform:none}
  .svc::before{transition:none}
}

/* ---------- 市场行情页 /markt ---------- */
.mkt{padding-top:52px}
.mkt h1{font-size:34px;letter-spacing:-.9px;margin:0 0 6px;font-weight:800}
.mkt h1 .zh{font-size:19px;color:var(--faint);font-weight:400;margin-left:10px}
.mcard{border:1px solid var(--line);border-radius:14px;padding:26px 28px;margin:0 0 22px;
  background:var(--bg)}
.mhead{display:flex;align-items:flex-start;justify-content:space-between;gap:24px;
  flex-wrap:wrap;margin-bottom:16px}
.mhead h2{font-size:21px;margin:0;letter-spacing:-.3px}
.mhead h2 .de{display:block;font-size:13px;color:var(--faint);font-weight:400;
  letter-spacing:0;margin-top:2px}
.mhead .big{text-align:right;line-height:1.1}
.mhead .big .n{font-size:38px;font-weight:800;letter-spacing:-1.4px;
  font-variant-numeric:tabular-nums}
.mhead .big .u{font-size:17px;color:var(--soft);font-weight:600}
.mhead .big .cap{display:block;font-size:12px;color:var(--faint);margin-top:3px}
.mkt .lead{color:var(--soft);font-size:15.5px;margin:0 0 14px}

table.bars{width:100%;border-collapse:collapse;font-size:15.5px}
table.bars th{text-align:left;font-size:13px;font-weight:600;color:var(--faint);
  text-transform:uppercase;letter-spacing:.4px;padding:0 10px 8px 0;
  border-bottom:1px solid var(--line)}
table.bars td{padding:9px 10px 9px 0;border-bottom:1px solid var(--line-2)}
table.bars tr:last-child td{border-bottom:0}
table.bars .r{text-align:right}
table.bars .w{width:32%}
table.bars .nt{font-size:13.5px;color:var(--faint);width:26%}
table.bars .nm .cc{font-size:11px;color:var(--faint);margin-left:5px;
  border:1px solid var(--line);border-radius:3px;padding:0 4px}
table.bars .strong{font-weight:700;font-variant-numeric:tabular-nums}
table.bars .mono{font-variant-numeric:tabular-nums}
table.bars tr.me{background:var(--acc-soft)}
table.bars tr.me .nm b{color:var(--acc)}
.bar{display:block;height:9px;border-radius:5px;background:var(--acc-lt);min-width:3px}
.bar.maut{background:var(--amber)}
tr.me .bar{background:var(--acc)}

.mkt .fn{font-size:13.5px;color:var(--faint);margin:12px 0 0;line-height:1.65}
.mkt .fn b{color:var(--soft)}
.q{color:var(--amber-d);font-weight:700}

.insight{margin-top:16px;background:var(--acc-soft);border-radius:10px;
  padding:14px 16px;font-size:15px;color:var(--soft);line-height:1.7}
.insight b{display:block;color:var(--acc);font-size:15px;margin-bottom:3px}
.insight.plain{background:var(--alt)}
.insight.plain b{color:var(--ink)}

.pts{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:20px}
.pt h3{font-size:15px;margin:0 0 6px}
.pt p{font-size:14.5px;color:var(--soft);margin:0 0 8px;line-height:1.7}
.pt a{font-size:13px;color:var(--faint);text-decoration:none}
.pt a:hover{color:var(--acc)}

.src{margin-top:18px;padding-top:12px;border-top:1px solid var(--line-2);
  font-size:13px;color:var(--faint);line-height:1.6}
.src b{color:var(--soft)}
.src a{color:var(--faint)}
.src.old b{color:var(--warn)}
.oldtag{background:var(--warn-soft);color:var(--warn);font-weight:700;
  padding:1px 7px;border-radius:20px}

.mcard.intern{border:1px solid var(--amber);background:#fffdf8}
.mcard.intern .mhead h2{color:var(--amber-d)}
.igrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:14px}
.ic{background:#fff;border:1px solid var(--line);border-radius:10px;padding:12px 14px}
.ic .l{display:block;font-size:12.5px;color:var(--faint);text-transform:uppercase;
  letter-spacing:.4px}
.ic b{display:block;font-size:23px;font-weight:800;letter-spacing:-.7px;margin:3px 0 2px;
  font-variant-numeric:tabular-nums}
/* 别叫 .ok —— 上面 .ok 已经是个整块提示框的样式，会把背景带过来 */
.ic b.frisch{color:var(--acc)} .ic b.alt{color:var(--warn)}
.ic .h{font-size:12.5px;color:var(--faint)}
.mkt .disc{font-size:13px;color:var(--faint);margin-top:26px;text-align:center}

@media (max-width:760px){
  .mkt h1{font-size:26px}
  .mcard{padding:20px 18px}
  .mhead .big{text-align:left}
  table.bars .w,table.bars .nt{display:none}
}

/* ---------- 主页行情条（滚动） ---------- */
.mktbar{background:var(--deep-2);color:#fff;overflow:hidden}
.mktbarin{display:flex;align-items:center;gap:20px;padding:0}
.mb-k{flex:none;padding:14px 0;line-height:1.25}
.mb-k .k{display:block;font-size:12px;letter-spacing:1.4px;text-transform:uppercase;
  color:#fff;font-weight:700}
.mb-k .st{display:block;font-size:10.5px;color:rgba(255,255,255,.4);white-space:nowrap}
.mb-r{flex:none;color:var(--amber);text-decoration:none;font-size:13.5px;font-weight:600;
  white-space:nowrap}
.mb-r:hover{text-decoration:underline}

/* 跑马灯本体。两侧渐隐，进出场不是硬切。 */
.tick{flex:1 1 auto;min-width:0;overflow:hidden;position:relative;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent);
          mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent)}
.tickrun{display:flex;width:max-content;animation:tickrun var(--dur,70s) linear infinite}
.tick:hover .tickrun{animation-play-state:paused}
@keyframes tickrun{from{transform:translateX(0)}to{transform:translateX(-50%)}}

.ticklist{display:flex;list-style:none;margin:0;padding:0}
.ticklist li{display:flex;align-items:baseline;gap:7px;padding:14px 15px;
  white-space:nowrap;border-right:1px solid rgba(255,255,255,.07);font-size:14px}
.ticklist .cc{font-size:10px;font-weight:700;letter-spacing:.6px;
  color:rgba(255,255,255,.42);border:1px solid rgba(255,255,255,.18);
  border-radius:3px;padding:1px 4px}
.ticklist .nm{color:rgba(255,255,255,.62)}
.ticklist b{font-size:16px;font-weight:700;color:#fff;letter-spacing:-.2px;
  font-variant-numeric:tabular-nums}
.ticklist b::after{content:" €";font-size:11px;font-weight:400;
  color:rgba(255,255,255,.45)}
.ticklist .dl{font-size:11.5px;font-variant-numeric:tabular-nums}
.ticklist .dl.up{color:#F08A6B} .ticklist .dl.down{color:#6FC79A}
.ticklist .dl.flat{color:rgba(255,255,255,.4)}
.ticklist li.me{background:rgba(240,163,64,.13)}
.ticklist li.me .nm{color:var(--amber)}
.ticklist li.me .cc{color:var(--amber);border-color:rgba(240,163,64,.45)}

/* 关了动效的：不滚，改成能手动横滑的一条。内容一条不少。 */
@media (prefers-reduced-motion: reduce){
  .tickrun{animation:none}
  .tick{overflow-x:auto;scrollbar-width:none}
  .tick::-webkit-scrollbar{display:none}
  .ticklist:nth-child(2){display:none}
}
@media (max-width:700px){
  .mktbarin{flex-wrap:wrap;gap:0}
  .mb-k{padding:12px 0 4px}
  .tick{order:3;flex-basis:100%;margin:0 -24px;width:calc(100% + 48px);flex-grow:0}
  .mb-r{margin-left:auto;padding:12px 0 4px;font-size:12.5px}
  .ticklist li{padding:10px 12px;font-size:13px}
  .ticklist b{font-size:15px}
}


/* 内部：德国当日抽样条 */
.daily{display:flex;align-items:center;justify-content:space-between;gap:20px;
  flex-wrap:wrap;background:#fff;border:1px solid var(--line);border-left:3px solid var(--acc);
  border-radius:10px;padding:14px 18px;margin-bottom:14px}
.daily.old{border-left-color:var(--warn);background:var(--warn-soft)}
.daily .l{display:block;font-size:12.5px;color:var(--faint);text-transform:uppercase;
  letter-spacing:.4px}
.daily .dl b{display:block;font-size:30px;font-weight:800;letter-spacing:-1px;margin:2px 0;
  font-variant-numeric:tabular-nums}
.daily .dl b span{font-size:15px;font-weight:600;color:var(--soft)}
.daily .h{font-size:12.5px;color:var(--faint)}
.daily .dr{text-align:right}
.daily .dr b{display:block;font-size:15px;font-weight:700}
.daily .dr b.frisch{color:var(--acc)} .daily .dr b.alt{color:var(--warn)}
@media (max-width:600px){ .daily .dr{text-align:left} }

/* ---------- FBA 有效期自查 /fba ---------- */
.fba{padding-top:52px}
.fba h1{font-size:30px;letter-spacing:-.9px;margin:0 0 6px;font-weight:800}
.fba h1 .zh{font-size:18px;color:var(--faint);font-weight:400;margin-left:10px}

.calc{display:grid;grid-template-columns:minmax(300px,1fr) minmax(320px,1.15fr);
  gap:24px;align-items:start;border:1px solid var(--line);border-radius:14px;
  padding:26px 28px;background:var(--bg)}
.cin .f{margin-bottom:16px}
.cin label{display:block;font-size:14px;font-weight:600;margin-bottom:5px}
.cin .req{color:var(--warn);font-weight:700;font-size:11.5px;margin-left:4px}
.cin .opt{color:var(--faint);font-weight:400;font-size:11.5px;margin-left:4px}
.cin input[type=date]{width:100%;padding:11px 12px;border:1px solid var(--line);
  border-radius:8px;font:inherit;font-size:15.5px;background:#fff;color:var(--ink)}
.cin input[type=date]:focus{outline:2px solid var(--acc);outline-offset:1px;border-color:var(--acc)}
.cin .h{display:block;font-size:12.5px;color:var(--faint);margin-top:4px;line-height:1.5}
.seg2{display:flex;gap:9px}
.seg2 .op{flex:1;margin:0;cursor:pointer}
.seg2 .op input{position:absolute;opacity:0;pointer-events:none}
.seg2 .op span{display:block;border:1.5px solid var(--line);border-radius:8px;
  padding:9px 11px;text-align:center;background:#fff}
.seg2 .op b{display:block;font-size:13.5px}
.seg2 .op em{font-style:normal;font-size:12px;color:var(--faint)}
.seg2 .op input:checked + span{border-color:var(--acc);background:var(--acc-soft)}
.seg2 .op input:checked + span b{color:var(--acc)}
.seg2 .op input:focus-visible + span{outline:2px solid var(--acc);outline-offset:2px}
.more{margin-top:2px}
.more summary{font-size:13.5px;color:var(--acc);cursor:pointer}

.cout{border-radius:12px;padding:20px 22px;background:#fff;border:1px solid var(--line)}
.cout.empty{color:var(--faint);font-size:14px}
.cout.empty p{margin:0 0 10px}
.cout .priv{font-size:12.5px;line-height:1.6;margin:0}
.cout.a-gruen{background:var(--acc-soft);border-color:#9cc3ba}
.cout.a-gelb{background:#fbf0dc;border-color:#e5c98d}
.cout.a-rot,.cout.a-abgelaufen{background:#fae8e3;border-color:#e3ac9c}
.cout .big .t{display:block;font-size:27px;font-weight:800;letter-spacing:-.8px;
  line-height:1.2}
.cout .big .dt{display:block;font-size:14px;color:var(--soft);margin-top:2px;
  font-variant-numeric:tabular-nums}
.a-gruen .big .t{color:#14524b} .a-gelb .big .t{color:#875607}
.a-rot .big .t,.a-abgelaufen .big .t{color:#9e3d2a}
.cout .bar{position:relative;height:8px;border-radius:4px;background:rgba(0,0,0,.09);
  margin:14px 0 8px;overflow:hidden}
.cout .bar .used{height:100%;border-radius:4px;background:currentColor;opacity:.55}
.a-gruen .bar{color:#14524b} .a-gelb .bar{color:#875607}
.a-rot .bar,.a-abgelaufen .bar{color:#9e3d2a}
.cout .meta{font-size:12.5px;color:var(--soft)}
.cout .advice{font-size:14.5px;line-height:1.7;margin-top:12px;color:var(--ink)}
.cout .lager{margin-top:16px;padding-top:14px;border-top:1px solid rgba(0,0,0,.1)}
.cout .lager>b{display:block;font-size:13px;margin-bottom:9px}
.cout .lg{display:grid;grid-template-columns:repeat(2,1fr);gap:8px 16px}
.cout .lg div{font-size:12.5px;color:var(--soft)}
.cout .lg span{display:block}
.cout .lg b{font-size:19px;color:var(--ink);font-variant-numeric:tabular-nums}
.cout .lager p{font-size:14px;line-height:1.65;margin:12px 0 0;font-weight:600}
.cout .ok2{color:#14524b} .cout .warn2{color:#875607} .cout .bad2{color:#9e3d2a}

.cta2{display:flex;align-items:center;justify-content:space-between;gap:26px;
  flex-wrap:wrap;background:var(--deep);border-color:var(--deep)}
.cta2 h2,.cta2 .lead{color:#fff}
.cta2 .lead{color:rgba(255,255,255,.82);max-width:52em}
.fba .disc{font-size:12.5px;color:var(--faint);margin-top:26px;line-height:1.7}
.fba .disc b{color:var(--soft)}

@media (max-width:820px){
  .calc{grid-template-columns:1fr;padding:20px 18px}
  .fba h1{font-size:25px}
  .cout .big .t{font-size:23px}
  .cta2{flex-direction:column;align-items:flex-start}
}

/* ---------- 主页上的免费工具引流条 ---------- */
.toolstrip{background:var(--alt);border-top:1px solid var(--line);
  border-bottom:1px solid var(--line)}
.toolin{display:grid;grid-template-columns:1.25fr .95fr;gap:44px;align-items:center}
.toolstrip h2{font-size:29px;letter-spacing:-.7px;margin:8px 0 10px}
.toolstrip p{color:var(--soft);font-size:16px;line-height:1.75;margin:0 0 20px;max-width:36em}
.toolstrip p b{color:var(--ink)}
.toolstrip .np{display:block;font-size:12.5px;color:var(--faint);margin-top:12px}

/* 右边那张示意卡：给人看「算出来长什么样」，比文字描述快 */
.toolstrip .mini{background:#fbf0dc;border:1px solid #e5c98d;border-radius:12px;
  padding:20px 22px}
.toolstrip .mini .l{display:block;font-size:12.5px;color:#875607;font-weight:600}
.toolstrip .mini b{display:block;font-size:32px;font-weight:800;color:#875607;
  letter-spacing:-1px;line-height:1.25;margin:2px 0 10px}
.toolstrip .mb{height:8px;border-radius:4px;background:rgba(0,0,0,.09);overflow:hidden}
.toolstrip .mb i{display:block;height:100%;border-radius:4px;background:#875607;opacity:.55}
.toolstrip .mini .s{display:block;font-size:12.5px;color:#875607;margin-top:9px}

@media (max-width:860px){
  .toolin{grid-template-columns:1fr;gap:26px}
  .toolstrip h2{font-size:24px}
  .toolstrip .mini b{font-size:27px}
}

/* 倒推日期块：从「还剩几天」翻译成「几号该干什么」。
   类名一律加 bp- 前缀（backward plan）—— 上一版用了 .pl，
   正好撞上欧洲地图那个脉冲光点的 .pl（animation:pulse，scale 到 3.6 倍），
   结果标签在页面上放大闪烁还盖住了日期选择框。短类名在这个文件里太危险。 */
.cout .bp{margin-top:16px;padding-top:14px;border-top:1px solid rgba(0,0,0,.1)}
.cout .bp-head{display:block;font-size:13px;margin-bottom:9px}
.bp-row{display:flex;align-items:baseline;gap:10px;padding:5px 0;
  border-bottom:1px dashed rgba(0,0,0,.09)}
.bp-row:last-of-type{border-bottom:0}
.bp-row .bp-label{flex:0 0 92px;font-size:12.5px;color:var(--soft)}
.bp-row b{flex:0 0 auto;font-size:16px;font-variant-numeric:tabular-nums;
  letter-spacing:-.2px}
.bp-row .bp-note{flex:1;text-align:right;font-size:11.5px;color:#4d5955}  /* 不用 --faint：压在三种灯的浅底上只有 4.49，AA 要 4.5 —— 差一点也是不合格 */
.bp-row.weg b{text-decoration:line-through;opacity:.55}
.bp-row.weg .bp-note{color:#9e3d2a;font-weight:700;opacity:1}
.cout .bp-peak{font-size:12.5px;line-height:1.65;margin:10px 0 0;
  color:#875607;font-weight:600}
/* 兜底：这一块里的任何东西都不许动画、不许被缩放。
   万一将来又撞上别的类名，最坏也只是颜色不对，不会再挡住输入框。 */
.cout .bp,.cout .bp *{animation:none !important;transform:none !important}
@media (max-width:820px){
  .bp-row{flex-wrap:wrap;gap:4px 10px}
  .bp-row .bp-label{flex:0 0 88px}
  .bp-row .bp-note{flex:1 1 100%;text-align:left}
}