*, *::before, *::after {
margin: 0; padding: 0; box-sizing: border-box;
font-family: 'Poppins', sans-serif;
}
body {
min-height: 100vh;
background: #f4f7f6;
color: #333;
-webkit-font-smoothing: antialiased;
}
/* ===== TOAST ===== */
#toastBox {
position: fixed; top: 16px; right: 16px; z-index: 9999;
display: flex; flex-direction: column; gap: 10px;
max-width: 340px; pointer-events: none;
}
.toast-item {
pointer-events: auto;
padding: 12px 16px; border-radius: 10px;
font-size: 13px; font-weight: 500; color: #fff;
box-shadow: 0 6px 24px rgba(0,0,0,0.15);
animation: toastIn 0.4s cubic-bezier(.22,1,.36,1);
display: flex; align-items: center; gap: 8px;
}
.toast-item.error { background: #e53935; }
.toast-item.success { background: #009688; }
.toast-item.info { background: #455a64; }
.toast-out { animation: toastOut 0.35s ease forwards; }
@keyframes toastIn { from { transform: translateX(120%); opacity:0; } to { transform: translateX(0); opacity:1; } }
@keyframes toastOut { from { transform: translateX(0); opacity:1; } to { transform: translateX(120%); opacity:0; } }
/* ===== LAYOUT ===== */
.app-wrap {
max-width: 580px; margin: 0 auto;
padding: 32px 16px 40px;
position: relative;
}
/* ===== HEADER ===== */
.brand { display: flex; align-items: center; gap: 12px; justify-content: center; margin-bottom: 6px; }
.brand-icon {
width: 46px; height: 46px; border-radius: 14px;
background: linear-gradient(135deg, #009688, #00796B);
display: flex; align-items: center; justify-content: center;
box-shadow: 0 4px 16px rgba(0,150,136,0.3);
}
.brand-icon span { color: #fff; font-weight: 900; font-size: 17px; letter-spacing: -0.5px; }
.brand-text h1 { font-size: 20px; font-weight: 700; color: #222; line-height: 1.1; }
.brand-text p { font-size: 10px; color: #aaa; font-weight: 500; letter-spacing: 0.5px; }
.subtitle { text-align: center; font-size: 13px; color: #888; margin-bottom: 24px; }
/* ===== CARD ===== */
.card {
background: #fff; border-radius: 18px; overflow: hidden;
box-shadow: 0 2px 32px rgba(0,0,0,0.05), 0 0 0 1px rgba(0,0,0,0.03);
}
/* ===== TABS ===== */
.tabs { display: flex; border-bottom: 1px solid #f0f0f0; }
.tab-btn {
flex: 1; padding: 15px 10px; border: none; background: none;
font-size: 13px; font-weight: 600; cursor: pointer;
color: #bbb; position: relative; transition: color 0.3s;
}
.tab-btn::after {
content: ''; position: absolute; bottom: -1px; left: 50%; right: 50%;
height: 3px; background: #009688; border-radius: 3px 3px 0 0;
transition: left 0.3s, right 0.3s;
}
.tab-btn.active { color: #009688; }
.tab-btn.active::after { left: 14px; right: 14px; }
.tab-btn:focus-visible { outline: 2px solid #4DB6AC; outline-offset: -2px; }
/* ===== CORPO DO CARD ===== */
.card-body { padding: 24px; }
/* ===== UPLOAD ===== */
.upload-zone {
border: 2.5px dashed #b2dfdb; border-radius: 14px;
padding: 36px 20px; text-align: center;
cursor: pointer; transition: all 0.3s;
}
.upload-zone:hover, .upload-zone
