:root {
    --nexin-blue: #082068;
    --nexin-blue-2: #103a99;
    --nexin-blue-3: #061747;
    --nexin-mint: #8fe4c1;
    --nexin-mint-2: #62d8ab;
    --nexin-ink: #14243d;
    --nexin-muted: #65738a;
    --nexin-line: #dfe7f0;
    --nexin-bg: #edf3f8;
    --nexin-white: #fff;
    --nexin-shadow: 0 28px 75px rgba(8,32,104,.15);
}

html, body {
    min-height: 100%;
    background: var(--nexin-bg);
    color: var(--nexin-ink);
}

body {
    position: relative;
    margin: 0;
    overflow-x: hidden;
    background:
        radial-gradient(circle at 9% 7%, rgba(143,228,193,.28), transparent 28rem),
        radial-gradient(circle at 92% 20%, rgba(16,58,153,.12), transparent 34rem),
        linear-gradient(155deg, #f8fbfd 0%, #eaf1f7 52%, #f5f9fc 100%);
    font-family: Inter, "Segoe UI", Arial, Helvetica, sans-serif;
}

body::before,
body::after {
    position: fixed;
    z-index: 0;
    width: 300px;
    height: 300px;
    border: 1px solid rgba(8,32,104,.06);
    border-radius: 50%;
    content: "";
    pointer-events: none;
}

body::before { top: 12%; left: -190px; }
body::after { right: -210px; bottom: 4%; width: 380px; height: 380px; }

.nexin-stripe {
    position: relative;
    z-index: 3;
    height: 7px;
    background: linear-gradient(90deg, var(--nexin-blue-3), var(--nexin-blue) 50%, var(--nexin-mint));
}

.nexin-sitebar {
    position: relative;
    z-index: 3;
    display: flex;
    justify-content: space-between;
    gap: 20px;
    padding: 11px max(20px, calc((100% - 1080px)/2));
    border-bottom: 1px solid rgba(8,32,104,.08);
    background: rgba(255,255,255,.86);
    color: var(--nexin-muted);
    font-size: 13px;
    backdrop-filter: blur(12px);
}

.nexin-sitebar a {
    color: var(--nexin-blue);
    font-weight: 800;
    text-decoration: none;
    transition: color .2s ease, transform .2s ease;
}

.nexin-sitebar a:hover { color: var(--nexin-blue-2); transform: translateX(-3px); }

#container {
    position: relative;
    z-index: 1;
    width: min(1080px, calc(100% - 40px));
    margin: 34px auto 0;
    overflow: hidden;
    border: 1px solid rgba(8,32,104,.09);
    border-radius: 24px;
    background: rgba(255,255,255,.97);
    box-shadow: var(--nexin-shadow);
    animation: nexin-rise .55s cubic-bezier(.2,.8,.2,1) both;
}

#container::before {
    position: absolute;
    z-index: 0;
    top: 148px;
    right: -82px;
    width: 410px;
    height: 410px;
    background: url("../images/nexin-shield.png") center/contain no-repeat;
    content: "";
    opacity: .035;
    pointer-events: none;
    animation: nexin-float 8s ease-in-out infinite;
}

#header {
    position: relative;
    z-index: 2;
    height: 112px;
    padding: 0 38px;
    box-sizing: border-box;
    background: linear-gradient(135deg, #fff 0%, #f7fbfd 100%);
}

#header::after {
    position: absolute;
    right: 38px;
    bottom: 0;
    left: 38px;
    height: 1px;
    background: linear-gradient(90deg, var(--nexin-mint), rgba(143,228,193,0));
    content: "";
}

#header #logo {
    display: inline-flex;
    align-items: center;
    gap: 15px;
    height: 112px;
    text-decoration: none;
}

#header #logo img { max-height: none; width: auto; }
#header #logo .nexin-logo-shield { height: 56px; filter: drop-shadow(0 8px 12px rgba(8,32,104,.14)); transition: transform .35s ease; }
#header #logo:hover .nexin-logo-shield { transform: rotate(-5deg) scale(1.06); }
.nexin-brand-copy { display: flex; flex-direction: column; align-items: flex-start; gap: 7px; }
#header #logo .nexin-logo-wordmark { height: 24px; }
.nexin-brand-copy small { color: var(--nexin-muted); font-size: 10px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; }

#header .pull-right {
    padding-top: 30px;
    color: var(--nexin-muted);
}

#header .pull-right p { margin: 5px 0; }
#header a, #content a { color: var(--nexin-blue); }
#header .pull-right a { font-weight: 800; text-decoration: none; }

#nav {
    position: relative;
    z-index: 3;
    display: flex;
    gap: 7px;
    margin: 0;
    padding: 10px 30px;
    border: 0;
    background: var(--nexin-blue);
    box-shadow: 0 8px 24px rgba(8,32,104,.18);
}

#nav li { display: block; float: none; margin: 0; }
#nav li a,
#nav li a.home,
#nav li a.new,
#nav li a.status,
#nav li a.tickets {
    position: relative;
    display: block;
    padding: 12px 17px;
    border: 0;
    border-radius: 11px;
    background: transparent;
    background-image: none;
    color: rgba(255,255,255,.82);
    font-size: 13px;
    font-weight: 800;
    line-height: 1.2;
    text-decoration: none;
    transition: background .22s ease, color .22s ease, transform .22s ease;
}

#nav li a:hover { background: rgba(255,255,255,.1); color: #fff; transform: translateY(-1px); }
#nav li a.active { background: var(--nexin-mint); color: var(--nexin-blue); box-shadow: 0 7px 18px rgba(0,0,0,.13); }

#content {
    position: relative;
    z-index: 1;
    min-height: 430px;
    padding: 54px 48px 62px;
    box-sizing: border-box;
}

#content > * { position: relative; z-index: 1; }
#content h1, #content h2, #content h3 { color: var(--nexin-blue); }
#content h1 { margin-top: 0; font-size: clamp(30px, 4vw, 46px); line-height: 1.08; letter-spacing: -.035em; }
#content h2 { letter-spacing: -.02em; }
#content h3 { font-size: 18px; }
#content p { color: #45556d; line-height: 1.72; }
#content table.padded { width: 100% !important; }
#content hr { border: 0; border-top: 1px solid var(--nexin-line); }

#landing_page { display: grid; grid-template-columns: minmax(0,1fr) minmax(240px,320px); gap: 52px; align-items: start; }
#landing_page .main-content { float: none; width: auto; grid-column: 1; grid-row: 1; }
#landing_page .sidebar { float: none; width: auto; grid-column: 2; grid-row: 1; }
#landing_page .clear { display: none; }
#landing_page .thread-body { padding: 5px 0; }
#landing_page .thread-body h1::before {
    display: block;
    width: 48px;
    height: 5px;
    margin-bottom: 24px;
    border-radius: 20px;
    background: var(--nexin-mint-2);
    content: "";
}
#landing_page .thread-body p { max-width: 650px; font-size: 16px; }
#landing_page .thread-body p strong { color: var(--nexin-blue); }

.front-page-button { display: grid; gap: 13px; }
.front-page-button p { margin: 0; }
.front-page-button .button,
.front-page-button .button.blue,
.front-page-button .button.green {
    position: relative;
    display: flex !important;
    align-items: center;
    justify-content: space-between;
    width: 100% !important;
    min-height: 58px;
    padding: 15px 54px 15px 20px !important;
    box-sizing: border-box;
    border: 1px solid transparent !important;
    border-radius: 14px !important;
    background: var(--nexin-blue) !important;
    color: #fff !important;
    font-size: 14px !important;
    font-weight: 800 !important;
    line-height: 1.3 !important;
    text-align: left !important;
    text-decoration: none !important;
    text-shadow: none !important;
    box-shadow: 0 12px 24px rgba(8,32,104,.18) !important;
    transition: transform .25s ease, box-shadow .25s ease, background .25s ease !important;
}

.front-page-button .button::after {
    position: absolute;
    right: 18px;
    display: grid;
    width: 28px;
    height: 28px;
    place-items: center;
    border-radius: 50%;
    background: rgba(255,255,255,.14);
    content: "→";
    font-size: 17px;
    transition: transform .25s ease;
}

.front-page-button .button.green {
    border-color: rgba(8,32,104,.1) !important;
    background: var(--nexin-mint) !important;
    color: var(--nexin-blue) !important;
    box-shadow: 0 12px 24px rgba(59,180,135,.16) !important;
}

.front-page-button .button.green::after { background: rgba(8,32,104,.09); }
.front-page-button .button:hover { transform: translateY(-3px); box-shadow: 0 17px 30px rgba(8,32,104,.24) !important; }
.front-page-button .button:hover::after { transform: translateX(4px); }
.front-page-button .button:focus-visible { outline: 4px solid rgba(143,228,193,.5); outline-offset: 3px; }

input[type=text],
input[type=email],
input[type=password],
input[type=tel],
select,
textarea {
    max-width: 100%;
    min-height: 44px;
    padding: 11px 13px;
    box-sizing: border-box;
    border: 1px solid #cbd7e4;
    border-radius: 9px;
    background: rgba(255,255,255,.96);
    color: var(--nexin-ink);
    font: inherit;
    box-shadow: inset 0 1px 2px rgba(8,32,104,.04);
    transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}

textarea { min-height: 160px; }
input:focus, select:focus, textarea:focus { outline: 0; border-color: var(--nexin-blue-2); box-shadow: 0 0 0 4px rgba(143,228,193,.38); }
.padded label:has(input[type=tel]) { display: grid !important; grid-template-columns: minmax(0,1fr) auto 68px; gap: 8px; align-items: end; }
.padded label:has(input[type=tel]) > span:first-child { grid-column: 1 / -1; }
.padded label:has(input[type=tel]) > br { display: none; }
.padded label:has(input[type=tel]) input[type=tel] { width: 100% !important; }
.padded label:has(input[type=tel]) input[name$="-ext"] { width: 68px !important; }

input[type=submit],
input[type=button],
input[type=reset],
.btn,
#clientLogin input[type=submit].btn {
    min-width: 140px;
    min-height: 44px;
    padding: 11px 19px !important;
    border: 1px solid transparent !important;
    border-radius: 10px !important;
    background: var(--nexin-blue) !important;
    color: #fff !important;
    font: inherit;
    font-weight: 800 !important;
    cursor: pointer;
    box-shadow: 0 9px 20px rgba(8,32,104,.16);
    transition: transform .2s ease, box-shadow .2s ease, background .2s ease;
}

input[type=reset], input[type=button] { border-color: #cbd7e4 !important; background: #fff !important; color: var(--nexin-blue) !important; box-shadow: none; }
input[type=submit]:hover, input[type=button]:hover, input[type=reset]:hover, .btn:hover { transform: translateY(-2px); box-shadow: 0 13px 24px rgba(8,32,104,.2); }

#clientLogin { background-image: none !important; }
#clientLogin [style*="display:table-row"] { gap: 24px; }
#clientLogin .login-box,
#clientLogin .instructions,
#clientLogin > div > div[style*="display:table-cell"] {
    border: 1px solid var(--nexin-line);
    border-radius: 16px;
    background: rgba(248,251,253,.92);
    box-shadow: none;
}
#clientLogin .login-box { padding: 26px; }
#clientLogin .instructions { padding: 28px; color: var(--nexin-muted); }
#clientLogin > div > div[style*="display:table-cell"] { padding: 28px !important; color: var(--nexin-muted); }

.error_bar, .warning_bar, .notice_bar,
#msg_error, #msg_warning, #msg_notice {
    border: 0;
    border-radius: 10px;
    box-shadow: none;
}

.nexin-magic-login {
    display: grid;
    grid-template-columns: minmax(0,1.05fr) minmax(320px,.95fr);
    gap: 54px;
    align-items: center;
    min-height: 360px;
}

.nexin-kicker {
    display: inline-block;
    margin-bottom: 18px;
    color: #087a57;
    font-size: 11px;
    font-weight: 900;
    letter-spacing: .14em;
    text-transform: uppercase;
}

