:root{
    --bg:#07111f;
    --bg2:#0b1728;
    --panel:#0e1c2e;
    --panel2:#122238;
    --border:#213750;
    --text:#eaf4ff;
    --muted:#8196ad;
    --cyan:#35d7e5;
    --cyan2:#55f0cf;
    --yellow:#f2c94c;
    --danger:#ff7185;
    --success:#57d99b;
}

*{
    box-sizing:border-box;
}

html{
    color-scheme:dark;
}

body{
    margin:0;
    min-height:100vh;
    font-family:
        Inter,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        Roboto,
        Arial,
        sans-serif;
    background:
        radial-gradient(
            circle at 85% 10%,
            rgba(53,215,229,.10),
            transparent 30%
        ),
        linear-gradient(
            145deg,
            var(--bg),
            #091523 52%,
            #07101d
        );
    color:var(--text);
}

a{
    color:var(--cyan);
    text-decoration:none;
}

a:hover{
    color:#8cf5ff;
}

.auth-shell{
    min-height:100vh;
    display:grid;
    grid-template-columns:
        minmax(360px,520px)
        minmax(420px,1fr);
}

.auth-left{
    padding:44px 50px;
    display:flex;
    flex-direction:column;
    justify-content:center;
    border-right:1px solid rgba(255,255,255,.06);
}

.auth-right{
    position:relative;
    overflow:hidden;
    padding:60px;
    display:flex;
    align-items:center;
    justify-content:center;
}

.brand{
    display:flex;
    align-items:center;
    gap:12px;
    font-size:24px;
    font-weight:800;
    letter-spacing:.3px;
    margin-bottom:55px;
}

.brand-mark{
    width:38px;
    height:38px;
    border:1px solid rgba(53,215,229,.55);
    border-radius:11px;
    display:grid;
    place-items:center;
    color:var(--cyan);
    box-shadow:
        0 0 28px rgba(53,215,229,.12),
        inset 0 0 18px rgba(53,215,229,.06);
}

.eyebrow{
    color:var(--cyan);
    font-size:12px;
    font-weight:750;
    text-transform:uppercase;
    letter-spacing:2px;
    margin-bottom:10px;
}

h1{
    font-size:clamp(36px,5vw,54px);
    line-height:1.02;
    letter-spacing:-2px;
    margin:0 0 14px;
}

.subtitle{
    color:var(--muted);
    font-size:16px;
    line-height:1.6;
    margin-bottom:32px;
}

label{
    display:block;
    color:#b7c6d8;
    font-size:13px;
    font-weight:700;
    margin:18px 0 8px;
}

input,
select{
    width:100%;
    padding:14px 15px;
    border:1px solid var(--border);
    border-radius:10px;
    background:#0a1626;
    color:var(--text);
    font:inherit;
    outline:none;
    transition:.18s ease;
}

input:focus,
select:focus{
    border-color:var(--cyan);
    box-shadow:0 0 0 3px rgba(53,215,229,.08);
}

button,
.button{
    width:100%;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    border:0;
    border-radius:10px;
    padding:14px 18px;
    margin-top:24px;
    background:
        linear-gradient(
            135deg,
            #1cbccf,
            #40dfce
        );
    color:#04121d;
    font:inherit;
    font-weight:800;
    cursor:pointer;
    box-shadow:0 10px 30px rgba(53,215,229,.13);
}

button:hover,
.button:hover{
    filter:brightness(1.06);
    color:#04121d;
}

.links{
    margin-top:22px;
    text-align:center;
    color:var(--muted);
    font-size:13px;
    line-height:1.8;
}

.notice{
    padding:13px 14px;
    border-radius:10px;
    margin-bottom:20px;
    font-size:13px;
    line-height:1.5;
}

.notice.error{
    background:rgba(255,113,133,.10);
    border:1px solid rgba(255,113,133,.25);
    color:#ff9aaa;
}

.notice.success{
    background:rgba(87,217,155,.10);
    border:1px solid rgba(87,217,155,.25);
    color:#8ceab9;
}

.hint{
    margin-top:7px;
    color:#637b94;
    font-size:12px;
    line-height:1.5;
}

