.ccm-browser-wrap {
    --ccm-bg: #eef2f7;
    --ccm-surface: #ffffff;
    --ccm-surface-alt: #f7f9fc;
    --ccm-line: #d9e1ee;
    --ccm-line-strong: #c5d0e3;
    --ccm-text: #172033;
    --ccm-muted: #667085;
    --ccm-primary: #2f6fe4;
    --ccm-secondary-soft: #eef4ff;
    /* 4.2.5: Let Elementor/page/popup containers control width.
       The browser fills its parent instead of forcing its own 90% viewport/page width. */
    width: 100%;
    max-width: 100%;
    margin: 0 auto;
    padding: 0 16px 24px;
    box-sizing: border-box;
    font-family: ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
    color: var(--ccm-text);
}
.ccm-loading { text-align:center; padding:40px; color:var(--ccm-muted); font-size:14px; }
.ccm-browser-wrap *, .ccm-browser-wrap *::before, .ccm-browser-wrap *::after { box-sizing: border-box; }
.ccm-shell { background: var(--ccm-surface); border:1px solid var(--ccm-line); border-radius:20px; overflow:hidden; box-shadow:0 10px 28px rgba(15,23,42,.08); }
.ccm-utility-bar { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:10px 16px; background:#132238; color:#e5edf8; }
.ccm-utility-left, .ccm-utility-right { display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.ccm-utility-label { font-size:12px; font-weight:800; letter-spacing:.06em; text-transform:uppercase; color:#f8c63d; }
.ccm-shortcode-badge { display:inline-flex; align-items:center; padding:6px 10px; border:1px solid #344765; border-radius:999px; background:#0f172a; font:600 12px/1 ui-monospace, SFMono-Regular, Menlo, monospace; color:#d5deeb; }
.ccm-admin-link { display:inline-flex; align-items:center; padding:6px 10px; border:1px solid #43546f; border-radius:999px; color:#e5edf8; text-decoration:none; font-size:12px; font-weight:700; }
.ccm-admin-link:hover { background:#1b2d48; color:#fff; }
.ccm-header-zone { background: linear-gradient(180deg, #f5f7fb 0%, #eef3f9 100%); padding:18px 18px 14px; border-bottom:1px solid var(--ccm-line); }
.ccm-header-card { background:rgba(255,255,255,.8); border:1px solid var(--ccm-line); border-radius:18px; padding:16px; }
.ccm-section + .ccm-section { margin-top: 14px; }
.ccm-section-label { margin:0 0 8px; font-size:11px; font-weight:800; text-transform:uppercase; letter-spacing:.08em; color:var(--ccm-muted); }
.ccm-row { display:flex; gap:10px; flex-wrap:wrap; align-items:center; }
.ccm-divider { height:1px; background:var(--ccm-line); margin:14px 0; }
.ccm-grades { gap: 12px; }
.ccm-chip { cursor:pointer; display:inline-flex; align-items:center; gap:10px; padding:10px 14px; min-width:132px; border:1px solid var(--ccm-line-strong); border-radius:14px; background:#fff; box-shadow:0 1px 2px rgba(15,23,42,.05); user-select:none; transition:.15s ease; }
.ccm-chip:hover { border-color:#9fb0cf; }
.ccm-chip .ccm-box { width:18px; height:18px; border-radius:5px; border:2px solid #b9c0cf; display:grid; place-items:center; background:#fff; flex:0 0 auto; transition:.15s ease; }
.ccm-chip .ccm-check { width:12px; height:12px; opacity:0; transition:.15s; }
.ccm-chip.ccm-on { background:#f9fbff; border-color:#9eb7ea; }
.ccm-chip.ccm-on .ccm-box { border-color:#1f7a40; background:#1f7a40; }
.ccm-chip.ccm-on .ccm-check { opacity:1; }
.ccm-chip .ccm-chip-label { font-weight:700; font-size:14px; }
.ccm-panel { padding: 18px; background: var(--ccm-surface); }
.ccm-group { background: var(--ccm-surface-alt); border:1px solid var(--ccm-line); border-radius:18px; padding:14px; }
.ccm-group-title { margin:0 0 10px; font-size:13px; font-weight:800; color:var(--ccm-text); }
.ccm-tabs-wrap { display:flex; flex-direction:column; gap:10px; }
.ccm-tabs { display:flex; flex-wrap:wrap; gap:8px; }
.ccm-tab { cursor:pointer; padding:10px 14px; min-width:90px; font-weight:700; font-size:14px; border:1px solid var(--ccm-line-strong); border-radius:12px; background:#fff; transition:.15s ease; white-space:nowrap; color:var(--ccm-text); }
.ccm-tabs-main .ccm-tab.ccm-active { background: var(--ccm-primary); color:#fff; border-color:var(--ccm-primary); box-shadow:0 8px 20px rgba(47,111,228,.24); }
.ccm-tabs-sub { padding-left: 14px; border-left: 2px solid #d6e3fb; }
.ccm-tabs-sub .ccm-tab { background: var(--ccm-secondary-soft); border-color:#c7d4ef; font-size:13px; }
.ccm-tabs-sub .ccm-tab.ccm-active { background:#d9e7ff; color:#143d8f; border-color:#8fb0f1; }
.ccm-pills-wrap { display:flex; align-items:center; gap:10px; flex-wrap:wrap; padding-top:2px; }
.ccm-pills-label { font-size:12px; font-weight:800; letter-spacing:.04em; color:var(--ccm-muted); }
.ccm-pills { gap: 8px; }
.ccm-pill { cursor:pointer; padding:8px 14px; border-radius:999px; font-size:13px; font-weight:800; color:#fff; background:linear-gradient(180deg, #349a63, #2f8f5a); transition:.15s ease; white-space:nowrap; }
.ccm-pill.ccm-active { background:linear-gradient(180deg, #a13a64, #8a2f52); box-shadow:0 0 0 3px rgba(0,0,0,.12) inset; }
.ccm-grid { margin-top: 18px; display:grid; grid-template-columns:repeat(auto-fill, minmax(160px, 200px)); gap:16px; }
.ccm-card { background:#fff; border:1px solid #e2e6f0; border-radius:16px; overflow:hidden; box-shadow:0 8px 18px rgba(15,23,42,.08); transition:transform .15s, box-shadow .15s; }
.ccm-card:hover { transform:translateY(-2px); box-shadow:0 12px 28px rgba(15,23,42,.12); }
.ccm-card-thumb { aspect-ratio:4/3; background:linear-gradient(135deg, #d7def0, #eef2fb); display:flex; align-items:center; justify-content:center; font-size:32px; overflow:hidden; }
.ccm-card-thumb img { width:100%; height:100%; object-fit:cover; display:block; }
.ccm-card-title { padding:12px; font-size:14px; font-weight:600; line-height:1.35; }
.ccm-card a { text-decoration:none; color:inherit; display:block; }
.ccm-empty { grid-column:1 / -1; text-align:center; padding:44px 20px; color:var(--ccm-muted); font-size:14px; background:#fff; border:1px dashed var(--ccm-line-strong); border-radius:16px; }
.ccm-hidden { display:none !important; }

@media (max-width: 900px) {
    .ccm-chip { min-width: 112px; }
}
@media (max-width: 640px) {
    .ccm-browser-wrap { width: 100%; max-width: 100%; padding: 0 10px 18px; }
    .ccm-shell { border-radius: 16px; }
    .ccm-utility-bar { padding: 10px 12px; }
    .ccm-header-zone { padding: 12px; }
    .ccm-header-card, .ccm-panel, .ccm-group { padding: 12px; }
    .ccm-chip, .ccm-tab { min-width: 0; flex: 1 1 calc(50% - 8px); justify-content:center; }
    .ccm-tabs-sub { padding-left: 10px; }
}
@media (max-width: 480px) {
    .ccm-grid { grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); }
    .ccm-chip, .ccm-tab { flex: 1 1 100%; }
}