/* TicketDash - mesmo sistema visual do site da Pegada Lab (escuro + verde, Manrope). Sem estilos inline (CSP). */
@font-face{font-family:Manrope;font-style:normal;font-weight:400;font-display:swap;src:url(/static/fonts/manrope-latin-400.woff2) format("woff2")}
@font-face{font-family:Manrope;font-style:normal;font-weight:600;font-display:swap;src:url(/static/fonts/manrope-latin-600.woff2) format("woff2")}
@font-face{font-family:Manrope;font-style:normal;font-weight:700;font-display:swap;src:url(/static/fonts/manrope-latin-700.woff2) format("woff2")}
@font-face{font-family:Manrope;font-style:normal;font-weight:800;font-display:swap;src:url(/static/fonts/manrope-latin-800.woff2) format("woff2")}

:root{
  --canvas:#121212;--surface:#181818;--surface-mid:#1f1f1f;
  --text:#fff;--muted:#b3b3b3;--primary:#1ed760;--on-primary:#000;
  --danger:#f3727f;--border:#4d4d4d;--border-light:#7c7c7c;
  --font:Manrope,system-ui,-apple-system,"Segoe UI",sans-serif;
  --shadow:rgba(0,0,0,.3) 0 8px 8px;--shadow-heavy:rgba(0,0,0,.5) 0 8px 24px;
  --gutter:20px;--max:1040px
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;min-height:100vh;display:flex;flex-direction:column;background:var(--canvas);color:var(--text);font:400 16px/1.6 var(--font);overflow-wrap:break-word}
a{color:var(--text)}
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible{outline:3px solid var(--primary);outline-offset:3px;border-radius:4px}
.skip{position:absolute;left:var(--gutter);top:-80px;background:var(--primary);color:var(--on-primary);padding:12px 20px;border-radius:9999px;font-weight:700;z-index:10;text-decoration:none}
.skip:focus{top:12px}
.wrap{width:100%;max-width:var(--max);margin:0 auto;padding:0 var(--gutter)}
h1,h2,h3{line-height:1.2;margin:0 0 16px}
h1{font-weight:800;font-size:clamp(1.75rem,5vw,2.5rem);letter-spacing:-.02em}
h2{font-weight:700;font-size:1.375rem}
h3{font-weight:700;font-size:1.0625rem}
p{margin:0 0 16px}
.lead{font-size:1.125rem;color:var(--muted);max-width:56ch}
.muted{color:var(--muted)}
.eyebrow{display:inline-block;margin:0 0 12px;font:700 12px/1.4 var(--font);letter-spacing:1.4px;text-transform:uppercase;color:var(--primary)}

/* topo */
.top{border-bottom:1px solid var(--surface-mid)}
.top .wrap{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:4px 20px;padding-top:10px;padding-bottom:10px}
.brand{display:flex;align-items:center;gap:12px;min-height:44px;text-decoration:none}
.brand img{height:28px;width:auto}
.brand span{font-weight:700;font-size:14px;color:var(--muted);border-left:1px solid var(--border);padding-left:12px}
.user{display:flex;flex-wrap:wrap;align-items:center;gap:4px 16px;font-size:14px;color:var(--muted)}
.user form{margin:0}

main{flex:1;padding:40px 0 64px}
.foot{border-top:1px solid var(--surface-mid);padding:20px 0;color:var(--muted);font-size:14px}

/* botões */
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:12px 24px;border-radius:9999px;font:700 14px/1.2 var(--font);letter-spacing:1.4px;text-transform:uppercase;text-decoration:none;text-align:center;border:1px solid transparent;cursor:pointer}
.btn-primary{background:var(--primary);color:var(--on-primary)}
.btn-primary:hover{background:#3be477}
.btn-outline{background:transparent;color:var(--text);border-color:var(--border-light)}
.btn-outline:hover{border-color:var(--text)}
.btn-danger{background:transparent;color:var(--danger);border-color:var(--danger)}
.btn-danger:hover{background:rgba(243,114,127,.12)}
.btn-sm{padding:8px 16px;font-size:12px;min-height:44px}
.actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:24px}

/* cartões e listas */
.card{background:var(--surface);border-radius:8px;box-shadow:var(--shadow);padding:24px}
.cards{display:grid;gap:16px;grid-template-columns:minmax(0,1fr)}
a.card{display:block;text-decoration:none}
a.card:hover{background:var(--surface-mid)}
.card h3{margin-bottom:4px}
.card p{margin:0;color:var(--muted)}
.badge{display:inline-flex;align-items:center;border-radius:9999px;padding:2px 12px;font:600 12px/1.6 var(--font);background:rgba(30,215,96,.14);color:var(--primary)}
.badge.muted{background:var(--surface-mid);color:var(--muted)}
.section{margin-top:40px}
.section>h2{margin-bottom:16px}

.rows{list-style:none;margin:0;padding:0;display:grid;gap:8px;grid-template-columns:minmax(0,1fr)}
.rows li{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px 16px;background:var(--surface);border-radius:8px;padding:12px 16px}
.rows .who{display:flex;flex-wrap:wrap;align-items:center;gap:6px 12px;min-width:0}
.rows .who strong{font-weight:600;overflow-wrap:anywhere}
.rows form{margin:0}
.rows li.stack{display:block}
.rows li.stack .line{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px 16px}
.small{font-size:13px;margin:6px 0 0}
.badge.warn{background:rgba(255,193,7,.14);color:#ffc107}
.badge.err{background:rgba(243,114,127,.14);color:var(--danger)}
details.conn{margin-top:12px}
details.conn summary{display:flex;align-items:center;min-height:44px;cursor:pointer;font-weight:700;font-size:14px;color:var(--primary)}
details.conn .form{margin:8px 0 12px;background:var(--surface-mid);box-shadow:none}
details.conn .remove{margin:4px 0 0}
.empty{background:var(--surface);border-radius:8px;padding:24px;color:var(--muted)}

/* formulários */
.form{display:grid;gap:16px;grid-template-columns:minmax(0,1fr);max-width:520px;background:var(--surface);border-radius:8px;padding:24px;box-shadow:var(--shadow)}
.field{display:grid;gap:6px;min-width:0}
.field label{font-weight:600;font-size:14px}
.field input,.field select{width:100%;min-height:44px;padding:10px 14px;background:var(--canvas);color:var(--text);border:1px solid var(--border);border-radius:8px;font:400 16px/1.4 var(--font)}
.field input:hover,.field select:hover{border-color:var(--border-light)}
.field .hint{font-size:13px;color:var(--muted)}

/* telas de estado */
.hero{padding:24px 0}
.hero .card{max-width:560px;padding:32px}
.state{max-width:560px}
.state .card{padding:32px}
.back{display:flex;width:fit-content;align-items:center;min-height:44px;margin-bottom:8px;color:var(--muted);font-weight:700;font-size:14px;text-decoration:none}
.back:hover{color:var(--text)}

@media (min-width:640px){
  .cards{grid-template-columns:repeat(2,minmax(0,1fr))}
  .form.inline{grid-template-columns:minmax(0,2fr) minmax(0,1fr) auto;align-items:end;max-width:none}
}
@media (min-width:900px){
  .cards{grid-template-columns:repeat(3,minmax(0,1fr))}
  main{padding:56px 0 80px}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}