/* =====================================================
   VaultAcc — GLOBAL STYLESHEET v2
   frontend/public/css/main.css
   ===================================================== */

@import url('https://fonts.googleapis.com/css2?family=Syne:wght@400;500;600;700;800&family=DM+Sans:ital,opsz,wght@0,9..40,300;0,9..40,400;0,9..40,500;1,9..40,300&display=swap');

/* ── Design Tokens ── */
:root {
  --black:         #080808;
  --black2:        #0F0F0F;
  --black3:        #161616;
  --black4:        #1E1E1E;
  --orange:        #F05A1A;
  --orange2:       #F57040;
  --orange3:       #F89070;
  --orange-dim:    rgba(240,90,26,0.10);
  --orange-glow:   rgba(240,90,26,0.22);
  --orange-border: rgba(240,90,26,0.28);
  --white:         #F5F5F5;
  --white2:        rgba(245,245,245,0.80);
  --white3:        rgba(245,245,245,0.55);
  --muted:         rgba(245,245,245,0.38);
  --muted2:        rgba(245,245,245,0.20);
  --border:        rgba(255,255,255,0.065);
  --border2:       rgba(255,255,255,0.11);
  --success:       #22c55e;
  --success-dim:   rgba(34,197,94,0.10);
  --success-border:rgba(34,197,94,0.28);
  --error:         #ef4444;
  --error-dim:     rgba(239,68,68,0.10);
  --error-border:  rgba(239,68,68,0.28);
  --warning:       #f59e0b;
  --info:          #3b82f6;
  --font-heading:  'Syne', sans-serif;
  --font-body:     'DM Sans', sans-serif;
  --nav-height:    62px;
  --sidebar-width: 228px;
  --radius-sm:     5px;
  --radius-md:     9px;
  --radius-lg:     13px;
  --radius-xl:     18px;
  --radius-2xl:    24px;
  --shadow-sm:     0 2px 8px rgba(0,0,0,0.5);
  --shadow-md:     0 4px 20px rgba(0,0,0,0.6);
  --shadow-lg:     0 8px 40px rgba(0,0,0,0.7);
  --shadow-orange: 0 6px 24px rgba(240,90,26,0.28);
  --transition:    0.18s ease;
  --transition-slow:0.32s ease;
}

/* ── Reset ── */
*,*::before,*::after { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
body {
  background: var(--black);
  color: var(--white);
  font-family: var(--font-body);
  font-size: 14px;
  line-height: 1.6;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}
img { max-width:100%; display:block; }
a   { color:inherit; text-decoration:none; }
button,input,select,textarea { font-family:inherit; }
ul,ol { list-style:none; }

/* Scrollbar */
::-webkit-scrollbar { width:3px; height:3px; }
::-webkit-scrollbar-track { background:var(--black2); }
::-webkit-scrollbar-thumb { background:rgba(240,90,26,0.35); border-radius:3px; }
::-webkit-scrollbar-thumb:hover { background:var(--orange); }

/* ====================================================
   TYPOGRAPHY
   ==================================================== */
h1,h2,h3,h4,h5,h6 {
  font-family: var(--font-heading);
  font-weight: 700;
  letter-spacing: -0.025em;
  line-height: 1.15;
}

/* ====================================================
   NAVBAR
   ==================================================== */
.navbar {
  position: fixed;
  top:0; left:0; right:0;
  height: var(--nav-height);
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 2rem;
  background: rgba(8,8,8,0.82);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border-bottom: 1px solid var(--border);
  transition: background var(--transition), border-color var(--transition);
}
.navbar.scrolled {
  background: rgba(8,8,8,0.97);
  border-bottom-color: var(--border2);
}

.nav-logo {
  display: flex;
  align-items: center;
  gap: 9px;
  font-family: var(--font-heading);
  font-size: 18px;
  font-weight: 800;
  letter-spacing: -0.04em;
  color: var(--white);
  flex-shrink: 0;
}
.nav-logo-icon {
  width: 30px; height: 30px;
  background: var(--orange);
  border-radius: 7px;
  display: flex; align-items:center; justify-content:center;
}
.nav-logo-icon svg { width:15px; height:15px; color:#fff; }
.nav-logo span { color:var(--orange); }

.nav-links { display:flex; align-items:center; gap:2px; }
.nav-links a {
  font-size: 13px;
  color: var(--muted);
  padding: 5px 12px;
  border-radius: var(--radius-md);
  transition: all var(--transition);
  font-weight: 400;
  display: flex; align-items: center; gap: 6px;
}
.nav-links a:hover { color:var(--white); background:rgba(255,255,255,0.05); }
.nav-links a.active { color:var(--white); }

.nav-right { display:flex; align-items:center; gap:8px; }

.nav-balance {
  display: flex;
  align-items: center;
  gap: 7px;
  background: var(--black3);
  border: 1px solid var(--border);
  border-radius: 100px;
  padding: 4px 12px 4px 8px;
  font-size: 12px;
  font-weight: 500;
}
.nav-balance-dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--success);
  flex-shrink: 0;
}

