/* PLN Suporte — Tema combinando com hqporno (#fe5901 / #fd8000) */
.pln-sup-admin-front,
.pln-sup-wrap,
.pln-sup-guest {
    --plns-brand: #fe5901;
    --plns-brand-2: #fd8000;
    --plns-brand-3: #ffb13b;
    --plns-bg: #18181b;
    --plns-card: #1f1f24;
    --plns-card-2: #28282f;
    --plns-border: rgba(254, 89, 1, 0.18);
    --plns-border-soft: rgba(255, 255, 255, 0.08);
    --plns-text: #f0f0f0;
    --plns-muted: rgba(255, 255, 255, 0.55);
    --plns-danger: #ef4444;
    --plns-success: #22c55e;
}

/* Container externo escuro pra envolver o widget (fica bonito sobre tema claro) */
.pln-sup-admin-front,
.pln-sup-wrap-outer {
    background: linear-gradient(180deg, #18181b 0%, #0e0e10 100%) !important;
    border-radius: 16px !important;
    padding: 30px 24px !important;
    box-shadow: 0 10px 40px rgba(0,0,0,0.4) !important;
}

@keyframes plns-fadeIn { from { opacity:0; transform:translateY(8px); } to { opacity:1; transform:translateY(0); } }
@keyframes plns-typing { 0%,80%,100% { transform:scale(.3); opacity:.3; } 40% { transform:scale(1); opacity:1; } }
@keyframes plns-pulse { 0%,100% { box-shadow:0 0 0 0 rgba(34,197,94,.55); } 50% { box-shadow:0 0 0 6px rgba(34,197,94,0); } }
@keyframes plns-glow { 0%,100% { box-shadow:0 0 0 0 rgba(254,89,1,.4); } 50% { box-shadow:0 0 0 6px rgba(254,89,1,0); } }

/* ─────────── ADMIN FRONT LIST ─────────── */
/* Reset de itens dentro do plugin pra evitar herança do tema */
.pln-sup-admin-front *,
.pln-sup-wrap *,
.pln-sup-guest * { box-sizing: border-box !important; }

.pln-sup-admin-front {
    max-width: 1100px !important;
    margin: 20px auto 60px !important;
    padding: 0 16px !important;
    color: var(--plns-text) !important;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
    display: block !important;
}
.pln-sup-admin-head {
    margin-bottom: 22px;
}
.pln-sup-admin-head h1 {
    margin: 0 0 6px 0;
    font-size: 1.8rem;
    font-weight: 900;
    background: linear-gradient(135deg, var(--plns-brand), var(--plns-brand-3));
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    letter-spacing: -0.5px;
}
.pln-sup-admin-head h1 i { color: var(--plns-brand); -webkit-text-fill-color: var(--plns-brand); }
.pln-sup-admin-head p {
    margin: 0;
    color: var(--plns-muted);
    font-size: 0.92rem;
}
.pln-sup-admin-filters {
    display: flex; gap: 10px; margin-bottom: 20px;
    flex-wrap: wrap;
}
.pln-sup-admin-filters input,
.pln-sup-admin-filters select {
    background: var(--plns-card-2);
    border: 1px solid var(--plns-border-soft);
    color: var(--plns-text);
    padding: 10px 14px;
    border-radius: 10px;
    font-size: 0.92rem;
    outline: none;
    font-family: inherit;
}
.pln-sup-admin-filters input { flex: 1; min-width: 220px; }
.pln-sup-admin-filters input:focus,
.pln-sup-admin-filters select:focus { border-color: var(--plns-brand); }
.pln-sup-admin-grid {
    display: grid !important; gap: 10px !important;
}
.pln-sup-tk-row {
    display: flex !important;
    align-items: center !important;
    gap: 14px !important;
    padding: 14px 16px !important;
    background: var(--plns-card) !important;
    border: 1px solid var(--plns-border-soft) !important;
    border-radius: 14px !important;
    text-decoration: none !important;
    color: var(--plns-text) !important;
    transition: transform 0.15s, border-color 0.15s, box-shadow 0.15s !important;
    animation: plns-fadeIn 0.3s ease !important;
}
.pln-sup-tk-row:hover {
    transform: translateY(-2px);
    border-color: var(--plns-brand);
    box-shadow: 0 6px 20px rgba(254, 89, 1, 0.2);
    color: var(--plns-text);
}
.pln-sup-tk-row.is-waiting {
    border-left: 4px solid var(--plns-danger);
    background: linear-gradient(90deg, rgba(239,68,68,0.08), var(--plns-card));
}
.pln-sup-tk-row.is-vip {
    border-left: 4px solid var(--plns-brand);
}
.pln-sup-tk-row.is-vip.is-waiting {
    border-left: 4px solid var(--plns-danger);
    box-shadow: inset 4px 0 0 var(--plns-brand);
    padding-left: 18px;
}
.pln-sup-tk-avatar {
    position: relative !important;
    width: 56px !important; height: 56px !important;
    flex-shrink: 0 !important;
    display: block !important;
}
.pln-sup-tk-avatar img {
    width: 56px !important; height: 56px !important;
    border-radius: 50% !important;
    object-fit: cover !important;
    border: 2px solid var(--plns-border-soft) !important;
    max-width: 56px !important;
    display: block !important;
}
.pln-sup-tk-info { flex: 1 !important; min-width: 0 !important; }
.pln-sup-tk-name {
    font-weight: 600 !important;
    font-size: 0.98rem !important;
    color: #fff !important;
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    margin-bottom: 2px !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
    text-shadow: none !important;
    -webkit-text-stroke: 0 !important;
    -webkit-text-fill-color: #fff !important;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
}
.pln-sup-tk-row .pln-sup-tk-name a,
.pln-sup-tk-row { text-decoration: none !important; }
.pln-sup-tk-preview {
    font-size: 0.85rem !important;
    color: rgba(255,255,255,0.7) !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}
.pln-sup-tk-meta {
    text-align: right !important;
    font-size: 0.75rem !important;
    color: var(--plns-muted) !important;
    flex-shrink: 0 !important;
}
.pln-sup-tk-vip {
    position: absolute;
    top: -4px; right: -4px;
    font-size: 18px;
    filter: drop-shadow(0 1px 3px rgba(0,0,0,.5));
}
.pln-sup-tk-info {
    flex: 1;
    min-width: 0;
}
.pln-sup-tk-name {
    font-weight: 700;
    font-size: 1.02rem;
    color: #fff;
    display: flex; align-items: center; gap: 8px;
    margin-bottom: 2px;
}
.pln-sup-tk-tag-vip {
    background: linear-gradient(135deg, var(--plns-brand), var(--plns-brand-3));
    color: #000;
    font-size: 0.65rem;
    font-weight: 900;
    padding: 2px 8px;
    border-radius: 10px;
    letter-spacing: 0.5px;
}
.pln-sup-tk-unread {
    background: var(--plns-danger);
    color: #fff;
    font-size: 0.7rem;
    font-weight: 800;
    padding: 2px 8px;
    border-radius: 12px;
    margin-left: auto;
}
.pln-sup-tk-email {
    font-size: 0.78rem;
    color: var(--plns-muted);
    margin-bottom: 4px;
}
.pln-sup-tk-preview {
    font-size: 0.85rem;
    color: rgba(255,255,255,0.7);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}
.pln-sup-tk-meta {
    text-align: right;
    font-size: 0.75rem;
    color: var(--plns-muted);
    flex-shrink: 0;
}
.pln-sup-tk-status {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 12px;
    font-size: 0.68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 4px;
}
.pln-sup-tk-status-aguardando { background: rgba(239,68,68,0.15); color: #ef4444; }
.pln-sup-tk-status-respondido { background: rgba(34,197,94,0.12); color: #22c55e; }
.pln-sup-tk-status-aberto     { background: rgba(254,89,1,0.12); color: var(--plns-brand); }
.pln-sup-tk-status-fechado    { background: rgba(160,160,160,0.12); color: #999; }
.pln-sup-tk-status-resolvido  { background: rgba(34,197,94,0.12); color: #22c55e; }

.pln-sup-empty {
    background: var(--plns-card);
    border: 1px solid var(--plns-border-soft);
    border-radius: 14px;
    padding: 60px 30px;
    text-align: center;
    color: var(--plns-text);
}
.pln-sup-empty-icon { font-size: 56px; margin-bottom: 14px; opacity: 0.6; }
.pln-sup-empty h3 { margin: 0 0 8px 0; font-size: 1.2rem; }
.pln-sup-empty p { margin: 0; color: var(--plns-muted); }

/* ─────────── CHAT VIEW ─────────── */
.pln-sup-back {
    max-width: 900px;
    margin: 16px auto 8px;
    padding: 0 16px;
}
.pln-sup-back a {
    color: var(--plns-brand);
    text-decoration: none;
    font-weight: 700;
    font-size: 0.9rem;
}
.pln-sup-back a:hover { color: var(--plns-brand-3); }

.pln-sup-wrap {
    max-width: 900px !important;
    margin: 16px auto 40px !important;
    background: #1f1f24 !important;
    border: 1px solid var(--plns-border-soft) !important;
    border-radius: 16px !important;
    overflow: hidden !important;
    display: flex !important;
    flex-direction: column !important;
    height: 70vh !important;
    min-height: 500px !important;
    color: var(--plns-text) !important;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4) !important;
}

.pln-sup-header {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 16px 20px;
    background: linear-gradient(135deg, rgba(254,89,1,0.06) 0%, rgba(0,0,0,0.3) 100%);
    border-bottom: 1px solid var(--plns-border);
    flex-wrap: wrap;
}
.pln-sup-header-avatar {
    position: relative;
    width: 56px; height: 56px;
}
.pln-sup-header-avatar img {
    width: 56px; height: 56px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid var(--plns-brand);
}
.pln-sup-vip-star {
    position: absolute;
    top: -4px; right: -4px;
    font-size: 18px;
    filter: drop-shadow(0 1px 3px rgba(0,0,0,.5));
}
.pln-sup-header-info { flex: 1 !important; min-width: 180px !important; }
.pln-sup-header-info h2,
.pln-sup-wrap .pln-sup-header-info h2,
.pln-sup-wrap h2.pln-sup-header-info,
.pln-sup-header h2 {
    margin: 0 0 4px 0 !important;
    font-size: 1.1rem !important;
    font-weight: 600 !important;
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    color: #fff !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
    text-shadow: none !important;
    -webkit-text-stroke: 0 !important;
    line-height: 1.3 !important;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
    background: none !important;
    -webkit-background-clip: initial !important;
    background-clip: initial !important;
    -webkit-text-fill-color: #fff !important;
}
.pln-sup-header-info p {
    margin: 0;
    font-size: 0.82rem;
    color: var(--plns-muted);
}
.pln-sup-badge-vip {
    display: inline-block;
    padding: 2px 10px;
    background: linear-gradient(135deg, var(--plns-brand) 0%, var(--plns-brand-3) 100%);
    color: #000;
    font-size: 0.7rem;
    font-weight: 900;
    border-radius: 12px;
    letter-spacing: 0.5px;
}
.pln-sup-header-status {
    display: flex; align-items: center; gap: 6px;
    font-size: 0.8rem;
    color: var(--plns-muted);
}
.pln-sup-dot {
    width: 9px; height: 9px;
    border-radius: 50%;
    background: var(--plns-success);
}
.pln-sup-dot-online { animation: plns-pulse 2s infinite; }
.pln-sup-header-actions {
    display: flex; flex-wrap: wrap; gap: 6px;
    width: 100%;
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid var(--plns-border-soft);
}
.pln-sup-act-btn {
    background: rgba(254,89,1,0.12);
    border: 1px solid rgba(254,89,1,0.3);
    color: var(--plns-brand);
    padding: 6px 12px;
    border-radius: 8px;
    font-size: 0.78rem;
    font-weight: 700;
    cursor: pointer;
    transition: background 0.15s;
    font-family: inherit;
}
.pln-sup-act-btn:hover {
    background: rgba(254,89,1,0.25);
}
.pln-sup-act-btn.danger {
    background: rgba(239,68,68,0.1);
    border-color: rgba(239,68,68,0.3);
    color: #ff5050;
}
.pln-sup-act-btn.danger:hover {
    background: rgba(239,68,68,0.25);
}

.pln-sup-messages {
    flex: 1;
    overflow-y: auto;
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    scroll-behavior: smooth;
}
.pln-sup-messages::-webkit-scrollbar { width: 6px; }
.pln-sup-messages::-webkit-scrollbar-thumb { background: rgba(254,89,1,.25); border-radius: 3px; }

.pln-sup-msg {
    display: flex;
    gap: 10px;
    align-items: flex-end;
    animation: plns-fadeIn .25s ease;
    max-width: 80%;
}
.pln-sup-msg-self {
    align-self: flex-end;
    flex-direction: row-reverse;
}
.pln-sup-msg-avatar img {
    width: 32px; height: 32px;
    border-radius: 50%;
    object-fit: cover;
}
.pln-sup-msg-bubble {
    background: var(--plns-card-2);
    padding: 10px 14px;
    border-radius: 16px;
    border: 1px solid var(--plns-border-soft);
    min-width: 80px;
    max-width: 100%;
    word-wrap: break-word;
}
.pln-sup-msg-self .pln-sup-msg-bubble {
    background: linear-gradient(135deg, var(--plns-brand) 0%, var(--plns-brand-2) 100%);
    border-color: transparent;
    color: #1a1a1a;
}
.pln-sup-msg-self .pln-sup-msg-bubble .pln-sup-msg-author,
.pln-sup-msg-self .pln-sup-msg-bubble .pln-sup-msg-time { color: rgba(0,0,0,.7); }
.pln-sup-msg-author {
    font-size: 0.72rem;
    font-weight: 800;
    color: var(--plns-brand);
    margin-bottom: 4px;
    display: flex; align-items: center; gap: 6px;
}
.pln-sup-tag-admin {
    background: var(--plns-brand);
    color: #000;
    padding: 1px 6px;
    border-radius: 8px;
    font-size: 0.6rem;
    font-weight: 900;
    letter-spacing: 0.5px;
}
.pln-sup-msg-body {
    font-size: 0.92rem;
    line-height: 1.45;
    color: inherit;
}
.pln-sup-msg-body strong { font-weight: 800; }
.pln-sup-msg-body a {
    color: var(--plns-brand);
    text-decoration: none;
    font-weight: 700;
    padding: 1px 6px;
    background: rgba(254, 89, 1, 0.1);
    border-radius: 6px;
    border: 1px solid rgba(254, 89, 1, 0.2);
}
.pln-sup-msg-self .pln-sup-msg-body a {
    background: rgba(0, 0, 0, 0.15);
    border-color: rgba(0, 0, 0, 0.2);
    color: #1a1a1a;
}
.pln-sup-msg-body img {
    max-width: 100%;
    max-height: 280px;
    border-radius: 10px;
    margin-top: 6px;
    cursor: zoom-in;
    display: block;
}
.pln-sup-msg-time {
    font-size: 0.7rem;
    color: var(--plns-muted);
    margin-top: 6px;
    display: flex; justify-content: space-between; align-items: center;
}
.pln-sup-del {
    background: none;
    border: none;
    color: rgba(255, 80, 80, 0.7);
    cursor: pointer;
    font-size: 16px;
    padding: 0 4px;
    line-height: 1;
    display: none;
}
.pln-sup-msg:hover .pln-sup-del { display: inline-block; }
.pln-sup-del:hover { color: #ff5050; }

.pln-sup-typing {
    display: none;
    align-items: center;
    gap: 10px;
    padding: 8px 20px;
    color: var(--plns-muted);
    font-size: 0.78rem;
}
.pln-sup-typing.active { display: flex; }
.pln-sup-typing-dots { display: flex; gap: 3px; }
.pln-sup-typing-dots span {
    width: 6px; height: 6px;
    border-radius: 50%;
    background: var(--plns-brand);
    animation: plns-typing 1.4s infinite;
}
.pln-sup-typing-dots span:nth-child(2) { animation-delay: .2s; }
.pln-sup-typing-dots span:nth-child(3) { animation-delay: .4s; }

.pln-sup-composer {
    display: flex !important;
    gap: 10px !important;
    padding: 14px 16px !important;
    background: rgba(0, 0, 0, 0.4) !important;
    border-top: 1px solid var(--plns-border-soft) !important;
    align-items: center !important;
    width: 100% !important;
    box-sizing: border-box !important;
}
.pln-sup-composer textarea,
.pln-sup-composer textarea#pln-sup-input,
.pln-sup-wrap textarea#pln-sup-input,
textarea#pln-sup-input {
    flex: 1 1 auto !important;
    width: 100% !important;
    height: 44px !important;
    background: rgba(255, 255, 255, 0.05) !important;
    border: 1px solid var(--plns-border-soft) !important;
    border-radius: 14px !important;
    padding: 11px 14px !important;
    color: #fff !important;
    font-family: inherit !important;
    font-size: 0.95rem !important;
    resize: none !important;
    outline: none !important;
    max-height: 120px !important;
    min-height: 44px !important;
    line-height: 1.4 !important;
    box-sizing: border-box !important;
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    appearance: none !important;
    margin: 0 !important;
    box-shadow: none !important;
    display: block !important;
    overflow-y: hidden !important;
    overflow-x: hidden !important;
    overflow: hidden !important;
    scrollbar-width: none !important;
    -ms-overflow-style: none !important;
    vertical-align: middle !important;
}
/* Mata scrollbars nativas até a textarea precisar de scroll real (quando passa 120px) */
.pln-sup-composer textarea#pln-sup-input::-webkit-scrollbar { width: 0 !important; height: 0 !important; display: none !important; }
.pln-sup-composer textarea#pln-sup-input::-webkit-inner-spin-button,
.pln-sup-composer textarea#pln-sup-input::-webkit-outer-spin-button { -webkit-appearance: none !important; display: none !important; margin: 0 !important; }
.pln-sup-composer textarea#pln-sup-input:focus,
.pln-sup-wrap textarea#pln-sup-input:focus {
    border-color: var(--plns-brand) !important;
    background: rgba(255, 255, 255, 0.08) !important;
    outline: none !important;
    box-shadow: none !important;
}
/* Quando autosize cresce além de uma linha, libera scroll mas com scrollbar fina */
.pln-sup-composer textarea#pln-sup-input.is-multiline {
    overflow-y: auto !important;
    scrollbar-width: thin !important;
}
.pln-sup-composer textarea#pln-sup-input.is-multiline::-webkit-scrollbar { width: 4px !important; display: block !important; }
.pln-sup-composer textarea#pln-sup-input.is-multiline::-webkit-scrollbar-thumb { background: rgba(254,89,1,.4) !important; border-radius: 2px !important; }
.pln-sup-send {
    width: 44px; height: 44px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--plns-brand), var(--plns-brand-2));
    color: #000;
    border: none;
    cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    transition: transform 0.15s, filter 0.15s;
    flex-shrink: 0;
    box-shadow: 0 4px 12px rgba(254, 89, 1, 0.3);
}
.pln-sup-send:hover { filter: brightness(1.1); transform: scale(1.05); }
.pln-sup-send:disabled { opacity: 0.4; cursor: not-allowed; }

