:root{
    --forest:#75C550;
    --forest-deep:#4E9B33;
    --leaf:#75C550;
    --leaf-soft:#E7F5DE;
    --clay:#E88A4F;
    --cream:#FBF8F1;
    --paper:#FFFFFF;
    --ink:#1B241E;
    --ink-soft:#5B6B5F;
    --line:#D8E4DA;
    --radius-lg:28px;
    --radius-md:16px;
    --radius-sm:10px;
    --shadow:0 20px 40px -20px rgba(78,155,51,0.35);
  }
  *{box-sizing:border-box;}
  html,body{margin:0;padding:0;}
  body{
    font-family:'Work Sans', sans-serif;
    background:var(--cream);
    color:var(--ink);
    min-height:100vh;
  }
  ::selection{background:var(--leaf);color:var(--forest-deep);}

  .site-nav{
    background:var(--forest);
    color:#fff;
    padding:14px 28px;
    display:flex;
    align-items:center;
    gap:24px;
    flex-wrap:wrap;
  }
  .site-nav .wordmark{
    display:flex;
    align-items:center;
    gap:9px;
    font-family:'Fredoka', sans-serif;
    font-weight:600;
    font-size:18px;
    color:#fff;
    text-decoration:none;
  }
  .site-nav .wordmark img{width:28px;height:28px; border-radius:6px; background:#fff; padding:2px;}
  .site-nav .nav-links{
    display:flex;
    gap:20px;
    font-size:13.5px;
    font-weight:500;
    margin-left:8px;
  }
  .site-nav .nav-links a{color:rgba(255,255,255,.92); text-decoration:none;}
  .site-nav .nav-links a:hover, .site-nav .nav-links a.current{color:#fff; text-decoration:underline;}
  .site-nav .nav-right{
    margin-left:auto;
    display:flex;
    align-items:center;
    gap:16px;
    font-size:13px;
  }
  .site-nav .nav-right span{opacity:.9;}
  .site-nav form.logout-form{display:inline;}
  .site-nav .nav-right button.logout-link{
    background:none; border:none; color:#fff; font-size:13px; font-weight:600;
    cursor:pointer; text-decoration:underline; font-family:'Work Sans', sans-serif; padding:0;
  }
  .site-nav .nav-right a.btn-nav{
    background:#fff; color:var(--forest-deep); padding:7px 16px; border-radius:999px;
    font-weight:600; text-decoration:none; font-size:12.5px;
  }

  .page-shell{
    max-width:1180px;
    margin:0 auto;
    padding:28px 20px 60px;
  }
  .flash{
    max-width:1180px; margin:0 auto 16px; padding:0 20px;
  }
  .flash p{
    background:#FDEEEC; border:1px solid #F3C6C0; color:#A43A2C;
    border-radius:12px; padding:10px 16px; font-size:13px; margin:0;
  }

  .page-frame{
    background:var(--paper);
    border-radius:var(--radius-lg);
    border:1px solid var(--line);
    box-shadow:var(--shadow);
    overflow:hidden;
    min-height:400px;
    position:relative;
  }
  @keyframes fade{from{opacity:0; transform:translateY(6px);} to{opacity:1; transform:translateY(0);}}

  .pill-input{
    width:100%;
    border:1.5px solid var(--line);
    background:var(--cream);
    border-radius:999px;
    padding:12px 18px;
    font-family:'Work Sans', sans-serif;
    font-size:14px;
    color:var(--ink);
    outline:none;
    transition:border-color .2s ease, background .2s ease;
  }
  .pill-input:focus{border-color:var(--leaf); background:#fff;}
  .pill-input::placeholder{color:#9AA79D;}
  label.field-label{
    display:block;
    font-family:'Fredoka', sans-serif;
    font-weight:500;
    font-size:13.5px;
    color:var(--forest-deep);
    margin-bottom:7px;
  }
  .field{margin-bottom:18px;}
  .btn-primary{
    width: 15%;
    background:var(--forest);
    color:#fff;
    border:none;
    border-radius:999px;
    padding:13px;
    font-family:'Fredoka', sans-serif;
    font-weight:600;
    font-size:14.5px;
    letter-spacing:.02em;
    cursor:pointer;
    transition:background .2s ease, transform .15s ease;
  }
  .btn-primary-login{
     width: 100%;
    background:var(--forest);
    color:#fff;
    border:none;
    border-radius:999px;
    padding:13px;
    font-family:'Fredoka', sans-serif;
    font-weight:600;
    font-size:14.5px;
    letter-spacing:.02em;
    cursor:pointer;
    transition:background .2s ease, transform .15s ease;
  }
  .btn-primary:hover{background:var(--forest-deep); transform:translateY(-1px);}
  .btn-ghost{
    background:#fff;
    color:var(--forest);
    border:1.5px solid var(--forest);
  }
  .btn-ghost:hover{background:var(--leaf-soft);}

  #screen-login{
    display:grid;
    grid-template-columns:1.05fr 1fr;
    min-height:560px;
  }
  .login-visual{
    background:
      radial-gradient(circle at 20% 15%, rgba(255,255,255,.13), transparent 40%),
      linear-gradient(155deg, var(--forest) 0%, var(--forest-deep) 100%);
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    padding:40px;
    text-align:center;
    color:#fff;
    position:relative;
    overflow:hidden;
  }
  .login-visual .ring{
    position:absolute;
    border-radius:50%;
    border:1.5px solid rgba(255,255,255,.14);
  }
  .login-visual .ring.r1{width:340px;height:340px;top:-90px;left:-90px;}
  .login-visual .ring.r2{width:220px;height:220px;bottom:-60px;right:-60px;}
  .login-logo{
    width:118px;height:118px;
    background:#fff;
    border-radius:30px;
    display:flex;align-items:center;justify-content:center;
    box-shadow:0 18px 30px -12px rgba(0,0,0,.35);
    margin-bottom:22px;
  }
  .login-logo svg{width:70px;height:70px;}
  .login-visual h1{
    font-family:'Fredoka', sans-serif;
    font-size:34px;
    margin:0 0 6px;
    font-weight:600;
  }
  .login-visual .rule{
    width:64px;height:1.5px;background:rgba(255,255,255,.5);
    margin:14px auto;
  }
  .login-visual p{
    font-size:14.5px;
    color:rgba(255,255,255,.85);
    max-width:280px;
    line-height:1.5;
    margin:0;
  }
  .login-form-wrap{
    display:flex;
    align-items:center;
    justify-content:center;
    padding:40px;
  }
  .login-form{width:100%; max-width:340px;}
  .login-form h2{
    font-family:'Fredoka', sans-serif;
    font-size:22px;
    color:var(--forest-deep);
    margin:0 0 24px;
  }
  .pill-input.pw-wrap{position:relative;}
  .field .eye{
    position:absolute; right:16px; top:50%; transform:translateY(-50%);
    color:var(--ink-soft); cursor:pointer; font-size:15px;
  }
  .field-relative{position:relative;}
  .row-links{
    display:flex;
    justify-content:flex-end;
    margin:-8px 0 18px;
  }
  .row-links a{font-size:12.5px; color:var(--forest); text-decoration:none;}
  .signup-note{
    text-align:center;
    font-size:13px;
    color:var(--ink-soft);
    margin:22px 0 12px;
  }
  .signup-note strong{display:block; color:var(--ink); margin-bottom:10px; font-weight:600;}
  .role-pick{display:flex; gap:10px;}
  .role-pick button, .role-pick a{
    flex:1;
    padding:11px;
    border-radius:999px;
    border:1.5px solid var(--forest);
    background:#fff;
    color:var(--forest);
    font-family:'Fredoka', sans-serif;
    font-weight:600;
    font-size:13.5px;
    cursor:pointer;
    transition:all .2s ease;
    text-align:center;
    text-decoration:none;
    display:block;
  }
  .role-pick button:hover, .role-pick a:hover{background:var(--forest); color:#fff;}

  #screen-cadastro{padding:36px 42px 42px;}
  .cadastro-head{
    display:flex; align-items:center; justify-content:space-between;
    margin-bottom:30px; flex-wrap:wrap; gap:16px;
  }
  .cadastro-head .brand-mini{display:flex; align-items:center; gap:10px;}
  .cadastro-head .brand-mini svg{width:34px; height:34px;}
  .cadastro-head .brand-mini span{
    font-family:'Fredoka', sans-serif; font-weight:600; font-size:19px; color:var(--forest-deep);
  }
  .role-toggle{
    display:flex; background:var(--leaf-soft); border-radius:999px; padding:4px; gap:2px;
  }
  .role-toggle button{
    border:none; background:transparent; padding:9px 20px; border-radius:999px;
    font-family:'Fredoka', sans-serif; font-weight:600; font-size:13px; color:var(--forest-deep);
    cursor:pointer; transition:all .2s ease;
  }
  .role-toggle button.active{background:var(--forest); color:#fff;}
  .cad-grid{display:grid; grid-template-columns:1fr 1fr; gap:0 26px;}
  .cad-grid .field.full{grid-column:1 / -1;}
  .cad-submit{margin-top:8px; max-width:280px; margin-left:auto; margin-right:auto;}
  .helper-note{
    text-align:center; font-size:12px; color:var(--ink-soft); margin-top:14px;
  }

  #screen-busca .topbar{
    background:var(--forest);
    color:#fff;
    display:flex; align-items:center; gap:26px;
    padding:14px 28px;
    flex-wrap:wrap;
  }
  #screen-busca .topbar .brand-mini{display:flex; align-items:center; gap:8px;}
  #screen-busca .topbar .brand-mini svg{width:28px;height:28px;}
  #screen-busca .topbar .brand-mini span{font-family:'Fredoka',sans-serif; font-weight:600; font-size:16px;}
  #screen-busca .navlinks{display:flex; gap:20px; font-size:13.5px; font-weight:500;}
  #screen-busca .navlinks span{cursor:pointer; opacity:.9;}
  #screen-busca .navlinks span:hover{opacity:1; text-decoration:underline;}
  #screen-busca .searchbar{
    flex:1; min-width:200px;
    display:flex; align-items:center;
    background:rgba(255,255,255,.14);
    border-radius:999px;
    padding:8px 8px 8px 16px;
    gap:8px;
  }
  #screen-busca .searchbar input{
    flex:1; background:transparent; border:none; outline:none;
    color:#fff; font-size:13px; font-family:'Work Sans',sans-serif;
  }
  #screen-busca .searchbar input::placeholder{color:rgba(255,255,255,.65);}
  #screen-busca .searchbar button{
    background:var(--clay); border:none; color:#fff; border-radius:999px;
    padding:8px 16px; font-family:'Fredoka',sans-serif; font-weight:600; font-size:12px; cursor:pointer;
  }
  #screen-busca .topbar .icons{display:flex; gap:16px; font-size:16px;}

  .busca-body{display:grid; grid-template-columns:220px 1fr; gap:0;}
  .filters{
    background:var(--leaf-soft);
    padding:26px 22px;
    border-right:1px solid var(--line);
  }
  .filters h3{
    font-family:'Fredoka', sans-serif; font-size:16px; color:var(--forest-deep); margin:0 0 18px;
  }
  .filters .field-label{color:var(--forest-deep);}
  .filters .pill-input{background:#fff;}

  .results{padding:26px 30px 34px;}
  .results h3{
    font-family:'Fredoka', sans-serif; font-size:15px; color:var(--ink); margin:0 0 16px; font-weight:500;
  }
  .card-grid{
    display:grid; grid-template-columns:repeat(3, 1fr); gap:18px; margin-bottom:30px;
  }
  .item-card{
    border:1px solid var(--line); border-radius:var(--radius-md); overflow:hidden;
    background:#fff; transition:transform .18s ease, box-shadow .18s ease; cursor:pointer;
  }
  .item-card:hover{transform:translateY(-3px); box-shadow:0 14px 26px -16px rgba(21,62,42,.4);}
  .item-thumb{
    height:96px;
    background:linear-gradient(135deg, var(--leaf-soft), #fff);
    display:flex; align-items:center; justify-content:center;
    color:var(--forest); font-size:26px;
  }
  .item-info{padding:12px 14px 14px;}
  .item-info .name{font-family:'Fredoka', sans-serif; font-weight:600; font-size:14px; color:var(--ink); margin:0 0 4px;}
  .item-info .tag{
    display:inline-block; font-size:10.5px; font-weight:600; color:var(--forest);
    background:var(--leaf-soft); padding:2px 8px; border-radius:999px; margin-bottom:6px;
  }
  .item-info .loc{font-size:11.5px; color:var(--ink-soft); line-height:1.4;}


  #screen-produto .topbar{
    background:var(--forest);
    color:#fff;
    display:flex; align-items:center; gap:26px;
    padding:14px 28px;
    flex-wrap:wrap;
  }
  #screen-produto .topbar .brand-mini{display:flex; align-items:center; gap:8px;}
  #screen-produto .topbar .brand-mini img{width:28px;height:28px; border-radius:6px;}
  #screen-produto .topbar .brand-mini span{font-family:'Fredoka',sans-serif; font-weight:600; font-size:16px;}
  #screen-produto .navlinks{display:flex; gap:20px; font-size:13.5px; font-weight:500;}
  #screen-produto .navlinks span{cursor:pointer; opacity:.9;}
  #screen-produto .navlinks span:hover{opacity:1; text-decoration:underline;}
  #screen-produto .searchbar{
    flex:1; min-width:200px;
    display:flex; align-items:center;
    background:rgba(255,255,255,.14);
    border-radius:999px;
    padding:8px 8px 8px 16px;
    gap:8px;
  }
  #screen-produto .searchbar input{
    flex:1; background:transparent; border:none; outline:none;
    color:#fff; font-size:13px; font-family:'Work Sans',sans-serif;
  }
  #screen-produto .searchbar input::placeholder{color:rgba(255,255,255,.65);}
  #screen-produto .searchbar button{
    background:var(--clay); border:none; color:#fff; border-radius:999px;
    padding:8px 16px; font-family:'Fredoka',sans-serif; font-weight:600; font-size:12px; cursor:pointer;
  }
  #screen-produto .topbar .icons{display:flex; gap:16px; font-size:16px;}

  .produto-body{
    background:var(--leaf-soft);
    padding:26px 30px 34px;
  }
  .back-row{
    display:flex; align-items:center; gap:8px; margin-bottom:18px;
    color:var(--forest-deep); font-weight:600; font-size:13px; cursor:pointer; width:fit-content;
  }
  .back-row:hover{text-decoration:underline;}
  .produto-main{
    display:grid; grid-template-columns:1fr 1.15fr; gap:26px; margin-bottom:32px;
  }
  .produto-photo{
    background:#fff; border-radius:var(--radius-md); border:1px solid var(--line);
    display:flex; align-items:center; justify-content:center; padding:30px; min-height:300px;
  }
  .produto-photo .phone-mock{
    width:170px; height:340px; border-radius:34px; background:#1B241E;
    padding:10px; box-shadow:0 20px 34px -18px rgba(0,0,0,.5);
    display:flex; align-items:center; justify-content:center;
  }
  .produto-photo .phone-mock .screen-mock{
    width:100%; height:100%; border-radius:24px;
    background:linear-gradient(160deg, #dfe9f5, #b9c9dc);
    display:flex; align-items:center; justify-content:center; color:#5B6B5F; font-size:36px;
  }
  .produto-panel{
    background:#fff; border-radius:var(--radius-md); border:1px solid var(--line);
    padding:26px 30px;
  }
  .produto-panel h2{
    font-family:'Fredoka', sans-serif; font-size:20px; color:var(--forest-deep); margin:0 0 14px;
  }
  .produto-panel h4{
    font-family:'Fredoka', sans-serif; font-size:13.5px; color:var(--forest); margin:18px 0 8px;
    text-transform:uppercase; letter-spacing:.03em;
  }
  .produto-panel ul{margin:0; padding-left:18px; font-size:13.5px; color:var(--ink); line-height:1.85;}
  .produto-panel .btn-primary{max-width:260px; margin-top:20px;}
  .similar-heading{
    font-family:'Fredoka', sans-serif; font-size:16px; color:var(--forest-deep); margin:0 0 16px; font-weight:500;
  }


  .perfil-body{
    background:var(--leaf-soft);
    padding:26px 30px 34px;
  }
  .perfil-hero{
    background:linear-gradient(150deg, var(--forest) 0%, var(--forest-deep) 100%);
    border-radius:var(--radius-md);
    padding:28px 30px;
    display:flex; align-items:center; gap:22px;
    color:#fff;
    margin-bottom:22px;
    flex-wrap:wrap;
  }
  .perfil-avatar{
    width:88px; height:88px; border-radius:50%;
    background:#fff; color:var(--forest);
    display:flex; align-items:center; justify-content:center;
    font-family:'Fredoka', sans-serif; font-weight:600; font-size:30px;
    flex-shrink:0; border:3px solid rgba(255,255,255,.5);
  }
  .perfil-hero-info{flex:1; min-width:200px;}
  .perfil-hero-info h2{
    font-family:'Fredoka', sans-serif; font-size:21px; margin:0 0 4px;
  }
  .perfil-hero-info .since{font-size:12.5px; color:rgba(255,255,255,.8); margin:0 0 10px;}
  .perfil-badges{display:flex; gap:8px; flex-wrap:wrap;}
  .perfil-badge{
    background:rgba(255,255,255,.16);
    border:1px solid rgba(255,255,255,.35);
    border-radius:999px;
    padding:5px 13px;
    font-size:11.5px;
    font-weight:600;
    display:flex; align-items:center; gap:5px;
  }
  .perfil-stars{
    text-align:center;
    background:rgba(255,255,255,.14);
    border-radius:14px;
    padding:14px 20px;
    flex-shrink:0;
  }
  .perfil-stars .num{font-family:'Fredoka', sans-serif; font-size:26px; font-weight:600;}
  .perfil-stars .stars{color:#FFD37A; font-size:14px; margin:2px 0;}
  .perfil-stars .count{font-size:11px; color:rgba(255,255,255,.75);}

  .perfil-grid{display:grid; grid-template-columns:1fr 1.3fr; gap:20px; margin-bottom:24px;}
  .perfil-card{
    background:#fff; border-radius:var(--radius-md); border:1px solid var(--line);
    padding:22px 24px;
  }
  .perfil-card h4{
    font-family:'Fredoka', sans-serif; font-size:13.5px; color:var(--forest);
    text-transform:uppercase; letter-spacing:.03em; margin:0 0 14px;
  }
  .perfil-stat-row{
    display:flex; justify-content:space-between; align-items:center;
    padding:9px 0; border-bottom:1px solid var(--line); font-size:13.5px;
  }
  .perfil-stat-row:last-child{border-bottom:none;}
  .perfil-stat-row span.label{color:var(--ink-soft);}
  .perfil-stat-row span.value{font-weight:600; color:var(--ink);}
  .perfil-about{font-size:13.5px; color:var(--ink); line-height:1.7; margin:0;}

  .review{
    padding:14px 0; border-bottom:1px solid var(--line);
  }
  .review:last-child{border-bottom:none;}
  .review-top{display:flex; justify-content:space-between; align-items:center; margin-bottom:4px;}
  .review-top .who{font-family:'Fredoka', sans-serif; font-weight:600; font-size:13px; color:var(--ink);}
  .review-top .stars{color:#E8A94F; font-size:12px;}
  .review p{margin:0; font-size:12.5px; color:var(--ink-soft); line-height:1.55;}

  .perfil-items h3{
    font-family:'Fredoka', sans-serif; font-size:15px; color:var(--ink); margin:0 0 14px; font-weight:500;
  }

 
  #screen-carrinho .topbar{
    background:var(--forest);
    color:#fff;
    display:flex; align-items:center; gap:26px;
    padding:14px 28px;
    flex-wrap:wrap;
  }
  #screen-carrinho .topbar .brand-mini{display:flex; align-items:center; gap:8px;}
  #screen-carrinho .topbar .brand-mini span{font-family:'Fredoka',sans-serif; font-weight:600; font-size:16px;}
  #screen-carrinho .topbar .icons{display:flex; gap:16px; font-size:16px; margin-left:auto;}
  .carrinho-body{padding:30px 34px 40px; background:var(--cream);}
  .carrinho-title{
    font-family:'Fredoka', sans-serif; font-size:20px; color:var(--forest-deep); margin:0 0 20px;
  }
  .carrinho-layout{display:grid; grid-template-columns:1.6fr 1fr; gap:24px;}
  .carrinho-item{
    background:#fff; border:1px solid var(--line); border-radius:var(--radius-md);
    padding:18px; display:flex; gap:16px; align-items:center; margin-bottom:14px;
  }
  .carrinho-thumb{
    width:74px; height:74px; border-radius:14px; flex-shrink:0;
    background:var(--leaf-soft); display:flex; align-items:center; justify-content:center; font-size:28px;
  }
  .carrinho-info{flex:1;}
  .carrinho-info .name{font-family:'Fredoka', sans-serif; font-weight:600; font-size:15px; color:var(--ink); margin:0 0 4px;}
  .carrinho-info .meta{font-size:12.5px; color:var(--ink-soft); margin:0 0 3px;}
  .carrinho-status{
    display:inline-flex; align-items:center; gap:6px;
    font-size:11.5px; font-weight:600; color:var(--forest-deep);
    background:var(--leaf-soft); padding:4px 10px; border-radius:999px; margin-top:6px;
  }
  .carrinho-status .dot{width:6px; height:6px; border-radius:50%; background:var(--forest);}
  .carrinho-donor{
    display:flex; align-items:center; gap:10px; margin-top:10px; padding-top:10px; border-top:1px dashed var(--line);
  }
  .carrinho-donor .mini-avatar{
    width:30px; height:30px; border-radius:50%; background:var(--forest); color:#fff;
    display:flex; align-items:center; justify-content:center; font-size:11px; font-weight:700; font-family:'Fredoka',sans-serif;
  }
  .carrinho-donor .who{font-size:12.5px; color:var(--ink); font-weight:600;}
  .carrinho-donor a{font-size:11.5px; color:var(--forest); text-decoration:none; margin-left:auto;}

  .carrinho-summary{
    background:#fff; border:1px solid var(--line); border-radius:var(--radius-md);
    padding:22px; height:fit-content; position:sticky; top:20px;
  }
  .carrinho-summary h4{font-family:'Fredoka', sans-serif; font-size:15px; color:var(--forest-deep); margin:0 0 16px;}
  .summary-row{display:flex; justify-content:space-between; font-size:13px; color:var(--ink-soft); margin-bottom:10px;}
  .summary-row.total{
    color:var(--ink); font-weight:700; font-size:14.5px; margin-top:14px; padding-top:14px; border-top:1px solid var(--line);
  }
  .carrinho-summary .btn-primary{margin-top:18px;}
  .carrinho-note{font-size:11px; color:var(--ink-soft); text-align:center; margin-top:12px; line-height:1.5;}
  #screen-tracking .topbar{
    background:var(--forest);
    color:#fff;
    display:flex; align-items:center; gap:26px;
    padding:14px 28px;
  }
  #screen-tracking .topbar .brand-mini{display:flex; align-items:center; gap:8px;}
  #screen-tracking .topbar .brand-mini span{font-family:'Fredoka',sans-serif; font-weight:600; font-size:16px;}
  .tracking-layout{display:grid; grid-template-columns:1.3fr 1fr; min-height:500px;}
  .tracking-map{
    position:relative;
    background:
      linear-gradient(0deg, rgba(117,197,80,.06) 1px, transparent 1px),
      linear-gradient(90deg, rgba(117,197,80,.06) 1px, transparent 1px),
      #EAF3E4;
    background-size:34px 34px;
    overflow:hidden;
  }
  .tracking-map svg{position:absolute; inset:0; width:100%; height:100%;}
  .map-pin{
    position:absolute; transform:translate(-50%,-100%);
    display:flex; flex-direction:column; align-items:center;
  }
  .map-pin .dot{
    width:16px; height:16px; border-radius:50% 50% 50% 0; transform:rotate(-45deg);
    box-shadow:0 4px 10px -2px rgba(0,0,0,.35);
  }
  .map-pin.donor .dot{background:var(--forest);}
  .map-pin.you .dot{background:var(--clay);}
  .map-pin .lbl{
    background:#fff; border-radius:8px; padding:3px 9px; font-size:11px; font-weight:600;
    color:var(--ink); margin-top:6px; box-shadow:0 6px 14px -8px rgba(0,0,0,.3); white-space:nowrap;
  }
  .courier-marker{
    position:absolute; width:34px; height:34px; border-radius:50%;
    background:#fff; border:2.5px solid var(--forest); display:flex; align-items:center; justify-content:center;
    font-size:15px; box-shadow:0 8px 18px -8px rgba(0,0,0,.4);
    transform:translate(-50%,-50%);
    animation:pulse-move 4s ease-in-out infinite;
  }
  @keyframes pulse-move{
    0%{transform:translate(-50%,-50%) translate(0,0);}
    50%{transform:translate(-50%,-50%) translate(6px,-4px);}
    100%{transform:translate(-50%,-50%) translate(0,0);}
  }
  .eta-chip{
    position:absolute; top:18px; left:18px;
    background:#fff; border-radius:14px; padding:10px 16px;
    box-shadow:0 10px 24px -12px rgba(0,0,0,.35);
  }
  .eta-chip .big{font-family:'Fredoka', sans-serif; font-size:20px; color:var(--forest-deep); font-weight:600;}
  .eta-chip .small{font-size:11px; color:var(--ink-soft);}

  .tracking-panel{
    background:#fff; padding:26px 26px 30px; display:flex; flex-direction:column;
  }
  .tracking-panel h3{font-family:'Fredoka', sans-serif; font-size:17px; color:var(--forest-deep); margin:0 0 4px;}
  .tracking-panel .sub{font-size:12.5px; color:var(--ink-soft); margin:0 0 20px;}
  .safety-code{
    background:var(--leaf-soft); border-radius:14px; padding:16px 18px; margin-bottom:20px; text-align:center;
  }
  .safety-code .label{font-size:11.5px; color:var(--forest-deep); font-weight:600; margin-bottom:6px;}
  .safety-code .code{font-family:'Fredoka', sans-serif; font-size:26px; letter-spacing:.15em; color:var(--forest-deep); font-weight:700;}
  .safety-code .hint{font-size:10.5px; color:var(--ink-soft); margin-top:6px;}

  .track-steps{list-style:none; margin:0 0 22px; padding:0;}
  .track-steps li{
    display:flex; align-items:flex-start; gap:12px; padding-bottom:18px; position:relative;
  }
  .track-steps li:not(:last-child)::before{
    content:''; position:absolute; left:9px; top:22px; bottom:-2px; width:2px; background:var(--line);
  }
  .track-steps .bullet{
    width:20px; height:20px; border-radius:50%; flex-shrink:0; display:flex; align-items:center; justify-content:center;
    font-size:11px; color:#fff; font-weight:700; z-index:1;
  }
  .track-steps li.done .bullet{background:var(--forest);}
  .track-steps li.active .bullet{background:var(--clay);}
  .track-steps li.pending .bullet{background:var(--line); color:var(--ink-soft);}
  .track-steps .txt .t1{font-size:13px; font-weight:600; color:var(--ink);}
  .track-steps .txt .t2{font-size:11.5px; color:var(--ink-soft);}

  .tracking-donor-card{
    display:flex; align-items:center; gap:12px; background:var(--cream); border:1px solid var(--line);
    border-radius:14px; padding:14px; margin-top:auto;
  }
  .tracking-donor-card .mini-avatar{
    width:42px; height:42px; border-radius:50%; background:var(--forest); color:#fff;
    display:flex; align-items:center; justify-content:center; font-size:13px; font-weight:700; font-family:'Fredoka',sans-serif;
  }
  .tracking-donor-card .info{flex:1;}
  .tracking-donor-card .name{font-size:13.5px; font-weight:600; color:var(--ink);}
  .tracking-donor-card .plate{font-size:11.5px; color:var(--ink-soft);}
  .tracking-donor-card .action{
    width:38px; height:38px; border-radius:50%; background:var(--forest); color:#fff;
    display:flex; align-items:center; justify-content:center; font-size:14px; cursor:pointer; border:none;
  }
  .tracking-actions{display:flex; gap:10px; margin-top:14px;}
  .tracking-actions button{flex:1;}
  .safety-footer{
    display:flex; align-items:center; gap:8px; margin-top:16px; font-size:11px; color:var(--ink-soft);
  }


  #screen-form{
    background:linear-gradient(160deg, var(--forest) 0%, var(--forest-deep) 100%);
    padding:38px 46px 46px;
    min-height:560px;
  }
  .form-card-head{
    background:#fff; border-radius:16px; padding:16px 24px; margin-bottom:26px;
    display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:10px;
  }
  .form-card-head h2{
    font-family:'Fredoka', sans-serif; font-size:16px; color:var(--forest-deep); margin:0; letter-spacing:.02em;
  }
  .form-card-head .step{font-size:11.5px; color:var(--ink-soft); font-weight:600;}
  .form-grid{display:grid; grid-template-columns:1fr 1fr; gap:6px 30px;}
  .form-grid label.field-label{color:rgba(255,255,255,.92);}
  .form-grid .pill-input{background:rgba(255,255,255,.94); border:none;}
  textarea.pill-input{
    border-radius:16px; min-height:96px; resize:none; padding:14px 18px; font-family:'Work Sans',sans-serif;
  }
  .form-note{
    font-size:12px; color:rgba(255,255,255,.7); margin:-10px 0 18px;
  }
  .declare-row{
    grid-column:1/-1;
    display:flex; gap:10px; align-items:flex-start;
    background:rgba(255,255,255,.08);
    border:1px solid rgba(255,255,255,.2);
    border-radius:14px; padding:14px 16px; margin-top:6px;
  }
  .declare-row input{margin-top:3px; accent-color:var(--clay); width:16px; height:16px; flex-shrink:0;}
  .declare-row p{margin:0; font-size:12px; line-height:1.5; color:rgba(255,255,255,.85);}
  .form-submit{grid-column:1/-1; display:flex; justify-content:center; margin-top:22px;}
  .form-submit button{
    max-width:260px;
    background:var(--clay); color:#fff;
  }
  .form-submit button:hover{background:#D67A3E;}


  .choice-group{display:flex; flex-direction:column; gap:10px; margin-top:8px;}
  .choice-card{
    display:flex; align-items:flex-start; gap:10px;
    background:rgba(255,255,255,.08);
    border:1.5px solid rgba(255,255,255,.2);
    border-radius:14px; padding:12px 16px;
    cursor:pointer; transition:background .2s ease, border-color .2s ease;
  }
  .choice-card:hover{background:rgba(255,255,255,.14);}
  .choice-card:has(input:checked){border-color:var(--clay); background:rgba(255,255,255,.18);}
  .choice-card input[type="radio"]{margin-top:3px; accent-color:var(--clay); width:16px; height:16px; flex-shrink:0;}
  .choice-card span{font-size:13px; line-height:1.5; color:rgba(255,255,255,.92);}
  .choice-card.disabled{opacity:.42; cursor:not-allowed;}
  .choice-card.disabled input{cursor:not-allowed;}


  .entrega-badge{
    display:inline-flex; align-items:center; gap:6px;
    font-size:11.5px; font-weight:600; color:var(--forest-deep);
    background:var(--leaf-soft); padding:5px 12px; border-radius:999px; margin-bottom:12px;
  }


  .match-seguro-intro{
    display:flex; gap:12px; align-items:flex-start;
    background:var(--leaf-soft); border:1px solid var(--line);
    border-radius:16px; padding:16px 18px; margin-bottom:22px;
  }
  .match-seguro-intro .icon{font-size:22px; line-height:1;}
  .match-seguro-intro h4{font-family:'Fredoka', sans-serif; font-size:14.5px; color:var(--forest-deep); margin:0 0 4px;}
  .match-seguro-intro p{font-size:12.5px; color:var(--ink); margin:0; line-height:1.5;}

  .slot-card{
    display:flex; align-items:center; gap:14px;
    border:1.5px solid var(--line); border-radius:14px;
    padding:14px 18px; cursor:pointer; margin-bottom:12px;
    transition:border-color .2s ease, background .2s ease;
  }
  .slot-card:hover{border-color:var(--leaf);}
  .slot-card:has(input:checked){border-color:var(--forest); background:var(--leaf-soft);}
  .slot-card input{accent-color:var(--forest); width:18px; height:18px; flex-shrink:0;}
  .slot-card .slot-info .data{font-family:'Fredoka', sans-serif; font-weight:600; font-size:14.5px; color:var(--ink);}
  .slot-card .slot-info .horario{font-size:12.5px; color:var(--ink-soft);}


  .pin-group{display:flex; gap:10px; justify-content:center; margin:20px 0;}
  .pin-group input{
    width:52px; height:60px; text-align:center;
    font-size:26px; font-family:'Fredoka', sans-serif; font-weight:700;
    border:1.5px solid var(--line); border-radius:12px; background:var(--cream); color:var(--ink);
  }
  .pin-group input:focus{border-color:var(--forest); outline:none; background:#fff;}


  @media (max-width:820px){
    #screen-login{grid-template-columns:1fr;}
    .login-visual{padding:34px 24px;}
    .cad-grid{grid-template-columns:1fr;}
    .busca-body{grid-template-columns:1fr;}
    .filters{border-right:none; border-bottom:1px solid var(--line);}
    .card-grid{grid-template-columns:repeat(2,1fr);}
    #grid-produto-similares{grid-template-columns:repeat(2,1fr) !important;}
    .produto-main{grid-template-columns:1fr;}
    .form-grid{grid-template-columns:1fr;}
    #screen-busca .topbar{flex-direction:column; align-items:stretch;}
    #screen-busca .navlinks{order:3;}
    .perfil-grid{grid-template-columns:1fr;}
    .perfil-hero{flex-direction:column; align-items:flex-start; gap:14px;}
    .carrinho-layout{grid-template-columns:1fr;}
    .tracking-layout{grid-template-columns:1fr;}
    .tracking-map{min-height:260px;}
  }
  @media (max-width:480px){
    .card-grid{grid-template-columns:1fr;}
    #screen-form{padding:26px 20px 34px;}
    #screen-cadastro{padding:26px 20px 32px;}
  }


    .view-screen { 
      display: none !important; 
    }
    .view-screen.active { 
      display: block !important; 
    }


    .demo-nav {
      background: #ffffff;
      border-bottom: 1px solid #e2e8f0;
      padding: 12px 24px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      position: sticky;
      top: 0;
      z-index: 1000;
      box-shadow: 0 2px 4px rgba(0,0,0,0.02);
    }
    .demo-nav.hidden {
      display: none !important;
    }
    .demo-nav .logo-area {
      font-weight: 700;
      font-family: 'Fredoka', sans-serif;
      color:   --forest-deep;
      font-size: 1.3rem;
      cursor: pointer;
      display: flex;
      align-items: center;
      gap: 8px;
    }
    .demo-nav .nav-links {
      display: flex;
      gap: 4px;
      align-items: center;
    }
    .demo-nav .nav-links button {
      background: none;
      border: none;
      padding: 8px 14px;
      font-weight: 600;
      cursor: pointer;
      border-radius: 20px;
      color: #4a5568;
      font-size: 13px;
      display: flex;
      align-items: center;
      gap: 6px;
      position: relative;
    }
    .demo-nav .nav-links button.active {
      background: #ebf8ff;
      color: #2b6cb0;
    }


    .nav-badge {
      background: #e53e3e;
      color: #ffffff;
      font-size: 10px;
      font-weight: 700;
      padding: 2px 6px;
      border-radius: 10px;
      margin-left: 2px;
    }


    .search-nav-container {
      background: #ffffff;
      border-radius: 12px;
      padding: 16px 20px;
      margin-bottom: 20px;
      box-shadow: 0 2px 8px rgba(0,0,0,0.05);
      border: 1px solid #e2e8f0;
    }
    .search-nav-bar {
      display: flex;
      gap: 10px;
      align-items: center;
    }
    .search-nav-bar input {
      flex: 1;
      padding: 12px 16px;
      border-radius: 25px;
      border: 1px solid #cbd5e0;
      font-size: 14px;
      outline: none;
    }
    .search-nav-bar input:focus {
      border-color: #3182ce;
      box-shadow: 0 0 0 3px rgba(49, 130, 206, 0.15);
    }
    .search-nav-filters {
      display: flex;
      gap: 8px;
      margin-top: 12px;
      overflow-x: auto;
      padding-bottom: 4px;
    }
    .chip-filter {
      background: #f7fafc;
      border: 1px solid #e2e8f0;
      padding: 6px 14px;
      border-radius: 16px;
      font-size: 12px;
      font-weight: 600;
      color: #4a5568;
      cursor: pointer;
      white-space: nowrap;
    }
    .chip-filter:hover {
      background: #ebf8ff;
      color: #2b6cb0;
      border-color: #bee3f8;
    }


    .notif-container {
      max-width: 800px;
      margin: 0 auto;
      padding: 10px 0;
    }
    .notif-card {
      background: #ffffff;
      border-radius: 12px;
      padding: 16px 20px;
      margin-bottom: 12px;
      border: 1px solid #e2e8f0;
      display: flex;
      gap: 16px;
      align-items: flex-start;
      cursor: pointer;
    }
    .notif-card.unread {
      background: #ebf8ff;
      border-left: 4px solid #3182ce;
    }
    .notif-icon {
      width: 40px;
      height: 40px;
      border-radius: 50%;
      background: #e2e8f0;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 18px;
      flex-shrink: 0;
    }
    .notif-content { flex: 1; }
    .notif-header { display: flex; justify-content: space-between; margin-bottom: 4px; }
    .notif-title { font-weight: 700; color: #2d3748; font-size: 14px; }
    .notif-time { font-size: 11px; color: #a0aec0; }
    .notif-desc { font-size: 13px; color: #4a5568; }

    .chat-layout {
      display: flex;
      height: 520px;
      background: #ffffff;
      border-radius: 12px;
      border: 1px solid #e2e8f0;
      overflow: hidden;
    }
    .chat-sidebar {
      width: 260px;
      border-right: 1px solid #e2e8f0;
      background: #f7fafc;
    }
    .chat-sidebar-header {
      padding: 16px;
      font-weight: 700;
      color: #2d3748;
      border-bottom: 1px solid #e2e8f0;
    }
    .chat-user-item {
      padding: 12px 16px;
      display: flex;
      align-items: center;
      gap: 12px;
      cursor: pointer;
      border-bottom: 1px solid #edf2f7;
    }
    .chat-user-item.active { background: #ebf8ff; }
    .chat-avatar {
      width: 36px;
      height: 36px;
      border-radius: 50%;
      background: #3182ce;
      color: #fff;
      display: flex;
      align-items: center;
      justify-content: center;
      font-weight: 700;
      font-size: 14px;
    }
    .chat-main {
      flex: 1;
      display: flex;
      flex-direction: column;
    }
    .chat-header {
      padding: 14px 20px;
      border-bottom: 1px solid #e2e8f0;
      font-weight: 700;
      color: #2d3748;
      display: flex;
      align-items: center;
      gap: 10px;
    }
    .chat-messages {
      flex: 1;
      padding: 20px;
      overflow-y: auto;
      display: flex;
      flex-direction: column;
      gap: 12px;
      background: #fcfcfc;
    }
    .msg-bubble {
      max-width: 70%;
      padding: 10px 14px;
      border-radius: 12px;
      font-size: 13.5px;
      line-height: 1.4;
    }
    .msg-bubble.received {
      background: #edf2f7;
      color: #2d3748;
      align-self: flex-start;
      border-bottom-left-radius: 2px;
    }
    .msg-bubble.sent {
      background: #3182ce;
      color: #ffffff;
      align-self: flex-end;
      border-bottom-right-radius: 2px;
    }
    .chat-input-area {
      padding: 10px 14px;
      border-top: 1px solid #e2e8f0;
      background: #f0f2f5;
      display: flex;
      align-items: flex-end;
      gap: 10px;
    }
    .chat-input-area input {
      flex: 1 1 auto;
      width: auto;
      min-width: 0;
      height: 46px;
      padding: 0 20px;
      font-size: 15px;
      font-family: 'Work Sans', sans-serif;
      border-radius: 24px;
      border: none;
      background: #ffffff;
      color: #2d3748;
      outline: none;
      box-shadow: 0 1px 2px rgba(0,0,0,.08);
    }
    .chat-input-area input::placeholder { color: #8a94a6; }
    .chat-input-area input:focus { box-shadow: 0 0 0 2px var(--leaf, #6cc04a); }
    .chat-input-area .btn-send {
      flex: 0 0 46px;
      width: 46px;
      height: 46px;
      padding: 0;
      border: none;
      border-radius: 50%;
      background: var(--forest);
      color: #ffffff;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      transition: background .2s ease, transform .15s ease;
    }
    .chat-input-area .btn-send:hover { background: var(--forest-deep); transform: scale(1.06); }
    .chat-input-area .btn-send svg { width: 22px; height: 22px; fill: currentColor; margin-left: 2px; }

    .btn-sos {
      background-color: #e53e3e !important;
      color: #ffffff !important;
      font-weight: 700;
      border: none;
      border-radius: 8px;
      padding: 10px 16px;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 6px;
      transition: background-color 0.2s ease;
    }
    .btn-sos:hover {
      background-color: #c53030 !important;
    }

 
    .produto-photo img {
      width: 100%;
      max-width: 320px;
      height: auto;
      border-radius: 16px;
      object-fit: cover;
      box-shadow: 0 4px 12px rgba(0,0,0,0.1);
      display: block;
      margin: 0 auto;
    }



.ico{display:inline-block; width:1.15em; height:1.15em; object-fit:contain; vertical-align:-0.2em; flex-shrink:0;}
.ico-missing{outline:1.5px dashed #a0aec0; outline-offset:-1px; border-radius:4px; background:rgba(160,174,192,.12);}

.field .eye{display:flex; align-items:center;}
.field .eye .ico{width:20px; height:20px; vertical-align:middle;}

.demo-nav .nav-links .ico{width:18px; height:18px; vertical-align:middle;}

.search-input-wrap{position:relative; flex:1; display:flex; align-items:center;}
.search-input-wrap .ico{position:absolute; left:16px; width:18px; height:18px; pointer-events:none;}
.search-input-wrap input{width:100%; padding-left:44px;}

.chip-filter{display:inline-flex; align-items:center; gap:6px;}
.chip-filter .ico{width:16px; height:16px;}

.notif-icon .ico{width:22px; height:22px;}
.item-thumb .ico{width:44px; height:44px;}
.carrinho-thumb .ico{width:36px; height:36px;}
.produto-photo .screen-mock .ico{width:64px; height:64px;}
.match-seguro-intro .icon .ico{width:28px; height:28px;}
.courier-marker .ico{width:20px; height:20px; vertical-align:middle;}
.track-steps .bullet .ico{width:12px; height:12px; vertical-align:middle;}
.tracking-donor-card .action .ico{width:18px; height:18px; vertical-align:middle;}
.perfil-badge .ico{width:14px; height:14px;}
.entrega-badge .ico, .back-row .ico{width:16px; height:16px;}

.stars{display:inline-flex; align-items:center; gap:2px;}
.perfil-stars .stars .ico{width:14px; height:14px;}
.review-top .stars .ico{width:12px; height:12px;}

.chat-input-area .btn-send .ico{width:22px; height:22px; vertical-align:middle;}
.chat-input-area .btn-send .ico-missing{outline-color:rgba(255,255,255,.75); background:transparent;}

footer {
    margin-top: auto;
    text-align: center;
    padding: 20px;
    background: #4E9B33;
    color: white;}