*{
    margin:0;
    padding:0;
    box-sizing:border-box
}
body{
    font-family:"Segoe UI",Tahoma,sans-serif;
    background:#080f1a;
    color:#f2f7fb;
    min-height:100vh;
    margin:0;
    padding:0;
    padding-top:68px
}
:root{
    --hero-navy:#0b1220;
    --hero-navy-2:#0a1a33;
    --hero-edge:#0c1b30;
    --ink-100:#f2f7fb;
    --ink-300:#cfe1e7;
    --tile-stroke:rgba(255,255,255,.10)
}
.wrapper{
    position:relative;
    overflow:hidden;
    display:grid;
    grid-template-columns:1.15fr .85fr;
    gap:28px;
    max-width:1160px;
    margin:20px auto;
    padding:22px 34px 34px;
    border-radius:20px;
    border:1px solid rgba(255,255,255,.06);
    box-shadow:0 18px 60px rgba(0,0,0,.35);
    background:radial-gradient(1000px 520px at 115% 120%,#0a1a33 0%,transparent 55%),radial-gradient(1200px 600px at -12% -20%,#0c1b30 0%,transparent 60%),#0b1220
}
.wrapper>*{
    position:relative;
    z-index:1
}
/*
  DC MAP SVG — app.css replacement for .wrapper::before
  
  Replace the entire .wrapper::before rule in app.css with this block.
  
  SVG accurately traces the DC boundary:
  - Perfect diamond orientation (original 10-mile square rotated 45°)
  - Virginia retrocession notch: southwest corner removed, replaced
    with Potomac River's irregular western/southern edge
  - Straight northern border (Maryland survey line)
  - Anacostia River softening the southeast quadrant interior
  - The four quadrant lines (N/S/E/W streets meeting at Capitol)
  - Subtle fill tints for NW/NE/SW/SE quadrants matching the
    teal color palette of the existing app
*/

.wrapper::before {
    content: "";
    position: absolute;
    left: -80px;
    top: -60px;
    width: 560px;
    height: 560px;
    opacity: .38;
    mix-blend-mode: screen;
    pointer-events: none;
    z-index: 0;
    filter: drop-shadow(0 0 10px rgba(138,209,230,.08));
    background: no-repeat center/contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 520 520'%3E%3Cdefs%3E%3ClinearGradient id='dcStroke' x1='0.08' y1='0.04' x2='0.92' y2='0.96'%3E%3Cstop offset='0%25' stop-color='%23ecfcff' stop-opacity='.98'/%3E%3Cstop offset='100%25' stop-color='%238ad1e6' stop-opacity='.52'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath d='M260 22 L402 164 L486 248 L404 330 L322 412 L286 448 L270 474 L248 452 L214 414 L132 332 L50 250 L118 182 L188 112 Z' fill='none' stroke='url(%23dcStroke)' stroke-width='2.8' stroke-linejoin='round' stroke-linecap='round'/%3E%3Cpath d='M118 182 L90 210 L74 232 L76 248 L88 270 L106 300 L130 334 L158 368 L190 402 L220 432 L246 456 L260 474 L274 454 L294 424 L320 394' fill='none' stroke='url(%23dcStroke)' stroke-width='2.8' stroke-linecap='round' stroke-opacity='.96'/%3E%3Cline x1='260' y1='82' x2='260' y2='430' stroke='%23ecfcff' stroke-opacity='.42' stroke-width='1.55' stroke-dasharray='7 8'/%3E%3Cline x1='96' y1='248' x2='424' y2='248' stroke='%23ecfcff' stroke-opacity='.42' stroke-width='1.55' stroke-dasharray='7 8'/%3E%3C/svg%3E");
}
.header{
    background:transparent!important;
    box-shadow:none!important;
    text-align:left
}
.title{
    margin:0 0 10px;
    font-size:3.2rem;
    line-height:1.08;
    letter-spacing:-0.02em;
    font-weight:900;
    color:#f2f7fb;
    text-align:left
}
.title .tm{
    font-size:.45em;
    vertical-align:super;
    line-height:0;
    margin-left:2px;
    opacity:.9;
    position:relative;
    top:-.25em
}
.subtitle{
    margin:4px 0 16px;
    font-size:1.08rem;
    color:#e6f0f5;
    max-width:560px;
    text-align:left
}
.price-stamp{
    display:flex;
    flex-direction:column;
    gap:4px;
    background:rgba(255,255,255,.04);
    border:1px solid rgba(255,255,255,.10);
    border-radius:14px;
    padding:14px 16px;
    width:fit-content;
    box-shadow:0 8px 24px rgba(0,0,0,.35),inset 0 1px 0 rgba(255,255,255,.05);
    margin-bottom:18px;
    text-align:left
}
.price-stamp .amount {
    font-size: 1.5rem;
    font-weight: 700;
    letter-spacing: 0.5px;
    color: #eaf2ff;
    line-height: 1.3;
}

.price-stamp .tagline {
    font-size: 0.95rem;
    font-weight: 500;
    color: #93c5fd;
    opacity: 0.9;
}

.price-stamp .tagline.pilot {
    font-size: 1rem;
    font-weight: 600;
    color: #bfdbfe;
    margin-top: 6px;
}

.features{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:12px 14px;
    margin-top:8px
}
.feature{
    background:rgba(255,255,255,.038);
    border:1px solid rgba(255,255,255,.10);
    border-radius:12px;
    padding:14px 16px;
    text-align:left;
    transition:transform .12s ease,box-shadow .12s ease,border-color .12s ease
}
.feature:hover{
    transform:translateY(-2px);
    border-color:rgba(138,209,230,.35);
    box-shadow:0 12px 26px rgba(0,0,0,.35)
}
.feature h3,.feature .feature-title{
    margin:0 0 6px;
    color:#fff;
    font-size:1rem;
    font-weight:800;
    text-align:left
}
.feature p{
    margin:0;
    color:#fff;
    font-size:.95rem;
    line-height:1.36;
    text-align:left
}
.search-box{
    margin-top:4px;
    background:transparent!important;
    box-shadow:none!important
}
.input-wrapper{
    background:rgba(255,255,255,.06)!important;
    border:1px solid rgba(255,255,255,.12)!important;
    border-radius:12px;
    margin-top:10px;
    position:relative;
    width:100%;
    transition:box-shadow .12s ease,border-color .12s ease
}
.input-wrapper:has(.search-input:focus){
    box-shadow:0 0 0 3px rgba(138,209,230,.35)!important;
    border-color:rgba(138,209,230,.45)!important
}
.input-wrapper.success{
    border-color:#34d399!important;
    box-shadow:0 0 0 3px rgba(52,211,153,.28)!important
}
.input-wrapper.error{
    border-color:#ef4444!important;
    box-shadow:0 0 0 3px rgba(239,68,68,.28)!important
}
.search-input{
    width:100%;
    padding:16px 45px 16px 16px;
    border:none;
    background:transparent!important;
    color:#f2f7fb!important;
    caret-color:#f2f7fb!important;
    border-radius:12px;
    font-size:1rem;
    text-align:center
}
.search-input::placeholder{
    color:#b9cad6!important
}
.search-input::selection{
    background:rgba(138,209,230,.35)!important;
    color:#071018!important
}
.search-input:-webkit-autofill{
    -webkit-box-shadow:0 0 0 1000px transparent inset!important;
    -webkit-text-fill-color:#f2f7fb!important;
    transition:background-color 99999s ease-in-out 0s!important
}
.validation-icon{
    position:absolute;
    right:15px;
    top:50%;
    transform:translateY(-50%);
    font-size:20px;
    display:none
}
.validation-icon.show{
    display:block
}
.input-wrapper.success .validation-icon{
    color:#34d399!important
}
.input-wrapper.error .validation-icon{
    color:#f87171!important
}
.format-hint{
    font-size:.75rem;
    color:#718096;
    margin-bottom:12px;
    display:flex;
    align-items:center;
    gap:4px
}
.help-icon{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:16px;
    height:16px;
    border-radius:50%;
    background:#4299e1;
    color:white;
    font-size:11px;
    font-weight:bold;
    cursor:help;
    position:relative
}
.help-icon:hover::after{
    content:attr(data-tooltip);
    position:absolute;
    bottom:120%;
    left:50%;
    transform:translateX(-50%);
    background:#2d3748;
    color:white;
    padding:8px 12px;
    border-radius:6px;
    font-size:12px;
    white-space:nowrap;
    z-index:1000;
    box-shadow:0 4px 12px rgba(0,0,0,.2)
}
.search-button{
    width:100%;
    margin-top:12px;
    padding:14px 24px;
    background:linear-gradient(90deg,#6fb6cc,#8ad1e6);
    border:none;
    border-radius:12px;
    color:#05232c;
    font-weight:900;
    font-size:1rem;
    cursor:pointer;
    box-shadow:0 8px 20px rgba(138,209,230,.22);
    transition:transform .12s,box-shadow .12s,filter .12s
}
.search-button:hover:not(:disabled){
    transform:translateY(-1px);
    box-shadow:0 12px 28px rgba(138,209,230,.30);
    filter:saturate(1.05)
}
.search-button:focus-visible{
    outline:none;
    box-shadow:0 0 0 4px rgba(138,209,230,.4),0 12px 28px rgba(138,209,230,.30)
}
.search-button:disabled{
    opacity:.6;
    cursor:not-allowed;
    transform:none
}
.trust-row{
    margin-top:10px;
    color:#bcd2df;
    font-size:.95rem;
    text-align:center
}
.disclaimer-banner{
    max-width:620px;
    margin-left:auto;
    margin-right:auto;
    background:linear-gradient(180deg,rgba(239,68,68,.10),rgba(239,68,68,.07));
    border:1px solid rgba(239,68,68,.35);
    color:#ffd9d3;
    border-radius:12px;
    padding:14px 16px
}
.progress-container{
    display:none;
    width:100%;
    margin-bottom:16px;
    background:white;
    border-radius:12px;
    padding:16px;
    box-shadow:0 2px 8px rgba(0,0,0,.1)
}
.progress-container.show{
    display:block
}
.progress-header{
    display:flex;
    justify-content:space-between;
    align-items:center;
    margin-bottom:12px
}
.progress-title{
    font-weight:600;
    color:#2d3748;
    font-size:.9rem
}
.progress-time{
    font-size:.8rem;
    color:#718096
}
.progress-bar-container{
    height:8px;
    background:#e2e8f0;
    border-radius:4px;
    overflow:hidden;
    margin-bottom:12px
}
.progress-bar{
    height:100%;
    background:linear-gradient(90deg,#3182ce,#63b3ed);
    border-radius:4px;
    transition:width .5s ease;
    width:0
}
.progress-steps{
    display:flex;
    flex-direction:column;
    gap:8px
}
.progress-step{
    display:flex;
    align-items:center;
    gap:10px;
    font-size:.85rem;
    color:#718096;
    padding:6px 8px;
    border-radius:6px;
    transition:all .4s ease
}
.progress-step.active{
    background:rgba(49,130,206,.1);
    color:#2c5282;
    font-weight:600;
    animation:pulse-subtle 2s ease-in-out infinite
}
.progress-step.complete{
    color:#2f855a;
    animation:none
}
@keyframes pulse-subtle{
    0%,100%{
        background:rgba(49,130,206,.1)
    }
    50%{
        background:rgba(49,130,206,.2)
    }
}
.step-icon{
    width:20px;
    height:20px;
    border-radius:50%;
    border:2px solid #cbd5e0;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:12px
}
.progress-step.active .step-icon{
    border-color:#3182ce;
    background:#3182ce;
    color:white
}
.progress-step.complete .step-icon{
    border-color:#48bb78;
    background:#48bb78;
    color:white
}
.progress-cancel{
    margin-top:12px;
    padding:6px 12px;
    background:#fed7d7;
    border:1px solid #fc8181;
    border-radius:6px;
    color:#c53030;
    font-size:.8rem;
    cursor:pointer;
    transition:all .2s
}
.progress-cancel:hover{
    background:#fc8181;
    color:white
}
.message-container{
    width:100%;
    margin-bottom:12px
}
.status-message{
    padding:12px;
    border-radius:8px;
    margin-bottom:8px;
    text-align:center;
    font-size:.85rem;
    display:none;
    backdrop-filter:blur(8px);
    animation:slideIn .3s ease
}
@keyframes slideIn{
    from{
        opacity:0;
        transform:translateY(-10px)
    }
    to{
        opacity:1;
        transform:translateY(0)
    }
}
.status-message.show{
    display:block
}
.status-success{
    background-color:rgba(198,246,213,.9);
    color:#2f855a;
    border:1px solid rgba(72,187,120,.5)
}
.status-info{
    background-color:rgba(190,227,248,.9);
    color:#2c5282;
    border:1px solid rgba(66,153,225,.5)
}
.status-error{
    background-color:rgba(254,215,215,.9);
    color:#c53030;
    border:1px solid rgba(254,178,178,.7);
    font-weight:500
}
.status-warning{
    background-color:rgba(255,235,156,.9);
    color:#d97706;
    border:1px solid rgba(251,191,36,.7)
}
.user-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    background: rgba(15, 23, 42, 0.92);  /* Darker, more sophisticated */
    color: white;
    padding: 8px 24px;  /* Reduced from 12px 20px */
    display: flex;
    justify-content: space-between;
    align-items: center;
    z-index: 3000;
    font-size: 0.875rem;  /* Slightly smaller */
    backdrop-filter: blur(12px) saturate(180%);  /* Enhanced blur */
    border-bottom: 1px solid rgba(148, 163, 184, 0.12);  /* Subtler border */
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);  /* Refined shadow */
    height: 48px;  /* Fixed height for consistency */
}

.user-header .user-info {
    font-weight: 600;
    font-size: 0.875rem;
    letter-spacing: 0.01em;  /* Slight letter spacing for refinement */
    color: rgba(255, 255, 255, 0.95);
}

.user-header .user-actions {
    display: flex;
    gap: 8px;  /* Reduced from 16px for tighter spacing */
    align-items: center;
}

.user-header a {
    color: rgba(255, 255, 255, 0.85);  /* More neutral, professional */
    text-decoration: none;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);  /* Smoother easing */
    font-weight: 500;
    font-size: 0.875rem;
    padding: 6px 14px;  /* Slightly wider horizontal padding */
    border-radius: 8px;  /* More modern radius */
    background: rgba(255, 255, 255, 0.05);  /* Subtler background */
    border: 1px solid rgba(255, 255, 255, 0.08);  /* Refined border */
    letter-spacing: 0.01em;
}

