/* custom-commands.css — تصميم صانع الأوامر المخصصة (يتوافق مع ثيم اللوحة: أسود + فضي) */
#customCommandsPanel {
    --cc-bg: var(--card-bg, #14161B);
    --cc-bg2: var(--card-bg-2, #191B21);
    --cc-bg3: #20232a;
    --cc-border: var(--border-color, #2B2E35);
    --cc-border2: var(--border-strong, #3D414A);
    --cc-text: var(--text-light, #E7E9EC);
    --cc-muted: var(--text-muted, #94A3B8);
    --cc-dim: var(--text-dim, #64748B);
    --cc-accent: var(--silver, #C6CFDA);
    --cc-steel: var(--steel-blue, #8FA6BE);
    --cc-brass: var(--brass, #D4AF5A);
    --cc-danger: var(--danger, #E2545B);
    --cc-ok: #3fb97f;
    color: var(--cc-text);
}
#customCommandsPanel * { box-sizing: border-box; }
#customCommandsPanel code { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; background: rgba(143,166,190,.12); padding: 1px 7px; border-radius: 6px; font-size: .92em; color: var(--cc-accent); }
#customCommandsPanel small { color: var(--cc-muted); }

/* ───── أزرار ───── */
.cc-btn { display: inline-flex; align-items: center; justify-content: center; gap: 7px; padding: 9px 16px; border-radius: 10px; border: 1px solid var(--cc-border2); background: var(--cc-bg2); color: var(--cc-text); font: inherit; font-size: .92rem; cursor: pointer; transition: background .15s, border-color .15s, transform .1s, opacity .15s; min-height: 38px; }
.cc-btn:hover { background: var(--cc-bg3); border-color: var(--cc-steel); }
.cc-btn:active { transform: translateY(1px); }
.cc-btn:focus-visible, .cc-iconbtn:focus-visible, .cc-input:focus-visible, .cc-seg:focus-visible, .cc-tab:focus-visible, .cc-pitem:focus-visible { outline: 2px solid var(--cc-steel); outline-offset: 2px; }
.cc-btn[disabled] { opacity: .55; cursor: not-allowed; }
.cc-btn-primary { background: linear-gradient(135deg, #C6CFDA, #8FA6BE); color: #0b0c0f; border-color: transparent; font-weight: 700; }
.cc-btn-primary:hover { background: linear-gradient(135deg, #dbe2ea, #a3b8cd); }
.cc-btn-danger { color: #ffb3b6; border-color: rgba(226,84,91,.45); background: rgba(226,84,91,.1); }
.cc-btn-danger:hover { background: rgba(226,84,91,.2); border-color: var(--cc-danger); }
.cc-btn-sm { padding: 5px 11px; font-size: .82rem; min-height: 30px; border-radius: 8px; }
.cc-btn-lg { padding: 12px 22px; font-size: 1rem; }
.cc-btn-add { width: 100%; border-style: dashed; color: var(--cc-muted); background: transparent; margin-top: 10px; }
.cc-btn-add:hover { color: var(--cc-text); }
.cc-iconbtn { width: 32px; height: 32px; display: inline-flex; align-items: center; justify-content: center; border-radius: 8px; border: 1px solid transparent; background: transparent; color: var(--cc-muted); cursor: pointer; font-size: .85rem; }
.cc-iconbtn:hover { background: var(--cc-bg3); color: var(--cc-text); }
.cc-iconbtn.cc-danger:hover { background: rgba(226,84,91,.15); color: #ffb3b6; }
.cc-spacer { flex: 1 1 auto; }

/* ───── الصفحة الرئيسية للقائمة ───── */
.cc-hero { display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap; padding: 22px 24px; border-radius: 16px; border: 1px solid var(--cc-border); background: linear-gradient(135deg, rgba(143,166,190,.12), rgba(20,22,27,.9)); margin-bottom: 18px; }
.cc-hero h3 { margin: 0 0 6px; font-size: 1.3rem; display: flex; align-items: center; gap: 10px; }
.cc-hero p { margin: 0 0 12px; color: var(--cc-muted); line-height: 1.8; max-width: 640px; }
.cc-hero-meta { display: flex; gap: 8px; flex-wrap: wrap; }
.cc-pill { display: inline-flex; align-items: center; gap: 6px; padding: 4px 12px; border-radius: 999px; background: rgba(143,166,190,.12); border: 1px solid var(--cc-border2); font-size: .8rem; color: var(--cc-accent); }
.cc-pill.premium { color: var(--cc-brass); border-color: rgba(212,175,90,.5); background: rgba(212,175,90,.1); }

.cc-tpl { border: 1px solid var(--cc-border); border-radius: 14px; background: var(--cc-bg); margin-bottom: 18px; }
.cc-tpl > summary { cursor: pointer; padding: 14px 18px; font-weight: 700; display: flex; align-items: center; gap: 9px; list-style: none; }
.cc-tpl > summary::-webkit-details-marker { display: none; }
.cc-tpl[open] > summary { border-bottom: 1px solid var(--cc-border); }
.cc-tpl-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 12px; padding: 16px; }
.cc-tpl-item { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; text-align: start; padding: 14px; border-radius: 12px; border: 1px solid var(--cc-border); background: var(--cc-bg2); color: var(--cc-text); cursor: pointer; font: inherit; transition: border-color .15s, transform .15s; }
.cc-tpl-item:hover { border-color: var(--cc-steel); transform: translateY(-2px); }
.cc-tpl-item small { line-height: 1.6; }
.cc-tpl-ico { width: 36px; height: 36px; display: inline-flex; align-items: center; justify-content: center; border-radius: 10px; background: rgba(143,166,190,.15); color: var(--cc-accent); }

.cc-search { margin-bottom: 14px; max-width: 420px; }
.cc-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(330px, 1fr)); gap: 14px; }
.cc-card { border: 1px solid var(--cc-border); border-radius: 14px; background: var(--cc-bg); padding: 16px; display: flex; flex-direction: column; gap: 10px; transition: border-color .15s; }
.cc-card:hover { border-color: var(--cc-border2); }
.cc-card.off { opacity: .6; }
.cc-card-top { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.cc-cmdname { font-size: 1.05rem !important; padding: 3px 10px !important; }
.cc-alias-list { display: inline-flex; gap: 5px; flex-wrap: wrap; }
.cc-alias-list code { font-size: .75rem; opacity: .8; }
.cc-desc { margin: 0; color: var(--cc-muted); font-size: .9rem; line-height: 1.6; }
.cc-meta { display: flex; flex-wrap: wrap; gap: 6px 14px; color: var(--cc-muted); font-size: .8rem; }
.cc-meta span { display: inline-flex; align-items: center; gap: 5px; }
.cc-card-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: auto; padding-top: 4px; }
.cc-empty { grid-column: 1 / -1; text-align: center; padding: 38px 16px; border: 1px dashed var(--cc-border2); border-radius: 14px; color: var(--cc-muted); }
.cc-empty i { font-size: 2rem; opacity: .6; }
.cc-loading { text-align: center; padding: 50px; color: var(--cc-muted); }

.cc-switch { position: relative; width: 44px; height: 24px; flex: 0 0 auto; cursor: pointer; }
.cc-switch input { opacity: 0; width: 0; height: 0; position: absolute; }
.cc-slider { position: absolute; inset: 0; background: var(--cc-border2); border-radius: 999px; transition: background .2s; }
.cc-slider::before { content: ''; position: absolute; width: 18px; height: 18px; top: 3px; inset-inline-start: 3px; background: #fff; border-radius: 50%; transition: transform .2s; }
.cc-switch input:checked + .cc-slider { background: var(--cc-ok); }
.cc-switch input:checked + .cc-slider::before { transform: translateX(-20px); }
[dir="ltr"] .cc-switch input:checked + .cc-slider::before { transform: translateX(20px); }
.cc-switch input:focus-visible + .cc-slider { outline: 2px solid var(--cc-steel); outline-offset: 2px; }

/* ───── المحرر ───── */
.cc-topbar { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-bottom: 16px; }
.cc-topbar h3 { margin: 0; font-size: 1.2rem; }
.cc-section { border: 1px solid var(--cc-border); border-radius: 16px; background: var(--cc-bg); margin-bottom: 18px; overflow: visible; }
.cc-sec-head { display: flex; align-items: center; gap: 14px; padding: 16px 20px; border-bottom: 1px solid var(--cc-border); }
.cc-sec-head h4 { margin: 0; font-size: 1.05rem; }
.cc-sec-ico { width: 38px; height: 38px; display: inline-flex; align-items: center; justify-content: center; border-radius: 11px; background: rgba(143,166,190,.15); color: var(--cc-accent); flex: 0 0 auto; }
.cc-sec-body { padding: 18px 20px; display: flex; flex-direction: column; gap: 14px; }

.cc-field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.cc-label { font-size: .86rem; font-weight: 700; color: var(--cc-accent); display: flex; align-items: center; gap: 6px; }
.cc-hint { font-size: .78rem; color: var(--cc-dim); line-height: 1.6; }
.cc-hint.cc-warn { color: var(--cc-brass); }
.cc-input { width: 100%; padding: 10px 13px; border-radius: 10px; border: 1px solid var(--cc-border2); background: var(--cc-bg2); color: var(--cc-text); font: inherit; font-size: .93rem; transition: border-color .15s; min-height: 40px; }
.cc-input:focus { border-color: var(--cc-steel); outline: none; }
.cc-input::placeholder { color: var(--cc-dim); }
.cc-textarea { resize: vertical; line-height: 1.7; min-height: 70px; }
.cc-select { appearance: auto; }
.cc-prefix { max-width: 110px; text-align: center; font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 1.15rem; font-weight: 700; }
.cc-quick { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 8px; }
.cc-grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; align-items: start; }
.cc-inline { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.cc-inline .cc-input { width: 90px; }
.cc-checks { display: flex; flex-direction: column; gap: 10px; }
.cc-check { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.cc-check input[type=checkbox] { width: 18px; height: 18px; accent-color: #8FA6BE; flex: 0 0 auto; cursor: pointer; }
.cc-check label { cursor: pointer; font-size: .92rem; }
.cc-check .cc-hint { flex-basis: 100%; margin-inline-start: 28px; }
.cc-color { width: 52px; height: 38px; padding: 2px; border-radius: 8px; border: 1px solid var(--cc-border2); background: var(--cc-bg2); cursor: pointer; }
.cc-livecmd { padding: 11px 14px; border-radius: 10px; background: rgba(143,166,190,.08); border: 1px dashed var(--cc-border2); font-size: .9rem; color: var(--cc-muted); }
.cc-livecmd code { font-size: 1rem; }
.cc-aliases { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.cc-alias-input { width: 190px; }

/* ───── chips + قوائم البحث ───── */
.cc-chip { display: inline-flex; align-items: center; gap: 6px; padding: 3px 6px 3px 10px; border-radius: 999px; background: rgba(143,166,190,.16); border: 1px solid var(--cc-border2); font-size: .84rem; max-width: 100%; }
.cc-chip-missing { border-color: rgba(226,84,91,.6); color: #ffb3b6; background: rgba(226,84,91,.1); }
.cc-chip-x { border: 0; background: transparent; color: var(--cc-muted); cursor: pointer; font-size: 1.1rem; line-height: 1; padding: 0 5px; border-radius: 50%; }
.cc-chip-x:hover { color: #fff; background: rgba(226,84,91,.5); }
.cc-dot { width: 10px; height: 10px; border-radius: 50%; display: inline-block; flex: 0 0 auto; border: 1px solid rgba(255,255,255,.25); }
.cc-ss { position: relative; }
.cc-ss-box { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; padding: 6px 8px; min-height: 42px; border-radius: 10px; border: 1px solid var(--cc-border2); background: var(--cc-bg2); cursor: text; }
.cc-ss-box:focus-within { border-color: var(--cc-steel); }
.cc-ss-input { flex: 1 1 120px; min-width: 100px; border: 0; background: transparent; color: var(--cc-text); font: inherit; font-size: .9rem; padding: 4px; outline: none; }
.cc-ss-dd { position: absolute; top: calc(100% + 4px); inset-inline: 0; z-index: 60; max-height: 240px; overflow-y: auto; background: #1b1e25; border: 1px solid var(--cc-border2); border-radius: 10px; box-shadow: 0 14px 34px rgba(0,0,0,.55); }
.cc-ss-item { display: flex; align-items: center; gap: 8px; padding: 9px 13px; cursor: pointer; font-size: .9rem; }
.cc-ss-item:hover { background: rgba(143,166,190,.16); }
.cc-ss-empty { padding: 12px; color: var(--cc-dim); font-size: .85rem; text-align: center; }

/* ───── الإيموجي ───── */
.cc-emoji { display: flex; flex-direction: column; gap: 8px; }
.cc-emoji-chips { display: flex; gap: 6px; flex-wrap: wrap; }
.cc-emoji-chips:empty { display: none; }
.cc-emoji-quick { display: flex; flex-wrap: wrap; gap: 4px; }
.cc-emoji-btn { width: 34px; height: 34px; border-radius: 8px; border: 1px solid var(--cc-border); background: var(--cc-bg2); cursor: pointer; font-size: 1.1rem; display: inline-flex; align-items: center; justify-content: center; }
.cc-emoji-btn:hover { background: var(--cc-bg3); border-color: var(--cc-steel); }
.cc-emoji-img { width: 20px; height: 20px; object-fit: contain; vertical-align: middle; }

/* ───── صلاحيات الروم ───── */
.cc-presets { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; margin-bottom: 4px; }
.cc-permlist { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 6px; max-height: 340px; overflow-y: auto; padding: 4px; border: 1px solid var(--cc-border); border-radius: 10px; background: var(--cc-bg2); }
.cc-permrow { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 6px 10px; border-radius: 8px; flex-wrap: wrap; }
.cc-permrow.set { background: rgba(143,166,190,.1); }
.cc-permname { font-size: .85rem; }
.cc-segs { display: inline-flex; border: 1px solid var(--cc-border2); border-radius: 8px; overflow: hidden; }
.cc-seg { border: 0; background: transparent; color: var(--cc-muted); padding: 4px 9px; font: inherit; font-size: .75rem; cursor: pointer; border-inline-end: 1px solid var(--cc-border2); }
.cc-seg:last-child { border-inline-end: 0; }
.cc-seg.on.allow { background: rgba(63,185,127,.25); color: #8ff0bd; }
.cc-seg.on.deny { background: rgba(226,84,91,.28); color: #ffb3b6; }
.cc-seg.on.inh { background: rgba(143,166,190,.2); color: var(--cc-text); }

/* ───── الإيمبد والمعاينة ───── */
.cc-embed { border: 1px solid var(--cc-border); border-radius: 12px; padding: 12px 14px; background: rgba(0,0,0,.14); display: flex; flex-direction: column; gap: 12px; }
.cc-embed-body { display: flex; flex-direction: column; gap: 12px; }
.cc-embed-fields { display: flex; flex-direction: column; gap: 10px; }
.cc-efield { display: flex; flex-direction: column; gap: 8px; padding: 10px; border: 1px solid var(--cc-border); border-radius: 10px; background: var(--cc-bg2); }
.cc-prevbox { display: flex; flex-direction: column; gap: 8px; }
.cc-prev { display: flex; gap: 12px; padding: 14px; background: #313338; border-radius: 10px; direction: ltr; text-align: left; color: #dbdee1; font-family: 'gg sans', 'Segoe UI', sans-serif; overflow: hidden; }
.cc-prev:has([dir="rtl"]) { direction: rtl; }
.cc-prev-avatar { width: 38px; height: 38px; border-radius: 50%; background: #5865f2; display: flex; align-items: center; justify-content: center; color: #fff; flex: 0 0 auto; }
.cc-prev-main { min-width: 0; flex: 1; display: flex; flex-direction: column; gap: 4px; }
.cc-prev-name { font-weight: 600; color: #f2f3f5; display: flex; align-items: center; gap: 6px; }
.cc-prev-tag { background: #5865f2; color: #fff; font-size: .62rem; padding: 1px 5px; border-radius: 4px; }
.cc-prev-content { white-space: pre-wrap; word-break: break-word; font-size: .93rem; }
.cc-prev-embed { background: #2b2d31; border-radius: 4px; border-inline-start: 4px solid #5865f2; padding: 10px 14px; max-width: 460px; display: flex; flex-direction: column; gap: 5px; border-left: 4px solid #5865f2; }
.cc-prev-eauthor { font-size: .8rem; font-weight: 600; }
.cc-prev-etitle { font-weight: 700; color: #fff; }
.cc-prev-edesc { font-size: .87rem; white-space: pre-wrap; word-break: break-word; }
.cc-prev-efields { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.cc-prev-efield { grid-column: 1 / -1; font-size: .83rem; }
.cc-prev-efield.inline { grid-column: auto; }
.cc-prev-efn { font-weight: 700; color: #fff; }
.cc-prev-eimg { max-width: 100%; border-radius: 4px; margin-top: 4px; }
.cc-prev-efooter { font-size: .72rem; color: #949ba4; }
.cc-prev-btns { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 6px; }
.cc-prev-btn { padding: 6px 14px; border-radius: 4px; font-size: .85rem; color: #fff; font-weight: 500; }

/* ───── الأهداف ───── */
.cc-target { display: flex; flex-direction: column; gap: 8px; }
.cc-target-detail:empty { display: none; }

/* ───── الإجراءات ───── */
.cc-alist { display: flex; flex-direction: column; }
.cc-acards { display: flex; flex-direction: column; gap: 10px; }
.cc-empty-actions { padding: 22px; text-align: center; border: 1px dashed var(--cc-border2); border-radius: 12px; color: var(--cc-muted); font-size: .9rem; }
.cc-action { border: 1px solid var(--cc-border); border-radius: 13px; background: var(--cc-bg2); transition: border-color .15s; }
.cc-action.open { border-color: var(--cc-border2); }
.cc-action.danger { border-inline-start: 3px solid var(--cc-danger); }
.cc-ahead { display: flex; align-items: center; gap: 11px; padding: 11px 13px; cursor: pointer; user-select: none; }
.cc-anum { width: 24px; height: 24px; border-radius: 50%; background: rgba(143,166,190,.2); color: var(--cc-accent); font-size: .76rem; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; }
.cc-aicon { width: 34px; height: 34px; border-radius: 10px; background: rgba(143,166,190,.14); color: var(--cc-accent); display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; }
.cc-atitle { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.cc-atitle b { display: flex; align-items: center; gap: 8px; font-size: .95rem; }
.cc-asum { color: var(--cc-muted); font-size: .8rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cc-badge { font-size: .66rem; font-weight: 700; padding: 1px 8px; border-radius: 999px; background: rgba(226,84,91,.18); color: #ffb3b6; border: 1px solid rgba(226,84,91,.4); }
.cc-tools { display: inline-flex; gap: 2px; flex: 0 0 auto; }
.cc-chev { color: var(--cc-dim); font-size: .8rem; flex: 0 0 auto; }
.cc-abody { padding: 4px 16px 16px; border-top: 1px solid var(--cc-border); display: flex; flex-direction: column; gap: 14px; }
.cc-fields { display: flex; flex-direction: column; gap: 14px; padding-top: 12px; }
.cc-afoot { padding-top: 8px; border-top: 1px dashed var(--cc-border); }

/* ───── الأزرار (اللوحات) ───── */
.cc-btn-list { display: flex; flex-direction: column; gap: 10px; }
.cc-bcard { border: 1px solid var(--cc-border2); border-radius: 12px; background: var(--cc-bg); }
.cc-bhead { display: flex; align-items: center; gap: 10px; padding: 10px 12px; cursor: pointer; }
.cc-bswatch { width: 14px; height: 28px; border-radius: 5px; flex: 0 0 auto; }
.cc-btitle { flex: 1; min-width: 0; font-weight: 700; font-size: .92rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cc-bbody { padding: 6px 14px 14px; border-top: 1px solid var(--cc-border); display: flex; flex-direction: column; gap: 14px; }
.cc-accessblock { display: flex; flex-direction: column; gap: 10px; }
.cc-nested { border-inline-start: 3px solid var(--cc-steel); padding-inline-start: 12px; display: flex; flex-direction: column; gap: 8px; }

/* ───── نافذة اختيار الإجراء ───── */
.cc-modal { position: fixed; inset: 0; z-index: 9000; background: rgba(0,0,0,.72); display: flex; align-items: center; justify-content: center; padding: 16px; backdrop-filter: blur(3px); animation: ccFade .15s ease; }
@keyframes ccFade { from { opacity: 0; } to { opacity: 1; } }
.cc-modal-box { width: min(760px, 100%); max-height: 88vh; overflow: hidden; display: flex; flex-direction: column; background: #14161B; border: 1px solid var(--cc-border2); border-radius: 16px; box-shadow: 0 24px 60px rgba(0,0,0,.6); color: var(--cc-text); }
.cc-modal-head { display: flex; align-items: center; justify-content: space-between; padding: 14px 18px; border-bottom: 1px solid var(--cc-border); }
.cc-tabs { display: flex; gap: 6px; padding: 10px 14px; overflow-x: auto; border-bottom: 1px solid var(--cc-border); scrollbar-width: thin; }
.cc-tab { flex: 0 0 auto; border: 1px solid var(--cc-border); background: var(--cc-bg2); color: var(--cc-muted); padding: 7px 13px; border-radius: 999px; cursor: pointer; font: inherit; font-size: .85rem; display: inline-flex; align-items: center; gap: 6px; }
.cc-tab.on { background: rgba(143,166,190,.22); color: var(--cc-text); border-color: var(--cc-steel); }
.cc-pgrid { padding: 14px; overflow-y: auto; display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 10px; }
.cc-pitem { display: flex; align-items: flex-start; gap: 12px; text-align: start; padding: 12px; border-radius: 12px; border: 1px solid var(--cc-border); background: var(--cc-bg2); color: var(--cc-text); cursor: pointer; font: inherit; transition: border-color .15s, transform .12s; }
.cc-pitem:hover { border-color: var(--cc-steel); transform: translateY(-1px); }
.cc-pitem.danger:hover { border-color: var(--cc-danger); }
.cc-pico { width: 38px; height: 38px; border-radius: 10px; background: rgba(143,166,190,.15); color: var(--cc-accent); display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; }
.cc-ptxt { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.cc-ptxt b { display: flex; align-items: center; gap: 8px; font-size: .93rem; }
.cc-ptxt small { line-height: 1.55; }

/* ───── المتغيرات ───── */
.cc-vars { display: flex; flex-direction: column; gap: 8px; }
.cc-vars-body { border: 1px solid var(--cc-border); border-radius: 12px; padding: 12px; background: var(--cc-bg2); }
.cc-vlist { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 6px; margin-top: 8px; max-height: 280px; overflow-y: auto; }
.cc-var { display: flex; flex-direction: column; align-items: flex-start; gap: 3px; text-align: start; border: 1px solid var(--cc-border); background: var(--cc-bg); color: var(--cc-muted); padding: 7px 10px; border-radius: 9px; cursor: pointer; font: inherit; font-size: .78rem; }
.cc-var:hover { border-color: var(--cc-steel); color: var(--cc-text); }
.cc-var code { direction: ltr; }

/* ───── التنبيهات وشريط الحفظ ───── */
.cc-alert { border-radius: 12px; padding: 14px 16px; margin-bottom: 16px; display: flex; flex-direction: column; gap: 8px; line-height: 1.7; }
.cc-alert ul { margin: 0; padding-inline-start: 22px; }
.cc-alert-err { background: rgba(226,84,91,.1); border: 1px solid rgba(226,84,91,.5); color: #ffd0d2; }
.cc-alert-warn { background: rgba(212,175,90,.1); border: 1px solid rgba(212,175,90,.55); color: #f1dfaa; }
.cc-savebar { position: sticky; bottom: 0; z-index: 20; display: flex; align-items: center; gap: 10px; padding: 12px 16px; margin-top: 8px; border: 1px solid var(--cc-border2); border-radius: 14px; background: rgba(16,18,22,.94); backdrop-filter: blur(8px); box-shadow: 0 -6px 24px rgba(0,0,0,.4); }
.cc-dirty { align-items: center; gap: 7px; font-size: .82rem; color: var(--cc-brass); }
.cc-dirty i { font-size: .5rem; }

/* ───── الهواتف ───── */
@media (max-width: 720px) {
    .cc-grid2 { grid-template-columns: 1fr; }
    .cc-hero { padding: 16px; }
    .cc-hero .cc-btn-lg { width: 100%; }
    .cc-cards { grid-template-columns: 1fr; }
    .cc-sec-head, .cc-sec-body { padding-inline: 14px; }
    .cc-abody { padding-inline: 12px; }
    .cc-ahead { flex-wrap: wrap; }
    .cc-tools { margin-inline-start: auto; }
    .cc-permlist { grid-template-columns: 1fr; }
    .cc-prev-efields { grid-template-columns: 1fr; }
    .cc-savebar { flex-wrap: wrap; padding: 10px 12px; }
    .cc-savebar .cc-btn { flex: 1 1 auto; }
    .cc-modal { padding: 0; align-items: flex-end; }
    .cc-modal-box { border-radius: 16px 16px 0 0; max-height: 92vh; }
    .cc-iconbtn { width: 38px; height: 38px; }
}
@media (prefers-reduced-motion: reduce) { #customCommandsPanel *, .cc-modal { animation: none !important; transition: none !important; } }