:root{
    --ink: #16241d;
    --paper: #f6f1e4;
    --paper-dim: #ece4d0;
    --bg-deep: #0e1f19;
    --bg-deep-2: #142b22;
    --brass: #b7913f;
    --brass-light: #d9b76a;
    --verified: #2f6b4f;
    --verified-light: #e4efe6;
    --alert: #a23b34;
    --alert-light: #f4e2df;
    --line: rgba(22,36,29,0.14);
    --shadow: 0 30px 60px -25px rgba(0,0,0,0.55);
  }

  *{ box-sizing:border-box; }

  html,body{
    margin:0; padding:0; min-height:100vh;
    background:
      radial-gradient(1100px 700px at 15% -10%, #1c3a2d 0%, transparent 60%),
      radial-gradient(900px 600px at 110% 10%, #1a3327 0%, transparent 55%),
      linear-gradient(180deg, var(--bg-deep) 0%, var(--bg-deep-2) 100%);
    color: var(--paper);
    font-family: 'Inter', sans-serif;
  }

  .bg-texture{
    position:fixed; inset:0; pointer-events:none; z-index:0; opacity:0.5;
    background-image:
      repeating-linear-gradient(0deg, rgba(255,255,255,0.02) 0px, rgba(255,255,255,0.02) 1px, transparent 1px, transparent 3px);
  }

  .wrap{
    position:relative; z-index:1;
    max-width: 720px;
    margin: 0 auto;
    padding: 64px 24px 90px;
  }

  .eyebrow{
    display:flex; align-items:center; justify-content:center; gap:10px;
    font-family:'IBM Plex Mono', monospace;
    font-size: 12px; letter-spacing: 0.22em; text-transform:uppercase;
    color: var(--brass-light);
    margin-bottom: 18px;
  }
  .eyebrow::before, .eyebrow::after{
    content:""; height:1px; width:28px; background: var(--brass-light); opacity:0.6;
  }

  h1{
    font-family:'Fraunces', serif;
    font-weight:600;
    font-size: clamp(32px, 5.4vw, 50px);
    line-height: 1.08;
    text-align:center;
    margin: 0 0 14px;
    color: var(--paper);
    letter-spacing: -0.01em;
  }
  h1 em{
    font-style: italic;
    color: var(--brass-light);
  }

  .subtitle{
    text-align:center;
    max-width: 480px;
    margin: 0 auto 44px;
    color: rgba(246,241,228,0.68);
    font-size: 15.5px;
    line-height:1.6;
  }

  /* --- Scanner slot search --- */
  .scanner{
    background: linear-gradient(180deg, rgba(255,255,255,0.05), rgba(255,255,255,0.02));
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: 20px;
    padding: 22px;
    backdrop-filter: blur(6px);
  }

  .scanner-label{
    font-family:'IBM Plex Mono', monospace;
    font-size: 11px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: rgba(246,241,228,0.55);
    margin-bottom: 10px;
    padding-left: 4px;
  }

  .input-row{
    display:flex;
    align-items:stretch;
    gap: 10px;
  }

  .phone-field{
    flex:1;
    display:flex;
    align-items:center;
    gap: 10px;
    background: var(--paper);
    border-radius: 14px;
    padding: 4px 4px 4px 16px;
    border: 1px solid rgba(0,0,0,0.05);
  }

  .cc{
    font-family:'IBM Plex Mono', monospace;
    font-weight:600;
    color: var(--ink);
    font-size: 16px;
    padding-right: 10px;
    border-right: 1px solid var(--line);
    white-space:nowrap;
  }

  #phoneInput{
    flex:1;
    border:none;
    outline:none;
    background:transparent;
    font-family:'IBM Plex Mono', monospace;
    font-size: 18px;
    letter-spacing: 0.04em;
    color: var(--ink);
    padding: 14px 8px;
    min-width: 0;
  }
  #phoneInput::placeholder{ color:#8b8474; letter-spacing:0.03em; }

  #searchBtn{
    border:none;
    cursor:pointer;
    background: linear-gradient(180deg, var(--brass-light), var(--brass));
    color: #211a08;
    font-family:'Inter', sans-serif;
    font-weight:700;
    font-size: 14px;
    letter-spacing:0.02em;
    border-radius: 10px;
    padding: 0 22px;
    margin: 4px;
    display:flex; align-items:center; gap:8px;
    transition: transform 0.15s ease, filter 0.15s ease;
  }
  #searchBtn:hover{ filter:brightness(1.06); transform: translateY(-1px); }
  #searchBtn:active{ transform: translateY(0px) scale(0.98); }

  .hint{
    margin-top: 12px;
    font-size: 12.5px;
    color: rgba(250, 247, 238, 0.45);
    padding-left: 4px;
    text-align: center;
  }

  /* --- Result area --- */
  #result{ margin-top: 40px; }

  .credential{
    position: relative;
    background: var(--paper);
    color: var(--ink);
    border-radius: 22px;
    overflow: hidden;
    box-shadow: var(--shadow);
    animation: cardIn 0.5s cubic-bezier(.2,.9,.25,1) both;
    border: 1px solid rgba(0,0,0,0.06);
  }

  @keyframes cardIn{
    from{ opacity:0; transform: translateY(14px) scale(0.985); }
    to{ opacity:1; transform: translateY(0) scale(1); }
  }

  .credential-top{
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding: 16px 22px;
    background: linear-gradient(180deg, #efe7d3, var(--paper-dim));
    border-bottom: 1px dashed rgba(22,36,29,0.2);
  }

  .credential-brand{
    font-family:'IBM Plex Mono', monospace;
    font-size: 11px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: #6b6250;
  }

  .status-chip{
    font-family:'Inter', sans-serif;
    font-weight:700;
    font-size: 12px;
    letter-spacing: 0.04em;
    padding: 6px 12px;
    border-radius: 999px;
    display:flex; align-items:center; gap:6px;
  }
  .status-chip.ok{ background: var(--verified-light); color: var(--verified); }
  .status-chip.no{ background: var(--alert-light); color: var(--alert); }

  .credential-body{
    display:flex;
    gap: 22px;
    padding: 26px 24px 28px;
    align-items:center;
  }

  .photo-wrap{
    position:relative;
    width: 108px; height: 108px;
    flex-shrink:0;
    border-radius: 16px;
    overflow:hidden;
    background: #ded4b8;
    border: 3px solid var(--paper);
    box-shadow: 0 0 0 1px rgba(22,36,29,0.14), 0 10px 18px -10px rgba(0,0,0,0.35);
  }
  .photo-wrap img{
    width:100%; height:100%; object-fit:cover; display:block;
  }
  .photo-fallback{
    width:100%; height:100%;
    display:flex; align-items:center; justify-content:center;
    font-family:'Fraunces', serif;
    font-size: 34px; font-weight:600;
    color: #6b6250;
    background: linear-gradient(160deg, #e6dcc0, #d8cca9);
  }

  .seal-badge{
    position:absolute; bottom:-6px; right:-6px;
    width: 34px; height:34px;
    border-radius:50%;
    background: var(--verified);
    display:flex; align-items:center; justify-content:center;
    box-shadow: 0 3px 8px rgba(0,0,0,0.25);
    border: 2px solid var(--paper);
  }
  .seal-badge svg{ width:16px; height:16px; }

  .info-block{ min-width:0; }
  .info-eyebrow{
    font-family:'IBM Plex Mono', monospace;
    font-size: 10.5px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: #8b8262;
    margin-bottom: 4px;
  }
  .info-name{
    font-family:'Fraunces', serif;
    font-weight:600;
    font-size: 24px;
    line-height:1.15;
    margin: 0 0 8px;
    color: var(--ink);
  }
  .info-phone{
    font-family:'IBM Plex Mono', monospace;
    font-size: 14px;
    color: #55503f;
    display:flex; align-items:center; gap:6px;
  }

  .credential-foot{
    padding: 12px 24px 18px;
    font-size: 11.5px;
    color: #8b8262;
    border-top: 1px dashed rgba(22,36,29,0.15);
    font-family:'IBM Plex Mono', monospace;
    letter-spacing:0.02em;
  }

  /* --- Not found state --- */
  .not-found{
    background: linear-gradient(180deg, rgba(112, 11, 4, 0.925), rgba(162, 59, 52, 0.281));
    border: 1px solid rgb(204, 17, 4);
    border-radius: 20px;
    padding: 36px 6px;
    display:flex;
    gap:12px;
    align-items:center;
    animation: cardIn 0.4s ease both;
    flex-direction: column;
    justify-content: center;
    align-content: center;
    flex-wrap: wrap;
  }
  .not-found .icon{
    flex-shrink:0;
    width: 46px; height:46px;
    border-radius:50%;
    background: var(--alert);
    display:flex; align-items:center; justify-content:center;
  }
  .not-found .icon svg{ width:22px; height:22px; }
  .not-found h3{
    font-family:'Fraunces', serif;
    font-size: 20px;
    margin: 2px 0 6px;
    color: #ffe9e6;
  }
  .not-found p{
    margin:0;
    font-size: 14px;
    line-height:1.55;
    color: rgba(255,233,230,0.78);
  }
  .not-found .num-echo{
    font-family:'IBM Plex Mono', monospace;
    color: #ffcfc9;
  }

  .empty-state, .error-state{
    text-align:center;
    padding: 30px 10px;
    color: rgba(246, 241, 228, 0.74);
    font-size: 13.5px;
    font-family:'IBM Plex Mono', monospace;
  }

  footer{
    margin-top: 56px;
    text-align:center;
    font-family:'IBM Plex Mono', monospace;
    font-size: 11px;
    letter-spacing:0.08em;
    color: rgba(246, 241, 228, 0.774);
  }

  @media (max-width: 480px){
    .input-row{ flex-direction:column; }
    .cc{ border-right:none; border-bottom:1px solid var(--line); padding: 8px 0; }
    #searchBtn{ margin:8px 0 4px; padding:14px 22px; justify-content:center; }
    .credential-body{ flex-direction:column; text-align:center; }
    .info-phone{ justify-content:center; }
  }

  @media (prefers-reduced-motion: reduce){
    .credential, .not-found{ animation:none; }
  }