.ph-tool{max-width: 1280px}.ph-panels{align-items: flex-start}.ph-input-panel,.ph-output-panel{height: auto;min-width: 0}.ph-panel-header{display: flex;align-items: center;justify-content: space-between;gap: 12px;flex-wrap: wrap}.ph-status{font-size: 12px;font-weight: 400;color: var(--text-secondary,#6c757d);max-width: 58%;text-align: right}.ph-status.text-danger{color: #b3261e}.ph-body{display: flex;flex-direction: column;gap: 14px;min-width: 0}.ph-field-grid{display: grid;grid-template-columns: 1fr;gap: 14px}.ph-field{display: flex;flex-direction: column;gap: 8px}.ph-field>span{font-size: 12.5px;font-weight: 600;color: var(--text-primary,#212529)}.ph-size-row{display: flex;align-items: center;gap: 8px}.ph-size-row .form-control{flex: 1;min-width: 0}.ph-times{color: var(--text-secondary,#6c757d);font-weight: 600}.ph-presets{display: flex;flex-wrap: wrap;gap: 6px}.ph-preset{font-size: 12px;padding: 4px 10px;border: 1px solid var(--border-color,#c9ced6);border-radius: 5px;background: var(--surface,#fff);color: var(--text-primary,#212529);cursor: pointer;transition: all 0.15s ease}.ph-preset:hover{border-color: var(--brand,#0a58ca);color: var(--brand,#0a58ca)}.ph-bg-type-row{display: flex;gap: 8px;align-items: center}.ph-bg-type-row select{flex: 1;min-width: 0}.ph-bg-type-row input[type="color"],.ph-gradient-row input[type="color"],.ph-text-row input[type="color"]{width: 44px;height: 32px;padding: 2px;border: 1px solid var(--border-color,#c9ced6);border-radius: 6px;background: var(--surface,#fff);cursor: pointer;flex: 0 0 auto}.ph-gradient-row{display: flex;gap: 8px;align-items: center}.ph-gradient-row select{flex: 1;min-width: 0}.ph-arrow{color: var(--text-secondary,#6c757d)}.ph-text-row{display: flex;gap: 8px;align-items: center}.ph-text-row input[type="number"]{width: 74px;flex: 0 0 auto}.ph-text-row select{flex: 1;min-width: 0}.ph-position-controls{display: grid;grid-template-columns: repeat(3,34px);gap: 6px}.position-btn{width: 34px;height: 34px;border: 1px solid var(--border-color,#c9ced6);border-radius: 6px;background: var(--surface,#fff);color: var(--text-primary,#212529);font-size: 14px;line-height: 1;cursor: pointer;transition: all 0.15s ease;display: inline-flex;align-items: center;justify-content: center}.position-btn:hover{border-color: var(--brand,#0a58ca)}.position-btn.active{border-color: var(--brand,#0a58ca);background: var(--brand,#0a58ca);color: #fff}.ph-radius-row{display: flex;align-items: center;gap: 10px}.ph-radius-label{font-size: 13px;color: var(--text-primary,#212529);margin: 0;flex: 1}.ph-radius-row input[type="range"]{flex: 2;accent-color: var(--brand,#0a58ca)}.ph-radius-value{min-width: 46px;text-align: right;font-size: 12.5px;color: var(--text-secondary,#6c757d)}.ph-canvas{display: none}.ph-preview-area{display: flex;align-items: center;justify-content: center;min-height: 260px;border: 1px solid var(--border-color,#e3e6ea);border-radius: 8px;background: repeating-conic-gradient(#f2f3f5 0% 25%,#fff 0% 50%) 0 0 / 16px 16px;padding: 14px;overflow: auto}.ph-preview-ph{text-align: center;color: var(--text-secondary,#6c757d)}.ph-preview-ph i{font-size: 40px;display: block;margin-bottom: 10px}.ph-preview-ph p{margin: 0;font-size: 13px}.ph-preview-img{max-width: 100%;max-height: 320px;height: auto;display: block;box-shadow: 0 1px 4px rgba(0,0,0,0.08)}.ph-preview-img.hidden{display: none}.ph-meta-stack{display: flex;flex-direction: column;gap: 4px;min-width: 0;margin-right: 18px}.ph-output-panel .result-toolbar{display: flex;align-items: flex-start;justify-content: space-between;flex-wrap: wrap;row-gap: 14px;column-gap: 16px}.ph-meta{font-size: 11.5px;color: var(--text-secondary,#6c757d);background: rgba(108,117,125,0.08);border-radius: 4px;padding: 4px 8px;max-width: 100%;overflow: hidden;text-overflow: ellipsis;white-space: nowrap}.ph-output-actions{display: flex;gap: 8px;flex-wrap: wrap}.ph-html-code{width: 100%;min-height: 92px;font-family: Consolas,Menlo,monospace;font-size: 11.5px;line-height: 1.5;padding: 10px 12px;border: 1px solid var(--border-color,#e3e6ea);border-radius: 6px;background: var(--code-bg,#f8f9fa);color: var(--text-primary,#212529);resize: vertical;word-break: break-all}.ph-note{display: flex;align-items: flex-start;gap: 8px;font-size: 12px;line-height: 1.55;color: var(--text-secondary,#6c757d)}.ph-note i{margin-top: 2px}@media (max-width: 767px){.ph-status{max-width: 100%;text-align: left}.ph-preview-area{min-height: 190px}.ph-text-row{flex-wrap: wrap}.ph-text-row select{flex: 1 1 100%}.ph-gradient-row{flex-wrap: wrap}.ph-gradient-row select{flex: 1 1 100%}}