:root{
/* ===== Legacy theme vars (DB-driven) ===== */
--color1: #06162e;
--color2: #072d55;
--color3: #6c757d;
--color4: #ffffff;
--color5: #0e0f28;

/* ===== Requested EasyIDP palette ===== */
--easyidp-navy: #0b1648;
--easyidp-blue: #2c5f8e;
--easyidp-cyan: #61c7d3;
--easyidp-teal: #22b39d;
--easyidp-lime: #9af557;
--easyidp-white: #f6fbff;
--easyidp-danger: #ff9f9f;

/* ===== New glass theme vars (mapped from DB) ===== */
--brand: var(--easyidp-teal);
--brand-2: var(--easyidp-lime);
--bg0: var(--easyidp-blue);
--ink: var(--easyidp-white);
--muted: rgba(246, 251, 255, .72);
--glass: rgba(7,19,61,.14);
--glass-b: rgba(255,255,255,.16);
--glass-opaque: rgba(246,251,255,.96);
--glass-b-opaque: rgba(246,251,255,.78);
--glass-b-bullet-card: rgba(154, 245, 87, 0.78);
--glass-b-bullet-card-neg: rgba(255, 159, 159, 0.78);
--ring: rgba(97,199,211,.28);
--shadow: 0 24px 80px rgba(4,10,31,.38);
--shadower: 0 20px 60px -20px rgba(0,0,0,1);
--control-h: 48px;
}
/* Normalize native selects across browsers */
:root{ color-scheme: dark; } /* enables dark popups/scrollbars on supported UAs */

select, .form-select{
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
}

/* Force the dropdown list to dark as well (Edge/Chromium/Firefox) */
select option,
.form-select option{
background-color: #0a0f1b; /* or var(--bg0) if you prefer */
color: #fff;
}
select optgroup,
.form-select optgroup{
background-color: #0a0f1b;
color: #b7c4d6; /* slightly muted group label */
}

/* Windows High-Contrast / Forced Colors fallback */
@media (forced-colors: active){
select, .form-select{
forced-color-adjust: none;
background: Canvas;
color: CanvasText;
border-color: CanvasText;
}
select option{ background: Canvas; color: CanvasText; }
}

/* ===== Base / Background ===== */

body{
margin:0;
background:
radial-gradient(circle at 50% 30%, rgba(255,255,255,.05), transparent 32%),
url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 1024' preserveAspectRatio='none'%3E%3Crect width='1440' height='1024' fill='%232c5f8e'/%3E%3Cpath d='M0 232C203 201 423 151 638 99C933 28 1190 -13 1440 0V682C1166 786 883 826 627 782C365 738 161 652 0 564V232Z' fill='%230b1648'/%3E%3Cpath d='M0 652C213 720 417 770 642 812C931 865 1178 929 1440 918V1024H0V652Z' fill='%2322b39d'/%3E%3Cpath d='M0 822C256 855 518 901 776 952C1006 998 1221 1024 1440 1015V1024H0V822Z' fill='%239af557'/%3E%3C/svg%3E");
background-color: var(--bg0);
background-position: center;
background-repeat: no-repeat;
background-size: cover;
background-attachment: fixed;
color: var(--ink);
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
min-height:100vh;
min-width:100vw;
font-family: "Trebuchet MS", "Segoe UI", sans-serif;
/* clip, not hidden. Both stop sideways scrolling, but overflow-x:hidden forces the
   other axis to auto, which turns body into a scroll container — and then every
   position:sticky descendant sticks to body instead of the viewport and quietly
   scrolls away instead (the legal tab bar was the first place it showed). clip
   does the same clipping without creating that scroll container. */
overflow-x:clip;
}

/* The artwork above is composed on a 1440x1024 canvas with
   preserveAspectRatio='none', so it never crops — it stretches to whatever box it
   gets. At the ratio it was drawn for that reads as intended; on a phone in
   portrait (roughly 0.46:1 against its 1.4:1) the same curves dilate into huge
   diagonal bands that sweep across the content and wash out the text.

   The curves are not the problem, the landscape canvas is. So phones get the same
   composition redrawn on a portrait canvas: identical palette and the same reading
   order (blue base, a deep navy field where the content sits, teal then lime
   rising from the bottom), just proportioned for a tall screen.

   It is painted on a fixed pseudo-element rather than on body. A body background
   is sized against the whole document, so on a long page the curves would stretch
   vertically all over again and we would be back to the original problem; pinning
   it to the viewport keeps the composition at the ratio it was drawn for whatever
   the page length. This also sidesteps background-attachment: fixed, which iOS
   Safari does not honour. */
@media (max-width: 767.98px) {
  body{
    background: none;
    background-color: var(--bg0);
  }

  body::before{
    content: "";
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background:
      radial-gradient(circle at 50% 12%, rgba(255,255,255,.05), transparent 42%),
      url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 430 932' preserveAspectRatio='none'%3E%3Crect width='430' height='932' fill='%232c5f8e'/%3E%3Cpath d='M0 168C96 138 214 112 430 128V700C286 752 132 726 0 672Z' fill='%230b1648'/%3E%3Cpath d='M0 690C118 730 268 766 430 752V932H0V690Z' fill='%2322b39d'/%3E%3Cpath d='M0 812C132 842 286 878 430 866V932H0V812Z' fill='%239af557'/%3E%3C/svg%3E");
    background-color: var(--bg0);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
  }
}

.wrapper { overflow: hidden; }

.theme-title{
color: var(--ink);
letter-spacing:.3px;
font-weight:800;
text-transform:uppercase;
display:inline-block;
padding-bottom:.25rem;
border-bottom: 2px solid rgba(255,255,255,.12);
}

.toggle-head {
cursor: pointer;
user-select: none;
}

.collapse-content {
display: none;
}

.toggle-head[aria-expanded="true"] + .collapse-content {
display: block;
}

.toggle-head i.fa-chevron-down {
transition: transform .15s ease;
}

.toggle-head[aria-expanded="true"] i.fa-chevron-down {
transform: rotate(180deg);
}

@media (min-width: 992px) {
.collapse-content {
display: block !important;
}

.toggle-head {
cursor: default;
}

.toggle-head i.fa-chevron-down {
display: none;
}
}

.kv {
display: flex;
align-items: baseline;
gap: .5rem;
margin-bottom: .25rem;
}

.kv .k {
min-width: 160px;
color: #6c757d;
}

.text-mono {
font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
}

.secret-box {
display: flex;
align-items: center;
gap: .5rem;
}

.secret-mask {
filter: blur(5px);
user-select: none;
}

.secret-reveal {
cursor: pointer;
}

.member-role-badge {
font-size: .75rem;
}

/* ===== HERO (landing) ===== */
.hero {
position: relative;
min-height: clamp(520px, 68vh, 820px);
display: grid;
place-items: center;
text-align: center;
color: #fff;
background:
radial-gradient(80% 60% at 50% 40%, rgba(0, 0, 0, .35), rgba(0, 0, 0, .65)),
url('../assets/img/hero-bg.png') center/cover no-repeat;
isolation: isolate;
padding-inline: clamp(16px, 4vw, 40px);
}
.hero::after {
content: "";
position: absolute; inset: 0;
background:
radial-gradient(700px 380px at 50% 30%, rgba(255, 255, 255, .08), transparent 60%),
radial-gradient(600px 360px at 10% 90%, rgba(4, 34, 77, .25), transparent 60%);
z-index: 0; pointer-events: none;
}
.hero-text {
position: relative; z-index: 1;
width: min(100%, 1120px); margin-inline: auto;
padding: clamp(32px, 5vw, 60px);
background:
radial-gradient(circle at top right, rgba(73, 134, 207, 0.12), transparent 36%),
linear-gradient(180deg, rgba(14, 28, 84, 0.94), rgba(9, 19, 58, 0.9));
border: 1px solid rgba(160, 190, 235, 0.14);
border-radius: 30px;
box-shadow: 0 24px 60px rgba(4, 10, 31, 0.22);
backdrop-filter: blur(12px);
}
.hero-text::before{
content:"";
position:absolute;
inset:0;
pointer-events:none;
background: linear-gradient(180deg, rgba(255, 255, 255, .05), transparent 22%);
border-radius: inherit;
}
.hero h1 { font-size: clamp(2.3rem, 4.8vw, 4.2rem); font-weight: 900; letter-spacing: -.02em; margin-bottom: .9rem; }
.hero h4 { color: rgba(246, 251, 255, .84); opacity: 1; text-align: center; font-weight: 600; max-width: 70ch; margin-inline: auto; line-height: 1.65; }

.section { padding: clamp(44px, 5vw, 80px) clamp(16px, 4vw, 32px); }
.section h2 { font-weight: 900; margin-bottom: 14px; text-align: center; }
.section h4 { color: rgba(246, 251, 255, .84); opacity: 1; font-weight: 600; line-height: 1.65; }

/* Side images */
.sideImg{
width: 100%;
border-radius: 16px;
background: rgba(255, 255, 255, .02);
border: 1px solid rgba(255, 255, 255, .08);
box-shadow: 0 20px 50px -24px rgba(0, 0, 0, .6);
transition: transform .35s ease, box-shadow .35s ease;
}
.sideImg:hover{ transform: translateY(-4px); box-shadow: 0 26px 70px -30px rgba(0,0,0,.7); }

/* ===== Modern "glass" surfaces ===== */
.easy-card{
border: 1px solid var(--glass-b);
background: var(--glass);
border-radius: 24px;
box-shadow: var(--shadow);
margin-bottom:0;
}
.no-margin {
margin:0 !important;
}

.no-focus:focus {
text-decoration:none !important;
outline:none;
box-shadow:none !important;
color:var(--color4) !important;
}
.card-opaque{
background-color: linear-gradient(180deg, rgba(10,15,27,.75), rgba(10,15,27,.35)), var(--glass-opaque) !important;
}
.hover-card{ transition: transform .18s ease, box-shadow .22s ease, border-color .18s ease, background .18s ease; }
.hover-card:hover{
transform: translateY(-4px);
box-shadow: 0 26px 70px -30px rgba(0,0,0,.7);
border-color: rgba(154,245,87,.28);
background: rgba(154,245,87,.05);
}

/* ===== Inputs/selects/buttons ===== */
.form-control, .form-select{
border-radius: 14px !important;
border: 1px solid rgba(97,199,211,.24);
background: rgba(246,251,255,.96);
color: var(--easyidp-navy);
height: var(--control-h);
line-height: 1.2;
padding: 0 1rem;
transition: border .2s ease, box-shadow .2s ease, background .2s ease;
}
.form-control::placeholder{ color: rgba(11,22,72,.48); }
.form-control:focus, .form-select:focus{
border-color: var(--easyidp-cyan);
box-shadow: 0 0 0 .2rem rgba(97,199,211,.2);
background: rgba(246,251,255,1);
}
textarea.form-control{ height:auto; min-height: 120px; }

.btn, .btn-easyidp, .btn-easyidp-contrast, .btn-easyidp-danger, .btn-outline-danger, .btn-secondary{ border-radius: 14px !important; }

/* ===== Primary buttons ===== */
.btn-easyidp{border: 0; padding:.65rem 1rem;
font-weight:800; letter-spacing:.3px;
background: linear-gradient(135deg, var(--easyidp-teal) 0%, var(--easyidp-lime) 100%);
color: var(--easyidp-navy);
box-shadow: 0 14px 32px rgba(34,179,157,.3);
transition: transform .12s ease, box-shadow .2s ease, filter .2s ease;
white-space: nowrap;
text-decoration: none;
}
.btn-easyidp:hover{ transform: translateY(-1px); filter: brightness(1.05); text-decoration:none }

.btn-easyidp-contrast{
padding:.65rem 1rem; font-weight:800; letter-spacing:.3px; color: var(--easyidp-white);
/* Set on the base rule, not just :hover — these are used on <a> as well as
   <button>, and without it the anchor variants render underlined (the solid
   .btn-easyidp has always set it, which is why only the contrast buttons
   showed underlines in the club quick-actions bar). */
text-decoration: none;
background: rgba(246,251,255,.08); border: 1px solid rgba(255,255,255,.14);
box-shadow: 0 10px 24px -8px rgba(4,10,31,.32);
transition: transform .12s ease, box-shadow .2s ease, filter .2s ease, background .2s ease;
}
.btn-easyidp-contrast:hover{ transform: translateY(-1px); background: rgba(246,251,255,.12); color: var(--easyidp-white); }

.btn-easyidp-danger{
padding:.65rem 1rem; font-weight:800; letter-spacing:.3px; color:#fff;
text-decoration: none;
background: rgba(228, 12, 12, 0.75); border: 1px solid var(--glass-b);
box-shadow: 0 10px 24px -8px rgba(4,34,77,.55);
transition: transform .12s ease, box-shadow .2s ease, filter .2s ease, background .2s ease;
}
.btn-easyidp-danger:hover{ transform: translateY(-1px); filter: brightness(1.05); text-decoration:none }