.hp{
    position:absolute;
    left:-10000px;
    width:1px;
    height:1px;
    overflow:hidden;
}

.route-art{
    width:min(780px,95%);
    min-height:560px;
    position:relative;
    border:1px solid rgba(53,215,229,.12);
    border-radius:28px;
    background:
        linear-gradient(
            180deg,
            rgba(14,28,46,.87),
            rgba(7,17,31,.70)
        );
    box-shadow:
        0 35px 90px rgba(0,0,0,.30);
    overflow:hidden;
}

.route-art:before{
    content:"";
    position:absolute;
    inset:0;
    background-image:
        linear-gradient(
            rgba(255,255,255,.025) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(255,255,255,.025) 1px,
            transparent 1px
        );
    background-size:38px 38px;
}

.route-copy{
    position:absolute;
    left:46px;
    bottom:46px;
    right:46px;
    z-index:2;
}

.route-copy strong{
    display:block;
    font-size:30px;
    line-height:1.2;
    margin-bottom:12px;
}

.route-copy span{
    color:var(--muted);
    line-height:1.6;
}

.route-line{
    position:absolute;
    z-index:2;
    height:2px;
    background:
        linear-gradient(
            90deg,
            transparent,
            var(--cyan),
            transparent
        );
    transform-origin:left center;
    opacity:.8;
    box-shadow:0 0 14px rgba(53,215,229,.65);
}

.r1{
    width:50%;
    top:31%;
    left:18%;
    transform:rotate(13deg);
}

.r2{
    width:43%;
    top:42%;
    left:25%;
    transform:rotate(-9deg);
}

.r3{
    width:36%;
    top:25%;
    left:34%;
    transform:rotate(27deg);
}

.airport{
    position:absolute;
    z-index:3;
    width:12px;
    height:12px;
    border:3px solid var(--cyan);
    border-radius:50%;
    background:#081523;
    box-shadow:0 0 17px var(--cyan);
}

.a1{left:17%;top:30%}
.a2{left:25%;top:41%}
.a3{left:34%;top:24%}
.a4{
    left:68%;
    top:42%;
    width:17px;
    height:17px;
    border-color:var(--yellow);
    box-shadow:0 0 18px rgba(242,201,76,.7);
}

.dashboard-shell{
    min-height:100vh;
    display:grid;
    grid-template-columns:230px 1fr;
}

.sidebar{
    padding:28px 22px;
    border-right:1px solid rgba(255,255,255,.06);
    background:rgba(5,14,25,.72);
}

.sidebar .brand{
    margin-bottom:48px;
}

.nav{
    display:grid;
    gap:8px;
}

.nav a{
    color:#8298af;
    padding:12px 14px;
    border-radius:9px;
    font-size:14px;
}

.nav a.active{
    background:rgba(53,215,229,.09);
    color:var(--cyan);
}

.main{
    padding:38px;
}

.topbar{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:20px;
}

.userbox{
    color:var(--muted);
    font-size:13px;
}

.hero-panel{
    margin-top:42px;
    padding:34px;
    border:1px solid var(--border);
    border-radius:20px;
    background:
        linear-gradient(
            145deg,
            rgba(14,28,46,.92),
            rgba(10,22,38,.85)
        );
}

.hero-panel h1{
    font-size:38px;
}

.status-row{
    display:grid;
    grid-template-columns:
        repeat(3,minmax(0,1fr));
    gap:16px;
    margin-top:28px;
}

.status-card{
    padding:20px;
    background:#0a1728;
    border:1px solid #1a3048;
    border-radius:14px;
}

.status-label{
    color:#6f879e;
    font-size:11px;
    text-transform:uppercase;
    letter-spacing:1.5px;
}

.status-value{
    margin-top:8px;
    font-size:18px;
    font-weight:750;
}

@media(max-width:900px){
    .auth-shell{
        grid-template-columns:1fr;
    }

    .auth-right{
        display:none;
    }

    .auth-left{
        padding:32px 24px;
    }

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

    .sidebar{
        display:none;
    }

    .main{
        padding:24px;
    }

    .status-row{
        grid-template-columns:1fr;
    }
}

/* =========================================================
   AUTH / ADMIN EXTENSIONS
   ========================================================= */

