*{box-sizing:border-box}body{margin:0;background:#f4f7fb;color:#10213d;font:15px/1.5 Arial,sans-serif}.topbar{height:58px;background:#102746;color:#fff;display:flex;align-items:center;justify-content:space-between;padding:0 7%;position:sticky;top:0;z-index:10}.brand{font-weight:800;font-size:20px}.topbar nav{display:flex;gap:18px}.topbar a{color:#fff;text-decoration:none}.container{max-width:1180px;margin:28px auto;padding:0 18px}.hero,.card{background:#fff;border:1px solid #dce5f0;border-radius:16px;box-shadow:0 10px 30px rgba(16,39,70,.06);padding:24px;margin-bottom:22px}.hero h1{font-size:32px;margin:0 0 8px}.muted{color:#6b7c93}.grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}.stat{padding:18px;border:1px solid #e1e8f1;border-radius:14px;background:#fff}.stat b{display:block;font-size:28px}.actions{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-top:18px}.btn{display:inline-block;border:0;border-radius:9px;padding:10px 16px;text-decoration:none;cursor:pointer;font-weight:700;font-size:14px}.primary{background:#1d70d6;color:#fff}.secondary{background:#0f9d76;color:#fff}.danger{background:#d9534f;color:#fff}.ghost{background:#eef3f8;color:#18304f}.small{padding:7px 10px;font-size:12px}.table-wrap{overflow:auto}.table{width:100%;border-collapse:collapse}.table th,.table td{padding:12px 10px;border-bottom:1px solid #e7edf4;text-align:left;vertical-align:top}.table th{font-size:12px;text-transform:uppercase;color:#63748b}.pill{display:inline-block;padding:4px 9px;border-radius:999px;background:#edf3fb;font-size:12px}.pill.hot{background:#ffe7e4;color:#b42318}.pill.green{background:#e5f7ef;color:#087443}.toolbar{display:flex;gap:10px;align-items:end;flex-wrap:wrap}.toolbar .field{min-width:150px;flex:1}.field{display:block}.field>span,.field label>span{display:block;font-weight:700;font-size:13px;margin:0 0 6px}.field input,.field select,.field textarea{width:100%;border:1px solid #ecc51d;border-radius:9px;padding:11px 12px;background:#fff;color:#172b4d;outline:none}.field input:focus,.field select:focus,.field textarea:focus{border-color:#2876d8;box-shadow:0 0 0 3px rgba(40,118,216,.1)}.field textarea{min-height:100px;resize:vertical}.form-card{max-width:1000px;margin:auto}.form-head{margin-bottom:22px}.form-head h1{margin:0}.form-head p{margin:5px 0;color:#6b7c93}.form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}.full{grid-column:1/-1}.checkgrid{display:flex;flex-wrap:wrap;gap:8px}.check{display:flex;align-items:center;gap:7px;border:1px solid #d7e1ec;padding:8px 10px;border-radius:9px;background:#fafcff;cursor:pointer}.check input{accent-color:#1d70d6}.alert{padding:12px 15px;border-radius:10px;margin-bottom:15px}.alert.error{background:#fdebec;color:#a61b29}.alert.success{background:#e8f7ef;color:#087443}.alert.info{background:#eaf3ff;color:#1759a6}.login-wrap{min-height:100vh;display:grid;place-items:center;padding:20px}.login-card{width:min(430px,100%);background:#fff;border:1px solid #dce5f0;border-radius:18px;padding:32px;box-shadow:0 16px 45px rgba(16,39,70,.09)}.login-card h1{margin:0 0 6px}.login-card .field{margin-top:16px}.notice{padding:12px;background:#fff7e6;border:1px solid #f1d39b;border-radius:10px}.linkline{display:flex;justify-content:space-between;margin-top:12px}.match-score{font-weight:800;color:#0f9d76}.public-nav{display:flex;gap:12px;margin-bottom:18px}.badge{padding:4px 8px;border-radius:6px;background:#f0f4f8}.right{text-align:right}@media(max-width:850px){.grid{grid-template-columns:repeat(2,1fr)}.form-grid{grid-template-columns:1fr}.full{grid-column:auto}.topbar{padding:0 4%;}.topbar nav{gap:9px;font-size:12px}}@media(max-width:560px){.grid{grid-template-columns:1fr}.container{padding:0 10px}.hero h1{font-size:26px}.topbar{height:auto;padding:12px;gap:10px;align-items:flex-start}.topbar nav{flex-wrap:wrap}}

.form-section{border:1px solid #e4ebf3;border-radius:14px;padding:18px;margin-bottom:18px;background:#fbfdff}.form-section h3{margin:0 0 14px;font-size:16px;color:#18304f}.multi-field{min-width:0}.multi-field .checkgrid{max-height:190px;overflow:auto;padding:2px}.multi-field .check{transition:.15s ease}.multi-field .check:hover{background:#f0f6ff;border-color:#9fbce0}.multi-field .check input{width:16px;height:16px;margin:0}.multi-field .check input:checked + span{font-weight:700}.form-section .field.full{grid-column:1/-1}

/* WPH CRM premium multi-select controls */
.multi-select{position:relative;width:100%}
.multi-trigger{width:100%;min-height:44px;border:1px solid #ecc51d;border-radius:10px;background:#fff;color:#172b4d;padding:10px 42px 10px 12px;text-align:left;cursor:pointer;position:relative;font:inherit}
.multi-trigger:hover{border-color:#9fbce0}
.multi-trigger:focus{outline:none;border-color:#2876d8;box-shadow:0 0 0 3px rgba(40,118,216,.1)}
.multi-summary{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:#6b7c93}
.multi-select.has-value .multi-summary{color:#172b4d;font-weight:600}
.multi-chevron{position:absolute;right:13px;top:50%;transform:translateY(-50%);font-size:16px;color:#60758f;transition:transform .15s ease}
.multi-select.is-open .multi-chevron{transform:translateY(-50%) rotate(180deg)}
.multi-menu{display:none;position:absolute;left:0;right:0;top:calc(100% + 6px);z-index:30;background:#fff;border:1px solid #d5dfeb;border-radius:12px;box-shadow:0 16px 38px rgba(16,39,70,.16);padding:8px;max-height:280px;overflow:auto}
.multi-select.is-open .multi-menu{display:block}
.multi-option{display:flex;align-items:center;gap:10px;padding:9px 10px;border-radius:8px;cursor:pointer;font-size:14px}
.multi-option:hover{background:#f0f6ff}
.multi-option input{width:16px;height:16px;accent-color:#1d70d6;flex:0 0 auto}
.multi-option input:checked + span{font-weight:700;color:#163e70}
.multi-actions{display:flex;gap:8px;border-top:1px solid #e7edf4;margin-top:6px;padding:8px 4px 2px;position:sticky;bottom:-8px;background:#fff}
.multi-actions button{border:0;background:#eef3f8;color:#18304f;border-radius:7px;padding:7px 10px;font-weight:700;cursor:pointer}
.multi-actions button:hover{background:#e0e9f3}
.multi-field{min-width:0}
@media(max-width:700px){.multi-menu{position:fixed;left:10px;right:10px;top:auto;bottom:10px;max-height:60vh}.multi-select.is-open:before{content:"";position:fixed;inset:0;background:rgba(15,31,52,.25);z-index:29}.multi-select.is-open .multi-menu{z-index:31}}

/* FINAL MOBILE + PREMIUM UI PATCH */
body{background:linear-gradient(180deg,#f6f9fd 0,#eef4fb 100%);color:#12233f}
.topbar{background:linear-gradient(135deg,#0b2447,#174d8d);box-shadow:0 8px 25px rgba(11,36,71,.18);z-index:100}
.brand{letter-spacing:.2px}.topbar nav{align-items:center}.topbar nav a{padding:7px 8px;border-radius:8px;transition:.18s}.topbar nav a:hover{background:rgba(255,255,255,.12)}
.mobile-menu-btn{display:none;border:0;background:rgba(255,255,255,.12);color:#fff;border-radius:10px;padding:8px 11px;font-size:20px;cursor:pointer}
.btn{border-radius:11px;box-shadow:0 3px 10px rgba(20,48,85,.08);transition:transform .15s,box-shadow .15s,filter .15s}.btn:hover{transform:translateY(-1px);box-shadow:0 6px 16px rgba(20,48,85,.14);filter:brightness(1.03)}
.primary{background:linear-gradient(135deg,#1976e8,#1559c7)}.secondary{background:linear-gradient(135deg,#10a77c,#087d62)}.danger{background:linear-gradient(135deg,#ef5b5b,#c93636)}.ghost{background:#edf3fa;color:#17375f}
.card,.hero{box-shadow:0 12px 35px rgba(20,52,92,.08)}.form-section{background:linear-gradient(180deg,#fff,#f9fbfe);border-color:#dce7f3}
.field input,.field select,.field textarea,.multi-trigger{min-height:44px;border-radius:11px}.field input:focus,.field select:focus,.field textarea:focus,.multi-trigger:focus{border-color:#2a78db;box-shadow:0 0 0 4px rgba(42,120,219,.10)}
.multi-menu-head{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:4px 4px 9px;border-bottom:1px solid #e7edf4;margin-bottom:5px;position:sticky;top:-8px;background:#fff;z-index:2}.multi-close{display:none;border:0;background:#eef3f8;border-radius:8px;width:34px;height:34px;font-size:22px;line-height:1;color:#17375f;cursor:pointer}
@media(max-width:900px){.topbar{height:60px;padding:10px 14px;align-items:center}.mobile-menu-btn{display:block}.crm-nav{display:none!important;position:absolute;left:10px;right:10px;top:64px;background:#102f56;border-radius:14px;padding:10px;box-shadow:0 16px 35px rgba(0,0,0,.2);flex-direction:column;gap:4px}.crm-nav.is-open{display:flex!important}.crm-nav a{padding:11px 12px}.container{margin-top:18px}}
@media(max-width:700px){.container{padding:0 10px}.hero,.card{padding:16px;border-radius:14px}.form-grid{grid-template-columns:1fr}.public-nav{flex-wrap:wrap}.public-nav .btn{flex:1;min-width:145px;text-align:center}.multi-menu{left:10px!important;right:10px!important;bottom:12px!important;top:auto!important;max-height:72vh;border-radius:16px;padding:10px}.multi-close{display:block}.multi-option{padding:11px 10px}.multi-actions{padding-bottom:2px}.actions .btn{min-height:44px}.table{min-width:680px}}

/* V3 FINAL MATCH + MULTI-SELECT UX */
.multi-menu-head{display:flex;align-items:center;justify-content:space-between;gap:12px}.multi-hint{font-size:12px;color:#6b7c93}.multi-actions{display:flex;gap:8px;align-items:center}.multi-actions button{min-height:38px}.multi-done{margin-left:auto!important;background:linear-gradient(135deg,#10a77c,#087d62)!important;color:#fff!important;box-shadow:0 5px 14px rgba(8,125,98,.22)}
.match-score{display:inline-flex;align-items:center;justify-content:center;min-width:58px;padding:7px 10px;border-radius:999px;background:#e8f8f2;color:#087443}.match-breakdown{display:grid;grid-template-columns:repeat(5,minmax(80px,1fr));gap:6px;min-width:360px}.match-chip{padding:6px 7px;border:1px solid #dfe8f2;border-radius:9px;background:#f8fbfe;text-align:center;font-size:11px}.match-chip b{display:block;font-size:13px;color:#17375f}.match-chip small{color:#6b7c93}.type-gate{display:inline-block;padding:4px 8px;border-radius:7px;background:#eaf3ff;color:#1759a6;font-size:11px;font-weight:800}.match-note{margin-top:5px;font-size:12px;color:#6b7c93}
@media(max-width:700px){.match-breakdown{grid-template-columns:repeat(2,minmax(110px,1fr));min-width:0}.multi-actions{flex-wrap:wrap}.multi-done{width:100%;margin-left:0!important}.multi-menu{max-height:78vh}.multi-option{min-height:44px}}

.mobile-menu-btn{display:none;background:#1d70d6;color:#fff;border:0;border-radius:10px;padding:10px 12px;font-size:20px;cursor:pointer}.crm-nav{align-items:center}.inline-choice{display:inline-flex;margin:4px 6px 4px 0}.range-value{display:inline-block;margin-top:6px;font-weight:700}.core-field{min-width:0}@media(max-width:850px){.mobile-menu-btn{display:block}.topbar{position:sticky;z-index:50}.crm-nav{display:none;position:absolute;top:58px;left:0;right:0;background:#102746;padding:12px;flex-direction:column;box-shadow:0 12px 24px rgba(0,0,0,.18)}.crm-nav.is-open{display:flex}.crm-nav a{padding:10px 8px;border-radius:8px}.crm-nav a:hover{background:rgba(255,255,255,.08)}}@media(max-width:560px){.topbar{position:sticky;top:0}.crm-nav{top:54px}.btn{min-height:44px}.field input,.field select,.field textarea{font-size:16px}.actions{width:100%}.actions .btn{flex:1;text-align:center}.table th,.table td{padding:10px 8px}}
.whatsapp-btn{
    background:#16a05d;
    color:#fff !important;
    border-color:#16a05d;
}

.whatsapp-btn:hover{
    background:#12884f;
    color:#fff !important;
}
/* =========================================================
   MOBILE MULTI-SELECT - FINAL
   Scroll options + keep actions visible
   ========================================================= */

@media (max-width:760px){

    .multi-select.is-open{
        z-index:100000 !important;
    }

    .multi-select.is-open .multi-menu{
        position:fixed !important;
        left:10px !important;
        right:10px !important;
        top:auto !important;

        /* Keep popup above fixed mobile footer */
        bottom:82px !important;

        /* Limit popup height */
        max-height:calc(100vh - 150px) !important;

        /* IMPORTANT: the options are direct children */
        overflow-y:auto !important;
        overflow-x:hidden !important;

        -webkit-overflow-scrolling:touch !important;
    }

    .multi-select.is-open .multi-actions{
        position:sticky !important;
        bottom:0 !important;

        z-index:20 !important;

        background:#fff !important;

        border-top:1px solid #e5e7eb !important;

        padding-top:8px !important;
        padding-bottom:8px !important;
    }

}