:root {
    --kt-sidebar: #0f2a43;
    --kt-sidebar-hover: #17395a;
    --kt-accent: #1f9d8f;
    --kt-bg: #f4f6f9;
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--kt-bg); font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; }

.app-shell { display: flex; min-height: 100vh; }
.app-main { flex: 1; display: flex; flex-direction: column; min-width: 0; }

.app-sidebar {
    width: 250px; background: var(--kt-sidebar); color: #cfe0ee;
    display: flex; flex-direction: column; position: sticky; top: 0; height: 100vh; overflow-y: auto;
    transition: margin-left .2s ease;
}
.sidebar-brand { display: flex; align-items: center; gap: .6rem; padding: 1rem; color: #fff; font-weight: 700; font-size: 1.1rem; }
.brand-mark { background: var(--kt-accent); color: #fff; width: 34px; height: 34px; border-radius: 9px; display: grid; place-items: center; font-size: .85rem; }
.sidebar-nav { padding: .5rem; display: flex; flex-direction: column; gap: 2px; }
.nav-group { font-size: .68rem; text-transform: uppercase; letter-spacing: .08em; color: #6f8bab; padding: .8rem .7rem .3rem; }
.sidebar-nav .nav-link { color: #cfe0ee; border-radius: 8px; padding: .5rem .7rem; display: flex; align-items: center; gap: .55rem; font-size: .92rem; }
.sidebar-nav .nav-link:hover { background: var(--kt-sidebar-hover); color: #fff; }
.sidebar-nav .nav-link.active { background: var(--kt-accent); color: #fff; font-weight: 600; }
.nav-ico { width: 1.1rem; text-align: center; }

.app-topbar { background: #fff; border-bottom: 1px solid #e3e8ef; display: flex; align-items: center; gap: .75rem; padding: .55rem 1rem; position: sticky; top: 0; z-index: 1030; }
.topbar-title { font-weight: 600; flex: 1; }
.app-content { flex: 1; }
.app-footer { border-top: 1px solid #e3e8ef; background: #fff; }

.stat-card { border: none; border-radius: 12px; box-shadow: 0 1px 3px rgba(15,42,67,.08); }
.stat-card .stat-value { font-size: 1.6rem; font-weight: 700; }
.stat-card .stat-label { color: #6b7c93; font-size: .85rem; }
.card { border: none; border-radius: 12px; box-shadow: 0 1px 3px rgba(15,42,67,.08); }
.card-header { background: #fff; border-bottom: 1px solid #eef1f5; font-weight: 600; border-radius: 12px 12px 0 0 !important; }

.auth-body { min-height: 100vh; display: grid; place-items: center; background: linear-gradient(135deg, #0f2a43, #1f9d8f); padding: 1rem; }
.auth-card { background: #fff; border-radius: 14px; padding: 2rem; width: 100%; max-width: 400px; box-shadow: 0 10px 30px rgba(0,0,0,.2); }

.map-root { height: 65vh; min-height: 380px; border-radius: 12px; }
.marker-vessel { font-size: 22px; line-height: 1; }
.badge-stale { background: #dc3545; }

@media (max-width: 991.98px) {
    .app-sidebar { position: fixed; z-index: 1040; margin-left: -250px; }
    .app-sidebar.open { margin-left: 0; }
    .app-shell.sidebar-open::after { content: ""; position: fixed; inset: 0; background: rgba(0,0,0,.35); z-index: 1035; }
}