@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Playfair+Display:wght@600;700&display=swap');

:root { --bg: #0b0b0d; --surface: #151519; --surface-2: #1d1d22; --line: #302f36; --muted: #a3a1aa; --text: #f7f5f6; --red: #e11d48; --red-bright: #fb2c56; }
* { -webkit-tap-highlight-color: transparent; }
body { background: radial-gradient(circle at 50% -15%, #45101c 0, #171015 32%, var(--bg) 68%) !important; font-family: 'DM Sans', sans-serif !important; }
body > div.w-full.max-w-md { background: linear-gradient(160deg, #171116 0%, var(--bg) 48%) !important; border-color: rgba(255,255,255,.09) !important; box-shadow: 0 28px 80px rgba(0,0,0,.58), 0 0 0 1px rgba(225,29,72,.08) !important; }
header { background: rgba(18, 16, 19, .82) !important; border-color: rgba(255,255,255,.08) !important; }
header::before { content: 'FLASHBACK'; display: block; position: absolute; top: 7px; left: 50%; transform: translateX(-50%); color: #ffffff18; letter-spacing: .23em; font: 700 8px 'DM Sans'; pointer-events: none; }
main { scrollbar-color: #5e1c2d transparent; scrollbar-width: thin; }
input, textarea, select { background: #111115 !important; border-color: #3a363b !important; color: var(--text) !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.025); }
input::placeholder, textarea::placeholder { color: #77737c !important; }
input:focus, textarea:focus, select:focus { border-color: var(--red-bright) !important; box-shadow: 0 0 0 3px rgba(225,29,72,.14) !important; }
button, a { transition: transform .18s ease, border-color .18s ease, background-color .18s ease, color .18s ease, box-shadow .18s ease !important; }
button:active, a:active { transform: scale(.97); }
.bg-accent { background: linear-gradient(135deg, #e11d48, #be123c) !important; box-shadow: 0 7px 18px rgba(190,18,60,.25); }
.hover\:bg-rose-600:hover { background: #be123c !important; }
.text-accent { color: #fb4b6d !important; }
.border-accent { border-color: #fb4b6d !important; }
.bg-cardBg { background: linear-gradient(145deg, rgba(34,31,36,.98), rgba(22,21,25,.98)) !important; }
.bg-darkBg { background-color: var(--bg) !important; }
.bg-slate-900 { background-color: #111115 !important; }
.bg-slate-800 { background-color: #242128 !important; }
.border-slate-800, .border-slate-700 { border-color: rgba(255,255,255,.1) !important; }
.text-slate-100 { color: #f8f6f7 !important; }
.text-slate-200 { color: #e5e1e4 !important; }
.text-slate-300 { color: #c9c3c8 !important; }
.text-slate-400, .text-slate-500 { color: #9a939b !important; }
/* Cards created dynamically and the principal panels. */
#timeline > div, #gridBlocos > div, #gridTickets > div, main > .bg-cardBg { border-color: rgba(255,255,255,.09) !important; box-shadow: 0 10px 24px rgba(0,0,0,.18) !important; }
#timeline > div { position: relative; overflow: hidden; }
#timeline > div::after { content: ''; position: absolute; left: 0; top: 18px; bottom: 18px; width: 3px; border-radius: 3px; background: linear-gradient(#fb4b6d, transparent); opacity: .8; }
#timeline > div:hover, #gridBlocos > div:hover, #gridTickets > div:hover { border-color: rgba(251,75,109,.42) !important; transform: translateY(-1px); }
footer { background: rgba(13,12,15,.91) !important; border-color: rgba(255,255,255,.1) !important; }
footer a { opacity: .78; }
footer a:hover, footer .text-accent { opacity: 1; }
[id^='modal'] > div:not(.hidden), #cameraModal { box-shadow: 0 25px 80px rgba(0,0,0,.7); }
#modalPerfil > div, #modalNovoBloco > div, #modalTicket > div, #modalRecado > div { background: linear-gradient(145deg, #282229, #18161a) !important; border-color: rgba(251,75,109,.22) !important; }
#toast { background: #2b1720 !important; border-color: rgba(251,75,109,.45) !important; }
.notification-enable { position: fixed; right: 16px; bottom: 88px; z-index: 45; border: 1px solid rgba(251,75,109,.65); border-radius: 999px; padding: 10px 14px; color: #fff; background: linear-gradient(135deg, #e11d48, #9f1239); font: 600 12px 'DM Sans', sans-serif; box-shadow: 0 8px 24px rgba(0,0,0,.35); }
#textareaConteudo { background-image: linear-gradient(rgba(255,255,255,.026) 1px, transparent 1px) !important; background-size: 100% 29px !important; line-height: 29px !important; }
@media (min-width: 640px) { body > div.w-full.max-w-md { height: min(90vh, 860px) !important; } }