/* ===================================================================
   SMART WAY MARINE CARGO LLC — Public tracking page TEMPLATES
   -------------------------------------------------------------------
   MOBILE FIRST. Every rule below is written for the narrowest screen,
   then progressively enhanced with min-width queries. There are no
   fixed pixel widths, no desktop-first max-width patches, and every
   multi-column grid uses  minmax(min(100%, Xrem), 1fr)  so a column can
   never be wider than its container on a small screen.

   Structure of this file
     1. Theme tokens (light / dark)
     2. Responsive primitives shared by all templates
     3. Theme toggle + keyframe library
     4. One block per template (own layout, own components, own motion)

   Renderers live in assets/js/templates.js
   =================================================================== */

/* ==================================================================
   1. THEME TOKENS
   ================================================================== */
:root{
  --tpl-accent:#3E87FB; --tpl-accent-2:#06B6D4;
  --tpl-bg:#F4F7FB; --tpl-bg-2:#FFFFFF;
  --tpl-surface:#FFFFFF; --tpl-surface-2:#F8FAFC; --tpl-surface-3:#EDF2F8;
  --tpl-text:#0F172A; --tpl-text-soft:#334155; --tpl-muted:#64748B;
  --tpl-border:#E2E8F0; --tpl-border-2:#CBD5E1;
  --tpl-shadow:0 6px 20px rgba(62,135,251,.07);
  --tpl-shadow-lg:0 18px 44px rgba(62,135,251,.12);
  --tpl-ok:#16A34A; --tpl-warn:#F59E0B; --tpl-danger:#DC2626;
  --tpl-mono:ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,"Liberation Mono",monospace;

  /* Fluid scale — every template uses these instead of hard sizes */
  --fs-xs:clamp(.66rem,.62rem + .18vw,.74rem);
  --fs-sm:clamp(.78rem,.74rem + .2vw,.86rem);
  --fs-md:clamp(.9rem,.86rem + .22vw,.98rem);
  --fs-lg:clamp(1.02rem,.95rem + .4vw,1.18rem);
  --fs-xl:clamp(1.2rem,1.05rem + 1vw,1.6rem);
  --fs-2xl:clamp(1.45rem,1.15rem + 2.2vw,2.3rem);
  --fs-3xl:clamp(1.8rem,1.25rem + 3.6vw,3.1rem);
  --sp-1:clamp(.3rem,.28rem + .1vw,.45rem);
  --sp-2:clamp(.5rem,.45rem + .25vw,.75rem);
  --sp-3:clamp(.75rem,.65rem + .5vw,1.1rem);
  --sp-4:clamp(1rem,.85rem + .8vw,1.6rem);
  --sp-5:clamp(1.35rem,1.1rem + 1.3vw,2.25rem);
  --rad:clamp(.6rem,.5rem + .5vw,1.1rem);
  --tap:44px;                     /* minimum touch target */
}
body{transition:background-color .25s ease,color .25s ease}
*,*::before,*::after{min-width:0}          /* stops flex/grid children overflowing */
#resultArea img{max-width:100%;height:auto}
#resultArea{overflow-x:hidden}

/* ==================================================================
   2. RESPONSIVE PRIMITIVES  (mobile first, composed by every template)
   ================================================================== */
.t-wrap{display:flex;flex-direction:column;gap:var(--sp-3);width:100%}
.t-card{background:var(--tpl-surface);border:1px solid var(--tpl-border);
  border-radius:var(--rad);padding:var(--sp-4);box-shadow:var(--tpl-shadow)}
.t-pad{padding:var(--sp-4)}
.t-stack{display:flex;flex-direction:column;gap:var(--sp-2)}
.t-cluster{display:flex;flex-wrap:wrap;gap:var(--sp-2);align-items:center}

/* Auto grid: one column on phones, more only when there is real room */
.t-grid{display:grid;gap:var(--sp-2);grid-template-columns:1fr}
@media (min-width:30rem){ .t-grid{grid-template-columns:repeat(auto-fit,minmax(min(100%,11rem),1fr))} }
.t-grid-lg{display:grid;gap:var(--sp-3);grid-template-columns:1fr}
@media (min-width:48rem){ .t-grid-lg{grid-template-columns:repeat(auto-fit,minmax(min(100%,16rem),1fr))} }

/* Split: stacked on phones, side-by-side from tablet up */
.t-split{display:grid;gap:var(--sp-4);grid-template-columns:1fr}
@media (min-width:52rem){ .t-split{grid-template-columns:minmax(0,1.4fr) minmax(0,1fr)} }

.t-chip{display:inline-flex;align-items:center;gap:.3em;font-size:var(--fs-xs);
  padding:.28em .7em;border-radius:2em;background:var(--tpl-surface-3);color:var(--tpl-text-soft);
  white-space:nowrap;max-width:100%;overflow:hidden;text-overflow:ellipsis}
.t-chip.ok{background:color-mix(in srgb,var(--tpl-ok) 16%,transparent);color:var(--tpl-ok)}
.t-chip.no{background:color-mix(in srgb,var(--tpl-danger) 16%,transparent);color:var(--tpl-danger)}
@supports not (color:color-mix(in srgb,red 50%,blue)){
  .t-chip.ok{background:#F4F6FA} .t-chip.no{background:#F4F6FA}
}
.t-meter{height:6px;border-radius:3px;background:var(--tpl-surface-3);overflow:hidden}
.t-meter>span{display:block;height:100%;border-radius:3px;
  background:linear-gradient(90deg,var(--tpl-accent),var(--tpl-accent-2))}
.t-err{border:1px solid var(--tpl-warn);border-radius:var(--rad);padding:var(--sp-3);
  background:var(--tpl-surface);color:var(--tpl-text);font-size:var(--fs-sm)}
.t-qr{border-radius:.6rem;background:#F4F6FA;padding:.35rem;border:1px solid var(--tpl-border);
  width:clamp(88px,26vw,124px);height:auto}

/* Shared relationship block, reskinned per template via its own wrapper */
.t-rel h4{margin:0 0 var(--sp-1);font-size:var(--fs-xs);letter-spacing:.12em;
  text-transform:uppercase;color:var(--tpl-muted)}
.t-rel p{margin:.15rem 0;font-size:var(--fs-sm);color:var(--tpl-text);overflow-wrap:anywhere}
.t-rel small{display:block;margin-top:var(--sp-1);font-size:var(--fs-xs);
  color:var(--tpl-muted);line-height:1.55}
.t-rel .t-chip{margin:.15rem .2rem 0 0}

/* Long values (tracking numbers, AWBs) must wrap rather than overflow */
.t-break{overflow-wrap:anywhere;word-break:break-word}

/* Phones: trim the toggle so it sits at the same height as the language pill
   next to it. Declared here rather than in public.css because the rules above
   live in this file, which is the last stylesheet loaded. */
@media (max-width:640px){
}

@keyframes tplRise{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
@keyframes tplFade{from{opacity:0}to{opacity:1}}
@keyframes tplPop{from{opacity:0;transform:scale(.92)}to{opacity:1;transform:none}}
@keyframes tplShimmer{0%{background-position:-200% 0}100%{background-position:200% 0}}
@keyframes tplBlink{0%,49%{opacity:1}50%,100%{opacity:0}}
@keyframes tplType{from{width:0}to{width:100%}}
@keyframes tplRing{from{stroke-dashoffset:var(--c)}to{stroke-dashoffset:var(--o)}}
@keyframes tplSpin{to{transform:rotate(360deg)}}
@keyframes tplDraw{from{transform:scaleY(0)}to{transform:scaleY(1)}}
@keyframes tplDrawX{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes tplPulseDot{0%{box-shadow:0 0 0 0 currentColor;opacity:.9}70%{box-shadow:0 0 0 11px transparent}100%{box-shadow:0 0 0 0 transparent}}
@keyframes tplSlideL{from{opacity:0;transform:translateX(-24px)}to{opacity:1;transform:none}}
@keyframes tplSlideR{from{opacity:0;transform:translateX(24px)}to{opacity:1;transform:none}}
@keyframes tplSlideU{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:none}}
@keyframes tplFly{from{left:0}to{left:var(--bp-p)}}
@keyframes tplGrow{from{width:0}to{width:var(--w)}}
@keyframes tplScan{0%{transform:translateY(-100%)}100%{transform:translateY(1800%)}}
@keyframes tplSweep{to{transform:rotate(360deg)}}
@keyframes tplFlap{0%{transform:rotateX(-90deg);opacity:0}100%{transform:none;opacity:1}}
@keyframes tplStamp{0%{opacity:0;transform:scale(2.4) rotate(var(--r,-8deg))}60%{opacity:1;transform:scale(.95) rotate(var(--r,-8deg))}100%{opacity:1;transform:scale(1) rotate(var(--r,-8deg))}}
@keyframes tplWave{0%{background-position-x:0}100%{background-position-x:-64px}}
@keyframes tplNeedle{from{transform:rotate(-120deg)}to{transform:rotate(var(--deg))}}
@keyframes tplBubble{from{opacity:0;transform:translateY(10px) scale(.96)}to{opacity:1;transform:none}}
@keyframes tplBob{0%,100%{transform:translateY(0)}50%{transform:translateY(-5px)}}
@keyframes tplFlicker{0%,100%{opacity:1}92%{opacity:1}94%{opacity:.72}96%{opacity:1}}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;
    transition-duration:.01ms !important;scroll-behavior:auto !important}
}
.btn-primary{background:linear-gradient(135deg,var(--tpl-accent),var(--tpl-accent-2)) !important;border-color:transparent !important}
/* The journey deliberately keeps its own stage palette (blue → sky → indigo →
   teal → green) rather than being flattened to the brand accent: the whole point
   of the strip is that each leg is distinguishable. The accent still drives the
   progress fill below, the buttons and the rest of the page. */
