.preload * {
      -webkit-transition: none !important;
      -moz-transition: none !important;
      -ms-transition: none !important;
      -o-transition: none !important;
      transition: none !important;
    }

:root,
    [data-theme="dark"] {
      --bg: #050A18;
      --bg2: #0B1228;
      --bg3: #111836;
      --glass: rgba(255, 255, 255, .06);
      --glass-b: rgba(255, 255, 255, .1);
      --pri: #8B7BFF;
      --pri-g: rgba(139, 123, 255, .25);
      --pri-l: #A99BFF;
      --sec: #00D4FF;
      --acc: #FF6B9D;
      --am: #FFB347;
      --am-bg: rgba(255, 179, 71, .12);
      --nt: #7B8CFF;
      --nt-bg: rgba(123, 140, 255, .12);
      --sabah: #FFB347;
      --sabah-bg: rgba(168, 85, 247, 0.12);
      --ok: #00E676;
      --txt: #F2F2FF;
      --txt2: #9095B5;
      --txt3: #5A5E7A;
      --r: 16px;
      --font: 'Tajawal', sans-serif;
      --shadow: 0 8px 32px rgba(0, 0, 0, .3);
      --card-bg: linear-gradient(135deg, rgba(255, 255, 255, .06), rgba(255, 255, 255, .02));
      --card-b: rgba(255, 255, 255, .08);
      --nav-bg: linear-gradient(135deg, rgba(120, 119, 198, .1), rgba(255, 255, 255, .05), rgba(120, 119, 198, .1));
      --modal-bg: linear-gradient(180deg, #1a1f42, #0d1330);
      --body-grad: radial-gradient(ellipse at 20% 0%, rgba(139, 123, 255, .06) 0%, transparent 50%), radial-gradient(ellipse at 80% 100%, rgba(0, 212, 255, .04) 0%, transparent 50%)
    }

[data-theme="light"] {
      --bg: #F0F4F8;
      --bg2: rgba(255, 255, 255, 0.7);
      --bg3: #E2E8F0;
      --glass: rgba(255, 255, 255, 0.75);
      --glass-b: rgba(255, 255, 255, 1);
      --pri: #4F46E5;
      --pri-g: rgba(79, 70, 229, 0.12);
      --pri-l: #818CF8;
      --sec: #0EA5E9;
      --acc: #EC4899;
      --am: #F59E0B;
      --am-bg: rgba(245, 158, 11, 0.12);
      --nt: #6366F1;
      --nt-bg: rgba(99, 102, 241, 0.12);
      --sabah: #F59E0B;
      --sabah-bg: rgba(147, 51, 234, 0.12);
      --ok: #10B981;
      --txt: #0F172A;
      --txt2: #334155;
      --txt3: #64748B;
      --r: 16px;
      --shadow: 0 10px 40px rgba(15, 23, 42, 0.06);
      --card-bg: linear-gradient(135deg, rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0.5));
      --card-b: rgba(255, 255, 255, 1);
      --nav-bg: linear-gradient(135deg, rgba(255, 255, 255, 0.85), rgba(248, 250, 252, 0.7));
      --modal-bg: linear-gradient(180deg, rgba(255, 255, 255, 0.95), rgba(241, 245, 249, 0.85));
      --body-grad:
        radial-gradient(ellipse at 15% 5%, rgba(79, 70, 229, 0.08) 0%, transparent 45%),
        radial-gradient(ellipse at 85% 15%, rgba(14, 165, 233, 0.08) 0%, transparent 45%),
        radial-gradient(ellipse at 50% 90%, rgba(236, 72, 153, 0.05) 0%, transparent 50%);
    }

[data-theme="light"] body {
      background-image: var(--body-grad);
      background-attachment: fixed;
      background-color: var(--bg);
      color: var(--txt)
    }

[data-theme="light"] .app-header {
      background: linear-gradient(180deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.75) 100%);
      backdrop-filter: blur(24px) saturate(200%);
      -webkit-backdrop-filter: blur(24px) saturate(200%);
      border-bottom: 1px solid rgba(255, 255, 255, 0.9);
      box-shadow: 0 8px 30px rgba(15, 23, 42, 0.05);
      margin-bottom: 16px;
      border-radius: 0 0 32px 32px;
      padding-bottom: 16px;
    }

    [data-theme="light"] #bottom-nav {
      background: linear-gradient(135deg, rgba(255, 255, 255, 0.45), rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0.35));
      backdrop-filter: blur(48px) saturate(200%);
      -webkit-backdrop-filter: blur(48px) saturate(200%);
      border: 1px solid rgba(255, 255, 255, 0.7);
      box-shadow: 0 10px 40px rgba(15, 23, 42, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.9), inset 0 -1px 0 rgba(255, 255, 255, 0.3);
    }

    [data-theme="light"] #bottom-nav .nav-item {
      color: var(--txt3);
    }

    [data-theme="light"] #bottom-nav .nav-item.active {
      color: var(--pri);
      font-weight: 800;
    }

[data-theme="light"] .login-card {
      background: var(--card-bg);
      backdrop-filter: blur(40px) saturate(200%);
      -webkit-backdrop-filter: blur(40px) saturate(200%);
      border: 1px solid var(--card-b);
      box-shadow: 0 24px 80px rgba(15, 23, 42, 0.08), 0 8px 24px rgba(79, 70, 229, 0.05), inset 0 1px 0 rgba(255, 255, 255, 0.9)
    }

    [data-theme="light"] .login-card h1 {
      background: linear-gradient(135deg, #0F172A, #4F46E5);
      -webkit-background-clip: text;
      background-clip: text
    }

    [data-theme="light"] .login-card img {
      box-shadow: 0 8px 24px rgba(15, 23, 42, 0.08);
      border-radius: 50%;
    }

[data-theme="light"] .login-orb {
      opacity: .15;
      filter: blur(40px);
    }

    [data-theme="light"] #login-screen {
      background: var(--bg)
    }

[data-theme="light"] .input-wrap input {
      background: rgba(255, 255, 255, 0.7);
      border: 1px solid rgba(255, 255, 255, 0.8);
      color: var(--txt);
      box-shadow: 0 2px 10px rgba(15, 23, 42, 0.02), inset 0 2px 4px rgba(15, 23, 42, 0.02);
      backdrop-filter: blur(10px)
    }

    [data-theme="light"] .input-wrap input:focus {
      background: #FFFFFF;
      border-color: var(--pri);
      box-shadow: 0 0 0 4px var(--pri-g), 0 4px 12px rgba(79, 70, 229, 0.08)
    }

[data-theme="light"] .greeting-card {
      background: linear-gradient(135deg, rgba(255, 255, 255, 0.9), rgba(240, 245, 255, 0.6));
      border: 1px solid rgba(255, 255, 255, 1);
      box-shadow: 0 10px 40px rgba(15, 23, 42, 0.05), inset 0 1px 0 rgba(255, 255, 255, 0.9);
      backdrop-filter: blur(24px) saturate(180%);
      -webkit-backdrop-filter: blur(24px) saturate(180%)
    }

    [data-theme="light"] .greeting-card::before {
      background: linear-gradient(135deg, transparent, rgba(79, 70, 229, 0.04))
    }

    [data-theme="light"] .greeting-card::after {
      background: radial-gradient(circle, rgba(79, 70, 229, 0.08), transparent 70%)
    }

    [data-theme="light"] .g-stat {
      background: rgba(255, 255, 255, 0.8);
      border: 1px solid rgba(255, 255, 255, 0.9);
      backdrop-filter: blur(12px);
      box-shadow: 0 4px 12px rgba(15, 23, 42, 0.03)
    }

[data-theme="light"] .nurse-card {
      background: var(--card-bg);
      border: 1px solid rgba(255, 255, 255, 0.9);
      box-shadow: 0 6px 20px rgba(15, 23, 42, 0.04), inset 0 1px 0 rgba(255, 255, 255, 1);
      backdrop-filter: blur(20px) saturate(180%);
      -webkit-backdrop-filter: blur(20px) saturate(180%);
      transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    }

    [data-theme="light"] .nurse-card:hover {
      border-color: rgba(79, 70, 229, 0.3);
      box-shadow: 0 16px 40px rgba(79, 70, 229, 0.08), inset 0 1px 0 rgba(255, 255, 255, 1);
      transform: translateY(-4px)
    }

    [data-theme="light"] .avatar {
      border: 2px solid rgba(255, 255, 255, 1);
      box-shadow: 0 4px 16px rgba(15, 23, 42, 0.08)
    }

    [data-theme="light"] .avatar.male {
      border-color: rgba(79, 70, 229, 0.4);
      box-shadow: 0 4px 16px rgba(79, 70, 229, 0.15)
    }

    [data-theme="light"] .avatar.female {
      border-color: rgba(236, 72, 153, 0.4);
      box-shadow: 0 4px 16px rgba(236, 72, 153, 0.15)
    }

[data-theme="light"] .colleague-card {
      background: var(--card-bg);
      border: 1px solid rgba(255, 255, 255, 1);
      box-shadow: 0 10px 30px rgba(15, 23, 42, 0.04), inset 0 1px 0 rgba(255, 255, 255, 1);
      backdrop-filter: blur(24px) saturate(180%);
      -webkit-backdrop-filter: blur(24px) saturate(180%)
    }

    [data-theme="light"] .colleague-card::before {
      background: radial-gradient(circle, rgba(79, 70, 229, 0.04), transparent 70%)
    }

    [data-theme="light"] .colleague-card .cc-avatar {
      border-color: rgba(79, 70, 229, 0.4);
      box-shadow: 0 6px 16px rgba(79, 70, 229, 0.12)
    }

    [data-theme="light"] .colleague-card .cc-action.call-btn {
      background: rgba(16, 185, 129, 0.1);
      border-color: rgba(16, 185, 129, 0.2)
    }

    [data-theme="light"] .colleague-card .cc-action.wa-btn {
      background: rgba(37, 211, 102, 0.1);
      border-color: rgba(37, 211, 102, 0.2)
    }

[data-theme="light"] #bottom-nav {
      background: linear-gradient(135deg, rgba(255, 255, 255, 0.45), rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0.35));
      backdrop-filter: blur(48px) saturate(200%);
      -webkit-backdrop-filter: blur(48px) saturate(200%);
      border: 1px solid rgba(255, 255, 255, 0.7);
      box-shadow: 0 10px 40px rgba(15, 23, 42, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.9), inset 0 -1px 0 rgba(255, 255, 255, 0.3);
    }

    [data-theme="light"] .nav-item.active::after {
      box-shadow: 0 0 12px var(--pri)
    }

[data-theme="light"] .modal-overlay {
      background: rgba(15, 23, 42, 0.3);
      backdrop-filter: blur(12px)
    }

    [data-theme="light"] .modal-content {
      background: var(--modal-bg);
      border: 1px solid rgba(255, 255, 255, 1);
      box-shadow: 0 32px 100px rgba(15, 23, 42, 0.15), inset 0 2px 0 rgba(255, 255, 255, 1)
    }

    [data-theme="light"] .modal-handle {
      background: #CBD5E1;
      width: 48px;
    }

    [data-theme="light"] .modal-btn.call {
      background: rgba(16, 185, 129, 0.1)
    }

    [data-theme="light"] .modal-btn.copy {
      background: rgba(14, 165, 233, 0.1)
    }

    [data-theme="light"] .modal-btn.whatsapp {
      background: rgba(37, 211, 102, 0.1)
    }

[data-theme="light"] .stat-card {
      background: var(--card-bg);
      border: 1px solid rgba(255, 255, 255, 0.9);
      box-shadow: 0 6px 20px rgba(15, 23, 42, 0.04), inset 0 1px 0 rgba(255, 255, 255, 1);
      backdrop-filter: blur(20px)
    }

    [data-theme="light"] .stat-card:hover {
      border-color: rgba(79, 70, 229, 0.2);
      box-shadow: 0 12px 30px rgba(79, 70, 229, 0.08)
    }

[data-theme="light"] .action-btn {
      background: rgba(255, 255, 255, 0.95);
      border: 1px solid rgba(255, 255, 255, 0.8);
      color: var(--txt2);
      box-shadow: 0 4px 12px rgba(15, 23, 42, 0.04);
      backdrop-filter: blur(12px)
    }

    [data-theme="light"] .action-btn:hover {
      background: var(--pri-g);
      color: var(--pri);
      border-color: rgba(79, 70, 229, 0.3);
      box-shadow: 0 6px 20px rgba(79, 70, 229, 0.12)
    }

[data-theme="light"] .profile-name {
      background: linear-gradient(135deg, #0F172A, #4F46E5);
      -webkit-background-clip: text;
      background-clip: text
    }

    [data-theme="light"] .profile-hero::before {
      background: linear-gradient(135deg, rgba(79, 70, 229, 0.06), rgba(14, 165, 233, 0.04))
    }

    [data-theme="light"] .profile-hero::after {
      background: radial-gradient(circle, rgba(79, 70, 229, 0.08), transparent 70%)
    }

    [data-theme="light"] .profile-avatar {
      background: #fff padding-box, linear-gradient(135deg, var(--pri), var(--sec)) border-box;
      box-shadow: 0 12px 36px rgba(79, 70, 229, 0.15)
    }

    [data-theme="light"] .profile-status.off-shift {
      background: rgba(15, 23, 42, 0.05);
      border-color: rgba(15, 23, 42, 0.1)
    }

    [data-theme="light"] .avatar-edit-badge {
      border-color: var(--bg)
    }

[data-theme="light"] .stats-ring-card {
      background: var(--card-bg);
      border: 1px solid rgba(255, 255, 255, 1);
      box-shadow: 0 8px 24px rgba(15, 23, 42, 0.05), inset 0 1px 0 rgba(255, 255, 255, 0.9);
      backdrop-filter: blur(24px)
    }

    [data-theme="light"] .ring-stat-bar {
      background: rgba(15, 23, 42, 0.08)
    }

[data-theme="light"] .shift-item {
      background: linear-gradient(135deg, rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0.6));
      backdrop-filter: blur(20px) saturate(180%);
      -webkit-backdrop-filter: blur(20px) saturate(180%);
      border: 1px solid rgba(255, 255, 255, 1);
      border-right: 4px solid var(--ok);
      box-shadow: 0 4px 16px rgba(15, 23, 42, 0.04), inset 0 1px 0 rgba(255, 255, 255, 1)
    }

    [data-theme="light"] .shift-item.today-shift {
      background: linear-gradient(135deg, rgba(79, 70, 229, 0.08), rgba(255, 255, 255, 0.9));
      border: 1px solid rgba(255, 255, 255, 1);
      border-right: 4px solid var(--pri);
      box-shadow: 0 8px 24px rgba(79, 70, 229, 0.08)
    }

    [data-theme="light"] .shift-item.tomorrow-shift {
      background: linear-gradient(135deg, rgba(14, 165, 233, 0.08), rgba(255, 255, 255, 0.9));
      border: 1px solid rgba(255, 255, 255, 1);
      border-right: 4px solid var(--sec);
      box-shadow: 0 8px 24px rgba(14, 165, 233, 0.08)
    }

    [data-theme="light"] .shift-item.current-shift {
      background: linear-gradient(135deg, rgba(16, 185, 129, 0.08), rgba(255, 255, 255, 0.9));
      border: 1px solid rgba(255, 255, 255, 1);
      border-right: 4px solid var(--ok);
      box-shadow: 0 8px 24px rgba(16, 185, 129, 0.12)
    }

    [data-theme="light"] .shift-item.past {
      background: rgba(255, 255, 255, 0.5);
      border-color: rgba(15, 23, 42, 0.06);
      border-right: 4px solid rgba(15, 23, 42, 0.25);
      box-shadow: none;
    }

    [data-theme="light"] .shift-item.past::after {
      background: rgba(236, 72, 153, 0.1)
    }

[data-theme="light"] .shift-display-card {
      background: var(--card-bg);
      border: 1px solid rgba(255, 255, 255, 1);
      box-shadow: 0 12px 36px rgba(15, 23, 42, 0.06), inset 0 1px 0 rgba(255, 255, 255, 1);
      backdrop-filter: blur(24px)
    }

    [data-theme="light"] .sd-header {
      border-bottom-color: rgba(15, 23, 42, 0.08)
    }

[data-theme="light"] .countdown-bar {
      background: linear-gradient(135deg, rgba(79, 70, 229, 0.08), rgba(14, 165, 233, 0.06));
      border-color: rgba(79, 70, 229, 0.15);
      backdrop-filter: blur(12px)
    }

[data-theme="light"] .toast {
      background: linear-gradient(145deg, rgba(255, 255, 255, 0.82) 0%, rgba(255, 255, 255, 0.65) 100%);
      border: 1px solid rgba(255, 255, 255, 0.9);
      box-shadow:
        0 8px 32px rgba(15, 23, 42, 0.12),
        0 2px 8px rgba(15, 23, 42, 0.06),
        inset 0 1px 0 rgba(255, 255, 255, 1),
        inset 0 -1px 0 rgba(15, 23, 42, 0.04);
      color: rgba(15, 23, 42, 0.92);
      backdrop-filter: blur(48px) saturate(200%);
      -webkit-backdrop-filter: blur(48px) saturate(200%)
    }

    [data-theme="light"] .toast.success .toast-dot {
      background: var(--ok)
    }

    [data-theme="light"] .toast.error .toast-dot {
      background: var(--acc)
    }

[data-theme="light"] .search-input {
      background: rgba(255, 255, 255, 0.95);
      border: 1px solid rgba(15, 23, 42, 0.08);
      color: var(--txt);
      box-shadow: 0 4px 12px rgba(15, 23, 42, 0.03), inset 0 2px 4px rgba(15, 23, 42, 0.02);
      backdrop-filter: blur(12px)
    }

    [data-theme="light"] .search-input:focus {
      border-color: var(--pri);
      box-shadow: 0 0 0 4px var(--pri-g), 0 4px 16px rgba(79, 70, 229, 0.1)
    }

    [data-theme="light"] .search-tab {
      background: rgba(255, 255, 255, 0.8);
      border-color: rgba(15, 23, 42, 0.06)
    }

    [data-theme="light"] .search-tab.active {
      background: var(--pri-g);
      border-color: rgba(79, 70, 229, 0.3)
    }

[data-theme="light"] .cal-wrap {
      background: var(--card-bg);
      border: 1px solid rgba(255, 255, 255, 1);
      box-shadow: 0 12px 40px rgba(15, 23, 42, 0.06), inset 0 1px 0 rgba(255, 255, 255, 1);
      backdrop-filter: blur(24px)
    }

    [data-theme="light"] .cal-day:not(.selected):hover {
      background: rgba(79, 70, 229, 0.05);
      border-color: rgba(79, 70, 229, 0.15);
      box-shadow: 0 6px 16px rgba(79, 70, 229, 0.06)
    }

    [data-theme="light"] .cal-day.today {
      background: rgba(79, 70, 229, 0.1);
      border-color: rgba(79, 70, 229, 0.25)
    }

    [data-theme="light"] .cal-day.today.selected,
    [data-theme="light"] .cal-day.selected {
      background: linear-gradient(135deg, var(--pri), #818CF8);
      color: #fff;
      border-color: var(--pri);
      box-shadow: 0 8px 24px rgba(79, 70, 229, 0.25);
    }

[data-theme="light"] .next-shift-card {
      background: linear-gradient(135deg, rgba(16, 185, 129, 0.08), rgba(14, 165, 233, 0.05));
      border-color: rgba(16, 185, 129, 0.2);
      backdrop-filter: blur(12px)
    }

    [data-theme="light"] .next-shift-card .nsc-icon {
      background: rgba(16, 185, 129, 0.12)
    }

[data-theme="light"] .period-tab:hover {
      color: var(--txt2);
      background: rgba(79, 70, 229, 0.05)
    }

    [data-theme="light"] .period-info {
      background: rgba(255, 255, 255, 0.7);
      border: 1px solid rgba(15, 23, 42, 0.06)
    }

[data-theme="light"] .skel {
      background: linear-gradient(-45deg, #E2E8F0 25%, #F1F5F9 50%, #E2E8F0 75%);
      background-size: 200% 200%;
      border: 1px solid rgba(15, 23, 42, 0.05)
    }

    [data-theme="light"] #loading-screen {
      background: var(--bg)
    }

[data-theme="light"] .filter-btn {
      background: rgba(255, 255, 255, 0.85);
      backdrop-filter: blur(12px);
      color: var(--txt2);
      border: 1px solid rgba(15, 23, 42, 0.08);
      box-shadow: 0 4px 10px rgba(15, 23, 42, 0.04)
    }

    [data-theme="light"] .filter-btn.active {
      background: rgba(255, 255, 255, 1);
      color: var(--pri);
      border-color: rgba(79, 70, 229, 0.3);
      box-shadow: 0 6px 20px rgba(79, 70, 229, 0.12)
    }

    [data-theme="light"] .filter-btn.active-am {
      background: rgba(255, 255, 255, 1);
      border-color: rgba(245, 158, 11, 0.3)
    }

    [data-theme="light"] .filter-btn.active-nt {
      background: rgba(255, 255, 255, 1);
      border-color: rgba(99, 102, 241, 0.3)
    }

[data-theme="light"] .theme-section {
      background: linear-gradient(135deg, rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 0.5));
      border-color: rgba(15, 23, 42, 0.08)
    }

    [data-theme="light"] .theme-opt {
      background: rgba(255, 255, 255, 0.85);
      backdrop-filter: blur(12px);
      border: 1px solid rgba(15, 23, 42, 0.08);
      box-shadow: 0 4px 12px rgba(15, 23, 42, 0.04)
    }

    [data-theme="light"] .theme-opt:hover:not(.active) {
      background: rgba(255, 255, 255, 1);
      border-color: rgba(15, 23, 42, 0.15)
    }

    [data-theme="light"] .theme-opt.active {
      background: var(--pri-g);
      border-color: var(--pri);
      box-shadow: 0 6px 20px rgba(79, 70, 229, 0.15)
    }

