/* KartSmart - by MS Timing. The MST-DAYS look (site.css: light, bright, compact, speed stripes, chequers) + KartSmart's own NEON:
   lime + electric blue + hot pink glow (indoor karting's neon-on-the-track feel), never a dark theme (Dan's rule). */
:root { --lime: #84CC16; --lime-b: #A3E635; --lime-t: #F0FBDC; --neon: #00E5FF; --pink: #FF2D87; }
body.ks { background: radial-gradient(1200px 500px at 85% -120px, #E7FFE0 0%, rgba(231,255,224,0) 60%), radial-gradient(900px 400px at -10% -80px, #E3EEFF 0%, rgba(227,238,255,0) 60%), var(--page); background-attachment: fixed; }

/* brand: KART (ink) SMART (blue -> lime), tiny "by MS Timing" */
.ksbrand { gap: 6px; }
.ksbrand .kname { font-size: 26px; letter-spacing: .01em; }
.ksbrand .kname b { background: linear-gradient(90deg, var(--blue), var(--lime)); -webkit-background-clip: text; background-clip: text; color: transparent; padding-right: 3px; }
.ksbrand small { font: 600 11px Inter, sans-serif; color: var(--muted); text-transform: none; font-style: normal; margin-left: 2px; align-self: flex-end; margin-bottom: 4px; }
.ks .stripes i:nth-child(3) { background: var(--lime); }
.ks .kart-brand { width: 34px; height: 18px; }
.neonbar { height: 5px; background: linear-gradient(90deg, var(--blue) 0 33%, var(--pink) 33% 50%, var(--lime) 50% 75%, var(--neon) 75%); box-shadow: 0 2px 10px rgba(132,204,22,.45), 0 2px 14px rgba(0,102,255,.25); }
.ks .top .in nav a.on { background: var(--lime-t); color: #3F6212; }

/* hero: electric blue -> neon, lime + pink speed stripes, chequered flag ghost */
.kshero { position: relative; overflow: hidden; border-radius: 14px; padding: 26px 24px 40px; color: #fff;
  background: linear-gradient(115deg, #0047FF 0%, #0066FF 38%, #00B4FF 78%, #00E5FF 100%); clip-path: polygon(0 0, 100% 0, 100% 84%, 0 100%); box-shadow: 0 10px 30px rgba(0,102,255,.25); }
.kshero h1 { font-size: 46px; text-shadow: 0 2px 0 rgba(0,0,0,.12); }
.kshero h1 b { color: var(--lime-b); text-shadow: 0 0 18px rgba(163,230,53,.8); }
.kshero p { margin: 6px 0 0; font-size: 16px; opacity: .95; max-width: 620px; }
.kshero .bigstripes { position: absolute; right: -10px; top: 0; bottom: 0; display: flex; gap: 12px; }
.kshero .bigstripes i { width: 30px; transform: skewX(-16deg); } .kshero .bigstripes i:nth-child(1) { background: var(--lime-b); box-shadow: 0 0 22px var(--lime-b); }
.kshero .bigstripes i:nth-child(2) { background: var(--pink); box-shadow: 0 0 22px var(--pink); } .kshero .bigstripes i:nth-child(3) { background: #fff; opacity: .5; }
.kshero .flag { position: absolute; right: 140px; top: 16px; width: 80px; height: 48px; opacity: .22; background: repeating-conic-gradient(#fff 0 25%, transparent 0 50%) 0 0 / 16px 16px; transform: skewX(-16deg); }

/* dashboard tiles: big, bright, a coloured kerb on top */
.ktiles { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
.ktile { position: relative; display: block; background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: 16px 14px 12px; color: var(--ink); overflow: hidden; transition: transform .1s, box-shadow .1s; }
.ktile:hover { text-decoration: none; transform: translateY(-2px); box-shadow: 0 8px 22px rgba(0,102,255,.14); }
.ktile::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 5px; background: var(--c, var(--blue)); box-shadow: 0 0 12px var(--c, var(--blue)); }
.ktile b { display: block; font-family: var(--display); font-style: italic; font-weight: 800; font-size: 26px; text-transform: uppercase; line-height: 1; }
.ktile .big { font-family: var(--display); font-style: italic; font-weight: 800; font-size: 40px; line-height: 1; color: var(--c, var(--blue)); }
.ktile span { color: var(--muted); font-size: 13px; }
.ktile .badge { position: absolute; right: 10px; top: 12px; }

/* KART tiles (fleet): number roundel, status colour, odometer, the worst job's progress bar */
.fleet { display: grid; gap: 10px; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); }
.kcard { position: relative; display: block; background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px; color: var(--ink); border-left: 6px solid var(--st, var(--lime)); }
.kcard:hover { text-decoration: none; box-shadow: 0 6px 18px rgba(20,33,61,.1); }
.kcard .kno { font-family: var(--display); font-style: italic; font-weight: 800; font-size: 42px; line-height: .9; }
.kcard .kcls { font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.kcard .odo { font-variant-numeric: tabular-nums; font-weight: 700; font-size: 15px; }
.kcard .next { font-size: 12px; color: var(--muted); margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kcard .st { position: absolute; right: 10px; top: 10px; }
.kcard.ready { --st: var(--lime); } .kcard.soon { --st: #F59E0B; } .kcard.over { --st: #E10600; } .kcard.shop { --st: #7B2FF7; } .kcard.retired { --st: #9CA3AF; opacity: .6; }
.bar { height: 7px; background: #EEF2FA; border-radius: 4px; overflow: hidden; margin-top: 6px; }
.bar i { display: block; height: 100%; border-radius: 4px; background: var(--lime); box-shadow: 0 0 6px rgba(132,204,22,.5); }
.bar.soon i { background: #F59E0B; box-shadow: 0 0 6px rgba(245,158,11,.5); } .bar.over i { background: #E10600; box-shadow: 0 0 6px rgba(225,6,0,.45); }
.pill.lime { background: var(--lime-t); color: #3F6212; } .pill.purple { background: var(--fast-t); color: var(--fast); }

/* workshop list */
.duetbl td { vertical-align: middle; }
.duetbl .kn { font-family: var(--display); font-style: italic; font-weight: 800; font-size: 22px; }
.tilebtns { display: flex; gap: 6px; flex-wrap: wrap; }
.tbtn { border: 2px solid var(--line); background: #fff; border-radius: 10px; padding: 5px 12px; font-weight: 700; font-size: 13px; cursor: pointer; color: var(--ink); }
.tbtn.on { border-color: var(--blue); background: var(--blue); color: #fff; }
.ks .btn.lime { background: var(--lime); color: #1A2E05; } .ks .btn.lime:hover { background: #65A30D; color: #fff; }
.sec { display: flex; align-items: center; gap: 10px; margin: 6px 0 4px; } .sec h2 { margin: 0; } .sec .grow { border-top: 2px dashed var(--line); }
/* phones: a compact header */
@media (max-width: 599px) { .ksbrand small, .ks .kart-brand { display: none; } .ksbrand .kname { font-size: 21px; } .ks .top .in nav a { padding: 5px 7px; font-size: 13px; } }