/* Oma Meiliboxi v2 — design tokens (matches Meiliboxi Stripe-style redesign) */
:root {
  --mb-orange: #FF8C42;
  --mb-orange-dark: #E5743A;
  --mb-orange-soft: #FFF0D4;
  --mb-orange-text: #8B6914;
  --mb-ink: #0D0D0D;
  --mb-muted: #6F6F73;
  --mb-bg: #F4F4F6;
  --mb-card: #FFFFFF;
  --mb-border: #ECECEC;
  --mb-border-soft: #F4F4F4;
  --mb-input-bg: #FAFAFA;
  --mb-input-border: #DDDDDD;
  --mb-green: #16A34A;
  --mb-red: #DC2626;
  --mb-font: 'Geist', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', sans-serif;
  --mb-mono: 'Geist Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; font-family: var(--mb-font); background: var(--mb-bg); color: #111; -webkit-font-smoothing: antialiased; }
a { color: var(--mb-orange); text-decoration: none; }
a:hover { text-decoration: underline; }
input:focus, textarea:focus, select:focus { outline: 2px solid var(--mb-orange); outline-offset: -1px; }
button { font-family: inherit; }

/* ── Stamp logo ──────────────────────────────────────────── */
.stamp { display: inline-block; vertical-align: middle; }
.stamp-mark { fill: var(--mb-orange); }
.stamp-perforation { fill: var(--mb-bg); }
.stamp-letter { fill: #fff; font-family: var(--mb-font); font-weight: 800; }

/* ── Top nav ─────────────────────────────────────────────── */
.oma-nav {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 32px; background: #fff; border-bottom: 1px solid var(--mb-border);
}
.oma-nav-brand { display: flex; align-items: center; gap: 12px; color: #111; font-weight: 700; letter-spacing: -.3px; }
.oma-nav-brand .stamp { width: 36px; height: 36px; }
.oma-nav-brand .brand-text { font-size: 17px; }
.oma-nav-links { display: flex; gap: 28px; font-size: 14px; color: #555; font-weight: 500; }
.oma-nav-links a { color: #555; }
.oma-nav-links .active { color: var(--mb-orange); font-weight: 600; }

/* ── Layout shell ────────────────────────────────────────── */
.oma-shell { display: flex; min-height: calc(100vh - 65px - 78px); }
.oma-sidebar { width: 240px; padding: 24px 16px; border-right: 1px solid var(--mb-border); background: #FAFAFA; }
.oma-sidebar .who { font-size: 13px; color: var(--mb-muted); padding: 8px 12px; margin-bottom: 8px; }
.oma-sidebar a { display: block; padding: 10px 14px; border-radius: 10px; margin-bottom: 4px; cursor: pointer; color: #333; font-size: 14px; font-weight: 500; text-decoration: none; }
.oma-sidebar a:hover { background: #F0F0F2; }
.oma-sidebar a.active { background: var(--mb-orange); color: #fff; font-weight: 600; }
.oma-sidebar .divider { margin-top: 16px; border-top: 1px solid #E4E4E4; padding-top: 16px; }
.oma-sidebar .logout { padding: 10px 14px; font-size: 14px; color: #999; cursor: pointer; }
.oma-sidebar .logout:hover { color: var(--mb-red); }

.oma-content { flex: 1; padding: 32px 40px; max-width: 1100px; }
.oma-content h2 { font-size: 28px; font-weight: 600; letter-spacing: -0.6px; margin: 0 0 8px; }
.oma-content > p.lead { font-size: 14.5px; color: var(--mb-muted); margin: 0 0 28px; line-height: 1.5; }

/* ── Cards ───────────────────────────────────────────────── */
.card { background: var(--mb-card); border: 1px solid var(--mb-border); border-radius: 16px; padding: 24px 28px; }
.card h3 { font-size: 16px; font-weight: 600; color: var(--mb-orange); margin: 0 0 18px; display: flex; align-items: center; gap: 10px; }
.card + .card { margin-top: 16px; }
.card-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 16px; }
.card-grid-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 16px; margin-bottom: 16px; }

/* ── Inputs ──────────────────────────────────────────────── */
label.field-label { font-size: 13px; color: #555; display: block; margin-bottom: 6px; font-weight: 500; }
input[type="text"], input[type="email"], input[type="password"], input[type="tel"], textarea, select {
  width: 100%; padding: 10px 14px; border-radius: 8px; border: 1px solid var(--mb-input-border);
  font-size: 14px; background: #fff; font-family: var(--mb-font); margin-bottom: 14px;
}
textarea { resize: vertical; min-height: 96px; }

.btn { display: inline-block; background: var(--mb-orange); color: #fff; border: none; padding: 10px 20px; border-radius: 8px; font-size: 14px; font-weight: 600; cursor: pointer; text-decoration: none; }
.btn:hover { background: var(--mb-orange-dark); text-decoration: none; }
.btn-ink { background: var(--mb-ink); color: #fff; }
.btn-ink:hover { background: #222; }
.btn-ghost { background: transparent; border: 1px solid var(--mb-input-border); color: #555; }
.btn-ghost:hover { background: #fafafa; }
.btn-lg { padding: 14px 24px; font-size: 15px; }
.btn-full { width: 100%; }

/* ── Definition rows ─────────────────────────────────────── */
.kv-row { display: flex; justify-content: space-between; padding: 10px 0; border-bottom: 1px solid var(--mb-border-soft); font-size: 14px; }
.kv-row:last-child { border-bottom: none; }
.kv-row .k { color: var(--mb-muted); }
.kv-row .v { font-weight: 600; font-family: var(--mb-mono); font-size: 13px; }

/* ── Tables ──────────────────────────────────────────────── */
table.data { width: 100%; font-size: 13.5px; border-collapse: collapse; }
table.data thead tr { border-bottom: 1px solid var(--mb-border); }
table.data th { text-align: left; padding: 8px 6px; font-weight: 600; font-size: 12.5px; color: #777; }
table.data td { padding: 10px 6px; border-bottom: 1px solid var(--mb-border-soft); }
table.data tbody tr:last-child td { border-bottom: none; }
.text-right { text-align: right; }
.text-mono { font-family: var(--mb-mono); font-size: 13px; }
.text-muted { color: var(--mb-muted); }

/* ── Pills / badges ──────────────────────────────────────── */
.pill { display: inline-block; padding: 3px 10px; border-radius: 6px; font-size: 12px; font-weight: 600; }
.pill-warn { background: var(--mb-orange-soft); color: var(--mb-orange-text); }
.pill-green { background: #DCFCE7; color: var(--mb-green); }
.pill-red { background: #FEE2E2; color: var(--mb-red); }
.pill-gray { background: #F0F0F0; color: #777; }

/* ── Progress bar ────────────────────────────────────────── */
.progress { background: #F0F0F0; border-radius: 99px; height: 24px; overflow: hidden; position: relative; }
.progress > span { display: block; background: var(--mb-orange); height: 100%; border-radius: 99px; }
.progress .label { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); font-size: 12px; font-weight: 600; color: #666; }

/* ── Plan picker ─────────────────────────────────────────── */
.plan-picker { display: grid; grid-template-columns: repeat(3, 1fr); border: 1px solid var(--mb-input-border); border-radius: 10px; overflow: hidden; margin-bottom: 24px; }
.plan-picker > label { padding: 14px 16px; text-align: center; font-size: 14px; font-weight: 600; cursor: pointer; background: #fff; color: var(--mb-orange); border-right: 1px solid var(--mb-input-border); }
.plan-picker > label:last-child { border-right: none; }
.plan-picker input { display: none; }
.plan-picker input:checked + label { background: var(--mb-orange); color: #fff; }

/* ── Payment provider chips ──────────────────────────────── */
.providers { background: #F9F9F9; border: 1px solid var(--mb-border); border-radius: 12px; padding: 20px; display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; align-items: center; }
.providers span { background: #fff; border: 1px solid var(--mb-input-border); border-radius: 6px; padding: 4px 10px; font-size: 11px; color: #444; font-weight: 600; }

/* ── Footer ──────────────────────────────────────────────── */
.oma-footer { background: var(--mb-ink); padding: 28px 32px; }
.oma-footer .row { display: flex; justify-content: space-between; align-items: center; }
.oma-footer a, .oma-footer span { color: #999; font-size: 13px; }
.oma-footer .copy { font-size: 12px; color: #666; }

/* ── Login page ──────────────────────────────────────────── */
.login-page { background: var(--mb-bg); min-height: 100vh; display: flex; flex-direction: column; }
.login-wrap { flex: 1; display: flex; align-items: center; justify-content: center; padding: 40px; }
.login-card { background: #fff; border-radius: 20px; padding: 48px 44px; width: 440px; box-shadow: 0 8px 30px -10px rgba(0,0,0,0.08); }
.login-card .stamp-large { width: 72px; height: 72px; display: block; margin: 0 auto 16px; }
.login-card h1 { font-size: 24px; font-weight: 600; margin: 0 0 6px; letter-spacing: -0.4px; text-align: center; }
.login-card .subtitle { font-size: 14px; color: var(--mb-muted); margin: 0 0 36px; text-align: center; }
.login-card label { font-size: 13px; font-weight: 600; color: #333; display: block; margin-bottom: 6px; }
.login-card input { background: var(--mb-input-bg); border-radius: 10px; }
.login-card .recaptcha-fake { background: var(--mb-input-bg); border: 1px solid var(--mb-input-border); border-radius: 10px; padding: 14px 16px; margin-bottom: 24px; display: flex; align-items: center; gap: 12px; font-size: 14px; color: #444; }
.login-card .recaptcha-fake .box { width: 24px; height: 24px; border: 2px solid #CCC; border-radius: 4px; }
.login-card .recaptcha-fake .label-rc { margin-left: auto; font-size: 10px; color: #999; }
.login-card .login-btn { width: 100%; padding: 14px; border-radius: 10px; }
.login-card .secondary { width: 100%; padding: 12px; border-radius: 10px; border: 1px solid var(--mb-input-border); background: #fff; font-size: 14px; cursor: pointer; margin-top: 12px; }
.login-card .secondary.muted { color: var(--mb-muted); }
.login-card .secondary.accent { color: var(--mb-orange); font-weight: 600; }
.error-banner { background: #FEE2E2; color: var(--mb-red); border-radius: 8px; padding: 10px 14px; margin-bottom: 18px; font-size: 13.5px; }

.mock-banner { background: var(--mb-orange-soft); color: var(--mb-orange-text); padding: 8px 16px; text-align: center; font-size: 12.5px; border-bottom: 1px solid #f0d49b; font-weight: 600; }

/* ── Responsive ─────────────────────────────────────────── */
@media (max-width: 880px) {
  .oma-shell { flex-direction: column; }
  .oma-sidebar { width: 100%; border-right: none; border-bottom: 1px solid var(--mb-border); }
  .oma-content { padding: 24px 18px; }
  .card-grid-2, .card-grid-3 { grid-template-columns: 1fr; }
  .plan-picker { grid-template-columns: 1fr; }
  .plan-picker > label { border-right: none; border-bottom: 1px solid var(--mb-input-border); }
}