.tpg-tool{--tpg-text:#172033;--tpg-muted:#9298a3;--tpg-line:#d9dee7;--tpg-brand:#050505;--tpg-green:#119267;--tpg-danger:#c73030;overflow:hidden;max-width:860px;margin:32px auto;padding:28px;color:var(--tpg-text);background:#fff;border:1px solid var(--tpg-line);border-radius:14px;box-shadow:none}.tpg-tool,.tpg-tool *{box-sizing:border-box}.tpg-hero{margin:0 0 24px;text-align:center}.tpg-hero__title{margin:0 0 10px;color:var(--tpg-text);font-size:clamp(28px,4vw,42px);font-weight:800;line-height:1.2}.tpg-hero__intro{max-width:680px;margin:0 auto;color:#687386;font-size:15px;line-height:1.75}.tpg-grid{display:grid;grid-template-columns:1fr;gap:18px}.tpg-panel{background:#fff;border:1px solid var(--tpg-line);border-radius:12px;box-shadow:none}.tpg-form,.tpg-result-panel,.tpg-guide{padding:22px}.tpg-field,.tpg-fieldset{margin:0 0 22px;padding:0;border:0}.tpg-label{display:block;margin:0 0 12px;color:var(--tpg-text);font-size:16px;font-weight:800}.tpg-length-options{display:flex;flex-wrap:wrap;gap:14px 24px;align-items:center}.tpg-inline-choice,.tpg-check{display:flex;align-items:center;gap:9px;margin:0;color:var(--tpg-text);font-size:16px;font-weight:700;cursor:pointer}.tpg-inline-choice input[type=radio],.tpg-check input[type=checkbox]{width:22px;height:22px;margin:0;accent-color:#000}.tpg-custom-length{gap:8px}.tpg-custom-length .tpg-number{width:72px;min-height:46px;padding:8px 10px;color:#000;font:inherit;font-weight:700;text-align:center;background:#fff;border:1px solid #b8bdc7;border-radius:8px}.tpg-custom-length span{color:var(--tpg-muted);font-weight:700}.tpg-help{margin:8px 0 0;color:var(--tpg-muted);font-size:13px;line-height:1.6}.tpg-checks{display:grid;grid-template-columns:1fr;gap:12px}.tpg-check{min-height:34px}.tpg-symbol-check{flex-wrap:wrap;align-items:center}.tpg-symbol-input{flex:1 1 260px;min-height:46px;padding:8px 12px;color:#000;font:inherit;background:#fff;border:1px solid #b8bdc7;border-radius:8px}.tpg-select{width:160px;min-height:46px;padding:8px 12px;color:#000;font:inherit;font-weight:700;background:#fff;border:1px solid #b8bdc7;border-radius:8px}.tpg-submit,.tpg-copy-all,.tpg-copy{appearance:none;font-family:inherit;font-weight:800;border:0;cursor:pointer;transition:opacity .18s ease}.tpg-submit{width:100%;min-height:52px;color:#fff;font-size:17px;background:#000;border-radius:8px;box-shadow:none}.tpg-submit:hover,.tpg-copy-all:hover,.tpg-copy:hover{opacity:.86}.tpg-error{margin:12px 0 0;padding:11px 13px;color:var(--tpg-danger);font-size:14px;font-weight:700;background:#fff2f2;border:1px solid #ffd3d3;border-radius:8px}.tpg-result-head{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-bottom:14px}.tpg-score{color:#687386;font-size:13px;font-weight:800}.tpg-copy-all{min-height:42px;padding:0 16px;color:#fff;background:#000;border-radius:8px}.tpg-meter{overflow:hidden;height:8px;margin-bottom:14px;background:#edf0f5;border-radius:999px}.tpg-meter span{display:block;width:72%;height:100%;background:var(--tpg-green);border-radius:inherit;transition:width .22s ease,background .22s ease}.tpg-results{display:grid;grid-template-columns:1fr;gap:10px}.tpg-result{display:grid;grid-template-columns:minmax(0,1fr) 42px;gap:8px;align-items:center}.tpg-copy{display:inline-flex;align-items:center;justify-content:center;width:42px;height:42px;color:#5f6673;font-size:18px;line-height:1;background:#fff;border:1px solid #cfd5df;border-radius:8px}.tpg-output{overflow:hidden;min-height:52px;padding:12px 14px;color:#111;font-family:Consolas,"Courier New",monospace;font-size:16px;line-height:1.4;white-space:nowrap;text-overflow:ellipsis;background:#fff;border:1px solid #b8bdc7;border-radius:8px}.tpg-copy.is-copied,.tpg-copy-all.is-copied{color:#fff;background:var(--tpg-green);border-color:var(--tpg-green)}.tpg-guide{margin-top:20px;color:#687386;background:#fff;border:1px solid var(--tpg-line);border-radius:12px}.tpg-guide h3{margin:0 0 12px;color:var(--tpg-text);font-size:22px;font-weight:800}.tpg-guide ol{margin:0;padding-left:24px;line-height:1.85}.tpg-guide li{margin-bottom:6px}.tpg-guide p{margin:14px 0 0;padding:12px 14px;color:#344054;background:#f6f7f9;border-radius:8px}@media (max-width:560px){.tpg-tool{margin:20px auto;padding:15px}.tpg-form,.tpg-result-panel,.tpg-guide{padding:16px}.tpg-result-head{align-items:stretch;flex-direction:column}.tpg-copy-all,.tpg-select{width:100%}.tpg-output{font-size:14px}}
