.hlcct{font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif}
.hlcct *{box-sizing:border-box}
.hlcct .row{display:flex;gap:12px;flex-wrap:wrap;align-items:flex-end;margin-bottom:12px}
.hlcct label{font-size:12px;color:#444;display:flex;flex-direction:column;gap:6px}
.hlcct select,.hlcct input,.hlcct button{padding:8px 10px;border:1px solid #ddd;border-radius:10px;font-size:14px}
.hlcct button{cursor:pointer}
.hlcct .hint{font-size:12px;color:#666;margin:6px 0 12px}
.hlcct .tabs{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:10px}
.hlcct .tabbtn{padding:8px 12px;border:1px solid #ddd;border-radius:999px;background:#fff}
.hlcct .tabbtn.active{border-color:#999}
.hlcct .layout{display:flex;gap:16px;align-items:flex-start}
.hlcct .panel{border:1px solid #ddd;border-radius:12px;padding:12px;background:#fff;min-width:0}
.hlcct .panel.left{flex:0 0 420px;max-width:420px}
.hlcct .panel.right{flex:1 1 auto}
.hlcct .swatch{width:100%;height:52px;border-radius:12px;border:1px solid rgba(0,0,0,.12)}
.hlcct .badges{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px}
.hlcct .badge{display:inline-block;padding:2px 10px;border-radius:999px;border:1px solid #ddd;font-size:12px;background:#fff}
.hlcct .kv{display:grid;grid-template-columns:120px 1fr;gap:6px 10px;margin-top:10px;font-size:13px}
.hlcct .kv div{font-variant-numeric:tabular-nums}
.hlcct .tableWrap{max-height:60vh;overflow:auto}
.hlcct table{border-collapse:collapse;width:100%;font-size:12px}
.hlcct th,.hlcct td{border-bottom:1px solid #eee;padding:6px 8px;text-align:left;white-space:nowrap}
.hlcct tr:hover{background:#fafafa;cursor:pointer}
.hlcct .palette{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px}
.hlcct .pswatch{width:44px;height:44px;border-radius:10px;border:1px solid rgba(0,0,0,.12);cursor:pointer}
.hlcct canvas{max-width:100%;border-radius:12px;border:1px solid #eee;background:#fafafa}
@media (max-width:1000px){.hlcct .layout{flex-direction:column}.hlcct .panel.left{flex:1 1 auto;max-width:none}}

/* Theme-proof button text (some WP themes set button text color to white).
   Our tab buttons have white background -> enforce readable text. */
.hlcct .tabbtn { color:#111 !important; background:#fff !important; }
.hlcct .tabbtn:hover { background:#f7f7f7 !important; }
.hlcct .tabbtn.active { border-color:#999 !important; }

/* Keep main action button readable in all themes */
.hlcct .run { background:#222 !important; color:#fff !important; border-color:#222 !important; }
.hlcct .run:hover { background:#000 !important; }