:root{
    /* Palette: USPS x Pantone 250th-anniversary colors.
       Source: https://news.usps.com/2025/08/26/these-colors-paint-the-history-of-usps/
       and https://www.pantone.com/usps250
       Hex values sampled from the swatches on the Pantone page. */
    --usps-parchment-white:#FFFDEE;
    --usps-pony-express:#5F443D;
    --usps-airmail-red:#DB3B39;
    --usps-mr-zip-orange:#E16E39;
    --usps-carrier-red:#6E131A;
    --usps-gold-seal:#C58C2F;
    --usps-blue:#1C4883;

    /* Derived tints/shades of USPS Blue, for panels, inputs and lines */
    --ink-deep:#122F55;
    --ink-soft:#163A69;
    --line-blue:#4E76AD;

    --ink:var(--usps-blue);
    --paper:var(--usps-parchment-white);
    --paper-line:#DCD4C7;
    --paper-shadow:#0F2747;
    --stamp:var(--usps-airmail-red);
    --stamp-dark:var(--usps-carrier-red);
    --ok:var(--usps-gold-seal);
    --warn:var(--usps-mr-zip-orange);
    --pony:var(--usps-pony-express);
    --text-ink:#211C12;
    --text-paper:#FFFDEE;
    --text-dim:#D3DDEE;
    --muted:#B9C8E2;
    --mono: "SFMono-Regular", ui-monospace, Menlo, Consolas, "Liberation Mono", monospace;
    --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  }
  *{box-sizing:border-box;}
  html,body{margin:0;padding:0;}
  html{scroll-padding-top: env(safe-area-inset-top,0px);}
  body{
    background:var(--ink);
    color:var(--text-paper);
    font-family:var(--sans);
    min-height:100%;
    padding-top: env(safe-area-inset-top,0px);
    padding-bottom: env(safe-area-inset-bottom,0px);
    line-height:1.5;
  }
  a{color:inherit;}

  .wrap{
    max-width:640px;
    margin:0 auto;
    padding:40px 20px 80px;
  }

  header{
    display:flex;
    align-items:baseline;
    justify-content:space-between;
    gap:16px;
    margin-bottom:8px;
    border-bottom:1px solid var(--ink-soft);
    padding-bottom:18px;
  }
  header h1{
    font-size:22px;
    letter-spacing:0.01em;
    margin:0;
    font-weight:700;
  }
  header h1 .logo-bird{margin-left:8px;font-weight:400;}
  header .tag{
    font-size:12px;
    color:var(--muted);
    text-align:right;
  }

  .intro{
    font-size:15px;
    line-height:1.6;
    color:var(--text-dim);
    margin:20px 0 0;
    max-width:56ch;
  }

  .privacy-note{
    display:flex;
    gap:10px;
    align-items:flex-start;
    background:var(--ink-soft);
    border:1px dashed var(--line-blue);
    border-radius:3px;
    padding:12px 14px;
    margin:20px 0 32px;
    font-size:13px;
    color:var(--text-dim);
  }
  .privacy-note svg{flex:none;margin-top:2px;}
  .privacy-note strong{color:var(--text-paper);}
  .privacy-icon{
    flex:none;
    font-size:16px;
    line-height:1;
    margin-top:1px;
  }

  section{margin-bottom:36px;}
  section h2{
    font-size:13px;
    text-transform:none;
    letter-spacing:0.02em;
    color:var(--text-dim);
    margin:0 0 10px;
    font-weight:600;
  }

  textarea{
    width:100%;
    min-height:120px;
    background:var(--paper);
    color:var(--text-ink);
    border:1px solid var(--paper-line);
    border-radius:2px;
    padding:14px 16px;
    font-family:var(--mono);
    font-size:14px;
    line-height:1.6;
    resize:vertical;
  }
  textarea:focus, input:focus, button:focus, a:focus{
    outline:2px solid var(--text-paper);
    outline-offset:2px;
  }
  textarea::placeholder{color:#8a8470;}

  .btnrow{display:flex;gap:10px;margin-top:12px;flex-wrap:wrap;}
  button{
    font-family:var(--sans);
    font-size:14px;
    font-weight:600;
    cursor:pointer;
    border-radius:2px;
    padding:10px 18px;
    border:1px solid transparent;
    transition:transform .06s ease;
  }
  button:active{transform:translateY(1px);}
  .btn-primary{
    background:var(--stamp);
    color:var(--text-paper);
    border-color:var(--stamp-dark);
  }
  .btn-primary:hover{background:var(--stamp-dark);}
  .btn-secondary{
    background:transparent;
    color:var(--text-paper);
    border-color:var(--line-blue);
  }
  .btn-secondary:hover{border-color:var(--text-paper);}
  .btn-ghost{
    background:transparent;
    color:var(--text-dim);
    border:none;
    padding:6px 4px;
    font-size:13px;
    text-decoration:underline;
  }

  .fields{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:12px;
    background:var(--ink-soft);
    border:1px solid var(--line-blue);
    border-radius:3px;
    padding:16px;
  }
  .fields .full{grid-column:1 / -1;}
  .field label{
    display:block;
    font-size:11px;
    color:var(--muted);
    margin-bottom:4px;
  }
  .field input{
    width:100%;
    background:var(--ink-deep);
    border:1px solid var(--line-blue);
    color:var(--text-paper);
    font-family:var(--mono);
    font-size:14px;
    padding:8px 10px;
    border-radius:2px;
  }
  .field input:focus{outline:2px solid var(--text-paper);outline-offset:0;}
  .three{grid-template-columns:2fr 1fr 1.3fr;}
  .fields.three .field{grid-column:span 1;}

  .card{
    background:var(--paper);
    color:var(--text-ink);
    border-radius:2px;
    padding:22px 24px;
    box-shadow:6px 6px 0 var(--paper-shadow);
    border:1px solid var(--paper-line);
  }
  .card .addr-block{
    font-family:var(--mono);
    font-size:16px;
    line-height:1.7;
    white-space:pre-wrap;
    letter-spacing:0.01em;
  }
  .card-foot{
    display:flex;
    align-items:center;
    justify-content:space-between;
    flex-wrap:wrap;
    gap:10px;
    margin-top:16px;
    padding-top:14px;
    border-top:1px dashed var(--paper-line);
  }
  .status{
    display:flex;
    align-items:center;
    gap:8px;
    font-size:13px;
  }
  .status.ok{color:var(--pony);}
  .status.warn{color:var(--stamp-dark);}
  .status .mark{
    width:18px;height:18px;
    border-radius:50%;
    display:inline-flex;align-items:center;justify-content:center;
    font-size:12px;
    color:var(--text-ink);
    flex:none;
  }
  .status.ok .mark{background:var(--ok);}
  .status.warn .mark{background:var(--warn);}

  .issues{
    margin:14px 0 0;
    padding:0;
    list-style:none;
    font-size:13px;
    color:var(--stamp-dark);
  }
  .issues li{
    padding:4px 0 4px 18px;
    position:relative;
  }
  .issues li::before{
    content:"—";
    position:absolute;left:0;
  }

  .copybtn{
    background:var(--ink);
    color:var(--text-paper);
    border:1px solid var(--ink);
    padding:7px 14px;
    font-size:13px;
  }
  .copybtn:hover{background:var(--ink-soft);}
  .copybtn.copied{background:var(--ok);border-color:var(--ok);color:var(--text-ink);}
  .card :focus{outline-color:var(--stamp-dark);}

  .card-actions{
    display:flex;
    align-items:center;
    gap:16px;
  }
  .verifylink{
    font-size:13px;
    color:var(--stamp-dark);
    text-decoration:underline;
    white-space:nowrap;
  }
  .verifylink:hover{color:var(--stamp);}

  .draft{
    background:var(--paper);
    color:var(--text-ink);
    border-radius:2px;
    border:1px dashed var(--paper-line);
    padding:20px 22px;
  }
  .draft textarea{
    background:transparent;
    border:none;
    padding:0;
    font-family:var(--sans);
    font-size:14.5px;
    min-height:140px;
  }
  .draft textarea:focus{outline:none;}

  .hidden{display:none !important;}

  footer{
    margin-top:56px;
    padding-top:20px;
    border-top:1px solid var(--ink-soft);
    font-size:12px;
    color:var(--muted);
  }
  footer a{color:var(--text-paper);}

  @media (max-width:520px){
    .fields{grid-template-columns:1fr;}
    .fields.three{grid-template-columns:1fr;}
    .card{padding:18px;}
  }

  @media (prefers-reduced-motion: reduce){
    *{transition:none !important;}
  }