[data-theme="light"] .th-opt {
      background: rgba(255, 255, 255, 0.8);
      border-color: rgba(15, 23, 42, 0.08)
    }

    [data-theme="light"] .th-opt:not(.active):hover {
      background: rgba(255, 255, 255, 1);
      border-color: rgba(15, 23, 42, 0.15)
    }

    [data-theme="light"] .th-opt .th-check {
      border-color: var(--bg)
    }

[data-theme="light"] .settings-card {
      background: var(--card-bg);
      border: 1px solid rgba(255, 255, 255, 1);
      box-shadow: 0 8px 24px rgba(15, 23, 42, 0.05), inset 0 1px 0 rgba(255, 255, 255, 1);
      backdrop-filter: blur(24px)
    }

    [data-theme="light"] .s-item {
      border-bottom-color: rgba(15, 23, 42, 0.05)
    }

    [data-theme="light"] .s-item:hover {
      background: rgba(79, 70, 229, 0.04)
    }

    [data-theme="light"] .s-item:active {
      background: rgba(79, 70, 229, 0.08)
    }

    [data-theme="light"] .settings-item {
      background: linear-gradient(135deg, rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 0.55));
      border-color: rgba(255, 255, 255, 1);
      backdrop-filter: blur(12px)
    }

    [data-theme="light"] .settings-item:hover {
      border-color: rgba(79, 70, 229, 0.2);
      box-shadow: 0 6px 20px rgba(79, 70, 229, 0.08)
    }

[data-theme="light"] .c-stat {
      background: rgba(255, 255, 255, 0.8);
      border: 1px solid rgba(15, 23, 42, 0.06);
      box-shadow: 0 4px 12px rgba(15, 23, 42, 0.03)
    }

[data-theme="light"] .nurse-chip {
      background: rgba(255, 255, 255, 0.8);
      border-color: rgba(15, 23, 42, 0.08)
    }

    [data-theme="light"] .nurse-chip:hover {
      border-color: var(--pri);
      box-shadow: 0 4px 12px rgba(79, 70, 229, 0.08)
    }

    [data-theme="light"] .nurse-chip.selected {
      background: var(--pri-g);
      border-color: var(--pri)
    }

[data-theme="light"] .upcoming-filter .uf-btn {
      background: rgba(255, 255, 255, 0.8);
      border-color: rgba(15, 23, 42, 0.06)
    }

[data-theme="light"] .period-selector {
      background: rgba(255, 255, 255, 0.7);
      backdrop-filter: blur(16px);
      border-color: rgba(255, 255, 255, 1);
      box-shadow: 0 4px 12px rgba(15, 23, 42, 0.04), inset 0 1px 2px rgba(255, 255, 255, 0.5)
    }

    [data-theme="light"] .ps-opt {
      background: transparent;
      border: 1px solid transparent
    }

    [data-theme="light"] .ps-opt:hover:not(.active) {
      background: rgba(79, 70, 229, 0.04)
    }

    [data-theme="light"] .ps-opt.active {
      background: rgba(255, 255, 255, 1);
      border-color: rgba(255, 255, 255, 1);
      box-shadow: 0 6px 20px rgba(15, 23, 42, 0.08)
    }

[data-theme="light"] .version-info {
      background: rgba(255, 255, 255, 0.7);
      border: 1px solid rgba(15, 23, 42, 0.05)
    }

[data-theme="light"] .reminder-select {
      background: rgba(255, 255, 255, 0.9);
      border-color: rgba(15, 23, 42, 0.1)
    }

[data-theme="light"] .toggle-switch {
      background: #CBD5E1
    }

    [data-theme="light"] .toggle-switch.on {
      background: var(--pri)
    }

[data-theme="light"] ::-webkit-scrollbar-thumb {
      background: #94A3B8
    }

    @media(prefers-color-scheme:light) {
      [data-theme="auto"] {
        --bg: #F0F4F8;
        --bg2: rgba(255, 255, 255, 0.7);
        --bg3: #E2E8F0;
        --glass: rgba(255, 255, 255, 0.75);
        --glass-b: rgba(255, 255, 255, 1);
        --pri: #4F46E5;
        --pri-g: rgba(79, 70, 229, 0.12);
        --pri-l: #818CF8;
        --sec: #0EA5E9;
        --acc: #EC4899;
        --am: #F59E0B;
        --am-bg: rgba(245, 158, 11, 0.12);
        --nt: #6366F1;
        --nt-bg: rgba(99, 102, 241, 0.12);
        --sabah: #F59E0B;
        --sabah-bg: rgba(147, 51, 234, 0.12);
        --ok: #10B981;
        --txt: #0F172A;
        --txt2: #334155;
        --txt3: #64748B;
        --shadow: 0 10px 40px rgba(15, 23, 42, 0.06);
        --card-bg: linear-gradient(135deg, rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0.5));
        --card-b: rgba(255, 255, 255, 1);
        --nav-bg: linear-gradient(135deg, rgba(255, 255, 255, 0.85), rgba(248, 250, 252, 0.7));
        --modal-bg: linear-gradient(180deg, rgba(255, 255, 255, 0.95), rgba(241, 245, 249, 0.85));
        --body-grad:
          radial-gradient(ellipse at 15% 5%, rgba(79, 70, 229, 0.08) 0%, transparent 45%),
          radial-gradient(ellipse at 85% 15%, rgba(14, 165, 233, 0.08) 0%, transparent 45%),
          radial-gradient(ellipse at 50% 90%, rgba(236, 72, 153, 0.05) 0%, transparent 50%);
      }
    }

    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
      -webkit-tap-highlight-color: transparent
    }

    body {
      font-family: var(--font);
      background: var(--bg);
      color: var(--txt);
      min-height: 100dvh;
      overflow-x: hidden;
      font-size: 15px;
      line-height: 1.7;
      background-image: var(--body-grad);
      
    }

    .theme-transition,
    .theme-transition * {
      transition: background-color 0.6s cubic-bezier(0.25, 1, 0.5, 1), border-color 0.6s cubic-bezier(0.25, 1, 0.5, 1), color 0.6s cubic-bezier(0.25, 1, 0.5, 1), box-shadow 0.6s cubic-bezier(0.25, 1, 0.5, 1), background-image 0.6s cubic-bezier(0.25, 1, 0.5, 1) !important;
    }

::view-transition-group(root) {
      animation-timing-function: cubic-bezier(0.8, 0, 0.2, 1);
    }

    ::view-transition-old(root),
    ::view-transition-new(root) {
      animation: none;
      mix-blend-mode: normal;
      display: block;
    }

    ::view-transition-old(root) {
      z-index: 1;
      animation: scale-fade-out 0.8s cubic-bezier(0.8, 0, 0.2, 1) both;
    }

    ::view-transition-new(root) {
      z-index: 2;
      animation: circle-sweep-up 0.8s cubic-bezier(0.8, 0, 0.2, 1) both;
    }

    [data-theme="dark"]::view-transition-new(root) {
      animation-name: circle-sweep-down;
    }

    @keyframes scale-fade-out {
      to {
        transform: scale(0.92);
        opacity: 0.4;
        filter: blur(4px);
      }
    }

    @keyframes circle-sweep-up {
      from {
        clip-path: circle(0% at 50% 120%);
      }

      to {
        clip-path: circle(150% at 50% 120%);
      }
    }

    @keyframes circle-sweep-down {
      from {
        clip-path: circle(0% at 50% -20%);
      }

      to {
        clip-path: circle(150% at 50% -20%);
      }
    }

::-webkit-scrollbar {
      width: 4px
    }

    ::-webkit-scrollbar-track {
      background: transparent
    }

    ::-webkit-scrollbar-thumb {
      background: var(--txt3);
      border-radius: 4px
    }

    input,
    button,
    select {
      font-family: var(--font);
      outline: none;
      border: none
    }

    a {
      text-decoration: none;
      color: inherit
    }

    .hidden {
      display: none !important
    }

    img {
      max-width: 100%
    }

.skel {
      background: linear-gradient(-45deg, rgba(255, 255, 255, .03) 25%, rgba(255, 255, 255, .08) 50%, rgba(255, 255, 255, .03) 75%);
      background-size: 200% 200%;
      animation: shimmer 1.5s ease infinite;
      border-radius: 12px
    }

    @keyframes shimmer {
      0% {
        background-position: 100% 100%
      }

      100% {
        background-position: 0 0
      }
    }

    #loading-screen {
      position: fixed;
      inset: 0;
      z-index: 9999;
      background: var(--bg);
      display: flex;
      flex-direction: column;
      padding: 24px 16px;
      gap: 16px
    }

    .skel-header {
      height: 60px;
      border-radius: 16px
    }

    .skel-card {
      height: 140px;
      border-radius: 20px
    }

    .skel-row {
      display: flex;
      gap: 12px
    }

    .skel-row>div {
      flex: 1;
      height: 80px;
      border-radius: 16px
    }

#login-screen {
      position: fixed;
      inset: 0;
      z-index: 8000;
      background: var(--bg);
      display: flex;
      align-items: center;
      justify-content: center;
      overflow: hidden
    }

    .login-bg {
      position: absolute;
      inset: 0;
      overflow: hidden
    }

    .login-orb {
      position: absolute;
      border-radius: 50%;
      filter: blur(80px);
      opacity: .15;
      animation: orb-float 20s ease-in-out infinite
    }

    .login-orb:nth-child(1) {
      width: 300px;
      height: 300px;
      background: var(--pri);
      top: -50px;
      right: -80px;
      animation-delay: 0s
    }

    .login-orb:nth-child(2) {
      width: 250px;
      height: 250px;
      background: var(--sec);
      bottom: -60px;
      left: -60px;
      animation-delay: -7s
    }

    .login-orb:nth-child(3) {
      width: 200px;
      height: 200px;
      background: var(--acc);
      top: 40%;
      left: 50%;
      animation-delay: -14s
    }

    @keyframes orb-float {

      0%,
      100% {
        transform: translate(0, 0)
      }

      25% {
        transform: translate(30px, -40px)
      }

      50% {
        transform: translate(-20px, 30px)
      }

      75% {
        transform: translate(40px, 20px)
      }
    }

    .login-card {
      position: relative;
      z-index: 1;
      background: linear-gradient(135deg, rgba(255, 255, 255, .08), rgba(255, 255, 255, .02));
      backdrop-filter: blur(50px) saturate(180%);
      -webkit-backdrop-filter: blur(50px) saturate(180%);
      border: 1px solid rgba(255, 255, 255, .12);
      border-radius: 28px;
      padding: 44px 30px;
      width: min(380px, 90vw);
      text-align: center;
      box-shadow: 0 24px 80px rgba(0, 0, 0, .5), inset 0 1px 0 rgba(255, 255, 255, .1)
    }

    .login-card img {
      width: 80px;
      height: 80px;
      border-radius: 20px;
      margin-bottom: 16px;
      box-shadow: 0 8px 24px rgba(0, 0, 0, .3)
    }

    .login-card h1 {
      font-size: 1.6rem;
      font-weight: 800;
      margin-bottom: 4px;
      background: linear-gradient(135deg, var(--txt), var(--pri));
      -webkit-background-clip: text;
      background-clip: text;
      -webkit-text-fill-color: transparent;
      color: transparent
    }

    .login-card p {
      color: var(--txt2);
      font-size: .85rem;
      margin-bottom: 24px
    }

    .input-wrap {
      position: relative;
      margin-bottom: 16px
    }

    .input-wrap i {
      position: absolute;
      right: 14px;
      top: 50%;
      transform: translateY(-50%);
      color: var(--txt3);
      font-size: 1.2rem
    }

    .input-wrap input {
      width: 100%;
      padding: 14px 44px 14px 14px;
      background: rgba(255, 255, 255, .06);
      border: 1px solid rgba(255, 255, 255, .1);
      border-radius: 14px;
      color: var(--txt);
      font-size: 1rem;
      transition: .3s
    }

    .input-wrap input:focus {
      border-color: var(--pri);
      box-shadow: 0 0 0 3px var(--pri-g)
    }

    .input-wrap input::placeholder {
      color: var(--txt3)
    }

    .btn-primary {
      width: 100%;
      padding: 14px;
      background: linear-gradient(135deg, var(--pri), #6554e8);
      color: #fff;
      border-radius: 14px;
      font-size: 1rem;
      font-weight: 700;
      cursor: pointer;
      transition: .3s;
      position: relative;
      overflow: hidden
    }

    .btn-primary:active {
      transform: scale(.97)
    }

    .btn-primary:hover {
      box-shadow: 0 8px 24px var(--pri-g)
    }

    .btn-guest {
      background: none;
      color: var(--txt2);
      font-size: .9rem;
      cursor: pointer;
      margin-top: 16px;
      padding: 8px;
      transition: .3s
    }

    .btn-guest:hover {
      color: var(--pri)
    }

    .login-error {
      color: var(--acc);
      font-size: .8rem;
      margin-top: 8px;
      min-height: 20px
    }

#main-app {
      display: none;
      padding-bottom: 100px;
      min-height: 100dvh
    }

    .app-header {
      padding: 20px 16px 12px;
      background: linear-gradient(180deg, rgba(11, 18, 40, .95) 0%, rgba(11, 18, 40, .5) 60%, transparent 100%)
    }

    .date-display {
      display: flex;
      align-items: center;
      gap: 8px;
      color: var(--txt2);
      font-size: .95rem;
      margin-bottom: 4px
    }

    .date-display i {
      color: var(--pri);
      font-size: 1.1rem
    }

    .greeting-card {
      background: linear-gradient(135deg, rgba(139, 123, 255, .12), rgba(0, 212, 255, .06));
      border: 1px solid rgba(139, 123, 255, .18);
      border-radius: 22px;
      padding: 22px;
      margin: 12px 0;
      position: relative;
      overflow: hidden;
      backdrop-filter: blur(20px)
    }

    .greeting-card::before {
      content: '';
      position: absolute;
      inset: 0;
      background: linear-gradient(135deg, transparent, rgba(139, 123, 255, .05));
      pointer-events: none
    }

    .greeting-card::after {
      content: '';
      position: absolute;
      top: -50%;
      right: -30%;
      width: 200px;
      height: 200px;
      background: radial-gradient(circle, rgba(139, 123, 255, .12), transparent 70%);
      pointer-events: none
    }

    .greeting-card h2 {
      font-size: 1.35rem;
      font-weight: 700;
      margin-bottom: 4px;
      position: relative
    }

    .greeting-card .sub {
      color: var(--txt2);
      font-size: .92rem;
      position: relative
    }

    .greeting-stats {
      display: flex;
      gap: 10px;
      margin-top: 14px;
      flex-wrap: wrap;
      position: relative
    }

    .g-stat {
      background: rgba(255, 255, 255, .07);
      border-radius: 12px;
      padding: 8px 14px;
      font-size: .7rem;
      display: flex;
      align-items: center;
      gap: 6px;
      border: 1px solid rgba(255, 255, 255, .06);
      backdrop-filter: blur(10px)
    }

    .g-stat i {
      font-size: 1rem
    }

    .g-stat.am {
      color: var(--am)
    }

    .g-stat.nt {
      color: var(--nt)
    }

.period-tabs {
      display: flex;
      gap: 0;
      padding: 0 16px;
      margin: 0 0 14px
    }

    .period-tab {
      flex: 1;
      padding: 10px 8px;
      text-align: center;
      cursor: pointer;
      transition: all .3s cubic-bezier(.22, 1, .36, 1);
      font-size: .78rem;
      font-weight: 600;
      color: var(--txt3);
      border-bottom: 2px solid transparent;
      position: relative
    }

    .period-tab:hover {
      color: var(--txt2);
      background: rgba(255, 255, 255, .03)
    }

    .period-tab.active {
      color: var(--pri);
      border-bottom-color: var(--pri)
    }

    .period-tab.active .pt-type {
      opacity: 1
    }

    .period-tab .pt-name {
      display: block;
      margin-bottom: 2px
    }

    .period-tab .pt-type {
      font-size: .68rem;
      opacity: .6
    }

    .period-tab .pt-type.am {
      color: var(--am)
    }

    .period-tab .pt-type.nt {
      color: var(--nt)
    }

    .period-tab .pt-dot {
      position: absolute;
      top: 6px;
      right: 6px;
      width: 6px;
      height: 6px;
      border-radius: 50%;
      background: var(--ok);
      display: none
    }

    .period-tab.is-current .pt-dot {
      display: block
    }

    .period-content {
      padding: 0 16px;
      animation: fadeUp .3s ease
    }

    .period-info {
      display: flex;
      align-items: center;
      gap: 8px;
      padding: 6px 12px;
      margin-bottom: 10px;
      background: rgba(255, 255, 255, .04);
      border-radius: 10px;
      font-size: .72rem;
      color: var(--txt3)
    }

    .period-info i {
      color: var(--pri);
      font-size: .9rem
    }

.theme-section {
      margin: 16px;
      padding: 16px;
      background: linear-gradient(135deg, rgba(255, 255, 255, .06), rgba(255, 255, 255, .02));
      border: 1px solid rgba(255, 255, 255, .07);
      border-radius: 18px
    }

    .theme-section h4 {
      font-size: .85rem;
      font-weight: 700;
      margin-bottom: 12px;
      display: flex;
      align-items: center;
      gap: 8px
    }

    .theme-options {
      display: flex;
      gap: 8px
    }

    .theme-opt {
      flex: 1;
      padding: 10px 8px;
      border-radius: 12px;
      text-align: center;
      cursor: pointer;
      transition: all .3s;
      font-size: .75rem;
      background: rgba(255, 255, 255, .04);
      border: 1px solid rgba(255, 255, 255, .06);
      color: var(--txt2);
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 4px
    }

    .theme-opt i {
      font-size: 1.2rem
    }

    .theme-opt.active {
      background: var(--pri-g);
      border-color: rgba(139, 123, 255, .3);
      color: var(--pri)
    }

    .theme-opt:hover:not(.active) {
      background: rgba(255, 255, 255, .06)
    }

.settings-item {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 14px 16px;
      margin: 0 16px 8px;
      background: linear-gradient(135deg, rgba(255, 255, 255, .05), rgba(255, 255, 255, .02));
      border: 1px solid rgba(255, 255, 255, .06);
      border-radius: 14px;
      cursor: pointer;
      transition: .3s
    }

    .settings-item:hover {
      border-color: rgba(139, 123, 255, .2)
    }

    .settings-item .si-left {
      display: flex;
      align-items: center;
      gap: 12px
    }

    .settings-item .si-icon {
      width: 36px;
      height: 36px;
      border-radius: 10px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 1.1rem
    }

    .settings-item .si-text {
      font-size: .85rem;
      font-weight: 600
    }

    .settings-item .si-sub {
      font-size: .7rem;
      color: var(--txt3)
    }

    .settings-item .si-arrow {
      color: var(--txt3);
      font-size: 1rem
    }

.next-shift-card {
      margin: 12px 16px;
      padding: 16px;
      background: linear-gradient(135deg, rgba(0, 230, 118, .08), rgba(0, 212, 255, .06));
      border: 1px solid rgba(0, 230, 118, .15);
      border-radius: 18px;
      display: flex;
      align-items: center;
      gap: 14px
    }

    .next-shift-card .nsc-icon {
      width: 44px;
      height: 44px;
      border-radius: 12px;
      background: rgba(0, 230, 118, .12);
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 1.3rem;
      color: var(--ok)
    }

    .next-shift-card .nsc-info {
      flex: 1
    }

    .next-shift-card .nsc-title {
      font-size: .78rem;
      color: var(--txt2)
    }

    .next-shift-card .nsc-value {
      font-size: .95rem;
      font-weight: 700
    }

.section-title {
      font-size: 1rem;
      font-weight: 700;
      color: var(--txt2);
      padding: 0 16px;
      margin: 16px 0 10px;
      display: flex;
      align-items: center;
      gap: 8px
    }

    .nurse-list {
      padding: 0 16px;
      display: flex;
      flex-direction: column;
      gap: 10px
    }

    .nurse-card {
      background: linear-gradient(135deg, rgba(255, 255, 255, .06), rgba(255, 255, 255, .02));
      border: 1px solid rgba(255, 255, 255, .08);
      border-radius: 18px;
      padding: 14px 16px;
      display: flex;
      align-items: center;
      gap: 14px;
      transition: all .3s cubic-bezier(.22, 1, .36, 1);
      cursor: default
    }

    .nurse-card:hover {
      border-color: rgba(139, 123, 255, .25);
      transform: translateY(-2px);
      box-shadow: 0 12px 32px rgba(0, 0, 0, .25)
    }

    .avatar {
      width: 48px;
      height: 48px;
      border-radius: 50%;
      overflow: hidden;
      flex-shrink: 0;
      background: linear-gradient(135deg, var(--bg3), var(--bg2));
      display: flex;
      align-items: center;
      justify-content: center;
      border: 2px solid rgba(255, 255, 255, .15);
      position: relative;
      box-shadow: 0 4px 12px rgba(0, 0, 0, .2)
    }

    .avatar img,
    .avatar svg {
      width: 100%;
      height: 100%;
      object-fit: cover;
      border-radius: 50%;
      object-position: center top;
      transform: scale(1.15) translateY(5%);
      transition: transform 0.3s ease;
    }

#tab-profile .avatar img,
    .profile-avatar .avatar img,
    .profile-avatar img {
      object-position: center center;
      transform: none;
    }

    .avatar.male {
      border-color: rgba(9, 7, 24, 0.4);
      box-shadow: 0 4px 16px rgba(139, 123, 255, .15)
    }

    .avatar.female {
      border-color: rgba(255, 107, 157, .4);
      box-shadow: 0 4px 16px rgba(255, 107, 157, .15)
    }

    .nurse-info {
      flex: 1;
      min-width: 0
    }

    .nurse-name {
      font-size: 1.05rem;
      font-weight: 700;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis
    }

    .nurse-spec {
      font-size: .82rem;
      color: var(--txt2)
    }

    .nurse-actions {
      display: flex;
      gap: 8px
    }

    .action-btn {
      width: 40px;
      height: 40px;
      border-radius: 50%;
      background: rgba(255, 255, 255, .07);
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      transition: all .3s cubic-bezier(.22, 1, .36, 1);
      color: var(--txt2);
      font-size: 1.1rem;
      border: 1px solid rgba(255, 255, 255, .06)
    }

    .action-btn:hover {
      background: var(--pri-g);
      color: var(--pri);
      border-color: rgba(139, 123, 255, .2);
      transform: scale(1.08)
    }

    .action-btn:active {
      transform: scale(.92)
    }

.shift-filter {
      display: flex;
      gap: 6px;
      padding: 0 16px;
      margin-bottom: 12px;
      flex-wrap: wrap
    }

    .filter-btn {
      padding: 6px 12px;
      border-radius: 10px;
      font-size: .78rem;
      font-weight: 600;
      cursor: pointer;
      background: var(--glass);
      color: var(--txt3);
      transition: all .3s;
      border: 1px solid transparent;
      white-space: nowrap;
      flex-shrink: 0
    }

    .filter-btn.active {
      background: var(--pri-g);
      color: var(--pri);
      border-color: rgba(124, 111, 255, .25)
    }

    .filter-btn.active-am {
      background: var(--am-bg);
      color: var(--am);
      border-color: rgba(255, 179, 71, .3)
    }

    .filter-btn.active-nt {
      background: var(--nt-bg);
      color: var(--nt);
      border-color: rgba(123, 140, 255, .3)
    }

    .filter-btn.active-all {
      background: linear-gradient(135deg, var(--am-bg), var(--nt-bg));
      color: var(--pri);
      border-color: rgba(139, 123, 255, .25)
    }

    .filter-btn.active-upcoming {
      background: rgba(0, 230, 118, .1);
      color: var(--ok);
      border-color: rgba(0, 230, 118, .2)
    }

.modal-overlay {
      position: fixed;
      inset: 0;
      z-index: 7000;
      background: rgba(0, 0, 0, .6);
      backdrop-filter: blur(8px);
      opacity: 0;
      pointer-events: none;
      transition: .3s;
      display: flex;
      align-items: flex-end;
      justify-content: center
    }

    .modal-overlay.show {
      opacity: 1;
      pointer-events: auto
    }

    .modal-content {
      background: linear-gradient(180deg, #1a1f42, #0d1330);
      border: 1px solid var(--glass-b);
      border-radius: 24px 24px 0 0;
      padding: 20px 20px 32px;
      width: 100%;
      max-width: 420px;
      transform: translateY(100%);
      transition: .4s cubic-bezier(.22, 1, .36, 1)
    }

    .modal-overlay.show .modal-content {
      transform: translateY(0)
    }

    .modal-handle {
      width: 40px;
      height: 4px;
      background: var(--txt3);
      border-radius: 4px;
      margin: 0 auto 16px
    }

    .modal-nurse {
      display: flex;
      align-items: center;
      gap: 14px;
      margin-bottom: 20px
    }

    .modal-nurse .avatar {
      width: 56px;
      height: 56px
    }

    .modal-nurse .nurse-name {
      font-size: 1.1rem
    }

    .modal-phone {
      direction: ltr;
      text-align: center;
      font-size: 1.4rem;
      font-weight: 700;
      color: var(--txt);
      letter-spacing: 2px;
      margin-bottom: 20px
    }

    .modal-actions {
      display: flex;
      gap: 10px
    }

    .modal-btn {
      flex: 1;
      padding: 12px;
      border-radius: 14px;
      text-align: center;
      font-size: .85rem;
      font-weight: 600;
      cursor: pointer;
      transition: .3s;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 6px
    }

    .modal-btn i {
      font-size: 1.4rem
    }

    .modal-btn.call {
      background: rgba(0, 230, 118, .12);
      color: var(--ok)
    }

    .modal-btn.copy {
      background: rgba(0, 212, 255, .12);
      color: var(--sec)
    }

    .modal-btn.whatsapp {
      background: rgba(37, 211, 102, .12);
      color: #25D366
    }

    .modal-btn:active {
      transform: scale(.95)
    }

#bottom-nav {
      position: fixed;
      bottom: 10px;
      left: 50%;
      transform: translateX(-50%);
      width: calc(100% - 32px);
      max-width: 390px;
      background: linear-gradient(135deg, rgba(120, 119, 198, .1), rgba(255, 255, 255, .05), rgba(120, 119, 198, .1));
      backdrop-filter: blur(50px) saturate(200%);
      -webkit-backdrop-filter: blur(50px) saturate(200%);
      border: 1px solid rgba(255, 255, 255, .1);
      border-radius: 24px;
      padding: 6px 8px;
      display: flex;
      justify-content: space-around;
      align-items: center;
      z-index: 5000;
      box-shadow: 0 10px 40px rgba(0, 0, 0, .35), inset 0 1px 0 rgba(255, 255, 255, .1), inset 0 -1px 0 rgba(255, 255, 255, .03)
    }

    .nav-item {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 2px;
      padding: 7px 12px;
      border-radius: 14px;
      cursor: pointer;
      transition: all .4s cubic-bezier(0.34, 1.56, 0.64, 1);
      color: var(--txt3);
      font-size: .72rem;
      position: relative;
      min-width: 56px
    }

    .nav-item i {
      font-size: 1.2rem;
      transition: all .4s cubic-bezier(0.34, 1.56, 0.64, 1)
    }

    .nav-item.active {
      color: var(--pri);
    }

    .nav-item.active i {
      transform: translateY(-4px) scale(1.2)
    }

    .nav-item.active::after {
      content: '';
      position: absolute;
      bottom: 2px;
      width: 18px;
      height: 3px;
      border-radius: 3px;
      background: linear-gradient(90deg, var(--pri), var(--sec));
      box-shadow: 0 0 12px var(--pri);
      opacity: 1;
      transition: all .4s cubic-bezier(0.34, 1.56, 0.64, 1)
    }

    #nav-defter, #nav-profile {
      display: none
    }

    .nav-item:active {
      transform: scale(.92)
    }

.cal-wrap {
      margin: 0 16px;
      background: var(--card-bg);
      border: 1px solid var(--card-b);
      border-radius: 24px;
      padding: 20px 10px;
      box-shadow: var(--shadow);
    }

    .cal-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 0 10px;
      margin-bottom: 20px
    }

    .cal-header h3 {
      font-size: 1.1rem;
      font-weight: 800;
      color: var(--txt);
    }

    .cal-nav {
      width: 40px;
      height: 40px;
      border-radius: 14px;
      background: var(--glass);
      border: 1px solid rgba(255, 255, 255, .05);
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      color: var(--txt2);
      font-size: 1.2rem;
      transition: all .3s cubic-bezier(.22, 1, .36, 1);
    }

    .cal-nav:hover {
      background: var(--pri-g);
      color: var(--pri);
      transform: scale(1.05);
    }

    .cal-nav:active {
      transform: scale(.95);
    }

    .cal-grid {
      display: grid;
      grid-template-columns: repeat(7, 1fr);
      gap: 6px 4px;
      padding: 0;
      margin-bottom: 0;
    }

    .cal-day-name {
      text-align: center;
      font-size: .92rem;
      color: var(--txt2);
      padding: 0 0 6px;
      font-weight: 900;
      writing-mode: sideways-lr;
      text-orientation: mixed;
      height: 50px;
      display: flex;
      align-items: center;
      justify-content: center;
      margin: 0 auto;
      letter-spacing: .5px
    }

    .cal-day {
      text-align: center;
      padding: 12px 2px;
      border-radius: 14px;
      font-size: .85rem;
      cursor: pointer;
      transition: all .3s;
      position: relative;
      border: 1px solid transparent;
      aspect-ratio: 1 / 1.1;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-direction: column;
      min-width: 0;
    }

    .cal-day:hover {
      background: rgba(255, 255, 255, .04);
      border-color: rgba(255, 255, 255, .08);
    }

    .cal-day.today {
      background: rgba(139, 123, 255, .1);
      color: var(--pri);
      font-weight: 800;
      border-color: rgba(139, 123, 255, .2);
    }

    .cal-day.selected {
      background: linear-gradient(135deg, var(--pri), var(--pri-l));
      color: #fff;
      font-weight: 800;
      border-color: var(--pri);
      box-shadow: 0 8px 20px var(--pri-g);
      transform: translateY(-2px);
    }

    .cal-dot {
      position: absolute;
      bottom: 6px;
      width: 5px;
      height: 5px;
      border-radius: 50%;
    }

    .cal-dot.am {
      background: var(--am);
      box-shadow: 0 0 8px var(--am);
    }

    .cal-dot.nt {
      background: var(--nt);
      box-shadow: 0 0 8px var(--nt);
    }

    .cal-day.selected .cal-dot {
      background: #fff;
      box-shadow: 0 0 8px rgba(255, 255, 255, .6);
    }

    .cal-day.selected .cal-letter {
      color: #fff !important;
      text-shadow: 0 0 8px rgba(255, 255, 255, .5) !important;
    }

    .cal-day.selected .cal-emoji {
      filter: brightness(2);
    }

    .cal-dot.single {
      left: 50%;
      transform: translateX(-50%);
    }

    .cal-dot.left {
      left: 35%;
    }

    .cal-dot.right {
      right: 35%;
    }

    .cal-day.other-month {
      color: var(--txt3);
      opacity: .3;
    }

    .cal-day.empty {
      pointer-events: none;
    }

@media (max-width: 420px) {
      .cal-wrap {
        margin: 0 10px;
        padding: 14px 6px;
        border-radius: 20px;
      }

      .cal-header h3 {
        font-size: 1rem;
      }

      .cal-grid {
        gap: 6px 2px;
      }

      .cal-day-name {
        font-size: .82rem;
        height: 42px;
        padding: 0 0 4px;
      }

      .cal-day {
        padding: 8px 1px;
        font-size: .78rem;
        border-radius: 12px;
      }

      .cal-dot {
        width: 4.5px;
        height: 4.5px;
        bottom: 5px;
      }

      .cal-dot.left {
        left: 28%;
      }

      .cal-dot.right {
        right: 28%;
      }

.cal-emoji {
        font-size: 0.85rem !important;
      }
    }

    @media (max-width: 360px) {
      .cal-wrap {
        margin: 0 6px;
        padding: 12px 4px;
        border-radius: 16px;
      }

      .cal-header h3 {
        font-size: .88rem;
      }

      .cal-header {
        margin-bottom: 12px;
      }

      .cal-grid {
        gap: 4px 1px;
      }

      .cal-day-name {
        font-size: .75rem;
        height: 38px;
      }

      .cal-day {
        padding: 6px 1px;
        font-size: .72rem;
        border-radius: 10px;
      }

      .cal-dot {
        width: 4px;
        height: 4px;
        bottom: 4px;
      }

.cal-emoji {
        font-size: 0.75rem !important;
      }
    }

    .cal-results {
      padding: 16px;
      margin-top: 8px;
    }

    .period-label {
      font-size: .85rem;
      font-weight: 700;
      margin-bottom: 10px;
      display: inline-flex;
      align-items: center;
      gap: 8px;
      padding: 6px 14px;
      border-radius: 10px
    }

    .period-label.am-label {
      background: var(--am-bg);
      color: var(--am);
      border: 1px solid rgba(255, 179, 71, .15)
    }

    .period-label.nt-label {
      background: var(--nt-bg);
      color: var(--nt);
      border: 1px solid rgba(123, 140, 255, .15)
    }

    .period-label i {
      font-size: 1rem
    }

.search-wrap {
      padding: 0 16px;
      margin-bottom: 16px;
      position: relative
    }

    .search-input {
      width: 100%;
      padding: 13px 44px 13px 14px;
      background: rgba(255, 255, 255, .06);
      border: 1px solid rgba(255, 255, 255, .08);
      border-radius: 14px;
      color: var(--txt);
      font-size: .95rem
    }

    .search-input:focus {
      border-color: var(--pri);
      box-shadow: 0 0 0 3px var(--pri-g)
    }

    .search-icon {
      position: absolute;
      right: 14px;
      top: 50%;
      transform: translateY(-50%);
      color: var(--txt3);
      font-size: 1.1rem;
      pointer-events: none;
      z-index: 1;
      padding-right: 15px;
    }

    .search-tabs {
      display: flex;
      gap: 8px;
      padding: 0 16px;
      margin-bottom: 16px
    }

    .search-tab {
      padding: 8px 16px;
      border-radius: 12px;
      font-size: .9rem;
      font-weight: 600;
      cursor: pointer;
      background: var(--glass);
      color: var(--txt2);
      transition: .3s;
      border: 1px solid transparent
    }

    .search-tab.active {
      background: var(--pri-g);
      color: var(--pri);
      border-color: rgba(124, 111, 255, .3)
    }

    .search-month-nav {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 14px;
      margin: 0 16px 14px;
      padding: 8px 10px;
      border-radius: 16px;
      background: linear-gradient(135deg, rgba(124, 111, 255, .08), rgba(124, 111, 255, .03));
      border: 1px solid rgba(124, 111, 255, .12);
      backdrop-filter: blur(16px);
    }

    .search-month-nav .smn-btn {
      width: 32px;
      height: 32px;
      border-radius: 10px;
      display: flex;
      align-items: center;
      justify-content: center;
      background: rgba(124, 111, 255, .1);
      color: var(--pri);
      font-size: 1.1rem;
      cursor: pointer;
      transition: all .2s ease;
      border: none;
      flex-shrink: 0;
    }

    .search-month-nav .smn-btn:active {
      transform: scale(.88);
      background: var(--pri);
      color: #fff;
    }

    .search-month-nav .smn-month {
      font-size: .88rem;
      font-weight: 800;
      color: var(--pri);
      letter-spacing: .2px;
      white-space: nowrap;
    }

    [data-theme="light"] .search-month-nav {
      background: linear-gradient(135deg, rgba(108, 99, 255, .06), rgba(255, 255, 255, .7));
      border-color: rgba(108, 99, 255, .1);
      box-shadow: 0 2px 8px rgba(108, 99, 255, .04);
    }

    .nurse-chips {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      padding: 0 16px;
      margin-bottom: 16px
    }

    .nurse-chip {
      padding: 8px 14px;
      border-radius: 20px;
      font-size: .8rem;
      background: var(--glass);
      border: 1px solid var(--glass-b);
      cursor: pointer;
      transition: .3s;
      display: flex;
      align-items: center;
      gap: 6px
    }

    .nurse-chip:hover {
      border-color: var(--pri)
    }

    .nurse-chip.selected {
      background: var(--pri-g);
      border-color: var(--pri);
      color: var(--pri)
    }

    .shift-item {
      display: flex;
      align-items: center;
      gap: 12px;
      padding: 12px 16px;
      margin: 0 16px 8px;
      background: var(--glass);
      border-radius: 14px;
      border: 1px solid rgba(255, 255, 255, .05);
      transition: .3s;
      position: relative;
      border-right: 3px solid var(--ok)
    }

