@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@500;600;700&family=Inter:wght@400;500;600&display=swap');

:root{
  /* Shopify-inspired light theme */
  --ink:#f1f2f4; --ink2:#eef0f2;                 /* app background */
  --surface:#ffffff; --surface2:#f6f6f7; --raise:#f1f2f4;  /* cards / inputs */
  --line:#e1e3e5; --line2:#d2d5d8;               /* borders */
  --text:#202223; --muted:#6d7175; --faint:#8c9196;        /* text */
  --brand:#008060; --brand-2:#004c3f; --brand-soft:#e3f1ed; /* Shopify green */
  --green:#008060; --green-2:#004c3f; --green-soft:#e3f1ed; --green-ink:#0c5132;
  --amber:#b98900; --amber-soft:#fff5ea; --danger:#d72c0d; --danger-soft:#fdecea;
  --mono:ui-monospace,"SF Mono",Menlo,Consolas,monospace;
  --shadow:0 8px 24px -12px rgba(31,33,36,.24); --shadow-sm:0 1px 2px rgba(31,33,36,.10);
  --radius:12px;
  --sidebar:#1a1c1d; --sidebar-line:#2b2e2f; --sidebar-text:#e3e5e7; --sidebar-muted:#9ea3a8; /* Shopify dark nav */
}
*{box-sizing:border-box}
html,body{margin:0}
body{
  font-family:Inter,system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  color:var(--text); background:var(--ink);
  background-image:none;
  background-attachment:fixed;
  -webkit-font-smoothing:antialiased;
}
a{color:inherit}
h1,h2,h3,.brand b{font-family:"Space Grotesk",Inter,sans-serif;letter-spacing:-.01em}

