/* TOR Intelligence — Option 2 (dark). Matched to Thai-TOR-Option-2-Dark-Website-Pages.pdf;
   tokens from the asset pack's option2-design-tokens.css. */
:root {
  --bg: #071426; --bg-2: #0a1a2e; --surface: #0B1F33; --raised: #102A43; --border: #1E3A52; --border-2: #25496a;
  --primary: #22D3EE; --primary-hover: #67E8F9; --secondary: #2DD4BF; --green: #34D399;
  --gold: #FBBF24; --orange: #F97316; --danger: #FB7185; --violet: #A78BFA;
  --text: #F8FAFC; --muted: #94A3B8; --faint: #64748B;
  --ink: #0f1f3d; --ink-2: #1e3a8a; --ink-muted: #5b6b82; --card: #f8fafc; --card-line: #e2e8f0;
  --r-card: 16px; --r-ctl: 10px;
  --glow: 0 0 32px rgb(34 211 238 / 18%);
  --font: "Noto Sans Thai", "Inter", system-ui, sans-serif;
  --num: "Inter", "Noto Sans Thai", system-ui, sans-serif;
  --hand: "Sriracha", "Noto Sans Thai", cursive;
  color-scheme: dark;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--text); font: 15px/1.6 var(--font); overflow-x: hidden; }
