/* Fonts are now loaded via tags in each page's for reliability */ :root{ --navy-950:#080D18; --navy-900:#0B1220; --navy-800:#131F38; --navy-700:#1B2B4D; --line:#233052; --blue:#4C8DFF; --blue-dim:#2F6FED; --text:#EAF0FB; --muted:#8FA0C2; --white:#fff; --radius:10px; } /* ---------- Color Themes (selectable from Admin → Settings) ---------- */ html[data-theme="skyblue"]{ --navy-950:#CDE7FB; --navy-900:#DDEFFC; --navy-800:#FFFFFF; --navy-700:#C7E4FA; --line:#AFD8F5; --blue:#1E63D6; --blue-dim:#164BA8; --text:#0B1220; --muted:#3E5C82; --white:#0B1220; } html[data-theme="white"]{ --navy-950:#F5F6F8; --navy-900:#FFFFFF; --navy-800:#FFFFFF; --navy-700:#F0F1F4; --line:#E1E3E8; --blue:#2F6FED; --blue-dim:#1E4FBF; --text:#12151C; --muted:#5A6270; --white:#12151C; } html[data-theme="sky-navy"]{ --navy-950:#0B1220; --navy-900:#4FA6EE; --navy-800:#131F38; --navy-700:#1B2B4D; --line:#2A6FC2; --blue:#7AC2FF; --blue-dim:#4C8DFF; --text:#FFFFFF; --muted:#D7E9FB; --white:#fff; } html[data-theme="racing-red"]{ --navy-950:#150808; --navy-900:#1B0A0A; --navy-800:#2A1010; --navy-700:#3B1717; --line:#4F1F1F; --blue:#FF5555; --blue-dim:#E23B3B; --text:#FBEAEA; --muted:#C79494; --white:#fff; } html[data-theme="emerald"]{ --navy-950:#07140F; --navy-900:#0A1D16; --navy-800:#11301F; --navy-700:#18452C; --line:#215237; --blue:#3ECF8E; --blue-dim:#2BAF73; --text:#EAFBF2; --muted:#8FC2AA; --white:#fff; } /* "navy" (default) needs no override block — it matches :root above */ *{box-sizing:border-box;margin:0;padding:0} html{scroll-behavior:smooth;overflow-x:hidden} body{ font-family:'Inter',sans-serif; background:var(--navy-900); color:var(--text); line-height:1.6; overflow-x:hidden; max-width:100vw; } h1,h2,h3,h4{font-family:'Rajdhani',sans-serif;font-weight:700;letter-spacing:.5px;text-transform:uppercase;line-height:1.15} a{text-decoration:none;color:inherit} img{max-width:100%;display:block} ul{list-style:none} .container{max-width:1200px;margin:0 auto;padding:0 24px} :focus-visible{outline:2px solid var(--blue);outline-offset:2px} @media (prefers-reduced-motion: reduce){ *{animation-duration:.01ms !important;transition-duration:.01ms !important} } /* ---------- Buttons ---------- */ .btn{ display:inline-flex;align-items:center;gap:8px; padding:13px 28px;border-radius:6px;font-family:'Rajdhani',sans-serif; font-weight:700;text-transform:uppercase;letter-spacing:1px;font-size:.9rem; border:none;cursor:pointer;transition:transform .15s ease, box-shadow .15s ease, background .15s ease; clip-path:polygon(10px 0,100% 0,100% calc(100% - 10px),calc(100% - 10px) 100%,0 100%,0 10px); } .btn-primary{background:var(--blue);color:#fff} .btn-primary:hover{background:var(--blue-dim);transform:translateY(-2px);box-shadow:0 8px 20px rgba(76,141,255,.35)} .btn-outline{background:transparent;color:var(--text);border:1px solid var(--line)} .btn-outline:hover{border-color:var(--blue);color:var(--blue)} .btn-block{width:100%;justify-content:center} /* ---------- Eyebrow / section heading ---------- */ .eyebrow{ color:var(--blue);font-family:'Rajdhani',sans-serif;font-weight:700; letter-spacing:3px;text-transform:uppercase;font-size:.85rem; display:flex;align-items:center;gap:10px;justify-content:center;margin-bottom:10px; } .eyebrow::before,.eyebrow::after{content:"";width:24px;height:2px;background:var(--blue)} .section-title{font-size:2.1rem;text-align:center;margin-bottom:44px} .section-title span{color:var(--blue)} /* ---------- Header ---------- */ .topbar{ background:var(--navy-950);border-bottom:1px solid var(--line); font-size:.82rem;color:var(--muted);overflow:hidden;white-space:nowrap; } .topbar-marquee-track{overflow:hidden;width:100%;padding:8px 0} .topbar-marquee-content{display:inline-flex;gap:40px;white-space:nowrap;animation:topbarMarquee 18s linear infinite} .topbar-marquee-content .topbar-item{display:inline-flex;align-items:center;gap:6px;white-space:nowrap} @keyframes topbarMarquee{ 0%{transform:translateX(-40vw)} 100%{transform:translateX(140vw)} } @media(prefers-reduced-motion: reduce){ .topbar-marquee-content{animation:none;transform:none;padding-left:16px} } header.site-header{ background:var(--navy-900);backdrop-filter:blur(8px); border-bottom:1px solid var(--line);position:sticky;top:0;z-index:100; } .nav-wrap{display:flex;align-items:center;justify-content:space-between;padding:16px 24px} .logo{display:flex;align-items:center;gap:10px;font-family:'Rajdhani',sans-serif;font-weight:700;font-size:1.4rem} .logo .accent{color:var(--blue)} .logo-tagline{display:block;font-size:.6rem;letter-spacing:2px;color:var(--muted);text-transform:uppercase;font-family:'Inter',sans-serif;font-weight:400} .logo-mark{width:38px;height:38px;border-radius:8px;background:linear-gradient(135deg,var(--blue),var(--blue-dim));display:flex;align-items:center;justify-content:center;font-size:1.2rem} nav.main-nav ul{display:flex;gap:32px} nav.main-nav a{font-family:'Rajdhani',sans-serif;font-weight:600;letter-spacing:.5px;text-transform:uppercase;font-size:.9rem;color:var(--text);position:relative;padding:4px 0} nav.main-nav a:hover,nav.main-nav a.active{color:var(--blue)} nav.main-nav a.active::after{content:"";position:absolute;bottom:-4px;left:0;width:100%;height:2px;background:var(--blue)} .header-actions{display:flex;align-items:center;gap:18px} .menu-toggle{display:none;background:none;border:none;color:var(--text);font-size:1.5rem;cursor:pointer} @media(max-width:860px){ .nav-wrap{padding:12px 16px} .logo{font-size:1.05rem;gap:8px} .logo-mark{width:32px;height:32px;font-size:1rem} .logo-tagline{display:none} .header-actions{gap:10px} .header-actions .btn-primary{padding:9px 14px;font-size:.75rem;gap:5px} .topbar .container{padding:6px 16px;font-size:.72rem} .topbar-left{gap:12px} nav.main-nav{position:fixed;top:0;right:-100%;width:min(78vw,320px);height:100vh;background:var(--navy-800); flex-direction:column;padding:90px 30px;transition:right .3s ease;border-left:1px solid var(--line)} nav.main-nav.open{right:0} nav.main-nav ul{flex-direction:column;gap:22px} .menu-toggle{display:block} } /* ---------- Hero ---------- */ .hero{position:relative;overflow:hidden;border-bottom:1px solid var(--line)} .hero-bg{position:absolute;inset:0;background: radial-gradient(circle at 80% 20%, rgba(76,141,255,.18), transparent 55%), linear-gradient(180deg,var(--navy-900),var(--navy-950)); z-index:0} .hero-grid{position:relative;z-index:1;display:grid;grid-template-columns:1.1fr .9fr;gap:40px;align-items:center;padding:80px 24px 60px;max-width:1200px;margin:0 auto} .hero-eyebrow{color:var(--blue);font-family:'Rajdhani',sans-serif;font-weight:700;letter-spacing:3px;text-transform:uppercase;margin-bottom:14px;display:block} .hero h1{font-size:clamp(2.4rem,5vw,3.6rem);margin-bottom:18px} .hero h1 .thin{font-weight:500;display:block;color:var(--muted);font-size:.5em;letter-spacing:2px;margin-top:6px} .hero p{color:var(--muted);max-width:460px;margin-bottom:30px;font-size:1.02rem} .hero-cta{display:flex;gap:16px;flex-wrap:wrap} .hero-visual{position:relative;display:flex;justify-content:center} .speed-frame{position:relative;width:100%;aspect-ratio:4/3;border-radius:16px;overflow:hidden; background:linear-gradient(135deg,var(--navy-800),var(--navy-950)); border:1px solid var(--line);display:flex;align-items:center;justify-content:center} .speed-frame svg{width:78%} .speed-lines{position:absolute;inset:0;background:repeating-linear-gradient(100deg,transparent 0 40px, rgba(76,141,255,.06) 40px 42px);pointer-events:none} .hero-slide-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;border-radius:16px;opacity:0;transition:opacity 1.2s ease;z-index:1} .hero-slide-img.active{opacity:1;z-index:2} .hero-stats{display:flex;gap:16px 0;flex-wrap:wrap;margin-top:44px;border-top:1px solid var(--line);padding-top:24px} .hero-stats .stat{flex:1 1 auto;min-width:110px;text-align:left;padding-right:20px} .hero-stats .stat b{display:block;font-family:'Rajdhani',sans-serif;font-size:1.5rem;color:var(--blue)} .hero-stats .stat span{font-size:.82rem;color:var(--muted)} @media(max-width:860px){ .hero-grid{grid-template-columns:1fr;padding:0 20px 40px;gap:10px} .hero-visual{order:-1} .speed-frame{max-width:320px;margin:0 auto} .hero p{max-width:100%} .hero-eyebrow{margin-top:0} } /* ---------- Feature strip ---------- */ .feature-strip{background:var(--navy-800);border-bottom:1px solid var(--line)} .feature-strip .container{display:grid;grid-template-columns:repeat(4,1fr);gap:0} .feature-item{display:flex;align-items:center;gap:14px;padding:24px 20px;border-right:1px solid var(--line)} .feature-item:last-child{border-right:none} .feature-item .ic{width:44px;height:44px;flex-shrink:0;border-radius:8px;background:rgba(76,141,255,.12);color:var(--blue);display:flex;align-items:center;justify-content:center;font-size:1.2rem} .feature-item h4{font-size:.95rem;text-transform:none;margin-bottom:2px} .feature-item p{font-size:.8rem;color:var(--muted)} @media(max-width:860px){.feature-strip .container{grid-template-columns:repeat(2,1fr)}.feature-item{border-bottom:1px solid var(--line)}} /* ---------- Sections ---------- */ section{padding:80px 0} .section-alt{background:var(--navy-950)} /* Service cards */ .grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:26px} .grid-4{display:grid;grid-template-columns:repeat(4,1fr);gap:22px} @media(max-width:960px){.grid-3,.grid-4{grid-template-columns:repeat(2,1fr)}} @media(max-width:600px){.grid-3,.grid-4{grid-template-columns:1fr}} .service-card{background:var(--navy-800);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;transition:transform .2s, border-color .2s} .service-card:hover{transform:translateY(-6px);border-color:var(--blue)} .service-card .thumb{height:170px;background:linear-gradient(135deg,var(--navy-700),var(--navy-950));display:flex;align-items:center;justify-content:center;font-size:2.4rem;color:var(--blue)} .service-card .body{padding:22px} .service-card h3{font-size:1.15rem;margin-bottom:8px} .service-card p{color:var(--muted);font-size:.9rem;margin-bottom:14px} .service-card .more{color:var(--blue);font-family:'Rajdhani',sans-serif;font-weight:600;font-size:.85rem;text-transform:uppercase;letter-spacing:.5px} .offer-card{background:var(--navy-800);border:1px solid var(--line);border-radius:var(--radius);padding:26px 18px;text-align:center;transition:border-color .2s, transform .2s} .offer-card:hover{border-color:var(--blue);transform:translateY(-4px)} .offer-card .ic{width:52px;height:52px;margin:0 auto 14px;border-radius:50%;background:rgba(76,141,255,.12);color:var(--blue);display:flex;align-items:center;justify-content:center;font-size:1.4rem} .offer-card h4{font-size:1rem;margin-bottom:6px} .offer-card p{font-size:.82rem;color:var(--muted)} /* CTA banner */ .cta-banner{background:linear-gradient(120deg,var(--blue-dim),var(--blue));border-radius:16px;padding:48px;display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:20px;color:#08122A} .cta-banner h3{color:#08122A;font-size:1.6rem;margin-bottom:6px} .cta-banner p{color:#0F1F44} .cta-banner .btn-primary{background:#08122A;color:#fff} .cta-banner .btn-primary:hover{background:#000} /* ---------- Forms ---------- */ .form-card{background:var(--navy-800);border:1px solid var(--line);border-radius:var(--radius);padding:34px} .form-section{margin-bottom:30px;padding-bottom:26px;border-bottom:1px dashed var(--line)} .form-section:last-of-type{border-bottom:none;margin-bottom:20px;padding-bottom:0} .form-section-title{display:flex;align-items:center;gap:10px;margin-bottom:18px;font-family:'Rajdhani',sans-serif;font-weight:700;text-transform:uppercase;letter-spacing:.5px;font-size:1rem;color:var(--text)} .form-section-title .num{width:26px;height:26px;border-radius:50%;background:var(--blue);color:#fff;display:flex;align-items:center;justify-content:center;font-size:.82rem;flex-shrink:0} .service-check-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px} @media(max-width:600px){.service-check-grid{grid-template-columns:1fr}} .service-check{position:relative} .service-check input{position:absolute;opacity:0;width:100%;height:100%;top:0;left:0;margin:0;cursor:pointer} .service-check label{display:flex;align-items:center;gap:10px;padding:12px 14px;background:var(--navy-950);border:1px solid var(--line);border-radius:8px;font-size:.9rem;cursor:pointer;transition:.15s} .service-check label .box{width:18px;height:18px;border-radius:5px;border:1.5px solid var(--line);flex-shrink:0;display:flex;align-items:center;justify-content:center;transition:.15s} .service-check label .box i{opacity:0;font-size:.7rem;color:#fff;transition:.15s} .service-check input:checked + label{border-color:var(--blue);background:rgba(76,141,255,.08)} .service-check input:checked + label .box{background:var(--blue);border-color:var(--blue)} .service-check input:checked + label .box i{opacity:1} .service-check input:focus-visible + label{outline:2px solid var(--blue);outline-offset:2px} .form-row{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-bottom:16px} @media(max-width:600px){.form-row{grid-template-columns:1fr}} .field{margin-bottom:16px} .field label{display:block;font-size:.82rem;color:var(--muted);margin-bottom:6px;font-family:'Rajdhani',sans-serif;letter-spacing:.5px;text-transform:uppercase;font-weight:600} .field input,.field select,.field textarea{ width:100%;padding:12px 14px;background:var(--navy-950);border:1px solid var(--line); border-radius:6px;color:var(--text);font-family:'Inter',sans-serif;font-size:.95rem; } .field input:focus,.field select:focus,.field textarea:focus{border-color:var(--blue);outline:none} .field textarea{resize:vertical;min-height:90px} .service-checkbox-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px} @media(max-width:500px){.service-checkbox-grid{grid-template-columns:1fr}} .service-checkbox{display:flex;align-items:center;gap:10px;padding:12px 14px;background:var(--navy-950);border:1px solid var(--line);border-radius:6px;cursor:pointer;transition:border-color .15s} .service-checkbox:has(input:checked){border-color:var(--blue);background:rgba(76,141,255,.08)} .service-checkbox input{accent-color:var(--blue);width:16px;height:16px;flex-shrink:0} .service-checkbox span{font-size:.9rem;display:flex;align-items:center;gap:8px} .service-checkbox i{color:var(--blue);width:16px} .time-slot-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px} @media(max-width:500px){.time-slot-grid{grid-template-columns:repeat(2,1fr)}} .time-slot-btn{padding:13px 8px;background:#F1F2F4;border:none;border-radius:8px;color:#1a1a1a;font-family:'Inter',sans-serif;font-weight:600;font-size:.88rem;cursor:pointer;transition:.15s} .time-slot-btn:hover{background:#E3E5E9} .time-slot-btn.selected{background:#111319;color:#fff} .location-choice-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px} @media(max-width:500px){.location-choice-grid{grid-template-columns:1fr}} .location-choice{display:flex;align-items:center;gap:10px;padding:16px;background:var(--navy-950);border:1px solid var(--line);border-radius:8px;cursor:pointer;transition:border-color .15s} .location-choice:has(input:checked){border-color:var(--blue);background:rgba(76,141,255,.08)} .location-choice input{accent-color:var(--blue);width:16px;height:16px;flex-shrink:0} .location-choice span{font-size:.9rem;display:flex;align-items:center;gap:8px} .location-choice i{color:var(--blue);width:16px} .why-box{background:var(--navy-800);border:1px solid var(--line);border-radius:var(--radius);padding:30px} .why-box li{display:flex;gap:12px;align-items:flex-start;margin-bottom:16px;color:var(--muted);font-size:.92rem} .why-box li .chk{color:var(--blue);flex-shrink:0} .alert{padding:14px 18px;border-radius:8px;margin-bottom:22px;font-size:.92rem} .alert-success{background:rgba(46,167,110,.15);border:1px solid #2EA76E;color:#7BE0AB} .alert-error{background:rgba(220,60,60,.15);border:1px solid #DC3C3C;color:#FF9A9A} /* Pricing */ .price-card{background:var(--navy-800);border:1px solid var(--line);border-radius:var(--radius);padding:34px 26px;text-align:center;position:relative} .price-card.featured{border-color:var(--blue);background:linear-gradient(180deg,rgba(76,141,255,.1),var(--navy-800))} .price-card .badge{position:absolute;top:-13px;left:50%;transform:translateX(-50%);background:var(--blue);color:#fff;font-size:.7rem;font-family:'Rajdhani',sans-serif;font-weight:700;letter-spacing:1px;padding:5px 14px;border-radius:20px;text-transform:uppercase} .price-card h3{font-size:1.1rem;color:var(--muted);margin-bottom:14px} .price-card .amount{font-family:'Rajdhani',sans-serif;font-size:2.6rem;font-weight:700;color:var(--blue);margin-bottom:20px} .price-card .amount sup{font-size:1rem;top:-1.6em;letter-spacing:1px;font-family:'Rajdhani',sans-serif;font-weight:600;color:var(--muted)} .price-card ul{text-align:left;margin-bottom:26px} .price-card ul li{display:flex;gap:10px;align-items:center;padding:8px 0;border-bottom:1px dashed var(--line);font-size:.9rem;color:var(--muted)} .price-card ul li .chk{color:var(--blue)} /* Gallery */ .gallery-filter{display:flex;justify-content:center;gap:10px;margin-bottom:36px;flex-wrap:wrap} .gallery-filter button{background:var(--navy-800);border:1px solid var(--line);color:var(--muted);padding:9px 20px;border-radius:20px;font-family:'Rajdhani',sans-serif;font-weight:600;text-transform:uppercase;font-size:.82rem;letter-spacing:.5px;cursor:pointer;transition:.2s} .gallery-filter button.active,.gallery-filter button:hover{background:var(--blue);color:#fff;border-color:var(--blue)} .gallery-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px} @media(max-width:860px){.gallery-grid{grid-template-columns:repeat(2,1fr)}} .gallery-item{aspect-ratio:1;border-radius:8px;overflow:hidden;background:linear-gradient(135deg,var(--navy-700),var(--navy-950));display:flex;align-items:center;justify-content:center;color:var(--blue);font-size:1.8rem;cursor:pointer;transition:transform .2s} .gallery-item:hover{transform:scale(1.03)} /* Testimonial / stats */ .stats-row{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;text-align:center} .stats-row .stat b{display:block;font-family:'Rajdhani',sans-serif;font-size:2.2rem;color:var(--blue)} .stats-row .stat span{color:var(--muted);font-size:.85rem} @media(max-width:700px){.stats-row{grid-template-columns:repeat(2,1fr);row-gap:30px}} /* About */ .about-grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:50px;align-items:center} @media(max-width:860px){.about-grid{grid-template-columns:1fr}} .about-visual{border-radius:16px;overflow:hidden;background:linear-gradient(135deg,var(--navy-800),var(--navy-950));border:1px solid var(--line);aspect-ratio:4/5;display:flex;align-items:center;justify-content:center;font-size:3rem;color:var(--blue)} .about-list{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:24px 0} .about-list li{display:flex;gap:10px;align-items:center;font-size:.9rem;color:var(--muted)} .about-list li .chk{color:var(--blue)} /* Contact */ .contact-grid{display:grid;grid-template-columns:.8fr 1.2fr;gap:40px} @media(max-width:860px){.contact-grid{grid-template-columns:1fr}} .contact-info-item{display:flex;gap:14px;margin-bottom:22px;transition:transform .15s} a.contact-info-item{cursor:pointer} a.contact-info-item:hover{transform:translateX(4px)} a.contact-info-item:hover h4{color:var(--blue)} .contact-info-item .ic{width:42px;height:42px;border-radius:8px;background:rgba(76,141,255,.12);color:var(--blue);display:flex;align-items:center;justify-content:center;flex-shrink:0} .contact-info-item h4{font-size:.9rem;text-transform:none;margin-bottom:2px} .contact-info-item p{font-size:.85rem;color:var(--muted)} .map-box{margin-top:20px;border-radius:10px;overflow:hidden;border:1px solid var(--line)} /* Footer */ footer{background:var(--navy-950);border-top:1px solid var(--line);padding:60px 0 20px} .footer-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1.2fr;gap:36px;margin-bottom:40px} @media(max-width:860px){.footer-grid{grid-template-columns:1fr 1fr}} @media(max-width:560px){.footer-grid{grid-template-columns:1fr}} footer h4{font-size:.95rem;margin-bottom:18px;color:var(--text)} footer p{color:var(--muted);font-size:.88rem} footer ul li{margin-bottom:10px} footer ul a{color:var(--muted);font-size:.88rem} footer ul a:hover{color:var(--blue)} .footer-bottom{border-top:1px solid var(--line);padding-top:20px;display:flex;justify-content:space-between;color:var(--muted);font-size:.82rem;flex-wrap:wrap;gap:10px} .socials{display:flex;gap:10px;margin-top:16px} .socials a{width:34px;height:34px;border-radius:50%;background:var(--navy-800);border:1px solid var(--line);display:flex;align-items:center;justify-content:center} .socials a:hover{background:var(--blue);border-color:var(--blue)} /* Breadcrumb / page header */ .page-hero{background:linear-gradient(180deg,var(--navy-800),var(--navy-900));border-bottom:1px solid var(--line);padding:50px 0;text-align:center} .page-hero h1{font-size:2.2rem;margin-bottom:8px} .page-hero .crumb{color:var(--muted);font-size:.9rem} .page-hero .crumb span{color:var(--blue)} @media(max-width:860px){ .page-hero{padding:22px 20px} .page-hero h1{font-size:1.6rem;margin-bottom:0} } /* Admin */ .admin-shell{display:flex;min-height:100vh} .admin-sidebar{width:230px;background:var(--navy-950);border-right:1px solid var(--line);padding:26px 18px;flex-shrink:0} .admin-sidebar .logo{margin-bottom:34px} .admin-sidebar a{display:flex;align-items:center;gap:10px;padding:11px 14px;border-radius:8px;color:var(--muted);font-family:'Rajdhani',sans-serif;font-weight:600;text-transform:uppercase;font-size:.85rem;letter-spacing:.5px;margin-bottom:4px} .admin-sidebar a:hover,.admin-sidebar a.active{background:var(--navy-800);color:var(--blue)} .admin-main{flex:1;padding:34px;max-width:100%;overflow-x:auto} .admin-topbar{display:flex;justify-content:space-between;align-items:center;margin-bottom:28px} .admin-cards{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin-bottom:30px} @media(max-width:900px){.admin-cards{grid-template-columns:repeat(2,1fr)}.admin-shell{flex-direction:column}.admin-sidebar{width:100%;display:flex;align-items:center;justify-content:space-between;padding:14px 18px}.admin-sidebar .nav-links{display:flex;gap:6px}} .admin-card{background:var(--navy-800);border:1px solid var(--line);border-radius:var(--radius);padding:20px} .admin-card b{font-family:'Rajdhani',sans-serif;font-size:1.8rem;display:block;color:var(--blue)} .admin-card span{color:var(--muted);font-size:.82rem} table.data-table{width:100%;border-collapse:collapse;background:var(--navy-800);border-radius:var(--radius);overflow:hidden} table.data-table th,table.data-table td{padding:13px 16px;text-align:left;font-size:.88rem;border-bottom:1px solid var(--line)} table.data-table th{background:var(--navy-950);text-transform:uppercase;font-family:'Rajdhani',sans-serif;font-size:.78rem;letter-spacing:.5px;color:var(--muted)} table.data-table tr:last-child td{border-bottom:none} .status-pill{padding:5px 12px;border-radius:20px;font-size:.75rem;font-weight:600;display:inline-block} .status-Pending{background:rgba(255,190,60,.15);color:#FFC94A} .status-Confirmed{background:rgba(76,141,255,.15);color:#4C8DFF} .status-OnService{background:rgba(255,159,28,.15);color:#FF9F1C} .status-Completed{background:rgba(46,167,110,.15);color:#2EA76E} .status-Cancelled{background:rgba(220,60,60,.15);color:#DC3C3C} .status-Due{background:rgba(220,60,60,.15);color:#DC3C3C} .login-shell{min-height:100vh;display:flex;align-items:center;justify-content:center;background:var(--navy-950)} .login-box{width:360px;background:var(--navy-800);border:1px solid var(--line);border-radius:var(--radius);padding:38px} .login-box .logo{justify-content:center;margin-bottom:26px} select.status-select{padding:7px 10px;background:var(--navy-950);border:1px solid var(--line);color:var(--text);border-radius:6px}