*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

.hidden { display: none !important; }

/* ── LOGIN ── */
.login-overlay {
  position: fixed; inset: 0; z-index: 500;
  display: flex; align-items: center; justify-content: center; padding: 24px;
  background: #0a0a0c;
  background-image:
    radial-gradient(ellipse 80% 50% at 50% 0%, rgba(139,92,246,0.10) 0%, transparent 60%),
    radial-gradient(ellipse 60% 50% at 100% 100%, rgba(139,92,246,0.05) 0%, transparent 50%);
}
.login-card {
  width: 100%; max-width: 360px;
  background: rgba(20,21,26,0.7); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(139,92,246,0.16); border-radius: 22px;
  padding: 32px 26px; display: flex; flex-direction: column; gap: 12px;
  box-shadow: 0 20px 60px rgba(0,0,0,0.5);
  animation: fadeUp .4s cubic-bezier(0.22,1,0.36,1);
}
.login-logo { font-size: 30px; font-weight: 800; letter-spacing: -0.04em; text-align: center;
  background: linear-gradient(135deg, #f4f4f5, #a1a1aa); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }
.login-sub { font-size: 13px; color: #a1a1aa; text-align: center; margin-bottom: 8px; }
.login-card .form-input { margin-bottom: 2px; }
.login-card .btn { margin-top: 6px; }
.login-err { font-size: 12px; color: #fb7185; text-align: center; min-height: 16px; font-weight: 600; }

:root {
  /* ── Surfaces ── */
  --bg:     #06040e;
  --panel:  #0e0b1a;
  --panel2: #090714;
  --elev:   #15102a;

  /* Acento — morado profundo eléctrico (como la imagen) */
  --accent:    #7700dd;
  --accent-2:  #aa44ff;
  --accent-3:  #5500bb;
  --accent-bg: rgba(119,0,221,0.18);

  /* Glass */
  --glass:    rgba(119,0,221,0.07);
  --glass-md: rgba(119,0,221,0.13);
  --glass-hi: rgba(119,0,221,0.22);
  --nav-bg:    rgba(6,4,14,0.88);
  --footer-bg: rgba(14,6,35,0.95);
  --footer-solid: #130828;
  --nav-solid:#0e0620;

  /* Bordes */
  --border:    rgba(119,0,221,0.28);
  --border-hi: rgba(170,68,255,0.60);

  /* Alias */
  --p:        #7700dd;
  --p2:       #aa44ff;
  --cyan:     #7700dd;
  --p-bg:     rgba(119,0,221,0.18);
  --p-border: rgba(119,0,221,0.45);

  /* Positivo = morado brillante metálico, negativo = gris */
  --green:    #aa44ff;
  --green-bg: rgba(170,68,255,0.16);
  --green-b:  rgba(170,68,255,0.40);
  --red:      #7a7a8a;
  --terra:    #7a7a8a;
  --red-bg:   rgba(122,122,138,0.12);
  --red-b:    rgba(122,122,138,0.24);

  --yellow:   #7a7a8a;
  --yellow-bg:rgba(119,0,221,0.10);
  --orange:   #7a7a8a;
  --pink:     #7a7a8a;

  /* Text */
  --t1: #f0eeff;
  --t2: #9890b8;
  --t3: #443d60;

  --r: 12px; --r-lg: 16px; --r-xl: 22px;
  --hh: 56px; --ht: 66px;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);

  /* 3D shadows */
  --shadow-sm:  0 2px 10px rgba(0,0,0,0.55), 0 1px 3px rgba(0,0,0,0.7);
  --shadow-md:  0 4px 20px rgba(0,0,0,0.65), 0 2px 6px rgba(0,0,0,0.8);
  --shadow-lg:  0 8px 36px rgba(0,0,0,0.75), 0 3px 10px rgba(0,0,0,0.85);
  --shadow-p:   0 6px 28px rgba(119,0,221,0.65), 0 2px 10px rgba(85,0,187,0.45);
  --shadow-p-sm:0 3px 14px rgba(119,0,221,0.50);
  --inner-top:  inset 0 1px 0 rgba(200,150,255,0.12);
  --inner-bot:  inset 0 -1px 0 rgba(0,0,0,0.35);

  /* Gradientes metálicos morados (como la imagen) */
  --grad-p:  linear-gradient(160deg, #cc66ff 0%, #8800ee 35%, #5500aa 70%, #2d0066 100%);
  --grad-p2: linear-gradient(145deg, #bb55ff 0%, #7700dd 40%, #440099 100%);
  --grad-p3: linear-gradient(180deg, #9944dd 0%, #6600bb 50%, #3a0080 100%);
  --grad-shine: linear-gradient(135deg, rgba(200,150,255,0.22) 0%, rgba(255,255,255,0.04) 40%, rgba(0,0,0,0.10) 100%);
}

html, body { height: 100%; }
body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  background: var(--bg); color: var(--t1);
  -webkit-font-smoothing: antialiased; overflow-x: hidden;
  letter-spacing: -0.011em;
  overscroll-behavior-y: none;
}
body::before {
  content: ''; position: fixed; inset: 0; pointer-events: none; z-index: 0;
  background:
    radial-gradient(ellipse 80% 55% at 50% -10%, rgba(119,0,221,0.25) 0%, transparent 60%),
    radial-gradient(ellipse 50% 40% at 100% 10%, rgba(85,0,187,0.14) 0%, transparent 50%),
    radial-gradient(ellipse 40% 35% at 0% 70%, rgba(100,0,200,0.10) 0%, transparent 50%);
}
#app { position: relative; z-index: 1; height: 100vh; height: 100dvh; display: flex; flex-direction: column; overflow: hidden; }

/* ── HEADER (negro glass) ── */
.header {
  flex-shrink: 0; height: var(--hh); z-index: 100;
  display: flex; align-items: center; justify-content: space-between; padding: 0 16px;
  background: var(--nav-bg);
  backdrop-filter: blur(12px) saturate(160%); -webkit-backdrop-filter: blur(12px) saturate(160%);
  border-bottom: 1px solid var(--border);
}
.logo {
  font-size: 19px; font-weight: 800; letter-spacing: -0.03em;
  background: linear-gradient(135deg, #ffffff, #a78bfa);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
}
.header-right { display: flex; align-items: center; gap: 6px; }
.currency-toggle { display: flex; gap: 2px; background: var(--glass); border: 1px solid var(--border); border-radius: 9px; padding: 3px; }
.currency-toggle button { background: none; border: none; color: var(--t2); font-size: 11px; font-weight: 600; padding: 4px 10px; border-radius: 6px; cursor: pointer; transition: all .2s var(--ease); }
.currency-toggle button.active { background: var(--glass-hi); color: var(--t1); box-shadow: 0 1px 2px rgba(0,0,0,0.2); }
.icon-btn-hdr { width: 33px; height: 33px; border-radius: 10px; border: 1px solid var(--border); background: var(--glass); color: var(--t2); cursor: pointer; font-size: 13px; display: flex; align-items: center; justify-content: center; transition: all .2s var(--ease); }
.icon-btn-hdr:hover { background: var(--glass-md); border-color: var(--border-hi); color: var(--t1); transform: translateY(-1px); }

/* ── TABS (glass) ── */
/* Footer flotante redondeado (estilo WhatsApp/IG) con glassmorphism morado */
.tab-nav {
  flex-shrink: 0; height: var(--ht); z-index: 100;
  display: flex; align-items: center; padding: 0 6px;
  margin: 0 12px calc(env(safe-area-inset-bottom, 0px) + 10px);
  border-radius: 30px;
  background: var(--footer-bg);
  backdrop-filter: blur(22px) saturate(180%); -webkit-backdrop-filter: blur(22px) saturate(180%);
  border: 1px solid rgba(147,51,234,0.30);
  box-shadow: 0 14px 40px rgba(0,0,0,0.70), 0 4px 16px rgba(0,0,0,0.50), inset 0 1px 0 rgba(192,132,252,0.08);
  position: relative; overflow: visible;
}
.tab-btn { position: relative; flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; padding: 6px 2px; border: none; background: none; color: var(--t3); font-size: 9px; font-weight: 600; border-radius: 10px; cursor: pointer; transition: color .25s var(--ease); }
.tab-btn svg { width: 19px; height: 19px; }
.tab-btn.active { color: var(--accent-2); }
.tab-pip { width: 38px; height: 38px; display: flex; align-items: center; justify-content: center; border-radius: 50%; transition: transform .32s var(--ease), background .32s var(--ease), box-shadow .32s var(--ease); }
/* La barra se "moldea" hacia arriba alrededor del icono activo (cuna) */
.tab-btn.active::before {
  content: ''; position: absolute; top: -20px; left: 50%; transform: translateX(-50%);
  width: 60px; height: 60px; border-radius: 50%;
  background: var(--footer-solid);
  border: 1px solid rgba(139,92,246,0.28);
  z-index: 0;
}
.tab-btn.active .tab-pip, .tab-btn.active span { position: relative; z-index: 1; }
/* Burbuja flotante morada metálica */
.tab-btn.active .tab-pip {
  background: linear-gradient(145deg, #cc66ff 0%, #8800ee 40%, #5500aa 80%, #3a0080 100%);
  color: #fff;
  transform: translateY(-18px);
  box-shadow: 0 8px 32px rgba(119,0,221,0.90), 0 3px 12px rgba(85,0,187,0.65), inset 0 1px 0 rgba(220,170,255,0.35), inset 0 -1px 0 rgba(0,0,0,0.40);
}
.tab-btn.active .tab-pip svg { color: #fff; }

/* ── MAIN ── */
.main-content { flex: 1; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; padding: 14px 14px 22px; max-width: 600px; width: 100%; margin: 0 auto; }
.tab-panel { display: none; }
.tab-panel.active { display: block; animation: fadeUp .28s var(--ease); }
@media (min-width: 820px) {
  .main-content { max-width: 780px; }
}

/* ── CARDS ── */
.card { background: var(--panel); border: 1px solid var(--border); border-radius: var(--r-lg); padding: 18px; box-shadow: var(--shadow-md), var(--inner-top); }
.card-sm { background: var(--panel); border: 1px solid var(--border); border-radius: var(--r); padding: 12px 14px; box-shadow: var(--shadow-sm), var(--inner-top); }

.summary-card {
  border-radius: var(--r-xl); padding: 20px; margin-bottom: 16px;
  background: var(--panel); border: 1px solid var(--border);
  box-shadow: var(--shadow-md), var(--inner-top);
}
.summary-card.red-card { background: var(--panel); border-color: var(--border); }
.sum-label { font-size: 11px; font-weight: 600; color: var(--t2); text-transform: uppercase; letter-spacing: .06em; margin-bottom: 6px; }
.sum-amount { font-size: 32px; font-weight: 800; letter-spacing: -0.04em; color: var(--t1); }
.sum-amount.red { color: var(--t1); }
.sum-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 14px; }
.sum-stat { background: var(--glass); border-radius: var(--r); padding: 10px 12px; border: 1px solid var(--border); }
.sv { font-size: 16px; font-weight: 700; }
.sl { font-size: 11px; color: var(--t2); margin-top: 1px; }

/* ── SECTION HEADER ── */
.sec-hdr { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.sec-title { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .07em; color: var(--t2); }

/* ── LIST ITEMS ── */
.list { display: flex; flex-direction: column; gap: 7px; }
.list-item {
  display: flex; align-items: center; gap: 10px; padding: 12px 14px;
  background: var(--panel); border: 1px solid var(--border); border-radius: var(--r);
  box-shadow: var(--shadow-sm), var(--inner-top);
  transition: all .22s var(--ease); animation: fadeUp .28s var(--ease);
}
.list-item:hover { border-color: var(--border-hi); transform: translateY(-2px); box-shadow: var(--shadow-md), var(--shadow-p-sm), var(--inner-top); }
.item-ico { width: 38px; height: 38px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 15px; flex-shrink: 0; color: #ddb0ff; background: linear-gradient(145deg, #6600bb 0%, #3d0080 60%, #220044 100%); border: 1px solid rgba(170,68,255,0.50); box-shadow: 0 4px 16px rgba(119,0,221,0.50), inset 0 1px 0 rgba(220,170,255,0.25), inset 0 -1px 0 rgba(0,0,0,0.35); }
.item-ico svg { width: 18px; height: 18px; }
.ico-g, .ico-r, .ico-p, .ico-y { background: var(--accent-bg); }
.item-info { flex: 1; min-width: 0; }
.item-name { font-size: 14px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.item-meta { font-size: 11px; color: var(--t2); margin-top: 2px; display: flex; align-items: center; gap: 5px; flex-wrap: wrap; }
.item-amt { font-size: 14px; font-weight: 700; flex-shrink: 0; }
.amt-g { background: linear-gradient(135deg, #dd88ff, #aa44ff, #7700dd); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; filter: drop-shadow(0 2px 6px rgba(119,0,221,0.55)); }
.amt-r { color: var(--red); } .amt-o { color: var(--orange); } .amt-muted { color: var(--t3); }
.item-actions { display: flex; gap: 5px; }
.icon-btn { width: 28px; height: 28px; border-radius: 7px; border: none; background: var(--glass); color: var(--t2); cursor: pointer; display: flex; align-items: center; justify-content: center; font-size: 13px; transition: all .18s var(--ease); }
.icon-btn svg { width: 15px; height: 15px; }
.icon-btn:hover { background: var(--glass-hi); color: var(--t1); }
.icon-btn.del:hover { background: var(--red-bg); color: var(--red); }
.icon-btn-hdr svg { width: 16px; height: 16px; }

/* ── BADGES ── */
.badge { display: inline-flex; align-items: center; padding: 2px 8px; border-radius: 7px; font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; }
.bdg-blue { background: var(--p-bg); color: var(--p2); border: 1px solid var(--p-border); }
.bdg-gray { background: var(--glass-md); color: var(--t2); }

/* ── BUTTONS ── */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 10px 18px; border-radius: 9px; border: 1px solid transparent; font-size: 13px; font-weight: 600; cursor: pointer; transition: all .2s var(--ease); font-family: inherit; -webkit-tap-highlight-color: transparent; }
.btn-p { background: linear-gradient(160deg, #cc66ff 0%, #8800ee 40%, #5500aa 80%, #3a0080 100%); color: #fff; box-shadow: 0 4px 20px rgba(119,0,221,0.65), 0 2px 8px rgba(0,0,0,0.5), inset 0 1px 0 rgba(220,170,255,0.30), inset 0 -1px 0 rgba(0,0,0,0.30); text-shadow: 0 1px 3px rgba(0,0,0,0.4); }
.btn-p:hover { background: linear-gradient(160deg, #dd77ff 0%, #9900ff 40%, #6600bb 80%, #440099 100%); transform: translateY(-2px); box-shadow: 0 8px 28px rgba(119,0,221,0.75), 0 3px 12px rgba(0,0,0,0.6), inset 0 1px 0 rgba(230,180,255,0.40); }
.btn-p:active { transform: translateY(1px); box-shadow: 0 2px 10px rgba(119,0,221,0.50), inset 0 2px 6px rgba(0,0,0,0.30); }
.btn-r { background: var(--red); color: #1a0a0e; }
.btn-g { background: var(--green); color: #04140d; }
.btn-ghost { background: var(--glass); border: 1px solid var(--border); color: var(--t1); }
.btn-ghost:hover { background: var(--glass-md); border-color: var(--border-hi); }
.btn-full { width: 100%; }
.btn-form-toggle { margin-top: 16px; }

/* ── COLLAPSIBLE FORM ── */
.form-collapse { display: grid; grid-template-rows: 0fr; overflow: hidden; transition: grid-template-rows .28s ease; }
.form-collapse > .form-card { min-height: 0; }
.form-collapse.open { grid-template-rows: 1fr; }
.btn-sm { padding: 7px 13px; font-size: 12px; }
.btn svg { width: 15px; height: 15px; }
.btn-icon { padding: 7px 10px; }
.btn-icon:hover { color: var(--red); border-color: var(--red-b); }

/* ── FORMS ── */
.form-group { margin-bottom: 12px; }
.form-label { display: block; font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; color: var(--t2); margin-bottom: 5px; }
.form-input, .form-select { width: 100%; padding: 11px 13px; background: var(--glass); border: 1px solid var(--border); border-radius: var(--r); color: var(--t1); font-size: 14px; font-family: inherit; transition: all .2s var(--ease); -webkit-appearance: none; appearance: none; }
.form-input:focus, .form-select:focus { outline: none; border-color: var(--border-hi); background: var(--glass-md); box-shadow: 0 0 0 3px rgba(255,255,255,0.04); }
.form-input::placeholder { color: var(--t3); }
.form-select { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='7' viewBox='0 0 12 7'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23a1a1aa' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 13px center; padding-right: 34px; cursor: pointer; }
.form-select option { background: var(--panel2); color: var(--t1); }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
textarea.form-input { resize: none; line-height: 1.6; }

/* ── PRODUCT / SOURCE BAR ── */
.top-bar { display: flex; gap: 8px; align-items: center; margin-bottom: 14px; }
.top-bar .form-select { flex: 1; }

/* ── MONTH FILTER ── */
.month-row { display: flex; gap: 6px; overflow-x: auto; padding-bottom: 2px; margin-bottom: 14px; scrollbar-width: none; }
.month-row::-webkit-scrollbar { display: none; }
.mchip { padding: 5px 12px; border-radius: 8px; font-size: 11px; font-weight: 600; white-space: nowrap; border: 1px solid var(--border); background: var(--glass); color: var(--t2); cursor: pointer; transition: all .2s var(--ease); }
.mchip.on { background: var(--glass-hi); border-color: var(--border-hi); color: var(--t1); }

/* ── STAT CARDS ── */
.stat-row { display: grid; gap: 8px; margin-bottom: 14px; }
.stat-row.cols-3 { grid-template-columns: repeat(3,1fr); }
.stat-row.cols-2 { grid-template-columns: repeat(2,1fr); }
.stat-row.cols-4 { grid-template-columns: repeat(2,1fr); }
@media (min-width: 560px) { .stat-row.cols-4 { grid-template-columns: repeat(4,1fr); } }
.stat-card { border-radius: var(--r); padding: 11px 10px; text-align: center; background: var(--panel); border: 1px solid var(--border); }
.sc-red    { background: var(--panel); border-color: var(--border); }
.sc-green  { background: var(--panel); border-color: var(--border); }
.sc-blue   { background: var(--panel); border-color: var(--border); }
.sc-yellow { background: var(--panel); border-color: var(--border); }
.sc-val { font-size: 14px; font-weight: 800; letter-spacing: -0.02em; }
.sc-val.r { color: var(--red); } .sc-val.g { color: var(--green); } .sc-val.p { color: var(--p2); } .sc-val.y { color: var(--yellow); }
.sc-lbl { font-size: 9px; font-weight: 600; text-transform: uppercase; letter-spacing: .05em; color: var(--t2); margin-top: 3px; }
.sc-roi { font-size: 10px; font-weight: 700; margin-top: 3px; }
.sc-roi.g { color: var(--green); }
.sc-roi.r { color: var(--red); }

/* ── FACE SCAN AUTO ── */
.face-scan-wrap { display: flex; flex-direction: column; align-items: center; gap: 14px; padding: 20px 0; }
.face-scan-ring {
  position: relative; width: 88px; height: 88px;
  display: flex; align-items: center; justify-content: center;
  border: 2.5px solid var(--accent); border-radius: 50%;
  animation: face-pulse 1.6s ease-in-out infinite;
}
.face-scan-ring::before {
  content: ''; position: absolute; inset: -10px;
  border: 2px solid rgba(119,0,221,0.22); border-radius: 50%;
  animation: face-pulse 1.6s ease-in-out infinite 0.45s;
}
.face-scan-ring::after {
  content: ''; position: absolute; inset: -22px;
  border: 1px solid rgba(119,0,221,0.10); border-radius: 50%;
  animation: face-pulse 1.6s ease-in-out infinite 0.9s;
}
.face-scan-ico { font-size: 42px; line-height: 1; }
.face-scan-lbl { font-size: 13px; color: var(--t2); font-weight: 500; text-align: center; }
@keyframes face-pulse {
  0%,100% { box-shadow: 0 0 0 0 rgba(119,0,221,0.55); }
  50%      { box-shadow: 0 0 0 10px rgba(119,0,221,0); }
}
.face-scan-ring.failed { border-color: var(--red); animation: none; }
.face-scan-ring.failed::before,
.face-scan-ring.failed::after { display: none; }

/* ── INLINE FORM GRID ── */
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 14px; }
@media (max-width: 420px) { .form-grid { grid-template-columns: 1fr; } }
.form-card { background: var(--panel); border: 1px solid var(--border); border-radius: var(--r-lg); padding: 16px; }
.result-card { border-radius: var(--r-lg); padding: 16px; display: flex; flex-direction: column; justify-content: center; background: var(--panel); border: 1px solid var(--border); }
.rc-green, .rc-red, .rc-blue { background: var(--panel); border: 1px solid var(--border); }
.rc-lbl { font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; color: var(--t2); margin-bottom: 6px; }
.rc-amt { font-size: 26px; font-weight: 800; letter-spacing: -0.03em; }
.rc-amt.g { background: linear-gradient(135deg, #dd88ff, #aa44ff, #7700dd); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; filter: drop-shadow(0 2px 8px rgba(119,0,221,0.60)); }
.rc-amt.r { color: var(--red); }
.rc-amt.p { background: linear-gradient(135deg, #dd88ff, #aa44ff, #7700dd); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }
.rc-lines { margin-top: 12px; display: flex; flex-direction: column; gap: 5px; }
.rc-line { font-size: 11px; color: var(--t2); display: flex; justify-content: space-between; }
.rc-date { font-size: 11px; color: var(--t3); margin-top: 8px; }

/* ── META ADS RESPONSIVE LAYOUT ── */
.ma-layout { display: flex; flex-direction: column; gap: 16px; }
.ma-main { min-width: 0; }
.ma-chart-panel { background: var(--panel); border: 1px solid var(--border); border-radius: var(--r-lg); padding: 16px; }
.ma-chart-panel canvas { max-height: 240px; }
@media (min-width: 820px) {
  .ma-layout { display: grid; grid-template-columns: minmax(0, 1fr) 340px; align-items: start; }
  .ma-chart-panel { position: sticky; top: 0; }
}

/* ── META ADS: rango de fechas ── */
.range-box { background: var(--panel); border: 1px solid var(--border); border-radius: var(--r-lg); padding: 14px; margin-bottom: 14px; }
.range-head { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .07em; color: var(--t2); margin-bottom: 10px; }
.range-inputs { display: flex; align-items: center; gap: 8px; }
.range-inputs .form-input { flex: 1; min-width: 0; padding: 9px 10px; font-size: 13px; }
.range-sep { color: var(--t3); flex-shrink: 0; }
.range-hint { font-size: 12px; color: var(--t3); margin-top: 10px; }
.form-hint { font-size: 11px; color: var(--t3); margin: -4px 0 12px; line-height: 1.4; }
.range-result { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--border); }
.rr-top { font-size: 12px; color: var(--t2); }
.rr-amt { font-size: 26px; font-weight: 800; letter-spacing: -.03em; margin: 2px 0 4px; }
.rr-amt.g { background: linear-gradient(135deg, #dd88ff, #aa44ff, #7700dd); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; filter: drop-shadow(0 2px 8px rgba(119,0,221,0.55)); }
.rr-amt.r { color: var(--red); }
.rr-line { font-size: 11px; color: var(--t2); }

/* ── META ADS: tarjeta de historial ── */
.ma-card { background: var(--panel); border: 1px solid var(--border); border-radius: var(--r); padding: 12px 14px; animation: fadeUp .2s var(--ease); }
.ma-row1 { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.ma-date { font-size: 13px; font-weight: 700; }
.ma-profit { font-size: 17px; font-weight: 800; letter-spacing: -.02em; }
.ma-profit.g { background: linear-gradient(135deg, #dd88ff, #aa44ff, #7700dd); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; filter: drop-shadow(0 2px 6px rgba(119,0,221,0.55)); }
.ma-profit.r { color: var(--red); }
.ma-row2 { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 8px; }
.ma-chips { display: flex; flex-wrap: wrap; gap: 3px 12px; font-size: 11px; color: var(--t2); min-width: 0; }
.ma-chips .mc i { font-style: normal; font-weight: 700; }
.ma-chips .mc i.r { color: var(--red); } .ma-chips .mc i.g { color: var(--green); }
.ma-acts { display: flex; gap: 4px; flex-shrink: 0; }

/* ── HISTORY RECORDS ── */
.rec-row { display: flex; align-items: center; gap: 8px; padding: 10px 12px; background: var(--panel); border: 1px solid var(--border); border-radius: var(--r); animation: fadeUp .24s var(--ease); }
.rec-date { font-size: 12px; font-weight: 700; min-width: 65px; }
.rec-stats { flex: 1; display: flex; gap: 8px; flex-wrap: wrap; }
.rs { display: flex; flex-direction: column; align-items: center; min-width: 44px; }
.rs-v { font-size: 11px; font-weight: 700; }
.rs-l { font-size: 9px; color: var(--t2); }
.rec-profit { font-size: 13px; font-weight: 800; }

/* ── MODAL (glass) ── */
.modal-overlay { position: fixed; inset: 0; z-index: 200; background: rgba(0,0,0,.55); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); display: flex; align-items: flex-end; padding: 12px; animation: fadeIn .22s var(--ease); }
.modal-overlay.hidden { display: none; }
.modal { width: 100%; max-width: 480px; margin: 0 auto; background: rgba(17,17,24,0.96); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border: 1px solid var(--border-hi); border-radius: var(--r-xl); padding: 22px; animation: slideUp .32s var(--ease); max-height: 88dvh; overflow-y: auto; box-shadow: 0 -8px 60px rgba(0,0,0,0.7), 0 0 40px rgba(147,51,234,0.12), inset 0 1px 0 rgba(192,132,252,0.10); }
@media (min-width: 600px) { .modal-overlay { align-items: center; } }
.modal-hdr { display: flex; align-items: center; justify-content: space-between; margin-bottom: 18px; }
.modal-title { font-size: 17px; font-weight: 700; letter-spacing: -0.02em; }
.modal-close { width: 30px; height: 30px; border-radius: 8px; border: none; background: var(--glass-md); color: var(--t2); cursor: pointer; font-size: 15px; display: flex; align-items: center; justify-content: center; transition: all .18s var(--ease); }
.modal-close:hover { background: var(--glass-hi); color: var(--t1); }

/* ── PROGRESS BAR ── */
.progress-bar { height: 5px; background: var(--glass-md); border-radius: 100px; overflow: hidden; margin: 8px 0 3px; }
.progress-fill { height: 100%; border-radius: 100px; transition: width .6s var(--ease); background: var(--p); }
.progress-fill.done { background: var(--green); }
.progress-fill.warn { background: var(--yellow); }
.progress-fill.over { background: var(--red); }

/* ── BUDGET INDICATOR ── */
.budget-row { display: flex; justify-content: space-between; align-items: center; font-size: 11px; color: var(--t2); margin-top: 2px; }
.budget-row.warn { color: var(--yellow); }
.budget-row.over { color: var(--red); font-weight: 700; }

/* ── PUSH BOX ── */
.push-box { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border-radius: var(--r-lg); background: var(--panel); border: 1px solid var(--border); margin-bottom: 16px; }
.push-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.push-info strong { font-size: 14px; font-weight: 700; letter-spacing: -0.01em; }
.push-info strong { filter: grayscale(1) brightness(1.35); }
.push-info span { font-size: 12px; color: var(--t2); line-height: 1.45; }
.push-box .btn { flex-shrink: 0; }
.logout-row { display: flex; justify-content: center; margin-top: 22px; }
.logout-link { background: none; border: none; color: var(--t3); font-size: 13px; font-weight: 600; cursor: pointer; padding: 8px 14px; border-radius: 8px; font-family: inherit; transition: all .18s var(--ease); }
.logout-link:hover { color: var(--red); background: var(--red-bg); }
.app-version { text-align: center; font-size: 11px; color: var(--t3); margin-top: 8px; padding-bottom: 6px; }

/* ── NOTES ── */
.nota-card { background: var(--panel); border: 1px solid var(--border); border-radius: var(--r-lg); padding: 14px; animation: fadeUp .24s var(--ease); transition: all .22s var(--ease); }
.nota-card:hover { border-color: var(--border-hi); transform: translateY(-1px); }
.nota-txt { font-size: 14px; line-height: 1.65; color: var(--t1); white-space: pre-wrap; word-break: break-word; }
.nota-date { font-size: 11px; color: var(--t3); margin-top: 8px; }
.meta-goal { background: var(--panel); border: 1px solid var(--border); border-radius: var(--r-lg); padding: 14px; animation: fadeUp .24s var(--ease); }

/* ── VEREDICTO ── */
.verdict { display: flex; align-items: center; gap: 14px; padding: 16px 18px; border-radius: var(--r-lg); margin-bottom: 14px; border: 1px solid var(--border); background: var(--panel); border-left-width: 3px; }
.verdict-emoji { font-size: 30px; line-height: 1; flex-shrink: 0; filter: grayscale(1) brightness(1.55) contrast(0.9); }
.verdict-txt { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.verdict-txt strong { font-size: 15px; font-weight: 800; letter-spacing: -0.02em; }
.verdict-txt span { font-size: 12px; color: var(--t2); }
/* Versión compacta del veredicto */
.verdict.compact { padding: 10px 14px; gap: 11px; margin-bottom: 12px; }
.verdict.compact .verdict-emoji { font-size: 22px; }
.verdict.compact .verdict-txt strong { font-size: 13px; }
.verdict.compact .verdict-txt span { font-size: 11px; }
.verdict.v-god    { border-left-color: var(--p2);     background: linear-gradient(100deg, rgba(168,85,247,.12), var(--panel) 70%); }
.verdict.v-god    strong { color: #c4b5fd; }
.verdict.v-great  { border-left-color: var(--green);  background: linear-gradient(100deg, rgba(52,211,153,.12), var(--panel) 70%); }
.verdict.v-great  strong { color: var(--green); }
.verdict.v-ok     { border-left-color: var(--cyan);   background: linear-gradient(100deg, rgba(139,92,246,.10), var(--panel) 70%); }
.verdict.v-ok     strong { color: var(--cyan); }
.verdict.v-warn   { border-left-color: var(--red); background: linear-gradient(100deg, rgba(251,113,133,.08), var(--panel) 70%); }
.verdict.v-warn   strong { color: var(--red); }
.verdict.v-danger { border-left-color: var(--red); background: linear-gradient(100deg, rgba(251,113,133,.12), var(--panel) 70%); }
.verdict.v-danger strong { color: var(--red); }
.verdict.v-bad    { border-left-color: var(--red);    background: linear-gradient(100deg, rgba(251,113,133,.14), var(--panel) 70%); }
.verdict.v-bad    strong { color: var(--red); }
.verdict.v-neutral{ border-left-color: var(--t3); }
.verdict.v-neutral strong { color: var(--t2); }

/* ── DASHBOARD ── */
.dash-balance { border-radius: var(--r-xl); padding: 22px; margin-bottom: 14px; text-align: center; background: linear-gradient(160deg, rgba(147,51,234,0.18), rgba(109,40,211,0.08) 40%, var(--panel) 70%); border: 1px solid var(--border-hi); box-shadow: var(--shadow-lg), 0 0 32px rgba(147,51,234,0.18), inset 0 1px 0 rgba(192,132,252,0.12); }
.dash-balance.pos, .dash-balance.neg, .dash-balance.zero { background: var(--panel); border-color: var(--border); }
.db-label { font-size: 11px; font-weight: 600; color: var(--t2); text-transform: uppercase; letter-spacing: .07em; margin-bottom: 8px; }
.db-amount { font-size: 40px; font-weight: 800; letter-spacing: -0.04em; }
.db-amount.pos  { background: linear-gradient(135deg, #dd88ff, #aa44ff, #7700dd); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; filter: drop-shadow(0 3px 10px rgba(119,0,221,0.65)); }
.db-amount.neg  { color: var(--red); }
.db-amount.zero { color: var(--t1); }
.db-sub { font-size: 12px; color: var(--t2); margin-top: 8px; }

/* Donut "disponible este mes" */
.donut-card { background: var(--panel); border: 1px solid var(--border); border-radius: var(--r-lg); padding: 16px; margin-bottom: 14px; }
.donut-row { display: flex; align-items: center; gap: 16px; }
.donut-wrap { position: relative; width: 150px; height: 150px; flex-shrink: 0; }
.donut-center { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; pointer-events: none; }
.donut-c-lbl { font-size: 10px; color: var(--t2); text-transform: uppercase; letter-spacing: .05em; }
.donut-c-val { font-size: 18px; font-weight: 800; letter-spacing: -0.02em; margin-top: 2px; }
.donut-legend { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 10px; }
.dl-item { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--t2); }
.dl-item b { margin-left: auto; color: var(--t1); font-weight: 700; font-size: 12px; }
.dl-dot { width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; }

/* Total del mes incluido Ads (resumen compacto) */
.total-ads { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 16px; border-radius: var(--r-lg); margin-bottom: 14px; background: var(--panel); border: 1px solid var(--border); border-left-width: 3px; }
.total-ads.pos { border-left-color: var(--green); }
.total-ads.neg { border-left-color: var(--red); }
.total-ads.zero { border-left-color: var(--border-hi); }
.ta-info { min-width: 0; }
.ta-label { font-size: 12px; font-weight: 700; color: var(--t1); }
.ta-sub { font-size: 11px; color: var(--t2); margin-top: 2px; }
.ta-amt { font-size: 20px; font-weight: 800; letter-spacing: -0.02em; flex-shrink: 0; }
.ta-amt.pos { background: linear-gradient(135deg, #dd88ff, #aa44ff, #7700dd); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; filter: drop-shadow(0 2px 8px rgba(119,0,221,0.55)); }
.ta-amt.neg { color: var(--red); } .ta-amt.zero { color: var(--t1); }

.dash-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 14px; }
.dash-card { border-radius: var(--r-lg); padding: 14px; cursor: pointer; transition: all .22s var(--ease); border: 1px solid var(--border); background: var(--panel); box-shadow: var(--shadow-md), var(--inner-top); }
.dash-card:hover { transform: translateY(-3px); border-color: var(--border-hi); box-shadow: var(--shadow-lg), var(--shadow-p-sm), var(--inner-top); }
.dc-icon { width: 40px; height: 40px; border-radius: 50%; margin-bottom: 12px; display: flex; align-items: center; justify-content: center; color: #ddb0ff; background: linear-gradient(145deg, #6600bb 0%, #3d0080 60%, #220044 100%); border: 1px solid rgba(170,68,255,0.50); box-shadow: 0 4px 16px rgba(119,0,221,0.50), inset 0 1px 0 rgba(220,170,255,0.25), inset 0 -1px 0 rgba(0,0,0,0.35); }
.dc-icon svg { width: 20px; height: 20px; }
.dc-val { font-size: 20px; font-weight: 800; letter-spacing: -0.03em; }
.dc-lbl { font-size: 11px; color: var(--t2); margin-top: 3px; }

/* ── CHART ── */
.chart-wrap { background: var(--panel); border: 1px solid var(--border); border-radius: var(--r-lg); padding: 16px; margin-bottom: 14px; box-shadow: var(--shadow-md), var(--inner-top); }
.chart-title { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .07em; color: var(--t2); margin-bottom: 12px; }
#dash-chart { max-height: 180px; }
.chart-views { display: flex; gap: 4px; overflow-x: auto; margin-bottom: 12px; scrollbar-width: none; }
.chart-views::-webkit-scrollbar { display: none; }
.cv-btn { padding: 5px 11px; border-radius: 8px; font-size: 11px; font-weight: 600; white-space: nowrap; border: 1px solid var(--border); background: var(--glass); color: var(--t2); cursor: pointer; transition: all .2s var(--ease); font-family: inherit; }
.cv-btn.on { background: var(--glass-hi); border-color: var(--border-hi); color: var(--t1); }

/* ── REMINDERS ── */
.reminder-item { display: flex; align-items: center; gap: 10px; padding: 10px 12px; background: var(--panel); border: 1px solid var(--border); border-radius: var(--r); margin-bottom: 6px; }
.ri-date { font-size: 11px; font-weight: 700; color: var(--t2); min-width: 55px; }
.ri-name { font-size: 13px; font-weight: 500; flex: 1; }
.ri-badge { font-size: 10px; font-weight: 700; padding: 2px 8px; border-radius: 7px; }
.ri-over { background: var(--red-bg);    color: var(--red); }
.ri-soon { background: var(--yellow-bg); color: var(--yellow); }
.ri-ok   { background: var(--green-bg);  color: var(--green); }

/* ── GRUPOS EXPANDIBLES (ingresos / gastos) ── */
.group-list { display: flex; flex-direction: column; gap: 8px; }
.group { background: var(--panel); border: 1px solid var(--border); border-radius: var(--r-lg); overflow: hidden; transition: all .22s var(--ease); box-shadow: var(--shadow-md), var(--inner-top); }
.group.open { border-color: var(--border-hi); box-shadow: var(--shadow-lg), var(--shadow-p-sm), var(--inner-top); }
.group-head { display: flex; align-items: center; gap: 11px; padding: 13px 14px; cursor: pointer; user-select: none; }
.group-info { flex: 1; min-width: 0; }
.group-name { font-size: 15px; font-weight: 700; letter-spacing: -0.02em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.group-sub { font-size: 11px; color: var(--t2); margin-top: 2px; }
.group-amt { font-size: 16px; font-weight: 800; letter-spacing: -0.02em; flex-shrink: 0; }
.group-chevron { width: 16px; height: 16px; color: var(--t3); transition: transform .3s var(--ease); flex-shrink: 0; }
.group.open .group-chevron { transform: rotate(180deg); }
.group-body { max-height: 0; overflow: hidden; transition: max-height .35s var(--ease); }
.group.open .group-body { max-height: 1600px; }
.group-inner { padding: 0 14px 8px; }
.group-empty { font-size: 13px; color: var(--t3); padding: 4px 0 12px; }
.group-del { width: 28px; height: 28px; border: none; background: transparent; color: var(--t3); border-radius: 7px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; transition: all .18s var(--ease); }
.group-del svg { width: 14px; height: 14px; }
.group-del:hover { background: var(--red-bg); color: var(--red); }

.rec-line-item { display: flex; align-items: center; gap: 8px; padding: 11px 0; border-top: 1px solid var(--border); animation: fadeUp .2s var(--ease); }
.rli-info { flex: 1; min-width: 0; }
.rli-name { font-size: 14px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rli-meta { font-size: 11px; color: var(--t2); margin-top: 2px; }
.rli-amt { font-size: 14px; font-weight: 700; flex-shrink: 0; margin-right: 2px; }

/* ════════════════════════════════════════
   TAREAS — Cosas por hacer
   ════════════════════════════════════════ */
.tareas-views { display: flex; gap: 4px; background: var(--glass); border: 1px solid var(--border); border-radius: 10px; padding: 4px; margin-bottom: 16px; }
.tv-btn { flex: 1; padding: 8px; border: none; background: none; color: var(--t2); font-size: 12px; font-weight: 600; border-radius: 7px; cursor: pointer; transition: all .22s var(--ease); font-family: inherit; }
.tv-btn.on { background: var(--glass-hi); color: var(--t1); box-shadow: 0 1px 3px rgba(0,0,0,0.25); }

/* Accordion (Diario) */
.accordion { background: var(--panel); border: 1px solid var(--border); border-radius: var(--r-lg); overflow: hidden; margin-bottom: 12px; transition: border-color .22s var(--ease); }
.accordion.open { border-color: var(--border-hi); }
.acc-head { display: flex; align-items: center; gap: 12px; padding: 16px 18px; cursor: pointer; user-select: none; }
.acc-title { font-size: 15px; font-weight: 700; letter-spacing: -0.02em; }
.acc-sub { font-size: 12px; color: var(--t2); }
.acc-badge { margin-left: auto; font-size: 11px; font-weight: 700; padding: 4px 10px; border-radius: 7px; background: var(--glass-md); color: var(--t2); }
.acc-badge.full { background: var(--green-bg); color: var(--green); }
.acc-chevron { width: 18px; height: 18px; color: var(--t2); transition: transform .3s var(--ease); flex-shrink: 0; }
.accordion.open .acc-chevron { transform: rotate(180deg); }
.acc-body { max-height: 0; overflow: hidden; transition: max-height .35s var(--ease); }
.accordion.open .acc-body { max-height: 1200px; }
.acc-inner { padding: 0 18px 18px; }

/* Task row */
.task-row { display: flex; align-items: center; gap: 11px; padding: 11px 0; border-top: 1px solid var(--border); animation: fadeUp .2s var(--ease); }
.task-check { width: 20px; height: 20px; border-radius: 6px; border: 1.5px solid var(--t3); background: transparent; cursor: pointer; flex-shrink: 0; display: flex; align-items: center; justify-content: center; transition: all .2s var(--ease); }
.task-check:hover { border-color: var(--t2); }
.task-check.done { background: var(--green); border-color: var(--green); }
.task-check svg { width: 12px; height: 12px; color: #04140d; opacity: 0; transition: opacity .2s var(--ease); }
.task-check.done svg { opacity: 1; }
.task-check.failed { background: var(--red); border-color: var(--red); }
.task-check.failed svg { opacity: 1; color: #1a0a0e; }
.task-text { flex: 1; min-width: 0; font-size: 14px; color: var(--t1); transition: all .3s var(--ease); word-break: break-word; }
.task-row.done .task-text { opacity: 0.4; text-decoration: line-through; }
.task-row.failed .task-text { opacity: 0.55; text-decoration: line-through; color: var(--red); }
.task-acts { display: flex; gap: 1px; flex-shrink: 0; }
.task-act { width: 28px; height: 28px; border-radius: 7px; border: none; background: transparent; color: var(--t3); cursor: pointer; flex-shrink: 0; display: flex; align-items: center; justify-content: center; transition: all .18s var(--ease); }
.task-act svg { width: 15px; height: 15px; }
.task-act:hover { background: var(--glass-md); color: var(--t1); }
.task-act.on { color: var(--orange); }
.task-act.danger:hover { background: var(--red-bg); color: var(--red); }
.task-add { display: flex; gap: 8px; margin-top: 14px; }
.task-add .form-input { flex: 1; }

/* Frase motivadora */
.tarea-frase { margin-top: 18px; text-align: center; font-size: 14px; font-weight: 600; color: var(--t2); padding: 18px 16px; border-radius: var(--r-lg); background: var(--panel); border: 1px solid var(--border); line-height: 1.55; animation: fadeUp .4s var(--ease); }
.rut-badge { font-size: 10px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--accent); background: rgba(119,0,221,.13); padding: 3px 7px; border-radius: 20px; white-space: nowrap; flex-shrink: 0; }
.dias-grid { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
.dia-chip { display: flex; align-items: center; gap: 5px; padding: 7px 12px; background: var(--glass); border: 1px solid var(--border); border-radius: 20px; cursor: pointer; font-size: 13px; font-weight: 600; color: var(--t2); transition: all .18s; }
.dia-chip:has(input:checked) { background: rgba(119,0,221,.25); border-color: var(--accent); color: var(--t1); }
.dia-chip input { display: none; }

/* Weekly — 7 blocks */
.week-row { display: grid; grid-template-columns: repeat(7, 1fr); gap: 7px; margin-bottom: 16px; }
@media (max-width: 560px) { .week-row { grid-template-columns: repeat(7, minmax(0,1fr)); gap: 4px; } }
.day-block { position: relative; aspect-ratio: 3/4; border-radius: var(--r); border: 1px solid var(--border); background: var(--panel); padding: 8px 4px; display: flex; flex-direction: column; align-items: center; justify-content: center; cursor: pointer; transition: all .22s var(--ease); }
.day-block:hover { border-color: var(--border-hi); transform: translateY(-2px); }
.day-block.sel { border-color: var(--p-border); background: var(--p-bg); }
.day-block.today { box-shadow: inset 0 0 0 1px var(--p-border); }
.day-block.muted { opacity: 0.5; }
.db-dow { font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--t2); }
.db-num { font-size: 20px; font-weight: 800; letter-spacing: -0.03em; margin-top: 2px; }
.db-cnt { position: absolute; top: 5px; right: 5px; min-width: 16px; height: 16px; padding: 0 4px; border-radius: 8px; font-size: 9px; font-weight: 700; display: flex; align-items: center; justify-content: center; background: var(--red-bg); color: var(--red); }
.db-cnt.zero { background: var(--glass-md); color: var(--t3); }
.week-pend-label { font-size: 10px; color: var(--t2); margin-top: 4px; text-align: center; }

/* Monthly calendar */
.cal-head { display: grid; grid-template-columns: repeat(7, 1fr); gap: 5px; margin-bottom: 6px; }
.cal-dow { text-align: center; font-size: 9px; font-weight: 700; text-transform: uppercase; color: var(--t3); padding: 2px 0; }
.cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 5px; margin-bottom: 16px; }
.cal-cell { aspect-ratio: 1; border-radius: 9px; border: 1px solid var(--border); background: var(--panel); padding: 5px; display: flex; flex-direction: column; cursor: pointer; transition: all .2s var(--ease); position: relative; overflow: hidden; }
.cal-cell.empty { background: transparent; border-color: transparent; cursor: default; }
.cal-cell:not(.empty):hover { border-color: var(--border-hi); }
.cal-cell.sel { border-color: var(--border-hi); }
.cal-cell.done { background: rgba(139,92,246,0.10); border-color: rgba(139,92,246,0.30); }
.cal-cell.pending::after { content: ''; position: absolute; top: 6px; right: 6px; width: 6px; height: 6px; border-radius: 50%; background: var(--red); box-shadow: 0 0 6px rgba(251,113,133,0.5); }
.cal-num { font-size: 12px; font-weight: 700; color: var(--t1); }
.cal-cell.today .cal-num { color: var(--p2); }
.cal-pndt { font-size: 8px; font-weight: 600; color: var(--t3); margin-top: auto; letter-spacing: -0.02em; }
.cal-cell.done .cal-pndt { color: var(--cyan); }

/* ── EMPTY STATE ── */
.empty { text-align: center; padding: 36px 20px; }
.empty-ico { font-size: 34px; margin-bottom: 12px; opacity: 0.7; filter: grayscale(1) brightness(1.35); }
.empty strong { font-size: 15px; color: var(--t2); font-weight: 600; }
.empty p { font-size: 13px; color: var(--t3); margin-top: 6px; }

/* ── SKELETON ── */
.skeleton { background: linear-gradient(90deg, var(--panel) 25%, #20283a 37%, var(--panel) 63%); background-size: 400% 100%; animation: shimmer 1.5s var(--ease) infinite; border-radius: var(--r); }
.sk-stack { display: flex; flex-direction: column; gap: 12px; }
.sk-line { height: 14px; border-radius: 6px; }
@keyframes shimmer { 0% { background-position: 100% 0; } 100% { background-position: -100% 0; } }

/* ── TOAST ── */
.toast { position: fixed; top: calc(var(--hh) + 10px); left: 50%; transform: translateX(-50%) translateY(-8px); background: rgba(22,27,38,0.95); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border: 1px solid var(--border-hi); border-radius: 10px; padding: 9px 16px; font-size: 12px; font-weight: 600; color: var(--t1); z-index: 300; opacity: 0; transition: all .28s var(--ease); pointer-events: none; white-space: nowrap; box-shadow: 0 8px 24px rgba(0,0,0,0.4); }
.toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

/* ── FAB ── */
#fab { position: fixed; bottom: calc(var(--ht) + 14px); right: 16px; width: 46px; height: 46px; border-radius: 14px; background: linear-gradient(145deg, #cc66ff 0%, #8800ee 40%, #5500aa 80%, #330077 100%); border: none; color: #fff; font-size: 22px; cursor: pointer; display: flex; align-items: center; justify-content: center; box-shadow: 0 6px 24px rgba(119,0,221,0.70), 0 3px 10px rgba(0,0,0,0.55), inset 0 1px 0 rgba(220,170,255,0.30), inset 0 -1px 0 rgba(0,0,0,0.30); transition: all .22s var(--ease); z-index: 50; font-weight: 600; }
#fab:hover { transform: scale(1.06) translateY(-3px); box-shadow: 0 12px 36px rgba(119,0,221,0.80), 0 4px 14px rgba(0,0,0,0.65), inset 0 1px 0 rgba(230,180,255,0.40); }
#fab:active { transform: scale(.94); }
#fab.hidden { display: none; }

/* ── SCROLLBAR ── */
::-webkit-scrollbar { width: 4px; height: 4px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--glass-hi); border-radius: 3px; }

/* ── ANIMATIONS ── */
@keyframes fadeIn  { from { opacity: 0; } to { opacity: 1; } }
@keyframes fadeUp  { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
@keyframes slideUp { from { opacity: 0; transform: translateY(40px); } to { opacity: 1; transform: translateY(0); } }

.divider { height: 1px; background: var(--border); margin: 16px 0; }