/* Robo2u Tools: shared base + cross-site nav (matches the malaysia4u .site-nav). */
*,*::before,*::after { box-sizing: border-box; }
:root {
  --bg1:#fafbfd; --bg2:#f4f5f9; --text:#0f172a; --muted:#5b6678; --dim:#94a3b8;
  --border:#e6e9f0; --border-2:#d6dbe6; --panel:#fff; --accent:#2563eb; --accent-2:#38bdf8;
  --mono:"Roboto Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --open:#0284c7; --closed:#7c3aed;
}
html,body { margin:0; padding:0; }
body {
  background: radial-gradient(1000px 560px at 12% -8%, rgba(37,99,235,.08), transparent 60%),
    linear-gradient(180deg, var(--bg1) 0%, var(--bg2) 100%);
  color:var(--text); font-family:var(--mono); font-size:14px; line-height:1.55;
  -webkit-font-smoothing:antialiased; min-height:100dvh; overflow-x:clip;
}
body::before {
  content:""; position:fixed; inset:0; pointer-events:none; z-index:0;
  background-image: radial-gradient(rgba(15,23,42,.13) 1px, transparent 1px);
  background-size:22px 22px;
  -webkit-mask-image: radial-gradient(ellipse at 50% 0%, #000 0%, rgba(0,0,0,.5) 55%, transparent 95%);
  mask-image: radial-gradient(ellipse at 50% 0%, #000 0%, rgba(0,0,0,.5) 55%, transparent 95%);
  opacity:.5;
}
a { color:inherit; }

/* Brand strip: canonical, keep identical across news/data/blog/tools. Sits above
   .site-nav at the same 40px height, so the lockup reads big while the header
   gains no extra height. */
.site-brand { position:sticky; top:0; z-index:101; background:#fff; border-bottom:1px solid var(--border); }
.site-brand-inner { max-width:1200px; margin:0 auto; padding:0 24px; display:flex; align-items:center; justify-content:center; height:40px; }
.site-brand-link { display:inline-flex; align-items:center; gap:8px; text-decoration:none; transition:opacity .15s ease; }
.site-brand-link:hover { opacity:.85; }
.site-brand-mark { width:30px; height:30px; display:block; flex-shrink:0; }
.site-brand-text { font-family:var(--mono); font-size:22px; font-weight:700; color:#0f172a; letter-spacing:-0.5px; line-height:1; }
.site-brand-text span { color:var(--accent); }
@media (max-width:640px) {
  .site-brand-inner { padding:0 12px; }
  .site-brand-mark { width:26px; height:26px; }
  .site-brand-text { font-size:19px; }
}

.site-nav-inner { max-width:1200px; margin:0 auto; padding:0 24px; display:flex; align-items:center; justify-content:center; gap:8px; height:40px; }
.site-nav-link { font-family:var(--mono); font-size:16px; font-weight:600; color:#64748b; text-decoration:none; padding:6px 10px; border-radius:4px; transition:all .15s; white-space:nowrap; letter-spacing:.01em; }
.site-nav-link:hover { color:#0f172a; background:#f1f5f9; }
.site-nav-link.active { color:var(--accent); font-weight:700; }
.site-nav-dot { color:#94a3b8; opacity:.45; font-size:13px; line-height:1; user-select:none; }
@media (max-width:640px){
  .site-nav-inner { padding:0 12px; gap:0; overflow-x:auto; scrollbar-width:none; -webkit-overflow-scrolling:touch; }
  .site-nav-inner::-webkit-scrollbar { display:none; }
  .site-nav-link { font-size:14px; padding:8px 8px; min-height:40px; display:flex; align-items:center; flex-shrink:0; }
}

.wrap { position:relative; z-index:1; max-width:1120px; margin:0 auto; padding:24px 16px 64px; }
.hero { text-align:center; margin:6px 0 20px; }
.hero h1 { margin:0 0 6px; font-size:clamp(1.7rem,5.5vw,2.7rem); line-height:1.03; letter-spacing:-.02em; font-weight:800; }
.hero h1 .a { color:var(--accent); }
.hero .tag { font-family: "Roboto Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size:clamp(1.15rem,3.2vw,1.6rem); color:#475569; display:inline-block; }
.hero .live { display:inline-flex; align-items:center; gap:6px; font-size:10.5px; text-transform:uppercase; letter-spacing:.16em; color:var(--accent); border:1px solid rgba(37,99,235,.35); border-radius:999px; padding:3px 10px; margin-top:8px; }
.hero .live .dot { width:7px; height:7px; border-radius:50%; background:#22c55e; box-shadow:0 0 0 3px rgba(34,197,94,.18); }

.controls { display:flex; flex-wrap:wrap; gap:9px; align-items:center; margin:0 0 14px; }
.search { flex:1 1 220px; min-width:0; position:relative; }
.search input { width:100%; font-family:var(--mono); font-size:13px; color:var(--text); background:#fff; border:1px solid var(--border-2); border-radius:10px; padding:9px 12px 9px 34px; outline:none; }
.search input:focus { border-color:var(--accent); }
.search svg { position:absolute; left:11px; top:50%; transform:translateY(-50%); color:var(--dim); }
select { font-family:var(--mono); font-size:12.5px; color:var(--text); background:#fff; border:1px solid var(--border-2); border-radius:10px; padding:9px 12px; outline:none; cursor:pointer; max-width:100%; min-width:0; }
select:focus { border-color:var(--accent); }
.count-line { width:100%; font-size:12px; color:var(--dim); }

.badge { font-size:10px; letter-spacing:.03em; color:var(--muted); background:#f4f6fa; border:1px solid var(--border); border-radius:6px; padding:2px 7px; overflow-wrap:anywhere; max-width:100%; }
.tag-open { color:var(--open); background:color-mix(in srgb, var(--open) 8%, #fff); border-color:color-mix(in srgb, var(--open) 30%, #fff); }
.tag-closed { color:var(--closed); background:color-mix(in srgb, var(--closed) 8%, #fff); border-color:color-mix(in srgb, var(--closed) 30%, #fff); }

.state { text-align:center; color:var(--muted); padding:44px 20px; border:1px dashed var(--border-2); border-radius:14px; }
.spin { display:inline-block; width:22px; height:22px; border:3px solid var(--border-2); border-top-color:var(--accent); border-radius:50%; animation:spin .8s linear infinite; vertical-align:middle; }
@keyframes spin { to { transform:rotate(360deg); } }

footer { text-align:center; color:var(--dim); font-size:11.5px; margin-top:34px; }
footer a { color:var(--muted); text-decoration:none; border-bottom:1px dotted var(--border-2); }
footer a:hover { color:var(--accent); }
@media (prefers-reduced-motion:reduce){ * { transition:none !important; animation:none !important; } }


/* ==========================================================================
   CANONICAL SITE HEADER
   Byte-identical across every property and framework. Do not edit in one repo
   only. Change it here and re-apply everywhere, or the headers drift again.
   Per-brand differences are limited to: the mark artwork, the wordmark text,
   and --site-accent. Appended last so it beats earlier per-site rules.
   ========================================================================== */
:root {
  --site-accent: #2563eb;
  --site-header-bg: #ffffff;
  --site-header-border: #e2e8f0;
  --site-header-text: #0f172a;
  --site-header-link: #64748b;
  --site-header-link-hover: #0f172a;
  --site-header-link-hover-bg: #f1f5f9;
}

/* The strip and the nav pin as one block: no offsets to keep in sync, and no
   seam for page content to show through on scroll. */
.site-header { position: sticky; top: 0; z-index: 101; background: var(--site-header-bg); }
/* No wrapper (the static tool pages): each bar pins itself, strip then nav. */
.site-brand { position: sticky; top: 0; z-index: 101; }
.site-nav { position: sticky; top: 41px; z-index: 100; }
/* With a wrapper, the wrapper does the pinning and the bars sit still. */
.site-header .site-brand, .site-header .site-nav { position: static; z-index: auto; }

.site-brand {
  display: block; margin: 0; padding: 0;
  background: var(--site-header-bg);
  border-bottom: 1px solid var(--site-header-border);
  backdrop-filter: none; -webkit-backdrop-filter: none;
}
.site-brand-inner {
  max-width: 1200px; margin: 0 auto; padding: 0 24px;
  display: flex; align-items: center; justify-content: center;
  height: 40px;
}
.site-brand-link { display: inline-flex; align-items: center; gap: 8px; text-decoration: none; transition: opacity .15s ease; }
.site-brand-link:hover { opacity: .85; }
.site-brand-mark { width: 30px; height: 30px; display: block; flex-shrink: 0; }
.site-brand-text {
  font-family: var(--mono);
  font-size: 22px; font-weight: 700; line-height: 1; letter-spacing: -0.5px;
  color: var(--site-header-text);
}
.site-brand-text span { color: var(--site-accent); }

/* Two markup shapes exist in the wild: links directly inside .site-nav, and
   links inside a .site-nav-inner wrapper. Both must render identically. */
.site-nav {
  margin: 0; padding: 0; gap: 0;
  display: flex; align-items: center; justify-content: center;
  background: var(--site-header-bg);
  border-bottom: 1px solid var(--site-header-border);
  backdrop-filter: none; -webkit-backdrop-filter: none;
}
.site-nav > .site-nav-link, .site-nav > .site-nav-dot { margin: 0 4px; }
.site-nav-inner {
  width: 100%; max-width: 1200px; margin: 0 auto; padding: 0 24px;
  display: flex; align-items: center; justify-content: center; gap: 8px;
  height: 40px;
}
.site-nav:not(:has(.site-nav-inner)) { height: 40px; padding: 0 24px; }
.site-nav-link {
  font-family: var(--mono);
  font-size: 16px; font-weight: 600; line-height: 1; letter-spacing: .01em;
  color: var(--site-header-link); text-decoration: none;
  padding: 6px 10px; border-radius: 4px; white-space: nowrap;
  transition: color .15s, background .15s;
  text-transform: none;
}
.site-nav-link:hover { color: var(--site-header-link-hover); background: var(--site-header-link-hover-bg); }
.site-nav-link.active { color: var(--site-accent); font-weight: 700; }
.site-nav-dot { color: #94a3b8; opacity: .45; font-size: 13px; line-height: 1; user-select: none; pointer-events: none; }

@media (max-width: 640px) {
  .site-brand-inner { padding: 0 12px; height: 40px; }
  .site-brand-mark { width: 26px; height: 26px; }
  .site-brand-text { font-size: 19px; }
  .site-nav-inner, .site-nav:not(:has(.site-nav-inner)) {
    padding: 0 12px; gap: 0; height: 40px;
    overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch;
  }
  .site-nav-inner::-webkit-scrollbar, .site-nav::-webkit-scrollbar { display: none; }
  .site-nav-link { font-size: 14px; padding: 8px; min-height: 40px; display: flex; align-items: center; flex-shrink: 0; }
}

/* ==========================================================================
   ROBO2U TOOLS SHARED LAYER
   Every tool page uses these. Do not redefine them per page: if a tool needs
   something new, add it here so the four pages stay one visual system.
   ========================================================================== */
main { position:relative; z-index:1; max-width:1180px; margin:0 auto; padding:30px 16px 64px; }
main.wide { max-width:1440px; }
.hero p { margin:8px auto 0; color:var(--muted); font-size:13px; max-width:640px; overflow-wrap:anywhere; }

/* Tool cards (index grid) */
.grid { display:grid; grid-template-columns:1fr; gap:14px; }
@media (min-width:640px) { .grid { grid-template-columns:1fr 1fr; } }
@media (min-width:1040px) { .grid { grid-template-columns:1fr 1fr; } }
.tool {
  position:relative; display:flex; flex-direction:column; gap:10px;
  background:linear-gradient(180deg,#fff 0%,#f6f7fb 100%);
  border-radius:18px; padding:20px; text-decoration:none; color:inherit;
  box-shadow:0 0 0 1px var(--border) inset, 0 10px 28px -18px rgba(15,23,42,.25);
  transition:transform .3s cubic-bezier(.2,.7,.2,1.1), box-shadow .3s; overflow:hidden;
}
.tool:hover { transform:translateY(-5px); box-shadow:0 0 0 1px rgba(37,99,235,.5) inset, 0 26px 44px -24px rgba(37,99,235,.35); }
.tool .top { display:flex; align-items:center; justify-content:space-between; gap:10px; }
.icon { width:46px; height:46px; flex:none; display:inline-flex; align-items:center; justify-content:center; font-size:24px; border-radius:13px; background:linear-gradient(135deg,#1e293b 0%,#0f172a 100%); box-shadow:0 10px 20px -12px rgba(15,23,42,.5); }
.flag { font-size:9.5px; font-weight:800; letter-spacing:.1em; text-transform:uppercase; color:var(--accent); background:#eff6ff; border:1px solid rgba(37,99,235,.3); border-radius:999px; padding:3px 9px; }
.flag.grey { color:var(--dim); background:#f1f5f9; border-color:var(--border); }
.tool h2 { margin:4px 0 0; font-size:17px; letter-spacing:-.015em; color:#0f172a; }
.tool p { margin:0; font-size:12.5px; color:var(--muted); overflow-wrap:anywhere; }
.tags { display:flex; flex-wrap:wrap; gap:6px; margin-top:auto; padding-top:4px; }
.tag { font-size:10.5px; color:var(--muted); background:#f1f5f9; border-radius:999px; padding:3px 9px; }
@media (prefers-reduced-motion:reduce) { .tool { transition:none; } }

/* Panels */
.panel { background:var(--panel); border:1px solid var(--border); border-radius:14px; padding:16px; box-shadow:0 10px 28px -22px rgba(15,23,42,.28); }
.panel + .panel { margin-top:14px; }
.panel h2, .panel h3 { margin:0 0 12px; font-size:13px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:#334155; }
.panel .sub { margin:-8px 0 12px; font-size:11.5px; color:var(--dim); overflow-wrap:anywhere; }
.cols { display:grid; grid-template-columns:1fr; gap:14px; align-items:start; }
@media (min-width:900px) { .cols.c2 { grid-template-columns:1fr 1fr; } .cols.sidebar { grid-template-columns:340px 1fr; } .cols.sidebar-r { grid-template-columns:1fr 360px; } }

/* Form controls */
.field { display:flex; flex-direction:column; gap:5px; margin-bottom:12px; min-width:0; }
.field label { font-size:11px; font-weight:600; letter-spacing:.05em; text-transform:uppercase; color:#475569; overflow-wrap:anywhere; }
.field .hint { font-size:10.5px; color:var(--dim); overflow-wrap:anywhere; }
.field input[type=number], .field input[type=text], .field select, .field textarea {
  font-family:var(--mono); font-size:13px; color:var(--text); background:#fff;
  border:1px solid var(--border-2); border-radius:9px; padding:8px 10px; outline:none; width:100%; min-width:0;
}
.field input:focus, .field select:focus, .field textarea:focus { border-color:var(--accent); box-shadow:0 0 0 3px rgba(37,99,235,.12); }
.field input[type=range] { width:100%; accent-color:var(--accent); }
.row2 { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.row3 { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; }
@media (max-width:560px) { .row3 { grid-template-columns:1fr 1fr; } }

/* Buttons + segmented control */
.btn { font-family:var(--mono); font-size:12.5px; font-weight:600; color:#334155; background:#fff; border:1px solid var(--border-2); border-radius:9px; padding:8px 13px; cursor:pointer; transition:all .15s; }
.btn:hover { border-color:var(--accent); color:var(--accent); }
.btn.primary { background:var(--accent); border-color:var(--accent); color:#fff; }
.btn.primary:hover { background:#1d4ed8; border-color:#1d4ed8; color:#fff; }
.btn:disabled { opacity:.45; cursor:not-allowed; }
.seg { display:inline-flex; flex-wrap:wrap; gap:4px; background:#f1f5f9; border:1px solid var(--border); border-radius:10px; padding:3px; }
.seg button { font-family:var(--mono); font-size:12px; font-weight:600; color:var(--muted); background:transparent; border:0; border-radius:7px; padding:6px 11px; cursor:pointer; white-space:nowrap; }
.seg button.on { background:#fff; color:var(--accent); box-shadow:0 1px 3px rgba(15,23,42,.12); }

/* KPI tiles */
.kpis { display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:10px; }
.kpi { background:linear-gradient(180deg,#fff 0%,#f8fafc 100%); border:1px solid var(--border); border-radius:12px; padding:13px 14px; min-width:0; }
.kpi .k { font-size:10px; font-weight:700; letter-spacing:.09em; text-transform:uppercase; color:var(--dim); overflow-wrap:anywhere; }
.kpi .v { font-size:22px; font-weight:800; letter-spacing:-.02em; color:#0f172a; margin-top:3px; overflow-wrap:anywhere; }
.kpi .v.accent { color:var(--accent); }
.kpi .u { font-size:11px; font-weight:600; color:var(--muted); margin-left:3px; }
.kpi .n { font-size:10.5px; color:var(--dim); margin-top:3px; overflow-wrap:anywhere; }

/* Tables: long ones scroll in a capped box with a sticky head, never truncate */
.tablewrap { overflow:auto; max-height:70vh; border:1px solid var(--border); border-radius:12px; background:#fff; }
.tablewrap.short { max-height:none; }
table.data { border-collapse:collapse; width:100%; font-size:12.5px; }
table.data thead th { position:sticky; top:0; z-index:2; background:#f8fafc; text-align:left; font-size:10.5px; font-weight:700; letter-spacing:.07em; text-transform:uppercase; color:#475569; padding:9px 11px; border-bottom:1px solid var(--border-2); white-space:nowrap; }
table.data th.sortable { cursor:pointer; user-select:none; }
table.data th.sortable:hover { color:var(--accent); }
table.data td { padding:9px 11px; border-bottom:1px solid #f1f5f9; vertical-align:top; overflow-wrap:anywhere; }
table.data tbody tr:hover { background:#f8fafc; }
table.data td.num, table.data th.num { text-align:right; font-variant-numeric:tabular-nums; }
.mono { font-family:var(--mono); font-variant-numeric:tabular-nums; }

/* Misc */
.pill { display:inline-block; font-size:10.5px; font-weight:600; color:var(--muted); background:#f1f5f9; border:1px solid var(--border); border-radius:999px; padding:2px 8px; }
.pill.ok { color:#15803d; background:#f0fdf4; border-color:#bbf7d0; }
.pill.warn { color:#b45309; background:#fffbeb; border-color:#fde68a; }
.pill.bad { color:#b91c1c; background:#fef2f2; border-color:#fecaca; }
.note { font-size:11.5px; color:var(--muted); line-height:1.6; overflow-wrap:anywhere; }
.dropzone { border:2px dashed var(--border-2); border-radius:14px; padding:30px 20px; text-align:center; color:var(--muted); font-size:13px; cursor:pointer; transition:all .18s; background:#fff; }
.dropzone:hover, .dropzone.over { border-color:var(--accent); background:#eff6ff; color:var(--accent); }
footer { text-align:center; color:var(--dim); font-size:11.5px; margin-top:38px; }
footer a { color:var(--muted); text-decoration:none; border-bottom:1px dotted var(--border); }
footer a:hover { color:var(--accent); }

/* --------------------------------------------------------------------------
   Shared fixes applied in the 2026-08-26 integration pass. These were reported
   by the per-tool verifiers and belong here once, so all five pages move
   together.
   -------------------------------------------------------------------------- */

/* A grid item defaults to min-width:auto, so a wide table pushes its whole
   column past the viewport instead of scrolling inside .tablewrap. Every tool
   page hit this at 390px. */
.cols > * { min-width:0; }
.panel { min-width:0; }

/* Tap targets. The spec asks for 40px and the base .btn was 34px, .seg button
   28px, footer links 16px, so a thumb missed them on a phone. */
.btn { display:inline-flex; align-items:center; justify-content:center; gap:6px; min-height:40px; }
.seg button { min-height:34px; }
@media (max-width:760px) {
  .seg button { min-height:40px; }
}
/* A native range input is 15px tall by default. Growing the element grows the
   hit area; the track itself stays the same thin line. */
input[type=range] { height:26px; accent-color:var(--accent); }
@media (max-width:760px) { input[type=range] { height:40px; } }
/* The brand lockup sits in a 40px bar but the link itself was only 26px. */
.site-brand-link { min-height:40px; }

/* Footer: the same shape on every page, with the other tools one tap away. */
footer { padding-bottom:8px; }
footer a { display:inline-block; padding:10px 0; }
footer p { margin:6px 0 0; }
.footnav { display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:4px 18px; margin-bottom:4px; }
.footnav a { font-size:12px; font-weight:600; color:var(--muted); border-bottom:0; padding:10px 4px; }
.footnav a:hover { color:var(--accent); }
.footnav a.here { color:var(--accent); cursor:default; }

/* Cross-links between tools, used at the foot of a panel. */
.crosslink { font-size:12px; color:var(--muted); margin-top:14px; text-align:center; overflow-wrap:anywhere; }
.crosslink a { color:var(--accent); text-decoration:none; font-weight:600; }
.crosslink a:hover { text-decoration:underline; }

/* KPI tiles: the base rule allowed a 150px minimum, so a seven tile row broke
   as six plus a lone orphan at 1440px. A 172px minimum caps the column count
   and splits the same row more evenly, and the tiles still fit two across at
   390px. */
.kpis { grid-template-columns:repeat(auto-fit,minmax(172px,1fr)); }

/* Tool card icons are inline SVG rather than emoji. An emoji falls back to a
   tofu box on any machine without an emoji font, and these pages are read on
   Linux workstations where that is common. */
.icon svg { width:24px; height:24px; display:block; }

/* The brand strip and the nav pin as an 81px block, so an in-page anchor would
   otherwise land underneath them. */
html { scroll-padding-top: 82px; }

/* Native checkboxes render at 13 to 16px. Each one on these pages sits inside a
   40px label or table row, so the tap target already passes, but the box itself
   is easier to hit when it is drawn larger on a phone. */
input[type=checkbox] { width:16px; height:16px; accent-color:var(--accent); flex:none; }
@media (max-width:760px) { input[type=checkbox] { width:20px; height:20px; } }