:root[data-theme="tlt"] {
    --acc: #10b981;
    --in-range-bg: #064e3b;
    --in-range-text: #6ee7b7;
}
:root[data-theme="iil"] {
    --acc: #3b82f6;
    --in-range-bg: #1e3a8a;
    --in-range-text: #93c5fd;
}

:root { --bg: #0f172a; --card: #1e293b; --text: #f8fafc; --muted: #94a3b8; }
body, html { height: 100%; width: 100%; margin: 0; background: var(--bg); color: var(--text); font-family: 'Inter', sans-serif; display: flex; overflow: hidden; }

.sidebar { width: 380px; height: 100%; background: #111827; padding: 20px; border-right: 1px solid #374151; display: flex; flex-direction: column; gap: 15px; z-index: 10000; box-sizing: border-box; flex-shrink: 0; overflow-y: auto; }
.main-content { flex: 1; height: 100%; position: relative; }
#map { height: 100%; width: 100%; background: #cbd5e1; }

.box { background: var(--card); padding: 12px; border-radius: 10px; border: 1px solid #334155; }
.label { color: var(--muted); font-size: 0.65rem; text-transform: uppercase; font-weight: 700; margin-bottom: 8px; display: block; letter-spacing: 0.05em; }
#datetimeDisplay { font-size: 1rem; font-weight: 700; color: #fbbf24; font-family: monospace; }

.tabs { display: flex; gap: 8px; }
.tab { flex: 1; text-align: center; padding: 10px; border-radius: 8px; font-weight: 800; cursor: pointer; color: var(--muted); background: var(--card); transition: all 0.2s; letter-spacing: 0.05em; }
.tab:hover { background: #334155; }
.tab.active { background: var(--acc); color: white; }

.day-picker { display: grid; grid-template-columns: repeat(7, 1fr); background: #0f172a; padding: 5px; border-radius: 8px; gap: 4px; }
.day-item { text-align: center; padding: 8px 2px; cursor: pointer; border-radius: 6px; font-size: 0.7rem; color: var(--muted); user-select: none; transition: all 0.2s; }
.day-item:hover { background: #1e293b; }
.day-item.active { background: var(--acc); color: white; }
.day-item.in-range { background: var(--in-range-bg); color: var(--in-range-text); }
.day-item span { display: block; font-size: 0.55rem; opacity: 0.8; margin-top: 2px; }

button { background: var(--acc); color: white; border: none; padding: 12px; border-radius: 8px; font-weight: 700; cursor: pointer; width: 100%; font-size: 0.9rem; transition: background 0.2s; }
button:hover { filter: brightness(1.1); }
input[type="range"] { width: 100%; accent-color: var(--acc); cursor: pointer; margin-top: 5px; }

@media (max-width: 768px) {
    body { flex-direction: column; }
    .sidebar { width: 100%; height: 45%; position: fixed; bottom: 0; border-top: 3px solid var(--acc); border-radius: 20px 20px 0 0; padding: 15px; }
    .main-content { height: 55%; }
}

.vessel-container { position: relative; width: 42px; height: 42px; display: flex; align-items: center; justify-content: center; }
.vessel-body { position: absolute; width: 32px; height: 32px; border-radius: 50% 50% 0 50%; background: rgba(255, 255, 255, 0.9); border: 3px solid white; box-shadow: 0 2px 4px rgba(0,0,0,0.2); }
.route-label { position: relative; z-index: 10; font-size: 11px; font-weight: 800; text-shadow: 1px 1px 0px #fff, -1px -1px 0px #fff, 1px -1px 0px #fff, -1px 1px 0px #fff; }