:root { --black:#070707; --surface:#111; --surface-2:#191919; --white:#f6f6f1; --muted:#9b9b96; --line:#2c2c2c; --pink:#f15ac6; --pink-strong:#ec2da7; --yellow:#efff00; --danger:#ff5f75; --heading:"Bebas Neue",sans-serif; --body:"Manrope",sans-serif; }
* { box-sizing:border-box; }
html { color-scheme:dark; }
body { margin:0; background:var(--black); color:var(--white); font-family:var(--body); }
button,input,select,textarea { font:inherit; }
button,a { -webkit-tap-highlight-color:transparent; }
button { border:0; }
a { color:inherit; text-decoration:none; }
[hidden] { display:none !important; }
.login-screen { min-height:100vh; display:grid; place-items:center; padding:1.25rem; background:radial-gradient(circle at 78% 18%,rgba(241,90,198,.22),transparent 32%),radial-gradient(circle at 17% 88%,rgba(239,255,0,.13),transparent 25%),#070707; }
.login-card { width:min(560px,100%); padding:clamp(2rem,6vw,4.5rem); border:1px solid var(--line); background:rgba(17,17,17,.94); box-shadow:20px 20px 0 var(--pink); text-align:center; }
.admin-brand { display:inline-grid; margin-bottom:3rem; }
.login-card .admin-brand { justify-items:center; }
.admin-brand strong { color:var(--pink); font:italic 4.2rem/.82 var(--heading); letter-spacing:.02em; }
.admin-brand span { color:var(--yellow); font-size:.58rem; font-weight:800; letter-spacing:.18em; }
.kicker { margin:0 0 .55rem; color:var(--pink); font-size:.65rem; font-weight:800; letter-spacing:.14em; text-transform:uppercase; }
.login-card h1,.page-heading h2,.modal-heading h2 { margin:0; font:clamp(4rem,10vw,7.5rem)/.82 var(--heading); text-transform:uppercase; }
.login-card h1 em { color:var(--yellow); font-style:normal; }
.login-card > p:not(.kicker):not(.login-help) { max-width:430px; margin:1.5rem auto 2rem; color:var(--muted); line-height:1.7; }
.login-form { display:grid; gap:.65rem; }
.login-form label { margin-top:.2rem; color:#c4c4bf; font-size:.65rem; font-weight:800; letter-spacing:.08em; text-transform:uppercase; }
.login-form .button,.google-login { width:100%; margin-top:.45rem; }
.forgot-password { justify-self:center; padding:.25rem 0; background:none; color:var(--yellow); cursor:pointer; font-size:.68rem; font-weight:700; }
.forgot-password:hover { color:var(--pink); }
.login-divider { display:flex; align-items:center; gap:.8rem; margin:1.15rem 0 .7rem; color:#777; font-size:.7rem; text-transform:uppercase; }
.login-divider::before,.login-divider::after { content:""; flex:1; height:1px; background:var(--line); }
.login-help { margin:1rem 0 0; color:#6f6f6b; font-size:.72rem; }
.button { min-height:48px; display:inline-flex; align-items:center; justify-content:center; gap:1rem; padding:.75rem 1.15rem; border:1px solid transparent; cursor:pointer; font-size:.72rem; font-weight:800; letter-spacing:.06em; text-transform:uppercase; transition:transform .2s,background .2s,color .2s; }
.button:hover { transform:translateY(-2px); }
.button-primary { background:var(--pink); color:var(--black); }
.button-primary:hover { background:var(--yellow); }
.button-whatsapp { background:#25d366; color:#07120b; }
.button-whatsapp:hover { background:#58e28a; }
.button-dark { background:var(--black); color:var(--white); }
.button-outline { border-color:var(--line); background:transparent; color:inherit; }
.status-message { min-height:1.3rem; margin-top:.7rem; color:var(--yellow); font-size:.75rem; }
.admin-app { min-height:100vh; display:grid; grid-template-columns:250px minmax(0,1fr); }
.sidebar { position:sticky; top:0; height:100vh; display:flex; flex-direction:column; padding:2rem 1.25rem; border-right:1px solid var(--line); background:#0b0b0b; }
.sidebar .admin-brand { margin:.5rem .7rem 3rem; }
.sidebar .admin-brand strong { font-size:3.3rem; }
.sidebar nav { display:grid; gap:.35rem; }
.nav-item { width:100%; display:flex; align-items:center; justify-content:space-between; padding:.85rem 1rem; border-left:3px solid transparent; background:none; color:#979792; cursor:pointer; text-align:left; font-weight:700; }
.nav-item:hover,.nav-item.active { border-left-color:var(--yellow); background:var(--surface); color:var(--white); }
.nav-count { min-width:24px; padding:.18rem .35rem; border-radius:999px; background:var(--pink); color:var(--black); font-size:.62rem; text-align:center; }
.sidebar-bottom { display:grid; gap:.8rem; margin-top:auto; padding:.8rem; border-top:1px solid var(--line); font-size:.72rem; }
.sidebar-bottom a { color:var(--yellow); }
.sidebar-bottom button { padding:0; background:none; color:#777; cursor:pointer; text-align:left; }
.workspace { min-width:0; }
.topbar { min-height:78px; display:flex; align-items:center; justify-content:space-between; padding:1rem clamp(1rem,4vw,3rem); border-bottom:1px solid var(--line); background:rgba(7,7,7,.94); }
.topbar > div:first-of-type { display:grid; }
.topbar span,.topbar small { color:var(--muted); font-size:.68rem; }
.topbar strong { font-size:.78rem; }
.user-chip { display:flex; align-items:center; gap:.65rem; }
.user-chip > span { width:38px;height:38px;display:grid;place-items:center;border-radius:50%;background:var(--pink);color:var(--black);font:1.35rem/1 var(--heading); }
.user-chip > div { display:grid; }
.menu-button { display:none; background:none; color:var(--white); font-size:1.4rem; }
.view { padding:clamp(1.25rem,4vw,3.5rem); }
.page-heading { display:flex; align-items:end; justify-content:space-between; gap:2rem; margin-bottom:2.5rem; }
.page-heading h2 { font-size:clamp(4rem,8vw,7rem); }
.page-heading > div > p:last-child { margin:.9rem 0 0; color:var(--muted); }
.metric-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(215px,1fr)); gap:1rem; margin-bottom:1rem; }
.metric-grid.compact { grid-template-columns:repeat(auto-fit,minmax(215px,1fr)); }
.metric { min-height:170px; display:flex; flex-direction:column; padding:1.3rem; border:1px solid var(--line); background:var(--surface); }
.metric.pink { background:var(--pink); color:var(--black); }
.metric.yellow { background:var(--yellow); color:var(--black); }
.metric span { font-size:.67rem; font-weight:800; letter-spacing:.09em; text-transform:uppercase; }
.metric strong { margin:auto 0 .35rem; overflow:hidden; font:clamp(2.75rem,4.1vw,3.6rem)/.9 var(--heading); text-overflow:ellipsis; white-space:nowrap; }
.metric small { color:inherit; opacity:.65; }
.dashboard-grid,.alert-columns { display:grid; grid-template-columns:1fr 1fr; gap:1rem; margin-bottom:1rem; }
.panel { padding:clamp(1rem,2.5vw,1.7rem); border:1px solid var(--line); background:var(--surface); }
.table-panel { padding:0; overflow:hidden; }
.panel-heading { display:flex; align-items:start; justify-content:space-between; gap:1rem; margin-bottom:1.3rem; }
.panel-heading h3 { margin:0; font:2.2rem/1 var(--heading); text-transform:uppercase; }
.text-button { padding:.4rem 0; background:none; color:var(--yellow); cursor:pointer; font-size:.7rem; font-weight:800; }
.compact-list,.alert-list { display:grid; gap:.65rem; }
.compact-item,.alert-item { display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:.8rem; padding:.8rem; border:1px solid var(--line); background:#0d0d0d; }
.compact-item .dot,.alert-item .dot { width:9px;height:9px;border-radius:50%;background:var(--pink);box-shadow:0 0 0 5px rgba(241,90,198,.12); }
.compact-item.danger .dot,.alert-item.danger .dot { background:var(--danger); }
.compact-item.birthday .dot,.alert-item.birthday .dot { background:var(--yellow); }
.compact-item div,.alert-item div { display:grid; }
.compact-item strong,.alert-item strong { font-size:.8rem; }
.compact-item span,.alert-item span { color:var(--muted); font-size:.67rem; }
.compact-item time,.alert-item time { color:var(--yellow); font-size:.66rem; font-weight:800; }
.income-chart { min-height:220px; display:flex; align-items:end; gap:.6rem; padding-top:1rem; }
.income-bar { flex:1; min-width:0; display:grid; grid-template-rows:1fr auto auto; align-items:end; gap:.35rem; height:190px; text-align:center; }
.income-bar i { width:100%; min-height:4px; display:block; background:linear-gradient(0deg,var(--pink),var(--yellow)); }
.income-bar strong { overflow:hidden; font-size:.62rem; text-overflow:ellipsis; }
.income-bar span { color:var(--muted); font-size:.58rem; text-transform:uppercase; }
.toolbar { display:grid; gap:.8rem; margin-bottom:1rem; }
.toolbar > input { min-height:56px; }
.toolbar-controls { display:flex; justify-content:flex-end; gap:.8rem; }
.toolbar-controls select { width:min(360px,100%); }
input,select,textarea { width:100%; border:1px solid var(--line); border-radius:0; padding:.82rem .9rem; background:#0d0d0d; color:var(--white); outline:none; }
input:focus,select:focus,textarea:focus { border-color:var(--pink); }
select option { background:var(--surface); }
.table-wrap { overflow:auto; }
table { width:100%; border-collapse:collapse; min-width:760px; }
th,td { padding:1rem 1.2rem; border-bottom:1px solid var(--line); text-align:left; vertical-align:middle; }
th { color:#777; font-size:.6rem; letter-spacing:.11em; text-transform:uppercase; }
td { font-size:.76rem; }
tbody tr:hover { background:#151515; }
.person-cell { display:grid; }
.person-cell span { color:var(--muted); font-size:.65rem; }
.status-pill { display:inline-flex; padding:.28rem .55rem; border-radius:999px; background:rgba(239,255,0,.12); color:var(--yellow); font-size:.62rem; font-weight:800; }
.status-pill.paused { background:rgba(241,90,198,.12); color:var(--pink); }
.status-pill.inactive,.status-pill.overdue { background:rgba(255,95,117,.12); color:var(--danger); }
.row-actions { display:flex; gap:.4rem; justify-content:flex-end; }
.icon-button { padding:.45rem .6rem; border:1px solid var(--line); background:transparent; color:var(--white); cursor:pointer; font-size:.66rem; }
.icon-button:hover { border-color:var(--pink); color:var(--pink); }
.receipt-button { padding:.35rem .55rem; background:rgba(241,90,198,.12); color:var(--pink); cursor:pointer; font-size:.64rem; font-weight:800; }
.empty-state { display:grid; place-items:center; min-height:260px; padding:2rem; text-align:center; }
.empty-state strong { font:2rem/1 var(--heading); text-transform:uppercase; }
.empty-state p { max-width:430px; color:var(--muted); font-size:.8rem; }
dialog { width:min(820px,calc(100% - 2rem)); max-height:calc(100vh - 2rem); border:1px solid var(--line); padding:0; background:var(--surface); color:var(--white); box-shadow:20px 20px 0 rgba(241,90,198,.45); }
dialog::backdrop { background:rgba(0,0,0,.82); backdrop-filter:blur(4px); }
.modal-form,.receipt-modal { padding:clamp(1.2rem,4vw,2.4rem); overflow:auto; }
.modal-heading { display:flex; justify-content:space-between; gap:1rem; align-items:start; margin-bottom:2rem; }
.modal-heading h2 { font-size:3.5rem; }
.close-button { background:none; color:var(--white); cursor:pointer; font-size:2rem; }
.form-grid { display:grid; grid-template-columns:1fr 1fr; gap:1rem; }
.modal-form label { display:grid; gap:.45rem; margin-bottom:1rem; color:#c4c4bf; font-size:.68rem; font-weight:800; letter-spacing:.06em; text-transform:uppercase; }
.modal-form label small { color:#6f6f6b; font-size:.6rem; font-weight:500; letter-spacing:0; text-transform:none; }
.modal-actions { display:flex; justify-content:flex-end; gap:.7rem; margin-top:1rem; }
.receipt-modal img { width:100%; max-height:65vh; object-fit:contain; margin-bottom:1rem; background:#080808; }
.feedback-dialog { width:min(460px,calc(100% - 2rem)); overflow:hidden; border:0; background:transparent; box-shadow:none; }
.feedback-dialog::backdrop { background:rgba(0,0,0,.74); backdrop-filter:blur(9px); animation:feedback-backdrop .25s ease-out; }
.feedback-card { position:relative; overflow:hidden; padding:2.4rem; border:1px solid #3a3a38; background:linear-gradient(135deg,#191919 0%,#0b0b0b 76%); box-shadow:16px 16px 0 var(--pink); text-align:center; animation:feedback-in .34s cubic-bezier(.2,.9,.25,1.1); }
.feedback-card::before { content:""; position:absolute; inset:0 0 auto; height:5px; background:linear-gradient(90deg,var(--pink),var(--yellow)); }
.feedback-symbol { width:62px; height:62px; display:grid; place-items:center; margin:0 auto 1.35rem; border:1px solid rgba(239,255,0,.45); border-radius:50%; background:rgba(239,255,0,.1); color:var(--yellow); font:2.4rem/1 var(--heading); }
.feedback-dialog[data-tone="danger"] .feedback-symbol { border-color:rgba(255,95,117,.45); background:rgba(255,95,117,.1); color:var(--danger); }
.feedback-dialog[data-tone="danger"] .feedback-card::before { background:linear-gradient(90deg,var(--danger),var(--pink)); }
.feedback-dialog .kicker { margin-bottom:.65rem; }
.feedback-dialog h2 { margin:0; font:3.5rem/.9 var(--heading); text-transform:uppercase; }
.feedback-dialog #feedback-message { margin:1rem auto 1.8rem; color:#c7c7c0; font-size:.86rem; line-height:1.7; }
.feedback-actions { display:flex; justify-content:center; gap:.7rem; }
.feedback-actions .button { min-width:140px; }
@keyframes feedback-in { from { opacity:0; transform:translateY(18px) scale(.94); } to { opacity:1; transform:none; } }
@keyframes feedback-backdrop { from { opacity:0; } to { opacity:1; } }
@media (max-width:1100px) { .metric-grid { grid-template-columns:1fr 1fr; }.dashboard-grid { grid-template-columns:1fr; } }
@media (max-width:780px) {
  .admin-app { grid-template-columns:1fr; }.sidebar { position:fixed; inset:0 auto 0 0; z-index:50; width:min(280px,85vw); transform:translateX(-102%); transition:transform .25s; box-shadow:20px 0 50px rgba(0,0,0,.5); }.sidebar.open { transform:none; }
  .menu-button { display:block; }.topbar { position:sticky; top:0; z-index:40; }.user-chip > div { display:none; }
  .page-heading { align-items:start; flex-direction:column; }.page-heading .button { width:100%; }.metric-grid,.metric-grid.compact,.dashboard-grid,.alert-columns { grid-template-columns:1fr; }
  .metric { min-height:145px; }.toolbar-controls { flex-direction:column; }.toolbar-controls select,.toolbar-controls .button { width:100%; }.form-grid { grid-template-columns:1fr; }.modal-actions { flex-direction:column-reverse; }.modal-actions .button { width:100%; }.feedback-card { padding:2rem 1.25rem; box-shadow:10px 10px 0 var(--pink); }.feedback-actions { flex-direction:column-reverse; }.feedback-actions .button { width:100%; }
}