/* MZLynk console skin
   Loaded by Nginx after the upstream Vue bundle. No upstream files are modified. */

:root {
  --mz-blue: #246bfd;
  --mz-blue-deep: #1559d8;
  --mz-cyan: #15b9e8;
  --mz-ink: #13223c;
  --mz-muted: #6d7d95;
  --mz-line: rgba(111, 143, 186, .16);
  --mz-glass: linear-gradient(145deg, rgba(255, 255, 255, .78), rgba(240, 247, 255, .48));
  --mz-shadow: 0 18px 48px rgba(40, 85, 151, .09), inset 0 1px 0 rgba(255, 255, 255, .96);
}

html:not(.dark) body {
  background: #f3f8ff;
  color: var(--mz-ink);
}

html:not(.dark) .min-h-screen.bg-gray-50 {
  background-color: transparent;
}

html:not(.dark) .bg-mesh-gradient {
  background-color: #f3f8ff;
  background-image:
    radial-gradient(760px 560px at -6% -12%, rgba(66, 118, 255, .17), transparent 68%),
    radial-gradient(780px 600px at 106% -6%, rgba(25, 194, 232, .15), transparent 66%),
    radial-gradient(700px 560px at 48% 110%, rgba(77, 121, 255, .08), transparent 68%),
    linear-gradient(rgba(92, 126, 177, .035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(92, 126, 177, .035) 1px, transparent 1px);
  background-size: auto, auto, auto, 64px 64px, 64px 64px;
}

/* Global type */
html:not(.dark) .page-title,
html:not(.dark) .card h1,
html:not(.dark) .card h2,
html:not(.dark) .card h3,
html:not(.dark) .modal-title {
  color: var(--mz-ink);
  letter-spacing: -.025em;
}

html:not(.dark) .page-title {
  font-size: 26px;
}

html:not(.dark) .page-description,
html:not(.dark) .input-hint {
  color: var(--mz-muted);
}

/* Surfaces */
html:not(.dark) .card,
html:not(.dark) .card-glass,
html:not(.dark) .glass-card {
  background: var(--mz-glass);
  border: 1px solid rgba(255, 255, 255, .92);
  box-shadow: var(--mz-shadow);
  -webkit-backdrop-filter: blur(24px) saturate(155%);
  backdrop-filter: blur(24px) saturate(155%);
}

html:not(.dark) .card {
  border-radius: 20px;
}

html:not(.dark) .card-hover:hover {
  border-color: rgba(255, 255, 255, 1);
  box-shadow: 0 24px 58px rgba(40, 85, 151, .13), inset 0 1px 0 #fff;
}

html:not(.dark) .stat-card {
  border-radius: 20px;
}

html:not(.dark) .stat-icon {
  border-radius: 14px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .8);
}