.page-shell{
    min-height:100vh;
    padding:38px;
}

.page-wrap{
    width:min(1100px,100%);
    margin:0 auto;
}

.page-header{
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:20px;
    margin-bottom:42px;
}

.page-title h1{
    font-size:38px;
    margin:6px 0 6px;
}

.page-sub{
    color:var(--muted);
    line-height:1.6;
}

.back-link{
    color:var(--muted);
    font-size:13px;
}

.panel{
    border:1px solid var(--border);
    border-radius:18px;
    background:
        linear-gradient(
            145deg,
            rgba(14,28,46,.94),
            rgba(9,20,34,.90)
        );
    padding:26px;
    margin-bottom:20px;
}

.panel h2{
    margin:0 0 20px;
    font-size:20px;
}

.account-grid{
    display:grid;
    grid-template-columns:180px 1fr;
    gap:14px 22px;
}

.account-label{
    color:#7189a1;
    font-size:13px;
}

.account-value{
    color:var(--text);
    font-weight:650;
}

.admin-list{
    display:grid;
    gap:15px;
}

.admin-user{
    padding:20px;
    border:1px solid #1b324b;
    border-radius:14px;
    background:#091727;
    display:grid;
    grid-template-columns:1fr auto;
    gap:24px;
    align-items:center;
}

.admin-user-name{
    font-size:18px;
    font-weight:750;
}

.admin-user-meta{
    display:flex;
    flex-wrap:wrap;
    gap:7px 18px;
    margin-top:10px;
    color:#7790a8;
    font-size:13px;
}

.admin-actions{
    display:flex;
    gap:9px;
}

.admin-actions form{
    margin:0;
}

.admin-actions button{
    width:auto;
    margin:0;
    padding:11px 15px;
}

.button-secondary{
    background:#16283b;
    color:#9eb2c7;
    box-shadow:none;
}

.button-danger{
    background:rgba(255,113,133,.12);
    color:#ff93a3;
    border:1px solid rgba(255,113,133,.25);
    box-shadow:none;
}

.empty-state{
    padding:30px;
    text-align:center;
    color:#748ba2;
    border:1px dashed #203950;
    border-radius:14px;
}

.auth-card{
    width:min(440px,100%);
}

.form-row{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:14px;
}

@media(max-width:720px){
    .page-shell{
        padding:24px;
    }

    .page-header{
        align-items:flex-start;
        flex-direction:column;
    }

    .account-grid{
        grid-template-columns:1fr;
        gap:5px;
    }

    .account-value{
        margin-bottom:12px;
    }

    .admin-user{
        grid-template-columns:1fr;
    }

    .admin-actions{
        width:100%;
    }

    .admin-actions form{
        flex:1;
    }

    .admin-actions button{
        width:100%;
    }

    .form-row{
        grid-template-columns:1fr;
    }
}

/* =========================================================
   PROFILE IMAGE
   ========================================================= */

.profile-image-layout{
    display:grid;
    grid-template-columns:180px 1fr;
    gap:28px;
    align-items:start;
}

.profile-image-preview{
    width:180px;
    height:180px;
    border-radius:50%;
    overflow:hidden;
    border:2px solid rgba(53,215,229,.28);
    background:#091727;
    box-shadow:
        0 0 35px rgba(53,215,229,.10);
    display:grid;
    place-items:center;
}

.profile-image-preview img{
    width:100%;
    height:100%;
    object-fit:cover;
    display:block;
}

.profile-placeholder{
    width:100%;
    height:100%;
    display:grid;
    place-items:center;
    font-size:58px;
    font-weight:800;
    color:var(--cyan);
    background:
        radial-gradient(
            circle at 35% 30%,
            rgba(53,215,229,.12),
            transparent 45%
        ),
        #091727;
}

.profile-image-tools{
    max-width:520px;
}

.profile-image-buttons{
    display:flex;
    gap:10px;
    flex-wrap:wrap;
}

.profile-image-buttons button{
    width:auto;
    margin-top:0;
}

.camera-box{
    margin-top:18px;
    padding:14px;
    border:1px solid #1d354d;
    border-radius:14px;
    background:#07131f;
}

