/* ==========================================================================
   CoasterCrazy Reborn — Site-wide Override
   Styles for exchange, parks, scrapyard, store, and homepage
   Loaded via overall_header.html for the ccreborn theme only
   ========================================================================== */

/* ---------- Shared variables (same as reborn.css) ---------- */
:root {
    --cc-accent: #cc0000;
    --cc-accent-hover: #990000;
    --cc-accent-secondary: #cc0000;
    --cc-accent-light: #fff0f0;
    --cc-text-primary: #1a1a1a;
    --cc-text-secondary: #666666;
    --cc-bg-card: #ffffff;
    --cc-bg-card-alt: #f8f9fc;
    --cc-border: #e5e7eb;
    --cc-border-light: #f0f1f3;
    --cc-link: #3b82f6;
    --cc-radius: 10px;
    --cc-radius-sm: 6px;
    --cc-shadow: 0 1px 3px rgba(0, 0, 0, 0.06), 0 1px 2px rgba(0, 0, 0, 0.04);
    --cc-shadow-md: 0 4px 6px rgba(0, 0, 0, 0.05), 0 2px 4px rgba(0, 0, 0, 0.04);
    --cc-transition: 0.2s ease;
    --cc-font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

/* ==========================================================================
   EXCHANGE OVERRIDES
   ========================================================================== */

/* Table headers */
table.table1 tbody th {
    background-image: none !important;
    background: linear-gradient(135deg, var(--cc-accent) 0%, var(--cc-accent-secondary) 100%) !important;
    font-family: var(--cc-font) !important;
    font-weight: 600 !important;
    font-size: 13px !important;
    letter-spacing: 0.3px;
    text-transform: uppercase;
    padding: 12px 14px !important;
    border-radius: 0 !important;
}

table.table1 tbody th:first-child {
    border-top-left-radius: var(--cc-radius) !important;
    padding-left: 16px !important;
}

table.table1 tbody th:last-child {
    border-top-right-radius: var(--cc-radius) !important;
    padding-right: 16px !important;
}

table.table1 td {
    color: var(--cc-text-primary) !important;
    font-family: var(--cc-font) !important;
    font-size: 13px;
    padding: 10px 14px !important;
    border-bottom: 1px solid var(--cc-border-light) !important;
    transition: background var(--cc-transition);
}

table.table1 tr:hover td {
    background-color: var(--cc-bg-card-alt) !important;
}

/* Exchange headings */
h1.rname {
    font-family: var(--cc-font) !important;
    color: var(--cc-text-primary) !important;
    font-size: 24px !important;
    font-weight: 700 !important;
    letter-spacing: -0.5px;
    margin: 0 0 4px !important;
}

h2.rname {
    font-family: var(--cc-font) !important;
    color: var(--cc-text-primary) !important;
    font-size: 18px !important;
    font-weight: 600 !important;
}

input.bigtext {
    font-family: var(--cc-font) !important;
    color: var(--cc-text-primary) !important;
}

.bigHeader {
    font-family: var(--cc-font) !important;
    font-size: 32px !important;
    font-weight: 800 !important;
    color: var(--cc-text-primary);
    letter-spacing: -0.5px;
}

h2.bigRating {
    font-family: var(--cc-font) !important;
    font-size: 44px !important;
    font-weight: 800 !important;
    color: var(--cc-accent) !important;
    letter-spacing: -1px;
}

/* Rating tables */
table.ratings td.left {
    border-bottom: 1px solid var(--cc-border) !important;
    font-family: var(--cc-font);
}

table.ratings td.right,
table.ratings td.bottom {
    font-family: var(--cc-font);
    font-size: 13px !important;
    color: var(--cc-text-secondary);
}

table.ratings td.bottom {
    border-bottom: 1px solid var(--cc-border) !important;
}

/* Rating criteria */
div.criteria {
    font-family: var(--cc-font) !important;
    font-size: 11px !important;
    color: var(--cc-text-secondary);
}

span.criteria {
    font-family: var(--cc-font) !important;
    font-size: 16px !important;
    font-weight: 700;
    color: var(--cc-text-primary);
}

div.ratingrank {
    font-family: var(--cc-font) !important;
    font-size: 11px;
}

/* Filters */
td.filters {
    font-family: var(--cc-font);
}

td.linkFooter {
    font-family: var(--cc-font) !important;
    font-weight: 600 !important;
}

td.linkFooter a {
    color: var(--cc-link) !important;
}

td.roomyText {
    font-family: var(--cc-font);
    line-height: 1.7 !important;
    color: var(--cc-text-primary);
}

/* Exchange general buttons */
button.generalbutton {
    background: var(--cc-bg-card) !important;
    border: 1.5px solid var(--cc-border) !important;
    border-radius: var(--cc-radius-sm) !important;
    font-family: var(--cc-font) !important;
    font-size: 12px;
    font-weight: 500;
    color: var(--cc-text-primary) !important;
    padding: 4px 12px !important;
    height: auto !important;
    cursor: pointer;
    transition: all var(--cc-transition);
}

button.generalbutton:hover {
    border-color: var(--cc-accent) !important;
    color: var(--cc-accent) !important;
    background: var(--cc-accent-light) !important;
}

/* Exchange search inputs */
#searchField {
    font-family: var(--cc-font) !important;
    border: 1.5px solid var(--cc-border) !important;
    border-radius: var(--cc-radius-sm) !important;
    padding: 8px 14px !important;
    font-size: 14px !important;
    transition: border-color var(--cc-transition), box-shadow var(--cc-transition);
}

#searchField:focus {
    border-color: var(--cc-accent) !important;
    box-shadow: 0 0 0 3px rgba(230, 57, 70, 0.12) !important;
    outline: none;
}

/* Exchange search/submit buttons */
input[type="submit"][value="Search"],
input[type="submit"][value="Add Tag to Search"] {
    background: var(--cc-accent) !important;
    color: white !important;
    border: none !important;
    border-radius: var(--cc-radius-sm) !important;
    font-family: var(--cc-font) !important;
    font-weight: 600 !important;
    font-size: 13px !important;
    padding: 8px 18px !important;
    height: auto !important;
    cursor: pointer;
    transition: all var(--cc-transition);
    -webkit-appearance: none !important;
}

input[type="submit"][value="Search"]:hover,
input[type="submit"][value="Add Tag to Search"]:hover {
    background: var(--cc-accent-hover) !important;
    box-shadow: 0 4px 12px rgba(230, 57, 70, 0.3);
}

/* Exchange track thumbnails */
table.table1 img {
    border-radius: var(--cc-radius-sm);
}

/* ==========================================================================
   PARKS OVERRIDES
   ========================================================================== */

td.nobr, td.bold {
    font-family: var(--cc-font) !important;
}

td.bold {
    color: var(--cc-text-primary);
}

td.ellipsis {
    font-family: var(--cc-font);
}

#feedwrap tr:hover {
    background-color: var(--cc-bg-card-alt) !important;
}

#feedtable td {
    font-family: var(--cc-font) !important;
    font-size: 13px !important;
}

div.feeddiv {
    border-radius: var(--cc-radius-sm);
}

button.normalbutton {
    background: var(--cc-bg-card) !important;
    border: 1.5px solid var(--cc-border) !important;
    border-radius: var(--cc-radius-sm) !important;
    font-family: var(--cc-font) !important;
    font-size: 12px;
    font-weight: 500;
    color: var(--cc-text-primary) !important;
    padding: 4px 14px !important;
    height: auto !important;
    cursor: pointer;
    transition: all var(--cc-transition);
}

button.normalbutton:hover {
    border-color: var(--cc-accent) !important;
    color: var(--cc-accent) !important;
}

button.editbutton {
    background: var(--cc-accent) !important;
    color: white !important;
    border: none !important;
    border-radius: var(--cc-radius-sm) !important;
    font-family: var(--cc-font) !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    padding: 4px 12px !important;
    height: auto !important;
    cursor: pointer;
    transition: all var(--cc-transition);
}

button.editbutton:hover {
    background: var(--cc-accent-hover) !important;
}

td.blueborder {
    border-color: var(--cc-border) !important;
}

tr.nohover:hover {
    background-color: var(--cc-bg-card-alt) !important;
}

div.leftrightrow {
    font-family: var(--cc-font);
}

div.leftheader {
    font-family: var(--cc-font) !important;
    font-weight: 600 !important;
    font-size: 13px;
    color: var(--cc-text-secondary);
}

div.rightside {
    font-family: var(--cc-font);
    font-size: 13px;
    color: var(--cc-text-primary);
}

