/* Cool Sky theme: shared by all four pages. */
:root {
  color-scheme: light;
  --ink: #173f5c;
  --muted: #4e6d83;
  --blue: #126ba6;
  --line: #bfdeed;
}
body {
  background: linear-gradient(145deg, #f3fbff 0%, #e0f2ff 42%, #d6eef9 72%, #e6faf9 100%);
  background-attachment: fixed;
  color: var(--ink);
  overflow-x: hidden;
}
body::before { background: #91d5f7; opacity: .24; }
body::after { background: #a3e6e8; opacity: .24; }
h1, h2 {
  background: none;
  -webkit-text-fill-color: initial;
  color: #155780;
}
.logo-icon { filter: drop-shadow(0 6px 12px rgba(36, 126, 176, .16)); }
.subtitle, .page-subtitle, .instruction, .card-desc, .note,
#status, #main-status, #gps-status, .score-text, .modal-title { color: var(--muted); }
.card-title, .section-title-text, label { color: var(--ink); }
.btn-menu, .card, .form-section {
  background: rgba(255, 255, 255, .86);
  border: 1px solid var(--line);
  color: var(--ink);
  box-shadow: 0 10px 30px rgba(42, 112, 153, .08);
}
.btn-menu:hover, .btn-register:hover, .btn-scan:hover, .btn-config:hover {
  background: #fff;
  border-color: #82c4e6;
  box-shadow: 0 12px 30px rgba(42, 112, 153, .16);
}
.btn-register .card-icon { background: linear-gradient(135deg, #5bb9e8, #267eae); }
.btn-scan .card-icon { background: linear-gradient(135deg, #65ccd8, #25869f); }
.btn-config .card-icon { background: linear-gradient(135deg, #94c9e8, #548db5); }
.btn-menu .card-icon { box-shadow: 0 4px 12px rgba(42, 112, 153, .15); }
.card-arrow, .btn-menu:hover .card-arrow { color: #387ca3; }
.back-btn, .btn-back {
  color: #235f84;
  background: rgba(255, 255, 255, .7);
  border-color: var(--line);
}
.back-btn:hover, .btn-back:hover { color: #154969; background: #fff; border-color: #82c4e6; }
.section-header, .divider { border-color: var(--line); }
.section-icon.indigo { background: #e0f1ff; }
.section-icon.cyan { background: #ddf5f8; }
input, .input-group input {
  background: #f8fcff;
  border-color: #afcfdf;
  color: var(--ink);
}
input::placeholder, .input-group input::placeholder { color: #5b7589; }
input:focus, .input-group input:focus {
  background: #fff;
  border-color: #368ec0;
  box-shadow: 0 0 0 3px rgba(54, 142, 192, .16);
}
.btn-get-loc, .btn-save, #btnSave, #btnStart, .btn-confirm {
  background: linear-gradient(120deg, #167eb0 0%, #176ca5 55%, #205b94 100%);
  color: #fff;
  box-shadow: 0 5px 16px rgba(24, 108, 164, .2);
}
#btnStart { animation: none; }
.btn-get-loc:hover, .btn-save:hover, #btnSave:hover:not(:disabled),
#btnStart:hover, .btn-confirm:hover:not(:disabled) {
  box-shadow: 0 8px 22px rgba(24, 108, 164, .28);
}
#btnSave:disabled, .btn-confirm:disabled {
  background: #dceaf3;
  color: #526e82;
  box-shadow: none;
}
.dot { background: #d1e5f0; border-color: #aacfe1; }
.dot.active { background: #2584bb; box-shadow: 0 0 8px rgba(37, 132, 187, .25); }
.spinner { border-color: #bddded; border-top-color: #2584bb; }
.video-wrapper, .video-container {
  background: linear-gradient(145deg, #d1e9f7, #a9cddd);
  border: 2px solid #8cc5e0;
  box-shadow: 0 10px 28px rgba(42, 112, 153, .12);
}
.corner { border-color: #80d7ff; }
.scan-line { background: linear-gradient(90deg, transparent, #80d7ff, transparent); box-shadow: 0 0 8px #67caff; }
#overlay-status { color: #fff; border-color: rgba(255,255,255,.35); }
.status-chip { background: #edf8ff; border-color: var(--line); }
.dot-pulse { background: #167ca6; animation: none; }
.modal-overlay { background: rgba(22, 58, 82, .4); }
.modal-content {
  background: linear-gradient(155deg, #ffffff, #edf8ff 65%, #e1f4f8);
  border-color: #bfdeed;
  box-shadow: 0 20px 60px rgba(23, 63, 92, .22);
}
.modal-avatar { background: #dfedfa; border-color: #b9d9ed; }
.user-name { color: #155780; overflow-wrap: anywhere; }
.time-badge { background: #dff2f8; border-color: #acd5e5; color: #185b79; }
.btn-cancel, .gps-alert { background: #fff1f2; border-color: #e9b8bd; color: #a22f40; }
.btn-cancel:hover { background: #ffe4e8; }
.api-warning { background: #fff6df; border-color: #e5ce97; color: #80551c; }
.api-warning a { color: #785017; text-decoration: underline; }
.msg-success { color: #11705c; }
.msg-error { color: #b33246; }
a:focus-visible, button:focus-visible {
  outline: 3px solid #176ca5;
  outline-offset: 4px;
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* Nukool Air: employee-first navigation */
.shop-name { display: inline-block; margin-top: 10px; font-size: .82em; color: #287b9b; }
.menu-cards { max-width: 440px; }
.hero-action { position: relative; flex-direction: column; text-align: center; gap: 16px; padding: 28px 20px; border-radius: 26px; }
.hero-action .card-text { text-align: center; }
.hero-action .card-title { font-size: 1.3em; color: #14567e; }
.hero-action .card-desc { margin-top: 8px; color: #466c83; }
.hero-action .card-icon { width: 76px; height: 76px; font-size: 36px; border-radius: 23px; }
.hero-label { font-size: .78em; color: #296b8c; background: #e5f5fc; padding: 5px 14px; border-radius: 20px; }
.hero-cta { background: linear-gradient(120deg,#167eb0,#205b94); color: white; padding: 13px 22px; width: 100%; border-radius: 14px; font-weight: 600; }
.admin-caption { text-align: center; color: #4e6d83; font-size: .78em; margin-top: 12px; }
.admin-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.compact-action { padding: 14px 8px; gap: 8px; justify-content: center; border-radius: 14px; }
.compact-action .card-icon { width: 28px; height: 28px; font-size: 16px; border-radius: 8px; }
.compact-action .card-title { font-size: .76em; margin: 0; }
.home-note { text-align: center; font-size: .74em; color: #4e6d83; margin-top: 12px; }
.admin-gate { width: 100%; max-width: 410px; position: relative; z-index: 2; margin: 30px auto; }
.admin-gate h1 { font-size: 1.35em; margin-bottom: 8px; }
.admin-gate p { font-size: .9em; margin-bottom: 20px; color: #4e6d83; }
.admin-gate input[type=password] { font-size: 24px; text-align: center; letter-spacing: .4em; }
.admin-gate .gate-error { color: #b33246; margin-top: 12px; min-height: 24px; }
.top-bar h2 { text-align: center; font-size: 1em; }
@media(max-width: 360px) { .compact-action { flex-direction: column; } .hero-action .card-title { font-size: 1.15em; } .spacer { width: 0; } }