@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800;900&family=Cinzel:wght@600;700;800;900&family=JetBrains+Mono:wght@500;700&display=swap');

:root {
    /* BOT DARK FANTASY LUXURY PALETTE */
    --rpg-bg-deep: #0a0705;
    --rpg-bg-dark: #120d0a;
    --rpg-bg-window: #140f0c;
    --rpg-bg-card: #1c1510;
    --rpg-bg-card-hover: #261c15;
    --rpg-bg-inner: #0d0a08;
    
    /* BORDERS & FRAMES */
    --rpg-border-outer: #5a4430;
    --rpg-border-inner: #3d2d1f;
    --rpg-border-subtle: #291e14;
    --rpg-border-gold: #8c6738;
    --rpg-border-gold-bright: #d4a34b;
    
    /* GOLD ACCENTS & GRADIENTS */
    --rpg-gold-light: #ffeaaf;
    --rpg-gold: #e5b058;
    --rpg-gold-dark: #b88635;
    --rpg-gold-glow: rgba(229, 176, 88, 0.35);
    
    /* ACTION COLORS (START/STOP/CHIPS) */
    --rpg-green-btn-1: #3d7528;
    --rpg-green-btn-2: #1d4510;
    --rpg-green-border: #5aa13b;
    --rpg-green-text: #79ed51;
    --rpg-green-glow: rgba(80, 190, 45, 0.4);
    
    --rpg-red-btn-1: #872922;
    --rpg-red-btn-2: #4a130f;
    --rpg-red-border: #ba3d32;
    --rpg-red-text: #ff546d;
    --rpg-red-glow: rgba(220, 50, 40, 0.4);
    
    --rpg-brown-btn-1: #3d2c1c;
    --rpg-brown-btn-2: #241910;
    --rpg-brown-border: #73573c;
    
    /* TEXT */
    --rpg-text-main: #f3e9db;
    --rpg-text-muted: #a8947f;
    --rpg-text-dim: #7a6a58;
    --rpg-text-gold: #ffe699;
    
    /* GRADIENTS */
    --grad-header: linear-gradient(180deg, #271c14 0%, #17110c 100%);
    --grad-gold: linear-gradient(180deg, #ffeaaf 0%, #e5b058 60%, #b88635 100%);
    --grad-gold-badge: linear-gradient(180deg, #6e301d 0%, #3d140a 100%);
    --grad-card: linear-gradient(180deg, rgba(28, 22, 17, 0.95) 0%, rgba(18, 14, 11, 0.95) 100%);
    --grad-start: linear-gradient(180deg, #3d7528 0%, #1d4510 100%);
    --grad-stop: linear-gradient(180deg, #872922 0%, #4a130f 100%);
    --grad-tab-active: linear-gradient(180deg, #3d2c1c 0%, #241910 100%);
    
    --transition: all 0.18s ease-in-out;
}

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

body {
    background: var(--rpg-bg-deep);
    background-image: 
        radial-gradient(circle at 50% 0%, rgba(55, 41, 30, 0.8), rgba(10, 7, 5, 0.98) 70%),
        repeating-linear-gradient(45deg, rgba(255,255,255,0.008) 0px, rgba(255,255,255,0.008) 2px, transparent 2px, transparent 6px);
    color: var(--rpg-text-main);
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    line-height: 1.5;
    font-size: 13px;
}

/* NAVBAR W STYLU BELKI BOTA (mrpg-header) */
.navbar {
    background: linear-gradient(180deg, #271c14 0%, #17110c 100%);
    border-bottom: 2px solid var(--rpg-border-outer);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.9), inset 0 1px 0 rgba(255, 230, 170, 0.15);
    position: sticky;
    top: 0;
    z-index: 1000;
}

.nav-container {
    max-width: 1260px;
    margin: 0 auto;
    padding: 10px 24px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.logo {
    display: flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
}

.logo-icon {
    font-size: 22px;
    filter: drop-shadow(0 0 6px rgba(229, 176, 88, 0.6));
}

.logo-title {
    font-family: 'Cinzel', serif;
    font-size: 17px;
    font-weight: 800;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    background: var(--grad-gold);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    text-shadow: 0 2px 4px rgba(0,0,0,0.8);
}

.badge-pro {
    font-size: 9px;
    font-weight: 800;
    padding: 2px 7px;
    border-radius: 4px;
    background: var(--grad-gold-badge);
    border: 1px solid #994931;
    color: #ffb8a3;
    letter-spacing: 0.6px;
    box-shadow: 0 1px 4px rgba(0,0,0,0.6);
    text-transform: uppercase;
}

/* ZAKŁADKI / PILL TABS DOKŁADNIE JAK W BOCIE */
.nav-pills {
    display: flex;
    background: #0f0b08;
    border: 1px solid var(--rpg-border-inner);
    border-radius: 7px;
    padding: 3px;
    gap: 3px;
}

.nav-tab {
    padding: 7px 14px;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.4px;
    text-transform: uppercase;
    color: var(--rpg-text-muted);
    text-decoration: none;
    background: transparent;
    border-radius: 5px;
    display: flex;
    align-items: center;
    gap: 6px;
    transition: var(--transition);
    border: 1px solid transparent;
}

.nav-tab:hover {
    color: #faebd7;
    background: rgba(255, 255, 255, 0.05);
}

.nav-tab.active {
    color: var(--rpg-text-gold);
    background: var(--grad-tab-active);
    border: 1px solid var(--rpg-border-gold);
    box-shadow: inset 0 1px 0 rgba(255,230,150,0.25), 0 2px 6px rgba(0,0,0,0.7);
    text-shadow: 0 1px 3px rgba(0,0,0,0.9), 0 0 6px rgba(255,210,100,0.4);
}

.nav-auth {
    display: flex;
    align-items: center;
    gap: 10px;
}

/* PRZYCISKI W BOCIE (mrpg-btn) */
.btn {
    padding: 8px 16px;
    border-radius: 5px;
    font-weight: 800;
    font-size: 11px;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    cursor: pointer;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    border: 1px solid transparent;
    transition: var(--transition);
    text-shadow: 0 1px 2px rgba(0,0,0,0.8);
    white-space: nowrap;
}

.btn:active {
    transform: translateY(1px);
}

.btn-primary, .btn-start {
    background: var(--grad-start);
    border-color: var(--rpg-green-border);
    color: #e5ffd9;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.25), 0 2px 6px rgba(0,0,0,0.6), 0 0 10px rgba(80, 190, 45, 0.35);
}

.btn-primary:hover, .btn-start:hover {
    background: linear-gradient(180deg, #4b8f33 0%, #265916 100%);
    border-color: #7cd651;
    color: #ffffff;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.35), 0 0 14px rgba(110, 240, 65, 0.6);
}

.btn-danger, .btn-stop {
    background: var(--grad-stop);
    border-color: var(--rpg-red-border);
    color: #ffe6e3;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.2), 0 2px 6px rgba(0,0,0,0.6), 0 0 10px rgba(220, 50, 40, 0.35);
}

.btn-danger:hover, .btn-stop:hover {
    background: linear-gradient(180deg, #a6342b 0%, #611812 100%);
    border-color: #eb4d3f;
    color: #ffffff;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.35), 0 0 14px rgba(240, 60, 50, 0.6);
}

.btn-secondary, .btn-reset {
    background: linear-gradient(180deg, #33261c 0%, #1e150f 100%);
    border-color: var(--rpg-border-outer);
    color: #d6c1a8;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.1), 0 2px 4px rgba(0,0,0,0.5);
}

.btn-secondary:hover, .btn-reset:hover {
    background: linear-gradient(180deg, #473527 0%, #291d15 100%);
    border-color: #8c6738;
    color: #fff;
    box-shadow: 0 0 8px rgba(212, 163, 75, 0.3);
}

.btn-gold {
    background: linear-gradient(180deg, #6b4d1c 0%, #3d280d 100%);
    border-color: #b88635;
    color: #ffeaaf;
    box-shadow: inset 0 1px 0 rgba(255,230,170,0.3), 0 2px 6px rgba(0,0,0,0.7), 0 0 10px rgba(229,176,88,0.35);
}

.btn-gold:hover {
    background: linear-gradient(180deg, #876223 0%, #4d3311 100%);
    border-color: #ffd070;
    color: #ffffff;
    box-shadow: 0 0 14px rgba(255,210,100,0.6);
}

.btn-sm {
    padding: 5px 11px;
    font-size: 10px;
    border-radius: 4px;
}

.btn-lg {
    padding: 12px 26px;
    font-size: 13px;
    border-radius: 6px;
}

/* LAYOUT & KARTY (mrpg-card) */
.container {
    max-width: 1260px;
    margin: 0 auto;
    padding: 30px 24px;
    width: 100%;
    flex: 1;
}

.card {
    background: var(--grad-card);
    border: 1px solid var(--rpg-border-inner);
    border-radius: 9px;
    padding: 20px;
    margin-bottom: 20px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.7), inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

.card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
    border-bottom: 1px solid var(--rpg-border-inner);
    padding-bottom: 10px;
}

.card-title {
    font-family: 'Cinzel', serif;
    font-size: 15px;
    font-weight: 800;
    letter-spacing: 0.6px;
    color: #cbb493;
    display: flex;
    align-items: center;
    gap: 8px;
    text-transform: uppercase;
}

/* FORMULARZE (mrpg-input, mrpg-select) */
.form-group {
    margin-bottom: 14px;
}

label {
    display: block;
    font-size: 10px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #b09c85;
    margin-bottom: 5px;
}

input, select, textarea {
    width: 100%;
    background: var(--rpg-bg-inner);
    border: 1px solid #473729;
    border-radius: 5px;
    color: var(--rpg-text-main);
    padding: 9px 12px;
    font-size: 12px;
    outline: none;
    box-shadow: inset 0 2px 4px rgba(0,0,0,0.8);
    transition: var(--transition);
}

input:focus, select:focus, textarea:focus {
    border-color: #a8824a;
    box-shadow: inset 0 1px 3px rgba(0,0,0,0.8), 0 0 8px rgba(212, 163, 75, 0.45);
}

/* TABELE STYLIZOWANE */
.table-responsive {
    overflow-x: auto;
    border: 1px solid var(--rpg-border-inner);
    border-radius: 6px;
}

table {
    width: 100%;
    border-collapse: collapse;
    text-align: left;
    background: #0d0a08;
}

th {
    background: #19120d;
    padding: 10px 14px;
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    color: var(--rpg-text-muted);
    border-bottom: 1px solid var(--rpg-border-inner);
    font-weight: 800;
}

td {
    padding: 12px 14px;
    font-size: 12px;
    border-bottom: 1px solid #241a12;
    color: #e4d8c7;
    vertical-align: middle;
}

tr:hover td {
    background: rgba(255, 230, 150, 0.02);
}

/* STATUS TAGS (mrpg-status-tag) */
.status-tag {
    font-size: 9px;
    font-weight: 800;
    padding: 3px 8px;
    border-radius: 10px;
    text-transform: uppercase;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    letter-spacing: 0.4px;
}

.status-active {
    background: rgba(35, 75, 25, 0.85);
    color: #6eed53;
    border: 1px solid #458a33;
    box-shadow: 0 0 8px rgba(100, 240, 70, 0.35);
}

.status-inactive, .status-danger {
    background: rgba(70, 25, 20, 0.85);
    color: #f77b6d;
    border: 1px solid #87362c;
    box-shadow: 0 0 8px rgba(240, 60, 50, 0.25);
}

.status-gold, .status-vip {
    background: rgba(75, 55, 20, 0.85);
    color: #ffda73;
    border: 1px solid #ad7f1f;
    box-shadow: 0 0 8px rgba(250, 190, 40, 0.3);
}

/* CHIPY (mrpg-chip) */
.chip {
    padding: 5px 12px;
    font-size: 10px;
    font-weight: 800;
    border-radius: 4px;
    border: 1px solid #3d2f23;
    background: #100c0a;
    color: #7a6a58;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    text-transform: uppercase;
}

.chip-e1 {
    background: linear-gradient(180deg, #204517 0%, #11260c 100%);
    border-color: #4da133;
    color: #79ed51;
}

.chip-e2 {
    background: linear-gradient(180deg, #4f3b0f 0%, #291e05 100%);
    border-color: #ad7f1f;
    color: #ffc947;
}

.chip-heros {
    background: linear-gradient(180deg, #52161e 0%, #2b080d 100%);
    border-color: #ab2839;
    color: #ff546d;
}

/* ALERTY W CIEMNYM DREWNIE / ZŁOCIE */
.alert {
    padding: 12px 16px;
    border-radius: 6px;
    margin-bottom: 18px;
    font-size: 12px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.alert-success {
    background: rgba(35, 75, 25, 0.7);
    border: 1px solid #458a33;
    color: #8aff6e;
}

.alert-error {
    background: rgba(70, 25, 20, 0.7);
    border: 1px solid #87362c;
    color: #ff8b7d;
}

.alert-info {
    background: rgba(45, 35, 22, 0.7);
    border: 1px solid var(--rpg-border-gold);
    color: #ffeaaf;
}

/* STAT BOX (mrpg-stat-box) */
.stat-box {
    background: #0f0b09;
    border: 1px solid #382a1d;
    border-radius: 6px;
    padding: 12px 14px;
}

.stat-label {
    font-size: 9px;
    color: #8c7964;
    text-transform: uppercase;
    margin-bottom: 4px;
    font-weight: 700;
    letter-spacing: 0.5px;
}

.stat-val {
    font-size: 20px;
    font-weight: 800;
    color: #fff;
    font-family: 'Cinzel', serif;
}

/* PRICING CARDS RPG STYL */
.pricing-card-rpg {
    background: linear-gradient(180deg, #1c1510 0%, #120d0a 100%);
    border: 1px solid var(--rpg-border-inner);
    border-radius: 9px;
    padding: 26px 20px;
    display: flex;
    flex-direction: column;
    position: relative;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.8);
    transition: var(--transition);
}

.pricing-card-rpg:hover {
    transform: translateY(-3px);
    border-color: var(--rpg-border-gold);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.9), 0 0 15px rgba(229, 176, 88, 0.2);
}

.pricing-card-rpg.featured {
    border: 2px solid var(--rpg-border-gold);
    background: linear-gradient(180deg, #241a12 0%, #150e09 100%);
    box-shadow: 0 0 25px rgba(229, 176, 88, 0.25), 0 8px 30px rgba(0,0,0,0.9);
}

.pricing-tag-rpg {
    position: absolute;
    top: -11px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--grad-gold-badge);
    border: 1px solid #994931;
    color: #ffb8a3;
    font-size: 9px;
    font-weight: 800;
    padding: 3px 12px;
    border-radius: 4px;
    letter-spacing: 0.6px;
    text-transform: uppercase;
}

.price-val-rpg {
    font-family: 'Cinzel', serif;
    font-size: 38px;
    font-weight: 900;
    color: #ffe699;
    margin: 16px 0 6px;
    text-shadow: 0 2px 8px rgba(0,0,0,0.8);
}

.price-val-rpg span {
    font-size: 13px;
    color: var(--rpg-text-muted);
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-weight: 600;
}

.rpg-features {
    list-style: none;
    margin: 18px 0 24px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.rpg-features li {
    font-size: 12px;
    color: #d1c2b0;
    display: flex;
    align-items: center;
    gap: 8px;
}

.rpg-features li .check-gold {
    color: #e5b058;
    font-weight: bold;
    font-size: 14px;
}

/* KOD I LOGI */
code {
    font-family: 'JetBrains Mono', Consolas, monospace;
    background: #0d0a08;
    border: 1px solid #382a1d;
    padding: 2px 6px;
    border-radius: 4px;
    color: #ffeaaf;
    font-size: 11px;
}

/* STOPKA (mrpg-footer) */
footer {
    background: #0e0a08;
    border-top: 2px solid var(--rpg-border-outer);
    padding: 30px 24px;
    font-size: 12px;
    color: var(--rpg-text-dim);
    margin-top: auto;
    box-shadow: 0 -4px 20px rgba(0,0,0,0.8);
}

/* GRIDS */
.grid-2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 18px; }
.grid-3 { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 18px; }
.grid-4 { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 14px; }

@media (max-width: 820px) {
    .nav-container { flex-direction: column; gap: 12px; }
    .nav-pills { flex-wrap: wrap; justify-content: center; }
    .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }
}