.camera-box video{
    width:100%;
    max-width:460px;
    aspect-ratio:1 / 1;
    object-fit:cover;
    border-radius:12px;
    background:#000;
    display:block;
    margin-bottom:14px;
}

.profile-image-tools form + form{
    margin-top:12px;
}

.profile-image-tools .button-danger{
    width:auto;
    margin-top:0;
}

@media(max-width:650px){

    .profile-image-layout{
        grid-template-columns:1fr;
    }

    .profile-image-preview{
        width:150px;
        height:150px;
    }

    .profile-image-buttons{
        display:grid;
        grid-template-columns:1fr;
    }

    .profile-image-buttons button{
        width:100%;
    }

    .profile-image-tools .button-danger{
        width:100%;
    }
}

.userbox-profile{
    display:flex;
    align-items:center;
    gap:10px;
}

.user-avatar{
    width:38px;
    height:38px;
    border-radius:50%;
    object-fit:cover;
    border:1px solid rgba(53,215,229,.35);
    background:#091727;
}

.user-avatar-placeholder{
    display:grid;
    place-items:center;
    color:var(--cyan);
    font-weight:800;
}

/* =========================================================
   NEW SEARCH
   ========================================================= */

.search-builder{
    max-width:1180px;
}

.search-builder h2{
    margin:0 0 4px;
    font-size:20px;
}

.search-section{
    margin-top:34px;
    padding-top:28px;
    border-top:1px solid rgba(255,255,255,.07);
}

.search-section-head{
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:20px;
    margin-bottom:20px;
}

.compact-button{
    width:auto;
    margin:0;
    padding:10px 14px;
}

.participant-grid{
    display:grid;
    grid-template-columns:
        repeat(
            2,
            minmax(0,1fr)
        );
    gap:16px;
}

.participant-card{
    border:1px solid #1b3249;
    border-radius:16px;
    padding:18px;
    background:#091625;
    transition:.18s ease;
}

.participant-card.selected{
    border-color:
        rgba(53,215,229,.55);
    box-shadow:
        0 0 0 2px
        rgba(53,215,229,.05);
    background:
        linear-gradient(
            145deg,
            rgba(11,31,48,.95),
            rgba(8,22,37,.95)
        );
}

.participant-person{
    display:grid;
    grid-template-columns:
        52px 1fr auto;
    align-items:center;
    gap:13px;
}

.participant-avatar{
    width:52px;
    height:52px;
    border-radius:50%;
    object-fit:cover;
    border:1px solid
        rgba(53,215,229,.30);
    background:#0b1a2a;
}

.participant-avatar-placeholder{
    display:grid;
    place-items:center;
    color:var(--cyan);
    font-size:20px;
    font-weight:800;
}

.participant-name{
    font-size:16px;
    font-weight:750;
}

.participant-username{
    color:#6e879e;
    font-size:12px;
    margin-top:3px;
}

.participant-check{
    margin:0;
    cursor:pointer;
}

.participant-check input{
    position:absolute;
    opacity:0;
    pointer-events:none;
}

.participant-check span{
    width:25px;
    height:25px;
    display:block;
    border-radius:7px;
    border:1px solid #35506b;
    background:#081421;
    position:relative;
}

.participant-check input:checked + span{
    border-color:var(--cyan);
    background:
        rgba(53,215,229,.15);
}

.participant-check input:checked + span:after{
    content:"✓";
    position:absolute;
    inset:0;
    display:grid;
    place-items:center;
    color:var(--cyan);
    font-weight:900;
}

.airport-field-wrap{
    margin-top:18px;
    padding-top:16px;
    border-top:1px solid
        rgba(255,255,255,.055);
}

.airport-search{
    position:relative;
}

.airport-results{
    position:absolute;
    z-index:100;
    left:0;
    right:0;
    top:calc(100% + 6px);
    border:1px solid #23425e;
    border-radius:12px;
    background:#081522;
    overflow:hidden;
    box-shadow:
        0 18px 45px
        rgba(0,0,0,.45);
    max-height:360px;
    overflow-y:auto;
}