div.topheadersm {
    font-family: var(--cc-font) !important;
    font-weight: 600 !important;
    color: var(--cc-text-secondary);
}

div.rightsidesm {
    font-family: var(--cc-font) !important;
    color: var(--cc-text-primary);
}

div.starsdiv {
    font-family: var(--cc-font) !important;
}

/* ==========================================================================
   STORE OVERRIDES
   ========================================================================== */

h1.store {
    font-family: var(--cc-font) !important;
    color: var(--cc-text-primary) !important;
    font-size: 24px !important;
    font-weight: 700 !important;
}

h2.store {
    font-family: var(--cc-font) !important;
    color: var(--cc-text-primary) !important;
    font-size: 18px !important;
    font-weight: 600 !important;
}

.jcart strong {
    color: var(--cc-accent) !important;
}

.jcart ul {
    font-family: var(--cc-font);
}

/* ==========================================================================
   HOMEPAGE OVERRIDES
   ========================================================================== */

/* BX Slider */
.bx-wrapper {
    border-radius: var(--cc-radius) !important;
    overflow: hidden;
    box-shadow: var(--cc-shadow-md) !important;
    border: none !important;
    background: none !important;
}

.bx-wrapper .bx-viewport {
    border-radius: var(--cc-radius);
}

/* ==========================================================================
   CONTACT FORM OVERRIDES (Quform)
   ========================================================================== */

.quform-theme-light-light .quform-input input,
.quform-theme-light-light .quform-input textarea,
.quform-theme-light-light .quform-input select {
    font-family: var(--cc-font) !important;
    border: 1.5px solid var(--cc-border) !important;
    border-radius: var(--cc-radius-sm) !important;
    padding: 10px 14px !important;
    transition: border-color var(--cc-transition), box-shadow var(--cc-transition);
}

.quform-theme-light-light .quform-input input:focus,
.quform-theme-light-light .quform-input textarea:focus {
    border-color: var(--cc-accent) !important;
    box-shadow: 0 0 0 3px rgba(230, 57, 70, 0.12) !important;
}

.quform-submit input[type="submit"],
.quform-submit button {
    background: var(--cc-accent) !important;
    color: white !important;
    border: none !important;
    border-radius: var(--cc-radius-sm) !important;
    font-family: var(--cc-font) !important;
    font-weight: 600 !important;
    padding: 12px 24px !important;
    cursor: pointer;
    transition: all var(--cc-transition);
}

.quform-submit input[type="submit"]:hover,
.quform-submit button:hover {
    background: var(--cc-accent-hover) !important;
    box-shadow: 0 4px 12px rgba(230, 57, 70, 0.3);
}

/* ==========================================================================
   VIDEO PLAYER OVERRIDES (Parks)
   ========================================================================== */

.youtube .videotable {
    border-radius: var(--cc-radius-sm);
    overflow: hidden;
}

.youtube img.thumbnail {
    border-radius: var(--cc-radius-sm);
    transition: opacity var(--cc-transition);
}

.youtube img.thumbnail:hover {
    opacity: 0.85;
}

.youtube div.duration {
    border-radius: 4px;
    font-family: var(--cc-font);
}

/* ==========================================================================
   GLOBAL OVERRIDES FOR ALL CUSTOM PAGES
   ========================================================================== */

/* Make all select elements match */
select {
    font-family: var(--cc-font) !important;
    border: 1.5px solid var(--cc-border) !important;
    border-radius: var(--cc-radius-sm) !important;
    padding: 6px 10px !important;
    color: var(--cc-text-primary);
    background: var(--cc-bg-card) !important;
    transition: border-color var(--cc-transition);
}

select:hover {
    border-color: #cbd5e1 !important;
}

select:focus {
    border-color: var(--cc-accent) !important;
    box-shadow: 0 0 0 3px rgba(230, 57, 70, 0.12) !important;
    outline: none;
}

/* Consistent table styling site-wide */
table td {
    font-family: var(--cc-font);
}

/* Page divider table */
table.page_divider {
    border-color: var(--cc-border) !important;
}

table.page_divider td {
    font-family: var(--cc-font);
}

/* Search filter checkboxes */
input[type="checkbox"] {
    accent-color: var(--cc-accent);
}

input[type="radio"] {
    accent-color: var(--cc-accent);
}

