:root{
  --primary:#1E4E79;
  --accent:#FCB714;
  --page:#F5F7FA;
  --card:#FFFFFF;
  --border:#D9E2EC;
  --text:#1F2937;
}
html,body{background:var(--page);color:var(--text);font-family:Segoe UI,Arial,sans-serif;margin:0;padding:0}
.iuv-topbar{background:var(--primary);padding:10px 0;box-shadow:0 4px 12px rgba(0,0,0,.08)}
.iuv-topbar-inner{max-width:1600px;margin:0 auto;padding:0 16px;display:flex;align-items:center;gap:20px}
.brand-link{display:flex;align-items:center;gap:12px;color:#fff;text-decoration:none;white-space:nowrap;font-size:1rem;font-weight:600}
.brand-link img{height:54px;width:auto;display:block}
.nav-scroll-area{flex:1;overflow-x:auto;overflow-y:hidden;-ms-overflow-style:none;scrollbar-width:none}
.nav-scroll-area::-webkit-scrollbar{display:none}
.iuv-nav-list{display:flex;flex-wrap:nowrap;align-items:center;gap:26px;list-style:none;margin:0;padding:0 4px 0 0;min-width:max-content}
.iuv-nav-list li{display:block;white-space:nowrap}
.iuv-nav-list a{color:#d9e2ec;text-decoration:none;font-size:.98rem;font-weight:500;white-space:nowrap}
.iuv-nav-list a:hover{color:#fff}
.hero-logo{max-height:160px;object-fit:contain}
.page-card{background:var(--card);border:1px solid var(--border);border-radius:14px;padding:16px;margin-bottom:16px;box-shadow:0 8px 18px rgba(30,78,121,.08)}
.section-title{font-size:1.5rem;font-weight:700;color:var(--primary)}
.section-header{font-size:1.1rem;font-weight:700;color:var(--primary)}
.label-strong{font-weight:600}
.btn-primary-custom{background:var(--primary);border-color:var(--primary);color:#fff}
.btn-accent{background:var(--accent);border-color:var(--accent);color:#000}
.info-note{background:#F4F8FC;border:1px solid #D6E4F0;border-radius:16px;padding:14px}
.warning-note{background:#FFF4F4;border:1px solid #E8B9B9;border-radius:16px;padding:14px;color:#8B1E1E}
.header-panel{background:#215883;color:white;border-radius:20px;padding:22px;box-shadow:0 8px 18px rgba(33,88,131,.15)}
.form-control,.form-select{margin-top:.25rem;margin-bottom:.75rem}
textarea.form-control{min-height:100px}
.checkbox-list .form-check{margin-bottom:.45rem}
.form-section .page-card{margin-bottom:18px}
.small-file-note{font-size:.85rem;color:#6b7280}
@media (max-width: 991px){
  .iuv-topbar-inner{gap:14px}
  .brand-link span{font-size:.95rem}
  .brand-link img{height:46px}
  .iuv-nav-list{gap:18px}
}



.hero-card{padding:2.5rem 2rem}
.hero-title{font-size:2rem;font-weight:700;color:var(--primary)}
.hero-text{font-size:1.05rem;color:#4f5b67;max-width:900px;margin:0 auto;line-height:1.7}
.custom-alert{border-radius:14px;text-align:left}
.section-header{font-size:1.35rem;font-weight:700;color:var(--primary);display:flex;align-items:center}
.app-btn{border-radius:14px;font-size:1rem;font-weight:600;transition:all .2s ease-in-out}
.app-btn:hover{transform:translateY(-2px)}
.custom-check-list{list-style:none;padding-left:0;margin-bottom:0}
.custom-check-list li{margin-bottom:.9rem;color:#334155}
.custom-check-list i{color:#198754}
.hero-intro{background:#F8FBFE;border:1px solid #D6E4F0;border-radius:14px;padding:16px 18px;max-width:1100px;margin:0 auto}
.hero-intro .hero-text{color:#33506b}
.additional-links .col-md-4{display:flex}
.additional-links a{width:100%;min-height:64px;display:flex;align-items:center;padding:1rem 1.1rem;border-radius:16px;background:#F8FAFC;text-decoration:none;color:#255377;font-weight:600;transition:all .2s ease-in-out;border:1px solid #E6EDF5}
.additional-links a:hover{background:#E9F2FB;color:#1D4568;transform:translateY(-1px)}
.uri-modal{border-radius:18px;overflow:hidden;border:none;box-shadow:0 10px 35px rgba(0,0,0,.15)}
.uri-modal-header{background:#255377;color:white;border-bottom:4px solid #FCB714}
.uri-icon-wrapper{background:rgba(252,183,20,.15);width:80px;height:80px;border-radius:50%;display:flex;align-items:center;justify-content:center;margin:0 auto}
.uri-main-icon{font-size:2.5rem;color:#FCB714}
.uri-modal-text{font-size:1.1rem;font-weight:600;color:#255377}
.uri-modal-subtext{font-size:.95rem;color:#6c757d}
.uri-btn-primary{background-color:#255377;color:white;border-radius:10px;font-weight:600}
.uri-btn-primary:hover{background-color:#1d4568;color:white}


.home-emoji{display:inline-block;font-size:1.15em;line-height:1;vertical-align:-0.05em;}
.btn-primary-custom.app-btn:hover,.btn-primary-custom.app-btn:focus{background:var(--primary);border-color:var(--primary);color:#b8c2cc;}
.btn-accent.app-btn:hover,.btn-accent.app-btn:focus{background:var(--accent);border-color:var(--accent);color:#6b7280;}
.btn-primary-custom.app-btn:hover .home-emoji,.btn-accent.app-btn:hover .home-emoji{filter:grayscale(0%);}


/* Enhanced home button hover/click */
.app-btn,
.btn-primary-custom.app-btn,
.btn-accent.app-btn {
    transition: background-color .2s ease, color .2s ease, transform .2s ease, box-shadow .2s ease;
}

.btn-primary-custom.app-btn:hover,
.btn-primary-custom.app-btn:focus,
.btn-primary-custom.app-btn:active {
    background-color: #3f6f99 !important;
    border-color: #3f6f99 !important;
    color: #ffffff !important;
    box-shadow: 0 8px 18px rgba(30,78,121,.18);
}

.btn-accent.app-btn:hover,
.btn-accent.app-btn:focus,
.btn-accent.app-btn:active {
    background-color: #ffd36a !important;
    border-color: #ffd36a !important;
    color: #ffffff !important;
    box-shadow: 0 8px 18px rgba(252,183,20,.22);
}

.btn-primary-custom.app-btn:hover .home-emoji,
.btn-primary-custom.app-btn:focus .home-emoji,
.btn-primary-custom.app-btn:active .home-emoji,
.btn-accent.app-btn:hover .home-emoji,
.btn-accent.app-btn:focus .home-emoji,
.btn-accent.app-btn:active .home-emoji {
    filter: brightness(1.02);
}


.hero-card {
    padding: 2.5rem 2rem;
}

.hero-intro-box {
    background: linear-gradient(135deg, rgba(37,83,119,0.08), rgba(112,176,224,0.18));
    border: 1px solid #c6d8e8;
    border-radius: 18px;
    padding: 1.5rem 1.75rem;
    max-width: 1180px;
    margin-left: auto;
    margin-right: auto;
}

.hero-intro-text {
    font-size: 1.05rem;
    line-height: 1.75;
    color: #35516e;
}

.styled-list {
    list-style: none;
    padding-left: 0;
}

.styled-list li {
    padding: 0.45rem 0;
    color: #334155;
    font-size: 1rem;
}

.highlight-card {
    background: #eef8fb;
    border-left: 6px solid #FCB714;
}

.additional-links a {
    display: block;
    padding: 0.95rem 1rem;
    border-radius: 14px;
    background: #f5f7fa;
    text-decoration: none;
    color: #255377;
    font-weight: 600;
    transition: background-color .2s ease, color .2s ease, transform .2s ease;
}

.additional-links a:hover,
.additional-links a:focus {
    background: #e4edf6;
    color: #255377;
    transform: translateY(-1px);
}


/* ===== Unified Home-Style UI Across All Pages ===== */
.page-card,
.header-panel,
.info-panel,
.section-panel,
.card,
.form-card {
    border-radius: 20px !important;
    border: 1px solid #c8d8e6 !important;
    box-shadow: 0 2px 10px rgba(37, 83, 119, 0.06) !important;
}

.page-card {
    background: #f8fbfd !important;
    padding: 1.75rem 1.5rem !important;
    margin-bottom: 1.5rem !important;
}

.section-title,
.section-header {
    color: #255377 !important;
    font-weight: 700 !important;
    letter-spacing: 0.1px;
}

.section-title {
    font-size: 2rem !important;
    line-height: 1.2 !important;
}

.section-header {
    font-size: 1.35rem !important;
    display: flex !important;
    align-items: center !important;
}

.header-panel {
    background: #2d628f !important;
    color: #ffffff !important;
    padding: 1.9rem 1.5rem !important;
    text-align: center !important;
}

.header-panel .section-title,
.header-panel .section-header,
.header-panel h1,
.header-panel h2,
.header-panel h3,
.header-panel p {
    color: #ffffff !important;
}

.home-emoji {
    font-size: 1.15em;
    line-height: 1;
    vertical-align: middle;
}

.info-panel,
.section-panel {
    background: #eef6fb !important;
    padding: 1.25rem 1.25rem !important;
}

.additional-links .col-md-4,
.additional-links .col-lg-4,
.additional-links .col-sm-6 {
    margin-bottom: 0.25rem;
}

.additional-links a,
.page-card ul li a,
.tile-link {
    display: block;
    width: 100%;
    border-radius: 14px;
    background: #f3f7fa;
    border: 1px solid #d8e4ee;
    padding: 0.95rem 1rem;
    text-decoration: none;
    color: #255377 !important;
    font-weight: 600;
    transition: background-color .2s ease, color .2s ease, transform .2s ease, box-shadow .2s ease;
}

.additional-links a:hover,
.additional-links a:focus,
.page-card ul li a:hover,
.page-card ul li a:focus,
.tile-link:hover,
.tile-link:focus {
    background: #e4edf6 !important;
    color: #255377 !important;
    transform: translateY(-1px);
    box-shadow: 0 6px 14px rgba(37,83,119,.08);
}

.btn,
button[type=submit],
input[type=submit] {
    border-radius: 14px !important;
    font-weight: 600 !important;
}

.btn-primary-custom,
.btn-accent,
.app-btn {
    transition: background-color .2s ease, color .2s ease, transform .2s ease, box-shadow .2s ease !important;
}

.btn-primary-custom:hover,
.btn-primary-custom:focus,
.btn-primary-custom:active,
.app-btn.btn-primary-custom:hover,
.app-btn.btn-primary-custom:focus,
.app-btn.btn-primary-custom:active {
    background-color: #4f7da3 !important;
    border-color: #4f7da3 !important;
    color: #ffffff !important;
    box-shadow: 0 8px 18px rgba(30,78,121,.18);
    transform: translateY(-1px);
}

.btn-accent:hover,
.btn-accent:focus,
.btn-accent:active,
.app-btn.btn-accent:hover,
.app-btn.btn-accent:focus,
.app-btn.btn-accent:active {
    background-color: #ffd36a !important;
    border-color: #ffd36a !important;
    color: #ffffff !important;
    box-shadow: 0 8px 18px rgba(252,183,20,.22);
    transform: translateY(-1px);
}

label,
.form-label {
    font-weight: 600 !important;
    color: #244766 !important;
}

.form-control,
.form-select,
textarea,
input,
select {
    border-radius: 12px !important;
    border-color: #c9d7e4 !important;
    padding-top: 0.7rem !important;
    padding-bottom: 0.7rem !important;
}

.form-control:focus,
.form-select:focus,
textarea:focus,
input:focus,
select:focus {
    border-color: #70B0E0 !important;
    box-shadow: 0 0 0 0.2rem rgba(112,176,224,0.2) !important;
}

.alert,
.custom-alert {
    border-radius: 16px !important;
    border: 1px solid #b9deef !important;
}

ul.styled-list,
.page-card ul {
    list-style: none;
    padding-left: 0;
}

ul.styled-list li,
.page-card ul li {
    padding: 0.45rem 0;
    color: #334155;
}

body {
    background: #eef2f6;
}


/* ===== Uniform Top Banner / Header Panels Across Pages ===== */
.header-panel,
.page-hero,
.top-banner,
.hero-banner {
    min-height: 170px !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    align-items: center !important;
    padding: 2.25rem 2rem !important;
    border-radius: 22px !important;
    background: linear-gradient(135deg, #255377 0%, #2d628f 100%) !important;
    color: #ffffff !important;
    box-shadow: 0 8px 22px rgba(37,83,119,0.14) !important;
    margin-bottom: 1.5rem !important;
}

.header-panel .section-title,
.header-panel .section-header,
.header-panel h1,
.header-panel h2,
.header-panel h3,
.header-panel p,
.page-hero h1,
.page-hero h2,
.page-hero h3,
.page-hero p,
.top-banner h1,
.top-banner h2,
.top-banner h3,
.top-banner p,
.hero-banner h1,
.hero-banner h2,
.hero-banner h3,
.hero-banner p {
    color: #ffffff !important;
}

.header-panel .section-title,
.page-hero .section-title,
.top-banner .section-title,
.hero-banner .section-title {
    font-size: 2rem !important;
    font-weight: 700 !important;
    line-height: 1.2 !important;
    margin-bottom: 0.65rem !important;
}

.header-panel p,
.page-hero p,
.top-banner p,
.hero-banner p {
    max-width: 1050px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    font-size: 1.05rem !important;
    line-height: 1.65 !important;
    margin-bottom: 0 !important;
}

@media (max-width: 768px) {
    .header-panel,
    .page-hero,
    .top-banner,
    .hero-banner {
        min-height: 145px !important;
        padding: 1.75rem 1.25rem !important;
    }

    .header-panel .section-title,
    .page-hero .section-title,
    .top-banner .section-title,
    .hero-banner .section-title {
        font-size: 1.6rem !important;
    }
}


.retry-spinner {
    width: 16px;
    height: 16px;
    border: 2px solid rgba(255,255,255,0.35);
    border-top-color: #ffffff;
    border-radius: 50%;
    display: inline-block;
    animation: retrySpin 0.8s linear infinite;
    vertical-align: middle;
}

@keyframes retrySpin {
    to { transform: rotate(360deg); }
}

.visible-setup-success {
    background: #eef9f1 !important;
    border-left: 6px solid #2e7d32 !important;
    border: 1px solid #c6e6cd !important;
}

.visible-setup-success .section-header,
.visible-setup-success p {
    color: #2e6b35 !important;
}


/* Square checkbox styling */
input[type="checkbox"],
.form-check-input[type="checkbox"] {
    border-radius: 4px !important;
    width: 1.05rem;
    height: 1.05rem;
    border: 2px solid #8aa7c2 !important;
    appearance: auto;
}

input[type="checkbox"]:focus,
.form-check-input[type="checkbox"]:focus {
    box-shadow: 0 0 0 0.2rem rgba(112,176,224,0.22) !important;
}

.form-check-input[type="radio"] {
    border-radius: 50% !important;
}


/* ===== Modern URI Styled Checkboxes ===== */
input[type="checkbox"],
.form-check-input[type="checkbox"] {
    appearance: none;
    width: 18px;
    height: 18px;
    border: 2px solid #70B0E0;
    border-radius: 4px;
    background-color: #ffffff;
    cursor: pointer;
    position: relative;
    transition: all 0.2s ease;
}

input[type="checkbox"]:hover {
    border-color: #255377;
    background-color: #f0f6fb;
}

input[type="checkbox"]:checked {
    background-color: #255377;
    border-color: #255377;
}

input[type="checkbox"]:checked::after {
    content: "✔";
    color: #ffffff;
    font-size: 12px;
    position: absolute;
    top: 0;
    left: 3px;
}

input[type="checkbox"]:focus {
    box-shadow: 0 0 0 0.2rem rgba(112,176,224,0.25);
}

.form-check-input[type="radio"] {
    border-radius: 50% !important;
}


/* Guaranteed square custom checkboxes */
input[type="checkbox"],
.form-check-input[type="checkbox"] {
    -webkit-appearance: none !important;
    appearance: none !important;
    width: 18px !important;
    height: 18px !important;
    min-width: 18px !important;
    border: 2px solid #70B0E0 !important;
    border-radius: 4px !important;
    background-color: #ffffff !important;
    cursor: pointer !important;
    position: relative !important;
    vertical-align: middle !important;
    transition: all 0.2s ease !important;
}

input[type="checkbox"]:hover,
.form-check-input[type="checkbox"]:hover {
    border-color: #255377 !important;
    background-color: #f0f6fb !important;
}

input[type="checkbox"]:checked,
.form-check-input[type="checkbox"]:checked {
    background-color: #255377 !important;
    border-color: #255377 !important;
}

input[type="checkbox"]:checked::after,
.form-check-input[type="checkbox"]:checked::after {
    content: "✔" !important;
    color: #ffffff !important;
    font-size: 12px !important;
    line-height: 1 !important;
    position: absolute !important;
    top: 1px !important;
    left: 3px !important;
}

input[type="checkbox"]:focus,
.form-check-input[type="checkbox"]:focus {
    box-shadow: 0 0 0 0.2rem rgba(112,176,224,0.25) !important;
    outline: none !important;
}

input[type="radio"],
.form-check-input[type="radio"] {
    border-radius: 50% !important;
}


/* Native simple square checkboxes */
input[type="checkbox"],
.form-check-input[type="checkbox"] {
    appearance: checkbox !important;
    -webkit-appearance: checkbox !important;
    -moz-appearance: checkbox !important;
    width: 16px;
    height: 16px;
    min-width: 16px;
    min-height: 16px;
    border-radius: 0 !important;
    box-shadow: none !important;
    margin-top: 0.18rem;
    vertical-align: top;
}

.checkbox-list .form-check,
.health-inline-question {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    margin-bottom: 0.85rem;
}

.checkbox-list .form-check-label,
.health-inline-question .form-check-label {
    margin: 0;
    line-height: 1.35;
}

.health-inline-question {
    margin-top: 0.4rem;
    margin-bottom: 1rem;
}


/* ===== Icon alignment for all page titles and section titles ===== */
.section-title,
.section-header {
    display: flex !important;
    align-items: center !important;
    gap: 0.55rem !important;
    flex-wrap: nowrap;
}

.section-title .home-emoji,
.section-header .home-emoji,
.page-card .section-title .home-emoji,
.page-card .section-header .home-emoji,
.header-panel .section-title .home-emoji,
.header-panel .section-header .home-emoji {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex: 0 0 auto;
    line-height: 1 !important;
    vertical-align: middle !important;
    margin-right: 0 !important;
    position: relative;
    top: -1px;
}

.section-title > span:last-child,
.section-header > span:last-child {
    display: inline-block;
}


.home-title-center {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    width: 100%;
}


/* Clearer click visibility across all forms */
.form-check {
    padding: 6px 10px;
    border: 1px solid transparent;
    border-radius: 10px;
    transition: background-color .18s ease, border-color .18s ease, box-shadow .18s ease;
}

.form-check:hover {
    background: #f4f8fc;
    border-color: #c9d9ea;
}

.form-check:has(input:checked) {
    background: #eaf3fb;
    border-color: #255377;
    box-shadow: 0 0 0 1px rgba(37,83,119,.16);
}

.form-check-input {
    width: 18px;
    height: 18px;
    accent-color: #255377;
    cursor: pointer;
}

.form-check-label {
    cursor: pointer;
}

.form-control:focus,
.form-select:focus,
textarea.form-control:focus {
    border-color: #255377;
    box-shadow: 0 0 0 0.15rem rgba(37,83,119,.18);
}


.home-image-viewer-wrap {
    width: 100%;
}

.home-image-viewer {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
}

.home-feature-image {
    display: block;
    width: 100%;
    max-width: 520px;
    max-height: 360px;
    object-fit: cover;
    margin: 0 auto;
    border-radius: 14px;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.08);
}

.home-image-switcher {
    display: flex;
    justify-content: center;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.home-image-switcher .btn {
    min-width: 110px;
    border-radius: 999px;
}

.home-image-switcher .btn.active {
    background-color: #255377;
    border-color: #255377;
    color: #fff;
}

/* Home image viewer fix */
.home-image-viewer-wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.home-image-viewer {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    min-height: 360px;
}

.home-feature-image {
    display: block;
    max-width: 100%;
    width: auto;
    max-height: 360px;
    object-fit: contain;
    margin: 0 auto;
    border-radius: 12px;
}

.home-image-switcher {
    display: flex;
    gap: 14px;
    justify-content: center;
    align-items: center;
}

.hero-intro-text-compact {
    max-width: 1360px;
    margin: 0 auto;
    font-size: 0.95rem;
    line-height: 1.5;
}

@media (max-width: 900px) {
    .home-feature-image {
        max-height: 300px;
    }

    .hero-intro-text-compact {
        font-size: 0.92rem;
    }
}