setting-handler{display:block;width:100%;height:100%}setting-handler .setting-handler-container{max-width:800px;margin:0 auto;padding:32px}setting-handler .setting-header{display:flex;align-items:center;gap:16px;margin-bottom:8px}setting-handler .setting-header icon{font-size:32px;color:var(--md-sys-color-primary, #6a5acd)}setting-handler .setting-header h2{margin:0;font-size:28px;font-weight:400;color:var(--md-sys-color-on-surface, #e0e0e0)}setting-handler .setting-description{margin-bottom:32px;padding-bottom:16px;border-bottom:1px solid var(--md-sys-color-outline, #3e3e42)}setting-handler .setting-description p{margin:0;font-size:14px;color:var(--md-sys-color-on-surface-variant, #a0a0a0);line-height:1.5}setting-handler .setting-fields{display:flex;flex-direction:column;gap:24px;margin-bottom:32px}setting-handler .setting-field{display:flex;flex-direction:column;gap:8px}setting-handler .setting-field label{font-size:14px;font-weight:500;color:var(--md-sys-color-on-surface, #e0e0e0)}setting-handler .setting-field input[type=number],setting-handler .setting-field input[type=password],setting-handler .setting-field input[type=text],setting-handler .setting-field select{padding:10px 12px;background-color:var(--md-sys-color-surface-container, #2d2d30);border:1px solid var(--md-sys-color-outline, #3e3e42);border-radius:4px;color:var(--md-sys-color-on-surface, #e0e0e0);font-size:14px;font-family:inherit;transition:border-color .2s}setting-handler .setting-field input[type=number]:focus,setting-handler .setting-field input[type=password]:focus,setting-handler .setting-field input[type=text]:focus,setting-handler .setting-field select:focus{outline:0;border-color:var(--md-sys-color-primary, #6a5acd)}setting-handler .setting-checkbox{display:flex;align-items:center;gap:12px;cursor:pointer;user-select:none}setting-handler .setting-checkbox input[type=checkbox]{width:20px;height:20px;cursor:pointer;accent-color:var(--md-sys-color-primary, #6a5acd)}setting-handler .setting-checkbox span,setting-handler .setting-preview h3{font-size:14px;color:var(--md-sys-color-on-surface, #e0e0e0)}setting-handler .number-input-group{display:flex;align-items:center;gap:8px}setting-handler .number-input-group input{flex:1}setting-handler .number-input-group .input-unit{font-size:14px;color:var(--md-sys-color-on-surface-variant, #a0a0a0)}setting-handler .setting-preview{margin-bottom:32px;padding:20px;background-color:var(--md-sys-color-surface-container, #2d2d30);border:1px solid var(--md-sys-color-outline, #3e3e42);border-radius:8px}setting-handler .setting-preview h3{margin:0 0 16px;font-size:16px;font-weight:500}setting-handler .preview-container{padding:16px;background-color:var(--md-sys-color-surface, #1e1e1e);border:1px solid var(--md-sys-color-outline, #3e3e42);border-radius:4px}setting-handler .editor-preview{font-family:monospace;line-height:1.5;color:var(--md-sys-color-on-surface, #e0e0e0)}setting-handler .editor-preview .code-line{margin:4px 0}setting-handler .editor-preview .keyword{color:#c586c0}setting-handler .editor-preview .function{color:#dcdcaa}setting-handler .editor-preview .variable{color:#9cdcfe}setting-handler .editor-preview .string{color:#ce9178}setting-handler .editor-preview .method{color:#dcdcaa}setting-handler .setting-actions{display:flex;justify-content:flex-end;gap:12px;padding-top:24px;border-top:1px solid var(--md-sys-color-outline, #3e3e42)}setting-handler .setting-btn,setting-handler .setting-message{display:flex;align-items:center;border-radius:4px;font-size:14px}setting-handler .setting-btn{gap:8px;padding:10px 20px;border:0;font-weight:500;cursor:pointer;transition:all .2s}setting-handler .setting-btn icon{font-size:18px}setting-handler .setting-btn.primary{background-color:var(--md-sys-color-primary, #6a5acd);color:var(--md-sys-color-on-primary, #ffffff)}setting-handler .setting-btn.primary:hover{background-color:var(--md-sys-color-primary-hover, #5a4ab0)}setting-handler .setting-btn.secondary{background-color:var(--md-sys-color-surface-container, #2d2d30);color:var(--md-sys-color-on-surface, #e0e0e0);border:1px solid var(--md-sys-color-outline, #3e3e42)}setting-handler .setting-btn.secondary:hover{background-color:var(--md-sys-color-surface-container-highest, #3e3e42)}setting-handler .setting-message{gap:12px;padding:12px 16px;margin-bottom:16px;transition:opacity .3s}setting-handler .setting-message icon{font-size:20px}setting-handler .setting-message.success{background-color:var(--md-sys-color-success-container, #1e4620);color:var(--md-sys-color-on-success-container, #b7e4ba);border:1px solid var(--md-sys-color-success, #4caf50)}setting-handler .setting-message.info{background-color:var(--md-sys-color-info-container, #1e3a5f);color:var(--md-sys-color-on-info-container, #b3d4ff);border:1px solid var(--md-sys-color-info, #2196f3)}setting-handler .setting-message.error{background-color:var(--md-sys-color-error-container, #601410);color:var(--md-sys-color-on-error-container, #ffdad6);border:1px solid var(--md-sys-color-error, #f44336)}@media (max-width:768px){setting-handler .setting-handler-container{padding:20px 16px}setting-handler .setting-header h2{font-size:24px}setting-handler .setting-actions{flex-direction:column}setting-handler .setting-btn{width:100%;justify-content:center}}@media (max-width:480px){setting-handler .setting-handler-container{padding:16px 12px}setting-handler .setting-header{gap:12px}setting-handler .setting-header icon{font-size:28px}setting-handler .setting-header h2{font-size:20px}setting-handler .setting-fields{gap:20px}}