.nav-hamburger {
  display: none;
  flex-direction: column;
  gap: 4px;
  cursor: pointer;
  padding: 4px;
  background: none;
  border: none;
}
.nav-hamburger span {
  display: block;
  width: 20px; height: 1.5px;
  background: var(--white2);
  border-radius: 2px;
  transition: all var(--transition);
}

.nav-mobile {
  display: none;
  position: fixed;
  top: var(--nav-height);
  left: 0; right: 0;
  background: var(--black2);
  border-bottom: 1px solid var(--border);
  padding: 0.75rem 1.25rem;
  z-index: 999;
  flex-direction: column;
  gap: 2px;
}
.nav-mobile.open { display:flex; }
.nav-mobile a {
  font-size: 14px;
  color: var(--muted);
  padding: 9px 12px;
  border-radius: var(--radius-md);
  display: flex; align-items: center; gap: 10px;
  transition: all var(--transition);
}
.nav-mobile a:hover, .nav-mobile a.active {
  color: var(--white);
  background: rgba(255,255,255,0.05);
}

/* ====================================================
   BUTTONS
   ==================================================== */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 500;
  padding: 8px 18px;
  border-radius: var(--radius-md);
  border: none;
  cursor: pointer;
  transition: all var(--transition);
  white-space: nowrap;
  text-decoration: none;
  position: relative;
  letter-spacing: 0.01em;
}
.btn:disabled { opacity:0.45; cursor:not-allowed; transform:none !important; }
.btn svg { width:14px; height:14px; flex-shrink:0; }

