.codec-page[data-v-d630d8b2]{width:100%;max-width:1200px;margin:0 auto;padding:1rem 1.5rem}.codec-hero[data-v-d630d8b2]{display:flex;align-items:flex-end;justify-content:space-between;gap:1.5rem;margin-bottom:1rem}.codec-title[data-v-d630d8b2]{font-size:1.5rem;line-height:1.2}.codec-description[data-v-d630d8b2]{max-width:720px;margin-top:.5rem;color:var(--text-secondary);font-size:.875rem}.mode-panel[data-v-d630d8b2]{display:flex;flex-shrink:0;align-items:center;gap:.75rem;padding:.375rem;border:1px solid var(--border);border-radius:8px;background:var(--background-secondary)}.mode-label[data-v-d630d8b2]{padding-left:.5rem;color:var(--text-secondary);font-size:.8125rem;white-space:nowrap}.mode-switch[data-v-d630d8b2] .el-radio-button__inner{min-width:86px;border:0;box-shadow:none}.mode-switch[data-v-d630d8b2] .el-radio-button:first-child .el-radio-button__inner,.mode-switch[data-v-d630d8b2] .el-radio-button:last-child .el-radio-button__inner{border-radius:6px}.codec-surface[data-v-d630d8b2]{overflow:hidden;border:1px solid var(--border);border-radius:8px;background:var(--background);box-shadow:0 12px 30px #0f172a0f}.codec-grid[data-v-d630d8b2]{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);min-height:420px}.codec-panel[data-v-d630d8b2]{display:flex;min-width:0;flex-direction:column;padding:1rem}.codec-panel+.codec-panel[data-v-d630d8b2]{border-left:1px solid var(--border)}.panel-header[data-v-d630d8b2]{display:flex;align-items:center;justify-content:space-between;gap:.75rem;margin-bottom:.75rem}.panel-title[data-v-d630d8b2]{color:var(--text-primary);font-size:.875rem;font-weight:600}.panel-meta[data-v-d630d8b2]{color:var(--text-secondary);font-size:.75rem;font-variant-numeric:tabular-nums}.codec-textarea[data-v-d630d8b2]{flex:1}.codec-textarea[data-v-d630d8b2] .el-textarea__inner{min-height:360px!important;border:0;border-radius:6px;background:var(--background-secondary);color:var(--text-primary);font-family:Courier New,Courier,monospace;font-size:.9375rem;line-height:1.6;box-shadow:inset 0 0 0 1px var(--border)}.codec-textarea[data-v-d630d8b2] .el-textarea__inner:focus{box-shadow:inset 0 0 0 1px var(--el-color-primary)}.codec-textarea[data-v-d630d8b2] .el-textarea__inner::placeholder{color:var(--text-secondary);opacity:.65}.output-textarea[data-v-d630d8b2] .el-textarea__inner{cursor:default}.codec-actions[data-v-d630d8b2]{display:flex;justify-content:flex-end;gap:.75rem;padding:.875rem 1rem;border-top:1px solid var(--border);background:var(--background-secondary)}.codec-actions .el-button[data-v-d630d8b2]{min-width:108px}@media (max-width: 900px){.codec-grid[data-v-d630d8b2]{grid-template-columns:1fr;min-height:0}.codec-panel+.codec-panel[data-v-d630d8b2]{border-top:1px solid var(--border);border-left:0}.codec-textarea[data-v-d630d8b2] .el-textarea__inner{min-height:240px!important}}@media (max-width: 768px){.codec-page[data-v-d630d8b2]{padding:.75rem 1rem}.codec-hero[data-v-d630d8b2]{flex-direction:column;align-items:stretch;gap:1rem}.mode-panel[data-v-d630d8b2]{align-items:stretch;flex-direction:column;gap:.5rem}.mode-label[data-v-d630d8b2]{padding-left:0}.mode-switch[data-v-d630d8b2]{display:flex;width:100%}.mode-switch[data-v-d630d8b2] .el-radio-button{flex:1}.mode-switch[data-v-d630d8b2] .el-radio-button__inner{width:100%}.codec-actions[data-v-d630d8b2]{gap:.5rem}.codec-actions .el-button[data-v-d630d8b2]{flex:1;min-width:0}}@media (max-width: 480px){.codec-page[data-v-d630d8b2]{padding:.5rem}.codec-panel[data-v-d630d8b2]{padding:.75rem}.codec-textarea[data-v-d630d8b2] .el-textarea__inner{min-height:210px!important;font-size:.875rem}.codec-actions[data-v-d630d8b2]{padding:.75rem}}