#tab-profile .shift-item {
      margin: 0 0 8px
    }

    .shift-item.past {
      border-right-color: var(--txt3);
      background: rgba(255, 255, 255, .02)
    }

    .shift-item.past .shift-date .day-num {
      color: var(--txt3)
    }

    .shift-item.past .shift-type {
      opacity: .6
    }

    .shift-item.past::after {
      content: 'أنتهى';
      position: absolute;
      left: 12px;
      top: 50%;
      transform: translateY(-50%);
      font-size: .6rem;
      color: var(--acc);
      background: rgba(255, 82, 82, .12);
      padding: 2px 8px;
      border-radius: 6px;
      font-weight: 700
    }

    .shift-item.current-shift {
      background: linear-gradient(135deg, rgba(16, 185, 129, 0.08), rgba(16, 185, 129, 0.02));
      border: 1px solid rgba(16, 185, 129, 0.2);
      border-right: 3px solid var(--ok);
      box-shadow: 0 4px 16px rgba(16, 185, 129, 0.05);
    }

    .shift-item.current-shift::after {
      content: 'الآن';
      position: absolute;
      left: 12px;
      top: 50%;
      transform: translateY(-50%);
      font-size: .6rem;
      color: #fff;
      background: linear-gradient(135deg, #10b981, #059669);
      box-shadow: 0 2px 8px rgba(16, 185, 129, 0.3);
      padding: 2px 8px;
      border-radius: 6px;
      font-weight: 800;
      z-index: 2;
    }

    .shift-item.today-shift {
      border-right-color: var(--pri);
      background: linear-gradient(135deg, rgba(124, 111, 255, .08), rgba(0, 212, 255, .04));
      border: 1px solid rgba(124, 111, 255, .2);
      border-right: 3px solid var(--pri)
    }

    .shift-item.today-shift::after {
      content: 'اليوم';
      position: absolute;
      left: 12px;
      top: 50%;
      transform: translateY(-50%);
      font-size: .6rem;
      color: var(--pri);
      background: var(--pri-g);
      padding: 2px 8px;
      border-radius: 6px;
      font-weight: 700
    }

    .shift-item.tomorrow-shift {
      border-right-color: var(--sec);
    }

    .shift-item.tomorrow-shift::after {
      content: 'غداً';
      position: absolute;
      left: 12px;
      top: 50%;
      transform: translateY(-50%);
      font-size: .6rem;
      color: var(--sec);
      background: rgba(0, 212, 255, .12);
      padding: 2px 8px;
      border-radius: 6px;
      font-weight: 700
    }

    .shift-item .shift-date {
      min-width: 50px;
      text-align: center
    }

    .shift-item .shift-date .day-num {
      font-size: 1.2rem;
      font-weight: 700
    }

    .shift-item .shift-date .day-name {
      font-size: .80rem;
      color: var(--txt2)
    }

    .shift-item .shift-type {
      padding: 4px 10px;
      border-radius: 8px;
      font-size: .82rem;
      font-weight: 700
    }

    .shift-item .shift-type.am {
      background: var(--am-bg);
      color: var(--am)
    }

    .shift-item .shift-type.nt {
      background: var(--nt-bg);
      color: var(--nt)
    }

    .shift-item .shift-type.am-past {
      background: rgba(255, 179, 71, .12) !important;
      color: rgba(230, 126, 34, 1) !important;
    }

    .shift-item .shift-type.nt-past {
      background: rgba(123, 140, 255, .12) !important;
      color: rgba(108, 99, 255, 1) !important;
    }

    .shift-item .shift-partners {
      flex: 1;
      font-size: .9rem;
      color: var(--txt2)
    }

.colleague-card {
      margin: 12px 16px;
      background: linear-gradient(135deg, rgba(139, 123, 255, .1), rgba(0, 212, 255, .05));
      border: 1px solid rgba(139, 123, 255, .18);
      border-radius: 22px;
      padding: 20px;
      position: relative;
      overflow: hidden;
      backdrop-filter: blur(20px)
    }

    .colleague-card::before {
      content: '';
      position: absolute;
      top: -40%;
      right: -20%;
      width: 180px;
      height: 180px;
      background: radial-gradient(circle, rgba(139, 123, 255, .12), transparent 70%);
      pointer-events: none;
      animation: pulse-glow 4s ease-in-out infinite
    }

    @keyframes pulse-glow {

      0%,
      100% {
        opacity: .6;
        transform: scale(1)
      }

      50% {
        opacity: 1;
        transform: scale(1.1)
      }
    }

    .colleague-card .cc-header {
      display: flex;
      align-items: center;
      gap: 8px;
      margin-bottom: 14px;
      font-size: .82rem;
      color: var(--pri-l);
      font-weight: 700
    }

    .colleague-card .cc-header i {
      font-size: 1.1rem
    }

    .colleague-card .cc-body {
      display: flex;
      align-items: center;
      gap: 14px
    }

    .colleague-card .cc-avatar {
      width: 58px;
      height: 58px;
      border-radius: 50%;
      overflow: hidden;
      flex-shrink: 0;
      border: 2.5px solid rgba(139, 123, 255, .4);
      background: var(--bg3);
      display: flex;
      align-items: center;
      justify-content: center;
      box-shadow: 0 4px 16px rgba(139, 123, 255, .15)
    }

    .colleague-card .cc-avatar img {
      width: 100%;
      height: 100%;
      object-fit: cover
    }

    .colleague-card .cc-info {
      flex: 1;
      min-width: 0
    }

    .colleague-card .cc-name {
      font-size: 1rem;
      font-weight: 700;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis
    }

    .colleague-card .cc-spec {
      font-size: .75rem;
      color: var(--txt2);
      margin-top: 2px
    }

    .colleague-card .cc-shift-badge {
      display: inline-flex;
      align-items: center;
      gap: 4px;
      margin-top: 6px;
      padding: 4px 12px;
      border-radius: 8px;
      font-size: .7rem;
      font-weight: 600
    }

    .colleague-card .cc-shift-badge.am {
      background: var(--am-bg);
      color: var(--am)
    }

    .colleague-card .cc-shift-badge.nt {
      background: var(--nt-bg);
      color: var(--nt)
    }

    .colleague-card .cc-actions {
      display: flex;
      gap: 10px
    }

    .colleague-card .cc-action {
      width: 44px;
      height: 44px;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      transition: all .3s cubic-bezier(.22, 1, .36, 1);
      font-size: 1.2rem
    }

    .colleague-card .cc-action.call-btn {
      background: rgba(0, 230, 118, .1);
      color: var(--ok);
      border: 1px solid rgba(0, 230, 118, .15)
    }

    .colleague-card .cc-action.call-btn:active {
      transform: scale(.88)
    }

    .colleague-card .cc-action.wa-btn {
      background: rgba(37, 211, 102, .1);
      color: #25D366;
      border: 1px solid rgba(37, 211, 102, .15)
    }

    .colleague-card .cc-action.wa-btn:active {
      transform: scale(.88)
    }

.upcoming-filter {
      display: flex;
      gap: 6px;
      padding: 0 16px;
      margin: 8px 0 12px;
      flex-wrap: nowrap;
      overflow-x: auto;
      -webkit-overflow-scrolling: touch;
      scrollbar-width: none
    }

    .upcoming-filter::-webkit-scrollbar {
      display: none
    }

    .upcoming-filter .uf-btn {
      padding: 7px 12px;
      border-radius: 10px;
      font-size: .78rem;
      font-weight: 600;
      cursor: pointer;
      background: var(--glass);
      color: var(--txt3);
      transition: all .3s;
      border: 1px solid transparent;
      display: flex;
      align-items: center;
      gap: 4px;
      white-space: nowrap;
      flex-shrink: 0
    }

    .upcoming-filter .uf-btn.active {
      background: var(--pri-g);
      color: var(--pri);
      border-color: rgba(124, 111, 255, .25)
    }

    .upcoming-filter .uf-btn.active-am {
      background: var(--am-bg);
      color: var(--am);
      border-color: rgba(255, 179, 71, .3)
    }

    .upcoming-filter .uf-btn.active-nt {
      background: var(--nt-bg);
      color: var(--nt);
      border-color: rgba(123, 140, 255, .3)
    }

    .upcoming-filter .uf-btn.active-all {
      background: linear-gradient(135deg, var(--am-bg), var(--nt-bg));
      color: var(--pri);
      border-color: rgba(139, 123, 255, .25)
    }

    .upcoming-filter .uf-btn.active-week {
      background: rgba(0, 230, 118, .1);
      color: var(--ok);
      border-color: rgba(0, 230, 118, .2)
    }

    .upcoming-filter .uf-btn i {
      font-size: .88rem
    }

    .compare-results {
      padding: 0 16px
    }

    .compare-stat {
      display: flex;
      gap: 10px;
      margin-bottom: 14px;
      flex-wrap: wrap
    }

    .c-stat {
      flex: 1;
      min-width: 80px;
      background: var(--glass);
      border-radius: 14px;
      padding: 14px;
      text-align: center
    }

    .c-stat .num {
      font-size: 1.5rem;
      font-weight: 800;
      color: var(--pri)
    }

    .c-stat .label {
      font-size: .7rem;
      color: var(--txt2)
    }

.profile-header {
      text-align: center;
      padding: 28px 16px 20px
    }

    .profile-avatar {
      width: 96px;
      height: 96px;
      border-radius: 50%;
      margin: 0 auto 14px;
      border: 3px solid transparent;
      background: #FFFFFF padding-box, linear-gradient(135deg, var(--pri), var(--sec)) border-box;
      overflow: visible;
      display: flex;
      align-items: center;
      justify-content: center;
      position: relative;
      cursor: pointer;
      box-shadow: 0 8px 32px rgba(139, 123, 255, .2)
    }

    .profile-avatar img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      border-radius: 50%
    }

    .profile-avatar:hover .avatar-edit {
      opacity: 1
    }

    .avatar-edit {
      position: absolute;
      inset: 0;
      background: rgba(0, 0, 0, .55);
      display: flex;
      align-items: center;
      justify-content: center;
      opacity: 0;
      transition: .3s;
      font-size: 1.3rem;
      backdrop-filter: blur(4px)
    }

    .profile-name {
      font-size: 1.25rem;
      font-weight: 800;
      background: linear-gradient(135deg, var(--txt), var(--pri-l));
      -webkit-background-clip: text;
      background-clip: text;
      -webkit-text-fill-color: transparent;
      color: transparent
    }

    .profile-spec {
      font-size: .82rem;
      color: var(--txt2);
      margin-top: 2px
    }

    .stats-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 10px;
      padding: 0 16px;
      margin: 16px 0
    }

    .stat-card {
      background: linear-gradient(135deg, rgba(255, 255, 255, .06), rgba(255, 255, 255, .02));
      border: 1px solid rgba(255, 255, 255, .07);
      border-radius: 18px;
      padding: 18px 10px;
      text-align: center;
      transition: all .3s ease
    }

    .stat-card:hover {
      transform: translateY(-2px);
      border-color: rgba(255, 255, 255, .12)
    }

    .stat-card .num {
      font-size: 1.7rem;
      font-weight: 800
    }

    .stat-card .label {
      font-size: .7rem;
      color: var(--txt2);
      margin-top: 4px
    }

    .stat-card.am .num {
      color: var(--am)
    }

    .stat-card.nt .num {
      color: var(--nt)
    }

    .stat-card.total .num {
      color: var(--pri)
    }

    .upcoming-title {
      padding: 0 16px;
      margin: 20px 0 10px;
      font-size: .9rem;
      font-weight: 700;
      display: flex;
      align-items: center;
      gap: 8px
    }

    .upcoming-list {
      padding: 0 16px;
      display: flex;
      flex-direction: column;
      gap: 8px
    }

#pwa-modal {
      position: fixed;
      bottom: -150px;
      left: 50%;
      transform: translateX(-50%);
      z-index: 6000;
      background: linear-gradient(135deg, rgba(20, 25, 45, 0.95), rgba(10, 15, 30, 0.85));
      border: 1px solid rgba(255, 255, 255, 0.08);
      border-radius: 24px;
      padding: 14px 18px;
      width: min(420px, calc(100vw - 32px));
      box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.05);
      backdrop-filter: blur(24px) saturate(180%);
      -webkit-backdrop-filter: blur(24px) saturate(180%);
      display: flex;
      align-items: center;
      gap: 14px;
      transition: all 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
      opacity: 0;
      visibility: hidden;
      color: #fff;
    }

    [data-theme="light"] #pwa-modal,
    body[data-theme="light"] #pwa-modal {
      background: linear-gradient(135deg, rgba(255, 255, 255, 0.95), rgba(248, 250, 252, 0.85));
      border: 1px solid rgba(255, 255, 255, 1);
      box-shadow: 0 20px 40px rgba(15, 23, 42, 0.08), inset 0 1px 0 rgba(255, 255, 255, 1);
      color: var(--txt);
    }

    #pwa-modal.show {
      bottom: 85px;
      opacity: 1;
      visibility: visible;
    }

    .pwa-content {
      display: flex;
      align-items: center;
      gap: 12px;
      flex: 1;
    }

    .pwa-content img {
      width: 44px;
      height: 44px;
      border-radius: 12px;
      box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);
    }

    .pwa-text {
      display: flex;
      flex-direction: column;
      gap: 2px;
    }

    .pwa-text h4 {
      font-size: 0.95rem;
      font-weight: 800;
      margin: 0;
      line-height: 1.2;
    }

    .pwa-text p {
      font-size: 0.75rem;
      color: var(--txt2);
      margin: 0;
      line-height: 1.3;
    }

    .pwa-btns {
      display: flex;
      align-items: center;
    }

    .pwa-install {
      background: linear-gradient(135deg, var(--pri), var(--sec));
      color: #fff;
      border: none;
      padding: 8px 16px;
      border-radius: 12px;
      font-weight: 700;
      font-size: 0.85rem;
      cursor: pointer;
      box-shadow: 0 4px 12px rgba(79, 70, 229, 0.25);
      transition: transform 0.2s, box-shadow 0.2s;
    }

    .pwa-install:active {
      transform: scale(0.95);
    }

    .pwa-close-btn {
      background: rgba(255, 255, 255, 0.05);
      border: none;
      color: var(--txt3);
      width: 32px;
      height: 32px;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      transition: background 0.2s, color 0.2s;
      flex-shrink: 0;
      font-size: 1.1rem;
    }

    [data-theme="light"] .pwa-close-btn {
      background: rgba(15, 23, 42, 0.05);
    }

    .pwa-close-btn:hover {
      background: rgba(255, 255, 255, 0.15);
      color: #fff;
    }

    [data-theme="light"] .pwa-close-btn:hover {
      background: rgba(15, 23, 42, 0.1);
      color: var(--txt);
    }

.app-footer {
      text-align: center;
      padding: 20px 16px 8px;
      color: var(--txt3);
      font-size: .72rem;
      line-height: 1.8;
    }

    .app-footer span {
      color: var(--pri);
      font-weight: 700;
    }

.premium-bal-card {
      background: linear-gradient(135deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.02));
      border: 1px solid rgba(255, 255, 255, 0.1);
      border-radius: 20px;
      padding: 18px;
      position: relative;
      overflow: hidden;
      box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
      backdrop-filter: blur(12px);
    }

    [data-theme="dark"] .defter-record {
      background:
        linear-gradient(180deg, rgba(18, 24, 35, .82), rgba(12, 17, 26, .74)),
        linear-gradient(135deg, rgba(255, 255, 255, .028), rgba(255, 255, 255, .01));
      border-color: rgba(255, 255, 255, .055);
      backdrop-filter: blur(16px) saturate(125%);
      -webkit-backdrop-filter: blur(16px) saturate(125%);
      box-shadow: 0 10px 26px rgba(0, 0, 0, .26), inset 0 1px 0 rgba(255, 255, 255, .025)
    }

    [data-theme="dark"] .defter-record::before {
      background: linear-gradient(155deg, rgba(255, 255, 255, .045), transparent 42%);
      opacity: .7
    }

    [data-theme="dark"] .defter-record:hover {
      border-color: color-mix(in srgb, var(--rec-accent, var(--pri)) 12%, rgba(255, 255, 255, .06));
      box-shadow: 0 14px 30px rgba(0, 0, 0, .3), 0 0 0 1px color-mix(in srgb, var(--rec-accent, var(--pri)) 8%, transparent), inset 0 1px 0 rgba(255, 255, 255, .03)
    }

    [data-theme="dark"] .defter-record .rec-sub-item {
      background: linear-gradient(180deg, rgba(255, 255, 255, .05), rgba(255, 255, 255, .018));
      border-color: rgba(255, 255, 255, .045);
      box-shadow: inset 0 1px 0 rgba(255, 255, 255, .025)
    }

    [data-theme="dark"] .defter-record .rec-date {
      background:
        linear-gradient(180deg, rgba(255, 255, 255, .06), rgba(255, 255, 255, .022)),
        linear-gradient(135deg, color-mix(in srgb, var(--rec-accent, var(--pri)) 7%, rgba(255, 255, 255, .015)), rgba(255, 255, 255, .01));
      border-color: color-mix(in srgb, var(--rec-accent, var(--pri)) 10%, rgba(255, 255, 255, .055));
      box-shadow: inset 0 1px 0 rgba(255, 255, 255, .05), 0 8px 18px rgba(0, 0, 0, .18)
    }

    [data-theme="dark"] .defter-record .rec-date::before {
      background: linear-gradient(160deg, rgba(255, 255, 255, .055), transparent 58%);
      opacity: .75
    }

    [data-theme="dark"] .defter-record .rec-date .rec-day-name {
      color: var(--txt2);
      border-bottom-color: color-mix(in srgb, var(--rec-accent, var(--pri)) 8%, rgba(255, 255, 255, .05))
    }

    [data-theme="light"] .premium-bal-card {
      background: linear-gradient(135deg, rgba(255, 255, 255, 0.95), rgba(255, 255, 255, 0.7));
      border: 1px solid rgba(255, 255, 255, 1);
      box-shadow: 0 8px 24px rgba(15, 23, 42, 0.04), inset 0 1px 0 rgba(255, 255, 255, 1);
    }

    .bal-progress-bg {
      background: rgba(255, 255, 255, 0.1);
      height: 8px;
      border-radius: 6px;
      overflow: hidden;
      margin-top: 14px;
    }

    [data-theme="light"] .bal-progress-bg {
      background: rgba(0, 0, 0, 0.06);
    }

    .bal-progress-bar {
      height: 100%;
      border-radius: 6px;
      transition: width 0.6s cubic-bezier(0.22, 1, 0.36, 1);
    }

    .smart-cash-card {
      display: flex;
      align-items: center;
      justify-content: space-between;
      background: rgba(255, 255, 255, 0.03);
      border: 1px solid rgba(255, 255, 255, 0.05);
      border-radius: 16px;
      padding: 14px 16px;
      margin-bottom: 10px;
      transition: all 0.3s cubic-bezier(.25, .8, .25, 1);
      cursor: pointer;
    }

    .smart-cash-card:hover {
      background: rgba(255, 255, 255, 0.06);
      transform: translateY(-2px);
    }

    .smart-cash-card.selected {
      background: linear-gradient(135deg, rgba(255, 179, 71, 0.15), rgba(255, 179, 71, 0.05));
      border: 1px solid var(--am);
      box-shadow: 0 4px 14px rgba(255, 179, 71, 0.15);
    }

    [data-theme="light"] .smart-cash-card {
      background: rgba(0, 0, 0, 0.02);
      border-color: rgba(0, 0, 0, 0.05);
    }

    [data-theme="light"] .smart-cash-card.selected {
      background: rgba(255, 179, 71, 0.12);
      border-color: var(--am);
    }

.empty-state {
      text-align: center;
      padding: 40px 20px;
      color: var(--txt3)
    }

    .empty-state i {
      font-size: 3rem;
      margin-bottom: 12px;
      opacity: .3
    }

    .empty-state p {
      font-size: .85rem
    }

.tab-content {
      display: none;
      will-change: opacity, transform;
    }

    .tab-content.active {
      display: block;
    }

    .tab-content.animate-in {
      animation: tabEnter 0.38s cubic-bezier(0.34, 1.28, 0.64, 1) both;
    }

    @keyframes tabEnter {
      0% {
        opacity: 0;
        transform: scale(0.96) translateY(10px);
        filter: blur(2px);
      }

      60% {
        opacity: 1;
        filter: blur(0px);
      }

      100% {
        opacity: 1;
        transform: scale(1) translateY(0);
        filter: blur(0px);
      }
    }

    @keyframes fadeUp {
      from {
        opacity: 0;
        transform: translateY(16px)
      }

      to {
        opacity: 1;
        transform: translateY(0)
      }
    }

.toast {
      position: fixed;
      top: 20px;
      left: 50%;
      transform: translateX(-50%) translateY(calc(-100% - 30px)) scale(0.88);
      z-index: 9999;

background: linear-gradient(145deg,
          rgba(28, 32, 64, 0.78) 0%,
          rgba(14, 18, 44, 0.72) 100%);
      backdrop-filter: blur(48px) saturate(180%);
      -webkit-backdrop-filter: blur(48px) saturate(180%);

border: 1px solid rgba(255, 255, 255, 0.12);
      border-top: 1px solid rgba(255, 255, 255, 0.22);

border-radius: 20px;
      padding: 13px 20px;
      width: max-content;
      max-width: min(90vw, 420px);

box-shadow:
        0 20px 60px rgba(0, 0, 0, 0.45),
        0 4px 16px rgba(0, 0, 0, 0.3),
        inset 0 1px 0 rgba(255, 255, 255, 0.18),
        inset 0 -1px 0 rgba(0, 0, 0, 0.15);

display: flex;
      align-items: center;
      gap: 12px;

font-size: 0.88rem;
      font-weight: 650;
      color: rgba(255, 255, 255, 0.92);
      line-height: 1.4;
      white-space: normal;
      word-break: break-word;

transition:
        transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1),
        opacity 0.4s cubic-bezier(0.22, 1, 0.36, 1);
      opacity: 0;
      pointer-events: none;
      will-change: transform, opacity;
    }

.toast-dot {
      width: 8px;
      height: 8px;
      border-radius: 50%;
      background: rgba(255, 255, 255, 0.4);
      flex-shrink: 0;
      transition: background 0.3s ease;
    }

.toast-msg {
      flex: 1;
      min-width: 0;
    }

    .toast.show {
      transform: translateX(-50%) translateY(0) scale(1);
      opacity: 1;
      pointer-events: auto;
    }

    .toast.success .toast-dot {
      background: var(--ok);
      box-shadow: 0 0 8px rgba(0, 230, 118, 0.6);
    }

    .toast.success {
      border-color: rgba(0, 230, 118, 0.18);
      border-top-color: rgba(0, 230, 118, 0.3);
    }

    .toast.error .toast-dot {
      background: var(--acc);
      box-shadow: 0 0 8px rgba(255, 82, 82, 0.6);
    }

    .toast.warning .toast-dot {
      background: var(--am);
      box-shadow: 0 0 8px rgba(255, 179, 71, 0.6);
    }

    .toast.warning {
      border-color: rgba(255, 179, 71, 0.22);
      border-top-color: rgba(255, 179, 71, 0.4);
    }

    @keyframes cardSwitch {
      0% {
        opacity: 0;
        transform: scale(0.97) translateY(8px);
      }

      100% {
        opacity: 1;
        transform: scale(1) translateY(0);
      }
    }

@supports(scrollbar-width:thin) {
      * {
        scrollbar-width: thin;
        scrollbar-color: var(--txt3) transparent
      }
    }

@media(min-width:768px) {
      #main-app {
        max-width: 600px;
        margin: 0 auto
      }

      #bottom-nav {
        max-width: 360px
      }

      .login-card {
        padding: 48px 36px
      }
    }

.period-selector-wrap {
      padding: 0 16px;
      margin-bottom: 14px
    }

    .period-selector {
      display: flex;
      background: var(--glass);
      border-radius: 16px;
      padding: 4px;
      border: 1px solid rgba(255, 255, 255, .05)
    }

    [data-theme="light"] .period-selector {
      border-color: rgba(0, 0, 0, .04)
    }

    .ps-opt {
      flex: 1;
      text-align: center;
      padding: 10px 4px;
      border-radius: 12px;
      font-size: .78rem;
      font-weight: 600;
      color: var(--txt3);
      cursor: pointer;
      transition: all .3s cubic-bezier(.22, 1, .36, 1);
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 4px
    }

    .ps-opt:hover:not(.active) {
      color: var(--txt2);
      background: rgba(255, 255, 255, .02)
    }

    [data-theme="light"] .ps-opt:hover:not(.active) {
      background: rgba(0, 0, 0, .02)
    }

    .ps-opt.active {
      background: var(--card-bg);
      color: var(--pri);
      box-shadow: 0 4px 16px rgba(0, 0, 0, .15);
      border: 1px solid var(--card-b);
      font-weight: 700
    }

    [data-theme="light"] .ps-opt.active {
      box-shadow: 0 4px 16px rgba(0, 0, 0, .05);
      border: none
    }

    .ps-opt i {
      font-size: 1.1rem
    }

    .shift-display-card {
      margin: 0 16px;
      background: var(--card-bg);
      border: 1px solid var(--card-b);
      border-radius: 22px;
      padding: 18px;
      box-shadow: var(--shadow);
      transition: all 0.3s ease;
    }

    .sd-header {
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      margin-bottom: 16px;
      padding-bottom: 12px;
      border-bottom: 1px solid var(--glass-b)
    }

    .sd-info {
      display: flex;
      flex-direction: column;
      gap: 4px
    }

    .sd-date {
      font-size: .9rem;
      font-weight: 700;
      color: var(--txt)
    }

    .sd-time {
      font-size: .72rem;
      color: var(--txt2);
      display: flex;
      align-items: center;
      gap: 4px
    }

    .sd-badge {
      padding: 4px 14px;
      border-radius: 10px;
      font-size: .75rem;
      font-weight: 700;
      display: flex;
      align-items: center;
      gap: 4px
    }

    .sd-badge.am {
      background: var(--am-bg);
      color: var(--am)
    }

    .sd-badge.nt {
      background: var(--nt-bg);
      color: var(--nt)
    }

    .sd-nurses {
      display: flex;
      flex-direction: column;
      gap: 10px
    }

.countdown-bar {
      margin: 10px 0 4px;
      padding: 10px 14px;
      border-radius: 12px;
      background: rgba(139, 123, 255, .08);
      border: 1px solid rgba(139, 123, 255, .12);
      display: flex;
      align-items: center;
      gap: 10px
    }

    .countdown-bar i {
      color: var(--pri);
      font-size: 1.1rem
    }

    .countdown-bar .cd-text {
      font-size: .78rem;
      color: var(--txt2);
      flex: 1
    }

    .countdown-bar .cd-time {
      font-size: .9rem;
      font-weight: 800;
      color: var(--pri);
      font-variant-numeric: tabular-nums;
      direction: ltr
    }

.profile-hero {
      position: relative;
      padding: 32px 16px 24px;
      text-align: center;
      overflow: hidden
    }

    .profile-hero::before {
      content: '';
      position: absolute;
      inset: 0;
      background: linear-gradient(135deg, rgba(139, 123, 255, .08), rgba(0, 212, 255, .04));
      pointer-events: none
    }

    .profile-hero::after {
      content: '';
      position: absolute;
      top: -40%;
      right: -20%;
      width: 250px;
      height: 250px;
      background: radial-gradient(circle, rgba(139, 123, 255, .1), transparent 70%);
      pointer-events: none;
      animation: pulse-glow 4s ease-in-out infinite
    }

    .profile-avatar-wrap {
      position: relative;
      z-index: 1
    }

    .profile-serial {
      font-size: .72rem;
      color: var(--txt3);
      margin-top: 4px;
      direction: ltr
    }

    .profile-status {
      display: inline-flex;
      align-items: center;
      gap: 4px;
      margin-top: 8px;
      padding: 4px 14px;
      border-radius: 20px;
      font-size: .72rem;
      font-weight: 600
    }

    .profile-status.on-shift {
      background: rgba(0, 230, 118, .1);
      color: var(--ok);
      border: 1px solid rgba(0, 230, 118, .15)
    }

    .profile-status.off-shift {
      background: rgba(255, 255, 255, .05);
      color: var(--txt3);
      border: 1px solid rgba(255, 255, 255, .06)
    }

.stats-ring-section {
      padding: 0 16px;
      margin: 16px 0
    }

    .stats-ring-card {
      background: var(--card-bg);
      border: 1px solid var(--card-b);
      border-radius: 22px;
      padding: 20px;
      display: flex;
      align-items: center;
      gap: 20px
    }

    .ring-chart {
      position: relative;
      width: 90px;
      height: 90px;
      flex-shrink: 0
    }

    .ring-chart svg {
      transform: rotate(-90deg)
    }

    .ring-chart .ring-text {
      position: absolute;
      inset: 0;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center
    }

    .ring-chart .ring-num {
      font-size: 1.3rem;
      font-weight: 800;
      color: var(--pri)
    }

    .ring-chart .ring-lbl {
      font-size: .6rem;
      color: var(--txt3)
    }

    .ring-stats {
      flex: 1;
      display: flex;
      flex-direction: column;
      gap: 8px
    }

    .ring-stat-row {
      display: flex;
      align-items: center;
      gap: 8px
    }

    .ring-stat-dot {
      width: 10px;
      height: 10px;
      border-radius: 50%;
      flex-shrink: 0
    }

    .ring-stat-dot.am {
      background: var(--am)
    }

    .ring-stat-dot.nt {
      background: var(--nt)
    }

    .ring-stat-info {
      flex: 1
    }

    .ring-stat-name {
      font-size: .75rem;
      color: var(--txt2)
    }

    .ring-stat-val {
      font-size: .85rem;
      font-weight: 700
    }

    .ring-stat-bar {
      height: 4px;
      border-radius: 4px;
      background: var(--glass);
      margin-top: 3px;
      overflow: hidden
    }

    .ring-stat-fill {
      height: 100%;
      border-radius: 4px;
      transition: width .8s cubic-bezier(.22, 1, .36, 1)
    }

    .ring-stat-fill.am {
      background: var(--am)
    }

    .ring-stat-fill.nt {
      background: var(--nt)
    }

.settings-group {
      padding: 0 16px;
      margin: 16px 0
    }

    .settings-group-title {
      font-size: .78rem;
      font-weight: 700;
      color: var(--txt3);
      margin-bottom: 8px;
      padding-right: 4px
    }

    .settings-card {
      background: var(--card-bg);
      border: 1px solid var(--card-b);
      border-radius: 18px;
      overflow: hidden
    }

    .s-item {
      display: flex;
      align-items: center;
      gap: 12px;
      padding: 14px 16px;
      cursor: pointer;
      transition: .3s;
      border-bottom: 1px solid rgba(255, 255, 255, .04)
    }

    .s-item:last-child {
      border-bottom: none
    }

    .s-item:hover {
      background: rgba(255, 255, 255, .03)
    }

    .s-item:active {
      background: rgba(255, 255, 255, .06)
    }

    [data-theme="light"] .s-item {
      border-bottom-color: rgba(0, 0, 0, .04)
    }

    [data-theme="light"] .s-item:hover {
      background: rgba(0, 0, 0, .02)
    }

    .s-icon {
      width: 36px;
      height: 36px;
      border-radius: 10px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 1.1rem;
      flex-shrink: 0
    }

    .s-body {
      flex: 1;
      min-width: 0
    }

    .s-title {
      font-size: .85rem;
      font-weight: 600
    }

    .s-desc {
      font-size: .7rem;
      color: var(--txt3);
      margin-top: 1px
    }

    .s-trail {
      color: var(--txt3);
      font-size: .9rem;
      display: flex;
      align-items: center
    }

    .s-trail .s-val {
      font-size: .72rem;
      margin-left: 4px;
      color: var(--txt2)
    }

.theme-picker {
      display: flex;
      gap: 6px;
      padding: 4px;
      background: rgba(255, 255, 255, 0.04);
      border-radius: 18px;
      border: 1px solid rgba(255, 255, 255, 0.06);
    }

    .th-opt {
      flex: 1;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 5px;
      padding: 13px 8px 11px;
      border-radius: 14px;
      cursor: pointer;
      transition: all 0.3s cubic-bezier(0.34, 1.2, 0.64, 1);
      background: transparent;
      border: 1.5px solid transparent;
      position: relative;
      overflow: hidden;
    }

    .th-opt::before {
      content: '';
      position: absolute;
      inset: 0;
      border-radius: 13px;
      background: linear-gradient(135deg, rgba(255, 255, 255, 0.06), transparent);
      opacity: 0;
      transition: opacity 0.3s ease;
    }

    .th-opt:not(.active):hover::before {
      opacity: 1;
    }

    .th-opt i {
      font-size: 1.35rem;
      transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1), color 0.25s ease;
      color: var(--txt3);
    }

    .th-opt span {
      font-size: .70rem;
      font-weight: 700;
      color: var(--txt3);
      transition: color 0.25s ease;
      letter-spacing: 0.2px;
    }

.th-opt.active {
      background: linear-gradient(145deg,
          rgba(139, 123, 255, 0.22) 0%,
          rgba(99, 102, 241, 0.14) 100%);
      border-color: rgba(139, 123, 255, 0.35);
      box-shadow:
        0 4px 14px rgba(139, 123, 255, 0.20),
        inset 0 1px 0 rgba(255, 255, 255, 0.18);
    }

    .th-opt.active i {
      color: var(--pri);
      transform: scale(1.15);
      filter: drop-shadow(0 0 6px rgba(139, 123, 255, 0.5));
    }

    .th-opt.active span {
      color: var(--pri);
    }

    .th-opt:not(.active):hover {
      background: rgba(255, 255, 255, .05);
      border-color: rgba(255, 255, 255, .08);
    }

    .th-opt:not(.active):hover i {
      transform: scale(1.08);
      color: var(--txt2);
    }

    .th-opt .th-check {
      display: none;
      
    }

::view-transition-old(root),
    ::view-transition-new(root) {
      animation: none;
      mix-blend-mode: normal;
    }

    ::view-transition-new(root) {
      animation: theme-reveal 0.55s cubic-bezier(0.4, 0, 0.2, 1) both;
    }

    @keyframes theme-reveal {
      from {
        clip-path: var(--theme-ripple-from, circle(0% at 50% 50%));
      }

      to {
        clip-path: var(--theme-ripple-to, circle(150% at 50% 50%));
      }
    }

.version-info {
      text-align: center;
      padding: 12px 16px;
      margin: 8px 16px;
      border-radius: 14px;
      background: var(--glass)
    }

    .version-info .v-name {
      font-size: .82rem;
      font-weight: 700;
      color: var(--txt2)
    }

    .version-info .v-num {
      font-size: .7rem;
      color: var(--txt3)
    }

.notif-bell {
      position: relative;
      cursor: pointer;
      width: 42px;
      height: 42px;
      border-radius: 13px;
      background: var(--glass);
      border: 1px solid rgba(255, 255, 255, .08);
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 1.25rem;
      color: var(--txt2);
      transition: all .3s cubic-bezier(.22, 1, .36, 1);
      backdrop-filter: blur(12px);
      -webkit-backdrop-filter: blur(12px)
    }

    .notif-bell:hover {
      background: var(--pri-g);
      color: var(--pri);
      border-color: rgba(139, 123, 255, .2);
      box-shadow: 0 4px 16px rgba(139, 123, 255, .15)
    }

    .notif-bell:active {
      transform: scale(.9)
    }

.notif-bell.has-unread::after {
      content: '';
      position: absolute;
      inset: -3px;
      border-radius: 15px;
      border: 2px solid var(--acc);
      opacity: 0;
      animation: bellPulse 2s ease-in-out infinite
    }

    @keyframes bellPulse {

      0%,
      100% {
        opacity: 0;
        transform: scale(1)
      }

      50% {
        opacity: .4;
        transform: scale(1.08)
      }
    }