.btn-primary { background:var(--orange); color:#fff; }
.btn-primary:hover:not(:disabled) { background:var(--orange2); transform:translateY(-1px); box-shadow:var(--shadow-orange); }

.btn-secondary { background:rgba(255,255,255,0.065); color:var(--white2); border:1px solid var(--border); }
.btn-secondary:hover:not(:disabled) { background:rgba(255,255,255,0.10); border-color:var(--border2); }

.btn-ghost { background:transparent; color:var(--muted); border:1px solid var(--border); }
.btn-ghost:hover:not(:disabled) { color:var(--white); border-color:var(--border2); background:rgba(255,255,255,0.04); }

.btn-danger { background:var(--error-dim); color:var(--error); border:1px solid var(--error-border); }
.btn-danger:hover:not(:disabled) { background:var(--error); color:#fff; }

.btn-success { background:var(--success-dim); color:var(--success); border:1px solid var(--success-border); }
.btn-success:hover:not(:disabled) { background:var(--success); color:#fff; }

.btn-lg { font-size:14px; padding:11px 26px; border-radius:var(--radius-lg); }
.btn-sm { font-size:12px; padding:6px 13px; }
.btn-xs { font-size:11px; padding:4px 9px; border-radius:var(--radius-sm); }
.btn-full { width:100%; }

/* ====================================================
   FORMS
   ==================================================== */
.form-group { display:flex; flex-direction:column; gap:5px; margin-bottom:0.875rem; }
.form-label { font-size:12px; font-weight:500; color:var(--white2); }
.form-label .required { color:var(--orange); margin-left:2px; }

.form-input,.form-select,.form-textarea {
  background: var(--black3);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  color: var(--white);
  font-family: var(--font-body);
  font-size: 13px;
  padding: 9px 12px;
  width: 100%;
  transition: border-color var(--transition), box-shadow var(--transition);
  outline: none;
  appearance: none;
}
.form-input::placeholder,.form-textarea::placeholder { color:var(--muted); }
.form-input:focus,.form-select:focus,.form-textarea:focus {
  border-color: var(--orange);
  box-shadow: 0 0 0 2px var(--orange-dim);
}
.form-input.error,.form-select.error { border-color:var(--error); }
.form-hint  { font-size:11px; color:var(--muted); }
.form-error { font-size:11px; color:var(--error); margin-top:3px; }
.form-textarea { resize:vertical; min-height:90px; line-height:1.6; }

.form-select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='rgba(255,255,255,0.35)' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  padding-right: 34px;
  cursor: pointer;
}
.form-select option { background:var(--black3); color:var(--white); }

.input-wrapper { position:relative; }
.input-icon {
  position: absolute; left:11px; top:50%;
  transform: translateY(-50%);
  color: var(--muted);
  display: flex; align-items: center;
  pointer-events: none;
}
.input-icon svg { width:14px; height:14px; }
.input-wrapper .form-input { padding-left:36px; }
.input-toggle {
  position: absolute; right:10px; top:50%;
  transform: translateY(-50%);
  background: none; border: none; color:var(--muted);
  cursor: pointer; padding:3px; display:flex; align-items:center;
  transition: color var(--transition);
}
.input-toggle:hover { color:var(--white2); }
.input-toggle svg { width:14px; height:14px; }

/* ====================================================
   CARDS
   ==================================================== */
.card {
  background: var(--black2);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 1.25rem;
  transition: border-color var(--transition);
}
.card:hover { border-color:var(--border2); }

/* ====================================================
   LOG GROUP CARD
   ==================================================== */
.log-card {
  background: var(--black2);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 1.1rem;
  cursor: pointer;
  transition: all var(--transition);
  display: flex;
  flex-direction: column;
  gap: 9px;
  position: relative;
  overflow: hidden;
}
.log-card::before {
  content: '';
  position: absolute; top:0; left:0; right:0; height:2px;
  background: var(--orange);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--transition-slow);
}
.log-card:hover { border-color:var(--orange-border); transform:translateY(-2px); box-shadow:var(--shadow-md); }
.log-card:hover::before { transform:scaleX(1); }

.log-card-top { display:flex; align-items:center; justify-content:space-between; }
.log-card-platform {
  display: flex; align-items:center; gap:6px;
  font-size:11px; color:var(--muted); font-weight:500;
  text-transform:uppercase; letter-spacing:.05em;
}
.platform-dot { width:6px; height:6px; border-radius:50%; background:var(--orange); flex-shrink:0; }
.log-card-price { font-family:var(--font-heading); font-size:16px; font-weight:800; color:var(--orange); }
.log-card-title { font-family:var(--font-heading); font-size:15px; font-weight:700; letter-spacing:-.02em; line-height:1.25; }
.log-card-country { font-size:12px; color:var(--muted); }
.log-card-desc { font-size:12px; color:var(--muted); line-height:1.55; }

.log-card-stock { display:flex; align-items:center; justify-content:space-between; gap:8px; }
.stock-bar { flex:1; height:2px; background:var(--border); border-radius:2px; overflow:hidden; }
.stock-fill { height:100%; background:var(--orange); border-radius:2px; transition:width .4s ease; }
.stock-text { font-size:11px; color:var(--muted); white-space:nowrap; }

.log-card-actions { display:flex; gap:7px; margin-top:2px; }

/* ====================================================
   BADGES
   ==================================================== */
.badge {
  display: inline-flex; align-items:center; gap:4px;
  font-size:10px; font-weight:600;
  padding: 2px 8px;
  border-radius: 100px;
  letter-spacing:.04em; text-transform:uppercase; white-space:nowrap;
}
.badge-orange  { background:var(--orange-dim);   color:var(--orange2);  border:1px solid var(--orange-border); }
.badge-success { background:var(--success-dim);  color:var(--success);  border:1px solid var(--success-border); }
.badge-error   { background:var(--error-dim);    color:var(--error);    border:1px solid var(--error-border); }
.badge-muted   { background:rgba(255,255,255,0.04); color:var(--muted); border:1px solid var(--border); }
.badge-info    { background:rgba(59,130,246,0.10); color:var(--info);   border:1px solid rgba(59,130,246,0.28); }

/* ====================================================
   ALERTS & TOASTS
   ==================================================== */
.alert {
  display:flex; align-items:flex-start; gap:9px;
  padding:10px 14px;
  border-radius:var(--radius-md);
  font-size:13px; margin-bottom:0.875rem;
}
.alert svg { width:15px; height:15px; flex-shrink:0; margin-top:1px; }
.alert-success { background:var(--success-dim); border:1px solid var(--success-border); color:var(--success); }
.alert-error   { background:var(--error-dim);   border:1px solid var(--error-border);   color:var(--error); }
.alert-info    { background:rgba(59,130,246,.10); border:1px solid rgba(59,130,246,.28); color:var(--info); }
.alert-warning { background:rgba(245,158,11,.10); border:1px solid rgba(245,158,11,.28); color:var(--warning); }

#toast-container {
  position:fixed; bottom:1.5rem; right:1.5rem; z-index:9000;
  display:flex; flex-direction:column; gap:8px; pointer-events:none;
}
.toast {
  display:flex; align-items:center; gap:9px;
  padding:11px 16px;
  border-radius:var(--radius-md); font-size:13px; font-weight:500;
  background:var(--black3); border:1px solid var(--border);
  box-shadow:var(--shadow-lg); pointer-events:all;
  animation:slideInRight .25s ease, fadeOut .3s ease 3.2s forwards;
  max-width:320px;
}
.toast svg { width:15px; height:15px; flex-shrink:0; }
.toast-success { border-color:var(--success-border); }
.toast-error   { border-color:var(--error-border); }
.toast-warning { border-color:rgba(245,158,11,.28); }

