/*
 * arctools.css — shared styling for the public xat Utilities section (/tools/).
 *
 * Two layers live here:
 *   1. The tool-shell / landing chrome  (.arct-shell, .arct-toolbar, .arct-grid, .arct-card …)
 *   2. The portable generator widgets   (.arct-widget, .arct-field, .arct-colorfield,
 *      .arct-preview, .arct-outputbar …) — these are host-agnostic so the same markup can later
 *      be mounted inside a bot-settings tab unchanged (see docs/xat-tools.md "Widget architecture").
 *
 * Everything themes off the --arc-* tokens in arcbots.css (accent #6366f1). Never hard-code the
 * accent — use var(--arc-accent) / rgba(var(--arc-accent-rgb), a) so it follows the theme.
 */

/* ======================================================================
 * Landing: toolbar (search + category pills) + card grid
 * ====================================================================== */
.arct-toolbar { display:flex; flex-wrap:wrap; gap:12px; align-items:center; }
.arct-search-wrap { position:relative; flex:1 1 240px; min-width:200px; }
.arct-search-icon { position:absolute; left:10px; top:50%; transform:translateY(-50%); width:16px; height:16px; opacity:.5; }
.arct-search { width:100%; padding:8px 30px 8px 32px; border-radius:var(--arc-radius-sm,8px); border:1px solid var(--arc-border-strong,rgba(255,255,255,.12)); background:var(--arc-surface-2,rgba(0,0,0,.15)); color:inherit; }
.arct-search:focus { outline:none; border-color:var(--arc-accent,#6366f1); }
.arct-search-clear { position:absolute; right:6px; top:50%; transform:translateY(-50%); border:0; background:transparent; font-size:20px; line-height:1; color:inherit; opacity:.5; cursor:pointer; display:none; }

.arct-pills { display:flex; flex-wrap:wrap; gap:6px; }
.arct-pill { display:inline-flex; align-items:center; gap:5px; padding:6px 12px; border-radius:var(--arc-radius-pill,999px); border:1px solid var(--arc-border-strong,rgba(255,255,255,.12)); background:transparent; color:inherit; font-size:.82rem; cursor:pointer; transition:all .15s; }
.arct-pill svg { width:14px; height:14px; }
.arct-pill:hover { border-color:var(--arc-accent,#6366f1); }
.arct-pill.is-active { background:var(--arc-accent,#6366f1); border-color:var(--arc-accent,#6366f1); color:#fff; }

.arct-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(320px,1fr)); gap:18px; }
.arct-card { display:flex; flex-direction:column; border:1px solid var(--arc-border,rgba(255,255,255,.07)); border-radius:var(--arc-card-radius,14px); padding:18px; background:var(--arc-surface-1,rgba(255,255,255,.02)); transition:border-color var(--arc-transition,.2s), transform var(--arc-transition,.2s); }
.arct-card.is-soon { opacity:.7; }
a.arct-card { color:inherit; text-decoration:none; }
a.arct-card:hover { border-color:var(--arc-accent,#6366f1); transform:translateY(-2px); }
.arct-card-head { display:flex; align-items:center; gap:12px; margin-bottom:10px; }
.arct-card-icon { display:inline-flex; align-items:center; justify-content:center; width:42px; height:42px; border-radius:10px; background:var(--arc-accent,#6366f1); color:#fff; flex:none; }
.arct-card-icon svg { width:22px; height:22px; }
.arct-card-title { font-weight:700; margin:0; font-size:1rem; }
.arct-card-cat { font-size:.62rem; text-transform:uppercase; letter-spacing:.5px; opacity:.6; }
.arct-card-desc { font-size:.88rem; opacity:.85; margin:6px 0 12px; flex:1 1 auto; }
.arct-card-foot { display:flex; align-items:center; justify-content:space-between; gap:8px; }
.arct-card-code { font-size:.72rem; opacity:.7; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:60%; }

.arct-status-badge { font-size:.6rem; text-transform:uppercase; letter-spacing:.5px; padding:2px 7px; border-radius:var(--arc-radius-pill,999px); font-weight:700; }
.arct-status-stable { background:rgba(var(--arc-on-rgb,34,197,94),.18); color:var(--arc-on-color,#22c55e); }
.arct-status-beta { background:rgba(245,158,11,.18); color:var(--arc-warn-color,#f59e0b); }
.arct-status-soon { background:var(--arc-surface-3,rgba(255,255,255,.08)); color:var(--arc-text-muted,#9aa4bd); }

.arct-empty { text-align:center; padding:40px 0; opacity:.6; }

/* ======================================================================
 * Tool shell (single-tool page chrome): breadcrumb + header
 * ====================================================================== */
.arct-shell { max-width:980px; }
.arct-breadcrumb { display:flex; align-items:center; gap:6px; font-size:.82rem; opacity:.7; margin-bottom:14px; }
.arct-breadcrumb a { color:inherit; }
.arct-breadcrumb svg { width:13px; height:13px; }
.arct-tool-head { display:flex; align-items:flex-start; gap:14px; margin-bottom:6px; }
.arct-tool-head .arct-card-icon { width:48px; height:48px; }
.arct-tool-title { font-weight:700; margin:0; display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.arct-tool-desc { opacity:.8; margin:4px 0 0; font-size:.92rem; }

/* ======================================================================
 * Widget shell + fields (portable — host-agnostic)
 * ====================================================================== */
.arct-widget { display:grid; grid-template-columns:1fr 1fr; gap:22px; margin-top:22px; align-items:start; }
.arct-widget-controls { display:flex; flex-direction:column; gap:16px; }
.arct-panel { border:1px solid var(--arc-border,rgba(255,255,255,.07)); border-radius:var(--arc-card-radius,14px); padding:18px; background:var(--arc-surface-1,rgba(255,255,255,.02)); }
.arct-panel-label { font-size:.7rem; text-transform:uppercase; letter-spacing:.5px; opacity:.6; margin-bottom:12px; display:flex; align-items:center; gap:5px; }
.arct-panel-label svg { width:13px; height:13px; }

.arct-field { display:flex; flex-direction:column; gap:6px; }
.arct-field + .arct-field { margin-top:14px; }
.arct-field-label { font-size:.8rem; font-weight:600; opacity:.85; display:flex; align-items:center; justify-content:space-between; gap:8px; }
.arct-input { width:100%; padding:8px 10px; border-radius:var(--arc-radius-sm,8px); border:1px solid var(--arc-border-strong,rgba(255,255,255,.12)); background:var(--arc-surface-2,rgba(0,0,0,.15)); color:inherit; font-size:.9rem; }
.arct-input:focus { outline:none; border-color:var(--arc-accent,#6366f1); }
.arct-help { font-size:.74rem; opacity:.6; margin:0; }

/* arc-colorfield: native color swatch ⇄ hex text input */
.arct-colorfield { display:flex; align-items:center; gap:8px; }
.arct-colorfield.is-disabled { opacity:.4; pointer-events:none; }
.arct-swatch { width:38px; height:38px; flex:none; border-radius:var(--arc-radius-sm,8px); border:1px solid var(--arc-border-strong,rgba(255,255,255,.12)); padding:0; cursor:pointer; overflow:hidden; background:none; }
.arct-swatch::-webkit-color-swatch-wrapper { padding:0; }
.arct-swatch::-webkit-color-swatch { border:0; border-radius:6px; }
.arct-swatch::-moz-color-swatch { border:0; border-radius:6px; }
.arct-hex-wrap { position:relative; flex:1 1 auto; }
.arct-hex-prefix { position:absolute; left:10px; top:50%; transform:translateY(-50%); opacity:.5; font-size:.9rem; pointer-events:none; }
.arct-hexinput { width:100%; padding:8px 10px 8px 22px; border-radius:var(--arc-radius-sm,8px); border:1px solid var(--arc-border-strong,rgba(255,255,255,.12)); background:var(--arc-surface-2,rgba(0,0,0,.15)); color:inherit; font-family:ui-monospace,SFMono-Regular,Menlo,monospace; letter-spacing:1px; text-transform:uppercase; }
.arct-hexinput:focus { outline:none; border-color:var(--arc-accent,#6366f1); }

/* toggle switch (used for "glow on/off" etc.) */
.arct-toggle { display:inline-flex; align-items:center; gap:8px; cursor:pointer; user-select:none; font-size:.82rem; }
.arct-toggle input { position:absolute; opacity:0; width:0; height:0; }
.arct-toggle-track { width:38px; height:21px; border-radius:999px; background:var(--arc-surface-3,rgba(255,255,255,.12)); position:relative; transition:background var(--arc-transition,.2s); flex:none; }
.arct-toggle-track::after { content:""; position:absolute; top:2px; left:2px; width:17px; height:17px; border-radius:50%; background:#fff; transition:transform var(--arc-transition,.2s); }
.arct-toggle input:checked + .arct-toggle-track { background:var(--arc-accent,#6366f1); }
.arct-toggle input:checked + .arct-toggle-track::after { transform:translateX(17px); }

/* small color-letter chooser (r/g/b shortcuts) */
.arct-letters { display:flex; gap:6px; }
.arct-letter { width:30px; height:30px; border-radius:var(--arc-radius-sm,8px); border:1px solid var(--arc-border-strong,rgba(255,255,255,.12)); background:transparent; color:inherit; cursor:pointer; font-weight:700; }
.arct-letter.is-active { border-color:var(--arc-accent,#6366f1); box-shadow:0 0 0 2px var(--arc-glow,rgba(99,102,241,.35)); }

/* ======================================================================
 * arc-livepreview: a xat-style name / status / smiley preview
 * ====================================================================== */
.arct-preview { border:1px solid var(--arc-border,rgba(255,255,255,.07)); border-radius:var(--arc-card-radius,14px); padding:0; overflow:hidden; background:var(--arc-surface-1,rgba(255,255,255,.02)); }
.arct-preview-bar { font-size:.7rem; text-transform:uppercase; letter-spacing:.5px; opacity:.55; padding:10px 14px; border-bottom:1px solid var(--arc-border,rgba(255,255,255,.07)); display:flex; align-items:center; justify-content:space-between; }
.arct-preview-stage { display:flex; align-items:center; justify-content:center; min-height:120px; padding:24px; background:
   linear-gradient(45deg, rgba(255,255,255,.03) 25%, transparent 25%, transparent 75%, rgba(255,255,255,.03) 75%) 0 0/24px 24px,
   linear-gradient(45deg, rgba(255,255,255,.03) 25%, transparent 25%, transparent 75%, rgba(255,255,255,.03) 75%) 12px 12px/24px 24px; }
.arct-preview-stage.is-light { background-color:#e9ecf3; }
.arct-preview-name { font-size:2rem; font-weight:700; line-height:1.2; word-break:break-word; text-align:center; }
.arct-preview-toggle { border:1px solid var(--arc-border-strong,rgba(255,255,255,.12)); background:transparent; color:inherit; font-size:.66rem; padding:2px 8px; border-radius:var(--arc-radius-pill,999px); cursor:pointer; opacity:.8; }

/* gradient / wave name rendering helpers (set inline by JS) */
.arct-name-grad { -webkit-background-clip:text; background-clip:text; color:transparent; -webkit-text-fill-color:transparent; }
.arct-name-wave { background-size:200% auto; animation:arctNameWave linear infinite; }
@keyframes arctNameWave { 0% { background-position:200% center; } 100% { background-position:0% center; } }

/* ======================================================================
 * arc-outputbar: read-only code field + Copy (+ host slot)
 * ====================================================================== */
.arct-outputbar { margin-top:22px; }
.arct-output-row { display:flex; gap:8px; align-items:stretch; }
.arct-output-code { flex:1 1 auto; padding:12px 14px; border-radius:var(--arc-radius-sm,8px); border:1px solid var(--arc-border-strong,rgba(255,255,255,.12)); background:var(--arc-surface-2,rgba(0,0,0,.2)); color:inherit; font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:1rem; }
.arct-output-code:focus { outline:none; border-color:var(--arc-accent,#6366f1); }
.arct-copy-btn { flex:none; display:inline-flex; align-items:center; gap:6px; padding:0 16px; border-radius:var(--arc-radius-sm,8px); border:0; background:var(--arc-accent,#6366f1); color:#fff; font-weight:600; cursor:pointer; transition:background var(--arc-transition,.2s); }
.arct-copy-btn:hover { background:var(--arc-accent-hover,#818cf8); }
.arct-copy-btn.is-success { background:var(--arc-on-color,#22c55e); }
.arct-copy-btn svg { width:15px; height:15px; }
.arct-output-slot { margin-top:10px; }
.arct-output-hint { font-size:.78rem; opacity:.65; margin:10px 0 0; display:flex; align-items:flex-start; gap:6px; }
.arct-output-hint svg { width:14px; height:14px; flex:none; margin-top:2px; }

/* tiny toast for "copied" feedback */
.arct-toast { position:fixed; bottom:24px; left:50%; transform:translateX(-50%) translateY(20px); background:var(--arc-surface-3,#1e2538); color:var(--arc-text,#e6e9f2); border:1px solid var(--arc-border-strong,rgba(255,255,255,.12)); padding:10px 18px; border-radius:var(--arc-radius-pill,999px); font-size:.85rem; box-shadow:var(--arc-shadow-lg,0 12px 40px rgba(0,0,0,.45)); opacity:0; pointer-events:none; transition:opacity .2s, transform .2s; z-index:9999; }
.arct-toast.is-show { opacity:1; transform:translateX(-50%) translateY(0); }

/* ======================================================================
 * colour stops / segmented / range / fancy-text rows
 * ====================================================================== */
.arct-stops { display:flex; flex-direction:column; gap:8px; }
.arct-stops-list { display:flex; flex-direction:column; gap:8px; }
.arct-stop-row { display:flex; align-items:center; gap:8px; }
.arct-stop-row .arct-colorfield { flex:1 1 auto; }
.arct-stop-remove { flex:none; width:34px; height:34px; border-radius:var(--arc-radius-sm,8px); border:1px solid var(--arc-border-strong,rgba(255,255,255,.12)); background:transparent; color:inherit; font-size:18px; line-height:1; cursor:pointer; opacity:.7; }
.arct-stop-remove:hover:not(:disabled) { border-color:var(--arc-off-color,#f43f5e); color:var(--arc-off-color,#f43f5e); opacity:1; }
.arct-stop-remove:disabled { opacity:.25; cursor:not-allowed; }
.arct-stop-add { align-self:flex-start; border:1px dashed var(--arc-border-strong,rgba(255,255,255,.12)); background:transparent; color:inherit; padding:6px 12px; border-radius:var(--arc-radius-sm,8px); cursor:pointer; font-size:.82rem; opacity:.85; }
.arct-stop-add:hover { border-color:var(--arc-accent,#6366f1); color:var(--arc-accent,#6366f1); opacity:1; }

.arct-range { width:100%; accent-color:var(--arc-accent,#6366f1); }
.arct-range-val { font-variant-numeric:tabular-nums; opacity:.8; min-width:48px; text-align:right; }

.arct-seg { display:flex; gap:6px; flex-wrap:wrap; }
.arct-seg-btn { border:1px solid var(--arc-border-strong,rgba(255,255,255,.12)); background:transparent; color:inherit; padding:6px 11px; border-radius:var(--arc-radius-sm,8px); cursor:pointer; font-size:.8rem; transition:all .15s; }
.arct-seg-btn:hover { border-color:var(--arc-accent,#6366f1); }
.arct-seg-btn.is-active { background:var(--arc-accent,#6366f1); border-color:var(--arc-accent,#6366f1); color:#fff; }

.arct-fancy-list { display:flex; flex-direction:column; gap:8px; }
.arct-fancy-row { display:flex; align-items:center; gap:12px; padding:10px 12px; border:1px solid var(--arc-border,rgba(255,255,255,.07)); border-radius:10px; background:var(--arc-surface-1,rgba(255,255,255,.02)); cursor:pointer; transition:border-color var(--arc-transition,.2s); }
.arct-fancy-row:hover { border-color:var(--arc-accent,#6366f1); }
.arct-fancy-name { font-size:.66rem; text-transform:uppercase; letter-spacing:.5px; opacity:.55; flex:none; width:110px; }
.arct-fancy-out { flex:1 1 auto; font-size:1.15rem; word-break:break-word; }
.arct-fancy-copy { flex:none; opacity:.55; display:inline-flex; }
.arct-fancy-copy svg { width:16px; height:16px; }
.arct-fancy-row:hover .arct-fancy-copy { opacity:1; }

/* ======================================================================
 * smiley field (name + thumbnail + search picker) and effect/avatar bits
 * ====================================================================== */
.arct-smiley-field { position:relative; }
.arct-smiley-input-row { display:flex; align-items:center; gap:8px; }
.arct-smiley-thumb { flex:none; width:38px; height:38px; border-radius:var(--arc-radius-sm,8px); border:1px solid var(--arc-border-strong,rgba(255,255,255,.12)); background:var(--arc-surface-2,rgba(0,0,0,.15)); display:inline-flex; align-items:center; justify-content:center; overflow:hidden; }
.arct-smiley-thumb img { max-width:28px; max-height:28px; image-rendering:pixelated; }
.arct-smiley-thumb.is-missing img { display:none; }
.arct-smiley-results { position:absolute; z-index:30; left:0; right:0; top:100%; margin-top:6px; background:var(--arc-surface-2,#171d2e); border:1px solid var(--arc-border-strong,rgba(255,255,255,.12)); border-radius:10px; padding:8px; box-shadow:var(--arc-shadow-lg,0 12px 40px rgba(0,0,0,.45)); display:grid; grid-template-columns:repeat(auto-fill,minmax(72px,1fr)); gap:6px; max-height:230px; overflow:auto; }
.arct-smiley-opt { display:flex; flex-direction:column; align-items:center; gap:4px; padding:6px 4px; border:1px solid transparent; border-radius:8px; background:transparent; color:inherit; cursor:pointer; font-size:.66rem; }
.arct-smiley-opt:hover { border-color:var(--arc-accent,#6366f1); background:var(--arc-surface-3,rgba(255,255,255,.08)); }
.arct-smiley-opt img { width:24px; height:24px; object-fit:contain; image-rendering:pixelated; }
.arct-smiley-opt span { max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

/* effect preview (smiley image with live CSS effects) + colour-target swatch */
.arct-fx-stage { display:flex; align-items:center; justify-content:center; gap:18px; min-height:120px; }
.arct-fx-smiley { width:72px; height:72px; object-fit:contain; image-rendering:pixelated; transition:transform .2s, filter .2s; }
.arct-fx-spin { animation:arctSpin linear infinite; }
@keyframes arctSpin { from { transform:rotate(0deg); } to { transform:rotate(360deg); } }
.arct-fx-arrow { opacity:.4; }
.arct-swatch-big { width:64px; height:64px; border-radius:12px; border:1px solid var(--arc-border-strong,rgba(255,255,255,.12)); }

/* letter colour builder (r/g/b +/- chips) */
.arct-letterbuild { display:flex; flex-direction:column; gap:8px; }
.arct-letterbuild-keys { display:flex; gap:6px; flex-wrap:wrap; }
.arct-key { min-width:34px; height:34px; padding:0 8px; border-radius:var(--arc-radius-sm,8px); border:1px solid var(--arc-border-strong,rgba(255,255,255,.12)); background:transparent; color:inherit; cursor:pointer; font-weight:700; }
.arct-key:hover { border-color:var(--arc-accent,#6366f1); }
.arct-key-r { color:#ff6b6b; } .arct-key-g { color:#51cf66; } .arct-key-b { color:#5c7cfa; }
.arct-letterbuild-out { font-family:ui-monospace,SFMono-Regular,Menlo,monospace; letter-spacing:1px; padding:8px 10px; border-radius:var(--arc-radius-sm,8px); background:var(--arc-surface-2,rgba(0,0,0,.2)); border:1px solid var(--arc-border-strong,rgba(255,255,255,.12)); min-height:36px; }

/* avatar browser grid */
.arct-av-toolbar { display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-bottom:14px; }
.arct-av-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(76px,1fr)); gap:10px; }
.arct-av-cell { display:flex; flex-direction:column; align-items:center; gap:4px; padding:8px 4px; border:1px solid var(--arc-border,rgba(255,255,255,.07)); border-radius:10px; background:var(--arc-surface-1,rgba(255,255,255,.02)); cursor:pointer; transition:border-color var(--arc-transition,.2s); }
.arct-av-cell:hover { border-color:var(--arc-accent,#6366f1); }
.arct-av-cell img { width:50px; height:50px; object-fit:contain; }
.arct-av-num { font-size:.7rem; opacity:.7; font-variant-numeric:tabular-nums; }
.arct-pager { display:flex; align-items:center; gap:10px; justify-content:center; margin-top:16px; }
.arct-pager button { border:1px solid var(--arc-border-strong,rgba(255,255,255,.12)); background:transparent; color:inherit; padding:6px 14px; border-radius:var(--arc-radius-sm,8px); cursor:pointer; }
.arct-pager button:hover:not(:disabled) { border-color:var(--arc-accent,#6366f1); }
.arct-pager button:disabled { opacity:.4; cursor:not-allowed; }

/* ======================================================================
 * power lookup (search results + detail) and colour converter
 * ====================================================================== */
.arct-pw-results { display:grid; grid-template-columns:repeat(auto-fill,minmax(190px,1fr)); gap:10px; margin-top:14px; }
.arct-pw-card { display:flex; align-items:center; gap:10px; padding:10px; border:1px solid var(--arc-border,rgba(255,255,255,.07)); border-radius:10px; background:var(--arc-surface-1,rgba(255,255,255,.02)); cursor:pointer; text-align:left; color:inherit; width:100%; }
.arct-pw-card:hover { border-color:var(--arc-accent,#6366f1); }
.arct-pw-card.is-active { border-color:var(--arc-accent,#6366f1); box-shadow:0 0 0 2px var(--arc-glow,rgba(99,102,241,.35)); }
.arct-pw-card img { width:34px; height:34px; object-fit:contain; flex:none; image-rendering:pixelated; }
.arct-pw-card-body { min-width:0; flex:1 1 auto; }
.arct-pw-card-name { font-weight:600; font-size:.9rem; text-transform:capitalize; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.arct-pw-card-meta { font-size:.72rem; opacity:.7; }
.arct-pw-badge { display:inline-block; font-size:.58rem; text-transform:uppercase; letter-spacing:.5px; padding:1px 6px; border-radius:var(--arc-radius-pill,999px); font-weight:700; }
.arct-pw-detail-head { display:flex; align-items:center; gap:14px; }
.arct-pw-detail-head img { width:56px; height:56px; object-fit:contain; image-rendering:pixelated; }
.arct-pw-detail-head h5 { margin:0; text-transform:capitalize; }
.arct-pw-stats { display:flex; flex-wrap:wrap; gap:10px 26px; margin-top:14px; font-size:.9rem; }
.arct-pw-stat b { display:block; font-size:.62rem; text-transform:uppercase; letter-spacing:.5px; opacity:.55; font-weight:700; margin-bottom:2px; }
.arct-pw-smilies { display:flex; flex-wrap:wrap; gap:6px; margin-top:8px; }
.arct-pw-smiley { display:inline-flex; align-items:center; gap:5px; padding:4px 8px; border:1px solid var(--arc-border-strong,rgba(255,255,255,.12)); border-radius:8px; background:transparent; color:inherit; cursor:pointer; font-size:.78rem; }
.arct-pw-smiley:hover { border-color:var(--arc-accent,#6366f1); }
.arct-pw-smiley img { width:18px; height:18px; image-rendering:pixelated; }
.arct-pw-empty { opacity:.6; padding:20px 0; text-align:center; }

.arct-cc-swatch { width:100%; height:96px; border-radius:12px; border:1px solid var(--arc-border-strong,rgba(255,255,255,.12)); }
.arct-cc-outputs { display:flex; flex-direction:column; gap:8px; margin-top:14px; }
.arct-cc-out { display:flex; align-items:center; gap:8px; }
.arct-cc-out code { flex:1 1 auto; padding:8px 10px; border-radius:var(--arc-radius-sm,8px); background:var(--arc-surface-2,rgba(0,0,0,.2)); border:1px solid var(--arc-border-strong,rgba(255,255,255,.12)); font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:.85rem; }

/* ======================================================================
 * chips — non-interactive info tags (reference lists). Distinct from the
 * interactive .arct-seg-btn so they don't read as clickable buttons.
 * ====================================================================== */
.arct-chips { display:flex; flex-wrap:wrap; gap:6px; }
.arct-chip { display:inline-flex; align-items:center; gap:5px; padding:5px 11px; border-radius:var(--arc-radius-pill,999px); border:1px solid var(--arc-border,rgba(255,255,255,.07)); background:var(--arc-surface-2,rgba(255,255,255,.03)); color:var(--arc-text-muted,#9aa4bd); font-size:.8rem; }
.arct-chip-accent { color:var(--arc-accent,#6366f1); border-color:rgba(var(--arc-accent-rgb,99,102,241),.5); background:rgba(var(--arc-accent-rgb,99,102,241),.10); }
a.arct-chip { text-decoration:none; transition:border-color var(--arc-transition,.2s), color var(--arc-transition,.2s); }
a.arct-chip:hover { border-color:var(--arc-accent,#6366f1); color:var(--arc-text,#e6e9f2); }
a.arct-chip svg { width:13px; height:13px; opacity:.7; }

/* checklist — clearly non-interactive feature list (reference pages) */
.arct-checklist { display:grid; grid-template-columns:repeat(auto-fill,minmax(190px,1fr)); gap:8px 18px; }
.arct-checklist-item { display:flex; align-items:center; gap:8px; font-size:.88rem; }
.arct-checklist-item svg { width:15px; height:15px; flex:none; color:var(--arc-on-color,#22c55e); }
.arct-checklist-item.is-accent svg { color:var(--arc-accent,#6366f1); }

/* primary action button / link */
.arct-btn { display:inline-flex; align-items:center; gap:7px; padding:9px 16px; border-radius:var(--arc-radius-sm,8px); background:var(--arc-accent,#6366f1); color:#fff; font-weight:600; text-decoration:none; border:0; cursor:pointer; transition:background var(--arc-transition,.2s); }
.arct-btn:hover { background:var(--arc-accent-hover,#818cf8); color:#fff; }
.arct-btn svg { width:15px; height:15px; }

/* ======================================================================
 * popup editor (arctools-modal.js) — hosts a generator widget in-page
 * ====================================================================== */
.arct-modal-overlay { position:fixed; inset:0; z-index:10000; display:flex; align-items:flex-start; justify-content:center; padding:5vh 16px; background:rgba(5,8,14,.66); opacity:0; transition:opacity .15s; overflow:auto; }
.arct-modal-overlay.is-open { opacity:1; }
.arct-modal { width:min(760px,94vw); background:var(--arc-surface-1,#121725); color:var(--arc-text,#e6e9f2); border:1px solid var(--arc-border-strong,rgba(255,255,255,.12)); border-radius:var(--arc-card-radius,14px); box-shadow:var(--arc-shadow-lg,0 12px 40px rgba(0,0,0,.45)); display:flex; flex-direction:column; max-height:90vh; transform:translateY(-8px); transition:transform .15s; }
.arct-modal-overlay.is-open .arct-modal { transform:none; }
.arct-modal-head { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:14px 18px; border-bottom:1px solid var(--arc-border,rgba(255,255,255,.07)); }
.arct-modal-title { margin:0; font-size:1.05rem; font-weight:700; }
.arct-modal-close { border:0; background:transparent; color:inherit; font-size:26px; line-height:1; cursor:pointer; opacity:.6; padding:0 4px; }
.arct-modal-close:hover { opacity:1; }
.arct-modal-body { padding:18px; overflow:auto; }
.arct-modal-modes { margin-bottom:10px; }
.arct-modal-foot { display:flex; align-items:center; justify-content:flex-end; gap:8px; padding:14px 18px; border-top:1px solid var(--arc-border,rgba(255,255,255,.07)); }
.arct-btn-ghost { background:transparent; border:1px solid var(--arc-border-strong,rgba(255,255,255,.12)); color:inherit; }
.arct-btn-ghost:hover { background:var(--arc-surface-3,rgba(255,255,255,.08)); color:var(--arc-text,#e6e9f2); }
.arct-modal .arct-widget { margin-top:6px; }
@media (max-width:680px){ .arct-modal .arct-widget { grid-template-columns:1fr; } }

/* native colour swatch that replaces the inert panel bootstrap-colorpicker addons */
.colorpicker-input-addon { padding:0 !important; overflow:hidden; }
.colorpicker-input-addon:before { display:none !important; }  /* kill the plugin's checkered "no colour" pseudo (it survives innerHTML wipe) */
.arct-input-swatch { width:40px; min-width:40px; height:100%; min-height:36px; border:0; padding:0; margin:0; background:none; cursor:pointer; display:block; }
.arct-input-swatch::-webkit-color-swatch-wrapper { padding:0; }   /* fill the box edge-to-edge */
.arct-input-swatch::-webkit-color-swatch { border:0; }
.arct-input-swatch::-moz-color-swatch { border:0; }

/* dark code block (scroller PHP snippet etc.) */
.arct-codeblock { margin:0; padding:16px; font-size:.8rem; line-height:1.55; white-space:pre-wrap; word-break:break-word; font-family:ui-monospace,SFMono-Regular,Menlo,monospace; color:var(--arc-text,#e6e9f2); background:var(--arc-surface-2,#171d2e); border:0; }

@media (max-width:767px){
  .arct-widget { grid-template-columns:1fr; }
  .arct-grid { grid-template-columns:1fr; }
}