/* CCPI styles: NXW website look (Poppins, midnight / navy / royal / gold) on top of bslib */
@font-face { font-family: Poppins; src: url(../fonts/Poppins-Light.ttf); font-weight: 300; font-display: swap; }
@font-face { font-family: Poppins; src: url(../fonts/Poppins-Regular.ttf); font-weight: 400; font-display: swap; }
@font-face { font-family: Poppins; src: url(../fonts/Poppins-Medium.ttf); font-weight: 500; font-display: swap; }
@font-face { font-family: Poppins; src: url(../fonts/Poppins-Bold.ttf); font-weight: 700; font-display: swap; }
:root {
  --midnight: #040914; --navy: #08142E; --navy2: #0E2145; --royal: #0A4DB8; --sky: #2E9BFF; --gold: #D4A440; --gold2: #F0D890;
  --ink: #13203A; --muted: #5B6B84; --line: #E1E7F0; --paper: #F5F7FB; --cardbg: #fff;
  --orbit: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1600 600' preserveAspectRatio='none'%3E%3Cg fill='none' stroke-width='1.3'%3E%3Cellipse cx='840' cy='330' rx='980' ry='230' transform='rotate(-10 840 330)' stroke='rgba(46,155,255,.22)'/%3E%3Cellipse cx='800' cy='310' rx='1180' ry='330' transform='rotate(-12 800 310)' stroke='rgba(212,164,64,.22)'/%3E%3Cellipse cx='760' cy='300' rx='1400' ry='430' transform='rotate(-8 760 300)' stroke='rgba(46,155,255,.12)'/%3E%3C/g%3E%3C/svg%3E");
}
html[data-mode="dark"] { --ink: #DCE4F2; --muted: #9DB0CC; --line: #1A2A4C; --paper: #081228; --cardbg: #0A1633;
  --bs-body-bg: #050C1E; --bs-body-color: #DCE4F2; --bs-border-color: #1A2A4C; --bs-secondary-color: #9DB0CC;
  --bs-tertiary-bg: #081228; --bs-secondary-bg: #081228; --bs-emphasis-color: #fff; }
html[data-mode="dark"] .form-control, html[data-mode="dark"] .form-select, html[data-mode="dark"] .selectize-input,
html[data-mode="dark"] .selectize-dropdown { background: #050C1E !important; color: #DCE4F2 !important; border-color: #1A2A4C !important; }
html[data-mode="dark"] .selectize-input input { color: #DCE4F2 !important; }
html[data-mode="dark"] .selectize-dropdown .active { background: #0E1F45 !important; }
html[data-mode="dark"] .item { color: #DCE4F2; }
body { font-family: Poppins, "Segoe UI", Arial, sans-serif; color: var(--ink); font-size: 14.5px; background: var(--bs-body-bg, #fff); }
a { color: var(--royal); } html[data-mode="dark"] a { color: #6FB3FF; }
h1, h2, h3, h4, h5 { font-weight: 700; }

/* ---------- top bar (NXW .nav) ---------- */
.navbar { position: sticky; top: 0; z-index: 1030; background: rgba(4,9,20,.95) !important; backdrop-filter: blur(8px);
  border-bottom: 1px solid rgba(212,164,64,.45); padding: 8px 0; }
.navbar .container-fluid { max-width: 100%; padding: 0 22px; }
.navbar-brand { padding: 0; margin-right: 18px; }
.navbar-brand .brand img { height: 37.3px; width: auto; display: block; }
.navbar .navbar-nav { flex: 1; gap: 2px; align-items: center; }
.navbar .nav-link { position: relative; color: #D5DEEC !important; font-weight: 500; font-size: 11.5px; letter-spacing: .6px;
  padding: 10px 12px !important; text-transform: uppercase; white-space: nowrap; transition: color .15s; }
.navbar .nav-link::after { content: ""; position: absolute; left: 12px; right: 12px; bottom: 4px; height: 2px; background: var(--gold);
  transform: scaleX(0); transition: transform .2s; }
.navbar .nav-link:hover { color: #fff !important; }
.navbar .nav-link:hover::after, .navbar .nav-link.active::after { transform: scaleX(1); }
.navbar .nav-link.active { color: var(--gold2) !important; }
.navbar .navbar-toggler { border-color: rgba(255,255,255,.3); }
.navbar .navbar-toggler-icon { filter: invert(1); }
html[data-mode="light"] .navbar { background: rgba(255,255,255,.96) !important; border-bottom-color: rgba(212,164,64,.6); box-shadow: 0 2px 14px rgba(11,26,58,.06); }
html[data-mode="light"] .navbar .nav-link { color: var(--navy) !important; }
html[data-mode="light"] .navbar .nav-link:hover { color: var(--royal) !important; }
html[data-mode="light"] .navbar .nav-link.active { color: var(--royal) !important; }
html[data-mode="light"] .navbar .navbar-toggler-icon { filter: none; }

/* ---------- options menu (NXW .opts) ---------- */
.opts { position: relative; margin-left: 10px; }
.obtn { display: flex; align-items: center; gap: 7px; height: 38px; padding: 0 12px 0 13px; border-radius: 8px; border: 1px solid rgba(255,255,255,.18);
  background: rgba(255,255,255,.07); color: #C8D4E8; cursor: pointer; }
.obtn:hover, .opts.open .obtn { border-color: var(--gold); color: var(--gold2); }
.obtn svg { width: 18px; height: 18px; } .olang { font-size: 11.5px; font-weight: 700; letter-spacing: .6px; }
.opanel { display: none; position: absolute; right: 0; top: calc(100% + 10px); width: 250px; background: #fff; color: var(--ink); border-radius: 14px;
  box-shadow: 0 18px 44px rgba(4,9,20,.35); padding: 14px 16px 6px; z-index: 1060; }
.opts.open .opanel { display: block; }
.opanel h5 { margin: 0 0 10px; font-size: 11px; letter-spacing: 1.8px; text-transform: uppercase; color: var(--gold); }
.orow { margin-bottom: 12px; } .orow > span { display: block; font-size: 12.5px; font-weight: 500; color: var(--muted); margin-bottom: 5px; }
.seg { display: flex; background: var(--paper); border: 1px solid var(--line); border-radius: 8px; padding: 3px; }
.seg button { flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 6px; border: 0; background: transparent; color: var(--ink);
  font: inherit; font-size: 13px; font-weight: 500; padding: 6px 8px; border-radius: 8px; cursor: pointer; }
.seg button svg { width: 14px; height: 14px; }
.seg button.on { background: var(--gold); color: var(--navy); font-weight: 700; }
html[data-mode="dark"] .opanel { background: #0A1633; }
html[data-mode="light"] .obtn { background: #F1F4FA; color: var(--navy); border-color: var(--line); }
html[data-mode="light"] .seg button.on { background: var(--navy); color: var(--gold2); }

/* ---------- sidebar, cards, value boxes, buttons ---------- */
.bslib-sidebar-layout > .sidebar { background: var(--paper) !important; border-right: 1px solid var(--line) !important; }
.card { background: var(--cardbg); border: 1px solid var(--line); border-radius: 18px; box-shadow: 0 2px 10px rgba(11,26,58,.04); overflow: visible; }
html[data-mode="dark"] .card { box-shadow: 0 2px 14px rgba(0,0,0,.25); }
.card-header { background: transparent; border-bottom: 1px solid var(--line); font-weight: 700; color: var(--navy); font-size: 15px; padding: 14px 18px;
  position: relative; border-radius: 18px 18px 0 0 !important; }
.card-header::before { content: ""; position: absolute; left: 18px; bottom: -1px; width: 34px; height: 2px; background: var(--gold); }
html[data-mode="dark"] .card-header { color: #fff; }
.card-body .shiny-input-container { margin-bottom: 0.5rem; }
.bslib-value-box.ccpi-vb { border: 0; border-radius: 18px; color: #fff;
  background: var(--orbit) center / cover no-repeat, linear-gradient(135deg, var(--navy) 0%, #0E2556 60%, var(--royal) 100%) !important; }
.bslib-value-box.ccpi-vb .value-box-title { color: var(--gold2); font-size: 0.8rem; letter-spacing: 1.2px; text-transform: uppercase; font-weight: 700; }
.bslib-value-box.ccpi-vb .value-box-value { color: #fff; font-size: 1.5rem !important; font-weight: 700; }
.bslib-value-box.ccpi-vb.gold { background: var(--orbit) center / cover no-repeat, linear-gradient(135deg, #7A5A16 0%, var(--gold) 100%) !important; }
.bslib-value-box.ccpi-vb.gold .value-box-title { color: var(--navy); } .bslib-value-box.ccpi-vb.gold .value-box-value { color: var(--navy); }
.bslib-value-box.ccpi-vb p, .bslib-value-box.ccpi-vb .small { color: #C8D4E8; }
.btn { border-radius: 8px; font-weight: 600; letter-spacing: .3px; }
.btn-gold, .btn.gold { background: var(--gold); color: var(--navy); border: 0; box-shadow: 0 8px 22px rgba(212,164,64,.35); }
.btn-gold:hover, .btn.gold:hover { background: var(--gold2); color: var(--navy); }
.btn.ghost { background: transparent; color: #fff; border: 1px solid rgba(255,255,255,.55); }
.btn.ghost:hover { border-color: var(--gold); color: var(--gold2); }
html[data-mode="light"] .btn.ghost { color: var(--navy); border-color: rgba(11,26,58,.45); }
.table { --bs-table-bg: transparent; color: var(--ink); }
html[data-mode="dark"] .table-striped > tbody > tr:nth-of-type(odd) > * { --bs-table-bg-type: #0D1D40; color: var(--ink); }
.text-muted { color: var(--muted) !important; }

/* ---------- home page (NXW hero, sections, cards) ---------- */
html.on-home .bslib-sidebar-layout > .sidebar, html.on-home .bslib-sidebar-layout > .collapse-toggle { display: none !important; }
html.on-home .bslib-sidebar-layout { grid-template-columns: 0 1fr !important; --_sidebar-width: 0px !important; }
html.on-home .bslib-sidebar-layout > .main { padding: 0 !important; grid-column: 1 / 3 !important; }
.band { color: #fff; background: var(--orbit) center / cover no-repeat, radial-gradient(1100px 500px at 50% 40%, #0F2A5E 0%, var(--navy) 55%, var(--midnight) 100%); }
html[data-mode="light"] .band { color: var(--navy); background: var(--orbit) center / cover no-repeat, radial-gradient(1100px 500px at 50% 40%, #FFFFFF 0%, #EEF3FB 50%, #DCE7F7 100%); }
.hero { padding: 80px 22px 92px; text-align: center; }
.hero img.logo { width: 330px; max-width: 80%; display: block; margin: 0 auto 26px; filter: drop-shadow(0 10px 30px rgba(0,0,0,.45)); }
.hero h1 { font-weight: 700; font-size: 44px; line-height: 1.15; margin: 0 0 14px; letter-spacing: -.5px; }
.hero h1 b { color: var(--gold); }
.hero p { font-weight: 300; font-size: 18px; max-width: 760px; margin: 0 auto 30px; color: #D5DEEC; }
html[data-mode="light"] .hero p { color: #44546E; } html[data-mode="light"] .hero h1 b { color: #B07F1F; }
.hero .btn { padding: 12px 24px; margin: 0 5px; }
.sec { padding: 64px 22px; } .sec .wrap { max-width: 1200px; margin: 0 auto; }
.kick { font-size: 12px; letter-spacing: 2.4px; text-transform: uppercase; color: var(--gold); font-weight: 700; }
.sec h2 { font-size: 30px; font-weight: 700; margin: 6px 0 8px; color: var(--navy); line-height: 1.25; }
.sec h2::after { content: ""; display: block; width: 56px; height: 3px; background: var(--gold); margin-top: 12px; border-radius: 2px; }
html[data-mode="dark"] .sec h2 { color: #fff; }
.sec .lead { color: var(--muted); max-width: 760px; font-size: 15.5px; }
.sec.alt { background: var(--paper); }
.hgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 22px; margin-top: 28px; }
.hcard { position: relative; display: flex; flex-direction: column; background: var(--cardbg); border: 1px solid var(--line); border-radius: 18px; padding: 24px;
  box-shadow: 0 2px 10px rgba(11,26,58,.04); transition: transform .2s, box-shadow .2s; text-decoration: none; color: inherit; cursor: pointer; overflow: hidden; }
.hcard::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px; background: linear-gradient(90deg, var(--royal), var(--sky), var(--gold)); opacity: 0; transition: opacity .2s; }
.hcard:hover { transform: translateY(-4px); box-shadow: 0 16px 36px rgba(11,26,58,.12); } .hcard:hover::before { opacity: 1; }
.hcard .ic { width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; font-size: 20px; color: #fff;
  background: linear-gradient(135deg, var(--royal), var(--sky)); }
.hcard h3 { margin: 14px 0 8px; font-size: 18px; font-weight: 700; color: var(--navy); }
html[data-mode="dark"] .hcard h3 { color: #fff; }
.hcard p { margin: 0 0 12px; color: var(--muted); font-size: 14px; }
.hcard .more { margin-top: auto; font-weight: 600; font-size: 13.5px; color: var(--royal); }
html[data-mode="dark"] .hcard .more { color: #6FB3FF; }
.stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; padding: 40px 22px; max-width: 1200px; margin: 0 auto; text-align: center; }
.stats b { display: block; font-size: 34px; color: var(--gold); } .stats span { color: #C8D4E8; font-size: 14px; }
html[data-mode="light"] .stats span { color: #44546E; }
@media (max-width: 800px) { .stats { grid-template-columns: repeat(2, 1fr); } .hero h1 { font-size: 32px; } }

/* ---------- footer (NXW footer) ---------- */
.ccpi-footer { background: var(--midnight); color: #AFC0DA; border-top: 1px solid rgba(212,164,64,.35); margin-top: 30px; }
.ccpi-footer .in { max-width: 1200px; margin: 0 auto; padding: 40px 22px 24px; display: grid; grid-template-columns: 1.6fr 1fr 1fr; gap: 30px; font-size: 14px; }
.ccpi-footer .flogo { width: 170px; }
.ccpi-footer p { margin: 12px 0 0; }
.ccpi-footer h4 { color: #fff; margin: 0 0 12px; font-size: 13px; letter-spacing: 2px; text-transform: uppercase; }
.ccpi-footer a { color: #AFC0DA !important; text-decoration: none; display: block; margin: 5px 0; } .ccpi-footer a:hover { color: var(--gold2) !important; }
.ccpi-footer small { display: block; max-width: 1200px; margin: 0 auto; padding: 16px 22px 26px; color: #7F92B1; border-top: 1px solid rgba(255,255,255,.08); font-size: 12.5px; }
html[data-mode="light"] .ccpi-footer { background: #EEF2F9; color: #4A5A75; } html[data-mode="light"] .ccpi-footer h4 { color: var(--navy); }
html[data-mode="light"] .ccpi-footer a { color: #4A5A75 !important; } html[data-mode="light"] .ccpi-footer small { color: #6B7A93; border-top-color: var(--line); }
@media (max-width: 800px) { .ccpi-footer .in { grid-template-columns: 1fr; } }

/* home hero: six platform buttons in one compact row (All, Equity, Commodity, Forex, Crypto, Education);
   icon on the left, name beside it, one colour each */
.assets { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 10px; max-width: 1120px; margin: 14px auto 0; text-align: left; }
.abox { --c: var(--gold); --c2: var(--gold2); position: relative; display: flex; align-items: center; gap: 10px; min-width: 0; text-decoration: none; color: #fff !important;
  min-height: 62px; padding: 10px 12px; border-radius: 12px; overflow: hidden; cursor: pointer; border: 1px solid color-mix(in srgb, var(--c) 50%, transparent);
  background: linear-gradient(135deg, color-mix(in srgb, var(--c) 26%, transparent) 0%, rgba(4,9,20,.72) 75%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06), 0 6px 18px rgba(0,0,0,.22); transition: transform .2s, box-shadow .2s, border-color .2s; }
.abox::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 2px; background: linear-gradient(90deg, var(--c), var(--c2)); }
.abox::after { content: ""; position: absolute; right: -30px; top: -30px; width: 90px; height: 90px; border-radius: 50%;
  background: radial-gradient(circle, color-mix(in srgb, var(--c) 35%, transparent) 0%, transparent 70%); opacity: .55; transition: opacity .2s; pointer-events: none; }
.abox:hover { transform: translateY(-3px); border-color: var(--c); box-shadow: 0 12px 28px color-mix(in srgb, var(--c) 35%, transparent); }
.abox:hover::after { opacity: 1; }
.abox .aic { flex: 0 0 auto; width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center; color: #fff;
  background: linear-gradient(135deg, var(--c), var(--c2)); box-shadow: 0 5px 14px color-mix(in srgb, var(--c) 45%, transparent); }
.abox .aic svg { width: 19px; height: 19px; }
.abox .atx { min-width: 0; }
.abox .atx b { display: block; font-size: 13px; line-height: 1.2; letter-spacing: .9px; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.abox .aar { display: none; }
.abox.all { --c: #D4A440; --c2: #F0D890; } .abox.equity { --c: #2E6BFF; --c2: #7FB2FF; } .abox.commodity { --c: #E0702E; --c2: #FFB27A; }
.abox.forex { --c: #10B981; --c2: #6EE7B7; } .abox.crypto { --c: #8B5CF6; --c2: #C4B5FD; } .abox.education { --c: #E11D74; --c2: #F9A8D4; }
.abox.soon { opacity: .8; } .abox.soon:hover { transform: none; box-shadow: none; }
.abox.soon .atx::after { content: "COMING SOON"; display: block; margin-top: 2px; font-size: 8.5px; font-weight: 700; letter-spacing: .1em; color: var(--muted); }
html[data-mode="light"] .abox { color: var(--navy) !important; background: linear-gradient(135deg, color-mix(in srgb, var(--c) 14%, #fff) 0%, #fff 75%);
  box-shadow: 0 3px 12px rgba(11,26,58,.08); }
html[data-mode="light"] .abox .atx b { color: var(--navy); }
@media (max-width: 1200px) { .assets { grid-template-columns: repeat(3, minmax(0, 1fr)); max-width: 720px; } }
@media (max-width: 600px) { .assets { grid-template-columns: repeat(2, minmax(0, 1fr)); } .abox { padding: 9px 10px; } .abox .atx b { font-size: 12px; letter-spacing: .5px; } }

/* platform badge beside the logo */
.brandwrap { display: flex; align-items: center; gap: 14px; }
.plat { position: relative; }
.plat-badge { --c: #D4A440; display: inline-flex; align-items: center; gap: 6px; font: inherit; font-size: 13px; font-weight: 700; letter-spacing: .12em;
  padding: 7px 12px; border-radius: 8px; cursor: pointer; color: #fff; border: 1px solid var(--c);
  background: color-mix(in srgb, var(--c) 28%, transparent); }
.plat-badge::after { content: ""; border: 4px solid transparent; border-top-color: currentColor; margin-top: 4px; }
.plat-badge.equity { --c: #2E6BFF; } .plat-badge.commodity { --c: #E0702E; } .plat-badge.forex { --c: #10B981; } .plat-badge.crypto { --c: #8B5CF6; }
html[data-mode="light"] .plat-badge { color: var(--navy); background: color-mix(in srgb, var(--c) 14%, #fff); }
.plat-menu { display: none; position: absolute; left: 0; top: calc(100% + 18px); min-width: 220px; z-index: 1060; background: #121a4c; border: 1px solid rgba(241,205,120,.35);
  border-radius: 12px; padding: 8px; box-shadow: 0 18px 44px rgba(4,9,20,.35); }
.plat.open .plat-menu { display: block; }
.plat-menu a { display: flex; align-items: center; gap: 10px; color: #fff !important; text-decoration: none; border-radius: 8px; padding: 10px 14px; font-size: 13.5px;
  font-weight: 700; letter-spacing: .08em; cursor: pointer; }
.plat-menu a svg { width: 18px; height: 18px; }
.plat-menu a.all svg { color: #D4A440; } .plat-menu a.equity svg { color: #7FB2FF; } .plat-menu a.commodity svg { color: #FFB27A; }
.plat-menu a.forex svg { color: #6EE7B7; } .plat-menu a.crypto svg { color: #C4B5FD; }
.plat-menu a:hover { background: rgba(241,205,120,.12); color: #f1cd78 !important; } .plat-menu a.cur { background: #e0a43a; color: #0d1450 !important; }
.plat-menu a.cur svg { color: #0d1450; }
html[data-mode="light"] .plat-menu { background: #fff; border-color: #C9D3E3; } html[data-mode="light"] .plat-menu a { color: var(--navy) !important; }

/* ---------- search and contact icons (NXW .sbox, .cbtn) ---------- */
.tools { display: flex; align-items: center; gap: 10px; }
.sbox { position: relative; display: flex; align-items: center; justify-content: center; width: 38px; height: 38px; padding: 0; cursor: pointer;
  background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.18); border-radius: 8px; transition: width .25s, padding .25s; }
.sbox.open { cursor: auto; width: 240px; padding: 0 12px; justify-content: flex-start; border-color: var(--gold); background: rgba(255,255,255,.12); }
.sbox svg { width: 16px; height: 16px; color: #C8D4E8; flex: 0 0 16px; } .sbox:hover svg { color: var(--gold2); }
.sbox input { width: 0; padding: 8px 0; background: transparent; border: 0; outline: none; color: #fff; font: inherit; font-size: 13px; }
.sbox.open input { width: 100%; padding: 8px; } .sbox input::placeholder { color: #8FA2C0; }
.sres { display: none; position: absolute; right: 0; top: calc(100% + 10px); width: 380px; max-height: 440px; overflow: auto; background: #fff; color: var(--ink);
  border-radius: 14px; box-shadow: 0 18px 44px rgba(4,9,20,.35); padding: 6px; z-index: 1060; }
.sres.on { display: block; }
.sres a { display: block; padding: 9px 11px; border-radius: 9px; text-decoration: none; color: var(--ink) !important; cursor: pointer; }
.sres a:hover, .sres a.sel { background: var(--paper); }
.sres a b { display: block; font-size: 14px; } .sres a span { display: block; font-size: 12.5px; color: var(--muted); }
.sres a em { font-style: normal; font-size: 10.5px; font-weight: 700; letter-spacing: 1.2px; color: var(--gold); text-transform: uppercase; }
.sres mark { background: rgba(212,164,64,.35); color: inherit; border-radius: 3px; padding: 0; }
.sres .none { padding: 10px; color: var(--muted); font-size: 13px; }
.cbtn { display: flex; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: 8px; border: 1px solid rgba(255,255,255,.18);
  background: rgba(255,255,255,.07); color: #C8D4E8; cursor: pointer; padding: 0; }
.cbtn:hover { border-color: var(--gold); color: var(--gold2); } .cbtn svg { width: 16.2px; height: 16.2px; }
html[data-mode="dark"] .sres { background: #0A1633; }
html[data-mode="light"] .sbox, html[data-mode="light"] .cbtn { background: #F1F4FA; border-color: var(--line); color: var(--navy); }
html[data-mode="light"] .sbox svg { color: #6B7A93; } html[data-mode="light"] .sbox input { color: var(--ink); }
html[data-mode="light"] .sbox:hover svg, html[data-mode="light"] .cbtn:hover { color: var(--royal); }
.modal-content { border-radius: 18px; } .modal-title { font-weight: 700; }

/* ---------- top bar, final NXW values (full width, menu on the left, icons on the right, 82px) ---------- */
.navbar { background: #0a1238 !important; border-bottom: 1px solid #c9a227; backdrop-filter: none; padding: 0; min-height: 82px; }
.navbar .container-fluid { padding: 0 28px; gap: 22px; min-height: 82px; align-items: stretch; flex-wrap: nowrap; }
.navbar-brand { display: flex; align-items: center; align-self: center; margin-right: 0; } .navbar-brand .brand img { height: 35.6px; }
.navbar .navbar-collapse { align-items: stretch; }
.navbar .navbar-nav { gap: 0; align-items: stretch; }
.navbar .nav-item { display: flex; align-items: stretch; }
.navbar .nav-link { display: flex; align-items: center; height: 82px; margin: 0 !important; padding: 0 11px !important; font-size: 11.8px; font-weight: 700; letter-spacing: .08em;
  color: #e8ebf7 !important; text-transform: uppercase; border-bottom: 2px solid transparent; }
.navbar .nav-link:hover, .navbar .nav-link.active { color: #e9b54a !important; }
.navbar .nav-link::after { display: none; content: ""; position: absolute; left: 11px; right: 11px; top: calc(50% + 13px); bottom: auto; height: 2px;
  border-radius: 2px; background: #e9b54a; transform: none; }
.navbar .nav-link.active::after { display: block; }
.navbar .nav-item:has(.tools), .navbar .nav-item:has(.opts) { align-items: center; }
.tools { gap: 12px; } .opts { margin-left: 12px; }
.sbox, .obtn, .cbtn { width: 46px; height: 46px; flex: 0 0 46px; border-radius: 8px; border-color: rgba(255,255,255,.3) !important; color: #fff; }
.obtn { padding: 0; justify-content: center; } .olang { display: none; }
.sbox.open { width: 260px; flex-basis: 260px; }
.sbox:hover, .obtn:hover, .cbtn:hover, .opts.open .obtn, .sbox.open { border-color: #e9b54a !important; color: #e9b54a; } .sbox:hover svg { color: #e9b54a; }
.sbox svg { width: 19px; height: 19px; flex-basis: 19px; color: #fff; } .cbtn svg, .obtn svg { width: 18.9px; height: 18.9px; }
.opanel, .sres { top: calc(100% + 18px); }
html[data-mode="dark"] .opanel, html[data-mode="dark"] .sres { background: #121a4c; border: 1px solid rgba(241,205,120,.35); }
html[data-mode="light"] .navbar { background: #fff !important; border-bottom-color: #c9a227; box-shadow: none; }
html[data-mode="light"] .navbar .nav-link { color: var(--navy) !important; }
html[data-mode="light"] .navbar .nav-link:hover, html[data-mode="light"] .navbar .nav-link.active { color: #b8862a !important; }
html[data-mode="light"] .navbar .nav-link::after { background: #c9a227; }
html[data-mode="light"] .sbox, html[data-mode="light"] .obtn, html[data-mode="light"] .cbtn { border-color: #C9D3E3 !important; color: var(--navy); background: #fff; }
html[data-mode="light"] .sbox svg { color: var(--navy); }
html[data-mode="light"] .sbox:hover, html[data-mode="light"] .obtn:hover, html[data-mode="light"] .cbtn:hover, html[data-mode="light"] .opts.open .obtn { border-color: #c9a227 !important; color: #b8862a; }
@media (min-width: 992px) and (max-width: 1280px) {
  .navbar .container-fluid { padding: 0 14px; gap: 12px; } .navbar-brand .brand img { height: 30.8px; }
  .navbar .nav-link { padding: 0 7px !important; font-size: 10.5px; letter-spacing: .03em; }
  .navbar .nav-link::after { left: 7px; right: 7px; }
  .tools { gap: 7px; } .sbox, .obtn, .cbtn { width: 40px; height: 40px; flex-basis: 40px; }
}
@media (max-width: 991px) {
  .navbar .container-fluid { flex-wrap: wrap; padding: 14px 20px; }
  .navbar .navbar-nav { align-items: flex-start; } .navbar .nav-link { padding: 10px 6px !important; } .navbar .nav-link::after { display: none !important; }
}
.navbar .nav-underline .nav-link, .navbar .nav-underline .nav-link.active { border-bottom-color: transparent !important; font-weight: 700; }
.navbar .container-fluid > .navbar-brand, .navbar .navbar-brand { align-self: center !important; margin-top: auto; margin-bottom: auto; padding: 0; height: auto; }
.navbar .navbar-header { display: flex; align-items: center; align-self: stretch; }

/* ---------- Markets overview and details, Resources pages (as the NXW monitor) ---------- */
html.no-side .bslib-sidebar-layout > .sidebar, html.no-side .bslib-sidebar-layout > .collapse-toggle { display: none !important; }
html.no-side .bslib-sidebar-layout { grid-template-columns: 0 1fr !important; --_sidebar-width: 0px !important; }
html.no-side .bslib-sidebar-layout > .main { grid-column: 1 / 3 !important; }
html.no-side:not(.on-home) .bslib-sidebar-layout > .main { padding: 34px clamp(16px, 4vw, 56px) 40px !important; }
.mk-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 20px; flex-wrap: wrap; margin: 0 0 22px; }
.mk-kick { color: var(--gold); font-size: 12.5px; font-weight: 700; letter-spacing: .22em; text-transform: uppercase; }
.mk-title { font-family: Georgia, "Times New Roman", serif; font-style: italic; font-weight: 700; font-size: 46px; line-height: 1.1;
  margin: 6px 0 0; color: #fff; padding-bottom: 10px; position: relative; }
.mk-title::after { content: ""; position: absolute; left: 0; bottom: 0; width: 64px; height: 3px; border-radius: 2px; background: linear-gradient(90deg, var(--gold), var(--gold2)); }
.mk-upd { display: inline-flex; align-items: center; gap: 10px; padding: 9px 16px; border-radius: 10px; background: rgba(46,155,255,.12);
  border: 1px solid rgba(46,155,255,.45); color: #9FD0FF; font-size: 12px; letter-spacing: .14em; font-weight: 600; }
.mk-upd b { color: #fff; letter-spacing: .04em; font-size: 14px; }
.mk-meta { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.mk-meta span { font-size: 12px; padding: 4px 11px; border-radius: 20px; border: 1px solid #213760; color: #C9D6EC; letter-spacing: .04em; }
.mk-back { display: inline-block; margin-bottom: 14px; color: var(--sky) !important; font-weight: 600; text-decoration: none; letter-spacing: .04em; }
.mk-back:hover { color: var(--gold2) !important; }
.mk-card { background: #0A1633; border: 1px solid #1A2A4C; border-radius: 14px; padding: 20px 22px; margin-bottom: 18px; box-shadow: 0 10px 30px rgba(0,0,0,.18); }
.mk-card h3 { font-size: 17px; font-weight: 700; letter-spacing: .08em; color: #fff; margin: 0 0 4px; }
.mk-ctop { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; flex-wrap: wrap; margin-bottom: 12px; }
.mk-ctop p { margin: 0; color: var(--muted); font-size: 13px; }
.mk-act { display: flex; gap: 8px; align-items: flex-start; flex-wrap: wrap; } .mk-act .form-group { margin: 0; }
.mk-act .btn { height: 38px; display: inline-flex; align-items: center; gap: 6px; }
.mk-ctop .shiny-options-group { display: flex; gap: 4px; } .mk-ctop .form-group { margin: 0; }
.mk-ctop .radio-inline { margin: 0 !important; padding: 0; } .mk-ctop .radio-inline input { display: none; }
.mk-ctop .radio-inline span { display: inline-block; padding: 5px 13px; border-radius: 8px; border: 1px solid #213760; font-size: 12.5px; font-weight: 600; cursor: pointer; color: #C9D6EC; }
.mk-ctop .radio-inline input:checked + span { background: var(--gold); border-color: var(--gold); color: #050C1E; }
.mk-pill { font-size: 12px; font-weight: 600; letter-spacing: .08em; padding: 6px 12px; border-radius: 20px; background: rgba(212,164,64,.14); color: var(--gold2); border: 1px solid rgba(212,164,64,.4); text-transform: uppercase; }

/* DataTables in NXW colours */
table.dataTable.mk-dt { color: var(--ink); border-collapse: separate !important; border-spacing: 0; width: 100% !important; }
table.dataTable.mk-dt thead th { background: #0E2145; color: var(--gold2); font-size: 13px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  border-bottom: 1px solid #213760 !important; padding: 11px 10px !important; white-space: nowrap; }
table.dataTable.mk-dt thead tr:first-child th:first-child { border-top-left-radius: 10px; } table.dataTable.mk-dt thead tr:first-child th:last-child { border-top-right-radius: 10px; }
table.dataTable.mk-dt thead td { background: #071026; padding: 6px 6px !important; border-bottom: 1px solid #1A2A4C !important; }
table.dataTable.mk-dt thead td input, table.dataTable.mk-dt thead td select { width: 100%; background: #050C1E; color: #DCE4F2; border: 1px solid #213760; border-radius: 6px; font-size: 12px; padding: 4px 7px; }
table.dataTable.mk-dt thead td .form-group { margin: 0; }
table.dataTable.mk-dt tbody td { border-top: 1px solid #1A2E57 !important; padding: 9px 10px !important; font-size: 13.5px; vertical-align: middle; background: transparent !important; box-shadow: none !important; }
table.dataTable.mk-dt.hover tbody tr:hover td { background: rgba(46,155,255,.07) !important; }
table.dataTable.mk-dt tbody tr { background: transparent !important; }
.mk-dt .up { color: #34D399; font-weight: 600; } .mk-dt .dn { color: #F87171; font-weight: 600; }
.chip { display: inline-block; min-width: 76px; text-align: center; padding: 3px 9px; border-radius: 7px; font-size: 12.5px; font-weight: 700; font-variant-numeric: tabular-nums; }
.chip.up { background: rgba(16,185,129,.16); color: #34D399 !important; border: 1px solid rgba(16,185,129,.4); }
.chip.dn { background: rgba(239,68,68,.14); color: #F87171 !important; border: 1px solid rgba(239,68,68,.4); }
.mk-dt td.dt-right, .mk-dt td.dt-center { font-variant-numeric: tabular-nums; }
.mk-name { background: transparent; border: 1px solid rgba(46,155,255,.6); color: #9FD0FF; border-radius: 20px; padding: 4px 13px; font-size: 12.5px;
  font-weight: 600; letter-spacing: .04em; cursor: pointer; white-space: nowrap; transition: all .15s; }
.mk-name:hover { background: var(--sky); color: #fff; border-color: var(--sky); }
.dataTables_wrapper .mk-tools { display: flex; justify-content: flex-end; margin-bottom: 10px; }
.dataTables_wrapper .dataTables_filter input { background-color: #050C1E !important; color: #DCE4F2; border: 1px solid #213760 !important; border-radius: 9px !important; padding: 7px 12px 7px 34px !important; width: 260px !important; margin: 0 !important; background-image: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='10' cy='10' r='6' fill='none' stroke='%239DB0CC' stroke-width='2.4'/%3E%3Cpath d='M15 15l6 6' stroke='%239DB0CC' stroke-width='2.4' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat !important; background-size: 16px !important; background-position: 11px center !important; }
.dataTables_wrapper .dataTables_filter input:focus { outline: none; border-color: var(--gold) !important; }
.dataTables_wrapper .mk-foot { display: flex; justify-content: space-between; align-items: center; margin-top: 10px; color: var(--muted); font-size: 12.5px; }
.dataTables_wrapper .dataTables_info { color: var(--muted) !important; padding: 0 !important; }
.dataTables_wrapper .dataTables_paginate .paginate_button { color: #C9D6EC !important; border-radius: 6px !important; border: 1px solid transparent !important; }
.dataTables_wrapper .dataTables_paginate .paginate_button.current { background: var(--gold) !important; color: #050C1E !important; border-color: var(--gold) !important; }
.dataTables_wrapper .dataTables_paginate .paginate_button:hover { background: #0E1F45 !important; color: #fff !important; }
.dataTables_wrapper .noUi-connect { background: var(--gold); }

.mk-notice { border: 1px solid rgba(212,164,64,.35); border-left: 4px solid var(--gold); background: rgba(212,164,64,.07); border-radius: 10px;
  padding: 14px 18px; margin: 4px 0 24px; font-size: 13px; color: #C9D6EC; line-height: 1.6; }
.mk-notice > b { display: block; color: var(--gold); letter-spacing: .2em; font-size: 11.5px; margin-bottom: 6px; }
.mk-notice p { margin: 0 0 6px; } .mk-notice ul { margin: 0 0 6px; padding-left: 18px; }

.mk-kpis { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; margin-bottom: 18px; }
.mk-kpi { background: #0A1633; border: 1px solid #1A2A4C; border-radius: 12px; padding: 12px 15px; }
.mk-kpi span { display: block; font-size: 11px; letter-spacing: .14em; color: var(--muted); font-weight: 600; }
.mk-kpi b { display: block; font-size: 19px; margin-top: 4px; color: #fff; font-variant-numeric: tabular-nums; }
.mk-kpi.up b { color: #34D399; } .mk-kpi.dn b { color: #F87171; } .mk-kpi.big { border-color: rgba(212,164,64,.5); } .mk-kpi.big b { color: var(--gold2); }
.mk-tbl { width: 100%; font-size: 13.5px; margin-top: 10px; font-variant-numeric: tabular-nums; }
.mk-tbl th { color: var(--gold2); font-size: 11.5px; letter-spacing: .1em; padding: 7px 6px; border-bottom: 1px solid #213760; }
.mk-tbl td { padding: 7px 6px; border-top: 1px solid #1A2E57; }
.mk-tbl th:not(:first-child), .mk-tbl td:not(:first-child) { text-align: right; }

.rs-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 14px; margin-bottom: 18px; }
.rs-card { background: #0A1633; border: 1px solid #1A2A4C; border-radius: 14px; padding: 16px 18px; display: flex; flex-direction: column; gap: 8px; transition: border-color .15s, transform .15s; }
.rs-card:hover { border-color: var(--gold); transform: translateY(-2px); }
.rs-top { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.rs-top b { color: #fff; letter-spacing: .05em; font-size: 14.5px; }
.rs-grp { font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; padding: 3px 9px; border-radius: 20px; font-weight: 700; white-space: nowrap; }
.rs-grp.marketdata { background: rgba(46,155,255,.15); color: #9FD0FF; } .rs-grp.trading { background: rgba(16,185,129,.15); color: #6EE7B7; }
.rs-grp.reference { background: rgba(139,92,246,.18); color: #C4B5FD; }
.rs-card p { margin: 0; font-size: 13px; color: #C9D6EC; line-height: 1.5; }
.rs-card small { color: var(--muted); font-size: 11.5px; }
.rs-num { display: flex; flex-wrap: wrap; gap: 12px; font-size: 12.5px; color: var(--muted); } .rs-num b { color: var(--gold2); }
.rs-num code, .rs-rel code, .mk-ctop code { color: #9FD0FF; background: rgba(46,155,255,.1); padding: 1px 6px; border-radius: 5px; font-size: 12px; }
.rs-links { display: flex; gap: 16px; margin-top: auto; padding-top: 4px; }
.rs-links a { color: var(--sky); font-weight: 600; font-size: 13px; text-decoration: none; } .rs-links a:hover { color: var(--gold2); }
.rs-rel div { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 6px 0; } .rs-rel span { color: var(--muted); }

/* Resources dropdown, as the NXW sub menus */
.navbar .dropdown-menu { background: #121a4c; border: 1px solid #c9a227; border-radius: 10px; padding: 8px; min-width: 210px; box-shadow: 0 16px 40px rgba(0,0,0,.4); margin-top: -10px !important; }
.navbar .dropdown-item { color: #e8ebf7 !important; font-size: 13px; font-weight: 600; letter-spacing: .06em; padding: 9px 14px; border-radius: 7px; background: transparent; }
.navbar .dropdown-item:hover, .navbar .dropdown-item:focus { background: rgba(241,205,120,.12); color: #f1cd78 !important; }
.navbar .dropdown-item.active { background: rgba(241,205,120,.12) !important; color: #e0a43a !important; }
.navbar .dropdown-toggle::after { border-top-color: currentColor; vertical-align: middle; margin-left: 6px; }
.navbar .nav-item.dropdown .nav-link.dropdown-toggle::after { display: inline-block !important; position: static; background: none; height: auto; width: auto; transform: none; border-top: .3em solid; border-right: .3em solid transparent; border-left: .3em solid transparent; border-bottom: 0; }
.navbar .nav-item.dropdown:has(.dropdown-item.active) > .nav-link { color: #e9b54a !important; }

/* light mode */
html[data-mode="light"] .mk-title, html[data-mode="light"] .mk-card h3, html[data-mode="light"] .rs-top b { color: var(--navy); }
html[data-mode="light"] .mk-card, html[data-mode="light"] .mk-kpi, html[data-mode="light"] .rs-card { background: #fff; border-color: #DCE3EE; box-shadow: 0 8px 24px rgba(11,26,58,.06); }
html[data-mode="light"] .mk-kpi b { color: var(--navy); } html[data-mode="light"] .mk-kpi.big b { color: #B07F1F; }
html[data-mode="light"] .mk-kpi.up b, html[data-mode="light"] .mk-dt .up { color: #059669; } html[data-mode="light"] .mk-kpi.dn b, html[data-mode="light"] .mk-dt .dn { color: #DC2626; }
html[data-mode="light"] .chip.up { color: #047857 !important; background: #E7F8F0; } html[data-mode="light"] .chip.dn { color: #B91C1C !important; background: #FDECEC; }
html[data-mode="light"] .mk-upd { background: #EAF3FF; color: var(--royal); border-color: #B9D6FA; } html[data-mode="light"] .mk-upd b { color: var(--navy); }
html[data-mode="light"] .mk-meta span { color: var(--navy); border-color: #C9D4E6; }
html[data-mode="light"] table.dataTable.mk-dt thead th { background: #08142E; color: #F0D890; }
html[data-mode="light"] table.dataTable.mk-dt thead td { background: #F3F6FB; border-bottom-color: #DCE3EE !important; }
html[data-mode="light"] table.dataTable.mk-dt thead td input, html[data-mode="light"] table.dataTable.mk-dt thead td select,
html[data-mode="light"] .dataTables_wrapper .dataTables_filter input { background-color: #fff !important; color: var(--navy); border-color: #C9D4E6 !important; }
html[data-mode="light"] table.dataTable.mk-dt tbody td, html[data-mode="light"] .mk-tbl td { border-top-color: #E6EBF3 !important; }
html[data-mode="light"] .mk-tbl th { color: #8A6418; border-bottom-color: #C9D4E6; }
html[data-mode="light"] .mk-name { color: var(--royal); border-color: rgba(10,77,184,.5); } html[data-mode="light"] .mk-name:hover { background: var(--royal); color: #fff; }
html[data-mode="light"] .mk-notice, html[data-mode="light"] .rs-card p { color: #44546E; } html[data-mode="light"] .mk-notice { background: #FFF9EC; }
html[data-mode="light"] .mk-ctop .radio-inline span { color: var(--navy); border-color: #C9D4E6; }
html[data-mode="light"] .dataTables_wrapper .dataTables_paginate .paginate_button { color: var(--navy) !important; }
@media (max-width: 700px) { .mk-title { font-size: 34px; } .dataTables_wrapper .dataTables_filter input { width: 100%; } .mk-card { padding: 14px; overflow-x: auto; } }

.dataTables_wrapper .dataTables_filter input { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='10' cy='10' r='6' fill='none' stroke='%239DB0CC' stroke-width='2.4'/%3E%3Cpath d='M15 15l6 6' stroke='%239DB0CC' stroke-width='2.4' stroke-linecap='round'/%3E%3C/svg%3E") !important; }
.mk-act .btn-gold, .mk-act .btn-gold:hover { color: #050C1E !important; }
@media (min-width: 1200px) { .mk-kpis { grid-template-columns: repeat(7, 1fr); } }
.mk-ctop .shiny-options-group { gap: 6px; } .mk-ctop .radio-inline + .radio-inline { margin-left: 0 !important; }

/* Markets: quick platform buttons under the title */
.mk-quick { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
.mk-quick a { --c: #D4A440; --c2: #F0D890; display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px 8px 10px; border-radius: 12px;
  text-decoration: none; color: #E8EBF7 !important; font-size: 12.5px; font-weight: 700; letter-spacing: .1em;
  border: 1px solid color-mix(in srgb, var(--c) 45%, transparent); background: color-mix(in srgb, var(--c) 10%, rgba(4,9,20,.5));
  transition: transform .15s, background .15s, border-color .15s, box-shadow .15s; }
.mk-quick a svg { width: 18px; height: 18px; padding: 4px; box-sizing: content-box; border-radius: 8px; color: #fff; background: linear-gradient(135deg, var(--c), var(--c2)); }
.mk-quick a em { font-style: normal; font-size: 11px; font-weight: 600; letter-spacing: 0; padding: 1px 7px; border-radius: 10px; background: rgba(255,255,255,.08); color: var(--c2); }
.mk-quick a:hover { transform: translateY(-2px); border-color: var(--c); }
.mk-quick a.cur { background: linear-gradient(135deg, color-mix(in srgb, var(--c) 40%, transparent), color-mix(in srgb, var(--c) 15%, transparent));
  border-color: var(--c); box-shadow: 0 6px 18px color-mix(in srgb, var(--c) 35%, transparent); color: #fff !important; }
.mk-quick a.equity { --c: #2E6BFF; --c2: #7FB2FF; } .mk-quick a.commodity { --c: #E0702E; --c2: #FFB27A; }
.mk-quick a.forex { --c: #10B981; --c2: #6EE7B7; } .mk-quick a.crypto { --c: #8B5CF6; --c2: #C4B5FD; }
html[data-mode="light"] .mk-quick a { color: var(--navy) !important; background: color-mix(in srgb, var(--c) 8%, #fff); }
html[data-mode="light"] .mk-quick a.cur { background: color-mix(in srgb, var(--c) 22%, #fff); }
html[data-mode="light"] .mk-quick a em { background: color-mix(in srgb, var(--c) 15%, #fff); color: var(--navy); }
.mk-star { display: inline-block; margin-top: 6px; font-size: 11.5px; font-style: italic; color: var(--gold2); letter-spacing: .04em; }
html[data-mode="light"] .mk-star { color: #8A6418; }
#mk_table table.dataTable.mk-dt tbody td { white-space: nowrap; }
.dataTables_wrapper .mk-tools { flex-direction: column; align-items: flex-end; gap: 8px; }
.dataTables_wrapper .mk-star { display: block; margin: 0 4px 0 0; font-size: 12px; font-style: italic; }
.dataTables_wrapper .mk-star::before { content: "* Annualised performance"; }

/* Markets: Performance / OHLC switch and the live TIME column */
.mk-view { align-items: center; }
.mk-view .shiny-options-group { display: flex; gap: 0 !important; padding: 3px; border-radius: 11px; border: 1px solid #213760; background: rgba(4,9,20,.5); }
.mk-view .radio-inline span { border: 0 !important; border-radius: 8px !important; padding: 6px 16px !important; letter-spacing: .08em; text-transform: uppercase; font-size: 12px !important; }
.mk-view .radio-inline input:checked + span { background: linear-gradient(135deg, var(--gold), var(--gold2)) !important; color: #050C1E !important; }
.rt-clock { display: inline-flex; align-items: center; gap: 7px; font-variant-numeric: tabular-nums; color: #E8EBF7; font-weight: 600; }
.rt-clock i { width: 7px; height: 7px; border-radius: 50%; background: #34D399; box-shadow: 0 0 0 0 rgba(52,211,153,.7); }
@keyframes rtpulse { 0% { box-shadow: 0 0 0 0 rgba(52,211,153,.6); } 70% { box-shadow: 0 0 0 7px rgba(52,211,153,0); } 100% { box-shadow: 0 0 0 0 rgba(52,211,153,0); } }
.rt-closed { color: var(--muted); font-variant-numeric: tabular-nums; padding-left: 14px; }
.mk-scroll { overflow-x: auto; } .mk-scroll .mk-tbl { white-space: nowrap; }
html[data-mode="light"] .rt-clock { color: var(--navy); } html[data-mode="light"] .mk-view .shiny-options-group { background: #fff; border-color: #C9D4E6; }

/* Column tooltips in the Markets table header (data/ccpi_toolstip.rds) */
table.dataTable.mk-dt thead th.has-tip { cursor: help; position: relative; overflow: visible; }
table.dataTable.mk-dt thead th .th-tip { display: none; position: absolute; z-index: 30; top: calc(100% + 8px); left: 50%; transform: translateX(-50%);
  width: 250px; padding: 11px 13px; border-radius: 10px; background: #121a4c; border: 1px solid #c9a227; box-shadow: 0 14px 34px rgba(0,0,0,.45);
  text-align: left; text-transform: none; letter-spacing: 0; white-space: normal; font-weight: 400; font-size: 12.5px; line-height: 1.5; color: #DCE4F2; }
table.dataTable.mk-dt thead th .th-tip::before { content: ""; position: absolute; top: -6px; left: 50%; margin-left: -6px; width: 11px; height: 11px;
  background: #121a4c; border-left: 1px solid #c9a227; border-top: 1px solid #c9a227; transform: rotate(45deg); }
table.dataTable.mk-dt thead th .th-tip b { display: block; color: var(--gold2); font-size: 12px; letter-spacing: .08em; text-transform: uppercase; margin-bottom: 3px; }
table.dataTable.mk-dt thead th:hover .th-tip { display: block; }
table.dataTable.mk-dt thead th:first-child .th-tip { left: 0; transform: none; } table.dataTable.mk-dt thead th:first-child .th-tip::before { left: 24px; }
table.dataTable.mk-dt thead th:last-child .th-tip { left: auto; right: 0; transform: none; } table.dataTable.mk-dt thead th:last-child .th-tip::before { left: auto; right: 24px; }
html[data-mode="light"] table.dataTable.mk-dt thead th .th-tip { background: #fff; color: var(--navy); box-shadow: 0 14px 34px rgba(11,26,58,.18); }
html[data-mode="light"] table.dataTable.mk-dt thead th .th-tip::before { background: #fff; }
html[data-mode="light"] table.dataTable.mk-dt thead th .th-tip b { color: #8A6418; }

/* Tabs not open yet ("Coming soon") */
.navbar .nav-link.soon { color: rgba(232,235,247,.38) !important; cursor: not-allowed; }
.navbar .nav-link.soon:hover { color: rgba(232,235,247,.5) !important; }
.navbar .nav-link.soon::after { display: none !important; }
.soon-b { display: inline-block; margin-left: 5px; padding: 1px 5px; border-radius: 5px; font-size: 8.5px; font-weight: 700; letter-spacing: .08em;
  line-height: 1.4; vertical-align: super; color: #050C1E; background: linear-gradient(135deg, #D4A440, #F0D890); }
.navbar .nav-link.soon .soon-b { opacity: .8; }
.hcard.soon { cursor: not-allowed !important; opacity: .55; filter: saturate(.6); }
.hcard.soon:hover { transform: none !important; box-shadow: none !important; }
.hcard.soon .soon-b { margin-left: 0; font-size: 10px; vertical-align: baseline; padding: 2px 8px; }
html[data-mode="light"] .navbar .nav-link.soon { color: rgba(11,26,58,.35) !important; }
.mk-quick { align-items: center; }
.mk-quick .mk-sep { width: 1px; height: 28px; background: #213760; margin: 0 4px; }
.mk-quick a.rg.vietnam { --c: #DA251D; --c2: #FFCD00; } .mk-quick a.rg.global { --c: #2E9BFF; --c2: #9FD0FF; }
html[data-mode="light"] .mk-quick .mk-sep { background: #C9D4E6; }

/* Contact page, as on the NXW website */
.ct-band { padding: 0; }
.ct-hero { max-width: 1200px; margin: 0 auto; padding: 64px 24px 70px; text-align: left; }
.ct-hero h1 { font-size: 46px; font-weight: 700; margin: 8px 0 14px; letter-spacing: -.5px; }
.ct-hero p { max-width: 820px; font-size: 18px; line-height: 1.65; color: #D5DEEC; margin: 0; }
html[data-mode="light"] .ct-hero p { color: #44546E; }
.ct-wrap { max-width: 1200px; margin: 0 auto; padding: 46px 24px 70px; display: grid; grid-template-columns: 1.35fr 1fr; gap: 28px; align-items: start; }
.ct-form, .ct-card { background: #0A1633; border: 1px solid #1A2A4C; border-radius: 18px; padding: 30px 32px; box-shadow: 0 14px 40px rgba(0,0,0,.2); }
.ct-grid { display: grid; grid-template-columns: 1fr 1fr; column-gap: 20px; }
.ct-form label { font-weight: 600; font-size: 14.5px; color: #fff; margin-bottom: 8px; } .ct-form label i { color: #F87171; font-style: normal; }
.ct-form .form-control, .ct-form .selectize-input, .ct-form select { min-height: 52px; border-radius: 10px !important; background: #0C1A3A !important;
  border: 1px solid #213760 !important; color: #E8EBF7 !important; font-size: 15px; box-shadow: none !important; }
.ct-form .selectize-input { padding: 14px 16px !important; } .ct-form textarea.form-control { min-height: 150px; padding: 14px 16px; }
.ct-form .form-control:focus, .ct-form .selectize-input.focus { border-color: var(--gold) !important; }
.ct-form .form-group { margin-bottom: 20px; }
.ct-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 6px; }
.ct-actions .btn-gold { padding: 12px 26px; font-weight: 700; letter-spacing: .06em; display: inline-flex; align-items: center; gap: 8px; color: #050C1E !important; }
.ct-actions .btn-gold svg { width: 17px; height: 17px; }
.ct-actions small { color: var(--muted); font-size: 12.5px; flex-basis: 100%; }
.ct-side { display: flex; flex-direction: column; gap: 22px; }
.ct-logo { width: 220px; display: block; margin-bottom: 22px; }
.ct-row { display: flex; gap: 16px; align-items: center; padding: 12px 0; }
.ct-ic { flex: 0 0 auto; width: 52px; height: 52px; border-radius: 12px; display: grid; place-items: center; color: var(--gold); background: rgba(255,255,255,.05); border: 1px solid #1A2A4C; }
.ct-ic svg { width: 22px; height: 22px; }
.ct-row span { display: block; color: var(--gold); font-size: 12.5px; font-weight: 700; letter-spacing: .16em; }
.ct-row b { display: block; color: #fff; font-weight: 500; font-size: 17px; margin-top: 2px; }
.ct-row a { color: #fff !important; font-size: 17px; text-decoration: underline; }
.ct-faq h3 { font-size: 17px; font-weight: 700; color: #fff; margin: 0 0 10px; letter-spacing: .04em; }
.ct-faq ul { margin: 0; padding-left: 18px; color: #C9D6EC; font-size: 13.5px; line-height: 1.6; } .ct-faq li { margin-bottom: 6px; } .ct-faq li b { color: var(--gold2); }
.cbtn.on { border-color: var(--gold) !important; color: var(--gold) !important; }
html[data-mode="light"] .ct-form, html[data-mode="light"] .ct-card { background: #fff; border-color: #DCE3EE; box-shadow: 0 10px 30px rgba(11,26,58,.08); }
html[data-mode="light"] .ct-form label, html[data-mode="light"] .ct-row b, html[data-mode="light"] .ct-row a, html[data-mode="light"] .ct-faq h3 { color: var(--navy) !important; }
html[data-mode="light"] .ct-form .form-control, html[data-mode="light"] .ct-form .selectize-input { background: #F7F9FC !important; border-color: #C9D4E6 !important; color: var(--navy) !important; }
html[data-mode="light"] .ct-ic { background: #F3F6FB; border-color: #DCE3EE; color: #B07F1F; } html[data-mode="light"] .ct-faq ul { color: #44546E; }
@media (max-width: 900px) { .ct-wrap, .ct-grid { grid-template-columns: 1fr; } .ct-hero h1 { font-size: 36px; } }

/* About page */
.ab-wrap { max-width: 1200px; margin: 0 auto; padding: 50px 24px 70px; }
.ab-sec { margin-bottom: 56px; } .ab-sec h2 { font-size: 30px; font-weight: 700; margin: 6px 0 22px; }
.ab-sec p { color: #C9D6EC; line-height: 1.7; font-size: 15px; }
.ab-steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.ab-step { background: #0A1633; border: 1px solid #1A2A4C; border-radius: 16px; padding: 22px; position: relative; overflow: hidden; }
.ab-step em { font-style: normal; font-family: Georgia, serif; font-size: 34px; font-weight: 700; color: var(--gold); opacity: .9; }
.ab-step h3 { font-size: 17px; font-weight: 700; margin: 8px 0; color: #fff; } .ab-step p { font-size: 13.5px; margin: 0; }
.ab-mods { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.ab-mod { border: 1px solid #1A2A4C; border-radius: 14px; padding: 16px 18px; background: rgba(10,22,51,.6); }
.ab-mod b { font-size: 15px; color: #fff; letter-spacing: .04em; } .ab-mod p { font-size: 13px; margin: 8px 0 0; }
.ab-st { float: right; font-size: 9.5px; font-weight: 700; letter-spacing: .1em; padding: 2px 7px; border-radius: 6px; background: rgba(255,255,255,.08); color: var(--muted); }
.ab-mod.on { border-color: var(--gold); background: linear-gradient(135deg, rgba(212,164,64,.18), rgba(10,22,51,.6)); }
.ab-mod.on .ab-st { background: linear-gradient(135deg, #D4A440, #F0D890); color: #050C1E; }
.ab-two { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; }
.ab-links { display: flex; gap: 12px; margin-top: 18px; } .ab-links .btn-gold { color: #050C1E !important; font-weight: 700; }
html[data-mode="light"] .ab-step, html[data-mode="light"] .ab-mod { background: #fff; border-color: #DCE3EE; }
html[data-mode="light"] .ab-step h3, html[data-mode="light"] .ab-mod b { color: var(--navy); }
html[data-mode="light"] .ab-sec p { color: #44546E; } html[data-mode="light"] .ab-mod.on { background: #FFF9EC; border-color: #D4A440; }
@media (max-width: 1000px) { .ab-steps, .ab-mods { grid-template-columns: 1fr 1fr; } .ab-two { grid-template-columns: 1fr; } }
@media (max-width: 600px) { .ab-steps, .ab-mods { grid-template-columns: 1fr; } }
/* "Coming soon" menu items: greyed, with a small tooltip on hover */
.navbar .nav-link.soon { position: relative; }
.navbar .nav-link.soon:hover::before { content: "COMING SOON"; position: absolute; left: 50%; top: calc(50% + 14px); transform: translateX(-50%);
  font-size: 8.5px; letter-spacing: .12em; padding: 2px 6px; border-radius: 5px; white-space: nowrap; color: #050C1E; background: linear-gradient(135deg, #D4A440, #F0D890); }
.navbar .nav-item:has(> .nav-link[data-value="Contact"]) { display: none !important; }
@media (max-width: 1750px) {
  .navbar .nav-link { padding: 0 8px !important; font-size: 11px; letter-spacing: .05em; }
  .tools { gap: 8px !important; } .sbox, .obtn, .cbtn { width: 42px !important; height: 42px !important; flex-basis: 42px !important; }
}
.dataTables_wrapper .mk-foot { gap: 14px; flex-wrap: wrap; }
.dataTables_wrapper .dataTables_length { color: var(--muted); font-size: 12.5px; padding: 0 !important; }
.dataTables_wrapper .dataTables_length select { background-color: #050C1E !important; color: #DCE4F2 !important; border: 1px solid #213760 !important; border-radius: 8px; padding: 4px 26px 4px 10px; margin: 0 4px; }
.dataTables_wrapper .dataTables_paginate { margin-left: auto; padding: 0 !important; }
.dataTables_wrapper .dataTables_paginate .paginate_button { padding: 5px 11px !important; margin-left: 3px; cursor: pointer; }
.dataTables_wrapper .dataTables_paginate .pagination { margin: 0; gap: 4px; }
.dataTables_wrapper .page-link { background: transparent; border: 1px solid #213760; color: #C9D6EC; border-radius: 7px !important; padding: 5px 11px; font-size: 13px; }
.dataTables_wrapper .page-item.active .page-link { background: linear-gradient(135deg, #D4A440, #F0D890); border-color: #D4A440; color: #050C1E; font-weight: 700; }
.dataTables_wrapper .page-item.disabled .page-link { opacity: .4; background: transparent; }
html[data-mode="light"] .dataTables_wrapper .dataTables_length select { background-color: #fff !important; color: var(--navy) !important; border-color: #C9D4E6 !important; }
html[data-mode="light"] .dataTables_wrapper .page-link { border-color: #C9D4E6; color: var(--navy); }
@media (max-width: 1450px) { .navbar .nav-link { padding: 0 6px !important; font-size: 10px; letter-spacing: .03em; } .navbar .plat-badge { padding: 0 10px; } }
.mk-name { border-radius: 8px !important; padding: 5px 12px; }
/* squared buttons and labels in every table and card (no round pills) */
.mk-pill, .mk-meta span, .rs-grp, .mk-quick a em, .chip, .mk-name, .mk-kpi, .rs-num code, .rs-rel code, .mk-ctop code { border-radius: 6px !important; }
.mk-tbl .chip { border-radius: 6px !important; }
/* sort arrows in table headers (DataTables ▲ ▼): light colour so they show on the dark header */
table.dataTable.mk-dt thead > tr > th.sorting:before, table.dataTable.mk-dt thead > tr > th.sorting:after,
table.dataTable.mk-dt thead > tr > th.sorting_asc:before, table.dataTable.mk-dt thead > tr > th.sorting_asc:after,
table.dataTable.mk-dt thead > tr > th.sorting_desc:before, table.dataTable.mk-dt thead > tr > th.sorting_desc:after {
  opacity: .6 !important; font-size: .8em !important; color: #E8EBF7 !important; right: 8px !important; }
table.dataTable.mk-dt thead > tr > th.sorting_asc:before, table.dataTable.mk-dt thead > tr > th.sorting_desc:after { opacity: 1 !important; color: #F0D890 !important; }
table.dataTable.mk-dt thead th.sorting, table.dataTable.mk-dt thead th.sorting_asc, table.dataTable.mk-dt thead th.sorting_desc { background-image: none !important; }
.mk-struct { display: inline-block; margin-top: 6px; font-size: 12.5px; font-weight: 600; color: var(--sky) !important; text-decoration: none; letter-spacing: .04em; }
.mk-struct:hover { color: var(--gold2) !important; }

/* Markets card header: title left, Performance/OHLC switch centred, count right */
.mk-ctop3 { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; }
.mk-ctop3 .mk-mid { justify-self: center; }
.mk-ctop3 .mk-act { justify-self: end; }
.mk-ctop3 > .admin-only { grid-column: 1; } .mk-ctop3 > .mk-mid { grid-column: 2; grid-row: 1; } .mk-ctop3 > .mk-act { grid-column: 3; grid-row: 1; }
@media (max-width: 900px) { .mk-ctop3 > .mk-mid, .mk-ctop3 > .mk-act { grid-column: 1; grid-row: auto; } }
@media (max-width: 900px) { .mk-ctop3 { grid-template-columns: 1fr; } .mk-ctop3 .mk-mid, .mk-ctop3 .mk-act { justify-self: start; } }

/* Page header: kicker and title on the left, LAST UPDATE on the right of the title, shortcuts below */
.mk-head2 { display: block; }
.mk-hrow { display: flex; justify-content: space-between; align-items: center; gap: 20px; flex-wrap: wrap; }

/* Table toolbar: search box on the left, annualised note on the right */
.dataTables_wrapper .mk-tools { flex-direction: row; justify-content: space-between; align-items: flex-end; flex-wrap: wrap; }
.dataTables_wrapper .mk-tools .dataTables_filter { float: none; text-align: left; margin: 0; }
.dataTables_wrapper .mk-tools .dataTables_filter label { justify-content: flex-start; }
.dataTables_wrapper .mk-tools .mk-star { margin-left: auto; }

/* About pages: cards with icons, empty partner/sponsor lists, call to action */
.ab-card .ab-ico { width: 44px; height: 44px; border-radius: 10px; display: grid; place-items: center; color: var(--gold);
  background: rgba(212,164,64,.12); border: 1px solid rgba(212,164,64,.35); margin-bottom: 6px; }
.ab-card .ab-ico svg { width: 22px; height: 22px; }
.ab-empty { border: 1px dashed #213760; border-radius: 14px; padding: 34px; text-align: center; }
.ab-empty p { margin: 0; color: var(--muted) !important; font-style: italic; }
.ab-cta { display: flex; justify-content: space-between; align-items: center; gap: 24px; flex-wrap: wrap; padding: 28px 32px;
  border-radius: 16px; border: 1px solid var(--gold); background: linear-gradient(135deg, rgba(212,164,64,.16), rgba(10,22,51,.6)); }
.ab-cta h2 { margin: 0 0 6px !important; font-size: 24px !important; } .ab-cta p { margin: 0; }
.ab-cta .btn-gold { color: #050C1E !important; font-weight: 700; padding: 10px 22px; }
html[data-mode="light"] .ab-empty { border-color: #C9D4E6; } html[data-mode="light"] .ab-cta { background: #FFF9EC; }

/* Auto reload banner; Shiny's grey overlay is not needed since the page reloads */
#shiny-disconnected-overlay { display: none !important; }
#ccpi-reload { position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); z-index: 99999; display: flex; align-items: center; gap: 10px;
  padding: 10px 18px; border-radius: 10px; background: #0A1633; border: 1px solid var(--gold); color: #E8EBF7; font-size: 13.5px;
  font-weight: 600; box-shadow: 0 10px 30px rgba(0,0,0,.4); }
#ccpi-reload i { width: 14px; height: 14px; border-radius: 50%; border: 2px solid var(--gold); border-top-color: transparent; animation: ccpispin .8s linear infinite; }
#ccpi-reload a { color: var(--gold); }
@keyframes ccpispin { to { transform: rotate(360deg); } }

/* Sign-in screen */
.lg-wrap { display: none; }
html.locked .lg-wrap { display: flex; position: fixed; inset: 0; z-index: 9000; align-items: center; justify-content: center; padding: 20px;
  background: radial-gradient(ellipse at 30% 20%, #10295C 0%, #050C1E 55%, #030817 100%); overflow-y: auto; }
html.locked body { overflow: hidden; }
.lg-card { width: 100%; max-width: 440px; background: rgba(10,22,51,.92); border: 1px solid #213760; border-radius: 18px; padding: 34px 34px 26px;
  box-shadow: 0 30px 80px rgba(0,0,0,.5); text-align: left; }
.lg-logo { height: 54px; display: block; margin: 0 auto 18px; }
.lg-card .mk-kick { text-align: center; margin-bottom: 4px; }
.lg-card h2 { font-size: 26px; font-weight: 700; color: #fff; margin: 4px 0 6px; text-align: center; }
.lg-sub { color: var(--muted); font-size: 13.5px; text-align: center; margin: 0 0 18px; }
.lg-card .form-group { margin-bottom: 12px; } .lg-card label { font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: #9FB0CF; }
.lg-btn { width: 100%; height: 44px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: #050C1E !important; margin-top: 6px; }
.lg-two { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.lg-alt { text-align: center; font-size: 13.5px; color: #C9D6EC; margin: 16px 0 0; } .lg-alt a { color: var(--gold); font-weight: 600; }
.lg-note { display: block; text-align: center; color: var(--muted); margin-top: 18px; font-size: 11.5px; }
.lg-msg { margin-top: 12px; padding: 9px 12px; border-radius: 8px; font-size: 13px; background: rgba(220,38,38,.14); border: 1px solid rgba(220,38,38,.45); color: #FCA5A5; }
.lg-msg.ok { background: rgba(52,211,153,.12); border-color: rgba(52,211,153,.45); color: #6EE7B7; }
html[data-mode="light"].locked .lg-wrap { background: radial-gradient(ellipse at 30% 20%, #FFFFFF 0%, #EAF0FA 60%, #DCE5F3 100%); }
html[data-mode="light"] .lg-card { background: #fff; border-color: #DCE3EE; box-shadow: 0 30px 80px rgba(10,21,48,.15); }
html[data-mode="light"] .lg-card h2 { color: var(--navy); } html[data-mode="light"] .lg-alt { color: #44546E; }

/* User menu */
.ubox { position: relative; }
.ubtn .u-ini { font-weight: 700; font-size: 13px; letter-spacing: .04em; color: var(--gold); display: inline-flex; }
.ubtn .u-ini svg { width: 20px; height: 20px; }
.umenu { display: none; position: absolute; right: 0; top: calc(100% + 10px); min-width: 240px; z-index: 2000; background: #0A1633;
  border: 1px solid #213760; border-radius: 12px; padding: 8px; box-shadow: 0 18px 40px rgba(0,0,0,.45); }
.ubox.open .umenu { display: block; }
.u-head { padding: 8px 10px 10px; border-bottom: 1px solid #1A2A4C; margin-bottom: 6px; display: flex; flex-direction: column; }
.u-head b { color: #fff; font-size: 14px; } .u-head span { color: var(--muted); font-size: 12px; }
.u-item { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 8px; color: #C9D6EC !important; text-decoration: none; font-size: 13.5px; }
.u-item svg { width: 17px; height: 17px; } .u-item:hover { background: rgba(212,164,64,.14); color: var(--gold) !important; }
.u-out { color: #FCA5A5 !important; }
html[data-mode="light"] .umenu { background: #fff; border-color: #DCE3EE; } html[data-mode="light"] .u-head b { color: var(--navy); }
html[data-mode="light"] .u-item { color: var(--navy) !important; }

/* Profile page */
.pf-top { display: flex; align-items: center; gap: 22px; }
.pf-av { width: 84px; height: 84px; border-radius: 50%; display: grid; place-items: center; font-size: 30px; font-weight: 700; color: #050C1E;
  background: linear-gradient(135deg, var(--gold), var(--gold2)); flex: none; }
.pf-top h1 { margin: 2px 0 4px !important; } .pf-top p { margin: 0 !important; }
.pf-role { display: inline-block; margin-left: 10px; font-size: 10px; font-weight: 700; letter-spacing: .1em; padding: 2px 8px; border-radius: 6px;
  background: rgba(212,164,64,.18); color: var(--gold); vertical-align: middle; }
.pf-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; align-items: start; }
.pf-card h3 { font-size: 17px; font-weight: 700; margin: 0 0 14px; }
.pf-row { display: flex; justify-content: space-between; gap: 12px; padding: 8px 0; border-bottom: 1px solid rgba(255,255,255,.06); font-size: 13.5px; }
.pf-row span { color: var(--muted); } .pf-row b { text-align: right; font-weight: 600; }
.pf-card .btn-gold { color: #050C1E !important; font-weight: 700; }
.pf-note { color: var(--muted); font-size: 13px; }
@media (max-width: 1000px) { .pf-grid { grid-template-columns: 1fr; } }

/* Home: platform name above the logo */
.ccpi-name { display: inline-flex; align-items: center; gap: 16px; margin: 0 0 22px; }
.ccpi-name span { font-size: 15px; font-weight: 700; letter-spacing: .42em; text-transform: uppercase; padding-left: .42em;
  background: linear-gradient(90deg, #F0D890, #D4A440 45%, #F0D890); -webkit-background-clip: text; background-clip: text; color: transparent;
  text-shadow: 0 0 26px rgba(212,164,64,.25); }
.ccpi-name i { width: 60px; height: 1px; background: linear-gradient(90deg, transparent, #D4A440); position: relative; }
.ccpi-name i:last-child { background: linear-gradient(90deg, #D4A440, transparent); }
.ccpi-name i::after { content: ""; position: absolute; top: -2.5px; width: 6px; height: 6px; transform: rotate(45deg); background: #D4A440; }
.ccpi-name i:first-child::after { right: -3px; } .ccpi-name i:last-child::after { left: -3px; }
html[data-mode="light"] .ccpi-name span { background: linear-gradient(90deg, #8A6418, #B07F1F 45%, #8A6418); -webkit-background-clip: text; background-clip: text; }

/* Home: Sign up | Sign in under the market buttons, hidden once signed in */
.home-auth { display: inline-flex; align-items: center; gap: 0; margin-top: 44px; border: 1px solid #213760; border-radius: 12px; padding: 5px;
  background: rgba(4,9,20,.45); backdrop-filter: blur(6px); }
.ha-btn { min-width: 150px; padding: 12px 26px; border-radius: 8px; font-weight: 700; font-size: 14px; letter-spacing: .14em; text-transform: uppercase;
  text-decoration: none; color: #E8EBF7 !important; transition: background .2s, color .2s; }
.ha-btn:hover { background: rgba(255,255,255,.06); }
.ha-in { background: linear-gradient(135deg, var(--gold), var(--gold2)); color: #050C1E !important; }
.ha-in:hover { background: linear-gradient(135deg, var(--gold2), var(--gold)); }
.ha-adm { background: #C62828; color: #fff !important; }
.ha-adm:hover { background: #E53935; }
.ha-sep { width: 1px; height: 22px; background: #213760; margin: 0 5px; }
.home-auth-p { font-size: 13.5px !important; color: var(--muted) !important; margin: 14px auto 0 !important; font-weight: 400 !important; }
html.signed .home-auth, html.signed .home-auth-p { display: none !important; }
html[data-mode="light"] .home-auth { background: #fff; border-color: #C9D4E6; } html[data-mode="light"] .ha-up { color: var(--navy) !important; }

/* Sign-in card opened over the page */
.lg-card { position: relative; }
.lg-x { position: absolute; top: 12px; right: 14px; width: 34px; height: 34px; border-radius: 8px; border: 1px solid #213760; background: transparent;
  color: #C9D6EC; font-size: 22px; line-height: 1; cursor: pointer; } .lg-x:hover { color: var(--gold); border-color: var(--gold); }
html.locked .lg-wrap { background: rgba(5,11,26,.78); backdrop-filter: blur(6px); }
html[data-mode="light"].locked .lg-wrap { background: rgba(220,229,243,.8); }

/* Home when signed in: short welcome under the market buttons */
.home-user { display: none; max-width: 760px; margin: 44px auto 0; }
html.signed .home-user { display: block; }
.home-user h3 { font-size: 22px; font-weight: 600; margin: 0 0 8px; color: #E8EBF7; } .home-user h3 b { color: var(--gold); font-weight: 700; }
.home-user p { font-size: 15px !important; margin: 0 auto !important; color: var(--muted) !important; }
html[data-mode="light"] .home-user h3 { color: var(--navy); }

.navbar .nav-item:has(> .nav-link[data-value="Profile"]) { display: none !important; }
.navbar .ubox { margin: 0 8px; }

/* Admin content: only for accounts with the Admin role */
html:not(.admin) .admin-only { display: none !important; }

/* Password show / hide */
.pw-wrap { position: relative; }
.pw-wrap input { padding-right: 44px !important; }
.pw-eye { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); width: 32px; height: 32px; border: 0; background: transparent;
  color: var(--muted); display: grid; place-items: center; cursor: pointer; border-radius: 6px; }
.pw-eye svg { width: 19px; height: 19px; } .pw-eye:hover { color: var(--gold); }
.navbar .nav-item:has(> .nav-link[data-value="Admin"]) { display: none !important; }

/* Admin page */
.adm-kpis { display: grid; grid-template-columns: repeat(5, 1fr); gap: 14px; margin: 0 0 20px; }
.adm-kpi { border: 1px solid #1A2A4C; border-radius: 12px; padding: 14px 18px; background: rgba(10,22,51,.6); display: flex; flex-direction: column; }
.adm-kpi b { font-size: 28px; font-weight: 700; color: #fff; } .adm-kpi span { font-size: 11.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.adm-kpi.ok b { color: #34D399; } .adm-kpi.wait b { color: var(--gold); } .adm-kpi.ban b { color: #F87171; } .adm-kpi.live b { color: #7FB2FF; }
.st { display: inline-block; padding: 3px 10px; border-radius: 6px; font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.st-active { background: rgba(52,211,153,.14); color: #34D399; } .st-pending { background: rgba(212,164,64,.16); color: var(--gold); }
.st-banned { background: rgba(248,113,113,.14); color: #F87171; }
.adm-b { border: 1px solid; border-radius: 6px; background: transparent; padding: 4px 12px; font-size: 12px; font-weight: 700; margin-left: 6px; cursor: pointer; }
.adm-b.ok { color: #34D399; border-color: rgba(52,211,153,.5); } .adm-b.ok:hover { background: rgba(52,211,153,.14); }
.adm-b.ban { color: #F87171; border-color: rgba(248,113,113,.5); } .adm-b.ban:hover { background: rgba(248,113,113,.14); }
.adm-na { color: var(--muted); }
#adm_online_card { margin-top: 22px; }
html[data-mode="light"] .adm-kpi { background: #fff; border-color: #DCE3EE; } html[data-mode="light"] .adm-kpi b { color: var(--navy); }
@media (max-width: 900px) { .adm-kpis { grid-template-columns: repeat(2, 1fr); } }

/* Starter page (signed out): no main menu, only the logo and the top-bar icons */
html:not(.signed) .navbar .nav-item:has(> .nav-link), html:not(.signed) .navbar .nav-item.dropdown,
html:not(.signed) .navbar #plat { display: none !important; }

/* Remember me */
.lg-rem { display: flex !important; align-items: center; gap: 8px; margin: 2px 0 10px; cursor: pointer; text-transform: none !important;
  letter-spacing: 0 !important; font-size: 13.5px !important; color: #C9D6EC !important; }
.lg-rem input { width: 16px; height: 16px; accent-color: #D4A440; }
html[data-mode="light"] .lg-rem { color: #44546E !important; }
#adm_data_card { margin-top: 22px; } #adm_data_card .pf-row b { font-weight: 600; word-break: break-all; }

/* Home: larger, wider platform name */
.ccpi-name { gap: 26px; margin: 0 0 28px; }
.ccpi-name span { font-size: 26px; letter-spacing: .36em; padding-left: .36em; }
.ccpi-name i { width: 170px; height: 2px; }
.ccpi-name i::after { top: -3px; width: 8px; height: 8px; } .ccpi-name i:first-child::after { right: -4px; } .ccpi-name i:last-child::after { left: -4px; }
@media (max-width: 1100px) { .ccpi-name span { font-size: 20px; letter-spacing: .28em; } .ccpi-name i { width: 90px; } }
@media (max-width: 640px) { .ccpi-name { gap: 12px; } .ccpi-name span { font-size: 14px; letter-spacing: .2em; } .ccpi-name i { width: 34px; } }

/* Resources items for the admin only: greyed out for other users */
html:not(.admin) .navbar .dropdown-item.adm-item { opacity: .42; cursor: not-allowed; background: transparent !important; }
html:not(.admin) .navbar .dropdown-item.adm-item::after { content: "ADMIN ONLY"; margin-left: 10px; padding: 1px 6px; border-radius: 5px;
  font-size: 8.5px; font-weight: 700; letter-spacing: .08em; background: rgba(255,255,255,.08); vertical-align: middle; }

/* Starter page (signed out), as in CCPR: the top bar shows the logo and the icons (search, mail, language, Administration),
   no menu, no user button and no sidebar toggle */
html:not(.signed) .collapse-toggle, html:not(.signed) .navbar #ubox, html:not(.signed) .navbar .nav-item:has(#ubox) { display: none !important; }

/* Market details: chart tabs (HISTORY | INTRADAY), moving averages and benchmark */
.mk-tabbar { display: flex; justify-content: space-between; align-items: flex-end; gap: 14px; flex-wrap: wrap; margin: 6px 0 0; border-bottom: 1px solid #1A2A4C; }
.mk-tabbar .form-group { margin: 0; }
.mk-tabbar #mk_tab .shiny-options-group { display: flex; gap: 2px; }
.mk-tabbar #mk_tab .radio-inline { margin: 0 !important; padding: 0; }
.mk-tabbar #mk_tab .radio-inline input { display: none; }
.mk-tabbar #mk_tab .radio-inline span { display: inline-block; padding: 10px 22px; font-size: 13px; font-weight: 700; letter-spacing: .14em; color: var(--muted); cursor: pointer; border-bottom: 3px solid transparent; margin-bottom: -1px; }
.mk-tabbar #mk_tab .radio-inline input:checked + span { color: #fff; border-bottom-color: var(--gold); }
.mk-ma { display: flex; align-items: center; gap: 8px; padding-bottom: 8px; flex-wrap: wrap; }
.mk-ma label { font-size: 11px; letter-spacing: .12em; color: var(--muted); font-weight: 600; margin: 0 0 0 6px; }
.mk-ma select { background: #0A1633; color: #DCE4F2; border: 1px solid #213760; border-radius: 8px; padding: 4px 8px; font-size: 12.5px; height: 32px; }
.mk-tabbar + div > .mk-card, .mk-tabbar + div + div > .mk-card { border-top-left-radius: 0; border-top-right-radius: 0; }
.mk-kpis-sm { grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 8px; margin: 4px 0 10px; }
.mk-kpis-sm .mk-kpi { padding: 8px 11px; } .mk-kpis-sm .mk-kpi b { font-size: 15px; }
html[data-mode="light"] .mk-tabbar { border-color: #DCE3EE; }
html[data-mode="light"] .mk-tabbar #mk_tab .radio-inline input:checked + span { color: #08142E; }
html[data-mode="light"] .mk-ma select { background: #fff; color: #13203A; border-color: #DCE3EE; }
@media (max-width: 700px) { .mk-tabbar #mk_tab .radio-inline span { padding: 9px 12px; } }
html:not(.admin) .ccpi-footer .in { grid-template-columns: 1fr; }

/* Profile photo */
.pf-avbox { display: flex; flex-direction: column; align-items: center; gap: 6px; flex: none; }
button.pf-av { position: relative; border: 0; padding: 0; cursor: pointer; overflow: hidden; }
.pf-av img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pf-av-cam { position: absolute; inset: 0; display: grid; place-items: center; background: rgba(10,21,48,.55); color: #fff; opacity: 0; transition: opacity .15s; }
.pf-av-cam svg { width: 26px; height: 26px; }
button.pf-av:hover .pf-av-cam { opacity: 1; }
.pf-av-acts { display: flex; gap: 10px; font-size: 12px; } .pf-av-acts a { color: var(--gold); text-decoration: none; } .pf-av-acts a:hover { text-decoration: underline; }
.ubtn .u-ini.has-img { width: 30px; height: 30px; border-radius: 50%; overflow: hidden; }
.ubtn .u-ini.has-img img { width: 100%; height: 100%; object-fit: cover; }

/* Subscriptions: FREE, STARTER, BASIC, STANDARD, PRO */
.adm-plan { background: #0A1633; color: #DCE4F2; border: 1px solid #213760; border-radius: 7px; padding: 3px 6px; font-size: 12px; font-weight: 700; letter-spacing: .05em; }
.pl-free { color: #9DB0CC !important; } .pl-starter { color: #7DD3FC !important; } .pl-basic { color: #34D399 !important; }
.pl-standard { color: #A78BFA !important; } .pl-pro { color: var(--gold) !important; }
.pf-plan { background: rgba(255,255,255,.08); }
html[data-mode="light"] .adm-plan { background: #fff; border-color: #DCE3EE; }

.adm-filter { display: flex; align-items: center; gap: 10px; } .adm-filter > span { font-size: 11px; letter-spacing: .14em; color: var(--muted); font-weight: 700; }

/* Sign-up email code */
.vf-code { font-size: 28px !important; letter-spacing: .5em; text-align: center; font-weight: 700; font-variant-numeric: tabular-nums; padding: 12px !important; margin: 6px 0 14px; }
.adm-reset { margin-left: 8px; }
.mk-dt thead th.dt-head-center { text-align: center !important; }

/* Partners */
.pt-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 16px; }
.pt-card { background: #0A1633; border: 1px solid #1A2A4C; border-radius: 14px; padding: 26px 18px 18px; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 12px; transition: border-color .15s, transform .15s; }
.pt-card:hover { border-color: var(--gold); transform: translateY(-2px); }
.pt-logo { font-size: 20px; font-weight: 800; letter-spacing: .08em; color: #fff; min-height: 52px; display: grid; place-items: center; }
.pt-card span { font-size: 10.5px; letter-spacing: .18em; font-weight: 700; color: var(--gold); }
html[data-mode="light"] .pt-card { background: #fff; border-color: #DCE3EE; } html[data-mode="light"] .pt-logo { color: var(--navy); }
.adm-av { width: 28px; height: 28px; border-radius: 50%; object-fit: cover; display: block; }
.adm-filter { flex-wrap: wrap; } .adm-filter > span + .form-group, .adm-filter .form-group + span { margin-left: 4px; }
/* EQUITY sub-categories */
.mk-quick a.cat { --c: #2E6BFF; --c2: #7FB2FF; padding: 8px 14px; }
#mk_cats { display: flex; flex-basis: 100%; align-items: center; gap: 8px; flex-wrap: wrap; padding-left: 4px; }
#mk_cats:empty { display: none; }
#mk_cats .cat-lbl { font-size: 11px; letter-spacing: .16em; font-weight: 700; color: #7FB2FF; margin-right: 4px; }
#mk_cats .cat-lbl::after { content: " \203A"; }
.mk-quick a.cat { padding: 5px 12px; font-size: 12px; }
.mk-quick a.cat.commodity { --c: #E0702E; --c2: #FFB27A; } #mk_cats .cat-lbl.commodity { color: #FFB27A; }
.mk-quick a.cat.forex { --c: #10B981; --c2: #6EE7B7; } #mk_cats .cat-lbl.forex { color: #6EE7B7; }
.mk-dt td.mk-ccy { color: var(--muted); font-size: 12px; font-weight: 600; letter-spacing: .06em; }
/* Details page: prediction and sentiment */
.mk-sent-badge { padding: 6px 14px; border-radius: 8px; font-weight: 700; font-size: 12.5px; letter-spacing: .1em; border: 1px solid; }
.mk-sent-badge.bullish { color: #34D399; border-color: rgba(52,211,153,.5); background: rgba(52,211,153,.1); }
.mk-sent-badge.bearish { color: #F87171; border-color: rgba(248,113,113,.5); background: rgba(248,113,113,.1); }
.mk-sent-badge.neutral { color: var(--gold); border-color: rgba(212,164,64,.5); background: rgba(212,164,64,.1); }
.mk-gauge { margin: 4px 0 14px; }
.mk-gauge-bar { position: relative; height: 10px; border-radius: 6px; background: linear-gradient(90deg, #F87171, #D4A440 50%, #34D399); }
.mk-gauge-pin { position: absolute; top: -5px; width: 4px; height: 20px; margin-left: -2px; border-radius: 2px; background: #fff; box-shadow: 0 0 0 2px #050C1E; }
.mk-gauge-lab { display: flex; justify-content: space-between; margin-top: 8px; font-size: 11px; letter-spacing: .12em; color: var(--muted); }
.mk-gauge-lab b { color: inherit; font-size: 12.5px; }
.mk-sig { display: inline-block; padding: 2px 8px; border-radius: 6px; font-size: 11px; font-weight: 700; letter-spacing: .06em; }
.mk-sig.bullish { color: #34D399; background: rgba(52,211,153,.12); } .mk-sig.bearish { color: #F87171; background: rgba(248,113,113,.12); }
.mk-sig.neutral { color: var(--muted); background: rgba(157,176,204,.12); }
.mk-fc td.up { color: #34D399; } .mk-fc td.dn { color: #F87171; }
.mk-pred .mk-tbl { width: 100%; font-size: 12.5px; } .mk-pred .mk-tbl td.num { text-align: right; white-space: nowrap; }
html[data-mode="light"] .mk-gauge-pin { background: #08142E; box-shadow: 0 0 0 2px #fff; }
.mk-sent th:nth-child(3), .mk-sent td:nth-child(3) { text-align: left !important; padding-left: 14px; }
/* Details page: specifications in 2 blocks (label | value) in the header */
.mk-hrow > div:first-child { flex: 1 1 auto; }
.mk-specs { display: flex; gap: 14px; flex-wrap: wrap; }
.mk-spec { border-collapse: separate; border-spacing: 0; background: #0A1633; border: 1px solid #1A2A4C; border-radius: 12px; overflow: hidden; font-size: 12.5px; min-width: 250px; }
.mk-spec th, .mk-spec td { padding: 6px 14px; border-bottom: 1px solid #1A2D52; white-space: nowrap; }
.mk-spec tr:last-child th, .mk-spec tr:last-child td { border-bottom: 0; }
.mk-spec th { font-size: 10.5px; letter-spacing: .14em; color: var(--gold); font-weight: 700; border-right: 1px solid #1A2A4C; text-align: left; }
.mk-spec td { color: #fff; font-weight: 600; }
html[data-mode="light"] .mk-spec { background: #fff; border-color: #DCE3EE; } html[data-mode="light"] .mk-spec td { color: var(--navy); }
html[data-mode="light"] .mk-spec th, html[data-mode="light"] .mk-spec td { border-color: #E6EBF3; } html[data-mode="light"] .mk-spec th { color: #B07F1F; }
.mk-dt td.mk-tick { font-weight: 700; letter-spacing: .04em; color: var(--gold); white-space: nowrap; } html[data-mode="light"] .mk-dt td.mk-tick { color: #B07F1F; }
/* Details page: last price block at the top right (price, change and %, date time and currency) */
.mk-last { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; text-align: right; margin-left: auto; }
.mk-last-px { font-family: var(--serif, Georgia, serif); font-size: 44px; line-height: 1; font-weight: 700; color: #fff; font-variant-numeric: tabular-nums; }
.mk-last-chg { font-size: 19px; font-weight: 700; font-variant-numeric: tabular-nums; } .mk-last-chg.up { color: #34D399; } .mk-last-chg.dn { color: #F87171; }
.mk-last-at { font-size: 13px; color: var(--muted); letter-spacing: .02em; }
html[data-mode="light"] .mk-last-px { color: var(--navy); }
@media (max-width: 900px) { .mk-last { align-items: flex-start; text-align: left; margin-left: 0; } .mk-last-px { font-size: 34px; } }
/* Details page: specifications card (identification and codes | figures), before the chart */
.mk-specs-card { margin-top: 14px; } .mk-specs-card h3 { margin-bottom: 10px; }
.mk-specs-card .mk-spec { width: 100%; min-width: 0; font-size: 13px; }
.mk-specs-card .mk-spec th { width: 42%; } .mk-specs-card .mk-spec td { white-space: normal; word-break: break-word; font-variant-numeric: tabular-nums; }
/* Prediction and sentiment: count and share of the BEARISH, NEUTRAL and BULLISH signals */
.mk-sent-sum { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 14px; }
.mk-sent-box { --c: #9DB0CC; text-align: center; padding: 10px 8px; border-radius: 10px; border: 1px solid color-mix(in srgb, var(--c) 45%, transparent);
  background: color-mix(in srgb, var(--c) 10%, transparent); }
.mk-sent-box.bearish { --c: #F87171; } .mk-sent-box.bullish { --c: #34D399; }
.mk-sent-box span { display: block; font-size: 11px; font-weight: 700; letter-spacing: .12em; color: var(--c); }
.mk-sent-box b { display: block; font-size: 26px; line-height: 1.15; color: var(--c); font-variant-numeric: tabular-nums; }
.mk-sent-box em { display: block; font-style: normal; font-size: 13px; font-weight: 600; color: var(--muted); }
.mk-sent-box { position: relative; transition: transform .2s; }
.mk-sent-box.maj { background: color-mix(in srgb, var(--c) 26%, transparent); border: 2px solid var(--c); transform: scale(1.04);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--c) 18%, transparent), 0 10px 26px color-mix(in srgb, var(--c) 30%, transparent); }
.mk-sent-box.maj b { font-size: 30px; }
.mk-sent-box i { position: absolute; top: -9px; left: 50%; transform: translateX(-50%); font-style: normal; font-size: 9.5px; font-weight: 800; letter-spacing: .12em;
  padding: 2px 8px; border-radius: 6px; background: var(--c); color: #050C1E; white-space: nowrap; }

/* ---------- CCPI: longer platform name above the hero logo ---------- */
.ccpi-name { max-width: 100%; }
.ccpi-name span { font-size: 20px; letter-spacing: .22em; padding-left: .22em; text-align: center; }
.ccpi-name i { width: 110px; flex: 0 0 auto; }
@media (max-width: 1100px) { .ccpi-name span { font-size: 16px; letter-spacing: .16em; } .ccpi-name i { width: 60px; } }
@media (max-width: 640px) { .ccpi-name span { font-size: 11px; letter-spacing: .1em; } .ccpi-name i { width: 22px; } }
.lg-card .mk-kick { letter-spacing: .14em; font-size: 11px; }

/* ---------- CCPI home: logo x1.25 x1.25 with the text moved down, wider intro text 1px smaller ---------- */
.hero img.logo { width: 515px; max-width: 88%; margin: 0 auto 64px; }
.hero img.logo.logo-mon { width: 469px; }  /* NXW monitor logo: 300px x1.25 x1.25 */
.hero h1 { margin-top: 18px; }
.hero p { font-size: 17px; max-width: 1040px; }
@media (max-width: 640px) { .hero img.logo { margin-bottom: 34px; } }

/* ---------- Database, IMS engine, Index builder, Market Place ---------- */
.ix-two { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.ix-two.ix-wide { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
.ix-two > .mk-card { min-width: 0; }
@media (max-width: 1000px) { .ix-two, .ix-two.ix-wide { grid-template-columns: 1fr; } }
.ix-ctl { display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-end; }
.ix-ctl .form-group { margin-bottom: 0; }
.ix-ctl label, .ix-form label { font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); font-weight: 600; }
.ix-form .form-group { margin-bottom: 12px; }
.ix-form .checkbox-inline, .ix-form .radio-inline { margin-right: 12px; font-size: 13px; }
.ix-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin: 8px 0 18px; }
.ix-actions .btn-gold { color: #050C1E !important; font-weight: 700; letter-spacing: .04em; padding: 9px 20px; }
.ix-dls { display: flex; flex-wrap: wrap; gap: 8px; margin: 6px 0 4px; }
.ix-err { color: #F87171; font-size: 13px; font-weight: 600; } .ix-ok { color: #34D399; font-size: 13px; font-weight: 600; }
.ix-note { grid-column: 1 / -1; font-size: 12.5px; color: var(--muted); margin: 4px 0 0; }
.ix-lead p { max-width: 760px; color: var(--muted); margin: 10px 0 0; }
.ix-steps { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
.ix-step { display: inline-flex; align-items: center; gap: 10px; padding: 8px 16px 8px 8px; border-radius: 12px; border: 1px solid #1A2A4C;
  background: #0A1633; color: #C8D4E8 !important; text-decoration: none; font-weight: 700; font-size: 13px; letter-spacing: .08em; text-transform: uppercase; }
.ix-step em { font-style: normal; width: 26px; height: 26px; border-radius: 8px; display: grid; place-items: center; background: rgba(255,255,255,.08); color: var(--gold2); }
.ix-step:hover { border-color: var(--gold); }
.ix-step.cur { border-color: var(--gold); background: linear-gradient(135deg, rgba(212,164,64,.28), rgba(212,164,64,.08)); color: #fff !important; }
.ix-step.cur em { background: linear-gradient(135deg, #D4A440, #F0D890); color: #050C1E; }
.ix-podium { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-bottom: 14px; }
.ix-pod { border: 1px solid #1A2A4C; border-radius: 12px; padding: 12px 14px; background: rgba(255,255,255,.03); display: flex; flex-direction: column; gap: 3px; }
.ix-pod em { font-style: normal; font-size: 11px; font-weight: 700; letter-spacing: .16em; color: var(--gold2); }
.ix-pod b { font-size: 16px; color: #fff; } .ix-pod span { font-size: 12.5px; color: var(--muted); } .ix-pod small { font-size: 12px; color: #C8D4E8; }
.ix-pod.p1 { border-color: rgba(212,164,64,.7); background: linear-gradient(135deg, rgba(212,164,64,.18), transparent); }
.ix-pod.p2 { border-color: rgba(200,212,232,.45); } .ix-pod.p3 { border-color: rgba(205,127,50,.55); }
@media (max-width: 800px) { .ix-podium { grid-template-columns: 1fr; } }
.ix-id { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 18px; margin-bottom: 14px; }
.ix-id > div { display: flex; flex-direction: column; } .ix-id .full { grid-column: 1 / -1; }
.ix-id span { font-size: 11px; letter-spacing: .14em; color: var(--muted); font-weight: 600; } .ix-id b { font-size: 14px; color: #fff; font-weight: 600; }
.mk-tbl { font-size: 13px; } .mk-tbl th { font-size: 11px; letter-spacing: .1em; color: var(--gold2); border-bottom: 1px solid #1A2A4C !important; }
.mk-tbl td { border-bottom: 1px solid #1A2A4C !important; color: var(--ink); }
.mk-quick a.db-grp { --c: #D4A440; --c2: #F0D890; }
html[data-mode="light"] .ix-step, html[data-mode="light"] .ix-pod { background: #fff; border-color: #DCE3EE; color: var(--navy) !important; }
html[data-mode="light"] .ix-step.cur { color: var(--navy) !important; } html[data-mode="light"] .ix-pod b, html[data-mode="light"] .ix-id b { color: var(--navy); }
html[data-mode="light"] .ix-pod small { color: #44546E; } html[data-mode="light"] .mk-tbl th { color: #B07F1F; }
.mk-card .dataTables_wrapper { overflow-x: auto; }

/* ---------- Administration (header icon ADMINISTRATION and the tabs of the admin page), as in VTPWEB ---------- */
.cbtn.admbtn { color: #fff !important; background: linear-gradient(180deg, #EF4444, #B91C1C) !important; border-color: #F87171 !important; box-shadow: 0 4px 14px rgba(220,38,38,.35); }
.cbtn.admbtn:hover, html.admin .cbtn.admbtn { background: linear-gradient(180deg, #F87171, #DC2626) !important; color: #fff !important; }
html.admin .cbtn.admbtn::after { content: ""; position: absolute; top: 5px; right: 5px; width: 7px; height: 7px; border-radius: 50%; background: #34D399; box-shadow: 0 0 6px #34D399; }
.cbtn.admbtn { position: relative; }
.adm-tabs { margin: 4px 0 16px; }
.adm-tabs .shiny-options-group { display: flex; flex-wrap: wrap; gap: 8px; }
.adm-tabs .radio-inline { margin: 0 !important; padding: 0 !important; }
.adm-tabs .radio-inline input { position: absolute; opacity: 0; }
.adm-tabs .radio-inline span { display: inline-block; padding: 9px 16px; border-radius: 10px; border: 1px solid #213760; background: #0A1633; font-weight: 800; font-size: 12.5px; letter-spacing: .1em; cursor: pointer; }
.adm-tabs .radio-inline input:checked + span { border-color: var(--gold); color: #fff; background: linear-gradient(180deg, rgba(212,164,64,.35), rgba(212,164,64,.12)); box-shadow: 0 0 0 1px var(--gold) inset; }
.adm-grid3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px 22px; margin-top: 12px; align-items: start; }
@media (max-width: 900px) { .adm-grid3 { grid-template-columns: 1fr; } }
.adm-col label { display: block; margin-bottom: 6px; } .adm-col div { display: flex; align-items: center; gap: 10px; }
.adm-col input[type=color] { width: 56px; height: 38px; padding: 2px; border-radius: 8px; border: 1px solid #213760; background: #0A1633; cursor: pointer; }
.adm-col code { color: var(--gold2); background: none; }
.adm-h3 { margin-top: 22px !important; font-size: 14px !important; color: var(--gold2) !important; }
.adm-acts { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-top: 16px; } .adm-acts .shiny-input-container { margin: 0; }
.adm-acts .adm-b, .mk-act .adm-b { margin-left: 0; padding: 6px 14px; color: var(--ink); border-color: #213760; }
.adm-b.warn { color: #FBBF24; border-color: rgba(251,191,36,.5); } .adm-b.warn:hover { background: rgba(251,191,36,.14); }
.mk-act { display: flex; flex-wrap: wrap; gap: 8px; }
.adm-nav td { vertical-align: middle; } .adm-nav td .shiny-input-container, .adm-nav td .form-group { margin: 0; width: 100% !important; }
.adm-nav th:nth-child(2), .adm-nav td:nth-child(2) { text-align: center !important; width: 90px; } .adm-nav td:nth-child(2) .checkbox { margin: 0; display: inline-block; }
.adm-nav th:nth-child(3), .adm-nav td:nth-child(3) { text-align: left !important; width: 50%; }
.adm-nav tr.top td { border-top: 1px solid #213760; } .adm-sub { color: var(--muted); margin-left: 14px; }
/* banner and maintenance screen */
.cms-banner { position: relative; z-index: 1040; display: flex; align-items: center; justify-content: center; gap: 16px; padding: 9px 48px; font-weight: 600; font-size: 14px; text-align: center; }
.cms-banner.info { background: linear-gradient(90deg, #1E3A8A, #1D4ED8); color: #fff; } .cms-banner.success { background: linear-gradient(90deg, #065F46, #059669); color: #fff; }
.cms-banner.warning { background: linear-gradient(90deg, #92400E, #D97706); color: #fff; }
.cms-banner button { position: absolute; right: 14px; background: none; border: 0; color: inherit; font-size: 22px; line-height: 1; cursor: pointer; opacity: .8; }
#cms_maint { position: fixed; inset: 0; z-index: 2000; display: flex; align-items: center; justify-content: center; background: radial-gradient(circle at 50% 30%, #0E1F45, #030817 70%); }
#cms_maint.off { display: none; }
.cms-mcard { text-align: center; max-width: 520px; padding: 40px; } .cms-mcard img { width: 220px; margin-bottom: 18px; }
.cms-mcard h2 { color: var(--gold2); font-family: Georgia, serif; font-style: italic; font-size: 40px; } .cms-mcard p { color: #C7D3E8; font-size: 16px; margin: 14px 0 26px; }
.cms-mcard a { color: var(--muted) !important; font-size: 13px; }
html.no-signup #lg_in .lg-alt { display: none; }
.adm-wrap { padding: 36px 56px 40px; } @media (max-width: 800px) { .adm-wrap { padding: 24px 16px; } }
/* admin sign-in (from the admin icon): red box */
html.lg-admin .lg-card { background: linear-gradient(180deg, #7F1D1D, #450A0A) !important; border-color: #EF4444 !important; box-shadow: 0 20px 60px rgba(127,29,29,.55), 0 0 0 1px rgba(239,68,68,.35) inset; }
html.lg-admin .lg-card .mk-kick { color: #FECACA !important; }
html.lg-admin .lg-card .lg-sub, html.lg-admin .lg-card label { color: #FECACA !important; }
html.lg-admin .lg-card .form-control { background: rgba(0,0,0,.28) !important; border-color: rgba(254,202,202,.35) !important; color: #fff !important; }
html.lg-admin .lg-card #lg_go { background: #EF4444 !important; border-color: #EF4444 !important; color: #fff !important; }
html.lg-admin .lg-card .lg-alt, html.lg-admin .lg-card .lg-foot { display: none; }
.adm-wrap .mk-card h3 { font-size: 24px; color: var(--gold2) !important; letter-spacing: .06em; margin-bottom: 8px; }
html[data-mode="light"] .adm-wrap .mk-card h3 { color: #A87A1E !important; }
.adm-up { margin-top: 16px; padding-top: 14px; border-top: 1px solid rgba(127,178,255,.18); }
.adm-up .form-group { margin-bottom: 6px; max-width: 520px; }
.adm-up-ok { color: #34D399; font-weight: 600; margin: 6px 0 0; } .adm-up-err { color: #F87171; font-weight: 600; margin: 6px 0 0; }
html[data-mode="light"] .adm-tabs .radio-inline span, html[data-mode="light"] .adm-col input[type=color] { background: #fff; border-color: #DCE3EE; color: var(--navy); }

/* ---------- Floating UNDER CONSTRUCTION bar (bottom of every page; Administration > Options) ---------- */
.uc-bar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 1030; display: flex; align-items: center; justify-content: center; gap: 18px;
  padding: 9px 22px; border-top: 1px dashed rgba(212,164,64,.55); color: #E6ECF6; font-size: 15px;
  background: repeating-linear-gradient(135deg, rgba(212,164,64,.16) 0 16px, rgba(4,9,20,.92) 16px 32px), #040914;
  box-shadow: 0 -8px 24px rgba(0,0,0,.35); backdrop-filter: blur(3px); }
.uc-pill { flex: none; padding: 5px 16px; border-radius: 6px; background: linear-gradient(180deg, #F0D890, #D4A440); color: #1A1204;
  font-weight: 800; font-size: 13px; letter-spacing: .2em; text-transform: uppercase; box-shadow: 0 2px 10px rgba(212,164,64,.35); }
.uc-txt { font-weight: 400; }
body { padding-bottom: 52px; }
html.no-uc .uc-bar { display: none !important; } html.no-uc body { padding-bottom: 0; }
html.locked .uc-bar, html.maint .uc-bar { display: none; }
html[data-mode="light"] .uc-bar { color: #1B2A44; background: repeating-linear-gradient(135deg, rgba(212,164,64,.22) 0 16px, rgba(255,255,255,.95) 16px 32px), #fff; }
@media (max-width: 640px) { .uc-bar { gap: 10px; padding: 7px 10px; font-size: 12px; } .uc-pill { font-size: 10.5px; letter-spacing: .12em; padding: 4px 9px; } body { padding-bottom: 64px; } }

/* ---------- Administration icon: red background; language button; SETTINGS and OUR WEB APPS tabs ---------- */
.navbar .cbtn.admbtn, .cbtn.admbtn { background: #DC2626 !important; border-color: #EF4444 !important; color: #fff !important; box-shadow: 0 4px 14px rgba(220,38,38,.45); }
.navbar .cbtn.admbtn:hover, html.admin .cbtn.admbtn { background: #EF4444 !important; color: #fff !important; }
html[data-mode="light"] .cbtn.admbtn { background: #DC2626 !important; color: #fff !important; }
.lang-wrap { position: relative; display: inline-flex; }
.cbtn.langbtn { width: auto !important; padding: 0 10px; gap: 5px; display: inline-flex; align-items: center; }
.cbtn.langbtn svg { width: 16.2px; height: 16.2px; } #lang_lbl { font-weight: 800; font-size: 12px; letter-spacing: .06em; }
.lang-menu { display: none; position: absolute; top: calc(100% + 8px); right: 0; min-width: 170px; padding: 6px; z-index: 2000;
  background: #0A1633; border: 1px solid #213760; border-radius: 12px; box-shadow: 0 14px 34px rgba(0,0,0,.4); }
.lang-wrap.open .lang-menu { display: block; }
.lang-menu a { display: flex; gap: 10px; align-items: center; padding: 8px 10px; border-radius: 8px; color: #DCE6F7 !important; text-decoration: none; font-size: 14px; }
.lang-menu a b { width: 26px; font-size: 12px; letter-spacing: .06em; color: var(--gold2); }
.lang-menu a:hover { background: rgba(255,255,255,.06); } .lang-menu a.on { background: rgba(212,164,64,.16); }
html[data-mode="light"] .lang-menu { background: #fff; border-color: #DCE3EE; } html[data-mode="light"] .lang-menu a { color: var(--ink) !important; }
.adm-set .orow > span { display: block; font-size: 13px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); margin-bottom: 8px; }
.adm-set .seg { background: #050C1E; border-color: #213760; } .adm-set .seg button { color: #DCE6F7; padding: 9px 10px; }
.adm-set .seg button.on { background: var(--gold); color: #050C1E; }
html[data-mode="light"] .adm-set .seg { background: #F2F5FA; border-color: #DCE3EE; } html[data-mode="light"] .adm-set .seg button { color: var(--ink); }
.wa-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 14px; margin: 6px 0 16px; }
.wa-card { display: flex; flex-direction: column; gap: 6px; padding: 16px 18px; border: 1px solid #213760; border-radius: 12px; background: rgba(10,22,51,.6);
  text-decoration: none !important; color: #DCE6F7 !important; transition: border-color .15s, transform .15s; }
.wa-card:hover { border-color: var(--gold); transform: translateY(-2px); }
.wa-card b { font-size: 17px; color: var(--gold2); } .wa-card span { font-size: 13.5px; color: #AFC0DA; } .wa-card code { font-size: 11.5px; color: #7FB2FF; background: none; padding: 0; }
html[data-mode="light"] .wa-card { background: #fff; border-color: #DCE3EE; color: var(--ink) !important; } html[data-mode="light"] .wa-card b { color: #A87A1E; }

/* ---------- Top bar: search, mail, user, language, administration (same rounded squares, thin outline) ---------- */
.navbar .tools-end { margin-left: 8px; }
.navbar .nav-item:has(> .tools-end), .navbar .nav-item:has(> .ubox) { display: flex; align-items: center; }
.cbtn.langbtn { width: auto !important; min-width: 86px; flex: 0 0 auto !important; padding: 0 14px; gap: 8px; }
.cbtn.langbtn svg { width: 18px; height: 18px; } #lang_lbl { color: var(--gold); font-size: 14px; }
.navbar .cbtn.admbtn, .cbtn.admbtn { background: #C62828 !important; border-color: #C62828 !important; color: #fff !important; box-shadow: none; }
.navbar .cbtn.admbtn:hover, html.admin .cbtn.admbtn { background: #D32F2F !important; border-color: #D32F2F !important; }
.cbtn.admbtn svg { width: 19.8px; height: 19.8px; }
.navbar .tools-end { margin-left: 0; }
.navbar .cbtn.ubtn { border-color: rgba(212,164,64,.75) !important; }
.navbar .nav-item:has(> .tools-end) { margin-left: -8px; }
.navbar .tools-end { padding-left: 8px; }

/* CCPI wordmark beside the NXW logo (same style as the VTP mark of VTPWEB) */
.ccpi-mark { display: inline-flex; flex-direction: column; align-items: flex-start; justify-content: center; line-height: 1; text-decoration: none !important;
  padding: 0 14px 0 14px; border-left: 1px solid rgba(212,164,64,.45); }
.ccpi-mark b { font-family: inherit; font-weight: 900; font-size: 27px; letter-spacing: .12em; line-height: 1;
  background: linear-gradient(180deg, #F7E3A1 0%, #E9B54A 45%, #B8862A 100%); -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 2px 6px rgba(212,164,64,.35)); }
.ccpi-mark small { margin-top: 4px; font-size: 7.5px; font-weight: 700; letter-spacing: .32em; color: #8FB4F0; white-space: nowrap; }
html[data-mode="light"] .ccpi-mark b { background: linear-gradient(180deg, #2E6FE0 0%, #0A4DB8 55%, #0B1A3A 100%); -webkit-background-clip: text; background-clip: text; filter: none; }
html[data-mode="light"] .ccpi-mark small { color: #A87A1E; }
@media (max-width: 640px) { .ccpi-mark { padding: 0 8px; } .ccpi-mark b { font-size: 20px; } .ccpi-mark small { display: none; } }
@media (max-width: 440px) { .ccpi-mark { padding: 0 6px; } .ccpi-mark b { font-size: 17px; letter-spacing: .08em; } .navbar .plat-badge { font-size: 10.5px !important; padding: 3px 8px !important; letter-spacing: .06em !important; } }

@media (max-width: 640px) { .ha-btn { min-width: 0; padding: 11px 16px; letter-spacing: .1em; } }

/* ==== CCPI, step by step: the CCPR page styles, kept inside .xp (explain_pages.R) ==== */
.xp .xp-page { max-width:1180px; margin:0 auto; padding:110px 28px 40px; box-sizing:border-box; }
.xp .pg-tag { display:flex; align-items:center; justify-content:center; color:#e1bb64; font-family:"Montserrat",sans-serif;
  font-weight:700; letter-spacing:.3em; font-size:15px; }
.xp .pg-tag::before, .xp .pg-tag::after { content:""; width:90px; height:1.6px; }
.xp .pg-tag::before { background:linear-gradient(90deg, transparent, #d4a440); }
.xp .pg-tag::after { background:linear-gradient(270deg, transparent, #d4a440); }
.xp .pg-tag i.d { width:7px; height:7px; background:#d4a440; transform:rotate(45deg); margin:0 -3px; flex:none; }
.xp .pg-tag span { margin:0 calc(22px - .3em) 0 22px; }
.xp .pg-title { font-family:"Poppins",sans-serif; font-weight:700; color:#fff; font-size:clamp(28px, 3.6vw, 46px);
  letter-spacing:-.02em; line-height:1.15; text-align:center; margin:22px auto 14px; max-width:1100px; }
.xp .pg-title + .sec { margin-top:30px; }
.xp .pg-title + .xgrid { margin-top:32px; }
.xp .gold { color:#d4a440; }
.xp .pg-lead { text-align:center; font-size:17px; line-height:1.65; max-width:900px; margin:0 auto 28px; }
.xp .left { text-align:left !important; margin-left:0 !important; }
.xp .promise { text-align:center; font-family:"Poppins",sans-serif; font-style:italic; font-weight:400; color:#e8c979;
  font-size:22px; margin:0 auto 34px; }
.xp .kpis { display:flex; justify-content:center; flex-wrap:wrap; gap:18px; margin:0 0 34px; }
.xp .kpis.left { justify-content:flex-start; }
.xp .kpi { min-width:200px; flex:1; max-width:300px; text-align:center; padding:18px 16px; border-top:1px solid #d4a440;
  background:linear-gradient(180deg, rgba(212,164,64,.08), transparent); }
.xp .kpi b { display:block; font-family:"Poppins",sans-serif; font-weight:700; color:#d4a440; font-size:34px; line-height:1.1; }
.xp .kpi span { font-size:13px; color:#aab6cc; }
.xp .xgrid { display:grid; gap:16px; margin:0 0 34px; }
.xp .g2 { grid-template-columns:repeat(auto-fit, minmax(300px, 1fr)); }
.xp .g3 { grid-template-columns:repeat(auto-fit, minmax(280px, 1fr)); }
.xp .g4 { grid-template-columns:repeat(auto-fit, minmax(230px, 1fr)); }
.xp .xcard { background:rgba(10,26,60,.55); border:1px solid #1f3a6a; border-radius:14px; padding:22px 22px 20px; }
.xp .xcard h4 { font-family:"Poppins",sans-serif; font-weight:600; color:#fff; font-size:17px; margin:0 0 6px; }
.xp .xcard h4 small { display:block; font-family:"Montserrat",sans-serif; color:#e1bb64; font-size:10.5px; letter-spacing:.25em; font-weight:700; margin-top:2px; }
.xp .xcard p { margin:0; font-size:14.5px; line-height:1.55; color:#c3cddf; }
.xp .xcard em { display:block; font-style:normal; font-family:"Montserrat",sans-serif; font-weight:800; color:#d4a440; letter-spacing:.12em;
  font-size:13px; margin-bottom:8px; }
.xp .xcard.hl { border-color:#d4a440; background:linear-gradient(180deg, rgba(212,164,64,.12), rgba(10,26,60,.55)); }
.xp .xcard ul { margin:10px 0 0; padding-left:18px; font-size:14.5px; line-height:1.7; color:#c3cddf; }
.xp .xcard ul li::marker { color:#d4a440; }
.xp .years .xcard small, .xp .xcard > small { color:#aab6cc; font-size:12.5px; }
.xp .sec { font-family:"Montserrat",sans-serif; font-weight:700; color:#e1bb64; letter-spacing:.28em; font-size:13px; margin:8px 0 14px; }
.xp .sec.center { text-align:center; margin-top:16px; }
.xp .xtwo { display:grid; grid-template-columns:1fr 1.4fr; gap:36px; margin:0 0 34px; align-items:start; }
.xp .muted { color:#aab6cc; font-size:14.5px; line-height:1.6; }
.xp .plain { list-style:none; padding:0; margin:0 0 22px; line-height:2; font-size:15px; }
.xp .plain b { color:#fff; font-weight:600; }
.xp .numbered { list-style:none; padding:0; margin:0; }
.xp .numbered li { display:flex; gap:18px; padding:14px 0; border-top:1px solid #1f3a6a; font-size:15px; line-height:1.55; }
.xp .numbered li > span { font-family:"Montserrat",sans-serif; font-weight:800; color:#d4a440; min-width:28px; }
.xp .numbered strong { color:#fff; font-weight:600; }
.xp .numbered.cols { display:grid; grid-template-columns:1fr 1fr; column-gap:36px; margin-bottom:34px; }
.xp .tbl { overflow-x:auto; margin:0 0 30px; border:1px solid #1f3a6a; border-radius:14px; }
.xp .tbl table { width:100%; border-collapse:collapse; font-size:14.5px; }
.xp .tbl th { text-align:left; font-family:"Montserrat",sans-serif; font-size:11px; letter-spacing:.2em; text-transform:uppercase;
  color:#aab6cc; background:rgba(5,12,28,.6); padding:12px 16px; }
.xp .tbl td { padding:11px 16px; border-top:1px solid #16294d; vertical-align:top; }
.xp .tbl td:first-child { color:#fff; font-weight:500; }
.xp .tbl .g { color:#e8c979; }
.xp .tbl th.g { color:#e1bb64; }
.xp .offer { display:flex; align-items:center; gap:22px; padding:18px 24px; border:1px solid #d4a440; border-radius:14px;
  background:linear-gradient(90deg, rgba(212,164,64,.16), rgba(212,164,64,.03)); }
.xp .offer b { font-family:"Poppins",sans-serif; font-size:40px; color:#e8c979; font-weight:700; }
.xp .offer strong { color:#fff; font-weight:600; }
.xp .note { font-size:12.5px; color:#8090aa; margin-top:12px; }
.xp .market { padding:20px 22px; border-left:2px solid #d4a440; background:rgba(10,26,60,.55); border-radius:0 14px 14px 0; margin-top:16px; }
.xp .market b { display:block; font-family:"Poppins",sans-serif; font-size:34px; color:#d4a440; font-weight:700; }
.xp .market b.sm { font-size:18px; }
.xp .market span { font-size:14.5px; color:#c3cddf; line-height:1.55; }
.xp .leader { display:grid; grid-template-columns:220px 1fr; gap:36px; align-items:center; margin:30px 0 30px; }
.xp .leader img { width:220px; height:290px; object-fit:cover; border-radius:14px; border:1px solid #d4a440; }
.xp .gold-l { font-family:"Montserrat",sans-serif; color:#e1bb64; letter-spacing:.25em; font-weight:700; font-size:11.5px; }
.xp .leader .pg-title { margin:8px 0 8px; }
.xp .leader .kpis { margin:18px 0 0; }
.xp .profile { display:grid; grid-template-columns:240px 1fr; margin:0 0 34px; }
.xp .profile dt { font-family:"Montserrat",sans-serif; font-weight:700; font-size:11.5px; letter-spacing:.2em; text-transform:uppercase;
  color:#e1bb64; padding:14px 0; border-top:1px solid #1f3a6a; }
.xp .profile dd { margin:0; padding:12px 0; border-top:1px solid #1f3a6a; font-size:15px; line-height:1.6; }
.xp .sitefoot { max-width:1180px; margin:20px auto 0; padding:28px; box-sizing:border-box; display:flex; flex-wrap:wrap;
  justify-content:space-between; align-items:center; gap:18px; border-top:1px solid #1f3a6a; }
.xp .sitefoot small { display:block; font-family:"Montserrat",sans-serif; color:#e1bb64; letter-spacing:.25em; font-weight:700; font-size:11px; margin-bottom:4px; }
.xp .sitefoot b { font-family:"Poppins",sans-serif; color:#fff; font-size:22px; font-weight:600; }
.xp .sitefoot .contact { text-align:right; }
.xp .sitefoot a { color:#e8c979; text-decoration:none; font-size:17px; }
.xp .sitefoot .legal { flex-basis:100%; font-size:12px; color:#6f7f9b; margin:8px 0 0; }
@media (max-width:860px) {
.xp .xtwo, .xp .numbered.cols, .xp .leader, .xp .profile { grid-template-columns:1fr; }
.xp .leader img { margin:0 auto; }
.xp .profile dt { padding-bottom:0; }
.xp .profile dd { border-top:0; }
.xp .topnav { padding:10px 14px; }
.xp .topnav .brand span { display:none; }
.xp .xp-page { padding-top:80px; }
.xp .pg-tag::before, .xp .pg-tag::after { width:30px; }
.xp .sitefoot .contact { text-align:left; }
}
.xp .mini .xcard { padding:16px; }
.xp .big { display:block; font-family:"Poppins",sans-serif; font-weight:700; color:#d4a440; font-size:21px; line-height:1.2; margin-bottom:2px; }
.xp .cmp { display:grid; grid-template-columns:90px 1fr 80px; align-items:center; gap:12px; margin-top:14px; font-size:14px; color:#aab6cc; }
.xp .cmp .bar { height:12px; background:rgba(255,255,255,.06); border-radius:6px; overflow:hidden; }
.xp .cmp .bar i { display:block; height:100%; background:#5a6886; border-radius:6px; }
.xp .cmp.g .bar i { background:linear-gradient(90deg,#d4a440,#e8c979); }
.xp .cmp b { color:#fff; font-weight:600; text-align:right; }
.xp .cmp.g b { color:#e8c979; }
.xp .hbars { margin:0 0 30px; }
.xp .hbars > div { display:grid; grid-template-columns:220px 1fr 60px; align-items:center; gap:14px; padding:7px 0; font-size:14.5px; }
.xp .hbars span { color:#d5deec; }
.xp .hbars b { color:#e8c979; font-weight:600; text-align:right; font-family:"Montserrat",sans-serif; }
.xp .hbars .bar { position:relative; height:12px; background:rgba(255,255,255,.05); border-radius:6px; }
.xp .hbars .bar i { position:absolute; top:0; bottom:0; right:0; border-radius:6px; background:linear-gradient(90deg,#d4a440,#e8c979); }
.xp .xsteps { display:grid; grid-template-columns:repeat(4,1fr); gap:16px; margin:0 0 34px; counter-reset:s; }
.xp .xsteps > div { position:relative; padding:20px 20px 18px; border-top:2px solid #d4a440; background:rgba(10,26,60,.55); border-radius:0 0 14px 14px; }
.xp .xsteps b { font-family:"Poppins",sans-serif; font-size:30px; font-weight:700; color:#d4a440; line-height:1; }
.xp .xsteps h4 { font-family:"Poppins",sans-serif; font-weight:600; color:#fff; font-size:17px; margin:8px 0 4px; }
.xp .xsteps p { margin:0; font-size:14.5px; line-height:1.55; color:#c3cddf; }
.xp .refs { margin:0; padding-left:18px; font-size:14.5px; line-height:1.6; }
.xp .refs li { padding:4px 0; }
.xp .refs li::marker { color:#d4a440; }
.xp .refs i { color:#fff; }
.xp .chips { display:flex; flex-wrap:wrap; gap:10px; margin:0 0 30px; }
.xp .chips span { padding:8px 14px; border:1px solid #2a4a82; border-radius:999px; font-size:13.5px; color:#d5deec; background:rgba(10,26,60,.55); }
.xp .ticks li::before { content:"\25C6"; color:#d4a440; font-size:10px; margin-right:10px; position:relative; top:-2px; }
.xp b.w { color:#fff; font-weight:600; }
.xp .hist { display:grid; grid-template-columns:repeat(7,1fr); gap:0; margin:0 0 38px; border-top:2px solid #1f3a6a; }
.xp .hist > div { position:relative; padding:22px 14px 0 0; }
.xp .hist > div::before { content:""; position:absolute; top:-7px; left:0; width:12px; height:12px; background:#0a1a3c; border:2px solid #d4a440; transform:rotate(45deg); }
.xp .hist > div.on::before { background:#d4a440; }
.xp .hist b { font-family:"Poppins",sans-serif; color:#d4a440; font-size:22px; font-weight:700; }
.xp .hist p { margin:6px 0 0; font-size:13.5px; line-height:1.5; color:#c3cddf; }
.xp .hist strong { color:#fff; font-weight:600; }
.xp .offer a { color:#e8c979; }
.xp .sitefoot .addr { display:block; font-size:12.5px; color:#8394b3; margin-top:4px; }
@media (max-width:860px) {
.xp .xsteps { grid-template-columns:1fr 1fr; }
.xp .hist { grid-template-columns:1fr; border-top:0; border-left:2px solid #1f3a6a; }
.xp .hist > div { padding:4px 0 18px 22px; }
.xp .hist > div::before { top:8px; left:-8px; }
.xp .hbars > div { grid-template-columns:1fr 54px; }
.xp .hbars .bar { grid-column:1/3; grid-row:2; }
.xp .cmp { grid-template-columns:76px 1fr 66px; }
}
@media (max-width:760px) {
.xp body.inner .topnav .links { flex-wrap:nowrap; justify-content:flex-start; overflow-x:auto; }
}
.xp body.inner .topnav .links { gap:6px 17px; }
.xp body.inner .topnav .links a { font-size:11px; letter-spacing:.13em; }
.xp .xgrid.mini { grid-template-columns:repeat(3,1fr); }
@media (max-width:560px) {
.xp .xgrid.mini { grid-template-columns:1fr; }
}
.xp .pg-title + .sec.center { margin-top:34px; }
.xp .hist { margin-top:28px; }
.xp .offer b { white-space:nowrap; }
.xp .stepbar { display:flex; align-items:center; justify-content:space-between; gap:16px; margin:0 auto 34px; max-width:1100px; }
.xp .stepbar-bottom { margin:48px auto 10px; padding-top:26px; border-top:1px solid #1d3463; }
.xp .sb-btn { display:flex; align-items:center; gap:12px; min-width:0; flex:0 1 260px; padding:10px 14px; border:1px solid #1d3463; border-radius:10px; background:rgba(10,26,60,.6);
  color:#fff; text-decoration:none; font-family:"Montserrat",sans-serif; transition:border-color .2s, background .2s; }
.xp .sb-btn:hover { border-color:#d4a440; background:#11254d; }
.xp .sb-next { justify-content:flex-end; text-align:right; }
.xp .sb-btn small { display:block; font-size:10px; letter-spacing:.18em; text-transform:uppercase; color:#e1bb64; font-weight:700; }
.xp .sb-btn b { display:block; font-size:14px; font-weight:700; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; margin-top:3px; }
.xp .sb-arr { font-size:30px; line-height:1; color:#d4a440; }
.xp .sb-btn.off { opacity:.3; pointer-events:none; }
.xp .sb-mid { text-align:center; flex:1 1 auto; min-width:0; }
.xp .sb-mid small { display:block; font:700 10.5px "Montserrat",sans-serif; letter-spacing:.2em; text-transform:uppercase; color:#aab6cc; margin-bottom:9px; }
.xp .sb-dots { display:flex; justify-content:center; gap:7px; flex-wrap:wrap; }
.xp .sb-dot { width:9px; height:9px; border-radius:50%; background:#1d3463; border:1px solid #2c4a80; }
.xp .sb-dot.done { background:#9a7a3a; border-color:#9a7a3a; }
.xp .sb-dot.on { background:#d4a440; border-color:#e8c979; transform:scale(1.35); }
@media (max-width:760px) {
.xp .stepbar { gap:8px; }
.xp .sb-btn { flex-basis:auto; padding:8px 10px; gap:6px; }
.xp .sb-btn b { display:none; }
.xp .sb-arr { font-size:24px; }
.xp .sb-dots { gap:5px; }
.xp .sb-dot { width:7px; height:7px; }
}
@media (max-width:760px) {
.xp .sb-dots { gap:4px; flex-wrap:nowrap; }
.xp .sb-dot { width:6px; height:6px; }
.xp .sb-mid small { letter-spacing:.1em; }
}
.xp body:not(.is-admin) #userBadge { display:none !important; }
.xp #lgWrap.lg-user .lg-box, .xp #rgWrap .lg-box { border-top-color:#2f6fd8; }
.xp #lgWrap.lg-user .gold-l, .xp #rgWrap .gold-l { color:#7fa9f2; }
.xp #lgWrap.lg-user .lg-go, .xp #rgWrap .lg-go { background:#2f6fd8; }
.xp #lgWrap.lg-user .lg-go:hover, .xp #rgWrap .lg-go:hover { background:#3d7ee6; }
.xp #lgWrap.lg-user .lg-box input:focus, .xp #rgWrap .lg-box input:focus { border-color:#5b8fe8; }
.xp #lgWrap.lg-user .lg-rem input { accent-color:#2f6fd8; }
.xp .lg-alt { margin:14px 0 0; font-size:13px; color:#aab6cc; text-align:center; line-height:1.5; }
.xp .lg-alt a { color:#7fa9f2; font-weight:700; }
.xp #lgWrap.lg-user .lg-box label, .xp #lgWrap.lg-user .lg-cap-l, .xp #rgWrap .lg-box label, .xp #rgWrap .lg-cap-l { color:#9cbcf5; }
.xp #lgWrap.lg-user .lg-box label.lg-rem, .xp #rgWrap .lg-box label.lg-rem { color:#c9d3e6; }
.xp #rgWrap .lg-box.rg-box { max-width:860px; display:grid; grid-template-columns:300px 1fr; gap:0 34px; padding:30px 32px 28px; }
.xp .rg-side { border-right:1px solid #1d3463; padding-right:30px; display:flex; flex-direction:column; }
.xp .rg-side .lg-brand { justify-content:space-between; }
.xp .rg-side .lg-brand .prod b { font-size:32px; }
.xp .rg-side .lg-brand .prod i { font-size:13.5px; }
.xp .rg-side .lg-brand img.lg-nxw { height:48px !important; margin-right:4px; }
.xp .rg-steps { margin:6px 0 0; padding:0; list-style:none; counter-reset:rg; font-size:13px; color:#c9d3e6; }
.xp .rg-steps li { counter-increment:rg; display:flex; align-items:center; gap:10px; margin-bottom:10px; }
.xp .rg-steps li::before { content:counter(rg); flex:none; width:24px; height:24px; border-radius:50%; border:1px solid #2f6fd8; color:#9cbcf5; font-weight:700; font-size:12px; display:flex; align-items:center; justify-content:center; }
.xp .rg-side .lg-alt { margin-top:auto; text-align:left; padding-top:14px; }
.xp .rg-main { padding-top:6px; }
.xp .rg-grid { display:grid; grid-template-columns:1fr 1fr; gap:0 16px; }
.xp .rg-grid .rg-full { grid-column:1 / -1; }
.xp #rgWrap .lg-box.rg-box .lg-x { top:12px; right:14px; }
@media (max-width:820px) {
.xp #rgWrap .lg-box.rg-box { grid-template-columns:1fr; max-width:420px; padding:24px 22px; }
.xp .rg-side { border-right:0; padding-right:0; }
.xp .rg-steps { display:none; }
.xp .rg-side .lg-alt { display:none; }
}
@media (max-width:480px) {
.xp .rg-grid { grid-template-columns:1fr; }
}
.xp .rg-pin h4 { font-family:"Poppins",sans-serif; color:#fff; font-size:22px; margin:6px 0 6px; }
.xp .pin-in { display:block; width:100%; box-sizing:border-box; margin:6px 0 4px; background:#050c1c; border:1px solid #2f6fd8; border-radius:10px; color:#fff; outline:none;
  height:64px; text-align:center; font:700 32px "Montserrat",monospace; letter-spacing:.55em; padding-left:.55em; }
.xp .pin-in:focus { border-color:#7fa9f2; box-shadow:0 0 0 3px rgba(47,111,216,.25); }
.xp .rg-steps li.on { color:#fff; font-weight:700; }
.xp .rg-steps li.on::before { background:#2f6fd8; color:#fff; }
.xp .rg-steps li.done { color:#8fd19e; }
.xp .rg-steps li.done::before { content:"\2713"; border-color:#3c8f5a; color:#8fd19e; }
.xp small.vf { color:#ff8a80; font-size:11px; }
.xp small.vf.ok { color:#8fd19e; }
@media (min-width:761px) {
.xp .stepbar { max-width:1180px; gap:28px; }
.xp .sb-btn { flex-basis:400px; padding:18px 26px; gap:20px; border-radius:16px; border-width:2px; }
.xp .sb-btn small { font-size:16px; letter-spacing:.16em; }
.xp .sb-btn b { font-size:28px; margin-top:6px; }
.xp .sb-arr { font-size:60px; }
.xp .sb-mid small { font-size:20px; letter-spacing:.16em; margin-bottom:16px; }
.xp .sb-dots { gap:13px; }
.xp .sb-dot { width:18px; height:18px; border-width:2px; }
}
@media (max-width:760px) {
.xp .sb-btn small { font-size:13px; }
.xp .sb-arr { font-size:36px; }
.xp .sb-mid small { font-size:13px; }
.xp .sb-dot { width:10px; height:10px; }
.xp .sb-dots { gap:5px; flex-wrap:wrap; }
}
@media (min-width:761px) {
.xp .sb-btn { flex-basis:340px; }
.xp .sb-dots { flex-wrap:nowrap; gap:10px; }
.xp .sb-dot { width:16px; height:16px; }
}
@media (max-width:760px) {
.xp .sb-btn small { font-size:11px; letter-spacing:.1em; }
.xp .sb-arr { font-size:30px; }
.xp .sb-mid small { font-size:11px; letter-spacing:.08em; }
.xp .sb-dot { width:8px; height:8px; }
.xp .sb-dots { gap:4px; flex-wrap:nowrap; }
}
.xp .pg-title .gold { display:block; }
.xp .pg-title.left .gold { display:inline; }
.xp .xp-page .xcard a { color:#e8c979; }

.xp { font-family: "Poppins", "Segoe UI", Arial, sans-serif; color: #D5DEEC; }
.xp .xp-page { padding-top: 26px; }
.xp .pg-tag, .xp .sec, .xp .gold-l, .xp .sb-mid small, .xp .sb-btn small { font-family: "Montserrat", "Poppins", sans-serif; }
.xp .xcard ul { margin: 6px 0 0; }
.xp .xsteps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin: 0 0 34px; }
.xp .xsteps > div { padding: 20px 20px 18px; border-top: 2px solid #d4a440; background: rgba(10,26,60,.55); border-radius: 0 0 14px 14px; }
.xp .xsteps b { font-size: 30px; font-weight: 700; color: #d4a440; line-height: 1; }
.xp .xsteps h4 { font-weight: 600; color: #fff; font-size: 17px; margin: 8px 0 4px; } .xp .xsteps p { margin: 0; font-size: 14.5px; line-height: 1.55; color: #c3cddf; }
@media (max-width: 900px) { .xp .xsteps { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .xp .xsteps { grid-template-columns: 1fr; } .xp .xp-page { padding-left: 16px; padding-right: 16px; } }
.xp .chips.center { justify-content: center; }
.xp a.sb-btn, .xp a.sb-dot { text-decoration: none; color: #fff; }
.xp .sb-btn b { color: #fff; }
.xp .btn.ghost { border: 1px solid #2a4a82; color: #fff; }
html[data-mode="light"] .xp { color: #2B3A55; }
html[data-mode="light"] .xp .pg-title, html[data-mode="light"] .xp .xcard h4, html[data-mode="light"] .xp .xsteps h4,
html[data-mode="light"] .xp .sb-btn b, html[data-mode="light"] .xp .plain b { color: var(--navy); }
html[data-mode="light"] .xp .xcard, html[data-mode="light"] .xp .xsteps > div, html[data-mode="light"] .xp .sb-btn { background: #fff; border-color: #DCE3EE; }
html[data-mode="light"] .xp .xcard p, html[data-mode="light"] .xp .xsteps p, html[data-mode="light"] .xp .kpi span { color: #44546E; }

/* Top menu as in CCPR: Home icon, ABOUT, CCPI (gold, underlined on its pages), ADMINISTRATION in red (admins only) */
.navbar .nav-home { display: inline-flex; align-items: center; color: var(--gold); }
.navbar .nav-home svg { width: 18px; height: 18px; }
.navbar .nav-link.nav-ccpi { color: var(--gold) !important; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; border-bottom: 2px solid transparent; }
.navbar .nav-link.nav-ccpi.on { border-bottom-color: var(--gold); }
.navbar .nav-link.nav-adm { color: #F87171 !important; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; border-bottom: 2px solid transparent; }
.navbar .nav-link.nav-adm.on { border-bottom-color: #F87171; }
html:not(.admin) .navbar .nav-item:has(> .nav-adm) { display: none !important; }
/* the step pages are hidden tabs: no empty slot for them in the top menu */
.navbar .nav-item:has(> .nav-link[data-value^="xp_"]), .navbar .nav-item:has(> .nav-link[data-value="CCPI"]) { display: none !important; }

/* ==== Sign in / Sign up windows, as in CCPR: members in blue, ADMINISTRATION in red; sign-up in two columns ==== */
#ccpi_login .lg-box { position: relative; width: 100%; max-width: 380px; background: #0a1a3c; border: 1px solid #1d3463; border-top: 3px solid #d32f2f;
  border-radius: 14px; padding: 26px 26px 24px; box-shadow: 0 24px 70px rgba(0,0,0,.55); max-height: calc(100vh - 32px); overflow: auto;
  font-family: "Poppins", "Segoe UI", Arial, sans-serif; color: #D5DEEC; text-align: left; }
#ccpi_login .lg-box h3 { font-family: "Poppins", sans-serif; color: #fff; font-size: 24px; font-weight: 700; margin: 6px 0 4px; }
#ccpi_login .lg-note { display: block; font-size: 13px; color: #aab6cc; margin: 0 0 16px; line-height: 1.5; text-align: left; }
#ccpi_login .gold-l { display: block; font-family: "Montserrat", sans-serif; color: #e1bb64; letter-spacing: .25em; font-weight: 700; font-size: 11.5px; }
#ccpi_login .lg-box label { display: block; font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: #e1bb64; font-weight: 700; margin-bottom: 12px; }
#ccpi_login .lg-box input[type=text], #ccpi_login .lg-box input[type=email], #ccpi_login .lg-box input[type=password] {
  display: block; width: 100%; box-sizing: border-box; margin-top: 6px; background: #050c1c; border: 1px solid #1d3463; border-radius: 8px; color: #fff;
  height: 42px; padding: 0 12px; font: 500 15px "Poppins", sans-serif; letter-spacing: 0; text-transform: none; outline: none; }
#ccpi_login .lg-box input:focus { border-color: #d4a440; }
#ccpi_login .lg-msg { min-height: 0; font-size: 13px; line-height: 1.45; margin: 4px 0 12px; padding: 0; background: none; border: 0; color: #ff8a80; }
#ccpi_login .lg-msg.ok { color: #8fd19e; background: none; border: 0; }
#ccpi_login .lg-go { width: 100%; height: 42px; border: 0; border-radius: 8px; background: #d32f2f; color: #fff; font: 700 14px "Montserrat", sans-serif; letter-spacing: .08em; cursor: pointer; }
#ccpi_login .lg-go:hover { background: #e53935; }
#ccpi_login .lg-x { position: absolute; top: 10px; right: 12px; width: auto; height: auto; background: none; border: 0; color: #8394b3; font-size: 24px; cursor: pointer; line-height: 1; }
#ccpi_login .lg-x:hover { color: #fff; }
#ccpi_login .lg-brand { display: flex; align-items: center; justify-content: space-between; padding-bottom: 16px; margin-bottom: 16px; border-bottom: 1px solid #1d3463; }
#ccpi_login .lg-brand .prod { display: flex; flex-direction: column; justify-content: center; line-height: 1; }
#ccpi_login .lg-brand .prod b { font-family: "Montserrat", sans-serif; font-weight: 700; font-size: 40px; letter-spacing: .1em;
  background: linear-gradient(180deg, #F0D890, #D4A440); -webkit-background-clip: text; background-clip: text; color: transparent; }
#ccpi_login .lg-brand .prod i { font-style: normal; font-family: "Montserrat", sans-serif; font-weight: 700; font-size: 15px; letter-spacing: .2em; color: #7fa9f2; margin-top: 8px; }
#ccpi_login .lg-brand img.lg-nxw { height: 62px; margin-right: 10px; }
#ccpi_login .lg-cap { margin-bottom: 12px; }
#ccpi_login .lg-cap-l { display: block; font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: #e1bb64; font-weight: 700; margin-bottom: 6px; }
#ccpi_login .lg-cap-row { display: flex; align-items: center; gap: 8px; }
#ccpi_login .lg-cap-row canvas { width: 150px; height: 44px; border-radius: 8px; border: 1px solid #1d3463; flex: none; background: #e9eef7; }
#ccpi_login .lg-cap-new { flex: none; width: 34px; height: 44px; border: 1px solid #1d3463; border-radius: 8px; background: #050c1c; color: #e1bb64; font-size: 18px; cursor: pointer; }
#ccpi_login .lg-cap-new:hover { border-color: #d4a440; }
#ccpi_login .lg-cap-row input { flex: 1; min-width: 0; height: 44px; text-align: center; background: #050c1c; border: 1px solid #1d3463; border-radius: 8px; color: #fff; font: 500 15px "Poppins", sans-serif; outline: none; }
#ccpi_login .lg-box label.lg-rem { display: flex !important; align-items: center; gap: 8px; text-transform: none; letter-spacing: 0; font-weight: 500; font-size: 13px; color: #c9d3e6 !important; cursor: pointer; }
#ccpi_login .lg-box label.lg-rem input { width: 16px; height: 16px; margin: 0; flex: none; accent-color: #d32f2f; }
#ccpi_login .lg-alt { margin: 14px 0 0; font-size: 13px; color: #aab6cc; text-align: center; line-height: 1.5; } #ccpi_login .lg-alt a { color: #7fa9f2; font-weight: 700; }
/* members (not the ADMINISTRATION log in) and the sign-up window: blue */
html:not(.lg-admin) #ccpi_login #lg_in, #ccpi_login #lg_up { border-top-color: #2f6fd8; }
html:not(.lg-admin) #ccpi_login #lg_in .gold-l, #ccpi_login #lg_up .gold-l { color: #7fa9f2; }
html:not(.lg-admin) #ccpi_login #lg_in .lg-go, #ccpi_login #lg_up .lg-go { background: #2f6fd8; }
html:not(.lg-admin) #ccpi_login #lg_in .lg-go:hover, #ccpi_login #lg_up .lg-go:hover { background: #3d7ee6; }
html:not(.lg-admin) #ccpi_login #lg_in input:focus, #ccpi_login #lg_up input:focus { border-color: #5b8fe8; }
html:not(.lg-admin) #ccpi_login #lg_in label, html:not(.lg-admin) #ccpi_login #lg_in .lg-cap-l, #ccpi_login #lg_up label, #ccpi_login #lg_up .lg-cap-l { color: #9cbcf5; }
html:not(.lg-admin) #ccpi_login #lg_in label.lg-rem input { accent-color: #2f6fd8; }
html.lg-admin #ccpi_login #lg_alt { display: none; }
/* sign up: brand, steps and links on the left, the form (or the email PIN) on the right */
#ccpi_login .lg-box.rg-box { max-width: 860px; display: grid; grid-template-columns: 300px 1fr; gap: 0 34px; padding: 30px 32px 28px; }
#ccpi_login .rg-side { border-right: 1px solid #1d3463; padding-right: 30px; display: flex; flex-direction: column; }
#ccpi_login .rg-side .lg-brand .prod b { font-size: 32px; } #ccpi_login .rg-side .lg-brand .prod i { font-size: 12.5px; } #ccpi_login .rg-side .lg-brand img.lg-nxw { height: 48px; margin-right: 4px; }
#ccpi_login .rg-steps { margin: 6px 0 0; padding: 0; list-style: none; counter-reset: rg; font-size: 13px; color: #c9d3e6; }
#ccpi_login .rg-steps li { counter-increment: rg; display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
#ccpi_login .rg-steps li::before { content: counter(rg); flex: none; width: 24px; height: 24px; border-radius: 50%; border: 1px solid #2f6fd8; color: #9cbcf5; font-weight: 700; font-size: 12px; display: flex; align-items: center; justify-content: center; }
#ccpi_login .rg-steps li.on { color: #fff; font-weight: 700; } #ccpi_login .rg-steps li.on::before { background: #2f6fd8; color: #fff; }
#ccpi_login .rg-steps li.done { color: #8fd19e; } #ccpi_login .rg-steps li.done::before { content: "\2713"; border-color: #3c8f5a; color: #8fd19e; }
#ccpi_login .rg-side .lg-alt { margin-top: auto; text-align: left; padding-top: 14px; }
#ccpi_login .rg-main { padding-top: 6px; }
#ccpi_login .rg-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 16px; } #ccpi_login .rg-grid .rg-full { grid-column: 1 / -1; }
#ccpi_login .rg-pin h4 { font-family: "Poppins", sans-serif; color: #fff; font-size: 22px; margin: 6px 0 6px; }
#ccpi_login .pin-in { display: block; width: 100%; box-sizing: border-box; margin: 6px 0 12px; background: #050c1c; border: 1px solid #2f6fd8; border-radius: 10px; color: #fff; outline: none;
  height: 56px; text-align: center; font: 700 28px "Montserrat", sans-serif; letter-spacing: .5em; }
#ccpi_login .pin-in:focus { border-color: #7fa9f2; box-shadow: 0 0 0 3px rgba(47,111,216,.25); }
@media (max-width: 820px) { #ccpi_login .lg-box.rg-box { grid-template-columns: 1fr; max-width: 420px; padding: 24px 22px; }
  #ccpi_login .rg-side { border-right: 0; padding-right: 0; } #ccpi_login .rg-steps, #ccpi_login .rg-side .lg-alt { display: none; } }
@media (max-width: 480px) { #ccpi_login .rg-grid { grid-template-columns: 1fr; } #ccpi_login .lg-brand .prod b { font-size: 32px; } #ccpi_login .lg-brand img.lg-nxw { height: 48px; } }
html[data-mode="light"] #ccpi_login .lg-box { background: #0a1a3c; }

/* Red ADMINISTRATION menu (as in CCPR) */
.am-wrap { position: relative; display: inline-flex; }
.am-menu { display: none; position: absolute; top: calc(100% + 10px); right: 0; width: 330px; max-height: calc(100vh - 100px); overflow: auto; z-index: 1300;
  background: #0a1a3c; border: 1px solid #1d3463; border-radius: 14px; box-shadow: 0 24px 60px rgba(0,0,0,.55); padding: 0 0 8px; text-align: left; }
.am-wrap.open .am-menu { display: block; }
.am-head { font: 800 13px "Montserrat", sans-serif; letter-spacing: .2em; text-transform: uppercase; color: #fff; padding: 16px 20px 12px; border-bottom: 1px solid #1d3463; }
.am-sec { padding: 10px 0 8px; border-bottom: 1px solid #1d3463; } .am-sec:last-child { border-bottom: 0; }
.am-lab { display: flex; align-items: center; gap: 8px; font: 800 11.5px "Montserrat", sans-serif; letter-spacing: .18em; text-transform: uppercase; color: #e1bb64; padding: 6px 20px 6px; }
.am-lab svg { width: 15px; height: 15px; }
.am-item { display: block; padding: 7px 20px 7px 43px; color: #fff !important; font-size: 14px; font-weight: 600; text-decoration: none; line-height: 1.3; }
a.am-item:hover { background: rgba(255,255,255,.05); color: #e8c979 !important; }
.am-item small { display: block; font-size: 11.5px; font-weight: 500; color: #8fa3c4; margin-top: 2px; }
.am-item.cur { color: #e8c979 !important; }
.am-who { color: #e8c979 !important; } .am-who b { color: #fff; }
html.signed .am-out-only, html:not(.signed) .am-in-only, html:not(.admin) .am-adm-only { display: none !important; }
/* top bar on one line with the CCPR menu (Home, About, CCPI, ..., Administration): tighter links below 1600px */
html:not(.signed) .navbar .tools-end { padding-left: 18px; }
@media (min-width: 992px) and (max-width: 1600px) {
  .navbar .navbar-nav > .nav-item > .nav-link, .navbar .navbar-nav > .dropdown > .nav-link { padding-left: 3px !important; padding-right: 3px !important; letter-spacing: 0 !important; font-size: 9.5px !important; }
  .navbar .nav-link.nav-ccpi, .navbar .nav-link.nav-adm { letter-spacing: .03em !important; }
  .navbar .navbar-nav { column-gap: 4px; }
  .navbar .sbox, .navbar .cbtn { width: 40px !important; height: 40px !important; flex: 0 0 40px !important; }
  .navbar .cbtn.langbtn { width: auto !important; flex: 0 0 auto !important; min-width: 0; padding: 0 8px; gap: 5px; } .navbar #lang_lbl { font-size: 13px; }
  .navbar .tools { gap: 7px; } .brandwrap { gap: 10px; }
  .navbar .navbar-brand { margin-right: 8px; }
}
@media (min-width: 992px) and (max-width: 1440px) {
  .navbar .navbar-nav > .nav-item > .nav-link, .navbar .navbar-nav > .dropdown > .nav-link { padding-left: 2px !important; padding-right: 2px !important; font-size: 9px !important; }
  .navbar .navbar-nav { column-gap: 3px; } .navbar .plat-badge { font-size: 11.5px; letter-spacing: .06em; } }
@media (min-width: 992px) and (max-width: 1390px) {
  .navbar .ccpi-mark small { display: none; } .navbar .ccpi-mark b { font-size: 22px; }
  .navbar .plat-badge { font-size: 10.5px; padding-left: 8px; padding-right: 8px; }
  .navbar .navbar-nav > .nav-item > .nav-link, .navbar .navbar-nav > .dropdown > .nav-link { font-size: 8.5px !important; }
  .navbar .sbox, .navbar .cbtn { width: 36px !important; height: 36px !important; flex: 0 0 36px !important; } .navbar .tools { gap: 5px; } }

/* "Coming soon" menu moved to Administration > COMING SOON: not in the top bar */
.navbar .nav-item.dropdown:has(> a[data-value="Coming soon"]) { display: none !important; }
.soon-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; margin-top: 10px; }
.soon-c { border: 1px solid var(--line, rgba(255,255,255,.12)); border-radius: 10px; padding: 14px; display: flex; flex-direction: column; gap: 6px; }
.soon-c p { margin: 0; opacity: .8; font-size: .9em; flex: 1; }
.soon-c .btn { align-self: flex-start; }
/* no ALL MARKETS platform menu in the top bar */
.navbar #plat { display: none !important; }
.navbar .dropdown-item { font-family: "Montserrat", sans-serif; font-size: 11.5px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; }
.navbar .dropdown-header { font-family: "Montserrat", sans-serif; font-size: 10px; letter-spacing: .2em; text-transform: uppercase; color: #e1bb64; padding: 8px 14px 4px; }
/* admin signed in: no user icon (the red admin menu has Log out and the Administration page) */
html.admin #ubox, html.admin .navbar .nav-item:has(#ubox) { display: none !important; }

/* top bar as in CCPR: NXW logo on the left, the gold title line centred on top, the menu centred under it, the icon buttons on the right */
@media (min-width: 992px) {
  html.signed .navbar > .container-fluid { position: relative; min-height: 118px; align-items: flex-end !important; padding: 0 28px 12px !important; }
  html.signed .navbar > .container-fluid::before { content: "\25C6\00a0 \00a0 \00a0 CLOUD COMPUTING PLATFORM FOR INVESTMENT (CCPI)\00a0 \00a0 \00a0 \25C6";
    position: absolute; top: 30px; left: 50%; transform: translateX(-50%); white-space: nowrap; padding: 0 150px;
    font: 700 14px "Montserrat", sans-serif; letter-spacing: .2em; color: #e1bb64; line-height: 1;
    background: linear-gradient(90deg, transparent, #d4a440) left center / 140px 1px no-repeat, linear-gradient(90deg, #d4a440, transparent) right center / 140px 1px no-repeat; }
  html.signed .navbar .navbar-header { position: absolute; left: 28px; top: 50%; transform: translateY(-50%); }
  html.signed .navbar .navbar-collapse { flex-basis: 100%; }
  html.signed #nav { flex: 1 1 100% !important; flex-wrap: wrap; justify-content: center; align-items: center; row-gap: 22px; }
  html.signed #nav > .bslib-nav-spacer { order: -3; flex: 1 0 auto; }
  html.signed #nav > li.form-inline:nth-last-child(-n+3) { order: -2; margin-left: 10px; }
  html.signed #nav { padding-top: 12px; }
  html.signed .navbar .brand img { height: 48.6px !important; width: auto; }
  html.signed #nav::before { content: ""; order: -1; flex-basis: 100%; height: 0; }
  html.signed .navbar .navbar-nav > .nav-item > .nav-link, html.signed .navbar .navbar-nav > .dropdown > .nav-link {
    height: auto !important; padding: 4px 14px 6px !important; font-family: "Montserrat", sans-serif !important; font-size: clamp(12.5px, .9vw, 17px) !important;
    font-weight: 800 !important; letter-spacing: .03em !important; text-transform: uppercase; color: #fff !important; }
  html.signed .navbar .navbar-nav > .nav-item > .nav-link:hover, html.signed .navbar .navbar-nav > .dropdown > .nav-link:hover,
  html.signed .navbar .navbar-nav .nav-link.active, html.signed .navbar .nav-link.nav-ccpi.on { color: #e1bb64 !important; }
  html.signed .navbar .nav-link::after { top: auto !important; bottom: 0 !important; left: 14px !important; right: 14px !important; }
  html.signed .navbar .nav-link.nav-ccpi { color: #e1bb64 !important; border-bottom: 0; }
  html.signed .navbar .nav-link.nav-ccpi.on { box-shadow: inset 0 -2px 0 #d4a440; }
  html.signed .navbar .nav-home svg { width: 23.4px; height: 23.4px; }
  html.signed .navbar .tools-end .cbtn, html.signed .navbar .cbtn { height: 50px !important; min-width: 50px; border-radius: 8px; }
  html.signed .navbar .cbtn.langbtn { padding: 0 18px; }
  html[data-mode="light"].signed .navbar > .container-fluid::before { color: #b8862a; }
  html[data-mode="light"].signed .navbar .navbar-nav > .nav-item > .nav-link, html[data-mode="light"].signed .navbar .navbar-nav > .dropdown > .nav-link { color: var(--navy) !important; }
}
@media (min-width: 992px) and (max-width: 1600px) {
  html.signed .navbar > .container-fluid::before { font-size: 12px; letter-spacing: .16em; padding: 0 80px; background-size: 70px 1px, 70px 1px; }
}
@media (min-width: 992px) and (max-width: 1300px) {
  html.signed .navbar > .container-fluid::before { left: 42%; padding: 0; background: none; }
}

/* admin menu as in CCPR: wider, larger text, deploy version in the header, app names in gold */
.am-menu { width: 450px; }
.am-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; font-size: 15px; padding: 18px 22px 14px; }
.am-ver { font: 600 13px "Poppins", sans-serif; letter-spacing: .04em; color: #dfe6f3; border: 1px solid #2c4777; border-radius: 999px; padding: 3px 12px; text-transform: none; }
.am-lab { font-size: 13px; padding: 8px 22px; } .am-lab svg { width: 17px; height: 17px; }
.am-item { font-size: 16px; padding: 8px 22px 8px 49px; }
.am-item small { font-size: 13px; color: #9fb0cc; }
.am-item.am-app { color: #e8c979 !important; }
.am-item.am-app.cur { color: #fff !important; }
@media (max-width: 520px) { .am-menu { width: calc(100vw - 24px); } }
@media (min-width: 992px) {
  html.signed .navbar .tools { gap: 14px !important; }
  html.signed .navbar .cbtn { width: 50px !important; height: 50px !important; flex: 0 0 50px !important; }
  html.signed .navbar .cbtn.langbtn { width: auto !important; flex: 0 0 auto !important; padding: 0 18px; }
  html.signed .navbar .sbox { height: 50px !important; min-width: 50px; border-radius: 8px; }
  html.signed .navbar .cbtn svg, html.signed .navbar .sbox > svg { width: 19.8px; height: 19.8px; }
}

/* Administration page: same centred column and header as the other pages */
.adm-wrap { max-width: 1180px; margin: 0 auto; padding: 26px 28px 40px !important; box-sizing: border-box; }
.adm-wrap .adm-xhead { margin-bottom: 26px; }
.adm-wrap .adm-xhead .pg-title { margin: 22px auto 0; }
.adm-wrap .adm-tabs .shiny-options-group, .adm-wrap .adm-tabs > div { justify-content: center; }
@media (max-width: 800px) { .adm-wrap { padding: 20px 16px 30px !important; } }
.adm-wrap .adm-kpis { display: grid !important; grid-template-columns: repeat(3, 1fr); gap: 14px; }
@media (min-width: 1100px) { .adm-wrap .adm-kpis { grid-template-columns: repeat(6, 1fr); } }
@media (max-width: 600px) { .adm-wrap .adm-kpis { grid-template-columns: repeat(2, 1fr); } }
/* top bar measured on CCPR (2026-10-17): 94px high, dark bar with a thin line, small logo, 40px icon buttons, menu 14px */
@media (min-width: 992px) {
  html.signed .navbar { background: rgba(5,12,28,.94) !important; border-bottom: 1px solid #16294d !important; min-height: 0 !important; }
  html.signed .navbar > .container-fluid { min-height: 94px !important; padding: 0 28px 8px !important; }
  html.signed .navbar > .container-fluid::before { top: 26px !important; font-size: 12px !important; letter-spacing: .2em !important; }
  html.signed .navbar .brand img { height: 34px !important; }
  html.signed #nav { padding-top: 12px !important; row-gap: 6px !important; }
  html.signed .navbar .cbtn { width: 40px !important; height: 40px !important; flex: 0 0 40px !important; }
  html.signed .navbar .cbtn.langbtn { width: auto !important; flex: 0 0 auto !important; padding: 0 14px; }
  html.signed .navbar .sbox { height: 40px !important; min-width: 40px; }
  html.signed .navbar .cbtn svg, html.signed .navbar .sbox > svg { width: 17.1px; height: 17.1px; }
  html.signed .navbar .tools { gap: 10px !important; }
  html.signed .navbar .navbar-nav > .nav-item > .nav-link, html.signed .navbar .navbar-nav > .dropdown > .nav-link {
    font-size: 12px !important; padding: 3px 13px 5px !important; }
  html.signed .navbar .nav-home svg { width: 19.8px; height: 19.8px; }
}
@media (min-width: 992px) and (max-width: 1300px) {
  html.signed .navbar .navbar-nav > .nav-item > .nav-link, html.signed .navbar .navbar-nav > .dropdown > .nav-link { font-size: 10.5px !important; padding: 3px 9px 5px !important; }
}
html[data-mode="light"].signed .navbar { background: #fff !important; border-bottom-color: #e3e8f2 !important; }
@media (min-width: 992px) {
  html.signed .navbar .tools-end .cbtn, html.signed .navbar .tools-end .cbtn.admbtn { height: 40px !important; width: 40px !important; min-width: 40px !important; flex: 0 0 40px !important; }
  html.signed .navbar .tools-end .cbtn.langbtn { width: auto !important; flex: 0 0 auto !important; }
}
/* no CCPI / INVESTMENT wordmark beside the NXW logo once signed in (the gold title line names CCPI) */
.navbar .ccpi-mark { display: none !important; }
/* step pages: readable text on the gold buttons */
.xp .btn.btn-gold, .xp .btn.btn-gold:hover { color: #0b1a3d !important; font-weight: 700; }
/* top bar as in CCPE (2026-10-17): search, mail and language on the top row; a wide red ADMIN button under them, level with the menu */
.adm-lab { display: none; }
@media (min-width: 992px) {
  html.signed .navbar > .container-fluid { min-height: 98px !important; padding-bottom: 10px !important; }
  html.signed .navbar > .container-fluid::before { top: 24px !important; font-size: 13px !important; letter-spacing: .18em !important; }
  html.signed #nav { padding-top: 11px !important; row-gap: 10px !important; padding-right: 0; }
  html.signed .navbar .navbar-nav > .nav-item > .nav-link, html.signed .navbar .navbar-nav > .dropdown > .nav-link { font-size: 13px !important; padding: 3px 14px 5px !important; }
  html.signed .navbar .tools-end .cbtn.langbtn { min-width: 80px; justify-content: center; gap: 8px; }
  html.signed .navbar .am-wrap { position: absolute !important; right: 28px; top: 56px; }
  html.signed .navbar .tools-end .cbtn.admbtn { width: auto !important; min-width: 106px !important; height: 34px !important; flex: 0 0 auto !important;
    padding: 0 14px; border-radius: 6px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; }
  html.signed .navbar .cbtn.admbtn svg { width: 17.1px; height: 17.1px; }
  html.signed .navbar .adm-lab { display: inline; font: 800 13px "Montserrat", sans-serif; letter-spacing: .12em; text-transform: uppercase; }
  html.signed .navbar .cbtn.admbtn::after { top: 3px !important; right: 3px !important; }
  html.signed .navbar .am-menu { top: calc(100% + 8px); }
}
@media (min-width: 992px) and (max-width: 1300px) {
  html.signed .navbar .navbar-nav > .nav-item > .nav-link, html.signed .navbar .navbar-nav > .dropdown > .nav-link { font-size: 11px !important; padding: 3px 9px 5px !important; }
}
@media (min-width: 992px) {
  html.signed .navbar .am-wrap { top: 67px; }
  html.signed .navbar .brand img { height: 38.9px !important; }
  html.signed .navbar #lang_lbl { color: #fff; font-size: 15px; }
}
/* Why CCPI: each problem beside its CCPI answer */
.xp .xgrid.pairs { grid-template-columns: 1fr 1fr; }
@media (max-width: 700px) { .xp .xgrid.pairs { grid-template-columns: 1fr; } }

/* ---------- Index Studio: 5 tabs, tab 1 in 7 step cards, Validate / Cancel / Back ---------- */
.st-tab.locked { opacity: .42; cursor: not-allowed; }
.st-tab.locked span::after { content: " \1F512"; font-size: 11px; }
.st-ident .st-id3 { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 14px; }
.st-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 16px; margin-bottom: 18px; }
.st-card { background: #0A1633; border: 1px solid #1A2A4C; border-radius: 14px; padding: 18px 20px; }
.st-chead { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.st-chead em { font-style: normal; flex: none; width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center; font-weight: 800;
  background: linear-gradient(135deg, #D4A440, #F0D890); color: #050C1E; }
.st-chead h4 { margin: 0; font-size: 15px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: #fff; }
.st-card .form-group { margin-bottom: 10px; }
.st-card .shiny-options-group .radio, .st-card .shiny-options-group .checkbox { margin: 0 0 6px; }
.st-card .shiny-options-group label { display: flex; align-items: center; gap: 10px; width: 100%; padding: 8px 12px; border: 1px solid #1A2A4C; border-radius: 10px;
  cursor: pointer; color: #DCE4F2; font-size: 14px; font-weight: 500; transition: border-color .15s, background .15s; }
.st-card .shiny-options-group label:hover { border-color: rgba(212,164,64,.6); }
.st-card .shiny-options-group label:has(input:checked) { border-color: #D4A440; background: rgba(212,164,64,.12); color: #fff; }
.st-card .shiny-options-group input { accent-color: #D4A440; margin: 0; }
.st-note { font-size: 12.5px; color: var(--muted); margin: 8px 0 0; }
.st-links { display: flex; gap: 18px; font-size: 13px; margin-top: -4px; }
.st-show .shiny-options-group { display: flex; flex-wrap: wrap; gap: 4px; }
.st-show .checkbox-inline { margin: 0 !important; padding: 0; } .st-show .checkbox-inline input { display: none; }
.st-show .checkbox-inline span { display: inline-block; padding: 5px 11px; border-radius: 8px; border: 1px solid #213760; font-size: 12px; font-weight: 600; cursor: pointer; color: #C9D6EC; }
.st-show .checkbox-inline input:checked + span { background: var(--gold); border-color: var(--gold); color: #050C1E; }
.st-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin: 6px 0 24px; }
.st-bar .st-cancel { border-color: rgba(255,122,89,.55) !important; color: #FF9B80 !important; }
.st-bar .st-cancel:hover { background: rgba(255,122,89,.12) !important; }
.st-out { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 16px; margin-bottom: 18px; }
.st-ocard { background: #0A1633; border: 1px solid #1A2A4C; border-radius: 14px; padding: 18px 20px; display: flex; flex-direction: column; gap: 6px; }
.st-ocard.hl { border-color: #D4A440; background: linear-gradient(160deg, rgba(212,164,64,.14), #0A1633 60%); }
.st-ocard em { font-style: normal; font-size: 11px; letter-spacing: .18em; font-weight: 700; color: var(--gold2, #E2B44E); }
.st-ocard h4 { margin: 0; font-size: 17px; color: #fff; font-weight: 700; }
.st-ocard p { margin: 0 0 8px; color: var(--muted); font-size: 13px; flex: 1; }
.st-ocard .btn { align-self: flex-start; }
.st-frame { width: 100%; height: 960px; border: 0; border-radius: 10px; background: #fff; }
.st-pick .mk-ctop { margin-bottom: 0; } .st-pick .form-group { margin: 0; }
@media (max-width: 760px) { .st-ident .st-id3 { grid-template-columns: 1fr; } .st-grid { grid-template-columns: 1fr; } }
html[data-mode="light"] .st-card, html[data-mode="light"] .st-ocard { background: #fff; border-color: #DCE3EE; }
html[data-mode="light"] .st-chead h4, html[data-mode="light"] .st-ocard h4 { color: var(--navy); }
html[data-mode="light"] .st-card .shiny-options-group label { color: var(--navy); border-color: #DCE3EE; }
html[data-mode="light"] .st-card .shiny-options-group label:has(input:checked) { color: var(--navy); }
.st-spec { margin-top: 4px; }
.st-chrono-box { text-align: center; padding: 18px 8px 8px; }
.st-chrono-box em { font-style: normal; font-size: 11px; letter-spacing: .2em; font-weight: 700; color: var(--gold2, #E2B44E); }
.st-chrono-box h4 { margin: 8px 0 14px; font-weight: 700; }
#st_chrono { font: 800 46px/1 Poppins, sans-serif; color: #E2B44E; font-variant-numeric: tabular-nums; letter-spacing: .02em; }
.st-chrono-box p { margin: 12px 0 14px; color: var(--muted); font-size: 13px; }
.st-bar-run { height: 4px; border-radius: 4px; background: rgba(212,164,64,.18); overflow: hidden; }
.st-bar-run i { display: block; height: 100%; width: 35%; background: linear-gradient(90deg, #D4A440, #F0D890); animation: st-run 1.1s ease-in-out infinite; }
@keyframes st-run { 0% { transform: translateX(-100%); } 100% { transform: translateX(300%); } }
.st-saverow { display: grid; grid-template-columns: minmax(220px, 520px) auto auto; gap: 12px; align-items: end; }
.st-saverow .form-group { margin: 0; }
.st-ok { color: #10B981; font-weight: 600; margin: 10px 0 0; }
.st-save .ix-err { margin: 10px 0 0; }
.st-port { margin-top: 26px; border-color: rgba(212,164,64,.35); }
.st-port .mk-act { display: flex; gap: 8px; }
@media (max-width: 760px) { .st-saverow { grid-template-columns: 1fr; } }
.st-ocard a.btn-gold, .st-ocard a.btn-gold:hover { color: #050C1E !important; background: linear-gradient(135deg, #D4A440, #F0D890) !important; border: 0 !important; font-weight: 700; }
.st-ocard a.btn.ghost { color: #E6ECF6 !important; }
.st-selwrap .ix-form { display: grid; grid-template-columns: 1fr; gap: 6px; max-width: 980px; }
/* Index Studio tabs: 2px larger than the Index builder steps */
.st-tabs .ix-step.st-tab { font-size: 15px; padding: 9px 18px 9px 9px; }
.st-tabs .ix-step.st-tab em { width: 30px; height: 30px; font-size: 15px; }
.st-tab.locked span::after { font-size: 13px; }
/* Index Studio: weighting options in 2 columns */
.st-2col .shiny-options-group { display: grid; grid-template-columns: 1fr 1fr; column-gap: 12px; }
.st-2col .shiny-options-group .radio { margin: 0 0 6px; }
/* Index Studio tab 1: 3 + 1 + 3 rows, weighting full width */
.st-grid { grid-template-columns: repeat(3, 1fr); }
.st-grid .st-wide { grid-column: 1 / -1; display: flex; }
.st-grid .st-wide > .st-card { flex: 1; }
.st-wcols { display: grid; grid-template-columns: 2fr 1fr; gap: 24px; align-items: start; }
.st-wcols .shiny-input-container { width: 100%; }
@media (max-width: 1000px) { .st-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 760px) { .st-grid { grid-template-columns: 1fr; } .st-wcols, .st-2col .shiny-options-group { grid-template-columns: 1fr; } }
/* Index Studio: two-box picker */
.st-dual { display: grid; grid-template-columns: 1fr 64px 1fr; gap: 14px; align-items: stretch; }
.st-box { border: 1px solid rgba(212,164,64,.28); border-radius: 12px; background: rgba(6,14,34,.6); display: flex; flex-direction: column; min-width: 0; }
.st-box-h { display: flex; justify-content: space-between; align-items: center; padding: 10px 14px; border-bottom: 1px solid rgba(212,164,64,.2);
  font: 600 13px Montserrat, sans-serif; letter-spacing: .12em; text-transform: uppercase; color: #D4A440; }
.st-box-n { min-width: 30px; padding: 2px 10px; border-radius: 20px; background: linear-gradient(180deg,#F0D890,#D4A440); color: #1A1204; font-weight: 700; text-align: center; letter-spacing: 0; }
.st-box-b { height: 380px; overflow-y: auto; }
.st-dt { width: 100%; border-collapse: collapse; font-size: 13px; }
.st-dt th { position: sticky; top: 0; background: #0b1a3a; color: #9DB0CC; font-weight: 600; text-align: left; padding: 8px 10px; font-size: 12px; z-index: 1; }
.st-dt td { padding: 7px 10px; border-top: 1px solid rgba(255,255,255,.05); color: #E6ECF7; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 220px; }
.st-dt th.r, .st-dt td.r { text-align: right; }
.st-dt th:first-child, .st-dt td:first-child { width: 34px; }
.st-dt tbody tr { cursor: pointer; }
.st-dt tbody tr:hover td { background: rgba(212,164,64,.07); }
.st-dt tbody tr.on td { background: rgba(212,164,64,.16); }
.st-dt input[type=checkbox] { accent-color: #D4A440; width: 15px; height: 15px; cursor: pointer; }
.st-dt td.st-empty { text-align: center; color: #7F8FAD; padding: 40px 10px; white-space: normal; cursor: default; }
.st-mvb { display: flex; flex-direction: column; justify-content: center; gap: 12px; }
.st-mvb .st-mv { width: 52px; height: 44px; padding: 0; font: 700 22px Montserrat, sans-serif; color: #1A1204; border: 0; border-radius: 10px;
  background: linear-gradient(180deg,#F0D890,#D4A440); }
.st-mvb .st-mv:hover { filter: brightness(1.08); }
@media (max-width: 900px) { .st-dual { grid-template-columns: 1fr; } .st-mvb { flex-direction: row; justify-content: center; } .st-mvb .st-mv { transform: rotate(90deg); } }
.st-qrow { margin-bottom: 10px; align-items: center; }
.st-qrow .st-q { width: 100%; }
.st-box-t { display: flex; gap: 8px; padding: 10px 12px 0; }
.st-box-t .st-ckb { padding: 5px 14px; font-size: 12.5px; font-weight: 600; color: #E6ECF7; background: rgba(46,155,255,.16); border: 1px solid rgba(46,155,255,.45); border-radius: 8px; }
.st-box-t .st-ckb:hover { background: rgba(46,155,255,.3); color: #fff; }
.st-box-h { margin-top: 8px; }

.st-selwrap .ix-form:has(.st-dual) { max-width: none; }
.st-qcell { display: flex; gap: 10px; align-items: center; }
.st-qcell .shiny-input-container { margin: 0; flex: none; }
.st-qcell .st-q { flex: 1; }
.st-quick { margin: 0 0 14px; }
.st-quick a.all { --c: #D4A440; --c2: #F0D890; }
.st-box-b { overflow-x: auto; }
.st-dt td { max-width: 190px; }
.st-dt th, .st-dt td { padding-left: 8px; padding-right: 8px; }
/* Index Studio back calculation: Indexes and Benchmark selectors */
.st-pick2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 16px; }
.st-pick2 .st-selcard { padding: 16px 20px; margin: 0; }
.st-pick2 .st-sel-l { display: block; font: 600 13px Montserrat, sans-serif; letter-spacing: .14em; text-transform: uppercase; color: #D4A440; margin-bottom: 8px; }
.st-pick2 .shiny-input-container { margin-bottom: 6px; }
.st-bkpis { margin-top: 10px; }
.st-bkpis .mk-kpi:first-child b { font-size: 14px; }
@media (max-width: 760px) { .st-pick2 { grid-template-columns: 1fr; } }
/* Index Studio back calculation: specifications as a collapsible table */
.st-speccard .mk-ctop { align-items: flex-start; }
.st-spec-tog { width: 38px; height: 38px; padding: 0; border-radius: 10px; font: 700 22px/1 Montserrat, sans-serif; color: #1A1204; border: 0;
  background: linear-gradient(180deg,#F0D890,#D4A440); flex: none; }
.st-spec-tog .c, .st-speccard.open .st-spec-tog .o { display: none; }
.st-speccard.open .st-spec-tog .c { display: inline; }
.st-spec-sum { color: #C9D3E6; font-size: 14px; }
.st-spec-sum b { color: #fff; }
.st-spec-tbl { display: none; margin-top: 12px; overflow-x: auto; }
.st-speccard.open .st-spec-tbl { display: block; }
.st-spec-t { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.st-spec-t th { color: #D4A440; font: 600 11.5px Montserrat, sans-serif; letter-spacing: .12em; text-align: left; padding: 9px 12px; white-space: nowrap;
  background: rgba(212,164,64,.06); border: 1px solid rgba(255,255,255,.06); width: 1%; }
.st-spec-t td { color: #fff; font-weight: 600; padding: 9px 12px; border: 1px solid rgba(255,255,255,.06); }
.st-spec-tog { font-family: Arial, sans-serif; font-size: 24px; font-weight: 700; }
/* Index Studio output: index page, template library and flipbook */
.st-dhead { margin: 22px 0 6px; }
.st-dtbl { width: 100%; }
.st-dtbl td.up { color: #34D399; } .st-dtbl td.dn { color: #F87171; }
.st-brlib .mk-act label { font: 600 11px Montserrat, sans-serif; letter-spacing: .14em; color: #9DB0CC; margin: 0 6px 0 0; }
.st-brlib .mk-act .shiny-input-container { margin: 0; }
.st-tpls { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 16px; }
.st-tpl { border: 1px solid #213760; border-radius: 14px; overflow: hidden; background: #0A1633; display: flex; flex-direction: column; }
.st-tpl.locked { border-style: dashed; }
.st-tpl-sw { height: 150px; position: relative; padding: 0; overflow: hidden; }
.st-tpl-sw > div:first-child { height: 58px; padding: 12px 14px; position: relative; }
.st-tpl-sw > div:first-child i { display: block; width: 34px; height: 3px; margin-bottom: 8px; }
.st-tpl-sw > div:first-child b { font: 700 16px Poppins, sans-serif; }
.st-tpl-k { display: flex; gap: 6px; padding: 10px 14px 0; }
.st-tpl-k span { flex: 1; height: 18px; border: 1px solid; border-radius: 4px; }
.st-tpl-sw svg { position: absolute; left: 14px; right: 14px; bottom: 12px; width: calc(100% - 28px); height: 40px; }
.st-tpl.locked .st-tpl-sw { filter: saturate(.7) brightness(.8); }
.st-tpl-b { padding: 12px 14px 14px; display: flex; flex-direction: column; gap: 6px; flex: 1; }
.st-tpl-t { display: flex; justify-content: space-between; align-items: center; }
.st-tpl-t b { color: #fff; font-size: 15px; }
.st-price { font: 700 11px Montserrat, sans-serif; letter-spacing: .08em; padding: 3px 9px; border-radius: 20px; background: linear-gradient(180deg,#F0D890,#D4A440); color: #1A1204; }
.st-price.free { background: rgba(52,211,153,.15); color: #34D399; border: 1px solid rgba(52,211,153,.4); }
.st-tpl-b p { font-size: 12.5px; color: #9DB0CC; margin: 0; flex: 1; }
.st-tpl-a { display: flex; gap: 8px; flex-wrap: wrap; }
.st-tpl-a .btn { padding: 6px 12px; font-size: 12.5px; }
.st-tpl-a a.btn.ghost { color: #E6ECF7; border: 1px solid #2B4374; }
.st-fb { color: #fff; }
.st-fb-top { display: flex; align-items: center; gap: 16px; margin-bottom: 12px; }
.st-fb-top b { flex: 1; font-size: 15px; }
.st-fb-pg { color: #D4A440; font-weight: 700; }
.st-fb-book { position: relative; margin: 0 auto; width: min(560px, 80vw); aspect-ratio: 210 / 297; perspective: 2200px; }
.st-fb-page { position: absolute; inset: 0; transform-origin: left center; transition: transform .9s cubic-bezier(.4,.1,.2,1), box-shadow .9s; backface-visibility: hidden;
  box-shadow: 0 12px 40px rgba(0,0,0,.45); background: #fff; }
.st-fb-page img { width: 100%; height: 100%; display: block; }
.st-fb-page.flipped { transform: rotateY(-180deg); box-shadow: none; }
.st-fb-nav { display: flex; justify-content: center; gap: 12px; margin-top: 16px; }
.modal-xl .modal-content:has(.st-fb) { background: #050C20; border: 1px solid #213760; }
/* My Show Room */
.sr-lead { color: #9DB0CC; margin: 8px 0 0; max-width: 720px; }
.sr-act { margin-left: auto; align-self: flex-end; }
.sr-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 18px; margin-top: 18px; }
.sr-card { background: linear-gradient(180deg, #0E1D45, #0A1633); border: 1px solid #213760; border-radius: 16px; padding: 18px 20px; display: flex; flex-direction: column; gap: 8px; transition: transform .15s, border-color .15s; }
.sr-card:hover { transform: translateY(-3px); border-color: #D4A440; }
.sr-top { display: flex; gap: 6px; flex-wrap: wrap; }
.sr-top span { font: 600 10.5px Montserrat, sans-serif; letter-spacing: .12em; padding: 3px 9px; border-radius: 20px; border: 1px solid #2B4374; color: #C9D6EC; }
.sr-top .sr-type { color: #D4A440; border-color: rgba(212,164,64,.5); }
.sr-top .sr-code { margin-left: auto; color: #fff; }
.sr-card h3 { margin: 4px 0 0; font-size: 20px; color: #fff; }
.sr-sub { margin: 0; color: #9DB0CC; font-size: 12.5px; }
.sr-last { display: flex; align-items: baseline; gap: 10px; }
.sr-last b { font-family: var(--serif, Georgia, serif); font-size: 30px; color: #fff; }
.sr-last span { font-weight: 700; } .sr-last span.up { color: #34D399; } .sr-last span.dn { color: #F87171; }
.sr-last em { margin-left: auto; font-style: normal; font-size: 12px; color: #9DB0CC; }
.sr-spark { width: 100%; height: 64px; }
.sr-figs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.sr-figs div { background: rgba(255,255,255,.03); border: 1px solid #1A2D52; border-radius: 8px; padding: 6px 8px; }
.sr-figs span { display: block; font: 600 10px Montserrat, sans-serif; letter-spacing: .12em; color: #9DB0CC; }
.sr-figs b { color: #fff; font-size: 14px; }
.sr-saved { margin: 0; font-size: 11.5px; color: #7F8FAD; }
.sr-btns { display: flex; gap: 8px; margin-top: 4px; }
.sr-btns .btn.ghost { color: #E6ECF7; border: 1px solid #2B4374; }
.sr-empty { text-align: center; padding: 50px 20px; margin-top: 18px; }
/* My Show Room: criteria switch and the 4 figures of the chosen criterion */
.sr-crit { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-top: 18px; }
.sr-crit .form-group { margin: 0; }
.sr-crit .shiny-options-group { display: flex; gap: 6px; }
.sr-crit .radio-inline { margin: 0; padding: 0; }
.sr-crit .radio-inline input { display: none; }
.sr-crit .radio-inline span { display: inline-block; padding: 7px 16px; border-radius: 20px; border: 1px solid #2B4374; color: #C9D6EC; font: 600 12px Montserrat, sans-serif; letter-spacing: .1em; text-transform: uppercase; cursor: pointer; }
.sr-crit .radio-inline input:checked + span { background: #D4A440; border-color: #D4A440; color: #0A1633; }
.sr-note { color: #9DB0CC; font-size: 12.5px; }
.sr-clab { font: 600 10.5px Montserrat, sans-serif; letter-spacing: .14em; color: #D4A440; display: flex; gap: 8px; align-items: center; }
.sr-clab span { background: rgba(212,164,64,.15); border-radius: 10px; padding: 1px 7px; }
.sr-figs4 { grid-template-columns: repeat(2, 1fr); }
.sr-figs b.up { color: #34D399; } .sr-figs b.dn { color: #F87171; }
/* My Show Room: a row of measure cards per group, and the ranking against the Market Place */
.sr-group { margin-top: 22px; }
.sr-ghead { display: flex; align-items: baseline; gap: 12px; margin-bottom: 10px; }
.sr-ghead h2, .sr-sec h2 { margin: 0; font: 700 15px Montserrat, sans-serif; letter-spacing: .16em; text-transform: uppercase; color: #D4A440; }
.sr-ghead span { color: #9DB0CC; font-size: 12.5px; }
.sr-sec { margin-top: 26px; }
.sr-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.sr-row2 { grid-template-columns: repeat(2, 1fr); }
@media (max-width: 1100px) { .sr-row { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .sr-row, .sr-row2 { grid-template-columns: 1fr; } }
.sr-mcard { background: linear-gradient(180deg, #0E1D45, #0A1633); border: 1px solid #213760; border-radius: 14px; padding: 14px 16px; }
.sr-mlab { font: 700 13px Montserrat, sans-serif; letter-spacing: .08em; color: #fff; text-transform: uppercase; }
.sr-msub { margin: 2px 0 10px; color: #7F8FAD; font-size: 11.5px; }
.sr-mrow { display: grid; grid-template-columns: 1fr auto auto; gap: 2px 10px; align-items: baseline; padding: 6px 0; border-top: 1px solid #1A2D52; }
.sr-mname { color: #C9D6EC; font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sr-mrow b { color: #fff; font-size: 14px; } .sr-mrow b.up { color: #34D399; } .sr-mrow b.dn { color: #F87171; }
.sr-mrow em { font-style: normal; font: 600 10.5px Montserrat, sans-serif; color: #D4A440; background: rgba(212,164,64,.12); border-radius: 10px; padding: 1px 7px; }
.sr-bar { grid-column: 1 / -1; height: 4px; background: #13244A; border-radius: 3px; overflow: hidden; }
.sr-bar i { display: block; height: 100%; background: #34D399; } .sr-bar i.dn { background: #F87171; }
.sr-rank { margin-top: 26px; }
.sr-rank .mk-ctop { display: flex; align-items: flex-end; gap: 16px; flex-wrap: wrap; }
.sr-rank .sr-crit { margin: 0 0 0 auto; }
.sr-rank .sr-crit > .form-group > label { display: block; font: 600 10.5px Montserrat, sans-serif; letter-spacing: .14em; color: #9DB0CC; text-transform: uppercase; margin-bottom: 6px; }
.sr-tbl { width: 100%; border-collapse: collapse; margin-top: 10px; font-size: 13px; }
.sr-tbl th { font: 600 10.5px Montserrat, sans-serif; letter-spacing: .12em; color: #9DB0CC; text-align: left; padding: 8px 10px; border-bottom: 1px solid #24396B; }
.sr-tbl th.on { color: #D4A440; }
.sr-tbl td { padding: 8px 10px; border-bottom: 1px solid #16284D; color: #E6ECF7; }
.sr-tbl td small { display: block; color: #7F8FAD; font-size: 11px; }
.sr-tbl td.up { color: #34D399; } .sr-tbl td.dn { color: #F87171; }
.sr-tbl tr.mine td { background: rgba(212,164,64,.08); } .sr-tbl tr.mine td:first-child { box-shadow: inset 3px 0 0 #D4A440; }
.sr-src { font: 600 10px Montserrat, sans-serif; letter-spacing: .1em; padding: 2px 8px; border-radius: 10px; border: 1px solid #2B4374; }
.sr-src.mine { color: #D4A440; border-color: #D4A440; } .sr-src.ims { color: #7FB2FF; }
.sr-tbl .btn.ghost { color: #E6ECF7; border: 1px solid #2B4374; }
/* Starter page (signed out): no top bar, only the language button in the top right corner */
html:not(.signed) nav.navbar { visibility: hidden; height: 0; min-height: 0; padding: 0; margin: 0; border: 0; overflow: visible; }
html:not(.signed) nav.navbar #lang_wrap { visibility: visible; position: fixed; top: 18px; right: 22px; z-index: 1050; }
html:not(.signed) nav.navbar #lang_wrap .lang-menu { right: 0; left: auto; }
/* Starter page: the logo-to-title and text-to-buttons gaps 25% shorter (64px to 48px, 74px to 56px) */
.hero img.logo { margin-bottom: 48px; }
.hero p { margin-bottom: 22px; }
.home-auth { margin-top: 34px; }
/* LOADING popup: while the app starts and whenever the server is busy for a moment */
.ccpi-loader { position: fixed; inset: 0; z-index: 9500; display: none; align-items: center; justify-content: center; background: rgba(5,11,26,.55); backdrop-filter: blur(3px); }
.ccpi-loader.on { display: flex; }
.ccpi-loader.start { background: radial-gradient(ellipse at 50% 40%, #0E1D45 0%, #050B1A 75%); backdrop-filter: none; }
.cl-box { display: flex; flex-direction: column; align-items: center; gap: 14px; padding: 26px 40px 22px; border-radius: 16px; background: linear-gradient(180deg, #0E1D45, #0A1633); border: 1px solid #2B4374; box-shadow: 0 20px 60px rgba(0,0,0,.5); }
.cl-logo { width: 150px; }
.cl-spin { width: 38px; height: 38px; border-radius: 50%; border: 3px solid rgba(212,164,64,.2); border-top-color: #D4A440; animation: cl-rot .9s linear infinite; }
.cl-txt { font: 700 13px Montserrat, sans-serif; letter-spacing: .22em; text-transform: uppercase; color: #E6ECF7; }
.cl-dots::after { content: ""; animation: cl-dots 1.2s steps(4) infinite; }
@keyframes cl-rot { to { transform: rotate(360deg); } }
@keyframes cl-dots { 0% { content: ""; } 25% { content: "."; } 50% { content: ".."; } 75% { content: "..."; } }
html[data-mode="light"] .cl-box { background: #fff; border-color: #C9D4E6; } html[data-mode="light"] .cl-txt { color: #0B1B3F; }
/* Sign in: wide two-column box as in CCPR, brand and help on the left, the form and the fingerprint button on the right */
#ccpi_login .lg-box.lg-wide { max-width: 900px; grid-template-columns: 330px 1fr; gap: 0 34px; padding: 30px 32px 28px; }
#ccpi_login .lg-wide .rg-main { padding-top: 2px; }
#ccpi_login .lg-pts { list-style: none; margin: 22px 0 0; padding: 0; font-size: 13px; color: #d6deec; }
#ccpi_login .lg-pts li { position: relative; padding-left: 20px; margin-bottom: 9px; }
#ccpi_login .lg-pts li::before { content: "\25C6"; position: absolute; left: 0; top: 0; color: #2f6fd8; font-size: 11px; }
html.lg-admin #ccpi_login .lg-pts li::before { color: #d32f2f; }
#ccpi_login .lg-fp { display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; margin-top: 10px; height: 42px; border-radius: 8px;
  background: transparent; border: 1px solid #2B4374; color: #cfe0ff; font: 700 13.5px "Poppins", sans-serif; letter-spacing: .04em; cursor: pointer; }
#ccpi_login .lg-fp:hover { border-color: #5b8fe8; background: rgba(47,111,216,.08); }
#ccpi_login .lg-fp svg { width: 20px; height: 20px; }
.lg-fp-msg { font-size: 12.5px; color: #F87171; margin-top: 8px; min-height: 0; } .lg-fp-msg.ok { color: #34D399; }
@media (max-width: 820px) { #ccpi_login .lg-box.lg-wide { grid-template-columns: 1fr; max-width: 420px; padding: 24px 22px; } #ccpi_login .lg-pts { display: none; } }
/* Back calculation: the Indexes card is a list of check boxes that filters the chart */
.st-ixchk .form-group { margin: 0; }
.st-ixchk .shiny-options-group { display: flex; flex-wrap: wrap; gap: 6px; }
.st-ixchk .checkbox-inline { margin: 0 !important; padding: 0; }
.st-ixchk .checkbox-inline label, .st-ixchk label.checkbox-inline { display: inline-flex; align-items: center; gap: 7px; padding: 6px 12px 6px 9px; border-radius: 8px; border: 1px solid #213760; background: #050C1E; cursor: pointer; }
.st-ixchk .checkbox-inline input { width: 15px; height: 15px; margin: 0; accent-color: #D4A440; cursor: pointer; }
.st-ixchk .checkbox-inline span { font-size: 13px; font-weight: 600; color: #C9D6EC; }
.st-ixchk .checkbox-inline:has(input:checked) { border-color: #D4A440; } .st-ixchk .checkbox-inline input:checked + span { color: #fff; }
/* Back calculation: Index levels 60%, Reviews 40% */
.ix-two.st-6040 { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); }
@media (max-width: 1000px) { .ix-two.st-6040 { grid-template-columns: 1fr; } }
/* Analytics: the 8 figures on one row */
.mk-kpis.st-kpi8 { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 10px; }
.mk-kpis.st-kpi8 .mk-kpi { min-width: 0; width: auto; }
.mk-kpis.st-kpi8 .mk-kpi span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 1100px) { .mk-kpis.st-kpi8 { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
/* Pattern sign-in: Password | Pattern switch, and the 3x3 pad (mouse, pen or finger) */
#ccpi_login .lg-how { display: inline-flex; gap: 0; margin: 0 0 10px; border: 1px solid #2B4374; border-radius: 8px; padding: 3px; }
#ccpi_login .lg-how button { background: transparent; border: 0; color: #9cbcf5; font: 700 11px "Montserrat", sans-serif; letter-spacing: .12em; text-transform: uppercase; padding: 6px 14px; border-radius: 6px; cursor: pointer; }
#ccpi_login .lg-how button.on { background: #2f6fd8; color: #fff; }
html.lg-admin #ccpi_login .lg-how button.on { background: #d32f2f; }
#ccpi_login .lg-patrow { display: none; margin-bottom: 12px; }
html.lg-pat #ccpi_login .lg-patrow { display: block; } html.lg-pat #ccpi_login .lg-pwrow { display: none; }
.pat-pad { width: 190px; height: 190px; margin: 6px 0 4px; background: #050c1c; border: 1px solid #1d3463; border-radius: 12px; touch-action: none; user-select: none; -webkit-user-select: none; }
.pat-pad svg { width: 100%; height: 100%; display: block; cursor: pointer; }
.pat-dot { fill: #1d3463; stroke: #5b8fe8; stroke-width: 2; transition: fill .1s, r .1s; }
.pat-dot.on { fill: #2f6fd8; stroke: #cfe0ff; r: 16px; }
.pat-line { fill: none; stroke: #5b8fe8; stroke-width: 6; stroke-linecap: round; stroke-linejoin: round; opacity: .85; }
.pat-pad.ok .pat-line, .pat-pad.ok .pat-dot.on { stroke: #34D399; } .pat-pad.ok .pat-dot.on { fill: #10B981; }
.pat-pad.bad .pat-line, .pat-pad.bad .pat-dot.on { stroke: #F87171; } .pat-pad.bad .pat-dot.on { fill: #DC2626; }
.pat-hint { display: block; font-size: 11.5px; color: #9DB0CC; }
.pat-pf { width: 220px; height: 220px; }
.pf-patbtns { margin-top: 8px; }
html[data-mode="light"] .pat-pf { background: #F4F6FB; border-color: #C9D4E6; } html[data-mode="light"] .pat-pf .pat-dot { fill: #DCE5F3; }
/* Fingerprint mode: the fingerprint button alone, without password, question or Sign in */
html.lg-fpm #ccpi_login #lg_in .lg-pwrow, html.lg-fpm #ccpi_login #lg_in .lg-cap, html.lg-fpm #ccpi_login #lg_in .lg-rem, html.lg-fpm #ccpi_login #lg_in #lg_go,
html.lg-fpm #ccpi_login #lg_in .rg-main > label:first-of-type, html.lg-fpm #ccpi_login #lg_in .lg-patrow { display: none; }
html.lg-fpm #ccpi_login .lg-fp { height: 64px; font-size: 15px; background: #2f6fd8; border-color: #2f6fd8; color: #fff; margin-top: 18px; }
html.lg-fpm #ccpi_login .lg-fp svg { width: 28px; height: 28px; }
/* My profile: sign-in methods card */
.pf-sec { grid-column: 1 / -1; }
.pf-sec-sts { display: flex; gap: 10px; flex-wrap: wrap; margin: 6px 0 14px; }
.pf-sec-st { display: flex; flex-direction: column; gap: 2px; padding: 8px 14px; border: 1px solid #2B4374; border-radius: 10px; min-width: 150px; }
.pf-sec-st b { font: 700 10.5px Montserrat, sans-serif; letter-spacing: .14em; color: #9DB0CC; } .pf-sec-st span { color: #9DB0CC; font-weight: 600; }
.pf-sec-st.on { border-color: #10B981; } .pf-sec-st.on span { color: #34D399; }
.pf-mode { margin-bottom: 16px; } .pf-mode .lg-cap-l { display: block; font: 700 10.5px Montserrat, sans-serif; letter-spacing: .14em; text-transform: uppercase; color: #9DB0CC; margin-bottom: 6px; }
.pf-how { display: inline-flex; border: 1px solid #2B4374; border-radius: 8px; padding: 3px; }
.pf-how button { background: transparent; border: 0; color: #9cbcf5; font: 700 11px Montserrat, sans-serif; letter-spacing: .12em; text-transform: uppercase; padding: 7px 16px; border-radius: 6px; cursor: pointer; }
.pf-how button.on { background: var(--gold, #D4A440); color: #050C1E; }
.pf-sec-row { display: grid; grid-template-columns: 46px 1fr; gap: 14px; padding: 14px 0; border-top: 1px solid #1A2D52; }
.pf-sec-row h4 { margin: 0 0 4px; font-size: 16px; }
.pf-sec-ico { width: 46px; height: 46px; border-radius: 12px; display: flex; align-items: center; justify-content: center; background: rgba(47,111,216,.15); color: #7FB2FF; }
.pf-sec-ico svg { width: 26px; height: 26px; }
.pf-patbtns { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 8px; }

.lg-patset{display:inline-block;margin-top:6px;font-size:12.5px;font-weight:600;color:var(--gold,#D4A440);text-decoration:none}
.lg-patset:hover{text-decoration:underline}
.lg-info{margin:6px 0 0;font-size:12.5px;color:#B9C6DE}
/* Market Place: the ranking filters in a highlighted gold panel */
.mp-filters{position:relative;padding:18px 16px 10px;border:1.5px solid #D4A440;border-radius:14px;background:linear-gradient(180deg,rgba(212,164,64,.16),rgba(212,164,64,.06));box-shadow:0 0 0 4px rgba(212,164,64,.08),0 8px 22px rgba(0,0,0,.25)}
.mp-filters .mp-fl{position:absolute;top:-9px;left:14px;padding:1px 10px;border-radius:999px;background:#D4A440;color:#0B1530;font-size:10.5px;font-weight:800;letter-spacing:.16em}
.mp-filters .control-label{color:#D4A440 !important}
.mp-filters .selectize-input,.mp-filters select{border-color:rgba(212,164,64,.7) !important}

/* HELP modal */
.hp-box .hp-top{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:14px}
.hp-box .hp-kick{color:#D4A440;font-size:11px;font-weight:800;letter-spacing:.2em}
.hp-box h3{margin:2px 0 0}
.hp-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.hp-card{border:1px solid rgba(212,164,64,.35);border-radius:12px;padding:12px 14px;background:rgba(212,164,64,.05)}
.hp-card h4{font-size:15px;margin:0 0 6px;color:#D4A440}
.hp-card ul{margin:0 0 10px;padding-left:18px;font-size:13px;line-height:1.45}
@media (max-width:700px){.hp-grid{grid-template-columns:1fr}}

.hp-tabs{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:14px;border-bottom:1px solid rgba(212,164,64,.35);padding-bottom:10px}
.hp-tabs button{border:1px solid rgba(212,164,64,.45);background:transparent;color:inherit;border-radius:999px;padding:6px 14px;font-size:13px;font-weight:600}
.hp-tabs button.on{background:#D4A440;color:#0B1530;border-color:#D4A440}
.hp-pane{display:none;max-height:62vh;overflow:auto;padding-right:4px}.hp-pane.on{display:block}
.hp-q{width:100%;max-width:360px;margin-bottom:10px;padding:7px 12px;border-radius:10px;border:1px solid rgba(212,164,64,.45);background:transparent;color:inherit}
.hp-gl{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.hp-term{border:1px solid rgba(212,164,64,.25);border-radius:10px;padding:8px 12px;font-size:13px}.hp-term b{display:block;color:#D4A440;margin-bottom:2px}
.hp-faq{border:1px solid rgba(212,164,64,.25);border-radius:10px;padding:8px 12px;margin-bottom:8px}
.hp-faq summary{cursor:pointer;font-weight:700}.hp-faq p{margin:8px 0 2px;font-size:13.5px}
.hp-vids{display:grid;grid-template-columns:1fr 1fr;gap:14px}.hp-vid video{width:100%;border-radius:10px;border:1px solid rgba(212,164,64,.35);background:#000}
.hp-vid h4{font-size:15px;margin:8px 0 4px;color:#D4A440}.hp-vid p{font-size:13px;margin:0}
.hp-note{font-size:13px;opacity:.8}
.hp-qz{border:1px solid rgba(212,164,64,.25);border-radius:10px;padding:10px 12px;margin-bottom:8px}
.hp-qz.good{border-color:#3DDC97}.hp-qz.bad{border-color:#FF7A7A}
.hp-qa{display:flex;flex-wrap:wrap;gap:6px 18px;margin-top:6px;font-size:13.5px}.hp-qa label{display:flex;gap:6px;align-items:center;cursor:pointer}
.hp-qa label.right{color:#3DDC97;font-weight:700}
.hp-qend{display:flex;gap:12px;align-items:center;margin-top:6px}
.hp-form{display:grid;grid-template-columns:1fr 1fr;gap:0 14px}.hp-form .form-group:nth-child(n+3){grid-column:1/-1}
@media (max-width:700px){.hp-gl,.hp-vids,.hp-form{grid-template-columns:1fr}}
/* sign-in methods: password confirmation gate and rules */
.pf-gate{margin:12px 0 4px;padding:12px 14px;border:1.5px solid #D4A440;border-radius:12px;background:rgba(212,164,64,.08);font-size:13.5px;transition:box-shadow .3s}
.pf-gate.ok{border-color:#10B981;background:rgba(16,185,129,.08);color:#10B981;font-weight:600;padding:8px 12px}
.pf-gate.flash{box-shadow:0 0 0 4px rgba(212,164,64,.5)}
.pf-gate-row{display:flex;gap:8px;align-items:center;margin-top:8px;flex-wrap:wrap}.pf-gate-row .form-group{margin:0;flex:1;min-width:180px;max-width:300px}
.pf-rules{margin:10px 0 16px;font-size:13px}.pf-rules summary{cursor:pointer;font-weight:700;color:#D4A440}.pf-rules ul{margin:8px 0 0;padding-left:18px;line-height:1.5}
.adm-b.warn{border-color:#D4A440;color:#D4A440}

/* top bar = CCPR (2026-10-18): one row 62px, logo | CCPI mark, menu left after the brand, icon buttons on the right, initials badge, icon-only red admin */
@media (min-width: 992px) {
  html.signed .navbar { position: sticky !important; top: 0; z-index: 1030; background: rgba(5,12,28,.88) !important; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); border-bottom: 1px solid #16294d !important; }
  html.signed .navbar > .container-fluid { min-height: 62px !important; height: 62px; padding: 0 18px 0 28px !important; display: flex !important; flex-wrap: nowrap !important; align-items: center !important; }
  html.signed .navbar > .container-fluid::before { content: none !important; display: none !important; }
  html.signed .navbar .navbar-header { position: static !important; transform: none !important; flex: 0 0 auto; }
  html.signed .navbar .navbar-brand { padding: 0 !important; margin: 0 !important; height: auto !important; }
  html.signed .navbar .brandwrap { display: flex; align-items: center; }
  html.signed .navbar .brand img { height: 27.5px !important; }
  html.signed .navbar .ccpi-mark { display: inline-flex !important; border-left: 1px solid rgba(255,255,255,.2); padding: 0 0 0 18px !important; margin-left: 18px !important; }
  html.signed .navbar .ccpi-mark b { font-size: 25px; letter-spacing: .1em; }
  html.signed .navbar .ccpi-mark small { font-size: 9px; letter-spacing: .3em; margin-top: 5px; }
  html.signed .navbar .plat { margin-left: 14px; }
  html.signed .navbar .navbar-collapse { flex: 1 1 auto !important; flex-basis: auto !important; display: flex !important; align-items: center; height: 62px; }
  html.signed #nav { flex: 1 1 auto !important; flex-wrap: nowrap !important; justify-content: flex-start !important; align-items: center !important; padding: 0 !important; margin: 0 0 0 40px !important; gap: 0 26px; row-gap: 0 !important; height: 62px; }
  html.signed #nav::before { content: none !important; display: none !important; }
  html.signed #nav > .bslib-nav-spacer { order: 0 !important; flex: 1 1 auto !important; }
  html.signed #nav > li.form-inline:nth-last-child(-n+3) { order: 0 !important; margin-left: 0 !important; }
  html.signed #nav > li.form-inline:nth-last-child(-n+3) + li.form-inline { margin-left: 10px !important; }
  html.signed .navbar .navbar-nav > .nav-item > .nav-link, html.signed .navbar .navbar-nav > .dropdown > .nav-link {
    padding: 4px 0 !important; font: 800 15px "Montserrat", sans-serif !important; letter-spacing: .06em !important; color: #fff !important; text-transform: uppercase;
    border-bottom: 2px solid transparent !important; box-shadow: none !important; line-height: 1.2 !important; height: auto !important; }
  html.signed .navbar .nav-link::after { display: none !important; }
  html.signed .navbar .navbar-nav > .nav-item > .nav-link:hover, html.signed .navbar .navbar-nav > .dropdown > .nav-link:hover,
  html.signed .navbar .navbar-nav > .dropdown.show > .nav-link { color: #e1bb64 !important; }
  html.signed .navbar .navbar-nav > .nav-item > .nav-link.active, html.signed .navbar .navbar-nav > .dropdown > .nav-link.active,
  html.signed .navbar .nav-link.nav-ccpi.on { color: #e1bb64 !important; border-bottom-color: #d4a440 !important; }
  html.signed .navbar .nav-link.nav-ccpi { color: #fff !important; }
  html.signed .navbar .nav-link.nav-ccpi:hover { color: #e1bb64 !important; }
  html.signed .navbar .navbar-nav > .nav-item > .nav-link:has(.nav-home) { border-bottom: 0 !important; padding: 0 !important; }
  html.signed .navbar .nav-home { color: #d4a440; display: inline-flex; }
  html.signed .navbar .nav-home svg { width: 23.4px !important; height: 23.4px !important; }
  html.signed .navbar .dropdown-toggle .caret, html.signed .navbar .dropdown-toggle::after { margin-left: 7px; }
  /* dropdowns as the CCPR menu list */
  html.signed .navbar .dropdown-menu { top: calc(100% + 12px) !important; left: 0; min-width: 230px; background: #0a1a3c !important; border: 1px solid #1d3463 !important;
    border-top: 3px solid #d4a440 !important; border-radius: 12px !important; padding: 8px !important; box-shadow: 0 18px 40px rgba(0,0,0,.5) !important; }
  html.signed .navbar .dropdown-menu .dropdown-item { padding: 10px 14px !important; border-radius: 8px; color: #fff !important; font: 700 12.5px "Montserrat", sans-serif !important; letter-spacing: .08em !important; white-space: nowrap; background: none; }
  html.signed .navbar .dropdown-menu .dropdown-item:hover, html.signed .navbar .dropdown-menu .dropdown-item.active { color: #e1bb64 !important; background: #11254d !important; }
  /* icon buttons 40px; the user initials badge with a gold border, shown for admin too */
  html.signed .navbar .tools { gap: 12px !important; }
  html.signed .navbar .cbtn, html.signed .navbar .tools-end .cbtn { width: 40px !important; height: 40px !important; min-width: 40px !important; flex: 0 0 40px !important; border-radius: 6px; }
  html.signed .navbar .sbox { height: 40px !important; min-width: 40px; border-radius: 6px; }
  html.signed .navbar .cbtn svg, html.signed .navbar .sbox > svg { width: 16.2px; height: 16.2px; }
  html.admin #ubox, html.admin .navbar .nav-item:has(#ubox) { display: flex !important; }
  html.signed .navbar .ubox { margin: 0 !important; }
  html.signed .navbar .cbtn.ubtn { width: 54px !important; min-width: 54px !important; flex: 0 0 54px !important; border: 1px solid #9a7a3a !important; background: transparent !important; }
  html.signed .navbar .cbtn.ubtn .u-ini { background: none !important; color: #e1bb64 !important; font: 800 14px "Montserrat", sans-serif; letter-spacing: .06em; width: auto; height: auto; }
  html.signed .navbar .cbtn.ubtn:hover { border-color: #d4a440 !important; }
  html.signed .navbar .tools-end { gap: 12px !important; }
  html.signed .navbar .tools-end .cbtn.langbtn { width: auto !important; min-width: 82px !important; flex: 0 0 auto !important; padding: 0 14px; gap: 8px; justify-content: center; }
  html.signed .navbar .am-wrap { position: relative !important; right: auto; top: auto; }
  html.signed .navbar .tools-end .cbtn.admbtn { width: 50px !important; min-width: 50px !important; height: 40px !important; flex: 0 0 50px !important; padding: 0 !important; border-radius: 6px; }
  html.signed .navbar .adm-lab { display: none !important; }
  html.signed .navbar .am-menu { top: calc(100% + 10px); right: 0; }
  html[data-mode="light"].signed .navbar { background: rgba(255,255,255,.92) !important; border-bottom-color: #e3e8f2 !important; }
  html[data-mode="light"].signed .navbar .navbar-nav > .nav-item > .nav-link, html[data-mode="light"].signed .navbar .navbar-nav > .dropdown > .nav-link { color: var(--navy) !important; }
  html[data-mode="light"].signed .navbar .navbar-nav .nav-link.active { color: #b8862a !important; }
}
@media (min-width: 992px) and (max-width: 1500px) {
  html.signed #nav { margin-left: 24px !important; gap: 0 18px; }
  html.signed .navbar .navbar-nav > .nav-item > .nav-link, html.signed .navbar .navbar-nav > .dropdown > .nav-link { font-size: 10.5px !important; letter-spacing: .04em !important; }
  html.signed .navbar .ccpi-mark { padding-left: 12px !important; margin-left: 12px !important; }
  html.signed .navbar .ccpi-mark b { font-size: 20px; } html.signed .navbar .ccpi-mark small { font-size: 7.5px; }
  html.signed .navbar .plat { display: none; }
  html.signed .navbar .tools, html.signed .navbar .tools-end { gap: 8px !important; }
  html.signed .navbar .nav-home svg { width: 18.9px !important; height: 18.9px !important; }
}
@media (min-width: 992px) and (max-width: 1250px) {
  html.signed .navbar .ccpi-mark { display: none !important; }
  html.signed #nav { margin-left: 16px !important; gap: 0 13px; }
  html.signed .navbar .navbar-nav > .nav-item > .nav-link, html.signed .navbar .navbar-nav > .dropdown > .nav-link { font-size: 9.5px !important; }
}
@media (min-width: 992px) {
  html.signed #nav > li.form-inline:nth-last-child(-n+2) { margin-left: -14px !important; }
  html.signed .navbar .dropdown-toggle .caret { margin-left: 5px !important; }
  html.signed .navbar .dropdown-toggle { display: inline-flex !important; align-items: center; }
}
@media (min-width: 992px) and (max-width: 1500px) {
  html.signed .navbar > .container-fluid { padding: 0 12px 0 18px !important; }
  html.signed #nav { gap: 0 15px; }
  html.signed #nav > li.form-inline:nth-last-child(-n+2) { margin-left: -9px !important; }
  html.signed .navbar .cbtn, html.signed .navbar .tools-end .cbtn { width: 36px !important; height: 36px !important; min-width: 36px !important; flex: 0 0 36px !important; }
  html.signed .navbar .sbox { height: 36px !important; min-width: 36px; }
  html.signed .navbar .cbtn.ubtn { width: 46px !important; min-width: 46px !important; flex: 0 0 46px !important; }
  html.signed .navbar .tools-end .cbtn.langbtn { min-width: 0 !important; padding: 0 10px; }
  html.signed .navbar .tools-end .cbtn.admbtn { width: 42px !important; min-width: 42px !important; flex: 0 0 42px !important; height: 36px !important; }
}
/* admin menu: sign-in method rows with CREATE / REMOVE buttons (as in CCPR) */
.am-item.am-sec-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.am-sec-t { min-width: 0; }
.am-sec-b { display: flex; gap: 6px; flex: 0 0 auto; }
.am-mini { font: 700 11px "Montserrat", sans-serif; letter-spacing: .1em; text-transform: uppercase; padding: 5px 10px; border-radius: 6px; cursor: pointer;
  border: 1px solid #d4a440; background: #2b2416; color: #e8c979; }
.am-mini:hover { background: #3a3020; color: #fff; }
.am-mini.rm { border-color: #7a3a3a; background: transparent; color: #ff8a80; }
.am-mini.rm:hover { background: #3a1a1a; color: #fff; }

/* top bar as in DMS (2026-10-19): gold title line back on top, the menu tight under it, both centred on the page; logo left, buttons right */
@media (min-width: 992px) {
  html.signed .navbar > .container-fluid { --side: 430px; height: 96px; min-height: 96px !important; position: relative; padding: 0 18px 0 28px !important; }
  html.signed .navbar > .container-fluid::before { content: "\25C6\00a0 \00a0 CLOUD COMPUTING PLATFORM FOR INVESTMENT (CCPI)\00a0 \00a0 \25C6" !important; display: block !important;
    position: absolute; top: 20px; left: 50%; transform: translateX(-50%); white-space: nowrap; padding: 0 150px; pointer-events: none;
    font: 700 14px "Montserrat", sans-serif; letter-spacing: .2em; color: #e1bb64; line-height: 1;
    background: linear-gradient(90deg, transparent, #d4a440) left center / 140px 1px no-repeat, linear-gradient(90deg, #d4a440, transparent) right center / 140px 1px no-repeat; }
  html.signed .navbar .navbar-header { flex: 0 0 var(--side) !important; }
  html.signed .navbar .brand img { height: 48.6px !important; }
  html.signed .navbar .ccpi-mark, html.signed .navbar .plat { display: none !important; }
  html.signed .navbar .navbar-collapse { height: 96px; }
  html.signed #nav { margin: 0 !important; height: 96px; }
  html.signed #nav::before { content: "" !important; display: block !important; flex: 1 1 0; order: -5; }
  html.signed #nav > .bslib-nav-spacer { flex: 1 1 0 !important; }
  html.signed #nav > li:not(.form-inline), html.signed #nav > li.form-inline:has(.nav-ccpi) { transform: translateY(19px); }
  html.signed .navbar .navbar-nav > .nav-item > .nav-link, html.signed .navbar .navbar-nav > .dropdown > .nav-link { font-size: 14px !important; }
  html[data-mode="light"].signed .navbar > .container-fluid::before { color: #b8862a; }
}
@media (min-width: 992px) and (max-width: 1500px) {
  html.signed .navbar > .container-fluid { --side: 330px; }
  html.signed .navbar > .container-fluid::before { font-size: 12px; letter-spacing: .16em; padding: 0 70px; background-size: 60px 1px, 60px 1px; }
  html.signed .navbar .brand img { height: 37.3px !important; }
  html.signed .navbar .navbar-nav > .nav-item > .nav-link, html.signed .navbar .navbar-nav > .dropdown > .nav-link { font-size: 10.5px !important; }
}
@media (min-width: 992px) and (max-width: 1250px) {
  html.signed .navbar > .container-fluid { --side: 110px; }
  html.signed .navbar > .container-fluid::before { font-size: 11px; letter-spacing: .1em; padding: 0; background: none; }
  html.signed .navbar .navbar-nav > .nav-item > .nav-link, html.signed .navbar .navbar-nav > .dropdown > .nav-link { font-size: 9.5px !important; }
}
@media (min-width: 992px) {
  html.signed .navbar .navbar-header { flex: 0 0 auto !important; }
  html.signed .navbar > .container-fluid::before { left: var(--tc, 50%) !important; }
}
@media (min-width: 992px) and (max-width: 1500px) {
  html.signed .navbar > .container-fluid::before { padding: 0 50px; background-size: 40px 1px, 40px 1px; }
}
@media (min-width: 992px) and (max-width: 1250px) {
  html.signed #nav { gap: 0 10px !important; }
  html.signed .navbar > .container-fluid { padding: 0 10px 0 14px !important; }
  html.signed .navbar .brand img { height: 30.8px !important; }
  html.signed .navbar .tools, html.signed .navbar .tools-end { gap: 6px !important; }
}

/* ===== Admin page and Administration as in VTPWEB (2026-10-19) ===== */
/* header: the red ADMIN button on the 2nd row, under the icons, right-aligned with them */
@media (min-width: 992px) {
  html.signed #nav > li.form-inline:nth-last-child(-n+3) { transform: none !important; position: relative; top: -19px; }
  html.signed .navbar .am-wrap { position: absolute !important; right: 0; top: calc(100% + 10px); }
  html.signed .navbar .tools-end { position: relative; }
  html.signed .navbar .tools-end .cbtn.admbtn { width: auto !important; min-width: 118px !important; flex: 0 0 auto !important; height: 34px !important;
    padding: 0 16px !important; gap: 8px; display: inline-flex; align-items: center; justify-content: center; border-radius: 8px; }
  html.signed .navbar .adm-lab { display: inline !important; font: 800 13px "Montserrat", sans-serif; letter-spacing: .14em; text-transform: uppercase; }
  html.signed .navbar .cbtn.admbtn svg { width: 16.2px; height: 16.2px; }
}
@media (min-width: 992px) and (max-width: 1500px) {
  html.signed .navbar .tools-end .cbtn.admbtn { height: 30px !important; min-width: 100px !important; padding: 0 12px !important; }
  html.signed .navbar .adm-lab { font-size: 11.5px; }
}
/* Admin page: the menu becomes a full page with three cards (3 columns, 2 on a tablet, 1 on a phone) */
html.am-page .navbar { backdrop-filter: none !important; -webkit-backdrop-filter: none !important; background: #050c1c !important; }
html.am-page body { overflow: hidden; }
html.am-page .am-wrap.open .am-menu { position: fixed !important; top: var(--hdr, 96px) !important; left: 0 !important; right: 0 !important; bottom: 0 !important;
  width: auto !important; max-height: none !important; border: 0; border-radius: 0; box-shadow: none; z-index: 1025; overflow: auto;
  background: radial-gradient(1200px 500px at 50% -10%, #10264f 0%, #050c1c 60%) fixed;
  display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; align-content: start;
  padding: 34px max(28px, calc((100vw - 1280px) / 2)) 60px; }
html.am-page .am-head { grid-column: 1 / -1; display: flex; align-items: center; gap: 16px; border: 0; padding: 0 0 6px; }
html.am-page .am-ttl { display: flex; flex-direction: column; font: 800 15px "Montserrat", sans-serif; letter-spacing: .3em; color: #e1bb64; }
html.am-page .am-ttl small { font: italic 700 40px Georgia, serif; letter-spacing: 0; text-transform: none; color: #fff; margin-top: 8px; }
html.am-page .am-ver { margin-left: auto; align-self: flex-end; }
.am-x { display: none; }
html.am-page .am-x { display: inline-flex; align-items: center; justify-content: center; align-self: flex-end; width: 40px; height: 40px; border-radius: 8px;
  border: 1px solid #2c4777; background: transparent; color: #fff; font-size: 26px; line-height: 1; cursor: pointer; }
html.am-page .am-x:hover { border-color: #d4a440; color: #e8c979; }
html.am-page .am-sec { background: #0a1a3c; border: 1px solid #1d3463 !important; border-top: 3px solid #d4a440 !important; border-radius: 14px; padding: 14px 0 12px; align-self: start; }
html.am-page .am-menu > .am-sec:nth-child(2) { border-top-color: #d32f2f !important; }
html.am-page .am-lab { font-size: 13px; padding: 6px 22px 10px; }
html.am-page .am-item { padding: 9px 22px 9px 49px; font-size: 15.5px; }
@media (max-width: 1100px) { html.am-page .am-wrap.open .am-menu { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 680px) { html.am-page .am-wrap.open .am-menu { grid-template-columns: 1fr; padding: 22px 14px 40px; } html.am-page .am-ttl small { font-size: 30px; } }
/* Administration page: the tabs in four groups */
.adm-tabs-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.adm-groups { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin: 0 0 24px; }
.adm-grp { background: #0a1a3c; border: 1px solid #1d3463; border-radius: 12px; padding: 12px 14px 14px; }
.adm-grp-l { display: block; font: 800 11.5px "Montserrat", sans-serif; letter-spacing: .2em; color: #e1bb64; margin-bottom: 10px; }
.adm-grp-b { display: flex; flex-wrap: wrap; gap: 6px; }
.adm-gb { font: 600 12.5px "Poppins", sans-serif; color: #dfe6f3; background: transparent; border: 1px solid #2c4777; border-radius: 8px; padding: 6px 11px; cursor: pointer; }
.adm-gb:hover { border-color: #d4a440; color: #e8c979; }
.adm-gb.on { background: #2b2416; border-color: #d4a440; color: #e8c979; }
@media (max-width: 1100px) { .adm-groups { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .adm-groups { grid-template-columns: 1fr; } }
html[data-mode="light"] .adm-grp { background: #fff; border-color: #e3e8f2; }
html[data-mode="light"] .adm-gb { color: #0b1a3d; border-color: #cfd8e6; }
.sc-code { max-height: 65vh; overflow: auto; background: #050c1c; color: #dfe6f3; font: 12.5px/1.5 Consolas, "Courier New", monospace; padding: 14px; border-radius: 10px; white-space: pre; }
/* phone and tablet (burger menu): compact menu rows, the buttons in one row, the ADMIN button with its label */
@media (max-width: 991px) {
  .navbar .navbar-nav > .nav-item > .nav-link, .navbar .navbar-nav > .dropdown > .nav-link { height: auto !important; min-height: 0 !important; padding: 11px 6px !important; line-height: 1.3 !important; }
  .navbar .navbar-collapse { max-height: calc(100vh - 70px); overflow-y: auto; }
  #nav > li.form-inline:nth-last-child(-n+3) { display: inline-flex !important; vertical-align: middle; margin: 12px 8px 4px 0; }
  #nav { flex-direction: row !important; flex-wrap: wrap !important; }
  #nav > li:not(.form-inline), #nav > li.form-inline:has(.nav-ccpi), #nav > .bslib-nav-spacer { flex: 0 0 100%; }
  .navbar .cbtn.admbtn { width: auto !important; padding: 0 14px !important; gap: 8px; display: inline-flex; align-items: center; }
  .navbar .adm-lab { display: inline !important; font: 800 12.5px "Montserrat", sans-serif; letter-spacing: .14em; text-transform: uppercase; }
}
/* the Admin page moved under body (JS) so it shows on every screen, also when the burger menu is closed */
html.am-page body > #am_menu { display: grid !important; position: fixed !important; top: var(--hdr, 70px) !important; left: 0 !important; right: 0 !important; bottom: 0 !important;
  width: auto !important; max-height: none !important; border: 0; border-radius: 0; box-shadow: none; z-index: 1025; overflow: auto;
  background: radial-gradient(1200px 500px at 50% -10%, #10264f 0%, #050c1c 60%) fixed;
  grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; align-content: start; padding: 34px max(28px, calc((100vw - 1280px) / 2)) 80px; text-align: left; }
@media (max-width: 1100px) { html.am-page body > #am_menu { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 680px) { html.am-page body > #am_menu { grid-template-columns: 1fr; padding: 22px 14px 80px; gap: 14px; } }
@media (max-width: 400px) { .am-item.am-sec-row { flex-wrap: wrap; } }
/* two lines at every desktop width (also at 125% zoom): line 1 = title + icons pinned top right; line 2 = menu + ADMIN under the icons */
@media (min-width: 992px) {
  html.signed .navbar > .container-fluid { padding-right: 160px !important; }
  html.signed #nav > li.form-inline:nth-last-child(-n+3) { position: absolute !important; top: 10px !important; margin: 0 !important; transform: none !important; }
  html.signed #nav > li.form-inline:nth-last-child(1) { right: 18px; }
  html.signed #nav > li.form-inline:nth-last-child(2) { right: 112px; }
  html.signed #nav > li.form-inline:nth-last-child(3) { right: 178px; }
  html.signed .navbar .tools-end .cbtn.langbtn { width: 82px !important; min-width: 82px !important; flex: 0 0 82px !important; padding: 0 !important; }
  html.signed .navbar .am-wrap { top: calc(100% + 8px) !important; }
}
@media (min-width: 992px) and (max-width: 1500px) {
  html.signed .navbar > .container-fluid { padding-right: 130px !important; }
  html.signed #nav > li.form-inline:nth-last-child(1) { right: 12px; }
  html.signed #nav > li.form-inline:nth-last-child(2) { right: 94px; }
  html.signed #nav > li.form-inline:nth-last-child(3) { right: 148px; }
  html.signed .navbar .tools-end .cbtn.langbtn { width: 74px !important; min-width: 74px !important; flex: 0 0 74px !important; }
}

/* Index Studio: Video guide button and its window */
.st-guide{white-space:nowrap}.st-guide-v{width:100%;border-radius:10px;border:1px solid rgba(212,164,64,.35);background:#000;display:block}

/* Brochure & contact (as in CCPR step 14): brochure card left, Request information form right */
.ci-grid { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 26px; align-items: start; text-align: left; }
.ci-bro { border-color: rgba(212,164,64,.55) !important; background: linear-gradient(180deg, rgba(212,164,64,.10), rgba(10,26,60,.6)) !important; }
.ci-thumbs { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin: 18px 0 6px; }
.ci-thumbs a { position: relative; display: block; border-radius: 10px; overflow: hidden; border: 1px solid #2c4777; transition: transform .2s, border-color .2s; }
.ci-thumbs a:hover { transform: translateY(-3px); border-color: #d4a440; }
.ci-thumbs img { display: block; width: 100%; height: auto; }
.ci-thumbs span { position: absolute; left: 8px; bottom: 8px; font: 800 10.5px "Montserrat", sans-serif; letter-spacing: .14em; color: #0b1a3d; background: #e1bb64; border-radius: 4px; padding: 3px 7px; }
.ci-btns { margin-top: 16px; display: flex; gap: 12px; flex-wrap: wrap; }
.ci-bacts { margin: 14px 0 16px; display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.ci-bacts > div { display: flex; flex-direction: column; gap: 8px; }
.ci-bacts .btn { width: 100%; }
.ci-desk { margin-top: 16px; font-size: 13.5px; color: #9fb0cc; } .ci-desk a { color: #e8c979; }
.ci-form label { display: block; font: 700 12px "Montserrat", sans-serif; letter-spacing: .16em; color: #dfe6f3; margin: 14px 0 0; }
.ci-form input, .ci-form select, .ci-form textarea { display: block; width: 100%; margin-top: 7px; box-sizing: border-box; padding: 11px 14px; border-radius: 8px;
  border: 1px solid #1d3463; background: #050c1c; color: #fff; font: 400 15px "Poppins", sans-serif; letter-spacing: 0; }
.ci-form input:focus, .ci-form select:focus, .ci-form textarea:focus { outline: none; border-color: #d4a440; }
.ci-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.ci-send { margin-top: 18px; display: flex; align-items: center; gap: 14px; flex-wrap: wrap; } .ci-send p { margin: 0; }
html[data-mode="light"] .ci-form input, html[data-mode="light"] .ci-form select, html[data-mode="light"] .ci-form textarea { background: #fff; color: #0b1a3d; border-color: #cfd8e6; }
html[data-mode="light"] .ci-form label { color: #0b1a3d; }
@media (max-width: 900px) { .ci-grid { grid-template-columns: 1fr; } }
@media (max-width: 560px) { .ci-row { grid-template-columns: 1fr; gap: 0; } }

/* 2026-10-20: starter page, 25% less space between the subtitle and SIGN UP / SIGN IN (61px -> 46px) */
html:not(.signed) .hero > p:has(+ .home-auth) { margin-bottom: 16px !important; }
html:not(.signed) .hero > .home-auth { margin-top: 25px !important; }

/* 2026-10-20: Brochure & contact, as in CCPR: brochure and video cards left, form and contact card right */
.ci-col { display: flex; flex-direction: column; gap: 22px; min-width: 0; }
.ci-vthumbs { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 14px; margin: 18px 0 4px; }
.ci-vi { text-align: center; } .ci-vi > span { display: block; margin-top: 10px; font: 800 12px "Montserrat", sans-serif; letter-spacing: .16em; color: #e1bb64; }
.ci-vbig { grid-column: 1 / -1; width: 72%; margin: 6px auto 0; }
.ci-v { position: relative; display: block; width: 100%; padding: 0; border: 1px solid #2c4777; border-radius: 10px; overflow: hidden; background: #000; cursor: pointer; transition: transform .2s, border-color .2s; }
.ci-v:hover { transform: translateY(-3px); border-color: #d4a440; }
.ci-v img { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.ci-v .pl { position: absolute; left: 10px; bottom: 10px; width: 38px; height: 38px; border-radius: 50%; border: 2px solid #e1bb64; background: rgba(5,12,28,.55); }
.ci-v .pl::after { content: ""; position: absolute; left: 14px; top: 10px; border-style: solid; border-width: 7px 0 7px 11px; border-color: transparent transparent transparent #fff; }
.ci-v .du { position: absolute; right: 8px; bottom: 8px; font: 700 12px "Montserrat", sans-serif; color: #fff; background: rgba(5,12,28,.75); border-radius: 4px; padding: 2px 6px; }
.ci-v .en-only { display: none; position: absolute; right: 8px; top: 8px; text-decoration: none; font: 800 10px "Montserrat", sans-serif; letter-spacing: .1em; color: #0b1a3d; background: #e1bb64; border-radius: 4px; padding: 2px 6px; }
.ci-v.en-fb .en-only { display: block; }
.ci-vlang { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 18px; }
.ci-vlang button { padding: 10px; border-radius: 8px; border: 1px solid #2e6ad8; background: transparent; color: #dfe6f3; font: 700 14px "Montserrat", sans-serif; cursor: pointer; }
.ci-vlang button.on { background: #2e6ad8; color: #fff; }
.ci-clabel { font: 800 13px "Montserrat", sans-serif; letter-spacing: .2em; color: #e1bb64; margin: -4px 0 -10px; }
.ci-contact p { margin: 0 0 14px; color: #dfe6f3; font-size: 14.5px; line-height: 1.55; } .ci-contact p:last-child { margin: 0; }
.ci-contact a { color: #e8c979; text-decoration: underline; }
#ci_vbox { position: fixed; inset: 0; z-index: 3000; background: rgba(2,6,16,.85); display: none; align-items: center; justify-content: center; padding: 20px; }
#ci_vbox.on { display: flex; }
.ci-vwin { position: relative; width: min(1100px, 100%); }
.ci-vwin video { width: 100%; display: block; border-radius: 10px; border: 1px solid rgba(212,164,64,.45); background: #000; }
.ci-vx { position: absolute; right: -6px; top: -44px; width: 36px; height: 36px; border-radius: 50%; border: 1px solid #e1bb64; background: #0b1a3d; color: #fff; font-size: 22px; line-height: 1; cursor: pointer; }
.ci-vdl { position: absolute; right: 38px; top: -44px; width: 36px; height: 36px; border-radius: 50%; border: 1px solid #e1bb64; background: #0b1a3d; color: #fff; cursor: pointer; padding: 0; display: inline-flex; align-items: center; justify-content: center; }
.ci-vdl:hover { color: #e1bb64; }
html[data-mode="light"] .ci-contact p { color: #0b1a3d; } html[data-mode="light"] .ci-vlang button { color: #0b1a3d; } html[data-mode="light"] .ci-vlang button.on { color: #fff; }
@media (max-width: 560px) { .ci-vbig { width: 100%; } }
.adm-grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0 18px; } @media (max-width: 700px) { .adm-grid2 { grid-template-columns: 1fr; } }
/* footer: NXW Helpdesk (as in CCPR) */
.ccpi-footer .f-desk { text-align: right; margin-left: auto; } .ccpi-footer .f-desk a { display: block; color: #e8c979; font-size: 17px; margin: 2px 0 4px; }
.ccpi-footer .f-desk small { color: #8ea0bf; font-size: 12.5px; }
@media (max-width: 760px) { .ccpi-footer .f-desk { text-align: left; margin-left: 0; } }

/* 2026-10-20: header logo as tall as the two-line bar (sharp 520px file, nxw_logo_hd.png) */
@media (min-width: 992px) {
  html.signed .navbar .brand img { height: 68px !important; width: auto !important; }
}
@media (min-width: 992px) and (max-width: 1500px) { html.signed .navbar .brand img { height: 61.6px !important; } }
@media (min-width: 992px) and (max-width: 1250px) { html.signed .navbar .brand img { height: 48.6px !important; } }
.ccpi-footer .in { grid-template-columns: 1.6fr 1fr 1fr 1.3fr; }
html:not(.admin) .ccpi-footer .in { grid-template-columns: 1fr auto; }
@media (max-width: 800px) { .ccpi-footer .in, html:not(.admin) .ccpi-footer .in { grid-template-columns: 1fr; } }
.xcard.ci-contact p { margin: 0 0 14px !important; } .xcard.ci-contact p:last-child { margin: 0 !important; }
.ccpi-footer .f-desk a { border: 0 !important; padding: 0 !important; } .ccpi-footer .f-desk small { white-space: nowrap; display: block; }
@media (max-width: 760px) { .ccpi-footer .f-desk small { white-space: normal; } }
.ccpi-footer .f-desk small { border: 0 !important; padding: 0 !important; margin: 0 !important; }

/* 2026-10-20: no "Sign in with fingerprint" button under Sign in; the FINGERPRINT tab keeps its own big button */
html:not(.lg-fpm) #ccpi_login #lg_fp { display: none !important; }

/* Toolkits > CCPX (EcoSystem): the CCPx platforms and the other NXW apps (cards of Our web apps) */
.eco-note { color: #AFC0DA; margin: -10px 0 14px; font-size: 14px; }
.eco-grid { grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); }
.eco-card b { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.eco-card.cur { border-color: var(--gold); box-shadow: 0 0 0 1px var(--gold) inset; }
.eco-here { font-style: normal; font-size: 11px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: #0A1633; background: var(--gold); border-radius: 999px; padding: 2px 8px; }
html[data-mode="light"] .eco-note { color: #5B6B85; }
.eco-out { background: #2F6FED; color: #fff; }
.navbar .dropdown-item.rp-out { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.navbar .dropdown-item.rp-out small { font-size: 10px; letter-spacing: .06em; padding: 1px 7px; border-radius: 999px; background: #2F6FED; color: #fff; }
/* release number in the UNDER CONSTRUCTION bar (RELEASE.txt) */
.uc-rel { flex: none; padding: 4px 10px; border: 1px solid rgba(212,164,64,.6); border-radius: 6px; font-size: 12px; letter-spacing: .04em; color: #F0D890; background: rgba(4,9,20,.75); white-space: nowrap; }
.uc-rel b { font-weight: 700; }
html[data-mode="light"] .uc-rel { color: #7A5A12; background: #fff; }
@media (max-width: 640px) { .uc-rel { font-size: 10.5px; padding: 3px 7px; } }

/* SHARE button of the icons menu (same look as the language menu) */
.share-wrap { position: relative; display: inline-flex; }
.share-menu { display: none; position: absolute; top: calc(100% + 8px); right: 0; width: 240px; padding: 6px; z-index: 2000;
  background: #0A1633; border: 1px solid #213760; border-radius: 12px; box-shadow: 0 14px 34px rgba(0,0,0,.4); }
.share-wrap.open .share-menu { display: block; }
.share-menu .sh-head { padding: 8px 10px 8px; border-bottom: 1px solid #213760; margin-bottom: 4px; }
.share-menu .sh-head b { display: block; font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--gold2); }
.share-menu .sh-head small { display: block; font-size: 11.5px; color: #8FA3C4; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 3px; }
.share-menu a { display: flex; gap: 10px; align-items: center; padding: 7px 10px; border-radius: 8px; color: #DCE6F7 !important; text-decoration: none; font-size: 14px; }
.share-menu a:hover { background: rgba(255,255,255,.06); }
.share-menu a i { flex: none; width: 24px; height: 24px; border-radius: 6px; display: inline-flex; align-items: center; justify-content: center;
  font-style: normal; font-weight: 800; font-size: 12px; background: rgba(255,255,255,.08); color: var(--gold2); }
.share-menu a i.sh-in { background: #0A66C2; color: #fff; } .share-menu a i.sh-fb { background: #1877F2; color: #fff; }
.share-menu a i.sh-x { background: #000; color: #fff; } .share-menu a i.sh-zl { background: #0068FF; color: #fff; } .share-menu a i.sh-wa { background: #25D366; color: #fff; }
.share-menu .sh-qr { display: none; width: 180px; height: 180px; margin: 6px auto 4px; border-radius: 8px; background: #fff; }
.share-wrap.qr .sh-qr { display: block; }
.share-menu .sh-c2, .share-menu a.done .sh-c1 { display: none; } .share-menu a.done .sh-c2 { display: inline; color: #4ADE80; }
.share-menu .sh-head small { user-select: all; }
html[data-mode="light"] .share-menu { background: #fff; border-color: #DCE3EE; } html[data-mode="light"] .share-menu a { color: var(--ink) !important; }
html[data-mode="light"] .share-menu .sh-head { border-color: #DCE3EE; }

/* Markets: LIVE button at the right of the chips (opens the Live page, www/css/live.css) */
.mk-quick a.mk-live { --c: #E0262F; --c2: #FF6B72; margin-left: auto; padding: 8px 18px; gap: 10px; font-size: 14px; letter-spacing: .2em;
  background: color-mix(in srgb, var(--c) 18%, rgba(4,9,20,.5)); border-color: color-mix(in srgb, var(--c) 70%, transparent); }
.mk-quick a.mk-live:hover { background: color-mix(in srgb, var(--c) 32%, rgba(4,9,20,.5)); box-shadow: 0 6px 18px color-mix(in srgb, var(--c) 35%, transparent); }
.mk-live .lv-dot { width: 10px; height: 10px; border-radius: 50%; background: #FF4D57; animation: lvpulse 1.6s infinite; }
@keyframes lvpulse { 0% { box-shadow: 0 0 0 0 rgba(255,77,87,.7); } 70% { box-shadow: 0 0 0 8px rgba(255,77,87,0); } 100% { box-shadow: 0 0 0 0 rgba(255,77,87,0); } }
html[data-mode="light"] .mk-quick a.mk-live { color: #B4141C !important; background: color-mix(in srgb, var(--c) 10%, #fff); }
@media (max-width: 700px) { .mk-quick a.mk-live { margin-left: 0; } }

/* 2026-10-27: NXW standard (CCPR model, C:\NXW\SHINY\SHINY_APPS_README.txt section 6b) */
/* hidden pages (Live, Tables, ...) have an empty tab link: never let it take a place in the menu bar */
#nav > li.nav-item:has(> a.nav-link:empty) { display: none !important; }
/* large screens: the gold title line stops before the search icon */
@media (min-width: 1301px) { html.signed .navbar > .container-fluid::before { left: min(var(--tc, 50%), calc(100% - 800px)) !important; } }
/* medium screens: the gold title line centred between the logo and the icons, never under the icons */
@media (min-width: 992px) and (max-width: 1300px) {
  html.signed .navbar > .container-fluid::before { left: min(var(--tc, 50%), calc(100% - 560px)) !important; font-size: 11px !important; letter-spacing: .08em !important;
    padding: 0 !important; background: none !important; }
}
/* phone: UNDER CONSTRUCTION and the release on the first line, the message on the full width of the second (as CCPR) */
@media (max-width: 760px) {
  .uc-bar { flex-wrap: wrap; column-gap: 8px; row-gap: 4px; padding: 7px 10px; }
  .uc-bar .uc-pill { order: 0; } .uc-bar .uc-rel { order: 1; font-size: 9.5px; letter-spacing: 0; padding: 3px 7px; }
  .uc-bar .uc-txt { order: 2; flex: 1 0 100%; text-align: center; font-size: 12px; line-height: 1.35; }
  body { padding-bottom: 84px; }
}

/* Header icons 25% smaller (as VTP, 2026-10-28): 50 px -> 38 px like the CCPR top bar */
@media (min-width: 992px) {
  html.signed .navbar .tools { gap: 9px !important; }
  html.signed .navbar .cbtn, html.signed .navbar .tools-end .cbtn { width: 38px !important; height: 38px !important; min-width: 38px !important; flex: 0 0 38px !important; }
  html.signed .navbar .cbtn svg { width: 17px !important; height: 17px !important; }
  html.signed .navbar .cbtn.langbtn, html.signed .navbar .tools-end .cbtn.langbtn { width: auto !important; flex: 0 0 auto !important; padding: 0 11px !important; font-size: 13px !important; }
  html.signed .navbar .sbox { height: 38px !important; min-width: 38px; }
  html.signed .navbar .cbtn.admbtn { width: auto !important; min-width: 38px !important; flex: 0 0 auto !important; height: 36px !important; }
}

/* ===== NXW HEADER MODEL (2026-10-29): the top bar looks like the approved NXW website header (nxw_site.css, header.nav.vtp), as CCPE.
   Desktop only (761px and up, signed in); the phone layout and the signed-out start page are unchanged. Overrides only: no id or class used by app.R / JS is changed.
   Line 1: logo left (fills both lines) | CLOUD COMPUTING PLATFORM FOR INVESTMENT (CCPI) with gold rules, centred | icon buttons right.
   Line 2: menu centred | MEMBER (green) / ADMIN (red) button right (html.signed / html.admin, set by www/js/ccpi.js).
   Bar 114px + 1px border; icon buttons 38x38 (34 at <=1120px, 32 at <=1023px), radius 8, glyph 17px, gold #e9b54a on hover.
   761-991px (the burger menu before): the menu stays open on line 2, the role button becomes an icon on line 1. ===== */
@media (min-width: 761px) {
  html.signed nav.navbar { --r: 28px; --g: 8px; --b: 38px; --lw: 64px; --aw: 0px; --rl: 120px;
    position: sticky !important; top: 0; z-index: 1030; height: 115px; min-height: 115px !important; box-sizing: border-box; padding: 0 !important; margin: 0;
    background: rgba(5,12,28,.94) !important; border-bottom: 1px solid #16294d !important; box-shadow: none; }
  html.signed nav.navbar > .container-fluid { display: block !important; position: relative; height: 114px !important; min-height: 114px !important; max-width: none; padding: 0 !important; margin: 0; }
  /* line 1: the title centred on the screen, gold rules and diamonds like NEXT WEALTH COMPANY (NXW) */
  html.signed nav.navbar > .container-fluid::before { content: "CLOUD COMPUTING PLATFORM FOR INVESTMENT (CCPI)" !important; display: flex !important; align-items: flex-end;
    position: absolute; top: 5px !important; left: 50% !important; right: auto; transform: translateX(-50%) !important; height: 54px; box-sizing: border-box;
    padding: 0 calc(var(--rl) + 14px + 2.3em) 5px !important; white-space: nowrap; pointer-events: none; z-index: 1;
    font: 700 clamp(12px, 1vw, 17px) Poppins, "Segoe UI", Arial, sans-serif !important; letter-spacing: .145em !important; line-height: 1.2; color: #e1bb64; text-transform: uppercase;
    background:
      linear-gradient(90deg, transparent, #d4a440) left 0 bottom calc(5px + .6em) / var(--rl) 1px no-repeat,
      url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Cpath d='M5 0L10 5 5 10 0 5z' fill='%23d4a440'/%3E%3C/svg%3E") left calc(var(--rl) + 14px + .9em) bottom calc(5px + .35em) / .5em .5em no-repeat,
      url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Cpath d='M5 0L10 5 5 10 0 5z' fill='%23d4a440'/%3E%3C/svg%3E") right calc(var(--rl) + 14px + .9em) bottom calc(5px + .35em) / .5em .5em no-repeat,
      linear-gradient(90deg, #d4a440, transparent) right 0 bottom calc(5px + .6em) / var(--rl) 1px no-repeat !important; }
  /* logo: 78px high, 36px from the left edge, centred on the bar */
  html.signed nav.navbar .navbar-header { position: absolute !important; left: 36px; top: 50%; transform: translateY(-50%) !important; width: auto !important; margin: 0; padding: 0; flex: none !important; z-index: 2; }
  html.signed nav.navbar .navbar-brand { margin: 0 !important; padding: 0 !important; height: auto !important; }
  html.signed nav.navbar .brandwrap { display: flex; align-items: center; gap: 0; }
  html.signed nav.navbar .brand img { height: 78px !important; width: auto !important; max-width: none; }
  html.signed nav.navbar .ccpi-mark, html.signed nav.navbar #plat, html.signed nav.navbar .navbar-toggle, html.signed nav.navbar .navbar-toggler { display: none !important; }
  /* line 2: the menu, centred on the screen */
  html.signed nav.navbar .navbar-collapse { display: block !important; position: static; height: 114px !important; max-height: none !important; overflow: visible !important; padding: 59px 0 0; box-sizing: border-box; flex: none !important; }
  html.signed nav.navbar #nav { display: flex !important; flex-direction: row !important; flex-wrap: nowrap !important; justify-content: center !important; align-items: flex-start !important;
    position: static; width: max-content; max-width: calc(100% - 40px); height: 50px !important; margin: 0 auto !important; padding: 0 !important; gap: 0 26px !important; row-gap: 0 !important; }
  html.signed nav.navbar #nav::before, html.signed nav.navbar #nav > .bslib-nav-spacer { display: none !important; }
  html.signed nav.navbar #nav > li { flex: 0 0 auto !important; transform: none !important; top: auto; margin: 0 !important; }
  html.signed nav.navbar #nav > li > .nav-link { display: inline-flex !important; align-items: center; height: auto !important; min-height: 0 !important; margin: 0 !important;
    font-family: Poppins, "Segoe UI", Arial, sans-serif !important; font-size: 17px !important; font-weight: 800 !important; letter-spacing: .04em !important; line-height: 1.65 !important;
    text-transform: uppercase; color: #e8ebf7 !important; padding: 2px 0 7px !important; border: 0 !important; border-bottom: 2px solid transparent !important; border-radius: 0; box-shadow: none !important; background: none !important; }
  html.signed nav.navbar #nav > li > .nav-link:not(.dropdown-toggle)::after { display: none !important; }
  html.signed nav.navbar #nav > li > .nav-link:hover, html.signed nav.navbar #nav > li.show > .nav-link, html.signed nav.navbar #nav > li > .nav-link.show,
  html.signed nav.navbar #nav > li > .nav-link.active, html.signed nav.navbar #nav > li > .nav-link.nav-ccpi.on, html.signed nav.navbar #nav > li.dropdown:has(.dropdown-item.active) > .nav-link { color: #e9b54a !important; }
  html.signed nav.navbar #nav > li > .nav-link.active, html.signed nav.navbar #nav > li > .nav-link.nav-ccpi.on, html.signed nav.navbar #nav > li.dropdown:has(.dropdown-item.active) > .nav-link { border-bottom-color: #e9b54a !important; }
  html.signed nav.navbar #nav > li > .nav-link:has(.nav-home) { color: #e1bb64 !important; padding: 2px 0 0 !important; border-bottom: 0 !important; margin-top: 2px !important; }
  html.signed nav.navbar .nav-home { display: inline-flex; color: #e1bb64; }
  html.signed nav.navbar .nav-home svg { width: 27px !important; height: 27px !important; }
  html.signed nav.navbar #nav .dropdown-menu { position: absolute !important; top: calc(100% + 8px) !important; left: 0; margin-top: 0 !important; }
  /* icon buttons (line 1, top right) and the role button under them (line 2): the three last items of the menu */
  html.signed nav.navbar #nav > li.form-inline:nth-last-child(-n+3) { display: flex !important; align-items: center; position: absolute !important; top: 13px !important; height: var(--b); margin: 0 !important; padding: 0; z-index: 3; }
  html.signed nav.navbar #nav > li.form-inline:nth-last-child(1) { right: var(--r) !important; }
  html.signed nav.navbar #nav > li.form-inline:nth-last-child(-n+3):has(.open) { z-index: 6; }
  html.signed nav.navbar #nav > li.form-inline:nth-last-child(2) { right: calc(var(--r) + var(--lw) + var(--aw) + var(--g)) !important; }
  html.signed nav.navbar #nav > li.form-inline:nth-last-child(3) { right: calc(var(--r) + var(--lw) + var(--aw) + 2 * var(--g) + var(--b)) !important; }
  html.signed nav.navbar .tools, html.signed nav.navbar .tools-end { display: flex; align-items: center; gap: var(--g) !important; margin: 0 !important; padding: 0 !important; position: relative; }
  html.admin nav.navbar #ubox, html.signed nav.navbar .nav-item:has(#ubox) { display: flex !important; }
  html.signed nav.navbar .ubox { margin: 0 !important; }
  html.signed nav.navbar .cbtn, html.signed nav.navbar .tools-end .cbtn, html.signed nav.navbar .cbtn.ubtn, html.signed nav.navbar .sbox {
    width: var(--b) !important; min-width: var(--b) !important; height: var(--b) !important; flex: 0 0 var(--b) !important; padding: 0 !important; box-sizing: border-box;
    border-radius: 8px !important; border: 1px solid rgba(255,255,255,.32) !important; background: transparent !important; color: #fff; box-shadow: none !important;
    display: inline-flex; align-items: center; justify-content: center; }
  html.signed nav.navbar .sbox.open { width: 240px !important; flex-basis: 240px !important; padding: 0 12px !important; justify-content: flex-start; background: rgba(255,255,255,.08) !important; }
  html.signed nav.navbar .cbtn svg, html.signed nav.navbar .sbox > svg { width: 17px !important; height: 17px !important; flex: 0 0 17px; color: currentColor; }
  html.signed nav.navbar .sbox > svg { color: #fff; }
  html.signed nav.navbar .cbtn:hover, html.signed nav.navbar .cbtn.on, html.signed nav.navbar .sbox:hover, html.signed nav.navbar .sbox.open,
  html.signed nav.navbar .share-wrap.open > .cbtn, html.signed nav.navbar .lang-wrap.open > .cbtn, html.signed nav.navbar .ubox.open > .cbtn { border-color: #e9b54a !important; color: #e9b54a !important; }
  html.signed nav.navbar .sbox:hover > svg, html.signed nav.navbar .sbox.open > svg { color: #e9b54a; }
  html.signed nav.navbar .cbtn.ubtn .u-ini { color: #e1bb64 !important; font: 700 12.5px Poppins, "Segoe UI", Arial, sans-serif !important; letter-spacing: .04em; background: none !important; }
  html.signed nav.navbar .cbtn.ubtn .u-ini.has-img { width: 26px; height: 26px; }
  /* language: same height, globe + EN */
  html.signed nav.navbar .cbtn.langbtn, html.signed nav.navbar .tools-end .cbtn.langbtn { width: var(--lw) !important; min-width: var(--lw) !important; flex: 0 0 var(--lw) !important; padding: 0 !important; gap: 5px;
    font: 700 12.5px Poppins, "Segoe UI", Arial, sans-serif !important; }
  html.signed nav.navbar .cbtn.langbtn svg { width: 16px !important; height: 16px !important; flex-basis: 16px; }
  html.signed nav.navbar #lang_lbl { font: 700 12.5px Poppins, "Segoe UI", Arial, sans-serif; letter-spacing: .05em; color: #e9b54a; }
  /* role button: green MEMBER (signed in), red ADMIN (administrator), as the NXW .admbtn */
  html.signed nav.navbar .am-wrap { position: absolute !important; right: 0 !important; top: calc(100% + 13px) !important; left: auto; }
  html.signed nav.navbar .tools-end .cbtn.admbtn, html.signed nav.navbar .cbtn.admbtn { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 9px;
    width: auto !important; min-width: 0 !important; height: 40px !important; flex: 0 0 auto !important; padding: 0 18px !important; box-sizing: border-box; border-radius: 9px !important;
    border: 1px solid #3fbf8a !important; background: linear-gradient(180deg, #1f9d6b, #137a52) !important; box-shadow: 0 4px 14px rgba(19,122,82,.38) !important; color: #fff !important;
    font: 800 15px Poppins, "Segoe UI", Arial, sans-serif; letter-spacing: .16em; text-transform: uppercase; white-space: nowrap; }
  html.signed nav.navbar .cbtn.admbtn:hover, html.signed nav.navbar .am-wrap.open .cbtn.admbtn { background: linear-gradient(180deg, #27b07a, #178a5d) !important; }
  html.admin nav.navbar .tools-end .cbtn.admbtn, html.admin nav.navbar .cbtn.admbtn { border-color: #f0574f !important; background: linear-gradient(180deg, #e53935, #c62828) !important; box-shadow: 0 4px 14px rgba(211,47,47,.35) !important; }
  html.admin nav.navbar .cbtn.admbtn:hover, html.admin nav.navbar .am-wrap.open .cbtn.admbtn { background: linear-gradient(180deg, #ef5350, #d32f2f) !important; }
  html.signed nav.navbar .cbtn.admbtn::after { display: none !important; }
  html.signed nav.navbar .cbtn.admbtn > svg { display: block !important; width: 20px !important; height: 20px !important; flex: 0 0 20px; }
  html.signed nav.navbar .adm-lab { display: inline !important; font: inherit !important; letter-spacing: inherit !important; color: #fff; }
  html.signed:not(.admin) nav.navbar .adm-lab { font-size: 0 !important; letter-spacing: 0 !important; }
  html.signed:not(.admin) nav.navbar .adm-lab::before { content: "MEMBER"; font-size: 15px; letter-spacing: .16em; }
  html.signed nav.navbar .am-wrap .am-menu { top: calc(100% + 10px); right: 0; }
  /* light mode */
  html[data-mode="light"].signed nav.navbar { background: rgba(255,255,255,.96) !important; border-bottom-color: #e3e8f2 !important; }
  html[data-mode="light"].signed nav.navbar > .container-fluid::before { color: #b8862a; }
  html[data-mode="light"].signed nav.navbar #nav > li > .nav-link { color: var(--navy) !important; }
  html[data-mode="light"].signed nav.navbar #nav > li > .nav-link:hover, html[data-mode="light"].signed nav.navbar #nav > li > .nav-link.active { color: #b8862a !important; }
  html[data-mode="light"].signed nav.navbar .cbtn:not(.admbtn), html[data-mode="light"].signed nav.navbar .sbox { border-color: #C9D3E3 !important; color: var(--navy); }
  html[data-mode="light"].signed nav.navbar .sbox > svg { color: var(--navy); }
}
@media (min-width: 761px) and (max-width: 1560px) {
  html.signed nav.navbar { --rl: 90px; }
  html.signed nav.navbar #nav { gap: 0 22px !important; }
  html.signed nav.navbar #nav > li > .nav-link { font-size: 16px !important; }
}
@media (min-width: 761px) and (max-width: 1440px) {
  html.signed nav.navbar { --rl: 50px; }
  html.signed nav.navbar #nav { gap: 0 16px !important; }
  html.signed nav.navbar #nav > li > .nav-link { font-size: 14.5px !important; letter-spacing: .03em !important; }
  html.signed nav.navbar .brand img { height: 68px !important; }
}
@media (min-width: 761px) and (max-width: 1300px) {
  html.signed nav.navbar { --r: 16px; --rl: 0px; }
  html.signed nav.navbar .navbar-header { left: 24px; }
  html.signed nav.navbar #nav { gap: 0 13px !important; }
  html.signed nav.navbar #nav > li > .nav-link { font-size: 13px !important; letter-spacing: .02em !important; }
  html.signed nav.navbar .nav-home svg { width: 23px !important; height: 23px !important; }
  html.signed nav.navbar .am-wrap { top: calc(100% + 15px) !important; }
  html.signed nav.navbar .tools-end .cbtn.admbtn, html.signed nav.navbar .cbtn.admbtn { height: 36px !important; padding: 0 14px !important; font-size: 13.5px; }
  html.signed:not(.admin) nav.navbar .adm-lab::before { font-size: 13.5px; }
}
@media (min-width: 761px) and (max-width: 1120px) {
  html.signed nav.navbar { --r: 12px; --g: 6px; --b: 34px; --lw: 58px; }
  html.signed nav.navbar .navbar-header { left: 20px; }
  html.signed nav.navbar .brand img { height: 58px !important; }
  html.signed nav.navbar #nav { gap: 0 9px !important; }
  html.signed nav.navbar #nav > li > .nav-link { font-size: 11.5px !important; letter-spacing: 0 !important; }
  html.signed nav.navbar .nav-home svg { width: 20px !important; height: 20px !important; }
  html.signed nav.navbar #nav > li.form-inline:nth-last-child(-n+3) { top: 15px !important; }
  html.signed nav.navbar .am-wrap { top: calc(100% + 17px) !important; }
  html.signed nav.navbar .tools-end .cbtn.admbtn, html.signed nav.navbar .cbtn.admbtn { padding: 0 10px !important; font-size: 12.5px; }
  html.signed:not(.admin) nav.navbar .adm-lab::before { font-size: 12.5px; }
}
/* narrow windows (761-1023px, e.g. the RStudio viewer): the role button becomes an icon on line 1 and the title may take two lines, as in NXW */
@media (min-width: 761px) and (max-width: 1023px) {
  html.signed nav.navbar { --g: 5px; --b: 32px; --lw: 44px; --aw: 37px; }
  html.signed nav.navbar .navbar-header { left: 18px; }
  html.signed nav.navbar .brand img { height: 51px !important; }
  html.signed nav.navbar > .container-fluid::before { content: "\25C6\00a0\00a0 CLOUD COMPUTING PLATFORM FOR INVESTMENT (CCPI)\00a0\00a0\25C6" !important;
    left: 160px !important; right: calc(var(--r) + var(--lw) + var(--aw) + 3 * var(--g) + 5 * var(--b) + 3 * var(--g) + 16px); transform: none !important;
    justify-content: center; text-align: center; white-space: normal; padding: 0 0 5px !important; font-size: 10px !important; letter-spacing: .08em !important; line-height: 1.3; background: none !important; }
  html.signed nav.navbar #nav > li.form-inline:nth-last-child(-n+3) { top: 16px !important; }
  html.signed nav.navbar .am-wrap { position: static !important; top: auto !important; }
  html.signed nav.navbar .tools-end .cbtn.admbtn, html.signed nav.navbar .cbtn.admbtn { width: var(--b) !important; min-width: var(--b) !important; height: var(--b) !important; flex: 0 0 var(--b) !important; padding: 0 !important; border-radius: 8px !important; }
  html.signed nav.navbar .cbtn.admbtn > svg { width: 17px !important; height: 17px !important; flex-basis: 17px; }
  html.signed nav.navbar .adm-lab { display: none !important; }
  html.signed nav.navbar .cbtn.langbtn svg { display: none !important; }
}
/* 761-900px: the menu is centred in the space right of the logo, a little smaller */
@media (min-width: 761px) and (max-width: 900px) {
  html.signed nav.navbar .navbar-collapse { padding-left: 110px; }
  html.signed nav.navbar #nav { gap: 0 7px !important; max-width: calc(100% - 20px); }
  html.signed nav.navbar #nav > li > .nav-link { font-size: 10.5px !important; }
}
/* ===== NXW HEADER TABLET (2026-10-29): on touch tablets the menu text is 1px larger, as on the NXW website (user: "In tablet, height menu is ok. Menu text size +1PX").
   Touch screens only ((pointer: coarse), 761-1600px wide, signed in, e.g. an Android tablet in landscape, 1280x800): the menu (line 2) is 1px larger
   than the desktop rules give at the same width; everything else (height, logo, title, icons, MEMBER / ADMIN button) is unchanged.
   Desktop computers with a mouse, phones (760px and less) and the signed-out start page are unchanged. ===== */
@media (min-width: 1561px) and (max-width: 1600px) and (pointer: coarse) { html.signed nav.navbar #nav > li > .nav-link { font-size: 18px !important; } }
@media (min-width: 761px) and (max-width: 1560px) and (pointer: coarse) { html.signed nav.navbar #nav > li > .nav-link { font-size: 17px !important; } }
@media (min-width: 761px) and (max-width: 1440px) and (pointer: coarse) { html.signed nav.navbar #nav > li > .nav-link { font-size: 15.5px !important; } }
@media (min-width: 761px) and (max-width: 1300px) and (pointer: coarse) { html.signed nav.navbar #nav > li > .nav-link { font-size: 14px !important; } }
@media (min-width: 761px) and (max-width: 1120px) and (pointer: coarse) { html.signed nav.navbar #nav > li > .nav-link { font-size: 12.5px !important; } }
@media (min-width: 761px) and (max-width: 900px) and (pointer: coarse) { html.signed nav.navbar #nav > li > .nav-link { font-size: 11.5px !important; } }

/* start page like the CCPR / CCPE start page (2026-10-30): on a screen held across (PC, tablet in landscape) the start page is the
   CCPE stage, design size 1520 x 696 scaled to fit the screen (--k, set by js/ccpi.js): background with the big NXW logo
   (img/starter_bg.jpg, the CCPE bg.jpg), gold name line at the top, headline, text and the button box at the CCPE places and sizes.
   Phones and tablets held upright (html.st-portrait) keep the stacked start page. Same as NXWWEB and CCPS. Why: user "APPS NOT OK = ... CCPI (REMOVE FOOTER)", "PLEASE APPLY OK TO NOT OK". */
html:not(.signed):not(.st-portrait), html:not(.signed):not(.st-portrait) body { overflow: hidden; background: #060f22; }
html:not(.signed):not(.st-portrait) .home-band { position: fixed; inset: 0; min-height: 0; padding: 0; display: block; background: radial-gradient(ellipse at 50% 55%, #0c224b 0%, #08142d 55%, #050a17 100%); }
html:not(.signed):not(.st-portrait) .home-band::before { content: ""; position: absolute; left: calc(50vw - 760px * var(--k, .84)); top: calc(50vh - 348px * var(--k, .84));
  width: calc(1520px * var(--k, .84)); height: calc(696px * var(--k, .84)); background: url("../img/starter_bg.jpg") center/100% 100% no-repeat;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 4%, #000 98.5%, transparent 100%), linear-gradient(to right, transparent 0, #000 3%, #000 97%, transparent 100%);
  -webkit-mask-composite: source-in; mask-image: linear-gradient(to bottom, transparent 0, #000 4%, #000 98.5%, transparent 100%), linear-gradient(to right, transparent 0, #000 3%, #000 97%, transparent 100%);
  mask-composite: intersect; pointer-events: none; }
html:not(.signed):not(.st-portrait) .home-band > .hero { position: static; max-width: none; padding: 0; }
:where(html:not(.signed):not(.st-portrait) .home-band > .hero) > * { position: absolute; left: 0; right: 0; margin: 0 !important; }
html:not(.signed):not(.st-portrait) .home-band img.logo { display: none !important; }   /* the logo is in the background, as on CCPE */
html:not(.signed):not(.st-portrait) .ccpi-name { top: calc(50vh + (84.8px - 348px) * var(--k, .84)); display: flex; justify-content: center; align-items: center; gap: 0; }
html:not(.signed):not(.st-portrait) .ccpi-name span { font-size: calc(20.5px * var(--k, .84)); font-weight: 700; letter-spacing: .145em; line-height: 1; color: #e1bb64;
  padding: 0; margin: 0 calc(26px * var(--k, .84) - .145em) 0 calc(26px * var(--k, .84)); }
html:not(.signed):not(.st-portrait) .ccpi-name i { width: calc(110px * var(--k, .84)); height: calc(1.6px * var(--k, .84)); flex: none; }
html:not(.signed):not(.st-portrait) .ccpi-name i::after { width: calc(7px * var(--k, .84)); height: calc(7px * var(--k, .84)); top: 50%; margin-top: calc(-3.5px * var(--k, .84)); }
html:not(.signed):not(.st-portrait) .home-band h1 { top: calc(50vh + (437.4px - 348px) * var(--k, .84)); width: auto; max-width: none; white-space: nowrap;
  font-size: calc(44.7px * var(--k, .84)); font-weight: 700; letter-spacing: -.02em; line-height: 1.2; color: #fff; }
html:not(.signed):not(.st-portrait) .home-band h1 b { color: #d4a440; font-weight: 700; }
html:not(.signed):not(.st-portrait) .home-band h1 + p { top: calc(50vh + (503.6px - 348px) * var(--k, .84)); left: calc(50vw - 550px * var(--k, .84)); right: auto; transform: none;
  width: calc(1100px * var(--k, .84)); max-width: none; font-size: calc(17px * var(--k, .84)); line-height: calc(24.8px * var(--k, .84)); font-weight: 300; color: #d5deec; }
/* the button box: the CCPE pill (SIGN UP | SIGN IN), SIGN IN gold on the right as on CCPE */
html:not(.signed):not(.st-portrait) .home-auth { top: calc(50vh + (582.5px - 348px) * var(--k, .84)); left: calc(50vw - 158px * var(--k, .84) - 1px); right: auto; transform: none; width: max-content;
  display: flex; align-items: center; gap: calc(6px * var(--k, .84)); padding: calc(4px * var(--k, .84)); border: 1px solid rgba(212,164,64,.35);
  border-radius: calc(12px * var(--k, .84)); background: rgba(5,12,28,.65); backdrop-filter: none; }
html:not(.signed):not(.st-portrait) .home-auth .ha-sep { display: none; }
html:not(.signed):not(.st-portrait) html:not(.signed):not(.st-portrait) .home-auth .ha-up { order: 2; } html:not(.signed):not(.st-portrait) .home-auth .ha-in { order: 3; }
html:not(.signed):not(.st-portrait) .ha-btn { display: inline-flex; align-items: center; justify-content: center; box-sizing: border-box; min-width: 0;
  width: calc(150px * var(--k, .84)); height: calc(38px * var(--k, .84)); padding: 0 !important; border-radius: calc(8px * var(--k, .84)); border: 0;
  font-size: calc(13px * var(--k, .84)); font-weight: 800; letter-spacing: .2em; line-height: 1; }
html:not(.signed):not(.st-portrait) .ha-up { background: transparent; color: #fff !important; }
html:not(.signed):not(.st-portrait) .ha-up:hover { color: #e8c979 !important; }
html:not(.signed):not(.st-portrait) .ha-in { background: linear-gradient(180deg, #e8c979, #d4a440); color: #0a1a3c !important; }
html:not(.signed):not(.st-portrait) .hero > p.home-auth-p { top: calc(50vh + (640px - 348px) * var(--k, .84)); left: 0; right: 0; width: auto; max-width: none; text-align: center; font-size: calc(13.5px * var(--k, .84)); white-space: nowrap; color: #9DB0CC; }

/* start page like the CCPR / CCPE start page, step 2 (2026-10-30): phones and tablets held upright (html.st-portrait) get the
   stacked CCPE start page: name line without the gold rules, the NXW logo (img/starter_logo.png, the CCPE nxw-logo.png), headline,
   text and the CCPE button pill under it. Same as NXWWEB and CCPS. */
.st-logo-m { display: none; }
html:not(.signed).st-portrait .home-band { min-height: 100vh; min-height: 100svh; padding: 40px 18px; box-sizing: border-box; background: #08142d; display: block; }
html:not(.signed).st-portrait .home-band > .hero { padding: 0; }
html:not(.signed).st-portrait .ccpi-name { margin: 0; gap: 0; justify-content: center; }
html:not(.signed).st-portrait .ccpi-name i { display: none; }
html:not(.signed).st-portrait .ccpi-name span { font-size: 12px; font-weight: 700; letter-spacing: .25em; padding-left: .25em; line-height: 1.4; color: #e1bb64; }
html:not(.signed).st-portrait .home-band img.logo { display: none !important; }
html:not(.signed).st-portrait .st-logo-m { display: block; width: 86%; max-width: 420px; margin: 28px auto 0; }
html:not(.signed).st-portrait .home-band h1 { font-size: 30px; font-weight: 700; letter-spacing: -.02em; line-height: 1.2; white-space: normal; width: auto; margin: 36px auto 0; color: #fff; }
html:not(.signed).st-portrait .home-band h1 b { color: #d4a440; font-weight: 700; }
html:not(.signed).st-portrait .home-band h1 + p { font-size: 15px; line-height: 1.5; font-weight: 300; margin: 12px auto 0; color: #d5deec; }
html:not(.signed).st-portrait .home-auth { display: flex; width: max-content; max-width: 100%; box-sizing: border-box; margin: 19.5px auto 0; gap: 6px; padding: 4px;
  border: 1px solid rgba(212,164,64,.35); border-radius: 12px; background: rgba(5,12,28,.65); backdrop-filter: none; }
html:not(.signed).st-portrait .home-auth .ha-sep { display: none; }
html:not(.signed).st-portrait html:not(.signed).st-portrait .home-auth .ha-up { order: 2; } html:not(.signed).st-portrait .home-auth .ha-in { order: 3; }
html:not(.signed).st-portrait .ha-btn { display: inline-flex; align-items: center; justify-content: center; box-sizing: border-box; flex: 0 1 150px; min-width: 0; width: 150px;
  height: 38px; padding: 0 6px !important; border-radius: 8px; border: 0; font-size: 13px; font-weight: 800; letter-spacing: .2em; line-height: 1; white-space: nowrap; }
html:not(.signed).st-portrait .ha-up { background: transparent; color: #fff !important; }
html:not(.signed).st-portrait .ha-in { background: linear-gradient(180deg, #e8c979, #d4a440); color: #0a1a3c !important; }
html:not(.signed).st-portrait .hero > p.home-auth-p { font-size: 13px; margin: 14px auto 0; white-space: normal; color: #9DB0CC; }
@media (max-width: 520px) { html:not(.signed).st-portrait .ha-btn { font-size: 12px; letter-spacing: .12em; } }
@media (max-width: 699px) { html:not(.signed).st-portrait .home-band { padding-top: 72px; } }   /* phones: the name line under the Share and Language buttons */
@media (min-width: 700px) {
  html:not(.signed).st-portrait .home-band { display: flex; flex-direction: column; justify-content: center; align-items: center; padding: 60px 48px 110px; }
  html:not(.signed).st-portrait .ccpi-name span { font-size: 17px; }
  html:not(.signed).st-portrait .st-logo-m { width: 70%; max-width: 540px; margin-top: 40px; }
  html:not(.signed).st-portrait .home-band h1 { font-size: 46px; margin-top: 44px; }
  html:not(.signed).st-portrait .home-band h1 + p { font-size: 19px; max-width: 660px; margin-top: 16px; }
  html:not(.signed).st-portrait .home-auth { margin-top: 36px; }
}

html:not(.signed):not(.st-portrait) .hero > .home-auth, html:not(.signed):not(.st-portrait) .hero > p:has(+ .home-auth) { margin: 0 !important; }   /* the older CCPI margins (25px / 16px) would push the box down */
html:not(.signed).st-portrait .hero > .home-auth { margin-top: 19.5px !important; }
@media (min-width: 700px) { html:not(.signed).st-portrait .hero > .home-auth { margin-top: 36px !important; } }
/* CCPI start page (signed out): no footer (2026-10-30). Why: user "CCPI (REMOVE FOOTER)". */
html:not(.signed) .ccpi-footer { display: none !important; }
html:not(.signed) .home-band { margin: 0 !important; }

/* CCPI start page (signed out): the SHARE button next to the language button at the top right, as on NXW and CCPE (2026-10-30).
   Both get fixed sizes there so they line up: Share 46 x 46, Language 76 x 46, 10 px apart. Why: user "CCPI MISS SHARE ICO". */
html:not(.signed) nav.navbar #share_wrap { visibility: visible; position: fixed; top: 18px; right: 108px; z-index: 1050; }
html:not(.signed) nav.navbar #share_wrap > .cbtn { width: 46px !important; height: 46px !important; flex: 0 0 46px !important; }
html:not(.signed) nav.navbar #lang_wrap > .cbtn.langbtn { width: 76px !important; min-width: 76px !important; height: 46px !important; padding: 0 !important; justify-content: center; }
html:not(.signed) nav.navbar #share_wrap .share-menu { right: 0; left: auto; }
@media (max-width: 699px) {
  html:not(.signed) nav.navbar #share_wrap { top: 14px; right: 98px; }
  html:not(.signed) nav.navbar #share_wrap > .cbtn { width: 40px !important; height: 40px !important; flex-basis: 40px !important; }
  html:not(.signed) nav.navbar #lang_wrap { top: 14px; right: 16px; }
  html:not(.signed) nav.navbar #lang_wrap > .cbtn.langbtn { width: 72px !important; min-width: 72px !important; height: 40px !important; }
}

/* ===== NXW GUEST POLICY (2026-10-31, CCPR is the reference; C:\NXW\SHINY\NXW_GUEST_POLICY.txt) =====
   Only with LOGIN 2 for CCPI in SHINY_APPS_CONFIG.xlsx (html.guest-on). Start page: GUEST | SIGN UP | SIGN IN, GUEST blue as on CCPR.
   Signed in as guest (html.signed.guest): blue GUEST role button, its menu has Log out only; Home, About, CCPI and Contact open;
   the other menus visible but greyed out and not clickable (www/js/ccpi.js); no My account button; the language button works. */
.ha-guest { background: linear-gradient(180deg, #2f7be5, #1a56c4); color: #fff !important; border: 1px solid #5b9bf0 !important; }
.ha-guest:hover { background: linear-gradient(180deg, #4a8eeb, #2463d0); }
html:not(.signed):not(.st-portrait).guest-on .home-auth { left: calc(50vw - 235px * var(--k, .84) - 1px); }
html.guest-on:not(.signed) .home-auth .ha-up { order: 2; } html.guest-on:not(.signed) .home-auth .ha-in { order: 3; }
html:not(.signed):not(.st-portrait) .home-auth .ha-guest, html:not(.signed).st-portrait .home-auth .ha-guest { order: 1; background: linear-gradient(180deg, #2f7be5, #1a56c4); color: #fff !important; }
html:not(.signed).st-portrait.guest-on .home-auth { width: min(470px, 100%); }
html:not(.signed).st-portrait.guest-on .ha-btn { flex: 1 1 0; width: auto; min-width: 0; }
@media (max-width: 520px) { html:not(.signed).st-portrait.guest-on .ha-btn { font-size: 11.5px; letter-spacing: .08em; padding: 0 4px !important; } }
/* role button: blue GUEST */
html.guest nav.navbar .tools-end .cbtn.admbtn, html.guest nav.navbar .cbtn.admbtn { border-color: #5b9bf0 !important; background: linear-gradient(180deg, #2f7be5, #1a56c4) !important; box-shadow: 0 4px 14px rgba(26,86,196,.38) !important; }
html.guest nav.navbar .cbtn.admbtn:hover, html.guest nav.navbar .am-wrap.open .cbtn.admbtn { background: linear-gradient(180deg, #4a8eeb, #2463d0) !important; }
html.guest nav.navbar .adm-lab::before { content: "GUEST" !important; }
html.guest .adm-lab { font-size: 0 !important; }
/* the GUEST menu: one item, Log out */
html.guest #am_menu { width: 240px !important; padding: 6px 0 !important; background: #0a1a3c; border: 1px solid #2c4a83; border-top: 3px solid #2f7be5; border-radius: 12px; box-shadow: 0 12px 32px rgba(0,0,0,.45); }
html.guest #am_menu .am-head, html.guest #am_menu .am-sec:not(:has(#am_logout)), html.guest #am_menu .am-sec:has(#am_logout) > :not(#am_logout) { display: none !important; }
html.guest #am_menu .am-sec { border: 0 !important; background: none !important; padding: 0 !important; margin: 0 !important; }
html.guest #am_menu::before { content: "Guest \2014  visiting without an account"; display: block; padding: 8px 18px 9px; border-bottom: 1px solid #1d3463; font: 600 12px/1.3 Montserrat, "Segoe UI", sans-serif; color: #9cbcf5; }
html.guest #am_menu #am_logout { display: block !important; padding: 11px 18px !important; font-size: 14px; text-align: left; }
/* no My account button for a guest; the icons close up to the right */
html.guest #ubox, html.guest nav.navbar .nav-item:has(#ubox) { display: none !important; }
@media (min-width: 761px) {
  html.guest nav.navbar #nav > li.form-inline:nth-last-child(3) { right: calc(var(--r) + var(--lw) + var(--aw) + var(--g)) !important; }
}
/* closed menus: visible, greyed out, not clickable */
html.guest #nav > li.gx-off > .nav-link { opacity: .38 !important; color: #8a94a8 !important; cursor: not-allowed !important; filter: grayscale(1); border-bottom-color: transparent !important; }
html.guest #nav > li.gx-off > .dropdown-menu { display: none !important; }
html.guest #nav > li.gx-off { cursor: not-allowed; }
html.guest .home-user p { display: none; }

/* ===== NXW NEW USER POLICY (2026-10-31): Forgot password in the sign-in box; Users list: checkboxes, Select all, action bar ===== */
.lg-forgot { display: inline-block; margin-top: 12px; font-size: 13px; color: #9cbcf5 !important; text-decoration: underline; cursor: pointer; }
.lg-fg { display: none; }
#lg_in.fg .rg-main > :not(.lg-fg) { display: none !important; }
#lg_in.fg .lg-fg { display: block; }
.lg-fg label { display: block; margin-top: 10px; }
.lg-fg .fg-step2 { display: none; margin-top: 6px; }
#lg_in.fg2 .lg-fg .fg-step2 { display: block; }
#lg_in.fg2 #fg_send { background: transparent; border: 1px solid #2c4a83; color: #9cbcf5; }
.adm-bulk { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 6px 0 12px; padding: 10px 12px; border: 1px solid #1d3463; border-radius: 10px; background: rgba(10,26,60,.5); }
.adm-bulk .adm-all { display: inline-flex; align-items: center; gap: 6px; margin: 0; font-weight: 600; font-size: 13px; cursor: pointer; }
.adm-bulk .adm-sel-n { font-size: 12.5px; color: var(--muted); min-width: 80px; }
.adm-bulk .adm-bulk-act { height: 32px; padding: 0 10px; border-radius: 8px; border: 1px solid #2c4a83; background: #0a1a3c; color: #e8ebf7; font-size: 13px; }
html[data-mode="light"] .adm-bulk { background: #f4f7fc; border-color: #C9D3E3; } html[data-mode="light"] .adm-bulk .adm-bulk-act { background: #fff; color: var(--navy); border-color: #C9D3E3; }
#adm_users input.adm-sel { width: 16px; height: 16px; cursor: pointer; }
.adm-bulk-msg { margin: 8px 0 0; padding: 9px 12px; border-radius: 8px; background: rgba(52,211,153,.12); color: #34D399; font-size: 13.5px; }
.adm-bulk-msg.bad { background: rgba(248,113,113,.12); color: #F87171; }
.adm-bulk-msg pre { margin: 6px 0 0; color: inherit; background: none; border: 0; padding: 0; font-size: 12.5px; white-space: pre-wrap; }
.st-suspended { background: rgba(251,146,60,.14); color: #FB923C; } .st-unverified { background: rgba(156,188,245,.14); color: #9cbcf5; }

/* ===== MARGIN RULE 2 (2026-10-31, C:\NXW\SHINY\NXW_MARGIN_RULES.txt, model CCPR): the left and right margins of the page body are halved
   at every screen width. A column of max-width W with side padding P becomes max-width 50% + W/2 with padding P/2 (50vw inside the padded
   page area, whose own padding is halved too). The top bar, the menu, the logo, the role button and the icons are NOT touched. ===== */
html.no-side:not(.on-home) .bslib-sidebar-layout > .main { padding-left: clamp(8px, 2vw, 28px) !important; padding-right: clamp(8px, 2vw, 28px) !important; }
.xp .xp-page { max-width: calc(50vw + 590px); padding-left: 14px; padding-right: 14px; }
.xp .stepbar { max-width: 100%; }
.xp .sitefoot { max-width: calc(50vw + 590px); padding-left: 14px; padding-right: 14px; }
.adm-wrap { max-width: calc(50vw + 590px); padding-left: 14px !important; padding-right: 14px !important; }
.ct-hero, .ct-wrap, .ab-wrap { max-width: calc(50% + 600px); padding-left: 12px; padding-right: 12px; }
.stats, .ccpi-footer .in, .ccpi-footer small { max-width: calc(50% + 600px); padding-left: 11px; padding-right: 11px; }

/* ===== CCPI INDICES (2026-10-31): page CCPI Indices (ccpi_indices_page.R) and the CCPI INDICES button of the Markets page ===== */
.mk-quick a.mk-live.mk-cidx { --c: #D4A440; --c2: #F2CF7A; margin-left: 10px; }
html[data-mode="light"] .mk-quick a.mk-live.mk-cidx { color: #8A6212 !important; }
.ci-top .mk-act .shiny-input-container { margin: 0; }
.ci-top .mk-act .radio-inline, .ci-top .mk-act .form-check-inline { font-weight: 600; }
.ci-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; margin-top: 12px; }
.ci-card { text-align: left; background: rgba(255,255,255,.02); border: 1px solid #1A2A4C; border-radius: 12px; padding: 12px 14px; color: inherit; cursor: pointer; transition: border-color .15s, transform .15s; }
.ci-card:hover { border-color: #D4A440; transform: translateY(-1px); }
.ci-card.on { border-color: #D4A440; box-shadow: 0 0 0 1px #D4A440 inset; }
.ci-code { font-size: 11px; letter-spacing: .08em; color: #D4A440; font-weight: 700; }
.ci-name { font-weight: 600; font-size: 14px; line-height: 1.3; min-height: 36px; margin: 2px 0 6px; }
.ci-lvl { font-size: 22px; font-weight: 700; font-variant-numeric: tabular-nums; }
.ci-chg { font-size: 13px; margin-left: 8px; font-weight: 600; }
.ci-mini { display: flex; gap: 12px; font-size: 12px; opacity: .85; margin: 2px 0 4px; }
.ci-mini b, .ci-chg { font-variant-numeric: tabular-nums; }
.ci-card .up, .ci-mini .up, .ci-chg.up { color: #16A34A; } .ci-card .dn, .ci-mini .dn, .ci-chg.dn { color: #DC2626; }
.ci-card .sr-spark { width: 100%; height: 40px; display: block; }
.ci-err { color: #FF7A59; }
.ci-codetag { margin-left: 10px; font-size: 12px; color: #D4A440; letter-spacing: .06em; }
.ci-dl { display: flex; justify-content: flex-end; margin-top: 8px; }
.ci-spec h2 { font-size: 18px; margin: 0 0 6px; }
.ci-spec h3 { font-size: 14px; color: #D4A440; margin: 16px 0 6px; text-transform: uppercase; letter-spacing: .05em; }
.ci-spec-lead { opacity: .9; }
.ci-spec-t { width: 100%; border-collapse: collapse; font-size: 13px; margin: 8px 0; }
.ci-spec-t th { text-align: left; width: 34%; padding: 6px 8px; border-bottom: 1px solid #1A2A4C; color: #9DB0CC; font-weight: 600; vertical-align: top; }
.ci-spec-t td { padding: 6px 8px; border-bottom: 1px solid #1A2A4C; }
.ci-spec ul { padding-left: 18px; margin: 4px 0; } .ci-spec li, .ci-spec p { font-size: 13px; }
html[data-mode="light"] .ci-card { background: #fff; border-color: #DCE3EE; }
html[data-mode="light"] .ci-card.on, html[data-mode="light"] .ci-card:hover { border-color: #B07F1F; }
html[data-mode="light"] .ci-code, html[data-mode="light"] .ci-codetag, html[data-mode="light"] .ci-spec h3 { color: #B07F1F; }
html[data-mode="light"] .ci-spec-t th, html[data-mode="light"] .ci-spec-t td { border-color: #DCE3EE; }
html[data-mode="light"] .ci-spec-t th { color: #5B6B84; }
@media (max-width: 700px) { .ci-cards { grid-template-columns: 1fr 1fr; gap: 8px; } .ci-lvl { font-size: 18px; } .ci-name { min-height: 0; } }