.user-header a:hover {
    color: #ffffff;
    background: rgba(59, 130, 246, 0.15);  /* Blue accent on hover */
    border-color: rgba(59, 130, 246, 0.3);
    transform: translateY(-1px);  /* Subtle lift effect */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.user-header a:active {
    transform: translateY(0);  /* Press down effect */
}
.modal-overlay{
    position:fixed;
    top:0;
    left:0;
    width:100%;
    height:100%;
    background:rgba(3,8,15,.72);
    backdrop-filter:blur(6px);
    z-index:9999;
    display:none;
    opacity:0;
    transition:opacity .3s ease
}
.modal-overlay.show{
    display:block;
    opacity:1
}
.modal-container{
    position:absolute;
    top:20px;
    left:50%;
    transform:translate(-50%,0) scale(.9);
    width:99%;
    max-width:2400px;
    height:calc(100vh - 40px);
    background:rgba(13,18,28,.92);
    border:1px solid rgba(255,255,255,.08);
    border-radius:16px;
    box-shadow:0 25px 80px rgba(0,0,0,.3);
    backdrop-filter:blur(20px);
    display:flex;
    flex-direction:column;
    transition:transform .3s ease;
    z-index:4001
}
.modal-header{
    background:linear-gradient(180deg,rgba(29,41,57,.96) 0%,rgba(18,26,40,.96) 100%);
    color:white;
    padding:12px 20px;
    border-radius:16px 16px 0 0;
    border-bottom:1px solid rgba(255,255,255,.08);
    display:flex;
    justify-content:space-between;
    align-items:center;
    box-shadow:0 2px 10px rgba(0,0,0,.1);
    min-height:50px
}
.modal-title{
    font-size:1rem;
    font-weight:800;
    margin:0;
    color:#e9f2ff;
    letter-spacing:-.01em
}
.modal-actions{
    display:flex;
    gap:8px;
    align-items:center
}
.modal-btn{
    padding:8px 16px;
    border:none;
    border-radius:8px;
    font-size:.85rem;
    font-weight:600;
    cursor:pointer;
    transition:transform .2s,box-shadow .2s
}
.modal-btn:hover{
    transform:translateY(-1px);
    box-shadow:0 4px 12px rgba(0,0,0,.2)
}
.btn-download,.btn-print,.btn-back{
    color:#0b2430;
    background:linear-gradient(90deg,#6fb6cc,#8ad1e6);
    border:0;
    font-weight:900;
    border-radius:12px;
    box-shadow:0 10px 26px rgba(138,209,230,.22),inset 0 1px 0 rgba(255,255,255,.18)
}
.btn-download:hover,.btn-print:hover,.btn-back:hover{
    filter:brightness(1.06)
}
.btn-close{
    background:rgba(239,68,68,.16);
    color:#fecaca;
    border:1px solid rgba(239,68,68,.35);
    font-size:1rem;
    width:28px;
    height:28px;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:0;
    border-radius:10px
}
.btn-close:hover{
    filter:brightness(1.1)
}
.modal-content{
    flex:1;
    overflow:hidden;
    padding:0;
    background:white;
    border-radius:0 0 16px 16px;
    display:flex;
    flex-direction:row;
    min-height:0
}
.reports-list-panel{
    width:280px;
    border-right:1px solid rgba(255,255,255,.08);
    display:flex;
    flex-direction:column;
    background:rgba(10,14,22,.60);
    color:#d7e5ff;
    overflow:hidden
}
.reports-list-panel.hidden{
    display:none
}
.reports-list-header{
    padding:16px;
    background:white;
    border-bottom:2px solid #e2e8f0;
    font-weight:600;
    color:#2d3748
}
.reports-list-content{
    flex:1;
    overflow-y:auto;
    padding:12px
}
.reports-list-content::-webkit-scrollbar{
    width:10px
}
.reports-list-content::-webkit-scrollbar-track{
    background:rgba(255,255,255,.04);
    border-radius:8px
}
.reports-list-content::-webkit-scrollbar-thumb{
    background:rgba(255,255,255,.18);
    border-radius:8px
}
.report-card{
    background:rgba(17,24,39,.62);
    border:1px solid rgba(255,255,255,.08);
    color:#e6f0ff;
    border-radius:12px;
    padding:8px 10px;
    margin-bottom:6px;
    cursor:pointer;
    box-shadow:0 6px 16px rgba(0,0,0,.25),inset 0 1px 0 rgba(255,255,255,.06);
    transition:all .2s
}
.report-card:hover{
    filter:brightness(1.08);
    border-color:rgba(138,209,230,.35);
    transform:translateX(4px)
}
.report-card.active{
    border-color:#3182ce;
    background:#ebf8ff
}
.report-card-ssl{
    font-weight:800;
    font-size:.95rem;
    color:#f1f7ff;
    letter-spacing:.2px;
    margin-bottom:4px
}
.report-card-date{
    font-size:.75rem;
    color:#9fb1c9;
    margin-bottom:4px
}
.report-card-id{
    font-size:.7rem;
    color:#4a5568;
    font-family:'Courier New',monospace;
    margin-top:2px
}
.report-card-status{
    display:inline-block;
    padding:2px 8px;
    border-radius:10px;
    font-size:.7rem;
    font-weight:600
}
.status-clear{
    background:#c6f6d5;
    color:#22543d
}
.status-defective{
    background:#fed7d7;
    color:#742a2a
}
.status-qualified{
    background:#feebc8;
    color:#7c2d12
}
.status-ready,.status-complete{
    color:#bff0ff;
    background:rgba(111,182,204,.16);
    border:1px solid rgba(111,182,204,.35);
    padding:2px 8px;
    border-radius:999px;
    font-size:12px;
    font-weight:700
}
.status-queued{
    color:#fde68a;
    background:rgba(250,204,21,.14);
    border:1px solid rgba(250,204,21,.28);
    padding:2px 8px;
    border-radius:999px;
    font-size:12px;
    font-weight:700
}
.reports-loading,.reports-empty{
    text-align:center;
    padding:40px 20px;
    color:#9fb1c9
}
.reports-empty h3{
    color:#2d3748;
    margin-bottom:12px
}
.report-viewer-panel{
    flex:1;
    display:flex;
    flex-direction:column;
    overflow:hidden;
    min-width:0;
    background:rgba(10,14,22,.78);
    border-left:1px solid rgba(255,255,255,.06)
}
.report-viewer-panel iframe{
    width:100%;
    height:100%;
    border:1px solid rgba(255,255,255,.06);
    flex:1;
    overflow:auto;
    background:#0e1421;
    border-radius:12px;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.05)
}
#reportFrame{
    display:block;
    width:100%;
    background:#0e1421;
    border:1px solid rgba(255,255,255,.06);
    border-radius:12px;
    min-height:72vh;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.05)
}
.status-banner{
    display:none;
    padding:10px 12px;
    border-radius:10px;
    font-size:.95rem;
    line-height:1.35
}
@media(max-width:900px){
    .wrapper{
        grid-template-columns:1fr;
        gap:20px;
        padding:20px 20px 30px
    }
    .wrapper::before{
        left:-30px;
        top:-30px;
        width:520px;
        height:520px;
        opacity:.56
    }
    .title{
        font-size:2.25rem
    }
    .features{
        grid-template-columns:1fr
    }
    body{
        padding-top:60px
    }
    .user-header{
        flex-direction:column;
        gap:8px;
        text-align:center
    }
    .reports-list-panel{
        width:100%;
        max-height:200px;
        border-right:none;
        border-bottom:2px solid #e2e8f0
    }
    .modal-content{
        flex-direction:column
    }
}
@media(prefers-reduced-motion:reduce){
    .wrapper::before{
        animation:none
    }
}
 .modal-content{
    flex:1;
    overflow:hidden;
    padding:0;
    background:radial-gradient(900px 500px at -10% -20%,rgba(18,26,40,.92),rgba(13,18,28,.92))!important;
    border-radius:0 0 16px 16px
}
.reports-list-header{
    background:linear-gradient(180deg,rgba(29,41,57,.96) 0%,rgba(18,26,40,.96) 100%)!important;
    color:#e9f2ff!important;
    border-bottom:1px solid rgba(255,255,255,.08)!important;
    position:sticky;
    top:0;
    z-index:2
}
.reports-list-panel{
    background:rgba(10,14,22,.80)!important;
    border-right:1px solid rgba(255,255,255,.08)!important;
    color:#d7e5ff!important
}
.report-card{
    background:rgba(255,255,255,.04)!important;
    border:1px solid rgba(255,255,255,.10)!important;
    color:#e6f0ff!important;
    box-shadow:0 6px 16px rgba(0,0,0,.28),inset 0 1px 0 rgba(255,255,255,.06)!important;
    transition:all .18s ease!important
}
.report-card:hover{
    transform:translateX(2px)!important;
    border-color:rgba(138,209,230,.45)!important;
    filter:brightness(1.06)!important
}
.report-card.active{
    background:rgba(111,182,204,.12)!important;
    border-color:rgba(111,182,204,.55)!important;
    box-shadow:0 0 0 2px rgba(111,182,204,.22) inset,0 8px 22px rgba(0,0,0,.35)!important;
    color:#eaf6ff!important
}
.report-card-ssl{
    color:#eef6ff!important
}
.report-card-date{
    color:#a9bed4!important
}
.report-card-id{
    color:#7b90a6!important
}
.reports-list-content::-webkit-scrollbar-track{
    background:rgba(255,255,255,.05)!important
}
.reports-list-content::-webkit-scrollbar-thumb{
    background:rgba(255,255,255,.20)!important
}
.report-viewer-panel{
    background:rgba(10,14,22,.88)!important;
    border-left:1px solid rgba(255,255,255,.06)!important
}
.report-viewer-panel iframe,#reportFrame{
    background:#0b1220!important;
    border:1px solid rgba(255,255,255,.06)!important;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.05)!important
}
.reports-loading,.reports-empty{
    color:#a9bed4!important
}
/* Toolbar (top navigation) */
.toolbar{
    position:fixed;
    top:0;
    left:0;
    right:0;
    height:56px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:0 20px;
    background:rgba(45,55,72,.95);
    border-bottom:1px solid rgba(255,255,255,.1);
    box-shadow:0 2px 10px rgba(0,0,0,.2);
    z-index:3000;
    backdrop-filter:blur(10px)
}
.toolbar .left{
    color:#e9f2ff;
    font-weight:600;
    font-size:.9rem
}
.toolbar .right{
    display:flex;
    gap:16px;
    align-items:center
}
.tb-btn{
    color:#63b3ed;
    text-decoration:none;
    transition:color .3s ease;
    font-weight:500;
    padding:6px 12px;
    border-radius:6px;
    background:rgba(99,179,237,.1);
    border:none;
    cursor:pointer;
    font-size:.9rem
}
.tb-btn:hover{
    color:#90cdf4;
    background:rgba(99,179,237,.2)
}