/* ====================================================
   MODAL
   ==================================================== */
.modal-overlay {
  position:fixed; inset:0;
  background:rgba(0,0,0,0.72);
  backdrop-filter:blur(8px);
  z-index:2000;
  display:flex; align-items:center; justify-content:center;
  padding:1rem;
  opacity:0; pointer-events:none;
  transition:opacity var(--transition);
}
.modal-overlay.open { opacity:1; pointer-events:all; }

.modal {
  background:var(--black2);
  border:1px solid var(--border2);
  border-radius:var(--radius-2xl);
  width:100%; max-width:660px;
  max-height:88vh; overflow-y:auto;
  transform:translateY(16px) scale(0.99);
  transition:transform var(--transition);
  box-shadow:var(--shadow-lg);
}
.modal-overlay.open .modal { transform:translateY(0) scale(1); }

.modal-header {
  display:flex; align-items:center; justify-content:space-between;
  padding:1.25rem 1.5rem;
  border-bottom:1px solid var(--border);
  position:sticky; top:0; background:var(--black2); z-index:1;
}
.modal-title { font-family:var(--font-heading); font-size:16px; font-weight:700; }
.modal-close {
  width:28px; height:28px;
  background:rgba(255,255,255,0.05); border:1px solid var(--border);
  border-radius:var(--radius-sm);
  display:flex; align-items:center; justify-content:center;
  cursor:pointer; color:var(--muted); transition:all var(--transition);
}
.modal-close:hover { background:rgba(255,255,255,0.09); color:var(--white); }
.modal-close svg { width:13px; height:13px; }
.modal-body   { padding:1.5rem; }
.modal-footer {
  padding:1rem 1.5rem;
  border-top:1px solid var(--border);
  display:flex; align-items:center; justify-content:flex-end; gap:8px;
}

/* ====================================================
   DASHBOARD LAYOUT
   ==================================================== */
.dash-layout { display:flex; min-height:100vh; padding-top:var(--nav-height); }

.dash-sidebar {
  width: var(--sidebar-width);
  background: var(--black2);
  border-right: 1px solid var(--border);
  position: fixed;
  top: var(--nav-height); left:0; bottom:0;
  overflow-y: auto;
  padding: 1.25rem 0.875rem;
  z-index: 500;
  transition: transform var(--transition);
}
.dash-content { flex:1; margin-left:var(--sidebar-width); padding:1.75rem 2rem; min-width:0; }

.sidebar-nav { display:flex; flex-direction:column; gap:1px; }
.sidebar-link {
  display:flex; align-items:center; gap:9px;
  padding:8px 10px;
  border-radius:var(--radius-md);
  font-size:13px; color:var(--muted);
  transition:all var(--transition);
  font-weight:400; text-decoration:none;
  border:1px solid transparent;
}
.sidebar-link:hover { color:var(--white2); background:rgba(255,255,255,0.045); }
.sidebar-link.active { color:var(--white); background:var(--orange-dim); border-color:var(--orange-border); font-weight:500; }
.sidebar-link.active .sidebar-icon { color:var(--orange); }
.sidebar-icon { display:flex; align-items:center; flex-shrink:0; }
.sidebar-icon svg { width:15px; height:15px; }
.sidebar-section-label {
  font-size:10px; font-weight:600; text-transform:uppercase;
  letter-spacing:.1em; color:var(--muted2);
  padding:0 10px; margin:1rem 0 3px;
}

