:root{
    --teal-dark:#2E5F66;
    --teal-mid:#41848D;
    --mint:#84FEE5;
    --mint-soft:#E4FBF6;
    --blue:#35BBF0;
    --blue-deep:#1E93C9;
    --bg:#F5FBFA;
    --surface:#FFFFFF;
    --border:#DCEEEC;
    --ink:#1F3B40;
    --ink-soft:#5C7A7E;
    --danger:#E2685A;
    --radius:18px;
    --shadow: 0 8px 24px rgba(46,95,102,0.08);
  }
  *{box-sizing:border-box;}
  html,body{margin:0;padding:0;}
  body{
    background:
      radial-gradient(circle at 100% 0%, var(--mint-soft) 0%, transparent 45%),
      var(--bg);
    font-family:'Inter',system-ui,sans-serif;
    color:var(--ink);
    min-height:100vh;
    -webkit-font-smoothing:antialiased;
  }
  .app{
    max-width:480px;
    margin:0 auto;
    min-height:100vh;
    display:flex;
    flex-direction:column;
    padding-bottom:32px;
  }
  header.top{
    padding:20px 20px 14px;
    display:flex;
    align-items:center;
    justify-content:center;
    background:var(--surface);
    border-bottom:1px solid var(--border);
    position:sticky;
    top:0;
    z-index:20;
  }
  header.top img{
    height:34px;
    width:auto;
    display:block;
  }
  .steps{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:6px;
    padding:16px 20px 4px;
  }
  .step-dot{
    display:flex;
    align-items:center;
    gap:6px;
    font-family:'Quicksand',sans-serif;
    font-weight:600;
    font-size:12.5px;
    color:var(--ink-soft);
  }
  .step-dot .circle{
    width:22px;height:22px;border-radius:50%;
    background:var(--border);
    color:var(--ink-soft);
    display:flex;align-items:center;justify-content:center;
    font-size:11px;
    transition:all .25s ease;
  }
  .step-dot.active .circle{
    background:linear-gradient(135deg,var(--blue),var(--mint));
    color:#fff;
    box-shadow:0 4px 10px rgba(53,187,240,0.35);
  }
  .step-dot.done .circle{
    background:var(--teal-mid);
    color:#fff;
  }
  .step-dot.active{color:var(--teal-dark);}
  .step-line{
    width:20px;height:2px;background:var(--border);
    margin-bottom:2px;
  }

  main{
    flex:1;
    padding:8px 20px 20px;
    display:flex;
    flex-direction:column;
    gap:16px;
  }
  .screen{
    animation:fadeIn .35s ease;
  }
  @keyframes fadeIn{
    from{opacity:0; transform:translateY(6px);}
    to{opacity:1; transform:translateY(0);}
  }
  .hidden{display:none !important;}

  h1.title{
    font-family:'Quicksand',sans-serif;
    font-size:20px;
    font-weight:700;
    color:var(--teal-dark);
    margin:6px 2px 2px;
  }
  p.subtitle{
    margin:0 2px 8px;
    font-size:14px;
    color:var(--ink-soft);
    line-height:1.5;
  }

  .card-btn{
    width:100%;
    text-align:left;
    background:var(--surface);
    border:1.5px solid var(--border);
    border-radius:var(--radius);
    padding:16px 18px;
    display:flex;
    align-items:center;
    gap:14px;
    cursor:pointer;
    font-family:'Inter',sans-serif;
    transition:all .18s ease;
    box-shadow:var(--shadow);
  }
  .card-btn:active{transform:scale(0.98);}
  .card-btn:hover{border-color:var(--blue);}
  .avatar-badge{
    width:42px;height:42px;border-radius:14px;
    background:linear-gradient(135deg,var(--mint),var(--blue));
    display:flex;align-items:center;justify-content:center;
    color:#fff;font-family:'Quicksand',sans-serif;font-weight:700;
    font-size:16px;
    flex-shrink:0;
  }
  .card-btn .info{flex:1; min-width:0;}
  .card-btn .name{
    font-weight:600;font-size:15.5px;color:var(--ink);
    font-family:'Quicksand',sans-serif;
  }
  .card-btn .meta{
    font-size:12.5px;color:var(--ink-soft);margin-top:2px;
    text-transform:capitalize;
  }
  .card-btn .chev{color:var(--ink-soft); font-size:18px;}

  .card-list{display:flex;flex-direction:column;gap:10px;}

  .searchbar{
    display:flex;align-items:center;gap:8px;
    background:var(--surface);
    border:1.5px solid var(--border);
    border-radius:14px;
    padding:10px 14px;
    margin:4px 2px 6px;
  }
  .searchbar input{
    border:none;outline:none;flex:1;
    font-size:15px;font-family:'Inter',sans-serif;
    background:transparent;color:var(--ink);
  }
  .searchbar svg{flex-shrink:0;}

  .backrow{
    display:flex;align-items:center;gap:6px;
    color:var(--teal-mid);
    font-size:13.5px;font-weight:600;
    cursor:pointer;
    margin:2px 2px 0;
    width:fit-content;
    font-family:'Quicksand',sans-serif;
  }
  .backrow:active{opacity:.6;}

  .context-bar{
    background:linear-gradient(135deg, var(--teal-dark), var(--teal-mid));
    border-radius:var(--radius);
    padding:14px 16px;
    color:#fff;
    display:flex;
    align-items:center;
    gap:12px;
    box-shadow:var(--shadow);
  }
  .context-bar .avatar-badge{background:rgba(255,255,255,0.18); color:#fff;}
  .context-bar .info .name{color:#fff; font-family:'Quicksand',sans-serif; font-weight:700; font-size:15px;}
  .context-bar .info .meta{color:rgba(255,255,255,0.8);}

  label.field-label{
    font-size:13px;font-weight:600;color:var(--teal-dark);
    font-family:'Quicksand',sans-serif;
    margin:2px 2px 6px;
    display:flex; align-items:center; gap:6px;
  }
  label.field-label .req{color:var(--danger); font-size:11px;}

  .field-group{display:flex; flex-direction:column;}

  input[type=date], input[type=text], input[type=email], input[type=password], textarea{
    width:100%;
    border:1.5px solid var(--border);
    border-radius:14px;
    padding:12px 14px;
    font-size:15px;
    font-family:'Inter',sans-serif;
    color:var(--ink);
    background:var(--surface);
    outline:none;
    resize:vertical;
    transition:border-color .15s ease;
  }
  input[type=date]:focus, input[type=text]:focus, input[type=email]:focus, input[type=password]:focus, textarea:focus{
    border-color:var(--blue);
    box-shadow:0 0 0 3px rgba(53,187,240,0.15);
  }
  textarea{min-height:96px; line-height:1.5;}
  textarea.small{min-height:70px;}

  .btn-primary{
    width:100%;
    background:linear-gradient(135deg,var(--blue),var(--teal-mid));
    color:#fff;
    border:none;
    border-radius:16px;
    padding:15px;
    font-size:15.5px;
    font-weight:700;
    font-family:'Quicksand',sans-serif;
    cursor:pointer;
    box-shadow:0 8px 20px rgba(53,187,240,0.28);
    transition:transform .15s ease, box-shadow .15s ease;
    display:flex;align-items:center;justify-content:center;gap:8px;
  }
  .btn-primary:active{transform:scale(0.98);}
  .btn-primary:disabled{
    opacity:.55; box-shadow:none; cursor:not-allowed;
  }
  .btn-secondary{
    width:100%;
    background:var(--surface);
    color:var(--teal-mid);
    border:1.5px solid var(--border);
    border-radius:16px;
    padding:14px;
    font-size:14.5px;
    font-weight:600;
    font-family:'Quicksand',sans-serif;
    cursor:pointer;
  }
  .btn-secondary:active{transform:scale(0.98);}

  .empty{
    text-align:center;
    color:var(--ink-soft);
    font-size:14px;
    padding:24px 10px;
  }

  /* success screen */
  .success-wrap{
    display:flex; flex-direction:column; align-items:center;
    padding:30px 10px 10px;
    text-align:center;
  }
  .infinity-loader{
    width:110px; height:66px;
    margin-bottom:18px;
  }
  .success-wrap h2{
    font-family:'Quicksand',sans-serif;
    color:var(--teal-dark);
    font-size:20px;
    margin:0 0 6px;
  }
  .success-wrap p{
    color:var(--ink-soft);
    font-size:14px;
    margin:0 0 22px;
    line-height:1.5;
  }

  .history-toggle{
    display:flex; align-items:center; justify-content:space-between;
    padding:12px 16px;
    background:var(--surface);
    border:1.5px solid var(--border);
    border-radius:14px;
    cursor:pointer;
    font-family:'Quicksand',sans-serif;
    font-weight:600;
    font-size:14px;
    color:var(--teal-dark);
  }
  .history-list{
    display:flex; flex-direction:column; gap:10px;
    margin-top:10px;
  }
  .history-item{
    background:var(--surface);
    border:1px solid var(--border);
    border-radius:14px;
    padding:12px 14px;
  }
  .history-item .hdr{
    display:flex; justify-content:space-between; align-items:baseline;
    margin-bottom:5px;
  }
  .history-item .hdr .date{
    font-weight:700; font-size:13.5px; color:var(--teal-dark);
    font-family:'Quicksand',sans-serif;
  }
  .history-item .hdr .who{
    font-size:11.5px; color:var(--ink-soft);
  }
  .history-item .content{
    font-size:13.5px; color:var(--ink); line-height:1.5;
    white-space:pre-wrap;
  }

  .toast{
    position:fixed;
    left:50%; bottom:24px;
    transform:translateX(-50%) translateY(calc(100% + 40px));
    background:var(--teal-dark);
    color:#fff;
    padding:12px 20px;
    border-radius:14px;
    font-size:13.5px;
    font-family:'Quicksand',sans-serif;
    font-weight:600;
    box-shadow:0 10px 24px rgba(0,0,0,0.2);
    transition:transform .3s ease;
    z-index:100;
    max-width:90%;
    text-align:center;
  }
  .toast.show{transform:translateX(-50%) translateY(0);}

  .char-count{
    font-size:11.5px; color:var(--ink-soft); text-align:right; margin-top:-2px;
  }

  /* login */
  .login-form{display:flex; flex-direction:column; gap:14px; margin-top:4px;}
  .form-error{
    background:#FDECEA; color:#A8392D;
    border-radius:12px; padding:10px 14px;
    font-size:13.5px; line-height:1.4;
  }

  /* barra do usuário logado */
  .userbar{
    display:flex; align-items:center; justify-content:space-between; gap:10px;
    padding:10px 20px 0;
    font-size:12.5px; color:var(--ink-soft);
  }
  .userbar strong{color:var(--teal-dark); font-family:'Quicksand',sans-serif;}
  .link-btn{
    background:none; border:none; padding:0;
    color:var(--teal-mid); font-weight:600; font-size:12.5px;
    font-family:'Quicksand',sans-serif; cursor:pointer;
  }
  .readonly-note{
    background:var(--mint-soft); color:var(--teal-dark);
    border-radius:12px; padding:10px 14px;
    font-size:13px; line-height:1.4;
  }
  .history-item .extra{
    margin-top:8px; font-size:12.5px; color:var(--ink-soft); line-height:1.45;
    white-space:pre-wrap;
  }
  .history-item .extra b{color:var(--teal-dark); font-weight:600;}
  #screen-form:not(.hidden), #formFields:not(.hidden){display:flex; flex-direction:column; gap:16px;}
  .link-btn.center{align-self:center; padding:4px 8px;}
  .userbar-actions{display:flex; gap:14px;}
  .admin-reset{margin-top:22px;}
  .admin-tools{display:flex; flex-direction:column; gap:10px; margin-top:22px;}
  .import-text{min-height:180px; font-size:12.5px; white-space:pre; overflow-x:auto;}
  #screen-import:not(.hidden), #screen-new-therapist:not(.hidden){display:flex; flex-direction:column; gap:14px;}
  #screen-import .title, #screen-import .subtitle{margin-bottom:0;}
  .password-banner{
    margin:10px 20px 0; padding:10px 14px;
    background:#FFF6E0; color:#7A5A12; border-radius:12px;
    font-size:13px; line-height:1.4;
  }
  .password-banner .link-btn{color:#7A5A12; text-decoration:underline; margin-left:4px;}
  #screen-detail:not(.hidden){display:flex; flex-direction:column; gap:12px;}
  .section-title{
    font-family:'Quicksand',sans-serif; font-size:15px; font-weight:700;
    color:var(--teal-dark); margin:10px 2px 0;
  }
  .badge{
    display:inline-block; margin-left:6px; padding:1px 8px; border-radius:999px;
    background:#FFE7D6; color:#A04A12; font-size:11.5px; font-weight:600;
    text-transform:none;
  }
  .card-btn.pending{border-color:#FFD2B3;}
  .card-btn .preview{
    font-size:12.5px; color:var(--ink-soft); margin-top:3px;
    white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  }
  .avatar-badge{font-size:13px; letter-spacing:-0.2px;}