/* ── Player Card Editor — 404Servers ──────────────────────────────────────── */
/* Glassmorphism · Cyberpunk · Dark mode                                       */

:root {
    --pce-bg:       #05070a;
    --pce-bg2:      #080c12;
    --pce-surface:  rgba(12, 18, 28, 0.75);
    --pce-surface2: rgba(20, 28, 42, 0.7);
    --pce-border:   rgba(255,255,255,0.07);
    --pce-border2:  rgba(255,255,255,0.13);
    --pce-accent:   #00e57a;
    --pce-accent2:  rgba(0,229,122,0.18);
    --pce-text:     #eef2f7;
    --pce-text2:    #8fa8c0;
    --pce-muted:    #516678;
    --pce-danger:   #ff4455;
    --pce-amber:    #f5a623;
    --pce-blue:     #4d9fff;
    --pce-bronze:   #cd7f32;
    --pce-silver:   #c0c0c0;
    --pce-gold:     #ffd700;
    --pce-plat:     #e5e4e2;
    --pce-radius:   10px;
    --pce-glow:     0 0 20px rgba(0,229,122,0.15);
}

* { box-sizing: border-box; }

/* ── Shell ─────────────────────────────────────────────────────────────────── */
.pce-shell {
    min-height: 100vh;
    background: var(--pce-bg);
    background-image:
        radial-gradient(ellipse at 20% 10%, rgba(0,229,122,0.04) 0%, transparent 60%),
        radial-gradient(ellipse at 80% 90%, rgba(77,159,255,0.03) 0%, transparent 60%);
    color: var(--pce-text);
    font-family: 'Share Tech Mono', 'Courier New', monospace;
}

/* ── Header ────────────────────────────────────────────────────────────────── */
.pce-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 28px;
    height: 56px;
    background: rgba(5,7,10,0.9);
    backdrop-filter: blur(16px);
    border-bottom: 1px solid var(--pce-border);
    position: sticky;
    top: 0;
    z-index: 100;
}

.pce-brand { text-decoration: none; display: flex; align-items: center; gap: 2px; }
.pce-brand-404 { color: var(--pce-accent); font-size: 1.1rem; font-weight: 700; letter-spacing: 1px; }
.pce-brand-srv { color: var(--pce-text2); font-size: 1.1rem; letter-spacing: 1px; }

.pce-title {
    color: var(--pce-muted);
    font-size: .7rem;
    letter-spacing: 4px;
    text-transform: uppercase;
}

.pce-header-right {
    display: flex;
    align-items: center;
    gap: 12px;
}

/* ── Loading / Error states ─────────────────────────────────────────────────── */
.pce-loading, .pce-auth-error {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: calc(100vh - 56px);
    gap: 16px;
    color: var(--pce-text2);
}

.pce-loading-ring {
    width: 48px; height: 48px;
    border: 3px solid var(--pce-border2);
    border-top-color: var(--pce-accent);
    border-radius: 50%;
    animation: pce-spin 0.8s linear infinite;
}

.pce-error-icon { font-size: 3rem; color: var(--pce-amber); }
.pce-auth-error h2 { color: var(--pce-text); margin: 0; }
.pce-auth-error p  { color: var(--pce-text2); margin: 4px 0 20px; }

/* ── Main layout ───────────────────────────────────────────────────────────── */
.pce-main {
    display: grid;
    grid-template-columns: 380px 1fr;
    gap: 24px;
    max-width: 1280px;
    margin: 0 auto;
    padding: 24px 24px 60px;
}

@media (max-width: 900px) {
    .pce-main { grid-template-columns: 1fr; }
}

/* ── Preview column ─────────────────────────────────────────────────────────── */
.pce-preview-col {
    display: flex;
    flex-direction: column;
    gap: 20px;
    position: sticky;
    top: 80px;
    height: fit-content;
}

.pce-section-label {
    font-size: .65rem;
    letter-spacing: 3px;
    color: var(--pce-muted);
    margin-bottom: 8px;
}

.pce-preview-wrap {
    position: relative;
    border-radius: var(--pce-radius);
    overflow: hidden;
    border: 1px solid var(--pce-border);
    background: #000;
    aspect-ratio: 2 / 1;
}

.pce-preview-img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
    transition: opacity .2s;
}

.pce-preview-loading {
    position: absolute;
    inset: 0;
    background: rgba(5,7,10,0.7);
    display: flex;
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(4px);
}

