/* Diário de Cuidado — tema compartilhado */
:root{
  --paper:#F1F4EE; --paper-raised:#FBFCF9;
  --ink:#22322E; --ink-soft:#5C6B65;
  --teal:#2C5F58; --teal-deep:#1E4A44;
  --amber:#D98C2B; --amber-soft:#F6E4C3;
  --wine:#A23E3E; --wine-soft:#F3DAD5;
  --sage:#6E9C86; --sage-soft:#DEEAE1;
  --line:#D9DED2;
  --shadow:0 1px 2px rgba(34,50,46,.06), 0 4px 14px rgba(34,50,46,.06);
  --radius:14px;
}
*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
body{background:var(--paper); color:var(--ink); font-family:'Inter',sans-serif; -webkit-font-smoothing:antialiased; min-height:100vh;}
.serif{font-family:'Fraunces',serif;}
.mono{font-family:'IBM Plex Mono',monospace;}
a{color:var(--teal-deep);}

#app,.wrap{max-width:820px; margin:0 auto; padding:0 16px 90px;}
header.top{padding:20px 16px 12px; display:flex; align-items:center; justify-content:space-between; gap:12px; max-width:820px; margin:0 auto; flex-wrap:wrap;}
.brand{display:flex; flex-direction:column; gap:2px;}
.brand .mark{font-family:'Fraunces',serif; font-weight:600; font-style:italic; font-size:24px; color:var(--teal-deep); letter-spacing:-.01em;}
.brand .sub{font-size:12.5px; color:var(--ink-soft);}

