.material-symbols-outlined {
  font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
  user-select: none;
}
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; -webkit-tap-highlight-color: transparent; }
html, body { height: 100%; overscroll-behavior: none; background: #f8fafc; }

/* Shell */
.shell { display: flex; flex-direction: column; height: 100dvh; max-width: 440px; margin: 0 auto; position: relative; }

/* Screens */
.screens { flex: 1; overflow: hidden; position: relative; }
.screen { position: absolute; inset: 0; overflow-y: auto; opacity: 0; pointer-events: none; transform: translateY(4px); transition: opacity 0.18s, transform 0.18s; -webkit-overflow-scrolling: touch; }
.screen.active { opacity: 1; pointer-events: all; transform: translateY(0); }
#screen-drive { overflow: hidden; }

/* Drive map */
#drive-map { height: 100%; width: 100%; }

/* Edit overlay (full screen, slides up) */
.edit-overlay { position: fixed; inset: 0; z-index: 300; background: #f8fafc; transform: translateY(100%); transition: transform 0.35s cubic-bezier(0.32, 0.72, 0, 1); max-width: 440px; margin: 0 auto; display: flex; flex-direction: column; }
.edit-overlay.open { transform: translateY(0); }
#edit-map { height: 100%; width: 100%; }

/* Auth */
.auth-screen { position: fixed; inset: 0; z-index: 400; background: #f8fafc; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 40px 24px; }

/* Toast */
.toast { position: fixed; bottom: 100px; left: 50%; transform: translateX(-50%) translateY(16px); background: #0f172a; color: #fff; font-family: 'Inter', sans-serif; font-size: 13px; padding: 10px 20px; border-radius: 999px; white-space: nowrap; z-index: 500; opacity: 0; transition: opacity 0.2s, transform 0.2s; pointer-events: none; }
.toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

/* GPS pill */
.gps-pill { display: flex; align-items: center; gap: 5px; padding: 4px 10px; border-radius: 999px; border: 1px solid #e2e8f0; background: #fff; font-size: 11px; font-family: 'Inter', monospace; color: #94a3b8; transition: all 0.3s; cursor: pointer; user-select: none; }
.gps-pill.ok { border-color: #bbf7d0; color: #16a34a; background: #f0fdf4; }
.gps-pill.searching { border-color: #fde68a; color: #d97706; }
.gps-pill.off { border-color: #fecaca; color: #ef4444; background: #fef2f2; }
.gps-dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex-shrink: 0; }
.gps-pill.searching .gps-dot { animation: blink 1s infinite; }
@keyframes blink { 0%,100%{opacity:1} 50%{opacity:0.3} }

/* Nav */
.nav-btn { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 8px 20px; border-radius: 16px; font-family: 'Inter', sans-serif; font-size: 11px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: #94a3b8; transition: all 0.15s; cursor: pointer; border: none; background: transparent; position: relative; }
.nav-btn.active { background: #1e3a8a; color: #fff; box-shadow: 0 4px 16px rgba(30,58,138,0.25); }
.nav-btn span.material-symbols-outlined { font-size: 22px; margin-bottom: 2px; }

/* Input styles */
.field-input { width: 100%; height: 56px; background: #fff; border: 1px solid #e2e8f0; border-radius: 12px; padding: 0 44px 0 16px; font-family: 'Inter', sans-serif; font-size: 15px; color: #0f172a; outline: none; transition: border-color 0.15s, box-shadow 0.15s; box-shadow: 0 1px 3px rgba(0,0,0,0.04); -webkit-appearance: none; }
.field-input:focus { border-color: #005596; box-shadow: 0 0 0 3px rgba(0,85,150,0.1); }
.field-input::placeholder { color: #94a3b8; }
select.field-input { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%2394a3b8' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 16px center; padding-right: 40px; cursor: pointer; }
textarea.field-input { height: 80px; padding: 14px 16px; resize: none; }

/* Report card type colors */
.type-hola    { background: #eff6ff; color: #1d4ed8; }
.type-framruda { background: #fff7ed; color: #c2410c; }
.type-merking { background: #f0fdf4; color: #15803d; }
.type-annad   { background: #f8fafc; color: #475569; }

::-webkit-scrollbar { width: 0; }