/* ── Share box ──────────────────────────────────────────────────────────────── */
.pce-share-box {
    background: var(--pce-surface);
    border: 1px solid var(--pce-border);
    border-radius: var(--pce-radius);
    padding: 16px;
    backdrop-filter: blur(12px);
}

.pce-share-row {
    display: flex;
    gap: 8px;
    margin-top: 8px;
}

.pce-share-input {
    flex: 1;
    background: rgba(0,0,0,0.4);
    border: 1px solid var(--pce-border2);
    border-radius: 6px;
    color: var(--pce-text2);
    font-family: inherit;
    font-size: .75rem;
    padding: 8px 10px;
    outline: none;
    cursor: text;
}

.pce-help {
    font-size: .7rem;
    color: var(--pce-muted);
    margin: 8px 0 0;
    line-height: 1.5;
}

/* ── Save status ────────────────────────────────────────────────────────────── */
.pce-save-status {
    padding: 10px 14px;
    border-radius: 6px;
    font-size: .8rem;
    animation: pce-fadein .2s ease;
}
.pce-status-success { background: rgba(0,229,122,.12); border: 1px solid rgba(0,229,122,.3); color: var(--pce-accent); }
.pce-status-error   { background: rgba(255,68,85,.12);  border: 1px solid rgba(255,68,85,.3);  color: var(--pce-danger); }

/* ── Options column ─────────────────────────────────────────────────────────── */
.pce-options-col {
    background: var(--pce-surface);
    border: 1px solid var(--pce-border);
    border-radius: var(--pce-radius);
    overflow: hidden;
    backdrop-filter: blur(12px);
}

/* ── Tabs ────────────────────────────────────────────────────────────────────── */
.pce-tabs {
    display: flex;
    background: rgba(0,0,0,0.3);
    border-bottom: 1px solid var(--pce-border);
    overflow-x: auto;
    scrollbar-width: none;
}
.pce-tabs::-webkit-scrollbar { display: none; }

.pce-tab {
    flex: 1;
    min-width: 56px;
    padding: 12px 8px;
    background: none;
    border: none;
    color: var(--pce-muted);
    font-family: inherit;
    font-size: .65rem;
    letter-spacing: 2px;
    cursor: pointer;
    transition: color .15s, background .15s;
    white-space: nowrap;
    border-bottom: 2px solid transparent;
}
.pce-tab:hover  { color: var(--pce-text2); background: rgba(255,255,255,.03); }
.pce-tab.active { color: var(--pce-accent); border-bottom-color: var(--pce-accent); }

/* ── Tab panels ─────────────────────────────────────────────────────────────── */
.pce-tab-panel {
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 20px;
    max-height: calc(100vh - 200px);
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: var(--pce-border2) transparent;
}

