/* =========================================================
   Codex Shares - brand theme
   Loaded last, after bootstrap/dashboard/admindashboard css.
   Single source of truth for the oxblood surface + green accent system.

   To retune the whole product, change the tokens below only.
   ========================================================= */

:root{
    /* oxblood ramp - every background in the product comes from here */
    --ox-950:#1B0407;
    --ox-900:#2B060C;   /* page canvas */
    --ox-850:#33080F;
    --ox-800:#3A0A11;   /* cards, panels */
    --ox-700:#4A0D14;   /* oxblood core, raised surfaces */
    --ox-600:#5E1119;
    --ox-500:#7A1622;
    --ox-400:#9B2130;

    /* green accent ramp - actions, highlights, positive state */
    --cs-100:#DCFCE7;
    --cs-200:#BBF7D0;
    --cs-300:#86EFAC;
    --cs-400:#4ADE80;
    --cs-500:#22C55E;
    --cs-600:#16A34A;
    --cs-700:#15803D;
    --cs-800:#166534;
    --cs-900:#14532D;

    /* semantic tokens */
    --cs-brand:#2ED26C;
    --cs-brand-dark:#22C55E;
    --cs-brand-soft:rgba(46,210,108,.12);
    --cs-accent:#4ADE80;

    --cs-canvas:var(--ox-900);
    --cs-surface:var(--ox-800);
    --cs-surface-2:var(--ox-700);
    --cs-line:rgba(255,255,255,.10);
    --cs-line-strong:rgba(255,255,255,.18);

    --cs-ink:#FBEEF0;       /* headings */
    --cs-body:#E0CBCF;      /* body copy */
    --cs-muted:#B08E95;     /* secondary copy */

    --cs-danger:#F04444;
    --cs-warn:#F0A83A;

    --cs-radius:14px;
    --cs-radius-sm:10px;
    --cs-shadow:0 1px 2px rgba(0,0,0,.35), 0 10px 26px -14px rgba(0,0,0,.7);
    --cs-shadow-lg:0 22px 50px -22px rgba(0,0,0,.85);
    --cs-gradient:linear-gradient(135deg,#2ED26C 0%,#16A34A 60%,#0F7A38 100%);
    --cs-head-gradient:linear-gradient(135deg,var(--ox-600) 0%,var(--ox-700) 45%,var(--ox-900) 100%);
    --cs-ease:all .22s cubic-bezier(.4,0,.2,1);

    /* legacy aliases so any stray inline colour stays on-brand */
    --primary:#2ED26C;
    --brand:#2ED26C;
    --brand-dark:#22C55E;
    color-scheme:dark;
}

html,body{background-color:var(--cs-canvas)}
body{
    color:var(--cs-body);
    -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4,h5,h6{color:var(--cs-ink)}
hr{border-color:var(--cs-line);opacity:1}
.text-muted{color:var(--cs-muted) !important}
a{color:var(--cs-brand)}
a:hover{color:var(--cs-accent)}

/* ---------------------------------------------------------
   Top bar
   --------------------------------------------------------- */
header.container{
    width:min(1220px,95%) !important;
    height:auto !important;
    border:1px solid var(--cs-line) !important;
    border-radius:var(--cs-radius);
    box-shadow:var(--cs-shadow);
    padding:10px 18px !important;
    margin:18px auto 26px !important;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:14px;
    position:sticky;
    top:12px;
    z-index:1030;
    backdrop-filter:saturate(1.3) blur(8px);
    background:rgba(58,10,17,.90) !important;
}
header.container aside.d-flex{float:none !important;margin:0 !important;align-items:center;gap:12px}
header.container ul.list-inline{float:none !important;margin:0 !important;padding:0 !important;align-items:center;gap:10px}
header.container ul.list-inline li{margin:0}

.cs-menu-btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:42px;height:42px;
    border-radius:12px;
    border:1px solid var(--cs-line);
    background:var(--cs-brand-soft);
    color:var(--cs-brand) !important;
    font-size:22px !important;
    cursor:pointer;
    transition:var(--cs-ease);
}
.cs-menu-btn:hover{background:var(--cs-brand);color:var(--ox-950) !important;border-color:var(--cs-brand)}

.cs-brand{display:inline-flex;align-items:center;gap:10px;text-decoration:none}
.cs-brand img{height:40px;width:auto;display:block}
.cs-brand-name{font-weight:700;color:var(--cs-ink);letter-spacing:.2px;line-height:1.1}
.cs-brand-name small{display:block;font-weight:500;font-size:.68rem;letter-spacing:2px;color:var(--cs-brand);text-transform:uppercase}

.cs-avatar{
    width:44px;height:44px;
    border-radius:50%;
    border:2px solid var(--cs-line-strong);
    padding:2px;
    background:var(--ox-700);
    object-fit:cover;
    display:block;
}
.cs-icon-btn{
    position:relative;
    display:inline-flex;align-items:center;justify-content:center;
    width:42px;height:42px;border-radius:12px;
    border:1px solid var(--cs-line);
    background:var(--ox-700);color:var(--cs-body);
    transition:var(--cs-ease);
}
.cs-icon-btn:hover{background:var(--cs-brand-soft);border-color:var(--cs-brand)}
.cs-icon-btn .badge{position:absolute;top:-6px;right:-6px}

/* ---------------------------------------------------------
   Side navigation (offcanvas)
   --------------------------------------------------------- */
div.offcanvas{
    background:var(--ox-850) !important;
    color:var(--cs-body);
    border-right:1px solid var(--cs-line);
    box-shadow:24px 0 60px -30px rgba(0,0,0,.9);
    width:min(88vw,320px);
}
.offcanvas-backdrop.show{opacity:.72}

div.offcanvas .offcanvas-header{
    background:var(--ox-950);
    border-bottom:1px solid var(--cs-line);
    box-shadow:inset 0 -3px 0 0 var(--cs-brand);
    color:#fff;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    padding:20px 18px 22px;
    position:relative;
}
div.offcanvas .offcanvas-header .offcanvas-title{
    color:#fff !important;display:flex;align-items:center;gap:10px;font-size:1rem;margin:0;
}
div.offcanvas .offcanvas-header .offcanvas-title img{height:36px;width:auto;border:0 !important;border-radius:0 !important;padding:0 !important;background:transparent !important}

/* a close control you can actually see and hit on a phone */
div.offcanvas .offcanvas-header .btn-close,
div.offcanvas .offcanvas-header .cs-close{
    position:static;
    flex:0 0 auto;
    width:42px;height:42px;
    min-width:42px;
    display:inline-flex;align-items:center;justify-content:center;
    padding:0;margin:0;
    border-radius:50%;
    border:1px solid var(--cs-line-strong) !important;
    background:rgba(255,255,255,.06) !important;
    color:#fff !important;
    opacity:1;
    font-size:1.05rem;
    line-height:1;
    cursor:pointer;
    transition:var(--cs-ease);
}
div.offcanvas .offcanvas-header .btn-close{
    /* the stock control paints an svg X: recolour it for the dark header */
    filter:invert(1) grayscale(1);
    background-color:rgba(255,255,255,.06) !important;
    background-size:14px;
}
div.offcanvas .offcanvas-header .cs-close:hover,
div.offcanvas .offcanvas-header .btn-close:hover{
    background:var(--cs-brand) !important;
    border-color:var(--cs-brand) !important;
    color:var(--ox-950) !important;
    transform:rotate(90deg);
}
div.offcanvas .offcanvas-header .cs-close:focus-visible{outline:2px solid var(--cs-brand);outline-offset:2px}

div.offcanvas .offcanvas-body{padding:18px 14px 24px;display:flex;flex-direction:column;background:var(--ox-850)}

ul.list-group{border:0;gap:6px;display:flex;flex-direction:column;background:transparent}
li.list-group-item{
    color:var(--cs-body) !important;
    background:transparent !important;
    border:1px solid transparent !important;
    border-radius:12px !important;
    padding:13px 14px;
    font-weight:500;
    display:flex;align-items:center;gap:10px;
    transition:var(--cs-ease);
}
li.list-group-item i{
    color:var(--cs-brand);font-size:1.05rem;transition:var(--cs-ease);
    width:26px;text-align:center;flex:0 0 26px;
}
li.list-group-item:hover{
    background:rgba(255,255,255,.06) !important;
    color:#fff !important;
    border-color:var(--cs-line) !important;
    border-radius:12px !important;
    transform:translateX(3px);
}
.offcanvas a.cs-active li.list-group-item{
    background:var(--cs-gradient) !important;
    color:var(--ox-950) !important;
    font-weight:700;
    border-color:transparent !important;
    box-shadow:0 8px 20px -12px rgba(46,210,108,.9);
}
.offcanvas a.cs-active li.list-group-item i{color:var(--ox-950)}
.cs-sidefoot{
    margin-top:auto;padding-top:22px;text-align:center;color:var(--cs-muted);font-size:.78rem;
    border-top:1px solid var(--cs-line);margin-top:auto;
}
.cs-sidefoot span{display:block;color:var(--cs-ink);font-weight:600;margin-bottom:2px}

/* ---------------------------------------------------------
   Dashboard shell + stat cards
   --------------------------------------------------------- */
div.dashboard-container{width:min(1220px,95%);margin:0 auto 60px}
/* legacy dashboard wrappers get flattened, but our own cards keep their padding */
div.dashboard-container>div:not(.cs-page-head):not(.cs-card):not(.cs-stat-row){border:0 !important;padding:0 !important;margin:0 auto !important}
div.dashboard-container>.cs-card{margin-bottom:22px}
div.dashboard-container>.row{margin-left:0 !important;margin-right:0 !important}
div.dashboard-container .cs-page-head{margin-bottom:22px}

/* stat cards: three across on desktop, two on tablet, one on phone.
   The cards carry their own !important padding, so spacing comes from a
   flex gap rather than bootstrap gutters. */
div.dashboard-container>.row{display:flex;flex-wrap:wrap;gap:18px}
div.dashboard-container>.row>section.dash-stats{
    margin:0 !important;
    flex:0 1 calc(33.333% - 12px);
    max-width:calc(33.333% - 12px);
}
div.dashboard-container>.row>section.dash-stats.col-md-8{
    flex-basis:calc(66.666% - 6px);
    max-width:calc(66.666% - 6px);
}
div.dashboard-container>.row>section.dash-stats.col-md-12{max-width:100%;flex-basis:100%}
@media (max-width:992px){
    div.dashboard-container>.row>section.dash-stats,
    div.dashboard-container>.row>section.dash-stats.col-md-8{
        flex-basis:calc(50% - 9px);max-width:calc(50% - 9px);
    }
}
@media (max-width:640px){
    div.dashboard-container>.row>section.dash-stats,
    div.dashboard-container>.row>section.dash-stats.col-md-8{flex-basis:100%;max-width:100%}
}

section.dash-stats,
div.account-manager section.manager-section{
    background:var(--cs-surface) !important;
    color:var(--cs-body) !important;
    border:1px solid var(--cs-line) !important;
    border-radius:var(--cs-radius) !important;
    box-shadow:var(--cs-shadow) !important;
    padding:22px !important;
    position:relative;
    overflow:hidden;
    transition:var(--cs-ease);
}
section.dash-stats::before,
div.account-manager section.manager-section::before{
    content:"";position:absolute;left:0;top:0;bottom:0;width:5px;background:var(--cs-gradient);
}
section.dash-stats:hover,
div.account-manager section.manager-section:hover{
    transform:translateY(-3px);
    box-shadow:var(--cs-shadow-lg) !important;
    border-color:var(--cs-line-strong) !important;
}
section.dash-stats>h4:first-of-type,
div.account-manager section.manager-section>h4:first-of-type{
    font-size:.82rem;text-transform:uppercase;letter-spacing:1.1px;
    color:var(--cs-muted) !important;font-weight:600;margin-bottom:10px;
    padding:0 !important;
    display:flex;align-items:center;gap:8px;
}
/* any h4 after the first one carries a value, not a label */
section.dash-stats>h4:first-of-type~h4,
div.account-manager section.manager-section>h4:first-of-type~h4{
    font-size:1.15rem;font-weight:700;color:var(--cs-ink) !important;
    padding:0 !important;margin:0 0 8px;
}
section.dash-stats>h4:first-of-type i,
div.account-manager section.manager-section>h4:first-of-type i{
    color:var(--cs-brand);background:var(--cs-brand-soft);
    width:34px;height:34px;border-radius:10px;
    display:inline-flex;align-items:center;justify-content:center;
}
section.dash-stats h1,
div.account-manager section.manager-section h1,
div.account-manager section.manager-section h2,
div.account-manager section.manager-section h5{
    font-size:2rem;font-weight:700;color:var(--cs-ink) !important;margin:0 0 6px;
    letter-spacing:-.5px;
}
section.dash-stats h1.h4,div.account-manager section.manager-section h1.h4{font-size:1.35rem}
section.dash-stats h1.h5,div.account-manager section.manager-section h1.h5{font-size:1.15rem}
section.dash-stats p,
div.account-manager section.manager-section p{color:var(--cs-muted) !important;font-size:.85rem;margin:0;padding:0 !important}
section.dash-stats p .btn,
div.account-manager section.manager-section p .btn{margin-top:8px}

div.account-manager{
    width:min(1220px,95%) !important;
    border:0 !important;
    padding:0 !important;
    margin:0 auto 50px;
}
div.account-manager section.chart-section,
section.invested-asset{
    background:var(--cs-surface);
    border:1px solid var(--cs-line);
    border-radius:var(--cs-radius);
    box-shadow:var(--cs-shadow);
    padding:20px;
    margin:14px 0;
}
section.invested-asset img{border:2px solid var(--cs-line-strong) !important;margin:16px !important}

/* Page heading used across admin + member screens */
.cs-page-head{
    width:100%;
    background:var(--cs-head-gradient);
    border:1px solid var(--cs-line);
    border-left:5px solid var(--cs-brand);
    color:#fff;
    border-radius:var(--cs-radius);
    padding:24px 26px;
    margin:0 0 22px;
    box-shadow:var(--cs-shadow);
    display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:14px;
}
.cs-page-head h1,.cs-page-head h2,.cs-page-head h3,.cs-page-head h4{color:#fff !important;margin:0;font-weight:700;letter-spacing:-.3px}
.cs-page-head h4 i{color:var(--cs-brand)}
.cs-page-head p{color:rgba(255,255,255,.75) !important;margin:6px 0 0;font-size:.9rem}
.cs-page-head .cs-chip{background:var(--cs-brand-soft);border:1px solid rgba(46,210,108,.35);color:#fff;border-radius:999px;padding:7px 14px;font-size:.82rem;font-weight:600}
a.cs-chip:hover{background:var(--cs-brand);color:var(--ox-950);border-color:var(--cs-brand)}

/* Generic surface card */
.cs-card{
    background:var(--cs-surface);
    border:1px solid var(--cs-line);
    border-radius:var(--cs-radius);
    box-shadow:var(--cs-shadow);
    padding:22px;
    margin-bottom:22px;
    color:var(--cs-body);
}
.cs-card-title{
    color:var(--cs-ink);font-weight:700;font-size:1.05rem;
    display:flex;align-items:center;gap:8px;margin:0 0 4px;
}
.cs-card-title i{color:var(--cs-brand)}
.cs-card-sub{color:var(--cs-muted);font-size:.86rem;margin:0 0 18px}

/* Mini stat chips row */
.cs-stat-row{display:flex;flex-wrap:wrap;gap:14px;margin-bottom:20px}
.cs-stat{
    flex:1 1 180px;background:var(--cs-surface);border:1px solid var(--cs-line);
    border-radius:var(--cs-radius-sm);padding:16px 18px;box-shadow:var(--cs-shadow);
}
.cs-stat span{display:block;font-size:.72rem;text-transform:uppercase;letter-spacing:1px;color:var(--cs-muted);font-weight:600}
.cs-stat strong{display:block;font-size:1.5rem;color:var(--cs-ink);font-weight:700;margin-top:4px}

/* Numbered steps (how to deposit, deposit confirmation) */
ol.cs-steps{list-style:none;counter-reset:cs;padding:0;margin:0}
ol.cs-steps>li{
    counter-increment:cs;
    position:relative;
    padding:0 0 22px 52px;
    border-left:1px dashed var(--cs-line-strong);
    margin-left:16px;
}
ol.cs-steps>li:last-child{border-left-color:transparent;padding-bottom:0}
ol.cs-steps>li::before{
    content:counter(cs);
    position:absolute;left:-17px;top:-2px;
    width:34px;height:34px;border-radius:50%;
    background:var(--cs-gradient);color:var(--ox-950);
    font-weight:700;display:flex;align-items:center;justify-content:center;
}
ol.cs-steps h6{color:var(--cs-ink);font-weight:700;margin:4px 0 6px;font-size:1rem}
ol.cs-steps p{color:var(--cs-muted);font-size:.9rem;margin:0 0 10px}

/* Fact tiles */
.cs-facts{display:flex;flex-wrap:wrap;gap:14px;margin-top:18px}
.cs-fact{
    flex:1 1 220px;background:var(--ox-850);border:1px solid var(--cs-line);
    border-radius:var(--cs-radius-sm);padding:18px;
}
.cs-fact i{color:var(--cs-brand);font-size:1.4rem}
.cs-fact h6{color:var(--cs-ink);font-weight:700;margin:10px 0 6px;font-size:.95rem}
.cs-fact p{color:var(--cs-muted);font-size:.86rem;margin:0}

.cs-support-cta{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:18px}

/* Admin add-investment popup */
.cs-invest-member{
    background:var(--ox-850);border:1px solid var(--cs-line);
    border-radius:var(--cs-radius-sm);padding:14px 16px;
}
.cs-invest-member span{display:block;font-size:.72rem;text-transform:uppercase;letter-spacing:1px;color:var(--cs-muted);font-weight:600}
.cs-invest-member strong{display:block;color:var(--cs-ink);font-size:1rem;margin-top:2px}
.cs-invest-member small{display:block;color:var(--cs-brand);margin-top:4px}
.cs-invest-calc{display:flex;flex-wrap:wrap;gap:12px;margin-top:6px}
.cs-invest-calc>div{
    flex:1 1 120px;background:var(--cs-brand-soft);border:1px solid rgba(46,210,108,.3);
    border-radius:var(--cs-radius-sm);padding:12px 14px;
}
.cs-invest-calc span{display:block;font-size:.7rem;text-transform:uppercase;letter-spacing:1px;color:var(--cs-muted);font-weight:600}
.cs-invest-calc strong{display:block;color:var(--cs-brand);font-size:1.05rem;font-weight:700;margin-top:3px}

/* ---------------------------------------------------------
   Admin shell
   --------------------------------------------------------- */
div.Admin-Dashboard{
    width:min(1220px,95%) !important;
    padding:0 !important;
    margin:0 auto 60px !important;
}
div.Admin-Dashboard.cs-shell-head{margin-bottom:0 !important}
div.changer{width:100% !important;margin:0 0 18px !important}
div.changer .form-select{
    max-width:340px;border-radius:12px;
    padding:11px 16px;font-weight:600;
    box-shadow:var(--cs-shadow);
}

/* table shell */
.cs-table-wrap{
    background:var(--cs-surface);border:1px solid var(--cs-line);border-radius:var(--cs-radius);
    box-shadow:var(--cs-shadow);padding:20px;overflow:auto;color:var(--cs-body);
}
table.table{--bs-table-bg:transparent;--bs-table-color:var(--cs-body);margin-bottom:0;vertical-align:middle;color:var(--cs-body)}
table.table thead th{
    background:var(--cs-brand-soft) !important;
    color:var(--cs-brand) !important;
    border-bottom:1px solid rgba(46,210,108,.25) !important;
    font-size:.76rem;text-transform:uppercase;letter-spacing:.7px;font-weight:700;
    padding:13px 14px;white-space:nowrap;
}
table.table thead th:first-child{border-top-left-radius:12px;border-bottom-left-radius:12px}
table.table thead th:last-child{border-top-right-radius:12px;border-bottom-right-radius:12px}
table.table tbody td{padding:14px;border-color:var(--cs-line);color:var(--cs-body);font-size:.9rem;background:transparent}
table.table tbody tr{transition:var(--cs-ease)}
table.table tbody tr:hover td{background:rgba(255,255,255,.04)}
table.table tbody img{border:2px solid var(--cs-line-strong) !important;padding:2px;background:var(--ox-700)}
table.table-striped>tbody>tr:nth-of-type(odd)>*{--bs-table-accent-bg:rgba(255,255,255,.03);color:var(--cs-body)}

/* DataTables controls */
.dataTables_wrapper .dataTables_filter input,
.dataTables_wrapper .dataTables_length select{
    border:1px solid var(--cs-line);border-radius:10px;padding:6px 12px;outline:none;
    background-color:var(--ox-900);color:var(--cs-body);
}
.dataTables_wrapper .dataTables_length select{padding:6px 28px 6px 10px;min-width:74px}
.dataTables_wrapper .dataTables_filter input{min-width:220px}
.dataTables_wrapper .dataTables_filter input:focus,
.dataTables_wrapper .dataTables_length select:focus{border-color:var(--cs-brand);box-shadow:0 0 0 3px var(--cs-brand-soft)}
.dataTables_wrapper .dataTables_paginate .paginate_button{
    border-radius:9px !important;border:1px solid var(--cs-line) !important;margin:0 3px !important;
    color:var(--cs-body) !important;background:var(--ox-850) !important;
}
.dataTables_wrapper .dataTables_paginate .paginate_button.current,
.dataTables_wrapper .dataTables_paginate .paginate_button:hover{
    background:var(--cs-brand) !important;border-color:var(--cs-brand) !important;color:var(--ox-950) !important;
}
.dataTables_wrapper .dataTables_info,
.dataTables_wrapper .dataTables_length,
.dataTables_wrapper .dataTables_filter,
.dataTables_wrapper .dataTables_empty{color:var(--cs-muted);font-size:.86rem;padding:6px 0}

/* ---------------------------------------------------------
   Buttons
   --------------------------------------------------------- */
.btn{border-radius:11px;font-weight:600;transition:var(--cs-ease)}
.btn:focus,.btn:active{box-shadow:none !important}
.btn-primary,.btn-success,
div.account-div section form button[type="submit"],
.cs-btn{
    background:var(--cs-gradient) !important;
    border:0 !important;
    color:var(--ox-950) !important;
    padding:10px 20px;
    box-shadow:0 8px 20px -10px rgba(46,210,108,.8);
}
.btn-primary:hover,.btn-success:hover,
div.account-div section form button[type="submit"]:hover,
.cs-btn:hover{filter:brightness(1.08);transform:translateY(-1px);color:var(--ox-950) !important}
.btn-outline-success,.cs-btn-outline{
    background:transparent !important;border:1px solid rgba(46,210,108,.45) !important;color:var(--cs-brand) !important;
}
.btn-outline-success:hover,.cs-btn-outline:hover{background:var(--cs-brand-soft) !important;border-color:var(--cs-brand) !important;color:#fff !important}
.btn-danger{background:var(--cs-danger) !important;border:0 !important;color:#fff !important;box-shadow:0 8px 20px -10px rgba(240,68,68,.75)}
.btn-secondary{background:rgba(255,255,255,.08) !important;border:0 !important;color:var(--cs-body) !important}
.btn-secondary:hover{background:rgba(255,255,255,.14) !important;color:#fff !important}
.btn-sm{padding:7px 12px;font-size:.82rem}
button.btn-succeed{background:var(--cs-gradient) !important;color:var(--ox-950) !important;border:0}

/* ---------------------------------------------------------
   Forms
   --------------------------------------------------------- */
.form-label{color:var(--cs-ink) !important;font-weight:600;font-size:.85rem;margin-bottom:6px}
.form-control,.form-select{
    border:1px solid var(--cs-line);
    border-radius:11px;
    padding:11px 14px;
    color:var(--cs-ink);
    background-color:var(--ox-900);
    transition:var(--cs-ease);
}
.form-select{
    background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23B08E95' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
}
.form-select option{background-color:var(--ox-800);color:var(--cs-ink)}
.form-control::placeholder{color:#8E6F76}
.form-control:focus,.form-select:focus{
    border-color:var(--cs-brand);
    background-color:var(--ox-900);
    color:var(--cs-ink);
    box-shadow:0 0 0 3px var(--cs-brand-soft) !important;
}
.form-control[readonly],.form-control:disabled,.form-select:disabled{background:rgba(255,255,255,.04);color:var(--cs-muted)}
.form-control[type="file"]{color:var(--cs-body)}
.form-control[type="file"]::file-selector-button{
    background:var(--cs-brand-soft);color:var(--cs-brand);border:0;border-radius:8px;
    padding:8px 14px;margin-right:12px;font-weight:600;
}
.input-group-text{
    background:var(--cs-brand-soft) !important;
    border:1px solid var(--cs-line) !important;
    color:var(--cs-brand) !important;
    border-radius:11px 0 0 11px;
    min-width:46px;justify-content:center;
}
.input-group>.form-control,.input-group>.form-select{border-radius:0 11px 11px 0}
.input-group>.input-group-text~.input-group-text{border-left:0;border-radius:0}
.cs-dialcode{font-weight:700;color:var(--cs-ink) !important;background:rgba(255,255,255,.06) !important;min-width:64px}
.form-check-input{background-color:var(--ox-900);border-color:var(--cs-line-strong)}
.form-check-input:checked{background-color:var(--cs-brand);border-color:var(--cs-brand)}
.form-check-input:focus{box-shadow:0 0 0 3px var(--cs-brand-soft);border-color:var(--cs-brand)}
.form-check-label{color:var(--cs-body)}
textarea.form-control{min-height:120px}
.form-floating>label{color:var(--cs-muted)}
small.text-muted{color:var(--cs-muted) !important}

/* ---------------------------------------------------------
   Password visibility toggle (eye)
   --------------------------------------------------------- */
.cs-eye{
    border:1px solid var(--cs-line) !important;
    border-left:0 !important;
    background:var(--ox-900) !important;
    color:var(--cs-brand) !important;
    border-radius:0 11px 11px 0 !important;
    min-width:48px;
    display:inline-flex;align-items:center;justify-content:center;
    box-shadow:none !important;
    transition:var(--cs-ease);
    padding:0 !important;
    z-index:3;
}
.cs-eye:hover{background:var(--cs-brand-soft) !important;color:#fff !important;transform:none}
.cs-eye i{font-size:1.1rem;line-height:1}
.input-group>.form-control.cs-pass{border-radius:0 !important}
.cs-eye-wrap{position:relative;display:block}
.cs-eye-wrap .form-control{padding-right:50px}
.cs-eye-wrap .cs-eye{
    position:absolute;top:0;right:0;height:100%;
    border:0 !important;background:transparent !important;border-radius:0 11px 11px 0 !important;
}
/* the eye must never inherit the auth submit-button fill */
div.account-div section form button.cs-eye,
form button.cs-eye,
.input-group button.cs-eye{
    background:var(--ox-900) !important;
    background-image:none !important;
    color:var(--cs-brand) !important;
    border:1px solid var(--cs-line) !important;
    border-left:0 !important;
    box-shadow:none !important;
    width:48px !important;
    padding:0 !important;
    transform:none !important;
}
div.account-div section form button.cs-eye:hover,
form button.cs-eye:hover,
.input-group button.cs-eye:hover{
    background:var(--cs-brand-soft) !important;
    color:#fff !important;
    transform:none !important;
}

/* ---------------------------------------------------------
   Auth screens
   --------------------------------------------------------- */
div.account-div{
    min-height:100vh;
    margin:0 !important;
    padding:48px 18px !important;
    background:
        radial-gradient(900px 460px at 10% -10%, var(--ox-700) 0%, transparent 62%),
        radial-gradient(800px 420px at 108% 108%, rgba(46,210,108,.10) 0%, transparent 58%),
        var(--ox-900) !important;
    display:flex;align-items:center;justify-content:center;
}
div.account-div>.row{width:min(1040px,100%);align-items:center}
div.account-div section{
    padding:28px !important;
    background:transparent !important;
}
div.account-div .cs-auth-card{
    background:var(--cs-surface) !important;
    border:1px solid var(--cs-line);
    border-radius:20px;
    box-shadow:var(--cs-shadow-lg);
    padding:34px !important;
}
div.account-div section form h4{
    color:var(--cs-ink) !important;
    font-weight:700;letter-spacing:-.3px;margin-bottom:2px;
}
div.account-div section form button[type="submit"]{width:100%;padding:12px 20px;font-size:1rem}
div.account-div a{color:var(--cs-brand);text-decoration:none;font-weight:600}
div.account-div a:hover{color:var(--cs-accent);text-decoration:underline}
div.account-div p{color:var(--cs-body)}
.cs-auth-brand{display:flex;align-items:center;gap:12px;margin-bottom:22px}
.cs-auth-brand img{height:46px;width:auto}
.cs-auth-lead{color:var(--cs-muted);font-size:.9rem;margin:0 0 22px}
.cs-auth-art{text-align:center}
/* the stock illustrations ship on a white plate: invert it so they sit on
   the oxblood canvas instead of punching a bright hole in the page */
.cs-auth-art img{
    max-width:82%;
    border-radius:18px;
    filter:invert(1) hue-rotate(180deg) saturate(1.15) brightness(.92)
           drop-shadow(0 22px 34px rgba(0,0,0,.55));
}
.cs-auth-points{list-style:none;padding:0;margin:24px 0 0;text-align:left;display:inline-block}
.cs-auth-points li{color:var(--cs-body);font-weight:500;margin-bottom:10px;font-size:.92rem}
.cs-auth-points li i{color:var(--cs-brand);margin-right:8px}

/* ---------------------------------------------------------
   Profile
   --------------------------------------------------------- */
div.profile-container{
    width:min(1220px,95%) !important;
    margin:0 auto 60px;
    padding:0 !important;
}
div.profile-container form{
    background:var(--cs-surface);border:1px solid var(--cs-line);border-radius:var(--cs-radius);
    box-shadow:var(--cs-shadow);padding:26px !important;margin-bottom:26px;
}
div.profile-container h4{
    color:var(--cs-ink) !important;font-weight:700;
    display:flex;align-items:center;gap:8px;margin:0 0 14px;
}
div.profile-container h4 i{color:var(--cs-brand)}

/* ---------------------------------------------------------
   Modals, alerts, badges
   --------------------------------------------------------- */
.modal-content{border:1px solid var(--cs-line);border-radius:18px;overflow:hidden;box-shadow:var(--cs-shadow-lg);background:var(--cs-surface);color:var(--cs-body)}
.modal-header{background:var(--cs-head-gradient);color:#fff;border-bottom:1px solid var(--cs-line);padding:18px 22px}
.modal-header .modal-title{color:#fff !important;font-weight:700;font-size:1.02rem}
.modal-header .modal-title i{color:var(--cs-brand)}
.modal-header .btn-close{filter:invert(1) grayscale(1) brightness(2);opacity:.9}
.modal-header.cs-danger{background:linear-gradient(135deg,#B91C1C,#7F1D1D) !important}
.modal-body{padding:22px;background:var(--cs-surface)}
.modal-footer{border-top:1px solid var(--cs-line);padding:16px 22px;background:var(--cs-surface)}
.modal-body h5,.modal-body h6{color:var(--cs-ink)}

.alert{border:1px solid transparent;border-radius:12px;padding:14px 16px;font-weight:500}
.alert-success{background:rgba(46,210,108,.14);color:#8FEFB6;border-color:rgba(46,210,108,.3)}
.alert-danger{background:rgba(240,68,68,.14);color:#FFB4B4;border-color:rgba(240,68,68,.32)}
.alert i{font-size:1.05rem}
.alert .btn-close{filter:invert(1) grayscale(1) brightness(2);opacity:.7}

.badge.bg-danger{background:var(--cs-danger) !important}
.badge.bg-success{background:var(--cs-brand) !important;color:var(--ox-950) !important}
.cs-badge-ok{background:var(--cs-brand-soft);color:var(--cs-brand);border:1px solid rgba(46,210,108,.35);
    border-radius:999px;padding:7px 14px;font-weight:600;font-size:.78rem;display:inline-flex;align-items:center;gap:6px}
.cs-badge-wait{background:rgba(240,168,58,.14);color:#F3C77A;border:1px solid rgba(240,168,58,.35);
    border-radius:999px;padding:7px 14px;font-weight:600;font-size:.78rem;display:inline-flex;align-items:center;gap:6px}

/* referral link box */
.cs-copy-box{
    display:flex;flex-wrap:wrap;align-items:center;gap:10px;
    background:var(--ox-850);border:1px dashed rgba(46,210,108,.4);
    border-radius:12px;padding:14px 16px;word-break:break-all;color:var(--cs-brand);font-weight:600;
}

/* google translate widget tidy-up */
#google_translate_element{font-size:.85rem}
.goog-te-banner-frame{display:none !important}

/* ---------------------------------------------------------
   Bootstrap utility + card overrides
   --------------------------------------------------------- */
.bg-primary{background:var(--cs-gradient) !important;color:var(--ox-950) !important}
.bg-success{background:var(--cs-gradient) !important;color:var(--ox-950) !important}
.bg-light{background:var(--ox-850) !important;color:var(--cs-body) !important}
.bg-white{background:var(--cs-surface) !important}
.text-primary{color:var(--cs-brand) !important}
.text-success{color:var(--cs-brand) !important}
.text-danger{color:#FF8B8B !important}
.text-dark{color:var(--cs-ink) !important}
.border-primary{border-color:var(--cs-brand) !important}
.link-primary,a.text-primary{color:var(--cs-brand) !important}

.card{
    background:var(--cs-surface);
    color:var(--cs-body);
    border:1px solid var(--cs-line);
    border-radius:var(--cs-radius);
    box-shadow:var(--cs-shadow);
    overflow:hidden;
}
.card-header{background:var(--ox-850);border-bottom:1px solid var(--cs-line);font-weight:600;color:var(--cs-ink)}
.card-body{background:var(--cs-surface)}
.card-body h1,.card-body h2,.card-body h3,.card-body h4{color:var(--cs-ink)}

.progress{background:rgba(255,255,255,.08);border-radius:999px;height:10px}
.progress-bar{background:var(--cs-gradient) !important}

.nav-pills .nav-link.active,.nav-pills .show>.nav-link{background:var(--cs-gradient);color:var(--ox-950)}
.page-link{color:var(--cs-brand);background:var(--ox-850);border-color:var(--cs-line)}
.page-item.active .page-link{background:var(--cs-brand);border-color:var(--cs-brand);color:var(--ox-950)}
.spinner-border{color:var(--cs-brand)}
::selection{background:var(--cs-brand);color:var(--ox-950)}

/* scrollbars follow the surface, not the OS light default */
*{scrollbar-color:var(--ox-600) var(--ox-900)}
::-webkit-scrollbar{width:11px;height:11px}
::-webkit-scrollbar-track{background:var(--ox-900)}
::-webkit-scrollbar-thumb{background:var(--ox-600);border-radius:8px;border:2px solid var(--ox-900)}
::-webkit-scrollbar-thumb:hover{background:var(--ox-500)}

/* focus visibility for keyboard users */
a:focus-visible,button:focus-visible,.form-control:focus-visible,.form-select:focus-visible{
    outline:2px solid var(--cs-brand);
    outline-offset:2px;
}

/* ---------------------------------------------------------
   Responsive
   --------------------------------------------------------- */
@media (max-width:768px){
    header.container{padding:10px 12px !important;position:static}
    .cs-brand-name{display:none}
    .cs-page-head{padding:18px}
    section.dash-stats h1,div.account-manager section.manager-section h1{font-size:1.6rem}
    div.account-div .cs-auth-card{padding:24px !important}
    div.account-div section{padding:14px !important}
    .cs-table-wrap{padding:12px}
    .cs-support-cta{flex-direction:column;align-items:flex-start}
    ol.cs-steps>li{padding-left:44px}
}

/* legacy inline heights on the sort/filter selects clipped the taller field */
#propasset,#fundsmanager,#usermanager,select.form-select[style*="height"]{
    height:auto !important;
    min-height:46px;
}