.af {
    font-family: 'Roboto', Arial, sans-serif;
    max-width: 480px;
    margin: 40px;
    min-height: 600px;
    display: flex;
    flex-direction: column;
  }
  .af * {
    box-sizing: border-box;
  }
  #af-s1,
  #af-s2 {
    flex: 1 1 auto;
    flex-direction: column;
  }
  #af-s1 {
    display: flex;
  }
  #af-s2-form,
  #af-ok {
    flex: 1 1 auto;
  }
  .af h3 {
    font-size: 22px;
    font-weight: 600;
    color: #222;
    margin: 0 0 20px;
  }
  .af-steps {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 24px;
  }
  .af-dot {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 700;
    color: #fff;
    flex-shrink: 0;
  }
  .af-dot.on {
    background: #222;
  }
  .af-dot.ok {
    background: #81c784;
  }
  .af-dot.off {
    background: #ddd;
    color: #999;
  }
  .af-line {
    flex: 1;
    height: 2px;
    background: #ddd;
  }
  .af-line.ok {
    background: #81c784;
  }
  #af-s2.fail .af-dot.ok {
    background: #e53935;
  }
  #af-s2.fail .af-line.ok {
    background: #e53935;
  }
  .af-x {
    color: #e53935;
  }
  .af-lbl {
    font-size: 11px;
    color: #666;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 5px;
  }
  .af-lbl .opt {
    font-size: 10px;
    color: #bbb;
    text-transform: none;
    letter-spacing: 0;
  }
  .af-inp {
    width: 100%;
    border: 1.5px solid #ddd;
    border-radius: 12px;
    padding: 10px 12px;
    font-size: 14px;
    color: #333;
    margin-bottom: 14px;
    outline: none;
  }
  .af-inp:focus {
    border-color: #222;
  }
  .af-inp:disabled {
    background: #f5f5f5;
    color: #aaa;
  }
  .af-inp.af-valid {
    border-color: #81c784;
  }
  .af-inp.af-invalid {
    border-color: #ef9a9a;
  }
  .af-val-wrap {
    position: relative;
    margin-bottom: 14px;
  }
  .af-val-wrap .af-inp {
    margin-bottom: 0;
    padding-right: 34px;
  }
  .af-val-icon {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 14px;
    pointer-events: none;
  }
  .af-ac {
    position: relative;
    margin-bottom: 14px;
  }
  .af-ac .af-inp {
    margin-bottom: 0;
  }
  .af-ac-list {
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 100;
    width: 100%;
    background: #fff;
    border: 1.5px solid #222;
    border-top: none;
    border-radius: 0 0 12px 12px;
    max-height: 200px;
    overflow-y: auto;
    display: none;
  }
  .af-ac-item {
    padding: 9px 12px;
    font-size: 13px;
    cursor: pointer;
  }
  .af-ac-item:hover {
    background: #fff2aa;
    color: #222;
  }
  .af-btn {
    width: 100%;
    background: #ffd900;
    color: #222;
    border: 2px solid #ffd900;
    border-radius: 24px;
    padding: 13px;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.3s ease;
  }
  .af-btn:hover:not(:disabled) {
    background: #ffed84;
  }
  .af-btn:disabled {
    background: #ddd;
    border-color: #ddd;
    cursor: not-allowed;
  }
  .af-res-yes {
    background: #e8f5e9;
    border: 1.5px solid #81c784;
    border-radius: 16px;
    padding: 12px 14px;
    color: #2e7d32;
    font-size: 14px;
    margin-bottom: 12px;
  }
  .af-res-no {
    background: #fff2aa;
    border: 1.5px solid #ffd900;
    border-radius: 16px;
    padding: 12px 14px;
    color: #7a6600;
    font-size: 14px;
    margin-bottom: 12px;
  }
  .af-summary {
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 12px;
    padding: 9px 12px;
    font-size: 13px;
    color: #666;
    margin-bottom: 16px;
  }
  .af-summary a {
    color: #222;
    text-decoration: underline;
    margin-left: 8px;
    font-size: 12px;
  }
  .af-tech {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-bottom: 16px;
  }
  .af-tech-card {
    background: #fff;
    border: 2px solid #ddd;
    border-radius: 20px;
    padding: 14px;
    text-align: center;
    cursor: pointer;
    transition: border-color 0.15s, background 0.15s;
  }
  .af-tech-card.sel {
    border-color: #222;
    background: #fff2aa;
  }
  .af-tech-card h4 {
    margin: 6px 0 4px;
    font-size: 15px;
    color: #222;
  }
  .af-tech-card.sel h4 {
    color: #222;
  }
  .af-tech-card p {
    margin: 0;
    font-size: 11px;
    color: #888;
  }
  .af-consent {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin-bottom: 16px;
  }
  .af-consent input {
    margin-top: 3px;
    flex-shrink: 0;
  }
  .af-consent label {
    font-size: 12px;
    color: #666;
    line-height: 1.5;
  }
  .af-consent a {
    color: #222;
  }
  .af-price {
    background: #e4e1e1;
    border: none;
    border-radius: 12px;
    padding: 9px 14px;
    font-size: 13px;
    color: #444;
    margin-bottom: 12px;
  }
  .af-price strong {
    color: #222;
  }
  .af-err {
    background: #ffebee;
    border: 1.5px solid #ef9a9a;
    border-radius: 12px;
    padding: 10px 14px;
    color: #c62828;
    font-size: 13px;
    margin-bottom: 14px;
    display: none;
  }
  #af-ok {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 32px 24px 8px;
    background: #fff;
  }
  .af-ok-circle {
    width: 72px;
    height: 72px;
    border-radius: 50%;
    background: #ffd900;
    color: #222;
    font-size: 38px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 20px;
  }
  .af-ok-title {
    font-size: 22px;
    font-weight: 600;
    color: #222;
    margin: 0 0 10px;
  }
  .af-ok-text {
    font-size: 14px;
    color: #666;
    margin: 0;
    max-width: 280px;
  }
  @media (max-width: 768px) {
    .af {
      max-width: 100%;
      margin-left: 0;
      margin-right: 0;
      padding-left: 10px;
      padding-right: 10px;
    }
  }