.btn-easyidp-secondary{
padding:.65rem 1rem; font-weight:800; letter-spacing:.3px; color:#fff;
background: rgba(128, 128, 128, 0.75); border: 1px solid var(--glass-b);
box-shadow: 0 10px 24px -8px rgba(4,34,77,.55);
transition: transform .12s ease, box-shadow .2s ease, filter .2s ease, background .2s ease;
}
.btn-easyidp-secondary:hover{ transform: translateY(-1px); filter: brightness(1.05); text-decoration:none }

/* Input group icon chip */
.input-group-text{
border: 1px solid rgba(97,199,211,.24);
background: rgba(97,199,211,.15);
color: var(--easyidp-white);
height: var(--control-h);
display:flex; align-items:center;
padding: 0 14px;
border-radius: 14px 0 0 14px;
}

/* Cards imagery: crop on tiles, contain on banners */
.card.hover-card{
border: 1px solid var(--glass-b);
background: linear-gradient(180deg, rgba(10,15,27,.75), rgba(10,15,27,.35)), var(--glass);
border-radius: 16px;
box-shadow: var(--shadow);
cursor:pointer;
overflow: hidden;
}
.hover-card .card-img-top{
height: 220px; object-fit: cover; width: 100%;
border-top-left-radius: 16px; border-top-right-radius: 16px;
border-bottom-left-radius: 16px; border-bottom-right-radius: 16px;
filter: saturate(.96) contrast(1.03);
}
/* full logo in glass banners */
.easy-card .card-img-top{
height: auto; width:100%; object-fit: contain; display:block;
border-radius: 16px;
background: rgba(255,255,255,.04);
}

/* ===== Logo loop ===== */
.logo-loop{
--gap: clamp(24px, 4vw, 56px);
--duration: 28s;
position: relative;
border-radius: 18px;
background: var(--glass);
border: 1px solid var(--glass-b);
box-shadow: var(--shadow);
padding: 18px 8px; margin: 12px auto 0;
max-width: 1060px; overflow: hidden;
}
.logo-loop::before, .logo-loop::after{
content:""; position:absolute; top:0; bottom:0; width:10%; pointer-events:none;
background: linear-gradient(to right, var(--bg0), rgba(5, 8, 15, 0)); z-index:2;
}
.logo-loop::after{ right:0; left:auto; transform: scaleX(-1); }
.logo-loop::before{ left:0; }
.logo-mask{ overflow: hidden; position: relative; z-index:1; }
.logo-track{
display:flex; gap: var(--gap); width: max-content;
will-change: transform; animation: logo-scroll var(--duration) linear infinite;
}
.logo-loop:hover .logo-track{ animation-play-state: paused; }
/* Reduced motion used to stop this strip dead, which is why it looked frozen on an
   iPhone with "Reduce Motion" on while running fine everywhere else. Stopping it
   also hid seven of the nine logos. Explicit product decision: it keeps moving, at
   roughly a third of the speed — slow enough not to be the jarring thing the
   setting is meant to prevent, and the strip stays swipeable either way. */
@media (prefers-reduced-motion: reduce){ .logo-track{ animation-duration: 80s; } }
.logo-list{ display:flex; gap: var(--gap); align-items:center; margin:0; padding:0; list-style:none; }
.logo-item{ display:flex; align-items:center; justify-content:center; min-width: clamp(120px, 16vw, 240px); padding: 8px 12px; transition: transform .2s ease; transform: translateZ(0); }
.logo-item img{ max-height: 80px; width:auto; object-fit:contain; filter: drop-shadow(0 6px 16px rgba(0,0,0,.35)); opacity:.82; transition: transform .2s ease, filter .2s ease, opacity .2s ease; }
.logo-item:hover, .logo-item:focus-within{ transform: translateY(-2px); }
.logo-item:hover img, .logo-item:focus-within img{ opacity:1; transform: scale(1.06); cursor:pointer; }
@keyframes logo-scroll { from{ transform: translateX(0); } to{ transform: translateX(-50%); } }
/* 767.98px, the breakpoint the rest of the app uses, rather than 576px: between
   the two the logos still rendered at their full 80px, which dwarfs everything
   else on a narrow screen. */
@media (max-width: 767.98px){
.logo-item{ min-width: clamp(100px, 40vw, 200px); }
.logo-item img{ max-height: 44px; }
}

/* No swipe fallback here any more: the strip keeps animating under reduced motion
   (see the duration override above), and a scroll container fighting a running
   animation just produces a stray scrollbar and jerky panning. */

/* Subscribe form (landing) */
.subscribe-form{ max-width: 720px; margin: 1rem auto 0; }
.input-row{ display:grid; grid-template-columns: 1fr 1fr auto; gap:.75rem; }
@media (max-width: 768px){ .input-row{ grid-template-columns: 1fr; } }
.form-control,
.form-select{
border-radius: 6px !important;
padding: .85rem 1rem;
border: 1px solid rgba(255, 255, 255, .25);
background: rgba(255, 255, 255, .08);
color:#fff;
outline:none;
transition: border .2s ease, box-shadow .2s ease, background .2s ease;
}
.form-select{
padding-right: 2.75rem;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='rgba(255,255,255,0.84)' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.8' d='M3.5 6l4.5 4 4.5-4'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right 1rem center;
background-size: 16px 12px;
}
.form-control::placeholder{ color: rgba(255,255,255,.7); }
.form-control:focus, .form-select:focus{ border-color: var(--glass-b); box-shadow: 0 0 0 4px var(--ring); background: rgba(255,255,255,.12); }

/* Social links */
.social-links{ text-align:center; margin: 20px 0 10px; }
.social-links a{
display:inline-flex; align-items:center; justify-content:center;
width:56px; height:56px; margin:0 8px; text-decoration:none; color:#fff;
border-radius:14px; background: rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.14);
box-shadow: 0 10px 24px -12px rgba(0,0,0,.6);
transition: transform .15s ease, background .2s ease, border .2s ease;
}
.social-links a:hover{ transform: translateY(-2px); background: rgba(255,255,255,.12); border-color: rgba(255,255,255,.22); }

/* Side panel glass */
.side-panel .card{
border: 1px solid var(--glass-b);
background: linear-gradient(180deg, rgba(10,15,27,.65), rgba(10,15,27,.28)), var(--glass);
border-radius: 16px;
box-shadow: var(--shadow);
}

/* Equal-height helpers */
.row.align-items-stretch > [class*="col-"]{ display:flex; }
.equal-card{ width:100%; height:100%; display:flex; flex-direction:column; }
.equal-card .card-body{ flex: 1 1 auto; }

/* No results helper */
.no-results{ text-align:center; color: var(--muted); padding: 18px 8px; }

/* Focus ring accessibility */
:focus-visible{ outline: 3px solid var(--ring); outline-offset: 2px; border-radius: 8px; }

/* Spacing */
.container-fluid.py-4{ padding-top: 28px !important; }