/* Modal containers need proper centering for About/Contact */
.modal-container.centered{
    top:50%;
    transform:translate(-50%,-50%);
    height:auto;
    max-width:720px
}
.btn-ghost{
    background:rgba(255,255,255,.06);
    border:1px solid rgba(255,255,255,.14);
    color:#d9e8ff;
    padding:11px 18px;
    border-radius:11px;
    font-weight:700;
    cursor:pointer;
    transition:all .18s
}
.btn-ghost:hover{
    background:rgba(255,255,255,.12);
    transform:translateY(-1px)
}
.btn-primary{
    background:linear-gradient(90deg,#6fb6cc,#8ad1e6);
    color:#061220;
    border:none;
    padding:11px 20px;
    border-radius:11px;
    font-weight:900;
    letter-spacing:.2px;
    box-shadow:0 12px 30px rgba(111,182,204,.35);
    cursor:pointer;
    transition:all .18s
}
.btn-primary:hover{
    transform:translateY(-1px);
    box-shadow:0 16px 38px rgba(111,182,204,.45)
}
/* Modal body - consistent typography */
.modal-body{
    padding:32px 36px;
    background:rgba(10,14,22,.90);
    border-radius:0 0 16px 16px;
    color:#d9e8ff;
    line-height:1.65
}
.modal-body p{
    margin:0 0 16px 0;
    font-size:1rem;
    color:#d9e8ff
}
.modal-body p:last-child{
    margin-bottom:0
}
.modal-body p:first-of-type{
    color:#a8bed6;
    font-size:.95rem
}
.modal-body strong{
    color:#eaf2ff;
    font-weight:700
}

/* Professional form styling */
.form-group{
    margin-bottom:20px
}
.form-label{
    display:block;
    margin-bottom:8px;
    font-size:.875rem;
    color:#94a3b8;
    font-weight:600;
    letter-spacing:.01em;
    text-transform:uppercase
}
.form-input{
    width:100%;
    background:rgba(15,23,42,.85);
    border:1px solid rgba(148,163,184,.25);
    color:#eaf2ff;
    border-radius:10px;
    padding:12px 14px;
    font:inherit;
    font-size:.95rem;
    transition:all .2s ease
}
.form-input:focus{
    border-color:#6fb6cc;
    box-shadow:0 0 0 3px rgba(111,182,204,.15);
    background:rgba(15,23,42,.95);
    outline:none
}
.form-input::placeholder{
    color:#64748b;
    opacity:1
}
.form-textarea{
    min-height:140px;
    resize:vertical;
    font-family:inherit;
    line-height:1.5
}
.form-hint{
    display:block;
    margin-top:8px;
    font-size:.8rem;
    color:#64748b;
    line-height:1.4
}
.form-hint a,.form-hint label{
    color:#6fb6cc;
    cursor:pointer;
    text-decoration:none;
    transition:color .2s
}
.form-hint a:hover,.form-hint label:hover{
    color:#8ad1e6
}
.form-actions{
    display:flex;
    gap:12px;
    justify-content:flex-end;
    margin-top:28px;
    padding-top:20px;
    border-top:1px solid rgba(148,163,184,.15)
}

/* Attachment list styling */
#ctAttList{
    display:flex;
    flex-wrap:wrap;
    gap:8px;
    margin:16px 0 0 0;
    min-height:0
}
.attachment-pill{
    display:inline-flex;
    align-items:center;
    gap:8px;
    padding:6px 12px;
    border-radius:999px;
    background:rgba(111,182,204,.12);
    border:1px solid rgba(111,182,204,.25);
    font-size:.8rem;
    color:#d9e8ff;
    transition:all .2s
}
.attachment-pill:hover{
    background:rgba(111,182,204,.18);
    border-color:rgba(111,182,204,.35)
}
.attachment-rm{
    cursor:pointer;
    opacity:.8;
    font-weight:700;
    color:#ef4444;
    transition:opacity .2s
}
.attachment-rm:hover{
    opacity:1
}