/* Sampo theme surfaces */
.af{font-family:inherit;max-width:none;margin:0;min-height:650px;padding:6px;--af-text:#f4f6fa;--af-muted:#aab3c0;--af-bg:#101720;--af-input:#0b111a;--af-border:#ffffff30;color:var(--af-text)}
.af h3{font-size:clamp(1.6rem,3vw,2.1rem);color:var(--af-text);letter-spacing:-.045em;margin-bottom:28px}.af-lbl{display:block;color:var(--af-muted);font-size:.75rem;letter-spacing:.06em;margin-bottom:8px}.af-lbl .opt{color:var(--af-muted);font-size:.7rem}.af-inp{font:inherit;font-size:1rem;padding:14px 16px;background:var(--af-input);color:var(--af-text);border-color:var(--af-border);min-height:52px;margin-bottom:20px}.af-inp:focus{border-color:#ffe13d;box-shadow:0 0 0 3px #ffe13d20}.af-inp:disabled{background:var(--af-bg);color:var(--af-muted);opacity:.6}.af-btn{font:inherit;font-weight:800;border-radius:12px;padding:17px;background:#ffe13d;border-color:#ffe13d;color:#111318}.af-btn:disabled{background:#717887;border-color:#717887;color:#fff}.af-ac-list{background:var(--af-bg);color:var(--af-text);border-color:var(--af-border)}.af-ac-item{display:block;width:100%;background:transparent;color:inherit;text-align:left;font:inherit;padding:12px 16px}.af-ac-item:focus{background:#ffe13d;color:#10151d}.af-summary,.af-tech-card,.af-price,#af-ok{background:var(--af-bg);color:var(--af-text);border-color:var(--af-border)}.af-summary a,.af-tech-card h4,.af-price strong,.af-ok-title,.af-consent a{color:var(--af-text)}.af-tech-card p,.af-ok-text,.af-consent label{color:var(--af-muted)}.af-tech-card.sel{background:#ffe13d15;border-color:#ffe13d}.af-tech-card.sel h4{color:#ffe13d}.af-steps>span{color:var(--af-muted)!important}.af-dot.on{background:#ffe13d;color:#111318}.af-dot.off{background:#ffffff20;color:var(--af-muted)}.af-res-yes{background:#153b2c;color:#adf3ca}.af-res-no{background:#3c3418;color:#ffea91}.af-err{background:#481f29;color:#ffb8be}.af-consent{margin-top:12px}.af-consent input{width:20px;height:20px;accent-color:#ffe13d}.af-consent a{text-decoration:underline;text-underline-offset:3px}.af-summary{line-height:1.6}.af-tech{gap:14px}.af-ok-title{font-size:1.8rem}.af-ok-text{font-size:1rem}.af-line{background:var(--af-border)}
html[data-theme=light] .af{--af-text:#18202b;--af-muted:#536172;--af-bg:#f7f8fa;--af-input:#fff;--af-border:#b7c2cf}html[data-theme=light] .af-tech-card.sel{background:#fff5bc}html[data-theme=light] .af-tech-card.sel h4{color:#18202b}html[data-theme=light] .af-res-yes{background:#e4f4e9;color:#205837}html[data-theme=light] .af-res-no{background:#fff4c5;color:#685300}html[data-theme=light] .af-err{background:#fff0f0;color:#a42b36}
@media(max-width:760px){.connect-page .form-panel{padding:22px 16px}.af{padding:0;min-height:0}.af-consent label{font-size:.8rem}.af h3{font-size:1.7rem}.af-tech-card{padding:12px}}
.af .af-consent label{display:block;margin:0;font-weight:400;letter-spacing:0;text-transform:none;line-height:1.6;flex:1}.af .af-consent input{margin:3px 0 0;min-height:20px;padding:0}.af .af-consent a{display:inline}