/* ── Option groups ──────────────────────────────────────────────────────────── */
.pce-opt-group {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.pce-label {
    font-size: .65rem;
    letter-spacing: 2px;
    color: var(--pce-muted);
    text-transform: uppercase;
}

/* ── Pill row (bg style selector) ──────────────────────────────────────────── */
.pce-pill-row {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.pce-pill {
    padding: 6px 14px;
    background: rgba(255,255,255,.04);
    border: 1px solid var(--pce-border);
    border-radius: 20px;
    color: var(--pce-text2);
    font-family: inherit;
    font-size: .75rem;
    cursor: pointer;
    transition: all .15s;
    white-space: nowrap;
    display: flex;
    align-items: center;
    gap: 6px;
}
.pce-pill:hover   { border-color: var(--pce-border2); color: var(--pce-text); }
.pce-pill.active  { background: var(--pce-accent2); border-color: var(--pce-accent); color: var(--pce-accent); }

.pce-lock { font-size: .6rem; color: var(--pce-amber); opacity: .7; }

/* ── Option grid (textures, gradients, etc.) ────────────────────────────────── */
.pce-option-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
    gap: 6px;
}

.pce-opt-btn {
    padding: 8px 6px;
    background: rgba(255,255,255,.04);
    border: 1px solid var(--pce-border);
    border-radius: 6px;
    color: var(--pce-text2);
    font-family: inherit;
    font-size: .68rem;
    cursor: pointer;
    transition: all .15s;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    min-height: 36px;
    justify-content: center;
}
.pce-opt-btn:hover:not(:disabled) { border-color: var(--pce-border2); color: var(--pce-text); background: rgba(255,255,255,.07); }
.pce-opt-btn.active { background: var(--pce-accent2); border-color: var(--pce-accent); color: var(--pce-accent); }

/* ── Tier grid (borders, rings, overlays, fonts) ────────────────────────────── */
.pce-tier-grid {
    grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
}

.pce-opt-btn.pce-locked {
    opacity: .5;
    cursor: not-allowed;
    background: rgba(255,255,255,.02);
}

.pce-tier-lock {
    font-size: .55rem;
    letter-spacing: 1px;
    margin-top: 2px;
    font-weight: 700;
}

.pce-bronze-text { color: var(--pce-bronze); }
.pce-silver-text { color: var(--pce-silver); }
.pce-gold-text   { color: var(--pce-gold);   }
.pce-plat-text   { color: var(--pce-plat);   }

/* ── Color row ──────────────────────────────────────────────────────────────── */
.pce-color-row {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
}

.pce-color-item {
    display: flex;
    flex-direction: column;
    gap: 6px;
    flex: 1;
    min-width: 80px;
}

.pce-color-item label {
    font-size: .65rem;
    color: var(--pce-muted);
    letter-spacing: 1px;
}

.pce-color-item input[type="color"] {
    width: 100%;
    height: 36px;
    border: 1px solid var(--pce-border);
    border-radius: 6px;
    background: rgba(0,0,0,.4);
    cursor: pointer;
    padding: 2px;
}

/* ── Sliders ─────────────────────────────────────────────────────────────────── */
.pce-slider-row {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.pce-slider-row label {
    font-size: .65rem;
    color: var(--pce-text2);
    display: flex;
    justify-content: space-between;
}

.pce-slider-row input[type="range"] {
    -webkit-appearance: none;
    width: 100%;
    height: 4px;
    background: rgba(255,255,255,.1);
    border-radius: 2px;
    outline: none;
    cursor: pointer;
}
.pce-slider-row input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 14px;
    height: 14px;
    background: var(--pce-accent);
    border-radius: 50%;
    cursor: pointer;
    box-shadow: 0 0 6px rgba(0,229,122,.5);
}
.pce-slider-row input[type="range"]::-moz-range-thumb {
    width: 14px;
    height: 14px;
    background: var(--pce-accent);
    border: none;
    border-radius: 50%;
    cursor: pointer;
}

/* ── Sub-panels ──────────────────────────────────────────────────────────────── */
.pce-sub-panel {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 14px;
    background: rgba(0,0,0,.25);
    border: 1px solid var(--pce-border);
    border-radius: 8px;
    animation: pce-fadein .2s ease;
}

/* ── Text inputs ─────────────────────────────────────────────────────────────── */
.pce-text-input {
    width: 100%;
    background: rgba(0,0,0,.4);
    border: 1px solid var(--pce-border);
    border-radius: 6px;
    color: var(--pce-text);
    font-family: inherit;
    font-size: .8rem;
    padding: 10px 12px;
    outline: none;
    transition: border-color .15s;
}
.pce-text-input:focus { border-color: var(--pce-accent); box-shadow: 0 0 0 2px rgba(0,229,122,.12); }
.pce-text-input::placeholder { color: var(--pce-muted); }

.pce-charcount {
    font-size: .65rem;
    color: var(--pce-muted);
    text-align: right;
}

/* ── Toggle ──────────────────────────────────────────────────────────────────── */
.pce-toggle-row {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.pce-toggle {
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    font-size: .8rem;
    color: var(--pce-text2);
}

.pce-toggle input[type="checkbox"] { display: none; }

.pce-toggle-track {
    width: 36px;
    height: 20px;
    background: rgba(255,255,255,.1);
    border-radius: 10px;
    position: relative;
    transition: background .15s;
    flex-shrink: 0;
}
.pce-toggle-track::after {
    content: '';
    position: absolute;
    left: 3px;
    top: 3px;
    width: 14px;
    height: 14px;
    background: var(--pce-muted);
    border-radius: 50%;
    transition: transform .15s, background .15s;
}
.pce-toggle input:checked ~ .pce-toggle-track {
    background: rgba(0,229,122,.25);
}
.pce-toggle input:checked ~ .pce-toggle-track::after {
    transform: translateX(16px);
    background: var(--pce-accent);
}

/* ── Stats grid ──────────────────────────────────────────────────────────────── */
.pce-stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 8px;
}

.pce-stat-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 12px;
    background: rgba(255,255,255,.03);
    border: 1px solid var(--pce-border);
    border-radius: 6px;
    cursor: pointer;
    font-size: .78rem;
    color: var(--pce-text2);
    transition: all .15s;
}
.pce-stat-item:hover:not(.pce-stat-empty) {
    background: rgba(0,229,122,.06);
    border-color: rgba(0,229,122,.2);
}
.pce-stat-item input { accent-color: var(--pce-accent); cursor: pointer; }

