body { font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; background: #f2f5f9; color: #111827; }
footer, .site-footer { background: #0f172a; color: #fff; }
.site-footer {
    border-top: 4px solid #14b8a6;
}
.site-footer p,
.site-footer blockquote {
    color: rgba(255, 255, 255, 0.78);
}
.footer-team {
    display: grid;
    gap: 0.8rem;
}
.footer-person {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}
.footer-person img {
    width: 58px;
    height: 58px;
    border: 2px solid rgba(255, 255, 255, 0.22);
    border-radius: 50%;
    object-fit: cover;
}
.footer-person span {
    display: block;
    color: #5eead4;
    font-size: 0.78rem;
    font-weight: 800;
    text-transform: uppercase;
}
.footer-person strong {
    display: block;
    color: #fff;
}
.footer-quote {
    padding-left: 1rem;
    border-left: 4px solid #14b8a6;
    font-style: italic;
}
.footer-policy-links {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem 1.25rem;
    border-top: 1px solid rgba(255, 255, 255, 0.14);
}
.footer-policy-links a {
    color: rgba(255, 255, 255, 0.82);
    text-decoration: none;
    font-size: 0.92rem;
}
.footer-policy-links a:hover {
    color: #5eead4;
}
.site-header {
    position: relative;
    overflow: hidden;
    background:
        linear-gradient(135deg, rgba(20, 184, 166, 0.26), transparent 34%),
        linear-gradient(120deg, #0f172a 0%, #12313f 52%, #14532d 100%);
    color: #fff;
}
.site-header::after {
    content: "";
    position: absolute;
    inset: auto -8% -58px 42%;
    height: 118px;
    border-radius: 999px 0 0 0;
    background: rgba(255, 255, 255, 0.1);
    transform: rotate(-3deg);
}
.site-header-inner {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.25rem;
    padding-top: 1.35rem;
    padding-bottom: 1.35rem;
}
.site-brand {
    display: inline-flex;
    align-items: center;
    gap: 0.9rem;
    color: #fff;
    text-decoration: none;
}
.site-brand:hover { color: #fff; }
.site-brand-mark {
    position: relative;
    display: inline-grid;
    flex: 0 0 auto;
    place-items: center;
    width: 62px;
    height: 62px;
    border: 1px solid rgba(255, 255, 255, 0.74);
    border-radius: 18px;
    background:
        linear-gradient(145deg, #ffffff 0%, #ecfeff 44%, #d1fae5 100%);
    color: #0f172a;
    box-shadow:
        0 16px 34px rgba(0, 0, 0, 0.28),
        inset 0 0 0 5px rgba(20, 184, 166, 0.14);
    transform: rotate(-4deg);
}
.site-brand-mark::before {
    content: "";
    position: absolute;
    inset: 8px;
    border: 2px solid rgba(15, 118, 110, 0.22);
    border-radius: 14px;
}
.site-brand-mark::after {
    content: "";
    position: absolute;
    right: -6px;
    bottom: 9px;
    width: 22px;
    height: 22px;
    border: 3px solid #fff;
    border-radius: 50%;
    background: #f59e0b;
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
}
.site-brand-mark-core {
    position: relative;
    z-index: 1;
    font-size: 1.35rem;
    font-weight: 900;
    letter-spacing: 0;
    line-height: 1;
    transform: rotate(4deg);
}
.site-brand-mark-spark {
    position: absolute;
    z-index: 2;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #14b8a6;
    box-shadow: 0 0 0 3px rgba(20, 184, 166, 0.16);
}
.site-brand-mark-spark-1 {
    top: 10px;
    right: 13px;
}
.site-brand-mark-spark-2 {
    bottom: 14px;
    left: 11px;
    width: 5px;
    height: 5px;
    background: #2563eb;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15);
}
.site-brand-mark-spark-3 {
    top: 17px;
    left: -3px;
    width: 9px;
    height: 9px;
    background: #f59e0b;
    box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.18);
}
.site-brand-name {
    display: block;
    font-size: clamp(1.25rem, 2vw, 1.8rem);
    font-weight: 800;
    line-height: 1.05;
}
.site-brand-location {
    display: block;
    margin-top: 0.35rem;
    color: rgba(255, 255, 255, 0.82);
    font-size: 0.95rem;
}
.site-language-switch,
.admin-language-switch {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.35rem;
    border: 1px solid rgba(255, 255, 255, 0.26);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.12);
}
.site-language-switch span {
    padding: 0 0.45rem;
    color: rgba(255, 255, 255, 0.84);
    font-size: 0.82rem;
    font-weight: 800;
}
.site-language-switch a,
.admin-language-switch a {
    min-width: 42px;
    padding: 0.28rem 0.62rem;
    border-radius: 999px;
    color: #fff;
    font-size: 0.82rem;
    font-weight: 800;
    line-height: 1.2;
    text-align: center;
    text-decoration: none;
}
.site-language-switch a.active,
.admin-language-switch a.active {
    background: #fff;
    color: #0f766e;
}
.admin-language-switch {
    border-color: rgba(255, 255, 255, 0.22);
    background: rgba(255, 255, 255, 0.08);
}
.admin-sidebar {
    position: fixed;
    inset: 0 auto 0 0;
    z-index: 1030;
    display: flex;
    width: 250px;
    flex-direction: column;
    overflow-y: auto;
    background: #0f172a;
    color: #fff;
    box-shadow: 12px 0 30px rgba(15, 23, 42, 0.16);
}
.admin-sidebar-brand {
    display: grid;
    gap: 0.2rem;
    padding: 1.1rem 1rem;
    color: #fff;
    text-decoration: none;
    border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}
.admin-sidebar-brand:hover {
    color: #fff;
}
.admin-sidebar-brand span {
    font-weight: 850;
    line-height: 1.1;
}
.admin-sidebar-brand small {
    color: #5eead4;
    font-weight: 700;
    text-transform: uppercase;
}
.admin-sidebar-collapse {
    display: flex;
    flex: 1;
    flex-direction: column;
}
.admin-sidebar-nav {
    display: grid;
    gap: 0.25rem;
    padding: 0.75rem;
}
.admin-sidebar-nav a {
    display: block;
    border-radius: 0.45rem;
    padding: 0.7rem 0.8rem;
    color: rgba(255, 255, 255, 0.78);
    font-weight: 700;
    text-decoration: none;
}
.admin-sidebar-nav a:hover,
.admin-sidebar-nav a.active {
    background: rgba(20, 184, 166, 0.18);
    color: #fff;
}
.admin-sidebar-actions {
    display: grid;
    gap: 0.65rem;
    margin-top: auto;
    padding: 0.9rem;
    border-top: 1px solid rgba(255, 255, 255, 0.12);
}
.admin-sidebar-toggle {
    display: none;
}
body.admin-shell,
body:has(.admin-sidebar) {
    padding-left: 250px;
    background: #f2f5f9;
}
body.admin-shell > main.container,
body.admin-shell > main.container-fluid,
body:has(.admin-sidebar) > main.container,
body:has(.admin-sidebar) > main.container-fluid {
    max-width: none;
}
.site-header-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 0.65rem;
}
.site-contact-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    min-height: 42px;
    padding: 0.45rem 0.85rem;
    border: 1px solid rgba(255, 255, 255, 0.26);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.11);
    color: #fff;
    font-weight: 700;
    text-decoration: none;
    backdrop-filter: blur(10px);
}
.site-contact-pill:hover { color: #fff; background: rgba(255, 255, 255, 0.18); }
.site-contact-pill-accent {
    background: #22c55e;
    border-color: #22c55e;
    color: #052e16;
}
.site-contact-pill-accent:hover { color: #052e16; background: #4ade80; }
.site-contact-icon {
    display: inline-grid;
    place-items: center;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.2);
    font-size: 0.72rem;
    font-weight: 900;
}
.site-navbar {
    background: transparent;
    margin-top: -0.75rem;
}
.site-nav-shell {
    min-height: 64px;
    padding: 0.65rem 1rem;
    border: 1px solid rgba(15, 23, 42, 0.08);
    border-radius: 0.75rem;
    background: rgba(255, 255, 255, 0.96);
    box-shadow: 0 14px 34px rgba(15, 23, 42, 0.11);
    backdrop-filter: blur(12px);
}
a { color: #2563eb; }
.card { border-radius: 1rem; }
.vhalidikri-announcement {
    padding: 2rem 1rem;
}
.vhalidikri-blink {
    margin: 0;
    font-size: clamp(2rem, 5vw, 4rem);
    font-weight: 900;
    letter-spacing: 0;
    animation: vhalidikriBlink 1.1s ease-in-out infinite, vhalidikriColor 3.6s linear infinite;
}
@keyframes vhalidikriBlink {
    0%, 100% {
        opacity: 1;
        transform: scale(1);
    }
    50% {
        opacity: 0.45;
        transform: scale(1.02);
    }
}
@keyframes vhalidikriColor {
    0% {
        color: #dc2626;
    }
    25% {
        color: #2563eb;
    }
    50% {
        color: #16a34a;
    }
    75% {
        color: #d97706;
    }
    100% {
        color: #be123c;
    }
}
.navbar-brand, .nav-link { font-weight: 600; }
.site-home-link {
    color: #0f766e;
    font-weight: 800;
}
.site-navbar .nav-link {
    border-radius: 999px;
    color: #334155;
    padding-right: 0.8rem;
    padding-left: 0.8rem;
}
.site-navbar .nav-link:hover,
.site-navbar .nav-link.active {
    background: #ecfeff;
    color: #0f766e;
}
.btn-primary { background: #2563eb; border: none; }
.btn-primary:hover { background: #1d4ed8; }

.services-page {
    position: relative;
}
.services-hero {
    max-width: 880px;
}
.services-kicker {
    display: inline-flex;
    align-items: center;
    margin-bottom: 0.7rem;
    padding: 0.35rem 0.75rem;
    border: 1px solid rgba(37, 99, 235, 0.18);
    border-radius: 999px;
    background: #eff6ff;
    color: #1d4ed8;
    font-size: 0.82rem;
    font-weight: 800;
    text-transform: uppercase;
}
.service-card {
    position: relative;
    display: flex;
    min-height: 268px;
    height: 100%;
    flex-direction: column;
    overflow: hidden;
    padding: 1.35rem;
    border: 1px solid rgba(37, 99, 235, 0.34);
    border-radius: 1rem;
    background:
        linear-gradient(145deg, rgba(255, 255, 255, 0.98), rgba(248, 250, 252, 0.92)),
        radial-gradient(circle at 100% 0%, rgba(37, 99, 235, 0.16), transparent 36%);
    box-shadow: 0 14px 34px rgba(15, 23, 42, 0.08);
    transition: transform 180ms ease, box-shadow 180ms ease, border-color 180ms ease;
}
.service-card::before {
    content: attr(data-service-mark);
    position: absolute;
    right: -0.18em;
    bottom: -0.22em;
    z-index: 0;
    color: rgba(37, 99, 235, 0.07);
    font-size: clamp(4.8rem, 9vw, 7.3rem);
    font-weight: 900;
    line-height: 0.85;
    pointer-events: none;
}
.service-card::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    background: linear-gradient(120deg, transparent 0%, transparent 48%, rgba(255, 255, 255, 0.56) 49%, transparent 72%);
    opacity: 0;
    transform: translateX(-30%);
    transition: opacity 180ms ease, transform 240ms ease;
    pointer-events: none;
}
.service-card:hover {
    transform: translateY(-6px);
    border-color: rgba(37, 99, 235, 0.78);
    box-shadow: 0 22px 46px rgba(37, 99, 235, 0.16);
}
.service-card:hover::after {
    opacity: 1;
    transform: translateX(18%);
}
.service-card > * {
    position: relative;
    z-index: 1;
}
.service-card-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    margin-bottom: 0.95rem;
}
.service-card-icon {
    display: inline-grid;
    min-width: 54px;
    height: 44px;
    place-items: center;
    padding: 0 0.65rem;
    border-radius: 0.8rem;
    background: #dbeafe;
    color: #1d4ed8;
    font-size: 0.76rem;
    font-weight: 900;
    box-shadow: inset 0 0 0 1px rgba(37, 99, 235, 0.16);
}
.service-card-badge {
    padding: 0.33rem 0.68rem;
    border-radius: 999px;
    background: rgba(37, 99, 235, 0.1);
    color: #1d4ed8;
    font-size: 0.78rem;
    font-weight: 800;
}
.service-card h5 {
    margin-bottom: 0.7rem;
    color: #0f172a;
    font-size: 1.28rem;
    font-weight: 850;
    line-height: 1.2;
}
.service-card p {
    color: #334155;
    font-size: 1rem;
    line-height: 1.55;
}
.service-card-action {
    margin-top: auto;
    border-radius: 0.7rem;
    font-weight: 800;
    box-shadow: 0 10px 20px rgba(37, 99, 235, 0.18);
}
.service-card-commerce { border-color: rgba(16, 185, 129, 0.42); }
.service-card-commerce .service-card-icon,
.service-card-commerce .service-card-badge { background: #dcfce7; color: #15803d; }
.service-card-commerce::before { color: rgba(22, 163, 74, 0.08); }
.service-card-print { border-color: rgba(14, 165, 233, 0.42); }
.service-card-print .service-card-icon,
.service-card-print .service-card-badge { background: #e0f2fe; color: #0369a1; }
.service-card-print::before { color: rgba(14, 165, 233, 0.08); }
.service-card-identity { border-color: rgba(245, 158, 11, 0.48); }
.service-card-identity .service-card-icon,
.service-card-identity .service-card-badge { background: #fef3c7; color: #b45309; }
.service-card-identity::before { color: rgba(245, 158, 11, 0.1); }
.service-card-pan,
.service-card-search,
.service-card-details { border-color: rgba(37, 99, 235, 0.44); }
.service-card-pan .service-card-icon,
.service-card-pan .service-card-badge,
.service-card-search .service-card-icon,
.service-card-search .service-card-badge,
.service-card-details .service-card-icon,
.service-card-details .service-card-badge { background: #dbeafe; color: #1d4ed8; }
.service-card-aadhaar { border-color: rgba(20, 184, 166, 0.46); }
.service-card-aadhaar .service-card-icon,
.service-card-aadhaar .service-card-badge { background: #ccfbf1; color: #0f766e; }
.service-card-aadhaar::before { color: rgba(20, 184, 166, 0.09); }
.service-card-farmer { border-color: rgba(101, 163, 13, 0.46); }
.service-card-farmer .service-card-icon,
.service-card-farmer .service-card-badge { background: #ecfccb; color: #4d7c0f; }
.service-card-farmer::before { color: rgba(101, 163, 13, 0.09); }

.quick-action-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 0.72rem;
}
.quick-action,
.quick-action-grid .btn-success {
    position: relative;
    display: inline-flex;
    min-height: 50px;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    padding: 0.72rem 1.05rem;
    border: 0;
    border-radius: 0.75rem;
    color: #fff;
    font-size: 1rem;
    font-weight: 800;
    line-height: 1.15;
    text-align: center;
    text-decoration: none;
    box-shadow: 0 12px 24px rgba(15, 23, 42, 0.12);
    transition: transform 160ms ease, box-shadow 160ms ease, filter 160ms ease;
}
.quick-action::before,
.quick-action-grid .btn-success::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(120deg, transparent 0%, rgba(255, 255, 255, 0.24) 42%, transparent 70%);
    opacity: 0;
    transform: translateX(-45%);
    transition: opacity 160ms ease, transform 220ms ease;
}
.quick-action:hover,
.quick-action-grid .btn-success:hover {
    color: #fff;
    filter: saturate(1.08);
    transform: translateY(-3px);
    box-shadow: 0 18px 32px rgba(15, 23, 42, 0.18);
}
.quick-action:hover::before,
.quick-action-grid .btn-success:hover::before {
    opacity: 1;
    transform: translateX(40%);
}
.quick-action-pvc { background: linear-gradient(135deg, #2563eb, #38bdf8); }
.quick-action-orders { background: linear-gradient(135deg, #0f766e, #2dd4bf); }
.quick-action-pan { background: linear-gradient(135deg, #7c3aed, #2563eb); }
.quick-action-pan-find { background: linear-gradient(135deg, #be123c, #f97316); }
.quick-action-pan-details { background: linear-gradient(135deg, #4338ca, #06b6d4); }
.quick-action-eid { background: linear-gradient(135deg, #0891b2, #14b8a6); }
.quick-action-store { background: linear-gradient(135deg, #16a34a, #84cc16); }
.quick-action-grid .btn-success,
.quick-action-scheme-apply { background: linear-gradient(135deg, #15803d, #f59e0b); }
.quick-action-services { background: linear-gradient(135deg, #1d4ed8, #8b5cf6); }
.quick-action-schemes { background: linear-gradient(135deg, #b45309, #f59e0b); }
.quick-action-jobs { background: linear-gradient(135deg, #0f172a, #64748b); }
.site-login-actions .btn { min-width: 132px; }
.dashboard-grid {
    display: grid;
    grid-template-columns: minmax(250px, 0.9fr) minmax(360px, 1.45fr) minmax(260px, 1fr);
    gap: 1rem;
    align-items: stretch;
}
.dashboard-panel,
.dashboard-slider {
    min-height: 430px;
}
.dashboard-panel {
    display: flex;
    flex-direction: column;
    padding: 1rem;
    border: 1px solid rgba(15, 23, 42, 0.08);
    border-radius: 0.75rem;
    background: #fff;
    box-shadow: 0 12px 28px rgba(15, 23, 42, 0.08);
}
.dashboard-news-stack {
    display: grid;
    grid-template-rows: minmax(0, 1fr) minmax(0, 1fr);
    gap: 1rem;
    min-height: 430px;
}
.dashboard-news-stack .dashboard-panel {
    min-height: 0;
}
.dashboard-brief-panel .notice-list {
    flex: 1;
    min-height: 0;
}
.dashboard-panel-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    padding-bottom: 0.85rem;
    border-bottom: 1px solid #e5e7eb;
}
.dashboard-eyebrow {
    color: #0f766e;
    font-size: 0.75rem;
    font-weight: 800;
    text-transform: uppercase;
}
.dashboard-notice-panel {
    border-color: rgba(220, 38, 38, 0.2);
    background: linear-gradient(180deg, #fff 0%, #fff7ed 100%);
}
.notice-heading {
    display: inline-block;
    padding: 0.18rem 0.55rem;
    border-radius: 0.35rem;
    background: #fef08a;
    color: #b91c1c;
    font-weight: 900;
    box-shadow: inset 0 -2px 0 rgba(220, 38, 38, 0.16);
}
.notice-list,
.service-list {
    display: grid;
    gap: 0.7rem;
    margin-top: 0.9rem;
    overflow: auto;
}
.notice-list-compact {
    gap: 0.55rem;
}
.notice-item {
    display: grid;
    gap: 0.25rem;
    padding: 0.8rem;
    border: 1px solid #e2e8f0;
    border-left: 4px solid #0f766e;
    border-radius: 0.5rem;
    background: #f8fafc;
    color: #111827;
    text-decoration: none;
}
.notice-list-compact .notice-item {
    padding: 0.65rem;
}
.dashboard-notice-panel .notice-item {
    overflow: hidden;
    border-left-color: #dc2626;
    background: #fff;
}
.notice-moving-title {
    display: block;
    width: max-content;
    min-width: 100%;
    white-space: nowrap;
    color: #b91c1c;
    text-shadow: 0 0 10px rgba(250, 204, 21, 0.55);
    animation: noticeTitleMove 9s linear infinite;
}
.dashboard-notice-panel .notice-item:hover .notice-moving-title {
    animation-play-state: paused;
}
.notice-item:hover {
    border-color: #99f6e4;
    color: #0f766e;
}
.notice-date,
.notice-item span:last-child,
.service-list-item small {
    color: #64748b;
    font-size: 0.82rem;
}
.notice-empty {
    padding: 1rem;
    border-radius: 0.5rem;
    background: #f8fafc;
    color: #64748b;
}
@keyframes noticeTitleMove {
    0% {
        transform: translateX(100%);
    }
    100% {
        transform: translateX(-100%);
    }
}
.dashboard-slider {
    overflow: hidden;
    border-radius: 0.75rem;
    box-shadow: 0 16px 34px rgba(15, 23, 42, 0.16);
}
.dashboard-slide {
    position: relative;
    display: flex;
    min-height: 430px;
    height: 100%;
    flex-direction: column;
    justify-content: flex-end;
    gap: 0.8rem;
    padding: clamp(1.25rem, 3vw, 2rem);
    color: #fff;
    isolation: isolate;
}
.dashboard-slide::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -2;
    background-size: cover;
    background-position: center;
}
.dashboard-slide::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(180deg, rgba(15, 23, 42, 0.2), rgba(15, 23, 42, 0.86));
}
.dashboard-slide-csc::before {
    background:
        linear-gradient(135deg, rgba(14, 165, 233, 0.55), rgba(20, 184, 166, 0.42)),
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 900 600'%3E%3Crect width='900' height='600' fill='%230f766e'/%3E%3Cpath d='M90 410h720v88H90z' fill='%23f8fafc' opacity='.9'/%3E%3Cpath d='M165 190h570v230H165z' fill='%231e293b'/%3E%3Cpath d='M205 230h210v40H205zm0 70h490v28H205zm0 55h390v28H205z' fill='%23ecfeff'/%3E%3Ccircle cx='705' cy='248' r='42' fill='%2322c55e'/%3E%3Cpath d='M120 500h660' stroke='%230f172a' stroke-width='18' opacity='.24'/%3E%3C/svg%3E");
}
.dashboard-slide-pvc::before {
    background:
        linear-gradient(135deg, rgba(37, 99, 235, 0.5), rgba(15, 118, 110, 0.34)),
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 900 600'%3E%3Crect width='900' height='600' fill='%23111827'/%3E%3Crect x='150' y='150' width='600' height='310' rx='30' fill='%23f8fafc'/%3E%3Crect x='190' y='205' width='230' height='34' fill='%232563eb'/%3E%3Crect x='190' y='270' width='420' height='24' fill='%2394a3b8'/%3E%3Crect x='190' y='322' width='350' height='24' fill='%2394a3b8'/%3E%3Ccircle cx='665' cy='255' r='54' fill='%2314b8a6'/%3E%3Crect x='620' y='340' width='90' height='72' rx='12' fill='%23e2e8f0'/%3E%3C/svg%3E");
}
.dashboard-slide-center::before {
    background:
        linear-gradient(135deg, rgba(15, 118, 110, 0.54), rgba(37, 99, 235, 0.34)),
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 900 600'%3E%3Crect width='900' height='600' fill='%230f172a'/%3E%3Crect x='130' y='170' width='640' height='300' fill='%23f8fafc'/%3E%3Crect x='170' y='220' width='250' height='170' fill='%23bae6fd'/%3E%3Crect x='465' y='220' width='260' height='170' fill='%23ccfbf1'/%3E%3Crect x='185' y='405' width='520' height='36' fill='%2314b8a6'/%3E%3Crect x='115' y='135' width='670' height='55' fill='%231e40af'/%3E%3Cpath d='M155 155h590' stroke='%23fff' stroke-width='12' opacity='.85'/%3E%3Cpath d='M90 470h720' stroke='%23000000' stroke-width='24' opacity='.18'/%3E%3C/svg%3E");
}
.dashboard-slide-uploaded::before {
    background-image: var(--slide-image);
}
.dashboard-slide-uploaded {
    background: #0f172a;
}
.dashboard-slide-uploaded::before {
    display: none;
}
.dashboard-slide-uploaded::after {
    background: linear-gradient(180deg, rgba(15, 23, 42, 0.08), rgba(15, 23, 42, 0.58));
}
.dashboard-slide-uploaded h1 {
    font-size: clamp(1.45rem, 3vw, 2.25rem);
}
.dashboard-slide-photo {
    position: absolute;
    inset: 0;
    z-index: -2;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.dashboard-slide-content {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.8rem;
}
.dashboard-slide span {
    align-self: flex-start;
    padding: 0.35rem 0.7rem;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.18);
    font-size: 0.78rem;
    font-weight: 800;
    text-transform: uppercase;
}
.dashboard-slide h1 {
    max-width: 620px;
    margin: 0;
    font-size: clamp(1.7rem, 4vw, 2.75rem);
    font-weight: 850;
    line-height: 1.08;
}
.dashboard-slide p {
    max-width: 560px;
    margin: 0;
    color: rgba(255, 255, 255, 0.86);
    font-size: 1.02rem;
}
.service-list-item {
    display: grid;
    grid-template-columns: 42px 1fr;
    gap: 0.75rem;
    align-items: center;
    padding: 0.75rem;
    border: 1px solid #e2e8f0;
    border-radius: 0.5rem;
    color: #111827;
    text-decoration: none;
}
.service-list-item:hover {
    border-color: #bfdbfe;
    background: #eff6ff;
}
.service-list-item > span {
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: #e0f2fe;
    color: #075985;
    font-weight: 900;
    font-size: 1.1rem;
}
.service-tone-1 > span { background: #dbeafe; color: #1d4ed8; }
.service-tone-2 > span { background: #ccfbf1; color: #0f766e; }
.service-tone-3 > span { background: #fef3c7; color: #b45309; }
.service-tone-4 > span { background: #fce7f3; color: #be185d; }
.service-tone-5 > span { background: #dcfce7; color: #15803d; }
.service-tone-6 > span { background: #ede9fe; color: #6d28d9; }
.service-tone-1:hover { border-color: #93c5fd; background: #eff6ff; }
.service-tone-2:hover { border-color: #5eead4; background: #f0fdfa; }
.service-tone-3:hover { border-color: #fcd34d; background: #fffbeb; }
.service-tone-4:hover { border-color: #f9a8d4; background: #fdf2f8; }
.service-tone-5:hover { border-color: #86efac; background: #f0fdf4; }
.service-tone-6:hover { border-color: #c4b5fd; background: #f5f3ff; }
.service-list-item strong,
.service-list-item small {
    display: block;
}
.store-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 1rem;
}
.store-card {
    display: grid;
    grid-template-columns: 54px 1fr;
    gap: 1rem;
    align-items: start;
    min-height: 190px;
    padding: 1.1rem;
    border: 1px solid #e2e8f0;
    border-radius: 0.75rem;
    background: #fff;
    box-shadow: 0 12px 28px rgba(15, 23, 42, 0.08);
}
.store-card-body {
    min-width: 0;
}
.store-card-mark-wrap {
    position: relative;
    width: 54px;
    height: 54px;
}
.store-card-mark {
    display: grid;
    place-items: center;
    width: 54px;
    height: 54px;
    border-radius: 0.65rem;
    font-size: 1.35rem;
    font-weight: 900;
}
.store-card-media {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(82px, 1fr));
    gap: 0.45rem;
    margin-bottom: 0.1rem;
}
.store-card-image-wrap {
    position: relative;
    overflow: hidden;
    border-radius: 0.55rem;
    background: #e2e8f0;
}
.store-card-image-wrap img {
    display: block;
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
}
.store-sold-seal {
    position: absolute;
    inset: 50% auto auto 50%;
    transform: translate(-50%, -50%) rotate(-18deg);
    min-width: 76px;
    padding: 0.25rem 0.45rem;
    border: 3px solid #dc2626;
    border-radius: 0.35rem;
    background: rgba(255, 255, 255, 0.86);
    color: #dc2626;
    font-size: 1rem;
    font-weight: 950;
    letter-spacing: 0;
    text-align: center;
    box-shadow: 0 8px 18px rgba(15, 23, 42, 0.14);
}
.store-sold-seal-mark {
    min-width: 64px;
    font-size: 0.8rem;
}
.store-card h2,
.store-card h3 {
    margin: 0 0 0.45rem;
    font-size: 1.08rem;
    font-weight: 850;
}
.store-card p:not(.store-card-category) {
    min-height: 66px;
    margin-bottom: 1rem;
    color: #475569;
}
.store-card-category {
    margin: 0 0 0.35rem;
    color: #0f766e;
    font-size: 0.75rem;
    font-weight: 850;
    text-transform: uppercase;
}
.store-price-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
    align-items: baseline;
    margin-bottom: 0.65rem;
}
.store-price-old {
    color: #94a3b8;
    font-size: 0.9rem;
    text-decoration: line-through;
}
.store-price-new {
    color: #15803d;
    font-size: 1.05rem;
    font-weight: 900;
}
.store-saving {
    padding: 0.15rem 0.45rem;
    border-radius: 0.35rem;
    background: #dcfce7;
    color: #166534;
    font-size: 0.78rem;
    font-weight: 850;
}
.store-discount-total {
    display: flex;
    align-items: center;
    min-height: 38px;
    padding: 0.375rem 0.75rem;
    border: 1px solid #bbf7d0;
    border-radius: 0.375rem;
    background: #f0fdf4;
    color: #15803d;
    font-weight: 900;
}
.store-warranty {
    display: inline-block;
    margin-bottom: 0.8rem;
    padding: 0.25rem 0.5rem;
    border-radius: 0.35rem;
    background: #ecfeff;
    color: #0f766e;
    font-size: 0.82rem;
    font-weight: 800;
}
.store-tone-1 .store-card-mark { background: #dbeafe; color: #1d4ed8; }
.store-tone-2 .store-card-mark { background: #dcfce7; color: #15803d; }
.store-tone-3 .store-card-mark { background: #fef3c7; color: #b45309; }
.store-tone-4 .store-card-mark { background: #ede9fe; color: #6d28d9; }
.store-tone-5 .store-card-mark { background: #fee2e2; color: #b91c1c; }
.store-tone-6 .store-card-mark { background: #ccfbf1; color: #0f766e; }
.store-admin-image-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
    gap: 0.8rem;
}
.store-image-inputs {
    display: grid;
    gap: 0.65rem;
}
.store-image-input-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 0.65rem;
    align-items: center;
}
.store-admin-image {
    overflow: hidden;
    border: 1px solid #e2e8f0;
    border-radius: 0.55rem;
    background: #fff;
}
.store-admin-image img {
    display: block;
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
}
.store-admin-image span {
    display: block;
    padding: 0.45rem;
    color: #64748b;
    font-size: 0.78rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.news-upload-preview {
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.7rem;
    border: 1px solid #e2e8f0;
    border-radius: 0.5rem;
    background: #f8fafc;
    color: #475569;
    font-weight: 700;
}
.news-upload-preview img {
    width: 86px;
    height: 58px;
    border-radius: 0.35rem;
    object-fit: cover;
}
.news-image-grid,
.news-detail-gallery {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 0.8rem;
}
.news-image-grid img,
.news-detail-gallery img {
    width: 100%;
    aspect-ratio: 4 / 3;
    border-radius: 0.5rem;
    object-fit: cover;
    box-shadow: 0 10px 24px rgba(15, 23, 42, 0.1);
}
.rich-editor {
    border: 1px solid #cbd5e1;
    border-radius: 0.55rem;
    overflow: hidden;
    background: #fff;
}
.rich-editor-toolbar {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    padding: 0.55rem;
    border-bottom: 1px solid #e2e8f0;
    background: #f8fafc;
}
.rich-editor-toolbar button,
.rich-editor-toolbar select,
.rich-editor-toolbar input[type="color"] {
    min-height: 34px;
    border: 1px solid #cbd5e1;
    border-radius: 0.35rem;
    background: #fff;
    color: #111827;
    font-size: 0.9rem;
}
.rich-editor-toolbar button {
    padding: 0.25rem 0.55rem;
    font-weight: 750;
}
.rich-editor-toolbar input[type="color"] {
    width: 42px;
    padding: 0.15rem;
}
.rich-editor-canvas {
    min-height: 260px;
    padding: 0.9rem;
    outline: none;
    background: #fff;
}
.rich-editor-canvas-sm {
    min-height: 120px;
}
.news-rich-content {
    color: #1f2937;
    line-height: 1.72;
}
.news-rich-content h2,
.news-rich-content h3,
.news-rich-content h4 {
    margin-top: 1.15rem;
    margin-bottom: 0.5rem;
}
.news-rich-content mark {
    padding: 0.1rem 0.2rem;
    border-radius: 0.2rem;
    background: #fef08a;
}

@media (max-width: 767.98px) {
    .site-header-inner {
        align-items: flex-start;
        flex-direction: column;
    }

    .site-brand {
        align-items: center;
        gap: 0.75rem;
    }

    .site-brand-mark {
        width: 52px;
        height: 52px;
        border-radius: 15px;
    }

    .site-brand-mark::before {
        inset: 7px;
        border-radius: 12px;
    }

    .site-brand-mark::after {
        right: -5px;
        bottom: 7px;
        width: 18px;
        height: 18px;
    }

    .site-brand-mark-core {
        font-size: 1.14rem;
    }

    .site-brand-name {
        font-size: 1.16rem;
        line-height: 1.12;
    }

    .site-header-actions {
        justify-content: flex-start;
        width: 100%;
    }

    .site-language-switch {
        align-self: stretch;
        justify-content: center;
    }

    .site-contact-pill {
        flex: 1 1 145px;
        justify-content: center;
    }

    .site-nav-shell {
        border-radius: 0;
    }
}

@media (max-width: 991.98px) {
    body.admin-shell,
    body:has(.admin-sidebar) {
        padding-left: 0;
        padding-top: 56px;
    }

    .admin-sidebar-toggle {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        z-index: 1040;
        display: block;
        width: 100%;
        border: 0;
        background: #0f172a;
        color: #fff;
        padding: 0.85rem 1rem;
        text-align: left;
        font-weight: 800;
    }

    .admin-sidebar {
        top: 52px;
        right: 0;
        bottom: auto;
        width: 100%;
        max-height: calc(100vh - 52px);
    }

    .admin-sidebar-brand {
        display: none;
    }

    .admin-sidebar-collapse:not(.show) {
        display: none;
    }

    .dashboard-grid {
        grid-template-columns: 1fr;
    }

    .dashboard-news-stack {
        grid-template-rows: auto;
        min-height: auto;
    }

    .dashboard-panel,
    .dashboard-slider,
    .dashboard-slide {
        min-height: auto;
    }

    .dashboard-slide {
        min-height: 380px;
    }
}

/* Phone layout safeguards: keep every section inside the viewport and make
   navigation, panels, and data-heavy content usable on narrow screens. */
html,
body {
    max-width: 100%;
    overflow-x: clip;
}

img,
svg,
video,
canvas {
    max-width: 100%;
}

@media (max-width: 575.98px) {
    .container {
        --bs-gutter-x: 1rem;
    }

    .site-header-inner {
        gap: 1rem;
        padding-top: 1rem;
        padding-bottom: 1rem;
    }

    .site-brand {
        min-width: 0;
    }

    .site-brand-name {
        overflow-wrap: anywhere;
    }

    .site-language-switch {
        flex-wrap: wrap;
        border-radius: 0.75rem;
    }

    .site-language-switch span {
        width: 100%;
        padding-top: 0.15rem;
        text-align: center;
    }

    .site-language-switch a {
        flex: 1 1 0;
    }

    .site-nav-shell {
        min-height: 56px;
        padding: 0.5rem 0.75rem;
    }

    .site-navbar .navbar-collapse {
        margin-top: 0.65rem;
        padding-top: 0.5rem;
        border-top: 1px solid #e2e8f0;
    }

    .site-navbar .nav-link {
        padding: 0.7rem 0.8rem;
    }

    .site-login-actions,
    .site-login-actions .btn {
        width: 100%;
    }

    .dashboard-grid {
        gap: 0.85rem;
    }

    .dashboard-panel,
    .dashboard-slider,
    .dashboard-slide {
        min-width: 0;
    }

    .dashboard-slide {
        min-height: 320px;
        padding: 1.25rem;
    }

    .dashboard-slide h1 {
        font-size: 1.65rem;
        overflow-wrap: anywhere;
    }

    .dashboard-slide p {
        font-size: 0.95rem;
    }

    .notice-moving-title {
        width: auto;
        min-width: 0;
        white-space: normal;
        animation: none;
    }

    .service-list-item,
    .store-card {
        min-width: 0;
    }

    .service-list-item strong,
    .service-list-item small,
    .store-card h2,
    .store-card h3,
    .store-card p {
        overflow-wrap: anywhere;
    }

    main .d-flex.justify-content-between {
        flex-wrap: wrap;
        gap: 0.5rem;
    }

    .table-responsive,
    main table {
        display: block;
        width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    input,
    select,
    textarea,
    .form-control,
    .form-select {
        max-width: 100%;
    }
}

/* Customer login */
.customer-login-page {
    min-height: 100vh;
    background: #eaf2f7;
}
.customer-login-shell {
    position: relative;
    display: grid;
    min-height: 100vh;
    place-items: center;
    padding: 2rem 1rem;
    overflow: hidden;
    background: linear-gradient(135deg, #ecfeff 0%, #f8fafc 45%, #e0f2fe 100%);
}
.login-orb {
    position: absolute;
    border-radius: 50%;
    filter: blur(1px);
    pointer-events: none;
}
.login-orb-one { width: 28rem; height: 28rem; top: -13rem; left: -11rem; background: rgba(20, 184, 166, 0.20); }
.login-orb-two { width: 25rem; height: 25rem; right: -11rem; bottom: -12rem; background: rgba(37, 99, 235, 0.16); }
.customer-login-card {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: minmax(260px, 0.9fr) minmax(330px, 1.1fr);
    width: min(100%, 940px);
    overflow: hidden;
    border: 1px solid rgba(148, 163, 184, 0.34);
    border-radius: 1.5rem;
    background: #fff;
    box-shadow: 0 24px 60px rgba(15, 23, 42, 0.18);
}
.customer-login-intro {
    display: flex;
    min-height: 540px;
    flex-direction: column;
    padding: clamp(1.75rem, 5vw, 3.25rem);
    background: linear-gradient(155deg, #0f766e, #115e59 52%, #0f3f44);
    color: #fff;
}
.customer-login-brand { display: inline-flex; align-items: center; gap: 0.65rem; color: #fff; font-weight: 800; text-decoration: none; }
.customer-login-brand:hover { color: #fff; }
.customer-login-logo,
.customer-login-mobile-logo { display: inline-grid; width: 2.35rem; height: 2.35rem; place-items: center; border-radius: 0.7rem; background: #fff; color: #0f766e; font-weight: 900; letter-spacing: -0.06em; }
.customer-login-welcome { margin-top: auto; padding-top: 3rem; }
.customer-login-kicker { margin: 0 0 0.55rem; color: #5eead4; font-size: 0.72rem; font-weight: 800; letter-spacing: 0.12em; }
.customer-login-welcome h1 { margin: 0; font-size: clamp(2rem, 4vw, 2.8rem); font-weight: 850; line-height: 1.05; }
.customer-login-welcome p { max-width: 25rem; margin: 1rem 0 0; color: rgba(255, 255, 255, 0.82); font-size: 1rem; line-height: 1.65; }
.customer-login-points { display: grid; gap: 0.65rem; margin-top: 2.4rem; color: rgba(255, 255, 255, 0.9); font-size: 0.88rem; }
.customer-login-points span::before { content: "✓"; display: inline-grid; width: 1.25rem; height: 1.25rem; place-items: center; margin-right: 0.55rem; border-radius: 50%; background: rgba(255, 255, 255, 0.16); color: #99f6e4; font-size: 0.75rem; font-weight: 900; }
.customer-login-form-wrap { display: flex; flex-direction: column; justify-content: center; padding: clamp(1.75rem, 5vw, 3.5rem); }
.customer-login-form-head { display: flex; gap: 0.85rem; align-items: center; margin-bottom: 2rem; }
.customer-login-mobile-logo { display: none; flex: 0 0 auto; background: #ccfbf1; }
.customer-login-form-head .customer-login-kicker { color: #0f766e; }
.customer-login-form-head h2 { margin: 0; color: #0f172a; font-size: clamp(1.45rem, 3vw, 1.85rem); font-weight: 850; line-height: 1.15; }
.customer-login-alert { margin-bottom: 1.25rem; border-radius: 0.8rem; font-size: 0.92rem; }
.customer-login-form { display: grid; gap: 1.2rem; }
.customer-login-field label { display: block; margin-bottom: 0.48rem; color: #334155; font-size: 0.9rem; font-weight: 750; }
.customer-login-input-wrap { position: relative; display: flex; align-items: center; }
.customer-login-input-wrap > span { position: absolute; z-index: 1; left: 1rem; display: grid; width: 1.2rem; place-items: center; color: #0f766e; font-size: 1rem; font-weight: 900; }
.customer-login-input-wrap .form-control { min-height: 3.35rem; padding: 0.8rem 4.2rem 0.8rem 2.85rem; border: 1px solid #cbd5e1; border-radius: 0.8rem; background: #f8fafc; box-shadow: none; }
.customer-login-input-wrap .form-control:focus { border-color: #14b8a6; background: #fff; box-shadow: 0 0 0 0.22rem rgba(20, 184, 166, 0.16); }
.customer-password-toggle { position: absolute; z-index: 1; right: 0.7rem; border: 0; border-radius: 0.45rem; padding: 0.3rem 0.45rem; background: transparent; color: #0f766e; font-size: 0.78rem; font-weight: 800; }
.customer-password-toggle:hover { background: #ccfbf1; }
.customer-login-submit { display: flex; min-height: 3.35rem; align-items: center; justify-content: center; gap: 0.6rem; border-radius: 0.8rem; background: linear-gradient(135deg, #0f766e, #0891b2); color: #fff; font-weight: 800; box-shadow: 0 12px 22px rgba(15, 118, 110, 0.2); }
.customer-login-submit:hover { background: linear-gradient(135deg, #115e59, #0e7490); color: #fff; transform: translateY(-1px); }
.customer-login-links { display: flex; justify-content: space-between; gap: 1rem; margin-top: 1.5rem; font-size: 0.88rem; }
.customer-login-links a { color: #475569; text-decoration: none; }
.customer-login-links a:hover { color: #0f766e; text-decoration: underline; }
.customer-login-links .customer-login-register { color: #0f766e; font-weight: 800; }

@media (max-width: 767.98px) {
    .customer-login-shell { align-items: start; padding: 1rem; }
    .customer-login-card { grid-template-columns: 1fr; max-width: 35rem; border-radius: 1.15rem; }
    .customer-login-intro { display: none; }
    .customer-login-form-wrap { min-height: min(100vh - 2rem, 42rem); padding: 1.75rem 1.35rem; }
    .customer-login-mobile-logo { display: inline-grid; }
}

@media (max-width: 390px) {
    .customer-login-form-wrap { padding: 1.35rem 1rem; }
    .customer-login-links { align-items: flex-start; flex-direction: column-reverse; }
}