.topbar-actions{display:flex; align-items:center; gap:8px; flex-wrap:wrap;}
.pill{display:inline-flex; align-items:center; gap:6px; background:var(--paper-raised); border:1px solid var(--line); border-radius:999px; padding:6px 12px; box-shadow:var(--shadow); font-size:13px; cursor:pointer;}
.pill .avatar{width:24px;height:24px;border-radius:50%; background:var(--teal); color:#fff; display:flex; align-items:center; justify-content:center; font-size:11px; font-weight:600;}
select.pill{appearance:none; padding-right:26px; background-image:linear-gradient(45deg,transparent 50%,var(--ink-soft) 50%),linear-gradient(135deg,var(--ink-soft) 50%,transparent 50%); background-position:calc(100% - 14px) 12px,calc(100% - 9px) 12px; background-size:5px 5px,5px 5px; background-repeat:no-repeat;}

nav.tabs{position:sticky; top:0; z-index:20; background:var(--paper); padding:6px 16px 10px; margin:0 auto; max-width:820px; display:flex; gap:6px; overflow-x:auto; scrollbar-width:none; border-bottom:1px solid var(--line);}
nav.tabs::-webkit-scrollbar{display:none;}
nav.tabs button{border:none; background:transparent; color:var(--ink-soft); font-family:'Inter',sans-serif; font-weight:600; font-size:13.5px; padding:9px 13px; border-radius:10px; cursor:pointer; white-space:nowrap; transition:background .15s,color .15s;}
nav.tabs button:hover{background:#E7ECE1;}
nav.tabs button.active{background:var(--teal); color:#fff;}

main{padding-top:18px;}
.view{display:none;}
.view.active{display:block; animation:fadein .25s ease;}
@keyframes fadein{from{opacity:0; transform:translateY(4px);} to{opacity:1; transform:none;}}

.card{background:var(--paper-raised); border:1px solid var(--line); border-radius:var(--radius); padding:16px; box-shadow:var(--shadow); margin-bottom:12px;}
h1.page{font-family:'Fraunces',serif; font-weight:500; font-size:26px; color:var(--teal-deep); margin:6px 0 4px;}
h2.section-title{font-family:'Fraunces',serif; font-weight:500; font-size:20px; margin:4px 0 12px; color:var(--teal-deep);}
.lead{color:var(--ink-soft); font-size:14px; margin:0 0 16px;}
.empty{text-align:center; padding:34px 18px; color:var(--ink-soft); font-size:14px;}
.empty .big{font-family:'Fraunces',serif; font-style:italic; font-size:17px; color:var(--ink); display:block; margin-bottom:4px;}
.muted{color:var(--ink-soft); font-size:13px;}
.row{display:flex; align-items:center; justify-content:space-between; gap:12px;}
.stack{display:flex; flex-direction:column; gap:10px;}
.grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:10px;}

.tag{display:inline-block; font-size:11.5px; font-weight:600; padding:2px 8px; border-radius:999px; background:var(--sage-soft); color:var(--teal-deep);}
.tag.owner{background:var(--amber-soft); color:#8a5a12;}
.tag.admin{background:var(--sage-soft);}
.tag.viewer{background:#E7ECE1; color:var(--ink-soft);}
.tag.warn{background:var(--wine-soft); color:var(--wine);}

button.btn{font-family:'Inter',sans-serif; font-weight:600; font-size:13.5px; border-radius:10px; padding:9px 16px; border:1px solid transparent; cursor:pointer; transition:transform .1s,filter .15s;}
button.btn:active{transform:scale(.97);}
button.btn:disabled{opacity:.5; cursor:not-allowed;}
.btn-primary{background:var(--teal); color:#fff;}
.btn-primary:hover{filter:brightness(1.06);}
.btn-ghost{background:transparent; color:var(--teal-deep); border-color:var(--line);}
.btn-ghost:hover{background:#E7ECE1;}
.btn-danger{background:var(--wine); color:#fff;}
.btn-sm{padding:6px 10px; font-size:12.5px;}

label{display:block; font-size:12.5px; font-weight:600; color:var(--ink-soft); margin:10px 0 4px;}
input,select,textarea{width:100%; font-family:'Inter',sans-serif; font-size:14px; color:var(--ink); background:var(--paper-raised); border:1px solid var(--line); border-radius:10px; padding:10px 12px; outline:none;}
input:focus,select:focus,textarea:focus{border-color:var(--teal);}
textarea{min-height:80px; resize:vertical;}
.field-inline{display:flex; gap:8px;}

.list-item{display:flex; align-items:center; justify-content:space-between; gap:12px; padding:12px 0; border-bottom:1px solid var(--line);}
.list-item:last-child{border-bottom:none;}
.list-item .ttl{font-weight:600; font-size:14.5px;}
.list-item .sub{font-size:12.5px; color:var(--ink-soft);}

/* toast */
#toast{position:fixed; left:50%; bottom:24px; transform:translateX(-50%) translateY(20px); background:var(--teal-deep); color:#fff; padding:11px 18px; border-radius:12px; font-size:13.5px; box-shadow:var(--shadow); opacity:0; pointer-events:none; transition:opacity .2s,transform .2s; z-index:100; max-width:90vw;}
#toast.show{opacity:1; transform:translateX(-50%) translateY(0);}
#toast.err{background:var(--wine);}

/* modal */
.modal-bg{position:fixed; inset:0; background:rgba(34,50,46,.4); display:none; align-items:center; justify-content:center; padding:16px; z-index:80;}
.modal-bg.show{display:flex;}
.modal{background:var(--paper-raised); border-radius:16px; padding:20px; width:100%; max-width:440px; box-shadow:var(--shadow); max-height:90vh; overflow:auto;}
.modal h3{font-family:'Fraunces',serif; font-weight:500; font-size:19px; color:var(--teal-deep); margin:0 0 8px;}
.modal-actions{display:flex; gap:8px; justify-content:flex-end; margin-top:16px;}

.center-screen{min-height:100vh; display:flex; align-items:center; justify-content:center; padding:20px;}
.login-card{background:var(--paper-raised); border:1px solid var(--line); border-radius:18px; padding:28px; max-width:400px; width:100%; box-shadow:var(--shadow); text-align:center;}
.login-card .mark{font-family:'Fraunces',serif; font-style:italic; font-weight:600; font-size:30px; color:var(--teal-deep);}
.hidden{display:none !important;}