/* ====================================================
   STAT CARDS
   ==================================================== */
.stats-grid {
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(175px,1fr));
  gap:12px; margin-bottom:1.5rem;
}
.stat-card {
  background:var(--black2); border:1px solid var(--border);
  border-radius:var(--radius-lg); padding:1.1rem 1.25rem;
  transition:border-color var(--transition);
}
.stat-card:hover { border-color:var(--border2); }
.stat-label {
  font-size:11px; color:var(--muted);
  text-transform:uppercase; letter-spacing:.07em;
  margin-bottom:6px; font-weight:500;
}
.stat-value {
  font-family:var(--font-heading); font-size:24px; font-weight:800;
  letter-spacing:-.03em; margin-bottom:3px; color:var(--white);
}
.stat-value .currency { color:var(--orange); }
.stat-change { font-size:11px; color:var(--muted); }
.stat-change.up   { color:var(--success); }
.stat-change.down { color:var(--error); }

/* ====================================================
   TABLE
   ==================================================== */
.table-wrapper {
  background:var(--black2); border:1px solid var(--border);
  border-radius:var(--radius-lg); overflow:hidden;
}
.table-header {
  display:flex; align-items:center; justify-content:space-between;
  padding:1rem 1.25rem; border-bottom:1px solid var(--border);
  gap:1rem; flex-wrap:wrap;
}
.table-title { font-family:var(--font-heading); font-size:14px; font-weight:700; }
table { width:100%; border-collapse:collapse; }
th {
  font-size:10px; font-weight:600; text-transform:uppercase;
  letter-spacing:.07em; color:var(--muted);
  padding:9px 1.25rem; text-align:left;
  border-bottom:1px solid var(--border); white-space:nowrap;
}
td {
  font-size:13px; padding:11px 1.25rem;
  border-bottom:1px solid var(--border);
  color:var(--white2); vertical-align:middle;
}
tr:last-child td { border-bottom:none; }
tr:hover td { background:rgba(255,255,255,0.018); }

/* ====================================================
   PAGINATION
   ==================================================== */
.pagination { display:flex; align-items:center; justify-content:center; gap:5px; padding:1.25rem; }
.page-btn {
  width:32px; height:32px; display:flex; align-items:center; justify-content:center;
  border-radius:var(--radius-md); font-size:13px; cursor:pointer;
  background:var(--black3); border:1px solid var(--border); color:var(--muted);
  transition:all var(--transition);
}
.page-btn:hover { border-color:var(--border2); color:var(--white); }
.page-btn.active { background:var(--orange); border-color:var(--orange); color:#fff; }
.page-btn:disabled { opacity:.4; cursor:not-allowed; }

/* ====================================================
   EMPTY STATE
   ==================================================== */
.empty-state {
  display:flex; flex-direction:column; align-items:center;
  justify-content:center; text-align:center;
  padding:3rem 1.5rem; gap:10px;
}
.empty-icon { opacity:.35; margin-bottom:6px; }
.empty-icon svg { width:40px; height:40px; }
.empty-title { font-family:var(--font-heading); font-size:16px; font-weight:700; color:var(--white2); }
.empty-sub   { font-size:13px; color:var(--muted); max-width:260px; }

/* ====================================================
   SPINNER
   ==================================================== */
.spinner {
  width:22px; height:22px;
  border:2px solid var(--border);
  border-top-color:var(--orange);
  border-radius:50%;
  animation:spin .55s linear infinite;
  flex-shrink:0;
}
.spinner-lg { width:36px; height:36px; border-width:3px; }

#page-loader {
  position:fixed; inset:0; background:var(--black);
  display:flex; align-items:center; justify-content:center;
  z-index:9998; transition:opacity .3s ease;
}
#page-loader.hidden { opacity:0; pointer-events:none; }

/* ====================================================
   SECTION UTILITIES
   ==================================================== */
.section-label {
  font-size:10px; font-weight:600; letter-spacing:.14em;
  text-transform:uppercase; color:var(--orange);
  margin-bottom:6px; display:flex; align-items:center; gap:7px;
}
.section-label::before { content:''; width:14px; height:1px; background:var(--orange); }

