:root{
  --gold:#F5A623; --gold-300:#F7C15E; --gold-200:#F9D593; --gold-700:#9A6212;
  --bg:#F3F1EC;            /* off-white quente */
  --bg-2:#ECEAE3;
  --surface:#FFFFFF;
  --ink:#16161A; --ink-2:#5A5A63; --ink-3:#90909A;
  --ring:rgba(20,20,30,.06);
  --hair:rgba(20,20,30,.08);
  --green:#1F9D57; --green-bg:#E7F6EE; --green-line:rgba(31,157,87,.28);
  --sh-1:0 1px 2px rgba(20,20,40,.04), 0 8px 22px rgba(20,20,40,.06);
  --sh-2:0 2px 6px rgba(20,20,40,.06), 0 22px 48px rgba(20,20,40,.12);
  --ease:cubic-bezier(.32,.72,0,1);
}
*{ box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
html,body{ margin:0; min-height:100%; background:var(--bg);
  color:var(--ink);
  font-family:"Plus Jakarta Sans", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
  -webkit-font-smoothing:antialiased; }
a{ color:inherit; text-decoration:none; }

@keyframes rise{ from{ opacity:0; transform:translateY(16px); } to{ opacity:1; transform:none; } }

/* ---------- shell / navegação ---------- */
.wrap{ max-width:60rem; margin:0 auto; padding:.5rem 1.25rem 5rem; }
.topbar{ position:sticky; top:.85rem; z-index:20; margin:.85rem auto 1.5rem; max-width:60rem; width:calc(100% - 2rem);
  display:flex; align-items:center; justify-content:space-between; gap:1rem;
  padding:.6rem 1rem .6rem 1.15rem; background:rgba(255,255,255,.72); backdrop-filter:blur(16px) saturate(150%);
  border:1px solid var(--hair); border-radius:999px; box-shadow:var(--sh-1); }
.brand{ display:flex; align-items:center; gap:.6rem; }
.brand .logo{ width:2.1rem; height:2.1rem; border-radius:50%; flex:none; box-shadow:0 0 0 1px var(--hair), 0 2px 6px rgba(20,20,40,.12); }
.brand .nm{ font-weight:700; font-size:1rem; letter-spacing:-.01em; color:var(--ink); }
.topbar .right{ font-size:.82rem; color:var(--ink-2); display:flex; gap:.5rem; align-items:center; }
.topbar .right a{ padding:.35rem .85rem; border-radius:999px; border:1px solid var(--hair); transition:all .3s var(--ease); }
.topbar .right a:hover{ background:var(--ink); color:#fff; border-color:var(--ink); }

.eyebrow{ display:inline-block; padding:.25rem .7rem; border-radius:999px; background:rgba(245,166,35,.12);
  color:var(--gold-700); font-size:.62rem; font-weight:800; letter-spacing:.18em; text-transform:uppercase; }
.crumb{ display:flex; flex-wrap:wrap; gap:.45rem; align-items:center; color:var(--ink-3); font-size:.85rem; margin:0 0 1rem; font-weight:600; }
.crumb a{ color:var(--ink-2); transition:color .2s; }
.crumb a:hover{ color:var(--gold-700); }
.crumb .sep{ color:var(--ink-3); opacity:.5; }
h1.page{ font-size:clamp(1.7rem,4vw,2.3rem); margin:.6rem 0 .35rem; font-weight:800; letter-spacing:-.025em; }
.sub{ color:var(--ink-2); font-size:.95rem; margin:0 0 1.75rem; }

/* ---------- cards ---------- */
.grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(17rem,1fr)); gap:.9rem; }
.card{ display:flex; align-items:center; gap:.95rem; background:var(--surface); border:1px solid var(--ring);
  border-radius:1.35rem; padding:1rem 1.05rem; box-shadow:var(--sh-1); animation:rise .55s var(--ease) both;
  transition:transform .5s var(--ease), box-shadow .5s var(--ease); will-change:transform; }
.card:hover{ transform:translateY(-5px); box-shadow:var(--sh-2); }
.card:active{ transform:translateY(-2px) scale(.99); }
.cbody{ min-width:0; flex:1; }
.card .ttl{ font-weight:700; font-size:1.05rem; letter-spacing:-.01em; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.card .meta{ color:var(--ink-3); font-size:.82rem; margin-top:.1rem; font-weight:500; }
.chev{ flex:none; width:2.1rem; height:2.1rem; border-radius:50%; display:grid; place-items:center;
  background:var(--bg-2); color:var(--ink-2); transition:transform .5s var(--ease), background .3s, color .3s; }
.chev svg{ width:1rem; height:1rem; }
.card:hover .chev{ transform:translateX(4px); background:var(--gold); color:#1a1205; }

/* avatar (foto do cliente ou iniciais) */
.av-wrap{ position:relative; flex:none; line-height:0; }
.avatar{ width:var(--sz,3.25rem); height:var(--sz,3.25rem); flex:none; border-radius:50%; object-fit:cover;
  box-shadow:0 0 0 1px var(--hair), 0 4px 10px rgba(20,20,40,.10); }
.av-edit{ position:absolute; right:-3px; bottom:-3px; width:1.4rem; height:1.4rem; border-radius:50%; border:2px solid var(--surface);
  background:var(--ink); color:#fff; display:grid; place-items:center; cursor:pointer; padding:0;
  opacity:0; transform:scale(.8); transition:opacity .25s var(--ease), transform .25s var(--ease), background .2s; }
.av-edit svg{ width:.82rem; height:.82rem; }
.card:hover .av-edit{ opacity:1; transform:scale(1); }
.av-edit:hover{ background:var(--gold-700); }
.av-edit.busy{ opacity:1; transform:scale(1); animation:pulse .8s var(--ease) infinite; }
@keyframes pulse{ 50%{ opacity:.5; } }
@media (hover:none){ .av-edit{ opacity:1; transform:scale(1); } } /* no celular, sempre visível */
.avatar--initials{ display:grid; place-items:center; color:#fff; font-weight:800; font-size:1.05rem; letter-spacing:.02em;
  background:linear-gradient(140deg, var(--a,#caa), var(--b,#866)); text-shadow:0 1px 2px rgba(0,0,0,.18); }

/* mês: tile dourado suave */
.mtile{ flex:none; width:3.25rem; height:3.25rem; border-radius:1rem; display:grid; place-items:center;
  background:linear-gradient(140deg, #FFF3DC, #FBE0AE); color:var(--gold-700); box-shadow:inset 0 0 0 1px rgba(245,166,35,.25); }
.mtile svg{ width:1.45rem; height:1.45rem; }

/* ---------- lista de roteiros do mês ---------- */
.seq{ display:flex; flex-direction:column; gap:.55rem; }
.row{ display:flex; align-items:center; gap:.7rem; background:var(--surface); border:1px solid var(--ring);
  border-radius:1.1rem; padding:.6rem .7rem .6rem .85rem; box-shadow:var(--sh-1); animation:rise .5s var(--ease) both;
  transition:transform .4s var(--ease), box-shadow .4s var(--ease); }
.row:hover{ transform:translateY(-2px); box-shadow:var(--sh-2); }
.rowmain{ display:flex; align-items:center; gap:.85rem; flex:1; min-width:0; }
.rowmain:hover .t{ color:var(--gold-700); }
.row .ord{ width:2.15rem; height:2.15rem; flex:none; display:grid; place-items:center; border-radius:.7rem;
  background:linear-gradient(140deg,#FFF3DC,#FBE0AE); color:var(--gold-700); font-weight:800; font-size:.92rem; }
.row .body{ min-width:0; flex:1; }
.row .body .t{ font-weight:700; font-size:.98rem; letter-spacing:-.01em; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; transition:color .2s; }
.row .body .d{ color:var(--green); font-size:.76rem; font-weight:700; margin-top:.05rem; }

/* pílula "Gravado" */
.rowgrav{ flex:none; white-space:nowrap; display:inline-flex; align-items:center; gap:.35rem;
  border:1px solid var(--green-line); background:var(--surface); color:var(--green);
  border-radius:999px; padding:.5rem .9rem; font:inherit; font-size:.8rem; font-weight:700; cursor:pointer;
  box-shadow:var(--sh-1); transition:transform .35s var(--ease), background .3s, box-shadow .3s; }
.rowgrav:hover{ background:var(--green-bg); transform:translateY(-1px); box-shadow:var(--sh-2); }
.rowgrav:active{ transform:scale(.95); }
.rowgrav.done{ background:var(--green-bg); border-color:transparent; box-shadow:none; cursor:default; }
.rowgrav:disabled{ cursor:default; }
.row.done{ background:linear-gradient(0deg, var(--green-bg), var(--surface)); }
.row.done .ord{ background:var(--green-bg); color:var(--green); }

.empty{ color:var(--ink-2); background:var(--surface); border:1px dashed var(--hair); border-radius:1.35rem; padding:2.5rem 2rem; text-align:center; box-shadow:var(--sh-1); }

/* ---------- login ---------- */
.login{ min-height:100dvh; display:flex; align-items:center; justify-content:center; padding:1.5rem; }
.login form{ width:100%; max-width:22rem; background:var(--surface); border:1px solid var(--ring); border-radius:1.6rem; padding:2rem 1.8rem; box-shadow:var(--sh-2); animation:rise .6s var(--ease) both; }
.login-logo{ display:block; width:4.5rem; height:4.5rem; margin:0 auto .8rem; border-radius:50%; box-shadow:0 0 0 1px var(--hair), 0 8px 22px rgba(20,20,40,.14); }
.login h1{ text-align:center; font-size:1.5rem; font-weight:800; letter-spacing:-.02em; margin:.2rem 0 1.4rem; }
.login input{ width:100%; padding:.85rem 1rem; border-radius:.85rem; border:1px solid var(--hair); background:#FBFAF8; color:var(--ink); font-size:1rem; transition:border-color .25s, box-shadow .25s; }
.login input:focus{ outline:none; border-color:var(--gold); box-shadow:0 0 0 4px rgba(245,166,35,.15); }
.login button{ width:100%; margin-top:.9rem; padding:.9rem; border:none; border-radius:.85rem; background:var(--ink); color:#fff; font-weight:700; font-size:1rem; cursor:pointer; transition:transform .35s var(--ease), background .3s; }
.login button:hover{ background:#000; transform:translateY(-1px); }
.login button:active{ transform:scale(.98); }
.login .err{ color:#c0392b; font-size:.85rem; margin-top:.8rem; text-align:center; }

/* ---------- player (tela cheia — PERMANECE ESCURO) ---------- */
#root{ position:fixed; inset:0; display:flex; flex-direction:column; background:#000; color:#fff; user-select:none; }
.tp-head{ display:flex; align-items:center; justify-content:space-between; gap:.75rem;
  padding:.5rem 1rem; border-bottom:1px solid rgba(255,255,255,.1); font-size:.85rem; color:rgba(255,255,255,.6); }
.tp-head .title{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; min-width:0; }
.tp-head .title b{ color:rgba(255,255,255,.9); font-weight:600; }
.tp-head .title span{ color:rgba(255,255,255,.4); margin-left:.5rem; }
.tp-head .navlinks{ display:flex; gap:.5rem; flex:none; }
.navlink{ background:rgba(255,255,255,.06); border:none; color:rgba(255,255,255,.7); border-radius:.4rem; padding:.35rem .6rem; font:inherit; font-size:.8rem; cursor:pointer; }
.navlink:hover{ background:rgba(255,255,255,.14); color:#fff; }
.tp-scroll{ flex:1; overflow:hidden; padding:0 1.25rem; touch-action:none; cursor:grab; }
.tp-scroll.grabbing{ cursor:grabbing; }

/* modal de edição */
.tp-editor{ position:fixed; inset:0; z-index:60; display:flex; align-items:center; justify-content:center; padding:1.25rem;
  background:rgba(0,0,0,.6); backdrop-filter:blur(6px); }
.tp-editor .ed-box{ width:100%; max-width:42rem; max-height:86vh; display:flex; flex-direction:column; gap:.85rem;
  background:#16161A; border:1px solid rgba(255,255,255,.12); border-radius:1.1rem; padding:1.25rem; box-shadow:0 30px 80px rgba(0,0,0,.5); }
.tp-editor .ed-head{ font-weight:700; color:#fff; font-size:1.05rem; }
.tp-editor .ed-head small{ display:block; font-weight:500; color:rgba(255,255,255,.5); font-size:.8rem; margin-top:.2rem; }
.tp-editor .ed-area{ flex:1; min-height:42vh; resize:vertical; width:100%; padding:1rem; border-radius:.8rem;
  border:1px solid rgba(255,255,255,.14); background:#0d0d0f; color:#fff; font-size:1.05rem; line-height:1.5;
  font-family:inherit; }
.tp-editor .ed-area:focus{ outline:none; border-color:var(--gold); box-shadow:0 0 0 4px rgba(245,166,35,.18); }
.tp-editor .ed-foot{ display:flex; justify-content:flex-end; gap:.6rem; }
.tp-inner{ margin:0 auto; max-width:64rem; font-weight:600; }
.tp-inner p{ margin:0 0 .4em; }
.tp-guide{ position:absolute; left:0; right:0; top:50%; transform:translateY(-50%); height:0; pointer-events:none; z-index:5; }
.tp-guide::before, .tp-guide::after{ content:''; position:absolute; top:0; transform:translateY(-50%); width:0; height:0; border-style:solid; opacity:.7; }
.tp-guide::before{ left:10px; border-width:9px 0 9px 14px; border-color:transparent transparent transparent var(--gold); }
.tp-guide::after{ right:10px; border-width:9px 14px 9px 0; border-color:transparent var(--gold) transparent transparent; }
.tp-foot{ display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:.5rem;
  padding:.75rem 1rem; border-top:1px solid rgba(255,255,255,.1); background:rgba(0,0,0,.8); }
.tp-foot button, .tp-foot a{ font:inherit; cursor:pointer; }
.btn{ border:1px solid rgba(255,255,255,.15); background:rgba(255,255,255,.05); color:rgba(255,255,255,.85); border-radius:.5rem; padding:.5rem .75rem; font-size:.9rem; }
.btn:hover{ background:rgba(255,255,255,.12); }
.btn.gold{ background:var(--gold); color:#000; font-weight:700; border:none; padding:.6rem 1.2rem; }
.btn.next{ border-color:rgba(245,166,35,.5); color:var(--gold-200); }
.btn.grav{ border-color:rgba(120,200,120,.5); color:#bdf0bd; }
.btn.grav.done{ background:rgba(120,200,120,.18); color:#9be29b; border-color:rgba(120,200,120,.5); cursor:default; }
.btn.on{ border-color:var(--gold); background:rgba(245,166,35,.2); color:var(--gold-200); }
.group{ display:flex; align-items:center; gap:.25rem; background:rgba(255,255,255,.05); border-radius:.5rem; padding:.25rem .4rem; }
.group .lbl{ font-size:.7rem; color:rgba(255,255,255,.5); padding:0 .25rem; }
.group .val{ min-width:2.2rem; text-align:center; font-variant-numeric:tabular-nums; font-size:.9rem; }
.stp{ width:1.8rem; height:1.8rem; border-radius:.35rem; background:rgba(255,255,255,.1); color:#fff; font-size:.9rem; border:none; }
.stp:hover{ background:rgba(255,255,255,.2); }
.clean{ position:absolute; right:1rem; bottom:1rem; z-index:20; border-radius:999px; border:none; background:rgba(255,255,255,.1); color:rgba(255,255,255,.7); padding:.5rem .85rem; font-size:.85rem; cursor:pointer; }