/* OnlyVerified look for the chat admin, Inbox and sign-in page (chat.ozmaico.com).
 * Same palette as the OnlyVerified dashboard: ink #111, dark sidebar #0c0c0f, mint #7bf2e4,
 * warm greys, Inter, pill buttons, 16px cards. Remove: set this file to an empty string. */
@import url("https://fonts.googleapis.com/css2?family=Inter:opsz,wght@14..32,400..900&family=Space+Mono:wght@400;700&display=swap");

:root {
  /* brand ramp → mint / teal (links, focus rings, active tabs, highlights) */
  --brand-50: #e6fbf6; --brand-100: #dff9f4; --brand-200: #c7fff8; --brand-300: #7bf2e4; --brand-400: #5ee6d6;
  --brand-500: #1fb8a6; --brand-600: #0c6e60; --brand-700: #0a5c50; --brand-800: #084a41; --brand-900: #063a33;
  --brand-rgb: 94 230 214;
  /* navy ramp → OnlyVerified ink and warm greys */
  --navy-950: #0c0c0f; --navy-900: #111111; --navy-800: #2a2a2e; --navy-700: #3a3a36; --navy-600: #55544e; --navy-500: #6e6d64;
  --navy-400: #9a9791; --navy-300: #b9b6b0; --navy-200: #d8d5ce; --navy-100: #e8e4df; --navy-50: #f8f7f5;
  --canvas: #f2f2f2;
  --accent: #7bf2e4;
  --green: #1f894d; --green-50: #e4f2e8;
  --amber: #bf7e00; --amber-50: #fbedcf;
  --red: #d13b2a; --red-50: #f9dfdb;
  --radius-sm: 10px; --radius: 12px; --radius-lg: 16px;
  --shadow-card: none;
  --shadow-pop: 0 18px 40px -12px rgba(17, 17, 17, .22), 0 2px 6px rgba(17, 17, 17, .06);
  --font: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --mono: "Space Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  /* sidebar like the dashboard's */
  --sb-bg: #0c0c0f;
  --sb-text: #c9c8c4; --sb-strong: #fff; --sb-muted: #8a8984; --sb-hover: #16161a;
  --sb-active-bg: #1c1c21; --sb-active-text: #fff; --sb-active-icon: #7bf2e4; --sb-active-bar: #7bf2e4;
  --sb-border: #26262a; --sb-panel: #17171b; --sb-panel-border: #26262a; --sb-product: #7bf2e4;
  --topbar-bg: #0c0c0f; --topbar-text: #fff; --topbar-border: #26262a;
}

body { color: #3a3a36; letter-spacing: -.003em; }
h1, h2, h3, h4 { color: #111; letter-spacing: -.02em; }
h1 { font-weight: 800; }
a { color: #0c6e60; }
a:hover { color: #111; }
::selection { background: #c7fff8; color: #111; }

/* brand mark: mint tile, ink icon */
.brand-mark, .brand-initial { background: #7bf2e4; box-shadow: none; color: #111; }
.brand-mark svg { color: #111; }
.brand-name { font-weight: 800; letter-spacing: -.02em; }

/* sidebar links */
.nav-link { border-radius: 10px; }
.nav-link.active { box-shadow: none; }
.nav-section { font-family: var(--mono); font-weight: 400; letter-spacing: .1em; }

/* cards, stats, tables */
.card { border-color: #e8e4df; border-radius: 16px; box-shadow: none; }
.card-head { border-bottom-color: #e8e4df; }
.table th { background: #f8f7f5; font-family: var(--mono); font-weight: 400; letter-spacing: .08em; color: #6e6d64; }
.table tbody tr:hover td { background: #f8f7f5; }
.table tr.selected td { background: #e6fbf6; }

/* buttons: pills; primary = ink with white text */
.btn { border-radius: 999px; font-weight: 700; padding: 0 18px; box-shadow: none; border-color: #d8d5ce; color: #111; }
.btn:hover { background: #f8f7f5; border-color: #b9b6b0; color: #111; }
.btn:focus-visible { box-shadow: 0 0 0 3px rgb(94 230 214 / .45); }
.btn-primary { background: #111; border-color: #111; color: #fff; box-shadow: none; }
.btn-primary:hover { background: #2a2a2e; border-color: #2a2a2e; color: #fff; }
.btn-primary .icon { color: #7bf2e4; }
.btn-ghost { border-color: transparent; }
.btn-danger { background: #d13b2a; border-color: #d13b2a; color: #fff; }
.btn-danger:hover { background: #b33223; border-color: #b33223; }

/* fields */
.input, .select, .textarea { border-color: #d8d5ce; box-shadow: none; }
.input:focus, .select:focus, .textarea:focus { border-color: #111; box-shadow: 0 0 0 4px rgb(94 230 214 / .35); }

/* tabs and badges */
.tab.active, .tab[aria-selected="true"] { color: #111; border-bottom-color: #111; }
.badge { border-color: #e8e4df; background: #f8f7f5; color: #3a3a36; }

/* sign-in page: dark like the sidebar, a soft mint glow */
.bare, .bare.branded { background: radial-gradient(1000px 560px at 10% -10%, rgb(94 230 214 / .18), transparent 60%), #0c0c0f; }
.auth-card { border-radius: 18px; box-shadow: 0 30px 60px -20px rgba(0, 0, 0, .6); }
.auth-card .brand-name b, .auth-card .brand { --sb-product: #0c6e60; }
.auth-card .brand-name b { color: #0c6e60; }
.auth-sso { background: #e6fbf6; border-color: #c7fff8; }
.auth-sso .icon { color: #0c6e60; }
.auth-hero { background: radial-gradient(700px 420px at 0% 0%, rgb(94 230 214 / .18), transparent 60%), #0c0c0f; }