/* ===== Glassy Navbar (incorporated snippet) ===== */
.nav-glass{
position: sticky; top:0; z-index:1040;
background:
linear-gradient(180deg, rgba(10,15,27,.75), rgba(10,15,27,.35)),
var(--glass);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
border-bottom: 1px solid var(--glass-b);
box-shadow: 0 6px 24px -12px rgba(0,0,0,.55);
}
.nav-glass .navbar-brand{
font-weight: 900; letter-spacing:.3px; color:#fff !important;
}
.nav-glass .navbar-brand img{
height:48px; filter: drop-shadow(0 6px 16px rgba(0,0,0,.35));
}
.nav-glass .navbar-toggler{
border: 1px solid rgba(255,255,255,.18);
border-radius: 12px;
padding: .4rem .6rem;
color: #fff;
background: rgba(255,255,255,.06);
transition: background .2s ease, border .2s ease, transform .12s ease;
}
.nav-glass .navbar-toggler .navbar-toggler-icon{
display:flex;
align-items:center;
justiy-content-center;
width:100%;
}
.nav-glass .navbar-toggler:hover{
background: rgba(255,255,255,.1);
border-color: rgba(255,255,255,.28);
transform: translateY(-1px);
}
.nav-glass .navbar-toggler:focus{ outline: none; box-shadow: 0 0 0 4px var(--ring); }
.nav-glass .navbar-nav .nav-link{
color: var(--ink) !important; opacity:.9;
font-weight: 600; letter-spacing: .15px;
position: relative; transition: color .15s ease, opacity .15s ease;
}
.nav-glass .navbar-nav .nav-link:hover{ color:#fff !important; opacity:1; }
.nav-glass .navbar-nav .nav-link .nav-ico{ width:1.15em; margin-right:.55rem; text-align:center; color:rgba(111,210,229,.92); font-size:.95em; }
.nav-glass .navbar-nav .nav-link::after{
content:""; position:absolute; left:0; right:0; bottom:-6px; height:2px;
background: linear-gradient(90deg, transparent, var(--brand), transparent);
transform: scaleX(0); transform-origin: center;
transition: transform .2s ease;
}
.nav-glass .navbar-nav .nav-link:hover::after,
.nav-glass .navbar-nav .nav-link.active::after{ transform: scaleX(1); }
.nav-glass .navbar-collapse.show .navbar-nav .nav-link:hover::after{ transform: scaleX(1)}
.nav-glass .navbar-collapse.show .navbar-nav .nav-link.active::after{ transform: scaleX(1)}
.nav-glass .navbar-collapse.show .navbar-nav{ gap:2px; padding:6px 4px; }
.nav-glass .navbar-collapse.show .navbar-nav .nav-link{
  text-align:left;
  display:flex; align-items:center;
  padding:.72rem .9rem; border-radius:12px;
  opacity:1;
  transition:background .16s ease, box-shadow .16s ease, color .16s ease;
}
.nav-glass .navbar-collapse.show .navbar-nav .nav-link::after{ display:none; }
.nav-glass .navbar-collapse.show .navbar-nav .nav-link:hover{
  background:rgba(255,255,255,.07);
}
.nav-glass .navbar-collapse.show .navbar-nav .nav-link.active{
  background:linear-gradient(90deg, rgba(154,245,87,.16), rgba(97,199,211,.05));
  box-shadow:inset 3px 0 0 var(--easyidp-lime, #9af557);
}

/* Bootstrap 5 and 4 compatibility */
.navbar-nav.me-auto .nav-item{ margin-right:.25rem; }
.navbar-nav.mr-auto .nav-item{ margin-right:.25rem; }

/* Dropdown (glass) */
.dropdown-menu.sub-nav{
position:absolute;
width:100%;
background: linear-gradient(180deg, rgba(10,15,27,.78), rgba(10,15,27,.42)), var(--glass);
border: 1px solid var(--glass-b);
border-radius: 12px;
box-shadow: var(--shadow);
padding:.35rem; min-width: 220px;
}
.dropdown-menu.sub-nav .dropdown-item{
color: var(--ink); border-radius:8px; font-weight:600;
}
.dropdown-menu.sub-nav .dropdown-item:hover{
background: rgba(255,255,255,.08); color:#fff;
}

/* Right side (welcome + icon) */
.fa-theme{
color: var(--ink) !important;
opacity:.9;
transition: transform .12s ease, opacity .15s ease;
}
.fa-theme:hover{ opacity:1; transform: translateY(-1px); }

/* Right side auth area buttons in nav */
.nav-auth .btn-easyidp{
border-radius: 4px !important; padding:.55rem 1rem; font-weight:800;
background: none !important;
box-shadow: 0 10px 24px -8px rgba(4, 34, 77, .55);
color: #fff !important;
}

/* --- Themed account-expiry banner (incorporated snippet) --- */
.easy-banner{
background: linear-gradient(180deg, rgba(10,15,27,.78), rgba(10,15,27,.42)), var(--glass) !important;
border: 1px solid var(--glass-b) !important;
color: var(--ink) !important;
border-radius: 12px;
box-shadow: var(--shadow);
}
.easy-banner.alert-warning{ border-left: 4px solid #f0ad4e !important; }
.easy-banner.alert-danger{ border-left: 4px solid #dc3545 !important; }
.easy-banner a{ color:#9ec3ff; text-decoration:none; }
.easy-banner a:hover{ text-decoration: underline; }
.easy-banner .close{ color: var(--ink); opacity:.85; }
.easy-banner .close:hover{ opacity:1; }

/* Expiry banner layout in navigation */
.account-expiry-banner{
margin: 0 10px;
padding: .45rem .6rem;
font-size: .95rem;
line-height: 1.35;
}
.account-expiry-banner__inner{
display:flex;
align-items:center;
gap:.6rem;
width:100%;
}
.account-expiry-banner__icon{
flex:0 0 auto;
font-size: 1rem;
}
.account-expiry-banner__message{
flex:1 1 auto;
min-width: 0;
}
.account-expiry-banner__actions{
display:flex;
align-items:center;
gap:.5rem;
flex:0 0 auto;
margin-left:auto;
}
.account-expiry-banner__renew{
font-weight:700;
white-space:nowrap;
}
.account-expiry-banner__close{
line-height:1;
padding:0 .15rem;
font-size:1.35rem;
text-shadow:none;
background:transparent;
border:none;
color:inherit;
opacity:.85;
}
.account-expiry-banner__close:hover,
.account-expiry-banner__close:focus{
opacity:1;
}

@media (max-width: 767.98px){
.account-expiry-banner{
font-size: .9rem;
}
.account-expiry-banner__inner{
align-items:flex-start;
flex-wrap:wrap;
}
.account-expiry-banner__actions{
width:100%;
justify-content:space-between;
padding-left:1.6rem;
margin-left:0;
}
}

/* ===== Cookie banner (frosted glass, easyidp palette) ===== */
.ckie-banner{
position:fixed; bottom:0; left:0; right:0;
background: rgba(11, 22, 72, .72);
-webkit-backdrop-filter: blur(16px) saturate(1.1);
backdrop-filter: blur(16px) saturate(1.1);
border-top:1px solid rgba(154, 245, 87, .35);
color: var(--easyidp-white) !important;
padding:.9rem 1.25rem; z-index:10000; display:flex; justify-content:center; align-items:center;
box-shadow:0 -12px 30px rgba(3, 10, 31, .35);
opacity:1; visibility:visible; transition: opacity .4s ease, visibility .4s ease;
}
.ckie-banner.hidden{ opacity:0; visibility:hidden; }
.ckie-banner__content{ max-width:960px; width:100%; display:flex; gap:1.25rem; justify-content:space-between; align-items:center; }
.ckie-banner__text{ text-align:left; }
.ckie-banner h4{ margin:0 0 .15rem; font-size:1.05rem; color: var(--easyidp-white) !important; }
.ckie-banner p{ margin:0; font-size:.9rem; line-height:1.5; color: rgba(236, 243, 255, .82) !important; }
.ckie-banner__content a, .ckie-banner .cookie-policy-link{ color: var(--easyidp-lime); text-decoration: underline; cursor:pointer; }
.ckie-banner__btn{
flex:0 0 auto; transition: transform .1s, box-shadow .1s;
background: var(--easyidp-lime); border:none; color: var(--easyidp-navy);
padding:.6rem 1.4rem; font-size:.95rem; font-weight:800; cursor:pointer; border-radius:10px;
}
.ckie-banner__btn:hover{ transform: translateY(-1px); box-shadow:0 8px 18px rgba(154, 245, 87, .28); }
@media (max-width: 640px){
.ckie-banner__content{ flex-direction:column; gap:.65rem; }
.ckie-banner__text{ text-align:center; }
}

/* ===== Legacy rules preserved (mapped) ===== */
.bg-main { background-color: var(--color2); }
h1 { color: var(--color4); }
p, label, h4, .preset-container { color: var(--color4); }
.widgets .title, .title{ margin:30px 0; margin-left:30px; }
.preset-container.selected {color: var(--color3)}
/* Footer (legacy) */
footer{
bottom:0; position:static; width:100%;
margin-top:30px; padding-top:30px; border-top:#000 1px solid; text-align:center;
background-color: var(--color1);
}
.footer-nav a{ color: var(--color2); text-decoration:none; }
.footer-nav{ text-transform:uppercase; padding:15px 0; text-align:center; }
.footer-copyright{ margin:0 60px; padding:15px 0; border-top: var(--color2) 1px solid; color: var(--color2); }
.footer-contact{ text-align:center; font-size:.9rem; color: var(--muted); padding-bottom:40px; }

/* Navbar/links focus colors (legacy) */
.nav-link.show, .nav-link:focus{ color: var(--color4) !important; filter: saturate(.96) contrast(1.03); }
.navbar-toggler:focus{ box-shadow:none; }
nav i{ color: var(--color4) !important; }

/* Containers/cards (legacy aesthetic blended with glass) */
.container{ margin-top: 40px; margin-bottom: 40px; }
.card, .modal-content{
background-color: var(--color3);
border: none;
border-radius: 16px;
box-shadow: var(--shadower);
}
.card-header{
background: linear-gradient(180deg, var(--brand), #031938);
color:#fff;
border-top-left-radius: 16px;
border-top-right-radius: 16px;
}
.filter-card .card-header{
background: none;
color:#fff;
border-top-left-radius: 16px;
border-top-right-radius: 16px;
border:none;
}
.modal-header{
background-color: var(--color2);
color: #fff;
border-top-left-radius: 8px;
border-top-right-radius: 8px;
}

/* Player card hover (legacy) */
.player-card{ transition: transform 0.2s; }
.player-card:hover{ transform: scale(1.02); }
.player-card .card-body{ padding: 1rem; }
.player-card a{ color: var(--color1); text-decoration: none; }
.player-card a:hover{ text-decoration: underline; }

/* Header text inside card headers */
.card-header button, .card-header h2, .card-header h4{ color: var(--color4) !important; }
/* .fa-theme adjusted above */

/* Misc utility bars */
.actions-bar, .action-bar, .page-actions{ gap:.5rem; flex-wrap:wrap; }
@media (max-width: 992px){ .action-bar{ margin-top:.75rem; } }

/* ================================================================== */
/* ========== AUTH / LOGIN PAGE (scoped so it doesn’t affect app) === */
/* ================================================================== */

/* Optional blurred bg image behind auth pages */
.bg-image{
background:
radial-gradient(circle at 50% 30%, rgba(255,255,255,.05), transparent 32%),
url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 1024' preserveAspectRatio='none'%3E%3Crect width='1440' height='1024' fill='%232c5f8e'/%3E%3Cpath d='M0 232C203 201 423 151 638 99C933 28 1190 -13 1440 0V682C1166 786 883 826 627 782C365 738 161 652 0 564V232Z' fill='%230b1648'/%3E%3Cpath d='M0 652C213 720 417 770 642 812C931 865 1178 929 1440 918V1024H0V652Z' fill='%2322b39d'/%3E%3Cpath d='M0 822C256 855 518 901 776 952C1006 998 1221 1024 1440 1015V1024H0V822Z' fill='%239af557'/%3E%3C/svg%3E") no-repeat center center / cover;
position: fixed; inset: 0; z-index: -1;
filter: none; opacity:1;
}

/* Centered container for login page */
.login-container, .signin-container{
min-height: 100vh;
display:flex; align-items:center; justify-content:center;
padding: 24px;
}

/* “Glass” auth card */
.auth-card,
.signin-card{
width:100%; max-width: 460px;
background: rgba(7, 19, 61, .8);
border: 1px solid var(--glass-b);
border-radius: 26px; box-shadow: var(--shadow);
backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
padding: 36px;
}
.auth-card .helper{ color: var(--muted); }
.signin-card .helper{ color: var(--muted); }
/* Cross-links (no account / already have an account) → brand green */
.auth-card .helper a, .auth-card .helper .btn-link,
.signin-card .helper a, .signin-card .helper .btn-link{
color: var(--easyidp-lime); font-weight:700; text-decoration:underline;
}
.auth-card .helper a:hover, .auth-card .helper .btn-link:hover,
.signin-card .helper a:hover, .signin-card .helper .btn-link:hover{
color: var(--easyidp-lime); filter: brightness(1.08);
}

.selection-card{
max-width: 720px;
}

/* Brand circle/logo */
.brand-circle{
width:120px; height:120px; border-radius:28px;
overflow:hidden; margin: 6px auto 18px auto;
border:1px solid rgba(255,255,255,.12);
background: rgba(7, 19, 61, .72);
box-shadow: 0 20px 50px -24px rgba(0,0,0,.6);
}
.brand-circle img{ width:100%; height:100%; object-fit: contain; }

/* Page title inside auth card */
.auth-card h4.page-title,
.signin-card h4.page-title{ text-align:center; margin:12px 0 10px; font-weight:800; font-size: clamp(2rem, 5vw, 3rem); line-height:1; color: var(--easyidp-lime); }

/* Segmented toggle (Coach / Player) */
.auth-card .mode-toggle{ display:flex; justify-content:center; margin-bottom:14px; }
.auth-card .toggle-pill{
display:inline-flex; padding:4px; border-radius:14px;
background: rgba(246,251,255,.08); border: 1px solid rgba(255,255,255,.14);
}
.auth-card .toggle-pill a{
display:inline-block; min-width:110px; text-align:center; padding:.45rem .9rem;
font-weight:800; letter-spacing:.2px; color: var(--ink); text-decoration:none; border-radius:12px;
transition: background .15s ease, color .15s ease, transform .12s ease;
}
.auth-card .toggle-pill a.active{
background: linear-gradient(135deg, var(--easyidp-teal) 0%, var(--easyidp-lime) 100%);
color: var(--easyidp-navy); box-shadow: 0 10px 24px -8px rgba(34,179,157,.4);
}
.auth-card .toggle-pill a:not(.active):hover{ transform: translateY(-1px); }

/* Language switcher (segmented pills) — mirrors the Coach/Player toggle */
/* Collapsible language switcher: <details> showing only the current language
   until opened, then a popover with the full pill bar. */
.lang-switch{ position: relative; display: inline-block; }

/* The collapsed trigger = current language, styled as the green active pill. */
.lang-switch > summary.lang-switch-current{
list-style: none; cursor: pointer; outline: none;
display: inline-flex; align-items: center; justify-content: center; gap: .3rem;
min-width: 38px; padding: .32rem .6rem; border-radius: 12px;
font-weight: 800; font-size: .78rem; letter-spacing: .04em;
color: var(--easyidp-navy);
background: linear-gradient(135deg, var(--easyidp-teal) 0%, var(--easyidp-lime) 100%);
border: 1px solid rgba(255,255,255,.14);
box-shadow: 0 10px 24px -8px rgba(34,179,157,.4);
transition: filter .15s ease, transform .12s ease;
}
.lang-switch > summary.lang-switch-current::-webkit-details-marker{ display: none; }
/* Globe glyph on the pill — signals "language" at a glance. */
.lang-switch > summary.lang-switch-current .lang-switch-globe{ font-size: .92em; opacity: .9; }
.lang-switch > summary.lang-switch-current:hover{ filter: brightness(1.04); transform: translateY(-1px); }
.lang-switch > summary.lang-switch-current:focus-visible{ box-shadow: 0 0 0 .2rem rgba(97,199,211,.45); }
/* When open, the fly-out includes the current language (right-aligned, over the
   trigger's spot), so the standalone trigger is faded out to avoid a double pill. */
.lang-switch[open] > summary.lang-switch-current{ opacity: 0; pointer-events: none; }

/* The full pill bar (current language included, on the right) unfolds to the LEFT
   on the SAME row, GROWING from the current pill with a pop. Its right edge sits
   where the trigger was, so the current pill appears to stay put and expand. */
.lang-switch-menu{
position: absolute; z-index: 1060; top: 50%; right: 0;
transform: translateY(-50%); transform-origin: right center;
opacity: 0; pointer-events: none;
display: inline-flex; gap: 2px; padding: 4px; border-radius: 14px;
white-space: nowrap;
background: rgba(11,22,72,.98); border: 1px solid rgba(255,255,255,.14);
box-shadow: 0 18px 44px -14px rgba(4,10,31,.7);
}
/* Resting open state; the pop in/out motion is driven by the Web Animations API
   in the component script (so it replays on every open AND animates the close). */
.lang-switch[open] > .lang-switch-menu{ opacity: 1; pointer-events: auto; }

/* Unfolding leftwards from the trigger works while there is room to the left of
   it. On a phone there is not: six language pills on one nowrap row are wider than
   the screen, so the bar ran off the left edge and the first languages became
   unreachable. Below the tablet breakpoint it opens centred on the viewport and is
   allowed to wrap onto several rows.
   Only the horizontal offset is set, via margin rather than transform: the
   component script animates transform through the Web Animations API on every open
   and close, and would overwrite anything set here. Vertical centring is left to
   the translateY(-50%) that same transform carries.
   (The in-drawer copy has its own override in nav_sidebar.css and wins on
   specificity — it needs viewport units for a different reason.) */
@media (max-width: 767.98px){
  .lang-switch-menu{
    position: fixed;
    top: 50vh;
    left: 50vw;
    right: auto;
    width: min(92vw, 340px);
    margin-left: calc(min(92vw, 340px) / -2);
    flex-wrap: wrap;
    justify-content: center;
    white-space: normal;
    transform-origin: center center;
  }

  /* The trigger pill is normally faded out while open, because the fly-out unfolds
     over its spot and would otherwise show twice. Centred on the viewport it no
     longer covers anything, so fading it left a hole where the control used to be
     and the menu floated with nothing tying it to its origin. Keep it visible. */
  .lang-switch[open] > summary.lang-switch-current{ opacity: 1; pointer-events: auto; }

  /* And give the centred menu a backdrop, so it reads as something deliberately
     brought to the middle of the screen rather than a panel that lost its anchor.
     Sits just under the menu's own z-index (1060). */
  .lang-switch[open]::before{
    content: "";
    position: fixed;
    inset: 0;
    z-index: 1059;
    background: rgba(4, 10, 31, .55);
  }

  /* Except on the auth pages. There the switcher sits at the top of a centred card
     with the full width to unfold into, so the standard fly-out has the room it
     needs — recentring it on the viewport would move a control that was never in
     anyone's way, and detach it from the card it belongs to. The overlapping
     fly-out is back, so the trigger must fade again and there is no backdrop. */
  .auth-card .lang-switch[open] > summary.lang-switch-current{ opacity: 0; pointer-events: none; }
  .auth-card .lang-switch[open]::before{ display: none; }

  .auth-card .lang-switch-menu{
    position: absolute;
    top: 50%;
    left: auto;
    right: 0;
    width: auto;
    margin-left: 0;
    flex-wrap: nowrap;
    white-space: nowrap;
    transform-origin: right center;
  }
}
.lang-switch-opt{
display:inline-flex; align-items:center; justify-content:center; min-width:38px;
padding:.32rem .6rem; border-radius:10px;
font-weight:800; font-size:.78rem; letter-spacing:.04em;
color: var(--muted); text-decoration:none;
transition: background .15s ease, color .15s ease, transform .12s ease;
}
.lang-switch-opt:hover{ color: var(--ink); transform: translateY(-1px); background: rgba(246,251,255,.08); }
.lang-switch-opt.is-active{
background: linear-gradient(135deg, var(--easyidp-teal) 0%, var(--easyidp-lime) 100%);
color: var(--easyidp-navy); box-shadow: 0 10px 24px -8px rgba(34,179,157,.4);
}
.lang-switch-opt.is-active:hover{ color: var(--easyidp-navy); transform: none; }

/* .form-group is a Bootstrap 4 class and Bootstrap 5 — the version this app loads —
   dropped it, margin included. It survived in the markup of nine views, but only
   the ones scoped below (.auth-card, .profile-shell, .theme-creator) kept any
   spacing; everywhere else the fields ended up flush against each other. Contact,
   edit player, add player and evaluate progress all looked cramped for that reason.
   This restores the Bootstrap 4 default globally; the scoped rules keep winning on
   specificity where a different rhythm was chosen. */
.form-group{ margin-bottom: 1rem; }

/* Same story as .form-group: a Bootstrap default that never got themed. Bootstrap
   paints .text-muted near-black (rgba(33,37,41,.75)), which on this dark UI gives
   roughly 1.3:1 against the background — invisible, far below the 4.5:1 minimum.
   Only a handful of containers re-themed it, so the other occurrences (120 of them
   across 41 views: page subtitles, help text, empty states) were unreadable.
   !important is required because the Bootstrap utility carries it too; this file
   loads after Bootstrap, so equal specificity wins here. */
.text-muted{ color: var(--muted) !important; }

/* Action bars are laid out as a row with the groups pushed apart, which is right on
   a wide screen and wrong on a phone: the groups stay side by side, each button
   takes whatever width its label happens to need, and you get a ragged little
   staircase (create / import / export on the goals page being the clearest case).
   Below the tablet breakpoint they stack and fill the width, so every action reads
   as the same kind of thing and is the same size to tap. */
@media (max-width: 767.98px){
  .actions-bar{
    flex-direction: column;
    align-items: stretch !important;
    gap: .5rem;
    width: 100%;
  }
  .actions-bar > .btn-easyidp,
  .actions-bar > .btn-easyidp-contrast,
  .actions-bar > .btn-easyidp-danger{ width: 100%; }
}

/* Pill inputs in auth card */
.auth-card .form-group{ margin-bottom: 1.35rem; }
.auth-card .form-group label{ color: var(--muted); margin-bottom:.6rem; }
.auth-card .form-control{
border-radius: 14px !important;
padding: .85rem 1.1rem;
border: 1px solid rgba(97,199,211,.24);
background: rgba(246,251,255,.96);
color: var(--easyidp-navy);
transition: border .2s ease, box-shadow .2s ease, background .2s ease;
}
.auth-card .form-control::placeholder{ color: rgba(11,22,72,.48); }
.auth-card .form-control:focus{
border-color: var(--easyidp-cyan);
box-shadow: 0 0 0 .2rem rgba(97,199,211,.2);
background: rgba(246,251,255,1);
}

/* Password field with eye icon */
.auth-card .input-with-icon{ position:relative; }
.auth-card .input-with-icon .toggle-eye{
position:absolute; right:14px; top:50%; transform: translateY(-50%);
color: rgba(11,22,72,.72); cursor:pointer; padding:6px; border-radius:8px;
transition: background .15s ease, transform .12s ease;
}
.auth-card .input-with-icon .toggle-eye:hover{ background: rgba(97,199,211,.12); transform: translateY(-50%) scale(1.05); }

/* Shared EasyIDP SweetAlert theme */
.swal2-popup.easyidp-swal-popup {
border-radius: 24px !important;
border: 1px solid rgba(159, 187, 232, 0.14) !important;
background:
radial-gradient(circle at top left, rgba(79, 140, 255, 0.18), transparent 34%),
radial-gradient(circle at top right, rgba(55, 116, 221, 0.14), transparent 32%),
linear-gradient(180deg, rgba(10, 24, 73, 0.98), rgba(8, 18, 54, 0.96)) !important;
color: #eef5ff !important;
box-shadow: 0 28px 60px rgba(3, 10, 31, 0.34) !important;
overflow: hidden;
}

.swal2-popup.easyidp-swal-popup::before {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(180deg, rgba(255, 255, 255, 0.05), transparent 22%);
pointer-events: none;
}

.swal2-popup.easyidp-swal-popup .swal2-title,
.swal2-popup.easyidp-swal-popup .swal2-html-container,
.swal2-popup.easyidp-swal-popup .swal2-content,
.swal2-popup.easyidp-swal-popup .swal2-footer,
.swal2-popup.easyidp-swal-popup .swal2-validation-message,
.swal2-popup.easyidp-swal-popup #swal2-content {
color: #eef5ff !important;
}

.swal2-popup.easyidp-swal-popup .swal2-html-container,
.swal2-popup.easyidp-swal-popup .swal2-content,
.swal2-popup.easyidp-swal-popup #swal2-content {
color: rgba(208, 220, 243, 0.86) !important;
line-height: 1.65 !important;
}

.swal2-popup.easyidp-swal-popup .swal2-actions { gap: 0.75rem; }
.swal2-popup.easyidp-swal-popup .swal2-styled:focus { box-shadow: none !important; }

.swal2-popup.easyidp-swal-popup .easyidp-swal-confirm,
.swal2-popup.easyidp-swal-popup .easyidp-swal-cancel,
.swal2-popup.easyidp-swal-popup .easyidp-swal-deny {
min-height: 46px;
padding: 0.8rem 1.2rem;
border-radius: 14px;
font-weight: 800;
font-size: 0.96rem;
border: 0;
}

.swal2-popup.easyidp-swal-popup .easyidp-swal-confirm {
background: linear-gradient(135deg, rgba(88, 148, 255, 0.98), rgba(47, 112, 227, 0.96)) !important;
color: #f5f9ff !important;
box-shadow: 0 16px 30px rgba(22, 78, 176, 0.28) !important;
}

.swal2-popup.easyidp-swal-popup .easyidp-swal-cancel,
.swal2-popup.easyidp-swal-popup .easyidp-swal-deny {
background: rgba(255, 255, 255, 0.06) !important;
color: rgba(236, 243, 255, 0.92) !important;
border: 1px solid rgba(255, 255, 255, 0.1) !important;
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03) !important;
}

/* CTA inside auth card (full width) */
.auth-card .btn-easyidp{
width:100%; border:0; border-radius:14px;
padding: .9rem 1.25rem;
font-weight:800; letter-spacing:.3px;
background: linear-gradient(135deg, var(--easyidp-teal) 0%, var(--easyidp-lime) 100%);
color: var(--easyidp-navy); box-shadow: 0 14px 32px rgba(34,179,157,.3);
transition: transform .12s ease, box-shadow .2s ease, filter .2s ease;
}
.auth-card .btn-easyidp:hover{ transform: translateY(-1px); filter: brightness(1.05); text-decoration:none }
.auth-card .btn-easyidp:disabled{ opacity:.7; cursor:not-allowed; }

.auth-card .help-link a,
.signin-card a,
.selection-card a{ color: var(--easyidp-cyan); text-decoration:none; }
.auth-card .help-link a:hover{ text-decoration: underline; }
#error-message{ margin-top:.75rem; }

.signin-card .form-group label,
.signin-card .form-text,
.signin-card p,
.signin-card small{
color: rgba(246, 251, 255, .82);
}

.signin-card .form-control{
border-radius: 14px !important;
padding: .85rem 1.1rem;
}

.signin-card .btn-easyidp-contrast,
.signin-card .submit{
width: 100%;
}

.action-form{
display: none;
}

.action-form.active{
display: block;
}

.toggle-password{
position: absolute;
right: 1rem;
top: 2.7rem;
cursor: pointer;
color: rgba(11, 22, 72, .62);
}

#back-to-selection{
display: inline-block;
margin-bottom: 1rem;
color: var(--easyidp-cyan);
}

#back-to-selection:hover{
text-decoration: underline;
}

.selection-grid{
display:grid;
grid-template-columns: minmax(0, 1fr) 1px minmax(0, 1fr);
gap: 0 24px;
align-items:stretch;
}

.col-left,
.col-right{
display:flex;
flex-direction:column;
gap: 18px;
}

.divider{
background: linear-gradient(180deg, rgba(97,199,211,.18), rgba(154,245,87,.32));
width: 1px;
height: 100%;
}

.sel-btn{
padding: 1.5rem;
font-size: 1.05rem;
border-radius: 18px !important;
min-height: 88px;
background: rgba(246,251,255,.08);
border: 1px solid rgba(255,255,255,.12);
color: var(--easyidp-white);
cursor: pointer;
transition: transform .2s ease, box-shadow .2s ease, background .2s ease, border-color .2s ease;
}

.sel-btn:hover,
.sel-btn:focus{
transform: translateY(-2px);
background: rgba(97,199,211,.16);
border-color: rgba(154,245,87,.22);
color: var(--easyidp-white);
}

@media (max-width: 767px){
.login-container,
.signin-container{ padding: 18px; }

.auth-card,
.signin-card{ padding: 28px; }

.selection-grid{ grid-template-columns: 1fr; gap: 18px; }

.divider{ display:none; }
}

/* Accessibility */
@media (prefers-reduced-motion: reduce){ *{ transition:none !important; } }

.chart-container { height: 360px; }

.player-progress-shell .chart-container {
position: relative;
z-index: 1;
}

#cropImageModal .img-container {
width: 100%;
aspect-ratio: 2 / 1;
position: relative;
background: #000;
overflow: hidden;
}

