:root { --pr-primary:#2235DF; --pr-ok:#038600; --pr-warn:#F57B23; --pr-err:#A70027; --pr-muted:#e6e8ee; }

  .pr-card {
    max-width: 440px; margin: 15% auto 0px auto; background:#fff; border-radius:16px; 
    box-shadow:0 12px 30px rgba(0,0,0,.08); padding:28px 26px;
  }
  .pr-title { font-weight:700; font-size:28px; margin:6px 0 2px; text-align:center; }
  .pr-sub  { color:#64748b; text-align:center; margin-bottom:22px; }

  /* Inputs */
  .pr-pw-wrap { position:relative; }
  .pr-valid-icon {
    position:absolute; right:12px; top:50%; transform:translateY(-50%);
    width:22px; height:22px; border-radius:50%;
    display:flex; align-items:center; justify-content:center;
    font-size:14px; color:#fff;
  }
  .pr-input.is-valid + .pr-valid-icon {
    background:var(--pr-ok); border:2px solid var(--pr-ok);
  }
  .pr-input.is-valid + .pr-valid-icon::before { content:"✓"; line-height: normal;}

  .pr-input.is-invalid + .pr-valid-icon {
    background:var(--pr-err); border:2px solid var(--pr-err);
  }
  .pr-input.is-invalid + .pr-valid-icon::before { content:"✕"; line-height: normal; }

  .pr-input { height:44px; border-radius:10px; width:100%; }
  .pr-input:focus { border-color:var(--pr-primary); box-shadow:0 0 0 3px rgba(34,53,223,.15); }

  /* Strength meter */
  .pr-strength-row { display:flex; align-items:center; gap:10px; margin-top:8px; }
  .pr-strength-bars { display:flex; gap:6px; flex:1; }
  .pr-strength-bars .pr-seg {
    height:8px; flex:1; background:#edf1f7; border-radius:6px; transition:background .2s;
  }
  .pr-strength-label { font-size:12px; color:#64748b; min-width:60px; text-align:right; }
  .pr-seg.fill-1 { background:#A70027; }
  .pr-seg.fill-2 { background:#DB0033; }
  .pr-seg.fill-3 { background:#F57B23; }
  .pr-seg.fill-4 { background:#F8C513; }
  .pr-seg.fill-5 { background:#038600; }

  /* Info bubble + tooltip */
  .pr-info-bubble {
    width:18px; height:18px; border-radius:50%; background:#fff; 
    border:1.5px solid #cbd5e1; color:#334155;
    font-weight:700; font-size:12px; display:flex; align-items:center; justify-content:center;
    cursor:default; position:relative;
  }
  .pr-info-bubble::before { content:"i"; }
  .pr-info-bubble .pr-tip {
    position:absolute; right:0; top:26px; width:280px; background:#fff; border:1px solid #e2e8f0; 
    border-radius:12px; box-shadow:0 12px 28px rgba(2,8,20,.08); padding:12px 12px; 
    display:none; z-index:5;
  }
  .pr-info-bubble:hover .pr-tip { display:block; }
  .pr-tip h6 { margin:0 0 8px; font-size:12px; color:#475569; font-weight:700; }
  .pr-tip ul { list-style:none; margin:0; padding:0; }
  .pr-tip li { font-size:12px; display:flex; align-items:center; gap:8px; padding:4px 0; }
  .pr-tip .pass::before, .pr-tip .fail::before, .pr-tip .neutral::before {
    content:""; width:16px; height:16px; border-radius:50%; border:2px solid currentColor;
    display:inline-block;
  }
  .pr-tip li::before {
    display:inline-block; width:16px; height:16px; 
    margin-right:6px; font-weight:700; text-align:center;
  }
  .pr-tip .pass { color:#3f4042; }
  .pr-tip .pass::before { background:var(--pr-ok); border:2px solid var(--pr-ok); content:"✓"; line-height: 1.2; font-size: 10px; color:#fff; }
  .pr-tip .fail { color:#3f4042; }
  .pr-tip .fail::before { background:var(--pr-err); border:2px solid var(--pr-err); content:"✕"; line-height: 1.2; font-size: 10px; color:#fff; }
  .pr-tip .neutral { color:#3f4042; }  /* gray */
  .pr-tip .neutral::before { background:#fff; border:2px solid #94a3b8; content:"•"; line-height: 1.2; font-size: 10px; color:#94a3b8; }

  /* Buttons */
  .pr-btn {
    background:var(--pr-primary); border-color:var(--pr-primary); color:#fff; 
    border-radius:999px; height:44px; width:100%;
  }
  .pr-btn:disabled { opacity:.5; cursor:not-allowed; }

  /* Footer notice */
  .pr-notice { color:#475569; text-align:center; margin-top:14px; font-size:12px; }

    .pr-label-row {
    display:flex; justify-content:space-between; align-items:center; margin-bottom:6px;
  }
  .pr-label-row label { margin:0; font-weight:600; }

  .pr-btn-sm {
    border: 1px solid var(--pr-primary);
    border-radius: 5px;
    background: transparent;
    color: var(--pr-primary);
    font-size:12px; padding:4px 10px; cursor:pointer;
    transition:background .2s;
  }
  .pr-btn-sm:hover { background:#1b2ab210; font-weight: 600; }

  .pr-system-logo {
    width: 50px; height: 50px; border-radius: 8px; object-fit: cover;
  }
  .logo-list {
    margin-top: 10px;
  }

  .pr-button-group {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }