:root {
    --primary: #C100C6;
    --primary-hover: #9E009F;
    --secondary: #6A6AF4;
    --secondary-hover: #5454D9;
    --dark: #2F2A3A;
    --mid: #5B5470;
    --muted: #7A728F;
    --border: rgba(193, 0, 198, 0.12);
    --border-soft: #E7DDF3;
    --bg: #FCF8FD;
    --bg-soft: #F6F1FB;
    --bg-lavender: #ECE9FB;
    --white: #FFFFFF;
    --success: #2E8B57;
    --success-light: #E9F7F0;
    --red: #C0392B;
    --red-light: #FDECEA;
    --gradient-soft: linear-gradient(135deg, #FFF8FC 0%, #F5EEFF 55%, #EEF0FF 100%);
    --gradient-brand: linear-gradient(90deg, #C100C6 0%, #6A6AF4 100%);
    --shadow-soft: 0 12px 32px rgba(110, 90, 160, 0.10);
  }

  * { box-sizing: border-box; margin: 0; padding: 0; }

  body {
    font-family: 'DM Sans', sans-serif;
    background:
      radial-gradient(circle at top left, rgba(193,0,198,0.04), transparent 30%),
      radial-gradient(circle at top right, rgba(106,106,244,0.05), transparent 28%),
      var(--bg);
    color: var(--dark);
    min-height: 100vh;
  }

  input, select, textarea, button {
    font-family: 'DM Sans', sans-serif;
  }

  .layout {
    display: flex;
    min-height: 100vh;
  }

  .sidebar {
    width: 240px;
    background: linear-gradient(180deg, #3A3150 0%, #2F2A3A 100%);
    flex-shrink: 0;
    padding: 24px 0;
    display: flex;
    flex-direction: column;
  }

  .sidebar-logo {
    padding: 0 20px 24px;
    border-bottom: 1px solid rgba(255,255,255,0.08);
    margin-bottom: 20px;
  }

  .sidebar-logo .brand {
    font-family: 'Cormorant Garamond', serif;
    font-size: 20px;
    font-weight: 600;
    color: #F6E9FF;
    letter-spacing: 0.08em;
  }

  .sidebar-logo .sub {
    font-size: 10px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: rgba(255,255,255,0.45);
    margin-top: 4px;
  }

  .nav-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 11px 20px;
    font-size: 13px;
    color: rgba(255,255,255,0.60);
    cursor: pointer;
    transition: all 0.15s;
    border-left: 3px solid transparent;
    text-decoration: none;
  }

  .nav-item:hover {
    color: rgba(255,255,255,0.90);
    background: rgba(255,255,255,0.04);
  }

  .nav-item.active {
    color: #FFFFFF;
    border-left-color: var(--primary);
    background: rgba(193,0,198,0.12);
  }

  .nav-icon {
    width: 16px;
    height: 16px;
    opacity: 0.8;
  }

  .sidebar-footer {
    margin-top: auto;
    padding: 16px 20px;
  }

  .sidebar-footer a {
    font-size: 12px;
    color: rgba(255,255,255,0.55);
    text-decoration: none;
    display: block;
    margin-bottom: 8px;
  }

  .sidebar-footer a:hover {
    color: #fff;
  }

  .main {
    flex: 1;
    overflow: auto;
  }

  .topbar {
    background: rgba(255,255,255,0.88);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--border-soft);
    padding: 16px 32px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: sticky;
    top: 0;
    z-index: 5;
  }

  .page-title {
    font-size: 18px;
    font-weight: 700;
    color: var(--dark);
  }

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

  .content {
    padding: 28px 32px 40px;
  }

  .stats {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    margin-bottom: 28px;
  }

  .stat-card {
    background: var(--white);
    border: 1px solid var(--border-soft);
    border-radius: 18px;
    padding: 20px;
    box-shadow: 0 4px 16px rgba(120, 100, 170, 0.04);
  }

  .stat-label {
    font-size: 11px;
    letter-spacing: 0.10em;
    text-transform: uppercase;
    color: var(--muted);
    margin-bottom: 8px;
    font-weight: 700;
  }

  .stat-val {
    font-family: 'Cormorant Garamond', serif;
    font-size: 34px;
    font-weight: 600;
    color: var(--dark);
  }

  .tab-panel { display: none; }
  .tab-panel.active { display: block; }

  .table-wrap,
  .card-wrap {
    background: var(--white);
    border: 1px solid var(--border-soft);
    border-radius: 18px;
    overflow: hidden;
    box-shadow: 0 4px 16px rgba(120, 100, 170, 0.04);
  }

  .table-header,
  .card-header {
    padding: 16px 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid var(--border-soft);
  }

  .table-header-title,
  .card-header-title {
    font-size: 14px;
    font-weight: 700;
    color: var(--dark);
  }

  table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
  }

  thead th {
    text-align: left;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--muted);
    padding: 12px 16px;
    border-bottom: 1px solid var(--border-soft);
    background: #FBF8FD;
  }

  tbody td {
    padding: 13px 16px;
    border-bottom: 1px solid rgba(0,0,0,0.04);
    color: var(--dark);
    vertical-align: middle;
  }

  tbody tr:last-child td { border-bottom: none; }
  tbody tr:hover td { background: rgba(193,0,198,0.03); }

  .empty-state {
    text-align: center;
    color: var(--muted);
    font-size: 13px;
    padding: 40px;
  }

  .badge {
    display: inline-block;
    font-size: 11px;
    padding: 4px 10px;
    border-radius: 999px;
    font-weight: 700;
  }

  .badge-pending { background: rgba(193,0,198,0.10); color: var(--primary); }
  .badge-confirmed { background: var(--success-light); color: var(--success); }
  .badge-cancelled { background: var(--red-light); color: var(--red); }
  .badge-source { background: rgba(106,106,244,0.10); color: var(--secondary); }

  .cat-pill {
    display: inline-block;
    font-size: 11px;
    padding: 4px 10px;
    border-radius: 999px;
    font-weight: 600;
  }

  .cat-0 { background: rgba(184,150,106,0.12); color: #8A6B3E; }
  .cat-1 { background: rgba(193,0,198,0.10); color: #9B008F; }
  .cat-2 { background: rgba(106,106,244,0.10); color: #4E4ED8; }
  .cat-3 { background: rgba(45,106,79,0.10); color: #1F5C3E; }
  .cat-4 { background: rgba(255,153,0,0.12); color: #B86A00; }
  .cat-5 { background: rgba(0,140,170,0.12); color: #006E86; }
  .cat-6 { background: rgba(120,90,160,0.12); color: #6C4AA3; }

  .act-btns {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
  }

  .act-btn {
    padding: 6px 12px;
    font-size: 12px;
    border: 1px solid var(--border-soft);
    border-radius: 10px;
    cursor: pointer;
    background: white;
    color: var(--mid);
    transition: all 0.12s;
  }

  .act-btn:hover {
    border-color: var(--secondary);
    color: var(--secondary);
  }

  .act-btn.confirm:hover {
    border-color: var(--success);
    color: var(--success);
    background: var(--success-light);
  }

  .act-btn.cancel:hover,
  .act-btn.del:hover {
    border-color: var(--red);
    color: var(--red);
    background: var(--red-light);
  }

  .act-btn.edit:hover {
    border-color: var(--primary);
    color: var(--primary);
    background: #FFF5FD;
  }

  .btn-add,
  .btn-outline,
  .btn-primary {
    padding: 10px 18px;
    font-size: 13px;
    font-weight: 700;
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.15s;
  }

  .btn-add,
  .btn-outline {
    background: white;
    color: var(--mid);
    border: 1px solid var(--border-soft);
  }

  .btn-add:hover,
  .btn-outline:hover {
    border-color: var(--secondary);
    color: var(--secondary);
  }

  .btn-primary {
    border: none;
    background: var(--gradient-brand);
    color: white;
    box-shadow: 0 10px 24px rgba(193, 0, 198, 0.18);
  }

  .btn-primary:hover {
    transform: translateY(-1px);
  }

  .demo-notice {
    background: #FFF3FD;
    border: 1px solid #F0C8EE;
    border-radius: 16px;
    padding: 12px 16px;
    font-size: 12px;
    color: var(--primary);
    margin-bottom: 20px;
  }

  .settings-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 18px;
    padding: 22px;
  }

  .settings-full {
    grid-column: 1 / -1;
  }

  .form-group label {
    display: block;
    font-size: 11px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--mid);
    margin-bottom: 7px;
    font-weight: 700;
  }

  .form-group input,
  .form-group select,
  .form-group textarea {
    width: 100%;
    padding: 12px 14px;
    font-size: 14px;
    color: var(--dark);
    background: #FCFAFE;
    border: 1px solid #E7DDF3;
    border-radius: 12px;
    outline: none;
    transition: border-color 0.15s, box-shadow 0.15s;
  }

  .form-group input:focus,
  .form-group select:focus,
  .form-group textarea:focus {
    border-color: var(--primary);
    box-shadow: 0 0 0 4px rgba(193, 0, 198, 0.08);
  }

  .form-group textarea {
    min-height: 110px;
    resize: vertical;
  }

  #about-description,
  #about-description-2 {
    min-height: 180px;
    font-family: Consolas, monospace;
    line-height: 1.6;
  }

  .form-actions {
    padding: 0 22px 22px;
    display: flex;
    justify-content: flex-end;
    gap: 10px;
  }

  .modal-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(26, 24, 20, 0.55);
    z-index: 1000;
    align-items: center;
    justify-content: center;
    padding: 20px;
  }

  .modal-overlay.open { display: flex; }

  .modal {
    background: var(--white);
    border-radius: 18px;
    padding: 26px;
    width: 100%;
    max-width: 500px;
    max-height: 90vh;
    overflow-y: auto;
    box-shadow: 0 20px 50px rgba(0,0,0,0.12);
  }

  .modal-title {
    font-family: 'Cormorant Garamond', serif;
    font-size: 24px;
    font-weight: 600;
    color: var(--dark);
    margin-bottom: 20px;
    letter-spacing: 0.04em;
  }

  .modal-form {
    display: flex;
    flex-direction: column;
    gap: 14px;
  }

  .modal-form label {
    display: block;
    font-size: 11px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--mid);
    margin-bottom: 6px;
    font-weight: 700;
  }

  .modal-form input,
  .modal-form select,
  .modal-form textarea {
    width: 100%;
    padding: 12px 14px;
    font-size: 14px;
    color: var(--dark);
    background: #FCFAFE;
    border: 1px solid #E7DDF3;
    border-radius: 12px;
    outline: none;
    transition: border-color 0.15s, box-shadow 0.15s;
  }

  .modal-form input:focus,
  .modal-form select:focus,
  .modal-form textarea:focus {
    border-color: var(--primary);
    box-shadow: 0 0 0 4px rgba(193, 0, 198, 0.08);
  }

  .modal-form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
  }

  .modal-btns {
    display: flex;
    gap: 10px;
    justify-content: flex-end;
    margin-top: 6px;
  }

  #ms-detail {
    min-height: 110px;
    resize: vertical;
  }
  .btn-cancel {
    padding: 10px 18px;
    font-size: 13px;
    border: 1px solid var(--border-soft);
    border-radius: 12px;
    background: white;
    cursor: pointer;
    color: var(--mid);
  }

  .btn-save {
    padding: 10px 22px;
    font-size: 13px;
    font-weight: 700;
    border: none;
    border-radius: 12px;
    background: var(--gradient-brand);
    color: white;
    cursor: pointer;
  }

  .login-overlay {
    position: fixed;
    inset: 0;
    background: var(--gradient-soft);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    padding: 20px;
  }

  .login-card {
    width: 100%;
    max-width: 400px;
    background: #ffffff;
    border: 1px solid var(--border-soft);
    border-radius: 20px;
    padding: 28px;
    box-shadow: 0 20px 50px rgba(0,0,0,0.10);
  }

  .login-card h2 {
    margin: 0 0 8px;
    font-family: 'Cormorant Garamond', serif;
    font-size: 32px;
    font-weight: 600;
    color: var(--dark);
  }

  .login-card p {
    margin: 0 0 18px;
    font-size: 13px;
    color: var(--mid);
  }

  .login-card input {
    width: 100%;
    padding: 12px 14px;
    border: 1px solid #E7DDF3;
    border-radius: 12px;
    font-size: 14px;
    outline: none;
    margin-bottom: 12px;
  }

  .login-card input:focus {
    border-color: var(--primary);
    box-shadow: 0 0 0 4px rgba(193, 0, 198, 0.08);
  }

  .login-error {
    min-height: 18px;
    margin: 0 0 12px;
    font-size: 12px;
    color: var(--red);
  }

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

  .login-actions button {
    flex: 1;
    padding: 11px 14px;
    border-radius: 12px;
    cursor: pointer;
    font-size: 13px;
    font-weight: 700;
  }

  .login-cancel {
    border: 1px solid var(--border-soft);
    background: white;
    color: var(--mid);
  }

  .login-submit {
    border: none;
    background: var(--gradient-brand);
    color: white;
  }

  @media (max-width: 980px) {
    .stats {
      grid-template-columns: repeat(2, 1fr);
    }

    .settings-grid {
      grid-template-columns: 1fr;
    }
  }

  @media (max-width: 768px) {
    .sidebar { display: none; }
    .content { padding: 20px 16px 34px; }
    .topbar { padding: 14px 16px; }
    .stats { grid-template-columns: 1fr 1fr; }
    table { font-size: 12px; }
    thead th, tbody td { padding: 10px 12px; }
    .modal-form-row { grid-template-columns: 1fr; }
  }

  @media (max-width: 560px) {
    .stats { grid-template-columns: 1fr; }
    .topbar { flex-direction: column; align-items: flex-start; gap: 10px; }
    .topbar-actions { width: 100%; flex-wrap: wrap; }
    .topbar-actions button { width: 100%; }
  }

  /* Mobile admin layout improvements */
  .mobile-menu-btn,
  .mobile-sidebar-backdrop {
    display: none;
  }

  .mobile-menu-btn {
    width: 42px;
    height: 42px;
    border: 1px solid var(--border-soft);
    border-radius: 12px;
    background: white;
    color: var(--dark);
    font-size: 22px;
    font-weight: 800;
    cursor: pointer;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 14px rgba(120, 100, 170, 0.06);
  }

  .table-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .table-wrap table {
    min-width: 860px;
  }

  .table-wrap::-webkit-scrollbar,
  .sheet-calendar-wrap::-webkit-scrollbar,
  .heatmap-wrap::-webkit-scrollbar {
    height: 8px;
    width: 8px;
  }

  .table-wrap::-webkit-scrollbar-thumb,
  .sheet-calendar-wrap::-webkit-scrollbar-thumb,
  .heatmap-wrap::-webkit-scrollbar-thumb {
    background: #d8cbe8;
    border-radius: 999px;
  }

  .table-wrap::-webkit-scrollbar-track,
  .sheet-calendar-wrap::-webkit-scrollbar-track,
  .heatmap-wrap::-webkit-scrollbar-track {
    background: #f8f4fb;
  }


  .booking-toolbar {
    padding: 14px 20px;
    display: flex;
    align-items: center;
    gap: 10px;
    border-bottom: 1px solid var(--border-soft);
    background: #fff;
  }

  .booking-search-wrap {
    position: relative;
    width: min(100%, 560px);
  }

  .booking-search-wrap::before {
    content: "⌕";
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--muted);
    font-size: 18px;
    line-height: 1;
  }

  .booking-search-input {
    width: 100%;
    padding: 12px 40px 12px 40px;
    border: 1px solid var(--border-soft);
    border-radius: 12px;
    background: #FCFAFE;
    color: var(--dark);
    font-size: 13px;
    outline: none;
    transition: border-color 0.15s, box-shadow 0.15s;
  }

  .booking-search-input:focus {
    border-color: var(--primary);
    box-shadow: 0 0 0 4px rgba(193, 0, 198, 0.08);
  }

  .booking-search-clear {
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    width: 28px;
    height: 28px;
    border: none;
    border-radius: 9px;
    background: transparent;
    color: var(--muted);
    cursor: pointer;
    font-size: 18px;
    line-height: 1;
  }

  .booking-search-clear:hover {
    background: #F6F1FB;
    color: var(--primary);
  }

  .booking-search-count {
    font-size: 12px;
    color: var(--muted);
    white-space: nowrap;
  }

  .booking-date-filter-wrap { display:flex; align-items:center; gap:6px; }
  .booking-date-filter { min-width:150px; padding:11px 10px; border:1px solid var(--border-soft); border-radius:12px; background:#fcfafe; color:var(--dark); }
  .booking-date-clear { border:1px solid var(--border-soft); border-radius:10px; background:#fff; color:var(--muted); padding:9px 11px; cursor:pointer; }

  .booking-sort-wrap {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-left: auto;
    white-space: nowrap;
  }

  .booking-sort-label {
    font-size: 12px;
    color: var(--muted);
    font-weight: 700;
  }

  .booking-sort-select {
    padding: 11px 12px;
    border: 1px solid var(--border-soft);
    border-radius: 12px;
    background: #FCFAFE;
    color: var(--dark);
    font-size: 13px;
    outline: none;
    min-width: 210px;
  }

  .booking-sort-select:focus {
    border-color: var(--primary);
    box-shadow: 0 0 0 4px rgba(193, 0, 198, 0.08);
  }


  .list-toolbar {
    padding: 14px 20px;
    display: flex;
    align-items: center;
    gap: 10px;
    border-bottom: 1px solid var(--border-soft);
    background: #fff;
  }

  .list-search-wrap {
    position: relative;
    width: min(100%, 520px);
  }

  .list-search-input {
    width: 100%;
    padding: 12px 40px 12px 14px;
    border: 1px solid var(--border-soft);
    border-radius: 12px;
    background: #FCFAFE;
    color: var(--dark);
    font-size: 13px;
    outline: none;
    transition: border-color 0.15s, box-shadow 0.15s;
  }

  .list-search-input:focus {
    border-color: var(--primary);
    box-shadow: 0 0 0 4px rgba(193, 0, 198, 0.08);
  }

  .list-search-clear {
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    width: 28px;
    height: 28px;
    border: none;
    border-radius: 9px;
    background: transparent;
    color: var(--muted);
    cursor: pointer;
    font-size: 18px;
    line-height: 1;
  }

  .list-search-clear:hover {
    background: #F6F1FB;
    color: var(--primary);
  }

  .list-search-count {
    font-size: 12px;
    color: var(--muted);
    white-space: nowrap;
  }


  .mobile-scroll-hint {
    display: none;
    padding: 10px 14px;
    font-size: 12px;
    color: var(--muted);
    background: #FBF8FD;
    border-bottom: 1px solid var(--border-soft);
  }

  @media (max-width: 860px) {
    body.mobile-sidebar-open {
      overflow: hidden;
    }

    .layout {
      display: block;
    }

    .mobile-menu-btn {
      display: inline-flex;
      flex-shrink: 0;
    }

    .mobile-sidebar-backdrop {
      position: fixed;
      inset: 0;
      background: rgba(26, 24, 20, 0.48);
      z-index: 30;
      opacity: 0;
      visibility: hidden;
      transition: 0.18s ease;
      display: block;
    }

    body.mobile-sidebar-open .mobile-sidebar-backdrop {
      opacity: 1;
      visibility: visible;
    }

    .sidebar {
      display: flex !important;
      position: fixed;
      top: 0;
      left: 0;
      bottom: 0;
      width: min(82vw, 300px);
      z-index: 40;
      transform: translateX(-105%);
      transition: transform 0.2s ease;
      box-shadow: 18px 0 40px rgba(0,0,0,0.18);
      overflow-y: auto;
      padding-top: 22px;
    }

    body.mobile-sidebar-open .sidebar {
      transform: translateX(0);
    }

    .main {
      width: 100%;
      min-width: 0;
      overflow: visible;
    }

    .topbar {
      padding: 12px 14px;
      gap: 10px;
      align-items: center;
      flex-wrap: nowrap;
      z-index: 10;
    }

    .page-title {
      font-size: 16px;
      flex: 1;
      min-width: 0;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    .topbar-actions {
      gap: 6px;
      flex-shrink: 0;
    }

    .topbar-actions .btn-outline {
      padding: 9px 10px;
      font-size: 12px;
    }

    .content {
      padding: 16px 12px 34px;
    }

    .stats {
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 10px;
      margin-bottom: 16px;
    }

    .stat-card {
      padding: 14px;
      border-radius: 16px;
    }

    .stat-label {
      font-size: 10px;
      line-height: 1.35;
    }

    .stat-val {
      font-size: 28px;
    }

    .table-header,
    .card-header {
      padding: 14px;
      align-items: flex-start;
      gap: 10px;
      flex-direction: column;
    }

    .table-header > div:last-child,
    .card-header > div:last-child {
      width: 100%;
      justify-content: flex-start !important;
    }

    .btn-primary,
    .btn-outline,
    .btn-add,
    .report-range-btn,
    .report-action-btn,
    .calendar-view-btn {
      padding: 10px 12px;
      font-size: 12px;
      border-radius: 11px;
    }

    .settings-grid {
      grid-template-columns: 1fr;
      padding: 16px;
      gap: 14px;
    }

    .form-actions {
      padding: 0 16px 16px;
      justify-content: stretch;
    }

    .form-actions .btn-primary,
    .form-actions .btn-outline {
      width: 100%;
    }

    .modal-overlay {
      align-items: flex-end;
      padding: 10px;
    }

    .modal {
      max-width: none;
      width: 100%;
      max-height: 92vh;
      border-radius: 18px 18px 14px 14px;
      padding: 20px 16px;
    }

    .modal-title {
      font-size: 22px;
      margin-bottom: 16px;
    }

    .modal-form-row {
      grid-template-columns: 1fr;
      gap: 12px;
    }

    .modal-btns {
      flex-direction: column-reverse;
      gap: 8px;
    }

    .modal-btns button,
    .login-actions button {
      width: 100%;
    }

    .service-check-list,
    .product-check-list {
      max-height: 260px;
    }

    .product-qty-row,
    .booking-product-edit-row {
      grid-template-columns: 1fr;
    }

    .product-qty-input {
      width: 100% !important;
    }

    .booking-toolbar {
      flex-wrap: wrap;
      align-items: stretch;
    }

    .booking-search-wrap {
      width: 100%;
    }

    .booking-sort-wrap {
      width: 100%;
      margin-left: 0;
      justify-content: flex-start;
    }

    .booking-sort-select {
      flex: 1;
      min-width: 0;
    }

    .calendar-toolbar,
    .calendar-filters,
    .calendar-view-actions,
    .calendar-month-control,
    .report-toolbar,
    .report-range-group,
    .report-actions {
      width: 100%;
      justify-content: flex-start;
    }

    .calendar-filters select,
    .calendar-view-actions button,
    .calendar-month-control button,
    .calendar-month-label,
    .report-range-group button,
    .report-actions button {
      flex: 1 1 auto;
      min-width: 0 !important;
    }

    .calendar-legend {
      padding: 0 14px 12px;
      gap: 8px 12px;
      font-size: 11px;
    }

    #calendar-root .fc .fc-toolbar.fc-header-toolbar {
      flex-direction: column;
      align-items: stretch;
      gap: 8px;
    }

    #calendar-root .fc .fc-toolbar-chunk {
      display: flex;
      justify-content: center;
      flex-wrap: wrap;
      gap: 6px;
    }

    #calendar-root .fc .fc-toolbar-title {
      font-size: 18px;
      text-align: center;
    }

    #calendar-root .fc .fc-button {
      padding: 7px 10px;
      font-size: 12px;
    }

    #calendar-root .fc .fc-daygrid-day-number {
      font-size: 12px;
      padding: 4px;
    }

    #calendar-root .fc .fc-event-title,
    #calendar-root .fc .fc-event-time {
      font-size: 10px;
    }

    .sheet-calendar-wrap {
      max-height: calc(100vh - 330px);
      border-radius: 14px;
    }

    .chart-wrap {
      height: 260px;
      padding: 14px;
    }

    .heatmap-wrap {
      padding: 14px;
    }

    .login-card {
      padding: 22px;
      border-radius: 18px;
    }
  }

  @media (max-width: 560px) {
    .topbar {
      flex-wrap: wrap;
    }

    .topbar-actions {
      width: 100%;
      display: grid;
      grid-template-columns: 1fr 1fr;
    }

    .topbar-actions button {
      width: 100%;
    }

    .stats {
      grid-template-columns: 1fr 1fr;
    }

    .stat-card {
      padding: 12px;
    }

    .stat-label {
      letter-spacing: 0.06em;
    }

    .stat-val {
      font-size: 25px;
    }

    .table-wrap,
    .card-wrap {
      border-radius: 16px;
    }

    .table-wrap table {
      min-width: 780px;
    }

    thead th,
    tbody td {
      padding: 10px 11px;
      font-size: 12px;
    }

    .act-btns {
      gap: 5px;
    }

    .act-btn {
      padding: 7px 10px;
      font-size: 11px;
    }

    .calendar-filters select {
      width: 100%;
      flex-basis: 100%;
    }

    .calendar-view-actions {
      display: grid;
      grid-template-columns: 1fr 1fr;
    }

    .calendar-month-control {
      display: grid !important;
      grid-template-columns: 44px 1fr 44px;
    }

    .calendar-month-label {
      min-width: 0;
    }

    .modal-overlay {
      padding: 0;
    }

    .modal {
      border-radius: 18px 18px 0 0;
      max-height: 94vh;
    }
  }




  .calendar-toolbar {
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:12px;
    flex-wrap:wrap;
    margin-bottom:14px;
  }

  .calendar-filters {
    display:flex;
    gap:10px;
    flex-wrap:wrap;
  }

  .calendar-legend {
    display:flex;
    align-items:center;
    gap:16px;
    flex-wrap:wrap;
    padding:0 20px 14px;
    color:var(--mid);
    font-size:12px;
  }

  .calendar-legend-label {
    font-weight:700;
    color:var(--mid);
    margin-right:2px;
  }

  .calendar-legend-item {
    display:inline-flex;
    align-items:center;
    gap:6px;
  }

  .calendar-legend-dot {
    width:12px;
    height:12px;
    border-radius:4px;
    display:inline-block;
  }

  .calendar-legend-confirmed { background:#10b981; }
  .calendar-legend-pending { background:#f59e0b; }
  .calendar-legend-completed { background:#3b82f6; }
  .calendar-legend-cancelled { background:#ef4444; }

  #calendar-root .fc .fc-toolbar.fc-header-toolbar {
    margin-bottom: 1rem;
  }

  #calendar-root .fc .fc-button {
    background: white;
    border: 1px solid var(--border-soft);
    color: var(--mid);
    box-shadow: none;
    text-transform: none;
  }

  #calendar-root .fc .fc-button:hover,
  #calendar-root .fc .fc-button:focus {
    background: #faf7fd;
    border-color: var(--secondary);
    color: var(--secondary);
    box-shadow: none;
  }

  #calendar-root .fc .fc-button-primary:not(:disabled).fc-button-active,
  #calendar-root .fc .fc-button-primary:not(:disabled):active {
    background: var(--gradient-brand);
    border-color: transparent;
    color: white;
  }

  #calendar-root .fc .fc-daygrid-event,
  #calendar-root .fc .fc-timegrid-event {
    border: none !important;
    border-radius: 6px;
    padding: 2px 6px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.08);
    overflow: hidden;
  }

  #calendar-root .fc .fc-daygrid-event-dot {
    display: none !important;
  }

  #calendar-root .fc .fc-daygrid-event-harness {
    margin-top: 2px;
  }

  #calendar-root .fc .fc-event-main {
    color: #fff !important;
  }

  #calendar-root .fc .fc-event-title,
  #calendar-root .fc .fc-event-time {
    color: #fff !important;
    font-size: 11px;
    font-weight: 700;
  }

  #calendar-root .fc .fc-event-title {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  #calendar-root .fc .fc-daygrid-day-frame,
  #calendar-root .fc .fc-timegrid-col-frame {
    position:relative;
    overflow:visible;
  }

  .calendar-inline-active {
    position:relative !important;
    z-index:18 !important;
    overflow:hidden !important;
    background:#fff8fc !important;
    box-shadow:inset 0 0 0 2px var(--secondary);
  }

  .calendar-inline-editor {
    position:relative;
    z-index:1;
    width:100%;
    height:100%;
    min-height:150px;
    padding:5px;
    border:0;
    border-radius:0;
    background:#fff8fc;
    box-shadow:none;
    display:grid;
    grid-template-columns:minmax(105px,1.15fr) minmax(90px,1fr);
    gap:4px;
    color:var(--dark);
    text-align:left;
  }

  .calendar-inline-message {
    display:none;
    grid-column:1 / -1;
    font-size:10px;
    color:#b91c1c;
    font-weight:800;
    line-height:1.2;
  }
  .calendar-inline-error .calendar-inline-message { display:block; }
  .calendar-inline-input {
    width:100%;
    min-width:0;
    padding:6px 7px;
    border:1px solid var(--border-soft);
    border-radius:8px;
    background:#fff;
    color:var(--dark);
    font:inherit;
    font-size:11px;
    outline:none;
  }
  .calendar-inline-input:focus { border-color:var(--secondary); box-shadow:0 0 0 2px rgba(157,78,221,.12); }
  .calendar-inline-phone { grid-column:1 / -1; font-size:12px; font-weight:800; }
  .calendar-inline-patient-search,.calendar-inline-patient-match { grid-column:1 / -1; }
  .calendar-inline-actions { grid-column:1 / -1; display:flex; justify-content:flex-end; gap:5px; margin-top:0; }
  .calendar-inline-actions button {
    border:0;
    border-radius:8px;
    padding:6px 9px;
    cursor:pointer;
    font-size:12px;
    font-weight:800;
  }
  .calendar-inline-cancel { background:transparent; color:var(--mid); font-size:16px !important; }
  .calendar-inline-save { background:var(--gradient-brand); color:#fff; }
  .calendar-inline-save:disabled { opacity:.65; cursor:wait; }
  .calendar-inline-error { box-shadow:inset 0 0 0 2px #ef4444; }

  .sheet-slot-cell.calendar-inline-active {
    overflow:visible !important;
  }
  .sheet-slot-cell .calendar-inline-editor {
    width:100%;
    min-height:198px;
  }

  #calendar-root .calendar-inline-editor {
    grid-template-columns:1fr;
    min-height:245px;
  }
  #calendar-root .calendar-inline-input,
  #calendar-root .calendar-inline-phone,
  #calendar-root .calendar-inline-actions,
  #calendar-root .calendar-inline-message {
    grid-column:1;
  }


  .calendar-view-actions {
    display:flex;
    gap:8px;
    flex-wrap:wrap;
    align-items:center;
    justify-content:flex-end;
  }
  .calendar-view-btn {
    padding:10px 14px;
    font-size:13px;
    font-weight:700;
    border-radius:12px;
    cursor:pointer;
    border:1px solid var(--border-soft);
    background:white;
    color:var(--mid);
    transition:all 0.15s;
  }
  .calendar-view-btn:hover { border-color: var(--secondary); color: var(--secondary); }
  .calendar-view-btn.active { background: var(--gradient-brand); color:white; border-color: transparent; }
  .calendar-month-control { display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
  .calendar-month-label {
    min-width: 150px;
    text-align:center;
    font-weight:700;
    color:var(--dark);
    padding:9px 12px;
    border:1px solid var(--border-soft);
    border-radius:12px;
    background:#FBF8FD;
  }
  #calendar-sheet-root { display:none; }

  .sheet-calendar-wrap {
    overflow:auto;
    border:1px solid var(--border-soft);
    border-radius:16px;
    background:#fff;
    height: calc(100vh - 230px);
    min-height:420px;
    max-height: calc(100vh - 230px);
    box-shadow: 0 4px 16px rgba(120, 100, 170, 0.04);
  }

  .sheet-calendar-grid {
    min-width: 2000px;
    width: max-content;
  }

  .sheet-header-row,
  .sheet-doctor-row {
    display:grid;
    grid-template-columns: 96px 132px repeat(22, 80px);
  }

  .sheet-header-row {
    position:sticky;
    top:0;
    z-index:20;
  }

  .sheet-doctor-row {
    position:relative;
    grid-template-rows: 64px;
    min-height:64px;
  }

  .sheet-header-cell {
    background:#dceff5;
    border-right:1px solid rgba(47,42,58,0.25);
    border-bottom:1px solid rgba(47,42,58,0.32);
    min-height:36px;
    display:flex;
    align-items:center;
    justify-content:center;
    text-align:center;
    font-size:12px;
    font-weight:800;
    color:var(--dark);
    padding:6px 4px;
    line-height:1.15;
  }

  .sheet-header-cell.sticky-date {
    position:sticky;
    left:0;
    z-index:23;
  }

  .sheet-header-cell.sticky-doctor {
    position:sticky;
    left:96px;
    z-index:22;
  }

  .sheet-date-cell,
  .sheet-doctor-cell,
  .sheet-slot-cell,
  .sheet-booking-block {
    grid-row:1;
  }

  .sheet-date-cell {
    position:sticky;
    left:0;
    z-index:32;
    background:#5f5f5f;
    color:#fff;
    border-right:1px solid rgba(255,255,255,0.18);
    border-bottom:1px solid rgba(47,42,58,0.28);
    min-height:64px;
    display:flex;
    align-items:center;
    justify-content:center;
    text-align:center;
    font-size:12px;
    font-weight:800;
    line-height:1.35;
    padding:6px;
  }

  .sheet-date-cell.blank {
    color:transparent;
  }

  .sheet-doctor-cell {
    position:sticky;
    left:96px;
    z-index:31;
    border-right:1px solid rgba(47,42,58,0.22);
    border-bottom:1px solid rgba(47,42,58,0.22);
    min-height:64px;
    display:flex;
    align-items:center;
    padding:8px 10px;
    font-size:12px;
    font-weight:800;
    color:#1f2937;
    background:#fff;
    line-height:1.25;
  }

  .sheet-doctor-color-0 { background:#ffdf6b; }
  .sheet-doctor-color-1 { background:#f5a0a6; }
  .sheet-doctor-color-2 { background:#75a9d9; }
  .sheet-doctor-color-3 { background:#f7f7f7; }
  .sheet-doctor-color-4 { background:#c8e6c9; }
  .sheet-doctor-color-5 { background:#e9d5ff; }

  .sheet-slot-cell {
    position:relative;
    z-index:1;
    border-right:1px solid rgba(47,42,58,0.17);
    border-bottom:1px solid rgba(47,42,58,0.20);
    min-height:64px;
    background:#fff;
  }

  .sheet-doctor-row:hover .sheet-slot-cell { background:#fffafd; }

  .sheet-day-start .sheet-date-cell,
  .sheet-day-start .sheet-doctor-cell,
  .sheet-day-start .sheet-slot-cell {
    border-top:2px solid rgba(47,42,58,0.30);
  }

  .sheet-booking-block {
    z-index:8;
    align-self:stretch;
    margin:4px 3px;
    border-radius:6px;
    border:1px solid rgba(47,42,58,0.24);
    min-height:54px;
    padding:5px 6px;
    overflow:hidden;
    cursor:pointer;
    font-size:11px;
    line-height:1.18;
    font-weight:800;
    color:#111827;
    display:flex;
    align-items:center;
    justify-content:center;
    text-align:center;
    box-shadow:none;
    word-break:break-word;
  }

  .sheet-booking-block:hover {
    filter: brightness(0.98);
    box-shadow:0 6px 14px rgba(0,0,0,0.12);
  }

  .sheet-booking-sub {
    display:block;
    font-size:10px;
    font-weight:700;
    margin-top:2px;
    line-height:1.15;
  }

  .sheet-booking-online { background:#8fb9f4; }
  .sheet-booking-phone { background:#ffdd65; }
  .sheet-booking-facebook,
  .sheet-booking-messenger { background:#ffd86a; }
  .sheet-booking-instagram { background:#f6a3d7; }
  .sheet-booking-walkin { background:#ffc266; }
  .sheet-booking-pending { background:#f7b2b5; }
  .sheet-booking-completed { background:#8bb8ff; }
  .sheet-booking-cancelled { background:#e5e7eb; color:#6b7280; text-decoration:line-through; }

  .sheet-empty-state { padding:28px; text-align:center; color:var(--muted); font-size:13px; }

  /* Day cell merge fix: one continuous date block per day, not split by doctor rows */
  .sheet-day-grid {
    display: grid;
    grid-template-columns: 96px 132px repeat(22, 80px);
    position: relative;
  }

  .sheet-day-grid .sheet-date-cell {
    grid-column: 1;
    z-index: 32;
    min-height: auto;
    height: 100%;
    border-bottom: 1px solid rgba(47,42,58,0.28);
  }

  .sheet-day-grid .sheet-doctor-cell,
  .sheet-day-grid .sheet-slot-cell {
    min-height: 64px;
  }

  .sheet-day-grid.day-start .sheet-date-cell,
  .sheet-day-grid.day-start .sheet-doctor-cell,
  .sheet-day-grid.day-start .sheet-slot-cell {
    border-top: 2px solid rgba(47,42,58,0.30);
  }

  @media (max-width: 768px) {
    .sheet-day-grid {
      grid-template-columns: 82px 118px repeat(22, 76px);
    }
  }


  @media (max-width: 768px) {
    .calendar-view-actions,
    .calendar-month-control { width:100%; justify-content:flex-start; }
    .sheet-calendar-wrap { height:calc(100vh - 245px); min-height:360px; max-height:calc(100vh - 245px); }
    .sheet-header-row,
    .sheet-doctor-row { grid-template-columns: 82px 118px repeat(22, 76px); }
    .sheet-header-cell.sticky-doctor,
    .sheet-doctor-cell { left:82px; }
  }

  /* Excel-style single-day schedule: time rows × doctor columns */
  .day-sheet-wrap {
    height:calc(100vh - 230px);
    min-height:440px;
    overflow:auto;
    border:1px solid var(--border-soft);
    border-radius:14px;
    background:#fff;
    box-shadow:0 4px 16px rgba(120,100,170,.05);
  }

  .day-sheet-grid {
    display:grid;
    position:relative;
    width:100%;
    align-items:stretch;
  }

  .day-sheet-corner,
  .day-sheet-doctor,
  .day-sheet-time,
  .day-sheet-slot {
    border-right:1px solid rgba(47,42,58,.17);
    border-bottom:1px solid rgba(47,42,58,.18);
  }

  .day-sheet-corner {
    position:sticky;
    top:0;
    left:0;
    z-index:70;
    display:flex;
    align-items:center;
    justify-content:center;
    background:#dceff5;
    color:var(--dark);
    font-size:12px;
    font-weight:900;
  }

  .day-sheet-doctor {
    position:sticky;
    top:0;
    z-index:60;
    display:flex;
    align-items:center;
    justify-content:center;
    text-align:center;
    padding:6px 8px;
    color:#1f2937;
    font-size:12px;
    font-weight:900;
  }

  .day-sheet-time {
    position:sticky;
    left:0;
    z-index:50;
    display:flex;
    align-items:center;
    justify-content:center;
    background:#f5f7f9;
    color:#4b5563;
    font-size:11px;
    font-weight:800;
  }

  .day-sheet-slot {
    position:relative;
    z-index:1;
    min-width:0;
    min-height:34px;
    background:#fff;
    cursor:text;
  }
  .day-sheet-slot:hover { background:#fff7fb; }
  .day-sheet-slot:focus {
    z-index:20;
    outline:2px solid var(--secondary);
    outline-offset:-2px;
    background:#fff8fc;
  }
  .day-sheet-slot.calendar-inline-active {
    z-index:35 !important;
    background:#fff8fc !important;
    overflow:hidden !important;
  }
  .day-sheet-slot .calendar-inline-editor {
    width:100%;
    min-height:220px;
    grid-template-columns:minmax(100px,1fr) minmax(90px,1fr);
  }

  .day-sheet-booking {
    z-index:10;
    margin:2px 3px;
    padding:4px 6px;
    border:1px solid rgba(47,42,58,.22);
    border-radius:6px;
    overflow:hidden;
    cursor:pointer;
    color:#111827;
    font-size:10px;
    line-height:1.15;
    display:flex;
    flex-direction:column;
    justify-content:center;
    gap:2px;
    box-shadow:0 2px 5px rgba(0,0,0,.07);
  }
  .day-sheet-booking strong {
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
    font-size:11px;
  }
  .day-sheet-booking span {
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
  }

  @media (max-width: 768px) {
    .day-sheet-wrap { height:calc(100vh - 250px); min-height:360px; }
    .day-sheet-grid { width:max-content; }
  }

  .report-toolbar {
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:12px;
    flex-wrap:wrap;
    margin-bottom:20px;
  }

  .report-range-group,
  .report-actions {
    display:flex;
    gap:8px;
    flex-wrap:wrap;
  }

  .report-range-btn,
  .report-action-btn {
    padding:10px 14px;
    font-size:13px;
    font-weight:700;
    border-radius:12px;
    cursor:pointer;
    border:1px solid var(--border-soft);
    background:white;
    color:var(--mid);
    transition:all 0.15s;
  }

  .report-range-btn:hover,
  .report-action-btn:hover {
    border-color: var(--secondary);
    color: var(--secondary);
  }

  .report-range-btn.active {
    background: var(--gradient-brand);
    color:white;
    border-color: transparent;
  }

  .chart-wrap {
    padding: 20px;
    height: 320px;
  }

  .report-grid-2 {
    display:grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap:20px;
    margin-bottom:20px;
  }

  .report-grid-3 {
    display:grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap:20px;
    margin-bottom:20px;
  }

  .report-chart-subtitle {
    font-size:12px;
    color:var(--muted);
    margin-top:4px;
  }

  .insight-list {
    display:grid;
    gap:12px;
    padding:20px;
  }

  .insight-item {
    padding:14px 16px;
    background:linear-gradient(135deg, rgba(193,0,198,0.05), rgba(106,106,244,0.06));
    border:1px solid var(--border-soft);
    border-radius:14px;
    font-size:13px;
    line-height:1.6;
    color:var(--dark);
  }

  .report-empty {
    padding:26px 20px;
    font-size:13px;
    color:var(--muted);
    text-align:center;
  }

  .heatmap-wrap {
    padding:20px;
    overflow:auto;
  }

  .heatmap-grid {
    display:grid;
    grid-template-columns: 110px repeat(13, minmax(64px, 1fr));
    gap:8px;
    min-width: 980px;
  }

  .heatmap-head,
  .heatmap-label,
  .heatmap-cell {
    border-radius:12px;
    text-align:center;
    font-size:12px;
    padding:10px 8px;
    border:1px solid var(--border-soft);
  }

  .heatmap-head,
  .heatmap-label {
    background:#FBF8FD;
    font-weight:700;
    color:var(--mid);
  }

  .heatmap-label {
    display:flex;
    align-items:center;
    justify-content:center;
    min-height:54px;
  }

  .heatmap-cell {
    min-height:54px;
    display:flex;
    align-items:center;
    justify-content:center;
    font-weight:700;
    color:var(--dark);
  }

  .heatmap-level-0 { background:#ffffff; }
  .heatmap-level-1 { background:rgba(193,0,198,0.08); }
  .heatmap-level-2 { background:rgba(193,0,198,0.16); }
  .heatmap-level-3 { background:rgba(193,0,198,0.24); }
  .heatmap-level-4 { background:rgba(193,0,198,0.34); color:#7b007b; }

  .report-table-note {
    padding:0 20px 16px;
    font-size:12px;
    color:var(--muted);
  }


  .service-picker-box {
    border: 1px solid #E7DDF3;
    border-radius: 12px;
    background: #FCFAFE;
    padding: 10px;
  }

  .service-search-input { margin-bottom: 10px; }

  .service-check-list {
    max-height: 210px;
    overflow-y: auto;
    display: grid;
    gap: 6px;
  }

  .service-check-item {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    padding: 9px 10px;
    border: 1px solid var(--border-soft);
    border-radius: 10px;
    background: white;
    cursor: pointer;
    font-size: 13px;
    line-height: 1.35;
  }

  .service-check-item:hover { border-color: var(--secondary); }
  .service-check-item input { width: auto; margin-top: 2px; }
  .service-check-meta { font-size: 11px; color: var(--muted); margin-top: 2px; }
  .selected-services-text { margin-top: 8px; font-size: 12px; color: var(--mid); line-height: 1.5; }
  .booking-service-edit-row { display: grid; grid-template-columns: 28px 1fr; gap: 8px; align-items: start; padding: 8px 0; border-bottom: 1px solid var(--border-soft); }
  .booking-service-edit-row input { width: auto !important; margin-top: 2px; }


  .product-picker-box {
    border: 1px solid #E7DDF3;
    border-radius: 12px;
    background: #FCFAFE;
    padding: 10px;
  }

  .product-search-input { margin-bottom: 10px; }

  .product-check-list {
    max-height: 190px;
    overflow-y: auto;
    display: grid;
    gap: 6px;
  }

  .product-check-item {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 8px 10px;
    border: 1px solid var(--border-soft);
    border-radius: 10px;
    background: white;
    cursor: pointer;
    font-size: 13px;
    line-height: 1.35;
  }

  .product-check-item:hover { border-color: var(--secondary); }
  .product-check-item input { width: auto; margin-top: 2px; }
  .product-check-meta { font-size: 11px; color: var(--muted); margin-top: 2px; }
  .selected-products-text { margin-top: 8px; font-size: 12px; color: var(--mid); line-height: 1.5; }
  .product-qty-row { display: grid; grid-template-columns: 1fr 90px; gap: 10px; align-items: center; }
  .product-qty-input { width: 90px !important; padding: 8px 10px !important; font-size: 13px !important; }
  .stock-low { color: var(--red); font-weight: 700; }
  .stock-ok { color: var(--success); font-weight: 700; }
  .booking-product-edit-row { display: grid; grid-template-columns: 1fr 90px; gap: 10px; align-items: center; padding: 8px 0; border-bottom: 1px solid var(--border-soft); }
  .product-category-row td { background:#f2eee8; color:var(--primary); font-weight:800; font-size:15px; padding:13px 14px; border-top:2px solid #ded4c8; }
  .category-actions { float:right; display:flex; gap:6px; }
  .permission-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }
  .permission-item { display:flex; gap:9px; align-items:flex-start; border:1px solid var(--border-soft); border-radius:9px; padding:10px; }
  .permission-item input { width:auto; margin-top:2px; }
  .role-chip { font-size:11px; padding:3px 8px; border-radius:999px; background:#eee7dd; color:var(--primary); }
  .password-field { position:relative; display:block; width:100%; }
  .password-field > input { padding-right:46px !important; }
  .password-toggle { position:absolute; right:8px; top:50%; transform:translateY(-50%); width:34px; height:34px; padding:0; border:0; border-radius:8px; background:transparent; color:var(--muted); display:flex; align-items:center; justify-content:center; cursor:pointer; z-index:2; }
  .password-toggle:hover, .password-toggle.is-visible { background:#f0e9f4; color:var(--primary); }
  .password-toggle svg { width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; pointer-events:none; }

  @media (max-width: 980px) {
    .report-grid-2,
    .report-grid-3 {
      grid-template-columns: 1fr;
    }
  }

  .working-hours-note {
    padding: 0 22px 18px;
    color: var(--muted);
    font-size: 12px;
    line-height: 1.6;
  }

  .working-hours-list {
    display: grid;
    gap: 12px;
    padding: 22px;
  }

  .working-hours-row {
    display: grid;
    grid-template-columns: 130px 120px 1fr 1fr 1fr 1fr 1fr;
    gap: 10px;
    align-items: end;
    padding: 14px;
    border: 1px solid var(--border-soft);
    border-radius: 14px;
    background: #FCFAFE;
  }

  .working-day-name {
    font-weight: 800;
    color: var(--dark);
    padding-bottom: 12px;
  }

  .working-hours-row label {
    display: block;
    font-size: 10px;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: var(--muted);
    margin-bottom: 5px;
    font-weight: 800;
  }

  .working-hours-row input,
  .working-hours-row select {
    width: 100%;
    padding: 10px 11px;
    font-size: 13px;
    color: var(--dark);
    background: white;
    border: 1px solid #E7DDF3;
    border-radius: 11px;
    outline: none;
  }

  .working-hours-row input:focus,
  .working-hours-row select:focus {
    border-color: var(--primary);
    box-shadow: 0 0 0 4px rgba(193, 0, 198, 0.08);
  }

  @media (max-width: 1180px) {
    .working-hours-row {
      grid-template-columns: 1fr 1fr;
    }

    .working-day-name {
      grid-column: 1 / -1;
      padding-bottom: 0;
    }
  }

  @media (max-width: 620px) {
    .working-hours-row {
      grid-template-columns: 1fr;
    }
  }



  .admin-security-note {
    padding: 0 22px 18px;
    color: var(--muted);
    font-size: 12px;
    line-height: 1.6;
  }

  .admin-security-divider {
    grid-column: 1 / -1;
    height: 1px;
    background: var(--border-soft);
    margin: 4px 0;
  }

  .quick-customer-hint {
    font-size: 12px;
    color: var(--muted);
    line-height: 1.5;
    padding: 10px 12px;
    border: 1px dashed var(--border-soft);
    border-radius: 12px;
    background: #FFFDFE;
  }

  .quick-customer-card {
    display: none;
    margin-top: 8px;
    padding: 10px 12px;
    border: 1px solid var(--border-soft);
    border-radius: 12px;
    background: linear-gradient(135deg, rgba(46,139,87,0.06), rgba(106,106,244,0.06));
    font-size: 12px;
    color: var(--mid);
    line-height: 1.45;
  }

  .quick-customer-card.active {
    display: block;
  }

  .quick-customer-card strong {
    color: var(--dark);
  }

  .quick-customer-actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-top: 8px;
  }

  .quick-mini-btn {
    border: 1px solid var(--border-soft);
    background: white;
    border-radius: 10px;
    padding: 6px 10px;
    font-size: 12px;
    font-weight: 700;
    color: var(--secondary);
    cursor: pointer;
  }

  .quick-mini-btn:hover {
    border-color: var(--secondary);
    background: #F8F7FF;
  }

  .discount-price-active {
    display: inline-flex;
    gap: 6px;
    align-items: center;
    font-size: 11px;
    font-weight: 800;
    color: var(--success);
    background: var(--success-light);
    border-radius: 999px;
    padding: 4px 9px;
    margin-top: 4px;
  }

  .price-old {
    color: var(--muted);
    text-decoration: line-through;
    font-weight: 600;
    margin-right: 6px;
  }

  .price-discount {
    color: var(--success);
    font-weight: 900;
  }

  .service-price-type-select {
    margin-top: 7px;
    padding: 7px 9px !important;
    font-size: 12px !important;
    border-radius: 9px !important;
    background: #fff !important;
  }

  * { min-width: 0; }
  img, svg { max-width: 100%; }
  .table-wrap { overflow-x: auto; }
  .booking-bulk-actions { display:flex; gap:8px; flex-wrap:wrap; align-items:center; }
  .booking-select-cell { width:42px; text-align:center; }
  .booking-select-cell input { width:18px; height:18px; cursor:pointer; }
  tr.booking-hidden-row { opacity:.68; background:#f7f3f9; }
  @media (max-width: 900px) {
    .content { padding-left:14px; padding-right:14px; }
    .table-header, .booking-toolbar { align-items:stretch; }
    .booking-search-wrap { flex:1 1 100%; }
    .modal { width:min(94vw,760px); max-height:92vh; overflow:auto; }
    .modal-form-row { grid-template-columns:minmax(0,1fr); }
  }
  @media (max-width: 560px) {
    .topbar { gap:8px; }
    .topbar-actions { gap:5px; }
    .topbar-actions .btn-outline { padding:9px 10px; font-size:12px; }
    .stats { grid-template-columns:repeat(2,minmax(0,1fr)); }
    .table-header > *, .booking-sort-wrap, .booking-sort-select { width:100%; }
    .booking-bulk-actions .btn-outline { flex:1 1 calc(50% - 8px); }
  }