:root { 
      --bg: linear-gradient(135deg, #0f172a 0%, #1e293b 60%, #334155 100%); 
      --card-bg: #1e293b; 
      --text: #f1f5f9; 
      --text-light: #cbd5e1; 
      --accent: #60a5fa; 
      --accent-hover: #3b82f6; 
      --success: #10b981; 
      --warning: #f59e0b; 
      --danger: #ef4444; 
      --border: #334155; 
      --shadow: rgba(0,0,0,0.5); 
    }
    body.light-mode { 
      --bg: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 100%); 
      --card-bg: #ffffff; 
      --text: #1e293b; 
      --text-light: #475569; 
      --accent: #3b82f6; 
      --accent-hover: #2563eb; 
      --border: #e2e8f0; 
      --shadow: rgba(0,0,0,0.1); 
    }
    body { 
      margin:0; 
      padding:0; 
      font-family:'Segoe UI',sans-serif; 
      background:var(--bg); 
      color:var(--text); 
      min-height:100vh; 
      transition:all 0.4s; 
    }
    .container { 
      max-width:1280px; 
      margin:0 auto; 
      padding:20px; 
    }
    .theme-toggle { 
      position:fixed; 
      top:20px; 
      right:20px; 
      z-index:1000; 
      width:60px; 
      height:60px; 
      border-radius:50%; 
      background:var(--card-bg); 
      border:3px solid var(--border); 
      box-shadow:0 8px 30px var(--shadow); 
      display:flex; 
      align-items:center; 
      justify-content:center; 
      cursor:pointer; 
      font-size:26px; 
      color:#fbbf24; 
    }
    .header { 
      background:rgba(30,41,59,0.95); 
      backdrop-filter:blur(12px); 
      border-radius:24px; 
      padding:24px; 
      margin-bottom:30px; 
      text-align:center; 
      box-shadow:0 20px 50px var(--shadow); 
      border:1px solid var(--border); 
      display:flex; 
      align-items:center; 
      justify-content:center; 
      gap:16px; 
    }
    .logo { 
      height:90px; 
      border-radius:16px; 
      box-shadow:0 10px 30px var(--shadow); 
    }
    .gym-title { 
      font-size:3rem; 
      font-weight:900; 
      background:linear-gradient(to right,#60a5fa,#c084fc); 
      -webkit-background-clip:text; 
      -webkit-text-fill-color:transparent; 
      margin:0; 
    }
    .nav-tabs { 
      display:flex; 
      flex-wrap:wrap; 
      gap:10px; 
      margin-bottom:30px; 
      justify-content:center; 
    }
    .nav-tab { 
      background:var(--card-bg); 
      border:1px solid var(--border); 
      color:var(--text-light); 
      padding:12px 20px; 
      border-radius:14px; 
      cursor:pointer; 
      font-weight:600; 
      transition:all 0.3s; 
      box-shadow:0 6px 20px var(--shadow); 
      min-width:120px; 
      text-align:center; 
      font-size:0.95rem; 
    }
    .nav-tab:hover { 
      background:var(--accent); 
      color:white; 
      transform:translateY(-4px); 
    }
    .nav-tab.active { 
      background:var(--accent); 
      color:white; 
    }
    .tab-content { 
      display:none; 
      background:var(--card-bg); 
      border:1px solid var(--border); 
      border-radius:20px; 
      padding:30px; 
      box-shadow:0 20px 60px var(--shadow); 
    }
    .tab-content.active { 
      display:block; 
    }
    .form-grid { 
      display:grid; 
      grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); 
      gap:16px; 
    }
    .form-input, .search-input { 
      width:100%; 
      padding:14px 18px; 
      background:#334155; 
      border:1px solid var(--border); 
      border-radius:14px; 
      color:white; 
      font-size:15px; 
    }
    .light-mode .form-input, .light-mode .search-input { 
      background:#f8fafc; 
      color:#1e293b; 
    }
    .form-input:focus, .search-input:focus { 
      outline:none; 
      border-color:var(--accent); 
      box-shadow:0 0 0 4px rgba(59,130,246,0.3); 
    }
    .btn { 
      background:var(--accent); 
      color:white; 
      border:none; 
      padding:10px 20px; 
      border-radius:12px; 
      cursor:pointer; 
      font-weight:600; 
      transition:all 0.3s; 
      box-shadow:0 6px 20px rgba(59,130,246,0.4); 
      font-size:0.9rem; 
    }
    .btn:hover { 
      background:var(--accent-hover); 
      transform:translateY(-2px); 
    }
    .btn:disabled {
      opacity: 0.6;
      cursor: not-allowed;
      transform: none;
    }
    .btn-success { 
      background:var(--success); 
    }
    .btn-warning { 
      background:var(--warning); 
    }
    .subscription-cards { 
      display:grid; 
      grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); 
      gap:16px; 
      margin:24px 0; 
    }
    .subscription-card { 
      background:linear-gradient(135deg,#1e40af,#7c3aed); 
      color:white; 
      padding:20px 14px; 
      border-radius:18px; 
      text-align:center; 
      cursor:pointer; 
      transition:all 0.4s; 
      border:4px solid transparent; 
      box-shadow:0 10px 25px rgba(0,0,0,0.4); 
    }
    .subscription-card:hover { 
      transform:translateY(-6px) scale(1.03); 
    }
    .subscription-card.selected { 
      border-color:#fbbf24; 
      box-shadow:0 0 30px rgba(251,191,36,0.7); 
    }
    .member-card { 
      background:var(--card-bg); 
      border:2px solid var(--border); 
      border-radius:18px; 
      padding:20px; 
      margin-bottom:16px; 
      box-shadow:0 10px 30px var(--shadow); 
    }
    .note-banner { 
      background:linear-gradient(135deg,#7f1d1d,#991b1b); 
      color:#ffcccc; 
      padding:10px 16px; 
      border-radius:12px; 
      font-weight:bold; 
      text-align:center; 
      margin:12px 0; 
      border:2px solid #ef4444; 
      font-size:0.85rem; 
    }
    .status-badge { 
      padding:4px 10px; 
      border-radius:10px; 
      font-size:0.75rem; 
      font-weight:700; 
    }
    .status-active { 
      background:#065f46; 
      color:#6ee7b7; 
    }
    .status-expired { 
      background:#7f1d1d; 
      color:#fca5a5; 
    }
    .status-paused { 
      background:#78350f; 
      color:#fdba74; 
    }
    .dashboard-stats { 
      display:grid; 
      grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); 
      gap:20px; 
      margin-bottom:32px; 
    }
    .stat-card { 
      background:linear-gradient(135deg,#1e40af,#3b82f6); 
      padding:24px; 
      border-radius:20px; 
      text-align:center; 
      box-shadow:0 12px 35px rgba(59,130,246,0.5); 
      color:white; 
      cursor:default; 
    }
    #expiringMembersCard { 
      background:linear-gradient(135deg,#ea580c,#f97316); 
      cursor:pointer; 
    }
    .toast { 
      position:fixed; 
      top:20px; 
      right:20px; 
      background:#10b981; 
      color:white; 
      padding:14px 28px; 
      border-radius:14px; 
      box-shadow:0 10px 30px var(--shadow); 
      z-index:1000; 
      transform:translateX(400px); 
      transition:transform 0.4s; 
      font-weight:600; 
    }
    .toast.show { 
      transform:translateX(0); 
    }
    .toast.error { 
      background:#ef4444; 
    }
    .spinner { 
      border:4px solid #f3f3f3; 
      border-top:4px solid white; 
      border-radius:50%; 
      width:28px; 
      height:28px; 
      animation:spin 1s linear infinite; 
      margin:0 auto; 
    }
    @keyframes spin { 
      0%{transform:rotate(0deg)} 
      100%{transform:rotate(360deg)} 
    }
    @keyframes fadeIn { 
      from {opacity:0; transform:translateY(10px);} 
      to {opacity:1; transform:translateY(0);} 
    }
    .animate-fadeIn { 
      animation: fadeIn 0.4s ease-out; 
    }
    .search-member-card {
      background:var(--card-bg); 
      border:2px solid var(--border); 
      border-radius:18px; 
      padding:16px; 
      margin-bottom:12px;
      cursor:pointer; 
      transition:all 0.3s; 
      box-shadow:0 8px 25px var(--shadow); 
      display:flex; 
      align-items:center; 
      justify-content:space-between;
    }
    .search-member-card:hover { 
      transform:translateY(-4px); 
      box-shadow:0 12px 35px var(--shadow); 
      border-color:var(--accent); 
    }
    .search-card-content { 
      display:flex; 
      width:100%; 
      justify-content:space-between; 
      align-items:center; 
    }
    .search-card-info { 
      display:grid; 
      gap:4px; 
    }
    .search-name { 
      font-size:1.25rem; 
      font-weight:bold; 
    }
    .search-id { 
      font-size:0.9rem; 
      color:var(--text-light); 
    }
    .search-sub { 
      font-size:0.9rem; 
      color:var(--text-light); 
    }
    .search-end { 
      font-size:0.9rem; 
      color:#fbbf24; 
      font-weight:600; 
    }
    .search-arrow { 
      font-size:2rem; 
      color:var(--accent); 
      font-weight:bold; 
      transition:transform 0.3s; 
      width:36px; 
      text-align:center; 
    }
    .search-member-card:hover .search-arrow { 
      transform:scale(1.3); 
    }
    .checkin-pick-list {
      display: grid;
      gap: 12px;
    }
    .checkin-pick-card {
      width: 100%;
      text-align: left;
      background: var(--card-bg);
      border: 2px solid var(--border);
      border-radius: 14px;
      padding: 14px 16px;
      cursor: pointer;
      color: var(--text);
      transition: all 0.2s ease;
    }
    .checkin-pick-card:hover {
      border-color: var(--accent);
      transform: translateY(-2px);
      box-shadow: 0 10px 24px var(--shadow);
    }
    .checkin-pick-name {
      font-size: 1.05rem;
      font-weight: 800;
      margin-bottom: 6px;
    }
    .checkin-pick-meta {
      font-size: 0.9rem;
      color: var(--text-light);
      margin-bottom: 4px;
    }
    .member-details-card {
      background:var(--card-bg); 
      border:2px solid var(--accent); 
      border-radius:16px; 
      padding:20px; 
      margin:12px 0 20px; 
      box-shadow:0 12px 40px rgba(96,165,250,0.3);
    }
    .edit-context {
      background: rgba(96, 165, 250, 0.12);
      border: 1px solid rgba(96, 165, 250, 0.45);
      border-radius: 12px;
      padding: 10px 12px;
      margin-bottom: 14px;
      font-size: 0.92rem;
      color: var(--text-light);
    }
    .edit-grid {
      display: grid;
      grid-template-columns: 1fr;
      gap: 10px;
    }
    .edit-field {
      display: flex;
      flex-direction: column;
      gap: 4px;
    }
    .edit-field-label {
      font-size: 0.88rem;
      font-weight: 700;
      color: var(--text-light);
      line-height: 1.2;
      margin: 0;
    }
    .edit-note-input {
      min-height: 70px;
      resize: vertical;
    }
    .edit-grid .form-input {
      min-width: 0;
      padding: 10px 12px;
      font-size: 14px;
    }
    .edit-modal {
      position: fixed;
      inset: 0;
      background: rgba(2, 6, 23, 0.72);
      z-index: 2400;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 16px;
      backdrop-filter: blur(3px);
    }
    .edit-modal-card {
      width: min(520px, 92vw);
      max-height: 90vh;
      overflow: auto;
      background: var(--card-bg);
      border: 2px solid #3b82f6;
      border-radius: 16px;
      box-shadow: 0 26px 70px var(--shadow);
      padding: 14px;
    }
    .edit-modal-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 8px;
      margin-bottom: 10px;
    }
    .edit-modal-title {
      margin: 0;
      font-size: 1.18rem;
      font-weight: 800;
      color: #60a5fa;
    }
    .edit-modal-close {
      border: 1px solid var(--border);
      background: transparent;
      color: var(--text-light);
      border-radius: 10px;
      width: 34px;
      height: 34px;
      font-size: 1.35rem;
      line-height: 1;
      cursor: pointer;
    }
    .edit-actions {
      margin-top: 12px;
      display: flex;
      gap: 10px;
      justify-content: center;
      flex-wrap: wrap;
    }
    #loginScreen { 
      position:fixed; 
      inset:0; 
      background:var(--bg); 
      display:flex; 
      align-items:center; 
      justify-content:center; 
      z-index:9999; 
    }
    .login-box { 
      background:rgba(30,41,59,0.95); 
      padding:50px 70px; 
      border-radius:28px; 
      text-align:center; 
      box-shadow:0 30px 80px rgba(0,0,0,0.8); 
      border:1px solid #334155; 
    }
    #adminPassword { 
      width:100%; 
      padding:18px; 
      font-size:1.4rem; 
      text-align:center; 
      letter-spacing:8px; 
      background:#334155; 
      border:2px solid #475569; 
      border-radius:18px; 
      color:white; 
      margin-bottom:24px; 
    }
    #expiringSoonSection { 
      background:var(--card-bg); 
      border:2px solid #f59e0b; 
      border-radius:20px; 
      padding:24px; 
      margin-top:32px; 
      display:none; 
    }
    
    .modal {
      display: none;
      position: fixed;
      inset: 0;
      background: rgba(0, 0, 0, 0.8);
      z-index: 2000;
      align-items: center;
      justify-content: center;
      padding: 20px;
      backdrop-filter: blur(4px);
    }
    .modal.active {
      display: flex;
    }
    .modal-content {
      background: var(--card-bg);
      border-radius: 24px;
      padding: 32px;
      max-width: 600px;
      width: 100%;
      box-shadow: 0 25px 60px rgba(0, 0, 0, 0.6);
      border: 2px solid var(--border);
      max-height: 90vh;
      overflow-y: auto;
    }
    .modal-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 24px;
    }
    .modal-header h3 {
      font-size: 1.8rem;
      font-weight: 800;
      margin: 0;
      background: linear-gradient(to right, #60a5fa, #c084fc);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
    }
    .modal-close {
      background: none;
      border: none;
      font-size: 2rem;
      color: var(--text-light);
      cursor: pointer;
      padding: 0;
      width: 36px;
      height: 36px;
      display: flex;
      align-items: center;
      justify-content: center;
      border-radius: 8px;
      transition: all 0.2s;
    }
    .modal-close:hover {
      background: var(--border);
      color: var(--text);
    }
    .checkbox-group {
      display: flex;
      flex-direction: column;
      gap: 12px;
      margin: 20px 0;
      padding: 16px;
      background: var(--border);
      border-radius: 12px;
    }
    .checkbox-item {
      display: flex;
      align-items: center;
      gap: 10px;
      cursor: pointer;
    }
    .checkbox-item input[type="checkbox"] {
      width: 20px;
      height: 20px;
      cursor: pointer;
      accent-color: var(--accent);
    }
    .checkbox-item label {
      cursor: pointer;
      font-size: 1rem;
      font-weight: 600;
    }
    textarea.form-input {
      min-height: 120px;
      resize: vertical;
      font-family: inherit;
    }
    .email-actions {
      display: flex;
      gap: 12px;
      margin-top: 20px;
      flex-wrap: wrap;
    }
    
    @media (max-width:768px) { 
      .gym-title{font-size:2.3rem} 
      .header{flex-direction:column} 
      .form-grid{grid-template-columns:1fr} 
      .edit-grid{grid-template-columns:1fr}
      .edit-modal-card{width:min(460px,92vw); padding:12px}
      .edit-actions .btn { width: 100%; }
      .modal-content {
        padding: 24px;
      }
      .email-actions {
        flex-direction: column;
      }
      .email-actions .btn {
        width: 100%;
      }
    }