/* Exchange index track thumbnails */
.cc-ex-track a > img {
    width: 80px;
    height: 60px;
    border-radius: 6px;
    object-fit: cover;
    flex-shrink: 0;
    box-shadow: 0 1px 4px rgba(0,0,0,0.08);
}

/* === Exchange Action Buttons (global) === */
.cc-ex-btn { display: inline-flex; align-items: center; gap: 7px; padding: 10px 18px; border-radius: 8px; font-family: 'Inter',sans-serif; font-weight: 600; font-size: 13px; text-decoration: none !important; transition: all 0.2s; border: none; cursor: pointer; }
.cc-ex-btn-primary { background: #cc0000 !important; color: white !important; box-shadow: inset 0 1px 0 rgba(255,255,255,0.15), 0 2px 6px rgba(0,0,0,0.2); }
.cc-ex-btn-primary:hover { background: #b00000 !important; color: white !important; transform: translateY(-1px); box-shadow: inset 0 1px 0 rgba(255,255,255,0.15), 0 4px 10px rgba(0,0,0,0.25); }
.cc-ex-btn-primary svg { fill: currentColor; }
.cc-ex-btn-outline { background: transparent !important; color: white !important; border: 1.5px solid rgba(255,255,255,0.25) !important; }
.cc-ex-btn-outline:hover { border-color: rgba(255,255,255,0.5) !important; background: rgba(255,255,255,0.05) !important; }

/* === Ad Display System === */
.cc-ad-container { text-align: center; background: #fff; border: 1px solid #e0e0e0; border-radius: 10px; overflow: hidden; box-shadow: 0 1px 3px rgba(0,0,0,0.04); }
.cc-ad-header { padding: 10px 16px; background: linear-gradient(135deg, #2d2d2d 0%, #1a1a1a 100%); color: white; font-family: 'Inter',sans-serif; font-weight: 600; font-size: 11px; text-transform: uppercase; letter-spacing: 0.5px; text-align: left; }
.cc-ad-msg { display: flex; align-items: flex-start; gap: 10px; padding: 12px 16px; font-family: 'Inter',sans-serif; font-size: 12px; line-height: 1.5; text-align: left; }
.cc-ad-msg svg { flex-shrink: 0; }
.cc-ad-msg a { color: inherit; font-weight: 600; text-decoration: underline; }
.cc-ad-premium { background: linear-gradient(135deg, #fffbeb, #fef3c7); color: #92400e; }
.cc-ad-loyal { background: linear-gradient(135deg, #ecfdf5, #d1fae5); color: #065f46; }
.cc-ad-blocker { background: #f8f9fc; color: #666; }
.cc-ad-regular { background: #f8f9fc; color: #999; font-size: 11px; padding: 8px 14px; border-bottom: 1px solid #eee; }
.cc-ad-regular a { color: #cc0000; cursor: pointer; }
.cc-ad-unit { min-height: 50px; }

/* === Vote Buttons (thumbs up/down on ratings) === */
.cc-vote-wrap { display: inline-flex; gap: 6px; vertical-align: middle; }
.cc-vote-btn { display: inline-flex; align-items: center; gap: 4px; padding: 4px 10px; border-radius: 16px; font-family: 'Inter',sans-serif; font-size: 12px; color: #999; background: #f5f5f5; border: 1px solid #e8e8e8; transition: all 0.15s; user-select: none; }
.cc-vote-btn svg { fill: currentColor; }
.cc-vote-btn b { font-weight: 700; }
.cc-vote-btn.cc-vote-active { cursor: pointer; }
.cc-vote-btn.cc-vote-active.cc-vote-up:hover { background: #ecfdf5; color: #10b981; border-color: #a7f3d0; }
.cc-vote-btn.cc-vote-active.cc-vote-down:hover { background: #fef2f2; color: #ef4444; border-color: #fecaca; }
.cc-vote-btn.cc-voted.cc-vote-up { background: #ecfdf5; color: #10b981; border-color: #a7f3d0; }
.cc-vote-btn.cc-voted.cc-vote-down { background: #fef2f2; color: #ef4444; border-color: #fecaca; }
.cc-vote-btn:not(.cc-vote-active) { opacity: 0.5; cursor: default; }

/* === Icon Action Buttons (edit/delete/report pills) === */
.cc-icon-btn { display: inline-flex; align-items: center; gap: 3px; padding: 3px 8px; background: linear-gradient(180deg, #fff 0%, #f5f5f5 100%); border: 1px solid #e0e0e0; border-radius: 4px; font-family: 'Inter',sans-serif; font-size: 11px; color: #666; text-decoration: none !important; transition: all 0.15s; box-shadow: 0 1px 2px rgba(0,0,0,0.04); cursor: pointer; vertical-align: middle; }
.cc-icon-btn:hover { background: linear-gradient(180deg, #fff 0%, #eee 100%); border-color: #ccc; color: #333; }
.cc-icon-btn svg { fill: currentColor; }
.cc-icon-btn-danger { color: #cc0000; }
.cc-icon-btn-danger:hover { background: #fef2f2; border-color: #fecaca; color: #990000; }

/* === BBCode Toolbar Component === */
.cc-bbt { display: flex; align-items: center; gap: 3px; padding: 6px 8px; background: #f8f9fc; border: 1.5px solid #e0e0e0; border-bottom: none; border-radius: 8px 8px 0 0; flex-wrap: wrap; }
.cc-bbt + textarea, .cc-bbt + .cc-bbt-emojis + textarea { border-top-left-radius: 0 !important; border-top-right-radius: 0 !important; }
.cc-bbt-btn { display: inline-flex; align-items: center; justify-content: center; min-width: 30px; height: 28px; padding: 0 6px; background: #fff; border: 1px solid #e0e0e0; border-radius: 4px; cursor: pointer; font-family: 'Inter',sans-serif; font-size: 13px; color: #444; transition: all 0.15s; }
.cc-bbt-btn:hover { background: #f0f0f0; border-color: #cc0000; color: #cc0000; }
.cc-bbt-btn svg { fill: currentColor; }
.cc-bbt-emoji { font-size: 16px; }
.cc-bbt-sep { width: 1px; height: 20px; background: #e0e0e0; margin: 0 3px; }
.cc-bbt-emojis { display: flex; flex-wrap: wrap; gap: 4px; padding: 8px; background: #fff; border: 1.5px solid #e0e0e0; border-bottom: none; border-radius: 0; }
.cc-bbt-emoji-item { font-size: 20px; cursor: pointer; padding: 4px; border-radius: 4px; transition: background 0.1s; line-height: 1; }
.cc-bbt-emoji-item:hover { background: #f0f0f0; }

/* === Tag Input Component === */
.cc-taginput-wrap { position: relative; border: 1.5px solid #e0e0e0; border-radius: 8px; background: #fff; padding: 6px 8px; min-height: 42px; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; cursor: text; transition: border-color 0.2s; }
.cc-taginput-wrap:focus-within { border-color: #cc0000; box-shadow: 0 0 0 3px rgba(204,0,0,0.1); }
.cc-taginput-tags { display: flex; flex-wrap: wrap; gap: 5px; }
.cc-taginput-pill { display: inline-flex; align-items: center; gap: 4px; background: linear-gradient(180deg, #fff0f0 0%, #ffe5e5 100%); color: #cc0000; border: 1px solid #fecaca; padding: 3px 8px 3px 10px; border-radius: 14px; font-family: 'Inter',sans-serif; font-size: 12px; font-weight: 500; white-space: nowrap; }
.cc-taginput-pill-x { cursor: pointer; font-size: 15px; line-height: 1; color: #cc0000; opacity: 0.5; text-decoration: none; margin-left: 2px; }
.cc-taginput-pill-x:hover { opacity: 1; }
.cc-taginput-input-wrap { flex: 1; min-width: 120px; }
.cc-taginput-input { border: none; outline: none; font-family: 'Inter',sans-serif; font-size: 13px; width: 100%; padding: 4px 0; background: transparent; color: #1a1a1a; }
.cc-taginput-input::placeholder { color: #bbb; }
.cc-taginput-dropdown { display: none; position: absolute; top: 100%; left: -1px; right: -1px; background: #fff; border: 1px solid #e0e0e0; border-top: none; border-radius: 0 0 8px 8px; box-shadow: 0 8px 20px rgba(0,0,0,0.1); z-index: 100; max-height: 250px; overflow-y: auto; }
.cc-taginput-item { display: flex; align-items: center; justify-content: space-between; padding: 9px 14px; cursor: pointer; font-family: 'Inter',sans-serif; font-size: 13px; color: #1a1a1a; transition: background 0.1s; }
.cc-taginput-item:hover { background: #f8f9fc; }
.cc-taginput-tag-count { font-size: 11px; color: #999; background: #f0f1f3; padding: 1px 7px; border-radius: 8px; }
.cc-taginput-new-label { font-size: 11px; color: #999; font-weight: 400; }
.cc-taginput-empty { padding: 12px 14px; font-family: 'Inter',sans-serif; font-size: 12px; color: #bbb; text-align: center; }

/* Scrapyard - uses same patterns as exchange */

/* ==========================================================================
   Store Flair System
   ========================================================================== */

/* Flair Badges (next to username) */
.cc-flair-badge { display: inline-block; width: 14px; height: 14px; vertical-align: middle; margin-right: 2px; margin-top: -2px; background-size: contain; background-repeat: no-repeat; flex-shrink: 0; }

/* Flair in viewtopic post sidebar — keep username + badge aligned */
.vtprofilepanel .vtusername { display: block; line-height: 1.3; }
.vtprofilepanel .vtusername a { display: inline-flex; align-items: center; gap: 2px; justify-content: center; }
.vtprofilepanel .vtusername .cc-flair-badge { width: 13px; height: 13px; vertical-align: baseline; margin-top: 0; margin-right: 1px; }

/* Flair in search results, topic listings, forum index — keep badges small and inline */
.topiclist .cc-flair-badge,
dl.icon .cc-flair-badge,
dd .cc-flair-badge,
.forabg .cc-flair-badge,
.forumbg .cc-flair-badge { width: 11px; height: 11px; vertical-align: middle; margin-top: -1px; margin-right: 1px; }

/* Username + badge must stay on one line everywhere in topic/forum listings */
.topiclist a.username,
.topiclist a.username-coloured,
dl.icon a.username,
dl.icon a.username-coloured { display: inline-flex; align-items: center; gap: 1px; white-space: nowrap; }

/* Last post column — badge + username must stay on one line */
dd.lastpost .cc-flair-badge { width: 10px; height: 10px; vertical-align: middle; margin-top: 0; }
dd.lastpost a.username,
dd.lastpost a.username-coloured { display: inline-flex; align-items: center; gap: 1px; white-space: nowrap; }

/* Avatar frames in viewtopic sidebar — constrain size */
.vtprofilepanel .cc-avatar-frame { display: inline-block; max-width: 100px; max-height: 100px; margin: 4px auto; }
.vtprofilepanel .cc-avatar-frame img { width: 100% !important; height: auto !important; }
.cc-flair-star-gold { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23d4a017' viewBox='0 0 16 16'%3E%3Cpath d='M3.612 15.443c-.386.198-.824-.149-.746-.592l.83-4.73L.173 6.765c-.329-.314-.158-.888.283-.95l4.898-.696L7.538.792c.197-.39.73-.39.927 0l2.184 4.327 4.898.696c.441.062.612.636.282.95l-3.522 3.356.83 4.73c.078.443-.36.79-.746.592L8 13.187l-4.389 2.256z'/%3E%3C/svg%3E"); }
.cc-flair-diamond { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%233b82f6' viewBox='0 0 16 16'%3E%3Cpath d='M6.95.435c.58-.58 1.52-.58 2.1 0l6.515 6.516c.58.58.58 1.519 0 2.098L9.05 15.565c-.58.58-1.519.58-2.098 0L.435 9.05a1.482 1.482 0 0 1 0-2.098z'/%3E%3C/svg%3E"); }
.cc-flair-coaster { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23cc0000' viewBox='0 0 16 16'%3E%3Cpath d='M0 8a8 8 0 1 1 16 0A8 8 0 0 1 0 8m7.5-6.923c-.67.204-1.335.82-1.887 1.855A8 8 0 0 0 5.145 4H7.5zM4.09 4a9.3 9.3 0 0 1 .64-1.539 7 7 0 0 1 .597-.933A7.03 7.03 0 0 0 2.255 4zm-.582 3.5c.03-.877.138-1.718.312-2.5H1.674a7 7 0 0 0-.656 2.5zM4.847 5a12.5 12.5 0 0 0-.338 2.5H7.5V5zM8.5 5v2.5h2.99a12.5 12.5 0 0 0-.337-2.5zM4.51 8.5a12.5 12.5 0 0 0 .337 2.5H7.5V8.5zm3.99 0V11h2.653c.187-.765.306-1.608.338-2.5zM5.145 12q.208.58.468 1.068c.552 1.035 1.218 1.65 1.887 1.855V12zm.182 2.472a7 7 0 0 1-.597-.933A9.3 9.3 0 0 1 4.09 12H2.255a7 7 0 0 0 3.072 2.472M3.82 11a13.7 13.7 0 0 1-.312-2.5h-2.49a7 7 0 0 0 .656 2.5zM8.5 12v2.923c.67-.204 1.335-.82 1.887-1.855q.26-.487.468-1.068zm3.68-1h2.146c.365-.767.594-1.61.656-2.5h-2.49a13.7 13.7 0 0 1-.312 2.5m2.802-3.5a7 7 0 0 0-.656-2.5H12.18c.174.782.282 1.623.312 2.5zM11.27 2.461c.247.464.462.98.64 1.539h1.835a7 7 0 0 0-3.072-2.472c.218.284.418.598.597.933M10.855 4a8 8 0 0 0-.468-1.068C9.835 1.897 9.17 1.282 8.5 1.077V4z'/%3E%3C/svg%3E"); }
.cc-flair-fire { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23f59e0b' viewBox='0 0 16 16'%3E%3Cpath d='M8 16c3.314 0 6-2 6-5.5 0-1.5-.5-4-2.5-6 .25 1.5-1.25 2-1.25 2C11 4 9 .5 6 0c.357 2 .5 4-2 6-1.25 1-2 2.729-2 4.5C2 14 4.686 16 8 16m0-1c-1.657 0-3-1-3-2.75 0-.75.25-2 1.25-3C6.125 10 7 10.5 7 10.5c-.375-1.25.5-3.25 2-3.5-.179 1-.25 2 1 3 .625.5 1 1.364 1 2.25C11 14 9.657 15 8 15'/%3E%3C/svg%3E"); }
.cc-flair-crown { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23d4a017' viewBox='0 0 16 16'%3E%3Cpath d='M2 4a.5.5 0 0 1 .5-.5h11a.5.5 0 0 1 .416.777l-1.5 2.25a.5.5 0 0 1-.832 0L9.5 3.89 8.416 5.527a.5.5 0 0 1-.832 0L5.5 3.89 3.416 6.527a.5.5 0 0 1-.832-.054L1.084 4.277A.5.5 0 0 1 1.5 3.5h.085A.5.5 0 0 1 2 4m0 6a.5.5 0 0 0-.5.5v1a.5.5 0 0 0 .5.5h12a.5.5 0 0 0 .5-.5v-1a.5.5 0 0 0-.5-.5zm0-2h12v1H2z'/%3E%3C/svg%3E"); }

/* Avatar Frames */
.cc-avatar-frame { display: inline-block; position: relative; border-radius: 50%; overflow: hidden; }
.cc-avatar-frame img { display: block; border-radius: 50%; width: 100%; height: 100%; object-fit: cover; }
.cc-frame-gold { border: 3px solid #d4a017; border-radius: 50%; box-shadow: 0 0 8px rgba(212,160,23,0.4); padding: 2px; }
.cc-frame-gold img { border-radius: 50%; }
.cc-frame-red-glow { border: 3px solid #cc0000; border-radius: 50%; box-shadow: 0 0 12px rgba(204,0,0,0.5); padding: 2px; }
.cc-frame-red-glow img { border-radius: 50%; }
.cc-frame-rainbow { border: 3px solid transparent; border-radius: 50%; background-image: linear-gradient(white, white), linear-gradient(45deg, #ff0000, #ff8800, #ffff00, #00ff00, #0088ff, #8800ff, #ff0000); background-origin: border-box; background-clip: content-box, border-box; padding: 2px; animation: cc-rainbow-spin 3s linear infinite; }
.cc-frame-rainbow img { border-radius: 50%; }
@keyframes cc-rainbow-spin { from { filter: hue-rotate(0deg); } to { filter: hue-rotate(360deg); } }

/* Prank Effects */
.cc-prank-flip .postbody { transform: rotate(180deg); }
.cc-prank-hat .vtprofilepanel img:first-child { position: relative; }
.cc-prank-hat .vtprofilepanel::before { content: '🎉'; position: absolute; top: -10px; right: 5px; font-size: 24px; z-index: 10; }