.conv-tool{position:relative;max-width:760px;margin:0 auto;padding:28px;border-radius:18px;background:#fff;box-shadow:0 10px 40px rgba(60,72,88,.12);text-align:center}
.conv-tool [hidden]{display:none!important}
.conv-drop{display:flex;flex-direction:column;align-items:center;gap:6px;margin:0;padding:46px 20px;border:2px dashed rgba(102,126,234,.45);border-radius:14px;background:linear-gradient(180deg,rgba(102,126,234,.06),rgba(164,100,255,.06));cursor:pointer;transition:border-color .15s,background-color .15s}
.conv-drop:hover,.conv-tool.is-over .conv-drop{border-color:#667eea;background-color:rgba(102,126,234,.1)}
.conv-drop:focus-within{outline:3px solid rgba(102,126,234,.35);outline-offset:2px}
.conv-input{position:absolute;width:1px;height:1px;opacity:0;overflow:hidden;pointer-events:none}
.conv-drop-icon{display:block;width:58px;height:58px;color:#667eea}
.conv-drop-icon svg{width:100%;height:100%}
.conv-drop-title{font-size:20px;font-weight:700;color:#3c4858}
.conv-drop-sub{font-size:14px;color:#8492a6}
.conv-file{display:flex;align-items:center;gap:14px;padding:14px 16px;border:1px solid #e9ecef;border-radius:12px;background:#fafbff;text-align:left}
.conv-badge{flex:none;min-width:56px;padding:12px 8px;border-radius:9px;background:linear-gradient(135deg,#667eea,#a464ff);color:#fff;font-weight:700;font-size:13px;letter-spacing:.5px;text-align:center}
.conv-file-meta{flex:1;min-width:0;display:flex;flex-direction:column}
.conv-file-name{font-weight:600;color:#3c4858;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.conv-file-size{font-size:13px;color:#8492a6}
.conv-remove{flex:none;width:36px;height:36px;border:0;border-radius:50%;background:#eef0f7;color:#6c757d;font-size:22px;line-height:1;cursor:pointer}
.conv-remove:hover{background:#e2e6f3;color:#343a40}
.conv-progress{margin-top:18px}
.conv-bar{height:10px;border-radius:5px;background:#eef0f7;overflow:hidden}
.conv-bar span{display:block;width:0;height:100%;background:linear-gradient(90deg,#667eea,#a464ff);transition:width .4s ease}
.conv-status{margin-top:8px;font-size:14px;color:#6c757d}
.conv-error{margin-top:16px;padding:12px 14px;border-radius:10px;background:#fff1f0;color:#c0392b;font-size:14px}
.conv-actions{margin-top:18px}
.conv-go{min-width:230px}
.conv-go:disabled{opacity:.5;cursor:not-allowed}
.conv-done{display:flex;align-items:center;justify-content:center;gap:8px;margin:6px 0 10px;font-size:18px;font-weight:700;color:#2eca8b}
.conv-done svg{width:24px;height:24px}
.conv-download{display:inline-block;min-width:250px;color:#fff!important;text-decoration:none!important}
.conv-tool .conv-again{margin-left:8px;background:#fff;background-image:none;color:#667eea;box-shadow:inset 0 0 0 2px rgba(102,126,234,.55)}
.conv-tool .conv-again:hover{background:rgba(102,126,234,.08);background-image:none}
.conv-privacy{display:flex;align-items:center;justify-content:center;gap:6px;margin:18px 0 0;font-size:13px;color:#8492a6}
.conv-privacy svg{flex:none;width:15px;height:15px}
@media (max-width:576px){.conv-tool{padding:18px;border-radius:14px}.conv-drop{padding:34px 14px}.conv-go,.conv-download,.conv-again{width:100%;margin-left:0}}

.hp-tool{max-width:1140px;text-align:left}
.hp-tabs{display:inline-flex;gap:4px;margin:0 0 16px;padding:4px;border-radius:12px;background:#f1f3fa;max-width:100%}
.hp-tab{display:inline-flex;align-items:center;gap:8px;padding:9px 16px;border:0;border-radius:9px;background:transparent;color:#5a6478;font-size:15px;font-weight:600;cursor:pointer;transition:background-color .15s,color .15s}
.hp-tab svg{width:18px;height:18px}
.hp-tab:hover{color:#3c4858}
.hp-tab.is-active{background:#fff;color:#667eea;box-shadow:0 2px 8px rgba(60,72,88,.12)}
.hp-toolbar{display:flex;flex-wrap:wrap;align-items:center;gap:6px 20px;margin-bottom:10px}
.hp-link{position:relative;display:inline-flex;align-items:center;gap:6px;margin:0;padding:2px 0;border:0;background:none;color:#667eea;font-size:14px;font-weight:600;cursor:pointer}
.hp-link:hover{color:#4c5fd5}
.hp-link svg{width:16px;height:16px}
.hp-link:focus-within{outline:2px solid rgba(102,126,234,.4);outline-offset:3px;border-radius:4px}
.hp-size{margin-left:auto;font-size:13px;color:#8492a6}
.hp-split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:14px}
.hp-code{display:block;width:100%;height:460px;margin:0;padding:14px;border:1px solid #dfe3ee;border-radius:12px;background:#fbfbfe;color:#2d3748;font:13px/1.55 ui-monospace,SFMono-Regular,Menlo,Consolas,"Liberation Mono",monospace;white-space:pre;overflow:auto;resize:vertical;tab-size:2}
.hp-code:focus,.hp-url:focus{outline:0;border-color:#667eea;box-shadow:0 0 0 3px rgba(102,126,234,.2)}
.hp-tool.is-over .hp-code{border-color:#667eea;background:rgba(102,126,234,.08)}
.hp-preview{position:relative;height:460px;border:1px solid #dfe3ee;border-radius:12px;background:#fff;overflow:hidden}
.hp-frame{position:absolute;top:0;left:0;border:0;background:#fff;transform-origin:0 0}
.hp-preview-label{position:absolute;top:8px;right:10px;z-index:1;padding:2px 8px;border-radius:6px;background:rgba(60,72,88,.72);color:#fff;font-size:11px;font-weight:700;letter-spacing:.5px;text-transform:uppercase;pointer-events:none}
.hp-empty{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;padding:20px;background:repeating-linear-gradient(135deg,#fafbff 0 12px,#f4f5fb 12px 24px);color:#8492a6;font-size:14px;text-align:center}
.hp-url{display:block;width:100%;padding:15px 18px;border:1px solid #dfe3ee;border-radius:12px;background:#fbfbfe;color:#2d3748;font-size:17px}
.hp-hint{margin:8px 2px 0;font-size:13px;color:#8492a6}
.hp-options{display:flex;flex-wrap:wrap;align-items:flex-end;gap:12px 18px;margin-top:16px;padding:14px 16px;border-radius:12px;background:#f7f8fc}
.hp-opt{display:flex;flex-direction:column;gap:5px;margin:0;color:#8492a6;font-size:12px;font-weight:700;letter-spacing:.4px;text-transform:uppercase}
.hp-opt select{min-width:140px;padding:8px 10px;border:1px solid #dfe3ee;border-radius:9px;background:#fff;color:#3c4858;font-size:14px;font-weight:500;letter-spacing:0;text-transform:none;cursor:pointer}
.hp-checks{display:flex;flex-direction:column;gap:6px}
.hp-check{display:flex;align-items:center;gap:8px;margin:0;color:#3c4858;font-size:14px;cursor:pointer}
.hp-check input{width:16px;height:16px;accent-color:#667eea}
.hp-tool .conv-progress,.hp-tool .conv-actions,.hp-tool .conv-result{text-align:center}
.hp-tool.is-busy .hp-editor{opacity:.6;pointer-events:none}
@media (max-width:991px){.hp-split{grid-template-columns:minmax(0,1fr)}.hp-code{height:300px}.hp-preview{height:340px}}
@media (max-width:576px){.hp-tabs{display:flex}.hp-tab{flex:1;justify-content:center;padding:9px 8px;font-size:14px}.hp-options{flex-direction:column;align-items:stretch}.hp-opt select{width:100%}}