/* ============================================
   components.css - Buttons, Cards, Forms,
   Tables, Badges, Modals, Tabs, Toasts
   ============================================ */

/* ---------- Buttons ---------- */
.btn {
    position:relative; display:inline-flex; align-items:center; justify-content:center; gap:9px;
    padding: 12px 24px; border-radius: 12px;
    font-size: .9rem; font-weight: 700; letter-spacing: .2px;
    white-space:nowrap; overflow:hidden;
    transition: transform var(--anim) cubic-bezier(.34,1.4,.64,1), box-shadow var(--anim), background var(--anim), color var(--anim), border-color var(--anim), opacity var(--anim);
    -webkit-tap-highlight-color: transparent;
}
.btn::before {
    content:''; position:absolute; inset:0;
    background: linear-gradient(120deg, transparent 25%, rgba(255,255,255,.28) 50%, transparent 75%);
    transform: translateX(-130%); transition: transform .7s ease;
}
.btn:hover::before { transform: translateX(130%); }
.btn:active { transform: translateY(1px) scale(.985); }
.btn:disabled, .btn.disabled { opacity:.5; pointer-events:none; }
.btn i, .btn svg { font-size:1.02em; }

.btn-primary { background: var(--grad-main); color: var(--c-primary-ink); box-shadow: 0 8px 22px var(--glow); }
.btn-primary:hover { transform: translateY(-3px); box-shadow: 0 16px 40px var(--glow-strong); }
.btn-secondary { background: rgba(var(--c-secondary-rgb),.14); color: var(--c-secondary); border:1px solid rgba(var(--c-secondary-rgb),.34); }
.btn-secondary:hover { background: rgba(var(--c-secondary-rgb),.24); transform: translateY(-3px); }
.btn-accent { background: var(--grad-accent); color:#fff; box-shadow:0 8px 22px rgba(var(--c-accent-rgb),.4); }
.btn-accent:hover { transform: translateY(-3px); box-shadow:0 16px 40px rgba(var(--c-accent-rgb),.55); }
.btn-ghost { background: rgba(var(--c-primary-rgb),.08); color: var(--c-primary); border:1px solid rgba(var(--c-primary-rgb),.26); }
.btn-ghost:hover { background: rgba(var(--c-primary-rgb),.16); transform: translateY(-3px); }
.btn-outline { background: transparent; color: var(--text-primary); border:1.5px solid var(--border-color); }
.btn-outline:hover { border-color: var(--c-primary); color: var(--c-primary); transform: translateY(-3px); }
.btn-glass { background: var(--glass); border:1px solid var(--glass-border); color: var(--text-primary); backdrop-filter: blur(var(--glass-blur)); -webkit-backdrop-filter: blur(var(--glass-blur)); }
.btn-glass:hover { background: rgba(var(--c-primary-rgb),.16); border-color: var(--c-primary); transform: translateY(-3px); }
.btn-success { background: var(--c-success); color:#04180E; }
.btn-danger { background: var(--c-danger); color:#fff; }
.btn-warning { background: var(--c-warning); color:#1A1200; }
.btn-plain { background: transparent; color: var(--text-secondary); }
.btn-plain:hover { color: var(--c-primary); background: rgba(var(--c-primary-rgb),.08); }

.btn-sm { padding: 8px 15px; font-size:.8rem; border-radius:10px; }
.btn-xs { padding: 5px 11px; font-size:.72rem; border-radius:8px; gap:6px; }
.btn-lg { padding: 15px 34px; font-size:1.02rem; border-radius:14px; }
.btn-block { display:flex; width:100%; }
.btn-icon { padding: 10px; width: 40px; height: 40px; }
.btn-icon.btn-sm { width:34px; height:34px; padding:7px; }
.btn-icon.btn-xs { width:29px; height:29px; padding:5px; }
.btn-circle { border-radius:50%; }

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

/* ---------- Cards ---------- */
.card {
    background: var(--glass);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius);
    backdrop-filter: blur(var(--glass-blur));
    -webkit-backdrop-filter: blur(var(--glass-blur));
    box-shadow: var(--shadow-sm);
    position: relative;
    transition: transform var(--anim) cubic-bezier(.34,1.3,.64,1), box-shadow var(--anim), border-color var(--anim);
}
.card-pad { padding: 26px; }
.card-pad-lg { padding: 34px; }
.card-sm { padding: 18px; }
.card-body { padding: 22px; }
.card-head {
    display:flex; align-items:center; justify-content:space-between; gap:16px;
    padding: 18px 24px; border-bottom: 1px solid var(--glass-border);
    flex-wrap:wrap;
}
.card-head h3, .card-title { font-size:1.05rem; font-weight:800; display:flex; align-items:center; gap:10px; }
.card-head p { font-size:.8rem; color:var(--text-muted); }
.card-foot { padding: 16px 24px; border-top: 1px solid var(--glass-border); }
.card-hover:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); border-color: var(--border-glow); }
.card-glow::before {
    content:''; position:absolute; inset:-1px; border-radius:inherit; padding:1px;
    background: var(--grad-main); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor; mask-composite: exclude; opacity:0;
    transition: opacity var(--anim); pointer-events:none;
}
.card-glow:hover::before { opacity:1; }
.card-corner { position:absolute; top:0; right:0; width:110px; height:110px; border-radius: var(--radius) 0 0 0; background: radial-gradient(circle at top right, var(--glow), transparent 70%); pointer-events:none; }

.stat-card { padding: 22px; display:flex; align-items:flex-start; gap:16px; overflow:hidden; }
.stat-icon {
    width:52px; height:52px; border-radius:15px; display:grid; place-items:center;
    font-size:1.25rem; flex-shrink:0; color:#fff;
    background: var(--grad-main); box-shadow: 0 8px 20px var(--glow);
    transition: transform .5s cubic-bezier(.34,1.56,.64,1);
}
.stat-card:hover .stat-icon { transform: scale(1.12) rotate(-7deg); }
.stat-val { font-size:1.75rem; font-weight:900; letter-spacing:-.6px; line-height:1.1; }
.stat-label { font-size:.76rem; color:var(--text-muted); text-transform:uppercase; letter-spacing:1px; font-weight:700; }
.stat-trend { font-size:.76rem; font-weight:700; display:inline-flex; align-items:center; gap:4px; }
.stat-trend.up { color: var(--c-success); }
.stat-trend.down { color: var(--c-danger); }
.icon-success{background:linear-gradient(135deg,var(--c-success),#0E9F6E)}
.icon-danger{background:linear-gradient(135deg,var(--c-danger),#DC2626)}
.icon-warning{background:linear-gradient(135deg,var(--c-warning),#D97706)}
.icon-info{background:linear-gradient(135deg,var(--c-primary),var(--c-secondary))}

/* ---------- Forms ---------- */
.field { margin-bottom: 18px; }
.field:last-child { margin-bottom: 0; }
.label { display:block; font-size:.8rem; font-weight:700; margin-bottom:8px; color: var(--text-secondary); letter-spacing:.3px; }
.label .req { color: var(--c-danger); }
.hint { font-size:.75rem; color: var(--text-muted); margin-top:7px; }
.error-text { font-size:.75rem; color: var(--c-danger); margin-top:7px; }

.input, .select, .textarea {
    width:100%; padding: 12px 15px;
    background: var(--bg-inset);
    border: 1.5px solid var(--border-color);
    border-radius: 12px;
    color: var(--text-primary);
    font-size: .9rem;
    transition: border-color var(--anim), box-shadow var(--anim), background var(--anim);
}
.textarea { min-height:120px; resize:vertical; line-height:1.6; }
.select {
    appearance:none; -webkit-appearance:none; cursor:pointer;
    padding-right:42px;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' fill='none' stroke='%23888' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M2 5l5 5 5-5'/%3E%3C/svg%3E");
    background-repeat:no-repeat; background-position: right 15px center;
}
.select option { background: #0d0f1a; color: var(--text-primary); }
.input::placeholder, .textarea::placeholder { color: var(--text-muted); opacity:.75; }
.input:hover, .select:hover, .textarea:hover { border-color: var(--border-glow); }
.input:focus, .select:focus, .textarea:focus {
    outline:none; border-color: var(--c-primary);
    background: var(--bg-surface);
    box-shadow: 0 0 0 4px rgba(var(--c-primary-rgb),.15);
}
.input:disabled, .select:disabled, .textarea:disabled { opacity:.55; cursor:not-allowed; }
.input.error, .select.error, .textarea.error { border-color: var(--c-danger); }
.input-group { position:relative; display:flex; align-items:center; }
.input-group .input { padding-left:44px; }
.input-group .ig-icon { position:absolute; left:15px; color: var(--text-muted); font-size:.95rem; pointer-events:none; }
.input-group .ig-action { position:absolute; right:8px; }
.input-affix { display:flex; align-items:stretch; }
.input-affix .prefix, .input-affix .suffix {
    display:grid; place-items:center; padding:0 14px;
    background: rgba(var(--c-primary-rgb),.08);
    border:1.5px solid var(--border-color); color: var(--text-muted); font-size:.86rem; font-weight:600;
}
.input-affix .prefix { border-right:none; border-radius:12px 0 0 12px; }
.input-affix .suffix { border-left:none; border-radius:0 12px 12px 0; }
.input-affix .input { border-radius:0; }
.input-group .password-toggle {
    position:absolute; right:12px; color: var(--text-muted);
    padding:4px; border-radius:6px; transition: color var(--anim);
}
.input-group .password-toggle:hover { color: var(--c-primary); }

.check { display:flex; align-items:flex-start; gap:10px; cursor:pointer; font-size:.86rem; color:var(--text-secondary); }
.check input[type=checkbox], .check input[type=radio] {
    appearance:none; -webkit-appearance:none;
    width:19px; height:19px; flex-shrink:0; margin-top:1px;
    border:1.5px solid var(--border-color); border-radius:6px;
    background: var(--bg-inset); cursor:pointer; position:relative;
    transition: background var(--anim), border-color var(--anim);
}
.check input[type=radio] { border-radius:50%; }
.check input:checked { background: var(--grad-main); border-color: transparent; }
.check input[type=checkbox]:checked::after {
    content:'✓'; position:absolute; inset:0; display:grid; place-items:center;
    color:#fff; font-size:.72rem; font-weight:900;
}
.check input[type=radio]:checked::after {
    content:''; position:absolute; inset:4px; border-radius:50%; background:#fff;
}

.switch { display:inline-flex; align-items:center; gap:12px; cursor:pointer; }
.switch input { display:none; }
.switch .track {
    width:48px; height:26px; border-radius:100px; position:relative;
    background: var(--bg-inset); border:1.5px solid var(--border-color);
    transition: background var(--anim), border-color var(--anim);
}
.switch .track::after {
    content:''; position:absolute; top:2px; left:2px;
    width:18px; height:18px; border-radius:50%;
    background: var(--text-muted);
    transition: transform var(--anim-slow) cubic-bezier(.34,1.56,.64,1), background var(--anim);
}
.switch input:checked + .track { background: var(--grad-main); border-color:transparent; }
.switch input:checked + .track::after { transform: translateX(22px); background:#fff; }
.switch-label { font-size:.86rem; font-weight:600; }

.color-field { display:flex; align-items:center; gap:10px; }
.color-field input[type=color] {
    width:46px; height:46px; padding:3px; border-radius:12px; cursor:pointer;
    background: var(--bg-inset); border:1.5px solid var(--border-color);
}
.color-field input[type=color]::-webkit-color-swatch-wrapper { padding:0; }
.color-field input[type=color]::-webkit-color-swatch { border:none; border-radius:9px; }

.range { -webkit-appearance:none; appearance:none; width:100%; height:6px; border-radius:10px; background: var(--bg-inset); }
.range::-webkit-slider-thumb {
    -webkit-appearance:none; width:20px; height:20px; border-radius:50%;
    background: var(--grad-main); cursor:pointer; box-shadow:0 0 0 4px rgba(var(--c-primary-rgb),.2);
}
.range::-moz-range-thumb { width:20px; height:20px; border:none; border-radius:50%; background: var(--c-primary); cursor:pointer; }

.form-row { display:grid; gap:0 18px; grid-template-columns:repeat(2,1fr); }
.form-row-3 { display:grid; gap:0 18px; grid-template-columns:repeat(3,1fr); }
.form-section-title {
    font-size:.76rem; font-weight:800; text-transform:uppercase; letter-spacing:1.4px;
    color: var(--c-primary); margin: 26px 0 14px; padding-bottom:9px;
    border-bottom:1px solid var(--border-soft);
    display:flex; align-items:center; gap:9px;
}
.form-section-title:first-child { margin-top:0; }

/* ---------- Tables ---------- */
.table-wrap { overflow-x:auto; border-radius: var(--radius); }
.table { width:100%; border-collapse:collapse; font-size:.87rem; }
.table thead th {
    text-align:left; padding: 14px 16px;
    background: rgba(var(--c-primary-rgb),.08);
    color: var(--text-muted); font-size:.72rem; font-weight:800;
    text-transform:uppercase; letter-spacing:1.1px; white-space:nowrap;
    border-bottom:1px solid var(--border-color);
}
.table tbody td { padding: 14px 16px; border-bottom:1px solid var(--border-soft); vertical-align:middle; }
.table tbody tr { transition: background var(--anim); }
.table tbody tr:hover { background: rgba(var(--c-primary-rgb),.05); }
.table tbody tr:last-child td { border-bottom:none; }
.table .actions { display:flex; gap:7px; justify-content:flex-end; }
.table-empty { padding: 50px 20px; text-align:center; color: var(--text-muted); }
.table-empty i { font-size:2.4rem; opacity:.4; margin-bottom:14px; display:block; }
.table-compact tbody td, .table-compact thead th { padding: 9px 12px; }
.table-sticky thead th { position:sticky; top:0; z-index:2; backdrop-filter:blur(10px); }

/* ---------- Badges / Pills ---------- */
.badge {
    display:inline-flex; align-items:center; gap:6px;
    padding: 4px 12px; border-radius:100px;
    font-size:.72rem; font-weight:800; letter-spacing:.3px; white-space:nowrap;
    background: rgba(var(--c-primary-rgb),.12); color: var(--c-primary);
    border:1px solid rgba(var(--c-primary-rgb),.28);
}
.badge::before { content:''; width:6px; height:6px; border-radius:50%; background:currentColor; }
.badge.no-dot::before { display:none; }
.badge-success { background:rgba(34,197,94,.12); color:var(--c-success); border-color:rgba(34,197,94,.3); }
.badge-warning { background:rgba(245,158,11,.12); color:var(--c-warning); border-color:rgba(245,158,11,.3); }
.badge-danger  { background:rgba(239,68,68,.12); color:var(--c-danger); border-color:rgba(239,68,68,.3); }
.badge-info    { background:rgba(59,130,246,.12); color:#60A5FA; border-color:rgba(59,130,246,.3); }
.badge-muted   { background:rgba(255,255,255,.05); color:var(--text-muted); border-color:var(--border-soft); }
.badge-lg { padding:6px 16px; font-size:.8rem; }

.chip-row { display:flex; flex-wrap:wrap; gap:7px; }
.chip {
    display:inline-flex; align-items:center; gap:8px;
    padding: 9px 17px; border-radius:100px;
    background: var(--glass); border:1px solid var(--glass-border);
    font-size:.82rem; font-weight:600; cursor:pointer;
    transition: all var(--anim);
}
.chip:hover { border-color: var(--c-primary); color: var(--c-primary); transform: translateY(-2px); }
.chip.active { background: var(--grad-main); color: var(--c-primary-ink); border-color:transparent; box-shadow:0 6px 18px var(--glow); }
.chip .x { display:grid; place-items:center; width:16px; height:16px; border-radius:50%; background:rgba(0,0,0,.2); font-size:.7rem; }

/* ---------- Alerts ---------- */
.alert {
    display:flex; gap:14px; align-items:flex-start;
    padding: 16px 20px; border-radius:14px;
    border:1px solid; font-size:.88rem; position:relative; overflow:hidden;
}
.alert i { font-size:1.1rem; flex-shrink:0; margin-top:2px; }
.alert-title { font-weight:800; margin-bottom:3px; }
.alert-success { background:rgba(34,197,94,.1); border-color:rgba(34,197,94,.32); color:var(--c-success); }
.alert-danger  { background:rgba(239,68,68,.1); border-color:rgba(239,68,68,.32); color:var(--c-danger); }
.alert-warning { background:rgba(245,158,11,.1); border-color:rgba(245,158,11,.32); color:var(--c-warning); }
.alert-info    { background:rgba(var(--c-primary-rgb),.1); border-color:rgba(var(--c-primary-rgb),.32); color:var(--c-primary); }
.alert .close { margin-left:auto; color:inherit; opacity:.6; font-size:1.1rem; }
.alert .close:hover { opacity:1; }

/* ---------- Progress / Meter ---------- */
.progress { height:8px; border-radius:100px; background: var(--bg-inset); overflow:hidden; }
.progress-bar {
    height:100%; border-radius:100px; background: var(--grad-main);
    transition: width 1.1s cubic-bezier(.22,1,.36,1); position:relative;
}
.progress-bar::after {
    content:''; position:absolute; inset:0;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,.4), transparent);
    animation: shimmer 2.2s linear infinite;
}
@keyframes shimmer { from{transform:translateX(-100%)} to{transform:translateX(100%)} }
.progress-lg { height:12px; }
.progress-success .progress-bar { background:linear-gradient(90deg,#0E9F6E,var(--c-success)); }
.progress-warning .progress-bar { background:linear-gradient(90deg,#D97706,var(--c-warning)); }
.progress-danger .progress-bar { background:linear-gradient(90deg,#DC2626,var(--c-danger)); }
.meter-row { display:flex; align-items:center; justify-content:space-between; font-size:.8rem; margin-bottom:7px; }

/* ---------- Avatars ---------- */
.avatar {
    width:40px; height:40px; border-radius:50%;
    display:grid; place-items:center;
    font-weight:800; font-size:.9rem; color:#fff;
    background: var(--grad-main); overflow:hidden; flex-shrink:0;
    box-shadow: 0 4px 14px var(--glow);
}
.avatar img { width:100%; height:100%; object-fit:cover; }
.avatar-sm { width:32px; height:32px; font-size:.75rem; }
.avatar-lg { width:56px; height:56px; font-size:1.2rem; }
.avatar-xl { width:80px; height:80px; font-size:1.7rem; }
.avatar-ring { box-shadow: 0 0 0 2px var(--bg-body), 0 0 0 4px var(--c-primary); }

/* ---------- Tabs ---------- */
.tabs { display:flex; gap:6px; border-bottom:1px solid var(--border-color); overflow-x:auto; }
.tab {
    padding: 12px 20px; font-size:.87rem; font-weight:700; color: var(--text-muted);
    border-bottom:2px solid transparent; white-space:nowrap;
    transition: color var(--anim), border-color var(--anim);
    display:inline-flex; align-items:center; gap:8px;
}
.tab:hover { color: var(--text-primary); }
.tab.active { color: var(--c-primary); border-bottom-color: var(--c-primary); }
.tab-panel { display:none; animation: fadeUp .45s ease; }
.tab-panel.active { display:block; }
.pills { display:inline-flex; padding:5px; gap:4px; background: var(--bg-inset); border-radius:12px; border:1px solid var(--border-soft); }
.pills button { padding:8px 16px; border-radius:9px; font-size:.82rem; font-weight:700; color:var(--text-muted); transition:all var(--anim); }
.pills button:hover { color:var(--text-primary); }
.pills button.active { background: var(--grad-main); color: var(--c-primary-ink); box-shadow:0 4px 12px var(--glow); }

/* ---------- Modal ---------- */
.modal-backdrop {
    position:fixed; inset:0; z-index:9000;
    background: rgba(2,3,8,.78);
    backdrop-filter: blur(7px); -webkit-backdrop-filter: blur(7px);
    display:none; align-items:center; justify-content:center; padding:22px;
    animation: fadeIn .25s ease;
}
.modal-backdrop.open { display:flex; }
.modal {
    width:100%; max-width: 560px; max-height: 92vh; overflow-y:auto;
    background: var(--bg-surface);
    border:1px solid var(--glass-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    animation: modalIn .42s cubic-bezier(.34,1.4,.64,1);
}
.modal-lg { max-width: 820px; }
.modal-sm { max-width: 420px; }
.modal-head { display:flex; align-items:center; justify-content:space-between; gap:16px; padding:20px 26px; border-bottom:1px solid var(--glass-border); position:sticky; top:0; background:var(--bg-surface); z-index:2; }
.modal-body { padding: 26px; }
.modal-foot { display:flex; justify-content:flex-end; gap:12px; padding:18px 26px; border-top:1px solid var(--glass-border); flex-wrap:wrap; }
.modal-close { width:34px; height:34px; border-radius:10px; display:grid; place-items:center; color:var(--text-muted); transition:all var(--anim); }
.modal-close:hover { background:rgba(239,68,68,.14); color:var(--c-danger); }
@keyframes modalIn { from{opacity:0; transform: translateY(30px) scale(.94)} to{opacity:1; transform:none} }

/* ---------- Toast ---------- */
.toast-stack { position:fixed; top:22px; right:22px; z-index:9500; display:flex; flex-direction:column; gap:12px; max-width: 380px; }
.toast {
    display:flex; gap:13px; align-items:flex-start;
    padding: 15px 18px; border-radius:14px;
    background: var(--bg-elevated);
    border:1px solid var(--glass-border);
    border-left: 4px solid var(--c-primary);
    box-shadow: var(--shadow-lg);
    animation: toastIn .5s cubic-bezier(.34,1.4,.64,1);
    backdrop-filter: blur(var(--glass-blur));
}
.toast.out { animation: toastOut .35s ease forwards; }
.toast i { font-size:1.1rem; }
.toast-title { font-weight:800; font-size:.87rem; }
.toast-msg { font-size:.8rem; color:var(--text-muted); }
.toast-success { border-left-color: var(--c-success); } .toast-success i { color: var(--c-success); }
.toast-danger { border-left-color: var(--c-danger); } .toast-danger i { color: var(--c-danger); }
.toast-warning { border-left-color: var(--c-warning); } .toast-warning i { color: var(--c-warning); }
.toast .close { margin-left:auto; color:var(--text-muted); }
@keyframes toastIn { from{opacity:0; transform: translateX(120%)} to{opacity:1; transform:none} }
@keyframes toastOut { to{opacity:0; transform: translateX(120%)} }

/* ---------- Accordion ---------- */
.acc-item { border:1px solid var(--glass-border); border-radius:14px; margin-bottom:12px; overflow:hidden; background: var(--glass); transition:border-color var(--anim); }
.acc-item.open { border-color: var(--border-glow); }
.acc-head { width:100%; display:flex; align-items:center; justify-content:space-between; gap:16px; padding:17px 22px; font-weight:700; font-size:.93rem; text-align:left; }
.acc-head:hover { color: var(--c-primary); }
.acc-head i { transition: transform var(--anim); }
.acc-item.open .acc-head i { transform: rotate(180deg); color: var(--c-primary); }
.acc-body { max-height:0; overflow:hidden; transition: max-height var(--anim-slow) cubic-bezier(.4,0,.2,1); }
.acc-body-inner { padding: 0 22px 20px; color: var(--text-secondary); font-size:.88rem; }

/* ---------- Pagination ---------- */
.pagination { display:flex; gap:7px; align-items:center; justify-content:center; flex-wrap:wrap; margin-top:26px; }
.pagination a, .pagination span {
    min-width:40px; height:40px; padding:0 13px;
    display:grid; place-items:center; border-radius:11px;
    background: var(--glass); border:1px solid var(--glass-border);
    font-size:.85rem; font-weight:700; color: var(--text-secondary);
    transition:all var(--anim);
}
.pagination a:hover { border-color: var(--c-primary); color: var(--c-primary); transform: translateY(-2px); }
.pagination .active { background: var(--grad-main); color: var(--c-primary-ink); border-color:transparent; box-shadow:0 5px 16px var(--glow); }
.pagination .disabled { opacity:.4; pointer-events:none; }

/* ---------- Dropdown ---------- */
.dropdown { position:relative; }
.dropdown-menu {
    position:absolute; top:calc(100% + 10px); right:0; min-width: 220px;
    background: var(--bg-elevated);
    border:1px solid var(--glass-border); border-radius:14px;
    box-shadow: var(--shadow-lg); padding:8px; z-index:800;
    opacity:0; visibility:hidden; transform: translateY(-10px) scale(.97);
    transition: all var(--anim); transform-origin: top right;
    backdrop-filter: blur(var(--glass-blur));
}
.dropdown.open .dropdown-menu { opacity:1; visibility:visible; transform:none; }
.dropdown-menu.left { right:auto; left:0; transform-origin: top left; }
.dropdown-menu a, .dropdown-menu button {
    display:flex; align-items:center; gap:11px; width:100%;
    padding: 10px 14px; border-radius:10px; font-size:.86rem;
    color: var(--text-secondary); text-align:left; transition:all var(--anim);
}
.dropdown-menu a:hover, .dropdown-menu button:hover { background: rgba(var(--c-primary-rgb),.12); color: var(--c-primary); }
.dropdown-menu .div { height:1px; background: var(--border-soft); margin:6px 0; }
.dropdown-menu .danger-item:hover { background: rgba(239,68,68,.12); color: var(--c-danger); }
.dropdown-head { padding: 12px 14px; border-bottom:1px solid var(--border-soft); margin-bottom:6px; }

/* ---------- Skeleton / Empty ---------- */
.skeleton { background: linear-gradient(90deg, var(--bg-inset) 25%, rgba(255,255,255,.05) 50%, var(--bg-inset) 75%); background-size: 200% 100%; animation: skel 1.4s linear infinite; border-radius:8px; }
@keyframes skel { from{background-position:200% 0} to{background-position:-200% 0} }
.empty-state { padding:60px 24px; text-align:center; }
.empty-state .icon {
    width:88px; height:88px; margin:0 auto 20px; border-radius:26px;
    display:grid; place-items:center; font-size:2.2rem; color: var(--c-primary);
    background: rgba(var(--c-primary-rgb),.1); border:1px solid rgba(var(--c-primary-rgb),.22);
    animation: float 4s ease-in-out infinite;
}
.empty-state h3 { font-size:1.15rem; margin-bottom:8px; }
.empty-state p { color: var(--text-muted); font-size:.88rem; max-width:460px; margin:0 auto 20px; }

/* ---------- Animations ---------- */
.fade-up { animation: fadeUp .7s cubic-bezier(.22,1,.36,1) both; }
.fade-in { animation: fadeIn .6s ease both; }
.slide-up { animation: slideUp .6s cubic-bezier(.22,1,.36,1) both; }
.pop-in { animation: popIn .55s cubic-bezier(.34,1.5,.64,1) both; }
.float { animation: float 5s ease-in-out infinite; }
.pulse { animation: pulse 2.4s ease-in-out infinite; }
.glow-pulse { animation: glowPulse 2.8s ease-in-out infinite; }
.spin { animation: spin 1s linear infinite; }
.d-1{animation-delay:.08s} .d-2{animation-delay:.16s} .d-3{animation-delay:.24s}
.d-4{animation-delay:.32s} .d-5{animation-delay:.4s}  .d-6{animation-delay:.48s}
.d-7{animation-delay:.56s} .d-8{animation-delay:.64s} .d-9{animation-delay:.72s}
.d-10{animation-delay:.8s} .d-11{animation-delay:.88s} .d-12{animation-delay:.96s}

@keyframes fadeUp { from{opacity:0; transform:translateY(34px)} to{opacity:1; transform:none} }
@keyframes fadeIn { from{opacity:0} to{opacity:1} }
@keyframes slideUp { from{opacity:0; transform:translateY(18px)} to{opacity:1; transform:none} }
@keyframes popIn { from{opacity:0; transform:scale(.86)} to{opacity:1; transform:scale(1)} }
@keyframes float { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-14px)} }
@keyframes pulse { 0%,100%{opacity:1} 50%{opacity:.55} }
@keyframes glowPulse { 0%,100%{box-shadow:0 0 0 0 var(--glow)} 50%{box-shadow:0 0 26px 8px var(--glow)} }
@keyframes marquee { from{transform:translateX(0)} to{transform:translateX(-50%)} }

/* ---------- Reveal on scroll ---------- */
/* Both the attribute and the .reveal class trigger the animation. */
[data-reveal], .reveal { opacity:0; transform: translateY(38px); transition: opacity .85s cubic-bezier(.22,1,.36,1), transform .85s cubic-bezier(.22,1,.36,1); }
[data-reveal].revealed, .reveal.revealed { opacity:1; transform:none; }
[data-reveal="left"],  .reveal.left  { transform: translateX(-42px); }
[data-reveal="right"], .reveal.right { transform: translateX(42px); }
[data-reveal="zoom"],  .reveal.zoom  { transform: scale(.9); }
@media (prefers-reduced-motion: reduce) {
    [data-reveal], .reveal { opacity:1 !important; transform:none !important; }
}

/* ---------- Tooltip ---------- */
[data-tip] { position:relative; }
[data-tip]::after {
    content: attr(data-tip); position:absolute; bottom:calc(100% + 9px); left:50%;
    transform: translateX(-50%) translateY(6px);
    background: var(--bg-inset); color: var(--text-primary);
    border:1px solid var(--glass-border); box-shadow: var(--shadow);
    padding: 6px 12px; border-radius:8px; font-size:.74rem; font-weight:600;
    white-space:nowrap; opacity:0; pointer-events:none;
    transition: opacity var(--anim), transform var(--anim); z-index:9999;
}
[data-tip]:hover::after { opacity:1; transform: translateX(-50%) translateY(0); }


/* ============================================
   LEGACY-ALIAS + SHARED PRIMITIVES
   Older pages were authored against a Bootstrap-era
   vocabulary (.form-group, .card-header, .d-flex...).
   These aliases keep that markup rendering correctly
   against the modern .field / .card-head system, so we
   do not need to churn markup across the whole codebase
   or resurrect the old monolithic stylesheet.
   ============================================ */

/* ---------- form ---------- */
.form-group { margin-bottom: 18px; position: relative; }
.form-group:last-child { margin-bottom: 0; }
.form-group > label,
.form-group > .label { display:block; font-size:.8rem; font-weight:700; margin-bottom:8px; color: var(--text-secondary); letter-spacing:.3px; }
.form-group input,
.form-group select,
.form-group textarea {
    width:100%; padding: 12px 15px;
    background: var(--bg-inset);
    border: 1.5px solid var(--border-color);
    border-radius: 12px;
    color: var(--text-primary);
    font-family: inherit;
    font-size: .9rem;
    transition: border-color var(--anim), box-shadow var(--anim), background var(--anim);
}
.form-group select {
    appearance:none; -webkit-appearance:none; cursor:pointer; padding-right:42px;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' fill='none' stroke='%23888' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M2 5l5 5 5-5'/%3E%3C/svg%3E");
    background-repeat:no-repeat; background-position: right 15px center;
}
.form-group select option { background:#0d0f1a; color: var(--text-primary); }
.form-group textarea { min-height:110px; resize:vertical; line-height:1.6; }
.form-group input::placeholder,
.form-group textarea::placeholder { color: var(--text-muted); opacity:.75; }
.form-group input:hover, .form-group select:hover, .form-group textarea:hover { border-color: var(--border-glow); }
.form-group input:focus, .form-group select:focus, .form-group textarea:focus {
    outline:none; border-color: var(--c-primary); background: var(--bg-surface);
    box-shadow: 0 0 0 4px rgba(var(--c-primary-rgb),.15);
}
.form-group input[type=checkbox], .form-group input[type=radio] { width:auto; }
.form-group i.ig-icon, .form-group > i { position:absolute; left:15px; top:50%; transform:translateY(-50%); color: var(--text-muted); font-size:.95rem; pointer-events:none; }
.form-group:has(> i.ig-icon) input { padding-left:44px; }
.form-help { font-size:.75rem; color: var(--text-muted); margin-top:7px; }
.form-grid { display:grid; gap:0 18px; grid-template-columns:repeat(2,1fr); }
.form-grid > .form-group:last-child { margin-bottom:18px; }
@media (max-width:640px) { .form-grid { grid-template-columns:1fr; } }

/* ---------- card header alias ---------- */
.card-header { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:18px 20px; border-bottom:1px solid var(--border-soft); }
.card-header h2, .card-header h3 { margin:0; font-size:1rem; font-weight:700; display:flex; align-items:center; gap:9px; }

/* ---------- flex / alignment utilities ---------- */
.d-flex { display:flex; }
.d-inline { display:inline; }
.d-inline-flex { display:inline-flex; }
.d-flex-col { display:flex; flex-direction:column; }
.flex-wrap { flex-wrap:wrap; }
.items-center { align-items:center; }
.justify-between { justify-content:space-between; }
.justify-end { justify-content:flex-end; }
.flex-1 { flex:1 1 auto; min-width:0; }
.ms-auto { margin-left:auto; }
.me-auto { margin-right:auto; }
.ms-8 { margin-left:8px; } .ms-12 { margin-left:12px; } .ms-16 { margin-left:16px; }
.mt-8 { margin-top:8px; } .mt-12 { margin-top:12px; } .mt-16 { margin-top:16px; } .mt-24 { margin-top:24px; }
.mb-8 { margin-bottom:8px; } .mb-12 { margin-bottom:12px; } .mb-16 { margin-bottom:16px; } .mb-24 { margin-bottom:24px; }
.gap-6 { gap:6px; } .gap-8 { gap:8px; } .gap-10 { gap:10px; }
.gap-12 { gap:12px; } .gap-16 { gap:16px; } .gap-20 { gap:20px; } .gap-24 { gap:24px; }

/* ---------- typography ---------- */
.text-mono { font-family:'JetBrains Mono', ui-monospace, monospace; font-size:.92em; letter-spacing:-.2px; }
.text-center { text-align:center; }
.text-right { text-align:right; }
.text-left { text-align:left; }
.text-nowrap { white-space:nowrap; }
.text-upper { text-transform:uppercase; letter-spacing:.8px; }
.break { word-break:break-word; }
.truncate { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.sep { height:1px; background: var(--border-soft); border:0; margin:18px 0; }
.list-tight { list-style:none; margin:0; padding:0; }
.list-tight li { display:flex; align-items:center; gap:10px; padding:8px 0; font-size:.85rem; color: var(--text-secondary); border-bottom:1px solid var(--border-soft); }
.list-tight li:last-child { border-bottom:none; }
.list-tight li b { margin-left:auto; color: var(--text-primary); font-weight:600; }
.visually-hidden {
    position:absolute !important; width:1px; height:1px; padding:0; margin:-1px;
    overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}
.sm { font-size:.85em; }

/* ---------- status badge (alias of .badge) ---------- */
.status-badge {
    display:inline-flex; align-items:center; gap:6px;
    padding: 5px 12px; border-radius: 999px;
    font-size:.72rem; font-weight:700; letter-spacing:.3px;
    border:1px solid var(--border-soft); white-space:nowrap;
}
.status-success { background:rgba(34,197,94,.12);  color:var(--c-success); border-color:rgba(34,197,94,.3); }
.status-warning { background:rgba(245,158,11,.12); color:var(--c-warning); border-color:rgba(245,158,11,.3); }
.status-danger  { background:rgba(239,68,68,.12);  color:var(--c-danger);  border-color:rgba(239,68,68,.3); }
.status-info    { background:rgba(59,130,246,.12); color:#60A5FA;          border-color:rgba(59,130,246,.3); }
.status-muted   { background:rgba(255,255,255,.05); color:var(--text-muted); border-color:var(--border-soft); }
.dot-status { width:8px; height:8px; border-radius:50%; display:inline-block; background: var(--text-muted); }
.dot-status.ok, .dot-status.active, .dot-status.online { background: var(--c-success); }
.dot-status.warn, .dot-status.pending { background: var(--c-warning); }
.dot-status.bad, .dot-status.offline, .dot-status.failed { background: var(--c-danger); }

/* ---------- usage meter ---------- */
.usage-bar { margin-bottom: 4px; }
.usage-head {
    display:flex; justify-content:space-between; align-items:baseline; gap:10px;
    font-size:.76rem; color: var(--text-secondary); margin-bottom:7px;
}
.usage-head strong { color: var(--text-primary); font-weight:700; font-family:'JetBrains Mono', monospace; }
.usage-track { height:7px; border-radius:999px; background: var(--bg-inset); overflow:hidden; border:1px solid var(--border-soft); }
.usage-fill { height:100%; border-radius:999px; transition: width .8s cubic-bezier(.22,1,.36,1); }

/* ---------- stats ---------- */
.stat { padding:14px 16px; border:1px solid var(--border-soft); border-radius: var(--radius-sm); background: var(--bg-inset); }
.stat-grid-2 { display:grid; gap:12px; grid-template-columns:repeat(2,1fr); }
.stat-grid-3 { display:grid; gap:12px; grid-template-columns:repeat(3,1fr); }
.stat-grid-4 { display:grid; gap:12px; grid-template-columns:repeat(4,1fr); }
@media (max-width:900px) { .stat-grid-4, .stat-grid-3 { grid-template-columns:repeat(2,1fr); } }
@media (max-width:520px) { .stat-grid-2, .stat-grid-3, .stat-grid-4 { grid-template-columns:1fr; } }

/* ---------- feature list ---------- */
.feature-list { list-style:none; margin:0; padding:0; display:grid; gap:11px; }
.feature-list li { display:flex; align-items:flex-start; gap:10px; font-size:.86rem; color: var(--text-secondary); }
.feature-list li > i { color: var(--c-success); font-size:.8rem; margin-top:4px; flex:0 0 auto; }
.feature-list li b { margin-left:auto; color: var(--text-primary); font-weight:600; white-space:nowrap; }

/* ---------- sparkline ---------- */
.spark-wrap { width:100%; height:80px; margin-bottom:10px; }
.spark { width:100%; height:100%; overflow:visible; }
.spark-line { stroke: var(--c-primary); stroke-width:2; stroke-linejoin:round; stroke-linecap:round; vector-effect: non-scaling-stroke; }
.spark-line.alt { stroke: var(--c-secondary); }

/* ---------- stars ---------- */
.stars { display:inline-flex; gap:2px; color: #FBBF24; font-size:.8rem; }
.stars .off { color: var(--text-muted); opacity:.4; }

/* ---------- pagination ---------- */
.pagination { display:flex; align-items:center; gap:6px; flex-wrap:wrap; justify-content:center; margin-top:22px; }
.page-btn {
    display:grid; place-items:center; min-width:36px; height:36px; padding:0 10px;
    border:1px solid var(--border-soft); border-radius:10px;
    background: var(--bg-inset); color: var(--text-secondary);
    font-size:.82rem; font-weight:600; text-decoration:none;
    transition: all var(--anim);
}
.page-btn:hover { border-color: var(--c-primary); color: var(--c-primary); transform: translateY(-2px); }
.page-btn.active { background: var(--grad-main); color: var(--c-primary-ink); border-color:transparent; box-shadow:0 6px 18px var(--glow); }
.page-btn.disabled { opacity:.4; pointer-events:none; }
.page-dots { display:inline-flex; align-items:center; color: var(--text-muted); padding:0 6px; font-size:.8rem; }

/* ---------- misc ---------- */
.color-hex { font-family:'JetBrains Mono', monospace; font-size:.78rem; }
.range-val { font-family:'JetBrains Mono', monospace; font-size:.78rem; color: var(--c-primary); min-width:52px; text-align:right; }
.shine-sweep { position:relative; overflow:hidden; }
.shine-sweep::after {
    content:''; position:absolute; top:0; left:-120%; width:60%; height:100%;
    background: linear-gradient(100deg, transparent, rgba(255,255,255,.12), transparent);
    transform: skewX(-18deg); animation: shineSweep 3.4s ease-in-out infinite;
}
@keyframes shineSweep { 0%,65% { left:-120%; } 100% { left:160%; } }
.grid-2 { display:grid; gap:18px; grid-template-columns:repeat(2,1fr); }
.grid-3 { display:grid; gap:18px; grid-template-columns:repeat(3,1fr); }
.grid-4 { display:grid; gap:18px; grid-template-columns:repeat(4,1fr); }
@media (max-width:900px) { .grid-3, .grid-4 { grid-template-columns:repeat(2,1fr); } }
@media (max-width:640px) { .grid-2, .grid-3, .grid-4 { grid-template-columns:1fr; } }
.badge-count {
    display:inline-grid; place-items:center; min-width:20px; height:20px; padding:0 6px;
    border-radius:999px; background: var(--c-danger); color:#fff;
    font-size:.68rem; font-weight:800;
}
.filter-bar { display:flex; align-items:center; gap:12px; flex-wrap:wrap; margin-bottom:18px; }
.info-box {
    display:flex; gap:12px; padding:14px 16px; border-radius: var(--radius-sm);
    background: rgba(var(--c-primary-rgb),.08); border:1px solid var(--border-soft);
    font-size:.84rem; color: var(--text-secondary);
}
.info-box > i { color: var(--c-primary); flex:0 0 auto; margin-top:2px; }
.info-item { display:flex; justify-content:space-between; gap:12px; font-size:.85rem; padding:7px 0; }
.info-item span:first-child { color: var(--text-muted); }
.info-item span:last-child { color: var(--text-primary); font-weight:600; }
/* ---- layout + utility gaps used by knowledge base & reset pages ---- */
.dash-grid-side { display:grid; grid-template-columns:minmax(0,1fr) 300px; gap:18px; align-items:start }
.d-block { display:block }
.gap-14 { gap:14px }
.mb-8 { margin-bottom:8px }
.auth-switch { text-align:center; margin-top:22px; font-size:.85rem; color:var(--text-muted) }
.auth-switch a { color:var(--c-primary); font-weight:600 }
@media (max-width:1000px) { .dash-grid-side { grid-template-columns:1fr } }