diff --git a/editor.py b/editor.py
index 0eb5f65..80947c6 100644
--- a/editor.py
+++ b/editor.py
@@ -1924,15 +1924,18 @@ a { color:var(--color-text-secondary); }
 .field label { display:block; color:var(--color-text-muted); font-size:13px; margin-bottom:5px; }
 .field input { width:100%; padding:9px 10px; background:var(--color-control); color:var(--color-text); border:1px solid var(--color-control-hover); border-radius:5px; font-size:15px; }
 .field.full { grid-column:1/-1; }
-.color-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px 18px; }
-.color-field { display:grid; grid-template-columns:1fr 52px; gap:8px; align-items:end; }
+.color-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px 18px; }
+.color-field { display:grid; grid-template-columns:minmax(0,1fr) 52px; gap:10px; align-items:end; padding:10px; background:var(--color-surface-alt); border:1px solid var(--color-border-subtle); border-radius:7px; }
 .color-field .text-wrap { min-width:0; }
-.color-field input[type=color] { width:52px; height:40px; padding:3px; background:var(--color-control); border:1px solid var(--color-control-hover); border-radius:5px; }
+.color-field label { display:flex; align-items:flex-end; min-height:2.5em; margin-bottom:6px; color:var(--color-text-muted); font-size:13px; line-height:1.25; }
+.color-field input:not([type=color]) { width:100%; min-width:0; padding:9px 10px; background:var(--color-control); color:var(--color-text); border:1px solid var(--color-control-hover); border-radius:5px; font-size:14px; font-family:ui-monospace,SFMono-Regular,Menlo,monospace; }
+.color-field input[type=color] { width:52px; height:40px; padding:3px; background:var(--color-control); border:1px solid var(--color-control-hover); border-radius:5px; cursor:pointer; }
 .actions { display:flex; gap:10px; flex-wrap:wrap; margin-top:20px; }
 button { border:0; border-radius:5px; padding:10px 16px; background:var(--color-primary); color:var(--color-white); font-size:15px; cursor:pointer; }
 button:hover { background:var(--color-primary-hover); }
 .note { color:var(--color-text-muted); font-size:13px; margin-top:8px; }
 .message { padding:10px 12px; border-radius:6px; margin-bottom:16px; background:var(--color-success); color:var(--color-success-text); }
+@media(max-width:900px) { .color-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } }
 @media(max-width:700px) { body { padding:12px; } .grid,.color-grid { grid-template-columns:1fr; } .field.full { grid-column:auto; } }
 </style>
 </head>