.input-wrapper{position:relative;display:flex;align-items:center;width:100%;flex:1;max-width:1200px}.input-wrapper input{padding-right:40px;width:100%}.clear-input{position:absolute;right:12px;font-size:18px;color:#999;cursor:pointer;transition:color var(--transition-fast);z-index:10}.clear-input:hover{color:#666}.btn-manage{padding:12px 20px;background:linear-gradient(135deg,#17a2b8 0%,#138496 100%);color:white;border:none;border-radius:var(--radius-md);cursor:pointer;font-size:16px;font-weight:500;transition:all var(--transition-normal);box-shadow:0 2px 8px rgba(23,162,184,0.3);white-space:nowrap;display:inline-flex;align-items:center;gap:6px}.btn-manage:hover{background:linear-gradient(135deg,#138496 0%,#0f6674 100%);transform:translateY(-2px);box-shadow:0 4px 12px rgba(23,162,184,0.4)}.btn-manage:active{transform:translateY(0)}.format-modal{display:none;position:fixed;inset:0;background:rgba(0,0,0,0.5);z-index:10000;align-items:center;justify-content:center;padding:20px}.format-modal.active{display:flex}.format-modal-content{background:white;width:96%;max-width:1100px;max-height:90vh;border-radius:var(--radius-lg);overflow:hidden;display:flex;flex-direction:column;box-shadow:var(--shadow-lg)}.format-modal-header{padding:18px 24px;background:#f8f9fa;border-bottom:1px solid #eee;display:flex;justify-content:space-between;align-items:center}.format-modal-header h3{margin:0;color:#1a1a1a;font-size:20px;display:flex;align-items:center;gap:10px}.btn-close-modal{background:none;border:none;font-size:32px;color:var(--text-muted);cursor:pointer;padding:0;width:32px;height:32px;display:flex;align-items:center;justify-content:center;transition:color var(--transition-fast);line-height:1}.btn-close-modal:hover{color:#333}.format-modal-body{padding:20px;overflow-y:auto;flex:1;display:grid;grid-template-columns:1fr 1fr;gap:20px}.format-right-panel{display:flex;flex-direction:column;gap:20px}.format-list-wrap{display:flex;flex-direction:column;min-height:0;overflow-y:auto}.search-box{width:100%;padding:10px 14px;margin-bottom:12px;border:1px solid #ddd;border-radius:var(--radius-md);font-size:15px;transition:border-color var(--transition-fast)}.search-box:focus{outline:none;border-color:var(--primary-color);box-shadow:0 0 0 3px rgba(76,175,80,0.1)}.format-item{display:flex;align-items:center;padding:12px;border:1px solid #eee;border-radius:var(--radius-md);margin-bottom:10px;background:#fafafa;cursor:move;user-select:none;position:relative;transition:background 0.12s,transform 0.08s}.format-item:hover{background:#f1f3f5;transform:translateY(-1px)}.format-item.dragging{opacity:0.5;background:#e3f2fd;border:2px dashed #007bff}.format-info{flex:1;min-width:0}.format-name{font-weight:600;font-size:15px;margin-bottom:4px;color:#111;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.format-code{font-family:'Courier New',monospace;color:#444;font-size:13px;background:#fbfcfd;margin-top:6px;white-space:pre-wrap;word-break:break-all;line-height:1.4;font-weight:bold}.star{width:28px;height:28px;display:inline-flex;align-items:center;justify-content:center;margin-right:12px;cursor:pointer;color:#cfcfcf;flex:0 0 28px;user-select:none}.star svg{width:22px;height:22px;display:block}.star:hover{color:#ffda6a}.star.active{color:#ffc107}.actions{margin-left:10px;display:flex;gap:8px;align-items:center}.actions button{background:none;border:none;cursor:pointer;font-size:18px;color:#999;padding:6px}.actions button:hover{color:#e63946}.add-format{display:flex;flex-direction:column;gap:10px;padding:12px;border:1px solid #ddd;border-radius:var(--radius-md);background:#fafafa}.add-format .row{display:flex;gap:8px;align-items:flex-start}.add-format input,.add-format textarea{flex:1;padding:10px;border:1px solid #ddd;border-radius:6px;font-size:14px;transition:all 0.12s;resize:vertical}.add-format textarea{min-height:80px;font-family:monospace;width:100%;box-sizing:border-box}.add-format input.invalid,.add-format textarea.invalid{border-color:var(--error-text);box-shadow:0 0 0 3px rgba(230,57,70,0.08)}.btn-add{padding:10px 16px;background:var(--primary-color);color:white;border:none;border-radius:6px;cursor:pointer;font-size:14px;white-space:nowrap;transition:background var(--transition-fast)}.btn-add:hover{background:var(--primary-hover)}.restore-btn{background:var(--error-border);color:white;border-radius:var(--radius-md);padding:8px 14px;border:none;cursor:pointer;font-size:13px;transition:background var(--transition-fast)}.restore-btn:hover{background:#c82333}.template-panel{background:#fff;border:1px solid #eee;border-radius:var(--radius-md);padding:12px;overflow-y:auto;flex:1;min-height:0}.tpl-category{border-bottom:1px dashed #eee;padding:8px 0}.tpl-category:last-child{border-bottom:none}.tpl-category-header{display:flex;align-items:center;justify-content:space-between;cursor:pointer;padding:6px 2px}.tpl-category-title{font-weight:600;color:#111;font-size:14px}.tpl-category-toggle{font-size:13px;color:var(--text-muted)}.tpl-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:10px;display:none}.template-card{border:1px solid #e6eef6;border-radius:var(--radius-md);padding:10px;background:#fbfdff;cursor:pointer;transition:all 0.12s;font-size:13px}.template-card:hover{transform:translateY(-2px);box-shadow:0 4px 12px rgba(2,98,166,0.08)}.template-title{font-weight:600;margin-bottom:6px;font-size:13px;color:#333}.template-code{font-family:monospace;font-size:12px;color:#555;white-space:pre-wrap}@media (max-width:900px){.format-modal-body{grid-template-columns:1fr;display:flex;flex-direction:column}.format-right-panel{gap:15px}.format-modal-content{max-height:95vh}.format-list-wrap{min-height:320px;max-height:450px;flex-shrink:0}}@media (max-width:576px){.btn-manage{font-size:14px;padding:10px 14px}.btn-manage i{font-size:14px}.format-modal{padding:10px}.format-modal-content{width:100%;max-height:98vh}.format-modal-header{padding:12px 16px}.format-modal-header h3{font-size:16px}.format-modal-body{padding:12px;gap:12px}.format-list-wrap{max-height:200px}.add-format .row{flex-direction:column}.add-format input{width:100%}.tpl-grid{grid-template-columns:1fr}}[data-bs-theme="dark"] .clear-input{color:#666}[data-bs-theme="dark"] .clear-input:hover{color:#999}[data-bs-theme="dark"] .format-modal-content{background:#1a1a1a}[data-bs-theme="dark"] .format-modal-header{background:#2d2d2d;border-bottom-color:#404040}[data-bs-theme="dark"] .format-modal-header h3{color:var(--text-main)}[data-bs-theme="dark"] .btn-close-modal{color:#999}[data-bs-theme="dark"] .btn-close-modal:hover{color:#ccc}[data-bs-theme="dark"] .search-box{background-color:#2d2d2d;border-color:#404040;color:var(--text-main)}[data-bs-theme="dark"] .format-item{background:#2d2d2d;border-color:#404040}[data-bs-theme="dark"] .format-item:hover{background:#333}[data-bs-theme="dark"] .format-name{color:var(--text-main)}[data-bs-theme="dark"] .format-code{background:transparent;color:#ccc}[data-bs-theme="dark"] .add-format{background:#2d2d2d;border-color:#404040}[data-bs-theme="dark"] .add-format input,[data-bs-theme="dark"] .add-format textarea{background-color:#2d2d2d;border-color:#404040;color:var(--text-main)}[data-bs-theme="dark"] .template-panel{background:#2d2d2d;border-color:#404040}[data-bs-theme="dark"] .tpl-category{border-bottom-color:#404040}[data-bs-theme="dark"] .tpl-category-title{color:var(--text-main)}[data-bs-theme="dark"] .template-card{background:#1a1a1a;border-color:#404040}[data-bs-theme="dark"] .template-title{color:var(--text-main)}[data-bs-theme="dark"] .template-code{color:#ccc}