@keyframes bellShake {

      0%,
      100% {
        transform: rotate(0)
      }

      15% {
        transform: rotate(12deg)
      }

      30% {
        transform: rotate(-10deg)
      }

      45% {
        transform: rotate(8deg)
      }

      60% {
        transform: rotate(-5deg)
      }

      75% {
        transform: rotate(3deg)
      }
    }

    .notif-bell.has-unread i {
      animation: bellShake 2.5s ease-in-out infinite 1s
    }

    .notif-badge {
      position: absolute;
      top: -5px;
      right: -5px;
      min-width: 20px;
      height: 20px;
      border-radius: 10px;
      background: linear-gradient(135deg, #FF6B9D, #FF4081);
      color: #fff;
      font-size: .62rem;
      font-weight: 800;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 0 5px;
      box-shadow: 0 3px 10px rgba(255, 64, 129, .5);
      animation: badge-pop .4s cubic-bezier(.22, 1, .36, 1);
      border: 2px solid var(--bg)
    }

    .notif-badge:empty {
      display: none
    }

    @keyframes badge-pop {
      from {
        transform: scale(0)
      }

      to {
        transform: scale(1)
      }
    }

.notif-overlay {
      position: fixed;
      inset: 0;
      z-index: 7400;
      background: rgba(0, 0, 0, .55);
      backdrop-filter: blur(8px);
      -webkit-backdrop-filter: blur(8px);
      opacity: 0;
      pointer-events: none;
      transition: opacity .35s ease
    }

    .notif-overlay.show {
      opacity: 1;
      pointer-events: auto
    }

.notif-panel {
      position: fixed;
      top: 0;
      right: 0;
      bottom: 0;
      width: min(380px, 90vw);
      z-index: 7500;
      background: var(--modal-bg);
      border-left: 1px solid var(--glass-b);
      box-shadow: -12px 0 50px rgba(0, 0, 0, .5);
      transform: translateX(100%);
      transition: transform .4s cubic-bezier(.22, 1, .36, 1);
      display: flex;
      flex-direction: column;
      overflow: hidden
    }

    .notif-panel.show {
      transform: translateX(0)
    }

.notif-panel::before {
      content: '';
      position: absolute;
      top: 0;
      right: 0;
      left: 0;
      height: 200px;
      background: radial-gradient(ellipse at 70% 0%, rgba(139, 123, 255, .1) 0%, transparent 70%);
      pointer-events: none;
      z-index: 0
    }

.notif-header {
      padding: 22px 18px 16px;
      border-bottom: 1px solid rgba(255, 255, 255, .06);
      display: flex;
      align-items: center;
      justify-content: space-between;
      position: relative;
      z-index: 1;
      background: linear-gradient(180deg, rgba(139, 123, 255, .08) 0%, transparent 100%)
    }

    .notif-header-right {
      display: flex;
      align-items: center;
      gap: 10px
    }

    .notif-header-icon {
      width: 38px;
      height: 38px;
      border-radius: 12px;
      background: linear-gradient(135deg, var(--pri), var(--pri-l));
      display: flex;
      align-items: center;
      justify-content: center;
      box-shadow: 0 4px 14px var(--pri-g);
      flex-shrink: 0
    }

    .notif-header-icon i {
      font-size: 1.15rem;
      color: #fff;
      filter: drop-shadow(0 1px 3px rgba(0, 0, 0, .2))
    }

    .notif-header h3 {
      font-size: 1.15rem;
      font-weight: 800;
      letter-spacing: -.3px
    }

    .notif-header-count {
      font-size: .7rem;
      font-weight: 700;
      color: var(--pri);
      background: var(--pri-g);
      padding: 3px 10px;
      border-radius: 20px;
      border: 1px solid rgba(139, 123, 255, .15)
    }

    .notif-close {
      width: 34px;
      height: 34px;
      border-radius: 10px;
      background: var(--glass);
      border: 1px solid rgba(255, 255, 255, .06);
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      font-size: 1.15rem;
      color: var(--txt2);
      transition: all .25s
    }

    .notif-close:hover {
      background: rgba(255, 82, 82, .12);
      color: #FF5252;
      border-color: rgba(255, 82, 82, .2)
    }

    .notif-close:active {
      transform: scale(.88)
    }

.notif-list {
      flex: 1;
      overflow-y: auto;
      padding: 12px;
      position: relative;
      z-index: 1;
      scroll-behavior: smooth
    }

    .notif-list::-webkit-scrollbar {
      width: 3px
    }

    .notif-list::-webkit-scrollbar-track {
      background: transparent
    }

    .notif-list::-webkit-scrollbar-thumb {
      background: rgba(139, 123, 255, .2);
      border-radius: 10px
    }

.notif-item {
      padding: 18px 16px;
      border-radius: 16px;
      margin-bottom: 12px;
      background: var(--card-bg);
      border: 1px solid var(--card-b);
      transition: all .3s cubic-bezier(.22, 1, .36, 1);
      position: relative;
      overflow: hidden;
      backdrop-filter: blur(12px);
      -webkit-backdrop-filter: blur(12px);
      box-shadow: 0 4px 16px rgba(0, 0, 0, 0.04);
    }

.notif-item::before {
      content: '';
      position: absolute;
      top: 14px;
      bottom: 14px;
      right: 0;
      width: 4px;
      border-radius: 0 4px 4px 0;
      background: var(--notif-type-color, var(--pri));
      opacity: .85;
      transition: opacity .3s, box-shadow .3s;
    }

    .notif-item:hover::before {
      opacity: 1;
      box-shadow: 0 0 10px var(--notif-type-color, var(--pri));
    }

    .notif-item:hover {
      transform: translateX(-3px);
      border-color: rgba(139, 123, 255, .2);
      box-shadow: 0 8px 24px rgba(0, 0, 0, .15)
    }

    .notif-item:active {
      transform: scale(.98)
    }

.notif-item.unread {
      border-color: rgba(139, 123, 255, .25);
      background: linear-gradient(135deg, rgba(139, 123, 255, .12), rgba(139, 123, 255, .04));
      box-shadow: 0 4px 20px rgba(139, 123, 255, .1)
    }

    .notif-item.unread::before {
      opacity: 1;
      box-shadow: 0 0 8px var(--notif-type-color, var(--pri));
    }

.notif-item-row {
      display: flex;
      gap: 14px;
      align-items: flex-start
    }

    .notif-item-icon {
      width: 44px;
      height: 44px;
      border-radius: 14px;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
      font-size: 1.3rem;
      position: relative;
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
    }

    .notif-item-content {
      flex: 1;
      min-width: 0;
      padding-top: 2px;
    }

    .notif-item-top {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 8px;
      margin-bottom: 6px
    }

    .notif-item-title {
      font-size: .95rem;
      font-weight: 800;
      line-height: 1.4;
      color: var(--txt);
      letter-spacing: -0.2px;
    }

    .notif-unread-dot {
      width: 10px;
      height: 10px;
      border-radius: 50%;
      background: linear-gradient(135deg, var(--acc), #FF4081);
      flex-shrink: 0;
      box-shadow: 0 0 8px rgba(255, 107, 157, .6);
      animation: dotPulse 2s ease-in-out infinite
    }

    @keyframes dotPulse {

      0%,
      100% {
        box-shadow: 0 0 4px rgba(255, 107, 157, .3)
      }

      50% {
        box-shadow: 0 0 12px rgba(255, 107, 157, .8)
      }
    }

    .notif-item-body {
      font-size: .86rem;
      color: var(--txt2);
      line-height: 1.65;
      font-weight: 500;
    }

    .notif-item-footer {
      display: flex;
      align-items: center;
      gap: 6px;
      margin-top: 8px
    }

    .notif-item-time {
      font-size: .68rem;
      color: var(--txt3);
      display: flex;
      align-items: center;
      gap: 4px;
      background: rgba(255, 255, 255, .04);
      padding: 3px 8px;
      border-radius: 8px
    }

    .notif-item-type-tag {
      font-size: .62rem;
      font-weight: 700;
      padding: 2px 8px;
      border-radius: 8px;
      letter-spacing: .3px
    }

.notif-empty {
      text-align: center;
      padding: 60px 24px;
      color: var(--txt3);
      opacity: 0;
      animation: notifSlideIn .5s .1s forwards
    }

    .notif-empty-icon {
      width: 80px;
      height: 80px;
      border-radius: 50%;
      background: var(--glass);
      border: 1px solid rgba(255, 255, 255, .06);
      display: flex;
      align-items: center;
      justify-content: center;
      margin: 0 auto 20px;
      position: relative
    }

    .notif-empty-icon i {
      font-size: 2.2rem;
      color: var(--txt3);
      opacity: .5
    }

    .notif-empty-icon::after {
      content: '';
      position: absolute;
      inset: -6px;
      border-radius: 50%;
      border: 1.5px dashed rgba(255, 255, 255, .08);
      animation: emptyRotate 20s linear infinite
    }

    @keyframes emptyRotate {
      to {
        transform: rotate(360deg)
      }
    }

    .notif-empty-title {
      font-size: 1rem;
      font-weight: 700;
      color: var(--txt2);
      margin-bottom: 6px
    }

    .notif-empty-sub {
      font-size: .78rem;
      color: var(--txt3);
      line-height: 1.5
    }

.avatar-edit-badge {
      position: absolute;
      bottom: 0;
      right: 0;
      width: 30px;
      height: 30px;
      background: linear-gradient(135deg, var(--pri), var(--pri-l));
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      color: #fff;
      font-size: .9rem;
      border: 3px solid var(--bg);
      box-shadow: 0 2px 10px var(--pri-g);
      z-index: 3;
      cursor: pointer;
      transition: all .3s
    }

    .avatar-edit-badge:active {
      transform: scale(.85)
    }

.offline-bar {
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      z-index: 9500;
      padding: 8px 16px;
      text-align: center;
      font-size: .78rem;
      font-weight: 600;
      transform: translateY(-100%);
      transition: transform .3s;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 8px
    }

    .offline-bar.show {
      transform: translateY(0)
    }

    .offline-bar.offline {
      background: linear-gradient(135deg, rgba(255, 82, 82, .9), rgba(255, 107, 157, .9));
      color: #fff
    }

    .offline-bar.online {
      background: linear-gradient(135deg, rgba(0, 230, 118, .9), rgba(0, 212, 255, .9));
      color: #fff
    }

.reminder-toggle {
      display: flex;
      align-items: center;
      gap: 10px
    }

    .toggle-switch {
      width: 44px;
      height: 24px;
      border-radius: 12px;
      background: var(--txt3);
      position: relative;
      cursor: pointer;
      transition: .3s;
      flex-shrink: 0
    }

    .toggle-switch.on {
      background: var(--pri)
    }

    .toggle-switch::after {
      content: '';
      position: absolute;
      top: 2px;
      right: 2px;
      width: 20px;
      height: 20px;
      border-radius: 50%;
      background: #fff;
      transition: .3s;
      box-shadow: 0 2px 4px rgba(0, 0, 0, .2)
    }

    .toggle-switch.on::after {
      right: calc(100% - 22px)
    }

    .reminder-select {
      padding: 8px 12px;
      border-radius: 10px;
      background: var(--glass);
      border: 1px solid rgba(255, 255, 255, .08);
      color: var(--txt);
      font-family: var(--font);
      font-size: .82rem;
      cursor: pointer
    }

    [data-theme="light"] .notif-bell {
      background: rgba(255, 255, 255, .8);
      border-color: rgba(30, 41, 59, .05);
      box-shadow: 0 2px 8px rgba(30, 41, 59, .03);
      backdrop-filter: blur(8px)
    }

    [data-theme="light"] .notif-panel {
      background: linear-gradient(180deg, #FFFFFF, #F8FAFF);
      border-left-color: rgba(255, 255, 255, .95);
      box-shadow: -8px 0 40px rgba(30, 41, 59, .08)
    }

    [data-theme="light"] .notif-overlay {
      background: rgba(30, 41, 59, .2);
      backdrop-filter: blur(4px)
    }

    [data-theme="light"] .notif-header {
      border-bottom-color: rgba(30, 41, 59, .06)
    }

    [data-theme="light"] .notif-close {
      background: rgba(30, 41, 59, .04);
      color: var(--txt2)
    }

    [data-theme="light"] .notif-item {
      background: rgba(255, 255, 255, .6);
      border-color: rgba(30, 41, 59, .04);
      backdrop-filter: blur(8px)
    }

    [data-theme="light"] .notif-item.unread {
      background: rgba(108, 99, 255, .05);
      border-color: rgba(108, 99, 255, .12)
    }

.defter-hero {
      position: relative;
      padding: 16px 20px;
      margin: 0 16px 20px;
      background: var(--card-bg);
      border: 1px solid var(--card-b);
      border-radius: 20px;
      overflow: hidden;
      backdrop-filter: blur(24px) saturate(180%);
      -webkit-backdrop-filter: blur(24px) saturate(180%);
      box-shadow: 0 8px 32px rgba(15, 23, 42, 0.05), inset 0 1px 0 rgba(255, 255, 255, 0.1);
    }

    .defter-hero::before {
      content: '';
      position: absolute;
      top: -30%;
      right: -10%;
      width: 140px;
      height: 140px;
      background: radial-gradient(circle, var(--pri-g) 0%, transparent 70%);
      pointer-events: none;
      animation: defterHeroGlow 6s ease-in-out infinite
    }

    .defter-hero::after {
      content: '';
      position: absolute;
      bottom: -30%;
      left: -10%;
      width: 100px;
      height: 100px;
      background: radial-gradient(circle, rgba(0, 212, 255, .05) 0%, transparent 70%);
      pointer-events: none;
      animation: defterHeroGlow 6s ease-in-out 3s infinite
    }

    @keyframes defterHeroGlow {

      0%,
      100% {
        opacity: .6;
        transform: scale(1)
      }

      50% {
        opacity: 1;
        transform: scale(1.15)
      }
    }

    .defter-hero-top {
      display: flex;
      align-items: center;
      gap: 12px;
      position: relative;
      z-index: 1
    }

    .defter-hero-icon {
      width: 44px;
      height: 44px;
      border-radius: 14px;
      background: linear-gradient(135deg, var(--pri), var(--pri-l));
      display: flex;
      align-items: center;
      justify-content: center;
      box-shadow: 0 6px 16px var(--pri-g);
      flex-shrink: 0
    }

    .defter-hero-icon i {
      font-size: 1.3rem;
      color: #fff;
      filter: drop-shadow(0 2px 4px rgba(0, 0, 0, .15))
    }

    .defter-hero-title {
      font-weight: 800;
      font-size: 1.1rem;
      color: var(--txt);
      letter-spacing: -.2px;
      line-height: 1.2;
    }

    .defter-hero-sub {
      font-size: .75rem;
      color: var(--txt2);
      font-weight: 600;
      margin-top: 2px
    }

.defter-tabs {
      display: flex;
      gap: 4px;
      padding: 5px;
      margin: 0 16px 20px;
      background: rgba(255, 255, 255, .04);
      border: 1px solid rgba(255, 255, 255, .08);
      border-radius: 16px;
      box-shadow: inset 0 1px 3px rgba(0, 0, 0, .08);
      position: relative
    }

    .defter-tab {
      flex: 1;
      padding: 10px 4px;
      text-align: center;
      cursor: pointer;
      transition: all .35s cubic-bezier(.4, 0, .2, 1);
      font-size: .72rem;
      font-weight: 800;
      color: var(--txt3);
      border-radius: 12px;
      border: none;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 5px;
      position: relative;
      z-index: 1;
      background: transparent;
      letter-spacing: .3px
    }

    .defter-tab:hover {
      color: var(--txt2);
      background: rgba(255, 255, 255, .06)
    }

    .defter-tab.active {
      color: #fff;
      background: linear-gradient(135deg, var(--pri), #6c5ce7);
      box-shadow: 0 6px 18px var(--pri-g);
      z-index: 2
    }

    .defter-tab i {
      font-size: 1.25rem;
      transition: all .35s cubic-bezier(.4, 0, .2, 1);
      margin: 0;
      display: block
    }

    .defter-tab.active i {
      color: #fff;
      filter: drop-shadow(0 2px 6px rgba(0, 0, 0, .25))
    }

.defter-content-anim {
      animation: defterContentIn .4s cubic-bezier(.25, .8, .25, 1)
    }

    @keyframes defterContentIn {
      from {
        opacity: 0;
        transform: translateY(12px)
      }

      to {
        opacity: 1;
        transform: translateY(0)
      }
    }

.premium-bal-card {
      background: linear-gradient(135deg, rgba(255, 255, 255, .06), rgba(255, 255, 255, .02));
      border: 1px solid rgba(255, 255, 255, .1);
      border-radius: 20px;
      backdrop-filter: blur(16px);
      -webkit-backdrop-filter: blur(16px);
      box-shadow: 0 6px 20px rgba(0, 0, 0, .04);
      position: relative;
      overflow: hidden;
      transition: all .3s cubic-bezier(.25, .8, .25, 1)
    }

    .premium-bal-card:hover {
      transform: translateY(-2px);
      box-shadow: 0 8px 28px rgba(0, 0, 0, .06);
      border-color: rgba(255, 255, 255, .18)
    }

.bal-progress-bg {
      width: 100%;
      height: 6px;
      background: rgba(255, 255, 255, .06);
      border-radius: 20px;
      overflow: hidden;
      margin-top: 8px;
      position: relative
    }

    .bal-progress-bar {
      height: 100%;
      border-radius: 20px;
      transition: width .8s cubic-bezier(.25, .8, .25, 1);
      position: relative;
      box-shadow: 0 0 8px rgba(0, 0, 0, .1)
    }

    .bal-progress-bar::after {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      height: 50%;
      background: linear-gradient(180deg, rgba(255, 255, 255, .2), transparent);
      border-radius: 20px
    }

.defter-filter-btns {
      display: flex;
      gap: 6px;
      padding: 0 16px;
      flex-wrap: wrap;
      margin-bottom: 16px
    }

    .defter-filter-btns .filter-btn {
      text-align: center;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 5px;
      padding: 8px 11px;
      border-radius: 14px;
      font-size: .71rem;
      font-weight: 800;
      color: var(--txt3);
      background: linear-gradient(180deg, rgba(255, 255, 255, .075), rgba(255, 255, 255, .03));
      border: 1px solid rgba(255, 255, 255, .09);
      cursor: pointer;
      transition: all .26s ease;
      white-space: nowrap;
      font-family: var(--font);
      letter-spacing: .2px;
      backdrop-filter: blur(14px) saturate(160%);
      -webkit-backdrop-filter: blur(14px) saturate(160%);
      box-shadow: 0 8px 20px rgba(0, 0, 0, .04), inset 0 1px 0 rgba(255, 255, 255, .06)
    }

    .defter-filter-btns .filter-btn:hover {
      background: linear-gradient(180deg, rgba(255, 255, 255, .1), rgba(255, 255, 255, .045));
      color: var(--txt2);
      transform: translateY(-1px)
    }

    .defter-filter-btns .filter-btn.active {
      color: #fff;
      background: linear-gradient(135deg, color-mix(in srgb, var(--pri) 88%, rgba(255, 255, 255, .08)), color-mix(in srgb, var(--pri) 72%, rgba(255, 255, 255, .02)));
      border-color: color-mix(in srgb, var(--pri) 42%, rgba(255, 255, 255, .16));
      box-shadow: 0 10px 24px rgba(139, 123, 255, .18), inset 0 1px 0 rgba(255, 255, 255, .14)
    }

    .defter-filter-btns .filter-btn i {
      font-size: .8rem
    }

    .defter-filter-btns .filter-btn .filter-count {
      min-width: 18px;
      height: 18px;
      padding: 0 5px;
      border-radius: 999px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      font-size: .6rem;
      font-weight: 900;
      background: rgba(255, 255, 255, .08)
    }

    .defter-filter-btns .filter-btn.active .filter-count {
      background: rgba(255, 255, 255, .14)
    }

    .defter-filter-btns .filter-btn[disabled] {
      opacity: .45;
      pointer-events: none
    }

    .rec-type-tabs {
      display: flex;
      gap: 8px;
      padding: 0 16px;
      margin: -2px 0 14px;
      flex-wrap: wrap
    }

    .rec-type-tabs::-webkit-scrollbar {
      display: none
    }

    .rec-type-chip {
      position: relative;
      display: inline-flex;
      align-items: center;
      gap: 6px;
      padding: 8px 11px;
      border-radius: 14px;
      border: 1px solid rgba(255, 255, 255, .08);
      background: linear-gradient(180deg, rgba(255, 255, 255, .075), rgba(255, 255, 255, .03));
      color: var(--txt2);
      font-size: .72rem;
      font-weight: 820;
      white-space: nowrap;
      transition: all .28s ease;
      cursor: pointer;
      backdrop-filter: blur(14px) saturate(155%);
      -webkit-backdrop-filter: blur(14px) saturate(155%);
      box-shadow: 0 8px 18px rgba(0, 0, 0, .04), inset 0 1px 0 rgba(255, 255, 255, .06)
    }

    .rec-type-chip::before {
      content: '';
      position: absolute;
      inset: 1px;
      border-radius: inherit;
      background: linear-gradient(135deg, rgba(255, 255, 255, .08), transparent 65%);
      opacity: .75;
      pointer-events: none
    }

    .rec-type-chip i {
      position: relative;
      z-index: 1;
      font-size: .86rem
    }

    .rec-type-chip .chip-text,
    .rec-type-chip .chip-count {
      position: relative;
      z-index: 1
    }

    .rec-type-chip .chip-count {
      min-width: 18px;
      height: 18px;
      padding: 0 5px;
      border-radius: 999px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      background: rgba(255, 255, 255, .08);
      color: inherit;
      font-size: .6rem;
      font-weight: 900
    }

    .rec-type-chip.active {
      color: #fff;
      border-color: color-mix(in srgb, var(--chip-accent, var(--pri)) 34%, rgba(255, 255, 255, .14));
      background: linear-gradient(135deg, color-mix(in srgb, var(--chip-accent, var(--pri)) 70%, rgba(255, 255, 255, .05)), color-mix(in srgb, var(--chip-accent, var(--pri)) 48%, rgba(255, 255, 255, .02)));
      box-shadow: 0 10px 24px color-mix(in srgb, var(--chip-accent, var(--pri)) 18%, transparent), inset 0 1px 0 rgba(255, 255, 255, .12)
    }

    .rec-type-chip:not(.active):hover {
      transform: translateY(-1px);
      border-color: rgba(255, 255, 255, .12);
      background: linear-gradient(180deg, rgba(255, 255, 255, .09), rgba(255, 255, 255, .04))
    }

.smart-cash-card {
      position: relative;
      z-index: 1;
      background: linear-gradient(135deg, rgba(255, 255, 255, .05), rgba(255, 255, 255, .01));
      border: 1px solid rgba(255, 255, 255, .08);
      border-radius: 20px;
      padding: 14px 16px;
      margin-bottom: 12px;
      display: flex;
      align-items: center;
      transition: all .3s cubic-bezier(.25, .8, .25, 1);
      cursor: pointer
    }

    .smart-cash-card:hover {
      border-color: rgba(255, 179, 71, .35);
      transform: translateY(-2px);
      box-shadow: 0 8px 24px rgba(255, 179, 71, .06)
    }

    .smart-cash-card.selected {
      border-color: var(--am);
      background: linear-gradient(135deg, rgba(255, 179, 71, .1), rgba(255, 179, 71, .03));
      box-shadow: 0 6px 20px rgba(255, 179, 71, .1)
    }

.defter-info-card {
      background: linear-gradient(135deg, rgba(255, 255, 255, .05), rgba(255, 255, 255, .02));
      border: 1px solid rgba(255, 255, 255, .1);
      border-radius: 20px;
      padding: 20px;
      backdrop-filter: blur(20px);
      -webkit-backdrop-filter: blur(20px);
      box-shadow: 0 8px 24px rgba(0, 0, 0, .04);
      position: relative;
      overflow: hidden;
      transition: all .35s ease
    }

    .defter-info-card:hover {
      box-shadow: 0 12px 32px rgba(0, 0, 0, .06);
      border-color: rgba(255, 255, 255, .16)
    }

    .defter-info-card::before {
      content: '';
      position: absolute;
      top: -60%;
      right: -60%;
      width: 120%;
      height: 120%;
      background: radial-gradient(circle, rgba(139, 123, 255, .04) 0%, transparent 60%);
      pointer-events: none
    }

.defter-alert {
      border-radius: 16px;
      padding: 16px;
      font-size: .85rem;
      box-shadow: 0 4px 16px rgba(0, 0, 0, .04)
    }

    .defter-alert.danger {
      background: linear-gradient(135deg, rgba(255, 82, 82, .07), rgba(255, 82, 82, .02));
      border: 1px solid rgba(255, 82, 82, .12);
      color: var(--txt)
    }

.defter-btn-outline {
      padding: 11px 20px;
      border-radius: 14px;
      font-size: .82rem;
      font-weight: 800;
      cursor: pointer;
      border: 1px solid;
      display: inline-flex;
      align-items: center;
      gap: 8px;
      background: rgba(255, 255, 255, .03);
      margin-top: 8px;
      transition: all .3s ease;
      font-family: var(--font);
      box-shadow: 0 2px 8px rgba(0, 0, 0, .02);
      letter-spacing: .3px
    }

    .defter-btn-outline:hover {
      transform: translateY(-2px);
      box-shadow: 0 6px 16px rgba(0, 0, 0, .06)
    }

    .defter-btn-outline.danger {
      color: var(--acc);
      border-color: rgba(255, 82, 82, .2);
      background: linear-gradient(135deg, rgba(255, 82, 82, .05), transparent)
    }

    .defter-btn-outline.danger:hover {
      background: rgba(255, 82, 82, .08);
      box-shadow: 0 6px 20px rgba(255, 82, 82, .12);
      border-color: rgba(255, 82, 82, .35)
    }

    .defter-btn-outline.accent {
      color: var(--acc);
      border-color: rgba(255, 82, 82, .2)
    }

    .defter-btn-outline.primary {
      color: var(--pri);
      border-color: rgba(139, 123, 255, .2);
      background: linear-gradient(135deg, rgba(139, 123, 255, .05), transparent)
    }

    .defter-btn-outline.primary:hover {
      background: rgba(139, 123, 255, .08);
      box-shadow: 0 6px 20px rgba(139, 123, 255, .12);
      border-color: rgba(139, 123, 255, .35)
    }

    .defter-btn-outline:active {
      transform: scale(.96)
    }

.defter-badge {
      padding: 6px 14px;
      border-radius: 10px;
      font-size: .72rem;
      font-weight: 900;
      letter-spacing: .4px;
      box-shadow: 0 2px 8px rgba(0, 0, 0, .03)
    }

    .defter-badge.double {
      background: linear-gradient(135deg, rgba(255, 179, 71, .12), rgba(255, 179, 71, .04));
      color: var(--am);
      border: 1px solid rgba(255, 179, 71, .12)
    }

    .defter-badge.accent {
      color: var(--acc);
      background: linear-gradient(135deg, rgba(255, 82, 82, .1), rgba(255, 82, 82, .03));
      border: 1px solid rgba(255, 82, 82, .1)
    }

    .defter-badge.holiday {
      background: linear-gradient(135deg, rgba(139, 123, 255, .1), rgba(139, 123, 255, .03));
      color: var(--pri);
      border: 1px solid rgba(139, 123, 255, .1)
    }

.defter-option {
      padding: 16px;
      border-radius: 18px;
      background: linear-gradient(135deg, rgba(255, 255, 255, .06), rgba(255, 255, 255, .02));
      border: 1px solid rgba(255, 255, 255, .1);
      cursor: pointer;
      display: flex;
      align-items: center;
      gap: 14px;
      transition: all .3s ease;
      box-shadow: 0 4px 12px rgba(0, 0, 0, .02);
      position: relative;
      overflow: hidden
    }

    .defter-option::after {
      content: '';
      position: absolute;
      inset: 0;
      background: linear-gradient(135deg, rgba(139, 123, 255, .06), transparent 70%);
      opacity: 0;
      transition: opacity .3s;
      border-radius: inherit
    }

    .defter-option:hover {
      border-color: rgba(139, 123, 255, .3);
      transform: translateY(-2px);
      box-shadow: 0 8px 22px rgba(139, 123, 255, .06)
    }

    .defter-option:hover::after {
      opacity: 1
    }

    .defter-option:active {
      transform: scale(.98)
    }

    .defter-option.disabled {
      opacity: .45;
      pointer-events: none;
      filter: grayscale(50%)
    }

    .defter-opt-icon {
      width: 46px;
      height: 46px;
      border-radius: 14px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 1.35rem;
      flex-shrink: 0;
      position: relative;
      z-index: 1;
      box-shadow: 0 3px 10px rgba(0, 0, 0, .05);
      background: rgba(255, 255, 255, .04)
    }

    .defter-opt-info {
      flex: 1;
      position: relative;
      z-index: 1
    }

    .defter-opt-title {
      font-weight: 800;
      font-size: .92rem;
      color: var(--txt)
    }

    .defter-opt-sub {
      font-size: .76rem;
      color: var(--txt3);
      margin-top: 4px;
      font-weight: 600
    }

.cal-letter {
      position: absolute;
      bottom: -1px;
      font-weight: 900;
      line-height: 1;
      letter-spacing: -.3px;
      font-size: 0.7rem;
    }

    .cal-letter.center {
      left: 50%;
      transform: translateX(-50%);
    }

    .cal-letter.split-l {
      left: 6%;
      font-size: .58rem;
    }

    .cal-letter.split-r {
      right: 6%;
      font-size: .58rem;
    }

    .cal-letter.ltr-s {
      color: var(--sabah);
      text-shadow: 0 0 6px var(--sabah-bg);
      font-weight: 900
    }

    .cal-letter.ltr-gh {
      color: var(--acc);
      text-shadow: 0 0 6px rgba(255, 82, 82, .35)
    }

.cal-letter.ltr-casual {
      color: #29b6f6;
      text-shadow: 0 0 6px rgba(41, 182, 246, .35)
    }

.cal-letter.ltr-regular {
      color: #66bb6a;
      text-shadow: 0 0 6px rgba(102, 187, 106, .35)
    }

.cal-letter.ltr-rest {
      color: #7e57c2;
      text-shadow: 0 0 6px rgba(126, 87, 194, .4)
    }

.cal-letter.ltr-full {
      font-size: .58rem;
      letter-spacing: -.6px;
      white-space: nowrap;
      line-height: 1;
      bottom: 1px
    }

.cal-letter.ltr-gray {
      color: #9e9e9e !important;
      text-shadow: none !important;
      opacity: 1;
      font-weight: 800
    }

.cal-day.unreg {
      opacity: .7
    }

    .cal-emoji {
      position: absolute;
      bottom: 1px;
      font-size: .72rem;
      left: 50%;
      transform: translateX(-50%);
      line-height: 1
    }

    .cal-dot.gray {
      background: #9e9e9e;
      box-shadow: 0 0 5px rgba(158, 158, 158, .25)
    }

.defter-day-overlay {
      position: fixed;
      inset: 0;
      z-index: 6500;
      background: var(--bg);
      opacity: 0;
      pointer-events: none;
      transition: all .4s cubic-bezier(.4, 0, .2, 1);
      overflow-y: auto;
      -webkit-overflow-scrolling: touch;
      transform: translateY(40px)
    }

    .defter-day-overlay.show {
      opacity: 1;
      pointer-events: auto;
      transform: translateY(0)
    }

    .defter-day-overlay .day-ov-header {
      display: flex;
      align-items: center;
      gap: 14px;
      padding: 20px 16px 16px;
      position: sticky;
      top: 0;
      z-index: 2;
      background: linear-gradient(180deg, var(--bg) 90%, transparent);
      border-bottom: 1px solid rgba(139, 123, 255, .1)
    }

    .defter-day-overlay .day-ov-close {
      width: 44px;
      height: 44px;
      border-radius: 14px;
      display: flex;
      align-items: center;
      justify-content: center;
      background: rgba(139, 123, 255, .06);
      border: 1px solid rgba(139, 123, 255, .15);
      cursor: pointer;
      font-size: 1.4rem;
      color: var(--txt2);
      transition: all .3s ease;
      flex-shrink: 0
    }

    .defter-day-overlay .day-ov-close:hover {
      background: rgba(139, 123, 255, .12);
      color: var(--pri);
      transform: translateY(-2px)
    }

    .defter-day-overlay .day-ov-close:active {
      transform: scale(.93)
    }

    .defter-day-overlay .day-ov-title {
      flex: 1
    }

    .defter-day-overlay .day-ov-title h3 {
      font-size: 1.1rem;
      font-weight: 900;
      margin: 0;
      color: var(--txt)
    }

    .defter-day-overlay .day-ov-title p {
      font-size: .82rem;
      color: var(--txt2);
      margin: 4px 0 0;
      font-weight: 700
    }

    .defter-day-overlay .day-ov-body {
      padding: 20px 16px;
      animation: defterSlideUp .5s cubic-bezier(.4, 0, .2, 1)
    }

@keyframes defterSlideUp {
      from {
        opacity: 0;
        transform: translateY(20px)
      }

      to {
        opacity: 1;
        transform: translateY(0)
      }
    }

    @keyframes defterPulse {

      0%,
      100% {
        opacity: 1
      }

      50% {
        opacity: .6
      }
    }

.defter-balance-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 12px;
      padding: 0 16px;
      margin-bottom: 16px
    }

    .defter-bal-card {
      background: linear-gradient(135deg, rgba(255, 255, 255, .06), rgba(255, 255, 255, .02));
      border: 1px solid rgba(255, 255, 255, .1);
      border-radius: 20px;
      padding: 22px 16px;
      text-align: center;
      backdrop-filter: blur(20px);
      -webkit-backdrop-filter: blur(20px);
      box-shadow: 0 6px 18px rgba(0, 0, 0, .04);
      position: relative;
      overflow: hidden;
      transition: all .3s ease;
      z-index: 1
    }

    .defter-bal-card:hover {
      transform: translateY(-3px);
      box-shadow: 0 10px 28px rgba(0, 0, 0, .06);
      border-color: rgba(255, 255, 255, .2)
    }

    .defter-bal-card::before {
      content: '';
      position: absolute;
      top: -30%;
      right: -30%;
      width: 80%;
      height: 80%;
      background: radial-gradient(circle, rgba(255, 255, 255, .06) 0%, transparent 70%);
      pointer-events: none;
      z-index: -1
    }

    .defter-bal-card .bal-num {
      font-size: 2.4rem;
      font-weight: 900;
      position: relative;
      line-height: 1;
      letter-spacing: -1px
    }

    .defter-bal-card .bal-label {
      font-size: .82rem;
      color: var(--txt);
      margin-top: 8px;
      font-weight: 800
    }

    .defter-bal-card .bal-sub {
      font-size: .72rem;
      color: var(--txt3);
      margin-top: 5px;
      font-weight: 700
    }

    .defter-bal-card.casual {
      border-color: rgba(255, 179, 71, .15)
    }

    .defter-bal-card.casual .bal-num {
      color: var(--am);
      text-shadow: 0 4px 14px rgba(255, 179, 71, .25)
    }

    .defter-bal-card.regular {
      border-color: rgba(66, 153, 225, .15)
    }

    .defter-bal-card.regular .bal-num {
      color: var(--sec);
      text-shadow: 0 4px 14px rgba(66, 153, 225, .25)
    }

.defter-input-row {
      display: flex;
      align-items: center;
      gap: 14px;
      padding: 16px;
      background: linear-gradient(135deg, rgba(255, 255, 255, .05), rgba(255, 255, 255, .02));
      border: 1px solid rgba(255, 255, 255, .1);
      border-radius: 18px;
      margin-bottom: 10px;
      transition: all .3s ease
    }

    .defter-input-row:focus-within {
      border-color: var(--pri-l);
      box-shadow: 0 6px 18px var(--pri-g)
    }

    .defter-input-row label {
      flex: 1;
      font-size: .9rem;
      font-weight: 800;
      display: flex;
      align-items: center;
      gap: 10px
    }

    .defter-input-row label i {
      font-size: 1.2rem;
      color: var(--pri)
    }

    .defter-input-row input {
      width: 100%;
      padding: 12px;
      border-radius: 12px;
      background: rgba(255, 255, 255, .08);
      border: 1px solid rgba(255, 255, 255, .12);
      color: var(--txt);
      text-align: center;
      font-size: 1.15rem;
      font-weight: 900;
      transition: all .3s ease
    }

    .defter-input-row input:focus {
      border-color: var(--pri);
      box-shadow: 0 0 0 3px var(--pri-g);
      outline: none
    }

    [data-theme="dark"] .defter-input-row input {
      background: rgba(0, 0, 0, .2);
      border-color: rgba(255, 255, 255, .08)
    }

    [data-theme="dark"] .defter-input-row input:focus {
      background: rgba(0, 0, 0, .35)
    }

.defter-record {
      padding: 16px 16px 16px 18px;
      margin: 0 16px 12px;
      background:
        linear-gradient(180deg, rgba(255, 255, 255, .095), rgba(255, 255, 255, .03)),
        linear-gradient(135deg, rgba(255, 255, 255, .055), rgba(255, 255, 255, .018));
      border: 1px solid rgba(255, 255, 255, .09);
      border-radius: 24px;
      display: grid;
      grid-template-columns: minmax(0, 1fr) 92px;
      align-items: center;
      gap: 12px 14px;
      transition: transform .28s ease, box-shadow .28s ease, border-color .28s ease;
      position: relative;
      overflow: hidden;
      backdrop-filter: blur(20px) saturate(155%);
      -webkit-backdrop-filter: blur(20px) saturate(155%);
      box-shadow: 0 8px 22px rgba(7, 14, 28, .08), inset 0 1px 0 rgba(255, 255, 255, .06);
      z-index: 1;
    }

    .defter-record::before {
      content: '';
      position: absolute;
      inset: 0;
      background: linear-gradient(150deg, rgba(255, 255, 255, .08), transparent 38%);
      pointer-events: none;
      transition: opacity .4s ease;
      opacity: .85;
      z-index: -1;
    }

    .defter-record::after {
      content: '';
      position: absolute;
      top: 0;
      right: 0;
      width: 5px;
      height: 100%;
      border-radius: 0 24px 24px 0;
      background: linear-gradient(180deg, var(--rec-accent, var(--pri)), color-mix(in srgb, var(--rec-accent, var(--pri)) 20%, transparent));
      opacity: .8;
      transition: opacity .3s ease;
    }

    .defter-record:hover::before {
      opacity: 1;
    }

    .defter-record:hover::after {
      opacity: 1;
      width: 6px;
    }

    .defter-record:hover {
      border-color: color-mix(in srgb, var(--rec-accent, var(--pri)) 20%, rgba(255, 255, 255, .08));
      transform: translateY(-2px);
      box-shadow: 0 14px 30px color-mix(in srgb, var(--rec-accent, var(--pri)) 12%, transparent), inset 0 1px 0 rgba(255, 255, 255, .08);
    }

    .defter-record:active {
      transform: translateY(0) scale(0.98);
      transition-duration: .1s
    }

    .defter-record .rec-icon {
      width: 50px;
      height: 50px;
      border-radius: 16px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 1.5rem;
      flex-shrink: 0;
      box-shadow: 0 6px 16px rgba(0, 0, 0, .12);
      position: relative;
      border: 1px solid rgba(255, 255, 255, .06);
      transition: transform .3s ease, box-shadow .3s ease
    }

    .defter-record:hover .rec-icon {
      transform: scale(1.08);
      box-shadow: 0 6px 18px rgba(0, 0, 0, .12)
    }

    .defter-record .rec-info {
      grid-column: 1;
      grid-row: 1;
      min-width: 0
    }

    .defter-record .rec-main {
      display: flex;
      align-items: flex-start;
      gap: 12px;
      min-width: 0
    }

    .defter-record .rec-body {
      flex: 1;
      min-width: 0
    }

    .defter-record .rec-head {
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      gap: 10px;
      min-width: 0
    }

    .defter-record .rec-title {
      flex: 1;
      min-width: 0;
      font-size: 1.15rem;
      font-weight: 900;
      color: var(--txt);
      display: block;
      letter-spacing: .2px;
      line-height: 1.35
    }

    .defter-record .rec-status {
      flex-shrink: 0;
      display: inline-flex;
      align-items: center;
      gap: 5px;
      padding: 6px 10px;
      border-radius: 999px;
      font-size: .76rem;
      font-weight: 900;
      white-space: nowrap;
      cursor: pointer;
      transition: all .25s ease;
      backdrop-filter: blur(10px);
      -webkit-backdrop-filter: blur(10px);
      box-shadow: inset 0 1px 0 rgba(255, 255, 255, .05)
    }

    .defter-record .rec-status i {
      font-size: .88rem
    }

    .defter-record .rec-sub {
      font-size: .85rem;
      color: var(--txt2);
      margin-top: 10px;
      font-weight: 600;
      display: flex;
      align-items: center;
      gap: 6px;
      line-height: 1.4;
      flex-wrap: wrap;
      min-width: 0
    }

    .defter-record .rec-sub-item {
      display: inline-flex;
      align-items: center;
      flex-wrap: nowrap;
      gap: 6px;
      padding: 6px 11px;
      border-radius: 999px;
      background: linear-gradient(180deg, rgba(255, 255, 255, .085), rgba(255, 255, 255, .035));
      border: 1px solid rgba(255, 255, 255, .07);
      min-height: 31px;
      white-space: nowrap;
      min-width: 0;
      backdrop-filter: blur(10px);
      -webkit-backdrop-filter: blur(10px);
      box-shadow: inset 0 1px 0 rgba(255, 255, 255, .05)
    }

    .defter-record .rec-sub-item i {
      font-size: .95rem;
      color: var(--rec-accent, var(--pri))
    }

    .defter-record .rec-sub-item.rec-sub-day-item,
    .defter-record .rec-sub-item.rec-sub-date-item {
      flex-shrink: 0
    }

    .defter-record .rec-sub-item.rec-sub-date-item {
      line-height: 1
    }

    .defter-record .rec-sub-item.rec-sub-date-item .rec-sub-date {
      flex: 0 0 auto
    }

    .defter-record .rec-sub-item.rec-sub-actor-item {
      max-width: min(100%, 260px)
    }

    .defter-record .rec-sub-label {
      color: var(--txt3);
      font-weight: 700
    }

    .defter-record .rec-sub-value {
      color: var(--txt);
      font-weight: 800
    }

    .defter-record .rec-sub-item.rec-sub-actor-item .rec-sub-value {
      display: inline-block;
      overflow: hidden;
      text-overflow: ellipsis;
      vertical-align: bottom;
      max-width: 140px
    }

    .defter-record .rec-sub-date {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 1px;
      min-width: auto;
      direction: ltr;
      white-space: nowrap;
      line-height: 1;
      letter-spacing: 0;
      font-variant-numeric: tabular-nums;
      font-feature-settings: "tnum" 1
    }

    .defter-record .rec-sub-date .date-day,
    .defter-record .rec-sub-date .date-month,
    .defter-record .rec-sub-date .date-slash {
      display: inline-block;
      line-height: 1
    }

    .defter-record .rec-sub-date .date-slash {
      color: var(--rec-accent, var(--pri));
      font-weight: 900;
      margin: 0 1px
    }

    .defter-record .rec-date {
      grid-column: 2;
      grid-row: 1;
      justify-self: end;
      width: 92px;
      text-align: center;
      min-width: 92px;
      flex-shrink: 0;
      position: relative;
      overflow: hidden;
      display: flex;
      flex-direction: column;
      align-items: stretch;
      justify-content: center;
      gap: 8px;
      background:
        linear-gradient(180deg, rgba(255, 255, 255, .11), rgba(255, 255, 255, .04)),
        linear-gradient(135deg, color-mix(in srgb, var(--rec-accent, var(--pri)) 10%, transparent), color-mix(in srgb, var(--rec-accent, var(--pri)) 3%, transparent));
      border: 1px solid color-mix(in srgb, var(--rec-accent, var(--pri)) 12%, rgba(255, 255, 255, .08));
      padding: 11px 10px;
      border-radius: 20px;
      transition: all .3s ease;
      backdrop-filter: blur(14px) saturate(150%);
      -webkit-backdrop-filter: blur(14px) saturate(150%);
      box-shadow: inset 0 1px 0 rgba(255, 255, 255, .1), 0 8px 20px color-mix(in srgb, var(--rec-accent, var(--pri)) 9%, transparent)
    }

    .defter-record .rec-date::before {
      content: '';
      position: absolute;
      inset: 1px;
      border-radius: inherit;
      background: linear-gradient(160deg, rgba(255, 255, 255, .1), transparent 56%);
      pointer-events: none;
      opacity: .85
    }

    .defter-record:hover .rec-date {
      border-color: color-mix(in srgb, var(--rec-accent, var(--pri)) 18%, rgba(255, 255, 255, .1));
      box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12), 0 10px 22px color-mix(in srgb, var(--rec-accent, var(--pri)) 10%, transparent)
    }

    .defter-record .rec-date .rec-day-name {
      order: 1;
      position: relative;
      z-index: 1;
      font-size: .82rem;
      color: var(--txt);
      font-weight: 900;
      line-height: 1.1;
      padding-bottom: 8px;
      border-bottom: 1px solid color-mix(in srgb, var(--rec-accent, var(--pri)) 10%, rgba(255, 255, 255, .08))
    }

    .defter-record .rec-date .rec-date-value {
      order: 2;
      position: relative;
      z-index: 1;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 1px;
      direction: ltr;
      line-height: 1;
      letter-spacing: 0;
      white-space: nowrap;
      font-variant-numeric: tabular-nums;
      font-feature-settings: "tnum" 1
    }

    .defter-record .rec-date .rec-day-num {
      text-align: right;
      font-size: 1.45rem;
      font-weight: 900;
      color: var(--txt);
      line-height: 1
    }

    .defter-record .rec-date .rec-month-label {
      text-align: left;
      font-size: 1.1rem;
      color: var(--rec-accent, var(--pri));
      font-weight: 800;
      line-height: 1
    }

    .defter-record .rec-date .rec-date-slash {
      font-size: .96rem;
      color: color-mix(in srgb, var(--rec-accent, var(--pri)) 70%, var(--txt3));
      font-weight: 900;
      line-height: 1;
      margin: 0 1px
    }

.rec-stat-pill {
      display: flex;
      align-items: center;
      gap: 5px;
      padding: 5px 12px;
      border-radius: 20px;
      font-size: .72rem;
      font-weight: 800;
      background: color-mix(in srgb, var(--pill-clr, var(--pri)) 10%, transparent);
      color: var(--pill-clr, var(--pri));
      border: 1px solid color-mix(in srgb, var(--pill-clr, var(--pri)) 15%, transparent)
    }

    .rec-stat-pill i {
      font-size: .8rem
    }

.defter-section-title {
      padding: 8px 16px;
      margin: 20px 16px 14px;
      font-size: .85rem;
      font-weight: 900;
      color: var(--txt);
      display: flex;
      align-items: center;
      gap: 10px;
      letter-spacing: .3px;
      background: linear-gradient(135deg, rgba(255, 255, 255, .04), transparent);
      border-radius: 12px;
      border: 1px solid rgba(255, 255, 255, .06)
    }

    .defter-section-title i {
      font-size: 1.1rem
    }

    .defter-section-title .sec-count {
      margin-right: auto;
      margin-left: 0;
      font-size: .68rem;
      font-weight: 800;
      padding: 3px 10px;
      border-radius: 20px;
      background: rgba(139, 123, 255, .1);
      color: var(--pri)
    }

.rec-filter-tabs {
      display: flex;
      gap: 6px;
      padding: 0 16px;
      margin-bottom: 18px;
      overflow-x: auto;
      -webkit-overflow-scrolling: touch;
      scrollbar-width: none
    }

    .rec-filter-tabs::-webkit-scrollbar {
      display: none
    }

    .rec-filter-tab {
      display: flex;
      align-items: center;
      gap: 6px;
      padding: 8px 14px;
      border-radius: 12px;
      font-size: .78rem;
      font-weight: 700;
      color: var(--txt3);
      background: rgba(255, 255, 255, .04);
      border: 1px solid rgba(255, 255, 255, .06);
      cursor: pointer;
      transition: all .3s ease;
      white-space: nowrap;
      flex-shrink: 0
    }

    .rec-filter-tab:hover {
      background: rgba(255, 255, 255, .08);
      color: var(--txt2)
    }

    .rec-filter-tab.active {
      color: #fff;
      background: linear-gradient(135deg, var(--tab-clr, var(--pri)), color-mix(in srgb, var(--tab-clr, var(--pri)), #000 20%));
      border-color: var(--tab-clr, var(--pri));
      box-shadow: 0 4px 14px rgba(139, 123, 255, .15)
    }

    .rec-tab-badge {
      min-width: 20px;
      height: 20px;
      border-radius: 8px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: .68rem;
      font-weight: 900;
      background: rgba(255, 255, 255, .08);
      color: var(--txt3);
      padding: 0 5px
    }

    .rec-filter-tab.active .rec-tab-badge {
      background: rgba(255, 255, 255, .25);
      color: #fff
    }

    [data-theme="light"] .rec-filter-tab {
      background: rgba(0, 0, 0, .03);
      border-color: rgba(0, 0, 0, .05)
    }

    [data-theme="light"] .rec-filter-tab:hover {
      background: rgba(0, 0, 0, .06)
    }

    [data-theme="light"] .rec-filter-tab.active {
      color: #fff;
      box-shadow: 0 4px 14px rgba(90, 103, 216, .15)
    }

    [data-theme="light"] .rec-tab-badge {
      background: rgba(0, 0, 0, .05);
      color: var(--txt3)
    }

.defter-source-item {
      padding: 16px;
      border-radius: 18px;
      background: linear-gradient(135deg, rgba(255, 255, 255, .05), rgba(255, 255, 255, .02));
      border: 1px solid rgba(255, 255, 255, .1);
      margin-bottom: 10px;
      cursor: pointer;
      transition: all .3s ease;
      display: flex;
      align-items: center;
      gap: 14px;
      box-shadow: 0 4px 12px rgba(0, 0, 0, .02)
    }

    .defter-source-item:hover {
      border-color: var(--pri);
      box-shadow: 0 8px 22px rgba(139, 123, 255, .08);
      transform: translateY(-2px)
    }

    .defter-source-item.selected {
      border-color: var(--pri);
      background: linear-gradient(135deg, rgba(139, 123, 255, .08), rgba(0, 212, 255, .04));
      box-shadow: 0 6px 18px rgba(139, 123, 255, .1)
    }

.defter-cash-item {
      padding: 16px;
      border-radius: 18px;
      background: linear-gradient(135deg, rgba(255, 179, 71, .04), rgba(255, 179, 71, .01));
      border: 1px solid rgba(255, 255, 255, .1);
      margin-bottom: 10px;
      display: flex;
      align-items: center;
      gap: 14px;
      cursor: pointer;
      transition: all .3s ease;
      box-shadow: 0 4px 12px rgba(0, 0, 0, .02)
    }

    .defter-cash-item:hover {
      border-color: rgba(255, 179, 71, .3);
      box-shadow: 0 4px 14px rgba(255, 179, 71, .06)
    }

    .defter-cash-item.selected {
      border-color: var(--am);
      background: linear-gradient(135deg, rgba(255, 179, 71, .1), rgba(255, 179, 71, .03));
      box-shadow: 0 6px 18px rgba(255, 179, 71, .1)
    }

    .defter-cash-item input[type="checkbox"] {
      width: 22px;
      height: 22px;
      accent-color: var(--am);
      cursor: pointer;
      flex-shrink: 0;
      border-radius: 6px
    }

    .defter-cash-item label {
      flex: 1;
      cursor: pointer
    }

.defter-sub-list {
      display: flex;
      flex-direction: column;
      gap: 10px;
      padding: 0 16px;
      margin-bottom: 14px
    }

    .defter-sub-item {
      padding: 14px 16px;
      border-radius: 16px;
      background: linear-gradient(135deg, rgba(255, 255, 255, .05), rgba(255, 255, 255, .02));
      border: 1px solid rgba(255, 255, 255, .1);
      cursor: pointer;
      display: flex;
      align-items: center;
      gap: 14px;
      transition: all .3s ease;
      box-shadow: 0 4px 12px rgba(0, 0, 0, .02)
    }

    .defter-sub-item:hover {
      border-color: var(--pri);
      transform: translateY(-2px);
      box-shadow: 0 8px 22px rgba(139, 123, 255, .06)
    }

    .defter-sub-item .sub-avatar {
      width: 42px;
      height: 42px;
      border-radius: 50%;
      background: linear-gradient(135deg, var(--pri-g), rgba(0, 212, 255, .06));
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 1rem;
      font-weight: 900;
      color: var(--pri);
      flex-shrink: 0;
      box-shadow: 0 3px 10px rgba(139, 123, 255, .1);
      border: 1px solid rgba(255, 255, 255, .1)
    }

.defter-empty-bal {
      text-align: center;
      padding: 50px 20px;
      border-radius: 24px
    }

    .defter-empty-bal i {
      font-size: 3.5rem;
      color: var(--txt3);
      margin-bottom: 16px;
      display: block;
      opacity: .4
    }

    .defter-empty-bal p {
      color: var(--txt2);
      font-size: .92rem;
      margin: 0 0 20px;
      line-height: 1.7;
      font-weight: 700
    }

.defter-cash-summary {
      padding: 20px;
      margin: 0 16px 14px;
      background: linear-gradient(135deg, rgba(255, 179, 71, .06), rgba(255, 179, 71, .01));
      border: 1px solid rgba(255, 179, 71, .12);
      border-radius: 20px;
      box-shadow: 0 6px 20px rgba(0, 0, 0, .04);
      position: relative;
      overflow: hidden;
      backdrop-filter: blur(10px);
      border-right: 4px solid var(--am)
    }

    .defter-cash-summary::before {
      content: '';
      position: absolute;
      top: -60%;
      left: -60%;
      width: 140%;
      height: 140%;
      background: radial-gradient(circle, rgba(255, 179, 71, .04) 0%, transparent 55%);
      pointer-events: none
    }

    .defter-cash-header {
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      gap: 10px;
      margin-bottom: 14px;
      position: relative;
      z-index: 2
    }

    .defter-cash-dates {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      position: relative;
      z-index: 2
    }

    .defter-cash-date {
      padding: 7px 14px;
      border-radius: 12px;
      font-size: .76rem;
      font-weight: 900;
      background: linear-gradient(135deg, rgba(255, 179, 71, .14), rgba(255, 179, 71, .04));
      color: var(--am);
      border: 1px solid rgba(255, 179, 71, .12);
      box-shadow: 0 2px 8px rgba(255, 179, 71, .06);
      transition: all .25s ease
    }

    .defter-cash-date:hover {
      transform: translateY(-1px);
      box-shadow: 0 4px 12px rgba(255, 179, 71, .12)
    }

.cal-nav {
      width: 40px;
      height: 40px;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      background: rgba(255, 255, 255, .06);
      border: 1px solid rgba(255, 255, 255, .08);
      transition: all .3s ease;
      color: var(--txt2);
      font-size: 1.1rem
    }

    .cal-nav:hover {
      background: rgba(255, 255, 255, .12);
      color: var(--pri);
      transform: scale(1.05)
    }

    .cal-nav:active {
      transform: scale(.93)
    }

    [data-theme="dark"] .cal-nav {
      background: rgba(0, 0, 0, .2);
      border-color: rgba(255, 255, 255, .05)
    }

    [data-theme="dark"] .cal-nav:hover {
      background: rgba(0, 0, 0, .35)
    }

.cal-day {
      font-weight: 700;
      border-radius: 12px;
      aspect-ratio: 1/1.05
    }

[data-theme="light"] .defter-hero {
      background: linear-gradient(135deg, rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0.6));
      border: 1px solid rgba(255, 255, 255, 1);
      box-shadow: 0 10px 30px rgba(15, 23, 42, 0.05), inset 0 1px 0 rgba(255, 255, 255, 0.9);
      backdrop-filter: blur(24px) saturate(180%);
      -webkit-backdrop-filter: blur(24px) saturate(180%);
    }

    [data-theme="light"] .premium-bal-card {
      background: linear-gradient(135deg, rgba(255, 255, 255, .85), rgba(255, 255, 255, .6));
      border-color: rgba(255, 255, 255, .95);
      box-shadow: 0 4px 16px rgba(30, 41, 59, .04), inset 0 1px 0 rgba(255, 255, 255, .9);
      backdrop-filter: blur(20px)
    }

    [data-theme="light"] .premium-bal-card:hover {
      box-shadow: 0 8px 24px rgba(108, 99, 255, .06);
      border-color: rgba(108, 99, 255, .12)
    }

    [data-theme="light"] .bal-progress-bg {
      background: rgba(0, 0, 0, .05)
    }

    [data-theme="light"] .defter-filter-btns .filter-btn {
      background: rgba(255, 255, 255, .7);
      border-color: rgba(30, 41, 59, .06);
      backdrop-filter: blur(8px);
      box-shadow: 0 2px 6px rgba(30, 41, 59, .03)
    }

    [data-theme="light"] .defter-filter-btns .filter-btn:hover {
      background: rgba(108, 99, 255, .04);
      color: var(--txt2)
    }

    [data-theme="light"] .defter-filter-btns .filter-btn.active {
      color: #fff;
      background: linear-gradient(135deg, var(--pri), #6c5ce7);
      box-shadow: 0 4px 14px rgba(108, 99, 255, .15)
    }

    [data-theme="light"] .smart-cash-card {
      background: linear-gradient(135deg, rgba(255, 255, 255, .8), rgba(255, 255, 255, .55));
      border-color: rgba(255, 255, 255, .95);
      backdrop-filter: blur(16px);
      box-shadow: 0 3px 10px rgba(30, 41, 59, .03), inset 0 1px 0 rgba(255, 255, 255, .9)
    }

    [data-theme="light"] .smart-cash-card:hover {
      border-color: rgba(230, 126, 34, .2);
      box-shadow: 0 6px 18px rgba(230, 126, 34, .06)
    }

    [data-theme="light"] .smart-cash-card.selected {
      border-color: var(--am);
      background: linear-gradient(135deg, rgba(255, 179, 71, .08), rgba(255, 179, 71, .02))
    }

    [data-theme="light"] .defter-tabs {
      background: linear-gradient(135deg, rgba(255, 255, 255, .9), rgba(255, 255, 255, .5));
      border-color: rgba(255, 255, 255, 1);
      box-shadow: 0 8px 32px rgba(15, 23, 42, .06), inset 0 1px 0 rgba(255, 255, 255, 1);
      backdrop-filter: blur(24px)
    }

    [data-theme="light"] .defter-tab {
      color: var(--txt2)
    }

    [data-theme="light"] .defter-tab:hover {
      background: rgba(79, 70, 229, .05);
      color: var(--pri)
    }

    [data-theme="light"] .defter-tab.active {
      color: #fff;
      background: linear-gradient(135deg, var(--pri), #818CF8);
      box-shadow: 0 6px 20px rgba(79, 70, 229, .15)
    }

    [data-theme="light"] .defter-info-card {
      background: linear-gradient(135deg, rgba(255, 255, 255, .85), rgba(255, 255, 255, .6));
      border-color: rgba(255, 255, 255, .95);
      box-shadow: 0 4px 16px rgba(30, 41, 59, .04), inset 0 1px 0 rgba(255, 255, 255, .9);
      backdrop-filter: blur(20px)
    }

    [data-theme="light"] .defter-info-card:hover {
      box-shadow: 0 8px 24px rgba(108, 99, 255, .06);
      border-color: rgba(108, 99, 255, .12)
    }

    [data-theme="light"] .defter-info-card::before {
      background: radial-gradient(circle, rgba(108, 99, 255, .04) 0%, transparent 60%)
    }

    [data-theme="light"] .defter-option {
      background: linear-gradient(135deg, rgba(255, 255, 255, .8), rgba(255, 255, 255, .55));
      border-color: rgba(255, 255, 255, .95);
      backdrop-filter: blur(16px);
      box-shadow: 0 3px 12px rgba(30, 41, 59, .03), inset 0 1px 0 rgba(255, 255, 255, .9)
    }

    [data-theme="light"] .defter-option:hover {
      border-color: rgba(108, 99, 255, .2);
      box-shadow: 0 8px 24px rgba(108, 99, 255, .06)
    }

    [data-theme="light"] .defter-option::after {
      background: linear-gradient(135deg, rgba(108, 99, 255, .04), transparent 70%)
    }

    [data-theme="light"] .defter-opt-icon {
      box-shadow: 0 2px 8px rgba(30, 41, 59, .04);
      background: rgba(255, 255, 255, .7)
    }

    [data-theme="light"] .defter-record {
      background:
        linear-gradient(180deg, rgba(255, 255, 255, .96), rgba(255, 255, 255, .82)),
        linear-gradient(135deg, rgba(255, 255, 255, .9), rgba(248, 250, 252, .8));
      border-color: rgba(226, 232, 240, .9);
      backdrop-filter: blur(16px);
      -webkit-backdrop-filter: blur(16px);
      box-shadow: 0 8px 20px rgba(15, 23, 42, .05), inset 0 1px 0 rgba(255, 255, 255, .98)
    }

    [data-theme="light"] .defter-record:hover {
      border-color: color-mix(in srgb, var(--rec-accent, rgba(108, 99, 255)) 18%, rgba(226, 232, 240, .9));
      box-shadow: 0 12px 24px color-mix(in srgb, var(--rec-accent, rgba(108, 99, 255)) 9%, transparent)
    }

    [data-theme="light"] .defter-record .rec-icon {
      box-shadow: 0 3px 10px rgba(30, 41, 59, .06);
      border-color: rgba(30, 41, 59, .04)
    }

    [data-theme="light"] .defter-record .rec-date {
      background:
        linear-gradient(180deg, rgba(255, 255, 255, .94), rgba(255, 255, 255, .8)),
        linear-gradient(135deg, color-mix(in srgb, var(--rec-accent, rgba(108, 99, 255)) 8%, white), color-mix(in srgb, var(--rec-accent, rgba(108, 99, 255)) 2%, white));
      border-color: color-mix(in srgb, var(--rec-accent, rgba(108, 99, 255)) 12%, rgba(226, 232, 240, .9));
      box-shadow: inset 0 1px 0 rgba(255, 255, 255, .98), 0 8px 18px color-mix(in srgb, var(--rec-accent, rgba(108, 99, 255)) 7%, transparent)
    }

    [data-theme="light"] .defter-record .rec-date .rec-day-num {
      color: var(--txt)
    }

    [data-theme="light"] .defter-record .rec-date .rec-month-label {
      color: var(--pri)
    }

    [data-theme="light"] .rec-type-chip {
      background: linear-gradient(180deg, rgba(255, 255, 255, .96), rgba(255, 255, 255, .82));
      border-color: rgba(203, 213, 225, .85);
      box-shadow: 0 8px 18px rgba(15, 23, 42, .04), inset 0 1px 0 rgba(255, 255, 255, .98)
    }

    [data-theme="light"] .rec-type-chip.active {
      color: color-mix(in srgb, var(--chip-accent, var(--pri)) 78%, #0f172a);
      background: linear-gradient(135deg, color-mix(in srgb, var(--chip-accent, var(--pri)) 18%, white), color-mix(in srgb, var(--chip-accent, var(--pri)) 8%, white));
      border-color: color-mix(in srgb, var(--chip-accent, var(--pri)) 24%, rgba(30, 41, 59, .08));
      box-shadow: 0 12px 28px color-mix(in srgb, var(--chip-accent, var(--pri)) 12%, transparent), inset 0 1px 0 rgba(255, 255, 255, .98)
    }

    [data-theme="light"] .rec-type-chip .chip-count {
      background: rgba(15, 23, 42, .05)
    }

    [data-theme="light"] .defter-record .rec-sub-item {
      background: linear-gradient(180deg, rgba(255, 255, 255, .92), rgba(255, 255, 255, .78));
      border-color: rgba(203, 213, 225, .8)
    }

    [data-theme="light"] .defter-filter-btns .filter-btn {
      background: linear-gradient(180deg, rgba(255, 255, 255, .96), rgba(255, 255, 255, .82));
      border-color: rgba(203, 213, 225, .86);
      box-shadow: 0 8px 18px rgba(15, 23, 42, .04), inset 0 1px 0 rgba(255, 255, 255, .98)
    }

    [data-theme="light"] .defter-filter-btns .filter-btn.active {
      color: var(--pri);
      background: linear-gradient(135deg, color-mix(in srgb, var(--pri) 16%, white), color-mix(in srgb, var(--pri) 8%, white));
      border-color: color-mix(in srgb, var(--pri) 20%, rgba(203, 213, 225, .9));
      box-shadow: 0 10px 20px rgba(139, 123, 255, .08), inset 0 1px 0 rgba(255, 255, 255, .98)
    }

    [data-theme="light"] .defter-filter-btns .filter-btn .filter-count {
      background: rgba(15, 23, 42, .05)
    }

    [data-theme="light"] .rec-stat-pill {
      background: color-mix(in srgb, var(--pill-clr, var(--pri)) 8%, white);
      border-color: color-mix(in srgb, var(--pill-clr, var(--pri)) 12%, transparent)
    }

    @media (max-width: 640px) {
      .defter-filter-btns {
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        padding-bottom: 2px
      }

      .defter-filter-btns::-webkit-scrollbar {
        display: none
      }

      .defter-filter-btns .filter-btn {
        flex: 0 0 auto;
        min-width: max-content
      }

      .defter-record {
        margin: 0 12px 12px;
        padding: 14px;
        gap: 10px 12px;
        grid-template-columns: minmax(0, 1fr) 84px;
        align-items: start
      }

      .defter-record .rec-icon {
        width: 42px;
        height: 42px;
        border-radius: 13px;
        font-size: 1.1rem
      }

      .defter-record .rec-info {
        grid-column: 1;
        grid-row: 1
      }

      .defter-record .rec-title {
        font-size: .92rem;
        white-space: normal
      }

      .defter-record .rec-head {
        gap: 8px
      }

      .defter-record .rec-status {
        font-size: .64rem;
        padding: 5px 9px
      }

      .defter-record .rec-sub {
        gap: 6px
      }

      .defter-record .rec-sub-item {
        max-width: 100%
      }

      .defter-record .rec-sub-item.rec-sub-actor-item {
        max-width: 100%
      }

      .defter-record .rec-sub-item.rec-sub-actor-item .rec-sub-value {
        max-width: 120px
      }

      .defter-record .rec-date {
        grid-column: 2;
        grid-row: 1;
        justify-self: end;
        width: 84px;
        min-width: 84px;
        padding: 10px 9px;
        border-radius: 17px;
        gap: 7px
      }

      .defter-record .rec-date .rec-day-name {
        font-size: .67rem;
        padding-bottom: 6px
      }

      .defter-record .rec-date .rec-day-num {
        font-size: 1.12rem
      }

      .defter-record .rec-date .rec-month-label {
        font-size: .9rem
      }

      .defter-record .rec-date .rec-date-slash {
        font-size: .88rem
      }

      .rec-type-tabs {
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        padding-bottom: 2px
      }

      .rec-type-chip {
        flex: 0 0 auto
      }
    }

    @media (max-width: 420px) {
      .defter-record {
        margin: 0 10px 10px;
        padding: 13px;
        grid-template-columns: minmax(0, 1fr) 80px
      }

      .defter-record .rec-date {
        width: 80px;
        min-width: 80px;
        padding: 9px 8px
      }

      .defter-record .rec-main {
        gap: 10px
      }

      .defter-record .rec-title {
        font-size: 1rem
      }

      .defter-record .rec-sub {
        gap: 5px
      }

      .defter-record .rec-sub-item {
        padding: 6px 9px
      }
    }

    [data-theme="light"] .defter-section-title {
      background: linear-gradient(135deg, rgba(108, 99, 255, .03), transparent);
      border-color: rgba(108, 99, 255, .06)
    }

    [data-theme="light"] .defter-bal-card {
      background: linear-gradient(135deg, rgba(255, 255, 255, .85), rgba(255, 255, 255, .6));
      border-color: rgba(255, 255, 255, .95);
      box-shadow: 0 4px 16px rgba(30, 41, 59, .04), inset 0 1px 0 rgba(255, 255, 255, .9);
      backdrop-filter: blur(20px)
    }

    [data-theme="light"] .defter-bal-card:hover {
      box-shadow: 0 8px 24px rgba(108, 99, 255, .06);
      border-color: rgba(108, 99, 255, .12)
    }

    [data-theme="light"] .defter-bal-card.casual {
      border-color: rgba(230, 126, 34, .15)
    }

    [data-theme="light"] .defter-bal-card.regular {
      border-color: rgba(59, 130, 246, .15)
    }

    [data-theme="light"] .defter-alert.danger {
      background: linear-gradient(135deg, rgba(244, 63, 111, .05), rgba(244, 63, 111, .02));
      border-color: rgba(244, 63, 111, .1)
    }

    [data-theme="light"] .defter-btn-outline {
      background: rgba(255, 255, 255, .7);
      box-shadow: 0 2px 6px rgba(30, 41, 59, .03);
      backdrop-filter: blur(8px)
    }

    [data-theme="light"] .defter-btn-outline.danger {
      background: rgba(244, 63, 111, .04);
      border-color: rgba(244, 63, 111, .15)
    }

    [data-theme="light"] .defter-btn-outline.primary {
      background: rgba(108, 99, 255, .04);
      border-color: rgba(108, 99, 255, .15)
    }

    [data-theme="light"] .defter-source-item {
      background: linear-gradient(135deg, rgba(255, 255, 255, .8), rgba(255, 255, 255, .55));
      border-color: rgba(255, 255, 255, .95);
      backdrop-filter: blur(16px);
      box-shadow: 0 3px 10px rgba(30, 41, 59, .03), inset 0 1px 0 rgba(255, 255, 255, .9)
    }

    [data-theme="light"] .defter-source-item:hover {
      border-color: rgba(108, 99, 255, .2);
      box-shadow: 0 6px 18px rgba(108, 99, 255, .06)
    }

    [data-theme="light"] .defter-source-item.selected {
      border-color: var(--pri);
      background: linear-gradient(135deg, rgba(108, 99, 255, .06), rgba(59, 130, 246, .03))
    }

    [data-theme="light"] .defter-cash-item {
      background: linear-gradient(135deg, rgba(255, 255, 255, .8), rgba(255, 255, 255, .55));
      border-color: rgba(255, 255, 255, .95);
      backdrop-filter: blur(16px);
      box-shadow: 0 3px 10px rgba(30, 41, 59, .03), inset 0 1px 0 rgba(255, 255, 255, .9)
    }

    [data-theme="light"] .defter-cash-item:hover {
      border-color: rgba(230, 126, 34, .2);
      box-shadow: 0 6px 18px rgba(230, 126, 34, .06)
    }

    [data-theme="light"] .defter-cash-summary {
      background: linear-gradient(135deg, rgba(255, 255, 255, .9), rgba(255, 255, 255, .65));
      border-color: rgba(230, 126, 34, .1);
      border-right-color: var(--am);
      box-shadow: 0 4px 16px rgba(30, 41, 59, .04);
      backdrop-filter: blur(20px)
    }

    [data-theme="light"] .defter-cash-date {
      background: linear-gradient(135deg, rgba(255, 179, 71, .1), rgba(255, 179, 71, .03));
      border-color: rgba(255, 179, 71, .08)
    }

    [data-theme="light"] .defter-sub-item {
      background: linear-gradient(135deg, rgba(255, 255, 255, .8), rgba(255, 255, 255, .55));
      border-color: rgba(255, 255, 255, .95);
      backdrop-filter: blur(16px);
      box-shadow: 0 3px 10px rgba(30, 41, 59, .03), inset 0 1px 0 rgba(255, 255, 255, .9)
    }

    [data-theme="light"] .defter-sub-item:hover {
      border-color: rgba(108, 99, 255, .2);
      box-shadow: 0 6px 18px rgba(108, 99, 255, .05)
    }

    [data-theme="light"] .defter-sub-item .sub-avatar {
      background: rgba(108, 99, 255, .06);
      box-shadow: 0 2px 8px rgba(108, 99, 255, .06);
      border-color: rgba(30, 41, 59, .05)
    }

    [data-theme="light"] .defter-day-overlay {
      background: var(--bg)
    }

    [data-theme="light"] .defter-day-overlay .day-ov-header {
      background: linear-gradient(180deg, var(--bg) 90%, transparent);
      border-bottom-color: rgba(108, 99, 255, .06)
    }

    [data-theme="light"] .defter-day-overlay .day-ov-close {
      background: rgba(108, 99, 255, .04);
      border-color: rgba(108, 99, 255, .1)
    }

    [data-theme="light"] .defter-day-overlay .day-ov-close:hover {
      background: rgba(108, 99, 255, .08);
      color: var(--pri)
    }

    [data-theme="light"] .defter-empty-bal i {
      color: var(--txt3);
      opacity: .3
    }

    [data-theme="light"] .defter-input-row {
      background: linear-gradient(135deg, rgba(255, 255, 255, .8), rgba(255, 255, 255, .55));
      border-color: rgba(255, 255, 255, .95);
      backdrop-filter: blur(16px)
    }

    [data-theme="light"] .defter-input-row input {
      background: rgba(255, 255, 255, .9);
      border-color: rgba(30, 41, 59, .08)
    }

    [data-theme="light"] .defter-input-row input:focus {
      background: #fff;
      border-color: var(--pri)
    }

    [data-theme="light"] .rec-filter-tab {
      background: rgba(255, 255, 255, .7);
      border-color: rgba(30, 41, 59, .05);
      backdrop-filter: blur(8px)
    }

    [data-theme="light"] .rec-filter-tab:hover {
      background: rgba(108, 99, 255, .04);
      color: var(--txt2)
    }

    [data-theme="light"] .rec-filter-tab.active {
      color: #fff;
      box-shadow: 0 4px 14px rgba(108, 99, 255, .12)
    }

    [data-theme="light"] .rec-tab-badge {
      background: rgba(30, 41, 59, .04);
      color: var(--txt3)
    }

    [data-theme="light"] .cal-nav {
      background: rgba(255, 255, 255, .7);
      border-color: rgba(30, 41, 59, .05);
      box-shadow: 0 2px 6px rgba(30, 41, 59, .03)
    }

    [data-theme="light"] .cal-nav:hover {
      background: rgba(108, 99, 255, .06);
      color: var(--pri);
      box-shadow: 0 4px 12px rgba(108, 99, 255, .06)
    }

    @keyframes pulse {
      0% {
        transform: scale(1);
        opacity: 0.15;
      }

      100% {
        transform: scale(1.1);
        opacity: 0.25;
      }
    }