/* Robotic Explorer — shared look for the form, Riwayat and Admin pages.
   Colours come from the logo: blue #0083CA, red #ED1C24, sky #4EC9F5, grey #58595B. */
:root{
  --bg:#F3F5F8; --surface:#FFFFFF; --ink:#1F2329; --muted:#5E6570; --line:#DDE2E8; --field:#FFFFFF;
  --navy:#006BA6; --on-navy:#FFFFFF; --blue:#0083CA; --sky:#4EC9F5; --red:#ED1C24; --red-ink:#A3151C;
  --soft:#E7F3FA; --err-bg:#FDECEC; --dot:rgba(0,131,202,.07);
  --shadow:0 1px 2px rgba(16,24,40,.05), 0 10px 28px -18px rgba(0,60,110,.28);
  --radius:16px; --page:560px; color-scheme:light;
}
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]){
  --bg:#0C131D; --surface:#141D2A; --ink:#E9EEF5; --muted:#9AA6B8; --line:#243145; --field:#0F1723;
  --navy:#5CB8EE; --on-navy:#07131F; --blue:#3AA9E8; --sky:#4EC9F5; --red:#E5343B; --red-ink:#FF8A8E;
  --soft:#12283D; --err-bg:#3A1A1F; --dot:rgba(78,201,245,.06);
  --shadow:0 1px 2px rgba(0,0,0,.3); color-scheme:dark; } }
:root[data-theme="dark"]{
  --bg:#0C131D; --surface:#141D2A; --ink:#E9EEF5; --muted:#9AA6B8; --line:#243145; --field:#0F1723;
  --navy:#5CB8EE; --on-navy:#07131F; --blue:#3AA9E8; --sky:#4EC9F5; --red:#E5343B; --red-ink:#FF8A8E;
  --soft:#12283D; --err-bg:#3A1A1F; --dot:rgba(78,201,245,.06);
  --shadow:0 1px 2px rgba(0,0,0,.3); color-scheme:dark; }

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-padding-top:calc(env(safe-area-inset-top,0px) + 84px); -webkit-text-size-adjust:100%; }
body{ margin:0; min-height:100vh; color:var(--ink); font:16px/1.5 Inter, system-ui, -apple-system, "Segoe UI", sans-serif;
  background:radial-gradient(var(--dot) 1.2px, transparent 1.3px) 0 0/20px 20px, var(--bg); -webkit-font-smoothing:antialiased; }
.wrap{ max-width:var(--page); margin:0 auto; padding:0 16px 48px; }
[hidden]{ display:none!important; }
:focus-visible{ outline:3px solid var(--sky); outline-offset:2px; }

/* top bar with logo */
.topbar{ position:sticky; top:0; z-index:20; padding-top:env(safe-area-inset-top,0px);
  background:color-mix(in srgb, var(--surface) 86%, transparent); backdrop-filter:saturate(1.5) blur(12px); -webkit-backdrop-filter:saturate(1.5) blur(12px);
  border-bottom:1px solid var(--line); }
.topbar .in{ max-width:var(--page); margin:0 auto; padding:10px 16px; display:flex; align-items:center; justify-content:space-between; gap:12px; min-height:70px; }
.logo{ display:block; flex:none; line-height:0; }
.logo img{ height:50px; width:auto; }
.tabs{ display:flex; gap:2px; background:var(--bg); border:1px solid var(--line); border-radius:999px; padding:3px; }
.tabs a{ font:600 14px Inter, sans-serif; color:var(--muted); text-decoration:none; padding:7px 14px; border-radius:999px; white-space:nowrap; }
.tabs a:hover{ color:var(--ink); }
.tabs a[aria-current="page"]{ background:var(--surface); color:var(--ink); box-shadow:0 1px 2px rgba(16,24,40,.12); }
.tag{ font:600 12px Inter, sans-serif; letter-spacing:.4px; text-transform:uppercase; color:var(--muted); border:1px solid var(--line); border-radius:999px; padding:4px 10px; }