#cropImageModal .cropper-container,
#cropImageModal .cropper-wrap-box,
#cropImageModal .cropper-canvas,
#cropImageModal .cropper-drag-box {
width: 100% !important;
height: 100% !important;
max-height: 100% !important;
}

/* ================================================================== */
/* ================== DASHBOARD WIDGETS — FIXED LAYOUT ============== */
/* ================================================================== */

/* Make each column a flex container so cards can equalize height */
.widgets .row > [class*="col"],
.widgets .row > .col {
display: flex;
}

/* The widget itself fills the column */
.widget {
display: flex;
cursor: pointer;
margin-bottom:30px;
}

/* If the widget is an anchor or a button wrapping the card */
.widget > a,
.widget > button {
  display: flex;
  height: 100%;
  width: 100%;
text-decoration: none;
background: transparent;
border: 0;
padding: 0;
}

/* Handle both cases: wrapper has .widget OR the card itself has .widget */
.widget .card,
.widget.card {
display: flex;
flex-direction: column;
width: 100%;
height: 100%;
}

/* Consistent image sizing inside widget tiles */
.widget .card-img-top,
.widget.card .card-img-top {
width: 100%;
height: 200px; /* adjust 180–220px to taste */
object-fit: cover;
}

/* Let the body flex-fill the remaining space for equal heights */
.widget .card-body,
.widget.card .card-body, .widget.card .kv .k .card-body span {
flex: 1 1 auto;
display: flex;
flex-direction: column;
justify-content: start;
color:#fff;
}