.nexin-magic-login__copy h1 { max-width: 590px; margin-bottom: 20px; }
.nexin-magic-login__copy > p { max-width: 610px; font-size: 16px; }
.nexin-magic-login__copy ul { display: grid; gap: 12px; margin: 28px 0 0; padding: 0; }
.nexin-magic-login__copy li { position: relative; padding-left: 27px; color: #43536b; list-style: none; }
.nexin-magic-login__copy li::before { position: absolute; left: 0; color: #07855c; content: "✓"; font-weight: 900; }

.nexin-magic-login__card {
    position: relative;
    overflow: hidden;
    padding: 32px;
    border: 1px solid rgba(8,32,104,.1);
    border-radius: 20px;
    background: linear-gradient(145deg, #fff, #f5fafc);
    box-shadow: 0 22px 50px rgba(8,32,104,.13);
}

.nexin-magic-login__card::before {
    position: absolute;
    top: -44px;
    right: -38px;
    width: 150px;
    height: 150px;
    background: url("../images/nexin-shield.png") center/contain no-repeat;
    content: "";
    opacity: .035;
    pointer-events: none;
}

.nexin-magic-form { position: relative; display: grid; gap: 12px; }
.nexin-magic-form label { color: var(--nexin-blue); font-size: 13px; font-weight: 900; }
.nexin-magic-form input { width: 100%; height: 52px; font-size: 15px; }
.nexin-magic-form button {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 54px;
    margin-top: 5px;
    padding: 13px 18px;
    border: 0;
    border-radius: 12px;
    background: var(--nexin-blue);
    color: #fff;
    font: inherit;
    font-weight: 900;
    cursor: pointer;
    box-shadow: 0 12px 24px rgba(8,32,104,.18);
    transition: transform .2s ease, box-shadow .2s ease;
}
.nexin-magic-form button:hover { transform: translateY(-2px); box-shadow: 0 17px 30px rgba(8,32,104,.23); }
.nexin-magic-form button span { display: grid; width: 28px; height: 28px; place-items: center; border-radius: 50%; background: rgba(255,255,255,.14); }
.nexin-magic-form > p { margin: 6px 0 0; color: var(--nexin-muted); font-size: 12px; line-height: 1.55; }

.nexin-magic-success, .nexin-magic-invalid { text-align: center; }
.nexin-magic-success > span, .nexin-magic-invalid > span { display: grid; width: 58px; height: 58px; margin: 0 auto 18px; place-items: center; border-radius: 50%; background: var(--nexin-mint); color: var(--nexin-blue); font-size: 26px; font-weight: 900; }
.nexin-magic-success h2 { margin: 0 0 10px; }
.nexin-magic-success p { margin: 8px 0; }
.nexin-magic-note { color: var(--nexin-muted) !important; font-size: 12px; }
.nexin-magic-invalid { max-width: 610px; margin: 25px auto; }
.nexin-magic-invalid > span { background: #fff1da; color: #9a5b00; }
.nexin-magic-retry { display: inline-block; margin-top: 12px; padding: 12px 18px; border-radius: 10px; background: var(--nexin-blue); color: #fff !important; font-weight: 900; text-decoration: none; }

#footer {
    position: relative;
    z-index: 1;
    width: min(1080px, calc(100% - 40px));
    margin: 24px auto 40px;
    color: var(--nexin-muted);
    text-align: center;
}
#footer p { margin: 5px 0; }
.nexin-footer-note { font-size: 12px; }

@keyframes nexin-rise {
    from { opacity: 0; transform: translateY(18px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes nexin-float {
    0%, 100% { transform: translate3d(0,0,0) rotate(-4deg); }
    50% { transform: translate3d(-8px,10px,0) rotate(0deg); }
}

@media (max-width: 760px) {
    html, body { width: 100%; overflow-x: hidden; }
    .nexin-sitebar { align-items: flex-start; flex-direction: column; gap: 3px; padding: 10px 16px; }
    #container { width: calc(100% - 18px); margin-top: 12px; border-radius: 17px; }
    #container::before { top: 210px; right: -115px; width: 290px; height: 290px; }
    #header { display: flex; height: auto; min-height: 124px; padding: 0 19px; flex-direction: column; align-items: flex-start; }
    #header::after { right: 19px; left: 19px; }
    #header #logo { order: 1; height: 82px; }
    #header #logo .nexin-logo-shield { height: 46px; }
    #header #logo .nexin-logo-wordmark { height: 21px; }
    .nexin-brand-copy small { font-size: 9px; }
    #header .pull-right { order: 2; float: none; clear: both; padding: 0 0 15px; text-align: left; }
    #nav { gap: 5px; padding: 8px; overflow-x: auto; scrollbar-width: none; }
    #nav::-webkit-scrollbar { display: none; }
    #nav li { flex: 0 0 auto; }
    #nav li a, #nav li a.home, #nav li a.new, #nav li a.status, #nav li a.tickets { padding: 11px 12px; font-size: 12px; white-space: nowrap; }
    #content { min-height: 390px; padding: 36px 22px 44px; overflow-x: hidden; }
    #content h1 { font-size: 34px; }
    #landing_page { display: flex; flex-direction: column; gap: 30px; }
    #landing_page .main-content, #landing_page .sidebar { width: 100%; }
    #landing_page .sidebar { order: 2; }
    #landing_page .main-content { order: 1; }
    .nexin-magic-login { grid-template-columns: 1fr; gap: 30px; }
    .nexin-magic-login__card { padding: 23px; }
    #clientLogin [style*="display:table-row"] { display: block !important; }
    #clientLogin .login-box, #clientLogin .instructions, #clientLogin > div > div[style*="display:table-cell"] { display: block !important; float: none; width: auto !important; max-width: 100%; min-height: 0; margin: 0 0 18px; padding: 21px !important; box-sizing: border-box; }
    #clientLogin input[type=text], #clientLogin input[type=email], #clientLogin input[type=password] { width: 100% !important; }
    #content table.padded, #content table.padded tbody, #content table.padded tr, #content table.padded td { display: block; width: 100% !important; box-sizing: border-box; }
    #content table.padded td { padding: 5px 0; }
    form[action="account.php"] table.padded tr { height: auto !important; margin-bottom: 13px; }
    form[action="account.php"] table.padded td { height: auto !important; padding: 5px 0 !important; }
    form[action="account.php"] table.padded label { display: block; line-height: 1.45; }
    form[action="account.php"] table.padded input[type=email], form[action="account.php"] table.padded input[type=text], form[action="account.php"] table.padded input[type=password] { width: 100% !important; }
    form[action="account.php"] table.padded input[type=tel] { width: 100% !important; }
    form[action="account.php"] table.padded input[name$="-ext"] { width: 64px !important; }
    form[action="account.php"] .select2-container { width: 100% !important; max-width: 100%; }
    #footer { width: calc(100% - 28px); margin-bottom: 28px; }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}