:root{font:16px/1.5 system-ui,-apple-system,Segoe UI,sans-serif;color:#18304d;background:#f4f7fb}*{box-sizing:border-box}body{margin:0}button,input,select{font:inherit}button{cursor:pointer;border:1px solid #cbd6e3;border-radius:9px;background:#fff;color:#173552;padding:.65rem 1rem;font-weight:600}button:hover{background:#eef4fa}button:disabled{opacity:.48;cursor:default}.primary{background:#123d70;color:#fff;border-color:#123d70}.primary:hover{background:#0d315b}.quiet{background:transparent;border:0}.danger{color:#a12d35;border-color:#e5b8bc}h1,h2,p{margin-top:0}h1{font-size:2rem;line-height:1.2;margin-bottom:.4rem}h2{font-size:1.15rem;margin-bottom:.3rem}p{color:#60748a}label{display:grid;gap:.4rem;color:#29445f;font-size:.89rem;font-weight:600}input,select{width:100%;border:1px solid #cbd6e3;border-radius:9px;background:#fff;color:#18304d;padding:.68rem .8rem;outline:none}input:focus,select:focus{border-color:#2473c3;box-shadow:0 0 0 3px #2473c322}.brand{font-weight:750;font-size:1.08rem;color:#123d70;display:flex;align-items:center;gap:.65rem}.brand-icon{display:grid;place-items:center;width:2rem;height:2rem;border-radius:8px;background:#123d70;color:#fff;font-size:1.25rem}.topbar{height:68px;background:#fff;border-bottom:1px solid #dce4ed;display:flex;align-items:center;justify-content:space-between;padding:0 max(2rem,calc((100vw - 1120px)/2))}.layout{max-width:1120px;margin:0 auto;padding:2rem}.page-heading{display:flex;justify-content:space-between;align-items:center;gap:1rem;margin-bottom:1.7rem}.page-heading p{margin-bottom:0}.eyebrow{color:#416c99;font-size:.72rem;font-weight:800;letter-spacing:.13em;margin-bottom:.45rem}.count{white-space:nowrap;border-radius:100px;background:#e8f0f9;color:#123d70;padding:.5rem 1rem;font-size:.85rem;font-weight:700}.card{background:#fff;border:1px solid #dce4ed;border-radius:14px;box-shadow:0 6px 22px #233b5510;padding:1.5rem}.create-card{display:flex;justify-content:space-between;gap:2rem;align-items:end;margin-bottom:1.2rem}.create-card p{margin-bottom:0}.create-card form{display:flex;align-items:end;gap:.65rem}.create-card input{width:100px}.list-card{min-height:350px}.section-title{margin-bottom:1.2rem}.section-title p{margin-bottom:0}.filters{display:flex;align-items:end;gap:.7rem;margin-bottom:1.25rem}.search-label{flex:1}.filters label:not(.search-label){width:165px}.table-wrap{overflow-x:auto}table{width:100%;border-collapse:collapse;text-align:left}th{font-size:.75rem;letter-spacing:.04em;text-transform:uppercase;color:#71849a;background:#f8fafc}th,td{padding:.8rem .75rem;border-bottom:1px solid #e8edf3}td{color:#36516c}td strong{color:#18304d}.strong-number{font-weight:700}.badge{display:inline-block;padding:.25rem .55rem;border-radius:100px;font-size:.76rem;font-weight:750}.badge.pending{background:#fff3d7;color:#8a5a00}.badge.active{background:#def4e9;color:#176341}.badge.paused{background:#e9edf2;color:#52677c}.pages{display:flex;align-items:center;justify-content:flex-end;gap:.8rem;margin-top:1.2rem;color:#60748a;font-size:.85rem}.empty{text-align:center;padding:2rem}.auth{min-height:100vh;display:grid;place-content:center;gap:1.6rem;padding:1rem}.auth>.brand{justify-content:center}.auth-card{width:min(420px,calc(100vw - 2rem));padding:2rem}.auth-card form{display:grid;gap:1rem}.auth-card p{margin-bottom:.5rem}.message{position:fixed;z-index:5;top:1rem;left:50%;transform:translateX(-50%);max-width:min(92vw,560px);padding:.75rem 1rem;border-radius:10px;background:#e5f5eb;color:#145c39;box-shadow:0 8px 28px #0002}.message.error{background:#ffeaec;color:#8f2731}dialog{width:min(860px,calc(100vw - 2rem));max-height:90vh;border:1px solid #dce4ed;border-radius:16px;padding:0;box-shadow:0 20px 80px #152a4555;color:#18304d}dialog::backdrop{background:#0b1d35aa}.dialog-head{display:flex;align-items:start;justify-content:space-between;padding:1.4rem 1.6rem;border-bottom:1px solid #e5ebf1}.dialog-head h2{font-size:1.5rem}.icon-button{font-size:1.5rem;border:0;padding:.1rem .5rem}.dialog-body{display:grid;grid-template-columns:1fr 1fr;gap:2rem;padding:1.6rem}.qr-box{display:grid;place-items:center;border:1px solid #e2eaf2;border-radius:12px;background:#fff;padding:1rem}.qr-box img{width:min(100%,270px);aspect-ratio:1}.url{overflow-wrap:anywhere;color:#416079;font-size:.8rem;margin:.8rem 0}.button-row{display:flex;flex-wrap:wrap;gap:.5rem}.button-row button{font-size:.82rem;padding:.5rem .65rem}.edit-side form{display:grid;gap:1rem;margin:1.2rem 0}.hint{font-size:.85rem;margin-top:.8rem}.message[hidden],.auth[hidden],#app[hidden],form[hidden],#empty[hidden],#toggle-status[hidden]{display:none}.public-state{background:#fff;border:1px solid #dce4ed;border-radius:14px;box-shadow:0 8px 30px #172e4a18;max-width:28rem;margin:18vh auto;padding:2rem}.public-state h1{font-size:1.3rem}@media(max-width:700px){.layout{padding:1.1rem}.topbar{padding:0 1rem}.page-heading{align-items:start;flex-direction:column}.create-card,.create-card form,.filters{display:grid}.create-card{gap:1rem}.create-card form{grid-template-columns:1fr auto;align-items:end}.create-card input{width:100%}.filters{grid-template-columns:1fr 1fr}.search-label{grid-column:1/-1}.filters label:not(.search-label){width:auto}.dialog-body{grid-template-columns:1fr}.card{padding:1rem}th,td{white-space:nowrap}}

/* Controles confortáveis no iPhone: 16px evita o zoom automático do Safari. */
input, select { font-size: 16px; }
button { min-height: 44px; touch-action: manipulation; }
button:focus-visible, input:focus-visible, select:focus-visible {
  outline: 3px solid #65a6e8;
  outline-offset: 2px;
}
.place-hint {
  margin: -.35rem 0 0;
  color: #60748a;
  font-size: .88rem;
  line-height: 1.45;
}
.place-hint code {
  background: #edf3f9;
  border-radius: 4px;
  color: #214c78;
  padding: .1rem .25rem;
  overflow-wrap: anywhere;
}
.advanced-link {
  border: 1px solid #dce4ed;
  border-radius: 10px;
  background: #f8fafc;
}
.advanced-link summary {
  display: list-item;
  cursor: pointer;
  margin: 0 .8rem;
  padding: .7rem 0;
  color: #29445f;
  font-size: .9rem;
  font-weight: 650;
}
.advanced-link[open] summary { border-bottom: 1px solid #dce4ed; }
.advanced-link label { padding: .8rem; }
.advanced-link summary:focus-visible {
  outline: 3px solid #65a6e8;
  outline-offset: 2px;
}

@media (max-width: 700px) {
  .topbar {
    height: auto;
    min-height: 64px;
    padding: .65rem max(1rem, env(safe-area-inset-right))
             .65rem max(1rem, env(safe-area-inset-left));
  }
  .brand { font-size: 1rem; }
  .layout {
    padding: 1rem max(1rem, env(safe-area-inset-right))
             calc(2rem + env(safe-area-inset-bottom))
             max(1rem, env(safe-area-inset-left));
  }
  .page-heading { gap: .8rem; margin-bottom: 1rem; }
  .page-heading h1 { font-size: 1.7rem; }
  .page-heading p { font-size: .94rem; }
  .card { padding: 1rem; border-radius: 15px; }
  .create-card { display: grid; gap: 1rem; }
  .create-card form { display: grid; grid-template-columns: 1fr; width: 100%; }
  .create-card input, .create-card button { width: 100%; }
  .filters { display: grid; grid-template-columns: minmax(0, 1fr) auto; }
  .filters .search-label { grid-column: 1 / -1; }
  .filters button { min-width: 112px; }
  .list-card { min-height: 0; }
  .table-wrap { overflow: visible; }
  table, tbody { display: block; width: 100%; }
  thead { display: none; }
  tbody { display: grid; gap: .75rem; }
  tbody tr {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: .45rem .6rem;
    border: 1px solid #dce4ed;
    border-radius: 12px;
    padding: 1rem;
    background: #fff;
  }
  tbody td {
    display: block;
    min-width: 0;
    padding: 0;
    border: 0;
    white-space: normal;
    overflow-wrap: anywhere;
  }
  tbody td:nth-child(1) {
    grid-column: 1;
    grid-row: 1;
    font-size: 1.15rem;
  }
  tbody td:nth-child(2) {
    grid-column: 1 / -1;
    grid-row: 2;
    color: #18304d;
    font-weight: 650;
  }
  tbody td:nth-child(3) {
    grid-column: 2;
    grid-row: 1;
    align-self: center;
  }
  tbody td:nth-child(4) {
    grid-column: 1 / -1;
    grid-row: 3;
    color: #60748a;
    font-size: .85rem;
  }
  tbody td:nth-child(4)::before { content: "Criado em "; }
  tbody td:nth-child(5) {
    grid-column: 1 / -1;
    grid-row: 4;
    margin-top: .3rem;
  }
  tbody td:nth-child(5) button { width: 100%; }
  .pages { justify-content: space-between; gap: .5rem; }
  .pages button { padding: .5rem .65rem; }
  .message {
    top: calc(.6rem + env(safe-area-inset-top));
    width: calc(100vw - 1rem);
    max-width: 560px;
  }
  .auth {
    min-height: 100dvh;
    padding: max(1rem, env(safe-area-inset-top))
             1rem max(1rem, env(safe-area-inset-bottom));
  }
  .auth-card { width: min(100%, 420px); padding: 1.25rem; }
  dialog {
    inset: 0;
    width: 100vw;
    max-width: none;
    height: 100dvh;
    max-height: 100dvh;
    margin: 0;
    border: 0;
    border-radius: 0;
    overflow-y: auto;
  }
  .dialog-head {
    position: sticky;
    top: 0;
    z-index: 1;
    align-items: center;
    background: #fff;
    padding: calc(.8rem + env(safe-area-inset-top)) 1rem .8rem;
  }
  .dialog-head h2 { font-size: 1.25rem; }
  .icon-button { min-width: 44px; }
  .dialog-body {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    padding: 1rem 1rem calc(1.5rem + env(safe-area-inset-bottom));
  }
  .edit-side { order: 1; }
  .qr-side { order: 2; }
  .edit-side form { margin: 1rem 0; }
  .edit-side form .primary, #toggle-status { width: 100%; }
  .qr-box img { width: min(100%, 230px); }
  .url {
    margin: .8rem 0;
    padding: .7rem;
    border-radius: 9px;
    background: #f4f7fb;
    user-select: all;
  }
  .button-row {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .6rem;
  }
  .button-row button {
    min-width: 0;
    padding: .6rem .4rem;
    font-size: .92rem;
  }
  .button-row button:first-child { grid-column: 1 / -1; }
  .public-state { margin: 10vh 1rem; padding: 1.25rem; }
}