a { color: var(--primary); text-decoration: none; }
a:hover { color: var(--primary-hover); }
h1, h2, h3 { line-height: 1.3; margin: 0; }
p { margin: 0 0 .5em; }
button, input, select { font: inherit; color: inherit; }
[hidden] { display: none !important; }
.wrap { width: min(1560px, 100% - 48px); margin-inline: auto; }
.muted { color: var(--muted); } .small { font-size: 13px; } .center { text-align: center; }
.mono { font-family: var(--num); letter-spacing: .02em; }
.nw, .nowrap { white-space: nowrap; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.num { text-align: right; font-family: var(--num); font-variant-numeric: tabular-nums; }
.accent { color: var(--primary); }

/* icons */
.ic { width: 20px; height: 20px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; vertical-align: -4px; }
.ic.xs { width: 13px; height: 13px; vertical-align: -2px; } .ic.sm { width: 16px; height: 16px; vertical-align: -3px; }
.ic.lg { width: 24px; height: 24px; } .ic.xl { width: 30px; height: 30px; }
.ic.flip { transform: scaleX(-1); }
.crumbs .ic.xs { color: var(--faint); }
.cat-ic { width: 30px; height: 30px; flex: none; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.cat-ic.sm { width: 17px; height: 17px; stroke-width: 3; vertical-align: -3px; }
.hicon { display: inline-grid; place-items: center; width: 30px; height: 30px; border-radius: 8px; background: linear-gradient(135deg, var(--primary), #0ea5e9); color: #04202b; flex: none; box-shadow: 0 0 14px rgb(34 211 238 / 35%); }
.hicon .ic { width: 18px; height: 18px; }
.ic.solid { fill: currentColor; stroke: none; }

/* buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 0 20px;
  border-radius: var(--r-ctl); border: 1px solid transparent; font-weight: 600; cursor: pointer; text-decoration: none; white-space: nowrap; background: none; }
.btn.sm { min-height: 36px; padding: 0 14px; font-size: 14px; }
.btn-lg { min-height: 54px; font-size: 17px; }
.btn-primary { background: linear-gradient(180deg, #3ee0f5, #13c6e4); color: #032530; box-shadow: 0 0 24px rgb(34 211 238 / 35%); }
.btn-primary:hover { background: var(--primary-hover); color: #032530; }
.btn-signup { background: linear-gradient(135deg, #2DD4BF, #34D399); color: #03281f; min-height: 46px; padding: 0 28px; border-radius: 8px; box-shadow: 0 0 22px rgb(45 212 191 / 35%); }
.btn-signup:hover { filter: brightness(1.08); color: #03281f; }
.btn-outline { border-color: #2b5d80; color: var(--text); background: rgb(11 31 51 / 55%); }
.btn-outline:hover { border-color: var(--primary); color: var(--primary-hover); }
.btn-ghost { background: rgb(16 42 67 / 60%); border-color: var(--border-2); color: var(--text); }
.btn-ghost:hover { border-color: var(--primary); color: var(--primary-hover); }
.btn-gold { background: linear-gradient(180deg, #fcd34d, #fbbf24); color: #2b1d00; }
.btn-gold:hover { filter: brightness(1.06); color: #2b1d00; }
.btn-gold-outline { border-color: rgb(251 191 36 / 55%); color: var(--gold); background: rgb(251 191 36 / 6%); font-size: 14px; min-height: 40px; }
.btn-gold-outline:hover { color: #fde68a; border-color: var(--gold); }
.btn-block { width: 100%; }
.btn[aria-pressed="true"] { border-color: var(--primary); color: var(--primary); }
.btn-primary[aria-pressed="true"] { color: #032530; }
.btn-primary[aria-pressed="true"] .ic, .btn[aria-pressed="true"] .ic { fill: currentColor; }
.icon-btn { display: inline-grid; place-items: center; width: 42px; height: 42px; border-radius: 10px; border: 0; background: transparent; color: var(--text); cursor: pointer; position: relative; }
.icon-btn:hover { color: var(--primary); }
.link-btn { background: none; border: 0; color: var(--text); cursor: pointer; padding: 6px 8px; display: inline-flex; gap: 6px; align-items: center; }
.link-btn:hover, .link-btn.accent { color: var(--primary); }
.center-block { display: flex; margin: 6px auto 0; }
:focus-visible { outline: 2px solid var(--primary-hover); outline-offset: 2px; }

/* mock bar (prototype control, not part of the design) */
.mockbar { background: #020b16; border-bottom: 1px solid #10263c; font-size: 12px; color: var(--faint); }
.mockbar-in { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; padding: 4px 0; }
.mock-tag { background: var(--gold); color: #2b1d00; font-weight: 700; padding: 0 8px; border-radius: 5px; }
.mock-note { flex: 1 1 320px; }
.mock-switch { display: inline-flex; gap: 4px; align-items: center; }
.mock-switch button { background: transparent; border: 1px solid #1d3650; border-radius: 5px; padding: 0 8px; cursor: pointer; color: var(--muted); }
.mock-switch button[aria-pressed="true"] { border-color: var(--primary); color: var(--primary); }
.mock-switch .mock-reset { border-style: dashed; }

/* header */
.site-header { position: sticky; top: 0; z-index: 30; background: rgb(10 27 46 / 94%); backdrop-filter: blur(10px); border-bottom: 1px solid #16304a; }
.header-in { display: flex; align-items: center; gap: 28px; min-height: 84px; }
.brand { display: flex; align-items: center; gap: 16px; color: var(--text); }
.wordmark { width: 132px; height: auto; display: block; }
.brand-tag { font-size: 15px; line-height: 1.35; color: #cbd5e1; }
.nav { display: flex; gap: 10px; margin-left: 12%; }
.nav a { color: var(--text); padding: 29px 16px; position: relative; font-size: 17px; font-weight: 500; }
.nav a:hover { color: var(--primary-hover); }
.nav a[aria-current="page"] { color: var(--primary); font-weight: 700; }
.nav a[aria-current="page"]::after { content: ""; position: absolute; left: 16px; right: 16px; bottom: 0; height: 3px; border-radius: 3px 3px 0 0; background: var(--primary); box-shadow: 0 0 14px var(--primary); }
.header-actions { display: flex; align-items: center; gap: 14px; margin-left: auto; }
.header-actions .link-btn { font-size: 16px; }
.divider { width: 1px; height: 30px; background: var(--border-2); }
.badge { position: absolute; top: 3px; right: 3px; min-width: 18px; height: 18px; padding: 0 4px; border-radius: 9px; background: var(--danger); color: #fff; font: 700 11px/18px var(--num); }
/* Thai letters sit about 1px below the middle of their line, so the icon is nudged to match them. */
.who .ic { position: relative; top: 0; }   /* measured 5 Oct: centred on the Thai letter body with no nudge (1px sat low) */
.who { display: inline-flex; gap: 6px; align-items: center; padding: 8px 14px; border-radius: 999px; border: 1px solid var(--border-2); font-size: 14px; }
.nav-toggle { display: none; }

/* shared panels + headings */
.panel { background: linear-gradient(180deg, rgb(14 38 62 / 72%), rgb(10 29 49 / 82%)); border: 1px solid #173654; border-radius: var(--r-card); padding: 22px; }
.panel.flush { padding: 0; overflow: hidden; }
.panel-head { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; flex-wrap: wrap; }
.panel-head h2 { font-size: 22px; display: flex; gap: 12px; align-items: center; margin: 0; }
.panel-head .more, .panel-head .btn { margin-left: auto; }
.more { font-size: 15px; display: inline-flex; gap: 6px; align-items: center; }
.bar-title { font-size: 30px; font-weight: 700; position: relative; padding-left: 28px; }
.bar-title::before { content: ""; position: absolute; left: 0; top: 10%; bottom: 10%; width: 3px; border-radius: 2px; background: var(--primary); box-shadow: 0 0 12px var(--primary); }
.bar-title.sm { font-size: 22px; padding-left: 22px; }
.page-h { font-size: clamp(34px, 3.6vw, 60px); font-weight: 800; letter-spacing: -.5px; display: flex; gap: 20px; align-items: center; flex-wrap: wrap; margin: 26px 0 4px; }
.lead { color: #dbe4ef; font-size: 18px; }
.note { color: var(--muted); font-size: 14px; }
.eyebrow { color: var(--primary); display: flex; gap: 10px; align-items: center; font-weight: 600; margin: 0 0 6px; }
.grad { background: linear-gradient(90deg, var(--primary), var(--secondary)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.crumbs { display: flex; gap: 10px; align-items: center; color: var(--muted); font-size: 15px; margin-top: 18px; margin-bottom: 14px; }
.crumbs a { color: var(--muted); } .crumbs a:hover { color: var(--primary); } .crumbs [aria-current] { color: var(--primary); }
.pill { display: inline-flex; align-items: center; gap: 6px; padding: 3px 12px; border-radius: 999px; font-size: 13px; font-weight: 600; background: rgb(148 163 184 / 14%); color: var(--muted); white-space: nowrap; }
.tone-open { background: rgb(45 212 191 / 16%); color: #5eead4; } .tone-info { background: rgb(34 211 238 / 13%); color: var(--primary-hover); }
.tone-done { background: rgb(167 139 250 / 16%); color: #c4b5fd; } .tone-cancel { background: rgb(251 113 133 / 15%); color: #fda4af; }

/* tabs */
.tabs { display: flex; gap: 10px; margin-bottom: 16px; flex-wrap: wrap; }
.tabs button { background: rgb(9 27 45 / 80%); border: 1px solid #1f3f5d; color: #dbe4ef; border-radius: 999px; padding: 9px 26px; cursor: pointer; white-space: nowrap; font-size: 16px; }
.tabs button:hover { border-color: var(--primary); }
.tabs button[aria-selected="true"] { background: linear-gradient(180deg, #45e3f6, #18c8e5); color: #032530; border-color: transparent; font-weight: 700; box-shadow: 0 0 20px rgb(34 211 238 / 35%); }
/* The padding gives the selected tab's glow and focus ring room: a scrolling strip clips whatever
   sticks out of it (the "อีเว้นท์และสื่อ" tab looked cut off). */
.tabs.scroll { flex-wrap: nowrap; overflow-x: auto; padding: 10px 8px 14px; margin: -10px -8px 6px; }
/* horizontal scrollbars in the site's colours (tab strips, wide tables) */
.tabs.scroll::-webkit-scrollbar, .tbl-wrap::-webkit-scrollbar { height: 8px; }
.tabs.scroll::-webkit-scrollbar-track, .tbl-wrap::-webkit-scrollbar-track { background: #0b2238; border-radius: 4px; box-shadow: inset 0 0 0 1px #16324d; }
.tabs.scroll::-webkit-scrollbar-thumb, .tbl-wrap::-webkit-scrollbar-thumb { background: linear-gradient(90deg, #22d3ee, #0e7490); border-radius: 4px; }
.tabs.scroll::-webkit-scrollbar-thumb:hover, .tbl-wrap::-webkit-scrollbar-thumb:hover { background: linear-gradient(90deg, #67e8f9, #22d3ee); }
@supports not selector(::-webkit-scrollbar) { .tabs.scroll, .tbl-wrap { scrollbar-width: thin; scrollbar-color: #22d3ee #0b2238; } }
.seg-tabs { display: flex; border: 1px solid #1f3f5d; border-radius: 12px; background: rgb(8 24 40 / 70%); padding: 4px; margin-bottom: 16px; }
.seg-tabs > * { flex: 1; display: inline-flex; gap: 10px; align-items: center; justify-content: center; padding: 10px 12px; border: 0; background: none; color: #dbe4ef; border-radius: 9px; cursor: pointer; font-size: 16px; white-space: nowrap; }
.seg-tabs > * + * { border-left: 1px solid #1f3f5d; border-radius: 0; }
.seg-tabs > [aria-selected="true"], .seg-tabs > .on { background: linear-gradient(180deg, #45e3f6, #18c8e5); color: #032530; font-weight: 700; border-radius: 9px; border-left: 0; }
.seg-tabs.sm > * { font-size: 14px; padding: 8px 10px; }
.cnt { display: inline-grid; place-items: center; min-width: 26px; height: 22px; padding: 0 7px; border-radius: 11px; background: #06283a; color: var(--text); font: 600 12px/1 var(--num); }
.cnt.red { background: #e11d48; color: #fff; }

/* ============ hero ============ */
.hero { position: relative; background: radial-gradient(ellipse 60% 70% at 72% 40%, rgb(14 116 144 / 22%), transparent 70%), radial-gradient(ellipse 50% 60% at 20% 110%, rgb(45 212 191 / 10%), transparent 70%), var(--bg); overflow: hidden; }
.hero-in { display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(0, .78fr) minmax(0, 1.02fr); gap: 20px; padding: 40px 0 34px; align-items: center; }
.hero h1 { font-size: clamp(38px, 3.8vw, 64px); font-weight: 800; line-height: 1.16; letter-spacing: -1px; }
.g-new { background: linear-gradient(180deg, #5eead4, #10b981); -webkit-background-clip: text; background-clip: text; color: transparent; }
.g-first { background: linear-gradient(180deg, #a5f3fc, #22d3ee); -webkit-background-clip: text; background-clip: text; color: transparent; margin-left: .15em; }
.hero .lead { margin: 16px 0 26px; font-size: 19px; }
.searchbar { display: flex; align-items: center; background: #f8fafc; color: #0f172a; border-radius: 999px; padding-left: 22px; height: 64px; box-shadow: 0 0 36px rgb(34 211 238 / 22%); overflow: hidden; }
.searchbar > .ic { color: #334155; }
.searchbar input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; color: #0f172a; font-size: 17px; padding: 0 16px; height: 100%; }
.searchbar input::placeholder { color: #64748b; }
.sb-btn { display: inline-flex; align-items: center; gap: 10px; height: 100%; padding: 0 30px; border: 0; background: linear-gradient(180deg, #45e3f6, #18c8e5); color: #032530; font-weight: 700; font-size: 17px; cursor: pointer; border-radius: 0 999px 999px 0; }
.sb-btn:hover { background: var(--primary-hover); }
.sb-clear { border: 1.5px solid #cbd5e1; background: none; color: #475569; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; cursor: pointer; margin-right: 18px; flex: none; }
.chips-row { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
.chip-link { display: inline-flex; gap: 8px; align-items: center; padding: 8px 18px; border-radius: 999px; border: 1px solid #22476a; color: #e2e8f0; background: rgb(9 27 45 / 75%); font-size: 15px; cursor: pointer; }
.chip-link:hover { border-color: var(--primary); color: var(--primary-hover); }
.chip-link.is-on { background: linear-gradient(180deg, #45e3f6, #18c8e5); color: #032530; border-color: transparent; font-weight: 700; padding-inline: 22px; }

.hero-map { display: grid; grid-template-columns: 1.15fr 1fr; align-items: center; gap: 10px; }
.map-svg { width: 100%; height: auto; max-height: 460px; overflow: visible; }
.map-dot .halo { fill: currentColor; opacity: .12; }
.map-dot .halo2 { fill: currentColor; opacity: .28; }
.map-dot .core { fill: currentColor; filter: drop-shadow(0 0 6px currentColor); stroke: rgb(255 255 255 / 55%); stroke-width: 3; }
.map-dot:hover .core { stroke: #fff; stroke-width: 5; }
.rg-north { color: #2DD4BF; } .rg-northeast { color: #34D399; } .rg-central { color: var(--gold); }
.rg-east { color: #4ADE80; } .rg-south { color: #38BDF8; } .rg-all { color: #fff; }
.rg-west { color: #A78BFA; }
/* The map's dots pulse now and then, each on its own clock so they never beat together (2 Oct). */
.map-dot .halo, .map-dot .halo2 { transform-box: fill-box; transform-origin: center; animation: dot-pulse 5s ease-out infinite; }
.map-dot .halo2 { animation-name: dot-pulse2; }
.map-svg a:nth-of-type(1) circle { animation-duration: 4.6s; animation-delay: -.4s; }
.map-svg a:nth-of-type(2) circle { animation-duration: 5.8s; animation-delay: -2.9s; }
.map-svg a:nth-of-type(3) circle { animation-duration: 5.1s; animation-delay: -1.6s; }
.map-svg a:nth-of-type(4) circle { animation-duration: 6.4s; animation-delay: -4.2s; }
.map-svg a:nth-of-type(5) circle { animation-duration: 4.9s; animation-delay: -3.3s; }
.map-svg a:nth-of-type(6) circle { animation-duration: 6.9s; animation-delay: -.9s; }
@keyframes dot-pulse { 0%, 46%, 100% { transform: scale(1); opacity: .12; } 4% { transform: scale(.45); opacity: .55; } 40% { transform: scale(1.5); opacity: 0; } 45% { transform: scale(1); opacity: 0; } }
@keyframes dot-pulse2 { 0%, 34%, 100% { transform: scale(1); opacity: .28; } 3% { transform: scale(.6); opacity: .8; } 28% { transform: scale(1.7); opacity: 0; } 33% { transform: scale(1); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .map-dot .halo, .map-dot .halo2 { animation: none; } }
.map-legend h2 { font-size: 26px; color: var(--primary); font-weight: 700; }
.map-legend > p { color: #cbd5e1; font-size: 14px; }
.map-legend ul { list-style: none; padding: 0; margin: 18px 0 0; display: grid; gap: 14px; }
.map-legend a { display: flex; gap: 12px; align-items: center; color: #e2e8f0; font-size: 15px; white-space: nowrap; }
.map-legend a:hover { color: var(--primary-hover); }
.dot { width: 13px; height: 13px; border-radius: 50%; background: currentColor; box-shadow: 0 0 10px currentColor; flex: none; }

.radar-block { display: grid; grid-template-columns: .95fr 1fr; gap: 10px; align-items: center; }
.radar-big { position: relative; aspect-ratio: 1; width: 100%; max-width: 330px; border-radius: 50%; }
.radar-big svg { position: absolute; inset: 0; width: 100%; height: 100%; }
/* The sweep turns clockwise, so its bright edge is the LEADING one (at 12 o'clock before rotation) and
   the glow fades out BEHIND it, anticlockwise. (It was drawn the other way round: fade first, edge last.) */
.sweep { position: absolute; inset: 5%; border-radius: 50%; background: conic-gradient(from 0deg, transparent 0 74%, rgb(34 211 238 / 8%) 82%, rgb(45 212 191 / 55%) 100%); animation: spin 6s linear infinite; }
/* the leading edge itself: a thin solid line from the hub to the rim, drawn as its own element
   (a hard stop inside the gradient came out jagged) */
.sweep::after { content: ""; position: absolute; left: calc(50% - 1px); top: 0; width: 2px; height: 50%; border-radius: 1px;
  background: linear-gradient(to top, rgb(153 246 228 / 25%), rgb(153 246 228 / 95%)); box-shadow: 0 0 6px rgb(94 234 212 / 60%); }
.hub { position: absolute; left: 50%; top: 50%; width: 14px; height: 14px; margin: -7px; border-radius: 50%; background: var(--primary); box-shadow: 0 0 16px 4px rgb(34 211 238 / 60%); }
@keyframes spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .sweep { animation: none; } }
.radar-head { display: flex; gap: 6px 12px; align-items: center; flex-wrap: wrap; margin-bottom: 18px; }
.live-at { flex-basis: 100%; color: #cbd5e1; font-size: 14px; }
.radar-stats b.sm { display: block; margin: 0; white-space: nowrap; }
.radar-head strong { font: 700 19px/1.2 var(--num); white-space: nowrap; }
.live { display: inline-flex; gap: 6px; align-items: center; font-size: 15px; color: #6ee7b7; padding: 3px 12px; border-radius: 999px; background: rgb(16 185 129 / 16%); }
.live i { width: 9px; height: 9px; border-radius: 50%; background: #34D399; box-shadow: 0 0 8px #34D399; }
.radar-stats { list-style: none; padding: 0; margin: 0; display: grid; }
.radar-stats li { display: flex; gap: 16px; align-items: center; padding: 14px 0; }
.radar-stats li + li { border-top: 1px solid #1a3653; }
.rs-ic { width: 58px; height: 58px; border-radius: 50%; display: grid; place-items: center; background: rgb(34 211 238 / 13%); color: var(--primary); flex: none; box-shadow: inset 0 0 0 1px rgb(34 211 238 / 18%); }
.radar-stats .amber .rs-ic { background: rgb(251 191 36 / 18%); color: var(--gold); }
.radar-stats small { display: block; color: #e2e8f0; font-size: 16px; }
.radar-stats b { font: 700 36px/1.1 var(--num); color: var(--primary); margin-right: 6px; }
.radar-stats .amber b { color: var(--gold); }
.radar-stats b.sm { font-size: 26px; }
.radar-stats em { display: block; font-style: normal; color: #cbd5e1; font-size: 15px; }

/* ============ home lower ============ */
.home-grid { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr); gap: 28px; margin: 20px auto 34px; }
.sec-head { display: flex; align-items: center; gap: 16px; margin-bottom: 16px; }
.live-pill { display: inline-flex; gap: 8px; align-items: center; padding: 5px 14px; border-radius: 999px; background: rgb(14 116 144 / 30%); color: #7dd3fc; font-size: 14px; }
.sec-head .more { margin-left: auto; }
.side-col { display: grid; gap: 22px; align-content: start; }

/* white project card */
.pcards { list-style: none; padding: 0; margin: 0 0 12px; display: grid; gap: 12px; }
.pcards .empty { color: var(--muted); padding: 24px; text-align: center; border: 1px dashed var(--border-2); border-radius: 12px; }
.pcards .empty-alt { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 16px; margin-top: 12px; }
.pcards .empty-alt a { color: var(--primary); font-weight: 600; }
.pcard { display: grid; grid-template-columns: 150px minmax(0, 1fr) auto 190px 44px; gap: 18px; align-items: center; background: linear-gradient(180deg, #ffffff, #f1f5f9); color: var(--ink); border-radius: 12px; padding: 14px 16px; box-shadow: 0 8px 26px rgb(0 0 0 / 22%); }
.pc-media { display: grid; gap: 8px; color: var(--ink); }
.thumb { display: block; width: 100%; aspect-ratio: 16 / 10; object-fit: cover; border-radius: 8px; height: auto; }
.thumb-icon { display: grid; place-items: center; background: radial-gradient(circle at 30% 20%, rgb(34 211 238 / 25%), transparent 60%), linear-gradient(160deg, #0f3350, #0b2238); color: var(--primary); }
.thumb-icon .cat-ic { width: 40%; height: auto; aspect-ratio: 1; }
.pc-cat { display: flex; gap: 8px; align-items: center; justify-content: center; font-size: 14px; color: #1e293b; }
.pc-main { min-width: 0; display: grid; gap: 4px; justify-items: start; }
.pc-title { color: var(--ink); font-weight: 700; font-size: 18px; line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: break-word; }
.pc-title:hover { color: #0369a1; }
.pc-agency { color: var(--ink-muted); font-size: 15px; display: flex; gap: 8px; align-items: baseline; }
.pc-chips { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 4px; }
.pc-chips span { background: #e2e8f0; color: #334155; border-radius: 8px; padding: 2px 12px; font-size: 13px; }
.pc-facts { display: flex; gap: 16px; align-items: center; color: #334155; font-size: 15px; white-space: nowrap; }
.pc-facts span { display: inline-flex; gap: 8px; align-items: center; }
.pc-facts .ic { color: #475569; }
.pc-budget { font-weight: 700; color: var(--ink); font-family: var(--num); white-space: nowrap; padding-left: 16px; border-left: 1px solid var(--card-line); }
.pc-when span { white-space: nowrap; }
.pc-when { display: flex; gap: 10px; align-items: flex-start; color: #334155; font-size: 15px; border-left: 1px solid var(--card-line); padding-left: 16px; line-height: 1.5; }
.pc-when .ic { color: #475569; margin-top: 2px; }
.pc-when small { color: var(--ink-muted); font-size: 14px; }
.pc-save { border: 0; background: none; color: var(--ink); cursor: pointer; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 10px; align-self: start; }
.pc-save:hover { background: #e2e8f0; }
.pc-save[aria-pressed="true"] { color: #0891b2; }
.pc-save[aria-pressed="true"] .ic { fill: currentColor; }
.stag { display: inline-block; padding: 2px 12px; border-radius: 6px; font-size: 14px; font-weight: 600; background: #e2e8f0; color: #334155; }
.stag-new { background: #c7f5dc; color: #047857; }
.stag-invite { background: #cff7fb; color: #0e7490; }
.stag-tor, .stag-request { background: #dbeafe; color: #1d4ed8; }
.stag-winner { background: #ede9fe; color: #6d28d9; }
.stag-contract { background: #e0e7ff; color: #4338ca; }
.stag-cancel { background: #ffe4e6; color: #be123c; }
.stag-unknown { background: #e2e8f0; color: #475569; }
/* the states that come from e-GP dates, in the colour family of the project page's pill (.spill-*) */
.stag-draft { background: #fef3c7; color: #92400e; }
.stag-today { background: #fde68a; color: #7c2d12; }
.stag-closed { background: #e2e8f0; color: #475569; }
.stag-renew { background: #cffafe; color: #0e7490; }
/* search variant: blue title, facts stacked, status pill where the design had "ตรงกับ %" */
.pcard-search { grid-template-columns: 150px minmax(0, 1fr) 175px 175px 44px; grid-template-areas: "media main facts when save" "media main facts match save"; align-items: start; row-gap: 8px; }
.pcard-search .pc-media { grid-area: media; } .pcard-search .pc-main { grid-area: main; } .pcard-search .pc-facts { grid-area: facts; }
.pcard-search .pc-when { grid-area: when; } .pcard-search .pc-match { grid-area: match; justify-self: start; margin-left: 16px; } .pcard-search .pc-save { grid-area: save; }
.pcard-search .pc-title { color: #1d3a8a; }
.pcard-search .pc-facts { flex-direction: column; align-items: flex-start; gap: 10px; border-left: 1px solid var(--card-line); padding-left: 18px; align-self: stretch; justify-content: center; }
.pcard-search .pc-budget { border: 0; padding: 0; }
.pcard-search .pc-when { align-self: end; }
.pc-match { align-self: center; justify-self: center; text-align: center; padding: 8px 14px; border-radius: 8px; font-weight: 700; font-size: 14px; background: #cff7fb; color: #0e7490; }
.pc-match.stag-winner, .pc-match.stag-contract { background: #ede9fe; color: #6d28d9; }
.pc-match.stag-cancel { background: #ffe4e6; color: #be123c; }
.pc-match.stag-tor, .pc-match.stag-request { background: #dbeafe; color: #1d4ed8; }
.pc-match.stag-draft { background: #fef3c7; color: #92400e; } .pc-match.stag-today { background: #fde68a; color: #7c2d12; }
.pc-match.stag-closed { background: #e2e8f0; color: #475569; } .pc-match.stag-renew { background: #cffafe; color: #0e7490; }
.pcards.grid { grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }
.pcards.grid .pcard { grid-template-columns: 1fr 44px; align-items: start; }
.pcards.grid .pc-media, .pcards.grid .pc-main, .pcards.grid .pc-facts, .pcards.grid .pc-when, .pcards.grid .pc-match { grid-column: 1 / -1; }
.pcards.grid .pc-save { grid-row: 1; grid-column: 2; position: relative; z-index: 1; background: #fff; margin: 6px; }
.pcards.grid .pc-media { grid-row: 1; }
.pcards.grid .pc-facts, .pcards.grid .pc-when { border: 0; padding: 0; }
.pcards.grid .pc-match { justify-self: start; }
.pcards.compact .pcard { grid-template-columns: 110px minmax(0, 1fr) 44px; }
.pcards.compact .pc-facts, .pcards.compact .pc-when, .pcards.compact .pc-cat { display: none; }

/* day tiles + white category tiles */
.day-strip { display: grid; grid-template-columns: repeat(7, 1fr); gap: 8px; }
.day { display: grid; justify-items: center; align-content: start; gap: 4px; padding: 14px 4px 12px; border-radius: 10px; border: 1px solid #1a3a57; background: rgb(8 24 40 / 70%); color: var(--text); text-align: center; min-height: 128px; }
.day small { color: #cbd5e1; font-size: 13px; line-height: 1.35; min-height: 36px; }
.day small:last-child { min-height: 0; color: var(--muted); }
.day b { font: 700 26px/1.2 var(--num); }
.day:hover { border-color: var(--primary); color: var(--text); }
.day.is-today { border: 2px solid var(--gold); background: linear-gradient(180deg, rgb(251 191 36 / 22%), rgb(120 80 10 / 30%)); box-shadow: 0 0 22px rgb(251 191 36 / 25%); }
.day.is-today small, .day.is-today b { color: var(--gold); }
/* weekends + government holidays (user, 5 Oct): violet-grey, quieter than a working day */
/* working days are bright (theme cyan border + light text); weekends and government holidays keep
   the plain dark tile (user, 5 Oct). Today keeps its gold frame. */
.day small:first-child { white-space: nowrap; }
.day:not(.is-off):not(.is-today) { border-color: rgb(34 211 238 / 55%); background: rgb(14 52 80 / 70%); }
.day:not(.is-off):not(.is-today) small:first-child { color: #a5f3fc; }
.day:not(.is-off):not(.is-today) b { color: #f1f5f9; }
.day.is-off:not(.is-today) small:first-child, .day.is-off:not(.is-today) b { color: #7f93ab; }
.day:not(.is-today):hover { border-color: var(--primary-hover); }
.cat-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.cat-tile { display: flex; align-items: center; gap: 16px; padding: 12px 18px 12px 14px; border-radius: 10px; background: linear-gradient(180deg, #ffffff, #eef2f7); color: var(--ink); box-shadow: 0 6px 18px rgb(0 0 0 / 20%); }
.cat-tile:hover { color: var(--ink); box-shadow: 0 0 0 2px var(--primary), 0 6px 18px rgb(0 0 0 / 20%); }
.cat-tile strong { display: block; font-size: 16px; line-height: 1.35; }
.cat-tile small { color: #475569; font-size: 15px; font-family: var(--num); }
.cat-tile > .ic { margin-left: auto; color: var(--ink); }
.ct-ic { width: 52px; height: 52px; border-radius: 12px; display: grid; place-items: center; flex: none; background: #dbeafe; color: #1e3a8a; }
.ct-ic .cat-ic { width: 30px; height: 30px; stroke-width: 2.2; }
.t-construct .ct-ic { background: #dbeafe; } .t-supply .ct-ic { background: #e0e7ff; color: #3730a3; }
.t-consult .ct-ic { background: #ccfbf1; color: #0f766e; } .t-it .ct-ic { background: #cffafe; color: #0e7490; }
.t-facility .ct-ic { background: #ede9fe; color: #5b21b6; } .t-event .ct-ic { background: #ffedd5; color: #9a3412; }
.t-medical .ct-ic { background: #fce7f3; color: #9d174d; } .t-vehicle .ct-ic { background: #fef3c7; color: #92400e; }
.t-agri .ct-ic { background: #dcfce7; color: #166534; } .t-other .ct-ic { background: #e5e7eb; color: #374151; }

/* feature bar + footer */
.feature-bar { background: linear-gradient(180deg, #0c2440, #0a1f37); border-top: 1px solid #16304a; margin-top: 30px; }
.feature-in { display: grid; grid-template-columns: repeat(3, 1fr) minmax(200px, .9fr); align-items: center; padding: 14px 0; }
.feature-in a { display: flex; gap: 18px; align-items: center; color: var(--text); padding: 8px 28px; border-right: 1px solid #1d3b58; }
.feature-in a .ic { color: #e2e8f0; }
.feature-in strong { display: block; font-size: 17px; } .feature-in small { color: #aab7c8; font-size: 14px; }
.feature-in a:hover .ic, .feature-in a:hover strong { color: var(--primary); }
.script-tag { display: block; width: 230px; height: auto; margin: 0 0 0 auto; }
.site-footer { padding: 16px 0 28px; font-size: 13px; color: var(--faint); }
.footer-in { display: flex; justify-content: space-between; gap: 10px 24px; flex-wrap: wrap; }
.footer-brand { flex-basis: 100%; } .footer-brand img { width: 120px; height: auto; display: block; opacity: .92; }
.footer-brand:hover img { opacity: 1; }

/* ============ search ============ */
.search-top { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 24px; margin-top: 30px; }
.searchbar.wide { grid-column: 2; width: min(1000px, 62vw); height: 62px; }
.adv-link { grid-column: 3; justify-self: start; background: none; border: 0; color: var(--text); font-size: 17px; display: inline-flex; gap: 10px; align-items: center; cursor: pointer; }
.adv-link:hover { color: var(--primary); }
.search-grid { display: grid; grid-template-columns: 330px minmax(0, 1fr) 300px; gap: 22px; align-items: start; margin-bottom: 30px; }
.filters { padding: 22px 24px; }
.f-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding-bottom: 16px; border-bottom: 1px solid #1a3653; }
.f-head h2 { white-space: nowrap; font-size: 24px; display: flex; gap: 14px; align-items: center; }
.f-group { padding: 16px 0 6px; display: grid; gap: 10px; }
.f-group > *, .sel { min-width: 0; }
.f-head .link-btn { font-size: 14px; white-space: nowrap; padding: 4px 0; }
/* Thai letters sit a little below the middle of their line (and the funnel is top-heavy), so the
   icons are nudged down to look level with the words. */
.f-head h2 .ic { position: relative; top: 2px; } .f-head .link-btn .ic { position: relative; top: 1px; }
.f-group h3 { font-size: 18px; }
.sel { position: relative; display: flex; align-items: center; gap: 12px; background: rgb(8 24 40 / 70%); border: 1px solid #22476a; border-radius: var(--r-ctl); padding: 0 14px; color: var(--text); }
.sel > .ic, .sel > .cat-ic { color: #dbe4ef; flex: none; }
.sel select { flex: 1; min-width: 0; appearance: none; -webkit-appearance: none; background: transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23e2e8f0' stroke-width='2'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") right center / 18px no-repeat; border: 0; outline: 0; padding: 13px 26px 13px 0; color: var(--text); text-overflow: ellipsis; }
.sel select option, select option { background: var(--surface); }
select { max-width: 100%; background: rgb(8 24 40 / 70%); border: 1px solid #22476a; border-radius: var(--r-ctl); padding: 11px 14px; color: var(--text); }
.range { display: grid; grid-template-columns: 1fr auto 1fr; gap: 10px; align-items: center; }
.range input { min-width: 0; background: rgb(8 24 40 / 70%); border: 1px solid #22476a; border-radius: var(--r-ctl); padding: 12px 14px; color: var(--text); }
.checks { display: grid; gap: 6px; }
.check { display: flex; gap: 12px; align-items: center; font-size: 16px; cursor: pointer; }
.check input { appearance: none; -webkit-appearance: none; width: 22px; height: 22px; border: 1.5px solid #94a3b8; border-radius: 5px; flex: none; margin: 0; }
.check input:checked { background: var(--primary) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23032530' stroke-width='3.2'%3E%3Cpath d='m5 12 5 5 9-10'/%3E%3C/svg%3E") center / 16px no-repeat; border-color: var(--primary); }
.check small { margin-left: auto; color: #cbd5e1; font-family: var(--num); font-size: 15px; }
.filters .btn-primary { margin-top: 18px; min-height: 50px; font-size: 18px; }
.f-count { text-align: center; color: var(--primary); font-size: 14px; margin: 10px 0 0; }
.f-count b { font-weight: 600; }
.results-head { display: flex; justify-content: space-between; align-items: end; gap: 16px; flex-wrap: wrap; border-top: 1px solid #16304a; padding-top: 12px; }
.results-head h1 { font-size: 34px; }
.results-head p { font-size: 16px; }
.results-tools { display: flex; gap: 12px; align-items: center; }
.results-tools label { font-size: 16px; color: #dbe4ef; }
.results-tools select { width: 240px; padding: 12px 14px; }
.view-btn { width: 48px; height: 48px; border-radius: 8px; border: 0; background: rgb(8 24 40 / 70%); color: #dbe4ef; display: grid; place-items: center; cursor: pointer; }
.view-btn[aria-pressed="true"] { background: rgb(14 116 144 / 45%); color: var(--primary); }
.match-line { font-size: 17px; font-weight: 600; margin: 10px 0 8px; }
.match-line b { color: var(--primary); }
.active-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 10px; }
.active-chip { display: inline-flex; gap: 6px; align-items: center; padding: 3px 8px 3px 12px; border-radius: 999px; background: rgb(34 211 238 / 12%); color: var(--primary-hover); font-size: 13px; border: 0; cursor: pointer; }
.summary { padding: 22px; }
.summary > h2 { font-size: 22px; display: flex; gap: 12px; align-items: center; margin-bottom: 14px; }
.big-count { display: flex; flex-wrap: wrap; gap: 2px 14px; align-items: baseline; padding: 14px 20px; border-radius: 12px; background: rgb(8 24 40 / 60%); border: 1px solid #1a3653; }
.big-count b { font: 800 46px/1 var(--num); color: var(--primary); text-shadow: 0 0 20px rgb(34 211 238 / 40%); }
.big-count > span { font-size: 15px; line-height: 1.5; }
.big-count > small { flex-basis: 100%; font-size: 13.5px; line-height: 1.5; }   /* its own line: it used to run out of the box */
.sum-sec { border-top: 1px solid #1a3653; margin-top: 18px; padding-top: 16px; }
.sum-sec h3 { font-size: 18px; display: flex; gap: 12px; align-items: center; margin-bottom: 12px; }
/* status rows: the same row as the province / method lists below (name left, count right, a rule
   under each), plus a short bar in the STATUS'S OWN colour, the one its pill uses everywhere else.
   (The design made only the first bar gold, which read as a mistake.) */
.bars { display: grid; gap: 0; }
.b-row { display: grid; grid-template-columns: minmax(0, 1fr) 56px 52px; gap: 10px; align-items: center; font-size: 15px; }
.b-track { height: 8px; border-radius: 4px; background: #13304a; overflow: hidden; }
.b-track span { display: block; height: 100%; border-radius: 6px; background: linear-gradient(90deg, #22d3ee, #67e8f9); }
.b-row.bs-invite .b-track span { background: #5eead4; } .b-row.bs-tor .b-track span, .b-row.bs-request .b-track span { background: #7dd3fc; }
.b-row.bs-winner .b-track span, .b-row.bs-contract .b-track span { background: #c4b5fd; } .b-row.bs-cancel .b-track span { background: #fda4af; } .b-row.bs-closed .b-track span { background: #cbd5e1; }
.b-row .n { text-align: right; font-family: var(--num); font-weight: 500; white-space: nowrap; }
/* status rows double as filter buttons (2 Oct) */
button.b-row { width: 100%; margin: 0; padding: 7px 0; border: 0; border-bottom: 1px solid #16304a; border-radius: 0; background: none; color: inherit; font: inherit; font-size: 15px; text-align: left; cursor: pointer; }
button.b-row:last-child { border-bottom: 0; } button.b-row:hover > span:first-child { color: var(--primary); }
button.b-row.is-on { background: linear-gradient(90deg, rgb(34 211 238 / 14%), transparent); }
button.b-row.is-on > span:first-child { color: var(--primary); font-weight: 600; }
.kv { display: grid; list-style: none; padding: 0; margin: 0; font-size: 15px; }
.kv > * { display: flex; justify-content: space-between; gap: 10px; padding: 7px 0; border-bottom: 1px solid #16304a; }
.kv > *:last-child { border-bottom: 0; }
.kv b { font-family: var(--num); font-weight: 500; white-space: nowrap; }
.kv button { background: none; border: 0; padding: 0; color: var(--text); cursor: pointer; text-align: left; }
.kv button:hover { color: var(--primary); }
.filters-toggle { display: none; }

/* ============ detail ============ */
.detail-grid { display: grid; grid-template-columns: minmax(0, 1fr) 420px; gap: 24px; align-items: start; margin-bottom: 30px; }
.detail-main { display: grid; gap: 16px; min-width: 0; padding: 26px; }
.gated { display: grid; gap: 16px; }
.detail-head { display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: 30px; }
.dh-img .thumb { aspect-ratio: 6 / 5; border-radius: 10px; }
.dh-top { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.dh-actions { margin-left: auto; display: flex; gap: 14px; align-items: center; }
.spill { display: inline-block; padding: 5px 18px; border-radius: 999px; font-weight: 700; font-size: 15px; background: #5eead4; color: #03281f; box-shadow: 0 0 18px rgb(94 234 212 / 40%); }
.spill-tor, .spill-request { background: #7dd3fc; color: #062a3d; }
.spill-winner, .spill-contract { background: #c4b5fd; color: #2e1065; box-shadow: 0 0 18px rgb(196 181 253 / 35%); }
.spill-cancel { background: #fda4af; color: #4c0519; }
.dh-title-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 24px; margin-top: 10px; }
.detail-head h1 { font-size: clamp(22px, 2.1vw, 32px); font-weight: 700; line-height: 1.35; overflow-wrap: break-word; }
.dh-agency { color: #dbe4ef; font-size: 18px; margin-top: 6px; }
.dh-agency a { color: #dbe4ef; } .dh-agency a:hover { color: var(--primary); }
.dh-ids { margin: 0; display: grid; gap: 18px; align-content: start; }
.dh-ids > div { border-left: 1px solid var(--border-2); padding-left: 16px; }
.dh-ids dt { color: var(--primary); font-size: 14px; }
.dh-ids dd { margin: 2px 0 0; font: 500 18px/1.3 var(--num); }
.tag-row { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 14px; }
.otag { display: inline-flex; align-items: center; gap: 8px; padding: 5px 16px; border-radius: 999px; border: 1px solid #2b5d80; color: #e2e8f0; font-size: 14px; background: rgb(8 24 40 / 50%); }
a.otag:hover { border-color: var(--primary); color: var(--primary-hover); }
.fact-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.fact { display: flex; gap: 22px; align-items: center; padding: 18px 22px; border-radius: 8px; border: 1px solid #1a3a57; background: rgb(8 26 44 / 75%); }
.fact-ic { width: 40px; height: 40px; color: var(--primary); stroke-width: 1.4; }
.fact dt { color: #7dd3fc; font-size: 14px; }
.fact dd { margin: 2px 0 0; font-size: 17px; overflow-wrap: break-word; }
.sub-panel { border: 1px solid #1a3a57; border-radius: 10px; background: rgb(8 26 44 / 55%); padding: 20px 26px; }
.timeline { list-style: none; padding: 0; margin: 22px 0 10px; display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; }
.timeline li { position: relative; display: grid; justify-items: center; text-align: center; gap: 2px; padding: 0 6px; }
.timeline li::before { content: ""; position: absolute; top: 15px; left: -50%; right: 50%; height: 3px; background: #2a4561; }
.timeline li:first-child::before { display: none; }
.timeline li i { width: 32px; height: 32px; border-radius: 50%; border: 3px solid #4b6582; background: var(--bg); position: relative; z-index: 1; display: grid; place-items: center; }
.timeline li i .ic { color: #03281f; stroke-width: 3.2; }
.timeline strong { font-size: 16px; font-weight: 500; margin-top: 10px; }
.timeline small { color: #dbe4ef; font-size: 15px; font-family: var(--num); }
.timeline .st-done i { background: #34d399; border-color: #34d399; box-shadow: 0 0 14px rgb(52 211 153 / 55%); }
.timeline .st-done::before, .timeline .is-current::before { background: linear-gradient(90deg, #34d399, #22d3ee); }
.timeline .is-current i { background: var(--bg); border: 4px solid var(--primary); box-shadow: 0 0 0 5px rgb(34 211 238 / 20%), 0 0 18px var(--primary); }
.timeline .is-current strong { color: var(--primary); }
.timeline .st-scheduled i { border-color: var(--gold); }
.timeline .st-scheduled small { color: var(--gold); }
.timeline .st-skipped i { border-style: dashed; }
.timeline .st-cancel i { background: var(--danger); border-color: var(--danger); }
.timeline .st-cancel strong { color: var(--danger); }
.tab-body { padding: 22px 26px; }
.tab-body h3 { display: flex; gap: 12px; align-items: center; font-size: 22px; margin-bottom: 10px; }
.ov-text { color: #dbe4ef; font-size: 16px; line-height: 1.75; padding-left: 36px; }
.mini-facts { display: grid; grid-template-columns: repeat(3, 1fr); margin-top: 16px; border-bottom: 1px solid #1a3a57; padding-bottom: 16px; }
.mini-facts > div { display: flex; gap: 16px; align-items: center; padding: 0 20px; }
.mini-facts > div + div { border-left: 1px solid #1a3a57; }
.mf-ic { width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center; background: #13304a; color: #dbe4ef; flex: none; }
.mini-facts small { display: block; color: var(--muted); font-size: 14px; } .mini-facts b { font-weight: 500; font-size: 17px; }
.tbl { width: 100%; border-collapse: collapse; font-size: 15px; }
.tbl th { text-align: left; color: #7dd3fc; font-weight: 500; padding: 14px 16px; border-bottom: 1px solid #1f3f5d; background: rgb(14 38 62 / 60%); }
.tbl td { padding: 14px 16px; border-bottom: 1px solid #16304a; vertical-align: top; }
.tbl th.num { text-align: right; }
.tbl-wrap { overflow-x: auto; position: relative; }
.detail-side { display: grid; gap: 18px; min-width: 0; }
.detail-side > * { min-width: 0; }
.status-card { padding: 26px; }
.st-row { display: grid; grid-template-columns: 170px 1fr; gap: 22px; align-items: center; margin-bottom: 18px; }
.radar-mini { position: relative; aspect-ratio: 1; border-radius: 50%; border: 1px solid rgb(34 211 238 / 22%);
  background: radial-gradient(circle, transparent 0 21%, rgb(34 211 238 / 28%) 21.5% 22%, transparent 22.5% 43%, rgb(34 211 238 / 28%) 43.5% 44%, transparent 44.5% 65%, rgb(34 211 238 / 28%) 65.5% 66%, transparent 66.5%),
  linear-gradient(transparent calc(50% - .5px), rgb(34 211 238 / 18%) 0 calc(50% + .5px), transparent 0), linear-gradient(90deg, transparent calc(50% - .5px), rgb(34 211 238 / 18%) 0 calc(50% + .5px), transparent 0), radial-gradient(#0e3b52 0, #071426 70%); }
.radar-mini .sweep { inset: 0; }
.st-big { font-size: 25px; font-weight: 800; color: var(--primary); line-height: 1.2; margin-bottom: 4px; text-shadow: 0 0 16px rgb(34 211 238 / 35%); }
.st-sub { font-size: 18px; margin-bottom: 10px; }
/* The status card's radar and status text take the colour of the project's status pill (.spill-*),
   so the card reads the same as the pill at the top of the page (2 Oct). --sc is an "R G B" triple. */
.status-card { --sc: 94 234 212; }
.status-card.sc-tor, .status-card.sc-request { --sc: 125 211 252; }
.status-card.sc-winner, .status-card.sc-contract { --sc: 196 181 253; }
.status-card.sc-cancel { --sc: 253 164 175; }
.status-card.sc-closed { --sc: 203 213 225; }
.status-card.sc-today { --sc: 251 191 36; }
.status-card.sc-draft { --sc: 253 230 138; }
.status-card.sc-new { --sc: 165 243 252; }
.status-card .st-big { color: rgb(var(--sc)); text-shadow: 0 0 16px rgb(var(--sc) / 35%); }
.status-card .radar-mini { border-color: rgb(var(--sc) / 30%);
  background: radial-gradient(circle, transparent 0 21%, rgb(var(--sc) / 30%) 21.5% 22%, transparent 22.5% 43%, rgb(var(--sc) / 30%) 43.5% 44%, transparent 44.5% 65%, rgb(var(--sc) / 30%) 65.5% 66%, transparent 66.5%),
  linear-gradient(transparent calc(50% - .5px), rgb(var(--sc) / 20%) 0 calc(50% + .5px), transparent 0), linear-gradient(90deg, transparent calc(50% - .5px), rgb(var(--sc) / 20%) 0 calc(50% + .5px), transparent 0),
  radial-gradient(rgb(var(--sc) / 16%) 0, transparent 70%), radial-gradient(#0b2a3d 0, #071426 70%); }
.status-card .radar-mini .sweep { background: conic-gradient(from 0deg, transparent 0 74%, rgb(var(--sc) / 8%) 82%, rgb(var(--sc) / 55%) 100%); }
.status-card .radar-mini .sweep::after { background: linear-gradient(to top, rgb(var(--sc) / 25%), rgb(var(--sc) / 95%)); box-shadow: 0 0 6px rgb(var(--sc) / 60%); }
.status-card .radar-mini .hub { background: rgb(var(--sc)); box-shadow: 0 0 16px 4px rgb(var(--sc) / 60%); }
.status-card .radar-mini .blip { background: rgb(var(--sc)); animation-name: blip-sc; }
.status-card .radar-mini .blip::after { border-color: rgb(var(--sc)); }
@keyframes blip-sc {
  0%   { transform: scale(1.9); opacity: 1; box-shadow: 0 0 14px 5px rgb(var(--sc) / 75%); }
  6%   { transform: scale(1.25); opacity: .95; box-shadow: 0 0 10px 3px rgb(var(--sc) / 55%); }
  30%  { transform: scale(1); opacity: .6; box-shadow: 0 0 6px 1px rgb(var(--sc) / 30%); }
  100% { transform: scale(1); opacity: .28; box-shadow: none; }
}
.status-card .btn + .btn { margin-top: 10px; }
.src-card h2 { display: flex; gap: 16px; align-items: center; font-size: 20px; margin-bottom: 12px; }
.src-card p { padding-left: 46px; font-size: 15px; }
.src-card .btn { margin-top: 10px; min-height: 52px; }
.scap-card { position: relative; overflow: hidden; border-color: #1f4d73;
  background: linear-gradient(100deg, rgb(11 36 64 / 92%) 38%, rgb(11 36 64 / 25%) 75%), url(img/scap-card-960.webp) right center / cover no-repeat, #0b2440; }
.scap-top { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; position: relative; z-index: 1; }
.scap-top .btn { margin-left: auto; padding: 0 10px; font-size: 13px; }
.scap-logo { font: 900 34px/1 var(--num); letter-spacing: -.5px; color: #fff; }
.scap-logo span { color: var(--primary); }
.scap-tag { white-space: nowrap; font-size: 12px; color: #cbd5e1; line-height: 1.35; padding-left: 14px; border-left: 1px solid #2b5d80; }
.scap-title { font-size: 21px; font-weight: 700; margin: 18px 0 14px; position: relative; z-index: 1; line-height: 1.4; }
.scap-checks { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 10px 22px; font-size: 15px; position: relative; z-index: 1; }
.scap-checks.col { flex-direction: column; }
.scap-checks li { display: flex; gap: 10px; align-items: center; }
.scap-checks .ic { color: #34d399; width: 24px; height: 24px; }
.help-card { display: flex; gap: 18px; align-items: center; }
.help-ic { width: 60px; height: 60px; border-radius: 14px; display: grid; place-items: center; background: #0e2a44; color: var(--primary); flex: none; }
.help-card strong { font-size: 17px; white-space: nowrap; }
.help-card > div { min-width: 0; } .help-card p { margin: 4px 0 0; }
.help-card .btn { margin-left: auto; }
.meter { background: rgb(251 191 36 / 10%); border: 1px solid rgb(251 191 36 / 35%); color: #fde68a; border-radius: 10px; padding: 10px 14px; font-size: 14px; margin: 0; }
body.is-walled .gated { filter: blur(6px); pointer-events: none; user-select: none; }

/* ============ tracking ============ */
.track-grid { display: grid; grid-template-columns: minmax(0, 1fr) 420px; gap: 26px; align-items: start; margin-bottom: 30px; }
.track-main { display: grid; gap: 16px; align-content: start; min-width: 0; }
.track-body { display: grid; gap: 18px; min-width: 0; }
.track-side { display: grid; gap: 22px; margin-top: 26px; }
.stat-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.stat { display: flex; gap: 20px; align-items: center; padding: 20px 24px; border-radius: 12px; border: 1px solid #1a3a57; background: linear-gradient(180deg, rgb(14 38 62 / 72%), rgb(10 29 49 / 82%)); }
.stat > .ic { width: 72px; height: 72px; padding: 19px; border-radius: 14px; background: #0f2c46; color: var(--primary); flex: none; }
.stat.amber > .ic { background: #3a2e12; color: var(--gold); }
.stat.round > .ic { border-radius: 50%; }
.stat small { display: block; color: #e2e8f0; font-size: 20px; }
.stat b { font: 800 40px/1.1 var(--num); color: var(--primary); margin-right: 8px; }
.stat.amber b { color: var(--gold); }
.stat div { font-size: 20px; color: #dbe4ef; }
.track-tools { display: grid; grid-template-columns: minmax(200px, 2fr) repeat(4, minmax(120px, 1fr)); gap: 12px; }
.tsearch { display: flex; gap: 12px; align-items: center; border: 1px solid #22476a; border-radius: var(--r-ctl); background: rgb(8 24 40 / 70%); padding: 0 16px; color: #cbd5e1; }
.tsearch input { flex: 1; min-width: 0; border: 0; outline: 0; background: none; padding: 12px 0; color: var(--text); }
.track-tools > select { appearance: none; -webkit-appearance: none; background: rgb(8 24 40 / 70%) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23e2e8f0' stroke-width='2'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") right 12px center / 18px no-repeat; padding-right: 36px; }
.track-tools .sel select { padding: 12px 26px 12px 0; }
.track-tbl th { font-size: 16px; padding: 18px 14px; }
.track-tbl td { padding: 16px 14px; font-size: 15.5px; }
.track-tbl .cb { width: 44px; }
.track-tbl input[type=checkbox] { appearance: none; -webkit-appearance: none; width: 22px; height: 22px; border: 1.5px solid #cbd5e1; border-radius: 5px; margin: 0; }
.track-tbl input[type=checkbox]:checked { background: var(--primary); border-color: var(--primary); }
.track-tbl .t-title { color: var(--text); font-weight: 500; min-width: 260px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.track-tbl .t-title:hover { color: var(--primary); }
.track-tbl .t-meta { display: flex; gap: 10px; margin-top: 6px; font-size: 13px; }
.track-tbl .t-meta span { display: inline-flex; gap: 6px; align-items: center; padding: 1px 10px; border-radius: 6px; background: #13304a; color: #cbd5e1; }
.track-tbl .t-meta span.plain { background: none; padding: 0; }
.track-tbl .agency { color: #dbe4ef; min-width: 160px; }
.track-tbl .money { white-space: nowrap; font-family: var(--num); }
.track-tbl .money .ic { margin-right: 8px; }
.track-tbl .when { white-space: nowrap; }
.track-tbl .when .ic { margin-right: 8px; }
.track-tbl .when small { display: block; color: var(--muted); padding-left: 28px; }
.dpill { display: inline-flex; gap: 8px; align-items: center; padding: 6px 16px; border-radius: 999px; font-size: 15px; white-space: nowrap; background: rgb(34 211 238 / 12%); color: var(--primary); }
.dpill::before { content: ""; width: 10px; height: 10px; border-radius: 50%; background: currentColor; }
.dpill.open { background: rgb(34 211 238 / 12%); color: #22d3ee; }
.dpill.done { background: rgb(167 139 250 / 14%); color: #c4b5fd; }
.dpill.changed { background: rgb(225 29 72 / 20%); color: #fb7185; }
.dpill.cancel { background: rgb(148 163 184 / 14%); color: #cbd5e1; }
.menu-wrap { position: relative; display: flex; justify-content: center; }
.row-menu { position: absolute; right: 0; top: 100%; z-index: 5; background: var(--surface); border: 1px solid var(--border-2); border-radius: 10px; padding: 6px; display: grid; min-width: 170px; box-shadow: 0 10px 30px rgb(0 0 0 / 40%); }
.row-menu button, .row-menu a { background: none; border: 0; text-align: left; padding: 8px 12px; border-radius: 6px; color: var(--text); cursor: pointer; font-size: 14px; }
.row-menu button:hover, .row-menu a:hover { background: rgb(34 211 238 / 10%); color: var(--primary); }
.empty-state { padding: 32px; text-align: center; color: var(--muted); display: grid; gap: 12px; justify-items: center; }
.gate { display: flex; gap: 18px; align-items: center; flex-wrap: wrap; margin-bottom: 24px; }
.gate > .ic { color: var(--gold); }
.gate > div { flex: 1; min-width: 220px; }
.cal-nav { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; }
.cal-nav b { font-size: 20px; }
.cal-nav .icon-btn { color: var(--primary); }
.cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; text-align: center; }
.cal-grid .dow { color: #cbd5e1; font-size: 15px; padding: 6px 0; }
.cal-grid button { position: relative; aspect-ratio: 1; max-width: 48px; justify-self: center; width: 100%; border: 2px solid transparent; border-radius: 50%; background: none; color: var(--text); cursor: pointer; font: 500 16px var(--num); }
.cal-grid button.out { color: #5b6b82; }
.cal-grid button.today { border-color: var(--primary); color: var(--primary); box-shadow: 0 0 12px rgb(34 211 238 / 35%); }
.cal-grid button.ring-tor { border-color: var(--gold); color: var(--gold); box-shadow: 0 0 10px rgb(251 191 36 / 30%); }
.cal-grid button.ring-winner, .cal-grid button.ring-contract { border-color: #2563eb; }
.cal-grid button.ring-cancel { border-color: var(--danger); }
.cal-grid button.cal-sel { background: rgb(34 211 238 / 20%); }   /* not ".sel": that is the dropdown box class (6 Oct) */
.cal-grid .dots { position: absolute; bottom: 2px; left: 0; right: 0; display: flex; justify-content: center; gap: 3px; }
.cal-grid .dots i, .cal-legend i { width: 7px; height: 7px; border-radius: 50%; display: inline-block; }
.ev-tor { background: var(--gold); } .ev-winner, .ev-contract { background: var(--primary); } .ev-cancel { background: var(--danger); } .ev-request { background: var(--muted); }
.cal-legend { display: flex; flex-wrap: wrap; gap: 18px; font-size: 15px; color: #dbe4ef; margin: 16px 0 6px; }
.cal-legend span { display: inline-flex; gap: 8px; align-items: center; }
.cal-legend i { width: 12px; height: 12px; }
.cal-day { list-style: none; padding: 0; margin: 0; display: grid; gap: 6px; font-size: 14px; }
.cal-day li { border-top: 1px solid var(--border); padding-top: 6px; }
.feed { list-style: none; padding: 0; margin: 0; display: grid; }
.feed li { display: grid; grid-template-columns: 64px 1fr; gap: 18px; padding: 14px 0; border-top: 1px solid #16304a; }
.feed li:first-child { border-top: 0; }
.f-ic { width: 64px; height: 64px; border-radius: 50%; display: grid; place-items: center; background: #0f2c46; color: var(--primary); }
.f-ic .ic { width: 28px; height: 28px; }
.feed .k-tor .f-ic { background: #33290f; color: var(--gold); } .feed .k-tor strong { color: var(--gold); }
.feed .k-changed .f-ic { background: #3a1422; color: var(--danger); } .feed .k-changed strong { color: var(--danger); }
.feed .k-winner strong, .feed .k-contract strong, .feed .k-search strong { color: var(--primary); }
.feed .k-cancel .f-ic { background: #2a1b22; color: #fda4af; } .feed .k-cancel strong { color: #fda4af; }
.feed strong { display: flex; justify-content: space-between; gap: 8px; font-size: 17px; }
.feed strong small { color: #cbd5e1; font-weight: 400; white-space: nowrap; font-size: 14px; }
.feed a, .feed p { color: #dbe4ef; font-size: 15px; margin: 2px 0 0; display: block; }

/* ============ analysis ============ */
.an-head { display: grid; grid-template-columns: minmax(0, .95fr) minmax(0, 1fr); gap: 26px; align-items: center; margin: 18px auto 18px; }
.an-head .page-h { margin-top: 0; }
.gold-pill { display: inline-flex; gap: 10px; align-items: center; font-size: 20px; font-weight: 600; padding: 8px 22px; border-radius: 999px; border: 2px solid var(--gold); color: var(--gold); background: rgb(251 191 36 / 8%); box-shadow: 0 0 18px rgb(251 191 36 / 20%); letter-spacing: 0; }
.an-project { display: grid; grid-template-columns: 150px minmax(0, 1fr) auto; gap: 18px; align-items: center; padding: 16px; }
.an-project .thumb { aspect-ratio: 4 / 3; }
.an-project h2 { font-size: 19px; margin: 6px 0; line-height: 1.4; }
.an-project h2 a { color: var(--text); }
.an-meta { display: flex; flex-wrap: wrap; gap: 6px 22px; color: #dbe4ef; font-size: 14px; }
.an-meta span { display: inline-flex; gap: 8px; align-items: center; }
.an-actions { display: flex; gap: 10px; align-self: start; }
.kpi-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-bottom: 18px; }
.kpi { display: flex; gap: 26px; align-items: center; padding: 22px 26px; }
.kpi h2 { font-size: 24px; margin-bottom: 2px; }
.kpi p { font-size: 14.5px; }
.ring { --v: 0; --c1: #22d3ee; --c2: #67e8f9; width: 140px; height: 140px; border-radius: 50%; flex: none; display: grid; place-items: center; position: relative;
  background: radial-gradient(closest-side, #0b2036 70%, transparent 71% 100%), conic-gradient(var(--c1), var(--c2) calc(var(--v) * 1%), #16324d 0); box-shadow: 0 0 26px rgb(34 211 238 / 20%); }
.ring-orange { --c1: #fbbf24; --c2: #f97316; box-shadow: 0 0 26px rgb(251 191 36 / 18%); }
.ring b { font: 800 32px/1 var(--num); } .ring small { display: block; font-size: 13px; color: var(--muted); text-align: center; margin-top: 4px; }
.ring-orange b { color: #fdba74; }
.klist { list-style: none; padding: 0; margin: 10px 0 0; display: grid; gap: 6px; font-size: 15px; }
.klist li { display: flex; gap: 10px; align-items: center; }
.klist li::before { content: "✓"; width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; background: #34d399; color: #03281f; font-size: 13px; font-weight: 800; flex: none; }
.klist.amber li::before { content: "!"; background: none; border: 2px solid var(--gold); color: var(--gold); }
.k2-body { display: grid; grid-template-columns: auto 1fr; gap: 18px; align-items: center; margin-top: 8px; }
.k2-big { font-size: 15px; color: #dbe4ef; } .k2-big b { display: block; font: 800 36px/1.1 var(--num); color: var(--primary); }
.k2-note { border-left: 1px solid var(--border-2); padding-left: 16px; font-size: 14px; color: #cbd5e1; }
.an-grid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 18px; margin-bottom: 30px; align-items: start; }
.an-col { display: grid; gap: 18px; }
.an-grid .panel-head h2 { font-size: 21px; }
.sim-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.sim-list li { display: grid; grid-template-columns: 1fr auto; gap: 4px 12px; padding: 12px 14px; border-radius: 10px; border: 1px solid #1a3a57; background: rgb(8 26 44 / 60%); }
.sim-list a { color: var(--text); font-size: 14.5px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.sim-list a:hover { color: var(--primary); }
.sim-list .who-won { grid-column: 1; color: var(--muted); font-size: 13px; }
.sim-list .disc { grid-row: 1 / span 2; grid-column: 2; align-self: center; text-align: right; font: 700 18px var(--num); color: var(--primary); }
.sim-list .disc small { display: block; font: 400 12px var(--font); color: var(--muted); }
.sim-list.rank li { grid-template-columns: 34px 1fr auto; align-items: center; }
.sim-list .rk { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: #13304a; font: 700 14px var(--num); }
.share { display: grid; grid-template-columns: 180px 1fr; gap: 18px; align-items: center; margin-bottom: 18px; }
.pie { width: 180px; height: 180px; border-radius: 50%; display: grid; place-items: center; position: relative; }
.pie::after { content: ""; position: absolute; inset: 26%; border-radius: 50%; background: #0b2036; }
.pie > div { position: relative; z-index: 1; text-align: center; } .pie b { font: 800 26px/1 var(--num); display: block; } .pie small { color: var(--muted); font-size: 13px; }
.legend { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; font-size: 14px; }
.legend li { display: grid; grid-template-columns: 12px minmax(0, 1fr) auto auto; gap: 10px; align-items: center; }
.legend i { width: 12px; height: 12px; border-radius: 50%; }
.legend span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.legend b { font-family: var(--num); font-weight: 600; } .legend em { font-style: normal; color: var(--muted); font-family: var(--num); }
.sub-h { display: flex; gap: 12px; align-items: center; font-size: 20px; border-top: 1px solid #1a3653; padding-top: 16px; margin-bottom: 14px; flex-wrap: wrap; }
.tiny-pill { margin-left: auto; display: inline-flex; gap: 6px; align-items: center; font-size: 12px; font-weight: 500; padding: 3px 12px; border-radius: 999px; background: rgb(14 116 144 / 30%); color: #7dd3fc; }
.price-range { display: flex; justify-content: center; align-items: center; gap: 24px; padding: 16px; border-radius: 10px; border: 1px solid #1f3f5d; background: rgb(8 24 40 / 70%); }
.price-range b { font: 800 40px/1 var(--num); color: var(--primary); display: block; text-align: center; text-shadow: 0 0 16px rgb(34 211 238 / 35%); }
.price-range small { display: block; color: var(--primary-hover); text-align: center; font-size: 15px; }
.price-range > span { font-size: 30px; color: #cbd5e1; }
.price-track { position: relative; height: 16px; margin: 20px 0 8px; border-radius: 4px; background: repeating-linear-gradient(90deg, #2a4561 0 2px, transparent 2px 22px), #102a43; }
.price-track span { position: absolute; top: -4px; bottom: -4px; border-radius: 4px; background: rgb(45 212 191 / 50%); border: 1px solid var(--secondary); box-shadow: var(--glow); }
.price-legend { display: grid; grid-template-columns: 1fr 1fr 1fr; font-size: 13px; color: var(--muted); gap: 12px; }
.price-legend b { display: block; color: var(--text); font: 600 15px var(--num); }
.price-legend .mid, .price-legend .mid b { text-align: center; color: var(--primary); }
.price-legend .end { text-align: right; }
.info-note { display: flex; gap: 12px; align-items: flex-start; margin-top: 14px; font-size: 13px; color: #cbd5e1; }
.info-note .ic { color: var(--muted); flex: none; margin-top: 2px; }
.vsteps { list-style: none; padding: 0; margin: 0; display: grid; }
.vsteps li { display: grid; grid-template-columns: 36px minmax(0, 1fr) auto; gap: 14px; align-items: center; padding: 10px 0; position: relative; border-bottom: 1px solid #16304a; }
.vsteps li:last-child { border-bottom: 0; }
.vsteps li::before { content: ""; position: absolute; left: 17px; top: -12px; height: 24px; width: 2px; background: #2a4561; }
.vsteps li:first-child::before { display: none; }
.vsteps i { width: 36px; height: 36px; border-radius: 50%; border: 3px solid #4b6582; background: var(--bg); position: relative; z-index: 1; }
.vsteps .st-done i { background: #34d399; border-color: #34d399; }
.vsteps .is-current i { background: var(--bg); border: 4px solid var(--primary); box-shadow: 0 0 14px var(--primary); }
.vsteps .is-current strong { color: var(--primary); }
.vsteps .st-scheduled i { border-color: var(--gold); }
.vsteps .st-cancel i { background: var(--danger); border-color: var(--danger); }
.vsteps strong { font-size: 16px; }
.vsteps span { display: flex; gap: 10px; align-items: center; color: #dbe4ef; font-size: 14.5px; white-space: nowrap; }
.vsteps span::before { content: ""; width: 9px; height: 9px; border-radius: 50%; background: #64748b; }
.vsteps .is-current span::before, .vsteps .st-done span::before { background: var(--primary); }
.ag-tiles { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.ag-tile { padding: 12px; border-radius: 10px; border: 1px solid #1a3a57; background: rgb(8 26 44 / 60%); display: grid; gap: 6px; font-size: 13px; }
.ag-tile b { font: 700 20px var(--num); }
.ag-bar { display: grid; grid-template-columns: 1fr auto; gap: 8px; align-items: center; color: var(--muted); font: 12px var(--num); }
.ag-bar span { height: 8px; border-radius: 4px; background: #16324d; overflow: hidden; }
.ag-bar span i { display: block; height: 100%; background: linear-gradient(90deg, #22d3ee, #67e8f9); }
.consult { background: radial-gradient(circle at 90% 10%, rgb(34 211 238 / 14%), transparent 55%), linear-gradient(180deg, rgb(14 38 62 / 72%), rgb(10 29 49 / 82%)); }
.consult-row { display: flex; gap: 20px; align-items: flex-end; justify-content: space-between; flex-wrap: wrap; }
.consult-row .btn { min-width: 190px; }

/* ============ access ============ */
.access { position: relative; z-index: 2; background: radial-gradient(ellipse 45% 60% at 70% 20%, rgb(14 116 144 / 20%), transparent 70%); }
.access-in { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); gap: 20px 30px; padding-top: 28px; align-items: end; }
.access-copy { position: relative; z-index: 1; }
.access-h { font-size: clamp(40px, 4.4vw, 76px); font-weight: 800; line-height: 1.15; letter-spacing: -1px; white-space: nowrap; }
.access-sub { font-size: 24px; font-weight: 600; margin: 10px 0 12px; }
.trust-row { list-style: none; padding: 0; margin: 26px 0 10px; display: flex; gap: 28px; flex-wrap: wrap; }
.trust-row li { display: flex; gap: 14px; align-items: center; }
.tr-ic { width: 60px; height: 60px; border-radius: 50%; display: grid; place-items: center; background: rgb(14 56 84 / 70%); color: var(--primary); box-shadow: inset 0 0 0 1px rgb(34 211 238 / 25%); flex: none; }
.trust-row strong { display: block; color: var(--primary); font-size: 16px; } .trust-row small { color: #cbd5e1; font-size: 13.5px; }
.tiers { position: relative; z-index: 2; display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; align-items: stretch; margin-top: 150px; margin-bottom: -170px; }
.tier { display: flex; flex-direction: column; gap: 12px; padding: 20px; border-radius: 12px; border: 1px solid #2b4a68; background: linear-gradient(180deg, #0f2740, #0b1f33); box-shadow: 0 16px 40px rgb(0 0 0 / 35%); }
.tier-h { display: flex; gap: 16px; align-items: center; }
.avatar { width: 48px; height: 48px; display: grid; place-items: center; color: #dbe4ef; flex: none; }
.avatar .ic { width: 40px; height: 40px; fill: currentColor; stroke: none; }
.tier h2 { white-space: nowrap; flex-wrap: wrap; font-size: 22px; display: flex; gap: 12px; align-items: center; }
.free { font-size: 13px; font-weight: 600; padding: 2px 12px; border-radius: 999px; background: #3b5577; color: #e2e8f0; }
.free.on { background: #0e7490; color: #e0faff; }
.free.gold { background: none; border: 1.5px solid var(--gold); color: var(--gold); }
.tier-sub { margin: 2px 0 0; color: #cbd5e1; font-size: 16px; }
.tier-sub.gold { color: var(--gold); }
.tier-desc { color: #dbe4ef; font-size: 14px; }
.tchecks { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; flex: 1; align-content: start; font-size: 14.5px; }
.tchecks li { display: flex; gap: 12px; align-items: center; }
.tchecks .ic { color: #34d399; width: 24px; height: 24px; }
.tchecks.grey .ic { color: #dbe4ef; } .tchecks.gold .ic { color: var(--gold); }
.tier.is-member { border-color: var(--primary); box-shadow: 0 0 28px rgb(34 211 238 / 22%); background: linear-gradient(180deg, #0e3048, #0b2238); }
.tier.is-member h2, .tier.is-member .tier-sub { color: var(--primary); }
.tier.is-member .avatar { color: var(--primary); }
.tier.is-client { border-color: var(--gold); background: linear-gradient(180deg, #1f2a28, #14202a); box-shadow: 0 0 28px rgb(251 191 36 / 14%); }
.tier.is-client .avatar { color: var(--gold); }
.tier .btn-outline { border-color: var(--primary); color: var(--primary); }
.tier-note { text-align: center; font-size: 13px; color: #cbd5e1; margin: 0; }
.compare { position: relative; z-index: 1; padding-top: 70px; margin-bottom: 18px; }
.compare .tbl-wrap { margin-top: 96px; }
.cmp th:first-child { width: 32%; }
.cmp-h { display: flex; gap: 14px; align-items: center; font-size: 24px; margin-bottom: 16px; }
.cmp { width: 100%; border-collapse: collapse; font-size: 15px; }
.cmp th { padding: 12px 16px; font-weight: 500; background: #102a43; text-align: center; }
.cmp th:first-child { text-align: left; }
.cmp th small { font-size: 13px; }
.cmp .c-v { background: #17344f; } .cmp .c-m { background: #0e3a4d; } .cmp .c-c { background: #2a2a1c; color: var(--text); } .cmp .c-c small { color: var(--gold); }
.cmp td { padding: 10px 16px; border-bottom: 1px solid #16304a; text-align: center; color: #dbe4ef; }
.cmp td:first-child { text-align: left; display: flex; gap: 12px; align-items: center; }
.cmp td:nth-child(3) { background: rgb(14 116 144 / 10%); }
.cmp td .ic.ok { color: #34d399; margin-right: 8px; }
.cmp td .ic.no { color: #cbd5e1; }
.faq .faq-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.faq-card { display: flex; gap: 12px; align-items: center; padding: 16px 18px; border-radius: 12px; border: 1px solid #1f3f5d; background: rgb(8 26 44 / 70%); color: var(--text); }
.faq-card:hover { border-color: var(--primary); color: var(--text); }
.faq-card strong { font-size: 16px; } .faq-card p { color: #cbd5e1; font-size: 14px; margin: 4px 0 0; }
.faq-card > .ic { margin-left: auto; }

/* ============ market / agency ============ */
.market-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; margin-bottom: 12px; }
.market-grid .panel h2, .agency-grid .panel h2 { display: flex; gap: 10px; align-items: center; font-size: 19px; margin-bottom: 12px; }
.bar-rows { list-style: none; padding: 0; margin: 0; display: grid; gap: 4px; }
.bar-rows a { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(60px, 1fr) 100px;   /* a fixed value column: every bar starts and ends on the same line */ gap: 10px; align-items: center; color: var(--text); padding: 6px 0; font-size: 14px; }
.bar-rows a:hover .br-label { color: var(--primary); }
.br-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.br-track { height: 8px; border-radius: 4px; background: #16324d; overflow: hidden; }
.br-track span { display: block; height: 100%; background: linear-gradient(90deg, var(--primary), var(--secondary)); border-radius: 4px; }
.br-val { font-family: var(--num); text-align: right; white-space: nowrap; }
.br-val small { display: block; color: var(--muted); font-size: 12px; }
.span3 { grid-column: 1 / -1; }
.agency-grid { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 20px; align-items: start; margin-bottom: 30px; }
.h-bar { font-size: 20px; padding-left: 14px; border-left: 3px solid var(--primary); margin-bottom: 16px; }
.kv.rank > li { padding: 8px 0; }
.stat > .ic:not(.st-ic) { width: 60px; height: 60px; padding: 15px; }
.stat-row + .stat-row, section > .stat-row { margin: 18px 0; }

/* ============ modal + toast ============ */
.overlay { position: fixed; inset: 0; z-index: 50; background: rgb(3 10 20 / 75%); backdrop-filter: blur(4px); display: grid; place-items: center; padding: 16px; }
.modal { position: relative; width: min(460px, 100%); background: var(--surface) url(bg/hero-glow.svg) center / cover; border: 1px solid var(--border-2); border-radius: 18px; padding: 28px; box-shadow: var(--glow); }
.modal h2 { font-size: 24px; margin: 10px 0 6px; }
.modal-close { position: absolute; top: 12px; right: 12px; }
.form { display: grid; gap: 14px; margin-top: 16px; }
.field { display: grid; gap: 6px; font-size: 14px; }
.field input { background: var(--bg); border: 1px solid var(--border-2); border-radius: 10px; padding: 11px 12px; }
.form-error { color: var(--danger); margin: 0; }
.toast { position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); z-index: 60; background: var(--raised); border: 1px solid var(--primary); color: var(--text); padding: 10px 18px; border-radius: 12px; box-shadow: var(--glow); max-width: calc(100% - 32px); }

/* ============ responsive ============ */
.detail-main > *, .detail-head > *, .gated > *, .gated > [data-tabs] > *, .dh-body > *, .search-grid > *, .detail-grid > *, .track-grid > *, .home-grid > *, .an-grid > *, .kpi-row > *, .an-head > * { min-width: 0; }
@media (max-width: 1500px) {
  .pcard { grid-template-columns: 130px minmax(0, 1fr) 190px 150px 44px; }
  .pc-facts { flex-direction: column; align-items: flex-start; gap: 6px; }
  .pc-budget { border: 0; padding: 0; }
  .search-grid { grid-template-columns: 290px minmax(0, 1fr) 270px; }
  .pcard-search { grid-template-columns: 130px minmax(0, 1fr) 165px 44px; grid-template-areas: "media main facts save" "media main match save"; }
  .pcard-search .pc-when { display: none; }
  .nav { margin-left: 4%; }
}
@media (max-width: 1280px) {
  .hero-in { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); }
  .radar-block { grid-column: 1 / -1; grid-template-columns: 240px 1fr; }
  .radar-stats { grid-template-columns: repeat(3, 1fr); gap: 16px; }
  .radar-stats li + li { border-top: 0; }
  .search-grid { grid-template-columns: 280px minmax(0, 1fr); }
  .summary { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
  .summary > h2 { grid-column: 1 / -1; }
  .summary .sum-sec { margin: 0; padding: 0; border: 0; }
  .pcard { grid-template-columns: 120px minmax(0, 1fr) 170px 44px; }
  .pc-when { display: none; }
  .detail-grid, .track-grid { grid-template-columns: minmax(0, 1fr) 360px; }
  .fact-grid { grid-template-columns: repeat(2, 1fr); }
  .kpi-row, .an-grid { grid-template-columns: 1fr 1fr; }
  .an-col { grid-column: 1 / -1; grid-template-columns: 1fr 1fr; }
  .an-col .consult { grid-column: 1 / -1; }
  .tiers { margin-top: 40px; margin-bottom: 0; }
  .compare { padding-top: 22px; margin-top: 24px; }
  .compare .tbl-wrap { margin-top: 0; }
  .access-in { grid-template-columns: 1fr; }
  .track-tools { grid-template-columns: 1fr 1fr 1fr; }
  .track-tools .tsearch { grid-column: 1 / -1; }
}
@media (max-width: 1080px) {
  .nav-toggle { display: inline-grid; }
  .nav { display: none; position: absolute; top: 100%; left: 0; right: 0; flex-direction: column; background: var(--surface); border-bottom: 1px solid var(--border); padding: 8px 16px; margin: 0; }
  .nav.open { display: flex; }
  .nav a { padding: 12px 8px; } .nav a[aria-current="page"]::after { display: none; }
  .home-grid, .detail-grid, .track-grid, .an-head, .agency-grid { grid-template-columns: 1fr; }
  .kpi-row, .market-grid { grid-template-columns: 1fr; }
  .faq .faq-grid { grid-template-columns: 1fr 1fr; }
  .track-side { margin-top: 0; }
  .detail-head { grid-template-columns: 220px minmax(0, 1fr); }
  .feature-in { grid-template-columns: repeat(3, 1fr); } .feature-in .script-tag { display: none; }
}
@media (max-width: 760px) {
  body { font-size: 14.5px; }
  .wrap { width: calc(100% - 32px); }
  .brand-tag, .divider, .header-actions .link-btn { display: none; }
  .header-in { gap: 10px; min-height: 64px; }
  .wordmark { width: 96px; }
  .btn-signup { min-height: 38px; padding: 0 14px; }
  .hero-in { grid-template-columns: 1fr; padding-top: 26px; }
  .hero-map { grid-template-columns: 130px 1fr; }
  .radar-block { grid-template-columns: 1fr; } .radar-big { display: none; }
  .radar-stats { grid-template-columns: 1fr; gap: 0; }
  .searchbar { height: 54px; padding-left: 14px; }
  .sb-btn { padding: 0 16px; font-size: 0; gap: 0; }
  .search-top { grid-template-columns: 1fr; }
  .searchbar.wide { grid-column: 1; width: 100%; }
  .adv-link { display: none; }
  .pcard, .pcard-search, .pcards.compact .pcard { grid-template-columns: 88px minmax(0, 1fr) 40px; grid-template-areas: none; gap: 10px; padding: 12px; }
  .pcard-search .pc-media, .pcard-search .pc-main { grid-area: auto; }
  .pc-cat { display: none; }
  .pc-facts { grid-column: 2; grid-row: 2; flex-direction: row; flex-wrap: wrap; gap: 4px 14px; font-size: 13.5px; border: 0 !important; padding: 0 !important; }
  .pc-save { grid-column: 3; grid-row: 1; }
  .pc-title { font-size: 15.5px; }
  .pcard-search .pc-match { grid-area: auto; grid-column: 2; grid-row: 3; margin: 0; padding: 4px 10px; font-size: 13px; }
  .pcard-search .pc-save { grid-area: auto; grid-column: 3; grid-row: 1; }
  .pcard-search .pc-facts { grid-area: auto; grid-column: 2; grid-row: 2; }
  .pc-chips { display: none; }
  .search-grid { grid-template-columns: 1fr; }
  .filters { display: none; } .filters.open { display: block; }
  .filters-toggle { display: inline-flex; }
  .results-tools { flex-wrap: wrap; } .results-tools select { width: auto; flex: 1; }
  .summary { grid-template-columns: minmax(0, 1fr); }
  .detail-head { grid-template-columns: 1fr; }
  .dh-title-row { grid-template-columns: 1fr; }
  .dh-ids { grid-template-columns: 1fr 1fr; }
  .fact-grid, .stat-row, .tiers, .faq .faq-grid, .an-grid, .an-col, .mini-facts, .ag-tiles { grid-template-columns: minmax(0, 1fr); }
  .mini-facts > div + div { border-left: 0; }
  .timeline { grid-auto-flow: row; gap: 12px; }
  .timeline li { grid-template-columns: 32px 1fr; justify-items: start; text-align: left; column-gap: 14px; }
  .timeline li::before { display: none; }
  .timeline li i { grid-row: span 2; } .timeline strong { margin-top: 0; }
  .seg-tabs { overflow-x: auto; }
  .st-row { grid-template-columns: 110px 1fr; }
  .feature-in { grid-template-columns: 1fr; } .feature-in a { border-right: 0; }
  .day-strip { gap: 4px; } .day { min-height: 0; padding: 8px 2px; } .day b { font-size: 18px; } .day small { font-size: 11px; min-height: 0; }
  .cat-grid { grid-template-columns: 1fr; }
  .an-project { grid-template-columns: 1fr; }
  .kpi { flex-direction: column; align-items: flex-start; }
  .track-tools { grid-template-columns: 1fr 1fr; }
  .access-h { white-space: normal; }
  .mock-note { display: none; }
  .bar-title { font-size: 24px; }
  .stat small, .stat div { font-size: 16px; } .stat b { font-size: 30px; }
}

/* ============ SEO hub pages + footer link hub ============ */
.hub-head { margin-bottom: 8px; }
.hub-head .stat-row { margin: 18px 0 8px; }
.hub-grid { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 24px; align-items: start; margin: 18px auto 30px; }
.hub-grid > * { min-width: 0; }
.hub-side { display: grid; gap: 18px; align-content: start; }
.hub-grid.hub-only-links { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
.hub-links h2 { display: flex; gap: 12px; align-items: center; font-size: 19px; margin-bottom: 10px; }
.hub-links a { color: var(--text); } .hub-links a:hover { color: var(--primary); }
.footer-links { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; padding: 24px 0 18px; border-bottom: 1px solid #16304a; margin-bottom: 14px; }
.footer-links h2 { font-size: 14px; color: #cbd5e1; margin-bottom: 8px; }
.footer-links ul { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 6px 16px; }
.footer-links a { color: var(--muted); font-size: 13.5px; } .footer-links a:hover { color: var(--primary); }
@media (max-width: 1080px) { .hub-grid { grid-template-columns: 1fr; } }
@media (max-width: 760px) { .footer-links { grid-template-columns: 1fr; } }
/* faint divider between the three footer groups (user, 5 Oct); stacked on phones, so none there */
@media (min-width: 761px) { .footer-links > div + div { border-left: 1px solid rgb(148 163 184 / 14%); padding-left: 24px; } }

/* ============ category tile (replaces project photos) ============ */
.ctile { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
  aspect-ratio: 16 / 10; border-radius: 10px; background: #dbeafe; color: #1e3a8a; text-align: center; padding: 8px; }
.ctile .cat-ic { width: 42%; max-width: 64px; height: auto; aspect-ratio: 1; }
.ctile b { font-size: 13px; font-weight: 600; line-height: 1.25; }
.ctile.big { aspect-ratio: 6 / 5; border-radius: 12px; gap: 14px; }
.ctile.big .cat-ic { width: 40%; max-width: 130px; }
.ctile.big b { font-size: 19px; }
.ctile.t-construct { background: #dbeafe; color: #1e3a8a; } .ctile.t-supply { background: #e0e7ff; color: #3730a3; }
.ctile.t-consult { background: #ccfbf1; color: #0f766e; } .ctile.t-it { background: #cffafe; color: #0e7490; }
.ctile.t-facility { background: #ede9fe; color: #5b21b6; } .ctile.t-event { background: #ffedd5; color: #9a3412; }
.ctile.t-medical { background: #fce7f3; color: #9d174d; } .ctile.t-vehicle { background: #fef3c7; color: #92400e; }
.ctile.t-agri { background: #dcfce7; color: #166534; } .ctile.t-other { background: #e5e7eb; color: #374151; }
.pcards.compact .ctile b, .an-project .ctile b { display: none; }
.hub-banner { height: 220px; margin-top: 18px; border-radius: 16px; background: center / cover no-repeat;
  box-shadow: inset 0 -120px 90px -40px var(--bg); border: 1px solid #173654; }
@media (max-width: 760px) { .ctile b { font-size: 11px; } .ctile.big { aspect-ratio: 16 / 7; } .hub-banner { height: 130px; } }

/* ---- e-GP TOR detail sections (egp_detail), added 28 Sep 2026 ---- */
.fact-hi dd { color: var(--gold); font-weight: 700; }
.kd-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin: 6px 0 4px; }
.kd { background: rgb(8 24 40 / 60%); border: 1px solid var(--border); border-radius: 12px; padding: 10px 14px; }
.kd small { display: block; color: var(--muted); font-size: 13px; }
.kd b { font-size: 16px; font-family: var(--num); }
.kd .kd-txt { font-family: var(--font); font-size: 14px; font-weight: 500; }
.kd-hi { border-color: var(--primary); box-shadow: var(--glow); }
.countdown { margin: 12px 0; padding: 12px 14px; border-radius: 12px; text-align: center;
  background: linear-gradient(180deg, rgb(34 211 238 / 18%), rgb(34 211 238 / 6%)); border: 1px solid var(--primary); }
.countdown b { display: block; font-size: 24px; color: var(--primary); }
.countdown small { color: var(--muted); }
.countdown.is-past { border-color: var(--border-2); background: rgb(148 163 184 / 8%); }
.countdown.is-past b { color: var(--muted); font-size: 18px; }
.countdown.is-draft { border-color: var(--gold); background: rgb(251 191 36 / 8%); }
.countdown.is-draft b { color: var(--gold); font-size: 18px; }
.sum-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px 24px; margin-top: 8px; }
.sum-grid h4, .tab-body h4 { margin: 12px 0 4px; font-size: 15px; color: var(--primary); }
.sum-list { margin: 0; padding-left: 18px; } .sum-list li { margin: 3px 0; }
.ref { color: var(--faint); font-size: 12px; white-space: nowrap; }
.flag-box { margin-top: 12px; padding: 8px 14px 10px; border-radius: 12px; border: 1px solid rgb(251 191 36 / 40%); background: rgb(251 191 36 / 6%); }
.flag-box h4 { color: var(--gold) !important; }
.tab-body h3.mt { margin-top: 22px; }
.wbar, .pay-bar { display: flex; gap: 3px; margin: 10px 0; border-radius: 10px; overflow: hidden; }
.wbar > div, .pay-bar > div { padding: 8px 12px; font-size: 14px; color: #032530; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wbar > div:nth-child(1) { background: #fbbf24; } .wbar > div:nth-child(2) { background: #22d3ee; } .wbar > div:nth-child(n+3) { background: #a78bfa; }
.pay-bar .pb0 { background: #22d3ee; } .pay-bar .pb1 { background: #2dd4bf; } .pay-bar .pb2 { background: #fbbf24; } .pay-bar .pb3 { background: #a78bfa; }
.chk { list-style: none; padding-left: 0; } .chk li { margin: 5px 0; padding-left: 26px; position: relative; }
.chk li::before { content: ""; position: absolute; left: 2px; top: 5px; width: 14px; height: 14px; border: 2px solid var(--primary); border-radius: 4px; }
.more-box { margin-top: 10px; } .more-box summary { cursor: pointer; color: var(--primary); }
/* mock-only labels (TOR_DETAIL_MOCK=1): block letter + egp_detail column */
.mockmk { display: inline-block; min-width: 22px; margin-right: 6px; padding: 0 6px; border-radius: 6px; background: #f472b6; color: #3b0521;
  font: 700 13px/20px var(--num); text-align: center; vertical-align: middle; }
.mockcol { display: inline-block; margin: 3px 0 0; padding: 0 6px; border-radius: 4px; font: 11px/18px Consolas, monospace;
  color: #f9a8d4; background: rgb(244 114 182 / 12%); border: 1px dashed rgb(244 114 182 / 45%); }
@media (max-width: 760px) { .kd-grid, .sum-grid { grid-template-columns: 1fr; } }

.scap-logo-th { font: 800 26px/1.1 var(--font); letter-spacing: 0; }
.ai-warn { margin: 10px 0 14px; padding: 12px 16px; border-radius: 12px; border: 1px solid rgb(251 113 133 / 60%);
  background: rgb(251 113 133 / 10%); color: #fecdd3; font-size: 14px; line-height: 1.7; }
.ai-warn strong { display: block; color: #fb7185; font-size: 16px; margin-bottom: 2px; }
.ai-warn b { color: #fff; }
.ai-chip { display: inline-block; padding: 0 6px; border-radius: 4px; font: 700 11px/16px var(--num); color: #032530; background: #fb7185; vertical-align: middle; }

.ai-card { border: 1px solid rgb(251 113 133 / 65%); background: linear-gradient(180deg, rgb(251 113 133 / 14%), rgb(251 113 133 / 5%)); font-size: 14px; line-height: 1.7; color: #fecdd3; }
.ai-card p { margin: 0 0 8px; } .ai-card b { color: #fff; }
.ai-card-h { font-size: 18px; font-weight: 800; color: #fb7185; }
.ai-card-l { font-weight: 700; color: #fff; margin-bottom: 0 !important; }
.mismatch { margin: 0 0 6px; padding: 4px 8px; border-radius: 6px; font-size: 13px; color: #fde68a; background: rgb(251 191 36 / 12%); border: 1px solid rgb(251 191 36 / 45%); }

.scap-logo-img { height: 44px; width: auto; display: block; }

/* entry disclaimer */
.disc-lock, .disc-lock body { overflow: hidden; }
.disc-overlay { z-index: 1000; overflow-y: auto; }
/* The pop-up never outgrows the VISIBLE screen (dvh = minus the phone browser's bars): only the text box
   shrinks and scrolls, so the checkbox and both buttons always show (19 Oct 2026: on phones the
   accept button sat below the screen with the page locked). */
.disc-modal { max-width: 760px; width: calc(100% - 32px); text-align: left; display: flex; flex-direction: column;
  max-height: calc(100vh - 32px); max-height: calc(100dvh - 32px); }
.disc-modal > * { flex: none; }
.disc-modal h2 { font-size: 22px; margin-bottom: 10px; }
.disc-modal > .disc-body { flex: 0 1 auto; min-height: 80px; }
.disc-body { max-height: 520px; overflow-y: auto; overscroll-behavior: contain; padding-right: 8px; font-size: 14.5px; line-height: 1.75; color: #dbe4ef; }
@media (max-width: 760px) {
  .disc-overlay { padding: 10px; }
  .disc-modal { width: 100%; padding: 18px 16px; max-height: calc(100vh - 20px); max-height: calc(100dvh - 20px); }
  .disc-modal h2 { font-size: 18px; margin: 0 0 8px; }
  .disc-body { font-size: 14px; line-height: 1.65; }
  .disc-check { margin: 10px 0; font-size: 14px; }
  .disc-actions { flex-wrap: nowrap; }
  .disc-actions .btn { flex: 1; min-width: 0; padding: 0 10px; }
}
.disc-body ol { padding-left: 20px; } .disc-body li { margin: 6px 0; } .disc-body b { color: #fff; }
.disc-check { display: flex; gap: 10px; align-items: flex-start; margin: 14px 0 12px; font-weight: 600; cursor: pointer; }
.disc-check input { width: 18px; height: 18px; margin-top: 3px; accent-color: #22d3ee; }
.disc-actions { display: flex; gap: 10px; justify-content: flex-end; flex-wrap: wrap; }
.disc-actions .btn[disabled] { opacity: .45; cursor: not-allowed; }
.disc-body:focus { outline: none; }

/* price section: budget -> ราคากลาง -> winning price */
.price-row { display: grid; grid-template-columns: 1fr 28px 1fr 28px 1fr; align-items: stretch; gap: 8px; }
.price-row.two { grid-template-columns: 1fr 28px 1fr; }
.pbox { background: rgb(8 24 40 / 60%); border: 1px solid var(--border); border-radius: 14px; padding: 12px 16px; }
.pbox small { display: block; color: var(--muted); font-size: 13px; }
.pbox b { display: block; font: 700 21px/1.35 var(--num); margin: 2px 0 4px; }
.pbox b span { font: 500 14px var(--font); color: var(--muted); }
.pbox em { font-style: normal; font-size: 13px; color: var(--muted); }
.pbox-ref b { color: var(--gold); }
.pbox-won { border-color: var(--green); box-shadow: 0 0 22px rgb(52 211 153 / 18%); }
.pbox-won b { color: var(--green); }
.pbox-wait b { font: 600 17px/1.5 var(--font); color: var(--muted); }
.parrow { display: flex; align-items: center; justify-content: center; color: var(--faint); }
@media (max-width: 760px) { .price-row, .price-row.two { grid-template-columns: 1fr; } .parrow { transform: rotate(90deg); height: 18px; } }

/* radar blips: pop as the sweep's bright edge passes, then fade to a dim trace (period = .sweep's 6s) */
.blip { position: absolute; width: var(--s, 7px); height: var(--s, 7px); margin: calc(var(--s, 7px) / -2);
  border-radius: 50%; background: #67e8f9; opacity: .3; animation: blip 6s linear infinite; z-index: 1; }
.blip::after { content: ""; position: absolute; inset: -2px; border-radius: 50%; border: 1.5px solid #67e8f9;
  opacity: 0; animation: blip-ring 6s linear infinite; animation-delay: inherit; }
@keyframes blip {
  0%   { transform: scale(1.9); opacity: 1; box-shadow: 0 0 14px 5px rgb(103 232 249 / 75%); }
  6%   { transform: scale(1.25); opacity: .95; box-shadow: 0 0 10px 3px rgb(103 232 249 / 55%); }
  30%  { transform: scale(1); opacity: .6; box-shadow: 0 0 6px 1px rgb(103 232 249 / 30%); }
  100% { transform: scale(1); opacity: .28; box-shadow: none; }
}
@keyframes blip-ring { 0% { transform: scale(1); opacity: .9; } 14% { transform: scale(3.4); opacity: 0; } 100% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .blip, .blip::after { animation: none; } .blip { opacity: .7; } }

/* review build: comment box */
.rv-fab { position: fixed; right: 20px; bottom: 20px; z-index: 900; padding: 12px 18px; border: 0; border-radius: 999px; cursor: pointer;
  font: 700 15px var(--font); color: #3b0521; background: #f472b6; box-shadow: 0 6px 24px rgb(0 0 0 / 45%); }
.rv-panel { position: fixed; right: 20px; bottom: 76px; z-index: 900; width: min(380px, calc(100vw - 40px)); max-height: 72vh; overflow-y: auto;
  padding: 14px; border-radius: 14px; background: #0b1f33; border: 1px solid #f472b6; box-shadow: 0 10px 40px rgb(0 0 0 / 55%); }
.rv-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }
.rv-form input, .rv-form textarea { width: 100%; margin-bottom: 8px; padding: 8px 10px; border-radius: 8px; border: 1px solid var(--border-2); background: #071426; color: var(--text); font: inherit; }
.rv-msg { min-height: 1.2em; font-size: 13px; color: var(--muted); margin: 6px 0 0; }
.rv-all { display: flex; gap: 8px; align-items: center; font-size: 13px; color: var(--muted); margin: 8px 0; }
.rv-list { list-style: none; padding: 0; margin: 0; } .rv-list li { padding: 8px 0; border-top: 1px solid var(--border); }
.rv-meta { font-size: 12px; color: #f9a8d4; } .rv-list p { margin: 2px 0 0; white-space: pre-wrap; } .rv-empty { color: var(--muted); font-size: 13px; }

.dh-sub { color: var(--muted); font-weight: 400; }

/* status pills driven by e-GP dates */
.spill-closed { background: #cbd5e1; color: #1e293b; box-shadow: none; }
.spill-today { background: #fbbf24; color: #3b2601; box-shadow: 0 0 18px rgb(251 191 36 / 45%); }
.spill-draft { background: #fde68a; color: #3b2601; box-shadow: none; }
.spill-new { background: #a5f3fc; color: #083344; }

.client-lock { display: flex; gap: 16px; align-items: center; flex-wrap: wrap; margin-top: 16px; padding: 18px 20px; border-radius: 14px;
  border: 1px solid rgb(251 191 36 / 45%); background: linear-gradient(180deg, rgb(251 191 36 / 10%), rgb(251 191 36 / 3%)); }
.client-lock > div { flex: 1; min-width: 220px; } .client-lock h3 { font-size: 17px; margin-bottom: 2px; }
.cl-ic { color: var(--gold); }
.inst-cl { margin: 0 0 6px; font-weight: 700; color: var(--primary); }

/* client teaser: tab names visible, placeholder blurred, lock on top */
.client-teaser { margin-top: 16px; }
.ct-tabs { opacity: .92; }
.ct-body { position: relative; border-radius: 14px; overflow: hidden; border: 1px solid var(--border); background: rgb(8 24 40 / 55%); min-height: 330px; }
.ct-blur { padding: 22px 24px; filter: blur(5px); opacity: .75; user-select: none; }
.sk-h { width: 34%; height: 18px; border-radius: 6px; background: #3b5b7a; margin-bottom: 16px; }
.sk-l { height: 11px; border-radius: 6px; background: #2c4a67; margin: 10px 0; }
.sk-l.w90 { width: 90%; } .sk-l.w82 { width: 82%; } .sk-l.w75 { width: 75%; } .sk-l.w70 { width: 70%; } .sk-l.w60 { width: 60%; }
.sk-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin: 18px 0; }
.sk-box { height: 64px; border-radius: 12px; background: #1d3a57; border: 1px solid #2c4a67; }
.sk-row { display: grid; grid-template-columns: .5fr 1fr 1.2fr 2fr; gap: 12px; margin: 12px 0; }
.sk-row span { height: 12px; border-radius: 6px; background: #2c4a67; }
.ct-overlay { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
  text-align: center; padding: 20px; background: radial-gradient(circle at center, rgb(7 20 38 / 78%) 0 45%, rgb(7 20 38 / 35%) 100%); }
.ct-overlay h3 { font-size: 19px; margin-top: 4px; } .ct-overlay .btn { margin-top: 8px; }

/* subcategory illustrations (8:5, object-fit cover); the subtype name stays HTML text */
.thumb.pic { position: relative; display: block; overflow: hidden; aspect-ratio: 16 / 10; border-radius: 8px; background: #dbe7f3; }
.thumb.pic img { width: 100%; height: 100%; object-fit: cover; display: block; }
.thumb.pic b { position: absolute; left: 6px; bottom: 6px; max-width: calc(100% - 12px); padding: 2px 8px; border-radius: 999px;
  font-size: 11.5px; font-weight: 600; line-height: 1.5; color: #0f1f3d; background: rgb(255 255 255 / 88%);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.thumb.pic.big { aspect-ratio: 6 / 5; border-radius: 12px; }
.thumb.pic.big b { font-size: 14px; left: 10px; bottom: 10px; padding: 3px 12px; }

/* caption BELOW the illustration (review 28 Sep: the overlay pill hid too much and never lined up) */
.thumb.pic { aspect-ratio: auto; overflow: visible; background: none; border-radius: 0; }
.thumb.pic img { aspect-ratio: 16 / 10; height: auto; border-radius: 8px; background: #dbe7f3; }
.thumb.pic b { position: static; display: block; max-width: 100%; margin-top: 5px; padding: 0; border-radius: 0; background: none;
  font-size: 12px; font-weight: 600; line-height: 1.35; color: var(--ink-muted); text-align: left;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.thumb.pic.big img { aspect-ratio: 6 / 5; border-radius: 12px; }
.thumb.pic.big b { font-size: 14px; margin-top: 8px; color: var(--muted); }
.pcards.compact .thumb.pic b { font-size: 11px; }

.thumb.pic b { text-align: center; }
/* 2 Oct: a long one-line caption set the picture's width (150px vs 185px, overlapping the title).
   The picture keeps its column; a long caption wraps under it instead. */
.pc-media .thumb { min-width: 0; }
.pc-media .thumb.pic b { white-space: normal; overflow-wrap: break-word; }

/* top-align every card column (review 28 Sep) */
.pcard { align-items: start; }
.pcard-search .pc-facts { justify-content: flex-start; }

/* favourite filter sets (client) */
.fav-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; margin: 4px 0 14px; padding: 12px 14px; border-radius: 14px;
  border: 1px solid rgb(251 191 36 / 40%); background: linear-gradient(180deg, rgb(251 191 36 / 9%), rgb(251 191 36 / 2%)); }
.fav-h { font-weight: 700; color: var(--gold); white-space: nowrap; }
.fav-chips { display: flex; flex-wrap: wrap; gap: 8px; flex: 1; min-width: 0; }
.fav-chip { display: inline-flex; align-items: stretch; border-radius: 999px; border: 1px solid #3b5b7a; background: rgb(9 27 45 / 75%); overflow: hidden; }
.fav-chip button { background: none; border: 0; color: #e2e8f0; font: inherit; font-size: 14px; padding: 6px 6px 6px 14px; cursor: pointer; }
.fav-chip button small { color: #94a3b8; font-family: var(--num); margin-left: 2px; }
.fav-chip .fav-edit { padding: 6px 12px 6px 6px; color: #94a3b8; }
.fav-chip .fav-edit:hover { color: var(--primary); }
.fav-chip.is-on { background: linear-gradient(180deg, #fcd34d, #fbbf24); border-color: transparent; }
.fav-chip.is-on button, .fav-chip.is-on button small, .fav-chip.is-on .fav-edit { color: #2b1d00; font-weight: 700; }
.fav-add { background: none; border: 1px dashed rgb(251 191 36 / 60%); color: var(--gold); border-radius: 999px; padding: 6px 14px; font: inherit; font-size: 14px; cursor: pointer; }
.fav-add:hover { border-style: solid; }
.fav-locked .muted { flex: 1; min-width: 220px; font-size: 14px; }
.fav-hit { display: inline-block; margin: 0 6px 4px 0; padding: 1px 10px; border-radius: 999px; font-size: 12.5px; font-weight: 700; color: #7a4f00; background: #fef3c7; }
.fav-modal { width: min(720px, 100%); max-height: calc(100vh - 32px); display: flex; flex-direction: column; padding: 24px; }
.fav-form { overflow-y: auto; display: grid; gap: 16px; margin: 12px -4px 0; padding: 0 4px 4px; }
.fav-row { display: grid; gap: 8px; }
.fav-row > b { font-size: 15px; }
.fav-row input:not([type]), .fav-row select, .fav-row input[inputmode] { width: 100%; min-height: 40px; padding: 0 12px; border-radius: 10px; border: 1px solid var(--border-2); background: var(--bg-2); color: var(--text); font: inherit; }
.tgs { display: flex; flex-wrap: wrap; gap: 6px; }
.tg { border: 1px solid #3b5b7a; background: rgb(9 27 45 / 75%); color: #cbd5e1; border-radius: 999px; padding: 5px 12px; font: inherit; font-size: 13.5px; cursor: pointer; }
.tg[aria-pressed="true"] { background: var(--primary); border-color: var(--primary); color: #032530; font-weight: 700; }
.fav-more summary { cursor: pointer; color: var(--primary); font-size: 14px; margin: 2px 0 8px; }
.fav-add-row { display: flex; gap: 8px; } .fav-add-row .btn { min-height: 40px; }
.fav-vals { display: flex; flex-wrap: wrap; gap: 6px; } .fav-vals:empty { display: none; }
.fav-val { display: inline-flex; align-items: center; gap: 4px; padding: 3px 4px 3px 12px; border-radius: 999px; background: rgb(34 211 238 / 14%); border: 1px solid rgb(34 211 238 / 45%); font-size: 13.5px; }
.fav-val button { background: none; border: 0; color: #94a3b8; font-size: 16px; line-height: 1; padding: 0 6px; cursor: pointer; }
.fav-flags { gap: 10px; } .fav-flags .check { font-size: 15px; }
.fav-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--border); }
.fav-preview { flex: 1; min-width: 200px; font-size: 14px; color: #cbd5e1; } .fav-preview b { color: var(--gold); font-family: var(--num); }
.link-btn.danger { color: var(--danger); }
@media (max-width: 640px) { .fav-modal { padding: 18px 16px; } .fav-foot .btn { flex: 1; } }

/* winner panel: public, above the price section (30 Sep) */
.win-panel { border-color: rgb(52 211 153 / 45%); background: linear-gradient(180deg, rgb(52 211 153 / 10%), rgb(52 211 153 / 2%)); }
.win-row { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 22px; padding: 12px 0; border-top: 1px solid var(--border); }
.win-row:first-of-type { border-top: 0; padding-top: 4px; }
.win-ic { color: var(--gold); display: grid; place-items: center; width: 48px; height: 48px; border-radius: 12px; background: rgb(251 191 36 / 14%); flex: none; }
.win-name { flex: 1; min-width: 220px; display: grid; gap: 2px; }
.win-name b { font-size: 20px; line-height: 1.4; }
.win-name small { color: var(--muted, #94a3b8); }
.win-num { display: grid; gap: 2px; align-content: start; padding-left: 18px; border-left: 1px solid var(--border-2); }  /* same cell as .win-fact: divider + left aligned (user, 7 Oct 2026) */
.win-num small { color: #94a3b8; font-size: 13px; }
.win-num b { font-size: 20px; font-family: var(--num); white-space: nowrap; }
.win-num b span { font-size: 13px; font-weight: 400; }
.win-disc b { color: var(--green); }
.pdisc { color: var(--green); font-weight: 700; }

/* home / category / agency cards (2 Oct): province, budget and update date stack in ONE right-hand
   column, so the project name gets the freed width and may run to three lines.
   (The search page's cards, .pcard-search, and the grid / compact views keep their own layouts.) */
@media (min-width: 761px) {
  .pcards:not(.grid):not(.compact) > .pcard:not(.pcard-search) { grid-template-columns: 140px minmax(0, 1fr) 190px 44px; grid-template-rows: auto 1fr; column-gap: 18px; row-gap: 6px; }
  .pcards:not(.grid):not(.compact) > .pcard:not(.pcard-search) > .pc-media { grid-column: 1; grid-row: 1 / 3; }
  .pcards:not(.grid):not(.compact) > .pcard:not(.pcard-search) > .pc-main { grid-column: 2; grid-row: 1 / 3; }
  .pcards:not(.grid):not(.compact) > .pcard:not(.pcard-search) > .pc-facts { grid-column: 3; grid-row: 1; flex-direction: column; align-items: flex-start; gap: 6px; border-left: 1px solid var(--card-line); padding-left: 16px; }
  .pcards:not(.grid):not(.compact) > .pcard:not(.pcard-search) > .pc-facts .pc-budget { border: 0; padding: 0; }
  .pcards:not(.grid):not(.compact) > .pcard:not(.pcard-search) > .pc-when { grid-column: 3; grid-row: 2; display: flex; align-self: start; }
  .pcards:not(.grid):not(.compact) > .pcard:not(.pcard-search) > .pc-save { grid-column: 4; grid-row: 1 / 3; }
  .pcards:not(.grid):not(.compact) > .pcard:not(.pcard-search) .pc-title { -webkit-line-clamp: 3; }
}

/* Dropdown lists in the site's look (2 Oct: the browser's own list was square, tight and light).
   Browsers with customisable selects (Chrome / Edge 135+) get a rounded dark panel with roomy rows;
   older ones keep their own list, but at least in dark colours. */
select { color-scheme: dark; }
@supports (appearance: base-select) {
  :is(select, .sel select, .track-tools > select), :is(select, .sel select, .track-tools > select)::picker(select) { appearance: base-select; }
  select::picker-icon { display: none; }            /* the chevron is already the select's background image */
  select::picker(select) { margin: 6px 0; padding: 6px; border: 1px solid #2a5a80; border-radius: 12px; background: #0c2238; color: #e2e8f0;
    box-shadow: 0 18px 44px rgb(0 0 0 / 55%); max-height: 340px; overflow-y: auto; scrollbar-width: thin; scrollbar-color: #22d3ee #0c2238; }
  select option { padding: 9px 14px; border-radius: 8px; font-size: 15px; line-height: 1.4; background: transparent; color: inherit; cursor: pointer; }
  select option:hover, select option:focus-visible { background: rgb(34 211 238 / 14%); outline: 0; }
  select option:checked { background: rgb(34 211 238 / 22%); color: #67e8f9; font-weight: 600; }
  select option::checkmark { display: none; }
}

/* search cards (2 Oct): like the home cards, province, budget, date and status stack in ONE right-hand
   column so the project name gets the width and up to three lines. Grid view keeps its own layout. */
@media (min-width: 761px) {
  .pcards:not(.grid) > .pcard-search { grid-template-columns: 140px minmax(0, 1fr) 215px 44px; grid-template-rows: auto auto 1fr;
    grid-template-areas: "media main facts save" "media main when save" "media main match save"; row-gap: 6px; }
  .pcards:not(.grid) > .pcard-search > .pc-facts { align-self: start; gap: 6px; }
  .pcards:not(.grid) > .pcard-search > .pc-when { display: flex; align-self: start; padding-left: 18px; }
  .pcards:not(.grid) > .pcard-search > .pc-match { align-self: start; justify-self: start; margin: 4px 0 0 18px; padding: 5px 11px; font-size: 13px; white-space: nowrap; }
  .pcards:not(.grid) > .pcard-search .pc-title { -webkit-line-clamp: 3; }
}

/* project header (2 Oct): the tags sit right under the agency name, inside the title column, so they
   wrap onto a second row instead of waiting below the tall facts column */
.dh-title-row .tag-row { margin-top: 14px; }

/* winner panel (2 Oct): one trophy; the announce date and contract status fill the row */
.win-fact { display: grid; gap: 2px; align-content: start; padding-left: 18px; border-left: 1px solid var(--border-2); }
.win-fact small { color: #94a3b8; font-size: 13px; }
.win-fact b { font-size: 16px; font-weight: 600; white-space: nowrap; }
.win-fact b.ok { color: var(--green); } .win-fact b.wait { color: var(--gold); }
.win-fact em { font-style: normal; color: #cbd5e1; font-size: 13px; }
.src-steps { margin: 4px 0 12px; padding-left: 20px; color: var(--muted); font-size: 14px; line-height: 1.7; }

/* a whole card opens its project (2 Oct): the title link is stretched over the card; the bookmark
   stays above it and keeps working */
.pcard { position: relative; cursor: pointer; }
.pcard .pc-title::after { content: ""; position: absolute; inset: 0; border-radius: 12px; }
.pcard .pc-save { position: relative; z-index: 2; }
.pcard:hover .pc-title { color: #0369a1; }

/* filter panel (2 Oct): the invitation-date range, one date per row, and the "new" chip on cards */
.range.dates { grid-template-columns: 1fr; gap: 8px; }
.range.dates label { display: grid; grid-template-columns: 52px minmax(0, 1fr); gap: 8px; align-items: center; color: var(--muted); font-size: 14px; }
.range.dates input { color-scheme: dark; padding: 10px 12px; font: inherit; }
.f-group > .check { margin-top: 2px; font-size: 15px; }
.pc-chips .chip-new { background: #c7f5dc; color: #047857; font-weight: 600; }

/* numbered pages under the results (2 Oct): « ‹ 1 2 [3] 4 5 … 81 › » + per-page choice */
.pager { display: grid; gap: 12px; justify-items: center; margin: 18px 0 8px; }
.pager:empty { display: none; }
.pg-info { color: var(--muted); font-size: 14px; }
.pg-nums { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; align-items: center; }
.pg-btn { min-width: 40px; height: 40px; padding: 0 12px; border-radius: 10px; border: 1px solid #1f3f5d; background: rgb(9 27 45 / 80%); color: #dbe4ef; font: inherit; font-size: 15px; cursor: pointer; }
.pg-btn.num { font-family: var(--num); }
.pg-btn:hover:not(:disabled) { border-color: var(--primary); color: var(--primary); }
.pg-btn[aria-current="page"] { background: linear-gradient(180deg, #45e3f6, #18c8e5); color: #032530; border-color: transparent; font-weight: 700; cursor: default; }
.pg-btn:disabled { opacity: .35; cursor: default; }
.pg-gap { color: var(--muted); padding: 0 4px; }
.pg-size { color: var(--muted); font-size: 14px; display: inline-flex; gap: 8px; align-items: center; }
.pg-size select { padding: 7px 30px 7px 12px; border-radius: 10px; }
.pg-note { color: var(--muted); font-size: 14px; text-align: center; }

/* client bids (ยื่นซอง, 5 Oct 2026): the mark on the project page + the result pill on the tracking tab */
.btn-tender[aria-pressed="true"] { border-color: var(--green); color: var(--green); background: rgb(52 211 153 / 10%); }
.dpill.won { background: rgb(52 211 153 / 16%); color: #34d399; }
.dpill.lost { background: rgb(148 163 184 / 14%); color: #94a3b8; }
.bid-who { display: block; margin-top: 6px; color: var(--muted); font-size: 12.5px; line-height: 1.5; max-width: 260px; white-space: normal; }
.btn-tender[aria-pressed="true"] .ic { fill: none; }   /* the check stays visible inside the circle */
.feed li.muted { display: block; }   /* the empty-state line is text, not an icon + text row (5 Oct) */
.chg-note { display: flex; gap: 6px; align-items: flex-start; margin-top: 8px; color: #fb7185; font-size: 12.5px; line-height: 1.5; max-width: 190px; }
.chg-note::before { content: ""; width: 7px; height: 7px; margin-top: 6px; border-radius: 50%; background: currentColor; flex: none; }

/* access page (6 Oct): the three tier cards sit in the header beside the heading, not hanging over the
   comparison table, so the table's panel starts at its own heading */
@media (min-width: 1281px) {
  .access-in { align-items: start; padding-bottom: 28px; grid-template-columns: minmax(0, .8fr) minmax(0, 1.7fr); }
  .access-h { font-size: clamp(40px, 3.3vw, 60px); }
  .access-sub { font-size: 20px; }
  .tier h2 { white-space: nowrap; }
  .tiers { margin-top: 0; margin-bottom: 0; }
  .compare { padding-top: 24px; }
  .compare .tbl-wrap { margin-top: 0; }
}
.cmp td small.muted { font-size: 13px; }
/* tracking (6 Oct): bulk bar for ticked rows; every notice has a delete button */
.bulk-bar { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin: 0 0 12px; padding: 10px 14px; border: 1px solid var(--border-2); border-radius: 12px; background: rgb(34 211 238 / 6%); }
.bulk-bar > span { margin-right: auto; color: #dbe4ef; }
.bulk-bar .btn[hidden] { display: none; }
.feed li { grid-template-columns: 64px 1fr auto; }
.f-del { align-self: start; color: var(--muted); }
.f-del:hover { color: var(--danger); }
/* calendar: TODAY is a white ring, never a legend colour; results/contract ring = its legend's cyan */
.cal-grid button.today { border-color: #e2e8f0; color: #fff; box-shadow: none; background: rgb(255 255 255 / 8%); }
.cal-grid button.ring-winner, .cal-grid button.ring-contract { border-color: var(--primary); }
.ev-today { background: transparent; box-shadow: inset 0 0 0 2px #e2e8f0; }
/* โอกาสวันนี้ (6 Oct): tiles are links; three short project lists */
a.stat { color: inherit; } a.stat:hover { border-color: var(--primary); color: inherit; }
.opp-list { list-style: none; margin: 0; padding: 0; }
.opp-list li + li { border-top: 1px solid #16304a; }
.opp-list a { display: grid; gap: 3px; padding: 10px 0; color: var(--text); }
.opp-list a:hover .ol-t { color: var(--primary); }
.opp-list .ol-t { font-weight: 600; line-height: 1.45; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.opp-list .ol-m { color: var(--muted); font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.opp-list .ol-f { display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: center; font-size: 13.5px; color: #cbd5e1; }
.opp-list .ol-f b { font-family: var(--num); color: var(--primary); }
.opp-list .ol-f em { font-style: normal; color: var(--muted); }
.opp-list .ol-f em.stag { font-size: 12.5px; padding: 1px 8px; }
.opp-list li.muted { padding: 12px 0; }
/* แดชบอร์ดของฉัน (clients, 6 Oct) */
.dash .stat-row { margin: 18px 0; }
.dash-grid { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 18px; margin-bottom: 18px; }
.dash .panel { margin-bottom: 18px; }
.dash-tbl td small { display: block; margin-top: 3px; }
.dash-tbl .num { text-align: right; white-space: nowrap; font-family: var(--num); }
.dash-tbl td.why { font-size: 13.5px; color: #fcd34d; } .dash-tbl td.why.under { color: #fda4af; }
.dash-top { list-style: none; padding: 0; margin: 0 0 12px; }
.dash-top li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 12px; padding: 8px 0; border-top: 1px solid #16304a; }
.dash-top li:first-child { border-top: 0; } .dash-top b { font-family: var(--num); color: var(--primary); text-align: right; }
.dash-top small { grid-column: 1 / -1; color: var(--muted); font-size: 12.5px; }
.dash-sub { margin-top: 14px; }
.retry-list { list-style: none; padding: 0; margin: 10px 0 0; display: grid; gap: 12px; }
.retry-list li { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 16px; padding: 14px; border: 1px solid var(--border-2); border-radius: 12px; background: rgb(8 24 40 / 55%); }
.rt-now { display: grid; gap: 6px; color: var(--text); } .rt-now .stag { justify-self: start; } .rt-now small { color: var(--muted); }
.rt-then p { margin: 0 0 6px; font-size: 14px; } .rt-why { color: #fcd34d; } .rt-tip { color: var(--primary); }
.dash-pick { margin: 0 0 14px; } .dash-pick select { margin-left: 8px; padding: 6px 10px; border-radius: 8px; background: var(--bg); color: var(--text); border: 1px solid var(--border-2); }
@media (max-width: 900px) { .dash-grid, .retry-list li { grid-template-columns: 1fr; } }
.dash h2 { display: flex; gap: 10px; align-items: center; }
/* My Dashboard round 2 (6 Oct): monthly chart, three columns, status + gap columns */
.mchart { width: 100%; height: auto; display: block; margin: 6px 0 4px; }
.mchart .grid { stroke: #1a3653; stroke-width: 1; }
.mchart .ytick { fill: var(--muted); font: 11px var(--num); text-anchor: end; }
.mchart .xtick { fill: var(--muted); font-size: 11px; text-anchor: middle; }
.mchart .xfy { fill: #cbd5e1; font-size: 11px; }
.mchart .fyline { stroke: #2b4a6b; stroke-dasharray: 3 3; }
.mchart .won { fill: var(--primary); } .mchart .other { fill: #64748b; }
.mchart .hit { fill: transparent; } .mchart .mbar:hover .hit { fill: rgb(255 255 255 / 5%); }
.chart-legend { display: flex; gap: 16px; font-size: 13px; color: #cbd5e1; }
.chart-legend span { display: inline-flex; gap: 6px; align-items: center; }
.chart-legend i { width: 12px; height: 12px; border-radius: 3px; display: inline-block; }
.lg-won { background: var(--primary); } .lg-other { background: #64748b; }
.dash-cols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; }
.dash-cols h3 { font-size: 15px; color: #cbd5e1; margin: 4px 0 6px; }
.dash-tbl a { color: var(--text); } .dash-tbl a:hover { color: var(--primary); }
.dash-tbl td.gap { color: #fcd34d; } .dash-tbl td.gap.under { color: #93c5fd; }
.dash-tbl .stag { white-space: nowrap; font-size: 12.5px; }
.rt-won { color: var(--green); } .rt-gap { color: #fcd34d; }
@media (max-width: 900px) { .dash-cols { grid-template-columns: 1fr; } }
/* My Dashboard round 3 (6 Oct): reading surfaces are white (cards, tiles); wins are the theme green */
.dash-h { display: flex; gap: 10px; align-items: center; font-size: 22px; margin: 26px 0 6px; }
.dash-h small { font-size: 14px; font-weight: 400; }
.dash-hint { margin: 0 0 10px; }
.wcard { background: linear-gradient(180deg, #ffffff, #f1f5f9); color: var(--ink); border-radius: 14px; padding: 18px 20px; box-shadow: 0 8px 26px rgb(0 0 0 / 22%); margin: 14px 0; }
.wcard h2, .wcard h3 { color: var(--ink); display: flex; gap: 8px; align-items: center; }
.wcard h2 .ic { color: #0e7490; }
.wc-head { display: flex; flex-wrap: wrap; gap: 10px 20px; align-items: center; justify-content: space-between; }
.wc-note { color: var(--ink-muted); font-size: 13px; margin: 6px 0 0; }
.wcard .chart-legend { color: #334155; }
.wcard .mchart .grid { stroke: #e2e8f0; } .wcard .mchart .ytick, .wcard .mchart .xtick { fill: #64748b; }
.wcard .mchart .xfy { fill: #334155; } .wcard .mchart .fyline { stroke: #cbd5e1; }
.wcard .mchart .won, .wcard .lg-won { fill: #10b981; background: #10b981; }
.wcard .mchart .other, .wcard .lg-other { fill: #cbd5e1; background: #cbd5e1; }
.wcard .mchart .mbar:hover .hit { fill: rgb(15 31 61 / 5%); }
.dash .dash-cols { gap: 16px; margin-top: 8px; }
.wc-table { margin: 0; padding: 14px 0 6px; display: flex; flex-direction: column; }
.wc-table h3 { padding: 0 18px 8px; font-size: 16px; justify-content: space-between; }
.wc-table h3 small { color: var(--ink-muted); font-weight: 400; font-size: 12.5px; }
.wc-scroll { max-height: 340px; overflow: auto; }
.wtbl { width: 100%; border-collapse: collapse; font-size: 14px; }
.wtbl th { position: sticky; top: 0; background: #f1f5f9; color: #475569; font-weight: 600; text-align: left; padding: 8px 18px; font-size: 12.5px; }
.wtbl td { padding: 8px 18px; border-top: 1px solid #e2e8f0; color: var(--ink); vertical-align: top; }
.wtbl .num { text-align: right; white-space: nowrap; font-family: var(--num); }
.wtbl td:first-child { width: 60%; }
.wc-scroll::-webkit-scrollbar { width: 8px; } .wc-scroll::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 8px; }
.dtiles { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 12px; }
.dtile { display: grid; grid-template-columns: minmax(0, 1fr) minmax(220px, 300px); gap: 18px; align-items: start; background: linear-gradient(180deg, #ffffff, #f1f5f9); color: var(--ink); border-radius: 12px; padding: 14px 18px; box-shadow: 0 8px 26px rgb(0 0 0 / 22%); }
.dtile.empty { display: block; color: var(--ink-muted); }
.dt-main { display: grid; gap: 6px; justify-items: start; }
.dt-title { color: var(--ink); font-weight: 600; line-height: 1.5; }
a.dt-title:hover { color: #0e7490; }
.dt-main small { color: var(--ink-muted); }
.dt-facts { display: grid; gap: 8px; border-left: 1px solid var(--card-line); padding-left: 16px; }
.dt-facts span { display: grid; gap: 1px; }
.dt-facts small { color: var(--ink-muted); font-size: 12.5px; }
.dt-facts b { font-family: var(--num); color: var(--ink); font-size: 15px; }
.dt-facts b em { font-style: normal; font-weight: 500; color: var(--ink-muted); font-size: 13px; }
.dt-facts b.ok { color: #059669; } .dt-facts b.tip { color: #0e7490; }
.dt-facts b.down { color: #b45309; } .dt-facts b.up { color: #475569; }
.dpager { display: flex; gap: 10px; align-items: center; justify-content: center; margin: 12px 0 0; color: #cbd5e1; font-size: 14px; }
.dpager button[disabled] { opacity: .4; cursor: default; }
@media (max-width: 760px) { .dtile { grid-template-columns: 1fr; } .dt-facts { border-left: 0; padding-left: 0; border-top: 1px solid var(--card-line); padding-top: 10px; } }
.dtile[hidden] { display: none; }
/* My Dashboard round 4 + site-wide tile hover (6 Oct): picture | text (status at the bottom) | figures in two columns;
   a tile that opens a page is clickable all over and lifts slightly under the pointer */
.dtile { position: relative; grid-template-columns: 150px minmax(0, 1fr) minmax(300px, 460px); transition: transform .15s ease, box-shadow .15s ease; }
.dt-pic .thumb { width: 100%; }
.dt-pic .thumb b { font-size: 11px; }
.dt-main .stag { margin-top: 4px; }
.dt-facts.two { grid-template-columns: 1fr 1fr; gap: 16px; }
.dt-facts.two > div { display: grid; gap: 8px; align-content: start; }
.dtile.is-link .dt-title::after { content: ""; position: absolute; inset: 0; border-radius: 12px; }
.dtile.is-link:hover, .pcard:hover { transform: translateY(-2px); box-shadow: 0 14px 34px rgb(0 0 0 / 30%), 0 0 0 1px rgb(34 211 238 / 35%); }
.pcard { transition: transform .15s ease, box-shadow .15s ease; }
.dtile.is-link:hover .dt-title { color: #0369a1; }
.wc-head > span:empty { flex: 1; }
@media (max-width: 900px) { .dtile { grid-template-columns: 110px minmax(0, 1fr); } .dt-facts { grid-column: 1 / -1; border-left: 0; padding-left: 0; border-top: 1px solid var(--card-line); padding-top: 10px; } }
@media (prefers-reduced-motion: reduce) { .dtile, .pcard { transition: none; } .dtile.is-link:hover, .pcard:hover { transform: none; } }
/* My Dashboard round 5 (6 Oct): HTML chart (real font sizes, unit, hover pop-out, click = pop-up), FY table beside it;
   tiles ENLARGE slightly under the pointer (site-wide) */
.mc-card { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 24px; align-items: start; }
.mc-unit { font-size: 12.5px; color: var(--ink-muted); }
.mc { display: grid; grid-template-columns: 30px minmax(0, 1fr); height: 250px; margin: 10px 0 34px; }
.mc-y { position: relative; }
.mc-y span { position: absolute; right: 8px; transform: translateY(50%); font: 12px var(--num); color: #64748b; }
.mc-plot { position: relative; display: flex; align-items: flex-end; gap: 4px; border-bottom: 1px solid #cbd5e1; }
.mc-grid { position: absolute; left: 0; right: 0; border-top: 1px solid #e2e8f0; }
.mc-col { position: relative; flex: 1 1 0; height: 100%; display: flex; align-items: flex-end; justify-content: center; border: 0; background: none; padding: 0; cursor: pointer; }
.mc-col[disabled] { cursor: default; }
.mc-col.fy::before { content: ""; position: absolute; left: -3px; top: 0; bottom: -30px; border-left: 1px dashed #cbd5e1; }
.mc-bar { width: min(100%, 30px); display: flex; flex-direction: column; gap: 2px; transition: transform .15s ease, filter .15s ease; transform-origin: bottom; }
.mc-won { background: #10b981; border-radius: 3px; min-height: 2px; }
.mc-other { background: #cbd5e1; border-radius: 3px; min-height: 2px; }
.mc-col:not([disabled]):hover .mc-bar, .mc-col:focus-visible .mc-bar { transform: scale(1.12); filter: brightness(1.05) drop-shadow(0 4px 8px rgb(15 31 61 / 25%)); }
.mc-tip { position: absolute; bottom: calc(100% + 6px); left: 50%; transform: translateX(-50%); display: none; z-index: 5; min-width: 150px; padding: 8px 10px; border-radius: 8px; background: #0f1f3d; color: #fff; font-size: 12.5px; line-height: 1.5; text-align: left; box-shadow: 0 8px 20px rgb(0 0 0 / 30%); pointer-events: none; }
.mc-tip b { display: block; } .mc-tip small { display: block; color: #93c5fd; margin-top: 2px; }
.mc-col:not([disabled]):hover .mc-tip, .mc-col:focus-visible .mc-tip { display: block; bottom: auto; top: 0; transform: translate(-50%, -105%); }
.mc-x { position: absolute; top: calc(100% + 4px); left: 50%; transform: translateX(-50%); font-size: 12px; color: #64748b; white-space: nowrap; }
.mc-fy { position: absolute; top: calc(100% + 18px); left: -2px; font-size: 12px; font-weight: 600; color: #334155; white-space: nowrap; }
.mc-fyt { margin-top: 30px; font-size: 13.5px; } .mc-fyt td, .mc-fyt th { padding: 8px 10px; }
.dash-pick-row { cursor: pointer; } .dash-pick-row:hover td, .dash-pick-row:focus-visible td { background: #ecfeff; }
.dash-modal .modal { max-width: 860px; width: min(860px, 100% - 32px); max-height: 85vh; overflow: auto; text-align: left; }
.dm-list { list-style: none; padding: 0; margin: 10px 0 0; display: grid; gap: 10px; }
.dm-list li { display: grid; grid-template-columns: minmax(0, 1fr) 260px; gap: 14px; padding: 12px 14px; border-radius: 10px; background: linear-gradient(180deg, #ffffff, #f1f5f9); color: var(--ink); }
.dm-list li p { margin: 6px 0 2px; font-weight: 600; } .dm-list li a { color: var(--ink); } .dm-list li a:hover { color: #0369a1; }
.dm-list li small { color: var(--ink-muted); }
.dm-f { display: grid; gap: 6px; border-left: 1px solid var(--card-line); padding-left: 12px; }
.dm-f span { display: grid; } .dm-f b { font-family: var(--num); } .dm-f b.ok { color: #059669; }
.dm-list li.muted { display: block; }
.dtile.is-link:hover, .pcard:hover { transform: scale(1.012); z-index: 2; }
@media (max-width: 1100px) { .mc-card { grid-template-columns: 1fr; } .mc-fyt { margin-top: 0; } }
@media (max-width: 760px) { .dm-list li { grid-template-columns: 1fr; } .dm-f { border-left: 0; padding-left: 0; } .mc-x { font-size: 10px; } }
/* e-GP's own status words (6 Oct): the tag is e-GP's word; the deadline is a separate note beside it */
.due { display: inline-block; margin: 4px 0 0 8px; padding: 2px 10px; border-radius: 6px; font-size: 13px; font-weight: 600; vertical-align: middle; white-space: nowrap; }
.due-open { background: #d1fae5; color: #065f46; }
.due-today { background: #fef3c7; color: #92400e; }
.due-past { background: #e2e8f0; color: #475569; }
.pc-stat { display: flex !important; flex-wrap: wrap; gap: 4px 6px; align-items: center; white-space: normal; max-width: 240px; }
.pc-stat .stag, .pc-match, .dt-main .stag, .dm-list .stag { white-space: normal; line-height: 1.4; }
.pc-stat .due { margin-left: 0; }
.st-big + .due { margin: 6px 0 0; }
.opp-list .due { margin-left: 0; }

/* My Dashboard round 6 (7 Oct): chart | FY table split by a full-height divider, both headers on one row,
   the table as tall as the chart; numbered pages on paged lists */
.mc-card { grid-template-columns: minmax(0, 1fr) 360px; gap: 0; align-items: stretch; }
.mc-left { padding-right: 24px; min-width: 0; }
.mc-right { padding-left: 24px; border-left: 1px solid #e2e8f0; display: flex; flex-direction: column; }
.mc-card .wc-head { min-height: 28px; }
.mc-fyt { margin: 10px 0 34px; flex: 1; height: 250px; }
.mc-fyt td, .mc-fyt th { padding: 6px 10px; vertical-align: middle; }
.mc-fyt tfoot td { border-top: 2px solid #cbd5e1; font-weight: 700; }
.mc-note { grid-column: 1 / -1; margin: 0; padding-top: 10px; border-top: 1px solid #e2e8f0; }
@media (max-width: 1100px) { .mc-card { grid-template-columns: 1fr; } .mc-left { padding-right: 0; }
  .mc-right { padding-left: 0; border-left: 0; border-top: 1px solid #e2e8f0; padding-top: 14px; } .mc-fyt { height: auto; margin-bottom: 10px; } }
.dpager { flex-direction: column; gap: 8px; }
.dpager .pg-info { color: #cbd5e1; margin: 0; }
.dm-list li.dm-sec { display: block; padding: 6px 2px 0; background: none; color: #cbd5e1; font-weight: 600; font-size: 14px; }

/* ---- 7 Oct 2026 round 2 ---- */
/* ความสนใจของฉัน in the filter column, right under the ตัวกรอง header */
.fav-side { flex-direction: column; align-items: stretch; margin: 14px 0 2px; }
.fav-side .fav-chips { flex-direction: column; }
.fav-side .fav-chip { justify-content: space-between; }
.fav-side .fav-chip button:first-child { flex: 1; text-align: left; }
.fav-side .fav-add { align-self: flex-start; }
.fav-side.fav-locked .btn { align-self: flex-start; }
/* multi-select dropdowns (province, method, status) */
.msel { position: relative; }
.msel-btn { width: 100%; min-height: 48px; font: inherit; font-size: 16px; cursor: pointer; text-align: left; padding-right: 40px;
  background: rgb(8 24 40 / 70%) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23e2e8f0' stroke-width='2'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") right 14px center / 18px no-repeat; }
.msel-btn span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.msel.has-v .msel-btn { border-color: var(--primary); }
.msel-pop { position: absolute; z-index: 30; left: 0; right: 0; top: calc(100% + 6px); background: var(--surface); border: 1px solid #22476a; border-radius: 12px; padding: 10px; box-shadow: 0 16px 36px rgb(0 0 0 / 45%); display: grid; gap: 8px; }
.msel-pop[hidden] { display: none; }
.msel-q { width: 100%; padding: 8px 12px; border-radius: 8px; border: 1px solid #22476a; background: rgb(8 24 40 / 70%); color: var(--text); font: inherit; font-size: 15px; }
.msel-list { max-height: 280px; overflow: auto; display: grid; gap: 4px; padding-right: 4px; }
.msel-list .check { font-size: 15px; padding: 5px 6px; border-radius: 6px; gap: 10px; }
.msel-list .check:hover { background: rgb(34 211 238 / 8%); }
.msel-list .check input { width: 20px; height: 20px; }
.msel-list label[hidden] { display: none; }
.msel-foot { display: flex; justify-content: space-between; align-items: center; border-top: 1px solid #1a3653; padding-top: 8px; }
/* โครงการที่ติดตาม: white tiles under a header row that sorts */
.track-list { margin-top: 6px; }
.tt-head, .ttile { display: grid; grid-template-columns: 30px 110px minmax(0, 1fr) 140px 110px 150px 36px; gap: 14px; align-items: center; }
.tt-head { padding: 4px 16px 10px; color: #cbd5e1; font-size: 14.5px; }
.tt-head .tt-h-main { grid-column: span 2; display: flex; gap: 8px; align-items: center; }
.tt-head button { display: inline-flex; gap: 6px; align-items: center; background: none; border: 0; padding: 4px 0; color: inherit; font: inherit; cursor: pointer; text-align: left; }
.tt-head button:hover, .tt-head button.on { color: var(--primary); }
.tt-head button i { width: 10px; height: 10px; opacity: .45; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10' fill='%2394a3b8'%3E%3Cpath d='M5 0 9 4H1zM5 10 1 6h8z'/%3E%3C/svg%3E") center / contain no-repeat; }
.tt-head button[data-dir="asc"] i { opacity: 1; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10' fill='%2322d3ee'%3E%3Cpath d='M5 1 9 7H1z'/%3E%3C/svg%3E"); }
.tt-head button[data-dir="desc"] i { opacity: 1; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10' fill='%2322d3ee'%3E%3Cpath d='M5 9 1 3h8z'/%3E%3C/svg%3E"); }
.tt-head .center { text-align: center; }
.ttiles { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.ttile { background: linear-gradient(180deg, #ffffff, #f1f5f9); color: var(--ink); border-radius: 12px; padding: 12px 16px; box-shadow: 0 8px 26px rgb(0 0 0 / 22%); transition: transform .15s ease, box-shadow .15s ease; }
.ttile.is-link { cursor: pointer; }
.ttile.is-link:hover { transform: scale(1.012); z-index: 2; box-shadow: 0 14px 34px rgb(0 0 0 / 30%), 0 0 0 1px rgb(34 211 238 / 35%); }
.ttile.empty { display: block; color: var(--ink-muted); text-align: center; }
.ttile input[type=checkbox], .tt-head input[type=checkbox] { appearance: none; -webkit-appearance: none; width: 22px; height: 22px; border: 1.5px solid #94a3b8; border-radius: 5px; margin: 0; cursor: pointer; background: #fff; }
.ttile input[type=checkbox]:checked, .tt-head input[type=checkbox]:checked { background: var(--primary) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23032530' stroke-width='3.2'%3E%3Cpath d='m5 12 5 5 9-10'/%3E%3C/svg%3E") center / 16px no-repeat; border-color: var(--primary); }
.tt-head input[type=checkbox] { background: transparent; border-color: #cbd5e1; }
.tt-pic .thumb { border-radius: 8px; }
.tt-pic .thumb b { font-size: 11px; }   /* caption = work type, as on the search cards (15 Oct 2026) */
.tt-main { display: grid; gap: 6px; min-width: 0; }
.ttile .t-title { color: var(--ink); font-weight: 600; line-height: 1.45; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.ttile.is-link:hover .t-title { color: #0369a1; }
.ttile .t-meta { display: flex; flex-wrap: wrap; gap: 8px; font-size: 13px; }
.ttile .t-meta span { display: inline-flex; gap: 6px; align-items: center; padding: 1px 10px; border-radius: 6px; background: #e2e8f0; color: #334155; }
.ttile .t-meta span.plain { background: none; padding: 0; color: var(--ink-muted); }
.tt-ag { display: flex; gap: 6px; align-items: center; font-size: 13.5px; color: var(--ink-muted); }
.tt-money { font-family: var(--num); font-weight: 600; white-space: nowrap; }
.tt-when { font-size: 14px; white-space: nowrap; } .tt-when small { display: block; color: var(--ink-muted); }
.tt-stat { display: grid; gap: 4px; justify-items: start; }
.tt-stat .stag { white-space: normal; line-height: 1.4; }
.ttile .chg-note, .ttile .bid-who { font-size: 12.5px; color: #be123c; }
.ttile .bid-who { color: var(--ink-muted); }
.ttile .icon-btn { color: #475569; }
.ttile .row-menu { color: var(--text); }
@media (max-width: 1100px) {
  .tt-head { display: none; }
  .ttile { grid-template-columns: 30px 100px minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr) 36px; grid-template-areas: "cb pic main main main menu" ". pic money when stat ."; }
  .ttile .cb { grid-area: cb; } .ttile .tt-pic { grid-area: pic; } .ttile .tt-main { grid-area: main; } .ttile .menu-wrap { grid-area: menu; }
  .ttile .tt-money { grid-area: money; } .ttile .tt-when { grid-area: when; } .ttile .tt-stat { grid-area: stat; }
}
@media (max-width: 640px) { .ttile { grid-template-columns: 30px minmax(0, 1fr) 36px; grid-template-areas: "cb main menu" ". money money" ". when when" ". stat stat"; } .ttile .tt-pic { display: none; } }
/* every clickable tile pops out under the pointer, like the project tiles (user, 7 Oct 2026) */
.day, .cat-tile, a.stat, .faq-card { transition: transform .15s ease, box-shadow .15s ease; }
.day:hover, .cat-tile:hover, a.stat:hover, .faq-card:hover { transform: scale(1.05); z-index: 2; position: relative; box-shadow: 0 12px 28px rgb(0 0 0 / 30%), 0 0 0 1px rgb(34 211 238 / 35%); }
.cat-tile:hover { box-shadow: 0 0 0 2px var(--primary), 0 12px 28px rgb(0 0 0 / 30%); }
@media (prefers-reduced-motion: reduce) { .ttile, .day, .cat-tile, a.stat, .faq-card { transition: none; } .ttile.is-link:hover, .day:hover, .cat-tile:hover, a.stat:hover, .faq-card:hover { transform: none; } }
/* 7 Oct round 3: status tag + deadline tag side by side in the card's status cell */
.pcard-search .pc-mw { grid-area: match; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-left: 16px; }
.pcard-search .pc-mw .pc-match { margin-left: 0; }
.pc-mw .due { margin: 0; }
@media (min-width: 761px) {
  .pcards:not(.grid) > .pcard-search > .pc-mw { align-self: start; margin: 4px 0 0 18px; }
  .pcards:not(.grid) > .pcard-search .pc-mw .pc-match { padding: 5px 11px; font-size: 13px; white-space: nowrap; }
}
@media (max-width: 760px) { .pcard-search .pc-mw { grid-area: auto; grid-column: 2; grid-row: 3; margin: 0; } .pcard-search .pc-mw .pc-match { padding: 4px 10px; font-size: 13px; } }
.pcards.grid .pc-mw { grid-column: 1 / -1; margin-left: 0; }
/* date boxes: the site's own calendar (Thai months, Buddhist year, dd/mm/yyyy), same look as the dropdowns */
.dp-row { display: grid; grid-template-columns: 52px minmax(0, 1fr); gap: 8px; align-items: center; color: var(--muted); font-size: 14px; }
.dpick { position: relative; }
.dp-btn { width: 100%; display: flex; gap: 10px; align-items: center; background: rgb(8 24 40 / 70%); border: 1px solid #22476a; border-radius: var(--r-ctl); padding: 10px 12px; color: var(--muted); font: inherit; font-size: 15px; cursor: pointer; text-align: left; }
.dp-btn:hover { border-color: var(--primary); }
.dpick.has-v .dp-btn { color: var(--text); border-color: var(--primary); }
.dp-btn [data-dp-text] { font-family: var(--num); }
.dp-pop { position: absolute; z-index: 30; left: 0; top: calc(100% + 6px); width: 280px; background: var(--surface); border: 1px solid #22476a; border-radius: 12px; padding: 12px; box-shadow: 0 16px 36px rgb(0 0 0 / 45%); }
.dp-pop[hidden] { display: none; }
.dp-nav { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }
.dp-nav b { font-size: 15px; color: var(--text); }
.dp-nav .icon-btn { color: var(--primary); font-size: 20px; width: 32px; height: 32px; }
.dp-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; text-align: center; }
.dp-grid .dow { color: #94a3b8; font-size: 12.5px; padding: 4px 0; }
.dp-grid button { aspect-ratio: 1; border: 1px solid transparent; border-radius: 8px; background: none; color: var(--text); font: 500 14px var(--num); cursor: pointer; }
.dp-grid button:hover { background: rgb(34 211 238 / 12%); color: var(--primary); }
.dp-grid button.today { border-color: var(--primary); color: var(--primary); }
.dp-grid button.on { background: linear-gradient(180deg, #45e3f6, #18c8e5); color: #032530; font-weight: 700; }
.dp-foot { display: flex; justify-content: space-between; border-top: 1px solid #1a3653; margin-top: 8px; padding-top: 8px; }
/* 8 Oct review: the day strip / bid lists roll at midnight (o2.js dayRoll); a day past the data reads "รออัปเดต" */
.day[hidden], .opp-list li[hidden] { display: none; }
.day.is-wait b { color: var(--muted); }
.day.is-wait.is-today b { color: var(--gold); opacity: .7; }
/* โอกาสวันนี้: the three lists keep a fixed height and scroll inside, so a busy day does not stretch the page */
.market-grid .opp-list { max-height: 430px; overflow-y: auto; padding-right: 8px; scrollbar-width: thin; scrollbar-color: #2b4a68 transparent; }
/* access page: the three trust points stack, one per line */
.trust-row { flex-direction: column; gap: 16px; }
/* comparison table: each tier's header takes its card's colours; the client column is gold, crown on top */
.cmp th.c-v { background: linear-gradient(180deg, #17344f, #0f2740); color: #e2e8f0; box-shadow: inset 0 3px 0 #2b4a68; }
.cmp th.c-m { background: linear-gradient(180deg, #0e4258, #0b2a40); color: var(--primary); box-shadow: inset 0 3px 0 var(--primary); }
.cmp th.c-m small { color: var(--primary); }
.cmp th.c-c { background: linear-gradient(180deg, rgb(251 191 36 / 30%), rgb(120 80 10 / 30%)); color: var(--gold); font-weight: 700; box-shadow: inset 0 3px 0 var(--gold); }
.cmp th.c-c .crown { display: block; margin: 0 auto 2px; width: 26px; height: 26px; fill: var(--gold); stroke: none; filter: drop-shadow(0 0 6px rgb(251 191 36 / 45%)); }
.cmp td:nth-child(4) { background: rgb(251 191 36 / 7%); }
.cmp td:nth-child(4) .ic.ok { color: var(--gold); }
/* FAQ cards: text starts at the top of every card, the arrow stays centred */
.faq-card { align-items: flex-start; }
.faq-card > .ic { align-self: center; }
.tier.is-client { background: linear-gradient(180deg, rgb(251 191 36 / 18%), rgb(120 80 10 / 14%) 45%, #14202a); box-shadow: 0 0 32px rgb(251 191 36 / 22%); }
.tier.is-client h2 { color: var(--gold); }
/* 8 Oct: สิทธิ์การใช้งาน moved to the right with sign-in / sign-up; the phone menu keeps a copy (.nav-m) */
.nav .nav-m { display: none; }
.header-actions .link-btn[aria-current="page"] { color: var(--primary); font-weight: 700; }
@media (max-width: 1080px) { .nav.open .nav-m { display: block; } .header-actions .hide-m { display: none; } }
/* locked แดชบอร์ดของฉัน for visitors and members: a blurred chart placeholder under the lock */
.dash-lock { margin: 18px 0 28px; min-height: 460px; }
.sk-bars { display: flex; align-items: flex-end; gap: 10px; height: 150px; margin: 6px 0 22px; padding-bottom: 4px; border-bottom: 1px solid #2c4a67; }
.sk-bars span { flex: 1; border-radius: 6px 6px 0 0; background: linear-gradient(180deg, #2c6f8a, #1d3a57); }
/* 8 Oct: the countdown leads with the bid date + time; the day count is the small line */
.countdown .cd-time { display: block; font: 600 17px/1.4 var(--num); color: var(--primary); margin-bottom: 2px; }
.countdown .cd-time[hidden] { display: none; }
/* 8 Oct: on the project header the deadline tag takes the status pill's shape and size (.spill) */
.dh-top .due { margin: 0 0 0 10px; padding: 5px 18px; border-radius: 999px; font-size: 15px; font-weight: 700; line-height: normal; }
/* โอกาสวันนี้ LIVE (8 Oct): filters on the left (the search page's panel), the page's tiles/lists/bars on the right */
.search-grid.opps-grid { grid-template-columns: 300px minmax(0, 1fr); }
.opps > * + * { margin-top: 18px; }
.opps .results-head { margin-bottom: 0; }
.opp-cols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.opp-cols .panel h2 { display: flex; gap: 10px; align-items: center; font-size: 18px; margin-bottom: 12px; }
.opp-cols .opp-list { max-height: 430px; overflow-y: auto; padding-right: 8px; scrollbar-width: thin; scrollbar-color: #2b4a68 transparent; }
.opps .opp-list .due { margin: 0; }
@media (max-width: 1280px) { .opp-cols { grid-template-columns: 1fr 1fr; } }
@media (max-width: 1080px) { .search-grid.opps-grid { grid-template-columns: 1fr; } }
@media (max-width: 760px) { .opp-cols, .opps .stat-row { grid-template-columns: 1fr; } }
/* phones (8 Oct): the filter button stays, under the search bar -- it was hidden with no replacement, so the
   filter panel (folded away on phones) could not be opened on the search page or โอกาสวันนี้ */
@media (max-width: 1080px) { .search-top .adv-link { display: inline-flex; grid-column: 1; justify-self: start; font-size: 15px; padding: 4px 0; } }
/* โอกาสวันนี้ (9 Oct): page title like the other tabs, no search bar; the filter button only on phones */
.opps-top { padding-top: 26px; }
.opps-top .lead { margin-bottom: 14px; }
.opps-top .opps-filter-btn { display: none; }
@media (max-width: 1080px) { .opps-top .opps-filter-btn { display: inline-flex; margin-bottom: 10px; } }
/* โอกาสวันนี้ round 3 (9 Oct): title at the same height as the other tabs; filter panel and tiles start on one line;
   no bars, so the three lists run tall */
.opps-top { padding-top: 0; }
.opps > * + * { margin-top: 0; }
.opps > * { margin-bottom: 18px; }
.opps > .active-chips:empty { display: none; }
.opps .stat { cursor: default; }
.opps .stat:hover { border-color: var(--border); }
.opp-cols .opp-list { max-height: max(560px, calc(100vh - 330px)); }
.acct h1 .grad { display: inline; }
[data-opp-window] { white-space: nowrap; }
/* โอกาสวันนี้ (9 Oct): each of the three lists framed in a theme colour -- new = green, within 3 days = cyan,
   today = gold (the same gold as today's tile on the home day strip) */
#opp-opened { border-width: 2px; border-color: rgb(52 211 153 / 70%); box-shadow: 0 0 22px rgb(52 211 153 / 12%); }
#opp-soon   { border-width: 2px; border-color: rgb(34 211 238 / 70%); box-shadow: 0 0 22px rgb(34 211 238 / 12%); }
#opp-today  { border-width: 2px; border-color: rgb(251 191 36 / 75%); box-shadow: 0 0 22px rgb(251 191 36 / 14%); }
#opp-opened h2 .ic { color: var(--green); }
#opp-soon h2 .ic { color: var(--primary); }
#opp-today h2 .ic { color: var(--gold); }
/* ...and the tile above each list wears the same colour: frame, icon, bold label and figure (9 Oct) */
.opps .stat[data-opp-stat="opened"], #opp-opened { --oc: 52 211 153; }
.opps .stat[data-opp-stat="soon"], #opp-soon { --oc: 34 211 238; }
.opps .stat[data-opp-stat="due_today"], #opp-today { --oc: 251 191 36; }
.opps .stat[data-opp-stat], .opps .stat[data-opp-stat]:hover { border: 2px solid rgb(var(--oc) / 70%); box-shadow: 0 0 22px rgb(var(--oc) / 12%); }
.opps .stat[data-opp-stat] > .ic { background: rgb(var(--oc) / 14%); color: rgb(var(--oc)); }
.opps .stat[data-opp-stat] small, .opps .stat[data-opp-stat] b { color: rgb(var(--oc)); }
.opps .stat[data-opp-stat] small { font-weight: 700; }
.opp-cols > .panel h2 { color: rgb(var(--oc)); }
/* tiles: the baht figure on its own line under the project count; label, count and figure start at the top (9 Oct) */
.opps .stat[data-opp-stat] { align-items: flex-start; }
.opps .stat-v { display: block; margin-top: 2px; }
/* list items: the budget takes the list's colour instead of the site blue */
.opp-cols > .panel .ol-f b { color: rgb(var(--oc)); }
/* โอกาสวันนี้ (9 Oct): opps gradient fill -- each tile and list washed in its own colour at the top, fading to the
   page navy, like the gold client card on สิทธิ์การใช้งาน */
.opps .stat[data-opp-stat], .opp-cols > .panel {
  background: linear-gradient(180deg, rgb(var(--oc) / 16%) 0%, rgb(var(--oc) / 5%) 45%, rgb(10 29 49 / 88%) 100%), #0c2036;
}
/* "ดูทั้งหมด" sits on the heading's line, in the list's colour (9 Oct) */
.opp-cols .panel-head { flex-wrap: wrap; row-gap: 6px; }
.opp-cols .panel-head h2 { margin: 0; }
.opp-cols .panel-head .more { color: rgb(var(--oc)); font-weight: 600; white-space: nowrap; line-height: 1; }
.opp-cols .panel-head .more:hover { filter: brightness(1.15); }
.opp-cols .panel-head .more[hidden] { display: none; }

/* ---- 15 Oct 2026 review round ---- */
/* search card: the left keeps the project's flags (method + keywords); the right column keeps status + deadline,
   side by side when the column is wide enough (user, 15 Oct 2026, round 2) */
.pc-tags { display: flex; flex-wrap: wrap; gap: 6px 8px; align-items: center; margin-top: 6px; }
.pc-tags:empty { display: none; }
@media (min-width: 1200px) {
  .pcards:not(.grid) > .pcard-search { grid-template-columns: 140px minmax(0, 1fr) 300px 44px; }
  .pcards:not(.grid) > .pcard-search > .pc-mw { flex-wrap: nowrap; }
}
.pcard-search .pc-mw .due { padding: 4px 10px; font-size: 13px; line-height: 1.4; }
.pc-tags .pc-kw { background: #e2e8f0; color: #334155; border-radius: 8px; padding: 2px 12px; font-size: 13px; }
.pc-tags .chip-new { background: #c7f5dc; color: #047857; font-weight: 600; border-radius: 8px; padding: 2px 12px; font-size: 13px; }
.mtag { display: inline-block; padding: 2px 10px; border-radius: 6px; font-size: 13px; font-weight: 600; white-space: nowrap; background: #e0f2fe; color: #075985; border: 1px solid #bae6fd; }
.mtag-closed { background: #f1f5f9; color: #64748b; border-color: #cbd5e1; font-weight: 500; }
@media (max-width: 760px) { .pc-tags .pc-kw { display: none; } }

/* โอกาสวันนี้ lists: a bookmark on each row */
.opp-list li.ol-row { display: grid; grid-template-columns: minmax(0, 1fr) 36px; gap: 6px; align-items: start; }
.opp-list .ol-save { width: 36px; height: 36px; margin-top: 8px; color: #94a3b8; }
.opp-list .ol-save:hover { background: #16304a; color: var(--primary); }
.opp-list .ol-save[aria-pressed="true"] { color: var(--primary); }

/* every "clear" button: red, with a bin, on the right of its box */
.link-btn.clear-btn { color: var(--danger); font-size: 14px; line-height: 1.3; align-items: center; gap: 5px; }
/* the bin sits on the text's middle: no nudge (the old .f-head rule moved icons 1px down) */
.link-btn.clear-btn .ic, .f-head .link-btn.clear-btn .ic { position: static; top: auto; display: block; flex: none; margin-top: -1px; }
.link-btn.clear-btn:hover { color: #fda4af; }
.link-btn.clear-btn .ic { color: currentColor; }
.panel-head .clear-btn { margin-left: auto; }
.f-head .link-btn.clear-btn { color: var(--danger); }
.msel-foot .clear-btn, .dp-foot .clear-btn { color: #e11d48; }
.feed-hint { margin: -8px 0 6px; }

/* notifications: a grey line under the project's name says what and when */
.feed .f-why { display: block; color: #94a3b8; font-size: 13.5px; margin-top: 3px; line-height: 1.5; }
.feed .k-bidtoday .f-ic { background: #3a2a0c; color: var(--gold); } .feed .k-bidtoday strong { color: var(--gold); }
.feed .k-bid .f-ic { background: #0f2c46; color: #fcd34d; } .feed .k-bid strong { color: #fcd34d; }

/* tracking list: the deadline note sits under the status pill */
.tt-stat .due { display: inline-block; margin: 6px 0 0; }

/* dashboard "ปีนี้เปิดอีกครั้ง": a wider facts column; every tile date says what it is */
.dtile.dtile-retry { grid-template-columns: 150px minmax(0, 1fr) minmax(440px, 620px); }
.dtile-retry .dt-facts b { white-space: nowrap; }
.dt-main small.dt-when { color: #475569; font-size: 13px; }
.dm-list small + small { display: block; }
@media (max-width: 1100px) { .dtile.dtile-retry { grid-template-columns: 110px minmax(0, 1fr); } .dtile-retry .dt-facts { grid-column: 1 / -1; border-left: 0; padding-left: 0; border-top: 1px solid var(--card-line); padding-top: 10px; } .dtile-retry .dt-facts b { white-space: normal; } }

/* round 2 (15 Oct 2026) */
.cal-grid button.ring-bid { border-color: var(--gold); color: var(--gold); box-shadow: 0 0 10px rgb(251 191 36 / 30%); }
.ev-bid { background: var(--gold); }
.ttile .t-meta span.mtag { background: #e0f2fe; color: #075985; border: 1px solid #bae6fd; padding: 1px 10px; font-weight: 600; }
.ttile .t-meta span.mtag-closed { background: #f1f5f9; color: #64748b; border-color: #cbd5e1; font-weight: 500; }
.countdown .cd-lab { display: block; font-size: 13px; color: #cbd5e1; letter-spacing: .02em; margin-bottom: 2px; }

/* Cookie bar (static_o2/consent.js, 19 Oct 2026): bottom of the screen, under the entry disclaimer (z 1000) */
.consent { position: fixed; left: 16px; right: 16px; bottom: 16px; z-index: 900; display: flex; justify-content: center; pointer-events: none; }
.consent[hidden] { display: none; }
.consent-in { pointer-events: auto; width: min(1080px, 100%); display: flex; align-items: center; gap: 14px 24px; padding: 14px 20px; background: var(--raised); border: 1px solid var(--border-2); border-radius: 14px; box-shadow: 0 10px 40px rgb(0 0 0 / 45%); }
.consent-in p { margin: 0; font-size: 14px; line-height: 1.7; color: var(--text); }
.consent-in a { color: var(--primary); }
.consent-act { display: flex; gap: 10px; flex: none; }
.consent-act .btn { min-height: 40px; padding: 0 20px; }
@media (max-width: 760px) { .consent-in { flex-direction: column; align-items: stretch; } .consent-act .btn { flex: 1; } }