/* ==========================================
   AURAHOKI77 - PREMIUM MATTE BLACK VIP (2026)
   ========================================== */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap');

* { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Inter', 'Segoe UI', sans-serif; }

:root {
    --bg-main: #0a0a0a;
    --card-bg: #151515;
    --border-color: #222222;
    --text-primary: #ffffff;
    --text-secondary: #888888;
    --input-bg: #1e1e1e;
    --gradient-btn: linear-gradient(135deg, #ff1a1a 0%, #660000 40%, #050505 100%);
    --gradient-btn-hover: linear-gradient(135deg, #ff3333 0%, #800000 50%, #111111 100%);
    --gradient-gold: linear-gradient(to right, #bf953f, #fcf6ba, #b38728, #fbf5b7, #aa771c);
    --gradient-silver: linear-gradient(to right, #888888, #ffffff, #888888, #ffffff, #888888);
}

body { background-color: var(--bg-main); color: var(--text-primary); overflow: hidden; }

::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: var(--bg-main); }
::-webkit-scrollbar-thumb { background: #333; border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: #555; }

.app-container { display: flex; height: 100vh; overflow: hidden; }

.matte-card { background: var(--card-bg); border: 1px solid var(--border-color); box-shadow: 0 15px 35px rgba(0, 0, 0, 0.5); border-radius: 20px; }

/* --- SIDEBAR --- */
.sidebar { 
    width: 280px; min-width: 280px; flex-shrink: 0; 
    display: flex; flex-direction: column; justify-content: space-between; 
    padding: 25px 20px; z-index: 10; background: #0f0f0f; border-right: 1px solid var(--border-color); 
}

.brand { text-align: center; margin-bottom: 40px; }
.logo-container { width: 70px; height: 70px; margin: 0 auto 10px auto; display: flex; align-items: center; justify-content: center; }
.logo-container img { max-width: 100%; max-height: 100%; object-fit: contain; filter: drop-shadow(0 4px 10px rgba(255,255,255,0.05)); }

.gold-shine { font-size: 1.6rem; font-weight: 900; background: var(--gradient-gold); background-size: 200% auto; color: transparent; -webkit-background-clip: text; animation: shine 3s linear infinite; margin-bottom: 2px; letter-spacing: 0.5px; }
.silver-shine { font-size: 0.65rem; font-weight: 700; text-transform: uppercase; letter-spacing: 2px; background: var(--gradient-silver); background-size: 200% auto; color: transparent; -webkit-background-clip: text; animation: shineReverse 3s linear infinite; }

@keyframes shine { to { background-position: 200% center; } }
@keyframes shineReverse { to { background-position: -200% center; } }

.nav-menu { display: flex; flex-direction: column; gap: 8px; flex-grow: 1; }
.nav-item { 
    padding: 14px 18px; text-decoration: none; color: var(--text-secondary); 
    border-radius: 12px; font-weight: 600; font-size: 14px; 
    transition: all 0.3s cubic-bezier(0.23, 1, 0.32, 1); 
    display: flex; align-items: center; gap: 10px; white-space: nowrap; border-left: 4px solid transparent; 
}
.nav-item:hover { color: var(--text-primary); background: rgba(255,255,255,0.03); transform: translateX(5px); }
.nav-item.active { background: var(--gradient-btn); color: white; border-left: 4px solid #ff1a1a; box-shadow: 0 8px 20px rgba(255, 26, 26, 0.2); }

button { padding: 12px; border: none; border-radius: 12px; cursor: pointer; font-weight: 700; transition: all 0.3s; font-size: 14px; outline: none; }
.btn-premium { background: var(--gradient-btn); color: white; border: 1px solid #ff1a1a; letter-spacing: 1px; text-transform: uppercase; box-shadow: 0 10px 20px rgba(0, 0, 0, 0.5); }
.btn-premium:hover { background: var(--gradient-btn-hover); transform: translateY(-2px); box-shadow: 0 12px 25px rgba(255, 26, 26, 0.3); }
.btn-secondary { background: #222; border: 1px solid #444; color: white; }
.btn-secondary:hover { background: #333; }
.btn-danger { background: transparent; border: 1px solid #ff3333; color: #ff3333; }
.btn-danger:hover { background: rgba(255, 51, 51, 0.1); }
.btn-warning { background: transparent; border: 1px solid #ffaa00; color: #ffaa00; }
.btn-warning:hover { background: rgba(255, 170, 0, 0.1); }

input, select, textarea { width: 100%; padding: 14px 18px; border-radius: 12px; border: 1px solid var(--border-color); background: var(--input-bg); color: var(--text-primary); font-size: 14px; transition: 0.3s; outline: none; }
input:focus, select:focus, textarea:focus { border-color: #ff1a1a; background: #252525; box-shadow: 0 0 15px rgba(255, 0, 0, 0.1); }

table { width: 100%; border-collapse: separate; border-spacing: 0; margin-top: 10px; }
th { background: #1a1a1a; color: var(--text-secondary); font-weight: 600; font-size: 12px; text-transform: uppercase; padding: 15px; letter-spacing: 1px; border-bottom: 1px solid var(--border-color); text-align: left; }
td { padding: 15px; border-bottom: 1px solid var(--border-color); font-size: 14px; color: #ddd; }
tr:last-child td { border-bottom: none; }
tr:hover td { background: rgba(255,255,255,0.02); }

.main-content { flex-grow: 1; padding: 35px 40px; overflow-y: auto; position: relative; }
.main-content::before { content: ''; position: absolute; width: 500px; height: 500px; background: rgba(255, 0, 0, 0.02); border-radius: 50%; top: -200px; right: -200px; filter: blur(120px); z-index: -1; }
.page-section { display: none; animation: fadeUp 0.5s cubic-bezier(0.16, 1, 0.3, 1) forwards; opacity: 0; transform: translateY(20px); }
.page-section.active { display: block; }
@keyframes fadeUp { to { opacity: 1; transform: translateY(0); } }

h2.section-title { font-size: 1.8rem; font-weight: 800; margin-bottom: 25px; letter-spacing: -0.5px; }

.chat-layout { display: flex; height: 70vh; border-radius: 20px; overflow: hidden; border: 1px solid var(--border-color); }
.chat-sidebar { width: 320px; border-right: 1px solid var(--border-color); background: #111; display: flex; flex-direction: column; }
.chat-area { flex-grow: 1; display: flex; flex-direction: column; background: var(--card-bg); position: relative; }
.chat-bubble { max-width: 75%; padding: 12px 18px; border-radius: 18px; margin-bottom: 10px; font-size: 14px; line-height: 1.5; }
.my-message { align-self: flex-end; background: var(--gradient-btn); color: white; border-bottom-right-radius: 4px; }
.client-message { align-self: flex-start; background: #222; color: white; border-bottom-left-radius: 4px; border: 1px solid #333; }

.profile-avatar-wrapper { display: flex; align-items: center; gap: 20px; margin-bottom: 20px; }
.avatar-preview { width: 80px; height: 80px; border-radius: 50%; background: #222; border: 2px solid #ff1a1a; object-fit: cover; }

/* POP-UP AUTO-TEXT MENU */
.autotext-popup {
    display: none; position: absolute; bottom: 80px; left: 20px;
    background: #151515; border: 1px solid #333; border-radius: 12px;
    box-shadow: 0 15px 35px rgba(0,0,0,0.8); width: 350px;
    z-index: 100; overflow: hidden; animation: popUp 0.2s ease-out;
}
.autotext-popup.active { display: block; }
.autotext-popup-header { background: #111; padding: 12px 15px; border-bottom: 1px solid #222; font-size: 12px; color: #888; font-weight: bold; text-transform: uppercase; letter-spacing: 1px; }
.autotext-list { max-height: 250px; overflow-y: auto; }
.autotext-item { padding: 12px 15px; border-bottom: 1px solid #222; cursor: pointer; transition: background 0.2s; }
.autotext-item:hover { background: #222; }
.autotext-item:last-child { border-bottom: none; }
.autotext-shortcut { color: #ff1a1a; font-weight: bold; font-size: 13px; margin-bottom: 4px; display: block; }
.autotext-reply { color: #ccc; font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@keyframes popUp { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }