:root { --green:#003D2D; --green2:#0a5a43; --gold:#D4AF37; --bg:#f3f6f4; --ink:#1d2b26; --muted:#5d6b65; --line:#dde5e0; --card:#fff; --shadow:0 1px 2px rgba(0,61,45,.06),0 4px 14px rgba(0,61,45,.07); }
* { box-sizing: border-box; }
html { -webkit-text-size-adjust:100%; }
body { margin:0; background:var(--bg); color:var(--ink); font:16px/1.6 system-ui,-apple-system,"Segoe UI",Tahoma,sans-serif; }
main { max-width:520px; margin:0 auto; padding:24px 16px 56px; }
main.wide { max-width:920px; padding-top:22px; }
a { color:var(--green2); }
h1 { font-size:1.5rem; line-height:1.3; margin:0 0 14px; color:var(--green); }
h2 { font-size:1.1rem; margin:26px 0 10px; color:var(--green); }
code { font-family:ui-monospace,Menlo,Consolas,monospace; }
:focus-visible { outline:3px solid var(--gold); outline-offset:2px; }

/* sign-in pages */
.logo { font-weight:800; letter-spacing:.12em; color:var(--green); border-bottom:3px solid var(--gold); padding-bottom:8px; margin-bottom:18px; }
label { display:block; margin:12px 0; font-weight:600; }
input { display:block; width:100%; margin-top:6px; padding:12px 14px; font:inherit; border:1px solid var(--line); border-radius:12px; background:#fff; transition:border-color .15s, box-shadow .15s; }
input:focus { outline:none; border-color:var(--green2); box-shadow:0 0 0 3px rgba(212,175,55,.45); }
.btn { display:inline-block; margin-top:8px; padding:12px 22px; font:inherit; font-weight:700; color:#fff; background:var(--green); border:0; border-radius:12px; cursor:pointer; text-decoration:none; transition:background .15s, transform .05s; }
.btn:hover { background:var(--green2); }
.btn:active { transform:translateY(1px); }
.btn.secondary { background:#fff; color:var(--green); border:1px solid var(--green); margin-top:0; }
.btn.secondary:hover { background:#eef5f1; }
.btn.danger { background:#8a1c14; }
.btn.danger:hover { background:#a32219; }
.err { background:#fdecea; color:#8a1c14; border:1px solid #f3b8b3; padding:10px 14px; border-radius:12px; }
.warn { background:#fff6e0; color:#7a5400; border:1px solid #f0d58c; padding:10px 14px; border-radius:12px; }
.ok { color:#14532d; background:#e8f5ec; border:1px solid #b7dfc4; border-radius:12px; padding:10px 14px; }
.note { color:var(--muted); }
.key { background:#fff; border:1px dashed var(--green); padding:12px; border-radius:12px; }
.key span { display:block; color:var(--muted); font-size:.85rem; }
.key code { font-size:1.15rem; letter-spacing:.08em; word-break:break-all; }
.codes { columns:2; list-style:none; padding:0; }
.codes li { padding:4px 0; }
.langs { margin-top:24px; font-size:.9rem; }

/* signed-in top bar: row 1 = brand + tools, row 2 = page tabs */
.top { background:var(--green); border-bottom:3px solid var(--gold); }
.bar { max-width:920px; margin:0 auto; padding:10px 16px 0; }
.row { display:flex; align-items:center; justify-content:space-between; gap:10px; padding-bottom:8px; }
.brand { white-space:nowrap; color:#fff; font-weight:800; letter-spacing:.1em; display:inline-flex; align-items:center; gap:8px; font-size:.95rem; }
.dot { width:10px; height:10px; border-radius:50%; background:var(--gold); display:inline-block; }
.tools { display:inline-flex; align-items:center; gap:10px; }
.tools form { margin:0; }
.langs2 { display:inline-flex; gap:2px; align-items:center; background:rgba(255,255,255,.1); border-radius:999px; padding:2px; }
.langs2 a, .langs2 b { min-width:30px; text-align:center; padding:3px 8px; font-size:.82rem; border-radius:999px; color:#e6f0eb; text-decoration:none; }
.langs2 b { background:var(--gold); color:var(--green); }
.langs2 a:hover { background:rgba(255,255,255,.14); }
.linkbtn { background:none; border:1px solid rgba(255,255,255,.35); color:#fff; padding:4px 12px; font:inherit; font-size:.85rem; border-radius:999px; cursor:pointer; white-space:nowrap; }
.linkbtn:hover { background:rgba(255,255,255,.14); }
.top nav { display:flex; gap:4px; }
.top nav a { flex:1 1 0; text-align:center; max-width:200px; color:#cfe0d8; text-decoration:none; font-weight:600; padding:9px 12px; border-radius:12px 12px 0 0; transition:background .15s; }
.top nav a:hover { background:rgba(255,255,255,.1); }
.top nav a.on { background:var(--bg); color:var(--green); }

/* dashboard */
.hello { display:flex; align-items:center; gap:14px; background:linear-gradient(135deg,#fff,#eef5f1); border:1px solid var(--line); border-radius:18px; padding:16px 18px; box-shadow:var(--shadow); margin-bottom:14px; }
.hello .av { width:52px; height:52px; font-size:1.4rem; }
.hello p { margin:0; }
.hello .hi { font-size:1.1rem; }
.hello .role { color:var(--muted); font-size:.9rem; }
.cards { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; margin:14px 0; }
.card { position:relative; background:var(--card); border:1px solid var(--line); border-radius:16px; padding:14px; box-shadow:var(--shadow); }
.card span { display:block; font-size:.85rem; color:var(--muted); margin-top:8px; }
.card b { font-size:1.9rem; line-height:1.2; color:var(--green); }
a.card { display:block; text-decoration:none; color:inherit; transition:transform .12s, box-shadow .12s; }
a.card:hover { transform:translateY(-2px); box-shadow:0 2px 4px rgba(0,61,45,.08),0 8px 20px rgba(0,61,45,.12); }
.ic { display:inline-flex; width:40px; height:40px; align-items:center; justify-content:center; border-radius:12px; background:#e8f0ec; color:var(--green); }
.c-customers .ic { background:#fbf1cf; color:#7a5c00; }
.c-blocked .ic { background:#fdecea; color:#8a1c14; }
.c-blocked b { color:#8a1c14; }
@media (max-width:560px) {
  .cards { grid-template-columns:1fr; gap:8px; }
  .card, a.card { display:flex; align-items:center; gap:12px; padding:12px 14px; }
  .card span { margin:0; flex:1; font-size:.95rem; }
  .card b { font-size:1.5rem; }
  main.wide { padding-top:16px; }
  h1 { font-size:1.35rem; }
  th, td { padding:8px 6px; font-size:.88rem; }
  td bdi { white-space:nowrap; }
  .st { white-space:nowrap; font-size:.78rem; padding:2px 8px; }
}

/* tables + status pills */
table { width:100%; border-collapse:separate; border-spacing:0; background:var(--card); border:1px solid var(--line); border-radius:14px; overflow:hidden; box-shadow:var(--shadow); }
th, td { text-align:start; padding:10px 14px; border-bottom:1px solid var(--line); }
th { background:#f0f5f2; color:var(--muted); font-size:.85rem; font-weight:600; }
tr:last-child td { border-bottom:0; }
.st { display:inline-block; padding:2px 10px; border-radius:999px; font-size:.82rem; font-weight:600; background:#eee; color:#444; }
.st-draft { background:#eceff1; color:#455a64; }
.st-pending_review { background:#fff3cd; color:#7a5400; }
.st-approved, .st-issued { background:#dcf3e4; color:#14532d; }
.st-rejected, .st-cancelled { background:#fdecea; color:#8a1c14; }

/* customers */
.search { display:flex; gap:8px; margin:8px 0; }
.search input { margin:0; flex:1; border-radius:999px; padding-inline:18px; }
.search .btn { margin:0; border-radius:999px; }
.chips { display:flex; flex-wrap:wrap; gap:8px; margin:10px 0; }
.chip { padding:6px 14px; border:1px solid var(--line); border-radius:999px; background:#fff; text-decoration:none; font-size:.9rem; color:var(--ink); transition:background .15s; }
.chip:hover { background:#eef5f1; }
.chip.on { background:var(--green); color:#fff; border-color:var(--green); }
ul.list { list-style:none; padding:0; margin:12px 0; }
ul.list li { background:var(--card); border:1px solid var(--line); border-radius:16px; margin:10px 0; box-shadow:var(--shadow); }
ul.list li a { display:flex; gap:14px; align-items:flex-start; padding:14px; text-decoration:none; color:inherit; border-radius:16px; transition:background .12s; }
ul.list li a:hover { background:#f7faf8; }
ul.list li a .body { flex:1; min-width:0; }
ul.list li b { font-size:1.05rem; }
ul.list.plain li { padding:12px 14px; }
ul.list .ar { display:block; color:#33423c; }
ul.list .meta, .meta { display:block; font-size:.86rem; color:var(--muted); }
.badges { display:block; margin-top:6px; }
.badge { display:inline-block; font-size:.76rem; padding:2px 10px; border-radius:999px; background:#e8f0ec; color:var(--green); margin-inline-end:6px; font-weight:600; }
.badge.bad { background:#fdecea; color:#8a1c14; }
.badge.dim { background:#eee; color:#555; }
.av { flex:none; width:42px; height:42px; border-radius:50%; display:inline-flex; align-items:center; justify-content:center; font-weight:700; font-size:1.1rem; }
.av0 { background:#d9efe4; color:#0a5a43; }
.av1 { background:#fbf1cf; color:#7a5c00; }
.av2 { background:#e3e9fb; color:#2f4aa0; }
.av3 { background:#fde4ea; color:#9b2a45; }
.av4 { background:#ece3f8; color:#5b3a94; }
.pager { display:flex; justify-content:space-between; align-items:center; margin:14px 0; }
dl { display:grid; grid-template-columns:max-content 1fr; gap:8px 18px; background:var(--card); border:1px solid var(--line); border-radius:16px; padding:16px; box-shadow:var(--shadow); }
dt { color:var(--muted); }
dd { margin:0; word-break:break-word; }
form.act { background:var(--card); border:1px solid var(--line); border-radius:16px; padding:14px; margin:12px 0; box-shadow:var(--shadow); }
form.act label { display:block; margin:8px 0; }
form.act input[type=text] { width:100%; }
form.act .meta { margin:0 0 4px; }
@media (prefers-reduced-motion:reduce) { * { transition:none !important; } }
@media (max-width:400px) {
  .brand { font-size:.8rem; letter-spacing:.04em; }
  .tools { gap:6px; }
  .langs2 a, .langs2 b { min-width:26px; padding:3px 6px; }
  .linkbtn { padding:4px 9px; font-size:.8rem; }
  .bar { padding-inline:12px; }
  main.wide { padding-inline:12px; }
}
.tw { overflow-x:auto; border-radius:14px; }
.tw table { min-width:100%; }
@media (max-width:340px) { .brand { font-size:.7rem; letter-spacing:0; gap:5px; } .linkbtn { padding:4px 7px; } .langs2 a, .langs2 b { min-width:22px; padding:3px 4px; } }