/* Quiet surfaces, readable content, one merchant accent.
   Design method: Damir Sokolovsky, unslop (CC BY 4.0). */
:root {
  --brand:#16634b; --brand-strong:#123c30; --brand-ink:#fff;
  --accent:#b49b62; --accent-soft:#f4f0e6;
  --bg:#f5f5f4; --panel:#fff; --panel-2:#f6f6f5;
  --ink:#232825; --muted:#66706b; --line:#e2e5e2;
  --danger:#af3830; --danger-soft:#fcf0ee; --ok:#246c4e;
  --radius:12px; --shadow:0 8px 24px rgba(25,31,27,.08);
  --ease:cubic-bezier(.22,1,.36,1);
  font-family:"Segoe UI",-apple-system,BlinkMacSystemFont,"PingFang SC","Microsoft YaHei",sans-serif;
  color-scheme:light;
}
:root[data-theme="ocean"] { --brand:#245ba6; --brand-strong:#203d66; --accent:#5385ae; --accent-soft:#eef3f8; }
* { box-sizing:border-box; }
html,body { margin:0; min-height:100%; }
body { background:var(--bg); color:var(--ink); font-size:14px; line-height:1.5; font-variant-numeric:tabular-nums; }
a { color:var(--brand); text-underline-offset:3px; }
button,input,textarea,select { font:inherit; color:inherit; }
button,a,input,select,textarea,summary { -webkit-tap-highlight-color:transparent; }
h1,h2,h3,strong,b { font-weight:600; }
button { touch-action:manipulation; }
[hidden] { display:none !important; }
:focus-visible { outline:2px solid var(--brand); outline-offset:3px; }
::selection { background:#dcece4; color:#183d2c; }
input::placeholder,textarea::placeholder { color:#767e79; opacity:1; }
.us-btn { text-decoration:none; display:inline-flex; align-items:center; justify-content:center; gap:8px; min-height:36px; border:1px solid var(--line); background:var(--panel); color:var(--ink); border-radius:8px; padding:6px 12px; cursor:pointer; font-size:13px; font-weight:500; white-space:nowrap; transition:background-color 140ms var(--ease),border-color 140ms var(--ease),color 140ms var(--ease); }
.us-btn:hover:not(:disabled) { background:var(--panel-2); border-color:#b9c1ba; }
.us-btn:disabled { opacity:.45; cursor:default; }
.us-btn.primary { background:var(--brand); border-color:var(--brand); color:var(--brand-ink); }
.us-btn.primary:hover:not(:disabled) { background:var(--brand-strong); border-color:var(--brand-strong); }
.us-btn.danger { color:var(--danger); border-color:#e9d2ce; }
.us-btn.danger:hover:not(:disabled) { background:var(--danger-soft); }
.us-btn.ghost { background:transparent; border-color:transparent; }
.us-btn.ghost:hover:not(:disabled) { background:var(--panel-2); border-color:transparent; }
.us-btn.small { min-height:32px; padding:4px 8px; font-size:12px; }
.us-input,.us-select,.us-textarea { width:100%; min-width:0; min-height:40px; border:1px solid #d4dad5; border-radius:8px; padding:8px 12px; background:var(--panel); transition:border-color 140ms var(--ease); }
.us-input:hover,.us-select:hover,.us-textarea:hover { border-color:#aeb9b1; }
.us-textarea { resize:vertical; min-height:80px; line-height:1.6; }
.us-field { display:grid; gap:8px; margin-bottom:20px; }
.us-field>span { font-size:13px; color:var(--muted); font-weight:500; }
.us-row { display:flex; gap:8px; align-items:center; flex-wrap:wrap; }
.us-grow { flex:1 1 auto; min-width:0; }
.us-muted { color:var(--muted); }
.us-small { font-size:12px; line-height:1.5; }
.us-avatar { display:block; flex:0 0 auto; width:36px; height:36px; border-radius:50%; object-fit:cover; background:#f0f1ee; }
.us-error-text { color:var(--danger); }
.us-ok-text { color:var(--ok); }
.us-card { background:var(--panel); border:1px solid var(--line); border-radius:var(--radius); padding:24px; }
.us-topbar { display:flex; align-items:center; gap:16px; min-height:64px; padding:12px 24px; background:var(--panel); color:var(--ink); border-bottom:1px solid var(--line); }
.us-topbar .us-brand { display:flex; align-items:center; gap:12px; min-width:0; font-size:15px; font-weight:600; }
.us-topbar .us-brand img { width:32px; height:32px; border-radius:8px; object-fit:cover; background:var(--panel-2); }
.us-logo-fallback { width:32px; height:32px; flex:0 0 auto; border-radius:8px; display:grid; place-items:center; background:var(--brand); color:var(--brand-ink); font-size:16px; font-weight:500; }
.us-topbar nav { display:flex; gap:8px; margin-left:auto; align-items:center; flex-wrap:wrap; }
.us-topbar nav>a { text-decoration:none; color:var(--muted); font-size:13px; padding:8px; border-radius:8px; }
.us-topbar nav>a:hover { background:var(--panel-2); color:var(--ink); }
.us-badge { display:inline-flex; align-items:center; gap:4px; border-radius:4px; padding:2px 8px; font-size:12px; line-height:20px; background:var(--panel-2); border:1px solid var(--line); color:var(--muted); white-space:nowrap; }
.us-badge.brand { background:var(--accent-soft); border-color:transparent; color:var(--brand-strong); }
.us-badge.ok { background:#edf5ef; color:var(--ok); border-color:transparent; }
.us-badge.warn { background:var(--danger-soft); color:var(--danger); border-color:transparent; }
.us-dot { width:8px; height:8px; flex:0 0 auto; border-radius:50%; background:#8d9690; display:inline-block; }
.us-dot.on { background:#2b865b; }
.us-table { width:100%; border-collapse:collapse; font-size:13px; }
.us-table th,.us-table td { text-align:left; padding:12px 16px; border-bottom:1px solid var(--line); vertical-align:middle; }
.us-table th { font-size:12px; color:var(--muted); font-weight:500; background:var(--panel-2); white-space:nowrap; }
.us-table tbody tr { background:var(--panel); }
.us-table tbody tr:hover { background:#fafbf9; }
.us-table tbody tr:focus-within { background:#f2f6f2; }
.us-tabs { display:flex; gap:4px; border-bottom:1px solid var(--line); margin-bottom:16px; overflow-x:auto; }
.us-tabs button { border:0; background:transparent; padding:12px 16px; cursor:pointer; color:var(--muted); border-bottom:2px solid transparent; white-space:nowrap; }
.us-tabs button:hover { color:var(--ink); background:var(--panel-2); }
.us-tabs button[aria-selected="true"] { color:var(--brand); border-bottom-color:var(--brand); font-weight:600; }
.us-toast-host { position:fixed; right:16px; bottom:16px; display:grid; gap:8px; z-index:1000; }
.us-toast { background:#29352f; color:#fff; padding:12px 16px; border-radius:8px; box-shadow:var(--shadow); font-size:13px; max-width:min(360px,calc(100vw - 32px)); }
.us-toast.error { background:var(--danger); }
dialog.us-dialog { color:var(--ink); border:1px solid var(--line); border-radius:12px; padding:24px; max-width:min(560px,calc(100vw - 32px)); max-height:calc(100dvh - 48px); width:100%; box-shadow:0 16px 48px rgba(20,25,22,.16); }
dialog.us-dialog::backdrop { background:rgba(23,28,25,.38); }
dialog.us-dialog h3 { margin:0 0 24px; font-size:20px; font-weight:500; }
/* Authentication is a working entrance, not a marketing hero. */
.us-auth { min-height:100vh; min-height:100dvh; display:grid; place-items:center; padding:40px 24px; background:var(--bg); }
.us-auth .us-card { width:min(440px,100%); padding:32px; }
.us-auth h1 { margin:0 0 8px; font-size:26px; line-height:1.4; font-weight:500; }
.us-auth .us-card>.us-muted { margin:0 0 32px; line-height:1.75; }
.us-auth button[type=submit] { width:100%; min-height:44px; margin-top:8px; }
.us-auth .us-field>span { color:var(--ink); }
.us-auth .us-input { min-height:44px; }
.us-auth-brand { display:flex; align-items:center; gap:12px; color:var(--muted); font-size:13px; margin-bottom:32px; }
.us-auth-brand .us-logo-fallback { width:36px; height:36px; }
.us-auth-footer { margin:24px 0 0; padding-top:20px; border-top:1px solid var(--line); color:var(--muted); font-size:12px; }
.us-auth-footer a { text-decoration:none; }
.us-auth-links { display:grid; gap:12px; margin-top:28px; }
.us-auth-links .us-btn { min-height:44px; justify-content:space-between; }
.us-error-page { display:grid; place-items:center; min-height:100vh; padding:24px; }
.us-error-page .us-card { max-width:520px; }
.us-error-page h1 { font-size:24px; font-weight:500; }
.us-empty { padding:32px 24px; text-align:center; color:var(--muted); font-size:13px; }
.us-sr { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); }
@media (max-width:640px) {
  .us-topbar { gap:12px; padding:12px 16px; flex-wrap:wrap; }
  .us-topbar nav { gap:4px; }
  .us-auth { padding:24px 16px; }
  .us-auth .us-card { padding:28px 24px; }
  .us-btn,.us-btn.small { min-height:40px; }
  dialog.us-dialog { padding:20px; }
}
@media (prefers-reduced-motion:reduce) {
  *,*::before,*::after { scroll-behavior:auto !important; transition:none !important; animation:none !important; }
}