/* Button refinements */
.btn-ghost{
    background:rgba(148,163,184,.08);
    border:1px solid rgba(148,163,184,.25);
    color:#cbd5e1;
    padding:11px 20px;
    border-radius:10px;
    font-weight:600;
    font-size:.9rem;
    cursor:pointer;
    transition:all .2s ease
}
.btn-ghost:hover{
    background:rgba(148,163,184,.15);
    border-color:rgba(148,163,184,.35);
    transform:translateY(-1px)
}
.btn-primary{
    background:linear-gradient(90deg,#6fb6cc,#8ad1e6);
    color:#0b1220;
    border:none;
    padding:11px 24px;
    border-radius:10px;
    font-weight:800;
    font-size:.9rem;
    letter-spacing:.3px;
    box-shadow:0 10px 25px rgba(111,182,204,.3);
    cursor:pointer;
    transition:all .2s ease
}
.btn-primary:hover{
    transform:translateY(-1px);
    box-shadow:0 14px 32px rgba(111,182,204,.4)
}
/* ========================================
   SSL VALIDATION STYLES
   Append this to your app.css file
   ======================================== */

/* Input wrapper positioning */
.input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
}

/* Make room for validation icon */
.search-input {
  flex: 1;
  padding-right: 45px;
}

/* Validation icon base styles */
.validation-icon {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 18px;
  opacity: 0;
  transition: opacity 0.2s ease;
  pointer-events: none;
  z-index: 10;
  user-select: none;
}