/* ---------------- app shell ---------------- */
.shell{display:flex;min-height:100vh}
.side{
  width:250px;flex:0 0 250px;position:sticky;top:0;height:100vh;overflow-y:auto;
  background:var(--sidebar);
  border-right:1px solid var(--sidebar-line);display:flex;flex-direction:column;z-index:40;
}
.brand{display:flex;align-items:center;gap:11px;padding:18px 18px 6px}
.logo{
  width:34px;height:34px;border-radius:10px;flex:0 0 auto;display:flex;align-items:center;justify-content:center;
  font-size:18px;color:#fff;background:linear-gradient(150deg,var(--brand),var(--brand-2));
  box-shadow:0 6px 16px -6px rgba(0,128,96,.7);
}
.brand b{font-size:16px;font-weight:700;line-height:1;color:#fff}
.brand small{display:block;font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:#00a884;margin-top:3px;font-weight:600}
.station{margin:12px 16px 6px;padding:9px 12px;border:1px solid var(--sidebar-line);border-radius:10px;background:#232627}
.station .sk{font-size:9px;letter-spacing:.16em;text-transform:uppercase;color:var(--sidebar-muted)}
.station .sv{font-size:12px;color:#fff;font-weight:600;margin-top:2px}
.side nav{padding:8px 10px;flex:1}
.navgroup{margin-top:14px}
.navgroup:first-child{margin-top:4px}
.navgroup .eyebrow{font-size:10px;letter-spacing:.15em;text-transform:uppercase;color:var(--sidebar-muted);padding:0 10px 6px}
.side nav a{
  display:flex;align-items:center;gap:11px;padding:9px 11px;border-radius:9px;margin:2px 0;
  font-size:13px;color:var(--sidebar-text);text-decoration:none;font-weight:500;position:relative;transition:background .12s,color .12s;
}
.side nav a svg{width:17px;height:17px;flex:0 0 auto;opacity:.7}
.side nav a:hover{background:#2b2e2f;color:#fff}
.side nav a:hover svg{opacity:1}
.side nav a.on{background:var(--brand);color:#fff}
.side nav a.on svg{opacity:1;color:#fff}
.side nav a.on::before{content:"";position:absolute;left:-10px;top:8px;bottom:8px;width:3px;border-radius:0 3px 3px 0;background:#00a884}
.side-foot{border-top:1px solid var(--sidebar-line);padding:12px 14px;display:flex;align-items:center;gap:10px}
.avatar{width:32px;height:32px;border-radius:9px;background:#2b2e2f;border:1px solid var(--sidebar-line);display:flex;align-items:center;justify-content:center;font-weight:600;color:#00a884;font-family:"Space Grotesk"}
.side-foot .u b{font-size:13px;display:block;line-height:1.1;color:#fff}
.side-foot .u small{font-size:11px;color:var(--sidebar-muted)}
.side-foot .signout{margin-left:auto;font-size:12px;color:var(--sidebar-muted);text-decoration:none;padding:6px 8px;border-radius:8px}
.side-foot .signout:hover{background:var(--raise);color:var(--text)}

.mainwrap{flex:1;min-width:0;display:flex;flex-direction:column}
.tbar{
  position:sticky;top:0;z-index:30;display:flex;align-items:center;gap:14px;
  padding:0 24px;height:60px;background:rgba(255,255,255,.9);backdrop-filter:blur(8px);
  border-bottom:1px solid var(--line);
}
.ptitle{font-size:18px;font-weight:600;margin:0}
.tbar-right{margin-left:auto;display:flex;align-items:center;gap:10px}
.clock{font-family:var(--mono);font-size:13px;color:var(--text);font-weight:500}
.tzbadge{font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--faint);border:1px solid var(--line);border-radius:999px;padding:3px 9px}
.hamb{display:none;background:var(--surface2);border:1px solid var(--line);color:var(--text);width:38px;height:38px;border-radius:9px;font-size:16px;cursor:pointer}
.wrap{width:100%;max-width:1140px;margin:22px auto;padding:0 24px}
.overlay{display:none;position:fixed;inset:0;background:rgba(31,33,36,.4);z-index:35}

/* ---------------- components ---------------- */
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:16px 18px;box-shadow:var(--shadow-sm)}
h2{font-size:15px;margin:0 0 14px;font-weight:600}
h3{font-size:12px;margin:0 0 10px;font-weight:600;letter-spacing:.02em;color:var(--muted);text-transform:uppercase}
.grid3{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:12px}
.row{display:flex;gap:10px;flex-wrap:wrap;align-items:flex-end}

table{width:100%;border-collapse:collapse;font-size:13px}
th{color:var(--faint);text-align:left;font-weight:600;font-size:11px;letter-spacing:.04em;text-transform:uppercase;padding:9px 10px;border-bottom:1px solid var(--line)}
td{padding:10px;border-bottom:1px solid var(--line)}
tbody tr:hover{background:var(--surface2)}

label{font-size:11px;color:var(--muted);display:block;margin:9px 0 4px;font-weight:500}
input,select{
  padding:9px 11px;border-radius:9px;border:1px solid var(--line2);background:var(--surface);color:var(--text);
  font-size:13px;font-family:inherit;transition:border-color .12s,box-shadow .12s;
}
input:focus,select:focus{outline:none;border-color:var(--brand);box-shadow:0 0 0 3px rgba(0,128,96,.18)}
.fld{width:100%}

button{border:none;border-radius:9px;padding:9px 15px;font-size:13px;font-weight:600;cursor:pointer;font-family:inherit;transition:filter .12s,background .12s,border-color .12s}
button:hover{filter:brightness(1.04)}
.primary{background:var(--brand);color:#fff;box-shadow:0 1px 2px rgba(31,33,36,.12)}
.primary:hover{background:var(--brand-2);filter:none}
.ghost{background:var(--surface);color:var(--text);border:1px solid var(--line2)}
.danger{background:var(--danger-soft);color:var(--danger);border:1px solid #f0c2ba}
.cap{background:var(--brand-soft);color:var(--brand-2);border:1px solid #b6ddd2}
.pill{font-size:10px;font-weight:600;padding:3px 9px;border-radius:999px}
.msg{font-size:12px;color:var(--amber);margin-top:9px;min-height:15px}
.dl{color:var(--brand);text-decoration:none;font-weight:500}
.dl:hover{text-decoration:underline}

/* ---------------- operation console (the instrument) ---------------- */
.led{
  background:radial-gradient(120% 140% at 15% 10%,#0e2136,#06101d 70%);
  border:1px solid #17324c;border-radius:16px;padding:16px 20px;
  display:flex;align-items:center;justify-content:space-between;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.03),inset 0 0 40px rgba(0,0,0,.5);
}
.led .v{font-family:var(--mono);font-size:48px;font-weight:600;color:var(--green-ink);line-height:1;text-shadow:0 0 16px rgba(52,211,153,.45)}
.lamp{display:flex;align-items:center;gap:7px;font-size:11px;color:#3f5266;letter-spacing:.08em}
.lamp .d{width:9px;height:9px;border-radius:50%;background:#1a2a1f;box-shadow:inset 0 0 3px rgba(0,0,0,.6)}
.lamp.on{color:var(--green-ink)}.lamp.on .d{background:var(--green);box-shadow:0 0 8px var(--green)}
.seg{display:inline-flex;border:1px solid var(--line2);border-radius:9px;overflow:hidden}
.seg button{background:var(--surface2);color:var(--muted);padding:7px 14px;font-size:11px;border-radius:0}
.seg button.on{background:var(--brand);color:#fff}
.disp{display:grid;grid-template-columns:1.2fr 1fr 1fr 1fr;gap:12px;margin-top:12px}
.p{background:radial-gradient(120% 140% at 15% 10%,#0e2136,#06101d 70%);border:1px solid #17324c;border-radius:13px;padding:11px 14px;box-shadow:inset 0 0 24px rgba(0,0,0,.45)}
.p .n{font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:#4a6076}
.p .pv{font-family:var(--mono);font-size:26px;color:var(--green-ink);text-align:right;text-shadow:0 0 12px rgba(52,211,153,.35)}
.p .m{font-size:10px;color:#3f5266;text-align:right}
.axle{display:flex;align-items:center;gap:8px;margin:5px 0}
.axle .nm{width:54px;font-size:12px;color:var(--muted)}
.axle .av{font-family:var(--mono);width:66px;text-align:right;color:var(--text)}
.conn{font-size:12px;font-weight:600;padding:7px 12px;border-radius:9px;border:1px solid var(--line2);background:var(--raise);color:#d6e2f2;cursor:pointer}
.conn.on{background:var(--green-soft);color:var(--green-ink);border-color:#1c4430}
#banner{display:none;margin:14px 24px 0;padding:11px 16px;border-radius:11px;font-size:13px;font-weight:600;border:1px solid transparent}

/* ---------------- login ---------------- */
body.login{display:flex;min-height:100vh;align-items:center;justify-content:center;padding:20px}
.logincard{background:var(--surface);border:1px solid var(--line);border-radius:18px;padding:34px 34px 30px;width:360px;box-shadow:var(--shadow)}
.brandrow{display:flex;align-items:center;gap:12px;margin-bottom:4px}
.brandrow b{font-size:19px;font-family:"Space Grotesk"}
.logincard .sub{color:var(--muted);font-size:13px;margin:2px 0 20px}
.logincard label{margin-top:12px}
.logincard input{width:100%}
.logincard button{width:100%;margin-top:22px;padding:11px;font-size:14px;background:var(--brand);color:#fff}
.logincard button:hover{background:var(--brand-2);filter:none}
.err{background:var(--danger-soft);color:var(--danger);font-size:12px;padding:9px 11px;border-radius:9px;margin-top:12px;border:1px solid #f0c2ba}
.login-foot{text-align:center;color:var(--faint);font-size:11px;margin-top:18px}

/* ---------------- modal ---------------- */
.modal-ov{position:fixed;inset:0;background:rgba(31,33,36,.55);z-index:60;display:flex;align-items:center;justify-content:center;padding:20px}
.modal{background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:22px 24px;width:440px;max-width:100%;box-shadow:var(--shadow)}
.modal h3{color:var(--text);text-transform:none;letter-spacing:-.01em;font-size:17px;margin:0 0 4px;font-family:"Space Grotesk"}
.modal .hint{color:var(--muted);font-size:12px;margin:0 0 14px;line-height:1.5}
.drow{display:flex;align-items:center;gap:12px;padding:11px 0;border-bottom:1px solid var(--line)}
.drow .dl2{flex:1;font-size:14px}
.drow .st{font-size:11px;color:var(--faint);min-width:74px;text-align:right}
.drow .st.ok{color:var(--green-ink)}
.drow .st.err{color:var(--danger)}

/* ---------------- responsive ---------------- */
@media (max-width:900px){
  .side{position:fixed;left:0;top:0;transform:translateX(-100%);transition:transform .22s ease;box-shadow:var(--shadow)}
  .side.open{transform:none}
  .overlay.show{display:block}
  .hamb{display:inline-flex;align-items:center;justify-content:center}
  .wrap{padding:0 16px;margin:16px auto}
  .disp{grid-template-columns:1fr 1fr}
}
@media print{
  .side,.tbar,#banner,.overlay{display:none!important}
  .mainwrap{display:block}.wrap{margin:0;padding:0;max-width:none}
  body{background:#fff;color:#000}
}