* {
box-sizing: border-box;
}
html,
body {
min-height: 100%;
margin: 0;
}
body {
display: grid;
grid-template-columns: 260px 1fr;
background: #262522;
color: #f4f4f4;
font-family: Arial, Helvetica, sans-serif;
}
.sidebar {
min-height: 100vh;
padding: 24px 18px;
border-right: 1px solid #55514c;
background: #211f1d;
}
.brand {
margin-bottom: 28px;
}
.brand h1 {
margin: 0 0 6px;
color: #81b64c;
font-size: 22px;
}
.brand p {
margin: 0;
color: #a99878;
font-size: 12px;
}
.navigation {
display: grid;
gap: 8px;
}
.nav-button {
width: 100%;
padding: 12px 14px;
border: 1px solid transparent;
border-radius: 8px;
background: transparent;
color: #f4f4f4;
font-size: 14px;
text-align: left;
cursor: pointer;
}
.nav-button:hover,
.nav-button.active {
border-color: #81b64c;
background: #34312e;
color: #b8df78;
}
.workspace {
min-width: 0;
}
.topbar {
min-height: 105px;
padding: 26px 34px;
display: flex;
align-items: center;
justify-content: space-between;
border-bottom: 1px solid #44413d;
background: #312e2b;
}
.topbar h2 {
margin: 0 0 5px;
color: #81b64c;
font-size: 27px;
}
.topbar p {
margin: 0;
color: #b8b6b2;
font-size: 14px;
}
.version {
padding: 7px 11px;
border: 1px solid #55514c;
border-radius: 20px;
color: #b8d89a;
font-size: 12px;
}
.content {
padding: 34px;
}
.welcome-card,
.dashboard-card {
border: 1px solid #4a4743;
border-radius: 12px;
background: #312e2b;
}
.welcome-card {
margin-bottom: 24px;
padding: 25px;
}
.welcome-card h3,
.dashboard-card h3 {
margin: 0 0 8px;
color: #a9d477;
}
.welcome-card p,
.dashboard-card p {
margin: 0;
color: #b8b6b2;
line-height: 1.5;
}
.card-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 18px;
}
.dashboard-card {
min-height: 145px;
padding: 22px;
}
@media (max-width: 800px) {
body {
grid-template-columns: 1fr;
}
.sidebar {
min-height: auto;
}
.card-grid {
grid-template-columns: 1fr;
}
}
.settings-form {
display: grid;
gap: 20px;
}
.settings-card {
padding: 22px;
border: 1px solid #4a4743;
border-radius: 12px;
background: #312e2b;
}
.settings-card h3 {
margin: 0 0 18px;
color: #a9d477;
}
.settings-card label {
display: grid;
gap: 7px;
margin-bottom: 16px;
color: #d5d3cf;
font-size: 13px;
font-weight: 700;
}
.settings-card label:last-child {
margin-bottom: 0;
}
.settings-card input,
.settings-card textarea {
width: 100%;
padding: 11px 12px;
border: 1px solid #55514c;
border-radius: 7px;
outline: none;
background: #242220;
color: #f4f4f4;
font: inherit;
}
.settings-card input:focus,
.settings-card textarea:focus {
border-color: #81b64c;
}
.settings-card textarea {
resize: vertical;
}
.settings-actions {
display: flex;
align-items: center;
gap: 12px;
}
.settings-actions button {
padding: 11px 18px;
border: 1px solid #81b64c;
border-radius: 7px;
background: #81b64c;
color: #160f05;
font-weight: 800;
cursor: pointer;
}
.settings-actions .secondary-button {
background: transparent;
color: #b8df78;
}
.settings-actions button:hover {
opacity: 0.88;
}
.settings-status {
color: #81b64c;
font-size: 13px;
font-weight: 700;
}
.builder-layout {
display: grid;
gap: 20px;
}
.builder-options {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 12px;
margin-bottom: 18px;
}
.checkbox-label {
display: flex !important;
grid-template-columns: none !important;
align-items: center;
gap: 9px !important;
margin: 0 !important;
padding: 11px;
border: 1px solid #4a4743;
border-radius: 7px;
background: #242220;
cursor: pointer;
}
.checkbox-label input {
width: auto;
margin: 0;
}
.primary-action,
.small-button {
padding: 10px 16px;
border: 1px solid #81b64c;
border-radius: 7px;
background: #81b64c;
color: #160f05;
font-weight: 800;
cursor: pointer;
}
.output-heading {
display: flex;
align-items: center;
justify-content: space-between;
gap: 15px;
margin-bottom: 15px;
}
.output-heading h3 {
margin: 0;
}
.code-output {
width: 100%;
padding: 14px;
border: 1px solid #55514c;
border-radius: 7px;
background: #080603;
color: #f4f4f4;
font-family: Consolas, "Courier New", monospace;
font-size: 12px;
line-height: 1.5;
resize: vertical;
}
@media (max-width: 700px) {
.builder-options {
grid-template-columns: 1fr;
}
}
.builder-actions {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 12px;
}
.secondary-action {
padding: 10px 16px;
border: 1px solid #81b64c;
border-radius: 7px;
background: transparent;
color: #e8c676;
font-weight: 800;
cursor: pointer;
}
.secondary-action:hover {
background: #34312e;
}
.template-grid {
display: grid;
grid-template-columns: repeat(
2,
minmax(0, 1fr)
);
gap: 18px;
}
.template-card {
padding: 22px;
border: 1px solid #4a4743;
border-radius: 12px;
background: #312e2b;
}
.template-card h3 {
margin: 0 0 10px;
color: #a9d477;
}
.template-title {
margin: 0 0 12px;
color: #f4f4f4;
font-weight: 700;
}
.template-preview {
min-height: 65px;
margin: 0 0 18px;
color: #b8b6b2;
line-height: 1.5;
}
.template-actions {
display: flex;
gap: 10px;
}
.template-actions button {
padding: 9px 14px;
border: 1px solid #81b64c;
border-radius: 7px;
background: transparent;
color: #e8c676;
font-weight: 700;
cursor: pointer;
}
.template-actions button:hover {
background: #81b64c;
color: #160f05;
}
.delete-template-button {
border-color: #9c4d42 !important;
color: #e2a099 !important;
}
@media (max-width: 800px) {
.template-grid {
grid-template-columns: 1fr;
}
}
.prospect-manager {
display: grid;
gap: 20px;
}
.prospect-form-grid {
display: grid;
grid-template-columns: repeat(
2,
minmax(0, 1fr)
);
gap: 16px;
}
.settings-card select {
width: 100%;
padding: 11px 12px;
border: 1px solid #55514c;
border-radius: 7px;
outline: none;
background: #242220;
color: #f4f4f4;
font: inherit;
}
.settings-card select:focus {
border-color: #81b64c;
}
.prospect-form-actions {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 12px;
}
.prospect-list-heading {
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
margin-bottom: 18px;
}
.prospect-list-heading h3 {
margin: 0;
}
.prospect-list-heading input {
width: min(320px, 100%);
}
.prospect-grid {
display: grid;
grid-template-columns: repeat(
2,
minmax(0, 1fr)
);
gap: 16px;
}
.prospect-card {
padding: 18px;
border: 1px solid #4a4743;
border-radius: 10px;
background: #242220;
}
.prospect-card-header {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 12px;
}
.prospect-card h3 {
margin: 0 0 4px;
}
.prospect-card h3 a {
color: #a9d477;
text-decoration: none;
}
.prospect-card h3 a:hover {
text-decoration: underline;
}
.prospect-display-name {
margin: 0;
color: #b8b6b2;
font-size: 13px;
}
.prospect-priority {
color: #81b64c;
white-space: nowrap;
}
.prospect-details {
margin-top: 15px;
}
.prospect-details p {
margin: 7px 0;
color: #c9bda4;
font-size: 13px;
}
.prospect-notes {
margin-top: 14px;
padding: 12px;
border-left: 3px solid #81b64c;
background: #312e2b;
color: #d8ccb2;
font-size: 13px;
line-height: 1.5;
white-space: pre-wrap;
}
.prospect-actions {
display: flex;
gap: 10px;
margin-top: 16px;
}
.prospect-actions button {
padding: 8px 13px;
border: 1px solid #81b64c;
border-radius: 6px;
background: transparent;
color: #e8c676;
font-weight: 700;
cursor: pointer;
}
.prospect-actions button:hover {
background: #81b64c;
color: #160f05;
}
.delete-prospect-button {
border-color: #9c4d42 !important;
color: #e2a099 !important;
}
.error-status {
color: #e2a099 !important;
}
@media (max-width: 800px) {
.prospect-form-grid,
.prospect-grid {
grid-template-columns: 1fr;
}
.prospect-list-heading {
align-items: stretch;
flex-direction: column;
}
}
.member-manager {
display: grid;
gap: 20px;
}
.member-form-grid {
display: grid;
grid-template-columns: repeat(
2,
minmax(0, 1fr)
);
gap: 16px;
}
.member-club-fieldset {
margin: 0 0 18px;
padding: 16px;
border: 1px solid #4a4743;
border-radius: 8px;
}
.member-club-fieldset legend {
padding: 0 8px;
color: #a9d477;
font-size: 13px;
font-weight: 800;
}
.member-club-options,
.member-participation-options {
display: grid;
grid-template-columns: repeat(
2,
minmax(0, 1fr)
);
gap: 12px;
}
.member-participation-options {
margin-bottom: 18px;
}
.member-form-actions {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 12px;
}
.member-list-heading {
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
margin-bottom: 18px;
}
.member-list-heading h3 {
margin: 0;
}
.member-list-heading input {
width: min(320px, 100%);
}
.member-grid {
display: grid;
grid-template-columns: repeat(
2,
minmax(0, 1fr)
);
gap: 16px;
}
.member-card {
padding: 18px;
border: 1px solid #4a4743;
border-radius: 10px;
background: #242220;
}
.member-card-header {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 12px;
}
.member-card h3 {
margin: 0 0 4px;
}
.member-card h3 a {
color: #a9d477;
text-decoration: none;
}
.member-card h3 a:hover {
text-decoration: underline;
}
.member-display-name {
margin: 0;
color: #b8b6b2;
font-size: 13px;
}
.member-role-badge {
padding: 6px 9px;
border: 1px solid #81b64c;
border-radius: 999px;
color: #e8c676;
font-size: 11px;
font-weight: 800;
white-space: nowrap;
}
.member-details {
margin-top: 15px;
}
.member-details p {
margin: 7px 0;
color: #c9bda4;
font-size: 13px;
}
.member-flags {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin-top: 13px;
}
.member-flags span {
padding: 5px 8px;
border: 1px solid #55514c;
border-radius: 999px;
color: #d9c597;
font-size: 11px;
}
.member-notes,
.member-recognition {
margin-top: 14px;
padding: 12px;
border-left: 3px solid #81b64c;
background: #312e2b;
color: #d8ccb2;
font-size: 13px;
line-height: 1.5;
white-space: pre-wrap;
}
.member-recognition {
border-left-color: #8d6ce0;
}
.member-notes strong,
.member-recognition strong {
display: block;
margin-bottom: 6px;
color: #a9d477;
}
.member-actions {
display: flex;
gap: 10px;
margin-top: 16px;
}
.member-actions button {
padding: 8px 13px;
border: 1px solid #81b64c;
border-radius: 6px;
background: transparent;
color: #e8c676;
font-weight: 700;
cursor: pointer;
}
.member-actions button:hover {
background: #81b64c;
color: #160f05;
}
.delete-member-button {
border-color: #9c4d42 !important;
color: #e2a099 !important;
}
@media (max-width: 800px) {
.member-form-grid,
.member-grid,
.member-club-options,
.member-participation-options {
grid-template-columns: 1fr;
}
.member-list-heading {
align-items: stretch;
flex-direction: column;
}
}
.command-brand { display:flex; align-items:center; gap:12px; }
.brand-mark { width:40px; height:40px; display:grid; place-items:center; border:1px solid #81b64c; border-radius:50%; color:#f0d28a; font-weight:900; background:radial-gradient(circle at 35% 25%, #4c3717, #211f1d 68%); box-shadow:0 0 22px rgba(214,168,75,.18), inset 0 0 16px rgba(214,168,75,.12); }
.command-center { position:relative; isolation:isolate; overflow:hidden; min-height:calc(100vh - 173px); }
.command-center::before { content:""; position:absolute; inset:-30%; z-index:-2; background:radial-gradient(circle at 18% 12%, rgba(214,168,75,.14), transparent 27%), radial-gradient(circle at 82% 72%, rgba(72,117,150,.10), transparent 26%), linear-gradient(135deg, #262522, #100b05 55%, #080705); animation:commandDrift 14s ease-in-out infinite alternate; }
.command-center::after { content:""; position:absolute; inset:0; z-index:-1; opacity:.16; background-image:linear-gradient(rgba(214,168,75,.16) 1px, transparent 1px), linear-gradient(90deg, rgba(214,168,75,.10) 1px, transparent 1px); background-size:48px 48px; mask-image:linear-gradient(to bottom, #000, transparent 90%); }
.scanline-layer { pointer-events:none; position:absolute; inset:0; z-index:10; opacity:.28; background:linear-gradient(to bottom, transparent 0, rgba(91,215,80,.08) 48%, rgba(151,255,135,.30) 50%, rgba(91,215,80,.08) 52%, transparent 100%); background-size:100% 170px; animation:scanSweep 7s linear infinite; }
.command-hero { display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:24px; padding:24px; margin-bottom:20px; border:1px solid rgba(214,168,75,.42); border-radius:18px; background:linear-gradient(135deg, rgba(32,24,13,.93), rgba(15,11,7,.92)); box-shadow:0 20px 55px rgba(0,0,0,.28), inset 0 1px rgba(255,255,255,.035); }
.club-emblem-wrap { position:relative; width:92px; height:92px; display:grid; place-items:center; }
.emblem-rings { position:absolute; inset:0; border:1px solid rgba(214,168,75,.55); border-radius:50%; box-shadow:0 0 28px rgba(214,168,75,.19); animation:emblemPulse 3s ease-in-out infinite; }
.emblem-rings::before,.emblem-rings::after { content:""; position:absolute; border-radius:50%; border:1px dashed rgba(214,168,75,.32); }
.emblem-rings::before { inset:8px; animation:slowSpin 18s linear infinite; }
.emblem-rings::after { inset:-6px; border-style:solid; border-color:transparent rgba(214,168,75,.23); animation:slowSpin 12s linear infinite reverse; }
.club-logo,.club-logo-fallback { width:70px; height:70px; border-radius:50%; object-fit:cover; border:2px solid #81b64c; background:#0c0905; box-shadow:0 0 24px rgba(214,168,75,.22); }
.club-logo-fallback { display:grid; place-items:center; color:#e8c676; font-size:16px; font-weight:900; letter-spacing:1px; }
.club-logo-fallback[hidden],.club-logo[hidden] { display:none; }
.eyebrow,.panel-kicker { margin:0 0 6px; color:#8ca8b8; font:700 10px/1.2 Consolas,"Courier New",monospace; letter-spacing:2.2px; text-transform:uppercase; }
.hero-copy h3 { margin:0; color:#f1d58f; font-size:clamp(24px,3vw,38px); letter-spacing:.5px; text-shadow:0 0 28px rgba(214,168,75,.12); }
.command-motto { margin:8px 0 0; color:#c6b898; font-size:13px; }
.command-motto span { color:#81b64c; padding:0 5px; }
.hero-status { min-width:190px; display:flex; align-items:center; gap:12px; padding:13px 15px; border:1px solid rgba(214,168,75,.25); border-radius:12px; background:rgba(6,5,3,.42); }
.hero-status strong,.hero-status small { display:block; }
.hero-status strong { color:#e8d5a5; font:800 11px/1.4 Consolas,"Courier New",monospace; letter-spacing:1.2px; }
.hero-status small { color:#94876c; margin-top:2px; font-size:10px; }
.status-light { width:12px; height:12px; flex:0 0 auto; border-radius:50%; background:#a97724; box-shadow:0 0 0 4px rgba(169,119,36,.12),0 0 15px rgba(169,119,36,.4); animation:statusPulse 1.8s ease-in-out infinite; }
.status-light.online,.status-dot.online { background:#55b67a; }
.status-light.standby,.status-dot.standby { background:#c69536; }
.status-light.offline,.status-dot.offline { background:#c55f54; }
.command-grid { display:grid; grid-template-columns:minmax(0,1.35fr) minmax(280px,.65fr); gap:18px; }
.command-panel { position:relative; overflow:hidden; padding:22px; border:1px solid rgba(111,82,38,.72); border-radius:16px; background:linear-gradient(145deg, rgba(24,18,10,.94), rgba(11,9,6,.94)); box-shadow:0 16px 42px rgba(0,0,0,.22), inset 0 1px rgba(255,255,255,.025); }
.command-panel::before { content:""; position:absolute; top:0; left:0; right:0; height:1px; background:linear-gradient(90deg,transparent,#81b64c,transparent); opacity:.58; }
.panel-heading { display:flex; justify-content:space-between; align-items:flex-start; gap:16px; margin-bottom:20px; }
.panel-heading h4 { margin:0; color:#e7cc88; font-size:18px; }
.icon-command { width:36px; height:36px; border:1px solid #654b27; border-radius:9px; background:#242220; color:#81b64c; font-size:20px; cursor:pointer; transition:.2s ease; }
.icon-command:hover { transform:rotate(90deg); border-color:#81b64c; box-shadow:0 0 18px rgba(214,168,75,.15); }
.growth-numbers { display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:20px; text-align:center; padding:8px 0 22px; }
.growth-numbers strong { display:block; color:#f5dda1; font-size:42px; line-height:1; font-variant-numeric:tabular-nums; }
.growth-numbers span { display:block; margin-top:7px; color:#8f8268; font-size:10px; letter-spacing:1.2px; text-transform:uppercase; }
.growth-divider { width:1px; height:54px; background:linear-gradient(transparent,#72562b,transparent); }
.progress-shell { position:relative; height:18px; overflow:hidden; border:1px solid #5c431f; border-radius:999px; background:#080603; box-shadow:inset 0 0 14px rgba(0,0,0,.85); }
.progress-energy { position:absolute; inset:0 auto 0 0; border-radius:inherit; background:linear-gradient(90deg,#76531f,#81b64c 45%,#f5dfa5 62%,#9d7027); box-shadow:0 0 22px rgba(214,168,75,.36); transition:width 1.1s cubic-bezier(.2,.8,.2,1); }
.progress-energy::after { content:""; position:absolute; inset:0; background:linear-gradient(110deg,transparent 15%,rgba(255,255,255,.38) 35%,transparent 55%); transform:translateX(-100%); animation:energySweep 2.4s ease-in-out infinite; }
.progress-grid { position:absolute; inset:0; background:repeating-linear-gradient(90deg,transparent 0 21px,rgba(8,6,3,.38) 22px 23px); }
.growth-caption { display:flex; justify-content:space-between; gap:20px; margin-top:11px; color:#9d9073; font-size:11px; }
.growth-caption span:first-child { color:#a9d477; font-weight:800; }
.telemetry-list { display:grid; gap:10px; }
.telemetry-row { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:12px 13px; border:1px solid rgba(91,68,34,.55); border-radius:10px; background:rgba(6,5,3,.42); }
.telemetry-row span { display:flex; align-items:center; gap:9px; color:#bfb191; font-size:12px; }
.telemetry-row strong { color:#d7c18e; font:700 10px Consolas,"Courier New",monospace; letter-spacing:1px; }
.status-dot { display:inline-block; width:8px; height:8px; border-radius:50%; background:#a97724; box-shadow:0 0 9px currentColor; }
.stats-panel,.feed-panel { min-height:280px; }
.stat-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }
.stat-tile { min-height:90px; padding:14px; border:1px solid rgba(91,68,34,.55); border-radius:12px; background:linear-gradient(145deg,rgba(13,10,6,.8),rgba(25,18,9,.62)); color:inherit; text-align:left; cursor:pointer; transition:transform .2s ease,border-color .2s ease,box-shadow .2s ease; }
.stat-tile:hover { transform:translateY(-3px); border-color:#b88a3d; box-shadow:0 10px 22px rgba(0,0,0,.22),0 0 17px rgba(214,168,75,.07); }
.stat-tile strong { display:block; color:#f0d18a; font-size:27px; }
.stat-tile span { display:block; margin-top:7px; color:#8e826a; font-size:10px; letter-spacing:.8px; text-transform:uppercase; }
.live-tag { color:#72be8b; font:700 9px Consolas,"Courier New",monospace; letter-spacing:1.2px; }
.live-tag i { display:inline-block; width:6px; height:6px; margin-right:5px; border-radius:50%; background:#55b67a; box-shadow:0 0 10px #55b67a; animation:statusPulse 1.6s infinite; }
.command-feed { display:grid; gap:9px; max-height:216px; overflow:auto; padding-right:4px; }
.feed-entry { display:grid; grid-template-columns:76px 1fr; gap:10px; padding:10px 11px; border-left:2px solid #765b2d; background:rgba(6,5,3,.38); }
.feed-entry time { color:#7f9dac; font:700 10px Consolas,"Courier New",monospace; }
.feed-entry span { color:#c6b99c; font-size:11px; line-height:1.35; }
.feed-entry.sync { border-left-color:#55b67a; }.feed-entry.warning { border-left-color:#c69536; }.feed-entry.error { border-left-color:#c55f54; }
.empty-feed { color:#8e826a; font-size:12px; }
.panel-rise { animation:panelRise .55s both cubic-bezier(.2,.8,.2,1); }.delay-1{animation-delay:.08s}.delay-2{animation-delay:.14s}.delay-3{animation-delay:.2s}.delay-4{animation-delay:.26s}
.command-center[data-animation-mode="standard"] .scanline-layer { opacity:.12; animation-duration:12s; }
.command-center[data-animation-mode="standard"] .emblem-rings::before,.command-center[data-animation-mode="standard"] .emblem-rings::after { animation:none; }
.command-center[data-animation-mode="reduced"] *{animation:none!important;transition:none!important}.command-center[data-animation-mode="reduced"] .scanline-layer{display:none}@media (prefers-reduced-motion:reduce){.command-center *{animation:none!important;transition:none!important}.scanline-layer{display:none}}
@keyframes panelRise{from{opacity:0;transform:translateY(14px) scale(.99)}to{opacity:1;transform:none}}
@keyframes scanSweep{from{background-position:0 -170px}to{background-position:0 calc(100vh + 170px)}}
@keyframes commandDrift{from{transform:translate3d(-1%,-1%,0) scale(1)}to{transform:translate3d(1%,1%,0) scale(1.035)}}
@keyframes slowSpin{to{transform:rotate(360deg)}}
@keyframes emblemPulse{50%{box-shadow:0 0 42px rgba(214,168,75,.31)}}
@keyframes statusPulse{50%{opacity:.55;transform:scale(.82)}}
@keyframes energySweep{55%,100%{transform:translateX(140%)}}
@media(max-width:1050px){.command-grid{grid-template-columns:1fr}.command-hero{grid-template-columns:auto 1fr}.hero-status{grid-column:1/-1}}
@media(max-width:650px){.command-hero{grid-template-columns:1fr;text-align:center}.club-emblem-wrap{margin:auto}.hero-status{justify-content:center}.growth-numbers strong{font-size:34px}.stat-grid{grid-template-columns:1fr}.growth-caption{flex-direction:column;gap:5px}.content{padding:18px}}
.sidebar-brand-logo {
width: 44px;
height: 44px;
flex: 0 0 auto;
border: 1px solid rgba(214,168,75,.72);
border-radius: 50%;
object-fit: cover;
background: #050403;
box-shadow: 0 0 20px rgba(214,168,75,.2);
}
.command-watermark {
position: absolute;
z-index: -1;
right: -8%;
bottom: -12%;
width: min(58vw, 720px);
max-width: none;
opacity: .045;
filter: saturate(.78) contrast(1.08);
pointer-events: none;
user-select: none;
}
.boot-sequence {
position: fixed;
inset: 0;
z-index: 9999;
display: grid;
place-content: center;
justify-items: center;
padding: 28px;
background:
radial-gradient(circle at 50% 42%, rgba(214,168,75,.13), transparent 31%),
linear-gradient(145deg, #030302, #0c0804 58%, #020201);
text-align: center;
opacity: 1;
transition: opacity .3s ease, visibility .3s ease;
}
.boot-sequence::after {
content: "";
position: absolute;
inset: 0;
pointer-events: none;
opacity: .14;
background-image:
linear-gradient(rgba(214,168,75,.14) 1px, transparent 1px),
linear-gradient(90deg, rgba(214,168,75,.1) 1px, transparent 1px);
background-size: 54px 54px;
}
.boot-logo-shell {
position: relative;
width: clamp(180px, 25vw, 310px);
aspect-ratio: 16 / 9;
overflow: hidden;
margin-bottom: 22px;
border-radius: 22px;
box-shadow: 0 0 65px rgba(214,168,75,.16);
}
.boot-logo {
width: 100%;
height: 100%;
object-fit: cover;
animation: bootLogoResolve .65s cubic-bezier(.2,.8,.2,1) both;
}
.boot-light-sweep {
position: absolute;
inset: -20% auto -20% -45%;
width: 32%;
background: linear-gradient(90deg, transparent, rgba(255,231,171,.5), transparent);
transform: skewX(-18deg);
animation: bootSweep 1.3s .12s ease-in-out both;
}
.boot-kicker {
margin: 0 0 8px;
color: #9f8350;
font: 800 10px/1.2 Consolas, "Courier New", monospace;
letter-spacing: 3px;
}
.boot-sequence h3 {
margin: 0 0 18px;
color: #f0d597;
font-size: clamp(21px, 3vw, 34px);
letter-spacing: .8px;
}
.boot-progress {
width: min(420px, 76vw);
height: 7px;
overflow: hidden;
border: 1px solid #5d4420;
border-radius: 999px;
background: #070502;
}
.boot-progress span {
display: block;
width: 0;
height: 100%;
border-radius: inherit;
background: linear-gradient(90deg, #76531f, #81b64c, #f3dda2);
box-shadow: 0 0 18px rgba(214,168,75,.45);
transition: width .22s ease;
}
.boot-status {
margin: 12px 0 0;
color: #96866a;
font: 700 11px Consolas, "Courier New", monospace;
letter-spacing: .6px;
}
.boot-sequence.boot-complete {
opacity: 0;
visibility: hidden;
}
.club-logo {
padding: 0;
object-fit: cover;
}
@keyframes bootLogoResolve {
from { opacity: 0; transform: scale(.93); filter: blur(6px) brightness(.5); }
to { opacity: 1; transform: scale(1); filter: none; }
}
@keyframes bootSweep {
from { left: -45%; opacity: 0; }
25% { opacity: 1; }
to { left: 125%; opacity: 0; }
}
.command-center[data-animation-mode="standard"] .boot-light-sweep { animation-duration: .7s; }
.command-center[data-animation-mode="reduced"] .command-watermark { opacity: .025; }
@media (max-width: 650px) {
.command-watermark { width: 110vw; right: -34%; bottom: -5%; }
.boot-logo-shell { width: min(82vw, 300px); }
}
.command-ribbon {
display: grid;
grid-template-columns: auto auto minmax(240px, 1fr) auto;
gap: 1px;
margin-bottom: 14px;
overflow: hidden;
border: 1px solid rgba(214,168,75,.38);
border-radius: 12px;
background: rgba(214,168,75,.28);
box-shadow: 0 10px 30px rgba(0,0,0,.2);
}
.ribbon-item {
min-width: 150px;
padding: 11px 14px;
display: flex;
align-items: center;
gap: 9px;
background: linear-gradient(180deg, rgba(18,13,7,.96), rgba(8,6,4,.96));
}
.ribbon-item:not(:first-child) { display:grid; gap:3px; }
.ribbon-item small { color:#82765f; font:700 8px Consolas,"Courier New",monospace; letter-spacing:1.4px; text-transform:uppercase; }
.ribbon-item strong { color:#d9c493; font:800 10px Consolas,"Courier New",monospace; letter-spacing:.9px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.ribbon-wide strong { color:#f0d18a; }
.ribbon-dot { width:8px; height:8px; flex:0 0 auto; border-radius:50%; background:#c69536; box-shadow:0 0 12px currentColor; animation:statusPulse 1.8s infinite; }
.ribbon-dot.online { background:#55b67a; color:#55b67a; }
.ribbon-dot.offline { background:#c55f54; color:#c55f54; }
.ribbon-dot.standby,.ribbon-dot.pending { background:#c69536; color:#c69536; }
.club-emblem-wrap { width:124px; height:124px; }
.club-logo,.club-logo-fallback { width:98px; height:98px; }
.club-logo { filter: contrast(1.05) saturate(1.08); }
.club-emblem-wrap::after {
content:"";
position:absolute;
inset:16px;
z-index:3;
pointer-events:none;
border-radius:50%;
background:linear-gradient(112deg, transparent 18%, rgba(255,239,190,.5) 38%, transparent 56%);
transform:translateX(-140%) rotate(8deg);
animation:logoSweep 11s ease-in-out infinite;
mix-blend-mode:screen;
}
.hero-copy h3 { font-family: Georgia,"Times New Roman",serif; font-weight:700; letter-spacing:.8px; }
.hero-subtitle { max-width:620px; margin:8px 0 0; color:#9b8d71; font-size:11px; line-height:1.45; }
.command-hero { padding:27px 30px; min-height:168px; }
.command-hero::after {
content:"";
position:absolute;
inset:0;
pointer-events:none;
background:linear-gradient(100deg, transparent 0 42%, rgba(214,168,75,.045) 50%, transparent 58%);
transform:translateX(-80%);
animation:heroSweep 13s ease-in-out infinite;
}
.progress-shell { height:22px; border-radius:7px; }
.progress-energy { border-radius:5px; }
.progress-grid {
background:repeating-linear-gradient(90deg, transparent 0 23px, rgba(4,3,2,.72) 23px 27px);
}
.progress-beacon {
position:absolute;
top:2px;
bottom:2px;
left:0;
width:32px;
border-radius:4px;
background:linear-gradient(90deg,transparent,rgba(255,244,205,.72),transparent);
filter:blur(1px);
animation:progressBeacon 3.1s linear infinite;
pointer-events:none;
}
.telemetry-badge { padding:5px 8px; border:1px solid rgba(198,149,54,.38); border-radius:999px; background:rgba(198,149,54,.08); }
.telemetry-badge.online { color:#70c68d; border-color:rgba(85,182,122,.4); background:rgba(85,182,122,.08); }
.telemetry-badge.standby,.telemetry-badge.pending { color:#ddb15d; }
.telemetry-badge.offline { color:#dd8076; border-color:rgba(197,95,84,.42); background:rgba(197,95,84,.08); }
.telemetry-row { transition:border-color .2s ease, background .2s ease, transform .2s ease; }
.telemetry-row:hover { transform:translateX(3px); border-color:rgba(214,168,75,.45); background:rgba(32,23,12,.56); }
.stat-tile { position:relative; min-height:118px; padding:16px 16px 13px; overflow:hidden; }
.stat-tile::after { content:""; position:absolute; inset:0; pointer-events:none; background:linear-gradient(110deg,transparent 15%,rgba(214,168,75,.07) 45%,transparent 70%); transform:translateX(-110%); transition:transform .55s ease; }
.stat-tile:hover::after { transform:translateX(110%); }
.stat-glyph { position:absolute; top:12px; right:14px; color:rgba(214,168,75,.42); font:normal 26px Georgia,serif; text-shadow:0 0 15px rgba(214,168,75,.18); }
.stat-tile em { display:block; margin-top:10px; color:#766a54; font:normal 8px Consolas,"Courier New",monospace; letter-spacing:.7px; text-transform:uppercase; }
.stat-tile:hover em { color:#c5aa70; }
.nav-button { position:relative; overflow:hidden; padding-left:18px; transition:color .2s ease,border-color .2s ease,background .2s ease,transform .2s ease; }
.nav-button::before { content:""; position:absolute; left:7px; top:50%; width:4px; height:4px; border-radius:50%; background:#68502a; transform:translateY(-50%); box-shadow:0 0 0 rgba(214,168,75,0); transition:.2s ease; }
.nav-button::after { content:""; position:absolute; inset:0; pointer-events:none; background:linear-gradient(100deg,transparent,rgba(214,168,75,.12),transparent); transform:translateX(-110%); transition:transform .45s ease; }
.nav-button:hover::after { transform:translateX(110%); }
.nav-button.active::before { background:#e0b85d; box-shadow:0 0 12px rgba(224,184,93,.8); }
.nav-button:hover { transform:translateX(3px); }
.command-watermark { opacity:.06; filter:saturate(.75) contrast(1.12) drop-shadow(0 0 28px rgba(214,168,75,.08)); }
@keyframes logoSweep { 0%,72%{transform:translateX(-140%) rotate(8deg);opacity:0} 76%{opacity:.9} 88%,100%{transform:translateX(140%) rotate(8deg);opacity:0} }
@keyframes heroSweep { 0%,70%{transform:translateX(-80%)} 88%,100%{transform:translateX(80%)} }
@keyframes progressBeacon { from{transform:translateX(-40px)} to{transform:translateX(calc(100vw + 40px))} }
@media(max-width:1150px){.command-ribbon{grid-template-columns:repeat(2,minmax(0,1fr))}.ribbon-item{min-width:0}.ribbon-wide{grid-column:auto}}
@media(max-width:650px){.command-ribbon{grid-template-columns:1fr}.club-emblem-wrap{width:112px;height:112px}.club-logo,.club-logo-fallback{width:88px;height:88px}.command-hero{padding:22px}.hero-subtitle{margin-left:auto;margin-right:auto}.ribbon-item{justify-content:center;text-align:center}}
.events-panel { grid-column: 1 / -1; }
.event-tabs { display:flex; gap:8px; margin-bottom:14px; }
.event-tab { padding:7px 12px; border:1px solid #6b522a; border-radius:999px; background:transparent; color:#c9b98f; font-weight:800; cursor:pointer; }
.event-tab.active { background:#81b64c; color:#160f05; }
.club-events { display:grid; grid-template-columns:repeat(auto-fit,minmax(210px,1fr)); gap:10px; }
.club-event-card { display:flex; flex-direction:column; gap:7px; padding:14px; border:1px solid #5b4425; border-radius:12px; background:rgba(13,10,6,.82); color:#f4f4f4; text-decoration:none; transition:.2s ease; }
.club-event-card:hover { transform:translateY(-2px); border-color:#81b64c; box-shadow:0 10px 28px rgba(0,0,0,.28); }
.club-event-card .event-type { color:#81b64c; font-size:10px; font-weight:900; letter-spacing:.1em; text-transform:uppercase; }
.club-event-card small { color:#9f9279; }
.settings-help { color:#9f9279; font-size:12px; line-height:1.5; }
.matrix-rain {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
z-index: 0;
pointer-events: none;
opacity: .8;
mix-blend-mode: screen;
mask-image: linear-gradient(to bottom, rgba(0,0,0,.9), rgba(0,0,0,.35) 72%, transparent);
}
.command-center > :not(.matrix-rain):not(.command-watermark):not(.scanline-layer) {
position: relative;
z-index: 2;
}
.command-center[data-animation-mode="standard"] .matrix-rain { opacity: .48; }
.command-center[data-animation-mode="reduced"] .matrix-rain { display: none; }
.member-list-tools { display:flex; gap:12px; align-items:center; flex-wrap:wrap; }
.member-list-tools input { min-width:220px; }
.template-card-heading { display:flex; justify-content:space-between; gap:12px; align-items:flex-start; }
.template-card-heading h3 { margin:0; }
.delete-template-button:disabled { opacity:.48; cursor:not-allowed; }
.help-board{position:relative;min-height:100%;padding:2px;overflow:hidden;border-radius:18px;background:radial-gradient(circle at 50% 0%,rgba(214,168,75,.10),transparent 38%),linear-gradient(180deg,#242220,#070503);isolation:isolate}.help-matrix{position:absolute;inset:0;width:100%;height:100%;z-index:0;pointer-events:none;opacity:.85;mix-blend-mode:screen;mask-image:linear-gradient(to bottom,rgba(0,0,0,.85),rgba(0,0,0,.25) 80%,transparent)}.help-scanline{position:absolute;inset:0;z-index:1;pointer-events:none;background:repeating-linear-gradient(to bottom,transparent 0,transparent 3px,rgba(214,168,75,.025) 4px)}.help-board>:not(.help-matrix):not(.help-scanline){position:relative;z-index:2}.help-hero{display:flex;align-items:center;gap:24px;padding:28px;margin:12px;border:1px solid rgba(214,168,75,.48);border-radius:18px;background:linear-gradient(135deg,rgba(29,21,11,.94),rgba(9,7,4,.88));box-shadow:0 18px 45px rgba(0,0,0,.35),inset 0 0 32px rgba(214,168,75,.04)}.help-hero h3{margin:4px 0 8px;color:#f5d889;font-size:30px}.help-hero p:last-child{max-width:760px;color:#c8b991;line-height:1.65}.help-emblem-shell{position:relative;width:120px;height:120px;flex:0 0 120px;display:grid;place-items:center}.help-emblem-shell img{width:94px;height:94px;object-fit:cover;border-radius:50%;filter:drop-shadow(0 0 18px rgba(214,168,75,.36));animation:helpLogoFloat 4s ease-in-out infinite}.help-orbit{position:absolute;inset:4px;border:1px solid rgba(214,168,75,.5);border-radius:50%;border-left-color:transparent;border-bottom-color:rgba(214,168,75,.15);animation:helpOrbit 9s linear infinite}.help-jump{display:flex;gap:8px;flex-wrap:wrap;margin:0 12px 16px;padding:12px;border:1px solid rgba(214,168,75,.28);border-radius:14px;background:rgba(10,7,4,.82)}.help-jump button{padding:9px 13px;border:1px solid #6a512b;border-radius:999px;background:rgba(214,168,75,.06);color:#e1c47f;font-weight:800;cursor:pointer;transition:.2s ease}.help-jump button:hover{transform:translateY(-2px);background:#81b64c;color:#160f05;box-shadow:0 8px 20px rgba(0,0,0,.25)}.help-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;padding:0 12px 20px}.help-card{position:relative;padding:22px 22px 20px;border:1px solid rgba(214,168,75,.36);border-radius:16px;background:linear-gradient(145deg,rgba(18,13,7,.94),rgba(8,6,4,.88));box-shadow:0 12px 30px rgba(0,0,0,.26);overflow:hidden;scroll-margin-top:20px;transition:transform .22s ease,border-color .22s ease,box-shadow .22s ease}.help-card::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(115deg,transparent 18%,rgba(214,168,75,.07) 46%,transparent 72%);transform:translateX(-120%);transition:transform .65s ease}.help-card:hover{transform:translateY(-4px);border-color:rgba(230,190,99,.72);box-shadow:0 18px 38px rgba(0,0,0,.34),0 0 18px rgba(214,168,75,.07)}.help-card:hover::after{transform:translateX(120%)}.help-card h4{margin:0 0 10px;padding-right:46px;color:#f0d17e;font-size:18px}.help-card p,.help-card li{color:#c6b996;line-height:1.62}.help-card ol,.help-card ul{margin:12px 0 0;padding-left:20px}.help-step{position:absolute;top:14px;right:15px;color:rgba(214,168,75,.42);font:900 25px Consolas,monospace;text-shadow:0 0 14px rgba(214,168,75,.15)}.help-note{margin-top:14px;padding:11px 12px;border-left:3px solid #81b64c;border-radius:7px;background:rgba(214,168,75,.08);color:#e1cb91;font-size:12px;line-height:1.5}.help-note.warning{border-left-color:#dd9d50;background:rgba(221,157,80,.09)}.help-reveal{animation:helpReveal .58s both}.help-reveal.delay-1{animation-delay:.08s}.help-reveal.delay-2{animation-delay:.16s}.help-reveal.delay-3{animation-delay:.24s}@keyframes helpReveal{from{opacity:0;transform:translateY(16px) scale(.99)}to{opacity:1;transform:none}}@keyframes helpOrbit{to{transform:rotate(360deg)}}@keyframes helpLogoFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-5px)}}@media(max-width:850px){.help-grid{grid-template-columns:1fr}.help-hero{align-items:flex-start}.help-emblem-shell{width:92px;height:92px;flex-basis:92px}.help-emblem-shell img{width:72px;height:72px}.help-hero h3{font-size:24px}}@media(max-width:600px){.help-hero{flex-direction:column}.help-jump button{flex:1 1 45%}}
.product-credit{position:fixed;left:250px;right:0;bottom:0;z-index:30;padding:8px 14px;border-top:1px solid rgba(214,168,75,.22);background:rgba(7,5,3,.9);backdrop-filter:blur(10px);color:#9f8d67;font-size:10px;font-weight:800;letter-spacing:.06em;text-align:center;text-transform:uppercase}.workspace{padding-bottom:34px}@media(max-width:760px){.product-credit{left:0}}
.owner-setup-shell{max-width:760px;margin:30px auto;padding:34px;border:1px solid var(--gold,#81b64c);border-radius:28px;background:rgba(8,6,4,.96);text-align:center;box-shadow:0 0 55px rgba(214,168,75,.16)}.owner-setup-product-logo{width:120px;height:120px;object-fit:cover;border-radius:50%;border:2px solid #81b64c;box-shadow:0 0 28px rgba(214,168,75,.3)}.owner-setup-form{display:grid;gap:16px;margin-top:24px;text-align:left}.owner-setup-form label{display:grid;gap:7px;font-weight:800;color:#e8c676}.owner-setup-form input{width:100%;padding:12px;border:1px solid rgba(214,168,75,.5);border-radius:12px;background:#242220;color:#fff}.owner-color-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}.owner-setup-form button{padding:14px;border:0;border-radius:999px;background:#81b64c;color:#160f05;font-weight:900}.owner-setup-credit{display:block;margin-top:22px;color:#9f8d67}.settings-logo-preview{width:110px;height:110px;object-fit:cover;border-radius:50%;border:2px solid #81b64c}.logo-preview-wrap{text-align:center;margin-bottom:16px}
:root{--club-green:#81b64c;--club-green-dark:#5d8f3b;--club-bg:#262522;--club-panel:#312e2b;--club-panel-2:#3a3734;--club-text:#f4f4f4;--club-muted:#b8b8b8;}
body{background:#1f1e1b;color:var(--club-text)}
.sidebar{background:linear-gradient(180deg,#262522,#1f1e1b);border-right-color:#494743}.brand{border-color:rgba(129,182,76,.45);background:rgba(129,182,76,.06)}.brand h1,.topbar h2{color:#fff}.brand p,.topbar p{color:#b8b8b8}.sidebar-brand-logo{object-fit:contain;border-radius:14px;border:1px solid rgba(129,182,76,.5);background:#1d1d1b}.nav-button{color:#d8d8d8;border-color:transparent}.nav-button:hover,.nav-button.active{background:linear-gradient(90deg,#6fa83f,#81b64c);color:#111;border-color:#a9d477;box-shadow:0 0 18px rgba(129,182,76,.2)}.workspace,.content{background:radial-gradient(circle at top right,rgba(129,182,76,.06),transparent 32%),#262522}.topbar{background:#2b2926;border-bottom-color:#45423e}.version{background:#81b64c;color:#15200f;border-color:#a9d477}.command-panel,.command-hero,.command-ribbon,.dashboard-card,.welcome-card,.manager-card,.form-card,.help-card,.help-hero,.help-jump{background:linear-gradient(145deg,rgba(49,46,43,.97),rgba(38,37,34,.97))!important;border-color:rgba(129,182,76,.34)!important}.panel-kicker,.eyebrow,.help-card h4,.help-hero h3{color:#a9d477!important}.command-motto,.hero-subtitle,.help-card p,.help-card li{color:#c8c8c8!important}.progress-energy,.primary-button,button.primary,.icon-command:hover{background:linear-gradient(90deg,#5d8f3b,#81b64c)!important}.status-dot.online,.ribbon-dot.online{background:#81b64c!important;box-shadow:0 0 12px rgba(129,182,76,.65)!important}.matrix-rain,.help-matrix{filter:hue-rotate(70deg) saturate(.75)}
.help-board{background:radial-gradient(circle at 50% 0%,rgba(129,182,76,.10),transparent 38%),linear-gradient(180deg,#292724,#1f1e1b)}.help-orbit{border-color:rgba(129,182,76,.55);border-left-color:transparent}.help-jump button{border-color:#5d8f3b;color:#bfe395;background:rgba(129,182,76,.06)}.help-jump button:hover{background:#81b64c;color:#111}.help-note{border-left-color:#81b64c;background:rgba(129,182,76,.08);color:#d6e8c5}.product-credit{display:flex!important;align-items:center;justify-content:center;gap:8px;color:#bdbdbd;border-top:1px solid #45423e;background:#211f1d}.product-credit img{width:24px;height:24px;object-fit:cover;border-radius:50%;border:1px solid #c89c42;box-shadow:0 0 9px rgba(200,156,66,.28);animation:creatorPulse 4s ease-in-out infinite}.product-credit span{line-height:1.25}@keyframes creatorPulse{50%{box-shadow:0 0 13px rgba(214,168,75,.6)}}
:root{
--ca-bg:#262522;
--ca-bg-deep:#1f1e1b;
--ca-panel:#312e2b;
--ca-panel-2:#383532;
--ca-border:#4a4743;
--ca-green:#81b64c;
--ca-green-dark:#5d8f3b;
--ca-green-soft:#a9d477;
--ca-text:#f4f4f4;
--ca-muted:#b8b6b2;
--ca-gold:#c89c42;
}
html{background:var(--ca-bg-deep)}
body{
background:
radial-gradient(circle at 78% 5%,rgba(129,182,76,.10),transparent 31%),
linear-gradient(145deg,var(--ca-bg),var(--ca-bg-deep));
color:var(--ca-text);
overflow-x:hidden;
}
body::before{
content:"";
position:fixed;inset:0;z-index:-2;pointer-events:none;opacity:.18;
background-image:
linear-gradient(rgba(129,182,76,.06) 1px,transparent 1px),
linear-gradient(90deg,rgba(129,182,76,.045) 1px,transparent 1px);
background-size:42px 42px;
animation:caGridDrift 26s linear infinite;
}
body::after{
content:"01  KQ  e4  Nf3  10  CLUB  0-0  B7  11  RANK  +  #";
position:fixed;top:-50px;right:3%;z-index:-1;pointer-events:none;
width:180px;white-space:pre-wrap;word-spacing:18px;line-height:2.5;
color:rgba(129,182,76,.08);font:700 13px/2.5 "Courier New",monospace;
writing-mode:vertical-rl;letter-spacing:5px;
animation:caCodeFall 18s linear infinite;
}
@keyframes caGridDrift{to{background-position:42px 42px}}
@keyframes caCodeFall{from{transform:translateY(-20%)}to{transform:translateY(115vh)}}
.sidebar{background:linear-gradient(180deg,#2d2a27,#211f1d);border-right-color:rgba(129,182,76,.35);box-shadow:12px 0 36px rgba(0,0,0,.18)}
.brand h1,.topbar h2,.welcome-card h3,.dashboard-card h3,.settings-card h3,
.panel-kicker,.section-heading,.form-card h3,.manager-card h3,.builder-card h3,
.template-card h3,.help-card h3{color:var(--ca-green-soft)!important}
.brand p,.topbar p,.welcome-card p,.dashboard-card p{color:var(--ca-muted)!important}
.topbar{background:rgba(49,46,43,.94);border-bottom-color:rgba(129,182,76,.25);backdrop-filter:blur(14px)}
.version{border-color:rgba(129,182,76,.45);color:var(--ca-green-soft);background:rgba(129,182,76,.07)}
.nav-button{color:#e8e8e8;border-radius:10px;transition:transform .2s ease,background .2s ease,border-color .2s ease,box-shadow .2s ease}
.nav-button:hover,.nav-button.active{background:linear-gradient(90deg,rgba(129,182,76,.20),rgba(129,182,76,.06));border-color:var(--ca-green);color:#fff;transform:translateX(4px);box-shadow:inset 3px 0 var(--ca-green),0 0 16px rgba(129,182,76,.10)}
.content{position:relative}
.content>*,.card-grid>*,.builder-layout>*,.manager-layout>*,.settings-form>*,.help-grid>*{animation:caPanelIn .48s cubic-bezier(.2,.8,.2,1) both}
.content>*:nth-child(2),.card-grid>*:nth-child(2),.help-grid>*:nth-child(2){animation-delay:.06s}
.content>*:nth-child(3),.card-grid>*:nth-child(3),.help-grid>*:nth-child(3){animation-delay:.12s}
.content>*:nth-child(4),.card-grid>*:nth-child(4),.help-grid>*:nth-child(4){animation-delay:.18s}
@keyframes caPanelIn{from{opacity:0;transform:translateY(16px) scale(.99)}to{opacity:1;transform:none}}
.welcome-card,.dashboard-card,.settings-card,.form-card,.manager-card,.builder-card,.preview-card,
.template-card,.empty-state,.member-card,.prospect-card,.club-card,.event-card,.status-card,
.owner-setup-shell,.help-card,.help-hero,.telemetry-card,.growth-card,.activity-card{
background:linear-gradient(180deg,rgba(56,53,50,.96),rgba(45,42,39,.96))!important;
border-color:rgba(129,182,76,.32)!important;
color:var(--ca-text)!important;
box-shadow:0 10px 28px rgba(0,0,0,.18);
transition:transform .22s ease,border-color .22s ease,box-shadow .22s ease;
}
.dashboard-card:hover,.settings-card:hover,.form-card:hover,.manager-card:hover,.template-card:hover,
.member-card:hover,.prospect-card:hover,.club-card:hover,.event-card:hover,.help-card:hover{
transform:translateY(-3px);border-color:rgba(129,182,76,.75)!important;box-shadow:0 14px 32px rgba(0,0,0,.25),0 0 18px rgba(129,182,76,.08)
}
input,textarea,select,.settings-card input,.settings-card textarea,.settings-card select{
background:#252321!important;color:#f3f3f3!important;border-color:#55514c!important;
transition:border-color .2s ease,box-shadow .2s ease,transform .2s ease;
}
input:focus,textarea:focus,select:focus,.settings-card input:focus,.settings-card textarea:focus{
border-color:var(--ca-green)!important;box-shadow:0 0 0 3px rgba(129,182,76,.13)!important;outline:none
}
button,.primary-button,.settings-actions button,.form-actions button,.builder-actions button{
border-color:var(--ca-green-dark)!important;
transition:transform .16s ease,filter .16s ease,box-shadow .16s ease!important;
}
button:hover,.primary-button:hover,.settings-actions button:hover,.form-actions button:hover,.builder-actions button:hover{
transform:translateY(-2px);filter:brightness(1.08);box-shadow:0 8px 20px rgba(129,182,76,.16)
}
button[type="submit"],.primary-button,.settings-actions button:not(.secondary-button),.form-actions button:not(.secondary-button){
background:linear-gradient(90deg,var(--ca-green-dark),var(--ca-green))!important;color:#121410!important
}
.secondary-button{background:#383532!important;color:#e8e8e8!important;border-color:#5a5651!important}
.checkbox-label{background:#292724!important;border-color:#4d4945!important}.checkbox-label:has(input:checked){border-color:var(--ca-green)!important;background:rgba(129,182,76,.10)!important}
.progress-fill,.growth-progress-fill,.member-progress-fill{background:linear-gradient(90deg,var(--ca-green-dark),var(--ca-green),#b8df78)!important;box-shadow:0 0 16px rgba(129,182,76,.35)}
.status-dot,.system-light.online,.live-dot{background:var(--ca-green)!important;box-shadow:0 0 10px var(--ca-green);animation:caPulse 2s ease-in-out infinite}
@keyframes caPulse{50%{opacity:.5;box-shadow:0 0 18px var(--ca-green)}}
.sidebar-brand-logo{border-color:rgba(129,182,76,.55)!important;background:#211f1d!important;box-shadow:0 0 18px rgba(129,182,76,.12)}
.product-credit{cursor:default}.product-credit img{cursor:pointer;transition:transform .2s ease,box-shadow .2s ease}.product-credit img:hover{transform:scale(1.12);box-shadow:0 0 18px rgba(200,156,66,.65)!important}
.ca-easter-overlay{position:fixed;inset:0;z-index:99999;display:grid;place-items:center;padding:24px;background:rgba(10,9,8,.88);backdrop-filter:blur(12px);animation:caOverlayIn .35s ease both}
.ca-easter-card{position:relative;width:min(520px,92vw);padding:36px 28px;text-align:center;border:1px solid rgba(200,156,66,.7);border-radius:24px;background:radial-gradient(circle at top,rgba(200,156,66,.15),transparent 45%),linear-gradient(180deg,#282421,#171513);box-shadow:0 24px 80px rgba(0,0,0,.55),0 0 30px rgba(200,156,66,.15);overflow:hidden}
.ca-easter-card::before{content:"";position:absolute;inset:-60%;background:conic-gradient(transparent,rgba(129,182,76,.08),transparent,rgba(200,156,66,.10),transparent);animation:caOrbit 10s linear infinite}
.ca-easter-card>*{position:relative}.ca-easter-logo{width:160px;height:160px;object-fit:cover;border-radius:50%;border:2px solid #c89c42;box-shadow:0 0 26px rgba(200,156,66,.4);animation:caLogoReveal .7s cubic-bezier(.2,.8,.2,1) both}.ca-easter-card h2{margin:18px 0 8px;color:#fff;font-size:30px}.ca-easter-card p{margin:7px 0;color:#d5d1ca;line-height:1.5}.ca-easter-motto{color:#b8df78!important;font-weight:800}.ca-easter-close{position:absolute;top:14px;right:14px;width:36px;height:36px;border-radius:50%;background:#37332f!important;color:#fff!important;border:1px solid #5c5650!important}
@keyframes caOverlayIn{from{opacity:0}to{opacity:1}}@keyframes caLogoReveal{from{opacity:0;transform:scale(.7) rotate(-5deg)}to{opacity:1;transform:none}}@keyframes caOrbit{to{transform:rotate(360deg)}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;scroll-behavior:auto!important}}
.product-credit{
display:flex!important;
align-items:center;
justify-content:center;
gap:10px;
color:#bdbdbd!important;
border-top:1px solid #45423e!important;
background:#211f1d!important;
text-align:left!important;
text-transform:none!important;
letter-spacing:.02em!important;
}
.product-credit strong{color:#f4f4f4;font-weight:900}
.product-credit img{
width:34px!important;
height:34px!important;
object-fit:cover;
border-radius:50%;
border:1px solid #c89c42!important;
box-shadow:0 0 10px rgba(200,156,66,.32);
cursor:pointer;
animation:caCopyrightPulse 4s ease-in-out infinite;
transition:transform .2s ease,box-shadow .2s ease,filter .2s ease;
}
.product-credit img:hover,
.product-credit img:focus-visible{
transform:scale(1.12);
filter:brightness(1.08);
outline:none;
box-shadow:0 0 20px rgba(214,168,75,.72)!important;
}
.ca-easter-overlay{
position:fixed;
inset:0;
z-index:99999;
display:grid;
place-items:center;
padding:20px;
background:rgba(8,7,6,.90);
backdrop-filter:blur(13px);
opacity:0;
visibility:hidden;
transition:opacity .55s ease,visibility .55s ease;
}
.ca-easter-overlay.is-visible{
opacity:1;
visibility:visible;
}
.ca-easter-overlay.is-closing{
opacity:0;
visibility:visible;
pointer-events:none;
transition-duration:1.2s;
}
.ca-easter-card{
position:relative;
width:min(520px,92vw);
padding:34px 26px 30px;
overflow:hidden;
text-align:center;
border:1px solid rgba(214,168,75,.72);
border-radius:24px;
background:
radial-gradient(circle at 50% 18%,rgba(214,168,75,.16),transparent 37%),
linear-gradient(180deg,#292522,#171513);
box-shadow:0 25px 85px rgba(0,0,0,.62),0 0 38px rgba(200,156,66,.17);
transform:translateY(14px) scale(.96);
opacity:0;
transition:transform .65s cubic-bezier(.2,.8,.2,1),opacity .55s ease;
}
.ca-easter-overlay.is-visible .ca-easter-card{
transform:none;
opacity:1;
}
.ca-easter-overlay.is-closing .ca-easter-card{
transform:translateY(10px) scale(.985);
opacity:0;
transition-duration:1s;
}
.ca-easter-logo-stage{
position:relative;
width:190px;
height:190px;
margin:0 auto 8px;
display:grid;
place-items:center;
}
.ca-easter-logo{
position:relative;
z-index:5;
width:132px!important;
height:132px!important;
object-fit:cover;
border-radius:50%;
border:2px solid #d6a84b!important;
box-shadow:0 0 28px rgba(214,168,75,.48)!important;
animation:caLogoGlow 2.8s ease-in-out infinite;
}
.ca-easter-orbit{
position:absolute;
display:block;
border:1px solid rgba(214,168,75,.62);
border-radius:50%;
transform-style:preserve-3d;
}
.ca-easter-orbit-one{
width:176px;
height:176px;
animation:caEasterOrbit 8s linear infinite;
}
.ca-easter-orbit-two{
width:154px;
height:154px;
transform:rotateX(66deg);
animation:caEasterOrbitTwo 5.5s linear infinite reverse;
}
.ca-easter-orbit i{
position:absolute;
display:block;
width:9px;
height:9px;
border-radius:50%;
background:#f0cf78;
box-shadow:0 0 13px rgba(240,207,120,.95);
}
.ca-easter-orbit-one i:nth-child(1){top:-5px;left:50%}
.ca-easter-orbit-one i:nth-child(2){right:-5px;top:53%}
.ca-easter-orbit-one i:nth-child(3){left:18%;bottom:5px}
.ca-easter-orbit-two i:nth-child(1){left:-5px;top:48%}
.ca-easter-orbit-two i:nth-child(2){right:8%;bottom:8%}
.ca-easter-energy-ring{
position:absolute;
width:145px;
height:145px;
border:1px solid rgba(214,168,75,.38);
border-radius:50%;
animation:caEasterEnergy 2.4s ease-in-out infinite;
}
.ca-easter-kicker{
margin:0 0 5px!important;
color:#d6a84b!important;
font-size:10px!important;
font-weight:900!important;
letter-spacing:.2em!important;
}
.ca-easter-card h2{
margin:5px 0 10px!important;
color:#fff!important;
font-size:30px!important;
}
.ca-easter-card p{
margin:7px 0!important;
color:#d7d2ca!important;
line-height:1.5!important;
}
.ca-easter-copyright{color:#f0cf78!important}
.ca-easter-motto{color:#b8df78!important;font-weight:900!important}
.ca-easter-card small{display:block;margin-top:14px;color:#8f8980}
@keyframes caCopyrightPulse{
50%{box-shadow:0 0 16px rgba(214,168,75,.62)}
}
@keyframes caEasterOrbit{
to{transform:rotate(360deg)}
}
@keyframes caEasterOrbitTwo{
from{transform:rotateX(66deg) rotate(0deg)}
to{transform:rotateX(66deg) rotate(360deg)}
}
@keyframes caEasterEnergy{
0%,100%{transform:scale(.94);opacity:.35}
50%{transform:scale(1.1);opacity:.85}
}
@keyframes caLogoGlow{
50%{box-shadow:0 0 42px rgba(214,168,75,.75)}
}
@media(prefers-reduced-motion:reduce){
.ca-easter-orbit,
.ca-easter-energy-ring,
.ca-easter-logo,
.product-credit img{animation:none!important}
}


/* v1.2.1 dashboard navigation bridge and module motion */
.topbar-actions{display:flex;align-items:center;justify-content:flex-end;gap:9px;flex-wrap:wrap}.topbar-action{min-height:36px;padding:8px 12px;border:1px solid #56524d;border-radius:8px;background:#312e2b;color:#e4e0da;font-weight:800;cursor:pointer;transition:transform .18s ease,border-color .18s ease,box-shadow .18s ease}.topbar-action:hover{transform:translateY(-2px);border-color:#81b64c;box-shadow:0 8px 20px rgba(0,0,0,.22)}.topbar-action.primary{background:linear-gradient(135deg,#81b64c,#5d8f3b);border-color:#a9d477;color:#15130f}.content.module-enter>*{animation:moduleReveal .48s cubic-bezier(.2,.8,.2,1) both}.content.module-enter>*:nth-child(2){animation-delay:.05s}.content.module-enter>*:nth-child(3){animation-delay:.1s}.nav-button{position:relative;overflow:hidden}.nav-button::after{content:"";position:absolute;left:-70%;top:0;width:45%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.13),transparent);transform:skewX(-18deg);transition:left .55s ease}.nav-button:hover::after,.nav-button.active::after{left:130%}.settings-card,.dashboard-card,.manager-card,.template-card,.message-builder-card,.prospect-card,.member-card,.club-card{transition:transform .2s ease,border-color .2s ease,box-shadow .2s ease}.settings-card:hover,.dashboard-card:hover,.manager-card:hover,.template-card:hover,.message-builder-card:hover,.prospect-card:hover,.member-card:hover,.club-card:hover{transform:translateY(-3px);border-color:rgba(129,182,76,.55)!important;box-shadow:0 14px 30px rgba(0,0,0,.18)}@keyframes moduleReveal{from{opacity:0;transform:translateY(16px) scale(.992);filter:blur(2px)}to{opacity:1;transform:none;filter:none}}@media(max-width:850px){.topbar-actions{justify-content:flex-start}.topbar-action{flex:1}.version{width:100%}}@media(prefers-reduced-motion:reduce){.content.module-enter>*,.nav-button::after{animation:none!important;transition:none!important}}


/* v1.2.3 usability layer */
.module-guide{display:flex;align-items:center;justify-content:space-between;gap:24px;margin:0 0 22px;padding:18px 20px;border:1px solid rgba(129,182,76,.5);border-radius:14px;background:linear-gradient(135deg,rgba(129,182,76,.12),rgba(49,46,43,.92));box-shadow:0 12px 30px rgba(0,0,0,.16)}
.module-guide h3{margin:4px 0 6px;color:#d8f3a8;font-size:19px}.module-guide p{margin:0;color:#cbc8c2;line-height:1.5}.guide-step{font-size:10px;font-weight:900;letter-spacing:1.8px;color:#81b64c}.guide-tip{min-width:230px;padding:12px 14px;border-left:3px solid #81b64c;border-radius:8px;background:rgba(0,0,0,.18)}.guide-tip strong,.guide-tip span{display:block}.guide-tip strong{margin-bottom:4px;color:#fff}.guide-tip span{color:#b9b5ae;font-size:12px;line-height:1.45}
.required-mark{margin-left:6px;color:#d9a441;font-size:10px;text-transform:uppercase;letter-spacing:.8px}.global-ux-toast{position:fixed;right:24px;bottom:24px;z-index:9999;max-width:360px;padding:13px 17px;border:1px solid #81b64c;border-radius:10px;background:#211f1d;color:#e9f7d4;box-shadow:0 14px 35px rgba(0,0,0,.38);opacity:0;transform:translateY(14px);pointer-events:none;transition:.22s ease}.global-ux-toast.show{opacity:1;transform:none}.global-ux-toast.error{border-color:#d46a6a;color:#ffd7d7}
.ux-help-overlay{position:fixed;inset:0;z-index:10000;display:grid;place-items:center;padding:24px;background:rgba(8,7,6,.78);backdrop-filter:blur(8px)}.ux-help-dialog{position:relative;width:min(620px,100%);max-height:90vh;overflow:auto;padding:30px;border:1px solid #81b64c;border-radius:18px;background:#282522;box-shadow:0 26px 90px rgba(0,0,0,.55)}.ux-help-dialog>img{width:62px;height:62px;object-fit:contain;border-radius:14px}.ux-help-dialog h3{margin:6px 0 18px;color:#d8f3a8;font-size:25px}.ux-help-dialog ol{display:grid;gap:10px;padding-left:22px;color:#d6d2cb;line-height:1.5}.ux-help-dialog li strong{color:#fff}.ux-help-note{margin:20px 0 0;padding:14px;border-radius:10px;background:#1f1d1b;color:#bfc9b2;line-height:1.5}.ux-help-close{position:absolute;right:16px;top:14px;width:36px;height:36px;border:1px solid #55514c;border-radius:50%;background:#211f1d;color:#fff;font-size:22px;cursor:pointer}
.settings-card p{color:#b8b6b2;line-height:1.5}.settings-card input::placeholder,.settings-card textarea::placeholder{color:#7f7b74}.settings-card button:focus-visible,.nav-button:focus-visible,.topbar-action:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible{outline:3px solid rgba(129,182,76,.35);outline-offset:2px}.settings-actions{flex-wrap:wrap}.settings-status:empty{display:none}.settings-status:not(:empty){padding:8px 10px;border-radius:7px;background:rgba(129,182,76,.1)}
@media(max-width:850px){.module-guide{align-items:flex-start;flex-direction:column}.guide-tip{width:100%;min-width:0}.topbar{align-items:flex-start;gap:16px;flex-direction:column}.topbar-actions{flex-wrap:wrap}}

/* Club Assistant live club theme */
:root{--theme-primary:#81b64c;--theme-accent:#b8df78;--theme-primary-rgb:129,182,76;--theme-accent-rgb:184,223,120}
.brand h1,.topbar h2,.settings-card h3,.command-motto span,.panel-kicker,.stat-tile strong,.product-credit strong{color:var(--theme-primary)!important}
.nav-button:hover,.nav-button.active,.settings-form button[type="submit"],.primary-action,.primary-button,.setup-primary,.event-tab.active{border-color:var(--theme-primary)!important;background:var(--theme-primary)!important;color:#10120d!important}
.nav-button:hover,.nav-button.active{background:rgba(var(--theme-primary-rgb),.16)!important;color:var(--theme-accent)!important}
.settings-form input:focus,.settings-form select:focus,.settings-form textarea:focus,.module-shell input:focus,.module-shell select:focus,.module-shell textarea:focus{border-color:var(--theme-primary)!important;box-shadow:0 0 0 3px rgba(var(--theme-primary-rgb),.18)!important;outline:none}
.command-panel,.settings-card,.module-card,.ux-guide-card{border-color:rgba(var(--theme-primary-rgb),.38)!important}
.icon-command,.secondary-button,.secondary-action{border-color:rgba(var(--theme-primary-rgb),.7)!important;color:var(--theme-accent)!important}
.icon-command:hover,.secondary-button:hover,.secondary-action:hover{box-shadow:0 0 18px rgba(var(--theme-primary-rgb),.22)!important;border-color:var(--theme-primary)!important}
.progress-energy{background:linear-gradient(90deg,var(--theme-primary),var(--theme-accent))!important;box-shadow:0 0 18px rgba(var(--theme-primary-rgb),.45)!important}
.brand-mark,.club-emblem-wrap,.settings-logo-preview{border-color:var(--theme-primary)!important}
.theme-presets{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:10px;margin-top:10px}
.theme-preset{display:flex;align-items:center;gap:9px;padding:10px!important;border:1px solid #55514c!important;border-radius:10px;background:#292724!important;color:#f4f4f4!important;cursor:pointer;text-align:left}
.theme-preset:hover,.theme-preset.active{border-color:var(--theme-primary)!important;box-shadow:0 0 0 2px rgba(var(--theme-primary-rgb),.14)!important}
.theme-swatches{display:flex;gap:4px}.theme-swatch{width:18px;height:18px;border-radius:50%;border:1px solid rgba(255,255,255,.35)}
.theme-preview{margin-top:14px;padding:15px;border:1px solid rgba(var(--theme-primary-rgb),.5);border-radius:12px;background:linear-gradient(145deg,rgba(var(--theme-primary-rgb),.1),#242220)}
.theme-preview-head{display:flex;align-items:center;justify-content:space-between;gap:12px}.theme-preview-title{color:var(--theme-accent);font-weight:800}.theme-preview-button{padding:8px 12px;border:0;border-radius:8px;background:var(--theme-primary);color:#10120d;font-weight:800}.theme-preview-accent{height:5px;margin-top:12px;border-radius:999px;background:linear-gradient(90deg,var(--theme-primary),var(--theme-accent))}
.color-field-row{display:grid;grid-template-columns:1fr 1fr;gap:12px}.color-field input[type=color]{width:100%;height:48px;padding:4px;cursor:pointer}.settings-help strong{color:var(--theme-accent)}


/* v1.2.5 — shared Matrix and scanner effects across every module */
#sectionContent {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  min-height: calc(100vh - 105px);
}
#sectionContent > :not(.global-matrix-rain):not(.global-scan-layer) {
  position: relative;
  z-index: 2;
}
.global-matrix-rain {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: .52;
  mix-blend-mode: screen;
  mask-image: linear-gradient(to bottom, rgba(0,0,0,.92), rgba(0,0,0,.42) 78%, transparent);
}
.global-scan-layer {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  overflow: hidden;
  background: repeating-linear-gradient(to bottom, transparent 0, transparent 4px, rgba(91,215,80,.025) 5px);
}
.global-scan-layer::after,
.help-scanline::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: -150px;
  height: 150px;
  background: linear-gradient(to bottom, transparent, rgba(91,215,80,.04) 38%, rgba(151,255,135,.30) 50%, rgba(91,215,80,.06) 62%, transparent);
  box-shadow: 0 0 25px rgba(91,215,80,.13);
  animation: globalScannerSweep 6.8s linear infinite;
}
.help-scanline { overflow: hidden; }
.help-matrix { opacity: .72; }
.matrix-rain { opacity: .68; }
@keyframes globalScannerSweep {
  from { transform: translateY(-150px); }
  to { transform: translateY(calc(100vh + 900px)); }
}
@media (prefers-reduced-motion: reduce) {
  .global-matrix-rain,
  .global-scan-layer,
  .help-scanline::after { display: none !important; }
}
