/* ==========================================================================
   Smmize — Ink & Paper Operations Console
   A complete re-skin of the default admin shell (Tabler admin-core).
   Concept: the panel reads like a dispatch ledger, not a SaaS dashboard.
   Warm paper, ink text, one signal orange, mono numerals for live data.
   Load AFTER admin-core.css + layout.css.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Fonts (self-hosted, same family as the landing page)
   -------------------------------------------------------------------------- */
@font-face {
  font-family: 'Bricolage Grotesque';
  font-style: normal;
  font-weight: 600 800;
  font-stretch: 100%;
  font-display: swap;
  src: url(../../../fonts/lm/f4.woff2) format('woff2'),
       url(../../../fonts/lm/f5.woff2) format('woff2'),
       url(../../../fonts/lm/f6.woff2) format('woff2');
}
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url(../../../fonts/lm/f1.woff2) format('woff2'),
       url(../../../fonts/lm/f2.woff2) format('woff2'),
       url(../../../fonts/lm/f3.woff2) format('woff2');
}
@font-face {
  font-family: 'Martian Mono';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url(../../../fonts/lm/f7.woff2) format('woff2'),
       url(../../../fonts/lm/f8.woff2) format('woff2'),
       url(../../../fonts/lm/f9.woff2) format('woff2'),
       url(../../../fonts/lm/f10.woff2) format('woff2');
}

/* --------------------------------------------------------------------------
   2. Design tokens
   -------------------------------------------------------------------------- */
:root {
  --smm-paper: #F3F0E8;
  --smm-paper-deep: #EDE9DE;
  --smm-surface: #FBF9F3;
  --smm-surface-raise: #FFFFFF;
  --smm-ink: #211D16;
  --smm-ink-soft: #4A4438;
  --smm-ink-faint: #6E6756;
  --smm-line: #E0D9C8;
  --smm-line-strong: #C9C0AB;
  --smm-signal: #E2531B;
  --smm-signal-deep: #B63F12;
  --smm-ok: #2E7D4F;
  --smm-warn: #A8790C;
  --smm-bad: #B3261E;
  --smm-info: #2B5F8F;
  --smm-bar: #211D16;
  --smm-bar-text: #F3F0E8;
  --smm-shadow: 0 1px 2px rgba(33, 29, 22, 0.05), 0 4px 14px rgba(33, 29, 22, 0.05);
  --smm-shadow-lift: 0 2px 4px rgba(33, 29, 22, 0.06), 0 10px 26px rgba(33, 29, 22, 0.08);
  --smm-radius: 10px;
  --smm-radius-sm: 6px;
  --smm-font-display: 'Bricolage Grotesque', 'Archivo', sans-serif;
  --smm-font-body: 'Archivo', system-ui, sans-serif;
  --smm-font-mono: 'Martian Mono', ui-monospace, monospace;
}

body.theme-dark {
  --smm-paper: #171512;
  --smm-paper-deep: #12100D;
  --smm-surface: #1E1B16;
  --smm-surface-raise: #262219;
  --smm-ink: #EDE7D8;
  --smm-ink-soft: #BDB5A0;
  --smm-ink-faint: #9C9480;
  --smm-line: #322D24;
  --smm-line-strong: #4A4334;
  --smm-signal: #F0641F;
  --smm-signal-deep: #D9551A;
  --smm-ok: #57B57F;
  --smm-warn: #D3A63B;
  --smm-bad: #E05A50;
  --smm-info: #6FA8D8;
  --smm-bar: #0E0C09;
  --smm-bar-text: #F3F0E8;
  --smm-shadow: 0 1px 2px rgba(0, 0, 0, 0.3), 0 6px 18px rgba(0, 0, 0, 0.35);
  --smm-shadow-lift: 0 2px 6px rgba(0, 0, 0, 0.4), 0 14px 32px rgba(0, 0, 0, 0.45);
}

/* --------------------------------------------------------------------------
   3. Base
   -------------------------------------------------------------------------- */
body {
  font-family: var(--smm-font-body);
  background-color: var(--smm-paper);
  background-image: radial-gradient(circle at 18% 0%, rgba(226, 83, 27, 0.045), transparent 34%),
                    radial-gradient(circle at 92% 8%, rgba(46, 125, 79, 0.04), transparent 28%);
  background-attachment: fixed;
  color: var(--smm-ink);
  font-size: 0.9rem;
  letter-spacing: 0.005em;
}
body.theme-dark {
  background-color: var(--smm-paper) !important;
  color: var(--smm-ink);
}

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6,
.card-title, .page-title, .modal-title, .page-header h1, .navbar-heading .text {
  font-family: var(--smm-font-display);
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--smm-ink);
}

a { color: var(--smm-signal-deep); }
a:hover { color: var(--smm-signal); }
body.theme-dark a { color: var(--smm-signal); }

::selection { background: rgba(226, 83, 27, 0.22); }

*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb { background: var(--smm-line-strong); border-radius: 6px; border: 2px solid var(--smm-paper); }
*::-webkit-scrollbar-thumb:hover { background: var(--smm-ink-faint); }

/* --------------------------------------------------------------------------
   4. Header
   -------------------------------------------------------------------------- */
/* Vertical layout: paper bar with hairline */
.js-header {
  background: var(--smm-surface-raise);
  border-bottom: 1px solid var(--smm-line-strong);
  box-shadow: 0 1px 0 rgba(33, 29, 22, 0.04);
}
.js-header .navbar-brand img { max-height: 30px; }
.js-header .nav-link { color: var(--smm-ink-soft); }
.js-header .nav-link:hover { color: var(--smm-ink); }

/* Horizontal layout (dashboard/home): ink bar, white text */
body.theme-default .header.top {
  background: var(--smm-bar) !important;
  border-bottom: 1px solid var(--smm-line-strong);
  box-shadow: none;
}
body.theme-default .header.top .text-white, body.theme-default .header.top .text-default,
body.theme-default .header.top .nav-link, body.theme-default .header.top a { color: var(--smm-bar-text) !important; }
body.theme-default .header.top .user-balance { color: var(--smm-signal) !important; border-color: rgba(243, 240, 232, 0.25); }
body.theme-default .header.top .search-box .form-control { background: rgba(243, 240, 232, 0.08); border-color: rgba(243, 240, 232, 0.2); color: var(--smm-bar-text); }
body.theme-default .header.top .search-box .form-control::placeholder { color: rgba(243, 240, 232, 0.55); }

/* Balance ticket in the header */
.user-balance, .header .badge.bg-indigo {
  background: transparent !important;
  color: var(--smm-signal) !important;
  font-family: var(--smm-font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.04em;
  border: 1px solid var(--smm-line);
  border-radius: 4px;
  padding: 2px 7px;
}

/* --------------------------------------------------------------------------
   5. Sidebar — the dispatch board
   -------------------------------------------------------------------------- */
.navbar-side, .js-sidebar, .sidebar {
  background: var(--smm-paper-deep);
  border-right: 1px solid var(--smm-line);
}
.navbar-side .navbar-brand-logo, .js-sidebar .navbar-brand-logo { opacity: 0.9; }

.navbar-side .navbar-heading, .js-sidebar .navbar-heading, .sidebar .navbar-heading {
  font-family: var(--smm-font-mono);
  font-size: 0.6rem;
  text-transform: uppercase;
  letter-spacing: 0.22em;
  color: var(--smm-ink-soft);
  padding-top: 1.1rem;
}
.navbar-side .navbar-heading .text, .js-sidebar .navbar-heading .text { color: inherit; }

/* sidebar groups: divider + rhythm so sections read as blocks */
.navbar-side .navbar-heading, .js-sidebar .navbar-heading, .sidebar .navbar-heading {
  margin-top: 1rem;
  padding-top: 0.85rem;
  border-top: 1px solid var(--smm-line);
}
.navbar-side .navbar-heading:first-of-type, .js-sidebar .navbar-heading:first-of-type, .sidebar .navbar-heading:first-of-type {
  margin-top: 0.4rem;
  padding-top: 0.4rem;
  border-top: none;
}
.navbar-side .nav-item .nav-link, .js-sidebar .nav-item .nav-link, .sidebar .nav-item .nav-link {
  border-radius: var(--smm-radius-sm);
  margin: 1px 6px;
}


.navbar-side .navbar-nav > .nav-item > .nav-link,
.js-sidebar .navbar-nav > .nav-item > .nav-link,
.sidebar .navbar-nav > .nav-item > .nav-link {
  color: var(--smm-ink-soft);
  border-left: 2px solid transparent;
  font-size: 0.86rem;
  transition: color 0.18s ease-out, border-color 0.18s ease-out, background 0.18s ease-out;
}
.navbar-side .navbar-nav > .nav-item > .nav-link:hover,
.js-sidebar .navbar-nav > .nav-item > .nav-link:hover {
  color: var(--smm-ink);
  background: rgba(226, 83, 27, 0.05);
}
.navbar-side .navbar-nav > .nav-item > .nav-link.active,
.js-sidebar .navbar-nav > .nav-item > .nav-link.active {
  color: var(--smm-signal);
  background: rgba(226, 83, 27, 0.09);
  border-left-color: var(--smm-signal);
}
.navbar-side .navbar-nav > .nav-item > .nav-link .nav-icon,
.js-sidebar .navbar-nav > .nav-item > .nav-link .nav-icon { color: inherit; }

/* --------------------------------------------------------------------------
   6. Page header — ledger kicker
   -------------------------------------------------------------------------- */
.page-header, .app-content .page-header {
  border-bottom: 1px solid var(--smm-line);
  margin-bottom: 1.4rem;
  padding-bottom: 0.9rem;
}
.page-header h1, .page-title {
  font-size: 1.45rem;
  letter-spacing: -0.015em;
}

.app-content { background: transparent; }

/* --------------------------------------------------------------------------
   7. Cards — paper slips with hairlines
   -------------------------------------------------------------------------- */
.card {
  background: var(--smm-surface);
  border: 1px solid var(--smm-line);
  border-radius: var(--smm-radius);
  box-shadow: var(--smm-shadow);
}
.card:hover { box-shadow: var(--smm-shadow-lift); }
.card-header {
  background: transparent;
  border-bottom: 1px solid var(--smm-line);
  padding: 0.85rem 1.1rem;
}
.card-title { font-size: 0.98rem; margin-bottom: 0; }
.card-body { padding: 1.1rem; }
.card-footer {
  background: var(--smm-paper);
  border-top: 1px solid var(--smm-line);
}

/* Dashboard stat cards — log entries, not gradient tiles */
.bg-success-gradient, .bg-info-gradient, .bg-warning-gradient,
.bg-danger-gradient, .bg-inverse-gradient, .bg-indigo {
  background: var(--smm-surface) !important;
  border: 1px solid var(--smm-line);
  border-radius: var(--smm-radius);
  box-shadow: var(--smm-shadow);
  color: var(--smm-ink) !important;
}
.bg-success-gradient h4, .bg-info-gradient h4, .bg-warning-gradient h4,
.bg-danger-gradient h4, .bg-inverse-gradient h4,
.bg-success-gradient .mb-0, .bg-info-gradient .mb-0, .bg-warning-gradient .mb-0,
.bg-danger-gradient .mb-0, .bg-inverse-gradient .mb-0 {
  color: var(--smm-ink) !important;
  font-family: var(--smm-font-mono);
  font-size: 1.25rem;
  letter-spacing: -0.02em;
}
.bg-success-gradient small, .bg-info-gradient small, .bg-warning-gradient small,
.bg-danger-gradient small, .bg-inverse-gradient small {
  color: var(--smm-ink-soft) !important;
  text-transform: uppercase;
  font-family: var(--smm-font-mono);
  font-size: 0.62rem;
  letter-spacing: 0.14em;
}

/* --------------------------------------------------------------------------
   8. Tables — the ledger
   -------------------------------------------------------------------------- */
.table thead th {
  font-family: var(--smm-font-mono);
  font-size: 0.64rem;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--smm-ink-faint);
  border-bottom: 1px solid var(--smm-line-strong);
  background: transparent;
}
.table tbody td {
  border-top: 1px solid var(--smm-line);
  color: var(--smm-ink-soft);
  font-size: 0.84rem;
}
.table tbody tr { color: var(--smm-ink-soft); }
.table tbody tr:hover { background: rgba(226, 83, 27, 0.04); color: var(--smm-ink-soft); }
.table-hover tbody tr:hover { background: rgba(226, 83, 27, 0.05); color: var(--smm-ink-soft); }

/* Order IDs & numeric cells in mono */
.table td:first-child, .table .text-mono, .table [class*="order-id"] {
  font-family: var(--smm-font-mono);
  font-size: 0.78rem;
  color: var(--smm-ink);
}

/* --------------------------------------------------------------------------
   9. Status tags — typed, letter-spaced, dot-led
   -------------------------------------------------------------------------- */
.badge {
  font-family: var(--smm-font-mono);
  font-size: 0.62rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 0.3em 0.62em;
  border-radius: 4px;
  font-weight: 600;
}
.badge-success { background: rgba(46, 125, 79, 0.12); color: var(--smm-ok); border: 1px solid rgba(46, 125, 79, 0.3); }
.badge-warning { background: rgba(168, 121, 12, 0.12); color: var(--smm-warn); border: 1px solid rgba(168, 121, 12, 0.3); }
.badge-danger, .badge-error { background: rgba(179, 38, 30, 0.1); color: var(--smm-bad); border: 1px solid rgba(179, 38, 30, 0.28); }
.badge-info { background: rgba(43, 95, 143, 0.1); color: var(--smm-info); border: 1px solid rgba(43, 95, 143, 0.28); }
.badge-primary { background: rgba(226, 83, 27, 0.1); color: var(--smm-signal-deep); border: 1px solid rgba(226, 83, 27, 0.32); }
.badge-default, .badge-secondary { background: rgba(95, 88, 74, 0.1); color: var(--smm-ink-soft); border: 1px solid var(--smm-line); }
body.theme-dark .badge-primary { color: var(--smm-signal); }

