/* ===== RESET & BASE ===== */
*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }

:root {
    --sidebar-w: 240px;
    --topbar-h: 60px;
    --black: #0a0a0a;
    --black2: #111111;
    --white: #ffffff;
    --gray-50: #f9fafb;
    --gray-100: #f3f4f6;
    --gray-200: #e5e7eb;
    --gray-300: #d1d5db;
    --gray-400: #9ca3af;
    --gray-500: #6b7280;
    --gray-600: #4b5563;
    --gray-700: #374151;
    --gray-800: #1f2937;
    --gray-900: #111827;
    --accent: #111111;
    --accent-light: #374151;
    --blue: #3b82f6;
    --blue-bg: #eff6ff;
    --purple: #8b5cf6;
    --purple-bg: #f5f3ff;
    --green: #10b981;
    --green-bg: #ecfdf5;
    --orange: #f59e0b;
    --orange-bg: #fffbeb;
    --red: #ef4444;
    --radius: 12px;
    --radius-sm: 8px;
    --shadow: 0 1px 3px rgba(0,0,0,.08), 0 1px 2px rgba(0,0,0,.06);
    --shadow-md: 0 4px 6px -1px rgba(0,0,0,.07), 0 2px 4px -1px rgba(0,0,0,.06);
    --shadow-lg: 0 10px 15px -3px rgba(0,0,0,.08), 0 4px 6px -2px rgba(0,0,0,.05);
}

html, body { height:100%; font-family:'Inter',system-ui,-apple-system,sans-serif; font-size:14px; color:var(--gray-800); background:var(--gray-50); }

