:root { --brand: #4f46e5; --brand2: #7c3aed; }
body { background: #f4f6fb; font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; }
.app-nav { background: linear-gradient(90deg, var(--brand), var(--brand2)); box-shadow: 0 2px 12px rgba(79,70,229,.25); }
.app-nav .nav-link { border-radius: .5rem; transition: background .2s; }
.app-nav .nav-link.active, .app-nav .nav-link:hover { background: rgba(255,255,255,.15); }
.fade-in { animation: fadeIn .35s ease both; }
@keyframes fadeIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.card { border-radius: 1rem; }
.card-header:first-child { border-radius: 1rem 1rem 0 0; }
.stat-card { transition: transform .2s, box-shadow .2s; }
.stat-card:hover { transform: translateY(-2px); box-shadow: 0 .5rem 1.5rem rgba(0,0,0,.08) !important; }
.stat-ico { width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; font-size: 1.3rem; }
.urg-badge { font-weight: 600; letter-spacing: .2px; }
.orders-table tbody tr { transition: background .15s; }
.urg-row td:first-child { box-shadow: inset 4px 0 0 transparent; }
.urg-row.urg-1 td:first-child { box-shadow: inset 4px 0 0 #dc3545; }
.urg-row.urg-2 td:first-child { box-shadow: inset 4px 0 0 #fd7e14; }
.urg-row.urg-1 { background: rgba(220,53,69,.04); }
.courier-dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: 6px; }
.avatar { width: 42px; height: 42px; border-radius: 50%; color: #fff; display: grid; place-items: center; font-weight: 700; flex-shrink: 0; }
.avatar-sm { width: 28px; height: 28px; font-size: .8rem; display: inline-grid; }
.courier-card { transition: transform .2s; } .courier-card:hover { transform: translateY(-2px); }
.urg-btn { border: 2px solid var(--c); color: var(--c); background: #fff; font-weight: 600; border-radius: 999px; transition: all .15s; }
.btn-check:checked + .urg-btn, .urg-btn:hover { background: var(--c); color: #fff; border-color: var(--c); }
.map-edit { height: 360px; } .map-route { height: calc(100vh - 160px); min-height: 420px; } .map-full { height: calc(100vh - 110px); min-height: 480px; }
.route-list { max-height: calc(100vh - 260px); overflow: auto; }
.route-item { border-left: 4px solid var(--c) !important; cursor: grab; transition: transform .15s, box-shadow .15s; }
.route-item:hover { transform: translateX(2px); } .route-item.done { opacity: .55; }
.sortable-ghost { opacity: .35; }
.stop-num { width: 28px; height: 28px; border-radius: 50%; color: #fff; font-weight: 700; display: grid; place-items: center; font-size: .85rem; flex-shrink: 0; }
.min-w-0 { min-width: 0; }
.free-list { max-height: calc(100vh - 260px); overflow: auto; }
.urg-left { border-left: 4px solid var(--c); }
.sticky-actions { position: sticky; bottom: 0; background: linear-gradient(transparent, #f4f6fb 35%); padding: 1rem 0; z-index: 5; }
.login-bg { background: radial-gradient(circle at 20% 20%, #818cf8, transparent 50%), radial-gradient(circle at 80% 80%, #c084fc, transparent 50%), linear-gradient(135deg, #4f46e5, #7c3aed); }
.login-card { width: 100%; max-width: 400px; border-radius: 1.5rem; }
.login-logo { width: 72px; height: 72px; margin: 0 auto; border-radius: 22px; display: grid; place-items: center; font-size: 2rem; color: #fff; background: linear-gradient(135deg, var(--brand), var(--brand2)); box-shadow: 0 10px 25px rgba(79,70,229,.4); }
.map-legend { position: absolute; bottom: 16px; left: 16px; z-index: 500; background: #fff; border-radius: .75rem; padding: .4rem .75rem; display: flex; gap: .75rem; flex-wrap: wrap; font-size: .8rem; }
.map-legend .dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: 4px; }
.pin { position: relative; }
.num-pin { width: 30px; height: 30px; border-radius: 50% 50% 50% 0; transform: rotate(-45deg); display: grid; place-items: center; box-shadow: 0 2px 6px rgba(0,0,0,.35); border: 3px solid #fff; }
.num-pin span { transform: rotate(45deg); color: #fff; font-weight: 700; font-size: 12px; }
.num-pin.done { opacity: .5; } .num-pin.failed { filter: grayscale(.6); }
.depot-pin { width: 34px; height: 34px; border-radius: 10px; background: #111827; color: #fff; display: grid; place-items: center; font-size: 18px; box-shadow: 0 2px 8px rgba(0,0,0,.4); border: 2px solid #fff; }
.courier-pin { width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; color: #fff; font-size: 18px; border: 3px solid #fff; box-shadow: 0 2px 10px rgba(0,0,0,.4); }
.courier-pin.online { animation: ring 2s infinite; }
@keyframes ring { 0% { box-shadow: 0 0 0 0 rgba(25,135,84,.6); } 70% { box-shadow: 0 0 0 14px rgba(25,135,84,0); } 100% { box-shadow: 0 0 0 0 rgba(25,135,84,0); } }
.pulse { animation: pulseB 1.6s infinite; } @keyframes pulseB { 50% { opacity: .6; } }
.toast-wrap { position: fixed; right: 16px; bottom: 16px; z-index: 2000; display: flex; flex-direction: column; gap: 8px; }
.toast-x { padding: .6rem 1rem; border-radius: .75rem; color: #fff; box-shadow: 0 6px 18px rgba(0,0,0,.2); animation: fadeIn .25s ease both; }
.urg-row.urg-0 td:first-child { box-shadow: inset 4px 0 0 #7f1d1d; }
.urg-row.urg-0 { background: rgba(127,29,29,.07); }
.urg-hot { animation: hotPulse 1.8s ease-in-out infinite; }
@keyframes hotPulse { 50% { box-shadow: 0 0 0 4px rgba(220,53,69,.25); } }