.journey-steps .progress-fill{background:linear-gradient(90deg,var(--tpl-accent),var(--tpl-accent-2),var(--tpl-accent))}
body[data-template="classic"][data-anim="1"] .result-panel,
body[data-template="classic"][data-anim="1"] .journey-card{animation:tplRise .5s cubic-bezier(.2,.8,.25,1) both}
/* The active dot's halo comes from pulseRing in public.css, which tints itself
   from --step-halo. The old rule here set `color: accent` on the dot, which made
   the glyph the same colour as the disc behind it — that is why the icon on the
   current step looked transparent. */
.journey-step.custom .label{font-weight:800}

/* ==================================================================
   4b. BOARDING PASS — torn ticket + perforated stub
   Phone: single column, stub below a tear line, route stacked.
   ================================================================== */
body[data-template="boarding"]{background:var(--tpl-bg)}
.bp-wrap{display:flex;flex-direction:column;gap:var(--sp-3);width:100%}
.bp-ticket{display:grid;grid-template-columns:1fr;background:var(--tpl-surface);
  border-radius:var(--rad);box-shadow:var(--tpl-shadow-lg);overflow:hidden}
body[data-anim="1"] .bp-ticket{animation:tplRise .5s cubic-bezier(.2,.8,.25,1) both}
.bp-main{padding:var(--sp-4)}
.bp-head{display:flex;justify-content:space-between;align-items:baseline;gap:var(--sp-2);flex-wrap:wrap;
  padding-bottom:var(--sp-3);border-bottom:1px solid var(--tpl-border)}
.bp-brand{display:inline-flex;align-items:center;gap:.4em;font-weight:800;letter-spacing:.1em;
  font-size:var(--fs-xs);text-transform:uppercase;color:var(--tpl-accent)}
.bp-doc{font-family:var(--tpl-mono);font-size:var(--fs-xs);color:var(--tpl-muted)}
.bp-doc b{display:block;font-size:var(--fs-lg);color:var(--tpl-text);letter-spacing:.04em;overflow-wrap:anywhere}
.bp-route{display:grid;grid-template-columns:1fr;gap:var(--sp-1);text-align:center;padding:var(--sp-4) 0 var(--sp-3)}
.bp-port b{display:block;font-size:var(--fs-xl);font-weight:800;color:var(--tpl-text);line-height:1.15;overflow-wrap:anywhere}
.bp-port span{font-size:var(--fs-xs);letter-spacing:.14em;text-transform:uppercase;color:var(--tpl-muted)}
.bp-path{position:relative;height:2.75rem;margin:var(--sp-1) 0}
.bp-dash{position:absolute;left:0;right:0;top:50%;border-top:2px dashed var(--tpl-border)}
.bp-fill{position:absolute;left:0;top:50%;height:3px;margin-top:-1px;width:var(--bp-p);border-radius:2px;
  background:linear-gradient(90deg,var(--tpl-accent),var(--tpl-accent-2))}
.bp-vehicle{position:absolute;top:50%;left:var(--bp-p);transform:translate(-50%,-50%);
  width:2.4rem;height:2.4rem;border-radius:50%;display:flex;align-items:center;justify-content:center;
  color:#174E9E;background:linear-gradient(135deg,var(--tpl-accent),var(--tpl-accent-2));z-index:2;
  box-shadow:0 5px 14px rgba(62,135,251,.45)}
body[data-anim="1"] .bp-vehicle,body[data-anim="1"] .bp-fill{animation:tplFly 1.3s cubic-bezier(.25,.9,.3,1) both}
.bp-pct{position:absolute;left:50%;top:-.1rem;transform:translateX(-50%);font-family:var(--tpl-mono);
  font-size:var(--fs-xs);color:var(--tpl-muted)}
.bp-status{background:var(--tpl-surface-2);border:1px solid var(--tpl-border);border-radius:.7rem;padding:var(--sp-3)}
.bp-status-k{display:block;font-size:var(--fs-xs);letter-spacing:.14em;text-transform:uppercase;color:var(--tpl-muted)}
.bp-status-v{display:block;font-size:var(--fs-xl);font-weight:800;color:var(--tpl-text);overflow-wrap:anywhere}
.bp-status-r{display:block;font-size:var(--fs-sm);color:var(--tpl-muted);margin-top:.25rem}
.bp-fields{display:grid;grid-template-columns:1fr;margin-top:var(--sp-3);border-top:1px dashed var(--tpl-border)}
.bp-field{padding:var(--sp-2) var(--sp-2);border-bottom:1px dashed var(--tpl-border)}
body[data-anim="1"] .bp-field{animation:tplFade .5s ease both}
.bp-fk{display:block;font-family:var(--tpl-mono);font-size:var(--fs-xs);letter-spacing:.1em;
  text-transform:uppercase;color:var(--tpl-muted)}