/* Validating state (spinning hourglass) */
.validation-icon.validating {
  opacity: 1;
  animation: pulse 1.5s ease-in-out infinite;
}

/* Valid state (green checkmark) */
.validation-icon.valid {
  opacity: 1;
  color: #10b981;
  font-weight: bold;
}

/* Invalid state (red X) */
.validation-icon.invalid {
  opacity: 1;
  color: #ef4444;
  font-weight: bold;
}

/* Pulse animation for validating state */
@keyframes pulse {
  0%, 100% { 
    opacity: 1; 
    transform: translateY(-50%) scale(1); 
  }
  50% { 
    opacity: 0.5; 
    transform: translateY(-50%) scale(1.1); 
  }
}

/* Error state for input field */
.search-input.error {
  border-color: #ef4444 !important;
  box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.1) !important;
  animation: shake 0.4s ease;
}

/* Shake animation for errors */
@keyframes shake {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-8px); }
  75% { transform: translateX(8px); }
}

/* Tooltip for validation icon */
.validation-icon[title]:hover::before {
  content: attr(title);
  position: absolute;
  bottom: calc(100% + 8px);
  right: 0;
  background: rgba(10, 14, 22, 0.95);
  color: #eaf2ff;
  padding: 8px 12px;
  border-radius: 6px;
  font-size: 12px;
  white-space: nowrap;
  z-index: 1000;
  pointer-events: none;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
  backdrop-filter: blur(8px);
}

/* Tooltip arrow */
.validation-icon[title]:hover::after {
  content: '';
  position: absolute;
  bottom: calc(100% + 2px);
  right: 12px;
  border: 6px solid transparent;
  border-top-color: rgba(10, 14, 22, 0.95);
  z-index: 1000;
  pointer-events: none;
}

/* Mobile responsiveness */
@media (max-width: 640px) {
  .validation-icon {
    font-size: 16px;
    right: 10px;
  }
  
  .search-input {
    padding-right: 40px;
  }
}
/* ========================================
   SEARCH BUTTON STATE STYLES
   Add to your app.css for smooth transitions
   ======================================== */

.search-button {
  position: relative;
  transition: all 0.3s ease;
}

/* Validating state */
.search-button:disabled {
  cursor: not-allowed;
  opacity: 0.7;
}

/* Success state - briefly show checkmark */
.search-button.success {
  background: #10b981 !important;
  border-color: #10b981 !important;
}

/* Error state */
.search-button.error {
  background: #ef4444 !important;
  border-color: #ef4444 !important;
}

/* Loading spinner for button (optional) */
.search-button.validating::after {
  content: '';
  position: absolute;
  width: 16px;
  height: 16px;
  margin-left: 8px;
  border: 2px solid #ffffff;
  border-radius: 50%;
  border-top-color: transparent;
  animation: spin 0.6s linear infinite;
}

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

/* Smooth text transitions */
.search-button {
  min-width: 200px; /* Prevent width jumping during text changes */
  text-align: center;
}
/* UAT Modal - Ultra Compact */
#uatAccessModal .modal-container {
    max-width: 650px;
}

#uatAccessModal input,
#uatAccessModal select,
#uatAccessModal textarea {
    font-size: 12px;
    padding: 6px 10px;
    border: 1px solid #cbd5e1;
    border-radius: 6px;
    background: #fff;
    color: #1e293b;
}

#uatAccessModal textarea {
    resize: none;
    min-height: 48px;
    max-height: 48px;
}

/* Stack on narrow screens */
@media (max-width: 768px) {
    #uatAccessModal .modal-body > div:first-of-type {
        grid-template-columns: 1fr !important;
    }
}

/* ========================================
   PILOT MODAL STYLES
   Add this to the end of app.css
   ======================================== */

/* Pilot Modal Overlay */
.pilot-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(3, 8, 15, 0.72);
    backdrop-filter: blur(6px);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    padding: 20px;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.pilot-modal-overlay.show {
    display: flex;
    opacity: 1;
}

/* Pilot Modal Container */
.pilot-modal {
    background: rgba(10, 14, 22, 0.98);
    border-radius: 16px;
    max-width: 900px; /* ✅ Increased from ~800px to 900px (12% wider) */
    width: 92%;
    max-height: 90vh;
    overflow: hidden;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
    border: 1px solid rgba(255, 255, 255, 0.1);
    animation: modalSlideIn 0.3s ease-out;
    display: flex;
    flex-direction: column;
}

.pilot-modal-overlay.show .pilot-modal {
    transform: scale(1);
}

/* Scrollbar Styling */
.pilot-modal::-webkit-scrollbar {
    width: 10px;
}

.pilot-modal::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.04);
    border-radius: 8px;
}

.pilot-modal::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.18);
    border-radius: 8px;
}

/* Modal Header */
.pilot-modal-header {
    background: linear-gradient(180deg, rgba(29, 41, 57, 0.96) 0%, rgba(18, 26, 40, 0.96) 100%);
    color: white;
    padding: 24px 30px;
    border-radius: 16px 16px 0 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

.pilot-modal-header h2 {
    font-size: 1.75rem;
    font-weight: 800;
    margin: 0 0 8px 0;
    color: #e9f2ff;
    letter-spacing: -0.01em;
}

.pilot-modal-header p {
    font-size: 0.95rem;
    opacity: 0.85;
    margin: 0;
    color: #d9e8ff;
}

/* Modal Body */
.pilot-modal-body {
    padding: 30px;
    background: rgba(10, 14, 22, 0.90);
    color: #d9e8ff;
}

/* Info Box */
.pilot-info-box {
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.10);
    border-radius: 12px;
    padding: 18px 20px;
    margin-bottom: 25px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.05);
    text-align: center;
}

.pilot-info-box strong {
    display: block;
    font-size: 1.35rem;
    font-weight: 700;
    margin-bottom: 6px;
    color: #eaf2ff;
}

.pilot-info-box p {
    font-size: 0.875rem;
    opacity: 0.85;
    margin: 0;
    color: #a8bed6;
}

/* Section Styling */
.pilot-section {
    margin-bottom: 24px;
}

.pilot-section h3 {
    font-size: 1.1rem;
    font-weight: 700;
    margin-bottom: 12px;
    color: #eaf2ff;
}

.pilot-section p {
    font-size: 0.95rem;
    line-height: 1.65;
    opacity: 0.9;
    margin-bottom: 12px;
    color: #d9e8ff;
}

.pilot-section ul {
    list-style: none;
    padding-left: 0;
    margin: 0;
}

.pilot-section ul li {
    padding-left: 24px;
    position: relative;
    margin-bottom: 10px;
    font-size: 0.95rem;
    line-height: 1.6;
    color: #d9e8ff;
    opacity: 0.9;
}

.pilot-section ul li:before {
    content: "✓";
    position: absolute;
    left: 0;
    color: #8ad1e6;
    font-weight: bold;
}

.pilot-section ul li strong {
    color: #eaf2ff;
    font-weight: 700;
}

/* Full Agreement Text View */
.agreement-full-text {
    padding: 40px 50px;
    background: rgba(10, 14, 22, 0.90);
    color: #d9e8ff;
    font-size: 0.9rem;
    line-height: 1.8;
    max-height: calc(90vh - 180px);
    overflow-y: auto;
}

