codexmate 0.0.40 → 0.0.41

package/web-ui/styles/modals-core.css

@@ -1,499 +1,499 @@
-/* ============================================
-   模态框
-   ============================================ */
-@keyframes modalFadeIn {
-    from { opacity: 0; }
-    to { opacity: 1; }
-}
-
-@keyframes modalSlideUp {
-    from { transform: translateY(24px); opacity: 0; }
-    to { transform: translateY(0); opacity: 1; }
-}
-
-.modal-overlay {
-    position: fixed;
-    top: 0;
-    left: 0;
-    right: 0;
-    bottom: 0;
-    background:
-        radial-gradient(circle at 50% 18%, rgba(255, 248, 241, 0.22), rgba(255, 248, 241, 0) 36%),
-        linear-gradient(to bottom, rgba(31, 26, 23, 0.28) 0%, rgba(31, 26, 23, 0.48) 100%);
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    z-index: 100;
-    backdrop-filter: blur(8px) saturate(180%);
-    -webkit-backdrop-filter: blur(8px) saturate(180%);
-    animation: modalFadeIn var(--transition-normal) var(--ease-out-expo);
-}
-
-.modal {
-    background: linear-gradient(to bottom, rgba(255, 255, 255, 0.96) 0%, rgba(255, 250, 246, 0.94) 100%);
-    width: 90%;
-    max-width: 400px;
-    max-height: 90vh;
-    overflow-y: auto;
-    overscroll-behavior: contain;
-    border-radius: var(--radius-xl);
-    padding: var(--spacing-md);
-    box-shadow: var(--shadow-modal);
-    border: 1px solid rgba(255, 255, 255, 0.72);
-    animation: modalSlideUp var(--transition-slow) var(--ease-spring);
-}
-
-.modal-wide {
-    max-width: 980px;
-}
-
-.modal-editor {
-    width: min(96vw, 980px);
-    max-height: calc(100vh - 24px);
-    display: flex;
-    flex-direction: column;
-    overflow: hidden;
-    padding: 0;
-}
-
-.agents-modal {
-    width: min(92vw, 900px);
-    max-height: calc(100vh - 56px);
-}
-
-.modal-editor-header {
-    margin-bottom: 0;
-    padding: var(--spacing-md) var(--spacing-md) 0;
-}
-
-.modal-editor-body {
-    flex: 1;
-    min-height: 0;
-    overflow-y: auto;
-    padding: var(--spacing-sm) var(--spacing-md) 0;
-}
-
-.modal-editor-footer {
-    margin-top: 0;
-    padding: var(--spacing-sm) var(--spacing-md) var(--spacing-md);
-    border-top: 1px solid var(--color-border-soft);
-    background: linear-gradient(to bottom, rgba(255, 250, 246, 0.78) 0%, rgba(255, 250, 246, 0.96) 100%);
-    backdrop-filter: blur(10px);
-}
-
-.modal-title {
-    font-size: var(--font-size-title);
-    font-weight: var(--font-weight-title);
-    margin-bottom: var(--spacing-md);
-    color: var(--color-text-primary);
-    letter-spacing: -0.01em;
-}
-
-.confirm-dialog {
-    max-width: 460px;
-}
-
-.confirm-dialog-message {
-    font-size: var(--font-size-body);
-    line-height: 1.7;
-    color: var(--color-text-secondary);
-    white-space: pre-wrap;
-}
-
-.confirm-dialog-actions {
-    margin-top: var(--spacing-lg);
-    justify-content: flex-end;
-}
-
-.install-list {
-    display: flex;
-    flex-direction: column;
-    gap: var(--spacing-sm);
-    margin-top: var(--spacing-sm);
-}
-
-.install-row {
-    display: flex;
-    align-items: center;
-    gap: var(--spacing-sm);
-    padding: 10px 12px;
-    border: 1px solid var(--color-border-soft);
-    border-radius: var(--radius-md);
-    background: rgba(255, 255, 255, 0.48);
-}
-
-.install-row-main {
-    flex: 1;
-    display: flex;
-    flex-direction: column;
-    gap: 6px;
-}
-
-.install-row-title {
-    font-size: var(--font-size-secondary);
-    color: var(--color-text-secondary);
-}
-
-.install-command {
-    flex: 1;
-    font-family: var(--font-family-mono);
-    font-size: var(--font-size-secondary);
-    color: var(--color-text-primary);
-    word-break: break-all;
-    background: rgba(255, 255, 255, 0.72);
-    padding: 8px 10px;
-    border-radius: var(--radius-sm);
-    border: 1px solid var(--color-border-soft);
-}
-
-.install-row .btn-mini {
-    white-space: nowrap;
-}
-
-.install-action-tabs {
-    display: flex;
-    gap: var(--spacing-xs);
-    flex-wrap: wrap;
-}
-
-.install-action-tabs .btn-mini.active {
-    background: var(--color-brand-light);
-    border-color: rgba(200, 121, 99, 0.22);
-    color: var(--color-brand-dark);
-}
-
-.install-registry-input {
-    width: 100%;
-}
-
-.install-registry-hint {
-    width: 100%;
-    margin-top: 2px;
-}
-
-.install-help {
-    margin-top: var(--spacing-sm);
-    border-top: 1px dashed var(--color-border-soft);
-    padding-top: var(--spacing-sm);
-}
-
-.install-help-list {
-    margin: 6px 0 0;
-    padding-left: 18px;
-    color: var(--color-text-secondary);
-    font-size: var(--font-size-secondary);
-}
-
-.install-help-list li + li {
-    margin-top: 4px;
-}
-
-.modal-header {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    gap: var(--spacing-sm);
-    margin-bottom: var(--spacing-md);
-    flex-wrap: wrap;
-}
-
-.modal-header .modal-title {
-    margin-bottom: 0;
-}
-
-.modal-header-actions {
-    display: inline-flex;
-    align-items: center;
-    gap: 8px;
-    margin-left: auto;
-}
-
-.btn-modal-copy {
-    padding: 6px 12px;
-    white-space: nowrap;
-    flex-shrink: 0;
-}
-
-.form-group {
-    margin-bottom: var(--spacing-sm);
-}
-
-.form-label {
-    display: block;
-    font-size: var(--font-size-secondary);
-    font-weight: var(--font-weight-secondary);
-    color: var(--color-text-secondary);
-    margin-bottom: 7px;
-    letter-spacing: 0.01em;
-}
-
-.form-input {
-    width: 100%;
-    padding: 13px var(--spacing-sm);
-    border: 1.5px solid var(--color-border-soft);
-    border-radius: var(--radius-sm);
-    font-size: var(--font-size-body);
-    background-color: var(--color-surface-alt);
-    color: var(--color-text-primary);
-    outline: none;
-    transition: all var(--transition-fast) var(--ease-spring);
-    font-family: var(--font-family-body);
-    box-shadow: inset 0 1px 2px rgba(31, 26, 23, 0.04);
-}
-
-.form-input:hover {
-    border-color: var(--color-border-strong);
-}
-
-.form-input:focus {
-    border-color: var(--color-brand);
-    background-color: var(--color-surface);
-    box-shadow: var(--shadow-input-focus);
-}
-
-.form-input.invalid,
-.form-input.invalid:hover,
-.form-input.invalid:focus {
-    border-color: var(--color-error);
-}
-
-.form-input.invalid:focus {
-    box-shadow: 0 0 0 3px rgba(196, 69, 54, 0.14);
-}
-
-.form-input::placeholder {
-    color: var(--color-text-tertiary);
-    opacity: 0.7;
-}
-
-.input-with-toggle {
-    position: relative;
-    display: flex;
-    align-items: center;
-}
-
-.input-with-toggle .form-input {
-    width: 100%;
-    padding-right: 36px;
-}
-
-.input-toggle-btn {
-    position: absolute;
-    right: 6px;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    width: 28px;
-    height: 28px;
-    padding: 0;
-    border: none;
-    border-radius: var(--radius-sm);
-    background: transparent;
-    color: var(--color-text-secondary);
-    cursor: pointer;
-    transition: color var(--transition-fast);
-}
-
-.input-toggle-btn:hover {
-    color: var(--color-text-primary);
-    background: var(--color-surface-alt);
-}
-
-.form-select {
-    width: 100%;
-    min-height: 44px;
-    padding: 10px 40px 10px 12px;
-    border: 1.5px solid var(--color-border-soft);
-    border-radius: var(--radius-sm);
-    font-size: var(--font-size-secondary);
-    font-weight: var(--font-weight-secondary);
-    background-color: var(--color-surface-alt);
-    color: var(--color-text-primary);
-    outline: none;
-    transition: all var(--transition-fast) var(--ease-spring);
-    font-family: var(--font-family-body);
-    box-shadow: inset 0 1px 2px rgba(31, 26, 23, 0.04);
-    cursor: pointer;
-    appearance: none;
-    -webkit-appearance: none;
-    -moz-appearance: none;
-    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='none' stroke='%23505A66' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round' d='M2 4l4 4 4-4'/%3E%3C/svg%3E");
-    background-repeat: no-repeat;
-    background-position: right 14px center;
-    background-size: 12px;
-}
-
-.form-select:hover {
-    border-color: var(--color-border-strong);
-    background-color: var(--color-surface);
-}
-
-.form-select:focus {
-    border-color: var(--color-brand);
-    background-color: var(--color-surface);
-    box-shadow: var(--shadow-input-focus);
-}
-
-.form-select:disabled {
-    background: linear-gradient(to right, var(--color-bg) 0%, rgba(247, 241, 232, 0.5) 100%);
-    color: var(--color-text-tertiary);
-    cursor: not-allowed;
-    border-color: transparent;
-}
-
-.template-editor {
-    min-height: min(60vh, 520px);
-    max-height: min(65vh, 620px);
-    resize: vertical;
-    overflow: auto;
-    white-space: pre;
-    font-family: var(--font-family-mono);
-    font-size: 13px;
-    line-height: 1.45;
-}
-
-.template-editor-warning {
-    margin-top: 8px;
-    color: #8d5b31;
-    font-size: var(--font-size-caption);
-    line-height: 1.4;
-}
-
-
-.agents-diff-hint {
-    margin-top: 6px;
-    color: var(--color-text-tertiary);
-    font-size: var(--font-size-caption);
-}
-
-.agents-diff-save-alert {
-    margin-bottom: 8px;
-    padding: 8px 10px;
-    border-radius: var(--radius-sm);
-    border: 1px solid rgba(238, 178, 90, 0.45);
-    background: rgba(255, 236, 204, 0.72);
-    color: #8d5b31;
-    font-size: var(--font-size-caption);
-    font-weight: var(--font-weight-secondary);
-}
-
-.agents-diff-summary {
-    display: flex;
-    align-items: center;
-    gap: 8px;
-    margin-bottom: 8px;
-    font-size: var(--font-size-caption);
-    color: var(--color-text-tertiary);
-}
-
-.agents-diff-stat {
-    display: inline-flex;
-    align-items: center;
-    gap: 4px;
-    padding: 2px 8px;
-    border-radius: 999px;
-    border: 1px solid transparent;
-    font-weight: var(--font-weight-secondary);
-}
-
-.agents-diff-stat.add {
-    color: #2b6a3b;
-    background: rgba(57, 181, 97, 0.12);
-    border-color: rgba(57, 181, 97, 0.2);
-}
-
-.agents-diff-stat.del {
-    color: #8a2f36;
-    background: rgba(220, 95, 108, 0.12);
-    border-color: rgba(220, 95, 108, 0.2);
-}
-
-
-.agents-diff-empty {
-    padding: 10px 12px;
-    font-size: var(--font-size-caption);
-    color: var(--color-text-tertiary);
-    border: 1px dashed var(--color-border-soft);
-    border-radius: var(--radius-sm);
-    background: rgba(255, 255, 255, 0.6);
-}
-
-.agents-diff-view {
-    border: 1px solid var(--color-border-soft);
-    border-radius: var(--radius-sm);
-    background: rgba(255, 255, 255, 0.7);
-    font-family: var(--font-family-mono);
-    font-size: 12px;
-    line-height: 1.55;
-    max-height: min(32vh, 280px);
-    overflow: auto;
-}
-
-
-.agents-diff-editor {
-    min-height: min(60vh, 520px);
-    max-height: min(65vh, 620px);
-}
-
-.agents-modal .template-editor,
-.agents-modal .agents-diff-editor {
-    min-height: min(52vh, 460px);
-    max-height: min(58vh, 540px);
-}
-
-.agents-diff-line {
-    display: grid;
-    grid-template-columns: 16px 1fr;
-    gap: 8px;
-    padding: 2px 10px;
-    align-items: start;
-}
-
-.agents-diff-line + .agents-diff-line {
-    border-top: none;
-}
-
-.agents-diff-line.add {
-    background: rgba(57, 181, 97, 0.08);
-}
-
-.agents-diff-line.del {
-    background: rgba(220, 95, 108, 0.1);
-}
-
-.agents-diff-line.context {
-    background: transparent;
-}
-
-
-.agents-diff-line-sign {
-    text-align: center;
-    color: var(--color-text-tertiary);
-    min-height: 20px;
-}
-
-.agents-diff-line-text {
-    white-space: pre-wrap;
-    word-break: break-word;
-    color: var(--color-text-primary);
-}
-
-.form-input:disabled,
-.form-input[readonly] {
-    background: linear-gradient(to right, var(--color-bg) 0%, rgba(247, 241, 232, 0.5) 100%);
-    color: var(--color-text-tertiary);
-    cursor: not-allowed;
-    border-color: transparent;
-}
-
-.form-hint {
-    font-size: var(--font-size-caption);
-    color: var(--color-text-tertiary);
-    margin-top: 5px;
-    opacity: 0.8;
-}
-
-.form-hint.form-error {
-    color: var(--color-error);
-    opacity: 1;
-}
+/* ============================================
+   模态框
+   ============================================ */
+@keyframes modalFadeIn {
+    from { opacity: 0; }
+    to { opacity: 1; }
+}
+
+@keyframes modalSlideUp {
+    from { transform: translateY(24px); opacity: 0; }
+    to { transform: translateY(0); opacity: 1; }
+}
+
+.modal-overlay {
+    position: fixed;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background:
+        radial-gradient(circle at 50% 18%, rgba(255, 248, 241, 0.22), rgba(255, 248, 241, 0) 36%),
+        linear-gradient(to bottom, rgba(31, 26, 23, 0.28) 0%, rgba(31, 26, 23, 0.48) 100%);
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    z-index: 100;
+    backdrop-filter: blur(8px) saturate(180%);
+    -webkit-backdrop-filter: blur(8px) saturate(180%);
+    animation: modalFadeIn var(--transition-normal) var(--ease-out-expo);
+}
+
+.modal {
+    background: linear-gradient(to bottom, rgba(255, 255, 255, 0.96) 0%, rgba(255, 250, 246, 0.94) 100%);
+    width: 90%;
+    max-width: 400px;
+    max-height: 90vh;
+    overflow-y: auto;
+    overscroll-behavior: contain;
+    border-radius: var(--radius-xl);
+    padding: var(--spacing-md);
+    box-shadow: var(--shadow-modal);
+    border: 1px solid rgba(255, 255, 255, 0.72);
+    animation: modalSlideUp var(--transition-slow) var(--ease-spring);
+}
+
+.modal-wide {
+    max-width: 980px;
+}
+
+.modal-editor {
+    width: min(96vw, 980px);
+    max-height: calc(100vh - 24px);
+    display: flex;
+    flex-direction: column;
+    overflow: hidden;
+    padding: 0;
+}
+
+.agents-modal {
+    width: min(92vw, 900px);
+    max-height: calc(100vh - 56px);
+}
+
+.modal-editor-header {
+    margin-bottom: 0;
+    padding: var(--spacing-md) var(--spacing-md) 0;
+}
+
+.modal-editor-body {
+    flex: 1;
+    min-height: 0;
+    overflow-y: auto;
+    padding: var(--spacing-sm) var(--spacing-md) 0;
+}
+
+.modal-editor-footer {
+    margin-top: 0;
+    padding: var(--spacing-sm) var(--spacing-md) var(--spacing-md);
+    border-top: 1px solid var(--color-border-soft);
+    background: linear-gradient(to bottom, rgba(255, 250, 246, 0.78) 0%, rgba(255, 250, 246, 0.96) 100%);
+    backdrop-filter: blur(10px);
+}
+
+.modal-title {
+    font-size: var(--font-size-title);
+    font-weight: var(--font-weight-title);
+    margin-bottom: var(--spacing-md);
+    color: var(--color-text-primary);
+    letter-spacing: -0.01em;
+}
+
+.confirm-dialog {
+    max-width: 460px;
+}
+
+.confirm-dialog-message {
+    font-size: var(--font-size-body);
+    line-height: 1.7;
+    color: var(--color-text-secondary);
+    white-space: pre-wrap;
+}
+
+.confirm-dialog-actions {
+    margin-top: var(--spacing-lg);
+    justify-content: flex-end;
+}
+
+.install-list {
+    display: flex;
+    flex-direction: column;
+    gap: var(--spacing-sm);
+    margin-top: var(--spacing-sm);
+}
+
+.install-row {
+    display: flex;
+    align-items: center;
+    gap: var(--spacing-sm);
+    padding: 10px 12px;
+    border: 1px solid var(--color-border-soft);
+    border-radius: var(--radius-md);
+    background: rgba(255, 255, 255, 0.48);
+}
+
+.install-row-main {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    gap: 6px;
+}
+
+.install-row-title {
+    font-size: var(--font-size-secondary);
+    color: var(--color-text-secondary);
+}
+
+.install-command {
+    flex: 1;
+    font-family: var(--font-family-mono);
+    font-size: var(--font-size-secondary);
+    color: var(--color-text-primary);
+    word-break: break-all;
+    background: rgba(255, 255, 255, 0.72);
+    padding: 8px 10px;
+    border-radius: var(--radius-sm);
+    border: 1px solid var(--color-border-soft);
+}
+
+.install-row .btn-mini {
+    white-space: nowrap;
+}
+
+.install-action-tabs {
+    display: flex;
+    gap: var(--spacing-xs);
+    flex-wrap: wrap;
+}
+
+.install-action-tabs .btn-mini.active {
+    background: var(--color-brand-light);
+    border-color: rgba(200, 121, 99, 0.22);
+    color: var(--color-brand-dark);
+}
+
+.install-registry-input {
+    width: 100%;
+}
+
+.install-registry-hint {
+    width: 100%;
+    margin-top: 2px;
+}
+
+.install-help {
+    margin-top: var(--spacing-sm);
+    border-top: 1px dashed var(--color-border-soft);
+    padding-top: var(--spacing-sm);
+}
+
+.install-help-list {
+    margin: 6px 0 0;
+    padding-left: 18px;
+    color: var(--color-text-secondary);
+    font-size: var(--font-size-secondary);
+}
+
+.install-help-list li + li {
+    margin-top: 4px;
+}
+
+.modal-header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: var(--spacing-sm);
+    margin-bottom: var(--spacing-md);
+    flex-wrap: wrap;
+}
+
+.modal-header .modal-title {
+    margin-bottom: 0;
+}
+
+.modal-header-actions {
+    display: inline-flex;
+    align-items: center;
+    gap: 8px;
+    margin-left: auto;
+}
+
+.btn-modal-copy {
+    padding: 6px 12px;
+    white-space: nowrap;
+    flex-shrink: 0;
+}
+
+.form-group {
+    margin-bottom: var(--spacing-sm);
+}
+
+.form-label {
+    display: block;
+    font-size: var(--font-size-secondary);
+    font-weight: var(--font-weight-secondary);
+    color: var(--color-text-secondary);
+    margin-bottom: 7px;
+    letter-spacing: 0.01em;
+}
+
+.form-input {
+    width: 100%;
+    padding: 13px var(--spacing-sm);
+    border: 1.5px solid var(--color-border-soft);
+    border-radius: var(--radius-sm);
+    font-size: var(--font-size-body);
+    background-color: var(--color-surface-alt);
+    color: var(--color-text-primary);
+    outline: none;
+    transition: all var(--transition-fast) var(--ease-spring);
+    font-family: var(--font-family-body);
+    box-shadow: inset 0 1px 2px rgba(31, 26, 23, 0.04);
+}
+
+.form-input:hover {
+    border-color: var(--color-border-strong);
+}
+
+.form-input:focus {
+    border-color: var(--color-brand);
+    background-color: var(--color-surface);
+    box-shadow: var(--shadow-input-focus);
+}
+
+.form-input.invalid,
+.form-input.invalid:hover,
+.form-input.invalid:focus {
+    border-color: var(--color-error);
+}
+
+.form-input.invalid:focus {
+    box-shadow: 0 0 0 3px rgba(196, 69, 54, 0.14);
+}
+
+.form-input::placeholder {
+    color: var(--color-text-tertiary);
+    opacity: 0.7;
+}
+
+.input-with-toggle {
+    position: relative;
+    display: flex;
+    align-items: center;
+}
+
+.input-with-toggle .form-input {
+    width: 100%;
+    padding-right: 36px;
+}
+
+.input-toggle-btn {
+    position: absolute;
+    right: 6px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 28px;
+    height: 28px;
+    padding: 0;
+    border: none;
+    border-radius: var(--radius-sm);
+    background: transparent;
+    color: var(--color-text-secondary);
+    cursor: pointer;
+    transition: color var(--transition-fast);
+}
+
+.input-toggle-btn:hover {
+    color: var(--color-text-primary);
+    background: var(--color-surface-alt);
+}
+
+.form-select {
+    width: 100%;
+    min-height: 44px;
+    padding: 10px 40px 10px 12px;
+    border: 1.5px solid var(--color-border-soft);
+    border-radius: var(--radius-sm);
+    font-size: var(--font-size-secondary);
+    font-weight: var(--font-weight-secondary);
+    background-color: var(--color-surface-alt);
+    color: var(--color-text-primary);
+    outline: none;
+    transition: all var(--transition-fast) var(--ease-spring);
+    font-family: var(--font-family-body);
+    box-shadow: inset 0 1px 2px rgba(31, 26, 23, 0.04);
+    cursor: pointer;
+    appearance: none;
+    -webkit-appearance: none;
+    -moz-appearance: none;
+    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='none' stroke='%23505A66' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round' d='M2 4l4 4 4-4'/%3E%3C/svg%3E");
+    background-repeat: no-repeat;
+    background-position: right 14px center;
+    background-size: 12px;
+}
+
+.form-select:hover {
+    border-color: var(--color-border-strong);
+    background-color: var(--color-surface);
+}
+
+.form-select:focus {
+    border-color: var(--color-brand);
+    background-color: var(--color-surface);
+    box-shadow: var(--shadow-input-focus);
+}
+
+.form-select:disabled {
+    background: linear-gradient(to right, var(--color-bg) 0%, rgba(247, 241, 232, 0.5) 100%);
+    color: var(--color-text-tertiary);
+    cursor: not-allowed;
+    border-color: transparent;
+}
+
+.template-editor {
+    min-height: min(60vh, 520px);
+    max-height: min(65vh, 620px);
+    resize: vertical;
+    overflow: auto;
+    white-space: pre;
+    font-family: var(--font-family-mono);
+    font-size: 13px;
+    line-height: 1.45;
+}
+
+.template-editor-warning {
+    margin-top: 8px;
+    color: #8d5b31;
+    font-size: var(--font-size-caption);
+    line-height: 1.4;
+}
+
+
+.agents-diff-hint {
+    margin-top: 6px;
+    color: var(--color-text-tertiary);
+    font-size: var(--font-size-caption);
+}
+
+.agents-diff-save-alert {
+    margin-bottom: 8px;
+    padding: 8px 10px;
+    border-radius: var(--radius-sm);
+    border: 1px solid rgba(238, 178, 90, 0.45);
+    background: rgba(255, 236, 204, 0.72);
+    color: #8d5b31;
+    font-size: var(--font-size-caption);
+    font-weight: var(--font-weight-secondary);
+}
+
+.agents-diff-summary {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    margin-bottom: 8px;
+    font-size: var(--font-size-caption);
+    color: var(--color-text-tertiary);
+}
+
+.agents-diff-stat {
+    display: inline-flex;
+    align-items: center;
+    gap: 4px;
+    padding: 2px 8px;
+    border-radius: 999px;
+    border: 1px solid transparent;
+    font-weight: var(--font-weight-secondary);
+}
+
+.agents-diff-stat.add {
+    color: #2b6a3b;
+    background: rgba(57, 181, 97, 0.12);
+    border-color: rgba(57, 181, 97, 0.2);
+}
+
+.agents-diff-stat.del {
+    color: #8a2f36;
+    background: rgba(220, 95, 108, 0.12);
+    border-color: rgba(220, 95, 108, 0.2);
+}
+
+
+.agents-diff-empty {
+    padding: 10px 12px;
+    font-size: var(--font-size-caption);
+    color: var(--color-text-tertiary);
+    border: 1px dashed var(--color-border-soft);
+    border-radius: var(--radius-sm);
+    background: rgba(255, 255, 255, 0.6);
+}
+
+.agents-diff-view {
+    border: 1px solid var(--color-border-soft);
+    border-radius: var(--radius-sm);
+    background: rgba(255, 255, 255, 0.7);
+    font-family: var(--font-family-mono);
+    font-size: 12px;
+    line-height: 1.55;
+    max-height: min(32vh, 280px);
+    overflow: auto;
+}
+
+
+.agents-diff-editor {
+    min-height: min(60vh, 520px);
+    max-height: min(65vh, 620px);
+}
+
+.agents-modal .template-editor,
+.agents-modal .agents-diff-editor {
+    min-height: min(52vh, 460px);
+    max-height: min(58vh, 540px);
+}
+
+.agents-diff-line {
+    display: grid;
+    grid-template-columns: 16px 1fr;
+    gap: 8px;
+    padding: 2px 10px;
+    align-items: start;
+}
+
+.agents-diff-line + .agents-diff-line {
+    border-top: none;
+}
+
+.agents-diff-line.add {
+    background: rgba(57, 181, 97, 0.08);
+}
+
+.agents-diff-line.del {
+    background: rgba(220, 95, 108, 0.1);
+}
+
+.agents-diff-line.context {
+    background: transparent;
+}
+
+
+.agents-diff-line-sign {
+    text-align: center;
+    color: var(--color-text-tertiary);
+    min-height: 20px;
+}
+
+.agents-diff-line-text {
+    white-space: pre-wrap;
+    word-break: break-word;
+    color: var(--color-text-primary);
+}
+
+.form-input:disabled,
+.form-input[readonly] {
+    background: linear-gradient(to right, var(--color-bg) 0%, rgba(247, 241, 232, 0.5) 100%);
+    color: var(--color-text-tertiary);
+    cursor: not-allowed;
+    border-color: transparent;
+}
+
+.form-hint {
+    font-size: var(--font-size-caption);
+    color: var(--color-text-tertiary);
+    margin-top: 5px;
+    opacity: 0.8;
+}
+
+.form-hint.form-error {
+    color: var(--color-error);
+    opacity: 1;
+}