.bp-fv{display:block;font-weight:700;color:var(--tpl-text);overflow-wrap:anywhere}
.bp-fr{display:block;font-size:var(--fs-xs);color:var(--tpl-muted)}
.bp-stub{position:relative;background:linear-gradient(160deg,#EAF2FF,#FFFFFF);color:#174E9E;
  padding:var(--sp-4);display:flex;flex-direction:column;align-items:center;gap:var(--sp-2);text-align:center;
  border-top:2px dashed rgba(62,135,251,.3)}
.bp-stub-top span{display:block;font-size:var(--fs-xs);letter-spacing:.16em;text-transform:uppercase;opacity:.7}
.bp-stub-top b{display:block;font-family:var(--tpl-mono);font-size:var(--fs-lg);letter-spacing:.06em;
  margin:.15rem 0 .4rem;overflow-wrap:anywhere}
.bp-pay{display:inline-block;font-size:var(--fs-xs);font-weight:700;padding:.2em .6em;border-radius:1em}
.bp-pay.ok{background:#F4F6FA;color:#174E9E}
.bp-pay.no{background:#F4F6FA;color:#174E9E}
.bp-qr{border-radius:.5rem;background:#F4F6FA;padding:.3rem;width:clamp(96px,30vw,128px);height:auto}
.bp-barcode{width:100%;height:2.2rem;opacity:.85;background-size:200% 100%;
  background-image:repeating-linear-gradient(90deg,#fff 0 2px,transparent 2px 4px,#fff 4px 5px,
  transparent 5px 9px,#fff 9px 12px,transparent 12px 14px)}
body[data-anim="1"] .bp-barcode{animation:tplShimmer 4s linear infinite}
.bp-stub small{font-size:var(--fs-xs);opacity:.72}
.bp-stops,.bp-log{background:var(--tpl-surface);border:1px solid var(--tpl-border);
  border-radius:var(--rad);padding:var(--sp-4)}
.bp-stops h3,.bp-log h3{margin:0 0 var(--sp-3);font-size:var(--fs-md);color:var(--tpl-text);
  display:flex;align-items:center;gap:.4em}
.bp-stops ul,.bp-log ul{list-style:none;margin:0;padding:0}
.bp-stop{display:grid;grid-template-columns:2.2rem 1fr;gap:var(--sp-2);position:relative;padding-bottom:var(--sp-3)}
.bp-stop:last-child{padding-bottom:0}
.bp-stop::after{content:'';position:absolute;left:1.05rem;top:2.2rem;bottom:.2rem;width:2px;background:var(--tpl-border)}
.bp-stop:last-child::after{display:none}
.bp-stop.completed::after{background:var(--tpl-accent)}
.bp-stop-dot{width:2.2rem;height:2.2rem;border-radius:50%;display:flex;align-items:center;justify-content:center;
  background:var(--tpl-surface-3);color:var(--tpl-muted);border:2px solid var(--tpl-border);font-size:var(--fs-sm)}
.bp-stop.completed .bp-stop-dot,.bp-stop.current .bp-stop-dot{
  background:linear-gradient(135deg,var(--tpl-accent),var(--tpl-accent-2));color:#174E9E;border-color:transparent}
body[data-anim="1"] .bp-stop.current .bp-stop-dot{animation:tplPulseDot 2s ease-out infinite}
.bp-stop-txt b{display:block;font-size:var(--fs-md);color:var(--tpl-text);overflow-wrap:anywhere}
.bp-stop.pending .bp-stop-txt b{color:var(--tpl-muted);font-weight:600}
.bp-stop-txt i{display:block;font-style:normal;font-family:var(--tpl-mono);font-size:var(--fs-xs);color:var(--tpl-muted)}
.bp-stop-txt em{display:block;font-style:normal;font-size:var(--fs-sm);color:var(--tpl-text-soft)}
.bp-log li{display:grid;grid-template-columns:1fr;gap:.1rem;padding:var(--sp-2) 0;border-bottom:1px dashed var(--tpl-border)}
.bp-log li:last-child{border-bottom:0}
.bp-log li.now .bp-log-b b{color:var(--tpl-accent)}
.bp-log-t{font-family:var(--tpl-mono);font-size:var(--fs-xs);color:var(--tpl-muted)}
.bp-log-b b{display:block;color:var(--tpl-text);overflow-wrap:anywhere}
.bp-log-b em{display:block;font-style:normal;font-size:var(--fs-sm);color:var(--tpl-muted)}
.bp-rel{margin-top:var(--sp-3);padding:var(--sp-3);border:1px solid var(--tpl-border);
  border-radius:.7rem;background:var(--tpl-surface-2)}
.bp-chip{display:inline-block;background:var(--tpl-surface-3);border-radius:1em;padding:.1em .55em;
  margin:.1rem .2rem 0 0;font-size:var(--fs-xs)}
.bp-err{border:1px solid var(--tpl-warn);border-radius:var(--rad);padding:var(--sp-3);
  background:var(--tpl-surface);font-size:var(--fs-sm)}
/* Tablet: two field columns. Desktop: the stub sits alongside. */
@media (min-width:34rem){
  .bp-route{grid-template-columns:auto 1fr auto;gap:var(--sp-3);align-items:center;text-align:center}
  .bp-fields{grid-template-columns:1fr 1fr}
  .bp-field{border-right:1px dashed var(--tpl-border)}
  .bp-log li{grid-template-columns:9rem 1fr;gap:var(--sp-2)}
}
@media (min-width:56rem){
  .bp-ticket{grid-template-columns:minmax(0,1fr) 15.5rem}
  .bp-stub{border-top:0}
  .bp-stub::before{content:'';position:absolute;left:0;top:0;bottom:0;border-left:2px dashed rgba(62,135,251,.3)}
  .bp-fields{grid-template-columns:repeat(3,1fr)}
}

/* ==================================================================
   4d. TERMINAL — console, monospace, typewriter log
   Phone: single column, smaller ASCII bar, wrapped log lines.
   ================================================================== */
body[data-template="terminal"]{background:#F4F6FA;color:#174E9E}
.trm-wrap{font-family:var(--tpl-mono)}
.trm{background:#F4F6FA;border:1px solid #1D2B44;border-radius:.7rem;overflow:hidden;position:relative;
  box-shadow:0 20px 56px rgba(62,135,251,.55)}
body[data-anim="1"] .trm{animation:tplRise .45s ease both}
.trm::after{content:'';position:absolute;left:0;right:0;top:0;height:14px;pointer-events:none;
  background:#F4F6FA}
body[data-anim="1"] .trm::after{animation:tplScan 7s linear infinite}
.trm-bar{display:flex;align-items:center;gap:var(--sp-2);padding:var(--sp-2) var(--sp-3);
  background:#F4F6FA;border-bottom:1px solid #1D2B44}
.trm-dots{display:inline-flex;gap:.3rem;flex:none}
.trm-dots i{width:.6rem;height:.6rem;border-radius:50%}
.trm-dots i:first-child{background:#F4F6FA}.trm-dots i:nth-child(2){background:#F4F6FA}.trm-dots i:last-child{background:#F4F6FA}
.trm-title{font-size:var(--fs-xs);color:#174E9E;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
.trm-led{margin-left:auto;flex:none;font-size:var(--fs-xs);letter-spacing:.12em;padding:.16em .5em;border-radius:.3rem}
.trm-led.live{background:#F4F6FA;color:#174E9E;border:1px solid rgba(62,135,251,.4)}
.trm-led.done{background:#F4F6FA;color:#174E9E;border:1px solid rgba(62,135,251,.4)}
body[data-anim="1"] .trm-led.live{animation:tplBlink 1.6s steps(1) infinite}
.trm-body{padding:var(--sp-3)}
.trm-head{border-bottom:1px dashed #1D2B44;padding-bottom:var(--sp-3);margin-bottom:var(--sp-3)}
.trm-hl{font-size:var(--fs-xl);font-weight:700;color:#174E9E;display:flex;align-items:center;gap:.35em;
  flex-wrap:wrap;overflow-wrap:anywhere}
.trm-cursor{display:inline-block;width:.55rem;height:1em;background:#F4F6FA}
body[data-anim="1"] .trm-cursor{animation:tplBlink 1.1s steps(1) infinite}
.trm-sub{font-size:var(--fs-sm);color:#174E9E;margin-top:.3rem}
.trm-prog{display:flex;align-items:center;gap:var(--sp-2);margin-top:var(--sp-2);flex-wrap:wrap}
.trm-bars{letter-spacing:-1px;color:#174E9E;font-size:var(--fs-sm);word-break:break-all;min-width:0}
.trm-p{font-size:var(--fs-sm);color:#174E9E}
.trm-meta{display:flex;gap:.4rem;flex-wrap:wrap;margin-top:var(--sp-2);font-size:var(--fs-xs);color:#174E9E}
.trm-meta span{border:1px solid #1D2B44;border-radius:.3rem;padding:.14em .5em}
.trm-pay.ok{color:#174E9E;border-color:rgba(62,135,251,.45)}
.trm-pay.no{color:#174E9E;border-color:rgba(62,135,251,.45)}
.trm-split{display:grid;grid-template-columns:1fr;gap:var(--sp-4)}
.trm-split h3{margin:0 0 var(--sp-2);font-size:var(--fs-xs);letter-spacing:.13em;color:#174E9E;font-weight:600}
.trm-line{display:grid;grid-template-columns:1rem 1fr;gap:.4rem;padding:.18rem 0;font-size:var(--fs-sm);color:#174E9E}
.trm-pr{color:#174E9E}
.trm-tx{overflow-wrap:anywhere}
@media (min-width:34rem){
  .trm-tx{white-space:nowrap;overflow:hidden}
  body[data-anim="1"] .trm-tx{animation:tplType .5s steps(40,end) both;animation-delay:calc(var(--i) * .09s)}
}
.trm-line.current .trm-tx{color:#174E9E;font-weight:700}
.trm-line.pending{color:#174E9E}
.trm-rm{grid-column:2;color:#174E9E;font-size:var(--fs-xs)}
.trm-kv{display:grid;grid-template-columns:auto auto minmax(0,1fr);gap:.35rem;align-items:baseline;
  padding:.26rem 0;font-size:var(--fs-sm);border-bottom:1px dotted #16233A}
body[data-anim="1"] .trm-kv{animation:tplFade .4s ease both;animation-delay:calc(var(--i) * .04s)}
.trm-k{color:#174E9E;overflow-wrap:anywhere}
.trm-eq{color:#174E9E}
.trm-v{color:#174E9E;font-weight:700;overflow-wrap:anywhere}
.trm-c{grid-column:1/-1;color:#174E9E;font-size:var(--fs-xs)}
.trm-qr{margin-top:var(--sp-3);border-radius:.4rem;background:#F4F6FA;padding:.3rem;
  width:clamp(88px,26vw,116px);height:auto}
.trm-rel{margin-top:var(--sp-3);border:1px solid #1D2B44;border-radius:.45rem;padding:var(--sp-3)}
.trm-rel h4{margin:0 0 .35rem;font-size:var(--fs-xs);letter-spacing:.12em;color:#174E9E}
.trm-rel p{margin:.12rem 0;font-size:var(--fs-sm);color:#174E9E;overflow-wrap:anywhere}
.trm-rel small{display:block;margin-top:.35rem;font-size:var(--fs-xs);color:#174E9E;line-height:1.5}
.trm-chip{display:inline-block;border:1px solid #1D2B44;border-radius:.25rem;padding:.04em .4em;
  margin:.1rem .2rem 0 0;font-size:var(--fs-xs)}
.trm-err{margin-top:var(--sp-3);border:1px solid #F87171;border-radius:.4rem;padding:var(--sp-2) var(--sp-3);
  color:#174E9E;font-size:var(--fs-sm)}
@media (min-width:52rem){ .trm-split{grid-template-columns:minmax(0,1.35fr) minmax(0,1fr)} }

/* ==================================================================
   4f. RADAR — air traffic scope
   ================================================================== */
body[data-template="radar"]{background:#F4F6FA;color:#174E9E}
html[data-theme="light"] body[data-template="radar"]{background:#F4F6FA}
.rdr-top{display:grid;grid-template-columns:1fr;gap:var(--sp-3)}
.rdr-scope{position:relative;width:min(80vw,20rem);aspect-ratio:1;margin:0 auto;border-radius:50%;
  background:#F4F6FA;
  border:2px solid rgba(62,135,251,.45);overflow:hidden}
.rdr-ring{position:absolute;border:1px solid rgba(62,135,251,.28);border-radius:50%;
  top:50%;left:50%;transform:translate(-50%,-50%)}
.rdr-ring.r1{width:33%;height:33%} .rdr-ring.r2{width:66%;height:66%} .rdr-ring.r3{width:99%;height:99%}
.rdr-cross-h,.rdr-cross-v{position:absolute;background:#F4F6FA}
.rdr-cross-h{left:0;right:0;top:50%;height:1px} .rdr-cross-v{top:0;bottom:0;left:50%;width:1px}
.rdr-sweep{position:absolute;inset:0;border-radius:50%;
  background:#F4F6FA}
body[data-anim="1"] .rdr-sweep{animation:tplSweep 3.4s linear infinite}
.rdr-blip{position:absolute;top:50%;left:50%;width:2.2rem;height:2.2rem;border-radius:50%;
  display:flex;align-items:center;justify-content:center;color:#174E9E;background:#F4F6FA;z-index:3;
  transform:rotate(var(--blip)) translateY(-30%) rotate(calc(-1 * var(--blip)));
  box-shadow:0 0 18px rgba(62,135,251,.7)}
body[data-anim="1"] .rdr-blip{animation:tplPulseDot 2s ease-out infinite;color:#174E9E}
.rdr-center{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);font-family:var(--tpl-mono);
  font-size:var(--fs-lg);font-weight:800;color:#174E9E;z-index:2}
.rdr-panel{background:#F4F6FA;border:1px solid rgba(62,135,251,.32);border-radius:var(--rad);
  padding:var(--sp-3);font-family:var(--tpl-mono)}
.rdr-line{display:flex;justify-content:space-between;gap:var(--sp-2);padding:.38rem 0;
  border-bottom:1px dotted rgba(62,135,251,.2);font-size:var(--fs-sm);flex-wrap:wrap}
.rdr-line span{color:#174E9E} .rdr-line b{color:#174E9E;text-align:right}
.rdr-line.hi b{color:#174E9E;font-size:var(--fs-md)}
.rdr-line b.ok{color:#174E9E} .rdr-line b.no{color:#174E9E}
.rdr-msg{margin:.4rem 0 0;font-size:var(--fs-sm);color:#174E9E;line-height:1.5}
.rdr-bar{height:5px;margin-top:var(--sp-2);border-radius:3px;background:#F4F6FA;overflow:hidden}
.rdr-bar span{display:block;height:100%;background:#F4F6FA}
.rdr-contacts,.rdr-readout,.rdr-rel{background:#F4F6FA;border:1px solid rgba(62,135,251,.28);
  border-radius:var(--rad);padding:var(--sp-3);font-family:var(--tpl-mono)}
.rdr-contacts h3,.rdr-readout h3{margin:0 0 var(--sp-2);font-size:var(--fs-xs);letter-spacing:.14em;
  text-transform:uppercase;color:#174E9E}
.rdr-contacts ul{list-style:none;margin:0;padding:0}
.rdr-contact{display:grid;grid-template-columns:auto 1fr auto;gap:var(--sp-2);align-items:baseline;
  padding:.4rem 0;border-bottom:1px dotted rgba(62,135,251,.16);font-size:var(--fs-sm)}
.rdr-sig{width:.55rem;height:.55rem;border-radius:50%;background:#F4F6FA}
.rdr-contact.completed .rdr-sig{background:#F4F6FA}
.rdr-contact.current .rdr-sig{background:#F4F6FA;color:#174E9E}
body[data-anim="1"] .rdr-contact.current .rdr-sig{animation:tplPulseDot 2s ease-out infinite}
.rdr-cn{color:#174E9E;overflow-wrap:anywhere} .rdr-contact.pending .rdr-cn{color:#174E9E}
.rdr-ct{color:#174E9E;font-size:var(--fs-xs);white-space:nowrap}
.rdr-cnote{grid-column:2/-1;color:#174E9E;font-size:var(--fs-xs)}
.rdr-rogrid{display:grid;grid-template-columns:1fr;gap:.35rem}
.rdr-ro{display:flex;justify-content:space-between;gap:var(--sp-2);flex-wrap:wrap;
  padding:.34rem 0;border-bottom:1px dotted rgba(62,135,251,.16);font-size:var(--fs-sm)}
.rdr-ro span{color:#174E9E} .rdr-ro b{color:#174E9E;text-align:right}
.rdr-ro em{flex:0 0 100%;font-style:normal;color:#174E9E;font-size:var(--fs-xs)}
.rdr-qr{margin-top:var(--sp-3)}
.rdr-rel h4{color:#174E9E} .rdr-rel p{color:#174E9E} .rdr-rel small{color:#174E9E}
.rdr-rel .t-chip{background:#F4F6FA;color:#174E9E}
@media (min-width:52rem){ .rdr-top{grid-template-columns:minmax(0,20rem) minmax(0,1fr);align-items:center}
  .rdr-rogrid{grid-template-columns:1fr 1fr;gap:0 var(--sp-4)} }

/* ==================================================================
   4g. DEPARTURES — split-flap flight information board
   ================================================================== */
body[data-template="departures"]{background:#F4F6FA;color:#174E9E}
.dep-board-head{text-align:center;padding:var(--sp-4) var(--sp-3);border-radius:var(--rad);
  background:#F4F6FA;border:1px solid #26262C}
.dep-tag{display:inline-block;font-size:var(--fs-xs);letter-spacing:.2em;text-transform:uppercase;color:#174E9E}
.dep-flaps{display:flex;flex-wrap:wrap;gap:.2rem;justify-content:center;margin:var(--sp-2) 0}
.dep-flap{display:inline-flex;align-items:center;justify-content:center;min-width:1.5em;padding:.18em .28em;
  background:#F4F6FA;border-radius:.2rem;font-family:var(--tpl-mono);font-size:var(--fs-lg);
  font-weight:700;color:#174E9E;box-shadow:inset 0 -1px 0 #000;transform-origin:top}
body[data-anim="1"] .dep-flap{animation:tplFlap .35s ease both;animation-delay:calc(var(--i) * .05s)}
.dep-now{font-size:var(--fs-xl);font-weight:800;color:#174E9E;overflow-wrap:anywhere}
.dep-note{font-size:var(--fs-sm);color:#174E9E;margin-top:.25rem}
.dep-meter{margin:var(--sp-3) auto 0;max-width:26rem;background:#F4F6FA}
.dep-board{background:#F4F6FA;border:1px solid #26262C;border-radius:var(--rad);overflow-x:auto}
.dep-board table{width:100%;border-collapse:collapse;min-width:22rem}
.dep-board th{text-align:left;font-size:var(--fs-xs);letter-spacing:.14em;text-transform:uppercase;
  color:#174E9E;padding:var(--sp-2) var(--sp-2);border-bottom:1px solid #26262C;white-space:nowrap}
.dep-board td{padding:var(--sp-2);border-bottom:1px solid #1B1B20;vertical-align:top;font-size:var(--fs-sm)}
.dep-time{font-family:var(--tpl-mono);color:#174E9E;white-space:nowrap}
.dep-dest span{display:block;color:#174E9E;font-weight:600;overflow-wrap:anywhere}
.dep-dest em{display:block;font-style:normal;color:#174E9E;font-size:var(--fs-xs)}
.dep-date{font-family:var(--tpl-mono);color:#174E9E;white-space:nowrap}
.dep-panel{display:inline-block;background:#F4F6FA;border-radius:.2rem;padding:.2em .55em;
  font-family:var(--tpl-mono);font-size:var(--fs-xs);color:#174E9E;transform-origin:top;white-space:nowrap}
body[data-anim="1"] .dep-row .dep-panel{animation:tplFlap .4s ease both;animation-delay:calc(var(--i) * .1s + .2s)}
.dep-row.current .dep-panel{background:#F4F6FA;color:#174E9E}
.dep-row.pending .dep-dest span{color:#174E9E}
.dep-strip{display:grid;grid-template-columns:1fr;gap:0;background:#F4F6FA;border:1px solid #26262C;
  border-radius:var(--rad);overflow:hidden}
.dep-info{padding:var(--sp-2) var(--sp-3);border-bottom:1px solid #1B1B20}
.dep-info span{display:block;font-size:var(--fs-xs);letter-spacing:.12em;text-transform:uppercase;color:#174E9E}
.dep-info b{display:block;color:#174E9E;overflow-wrap:anywhere}
.dep-qrbox{display:flex;align-items:center;gap:var(--sp-3);background:#F4F6FA;border:1px solid #26262C;
  border-radius:var(--rad);padding:var(--sp-3)}
.dep-qrbox span{font-size:var(--fs-xs);color:#174E9E}
.dep-rel{background:#F4F6FA;border:1px solid #26262C;border-radius:var(--rad);padding:var(--sp-3)}
.dep-rel h4{color:#174E9E} .dep-rel p{color:#174E9E} .dep-rel small{color:#174E9E}
.dep-rel .t-chip{background:#F4F6FA;color:#174E9E}
@media (min-width:34rem){ .dep-strip{grid-template-columns:1fr 1fr} }
@media (min-width:52rem){ .dep-strip{grid-template-columns:repeat(4,1fr)} }

/* ==================================================================
   4h. CONTAINER — corrugated sea container
   ================================================================== */
body[data-template="container"]{background:var(--tpl-bg)}
.cnt-box{border-radius:var(--rad);overflow:hidden;box-shadow:var(--tpl-shadow-lg);
  border:3px solid #123A5E;background:#F4F6FA}
.cnt-doors{position:relative;padding:var(--sp-4);color:#174E9E}
.cnt-ribs{position:absolute;inset:0;opacity:.5;pointer-events:none;
  background-image:repeating-linear-gradient(90deg,rgba(62,135,251,.09) 0 3px,transparent 3px 14px)}
.cnt-plate{position:relative;background:#F4F6FA;border:2px solid rgba(62,135,251,.28);
  border-radius:.5rem;padding:var(--sp-3);text-align:center}
.cnt-owner{display:block;font-size:var(--fs-xs);letter-spacing:.22em;text-transform:uppercase;opacity:.8}
.cnt-no{display:block;font-family:var(--tpl-mono);font-size:var(--fs-xl);letter-spacing:.08em;margin:.15rem 0}
.cnt-status{display:block;font-size:var(--fs-md);font-weight:700;overflow-wrap:anywhere}
.cnt-rem{display:block;font-size:var(--fs-sm);opacity:.85;margin-top:.2rem}
.cnt-load{position:relative;height:1.5rem;margin-top:var(--sp-3);border-radius:.3rem;
  background:#F4F6FA;border:1px solid rgba(62,135,251,.24);overflow:hidden}
.cnt-load span{display:block;height:100%;background:#F4F6FA;width:0}
body[data-anim="1"] .cnt-load span{animation:tplGrow 1.2s ease both}
.cnt-load i{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  font-style:normal;font-family:var(--tpl-mono);font-size:var(--fs-xs);color:#174E9E;text-shadow:0 1px 2px rgba(62,135,251,.6)}
.cnt-placards{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:#F4F6FA}
.cnt-placard{background:#F4F6FA;padding:var(--sp-2) var(--sp-3);color:#174E9E}
.cnt-placard span{display:block;font-size:var(--fs-xs);letter-spacing:.1em;text-transform:uppercase;opacity:.72}
.cnt-placard b{display:block;font-family:var(--tpl-mono);overflow-wrap:anywhere}
.cnt-hold,.cnt-specs,.cnt-rel{background:var(--tpl-surface);border:1px solid var(--tpl-border);
  border-radius:var(--rad);padding:var(--sp-4)}
.cnt-hold h3{margin:0 0 var(--sp-3);font-size:var(--fs-md);display:flex;align-items:center;gap:.4em;color:var(--tpl-text)}
.cnt-hold ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.4rem}
.cnt-crate{display:grid;grid-template-columns:2.2rem 1fr;gap:var(--sp-2);align-items:start;
  background:var(--tpl-surface-2);border:1px solid var(--tpl-border);border-left:4px solid var(--tpl-border);
  border-radius:.4rem;padding:var(--sp-2)}
body[data-anim="1"] .cnt-crate{animation:tplSlideL .4s ease both;animation-delay:calc(var(--i) * .07s)}
.cnt-crate.completed{border-left-color:var(--tpl-ok)}
.cnt-crate.current{border-left-color:var(--tpl-accent);background:color-mix(in srgb,var(--tpl-accent) 8%,var(--tpl-surface-2))}
.cnt-crate.pending{opacity:.66;border-style:dashed}
.cnt-seal{width:2.2rem;height:2.2rem;border-radius:.3rem;display:flex;align-items:center;justify-content:center;
  background:var(--tpl-surface-3);color:var(--tpl-muted);font-size:var(--fs-sm)}
.cnt-crate.completed .cnt-seal,.cnt-crate.current .cnt-seal{background:var(--tpl-accent);color:#174E9E}
.cnt-ctext b{display:block;color:var(--tpl-text);overflow-wrap:anywhere}
.cnt-ctext i{display:block;font-style:normal;font-family:var(--tpl-mono);font-size:var(--fs-xs);color:var(--tpl-muted)}
.cnt-ctext em{display:block;font-style:normal;font-size:var(--fs-sm);color:var(--tpl-text-soft)}
.cnt-specs{display:grid;grid-template-columns:1fr;gap:var(--sp-2)}
.cnt-spec span{display:block;font-size:var(--fs-xs);letter-spacing:.1em;text-transform:uppercase;color:var(--tpl-muted)}
.cnt-spec b{display:block;color:var(--tpl-text);overflow-wrap:anywhere}
.cnt-spec em{display:block;font-style:normal;font-size:var(--fs-xs);color:var(--tpl-muted)}
.cnt-qr{display:flex;justify-content:center}
@media (min-width:34rem){ .cnt-placards{grid-template-columns:repeat(4,1fr)}
  .cnt-specs{grid-template-columns:1fr 1fr} }

/* ==================================================================
   4i. VOYAGE — nautical chart
   ================================================================== */
body[data-template="voyage"]{background:#F4F6FA}
.voy-chart{position:relative;border-radius:var(--rad);padding:var(--sp-4);overflow:hidden;
  background:var(--tpl-surface);border:1px solid var(--tpl-border);box-shadow:var(--tpl-shadow-lg);
  background-image:repeating-linear-gradient(0deg,rgba(62,135,251,.06) 0 1px,transparent 1px 26px),
    repeating-linear-gradient(90deg,rgba(62,135,251,.06) 0 1px,transparent 1px 26px)}
.voy-compass{position:absolute;top:var(--sp-3);right:var(--sp-3);text-align:center;color:var(--tpl-accent);opacity:.5}
.voy-compass i{font-size:var(--fs-xl)}
body[data-anim="1"] .voy-compass i{display:inline-block;animation:tplBob 4s ease-in-out infinite}
.voy-compass span{display:block;font-size:var(--fs-xs);font-weight:700}
.voy-head{max-width:34rem;padding-right:3rem}
.voy-type{display:inline-block;font-size:var(--fs-xs);letter-spacing:.16em;text-transform:uppercase;
  color:var(--tpl-accent);font-weight:700}
.voy-chart h2{margin:.25rem 0 .1rem;font-size:var(--fs-2xl);color:var(--tpl-text);line-height:1.15}
.voy-tn{margin:0;font-size:var(--fs-sm);color:var(--tpl-muted)}
.voy-tn b{font-family:var(--tpl-mono);color:var(--tpl-text)}
.voy-note{margin:.4rem 0 0;font-size:var(--fs-sm);color:var(--tpl-text-soft);line-height:1.55}
.voy-sea{position:relative;height:4.5rem;margin:var(--sp-4) 0 var(--sp-2)}
.voy-wave{position:absolute;left:0;right:0;bottom:1rem;height:1.1rem;opacity:.7;
  background-repeat:repeat-x;background-size:64px 100%;
  background-image:radial-gradient(circle at 16px 100%,transparent 15px,var(--tpl-accent-2) 15px 17px,transparent 17px),
    radial-gradient(circle at 48px 0,transparent 15px,var(--tpl-accent-2) 15px 17px,transparent 17px)}
body[data-anim="1"] .voy-wave{animation:tplWave 3s linear infinite}
.voy-ship{position:absolute;bottom:1.5rem;left:var(--p);transform:translateX(-50%);
  width:2.4rem;height:2.4rem;border-radius:50%;display:flex;align-items:center;justify-content:center;
  background:linear-gradient(135deg,var(--tpl-accent),var(--tpl-accent-2));color:#174E9E;
  box-shadow:0 5px 14px rgba(62,135,251,.4)}
body[data-anim="1"] .voy-ship{animation:tplBob 2.4s ease-in-out infinite}
.voy-from,.voy-to{position:absolute;bottom:0;font-size:var(--fs-xs);font-weight:700;color:var(--tpl-muted);
  max-width:45%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.voy-from{left:0} .voy-to{right:0;text-align:right}
.voy-route,.voy-log,.voy-rel{background:var(--tpl-surface);border:1px solid var(--tpl-border);
  border-radius:var(--rad);padding:var(--sp-4)}
.voy-route h3,.voy-log h3{margin:0 0 var(--sp-3);font-size:var(--fs-xs);letter-spacing:.14em;
  text-transform:uppercase;color:var(--tpl-muted)}
.voy-route ul{list-style:none;margin:0;padding:0 0 0 var(--sp-4);position:relative}
.voy-route ul::before{content:'';position:absolute;left:.45rem;top:.5rem;bottom:.5rem;width:2px;
  background:repeating-linear-gradient(180deg,var(--tpl-accent-2) 0 5px,transparent 5px 10px)}
.voy-port{position:relative;padding-bottom:var(--sp-3)}
body[data-anim="1"] .voy-port{animation:tplSlideL .4s ease both;animation-delay:calc(var(--i) * .08s)}
.voy-buoy{position:absolute;left:calc(-1 * var(--sp-4) + .1rem);top:.45rem;width:.85rem;height:.85rem;
  border-radius:50%;background:var(--tpl-surface);border:2px solid var(--tpl-border)}
.voy-port.completed .voy-buoy{background:var(--tpl-ok);border-color:var(--tpl-ok)}
.voy-port.current .voy-buoy{background:var(--tpl-accent);border-color:var(--tpl-accent);color:var(--tpl-accent)}
body[data-anim="1"] .voy-port.current .voy-buoy{animation:tplPulseDot 2s ease-out infinite}
.voy-pcard b{display:block;color:var(--tpl-text);overflow-wrap:anywhere}
.voy-port.pending .voy-pcard b{color:var(--tpl-muted)}
.voy-pcard time{display:block;font-family:var(--tpl-mono);font-size:var(--fs-xs);color:var(--tpl-muted)}
.voy-pcard p{margin:.2rem 0 0;font-size:var(--fs-sm);color:var(--tpl-text-soft)}
.voy-log table{width:100%;border-collapse:collapse}
.voy-log th{text-align:left;font-size:var(--fs-xs);letter-spacing:.08em;text-transform:uppercase;
  color:var(--tpl-muted);font-weight:600;padding:.42rem var(--sp-2) .42rem 0;vertical-align:top;width:40%}
.voy-log td{padding:.42rem 0;border-bottom:1px dotted var(--tpl-border);color:var(--tpl-text);font-size:var(--fs-sm)}
.voy-log em{display:block;font-style:normal;color:var(--tpl-muted);font-size:var(--fs-xs)}
.voy-qr{margin-top:var(--sp-3)}

/* ==================================================================
   4k. METRO — transit line map
   ================================================================== */
body[data-template="metro"]{background:var(--tpl-bg-2)}
.mtr-head{background:var(--tpl-surface);border:1px solid var(--tpl-border);border-left:6px solid var(--tpl-accent);
  border-radius:var(--rad);padding:var(--sp-4)}
.mtr-badge{display:inline-block;font-size:var(--fs-xs);letter-spacing:.16em;text-transform:uppercase;
  background:var(--tpl-accent);color:#174E9E;border-radius:1em;padding:.2em .8em;font-weight:700}
.mtr-head h2{margin:var(--sp-2) 0 .1rem;font-size:var(--fs-2xl);color:var(--tpl-text);line-height:1.15;overflow-wrap:anywhere}
.mtr-tn{margin:0;font-family:var(--tpl-mono);font-size:var(--fs-sm);color:var(--tpl-muted)}
.mtr-note{margin:.4rem 0 0;font-size:var(--fs-sm);color:var(--tpl-text-soft);line-height:1.55}
.mtr-chips{margin-top:var(--sp-3)}
.mtr-line{background:var(--tpl-surface);border:1px solid var(--tpl-border);border-radius:var(--rad);padding:var(--sp-4)}
.mtr-line ul{list-style:none;margin:0;padding:0 0 0 2.2rem;position:relative}
.mtr-line ul::before{content:'';position:absolute;left:.55rem;top:.7rem;bottom:.7rem;width:8px;border-radius:4px;
  background:linear-gradient(180deg,var(--tpl-accent),var(--tpl-accent-2));transform-origin:top}
body[data-anim="1"] .mtr-line ul::before{animation:tplDraw 1s ease both}
.mtr-stn{position:relative;padding-bottom:var(--sp-4)}
.mtr-stn:last-child{padding-bottom:0}
body[data-anim="1"] .mtr-stn{animation:tplFade .4s ease both;animation-delay:calc(var(--i) * .08s)}
.mtr-dot{position:absolute;left:-2.2rem;top:.35rem;width:1.5rem;height:1.5rem;border-radius:50%;
  background:var(--tpl-surface);border:5px solid var(--tpl-border-2);box-sizing:border-box;z-index:2}
.mtr-stn.completed .mtr-dot{border-color:var(--tpl-accent)}
.mtr-stn.current .mtr-dot{border-color:var(--tpl-accent-2);color:var(--tpl-accent-2);
  box-shadow:0 0 0 4px color-mix(in srgb,var(--tpl-accent-2) 22%,transparent)}
body[data-anim="1"] .mtr-stn.current .mtr-dot{animation:tplPulseDot 2s ease-out infinite}
.mtr-sinfo b{display:block;font-size:var(--fs-lg);color:var(--tpl-text);overflow-wrap:anywhere}
.mtr-stn.pending .mtr-sinfo b{color:var(--tpl-muted);font-weight:500}
.mtr-sinfo time{display:block;font-family:var(--tpl-mono);font-size:var(--fs-xs);color:var(--tpl-muted)}
.mtr-sinfo p{margin:.25rem 0 0;font-size:var(--fs-sm);color:var(--tpl-text-soft);line-height:1.5}
.mtr-facts{display:grid;grid-template-columns:1fr;gap:var(--sp-2);background:var(--tpl-surface);
  border:1px solid var(--tpl-border);border-radius:var(--rad);padding:var(--sp-4)}
.mtr-fact{border-left:3px solid var(--tpl-border);padding-left:var(--sp-2)}
.mtr-fact span{display:block;font-size:var(--fs-xs);letter-spacing:.1em;text-transform:uppercase;color:var(--tpl-muted)}
.mtr-fact b{display:block;color:var(--tpl-text);overflow-wrap:anywhere}
.mtr-fact em{display:block;font-style:normal;font-size:var(--fs-xs);color:var(--tpl-muted)}
.mtr-qr{grid-column:1/-1;justify-self:center}
.mtr-rel{background:var(--tpl-surface-2);border:1px solid var(--tpl-border);border-radius:var(--rad);padding:var(--sp-4)}
@media (min-width:34rem){ .mtr-facts{grid-template-columns:1fr 1fr} }
@media (min-width:52rem){ .mtr-facts{grid-template-columns:repeat(3,1fr)} }

/* ==================================================================
   4l. PASSPORT — data page + ink stamps
   ================================================================== */
body[data-template="passport"]{background:#F4F6FA}
.pas-book{display:grid;grid-template-columns:1fr;gap:var(--sp-3)}
.pas-page{position:relative;background:#F4F6FA;border:1px solid #D8CFB8;border-radius:.4rem;
  padding:var(--sp-4);box-shadow:var(--tpl-shadow);overflow:hidden}
.pas-page::before{content:'';position:absolute;inset:0;pointer-events:none;opacity:.5;
  background-image:repeating-linear-gradient(135deg,rgba(62,135,251,.05) 0 6px,transparent 6px 12px)}
.pas-crest{font-size:var(--fs-2xl);color:#174E9E;text-align:center}
.pas-kind{display:block;text-align:center;font-size:var(--fs-xs);letter-spacing:.28em;
  text-transform:uppercase;color:#174E9E}
.pas-page h2{margin:var(--sp-2) 0 var(--sp-2);text-align:center;font-size:var(--fs-xl);
  color:#174E9E;overflow-wrap:anywhere}
.pas-mrz{font-family:var(--tpl-mono);font-size:var(--fs-sm);letter-spacing:.18em;text-align:center;
  background:#F4F6FA;border-top:1px solid #D8CFB8;border-bottom:1px solid #D8CFB8;padding:var(--sp-2);color:#174E9E}
.pas-note{margin:var(--sp-2) 0 0;font-size:var(--fs-sm);color:#174E9E;text-align:center}
.pas-fields{display:grid;grid-template-columns:1fr;gap:.3rem;margin-top:var(--sp-3)}
.pas-frow{display:flex;justify-content:space-between;gap:var(--sp-2);flex-wrap:wrap;
  padding:.36rem 0;border-bottom:1px dotted #D8CFB8}
.pas-frow span{font-size:var(--fs-xs);letter-spacing:.1em;text-transform:uppercase;color:#174E9E}
.pas-frow b{font-size:var(--fs-sm);color:#174E9E;text-align:right}
.pas-frow em{flex:0 0 100%;font-style:normal;font-size:var(--fs-xs);color:#174E9E}
.pas-chips{margin-top:var(--sp-3);justify-content:center}
.pas-qr{display:block;margin:var(--sp-3) auto 0}
.pas-visa h3{margin:0 0 var(--sp-3);text-align:center;font-size:var(--fs-xs);letter-spacing:.2em;
  text-transform:uppercase;color:#174E9E}
.pas-stamps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr;
  gap:var(--sp-3);justify-items:center}
.pas-stamp{text-align:center;max-width:100%}
.pas-ring{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.15rem;
  width:clamp(6.5rem,26vw,8.5rem);aspect-ratio:1;border-radius:50%;padding:.5rem;
  border:3px double #B0483A;color:#174E9E;transform:rotate(var(--r))}
.pas-stamp.pending .pas-ring{border-color:#174E9E;color:#174E9E;opacity:.6}
.pas-stamp.current .pas-ring{border-color:#174E9E;color:#174E9E}
body[data-anim="1"] .pas-stamp .pas-ring{animation:tplStamp .5s cubic-bezier(.2,.9,.3,1) both;
  animation-delay:calc(var(--i) * .12s)}
.pas-ring b{font-size:var(--fs-xs);font-weight:800;text-transform:uppercase;letter-spacing:.06em;
  line-height:1.2;overflow-wrap:anywhere}
.pas-ring i{font-style:normal;font-family:var(--tpl-mono);font-size:.6rem}
.pas-snote{display:block;font-size:var(--fs-xs);color:#174E9E;margin-top:.3rem}
.pas-rel{background:#F4F6FA;border:1px solid #D8CFB8;border-radius:.4rem;padding:var(--sp-3)}
.pas-rel h4{color:#174E9E} .pas-rel p{color:#174E9E}
.pas-rel small{color:#174E9E}
@media (min-width:34rem){ .pas-fields{grid-template-columns:1fr 1fr;gap:.3rem var(--sp-4)}
  .pas-stamps{grid-template-columns:repeat(3,1fr)} }
@media (min-width:60rem){ .pas-book{grid-template-columns:1fr 1fr} }

/* ==================================================================
   4m. NEUBRUTAL — thick borders, hard offset shadows, snapping blocks
   ================================================================== */
body[data-template="neubrutal"]{background:#F4F6FA}
body[data-template="neubrutal"]{--nb-ink:#174E9E;--nb-paper:#FFFFFF}
.nb-hero,.nb-steps,.nb-grid>.nb-cell,.nb-qrbox,.nb-rel{background:var(--nb-paper);
  border:3px solid var(--nb-ink);border-radius:0;box-shadow:6px 6px 0 var(--nb-ink)}
.nb-hero{padding:var(--sp-4)}
body[data-anim="1"] .nb-hero{animation:tplPop .3s cubic-bezier(.3,1.4,.5,1) both}
.nb-tag{display:inline-block;background:var(--nb-ink);color:var(--nb-paper);font-size:var(--fs-xs);
  letter-spacing:.16em;text-transform:uppercase;padding:.24em .7em;font-weight:800}
.nb-hero h2{margin:var(--sp-2) 0 .15rem;font-size:var(--fs-3xl);line-height:1;color:var(--nb-ink);
  text-transform:uppercase;letter-spacing:-.02em;overflow-wrap:anywhere}
.nb-tn{margin:0;font-family:var(--tpl-mono);font-size:var(--fs-md);font-weight:700;color:var(--nb-ink)}
.nb-note{margin:.5rem 0 0;font-size:var(--fs-sm);color:var(--nb-ink);opacity:.75;line-height:1.5}
.nb-bar{position:relative;height:1.7rem;margin-top:var(--sp-3);border:3px solid var(--nb-ink);background:var(--nb-paper)}
.nb-bar span{display:block;height:100%;background:#F4F6FA;width:0}
body[data-anim="1"] .nb-bar span{animation:tplGrow 1s cubic-bezier(.3,1.2,.4,1) both}
.nb-bar b{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  font-size:var(--fs-xs);font-weight:800;color:var(--nb-ink)}
.nb-chips{display:flex;gap:.5rem;flex-wrap:wrap;margin-top:var(--sp-3)}
.nb-chip{border:3px solid var(--nb-ink);background:#F4F6FA;color:#174E9E;font-size:var(--fs-xs);
  font-weight:800;padding:.22em .65em;text-transform:uppercase}
.nb-chip.ok{background:#F4F6FA} .nb-chip.no{background:#F4F6FA}
.nb-steps{padding:var(--sp-4)}
.nb-steps h3{margin:0 0 var(--sp-3);font-size:var(--fs-md);text-transform:uppercase;
  letter-spacing:.1em;color:var(--nb-ink)}
.nb-steps ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:var(--sp-2)}
.nb-step{display:grid;grid-template-columns:2.4rem 1fr;gap:var(--sp-2);align-items:start;
  border:3px solid var(--nb-ink);padding:var(--sp-2);background:#F4F6FA}
body[data-anim="1"] .nb-step{animation:tplSlideL .3s cubic-bezier(.3,1.3,.5,1) both;animation-delay:calc(var(--i) * .06s)}
.nb-step.current{background:#F4F6FA;color:#174E9E}
.nb-step.completed{background:#F4F6FA;color:#174E9E}
.nb-step.pending{opacity:.7}
.nb-num{width:2.4rem;height:2.4rem;display:flex;align-items:center;justify-content:center;
  border:3px solid var(--nb-ink);background:var(--nb-paper);font-weight:800;color:var(--nb-ink)}
.nb-step b{display:block;font-size:var(--fs-md);text-transform:uppercase;overflow-wrap:anywhere}
.nb-step time{display:block;font-family:var(--tpl-mono);font-size:var(--fs-xs);opacity:.8}
.nb-step p{margin:.2rem 0 0;font-size:var(--fs-sm);line-height:1.45}
.nb-grid{display:grid;grid-template-columns:1fr;gap:var(--sp-3)}
.nb-cell{padding:var(--sp-3)}
body[data-anim="1"] .nb-cell{animation:tplPop .3s cubic-bezier(.3,1.4,.5,1) both;animation-delay:calc(var(--i) * .05s)}
.nb-cell span{display:block;font-size:var(--fs-xs);font-weight:800;letter-spacing:.12em;
  text-transform:uppercase;color:var(--nb-ink);opacity:.6}
.nb-cell b{display:block;font-size:var(--fs-lg);color:var(--nb-ink);overflow-wrap:anywhere}
.nb-cell em{display:block;font-style:normal;font-size:var(--fs-xs);color:var(--nb-ink);opacity:.7}
.nb-qrbox{padding:var(--sp-3);display:flex;justify-content:center}
.nb-rel{padding:var(--sp-3)}
.nb-rel h4{color:var(--nb-ink);font-weight:800} .nb-rel p{color:var(--nb-ink)}
.nb-rel small{color:var(--nb-ink);opacity:.7}
.nb-rel .t-chip{border:2px solid var(--nb-ink);background:#F4F6FA;color:#174E9E;border-radius:0;font-weight:700}
.nb-err{border:3px solid var(--nb-ink);background:#F4F6FA;color:#174E9E;box-shadow:6px 6px 0 var(--nb-ink);border-radius:0}
@media (min-width:34rem){ .nb-grid{grid-template-columns:1fr 1fr} }
@media (min-width:60rem){ .nb-grid{grid-template-columns:repeat(3,1fr)} }

/* Header layout is owned by public.css so templates cannot override its grid. */

:root{--tpl-accent:#3E87FB;--tpl-accent-2:#2468CE;--tpl-bg:#F4F6FA;--tpl-bg-2:#FFFFFF;--tpl-text:#0F172A;--tpl-text-soft:#334155;--tpl-surface:#FFFFFF;--tpl-surface-2:#F4F6FA;--tpl-surface-3:#EAF2FF;--tpl-ok:#2468CE;--tpl-warn:#174E9E;--tpl-danger:#174E9E}
.btn-primary{background:#3E87FB!important;color:#fff!important}
.freight-hero{padding:clamp(1.2rem,4vw,2.5rem);background:#EAF2FF;border-top:5px solid #3E87FB;border-radius:1rem}.freight-hero h2{color:#174E9E}.freight-layout{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,1fr);gap:1rem}.freight-facts,.freight-side,.freight-rel{padding:1.25rem;background:#fff;border:1px solid #D8E5F8;border-radius:1rem;min-width:0}.freight-row{padding:.8rem 0;border-bottom:1px solid #EAF2FF;display:grid;gap:.3rem}.freight-k{color:#64748B}.freight-v{font-weight:600;overflow-wrap:anywhere}.freight-r,.freight-side small{display:block}.freight-side li{padding:.6rem 0}.freight-hero strong{overflow-wrap:anywhere}@media(max-width:640px){.freight-layout{grid-template-columns:minmax(0,1fr)}}

.bp-vehicle,.bp-stop.current::after,.cnt-seal{color:#FFFFFF}

.bp-vehicle,.bp-stop.current::after,.cnt-seal{color:#FFFFFF}