/* ─── L2OBLIVION PLUGIN STYLES ──────────────────────────────────────────────── */
:root {
    --l2-gold:    #c8922a;
    --l2-gold-light: #e0a83a;
    --l2-red:     #8b2020;
    --l2-dark:    #1a1a1a;
    --l2-dark2:   #242424;
    --l2-dark3:   #2e2e2e;
    --l2-border:  #3a3a3a;
    --l2-text:    #e0d5c5;
    --l2-muted:   #888;
    --l2-success: #2ecc71;
    --l2-error:   #e74c3c;
    --l2-warning: #e6a817;
    --l2-info:    #3498db;
}

/* ── Forms ──────────────────────────────────────────────────────────────────── */
.l2-form-wrap {
    max-width: 480px;
    margin: 40px auto;
    background: var(--l2-dark2);
    border: 1px solid var(--l2-border);
    border-radius: 12px;
    padding: 36px 40px;
    color: var(--l2-text);
}

.l2-form-wrap h2 {
    color: var(--l2-gold);
    margin: 0 0 24px;
    font-size: 1.6em;
    text-align: center;
    letter-spacing: 1px;
}

.l2-form { display: flex; flex-direction: column; gap: 16px; }

.l2-field { display: flex; flex-direction: column; gap: 6px; }

.l2-field label {
    font-size: .85em;
    color: var(--l2-muted);
    text-transform: uppercase;
    letter-spacing: .5px;
}

.l2-field input,
.l2-field select,
.l2-field textarea {
    background: var(--l2-dark3);
    border: 1px solid var(--l2-border);
    border-radius: 6px;
    color: var(--l2-text);
    padding: 10px 14px;
    font-size: 1em;
    transition: border-color .2s;
    width: 100%;
    box-sizing: border-box;
}

.l2-field input:focus,
.l2-field select:focus {
    outline: none;
    border-color: var(--l2-gold);
}

/* ── Buttons ─────────────────────────────────────────────────────────────────── */
.l2-btn {
    background: var(--l2-gold);
    color: #1a1a1a;
    border: none;
    border-radius: 6px;
    padding: 12px 24px;
    font-size: 1em;
    font-weight: 700;
    cursor: pointer;
    transition: background .2s, transform .1s;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    letter-spacing: .5px;
}

.l2-btn:hover { background: var(--l2-gold-light); transform: translateY(-1px); }
.l2-btn:active { transform: translateY(0); }

.l2-btn-outline {
    background: transparent;
    border: 1px solid var(--l2-gold);
    color: var(--l2-gold);
}
.l2-btn-outline:hover { background: rgba(200,146,42,.15); }

.l2-btn-sm { padding: 8px 16px; font-size: .85em; }

/* ── Messages ────────────────────────────────────────────────────────────────── */
.l2-error, .l2-success, .l2-info, .l2-warning, .l2-msg {
    padding: 12px 16px;
    border-radius: 6px;
    margin-bottom: 16px;
    font-size: .95em;
}
.l2-error,   .l2-msg.l2-error   { background: rgba(231,76,60,.15);   border: 1px solid var(--l2-error);   color: var(--l2-error); }
.l2-success, .l2-msg.l2-success { background: rgba(46,204,113,.15);  border: 1px solid var(--l2-success); color: var(--l2-success); }
.l2-info,    .l2-msg.info       { background: rgba(52,152,219,.15);  border: 1px solid var(--l2-info);    color: var(--l2-info); }
.l2-warning, .l2-msg.warning    { background: rgba(230,168,23,.15);  border: 1px solid var(--l2-warning); color: var(--l2-warning); }

.l2-link { text-align: center; font-size: .9em; color: var(--l2-muted); margin-top: 4px; }
.l2-link a { color: var(--l2-gold); text-decoration: none; }
.l2-link a:hover { text-decoration: underline; }

/* ── Panel ───────────────────────────────────────────────────────────────────── */
.l2-panel {
    background: var(--l2-dark2);
    border: 1px solid var(--l2-border);
    border-radius: 12px;
    overflow: hidden;
    color: var(--l2-text);
    max-width: 1100px;
    margin: 0 auto;
}

.l2-panel-header {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 24px 28px;
    background: var(--l2-dark3);
    border-bottom: 1px solid var(--l2-border);
}

.l2-avatar-icon { font-size: 2.4em; }

.l2-panel-title { flex: 1; }
.l2-panel-title h2 { margin: 0; color: var(--l2-gold); font-size: 1.4em; }
.l2-total-coins { font-size: .9em; color: var(--l2-muted); }

/* ── Tabs ────────────────────────────────────────────────────────────────────── */
.l2-tabs {
    display: flex;
    background: var(--l2-dark3);
    border-bottom: 1px solid var(--l2-border);
    overflow-x: auto;
}

.l2-tab {
    background: none;
    border: none;
    color: var(--l2-muted);
    padding: 14px 20px;
    cursor: pointer;
    font-size: .95em;
    border-bottom: 3px solid transparent;
    transition: color .2s, border-color .2s;
    white-space: nowrap;
}

.l2-tab:hover { color: var(--l2-text); }
.l2-tab.active { color: var(--l2-gold); border-bottom-color: var(--l2-gold); }

.l2-tab-content { display: none; padding: 28px; }
.l2-tab-content.active { display: block; }
.l2-tab-content h3 { color: var(--l2-gold); margin-top: 0; }

/* ── Characters Grid ─────────────────────────────────────────────────────────── */
.l2-chars-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 16px; }

.l2-char-card {
    background: var(--l2-dark3);
    border: 1px solid var(--l2-border);
    border-radius: 10px;
    padding: 16px;
    text-align: center;
    transition: border-color .2s;
}

