/* generat din ../style.css de make-green.js; nu-l edita de mână */
:root {
    --blue: #22C55E;
    --blue-2: #4ADE80;
    --glow: rgba(34, 197, 94, 0.45);
    --bg: #0B0A0A;
    --card: #191717;
    --card-2: #242121;
    --line: rgba(74, 222, 128, 0.16);
    --line-2: rgba(74, 222, 128, 0.34);
    --text: #F5F3F3;
    --muted: #8A94B8;
    --green: #2BD97C;
    --yellow: #C5FF3D;
    --red: #42F056;
    --heading: 'Rajdhani', 'Inter', sans-serif;
    --mono: 'JetBrains Mono', Consolas, monospace;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
body { min-height: 100vh; background: radial-gradient(ellipse 80% 50% at 50% -10%, rgba(34, 197, 94, 0.22), transparent), var(--bg); font-family: 'Inter', system-ui, sans-serif; color: var(--text); line-height: 1.5; }
a { color: inherit; }
button, input, textarea, select { font: inherit; color: inherit; }
h1, h2, h3 { font-family: var(--heading); line-height: 1.1; }
.muted { color: var(--muted); }
.mono { font-family: var(--mono); }

.top { position: sticky; top: 0; z-index: 10; display: flex; align-items: center; gap: 24px; min-height: 70px; padding: 0 28px; border-bottom: 1px solid var(--line); background: rgba(11, 10, 10, 0.94); }
.brand { display: flex; align-items: center; gap: 12px; text-decoration: none; }
.brand img { width: 40px; height: 40px; object-fit: contain; filter: drop-shadow(0 0 12px var(--glow)); }
.brand small { display: block; font-size: 10.5px; font-weight: 700; letter-spacing: 2px; color: var(--blue-2); text-transform: uppercase; }
.brand b { font: 700 22px var(--heading); }
.tabs { display: flex; gap: 6px; margin-left: auto; }
.tabs a { padding: 9px 16px; border: 1px solid var(--line); border-radius: 11px; background: var(--card); font-size: 14px; font-weight: 700; color: var(--muted); text-decoration: none; white-space: nowrap; }
.tabs a:hover { color: var(--text); border-color: var(--line-2); }
.tabs a.active { border-color: var(--blue); background: var(--blue); color: #fff; }
.menu-btn { display: none; width: 42px; height: 42px; margin-left: auto; border: 1px solid var(--line-2); border-radius: 10px; background: var(--card); font-size: 18px; cursor: pointer; }

.content { max-width: 1180px; margin: 0 auto; padding: 36px 28px 90px; }
.page-title { font-size: 42px; margin-bottom: 6px; }
.section-title { margin: 38px 0 14px; font-size: 26px; }

.hero { display: flex; align-items: center; justify-content: space-between; gap: 30px; padding: 36px; border: 1px solid var(--line-2); border-radius: 20px; background: linear-gradient(120deg, rgba(34, 197, 94, 0.2), var(--card) 60%); }
.hero h1 { font-size: 52px; }
.hero p { max-width: 560px; margin-top: 8px; color: #E0DBDB; }
.hero .buttons { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 20px; }
.status { min-width: 190px; text-align: right; }
.status b { display: block; font: 700 54px var(--heading); line-height: 1; }
.dot { display: inline-block; width: 9px; height: 9px; margin-right: 6px; border-radius: 50%; background: var(--muted); }
.dot.on { background: var(--green); box-shadow: 0 0 10px var(--green); }

.btn { display: inline-block; padding: 10px 18px; border: 1px solid var(--line-2); border-radius: 11px; background: var(--card-2); font-size: 14px; font-weight: 700; text-decoration: none; cursor: pointer; }
.btn:hover { border-color: var(--blue-2); }
.btn:disabled { opacity: 0.5; cursor: not-allowed; }
.btn.primary { border-color: var(--blue); background: var(--blue); color: #fff; }
.btn.danger { border-color: rgba(66, 240, 86, 0.5); background: rgba(66, 240, 86, 0.12); color: #D3C6C8; }
.btn.small { padding: 6px 12px; font-size: 13px; }

.grid { display: grid; gap: 14px; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); }
.stats { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); margin-top: 18px; }
.card { padding: 18px 20px; border: 1px solid var(--line); border-radius: 15px; background: var(--card); min-width: 0; }
.stat small { display: block; font-size: 12px; font-weight: 700; letter-spacing: 1px; color: var(--muted); text-transform: uppercase; }
.stat b { display: block; margin-top: 4px; font: 700 30px var(--heading); overflow-wrap: anywhere; }
a.card { display: block; text-decoration: none; }
a.card:hover { border-color: var(--line-2); background: var(--card-2); }
.faction { border-top: 3px solid var(--accent, var(--blue)); }
.faction h3 { font-size: 22px; }
.faction p { margin-top: 6px; font-size: 14px; color: var(--muted); }
.badge { display: inline-block; padding: 2px 9px; border-radius: 20px; background: var(--card-2); font-size: 12px; font-weight: 700; color: var(--muted); }
.badge.green { background: rgba(43, 217, 124, 0.14); color: var(--green); }
.badge.yellow { background: rgba(197, 255, 61, 0.14); color: var(--yellow); }
.badge.red { background: rgba(66, 240, 86, 0.14); color: var(--red); }

.table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: 15px; background: var(--card); }
table { width: 100%; border-collapse: collapse; font-size: 14px; }
th { padding: 11px 16px; text-align: left; font-size: 12px; letter-spacing: 0.6px; color: var(--muted); text-transform: uppercase; white-space: nowrap; }
td { padding: 11px 16px; border-top: 1px solid var(--line); }
td a { color: var(--blue-2); }
.empty { padding: 22px; color: var(--muted); font-size: 14px; }

.subtabs { display: flex; flex-wrap: wrap; gap: 6px; margin: 22px 0 18px; }
.subtabs button { padding: 8px 15px; border: 1px solid var(--line); border-radius: 10px; background: var(--card); font-size: 14px; font-weight: 700; color: var(--muted); cursor: pointer; }
.subtabs button.active { border-color: var(--blue); background: rgba(34, 197, 94, 0.18); color: #fff; }

.notice { margin-top: 16px; padding: 13px 16px; border: 1px solid rgba(197, 255, 61, 0.35); border-radius: 12px; background: rgba(197, 255, 61, 0.08); font-size: 14px; }
.notice.red { border-color: rgba(66, 240, 86, 0.4); background: rgba(66, 240, 86, 0.1); }

.form { display: grid; gap: 16px; max-width: 720px; }
label { display: grid; gap: 6px; font-size: 14px; font-weight: 600; }
input, textarea, select { width: 100%; padding: 10px 13px; border: 1px solid var(--line-2); border-radius: 10px; background: #170809; outline: none; font-weight: 400; }
input:focus, textarea:focus, select:focus { border-color: var(--blue); }
textarea { min-height: 96px; resize: vertical; }
.login { max-width: 460px; margin: 40px auto; }
.login h1 { font-size: 36px; }
.login ol { margin: 14px 0 18px 20px; color: #E0DBDB; font-size: 14px; }
.code-input { text-align: center; font: 500 24px var(--mono); letter-spacing: 4px; text-transform: uppercase; }

.answer { margin-top: 12px; }
.answer b { display: block; font-size: 13.5px; color: var(--blue-2); }
.answer p { white-space: pre-wrap; overflow-wrap: anywhere; font-size: 14px; }
.row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.row.between { justify-content: space-between; }
.stack { display: grid; gap: 14px; }
.ranks { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }

dialog { position: fixed; inset: 0; margin: auto; width: min(460px, calc(100vw - 32px)); padding: 22px; border: 1px solid var(--line-2); border-radius: 16px; background: var(--card); color: var(--text); }
dialog::backdrop { background: rgba(0, 0, 0, 0.7); }
dialog h3 { margin-bottom: 14px; font-size: 24px; }
dialog .row { justify-content: flex-end; margin-top: 4px; }

.toast { position: fixed; left: 50%; bottom: 24px; z-index: 30; max-width: calc(100vw - 32px); padding: 11px 18px; border: 1px solid var(--line-2); border-radius: 12px; background: var(--card-2); font-size: 14px; font-weight: 600; opacity: 0; pointer-events: none; transform: translateX(-50%); transition: opacity 0.2s; }
.toast.show { opacity: 1; }
.toast.error { border-color: var(--red); }

@media (max-width: 860px) {
    .top { flex-wrap: wrap; gap: 0 12px; padding: 0 16px; }
    .brand { min-height: 66px; }
    .menu-btn { display: block; }
    .tabs { display: none; flex-direction: column; width: 100%; padding-bottom: 12px; }
    .tabs.open { display: flex; }
    .content { padding: 22px 16px 70px; }
    .page-title { font-size: 34px; }
    .hero { flex-direction: column; align-items: flex-start; padding: 24px; }
    .hero h1 { font-size: 38px; }
    .status { text-align: left; }
}

/* Bare de derulare în tema site-ului */
* { scrollbar-width: thin; scrollbar-color: var(--line-2) transparent; }
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { border-radius: 8px; background: var(--line-2); }
::-webkit-scrollbar-thumb:hover { background: var(--blue-2, #4ADE80); }

/* Meniu în stânga */
body { padding-left: 250px; }
.top { position: fixed; inset: 0 auto 0 0; z-index: 20; display: flex; flex-direction: column; align-items: stretch; gap: 0; width: 250px; min-height: 0; padding: 22px 16px; border-right: 1px solid var(--line); border-bottom: 0; background: linear-gradient(180deg, #0C230D, #100506); }
.top .brand { padding: 0 6px 20px; border-bottom: 1px solid var(--line); }
.tabs { flex: 1; min-height: 0; flex-direction: column; gap: 3px; margin: 14px 0 0; overflow-y: auto; }
.tabs a { display: flex; align-items: center; gap: 11px; padding: 11px 12px; border: 0; border-radius: 11px; background: none; color: var(--muted); text-decoration: none; }
.tabs a svg { flex: none; width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.tabs a:hover { background: rgba(74, 222, 128, 0.09); color: var(--text); }
.tabs a.active { background: linear-gradient(90deg, rgba(34, 197, 94, 0.34), rgba(34, 197, 94, 0.05)); color: #fff; box-shadow: inset 3px 0 0 var(--blue); }
.nav-title { margin: 14px 12px 6px; font-size: 11px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; color: #5D678C; }
.tabs a.nav-user { margin-top: auto; padding: 10px; border: 1px solid var(--line); background: var(--card); }
.nav-user span { display: grid; place-items: center; flex: none; width: 36px; height: 36px; border-radius: 10px; background: var(--blue); color: #fff; font-weight: 700; text-transform: uppercase; }
.nav-user b { min-width: 0; font-size: 14px; color: var(--text); overflow: hidden; text-overflow: ellipsis; }
.nav-user small { display: block; font-size: 11.5px; font-weight: 500; color: var(--muted); }
.content { max-width: 1340px; }

/* Cont: conținut și loguri */
.stats .stat b, .stat b { overflow-wrap: anywhere; font-size: clamp(20px, 1.8vw, 30px); }
.with-logs { display: grid; grid-template-columns: minmax(0, 1fr) 240px; gap: 22px; align-items: start; }
#logsCol { position: sticky; top: 20px; padding: 16px; border: 1px solid var(--line); border-radius: 16px; background: var(--card); }
#logsCol[hidden] { display: none; }
#logsCol h3 { margin-bottom: 10px; font-size: 20px; }
.log-list { display: flex; flex-direction: column; gap: 6px; }
.log-list button { padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--card-2); color: var(--text); font-size: 13.5px; font-weight: 600; text-align: left; cursor: pointer; }
.log-list button:hover { border-color: var(--blue); }
dialog.wide { width: min(1000px, calc(100vw - 32px)); max-height: 84vh; }
.group-title { margin: 16px 0 8px; font-size: 18px; }
.action-grid { display: flex; flex-wrap: wrap; gap: 8px; }

@media (max-width: 860px) {
    body { padding-left: 0; }
    .top { position: sticky; inset: auto; top: 0; flex-direction: row; flex-wrap: wrap; align-items: center; width: auto; padding: 0 16px; border-right: 0; border-bottom: 1px solid var(--line); }
    .top .brand { padding: 0; border: 0; }
    .tabs { flex: 0 0 100%; margin: 0; }
    .with-logs { grid-template-columns: 1fr; }
    #logsCol { position: static; }
}
.stats { margin-bottom: 22px; }

/* Aspect sobru */
body { background: #140608; }
.page-title, .hero h1 { color: #fff; }
.top { background: #0A1E0C; }
.tabs a.active { background: var(--blue); box-shadow: none; }
.btn.primary { border: 0; background: var(--blue); box-shadow: none; }
.btn.primary:hover { background: #3FEF4B; }
.subtabs button.active { border-color: var(--blue); background: var(--blue); color: #fff; }
.card { background: #0C2514; transition: border-color 0.14s; }
a.card:hover { border-color: var(--blue-2); }
.hero { background: #0C2514; }
.log-list button:hover { border-color: var(--blue-2); }
::-webkit-scrollbar-thumb { background: var(--line-2); }

/* Panel: meniu pe secțiuni și bară de sus */
body { padding-left: 264px; background: radial-gradient(1100px 620px at 82% -12%, rgba(34, 197, 94, 0.17), transparent 62%), linear-gradient(165deg, #121111, #100506 62%) fixed; transition: padding-left 0.16s; }
.top { width: 264px; padding: 20px 0 14px; border-right: 1px solid var(--line); background: linear-gradient(180deg, #0B210D, #120607); transition: width 0.16s; }
.top .brand { min-height: 62px; margin: 0; padding: 0 22px 18px; }
.tabs { margin: 0; padding: 4px 12px 10px; gap: 2px; }
.tabs a { padding: 12px 14px; border-radius: 11px; font-size: 14.5px; font-weight: 600; color: #CEC9CA; }
.tabs a.active { background: rgba(34, 197, 94, 0.16); color: #fff; box-shadow: inset 3px 0 0 var(--blue); }
.tabs a span { min-width: 0; white-space: nowrap; }
.nav-title { margin: 16px 14px 6px; padding-top: 14px; border-top: 1px solid var(--line); font-size: 12px; font-weight: 600; letter-spacing: 0; text-transform: none; color: var(--muted); }
.nav-title:first-child { margin-top: 2px; padding-top: 0; border: 0; }

.topbar { position: sticky; top: 0; z-index: 15; display: flex; align-items: center; gap: 12px; min-height: 78px; padding: 12px 30px; border-bottom: 1px solid var(--line); background: rgba(13, 11, 11, 0.82); backdrop-filter: blur(12px); }
.topbar svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.tb-btn { display: grid; place-items: center; width: 44px; height: 44px; border: 1px solid var(--line); border-radius: 11px; background: var(--card); color: var(--text); cursor: pointer; }
.tb-search { position: relative; display: flex; align-items: center; width: min(340px, 34vw); height: 46px; margin-left: auto; padding-left: 14px; border: 1px solid var(--line); border-radius: 12px; background: var(--card); }
.tb-search input { flex: 1; min-width: 0; padding: 0; border: 0; background: none; outline: 0; }
.tb-search kbd { margin: 0 8px; padding: 3px 7px; border-radius: 6px; background: var(--card-2); font: 600 11px var(--mono); color: var(--muted); }
.tb-search button { display: grid; place-items: center; width: 46px; height: 100%; border: 0; border-left: 1px solid var(--line); background: none; color: var(--text); cursor: pointer; }
.tb-results { position: absolute; left: 0; right: 0; top: calc(100% + 6px); max-height: 300px; overflow-y: auto; padding: 6px; border: 1px solid var(--line-2); border-radius: 12px; background: #0B2213; }
.tb-results[hidden] { display: none; }
.tb-results a { display: block; padding: 9px 10px; border-radius: 8px; text-decoration: none; }
.tb-results a:hover { background: var(--card-2); }
.tb-results small { display: block; color: var(--muted); }
.tb-results p { padding: 8px 10px; color: var(--muted); }
.tb-online { display: flex; align-items: center; height: 46px; padding: 0 14px; border: 1px solid var(--line); border-radius: 12px; background: var(--card); font-size: 13.5px; white-space: nowrap; }
.tb-btn + .tb-online { margin-left: auto; }
.tb-user { position: relative; }
.tb-user summary { display: flex; align-items: center; gap: 10px; height: 54px; padding: 0 14px 0 8px; border: 1px solid var(--line); border-radius: 13px; background: var(--card); list-style: none; cursor: pointer; }
.tb-user summary::-webkit-details-marker { display: none; }
.tb-user summary span { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 10px; background: var(--blue); color: #fff; font-weight: 700; text-transform: uppercase; }
.tb-user b { font-size: 14px; }
.tb-user small { display: block; font-size: 11.5px; font-weight: 500; color: var(--muted); }
.tb-user > div { position: absolute; right: 0; top: calc(100% + 6px); display: grid; min-width: 170px; padding: 6px; border: 1px solid var(--line-2); border-radius: 12px; background: #0B2213; }
.tb-user > div a, .tb-user > div button { padding: 9px 11px; border: 0; border-radius: 8px; background: none; color: var(--text); font-size: 14px; text-align: left; text-decoration: none; cursor: pointer; }
.tb-user > div a:hover, .tb-user > div button:hover { background: var(--card-2); }

.content { max-width: 1560px; padding: 26px 30px 80px; }
.card, .hero, #logsCol { border-color: rgba(74, 222, 128, 0.2); border-radius: 18px; background: linear-gradient(150deg, rgba(34, 197, 94, 0.11), rgba(26, 23, 24, 0.94) 46%, #0A1E0C); }
.page-title { font-size: 36px; }
.answer { display: grid; grid-template-columns: minmax(180px, 28%) minmax(0, 1fr); gap: 22px; margin-top: 0; padding: 13px 0; border-top: 1px solid var(--line); }
.answer b { font-size: 14px; color: var(--text); }
.answer p { color: #D6D2D2; line-height: 1.5; }

body.side-small { padding-left: 76px; }
.side-small .top { width: 76px; }
.side-small .top .brand { padding: 0 18px 18px; }
.side-small .brand span, .side-small .tabs a span, .side-small .nav-title { display: none; }
.side-small .tabs a { justify-content: center; padding: 13px 0; }

@media (max-width: 860px) {
    body, body.side-small { padding-left: 0; }
    .top, .side-small .top { width: auto; padding: 12px 16px; }
    .menu-btn { display: none; }
    .topbar { position: static; flex-wrap: wrap; padding: 10px 16px; }
    .tb-search { order: 5; width: 100%; margin: 0; }
    .tb-user b, .tb-search kbd { display: none; }
    .tb-user summary { padding: 0 8px; }
    .answer { grid-template-columns: 1fr; gap: 4px; }
    .content { padding: 18px 16px 70px; }
}

/* Aplicație: fișă și răspunsuri */
.app-view { display: grid; grid-template-columns: 290px minmax(0, 1fr); gap: 26px; align-items: start; }
.app-info { display: flex; flex-direction: column; overflow: hidden; border: 1px solid var(--line-2); border-radius: 14px; background: rgba(11, 10, 10, 0.45); }
.app-info > div { display: flex; justify-content: space-between; gap: 12px; padding: 12px 15px; border-bottom: 1px solid var(--line); font-size: 14px; }
.app-info > div:last-child { border-bottom: 0; }
.app-info span { color: var(--muted); }
.app-info b { min-width: 0; font-weight: 600; text-align: right; overflow-wrap: anywhere; }
.app-info .row { justify-content: stretch; }
.app-info .row .btn { flex: 1; }
.app-answers .answer:first-child { border-top: 0; padding-top: 2px; }
@media (max-width: 1050px) { .app-view { grid-template-columns: 1fr; } }
.app-side { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.app-history { display: flex; flex-direction: column; gap: 10px; margin: 0; padding: 0 0 0 18px; border-left: 2px solid var(--line-2); list-style: none; }
.app-history li { position: relative; padding: 10px 13px; border-radius: 12px; background: rgba(11, 10, 10, 0.45); font-size: 13.5px; font-weight: 600; }
.app-history li::before { content: ''; position: absolute; left: -25px; top: 15px; width: 10px; height: 10px; border-radius: 50%; background: var(--blue); }
.app-history small { display: block; margin-bottom: 2px; font-size: 12px; font-weight: 500; color: var(--muted); }

/* Panel elaborat: profunzime, lumină și insigne */
body { background: radial-gradient(900px 520px at 88% -8%, rgba(34, 197, 94, 0.24), transparent 60%), radial-gradient(760px 520px at 8% 108%, rgba(34, 197, 94, 0.13), transparent 60%), linear-gradient(165deg, #121111, #100506 62%) fixed; }
body::before { content: ''; position: fixed; inset: 0; z-index: -1; background-image: linear-gradient(rgba(74, 222, 128, 0.045) 1px, transparent 1px), linear-gradient(90deg, rgba(74, 222, 128, 0.045) 1px, transparent 1px); background-size: 46px 46px; -webkit-mask-image: radial-gradient(ellipse at 60% 20%, #000, transparent 70%); mask-image: radial-gradient(ellipse at 60% 20%, #000, transparent 70%); pointer-events: none; }
@keyframes rise-in { from { transform: translateY(10px); } to { transform: none; } }
.content > * { animation: rise-in 0.32s ease both; }
.content > *:nth-child(2) { animation-delay: 0.04s; }
.content > *:nth-child(3) { animation-delay: 0.08s; }
.content > *:nth-child(n + 4) { animation-delay: 0.12s; }

.top { background: linear-gradient(180deg, #0D260F, #120607 70%); box-shadow: 10px 0 40px rgba(0, 0, 0, 0.35); }
.tabs a { position: relative; transition: background 0.15s, color 0.15s, transform 0.15s; }
.tabs a:hover { transform: translateX(3px); }
.tabs a.active { background: linear-gradient(90deg, rgba(34, 197, 94, 0.34), rgba(34, 197, 94, 0.06)); box-shadow: inset 3px 0 0 #4ADE80, 0 6px 20px rgba(34, 197, 94, 0.18); }
.tabs a.active svg { filter: drop-shadow(0 0 6px rgba(74, 222, 128, 0.9)); }

.card, .hero, #logsCol, .profile { position: relative; border: 1px solid transparent; background: linear-gradient(155deg, #113414, #0B210D 58%) padding-box, linear-gradient(155deg, rgba(74, 222, 128, 0.55), rgba(74, 222, 128, 0.08) 45%, rgba(74, 222, 128, 0.25)) border-box; box-shadow: 0 14px 34px rgba(0, 0, 0, 0.32), inset 0 1px 0 rgba(34, 197, 94, 0.085); }
a.card, .faction { transition: transform 0.18s, box-shadow 0.18s; }
a.card:hover { transform: translateY(-4px); box-shadow: 0 20px 44px rgba(0, 0, 0, 0.42), 0 0 30px rgba(34, 197, 94, 0.22); }
.card.faction { overflow: hidden; }
.card.faction::after { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 3px; background: linear-gradient(90deg, var(--accent, #22C55E), transparent 80%); }

.hero { overflow: hidden; padding: 44px; }
.hero::after { content: ''; position: absolute; right: 150px; top: 50%; width: 330px; height: 330px; background: url('logo.png') center / contain no-repeat; opacity: 0.07; transform: translateY(-50%) rotate(-8deg); pointer-events: none; }
.hero h1 { font-size: 58px; letter-spacing: 0.5px; background: linear-gradient(100deg, #fff 30%, #D4C8C9); -webkit-background-clip: text; background-clip: text; color: transparent; }
.status b { background: linear-gradient(180deg, #fff, #D4C8C9); -webkit-background-clip: text; background-clip: text; color: transparent; }

.page-title { background: linear-gradient(100deg, #fff 40%, #D4C8C9); -webkit-background-clip: text; background-clip: text; color: transparent; }
.section-title { display: flex; align-items: center; gap: 12px; }
.section-title::before { content: ''; width: 5px; height: 24px; border-radius: 3px; background: linear-gradient(180deg, #4ADE80, #22C55E); box-shadow: 0 0 12px rgba(34, 197, 94, 0.8); }

.stats { gap: 14px; }
.card.stat { display: flex; align-items: center; gap: 14px; padding: 16px 18px; }
.stat-ico { display: grid; place-items: center; flex: none; width: 46px; height: 46px; border-radius: 14px; background: linear-gradient(145deg, rgba(34, 197, 94, 0.4), rgba(34, 197, 94, 0.1)); box-shadow: inset 0 0 0 1px rgba(74, 222, 128, 0.35); color: #E3DBDC; }
.stat-ico svg { width: 23px; height: 23px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.card.stat small { display: block; }

.btn.primary { border: 0; background: linear-gradient(135deg, #42F051, #20BA2A); box-shadow: 0 8px 22px rgba(34, 197, 94, 0.38), inset 0 1px 0 rgba(255, 255, 255, 0.22); transition: transform 0.14s, box-shadow 0.14s; }
.btn.primary:hover { background: linear-gradient(135deg, #42F051, #29CE35); transform: translateY(-1px); box-shadow: 0 12px 28px rgba(34, 197, 94, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.25); }
.subtabs button.active { border: 0; background: linear-gradient(135deg, #42F051, #20BA2A); box-shadow: 0 6px 18px rgba(34, 197, 94, 0.35); }
table tbody tr { transition: background 0.14s; }
table tbody tr:hover { background: rgba(34, 197, 94, 0.09); }

/* Profil */
.profile { display: flex; align-items: center; gap: 22px; padding: 26px; overflow: hidden; border-radius: 20px; }
.profile::after { content: ''; position: absolute; right: -60px; top: -90px; width: 320px; height: 320px; border-radius: 50%; background: radial-gradient(circle, rgba(34, 197, 94, 0.3), transparent 68%); pointer-events: none; }
.profile-avatar { display: grid; place-items: center; flex: none; width: 104px; height: 104px; border-radius: 28px; background: linear-gradient(145deg, #42F051, #1C541F); box-shadow: 0 12px 30px rgba(34, 197, 94, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.3); font: 700 54px var(--heading); text-transform: uppercase; color: #fff; }
.profile-main { position: relative; z-index: 1; flex: 1; min-width: 0; }
.profile-main h1 { font-size: 38px; }
.profile-main p { color: var(--muted); }
.profile .row { position: relative; z-index: 1; }
.xp { display: flex; align-items: center; gap: 12px; margin-top: 10px; font-size: 13px; font-weight: 600; color: var(--muted); }
.xp i { flex: 1; max-width: 340px; height: 8px; overflow: hidden; border-radius: 5px; background: rgba(74, 222, 128, 0.16); }
.xp em { display: block; height: 100%; border-radius: 5px; background: linear-gradient(90deg, #22C55E, #C6B6B7); box-shadow: 0 0 10px rgba(74, 222, 128, 0.8); }

/* Insigne */
.medals { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.medal { display: inline-block; flex: none; width: 38px; height: 43px; filter: drop-shadow(0 3px 7px rgba(0, 0, 0, 0.5)); }
.medal svg { display: block; width: 100%; height: 100%; }
.hex { stroke-width: 2; }
.hex-in { fill: rgba(12, 11, 11, 0.55); }
.hex-ico { fill: none; stroke: #fff; stroke-width: 1.800; stroke-linecap: round; stroke-linejoin: round; }
.medal.bronze .hex { fill: #68A93A; stroke: #A7E077; }
.medal.silver .hex { fill: #8C97AB; stroke: #EDEBEB; }
.medal.gold .hex { fill: #9AC62E; stroke: #E0FF8A; }
.medal.astralix .hex { fill: #22C55E; stroke: #D9CECF; }
.medal.astralix { filter: drop-shadow(0 0 9px rgba(74, 222, 128, 0.85)); }
.medal-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 12px; }
.medal-card { display: flex; align-items: center; gap: 14px; padding: 15px; border: 1px solid var(--line); border-radius: 16px; background: linear-gradient(150deg, #123715, #0B210D); transition: transform 0.16s, border-color 0.16s; }
.medal-card:hover { border-color: var(--line-2); transform: translateY(-2px); }
.medal-card .medal { width: 62px; height: 70px; }
.medal-card > div { flex: 1; min-width: 0; }
.medal-card b { display: block; font-size: 15px; }
.medal-card small { display: block; margin-top: 2px; font-size: 12.5px; color: var(--muted); }
.medal-card.locked .medal { filter: grayscale(1) brightness(0.55); }
.medal-card.locked b { color: var(--muted); }
.medal-bar { display: block; height: 6px; margin-top: 8px; overflow: hidden; border-radius: 4px; background: rgba(74, 222, 128, 0.14); }
.medal-bar em { display: block; height: 100%; border-radius: 4px; background: linear-gradient(90deg, #22C55E, #C6B6B7); }

@media (max-width: 860px) {
    .hero { padding: 26px; }
    .hero h1 { font-size: 40px; }
    .hero::after { display: none; }
    .profile { flex-wrap: wrap; }
}
@media (prefers-reduced-motion: reduce) {
    .content > * { animation: none; }
}

/* Aspect moale și modern */
body { background: radial-gradient(1000px 640px at 85% -10%, rgba(66, 240, 81, 0.42), transparent 62%), radial-gradient(860px 620px at 6% 105%, rgba(34, 197, 94, 0.26), transparent 62%), linear-gradient(150deg, #154019 0%, #0E2C11 42%, #121111 100%) fixed; }
body::before { display: none; }
.top { border-right: 1px solid rgba(34, 197, 94, 0.085); background: rgba(21, 19, 19, 0.72); box-shadow: none; }
.topbar { border-bottom: 1px solid rgba(34, 197, 94, 0.085); background: rgba(23, 20, 21, 0.55); }
.tb-btn, .tb-search, .tb-online, .tb-user summary { border-color: rgba(34, 197, 94, 0.119); background: rgba(34, 197, 94, 0.085); }
.tabs a.active { background: rgba(34, 197, 94, 0.136); box-shadow: none; }
.tabs a.active svg { filter: none; color: #D4C8C9; }

.card, .hero, #logsCol, .profile { border: 1px solid rgba(34, 197, 94, 0.119); border-radius: 22px; background: linear-gradient(160deg, rgba(34, 197, 94, 0.128), rgba(34, 197, 94, 0.043)); box-shadow: 0 18px 40px rgba(12, 11, 11, 0.28); }
a.card:hover { box-shadow: 0 22px 46px rgba(12, 11, 11, 0.38); }
.btn { border-color: rgba(34, 197, 94, 0.153); background: rgba(34, 197, 94, 0.102); }
.btn.primary { background: linear-gradient(135deg, #42F052, #2FD23A); box-shadow: 0 8px 20px rgba(34, 197, 94, 0.28); }
.subtabs button { border-color: rgba(34, 197, 94, 0.119); border-radius: 999px; background: rgba(34, 197, 94, 0.085); }
.subtabs button.active { background: #fff; box-shadow: none; color: #1F1C1C; }
.stat-ico { border-radius: 15px; background: rgba(34, 197, 94, 0.098); box-shadow: none; }
.section-title::before { display: none; }

/* Profil */
.profile::after { display: none; }
.profile-avatar { position: relative; width: 96px; height: 96px; border: 1px solid rgba(34, 197, 94, 0.204); border-radius: 26px; background: linear-gradient(150deg, rgba(34, 197, 94, 0.28), rgba(34, 197, 94, 0.07)); box-shadow: none; font-size: 46px; }
.profile-avatar i { position: absolute; right: -3px; bottom: -3px; width: 22px; height: 22px; border: 4px solid #143C17; border-radius: 50%; background: #42F05C; }
.profile-avatar i.on { background: #3ADF8C; }
.profile-name { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.presence { display: inline-flex; align-items: center; gap: 7px; padding: 4px 12px; border-radius: 999px; background: rgba(66, 240, 92, 0.14); font-size: 13.5px; font-weight: 600; color: #CCBDC0; }
.presence i { width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.presence.on { background: rgba(58, 223, 140, 0.14); color: #5FE7A4; }
.xp i { background: rgba(34, 197, 94, 0.153); }
.xp em { background: linear-gradient(90deg, #4ADE80, #D9CECF); box-shadow: none; }

/* Insigne */
.medals { gap: 7px; }
.pill-badge { display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px 5px 9px; border-radius: 999px; font-size: 12.5px; font-weight: 600; }
.pill-badge svg, .medal svg { fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.pill-badge svg { width: 15px; height: 15px; }
.pill-badge.bronze, .medal.bronze { background: rgba(155, 224, 104, 0.15); color: #B4ED88; }
.pill-badge.silver, .medal.silver { background: rgba(34, 197, 94, 0.091); color: #E8E6E6; }
.pill-badge.gold, .medal.gold { background: rgba(205, 255, 96, 0.15); color: #D7FF77; }
.pill-badge.astralix, .medal.astralix { background: rgba(34, 197, 94, 0.14); color: #DED6D6; }
.medal, .medal.astralix { display: grid; place-items: center; filter: none; }
.medal-card { border: 1px solid rgba(34, 197, 94, 0.119); border-radius: 20px; background: rgba(34, 197, 94, 0.076); }
.medal-card:hover { border-color: rgba(34, 197, 94, 0.238); }
.medal-card .medal { width: 54px; height: 54px; border-radius: 17px; }
.medal-card .medal svg { width: 26px; height: 26px; }
.medal-card.locked .medal { background: rgba(34, 197, 94, 0.102); color: rgba(255, 255, 255, 0.35); filter: none; }
.medal-bar { background: rgba(34, 197, 94, 0.136); }
.medal-bar em { background: linear-gradient(90deg, #4ADE80, #D9CECF); }

/* Poza personajului */
.profile-avatar img { width: 100%; height: 100%; border-radius: inherit; object-fit: cover; }
.tb-user summary span { overflow: hidden; }
.tb-user summary span img { width: 100%; height: 100%; object-fit: cover; }

/* Unelte staff */
.server-tools { margin-top: 4px; }
dialog select { width: 100%; }

/* Insigne lângă nume */
.name-tags { display: inline-flex; flex-wrap: wrap; gap: 5px; margin-left: 8px; vertical-align: middle; }
.name-tags .pill-badge { padding: 3px 9px 3px 7px; font-size: 11.5px; }
.name-tags .pill-badge svg { width: 13px; height: 13px; }
.tb-results .name-tags, #tbResults .name-tags { display: flex; margin: 4px 0 0; }

/* Chenarul de ban */
.ban-banner { margin: 12px 0 16px; padding: 14px 18px; border: 1px solid #42F056; border-radius: 15px; background: rgba(66, 240, 86, 0.14); color: #EDE7E8; }
.ban-banner b { display: block; color: #C4B5B6; font-size: 16px; font-weight: 700; }
.ban-banner p { margin: 4px 0 2px; color: #fff; font-size: 15px; overflow-wrap: anywhere; }
.ban-banner small { color: #DED4D6; font-size: 13px; }

/* Email */
.mail-list { display: grid; gap: 8px; margin-top: 20px; }
.mail { padding: 13px 16px; border: 1px solid var(--line); border-radius: 13px; background: var(--card); }
.mail summary { cursor: pointer; list-style: none; }
.mail summary b { display: block; color: var(--muted); font-weight: 500; }
.mail.new summary b { color: #fff; font-weight: 700; }
.mail.new summary b::before { content: ''; display: inline-block; width: 8px; height: 8px; margin-right: 8px; border-radius: 50%; background: #3FEF50; vertical-align: 1px; }
.mail summary small { color: var(--muted); font-size: 12.5px; }
.mail p { margin: 10px 0; overflow-wrap: anywhere; }

/* FAQ */
.faq-hero { display: grid; grid-template-columns: minmax(0, 1fr) minmax(260px, 420px); align-items: end; gap: 20px; }
.faq-search { display: flex; align-items: center; gap: 10px; height: 48px; padding: 0 14px; border: 1px solid var(--line-2); border-radius: 14px; background: #170809; }
.faq-search:focus-within { border-color: var(--blue); }
.faq-search svg { flex: none; width: 18px; height: 18px; fill: none; stroke: var(--muted); stroke-width: 2; stroke-linecap: round; }
.faq-search input { height: 100%; padding: 0; border: 0; background: transparent; font-size: 15px; }
.faq-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 22px 0 6px; }
.faq-chips button { display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border: 1px solid var(--line); border-radius: 999px; background: var(--card); font-size: 13.5px; font-weight: 700; color: var(--muted); cursor: pointer; }
.faq-chips button span { min-width: 22px; padding: 1px 7px; border-radius: 999px; background: rgba(74, 222, 128, 0.14); font-size: 11.5px; color: #DCD2D3; text-align: center; }
.faq-chips button:hover { border-color: var(--line-2); color: var(--text); }
.faq-chips button.active { border-color: var(--blue); background: var(--blue); color: #fff; }
.faq-chips button.active span { background: rgba(34, 197, 94, 0.3); color: #fff; }
.faq-group { margin-top: 26px; }
.faq-cat { display: flex; align-items: center; gap: 10px; margin: 0 0 12px; font-size: 22px; }
.faq-cat span { padding: 1px 9px; border-radius: 999px; background: var(--card-2); font: 700 12px 'Inter', sans-serif; color: var(--muted); }
.faq-item { margin-bottom: 8px; border: 1px solid var(--line); border-radius: 14px; background: var(--card); transition: border-color 0.15s; }
.faq-item:hover { border-color: var(--line-2); }
.faq-item[open] { border-color: rgba(74, 222, 128, 0.5); background: linear-gradient(160deg, rgba(34, 197, 94, 0.1), var(--card) 60%); }
.faq-item summary { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 15px 18px; font-size: 15.5px; font-weight: 700; cursor: pointer; list-style: none; }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary i { flex: none; width: 10px; height: 10px; border-right: 2px solid var(--blue-2); border-bottom: 2px solid var(--blue-2); transform: rotate(45deg) translateY(-3px); transition: transform 0.15s; }
.faq-item[open] summary i { transform: rotate(-135deg) translate(-2px, -2px); }
.faq-answer { display: grid; gap: 12px; padding: 0 18px 16px; }
.faq-answer p { max-width: 78ch; color: #E0DBDB; font-size: 14.5px; line-height: 1.7; }
.faq-answer code, .faq-more code { padding: 1px 7px; border-radius: 6px; background: rgba(74, 222, 128, 0.14); font: 500 0.9em var(--mono); color: #E8E2E2; white-space: nowrap; }
.faq-answer a { color: var(--blue-2); }
.faq-link { justify-self: start; padding: 0; border: 0; background: none; font-size: 12.5px; font-weight: 700; color: var(--muted); cursor: pointer; }
.faq-link:hover { color: var(--blue-2); }
.faq-more { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; margin-top: 34px; }
.faq-more h3 { font-size: 22px; }
.faq-more p { margin-top: 4px; }
.faq-form { margin-bottom: 26px; }
.faq-form h3 { font-size: 22px; }
.faq-actions { flex-wrap: nowrap; justify-content: flex-end; gap: 6px; }
@media (max-width: 860px) {
    .faq-hero { grid-template-columns: minmax(0, 1fr); }
    .faq-actions { flex-wrap: wrap; }
}

/* ---------- Panel 2.0: prima pagină și paginile publice ---------- */
[hidden] { display: none !important; }
.kpi-ico svg, .fx-ico svg, .fx-members svg, .connect-pill svg, .crown svg, .btn svg, .login-art svg { fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.btn.big { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 13px 22px; border-radius: 14px; font-size: 15px; }
.btn.big svg { width: 17px; height: 17px; }
.btn.primary.big svg { fill: currentColor; stroke: none; }

/* Hero */
.home-hero { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 40px; padding: 56px 56px 50px; overflow: hidden; isolation: isolate; border: 1px solid rgba(34, 197, 94, 0.136); border-radius: 28px; background: radial-gradient(620px 380px at 86% 18%, rgba(74, 222, 128, 0.36), transparent 70%), radial-gradient(520px 320px at 8% 112%, rgba(34, 197, 94, 0.32), transparent 70%), linear-gradient(150deg, #1C541F, #103013 55%, #0C230D); box-shadow: 0 30px 60px rgba(12, 11, 11, 0.4); }
.home-hero::before { content: ''; position: absolute; inset: -50%; z-index: -1; background: conic-gradient(from 90deg at 62% 42%, transparent, rgba(74, 222, 128, 0.16), transparent 28%, rgba(34, 197, 94, 0.12), transparent 58%); animation: hero-drift 22s linear infinite; }
.home-hero::after { content: ''; position: absolute; right: -50px; bottom: -70px; z-index: -1; width: 440px; height: 440px; background: url('logo.png') center / contain no-repeat; opacity: 0.06; transform: rotate(-10deg); }
@keyframes hero-drift { to { transform: rotate(360deg); } }
.hh-main { min-width: 0; }
.hh-eyebrow { display: inline-flex; align-items: center; gap: 9px; padding: 6px 14px; border: 1px solid rgba(34, 197, 94, 0.204); border-radius: 999px; background: rgba(34, 197, 94, 0.102); font-size: 13px; font-weight: 600; color: #E7E1E1; }
.live { flex: none; width: 8px; height: 8px; border-radius: 50%; background: #3ADF8C; animation: live 2s infinite; }
@keyframes live { 0% { box-shadow: 0 0 0 0 rgba(58, 223, 140, 0.6); } 70%, 100% { box-shadow: 0 0 0 8px rgba(58, 223, 140, 0); } }
.home-hero h1 { margin: 18px 0 14px; font-size: clamp(44px, 6vw, 78px); line-height: 0.95; letter-spacing: 0.5px; color: #fff; text-wrap: balance; }
.home-hero h1 span { background: linear-gradient(100deg, #D9CECF, #4ADE80); -webkit-background-clip: text; background-clip: text; color: transparent; }
.home-hero p { max-width: 610px; color: #E0DBDB; font-size: 16.5px; line-height: 1.6; }
.home-hero .buttons { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 26px; }
.connect-pill { display: inline-flex; align-items: center; gap: 10px; max-width: 100%; margin-top: 16px; padding: 7px 12px 7px 7px; border: 1px dashed rgba(34, 197, 94, 0.3); border-radius: 12px; background: rgba(0, 0, 0, 0.22); color: #E7E1E1; cursor: pointer; }
.connect-pill span { flex: none; padding: 3px 8px; border-radius: 7px; background: rgba(34, 197, 94, 0.17); font: 700 11.5px var(--mono); }
.connect-pill code { min-width: 0; overflow: hidden; font: 500 13.5px var(--mono); text-overflow: ellipsis; white-space: nowrap; }
.connect-pill svg { flex: none; width: 16px; height: 16px; opacity: 0.7; }
.connect-pill:hover { border-color: rgba(34, 197, 94, 0.3); color: #fff; }
.hh-side { display: grid; justify-items: center; gap: 8px; }
.hh-side > small { font-size: 13px; color: #DCD2D3; }
.gauge { position: relative; width: 200px; height: 200px; }
.gauge svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.gauge circle { fill: none; stroke-width: 12; }
.g-track { stroke: rgba(255, 255, 255, 0.08); }
.g-fill { stroke: url(#gaugeGrad); stroke-linecap: round; }
.g-mid { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; }
.g-mid b { font: 700 60px var(--heading); line-height: 1; color: #fff; }
.g-mid small { font-size: 13px; color: #DCD2D3; }

/* Cifre */
.kpis { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 12px; margin-top: 16px; }
.kpi { display: flex; align-items: center; gap: 12px; min-width: 0; padding: 16px; border: 1px solid rgba(34, 197, 94, 0.119); border-radius: 20px; background: linear-gradient(160deg, rgba(34, 197, 94, 0.119), rgba(34, 197, 94, 0.034)); }
.kpi > div { min-width: 0; }
.kpi-ico { display: grid; place-items: center; flex: none; width: 44px; height: 44px; border-radius: 14px; background: rgba(34, 197, 94, 0.105); color: #E3DBDC; }
.kpi-ico svg { width: 22px; height: 22px; }
.kpi b { display: block; font: 700 26px var(--heading); line-height: 1.05; font-variant-numeric: tabular-nums; }
.kpi small { display: block; font-size: 12.5px; color: var(--muted); }

/* Titluri de secțiune */
.sec-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 8px 16px; margin: 46px 0 16px; }
.sec-head.first { margin-top: 8px; }
.sec-head small { font-size: 12px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: #CEC0C1; }
.sec-head h2 { margin-top: 4px; font-size: 32px; }
.more { font-size: 14px; font-weight: 700; color: #DCD2D3; text-decoration: none; white-space: nowrap; }
.more:hover { color: #fff; }
.page-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 22px; }
.page-head .faq-search { width: min(380px, 100%); }

/* Noutăți */
.news-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.news-card { display: grid; align-content: start; gap: 8px; min-width: 0; padding: 20px 22px; border: 1px solid rgba(34, 197, 94, 0.119); border-radius: 22px; background: linear-gradient(160deg, rgba(74, 222, 128, 0.16), rgba(34, 197, 94, 0.034) 62%); }
.news-date { justify-self: start; padding: 3px 10px; border-radius: 999px; background: rgba(34, 197, 94, 0.112); font-size: 12px; font-weight: 700; color: #E3DBDC; }
.news-card h3 { font-size: 23px; }
.news-card p { color: #D6D2D2; font-size: 14px; line-height: 1.55; overflow-wrap: anywhere; }

/* Facțiuni */
.fx-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(270px, 1fr)); gap: 12px; }
.fx-grid.big { grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); }
.fx-card { --c: #4ADE80; display: grid; grid-template-columns: 48px minmax(0, 1fr); gap: 4px 14px; min-width: 0; padding: 16px 18px; border: 1px solid rgba(34, 197, 94, 0.119); border-radius: 20px; background: linear-gradient(150deg, color-mix(in srgb, var(--c) 20%, transparent), rgba(34, 197, 94, 0.043) 62%); text-decoration: none; transition: transform 0.16s, border-color 0.16s; }
.fx-card:hover { transform: translateY(-3px); border-color: color-mix(in srgb, var(--c) 60%, transparent); }
.fx-card.big { padding: 20px; }
.fx-ico { display: grid; place-items: center; grid-row: span 2; width: 48px; height: 48px; border-radius: 15px; background: color-mix(in srgb, var(--c) 26%, rgba(0, 0, 0, 0.25)); color: color-mix(in srgb, var(--c) 65%, #fff); }
.fx-ico svg { width: 24px; height: 24px; }
.fx-main { min-width: 0; }
.fx-main b { display: block; font: 700 19px var(--heading); line-height: 1.15; }
.fx-main small { display: block; margin-top: 2px; font-size: 12.5px; color: var(--muted); }
.fx-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 8px; }
.fx-members { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 600; color: #E0DBDB; }
.fx-members svg { width: 15px; height: 15px; }
.fx-state { padding: 2px 9px; border-radius: 999px; background: rgba(66, 240, 86, 0.14); font-size: 11.5px; font-weight: 700; color: #CCBDC0; }
.fx-state.open { background: rgba(58, 223, 140, 0.14); color: #5FE7A4; }

/* Teritorii */
.terr { display: grid; gap: 16px; margin-top: 14px; padding: 20px 22px; }
.terr-bar { display: flex; gap: 3px; height: 14px; overflow: hidden; border-radius: 999px; }
.terr-bar i { min-width: 10px; }
.terr-legend { display: flex; flex-wrap: wrap; gap: 12px 26px; }
.lg-item { display: grid; grid-template-columns: 12px auto; align-items: center; column-gap: 9px; }
.lg-item span { grid-row: span 2; width: 12px; height: 12px; border-radius: 4px; }
.lg-item b { font-size: 14px; }
.lg-item small { font-size: 12px; color: var(--muted); }
.zone-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 10px; margin-top: 12px; }
.zone-tile { --c: #5A6488; display: flex; align-items: center; justify-content: space-between; gap: 10px; min-width: 0; padding: 13px 15px; border: 1px solid color-mix(in srgb, var(--c) 38%, transparent); border-radius: 16px; background: color-mix(in srgb, var(--c) 11%, rgba(34, 197, 94, 0.034)); }
.zone-tile.free { border-style: dashed; border-color: rgba(34, 197, 94, 0.221); background: rgba(34, 197, 94, 0.034); }
.zone-tile > div { min-width: 0; }
.zone-tile b { display: block; font-size: 14px; }
.zone-tile small { font-size: 12px; color: color-mix(in srgb, var(--c) 70%, #fff); }
.zone-tile.free small { color: var(--muted); }
.zone-tile > span { flex: none; font: 700 16px var(--heading); }
.zone-tile > span small { font: 500 11px 'Inter', sans-serif; color: var(--muted); }

/* Topul jucătorilor */
.top-wrap { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 18px; align-items: end; }
.podium { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: end; gap: 12px; }
.pod { display: grid; justify-items: center; gap: 6px; min-width: 0; text-align: center; }
.pod > b { max-width: 100%; overflow: hidden; font-size: 16px; text-overflow: ellipsis; white-space: nowrap; }
.pod > b a { color: inherit; }
.pod .name-tags, .tl-name .name-tags { display: none; }
.pod > small { font-size: 12.5px; color: var(--muted); }
.pod-block { display: grid; place-items: center; width: 100%; margin-top: 8px; border: 1px solid rgba(34, 197, 94, 0.136); border-bottom: 0; border-radius: 18px 18px 6px 6px; font: 700 46px var(--heading); color: rgba(255, 255, 255, 0.9); }
.p1 .pod-block { height: 150px; background: linear-gradient(180deg, rgba(205, 255, 96, 0.42), rgba(205, 255, 96, 0.06)); }
.p2 .pod-block { height: 112px; background: linear-gradient(180deg, rgba(34, 197, 94, 0.224), rgba(34, 197, 94, 0.035)); }
.p3 .pod-block { height: 86px; background: linear-gradient(180deg, rgba(155, 224, 104, 0.38), rgba(155, 224, 104, 0.06)); }
.crown { color: #D7FF77; }
.crown svg { width: 30px; height: 30px; }
.ball { --h: 225; display: grid; place-items: center; flex: none; width: 36px; height: 36px; border-radius: 12px; background: linear-gradient(145deg, hsl(var(--h) 85% 64%), hsl(var(--h) 72% 34%)); font: 700 17px var(--heading); color: #fff; text-transform: uppercase; }
.ball.lg { width: 70px; height: 70px; border-radius: 24px; font-size: 32px; box-shadow: 0 12px 26px rgba(12, 11, 11, 0.45); }
.p1 .ball.lg { width: 84px; height: 84px; border-radius: 28px; font-size: 40px; outline: 3px solid rgba(215, 255, 119, 0.75); outline-offset: 3px; }
.top-list { display: grid; gap: 2px; padding: 10px; }
.tl-row { display: grid; grid-template-columns: 28px 36px minmax(0, 1fr) minmax(90px, 170px); align-items: center; gap: 12px; padding: 8px 10px; border-radius: 12px; }
.tl-row:hover { background: rgba(34, 197, 94, 0.068); }
.tl-rank { font: 700 18px var(--heading); color: var(--muted); text-align: center; }
.tl-name { min-width: 0; overflow: hidden; font-size: 14.5px; font-weight: 700; white-space: nowrap; text-overflow: ellipsis; }
.tl-name a { color: inherit; }
.tl-name small { display: block; font-size: 12px; font-weight: 500; color: var(--muted); }
.tl-hours i { display: block; height: 6px; overflow: hidden; border-radius: 4px; background: rgba(34, 197, 94, 0.136); }
.tl-hours em { display: block; height: 100%; border-radius: 4px; background: linear-gradient(90deg, #4ADE80, #D9CECF); }
.tl-hours small { display: block; margin-top: 4px; font-size: 12px; color: var(--muted); text-align: right; }

/* Banda de jos */
.cta-band { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 20px; margin-top: 50px; padding: 30px 34px; border: 1px solid rgba(34, 197, 94, 0.136); border-radius: 26px; background: radial-gradient(520px 260px at 92% 0, rgba(74, 222, 128, 0.38), transparent 70%), linear-gradient(140deg, #1C541E, #133916); }
.cta-band h2 { font-size: 30px; }
.cta-band p { margin-top: 4px; color: #E0DBDB; }

/* Jucători online */
.pl-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 10px; }
.pl-card { display: flex; align-items: center; gap: 12px; min-width: 0; padding: 12px 14px; border: 1px solid rgba(34, 197, 94, 0.119); border-radius: 16px; background: rgba(34, 197, 94, 0.068); transition: border-color 0.15s; }
.pl-card:hover { border-color: rgba(34, 197, 94, 0.255); }
.pl-main { flex: 1; min-width: 0; }
.pl-main b { display: block; overflow: hidden; font-size: 14.5px; text-overflow: ellipsis; white-space: nowrap; }
.pl-main b a { color: inherit; }
.pl-main small { font-size: 12px; color: var(--muted); }
.ping { flex: none; padding: 3px 9px; border-radius: 999px; font: 700 12px var(--mono); }
.ping.good { background: rgba(58, 223, 140, 0.14); color: #5FE7A4; }
.ping.ok { background: rgba(197, 255, 61, 0.14); color: #D7FF77; }
.ping.bad { background: rgba(66, 240, 86, 0.14); color: #CCBDC0; }

/* Clasamente */
.board-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 14px; align-items: start; }
.board { padding: 20px; }
.board h2 { margin-bottom: 12px; font-size: 24px; }
.board-list { display: grid; gap: 4px; margin: 0; padding: 0; list-style: none; }
.board-list li { display: grid; grid-template-columns: 28px 36px minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 12px; }
.board-list li b { overflow: hidden; font-size: 14.5px; text-overflow: ellipsis; white-space: nowrap; }
.b-rank { font: 700 18px var(--heading); color: var(--muted); text-align: center; }
.b-val { font: 700 15px var(--heading); color: #E7E1E1; white-space: nowrap; }
.board-list li.gold { background: rgba(205, 255, 96, 0.1); }
.board-list li.silver { background: rgba(34, 197, 94, 0.049); }
.board-list li.bronze { background: rgba(155, 224, 104, 0.09); }
.board-list li.gold .b-rank { color: #D7FF77; }
.board-list li.silver .b-rank { color: #E8E6E6; }
.board-list li.bronze .b-rank { color: #B4ED88; }

/* Login */
.login-wrap { display: grid; grid-template-columns: minmax(0, 1fr) minmax(320px, 440px); max-width: 1000px; margin: 28px auto 0; overflow: hidden; border: 1px solid rgba(34, 197, 94, 0.136); border-radius: 28px; background: rgba(34, 197, 94, 0.051); box-shadow: 0 30px 60px rgba(12, 11, 11, 0.4); }
.login-art { display: grid; align-content: center; gap: 14px; padding: 46px; background: radial-gradient(420px 300px at 20% 0, rgba(74, 222, 128, 0.42), transparent 70%), linear-gradient(150deg, #1C541E, #113214); }
.login-art img { width: 62px; height: 62px; object-fit: contain; }
.login-art h1 { font-size: 42px; }
.login-art p { color: #E0DBDB; }
.login-art ul { display: grid; gap: 10px; margin: 8px 0 0; padding: 0; list-style: none; }
.login-art li { display: flex; align-items: center; gap: 10px; color: #E8E4E4; font-size: 14.5px; }
.login-art li svg { flex: none; width: 18px; height: 18px; color: #7DF0B0; }
.login-wrap .card.login { max-width: none; margin: 0; padding: 40px; border: 0; border-radius: 0; background: transparent; box-shadow: none; }
.seg { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; margin-bottom: 22px; padding: 4px; border-radius: 14px; background: rgba(34, 197, 94, 0.102); }
.seg button { padding: 10px; border: 0; border-radius: 10px; background: none; font-size: 14px; font-weight: 700; color: var(--muted); cursor: pointer; }
.seg button.active { background: #fff; color: #1F1C1C; }

@media (max-width: 1280px) {
    .kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .top-wrap { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 860px) {
    .top { background: #0E2C11; }
    .home-hero { grid-template-columns: minmax(0, 1fr); gap: 26px; padding: 30px 22px; border-radius: 22px; }
    .home-hero::after { width: 260px; height: 260px; }
    .hh-side { justify-self: start; grid-auto-flow: column; align-items: center; gap: 16px; }
    .gauge { width: 140px; height: 140px; }
    .g-mid b { font-size: 42px; }
    .kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .kpi b { font-size: 22px; }
    .news-grid { grid-template-columns: minmax(0, 1fr); }
    .sec-head h2 { font-size: 26px; }
    .fx-grid, .fx-grid.big, .board-grid, .pl-grid { grid-template-columns: minmax(0, 1fr); }
    .podium { gap: 8px; }
    .ball.lg { width: 54px; height: 54px; border-radius: 18px; font-size: 26px; }
    .p1 .ball.lg { width: 64px; height: 64px; border-radius: 22px; font-size: 30px; }
    .pod-block { font-size: 34px; }
    .p1 .pod-block { height: 110px; }
    .p2 .pod-block { height: 82px; }
    .p3 .pod-block { height: 64px; }
    .tl-row { grid-template-columns: 24px 32px minmax(0, 1fr) 76px; gap: 10px; }
    .cta-band { padding: 24px 22px; }
    .login-wrap { grid-template-columns: minmax(0, 1fr); margin-top: 8px; }
    .login-art { padding: 28px 24px; }
    .login-art h1 { font-size: 32px; }
    .login-wrap .card.login { padding: 24px; }
}
@media (prefers-reduced-motion: reduce) {
    .home-hero::before, .live { animation: none; }
    .fx-card:hover { transform: none; }
}

/* ---------- Panel 2.0: contul meu și staff ---------- */
.acc-kpis { grid-template-columns: repeat(5, minmax(0, 1fr)); margin-bottom: 22px; }
.staff-kpis { grid-template-columns: repeat(4, minmax(0, 1fr)); margin: 0 0 6px; }
.pf-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 10px; }
.pf-item { display: grid; gap: 4px; min-width: 0; padding: 14px 16px; border: 1px solid rgba(34, 197, 94, 0.119); border-radius: 16px; background: rgba(34, 197, 94, 0.068); }
.pf-item > small { font-size: 12px; color: var(--muted); }
.pf-item b { font-size: 15.5px; overflow-wrap: anywhere; }
.pf-item b small { color: var(--muted); font-weight: 500; }
.pf-item b a { color: #DCD2D3; }
.pf-item.good b { color: #5FE7A4; }
.pf-item.bad b { color: #CCBDC0; }
.vc-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(270px, 1fr)); gap: 12px; }
.vc-card { overflow: hidden; border: 1px solid rgba(34, 197, 94, 0.119); border-radius: 20px; background: rgba(34, 197, 94, 0.068); }
.vc-photo { position: relative; display: grid; place-items: center; height: 140px; background: radial-gradient(circle at 50% 70%, rgba(74, 222, 128, 0.35), transparent 70%), linear-gradient(160deg, #1C541F, #0F2C11); color: rgba(255, 255, 255, 0.25); }
.vc-photo span svg { width: 54px; height: 54px; fill: none; stroke: currentColor; stroke-width: 1.4; }
.vc-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; padding: 8px 20px; }
.vc-state { position: absolute; top: 10px; right: 10px; padding: 3px 10px; border-radius: 999px; background: rgba(0, 0, 0, 0.5); font-size: 11.5px; font-style: normal; font-weight: 700; color: #E7E1E1; }
.vc-state.out { color: #D7FF77; }
.vc-state.impound { color: #CCBDC0; }
.vc-body { display: grid; gap: 8px; padding: 14px 16px 16px; }
.vc-body > b { overflow: hidden; font: 700 19px var(--heading); text-overflow: ellipsis; white-space: nowrap; }
.vc-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 12.5px; color: var(--muted); }
.plate { padding: 2px 8px; border-radius: 6px; background: #F5F3F3; font: 700 12px var(--mono); color: #1F1C1C; letter-spacing: 1px; }
.vc-bar { display: grid; grid-template-columns: 74px minmax(0, 1fr) 40px; align-items: center; gap: 8px; font-size: 12px; color: var(--muted); }
.vc-bar i { height: 6px; overflow: hidden; border-radius: 4px; background: rgba(34, 197, 94, 0.136); }
.vc-bar em { display: block; height: 100%; border-radius: 4px; background: linear-gradient(90deg, #4ADE80, #D9CECF); }
.vc-bar em.low { background: #42F05C; }
.vc-bar b { text-align: right; color: var(--text); font-weight: 600; }
.pr-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(270px, 1fr)); gap: 12px; }
.pr-card { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 14px; padding: 16px; border: 1px solid rgba(34, 197, 94, 0.119); border-radius: 18px; background: rgba(34, 197, 94, 0.068); }
.pr-ico { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 14px; background: rgba(34, 197, 94, 0.105); color: #E3DBDC; }
.pr-ico svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.pr-card > div > b { display: block; margin-bottom: 6px; font: 700 18px var(--heading); }
.pr-row { display: flex; justify-content: space-between; gap: 10px; padding: 4px 0; border-top: 1px solid rgba(34, 197, 94, 0.085); font-size: 13px; }
.pr-row span { color: var(--muted); }
.pr-row b { font-weight: 600; }
.tx-list { display: grid; gap: 2px; padding: 8px; }
.tx-row { display: grid; grid-template-columns: 38px minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 10px; border-radius: 12px; }
.tx-row:hover { background: rgba(34, 197, 94, 0.068); }
.tx-ico { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 12px; font: 700 20px var(--heading); }
.tx-ico.in, b.in { color: #5FE7A4; }
.tx-ico.out, b.out { color: #CCBDC0; }
.tx-ico.in { background: rgba(58, 223, 140, 0.13); }
.tx-ico.out { background: rgba(66, 240, 86, 0.13); }
.tx-main { min-width: 0; }
.tx-main b { display: block; font-size: 14.5px; }
.tx-main small { display: block; overflow: hidden; font-size: 12.5px; color: var(--muted); text-overflow: ellipsis; white-space: nowrap; }
.tx-sum { text-align: right; }
.tx-sum b { display: block; font: 700 17px var(--heading); white-space: nowrap; }
.tx-sum small { font-size: 11.5px; color: var(--muted); white-space: nowrap; }
.team-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 10px; }
.team-card { display: grid; grid-template-columns: 36px minmax(0, 1fr); gap: 8px 12px; align-items: center; padding: 12px 14px; border: 1px solid rgba(34, 197, 94, 0.119); border-radius: 16px; background: rgba(34, 197, 94, 0.068); }
.team-card.on { border-color: rgba(58, 223, 140, 0.3); }
.team-meta { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.team-meta small { font-size: 12px; color: var(--muted); }
.ping.off { background: rgba(34, 197, 94, 0.119); color: var(--muted); }
@media (max-width: 1280px) { .acc-kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 860px) {
    .acc-kpis, .staff-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .vc-grid, .pr-grid, .team-grid { grid-template-columns: minmax(0, 1fr); }
    .tx-row { grid-template-columns: 34px minmax(0, 1fr); }
    .tx-sum { grid-column: 2; text-align: left; }
}

/* ---------- Telefon: antet pe un rând, meniu peste pagină, tab-uri care se derulează ---------- */
@media (max-width: 860px) {
    .top, .side-small .top { position: sticky; top: 0; z-index: 25; flex-wrap: nowrap; height: 60px; padding: 0 12px 0 16px; background: #1C0A0B; backdrop-filter: none; }
    .with-logs { grid-template-columns: minmax(0, 1fr); }
    .with-logs > *, .content > * { min-width: 0; }
    .top .brand { min-height: 0; gap: 10px; }
    .top .brand img { width: 32px; height: 32px; }
    .top .brand small { font-size: 9.5px; letter-spacing: 1.6px; }
    .top .brand b { font-size: 19px; line-height: 1; }
    .side-small .brand span { display: block; }
    .menu-btn { display: grid; place-items: center; width: 42px; height: 42px; margin-left: auto; border: 1px solid rgba(34, 197, 94, 0.136); border-radius: 12px; background: rgba(34, 197, 94, 0.085); color: var(--text); font-size: 19px; }
    .tabs, .side-small .tabs { position: fixed; top: 60px; left: 0; right: 0; bottom: 0; display: none; flex-direction: column; gap: 2px; margin: 0; padding: 10px 12px 30px; overflow-y: auto; background: #121111; border-top: 1px solid var(--line); }
    .tabs.open { display: flex; }
    .side-small .tabs a span, .side-small .nav-title { display: inline; }
    .side-small .nav-title { display: block; }
    .side-small .tabs a { justify-content: flex-start; padding: 13px 12px; }
    .tabs a { padding: 13px 12px; font-size: 15.5px; }
    .tabs a.nav-user { margin-top: 12px; }
    body:has(.tabs.open) { overflow: hidden; }

    .topbar { position: static; flex-wrap: nowrap; justify-content: flex-end; gap: 8px; min-height: 0; padding: 10px 12px; }
    #sideToggle { display: none; }
    .tb-search { order: 0; flex: 1; width: auto; height: 42px; margin: 0; padding-left: 12px; }
    .tb-search button { width: 40px; }
    .tb-online { order: 1; height: 42px; padding: 0 10px; font-size: 12.5px; }
    .tb-btn + .tb-online { margin-left: 0; }
    .tb-user { order: 2; }
    .tb-user summary { height: 42px; padding: 0 3px; border-radius: 12px; }
    .tb-user summary span { width: 34px; height: 34px; }
    .tb-results { position: fixed; left: 12px; right: 12px; top: 118px; max-height: 60vh; }

    .subtabs { flex-wrap: nowrap; margin: 18px -16px 16px; padding: 2px 16px 6px; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
    .subtabs::-webkit-scrollbar { display: none; }
    .subtabs button { flex: none; white-space: nowrap; }

    .profile { flex-direction: column; align-items: flex-start; gap: 16px; padding: 20px; }
    .profile-avatar { width: 72px; height: 72px; border-radius: 22px; font-size: 34px; }
    .profile-main h1 { font-size: 30px; }
    .profile .row { width: 100%; }
    .profile .row .btn { flex: 1; }

    .kpi { gap: 10px; padding: 12px; border-radius: 16px; }
    .kpi-ico { width: 36px; height: 36px; border-radius: 11px; }
    .kpi-ico svg { width: 18px; height: 18px; }
    .kpi b { font-size: 19px; overflow-wrap: anywhere; }
    .kpi small { font-size: 11.5px; }
    .page-title { font-size: 30px; }
}
@media (max-width: 380px) {
    .top .brand small { display: none; }
    .tb-online { padding: 0 8px; font-size: 12px; }
}

/* ---------- Panel RPG: negru cu tentă de roșu (fără gri), roșu închis pe secțiunile mari ---------- */
:root { --blue: #48E54D; --blue-2: #6BF070; --glow: rgba(34, 197, 94, 0.3); --bg: #0A0607; --card: #150A0C; --card-2: #1F0F12; --line: rgba(34, 197, 94, 0.14); --line-2: rgba(34, 197, 94, 0.26); --text: #F4ECED; --muted: #9AB39D; }
body { background: radial-gradient(900px 520px at 85% -12%, rgba(34, 197, 94, 0.16), transparent 60%), radial-gradient(700px 480px at 4% 108%, rgba(34, 197, 94, 0.07), transparent 60%), #0C0406 fixed; color: var(--text); }
.top, .side-small .top { background: #0F0507; }
.topbar { background: rgba(10, 6, 7, 0.86); }
.tb-btn, .tb-search, .tb-online, .tb-user summary { border-color: rgba(34, 197, 94, 0.14); background: rgba(34, 197, 94, 0.06); }
.home-hero { background: radial-gradient(600px 360px at 88% 12%, rgba(34, 197, 94, 0.32), transparent 70%), radial-gradient(480px 300px at 6% 110%, rgba(34, 197, 94, 0.15), transparent 70%), linear-gradient(150deg, #123A17, #1C0B0E 55%, #140608); box-shadow: 0 24px 56px rgba(0, 0, 0, 0.45); }
.home-hero::before { opacity: 0.6; }
.news-card { background: linear-gradient(160deg, rgba(34, 197, 94, 0.12), rgba(34, 197, 94, 0.03) 62%); }
.cta-band { background: radial-gradient(500px 250px at 92% 0, rgba(34, 197, 94, 0.28), transparent 70%), linear-gradient(140deg, #123A17, #1A0A0D); }
.login-art { background: radial-gradient(420px 300px at 20% 0, rgba(34, 197, 94, 0.32), transparent 70%), linear-gradient(150deg, #133D18, #1A0A0D); }
.vc-photo { background: radial-gradient(circle at 50% 70%, rgba(34, 197, 94, 0.24), transparent 70%), linear-gradient(160deg, #0F2E13, #140609); }
.profile::after { opacity: 0.6; }
.kpi, .card, .fx-card, .pf-item, .vc-card, .pr-card, .zone, .tl-row, .team-card, .pl-card { background: linear-gradient(160deg, rgba(34, 197, 94, 0.075), rgba(34, 197, 94, 0.02)); border-color: rgba(34, 197, 94, 0.13); }
.kpi:hover, .fx-card:hover, .vc-card:hover, .pr-card:hover { border-color: rgba(34, 197, 94, 0.4); }
.kpi-ico, .fx-ico, .pr-ico { background: rgba(34, 197, 94, 0.14); }
.subtabs button { border-color: rgba(34, 197, 94, 0.14); background: rgba(34, 197, 94, 0.06); }
.tabs a:hover { background: rgba(34, 197, 94, 0.09); }

/* Login: trei taburi (Login, Cod, Register) si cardurile din cautare ca linkuri */
.seg.three { grid-template-columns: repeat(3, 1fr); }
a.pl-card { color: inherit; text-decoration: none; transition: border-color 0.15s, transform 0.12s; }
a.pl-card:hover { border-color: rgba(34, 197, 94, 0.45); transform: translateY(-2px); }
.topbar .btn.small + .btn.small { margin-left: -4px; }

/* Etichetele masinilor, ca pe SA-MP: [S: 2/3] [TURBO] [NEON] [V+] */
.vc-tags { display: flex; flex-wrap: wrap; gap: 5px; }
.vc-tag { padding: 2px 7px; border: 1px solid; border-radius: 7px; font: 800 11.5px var(--mono); letter-spacing: 0.4px; }
.vc-tag.stage { border-color: rgba(122, 162, 255, 0.45); background: rgba(122, 162, 255, 0.12); color: #9DB8FF; }
.vc-tag.perf { border-color: rgba(34, 197, 94, 0.45); background: rgba(34, 197, 94, 0.12); color: #8AFF90; }
.vc-tag.look { border-color: rgba(193, 151, 255, 0.45); background: rgba(193, 151, 255, 0.12); color: #CFA8FF; }
.vc-tag.neon { border-color: rgba(170, 255, 64, 0.5); background: rgba(170, 255, 64, 0.12); color: #B6FF5C; }
.vc-tag.vip { border-color: rgba(193, 242, 78, 0.5); background: rgba(193, 242, 78, 0.12); color: #C1F24E; }
.vc-tag.vipplus { border-color: rgba(140, 220, 90, 0.55); background: rgba(140, 220, 90, 0.14); color: #A8E86A; }

/* lista aplicațiilor (facțiuni, staff, lideri): rânduri care se deschid în fișa completă */
.app-list { overflow: hidden; border: 1px solid var(--line); border-radius: 16px; background: var(--card); }
.app-list-head, .app-row { display: grid; grid-template-columns: minmax(0, 2.2fr) 70px 70px 150px 120px 24px; gap: 14px; align-items: center; padding: 12px 18px; }
.app-list-head { border-bottom: 1px solid var(--line); font-size: 11.5px; font-weight: 700; letter-spacing: 0.8px; text-transform: uppercase; color: var(--muted); }
.app-item + .app-item { border-top: 1px solid var(--line); }
.app-row { width: 100%; border: 0; background: none; text-align: left; cursor: pointer; transition: background 0.15s; }
.app-row:hover, .app-row.open { background: rgba(34, 197, 94, 0.06); }
.app-row.new .app-who b::before { content: ''; display: inline-block; width: 7px; height: 7px; margin-right: 8px; border-radius: 50%; background: var(--yellow); vertical-align: 2px; }
.app-who { min-width: 0; }
.app-who b { display: block; overflow: hidden; font-size: 14.5px; text-overflow: ellipsis; white-space: nowrap; }
.app-who small { font-size: 12px; color: var(--muted); }
.app-cell { font-size: 13.5px; }
.app-chev { font-size: 20px; color: var(--muted); transition: transform 0.15s; }
.app-row.open .app-chev { transform: rotate(90deg); color: var(--blue-2); }
.app-detail { padding: 6px 14px 16px; background: rgba(0, 0, 0, 0.18); }
.app-detail .card { margin: 0; }
.app-list-foot { padding: 10px 18px; border-top: 1px solid var(--line); font-size: 12.5px; }
@media (max-width: 860px) {
    .app-list-head { display: none; }
    .app-row { display: flex; flex-wrap: wrap; gap: 4px 12px; padding: 12px 14px; }
    .app-who { flex: 1 1 55%; }
    .app-cell { order: 5; font-size: 12px; color: var(--muted); }
    .app-cell::before { content: attr(data-l) ': '; }
    .app-chev { margin-left: 4px; }
}
.app-list.mine .app-list-head, .app-list.mine .app-row { grid-template-columns: minmax(0, 2fr) 150px 190px 120px 24px; }
.my-app .app-answers { display: grid; gap: 10px; }

/* aplicație: chenarul cu statisticile candidatului */
.app-view:has(.app-stats) { grid-template-columns: 270px minmax(0, 1fr) 290px; }
.app-stats { display: flex; flex-direction: column; gap: 12px; min-width: 0; padding: 16px; border: 1px solid var(--line-2); border-radius: 14px; background: rgba(11, 10, 10, 0.45); }
.app-stats h4 { font: 700 15px var(--heading); letter-spacing: 1px; text-transform: uppercase; color: var(--blue-2); }
.as-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.as-tile { padding: 9px 8px; border: 1px solid var(--line); border-radius: 10px; background: var(--card); text-align: center; }
.as-tile b { display: block; font: 700 20px var(--heading); }
.as-tile span { font-size: 11px; color: var(--muted); }
.as-tile.warn { border-color: rgba(197, 255, 61, 0.35); }
.as-tile.warn b { color: var(--yellow); }
.as-lines > div { display: flex; justify-content: space-between; gap: 10px; padding: 7px 0; border-bottom: 1px solid var(--line); font-size: 13px; }
.as-lines > div:last-child { border-bottom: 0; }
.as-lines span { color: var(--muted); }
.as-lines b { font-weight: 600; text-align: right; overflow-wrap: anywhere; }
.as-pun { display: flex; flex-direction: column; gap: 8px; margin: 0; padding: 0; list-style: none; }
.as-pun li { padding: 9px 11px; border-left: 3px solid var(--red); border-radius: 8px; background: var(--card); font-size: 13px; }
.as-pun li b { text-transform: capitalize; }
.as-pun li p { margin: 2px 0; }
.as-pun small { font-size: 11.5px; color: var(--muted); }
.as-empty { font-size: 13px; }
@media (max-width: 1280px) { .app-view:has(.app-stats) { grid-template-columns: 270px minmax(0, 1fr); } .app-stats { grid-column: 1 / -1; } }
@media (max-width: 1050px) { .app-view:has(.app-stats) { grid-template-columns: 1fr; } }

/* jucătorii pe rânduri: căutare, staff (echipă, online, căutare) */
.ball.img { position: relative; overflow: hidden; }
.ball.img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ball.md { width: 52px; height: 52px; border-radius: 16px; font-size: 22px; }
.ball.sm { width: 32px; height: 32px; border-radius: 10px; font-size: 14px; }
.pl-rows { display: flex; flex-direction: column; gap: 8px; }
.pl-row { display: grid; grid-template-columns: 52px minmax(0, 1fr) auto; align-items: center; gap: 16px; padding: 12px 16px; border: 1px solid var(--line); border-radius: 16px; background: var(--card); color: inherit; text-decoration: none; transition: border-color 0.15s, background 0.15s, transform 0.15s; }
a.pl-row:hover { border-color: var(--line-2); background: rgba(34, 197, 94, 0.06); transform: translateX(2px); }
.pr-main { min-width: 0; }
.pr-main > b { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; font-size: 15.5px; }
.pr-main > b .name-tags { margin-left: 4px; }
.pr-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 7px; }
.pr-chip { display: inline-flex; align-items: baseline; gap: 5px; padding: 3px 9px; border-radius: 8px; background: rgba(255, 255, 255, 0.04); font-size: 12.5px; font-weight: 600; }
.pr-chip small { font-size: 11px; font-weight: 500; color: var(--muted); }
.pr-side { text-align: right; white-space: nowrap; }
.app-who { display: flex; align-items: center; gap: 10px; }
.app-who > span { min-width: 0; }
.fx-apps-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; margin: 16px 0 6px; padding: 14px 18px; border: 1px solid var(--line-2); border-radius: 16px; background: var(--card); }
.fx-apps-bar b { display: block; font-size: 15px; }
.fx-apps-bar small { font-size: 12.5px; color: var(--muted); }
@media (max-width: 860px) {
    .pl-row { grid-template-columns: 44px minmax(0, 1fr); gap: 12px; padding: 12px; }
    .pl-row .ball.md { width: 44px; height: 44px; border-radius: 14px; }
    .pr-side { grid-column: 2; text-align: left; }
}

/* fără „...” nicăieri: numele lungi trec pe rândul următor */
.nav-user b, .connect-pill code, .pod > b, .tl-name, .pl-main b, .board-list li b, .vc-body > b, .tx-main small, .app-who b {
    overflow: visible; text-overflow: clip; white-space: normal; overflow-wrap: anywhere;
}
.pl-main b { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; }

/* secțiunea Applications */
.cat-nav { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 18px; }
.cat-nav a { display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border: 1px solid var(--line); border-radius: 999px; background: var(--card); font-size: 13.5px; font-weight: 700; color: var(--muted); text-decoration: none; }
.cat-nav a:hover { color: var(--text); border-color: var(--line-2); }
.cat-nav a.on { background: var(--text); border-color: var(--text); color: #120708; }
.cat-nav a i { width: 9px; height: 9px; border-radius: 50%; }
.cat-nav a span { min-width: 20px; padding: 0 6px; border-radius: 999px; background: var(--blue); font-size: 11.5px; line-height: 18px; text-align: center; color: #fff; }
.cat-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; margin-top: 16px; }
.cat-card { display: flex; flex-direction: column; gap: 14px; padding: 16px 18px; border: 1px solid var(--line); border-radius: 16px; background: var(--card); color: inherit; text-decoration: none; transition: border-color 0.15s, transform 0.15s; }
.cat-card:hover { border-color: var(--line-2); transform: translateY(-2px); }
.cat-card > .row b { font-size: 15px; }
.cat-nums { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.cat-nums span { font-size: 11.5px; color: var(--muted); }
.cat-nums b { display: block; font: 700 22px var(--heading); color: var(--text); }
.as-banner { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 10px; padding: 11px 16px; border: 1px solid rgba(66, 240, 86, 0.5); border-radius: 12px;
    background: linear-gradient(180deg, rgba(30, 160, 45, 0.75), rgba(20, 110, 30, 0.75)); font-size: 14px; font-weight: 700; color: #D9F6DC; }
.as-banner.open { border-color: rgba(43, 217, 124, 0.45); background: linear-gradient(180deg, rgba(25, 120, 70, 0.55), rgba(15, 80, 45, 0.55)); color: #D3F7E3; }
.as-banner svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 2; }
.as-banner .btn { margin-left: 6px; height: 30px; }
.as-card { margin-top: 16px; padding: 0 0 18px; border: 1px solid var(--line); border-radius: 18px; background: var(--card); overflow: hidden; }
.as-card > h2 { padding: 18px 22px; border-bottom: 1px solid var(--line); font-size: 22px; }
.as-card > h3 { margin: 22px 22px 8px; font-size: 19px; }
.as-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; padding: 20px 22px 4px; }
.as-stats div { padding: 16px; border: 1px solid var(--line-2); border-radius: 14px; background: rgba(11, 10, 10, 0.45); text-align: center; }
.as-stats b { display: block; font: 700 38px var(--heading); line-height: 1.1; }
.as-stats span { font-size: 14px; font-weight: 600; }
.as-table { margin: 0 22px; }
.as-table td, .as-table th { vertical-align: middle; }
.as-user { display: inline-flex; align-items: center; gap: 10px; font-weight: 700; color: var(--blue-2); text-decoration: none; }
.as-user:hover span { text-decoration: underline; }
.as-none { padding: 16px !important; text-align: center; }
@media (max-width: 860px) {
    .as-stats { grid-template-columns: 1fr; }
    .as-stats b { font-size: 30px; }
    .as-table { margin: 0 12px; overflow-x: auto; }
}
.as-table table { width: 100%; table-layout: fixed; }
.as-table th:nth-child(1) { width: 90px; } .as-table th:nth-child(3) { width: 130px; } .as-table th:nth-child(4) { width: 130px; }
.as-table th:nth-child(5) { width: 170px; } .as-table th:nth-child(6) { width: 150px; } .as-table th:nth-child(7) { width: 100px; }
@media (max-width: 860px) { .as-table table { min-width: 780px; } }
.subtabs.as-tabs a { padding: 8px 15px; border: 1px solid var(--line); border-radius: 10px; background: var(--card); font-size: 14px; font-weight: 700; color: var(--muted); text-decoration: none; }
.subtabs.as-tabs a.active { border-color: var(--blue); background: rgba(34, 197, 94, 0.18); color: #fff; }
/* editorul de întrebări, ca formularul jucătorului */
.qe-hint { margin: 16px 22px 6px; font-size: 13.5px; }
.qe-list { display: flex; flex-direction: column; gap: 14px; padding: 12px 22px; }
.qe-item { padding: 14px; border: 1px solid var(--line); border-radius: 14px; background: rgba(11, 10, 10, 0.35); }
.qe-top { display: grid; grid-template-columns: 30px minmax(0, 1fr) auto; gap: 10px; align-items: start; }
.qe-num { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 9px; background: rgba(34, 197, 94, 0.16); font-weight: 800; color: var(--blue-2); }
.qe-q { width: 100%; min-height: 30px; padding: 5px 8px; border: 1px dashed transparent; border-radius: 8px; background: transparent; font-size: 15px; font-weight: 700; line-height: 1.35; resize: none; overflow: hidden; color: var(--text); }
.qe-q:hover { border-color: var(--line-2); }
.qe-q:focus { border-color: var(--blue); background: rgba(0, 0, 0, 0.25); outline: none; }
.qe-tools { display: flex; gap: 4px; }
.qe-tools .btn { width: 32px; padding: 0; justify-content: center; }
.qe-answer { margin: 10px 0 0 40px; min-height: 70px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; background: rgba(0, 0, 0, 0.3); font-size: 13px; color: var(--muted); font-style: italic; }
.qe-foot { padding: 6px 22px 0; flex-wrap: wrap; gap: 10px; }
@media (max-width: 860px) { .qe-top { grid-template-columns: 26px minmax(0, 1fr); } .qe-tools { grid-column: 2; } .qe-answer { margin-left: 0; } }
.cat-nav.sub { margin-top: -8px; }
.cat-nav.sub a { padding: 6px 12px; font-size: 12.5px; }
.as-sec { margin-top: 26px; }
.cat-dot { display: inline-block; width: 9px; height: 9px; margin-right: 8px; border-radius: 50%; vertical-align: 1px; }
.acc-kpis.staff-acc-kpis { grid-template-columns: repeat(6, minmax(0, 1fr)); }
@media (max-width: 1280px) { .acc-kpis.staff-acc-kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 860px) { .acc-kpis.staff-acc-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* switch account (staff) */
.tb-user > div { min-width: 220px; }
.tb-acc-title { margin: 8px 11px 2px; font-size: 10.5px !important; font-weight: 800 !important; letter-spacing: 1px; text-transform: uppercase; color: var(--muted); }
.tb-user > div .tb-acc { display: flex; flex-direction: column; gap: 1px; }
.tb-user > div .tb-acc b { font-size: 13.5px; }
.tb-user > div .tb-acc.on { background: rgba(34, 197, 94, 0.14); cursor: default; }
.tb-user > div .tb-acc:not(.on):hover { background: rgba(255, 255, 255, 0.06); }
.acc-add { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 18px; }
.fp-tag { padding: 1px 8px; border-radius: 999px; background: rgba(197, 255, 61, 0.15); color: var(--yellow); font-size: 13px; }

/* tickete */
.tk-cats { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 10px; }
.tk-cat { position: relative; cursor: pointer; }
.tk-cat input { position: absolute; opacity: 0; }
.tk-cat span { display: block; height: 100%; padding: 12px 14px; border: 1px solid var(--line); border-radius: 14px; background: var(--card); }
.tk-cat b { display: block; font-size: 14.5px; color: var(--text); }
.tk-cat small { font-size: 12.5px; color: var(--muted); }
.tk-cat input:checked + span { border-color: var(--blue); background: rgba(34, 197, 94, 0.12); box-shadow: 0 0 0 1px var(--blue) inset; }
.tk-form textarea { min-height: 160px; }
.tk-thread { display: flex; flex-direction: column; gap: 12px; }
.tk-msg { display: grid; grid-template-columns: 32px minmax(0, 1fr); gap: 12px; max-width: 860px; padding: 14px 16px; border: 1px solid var(--line); border-radius: 16px; background: var(--card); }
.tk-msg.staff { border-color: rgba(34, 197, 94, 0.45); background: linear-gradient(150deg, rgba(34, 197, 94, 0.12), var(--card)); }
.tk-msg.me { margin-left: auto; }
.tk-head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 4px; }
.tk-head small { color: var(--muted); font-size: 12px; }
.tk-msg p { white-space: pre-wrap; overflow-wrap: anywhere; line-height: 1.5; }
.tk-reply { display: flex; flex-direction: column; gap: 10px; max-width: 860px; margin-top: 16px; }
.tk-reply textarea { min-height: 110px; }
.tk-reply .btn { align-self: flex-start; }
.tk-table th:nth-child(3) { width: auto; } .tk-table th:nth-child(2) { width: 200px; } .tk-table th:nth-child(5) { width: 90px; }
.tk-table th:nth-child(4) { width: 160px; }

.tk-fields { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; }
.tk-fields:empty { display: none; }
.tk-player { position: relative; }
.tk-picks { display: grid; gap: 4px; margin-top: 6px; }
.tk-pick { display: flex; align-items: center; gap: 10px; padding: 7px 10px; border: 1px solid var(--line); border-radius: 10px; background: var(--card); text-align: left; cursor: pointer; }
.tk-pick:hover { border-color: var(--line-2); background: rgba(34, 197, 94, 0.08); }
.tk-pick small { display: block; font-size: 11.5px; color: var(--muted); }
.tk-info { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 10px; max-width: 860px; margin-bottom: 14px; padding: 14px 16px; border: 1px solid var(--line-2); border-radius: 16px; background: var(--card); }
.tk-info span { display: block; font-size: 12px; color: var(--muted); }
.tk-info b { font-size: 14px; overflow-wrap: anywhere; }
.tk-fields { align-items: start; }
.tk-picks { position: absolute; left: 0; right: 0; top: 100%; z-index: 20; max-height: 300px; overflow-y: auto; padding: 4px; border-radius: 12px; background: #1A0B0E; box-shadow: 0 16px 40px rgba(0, 0, 0, 0.55); }
.tk-picks:empty { display: none; }

/* bot Discord */
.bot-ok { border-color: rgba(43, 217, 124, 0.4); background: rgba(43, 217, 124, 0.08); }
.bot-form { max-width: 720px; }
.bot-form h3 { margin-top: 10px; font-size: 18px; }
.check-row { display: flex !important; flex-direction: row !important; align-items: center; gap: 10px; font-weight: 600; cursor: pointer; }
.check-row input { width: 18px; height: 18px; accent-color: var(--blue); }
.eb-wrap { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 0.9fr); gap: 20px; align-items: start; }
.eb-form { gap: 12px; }
.eb-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 10px; align-items: end; }
.eb-row input[type=color] { width: 100%; height: 42px; padding: 3px; }
.eb-check { padding-bottom: 10px; }
.eb-list { display: flex; flex-direction: column; gap: 8px; padding: 12px; border: 1px solid var(--line); border-radius: 14px; background: var(--card); }
.eb-item { display: grid; grid-template-columns: 1fr; gap: 6px; padding: 10px; border-radius: 10px; background: rgba(0, 0, 0, 0.25); }
.eb-btn { grid-template-columns: 1fr 1.6fr auto; align-items: center; }
.eb-actions { flex-wrap: wrap; gap: 8px; }
.eb-actions select { max-width: 220px; }
.eb-preview { position: sticky; top: 90px; display: flex; flex-direction: column; gap: 8px; }
.dc-msg { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 14px; padding: 16px; border-radius: 12px; background: #313338; color: #DBDEE1; font-family: 'gg sans', 'Noto Sans', 'Inter', sans-serif; font-size: 15px; line-height: 1.375; }
.dc-ava { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: #22C55E; font-weight: 800; color: #fff; }
.dc-name { margin-bottom: 2px; font-weight: 600; color: #F2F3F5; }
.dc-name small { margin-left: 4px; font-size: 12px; font-weight: 500; color: #949BA4; }
.dc-bot { padding: 1px 5px; border-radius: 4px; background: #5865F2; font-size: 10px; font-weight: 700; color: #fff; vertical-align: 2px; }
.dc-content { margin-bottom: 6px; overflow-wrap: anywhere; }
.dc-embed { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 16px; max-width: 520px; padding: 10px 16px 14px 12px; border-left: 4px solid; border-radius: 4px; background: #2B2D31; }
.dc-main { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.dc-author { display: flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 600; color: #F2F3F5; }
.dc-author img, .dc-footer img { width: 22px; height: 22px; border-radius: 50%; object-fit: cover; }
.dc-title { font-size: 16px; font-weight: 700; color: #F2F3F5; }
.dc-title a { color: #00A8FC; }
.dc-desc { font-size: 14px; overflow-wrap: anywhere; }
.dc-desc code { padding: 0 4px; border-radius: 4px; background: #1E1F22; }
.dc-fields { display: flex; flex-wrap: wrap; gap: 8px 16px; }
.dc-fields > div { flex: 1 1 100%; font-size: 14px; }
.dc-fields > div.inline { flex: 1 1 28%; }
.dc-fields b { display: block; color: #F2F3F5; }
.dc-image { max-width: 100%; border-radius: 4px; }
.dc-thumb { width: 80px; height: 80px; border-radius: 4px; object-fit: cover; }
.dc-footer { display: flex; align-items: center; gap: 8px; font-size: 12px; color: #B5BAC1; }
.dc-buttons { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.dc-buttons span { padding: 6px 14px; border-radius: 4px; background: #4E5058; font-size: 14px; font-weight: 600; color: #fff; }
@media (max-width: 1100px) { .eb-wrap { grid-template-columns: 1fr; } .eb-preview { position: static; } }