/* page title */
.hero{ padding:26px 2px 20px; }
.hero h1{ font:400 30px/1.1 Aldrich, Inter, sans-serif; color:var(--ink); margin:0; letter-spacing:.2px; }
.hero .accent{ display:flex; gap:6px; margin:12px 0 12px; }
.hero .accent::before{ content:""; width:30px; height:4px; background:var(--blue); }
.hero .accent::after{ content:""; width:14px; height:4px; background:var(--red); }
.lede{ color:var(--muted); margin:0; font-size:15px; max-width:46ch; }

/* cards */
.card{ background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:18px; margin-bottom:14px; box-shadow:var(--shadow); }
.card h2{ font:600 16px Inter, sans-serif; margin:0 0 14px; display:flex; align-items:center; justify-content:space-between; gap:8px; flex-wrap:wrap; }
.card .kicker{ font:600 12px Inter, sans-serif; letter-spacing:.5px; text-transform:uppercase; color:var(--muted); margin:0 0 12px; }

/* shared controls */
label.lbl{ display:block; font-weight:600; font-size:14px; margin-bottom:6px; }
input[type=text], input[type=date], input[type=number], input[type=password], input[type=search], select, textarea{
  width:100%; min-width:0; font:500 16px Inter, sans-serif; color:var(--ink); background:var(--field);
  border:1.5px solid var(--line); border-radius:12px; padding:11px 12px; min-height:48px; transition:border-color .15s; }
input:hover, select:hover, textarea:hover{ border-color:color-mix(in srgb, var(--blue) 35%, var(--line)); }
select{ appearance:none; background-image:linear-gradient(45deg, transparent 50%, var(--muted) 50%), linear-gradient(135deg, var(--muted) 50%, transparent 50%);
  background-position:calc(100% - 18px) 50%, calc(100% - 13px) 50%; background-size:5px 5px; background-repeat:no-repeat; padding-right:34px; }
.go{ font:700 16px Inter, sans-serif; background:var(--red); color:#fff; border:0; border-radius:12px; padding:14px 22px; min-height:52px; cursor:pointer; white-space:nowrap;
  box-shadow:0 6px 16px -8px rgba(237,28,36,.6); transition:transform .1s, filter .15s; }
.go:hover{ filter:brightness(1.05); } .go:active{ transform:translateY(1px); }
.go[disabled]{ opacity:.6; cursor:default; }
.btn{ font:600 14px Inter, sans-serif; border:1.5px solid var(--line); background:var(--surface); color:var(--ink); border-radius:12px; padding:9px 14px; cursor:pointer; text-decoration:none; display:inline-flex; align-items:center; justify-content:center; min-height:42px; }
.btn:hover{ border-color:var(--blue); color:var(--navy); }
.link{ font:600 14px Inter, sans-serif; background:none; border:0; color:var(--navy); cursor:pointer; padding:6px 0; text-decoration:none; }
.link:hover{ text-decoration:underline; }
.note{ font-size:13.5px; color:var(--muted); }
.err-box{ color:var(--red-ink); background:var(--err-bg); font-size:14px; border-radius:10px; padding:9px 12px; }
.badge{ font:600 12px Inter, sans-serif; background:var(--err-bg); color:var(--red-ink); border-radius:999px; padding:2px 8px; white-space:nowrap; }

/* stat tiles */
.tiles{ display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin-bottom:14px; }
.tile{ background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:12px 14px; box-shadow:var(--shadow); min-width:0; }
.tile small{ color:var(--muted); font-size:12.5px; display:block; line-height:1.3; }
.tile b{ font:700 22px Inter, sans-serif; color:var(--navy); font-variant-numeric:tabular-nums; display:block; margin-top:2px; overflow-wrap:anywhere; }

.foot{ text-align:center; color:var(--muted); font-size:12.5px; margin-top:26px; }

@media (max-width:380px){ .logo img{ height:44px; } .tabs a{ padding:7px 11px; } .hero h1{ font-size:27px; } }