.hp-page{padding-bottom:64px}.hp-breadcrumb{padding:22px 0 18px;display:flex;gap:9px;color:var(--muted);font-size:.87rem}.hp-breadcrumb a{color:var(--primary);font-weight:700}.hp-heading{display:flex;gap:16px;align-items:center;padding:8px 0 24px}.hp-icon{width:64px;height:64px;display:grid;place-items:center;border-radius:16px;background:#fff0f0;font-size:2rem}.hp-heading h1{margin:0;font-size:clamp(2rem,5vw,3rem);letter-spacing:-.045em}.hp-heading p{margin:7px 0 0;color:var(--muted)}.hp-promo{margin-bottom:18px}.hp-workspace{display:grid;grid-template-columns:minmax(0,1.8fr) minmax(300px,.9fr);border:1px solid var(--border);border-radius:20px;background:#fff;overflow:hidden}.hp-main{padding:20px;border-right:1px solid var(--border)}.hp-editor-layout{display:grid;grid-template-columns:1fr 1fr;gap:16px}.hp-editor-card,.hp-preview-card,.hp-options{padding:16px;border:1px solid var(--border);border-radius:14px;background:#fff}.hp-card-title{display:flex;justify-content:space-between;gap:12px;align-items:flex-start}.hp-card-title h2{margin:0;font-size:1rem}.hp-card-title p{margin:4px 0 0;color:var(--muted);font-size:.76rem}.hp-card-title button,.hp-editor-meta button{border:1px solid var(--border);border-radius:8px;padding:7px 9px;background:#fff;color:var(--primary);font-size:.72rem;font-weight:800;cursor:pointer}#html-input{width:100%;min-height:360px;margin-top:13px;padding:12px;border:1px solid var(--border);border-radius:10px;resize:vertical;font-family:Consolas,Monaco,monospace;font-size:.78rem;line-height:1.5}.hp-editor-meta{margin-top:9px;display:flex;justify-content:space-between;align-items:center;color:var(--muted);font-size:.72rem}.hp-preview-shell{margin-top:13px;height:400px;overflow:auto;border:1px solid var(--border);border-radius:10px;background:#eef1f0;padding:14px}.hp-preview-content{min-height:100%;padding:28px;background:#fff;color:#111;box-shadow:0 3px 12px rgba(0,0,0,.05)}.hp-preview-content img{max-width:100%;height:auto}.hp-preview-content table{width:100%;border-collapse:collapse}.hp-preview-content th,.hp-preview-content td{border:1px solid #ccc;padding:6px}.hp-preview-placeholder{display:grid;place-items:center;min-height:300px;color:#8b9691;text-align:center}.hp-options{margin-top:18px}.hp-options h2{margin:0 0 14px;font-size:1.05rem}.hp-settings-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}.hp-settings-grid label{display:grid;gap:7px;font-size:.82rem;font-weight:800}.hp-settings-grid select{padding:10px;border:1px solid var(--border);border-radius:9px;background:#fff}.hp-check{margin-top:16px;display:flex;gap:9px;align-items:center;padding:12px;border:1px solid var(--border);border-radius:10px;font-size:.8rem}.hp-how{margin-top:20px;padding:18px;border:1px solid var(--border);border-radius:14px}.hp-how-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}.hp-how-grid article{display:flex;gap:10px}.hp-how-grid article>span{width:28px;height:28px;display:grid;place-items:center;flex:0 0 28px;border-radius:50%;background:var(--primary);color:#fff;font-weight:900}.hp-how-grid h3{margin:1px 0 4px;font-size:.86rem}.hp-how-grid p{margin:0;color:var(--muted);font-size:.78rem}.hp-sidebar{padding:24px 22px;display:flex;flex-direction:column}.hp-sidebar-title{display:flex;justify-content:space-between}.hp-sidebar-title h2{margin:0;font-size:1.02rem}.hp-sidebar-title span{padding:4px 7px;border-radius:99px;background:#eaf6f1;color:#176c57;font-size:.68rem;font-weight:900}.hp-notice{margin-top:18px;padding:14px;border:1px solid #cde0f7;border-radius:11px;background:#f4f9ff;color:#315f96;font-size:.82rem}.hp-benefits{margin:26px 0;display:grid;gap:20px}.hp-benefits article{display:flex;gap:11px}.hp-benefits i{width:34px;height:34px;display:grid;place-items:center;flex:0 0 34px;border:2px solid #24a261;border-radius:50%;color:#14864c;font-style:normal}.hp-benefits p{margin:3px 0 0;color:var(--muted);font-size:.77rem}.hp-progress{margin:auto 0 14px}.hp-progress>div:first-child{display:flex;justify-content:space-between;font-size:.78rem}.hp-progress-track{height:8px;margin-top:7px;overflow:hidden;border-radius:99px;background:#e9eeec}.hp-progress-track span{display:block;width:0;height:100%;background:var(--primary);transition:width .2s}.hp-message{margin-bottom:12px;padding:11px;border-radius:10px;font-size:.8rem}.hp-message.error{background:#fff2f2;color:#963939}.hp-message.success{background:#edf8f3;color:#1f654f}.hp-primary{width:100%;margin-top:auto;min-height:46px;border:0;border-radius:11px;background:#e72727;color:#fff;font-weight:850;cursor:pointer}.hp-primary:disabled{background:#f5c7c7;color:#b66c6c}.hp-secondary{width:100%;margin-top:10px;min-height:46px;border:1px solid var(--border);border-radius:11px;background:#fff;font-weight:850}.hp-secondary:disabled{opacity:.5}.hp-tip{margin-top:20px;padding:15px 18px;border:1px solid #f1dede;border-radius:13px;background:#fff8f8}.hp-info{max-width:920px;padding-top:48px}.hp-info p{color:var(--muted)}@media(max-width:1000px){.hp-editor-layout{grid-template-columns:1fr}}@media(max-width:900px){.hp-workspace{grid-template-columns:1fr}.hp-main{border-right:0;border-bottom:1px solid var(--border)}.hp-how-grid{grid-template-columns:1fr}}@media(max-width:620px){.hp-main,.hp-sidebar{padding:16px}.hp-settings-grid{grid-template-columns:1fr}.hp-heading{align-items:flex-start}.hp-card-title,.hp-editor-meta{flex-direction:column}}