/* Nice hover & glass look */
.widget .card,
.widget.card {
border: 1px solid var(--glass-b);
background: linear-gradient(180deg, rgba(10, 15, 27, .75), rgba(10, 15, 27, .35)), var(--glass);
border-radius: 16px;
box-shadow: var(--shadow);
transition: transform .2s ease, box-shadow .25s ease, border-color .2s ease, background .2s ease;
overflow: hidden;
}
.widget .card:hover,
.widget.card:hover {
transform: translateY(-4px);
box-shadow: 0 26px 70px -30px rgba(0,0,0,.7);
border-color: rgba(255,255,255,.26);
background: linear-gradient(180deg, rgba(10, 15, 27, .82), rgba(10, 15, 27, .4)), var(--glass);
}
.widget .card.no-hover:hover,
.card.no-hover:hover,
.widget.card.no-hover:hover {
cursor:default;
transform: translateY(0);
box-shadow: 0 26px 70px -30px rgba(0,0,0,.7);
border-color: rgba(255,255,255,.26);
background: linear-gradient(180deg, rgba(10, 15, 27, .82), rgba(10, 15, 27, .4)), var(--glass);
}

/* Titles & text inside widget cards */
.widget .card-title,
.widget.card .card-title {
font-weight: 800;
letter-spacing: .2px;
margin-bottom: .25rem;
color: #fff !important;
}
.card-title{
color: #fff !important;
}
.widget .card-text,
.widget.card .card-text {
color: var(--ink);
margin: 0;
}

/* Responsive: each tile still fills its column on mobile */
@media (max-width: 767px) {
.widget .card,
.widget.card { width: 100% !important; }
}
/* ================================================================== */
/* ===================== PLAYER PAGE (view.player) =================== */
/* ================================================================== */

/* Accordéon en mode glass */
.accordion .card.card--glass {
background: linear-gradient(180deg, rgba(10,15,27,.65), rgba(10,15,27,.30)), var(--glass);
border: 1px solid var(--glass-b);
border-radius: 16px;
box-shadow: var(--shadow);
overflow: hidden;
}
.accordion .card-header {
background: linear-gradient(180deg, var(--brand), #031938);
color: #fff;
border: 0;
padding: .75rem 1rem;
}
.accordion .btn-link.accordion-toggle {
color: #fff;
text-decoration: none;
display: flex;
align-items: center;
justify-content: space-between;
width: 100%;
font-weight: 800;
letter-spacing: .2px;
}
.accordion .btn-link.accordion-toggle:hover { text-decoration: none; filter: brightness(1.05); }
.accordion .chev { transition: transform .2s ease; }
.accordion .btn[aria-expanded="true"] .chev { transform: rotate(180deg); }

/* Photos (player / team) avec cadre glass */
.photo-frame {
display: inline-flex;
align-items: center;
justify-content: center;
width: 100%;
max-width: 260px;
aspect-ratio: 1 / 1;
background: rgba(255,255,255,.04);
border: 1px solid var(--glass-b);
border-radius: 16px;
box-shadow: var(--shadow);
overflow: hidden;
}
.photo-frame img,
.player-photo,
.team-photo {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.photo-frame.empty { color: var(--muted); font-size: .9rem; }

/* Détails en grid (lecture + alignement) */
.info-grid p { margin-bottom: .4rem; }
.info-grid .monospace { font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; }

/* Cartes internes (goals / questions) */
.progress-team-card,
.goal-card-panel,
.question-card-panel,
.category-card-panel {
position: relative;
overflow: hidden;
border: 1px solid rgba(160, 190, 235, 0.14);
background:
radial-gradient(circle at top right, rgba(73, 134, 207, 0.16), transparent 36%),
linear-gradient(180deg, rgba(14, 28, 84, 0.98), rgba(9, 19, 58, 0.98));
border-radius: 28px;
box-shadow: 0 24px 60px rgba(4, 10, 31, 0.24);
color: var(--easyidp-white);
}

.progress-team-card::before,
.goal-card-panel::before,
.question-card-panel::before,
.category-card-panel::before {
content: "";
position: absolute;
inset: 0;
pointer-events: none;
background: linear-gradient(180deg, rgba(255, 255, 255, 0.04), transparent 22%);
}

.easy-card-header {
position: relative;
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 18px;
padding: 18px 22px 14px;
background: transparent;
color: var(--easyidp-white);
border: 0;
}

.easy-card-header-main {
min-width: 0;
display: grid;
gap: 6px;
}

.easy-card-header-title,
.easy-card-header .card-title,
.easy-card-header h5 {
margin: 0;
font-size: clamp(1.05rem, 2vw, 1.35rem);
line-height: 1.18;
font-weight: 700;
color: rgba(246, 251, 255, 0.98) !important;
letter-spacing: -0.01em;
}

.easy-card-header-subtitle {
margin: 0;
font-size: 0.76rem;
line-height: 1.2;
text-transform: uppercase;
letter-spacing: 0.18em;
color: rgba(97, 199, 211, 0.96);
}

.easy-card-header-meta,
.easy-card-header-meta-secondary {
flex-shrink: 0;
display: inline-flex;
align-items: center;
justify-content: center;
padding: 10px 16px;
border-radius: 18px;
background: rgba(127, 255, 65, 0.12);
border: 1px solid rgba(127, 255, 65, 0.18);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
color: #9aff57 !important;
font-size: 0.9rem;
font-weight: 700;
line-height: 1;
white-space: nowrap;
}

.easy-card-header-meta-secondary {
background: rgba(127, 255, 65, 0.12);
border-color: rgba(127, 255, 65, 0.18);
color: #9aff57 !important;
}

.progress-team-card-body,
.goal-card-body,
.question-card-body,
.category-card-body {
position: relative;
padding: 0 22px 20px;
}

.goal-card-category-row,
.question-card-category-row,
.category-card-color-row {
margin: 0 0 16px;
padding: 16px 18px;
border-radius: 20px;
background: rgba(255, 255, 255, 0.05);
border: 1px solid rgba(255, 255, 255, 0.08);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03);
}

.goal-card .card-body h4,
.question-card .card-body h5 {
color: rgba(246, 251, 255, 0.96);
font-weight: 700;
margin: 0;
}

.goal-card-description,
.question-card-description {
margin-bottom: 14px;
color: rgba(224, 234, 246, 0.84) !important;
line-height: 1.58;
}

.goal-card-date,
.question-card-date {
margin: 0;
}

.goal-card-date .text-muted,
.question-card-date .text-muted,
.progress-team-empty,
.progress-team-card .text-muted,
.hero-card .text-muted,
.index-card .text-muted,
.reset-card .text-muted,
.easy-card .text-muted
{
color: rgba(189, 205, 231, 0.74) !important;
}

.goal-card-footer,
.question-card-footer,
.category-card-footer {
display: flex;
align-items: center;
justify-content: flex-end;
gap: 10px;
padding: 22px 22px;
background: transparent;
border-top: 0;
}

.progress-team-list {
display: grid;
gap: 12px;
padding: 0 22px 22px;
background: transparent;
}

.progress-team-item,
.question-choice-item {
padding: 14px 16px;
border-radius: 18px !important;
background: rgba(255, 255, 255, 0.05);
border: 1px solid rgba(255, 255, 255, 0.08);
color: rgba(246, 251, 255, 0.94);
}

/* Coach-only alert markers: flagged choices / responses that trigger an alert. */
.question-choice-item--alert {
border-color: rgba(229, 62, 62, 0.55);
background: rgba(229, 62, 62, 0.10);
}

.question-choice-alert-flag,
.question-answer-alert-flag {
color: #ff5b5b !important;
}

.player-progress-row-answer--alert {
color: #ff5b5b !important;
font-weight: 600;
}

.progress-team-player-name {
font-weight: 600;
color: rgba(246, 251, 255, 0.96);
}

.question-choice-list {
display: grid;
gap: 10px;
margin: 0 0 18px;
padding: 0;
counter-reset: item;
}

.question-choice-list .question-choice-item {
list-style: none;
position: relative;
padding-left: 48px;
}

.question-choice-list .question-choice-item::before {
counter-increment: item;
content: counter(item);
position: absolute;
left: 14px;
top: 50%;
transform: translateY(-50%);
display: inline-flex;
align-items: center;
justify-content: center;
width: 24px;
height: 24px;
border-radius: 999px;
background: rgba(97, 199, 211, 0.14);
color: rgba(207, 237, 242, 0.96);
font-size: 0.78rem;
font-weight: 700;
}

.ctgrClr {
width: 18px;
height: 18px;
border-radius: 999px;
box-shadow: 0 0 0 5px rgba(255, 255, 255, 0.05);
justify-self: end;
}

/* Category cards (view.list.categories) — the colour is DATA, not a form field.
   The page used to render a disabled Coloris <input> showing the raw hex, which
   read as a broken text box; it is now a swatch + monospace hex label. */
.category-card-color-row {
display: flex;
align-items: center;
justify-content: space-between;
gap: 14px;
}

.category-card-color-label {
margin: 0;
font-size: 0.76rem;
line-height: 1.2;
text-transform: uppercase;
letter-spacing: 0.14em;
color: rgba(189, 205, 231, 0.74);
}

.category-card-color-value {
display: inline-flex;
align-items: center;
gap: 10px;
}

.category-card-swatch {
width: 22px;
height: 22px;
border-radius: 999px;
box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.06);
flex-shrink: 0;
}

.category-card-hex {
font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
font-size: 0.9rem;
font-weight: 700;
letter-spacing: 0.04em;
color: rgba(246, 251, 255, 0.94);
}

.team-overview-card,
.team-players-section,
.team-player-card {
position: relative;
overflow: hidden;
border: 1px solid rgba(160, 190, 235, 0.14);
background:
radial-gradient(circle at top right, rgba(73, 134, 207, 0.14), transparent 36%),
linear-gradient(180deg, rgba(14, 28, 84, 0.98), rgba(9, 19, 58, 0.98));
border-radius: 28px;
box-shadow: 0 24px 60px rgba(4, 10, 31, 0.22);
}

.team-overview-card::before,
.team-players-section::before,
.team-player-card::before {
content: "";
position: absolute;
inset: 0;
pointer-events: none;
background: linear-gradient(180deg, rgba(255,255,255,.04), transparent 22%);
}

.team-players-section-header {
position: relative;
padding: 18px 22px 14px;
background: transparent;
border: 0;
}

.team-players-section-body {
padding: 0 22px 22px;
}

.team-players-section-heading {
display: grid;
gap: 6px;
}

.team-players-section-heading h4 {
margin: 0;
font-size: clamp(1.15rem, 2vw, 1.55rem);
font-weight: 700;
color: rgba(246, 251, 255, 0.98);
}

.team-section-eyebrow {
font-size: 0.76rem;
line-height: 1.2;
text-transform: uppercase;
letter-spacing: 0.18em;
color: rgba(97, 199, 211, 0.96);
}

.team-player-grid {
row-gap: 10px;
}

.team-player-col {
display: flex;
}

.team-player-col .team-player-card {
width: 100%;
}

.team-player-card {
cursor: pointer;
transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease, background .18s ease;
}

.team-player-card:hover,
.team-player-card:focus-within {
transform: translateY(-3px);
border-color: rgba(97, 199, 211, 0.22);
box-shadow: 0 28px 70px rgba(4, 10, 31, 0.28);
}

.team-player-media {
display: block;
width: 100%;
height: 224px;
object-fit: cover;
border-radius: 20px 20px 0 0;
}