.airport-result{
    width:100%;
    margin:0;
    padding:11px 13px;
    border-radius:0;
    background:transparent;
    box-shadow:none;
    display:grid;
    grid-template-columns:
        48px 1fr;
    gap:2px 10px;
    justify-content:start;
    text-align:left;
    color:var(--text);
    border-bottom:1px solid
        rgba(255,255,255,.05);
}

.airport-result:hover{
    background:
        rgba(53,215,229,.08);
    color:var(--text);
}

.airport-result strong{
    grid-row:1 / 3;
    color:var(--cyan);
    font-size:14px;
}

.airport-result span{
    font-weight:700;
    font-size:13px;
}

.airport-result small{
    color:#6f879e;
    font-size:11px;
}

.airport-empty{
    padding:15px;
    color:#748ca4;
    font-size:13px;
}

.airport-selected{
    margin-top:8px;
}

.airport-chip{
    display:inline-flex;
    padding:6px 9px;
    border-radius:7px;
    background:
        rgba(53,215,229,.10);
    color:var(--cyan);
    font-size:12px;
    font-weight:700;
}

.wildcard-list{
    display:grid;
    gap:14px;
}

.wildcard-card{
    border:1px solid #1b3249;
    border-radius:16px;
    padding:18px;
    background:#091625;
}

.wildcard-head{
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:15px;
    margin-bottom:18px;
}

@media(max-width:850px){

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

}

@media(max-width:600px){

    .search-section-head{
        flex-direction:column;
    }

    .compact-button{
        width:100%;
    }

}

/* =========================================================
   NEW SEARCH – COMPACT CARD OVERRIDES
   ========================================================= */

.search-builder{
    max-width:1320px;
}

.search-section-head{
    align-items:center !important;
}

.search-section-head .compact-button,
.compact-button{
    width:auto !important;
    display:inline-flex !important;
    align-items:center;
    justify-content:center;
    white-space:nowrap;
    padding:10px 16px !important;
    min-height:42px;
}

.participant-grid{
    display:grid !important;
    grid-template-columns:repeat(auto-fit, minmax(300px, 360px)) !important;
    gap:16px !important;
    align-items:start !important;
    justify-content:flex-start !important;
}

.participant-card{
    width:100% !important;
    max-width:360px !important;
    min-height:0 !important;
    padding:16px !important;
    border-radius:18px !important;
    overflow:hidden;
}

.participant-person{
    display:grid !important;
    grid-template-columns:56px minmax(0,1fr) 28px !important;
    align-items:center !important;
    gap:12px !important;
}

.participant-card img.participant-avatar,
.participant-card .participant-avatar{
    width:56px !important;
    min-width:56px !important;
    max-width:56px !important;
    height:56px !important;
    min-height:56px !important;
    max-height:56px !important;
    aspect-ratio:1 / 1 !important;
    display:block !important;
    object-fit:cover !important;
    border-radius:50% !important;
    overflow:hidden !important;
    flex:0 0 56px !important;
}

.participant-card .participant-avatar-placeholder{
    display:grid !important;
    place-items:center !important;
    font-size:20px !important;
    font-weight:800 !important;
}

.participant-name{
    font-size:17px !important;
    line-height:1.15;
    margin:0 !important;
}

.participant-username{
    font-size:13px !important;
    margin-top:4px !important;
}

.participant-check{
    align-self:start;
}

.participant-check span{
    width:24px !important;
    height:24px !important;
}

.airport-field-wrap{
    margin-top:14px !important;
    padding-top:14px !important;
}

.participant-card label{
    display:block;
    margin-bottom:8px;
    font-size:13px;
    font-weight:700;
}

.participant-card .airport-query,
.wildcard-card .airport-query{
    min-height:46px;
}

.participant-card .airport-selected,
.wildcard-card .airport-selected{
    min-height:24px;
}

.airport-results{
    max-height:260px !important;
}

.airport-result{
    padding:10px 12px !important;
}

.wildcard-list{
    grid-template-columns:repeat(auto-fit, minmax(300px, 360px));
}

.wildcard-card{
    max-width:360px;
    padding:16px !important;
}

@media (max-width: 980px){
    .participant-grid{
        grid-template-columns:repeat(auto-fit, minmax(280px, 1fr)) !important;
    }

    .wildcard-list{
        grid-template-columns:repeat(auto-fit, minmax(280px, 1fr));
    }
}