html:not(.dark) .stat-icon-primary,
html:not(.dark) .badge-primary {
  color: #1d61d7;
  background: linear-gradient(140deg, #e9f2ff, #dcecff);
}

/* Sidebar */
html:not(.dark) .sidebar {
  background: linear-gradient(180deg, rgba(255, 255, 255, .84), rgba(242, 248, 255, .72));
  border-right: 1px solid rgba(255, 255, 255, .9);
  box-shadow: 10px 0 45px rgba(49, 91, 153, .055), inset -1px 0 0 rgba(120, 153, 197, .11);
  -webkit-backdrop-filter: blur(28px) saturate(160%);
  backdrop-filter: blur(28px) saturate(160%);
}

html:not(.dark) .sidebar-header {
  border-bottom-color: rgba(113, 145, 188, .11);
}

html:not(.dark) .sidebar-logo {
  width: 40px;
  height: 40px;
  border: 1px solid rgba(255, 255, 255, .95);
  border-radius: 13px;
  background-color: rgba(255, 255, 255, .9);
  background-image: url('/mzlynk-home/assets/logo.webp');
  background-repeat: no-repeat;
  background-size: 265%;
  background-position: 50% 27%;
  background-blend-mode: multiply;
  box-shadow: 0 8px 20px rgba(44, 100, 190, .13), inset 0 1px 0 #fff;
}

html:not(.dark) .sidebar-logo img {
  opacity: 0;
}

html:not(.dark) .sidebar-brand-title {
  color: #16243c;
  font-weight: 750;
  letter-spacing: -.04em;
}

html:not(.dark) .sidebar-nav {
  padding-top: 18px;
}

html:not(.dark) .sidebar-link {
  color: #687892;
  border-radius: 12px;
  transition: color .18s ease, background .18s ease, box-shadow .18s ease;
}

html:not(.dark) .sidebar-link:hover {
  color: #1c4f99;
  background: rgba(255, 255, 255, .68);
}

html:not(.dark) .sidebar-link-active {
  color: #165bc9;
  background: linear-gradient(110deg, rgba(224, 239, 255, .98), rgba(233, 247, 255, .7));
  box-shadow: inset 0 0 0 1px rgba(98, 157, 241, .12), 0 6px 18px rgba(45, 107, 195, .07);
}

html:not(.dark) .sidebar-link-active:hover {
  background: linear-gradient(110deg, #e2f0ff, #e9f8ff);
  color: #1557c5;
}

html:not(.dark) .sidebar-section-title {
  color: #9aa8bb;
}

html:not(.dark) .sidebar > .mt-auto {
  border-color: rgba(113, 145, 188, .11);
}

/* Header */
html:not(.dark) header.glass {
  background: rgba(255, 255, 255, .66);
  border-bottom-color: rgba(122, 154, 197, .13);
  box-shadow: 0 8px 28px rgba(47, 87, 147, .045);
  -webkit-backdrop-filter: blur(26px) saturate(170%);
  backdrop-filter: blur(26px) saturate(170%);
}

html:not(.dark) header h1 {
  color: var(--mz-ink);
  font-weight: 680;
}

html:not(.dark) header .bg-primary-50 {
  color: #1b61d0;
  background: linear-gradient(140deg, rgba(232, 243, 255, .92), rgba(220, 240, 255, .72));
  border: 1px solid rgba(255, 255, 255, .85);
  box-shadow: inset 0 1px 0 #fff;
}

html:not(.dark) .dropdown {
  background: rgba(255, 255, 255, .88);
  border-color: rgba(255, 255, 255, .95);
  box-shadow: 0 22px 55px rgba(37, 77, 138, .16), inset 0 1px 0 #fff;
  -webkit-backdrop-filter: blur(26px) saturate(160%);
  backdrop-filter: blur(26px) saturate(160%);
}

html:not(.dark) .dropdown-item:hover {
  background: rgba(232, 243, 255, .82);
  color: #1759c7;
}

/* Buttons and inputs */
html:not(.dark) .btn {
  border-radius: 13px;
  font-weight: 620;
}

html:not(.dark) .btn-primary {
  color: #fff;
  background: linear-gradient(115deg, #176cf4, #1a8fef 62%, #17b9df);
  box-shadow: 0 10px 24px rgba(27, 118, 230, .2), inset 0 1px 0 rgba(255, 255, 255, .36);
}

html:not(.dark) .btn-primary:hover {
  background: linear-gradient(115deg, #105fdf, #1584e3 62%, #10add4);
  box-shadow: 0 14px 30px rgba(27, 118, 230, .26), inset 0 1px 0 rgba(255, 255, 255, .4);
  transform: translateY(-1px);
}

html:not(.dark) .btn-secondary {
  color: #34516f;
  background: linear-gradient(145deg, rgba(255, 255, 255, .85), rgba(235, 245, 255, .62));
  border-color: rgba(255, 255, 255, .96);
  box-shadow: inset 0 1px 0 #fff, 0 5px 15px rgba(51, 90, 147, .055);
  -webkit-backdrop-filter: blur(18px);
  backdrop-filter: blur(18px);
}

html:not(.dark) .btn-secondary:hover {
  color: #195bc5;
  background: rgba(255, 255, 255, .94);
  border-color: rgba(255, 255, 255, 1);
}

html:not(.dark) .btn-ghost:hover {
  background: rgba(255, 255, 255, .7);
}

html:not(.dark) .input {
  min-height: 44px;
  color: #253854;
  background: rgba(255, 255, 255, .7);
  border-color: rgba(134, 160, 195, .2);
  border-radius: 13px;
  box-shadow: inset 0 1px 2px rgba(45, 81, 132, .035), 0 1px 0 #fff;
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
}

html:not(.dark) .input:focus {
  background: rgba(255, 255, 255, .92);
  border-color: #65a0f7;
  box-shadow: 0 0 0 3px rgba(52, 129, 246, .11), inset 0 1px 1px rgba(255, 255, 255, .8);
}

html:not(.dark) .input-label {
  color: #4b5d78;
  font-weight: 580;
}

/* Tables */
html:not(.dark) .table-container {
  background: rgba(255, 255, 255, .38);
  border-color: rgba(255, 255, 255, .85);
  border-radius: 16px;
}

html:not(.dark) .table th {
  color: #6e7f97;
  background: rgba(235, 244, 255, .62);
  border-bottom-color: rgba(111, 143, 186, .13);
  font-weight: 620;
}

html:not(.dark) .table td {
  color: #40536f;
  border-bottom-color: rgba(111, 143, 186, .09);
}

html:not(.dark) .table tbody tr:hover {
  background: rgba(229, 241, 255, .54);
}

/* Dialogs, menus and notices */
html:not(.dark) .modal-content,
html:not(.dark) .dialog-container {
  background: rgba(252, 254, 255, .93);
  border: 1px solid rgba(255, 255, 255, .96);
  border-radius: 24px;
  box-shadow: 0 34px 90px rgba(30, 62, 111, .25), inset 0 1px 0 #fff;
  -webkit-backdrop-filter: blur(30px) saturate(155%);
  backdrop-filter: blur(30px) saturate(155%);
}

html:not(.dark) .modal-overlay,
html:not(.dark) .dialog-overlay {
  background: rgba(30, 48, 78, .28);
  -webkit-backdrop-filter: blur(7px);
  backdrop-filter: blur(7px);
}

html:not(.dark) .modal-header,
html:not(.dark) .modal-footer,
html:not(.dark) .dialog-header,
html:not(.dark) .dialog-footer {
  border-color: rgba(111, 143, 186, .12);
}

html:not(.dark) .dialog-footer {
  background: rgba(239, 247, 255, .46);
}

html:not(.dark) .toast {
  background: rgba(255, 255, 255, .9);
  border-color: transparent;
  border-left-color: var(--mz-blue);
  border-radius: 14px;
  box-shadow: 0 18px 45px rgba(39, 78, 139, .16);
  -webkit-backdrop-filter: blur(22px);
  backdrop-filter: blur(22px);
}

/* Brand colors used by links, chips and active states */
html:not(.dark) .text-primary-600,
html:not(.dark) .text-primary-500,
html:not(.dark) .text-primary-400 {
  color: #2468db !important;
}

html:not(.dark) .text-primary-700 {
  color: #1b56b9 !important;
}

html:not(.dark) .bg-primary-50 {
  background-color: #e9f3ff !important;
}

html:not(.dark) .bg-primary-100 {
  background-color: #dcecff !important;
}

html:not(.dark) .border-primary-500 {
  border-color: #4a8bf0 !important;
}

html:not(.dark) .focus\:ring-primary-500\/30:focus {
  --tw-ring-color: rgba(57, 132, 241, .22);
}

/* Auth pages */
html:not(.dark) .min-h-screen.overflow-hidden {
  background: #f2f7ff;
}

html:not(.dark) .min-h-screen.overflow-hidden > .absolute.inset-0:first-child {
  background: radial-gradient(900px 680px at 4% -8%, rgba(66, 118, 255, .2), transparent 66%),
    radial-gradient(800px 650px at 104% 104%, rgba(18, 190, 227, .17), transparent 65%),
    linear-gradient(150deg, #f7fbff, #eaf4ff 52%, #f6fbff) !important;
}

html:not(.dark) .min-h-screen.overflow-hidden .pointer-events-none.absolute.inset-0 > div:nth-child(1) {
  background: rgba(70, 126, 240, .2);
}
html:not(.dark) .min-h-screen.overflow-hidden .pointer-events-none.absolute.inset-0 > div:nth-child(2) {
  background: rgba(31, 195, 231, .16);
}
html:not(.dark) .min-h-screen.overflow-hidden .pointer-events-none.absolute.inset-0 > div:nth-child(3) {
  background: rgba(66, 130, 255, .08);
}

[class*="bg-[size:64px_64px]"] {
  background-image: linear-gradient(rgba(74, 123, 193, .045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(74, 123, 193, .045) 1px, transparent 1px) !important;
}

html:not(.dark) .max-w-md > .mb-8 .mb-4.inline-flex {
  width: 86px;
  height: 82px;
  margin-bottom: 18px;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, .96);
  border-radius: 25px;
  background-color: rgba(255, 255, 255, .9);
  background-image: url('/mzlynk-home/assets/logo.webp');
  background-repeat: no-repeat;
  background-size: 265%;
  background-position: 50% 27%;
  background-blend-mode: multiply;
  box-shadow: 0 20px 44px rgba(45, 103, 194, .17), inset 0 1px 0 #fff, 0 0 0 8px rgba(255, 255, 255, .28);
}

html:not(.dark) .max-w-md > .mb-8 .mb-4.inline-flex img {
  opacity: 0;
}

html:not(.dark) .max-w-md > .mb-8 .text-gradient {
  color: transparent;
  background-image: linear-gradient(110deg, #153266 5%, #2467e6 48%, #16a8dc 92%);
  font-size: 34px;
  letter-spacing: -.055em;
}

html:not(.dark) .max-w-md > .mb-8 > p {
  color: #7b8ca3;
}

html:not(.dark) .max-w-md > .card-glass {
  border-radius: 27px;
  background: linear-gradient(145deg, rgba(255, 255, 255, .82), rgba(238, 247, 255, .55));
  border-color: rgba(255, 255, 255, .95);
  box-shadow: 0 30px 70px rgba(36, 79, 143, .13), inset 0 1px 0 #fff;
  -webkit-backdrop-filter: blur(30px) saturate(160%);
  backdrop-filter: blur(30px) saturate(160%);
}

html:not(.dark) .max-w-md > .card-glass h2 {
  color: #14233c;
  letter-spacing: -.035em;
}

html:not(.dark) .max-w-md > .card-glass .btn-primary {
  height: 46px;
  border-radius: 14px;
}

html:not(.dark) .max-w-md > .card-glass .btn-secondary {
  height: 45px;
  border-radius: 13px;
}

/* Login captcha iframe / wrappers */
html:not(.dark) .turnstile-wrapper,
html:not(.dark) .turnstile-container {
  background: rgba(255, 255, 255, .48);
  border-color: rgba(255, 255, 255, .86);
  border-radius: 13px;
}

/* Dark mode keeps upstream layout, with the MZLynk blue accent */
.dark body {
  background: #0a1220;
}

.dark .bg-mesh-gradient {
  background-image:
    radial-gradient(700px 500px at -4% -8%, rgba(42, 108, 255, .15), transparent 68%),
    radial-gradient(680px 520px at 106% 0%, rgba(18, 183, 223, .1), transparent 66%);
}

.dark .sidebar {
  background: rgba(12, 22, 39, .8);
  border-right-color: rgba(255, 255, 255, .06);
  -webkit-backdrop-filter: blur(26px) saturate(150%);
  backdrop-filter: blur(26px) saturate(150%);
}

.dark header.glass {
  background: rgba(13, 24, 42, .62);
  border-bottom-color: rgba(255, 255, 255, .06);
  -webkit-backdrop-filter: blur(25px) saturate(150%);
  backdrop-filter: blur(25px) saturate(150%);
}

.dark .card,
.dark .card-glass,
.dark .glass-card {
  background: linear-gradient(145deg, rgba(23, 38, 62, .67), rgba(15, 28, 48, .46));
  border-color: rgba(255, 255, 255, .075);
  box-shadow: 0 20px 50px rgba(0, 0, 0, .16), inset 0 1px 0 rgba(255, 255, 255, .055);
  -webkit-backdrop-filter: blur(24px) saturate(145%);
  backdrop-filter: blur(24px) saturate(145%);
}

.dark .btn-primary {
  background: linear-gradient(115deg, #1f68ed, #188beb 62%, #14afd7);
}

.dark .sidebar-link-active {
  background: linear-gradient(110deg, rgba(30, 91, 189, .34), rgba(20, 111, 150, .16));
  color: #80b5ff;
}

/* Motion */
@media (prefers-reduced-motion: reduce) {
  html:not(.dark) .btn,
  html:not(.dark) .sidebar-link,
  html:not(.dark) .card {
    transition: none !important;
  }
}