.gps-tools { grid-column: 1 / -1; background: #0b2039; padding: 15px; display: grid; grid-template-columns: 1fr repeat(2, minmax(170px, 230px)) auto auto; gap: 10px; align-items: end; }
.gps-tools h4 { margin: 0 0 5px; font-size: 12px; }
.gps-tools label, .gps-tools small { color: #7e96af; font-size: 8px; }
.gps-tools input { display: block; width: 100%; margin-top: 5px; padding: 9px; background: #07182d; color: #fff; border: 1px solid #1d3a5b; border-radius: 8px; }
.gps-tools button { border: 0; border-radius: 8px; background: linear-gradient(90deg, #16bceb, #0877d9); color: #04101e; font-weight: 800; padding: 10px; cursor: pointer; }
.gps-route { grid-column: 1 / -1; background: #07192f; padding: 14px; }
.gps-playback-map { width: 100%; height: 440px; border: 1px solid #1d3a5b; border-radius: 10px; overflow: hidden; }
.gps-playback-toolbar { display: grid; grid-template-columns: auto auto auto auto minmax(160px,1fr); gap: 8px; align-items: center; margin-bottom: 10px; }
.gps-playback-toolbar button { border: 0; border-radius: 8px; background: linear-gradient(90deg,#16bceb,#0877d9); color: #04101e; font-weight: 800; padding: 9px 12px; cursor: pointer; }
.gps-playback-toolbar button.secondary { color: #d9eafb; background: #17324e; }
.gps-playback-toolbar label { display: flex; align-items: center; gap: 6px; color: #7e96af; font-size: 9px; }
.gps-playback-toolbar select { padding: 8px; border: 1px solid #1d3a5b; border-radius: 7px; color: #fff; background: #07182d; }
.gps-playback-toolbar input[type="range"] { min-width: 130px; accent-color: #16bceb; }
.gps-playback-toolbar strong { grid-column: 1 / -1; min-height: 28px; padding: 8px 10px; border-radius: 8px; background: #0b2039; color: #dbeafa; font-size: 10px; }
.gps-route p { display: flex; justify-content: space-between; border-bottom: 1px solid #173858; padding: 8px; font-size: 9px; }
.gps-route p small { color: #7e96af; }
.control-history-actions { grid-column:1/-1; display:grid; grid-template-columns:1fr 1fr; gap:14px; padding:16px; background:#091d35; }
.control-history-actions button { display:grid; grid-template-columns:auto 1fr; gap:5px 12px; align-items:center; text-align:left; padding:18px; color:#eaf7ff; border:1px solid #24618a; border-radius:12px; background:linear-gradient(135deg,#123a5b,#0a223c); cursor:pointer; box-shadow:0 10px 28px #0003; }
.control-history-actions button:hover { transform:translateY(-1px); border-color:#16bceb; }.control-history-actions span { grid-row:1/3; font-size:28px; color:#16bceb; }.control-history-actions b { font-size:13px; }.control-history-actions small { color:#8fa9c0; font-size:9px; }
.data-window { position:fixed; inset:0; z-index:2500; padding:22px; background:#020b17eF; backdrop-filter:blur(8px); overflow:auto; }
.data-window-card { width:min(1180px,100%); min-height:calc(100vh - 44px); margin:auto; border:1px solid #25577c; border-radius:16px; background:#07182d; box-shadow:0 30px 90px #000b; overflow:hidden; }
.gps-window-card { width:min(1500px,100%); }
.data-window-header { display:flex; align-items:center; gap:15px; padding:20px 24px; border-bottom:1px solid #1d3a5b; background:linear-gradient(110deg,#0d2b49,#09213b); }.data-window-header>div { flex:1; }.data-window-header small,.data-window-header p { color:#86a5bd; font-size:9px; margin:3px 0; }.data-window-header h2 { margin:4px 0; }.data-window-header>button { width:42px; height:42px; border:1px solid #315b79; border-radius:50%; color:#fff; background:#102e49; font-size:24px; cursor:pointer; }
.history-filter { display:grid; grid-template-columns:1fr 1fr auto auto; gap:12px; align-items:end; padding:17px 22px; border-bottom:1px solid #1d3a5b; }.history-filter label { color:#86a5bd; font-size:9px; }.history-filter input { display:block; width:100%; margin-top:6px; padding:11px; color:#fff; border:1px solid #285172; border-radius:8px; background:#061426; }.history-filter button { padding:11px 16px; border:0; border-radius:8px; color:#04101e; font-weight:800; background:linear-gradient(90deg,#16bceb,#0877d9); cursor:pointer; }
.recordings-results { display:grid; gap:12px; padding:20px; }.recording-card { display:flex; gap:16px; align-items:center; padding:17px; border:1px solid #214662; border-left:5px solid #16bceb; border-radius:12px; background:#0b243f; }.recording-card.protected { border-left-color:#23d29f; box-shadow:inset 0 0 30px #23d29f0c; }.recording-info { flex:1; min-width:0; }.recording-info span { color:#6ea2c7; font-size:8px; font-weight:800; }.recording-info h3 { margin:6px 0; }.recording-info p { margin:0; color:#91a9bc; font-size:9px; }.recording-actions { display:flex; flex-wrap:wrap; gap:8px; }.recording-actions button { padding:11px 14px; border:1px solid #2a5b7d; border-radius:8px; color:#dff4ff; background:#123653; font-weight:700; cursor:pointer; }.recording-actions .play-audio { color:#04101e; background:#16bceb; }.recording-actions .download-audio { color:#04101e; background:#ffbd4a; }.recording-actions .keep-audio { border-color:#23d29f; }.recording-actions .keep-audio.active { color:#04101e; background:#23d29f; }.recording-actions .danger-text { color:#ff9aa6; background:#4a1825; border-color:#873247; }
.gps-coordinate-list { max-height:320px; overflow:auto; margin-top:12px; border:1px solid #1d3a5b; border-radius:10px; }
@media (max-width: 850px) { .gps-tools { grid-template-columns: 1fr; } .gps-playback-map { height: 58vh; min-height: 360px; } .gps-playback-toolbar { grid-template-columns: repeat(3,1fr); } .gps-playback-toolbar label,.gps-playback-toolbar input[type="range"],.gps-playback-toolbar strong { grid-column: 1 / -1; } }
@media (max-width:850px) { .control-history-actions{grid-template-columns:1fr}.data-window{padding:0}.data-window-card{min-height:100vh;border-radius:0}.history-filter{grid-template-columns:1fr}.recording-card{align-items:stretch;flex-direction:column}.recording-actions button{flex:1}.data-window-header{padding-top:max(18px,env(safe-area-inset-top))}.gps-window-card .gps-route{padding:8px} }