:root {
  /* Dark (brand default) */
  --portal-gold: #FFE000;
  --portal-gold-dim: rgba(255,224,0,.65);
  --portal-bg: #0a0a0a;
  --portal-bg-translucent: #0a0a0af2;
  --portal-surface: #141414;
  --portal-surface-2: #1c1c1c;
  --portal-border: rgba(255,255,255,.1);
  --portal-text: #f5f5f5;
  --portal-text-dim: rgba(255,255,255,.65);
  --portal-text-faint: rgba(255,255,255,.38);
  --portal-input-bg: #080808;
  --portal-badge-bg: #ffe0001f;
  --portal-success-bg: #22c55e22;
  --portal-success-text: #bbf7d0;
  --portal-danger-bg: #ef444422;
  --portal-danger-text: #fecaca;
  --portal-radius: 1rem;
}

[data-theme="light"] {
  /* Deep bronze-gold, not the neon dark-mode gold — #FFE000 as text/accent
     on a white surface fails contrast, so light mode gets its own shade. */
  --portal-gold: #6b4f00;
  --portal-gold-dim: rgba(107,79,0,.75);
  --portal-bg: #faf9f6;
  --portal-bg-translucent: #faf9f6f2;
  --portal-surface: #ffffff;
  --portal-surface-2: #f0ede4;
  --portal-border: rgba(0,0,0,.1);
  --portal-text: #1a1712;
  --portal-text-dim: rgba(23,20,15,.65);
  --portal-text-faint: rgba(23,20,15,.4);
  --portal-input-bg: #ffffff;
  --portal-badge-bg: rgba(107,79,0,.14);
  --portal-success-bg: #22c55e1a;
  --portal-success-text: #15803d;
  --portal-danger-bg: #ef44441a;
  --portal-danger-text: #b91c1c;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--portal-bg);
  color: var(--portal-text);
  font-family: "Noto Sans Thai", "Noto Sans Lao", Prompt, sans-serif;
}

.portal-main { min-height: 100vh; padding: 5.75rem 1rem 6.5rem; }
.portal-shell { max-width: 760px; margin: auto; }

.portal-topbar {
  height: 4.4rem;
  position: fixed;
  z-index: 30;
  inset: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: .7rem 1rem;
  background: var(--portal-bg-translucent);
  border-bottom: 1px solid var(--portal-border);
  backdrop-filter: blur(12px);
}
.portal-brand { display: flex; gap: .55rem; align-items: center; color: var(--portal-text); font-weight: 800; text-decoration: none; letter-spacing: .04em; }
.portal-brand b { color: var(--portal-gold); }
.portal-brand img { height: 2.4rem; width: 2.4rem; object-fit: contain; }
.portal-top-actions { display: flex; gap: .4rem; }
.portal-top-actions a { color: var(--portal-text-dim); text-decoration: none; padding: .45rem .6rem; border: 1px solid var(--portal-border); border-radius: .6rem; font-size: .8rem; }

.bottom-nav {
  position: fixed;
  z-index: 30;
  bottom: 0; left: 0; right: 0;
  display: flex;
  justify-content: space-around;
  padding: .55rem .25rem max(.55rem, env(safe-area-inset-bottom));
  background: var(--portal-surface-2);
  border-top: 1px solid var(--portal-border);
}
.bottom-nav a { display: grid; gap: .18rem; justify-items: center; min-width: 3.5rem; color: var(--portal-text-faint); font-size: .67rem; text-decoration: none; }
.bottom-nav i { font-size: 1rem; }
.bottom-nav a.active { color: var(--portal-gold); }

.hero-card, .card { background: var(--portal-surface); border: 1px solid var(--portal-border); border-radius: var(--portal-radius); }
.hero-card { padding: 2rem 1.25rem; }
.hero-card h1, .page-heading h1 { font-size: clamp(1.7rem, 6vw, 2.6rem); line-height: 1.15; margin: .35rem 0 .65rem; }
.hero-card > p, .page-heading > p { color: var(--portal-text-dim); margin: 0; }
.eyebrow { margin: 0; color: var(--portal-gold); font-size: .75rem; letter-spacing: .14em; font-weight: 800; }

.portal-search { margin-top: 1.5rem; }
.portal-search label, .portal-form label span { display: block; margin: 0 0 .45rem; color: var(--portal-text-dim); font-size: .85rem; }
.portal-search div { display: flex; gap: .5rem; }
.portal-search input, .input-portal {
  width: 100%; min-width: 0;
  border: 1px solid var(--portal-border);
  border-radius: .75rem;
  background: var(--portal-input-bg);
  color: var(--portal-text);
  padding: .8rem .9rem;
  font: inherit;
}
.portal-search input:focus, .input-portal:focus { outline: 2px solid var(--portal-gold); outline-offset: 1px; }