/* Guest */
.pln-sup-guest {
    max-width: 500px;
    margin: 60px auto;
    padding: 0 20px;
}
.pln-sup-guest-card {
    background: var(--plns-card);
    backdrop-filter: blur(20px);
    border: 1px solid var(--plns-border-soft);
    border-radius: 16px;
    padding: 40px 30px;
    text-align: center;
    color: var(--plns-text);
}
.pln-sup-guest-icon { font-size: 48px !important; margin-bottom: 16px !important; }
.pln-sup-guest-card h2,
.pln-sup-guest h2.pln-sup-guest-title {
    margin: 0 0 8px 0 !important;
    font-size: 1.15rem !important;
    color: #fff !important;
    font-weight: 600 !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
    text-shadow: none !important;
    -webkit-text-stroke: 0 !important;
    -webkit-text-fill-color: #fff !important;
    line-height: 1.3 !important;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
    background: none !important;
    background-clip: initial !important;
    -webkit-background-clip: initial !important;
}
.pln-sup-guest-card p {
    color: var(--plns-muted) !important;
    margin: 0 0 24px 0 !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
    text-shadow: none !important;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
}
.pln-sup-btn-primary {
    display: inline-block;
    padding: 12px 28px;
    background: linear-gradient(135deg, var(--plns-brand), var(--plns-brand-2));
    color: #000;
    font-weight: 800;
    text-decoration: none;
    border-radius: 10px;
    transition: filter 0.15s;
}
.pln-sup-btn-primary:hover { filter: brightness(1.1); color: #000; }

/* Mobile */
@media (max-width: 768px) {
    .pln-sup-wrap {
        margin: 0;
        height: calc(100vh - 60px);
        min-height: calc(100vh - 60px);
        border-radius: 0;
    }
    .pln-sup-msg { max-width: 92%; }
    .pln-sup-header-actions { gap: 4px; }
    .pln-sup-act-btn { font-size: 0.72rem; padding: 5px 8px; }
    .pln-sup-tk-row { padding: 12px; gap: 10px; }
    .pln-sup-tk-avatar, .pln-sup-tk-avatar img { width: 48px; height: 48px; }
    .pln-sup-tk-meta { display: none; }
}

/* WP-Admin */
.wrap.pln-sup-admin .pln-sup-admin-toolbar {
    display: flex; gap: 10px; margin: 14px 0 18px;
    flex-wrap: wrap;
}
.pln-sup-admin-list { display: grid; gap: 10px; }
.pln-sup-loading { text-align: center; padding: 40px; color: #646970; }

/* ═══════════════ USER MANAGER DRAWER ═══════════════ */
@keyframes pln-drawer-in { from { transform: translateX(100%); } to { transform: translateX(0); } }
@keyframes pln-backdrop-in { from { opacity: 0; } to { opacity: 1; } }

.pln-sup-drawer-backdrop {
    position: fixed !important;
    inset: 0 !important;
    background: rgba(0,0,0,0.7) !important;
    backdrop-filter: blur(4px) !important;
    -webkit-backdrop-filter: blur(4px) !important;
    z-index: 999998 !important;
    display: none !important;
}
.pln-sup-drawer-backdrop.open {
    display: block !important;
    animation: pln-backdrop-in .25s ease !important;
}
.pln-sup-drawer {
    position: fixed !important;
    top: 0 !important;
    right: 0 !important;
    width: 480px !important;
    max-width: 100vw !important;
    height: 100vh !important;
    background: #18181b !important;
    border-left: 1px solid rgba(254,89,1,0.2) !important;
    box-shadow: -8px 0 32px rgba(0,0,0,0.6) !important;
    z-index: 999999 !important;
    transform: translateX(100%) !important;
    transition: transform .3s cubic-bezier(.4,0,.2,1) !important;
    display: flex !important;
    flex-direction: column !important;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
    color: #f0f0f0 !important;
}
.pln-sup-drawer.open { transform: translateX(0) !important; }

.pln-sup-drawer-head {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 18px 20px !important;
    background: linear-gradient(135deg, rgba(254,89,1,0.12), rgba(0,0,0,0.3)) !important;
    border-bottom: 1px solid rgba(255,255,255,0.06) !important;
}
.pln-sup-drawer-user {
    display: flex !important;
    align-items: center !important;
    gap: 14px !important;
}
.pln-sup-drawer-user img {
    width: 56px !important; height: 56px !important;
    border-radius: 50% !important;
    object-fit: cover !important;
    border: 2px solid #fe5901 !important;
}
.pln-sup-drawer-user h3 {
    margin: 0 0 4px 0 !important;
    font-size: 1.05rem !important;
    color: #fff !important;
    font-weight: 800 !important;
    display: flex; align-items: center; gap: 8px;
}
.pln-sup-drawer-user p {
    margin: 0 !important;
    font-size: 0.78rem !important;
    color: rgba(255,255,255,0.55) !important;
}
.pln-sup-drawer-close {
    background: rgba(255,255,255,0.05) !important;
    border: 1px solid rgba(255,255,255,0.1) !important;
    color: #fff !important;
    width: 36px !important; height: 36px !important;
    border-radius: 8px !important;
    cursor: pointer !important;
    font-size: 22px !important;
    line-height: 1 !important;
    display: flex !important; align-items: center !important; justify-content: center !important;
    transition: background .15s !important;
}
.pln-sup-drawer-close:hover { background: rgba(239,68,68,0.2) !important; }

.pln-sup-drawer-tabs {
    display: flex !important;
    background: #1f1f24 !important;
    border-bottom: 1px solid rgba(255,255,255,0.06) !important;
    overflow-x: auto !important;
}
.pln-sup-drawer-tabs .pln-sup-tab {
    flex: 1 !important;
    background: none !important;
    border: none !important;
    color: rgba(255,255,255,0.55) !important;
    padding: 14px 8px !important;
    font-size: 0.85rem !important;
    font-weight: 700 !important;
    cursor: pointer !important;
    border-bottom: 2px solid transparent !important;
    transition: color .15s, border-color .15s !important;
    font-family: inherit !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
}
.pln-sup-drawer-tabs .pln-sup-tab:hover { color: #fff !important; }
.pln-sup-drawer-tabs .pln-sup-tab.active {
    color: #fe5901 !important;
    border-bottom-color: #fe5901 !important;
}

.pln-sup-drawer-body {
    flex: 1 !important;
    overflow-y: auto !important;
    padding: 22px 20px !important;
}
.pln-sup-drawer-body::-webkit-scrollbar { width: 6px; }
.pln-sup-drawer-body::-webkit-scrollbar-thumb { background: rgba(254,89,1,.3); border-radius: 3px; }

.pln-sup-drawer-msg {
    display: none;
    padding: 10px 14px !important;
    border-radius: 10px !important;
    margin-bottom: 14px !important;
    font-size: 0.88rem !important;
    font-weight: 600 !important;
    animation: plns-fadeIn .25s ease !important;
}
.pln-sup-drawer-msg.success { background: rgba(34,197,94,0.12) !important; color: #22c55e !important; border-left: 3px solid #22c55e !important; }
.pln-sup-drawer-msg.error { background: rgba(239,68,68,0.12) !important; color: #ef4444 !important; border-left: 3px solid #ef4444 !important; }
.pln-sup-drawer-msg.info { background: rgba(254,89,1,0.12) !important; color: #fe5901 !important; border-left: 3px solid #fe5901 !important; }

.pln-sup-tab-panel { display: none !important; }
.pln-sup-tab-panel.active { display: block !important; animation: plns-fadeIn .3s ease !important; }
.pln-sup-tab-panel h4 {
    margin: 0 0 14px 0 !important;
    font-size: 0.95rem !important;
    font-weight: 800 !important;
    color: #fff !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
}
.pln-sup-tab-panel h4.danger { color: #ef4444 !important; }
.pln-sup-tab-panel hr { border: none !important; border-top: 1px solid rgba(255,255,255,0.08) !important; margin: 22px 0 !important; }

.pln-sup-form { display: flex; flex-direction: column; gap: 12px; }
.pln-sup-form label {
    display: flex !important;
    flex-direction: column !important;
    gap: 5px !important;
    font-size: 0.78rem !important;
    color: rgba(255,255,255,0.6) !important;
    font-weight: 600 !important;
}
.pln-sup-form label.pln-sup-check {
    flex-direction: row !important;
    align-items: center !important;
    gap: 8px !important;
    color: rgba(255,255,255,0.85) !important;
    font-weight: 500 !important;
    font-size: 0.85rem !important;
    text-transform: none !important;
    cursor: pointer !important;
}
.pln-sup-form input[type=text],
.pln-sup-form input[type=email],
.pln-sup-form input[type=number],
.pln-sup-form input[type=datetime-local],
.pln-sup-form input[type=url],
.pln-sup-form select,
.pln-sup-form textarea {
    background: rgba(255,255,255,0.05) !important;
    border: 1px solid rgba(255,255,255,0.1) !important;
    border-radius: 10px !important;
    padding: 10px 12px !important;
    color: #fff !important;
    font-size: 0.92rem !important;
    font-family: inherit !important;
    outline: none !important;
    width: 100% !important;
    box-sizing: border-box !important;
    -webkit-appearance: none !important;
    appearance: none !important;
}
.pln-sup-form select {
    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23fe5901'%3e%3cpath d='M7 10l5 5 5-5z'/%3e%3c/svg%3e") !important;
    background-repeat: no-repeat !important;
    background-position: right 8px center !important;
    background-size: 20px !important;
    padding-right: 32px !important;
}
.pln-sup-form input:focus,
.pln-sup-form select:focus,
.pln-sup-form textarea:focus {
    border-color: #fe5901 !important;
}
.pln-sup-form input[disabled] { opacity: 0.5 !important; cursor: not-allowed !important; }
.pln-sup-form textarea { resize: vertical !important; min-height: 80px !important; }
.pln-sup-form input[type=checkbox] { width: 18px !important; height: 18px !important; accent-color: #fe5901 !important; cursor: pointer; }

.pln-sup-fieldset {
    border: 1px solid rgba(255,255,255,0.08) !important;
    border-radius: 12px !important;
    padding: 14px !important;
    margin: 0 !important;
    background: rgba(255,255,255,0.02) !important;
}
.pln-sup-fieldset legend {
    padding: 0 8px !important;
    font-size: 0.78rem !important;
    color: #fe5901 !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
}
.pln-sup-fieldset > * + * { margin-top: 10px !important; }
.pln-sup-invoice-fields { margin-top: 10px !important; }
.pln-sup-invoice-fields > * + * { margin-top: 10px !important; }

.pln-sup-form-actions {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
    margin-top: 8px !important;
}
.pln-sup-btn {
    background: rgba(255,255,255,0.06) !important;
    border: 1px solid rgba(255,255,255,0.1) !important;
    color: #fff !important;
    padding: 10px 16px !important;
    border-radius: 10px !important;
    font-size: 0.88rem !important;
    font-weight: 700 !important;
    cursor: pointer !important;
    font-family: inherit !important;
    transition: filter .15s, transform .15s !important;
}
.pln-sup-btn:hover { filter: brightness(1.15) !important; }
.pln-sup-btn.primary {
    background: linear-gradient(135deg, #fe5901, #fd8000) !important;
    border-color: transparent !important;
    color: #000 !important;
}
.pln-sup-btn.danger {
    background: rgba(239,68,68,0.15) !important;
    border-color: rgba(239,68,68,0.3) !important;
    color: #ff5050 !important;
}
.pln-sup-btn.danger:hover { background: rgba(239,68,68,0.3) !important; }

.pln-sup-plan-now {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)) !important;
    gap: 10px !important;
    margin-bottom: 18px !important;
}
.pln-sup-card {
    background: rgba(254,89,1,0.06) !important;
    border: 1px solid rgba(254,89,1,0.15) !important;
    border-radius: 12px !important;
    padding: 12px !important;
}
.pln-sup-card-muted {
    background: rgba(255,255,255,0.04) !important;
    border-color: rgba(255,255,255,0.08) !important;
}
.pln-sup-card-label {
    font-size: 0.7rem !important;
    color: rgba(255,255,255,0.5) !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    margin-bottom: 4px !important;
}
.pln-sup-card-value {
    font-size: 1rem !important;
    font-weight: 800 !important;
    color: #fff !important;
}

.pln-sup-info-list {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
}
.pln-sup-info-list li {
    padding: 8px 0 !important;
    border-bottom: 1px solid rgba(255,255,255,0.05) !important;
    font-size: 0.88rem !important;
    color: rgba(255,255,255,0.8) !important;
}
.pln-sup-info-list li:last-child { border-bottom: none !important; }
.pln-sup-info-list strong { color: rgba(255,255,255,0.5) !important; font-weight: 600 !important; margin-right: 6px !important; }

.pln-sup-pill {
    display: inline-block !important;
    padding: 2px 10px !important;
    border-radius: 10px !important;
    font-size: 0.72rem !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
}
.pln-sup-pill-success { background: rgba(34,197,94,0.15) !important; color: #22c55e !important; }
.pln-sup-pill-danger { background: rgba(239,68,68,0.15) !important; color: #ef4444 !important; }
.pln-sup-pill-muted { background: rgba(255,255,255,0.06) !important; color: rgba(255,255,255,0.5) !important; }

.pln-sup-table {
    width: 100% !important;
    border-collapse: collapse !important;
    font-size: 0.85rem !important;
}
.pln-sup-table th,
.pln-sup-table td {
    padding: 10px 8px !important;
    text-align: left !important;
    border-bottom: 1px solid rgba(255,255,255,0.06) !important;
}
.pln-sup-table th {
    color: rgba(255,255,255,0.5) !important;
    font-weight: 700 !important;
    font-size: 0.72rem !important;
    text-transform: uppercase !important;
}
.pln-sup-table td { color: #fff !important; }
.pln-sup-empty-text { color: rgba(255,255,255,0.4) !important; font-style: italic !important; padding: 20px 0 !important; text-align: center !important; }

@media (max-width: 600px) {
    .pln-sup-drawer { width: 100vw !important; }
}