/* ── Design tokens ───────────────────────────────────────────────────────── */
:root {
    --primary:        #fd2364;
    --primary-hover:  #df1b55;
    --primary-rgb:    124,58,237;
    --accent:         #ff7a9e;
    --teal:           #fd2364;
    --bg:             #050505;
    --bg-card:        #121214;
    --bg-sidebar:     #0a0a0b;
    --bg-secondary:   #161618;
    --border:         rgba(255,255,255,0.08);
    --border-subtle:  #18181b;
    --muted:          #52525b;
    --muted-fg:       #8a8a9a;
    --text:           #fafafa;
    --text-dim:       rgba(250,250,250,0.7);
}

/* ── Base ────────────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
    background-color: var(--bg);
    color: var(--text);
    font-family: 'Inter', system-ui, -apple-system, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* ── Scrollbar ────────────────────────────────────────────────────────────── */
::-webkit-scrollbar            { width: 4px; height: 4px; }
::-webkit-scrollbar-track      { background: transparent; }
::-webkit-scrollbar-thumb      { background: #2a2a30; border-radius: 10px; }
::-webkit-scrollbar-thumb:hover{ background: #3a3a44; }

/* ── Typography utilities ────────────────────────────────────────────────── */
.line-clamp-2 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    line-clamp: 2;
    overflow: hidden;
}

.text-gradient {
    background: linear-gradient(135deg, var(--primary), #ff7a9e, #df1b55);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* ── Inputs ──────────────────────────────────────────────────────────────── */
input, select, textarea {
    background-color: var(--bg);
    color: var(--text);
}
input::placeholder, textarea::placeholder { color: var(--muted-fg); }
select option { background: var(--bg-card); }
input[type="range"] { cursor: pointer; accent-color: var(--primary); }

/* ── Button states ───────────────────────────────────────────────────────── */
button:disabled, button[data-loading] { opacity: 0.55; cursor: not-allowed; }

/* ── Animated background ─────────────────────────────────────────────────── */
@keyframes blobFloat1 {
    0%,100% { transform: translate(0,0) scale(1); }
    25%      { transform: translate(-30px,40px) scale(1.1); }
    50%      { transform: translate(20px,-20px) scale(0.95); }
    75%      { transform: translate(-40px,-30px) scale(1.05); }
}
@keyframes blobFloat2 {
    0%,100% { transform: translate(0,0) scale(1); }
    33%     { transform: translate(40px,-30px) scale(1.08); }
    66%     { transform: translate(-20px,40px) scale(0.92); }
}
@keyframes blobFloat3 {
    0%,100% { transform: translate(-50%,0) scale(1); }
    50%     { transform: translate(-50%,50px) scale(1.15); }
}
@keyframes orbFloat1 {
    0%,100% { transform: translate(0,0); }
    25%     { transform: translate(20px,-30px); }
    50%     { transform: translate(-15px,-50px); }
    75%     { transform: translate(25px,-20px); }
}
@keyframes orbFloat2 {
    0%,100% { transform: translate(0,0); }
    33%     { transform: translate(-25px,20px); }
    66%     { transform: translate(15px,-25px); }
}
@keyframes orbFloat3 {
    0%,100% { transform: translate(0,0); }
    50%     { transform: translate(30px,-40px); }
}
@keyframes orbFloat4 {
    0%,100% { transform: translate(0,0) scale(1); }
    25%     { transform: translate(-20px,-15px) scale(1.2); }
    50%     { transform: translate(10px,-30px) scale(0.8); }
    75%     { transform: translate(-15px,10px) scale(1.1); }
}
@keyframes waveMove1 {
    0%   { transform: translateX(0); }
    100% { transform: translateX(-500px); }
}
@keyframes waveMove2 {
    0%   { transform: translateX(-250px); }
    100% { transform: translateX(-750px); }
}
@keyframes shootingStar {
    0%   { transform: translateX(0) translateY(0); opacity: 1; }
    70%  { opacity: 1; }
    100% { transform: translateX(calc(100vw + 200px)) translateY(100px); opacity: 0; }
}
@keyframes pulseRing {
    0%   { box-shadow: 0 0 0 0 rgba(220,38,38,0.5); }
    70%  { box-shadow: 0 0 0 8px rgba(220,38,38,0); }
    100% { box-shadow: 0 0 0 0 rgba(220,38,38,0); }
}
@keyframes fadeInUp {
    from { opacity: 0; transform: translateY(12px); }
    to   { opacity: 1; transform: translateY(0); }
}

.animate-fade-in-up { animation: fadeInUp 0.35s ease forwards; }
.animate-pulse-ring  { animation: pulseRing 1.5s infinite; }

/* ── Sidebar ─────────────────────────────────────────────────────────────── */
#sidebar { transition: transform 0.3s ease; }
@media (max-width: 767px) {
    #sidebar { transform: translateX(-100%); }
    #sidebar.open { transform: translateX(0); }
}

/* ── Score badge gradient ────────────────────────────────────────────────── */
.score-badge {
    background: linear-gradient(135deg, var(--primary), var(--accent));
}
.score-badge-high { background: linear-gradient(135deg, #059669, #10b981); }

/* ── Status badges ───────────────────────────────────────────────────────── */
.badge-escalando   { background: rgba(16,185,129,.15); color: #34d399; border: 1px solid rgba(16,185,129,.3); }
.badge-saturado    { background: rgba(239,68,68,.15);  color: #f87171; border: 1px solid rgba(239,68,68,.3); }
.badge-estavel     { background: rgba(250,204,21,.12); color: #fbbf24; border: 1px solid rgba(250,204,21,.3); }
.badge-pouco       { background: rgba(6,182,212,.12);  color: #22d3ee; border: 1px solid rgba(6,182,212,.3); }

/* ── Card hover glow ─────────────────────────────────────────────────────── */
.card-hover:hover { border-color: rgba(var(--primary-rgb),.4) !important; box-shadow: 0 0 0 1px rgba(var(--primary-rgb),.15); }

/* ── Usage progress bar ──────────────────────────────────────────────────── */
.usage-bar { background: rgba(var(--primary-rgb), .8); }

/* ── Overview metric card ───────────────────────────────────────────── */
.metric-card {
    padding: 1.5rem;
    border-radius: 0.875rem;
    background: var(--bg-card);
    border: 1px solid var(--border);
    transition: border-color 0.25s, box-shadow 0.25s;
}
.metric-card .text-2xl {
    font-size: 1.75rem;
    line-height: 1.2;
}
.metric-card .w-10 {
    width: 2.75rem;
    height: 2.75rem;
}
.metric-card .w-5 {
    width: 1.375rem;
    height: 1.375rem;
}
.metric-card:hover {
    border-color: rgba(var(--primary-rgb), 0.35);
    box-shadow: 0 0 0 1px rgba(var(--primary-rgb), 0.12);
}

/* ── Premium card ───────────────────────────────────────────────────── */
.premium-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
}

/* ── Overview gradient button ───────────────────────────────────────── */
.overview-btn-gradient {
    background: linear-gradient(135deg, var(--primary), var(--accent));
}
.overview-btn-gradient:hover {
    filter: brightness(1.1);
}

/* ── Overview period / chart toggle buttons ─────────────────────────── */
.ov-period-btn {
    padding: 0.5rem 1rem;
    border-radius: 0.5rem;
    font-size: 0.875rem;
    font-weight: 500;
    transition: all 0.2s;
    background: var(--bg-secondary);
    color: rgba(255,255,255,0.5);
    cursor: pointer;
    border: none;
}
.ov-period-btn:hover {
    color: #fff;
    background: var(--bg-card);
}
.ov-period-btn.ov-period-active {
    background: var(--primary);
    color: #fff;
}
.ov-chart-btn {
    padding: 0.25rem 0.5rem;
    border-radius: 0.5rem;
    font-size: 0.75rem;
    font-weight: 500;
    transition: all 0.2s;
    background: var(--bg-secondary);
    color: rgba(255,255,255,0.5);
    cursor: pointer;
    border: none;
}
@media (min-width: 768px) {
    .ov-chart-btn { padding: 0.375rem 0.75rem; font-size: 0.875rem; }
}
.ov-chart-btn:hover {
    color: #fff;
}
.ov-chart-btn.ov-chart-active {
    background: var(--primary);
    color: #fff;
}

/* Autofill do navegador (login/email) - mantem fundo escuro e texto branco */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
    -webkit-box-shadow: 0 0 0 1000px #121214 inset;
    -webkit-text-fill-color: #fafafa;
    caret-color: #fafafa;
    transition: background-color 9999999s ease-in-out 0s;
}