.pce-stat-empty {
    opacity: .45;
    cursor: default;
}
.pce-stat-empty input { cursor: not-allowed; }

.pce-empty-badge {
    margin-left: auto;
    font-size: .6rem;
    color: var(--pce-muted);
    background: rgba(255,255,255,.06);
    border-radius: 4px;
    padding: 1px 5px;
    letter-spacing: 1px;
}

/* ── VIP badge (header) ──────────────────────────────────────────────────────── */
.pce-vip-badge {
    padding: 4px 10px;
    border-radius: 20px;
    font-size: .65rem;
    letter-spacing: 2px;
    font-weight: 700;
    border: 1px solid currentColor;
}
.pce-bronze { color: var(--pce-bronze); background: rgba(205,127,50,.12); }
.pce-silver { color: var(--pce-silver); background: rgba(192,192,192,.12); }
.pce-gold   { color: var(--pce-gold);   background: rgba(255,215,0,.12);   box-shadow: 0 0 12px rgba(255,215,0,.2); }
.pce-plat   { color: var(--pce-plat);   background: rgba(229,228,226,.12); box-shadow: 0 0 12px rgba(229,228,226,.2); }

/* ── Buttons ─────────────────────────────────────────────────────────────────── */
.pce-btn {
    padding: 8px 18px;
    border-radius: 6px;
    font-family: inherit;
    font-size: .75rem;
    letter-spacing: 1.5px;
    cursor: pointer;
    border: 1px solid transparent;
    transition: all .15s;
    display: flex;
    align-items: center;
    gap: 8px;
    white-space: nowrap;
}
.pce-btn:disabled { opacity: .4; cursor: not-allowed; }

.pce-btn-primary {
    background: rgba(0,229,122,.15);
    border-color: var(--pce-accent);
    color: var(--pce-accent);
}
.pce-btn-primary:hover:not(:disabled) {
    background: rgba(0,229,122,.25);
    box-shadow: 0 0 14px rgba(0,229,122,.2);
}

.pce-btn-secondary {
    background: rgba(255,255,255,.05);
    border-color: var(--pce-border2);
    color: var(--pce-text2);
}
.pce-btn-secondary:hover { background: rgba(255,255,255,.09); color: var(--pce-text); }

/* ── Spinner ─────────────────────────────────────────────────────────────────── */
.pce-spinner {
    display: inline-block;
    width: 14px;
    height: 14px;
    border: 2px solid rgba(0,229,122,.3);
    border-top-color: var(--pce-accent);
    border-radius: 50%;
    animation: pce-spin .7s linear infinite;
}

/* ── Tooltip ─────────────────────────────────────────────────────────────────── */
.pce-tooltip {
    position: absolute;
    background: rgba(8,12,18,0.95);
    border: 1px solid var(--pce-border2);
    border-radius: 6px;
    padding: 8px 12px;
    font-size: .72rem;
    color: var(--pce-text2);
    line-height: 1.5;
    max-width: 200px;
    z-index: 9999;
    pointer-events: none;
    backdrop-filter: blur(12px);
    box-shadow: 0 4px 20px rgba(0,0,0,.5);
    animation: pce-fadein .1s ease;
}
.pce-tooltip strong { color: var(--pce-amber); display: block; }
.pce-tooltip small  { color: var(--pce-muted); font-size: .65rem; }

/* ── Scrollbar ───────────────────────────────────────────────────────────────── */
.pce-tab-panel::-webkit-scrollbar        { width: 4px; }
.pce-tab-panel::-webkit-scrollbar-track  { background: transparent; }
.pce-tab-panel::-webkit-scrollbar-thumb  { background: var(--pce-border2); border-radius: 2px; }

/* ── Animations ──────────────────────────────────────────────────────────────── */
@keyframes pce-spin    { to { transform: rotate(360deg); } }
@keyframes pce-fadein  { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }

/* ── Accent neon line on preview wrap hover ──────────────────────────────────── */
.pce-preview-wrap::after {
    content: '';
    position: absolute;
    bottom: 0; left: 0; right: 0;
    height: 2px;
    background: linear-gradient(90deg, transparent, var(--pce-accent), transparent);
    opacity: 0;
    transition: opacity .3s;
}
.pce-preview-wrap:hover::after { opacity: 1; }