/* Tabler solid badge palette -> semantic type-tags */
.badge.bg-cyan, .badge.bg-azure, .badge.bg-blue, .badge.bg-teal, .badge.bg-info { background: rgba(43, 95, 143, 0.1) !important; color: var(--smm-info) !important; border: 1px solid rgba(43, 95, 143, 0.28); }
.badge.bg-green, .badge.bg-lime, .badge.bg-success { background: rgba(46, 125, 79, 0.12) !important; color: var(--smm-ok) !important; border: 1px solid rgba(46, 125, 79, 0.3); }
.badge.bg-red, .badge.bg-danger { background: rgba(179, 38, 30, 0.1) !important; color: var(--smm-bad) !important; border: 1px solid rgba(179, 38, 30, 0.28); }
.badge.bg-orange, .badge.bg-yellow, .badge.bg-amber, .badge.bg-warning { background: rgba(168, 121, 12, 0.12) !important; color: var(--smm-warn) !important; border: 1px solid rgba(168, 121, 12, 0.3); }
.badge.bg-purple, .badge.bg-pink, .badge.bg-indigo { background: rgba(43, 95, 143, 0.1) !important; color: var(--smm-info) !important; border: 1px solid rgba(43, 95, 143, 0.28); }
.badge.bg-gray, .badge.bg-dark, .badge.bg-secondary { background: rgba(95, 88, 74, 0.1) !important; color: var(--smm-ink-soft) !important; border: 1px solid var(--smm-line); }
.badge.bg-purple-lt, .badge.bg-red-lt, .badge.bg-green-lt, .badge.bg-azure-lt, .badge.bg-yellow-lt {
  background: transparent !important; color: var(--smm-ink-soft) !important; border: 1px solid var(--smm-line);
}

/* --------------------------------------------------------------------------
   10. Buttons
   -------------------------------------------------------------------------- */
.btn {
  font-family: var(--smm-font-body);
  font-weight: 600;
  border-radius: var(--smm-radius-sm);
  transition: all 0.16s ease-out;
}
.btn-primary {
  background: var(--smm-signal);
  border-color: var(--smm-signal);
  color: #fff;
}
.btn-primary:hover, .btn-primary:focus {
  background: var(--smm-signal-deep);
  border-color: var(--smm-signal-deep);
  color: #fff;
  transform: translateY(-1px);
}
.btn-outline-primary {
  color: var(--smm-signal-deep);
  border-color: var(--smm-signal);
  background: transparent;
}
.btn-outline-primary:hover { background: var(--smm-signal); color: #fff; }
.btn-light, .btn-secondary {
  background: var(--smm-surface-raise);
  border-color: var(--smm-line);
  color: var(--smm-ink-soft);
}
.btn-light:hover, .btn-secondary:hover { color: var(--smm-ink); border-color: var(--smm-line-strong); }
.btn-dark, .btn-inverse {
  background: var(--smm-ink);
  border-color: var(--smm-ink);
  color: var(--smm-paper);
}
.btn-danger { background: var(--smm-bad); border-color: var(--smm-bad); }
.btn-danger:hover { background: #8F1F18; border-color: #8F1F18; }
.btn-outline-secondary {
  color: var(--smm-ink-soft);
  border-color: var(--smm-line-strong);
  background: transparent;
}
.btn-outline-secondary:hover,
.btn-outline-secondary:focus {
  color: var(--smm-ink);
  border-color: var(--smm-ink-soft);
  background: var(--smm-paper-deep);
}
.btn-outline-secondary .icon,
.btn-outline-secondary i { color: var(--smm-ink-faint); }
.btn-outline-secondary:hover .icon,
.btn-outline-secondary:hover i { color: var(--smm-signal); }

/* plain/ghost buttons used in row action groups */
.btn-group .btn,
.btn.btn-sm,
a.btn { color: var(--smm-ink-soft); }

/* --------------------------------------------------------------------------
   11. Forms
   -------------------------------------------------------------------------- */
.form-control, .form-control:focus {
  background: var(--smm-surface-raise);
  border: 1px solid var(--smm-line-strong);
  border-radius: var(--smm-radius-sm);
  color: var(--smm-ink);
  font-size: 0.88rem;
}
.form-control:focus {
  border-color: var(--smm-signal);
  box-shadow: 0 0 0 3px rgba(226, 83, 27, 0.12);
}
.form-control::placeholder { color: var(--smm-ink-faint); }
.form-label { font-weight: 600; color: var(--smm-ink-soft); font-size: 0.82rem; }
select.form-control, .custom-select { background-color: var(--smm-surface-raise); color: var(--smm-ink); }

/* --------------------------------------------------------------------------
   12. Modals, dropdowns, tabs, pagination
   -------------------------------------------------------------------------- */
.modal-content {
  background: var(--smm-surface);
  border: 1px solid var(--smm-line);
  border-radius: var(--smm-radius);
  box-shadow: var(--smm-shadow-lift);
}
.modal-header { border-bottom: 1px solid var(--smm-line); }
.modal-footer { border-top: 1px solid var(--smm-line); background: var(--smm-paper); }
.modal-header.bg-pantone { background: var(--smm-surface) !important; }

.dropdown-menu {
  background: var(--smm-surface);
  border: 1px solid var(--smm-line);
  border-radius: var(--smm-radius-sm);
  box-shadow: var(--smm-shadow-lift);
}
.dropdown-item { color: var(--smm-ink-soft); font-size: 0.86rem; }
.dropdown-item:hover, .dropdown-item:focus { background: rgba(226, 83, 27, 0.07); color: var(--smm-ink); }

.nav-tabs .nav-link {
  color: var(--smm-ink-soft);
  border: none;
  border-bottom: 2px solid transparent;
  font-weight: 600;
}
.nav-tabs .nav-link.active, .nav-tabs .nav-link:hover {
  color: var(--smm-signal-deep);
  border-bottom-color: var(--smm-signal);
  background: transparent;
}
body.theme-dark .nav-tabs .nav-link.active { color: var(--smm-signal); }

.page-link {
  background: var(--smm-surface);
  border-color: var(--smm-line);
  color: var(--smm-ink-soft);
  font-family: var(--smm-font-mono);
  font-size: 0.75rem;
}
.page-link:hover { background: rgba(226, 83, 27, 0.07); color: var(--smm-signal-deep); border-color: var(--smm-line); }
.page-item.active .page-link {
  background: var(--smm-signal);
  border-color: var(--smm-signal);
  color: #fff;
}
/* pagination prev/next chevron links (bare anchors) */
.pagination a:not(.page-link),
.pagination > li > a,
.pagination i.fe { color: var(--smm-ink-faint); }
.pagination a:not(.page-link):hover,
.pagination > li > a:hover,
.pagination a:not(.page-link):hover i.fe { color: var(--smm-signal); text-decoration: none; }

/* Alerts */
.alert {
  border-radius: var(--smm-radius-sm);
  border: 1px solid var(--smm-line);
  background: var(--smm-surface-raise);
  color: var(--smm-ink-soft);
}
.alert-info { background: rgba(43, 95, 143, 0.08); border-color: rgba(43, 95, 143, 0.25); color: var(--smm-info); }
.alert-danger { background: rgba(179, 38, 30, 0.08); border-color: rgba(179, 38, 30, 0.25); color: var(--smm-bad); }
.alert-success { background: rgba(46, 125, 79, 0.08); border-color: rgba(46, 125, 79, 0.25); color: var(--smm-ok); }
.alert-warning { background: rgba(168, 121, 12, 0.08); border-color: rgba(168, 121, 12, 0.25); color: var(--smm-warn); }

/* --------------------------------------------------------------------------
   13. Nav pills / custom switches / misc
   -------------------------------------------------------------------------- */
.nav-pills .nav-link { color: var(--smm-ink-soft); font-weight: 600; }
.nav-pills .nav-link.active { background: var(--smm-signal); color: #fff; }

.custom-switch-input:checked ~ .custom-switch-indicator {
  background: var(--smm-signal);
  border-color: var(--smm-signal);
}

.selectize-control.single .selectize-input {
  background: var(--smm-surface-raise);
  border-color: var(--smm-line-strong);
  border-radius: var(--smm-radius-sm);
  color: var(--smm-ink);
}
.selectize-dropdown { background: var(--smm-surface); border-color: var(--smm-line); }

/* List group / activity */
.list-group-item {
  background: var(--smm-surface);
  border-color: var(--smm-line);
  color: var(--smm-ink-soft);
}

/* Charts */
.c3 svg text { fill: var(--smm-ink-soft); font-family: var(--smm-font-mono); font-size: 10px; }
.c3-axis path, .c3-axis line, .c3-line { stroke: var(--smm-line-strong); }

/* --------------------------------------------------------------------------
   14. Order page — the placement desk
   -------------------------------------------------------------------------- */
.total_charge.btn-info {
  background: var(--smm-ink) !important;
  border-color: var(--smm-ink) !important;
  color: var(--smm-paper) !important;
  font-family: var(--smm-font-mono);
  letter-spacing: 0.03em;
  border-radius: var(--smm-radius-sm);
}
.total_charge.btn-info .charge_number { color: var(--smm-signal); font-weight: 700; }

/* --------------------------------------------------------------------------
   14b. Ledger strip (dashboard) — the operations log
   -------------------------------------------------------------------------- */
.smm-ledger {
  background: var(--smm-surface);
  border: 1px solid var(--smm-line);
  border-radius: var(--smm-radius);
  box-shadow: var(--smm-shadow);
  overflow: hidden;
}
.smm-ledger__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.55rem 1.1rem;
  border-bottom: 1px solid var(--smm-line);
  background: var(--smm-paper-deep);
}
.smm-ledger__kicker {
  font-family: var(--smm-font-mono);
  font-size: 0.62rem;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: var(--smm-ink-faint);
}
.smm-ledger__ref {
  font-family: var(--smm-font-mono);
  font-size: 0.62rem;
  letter-spacing: 0.14em;
  color: var(--smm-signal);
}
.smm-ledger__row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}
.smm-ledger__cell {
  padding: 0.95rem 1.1rem;
  border-right: 1px solid var(--smm-line);
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}
.smm-ledger__cell:last-child { border-right: none; }
.smm-ledger__label {
  font-family: var(--smm-font-mono);
  font-size: 0.6rem;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--smm-ink-faint);
}
.smm-ledger__value {
  font-family: var(--smm-font-mono);
  font-size: 1.15rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--smm-ink);
}
.smm-ledger__cell.tone-signal .smm-ledger__value { color: var(--smm-signal); }
.smm-ledger__cell.tone-ok .smm-ledger__value { color: var(--smm-ok); }
.smm-ledger__cell.tone-warn .smm-ledger__value { color: var(--smm-warn); }
.smm-ledger__cell.tone-bad .smm-ledger__value { color: var(--smm-bad); }
.smm-ledger__cell.tone-info .smm-ledger__value { color: var(--smm-info); }
.smm-ledger--tight .smm-ledger__cell { padding: 0.7rem 1.1rem; }

.smm-kicker {
  font-family: var(--smm-font-mono);
  font-size: 0.6rem;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--smm-ink-faint);
}

/* --------------------------------------------------------------------------
   15. Dark refinements
   -------------------------------------------------------------------------- */
body.theme-dark .js-header, body.theme-dark .header { background: var(--smm-surface); }
body.theme-dark .navbar-side, body.theme-dark .js-sidebar { background: var(--smm-paper-deep); }
body.theme-dark .card-footer { background: var(--smm-paper-deep); }
body.theme-dark .form-control { background: var(--smm-surface); }
body.theme-dark .modal-footer { background: var(--smm-paper-deep); }

/* --------------------------------------------------------------------------
   16. Mobile
   -------------------------------------------------------------------------- */
@media (max-width: 992px) {
  .page-header h1 { font-size: 1.2rem; }
  .table-responsive { border: 1px solid var(--smm-line); border-radius: var(--smm-radius-sm); }
}

/* Mobile / touch polish */
@media (max-width: 991.98px) {
  html, body { overflow-x: hidden; }
  .table-responsive { -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain; }
  .card, .card-body, .page, .main-content { min-width: 0; }
  .navbar .navbar-menu .nav-link { padding-left: 0.5rem; padding-right: 0.5rem; }
  .card-header .card-title { font-size: 1rem; }
  .btn-sm { padding: 0.35rem 0.6rem; }
}

