@import url('https://fonts.googleapis.com/css2?family=Archivo+Black&family=Inter:wght@400;500;600;700;800&family=Caveat:wght@600;700&display=swap');

:root{
  --navy:#16215C;
  --navy-deep:#0E1740;
  --magenta:#E31C79;
  --magenta-dark:#B8135F;
  --purple:#6B2FB3;
  --white:#FFFFFF;
  --bg:#F5F5FA;
  --card:#FFFFFF;
  --gray:#6B7089;
  --gray-light:#A6AAC0;
  --line:#E7E7F1;
  --success:#1E9E5A;
  --success-bg:#E4F7EC;
  --warning:#E8A33D;
  --warning-bg:#FDF1DE;
  --danger:#D64545;
  --danger-bg:#FBE7E7;
  --pending:#8A8FA3;
  --pending-bg:#EDEDF4;
  --radius:16px;
  --radius-sm:10px;
  --shadow:0 6px 20px rgba(22,33,92,0.08);
  --safe-bottom:env(safe-area-inset-bottom,0px);
  --safe-top:env(safe-area-inset-top,0px);
}

*{box-sizing:border-box; -webkit-tap-highlight-color:transparent;}
html,body{margin:0; padding:0; height:100%;}
body{
  font-family:'Inter',system-ui,sans-serif;
  background:var(--bg);
  color:var(--navy);
  overscroll-behavior-y:none;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3{font-family:'Archivo Black',system-ui,sans-serif; font-weight:400; letter-spacing:-0.01em; margin:0;}
.script{font-family:'Caveat',cursive; font-weight:700;}
button{font-family:inherit; cursor:pointer;}
input,select,textarea{font-family:inherit;}
a{color:inherit;}
::selection{background:var(--magenta); color:white;}

.hidden{display:none !important;}

/* ---------- Layout shell ---------- */
#app{max-width:560px; margin:0 auto; min-height:100vh; display:flex; flex-direction:column; background:var(--bg); position:relative;}

.topbar{
  padding:calc(18px + var(--safe-top)) 20px 22px;
  background:linear-gradient(135deg, var(--magenta) 0%, var(--purple) 55%, var(--navy) 100%);
  color:white;
  position:relative;
  overflow:hidden;
  flex-shrink:0;
}
.topbar::after{
  content:"45789";
  position:absolute; right:-10px; top:-18px;
  font-family:'Archivo Black'; font-size:88px; color:rgba(255,255,255,0.08);
  letter-spacing:-2px; pointer-events:none;
}
.topbar-row{display:flex; align-items:center; justify-content:space-between; position:relative; z-index:1;}
.topbar .eyebrow{font-size:11px; letter-spacing:0.14em; text-transform:uppercase; opacity:0.85; font-weight:700;}
.topbar h1{font-size:22px; line-height:1.15; margin-top:4px;}
.topbar .tagline{font-family:'Caveat'; font-weight:700; font-size:19px; opacity:0.95; margin-top:2px;}
.topbar-actions{display:flex; gap:10px;}
.icon-btn{
  width:38px; height:38px; border-radius:50%; border:none;
  background:rgba(255,255,255,0.16); color:white; display:flex; align-items:center; justify-content:center;
  font-size:16px; backdrop-filter:blur(4px);
}
.icon-btn:active{background:rgba(255,255,255,0.3);}

.ribbon{height:5px; background:linear-gradient(90deg,var(--magenta),var(--purple)); border-radius:0 0 6px 6px; width:64px; margin-top:14px; position:relative; z-index:1;}

main.view{flex:1; padding:18px 16px calc(100px + var(--safe-bottom)); overflow-y:auto;}

/* ---------- Bottom nav ---------- */
.bottom-nav{
  position:fixed; left:0; right:0; bottom:0; max-width:560px; margin:0 auto;
  background:white; border-top:1px solid var(--line);
  display:flex; padding-bottom:var(--safe-bottom);
  box-shadow:0 -6px 20px rgba(22,33,92,0.06);
  z-index:40;
}
.nav-btn{
  flex:1; border:none; background:none; padding:10px 2px 8px; display:flex; flex-direction:column; align-items:center; gap:3px;
  color:var(--gray-light); font-size:10.5px; font-weight:600;
}
.nav-btn .ico{font-size:19px; line-height:1;}
.nav-btn.active{color:var(--magenta);}
.nav-btn.active .ico{transform:translateY(-1px);}

/* ---------- Cards ---------- */
.card{background:var(--card); border-radius:var(--radius); padding:16px; box-shadow:var(--shadow); margin-bottom:12px; border:1px solid var(--line);}
.section-title{display:flex; align-items:baseline; justify-content:space-between; margin:6px 2px 12px;}
.section-title h2{font-size:15px; letter-spacing:0.01em;}
.section-title .count{font-size:12px; color:var(--gray); font-weight:600;}

.divider-swash{height:4px; width:46px; background:var(--magenta); border-radius:4px; margin:2px 0 14px;}

/* ---------- Buttons ---------- */
.btn{border:none; border-radius:12px; padding:13px 18px; font-weight:700; font-size:14.5px; display:inline-flex; align-items:center; justify-content:center; gap:8px;}
.btn-primary{background:var(--navy); color:white;}
.btn-primary:active{background:var(--navy-deep);}
.btn-pink{background:var(--magenta); color:white;}
.btn-pink:active{background:var(--magenta-dark);}
.btn-ghost{background:var(--pending-bg); color:var(--navy);}
.btn-outline{background:transparent; border:1.5px solid var(--line); color:var(--navy);}
.btn-block{width:100%;}
.btn-danger-text{background:none; border:none; color:var(--danger); font-weight:700; padding:8px;}

.fab{
  position:fixed; right:18px; bottom:calc(86px + var(--safe-bottom)); max-width:560px;
  background:var(--magenta); color:white; border:none; border-radius:30px;
  padding:14px 20px; font-weight:800; font-size:14px; box-shadow:0 10px 24px rgba(227,28,121,0.4);
  display:flex; align-items:center; gap:8px; z-index:35;
}
.fab:active{background:var(--magenta-dark);}

/* ---------- Forms ---------- */
.field{margin-bottom:14px;}
.field label{display:block; font-size:12.5px; font-weight:700; color:var(--gray); margin-bottom:6px; text-transform:uppercase; letter-spacing:0.03em;}
.field input, .field select, .field textarea{
  width:100%; border:1.5px solid var(--line); border-radius:11px; padding:12px 13px; font-size:15px; background:#FBFBFE; color:var(--navy);
}
.field input:focus, .field select:focus, .field textarea:focus{outline:none; border-color:var(--magenta); background:white;}
.field textarea{resize:vertical; min-height:74px;}
.field-row{display:flex; gap:10px;}
.field-row .field{flex:1;}
.hint{font-size:11.5px; color:var(--gray-light); margin-top:5px;}

.chip-group{display:flex; flex-wrap:wrap; gap:8px;}
.chip{
  border:1.5px solid var(--line); background:white; border-radius:20px; padding:8px 14px; font-size:13px; font-weight:600; color:var(--gray);
}
.chip.selected{background:var(--navy); border-color:var(--navy); color:white;}
.chip.pink.selected{background:var(--magenta); border-color:var(--magenta);}

/* ---------- List items ---------- */
.list-item{background:white; border-radius:var(--radius-sm); padding:13px 14px; margin-bottom:10px; border:1px solid var(--line); box-shadow:0 2px 8px rgba(22,33,92,0.04);}
.li-top{display:flex; justify-content:space-between; align-items:flex-start; gap:10px;}
.li-title{font-weight:700; font-size:15px; color:var(--navy);}
.li-sub{font-size:12.5px; color:var(--gray); margin-top:2px;}
.li-meta{display:flex; gap:10px; flex-wrap:wrap; margin-top:8px; font-size:12px; color:var(--gray);}
.li-meta span{display:flex; align-items:center; gap:4px;}

.badge{display:inline-flex; align-items:center; gap:5px; font-size:11px; font-weight:800; padding:4px 10px; border-radius:20px; text-transform:uppercase; letter-spacing:0.02em; white-space:nowrap;}
.badge-pending{background:var(--pending-bg); color:var(--pending);}
.badge-progress{background:var(--warning-bg); color:var(--warning);}
.badge-resolved{background:var(--success-bg); color:var(--success);}
.badge-scheduled{background:#E7ECFB; color:#3555C9;}
.badge-done{background:var(--success-bg); color:var(--success);}
.badge-canceled{background:var(--danger-bg); color:var(--danger);}

.social-icons{display:flex; gap:8px; margin-top:10px;}
.social-icon{
  width:34px; height:34px; border-radius:50%; display:flex; align-items:center; justify-content:center; color:white; font-size:15px; text-decoration:none; font-weight:700;
}
.si-instagram{background:linear-gradient(135deg,#f58529,#dd2a7b,#8134af);}
.si-tiktok{background:#111;}
.si-facebook{background:#1877F2;}
.si-whatsapp{background:#25D366;}
.si-other{background:var(--gray);}

.empty-state{text-align:center; padding:50px 20px; color:var(--gray);}
.empty-state .ico{font-size:38px; margin-bottom:10px;}
.empty-state h3{font-size:16px; color:var(--navy); margin-bottom:6px;}
.empty-state p{font-size:13.5px; line-height:1.5; margin:0;}

/* ---------- Tabs (filters) ---------- */
.filter-tabs{display:flex; gap:8px; overflow-x:auto; padding-bottom:2px; margin-bottom:14px;}
.filter-tabs::-webkit-scrollbar{display:none;}
.filter-tab{flex-shrink:0; border:none; background:white; border:1.5px solid var(--line); padding:8px 15px; border-radius:20px; font-size:12.5px; font-weight:700; color:var(--gray);}
.filter-tab.active{background:var(--navy); border-color:var(--navy); color:white;}

.search-box{position:relative; margin-bottom:14px;}
.search-box input{width:100%; padding:12px 14px 12px 38px; border-radius:12px; border:1.5px solid var(--line); background:white; font-size:14px;}
.search-box .si{position:absolute; left:13px; top:50%; transform:translateY(-50%); color:var(--gray-light);}

/* ---------- Modal / Sheet ---------- */
.overlay{position:fixed; inset:0; background:rgba(14,23,64,0.5); z-index:50; display:flex; align-items:flex-end;}
.sheet{
  background:var(--bg); width:100%; max-width:560px; margin:0 auto; border-radius:22px 22px 0 0;
  max-height:92vh; overflow-y:auto; padding:18px 18px calc(28px + var(--safe-bottom));
  animation:slideUp .22s ease;
}
@keyframes slideUp{from{transform:translateY(30px); opacity:0;} to{transform:translateY(0); opacity:1;}}
.sheet-handle{width:38px; height:4px; background:var(--line); border-radius:4px; margin:0 auto 14px;}
.sheet-header{display:flex; justify-content:space-between; align-items:center; margin-bottom:16px;}
.sheet-header h2{font-size:17px;}
.sheet-close{background:var(--pending-bg); border:none; width:32px; height:32px; border-radius:50%; font-size:15px; color:var(--navy);}
.sheet-actions{display:flex; gap:10px; margin-top:8px;}
.sheet-actions .btn{flex:1;}

.note-item{background:white; border:1px solid var(--line); border-radius:11px; padding:11px 13px; margin-bottom:8px;}
.note-item .note-date{font-size:11px; color:var(--gray-light); font-weight:700; margin-bottom:4px;}
.note-tag{font-size:10px; font-weight:800; padding:2px 8px; border-radius:10px; text-transform:uppercase; margin-right:6px;}
.tag-forte{background:var(--success-bg); color:var(--success);}
.tag-fraco{background:var(--danger-bg); color:var(--danger);}
.tag-oportunidade{background:#E7ECFB; color:#3555C9;}
.tag-ameaca{background:var(--warning-bg); color:var(--warning);}
.tag-geral{background:var(--pending-bg); color:var(--gray);}

/* ---------- Auth screens ---------- */
.auth-screen{
  min-height:100vh; display:flex; flex-direction:column; justify-content:center; padding:32px 26px calc(32px + var(--safe-bottom));
  background:linear-gradient(160deg, var(--magenta) 0%, var(--purple) 45%, var(--navy) 100%);
  color:white;
}
.auth-logo{text-align:center; margin-bottom:30px;}
.auth-logo .badge-number{
  display:inline-block; background:#EC2A8C; border:2px solid white; color:white; font-family:'Archivo Black';
  font-size:26px; padding:6px 18px; border-radius:14px; margin-bottom:14px; letter-spacing:1px;
}
.auth-logo h1{font-size:26px; color:white;}
.auth-logo .script{font-size:22px; color:#FFD9EC; margin-top:2px;}
.auth-card{background:white; border-radius:20px; padding:24px 20px; color:var(--navy); box-shadow:0 20px 50px rgba(0,0,0,0.25);}
.auth-card h2{font-size:18px; margin-bottom:4px;}
.auth-card .sub{font-size:13px; color:var(--gray); margin-bottom:18px;}
.auth-switch{text-align:center; margin-top:16px; font-size:13.5px; color:rgba(255,255,255,0.85);}
.auth-switch button{background:none; border:none; color:white; font-weight:800; text-decoration:underline; padding:0;}
.error-msg{background:var(--danger-bg); color:var(--danger); font-size:13px; font-weight:600; padding:10px 12px; border-radius:10px; margin-bottom:14px;}
.strength-bar{height:5px; border-radius:4px; background:var(--line); margin-top:8px; overflow:hidden;}
.strength-fill{height:100%; width:0%; transition:width .2s, background .2s;}

/* ---------- Toast ---------- */
.toast{position:fixed; left:50%; bottom:calc(96px + var(--safe-bottom)); transform:translateX(-50%); background:var(--navy-deep); color:white; padding:12px 20px; border-radius:30px; font-size:13.5px; font-weight:600; z-index:80; box-shadow:0 8px 20px rgba(0,0,0,0.25); max-width:90%; text-align:center;}

/* ---------- Dashboard ---------- */
.stat-grid{display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-bottom:16px;}
.stat-card{background:white; border-radius:14px; padding:14px; border:1px solid var(--line);}
.stat-card .n{font-family:'Archivo Black'; font-size:24px; color:var(--navy);}
.stat-card .l{font-size:11.5px; color:var(--gray); font-weight:600; margin-top:2px;}
.stat-card.accent{background:linear-gradient(135deg,var(--magenta),var(--purple)); border:none;}
.stat-card.accent .n, .stat-card.accent .l{color:white;}

.mini-agenda-item{display:flex; gap:12px; align-items:center; background:white; border:1px solid var(--line); border-radius:12px; padding:11px 13px; margin-bottom:9px;}
.mini-date{background:var(--pending-bg); border-radius:9px; padding:7px 9px; text-align:center; min-width:44px;}
.mini-date .d{font-family:'Archivo Black'; font-size:16px; color:var(--navy); line-height:1;}
.mini-date .m{font-size:9px; text-transform:uppercase; color:var(--gray); font-weight:700;}

/* ---------- Settings ---------- */
.settings-item{display:flex; justify-content:space-between; align-items:center; padding:14px 4px; border-bottom:1px solid var(--line);}
.settings-item:last-child{border-bottom:none;}
.settings-item .label{font-size:14.5px; font-weight:600;}
.settings-item .desc{font-size:12px; color:var(--gray); margin-top:2px;}
.switch{width:44px; height:26px; border-radius:20px; background:var(--line); position:relative; border:none; flex-shrink:0;}
.switch.on{background:var(--magenta);}
.switch::after{content:""; width:20px; height:20px; background:white; border-radius:50%; position:absolute; top:3px; left:3px; transition:left .15s;}
.switch.on::after{left:21px;}

@media (max-width:360px){
  .stat-card .n{font-size:20px;}
}