:root {
  --shell:#354A5F; --shell-d:#25313F; --accent:#0070F2; --accent-d:#0040B0;
  --bg:#F7F7F7; --card:#FFFFFF; --line:#D9D9D9; --line-soft:#E5E5E5;
  --ink:#32363A; --ink-2:#6A6D70;
  --good:#107E3E; --good-bg:#EAF7EE; --warn:#E9730C; --warn-bg:#FEF3E6;
  --bad:#BB0000; --bad-bg:#FBEAEA;
}
* { box-sizing:border-box; }
body { margin:0; font:14px/1.5 -apple-system,"Segoe UI",Arial,sans-serif; color:var(--ink); background:var(--bg); }
.container { max-width:1120px; margin:0 auto; padding:20px 24px; }
.container.narrow { max-width:440px; padding-top:9vh; }

.topnav { display:flex; flex-wrap:wrap; gap:2px; align-items:center; background:var(--shell); color:#fff; padding:0 16px; height:44px; }
.topnav a { color:rgba(255,255,255,.82); text-decoration:none; font-size:13px; padding:0 10px; height:44px; display:flex; align-items:center; border-bottom:3px solid transparent; }
.topnav a:not(.brand) { position:relative; }
.topnav a:not(.brand)::after {
  content:"";
  position:absolute; right:0; top:50%; transform:translateY(-50%);
  width:1px; height:58%;
  background:linear-gradient(to bottom, rgba(255,255,255,0) 0%, rgba(255,255,255,.38) 50%, rgba(255,255,255,0) 100%);
}
.topnav a:not(.brand):last-of-type::after { display:none; }
.topnav a:hover { color:#fff; background:rgba(255,255,255,.06); }
.topnav .brand { font-weight:700; font-size:16px; color:#fff; padding-right:16px; letter-spacing:.2px; }
.topnav .brand span { color:#6FC3E8; }
.topnav .brand em { font-style:normal; opacity:.7; font-weight:400; font-size:12px; margin-left:4px; }
.topnav .spacer { flex:1; }
.topnav .who { font-size:12px; opacity:.75; padding:0 8px; }
.topnav .btn.ghost { color:#fff; border-color:rgba(255,255,255,.35); height:28px; padding:0 12px; font-size:12px; }
.topnav .btn.ghost:hover { background:rgba(255,255,255,.1); }
.topnav .zentoryx-mark { height:20px; width:auto; margin-left:14px; opacity:.92; display:block; }

.profile-menu { position:relative; height:44px; display:flex; align-items:center; }
.who-btn {
  background:none; border:none; color:rgba(255,255,255,.85); font:inherit; font-size:12.5px;
  padding:0 10px; height:44px; display:flex; align-items:center; gap:5px; cursor:pointer;
}
.who-btn:hover { color:#fff; }
.who-btn .caret { font-size:9px; opacity:.7; color:#6FC3E8; }
.profile-menu:focus-within .who-btn, .profile-menu:hover .who-btn { color:#fff; }
.profile-dropdown {
  position:absolute; top:44px; right:0; min-width:170px; z-index:50;
  background:#fff; color:var(--ink); border:1px solid var(--line); border-top:2px solid var(--accent);
  border-radius:0 0 4px 4px; box-shadow:0 8px 24px rgba(0,0,0,.18); overflow:hidden;
  display:none;
}
.profile-menu:hover .profile-dropdown, .profile-menu:focus-within .profile-dropdown { display:block; }
.profile-dropdown a { display:block; height:auto; padding:10px 14px; color:var(--ink); text-decoration:none; font-size:13px; font-weight:600; border:none; }
.profile-dropdown a:hover { background:rgba(0,112,242,.08); color:var(--accent-d); }

h1 { font-size:22px; font-weight:600; margin:18px 0 14px; color:var(--ink); }
h2 { font-size:15px; font-weight:600; margin:22px 0 10px; color:var(--ink); }
h3 { font-size:13px; font-weight:600; margin:14px 0 6px; }

.card { background:var(--card); border:1px solid var(--line); border-radius:4px; padding:18px; margin:12px 0; }
label { display:block; margin:12px 0; font-size:12.5px; color:var(--ink-2); font-weight:600; }
input, select, textarea {
  width:100%; max-width:420px; padding:7px 10px; margin-top:5px;
  border:1px solid var(--line); border-radius:3px; font:inherit; font-size:13.5px;
  background:#fff; color:var(--ink);
}
input:focus, select:focus, textarea:focus { outline:2px solid var(--accent); outline-offset:-1px; border-color:var(--accent); }
.rowform { display:flex; gap:10px; flex-wrap:wrap; align-items:center; }
.rowform input, .rowform select { width:auto; margin:0; }

.btn {
  display:inline-block; border:1px solid var(--line); background:#fff; color:var(--ink);
  padding:7px 16px; border-radius:3px; font:inherit; font-size:13px; font-weight:600;
  cursor:pointer; text-decoration:none; line-height:1.3;
}
.btn:hover { border-color:#B4B8BB; background:#FAFAFA; }
.btn.primary { background:var(--accent); border-color:var(--accent); color:#fff; }
.btn.primary:hover { background:var(--accent-d); border-color:var(--accent-d); }
.btn.ghost { background:transparent; border-color:transparent; color:var(--accent); }
.btn.ghost:hover { background:rgba(0,112,242,.07); }
.btn.right { float:right; }

.tbl { width:100%; border-collapse:collapse; background:var(--card); border:1px solid var(--line); border-radius:4px; overflow:hidden; margin:12px 0; font-size:13px; }
.tbl th { text-align:left; background:#F2F3F5; color:var(--ink-2); font-weight:600; font-size:11.5px; text-transform:uppercase; letter-spacing:.3px; padding:8px 12px; border-bottom:1px solid var(--line); }
.tbl td { padding:9px 12px; border-top:1px solid var(--line-soft); vertical-align:top; }
.tbl tr:hover td { background:#FAFBFC; }
.tbl td.r, .tbl th.r { text-align:right; }

.grid4 { display:grid; grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); gap:12px; margin:14px 0; }
.stat { background:var(--card); border:1px solid var(--line); border-left:3px solid var(--accent); border-radius:3px; padding:13px 15px; }
.stat span { font-size:11px; color:var(--ink-2); display:block; text-transform:uppercase; letter-spacing:.3px; }
.stat b { font-size:20px; font-weight:600; display:block; margin-top:3px; }
.stat.good { border-left-color:var(--good); } .stat.good b { color:var(--good); }
.stat.warn { border-left-color:var(--warn); } .stat.warn b { color:var(--warn); }
.stat.bad { border-left-color:var(--bad); } .stat.bad b { color:var(--bad); }

.pill { font-size:10.5px; font-weight:600; padding:2px 9px; border-radius:9px; background:#EEF0F2; color:var(--ink-2); margin-left:6px; text-transform:uppercase; letter-spacing:.2px; }
.pill.paid, .pill.kept, .pill.gentle { background:var(--good-bg); color:var(--good); }
.pill.part_paid, .pill.firm, .pill.d15 { background:var(--warn-bg); color:var(--warn); }
.pill.unpaid, .pill.broken, .pill.bad, .pill.formal, .pill.cancelled { background:var(--bad-bg); color:var(--bad); }
.pill.lang { background:#EAF1FB; color:var(--accent-d); }

.flash { padding:9px 24px; font-size:13px; font-weight:600; }
.flash.ok { background:var(--good-bg); color:var(--good); border-bottom:1px solid #C5E8CF; }
.flash.err { background:var(--bad-bg); color:var(--bad); border-bottom:1px solid #F3C6C6; }

.hero { text-align:center; padding:34px 0; }
.hero h1 { font-size:30px; }
.hero .tag { font-size:18px; font-weight:600; color:var(--ink); }
.fine { font-size:11.5px; color:var(--ink-2); font-weight:400; }
.mono { font-family:ui-monospace,Consolas,monospace; }
.mono.big { font-size:17px; letter-spacing:1.5px; }
.small { font-size:11.5px; }
.msg { background:#F2F6FB; border-left:3px solid var(--accent); padding:10px 12px; border-radius:0 3px 3px 0; font-size:13px; }
.reminder .rowline, .rowline { display:flex; gap:10px; align-items:center; flex-wrap:wrap; }
.inline { display:inline; }
.neg { color:var(--bad); } .pos { color:var(--good); }
.lowstock td { background:var(--warn-bg); }
.check { display:flex; align-items:center; gap:8px; font-weight:400; }
.check input { width:auto; margin:0; }
.viral { border-color:var(--accent); background:#F2F6FB; text-align:center; }

/* Walkthrough */
.nm-tour-overlay { position:fixed; inset:0; background:rgba(37,49,63,.55); z-index:90; }
.nm-tour-box { position:fixed; z-index:100; background:#fff; border-radius:4px; padding:18px;
  max-width:340px; box-shadow:0 8px 28px rgba(0,0,0,.22); border:1px solid var(--line); }
.nm-tour-box h3 { margin:0 0 6px; font-size:15px; }
.nm-tour-box p { margin:0 0 12px; font-size:13px; color:var(--ink-2); }
.nm-tour-box label { display:flex; align-items:center; gap:8px; cursor:pointer; font-weight:400; margin:0 0 14px; }
.nm-tour-box input[type=checkbox] { width:15px; height:15px; margin:0; flex-shrink:0; }
.nm-tour-target { position:relative; z-index:95; outline:3px solid var(--accent); border-radius:3px; }