/* =============================================================
   Mandir Theme — Badri Bhagat Jhandewala Temple Society
   Admin panel restyle. Overrides AdminLTE skin-blue + Bootstrap 3.
   Drop in AFTER AdminLTE.min.css and skin-*.min.css.
   Safe to add/remove without touching any PHP logic.
   ============================================================= */

/* ---------- Fonts ---------- */
@import url('https://fonts.googleapis.com/css2?family=Tiro+Devanagari+Hindi:ital@0;1&family=Cormorant+Garamond:wght@400;500;600;700&family=Inter:wght@400;500;600;700&display=swap');

/* ---------- Design tokens ---------- */
:root {
  --m-cream: #fdf5e6;
  --m-cream-2: #fbeedc;
  --m-cream-3: #f8e4c8;
  --m-coral: #e85d5d;
  --m-coral-soft: #f38080;
  --m-coral-pale: #fde1dc;
  --m-maroon: #3a1d1a;
  --m-maroon-2: #5a2a25;
  --m-gold: #c9a25a;
  --m-gold-deep: #a37a32;
  --m-ink: #2b1a16;
  --m-muted: #8a6a62;
  --m-line: #eadbc6;
  --m-white: #fffaf2;
  --m-shadow: 0 8px 28px rgba(58, 29, 26, 0.08);
  --m-shadow-lg: 0 18px 50px rgba(58, 29, 26, 0.14);

  --m-radius: 14px;
  --m-radius-sm: 10px;

  --m-font-display: 'Cormorant Garamond', 'Georgia', serif;
  --m-font-devanagari: 'Tiro Devanagari Hindi', 'Noto Sans Devanagari', serif;
  --m-font-body: 'Inter', system-ui, -apple-system, sans-serif;
}

/* ---------- Base ---------- */
html, body {
  background: var(--m-cream) !important;
  color: var(--m-ink) !important;
  font-family: var(--m-font-body) !important;
  font-size: 14px;
  -webkit-font-smoothing: antialiased;
}

body.hold-transition.skin-blue.sidebar-mini,
body.sidebar-mini {
  background: var(--m-cream) !important;
}

.wrapper,
.content-wrapper,
.main-footer {
  background: transparent !important;
}

/* Layered cream texture — soft radial warmth */
body::before {
  content: "";
  position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background:
    radial-gradient(ellipse at 15% 0%, rgba(232, 93, 93, 0.06), transparent 50%),
    radial-gradient(ellipse at 85% 100%, rgba(201, 162, 90, 0.08), transparent 55%);
}
.wrapper { position: relative; z-index: 1; }

/* ---------- Header (top bar) ---------- */
.main-header { border: none !important; }

.main-header .logo,
.main-header .logo:hover {
  background: linear-gradient(135deg, var(--m-coral) 0%, #d54545 100%) !important;
  color: var(--m-white) !important;
  font-family: var(--m-font-display) !important;
  font-weight: 700 !important;
  font-size: 20px !important;
  letter-spacing: 0.5px;
  border-bottom: 3px solid var(--m-gold) !important;
  position: relative;
}
.main-header .logo b {
  font-family: var(--m-font-display);
  font-size: 22px;
  letter-spacing: 1px;
}
.main-header .logo-mini b {
  font-family: var(--m-font-devanagari);
  font-size: 24px;
}

.main-header .navbar,
.skin-blue .main-header .navbar {
  background: var(--m-maroon) !important;
  border-bottom: 3px solid var(--m-gold) !important;
  min-height: 50px;
}

.skin-blue .main-header .navbar .sidebar-toggle,
.skin-blue .main-header .navbar .sidebar-toggle:hover {
  color: var(--m-cream) !important;
  background: transparent !important;
}
.skin-blue .main-header .navbar .nav > li > a {
  color: var(--m-cream) !important;
  transition: all 0.2s ease;
}
.skin-blue .main-header .navbar .nav > li > a:hover,
.skin-blue .main-header .navbar .nav > li.open > a {
  background: rgba(253, 245, 230, 0.12) !important;
  color: var(--m-white) !important;
}

.navbar-custom-menu .btn-primary {
  background: var(--m-coral) !important;
  border-color: var(--m-coral) !important;
  border-radius: 8px !important;
}

/* User dropdown */
.user-menu .dropdown-menu {
  background: var(--m-white) !important;
  border: 1px solid var(--m-line) !important;
  border-radius: var(--m-radius-sm) !important;
  box-shadow: var(--m-shadow-lg) !important;
  padding: 0;
  overflow: hidden;
}
.user-menu .dropdown-menu .user-header {
  background: linear-gradient(135deg, var(--m-coral-pale), var(--m-cream-2)) !important;
  color: var(--m-maroon) !important;
  padding: 20px;
  text-align: center;
  height: auto !important;
}
.user-menu .dropdown-menu .user-header p {
  color: var(--m-maroon) !important;
  font-family: var(--m-font-display);
  font-size: 18px;
  font-weight: 600;
  text-shadow: none !important;
}
.user-menu .dropdown-menu .user-header small {
  color: var(--m-muted) !important;
  font-family: var(--m-font-body);
}
.user-menu .dropdown-menu .user-footer {
  background: var(--m-white) !important;
  padding: 14px;
}

/* ---------- Sidebar ---------- */
.skin-blue .main-sidebar,
.skin-blue .left-side {
  background: var(--m-maroon) !important;
  background: linear-gradient(180deg, var(--m-maroon) 0%, #2a120f 100%) !important;
}

.skin-blue .sidebar a { color: var(--m-cream-2) !important; }

.skin-blue .user-panel > .info,
.skin-blue .user-panel > .info > a,
.skin-blue .user-panel > .info > p {
  color: var(--m-cream) !important;
}
.user-panel {
  border-bottom: 1px solid rgba(201, 162, 90, 0.25) !important;
  padding: 16px 12px !important;
}
.user-panel > .info > p {
  font-family: var(--m-font-display);
  font-size: 17px;
  font-weight: 600;
  letter-spacing: 0.3px;
}

/* Sidebar menu items */
.skin-blue .sidebar-menu > li > a {
  border-left: 3px solid transparent;
  padding: 13px 14px !important;
  font-size: 14px;
  font-weight: 500;
  transition: all 0.25s ease;
}
.skin-blue .sidebar-menu > li:hover > a,
.skin-blue .sidebar-menu > li.active > a,
.skin-blue .sidebar-menu > li.menu-open > a {
  background: rgba(232, 93, 93, 0.15) !important;
  border-left-color: var(--m-gold) !important;
  color: var(--m-white) !important;
}
.skin-blue .sidebar-menu > li.active > a {
  background: linear-gradient(90deg, rgba(232, 93, 93, 0.22), transparent) !important;
  border-left-color: var(--m-coral) !important;
}

.skin-blue .sidebar-menu > li > a > .fa,
.skin-blue .sidebar-menu > li > a > i {
  color: var(--m-gold) !important;
  margin-right: 8px;
}
.skin-blue .sidebar-menu > li.active > a > .fa {
  color: var(--m-coral-soft) !important;
}

/* Treeview submenu */
.skin-blue .sidebar-menu .treeview-menu {
  background: rgba(0, 0, 0, 0.18) !important;
  padding: 4px 0;
}
.skin-blue .sidebar-menu .treeview-menu > li > a {
  color: rgba(253, 245, 230, 0.75) !important;
  padding: 8px 14px 8px 42px !important;
  font-size: 13px;
}
.skin-blue .sidebar-menu .treeview-menu > li > a:hover {
  color: var(--m-white) !important;
  background: rgba(232, 93, 93, 0.12) !important;
}
.skin-blue .sidebar-menu .treeview-menu > li.active > a {
  color: var(--m-white) !important;
  background: rgba(232, 93, 93, 0.22) !important;
}

/* ---------- Content header ---------- */
.content-header {
  background: transparent !important;
  padding: 22px 20px 10px !important;
}
.content-header > h1 {
  font-family: var(--m-font-display) !important;
  color: var(--m-maroon) !important;
  font-size: 32px !important;
  font-weight: 600 !important;
  letter-spacing: 0.3px;
  margin: 0 0 6px 0 !important;
  position: relative;
  display: inline-block;
}
.content-header > h1::after {
  content: "";
  display: block;
  width: 64px;
  height: 3px;
  background: linear-gradient(90deg, var(--m-coral), var(--m-gold));
  border-radius: 3px;
  margin-top: 10px;
}
.content-header > h1 > small {
  color: var(--m-muted) !important;
  font-family: var(--m-font-body);
  font-size: 14px;
  display: block;
  margin-top: 6px;
  letter-spacing: 1.2px;
  text-transform: uppercase;
}

/* ---------- Boxes / Cards ---------- */
.box {
  background: var(--m-white) !important;
  border: 1px solid var(--m-line) !important;
  border-top: none !important;
  border-radius: var(--m-radius) !important;
  box-shadow: var(--m-shadow) !important;
  overflow: hidden;
}

.box.box-primary,
.box.box-info,
.box.box-success,
.box.box-warning,
.box.box-danger,
.box.box-default {
  border-top: 3px solid var(--m-coral) !important;
}
.box.box-info { border-top-color: var(--m-gold) !important; }
.box.box-success { border-top-color: #7a9a4a !important; }
.box.box-warning { border-top-color: var(--m-gold-deep) !important; }
.box.box-danger { border-top-color: var(--m-coral) !important; }

.box-header {
  background: linear-gradient(180deg, var(--m-cream-2), var(--m-white)) !important;
  border-bottom: 1px solid var(--m-line) !important;
  padding: 16px 20px !important;
}
.box-header.with-border { border-bottom: 1px solid var(--m-line) !important; }
.box-header .box-title,
.box-header > .box-title {
  font-family: var(--m-font-display) !important;
  color: var(--m-maroon) !important;
  font-size: 20px !important;
  font-weight: 600 !important;
  letter-spacing: 0.3px;
}

.box-body { padding: 20px !important; }
.box-footer {
  background: var(--m-cream) !important;
  border-top: 1px solid var(--m-line) !important;
  padding: 14px 20px !important;
}

/* ---------- Forms ---------- */
.form-group > label,
label[for] {
  color: var(--m-maroon-2) !important;
  font-weight: 600 !important;
  font-size: 13px !important;
  letter-spacing: 0.3px;
  margin-bottom: 6px;
}

.form-control {
  background: var(--m-white) !important;
  border: 1.5px solid var(--m-line) !important;
  border-radius: var(--m-radius-sm) !important;
  color: var(--m-ink) !important;
  padding: 10px 14px !important;
  height: auto !important;
  min-height: 42px;
  box-shadow: none !important;
  transition: all 0.2s ease;
  font-family: var(--m-font-body);
}
.form-control:focus {
  border-color: var(--m-coral) !important;
  box-shadow: 0 0 0 3px rgba(232, 93, 93, 0.12) !important;
  outline: none !important;
}
.form-control::placeholder { color: #b8a194 !important; }

textarea.form-control { min-height: 110px; }

/* Select2 */
.select2-container--default .select2-selection--single,
.select2-container--default .select2-selection--multiple {
  border: 1.5px solid var(--m-line) !important;
  border-radius: var(--m-radius-sm) !important;
  min-height: 42px !important;
  background: var(--m-white) !important;
}
.select2-container--default .select2-selection--single .select2-selection__rendered {
  line-height: 40px !important;
  color: var(--m-ink) !important;
  padding-left: 14px !important;
}
.select2-container--default .select2-selection--single .select2-selection__arrow {
  height: 40px !important;
}
.select2-container--default.select2-container--focus .select2-selection--multiple,
.select2-container--default.select2-container--open .select2-selection--single {
  border-color: var(--m-coral) !important;
  box-shadow: 0 0 0 3px rgba(232, 93, 93, 0.12) !important;
}
.select2-dropdown {
  border: 1px solid var(--m-line) !important;
  border-radius: var(--m-radius-sm) !important;
  box-shadow: var(--m-shadow-lg) !important;
}
.select2-container--default .select2-results__option--highlighted[aria-selected] {
  background: var(--m-coral) !important;
  color: var(--m-white) !important;
}

/* ---------- Buttons ---------- */
.btn {
  border-radius: var(--m-radius-sm) !important;
  font-weight: 600 !important;
  letter-spacing: 0.3px;
  padding: 10px 20px !important;
  border: none !important;
  transition: all 0.2s ease !important;
  font-family: var(--m-font-body);
  box-shadow: 0 2px 6px rgba(58, 29, 26, 0.08);
}
.btn:hover, .btn:focus {
  transform: translateY(-1px);
  box-shadow: 0 6px 16px rgba(58, 29, 26, 0.14);
  outline: none !important;
}
.btn-sm, .btn-xs { padding: 6px 12px !important; font-size: 12px !important; }

.btn-primary, .btn-primary:focus {
  background: linear-gradient(135deg, var(--m-coral), #d54545) !important;
  color: var(--m-white) !important;
}
.btn-primary:hover, .btn-primary:active {
  background: linear-gradient(135deg, #d54545, var(--m-coral)) !important;
  color: var(--m-white) !important;
}
.btn-primary.btn-flat { border-radius: var(--m-radius-sm) !important; }

.btn-info {
  background: linear-gradient(135deg, var(--m-gold), var(--m-gold-deep)) !important;
  color: var(--m-white) !important;
}
.btn-info:hover { color: var(--m-white) !important; }

.btn-success {
  background: linear-gradient(135deg, #8bb157, #6a8a3d) !important;
  color: var(--m-white) !important;
}

.btn-warning {
  background: linear-gradient(135deg, #d9a544, #b08028) !important;
  color: var(--m-white) !important;
}

.btn-danger {
  background: linear-gradient(135deg, #c7423f, #9d2e2b) !important;
  color: var(--m-white) !important;
}

.btn-default,
.btn-secondry {
  background: var(--m-white) !important;
  color: var(--m-maroon) !important;
  border: 1.5px solid var(--m-line) !important;
}
.btn-default:hover {
  background: var(--m-cream-2) !important;
  color: var(--m-maroon) !important;
  border-color: var(--m-coral) !important;
}

/* ---------- Tables ---------- */
.table {
  background: var(--m-white) !important;
  border-radius: var(--m-radius-sm);
  overflow: hidden;
}
.table > thead > tr > th {
  background: linear-gradient(180deg, var(--m-maroon), var(--m-maroon-2)) !important;
  color: var(--m-cream) !important;
  border: none !important;
  font-family: var(--m-font-body);
  font-weight: 600;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  padding: 14px 12px !important;
}
.table > tbody > tr > td {
  border-color: var(--m-line) !important;
  padding: 14px 12px !important;
  color: var(--m-ink);
  vertical-align: middle !important;
}
.table.table-striped > tbody > tr:nth-of-type(odd) { background: var(--m-cream) !important; }
.table.table-hover > tbody > tr:hover { background: var(--m-coral-pale) !important; }
.table.table-bordered { border: 1px solid var(--m-line) !important; }
.table.table-bordered > thead > tr > th,
.table.table-bordered > tbody > tr > td { border: 1px solid var(--m-line) !important; }

/* DataTables overrides */
.dataTables_wrapper .dataTables_length,
.dataTables_wrapper .dataTables_filter,
.dataTables_wrapper .dataTables_info,
.dataTables_wrapper .dataTables_paginate { color: var(--m-maroon) !important; }
.dataTables_wrapper .dataTables_paginate .paginate_button {
  border-radius: 8px !important;
  border: 1px solid var(--m-line) !important;
  background: var(--m-white) !important;
  color: var(--m-maroon) !important;
  padding: 6px 12px !important;
  margin: 0 2px;
}
.dataTables_wrapper .dataTables_paginate .paginate_button.current,
.dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {
  background: var(--m-coral) !important;
  border-color: var(--m-coral) !important;
  color: var(--m-white) !important;
}
.dataTables_wrapper .dataTables_paginate .paginate_button:hover {
  background: var(--m-cream-2) !important;
  border-color: var(--m-coral) !important;
  color: var(--m-maroon) !important;
}
.dt-buttons .btn {
  background: var(--m-maroon) !important;
  color: var(--m-cream) !important;
  margin-right: 6px;
  font-size: 12px !important;
}
.dt-buttons .btn:hover { background: var(--m-coral) !important; color: var(--m-white) !important; }

/* ---------- Modals ---------- */
.modal-content {
  border: none !important;
  border-radius: var(--m-radius) !important;
  box-shadow: var(--m-shadow-lg) !important;
  overflow: hidden;
}
.modal-header {
  background: linear-gradient(135deg, var(--m-coral-pale), var(--m-cream-2)) !important;
  border-bottom: 1px solid var(--m-line) !important;
  padding: 18px 22px !important;
}
.modal-title {
  font-family: var(--m-font-display);
  color: var(--m-maroon);
  font-size: 22px;
  font-weight: 600;
}
.modal-body { padding: 22px !important; background: var(--m-white); }
.modal-footer {
  background: var(--m-cream) !important;
  border-top: 1px solid var(--m-line) !important;
}

/* ---------- Callouts / Alerts ---------- */
.callout {
  border-radius: var(--m-radius-sm) !important;
  border-left-width: 4px !important;
  padding: 16px 20px !important;
  box-shadow: var(--m-shadow);
}
.callout.callout-info { background: var(--m-cream-2) !important; color: var(--m-maroon) !important; border-left-color: var(--m-gold) !important; }
.callout.callout-warning { background: #fdf2d9 !important; color: var(--m-maroon) !important; border-left-color: var(--m-gold-deep) !important; }
.callout.callout-danger { background: var(--m-coral-pale) !important; color: var(--m-maroon) !important; border-left-color: var(--m-coral) !important; }
.callout.callout-success { background: #e8f0d8 !important; color: #3a4a1a !important; border-left-color: #7a9a4a !important; }
.callout h4 { font-family: var(--m-font-display); font-weight: 600; color: inherit; }

/* ---------- Footer ---------- */
.main-footer {
  border-top: 1px solid var(--m-line) !important;
  color: var(--m-muted) !important;
  background: var(--m-cream) !important;
  padding: 18px !important;
  font-size: 13px;
}
.main-footer strong { color: var(--m-maroon) !important; font-family: var(--m-font-display); }

/* ---------- Login & forgot-password pages ---------- */
body.login-page,
body.lockscreen {
  background: var(--m-cream) !important;
  background-image:
    radial-gradient(ellipse at 10% 10%, rgba(232, 93, 93, 0.12), transparent 45%),
    radial-gradient(ellipse at 90% 90%, rgba(201, 162, 90, 0.14), transparent 50%) !important;
  min-height: 100vh;
}

.login-box, .register-box {
  width: 420px !important;
  margin: 7% auto !important;
}
.login-box-body, .register-box-body {
  background: var(--m-white) !important;
  border: 1px solid var(--m-line) !important;
  border-top: 4px solid var(--m-coral) !important;
  border-radius: var(--m-radius) !important;
  box-shadow: var(--m-shadow-lg) !important;
  padding: 36px 32px !important;
  color: var(--m-ink) !important;
}
.login-logo, .register-logo {
  text-align: center;
  margin-bottom: 0 !important;
}
.login-logo b, .register-logo b {
  font-family: var(--m-font-display) !important;
  color: var(--m-maroon) !important;
  font-size: 28px !important;
  letter-spacing: 0.5px;
}
.login-box-msg, .register-box-msg {
  color: var(--m-muted) !important;
  font-family: var(--m-font-body);
  letter-spacing: 0.4px;
  margin-bottom: 22px;
}

.has-feedback .form-control-feedback {
  color: var(--m-coral) !important;
  line-height: 42px !important;
}

/* Forgot-password lockscreen */
.lockscreen-wrapper {
  background: var(--m-white) !important;
  border: 1px solid var(--m-line) !important;
  border-top: 4px solid var(--m-coral) !important;
  border-radius: var(--m-radius) !important;
  box-shadow: var(--m-shadow-lg) !important;
  padding: 32px !important;
  max-width: 480px !important;
  margin: 6% auto !important;
}
.lockscreen-logo b {
  font-family: var(--m-font-display);
  color: var(--m-maroon) !important;
  letter-spacing: 0.5px;
}

/* ---------- Misc ---------- */
.hidden-xs { color: var(--m-cream); }
a { color: var(--m-coral); }
a:hover, a:focus { color: var(--m-maroon); }

/* Scrollbar */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--m-cream); }
::-webkit-scrollbar-thumb {
  background: var(--m-gold);
  border-radius: 10px;
  border: 2px solid var(--m-cream);
}
::-webkit-scrollbar-thumb:hover { background: var(--m-coral); }

/* iCheck replacement accent */
.icheckbox_minimal-blue.checked,
.iradio_minimal-blue.checked { background-position: 0 0; }

/* CKEditor chrome — soften the default grey */
.cke_chrome {
  border: 1.5px solid var(--m-line) !important;
  border-radius: var(--m-radius-sm) !important;
  box-shadow: none !important;
  overflow: hidden;
}
.cke_top {
  background: var(--m-cream-2) !important;
  border-bottom: 1px solid var(--m-line) !important;
}

/* ---------- Bilingual label helper ---------- */
.m-label-hi {
  font-family: var(--m-font-devanagari);
  font-size: 15px;
  color: var(--m-maroon);
  display: block;
  line-height: 1.3;
}
.m-label-en {
  font-family: var(--m-font-body);
  font-size: 11px;
  color: var(--m-muted);
  letter-spacing: 1px;
  text-transform: uppercase;
  display: block;
  margin-top: 2px;
}

/* Dashboard stat card */
.m-stat {
  background: var(--m-white);
  border: 1px solid var(--m-line);
  border-radius: var(--m-radius);
  padding: 22px;
  box-shadow: var(--m-shadow);
  position: relative;
  overflow: hidden;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.m-stat::before {
  content: "";
  position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: linear-gradient(90deg, var(--m-coral), var(--m-gold));
}
.m-stat:hover { transform: translateY(-3px); box-shadow: var(--m-shadow-lg); }
.m-stat-icon {
  width: 48px; height: 48px; border-radius: 12px;
  background: var(--m-coral-pale);
  color: var(--m-coral);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 22px; margin-bottom: 14px;
}
.m-stat-value {
  font-family: var(--m-font-display);
  font-size: 32px; font-weight: 700;
  color: var(--m-maroon);
  line-height: 1;
  margin-bottom: 4px;
}
.m-stat-label-hi { font-family: var(--m-font-devanagari); color: var(--m-maroon-2); font-size: 16px; }
.m-stat-label-en { color: var(--m-muted); font-size: 11px; letter-spacing: 1.2px; text-transform: uppercase; margin-top: 2px; }

/* Welcome banner for dashboard */
.m-welcome {
  background: linear-gradient(135deg, var(--m-maroon) 0%, #4a221d 60%, var(--m-maroon-2) 100%);
  color: var(--m-cream);
  border-radius: var(--m-radius);
  padding: 32px 36px;
  position: relative;
  overflow: hidden;
  box-shadow: var(--m-shadow-lg);
  margin-bottom: 24px;
}
.m-welcome::before {
  content: "ॐ";
  position: absolute; right: 30px; top: 50%; transform: translateY(-50%);
  font-family: var(--m-font-devanagari);
  font-size: 140px; color: rgba(201, 162, 90, 0.14);
  line-height: 1;
}
.m-welcome-kicker {
  font-family: var(--m-font-body);
  letter-spacing: 3px;
  color: var(--m-gold);
  text-transform: uppercase;
  font-size: 12px;
  font-weight: 600;
  margin-bottom: 8px;
}
.m-welcome-title {
  font-family: var(--m-font-devanagari);
  font-size: 36px;
  color: var(--m-cream);
  margin: 0 0 6px;
  line-height: 1.2;
}
.m-welcome-sub {
  font-family: var(--m-font-display);
  font-size: 20px;
  color: rgba(253, 245, 230, 0.85);
  font-style: italic;
  margin: 0;
}

/* Section divider with OM */
.m-divider {
  display: flex; align-items: center; justify-content: center;
  margin: 28px 0 20px;
  color: var(--m-gold);
}
.m-divider::before, .m-divider::after {
  content: "";
  height: 1px; flex: 1; max-width: 80px;
  background: linear-gradient(90deg, transparent, var(--m-gold), transparent);
}
.m-divider span {
  font-family: var(--m-font-devanagari);
  font-size: 22px;
  color: var(--m-gold-deep);
  padding: 0 16px;
}

/* Responsive tweaks */
@media (max-width: 767px) {
  .content-header > h1 { font-size: 26px !important; }
  .m-welcome { padding: 24px; }
  .m-welcome-title { font-size: 28px; }
  .m-welcome::before { display: none; }
  .login-box, .register-box { width: 92% !important; }
}