@import url('https://fonts.googleapis.com/css2?family=Inter:opsz,wght@14..32,400;14..32,500;14..32,600;14..32,700&display=swap');
body { font-family: 'Inter', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; background-color: #f0f4f8; padding: 20px; color: #333; transition: background-color 0.3s, color 0.3s; margin: 0; line-height: 1.6; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
      .container { max-width: 650px; background: white; border-radius: 10px; box-shadow: 0 4px 12px rgba(0,0,0,0.1); margin: auto; overflow: hidden; transition: background-color 0.3s; margin-bottom: 30px; }
      
      h2 { position: relative; text-align: center; background-color: #0F9D58; color: white; margin: 0; padding: 15px 20px; letter-spacing: 1px; display: flex; justify-content: center; align-items: center; }
      .theme-toggle-btn { position: absolute; right: 20px; background: rgba(255,255,255,0.2); border: 1px solid white; color: white; padding: 6px 12px; border-radius: 20px; cursor: pointer; font-size: 12px; font-weight: bold; transition: background 0.2s; }
      .theme-toggle-btn:hover { background: rgba(255,255,255,0.4); }
      
      .nav-bar { background-color: #0b8043; padding: 10px 20px; display: flex; justify-content: space-between; align-items: center; }
      .nav-btn { background: none; border: 1px solid white; color: white; padding: 6px 15px; border-radius: 4px; cursor: pointer; font-size: 13px; font-weight: bold; transition: 0.2s; display:inline-flex; align-items:center; gap:6px; }
      .nav-btn:hover { background: white; color: #0b8043; }

      .form-content { padding: 15px 30px 30px; }
      .form-group { margin-bottom: 20px; }
      label { display: block; font-weight: 600; margin-bottom: 6px; color: #4a5568; transition: color 0.3s; }
      input[type="text"], input[type="password"], input[type="number"], select, textarea { font-family: 'Inter', 'Segoe UI', sans-serif; width: 100%; padding: 10px 12px; border: 1px solid #cbd5e0; border-radius: 6px; box-sizing: border-box; font-size: 15px; background-color: #fff; color: #333; transition: 0.3s; letter-spacing: 0.01em; }
      .force-upper { text-transform: uppercase; }
      ::placeholder { text-transform: none !important; color: #a0aec0; }
      input:focus, select:focus, textarea:focus { outline: none; border-color: #0F9D58; box-shadow: 0 0 0 3px rgba(15, 157, 88, 0.2); }
      
      .password-wrapper { position: relative; display: flex; align-items: center; }
      .toggle-password { position: absolute; right: 12px; background: none; border: none; padding: 0; cursor: pointer; color: #a0aec0; display: flex; align-items: center; justify-content: center; transition: color 0.2s; }
      .toggle-password:hover { color: #4a5568; }
      .checkbox-wrapper { display: flex; align-items: center; gap: 8px; margin-top: 10px; }
      .checkbox-wrapper input[type="checkbox"] { width: 18px; height: 18px; cursor: pointer; }

      .accordion-container { border-radius: 6px; border: 1px solid #cbd5e0; overflow: hidden; margin-bottom: 20px; }
      .acc-group { background: #f8fafc; border-bottom: 1px solid #cbd5e0; }
      .acc-group:last-child { border-bottom: none; }
      .acc-title { padding: 14px 15px; font-weight: 600; color: #2b6cb0; cursor: pointer; list-style: none; display: flex; justify-content: space-between; align-items: center; user-select: none; font-size: 15px; text-transform: uppercase; }
      .acc-title::-webkit-details-marker { display: none; }
      .acc-title:after { content: '▼'; font-size: 12px; transition: transform 0.3s; color: #718096; }
      details[open] .acc-title:after { transform: rotate(180deg); }
      details[open] .acc-title { background-color: #ebf4ff; }
      .acc-content { padding: 15px; display: flex; flex-direction: column; gap: 10px; background: white; border-top: 1px solid #e2e8f0; }
      .room-item { display: flex; justify-content: space-between; align-items: center; width: 100%; padding: 2px 0; transition: opacity 0.2s; }
      .room-item label { display: flex; align-items: center; gap: 8px; font-weight: 500; cursor: pointer; color: #4a5568; margin-bottom: 0; font-size: 14px; }
      .room-item.disabled { opacity: 0.5; }
      
      .info-btn { background-color: #1a73e8; color: white; border: none; padding: 4px 10px; border-radius: 4px; font-size: 11px; font-weight: bold; cursor: pointer; display: none; transition: background-color 0.2s; }
      .info-btn:hover { background-color: #1557b0; }
      .date-picker-wrap { position:relative; flex:1; }
      .date-picker-wrap input { padding-left:38px; }
      .date-picker-icon { position:absolute; left:12px; top:50%; transform:translateY(-50%); color:#a0aec0; pointer-events:none; display:flex; align-items:center; }
      
      .submit-btn { width: 100%; background-color: #0F9D58; color: white; padding: 14px; border: none; border-radius: 6px; font-size: 16px; cursor: pointer; font-weight: bold; transition: 0.2s; display: flex; justify-content: center; align-items: center; gap: 8px; }
      .submit-btn:hover { background-color: #0b8043; }
      .submit-btn:disabled { background-color: #a0aec0; cursor: not-allowed; }
      .delete-btn { width: 100%; background-color: #e53e3e; color: white; padding: 14px; border: none; border-radius: 6px; font-size: 16px; cursor: pointer; font-weight: bold; transition: 0.2s; margin-top: 10px; display: flex; justify-content: center; align-items: center; gap: 8px; }
      .delete-btn:hover { background-color: #c53030; }

      .row { display: flex; gap: 15px; } .row .form-group { flex: 1; }
      .welcome-text { text-align: center; color: #2d3748; font-size: 18px; margin-bottom: 25px; }
      .menu-grid { display: grid; grid-template-columns: 1fr; gap: 15px; }
      .menu-btn { background-color: #f8fafc; border: 2px solid #e2e8f0; color: #2d3748; padding: 18px; border-radius: 8px; font-size: 15px; font-weight: bold; cursor: pointer; transition: 0.2s; text-align: left; display: flex; align-items: center; gap: 15px; }
      .menu-btn:hover { background-color: #ebf4ff; border-color: #3182ce; color: #2b6cb0; transform: translateY(-2px); box-shadow: 0 4px 6px rgba(0,0,0,0.05); }
      .menu-btn svg { flex-shrink: 0; }
      .menu-btn.disabled { opacity: 0.6; cursor: not-allowed; pointer-events: none; }

      .success { background-color: #c6f6d5; color: #22543d; display: block !important;}
      .error { background-color: #fed7d7; color: #822727; display: block !important;}

      .search-result-item { background: #f8fafc; border: 1px solid #cbd5e0; padding: 12px; border-radius: 6px; margin-bottom: 10px; cursor: pointer; transition: 0.2s; }
      .search-result-item:hover { border-color: #3182ce; background: #ebf4ff; }
      .search-title { font-weight: bold; color: #2b6cb0; margin-bottom: 5px; font-size: 15px; }
      .search-sub { font-size: 13px; color: #4a5568; }

      /* GAYA KHAS UNTUK PROGRAM YG DAH BAYAR & BELUM BAYAR (PAGE 2) */
      .prog-paid { border-left: 4px solid #e53e3e; background-color: #fff5f5; }
      .prog-paid:hover { border-color: #c53030; background-color: #fed7d7; }
      .prog-paid .search-title { color: #c53030; }
      .prog-unpaid { border-left: 4px solid #3182ce; background-color: #f8fafc; }

      /* Ikon SVG Pembantu */
      .icon-sm { width: 14px; height: 14px; vertical-align: middle; margin-right: 4px; margin-top: -2px; }
      .icon-md { width: 18px; height: 18px; vertical-align: middle; margin-right: 5px; margin-top: -2px; }

      /* GAYA DASHBOARD (PAGE 2) */
      .dash-section-title { color: #2b6cb0; border-bottom: 2px solid #e2e8f0; padding-bottom: 5px; margin-top: 30px; font-size: 16px; display: flex; align-items: center; }
      .dash-section-title.red-alert { color: #e53e3e; border-color: #feb2b2; }
      .room-grid-dash { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 10px; }
      .room-badge { padding: 10px; border-radius: 6px; text-align: center; font-size: 13px; line-height: 1.4; border: 1px solid transparent; }
      .badge-available { background-color: #f0fff4; color: #22543d; border-color: #9ae6b4; }
      .badge-booked { background-color: #fff5f5; color: #c53030; border-color: #feb2b2; }
      .badge-locked { background-color: #fffaf0; color: #b7791f; border-color: #f6e05e; }
      .badge-multiple { background-color: #ebf4ff; color: #2b6cb0; border-color: #90cdf4; }

      /* MODAL STYLES */
      .modal-overlay { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.5); justify-content: center; align-items: center; z-index: 1000; backdrop-filter: blur(4px); }
      .modal-box { background: white; padding: 28px 30px; border-radius: 12px; max-width: 480px; width: 90%; box-shadow: 0 20px 60px rgba(0,0,0,0.2); animation: modalFadeIn 0.2s ease; }
      @keyframes modalFadeIn { from { opacity:0; transform:translateY(-20px) scale(0.95); } to { opacity:1; transform:translateY(0) scale(1); } }
      .modal-box h3 { margin-top: 0; color: #1a73e8; border-bottom: 2px solid #e2e8f0; padding-bottom: 12px; text-align: center; font-size: 17px; letter-spacing: 0.5px; }
      .modal-box p { white-space: pre-wrap; font-size: 15px; line-height: 1.6; color: #4a5568; margin: 18px 0; }
      .modal-buttons { display: flex; justify-content: flex-end; gap: 12px; margin-top: 22px; }
      .btn-ok { background-color: #1a73e8; color: white; padding: 10px 24px; border: none; border-radius: 8px; cursor: pointer; font-weight: 600; font-size: 14px; transition: 0.2s; display: inline-flex; align-items: center; gap: 6px;}
      .btn-ok:hover { background-color: #1557b0; transform: translateY(-1px); box-shadow: 0 4px 12px rgba(26,115,232,0.3); }
      .btn-cancel { background-color: #f1f3f4; color: #5f6368; padding: 10px 24px; border: none; border-radius: 8px; cursor: pointer; font-weight: 500; font-size: 14px; transition: 0.2s; display: inline-flex; align-items: center; gap: 6px;}
      .btn-cancel:hover { background-color: #e2e4e6; transform: translateY(-1px); }
      .btn-edit-modal { background-color: #fbbc04; color: #5f3700; padding: 10px 20px; border: none; border-radius: 8px; cursor: pointer; font-weight: 600; font-size: 13px; transition: 0.2s; display: inline-flex; align-items: center; gap: 6px; }
      .btn-edit-modal:hover { background-color: #e5a800; transform: translateY(-1px); }
      /* Prompt Modal */
      .modal-box-prompt { max-width:420px; }
      #promptModalText { font-size:15px; line-height:1.6; color:#4a5568; margin:18px 0 8px; }
      .prompt-input { width:100%; padding:10px 12px; border:1px solid #cbd5e0; border-radius:6px; font-size:15px; box-sizing:border-box; background:#fff; color:#333; font-family:'Inter','Segoe UI',sans-serif; }
      .prompt-buttons { margin-top:24px; }
      /* Info Modal */
      .modal-box-info { max-width:400px; border-top:5px solid #1a73e8; }
      .info-modal-title { color:#1a73e8; margin-bottom:15px; border-bottom:1px solid #e2e8f0; padding-bottom:10px; text-align:left; }
      .info-modal-text { font-size:15px; line-height:1.8; color:#4a5568; margin-bottom:25px; }
      .info-modal-buttons { justify-content:space-between; }
      #infoModalEditBtn { display:inline-flex; align-items:center; gap:5px; }

      /* --- DARK MODE --- */
      body.dark-mode { background-color: #121212; color: #e0e0e0; }
      body.dark-mode .container { background-color: #1e1e1e; box-shadow: 0 4px 12px rgba(0,0,0,0.5); }
      body.dark-mode label, body.dark-mode .welcome-text { color: #cbd5e0; }
      body.dark-mode input, body.dark-mode select, body.dark-mode textarea { background-color: #2d2d2d; color: #fff; border-color: #444; }
      body.dark-mode .menu-btn { background-color: #2d3748; border-color: #4a5568; color: #e2e8f0; }
      body.dark-mode .menu-btn:hover { background-color: #2b6cb0; border-color: #63b3ed; color: #fff; }
      body.dark-mode .modal-box { background-color: #2d2d2d; color: #fff; box-shadow: 0 20px 60px rgba(0,0,0,0.5); }
      body.dark-mode .modal-box h3 { border-bottom-color: #4a5568; }
      body.dark-mode .modal-box p { color: #cbd5e0; }
      body.dark-mode .date-picker-icon { color:#718096; }
      body.dark-mode .toggle-password:hover { color: #e2e8f0; }
      body.dark-mode .accordion-container { border-color: #4a5568; }
      body.dark-mode .acc-group { background: #2d3748; border-bottom-color: #4a5568; }
      body.dark-mode .acc-title { color: #90cdf4; }
      body.dark-mode details[open] .acc-title { background-color: #2a4365; }
      body.dark-mode .acc-content { background: #1e1e1e; border-top-color: #4a5568; }
      body.dark-mode .acc-content label { color: #e2e8f0; }
      body.dark-mode .search-result-item { background: #2d3748; border-color: #4a5568; }
      body.dark-mode .search-result-item:hover { background: #2a4365; border-color: #63b3ed; }
      body.dark-mode .search-sub { color: #a0aec0; }

      body.dark-mode #confirmedListContainer { background-color: #2d3748; border-left-color: #4a5568; }
      body.dark-mode .dash-section-title { color: #90cdf4; border-bottom-color: #4a5568; }
      body.dark-mode .dash-section-title.red-alert { color: #fc8181; border-color: #9b2c2c; }
      body.dark-mode .badge-available { background-color: #1c4532; color: #9ae6b4; border-color: #276749; }
      body.dark-mode .badge-booked { background-color: #742a2a; color: #feb2b2; border-color: #9b2c2c; }
      body.dark-mode .badge-locked { background-color: #744210; color: #ecc94b; border-color: #b7791f; }
      body.dark-mode .badge-multiple { background-color: #2a4365; color: #90cdf4; border-color: #2b6cb0; }
      body.dark-mode .prog-paid { background-color: #742a2a; border-color: #fc8181; }
      body.dark-mode .prog-paid:hover { background-color: #9b2c2c; border-color: #feb2b2; }
      body.dark-mode .prog-paid .search-title { color: #feb2b2; }
      body.dark-mode .prog-unpaid { background-color: #2d3748; border-color: #4a5568; }
      body.dark-mode .admin-cat-card { border-color: #4a5568; background:#1e1e1e; }
      body.dark-mode .admin-cat-header { background-color: #2d3748; border-bottom-color: #4a5568; }
      body.dark-mode .admin-cat-header .cat-label { color: #90cdf4; }
      body.dark-mode .admin-room-item { border-bottom-color: #4a5568; }
      body.dark-mode .admin-room-item .room-name { color: #e2e8f0; }
      body.dark-mode .admin-add-room input { background-color: #2d2d2d; color: #fff; border-color: #444; }
      body.dark-mode #promptModalOverlay .modal-box { background-color: #2d2d2d; }
      body.dark-mode #promptModalText { color: #cbd5e0; }
      body.dark-mode .prompt-input { background-color: #2d2d2d; color: #fff; border-color: #444; }
      body.dark-mode #promptModalOkBtn:disabled { opacity:0.4; }
      body.dark-mode .modal-box-info { border-top-color: #63b3ed; }
      body.dark-mode .info-modal-title { color: #63b3ed; border-bottom-color: #4a5568; }
      body.dark-mode .info-modal-text { color: #cbd5e0; }
      body.dark-mode .icon-btn.edit-icon { background:#d8a203; color:#2d1f00; }
      body.dark-mode .icon-btn.up-down { background:#1a56a0; }
      body.dark-mode .icon-btn.delete-icon { background:#b91c1c; }
      /* ADMIN CARD STYLES */
      .admin-cat-card { border:1px solid #cbd5e0; border-radius:8px; overflow:hidden; background:#f8fafc; transition:border-color 0.2s; }
      .admin-cat-header { display:flex; align-items:center; gap:6px; padding:10px 12px; background:#edf2f7; border-bottom:1px solid #cbd5e0; }
      .admin-cat-header .cat-label { flex:1; font-size:15px; color:#2b6cb0; font-weight:bold; }
      .admin-room-list { padding:8px 12px; }
      .admin-room-item { display:flex; align-items:center; gap:6px; padding:6px 8px; border-bottom:1px solid #e2e8f0; }
      .admin-room-item:last-child { border-bottom:none; }
      .admin-room-item .room-name { flex:1; font-size:14px; color:#4a5568; }
      .admin-add-room { display:flex; gap:8px; padding:8px 0 0; }
      /* Icon buttons in admin cards */
      .icon-btn { display:inline-flex; align-items:center; justify-content:center; width:30px; height:30px; padding:0; border-radius:6px; border:none; cursor:pointer; transition:0.2s; flex-shrink:0; color:#fff; }
      .icon-btn:disabled { opacity:0.4; cursor:not-allowed; }
      .icon-btn.up-down { background:#2b6cb0; }
      .icon-btn.up-down:hover:not(:disabled) { background:#1a56a0; }
      .icon-btn.edit-icon { background:#fbbc04; color:#5f3700; }
      .icon-btn.edit-icon:hover { background:#e5a800; }
      .icon-btn.delete-icon { background:#e53e3e; }
      .icon-btn.delete-icon:hover { background:#c53030; }
      /* VIEW TOGGLE (MODEN / BUKU LAMA) */
      .view-toggle { display:flex; gap:0; background:rgba(0,0,0,0.05); border-radius:6px; overflow:hidden; border:1px solid rgba(0,0,0,0.1); }
      .view-toggle-btn { display:inline-flex; align-items:center; gap:5px; padding:5px 12px; border:none; background:transparent; color:#4a5568; font-size:11px; font-weight:600; cursor:pointer; transition:0.2s; white-space:nowrap; letter-spacing:0.3px; }
      .view-toggle-btn:hover { color:#2d3748; background:rgba(0,0,0,0.05); }
      .view-toggle-btn.active { background:#fff; color:#0b8043; box-shadow:0 1px 3px rgba(0,0,0,0.15); border-radius:5px; }
      
      /* Dark mode overrides for view toggle */
      body.dark-mode .view-toggle { background:rgba(255,255,255,0.15); border:1px solid rgba(255,255,255,0.25); }
      body.dark-mode .view-toggle-btn { color:rgba(255,255,255,0.7); }
      body.dark-mode .view-toggle-btn:hover { color:#fff; background:rgba(255,255,255,0.1); }
      body.dark-mode .view-toggle-btn.active { background:#fff; color:#0b8043; }
      .admin-cat-card { cursor:grab; }
      .admin-cat-card.dragging { opacity:0.4; }
      .admin-cat-card.drop-before { border-top:3px solid #1a73e8; }
      .admin-cat-card.drop-after { border-bottom:3px solid #1a73e8; }
      .drag-handle { display:inline-flex; align-items:center; justify-content:center; width:20px; height:26px; cursor:grab; color:#a0aec0; font-size:18px; letter-spacing:2px; flex-shrink:0; user-select:none; }
      .drag-handle:hover { color:#4a5568; }
      .admin-loading { padding:40px 20px; text-align:center; color:#718096; font-size:15px; display:flex; align-items:center; justify-content:center; gap:10px; }
      .admin-save-bar { display:none; align-items:center; justify-content:space-between; padding:16px 20px; background:#fffbeb; border:2px solid #f6ad55; border-radius:10px; margin-top:20px; }
      .admin-save-msg { font-weight:600; color:#c05621; font-size:14px; }
      .save-order-btn { background-color:#dd6b20; color:white; padding:12px 28px; border:none; border-radius:8px; cursor:pointer; font-weight:700; font-size:14px; transition:0.2s; display:inline-flex; align-items:center; gap:8px; }
      .save-order-btn:hover { background-color:#c05621; transform:translateY(-1px); box-shadow:0 4px 12px rgba(221,107,32,0.3); }
      .save-order-btn:disabled { opacity:0.6; cursor:not-allowed; transform:none; box-shadow:none; }
      body.dark-mode .admin-cat-card.dragging { opacity:0.3; }
      body.dark-mode .admin-cat-card.drop-before { border-top-color:#63b3ed; }
      body.dark-mode .admin-cat-card.drop-after { border-bottom-color:#63b3ed; }
      body.dark-mode .drag-handle { color:#4a5568; }
      body.dark-mode .drag-handle:hover { color:#a0aec0; }
      body.dark-mode .admin-save-bar { background:#4a3a1a; border-color:#dd6b20; }
      body.dark-mode .admin-save-msg { color:#fbd38d; }
      /* OLD BOOK NAV */
      .old-book-nav-bar { display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:12px; }
      .old-book-nav-btn { display:inline-flex; align-items:center; gap:5px; background:#e2e8f0; border:1px solid #cbd5e0; padding:5px 10px; border-radius:4px; cursor:pointer; font-size:11px; font-weight:600; color:#4a5568; transition:0.2s; white-space:nowrap; }
      .old-book-nav-btn:hover:not(:disabled) { background:#cbd5e0; }
      .old-book-nav-btn:disabled { opacity:0.4; cursor:not-allowed; }
      body.dark-mode .old-book-nav-btn { background:#4a5568; border-color:#718096; color:#e2e8f0; }
      body.dark-mode .old-book-nav-btn:hover:not(:disabled) { background:#718096; }
      /* OLD BOOK TABLE STYLES */
      .old-book-page { background:white; border:2px solid #333; padding:20px; margin-top:15px; font-family:'Courier New',Courier,monospace; color:#000; }
      body.dark-mode .old-book-page { background:#fff; color:#000; border-color:#222; }
      .old-book-header { text-align:center; font-size:16px; letter-spacing:1px; }
      .old-book-info { font-size:13px; margin-bottom:10px; overflow:hidden; border-bottom:1px solid #333; padding-bottom:8px; }
      .old-book-table { width:100%; border-collapse:collapse; font-size:12px; }
      .old-book-table th { border:1px solid #333; padding:6px 8px; text-align:left; background:#eee; font-weight:bold; font-size:11px; text-transform:uppercase; }
      body.dark-mode .old-book-table th { background:#ddd; color:#000; }
      .old-book-table td { border:1px solid #333; padding:5px 8px; vertical-align:top; }
      body.dark-mode .old-book-table td { color:#000; }
      .old-book-table tr:nth-child(even) td { background:#f9f9f9; }
      body.dark-mode .old-book-table tr:nth-child(even) td { background:#eee; }
      /* NAMA_LAMA in admin */
      .room-nl { font-size:11px; color:#718096; background:#edf2f7; padding:2px 8px; border-radius:3px; white-space:nowrap; }
      body.dark-mode .room-nl { background:#2d3748; color:#a0aec0; }
      .icon-btn.tag-icon { background:#805ad5; }
      .icon-btn.tag-icon:hover { background:#6b46c1; }
      body.dark-mode .icon-btn.tag-icon { background:#805ad5; }
      @keyframes spin { 0% { transform:rotate(0deg); } 100% { transform:rotate(360deg); } }
      .spin { animation: spin 1s linear infinite; }

      /* --- GAYA KHUSUS UNTUK TELEFON BIMBIT (Skrin kecil dari 768px) --- */
      @media only screen and (max-width: 768px) {
        body { padding: 0; }
        .container { margin: 0; border-radius: 0; box-shadow: none; min-height: 100vh; max-width: 100%; margin-bottom: 0; }
        h2 { padding: 15px 10px; font-size: 16px; }
        .theme-toggle-btn { right: 10px; padding: 6px 10px; font-size: 10px; }
        .nav-bar { padding: 10px 15px; }
        .form-content { padding: 15px 20px 30px; }
        
        /* Susun input bersebelahan menjadi atas-bawah */
        .row { flex-direction: column; gap: 0; }
        .row .form-group { margin-bottom: 15px; }
        
        /* Halang auto-zoom di iPhone (iOS Safari) dengan set font-size ke 16px */
        input[type="text"], input[type="password"], input[type="number"], select, textarea { font-size: 16px; padding: 12px; }
        
        /* Besarkan sikit butang supaya mudah ditekan (Touch Target) */
        .menu-btn { padding: 16px 15px; font-size: 14px; }
        .submit-btn, .delete-btn { padding: 15px; font-size: 16px; }
        
        /* Kemaskan Modal (Pop-up) */
        .modal-box { width: 92%; padding: 20px; }
        .modal-buttons { flex-direction: column; gap: 10px; }
        .btn-ok, .btn-cancel, .btn-edit-modal { width: 100%; justify-content: center; padding: 12px; margin: 0; }
        
        /* Kemaskan grid bilik dan butang admin */
        .room-grid-dash { grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); }
        .admin-add-room { flex-wrap: wrap; }
        .old-book-nav-bar { flex-wrap: wrap; justify-content: center; }
        .old-book-nav-btn { flex: 1 1 45%; justify-content: center; padding: 10px 5px; }
        
        /* Dark mode untuk mobile */
        body.dark-mode { background-color: #1e1e1e; }
        body.dark-mode .container { background-color: #1e1e1e; box-shadow: none; }
      }