.l2-char-card:hover { border-color: var(--l2-gold); }
.l2-char-card.online { border-color: #2ecc71; }

.l2-char-status { font-size: .75em; margin-bottom: 8px; }
.l2-char-name { font-size: 1.1em; font-weight: 700; color: var(--l2-gold); margin-bottom: 4px; }
.l2-char-class { font-size: .85em; color: var(--l2-muted); margin-bottom: 10px; }
.l2-char-stats { display: flex; justify-content: center; gap: 10px; font-size: .85em; margin-bottom: 10px; }
.l2-char-coins { font-size: .9em; color: var(--l2-gold-light); }

/* ── Packs Grid ──────────────────────────────────────────────────────────────── */
.l2-packs-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 16px; margin-bottom: 28px; }

.l2-pack {
    background: var(--l2-dark3);
    border: 1px solid var(--l2-border);
    border-radius: 10px;
    padding: 20px 16px;
    text-align: center;
    position: relative;
    transition: border-color .2s, transform .2s;
}

.l2-pack:hover { border-color: var(--l2-gold); transform: translateY(-2px); }
.l2-pack.has-discount { border-color: var(--l2-gold); }

.l2-pack-badge {
    position: absolute;
    top: -10px;
    right: 12px;
    background: var(--l2-gold);
    color: #1a1a1a;
    font-size: .75em;
    font-weight: 700;
    padding: 3px 8px;
    border-radius: 20px;
}

.l2-pack-name { font-weight: 700; color: var(--l2-gold); margin-bottom: 8px; font-size: 1.1em; }
.l2-pack-coins { font-size: 1.5em; margin-bottom: 8px; }
.l2-pack-price { font-size: 1.3em; font-weight: 700; color: var(--l2-text); margin-bottom: 4px; }
.l2-pack-original { font-size: .8em; color: var(--l2-muted); text-decoration: line-through; margin-bottom: 12px; }
.l2-pack .l2-btn { width: 100%; }

/* ── Buy Modal ───────────────────────────────────────────────────────────────── */
.l2-buy-modal {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.75);
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

.l2-buy-modal-inner {
    background: var(--l2-dark2);
    border: 1px solid var(--l2-gold);
    border-radius: 12px;
    padding: 32px;
    width: 100%;
    max-width: 500px;
    max-height: 90vh;
    overflow-y: auto;
}

.l2-buy-modal-inner h4 { color: var(--l2-gold); margin-top: 0; font-size: 1.3em; }
.l2-buy-summary { background: var(--l2-dark3); border-radius: 6px; padding: 12px; margin-bottom: 20px; font-size: .95em; }

/* ── Payment Methods ─────────────────────────────────────────────────────────── */
.l2-payment-methods { display: flex; flex-direction: column; gap: 8px; }

.l2-pm {
    display: flex;
    align-items: center;
    gap: 10px;
    background: var(--l2-dark3);
    border: 1px solid var(--l2-border);
    border-radius: 6px;
    padding: 12px 14px;
    cursor: pointer;
    transition: border-color .2s;
}

.l2-pm:hover { border-color: var(--l2-gold); }
.l2-pm.selected { border-color: var(--l2-gold); background: rgba(200,146,42,.1); }
.l2-pm input[type=radio] { accent-color: var(--l2-gold); }

.l2-modal-actions { display: flex; gap: 10px; margin-top: 20px; }
.l2-modal-actions .l2-btn { flex: 1; }

/* ── Table ───────────────────────────────────────────────────────────────────── */
.l2-table-wrap { overflow-x: auto; }

.l2-table {
    width: 100%;
    border-collapse: collapse;
    font-size: .9em;
}

.l2-table th {
    background: var(--l2-dark3);
    color: var(--l2-gold);
    padding: 10px 12px;
    text-align: left;
    font-weight: 600;
    border-bottom: 1px solid var(--l2-border);
}

.l2-table td {
    padding: 10px 12px;
    border-bottom: 1px solid var(--l2-border);
    color: var(--l2-text);
}

.l2-table tr:hover td { background: rgba(255,255,255,.03); }
.l2-table tr.status-paid td { }
.l2-table tr.status-cancelled td { opacity: .6; }

/* ── Account Grid ────────────────────────────────────────────────────────────── */
.l2-conta-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
@media (max-width: 700px) { .l2-conta-grid { grid-template-columns: 1fr; } }

.l2-conta-info, .l2-conta-form {
    background: var(--l2-dark3);
    border: 1px solid var(--l2-border);
    border-radius: 10px;
    padding: 20px;
}

.l2-conta-info h3,
.l2-conta-form h3 { color: var(--l2-gold); margin-top: 0; font-size: 1em; text-transform: uppercase; letter-spacing: 1px; }

.l2-info-table { width: 100%; border-collapse: collapse; font-size: .9em; }
.l2-info-table td { padding: 8px 4px; border-bottom: 1px solid var(--l2-border); }
.l2-info-table td:first-child { color: var(--l2-muted); width: 40%; }

/* ── Misc ────────────────────────────────────────────────────────────────────── */
.l2-empty { color: var(--l2-muted); font-style: italic; text-align: center; padding: 30px 0; }
.l2-warning { background: rgba(230,168,23,.15); border: 1px solid var(--l2-warning); color: var(--l2-warning); padding: 12px 16px; border-radius: 6px; }

@media (max-width: 600px) {
    .l2-form-wrap { padding: 24px 20px; }
    .l2-panel-header { flex-wrap: wrap; }
    .l2-packs-grid { grid-template-columns: 1fr 1fr; }
}