/* Reference-led composition: blue architectural hero, central login, navy navigation. */
.vy-portal {
     --vy-navy:#05275e;
     --vy-blue:#0055f5;
     --page-bg:#f4f8ff;
     --text-main:#09234d;
     --text-muted:#617491;
     --border:#e4ebf6;
}
.vy-login .lx {
     padding:0;
     background:#f5faff;
}
.vy-login .lx-top {
     max-width:none;
     min-height:112px;
     margin:0;
     padding:20px 5%;
     background:linear-gradient(115deg,#0756b8,#00347f);
     border:0;
     color:white;
     position:relative;
     z-index:2;
}
.vy-login .lx-top:after {
     content:'';
     position:absolute;
     bottom:-20px;
     inset-inline:0;
     height:36px;
     background:inherit;
     border-radius:0 0 50% 50%;
     z-index:-1;
}
.vy-login .lx-logo {
     flex-direction:column;
     gap:3px;
}
.vy-login .lx-logo-icon {
     background:transparent;
     font-size:48px;
     height:60px;
     width:60px;
     box-shadow:none;
}
.vy-login .lx-logo-text {
     color:white;
     font-size:24px;
}
.vy-header-title {
     font-size:19px;
     font-weight:700;
}
.vy-login .lx-top-right {
     gap:16px;
}
.vy-login .vy-top-link {
     color:white;
}
.vy-login .lx-pill {
     background:#ffffff0d;
     border-color:#ffffff60;
     color:white;
}
.vy-login .lx-main {
     display:block;
     max-width:none;
     padding:0;
     position:relative;
}
.vy-login-scene {
     min-height:500px;
     background-image:linear-gradient(90deg,transparent 30%,#f6faff14 47%,#f6faffed 78%),url('../images/brand/service-hero.png');
     background-size:cover;
     background-position:center 61%;
     position:relative;
}
.vy-login-copy {
     width:50%;
     max-width:680px;
     padding:78px 6% 130px 24px;
     margin-inline-end:auto;
}
.vy-login-copy h1 {
     font-size:clamp(30px,3.5vw,49px);
     font-weight:900;
     line-height:1.6;
     color:#032251;
     margin:0 0 18px;
}
.vy-login-copy p {
     font-size:20px;
     line-height:2;
     color:#4f6078;
}
.vy-login-card {
     position:relative;
     max-width:660px;
     width:calc(100% - 40px);
     margin:-95px auto 0;
     padding:34px 38px 28px;
     background:#fffffffa;
     border:1px solid white;
     border-radius:20px;
     box-shadow:0 18px 60px #0954ad18;
}
.vy-login-card-head {
     display:flex;
     align-items:center;
     gap:22px;
     margin-bottom:28px;
}
.vy-login-card-head>span {
     background:#e8f4ff;
     color:#0055e9;
     width:88px;
     height:88px;
     flex-shrink:0;
     border-radius:20px;
     display:grid;
     place-items:center;
     font-size:52px;
}
.vy-login-card h2 {
     font-size:30px;
     font-weight:900;
     margin:0 0 5px;
}
.vy-login-card-head p {
     margin:0;
     font-size:15px;
     color:var(--text-muted);
}
.vy-login .lx-form {
     padding:0;
     border:0;
     border-radius:0;
     box-shadow:none;
     max-width:none;
     background:none;
}
.vy-login .lx-input {
     min-height:62px;
     border-radius:10px;
     background:white;
     border-color:#d3deef;
     font-size:19px;
}
.vy-login .lx-btn {
     min-height:58px;
     background:linear-gradient(110deg,#0059fa,#0041bf);
     border-radius:9px;
     font-size:19px;
}
.vy-login .lx-flabel {
     font-size:14px;
     margin-bottom:12px;
}
.vy-login-method {
     text-align:center;
     margin-top:23px;
     padding-top:19px;
     border-top:1px solid var(--border);
     color:#315381;
     font-size:14px;
}
.vy-login-method i {
     margin-inline-end:6px;
}
.vy-login-benefits {
     display:grid;
     grid-template-columns:repeat(4,1fr);
     width:min(850px,90%);
     margin:40px auto 28px;
     text-align:center;
}
.vy-login-benefits>div {
     position:relative;
     display:flex;
     flex-direction:column;
     align-items:center;
     gap:12px;
}
.vy-login-benefits>div+div:before {
     content:'';
     position:absolute;
     inset-inline-start:0;
     top:28px;
     height:70px;
     width:1px;
     background:#dae5f5;
}
.vy-login-benefits i {
     width:72px;
     height:72px;
     background:#e3efff;
     color:#0055f5;
     display:grid;
     place-items:center;
     border-radius:50%;
     font-size:34px;
}
.vy-login-benefits strong {
     font-size:16px;
     line-height:1.9;
}
.vy-login .vy-steps {
     max-width:950px;
     padding:20px;
     margin:0 auto;
     border:0;
     gap:22px;
}
.vy-login .vy-step strong {
     font-size:13px;
}
.vy-login .vy-step p {
     font-size:12px;
}
.vy-login .site-footer {
     background:linear-gradient(110deg,#083f8d,#002458);
     color:white;
     border:0;
     border-top:5px solid #5598ff;
     border-radius:50% 8% 0 0 / 25px 15px 0 0;
     margin-top:35px;
     padding:30px 6% 10px;
     max-width:none;
}
.vy-login .site-footer :is(.site-footer-logo-text,.site-footer-heading,.site-footer-desc,.site-footer-item,.site-footer-bottom) {
     color:#e3edff;
}
.vy-login .site-footer-inner {
     max-width:1100px;
     margin:auto;
}
.vy-login .site-footer-channel {
     background:#ffffff0d;
     border-color:#ffffff20;
}
.vy-login .site-footer-channel :is(.site-footer-phone,.site-footer-channel-value,.site-footer-channel-label) {
     color:#e3edff;
}
.vy-login .site-footer-enamad {
     background:white;
}
.vy-app .app-wrapper {
     max-width:none;
}
.vy-app .sidebar {
     width:220px;
     min-width:220px;
     padding:26px 12px 18px;
     background:linear-gradient(160deg,#073c8c,#002154 65%,#001b44);
     color:white;
     border:0;
}
.vy-app .sidebar-logo {
     flex-direction:column;
     gap:3px;
}
.vy-app .sidebar-logo-icon {
     width:68px;
     height:68px;
     font-size:57px;
     background:transparent;
}
.vy-app .sidebar-logo-text {
     color:white;
     font-size:29px;
}
.vy-app .sidebar-tagline {
     color:#a7c8f3;
     font-size:11px;
     margin:10px -12px 20px;
     padding-bottom:22px;
     border-bottom:1px solid #ffffff15;
}
.vy-side-nav {
     display:flex;
     flex-direction:column;
     gap:7px;
}
.vy-side-nav a {
     display:flex;
     align-items:center;
     gap:14px;
     color:#eaf2ff;
     padding:14px 16px;
     border-radius:10px;
     font-size:14px;
     min-height:52px;
     transition:background .18s;
}
.vy-side-nav a i {
     font-size:22px;
}
.vy-side-nav a:hover {
     background:#ffffff12;
     color:white;
}
.vy-side-nav a.active {
     background:#0055f5;
     color:white;
     box-shadow:0 6px 20px #001f5540;
}
.vy-sidebar-support {
     margin-top:auto;
     padding:20px 12px 0;
     text-align:center;
}
.vy-sidebar-support>i {
     font-size:30px;
     color:#accdff;
     display:block;
     margin-bottom:7px;
}
.vy-sidebar-support strong {
     font-size:12px;
}
.vy-sidebar-support p {
     font-size:11px;
     color:#a9c6ed;
     margin:6px 0;
}
.vy-sidebar-support>a {
     display:block;
     padding:9px;
     background:#ffffff08;
     border:1px solid #ffffff18;
     border-radius:8px;
     color:white;
     font-size:14px;
}
.vy-app .sidebar-sub {
     background:#ffffff09;
     border-color:#ffffff20;
     padding:12px;
}
.vy-app .sidebar-sub :is(.sidebar-sub-info,.sidebar-sub-days) {
     color:#c5dcfa;
}
.vy-app .sidebar-sub-top {
     color:#63e0bb;
}
.vy-app .sidebar-sub-btn {
     background:#ffffff0d;
     border:1px solid #ffffff25;
     color:white;
     font-size:12px;
     padding:10px;
}
.vy-app .sidebar-sub-btn.renew {
     background:transparent;
     color:#a6e8d2;
     border-color:#ffffff25;
}
.vy-app .sidebar-logout {
     color:#dbeaff;
     background:transparent;
     border-top:1px solid #ffffff18;
     border-radius:0;
     margin-top:18px;
}
.vy-app .sidebar-logout i {
     color:#ff5064;
}
.vy-app .sidebar-mobile-title {
     color:white;
}
.vy-app .sidebar-close-btn {
     background:#ffffff15;
     color:white;
}
.vy-app .main-content {
     width:calc(100% - 220px);
     overflow:visible;
}
.vy-desktop-topbar {
     min-height:80px;
     display:flex;
     justify-content:space-between;
     gap:24px;
     align-items:center;
     padding:14px 28px;
     background:#ffffffed;
     border-bottom:1px solid var(--border);
}
.vy-topbar-vehicle {
     display:flex;
     align-items:center;
     gap:12px;
     font-size:13px;
     color:var(--text-muted);
}
.vy-topbar-vehicle>i {
     color:var(--vy-blue);
     font-size:24px;
}
.vy-topbar-vehicle bdi {
     background:#f6f9ff;
     padding:8px 18px;
     border:1px solid var(--border);
     border-radius:9px;
     font-size:12px;
}
.vy-owner {
     display:flex;
     align-items:center;
     gap:12px;
     font-size:13px;
}
.vy-owner strong {
     font-weight:700;
}
.vy-owner small {
     display:block;
     color:var(--text-muted);
     font-size:11px;
}
.vy-owner-icon {
     width:42px;
     height:42px;
     background:#e6effb;
     border-radius:50%;
     display:grid;
     place-items:center;
     font-size:26px;
     color:#2159ac;
}
.vy-app .scroll-area {
     max-width:1600px;
     padding:18px 24px 28px;
}
.vy-app .vy-page-head {
     margin-block:8px 20px;
}
.vy-app .vy-page-head h1 {
     font-size:23px;
}
.vy-car-banner {
     display:grid;
     grid-template-columns:minmax(175px,.8fr) minmax(200px,1fr) minmax(220px,1.35fr);
     align-items:center;
     gap:24px;
     min-height:245px;
     padding:20px;
     background:radial-gradient(ellipse at 27% 10%,#2863b6,transparent 60%),linear-gradient(120deg,#0a3b89,#001b47);
     border-radius:13px;
     color:white;
     overflow:hidden;
     position:relative;
}
.vy-car-banner:after {
     content:'';
     position:absolute;
     width:80%;
     height:200px;
     border:1px solid #ffffff0d;
     border-radius:50%;
     transform:rotate(10deg);
     left:-8%;
     bottom:-150px;
     pointer-events:none;
}
.vy-banner-status {
     align-self:stretch;
     background:#001a4340;
     border:1px solid #8bb9ff20;
     border-radius:12px;
     padding:20px 16px;
     display:flex;
     flex-direction:column;
     align-items:flex-start;
     justify-content:center;
     position:relative;
}
.vy-banner-status>i {
     position:absolute;
     inset-inline-end:14px;
     top:19px;
     color:#3de0b1;
     font-size:34px;
}
.vy-banner-status small {
     font-size:11px;
     color:#c9ddff;
     padding-inline-end:35px;
}
.vy-banner-status strong {
     font-size:22px;
     margin:8px 0 13px;
}
.vy-banner-status p {
     font-size:13px;
     color:#6be8c3;
     margin:0 0 5px;
}
.vy-banner-status>span {
     font-size:11px;
     color:#b9d1f3;
}
.vy-banner-copy h2 {
     font-size:26px;
     font-weight:800;
     line-height:1.6;
     margin:0 0 7px;
}
.vy-banner-copy>p {
     color:#d3e3fb;
     font-size:13px;
     margin:0 0 15px;
}
.vy-banner-copy>small {
     display:block;
     font-size:11px;
     color:#94c7ff;
}
.vy-banner-copy>bdi {
     display:block;
     font-size:15px;
     margin:4px 0 16px;
     overflow-wrap:anywhere;
}
.vy-banner-copy>a {
     display:flex;
     justify-content:space-between;
     gap:16px;
     align-items:center;
     padding:10px 14px;
     border-radius:9px;
     font-size:12px;
     background:#407ddd38;
     color:white;
     border:1px solid #9ac3ff18;
}
.vy-banner-art img {
     width:100%;
     height:220px;
     object-fit:contain;
     filter:drop-shadow(0 15px 8px #00000030);
}
.vy-shortcuts {
     display:grid;
     grid-template-columns:repeat(5,minmax(0,1fr));
     gap:10px;
     margin:16px 0;
}
.vy-shortcuts>a {
     display:flex;
     flex-direction:column;
     align-items:center;
     text-align:center;
     padding:17px 8px 14px;
     border:1px solid var(--border);
     border-radius:12px;
     background:white;
     box-shadow:0 2px 7px #16356503;
     min-width:0;
     transition:border-color .18s;
}
.vy-shortcuts>a:hover {
     border-color:#85b5ff;
}
.vy-shortcuts i {
     width:48px;
     height:48px;
     border-radius:50%;
     background:#eaf3ff;
     box-shadow:0 0 17px #eaf3ff;
     display:grid;
     place-items:center;
     color:var(--vy-blue);
     font-size:25px;
     margin-bottom:10px;
}
.vy-shortcuts strong {
     font-size:13px;
}
.vy-shortcuts small {
     font-size:10px;
     color:var(--text-muted);
     margin-top:3px;
}
.vy-shortcuts .is-green i {
     color:#00a878;
     background:#e6faf3;
     box-shadow:0 0 17px #e6faf3;
}
.vy-dashboard-grid {
     display:grid;
     grid-template-columns:.9fr 1.2fr 1.1fr;
     gap:12px;
     align-items:start;
}
.vy-panel {
     border:1px solid var(--border);
     background:white;
     border-radius:12px;
     padding:17px;
     min-width:0;
}
.vy-panel>h2 {
     margin:0 0 15px;
     padding-bottom:13px;
     border-bottom:1px solid #edf2f9;
     font-size:15px;
     font-weight:800;
     display:flex;
     align-items:center;
     gap:9px;
}
.vy-panel>h2 i {
     color:var(--vy-blue);
     font-size:20px;
}
.vy-details dl {
     margin:0;
}
.vy-details dl>div {
     display:flex;
     justify-content:space-between;
     gap:12px;
     padding:9px 0;
     border-bottom:1px solid #edf2f9;
     font-size:11px;
}
.vy-details dl>div:last-child {
     border:0;
}
.vy-details dt {
     color:var(--text-muted);
     font-weight:400;
     flex-shrink:0;
}
.vy-details dd {
     margin:0;
     text-align:end;
     overflow-wrap:anywhere;
     min-width:0;
}
.vy-details bdi {
     font-size:10px;
}
.vy-tip-row {
     display:flex;
     align-items:center;
     gap:9px;
     border-radius:9px;
     background:#f6f9fe;
     padding:13px 10px;
     margin-bottom:8px;
}
.vy-tip-row>i:first-child {
     font-size:22px;
     color:var(--vy-blue);
}
.vy-tip-row>i:last-child {
     font-size:12px;
     color:#8194b1;
     margin-inline-start:auto;
}
.vy-tip-row strong {
     font-size:12px;
}
.vy-tip-row p {
     margin:4px 0 0;
     font-size:11px;
     line-height:1.9;
     color:var(--text-muted);
}
.vy-tip-row.is-critical {
     background:#fff0f2;
}
.vy-tip-row.is-critical>i:first-child {
     color:#e52f4c;
}
.vy-tip-row.is-warning {
     background:#fff8e9;
}
.vy-tip-row.is-warning>i:first-child {
     color:#a86800;
}
.vy-empty {
     padding:26px 10px;
     text-align:center;
}
.vy-empty>i {
     display:grid;
     place-items:center;
     width:68px;
     height:68px;
     border-radius:50%;
     background:#eef5ff;
     color:#1b68ed;
     font-size:31px;
     margin:0 auto 20px;
}
.vy-empty h3 {
     font-size:16px;
     font-weight:700;
}
.vy-empty p {
     color:var(--text-muted);
     font-size:13px;
     line-height:2;
     margin:12px 0 20px;
}
.vy-panel-link {
     color:var(--vy-blue);
     font-size:12px;
     display:flex;
     align-items:center;
     justify-content:center;
     gap:12px;
     padding:10px;
     background:#eaf3ff;
     border-radius:8px;
     min-height:44px;
}
.vy-mileage-panel .mileage-hero {
     border:0;
     box-shadow:none;
     padding:5px 0 12px;
     margin:0;
}
.vy-mileage-panel .mileage-hero-top {
     font-size:12px;
}
.vy-mileage-panel .mileage-hero-value {
     font-size:30px;
}
.vy-mileage-panel .mileage-hero-value small {
     font-size:12px;
}
.vy-mileage-panel .mileage-value-btn {
     flex-wrap:wrap;
}
.vy-mileage-panel .mileage-edit-chip {
     font-size:11px;
     min-height:36px;
}
.vy-mileage-panel .mileage-hint {
     font-size:11px;
}
.vy-mileage-panel .mileage-hero:after {
     display:none;
}
.vy-mileage-panel .mileage-actions {
     flex-direction:column;
}
.vy-mileage-panel .mileage-cancel-btn {
     justify-content:center;
}
.vy-sub-summary {
     margin-top:12px;
     border-top:1px solid var(--border);
     padding-top:18px;
     text-align:center;
}
.vy-sub-summary>i {
     color:#0db68a;
     margin-inline-end:7px;
}
.vy-sub-summary strong {
     font-size:13px;
}
.vy-sub-summary p,.vy-sub-summary>span {
     font-size:12px;
     color:var(--text-muted);
     margin:8px 0 14px;
}
.vy-sub-summary>span {
     display:block;
}
.vy-warranty-panel {
     margin-top:14px;
}
.vy-warranty-links {
     display:grid;
     grid-template-columns:repeat(4,minmax(0,1fr));
     gap:12px;
}
.vy-warranty-links>a {
     padding:12px;
     border:1px solid var(--border);
     border-radius:10px;
     display:flex;
     gap:10px;
     align-items:center;
     min-width:0;
}
.vy-warranty-links strong {
     font-size:12px;
}
.vy-warranty-links small {
     display:block;
     color:var(--text-muted);
     font-size:10px;
     margin-top:4px;
}
.vy-warranty-links>a>i {
     margin-inline-start:auto;
     font-size:11px;
     color:var(--vy-blue);
}
.vy-category-icon {
     color:var(--vy-blue);
     font-size:26px;
}
.vy-preview-note {
     padding:10px;
     background:#fff4d9;
     margin-bottom:12px;
     border-radius:8px;
     font-size:13px;
}
.vy-preview-note a {
     color:var(--vy-blue);
     margin-inline-start:16px;
}
.vy-app .site-footer {
     margin-top:24px;
}
.vy-app .site-footer-inner {
     grid-template-columns:1fr 1.5fr auto;
}
.vy-app .site-footer-desc {
     font-size:11px;
}
@media(min-width:1600px) {
     .vy-app .sidebar {
     width:240px;
     min-width:240px;
}
.vy-car-banner {
     min-height:270px;
}
.vy-banner-art img {
     height:245px;
}
}
@media(max-width:1199px) {
     .vy-app .sidebar {
     width:195px;
     min-width:195px;
}
.vy-app .scroll-area {
     padding:16px;
}
.vy-car-banner {
     grid-template-columns:170px 1fr;
     gap:18px;
}
.vy-banner-art {
     grid-column:2;
     grid-row:1;
}
.vy-banner-copy {
     grid-column:1/-1;
     display:flex;
     flex-wrap:wrap;
     align-items:center;
     gap:12px 24px;
}
.vy-banner-copy h2 {
     font-size:24px;
     margin:0;
}
.vy-banner-copy>p {
     margin:0;
}
.vy-banner-copy>small {
     display:none;
}
.vy-banner-copy>bdi {
     margin:0;
}
.vy-banner-copy>a {
     margin-inline-start:auto;
}
.vy-banner-art img {
     height:185px;
}
.vy-dashboard-grid {
     grid-template-columns:1fr 1fr;
}
.vy-mileage-panel {
     grid-column:1/-1;
}
.vy-warranty-links {
     grid-template-columns:1fr 1fr;
}
.vy-topbar-vehicle bdi {
     display:none;
}
.vy-header-title {
     font-size:16px;
}
}
@media(max-width:767px) {
     .vy-app .sidebar {
     width:min(280px,88vw);
     min-width:0;
}
.vy-app .main-content {
     width:100%;
}
.vy-desktop-topbar {
     display:none;
}
.vy-app .scroll-area {
     padding:12px;
}
.vy-car-banner {
     grid-template-columns:1fr 1fr;
     padding:16px;
     gap:12px;
}
.vy-banner-status {
     padding:12px;
}
.vy-banner-status>i {
     position:static;
     font-size:28px;
     margin-bottom:6px;
}
.vy-banner-status small {
     padding:0;
     font-size:10px;
}
.vy-banner-status strong {
     font-size:16px;
     margin:5px 0 9px;
}
.vy-banner-status p {
     font-size:11px;
}
.vy-banner-status>span {
     font-size:10px;
}
.vy-banner-art img {
     height:160px;
}
.vy-banner-copy {
     display:block;
}
.vy-banner-copy h2 {
     font-size:23px;
     margin-bottom:8px;
}
.vy-banner-copy>p {
     font-size:12px;
     margin-bottom:10px;
}
.vy-banner-copy>bdi {
     display:inline-block;
     font-size:13px;
     margin-bottom:12px;
}
.vy-banner-copy>a {
     width:100%;
}
.vy-shortcuts {
     grid-template-columns:repeat(3,minmax(0,1fr));
     gap:7px;
}
.vy-shortcuts>a {
     padding:13px 6px;
}
.vy-shortcuts strong {
     font-size:11px;
}
.vy-shortcuts small {
     display:none;
}
.vy-shortcuts i {
     width:40px;
     height:40px;
     font-size:22px;
}
.vy-dashboard-grid {
     grid-template-columns:1fr;
}
.vy-mileage-panel {
     grid-column:auto;
}
.vy-panel {
     padding:16px;
}
.vy-details dl>div {
     font-size:13px;
}
.vy-details bdi {
     font-size:12px;
}
.vy-warranty-links {
     grid-template-columns:1fr 1fr;
     gap:8px;
}
.vy-warranty-links>a {
     padding:12px 8px;
     gap:7px;
}
.vy-warranty-links strong {
     font-size:11px;
}
.vy-app .site-footer-inner {
     grid-template-columns:1fr;
}
.vy-login .lx-top {
     min-height:95px;
     padding:15px 20px;
     gap:12px;
}
.vy-header-title {
     font-size:13px;
     line-height:1.9;
     max-width:180px;
}
.vy-login .lx-logo-icon {
     font-size:36px;
     height:42px;
}
.vy-login .lx-logo-text {
     font-size:20px;
}
.vy-login .lx-top-right {
     display:none;
}
.vy-login-scene {
     min-height:440px;
     background-position:35% 70%;
     background-image:linear-gradient(180deg,#f4f9fffa 0,#f4f9ffd9 26%,#f4f9ff00 65%),url('../images/brand/service-hero.png');
}
.vy-login-copy {
     width:100%;
     max-width:none;
     padding:45px 22px 160px;
     text-align:center;
}
.vy-login-copy h1 {
     font-size:30px;
     line-height:1.6;
     margin-bottom:12px;
}
.vy-login-copy p {
     font-size:14px;
}
.vy-login-card {
     margin-top:-45px;
     padding:25px 20px;
     width:calc(100% - 28px);
     border-radius:16px;
}
.vy-login-card-head {
     gap:14px;
     margin-bottom:24px;
}
.vy-login-card-head>span {
     width:60px;
     height:64px;
     font-size:38px;
     border-radius:14px;
}
.vy-login-card h2 {
     font-size:25px;
}
.vy-login-card-head p {
     font-size:12px;
}
.vy-login .lx-input {
     min-height:56px;
     font-size:17px;
}
.vy-login .lx-btn {
     font-size:16px;
     min-height:52px;
}
.vy-login-method {
     font-size:11px;
}
.vy-login-benefits {
     width:95%;
     gap:6px;
     margin-block:28px;
}
.vy-login-benefits i {
     width:52px;
     height:52px;
     font-size:25px;
}
.vy-login-benefits strong {
     font-size:11px;
}
.vy-login-benefits>div+div:before {
     height:42px;
     top:17px;
}
.vy-login .vy-steps {
     grid-template-columns:1fr;
     padding:15px 24px;
     gap:18px;
}
.vy-login .site-footer {
     padding-top:30px;
}
.vy-login .lx-otp-input {
     width:40px;
}
}
@media(prefers-reduced-motion:reduce) {
     .vy-side-nav a,.vy-shortcuts>a {
     transition:none;
}
}
.vy-login .lx .site-footer {
     width:100%;
     margin-inline:0;
}

/* Reference composition: centered form over a continuous, curved photographic hero. */
.vy-login .lx-main { isolation:isolate; }
.vy-login-scene {
    min-height:520px;
    background:none;
    position:relative;
}
.vy-login-scene::before {
    content:'';
    position:absolute;
    inset:0 0 auto;
    height:680px;
    z-index:-1;
    background-color:#edf7ff;
    background-image:linear-gradient(90deg,transparent 34%,#f5faff20 47%,#f5faffed 72%,#f5faff 90%),url('../images/brand/service-hero-v2.png');
    background-size:100% 100%, clamp(1020px,85vw,1250px) auto;
    background-position:center,left 42%;
    background-repeat:no-repeat;
    border-radius:0 0 100% 0 / 0 0 26% 0;
    box-shadow:0 18px 0 #e1f1ff;
}
.vy-login-copy {
    position:relative;
    width:47%; max-width:680px;
    padding:85px 6% 90px 20px;
}
.vy-login-copy h1 { font-size:clamp(32px,3.3vw,48px); line-height:1.65; }
.vy-login-copy p { font-size:19px; }
.vy-login-card {
    margin-top:-70px;
    max-width:720px;
    padding:34px 38px;
    background:#fff;
    box-shadow:0 20px 65px #175ea91a;
}
.vy-login-benefits { margin-top:42px; }
@media(min-width:1600px) {
    .vy-login-scene::before { background-size:100% 100%, 74% auto; background-position:center,left 48%; }
}
@media(max-width:767px) {
    .vy-login-scene { min-height:490px; background:none; }
    .vy-login-scene::before {
        height:600px;
        background-image:linear-gradient(180deg,#f5faff 0%,#f5faff 45%,#f5faff00 60%),url('../images/brand/service-hero-v2.png');
        background-size:100% 100%,auto 330px;
        background-position:center,left 270px;
        border-radius:0 0 100% 0 / 0 0 12% 0;
        box-shadow:0 10px 0 #e1f1ff;
    }
    .vy-login-copy { width:100%; padding:40px 22px 180px; text-align:center; }
    .vy-login-copy h1 { font-size:29px; }
    .vy-login-copy p { font-size:14px; }
    .vy-login-card { margin-top:-15px; padding:25px 20px; }
}
.vy-tip-content { min-width:0; }
.vy-tip-content p { white-space:pre-line; overflow-wrap:anywhere; line-height:1.95; }
.vy-tip-status { display:flex; flex-wrap:wrap; gap:6px; color:#2159ac; font-size:12px; margin:8px 0; }
.vy-tip-due { color:#a34a00; background:#fff3df; border-radius:5px; padding:3px 8px; }
.vy-data-note { font-size:12px; line-height:2; color:#617491; }
.vy-data-note a { color:#0055f5; text-decoration:underline; }
.vy-tip-source { margin-top:12px; font-size:13px; line-height:2; }
.vy-tip-source summary { cursor:pointer; color:#2159ac; padding:8px 0; }
.vy-app .tip-list-title { font-size:17px; }
.vy-app .tip-item { align-items:flex-start; }
.vy-app .tip-item[id] { scroll-margin-top:24px; }
.vy-app .tip-item:target { outline:2px solid #86b7fe; outline-offset:4px; border-radius:8px; }