@import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@500;600;700;800;900&family=DM+Sans:wght@400;500;600;700&display=swap');
:root{color-scheme:dark;--bg:#090b11;--panel:#10141d;--panel-hi:#171c27;--white:#f0f0ed;--muted:#abb2c0;--line:rgba(218,225,239,.20);--accent:#CDD1DB;--good:#a5e1bf;--bad:#e8a3a3}
*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:105px}body{margin:0;background:var(--bg);color:var(--white);font-family:"DM Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;-webkit-font-smoothing:antialiased}button,input,select{font:inherit}button{cursor:pointer}button:disabled{cursor:not-allowed;opacity:.42}a{color:inherit;text-decoration:none}a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible{outline:2px solid var(--accent);outline-offset:4px}.skip-link{position:absolute;z-index:100;top:-90px;left:16px;padding:12px;background:white;color:#000}.skip-link:focus{top:12px}
.content-wrap{width:min(100% - 48px,1260px);margin-inline:auto}.site-header{min-height:94px;display:flex;align-items:center;justify-content:space-between;gap:28px;padding:18px clamp(24px,5.8vw,94px);border-bottom:1px solid var(--line);position:relative;z-index:5}.wordmark{display:flex;flex-direction:column;gap:6px;min-width:0;font-weight:950;font-stretch:condensed;letter-spacing:-.035em;font-size:clamp(18px,2.1vw,27px)}.wordmark small{font-size:8px;letter-spacing:.12em;font-weight:650;color:var(--muted)}.wordmark-dot{color:var(--accent)}.back-button{padding:15px 21px;border:1px solid rgba(236,238,246,.62);font-size:11px;font-weight:850;letter-spacing:.12em;white-space:nowrap;display:inline-flex;gap:14px;align-items:center;justify-content:center;transition:background .2s,color .2s}.back-button:hover{background:var(--white);color:var(--bg)}
.intro{position:relative;overflow:hidden;border-bottom:1px solid var(--line);background:radial-gradient(ellipse at 88% 48%,rgba(92,105,139,.23),transparent 43%),linear-gradient(130deg,#090b11,#141823)}.intro-lines{position:absolute;inset:0;background:repeating-linear-gradient(90deg,transparent 0,transparent 139px,rgba(241,245,255,.035) 140px),repeating-linear-gradient(0deg,transparent 0,transparent 139px,rgba(241,245,255,.035) 140px);mask-image:linear-gradient(90deg,transparent,#000)}.intro-content{position:relative;padding:clamp(88px,10vw,152px) 0 clamp(90px,11vw,145px)}.overline{color:var(--muted);font-size:11px;letter-spacing:.2em;font-weight:800;margin:0}.signal{display:inline-block;width:7px;height:7px;background:var(--accent);border-radius:50%;margin-right:10px;box-shadow:0 0 14px #cdd1db70}.intro h1,.tool-intro h2,.side-panel h3,.admin-header h1{font-family:Impact,"Arial Narrow","Helvetica Neue Condensed",sans-serif;letter-spacing:.015em;font-stretch:condensed}.intro h1{font-size:clamp(82px,11vw,178px);line-height:.83;margin:36px 0 29px;font-weight:900}.intro h1 span{color:transparent;-webkit-text-stroke:1px var(--white)}.intro-lead{font-size:clamp(19px,2.3vw,29px);letter-spacing:-.035em;max-width:740px;line-height:1.4;margin:0 0 14px}.intro-note{font-size:14px;max-width:600px;color:var(--muted);line-height:1.75}
.tool-index{padding-block:55px 95px}.index-heading{display:flex;justify-content:space-between;align-items:end;gap:26px;margin-bottom:24px}.index-heading p:last-child{font-size:13px;color:var(--muted);margin:0;max-width:350px;line-height:1.55}.tool-index-link{display:flex;align-items:center;gap:28px;padding:30px clamp(18px,3vw,40px);border:1px solid rgba(236,238,246,.4);background:linear-gradient(118deg,#171c29,#0c0f17);transition:border-color .22s,transform .22s,background .22s}.tool-index-link:hover{transform:translateY(-2px);border-color:var(--white);background:#1a2030}.index-icon{display:grid;place-items:center;font-size:40px;color:var(--accent);width:65px;flex:none}.tool-link-label{display:flex;flex-direction:column;gap:7px}.tool-link-label strong{font-size:clamp(18px,2.3vw,30px);letter-spacing:.025em;font-weight:850}.tool-link-label small{font-size:13px;color:var(--muted)}.tool-link-arrow{margin-left:auto;font-size:33px;color:var(--accent)}
.tool-section{padding-block:70px 135px;border-top:1px solid var(--line)}.tool-topline{display:flex;justify-content:space-between;align-items:center;gap:15px}.version-tag{font-size:10px;letter-spacing:.16em;color:var(--muted)}.tool-intro{margin:27px 0 56px}.tool-intro h2{font-size:clamp(48px,7.8vw,108px);line-height:.95;margin:0 0 24px;font-weight:900}.tool-intro h2 span{color:var(--accent)}.tool-intro p{max-width:670px;color:#c1c7d2;font-size:15px;line-height:1.8}.recorder-layout{display:grid;grid-template-columns:minmax(0,1.55fr) minmax(290px,.7fr);gap:28px;align-items:start}.recorder-panel{border:1px solid #ffffff37;background:linear-gradient(150deg,#141924,#0b0e15 72%);padding:clamp(20px,3.5vw,49px)}.status-row,.capture-topline{display:flex;align-items:center;justify-content:space-between;gap:20px}.status-row{margin-bottom:45px;padding-bottom:25px;border-bottom:1px solid var(--line)}.status-label,.field-label{font-size:11px;font-weight:800;letter-spacing:.15em;color:#c2c8d3;display:block}.field-label{margin:0 0 14px}.input{width:100%;border:1px solid #717d8d7d;background:#0a0d14;color:var(--white);padding:17px 18px;font-size:15px;border-radius:0;margin-bottom:34px;min-width:0}.input::placeholder{color:#828d9e}.input:focus{border-color:var(--white)}.state-pill{display:inline-flex;align-items:center;gap:7px;padding:9px 12px;white-space:nowrap;font-size:10px;font-weight:850;letter-spacing:.12em;border:1px solid #a5b1be60;color:#ccd2da}.state-pill:before{content:'';width:7px;height:7px;border-radius:50%;background:currentColor}.state-pill.is-on{color:var(--good);border-color:#a5e1bf80}.state-pill.is-off{color:var(--bad);border-color:#e8a3a37d}.capture-block{margin-top:8px}.capture-topline .field-label{margin:0}.timer{font:800 23px ui-monospace,monospace;letter-spacing:.03em;color:var(--white);font-variant-numeric:tabular-nums}.recording-visual{margin:22px 0 19px;border:1px solid var(--line);background:#090b11;min-height:108px;display:flex;align-items:center;justify-content:center;gap:30px;padding:20px;overflow:hidden}.recording-dot{border:2px solid #d48e96;width:24px;height:24px;border-radius:50%;flex:none}.recording-visual.is-recording .recording-dot{background:#e7959f;box-shadow:0 0 0 8px #e7959f23;animation:dot-pulse 1.3s ease-in-out infinite}.waveform{display:flex;align-items:center;gap:5px;height:58px}.waveform i{width:3px;height:calc(10px + (var(--i,1) * 2px));background:var(--accent);opacity:.57;border-radius:5px}.waveform i:nth-child(4n+1){height:17px}.waveform i:nth-child(4n+2){height:39px}.waveform i:nth-child(4n+3){height:28px}.waveform i:nth-child(4n+4){height:49px}.recording-visual.is-recording .waveform i{animation:wave 660ms ease-in-out infinite alternate}.recording-visual.is-recording .waveform i:nth-child(3n+1){animation-delay:-200ms}.recording-visual.is-recording .waveform i:nth-child(3n+2){animation-delay:-430ms}.record-buttons{display:flex;flex-wrap:wrap;gap:10px}.button-primary,.button-outline,.button-quiet,.button-submit{border-radius:0;font-size:11px;font-weight:850;letter-spacing:.12em;padding:17px 19px;display:inline-flex;justify-content:center;align-items:center;gap:11px}.button-primary{background:var(--accent);border:1px solid var(--accent);color:#0a0c13;flex:1}.button-disc{width:10px;height:10px;background:#d04a62;border-radius:50%}.button-outline{border:1px solid #ffffff88;background:none;color:var(--white)}.button-quiet{border:1px solid transparent;background:none;color:#d3d7e0}.button-primary:not(:disabled):hover,.button-submit:not(:disabled):hover{background:var(--white)}.button-outline:not(:disabled):hover{background:#ffffff17}.capture-note,.micro-copy{font-size:12px;line-height:1.7;color:var(--muted)}.capture-note{margin:14px 0 0}.preview-block{border-top:1px solid var(--line);padding-top:28px;margin-top:30px}.preview-block audio{display:block;width:100%;max-width:570px}.submission-row{border-top:1px solid var(--line);margin-top:36px;padding-top:28px}.button-submit{width:100%;background:var(--accent);border:1px solid var(--accent);color:#090b11;justify-content:space-between;font-size:12px;padding:22px}.form-message{color:var(--muted);font-size:13px;line-height:1.55;margin:13px 0 0}.form-message.is-error{color:var(--bad)}.form-message.is-success{color:var(--good)}.side-panel{padding:37px;border:1px solid var(--line);min-width:0}.side-panel h3{font-size:clamp(38px,3.7vw,60px);line-height:1.01;letter-spacing:.02em;margin:28px 0}.side-panel p:not(.overline){font-size:14px;color:#b6beca;line-height:1.8}.side-rule{border-top:1px solid var(--line);margin:31px 0}.back-inline{display:inline-block;margin-top:23px;font-size:11px;letter-spacing:.13em;font-weight:800;border-bottom:1px solid var(--accent);padding-bottom:8px}.site-footer{display:flex;align-items:center;justify-content:space-between;gap:28px;border-top:1px solid var(--line);padding-block:38px 62px;font-size:10px;letter-spacing:.12em;color:var(--muted)}.footer-back{color:var(--white)}
.admin-body{max-width:1100px;margin:0 auto}.admin-header{padding:60px 24px 20px}.admin-header h1{font-size:clamp(50px,7vw,100px);margin:18px 0 10px;line-height:1}.admin-header p:not(.overline){color:var(--muted);line-height:1.6}.admin-main{padding:30px 24px 100px}.admin-card{background:var(--panel);border:1px solid var(--line);padding:30px;margin-bottom:20px}.admin-card h2{font-size:24px;letter-spacing:-.02em}.admin-row{display:flex;flex-wrap:wrap;align-items:center;gap:12px}.admin-row .input{margin:0;flex:1;min-width:220px}.admin-row .button-outline{flex:none}.admin-info{font-size:13px;color:var(--muted);line-height:1.6}.admin-list{list-style:none;margin:16px 0 0;padding:0}.admin-list li{border-top:1px solid var(--line);padding:16px 0;display:flex;justify-content:space-between;gap:14px;align-items:center}.admin-list strong{font-size:12px;overflow-wrap:anywhere}.admin-list small{display:block;font-size:11px;color:var(--muted);margin-top:5px}.admin-actions{display:flex;gap:7px;flex:none}.admin-actions button{background:none;border:1px solid var(--line);color:var(--white);font-size:11px;padding:10px 12px}.admin-actions button:hover{border-color:white}.admin-actions button.is-danger{color:var(--bad)}.admin-error{color:var(--bad)}.admin-success{color:var(--good)}
@keyframes dot-pulse{50%{box-shadow:0 0 0 14px #e7959f09}}@keyframes wave{to{height:12px;opacity:1}}
@media(max-width:950px){.recorder-layout{grid-template-columns:1fr}.side-panel{max-width:none}.side-panel h3{font-size:50px}.tool-section{padding-bottom:90px}}@media(max-width:620px){.content-wrap{width:min(100% - 36px,1260px)}.site-header{padding:18px;gap:13px;flex-wrap:wrap}.wordmark{font-size:21px}.wordmark small{font-size:7px}.site-header .back-button{width:100%}.intro-content{padding:86px 0 94px}.intro h1{font-size:clamp(71px,17.5vw,105px)}.intro-lead{font-size:19px}.tool-index{padding:45px 0 75px}.index-heading{display:block}.index-heading p:last-child{margin-top:14px}.tool-index-link{gap:11px;padding:22px 15px}.index-icon{font-size:30px;width:36px}.tool-link-label strong{font-size:16px}.tool-link-label small{font-size:11px}.tool-link-arrow{font-size:23px}.tool-intro h2{font-size:clamp(43px,10vw,65px);overflow-wrap:anywhere}.tool-intro{margin-bottom:32px}.recorder-panel{padding:20px 17px}.status-row{flex-wrap:wrap;gap:10px;margin-bottom:34px}.record-buttons .button-primary{flex-basis:100%}.record-buttons .button-outline,.record-buttons .button-quiet{flex:1}.side-panel{padding:26px}.side-panel h3{font-size:45px}.site-footer{flex-direction:column;align-items:stretch}.site-footer .back-button{width:100%}.admin-list li{flex-direction:column;align-items:stretch}.admin-actions{justify-content:flex-start}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.recording-visual.is-recording .waveform i,.recording-visual.is-recording .recording-dot{animation:none}.tool-index-link{transition:none}}

/* Identidade PMPG: símbolo original fornecido para Community Tools. */
.site-header .pmpg-wordmark{display:inline-flex;align-items:center;justify-content:flex-start;gap:0;line-height:0;flex-shrink:0;letter-spacing:normal}
.site-header .pmpg-brand-logo{display:block;width:214px;height:auto;max-width:100%;object-fit:contain}
@media(max-width:620px){.site-header .pmpg-brand-logo{width:190px}}


/* ================================================================
   PMPG / Community Tools — alinhamento visual com a homepage V04.7
   Apenas tipografia pequena, cabeçalho, logotipo e rodape.
   Fonte de referencia: pmpg-website/css/style.css (header/footer).
   ================================================================ */

/* A homepage utiliza DM Sans em todo o texto de interface. */
body { font-family: 'DM Sans', Arial, sans-serif; }

/* Mesmo enquadramento do cabeçalho da homepage, desktop. */
.site-header {
  height: 86px;
  min-height: 86px;
  padding: 0 clamp(20px, 5vw, 88px);
  border-bottom: 1px solid #ffffff16;
}
.site-header .pmpg-brand-logo {
  display: block;
  width: auto;
  height: auto;
  max-width: min(190px, 28vw);
  max-height: 48px;
  object-fit: contain;
  object-position: left center;
}
.site-header .back-button {
  padding: 12px 15px;
  border-color: #ffffff2a;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .15em;
}

/* Mesma pequena tipografia editorial da homepage. */
.overline {
  color: #aaaeb8;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .24em;
}

/* Rodape: fonte, cor, espacamento e medidas da homepage. */
.site-footer {
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 34px clamp(20px, 7vw, 120px);
  color: #7e8791;
  font-size: 10px;
  letter-spacing: .12em;
}
.site-footer .footer-back {
  width: auto;
  border: 0;
  padding: 0;
  color: inherit;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .12em;
}
.site-footer .footer-back:hover {
  background: transparent;
  color: #f0f0ed;
}

/* Mobile: mesmas dimensoes PMPG/header (130 x 38 e 70px). */
@media (max-width: 620px) {
  .site-header {
    flex-wrap: nowrap;
    gap: 12px;
    padding: 0 20px;
  }
  .site-header .back-button {
    width: auto;
    flex: none;
  }
  .site-footer .footer-back { width: auto; }
}
@media (max-width: 580px) {
  .site-header {
    height: 70px;
    min-height: 70px;
  }
  .site-header .pmpg-brand-logo {
    max-width: 130px;
    max-height: 38px;
  }
  .site-header .back-button {
    padding: 10px 8px;
    gap: 6px;
    font-size: 9px;
    letter-spacing: .08em;
  }
}


/* Community Tool 001: lettering original PeeEmPeeGee no titulo, sem alterar restantes seccoes. */
.tool-intro #recorder-title .recorder-lettering {
  display: block;
  width: auto;
  height: clamp(76px, 9.7vw, 135px);
  max-width: 100%;
  object-fit: contain;
  object-position: left center;
  margin: 0 0 2px;
}
@media (max-width: 620px) {
  .tool-intro #recorder-title .recorder-lettering {
    height: clamp(65px, 17vw, 88px);
  }
}