.agreement-full-text::-webkit-scrollbar {
    width: 10px;
}

.agreement-full-text::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.04);
    border-radius: 8px;
}

.agreement-full-text::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.18);
    border-radius: 8px;
}

/* Preamble */
.agreement-preamble {
    margin-bottom: 32px;
    padding-bottom: 24px;
    border-bottom: 2px solid rgba(255, 255, 255, 0.12);
}

.agreement-preamble p {
    margin-bottom: 16px;
    color: #c7d2fe;
    font-size: 0.95rem;
}

/* Agreement Sections */
.agreement-section {
    margin-bottom: 32px;
    padding: 24px;
    background: rgba(255, 255, 255, 0.02);
    border-left: 3px solid rgba(138, 209, 230, 0.3);
    border-radius: 8px;
}

.agreement-section h4 {
    font-size: 1.15rem;
    margin: 0 0 16px 0;
    color: #eaf2ff;
    font-weight: 700;
    letter-spacing: 0.02em;
}

.agreement-section > p {
    margin-bottom: 14px;
    color: #d9e8ff;
}

.agreement-section > p:last-child {
    margin-bottom: 0;
}

/* Subsections */
.agreement-subsection {
    margin-top: 12px;
}

.agreement-subsection p {
    margin-bottom: 12px;
    padding-left: 20px;
    color: #d9e8ff;
}

.agreement-subsection p strong {
    color: #a5b4fc;
    font-weight: 600;
}

/* Lists */
.agreement-list {
    list-style: none;
    padding-left: 40px;
    margin: 12px 0;
}

.agreement-list li {
    position: relative;
    padding-left: 20px;
    margin-bottom: 8px;
    color: #d9e8ff;
    line-height: 1.6;
}

.agreement-list li:before {
    content: "•";
    position: absolute;
    left: 0;
    color: #8ad1e6;
    font-weight: bold;
}

/* Critical Sections (Disclaimers, Liability) */
.agreement-critical {
    border-left-color: rgba(251, 191, 36, 0.5);
    background: rgba(251, 191, 36, 0.03);
}

.agreement-critical h4 {
    color: #fcd34d;
}

/* Caps text for legal emphasis */
.agreement-caps {
    font-weight: 700;
    color: #fcd34d;
    font-size: 0.95rem;
    margin-bottom: 14px;
    letter-spacing: 0.03em;
}

/* Responsive */
@media (max-width: 640px) {
    .agreement-full-text {
        padding: 24px 20px;
        font-size: 0.85rem;
    }
    
    .agreement-section {
        padding: 16px;
    }
    
    .agreement-section h4 {
        font-size: 1.05rem;
    }
}

.agreement-text::-webkit-scrollbar {
    width: 8px;
}

.agreement-text::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.05);
    border-radius: 4px;
}

.agreement-text::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.20);
    border-radius: 4px;
}

.agreement-text h4 {
    font-size: 0.95rem;
    margin: 15px 0 8px 0;
    color: #a5b4fc;
    font-weight: 600;
}

.agreement-text h4:first-child {
    margin-top: 0;
}

.agreement-text p {
    margin-bottom: 14px;
    opacity: 0.85;
    color: #d9e8ff;
    font-size: 0.875rem;
}

.agreement-text p:last-child {
    margin-bottom: 0;
}

.agreement-text strong {
    color: #eaf2ff;
    font-weight: 700;
}

.agreement-text a {
    color: #8ad1e6;
    text-decoration: none;
    transition: color 0.2s;
    font-weight: 500;
}

.agreement-text a:hover {
    color: #6fb6cc;
}

/* Checkbox Container */
.checkbox-container {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 24px;
    padding: 16px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.10);
    border-radius: 10px;
}

.checkbox-container input[type="checkbox"] {
    margin-top: 3px;
    width: 18px;
    height: 18px;
    cursor: pointer;
    flex-shrink: 0;
}

.checkbox-container label {
    font-size: 0.875rem;
    line-height: 1.6;
    cursor: pointer;
    opacity: 0.9;
    color: #d9e8ff;
}

/* Modal Buttons */
.pilot-modal .modal-buttons {
    display: flex;
    gap: 12px;
    margin-top: 28px;
}

.pilot-modal .modal-buttons button {
    flex: 1;
    padding: 12px 20px;
    border: none;
    border-radius: 11px;
    font-size: 0.9rem;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.18s ease;
}

/* Payment Success Section */
.payment-success {
    text-align: center;
    padding: 40px 30px;
}

.success-icon {
    width: 80px;
    height: 80px;
    margin: 0 auto 20px;
    background: linear-gradient(90deg, #6fb6cc, #8ad1e6);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 40px;
    color: #061220;
    font-weight: 900;
    box-shadow: 0 12px 30px rgba(111, 182, 204, 0.35);
    animation: successPop 0.5s ease-out;
}

@keyframes successPop {
    0% { transform: scale(0); }
    50% { transform: scale(1.1); }
    100% { transform: scale(1); }
}

.payment-success h2 {
    font-size: 1.75rem;
    margin-bottom: 12px;
    color: #eaf2ff;
    font-weight: 800;
}

.payment-success > p {
    font-size: 0.95rem;
    opacity: 0.85;
    line-height: 1.6;
    margin-bottom: 15px;
    color: #d9e8ff;
}

.next-steps {
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.10);
    border-radius: 10px;
    padding: 20px;
    margin: 25px 0;
    text-align: left;
}

.next-steps h3 {
    font-size: 1.05rem;
    margin-bottom: 15px;
    color: #eaf2ff;
    font-weight: 700;
}

.next-steps ol {
    padding-left: 20px;
    margin: 0;
}

.next-steps li {
    font-size: 0.875rem;
    line-height: 1.6;
    margin-bottom: 10px;
    opacity: 0.9;
    color: #d9e8ff;
}

.btn-dashboard {
    display: inline-block;
    padding: 12px 28px;
    background: linear-gradient(90deg, #6fb6cc, #8ad1e6);
    color: #061220;
    border-radius: 11px;
    font-size: 0.95rem;
    font-weight: 900;
    letter-spacing: 0.2px;
    text-decoration: none;
    margin-top: 20px;
    transition: all 0.18s ease;
    box-shadow: 0 12px 30px rgba(111, 182, 204, 0.35);
}

.btn-dashboard:hover {
    transform: translateY(-1px);
    box-shadow: 0 16px 38px rgba(111, 182, 204, 0.45);
}

/* Hide step initially */
.pilot-step {
    display: none;
}

.pilot-step.active {
    display: block;
}


.sample-reports-inline {
    margin-top: 8px;
    font-size: 0.85rem;
    color: #eaf2ff;
}

.sample-reports-inline a {
    color: #eaf2ff;
    text-decoration: none;
    font-weight: 500;
    transition: opacity 0.2s;
}

.sample-reports-inline a:hover {
    opacity: 0.8;
    text-decoration: underline;
}

/* ============================================
   PILOT MODAL - TIGHTER SPACING
   ============================================ */

.pilot-step {
    display: flex;
    flex-direction: column;
    height: 75vh;
    max-height: 75vh;
    overflow: hidden;
}

/* Fixed Header - More Compact */
.pilot-modal-header-fixed {
    flex-shrink: 0;
    background: linear-gradient(135deg, rgba(15, 23, 42, 0.95), rgba(30, 41, 59, 0.95));
    padding: 18px 28px 16px 28px; /* ✅ Reduced from 24px/20px */
    border-bottom: 1px solid rgba(59, 130, 246, 0.2);
}

.pilot-modal-header-fixed h2 {
    margin: 0 0 4px 0; /* ✅ Reduced from 6px */
    font-size: 1.5rem; /* ✅ Slightly smaller */
    color: #eaf2ff;
    font-weight: 700;
    line-height: 1.2;
}

.pilot-modal-header-fixed p {
    margin: 0;
    color: #94a3b8;
    font-size: 0.9rem;
    line-height: 1.3;
}

/* Scrollable Body - Tighter Spacing */
.pilot-modal-body-scroll {
    flex: 1;
    overflow-y: auto;
    padding: 20px 28px; /* ✅ Reduced from 24px */
    
    /* Custom Scrollbar */
    scrollbar-width: thin;
    scrollbar-color: rgba(138, 209, 230, 0.3) rgba(15, 23, 42, 0.3);
}

/* Tighter spacing for all content inside scroll area */
.pilot-modal-body-scroll > div {
    margin-bottom: 20px; /* ✅ Reduced from 28px */
}

.pilot-modal-body-scroll > div:last-child {
    margin-bottom: 0; /* ✅ No margin on last element */
}

/* Investment Box - More Compact */
.pilot-modal-body-scroll > div:first-child {
    padding: 16px 20px; /* ✅ Reduced from 20px 24px */
    margin-bottom: 20px; /* ✅ Reduced from 24px */
}

.pilot-modal-body-scroll h3 {
    margin: 0 0 8px 0; /* ✅ Reduced bottom margin */
    font-size: 1.05rem; /* ✅ Slightly smaller */
    line-height: 1.3;
}

.pilot-modal-body-scroll p {
    margin: 0 0 12px 0; /* ✅ Reduced from default */
    line-height: 1.5;
}

.pilot-modal-body-scroll p:last-child {
    margin-bottom: 0;
}

/* List items - Tighter */
.pilot-modal-body-scroll ul {
    margin: 8px 0; /* ✅ Reduced from default */
    padding: 0;
}

.pilot-modal-body-scroll li {
    margin-bottom: 10px; /* ✅ Reduced from 12px */
    line-height: 1.5;
}

.pilot-modal-body-scroll li:last-child {
    margin-bottom: 0;
}

/* Agreement box - More compact */
.pilot-modal-body-scroll > div:nth-last-child(2) {
    padding: 14px 18px; /* ✅ Reduced from 18px 20px */
    margin-bottom: 16px; /* ✅ Reduced from 24px */
}

/* Checkbox - Tighter */
.pilot-modal-body-scroll label {
    margin-bottom: 0 !important; /* ✅ Remove bottom margin */
    gap: 10px; /* ✅ Reduced from 12px */
}

/* Webkit Scrollbar */
.pilot-modal-body-scroll::-webkit-scrollbar {
    width: 10px;
}

.pilot-modal-body-scroll::-webkit-scrollbar-track {
    background: rgba(15, 23, 42, 0.4);
    border-radius: 10px;
    margin: 8px 0;
}

.pilot-modal-body-scroll::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, 
        rgba(138, 209, 230, 0.4) 0%, 
        rgba(96, 165, 250, 0.4) 100%);
    border-radius: 10px;
    border: 2px solid rgba(10, 14, 22, 0.3);
    backdrop-filter: blur(8px);
    transition: all 0.3s ease;
}

.pilot-modal-body-scroll::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(180deg, 
        rgba(138, 209, 230, 0.6) 0%, 
        rgba(96, 165, 250, 0.6) 100%);
}

/* Smooth scroll */
.pilot-modal-body-scroll {
    scroll-behavior: smooth;
}

/* Fixed Footer - More compact */
.modal-buttons {
    flex-shrink: 0;
    padding: 16px 28px; /* ✅ Reduced from 20px */
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    background: rgba(10, 14, 22, 0.95);
}
/* ============================================
   PILOT MODAL - FIXED HEADER & SCROLLABLE BODY
   OVERRIDE EXISTING STYLES
   ============================================ */

/* Force pilot-step to use flexbox layout */
.pilot-step {
    display: flex !important;
    flex-direction: column !important;
    height: 75vh !important;
    max-height: 75vh !important;
    overflow: hidden !important;
}

/* Fixed Header (doesn't scroll) */
.pilot-modal-header-fixed {
    flex-shrink: 0 !important;
    flex-grow: 0 !important;
    background: linear-gradient(135deg, rgba(15, 23, 42, 0.95), rgba(30, 41, 59, 0.95)) !important;
    padding: 18px 28px 16px 28px !important;
    border-bottom: 1px solid rgba(59, 130, 246, 0.2) !important;
}

.pilot-modal-header-fixed h2 {
    margin: 0 0 4px 0 !important;
    font-size: 1.5rem !important;
    color: #eaf2ff !important;
    font-weight: 700 !important;
    line-height: 1.2 !important;
}

.pilot-modal-header-fixed p {
    margin: 0 !important;
    color: #94a3b8 !important;
    font-size: 0.9rem !important;
    line-height: 1.3 !important;
}

/* Scrollable Body Container - FORCE SCROLL */
.pilot-modal-body-scroll {
    flex: 1 1 auto !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    padding: 20px 28px !important;
    min-height: 0 !important; /* Critical for flex scrolling */
    
    /* Glassmorphism Scrollbar */
    scrollbar-width: thin !important;
    scrollbar-color: rgba(138, 209, 230, 0.3) rgba(15, 23, 42, 0.3) !important;
}

/* Webkit Scrollbar Styling */
.pilot-modal-body-scroll::-webkit-scrollbar {
    width: 10px !important;
}

.pilot-modal-body-scroll::-webkit-scrollbar-track {
    background: rgba(15, 23, 42, 0.4) !important;
    border-radius: 10px !important;
    margin: 8px 0 !important;
}

.pilot-modal-body-scroll::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, 
        rgba(138, 209, 230, 0.4) 0%, 
        rgba(96, 165, 250, 0.4) 100%) !important;
    border-radius: 10px !important;
    border: 2px solid rgba(10, 14, 22, 0.3) !important;
    backdrop-filter: blur(8px) !important;
    transition: all 0.3s ease !important;
}

.pilot-modal-body-scroll::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(180deg, 
        rgba(138, 209, 230, 0.6) 0%, 
        rgba(96, 165, 250, 0.6) 100%) !important;
    border-color: rgba(138, 209, 230, 0.2) !important;
}

.pilot-modal-body-scroll::-webkit-scrollbar-thumb:active {
    background: linear-gradient(180deg, 
        rgba(138, 209, 230, 0.8) 0%, 
        rgba(96, 165, 250, 0.8) 100%) !important;
}

/* Smooth scroll */
.pilot-modal-body-scroll {
    scroll-behavior: smooth !important;
}

/* Fixed Footer with Buttons */
.pilot-step .modal-buttons {
    flex-shrink: 0 !important;
    flex-grow: 0 !important;
    padding: 16px 28px !important;
    border-top: 1px solid rgba(255, 255, 255, 0.1) !important;
    background: rgba(10, 14, 22, 0.95) !important;
    display: flex !important;
    gap: 12px !important;
    justify-content: flex-end !important;
}

.pilot-step:not(.active) { display: none !important; }

/* ============================================
   PILOT MODAL BUTTON STYLES
   Add these at the very end of app.css
   ============================================ */

.btn-secondary {
    background: rgba(148, 163, 184, 0.08) !important;
    border: 1px solid rgba(148, 163, 184, 0.25) !important;
    color: #cbd5e1 !important;
    padding: 12px 20px !important;
    border-radius: 10px !important;
    font-weight: 600 !important;
    font-size: 0.9rem !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
}