/* ===== LOADER BAR ===== */
.loader-bar { position:fixed; top:0; left:-100%; width:100%; height:3px; background:linear-gradient(90deg,#111,#555,#111); z-index:9999; animation:slideLoader 1.5s ease-in-out forwards; }
.loader-bar.active { animation:slideLoader 1.5s ease-in-out infinite; }
@keyframes slideLoader { 0%{left:-100%} 50%{left:0%} 100%{left:100%} }

/* ===== LOGIN PAGE ===== */
.login-page {
    min-height:100vh; display:flex; align-items:center; justify-content:center;
    background:var(--black); position:relative; overflow:hidden;
}

.login-bg-grid {
    position:absolute; inset:0;
    background-image: linear-gradient(rgba(255,255,255,.04) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.04) 1px, transparent 1px);
    background-size:40px 40px;
    mask-image:radial-gradient(ellipse 80% 80% at 50% 50%, black 40%, transparent 100%);
}

.login-box {
    position:relative; z-index:1;
    background:rgba(255,255,255,.04); backdrop-filter:blur(20px);
    border:1px solid rgba(255,255,255,.08);
    border-radius:20px; padding:48px 40px; width:100%; max-width:400px;
    box-shadow:0 25px 50px rgba(0,0,0,.5);
    text-align:center;
}

.login-logo { margin-bottom:24px; }
.login-logo img { width:64px; height:64px; border-radius:16px; object-fit:cover; box-shadow:0 8px 24px rgba(0,0,0,.4); }

.login-title { font-size:26px; font-weight:700; color:#fff; letter-spacing:-.5px; margin-bottom:6px; }
.login-sub { font-size:13px; color:rgba(255,255,255,.4); margin-bottom:36px; }

.login-form { display:flex; flex-direction:column; gap:14px; }

.input-wrap {
    display:flex; align-items:center; gap:12px;
    background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.1);
    border-radius:10px; padding:0 16px; transition:border-color .2s;
}
.input-wrap:focus-within { border-color:rgba(255,255,255,.3); }
.input-wrap svg { color:rgba(255,255,255,.4); flex-shrink:0; }
.input-wrap input {
    flex:1; background:transparent; border:none; outline:none;
    color:#fff; font-size:14px; font-family:inherit; padding:14px 0;
}
.input-wrap input::placeholder { color:rgba(255,255,255,.3); }

.btn-login {
    display:flex; align-items:center; justify-content:center; gap:8px;
    background:#fff; color:#111; border:none; border-radius:10px;
    padding:14px; font-size:14px; font-weight:600; cursor:pointer;
    transition:opacity .2s, transform .15s;
}
.btn-login:hover { opacity:.9; transform:translateY(-1px); }
.btn-login:active { transform:translateY(0); }

.btn-spinner {
    width:16px; height:16px; border:2px solid rgba(0,0,0,.2); border-top-color:#111;
    border-radius:50%; animation:spin 0.7s linear infinite;
}
@keyframes spin { to { transform:rotate(360deg); } }

/* ===== DASHBOARD LAYOUT ===== */
.dashboard-layout { display:flex; height:100vh; overflow:hidden; }

/* ===== SIDEBAR ===== */
.sidebar {
    width:var(--sidebar-w); height:100vh; background:var(--black);
    display:flex; flex-direction:column; flex-shrink:0;
    transition:width .25s cubic-bezier(.4,0,.2,1);
    overflow:hidden; position:relative; z-index:100;
}

.sidebar.collapsed { width:68px; }

.sidebar-brand {
    display:flex; align-items:center; gap:12px;
    padding:0 16px; height:var(--topbar-h); border-bottom:1px solid rgba(255,255,255,.06);
    flex-shrink:0; overflow:hidden;
}
.brand-logo { width:34px; height:34px; border-radius:8px; object-fit:cover; flex-shrink:0; }
.brand-name { font-size:15px; font-weight:700; color:#fff; white-space:nowrap; }

.sidebar-nav {
    flex:1; overflow-y:auto; overflow-x:hidden; padding:16px 10px; display:flex; flex-direction:column; gap:2px;
}
.sidebar-nav::-webkit-scrollbar { width:3px; }
.sidebar-nav::-webkit-scrollbar-track { background:transparent; }
.sidebar-nav::-webkit-scrollbar-thumb { background:rgba(255,255,255,.1); border-radius:2px; }

.nav-label {
    font-size:10px; font-weight:600; color:rgba(255,255,255,.25); letter-spacing:.08em;
    text-transform:uppercase; padding:8px 10px 6px; white-space:nowrap; overflow:hidden;
}

.nav-item {
    display:flex; align-items:center; gap:12px; padding:10px 10px;
    border-radius:8px; cursor:pointer; color:rgba(255,255,255,.55);
    font-size:13.5px; font-weight:500; transition:all .15s; white-space:nowrap;
    text-decoration:none; user-select:none;
}
.nav-item:hover { background:rgba(255,255,255,.07); color:rgba(255,255,255,.85); }
.nav-item.active { background:rgba(255,255,255,.12); color:#fff; }

.nav-icon { width:20px; height:20px; flex-shrink:0; }

.sidebar.collapsed .nav-label,
.sidebar.collapsed .nav-item span,
.sidebar.collapsed .brand-name { opacity:0; pointer-events:none; }
.sidebar.collapsed .nav-item { justify-content:center; padding:10px; }
.sidebar.collapsed .sidebar-user .user-info { display:none; }
.sidebar.collapsed .sidebar-footer { padding:12px 10px; flex-direction:column; gap:10px; }

.sidebar-footer {
    padding:16px; border-top:1px solid rgba(255,255,255,.06);
    display:flex; align-items:center; gap:10px; flex-shrink:0; overflow:hidden;
}

.sidebar-user { display:flex; align-items:center; gap:10px; flex:1; overflow:hidden; }
.user-avatar {
    width:34px; height:34px; border-radius:50%; background:rgba(255,255,255,.12);
    display:flex; align-items:center; justify-content:center;
    color:#fff; font-size:14px; font-weight:700; flex-shrink:0;
}
.user-info { display:flex; flex-direction:column; overflow:hidden; }
.user-name { font-size:13px; font-weight:600; color:#fff; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.user-role { font-size:11px; color:rgba(255,255,255,.35); }

.btn-logout {
    width:32px; height:32px; display:flex; align-items:center; justify-content:center;
    background:transparent; border:1px solid rgba(255,255,255,.1); border-radius:8px;
    color:rgba(255,255,255,.4); cursor:pointer; flex-shrink:0; transition:all .15s;
}
.btn-logout:hover { background:rgba(255,255,255,.08); color:rgba(255,255,255,.8); }

/* ===== MAIN WRAPPER ===== */
.main-wrapper { flex:1; display:flex; flex-direction:column; overflow:hidden; background:var(--gray-50); }

/* ===== TOPBAR ===== */
.topbar {
    height:var(--topbar-h); background:var(--black); border-bottom:1px solid rgba(255,255,255,.06);
    display:flex; align-items:center; justify-content:space-between;
    padding:0 24px; flex-shrink:0; gap:16px;
}

.topbar-left { display:flex; align-items:center; gap:16px; }

.menu-toggle {
    width:36px; height:36px; display:flex; align-items:center; justify-content:center;
    background:transparent; border:none; border-radius:8px; color:rgba(255,255,255,.6);
    cursor:pointer; transition:all .15s;
}
.menu-toggle:hover { background:rgba(255,255,255,.08); color:#fff; }

.breadcrumb { display:flex; align-items:center; gap:6px; }
.breadcrumb-root { font-size:13px; color:rgba(255,255,255,.35); font-weight:400; }
.breadcrumb svg { color:rgba(255,255,255,.2); }
.breadcrumb-current { font-size:14px; font-weight:600; color:#fff; }

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

.status-pill {
    display:flex; align-items:center; gap:6px; padding:5px 12px;
    background:rgba(16,185,129,.12); border:1px solid rgba(16,185,129,.2);
    border-radius:20px; font-size:12px; font-weight:500; color:#10b981;
}
.status-dot { width:6px; height:6px; border-radius:50%; background:#10b981; box-shadow:0 0 6px #10b981; animation:pulse 2s infinite; }
@keyframes pulse { 0%,100%{opacity:1} 50%{opacity:.5} }
@keyframes blink { 0%,100%{opacity:1;box-shadow:0 0 4px #dc2626} 50%{opacity:.4;box-shadow:none} }

/* ===== MAIN CONTENT ===== */
.main-content { flex:1; overflow-y:auto; padding:28px 32px; }
.main-content::-webkit-scrollbar { width:6px; }
.main-content::-webkit-scrollbar-track { background:transparent; }
.main-content::-webkit-scrollbar-thumb { background:var(--gray-300); border-radius:3px; }

/* ===== TAB CONTENT ===== */
.tab-content { display:none; animation:fadeIn .2s ease; }
.tab-content.active { display:block; }
@keyframes fadeIn { from{opacity:0;transform:translateY(6px)} to{opacity:1;transform:translateY(0)} }

/* ===== PAGE HEADER ===== */
.page-header {
    display:flex; align-items:center; justify-content:space-between;
    margin-bottom:24px; gap:16px; flex-wrap:wrap;
}
.page-title { font-size:22px; font-weight:700; color:var(--gray-900); letter-spacing:-.3px; }
.page-desc { font-size:13px; color:var(--gray-500); margin-top:3px; }

/* ===== STATS GRID ===== */
.stats-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:16px; margin-bottom:24px; }

.stat-card {
    background:#fff; border-radius:var(--radius); padding:20px;
    border:1px solid var(--gray-200); box-shadow:var(--shadow);
    display:flex; align-items:center; gap:16px;
}
.stat-icon {
    width:48px; height:48px; border-radius:12px;
    display:flex; align-items:center; justify-content:center; flex-shrink:0;
}
.stat-blue { background:var(--blue-bg); color:var(--blue); }
.stat-purple { background:var(--purple-bg); color:var(--purple); }
.stat-green { background:var(--green-bg); color:var(--green); }
.stat-orange { background:var(--orange-bg); color:var(--orange); }

.stat-info { display:flex; flex-direction:column; min-width:0; }
.stat-label { font-size:12px; color:var(--gray-500); font-weight:500; margin-bottom:4px; }
.stat-value { font-size:22px; font-weight:700; color:var(--gray-900); line-height:1; }

/* ===== CONTENT GRID ===== */
.content-grid { display:grid; gap:20px; }
.content-grid.two-col { grid-template-columns:1fr 1fr; }

/* ===== CARD ===== */
.card {
    background:#fff; border-radius:var(--radius); border:1px solid var(--gray-200);
    box-shadow:var(--shadow); padding:24px; margin-bottom:20px;
}
.card-header {
    display:flex; align-items:center; justify-content:space-between;
    margin-bottom:20px; gap:12px; flex-wrap:wrap;
}
.card-title { font-size:15px; font-weight:600; color:var(--gray-900); }
.card-sub { font-size:12px; color:var(--gray-400); }
.card-actions { display:flex; align-items:center; gap:8px; }

/* ===== FORM ===== */
.form-row { display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-bottom:0; }
.form-row.three-col { grid-template-columns:1fr 1fr 1fr; }
.form-group { margin-bottom:16px; }

.form-group label {
    display:block; margin-bottom:6px; font-size:13px; font-weight:500; color:var(--gray-700);
}

.form-group input:not([type=checkbox]),
.form-group select,
.form-group textarea {
    width:100%; padding:9px 12px; border:1px solid var(--gray-200); border-radius:var(--radius-sm);
    font-size:13.5px; font-family:inherit; color:var(--gray-800);
    background:#fff; outline:none; transition:border-color .2s, box-shadow .2s;
    -webkit-appearance:none; appearance:none;
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
    border-color:var(--gray-400); box-shadow:0 0 0 3px rgba(0,0,0,.04);
}

.form-group small { display:block; margin-top:5px; font-size:11.5px; color:var(--gray-400); }

.form-group.checkbox label { display:flex; align-items:center; gap:8px; cursor:pointer; font-weight:400; color:var(--gray-700); }
.form-group.checkbox input { width:16px; height:16px; accent-color:#111; }

/* ===== BUTTONS ===== */
.btn-primary {
    display:inline-flex; align-items:center; justify-content:center; gap:8px;
    background:var(--black); color:#fff; border:none; border-radius:var(--radius-sm);
    padding:10px 20px; font-size:13.5px; font-weight:600; font-family:inherit;
    cursor:pointer; transition:opacity .15s, transform .15s;
}
.btn-primary:hover { opacity:.85; }
.btn-primary:active { transform:scale(.99); }
.btn-primary.full-width { width:100%; }

.btn-secondary {
    display:inline-flex; align-items:center; justify-content:center; gap:6px;
    background:#fff; color:var(--gray-700); border:1px solid var(--gray-200);
    border-radius:var(--radius-sm); padding:9px 16px;
    font-size:13px; font-weight:500; font-family:inherit; cursor:pointer; transition:all .15s;
}
.btn-secondary:hover { background:var(--gray-50); border-color:var(--gray-300); }
.btn-secondary.btn-sm { padding:7px 12px; font-size:12px; }

.btn-icon {
    width:34px; height:34px; display:flex; align-items:center; justify-content:center;
    background:#fff; border:1px solid var(--gray-200); border-radius:var(--radius-sm);
    cursor:pointer; color:var(--gray-500); transition:all .15s;
}
.btn-icon:hover { background:var(--gray-50); color:var(--gray-700); }

/* ===== FILE UPLOAD ===== */
.file-upload { display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.btn-upload {
    display:inline-flex; align-items:center; gap:6px;
    background:#fff; border:1px solid var(--gray-200); color:var(--gray-700);
    padding:8px 14px; border-radius:var(--radius-sm);
    font-size:12.5px; font-weight:500; font-family:inherit; cursor:pointer; transition:all .15s;
}
.btn-upload:hover { background:var(--gray-50); }
.btn-upload-submit {
    background:var(--black); color:#fff; border:none;
    padding:8px 14px; border-radius:var(--radius-sm);
    font-size:12.5px; font-weight:500; font-family:inherit; cursor:pointer;
}
#file-name, #animation-file-name, #apk-file-name { font-size:12.5px; color:var(--gray-500); }

/* ===== INFO BOX ===== */
.info-box {
    background:var(--gray-50); border:1px solid var(--gray-200);
    border-radius:var(--radius-sm); padding:16px; margin-top:16px;
    font-size:13px; line-height:1.7;
}

/* ===== PROGRESS BAR ===== */
.memory-progress { margin-bottom:16px; }
.progress-bar { width:100%; height:8px; background:var(--gray-100); border-radius:4px; overflow:hidden; margin-bottom:8px; }
.progress-fill { height:100%; background:linear-gradient(90deg,#111,#555); border-radius:4px; transition:width .5s; width:0%; }
.memory-info { font-size:13px; color:var(--gray-600); display:flex; align-items:center; flex-wrap:wrap; gap:4px; }

/* ===== SERVER DETAIL GRID ===== */
.server-detail-grid { display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-top:16px; }
.server-detail { background:var(--gray-50); border-radius:var(--radius-sm); padding:12px 14px; border:1px solid var(--gray-100); }
.detail-label { display:block; font-size:11px; color:var(--gray-400); text-transform:uppercase; letter-spacing:.05em; font-weight:600; margin-bottom:4px; }
.detail-val { display:block; font-size:15px; font-weight:600; color:var(--gray-800); }

/* ===== SECURITY GRID ===== */
.security-grid { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.security-card {
    background:var(--gray-50); border-radius:var(--radius-sm); padding:14px 16px;
    border:1px solid var(--gray-100); display:flex; flex-direction:column; gap:4px;
}
.security-card.status-secure { background:#ecfdf5; border-color:#d1fae5; }
.security-label { font-size:11px; color:var(--gray-400); font-weight:600; text-transform:uppercase; letter-spacing:.05em; }
.security-val { font-size:20px; font-weight:700; color:var(--gray-800); }
.security-val.warn { color:#f59e0b; }
.security-val.danger { color:#ef4444; }

/* ===== GIFTS GRID ===== */
.gifts-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 16px;
}

.gift-card {
    position: relative;
    background: linear-gradient(145deg, #1a1a2e 0%, #16213e 50%, #0f3460 100%);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 16px;
    padding: 16px 12px 12px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    cursor: default;
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
    overflow: hidden;
    box-shadow: 0 4px 20px rgba(0,0,0,0.3);
}

.gift-card::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(255,255,255,0.05) 0%, transparent 60%);
    border-radius: 16px;
    pointer-events: none;
}

.gift-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 40px rgba(0,0,0,0.5);
    border-color: rgba(255,255,255,0.18);
}

.gift-card:hover .gift-card-actions { opacity: 1; }

/* SVG preview area */
.gift-img-wrap {
    width: 72px;
    height: 72px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255,255,255,0.06);
    border-radius: 14px;
    border: 1px solid rgba(255,255,255,0.08);
    overflow: hidden;
    flex-shrink: 0;
    transition: background 0.2s;
}
.gift-card:hover .gift-img-wrap { background: rgba(255,255,255,0.1); }
.gift-img-wrap img { width: auto; height: auto; object-fit: contain; }
.gift-img-placeholder { font-size: 28px; opacity: 0.3; }

/* Gift info */
.gift-info { width: 100%; text-align: center; }
.gift-info-name {
    font-size: 12px;
    font-weight: 700;
    color: #fff;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    letter-spacing: 0.2px;
    margin-bottom: 2px;
}
.gift-info-id {
    font-size: 10px;
    color: rgba(255,255,255,0.35);
    font-family: 'Courier New', monospace;
}

/* Coins pill */
.gift-coins-pill {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: rgba(255,193,7,0.12);
    border: 1px solid rgba(255,193,7,0.25);
    border-radius: 20px;
    padding: 3px 10px;
    font-size: 11px;
    font-weight: 700;
    color: #ffd54f;
    letter-spacing: 0.3px;
}
.gift-coins-pill span { font-size: 10px; }

/* Meta tags row */
.gift-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    justify-content: center;
    width: 100%;
}
.gift-tag {
    font-size: 9px;
    font-weight: 600;
    padding: 2px 7px;
    border-radius: 20px;
    letter-spacing: 0.3px;
    text-transform: uppercase;
}
.gift-tag-anim { background: rgba(139,92,246,0.18); color: #a78bfa; border: 1px solid rgba(139,92,246,0.3); }
.gift-tag-audio { background: rgba(16,185,129,0.15); color: #34d399; border: 1px solid rgba(16,185,129,0.25); }
.gift-tag-level { background: rgba(245,158,11,0.15); color: #fbbf24; border: 1px solid rgba(245,158,11,0.25); }
.gift-tag-inactive { background: rgba(239,68,68,0.15); color: #f87171; border: 1px solid rgba(239,68,68,0.25); }
.gift-tag-order { background: rgba(255,255,255,0.06); color: rgba(255,255,255,0.4); border: 1px solid rgba(255,255,255,0.1); }

/* Floating badges */
.gift-badge-new {
    position: absolute;
    top: 9px;
    left: 9px;
    background: linear-gradient(135deg, #ff6b35, #ff8e00);
    color: #fff;
    font-size: 8px;
    font-weight: 800;
    padding: 2px 7px;
    border-radius: 6px;
    letter-spacing: 0.6px;
    text-transform: uppercase;
    box-shadow: 0 2px 8px rgba(255,107,53,0.5);
    z-index: 2;
}
.gift-badge-exclusive {
    position: absolute;
    top: 9px;
    right: 9px;
    background: linear-gradient(135deg, #8b5cf6, #6d28d9);
    color: #fff;
    font-size: 7px;
    font-weight: 800;
    padding: 2px 6px;
    border-radius: 6px;
    letter-spacing: 0.4px;
    text-transform: uppercase;
    box-shadow: 0 2px 8px rgba(139,92,246,0.5);
    z-index: 2;
}

/* Actions overlay */
.gift-card-actions {
    display: flex;
    gap: 6px;
    width: 100%;
    opacity: 0;
    transition: opacity 0.2s ease;
    margin-top: 2px;
}
.gift-btn-delete {
    flex: 1;
    padding: 6px 0;
    background: rgba(239,68,68,0.15);
    border: 1px solid rgba(239,68,68,0.3);
    border-radius: 8px;
    color: #f87171;
    font-size: 10px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.15s;
    font-family: inherit;
}
.gift-btn-delete:hover { background: rgba(239,68,68,0.3); border-color: rgba(239,68,68,0.6); }

.gift-btn-edit {
    flex: 1;
    padding: 6px 0;
    background: rgba(59,130,246,0.15);
    border: 1px solid rgba(59,130,246,0.3);
    border-radius: 8px;
    color: #60a5fa;
    font-size: 10px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.15s;
    font-family: inherit;
}
.gift-btn-edit:hover { background: rgba(59,130,246,0.3); border-color: rgba(59,130,246,0.6); }

.gift-btn-removenew {
    flex: 1;
    padding: 6px 0;
    background: rgba(255,150,0,0.15);
    border: 1px solid rgba(255,150,0,0.3);
    border-radius: 8px;
    color: #fbbf24;
    font-size: 10px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.15s;
    font-family: inherit;
}
.gift-btn-removenew:hover { background: rgba(255,150,0,0.3); border-color: rgba(255,150,0,0.6); }

/* Delete btn (old compat) */
.delete-btn {
    position: absolute;
    top: 6px;
    right: 6px;
    background: rgba(239,68,68,0.12);
    border: none;
    border-radius: 6px;
    width: 24px; height: 24px;
    display: flex; align-items: center; justify-content: center;
    cursor: pointer;
    font-size: 12px;
    opacity: 0;
    transition: opacity 0.2s;
    z-index: 3;
}
.gift-card:hover .delete-btn { opacity: 1; }

/* Badge styles (old compat) */
.badge { border-radius: 4px; font-size: 9px; font-weight: 700; padding: 2px 6px; letter-spacing: 0.4px; text-transform: uppercase; }
.badge.new { background: linear-gradient(135deg, #ff6b35, #ff8e00); color: #fff; }
.badge.exclusive { background: linear-gradient(135deg, #8b5cf6, #6d28d9); color: #fff; }
.badge.inactive { background: rgba(239,68,68,0.15); color: #f87171; border: 1px solid rgba(239,68,68,0.3); }


/* ===== GIFT CARD PREVIEW ===== */
.card-preview-container { display:flex; align-items:flex-start; gap:16px; flex-wrap:wrap; }
.app-card-mock {
    width:85px; height:94px; background:#fff; border:1px solid var(--gray-200);
    border-radius:10px; display:flex; flex-direction:column; align-items:center;
    justify-content:center; position:relative; overflow:hidden; flex-shrink:0;
    box-shadow:var(--shadow);
}
.svg-container { min-width:45px; min-height:45px; display:flex; align-items:center; justify-content:center; }
.badge-novo {
    position:absolute; top:4px; right:0;
    background:#ff3b30; color:#fff; font-size:7px; font-weight:700;
    padding:2px 4px; border-radius:2px 0 0 2px; letter-spacing:.05em;
}
.price-container { display:flex; align-items:center; gap:3px; margin-top:4px; font-size:11px; font-weight:600; color:var(--gray-800); }
.preview-instructions { font-size:12px; color:var(--gray-500); line-height:1.7; }

/* ===== EMPTY STATE ===== */
.empty-state {
    display:flex; flex-direction:column; align-items:center; justify-content:center;
    padding:48px 16px; gap:12px; color:var(--gray-400);
}
.empty-state p { font-size:14px; }

/* ===== WITHDRAWALS GRID ===== */
.withdrawals-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(300px,1fr)); gap:16px; }

/* ===== EMOJI PICKER ===== */
.emoji-picker { display:flex; flex-wrap:wrap; gap:6px; padding:10px 12px; background:var(--gray-50); border:1px solid var(--gray-200); border-radius:var(--radius-sm); }
.emoji-btn { width:36px; height:36px; border:2px solid transparent; border-radius:8px; background:#fff; font-size:18px; cursor:pointer; transition:all .15s; display:flex; align-items:center; justify-content:center; }
.emoji-btn:hover { background:var(--gray-100); border-color:var(--gray-300); }
.emoji-btn.active { border-color:#111; background:#fff; box-shadow:0 0 0 3px rgba(0,0,0,.06); }
.emoji-none { font-size:13px; color:var(--gray-400); font-weight:600; }

/* ===== NOTIF PREVIEW ===== */
.notif-preview { border:1px solid var(--gray-200); border-radius:var(--radius-sm); overflow:hidden; margin-bottom:16px; background:#fff; }
.notif-preview-bar { background:var(--gray-50); padding:8px 14px; border-bottom:1px solid var(--gray-200); display:flex; align-items:center; justify-content:space-between; }
.notif-preview-body { display:flex; align-items:flex-start; gap:12px; padding:14px; }
.notif-preview-icon { width:36px; height:36px; background:#e5e7eb; border-radius:8px; display:flex; align-items:center; justify-content:center; font-size:18px; flex-shrink:0; }
.notif-preview-text { flex:1; min-width:0; }
.notif-preview-title { font-size:13px; font-weight:600; color:#111; margin-bottom:3px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.notif-preview-msg { font-size:12px; color:var(--gray-500); line-height:1.4; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }

/* ===== SERVICES GRID ===== */
.services-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(320px,1fr)); gap:20px; }

.service-card {
    background:#fff; border-radius:var(--radius); border:1px solid var(--gray-200);
    padding:24px; display:flex; align-items:center; gap:20px;
    text-decoration:none; color:inherit; transition:all .3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow:var(--shadow); position:relative; overflow:hidden;
}

.service-card::after {
    content:''; position:absolute; inset:0; background:currentColor; opacity:0; transition:opacity .3s; pointer-events:none;
}
.service-card:hover { transform:translateY(-5px); border-color:var(--gray-300); box-shadow:var(--shadow-lg); }
.service-card:active { transform:translateY(-2px); }

.service-icon {
    width:56px; height:56px; border-radius:14px; background:var(--gray-50);
    display:flex; align-items:center; justify-content:center; color:var(--gray-700);
    transition:all .3s ease; flex-shrink:0;
}
.service-card:hover .service-icon { transform:scale(1.1) rotate(5deg); }

.service-content { flex:1; min-width:0; }
.service-name { font-size:17px; font-weight:700; color:var(--gray-900); margin-bottom:4px; letter-spacing:-0.01em; }
.service-desc { font-size:13px; color:var(--gray-500); line-height:1.5; }

.service-arrow { color:var(--gray-300); transition:all .3s ease; }
.service-card:hover .service-arrow { transform:translateX(5px); color:var(--gray-900); }

/* Service-specific accents */
.service-card.agora { color: #3b82f6; }
.service-card.agora .service-icon { background:#eff6ff; color:#3b82f6; }
.service-card.fly { color: #8b5cf6; }
.service-card.fly .service-icon { background:#f5f3ff; color:#8b5cf6; }
.service-card.mongodb { color: #10b981; }
.service-card.mongodb .service-icon { background:#ecfdf5; color:#10b981; }
.service-card.firebase { color: #f59e0b; }
.service-card.firebase .service-icon { background:#fffbeb; color:#f59e0b; }
.service-card.bunny { color: #ef4444; }
.service-card.bunny .service-icon { background:#fef2f2; color:#ef4444; }

/* ===== RESPONSIVE ===== */
@media (max-width: 1100px) {
    .stats-grid { grid-template-columns:repeat(2,1fr); }
}
@media (max-width: 900px) {
    .content-grid.two-col { grid-template-columns:1fr; }
}
@media (max-width: 768px) {
    :root { --sidebar-w:0px; }
    .sidebar { position:fixed; top:0; left:-240px; width:240px; z-index:200; transition:left .25s; }
    .sidebar.open { left:0; }
    .main-wrapper { margin-left:0; }
    .main-content { padding:20px 16px; }
    .stats-grid { grid-template-columns:1fr 1fr; }
    .topbar { padding:0 16px; }
}

/* ===== UTILITIES ===== */
.full-width { width: 100% !important; }
.btn-secondary { background: #f3f4f6; color: #374151; border: 1px solid #d1d5db; border-radius: 8px; cursor: pointer; transition: background 0.2s; }
.btn-secondary:hover { background: #e5e7eb; }