.team-player-media-placeholder {
height: 224px;
background: rgba(8, 16, 46, 0.7);
border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.team-player-card-body {
position: relative;
padding: 18px 18px 22px;
}

.team-player-card-title {
margin: 0 0 10px;
font-size: 1.05rem;
font-weight: 700;
line-height: 1.2;
color: rgba(246, 251, 255, 0.98);
}

.team-player-card-meta {
margin: 0;
color: rgba(224, 234, 246, 0.82);
line-height: 1.55;
}

.team-player-card-meta strong {
color: rgba(246, 251, 255, 0.92);
font-weight: 700;
}

.team-player-card-meta em {
font-style: normal;
color: rgba(207, 237, 242, 0.92);
}

.team-add-player-card .team-player-card-body {
display: grid;
align-content: center;
min-height: 156px;
}

.team-add-player-card .team-player-card-title {
font-size: 1.15rem;
}

.team-add-player-card .team-player-card-meta {
max-width: 18ch;
margin-left: auto;
margin-right: auto;
}

.player-shell-card,
.player-section-card,
.player-progress-hero-card,
.player-progress-chart-card,
.player-progress-list-card,
.player-progress-entry-card {
position: relative;
overflow: hidden;
border: 1px solid rgba(160, 190, 235, 0.14);
background: linear-gradient(180deg, rgba(10,15,27,.75), rgba(10,15,27,.35)), var(--glass);
border-radius: 28px;
box-shadow: 0 24px 60px rgba(4, 10, 31, 0.22);
}

.player-shell-card::before,
.player-section-card::before,
.player-progress-hero-card::before,
.player-progress-chart-card::before,
.player-progress-list-card::before,
.player-progress-entry-card::before {
content: "";
position: absolute;
inset: 0;
pointer-events: none;
background: transparent;
}

.player-shell .card-body,
.player-progress-shell .card-body {
position: relative;
}

.player-shell #playerAccordion > .player-section-card > .player-section-header,
.edit-player-shell #accordionExample > .player-section-card > .player-section-header,
.player-progress-shell #playerAccordion > .player-progress-list-card > .player-progress-list-header,
.player-section-header,
.player-progress-list-header {
padding: 0;
background: transparent !important;
border: 0 !important;
box-shadow: none !important;
}

.player-shell #playerAccordion > .player-section-card > .player-section-header .player-section-toggle,
.edit-player-shell #accordionExample > .player-section-card > .player-section-header .player-section-toggle,
.player-progress-shell #playerAccordion > .player-progress-list-card > .player-progress-list-header .player-section-toggle,
.player-section-toggle {
position: relative;
display: flex;
align-items: center;
justify-content: space-between;
width: 100%;
padding: 8px 0 10px;
border: 0;
font-weight: 700;
font-size: 1rem;
line-height: 1.2;
color: rgba(246, 251, 255, 0.98) !important;
text-decoration: none !important;
background: transparent;
border-radius: 0;
box-shadow: none;
transition: color .18s ease, transform .18s ease;
}

.player-shell #playerAccordion > .player-section-card > .player-section-header .player-section-toggle:hover,
.edit-player-shell #accordionExample > .player-section-card > .player-section-header .player-section-toggle:hover,
.player-progress-shell #playerAccordion > .player-progress-list-card > .player-progress-list-header .player-section-toggle:hover,
.player-section-toggle:hover {
color: rgba(246, 251, 255, 1) !important;
text-decoration: none !important;
background: transparent;
transform: translateY(-1px);
}

.player-section-title {
display: inline-flex;
align-items: center;
gap: 8px;
}

.player-shell #playerAccordion > .player-section-card > .player-section-header .player-section-title,
.edit-player-shell #accordionExample > .player-section-card > .player-section-header .player-section-title,
.player-progress-shell #playerAccordion > .player-progress-list-card > .player-progress-list-header .player-section-title {
display: inline-flex;
align-items: center;
min-height: 38px;
padding: 0.45rem 0.95rem;
border-radius: 999px;
background: rgba(154, 245, 87, 0.12);
border: 1px solid rgba(154, 245, 87, 0.12);
font-size: 1rem;
font-weight: 700;
letter-spacing: 0;
color: #9af557;
}

.player-shell #playerAccordion > .player-section-card > .player-section-header .player-section-toggle > .player-section-title,
.edit-player-shell #accordionExample > .player-section-card > .player-section-header .player-section-toggle > .player-section-title,
.player-progress-shell #playerAccordion > .player-progress-list-card > .player-progress-list-header .player-section-toggle > .player-section-title,
.player-shell #playerAccordion > .player-section-card > .player-section-header .player-section-toggle > .chev,
.edit-player-shell #accordionExample > .player-section-card > .player-section-header .player-section-toggle > .chev,
.player-progress-shell #playerAccordion > .player-progress-list-card > .player-progress-list-header .player-section-toggle > .chev {
margin-top: 0;
}

.player-shell #playerAccordion > .player-section-card > .player-section-header .player-section-title i,
.edit-player-shell #accordionExample > .player-section-card > .player-section-header .player-section-title i,
.player-progress-shell #playerAccordion > .player-progress-list-card > .player-progress-list-header .player-section-title i {
color: #9af557;
}

.player-shell #playerAccordion > .player-section-card > .player-section-header .chev,
.edit-player-shell #accordionExample > .player-section-card > .player-section-header .chev,
.player-progress-shell #playerAccordion > .player-progress-list-card > .player-progress-list-header .chev {
display: inline-flex;
align-items: center;
justify-content: center;
width: 34px;
height: 34px;
border-radius: 999px;
background: rgba(255,255,255,.06);
border: 1px solid rgba(255,255,255,.1);
color: rgba(246, 251, 255, 0.9);
transition: transform .2s ease, background .18s ease, border-color .18s ease;
}

.player-shell #playerAccordion > .player-section-card > .player-section-header .player-section-toggle[aria-expanded="true"],
.edit-player-shell #accordionExample > .player-section-card > .player-section-header .player-section-toggle[aria-expanded="true"],
.player-progress-shell #playerAccordion > .player-progress-list-card > .player-progress-list-header .player-section-toggle[aria-expanded="true"] {
background: transparent;
box-shadow: none;
}

.player-shell #playerAccordion > .player-section-card > .player-section-header .player-section-toggle[aria-expanded="true"] .chev,
.edit-player-shell #accordionExample > .player-section-card > .player-section-header .player-section-toggle[aria-expanded="true"] .chev,
.player-progress-shell #playerAccordion > .player-progress-list-card > .player-progress-list-header .player-section-toggle[aria-expanded="true"] .chev {
background: rgba(255,255,255,.09);
border-color: rgba(255,255,255,.14);
}

.player-shell #playerAccordion > .player-section-card > .player-section-header .player-section-toggle:hover .player-section-title,
.edit-player-shell #accordionExample > .player-section-card > .player-section-header .player-section-toggle:hover .player-section-title,
.player-progress-shell #playerAccordion > .player-progress-list-card > .player-progress-list-header .player-section-toggle:hover .player-section-title,
.player-shell #playerAccordion > .player-section-card > .player-section-header .player-section-toggle[aria-expanded="true"] .player-section-title,
.edit-player-shell #accordionExample > .player-section-card > .player-section-header .player-section-toggle[aria-expanded="true"] .player-section-title,
.player-progress-shell #playerAccordion > .player-progress-list-card > .player-progress-list-header .player-section-toggle[aria-expanded="true"] .player-section-title {
background: rgba(154, 245, 87, 0.16);
border-color: rgba(154, 245, 87, 0.18);
color: #b0fb72;
}

.player-shell #playerAccordion > .player-section-card > .player-section-header .player-section-toggle:hover .player-section-title i,
.edit-player-shell #accordionExample > .player-section-card > .player-section-header .player-section-toggle:hover .player-section-title i,
.player-progress-shell #playerAccordion > .player-progress-list-card > .player-progress-list-header .player-section-toggle:hover .player-section-title i,
.player-shell #playerAccordion > .player-section-card > .player-section-header .player-section-toggle[aria-expanded="true"] .player-section-title i,
.edit-player-shell #accordionExample > .player-section-card > .player-section-header .player-section-toggle[aria-expanded="true"] .player-section-title i,
.player-progress-shell #playerAccordion > .player-progress-list-card > .player-progress-list-header .player-section-toggle[aria-expanded="true"] .player-section-title i {
color: #b0fb72;
}

.player-shell #playerAccordion,
.edit-player-shell #accordionExample,
.player-progress-shell #playerAccordion {
display: grid;
gap: 14px;
}

.player-shell #playerAccordion > .player-section-card,
.edit-player-shell #accordionExample > .player-section-card,
.player-progress-shell #playerAccordion > .player-progress-list-card {
padding: 12px;
border-radius: 24px;
}

.edit-player-shell #accordionExample .player-section-header {
padding: 0 !important;
background: transparent !important;
border: 0 !important;
box-shadow: none !important;
}

.edit-player-shell #accordionExample .player-section-toggle {
display: flex !important;
align-items: center !important;
justify-content: space-between !important;
width: 100% !important;
padding: 8px 0 10px !important;
background: transparent !important;
border: 0 !important;
box-shadow: none !important;
text-decoration: none !important;
}

.edit-player-shell #accordionExample .player-section-title {
display: inline-flex !important;
align-items: center !important;
gap: 8px !important;
min-height: 38px !important;
padding: 0.45rem 0.95rem !important;
border-radius: 999px !important;
background: rgba(154, 245, 87, 0.12) !important;
border: 1px solid rgba(154, 245, 87, 0.12) !important;
color: #9af557 !important;
font-weight: 700 !important;
}

.edit-player-shell #accordionExample .player-section-title i {
color: #9af557 !important;
}

.edit-player-shell #accordionExample .player-section-toggle .chev {
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
width: 34px !important;
height: 34px !important;
border-radius: 999px !important;
background: rgba(255,255,255,.06) !important;
border: 1px solid rgba(255,255,255,.1) !important;
color: rgba(246, 251, 255, 0.9) !important;
}

.edit-player-shell #accordionExample .player-section-toggle:hover .player-section-title,
.edit-player-shell #accordionExample .player-section-toggle[aria-expanded="true"] .player-section-title {
background: rgba(154, 245, 87, 0.16) !important;
border-color: rgba(154, 245, 87, 0.18) !important;
color: #b0fb72 !important;
}

.edit-player-shell #accordionExample .player-section-toggle:hover .player-section-title i,
.edit-player-shell #accordionExample .player-section-toggle[aria-expanded="true"] .player-section-title i {
color: #b0fb72 !important;
}

.edit-player-shell .edit-player-accordion-card {
padding: 12px;
border-radius: 24px;
}

.edit-player-shell .edit-player-accordion-header {
padding: 0 !important;
background: transparent !important;
border: 0 !important;
box-shadow: none !important;
}

.edit-player-shell .edit-player-accordion-toggle {
display: flex !important;
align-items: center !important;
justify-content: space-between !important;
width: 100% !important;
padding: 8px 0 10px !important;
background: transparent !important;
border: 0 !important;
box-shadow: none !important;
text-decoration: none !important;
}

.edit-player-shell .edit-player-accordion-title {
display: inline-flex !important;
align-items: center !important;
gap: 8px !important;
min-height: 38px !important;
padding: 0.45rem 0.95rem !important;
border-radius: 999px !important;
background: rgba(154, 245, 87, 0.12) !important;
border: 1px solid rgba(154, 245, 87, 0.12) !important;
color: #9af557 !important;
font-weight: 700 !important;
}

.edit-player-shell .edit-player-accordion-title i {
color: #9af557 !important;
}

.edit-player-shell .edit-player-accordion-toggle .chev {
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
width: 34px !important;
height: 34px !important;
border-radius: 999px !important;
background: rgba(255,255,255,.06) !important;
border: 1px solid rgba(255,255,255,.1) !important;
color: rgba(246, 251, 255, 0.9) !important;
}

.edit-player-shell .edit-player-accordion-toggle:hover .edit-player-accordion-title,
.edit-player-shell .edit-player-accordion-toggle[aria-expanded="true"] .edit-player-accordion-title {
background: rgba(154, 245, 87, 0.16) !important;
border-color: rgba(154, 245, 87, 0.18) !important;
color: #b0fb72 !important;
}

.edit-player-shell .edit-player-accordion-toggle:hover .edit-player-accordion-title i,
.edit-player-shell .edit-player-accordion-toggle[aria-expanded="true"] .edit-player-accordion-title i {
color: #b0fb72 !important;
}

.player-shell #playerAccordion > .player-section-card .collapse.show,
.edit-player-shell #accordionExample > .player-section-card .collapse.show,
.player-progress-shell #playerAccordion > .player-progress-list-card .collapse.show {
margin-top: 12px;
border-top: 1px solid rgba(255,255,255,.08);
padding-top: 6px;
}

.player-section-card .card-body {
padding: 0 22px 22px;
}

/* Bento-like control sizing for player forms */
.player-shell .form-control:not(textarea):not(.form-control-sm):not([type="color"]),
.player-shell .form-select,
.edit-player-shell .form-control:not(textarea):not(.form-control-sm):not([type="color"]),
.edit-player-shell .form-select {
height: 56px;
min-height: 56px;
line-height: 1.2;
padding-top: 0.8rem;
padding-bottom: 0.8rem;
border-radius: 16px !important;
}

.player-shell .input-group-text,
.edit-player-shell .input-group-text {
height: 56px;
min-height: 56px;
border-radius: 16px 0 0 16px;
}

.player-shell textarea.form-control,
.edit-player-shell textarea.form-control {
min-height: 136px;
border-radius: 16px !important;
}

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

.player-detail-grid--team {
grid-template-columns: 1fr;
grid-template-rows: repeat(2, minmax(0, 1fr));
align-content: stretch;
}

.player-detail-card {
position: relative;
padding: 18px;
border-radius: 22px;
border: 1px solid rgba(255, 255, 255, 0.08);
background: linear-gradient(180deg, rgba(20, 38, 100, 0.18), rgba(9, 18, 54, 0.48));
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03);
overflow: hidden;
}

.player-detail-card::before {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(135deg, rgba(255, 255, 255, 0.04), transparent 58%);
pointer-events: none;
}

.player-detail-card--wide {
grid-column: 1 / -1;
}

.player-detail-label {
display: inline-flex;
align-items: center;
min-height: 32px;
padding: 0.35rem 0.8rem;
border-radius: 999px;
background: rgba(154, 245, 87, 0.12);
border: 1px solid rgba(154, 245, 87, 0.12);
color: #9af557;
font-size: 0.88rem;
font-weight: 700;
margin-bottom: 14px;
}

.player-detail-value {
position: relative;
z-index: 1;
font-size: 1.15rem;
line-height: 1.45;
font-weight: 700;
color: rgba(246, 251, 255, 0.98);
word-break: break-word;
}

.player-media-card {
display: flex;
align-items: center;
justify-content: center;
min-height: 100%;
border-radius: 24px;
border: 1px solid rgba(255, 255, 255, 0.08);
background: linear-gradient(180deg, rgba(20, 38, 100, 0.18), rgba(9, 18, 54, 0.48));
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03);
overflow: hidden;
}

.player-personal-photo .player-media-card {
height: 100%;
min-height: clamp(220px, 26vw, 320px);
}

.player-team-media-col .player-media-card {
height: clamp(220px, 26vw, 320px);
}

@media (min-width: 768px) {
  .player-personal-layout {
    align-items: stretch;
  }

  .player-personal-photo {
    display: flex;
  }

  .player-personal-photo .player-media-card {
    flex: 1 1 auto;
    height: auto;
    min-height: 0;
  }
}

@media (min-width: 768px) {
  .player-team-layout {
    align-items: stretch;
  }

  .player-team-details-col {
    display: flex;
  }

  .player-team-details-col .player-detail-grid--team {
    width: 100%;
    height: clamp(220px, 26vw, 320px);
  }

  .player-team-details-col .player-detail-grid--team .player-detail-card {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    min-height: 0;
  }
}

@media (max-width: 767.98px) {
  .player-detail-grid--team {
    grid-template-rows: none;
  }
}

.player-media-placeholder {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
height: 100%;
min-height: 0;
border-radius: 20px;
background: rgba(255, 255, 255, 0.03);
}

.player-media-image {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
border-radius: 18px;
}

.player-team-media-card {
min-height: 100%;
}

.player-team-media-image {
aspect-ratio: auto;
object-fit: cover;
}

.player-summary-layout {
  row-gap: 18px;
}

@media (min-width: 768px) {
  .player-summary-layout {
    display: flex;
    flex-wrap: nowrap;
    gap: 1rem;
  }

  .player-summary-layout > .player-info-panel,
  .player-summary-layout > .player-tags-panel {
    flex: 1 1 0;
    max-width: none;
  }
}

.player-info-panel,
.player-tags-panel {
padding: 18px 20px;
border-radius: 22px;
background: rgba(255, 255, 255, 0.05);
border: 1px solid rgba(255, 255, 255, 0.08);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03);
}

.player-info-panel p,
.player-tags-panel p {
color: rgba(224, 234, 246, 0.9);
}

.player-info-panel strong,
.player-tags-panel strong {
color: rgba(246, 251, 255, 0.96);
}

.player-tag-title {
font-size: 1rem;
line-height: 1.25;
}

.player-tag-help {
color: rgba(189, 205, 231, 0.74);
line-height: 1.45;
}

.player-tag-chip {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 6px 10px;
border-radius: 12px;
font-size: 0.82rem;
font-weight: 700;
line-height: 1;
}

.player-tag-chip-positive {
background: rgba(127, 255, 65, 0.12);
border: 1px solid rgba(127, 255, 65, 0.18);
color: #9aff57;
}

.player-tag-chip-warning {
background: rgba(255, 196, 0, 0.14);
border: 1px solid rgba(255, 196, 0, 0.18);
color: #ffc63d;
}

.player-tag-empty {
color: rgba(189, 205, 231, 0.74);
}

.player-radar-panel {
padding-top: 8px;
border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.player-radar-title {
color: rgba(246, 251, 255, 0.96);
font-weight: 700;
}

.player-radar-card {
background: rgba(8, 16, 46, 0.55);
border-radius: 22px;
box-shadow: none;
}

.player-progress-subsection-header {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
margin-bottom: 18px;
padding: 0 2px;
}

.player-progress-subsection-header--spaced {
margin-top: 26px;
}

.player-progress-subsection-copy {
display: flex;
flex-direction: column;
gap: 6px;
}

.player-progress-subsection-kicker {
font-size: 0.74rem;
line-height: 1;
letter-spacing: 0.2em;
text-transform: uppercase;
color: rgba(111, 210, 229, 0.9);
font-weight: 700;
}

.player-progress-subsection-title {
color: rgba(246, 251, 255, 0.98);
font-size: 1.9rem;
font-weight: 700;
line-height: 1.08;
}

.player-progress-card-grid {
row-gap: 14px;
margin-bottom: 8px;
}

.player-progress-subsection-actions {
margin-top: 10px;
}

.player-shell #collapseProgress .goal-card-panel,
.player-shell #collapseProgress .question-card-panel {
background:linear-gradient(180deg, rgba(10, 15, 27, .75), rgba(10, 15, 27, .35)), var(--glass);
border: 1px solid rgba(159, 187, 232, 0.14);
border-radius: 24px;
box-shadow: 0 22px 48px rgba(3, 10, 31, 0.16);
overflow: hidden;
}

.player-shell #collapseProgress .goal-card-panel .easy-card-header,
.player-shell #collapseProgress .question-card-panel .easy-card-header {
padding: 18px 20px 14px;
background: linear-gradient(180deg, rgba(10, 15, 27, .75), rgba(10, 15, 27, .35)), var(--glass);
border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.player-shell #collapseProgress .goal-card-panel .easy-card-header-subtitle,
.player-shell #collapseProgress .question-card-panel .easy-card-header-subtitle {
color: rgba(111, 210, 229, 0.82);
letter-spacing: 0.18em;
font-size: 0.72rem;
text-transform: uppercase;
}

.player-shell #collapseProgress .goal-card-panel .easy-card-header-title,
.player-shell #collapseProgress .question-card-panel .easy-card-header-title {
font-size: 1rem;
line-height: 1.28;
color: rgba(246, 251, 255, 0.98);
}

.player-shell #collapseProgress .question-card-panel .easy-card-header-meta-secondary {
background: rgba(255, 255, 255, 0.06);
border: 1px solid rgba(255, 255, 255, 0.08);
color: rgba(223, 234, 251, 0.9);
}

.player-shell #collapseProgress .goal-card-body,
.player-shell #collapseProgress .question-card-body {
padding: 18px 20px 20px;
}

.player-shell #collapseProgress .goal-card-description,
.player-shell #collapseProgress .question-card-description {
color: rgba(223, 234, 251, 0.9);
line-height: 1.5;
margin-bottom: 10px;
}

.player-shell #collapseProgress .goal-card-date,
.player-shell #collapseProgress .question-card-date {
margin-bottom: 0;
}

.player-shell #collapseProgress .goal-card-date .text-muted,
.player-shell #collapseProgress .question-card-date .text-muted {
color: rgba(189, 205, 231, 0.7) !important;
}

.player-shell #collapseProgress .question-choice-list {
margin-bottom: 12px !important;
}

.player-shell #collapseProgress .question-choice-item {
background: rgba(255, 255, 255, 0.04);
border-color: rgba(255, 255, 255, 0.06);
color: rgba(235, 242, 252, 0.92);
border-radius: 14px;
}

.player-progress-hero-body {
padding: 22px;
}

.player-progress-chart-card .card-header,
.player-progress-entry-card .card-header {
background: transparent !important;
border: 0;
padding: 18px 22px 14px;
}

.player-progress-chart-card .card-body {
padding: 0 22px 22px;
}

.player-progress-list-card > .card-body {
padding: 0 0 18px;
}

.player-progress-list-shell .mx-3 {
margin-left: 22px !important;
margin-right: 22px !important;
}

.player-progress-entry-card .list-group-item {
background: rgba(255, 255, 255, 0.05);
border-color: rgba(255, 255, 255, 0.08);
}

.player-progress-entry-card .text-muted,
.player-shell .text-muted,
.player-progress-shell .text-muted {
color: rgba(189, 205, 231, 0.74) !important;
}

.player-progress-entry-card h6,
.player-progress-chart-card h6,
.player-shell h5 {
color: rgba(246, 251, 255, 0.96);
}

.player-shell .player-progress-row,
.player-progress-shell .player-progress-row {
display: grid !important;
grid-template-columns: minmax(0, 1.75fr) minmax(220px, 1fr);
gap: 18px;
padding: 1.25rem 1.5rem;
border-color: rgba(255, 255, 255, 0.08) !important;
background: linear-gradient(180deg, rgba(255, 255, 255, 0.025), rgba(255, 255, 255, 0.01));
}

.player-shell .player-progress-row:nth-child(even),
.player-progress-shell .player-progress-row:nth-child(even) {
background: linear-gradient(180deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.015));
}

.player-shell .player-progress-row-main,
.player-shell .player-progress-row-side,
.player-progress-shell .player-progress-row-main,
.player-progress-shell .player-progress-row-side {
min-width: 0;
}

.player-shell .player-progress-row-title,
.player-progress-shell .player-progress-row-title {
margin-bottom: 0.45rem;
color: rgba(246, 251, 255, 0.98);
font-size: 1rem;
font-weight: 700;
line-height: 1.35;
}

.player-shell .player-progress-row-desc,
.player-shell .player-progress-row-note,
.player-shell .player-progress-row-answer,
.player-progress-shell .player-progress-row-desc,
.player-progress-shell .player-progress-row-note,
.player-progress-shell .player-progress-row-answer {
color: rgba(194, 209, 235, 0.8);
font-size: 0.95rem;
line-height: 1.55;
}

.player-shell .player-progress-row-metric,
.player-progress-shell .player-progress-row-metric {
display: flex;
flex-direction: column;
gap: 4px;
margin-bottom: 0.4rem;
}

.player-shell .player-progress-row-label,
.player-progress-shell .player-progress-row-label {
color: rgba(226, 236, 252, 0.94);
font-size: 1rem;
font-weight: 700;
}

.player-shell .player-progress-row-value,
.player-progress-shell .player-progress-row-value {
color: #b0fb72;
font-size: 1.05rem;
font-weight: 800;
}

.player-shell .player-progress-row-answer-list,
.player-progress-shell .player-progress-row-answer-list {
display: flex;
flex-direction: column;
gap: 4px;
}

.player-progress-shell .tabs-glass {
background: linear-gradient(180deg, rgba(10,15,27,.75), rgba(10,15,27,.35)), var(--glass);
border: 1px solid rgba(159, 187, 232, 0.14);
border-radius: 20px;
padding: .5rem;
box-shadow: 0 18px 36px rgba(3, 10, 31, 0.14);
display: flex;
gap: .45rem;
justify-content: center;
align-items: center;
flex-wrap: wrap;
overflow: visible;
}

.player-progress-shell .tabs-glass .nav-item {
margin: 0;
}

.player-progress-shell .tabs-glass .nav-link {
display: inline-flex;
align-items: center;
gap: .5rem;
min-height: 46px;
padding: .7rem 1.1rem;
font-weight: 800;
letter-spacing: 0;
color: rgba(226, 236, 252, 0.9);
border: 1px solid rgba(255, 255, 255, .1);
border-radius: 15px;
background: rgba(255, 255, 255, .06);
transition: transform .12s ease, box-shadow .18s ease, background .18s ease, border .18s ease, color .18s ease;
}

.player-progress-shell .tabs-glass .nav-link:hover {
transform: translateY(-1px);
background: rgba(255, 255, 255, .10);
border-color: rgba(159, 187, 232, .2);
color: #fff;
text-decoration: none;
}

.player-progress-shell .tabs-glass .nav-link.active {
    color: #9af557;
    background: linear-gradient(180deg, rgba(90, 134, 74, .34), rgba(58, 92, 53, .3));
    border-color: rgba(154, 245, 87, .24);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06), 0 12px 28px rgba(3, 10, 33, .18), 0 0 0 1px rgba(154, 245, 87, .08);
    transform: translateY(-1px);
}