.country-phone-row { display: flex; align-items: stretch; gap: .55rem; }
.country-flag {
  position: relative; flex: 0 0 2.6rem; min-height: 3rem; overflow: hidden;
  border: 1px solid var(--portal-border); border-radius: .75rem;
  background: linear-gradient(to bottom,
    #a51931 0 16.67%, #f8f8f8 16.67% 33.33%, #2d2a4a 33.33% 66.67%,
    #f8f8f8 66.67% 83.33%, #a51931 83.33% 100%);
}
.country-flag.is-laos {
  background: linear-gradient(to bottom, #ce1126 0 25%, #002868 25% 75%, #ce1126 75% 100%);
}
.country-flag.is-laos::after {
  content: ''; position: absolute; top: 50%; left: 50%; width: 1.25rem; height: 1.25rem;
  transform: translate(-50%, -50%); border-radius: 50%; background: #fff;
}
.country-code-select { flex: 0 0 10rem; width: auto; padding-right: .4rem; }
.country-phone-input { min-width: 0; }

.btn-gold {
  display: inline-flex; justify-content: center; align-items: center; gap: .4rem;
  border: 0; border-radius: .75rem; padding: .82rem 1rem;
  background: var(--portal-gold); color: #111;
  font: 800 .9rem inherit; cursor: pointer; text-decoration: none;
}

.shortcut-grid { display: grid; grid-template-columns: repeat(2,1fr); gap: .75rem; margin: 1rem 0; }
.shortcut { padding: 1rem; color: var(--portal-text); text-decoration: none; }
.shortcut i { display: block; color: var(--portal-gold); font-size: 1.35rem; margin-bottom: .7rem; }
.shortcut strong, .shortcut small { display: block; }
.shortcut small { color: var(--portal-text-faint); font-size: .75rem; margin-top: .25rem; }

.portal-footer { display: grid; gap: .25rem; padding: 1.25rem 0; color: var(--portal-text-dim); font-size: .8rem; }
.portal-footer a { color: var(--portal-gold-dim); }

.page-heading { margin: .75rem 0 1.25rem; }
.portal-form { padding: 1rem; display: grid; gap: 1rem; }
.form-grid { display: grid; grid-template-columns: repeat(2,1fr); gap: .75rem; }

.quote-result { margin-top: 1rem; padding: 1.25rem; }
.quote-result strong { display: block; font-size: 2rem; margin: .3rem 0; color: var(--portal-gold); }
.quote-result p, .quote-result small { color: var(--portal-text-dim); }
.is-hidden { display: none; }

.empty-state { text-align: center; padding: 5rem 1rem; }
.empty-state i { font-size: 3rem; color: var(--portal-gold); }
.empty-state p { color: var(--portal-text-dim); margin-bottom: 1.5rem; }

.portal-flash { max-width: 760px; margin: .5rem auto 1rem; padding: .75rem 1rem; border-radius: .75rem; }
.portal-flash.is-error { background: var(--portal-danger-bg); color: var(--portal-danger-text); }
.portal-flash.is-success { background: var(--portal-success-bg); color: var(--portal-success-text); }

.tracking-card { overflow: hidden; }
.tracking-card-header { padding: 1rem; background: var(--portal-surface-2); }
.tracking-job { font-size: 1.5rem; color: var(--portal-gold); font-weight: 800; }
.status-badge { display: inline-block; border-radius: 999px; padding: .35rem .65rem; margin-top: .6rem; background: var(--portal-badge-bg); color: var(--portal-gold); font-size: .8rem; }
.tracking-details { display: grid; grid-template-columns: repeat(2,1fr); }
.tracking-details div { padding: .85rem; border-top: 1px solid var(--portal-border); }
.tracking-details small { display: block; color: var(--portal-text-faint); }

.timeline { padding: 1rem 1rem 1rem 1.5rem; }
.timeline-item { position: relative; border-left: 2px solid var(--portal-border); padding: 0 0 1rem 1rem; }
.timeline-item:before { content: ""; position: absolute; width: .65rem; height: .65rem; left: -.42rem; top: .2rem; border-radius: 50%; background: var(--portal-gold); }
.timeline-item small { color: var(--portal-text-faint); }

@media (min-width: 640px) {
  .portal-main { padding-top: 6.5rem; padding-bottom: 1rem; }
  .portal-topbar { padding-inline: max(2rem, calc((100vw - 900px) / 2)); }
  .bottom-nav { position: static; max-width: 760px; margin: 0 auto 1rem; border: 1px solid var(--portal-border); border-radius: 1rem; }
}
@media (max-width: 420px) {
  .portal-top-actions span { display: none; }
  .portal-search div { display: block; }
  .portal-search button { width: 100%; margin-top: .5rem; }
}