.btn-secondary:hover {
    background: rgba(148, 163, 184, 0.15) !important;
    border-color: rgba(148, 163, 184, 0.35) !important;
    transform: translateY(-1px) !important;
}

.btn-continue {
    background: linear-gradient(90deg, #6fb6cc, #8ad1e6) !important;
    color: #0b1220 !important;
    border: none !important;
    padding: 12px 24px !important;
    border-radius: 10px !important;
    font-weight: 800 !important;
    font-size: 0.9rem !important;
    letter-spacing: 0.3px !important;
    box-shadow: 0 10px 25px rgba(111, 182, 204, 0.3) !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
}

.btn-continue:hover:not(:disabled) {
    transform: translateY(-1px) !important;
    box-shadow: 0 14px 32px rgba(111, 182, 204, 0.4) !important;
}

.btn-continue:disabled {
    opacity: 0.5 !important;
    cursor: not-allowed !important;
    transform: none !important;
}

/* Hero brochure link: subtle motion, no idle animation */
.sample-link-hero{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  position: relative;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.10);
  background: rgba(255,255,255,0.04);
  backdrop-filter: blur(8px);
  transition: background 180ms ease, border-color 180ms ease, transform 180ms ease;
}

.sample-link-hero:hover{
  background: rgba(255,255,255,0.06);
  border-color: rgba(138, 209, 230, 0.22);
  transform: translateY(-1px);
  box-shadow: 0 10px 24px rgba(0,0,0,0.25);
}

/* Arrow nudge on hover */
.sample-link-hero .hero-arrow{
  display: inline-block;
  transition: transform 180ms ease, opacity 180ms ease;
  opacity: 0.9;
}

.sample-link-hero:hover .hero-arrow{
  transform: translateX(4px);
  opacity: 1;
}

/* Subtle glow sweep on hover (very light) */
.sample-link-hero::after{
  content:"";
  position:absolute;
  inset:-1px;
  border-radius: 999px;
  pointer-events:none;
  opacity: 0;
  transition: opacity 180ms ease;
  box-shadow: 0 0 18px rgba(138, 209, 230, 0.18);
}

.sample-link-hero:hover::after{
  opacity: 1;
}

/* Respect reduced-motion */


/* ═══════════════════════════════════════════════════════════════════════════
   LAYOUT OVERRIDES — migrated from index.html inline <style>
   These rules enforce viewport-fit layout, responsive scaling, and
   component density for the main app shell.
   ═══════════════════════════════════════════════════════════════════════════ */

/* Root layout: full viewport, no scroll */
html {
  height: 100%;
  overflow: hidden;
}
body {
  height: 100vh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* Wrapper: fills remaining space between nav and footer */
.wrapper {
  flex: 1 1 0;
  min-height: 0;
  overflow: visible !important;
  box-sizing: border-box;
  margin: clamp(8px, 1.5vh, 20px) auto !important;
  padding: clamp(14px, 2vh, 22px) clamp(18px, 2.5vw, 34px) clamp(18px, 2.5vh, 34px) !important;
  gap: clamp(20px, 2.5vw, 28px) !important;
}

/* Left column: hero panel */
.header, .header--ctai {
  overflow: visible !important;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  box-sizing: border-box;
}

/* Logo title: responsive scale */
.title {
  font-size: clamp(2rem, 3.2vw, 3.2rem) !important;
  margin-bottom: clamp(4px, 0.8vh, 10px) !important;
}
.subtitle {
  margin-bottom: clamp(8px, 1.2vh, 16px) !important;
}

/* Price stamp: tighten bottom margin */
.price-stamp {
  margin-bottom: clamp(10px, 1.5vh, 18px) !important;
}

/* Feature tiles: responsive text and padding */
.features {
  gap: clamp(6px, 0.9vh, 12px) clamp(8px, 1vw, 14px) !important;
  margin-top: clamp(18px, 2.5vh, 28px) !important;
}
.feature {
  padding: clamp(8px, 1vh, 14px) clamp(10px, 1.2vw, 16px) !important;
}
.feature h3, .feature .feature-title {
  font-size: clamp(0.88rem, 1.05vw, 1rem) !important;
  margin-bottom: 3px !important;
}
.feature p {
  font-size: clamp(0.84rem, 0.95vw, 0.95rem) !important;
  line-height: 1.35 !important;
}

/* Right column: search panel */
.search-box {
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  gap: clamp(6px, 1vh, 12px) !important;
  padding-top: clamp(12px, 2vh, 28px) !important;
  padding-right: clamp(16px, 2.5vw, 40px) !important;
  padding-bottom: clamp(12px, 2vh, 28px) !important;
  padding-left: clamp(24px, 3vw, 48px) !important;
  box-sizing: border-box;
  overflow: hidden;
  min-width: 0;
  max-width: 500px;
}

/* Disclaimer banner: compact 2-line height */
.disclaimer-banner {
  font-size: clamp(0.82rem, 0.92vw, 0.9rem) !important;
  padding: clamp(8px, 1vh, 12px) clamp(12px, 1.5vw, 16px) !important;
  margin-bottom: 0 !important;
  line-height: 1.5 !important;
}
.disclaimer-banner br { display: none !important; }
.disclaimer-banner strong {
  display: block;
  margin-bottom: 3px;
  font-size: clamp(0.84rem, 0.95vw, 0.95rem) !important;
}

/* Format hint and trust row: gap handles spacing, no extra margin */
.format-hint {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}
.trust-row {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

/* Progress container: no extra top margin */
#progressContainer {
  margin-top: 0 !important;
}

/* SSL input + button: fully contained */
.search-input, .search-button, .input-wrapper {
  max-width: 100% !important;
  width: 100% !important;
  box-sizing: border-box !important;
}
/* Smaller font so longer placeholder text doesn't truncate */
.search-input {
  font-size: clamp(0.76rem, 0.88vw, 0.86rem) !important;
}

/* CTA button: single row, responsive font */
.search-button {
  white-space: nowrap !important;
  font-size: clamp(0.82rem, 1.1vw, 1rem) !important;
  padding-left: 12px !important;
  padding-right: 12px !important;
}

/* Prevent focus ring from extending beyond column */
.search-input:focus {
  outline-offset: 0 !important;
}

/* Suppress naked <br> tags in wrapper */
.wrapper br { display: none; }

/* Footer: pinned at bottom */
footer {
  flex-shrink: 0 !important;
  display: block !important;
  padding: clamp(10px, 1.4vh, 18px) 20px !important;
  font-size: clamp(0.68rem, 0.85vw, 0.82rem) !important;
  margin: 0 !important;
  border-top: 1px solid #1e293b;
  text-align: center;
  color: #64748b;
  min-height: 36px;
  line-height: 1.5;
}

/* Modals: internal scroll only */
.modal-body,
.pilot-modal-body-scroll {
  overflow-y: auto;
}

/* Confirm quota modal state classes */
.confirm-quota-msg     { transition: all 0.2s; }
.confirm-quota-normal  { background: rgba(59,130,246,0.08);  color: #60a5fa; }
.confirm-quota-warning { background: rgba(245,158,11,0.10);  color: #f59e0b; }
.confirm-quota-critical{ background: rgba(239,68,68,0.10);   color: #f87171; }

/* Shimmer skeleton animation (confirmation modal loading state) */
@keyframes ct-shimmer {
  0%   { transform: translateX(-100%); }
  100% { transform: translateX(200%); }
}
.ct-shimmer {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.06), transparent);
  animation: ct-shimmer 1.4s infinite;
}

@media (prefers-reduced-motion: reduce){
  .sample-link-hero, .sample-link-hero .hero-arrow{ transition: none; }
  .sample-link-hero:hover{ transform: none; }
}