:root {
  --bg: #090c0f;
  --surface: #11161a;
  --surface-raised: #171d22;
  --surface-soft: #0d1114;
  --line: #263038;
  --line-strong: #36434d;
  --text: #f4f7f8;
  --text-soft: #b5c0c7;
  --muted: #74818a;
  --accent: #ff6846;
  --accent-soft: color-mix(in srgb, var(--accent) 14%, transparent);
  --cyan: #58c8df;
  --green: #4fd18b;
  --yellow: #f2c765;
  --red: #f06a72;
  --sidebar: 264px;
  --radius: 8px;
  --shadow: 0 18px 50px rgba(0,0,0,.22);
  --font: 'Manrope', sans-serif;
  --mono: 'Space Mono', monospace;
}

*, *::before, *::after { box-sizing: border-box; }
html { color-scheme: dark; scroll-behavior: smooth; }
body {
  margin: 0;
  min-width: 240px;
  min-height: 100vh;
  background: var(--bg);
  color: var(--text);
  font: 500 14px/1.5 var(--font);
  letter-spacing: 0;
}
button, input, select, textarea { font: inherit; letter-spacing: 0; }
button, a { -webkit-tap-highlight-color: transparent; }
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }
strong { font-weight: 750; }

::-webkit-scrollbar { width: 7px; height: 5px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #3a464f; border-radius: 8px; }

.app-shell { min-height: 100vh; }
.app-sidebar {
  position: fixed;
  inset: 0 auto 0 0;
  z-index: 50;
  display: flex;
  width: var(--sidebar);
  flex-direction: column;
  padding: 18px 14px;
  background: #0c1013;
  border-right: 1px solid var(--line);
}
.brand {
  display: flex;
  align-items: center;
  min-height: 58px;
  gap: 12px;
  padding: 5px 10px 17px;
  border-bottom: 1px solid var(--line);
}
.brand-mark {
  position: relative;
  display: grid;
  width: 40px;
  height: 40px;
  flex: 0 0 40px;
  place-items: center;
  background: #291715;
  border: 1px solid #603127;
  clip-path: polygon(50% 0, 92% 24%, 92% 76%, 50% 100%, 8% 76%, 8% 24%);
}
.brand-mark span { width: 15px; height: 20px; background: var(--accent); box-shadow: 0 0 20px color-mix(in srgb,var(--accent) 50%,transparent); }
.brand-copy { display: grid; }
.brand-copy strong { font-size: 16px; line-height: 1.15; text-transform: uppercase; }
.brand-copy small { margin-top: 4px; color: var(--accent); font: 700 9px/1 var(--mono); text-transform: uppercase; }
.main-nav { flex: 1; min-height: 0; padding: 17px 0; overflow-y: auto; }
.nav-label { margin: 0 10px 8px; color: #5f6b73; font: 700 9px/1 var(--mono); text-transform: uppercase; }
.nav-label-spaced { margin-top: 24px; }
.nav-item {
  display: flex;
  min-height: 43px;
  align-items: center;
  gap: 11px;
  margin: 3px 0;
  padding: 9px 11px;
  color: #9eabb3;
  border: 1px solid transparent;
  border-radius: 6px;
  font-weight: 650;
  transition: color .15s, background .15s, border-color .15s;
}
.nav-item img { width: 21px; height: 21px; object-fit: contain; image-rendering: pixelated; opacity: .78; }
.nav-glyph { display: grid; width: 21px; height: 21px; place-items: center; color: var(--muted); font: 700 9px/1 var(--mono); }
.nav-item:hover { color: var(--text); background: var(--surface); border-color: var(--line); }
.nav-item.active { color: var(--text); background: var(--accent-soft); border-color: color-mix(in srgb,var(--accent) 32%,var(--line)); box-shadow: inset 3px 0 var(--accent); }
.nav-item.active img { opacity: 1; }
.sidebar-account { position: relative; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); }
.account-trigger { display: flex; width: 100%; align-items: center; gap: 10px; padding: 9px; color: var(--text); background: transparent; border: 0; cursor: pointer; text-align: left; }
.account-avatar { width: 42px; height: 42px; flex: 0 0 42px; border: 1px solid var(--line-strong); border-radius: 5px; image-rendering: pixelated; }
.account-copy { display: grid; flex: 1; min-width: 0; }
.account-copy strong { overflow: hidden; font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.account-copy small { margin-top: 3px; color: var(--muted); font-size: 10px; }
.status-dot { display: inline-block; width: 7px; height: 7px; margin-right: 5px; background: var(--muted); border-radius: 50%; }
.status-dot.is-online { background: var(--green); box-shadow: 0 0 9px rgba(79,209,139,.5); }
.account-chevron { color: var(--muted); }
.account-menu { position: absolute; right: 0; bottom: calc(100% + 8px); left: 0; display: none; padding: 6px; background: #151b20; border: 1px solid var(--line-strong); border-radius: var(--radius); box-shadow: var(--shadow); }
.account-menu.is-open { display: grid; }
.account-menu a { padding: 9px 10px; border-radius: 5px; color: var(--text-soft); font-size: 12px; }
.account-menu a:hover { background: #20272d; color: var(--text); }
.account-menu a.is-danger { color: #ff858a; }

.app-main { min-height: 100vh; margin-left: var(--sidebar); }
.app-topbar {
  position: sticky;
  top: 0;
  z-index: 30;
  display: flex;
  min-height: 72px;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 12px 30px;
  background: rgba(9,12,15,.9);
  border-bottom: 1px solid var(--line);
  backdrop-filter: blur(18px);
}
.topbar-kicker { display: block; margin-bottom: 2px; color: var(--muted); font: 700 9px/1.2 var(--mono); text-transform: uppercase; }
.app-topbar h1 { margin: 0; font-size: 17px; line-height: 1.25; }
.topbar-actions { display: flex; align-items: center; gap: 8px; }
.page-container { width: min(100%, 1500px); margin: 0 auto; padding: 26px 30px 60px; }
.mobile-nav { display: none; }

.page-stack, .stack { display: grid; gap: 16px; }
.page-heading { display: flex; align-items: end; justify-content: space-between; gap: 20px; margin-bottom: 2px; }
.page-heading h2 { margin: 0; font-size: 24px; line-height: 1.2; }
.page-heading p { max-width: 680px; margin: 7px 0 0; color: var(--muted); }
.eyebrow { display: block; margin-bottom: 8px; color: var(--accent); font: 700 9px/1 var(--mono); text-transform: uppercase; }
.section-title { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.section-title h2, .section-title h3 { margin: 0; font-size: 14px; }
.section-title p { margin: 3px 0 0; color: var(--muted); font-size: 12px; }

.panel, .card, .glass, .widget, .ranking-card, .history-card, .history-head {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}
.panel, .card, .widget, .ranking-card, .history-card, .history-head { padding: 18px; }
.panel-muted { background: var(--surface-soft); }
.panel-header, .widget-head, .ranking-card-title, .bank-widget-head { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-bottom: 14px; }
.panel-title, .card-title, .widget-title { margin: 0; color: var(--text); font-size: 14px; font-weight: 750; }
.card-title { padding-bottom: 12px; border-bottom: 1px solid var(--line); }
.panel-subtitle, .muted-copy, .section-copy, .widget-kicker, .premium-note, .history-meta { color: var(--muted); font-size: 12px; }
.section-copy { font-size: 14px; line-height: 1.65; }

.metric-grid, .stat-grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 10px; }
.metric-grid.is-six { grid-template-columns: repeat(6,minmax(0,1fr)); }
.metric, .stat-card, .mini-panel, .finance-stat, .chart-kpi, .bank-summary-item {
  position: relative;
  min-width: 0;
  padding: 15px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
}
.metric::before, .stat-card::before { content: ''; position: absolute; inset: 14px auto 14px 0; width: 2px; background: var(--metric-color,var(--accent)); }
.metric-label, .stat-label { display: block; color: #83919a; font: 700 8px/1.3 var(--mono); text-transform: uppercase; }
.metric-value, .stat-value { display: block; margin-top: 9px; overflow-wrap: anywhere; color: var(--text); font-size: 24px; font-weight: 800; line-height: 1.12; }
.metric-sub, .stat-sub { margin-top: 5px; color: var(--muted); font-size: 11px; }

.btn, .premium-btn, .finance-tool, .period-tab, .section-tab, .team-tab {
  display: inline-flex;
  min-height: 38px;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 8px 12px;
  color: #d5dce0;
  background: var(--surface-raised);
  border: 1px solid var(--line-strong);
  border-radius: 6px;
  font-size: 11px;
  font-weight: 750;
  cursor: pointer;
  transition: border-color .15s, color .15s, background .15s, transform .15s;
}
.btn:hover, .premium-btn:hover, .finance-tool:hover, .period-tab:hover, .section-tab:hover, .team-tab:hover { color: var(--text); border-color: #60707b; }
.btn-primary, .btn-red, .premium-btn.primary, .finance-tool.active, .period-tab.active, .section-tab.active, .team-tab.active, .is-active.btn {
  color: #1b0c08;
  background: var(--accent);
  border-color: var(--accent);
}
.btn-ghost, .btn-dark { background: transparent; }
.btn-secondary { color: var(--text-soft); background: #151b20; border-color: var(--line-strong); }
.btn-secondary:hover { color: var(--text); background: #1b2329; }
.btn-small { min-height: 32px; padding: 6px 9px; font-size: 10px; }
.btn-danger { color: #ff8d92; border-color: rgba(240,106,114,.4); background: rgba(240,106,114,.08); }
.btn-link, .profile-link { padding: 0; color: var(--accent); background: none; border: 0; font-size: 11px; font-weight: 750; }
.button-row, .form-actions, .hero-actions, .finance-tools, .bank-controls { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }

.field-group, .custom-field { display: grid; gap: 6px; }
.field-label, .field-group label, .field-group > span, .custom-field label { color: #8c99a2; font: 700 9px/1.3 var(--mono); text-transform: uppercase; }
.field, input:not([type=checkbox]):not([type=radio]), select, textarea {
  width: 100%;
  min-height: 42px;
  padding: 9px 11px;
  color: var(--text);
  background: #0b0f12;
  border: 1px solid var(--line-strong);
  border-radius: 6px;
  outline: none;
}
textarea { min-height: 96px; resize: vertical; }
.field:focus, input:focus, select:focus, textarea:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
input[type=checkbox], input[type=radio] { accent-color: var(--accent); }
input[type=color] { min-height: 42px; padding: 5px; }

/* Twitch supporters */
.twitch-page, .twitch-admin, .twitch-connect { --accent: #9146ff; --accent-soft: rgba(145,70,255,.14); }
.twitch-glyph, .nav-twitch.active .twitch-glyph { color: #bf94ff; font-size: 12px; }
.nav-twitch.active { background: rgba(145,70,255,.14); border-color: rgba(169,112,255,.38); box-shadow: inset 3px 0 #9146ff; }
.twitch-connect { max-width: 720px; margin: 7vh auto; padding: 42px; text-align: center; background: radial-gradient(circle at 50% 0,rgba(145,70,255,.2),transparent 52%),var(--surface); }
.twitch-connect h2 { margin: 5px 0 10px; font-size: 28px; }
.twitch-connect > p { max-width: 540px; margin: 0 auto 24px; color: var(--text-soft); }
.twitch-logo, .twitch-avatar { display: grid; width: 64px; height: 64px; margin: 0 auto 18px; place-items: center; color: white; background: #9146ff; border: 1px solid #bf94ff; border-radius: 12px; font: 800 27px/1 var(--mono); box-shadow: 0 14px 45px rgba(145,70,255,.25); }
.privacy-strip { display: grid; gap: 4px; margin: 0 auto 20px; padding: 14px; color: var(--text-soft); background: rgba(79,209,139,.06); border: 1px solid rgba(79,209,139,.24); border-radius: var(--radius); font-size: 12px; text-align: left; }
.privacy-strip strong { color: var(--green); }
.btn-twitch { color: #fff; background: #9146ff; border-color: #a970ff; }
.btn-twitch:hover { color: #fff; background: #a15cff; border-color: #c6a5ff; }
.btn:disabled { opacity: .42; cursor: not-allowed; }
.twitch-hero { display: flex; align-items: center; justify-content: space-between; gap: 18px; background: linear-gradient(100deg,rgba(145,70,255,.14),transparent 55%),var(--surface); }
.twitch-profile { display: flex; align-items: center; gap: 15px; }
.twitch-profile img, .twitch-profile .twitch-avatar { width: 58px; height: 58px; margin: 0; border: 2px solid #9146ff; border-radius: 10px; }
.twitch-profile h2 { margin: 0; font-size: 20px; }.twitch-profile p { margin: 4px 0 0; color: var(--muted); font-size: 11px; }
.twitch-metric { --metric-color:#9146ff; }
.tier-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 10px; }.tier-card { display: flex; align-items: center; gap: 13px; padding: 15px; background: var(--surface-soft); border: 1px solid var(--line); border-radius: var(--radius); }.tier-card > span { display: grid; width: 42px; height: 42px; place-items: center; background: #242b31; border-radius: 6px; font: 800 12px/1 var(--mono); }.tier-card div { display:grid; }.tier-card small { margin-top:3px;color:var(--muted); }.tier-card.is-current { border-color:#9146ff; box-shadow:inset 3px 0 #9146ff; }.tier-card.is-current > span { color:#fff;background:#9146ff; }
.twitch-shop-grid { display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:10px; }.shop-card { display:grid;padding:17px;background:var(--surface-soft);border:1px solid var(--line);border-radius:var(--radius); }.shop-icon { display:grid;width:40px;height:40px;place-items:center;color:#bf94ff;background:rgba(145,70,255,.12);border:1px solid rgba(145,70,255,.3);border-radius:6px;font-size:19px; }.shop-card h3 { margin:13px 0 4px; }.shop-card p { min-height:38px;margin:0 0 14px;color:var(--muted);font-size:12px; }.shop-card > div:last-child { display:flex;align-items:center;justify-content:space-between;gap:8px; }.shop-card form { margin:0; }
.badge,.status-pill { padding:6px 9px;color:var(--muted);background:var(--surface);border:1px solid var(--line);border-radius:99px;font:700 9px/1 var(--mono);text-transform:uppercase; }.status-pill.is-success { color:var(--green);border-color:rgba(79,209,139,.35); }.admin-tier-grid { display:grid;grid-template-columns:repeat(3,1fr);gap:10px; }.config-card { display:grid;gap:11px;padding:15px;background:var(--surface-soft);border:1px solid var(--line);border-radius:var(--radius); }.config-card h3 { margin:0;color:#bf94ff; }.check-row { color:var(--text-soft);font-size:11px; }.admin-list { display:grid;gap:8px; }.admin-row-form { display:grid;grid-template-columns:55px 1fr 1.5fr 80px 1.2fr 1.5fr auto auto;gap:7px;align-items:center;padding:8px;background:var(--surface-soft);border:1px solid var(--line);border-radius:var(--radius); }.admin-row-form input,.admin-row-form select { min-width:0; }.admin-row-form label { white-space:nowrap;font-size:10px; }.admin-row-form.is-new { border-style:dashed;border-color:rgba(145,70,255,.5); }
.integration-steps { display:grid;grid-template-columns:1fr 1fr;gap:9px;margin-bottom:14px; }.integration-step { display:flex;align-items:center;gap:11px;padding:12px;background:var(--surface-soft);border:1px solid var(--line);border-radius:var(--radius); }.integration-step > b { display:grid;width:30px;height:30px;flex:0 0 30px;place-items:center;color:var(--muted);background:var(--surface-raised);border-radius:50%;font:700 10px/1 var(--mono); }.integration-step span { display:grid; }.integration-step small { margin-top:3px;color:var(--muted); }.integration-step.is-done { border-color:rgba(79,209,139,.35); }.integration-step.is-done > b { color:#07180f;background:var(--green); }.twitch-account-link { --accent:#9146ff;--accent-soft:rgba(145,70,255,.14); }
.purchase-code-list { display:grid;gap:8px; }.purchase-code { display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px;background:var(--surface-soft);border:1px solid var(--line);border-radius:var(--radius); }.purchase-code > div { display:grid; }.purchase-code small { margin-top:3px;color:var(--muted); }.purchase-code code,.redemption-head code { padding:7px 9px;color:#d6baff;background:rgba(145,70,255,.1);border:1px solid rgba(145,70,255,.3);border-radius:5px;font:700 11px/1 var(--mono); }.code-search { display:grid;grid-template-columns:minmax(220px,1fr) auto;gap:8px;margin-bottom:14px; }.redemption-result { display:grid;gap:15px;padding:16px;background:var(--surface-soft);border:1px solid rgba(145,70,255,.4);border-radius:var(--radius); }.redemption-result.is-used { border-color:rgba(79,209,139,.35); }.redemption-head { display:flex;align-items:center;justify-content:space-between;gap:12px; }.redemption-head h3 { margin:8px 0 0; }.redemption-result form { display:grid;gap:9px; }
@media (max-width:900px) { .tier-grid,.admin-tier-grid,.integration-steps { grid-template-columns:1fr; }.admin-row-form { grid-template-columns:1fr 1fr; }.twitch-hero { align-items:flex-start;flex-direction:column; }.purchase-code { align-items:flex-start;flex-direction:column; }.code-search { grid-template-columns:1fr; } }

/* Club Twitch premium */
.twitch-premium { --tw:#9146ff; --tw-light:#c9a7ff; --tw-soft:rgba(145,70,255,.12); display:grid; gap:20px; }
.supporter-head { position:relative; display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:center; gap:24px; min-height:150px; padding:26px 28px; overflow:hidden; border:1px solid color-mix(in srgb,var(--tw) 38%,var(--line)); border-radius:7px; background:#11151a; }
.supporter-head::before { content:""; position:absolute; inset:-120px auto auto -80px; width:390px; height:300px; background:radial-gradient(circle,rgba(145,70,255,.27),transparent 68%); pointer-events:none; }
.supporter-head::after { content:""; position:absolute; inset:0; opacity:.13; background-image:linear-gradient(rgba(255,255,255,.08) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.08) 1px,transparent 1px); background-size:34px 34px; mask-image:linear-gradient(90deg,transparent 20%,#000); pointer-events:none; }
.supporter-identity,.supporter-wallet { position:relative; z-index:1; }.supporter-identity { display:flex; align-items:center; gap:18px; min-width:0; }
.supporter-avatar-wrap { position:relative; display:grid; width:84px; height:84px; flex:0 0 84px; place-items:center; padding:4px; border:1px solid rgba(201,167,255,.55); border-radius:7px; background:rgba(145,70,255,.1); box-shadow:0 15px 40px rgba(0,0,0,.3); }
.supporter-avatar-wrap img,.supporter-avatar-wrap > span { width:74px; height:74px; border-radius:4px; object-fit:cover; }.supporter-avatar-wrap > span { display:grid; place-items:center; color:white; background:var(--tw); font:800 28px/1 var(--mono); }
.supporter-avatar-wrap i { position:absolute; right:-4px; bottom:-4px; width:15px; height:15px; border:3px solid #11151a; border-radius:50%; background:var(--green); box-shadow:0 0 13px rgba(79,209,139,.7); }
.supporter-kicker { display:block; color:var(--tw-light); font:700 9px/1.2 var(--mono); letter-spacing:.08em; text-transform:uppercase; }.supporter-identity h2 { margin:5px 0 4px; font-size:32px; letter-spacing:-.03em; }.supporter-identity p { margin:0; color:var(--muted); }
.supporter-sub-level { position:relative; z-index:1; display:inline-flex; align-items:center; gap:7px; margin-top:10px; padding:5px 9px 5px 5px; color:var(--muted); border:1px solid var(--line); border-radius:999px; background:rgba(5,8,11,.48); font:700 9px/1 var(--mono); text-transform:uppercase; }.supporter-sub-level b { display:grid; min-width:27px; height:23px; padding:0 5px; place-items:center; color:var(--muted); border-radius:999px; background:var(--surface-raised); }.supporter-sub-level.is-active { color:#e9dcff; border-color:rgba(145,70,255,.42); background:rgba(145,70,255,.12); }.supporter-sub-level.is-active b { color:#fff; background:var(--tw); box-shadow:0 0 18px rgba(145,70,255,.35); }
.supporter-wallet { display:grid; min-width:190px; justify-items:end; padding-left:28px; border-left:1px solid rgba(201,167,255,.24); }.supporter-wallet span { color:var(--muted); font:700 8px/1 var(--mono); letter-spacing:.08em; text-transform:uppercase; }.supporter-wallet strong { margin:5px 0 0; color:white; font-size:48px; line-height:1; text-shadow:0 0 30px rgba(145,70,255,.48); }.supporter-wallet small { margin-top:5px; color:var(--tw-light); }
.supporter-progress-band { display:grid; grid-template-columns:minmax(175px,.8fr) minmax(320px,1.5fr) minmax(190px,.8fr); align-items:center; gap:22px; padding:17px 20px; border:1px solid var(--line); border-radius:6px; background:var(--surface); }
.supporter-lifetime span,.supporter-lifetime strong,.supporter-next span,.supporter-next strong,.supporter-next small { display:block; }.supporter-lifetime > span,.supporter-next > span { color:var(--muted); font:700 8px/1.2 var(--mono); letter-spacing:.06em; text-transform:uppercase; }.supporter-lifetime strong { margin-top:4px; font-size:20px; }.supporter-lifetime small { color:var(--muted); font-size:10px; }
.gift-conversion { display:grid; grid-template-columns:repeat(3,1fr); min-height:58px; border:1px solid var(--line); border-radius:5px; background:var(--surface-soft); }.gift-conversion > div { display:flex; align-items:center; justify-content:center; gap:9px; border-left:1px solid var(--line); }.gift-conversion > div:first-child { border-left:0; }.gift-conversion b { display:grid; width:29px; height:29px; place-items:center; color:var(--tw-light); background:var(--tw-soft); border-radius:4px; font:800 9px/1 var(--mono); }.gift-conversion span { display:grid; }.gift-conversion strong { font-size:15px; }.gift-conversion small { color:var(--muted); font-size:8px; }
.supporter-next { padding-left:20px; border-left:1px solid var(--line); }.supporter-next strong { margin:4px 0 2px; overflow:hidden; color:var(--tw-light); text-overflow:ellipsis; white-space:nowrap; }.supporter-next small { color:var(--muted); font-size:9px; }
.supporter-main-grid { display:grid; grid-template-columns:minmax(0,1fr) 270px; align-items:start; gap:14px; }.supporter-store,.supporter-rules,.supporter-trust,.supporter-vault { border:1px solid var(--line); border-radius:6px; background:var(--surface); }.supporter-store,.supporter-vault { padding:21px; }
.supporter-section-head { display:flex; align-items:flex-end; justify-content:space-between; gap:20px; margin-bottom:17px; }.supporter-section-head h3 { margin:4px 0 4px; font-size:20px; }.supporter-section-head p { margin:0; color:var(--muted); font-size:11px; }.store-availability { display:grid; justify-items:end; }.store-availability strong { color:var(--tw-light); font-size:24px; line-height:1; }.store-availability span { margin-top:4px; color:var(--muted); font-size:9px; }
.supporter-shop-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:9px; }.supporter-product { --product-accent:var(--tw); position:relative; display:grid; grid-template-rows:auto 1fr auto; min-height:238px; padding:15px; overflow:hidden; border:1px solid var(--line); border-left:3px solid color-mix(in srgb,var(--product-accent) 55%,var(--line)); border-radius:5px; background:var(--surface-soft); transition:transform .18s,border-color .18s,background .18s; }.supporter-product::before { content:""; position:absolute; top:-55px; right:-45px; width:150px; height:150px; border-radius:50%; background:radial-gradient(circle,color-mix(in srgb,var(--product-accent) 13%,transparent),transparent 70%); pointer-events:none; }.supporter-product:hover { transform:translateY(-3px); border-color:color-mix(in srgb,var(--product-accent) 58%,var(--line)); }.supporter-product.is-affordable { background:color-mix(in srgb,var(--product-accent) 5%,var(--surface-soft)); border-left-color:var(--product-accent); }
.supporter-product > header { position:relative; display:flex; align-items:center; gap:9px; }.product-number { color:#56616a; font:700 8px/1 var(--mono); }.product-icon { display:grid; width:34px; height:34px; place-items:center; color:var(--product-accent); background:color-mix(in srgb,var(--product-accent) 11%,transparent); border:1px solid color-mix(in srgb,var(--product-accent) 25%,var(--line)); border-radius:5px; font-size:15px; }.product-price { margin-left:auto; padding:5px 7px; color:var(--product-accent); background:color-mix(in srgb,var(--product-accent) 9%,transparent); border-radius:4px; font:800 9px/1 var(--mono); }
.product-copy { position:relative; align-self:center; padding:17px 0 13px; }.product-copy > span { color:var(--product-accent); font:700 8px/1.2 var(--mono); text-transform:uppercase; }.product-copy h4 { margin:6px 0 7px; font-size:16px; }.product-copy p { margin:0; color:var(--muted); font-size:10px; line-height:1.6; }
.supporter-product > footer { position:relative; display:flex; min-height:36px; align-items:center; justify-content:space-between; gap:8px; padding-top:11px; border-top:1px solid var(--line); }.supporter-product > footer > div { display:flex; align-items:center; gap:6px; color:var(--muted); font-size:8px; }.supporter-product > footer i { width:6px; height:6px; border-radius:50%; background:var(--green); box-shadow:0 0 8px rgba(79,209,139,.6); }.supporter-product form { margin:0; }.product-buy { display:flex; min-height:31px; align-items:center; gap:9px; padding:6px 9px; color:#160d22; background:var(--tw-light); border:0; border-radius:4px; font-size:9px; font-weight:800; cursor:pointer; }.product-buy b { font-size:13px; }.product-buy:disabled { color:#68737b; background:#22292e; cursor:not-allowed; }
.product-site_customization { --product-accent:#68d4e8; }.product-unban { --product-accent:#e3b754; }.product-giveall_epic { --product-accent:#b880ff; }.product-ban_owner { --product-accent:#e96565; }.product-server_finale { --product-accent:#f0cf72; grid-column:1/-1; min-height:205px; border-color:rgba(240,207,114,.32); background:linear-gradient(105deg,rgba(240,207,114,.07),rgba(145,70,255,.06)),var(--surface-soft); }.product-server_finale .product-copy h4 { font-size:20px; }
.supporter-sidebar { position:sticky; top:92px; display:grid; gap:10px; }.supporter-rules { padding:18px; }.supporter-rules h3 { margin:5px 0 15px; font-size:16px; }.supporter-rule-list { display:grid; }.supporter-rule-list > div { position:relative; display:grid; grid-template-columns:29px 1fr; align-items:center; gap:10px; min-height:64px; border-top:1px solid var(--line); }.supporter-rule-list > div:first-child { border-top:0; }.supporter-rule-list b { display:grid; width:27px; height:27px; place-items:center; color:var(--tw-light); background:var(--tw-soft); border-radius:50%; font:800 9px/1 var(--mono); }.supporter-rule-list span { display:grid; gap:3px; }.supporter-rule-list strong { font-size:10px; }.supporter-rule-list small { color:var(--muted); font-size:8px; line-height:1.45; }
.supporter-trust { display:grid; gap:7px; padding:17px; background:linear-gradient(145deg,rgba(79,209,139,.055),transparent),var(--surface); }.supporter-trust > span { color:var(--green); font:700 8px/1 var(--mono); text-transform:uppercase; }.supporter-trust strong { font-size:11px; line-height:1.5; }.supporter-trust small { color:var(--muted); font-size:9px; }
.supporter-voucher-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:9px; }.supporter-voucher { position:relative; display:grid; min-height:165px; padding:14px 16px; overflow:hidden; border:1px solid color-mix(in srgb,var(--tw) 35%,var(--line)); border-radius:5px; background:linear-gradient(135deg,rgba(145,70,255,.08),transparent 65%),var(--surface-soft); }.voucher-cut { position:absolute; top:0; bottom:0; left:10px; width:1px; border-left:1px dashed rgba(201,167,255,.23); }.supporter-voucher > header { display:flex; justify-content:space-between; padding-left:8px; color:var(--muted); font:700 8px/1 var(--mono); }.supporter-voucher header b { color:var(--tw-light); }.supporter-voucher h4 { margin:18px 0 9px 8px; font-size:13px; }.supporter-voucher code { width:max-content; margin-left:8px; padding:7px 8px; color:white; background:rgba(145,70,255,.24); border:1px solid rgba(201,167,255,.3); border-radius:4px; font:700 11px/1 var(--mono); letter-spacing:.05em; }.supporter-voucher footer { display:flex; align-items:end; justify-content:space-between; gap:8px; margin:13px 0 0 8px; }.supporter-voucher footer span { color:var(--tw-light); font-size:9px; font-weight:800; }.supporter-voucher footer small { color:var(--muted); font-size:7px; }.supporter-voucher.is-used { opacity:.55; filter:saturate(.5); }.voucher-delivered { align-self:end; margin-left:8px; color:var(--green); font-size:10px; }
.supporter-account-foot { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:3px 2px; color:var(--muted); font-size:9px; }.supporter-account-foot form { margin:0; }.supporter-account-foot button { padding:0; color:#8a969e; background:none; border:0; font-size:9px; cursor:pointer; }.supporter-account-foot button:hover { color:#ff858a; }
@media (max-width:1100px) { .supporter-main-grid { grid-template-columns:1fr; }.supporter-sidebar { position:static; grid-template-columns:1fr 1fr; }.supporter-voucher-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:760px) { .supporter-head { grid-template-columns:1fr; padding:21px; }.supporter-wallet { justify-items:start; padding:17px 0 0; border-top:1px solid rgba(201,167,255,.2); border-left:0; }.supporter-wallet strong { font-size:40px; }.supporter-progress-band { grid-template-columns:1fr; gap:13px; }.supporter-next { padding:13px 0 0; border-top:1px solid var(--line); border-left:0; }.supporter-shop-grid,.supporter-sidebar,.supporter-voucher-grid { grid-template-columns:1fr; }.product-server_finale { grid-column:auto; }.supporter-section-head { align-items:flex-start; flex-direction:column; }.store-availability { justify-items:start; }.supporter-store,.supporter-vault { padding:16px; } }
@media (max-width:470px) { .supporter-identity { align-items:flex-start; }.supporter-avatar-wrap { width:62px; height:62px; flex-basis:62px; }.supporter-avatar-wrap img,.supporter-avatar-wrap > span { width:52px; height:52px; }.supporter-identity h2 { font-size:23px; }.supporter-identity p { font-size:9px; }.gift-conversion { grid-template-columns:1fr; }.gift-conversion > div { justify-content:flex-start; padding:10px 13px; border-top:1px solid var(--line); border-left:0; }.gift-conversion > div:first-child { border-top:0; }.supporter-product { min-height:225px; }.supporter-account-foot { align-items:flex-start; flex-direction:column; } }
.form-grid, .custom-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 13px; }
.check-line { display: flex; align-items: center; gap: 8px; color: var(--text-soft); }

.badge, .grade-badge, .rank-badge { display: inline-flex; width: max-content; align-items: center; padding: 4px 7px; color: var(--text-soft); background: #192026; border: 1px solid var(--line-strong); border-radius: 4px; font: 700 8px/1.2 var(--mono); text-transform: uppercase; }
.badge-red { color: #ff9a83; border-color: rgba(255,104,70,.35); background: rgba(255,104,70,.08); }
.badge-green { color: #72dda4; border-color: rgba(79,209,139,.35); background: rgba(79,209,139,.08); }
.badge-yellow { color: var(--yellow); }
.badge-neutral { color: #aeb9bf; background: #171e23; border-color: var(--line-strong); }
.badge-success { color: #72dda4; background: rgba(55,201,141,.09); border-color: rgba(55,201,141,.3); }
.badge-warning { color: #ffd166; background: rgba(255,209,102,.09); border-color: rgba(255,209,102,.28); }
.badge-danger { color: #ff8b92; background: rgba(255,93,103,.1); border-color: rgba(255,93,103,.3); }
.notice, .alert { padding: 12px 14px; color: #f8cec5; background: #211615; border: 1px solid #543129; border-radius: 6px; }
.notice-success, .alert-success { color: #b9f3d2; background: #102019; border-color: #275d42; }
.notice-info { color: #b9eaf5; background: #0e1d22; border-color: #285865; }
.notice-error { color: #ffc0c4; background: #241113; border-color: #653037; }
.toast-stack { display: grid; gap: 8px; margin-bottom: 16px; }
.empty, .empty-rank { display: grid; min-height: 120px; place-items: center; padding: 24px; color: var(--muted); background: var(--surface-soft); border: 1px dashed var(--line-strong); border-radius: var(--radius); text-align: center; }

.data-list, .history-list, .job-list, .quest-list, .activity-list, .sanction-list, .notification-list, .favorite-list { display: grid; gap: 8px; }
.data-row, .row-line, .job-row, .quest-row, .activity-row, .sanction-row, .notification-row, .favorite-row, .history-row {
  display: grid;
  grid-template-columns: minmax(0,1fr) auto;
  align-items: center;
  gap: 14px;
  padding: 12px;
  background: var(--surface-soft);
  border: 1px solid #20282e;
  border-radius: 6px;
}
.row-head { display: flex; justify-content: space-between; gap: 10px; align-items: center; }
.progress, .xp-bar-wrap { height: 6px; margin-top: 9px; background: #222b31; border-radius: 4px; overflow: hidden; }
.progress > span, .xp-bar-fill { display: block; height: 100%; background: var(--accent); border-radius: inherit; }
.state, .history-state { color: var(--muted); font-size: 11px; }
.state.active, .history-state.active { color: var(--green); }
.pagination { display: flex; justify-content: center; align-items: center; gap: 8px; margin-top: 14px; }
.pagination a, .pagination span { padding: 7px 10px; border: 1px solid var(--line); border-radius: 5px; }

.data-table-wrap, .table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius); }
.data-table, table { width: 100%; border-collapse: collapse; }
th { padding: 10px 12px; color: #7c8992; background: #0e1316; font: 700 8px/1.3 var(--mono); text-align: left; text-transform: uppercase; }
td { padding: 11px 12px; color: var(--text-soft); border-top: 1px solid var(--line); vertical-align: middle; }
tr:hover td { background: rgba(255,255,255,.015); }

.split-layout, .dashboard-grid, .ranking-layout { display: grid; grid-template-columns: minmax(0,1.45fr) minmax(300px,.55fr); gap: 14px; align-items: start; }
.two-column, .chart-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 14px; }
.three-column { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 14px; }
.auto-grid, .panel-grid, .public-team-grid, .claim-upgrades, .claim-map, .job-grid { display: grid; grid-template-columns: repeat(auto-fit,minmax(210px,1fr)); gap: 10px; }

.profile-hero, .team-hero, .ranking-hero {
  position: relative;
  min-height: 300px;
  padding: 0;
  overflow: hidden;
  background: #0b0f12 url('../img/creatium-world.webp') center/cover no-repeat;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
}
.hero-banner, .team-banner { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; background-size: cover; background-position: center; }
.hero-shade, .team-hero-shade { position: absolute; inset: 0; background: linear-gradient(90deg,rgba(7,10,12,.95),rgba(7,10,12,.58) 50%,rgba(7,10,12,.14)), linear-gradient(0deg,rgba(7,10,12,.8),transparent 60%); }
.hero-content, .team-hero-content { position: relative; z-index: 1; display: flex; min-height: 300px; align-items: end; justify-content: space-between; gap: 22px; padding: 26px; }
.identity { display: flex; align-items: center; gap: 17px; }
.avatar-shell, .team-logo { display: grid; width: 106px; height: 106px; flex: 0 0 106px; place-items: center; overflow: hidden; color: var(--text); background: #161b1f; border: 3px solid var(--accent); border-radius: 7px; font-size: 30px; }
.avatar-shell canvas, .avatar-shell img, .team-logo img { width: 100%; height: 100%; object-fit: cover; image-rendering: pixelated; }
.player-title, .ranking-title { margin: 0; font-size: 26px; font-weight: 800; line-height: 1.15; }
.premium-note { margin-top: 8px; color: #b6c1c7; }
.team-tabs, .section-tabs, .period-tabs { display: flex; gap: 6px; overflow-x: auto; padding-bottom: 4px; }
.team-tab, .section-tab, .period-tab { flex: 0 0 auto; }
.team-shell, .ranking-shell, .quest-page, .jobs-page, .premium-shell, .history-shell, .profile-shell { display: grid; gap: 15px; }
.team-banner { opacity: .7; }
.public-team { padding: 0; overflow: hidden; }
.public-team-banner { height: 100px; background: #151b1f; }
.public-team-banner img { width: 100%; height: 100%; object-fit: cover; }
.public-team-body { display: flex; align-items: center; gap: 12px; padding: 13px; }
.public-team-card { overflow: hidden; background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); }
.public-team-content { display: flex; align-items: center; gap: 13px; padding: 14px; }
.public-team-content h3 { margin: 0; }
.public-team-content p { margin: 5px 0 9px; color: var(--muted); font-size: 11px; }
.team-banner { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.team-identity h2 { margin: 5px 0 9px; font-size: 30px; }
.team-identity p { margin: 9px 0 0; color: #bbc5ca; }
.team-logo { display: grid; width: 96px; height: 96px; flex: 0 0 96px; place-items: center; overflow: hidden; background: #0b0f12; border: 1px solid var(--line-strong); border-radius: 7px; font: 800 30px/1 var(--mono); }
.team-logo img { width: 100%; height: 100%; object-fit: cover; }
.team-logo-small { width: 58px; height: 58px; flex-basis: 58px; font-size: 20px; }
.team-tabs a { flex: 0 0 auto; padding: 10px 12px; color: var(--muted); background: var(--surface); border: 1px solid var(--line); border-radius: 6px; font-size: 10px; font-weight: 700; }
.team-tabs a.is-active { color: var(--text); background: var(--accent-soft); border-color: rgba(255,104,70,.45); }
.xp-guide { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 9px; }
.xp-guide > div { padding: 13px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); }
.xp-guide b { color: var(--accent); font: 700 13px/1 var(--mono); }
.xp-guide p { margin: 9px 0 0; color: var(--muted); font-size: 11px; }
.claim-upgrade { display: grid; gap: 8px; padding: 13px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); }
.claim-upgrade > span:first-child { display: flex; align-items: center; gap: 5px; }
.claim-upgrade small { color: var(--muted); }
.claim-map { grid-template-columns: repeat(auto-fit,minmax(130px,1fr)); }
.claim-tile { display: grid; gap: 8px; min-height: 118px; padding: 11px; background: var(--surface); border: 1px solid var(--line); border-top: 4px solid var(--claim-color); border-radius: 5px; }
.claim-tile small { color: var(--muted); }
.member-list { display: grid; gap: 7px; }
.member-row { display: grid; grid-template-columns: 44px minmax(0,1fr) auto; gap: 12px; align-items: center; padding: 11px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); }
.member-avatar { border-radius: 5px; }
.compact-form { padding: 0; border: 0; }
.bank-widget { display: grid; min-width: 0; gap: 13px; overflow: hidden; }
.bank-widget .panel-heading, .bank-controls { min-width: 0; }
.bank-controls { display: flex; gap: 8px; }
.bank-controls .field-group { min-width: 150px; }
.bank-chart { display: block; width: 100%; max-width: 100%; min-width: 0; height: 270px; }
.bank-summary { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 8px; }
.bank-summary > div { padding: 11px; border-top: 1px solid var(--line); }
.bank-summary small { display: block; color: var(--muted); }
.bank-summary strong { display: block; margin-top: 4px; font-size: 19px; }
.bank-settings { margin-top: 4px; }
.permission-group { margin: 0; padding: 12px; border: 1px solid var(--line); border-radius: var(--radius); }
.permission-group legend { padding: 0 5px; color: var(--muted); font: 700 9px/1 var(--mono); }
.permission-list { display: grid; grid-template-columns: repeat(auto-fit,minmax(190px,1fr)); gap: 8px; }
.rank-actions { margin-top: 12px; }
.subsection { padding: 13px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); }
.subsection h4, .form-section h4 { margin: 0 0 11px; }
.relation-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 0; border-bottom: 1px solid var(--line); }
.relation-row:last-child { border-bottom: 0; }
.relation-row small { display: block; margin-top: 4px; color: var(--muted); }
.relation-actions { display: flex; flex-wrap: wrap; gap: 6px; }
.relation-actions input { max-width: 160px; }
.setting-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 13px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); }
.setting-row small { display: block; margin-top: 4px; color: var(--muted); }
.setting-row input { width: 18px; height: 18px; accent-color: var(--accent); }
.filter-grid { display: grid; grid-template-columns: 180px minmax(180px,1fr) 155px 155px auto; gap: 9px; align-items: end; }
.bank-log-list, .history-list { display: grid; }
.bank-log-row { display: grid; grid-template-columns: 120px minmax(0,1fr) 120px 150px; gap: 12px; align-items: center; padding: 12px 4px; border-bottom: 1px solid var(--line); }
.bank-log-row small, .activity-row small, .sanction-row small { display: block; margin-top: 4px; color: var(--muted); }
.bank-log-row time, .activity-row time { color: var(--muted); font-size: 11px; }
.activity-row { grid-template-columns: 120px minmax(0,1fr) auto; }
.sanction-row { grid-template-columns: 90px minmax(0,1fr) auto; }
.pagination { display: flex; align-items: center; justify-content: center; gap: 10px; margin-top: 14px; color: var(--muted); }
.badge-ban, .badge-mute { color: #ff8b92; background: rgba(255,93,103,.12); border-color: rgba(255,93,103,.28); }
.badge-warn { color: #ffd166; background: rgba(255,209,102,.1); border-color: rgba(255,209,102,.25); }
.badge-kick { color: #7fd9ef; background: rgba(80,200,232,.1); border-color: rgba(80,200,232,.25); }
.admin-tool-grid { display: grid; grid-template-columns: repeat(auto-fit,minmax(230px,1fr)); gap: 10px; }
.admin-tool { display: grid; grid-template-columns: 46px minmax(0,1fr); gap: 12px; align-items: center; padding: 14px; color: var(--text); background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); }
.admin-tool > span { display: grid; width: 42px; height: 42px; place-items: center; color: var(--accent); background: var(--accent-soft); border-radius: 5px; font: 800 10px/1 var(--mono); }
.admin-tool p { margin: 4px 0 0; color: var(--muted); font-size: 11px; }
.admin-tool.is-danger > span { color: #ff8b92; background: rgba(255,93,103,.1); }
.admin-team-list { display: grid; }
.admin-team-row { display: grid; grid-template-columns: 16px minmax(220px,1fr) auto; gap: 12px; align-items: center; padding: 13px 4px; color: var(--text); border-bottom: 1px solid var(--line); }
.admin-team-row small { display: block; margin-top: 4px; color: var(--muted); }
.team-color { width: 13px; height: 32px; background: var(--team-color); border-radius: 3px; }
.table-panel { overflow-x: auto; }
.level-table { min-width: 920px; }
.level-table-head, .level-table-row { display: grid; grid-template-columns: 75px repeat(6,minmax(105px,1fr)); gap: 7px; align-items: center; }
.level-table-head { position: sticky; top: 0; z-index: 2; padding: 9px; color: var(--muted); background: var(--panel); font: 700 8px/1 var(--mono); text-transform: uppercase; }
.level-table-row { padding: 8px; border-top: 1px solid var(--line); }
.level-table-row strong { color: var(--accent); font: 700 10px/1 var(--mono); }
.table-actions { position: sticky; left: 0; padding-top: 14px; }
.check-grid { display: grid; grid-template-columns: repeat(auto-fit,minmax(180px,1fr)); gap: 8px; }
.member-initial { display: grid; width: 40px; height: 40px; place-items: center; color: var(--accent); background: var(--accent-soft); border-radius: 5px; font: 800 14px/1 var(--mono); }
.danger-zone { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 18px; background: rgba(255,93,103,.06); border: 1px solid rgba(255,93,103,.3); border-radius: var(--radius); }
.danger-zone h3 { margin: 5px 0; }
.danger-zone p { margin: 0; color: var(--muted); }
.danger-zone-stack { display: grid; align-items: stretch; }
.danger-zone.is-critical { background: rgba(255,93,103,.1); border-color: rgba(255,93,103,.5); }
.db-layout { display: grid; grid-template-columns: minmax(0,1.25fr) minmax(340px,.75fr); gap: 12px; align-items: start; }
.player-admin-list { display: grid; }
.player-admin-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 11px 0; border-bottom: 1px solid var(--line); }
.player-admin-row small { display: block; margin-top: 4px; color: var(--muted); }
.danger-form { display: grid; gap: 7px; }
.status-page { display: grid; min-height: 100vh; place-items: center; margin: 0; padding: 22px; background: #080b0d url('../img/creatium-world.webp') center/cover fixed no-repeat; }
.status-page::before { content: ''; position: fixed; inset: 0; background: rgba(5,8,10,.84); }
.status-danger::before { background: rgba(20,5,7,.9); }
.status-panel { position: relative; z-index: 1; width: min(100%,620px); padding: 38px; color: var(--text); background: rgba(13,17,20,.96); border: 1px solid var(--line-strong); border-radius: 8px; box-shadow: var(--shadow); text-align: center; }
.status-panel h1 { margin: 8px 0 12px; font-size: 32px; }
.status-panel > p { margin: 0 auto 22px; color: var(--muted); line-height: 1.7; }
.status-mark { display: grid; width: 58px; height: 58px; place-items: center; margin: 0 auto 18px; color: var(--accent); background: var(--accent-soft); border: 1px solid rgba(255,104,70,.35); border-radius: 7px; font: 800 15px/1 var(--mono); }
.status-danger .status-mark { color: #ff8b92; background: rgba(255,93,103,.1); border-color: rgba(255,93,103,.35); }
.status-pulse { animation: statusPulse 1.4s ease-in-out infinite; }
.status-details { display: grid; gap: 7px; margin: 20px 0; text-align: left; }
.status-details > div { display: flex; justify-content: space-between; gap: 16px; padding: 11px; background: var(--surface); border: 1px solid var(--line); border-radius: 5px; }
.status-details span, .status-code { color: var(--muted); }
.status-code { display: block; margin-top: 20px; font: 700 9px/1 var(--mono); }
.brand-centered { justify-content: center; margin-bottom: 24px; }
@keyframes statusPulse { 50% { opacity: .5; transform: scale(.97); } }

/* Rankings workspace */
.ranking-page-head { display: flex; align-items: end; justify-content: space-between; gap: 28px; padding: 6px 2px 4px; }
.ranking-page-head h2 { margin: 5px 0 7px; font-size: 30px; }
.ranking-page-head p { max-width: 650px; margin: 0; color: var(--muted); }
.ranking-period-control { display: grid; flex: 0 0 auto; gap: 7px; justify-items: end; }
.ranking-period-control > span { color: var(--muted); font: 700 8px/1 var(--mono); text-transform: uppercase; }

.ranking-kpis { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); overflow: hidden; background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); }
.ranking-kpis article { position: relative; display: grid; gap: 4px; padding: 14px 16px; border-right: 1px solid var(--line); }
.ranking-kpis article:last-child { border-right: 0; }
.ranking-kpis article::before { content: ''; position: absolute; top: 14px; bottom: 14px; left: 0; width: 2px; background: var(--accent); opacity: .8; }
.ranking-kpis span { color: var(--muted); font: 700 8px/1.2 var(--mono); text-transform: uppercase; }
.ranking-kpis strong { font-size: 22px; line-height: 1.15; }
.ranking-kpis strong.is-positive { color: var(--green); }
.ranking-kpis small { color: var(--muted); font-size: 10px; }

.ranking-workspace { display: grid; grid-template-columns: minmax(0,1fr) 300px; gap: 12px; align-items: start; }
.leaderboard-shell { padding: 0; overflow: hidden; }
.leaderboard-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 17px 18px 14px; }
.leaderboard-head h3 { margin: 4px 0 0; font-size: 18px; }
.leaderboard-tabs { display: grid; grid-template-columns: repeat(4,1fr); padding: 0 10px; background: #0b0f12; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.leaderboard-tabs button { display: flex; min-height: 48px; align-items: center; justify-content: center; gap: 7px; padding: 10px; color: var(--muted); background: transparent; border: 0; border-bottom: 2px solid transparent; font: 750 11px/1 var(--sans); cursor: pointer; }
.leaderboard-tabs button span { color: #56636c; font: 700 8px/1 var(--mono); }
.leaderboard-tabs button.is-active { color: var(--text); border-color: var(--accent); }
.leaderboard-tabs button.is-active span { color: var(--accent); }
.leaderboard-shell .ranking-panel { padding: 0 18px 8px; }
.ranking-column-head { display: grid; grid-template-columns: minmax(0,1fr) 125px 155px; gap: 12px; padding: 13px 5px 8px 51px; color: var(--muted); border-bottom: 1px solid var(--line); font: 700 8px/1 var(--mono); text-align: right; text-transform: uppercase; }
.ranking-column-head span:first-child { text-align: left; }
.leaderboard-shell .ranking-row { grid-template-columns: 38px minmax(0,1fr) 125px 155px; min-height: 67px; padding: 10px 5px; }
.leaderboard-shell .ranking-row:last-child { border-bottom: 0; }
.leaderboard-shell .ranking-position { display: grid; width: 30px; height: 30px; place-items: center; color: #7f8b92; background: #141a1f; border: 1px solid var(--line); border-radius: 4px; font-size: 11px; }
.leaderboard-shell .ranking-row:nth-child(1) .ranking-position { color: #1b1303; background: #ffd166; border-color: #ffd166; }
.leaderboard-shell .ranking-row:nth-child(2) .ranking-position { color: #182027; background: #cbd5dc; border-color: #cbd5dc; }
.leaderboard-shell .ranking-row:nth-child(3) .ranking-position { color: #211006; background: #d68a5b; border-color: #d68a5b; }
.ranking-identity { min-width: 0; }
.leaderboard-shell .ranking-name { font-size: 13px; }
.leaderboard-shell .ranking-value small { display: none; }
.leaderboard-shell .ranking-value strong { color: var(--text); font-size: 14px; }
.leaderboard-shell .ranking-flow strong { color: var(--cyan); font-size: 12px; }

.ranking-rail { display: grid; gap: 12px; }
.podium-panel, .season-panel { padding: 16px; }
.podium-panel .panel-heading { margin-bottom: 8px; }
.podium-panel h3, .season-panel h3 { margin: 4px 0 0; font-size: 15px; }
.podium-list { display: grid; gap: 7px; }
.podium-entry { display: grid; grid-template-columns: 34px minmax(0,1fr) auto; gap: 9px; align-items: center; padding: 10px; color: var(--text); background: #0b0f12; border: 1px solid var(--line); border-radius: 6px; }
.podium-entry:hover { border-color: var(--line-strong); }
.podium-rank { display: grid; width: 30px; height: 30px; place-items: center; border-radius: 4px; font: 800 11px/1 var(--mono); }
.podium-1 .podium-rank { color: #211703; background: #ffd166; }
.podium-2 .podium-rank { color: #182027; background: #cbd5dc; }
.podium-3 .podium-rank { color: #211006; background: #d68a5b; }
.podium-entry strong { display: block; overflow: hidden; font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.podium-entry small { display: block; margin-top: 3px; color: var(--muted); font-size: 9px; }
.podium-entry b { color: var(--cyan); font-size: 11px; white-space: nowrap; }
.season-panel { display: grid; gap: 20px; background: linear-gradient(145deg,rgba(255,104,70,.08),transparent 65%),var(--panel); }
.season-panel p { margin: 10px 0 0; color: var(--muted); font-size: 11px; line-height: 1.55; }
.season-signal { display: grid; grid-template-columns: 8px minmax(0,1fr); gap: 4px 8px; padding-top: 13px; border-top: 1px solid var(--line); }
.season-signal > span { grid-row: span 2; width: 8px; height: 8px; margin-top: 2px; background: var(--accent); border-radius: 2px; box-shadow: 0 0 14px rgba(255,104,70,.5); }
.season-signal small { color: var(--muted); font-size: 9px; }
.season-signal strong { font-size: 12px; }

.ranking-analytics { padding: 0; overflow: hidden; }
.analytics-head { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 18px; border-bottom: 1px solid var(--line); }
.analytics-head h3 { margin: 4px 0; font-size: 18px; }
.analytics-head p { margin: 0; color: var(--muted); font-size: 11px; }
.analytics-tabs { display: flex; gap: 4px; padding: 4px; background: #0b0f12; border: 1px solid var(--line); border-radius: 6px; }
.analytics-tabs button { min-width: 90px; padding: 8px 12px; color: var(--muted); background: transparent; border: 0; border-radius: 4px; font-weight: 750; cursor: pointer; }
.analytics-tabs button.is-active { color: var(--text); background: var(--surface-raised); }
.analysis-panel { padding: 16px 18px 18px; }
.ranking-analytics .chart-tools { grid-template-columns: minmax(220px,1fr) 190px 120px; max-width: 720px; }
.analysis-chart-grid { display: grid; grid-template-columns: minmax(0,1fr) 200px; gap: 16px; align-items: stretch; }
.ranking-analytics .chart-wrap { height: 250px; background: #0b0f12; border: 1px solid var(--line); border-radius: 6px; }
.ranking-analytics .chart-summary { display: grid; grid-template-columns: 1fr; gap: 0; margin: 0; background: #0b0f12; border: 1px solid var(--line); border-radius: 6px; }
.ranking-analytics .chart-kpi { display: grid; align-content: center; padding: 14px; border-top: 1px solid var(--line); }
.ranking-analytics .chart-kpi:first-child { border-top: 0; }
.ranking-analytics .chart-kpi b { margin-top: 5px; color: var(--text); font-size: 20px; }

@media (max-width: 1180px) {
  .ranking-workspace { grid-template-columns: 1fr; }
  .ranking-rail { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 760px) {
  .ranking-page-head { align-items: start; flex-direction: column; }
  .ranking-period-control { width: 100%; justify-items: start; }
  .ranking-period-control .segmented { width: 100%; display: grid; grid-template-columns: 1fr 1fr; }
  .ranking-period-control .segmented a { text-align: center; }
  .ranking-kpis { grid-template-columns: 1fr 1fr; }
  .ranking-kpis article:nth-child(2) { border-right: 0; }
  .ranking-kpis article:nth-child(-n+2) { border-bottom: 1px solid var(--line); }
  .ranking-rail { grid-template-columns: 1fr; }
  .leaderboard-tabs { grid-template-columns: 1fr 1fr; padding: 0; }
  .ranking-column-head { display: none; }
  .leaderboard-shell .ranking-panel { padding: 6px 12px; }
  .leaderboard-shell .ranking-row { grid-template-columns: 34px minmax(0,1fr) auto; gap: 8px; }
  .leaderboard-shell .ranking-value { display: block; }
  .leaderboard-shell .ranking-flow { display: none; }
  .leaderboard-shell .ranking-value strong { font-size: 12px; white-space: nowrap; }
  .analytics-head { align-items: start; flex-direction: column; }
  .analytics-tabs { width: 100%; }
  .analytics-tabs button { flex: 1; }
  .ranking-analytics .chart-tools { grid-template-columns: 1fr; max-width: none; }
  .analysis-chart-grid { grid-template-columns: 1fr; }
  .ranking-analytics .chart-summary { grid-template-columns: repeat(3,1fr); }
  .ranking-analytics .chart-kpi { border-top: 0; border-left: 1px solid var(--line); }
  .ranking-analytics .chart-kpi:first-child { border-left: 0; }
  .ranking-analytics .chart-kpi b { font-size: 14px; }
}
.claim-tile { min-height: 100px; padding: 12px; border-top: 3px solid var(--claim-color,var(--accent)); }
.rank-card { background: var(--surface-soft); border: 1px solid var(--line); border-radius: var(--radius); }
.rank-summary { display: flex; justify-content: space-between; padding: 13px; cursor: pointer; font-weight: 750; }
.rank-body { padding: 0 13px 13px; }
.permission-list { display: flex; flex-wrap: wrap; gap: 8px 14px; margin-top: 8px; }
.permission-group { padding: 12px 0; border-bottom: 1px solid var(--line); }
.bank-widget { padding: 0; }
.bank-chart, .wealth-chart, .chart-wrap canvas { width: 100%; height: 260px; }
.bank-summary, .finance-summary, .chart-summary { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 8px; margin-top: 12px; }
.chart-box, .chart-wrap { position: relative; }
.chart-tooltip { position: absolute; z-index: 5; display: none; padding: 7px 9px; color: var(--text); background: #080b0d; border: 1px solid var(--line-strong); border-radius: 5px; font-size: 11px; pointer-events: none; }

.ranking-hero { min-height: 210px; padding: 24px; display: flex; flex-direction: column; justify-content: end; }
.ranking-head, .season-bar { position: relative; z-index: 1; display: flex; justify-content: space-between; gap: 15px; align-items: center; }
.ranking-copy { margin-top: 5px; color: #c4cdd2; }
.season-bar { margin-top: 15px; padding-top: 12px; border-top: 1px solid rgba(255,255,255,.15); }
.ranking-list { display: grid; }
.ranking-row { display: grid; grid-template-columns: 42px minmax(0,1fr) repeat(2,minmax(90px,auto)); gap: 10px; align-items: center; padding: 12px 5px; border-bottom: 1px solid var(--line); }
.ranking-position { color: var(--muted); font: 700 17px/1 var(--mono); text-align: center; }
.ranking-name { color: var(--text); font-weight: 750; }
.ranking-meta { margin-top: 3px; color: var(--muted); font-size: 11px; }
.ranking-value { text-align: right; }
.ranking-value strong, .chart-kpi b { display: block; color: var(--cyan); font-size: 18px; }
.ranking-board { display: grid; gap: 10px; }
.ranking-hero h2 { margin: 5px 0 7px; font-size: 28px; }
.ranking-hero p { margin: 0; color: var(--muted); }
.season-bar small { display: block; margin-top: 5px; color: var(--muted); }
.segmented { display: flex; gap: 4px; padding: 4px; background: #0b0f12; border: 1px solid var(--line); border-radius: 7px; }
.segmented a { padding: 8px 11px; color: var(--muted); border-radius: 5px; font-size: 11px; font-weight: 700; }
.segmented a.is-active { color: var(--text); background: var(--surface-raised); }
.tabs { display: flex; gap: 5px; overflow-x: auto; }
.tabs button { padding: 10px 13px; color: var(--muted); background: transparent; border: 0; border-bottom: 2px solid transparent; font: 700 11px/1 var(--sans); cursor: pointer; white-space: nowrap; }
.tabs button.is-active { color: var(--text); border-color: var(--accent); }
.ranking-panel, [data-tab-panel] { display: none; }
.ranking-panel.active, .ranking-panel.is-active, [data-tab-panel].is-active { display: block; }
.chart-tools { display: grid; grid-template-columns: minmax(160px,1fr) minmax(130px,1fr) 105px; gap: 8px; margin-bottom: 12px; }
.chart-panel { min-width: 0; }
.chart-wrap { position: relative; height: 230px; }
.chart-wrap canvas { width: 100%; height: 100%; }
.chart-empty { position: absolute; inset: 0; display: grid; place-items: center; margin: 0; padding: 30px; color: var(--muted); text-align: center; pointer-events: none; }
.chart-search { position: relative; }
.chart-results { position: absolute; top: calc(100% + 5px); right: 0; left: 0; z-index: 40; display: none; max-height: 240px; overflow-y: auto; padding: 5px; background: #151b20; border: 1px solid var(--line-strong); border-radius: 7px; box-shadow: var(--shadow); }
.chart-results.is-open { display: grid; }
.chart-result { display: block; padding: 9px 10px; color: var(--text); background: transparent; border: 0; border-radius: 5px; text-align: left; cursor: pointer; }
.chart-result:hover { background: var(--surface-raised); }
.chart-result small { display: block; margin-top: 3px; color: var(--muted); }
.chart-summary { display: grid; grid-template-columns: repeat(3,1fr); gap: 8px; margin-top: 10px; }
.chart-kpi { padding: 9px; border-top: 1px solid var(--line); }
.chart-kpi span { color: var(--muted); font-size: 10px; }
.rank-badge { margin-left: 7px; color: #ffd166; font: 700 8px/1 var(--mono); }
.admin-disclosure > summary { display: flex; align-items: center; justify-content: space-between; gap: 12px; cursor: pointer; list-style: none; }
.admin-disclosure > summary span:first-child { display: grid; gap: 5px; }
.form-span-full { grid-column: 1 / -1; }

.quest-page { display: grid; gap: 16px; }
.quest-page .page-heading { margin-bottom: 0; }
.quest-stats { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 10px; }
.quest-layout { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 16px; align-items: start; }
.section-stack { display: grid; min-width: 0; gap: 16px; align-content: start; }
.quest-accordion { min-width: 0; overflow: hidden; padding: 0; }
.section-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 15px 17px; cursor: pointer; list-style: none; }
.section-head::-webkit-details-marker { display: none; }
.section-head h3 { margin: 4px 0; }
.section-head p { margin: 0; color: var(--muted); font-size: 11px; }
.section-body { padding: 0 17px 17px; }
.quest-grid { display: grid; grid-template-columns: repeat(auto-fit,minmax(250px,1fr)); gap: 10px; }
.quest-card, .community-card { display: grid; gap: 10px; min-height: 180px; padding: 15px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); }
.quest-status-claimable { border-color: rgba(255,104,70,.55); box-shadow: inset 3px 0 var(--accent); }
.quest-status-claimed { border-color: rgba(55,201,141,.35); }
.quest-head { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 10px; align-items: start; }
.quest-title { font-weight: 800; }
.quest-description { margin: 5px 0 0; color: var(--muted); font-size: 11px; line-height: 1.5; }
.quest-meta { color: var(--muted); font-size: 11px; }
.quest-actions { margin-top: auto; }
.quest-actions .btn { width: 100%; }
.progress-label { display: flex; align-items: center; justify-content: space-between; gap: 10px; color: var(--muted); font-size: 10px; }
.progress-label strong { color: var(--text); }
.community-list { display: grid; gap: 10px; }
.community-metrics { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.community-metrics > div { padding: 10px; background: #0b0f12; border: 1px solid var(--line); border-radius: 6px; }
.community-metrics small { display: block; color: var(--muted); }
.community-metrics strong { display: block; margin-top: 4px; font-size: 18px; }
.tag-list { display: flex; flex-wrap: wrap; gap: 5px; }
.admin-quest-layout { display: grid; grid-template-columns: minmax(0,1.25fr) minmax(370px,.75fr); gap: 12px; align-items: start; }
.admin-editor { position: sticky; top: 86px; }
.quest-admin-row { grid-template-columns: 110px minmax(0,1fr) auto; }
.quest-admin-row small, .template-row small { display: block; margin-top: 4px; color: var(--muted); }
.template-list { display: grid; gap: 7px; }
.template-row { display: grid; grid-template-columns: 110px minmax(0,1fr) auto; gap: 12px; align-items: center; padding: 11px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); }
.inline-form { display: flex; align-items: end; gap: 9px; padding-top: 10px; border-top: 1px solid var(--line); }
.inline-form .field-group { max-width: 180px; }
.form-section { display: grid; gap: 10px; margin: 0; padding: 13px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); }
.form-section legend { padding: 0 6px; color: var(--muted); font: 700 9px/1 var(--mono); text-transform: uppercase; }
.range-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.form-advanced > summary { cursor: pointer; color: var(--text); font-weight: 800; }
.check-row { display: flex; align-items: center; gap: 8px; color: var(--text); font-size: 12px; }
.check-row input { width: 16px; height: 16px; accent-color: var(--accent); }

.job-card { display: grid; gap: 11px; padding: 16px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); transition: transform .15s,border-color .15s; }
.job-card:hover { transform: translateY(-3px); border-color: var(--line-strong); }
.job-card img, .metier-icon { width: 58px; height: 58px; object-fit: contain; image-rendering: pixelated; }
.job-card h3 { margin: 0; font-size: 15px; }
.job-card-header { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.job-card-footer { display: flex; justify-content: space-between; gap: 10px; color: var(--muted); font-size: 11px; }
.job-detail-hero { display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.job-detail-identity { display: flex; align-items: center; gap: 18px; }
.job-detail-icon { width: 90px; height: 90px; object-fit: contain; image-rendering: pixelated; }
.job-detail-identity h2 { margin: 0; font-size: 28px; }
.job-detail-identity p { margin: 6px 0 0; color: var(--muted); }
.job-level-orbit { display: grid; width: 100px; height: 100px; flex: 0 0 100px; place-items: center; background: var(--surface-raised); border: 1px solid var(--line-strong); border-radius: var(--radius); text-align: center; }
.job-level-orbit strong { display: block; color: var(--accent); font-size: 30px; }
.job-level-orbit span { color: var(--muted); font: 700 8px/1.2 var(--mono); text-transform: uppercase; }

/* Jobs dashboard */
.jobs-dashboard,.job-profile { --job-accent:var(--accent); display:grid; gap:22px; }
.job-theme-chasseur { --job-accent:#e9655f; }.job-theme-mineur { --job-accent:#65b9d4; }.job-theme-farmeur { --job-accent:#73bd75; }
.job-theme-bucheron { --job-accent:#d38a60; }.job-theme-ingenieur { --job-accent:#e3b754; }.job-theme-explorateur { --job-accent:#9f83d7; }

.skill-page{display:grid;gap:22px}.skill-hero{display:flex;justify-content:space-between;gap:24px;align-items:flex-end;padding:28px;border:1px solid var(--border);border-radius:24px;background:radial-gradient(circle at 85% 15%,rgba(230,71,48,.16),transparent 35%),var(--panel)}.skill-hero h2{margin:8px 0}.skill-hero p{max-width:720px}.skill-wallet{min-width:220px;text-align:right}.skill-wallet span{display:block;font-size:3rem;font-weight:900;color:var(--accent)}.skill-wallet strong,.skill-wallet small{display:block}.skill-legend{display:flex;gap:22px;flex-wrap:wrap}.skill-legend span{display:flex;align-items:center;gap:8px;color:var(--muted)}.skill-legend i{width:12px;height:12px;border-radius:50%;background:#555}.skill-legend .is-ready{background:#ef734f}.skill-legend .is-owned{background:#61c98b}.skill-tree-scroll{overflow-x:auto;padding-bottom:12px}.skill-tree-grid{display:grid;grid-template-columns:repeat(6,minmax(245px,1fr));gap:16px;min-width:1530px}.skill-branch{--job-accent:#e9655f}.skill-branch>header{display:flex;align-items:center;gap:12px;position:sticky;top:0;z-index:2;padding:13px;border:1px solid color-mix(in srgb,var(--job-accent) 55%,var(--border));border-radius:18px;background:var(--panel)}.skill-branch>header img{width:58px;height:58px;object-fit:cover;border-radius:14px}.skill-branch>header span{font-size:.75rem;color:var(--job-accent)}.skill-branch>header h3{margin:3px 0 0}.skill-branch-line{display:grid;gap:14px;padding:18px 7px 0;position:relative}.skill-branch-line:before{content:"";position:absolute;left:50%;top:0;bottom:0;width:2px;background:linear-gradient(var(--job-accent),rgba(255,255,255,.08))}.skill-node{position:relative;z-index:1;padding:16px;border:1px solid var(--border);border-radius:18px;background:color-mix(in srgb,var(--panel) 96%,var(--job-accent));box-shadow:0 8px 25px rgba(0,0,0,.18)}.skill-node.is-available{border-color:var(--job-accent)}.skill-node.is-unlocked{border-color:#61c98b;background:color-mix(in srgb,var(--panel) 91%,#61c98b)}.skill-node.is-locked,.skill-node.is-insufficient{opacity:.7}.skill-node-top{display:flex;justify-content:space-between;color:var(--job-accent);font-size:.76rem;text-transform:uppercase}.skill-node h4{margin:9px 0 6px}.skill-node p{font-size:.86rem;min-height:52px}.skill-node small{display:block;margin-top:7px;color:var(--muted);font-size:.74rem}.skill-effect{margin:10px 0;padding:8px;border-radius:10px;background:rgba(255,255,255,.05);font-weight:700}.skill-node form{margin-top:13px}.skill-node .btn{width:100%;font-size:.78rem}.skill-owned,.skill-reason{display:block;margin-top:13px;font-size:.8rem}.skill-owned{color:#61c98b}.admin-skill-form{display:grid;grid-template-columns:repeat(3,1fr);gap:15px}.admin-skill-form label{display:grid;gap:7px;font-size:.8rem;color:var(--muted)}.admin-skill-form input,.admin-skill-form select,.admin-skill-form textarea{width:100%}.admin-skill-wide{grid-column:1/-1}.admin-skill-actions{display:flex;gap:10px}.admin-skill-list{display:grid;gap:10px}.admin-skill-list article{display:flex;justify-content:space-between;align-items:center;gap:20px;padding:14px;border:1px solid var(--border);border-radius:14px}.admin-skill-list h4{margin:8px 0 3px}.admin-skill-list p{margin:0;color:var(--muted)}
@media(max-width:900px){.skill-hero{align-items:flex-start;flex-direction:column}.skill-wallet{text-align:left}.admin-skill-form{grid-template-columns:1fr 1fr}}
@media(max-width:680px){.skill-hero{padding:20px}.skill-wallet span{font-size:2.4rem}.skill-tree-grid{grid-template-columns:repeat(6,230px);min-width:1450px}.admin-skill-form{grid-template-columns:1fr}.admin-skill-wide{grid-column:auto}.admin-skill-list article{align-items:flex-start;flex-direction:column}.admin-skill-list .btn{width:100%}}

/* Graphe de compétences interactif */
.skill-map-shell{position:relative;overflow:hidden;border:1px solid var(--border);border-radius:24px;background:radial-gradient(circle at 50% 0,rgba(230,71,48,.12),transparent 32%),linear-gradient(rgba(255,255,255,.018) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.018) 1px,transparent 1px),#0e1015;background-size:auto,32px 32px,32px 32px;box-shadow:inset 0 0 90px rgba(0,0,0,.5)}
.skill-map-toolbar{position:absolute;z-index:20;top:16px;right:16px;display:flex;align-items:center;gap:7px;padding:7px;border:1px solid var(--border);border-radius:14px;background:rgba(17,19,25,.92);backdrop-filter:blur(14px);box-shadow:0 8px 26px rgba(0,0,0,.32)}
.skill-map-toolbar button{min-width:38px;height:38px;padding:0 11px;border:1px solid rgba(255,255,255,.1);border-radius:10px;background:rgba(255,255,255,.06);color:var(--text);font:inherit;font-weight:800;cursor:pointer}.skill-map-toolbar button:hover{border-color:var(--accent);background:rgba(230,71,48,.15)}.skill-map-toolbar output{min-width:56px;text-align:center;color:var(--muted);font-size:.78rem;font-weight:800}
.skill-fullscreen-button{display:flex;align-items:center;gap:7px}.skill-fullscreen-button span{font-size:1rem}.skill-fullscreen-button b{font:inherit}
.skill-category-legend{position:absolute;z-index:20;top:16px;left:16px;display:flex;max-width:calc(100% - 450px);gap:7px;overflow-x:auto;padding:7px;border:1px solid var(--border);border-radius:14px;background:rgba(17,19,25,.92);backdrop-filter:blur(14px)}.skill-category-legend>span{--job-accent:#fff;display:flex;align-items:center;gap:6px;padding:8px 9px;border-radius:9px;background:rgba(255,255,255,.035);white-space:nowrap}.skill-category-legend i{width:8px;height:8px;border-radius:50%;background:var(--job-accent);box-shadow:0 0 9px var(--job-accent)}.skill-category-legend strong{color:var(--job-accent);font-size:.67rem;text-transform:uppercase}.skill-category-legend small{color:var(--muted);font-size:.65rem}
.skill-map-help{position:absolute;z-index:20;left:16px;bottom:14px;display:flex;gap:18px;padding:9px 13px;border:1px solid var(--border);border-radius:12px;background:rgba(17,19,25,.88);color:var(--muted);font-size:.72rem;pointer-events:none;backdrop-filter:blur(10px)}
.skill-map-viewport{position:relative;height:min(76vh,820px);min-height:590px;overflow:hidden;cursor:grab;touch-action:none;outline:none}.skill-map-viewport:focus-visible{box-shadow:inset 0 0 0 2px var(--accent)}.skill-map-viewport.is-dragging{cursor:grabbing}.skill-map-viewport.is-dragging .skill-map-world{transition:none}
.skill-map-world{position:absolute;inset:0 auto auto 0;width:2140px;height:2520px;transform-origin:0 0;transition:transform .12s ease-out;will-change:transform;user-select:none}
.skill-connections{position:absolute;inset:0;width:2140px;height:2520px;overflow:visible;pointer-events:none}.skill-link{fill:none;stroke:rgba(255,255,255,.16);stroke-width:5;filter:drop-shadow(0 0 5px rgba(0,0,0,.7))}.skill-link-root{stroke:rgba(230,71,48,.35);stroke-width:4;stroke-dasharray:10 9}.skill-link.is-owned{stroke:#61c98b;filter:drop-shadow(0 0 7px rgba(97,201,139,.45))}
.skill-root{position:absolute;left:920px;top:24px;width:300px;min-height:106px;display:grid;place-content:center;text-align:center;padding:18px;border:2px solid var(--accent);border-radius:50px;background:radial-gradient(circle at 50% 0,rgba(239,115,79,.24),transparent 70%),#17191f;box-shadow:0 0 35px rgba(230,71,48,.2);z-index:3}.skill-root span,.skill-root small{color:var(--muted)}.skill-root strong{font-size:1.35rem;color:#fff}
.skill-branch-marker{--job-accent:#e9655f;position:absolute;left:70px;top:155px;width:280px;display:flex;align-items:center;gap:13px;padding:12px;border:1px solid color-mix(in srgb,var(--job-accent) 60%,var(--border));border-radius:18px;background:color-mix(in srgb,#17191f 91%,var(--job-accent));box-shadow:0 8px 28px rgba(0,0,0,.35);z-index:4}.skill-branch-marker img{width:64px;height:64px;object-fit:cover;border-radius:14px}.skill-branch-marker span{color:var(--job-accent);font-size:.74rem;font-weight:800;text-transform:uppercase}.skill-branch-marker h3{margin:3px 0 0;font-size:1.05rem}
.skill-graph-node{--job-accent:#e9655f;position:absolute;left:70px;top:270px;width:280px;min-height:230px;margin:0;border-width:2px;transition:border-color .2s,box-shadow .2s,opacity .2s,transform .2s}.skill-graph-node:hover{transform:translateY(-4px);border-color:var(--job-accent);box-shadow:0 13px 38px rgba(0,0,0,.42),0 0 20px color-mix(in srgb,var(--job-accent) 22%,transparent)}.skill-graph-node.is-available{animation:skill-ready-pulse 2.4s ease-in-out infinite}.skill-graph-node.is-unlocked{box-shadow:0 0 22px rgba(97,201,139,.15)}.skill-graph-node.is-locked,.skill-graph-node.is-insufficient{opacity:.78}
@keyframes skill-ready-pulse{50%{box-shadow:0 0 28px color-mix(in srgb,var(--job-accent) 34%,transparent)}}
@media(max-width:900px){.skill-map-viewport{height:72vh;min-height:540px}.skill-map-help span:nth-child(3){display:none}}
@media(max-width:680px){.skill-map-shell{border-radius:18px}.skill-map-toolbar{top:10px;right:10px;gap:4px}.skill-map-toolbar button{min-width:34px;height:34px;padding:0 8px;font-size:.75rem}.skill-map-toolbar output{min-width:48px}.skill-map-help{left:10px;right:10px;bottom:10px;justify-content:center}.skill-map-help span:nth-child(2){display:none}.skill-map-viewport{height:68vh;min-height:500px}.skill-graph-node{min-height:230px}}
.skill-map-shell:fullscreen,.skill-map-shell.is-fullscreen-fallback{width:100vw;height:100vh;border:0;border-radius:0;background-color:#0e1015}.skill-map-shell.is-fullscreen-fallback{position:fixed;z-index:1000;inset:0}.skill-map-shell:fullscreen .skill-map-viewport,.skill-map-shell.is-fullscreen-fallback .skill-map-viewport{height:100vh;min-height:100vh}.skill-map-shell:fullscreen .skill-map-toolbar,.skill-map-shell.is-fullscreen-fallback .skill-map-toolbar{top:14px;right:14px}.skill-map-shell:fullscreen .skill-category-legend,.skill-map-shell.is-fullscreen-fallback .skill-category-legend{top:14px}.skill-fullscreen-open{overflow:hidden}
@media(max-width:680px){.skill-fullscreen-button b{display:none}.skill-map-shell:fullscreen .skill-map-toolbar,.skill-map-shell.is-fullscreen-fallback .skill-map-toolbar{top:10px;right:10px}.skill-map-shell:fullscreen .skill-category-legend,.skill-map-shell.is-fullscreen-fallback .skill-category-legend{top:58px}}

/* Points de compétence et fiche latérale */
.skill-map-world{height:1800px}.skill-connections{height:1800px}
.skill-point{--job-accent:#e9655f;position:absolute;z-index:6;width:76px;height:76px;display:grid;place-items:center;margin:0;padding:0;border:4px solid rgba(255,255,255,.16);border-radius:50%;background:radial-gradient(circle at 35% 28%,color-mix(in srgb,var(--job-accent) 38%,#242832),#15171d 68%);color:#fff;box-shadow:0 9px 24px rgba(0,0,0,.45),inset 0 0 0 4px rgba(0,0,0,.2);font:inherit;font-weight:900;cursor:pointer;transition:transform .18s,border-color .18s,box-shadow .18s,filter .18s}.skill-point>span{font-size:1.15rem}.skill-point>small{position:absolute;right:-9px;bottom:-5px;min-width:27px;height:27px;display:grid;place-items:center;padding:0 5px;border:2px solid #11141a;border-radius:50%;background:var(--job-accent);color:#fff;font-size:.7rem}.skill-point:hover,.skill-point:focus-visible,.skill-point.is-selected{transform:scale(1.13);border-color:var(--job-accent);outline:none;box-shadow:0 0 0 6px color-mix(in srgb,var(--job-accent) 18%,transparent),0 10px 30px rgba(0,0,0,.5)}.skill-point.is-available{border-color:var(--job-accent);animation:skill-point-ready 2s ease-in-out infinite}.skill-point.is-unlocked{border-color:#61c98b;background:radial-gradient(circle at 35% 28%,#438e68,#18261f 70%)}.skill-point.is-unlocked>small{background:#61c98b}.skill-point.is-locked,.skill-point.is-insufficient{opacity:.58;filter:grayscale(.5)}.skill-point.is-selected{opacity:1;filter:none}
@keyframes skill-point-ready{50%{box-shadow:0 0 0 9px color-mix(in srgb,var(--job-accent) 12%,transparent),0 0 28px color-mix(in srgb,var(--job-accent) 45%,transparent)}}
.skill-detail-panel{position:absolute;z-index:30;left:16px;top:16px;width:370px;max-height:calc(100% - 32px);overflow:auto;padding:18px;border:1px solid rgba(255,255,255,.13);border-radius:20px;background:rgba(18,20,27,.96);box-shadow:0 18px 55px rgba(0,0,0,.55);backdrop-filter:blur(18px);transform:translateX(calc(-100% - 30px));opacity:0;pointer-events:none;transition:transform .25s ease,opacity .2s}.skill-detail-panel.is-open{transform:translateX(0);opacity:1;pointer-events:auto}.skill-detail-panel>header{display:flex;align-items:center;justify-content:space-between;gap:15px;margin-bottom:18px}.skill-detail-panel>header button{width:34px;height:34px;border:1px solid var(--border);border-radius:10px;background:rgba(255,255,255,.05);color:#fff;font-size:1.3rem;cursor:pointer}.skill-detail-empty{padding:30px 8px;text-align:center}.skill-detail-empty p{margin-top:8px;color:var(--muted)}.skill-detail-heading{--job-accent:#e9655f;padding-left:13px;border-left:4px solid var(--job-accent)}.skill-detail-heading span{color:var(--job-accent);font-size:.75rem;font-weight:800;text-transform:uppercase}.skill-detail-heading h3{margin:5px 0 0;font-size:1.42rem}.skill-detail-description{margin:18px 0;color:#d5d7dc;line-height:1.55}.skill-detail-effect{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:end;gap:3px 12px;padding:15px;border:1px solid rgba(255,255,255,.08);border-radius:14px;background:rgba(255,255,255,.04)}.skill-detail-effect small,.skill-detail-effect span{color:var(--muted)}.skill-detail-effect strong{grid-row:1/3;grid-column:2;max-width:175px;text-align:right;font-size:1.35rem;line-height:1.1;color:#61c98b}.skill-detail-requirements{display:grid;gap:8px;margin:15px 0}.skill-detail-requirements:empty{display:none}.skill-detail-requirements>div{display:flex;justify-content:space-between;gap:15px;padding:9px 0;border-bottom:1px solid rgba(255,255,255,.07)}.skill-detail-requirements dt{color:var(--muted);font-size:.78rem}.skill-detail-requirements dd{margin:0;text-align:right;font-size:.8rem;font-weight:700}.skill-detail-price{display:flex;align-items:center;justify-content:space-between;margin:16px 0;padding:13px 15px;border-radius:13px;background:rgba(230,71,48,.12)}.skill-detail-price span{color:var(--muted)}.skill-detail-price strong{color:#fff;font-size:1.08rem}.skill-detail-buy .btn{width:100%}.skill-detail-status{display:block;padding:12px;border-radius:12px;background:rgba(255,255,255,.05);text-align:center;font-size:.82rem}.skill-detail-status.is-owned{color:#61c98b;background:rgba(97,201,139,.1)}.skill-detail-panel.is-open~.skill-map-help{opacity:0}
@media(max-width:680px){.skill-detail-panel{left:10px;right:10px;top:auto;bottom:10px;width:auto;max-height:57%;border-radius:18px;transform:translateY(calc(100% + 24px))}.skill-detail-panel.is-open{transform:translateY(0)}.skill-point{width:68px;height:68px}.skill-map-viewport{min-height:560px}}
@media(max-width:900px){.skill-category-legend{top:58px;left:10px;right:10px;max-width:none}.skill-category-legend>span{padding:6px 8px}.skill-category-legend strong{font-size:.62rem}}

/* Composition unifiée : un tronc global, sans colonnes de métiers */
.skill-root{left:920px;top:1640px}.skill-branch-marker{display:none}

/* Catégories de gameplay autour du noyau central */
.skill-map-world{width:2200px;height:1850px}.skill-connections{width:2200px;height:1850px}.skill-root{left:950px;top:800px}
.skill-category-progression{--job-accent:#9b65f2}.skill-category-unlocks{--job-accent:#e8ad42}.skill-category-bonuses{--job-accent:#ef5a4d}.skill-category-abilities{--job-accent:#4ca7f2}.skill-category-production{--job-accent:#55c982}.skill-category-mastery{--job-accent:#df68c8}
.skill-category-automatisation{--job-accent:#ff6846}.skill-category-bonus{--job-accent:#f2c765}.skill-category-diplomatie{--job-accent:#5bb8ff}.skill-category-membres{--job-accent:#ba8cff}.skill-category-services{--job-accent:#ff7fa8}.skill-category-territoire{--job-accent:#61c98b}.skill-category-transport{--job-accent:#ff965c}
.skill-category-label{--job-accent:#fff;position:absolute;z-index:3;display:grid;min-width:170px;padding:13px 16px;border-left:4px solid var(--job-accent);border-radius:5px 14px 14px 5px;background:rgba(18,20,27,.86);box-shadow:0 8px 24px rgba(0,0,0,.3);text-transform:uppercase}.skill-category-label strong{color:var(--job-accent);font-size:.88rem;letter-spacing:.05em}.skill-category-label span{margin-top:3px;color:var(--muted);font-size:.72rem}
.skill-point>span{max-width:58px;overflow:hidden;font-size:1.2rem;line-height:1;text-overflow:ellipsis}.skill-detail-heading{border-left-color:var(--job-accent)}.skill-detail-heading span{color:var(--job-accent)}
.skill-sector-title{--job-accent:#fff;position:absolute;z-index:2;display:flex;align-items:baseline;gap:9px;color:var(--job-accent);opacity:.72;pointer-events:none;text-transform:uppercase}.skill-sector-title strong{font-size:.78rem;letter-spacing:.12em}.skill-sector-title span{font-size:.66rem;color:var(--muted)}
.skill-link{opacity:.012;stroke-width:4;transition:opacity .16s,stroke-width .16s,filter .16s}.skill-link-root{opacity:.28}.skill-link.is-owned{opacity:.022;stroke:color-mix(in srgb,#61c98b 68%,transparent);filter:none}.skill-link.is-focused{opacity:1;stroke-width:7;filter:drop-shadow(0 0 8px currentColor)}.skill-link-root.is-focused{stroke:var(--accent)}
.skill-point.is-unlocked{border-color:color-mix(in srgb,var(--job-accent) 62%,#61c98b);background:radial-gradient(circle at 35% 28%,color-mix(in srgb,var(--job-accent) 38%,#242832),#15171d 68%)}.skill-point.is-unlocked>small{background:#61c98b}
.jobs-head { display:flex; align-items:flex-end; justify-content:space-between; gap:28px; padding-bottom:20px; border-bottom:1px solid var(--line); }
.jobs-head h2 { margin:3px 0 6px; font-size:34px; letter-spacing:0; }.jobs-head p { max-width:570px; margin:0; color:var(--muted); }
.jobs-overview { display:grid; grid-template-columns:repeat(4,minmax(105px,1fr)); border:1px solid var(--line); border-radius:6px; background:var(--surface); }
.jobs-overview div { min-width:120px; padding:12px 15px; border-left:1px solid var(--line); }.jobs-overview div:first-child { border-left:0; }
.jobs-overview small,.jobs-overview strong { display:block; }.jobs-overview small { color:var(--muted); font-size:9px; text-transform:uppercase; }.jobs-overview strong { margin-top:3px; font-size:14px; }
.jobs-roster { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }
.job-roster-item { display:grid; grid-template-columns:64px minmax(0,1fr) 24px; align-items:center; gap:14px; min-height:112px; padding:16px; border:1px solid var(--line); border-left:3px solid var(--job-accent); border-radius:6px; background:var(--surface); color:var(--text); transition:border-color .15s,transform .15s; }
.job-roster-item:hover { transform:translateY(-2px); border-color:var(--job-accent); }.job-roster-icon { display:grid; place-items:center; width:64px; height:64px; border-radius:5px; background:var(--surface-raised); }
.job-roster-icon img { width:52px; height:52px; object-fit:contain; image-rendering:pixelated; }.job-roster-main { min-width:0; }
.job-roster-title { display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:11px; }.job-roster-title span { color:var(--job-accent); font-size:9px; font-weight:800; text-transform:uppercase; }.job-roster-title h3 { margin:2px 0 0; font-size:16px; }.job-roster-title > strong { font-size:13px; white-space:nowrap; }
.job-roster-item .progress span,.job-profile .progress span { background:var(--job-accent); }.job-roster-meta { display:flex; justify-content:space-between; margin-top:6px; color:var(--muted); font-size:9px; }.job-roster-open { color:var(--job-accent); font-size:28px; }
.job-profile-head { display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:end; gap:16px; padding-bottom:20px; border-bottom:1px solid var(--line); }.job-back { grid-column:1/-1; width:max-content; color:var(--muted); font-size:11px; font-weight:700; }.job-back:hover { color:var(--job-accent); }
.job-profile-identity { display:flex; align-items:center; gap:16px; }.job-profile-icon { display:grid; place-items:center; width:76px; height:76px; flex:0 0 76px; border:1px solid color-mix(in srgb,var(--job-accent) 45%,var(--line)); border-radius:6px; background:color-mix(in srgb,var(--job-accent) 9%,var(--surface)); }.job-profile-icon img { width:64px; height:64px; object-fit:contain; image-rendering:pixelated; }
.job-profile-identity h2 { margin:2px 0 5px; font-size:30px; }.job-profile-identity p { margin:0; color:var(--muted); }.job-profile .eyebrow { color:var(--job-accent); }
.job-level { display:flex; align-items:baseline; gap:5px; }.job-level small { align-self:center; margin-right:8px; color:var(--muted); text-transform:uppercase; }.job-level strong { color:var(--job-accent); font-size:38px; }.job-level span { color:var(--muted); }
.job-progress-band { display:grid; grid-template-columns:210px minmax(160px,1fr) 180px; align-items:center; gap:22px; padding:17px 20px; border:1px solid var(--line); border-radius:6px; background:var(--surface); }.job-progress-copy span,.job-progress-copy strong,.job-progress-next small,.job-progress-next strong,.job-progress-next span { display:block; }.job-progress-copy span,.job-progress-next small { color:var(--muted); font-size:9px; text-transform:uppercase; }.job-progress-copy strong { margin-top:3px; font-size:18px; }.job-progress-copy strong small { color:var(--muted); }.job-progress-next { padding-left:20px; border-left:1px solid var(--line); }.job-progress-next strong { margin:3px 0; color:var(--job-accent); }
.job-primary-grid { display:grid; grid-template-columns:minmax(0,1.65fr) minmax(240px,.7fr); gap:14px; }.job-actions-panel,.job-milestones,.job-roadmap,.job-rules { padding:20px; border:1px solid var(--line); border-radius:6px; background:var(--surface); }
.job-action-ranking { display:grid; margin-top:14px; }.job-action-ranking article { display:grid; grid-template-columns:28px minmax(0,1fr) auto; align-items:center; gap:12px; min-height:58px; border-top:1px solid var(--line); }.job-action-ranking article:first-child { border-top:0; }.job-action-rank { display:grid; place-items:center; width:23px; height:23px; border-radius:4px; background:color-mix(in srgb,var(--job-accent) 14%,transparent); color:var(--job-accent); font-size:10px; font-weight:800; }.job-action-ranking article div { display:grid; gap:3px; }.job-action-ranking small { color:var(--muted); font-size:9px; }.job-action-value { text-align:right; }.job-action-value strong { color:var(--job-accent); font-size:16px; }
.milestone-track { position:relative; display:grid; gap:0; margin-top:15px; }.milestone-step { position:relative; display:grid; grid-template-columns:34px 1fr; align-items:center; gap:11px; min-height:54px; color:var(--muted); }.milestone-step::before { content:""; position:absolute; left:16px; top:35px; bottom:-19px; width:1px; background:var(--line); }.milestone-step:last-child::before { display:none; }.milestone-step > span { z-index:1; display:grid; place-items:center; width:34px; height:34px; border:1px solid var(--line); border-radius:50%; background:var(--surface); font-size:10px; font-weight:800; }.milestone-step div { display:grid; }.milestone-step small { font-size:9px; }.milestone-step.is-complete { color:var(--text); }.milestone-step.is-complete > span { border-color:var(--job-accent); background:var(--job-accent); color:#101418; }
.job-roadmap-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:8px; margin-top:15px; }.job-level-card { min-width:0; border:1px solid var(--line); border-radius:5px; background:var(--surface-soft); }.job-level-card > header { display:flex; align-items:center; gap:9px; padding:11px; border-bottom:1px solid var(--line); }.job-level-card > header > span { display:grid; place-items:center; width:29px; height:29px; border-radius:4px; background:color-mix(in srgb,var(--job-accent) 16%,transparent); color:var(--job-accent); font-weight:800; }.job-level-card header div,.job-level-card header strong,.job-level-card header small { display:block; }.job-level-card header small { margin-top:2px; color:var(--muted); font-size:8px; }.job-level-events { display:grid; gap:9px; padding:11px; }.job-level-events > div { display:flex; gap:7px; }.job-level-events p,.job-level-events strong,.job-level-events small { display:block; margin:0; }.job-level-events strong { font-size:10px; }.job-level-events small,.job-no-event { color:var(--muted); font-size:8px; }.event-dot { width:7px; height:7px; flex:0 0 7px; margin-top:3px; border-radius:50%; background:var(--job-accent); }.event-reward { background:var(--yellow); }.event-boost { background:var(--cyan); }
.job-roadmap-more { margin-top:12px; border-top:1px solid var(--line); }.job-roadmap-more > summary { display:flex; justify-content:space-between; padding:14px 2px 0; color:var(--muted); cursor:pointer; font-size:11px; font-weight:700; }
.job-rule-groups { display:grid; gap:7px; margin-top:14px; }.job-rule-groups > details { border:1px solid var(--line); border-radius:5px; background:var(--surface-soft); }.job-rule-groups summary { display:flex; justify-content:space-between; padding:13px 14px; cursor:pointer; font-size:11px; font-weight:700; }.job-rule-groups summary b { min-width:22px; padding:2px 6px; border-radius:4px; background:var(--surface-raised); text-align:center; }.job-rule-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:1px; border-top:1px solid var(--line); background:var(--line); }.job-rule-grid article { display:grid; grid-template-columns:auto minmax(0,1fr) auto; align-items:center; gap:9px; min-height:58px; padding:10px; background:var(--surface); }.job-rule-grid img { width:34px; height:34px; object-fit:contain; }.job-rule-grid article div { display:grid; }.job-rule-grid small { color:var(--muted); font-size:8px; }.job-rule-grid article > span { color:var(--job-accent); font-size:10px; font-weight:800; white-space:nowrap; }

@media (max-width:1000px) { .jobs-head { align-items:flex-start; flex-direction:column; }.jobs-overview { width:100%; }.job-roadmap-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }.job-rule-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:760px) { .jobs-roster,.job-primary-grid { grid-template-columns:1fr; }.job-progress-band { grid-template-columns:1fr; gap:13px; }.job-progress-next { padding:13px 0 0; border-top:1px solid var(--line); border-left:0; }.job-profile-head { grid-template-columns:1fr; }.job-level { justify-content:flex-start; }.job-rule-grid { grid-template-columns:1fr; } }
@media (max-width:520px) { .jobs-overview { grid-template-columns:1fr 1fr; }.jobs-overview div { min-width:0; }.jobs-overview div:nth-child(3) { border-top:1px solid var(--line); border-left:0; }.jobs-overview div:nth-child(4) { border-top:1px solid var(--line); }.job-roster-item { grid-template-columns:52px minmax(0,1fr); padding:13px; }.job-roster-icon { width:52px; height:52px; }.job-roster-icon img { width:44px; height:44px; }.job-roster-open { display:none; }.job-profile-identity { align-items:flex-start; }.job-profile-icon { width:60px; height:60px; flex-basis:60px; }.job-profile-icon img { width:50px; height:50px; }.job-roadmap-grid { grid-template-columns:1fr; } }
.progress-large { height: 9px; }
.level-preview-grid, .xp-config-grid { display: grid; grid-template-columns: repeat(auto-fit,minmax(230px,1fr)); gap: 10px; }
.level-preview { display: grid; grid-template-columns: 54px minmax(0,1fr); gap: 13px; padding: 14px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); }
.level-number { color: var(--accent); font: 800 22px/1 var(--mono); }
.level-preview-body { display: grid; gap: 7px; }
.unlock-line, .reward-line { color: var(--muted); font-size: 11px; }
.data-value { color: var(--cyan); text-align: right; }
.milestone-list { display: grid; gap: 7px; }
.milestone { display: grid; grid-template-columns: 70px minmax(0,1fr) auto; gap: 12px; align-items: center; padding: 11px 13px; border: 1px solid var(--line); border-radius: var(--radius); }
.milestone.is-complete { border-color: rgba(55,201,141,.35); background: rgba(55,201,141,.06); }
.rule-grid { display: grid; grid-template-columns: repeat(auto-fit,minmax(230px,1fr)); gap: 9px; }
.rule-card { display: grid; grid-template-columns: 44px minmax(0,1fr); gap: 11px; align-items: center; padding: 12px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); }
.rule-card img { width: 36px; height: 36px; object-fit: contain; image-rendering: pixelated; }
.accordion-list { display: grid; gap: 8px; }
.levels-more { color: var(--muted); text-align: center; }
.xp-config-item { padding: 13px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); }
.admin-form-grid { display: grid; grid-template-columns: repeat(6,minmax(90px,1fr)); gap: 12px; }
.admin-field-wide { grid-column: span 2; }
.admin-rule-group, .admin-rule-target { overflow: hidden; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); }
.admin-rule-group > summary, .admin-rule-target > summary { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 13px 15px; cursor: pointer; list-style: none; }
.admin-rule-group > summary::-webkit-details-marker, .admin-rule-target > summary::-webkit-details-marker { display: none; }
.admin-rule-group > summary { border-left: 3px solid var(--accent); font-weight: 800; }
.admin-rule-targets, .admin-rule-list { display: grid; gap: 8px; padding: 0 12px 12px; }
.admin-rule-target { background: var(--surface-raised); }
.admin-rule-target summary small, .admin-rule-row small, .admin-reward-row small { display: block; margin-top: 3px; color: var(--muted); }
.admin-rule-row { display: grid; grid-template-columns: 44px minmax(0,1fr) auto; gap: 12px; align-items: center; padding: 10px; background: #0b0f12; border: 1px solid var(--line); border-radius: 6px; }
.rule-visual { display: grid; width: 38px; height: 38px; place-items: center; color: var(--accent); background: var(--accent-soft); border: 1px solid var(--line); border-radius: 5px; font: 800 9px/1 var(--mono); }
.rule-visual img { width: 28px; height: 28px; object-fit: contain; image-rendering: pixelated; }
.admin-row-actions { justify-content: end; }
.admin-reward-list { display: grid; gap: 7px; }
.admin-reward-row { display: grid; grid-template-columns: 74px 42px minmax(180px,1.2fr) minmax(170px,1fr) auto; gap: 12px; align-items: center; padding: 11px 13px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); }
.reward-level { color: var(--accent); font: 800 11px/1 var(--mono); }

.info-list { display: grid; }
.info-row { display: grid; grid-template-columns: minmax(150px,.45fr) minmax(0,1fr); gap: 18px; padding: 11px 0; border-bottom: 1px solid var(--line); }
.info-row:last-child { border-bottom: 0; }
.info-label { color: var(--muted); font: 700 9px/1.4 var(--mono); text-transform: uppercase; }
.info-value { text-align: right; overflow-wrap: anywhere; }
.account-identity { display: flex; align-items: center; gap: 16px; }
.account-avatar-large { width: 80px; height: 80px; border: 1px solid var(--line-strong); border-radius: 6px; image-rendering: pixelated; }
.command-box { padding: 15px; color: var(--text); background: #0b0f12; border: 1px solid var(--line-strong); border-left: 3px solid var(--accent); border-radius: 6px; font: 700 13px/1.5 var(--mono); overflow-wrap: anywhere; }
.locked { opacity: .45; }
.details-content { margin-top: 16px; }
.quick-search-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 10px; }
.quick-search { position: relative; display: flex; align-items: center; gap: 8px; padding: 0 12px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); }
.quick-search .search-icon { color: var(--muted); font-size: 20px; }
.quick-search input { border: 0 !important; background: transparent !important; box-shadow: none !important; }
.quick-results { position: absolute; top: calc(100% + 6px); right: 0; left: 0; z-index: 40; display: none; padding: 5px; background: #151b20; border: 1px solid var(--line-strong); border-radius: 7px; box-shadow: var(--shadow); }
.quick-results.is-open { display: grid; }
.quick-result { display: grid; gap: 2px; width: 100%; padding: 9px 10px; color: var(--text); background: transparent; border: 0; border-radius: 5px; text-align: left; cursor: pointer; }
.quick-result:hover { background: #20272d; }
.quick-result small { color: var(--muted); }
.finance-stat strong { display: block; margin-top: 7px; font-size: 18px; }
.finance-stat p { margin: 3px 0 0; color: var(--muted); font-size: 10px; }

.auth-page { background: #080b0d; }
.auth-layout { display: grid; min-height: 100vh; grid-template-columns: minmax(380px,1.15fr) minmax(390px,.85fr); }
.auth-visual { position: relative; display: flex; min-height: 100vh; flex-direction: column; justify-content: space-between; padding: 38px 42px; background: linear-gradient(90deg,rgba(6,9,11,.88),rgba(6,9,11,.28)),url('../img/creatium-world.webp') center/cover no-repeat; border-right: 1px solid var(--line); }
.auth-brand { display: flex; align-items: center; gap: 12px; }
.auth-message { max-width: 610px; padding-bottom: 35px; }
.auth-message h1 { max-width: 580px; margin: 0; font-size: clamp(42px,5vw,72px); line-height: 1.02; }
.auth-message p { max-width: 520px; margin: 18px 0 0; color: #c3cdd2; font-size: 16px; }
.auth-form-wrap { display: grid; place-items: center; padding: 35px; }
.auth-form { width: min(100%,430px); }
.auth-form-head { margin-bottom: 28px; }
.auth-form-head h2 { margin: 0; font-size: 28px; }
.auth-form-head p { margin: 8px 0 0; color: var(--muted); }
.auth-submit { width: 100%; min-height: 46px; }
.auth-footer { margin: 22px 0 0; color: var(--muted); text-align: center; }
.auth-footer a { color: var(--accent); font-weight: 700; }

@media (max-width: 1180px) {
  .metric-grid.is-six { grid-template-columns: repeat(3,minmax(0,1fr)); }
  .dashboard-grid, .ranking-layout { grid-template-columns: 1fr; }
  .quest-layout { grid-template-columns: 1fr; }
  .admin-quest-layout { grid-template-columns: 1fr; }
  .admin-editor { position: static; }
}

@media (max-width: 900px) {
  :root { --sidebar: 0px; }
  .app-sidebar { display: none; }
  .app-main { margin-left: 0; padding-bottom: 76px; }
  .app-topbar { min-height: 64px; padding: 10px 18px; }
  .page-container { padding: 20px 18px 44px; }
  .mobile-nav {
    position: fixed;
    right: 10px;
    bottom: 10px;
    left: 10px;
    z-index: 80;
    display: grid;
    grid-template-columns: repeat(7,1fr);
    padding: 6px;
    background: rgba(16,21,25,.96);
    border: 1px solid var(--line-strong);
    border-radius: 8px;
    box-shadow: 0 15px 45px rgba(0,0,0,.42);
    backdrop-filter: blur(18px);
  }
  .mobile-nav a { display: grid; min-width: 0; place-items: center; gap: 3px; padding: 6px 3px; color: var(--muted); border-radius: 5px; font-size: 9px; }
  .mobile-nav a.active { color: var(--text); background: var(--accent-soft); }
  .mobile-nav img { width: 20px; height: 20px; object-fit: contain; image-rendering: pixelated; }
  .mobile-nav-glyph { display:grid; width:20px; height:20px; place-items:center; color:var(--accent); font:800 14px/1 var(--mono); }
  .two-column, .chart-grid { grid-template-columns: 1fr; }
  .quest-layout { grid-template-columns: 1fr; }
  .quick-search-grid { grid-template-columns: 1fr; }
  .auth-layout { grid-template-columns: 1fr; }
  .auth-visual { min-height: 320px; padding: 28px; }
  .auth-message { padding-bottom: 0; }
  .auth-message h1 { font-size: 42px; }
}

@media (max-width: 680px) {
  .page-container { padding: 16px 12px 36px; }
  .app-topbar { padding-inline: 14px; }
  .topbar-kicker { display: none; }
  .app-topbar h1 { font-size: 15px; }
  .page-heading { align-items: start; flex-direction: column; }
  .page-heading h2 { font-size: 21px; }
  .metric-grid, .metric-grid.is-six, .stat-grid, .quest-stats { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .metric-value, .stat-value { font-size: 20px; }
  .three-column { grid-template-columns: 1fr; }
  .form-grid, .custom-grid { grid-template-columns: 1fr; }
  .hero-content, .team-hero-content { min-height: 390px; align-items: end; flex-direction: column; justify-content: end; padding: 18px; }
  .identity { width: 100%; align-items: start; flex-direction: column; }
  .avatar-shell, .team-logo { width: 82px; height: 82px; flex-basis: 82px; }
  .player-title { font-size: 22px; }
  .hero-actions { display: grid; width: 100%; grid-template-columns: 1fr; }
  .hero-actions > *, .hero-actions form, .hero-actions button { width: 100%; }
  .ranking-head, .season-bar { align-items: start; flex-direction: column; }
  .ranking-row { grid-template-columns: 34px minmax(0,1fr); }
  .ranking-value { display: none; }
  .chart-tools { grid-template-columns: 1fr; }
  .finance-summary, .bank-summary, .chart-summary { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .data-row, .row-line, .history-row, .activity-row, .sanction-row { grid-template-columns: 1fr; align-items: start; }
  .info-row { grid-template-columns: 1fr; gap: 4px; }
  .info-value { text-align: left; }
  .job-detail-hero, .job-detail-identity { align-items: flex-start; flex-direction: column; }
  .job-level-orbit { width: 100%; height: auto; min-height: 82px; }
  .admin-form-grid { grid-template-columns: 1fr 1fr; }
  .admin-field-wide { grid-column: span 2; }
  .admin-rule-row, .admin-reward-row { grid-template-columns: 42px minmax(0,1fr); }
  .admin-row-actions, .admin-reward-row form { grid-column: 1 / -1; justify-content: stretch; }
  .admin-row-actions > *, .admin-row-actions form, .admin-row-actions button, .admin-reward-row form button { width: 100%; }
  .section-head { align-items: flex-start; flex-direction: column; }
  .quest-head { grid-template-columns: 1fr; }
  .quest-admin-row, .template-row { grid-template-columns: 1fr; }
  .filter-grid, .bank-log-row { grid-template-columns: 1fr; }
  .member-row { grid-template-columns: 44px minmax(0,1fr); }
  .member-row form { grid-column: 1 / -1; }
  .xp-guide { grid-template-columns: 1fr 1fr; }
  .db-layout { grid-template-columns: 1fr; }
  .danger-zone, .player-admin-row { align-items: stretch; flex-direction: column; }
  .auth-visual { min-height: 260px; padding: 22px; }
  .auth-message h1 { font-size: 34px; }
  .auth-message p { font-size: 14px; }
  .auth-form-wrap { padding: 32px 20px; }
}

@media (max-width: 420px) {
  .metric-grid, .metric-grid.is-six, .stat-grid, .quest-stats { grid-template-columns: 1fr 1fr; }
  .metric, .stat-card { padding: 13px; }
  .metric-label, .stat-label { font-size: 7px; }
  .metric-value, .stat-value { font-size: 18px; }
  .mobile-nav a span { font-size: 8px; }
}
@media (max-width: 320px) {
  .page-container { padding-right: 8px; padding-left: 8px; }
  .mobile-nav { right: 4px; left: 4px; padding: 4px 2px; }
  .mobile-nav a { padding-inline: 1px; }
  .mobile-nav a span { font-size: 7px; }
  .bank-widget { padding: 12px; }
  .bank-controls { display: grid; width: 100%; grid-template-columns: minmax(0,1fr); }
  .bank-controls .field-group { width: 100%; min-width: 0; }
  .bank-controls select { width: 100%; min-width: 0; }
  .bank-chart { height: 230px; }
  .bank-summary { grid-template-columns: 1fr; }
  .bank-summary strong { font-size: 16px; overflow-wrap: anywhere; }
}
/* Team workspace */
.team-page-head { display:flex; align-items:center; justify-content:space-between; gap:24px; padding:4px 0 20px; border-bottom:1px solid var(--line); }
.team-head-identity { display:flex; align-items:center; gap:14px; min-width:0; }
.team-head-identity h2 { margin:2px 0 7px; font-size:clamp(24px,3vw,36px); letter-spacing:0; }
.team-head-stats { display:grid; grid-template-columns:repeat(3,minmax(105px,1fr)); border:1px solid var(--line); background:var(--surface); border-radius:6px; }
.team-head-stats div { padding:12px 16px; border-left:1px solid var(--line); }
.team-head-stats div:first-child { border-left:0; }
.team-head-stats small,.team-head-stats strong { display:block; }
.team-head-stats small { color:var(--muted); font-size:10px; text-transform:uppercase; }
.team-head-stats strong { margin-top:3px; font-size:15px; }
.team-workspace { display:grid; grid-template-columns:190px minmax(0,1fr); gap:26px; padding-top:22px; align-items:start; }
.team-section-nav { position:sticky; top:88px; }
.team-nav-label { padding:0 10px 8px; color:var(--muted); font-size:10px; font-weight:800; text-transform:uppercase; }
.team-section-nav nav { display:grid; gap:3px; }
.team-section-nav nav a { display:flex; align-items:center; justify-content:space-between; min-height:39px; padding:0 10px; border-left:2px solid transparent; color:var(--muted); font-size:12px; font-weight:700; }
.team-section-nav nav a:hover { color:var(--text); background:var(--surface); }
.team-section-nav nav a.is-active { color:var(--text); border-color:var(--accent); background:var(--accent-soft); }
.team-section-nav nav b { min-width:20px; padding:2px 5px; border-radius:4px; background:var(--danger); color:#fff; text-align:center; font-size:10px; }
.team-nav-foot { margin-top:18px; padding:14px 10px; border-top:1px solid var(--line); }
.team-nav-foot small { color:var(--muted); }
.team-nav-foot strong { float:right; font-size:12px; }
.team-nav-foot .progress { clear:both; margin-top:9px; }
.team-section-content { min-width:0; }

.claim-map-shell { overflow:hidden; border:1px solid var(--line); background:var(--surface); border-radius:6px; }
.claim-map-toolbar { display:flex; align-items:center; justify-content:space-between; gap:16px; padding:16px 18px; border-bottom:1px solid var(--line); }
.claim-map-toolbar h3 { margin:2px 0 0; font-size:17px; }
.claim-map-controls { display:flex; align-items:flex-end; gap:6px; }
.claim-map-controls label { display:grid; gap:4px; margin-right:4px; }
.claim-map-controls label span { color:var(--muted); font-size:9px; font-weight:700; text-transform:uppercase; }
.claim-map-controls select { min-width:130px; height:34px; }
.icon-btn { display:grid; place-items:center; width:34px; height:34px; padding:0; border:1px solid var(--line); border-radius:5px; background:var(--surface-raised); color:var(--text); font:700 17px/1 system-ui; cursor:pointer; }
.icon-btn:hover { border-color:var(--accent); color:var(--accent); }
.claim-map-layout { display:grid; grid-template-columns:minmax(0,1fr) 230px; min-height:470px; }
.claim-map-stage { position:relative; min-width:0; min-height:470px; overflow:hidden; background:#11161d; cursor:grab; touch-action:none; }
.claim-map-stage:active { cursor:grabbing; }
#claimMapCanvas { position:absolute; inset:0; display:block; }
.claim-map-stage output { position:absolute; left:12px; bottom:12px; padding:6px 8px; border:1px solid rgba(255,255,255,.12); border-radius:4px; background:rgba(8,11,15,.82); color:#cbd5e1; font-size:10px; pointer-events:none; }
.claim-map-empty { position:absolute; inset:0; display:grid; place-items:center; color:#94a3b8; font-weight:700; pointer-events:none; }
.claim-map-empty[hidden] { display:none; }
.claim-inspector { padding:20px; border-left:1px solid var(--line); background:var(--surface-raised); }
.claim-inspector h4 { margin:8px 0 6px; font-size:15px; }
.claim-inspector p { min-height:54px; margin:0 0 14px; color:var(--muted); font-size:11px; line-height:1.55; }
.claim-inspector form { margin-top:24px; }
.claim-pricing-grid { display:grid; grid-template-columns:repeat(4,minmax(150px,1fr)); gap:14px; }
.claim-pricing-action { grid-column:1/-1; }
.protection-config-list { display:grid; gap:8px; }
.protection-config { border:1px solid var(--line); border-radius:6px; background:var(--surface-soft); }
.protection-config > summary { display:flex; align-items:center; justify-content:space-between; gap:16px; padding:14px 16px; cursor:pointer; }
.protection-config > summary span:first-child { display:grid; gap:2px; }
.protection-config > summary small { color:var(--muted); }
.protection-config-body { display:grid; gap:16px; padding:18px; border-top:1px solid var(--line); }
.protection-feature-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; }
.protection-feature { display:flex; align-items:flex-start; gap:10px; min-height:46px; padding:11px; border:1px solid var(--line); border-radius:5px; background:var(--surface); font-size:11px; }
.protection-feature.is-primary { min-height:66px; border-color:var(--line-strong); }
.protection-feature span { display:grid; gap:3px; }
.protection-feature small { color:var(--muted); }
.protection-delete { display:flex; justify-content:flex-end; padding:0 18px 18px; }

@media (max-width: 900px) {
  .team-page-head { align-items:flex-start; flex-direction:column; }
  .team-head-stats { width:100%; }
  .team-workspace { grid-template-columns:1fr; gap:14px; }
  .team-section-nav { position:static; overflow-x:auto; }
  .team-section-nav .team-nav-label,.team-nav-foot { display:none; }
  .team-section-nav nav { display:flex; min-width:max-content; }
  .team-section-nav nav a { border-left:0; border-bottom:2px solid transparent; }
  .team-section-nav nav a.is-active { border-bottom-color:var(--accent); }
  .claim-map-layout { grid-template-columns:1fr; }
  .claim-inspector { border-top:1px solid var(--line); border-left:0; }
  .claim-pricing-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (max-width: 600px) {
  .team-head-stats { grid-template-columns:1fr 1fr; }
  .team-head-stats div:last-child { grid-column:1/-1; border-top:1px solid var(--line); border-left:0; }
  .claim-map-toolbar { align-items:flex-start; flex-direction:column; }
  .claim-map-controls { width:100%; }
  .claim-map-controls label { flex:1; }
  .claim-map-controls select { width:100%; min-width:0; }
  .claim-map-layout,.claim-map-stage { min-height:390px; }
  .claim-pricing-grid,.protection-feature-grid { grid-template-columns:1fr; }
}

/* Règlement et wiki */
.guide-page,.wiki-reader{display:grid;gap:22px}.guide-hero{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(260px,.6fr);align-items:center;gap:24px;padding:28px;border:1px solid var(--line);border-radius:var(--radius);background:radial-gradient(circle at 88% 12%,rgba(255,104,70,.16),transparent 38%),var(--surface)}.guide-hero h2,.wiki-reader-head h2{margin:0;font-size:clamp(25px,4vw,42px);line-height:1.08}.guide-hero>div>p,.wiki-reader-head>p{max-width:720px;margin:12px 0 0;color:var(--text-soft);font-size:15px}.guide-alert{display:grid;gap:7px;padding:18px;border:1px solid rgba(240,106,114,.42);border-radius:var(--radius);background:rgba(240,106,114,.09)}.guide-alert strong{color:#ff9399;font-size:15px}.guide-alert span{color:var(--text-soft);font-size:12px}.guide-toc{display:grid;gap:12px}.guide-toc>div{display:flex;flex-wrap:wrap;gap:7px}.guide-toc a{display:flex;align-items:center;gap:7px;padding:8px 11px;color:var(--text-soft);border:1px solid var(--line);border-radius:5px;background:var(--surface-soft);font-size:11px}.guide-toc a:hover{color:var(--text);border-color:var(--accent)}.guide-toc b{color:var(--accent);font-family:var(--mono)}.regulation-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.regulation-card{display:grid;grid-template-columns:52px minmax(0,1fr);gap:16px;padding:22px;border:1px solid var(--line);border-radius:var(--radius);background:var(--surface);scroll-margin-top:90px}.regulation-card.is-critical{border-color:rgba(240,106,114,.35);background:linear-gradient(135deg,rgba(240,106,114,.055),var(--surface) 45%)}.regulation-number{display:grid;width:48px;height:48px;place-items:center;color:var(--accent);border:1px solid color-mix(in srgb,var(--accent) 36%,var(--line));border-radius:6px;background:var(--accent-soft);font:800 13px/1 var(--mono)}.regulation-card h3{margin:0;font-size:19px}.regulation-summary{margin:7px 0 13px;color:var(--text-soft);font-weight:700}.guide-prose{color:var(--text-soft);font-size:13px;line-height:1.72}.guide-prose p{margin:0 0 9px}.guide-prose p:last-child{margin-bottom:0}.guide-section{display:grid;gap:13px}.wiki-category-heading{display:flex;align-items:center;gap:13px}.wiki-category-heading>span{display:grid;width:45px;height:45px;place-items:center;color:var(--accent);border:1px solid var(--line);border-radius:6px;background:var(--accent-soft);font:800 16px/1 var(--mono)}.wiki-category-heading h3{margin:0;font-size:18px}.wiki-category-heading p{margin:3px 0 0;color:var(--muted);font-size:12px}.wiki-article-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}.wiki-article-card{display:grid;align-content:start;min-height:176px;padding:18px;border:1px solid var(--line);border-radius:var(--radius);background:var(--surface);transition:transform .15s,border-color .15s}.wiki-article-card:hover{transform:translateY(-2px);border-color:color-mix(in srgb,var(--accent) 45%,var(--line))}.wiki-article-card small{color:var(--accent);font:700 8px/1 var(--mono);text-transform:uppercase}.wiki-article-card strong{margin-top:11px;font-size:16px}.wiki-article-card p{margin:7px 0;color:var(--muted);font-size:12px}.wiki-article-card span{margin-top:auto;padding-top:14px;color:var(--text-soft);font-size:11px;font-weight:800}.wiki-search{display:grid;gap:7px}.wiki-search label{color:var(--muted);font:700 9px/1 var(--mono);text-transform:uppercase}.wiki-search>div{display:flex;gap:7px}.wiki-search input{width:100%;min-width:0}.wiki-reader{max-width:980px;margin:0 auto}.wiki-reader-head{display:grid;padding:14px 0 22px;border-bottom:1px solid var(--line)}.wiki-reader-head .job-back{margin-bottom:30px}.wiki-blocks{display:grid;gap:11px}.wiki-block{padding:21px;border:1px solid var(--line);border-radius:var(--radius);background:var(--surface)}.wiki-block h3{margin:0 0 12px;font-size:17px}.wiki-block code{display:block;margin:0 0 12px;padding:12px 14px;overflow-x:auto;color:#ffd2c8;border:1px solid color-mix(in srgb,var(--accent) 34%,var(--line));border-radius:5px;background:#0a0d10;font:700 12px/1.5 var(--mono);white-space:pre-wrap}.wiki-block.is-tip{border-left:3px solid var(--green);background:linear-gradient(90deg,rgba(79,209,139,.07),var(--surface) 35%)}.wiki-block.is-warning{border-left:3px solid var(--yellow);background:linear-gradient(90deg,rgba(242,199,101,.07),var(--surface) 35%)}.wiki-block figure{margin:15px 0 0}.wiki-block figure img{width:100%;max-height:620px;object-fit:contain;border:1px solid var(--line);border-radius:6px;background:var(--surface-soft)}.wiki-block figcaption{margin-top:7px;color:var(--muted);font-size:10px;text-align:center}.guide-admin-form{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}.guide-admin-form label{display:grid;align-content:start;gap:6px;color:var(--muted);font-size:10px;font-weight:700}.guide-admin-form input,.guide-admin-form textarea,.guide-admin-form select{width:100%}.guide-admin-form .check-row{display:flex}.guide-admin-wide{grid-column:1/-1}.guide-admin-list{display:grid;gap:8px}.guide-admin-list article{display:flex;align-items:center;justify-content:space-between;gap:15px;padding:13px;border:1px solid var(--line);border-radius:6px;background:var(--surface-soft)}.guide-admin-list h4{margin:8px 0 2px}.guide-admin-list p{margin:0;color:var(--muted);font-size:11px}.wiki-admin-editors{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}.wiki-admin-editors .guide-admin-form{grid-template-columns:repeat(2,minmax(0,1fr))}.wiki-admin-tree{display:grid;gap:8px}.wiki-admin-tree>details{overflow:hidden;border:1px solid var(--line);border-radius:6px;background:var(--surface-soft)}.wiki-admin-tree>details>summary{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px;cursor:pointer}.wiki-admin-tree>details>div{display:grid;gap:7px;padding:0 12px 12px}.wiki-admin-tree article{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:11px;border:1px solid var(--line);border-radius:5px;background:var(--surface)}.wiki-admin-tree article>div:first-child{display:grid;gap:3px}.wiki-admin-tree small{color:var(--muted)}.wiki-admin-tree .wiki-admin-block{margin-left:22px;background:#0b0f12}.wiki-category-delete{display:flex;justify-content:flex-end;padding-top:5px}
@media(max-width:1100px){.regulation-list{grid-template-columns:1fr}.wiki-article-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.wiki-admin-editors{grid-template-columns:1fr}}
@media(max-width:700px){.guide-hero{grid-template-columns:1fr;padding:21px}.wiki-article-grid{grid-template-columns:1fr}.regulation-card{grid-template-columns:38px minmax(0,1fr);padding:16px}.regulation-number{width:38px;height:38px}.guide-admin-form,.wiki-admin-editors .guide-admin-form{grid-template-columns:1fr}.guide-admin-wide{grid-column:auto}.guide-admin-list article,.wiki-admin-tree article{align-items:flex-start;flex-direction:column}.wiki-admin-tree .wiki-admin-block{margin-left:10px}.wiki-admin-tree .button-row{width:100%;justify-content:flex-start}.wiki-search>div{align-items:stretch;flex-direction:column}}

/* Arbre de compétences des teams */
.team-skill-page{min-width:0}.team-skill-hero{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;padding:24px;border:1px solid var(--line);border-radius:var(--radius);background:radial-gradient(circle at 88% 8%,rgba(255,104,70,.18),transparent 38%),var(--surface)}.team-skill-hero h3{margin:7px 0 5px;font-size:clamp(24px,3vw,36px)}.team-skill-hero p{max-width:680px;margin:0;color:var(--text-soft)}.team-skill-wallet{display:grid;min-width:210px;text-align:right}.team-skill-wallet small,.team-skill-wallet span{color:var(--muted)}.team-skill-wallet strong{color:var(--accent);font-size:28px}.team-skill-legend{display:flex;flex-wrap:wrap;gap:18px;padding:0 5px;color:var(--muted);font-size:11px}.team-skill-legend span{display:flex;align-items:center;gap:7px}.team-skill-legend i{width:10px;height:10px;border-radius:50%;background:#59606d}.team-skill-legend i.is-owned{background:var(--green);box-shadow:0 0 9px rgba(79,209,139,.6)}.team-skill-legend i.is-ready{background:var(--accent);box-shadow:0 0 9px rgba(255,104,70,.55)}
.team-skill-tree-actions{display:flex;align-items:center;justify-content:space-between;gap:14px}.team-skill-tree-scroll{height:min(72vh,760px);min-height:540px;min-width:0;overflow:auto;padding:2px 2px 16px;border:1px solid var(--line);border-radius:var(--radius);background:linear-gradient(rgba(255,255,255,.018) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.018) 1px,transparent 1px),#0b0e12;background-size:28px 28px;cursor:grab;touch-action:none;overscroll-behavior:contain}.team-skill-tree-scroll.is-dragging{cursor:grabbing;user-select:none}.team-skill-tree-scroll:focus-visible{outline:2px solid var(--accent);outline-offset:2px}.team-skill-tree{min-width:1900px;padding:24px 28px 34px}.team-skill-root{position:relative;z-index:3;display:flex;align-items:center;justify-content:center;gap:13px;width:280px;margin:0 auto 58px;padding:15px 20px;border:2px solid var(--accent);border-radius:60px;background:radial-gradient(circle at 50% 0,rgba(255,104,70,.2),transparent 75%),#171a20;box-shadow:0 0 30px rgba(255,104,70,.16)}.team-skill-root:after{content:"";position:absolute;top:100%;left:50%;width:2px;height:59px;background:linear-gradient(var(--accent),rgba(255,104,70,.28))}.team-skill-root-icon{display:grid;width:48px;height:48px;place-items:center;border-radius:50%;background:var(--accent);color:#15171b;font:900 20px/1 var(--mono)}.team-skill-root div{display:grid}.team-skill-root small,.team-skill-root div span{color:var(--muted);font-size:9px;text-transform:uppercase}.team-skill-root strong{font-size:17px}
.team-skill-branches{position:relative;display:grid;grid-auto-columns:248px;grid-auto-flow:column;justify-content:center;gap:18px;padding-top:30px}.team-skill-branches:before{content:"";position:absolute;top:0;left:124px;right:124px;height:2px;background:linear-gradient(90deg,transparent,rgba(255,104,70,.42) 5%,rgba(255,104,70,.42) 95%,transparent)}.team-skill-branch{--branch-accent:#ff6846;position:relative;min-width:0}.team-skill-branch:nth-child(2){--branch-accent:#f2c765}.team-skill-branch:nth-child(3){--branch-accent:#5bb8ff}.team-skill-branch:nth-child(4){--branch-accent:#ba8cff}.team-skill-branch:nth-child(5){--branch-accent:#ff7fa8}.team-skill-branch:nth-child(6){--branch-accent:#61c98b}.team-skill-branch:nth-child(7){--branch-accent:#ff965c}.team-skill-branch:before{content:"";position:absolute;top:-30px;left:50%;width:2px;height:31px;background:var(--branch-accent);opacity:.62}.team-skill-branch>header{position:relative;z-index:2;display:flex;align-items:center;gap:11px;min-height:72px;padding:12px;border:1px solid color-mix(in srgb,var(--branch-accent) 60%,var(--line));border-radius:9px;background:color-mix(in srgb,#171a20 91%,var(--branch-accent));box-shadow:0 10px 25px rgba(0,0,0,.28)}.team-skill-branch>header>span{display:grid;width:38px;height:38px;flex:0 0 38px;place-items:center;border:1px solid var(--branch-accent);border-radius:50%;color:var(--branch-accent);font:800 11px/1 var(--mono)}.team-skill-branch>header small{color:var(--branch-accent);font:800 8px/1 var(--mono);text-transform:uppercase}.team-skill-branch>header h4{margin:4px 0 0;font-size:14px}.team-skill-path{position:relative;display:grid;gap:20px;padding:30px 0 0}.team-skill-path:before{content:"";position:absolute;top:0;bottom:24px;left:18px;width:2px;background:linear-gradient(var(--branch-accent),rgba(255,255,255,.08))}
.team-skill-node{position:relative;z-index:1;display:grid;gap:10px;min-height:250px;margin-left:8px;padding:15px;border:1px solid var(--line);border-radius:9px;background:#15181e;box-shadow:0 10px 24px rgba(0,0,0,.28);transition:transform .16s,border-color .16s,opacity .16s}.team-skill-node:before{content:"";position:absolute;top:25px;left:-1px;width:11px;height:11px;transform:translateX(-50%);border:3px solid #15181e;border-radius:50%;background:#59606d;box-shadow:0 0 0 1px var(--line)}.team-skill-node:hover{transform:translateY(-2px);border-color:color-mix(in srgb,var(--branch-accent) 55%,var(--line))}.team-skill-node.is-ready{border-color:var(--branch-accent);box-shadow:0 10px 24px rgba(0,0,0,.28),0 0 18px color-mix(in srgb,var(--branch-accent) 18%,transparent)}.team-skill-node.is-ready:before{background:var(--branch-accent);box-shadow:0 0 11px var(--branch-accent)}.team-skill-node.is-owned{border-color:rgba(79,209,139,.65);background:linear-gradient(145deg,rgba(79,209,139,.1),#15181e 48%)}.team-skill-node.is-owned:before{background:var(--green);box-shadow:0 0 11px rgba(79,209,139,.7)}.team-skill-node.is-locked{opacity:.72}.team-skill-node-head,.team-skill-node footer{display:flex;align-items:center;justify-content:space-between;gap:8px}.team-skill-step{color:var(--branch-accent);font:800 10px/1 var(--mono)}.team-skill-node h5{margin:0;font-size:15px}.team-skill-node p{min-height:50px;margin:0;color:var(--text-soft);font-size:11px;line-height:1.55}.team-skill-effect{display:flex;align-items:center;justify-content:space-between;padding:8px 9px;border:1px solid var(--line);border-radius:5px;background:rgba(255,255,255,.035);color:var(--muted);font-size:10px}.team-skill-effect strong{color:var(--branch-accent);font-size:15px}.team-skill-prerequisites,.team-skill-blockers{display:flex;flex-wrap:wrap;gap:5px}.team-skill-prerequisites small{width:100%;color:var(--muted);font-size:8px;text-transform:uppercase}.team-skill-prerequisites span,.team-skill-blockers span{padding:4px 6px;border-radius:4px;background:rgba(255,255,255,.05);color:var(--text-soft);font:700 8px/1.3 var(--mono)}.team-skill-blockers span{color:#e0bdbc;background:rgba(240,106,114,.08)}.team-skill-node footer{align-self:end;margin-top:auto;padding-top:10px;border-top:1px solid var(--line)}.team-skill-node footer>strong{color:#fff;font-size:13px}.team-skill-node footer form{margin:0}.team-skill-owned-mark{color:var(--green);font-size:10px;font-weight:800}
@media(max-width:900px){.team-skill-hero{align-items:flex-start;flex-direction:column}.team-skill-wallet{text-align:left}.team-skill-tree{min-width:1800px;padding-inline:22px}.team-skill-branches{grid-auto-columns:232px}}
@media(max-width:600px){.team-skill-hero{padding:18px}.team-skill-wallet strong{font-size:24px}.team-skill-tree-actions{align-items:flex-start;flex-direction:column}.team-skill-drag-hint{width:100%}.team-skill-tree-scroll{height:64vh;min-height:440px;border-radius:8px}.team-skill-tree{min-width:1740px;padding:20px 18px 28px}.team-skill-branches{grid-auto-columns:222px;gap:15px}.team-skill-root{margin-bottom:48px}.team-skill-root:after{height:49px}.team-skill-node{min-height:238px;padding:13px}}