/* ═══════════════════════════════════════════════════════════
   FlySail Logistics — Design System v3.0 (Professional)
   Mobile-first · Responsive · Advanced · Dark-ready
   ═══════════════════════════════════════════════════════════ */
@import url('https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,300;0,9..40,400;0,9..40,500;0,9..40,600;0,9..40,700;0,9..40,800&family=Space+Mono:wght@400;700&family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap');

:root {
    --font-body:'Plus Jakarta Sans','DM Sans',-apple-system,BlinkMacSystemFont,sans-serif;
    --font-mono:'Space Mono','Courier New',monospace;
    --font-display:'Plus Jakarta Sans','DM Sans',sans-serif;
    --blue-50:#eff6ff;--blue-100:#dbeafe;--blue-200:#bfdbfe;--blue-400:#60a5fa;--blue-500:#3b82f6;--blue-600:#2563eb;--blue-700:#1d4ed8;--blue-900:#1e3a5f;
    --gray-25:#fcfcfd;--gray-50:#f8fafc;--gray-100:#f1f5f9;--gray-200:#e2e8f0;--gray-300:#cbd5e1;--gray-400:#94a3b8;--gray-500:#64748b;--gray-600:#475569;--gray-700:#334155;--gray-800:#1e293b;--gray-900:#0f172a;--gray-950:#020617;
    --green-50:#f0fdf4;--green-500:#22c55e;--green-600:#16a34a;
    --amber-50:#fffbeb;--amber-500:#f59e0b;--amber-600:#d97706;
    --red-50:#fef2f2;--red-500:#ef4444;--red-600:#dc2626;
    --purple-50:#faf5ff;--purple-500:#a855f7;--purple-600:#9333ea;
    --cyan-500:#06b6d4;--indigo-500:#6366f1;
    --radius:12px;--radius-lg:16px;--radius-xl:20px;--radius-2xl:24px;
    --shadow-xs:0 1px 2px rgba(0,0,0,0.04);--shadow-sm:0 1px 3px rgba(0,0,0,0.04),0 1px 2px rgba(0,0,0,0.06);--shadow-md:0 4px 16px rgba(0,0,0,0.06);--shadow-lg:0 12px 40px rgba(0,0,0,0.08);--shadow-xl:0 24px 60px rgba(0,0,0,0.12);
    --sidebar-w:260px;--header-h:64px;
    --transition:0.2s cubic-bezier(0.4,0,0.2,1);--transition-spring:0.4s cubic-bezier(0.16,1,0.3,1);
}
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{font-family:var(--font-body);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;color:var(--gray-700);line-height:1.6;background:var(--gray-50)}
[x-cloak]{display:none!important}img{max-width:100%;height:auto}a{text-decoration:none;color:inherit}
.font-mono{font-family:var(--font-mono)}.font-display{font-family:var(--font-display)}
::-webkit-scrollbar{width:6px;height:6px}::-webkit-scrollbar-track{background:transparent}::-webkit-scrollbar-thumb{background:var(--gray-300);border-radius:10px}::-webkit-scrollbar-thumb:hover{background:var(--gray-400)}
.sidebar::-webkit-scrollbar-thumb{background:rgba(255,255,255,0.12)}
::selection{background:var(--blue-200);color:var(--blue-900)}