.player-progress-shell .tabs-glass .date-input {
height: 46px;
border-radius: 15px;
border: 1px solid rgba(159, 187, 232, .14);
background: rgba(255, 255, 255, .06);
color: rgba(246, 251, 255, 0.96);
padding: 0 .9rem;
width: 160px;
}

.player-progress-shell .tabs-glass .date-input:focus {
border-color: rgba(97, 199, 211, .3);
background: rgba(255, 255, 255, .10);
}

@media (max-width: 767px) {
.easy-card-header {
flex-direction: column;
align-items: flex-start;
}

.player-shell .player-progress-row,
.player-progress-shell .player-progress-row {
grid-template-columns: 1fr;
padding: 1rem;
}

.player-detail-grid,
.player-detail-grid--team {
grid-template-columns: 1fr;
}

.easy-card-header-meta,
.easy-card-header-meta-secondary {
white-space: normal;
}

.progress-team-list,
.goal-card-body,
.question-card-body,
.category-card-body,
.goal-card-footer,
.question-card-footer,
.category-card-footer {
padding-left: 18px;
padding-right: 18px;
}

.progress-team-item {
align-items: flex-start !important;
flex-direction: column;
gap: 12px;
}

.goal-card-footer,
.question-card-footer,
.category-card-footer {
justify-content: stretch;
flex-direction: column;
}

.goal-card-footer .btn-sm,
.question-card-footer .btn-sm,
.category-card-footer .btn-sm,
.progress-team-item .btn-sm {
width: 100%;
}

.team-players-section-body {
padding-left: 18px;
padding-right: 18px;
}

.team-player-media,
.team-player-media-placeholder {
height: 208px;
}

.player-section-card .card-body,
.player-progress-hero-body,
.player-progress-chart-card .card-body {
padding-left: 18px;
padding-right: 18px;
}

.player-progress-list-shell .mx-3 {
margin-left: 18px !important;
margin-right: 18px !important;
}
}

/* List-group en mode dark glass */
.list-group-item {
background: rgba(255,255,255,.05);
color: var(--ink);
border-color: rgba(255,255,255,.12);
}

/* Pied de carte cohérent */
.card-footer {
background: rgba(255,255,255,.05);
border-top: 1px solid var(--glass-b);
}

/* Boutons de la page */
.page-actions .btn-easyidp { margin-right: .5rem; }
.btn.btn-easyidp-danger { border-radius: 4px !important; }

/* Drag‐and‐drop zone styling */
#dropZone {
border: 2px dashed var(--color4);
border-radius: 4px;
padding: 2rem;
text-align: center;
color: var(--color4);
transition: background 0.2s, border-color 0.2s;
margin-bottom: 1rem;
}

#dropZone.dragover {
background: rgba(0, 123, 255, 0.1);
border-color: #007bff;
color: #007bff;
}

textarea#jsonInput {
font-family: monospace;
resize: vertical;
}
.simplebar-content {
color: var(--color4);}
.coloris{
color: var(--color3);
}/* ==== Disabled / Read-only controls (glass theme) ==== */

/* Inputs & selects */
input:disabled,
textarea:disabled,
select:disabled,
.form-control:disabled,
.form-select:disabled,
.coloris:disabled,
input[readonly],
textarea[readonly],
.form-control[readonly] {
background: rgba(255,255,255,.12) !important;
border-color: rgba(255,255,255,.18) !important;
color: var(--muted) !important;
-webkit-text-fill-color: var(--muted) !important; /* Safari */
}

/* Cursors: blocked for disabled, default for readonly */
input:disabled,
textarea:disabled,
select:disabled,
.form-control:disabled,
.form-select:disabled,
.coloris:disabled {
cursor: not-allowed !important;
pointer-events: none; /* prevent color picker / popups */
}
input[readonly],
textarea[readonly],
.form-control[readonly] {
cursor: default !important;
}

/* Placeholders while disabled / readonly */
input:disabled::placeholder,
textarea:disabled::placeholder,
.form-control:disabled::placeholder,
input[readonly]::placeholder,
textarea[readonly]::placeholder,
.form-control[readonly]::placeholder {
color: rgba(255,255,255,.45) !important;
}

/* Kill focus/hover effects when disabled/readonly */
input:disabled:focus,
textarea:disabled:focus,
select:disabled:focus,
.form-control:disabled:focus,
.form-select:disabled:focus,
.coloris:disabled:focus,
input[readonly]:focus,
textarea[readonly]:focus,
.form-control[readonly]:focus {
box-shadow: none !important;
outline: none !important;
background: rgba(255,255,255,.12) !important;
border-color: rgba(255,255,255,.18) !important;
color: #fff;
}

/* Keep input-group icon subdued when the control is disabled */
.input-group-text:has(+ .form-control:disabled),
.input-group-text:has(+ .form-control[readonly]),
.input-group-text:has(+ .form-select:disabled) {
opacity: .6;
}

/* Buttons (general) */
.btn:disabled,
.btn-easyidp:disabled,
.btn-easyidp-contrast:disabled,
.btn-outline-danger:disabled,
.btn-secondary:disabled {
opacity: .65 !important;
filter: saturate(.7) !important;
cursor: not-allowed !important;
box-shadow: none !important;
}
.disabled-card-subclass{
  cursor: not-allowed !important;
  background: linear-gradient(180deg, rgba(125, 129, 138, 0.75), rgba(96, 99, 108, 0.35)), var(--glass) !important;
}

/* ===== Primary buttons ===== */
.tag-easyidp{border: 1px solid var(--glass-b); padding:.25rem .5rem;
  margin-bottom:5px;
  font-size:12px;
border-radius:5px;
font-weight:200; letter-spacing:.3px;
background: linear-gradient(180deg, var(--brand), #031938);
color:#fff;
box-shadow: 0 10px 24px -8px rgba(4,34,77,.75);
transition: transform .12s ease, box-shadow .2s ease, filter .2s ease;
white-space: nowrap;
}
.tag-easyidp:hover{ transform: translateY(-1px); filter: brightness(1.05); text-decoration:none }

.tag-easyidp-contrast{
border: 1px solid var(--glass-b); padding:.25rem .5rem;
margin-bottom:5px;
font-size:12px;
border-radius:5px;
padding:.25rem .5rem; font-weight:200; letter-spacing:.3px; color:#fff;
background: rgba(255,255,255,.08); border: 1px solid var(--glass-b);
box-shadow: 0 10px 24px -8px rgba(4,34,77,.55);
transition: transform .12s ease, box-shadow .2s ease, filter .2s ease, background .2s ease;
}
.tag-easyidp-contrast:hover{ transform: translateY(-1px); background: rgba(255,255,255,.12); }

.tag-easyidp-danger{
padding:.25rem .5rem; font-weight:200; letter-spacing:.3px; color:#fff;
background: rgba(228, 12, 12, 0.75); border: 1px solid var(--glass-b);
box-shadow: 0 10px 24px -8px rgba(4,34,77,.55);
transition: transform .12s ease, box-shadow .2s ease, filter .2s ease, background .2s ease;
}
.tag-easyidp-danger:hover{ transform: translateY(-1px); filter: brightness(1.05); text-decoration:none }

.tag-easyidp-secondary{
padding:.25rem .5rem; font-weight:200; letter-spacing:.3px; color:#fff;
background: rgba(128, 128, 128, 0.75); border: 1px solid var(--glass-b);
box-shadow: 0 10px 24px -8px rgba(4,34,77,.55);
transition: transform .12s ease, box-shadow .2s ease, filter .2s ease, background .2s ease;
}
.tag-easyidp-secondary:hover{ transform: translateY(-1px); filter: brightness(1.05); text-decoration:none }
.pwd-toggle .input-with-icon .toggle-eye{
position:absolute; right:20px; transform: translateY(-135%)  translateX(-10%);
color: rgba(255,255,255,.8); cursor:pointer; padding:6px; border-radius:8px;
transition: background .15s ease, transform .12s ease;
}
.pwd-toggle .input-with-icon .toggle-eye:hover{ background: rgba(255,255,255,.08); transform: translateY(-135%)  translateX(-10%); }

/* Shared utility classes for cross-view style deduplication */
.u-mt-18{margin-top:18px}
.u-quote-block{max-width:780px;margin:16px auto 0}
.u-micro-trust{margin-top:10px;opacity:.85;font-size:.9rem}
.u-link-white-no-underline{text-decoration:none;color:#fff}
.u-cta-mt-16{margin-top:16px}
.u-gap-35{gap:.35rem}
.u-manage-link{text-decoration:underline;cursor:pointer;color:#007bff!important}
.u-tablist-border-0{border:0}
.u-pe-none{pointer-events:none}
.u-hidden{display:none}
.u-color-white{color:#fff}
.u-gap-50{gap:.5rem}
.u-gap-75{gap:.75rem}
.u-overflow-hidden{overflow:hidden}
.u-h40-pointer{height:40px;cursor:pointer}
.u-chart-preview{display:block;width:100%;max-width:300px;height:auto;margin:0 auto}
.u-th-explorer{text-align:left;padding:8px;border-bottom:1px solid #555}
.u-td-explorer{padding:8px;border-bottom:1px solid #555}
.u-table-explorer{width:100%;border-collapse:collapse;min-width:900px}
.u-table-scroll{overflow:auto;border:1px solid #555;border-radius:8px}
.u-pre-error{white-space:pre-wrap;color:#ffb4b4;background:#3b1e1e;border:1px solid #8b0000;padding:12px;border-radius:6px;margin:12px}
.u-flex-center-row{width:100%;display:flex;justify-content:center}
.u-color-white-link{color:white;text-decoration:none}
.u-border-top-glass{border-top:1px solid rgba(255,255,255,.08)}
.u-flex-gap-6{display:flex;gap:6px}
.u-gap-65{gap:.65rem}
.u-gap-nowrap{gap:.35rem;white-space:nowrap}
.u-img-cover{object-fit:cover;padding:0}
.u-scroll-320{max-height:320px;overflow:auto}
.u-dropzone{border:2px dashed #ccc;text-align:center}
.u-text-none{text-decoration:none}
.u-print-frame{position:fixed;left:-10000px;top:-10000px;width:900px;height:1200px}
.u-mb-12{margin-bottom:12px}
.u-m-0{margin:0}
.u-grid-full{grid-column:1 / -1}
.u-mw-520{max-width:520px}
.u-mw-320{min-width:320px}
.u-spider-wrapper{width:fit-content;max-width:100%;margin:0 auto;gap:8px}
.u-fs-105{font-size:1.05rem}
.u-mw-900-center{max-width:900px;margin:0 auto}
.u-mt-14{margin-top:14px}
.u-minw-full-mt-8{min-width:100%;margin-top:8px}
.u-chart-canvas-300{display:block;width:300px;height:300px}
.u-scroll-min0{min-height:0;overflow:auto}
.u-scroll-min0-dark{min-height:0;overflow:auto;background-color:rgba(0,0,0,.2)}
.u-shell-1200{max-width:1200px;margin:24px auto;font-family:system-ui,Arial,sans-serif}
.u-mb-8{margin-bottom:8px}
.u-my-24-8{margin:24px 0 8px}
.u-w-3p{width:3%}
.u-h-220{height:220px}
.u-clr-accent{color:rgb(0,165,204)}

/* ── Per-page contextual help card (coach pages) ───────────────────────── */
.page-help-container {
  margin-top: 18px;
  margin-bottom: -6px;
}
.page-help-card {
  overflow: hidden;
}
.page-help-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  width: 100%;
  padding: 14px 18px;
  background: transparent;
  border: 0;
  color: rgba(246, 251, 255, 0.94);
  text-align: left;
  cursor: pointer;
}
.page-help-toggle:focus { outline: none; }
.page-help-toggle-main {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}
.page-help-icon {
  font-size: 1.15rem;
  color: #58a6ff;
  flex: 0 0 auto;
}
.page-help-toggle-text { display: flex; flex-direction: column; min-width: 0; }
.page-help-title { font-weight: 600; }
.page-help-subtitle {
  font-size: 0.78rem;
  color: rgba(236, 243, 255, 0.55);
}
.page-help-chevron {
  flex: 0 0 auto;
  transition: transform 0.2s ease;
  color: rgba(236, 243, 255, 0.6);
}
.page-help-toggle:not(.collapsed) .page-help-chevron { transform: rotate(180deg); }
.page-help-inner {
  padding: 12px 18px 16px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  color: rgba(246, 251, 255, 0.9);
  line-height: 1.55;
}
.page-help-intro { margin: 0 0 8px; }
.page-help-steps { margin: 6px 0 4px 1.1rem; padding: 0; }
.page-help-steps li { margin-bottom: 5px; }
.page-help-footer {
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}
.page-help-fulllink {
  font-size: 0.85rem;
  color: #58a6ff;
  text-decoration: none;
}
.page-help-fulllink:hover { text-decoration: underline; }