@import url("tokens.css");

:root {
  /* ── Surfaces ── */
  --clr-bg: #faf7f2;
  --clr-surface: #ffffff;
  --clr-surface-alt: #f5f0e8;
  --clr-text: #1e1b2e;
  --clr-text-muted: #6b7280;
  --clr-text-light: #9ca3af;
  --clr-primary: #1e1b2e;
  --clr-primary-hover: #2d2a3e;
  /* ── Dorado Legatium (premium metal, not neon gold) ── */
  --clr-accent: #c5a059;
  --clr-accent-hover: #b8860b;
  --clr-accent-light: rgba(197, 160, 89, 0.12);
  --clr-accent-soft: #e8d194;
  --clr-accent-deep: #8b6914;
  --gold-gradient: linear-gradient(135deg, #e8d194 0%, #c5a059 42%, #d4af37 68%, #b8860b 100%);
  --gold-gradient-text: linear-gradient(135deg, #e8d194, #c5a059 40%, #b8860b);
  --gold-glow: 0 8px 28px rgba(197, 160, 89, 0.22);
  --clr-error: #ef4444;
  --clr-error-bg: #fef2f2;
  --clr-success: #10b981;
  --clr-success-bg: #ecfdf5;
  --clr-warning: #b8860b;
  --clr-warning-bg: #fffbeb;
  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-heading: 'Outfit', 'Inter', sans-serif;
  --shadow-sm: 0 1px 2px 0 rgba(0,0,0,0.04);
  --shadow-md: 0 4px 16px -2px rgba(197,160,89,0.08), 0 2px 6px rgba(0,0,0,0.03);
  --shadow-lg: 0 12px 32px -4px rgba(197,160,89,0.12), 0 4px 10px rgba(0,0,0,0.04);
  --shadow-glass: 0 8px 32px 0 rgba(30,27,46,0.08);
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  --radius-full: 9999px;
  --transition: 250ms cubic-bezier(0.4,0,0.2,1);
  /* Layout */
  --content-max: 1400px;
  --content-ultrawide: 1680px;
  --page-gutter: clamp(1rem, 3vw, 3rem);
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:var(--font-sans);background-color:var(--clr-bg);background-image:radial-gradient(ellipse 55% 40% at 90% 0%, rgba(197,160,89,0.10) 0%, transparent 55%), radial-gradient(ellipse 45% 35% at 10% 100%, rgba(184,134,11,0.07) 0%, transparent 50%), linear-gradient(165deg, #faf7f2 0%, #f8fafc 100%);background-attachment:fixed;color:var(--clr-text);line-height:1.5;-webkit-font-smoothing:antialiased;overflow-x:hidden}
/* Premium metallic text utility */
.text-gold-metal{background:var(--gold-gradient-text);-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent}
h1,h2,h3,h4,h5,h6{font-family:var(--font-heading);font-weight:500;color:var(--clr-primary);line-height:1.2}
a{color:var(--clr-accent);text-decoration:none;transition:color var(--transition)}
a:hover{color:var(--clr-primary)}
img{max-width:100%;height:auto}
svg{flex-shrink:0}

.bento,.lg-bento-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));grid-auto-rows:minmax(auto,auto);gap:24px;width:100%;max-width:1200px;margin:0 auto}
.bento-card,.lg-bento-card{background:var(--clr-surface);border-radius:var(--radius-xl);padding:24px;border:1px solid #e2e8f0;box-shadow:var(--shadow-sm);transition:all var(--transition);display:flex;flex-direction:column}
.bento-card:hover,.lg-bento-card:hover{box-shadow: 0 12px 30px rgba(197,160,89,0.15);transform:translateY(-5px) scale(1.01);border-color:rgba(197,160,89,0.4)}
.bento-card.no-hover:hover,.lg-bento-card.no-hover:hover{transform:none;box-shadow:var(--shadow-sm);border-color:#e2e8f0}

/* Native Tooltips */
[data-tooltip] {
    position: relative;
    cursor: pointer;
}
[data-tooltip]::before {
    content: attr(data-tooltip);
    position: absolute;
    bottom: 110%;
    left: 50%;
    transform: translateX(-50%) translateY(10px);
    background: rgba(30, 27, 46, 0.9);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    color: #fff;
    padding: 6px 12px;
    border-radius: var(--radius-sm);
    font-size: 0.8rem;
    font-weight: 500;
    white-space: nowrap;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    box-shadow: 0 4px 15px rgba(0,0,0,0.2);
    pointer-events: none;
    z-index: 1000;
}
[data-tooltip]:hover::before {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0);
}
.s1,.lg-span-1{grid-column:span 1}.s2,.lg-span-2{grid-column:span 2}.s3,.lg-span-3{grid-column:span 3}.s4,.lg-span-4{grid-column:span 4}
.r1,.lg-row-span-1{grid-row:span 1}.r2,.lg-row-span-2{grid-row:span 2}
.bento-title,.lg-bento-title{font-size:1.15rem;font-weight:700;color:var(--clr-primary);margin:0 0 8px;display:flex;align-items:center;gap:10px}
.bento-title svg,.lg-bento-title svg{color:var(--clr-accent)}
.bento-desc,.lg-bento-desc{font-size:.9rem;color:var(--clr-text-muted);line-height:1.5;margin:0}

.dsh,.lg-dashboard-layout{display:flex;min-height:100vh}
.sidebar,.lg-sidebar{width:260px;background:var(--clr-surface);border-right:1px solid rgba(0,0,0,.05);display:flex;flex-direction:column;position:sticky;top:0;height:100vh;padding:1.5rem 1rem;z-index:40;transition:width var(--transition),transform var(--transition);overflow-y:auto}
.sidebar.mini,.lg-sidebar.mini{width:80px;align-items:center;overflow:visible !important}
.sidebar.mini .brand-text,.sidebar.mini .nav-item span,.sidebar.mini .hide-mini,
.lg-sidebar.mini .brand-text,.lg-sidebar.mini .nav-item span,.lg-sidebar.mini .hide-mini,
.lg-sidebar.mini .lg-brand-text,.lg-sidebar.mini .lg-nav-item span{display:none}
.sidebar.mini .nav-item,.lg-sidebar.mini .lg-nav-item{justify-content:center;padding:.75rem;width:48px;margin:0 auto .25rem}
.sidebar-overlay,.lg-sidebar-overlay{display:none;position:fixed;inset:0;background:rgba(15,23,42,.5);z-index:35}
/* Main column: fill space next to sidebar. Do NOT put max-width+margin:auto on the flex child itself
   (that centers the whole pane vs viewport and ignores the sidebar). Constrain INNER content instead. */
.main,.lg-main-content{flex:1;padding:2rem var(--page-gutter,3rem);max-width:none;margin:0;width:auto;min-width:0}
.lg-dashboard-layout > .main,
.lg-dashboard-layout > .lg-main-content,
.dsh > .main,
.dsh > .lg-main-content{flex:1 1 0%;max-width:none;margin:0;width:auto;min-width:0}
/* Ultrawide: slightly more padding only (width still fills remaining space after sidebar) */
@media (min-width:1920px){
  .main,.lg-main-content{padding-left:clamp(2rem,4vw,4rem);padding-right:clamp(2rem,4vw,4rem)}
  .bento,.lg-bento-grid{max-width:1600px}
  .section-title{font-size:clamp(2rem,2.2vw,2.6rem)}
}
.brand{display:flex;align-items:center;gap:10px;margin-bottom:2rem;padding:0 .5rem;height:40px}
.brand svg{flex-shrink:0}
.brand-text,.lg-brand-text{font-family:var(--font-heading);font-weight:700;font-size:1.2rem;color:var(--clr-primary);letter-spacing:1px;white-space:nowrap}
.nav-item,.lg-nav-item{display:flex;align-items:center;padding:.75rem 1rem;color:var(--clr-text-muted);border-radius:var(--radius-md);font-weight:500;font-size:.95rem;margin-bottom:.25rem;transition:all var(--transition);gap:.75rem}
.nav-item:hover,.lg-nav-item:hover{background:var(--clr-bg);color:var(--clr-primary)}
.nav-item.active,.lg-nav-item.active{background:var(--clr-surface-alt);color:var(--clr-primary);font-weight:600}
.nav-border{border-top:1px solid rgba(197,160,89,0.18);padding-top:1rem;margin-top:1rem;display:flex;flex-direction:column;gap:.25rem}
.sidebar-toggle,.lg-sidebar-toggle-btn{position:absolute;bottom:24px;left:50%;transform:translateX(-50%);background:var(--clr-surface-alt);border:1px solid #e2e8f0;color:var(--clr-primary);width:40px;height:40px;border-radius:50%;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all var(--transition);z-index:50}
.sidebar-toggle:hover,.lg-sidebar-toggle-btn:hover{background:var(--clr-accent-light);color:var(--clr-accent-hover);border-color:var(--clr-accent)}

.topbar,.lg-topbar{display:none;background:var(--clr-surface);border-bottom:1px solid rgba(0,0,0,.05);height:64px;position:fixed;top:0;left:0;right:0;z-index:90;align-items:center;padding:0 20px}
.topbar-logo,.lg-topbar-logo{font-family:var(--font-heading);font-weight:700;font-size:1.2rem;color:var(--clr-primary)}
.mobile-toggle,.lg-mobile-toggle{background:none;border:none;color:var(--clr-primary);padding:8px;cursor:pointer;border-radius:8px;display:flex;align-items:center;justify-content:center;margin-right:12px}
.mobile-toggle:hover,.lg-mobile-toggle:hover{background:var(--clr-surface-alt)}

.card,.lg-card{background:var(--clr-surface);border-radius:var(--radius-lg);padding:1.5rem;box-shadow:var(--shadow-sm);border:1px solid rgba(0,0,0,.03);transition:transform var(--transition),box-shadow var(--transition)}
.card:hover,.lg-card:hover{transform:translateY(-2px);box-shadow:var(--shadow-md)}
.card-title,.lg-card-title{font-family:var(--font-heading);font-size:1.25rem;font-weight:700;color:var(--clr-primary);margin-bottom:8px}
.card-subtitle,.lg-card-subtitle{color:var(--clr-text-muted);font-size:.95rem;margin-bottom:20px;line-height:1.5}

.input-group{margin-bottom:1.25rem}
.label,.lg-label{display:block;font-size:.875rem;font-weight:500;color:var(--clr-primary);margin-bottom:.5rem}
.input,.lg-input{width:100%;padding:.75rem 1rem;font-size:.95rem;font-family:var(--font-sans);color:var(--clr-text);background:var(--clr-surface);border:1.5px solid #e2e8f0;border-radius:var(--radius-md);transition:all var(--transition);box-shadow:0 1px 2px rgba(0,0,0,.02) inset}
.input:hover,.lg-input:hover{border-color:#cbd5e1}
.input:focus,.lg-input:focus{outline:2px solid transparent;outline-offset:2px;border-color:var(--clr-accent);box-shadow:0 0 0 3px rgba(197,160,89,.15)}
.input::placeholder,.lg-input::placeholder{color:var(--clr-text-light);opacity:1}
.input:disabled,.lg-input:disabled{opacity:.5;cursor:not-allowed;background:var(--clr-surface-alt,#f5f0e8)}
.input.is-valid,.lg-input.is-valid{border-color:#10b981;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2310b981' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right .75rem center;background-size:1rem;padding-right:2.5rem}
.input.is-invalid,.lg-input.is-invalid{border-color:#ef4444;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23ef4444' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cline x1='15' y1='9' x2='9' y2='15'%3E%3C/line%3E%3Cline x1='9' y1='9' x2='15' y2='15'%3E%3C/line%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right .75rem center;background-size:1rem;padding-right:2.5rem}
.lg-field-error{display:block;margin-top:4px;font-size:.8rem;color:#ef4444}
.lg-field-success{display:block;margin-top:4px;font-size:.8rem;color:#10b981}
select.input{cursor:pointer;-webkit-appearance:none;appearance:none;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='%236b7280' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right .75rem center;background-size:.75rem;padding-right:2.25rem}
textarea.input{resize:vertical;min-height:100px}

.btn,.lg-btn{display:inline-flex;align-items:center;justify-content:center;padding:.75rem 1.5rem;font-size:.95rem;font-weight:500;font-family:var(--font-sans);border-radius:var(--radius-md);border:none;cursor:pointer;transition:all var(--transition);text-align:center;gap:.5rem}
.btn:hover,.lg-btn:hover{transform:translateY(-2px);box-shadow:var(--shadow-md)}
/* Primary CTAs: gold filled + dark text (readable, clearly buttons) */
.btn-p,.lg-btn-primary,.btn-a,.lg-btn-accent{background-image:var(--gold-gradient);background-color:var(--clr-accent);color:#1a1208;box-shadow:var(--gold-glow);font-weight:700;min-height:44px;border:1.5px solid rgba(139,105,20,.35)}
.btn-p:hover,.lg-btn-primary:hover,.btn-a:hover,.lg-btn-accent:hover{filter:brightness(1.05);box-shadow:0 10px 32px rgba(197,160,89,0.32);color:#1a1208}
.btn-o,.lg-btn-outline{background:#fff;border:1.5px solid rgba(30,27,46,.2);color:var(--clr-primary);min-height:44px;font-weight:600}
.btn-o:hover,.lg-btn-outline:hover{background:rgba(197,160,89,.08);border-color:var(--clr-accent);color:var(--clr-primary)}
.btn-d,.lg-btn-danger{background:var(--clr-error);color:#fff;border:none}
.btn-d:hover,.lg-btn-danger:hover{background:#dc2626;color:#fff}
.btn-success,.lg-btn-success{background:linear-gradient(135deg,#34d399,#10b981 50%,#059669);background-color:#10b981;color:#fff;border:none;font-weight:700;min-height:44px}
.btn-success:hover,.lg-btn-success:hover{background:#059669;color:#fff;filter:none}
.btn-edit,.lg-btn-edit{background:linear-gradient(135deg,#60a5fa,#3b82f6 55%,#2563eb);background-color:#3b82f6;color:#fff;border:none;font-weight:700;min-height:44px}
.btn-edit:hover,.lg-btn-edit:hover{background:#2563eb;color:#fff;filter:none}
.btn-sm,.lg-btn-sm{padding:.5rem 1rem;font-size:.85rem}
.btn-full,.lg-btn-full{width:100%}
/* Search / lookup = gold primary (must have color even if portal.css not loaded) */
.lg-btn-search,.btn-search{
  background-image:var(--gold-gradient,linear-gradient(135deg,#e2c37d,#c5a059 48%,#b8860b));
  background-color:var(--clr-accent,#c5a059);
  color:#1a1208!important;
  border:1.5px solid rgba(139,105,20,.4)!important;
  font-weight:700!important;
  min-height:40px;
  box-shadow:0 4px 14px rgba(197,160,89,.28)
}
.lg-btn-search:hover,.btn-search:hover{
  filter:brightness(1.05);
  color:#1a1208!important;
  box-shadow:0 8px 22px rgba(197,160,89,.35)
}
/* Upload fallback if portal.css missing */
.lg-btn-upload,.btn-upload{
  background:linear-gradient(135deg,#a78bfa,#8b5cf6 50%,#7c3aed)!important;
  background-color:#8b5cf6!important;
  color:#fff!important;
  border:1.5px solid #6d28d9!important;
  font-weight:700!important;
  min-height:40px
}
.lg-btn-upload:hover,.btn-upload:hover{background:#7c3aed!important;color:#fff!important}
.btn-ghost{background:transparent;border:none;color:var(--clr-text-muted);padding:8px 14px;border-radius:var(--radius-md);font-weight:600;cursor:pointer;transition:all var(--transition);font-size:.85rem}
.btn-premium-upload{background-image:var(--gold-gradient);background-color:var(--clr-accent);color:#fff;border:none;display:inline-flex;align-items:center;justify-content:center;gap:8px;font-weight:600;transition:all var(--transition);padding:.75rem 1.5rem;border-radius:var(--radius-md);cursor:pointer;box-shadow:var(--gold-glow)}
.btn-premium-upload:hover{filter:brightness(1.06);color:#fff;transform:translateY(-2px);box-shadow:0 10px 32px rgba(197,160,89,0.32)}
.btn-premium-outline{background:transparent;color:var(--clr-accent);border:1px solid var(--clr-accent);display:inline-flex;align-items:center;justify-content:center;gap:8px;font-weight:600;transition:all var(--transition);padding:.75rem 1.5rem;border-radius:var(--radius-md);cursor:pointer}
.btn-premium-outline:hover{background:var(--clr-accent-light);color:var(--clr-accent-hover);border-color:var(--clr-accent)}
.btn-ghost:hover{background:var(--clr-bg);color:var(--clr-primary)}

.alert,.lg-alert{padding:1rem;border-radius:var(--radius-md);margin-bottom:1.5rem;font-size:.9rem;display:flex;align-items:flex-start;gap:.75rem}
.alert-e,.lg-alert-error{background:var(--clr-error-bg);color:var(--clr-error);border:1px solid rgba(239,68,68,.2)}
.alert-s,.lg-alert-success{background:var(--clr-success-bg);color:var(--clr-success);border:1px solid rgba(16,185,129,.2)}
.alert-w{background:var(--clr-warning-bg);color:#92400e;border:1px solid #fcd34d}

.lg-modal-overlay, .modal-overlay{display:none;position:fixed;inset:0;background:rgba(15,23,42,.6);z-index:9999;align-items:center;justify-content:center;padding:20px;backdrop-filter:blur(4px)}
.lg-modal-overlay.active, .modal-overlay.active{display:flex}
.lg-modal-box, .modal{background:var(--clr-surface);width:100%;max-width:500px;border-radius:var(--radius-xl);padding:32px;box-shadow:var(--shadow-glass);animation:slideUp .3s ease-out;position:relative;max-height:90vh;overflow-y:auto}
.modal-title{margin:0 0 8px;color:var(--clr-primary);font-family:var(--font-heading);font-size:1.25rem;display:flex;align-items:center;gap:8px}
.modal-sub{color:var(--clr-text-muted);font-size:.9rem;margin:0 0 24px;line-height:1.5}
.modal-close{position:absolute;top:24px;right:24px;background:none;border:none;font-size:1.5rem;color:var(--clr-text-light);cursor:pointer;line-height:1;transition:all var(--transition);padding:4px}
.modal-close:hover{color:var(--clr-error)}
.lg-modal-actions, .modal-actions{display:flex;gap:12px;margin-top:24px;justify-content:flex-end}
@keyframes slideUp{from{transform:translateY(20px);opacity:0}to{transform:translateY(0);opacity:1}}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}

.storage-bar{background:var(--clr-surface);border-radius:var(--radius-lg);padding:18px 22px;margin-bottom:20px;display:flex;align-items:center;gap:16px;flex-wrap:wrap;box-shadow:var(--shadow-sm)}
.storage-bar .label{font-weight:600;color:var(--clr-primary);font-size:.95rem;white-space:nowrap}
.storage-track{flex:1;min-width:120px;height:8px;background:var(--clr-bg);border-radius:var(--radius-full);overflow:hidden}
.storage-fill{height:100%;border-radius:var(--radius-full);background:var(--clr-primary);transition:width .6s ease}
.storage-text{font-size:.85rem;color:var(--clr-text-muted);white-space:nowrap;font-weight:500}

/* Circular progress for dashboard storage */
.lg-progress-circle,.progress-circle{width:110px;height:110px;border-radius:50%;background:conic-gradient(var(--clr-primary) 0%,var(--clr-primary) calc(var(--percentage)*1%),#e2e8f0 calc(var(--percentage)*1%),#e2e8f0 100%);display:flex;align-items:center;justify-content:center;position:relative;flex-shrink:0}
.lg-progress-circle::before,.progress-circle::before{content:'';position:absolute;width:88px;height:88px;border-radius:50%;background:var(--clr-surface)}
.lg-progress-value,.progress-value{position:relative;z-index:1;font-size:1.4rem;font-weight:700;color:var(--clr-primary)}
/* Small variant */
.lg-progress-circle.sm,.progress-circle.sm{width:80px;height:80px}
.lg-progress-circle.sm::before,.progress-circle.sm::before{width:64px;height:64px}
.lg-progress-circle.sm .lg-progress-value,.progress-circle.sm .progress-value{font-size:1rem}

.empty-state{text-align:center;padding:60px 20px;background:var(--clr-surface);border-radius:var(--radius-lg);border:2px dashed #e2e8f0;display:flex;flex-direction:column;align-items:center;gap:12px}
.empty-state .icon{font-size:3.5rem;color:var(--clr-text-light)}
.empty-state h3{color:var(--clr-primary);margin:0;font-family:var(--font-heading);font-size:1.25rem}
.empty-state p{color:var(--clr-text-muted);font-size:.95rem;margin:0}



.text-center{text-align:center}
.mt-1{margin-top:.25rem}.mt-2{margin-top:.5rem}.mt-4{margin-top:1rem}.mt-6{margin-top:1.5rem}.mt-8{margin-top:2rem}
.mb-4{margin-bottom:1rem}.mb-6{margin-bottom:1.5rem}
.p-4{padding:1rem}.p-6{padding:1.5rem}
.gap-2{gap:.5rem}.gap-3{gap:.75rem}.gap-4{gap:1rem}
.flex{display:flex}
.flex-wrap{flex-wrap:wrap}
.items-center{align-items:center}
.justify-center{justify-content:center}
.justify-between{justify-content:space-between}
.flex-1{flex:1}
.w-full{width:100%}
.pos-rel{position:relative}
.overflow-hidden{overflow:hidden}

/* === Page layout for non-dashboard pages === */
.page-center{display:flex;flex-direction:column;align-items:center;min-height:100vh;padding:1.5rem;background:var(--clr-bg)}
.page-center .bento,.page-center.bento{max-width:960px;margin:0 auto}
.page-header-btn{position:absolute;top:20px;left:20px;z-index:100;margin:0!important}

/* === Landing sections === */
.section{padding:80px 5%}
.section-dark{background:var(--clr-surface)}

/* === Bento hero card === */
.hero-bento{padding:60px 40px;align-items:center;text-align:center;position:relative;overflow:hidden;background:radial-gradient(circle at top,rgba(197,160,89,.08) 0%,transparent 60%)}
.hero-bento-title{font-size:clamp(2rem,5vw,3.5rem);margin-bottom:20px;line-height:1.1;justify-content:center;flex-wrap:wrap}
.hero-bento-desc{font-size:clamp(1rem,2vw,1.25rem);max-width:800px;margin:0 auto 40px;text-align:center}

/* Light brand card — cream + gold (no dark panels) */
.brand-card{background:linear-gradient(160deg,#fffefb 0%,#faf3e0 45%,#f0dfb8 100%)!important;color:var(--clr-primary)!important;border:1px solid rgba(197,160,89,0.25)!important;justify-content:center;gap:2rem;padding:48px!important;box-shadow:0 12px 40px rgba(197,160,89,0.12)!important}
.brand-card .bento-title,.brand-card .bento-desc{color:var(--clr-primary)}
.brand-card .bento-title svg{color:var(--clr-accent)}
.brand-card .bento-desc{color:var(--clr-text-muted)}
.brand-card .lg-brand-logo{margin-bottom:2rem}
.brand-card h1{color:var(--clr-primary);font-family:var(--font-heading);line-height:1.2;font-weight:600}
.brand-card .badge-accent{display:inline-flex;align-items:center;gap:6px;background:rgba(197,160,89,.12);color:var(--clr-accent);padding:5px 14px;border-radius:var(--radius-full);font-size:.72rem;font-weight:700;border:1px solid rgba(197,160,89,.2);letter-spacing:.3px}
.brand-card .step-progress{margin-top:2rem}
.brand-sub{color:rgba(61,46,30,0.55);font-size:.85rem;text-transform:uppercase;letter-spacing:1px;font-weight:500;margin-bottom:.5rem}
.brand-glow{background:rgba(255,255,255,.65);border:1px solid rgba(197,160,89,.22);border-radius:var(--radius-lg);padding:1.25rem;backdrop-filter:blur(8px)}
.brand-glow p{color:var(--clr-text);font-size:.9rem;line-height:1.6;margin:0}
.brand-glow strong{color:var(--clr-accent-deep,#8b6914);display:block;margin-bottom:4px}

/* === Wizard form card === */
.form-card{padding:36px!important;justify-content:center}
.form-card .bento-title{margin-bottom:4px}
.form-card .bento-desc{margin-bottom:24px}
.wizard-section-title{font-size:.85rem;text-transform:uppercase;color:var(--clr-text-muted);font-weight:700;margin:0 0 16px;border-bottom:1px solid #e2e8f0;padding-bottom:8px}

/* === Pricing specific === */
.pricing-card{text-align:left}
.pricing-card .price{font-size:3rem;font-weight:700;color:var(--clr-primary);margin:8px 0 16px}
.pricing-card .price span{font-size:1rem;font-weight:400;color:var(--clr-text-muted)}
.pricing-features{list-style:none;padding:0;margin:0 0 24px;flex:1}
.pricing-features li{margin-bottom:10px;color:var(--clr-text-muted)}
.pricing-features li::before{content:"✓ ";color:var(--clr-success);font-weight:700}
.pricing-popular{border-color:var(--clr-accent)!important;position:relative}
.pricing-popular-badge{position:absolute;top:-14px;left:50%;transform:translateX(-50%);background:var(--clr-accent);color:#fff;padding:6px 18px;border-radius:var(--radius-full);font-size:.8rem;font-weight:700;white-space:nowrap}

/* === Step number circle === */
.step-circle{width:44px;height:44px;border-radius:50%;background:var(--clr-accent);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:1.2rem;margin-bottom:16px;flex-shrink:0}

/* === Cookie consent === */
.cookie-bar{position:fixed;bottom:0;left:0;width:100%;background:var(--clr-surface);z-index:9999;padding:25px 30px;box-shadow:0 -10px 40px rgba(0,0,0,.15);animation:slideUp .5s ease-out}
.cookie-inner{max-width:1000px;margin:0 auto;display:flex;flex-wrap:wrap;align-items:center;gap:20px;justify-content:space-between}
.cookie-text{flex:1;min-width:280px}
.cookie-text h3{margin:0 0 8px;font-size:1.15rem;display:flex;align-items:center;gap:8px}
.cookie-text p{line-height:1.5;margin:0;font-size:.9rem}

/* === Bento hero landing refinements === */
.landing-nav{display:flex;align-items:center;padding:1rem 5%;justify-content:space-between;background:var(--clr-surface);box-shadow:var(--shadow-sm);position:sticky;top:0;z-index:100;gap:1rem}
.landing-logo{display:flex;align-items:center;gap:10px}
.landing-logo span{font-family:var(--font-heading);font-weight:700;font-size:1.3rem;letter-spacing:1px}
.landing-links{display:flex;align-items:center;gap:8px}
.hero-section{max-width:1200px;margin:0 auto}
.feature-icon{font-size:2.5rem;display:block;margin-bottom:15px}

/* === Back button === */
.back-btn{display:inline-flex;align-items:center;gap:8px;color:var(--clr-text-muted);text-decoration:none;font-size:.95rem;font-weight:600;padding:10px 20px;border-radius:var(--radius-md);border:1px solid #e2e8f0;background:var(--clr-surface);transition:all var(--transition);box-shadow:var(--shadow-sm);margin-bottom:24px}
.back-btn:hover{color:var(--clr-primary);border-color:#94a3b8;background:var(--clr-bg);transform:translateY(-2px)}

/* === Heredero wizard === */
.heredero-success{text-align:center;animation:fadeIn .5s;padding:20px 0}
.heredero-success .icon{font-size:4rem;margin-bottom:20px}
.heredero-success h3{color:var(--clr-success);margin-bottom:1rem}
.progress-wrapper{display:none;margin-top:1.5rem}
.progress-bar-bg{width:100%;background:#e2e8f0;border-radius:var(--radius-full);height:30px;overflow:hidden;position:relative}
.progress-fill{height:100%;width:0%;background:linear-gradient(90deg,var(--clr-primary),var(--clr-accent));transition:width .4s ease;border-radius:var(--radius-full)}
.progress-text{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);font-size:.8rem;font-weight:800;color:#fff}
.progress-file{color:var(--clr-text-muted);font-size:.85rem;margin-top:10px;text-align:center}

/* === Demo warning box === */
.demo-box{background:var(--clr-warning-bg);border:1px solid #fcd34d;border-left:4px solid var(--clr-accent);padding:15px;border-radius:var(--radius-md);margin-bottom:20px;text-align:left}
.demo-box p{color:#92400e;margin:0;font-size:.85rem;line-height:1.5}

/* === Plan badge in register === */
.plan-badge{background:rgba(197,160,89,.1);border:1px solid rgba(197,160,89,.3);border-radius:var(--radius-md);padding:15px;text-align:center;margin-bottom:24px}
.plan-badge p{font-size:.95rem;margin:0}

/* === Nav landing wrapper === */
.page-top-lang{position:absolute;top:20px;right:20px;z-index:1000}

/* === Landing page === */
.hero{position:relative;padding:120px 5% 100px;background:radial-gradient(circle at top,rgba(197,160,89,.08) 0%,transparent 60%);overflow:hidden;text-align:center}
.hero-icon{position:absolute;opacity:.12;pointer-events:none;z-index:0;color:var(--clr-accent)}
.section-title{font-family:var(--font-heading);font-size:2.2rem;font-weight:700;color:var(--clr-primary);margin-bottom:16px;text-align:center;width:100%}
.section-subtitle{font-size:1.1rem;color:var(--clr-text-muted);max-width:700px;margin:0 auto 40px;line-height:1.6;text-align:center;width:100%}
.step-number{width:44px;height:44px;border-radius:50%;background:var(--clr-accent);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:1.2rem;margin-bottom:16px;flex-shrink:0}

/* Badge */
.badge{display:inline-flex;align-items:center;gap:6px;padding:6px 14px;border-radius:var(--radius-full);font-size:.8rem;font-weight:600;letter-spacing:.5px;width:fit-content}

/* Split layout for auth pages */  
.lg-layout-split,.split-layout{display:flex;min-height:100vh}
/* Light champagne panel (no dark mode on web) */
.lg-split-left,.split-left{flex:1;background:linear-gradient(160deg,#faf3e0 0%,#f0dfb8 50%,#e8cfa0 100%);display:flex;flex-direction:column;justify-content:center;padding:60px 5%;position:relative;overflow:hidden;color:#3d2e1e}
.lg-split-right,.split-right{flex:1;display:flex;align-items:center;justify-content:center;padding:40px;background:var(--clr-bg)}
.lg-brand-logo{display:flex;align-items:center;gap:10px;color:#fff;font-family:var(--font-heading);font-weight:700;font-size:1.5rem;letter-spacing:2px;margin-bottom:2rem}
.lg-login-wrapper,.form-card{width:100%;max-width:460px}
.lg-login-header{margin-bottom:32px}
.lg-login-title{font-family:var(--font-heading);font-size:1.8rem;font-weight:700;color:var(--clr-primary);margin:0 0 8px}
.lg-login-subtitle{color:var(--clr-text-muted);font-size:1rem;margin:0}
.lg-input-group{margin-bottom:1.25rem}
.lg-mt-6{margin-top:1.5rem}
.lg-text-center{text-align:center}
.lg-btn-full{width:100%}

/* Landing nav */
.nav-landing{display:flex;align-items:center;padding:1rem 5%;justify-content:space-between;background:var(--clr-surface);box-shadow:var(--shadow-sm);position:sticky;top:0;z-index:100;gap:1rem}
.nav-links{display:flex;align-items:center;gap:8px}
.nav-toggle{display:none;flex-direction:column;gap:4px;cursor:pointer;background:none;border:none;padding:4px}
.nav-toggle span{display:block;width:22px;height:2px;background:var(--clr-primary);border-radius:2px;transition:var(--transition)}
.footer-landing{background:var(--clr-primary);color:rgba(255,255,255,.8);padding:48px 5%}
.bg-icon{position:absolute;opacity:.12;pointer-events:none;z-index:0}

/* Shared wizard/validation styles */
.input-validar{width:100%;box-sizing:border-box;padding:.75rem 1rem;font-size:.95rem;font-family:var(--font-sans);border:2px solid #e2e8f0;border-radius:var(--radius-md);background:var(--clr-surface);transition:all var(--transition);outline:none}
.input-validar:focus{border-color:var(--clr-accent);box-shadow:0 0 0 3px rgba(197,160,89,.15)}
.input-success{border-color:var(--clr-success)!important;background:var(--clr-success-bg)!important}
.input-error{border-color:var(--clr-error)!important;background:var(--clr-error-bg)!important}
.status-msg{font-size:.8rem;margin-top:5px;font-weight:600;display:block;min-height:1.2rem;width:100%}
.checking{color:var(--clr-accent)}.valid{color:var(--clr-success)}.invalid{color:var(--clr-error)}
.step-container{display:none}
.step-active{display:block;animation:fadeIn .4s ease-out}
.btn-wizard{background:var(--clr-primary);color:#fff;border:none;padding:14px;border-radius:var(--radius-md);font-weight:600;width:100%;cursor:pointer;transition:all var(--transition);margin-top:4px;font-size:.95rem;font-family:var(--font-sans)}
.btn-wizard:disabled{background:#cbd5e1!important;color:#94a3b8!important;cursor:not-allowed}
.btn-wizard.ready{background:var(--clr-success)!important;box-shadow:0 4px 10px rgba(16,185,129,.3)}
.btn-wizard.ready:hover{background:#059669!important;transform:translateY(-2px)}
.file-box{border:2px dashed #e2e8f0;padding:1.5rem;border-radius:var(--radius-md);background:var(--clr-surface-alt);text-align:center;margin-bottom:1rem;transition:all var(--transition)}
.file-box:hover{border-color:var(--clr-accent);background:var(--clr-bg)}
.file-box label{font-weight:600;font-size:.85rem;color:var(--clr-primary);display:block;margin-bottom:8px;cursor:pointer}
.step-dot{width:10px;height:10px;border-radius:50%;background:rgba(255,255,255,.2);transition:all var(--transition)}
.step-dot.active{background:var(--clr-accent);box-shadow:0 0 8px rgba(197,160,89,.5)}
.step-progress{display:flex;align-items:center;gap:.75rem;margin-top:2rem}

/* --- unique lg- prefixed classes (no non-prefix equivalent) --- */
.lg-mobile-close-btn{display:none;background:none;border:none;color:var(--clr-primary);cursor:pointer;padding:4px}
.lg-mobile-close-btn:hover{color:var(--clr-error)}
.sidebar.mini .nav-border,.lg-sidebar.mini .nav-border{border-top:none;padding-top:.5rem;align-items:center}

@media(max-width:1024px){
  .bento,.lg-bento-grid{grid-template-columns:repeat(2,1fr)}
  .s3,.s4,.lg-span-3,.lg-span-4{grid-column:span 2}
  .sidebar,.lg-sidebar{position:fixed;left:0;top:0;transform:translateX(-100%);z-index:10001;width:280px;padding-top:calc(24px + env(safe-area-inset-top, 0px));padding-bottom:calc(24px + env(safe-area-inset-bottom, 0px));}
  .sidebar.active,.lg-sidebar.active{transform:translateX(0)}
  .sidebar-overlay.active,.lg-sidebar-overlay.active{display:block;z-index:10000}
  .sidebar-toggle,.lg-sidebar-toggle-btn{display:none}
  .lg-mobile-close-btn{display:block}
  .topbar,.lg-topbar{display:flex;padding-top:env(safe-area-inset-top, 0px);height:calc(64px + env(safe-area-inset-top, 0px));}
  .main,.lg-main-content{padding:calc(80px + env(safe-area-inset-top, 0px)) 24px 30px}
  .sidebar.mini,.lg-sidebar.mini{width:280px;align-items:stretch;transform:translateX(-100%)}
  .sidebar.mini.active,.lg-sidebar.mini.active{transform:translateX(0)}
  .sidebar.mini .brand-text,.sidebar.mini .nav-item span,.sidebar.mini .hide-mini,
  .lg-sidebar.mini .lg-brand-text,.lg-sidebar.mini .lg-nav-item span,.lg-sidebar.mini .hide-mini{display:inline}
  .sidebar.mini .nav-item,.lg-sidebar.mini .lg-nav-item{justify-content:flex-start;padding:.75rem 1rem;width:100%;margin:0 0 .25rem}
}
@media(max-width:768px){
  .bento,.lg-bento-grid{grid-template-columns:1fr;gap:16px}
  .s2,.s3,.s4,.lg-span-2,.lg-span-3,.lg-span-4{grid-column:span 1}
  .r2,.lg-row-span-2{grid-row:span 1}
  .main,.lg-main-content{padding:calc(72px + env(safe-area-inset-top, 0px)) 16px calc(85px + env(safe-area-inset-bottom, 0px))}
  .hero{padding:80px 5% 60px}
  .section-title{font-size:1.8rem}
  .section-subtitle{font-size:1rem;margin-bottom:32px}
  .hero h1{font-size:2.6rem!important}
  .nav-links{display:none;position:absolute;top:100%;left:0;width:100%;background:var(--clr-surface);flex-direction:column;padding:1rem;box-shadow:var(--shadow-md)}
  .nav-links.active{display:flex}
  .nav-toggle{display:flex}
  .lg-split-left,.split-left{display:none}
  .lg-split-right,.split-right{padding:2rem 1.5rem}
  .step-progress{justify-content:center}
}
@media(max-width:480px){
  .main,.lg-main-content{padding:calc(64px + env(safe-area-inset-top, 0px)) 12px calc(85px + env(safe-area-inset-bottom, 0px))}
  .card,.bento-card,.lg-card,.lg-bento-card{padding:16px;border-radius:var(--radius-lg)}
  .storage-bar{flex-direction:column;align-items:stretch;text-align:center}
  .hero{padding:60px 5% 40px}
  .hero h1{font-size:1.8rem!important}
  .section-title{font-size:1.5rem}
  .section-subtitle{font-size:.95rem;margin-bottom:24px}
  .lg-login-title{font-size:1.4rem}
  .lg-brand-logo{font-size:1.2rem}
  .lg-login-wrapper{padding:0}
}

/* === Bento Folder and File Manager Styles === */
.folder-card {
    background: #f1f5f9;
    border-radius: 20px;
    padding: 24px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    transition: all var(--transition);
    border: 2px solid transparent;
    cursor: pointer;
    text-decoration: none;
    box-shadow: 0 4px 6px -1px rgba(0,0,0,0.02);
}
.folder-card:hover {
    transform: translateY(-4px);
    background: #ffffff;
    border-color: var(--clr-accent);
    box-shadow: var(--shadow-md);
}
.folder-icon-wrapper {
    width: 64px;
    height: 64px;
    background: var(--clr-surface);
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
    margin-bottom: 16px;
    box-shadow: var(--shadow-sm);
    color: var(--clr-accent);
}
.folder-title {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--clr-primary);
    margin-bottom: 4px;
    font-family: var(--font-heading);
}
.folder-count {
    font-size: 0.85rem;
    color: var(--clr-text-muted);
}

/* Tabs */
.tab-filters {
    display: inline-flex;
    background: #f1f5f9;
    border-radius: var(--radius-full);
    padding: 4px;
    margin-bottom: 24px;
}
.tab-filter-btn {
    padding: 8px 16px;
    border-radius: var(--radius-full);
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--clr-text-muted);
    border: none;
    background: transparent;
    cursor: pointer;
    transition: all 0.2s ease;
}
.tab-filter-btn:hover {
    color: var(--clr-primary);
}
.tab-filter-btn.active {
    background: #ffffff;
    color: var(--clr-primary);
    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
    font-weight: 600;
}

/* File Table */
.file-list-table {
    width: 100%;
    border-collapse: collapse;
}
.file-list-table th {
    text-align: left;
    padding: 12px 16px;
    color: var(--clr-text-light);
    font-size: 0.85rem;
    font-weight: 500;
    border-bottom: 1px solid #e2e8f0;
}
.file-list-table td {
    padding: 16px;
    border-bottom: 1px solid #f1f5f9;
    font-size: 0.95rem;
    color: var(--clr-text);
}
.file-list-table tr:hover td {
    background: #f8fafc;
}
.file-list-table tr:last-child td {
    border-bottom: none;
}
.status-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    display: inline-block;
    margin-right: 8px;
}
.status-dot.green { background: var(--clr-success); }
.status-dot.yellow { background: var(--clr-warning); }
.status-dot.blue { background: #3b82f6; }
.status-dot.red { background: var(--clr-error); }
.file-name-cell {
    display: flex;
    align-items: center;
    gap: 12px;
    font-weight: 500;
    color: var(--clr-primary);
}
.file-icon {
    color: var(--clr-text-light);
    display: flex;
    align-items: center;
    justify-content: center;
}
.action-btn-ghost {
    background: transparent;
    border: none;
    color: var(--clr-text-light);
    cursor: pointer;
    padding: 4px;
    border-radius: 4px;
    transition: all 0.2s;
}
.action-btn-ghost:hover {
    color: var(--clr-primary);
    background: #e2e8f0;
}


/* === REDISEÑO PREMIUM COMPONENTES === */

/* Búsqueda Glassmorphism */
.lg-search-glass {
    position: relative;
    display: flex;
    align-items: center;
    background: rgba(255, 255, 255, 0.7);
    border: 1px solid rgba(197, 160, 89, 0.3);
    backdrop-filter: blur(8px);
    border-radius: var(--radius-full);
    padding: 8px 16px;
    transition: all 0.3s ease;
    flex: 1;
    min-width: 250px;
}
.lg-search-glass:focus-within {
    background: #ffffff;
    border-color: var(--clr-accent);
    box-shadow: 0 0 0 3px rgba(197, 160, 89, 0.15);
}
.lg-search-glass .search-icon {
    color: var(--clr-accent);
    margin-right: 10px;
}
.lg-search-glass input {
    border: none;
    background: transparent;
    width: 100%;
    outline: none;
    font-size: 0.95rem;
    color: var(--clr-primary);
}

/* Botones Sort Píldora */
.lg-sort-pill {
    background: var(--clr-surface);
    border: 1px solid #e2e8f0;
    color: var(--clr-text-muted);
    font-size: 0.85rem;
    font-weight: 600;
    padding: 8px 16px;
    border-radius: var(--radius-full);
    cursor: pointer;
    transition: all var(--transition-fast);
    display: flex;
    align-items: center;
    gap: 6px;
}
.lg-sort-pill:hover {
    background: var(--clr-surface-alt);
    border-color: var(--clr-accent);
    color: var(--clr-primary);
}
.lg-sort-pill.active {
    background: var(--clr-accent);
    border-color: var(--clr-accent);
    color: #ffffff;
}

/* Storage Pill Progress */
.lg-storage-pill-track {
    height: 16px;
    background: #f1f5f9;
    border-radius: var(--radius-full);
    position: relative;
    overflow: hidden;
    flex: 1;
    border: 1px solid #e2e8f0;
    box-shadow: inset 0 1px 3px rgba(0,0,0,0.05);
}
.lg-storage-pill-fill {
    height: 100%;
    background: linear-gradient(90deg, #10b981 0%, var(--clr-accent) 50%, #ef4444 100%);
    background-size: 200% 100%;
    border-radius: var(--radius-full);
    transition: width 0.5s ease-out;
}

/* Premium Dropzone */
.lg-dropzone-premium {
    border: 2px dashed rgba(197, 160, 89, 0.4);
    background: linear-gradient(135deg, rgba(197, 160, 89, 0.05) 0%, rgba(255, 255, 255, 0.5) 100%);
    border-radius: var(--radius-xl);
    padding: 40px;
    text-align: center;
    transition: all 0.3s ease;
    cursor: pointer;
    position: relative;
    overflow: hidden;
}
.lg-dropzone-premium:hover {
    border-color: var(--clr-accent);
    background: rgba(197, 160, 89, 0.08);
}
.lg-dropzone-premium .upload-icon-anim {
    font-size: 3rem;
    color: var(--clr-accent);
    margin-bottom: 15px;
    transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
.lg-dropzone-premium:hover .upload-icon-anim {
    transform: translateY(-10px) scale(1.1);
}
.lg-dropzone-title {
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--clr-primary);
    margin-bottom: 8px;
    font-family: var(--font-heading);
}
.lg-dropzone-controls {
    display: flex;
    justify-content: center;
    gap: 16px;
    margin-top: 24px;
    flex-wrap: wrap;
}
.lg-dropzone-controls select {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    padding: 10px 16px;
    border-radius: var(--radius-full);
    font-size: 0.9rem;
    outline: none;
    cursor: pointer;
}
.lg-dropzone-controls select:focus {
    border-color: var(--clr-accent);
}


/* === Responsive Utility Classes === */
.lg-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.lg-flex-stack { display: flex; flex-direction: row; gap: 24px; }
.table-responsive { width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* Admin main content responsive */
.admin-main { padding-top: 40px; max-width: 1200px; margin: 0 auto; padding-left: 20px; padding-right: 20px; padding-bottom: 50px; width: 100%; }

/* Accessibility: scope attribute default styling */
th[scope="col"] { white-space: nowrap; }

/* Emoji icon utility: hide from screen readers when decorative */
.emoji-icon { user-select: none; }
.emoji-icon[aria-hidden="true"] { pointer-events: none; }

/* Progress bar ARIA-friendly */
[role="progressbar"] { position: relative; }
[role="progressbar"]::after { position: absolute; content: attr(aria-valuenow) '%'; }

@media (max-width: 768px) {
    .lg-grid-2 { grid-template-columns: 1fr; gap: 16px; }
    .lg-flex-stack { flex-direction: column; gap: 16px; }
    .lg-modal-box { max-height: 90vh; overflow-y: auto; padding: 24px !important; width: 95% !important; }
    .admin-main { padding-left: 12px; padding-right: 12px; }
    .table-responsive table { min-width: 600px; }
}
@media (max-width: 480px) {
    .lg-grid-2 { gap: 12px; }
    .admin-main { padding-left: 8px; padding-right: 8px; padding-top: 24px; }
}

/* ============================================
   DASHBOARD PREMIUM WIDGETS
   ============================================ */

/* Greeting icon animation */
.lg-greeting-icon {
    font-size: 3rem;
    display: inline-block;
    animation: lgFloat 3s ease-in-out infinite;
}
@keyframes lgFloat {
    0%, 100% { transform: translateY(0px); }
    50% { transform: translateY(-8px); }
}

/* Greeting glow pulse */
.lg-glow-pulse {
    animation: lgPulse 2s ease-in-out infinite;
}
@keyframes lgPulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(197, 160, 89, 0.3); }
    50% { box-shadow: 0 0 0 12px rgba(197, 160, 89, 0); }
}

/* Quick Action Pills */
.lg-quick-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
}
.lg-quick-pill {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 16px 10px;
    background: var(--clr-bg);
    border: 1px solid #e2e8f0;
    border-radius: var(--radius-lg);
    text-decoration: none;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    color: var(--clr-text-muted);
    font-size: 0.8rem;
    font-weight: 600;
    cursor: pointer;
}
.lg-quick-pill:hover {
    background: var(--clr-surface);
    border-color: var(--clr-accent);
    transform: translateY(-3px);
    box-shadow: 0 8px 20px rgba(197, 160, 89, 0.15);
    color: var(--clr-primary);
}
.lg-quick-pill .qp-icon {
    width: 40px;
    height: 40px;
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.3rem;
    transition: all 0.3s;
}
.lg-quick-pill:hover .qp-icon {
    transform: scale(1.1);
}

/* Lía Widget */
.lg-lia-widget {
    position: relative;
    overflow: hidden;
}
.lg-lia-widget::before {
    content: '';
    position: absolute;
    top: -50%;
    right: -50%;
    width: 100%;
    height: 100%;
    background: radial-gradient(circle, rgba(197, 160, 89, 0.08) 0%, transparent 70%);
    border-radius: 50%;
    pointer-events: none;
}
.lg-lia-avatar-widget {
    width: 48px;
    height: 48px;
    background: linear-gradient(135deg, var(--clr-accent), var(--clr-accent-hover));
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    box-shadow: 0 4px 12px rgba(197, 160, 89, 0.3);
    flex-shrink: 0;
    animation: lgPulse 3s ease-in-out infinite;
}
.lg-lia-input-wrapper {
    display: flex;
    gap: 8px;
    background: var(--clr-bg);
    border: 1px solid #e2e8f0;
    border-radius: var(--radius-full);
    padding: 4px 4px 4px 16px;
    align-items: center;
    transition: all 0.3s;
}
.lg-lia-input-wrapper:focus-within {
    border-color: var(--clr-accent);
    box-shadow: 0 0 0 3px rgba(197, 160, 89, 0.12);
    background: var(--clr-surface);
}
.lg-lia-input-wrapper input {
    flex: 1;
    border: none;
    background: transparent;
    outline: none;
    font-size: 0.9rem;
    color: var(--clr-primary);
    font-family: var(--font-sans);
}
.lg-lia-input-wrapper input::placeholder {
    color: var(--clr-text-light);
}
.lg-lia-send {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: var(--clr-accent);
    border: none;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s;
    flex-shrink: 0;
}
.lg-lia-send:hover {
    background: var(--clr-accent-hover);
    transform: scale(1.05);
}

/* Storage enhanced */
.lg-storage-stats {
    display: flex;
    gap: 16px;
    margin-top: 12px;
    justify-content: center;
}
.lg-storage-stat {
    text-align: center;
}
.lg-storage-stat-value {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--clr-primary);
}
.lg-storage-stat-label {
    font-size: 0.75rem;
    color: var(--clr-text-light);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Dot status indicator */
.lg-status-dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    margin-right: 6px;
    animation: lgPulse 2s ease-in-out infinite;
}
.lg-status-dot.online {
    background: var(--clr-success);
}
.lg-status-dot.offline {
    background: var(--clr-text-light);
    animation: none;
}

/* Counter badge */
.lg-counter-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 24px;
    height: 24px;
    background: var(--clr-accent-light);
    color: var(--clr-accent-hover);
    border-radius: var(--radius-full);
    font-size: 0.75rem;
    font-weight: 700;
    padding: 0 8px;
}

/* Nav improvements */
.lg-nav-item .nav-icon-wrapper {
    position: relative;
}
.lg-nav-item .nav-badge-dot {
    position: absolute;
    top: -2px;
    right: -4px;
    width: 8px;
    height: 8px;
    background: var(--clr-accent);
    border-radius: 50%;
    border: 2px solid var(--clr-surface);
}

/* Sidebar mini improvements */
.lg-sidebar.mini .lg-nav-item .nav-icon-wrapper {
    margin: 0;
}

/* Mobile topbar refine */
.lg-topbar {
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    background: rgba(255, 255, 255, 0.85) !important;
}

/* Smooth nav transitions for mini mode */
.lg-sidebar {
    transition: width 0.3s cubic-bezier(0.4, 0, 0.2, 1), transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Active nav: full border (portal.css). No absolute ::before rail. */
.lg-nav-item.active {
    position: relative;
    border: 1.5px solid rgba(197,160,89,0.55);
    box-shadow: none;
}
.lg-nav-item.active::before {
    content: none;
    display: none;
}

/* Bento card subtle animation on page load */
.bento-card, .lg-bento-card, .stat-glass-card, .greeting-glass-card, .alert-premium-card, .heredero-premium-banner {
    animation: fadeUp 0.6s cubic-bezier(0.16, 1, 0.3, 1) forwards;
    opacity: 0;
}

@keyframes fadeUp {
    0% { opacity: 0; transform: translateY(30px); }
    100% { opacity: 1; transform: translateY(0); }
}

/* Stagger delays via nth-child logic or JS */
.staggered-item {
    opacity: 0;
    animation: fadeUp 0.6s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

/* Responsive quick grid */
@media (max-width: 768px) {
    .lg-quick-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 8px;
    }
    .lg-quick-pill {
        padding: 12px 8px;
        font-size: 0.75rem;
    }
    .lg-quick-pill .qp-icon {
        width: 34px;
        height: 34px;
        font-size: 1.1rem;
    }
    .lg-storage-stats {
        gap: 12px;
    }
    .lg-greeting-icon {
        font-size: 2.2rem;
    }
}
@media (max-width: 480px) {
    .lg-quick-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .lg-lia-widget .lg-lia-avatar-widget {
        width: 40px;
        height: 40px;
    }
}



/* ===== GLOBAL TOAST (premium slide-up) ===== */
.lg-toast-global {
    position: fixed;
    bottom: 24px;
    left: 50%;
    transform: translateX(-50%) translateY(120%);
    background: #1e1b2e;
    color: #f5f0e6;
    padding: 12px 18px;
    border-radius: 14px;
    box-shadow: 0 12px 32px rgba(0,0,0,0.28);
    border: 1px solid rgba(197,160,89,0.35);
    font-weight: 600;
    font-size: 0.9rem;
    line-height: 1.35;
    z-index: 99999;
    display: flex;
    align-items: center;
    gap: 10px;
    max-width: min(420px, calc(100vw - 24px));
    width: max-content;
    transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.3s;
    opacity: 0;
    pointer-events: none;
}
.lg-toast-global.show {
    transform: translateX(-50%) translateY(0);
    opacity: 1;
    pointer-events: auto;
}
@media (max-width: 768px) {
    .lg-toast-global { bottom: 96px; } /* Above bottom bar */
}
.lg-toast-global.error {
    background: #3b1219;
    border-color: rgba(239,68,68,0.4);
    color: #fecaca;
}
.lg-toast-global::before {
    content: "";
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #e8d194;
    flex-shrink: 0;
    box-shadow: 0 0 0 3px rgba(197,160,89,0.2);
}
.lg-toast-global.error::before {
    background: #f87171;
    box-shadow: 0 0 0 3px rgba(239,68,68,0.2);
}

/* ============================================
   PREMIUM LIGHT DASHBOARD REDESIGN (IPHONE & WEB)
   ============================================ */

/* Prefer .lg-main-content; keep aliases for any leftover markup */
.dashboard-premium-wrapper {
    flex: 1 1 0%;
    display: flex;
    flex-direction: column;
    padding: 28px var(--page-gutter, 2rem);
    min-width: 0;
    width: auto;
    max-width: none;
    margin: 0;
    overflow-x: hidden;
    box-sizing: border-box;
}

.dashboard-premium-grid {
    display: flex;
    flex-direction: column;
    gap: 16px;
    max-width: var(--portal-content-max, 1100px);
    margin: 0 auto;
    width: 100%;
    box-sizing: border-box;
}

/* Glassmorphism Greeting Card */
.greeting-glass-card {
    grid-column: span 12;
    background: linear-gradient(135deg, rgba(255,255,255,0.9) 0%, rgba(253,251,247,0.7) 100%);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(197,160,89,0.3);
    border-radius: var(--radius-xl);
    padding: 36px 48px;
    display: flex;
    align-items: center;
    gap: 32px;
    box-shadow: 0 10px 40px -10px rgba(197,160,89,0.15);
    position: relative;
    overflow: hidden;
}

.greeting-glass-card::before {
    content: '';
    position: absolute;
    top: -50%; right: -50%;
    width: 200%; height: 200%;
    background: radial-gradient(circle at center, rgba(197,160,89,0.06) 0%, transparent 50%);
    animation: lgRotate 20s linear infinite;
    z-index: 0;
    pointer-events: none;
}

@keyframes lgRotate {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

.greeting-avatar-premium {
    width: 80px; height: 80px;
    border-radius: 50%;
    background: var(--clr-surface);
    border: 3px solid var(--clr-accent);
    padding: 4px;
    display: flex; align-items: center; justify-content: center;
    z-index: 1;
    box-shadow: 0 8px 24px rgba(197,160,89,0.25);
    flex-shrink: 0;
}

.greeting-avatar-premium img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; }
.greeting-avatar-premium svg { width: 40px; height: 40px; color: var(--clr-accent); }

.greeting-text-premium {
    z-index: 1;
    flex: 1;
}

.greeting-text-premium p {
    margin: 0; color: var(--clr-accent); font-weight: 700; font-size: 1rem; letter-spacing: 1px; text-transform: uppercase;
}

.greeting-text-premium h1 {
    margin: 4px 0 0 0; color: var(--clr-primary); font-size: 2.4rem; font-family: var(--font-heading); font-weight: 700;
}

.badge-gold-premium {
    background: linear-gradient(135deg, var(--clr-accent) 0%, #eab308 100%);
    color: #fff;
    padding: 8px 24px;
    border-radius: var(--radius-full);
    font-weight: 700;
    font-size: 0.9rem;
    letter-spacing: 0.5px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    z-index: 1;
    box-shadow: 0 6px 16px rgba(197,160,89,0.3);
    border: 1px solid rgba(255,255,255,0.4);
    flex-shrink: 0;
}

/* Glass Stat Cards */
.stat-glass-card {
    grid-column: span 6;
    background: rgba(255,255,255,0.85);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid rgba(197,160,89,0.15);
    border-radius: var(--radius-xl);
    padding: 32px;
    display: flex;
    flex-direction: column;
    gap: 20px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.03);
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    text-decoration: none;
    position: relative;
    overflow: hidden;
}

.stat-glass-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 20px 40px -10px rgba(197,160,89,0.25);
    border-color: rgba(197,160,89,0.5);
    background: rgba(255,255,255,0.95);
}

.stat-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.stat-icon-premium {
    width: 56px; height: 56px;
    border-radius: 16px;
    background: linear-gradient(135deg, rgba(197,160,89,0.15) 0%, rgba(197,160,89,0.05) 100%);
    color: var(--clr-accent);
    display: flex; align-items: center; justify-content: center;
    font-size: 1.8rem;
    border: 1px solid rgba(197,160,89,0.2);
}

.stat-title {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--clr-text-muted);
}

.stat-body {
    display: flex;
    align-items: center;
    gap: 24px;
    margin-top: auto;
}

.stat-value-big {
    font-size: 3rem;
    font-weight: 700;
    color: var(--clr-primary);
    font-family: var(--font-heading);
    line-height: 1;
}

.stat-subtext {
    font-size: 0.9rem;
    color: var(--clr-text-muted);
    font-weight: 500;
}

/* Chat Lia Premium */
.lia-glass-chat {
    grid-column: span 12;
    background: rgba(255,255,255,0.9);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(197,160,89,0.3);
    border-radius: var(--radius-xl);
    box-shadow: 0 12px 35px rgba(197,160,89,0.1);
    display: flex;
    flex-direction: column;
    min-height: 380px;
    max-height: 500px;
    overflow: hidden;
}

.lia-glass-header {
    padding: 24px 32px;
    border-bottom: 1px solid rgba(197,160,89,0.15);
    display: flex;
    align-items: center;
    gap: 16px;
    background: linear-gradient(to right, rgba(255,255,255,0.6), rgba(253,251,247,0.9));
}

.lia-glass-header h3 {
    margin: 0; font-family: var(--font-heading); font-size: 1.2rem; color: var(--clr-primary); font-weight: 700;
}

.lia-glass-header p {
    margin: 4px 0 0; font-size: 0.9rem; color: var(--clr-text-muted);
}

.lia-chat-body {
    flex: 1;
    padding: 24px 32px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 20px;
    background: transparent;
    -webkit-overflow-scrolling: touch;
}

.lia-premium-input {
    padding: 20px 32px;
    background: rgba(253,251,247,0.8);
    border-top: 1px solid rgba(197,160,89,0.15);
}

.lia-input-pill {
    background: #fff;
    border: 1px solid rgba(197,160,89,0.3);
    border-radius: var(--radius-full);
    padding: 8px 8px 8px 24px;
    display: flex;
    align-items: center;
    gap: 12px;
    box-shadow: 0 4px 12px rgba(197,160,89,0.05);
    transition: all 0.3s;
}

.lia-input-pill:focus-within {
    border-color: var(--clr-accent);
    box-shadow: 0 6px 20px rgba(197,160,89,0.2);
}

.lia-input-pill input {
    flex: 1;
    border: none;
    background: transparent;
    outline: none;
    font-size: 1rem;
    color: var(--clr-primary);
}

.lia-send-btn-premium {
    width: 48px; height: 48px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--clr-accent) 0%, #eab308 100%);
    color: #fff;
    border: none;
    display: flex; align-items: center; justify-content: center;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    box-shadow: 0 4px 15px rgba(197,160,89,0.4);
    flex-shrink: 0;
}

.lia-send-btn-premium:hover {
    transform: scale(1.08) rotate(5deg);
    box-shadow: 0 6px 20px rgba(197,160,89,0.5);
}

.lia-send-btn-premium:disabled {
    background: #cbd5e1;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}

/* Hero Heredero Premium Banner */
.heredero-premium-banner {
    grid-column: span 12;
    background: linear-gradient(135deg, rgba(255,251,235,0.95) 0%, rgba(254,243,199,0.85) 100%);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid rgba(245,158,11,0.4);
    border-radius: var(--radius-xl);
    padding: 48px 40px;
    text-align: center;
    box-shadow: 0 12px 35px rgba(245,158,11,0.15);
}

.heredero-premium-banner .icon { font-size: 4.5rem; margin-bottom: 24px; animation: lgFloat 3s infinite ease-in-out; display: inline-block; }
.heredero-premium-banner h2 { font-size: 2rem; color: #92400e; margin-bottom: 16px; font-family: var(--font-heading); font-weight: 700; }
.heredero-premium-banner p { font-size: 1.15rem; color: #b45309; margin-bottom: 32px; max-width: 600px; margin-left: auto; margin-right: auto; line-height: 1.6; }
.heredero-premium-banner .btn-a { font-size: 1.1rem; padding: 14px 36px; border-radius: var(--radius-full); font-weight: 700; }

/* Dashboard Error Card Premium */
.alert-premium-card {
    grid-column: span 12;
    background: rgba(255,251,235,0.95);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(245,158,11,0.5);
    border-left: 6px solid var(--clr-warning);
    border-radius: var(--radius-xl);
    padding: 32px;
    display: flex;
    align-items: center;
    gap: 24px;
    box-shadow: 0 8px 24px rgba(245,158,11,0.15);
}

.alert-premium-card .alert-icon {
    font-size: 3rem;
    flex-shrink: 0;
    animation: lgPulse 2s infinite;
}

.alert-premium-content {
    flex: 1;
}

.alert-premium-content h3 {
    color: #92400e;
    margin: 0 0 8px;
    font-family: var(--font-heading);
    font-size: 1.4rem;
    font-weight: 700;
}

.alert-premium-content p {
    color: #b45309;
    margin: 0 0 16px;
    font-size: 1rem;
    line-height: 1.5;
}

.alert-premium-actions {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}

/* Responsive Dashboard Premium */
@media (max-width: 1024px) {
    .dashboard-premium-wrapper { padding: 24px; }
    .greeting-glass-card { padding: 32px 36px; }
}

@media (max-width: 768px) {
    .dashboard-premium-wrapper { padding: 16px; padding-top: 80px; padding-bottom: calc(85px + env(safe-area-inset-bottom, 0px)); }
    .dashboard-premium-grid { gap: 16px; display: flex; flex-direction: column; }
    .greeting-glass-card { padding: 28px 24px; flex-direction: column; text-align: center; gap: 20px; }
    .greeting-avatar-premium { width: 72px; height: 72px; }
    .greeting-text-premium h1 { font-size: 2rem; }
    .badge-gold-premium { margin: 0 auto; }
    .stat-glass-card { padding: 24px; gap: 16px; }
    .stat-value-big { font-size: 2.4rem; }
    .heredero-premium-banner { padding: 36px 24px; }
    .heredero-premium-banner .icon { font-size: 3.5rem; }
    .heredero-premium-banner h2 { font-size: 1.6rem; }
    .alert-premium-card { flex-direction: column; text-align: center; gap: 16px; padding: 24px; }
    .alert-premium-actions { justify-content: center; }
}

@media (max-width: 480px) {
    .dashboard-premium-wrapper { padding: 12px; padding-top: 76px; padding-bottom: calc(85px + env(safe-area-inset-bottom, 0px)); }
    .dashboard-premium-grid { gap: 12px; }
    .greeting-glass-card { padding: 24px 20px; border-radius: var(--radius-lg); }
    .greeting-text-premium h1 { font-size: 1.7rem; }
    .stat-glass-card { border-radius: var(--radius-lg); padding: 20px; }
    .stat-value-big { font-size: 2.2rem; }
    .lia-glass-chat { border-radius: var(--radius-lg); min-height: 400px; }
    .lia-glass-header { padding: 20px 24px; }
    .lia-chat-body { padding: 20px 24px; }
    .lia-premium-input { padding: 16px 20px; }
    .lia-input-pill { padding: 6px 6px 6px 20px; }
    .lia-send-btn-premium { width: 44px; height: 44px; }
}

/* ==========================================================================
   Mobile app gate styles live inline in includes/mobile_block.php
   (hard gate on phones by default — iOS app coming soon)
   ========================================================================== */

/* === Design polish v5 (no dark mode) — private banking calm === */
:root {
  --type-h1: clamp(1.6rem, 2.2vw, 2rem);
  --type-h2: clamp(1.25rem, 1.6vw, 1.45rem);
  --type-body: 0.95rem;
  --type-caption: 0.82rem;
  --space-section: clamp(1.25rem, 2vw, 2rem);
}
.lg-main-content h1, .bento-card > h1 {
  font-size: var(--type-h1);
  letter-spacing: -0.02em;
  font-weight: 650;
}
.lg-main-content h2, .bento-card > h3 {
  font-size: var(--type-h2);
  letter-spacing: -0.015em;
}
.lg-sidebar .lg-nav-item {
  position: relative;
  border-radius: 12px;
  font-size: 0.92rem;
  overflow: hidden;
}
.lg-sidebar .lg-nav-item.active {
  background: rgba(197,160,89,0.12);
  color: var(--clr-primary);
  font-weight: 650;
  border: 1.5px solid rgba(197,160,89,0.55);
  box-shadow: 0 2px 10px rgba(197,160,89,0.12);
}
.lg-sidebar .lg-nav-item.active::before {
  content: none;
  display: none;
}
.bento-card, .lg-bento-card, .lg-card {
  border: 1px solid rgba(197,160,89,0.12);
  box-shadow: 0 4px 18px rgba(15,23,42,0.04);
  transition: box-shadow 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}
.bento-card:hover:not(.no-hover), .lg-bento-card:hover:not(.no-hover) {
  transform: translateY(-2px);
  border-color: rgba(197,160,89,0.28);
  box-shadow: 0 10px 28px rgba(197,160,89,0.1);
}
.empty-state {
  border: 1.5px dashed rgba(197,160,89,0.35) !important;
  background: linear-gradient(180deg, #fffefb 0%, #faf7f2 100%) !important;
  border-radius: 24px !important;
  padding: 48px 24px !important;
}
.empty-state h3 { font-size: 1.2rem; margin-bottom: 8px; }
.lg-input:focus, .input:focus {
  border-color: var(--clr-accent) !important;
  box-shadow: 0 0 0 3px rgba(197,160,89,0.14) !important;
}
.lg-label, .label {
  font-size: var(--type-caption);
  letter-spacing: 0.02em;
  color: #3f3a34; /* warmer, stronger contrast on cream */
}
.card-desc, .bento-desc, .lg-card-subtitle {
  color: #44403c !important;
}
.lg-text-muted, .info-label {
  color: #57534e !important;
}
.btn-a, .lg-btn-accent, .btn-premium-upload {
  letter-spacing: 0.01em;
}
.card-desc, .bento-desc {
  font-size: var(--type-caption);
  line-height: 1.55;
  color: var(--clr-text-muted);
}
/* calm bottom nav */
.bottom-nav .bn-item span {
  font-size: 0.68rem;
  font-weight: 600;
  max-width: 72px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}


/* === FORCE LIGHT MODE GLOBAL v10 === */
html, body, :root {
  color-scheme: light !important;
  background-color: #faf7f2 !important;
  color: #1e1b2e;
}
html[data-theme="dark"], html[data-theme="system"] {
  /* map dark preference back to light brand tokens */
}
@media (prefers-color-scheme: dark) {
  html, body {
    color-scheme: light !important;
    background-color: #faf7f2 !important;
    color: #1e1b2e !important;
  }
}
/* Readable muted text */
.card-desc, .bento-desc, .lg-card-subtitle, .info-label, .text-muted {
  color: #44403c !important;
}
/* Ticket / admin panels that were near-black */
.ticket-chat-header {
  background: linear-gradient(160deg, #fffefb 0%, #faf3e0 100%) !important;
  color: #1e1b2e !important;
  border-bottom: 1px solid rgba(197,160,89,0.22) !important;
}
.ticket-chat-header h3, .ticket-chat-header span { color: #1e1b2e !important; }

/* ── Custom Checkbox ── */
.lg-checkbox{display:inline-flex;align-items:center;gap:8px;cursor:pointer;font-size:.95rem;color:var(--clr-text);user-select:none}
.lg-checkbox input{position:absolute;opacity:0;width:0;height:0;pointer-events:none}
.lg-checkbox .checkmark{width:20px;height:20px;border:2px solid #d1d5db;border-radius:5px;display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;transition:all var(--transition);background:#fff}
.lg-checkbox:hover .checkmark{border-color:var(--clr-accent)}
.lg-checkbox input:checked ~ .checkmark{background:var(--clr-accent);border-color:var(--clr-accent)}
.lg-checkbox input:checked ~ .checkmark::after{content:'';width:5px;height:9px;border:solid #1a1208;border-width:0 2px 2px 0;transform:rotate(45deg);margin-top:-1px}
.lg-checkbox input:focus-visible ~ .checkmark{outline:2px solid var(--clr-accent);outline-offset:2px}
/* ── Custom Radio ── */
.lg-radio{display:inline-flex;align-items:center;gap:8px;cursor:pointer;font-size:.95rem;color:var(--clr-text);user-select:none}
.lg-radio input{position:absolute;opacity:0;width:0;height:0;pointer-events:none}
.lg-radio .radiomark{width:20px;height:20px;border:2px solid #d1d5db;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;transition:all var(--transition);background:#fff}
.lg-radio:hover .radiomark{border-color:var(--clr-accent)}
.lg-radio input:checked ~ .radiomark{border-color:var(--clr-accent)}
.lg-radio input:checked ~ .radiomark::after{content:'';width:8px;height:8px;border-radius:50%;background:var(--clr-accent)}
.lg-radio input:focus-visible ~ .radiomark{outline:2px solid var(--clr-accent);outline-offset:2px}
/* ── Screen-reader only ── */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}