/* New order: live spec strip (min / max / rate per 1K) */
.order-spec-strip {
  background: var(--smm-paper-deep, #EDE9DE);
  border: 1px solid var(--smm-line, #E0D9C8);
  border-radius: 8px;
  padding: 12px 14px 2px;
  margin-bottom: 16px;
}
.order-spec-strip .form-group { margin-bottom: 10px; }
.order-spec-strip label {
  font-family: 'Martian Mono', monospace;
  font-size: 0.6rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--smm-ink-faint, #8A8372);
  margin-bottom: 4px;
}
.order-spec-strip .form-control {
  background: transparent;
  border: none;
  box-shadow: none;
  padding: 6px 0;
  font-family: 'Martian Mono', monospace;
  font-weight: 700;
  font-size: 0.9rem;
  color: var(--smm-signal, #E2531B);
  height: auto;
}
.order-spec-strip .form-control:focus { background: transparent; }
body.theme-dark .order-spec-strip { background: rgba(243, 240, 232, 0.04); border-color: var(--smm-line, #3A362B); }

/* Empty states: ink & paper icon tile + CTA */
.smm-empty {
  width: 58px; height: 58px;
  margin: 0 auto 14px;
  border: 1px solid var(--smm-line-strong, #C9C0AB);
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--smm-paper-deep, #EDE9DE);
  color: var(--smm-signal, #E2531B);
  font-size: 1.35rem;
}
.smm-empty__msg {
  color: var(--smm-ink-soft, #5F584A);
  font-size: 0.88rem;
  max-width: 44ch;
  margin: 6px auto 0;
  line-height: 1.55;
}
body.theme-dark .smm-empty { background: rgba(243, 240, 232, 0.05); }

/* Services list: rate quick-edit + description cell */
.smm-price-edit {
  cursor: pointer;
  font-family: 'Martian Mono', monospace;
  font-weight: 700;
  color: var(--smm-signal, #E2531B);
  border-bottom: 1px dashed var(--smm-line-strong, #C9C0AB);
  padding: 2px 4px;
}
.smm-price-edit:hover { background: var(--smm-paper-deep, #EDE9DE); }
.smm-desc-cell {
  max-width: 260px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--smm-ink-soft, #5F584A);
  font-size: 0.84rem;
}

/* Dashboard status funnel: values are drill-down links */
.smm-ledger__link {
  text-decoration: none;
  border-bottom: 1px dashed currentColor;
  transition: color .15s;
}
.smm-ledger__link:hover { color: var(--smm-signal, #E2531B) !important; }

/* Client dashboard: delivery status widget */
.smm-delivery-row { display: flex; align-items: center; gap: 14px; }
.smm-delivery-id {
  font-family: 'Martian Mono', monospace;
  font-size: 0.68rem;
  color: var(--smm-ink-faint, #8A8372);
  white-space: nowrap;
}
.smm-delivery-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; font-size: 0.9rem; }
.smm-delivery-qty { font-family: 'Martian Mono', monospace; font-size: 0.72rem; color: var(--smm-ink-soft, #5F584A); white-space: nowrap; }
.smm-delivery-status {
  font-family: 'Martian Mono', monospace;
  font-size: 0.58rem;
  letter-spacing: 0.1em;
  color: var(--smm-signal, #E2531B);
  border: 1px solid var(--smm-signal, #E2531B);
  padding: 3px 8px;
  white-space: nowrap;
}
.smm-delivery-status.warn { color: #B08D2E; border-color: #B08D2E; }

/* Profile: API rate-limit meter */
.smm-rate-meter__head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  font-family: 'Martian Mono', monospace;
  font-size: 0.58rem;
  letter-spacing: 0.12em;
  color: var(--smm-ink-faint, #8A8372);
  margin-bottom: 6px;
}
.smm-rate-meter__head b { color: var(--smm-ink, #211D16); font-weight: 700; }
.smm-rate-meter__bar {
  height: 4px;
  background: var(--smm-line, #E0D9C8);
  overflow: hidden;
}
.smm-rate-meter__bar i {
  display: block;
  height: 100%;
  background: var(--smm-signal, #E2531B);
  transition: width .3s ease;
}

/* Client dashboard: onboarding checklist */
.smm-onboard {
  border: 1px solid var(--smm-line, #E0D9C8);
  background: var(--smm-paper-deep, #EDE9DE);
  padding: 16px 18px 10px;
}
.smm-onboard__head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-family: 'Martian Mono', monospace;
  font-size: 0.6rem;
  letter-spacing: 0.16em;
  color: var(--smm-ink-faint, #8A8372);
  margin-bottom: 8px;
}
.smm-onboard__step { color: var(--smm-signal, #E2531B); }
.smm-onboard__row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 9px 0;
  border-bottom: 1px dashed var(--smm-line, #E0D9C8);
  font-size: 0.9rem;
}
.smm-onboard__row:last-child { border-bottom: none; }
.smm-onboard__dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  border: 2px solid var(--smm-line-strong, #C9C0AB);
  flex: none;
}
.smm-onboard__row.ok .smm-onboard__dot { background: #57B57F; border-color: #57B57F; }
.smm-onboard__row.ok .smm-onboard__name { color: var(--smm-ink-soft, #5F584A); text-decoration: line-through; }
.smm-onboard__name { flex: 1; font-weight: 600; }
.smm-onboard__cta { font-family: 'Martian Mono', monospace; font-size: 0.62rem; letter-spacing: 0.1em; white-space: nowrap; }
.smm-onboard__cta a { color: var(--smm-signal, #E2531B); text-decoration: none; border-bottom: 1px solid var(--smm-signal, #E2531B); }
.smm-onboard__cta a:hover { color: var(--smm-ink, #211D16); border-color: var(--smm-ink, #211D16); }
body.theme-dark .smm-onboard { background: rgba(243, 240, 232, 0.04); }

/* ==========================================================================
   Affiliates — "Referral desk" page (Followiz-grade, Ink & Paper)
   ========================================================================== */
.aff-hero {
  position: relative;
  border: 1px solid var(--smm-line);
  border-radius: var(--smm-radius);
  background:
    radial-gradient(circle at 88% 12%, rgba(226, 83, 27, 0.10), transparent 34%),
    radial-gradient(circle at 6% 96%, rgba(46, 125, 79, 0.07), transparent 30%),
    var(--smm-surface);
  padding: 34px 34px 30px;
  margin-bottom: 22px;
  overflow: hidden;
}
.aff-hero-badge {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--smm-font-mono);
  font-size: 0.62rem; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--smm-signal);
  border: 1px solid var(--smm-line-strong);
  border-radius: 999px;
  padding: 5px 12px;
  margin-bottom: 14px;
  background: var(--smm-surface-raise);
}
.aff-hero h1 {
  font-size: 2.1rem; line-height: 1.08;
  margin: 0 0 10px;
  max-width: 30em;
}
.aff-hero-sub {
  color: var(--smm-ink-soft);
  font-size: 1.02rem;
  max-width: 44em;
  margin: 0 0 20px;
}
.aff-hero-stats { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; }
.aff-hero-stat { display: flex; flex-direction: column; }
.aff-hero-stat-num {
  font-family: var(--smm-font-mono);
  font-size: 1.5rem; font-weight: 700;
  color: var(--smm-ink);
}
.aff-hero-stat-label {
  font-family: var(--smm-font-mono);
  font-size: 0.58rem; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--smm-ink-faint);
}
.aff-hero-divider { width: 1px; height: 34px; background: var(--smm-line-strong); }
.aff-hero-actions { margin-top: 22px; display: flex; gap: 10px; flex-wrap: wrap; }
.aff-btn {
  display: inline-flex; align-items: center; gap: 8px;
  font-weight: 700;
  border-radius: 8px;
  padding: 10px 18px;
  text-decoration: none !important;
  cursor: pointer;
  border: 1px solid transparent;
  transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
}
.aff-btn:active { transform: translateY(1px); }
.aff-btn-primary { background: var(--smm-signal); color: #fff !important; box-shadow: var(--smm-shadow); }
.aff-btn-primary:hover { background: var(--smm-signal-deep); }
.aff-btn-outline { border-color: var(--smm-line-strong); color: var(--smm-ink) !important; background: var(--smm-surface-raise); }
.aff-btn-outline:hover { border-color: var(--smm-ink); }

.aff-card {
  border: 1px solid var(--smm-line);
  border-radius: var(--smm-radius);
  background: var(--smm-surface);
  box-shadow: var(--smm-shadow);
  margin-bottom: 22px;
}
.aff-card-head {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 16px 22px;
  border-bottom: 1px solid var(--smm-line);
}
.aff-card-title {
  font-family: var(--smm-font-display);
  font-weight: 700; font-size: 1.02rem;
  margin: 0;
  display: flex; align-items: center; gap: 9px;
}
.aff-card-title .aff-ico {
  color: var(--smm-signal);
  width: 22px; text-align: center;
}
.aff-card-body { padding: 20px 22px; }

.aff-link-row { display: flex; gap: 10px; }
.aff-link-input {
  flex: 1;
  font-family: var(--smm-font-mono);
  font-size: 0.78rem;
  color: var(--smm-ink);
  background: var(--smm-paper-deep);
  border: 1px solid var(--smm-line);
  border-radius: 8px;
  padding: 11px 14px;
  min-width: 0;
}
.aff-link-input:focus { outline: none; border-color: var(--smm-signal); }
.aff-share-row { display: flex; align-items: center; gap: 9px; margin-top: 14px; flex-wrap: wrap; }
.aff-share-label {
  font-family: var(--smm-font-mono);
  font-size: 0.58rem; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--smm-ink-faint);
  margin-right: 2px;
}
.aff-share-btn {
  width: 38px; height: 38px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%;
  border: 1px solid var(--smm-line-strong);
  background: var(--smm-surface-raise);
  color: var(--smm-ink-soft) !important;
  text-decoration: none !important;
  cursor: pointer;
  transition: all .15s ease;
}
.aff-share-btn:hover { color: #fff !important; border-color: transparent; transform: translateY(-2px); }
.aff-share-x:hover { background: #0f1419; }
.aff-share-fb:hover { background: #1877f2; }
.aff-share-tg:hover { background: #229ed9; }
.aff-share-wa:hover { background: #25d366; }
.aff-link-meta {
  display: flex; gap: 18px; flex-wrap: wrap;
  margin-top: 14px; padding-top: 12px;
  border-top: 1px dashed var(--smm-line);
}
.aff-meta-item {
  font-size: 0.86rem; color: var(--smm-ink-soft);
  display: inline-flex; align-items: center; gap: 7px;
}
.aff-meta-item .aff-ico { color: var(--smm-signal); }

.aff-tier-bar {
  display: flex; align-items: center; gap: 18px;
  padding: 18px 22px;
  border-bottom: 1px solid var(--smm-line);
  flex-wrap: wrap;
}
.aff-tier-chip {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--smm-font-mono);
  font-size: 0.7rem; letter-spacing: 0.08em; text-transform: uppercase;
  font-weight: 700;
  color: #fff;
  background: linear-gradient(135deg, var(--smm-signal), var(--smm-signal-deep));
  border-radius: 8px;
  padding: 8px 14px;
}
.aff-tier-track { flex: 1; min-width: 220px; }
.aff-tier-track-top {
  display: flex; justify-content: space-between;
  font-family: var(--smm-font-mono);
  font-size: 0.6rem; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--smm-ink-faint);
  margin-bottom: 6px;
}
.aff-tier-track-top strong { color: var(--smm-ink); }
.aff-progress {
  height: 10px;
  background: var(--smm-paper-deep);
  border: 1px solid var(--smm-line);
  border-radius: 999px;
  overflow: hidden;
}
.aff-progress-fill {
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--smm-signal), #f07d3f);
  transition: width .4s ease;
}
.aff-tiers-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 12px;
  padding: 18px 22px;
}
.aff-tier-pill {
  border: 1px solid var(--smm-line);
  border-radius: 10px;
  background: var(--smm-paper-deep);
  padding: 12px 14px;
  text-align: center;
}
.aff-tier-pill.is-current { border-color: var(--smm-signal); box-shadow: 0 0 0 1px var(--smm-signal); background: var(--smm-surface-raise); }
.aff-tier-pill-name {
  font-family: var(--smm-font-display);
  font-weight: 700; font-size: 0.92rem;
}
.aff-tier-pill-rate {
  font-family: var(--smm-font-mono);
  font-size: 1.15rem; font-weight: 700;
  color: var(--smm-signal);
}
.aff-tier-pill-req {
  font-family: var(--smm-font-mono);
  font-size: 0.58rem; letter-spacing: 0.06em;
  color: var(--smm-ink-faint);
  margin-top: 2px;
}
.aff-tier-pill .aff-tier-pill-flag { color: var(--smm-ok); margin-left: 4px; }

.aff-stats-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; padding: 0 22px 22px; }
.aff-stat {
  border: 1px solid var(--smm-line);
  border-radius: 10px;
  background: var(--smm-surface-raise);
  padding: 16px 16px 14px;
  transition: transform .15s ease, box-shadow .15s ease;
}
.aff-stat:hover { transform: translateY(-2px); box-shadow: var(--smm-shadow-lift); }
.aff-stat-ico {
  width: 34px; height: 34px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 9px;
  background: rgba(226, 83, 27, 0.10);
  color: var(--smm-signal);
  margin-bottom: 10px;
}
.aff-stat-val {
  font-family: var(--smm-font-mono);
  font-size: 1.3rem; font-weight: 700;
  line-height: 1.1;
}
.aff-stat-label {
  font-family: var(--smm-font-mono);
  font-size: 0.56rem; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--smm-ink-faint);
  margin-top: 4px;
}
.aff-stat.highlight { border-color: var(--smm-signal); background: linear-gradient(160deg, rgba(226, 83, 27, 0.08), transparent 60%), var(--smm-surface-raise); }

.aff-steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px; }
.aff-step { position: relative; border: 1px solid var(--smm-line); border-radius: 10px; background: var(--smm-surface-raise); padding: 22px 20px 18px; }
.aff-step-num {
  position: absolute; top: 14px; right: 16px;
  font-family: var(--smm-font-mono);
  font-size: 1.6rem; font-weight: 700;
  color: transparent;
  -webkit-text-stroke: 1px var(--smm-line-strong);
}
.aff-step h4 { margin: 14px 0 6px; font-size: 1rem; }
.aff-step p { margin: 0; color: var(--smm-ink-soft); font-size: 0.86rem; line-height: 1.55; }
.aff-step-ico { color: var(--smm-signal); font-size: 1.2rem; }

.aff-section-head { text-align: center; padding: 26px 22px 4px; }
.aff-section-head h2 { font-size: 1.35rem; margin: 0 0 6px; display: inline-flex; align-items: center; gap: 10px; }
.aff-section-head p { margin: 0; color: var(--smm-ink-faint); font-size: 0.88rem; }

.aff-calc { display: grid; grid-template-columns: 1fr 1fr; gap: 26px; }
.aff-calc-group label {
  font-family: var(--smm-font-mono);
  font-size: 0.6rem; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--smm-ink-faint);
  display: block; margin-bottom: 8px;
}
.aff-calc-value {
  font-family: var(--smm-font-mono);
  font-size: 1.35rem; font-weight: 700;
  margin-top: 6px;
}
.aff-range { width: 100%; accent-color: var(--smm-signal); cursor: pointer; }
.aff-calc-results { display: flex; flex-direction: column; gap: 10px; }
.aff-calc-result {
  display: flex; justify-content: space-between; align-items: baseline;
  border: 1px solid var(--smm-line);
  border-radius: 10px;
  padding: 13px 16px;
  background: var(--smm-surface-raise);
}
.aff-calc-result-label { font-size: 0.86rem; color: var(--smm-ink-soft); }
.aff-calc-result-amount { font-family: var(--smm-font-mono); font-weight: 700; font-size: 1.08rem; }
.aff-calc-result.primary { border-color: var(--smm-signal); background: linear-gradient(160deg, rgba(226, 83, 27, 0.08), transparent 60%), var(--smm-surface-raise); }
.aff-calc-result.primary .aff-calc-result-amount { color: var(--smm-signal); font-size: 1.3rem; }
.aff-calc-note {
  margin-top: 16px;
  border: 1px dashed var(--smm-line-strong);
  border-radius: 10px;
  padding: 12px 16px;
  font-size: 0.84rem;
  color: var(--smm-ink-soft);
  display: flex; gap: 10px;
}
.aff-calc-note .aff-ico { color: var(--smm-warn); }

.aff-benefits { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 14px; }
.aff-benefit { border: 1px solid var(--smm-line); border-radius: 10px; background: var(--smm-surface-raise); padding: 18px 18px 14px; transition: transform .15s ease, box-shadow .15s ease; }
.aff-benefit:hover { transform: translateY(-2px); box-shadow: var(--smm-shadow-lift); }
.aff-benefit h4 { font-size: 0.94rem; margin: 12px 0 6px; }
.aff-benefit p { margin: 0; font-size: 0.83rem; color: var(--smm-ink-soft); line-height: 1.55; }
.aff-benefit-ico { color: var(--smm-signal); font-size: 1.15rem; }

.aff-faq-item { border-bottom: 1px dashed var(--smm-line); }
.aff-faq-item:last-child { border-bottom: none; }
.aff-faq-q {
  width: 100%; text-align: left;
  background: none; border: none;
  padding: 15px 2px;
  font-weight: 700; font-size: 0.94rem;
  color: var(--smm-ink);
  cursor: pointer;
  display: flex; justify-content: space-between; align-items: center; gap: 12px;
}
.aff-faq-q .aff-faq-arrow { transition: transform .2s ease; color: var(--smm-ink-faint); }
.aff-faq-item.open .aff-faq-arrow { transform: rotate(180deg); color: var(--smm-signal); }
.aff-faq-a { display: none; padding: 0 2px 16px; color: var(--smm-ink-soft); font-size: 0.88rem; line-height: 1.6; }
.aff-faq-item.open .aff-faq-a { display: block; }

.aff-final {
  text-align: center;
  border: 1px solid var(--smm-line);
  border-radius: var(--smm-radius);
  background:
    radial-gradient(circle at 82% 20%, rgba(226, 83, 27, 0.12), transparent 40%),
    var(--smm-surface);
  padding: 40px 24px;
  margin-bottom: 22px;
}
.aff-final h2 { font-size: 1.5rem; margin: 0 0 8px; }
.aff-final p { color: var(--smm-ink-soft); margin: 0 0 20px; }

@media (max-width: 767px) {
  .aff-calc { grid-template-columns: 1fr; }
  .aff-hero { padding: 24px 20px; }
  .aff-hero h1 { font-size: 1.6rem; }
}

/* Service quality badges */
.smm-badges { display: inline-flex; gap: 6px; margin-top: 4px; flex-wrap: wrap; }
.smm-badge {
  display: inline-flex; align-items: center; gap: 4px;
  font-family: var(--smm-font-mono);
  font-size: 0.55rem; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--smm-ink-soft);
  border: 1px solid var(--smm-line-strong);
  background: var(--smm-surface-raise);
  border-radius: 999px;
  padding: 2px 8px;
}
.smm-badge i { font-size: 0.6rem; }
.smm-badge-ok { color: var(--smm-ok); border-color: rgba(46, 125, 79, 0.45); }
.smm-badge-warn { color: var(--smm-warn); border-color: rgba(168, 121, 12, 0.45); }

/* VIP progress */
.smm-vip {
  border-top: 1px dashed var(--smm-line, #E0D9C8);
  padding: 14px 18px 12px;
}
.smm-vip__head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 8px;
}
.smm-vip__label {
  font-family: var(--smm-font-mono);
  font-size: 0.6rem;
  letter-spacing: 0.16em;
  color: var(--smm-signal, #E2531B);
}
.smm-vip__num {
  font-family: var(--smm-font-mono);
  font-size: 0.62rem;
  letter-spacing: 0.08em;
  color: var(--smm-ink-faint, #8A8372);
}
.smm-vip__track {
  height: 8px;
  background: var(--smm-paper-deep, #EDE9DE);
  border: 1px solid var(--smm-line, #E0D9C8);
  border-radius: 999px;
  overflow: hidden;
}
.smm-vip__fill {
  height: 100%;
  background: linear-gradient(90deg, var(--smm-signal, #E2531B), #f07d3f);
  border-radius: 999px;
  transition: width .4s ease;
}
.smm-vip__how {
  display: flex;
  align-items: flex-start;
  gap: 7px;
  margin-top: 10px;
  font-size: 0.74rem;
  line-height: 1.5;
  color: var(--smm-ink-mut, #6E675B);
}
.smm-vip__how i { color: var(--smm-signal, #E2531B); margin-top: 2px; flex-shrink: 0; }
.smm-vip__how strong { color: var(--smm-ink, #211D16); }

.smm-vip__perks {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  align-items: center;
  margin-top: 10px;
  font-size: 0.72rem;
  color: var(--smm-ink-faint, #8A8372);
}
.smm-vip__perks-title {
  font-weight: 700;
  color: var(--smm-ink, #211D16);
}
.smm-vip__perks span::before {
  content: "\2713";
  color: var(--smm-ok, #2E7D4F);
  margin-right: 5px;
  font-weight: 700;
}
.smm-vip__perks .smm-vip__perks-title::before { content: ""; }

/* Full tier table */
.smm-vip__table {
  margin-top: 12px;
  border: 1px solid var(--smm-line, #E0D9C8);
  border-radius: var(--smm-radius-sm, 10px);
  overflow: hidden;
}
.smm-vip__table-head,
.smm-vip__table-row {
  display: grid;
  grid-template-columns: 84px 96px 62px 1fr;
  gap: 8px;
  align-items: center;
  padding: 7px 10px;
  font-size: 0.7rem;
}
.smm-vip__table-head {
  background: var(--smm-paper-deep, #EDE9DE);
  color: var(--smm-ink-faint, #8A8372);
  font-family: var(--smm-font-mono);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.smm-vip__table-row {
  border-top: 1px solid var(--smm-line, #E0D9C8);
  color: var(--smm-ink-mut, #6E675B);
}
.smm-vip__table-row.is-current {
  background: rgba(226, 83, 27, 0.08);
  color: var(--smm-ink, #211D16);
  font-weight: 600;
}
.smm-vip__table-row.is-passed { opacity: 0.6; }
.smm-vip__table-tier {
  font-weight: 700;
  color: var(--smm-ink, #211D16);
  white-space: nowrap;
}
.smm-vip__table-flag {
  font-style: normal;
  font-size: 0.58rem;
  font-family: var(--smm-font-mono);
  color: #fff;
  background: var(--smm-signal, #E2531B);
  border-radius: 4px;
  padding: 1px 5px;
  margin-left: 4px;
  letter-spacing: 0.05em;
}
.smm-vip__table-done { font-style: normal; margin-left: 4px; color: var(--smm-ok, #2E7D4F); }
.smm-vip__table-disc {
  font-family: var(--smm-font-mono);
  font-weight: 700;
  color: var(--smm-ok, #2E7D4F);
}
.smm-vip__table-perks {
  color: var(--smm-ink-mut, #6E675B);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.smm-vip__table-row.is-current .smm-vip__table-perks { color: var(--smm-ink, #211D16); }

/* Achievements */
.smm-ach {
  border-top: 1px dashed var(--smm-line, #E0D9C8);
  padding: 14px 18px 12px;
}
.smm-ach__head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 10px;
}
.smm-ach__kicker {
  font-family: var(--smm-font-mono);
  font-size: 0.6rem;
  letter-spacing: 0.16em;
  color: var(--smm-signal, #E2531B);
}
.smm-ach__count {
  font-family: var(--smm-font-mono);
  font-size: 0.62rem;
  color: var(--smm-ink-faint, #8A8372);
}
.smm-ach__row {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
  gap: 8px;
}
.smm-ach__badge {
  text-align: center;
  border: 1px solid var(--smm-line, #E0D9C8);
  border-radius: var(--smm-radius-sm, 10px);
  background: var(--smm-surface-raise, #FFF);
  padding: 9px 6px 8px;
  opacity: 0.72;
  transition: opacity 0.15s, border-color 0.15s, transform 0.15s;
}
.smm-ach__badge:hover { opacity: 1; transform: translateY(-1px); }
.smm-ach__badge.is-unlocked {
  border-color: rgba(226, 83, 27, 0.4);
  background: rgba(226, 83, 27, 0.06);
  opacity: 1;
}
.smm-ach__icon {
  font-size: 1.15rem;
  color: var(--smm-ink-faint, #8A8372);
  margin-bottom: 4px;
}
.smm-ach__badge.is-unlocked .smm-ach__icon { color: var(--smm-signal, #E2531B); }
.smm-ach__name {
  font-size: 0.64rem;
  font-weight: 700;
  color: var(--smm-ink, #211D16);
  line-height: 1.2;
  min-height: 1.6em;
  display: flex;
  align-items: center;
  justify-content: center;
}
.smm-ach__track {
  height: 4px;
  background: var(--smm-paper-deep, #EDE9DE);
  border-radius: 999px;
  overflow: hidden;
  margin-top: 6px;
}
.smm-ach__fill {
  height: 100%;
  background: var(--smm-signal, #E2531B);
  border-radius: 999px;
}
.smm-ach__badge.is-unlocked .smm-ach__fill { background: var(--smm-ok, #2E7D4F); }
.smm-ach__meta {
  margin-top: 4px;
  font-size: 0.58rem;
  color: var(--smm-ink-faint, #8A8372);
}
.smm-ach__badge.is-unlocked .smm-ach__meta { color: var(--smm-ok, #2E7D4F); font-weight: 700; }
.smm-vip__childpanel {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 10px;
  padding: 9px 12px;
  border-radius: var(--smm-radius-sm, 10px);
  background: rgba(226, 83, 27, 0.08);
  border: 1px solid rgba(226, 83, 27, 0.28);
  font-size: 0.76rem;
  color: var(--smm-ink, #211D16);
}
.smm-vip__childpanel i { color: var(--smm-signal, #E2531B); }
.smm-vip__childpanel strong { font-weight: 700; }
.smm-vip__childpanel--locked {
  background: var(--smm-paper-deep, #EDE9DE);
  border-color: var(--smm-line, #E0D9C8);
  color: var(--smm-ink-faint, #8A8372);
}
.smm-vip__childpanel--locked i { color: var(--smm-ink-faint, #8A8372); }
.smm-vip__childpanel-btn {
  margin-left: auto;
  border: 1px solid var(--smm-signal, #E2531B);
  border-radius: var(--smm-radius-sm, 10px);
  background: var(--smm-signal, #E2531B);
  color: #fff;
  font-size: 0.72rem;
  font-weight: 700;
  padding: 5px 12px;
  text-decoration: none;
}
.smm-vip__childpanel-btn:hover {
  background: var(--smm-signal-deep, #C74410);
  color: #fff;
  text-decoration: none;
}

/* ==========================================================================
   Admin dashboard — KPI grid, system strip, funnel, charts
   ========================================================================== */
.smm-kpi-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 12px;
}
.smm-kpi {
  display: flex;
  align-items: center;
  gap: 13px;
  border: 1px solid var(--smm-line, #E0D9C8);
  border-radius: 12px;
  background: var(--smm-surface-raise, #FFFFFF);
  padding: 15px 16px;
  box-shadow: var(--smm-shadow, 0 1px 2px rgba(33,29,22,.05));
  transition: transform .15s ease, box-shadow .15s ease;
}
.smm-kpi:hover { transform: translateY(-2px); box-shadow: var(--smm-shadow-lift, 0 10px 26px rgba(33,29,22,.08)); }
.smm-kpi__icon {
  width: 42px; height: 42px;
  flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 11px;
  background: rgba(226, 83, 27, 0.10);
  color: var(--smm-signal, #E2531B);
  font-size: 1.15rem;
}
.smm-kpi__body { min-width: 0; }
.smm-kpi__label {
  font-family: var(--smm-font-mono, 'Martian Mono', monospace);
  font-size: 0.56rem; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--smm-ink-faint, #8A8372);
}
.smm-kpi__value {
  font-family: var(--smm-font-mono, 'Martian Mono', monospace);
  font-size: 1.3rem; font-weight: 700;
  line-height: 1.25;
}
.smm-kpi__delta {
  font-family: var(--smm-font-mono, 'Martian Mono', monospace);
  font-size: 0.6rem; font-weight: 700;
  margin-right: 4px;
}
.smm-kpi__delta-up { color: var(--smm-ok, #2E7D4F); }
.smm-kpi__delta-down { color: var(--smm-bad, #B3261E); }
.smm-kpi__vs {
  font-size: 0.68rem;
  color: var(--smm-ink-faint, #8A8372);
}
.smm-kpi--warn .smm-kpi__icon { background: rgba(168, 121, 12, 0.12); color: var(--smm-warn, #A8790C); }

.smm-system {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 10px;
  margin-bottom: 18px;
}
.smm-system__cell {
  display: flex; flex-direction: column;
  border: 1px dashed var(--smm-line-strong, #C9C0AB);
  border-radius: 10px;
  background: var(--smm-paper-deep, #EDE9DE);
  padding: 10px 14px;
}
.smm-system__label {
  font-family: var(--smm-font-mono, 'Martian Mono', monospace);
  font-size: 0.55rem; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--smm-ink-faint, #8A8372);
}
.smm-system__value {
  font-family: var(--smm-font-mono, 'Martian Mono', monospace);
  font-size: 1.25rem; font-weight: 700;
  color: var(--smm-ink, #211D16);
}
.smm-system__link { text-decoration: none; border-bottom: 1px solid currentColor; }
.smm-system__link:hover { color: var(--smm-signal, #E2531B); }
.smm-system__cell--warn { border-color: rgba(168, 121, 12, 0.5); background: rgba(168, 121, 12, 0.06); }

.smm-funnel { margin-bottom: 16px; }
.smm-funnel:last-child { margin-bottom: 0; }
.smm-funnel__head {
  display: flex; justify-content: space-between; align-items: baseline;
  margin-bottom: 6px;
}
.smm-funnel__name { font-weight: 700; font-size: 0.88rem; }
.smm-funnel__num {
  font-family: var(--smm-font-mono, 'Martian Mono', monospace);
  font-size: 0.85rem; font-weight: 700;
}
.smm-funnel__num small {
  color: var(--smm-ink-faint, #8A8372);
  font-size: 0.62rem;
  font-weight: 400;
}
.smm-funnel__track {
  height: 9px;
  background: var(--smm-paper-deep, #EDE9DE);
  border: 1px solid var(--smm-line, #E0D9C8);
  border-radius: 999px;
  overflow: hidden;
}
.smm-funnel__fill {
  height: 100%;
  border-radius: 999px;
  transition: width .5s ease;
}
.smm-funnel__fill.tone-info { background: var(--smm-info, #2B5F8F); }
.smm-funnel__fill.tone-ok { background: var(--smm-ok, #2E7D4F); }
.smm-funnel__fill.tone-signal { background: linear-gradient(90deg, var(--smm-signal, #E2531B), #f07d3f); }

body.theme-dark .smm-system__cell { background: rgba(243, 240, 232, 0.05); }

/* ==========================================================================
   Admin dashboard — c3 charts + mobile
   ========================================================================== */
.smm-chart-wrap {
  position: relative;
  min-width: 0;
}
.smm-chart {
  height: clamp(230px, 42vw, 300px);
  min-height: 230px;
}

/* c3 theme (light) */
#statistics-area .c3 text,
#statistics-area .c3 .c3-axis-x text,
#statistics-area .c3 .c3-axis-y text {
  fill: var(--smm-ink-faint, #8A8372);
  font-family: 'Martian Mono', ui-monospace, monospace;
  font-size: 10px;
}
#statistics-area .c3 .c3-axis line,
#statistics-area .c3 .c3-axis path,
#statistics-area .c3 .c3-grid line {
  stroke: var(--smm-line, #E0D9C8);
}
#statistics-area .c3 .c3-tooltip {
  background: var(--smm-surface-raise, #FFFFFF);
  border: 1px solid var(--smm-line, #E0D9C8);
  border-radius: 8px;
  box-shadow: var(--smm-shadow-lift, 0 10px 26px rgba(33,29,22,.08));
  color: var(--smm-ink, #211D16);
}
#statistics-area .c3 .c3-tooltip th {
  background: var(--smm-paper-deep, #EDE9DE);
  color: var(--smm-ink, #211D16);
  font-family: 'Martian Mono', monospace;
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  border-radius: 6px 6px 0 0;
}
#statistics-area .c3 .c3-tooltip td {
  border-top: 1px solid var(--smm-line, #E0D9C8);
  font-size: 11px;
}
#statistics-area .c3 .c3-legend-item text {
  fill: var(--smm-ink-soft, #5F584A);
  font-family: 'Archivo', sans-serif;
  font-size: 11px;
}
#statistics-area .c3 .c3-target text.c3-text {
  fill: var(--smm-ink, #211D16);
}
#statistics-area .c3 .c3-chart-bar .c3-bar {
  stroke: none;
}

/* c3 theme (dark) */
body.theme-dark #statistics-area .c3 text,
body.theme-dark #statistics-area .c3 .c3-axis-x text,
body.theme-dark #statistics-area .c3 .c3-axis-y text {
  fill: var(--smm-ink-faint, #8A8271);
}
body.theme-dark #statistics-area .c3 .c3-axis line,
body.theme-dark #statistics-area .c3 .c3-axis path,
body.theme-dark #statistics-area .c3 .c3-grid line {
  stroke: var(--smm-line, #322D24);
}
body.theme-dark #statistics-area .c3 .c3-tooltip {
  background: var(--smm-surface-raise, #262219);
  border-color: var(--smm-line, #322D24);
}
body.theme-dark #statistics-area .c3 .c3-tooltip th {
  background: var(--smm-paper-deep, #12100D);
}

/* KPI + system + funnel: tighter on small screens */
@media (max-width: 767px) {
  .smm-kpi-grid {
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 9px;
  }
  .smm-kpi {
    padding: 12px 12px;
    gap: 10px;
  }
  .smm-kpi__icon {
    width: 34px;
    height: 34px;
    font-size: 0.95rem;
  }
  .smm-kpi__value {
    font-size: 1.05rem;
  }
  .smm-system {
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: 8px;
  }
  .smm-system__cell {
    padding: 8px 10px;
  }
  .smm-system__value {
    font-size: 1.05rem;
  }
  .smm-funnel__num small {
    display: block;
  }
}

/* ============================================================
   Design styles (theme customizer) - palette presets
   ============================================================ */
body[data-design="midnight"] {
  --smm-paper: #12151A;
  --smm-paper-deep: #0C0F13;
  --smm-surface: #181C22;
  --smm-surface-raise: #1F242C;
  --smm-ink: #E6ECF2;
  --smm-ink-soft: #9AA7B4;
  --smm-ink-faint: #67737F;
  --smm-line: #232A33;
  --smm-line-strong: #323B46;
  --smm-signal: #3EE6C1;
  --smm-signal-deep: #2BB89B;
  --smm-ok: #4CC38A;
  --smm-warn: #E5C158;
  --smm-bad: #F26D6D;
  --smm-info: #58A6FF;
  --smm-bar: #0C0F13;
  --smm-bar-text: #E6ECF2;
  --smm-shadow: 0 1px 2px rgba(0,0,0,0.35), 0 4px 14px rgba(0,0,0,0.3);
  --smm-shadow-lift: 0 2px 4px rgba(0,0,0,0.4), 0 10px 26px rgba(0,0,0,0.45);
}

body[data-design="signal"] {
  --smm-paper: #FAFAF7;
  --smm-paper-deep: #F1F1EC;
  --smm-surface: #FFFFFF;
  --smm-surface-raise: #FFFFFF;
  --smm-ink: #0F0F0F;
  --smm-ink-soft: #55524C;
  --smm-ink-faint: #8E8A80;
  --smm-line: #E6E3DA;
  --smm-line-strong: #CFCBBF;
  --smm-signal: #FF3B00;
  --smm-signal-deep: #D43200;
  --smm-ok: #1E8E4E;
  --smm-warn: #B8860B;
  --smm-bad: #D92D20;
  --smm-info: #1D6FD1;
  --smm-bar: #0F0F0F;
  --smm-bar-text: #FAFAF7;
  --smm-shadow: 0 1px 2px rgba(15,15,15,0.06), 0 4px 14px rgba(15,15,15,0.06);
  --smm-shadow-lift: 0 2px 4px rgba(15,15,15,0.08), 0 10px 26px rgba(15,15,15,0.1);
}
/* ==========================================================================
   12. Order desk — the new-order page (v2)
   Landing-style sections: mono kickers with rules, airy spacing, one
   strong confirm bar. Uses the Ink & Paper tokens above.
   ========================================================================== */

/* flex/shrink fix: native <select> min-content would force horizontal overflow */
.layout-main { min-width: 0; }
.order-desk select { max-width: 100%; min-width: 0; }
.order-desk .row > [class*="col-"] { min-width: 0; }

.order-desk {
  max-width: 1240px;
  margin: 0 auto;
  padding: 10px 0 56px;
}
.order-desk .row.od-row,
.order-desk .od-form .row,
.order-desk .row { margin-left: 0; margin-right: 0; max-width: 100%; }
.order-desk .od-form, .order-desk .tab-content, .order-desk .tab-pane { min-width: 0; }
.order-desk .od-popular { flex-wrap: wrap; }
.order-desk .od-popular-chip { flex: 0 1 auto; min-width: 0; }
.order-desk .form-group select { max-width: 100%; }
.order-desk .od-sec-body { min-width: 0; }

/* ---- header ---- */
.od-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  padding: 8px 2px 26px;
}
.od-kicker {
  font-family: var(--smm-font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.24em;
  color: var(--smm-signal);
  text-transform: uppercase;
  margin-bottom: 6px;
}
.od-title {
  margin: 0;
  font-size: 2rem;
  line-height: 1.1;
  letter-spacing: -0.02em;
}
.od-sub {
  margin: 6px 0 0;
  color: var(--smm-ink-soft);
  font-size: 0.92rem;
}
.od-head-actions { display: flex; align-items: center; gap: 12px; }
.od-balance {
  background: var(--smm-surface-raise);
  border: 1px solid var(--smm-line);
  border-radius: var(--smm-radius);
  box-shadow: var(--smm-shadow);
  padding: 8px 18px;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  min-width: 122px;
}
.od-balance-label {
  font-size: 0.64rem;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--smm-ink-faint);
  font-family: var(--smm-font-mono);
}
.od-balance-value {
  font-family: var(--smm-font-mono);
  font-weight: 700;
  font-size: 1.1rem;
  color: var(--smm-ok);
}
.od-addfunds {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--smm-signal);
  color: #fff !important;
  border-radius: var(--smm-radius-sm);
  padding: 10px 18px;
  font-weight: 700;
  font-size: 0.85rem;
  box-shadow: var(--smm-shadow);
  text-decoration: none;
  transition: background 0.15s ease;
}
.od-addfunds:hover { background: var(--smm-signal-deep); color: #fff !important; }

/* ---- tabs ---- */
.od-tabs {
  display: flex;
  gap: 4px;
  margin-bottom: 8px;
}
.od-tabs a {
  font-family: var(--smm-font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--smm-ink-faint);
  padding: 8px 14px;
  border-radius: var(--smm-radius-sm);
  border: 1px solid transparent;
  text-decoration: none;
}
.od-tabs a:hover { color: var(--smm-ink); }
.od-tabs a.active {
  color: var(--smm-signal);
  border-color: var(--smm-line-strong);
  background: var(--smm-surface-raise);
}

/* ---- sections ---- */
.od-sec {
  padding: 26px 0;
  border-top: 1px solid var(--smm-line);
}
.od-sec:first-of-type { border-top: 0; }
.od-sec-head {
  display: flex;
  align-items: baseline;
  gap: 12px;
  margin-bottom: 18px;
}
.od-sec-no {
  font-family: var(--smm-font-mono);
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--smm-signal);
}
.od-sec-title {
  font-family: var(--smm-font-display);
  font-weight: 700;
  font-size: 1.15rem;
  letter-spacing: -0.01em;
  color: var(--smm-ink);
}

.od-label {
  font-size: 0.74rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--smm-ink-soft);
  margin-bottom: 7px;
}

/* ---- search ---- */
.od-search { position: relative; }
.od-search > i {
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--smm-ink-faint);
  font-size: 0.95rem;
  z-index: 5;
  pointer-events: none;
}
.od-search .selectize-control.single .selectize-input {
  padding-left: 40px !important;
  font-size: 0.95rem;
}
.od-search .selectize-input,
.order-desk .form-control.square,
.order-desk .form-control {
  background: var(--smm-surface-raise);
  border: 1px solid var(--smm-line-strong);
  border-radius: var(--smm-radius-sm);
  color: var(--smm-ink);
  font-size: 0.9rem;
  min-height: 44px;
  padding: 8px 14px;
}
.order-desk .form-control:focus,
.order-desk .selectize-input.focus {
  border-color: var(--smm-signal);
  box-shadow: 0 0 0 3px rgba(226, 83, 27, 0.12);
}
.order-desk .selectize-dropdown {
  border: 1px solid var(--smm-line-strong);
  border-radius: var(--smm-radius-sm);
  box-shadow: var(--smm-shadow-lift);
}

/* ---- platform chips ---- */
.od-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 14px 0 22px;
}
.od-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--smm-surface-raise);
  border: 1px solid var(--smm-line);
  border-radius: 999px;
  color: var(--smm-ink-soft);
  font-weight: 600;
  font-size: 0.8rem;
  padding: 7px 14px;
  cursor: pointer;
  transition: all 0.15s ease;
}
.od-chip:hover {
  border-color: var(--smm-signal);
  color: var(--smm-signal);
}
.od-chip.active {
  border-color: var(--smm-signal);
  background: rgba(226, 83, 27, 0.08);
  color: var(--smm-signal-deep);
  box-shadow: inset 0 0 0 1px var(--smm-signal);
}
body.theme-dark .od-chip.active { background: rgba(240, 100, 31, 0.14); }
.od-chip-icon { display: inline-flex; align-items: center; }

/* ---- popular quick picks ---- */
.od-popular {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  background: var(--smm-surface);
  border: 1px dashed var(--smm-line-strong);
  border-radius: var(--smm-radius);
  padding: 12px 14px;
}
.od-popular-label {
  font-family: var(--smm-font-mono);
  font-size: 0.64rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--smm-ink-faint);
  margin-right: 4px;
}
.od-popular-chip {
  background: var(--smm-surface-raise);
  border: 1px solid var(--smm-line) !important;
  color: var(--smm-ink) !important;
  font-size: 0.76rem;
  font-weight: 600;
  border-radius: 999px;
  padding: 4px 12px;
  text-decoration: none;
  transition: border-color 0.15s ease, color 0.15s ease;
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.od-popular-chip:hover { border-color: var(--smm-signal) !important; color: var(--smm-signal) !important; }

/* ---- confirm bar ---- */
.od-confirmbar {
  background: var(--smm-bar);
  color: var(--smm-bar-text);
  border-radius: var(--smm-radius);
  padding: 14px 18px 16px;
  box-shadow: var(--smm-shadow);
}
.od-confirm-check {
  display: flex;
  align-items: center;
  gap: 9px;
  cursor: pointer;
  padding-bottom: 13px;
  margin-bottom: 13px;
  border-bottom: 1px dashed rgba(255, 255, 255, 0.22);
  user-select: none;
}
.od-confirm-check input { position: absolute; opacity: 0; pointer-events: none; }
.od-confirm-check-box {
  flex-shrink: 0;
  width: 19px;
  height: 19px;
  border: 1.5px solid rgba(255, 255, 255, 0.55);
  border-radius: 5px;
  background: transparent;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s ease, border-color 0.15s ease;
}
.od-confirm-check input:checked + .od-confirm-check-box {
  background: var(--smm-signal);
  border-color: var(--smm-signal);
}
.od-confirm-check input:checked + .od-confirm-check-box::after {
  content: "\2713";
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
}
.od-confirm-check-label {
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: var(--smm-bar-text);
  opacity: 0.92;
}
.od-confirm-check input:checked ~ .od-confirm-check-label { opacity: 1; }
.od-confirm-check.od-check-invalid .od-confirm-check-box {
  border-color: #B3261E;
  box-shadow: 0 0 0 3px rgba(179, 38, 30, 0.15);
}
.od-servicelist.od-field-invalid {
  border: 1px solid #B3261E;
  border-radius: var(--smm-radius);
}
.od-confirmbar-main {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}
.od-confirmbar-label {
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  font-family: var(--smm-font-mono);
  color: var(--smm-bar-text);
  opacity: 0.85;
  display: block;
  margin-bottom: 2px;
}
.od-confirmbar-value {
  font-family: var(--smm-font-mono);
  font-weight: 700;
  font-size: 1.6rem;
  color: var(--smm-bar-text);
  line-height: 1;
}
.od-submit {
  background: var(--smm-signal);
  border: 1px solid var(--smm-signal);
  color: #fff;
  font-weight: 700;
  font-size: 0.95rem;
  letter-spacing: 0.02em;
  border-radius: var(--smm-radius-sm);
  padding: 13px 26px;
  box-shadow: var(--smm-shadow-lift);
  white-space: nowrap;
}
.od-submit:hover {
  background: var(--smm-signal-deep);
  border-color: var(--smm-signal-deep);
  color: #fff;
}

/* ---- resume card (sticky checkout summary) ---- */
.od-resume {
  position: sticky;
  top: 16px;
  background: var(--smm-surface-raise);
  border: 1px solid var(--smm-line);
  border-radius: var(--smm-radius);
  box-shadow: var(--smm-shadow);
  padding: 20px 22px;
}
.od-resume-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 14px;
  margin-bottom: 16px;
  border-bottom: 1px dashed var(--smm-line-strong);
}
.od-resume-kicker {
  font-family: var(--smm-font-mono);
  font-size: 0.64rem;
  letter-spacing: 0.2em;
  color: var(--smm-ink-faint);
}
.od-resume-id {
  font-family: var(--smm-font-mono);
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--smm-signal);
  background: rgba(226, 83, 27, 0.1);
  border-radius: 999px;
  padding: 3px 10px;
}
.od-resume-service {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 16px;
}
.od-resume-service .service-media-logo {
  border: 1px solid var(--smm-line);
  border-radius: 10px;
  padding: 4px;
  background: var(--smm-surface);
  flex-shrink: 0;
}
.od-resume-name {
  margin: 0 0 4px;
  font-family: var(--smm-font-display);
  font-weight: 700;
  font-size: 0.98rem;
  line-height: 1.3;
  color: var(--smm-ink);
}
.od-resume-tag { font-size: 0.72rem; color: var(--smm-ink-faint); }
.od-resume-spec {
  border: 1px solid var(--smm-line);
  border-radius: var(--smm-radius-sm);
  overflow: hidden;
  margin-bottom: 16px;
}
.od-spec-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 9px 14px;
  background: var(--smm-surface);
}
.od-spec-row + .od-spec-row { border-top: 1px solid var(--smm-line); }
.od-spec-label {
  font-size: 0.74rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--smm-ink-soft);
}
.od-spec-value {
  font-family: var(--smm-font-mono);
  font-weight: 700;
  font-size: 0.88rem;
  color: var(--smm-ink);
}
.od-spec-rate { color: var(--smm-signal-deep); }
body.theme-dark .od-spec-rate { color: var(--smm-signal); }

.od-resume-desc-label {
  font-size: 0.74rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--smm-ink-soft);
  display: block;
  margin-bottom: 8px;
}
.od-resume-desc-body {
  white-space: pre-line;
  word-break: break-word;
  line-height: 1.55;
  font-size: 0.84rem;
  color: var(--smm-ink-soft);
  background: var(--smm-surface);
  border: 1px solid var(--smm-line);
  border-radius: var(--smm-radius-sm);
  padding: 12px 14px;
  min-height: 110px;
  max-height: 240px;
  overflow: auto;
}
.od-resume-total {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid var(--smm-line);
}
.od-resume-total-label {
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-family: var(--smm-font-mono);
  color: var(--smm-ink-faint);
}
.od-resume-total-value {
  font-family: var(--smm-font-mono);
  font-weight: 700;
  font-size: 1.3rem;
  color: var(--smm-signal-deep);
}
body.theme-dark .od-resume-total-value { color: var(--smm-signal); }

@media (max-width: 991px) {
  .od-resume { position: static; margin-top: 8px; }
  .od-head { align-items: flex-start; }
  .od-confirmbar-main { flex-direction: column; align-items: stretch; text-align: center; }
}

/* ==========================================================================
   17. Panel shell refinements — header chrome, list controls, row actions
   Kills the leftover Bootstrap-gray surfaces across every admin/client list.
   ========================================================================== */

/* ---- header chrome: avatar, toggler, icons ---- */
.js-header .avatar.admin-profile {
  background: var(--smm-paper-deep);
  border: 1px solid var(--smm-line-strong);
  position: relative;
}
.js-header .avatar.admin-profile::after {
  content: "\f007";
  font-family: "FontAwesome";
  font-size: 12px;
  color: var(--smm-ink-soft);
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.js-header .navbar-toggler-icon,
.js-header .navbar-toggler .icon,
.js-header .navbar-toggler .fe,
.js-header .mobile-menu { color: var(--smm-ink); }
.js-header .navbar-toggler:hover .navbar-toggler-icon,
.js-header .navbar-toggler:hover .icon { color: var(--smm-signal); }
.js-header .nav-icon .icon,
.js-header .nav-link > .icon,
.js-header .fe.fe-sliders,
.js-header .fe.fe-moon,
.js-header .fe.fe-sun { color: var(--smm-ink-soft); }
.js-header .nav-link:hover .fe.fe-sliders,
.js-header .nav-link:hover .fe.fe-moon,
.js-header .nav-link:hover .fe.fe-sun { color: var(--smm-signal); }
.js-header .dropdown-menu .dropdown-icon,
.js-header .dropdown-item i { color: var(--smm-ink-faint); }
.js-header .dropdown-item:hover .dropdown-icon,
.js-header .dropdown-item:hover i { color: var(--smm-signal); }
.js-header .leading-none { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.js-header .navbar-brand-logo,
.js-header .navbar-brand img { filter: none; }

/* ---- row action buttons + dropdowns in list rows ---- */
.dropdown-icon { color: var(--smm-ink-faint); transition: color 0.15s ease; }
.dropdown-item:hover .dropdown-icon { color: var(--smm-signal); }
.dropdown-menu .dropdown-item { color: var(--smm-ink-soft); }

/* row action icon buttons (feather edit/trash) */
.btn-group .btn i,
.btn-group .btn .icon,
.list-row-actions i,
.btn .icon.fe,
.btn i.fe { color: var(--smm-ink-faint); }
.btn-group .btn:hover i,
.btn-group .btn:hover .icon,
.btn:hover .icon.fe,
.btn:hover i.fe { color: var(--smm-signal); }
.btn-outline-danger:hover i,
.btn-outline-danger:hover .icon { color: #fff; }
.btn-outline-primary:hover i,
.btn-outline-primary:hover .icon { color: #fff; }

/* ---- checkboxes / radio / switches ---- */
.form-check-label,
.custom-control-label,
label.form-check,
.custom-control { color: var(--smm-ink-soft); }
.custom-control-input:checked ~ .custom-control-label { color: var(--smm-ink); }
.custom-checkbox .custom-control-input:checked ~ .custom-control-label::before,
.custom-radio .custom-control-input:checked ~ .custom-control-label::before {
  background: var(--smm-signal);
  border-color: var(--smm-signal);
}
.custom-control-input:focus:not(:checked) ~ .custom-control-label::before {
  border-color: var(--smm-signal);
  box-shadow: 0 0 0 3px rgba(226, 83, 27, 0.12);
}
.custom-switch-indicator {
  background: var(--smm-paper-deep);
  border: 1px solid var(--smm-line-strong);
}
.custom-switch-input:checked ~ .custom-switch-indicator {
  background: var(--smm-signal);
  border-color: var(--smm-signal);
}
body.theme-dark .custom-switch-indicator { background: var(--smm-surface); }

/* ---- list page: kill the 12px row-margin overflow ---- */
.lists-index-ajax > .row,
.page-title > .row,
.page-title .row.justify-content-between,
main.app-content > div > .row,
main.app-content > .row {
  margin-left: 0;
  margin-right: 0;
  max-width: 100%;
}

/* ---- generic Tabler gray text on ink & paper ---- */
.text-secondary { color: var(--smm-ink-soft) !important; }
.text-muted, .text-muted a { color: var(--smm-ink-faint) !important; }
.text-primary { color: var(--smm-signal-deep) !important; }
body.theme-dark .text-primary { color: var(--smm-signal) !important; }
.form-group label, .form-group .form-label { color: var(--smm-ink-soft); }

/* form hints & helper text */
.small, small, .form-hint,
.custom-switch-description { color: var(--smm-ink-faint); }

/* settings sidebar: icons + links */
.settings-sidebar .list-group-item .icon,
.settings-sidebar span.icon,
.sidebar.o-auto .list-group-item .icon,
.sidebar.o-auto span.icon { color: var(--smm-ink-faint); }
.settings-sidebar .list-group-item,
.sidebar.o-auto .list-group-item { color: var(--smm-ink-soft); border-color: var(--smm-line); background: transparent; }
.settings-sidebar .list-group-item:hover,
.settings-sidebar .list-group-item.active,
.sidebar.o-auto .list-group-item:hover,
.sidebar.o-auto .list-group-item.active { color: var(--smm-signal-deep); border-color: var(--smm-line-strong); }
.settings-sidebar .list-group-item.active .icon,
.settings-sidebar .list-group-item.active span.icon,
.sidebar.o-auto .list-group-item.active .icon,
.sidebar.o-auto .list-group-item.active span.icon { color: var(--smm-signal); }
.sidebar.o-auto h5 { color: var(--smm-ink); }
body.theme-dark .settings-sidebar .list-group-item.active,
body.theme-dark .sidebar.o-auto .list-group-item.active { color: var(--smm-signal); }

/* badge-light trust chips (add funds page) */
.badge.badge-light.border {
  background: var(--smm-paper-deep) !important;
  border-color: var(--smm-line-strong) !important;
  color: var(--smm-ink-soft) !important;
  font-family: var(--smm-font-body);
  text-transform: none;
  letter-spacing: 0.02em;
  font-weight: 600;
  border-radius: 999px;
}
.badge.badge-light.border i {
  color: var(--smm-ok);
  margin-right: 2px;
}

/* pagination pills keep paper treatment on hover of siblings */
.page-link:focus { box-shadow: 0 0 0 3px rgba(226, 83, 27, 0.12); }

/* checkbox column header in lists */
.thead-checkbox .form-check, .table .form-check { margin-bottom: 0; }

/* datatable filter selects on list pages */
.selectgroup-button { color: var(--smm-ink-soft); }
.selectgroup-item.active .selectgroup-button,
.selectgroup-input:checked + .selectgroup-button {
  background: var(--smm-signal);
  border-color: var(--smm-signal);
  color: #fff;
}
.selectgroup-input:focus + .selectgroup-button {
  color: var(--smm-signal-deep);
  border-color: var(--smm-signal);
  box-shadow: 0 0 0 3px rgba(226, 83, 27, 0.12);
}
body.theme-dark .selectgroup-input:checked + .selectgroup-button { color: #fff; }

/* header avatar circle: ink glyph, no Tabler gray */
.js-header .avatar.admin-profile { color: var(--smm-ink-soft); }

/* switch labels (custom-switch is the Tabler naming, custom-switch-label common) */
label.custom-switch,
.custom-switch,
.custom-controls-stacked { color: var(--smm-ink-soft); }

/* services bulk editor: header cells + dense switch rows */
.table thead th.text-center,
.table thead th.w-1px,
.table thead th.w-1p,
.table th.w-1p,
.table th.text-center { color: var(--smm-ink-faint); }

/* bulk editor selects: options inherit the gray, force ink */
select.form-control option,
select option { color: var(--smm-ink); background: var(--smm-surface-raise); }
body.theme-dark select.form-control option,
body.theme-dark select option { background: var(--smm-surface); }
select.form-select { color: var(--smm-ink); }
select.form-select option { color: var(--smm-ink); }

/* card collapse/remove controls */
.card-options { color: var(--smm-ink-faint); }
.card-options a:not(.btn) { color: var(--smm-ink-faint); }
.card-options a:not(.btn):hover { color: var(--smm-signal); text-decoration: none; }

/* ==========================================================================
   18. Order desk — cascade selector + service list (Followiz-style)
   ========================================================================== */

/* ---- quantity quick-set (Min/Max) + inline range hint ---- */
.od-quantity-wrap {
  display: flex;
  align-items: stretch;
  gap: 6px;
}
.od-quantity-wrap input {
  flex: 1;
  min-width: 0;
}
.od-qty-btn {
  flex-shrink: 0;
  border: 1px solid var(--smm-line-strong);
  border-radius: var(--smm-radius-sm);
  background: var(--smm-surface-raise);
  color: var(--smm-ink-mut);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 0 12px;
  cursor: pointer;
  transition: border-color 0.12s, color 0.12s, background 0.12s;
}
.od-qty-btn:hover {
  border-color: var(--smm-signal);
  color: var(--smm-signal);
  background: rgba(226, 83, 27, 0.05);
}
.od-field-hint {
  margin-top: 6px;
  font-size: 0.76rem;
  color: var(--smm-ink-faint);
}
.od-field-hint.od-hint-warn { color: var(--smm-danger, #B3261E); }
.od-qty-range { font-weight: 600; color: var(--smm-ink-mut); }

/* ---- selected service summary strip (section 02) ---- */
.od-svc-summary {
  display: flex;
  align-items: center;
  gap: 12px;
  background: rgba(226, 83, 27, 0.06);
  border: 1px solid rgba(226, 83, 27, 0.25);
  border-radius: var(--smm-radius);
  padding: 10px 14px;
  margin: -6px 0 14px;
}
.od-svc-summary-ico {
  flex-shrink: 0;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--smm-signal);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
}
.od-svc-summary-main { min-width: 0; flex: 1; }
.od-svc-summary-name {
  font-weight: 700;
  font-size: 0.9rem;
  color: var(--smm-ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.od-svc-summary-meta {
  font-size: 0.76rem;
  color: var(--smm-ink-faint);
  margin-top: 1px;
}
.od-svc-summary-change {
  flex-shrink: 0;
  border: 1px solid var(--smm-line-strong);
  border-radius: var(--smm-radius-sm);
  background: transparent;
  color: var(--smm-ink-mut);
  font-size: 0.76rem;
  font-weight: 600;
  padding: 6px 12px;
  cursor: pointer;
}
.od-svc-summary-change:hover { border-color: var(--smm-signal); color: var(--smm-signal); }

/* ---- confirm section: service context above the total ---- */
.od-confirm-ctx {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 12px;
  padding: 10px 14px;
  border: 1px dashed var(--smm-line-strong);
  border-radius: var(--smm-radius-sm);
  background: var(--smm-surface-raise);
}
.od-confirm-ctx-name {
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--smm-ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.od-confirm-ctx-tag {
  flex-shrink: 0;
  font-family: var(--smm-font-mono);
  font-size: 0.72rem;
  color: var(--smm-ink-faint);
}

/* 3-col cascade: platform / service group / category */
.od-cascade {
  display: grid;
  grid-template-columns: 1.1fr 1fr 1.4fr;
  gap: 10px;
  margin: 2px 0 14px;
}
.od-cascade-col { min-width: 0; }
.od-cascade .od-label { margin-bottom: 6px; display: block; }
.od-cascade select.form-control,
.od-cascade .form-control,
.od-cascade .selectize-control.single .selectize-input {
  background: var(--smm-surface-raise);
  border: 1px solid var(--smm-line-strong);
  border-radius: var(--smm-radius-sm);
  color: var(--smm-ink);
  font-size: 0.88rem;
  min-height: 42px;
  width: 100%;
  box-shadow: none;
}
.od-cascade select.form-control:focus,
.od-cascade .form-control:focus,
.od-cascade .selectize-input.focus {
  border-color: var(--smm-signal);
  box-shadow: 0 0 0 3px rgba(226, 83, 27, 0.12);
}
.od-cascade .selectize-dropdown {
  border: 1px solid var(--smm-line-strong);
  border-radius: var(--smm-radius-sm);
  box-shadow: var(--smm-shadow-lift);
  background: var(--smm-surface);
}
.od-cascade .selectize-dropdown .option {
  color: var(--smm-ink-soft);
  font-size: 0.86rem;
  padding: 8px 12px;
}
.od-cascade .selectize-dropdown .option.active {
  background: rgba(226, 83, 27, 0.08);
  color: var(--smm-ink);
}
.od-cascade .selectize-dropdown .optgroup-header {
  font-family: var(--smm-font-mono);
  font-size: 0.6rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--smm-ink-faint);
  background: var(--smm-paper-deep);
}

/* platform select: brand icon + label */
.odPlatformSelect .smm-plat-icon { margin-right: 8px; }
.selectize-dropdown .smm-plat-icon { margin-right: 8px; width: 18px; height: 18px; display: inline-flex; align-items: center; justify-content: center; vertical-align: middle; }
.selectize-dropdown .smm-plat-icon svg,
.odPlatformSelect .smm-plat-icon svg { width: 16px; height: 16px; }
/* brand colors for platform icons */
.od-cascade [data-platform="instagram"] svg { color: #E4405F; }
.od-cascade [data-platform="youtube"] svg { color: #FF0000; }
.od-cascade [data-platform="tiktok"] svg { color: #010101; }
.od-cascade [data-platform="facebook"] svg { color: #1877F2; }
.od-cascade [data-platform="twitter"] svg { color: #000000; }
.od-cascade [data-platform="telegram"] svg { color: #229ED9; }
.od-cascade [data-platform="spotify"] svg { color: #1DB954; }
.od-cascade [data-platform="discord"] svg { color: #5865F2; }
.od-cascade [data-platform="linkedin"] svg { color: #0A66C2; }
.od-cascade [data-platform="pinterest"] svg { color: #E60023; }
.od-cascade [data-platform="snapchat"] svg { color: #FFFC00; }
.od-cascade [data-platform="twitch"] svg { color: #9146FF; }
.od-cascade [data-platform="vk"] svg { color: #0077FF; }
.od-cascade [data-platform="traffic"] svg { color: var(--smm-ink-soft); }
.od-cascade [data-platform="other"] svg { color: var(--smm-ink-faint); }
.selectize-dropdown .option .smm-plat-icon svg { vertical-align: middle; }
.selectize-dropdown .option { display: flex; align-items: center; gap: 6px; }

/* service result list */
.od-servicelist-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 16px;
  border-bottom: 1px solid var(--smm-line);
  background: var(--smm-paper-deep);
}
.od-servicelist-head .od-servicelist-count {
  font-family: var(--smm-font-mono);
  font-size: 0.62rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--smm-ink-faint);
}
.od-servicelist-sorts { display: flex; gap: 4px; }
.od-servicelist-sort {
  border: 1px solid var(--smm-line);
  border-radius: 999px;
  background: var(--smm-surface-raise);
  color: var(--smm-ink-soft);
  font-family: var(--smm-font-mono);
  font-size: 0.6rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 4px 10px;
  cursor: pointer;
  transition: all 0.14s ease;
}
.od-servicelist-sort:hover { border-color: var(--smm-signal); color: var(--smm-signal); }
.od-servicelist-sort.is-active {
  background: var(--smm-signal);
  border-color: var(--smm-signal);
  color: #fff;
}
.od-servicelist {
  margin: 6px 0 18px;
  border: 1px solid var(--smm-line);
  border-radius: var(--smm-radius);
  background: var(--smm-surface);
  max-height: 360px;
  overflow-y: auto;
}
.od-servicelist-empty {
  padding: 30px 20px;
  text-align: center;
  color: var(--smm-ink-faint);
  font-size: 0.88rem;
}
.od-servicelist-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 11px 16px;
  border-bottom: 1px solid var(--smm-line);
  cursor: pointer;
  transition: background 0.12s ease;
}
.od-servicelist-item:last-child { border-bottom: none; }
.od-servicelist-item:hover { background: rgba(226, 83, 27, 0.05); }
.od-servicelist-item.is-active {
  background: rgba(226, 83, 27, 0.09);
  box-shadow: inset 3px 0 0 var(--smm-signal);
}
.od-servicelist-item-main { min-width: 0; }
.od-servicelist-item-name {
  font-weight: 600;
  font-size: 0.86rem;
  color: var(--smm-ink);
  line-height: 1.35;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.od-servicelist-item-meta {
  font-family: var(--smm-font-mono);
  font-size: 0.64rem;
  letter-spacing: 0.06em;
  color: var(--smm-ink-faint);
  margin-top: 3px;
}
.od-servicelist-item-side {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 3px;
  flex: none;
}
.od-servicelist-item-rate {
  font-family: var(--smm-font-mono);
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--smm-signal-deep);
  white-space: nowrap;
}
.od-servicelist-item-id {
  font-family: var(--smm-font-mono);
  font-size: 0.6rem;
  letter-spacing: 0.08em;
  color: var(--smm-ink-faint);
}
body.theme-dark .od-servicelist-item-rate { color: var(--smm-signal); }

/* service feature badges */
.smm-svc-badges { display: inline-flex; gap: 5px; margin-top: 5px; flex-wrap: wrap; }
.smm-svc-badge {
  font-family: var(--smm-font-mono);
  font-size: 0.55rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  border-radius: 999px;
  padding: 2px 8px;
  border: 1px solid var(--smm-line-strong);
  color: var(--smm-ink-soft);
  background: var(--smm-surface-raise);
}
.smm-svc-badge--refill { color: var(--smm-ok); border-color: rgba(46, 125, 79, 0.45); }
.smm-svc-badge--cancel { color: var(--smm-warn); border-color: rgba(168, 121, 12, 0.45); }
.smm-svc-badge--drip { color: var(--smm-info); border-color: rgba(43, 95, 143, 0.45); }


@media (max-width: 991.98px) {
  .od-cascade { grid-template-columns: 1fr; }
}

/* mobile: bigger touch targets + sticky confirm bar */
@media (max-width: 767.98px) {
  .od-cascade select.form-control,
  .od-cascade .form-control,
  .od-cascade .selectize-control.single .selectize-input {
    min-height: 46px;
    font-size: 1rem;
  }
  .od-servicelist { max-height: 46vh; }
  .od-servicelist-item { padding: 13px 14px; }
  .od-servicelist-item-name { white-space: normal; }
  .od-servicelist-item-rate { font-size: 0.9rem; }
  .od-servicelist-head { flex-direction: column; align-items: flex-start; gap: 8px; }
  .od-confirmbar {
    position: sticky;
    bottom: 0;
    z-index: 40;
    border-radius: var(--smm-radius) var(--smm-radius) 0 0;
    margin: 0 -1.1rem -1.1rem;
    padding: 12px 16px calc(12px + env(safe-area-inset-bottom, 0px));
  }
  .od-confirmbar-main {
    flex-direction: column;
    align-items: stretch;
    text-align: center;
    gap: 10px;
  }
  .od-confirm-check { padding-bottom: 10px; margin-bottom: 10px; justify-content: center; }
  .od-sec-confirm { padding-bottom: 0; }
  .od-submit { width: 100%; padding: 14px 20px; font-size: 1rem; }
  .od-head { padding-top: 4px; }
  .od-title { font-size: 1.6rem; }
  .od-balance { min-width: 100px; padding: 7px 14px; }
  .od-search .selectize-input { min-height: 46px; font-size: 1rem; }
}

/* --- Referral widget (dashboard) --- */
.smm-aff {
  border-top: 1px dashed var(--smm-line, #E0D9C8);
  padding: 14px 18px 12px;
}
.smm-aff__head {
  display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 10px;
}
.smm-aff__kicker {
  font-family: var(--smm-font-mono); font-size: 0.6rem; letter-spacing: 0.16em; color: var(--smm-ok, #2E7D4F);
}
.smm-aff__num {
  font-family: var(--smm-font-mono); font-size: 0.62rem; letter-spacing: 0.08em; color: var(--smm-ink-faint);
}
.smm-aff__link {
  display: flex; gap: 8px; margin-bottom: 10px;
}
.smm-aff__link input {
  flex: 1; min-width: 0; font-family: var(--smm-font-mono); font-size: 0.72rem;
  color: var(--smm-ink); background: var(--smm-paper);
  border: 1px solid var(--smm-line); border-radius: 6px; padding: 8px 10px;
}
.smm-aff__copy {
  border: 1px solid var(--smm-ok); background: rgba(46, 125, 79, 0.08); color: var(--smm-ok);
  border-radius: 6px; padding: 0 14px; font-size: 0.78rem; font-weight: 600; cursor: pointer;
  transition: background 0.15s ease-out;
}
.smm-aff__copy:hover { background: var(--smm-ok); color: var(--smm-paper); }
.smm-aff__stats {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 12px;
}
.smm-aff__stat {
  border: 1px solid var(--smm-line); border-radius: 8px; padding: 8px 10px;
  background: var(--smm-surface-raise);
}
.smm-aff__stat-num { display: block; font-family: var(--smm-font-mono); font-size: 0.85rem; font-weight: 700; color: var(--smm-ink); }
.smm-aff__stat-label { display: block; font-size: 0.62rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--smm-ink-faint); margin-top: 2px; }
.smm-aff__cta {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  border: 1px solid var(--smm-ok); color: var(--smm-ok); background: transparent;
  border-radius: 8px; padding: 9px 12px; font-size: 0.8rem; font-weight: 600; text-decoration: none;
  transition: all 0.15s ease-out;
}
.smm-aff__cta:hover { background: var(--smm-ok); color: var(--smm-paper); text-decoration: none; }

/* --- Add-funds gamified nudges --- */
.af-nudges { display: flex; flex-direction: column; gap: 10px; margin-bottom: 18px; }
.af-nudge {
  display: flex; align-items: center; gap: 12px;
  border: 1px solid var(--smm-line); border-radius: 10px;
  background: var(--smm-surface); padding: 12px 16px;
}
.af-nudge__icon {
  width: 38px; height: 38px; border-radius: 9px; flex-shrink: 0;
  display: grid; place-items: center; font-size: 1.05rem;
}
.af-nudge--vip .af-nudge__icon { background: rgba(226, 83, 27, 0.1); color: var(--smm-signal); border: 1px solid rgba(226, 83, 27, 0.3); }
.af-nudge--aff .af-nudge__icon { background: rgba(46, 125, 79, 0.1); color: var(--smm-ok); border: 1px solid rgba(46, 125, 79, 0.3); }
.af-nudge--bonus .af-nudge__icon { background: rgba(168, 121, 12, 0.12); color: var(--smm-warn); border: 1px solid rgba(168, 121, 12, 0.3); }
.af-nudge__body { flex: 1; min-width: 0; }
.af-nudge__title { font-weight: 600; font-size: 0.86rem; color: var(--smm-ink); }
.af-nudge__sub { font-size: 0.78rem; color: var(--smm-ink-soft); line-height: 1.45; margin-top: 2px; }
.af-nudge__track { height: 5px; border-radius: 99px; background: var(--smm-line); margin-top: 8px; overflow: hidden; }
.af-nudge__fill { height: 100%; border-radius: 99px; background: var(--smm-signal); }
.af-nudge--aff .af-nudge__fill { background: var(--smm-ok); }
.af-nudge__action { flex-shrink: 0; }
.af-nudge__action .btn { white-space: nowrap; }

/* --- Sidebar gamification chips (user panel) --- */
.smm-side-vip {
  margin: 10px 12px 4px; padding: 10px 12px;
  border: 1px solid var(--smm-line); border-radius: 8px;
  background: var(--smm-surface-raise);
}
.smm-side-vip__top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 7px; }
.smm-side-vip__tier {
  font-family: var(--smm-font-mono); font-size: 0.6rem; letter-spacing: 0.12em;
  color: var(--smm-signal); text-transform: uppercase; font-weight: 700;
}
.smm-side-vip__disc { font-size: 0.68rem; font-weight: 700; color: var(--smm-ink); }
.smm-side-vip__track { height: 4px; border-radius: 99px; background: var(--smm-line); overflow: hidden; }
.smm-side-vip__fill { height: 100%; border-radius: 99px; background: var(--smm-signal); }
.smm-side-vip__next { font-size: 0.66rem; color: var(--smm-ink-faint); margin-top: 6px; line-height: 1.4; }
.smm-side-aff {
  display: flex; align-items: center; gap: 8px;
  margin: 4px 12px 10px; padding: 8px 12px;
  border: 1px dashed var(--smm-line-strong); border-radius: 8px;
  color: var(--smm-ink-soft); font-size: 0.76rem; text-decoration: none;
}
.smm-side-aff i { color: var(--smm-ok); }
.smm-side-aff:hover { background: var(--smm-paper); color: var(--smm-ink); text-decoration: none; }

/* --------------------------------------------------------------------------
   100. Sidebar — client & admin nav polish (desktop + off-canvas drawer)
   -------------------------------------------------------------------------- */

/* --- desktop: keep nav rhythm, hide gamification chips in folded rail --- */
.navbar.navbar-side.navbar-folded .smm-side-vip,
.navbar.navbar-side.navbar-folded .smm-side-aff,
.navbar.navbar-side.navbar-folded .mobile-logo { display: none !important; }

.navbar-side .smm-side-vip { margin: 12px 12px 4px; }
.navbar-side .smm-side-aff { margin: 4px 12px 10px; }

.navbar-side .sidebar-close {
  display: none;
  color: var(--smm-ink-soft);
  font-size: 1.1rem;
  line-height: 1;
  padding: 6px;
}

/* --- backdrop for the off-canvas drawer --- */
.sidebar-backdrop {
  position: fixed; inset: 0; z-index: 1050;
  background: rgba(33, 29, 22, 0.5);
  opacity: 0; visibility: hidden;
  transition: opacity 0.25s ease, visibility 0.25s;
  -webkit-backdrop-filter: blur(1.5px);
  backdrop-filter: blur(1.5px);
}
.sidebar-backdrop.show { opacity: 1; visibility: visible; }

body.sidebar-open { overflow: hidden; }

/* --- off-canvas drawer below xl (replaces the old full-width block) --- */
@media (max-width: 1279.98px) {
  body.vertical-menu .navbar.navbar-side {
    position: fixed !important;
    top: 0; bottom: 0; left: 0;
    z-index: 1051;
    width: 290px !important;
    max-width: 86vw;
    margin-top: 0 !important;
    display: flex !important;
    flex-direction: column;
    transform: translateX(-105%);
    transition: transform 0.28s cubic-bezier(0.32, 0.72, 0, 1), box-shadow 0.28s ease;
    box-shadow: none;
    overflow-y: auto;
    border-right: 1px solid var(--smm-line);
  }
  body.vertical-menu .navbar.navbar-side.active {
    transform: translateX(0);
    box-shadow: 0 10px 40px rgba(33, 29, 22, 0.28);
  }
  /* drawer ignores folded state: full labels */
  body.vertical-menu .navbar.navbar-side.navbar-folded {
    width: 290px !important;
  }
  body.vertical-menu .navbar.navbar-side.navbar-folded .nav-text,
  body.vertical-menu .navbar.navbar-side.navbar-folded .navbar-heading .text { display: inline !important; }
  body.vertical-menu .navbar.navbar-side .nav-link { padding: 0.62rem 0.85rem !important; }

  /* brand + close button in the drawer */
  body.vertical-menu .navbar-side .mobile-logo {
    display: flex !important;
    align-items: center;
    justify-content: space-between;
    padding: 14px 14px 12px 18px;
    border-bottom: 1px solid var(--smm-line);
  }
  body.vertical-menu .navbar-side .mobile-logo .navbar-brand-logo { max-height: 26px; }
  body.vertical-menu .navbar-side .sidebar-close { display: inline-flex; }
  body.vertical-menu .navbar-side .sidebar-close:hover { color: var(--smm-signal); }

  /* keep chips compact inside the drawer */
  body.vertical-menu .navbar-side .smm-side-vip { display: block !important; }
  body.vertical-menu .navbar-side .smm-side-aff { display: flex !important; }
}

@media (max-width: 1279.98px) {
  /* the chips' wrapper li hides below lg — force it visible inside the drawer */
  body.vertical-menu .navbar-side .smm-side-vip-li,
  body.vertical-menu .navbar-side .smm-side-aff-li { display: block !important; }
}

/* --- collapsible nav groups --- */
.navbar-side .nav-group { list-style: none; }
.navbar-side .nav-group-head {
  display: flex; align-items: center; justify-content: space-between;
  width: 100%;
  background: transparent; border: none; cursor: pointer;
  font-family: var(--smm-font-mono);
  font-size: 0.6rem; text-transform: uppercase; letter-spacing: 0.22em;
  color: var(--smm-ink-soft);
  padding: 1.1rem 0.9rem 0.35rem;
  margin-top: 0.4rem;
}
.navbar-side .nav-group-head:hover { color: var(--smm-ink); }
.navbar-side .nav-group-chevron {
  font-size: 0.8rem; color: var(--smm-ink-faint);
  transition: transform 0.2s ease;
}
.navbar-side .nav-group.collapsed .nav-group-chevron { transform: rotate(-90deg); }
.navbar-side .nav-group.collapsed .nav-group-items { display: none; }
.navbar-side .nav-group-items { list-style: none; padding: 0; margin: 0; }

/* keep the rhythm of the old first-heading rule */
.navbar-side .nav-group-head.first { margin-top: 0.6rem; }
.navbar-side .nav-group:first-of-type .nav-group-head.first { margin-top: 0.4rem; }

/* --- sidebar filter box --- */
.smm-nav-search {
  display: flex; align-items: center; gap: 8px;
  margin: 12px 12px 6px; padding: 0 10px;
  border: 1px solid var(--smm-line); border-radius: 8px;
  background: var(--smm-surface-raise);
  height: 34px;
}
.smm-nav-search__icon { color: var(--smm-ink-faint); font-size: 0.9rem; flex-shrink: 0; }
.smm-nav-search__input {
  flex: 1; min-width: 0;
  border: none; outline: none; background: transparent;
  font-size: 0.8rem; color: var(--smm-ink);
}
.smm-nav-search__input::placeholder { color: var(--smm-ink-faint); }
.smm-nav-search__key {
  font-family: var(--smm-font-mono); font-size: 0.62rem;
  color: var(--smm-ink-faint);
  border: 1px solid var(--smm-line); border-radius: 4px;
  padding: 0 5px; flex-shrink: 0;
}
.navbar-side .smm-nav-search:focus-within {
  border-color: var(--smm-signal);
  box-shadow: 0 0 0 3px rgba(226, 83, 27, 0.1);
}
/* folded rail: hide filter + chips + group chevrons */
.navbar.navbar-side.navbar-folded .smm-nav-search,
.navbar.navbar-side.navbar-folded .nav-group-chevron,
.navbar.navbar-side.navbar-folded .nav-group-items { display: none !important; }
.navbar.navbar-side.navbar-folded .nav-group-head { padding: 0.9rem 0.4rem; justify-content: center; }

/* --- nav item badge (unread counts) --- */
.smm-nav-badge {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 20px; height: 20px; padding: 0 6px;
  border-radius: 999px;
  font-family: var(--smm-font-mono); font-size: 0.62rem; font-weight: 700;
  background: rgba(226, 83, 27, 0.12); color: var(--smm-signal-deep);
  border: 1px solid rgba(226, 83, 27, 0.3);
}
.navbar-side .nav-link.active .smm-nav-badge {
  background: var(--smm-signal); color: var(--smm-paper);
  border-color: var(--smm-signal);
}

/* --------------------------------------------------------------------------
   101. UI polish — focus rings, micro-interactions, shared components
   -------------------------------------------------------------------------- */

/* keyboard focus rings */
:focus-visible { outline: 2px solid var(--smm-signal); outline-offset: 2px; border-radius: 3px; }

/* buttons: press state + smooth hover */
.btn, .page-link { transition: transform .12s ease, box-shadow .18s ease, background .18s ease, color .18s ease, border-color .18s ease; }
.btn:active, .page-link:active { transform: translateY(1px); }
.btn-primary, .btn-success, .btn-info, .btn-danger, .btn-warning { box-shadow: 0 2px 6px rgba(33, 29, 22, 0.08); }
.btn-primary:hover, .btn-success:hover, .btn-info:hover, .btn-danger:hover, .btn-warning:hover { box-shadow: 0 6px 16px rgba(33, 29, 22, 0.14); transform: translateY(-1px); }
.btn-outline-primary, .btn-outline-success, .btn-outline-info, .btn-outline-danger, .btn-outline-secondary, .btn-outline-dark {
  border-color: var(--smm-line-strong); color: var(--smm-ink-soft);
}
.btn-outline-primary:hover { background: rgba(226, 83, 27, 0.08); border-color: var(--smm-signal); color: var(--smm-signal-deep); }

/* inputs: signal focus ring */
.form-control:focus, .selectize-input.focus, .custom-select:focus {
  border-color: var(--smm-signal);
  box-shadow: 0 0 0 3px rgba(226, 83, 27, 0.12);
}

/* tables: row hover + smooth transitions */
.table tbody tr { transition: background 0.12s ease; }
.table-hover tbody tr:hover { background: rgba(226, 83, 27, 0.04); }

/* pagination: modern pills */
.pagination { gap: 3px; }
.pagination .page-item .page-link, .pagination .page-item:first-child .page-link, .pagination .page-item:last-child .page-link {
  border-radius: 8px;
  border: 1px solid var(--smm-line);
  color: var(--smm-ink-soft);
  background: var(--smm-surface);
  min-width: 34px; text-align: center;
}
.pagination .page-item.active .page-link {
  background: var(--smm-signal); border-color: var(--smm-signal); color: var(--smm-paper); font-weight: 700;
}
.pagination .page-item.disabled .page-link { color: var(--smm-ink-faint); background: var(--smm-paper); }

/* empty states: friendlier icon */
.smm-empty { width: 74px; height: 74px; margin: 0 auto 14px; display: grid; place-items: center; border-radius: 22px; background: var(--smm-paper-deep); border: 1px dashed var(--smm-line-strong); color: var(--smm-ink-faint); font-size: 1.7rem; }
.smm-empty__msg { color: var(--smm-ink-faint); font-size: 0.85rem; }

/* page title: breathing room */
.page-title h1 { display: flex; align-items: center; gap: 8px; }

/* checkboxes / switches get a subtle ring on focus */
.custom-switch-input:focus ~ .custom-switch-indicator,
.custom-control-input:focus ~ .custom-control-label::before { box-shadow: 0 0 0 3px rgba(226, 83, 27, 0.15); border-color: var(--smm-signal); }

/* card header icon chips */
.card-header .fa, .card-header .fe { color: var(--smm-ink-faint); }
.card-header .fe-primary, .card-header .text-primary { color: var(--smm-signal) !important; }

/* --------------------------------------------------------------------------
   102. Brand — landing-consistent logo mark + name (header & drawer)
   -------------------------------------------------------------------------- */
.smm-brand {
  display: flex; align-items: center; gap: 9px;
  text-decoration: none;
}
.smm-brand:hover { text-decoration: none; }
.smm-brand-mark {
  position: relative; width: 26px; height: 26px; flex-shrink: 0;
  background: var(--smm-ink); border-radius: 3px;
}
.smm-brand-mark i {
  position: absolute; left: 55%; top: 52%;
  width: 8px; height: 8px;
  border-right: 3px solid var(--smm-paper);
  border-bottom: 3px solid var(--smm-paper);
  transform: rotate(45deg);
}
.smm-brand-name {
  font-family: var(--smm-font-display);
  font-weight: 700; font-size: 1.22rem; line-height: 1;
  color: var(--smm-ink); letter-spacing: -0.02em;
  white-space: nowrap;
}
.js-header .smm-brand-mark { width: 24px; height: 24px; }
.js-header .smm-brand-mark i { width: 7px; height: 7px; border-width: 2.5px; }
.js-header .smm-brand-name { font-size: 1.12rem; }

/* dark bars (horizontal ink header, dark theme headers) */
.smm-brand--inverse .smm-brand-mark { background: var(--smm-paper); }
.smm-brand--inverse .smm-brand-mark i { border-color: var(--smm-ink); }
.smm-brand--inverse .smm-brand-name { color: var(--smm-bar-text); }

body.theme-dark .js-header .smm-brand-name { color: var(--smm-ink); }

/* --------------------------------------------------------------------------
   103. C3 charts — theme layer (client & admin dashboards)
   -------------------------------------------------------------------------- */
#statistics-area .c3 text,
#statistics-area .c3 .c3-axis-x text,
#statistics-area .c3 .c3-axis-y text { fill: var(--smm-ink-faint); font-family: var(--smm-font-mono); font-size: 10px; }
#statistics-area .c3 .c3-axis line,
#statistics-area .c3 .c3-axis path,
#statistics-area .c3 .c3-grid line { stroke: var(--smm-line); }
#statistics-area .c3 .c3-tooltip {
  background: var(--smm-surface-raise); border: 1px solid var(--smm-line);
  border-radius: 8px; box-shadow: 0 10px 26px rgba(33, 29, 22, 0.08); color: var(--smm-ink);
}
#statistics-area .c3 .c3-tooltip th {
  background: var(--smm-paper-deep); color: var(--smm-ink);
  font-family: var(--smm-font-mono); font-size: 9px; text-transform: uppercase;
  letter-spacing: .08em; border-radius: 6px 6px 0 0;
}
#statistics-area .c3 .c3-tooltip td { border-top: 1px solid var(--smm-line); font-size: 11px; }
#statistics-area .c3 .c3-tooltip td.name { color: var(--smm-ink-soft); }
#statistics-area .c3 .c3-tooltip td.value { color: var(--smm-ink); font-weight: 600; }
#statistics-area .c3 .c3-legend-item text { fill: var(--smm-ink-soft); font-family: var(--smm-font-body); font-size: 11px; }
#statistics-area .c3 .c3-chart-arcs .c3-chart-arcs-title { fill: var(--smm-ink-faint); font-family: var(--smm-font-mono); font-size: 10px; }

/* chart empty states */
.smm-chart-empty {
  height: 100%; min-height: 220px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px;
  color: var(--smm-ink-faint);
  font-family: var(--smm-font-mono); font-size: 0.72rem; letter-spacing: 0.1em; text-transform: uppercase;
}
.smm-chart-empty i { font-size: 1.8rem; opacity: 0.6; }