/* ══ LANDING ══ */
.ln-nav{position:fixed;top:0;left:0;right:0;z-index:100;transition:all .35s cubic-bezier(.4,0,.2,1)}
.ln-nav.scrolled{background:rgba(255,255,255,.88);backdrop-filter:blur(24px) saturate(200%);-webkit-backdrop-filter:blur(24px) saturate(200%);box-shadow:0 1px 24px rgba(0,0,0,.06)}
.ln-nav .inner{max-width:1200px;margin:0 auto;padding:0 20px;height:70px;display:flex;align-items:center;justify-content:space-between}
.ln-nav .logo{font-size:22px;font-weight:800;color:var(--blue-600);text-decoration:none;display:flex;align-items:center;gap:8px;letter-spacing:-.02em}
.ln-nav .links{display:none;gap:28px;font-size:14px;font-weight:500}
.ln-nav .links a{color:var(--gray-500);text-decoration:none;transition:color .2s;position:relative}
.ln-nav .links a:hover{color:var(--blue-600)}
.ln-nav .links a::after{content:'';position:absolute;bottom:-4px;left:0;right:0;height:2px;background:var(--blue-600);transform:scaleX(0);transition:transform .3s cubic-bezier(.16,1,.3,1);border-radius:2px}
.ln-nav .links a:hover::after{transform:scaleX(1)}
.ln-nav .cta{display:flex;align-items:center;gap:12px}.ln-nav .cta a{font-size:13px;text-decoration:none}
.ln-btn{display:inline-flex;align-items:center;gap:6px;padding:10px 22px;border-radius:10px;font-weight:700;font-size:14px;text-decoration:none;transition:all var(--transition);border:none;cursor:pointer;letter-spacing:-.01em}
.ln-btn-primary{background:var(--blue-600);color:#fff}.ln-btn-primary:hover{background:var(--blue-700);transform:translateY(-2px);box-shadow:0 8px 24px rgba(37,99,235,.3)}
.ln-btn-outline{background:transparent;border:1.5px solid var(--gray-300);color:var(--gray-600)}.ln-btn-outline:hover{border-color:var(--blue-500);color:var(--blue-600);background:var(--blue-50)}
.ln-btn-white{background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.2);color:#fff;backdrop-filter:blur(8px)}.ln-btn-white:hover{background:rgba(255,255,255,.22)}
.hamburger{display:flex;flex-direction:column;gap:5px;cursor:pointer;padding:8px}.hamburger span{width:22px;height:2px;background:var(--gray-700);border-radius:2px;transition:all .3s}

.hero{background:linear-gradient(160deg,#0a1628 0%,#0f2847 35%,#162d50 60%,#0e1f3d 100%);padding:120px 20px 80px;position:relative;overflow:hidden;min-height:600px}
.hero::before{content:'';position:absolute;top:-200px;right:-200px;width:600px;height:600px;background:radial-gradient(circle,rgba(59,130,246,.12) 0%,transparent 70%);animation:heroGlow 8s ease-in-out infinite alternate}
.hero::after{content:'';position:absolute;bottom:-150px;left:-100px;width:500px;height:500px;background:radial-gradient(circle,rgba(6,182,212,.08) 0%,transparent 70%);animation:heroGlow 10s ease-in-out infinite alternate-reverse}
@keyframes heroGlow{0%{opacity:.5;transform:scale(1)}100%{opacity:1;transform:scale(1.15)}}
.hero .content{max-width:1200px;margin:0 auto;position:relative;z-index:2}
.hero h1{font-size:clamp(32px,6vw,60px);font-weight:800;color:#fff;line-height:1.08;margin-bottom:20px;letter-spacing:-.03em}
.hero h1 .gradient{background:linear-gradient(135deg,#60a5fa,#22d3ee);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.hero .sub{font-size:clamp(15px,2vw,18px);color:rgba(148,163,184,.9);max-width:520px;margin-bottom:36px;line-height:1.7}

.track-bar{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1);border-radius:16px;padding:6px;max-width:520px;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);transition:all .3s}
.track-bar:focus-within{border-color:rgba(59,130,246,.4);box-shadow:0 0 0 4px rgba(59,130,246,.1)}
.track-bar form{display:flex;gap:6px}
.track-bar input{flex:1;background:rgba(255,255,255,.08);border:none;border-radius:12px;padding:14px 18px;color:#fff;font-size:15px;font-family:var(--font-mono);outline:none;min-width:0}
.track-bar input::placeholder{color:rgba(148,163,184,.5)}
.track-bar button{background:var(--blue-600);color:#fff;border:none;border-radius:12px;padding:14px 24px;font-weight:700;font-size:14px;cursor:pointer;white-space:nowrap;transition:all .2s;flex-shrink:0}
.track-bar button:hover{background:var(--blue-700);transform:translateY(-1px)}

.stats-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:16px;max-width:520px;margin-top:48px}
.stat{text-align:center;padding:16px 8px}.stat .num{font-size:28px;font-weight:800;color:#fff;font-family:var(--font-mono);letter-spacing:-.02em}.stat .label{font-size:11px;color:var(--gray-400);text-transform:uppercase;letter-spacing:1.2px;margin-top:4px}

.section{padding:80px 20px}.section .inner{max-width:1200px;margin:0 auto}
.section-title{font-size:clamp(24px,4vw,36px);font-weight:800;color:var(--gray-900);margin-bottom:8px;letter-spacing:-.02em}
.section-sub{font-size:15px;color:var(--gray-500);max-width:500px;margin-bottom:48px;line-height:1.7}
.section-center{text-align:center}.section-center .section-sub{margin-left:auto;margin-right:auto}

.svc-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:20px}
.svc-card{background:#fff;border:1px solid var(--gray-200);border-radius:var(--radius-lg);padding:28px;transition:all .35s cubic-bezier(.16,1,.3,1)}
.svc-card:hover{border-color:var(--blue-200);box-shadow:var(--shadow-md);transform:translateY(-6px)}
.svc-icon{width:48px;height:48px;border-radius:12px;display:flex;align-items:center;justify-content:center;font-size:20px;margin-bottom:16px;transition:transform .3s}
.svc-card:hover .svc-icon{transform:scale(1.1) rotate(-3deg)}
.svc-card h3{font-size:16px;font-weight:700;color:var(--gray-800);margin-bottom:8px}
.svc-card p{font-size:13px;color:var(--gray-500);line-height:1.6}

.steps-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:24px}
.step-item{text-align:center;padding:24px 16px}
.step-num{width:48px;height:48px;border-radius:50%;background:var(--blue-50);color:var(--blue-600);font-weight:800;font-size:18px;display:flex;align-items:center;justify-content:center;margin:0 auto 14px;transition:all .3s}
.step-item:hover .step-num{background:var(--blue-600);color:#fff;transform:scale(1.1)}
.step-item h3{font-size:15px;font-weight:700;margin-bottom:6px}.step-item p{font-size:13px;color:var(--gray-500)}

.quote-card{background:var(--gray-50);border:1px solid var(--gray-200);border-radius:var(--radius-xl);padding:32px;max-width:500px;margin:0 auto}
.quote-card .form-row{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.quote-card label{display:block;font-size:12px;font-weight:600;color:var(--gray-500);margin-bottom:4px;text-transform:uppercase;letter-spacing:.5px}
.quote-card input,.quote-card select{width:100%;border:1px solid var(--gray-200);border-radius:10px;padding:10px 14px;font-size:14px;font-family:var(--font-body);outline:none;transition:all .2s;background:#fff}
.quote-card input:focus,.quote-card select:focus{border-color:var(--blue-500);box-shadow:0 0 0 3px rgba(59,130,246,.08)}
.quote-result{text-align:center;padding:24px;min-height:80px}

.testimonial-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:20px}
.testimonial{background:#fff;border:1px solid var(--gray-200);border-radius:var(--radius-lg);padding:24px;transition:all .3s}
.testimonial:hover{box-shadow:var(--shadow-md);transform:translateY(-3px)}
.testimonial .stars{color:var(--amber-500);font-size:12px;margin-bottom:12px}
.testimonial p{font-size:14px;color:var(--gray-600);font-style:italic;margin-bottom:16px;line-height:1.6}
.testimonial .author{font-size:13px;font-weight:700;color:var(--gray-800)}.testimonial .company{font-size:11px;color:var(--gray-400)}

.cta-section{background:linear-gradient(135deg,var(--blue-600),#4f46e5);padding:60px 20px;text-align:center;position:relative;overflow:hidden}
.cta-section::before{content:'';position:absolute;inset:0;background:url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='30' cy='30' r='1' fill='rgba(255,255,255,0.06)'/%3E%3C/svg%3E")}
.cta-section h2{font-size:clamp(22px,4vw,32px);font-weight:800;color:#fff;margin-bottom:12px;position:relative}
.cta-section p{color:rgba(255,255,255,.8);margin-bottom:28px;font-size:15px;position:relative}

.footer{background:var(--gray-900);padding:48px 20px 24px;color:var(--gray-400);font-size:13px}
.footer .inner{max-width:1200px;margin:0 auto}
.footer-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:32px;margin-bottom:32px}
.footer h4{color:#fff;font-size:14px;font-weight:700;margin-bottom:14px}
.footer a{color:var(--gray-400);text-decoration:none;display:block;padding:3px 0;transition:all .2s}.footer a:hover{color:var(--blue-400);padding-left:4px}
.footer-bottom{border-top:1px solid rgba(255,255,255,.08);padding-top:20px;text-align:center;font-size:12px}

/* ══ ADMIN LAYOUT ══ */
.admin-wrap{display:flex;min-height:100vh;background:#f5f7fb}
.sidebar{width:var(--sidebar-w);background:linear-gradient(175deg,#0c1222 0%,#111827 40%,#0f172a 100%);color:var(--gray-400);display:flex;flex-direction:column;position:fixed;top:0;bottom:0;left:0;z-index:200;overflow-y:auto;overflow-x:hidden;transition:transform .3s cubic-bezier(.4,0,.2,1)}
.sidebar-logo{height:68px;display:flex;align-items:center;padding:0 22px;border-bottom:1px solid rgba(255,255,255,.04);flex-shrink:0}
.sidebar-logo a{color:#fff;font-size:17px;font-weight:800;text-decoration:none;display:flex;align-items:center;gap:10px;letter-spacing:-.02em}
.sidebar-logo a i{color:var(--blue-400);font-size:20px}
.sidebar-nav{flex:1;padding:16px 14px;display:flex;flex-direction:column;gap:2px}
.sb-heading{padding:20px 10px 7px;font-size:9.5px;font-weight:700;text-transform:uppercase;letter-spacing:2px;color:rgba(148,163,184,.5);cursor:pointer;display:flex;align-items:center;justify-content:space-between;user-select:none;transition:color .2s}
.sb-heading:hover{color:rgba(148,163,184,.8)}
.sb-chevron{font-size:8px;transition:transform .25s cubic-bezier(.4,0,.2,1);opacity:.4}
.sb-group.open .sb-chevron{transform:rotate(180deg);opacity:.6}
.sb-group-links{max-height:0;overflow:hidden;transition:max-height .3s cubic-bezier(.4,0,.2,1)}
.sb-group.open .sb-group-links{max-height:600px}
.sb-link{display:flex;align-items:center;gap:11px;padding:9px 12px;font-size:13px;border-radius:10px;color:rgba(203,213,225,.7);text-decoration:none;transition:all .18s;margin-bottom:1px;font-weight:500;position:relative}
.sb-link:hover{background:rgba(255,255,255,.05);color:rgba(241,245,249,.95)}
.sb-link.active{background:linear-gradient(135deg,rgba(59,130,246,.15),rgba(99,102,241,.1));color:#93c5fd;font-weight:600}
.sb-link.active::before{content:'';position:absolute;left:0;top:50%;transform:translateY(-50%);width:3px;height:18px;background:linear-gradient(180deg,var(--blue-400),var(--indigo-500));border-radius:0 4px 4px 0}
.sb-link i{width:18px;text-align:center;font-size:13px;flex-shrink:0;opacity:.7}
.sb-link.active i{opacity:1}
.sb-link:hover i{opacity:1}
.sidebar-user{padding:18px 20px;border-top:1px solid rgba(255,255,255,.05);flex-shrink:0;display:flex;align-items:center;gap:11px;background:rgba(0,0,0,.15)}
.sidebar-user .avatar{width:36px;height:36px;border-radius:10px;background:linear-gradient(135deg,#3b82f6,#8b5cf6);display:flex;align-items:center;justify-content:center;color:#fff;font-weight:700;font-size:12px;flex-shrink:0;box-shadow:0 2px 8px rgba(59,130,246,.3)}
.sidebar-user .info{flex:1;min-width:0}
.sidebar-user .name{font-size:13px;font-weight:600;color:var(--gray-200);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sidebar-user .role{font-size:10px;color:var(--gray-500);text-transform:capitalize}

.sidebar-overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,.5);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);z-index:199;opacity:0;transition:opacity .3s}
.sidebar-overlay.open{display:block;opacity:1}

.admin-main{flex:1;margin-left:var(--sidebar-w);min-width:0;display:flex;flex-direction:column}
.admin-header{height:var(--header-h);background:rgba(255,255,255,.8);backdrop-filter:blur(20px) saturate(180%);-webkit-backdrop-filter:blur(20px) saturate(180%);border-bottom:1px solid rgba(226,232,240,.6);display:flex;align-items:center;justify-content:space-between;padding:0 28px;position:sticky;top:0;z-index:50}
.admin-header h1{font-size:16px;font-weight:700;color:var(--gray-800);letter-spacing:-.02em}
.admin-header .mobile-toggle{display:none;background:none;border:none;font-size:20px;color:var(--gray-600);cursor:pointer;padding:8px;border-radius:8px;transition:background .2s}
.admin-header .mobile-toggle:hover{background:var(--gray-100)}
.admin-body{flex:1;padding:28px;min-height:calc(100vh - var(--header-h))}

/* ══ CUSTOMER LAYOUT ══ */
.cust-nav{background:rgba(255,255,255,.9);backdrop-filter:blur(16px) saturate(180%);-webkit-backdrop-filter:blur(16px) saturate(180%);border-bottom:1px solid var(--gray-200);position:sticky;top:0;z-index:50}
.cust-nav .inner{max-width:1100px;margin:0 auto;padding:0 16px;height:56px;display:flex;align-items:center;justify-content:space-between}
.cust-nav .logo{font-size:17px;font-weight:800;color:var(--blue-600);text-decoration:none;display:flex;align-items:center;gap:6px}
.cust-nav .links{display:none;gap:20px;font-size:13px}
.cust-nav .links a{color:var(--gray-500);text-decoration:none;font-weight:500;transition:all .2s;padding:4px 0}
.cust-nav .links a.active{color:var(--blue-600);font-weight:600}.cust-nav .links a:hover{color:var(--blue-600)}
.cust-body{max-width:1100px;margin:0 auto;padding:24px 16px;min-height:calc(100vh - 56px)}

.cust-bottom-nav{display:flex;position:fixed;bottom:0;left:0;right:0;background:rgba(255,255,255,.92);backdrop-filter:blur(16px) saturate(180%);-webkit-backdrop-filter:blur(16px) saturate(180%);border-top:1px solid var(--gray-200);z-index:50;padding:6px 0 env(safe-area-inset-bottom,6px)}
.cust-bottom-nav a{flex:1;display:flex;flex-direction:column;align-items:center;gap:2px;padding:6px 4px;font-size:10px;color:var(--gray-400);text-decoration:none;transition:all .2s;font-weight:500}
.cust-bottom-nav a.active{color:var(--blue-600)}.cust-bottom-nav a i{font-size:18px}

/* ══ SHARED COMPONENTS ══ */
.card{background:#fff;border:1px solid rgba(226,232,240,.7);border-radius:var(--radius-lg);box-shadow:0 1px 3px rgba(0,0,0,.02),0 1px 2px rgba(0,0,0,.03);overflow:hidden;transition:all .25s cubic-bezier(.4,0,.2,1)}
.card:hover{box-shadow:0 4px 16px rgba(0,0,0,.05)}
.card-head{padding:18px 22px;border-bottom:1px solid var(--gray-100);font-size:14px;font-weight:700;display:flex;align-items:center;justify-content:space-between;color:var(--gray-800)}

.flash{padding:14px 18px;border-radius:var(--radius);font-size:13px;display:flex;align-items:center;gap:10px;margin-bottom:20px;animation:flashIn .4s cubic-bezier(.16,1,.3,1);font-weight:500}
.flash-success{background:linear-gradient(135deg,#f0fdf4,#ecfdf5);border:1px solid #a7f3d0;color:#065f46}
.flash-error{background:linear-gradient(135deg,#fef2f2,#fff1f2);border:1px solid #fca5a5;color:#991b1b}
@keyframes flashIn{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:translateY(0)}}

.form-label{display:block;font-size:11.5px;font-weight:600;color:var(--gray-500);margin-bottom:6px;letter-spacing:.02em}
.form-input,.adm-input{width:100%;border:1.5px solid var(--gray-200);border-radius:10px;padding:10px 14px;font-size:13.5px;font-family:var(--font-body);outline:none;transition:all .2s;background:#fff;color:var(--gray-800)}
.form-input:focus,.adm-input:focus{border-color:var(--blue-400);box-shadow:0 0 0 3px rgba(59,130,246,.1);background:#fff}
.form-input::placeholder,.adm-input::placeholder{color:var(--gray-400)}
textarea.form-input,textarea.adm-input{resize:vertical;min-height:80px;line-height:1.6}
select.form-input,select.adm-input{appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%2394a3b8' d='M6 8L1 3h10z'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 12px center;padding-right:36px}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:7px;padding:10px 22px;border-radius:10px;font-weight:600;font-size:13px;font-family:var(--font-body);cursor:pointer;border:none;transition:all .2s cubic-bezier(.4,0,.2,1);text-decoration:none;position:relative;overflow:hidden;letter-spacing:-.01em}
.btn:active{transform:scale(.97)}
.btn-blue{background:linear-gradient(135deg,#2563eb,#3b82f6);color:#fff;box-shadow:0 1px 3px rgba(37,99,235,.2)}.btn-blue:hover{background:linear-gradient(135deg,#1d4ed8,#2563eb);box-shadow:0 4px 14px rgba(37,99,235,.3);transform:translateY(-1px)}
.btn-green{background:linear-gradient(135deg,#16a34a,#22c55e);color:#fff;box-shadow:0 1px 3px rgba(22,163,74,.2)}.btn-green:hover{background:linear-gradient(135deg,#15803d,#16a34a);box-shadow:0 4px 14px rgba(22,163,74,.25)}
.btn-red{background:linear-gradient(135deg,#dc2626,#ef4444);color:#fff;box-shadow:0 1px 3px rgba(220,38,38,.2)}.btn-red:hover{background:linear-gradient(135deg,#b91c1c,#dc2626)}
.btn-ghost{background:transparent;border:1.5px solid var(--gray-200);color:var(--gray-600)}.btn-ghost:hover{border-color:var(--gray-300);background:var(--gray-50);transform:translateY(-1px)}
.btn-sm{padding:7px 14px;font-size:12px;border-radius:8px}
.btn-xs{padding:5px 10px;font-size:11px;border-radius:6px}
.btn-full{width:100%}

.dtable{width:100%;font-size:13px;border-collapse:separate;border-spacing:0}
.dtable thead{background:var(--gray-50)}
.dtable th{padding:12px 18px;font-size:10.5px;text-transform:uppercase;letter-spacing:.6px;color:var(--gray-500);font-weight:700;text-align:left;white-space:nowrap;border-bottom:1px solid var(--gray-100)}
.dtable td{padding:14px 18px;border-bottom:1px solid rgba(241,245,249,.8);vertical-align:middle}
.dtable tbody tr{transition:background .12s}.dtable tbody tr:hover{background:rgba(59,130,246,.02)}
.table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;border-radius:var(--radius-lg)}.table-wrap::-webkit-scrollbar{height:4px}

.badge{display:inline-flex;align-items:center;padding:3px 10px;border-radius:20px;font-size:11px;font-weight:600;letter-spacing:.02em}
.badge-blue{background:var(--blue-50);color:var(--blue-600)}.badge-green{background:var(--green-50);color:var(--green-600)}.badge-red{background:var(--red-50);color:var(--red-600)}.badge-amber{background:var(--amber-50);color:var(--amber-600)}

.stat-card{background:#fff;border:1px solid rgba(226,232,240,.7);border-radius:var(--radius-lg);padding:22px;transition:all .3s cubic-bezier(.4,0,.2,1);position:relative;overflow:hidden}
.stat-card:hover{box-shadow:0 8px 24px rgba(0,0,0,.06);transform:translateY(-3px)}
.stat-card::before{content:'';position:absolute;top:0;left:0;right:0;height:3px;background:linear-gradient(90deg,var(--blue-500),var(--indigo-500));transform:scaleX(0);transform-origin:left;transition:transform .5s cubic-bezier(.16,1,.3,1)}
.stat-card:hover::before{transform:scaleX(1)}
.stat-card .label{font-size:12px;color:var(--gray-500);margin-bottom:6px;font-weight:500}
.stat-card .value{font-size:28px;font-weight:800;color:var(--gray-800);font-family:var(--font-mono);letter-spacing:-.03em}

/* Admin form panels */
.adm-panel{background:#fff;border:1px solid rgba(226,232,240,.7);border-radius:var(--radius-lg);overflow:hidden;box-shadow:0 1px 3px rgba(0,0,0,.02)}
.adm-panel-head{padding:16px 22px;border-bottom:1px solid var(--gray-100);display:flex;align-items:center;gap:10px}
.adm-panel-head .panel-icon{width:34px;height:34px;border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:14px;flex-shrink:0}
.adm-panel-head h3{font-size:14px;font-weight:700;color:var(--gray-800);letter-spacing:-.01em}
.adm-panel-body{padding:22px}
.adm-field{margin-bottom:16px}
.adm-field:last-child{margin-bottom:0}
.adm-field label{display:block;font-size:12px;font-weight:600;color:var(--gray-500);margin-bottom:5px}
.adm-field-row{display:grid;gap:12px}
.adm-field-row-2{grid-template-columns:1fr 1fr}
.adm-field-row-3{grid-template-columns:1fr 1fr 1fr}

.toast-wrap{position:fixed;top:16px;right:16px;z-index:9999;display:flex;flex-direction:column;gap:8px}
.toast{padding:12px 20px;border-radius:var(--radius);font-size:13px;font-weight:500;box-shadow:var(--shadow-lg);transform:translateX(120%);animation:toastIn .4s cubic-bezier(.16,1,.3,1) forwards;display:flex;align-items:center;gap:8px;max-width:360px;backdrop-filter:blur(12px)}
.toast.out{animation:toastOut .3s ease forwards}
.toast-ok{background:rgba(240,253,244,.95);color:#166534;border:1px solid #bbf7d0}
.toast-err{background:rgba(254,242,242,.95);color:#991b1b;border:1px solid #fecaca}
@keyframes toastIn{to{transform:translateX(0)}}@keyframes toastOut{to{transform:translateX(120%);opacity:0}}

.auth-wrap{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:24px;background:linear-gradient(135deg,var(--gray-50) 0%,var(--blue-50) 100%)}
.auth-card{max-width:420px;width:100%}
.auth-logo{text-align:center;margin-bottom:32px}.auth-logo i{font-size:36px;color:var(--blue-600)}
.auth-logo h1{font-size:22px;font-weight:800;color:var(--gray-800);margin-top:8px;letter-spacing:-.02em}
.auth-logo p{font-size:13px;color:var(--gray-400);margin-top:4px}
.auth-box{background:#fff;border:1px solid var(--gray-200);border-radius:var(--radius-xl);padding:32px;box-shadow:var(--shadow-lg)}

.track-hero{background:linear-gradient(160deg,#0f172a,#1e3a5f);padding:100px 20px 60px;text-align:center;color:#fff;position:relative;overflow:hidden}
.track-hero::before{content:'';position:absolute;inset:0;background:url("data:image/svg+xml,%3Csvg width='40' height='40' viewBox='0 0 40 40' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='20' cy='20' r='.5' fill='rgba(59,130,246,0.1)'/%3E%3C/svg%3E")}
.track-hero h1{font-size:clamp(24px,5vw,40px);font-weight:800;margin-bottom:8px;position:relative}
.track-hero p{color:var(--gray-400);margin-bottom:24px;position:relative}

.timeline{padding:0}.tl-item{display:flex;gap:14px}
.tl-dot-wrap{display:flex;flex-direction:column;align-items:center}
.tl-dot{width:12px;height:12px;border-radius:50%;border:3px solid #fff;box-shadow:0 0 0 2px currentColor;flex-shrink:0;transition:all .3s}
.tl-dot.active{animation:pulse 2s ease infinite}
.tl-line{width:2px;flex:1;background:var(--gray-200);margin:4px 0}
.tl-content{padding-bottom:24px}.tl-content .status{font-size:14px;font-weight:600}.tl-content .meta{font-size:12px;color:var(--gray-400);margin-top:2px}
@keyframes pulse{0%,100%{box-shadow:0 0 0 2px currentColor}50%{box-shadow:0 0 0 6px currentColor}}

.spinner{width:20px;height:20px;border:2px solid var(--gray-200);border-top-color:var(--blue-600);border-radius:50%;animation:spin .6s linear infinite;display:inline-block}
.spinner-lg{width:32px;height:32px;border-width:3px}
@keyframes spin{to{transform:rotate(360deg)}}

/* ══ NOTIFICATION CENTER ══ */
.notif-bell{position:relative;background:none;border:none;font-size:18px;color:var(--gray-500);cursor:pointer;padding:8px;border-radius:8px;transition:all .2s}
.notif-bell:hover{background:var(--gray-100);color:var(--gray-700)}
.notif-badge{position:absolute;top:2px;right:2px;width:18px;height:18px;background:var(--red-500);color:#fff;font-size:10px;font-weight:700;border-radius:50%;display:flex;align-items:center;justify-content:center;border:2px solid #fff;animation:notifPop .3s cubic-bezier(.16,1,.3,1)}
@keyframes notifPop{0%{transform:scale(0)}100%{transform:scale(1)}}
.notif-panel{position:absolute;top:calc(100% + 8px);right:0;width:380px;max-width:calc(100vw - 32px);background:#fff;border:1px solid var(--gray-200);border-radius:var(--radius-lg);box-shadow:var(--shadow-xl);overflow:hidden;z-index:100;animation:notifSlide .25s cubic-bezier(.16,1,.3,1)}
@keyframes notifSlide{0%{opacity:0;transform:translateY(-8px)}100%{opacity:1;transform:translateY(0)}}
.notif-panel-head{padding:14px 18px;border-bottom:1px solid var(--gray-100);display:flex;align-items:center;justify-content:space-between;font-size:14px;font-weight:700;color:var(--gray-800)}
.notif-panel-body{max-height:380px;overflow-y:auto}
.notif-item{padding:12px 18px;display:flex;gap:12px;transition:background .15s;cursor:pointer;border-bottom:1px solid var(--gray-50)}
.notif-item:hover{background:var(--blue-50)}
.notif-item.unread{background:rgba(59,130,246,.04)}
.notif-item .icon{width:36px;height:36px;border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:14px;flex-shrink:0}
.notif-item .text{flex:1;min-width:0}
.notif-item .title{font-size:13px;font-weight:600;color:var(--gray-800);line-height:1.3}
.notif-item .desc{font-size:12px;color:var(--gray-500);margin-top:2px}
.notif-item .time{font-size:11px;color:var(--gray-400);margin-top:4px}

/* ══ UTILITY HELPERS ══ */
.grid{display:grid}.grid-cols-1{grid-template-columns:repeat(1,1fr)}
.gap-3{gap:12px}.gap-4{gap:16px}.gap-5{gap:20px}.gap-6{gap:24px}
.flex{display:flex}.flex-wrap{flex-wrap:wrap}.flex-1{flex:1}.items-center{align-items:center}.items-end{align-items:flex-end}.items-start{align-items:flex-start}.justify-between{justify-content:space-between}.justify-center{justify-content:center}
.text-center{text-align:center}.text-right{text-align:right}.text-left{text-align:left}
.text-sm{font-size:14px}.text-xs{font-size:12px}.text-2xl{font-size:24px}.text-lg{font-size:18px}
.font-bold{font-weight:700}.font-semibold{font-weight:600}.font-medium{font-weight:500}
.text-gray-400{color:var(--gray-400)}.text-gray-500{color:var(--gray-500)}.text-gray-600{color:var(--gray-600)}.text-gray-700{color:var(--gray-700)}.text-gray-800{color:var(--gray-800)}
.text-blue-500{color:var(--blue-500)}.text-blue-600{color:var(--blue-600)}.text-green-500{color:var(--green-500)}.text-green-600{color:var(--green-600)}.text-red-500{color:var(--red-500)}.text-red-600{color:var(--red-600)}.text-amber-500{color:var(--amber-500)}.text-amber-600{color:var(--amber-600)}.text-amber-700{color:var(--amber-600)}.text-purple-500{color:var(--purple-500)}.text-purple-600{color:var(--purple-600)}
.bg-white{background:#fff}.bg-blue-50{background:var(--blue-50)}.bg-green-50{background:var(--green-50)}.bg-amber-50{background:var(--amber-50)}.bg-red-50{background:var(--red-50)}.bg-purple-50{background:var(--purple-50)}.bg-gray-50{background:var(--gray-50)}.bg-gray-100{background:var(--gray-100)}
.mt-1{margin-top:4px}.mt-2{margin-top:8px}.mt-3{margin-top:12px}.mt-4{margin-top:16px}.mb-1{margin-bottom:4px}.mb-2{margin-bottom:8px}.mb-3{margin-bottom:12px}.mb-4{margin-bottom:16px}.mb-6{margin-bottom:24px}.mb-8{margin-bottom:32px}
.p-3{padding:12px}.p-4{padding:16px}.p-5{padding:20px}.p-6{padding:24px}.p-8{padding:32px}
.px-2{padding-left:8px;padding-right:8px}.px-3{padding-left:12px;padding-right:12px}.px-4{padding-left:16px;padding-right:16px}.px-5{padding-left:20px;padding-right:20px}
.py-1{padding-top:4px;padding-bottom:4px}.py-2{padding-top:8px;padding-bottom:8px}.py-3{padding-top:12px;padding-bottom:12px}
.rounded-lg{border-radius:12px}.rounded-xl{border-radius:16px}.rounded-full{border-radius:9999px}
.border{border:1px solid var(--gray-200)}.border-b{border-bottom:1px solid var(--gray-200)}.border-gray-100{border-color:var(--gray-100)}.border-gray-300{border-color:var(--gray-300)}
.shadow-sm{box-shadow:var(--shadow-sm)}.shadow-md{box-shadow:var(--shadow-md)}
.overflow-hidden{overflow:hidden}.overflow-x-auto{overflow-x:auto}
.w-full{width:100%}.w-8{width:32px}.w-12{width:48px}.w-36{width:144px}.w-40{width:160px}.w-48{width:192px}
.h-8{height:32px}.h-12{height:48px}.h-14{height:56px}
.max-w-4xl{max-width:896px}.max-w-md{max-width:448px}
.mx-auto{margin-left:auto;margin-right:auto}
.inline{display:inline}.block{display:block}.inline-flex{display:inline-flex}
.mr-1{margin-right:4px}.mr-2{margin-right:8px}.ml-1{margin-left:4px}.ml-2{margin-left:8px}
.shrink-0{flex-shrink:0}.min-w-0{min-width:0}
.capitalize{text-transform:capitalize}.uppercase{text-transform:uppercase}
.divide-y>*:not(:first-child){border-top:1px solid var(--gray-100)}.divide-gray-50>*:not(:first-child){border-top-color:var(--gray-50)}
.whitespace-nowrap{white-space:nowrap}.truncate{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hidden{display:none}.relative{position:relative}.sticky{position:sticky}.top-0{top:0}
.min-h-screen{min-height:100vh}
.space-y-2>*+*{margin-top:8px}
.italic{font-style:italic}
.no-underline{text-decoration:none}
.cursor-pointer{cursor:pointer}
.select-none{user-select:none}
.transition{transition:all var(--transition)}

/* Responsive min-w for flex children */
.min-w-\[180px\]{min-width:180px}.min-w-\[200px\]{min-width:200px}

/* Empty States */
.empty-state{text-align:center;padding:48px 24px}
.empty-state i{font-size:48px;color:var(--gray-300);margin-bottom:12px;display:block}
.empty-state p{color:var(--gray-500);font-size:14px}
.empty-state .sub{font-size:13px;color:var(--gray-400);margin-top:4px}

/* Skeleton */
.skeleton{background:linear-gradient(90deg,var(--gray-100) 25%,var(--gray-50) 50%,var(--gray-100) 75%);background-size:200% 100%;animation:shimmer 1.5s infinite;border-radius:6px}
@keyframes shimmer{0%{background-position:200% 0}100%{background-position:-200% 0}}

/* Fade In */
.fade-up{opacity:0;transform:translateY(12px);animation:fadeUp .5s cubic-bezier(.16,1,.3,1) forwards}
@keyframes fadeUp{to{opacity:1;transform:translateY(0)}}
.fade-up:nth-child(1){animation-delay:.05s}.fade-up:nth-child(2){animation-delay:.1s}.fade-up:nth-child(3){animation-delay:.15s}.fade-up:nth-child(4){animation-delay:.2s}.fade-up:nth-child(5){animation-delay:.25s}

/* ══ RESPONSIVE ══ */
@media(min-width:576px){
    .sm\:grid-cols-2{grid-template-columns:repeat(2,1fr)}
}
@media(min-width:768px){
    .ln-nav .links{display:flex}.hamburger{display:none!important}
    .cust-nav .links{display:flex}.cust-bottom-nav{display:none}
    .cust-body{padding:32px 24px}
    .hero{padding:140px 40px 100px}.section{padding:100px 40px}
    .quote-card .form-row{grid-template-columns:1fr 1fr}
    .md\:grid-cols-2{grid-template-columns:repeat(2,1fr)}
    .md\:grid-cols-3{grid-template-columns:repeat(3,1fr)}
}
@media(min-width:1024px){
    .lg\:grid-cols-2{grid-template-columns:repeat(2,1fr)}
    .lg\:grid-cols-3{grid-template-columns:repeat(3,1fr)}
    .lg\:grid-cols-4{grid-template-columns:repeat(4,1fr)}
    .lg\:col-span-2{grid-column:span 2}
}
@media(max-width:1023px){
    .sidebar{transform:translateX(-100%)}.sidebar.open{transform:translateX(0)}
    .sidebar-overlay.open{display:block}
    .admin-main{margin-left:0}
    .admin-header .mobile-toggle{display:block}
    .admin-body{padding:16px}.admin-header{padding:0 16px}
    .notif-panel{width:calc(100vw - 32px);right:-8px}
}
@media(max-width:767px){
    .hero h1{font-size:28px}.hero .sub{font-size:14px}
    .stats-row{grid-template-columns:repeat(3,1fr);gap:8px;margin-top:32px}
    .stat .num{font-size:22px}
    .svc-grid{grid-template-columns:1fr}
    .steps-grid{grid-template-columns:1fr 1fr}
    .testimonial-grid{grid-template-columns:1fr}
    .footer-grid{grid-template-columns:1fr 1fr}
    .quote-card .form-row{grid-template-columns:1fr}
    .track-bar form{flex-direction:column}.track-bar button{width:100%}
    .cust-body{padding-bottom:80px}
    .auth-box{padding:24px}
    .hide-mobile,.hide-m,.ln-nav .cta .hide-mobile{display:none}
    .m-card-table thead{display:none}
    .m-card-table tbody tr{display:block;padding:14px 16px;border-bottom:1px solid var(--gray-100)}
    .m-card-table tbody td{display:flex;justify-content:space-between;padding:4px 0;border:none;font-size:13px}
    .m-card-table tbody td::before{content:attr(data-label);font-weight:600;color:var(--gray-500);font-size:12px;text-transform:uppercase;letter-spacing:.3px}
}
@media(max-width:380px){
    .hero h1{font-size:24px}.hero{padding:100px 16px 60px}
    .admin-body{padding:12px}
    .stat .num{font-size:18px}
    .steps-grid{grid-template-columns:1fr}.footer-grid{grid-template-columns:1fr}
}
@media print{
    .sidebar,.admin-header,.cust-nav,.cust-bottom-nav,.ln-nav,.no-print,.notif-bell,#aiChat{display:none!important}
    .admin-main{margin-left:0}body{background:#fff}
    .card,.stat-card{box-shadow:none;border:1px solid #ddd;break-inside:avoid}
}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}}
@media(hover:none) and (pointer:coarse){
    .btn,.sb-link,.nav-btn,.ln-btn{min-height:44px}
    .sb-link{padding:11px 12px}
    .dtable td,.dtable th{padding:14px 16px}
}