@media (max-width: 640px){
    .participant-grid,
    .wildcard-list{
        grid-template-columns:1fr !important;
    }

    .participant-card,
    .wildcard-card{
        max-width:none !important;
    }

    .search-section-head .compact-button,
    .compact-button{
        width:100% !important;
    }
}

/* =========================================================
   NEW SEARCH – AIRPORT DROPDOWN CLIPPING FIX
   ========================================================= */

.participant-grid,
.participant-card,
.wildcard-list,
.wildcard-card{
    overflow:visible !important;
}

.participant-card{
    position:relative;
}

.participant-card:focus-within{
    z-index:200;
}

.wildcard-card{
    position:relative;
}

.wildcard-card:focus-within{
    z-index:200;
}

.airport-field-wrap,
.airport-search{
    overflow:visible !important;
}

.airport-results{
    z-index:1000 !important;
}

/* =========================================================
   SEARCH DETAILS / READY
   ========================================================= */

.search-summary-card{
    margin-top:26px;
    padding:16px;
    border:1px solid #1b3249;
    border-radius:16px;
    background:#091625;
}

.search-summary-title{
    font-size:12px;
    text-transform:uppercase;
    letter-spacing:.08em;
    color:#6e879e;
    margin-bottom:12px;
}

.search-summary-participants{
    display:flex;
    flex-wrap:wrap;
    gap:10px;
}

.search-summary-person{
    display:inline-flex;
    align-items:center;
    gap:8px;
    padding:8px 10px;
    border:1px solid #1d3a52;
    border-radius:10px;
    background:#071521;
}

.search-summary-person span{
    color:var(--cyan);
    font-weight:800;
}

.target-type-grid,
.search-mode-grid{
    display:grid;
    grid-template-columns:
        repeat(4, minmax(0,1fr));
    gap:12px;
    margin-top:16px;
}

.search-mode-grid{
    grid-template-columns:
        repeat(2, minmax(0,1fr));
}

.choice-card,
.mode-card{
    border:1px solid #1d3a52;
    border-radius:14px;
    background:#091625;
    padding:14px;
    cursor:pointer;
}

.choice-card input,
.mode-card input{
    margin-right:8px;
}

.mode-card{
    display:flex;
    gap:10px;
    align-items:flex-start;
}

.mode-card strong{
    display:block;
    margin-bottom:4px;
}

.mode-card span{
    display:block;
    color:#6e879e;
    font-size:12px;
    line-height:1.45;
}

.form-grid-2{
    display:grid;
    grid-template-columns:
        repeat(2, minmax(0,1fr));
    gap:16px;
}

.target-value-wrap{
    margin-top:18px;
}

.smart-options{
    margin-top:18px;
    padding:16px;
    border:1px solid #1b3249;
    border-radius:14px;
    background:#081522;
}

.switch-row{
    display:flex;
    align-items:center;
    gap:10px;
    margin-bottom:14px;
}

.disabled-block{
    opacity:.45;
}

.ready-grid{
    display:grid;
    grid-template-columns:
        repeat(4, minmax(0,1fr));
    gap:14px;
    margin-top:28px;
}

.ready-card{
    padding:16px;
    border:1px solid #1d3a52;
    border-radius:14px;
    background:#091625;
}

.ready-card span{
    display:block;
    color:#6e879e;
    font-size:12px;
    margin-bottom:7px;
}

.ready-card strong{
    font-size:16px;
}

.ready-participants{
    display:flex;
    flex-wrap:wrap;
    gap:10px;
}

.ready-person{
    display:flex;
    align-items:center;
    gap:8px;
    padding:10px 12px;
    border:1px solid #1d3a52;
    border-radius:10px;
    background:#091625;
}

.ready-person span{
    color:var(--cyan);
    font-weight:800;
}

@media(max-width:900px){

    .target-type-grid,
    .ready-grid{
        grid-template-columns:
            repeat(2, minmax(0,1fr));
    }

}

@media(max-width:640px){

    .target-type-grid,
    .search-mode-grid,
    .form-grid-2,
    .ready-grid{
        grid-template-columns:1fr;
    }

}