.section-title {
  font-family:var(--font-heading);
  font-size:clamp(1.6rem,3.5vw,2.4rem);
  font-weight:800; letter-spacing:-.035em;
  line-height:1.1; margin-bottom:0.65rem;
}
.section-sub {
  font-size:14px; color:var(--muted);
  max-width:480px; line-height:1.7; font-weight:300;
}

/* ====================================================
   WALLET CARD
   ==================================================== */
.wallet-card {
  background:linear-gradient(135deg,#120800 0%,#161616 100%);
  border:1px solid var(--orange-border);
  border-radius:var(--radius-xl); padding:1.75rem;
  position:relative; overflow:hidden;
}

/* ====================================================
   CODE BLOCK
   ==================================================== */
.code-block {
  background:#0A0A0A; border:1px solid rgba(255,255,255,0.06);
  border-radius:var(--radius-lg); padding:1.1rem 1.25rem;
  font-family:'Courier New',monospace; font-size:12px;
  line-height:1.8; overflow-x:auto; position:relative;
}
.code-copy {
  position:absolute; top:8px; right:8px;
  background:rgba(255,255,255,0.06); border:1px solid var(--border);
  border-radius:var(--radius-sm); padding:3px 9px;
  font-size:11px; color:var(--muted); cursor:pointer;
  font-family:var(--font-body); transition:all var(--transition);
}
.code-copy:hover { color:var(--white); background:rgba(255,255,255,0.10); }
.c-key  { color:#7CB9FF; }
.c-str  { color:#FF9061; }
.c-val  { color:#7CFFC4; }
.c-muted{ color:rgba(255,255,255,0.28); }

/* ====================================================
   ANIMATIONS
   ==================================================== */
@keyframes spin         { to { transform:rotate(360deg); } }
@keyframes pulse        { 0%,100%{opacity:1;transform:scale(1)} 50%{opacity:.5;transform:scale(.82)} }
@keyframes fadeInUp     { from{opacity:0;transform:translateY(20px)} to{opacity:1;transform:translateY(0)} }
@keyframes slideInRight { from{opacity:0;transform:translateX(16px)} to{opacity:1;transform:translateX(0)} }
@keyframes fadeOut      { to{opacity:0;transform:translateX(8px)} }
@keyframes shimmer      { 0%{background-position:-200% 0} 100%{background-position:200% 0} }
@keyframes shake        { 0%,100%{transform:translateX(0)} 20%,60%{transform:translateX(-5px)} 40%,80%{transform:translateX(5px)} }

.animate-fade-up { animation:fadeInUp .5s ease forwards; opacity:0; }

.skeleton {
  background:linear-gradient(90deg,var(--black3) 25%,var(--black4) 50%,var(--black3) 75%);
  background-size:200% 100%;
  animation:shimmer 1.4s infinite;
  border-radius:var(--radius-md);
}

/* ====================================================
   PAGE HEADER
   ==================================================== */
.page-header { margin-bottom:1.75rem; }
.page-header h1 { font-size:22px; font-weight:800; letter-spacing:-.03em; margin-bottom:3px; }
.page-header p  { font-size:13px; color:var(--muted); }

/* ====================================================
   UTILITY
   ==================================================== */
.hidden { display:none !important; }
.truncate { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.text-orange  { color:var(--orange); }
.text-muted   { color:var(--muted); }
.text-success { color:var(--success); }
.text-error   { color:var(--error); }
.flex-between { display:flex; align-items:center; justify-content:space-between; }

/* ====================================================
   RESPONSIVE
   ==================================================== */
@media (max-width:768px) {
  .navbar { padding:0 1.1rem; }
  .nav-links { display:none; }
  .nav-hamburger { display:flex; }
  .dash-sidebar { transform:translateX(-100%); z-index:600; }
  .dash-sidebar.open { transform:translateX(0); box-shadow:var(--shadow-lg); }
  .dash-content { margin-left:0 !important; padding:1.1rem; }
  .stats-grid { grid-template-columns:repeat(2,1fr); }
  .modal { max-width:100%; border-radius:var(--radius-xl) var(--radius-xl) 0 0; align-self:flex-end; }
  .modal-overlay { align-items:flex-end; padding:0; }
  #toast-container { bottom:.875rem; right:.875rem; left:.875rem; }
  .toast { max-width:100%; }
  th,td { padding:9px 1rem; }
}
@media (max-width:480px) {
  .stats-grid { grid-template-columns:1fr; }
  .btn-lg { font-size:13px; padding:10px 20px; }
}