/* ===============================================================
======================  JTV THEME ENGINE  ======================
======================      DIRECTORY      =====================
===============================================================

01.0 — GLOBAL BASE
    01.1 — Reset & Normalization
    01.2 — Global Typography
    01.3 — Global Buttons
    01.4 — Global Containers

02.0 — JTV 2011 THEME
    02.1 — 2011 Variable Directory
    02.2 — 2011 Variable Mapping
    02.3 — 2011 Layout (Float-Based)
    02.4 — 2011 Navbar (120px, Scrolls)
    02.5 — 2011 Components
    02.6 — 2011 Dark Mode
    02.7 — 2011 Footer

03.0 — JTV 2012 THEME
    03.1 — 2012 Variable Directory
    03.2 — 2012 Variable Mapping
    03.3 — 2012 Layout (Flex-Based)
    03.4 — 2012 Navbar (Flexbox)
    03.5 — 2012 Components
    03.6 — 2012 Dark Mode
    03.7 — 2012 Footer

04.0 — THEME SAFETY LAYER
    04.1 — Disable Unthemed Layout
    04.2 — Prevent 2011 → 2012 Bleed
    04.3 — Prevent 2012 → 2011 Bleed
    04.4 — Neutralize Global Navbar Rules
    04.5 — Neutralize Global Layout Rules
    04.6 — Isolation Enforcement
    04.7 — Future-Proofing Layer

05.0 — JAVASCRIPT
    05.1 — Theme Switcher
    05.2 — Persistence (LocalStorage)
    05.3 — Auto-Apply on Load

06.0 — MIGRATION GUIDE
    06.1 — Adding a 2013 Theme
    06.2 — Variable Directory Template
    06.3 — Mapping Template
    06.4 — Layout Integration
    06.5 — Safety Layer Integration
=============================================================== */


/* ============================================================
   =======================  GLOBAL BASE  =======================
   ============================================================ */

/* Base document defaults */
:root {
  /* Generic base colors */
  --bg: #ffffff;
  --text: #000000;

  /* Generic button system (used by both themes) */
  --btn-radius: 6px;
  --btn-font-size: 12px;
  --btn-font-weight: 500;
  --btn-padding-y: 3px;
  --btn-padding-x: 10px;

  --btn-secondary-bg: #dcdcdc;
  --btn-secondary-bg-hover: #e6e6e6;
  --btn-secondary-text: #444;
}

body {
  margin: 0;
  font-family: "Inter", "Helvetica Neue", Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  background: #000 url('peacefuljay-channel_background_image.jpeg') no-repeat center top fixed;
  color: #ddd;
}

/* ============================================================
   =======================  JTV 2011  =======================
   ============================================================ */

/* ============================================================
   2.1 — 2011 VARIABLE DIRECTORY (FINAL, MERGED, CLEAN)
   ============================================================ */

body.jtv2011,
body.jtv2011-dark {

  /* NAVBAR */
  --2011-navbar-bg: #202a32;
  --2011-navbar-text-color: #ffffff;
  --2011-navbar-font-family: "Inter", sans-serif;
  --2011-navbar-padding: 0 450px;
  --2011-navbar-position: relative;
  --2011-navbar-top: 0;
  --2011-navbar-z: 9;
  --2011-navbar-height: 120px;
  --2011-navbar-border-bottom: 1px solid #0f3c7a;
  --2011-navbar-shadow: 0 3px 6px rgba(0,0,0,0.35);

  /* HEADER */
  --2011-header-position: relative;
  --2011-header-top: 0;
  --2011-header-z: 10;

  /* CHANNEL TITLE */
  --2011-channel-title-font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  --2011-channel-title-font-size: 24px;
  --2011-channel-title-font-weight: bold;
  --2011-channel-title-color: #ffffff;
  --2011-channel-title-margin: 0 0 10px 0;
  --2011-channel-title-padding: 0;
  --2011-channel-title-text-shadow: 0 1px 2px rgba(0,0,0,0.5);

  /* MAIN WRAPPER */
  --2011-main-wrapper-display: block;
  --2011-main-wrapper-width: 100%;
  --2011-main-wrapper-max-width: 1000px;
  --2011-main-wrapper-margin: 0 auto 40px auto;
  --2011-main-wrapper-overflow: auto;

  /* CONTENT CONTAINER */
  --2011-content-bg: #ffffff;
  --2011-content-border: 1px solid #c8c8c8;
  --2011-content-radius: 6px;
  --2011-content-padding: 15px;
  --2011-content-margin-top: 0;
  --2011-content-margin-bottom: 40px;
  --2011-content-margin-left: auto;
  --2011-content-margin-right: auto;
  --2011-content-shadow: 0 0 8px rgba(0,0,0,0.15);
  --2011-content-position: relative;
  --2011-content-z: 10;
  --2011-content-display: block;

  /* COLUMNS */
  --2011-left-column-float: left;
  --2011-left-column-width: 640px;
  --2011-left-column-box-sizing: border-box;

  --2011-right-column-float: left;
  --2011-right-column-width: 300px;
  --2011-right-column-margin-left: 15px;
  --2011-right-column-box-sizing: border-box;

  /* CHANNEL INFO LEFT */
  --2011-channel-info-left-display: flex;
  --2011-channel-info-left-align-items: center;
  --2011-channel-info-left-gap: 10px;
  --2011-channel-info-left-font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  --2011-channel-info-left-font-size: 14px;
  --2011-channel-info-left-font-weight: bold;
  --2011-channel-info-left-color: #ffffff;
  --2011-channel-info-left-margin: 0 0 5px 0;
  --2011-channel-info-left-padding: 0;

  /* CHANNEL INFO RIGHT */
  --2011-channel-info-right-display: flex;
  --2011-channel-info-right-align-items: center;
  --2011-channel-info-right-gap: 8px;
  --2011-channel-info-right-font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  --2011-channel-info-right-font-size: 13px;
  --2011-channel-info-right-font-weight: normal;
  --2011-channel-info-right-color: #000000;
  --2011-channel-info-right-margin: 0;
  --2011-channel-info-right-padding: 0;

  /* CHANNEL DESCRIPTION */
  --2011-channel-description-font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  --2011-channel-description-font-size: 13px;
  --2011-channel-description-font-weight: normal;
  --2011-channel-description-color: #e6e6e6;
  --2011-channel-description-line-height: 1.4;
  --2011-channel-description-margin: 4px 0 10px 0;
  --2011-channel-description-padding: 0;
  --2011-channel-description-max-width: 600px;
  --2011-channel-description-text-shadow: 0 1px 2px rgba(0,0,0,0.4);

  /* FACEBOOK BUTTON */
  --2011-facebook-display: inline-flex;
  --2011-facebook-align-items: center;
  --2011-facebook-gap: 4px;
  --2011-facebook-font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  --2011-facebook-font-size: 12px;
  --2011-facebook-font-weight: bold;
  --2011-facebook-color: #ffffff;
  --2011-facebook-bg: #3b5998;
  --2011-facebook-border: 1px solid #2d4373;
  --2011-facebook-radius: 3px;
  --2011-facebook-padding: 2px 6px;
  --2011-facebook-margin: 0;
  --2011-facebook-icon-size: 12px;
  --2011-facebook-icon-color: #ffffff;

  /* SPLIT PILL BUTTONS */
  --2011-pill-font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  --2011-pill-font-size: 12px;
  --2011-pill-font-weight: bold;
  --2011-pill-padding-y: 3px;
  --2011-pill-padding-x: 4px;
  --2011-pill-radius: 7px;
  --2011-pill-border: 1px solid rgba(0,0,0,0.4);
  --2011-pill-gray-bg: #e0e0e0;
  --2011-pill-gray-text: #3b3b3b;
  --2011-pill-blue-bg: #3b5998;
  --2011-pill-blue-text: #ffffff;
  --2011-pill-gap: 0;

  /* SUGGESTED CHANNELS */
  --2011-sc-title-font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  --2011-sc-title-font-size: 14px;
  --2011-sc-title-font-weight: bold;
  --2011-sc-title-color: #ffffff;
  --2011-sc-title-margin: 10px 0 8px 0;

  --2011-sc-item-display: flex;
  --2011-sc-item-gap: 8px;
  --2011-sc-item-padding: 6px 0;

  --2011-sc-thumb-width: 60px;
  --2011-sc-thumb-height: 45px;
  --2011-sc-thumb-radius: 3px;
  --2011-sc-thumb-bg: #444444;

  --2011-sc-info-font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  --2011-sc-info-font-size: 12px;
  --2011-sc-info-color: #dddddd;
  --2011-sc-info-line-height: 1.3;

  --2011-sc-meta-font-size: 11px;
  --2011-sc-meta-color: #aaaaaa;

  /* VIDEO ARCHIVE */
  --2011-va-item-display: flex;
  --2011-va-item-gap: 10px;
  --2011-va-item-padding: 10px 0;
  --2011-va-item-border-bottom: 1px solid rgba(255,255,255,0.1);

  --2011-va-thumb-width: 120px;
  --2011-va-thumb-height: 90px;
  --2011-va-thumb-radius: 3px;
  --2011-va-thumb-bg: #444444;

  --2011-va-title-font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  --2011-va-title-font-size: 14px;
  --2011-va-title-font-weight: bold;
  --2011-va-title-color: #ffffff;
  --2011-va-title-line-height: 1.3;

  --2011-va-meta-font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  --2011-va-meta-font-size: 12px;
  --2011-va-meta-color: #cccccc;
  --2011-va-meta-line-height: 1.3;

  --2011-va-item-hover-bg: rgba(255,255,255,0.05);

  /* MORE VIDEOS BUTTON */
  --2011-more-videos-display: block;
  --2011-more-videos-width: 100%;
  --2011-more-videos-padding: 10px 0;
  --2011-more-videos-margin: 15px 0 0 0;
  --2011-more-videos-bg: #e0e0e0;
  --2011-more-videos-bg-hover: #d0d0d0;
  --2011-more-videos-border: 1px solid #b5b5b5;
  --2011-more-videos-radius: 4px;
  --2011-more-videos-font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  --2011-more-videos-font-size: 14px;
  --2011-more-videos-font-weight: bold;
  --2011-more-videos-color: #333333;

  /* NAVBAR COMPONENTS */
  --2011-nav-font-size: 13px;
  --2011-nav-font-weight: 500;
  --2011-nav-link-hover-color: #ffffff;

  --2011-nav-pill-bg: #3b3b3b;
  --2011-nav-pill-bg-hover: #4a4a4a;
  --2011-nav-pill-text-color: #ffffff;
  --2011-nav-pill-padding: 6px 12px;
  --2011-nav-pill-radius: 20px;

  --2011-nav-search-bg: #ffffff;
  --2011-nav-search-border: 1px solid #cccccc;
  --2011-nav-search-radius: 20px 0 0 20px;
  --2011-nav-search-padding: 6px 12px;

  --2011-nav-search-button-bg: #e0e0e0;
  --2011-nav-search-button-bg-hover: #d0d0d0;
  --2011-nav-search-button-color: #333333;
  --2011-nav-search-button-radius: 0 20px 20px 0;

  /* FOOTER */
  --2011-footer-z: -1;
  
  /* 2011 TAB BAR */
--2011-tabbar-bg: #3a3a3a;
--2011-tabbar-border-bottom: 1px solid #2a2a2a;
--2011-tabbar-height: 32px;

--2011-tab-font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
--2011-tab-font-size: 12px;
--2011-tab-font-weight: bold;
--2011-tab-color: #ffffff;
--2011-tab-color-active: #ffffff;

--2011-tab-padding: 0 14px;
--2011-tab-border-right: 1px solid #2f2f2f;

--2011-tab-active-underline: 3px solid #4a90e2; /* classic JTV blue */

/* 2011 FOOTER */
--2011-footer-bg: #2f2f2f;
--2011-footer-text-color: #cccccc;
--2011-footer-link-color: #b38bff; /* classic JTV purple */
--2011-footer-link-hover-color: #d3b3ff;

--2011-footer-padding: 20px 0;
--2011-footer-font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
--2011-footer-font-size: 12px;

/* 2011 FOOTER PILL */
--2011-footer-pill-bg: #3a3a3a50;
--2011-footer-pill-border: 1px solid #1f1f1f;
--2011-footer-pill-radius: 4px;
--2011-footer-pill-padding: 6px 12px;
--2011-footer-pill-shadow: inset 0 1px 2px rgba(0,0,0,0.4);
--2011-footer-pill-gap: 10px;

}

/* ============================================================
   2.2 — 2011 VARIABLE MAPPING (FULL THEME → GENERIC TOKENS)
   ============================================================ */

body.jtv2011,
body.jtv2011-dark {

  /* ============================
     NAVBAR
     ============================ */
  --navbar-bg: var(--2011-navbar-bg);
  --navbar-text-color: var(--2011-navbar-text-color);
  --navbar-font-family: var(--2011-navbar-font-family);
  --navbar-padding: var(--2011-navbar-padding);
  --navbar-position: var(--2011-navbar-position);
  --navbar-top: var(--2011-navbar-top);
  --navbar-z: var(--2011-navbar-z);
  --navbar-height: var(--2011-navbar-height);
  --navbar-border-bottom: var(--2011-navbar-border-bottom);
  --navbar-shadow: var(--2011-navbar-shadow);

  /* ============================
     HEADER
     ============================ */
  --header-position: var(--2011-header-position);
  --header-top: var(--2011-header-top);
  --header-z: var(--2011-header-z);

  /* ============================
     CHANNEL TITLE
     ============================ */
  --channel-title-font-family: var(--2011-channel-title-font-family);
  --channel-title-font-size: var(--2011-channel-title-font-size);
  --channel-title-font-weight: var(--2011-channel-title-font-weight);
  --channel-title-color: var(--2011-channel-title-color);
  --channel-title-margin: var(--2011-channel-title-margin);
  --channel-title-padding: var(--2011-channel-title-padding);
  --channel-title-text-shadow: var(--2011-channel-title-text-shadow);

  /* ============================
     MAIN WRAPPER
     ============================ */
  --main-wrapper-display: var(--2011-main-wrapper-display);
  --main-wrapper-width: var(--2011-main-wrapper-width);
  --main-wrapper-max-width: var(--2011-main-wrapper-max-width);
  --main-wrapper-margin: var(--2011-main-wrapper-margin);
  --main-wrapper-overflow: var(--2011-main-wrapper-overflow);

  /* ============================
     CONTENT CONTAINER
     ============================ */
  --content-container-background: var(--2011-content-bg);
  --content-container-border: var(--2011-content-border);
  --content-container-border-radius: var(--2011-content-radius);
  --content-container-padding: var(--2011-content-padding);
  --content-container-margin-top: var(--2011-content-margin-top);
  --content-container-margin-bottom: var(--2011-content-margin-bottom);
  --content-container-margin-left: var(--2011-content-margin-left);
  --content-container-margin-right: var(--2011-content-margin-right);
  --content-container-box-shadow: var(--2011-content-shadow);
  --content-container-position: var(--2011-content-position);
  --content-container-z-index: var(--2011-content-z);
  --content-container-display: var(--2011-content-display);

  /* ============================
     COLUMNS
     ============================ */
  --left-column-float: var(--2011-left-column-float);
  --left-column-width: var(--2011-left-column-width);
  --left-column-box-sizing: var(--2011-left-column-box-sizing);

  --right-column-float: var(--2011-right-column-float);
  --right-column-width: var(--2011-right-column-width);
  --right-column-margin-left: var(--2011-right-column-margin-left);
  --right-column-box-sizing: var(--2011-right-column-box-sizing);

  /* ============================
     CHANNEL INFO LEFT
     ============================ */
  --channel-info-left-display: var(--2011-channel-info-left-display);
  --channel-info-left-align-items: var(--2011-channel-info-left-align-items);
  --channel-info-left-gap: var(--2011-channel-info-left-gap);
  --channel-info-left-font-family: var(--2011-channel-info-left-font-family);
  --channel-info-left-font-size: var(--2011-channel-info-left-font-size);
  --channel-info-left-font-weight: var(--2011-channel-info-left-font-weight);
  --channel-info-left-color: var(--2011-channel-info-left-color);
  --channel-info-left-margin: var(--2011-channel-info-left-margin);
  --channel-info-left-padding: var(--2011-channel-info-left-padding);

  /* ============================
     CHANNEL INFO RIGHT
     ============================ */
  --channel-info-right-display: var(--2011-channel-info-right-display);
  --channel-info-right-align-items: var(--2011-channel-info-right-align-items);
  --channel-info-right-gap: var(--2011-channel-info-right-gap);
  --channel-info-right-font-family: var(--2011-channel-info-right-font-family);
  --channel-info-right-font-size: var(--2011-channel-info-right-font-size);
  --channel-info-right-font-weight: var(--2011-channel-info-right-font-weight);
  --channel-info-right-color: var(--2011-channel-info-right-color);
  --channel-info-right-margin: var(--2011-channel-info-right-margin);
  --channel-info-right-padding: var(--2011-channel-info-right-padding);

  /* ============================
     CHANNEL DESCRIPTION
     ============================ */
  --channel-description-font-family: var(--2011-channel-description-font-family);
  --channel-description-font-size: var(--2011-channel-description-font-size);
  --channel-description-font-weight: var(--2011-channel-description-font-weight);
  --channel-description-color: var(--2011-channel-description-color);
  --channel-description-line-height: var(--2011-channel-description-line-height);
  --channel-description-margin: var(--2011-channel-description-margin);
  --channel-description-padding: var(--2011-channel-description-padding);
  --channel-description-max-width: var(--2011-channel-description-max-width);
  --channel-description-text-shadow: var(--2011-channel-description-text-shadow);

  /* ============================
     FACEBOOK BUTTON
     ============================ */
  --facebook-display: var(--2011-facebook-display);
  --facebook-align-items: var(--2011-facebook-align-items);
  --facebook-gap: var(--2011-facebook-gap);
  --facebook-font-family: var(--2011-facebook-font-family);
  --facebook-font-size: var(--2011-facebook-font-size);
  --facebook-font-weight: var(--2011-facebook-font-weight);
  --facebook-color: var(--2011-facebook-color);
  --facebook-bg: var(--2011-facebook-bg);
  --facebook-border: var(--2011-facebook-border);
  --facebook-radius: var(--2011-facebook-radius);
  --facebook-padding: var(--2011-facebook-padding);
  --facebook-margin: var(--2011-facebook-margin);

  /* ============================
     SPLIT PILL BUTTONS
     ============================ */
  --pill-font-family: var(--2011-pill-font-family);
  --pill-font-size: var(--2011-pill-font-size);
  --pill-font-weight: var(--2011-pill-font-weight);
  --pill-padding-y: var(--2011-pill-padding-y);
  --pill-padding-x: var(--2011-pill-padding-x);
  --pill-radius: var(--2011-pill-radius);
  --pill-border: var(--2011-pill-border);
  --pill-gray-bg: var(--2011-pill-gray-bg);
  --pill-gray-text: var(--2011-pill-gray-text);
  --pill-blue-bg: var(--2011-pill-blue-bg);
  --pill-blue-text: var(--2011-pill-blue-text);
  --pill-gap: var(--2011-pill-gap);

  /* ============================
     SUGGESTED CHANNELS
     ============================ */
  --sc-title-font-family: var(--2011-sc-title-font-family);
  --sc-title-font-size: var(--2011-sc-title-font-size);
  --sc-title-font-weight: var(--2011-sc-title-font-weight);
  --sc-title-color: var(--2011-sc-title-color);
  --sc-title-margin: var(--2011-sc-title-margin);

  --sc-item-display: var(--2011-sc-item-display);
  --sc-item-gap: var(--2011-sc-item-gap);
  --sc-item-padding: var(--2011-sc-item-padding);

  --sc-thumb-width: var(--2011-sc-thumb-width);
  --sc-thumb-height: var(--2011-sc-thumb-height);
  --sc-thumb-radius: var(--2011-sc-thumb-radius);
  --sc-thumb-bg: var(--2011-sc-thumb-bg);

  --sc-info-font-family: var(--2011-sc-info-font-family);
  --sc-info-font-size: var(--2011-sc-info-font-size);
  --sc-info-color: var(--2011-sc-info-color);
  --sc-info-line-height: var(--2011-sc-info-line-height);

  --sc-meta-font-size: var(--2011-sc-meta-font-size);
  --sc-meta-color: var(--2011-sc-meta-color);

  /* ============================
     VIDEO ARCHIVE
     ============================ */
  --va-item-display: var(--2011-va-item-display);
  --va-item-gap: var(--2011-va-item-gap);
  --va-item-padding: var(--2011-va-item-padding);
  --va-item-border-bottom: var(--2011-va-item-border-bottom);

  --va-thumb-width: var(--2011-va-thumb-width);
  --va-thumb-height: var(--2011-va-thumb-height);
  --va-thumb-radius: var(--2011-va-thumb-radius);
  --va-thumb-bg: var(--2011-va-thumb-bg);

  --va-title-font-family: var(--2011-va-title-font-family);
  --va-title-font-size: var(--2011-va-title-font-size);
  --va-title-font-weight: var(--2011-va-title-font-weight);
  --va-title-color: var(--2011-va-title-color);
  --va-title-line-height: var(--2011-va-title-line-height);

  --va-meta-font-family: var(--2011-va-meta-font-family);
  --va-meta-font-size: var(--2011-va-meta-font-size);
  --va-meta-color: var(--2011-va-meta-color);
  --va-meta-line-height: var(--2011-va-meta-line-height);

  --va-item-hover-bg: var(--2011-va-item-hover-bg);

  /* ============================
     MORE VIDEOS BUTTON
     ============================ */
  --more-videos-display: var(--2011-more-videos-display);
  --more-videos-width: var(--2011-more-videos-width);
  --more-videos-padding: var(--2011-more-videos-padding);
  --more-videos-margin: var(--2011-more-videos-margin);
  --more-videos-bg: var(--2011-more-videos-bg);
  --more-videos-bg-hover: var(--2011-more-videos-bg-hover);
  --more-videos-border: var(--2011-more-videos-border);
  --more-videos-radius: var(--2011-more-videos-radius);
  --more-videos-font-family: var(--2011-more-videos-font-family);
  --more-videos-font-size: var(--2011-more-videos-font-size);
  --more-videos-font-weight: var(--2011-more-videos-font-weight);
  --more-videos-color: var(--2011-more-videos-color);

  /* ============================
     NAVBAR COMPONENTS
     ============================ */
  --nav-font-size: var(--2011-nav-font-size);
  --nav-font-weight: var(--2011-nav-font-weight);
  --nav-link-hover-color: var(--2011-nav-link-hover-color);

  --nav-pill-bg: var(--2011-nav-pill-bg);
  --nav-pill-bg-hover: var(--2011-nav-pill-bg-hover);
  --nav-pill-text-color: var(--2011-nav-pill-text-color);
  --nav-pill-padding: var(--2011-nav-pill-padding);
  --nav-pill-radius: var(--2011-nav-pill-radius);

  --nav-search-bg: var(--2011-nav-search-bg);
  --nav-search-border: var(--2011-nav-search-border);
  --nav-search-radius: var(--2011-nav-search-radius);
  --nav-search-padding: var(--2011-nav-search-padding);

  --nav-search-button-bg: var(--2011-nav-search-button-bg);
  --nav-search-button-bg-hover: var(--2011-nav-search-button-bg-hover);
  --nav-search-button-color: var(--2011-nav-search-button-color);
  --nav-search-button-radius: var(--2011-nav-search-button-radius);

  /* ============================
     FOOTER
     ============================ */
--footer-z: var(--2011-footer-z);

--tabbar-bg: var(--2011-tabbar-bg);
--tabbar-border-bottom: var(--2011-tabbar-border-bottom);
--tabbar-height: var(--2011-tabbar-height);

--tab-font-family: var(--2011-tab-font-family);
--tab-font-size: var(--2011-tab-font-size);
--tab-font-weight: var(--2011-tab-font-weight);
--tab-color: var(--2011-tab-color);
--tab-color-active: var(--2011-tab-color-active);

--tab-padding: var(--2011-tab-padding);
--tab-border-right: var(--2011-tab-border-right);

--tab-active-underline: var(--2011-tab-active-underline);

--footer-bg: var(--2011-footer-bg);
--footer-text-color: var(--2011-footer-text-color);
--footer-link-color: var(--2011-footer-link-color);
--footer-link-hover-color: var(--2011-footer-link-hover-color);

--footer-padding: var(--2011-footer-padding);
--footer-font-family: var(--2011-footer-font-family);
--footer-font-size: var(--2011-footer-font-size);

--footer-pill-bg: var(--2011-footer-pill-bg);
--footer-pill-border: var(--2011-footer-pill-border);
--footer-pill-radius: var(--2011-footer-pill-radius);
--footer-pill-padding: var(--2011-footer-pill-padding);
--footer-pill-shadow: var(--2011-footer-pill-shadow);
--footer-pill-gap: var(--2011-footer-pill-gap);

}


/* ============================================================
   2.3 — 2011 BASE LAYOUT
   ============================================================ */

body.jtv2011 #main.page_wrapper,
body.jtv2011-dark #main.page_wrapper {
  display: var(--main-wrapper-display);
  width: var(--main-wrapper-width);
  max-width: var(--main-wrapper-max-width);
  margin: var(--main-wrapper-margin);
  overflow: var(--main-wrapper-overflow);
}

body.jtv2011 #content_container,
body.jtv2011-dark #content_container {
  background: var(--content-container-background);
  border: var(--content-container-border);
  border-radius: var(--content-container-border-radius);
  padding: var(--content-container-padding);
  margin-top: var(--content-container-margin-top);
  margin-bottom: var(--content-container-margin-bottom);
  margin-left: var(--content-container-margin-left);
  margin-right: var(--content-container-margin-right);
  box-shadow: var(--content-container-box-shadow);
  position: var(--content-container-position);
  z-index: var(--content-container-z-index);
  display: var(--content-container-display);
}

body.jtv2011 #left_column,
body.jtv2011-dark #left_column {
  float: var(--left-column-float);
  width: var(--left-column-width);
  box-sizing: var(--left-column-box-sizing);
}

body.jtv2011 #right_column,
body.jtv2011-dark #right_column {
  float: var(--right-column-float);
  width: var(--right-column-width);
  margin-left: var(--right-column-margin-left);
  box-sizing: var(--right-column-box-sizing);
}

body.jtv2011 #content_container::after,
body.jtv2011 #main.page_wrapper::after,
body.jtv2011-dark #content_container::after,
body.jtv2011-dark #main.page_wrapper::after {
  content: "";
  display: block;
  clear: both;
}

/* ============================================================
   2.4 — 2011 NAVBAR (FLOAT-BASED)
   ============================================================ */
   
  
body.jtv2011 #site_header,
body.jtv2011-dark #site_header {
  position: var(--header-position);
  top: var(--header-top);
  z-index: var(--header-z);
  width: 100%;
  height: var(--navbar-height);
  display: block;
}

body.jtv2011 #top_navbar,
body.jtv2011-dark #top_navbar {
  height: var(--navbar-height);
  background: var(--navbar-bg);
  border-bottom: var(--navbar-border-bottom);
  padding: var(--navbar-padding);
  position: var(--navbar-position);
  top: var(--navbar-top);
  z-index: var(--navbar-z);
  box-shadow: var(--navbar-shadow);
}

body.jtv2011 #top_navbar,
body.jtv2011-dark #top_navbar {
  margin-bottom: 0;
  padding-bottom: 0;
}

body.jtv2011 #content_container,
body.jtv2011-dark #content_container {
  margin-top: 0;
}

body.jtv2011 #site_header,
body.jtv2011-dark #site_header {
  padding: 0;
  margin-bottom: -60px;
}


body.jtv2011 #top_navbar .wrapper,
body.jtv2011-dark #top_navbar .wrapper {
  display: block;
  width: 1000px;
  margin: 0 auto;
  height: 100%;
}

body.jtv2011 #nav_left,
body.jtv2011-dark #nav_left,
body.jtv2011 #nav_center,
body.jtv2011-dark #nav_center,
body.jtv2011 #browse_games,
body.jtv2011-dark #browse_games,
body.jtv2011 #nav_right,
body.jtv2011-dark #nav_right {
  float: left;
  display: block;
  height: 100%;
}

body.jtv2011 #nav_right,
body.jtv2011-dark #nav_right {
  float: right;
}

body.jtv2011 #top_navbar a,
body.jtv2011 #top_navbar select,
body.jtv2011-dark #top_navbar a,
body.jtv2011-dark #top_navbar select {
  font-family: var(--navbar-font-family);
  font-size: var(--nav-font-size);
  font-weight: var(--nav-font-weight);
  color: var(--navbar-text-color);
  text-decoration: none;
}

body.jtv2011 #top_navbar a:hover,
body.jtv2011-dark #top_navbar a:hover {
  color: var(--nav-link-hover-color);
}

body.jtv2011 #nav_signup,
body.jtv2011-dark #nav_signup {
  background: var(--nav-pill-bg);
  color: var(--nav-pill-text-color);
  padding: var(--nav-pill-padding);
  border-radius: var(--nav-pill-radius);
  margin-left: 10px;
}

body.jtv2011 #nav_signup:hover,
body.jtv2011-dark #nav_signup:hover {
  background: var(--nav-pill-bg-hover);
}

body.jtv2011 #nav_login,
body.jtv2011-dark #nav_login {
  font-family: var(--navbar-font-family);
  font-size: var(--nav-font-size);
  font-weight: var(--nav-font-weight);
  color: var(--navbar-text-color);
  margin-left: 10px;
}

/* BROWSE GAMES */
body.jtv2011 #browse_games,
body.jtv2011-dark #browse_games {
  font-family: var(--navbar-font-family);
  font-size: var(--nav-font-size);
  font-weight: var(--nav-font-weight);
  color: var(--navbar-text-color);
  margin-left: 12px;
  display: flex;
  align-items: center;
}

/* SEARCH FORM (2011 PILL) */
body.jtv2011 #search_form,
body.jtv2011-dark #search_form {
  display: flex;
  align-items: center;
  margin-left: 12px;
}

body.jtv2011 #search_input,
body.jtv2011-dark #search_input {
  background: var(--nav-search-bg);
  border: var(--nav-search-border);
  border-radius: var(--nav-search-radius);
  padding: var(--nav-search-padding);
  font-family: var(--navbar-font-family);
  font-size: var(--nav-font-size);
  color: #333333;
}

body.jtv2011 #search_button,
body.jtv2011-dark #search_button {
  background: var(--nav-search-button-bg);
  color: var(--nav-search-button-color);
  border: var(--nav-search-border);
  border-left: none;
  border-radius: var(--nav-search-button-radius);
  padding: 6px 12px;
  cursor: pointer;
}

body.jtv2011 #search_button:hover,
body.jtv2011-dark #search_button:hover {
  background: var(--nav-search-button-bg-hover);
}

/* REMOVE 2012 NAV ELEMENTS */
body.jtv2011 #nav_search_wrapper,
body.jtv2011 .nav-dot,
body.jtv2011-dark #nav_search_wrapper,
body.jtv2011-dark .nav-dot {
  display: none !important;
}

body.jtv2011 #top_navbar .wrapper > * {
  margin: 0;
  padding: 0;
  line-height: var(--navbar-height-2011);
  height: var(--navbar-height-2011);
  display: inline-block;
  vertical-align: middle;
}

body.jtv2011-dark #top_navbar .wrapper > * {
  margin: 0 !important;
  padding: 0 !important;
  height: var(--navbar-height-2011) !important;
  line-height: var(--navbar-height-2011) !important;
  display: inline-block !important;
  vertical-align: middle !important;
}

body.jtv2011 .nav-2011,
body.jtv2011-dark .nav-2011 {
  display: inline-block;
}

body.jtv2011 #top_navbar .nav-2012,
body.jtv2011-dark #top_navbar .nav-2012 {
  display: none !important;
}


/* 2011: make the navbar a clean horizontal flex row */
body.jtv2011 #top_navbar,
body.jtv2011-dark #top_navbar {
  padding: 0;
  height: 72px;              /* or your --navbar-height-2011 */
}

body.jtv2011 #top_navbar .wrapper,
body.jtv2011-dark #top_navbar .wrapper {
  display: flex;
  align-items: center;        /* vertical centering */
  justify-content: space-between;
  width: 1000px;
  margin: 0 auto;
  gap: 12px;
}

/* normalize the right side items */
body.jtv2011 #nav_right > * ,
body.jtv2011-dark #nav_right > * {
  margin: 0;
  padding: 0 8px;
  line-height: 40px;          /* match navbar height */
  height: 40px;
}

/* normalize the theme select */
body.jtv2011 #theme_select,
body.jtv2011-dark #theme_select {
  height: 26px;
  line-height: 26px;
  margin: 0 4px 0 0;
}




/* ============================================================
   2.5 2011 COMPONENTS (CLEANED)
   ============================================================ */

/* CHANNEL TITLE */
body.jtv2011 #channel_title,
body.jtv2011-dark #channel_title {
  font-family: var(--channel-title-font-family);
  font-size: var(--channel-title-font-size);
  font-weight: var(--channel-title-font-weight);
  color: var(--channel-title-color);
  margin: var(--channel-title-margin);
  padding: var(--channel-title-padding);
  text-shadow: var(--channel-title-text-shadow);
}

/* CHANNEL INFO LEFT */
body.jtv2011 #channel_info_left,
body.jtv2011-dark #channel_info_left {
  display: var(--channel-info-left-display);
  align-items: var(--channel-info-left-align-items);
  gap: var(--channel-info-left-gap);
  font-family: var(--channel-info-left-font-family);
  font-size: var(--channel-info-left-font-size);
  font-weight: var(--channel-info-left-font-weight);
  color: var(--channel-info-left-color);
  margin: var(--channel-info-left-margin);
  padding: var(--channel-info-left-padding);
}

/* CHANNEL INFO RIGHT */
body.jtv2011 #channel_info_right,
body.jtv2011-dark #channel_info_right {
  display: var(--channel-info-right-display);
  align-items: var(--channel-info-right-align-items);
  gap: var(--channel-info-right-gap);
  font-family: var(--channel-info-right-font-family);
  font-size: var(--channel-info-right-font-size);
  font-weight: var(--channel-info-right-font-weight);
  color: var(--channel-info-right-color);
  margin: var(--channel-info-right-margin);
  padding: var(--channel-info-right-padding);
}

/* CHANNEL DESCRIPTION */
body.jtv2011 #channel_description,
body.jtv2011-dark #channel_description {
  font-family: var(--channel-description-font-family);
  font-size: var(--channel-description-font-size);
  font-weight: var(--channel-description-font-weight);
  color: var(--channel-description-color);
  line-height: var(--channel-description-line-height);
  margin: var(--channel-description-margin);
  padding: var(--channel-description-padding);
  max-width: var(--channel-description-max-width);
  text-shadow: var(--channel-description-text-shadow);
}

/* FACEBOOK BUTTON */
body.jtv2011 #channel_info_facebook,
body.jtv2011-dark #channel_info_facebook {
  display: var(--facebook-display);
  align-items: var(--facebook-align-items);
  gap: var(--facebook-gap);
  font-family: var(--facebook-font-family);
  font-size: var(--facebook-font-size);
  font-weight: var(--facebook-font-weight);
  color: var(--facebook-color);
  background: var(--facebook-bg);
  border: var(--facebook-border);
  border-radius: var(--facebook-radius);
  padding: var(--facebook-padding);
  margin: var(--facebook-margin);
  text-decoration: none;
  cursor: pointer;
}

body.jtv2011 #channel_info_facebook .icon,
body.jtv2011-dark #channel_info_facebook .icon {
  font-size: var(--facebook-icon-size);
  color: var(--facebook-icon-color);
  line-height: 1;
}

/* SPLIT PILL BUTTONS */
body.jtv2011 .split-pill,
body.jtv2011-dark .split-pill {
  display: inline-flex;
  align-items: center;
  border-radius: var(--pill-radius);
  overflow: hidden;
  border: var(--pill-border);
  margin-right: 10px;
}

body.jtv2011 .split-pill .pill-left,
body.jtv2011-dark .split-pill .pill-left {
  background: var(--pill-gray-bg);
  color: var(--pill-gray-text);
  padding: var(--pill-padding-y) var(--pill-padding-x);
  font-family: var(--pill-font-family);
  font-size: var(--pill-font-size);
  font-weight: var(--pill-font-weight);
  border-right: var(--pill-border);
}

/* SHARE PILL */
body.jtv2011 .pill-share,
body.jtv2011-dark .pill-share {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--pill-gray-bg);
  color: var(--pill-gray-text);
  padding: var(--pill-padding-y) var(--pill-padding-x);
  border-radius: var(--pill-radius);
  border: var(--pill-border);
  font-family: var(--pill-font-family);
  font-size: var(--pill-font-size);
  font-weight: var(--pill-font-weight);
  text-decoration: none;
  cursor: pointer;
}

/* SUGGESTED CHANNELS */
body.jtv2011 #suggested_channels,
body.jtv2011-dark #suggested_channels {
  margin-top: 20px;
}

body.jtv2011 #suggested_channels .sc_title_header,
body.jtv2011-dark #suggested_channels .sc_title_header {
  font-family: var(--sc-title-font-family);
  font-size: var(--sc-title-font-size);
  font-weight: var(--sc-title-font-weight);
  color: var(--sc-title-color);
  margin: var(--sc-title-margin);
}

body.jtv2011 #suggested_channels .sc_item,
body.jtv2011-dark #suggested_channels .sc_item {
  display: var(--sc-item-display);
  gap: var(--sc-item-gap);
  padding: var(--sc-item-padding);
  align-items: center;
}

body.jtv2011 #suggested_channels .sc_thumb,
body.jtv2011-dark #suggested_channels .sc_thumb {
  width: var(--sc-thumb-width);
  height: var(--sc-thumb-height);
  background: var(--sc-thumb-bg);
  border-radius: var(--sc-thumb-radius);
}

body.jtv2011 #suggested_channels .sc_info,
body.jtv2011-dark #suggested_channels .sc_info {
  font-family: var(--sc-info-font-family);
  font-size: var(--sc-info-font-size);
  color: var(--sc-info-color);
  line-height: var(--sc-info-line-height);
}

body.jtv2011 #suggested_channels .sc_view_and_count,
body.jtv2011-dark #suggested_channels .sc_view_and_count {
  font-size: var(--sc-meta-font-size);
  color: var(--sc-meta-color);
}

/* VIDEO ARCHIVE ITEMS */
body.jtv2011 .video_item,
body.jtv2011-dark .video_item {
  display: var(--va-item-display);
  gap: var(--va-item-gap);
  padding: var(--va-item-padding);
  border-bottom: var(--va-item-border-bottom);
  align-items: flex-start;
}

body.jtv2011 .video_item:hover,
body.jtv2011-dark .video_item:hover {
  background: var(--va-item-hover-bg);
}

body.jtv2011 .video_item .thumb_placeholder,
body.jtv2011-dark .video_item .thumb_placeholder {
  width: var(--va-thumb-width);
  height: var(--va-thumb-height);
  background: var(--va-thumb-bg);
  border-radius: var(--va-thumb-radius);
  flex-shrink: 0;
}

body.jtv2011 .video_item .video_info,
body.jtv2011-dark .video_item .video_info {
  flex: 1;
}

body.jtv2011 .video_item .video_title,
body.jtv2011-dark .video_item .video_title {
  font-family: var(--va-title-font-family);
  font-size: var(--va-title-font-size);
  font-weight: var(--va-title-font-weight);
  color: var(--va-title-color);
  line-height: var(--va-title-line-height);
  margin-bottom: 4px;
}

body.jtv2011 .video_item .video_meta,
body.jtv2011-dark .video_item .video_meta {
  font-family: var(--va-meta-font-family);
  font-size: var(--va-meta-font-size);
  color: var(--va-meta-color);
  line-height: var(--va-meta-line-height);
}

/* MORE VIDEOS BUTTON */
body.jtv2011 #more_videos,
body.jtv2011-dark #more_videos {
  display: var(--more-videos-display);
  width: var(--more-videos-width);
  padding: var(--more-videos-padding);
  margin: var(--more-videos-margin);
  background: var(--more-videos-bg);
  border: var(--more-videos-border);
  border-radius: var(--more-videos-radius);
  font-family: var(--more-videos-font-family);
  font-size: var(--more-videos-font-size);
  font-weight: var(--more-videos-font-weight);
  color: var(--more-videos-color);
  text-align: center;
  cursor: pointer;
}

body.jtv2011 #more_videos:hover,
body.jtv2011-dark #more_videos:hover {
  background: var(--more-videos-bg-hover);
}

/* 2011 TAB BAR WRAPPER */
body.jtv2011 #channel_tabs .tabs,
body.jtv2011-dark #channel_tabs .tabs {
  display: flex;
  align-items: center;
  height: var(--tabbar-height);
  background: var(--tabbar-bg);
  border-bottom: var(--tabbar-border-bottom);
  margin: 20px 0 0 0;
  padding: 0;
  list-style: none;
}

/* 2011 INDIVIDUAL TABS */
body.jtv2011 #channel_tabs .tabs li,
body.jtv2011-dark #channel_tabs .tabs li {
  padding: var(--tab-padding);
  font-family: var(--tab-font-family);
  font-size: var(--tab-font-size);
  font-weight: var(--tab-font-weight);
  color: var(--tab-color);
  border-right: var(--tab-border-right);
  cursor: pointer;
  display: flex;
  align-items: center;
  height: 100%;
}

/* 2011 ACTIVE TAB */
body.jtv2011 #channel_tabs .tabs li.active,
body.jtv2011-dark #channel_tabs .tabs li.active {
  color: var(--tab-color-active);
  border-bottom: var(--tab-active-underline);
}

/* 2011 FOOTER */
body.jtv2011 #footer_left,
body.jtv2011-dark #footer_left {
  background: var(--footer-bg);
  color: var(--footer-text-color);
  padding: var(--footer-padding);
  font-family: var(--footer-font-family);
  font-size: var(--footer-font-size);
  text-align: center;
}

/* FOOTER PILL WRAPPER */
body.jtv2011 #footer_left .footer-pill,
body.jtv2011-dark #footer_left .footer-pill {
  display: inline-flex;
  gap: var(--footer-pill-gap);
  background: var(--footer-pill-bg);
  border: var(--footer-pill-border);
  border-radius: var(--footer-pill-radius);
  padding: var(--footer-pill-padding);
  box-shadow: var(--footer-pill-shadow);
}

/* FOOTER LINKS */
/* Reset footer link color so it doesn't inherit pill color */
body.jtv2011 #footer_left a,
body.jtv2011-dark #footer_left a {
  color: var(--footer-text-color);
  text-decoration: none;
}

/* Pill link color (isolated) */
body.jtv2011 #footer_left .footer-pill a,
body.jtv2011-dark #footer_left .footer-pill a {
  color: var(--footer-link-color) !important;
  text-decoration: underline;
}

body.jtv2011 #footer_left .footer-pill a:hover,
body.jtv2011-dark #footer_left .footer-pill a:hover {
  color: var(--footer-link-hover-color) !important;
}

body.jtv2011 #footer_left,
body.jtv2011-dark #footer_left {
  all: unset;
  display: block;
}

body.jtv2011 #footer_left .footer-pill,
body.jtv2011-dark #footer_left .footer-pill {
  display: inline-flex;
  gap: var(--footer-pill-gap);
  background: var(--footer-pill-bg);
  border: var(--footer-pill-border);
  border-radius: var(--footer-pill-radius);
  padding: var(--footer-pill-padding);
}


/* 2011 channel info box border (same as 2012, no shadow) */
body.jtv2011 #channel_info_box,
body.jtv2011-dark #channel_info_box,
body.jtv2011 #channel_info_top,
body.jtv2011-dark #channel_info_top {
  border: 1px solid #c8c8c8;   /* same border as 2012 */
  border-radius: 4px;          /* same radius as 2012 */
  box-shadow: none;            /* remove 2012 shadow */
  background: var(--2011-panel-bg, #f8f8f8);
  padding: 10px;
}

body.jtv2011 #channel_info_facebook,
body.jtv2011-dark #channel_info_facebook {
  display: none !important;
}

/* ============================================================
   2.5 — 2011 COMPONENTS (VIDEO + CHAT)
   ============================================================ */

/* VIDEO PLACEHOLDER */
body.jtv2011 #player_placeholder,
body.jtv2011-dark #player_placeholder {
  width: 640px;
  height: 360px;
  background: #000;
  border: 1px solid #333;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ccc;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  margin-bottom: 15px;
}

/* CHAT SECTION */
body.jtv2011 #chat_section,
body.jtv2011-dark #chat_section {
  background: #111;
  border: 1px solid #333;
  border-radius: 4px;
  padding: 10px;
  color: #ddd;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}

/* CHAT BOX */
body.jtv2011 #chat_box,
body.jtv2011-dark #chat_box {
  background: #000;
  border: 1px solid #444;
  border-radius: 4px;
  padding: 8px;
}

/* CHAT LINES */
body.jtv2011 #chat_lines,
body.jtv2011-dark #chat_lines {
  height: 300px;
  overflow-y: auto;
  margin-bottom: 10px;
}

body.jtv2011 .chat_line,
body.jtv2011-dark .chat_line {
  padding: 2px 0;
  border-bottom: 1px solid rgba(255,255,255,0.05);
  font-size: 12px;
}

/* CHAT INPUT ROW */
body.jtv2011 #chat_input_row,
body.jtv2011-dark #chat_input_row {
  display: flex;
  align-items: center;
  gap: 6px;
}

/* CHAT INPUT */
body.jtv2011 #chat_input,
body.jtv2011-dark #chat_input {
  flex: 1;
  padding: 6px;
  border-radius: 4px;
  border: 1px solid #555;
  background: #222;
  color: #eee;
}

/* CHAT BUTTONS */
body.jtv2011 #chat_send_button,
body.jtv2011-dark #chat_send_button,
body.jtv2011 #chat_viewers_button,
body.jtv2011-dark #chat_viewers_button,
body.jtv2011 #chat_settings_button,
body.jtv2011-dark #chat_settings_button {
  background: #333;
  color: #eee;
  border: 1px solid #555;
  border-radius: 4px;
  padding: 6px 10px;
  cursor: pointer;
}

body.jtv2011 #chat_send_button:hover,
body.jtv2011-dark #chat_send_button:hover,
body.jtv2011 #chat_viewers_button:hover,
body.jtv2011-dark #chat_viewers_button:hover,
body.jtv2011 #chat_settings_button:hover,
body.jtv2011-dark #chat_settings_button:hover {
  background: #444;
}

#chat_input_combo {
  display: flex;
  align-items: center;
  background: var(--chat-pill-bg, #fff);
  border: 1px solid var(--chat-pill-border, #ccc);
  border-radius: 9999px;
  overflow: hidden;
  height: 32px;
}

#chat_input {
  flex: 1;
  min-width: 0;
  border: none;
  padding: 6px 10px;
  font-size: 14px;
  background: transparent;
  outline: none;
}

#chat_send_button {
  flex-shrink: 0;
  background: var(--chat-pill-button-bg, #e5e5e5);
  color: var(--chat-pill-button-text, #333);
  border: none;
  padding: 6px 14px;
  font-size: 14px;
  cursor: pointer;
  border-left: 1px solid var(--chat-pill-border, #ccc);
  height: 100%;
}

#chat_input_row {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 8px;
}

#chat_viewers_button,
#chat_settings_button {
  height: 32px;
  width: 32px;
  border-radius: 6px;
  border: 1px solid var(--chat-pill-border, #ccc);
  background: var(--chat-pill-bg, #fff);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}


/* ============================================================
   2.6 2011 DARK MODE OVERRIDES (CLEANED)
   ============================================================ */

body.jtv2011-dark {

  /* NAVBAR */
  --2011-navbar-bg: #111111;
  --2011-navbar-text-color: #e6e6e6;
  --2011-navbar-border-bottom: 1px solid #222222;

  /* CONTENT CONTAINER */
  --2011-content-bg: #1a1a1a;
  --2011-content-border: 1px solid #333333;
  --2011-content-shadow: 0 0 8px rgba(0,0,0,0.6);

  /* CHANNEL TITLE */
  --2011-channel-title-color: #ffffff;
  --2011-channel-title-text-shadow: 0 1px 2px rgba(0,0,0,0.8);

  /* CHANNEL INFO */
  --2011-channel-info-left-color: #e6e6e6;
  --2011-channel-info-right-color: #e6e6e6;

  /* DESCRIPTION */
  --2011-channel-description-color: #cccccc;

  /* SUGGESTED CHANNELS */
  --2011-sc-thumb-bg: #333333;
  --2011-sc-info-color: #cccccc;
  --2011-sc-meta-color: #888888;

  /* VIDEO ARCHIVE */
  --2011-va-thumb-bg: #333333;
  --2011-va-title-color: #ffffff;
  --2011-va-meta-color: #aaaaaa;
  --2011-va-item-border-bottom: 1px solid #222222;

  /* MORE VIDEOS BUTTON */
  --2011-more-videos-bg: #333333;
  --2011-more-videos-bg-hover: #444444;
  --2011-more-videos-border: 1px solid #555555;
  --2011-more-videos-color: #dddddd;
}

/* ============================================================
   2.7 2011 FOOTER (CLEANED)
   ============================================================ */

#navy_footer_bar {
  width: 100%;
  background: linear-gradient(to bottom, #2a3142 0%, #1a1f2b 100%);
  border-top: 1px solid #0d0f14;
  padding: 25px 0 45px 0;
  margin-top: -102px;
  margin-bottom: -20px;
  position: relative;
  z-index: var(--footer-z);
  font-family: "Inter", "Helvetica Neue", Helvetica, Arial, sans-serif;
}

#navy_footer_inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 450px;
}

#footer_right {
  display: flex;
  align-items: center;
  gap: 10px;
}

#gamesradar_logo {
  height: 20px;
  width: auto;
  opacity: 0.9;
}

#footer_right span {
  color: #c7cbd4;
  font-size: 12px;
}

/* BEVELED LINK GROUP */
#footer_link_bevel {
  display: inline-flex;
  align-items: center;
  padding: 6px 12px;
  border-radius: 14px;

  background: linear-gradient(to bottom, #1c2230 0%, #131822 100%);
  border: 1px solid #0b0e14;

  box-shadow:
    inset 0 1px 2px rgba(255,255,255,0.10),
    inset 0 -1px 2px rgba(0,0,0,0.35),
    0 1px 2px rgba(0,0,0,0.4);
}

#footer_link_bevel a {
  color: #d0d4dd;
  text-decoration: none;
  font-size: 12px;
  margin-right: 14px;
}

#footer_link_bevel a:last-child {
  margin-right: 0;
}

#footer_link_bevel a:hover {
  color: #ffffff;
}



/* ============================================================
===================== JTV 2012 =========================
============================================================ */

/* ============================================================
   3.1 2012 VARIABLE DIRECTORY (CLEANED)
   Pattern: --2012-component-property
   ============================================================ */

body.jtv2012,
body.jtv2012-dark {

  /* NAVBAR */
  --2012-navbar-bg: #f8f8f8;
  --2012-navbar-text-color: #333333;
  --2012-navbar-font-family: "Inter", sans-serif;
  --2012-navbar-height: 60px;
  --2012-navbar-padding: 8px 0;
  --2012-navbar-border-bottom: 1px solid #dcdcdc;
  --2012-navbar-shadow: 0 2px 4px rgba(0,0,0,0.1);

  /* NAVBAR LAYOUT (2012 uses flexbox) */
  --2012-navbar-display: flex;
  --2012-navbar-align: center;
  --2012-navbar-justify: space-between;

  /* NAVBAR LINKS */
  --2012-nav-font-size: 13px;
  --2012-nav-font-weight: 500;
  --2012-nav-link-color: #333333;
  --2012-nav-link-hover-color: #000000;

  /* NAVBAR SEARCH */
  --2012-search-bg: #ffffff;
  --2012-search-border: 1px solid #cccccc;
  --2012-search-radius: 4px;
  --2012-search-padding: 6px 10px;

  --2012-search-button-bg: #e6e6e6;
  --2012-search-button-bg-hover: #dcdcdc;
  --2012-search-button-color: #333333;
  --2012-search-button-radius: 4px;

  /* MAIN WRAPPER */
  --2012-main-wrapper-display: block;
  --2012-main-wrapper-width: 100%;
  --2012-main-wrapper-max-width: 1000px;
  --2012-main-wrapper-margin: 0 auto 40px auto;
  --2012-main-wrapper-overflow: visible;

  /* CONTENT CONTAINER */
  --2012-content-bg: #ffffff;
  --2012-content-border: 1px solid #dcdcdc;
  --2012-content-radius: 4px;
  --2012-content-padding: 20px;
  --2012-content-shadow: 0 0 6px rgba(0,0,0,0.1);

  /* COLUMNS (2012 uses flexbox) */
  --2012-columns-display: flex;
  --2012-columns-gap: 20px;

  --2012-left-column-flex: 2;
  --2012-right-column-flex: 1;

  /* CHANNEL TITLE */
  --2012-channel-title-font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  --2012-channel-title-font-size: 22px;
  --2012-channel-title-font-weight: bold;
  --2012-channel-title-color: #222222;
  --2012-channel-title-margin: 0 0 10px 0;

  /* CHANNEL INFO */
  --2012-channel-info-display: flex;
  --2012-channel-info-gap: 10px;
  --2012-channel-info-font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  --2012-channel-info-font-size: 13px;
  --2012-channel-info-color: #555555;

  /* DESCRIPTION */
  --2012-description-font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  --2012-description-font-size: 13px;
  --2012-description-color: #666666;
  --2012-description-line-height: 1.5;

  /* BUTTONS */
  --2012-button-bg: #e6e6e6;
  --2012-button-bg-hover: #dcdcdc;
  --2012-button-text-color: #333333;
  --2012-button-radius: 4px;
  --2012-button-padding: 6px 12px;

  /* FACEBOOK SHARE BOX */
  --2012-facebook-bg: #f5f5f5;
  --2012-facebook-border: 1px solid #dcdcdc;
  --2012-facebook-radius: 4px;
  --2012-facebook-padding: 12px;
  --2012-facebook-gap: 12px;

  --2012-facebook-font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  --2012-facebook-font-size: 13px;
  --2012-facebook-font-color: #555555;

  --2012-facebook-switch-bg: #e6e6e6;
  --2012-facebook-switch-radius: 12px;
  --2012-facebook-switch-handle-bg: #ffffff;
  --2012-facebook-switch-handle-size: 14px;

  /* SUGGESTED CHANNELS */
  --2012-sc-title-font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  --2012-sc-title-font-size: 14px;
  --2012-sc-title-font-weight: bold;
  --2012-sc-title-color: #333333;

  --2012-sc-item-display: flex;
  --2012-sc-item-gap: 10px;
  --2012-sc-item-padding: 8px 0;

  --2012-sc-thumb-width: 60px;
  --2012-sc-thumb-height: 45px;
  --2012-sc-thumb-radius: 3px;
  --2012-sc-thumb-bg: #dddddd;

  --2012-sc-info-font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  --2012-sc-info-font-size: 12px;
  --2012-sc-info-color: #555555;

  --2012-sc-meta-font-size: 11px;
  --2012-sc-meta-color: #888888;

  /* VIDEO ARCHIVE */
  --2012-va-item-display: flex;
  --2012-va-item-gap: 12px;
  --2012-va-item-padding: 12px 0;
  --2012-va-item-border-bottom: 1px solid #e6e6e6;

  --2012-va-thumb-width: 120px;
  --2012-va-thumb-height: 90px;
  --2012-va-thumb-radius: 3px;
  --2012-va-thumb-bg: #dddddd;

  --2012-va-title-font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  --2012-va-title-font-size: 14px;
  --2012-va-title-font-weight: bold;
  --2012-va-title-color: #222222;

  --2012-va-meta-font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  --2012-va-meta-font-size: 12px;
  --2012-va-meta-color: #666666;

  --2012-va-item-hover-bg: #f5f5f5;

  /* MORE VIDEOS BUTTON */
  --2012-more-videos-bg: #e6e6e6;
  --2012-more-videos-bg-hover: #dcdcdc;
  --2012-more-videos-border: 1px solid #cccccc;
  --2012-more-videos-radius: 4px;
  --2012-more-videos-font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  --2012-more-videos-font-size: 14px;
  --2012-more-videos-font-weight: bold;
  --2012-more-videos-color: #333333;

  /* FOOTER */
  --2012-footer-bg: #f2f2f2;
  --2012-footer-text-color: #666666;
  --2012-footer-border-top: 1px solid #dcdcdc;
  --2012-footer-padding: 20px 0;
  
 /* TAB BAR */
--2012-tabbar-bg: #f2f2f2;
--2012-tabbar-border-bottom: 1px solid #dcdcdc;
--2012-tabbar-height: 36px;

--2012-tab-font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
--2012-tab-font-size: 13px;
--2012-tab-font-weight: bold;
--2012-tab-color: #555555;
--2012-tab-color-active: #222222;

--2012-tab-padding: 0 16px;
--2012-tab-border-right: 1px solid #e0e0e0;

--2012-tab-active-bg: #ffffff;
--2012-tab-active-border: 1px solid #cccccc;
--2012-tab-active-border-bottom: none;

}

/* ============================================================
   3.2 — 2012 VARIABLE MAPPING (FULL)
   ============================================================ */

body.jtv2012,
body.jtv2012-dark {

  /* MAIN WRAPPER */
  --main-wrapper-display: var(--2012-main-wrapper-display);
  --main-wrapper-width: var(--2012-main-wrapper-width);
  --main-wrapper-max-width: var(--2012-main-wrapper-max-width);
  --main-wrapper-margin: var(--2012-main-wrapper-margin);
  --main-wrapper-overflow: var(--2012-main-wrapper-overflow);

  /* CONTENT CONTAINER */
  --content-container-background: var(--2012-content-bg);
  --content-container-border: var(--2012-content-border);
  --content-container-border-radius: var(--2012-content-radius);
  --content-container-padding: var(--2012-content-padding);
  --content-container-margin-top: var(--2012-content-margin-top);
  --content-container-margin-bottom: var(--2012-content-margin-bottom);
  --content-container-margin-left: var(--2012-content-margin-left);
  --content-container-margin-right: var(--2012-content-margin-right);
  --content-container-box-shadow: var(--2012-content-shadow);
  --content-container-position: var(--2012-content-position);
  --content-container-z-index: var(--2012-content-z);
  --content-container-display: var(--2012-content-display);

  /* FLEX COLUMNS */
  --columns-display: var(--2012-columns-display);
  --columns-gap: var(--2012-columns-gap);

  --left-column-flex: var(--2012-left-column-flex);
  --right-column-flex: var(--2012-right-column-flex);

  /* NAVBAR */
  --navbar-bg: var(--2012-navbar-bg);
  --navbar-text-color: var(--2012-navbar-text-color);
  --navbar-font-family: var(--2012-navbar-font-family);
  --navbar-height: var(--2012-navbar-height);
  --navbar-padding: var(--2012-navbar-padding);
  --navbar-border-bottom: var(--2012-navbar-border-bottom);
  --navbar-shadow: var(--2012-navbar-shadow);

  /* NAV SEARCH */
  --nav-search-bg: var(--2012-nav-search-bg);
  --nav-search-border: var(--2012-nav-search-border);
  --nav-search-radius: var(--2012-nav-search-radius);
  --nav-search-padding: var(--2012-nav-search-padding);

  --nav-search-button-bg: var(--2012-nav-search-button-bg);
  --nav-search-button-bg-hover: var(--2012-nav-search-button-bg-hover);
  --nav-search-button-color: var(--2012-nav-search-button-color);
  --nav-search-button-radius: var(--2012-nav-search-button-radius);

  /* NAV TEXT */
  --nav-font-size: var(--2012-nav-font-size);
  --nav-font-weight: var(--2012-nav-font-weight);
  --nav-link-hover-color: var(--2012-nav-link-hover-color);

  /* FOOTER */
  --footer-z: var(--2012-footer-z);

  /* FACEBOOK */
  --facebook-bg: var(--2012-facebook-bg);
  --facebook-border: var(--2012-facebook-border);
  --facebook-radius: var(--2012-facebook-radius);
  --facebook-padding: var(--2012-facebook-padding);
  --facebook-gap: var(--2012-facebook-gap);

  --facebook-font-family: var(--2012-facebook-font-family);
  --facebook-font-size: var(--2012-facebook-font-size);
  --facebook-font-color: var(--2012-facebook-font-color);

  --facebook-switch-bg: var(--2012-facebook-switch-bg);
  --facebook-switch-radius: var(--2012-facebook-switch-radius);
  --facebook-switch-handle-bg: var(--2012-facebook-switch-handle-bg);
  --facebook-switch-handle-size: var(--2012-facebook-switch-handle-size);
  
  /* TABS */
 --tabbar-bg: var(--2012-tabbar-bg);
--tabbar-border-bottom: var(--2012-tabbar-border-bottom);
--tabbar-height: var(--2012-tabbar-height);

--tab-font-family: var(--2012-tab-font-family);
--tab-font-size: var(--2012-tab-font-size);
--tab-font-weight: var(--2012-tab-font-weight);
--tab-color: var(--2012-tab-color);
--tab-color-active: var(--2012-tab-color-active);

--tab-padding: var(--2012-tab-padding);
--tab-border-right: var(--2012-tab-border-right);

--tab-active-bg: var(--2012-tab-active-bg);
--tab-active-border: var(--2012-tab-active-border);
--tab-active-border-bottom: var(--2012-tab-active-border-bottom);

}

/* ============================================================
   3.3 2012 BASE LAYOUT (FLEX-BASED, CLEANED)
   ============================================================ */

/* MAIN PAGE WRAPPER */
body.jtv2012 #main.page_wrapper,
body.jtv2012-dark #main.page_wrapper {
  display: var(--main-wrapper-display);
  width: var(--main-wrapper-width);
  max-width: var(--main-wrapper-max-width);
  margin: var(--main-wrapper-margin);
  overflow: var(--main-wrapper-overflow);
}

/* CONTENT CONTAINER */
body.jtv2012 #content_container,
body.jtv2012-dark #content_container {
  background: var(--content-container-background);
  border: var(--content-container-border);
  border-radius: var(--content-container-border-radius);
  padding: var(--content-container-padding);
  box-shadow: var(--content-container-box-shadow);
}

/* FLEX COLUMNS (2012 LAYOUT — FIXED) */
body.jtv2012 #content_container,
body.jtv2012-dark #content_container {
  display: var(--columns-display);
  gap: var(--columns-gap);
  flex-direction: row;
  
}

body.jtv2012 #left_column,
body.jtv2012-dark #left_column {
  flex: var(--left-column-flex);
}

body.jtv2012 #right_column,
body.jtv2012-dark #right_column {
  flex: var(--right-column-flex);
}

/* LEFT COLUMN (FLEX 2) */
body.jtv2012 #left_column,
body.jtv2012-dark #left_column {
  flex: var(--left-column-flex);
}

/* RIGHT COLUMN (FLEX 1) */
body.jtv2012 #right_column,
body.jtv2012-dark #right_column {
  flex: var(--right-column-flex);
}


/* ============================================================
   3.4 2012 NAVBAR (FLEXBOX, CLEANED)
   ============================================================ */

/* 2012: hard reset navbar to a clean full-width strip */
body.jtv2012 #top_navbar,
body.jtv2012-dark #top_navbar {
  display: block;
  position: relative;
  width: 100%;
  margin: 0;
  padding: var(--2012-navbar-padding);                 /* key: no internal padding here */
  background: var(--navbar-bg);
  border-bottom: var(--navbar-border-bottom);
  box-shadow: var(--navbar-shadow);
  box-sizing: border-box;
}

/* 2012: all spacing lives in the inner wrapper */
body.jtv2012 #top_navbar .wrapper,
body.jtv2012-dark #top_navbar .wrapper {
  display: flex;
  align-items: center;
  flex-direction: row;
  justify-content: space-between;
  width: 1000px;              /* your site width */
  margin: 0 auto;
  padding: var(--navbar-padding);
  background: transparent;
}


/* LEFT SIDE: LOGO + NAV LINKS */
body.jtv2012 #nav_left,
body.jtv2012-dark #nav_left {
  display: flex;
  align-items: center;
  gap: 20px;
}

/* NAV LINKS */
body.jtv2012 #top_navbar a,
body.jtv2012-dark #top_navbar a {
  font-family: var(--navbar-font-family);
  font-size: var(--nav-font-size);
  font-weight: var(--nav-font-weight);
  color: var(--nav-link-color);
  text-decoration: none;
}

body.jtv2012 #top_navbar a:hover,
body.jtv2012-dark #top_navbar a:hover {
  color: var(--nav-link-hover-color);
}

/* RIGHT SIDE: SEARCH BAR */
body.jtv2012 #nav_right,
body.jtv2012-dark #nav_right {
  display: flex;
  align-items: center;
  gap: 10px;
}

/* SEARCH INPUT */
body.jtv2012 #search_input,
body.jtv2012-dark #search_input {
  background: var(--nav-search-bg);
  border: var(--nav-search-border);
  border-radius: var(--nav-search-radius);
  padding: var(--nav-search-padding);
  font-family: var(--navbar-font-family);
  font-size: var(--nav-font-size);
  color: #333333;
}

/* SEARCH BUTTON */
body.jtv2012 #search_button,
body.jtv2012-dark #search_button {
  background: var(--nav-search-button-bg);
  color: var(--nav-search-button-color);
  border: var(--nav-search-border);
  border-left: none;
  border-radius: var(--nav-search-button-radius);
  padding: 6px 12px;
  cursor: pointer;
}

body.jtv2012 #search_button:hover,
body.jtv2012-dark #search_button:hover {
  background: var(--nav-search-button-bg-hover);
}

/* 2012 NAV DOTS (active indicator) */
body.jtv2012 .nav-dot,
body.jtv2012-dark .nav-dot {
  width: 6px;
  height: 6px;
  background: var(--nav-link-color);
  border-radius: 50%;
  margin-left: 4px;
}

/* HIDE 2011 ELEMENTS */
body.jtv2012 #nav_signup,
body.jtv2012 #nav_login,
body.jtv2012 #browse_games,
body.jtv2012-dark #nav_signup,
body.jtv2012-dark #nav_login,
body.jtv2012-dark #browse_games {
  display: none !important;
}

/* 2012 themes: hide 2011 navbar elements */
body.jtv2012 .nav-2011,
body.jtv2012-dark .nav-2011 {
  display: none;
}

/* 2012 themes: show 2012 navbar elements */
body.jtv2012 .nav-2012,
body.jtv2012-dark .nav-2012 {
  display: flex;
}

/* 2012 navbar items should not wrap */
body.jtv2012 #top_navbar .wrapper,
body.jtv2012-dark #top_navbar .wrapper {
  flex-wrap: nowrap;
}

/* FACEBOOK SHARE BOX (2012) */
body.jtv2012 #channel_info_facebook,
body.jtv2012-dark #channel_info_facebook {
  background: var(--facebook-bg);
  border: var(--facebook-border);
  border-radius: var(--facebook-radius);
  padding: var(--facebook-padding);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--facebook-gap);
  margin-top: 12px;
  font-family: var(--facebook-font-family);
  font-size: var(--facebook-font-size);
  color: var(--facebook-font-color);
}

body.jtv2012 #channel_info_facebook .fb-switch,
body.jtv2012-dark #channel_info_facebook .fb-switch {
  background: var(--facebook-switch-bg);
  border-radius: var(--facebook-switch-radius);
  width: 40px;
  height: 20px;
  position: relative;
}

body.jtv2012 #channel_info_facebook .switch-handle,
body.jtv2012-dark #channel_info_facebook .switch-handle {
  background: var(--facebook-switch-handle-bg);
  width: var(--facebook-switch-handle-size);
  height: var(--facebook-switch-handle-size);
  border-radius: 50%;
  position: absolute;
  top: 3px;
  left: 3px;
}

/* TAB BAR WRAPPER */
body.jtv2012 #channel_tabs .tabs,
body.jtv2012-dark #channel_tabs .tabs {
  display: flex;
  align-items: center;
  height: var(--tabbar-height);
  background: var(--tabbar-bg);
  border-bottom: var(--tabbar-border-bottom);
  margin: 20px 0 0 0;
  padding: 0;
  list-style: none;
}

/* INDIVIDUAL TABS */
body.jtv2012 #channel_tabs .tabs li,
body.jtv2012-dark #channel_tabs .tabs li {
  padding: var(--tab-padding);
  font-family: var(--tab-font-family);
  font-size: var(--tab-font-size);
  font-weight: var(--tab-font-weight);
  color: var(--tab-color);
  border-right: var(--tab-border-right);
  cursor: pointer;
  display: flex;
  align-items: center;
  height: 100%;
}

/* ACTIVE TAB */
body.jtv2012 #channel_tabs .tabs li.active,
body.jtv2012-dark #channel_tabs .tabs li.active {
  background: var(--tab-active-bg);
  border: var(--tab-active-border);
  border-bottom: var(--tab-active-border-bottom);
  color: var(--tab-color-active);
}

#channel_tabs .tab_content {
  display: none;
}

#channel_tabs .tab_content.active {
  display: block;
}

body.jtv2012 #channel_info_box,
body.jtv2012-dark #channel_info_box {
  background: #ffffff;
  border: 1px solid #dcdcdc;
  border-radius: 4px;
  padding: 16px;
  box-shadow: 0 0 6px rgba(0,0,0,0.1);
  margin-bottom: -13px;
}

body.jtv2012 #channel_info_top,
body.jtv2012-dark #channel_info_top {
  display: block;
}

body.jtv2012 #channel_info_facebook,
body.jtv2012-dark #channel_info_facebook {
  background: #f5f5f5;
  border: 1px solid #dcdcdc;
  border-radius: 4px;
  padding: 12px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

/* FACEBOOK CONNECT PILL (2012) */
body.jtv2012 .fb-connect,
body.jtv2012-dark .fb-connect {
  display: inline-flex;
  align-items: center;
  border-radius: 3px; /* barely rounded */
  overflow: hidden;   /* forces the two halves to appear as one pill */
  border: 1px solid #b8b8b8;
  cursor: pointer;
  padding: 0; /* important: padding belongs to the inner spans */
}

/* LEFT SIDE: "F" */
body.jtv2012 .fb-connect .fb-icon,
body.jtv2012-dark .fb-connect .fb-icon {
  background: #6a4fbf; /* purple */
  color: #e6e6e6;       /* light gray text */
  padding: 6px 10px;
  font-weight: bold;
  font-size: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* RIGHT SIDE: "Connect to Share" */
body.jtv2012 .fb-connect .fb-text,
body.jtv2012-dark .fb-connect .fb-text {
  background: #e6e6e6; /* light gray */
  color: #6a4fbf;       /* purple text */
  padding: 6px 12px;
  font-size: 13px;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  display: flex;
  align-items: center;
}

.fb-right {
  display: flex;
  align-items: center;
  gap: 8px; /* space between label, ?, and switch */
}

/* SWITCH CONTAINER */
.fb-switch {
  position: relative;
  width: 60px;
  height: 24px;
  background: #d0d0d0;
  border: 1px solid #b5b5b5;
  border-radius: 2px; /* barely rounded */
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 4px;
  cursor: pointer;
  user-select: none;
  overflow: hidden;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}

/* SWITCH HANDLE */
.fb-switch .switch-handle {
  position: absolute;
  top: 2px;
  left: 2px; /* OFF position */
  width: 20px;
  height: 20px;
  background: #ffffff;
  border: 1px solid #b5b5b5;
  border-radius: 2px;
  transition: left 0.2s ease;
}

/* LABELS */
.fb-switch .switch-label {
  font-size: 11px;
  font-weight: bold;
  pointer-events: none;
}

.fb-switch .switch-label.off {
  color: #666;
  margin-left: auto;
}

.fb-switch .switch-label.on {
  color: #6a4fbf; /* purple */
  margin-right: auto;
  opacity: 0; /* hidden when OFF */
  transition: opacity 0.2s ease;
}

/* WHEN SWITCH IS ACTIVE (ON) */
.fb-switch.active {
  background: #cfc2f5; /* light purple tint */
  border-color: #a58ad9;
}

.fb-switch.active .switch-handle {
  left: 38px; /* slides to the right */
}

.fb-switch.active .switch-label.on {
  opacity: 1;
}

.fb-switch.active .switch-label.off {
  opacity: 0;
}

/* ============================================================
   3.5 2012 COMPONENTS (CLEANED)
   ============================================================ */

/* CHANNEL TITLE */
body.jtv2012 #channel_title,
body.jtv2012-dark #channel_title {
  font-family: var(--channel-title-font-family);
  font-size: var(--channel-title-font-size);
  font-weight: var(--channel-title-font-weight);
  color: var(--channel-title-color);
  margin: var(--channel-title-margin);
}

/* CHANNEL INFO (2012 uses flexbox) */
body.jtv2012 #channel_info_left,
body.jtv2012-dark #channel_info_left,
body.jtv2012 #channel_info_right,
body.jtv2012-dark #channel_info_right {
  display: var(--2012-channel-info-display);
  gap: var(--2012-channel-info-gap);
  font-family: var(--2012-channel-info-font-family);
  font-size: var(--2012-channel-info-font-size);
  color: var(--2012-channel-info-color);
}

body.jtv2012 #channel_description,
body.jtv2012-dark #channel_description {
  font-family: var(--2012-description-font-family);
  font-size: var(--2012-description-font-size);
  color: var(--2012-description-color);
  line-height: var(--2012-description-line-height);
  margin: 8px 0 12px 0;
}


body.jtv2012 .btn-2012,
body.jtv2012-dark .btn-2012 {
  background: var(--2012-button-bg);
  color: var(--2012-button-text-color);
  padding: var(--2012-button-padding);
  border-radius: var(--2012-button-radius);
  border: 1px solid #cccccc;
  font-family: var(--2012-channel-info-font-family);
  font-size: var(--2012-channel-info-font-size);
  cursor: pointer;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

body.jtv2012 .btn-2012:hover,
body.jtv2012-dark .btn-2012:hover {
  background: var(--2012-button-bg-hover);
}

/* SUGGESTED CHANNELS */
body.jtv2012 #suggested_channels,
body.jtv2012-dark #suggested_channels {
  margin-top: 20px;
}

body.jtv2012 #suggested_channels .sc_title_header,
body.jtv2012-dark #suggested_channels .sc_title_header {
  font-family: var(--2012-sc-title-font-family);
  font-size: var(--2012-sc-title-font-size);
  font-weight: var(--2012-sc-title-font-weight);
  color: var(--2012-sc-title-color);
  margin-bottom: 10px;
}

body.jtv2012 #suggested_channels .sc_item,
body.jtv2012-dark #suggested_channels .sc_item {
  display: var(--2012-sc-item-display);
  gap: var(--2012-sc-item-gap);
  padding: var(--2012-sc-item-padding);
  align-items: center;
}

body.jtv2012 #suggested_channels .sc_thumb,
body.jtv2012-dark #suggested_channels .sc_thumb {
  width: var(--2012-sc-thumb-width);
  height: var(--2012-sc-thumb-height);
  background: var(--2012-sc-thumb-bg);
  border-radius: var(--2012-sc-thumb-radius);
}

body.jtv2012 #suggested_channels .sc_info,
body.jtv2012-dark #suggested_channels .sc_info {
  font-family: var(--2012-sc-info-font-family);
  font-size: var(--2012-sc-info-font-size);
  color: var(--2012-sc-info-color);
  line-height: 1.3;
}

body.jtv2012 #suggested_channels .sc_view_and_count,
body.jtv2012-dark #suggested_channels .sc_view_and_count {
  font-size: var(--2012-sc-meta-font-size);
  color: var(--2012-sc-meta-color);
}

/* VIDEO ARCHIVE ITEMS */
body.jtv2012 .video_item,
body.jtv2012-dark .video_item {
  display: var(--2012-va-item-display);
  gap: var(--2012-va-item-gap);
  padding: var(--2012-va-item-padding);
  border-bottom: var(--2012-va-item-border-bottom);
  align-items: flex-start;
}

body.jtv2012 .video_item:hover,
body.jtv2012-dark .video_item:hover {
  background: var(--2012-va-item-hover-bg);
}

body.jtv2012 .video_item .thumb_placeholder,
body.jtv2012-dark .video_item .thumb_placeholder {
  width: var(--2012-va-thumb-width);
  height: var(--2012-va-thumb-height);
  background: var(--2012-va-thumb-bg);
  border-radius: var(--2012-va-thumb-radius);
  flex-shrink: 0;
}

body.jtv2012 .video_item .video_info,
body.jtv2012-dark .video_item .video_info {
  flex: 1;
}

body.jtv2012 .video_item .video_title,
body.jtv2012-dark .video_item .video_title {
  font-family: var(--2012-va-title-font-family);
  font-size: var(--2012-va-title-font-size);
  font-weight: var(--2012-va-title-font-weight);
  color: var(--2012-va-title-color);
  margin-bottom: 4px;
}

body.jtv2012 .video_item .video_meta,
body.jtv2012-dark .video_item .video_meta {
  font-family: var(--2012-va-meta-font-family);
  font-size: var(--2012-va-meta-font-size);
  color: var(--2012-va-meta-color);
  line-height: 1.3;
}

/* MORE VIDEOS BUTTON */
body.jtv2012 #more_videos,
body.jtv2012-dark #more_videos {
  display: block;
  width: 100%;
  padding: 12px 0;
  margin-top: 20px;
  background: var(--2012-more-videos-bg);
  border: var(--2012-more-videos-border);
  border-radius: var(--2012-more-videos-radius);
  font-family: var(--2012-more-videos-font-family);
  font-size: var(--2012-more-videos-font-size);
  font-weight: var(--2012-more-videos-font-weight);
  color: var(--2012-more-videos-color);
  text-align: center;
  cursor: pointer;
}

body.jtv2012 #more_videos:hover,
body.jtv2012-dark #more_videos:hover {
  background: var(--2012-more-videos-bg-hover);
}

/* ============================================================
   3.6 2012 DARK MODE OVERRIDES (CLEANED)
   ============================================================ */

body.jtv2012-dark {

  /* NAVBAR */
  --2012-navbar-bg: #1a1a1a;
  --2012-navbar-text-color: #e6e6e6;
  --2012-navbar-border-bottom: 1px solid #333333;
  --2012-navbar-shadow: 0 2px 4px rgba(0,0,0,0.4);

  /* CONTENT CONTAINER */
  --2012-content-bg: #1e1e1e;
  --2012-content-border: 1px solid #333333;
  --2012-content-shadow: 0 0 6px rgba(0,0,0,0.5);

  /* CHANNEL TITLE */
  --2012-channel-title-color: #ffffff;

  /* CHANNEL INFO */
  --2012-channel-info-color: #cccccc;

  /* DESCRIPTION */
  --2012-description-color: #bbbbbb;

  /* BUTTONS */
  --2012-button-bg: #333333;
  --2012-button-bg-hover: #444444;
  --2012-button-text-color: #e6e6e6;

  /* SUGGESTED CHANNELS */
  --2012-sc-thumb-bg: #2a2a2a;
  --2012-sc-info-color: #cccccc;
  --2012-sc-meta-color: #999999;

  /* VIDEO ARCHIVE */
  --2012-va-thumb-bg: #2a2a2a;
  --2012-va-title-color: #ffffff;
  --2012-va-meta-color: #aaaaaa;
  --2012-va-item-border-bottom: 1px solid #333333;
  --2012-va-item-hover-bg: #2a2a2a;

  /* MORE VIDEOS BUTTON */
  --2012-more-videos-bg: #333333;
  --2012-more-videos-bg-hover: #444444;
  --2012-more-videos-border: 1px solid #555555;
  --2012-more-videos-color: #e6e6e6;

  /* FOOTER */
  --2012-footer-bg: #1a1a1a;
  --2012-footer-text-color: #cccccc;
  --2012-footer-border-top: 1px solid #333333;
}

/* ============================================================
   3.7 2012 FOOTER (CLEANED)
   ============================================================ */

#footer_2012 {
  width: 100%;
  background: var(--footer-bg);
  border-top: var(--footer-border-top);
  padding: var(--footer-padding);
  color: var(--footer-text-color);
  font-family: "Inter", "Helvetica Neue", Helvetica, Arial, sans-serif;
}

#footer_2012_inner {
  width: 1000px;
  margin: 0 auto;

  display: flex;
  justify-content: space-between;
  align-items: center;
}

#footer_2012_left,
#footer_2012_right {
  display: flex;
  align-items: center;
  gap: 12px;
}

/* FOOTER LINKS */
#footer_2012 a {
  color: var(--footer-text-color);
  text-decoration: none;
  font-size: 12px;
}

#footer_2012 a:hover {
  color: #000000;
}

/* LOGO / ICONS */
#footer_2012_logo {
  height: 18px;
  width: auto;
  opacity: 0.85;
}

/* ============================================================
   3.x — 2012 VIDEO PLAYER PLACEHOLDER
   ============================================================ */

body.jtv2012 #player_placeholder,
body.jtv2012-dark #player_placeholder {
  width: 100%;
  height: 480px;
  background: #f2f2f2;
  border: 1px solid #d0d0d0;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #666;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  margin-bottom: 20px;
}

/* ============================================================
   3.x — 2012 CHAT ROOM
   ============================================================ */

body.jtv2012 #chat_section,
body.jtv2012-dark #chat_section {
  background: #ffffff;
  border: 1px solid #dcdcdc;
  border-radius: 4px;
  padding: 12px;
  color: #333;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}

/* CHAT BOX */
body.jtv2012 #chat_box,
body.jtv2012-dark #chat_box {
  background: #fafafa;
  border: 1px solid #dcdcdc;
  border-radius: 4px;
  padding: 10px;
}

/* CHAT LINES */
body.jtv2012 #chat_lines,
body.jtv2012-dark #chat_lines {
  height: 350px;
  overflow-y: auto;
  margin-bottom: 12px;
}

body.jtv2012 .chat_line,
body.jtv2012-dark .chat_line {
  padding: 4px 0;
  border-bottom: 1px solid rgba(0,0,0,0.05);
  font-size: 13px;
  color: #444;
}

/* CHAT INPUT ROW */
body.jtv2012 #chat_input_row,
body.jtv2012-dark #chat_input_row {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* ============================================================
   2012 CHAT INPUT PILL
   ============================================================ */

body.jtv2012 #chat_input_combo,
body.jtv2012-dark #chat_input_combo {
  display: flex;
  align-items: center;
  background: #fff;
  border: 1px solid #ccc;
  border-radius: 9999px;
  overflow: hidden;
  height: 32px;
}

/* INPUT INSIDE PILL */
body.jtv2012 #chat_input,
body.jtv2012-dark #chat_input {
  flex: 1;
  min-width: 0;
  border: none;
  padding: 6px 10px;
  font-size: 14px;
  background: transparent;
  color: #333;
  outline: none;
}

/* SEND BUTTON INSIDE PILL */
body.jtv2012 #chat_send_button,
body.jtv2012-dark #chat_send_button {
  flex-shrink: 0;
  background: #e6e6e6;
  color: #333;
  border: none;
  padding: 6px 14px;
  font-size: 14px;
  cursor: pointer;
  border-left: 1px solid #ccc;
  height: 100%;
}

body.jtv2012 #chat_send_button:hover,
body.jtv2012-dark #chat_send_button:hover {
  background: #dcdcdc;
}

/* ============================================================
   2012 ICON BUTTONS (VIEWERS + SETTINGS)
   ============================================================ */

body.jtv2012 #chat_viewers_button,
body.jtv2012-dark #chat_viewers_button,
body.jtv2012 #chat_settings_button,
body.jtv2012-dark #chat_settings_button {
  height: 32px;
  width: 32px;
  border-radius: 6px;
  background: #e6e6e6;
  color: #333;
  border: 1px solid #ccc;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

body.jtv2012 #chat_viewers_button:hover,
body.jtv2012-dark #chat_viewers_button:hover,
body.jtv2012 #chat_settings_button:hover,
body.jtv2012-dark #chat_settings_button:hover {
  background: #dcdcdc;
}

/* ============================================================
===================== THEME SAFETY LAYER ===============
============================================================ */

/* ============================================================
   4.0 THEME SAFETY LAYER (CLEANED + FINAL)
   ============================================================ */

/* ------------------------------------------------------------
   4.1 — DISABLE ALL THEME STYLES UNLESS A THEME IS ACTIVE
   ------------------------------------------------------------ */

body:not(.jtv2011):not(.jtv2011-dark):not(.jtv2012):not(.jtv2012-dark) #top_navbar,
body:not(.jtv2011):not(.jtv2011-dark):not(.jtv2012):not(.jtv2012-dark) #site_header,
body:not(.jtv2011):not(.jtv2011-dark):not(.jtv2012):not(.jtv2012-dark) #content_container,
body:not(.jtv2011):not(.jtv2011-dark):not(.jtv2012):not(.jtv2012-dark) #columns,
body:not(.jtv2011):not(.jtv2011-dark):not(.jtv2012):not(.jtv2012-dark) #left_column,
body:not(.jtv2011):not(.jtv2011-dark):not(.jtv2012):not(.jtv2012-dark) #right_column {
  all: unset !important;
  display: none !important;
}

/* ------------------------------------------------------------
   4.2 — PREVENT 2011 RULES FROM APPLYING TO 2012
   ------------------------------------------------------------ */

body.jtv2012 #site_header.jtv2011,
body.jtv2012 #top_navbar.jtv2011,
body.jtv2012 #content_container.jtv2011,
body.jtv2012 #columns.jtv2011,
body.jtv2012 #left_column.jtv2011,
body.jtv2012 #right_column.jtv2011 {
  display: none !important;
}

/* ------------------------------------------------------------
   4.3 — PREVENT 2012 RULES FROM APPLYING TO 2011
   ------------------------------------------------------------ */

body.jtv2011 #site_header.jtv2012,
body.jtv2011 #top_navbar.jtv2012,
body.jtv2011 #content_container.jtv2012,
body.jtv2011 #columns.jtv2012,
body.jtv2011 #left_column.jtv2012,
body.jtv2011 #right_column.jtv2012 {
  display: none !important;
}

/* ------------------------------------------------------------
   4.4 — NEUTRALIZE ANY UNTHEMED GLOBAL NAVBAR RULES
   ------------------------------------------------------------ */

#top_navbar:not(body.jtv2011 #top_navbar):not(body.jtv2011-dark #top_navbar):not(body.jtv2012 #top_navbar):not(body.jtv2012-dark #top_navbar) {
  all: unset !important;
  display: none !important;
}

/* ------------------------------------------------------------
   4.5 — NEUTRALIZE ANY UNTHEMED GLOBAL LAYOUT RULES
   ------------------------------------------------------------ */

#content_container:not(body.jtv2011 #content_container):not(body.jtv2011-dark #content_container):not(body.jtv2012 #content_container):not(body.jtv2012-dark #content_container) {
  all: unset !important;
  display: none !important;
}

/* ------------------------------------------------------------
   4.6 — PREVENT ANY FUTURE CSS FROM OVERRIDING THEME RULES
   ------------------------------------------------------------ */

body.jtv2011 *,
body.jtv2011-dark *,
body.jtv2012 *,
body.jtv2012-dark * {
  isolation: isolate;
}

/* ============================================================
   4.7 THEME RESET + FUTURE-PROOFING BLOCK
   ============================================================ */

/* ------------------------------------------------------------
   4.7.1 — Prevent new HTML elements from inheriting theme rules
   ------------------------------------------------------------ */

body.jtv2011 *:not(#top_navbar):not(#site_header):not(#content_container):not(#columns):not(#left_column):not(#right_column) {
  /* Only apply theme styles if explicitly targeted */
  box-sizing: border-box;
}

body.jtv2012 *:not(#top_navbar):not(#site_header):not(#content_container):not(#columns):not(#left_column):not(#right_column) {
  box-sizing: border-box;
}

/* ------------------------------------------------------------
   4.7.2 — Normalize spacing for any future elements
   ------------------------------------------------------------ */

body.jtv2011 * {
  margin-block-start: 0;
  margin-block-end: 0;
  padding-block-start: 0;
  padding-block-end: 0;
}

body.jtv2012 * {
  margin-block-start: 0;
  margin-block-end: 0;
  padding-block-start: 0;
  padding-block-end: 0;
}

/* ------------------------------------------------------------
   4.7.3 — Prevent browser defaults from overriding theme tokens
   ------------------------------------------------------------ */

body.jtv2011,
body.jtv2011-dark,
body.jtv2012,
body.jtv2012-dark {
  font-family: var(--navbar-font-family), sans-serif;
  line-height: 1.4;
  color: inherit;
}

/* ------------------------------------------------------------
   4.7.4 — Ensure theme variables always resolve correctly
   ------------------------------------------------------------ */

body.jtv2011,
body.jtv2011-dark {
  --theme-active: "2011";
}

body.jtv2012,
body.jtv2012-dark {
  --theme-active: "2012";
}

/* ------------------------------------------------------------
   4.7.5 — Prevent accidental scrollbars from unthemed elements
   ------------------------------------------------------------ */

body.jtv2011 *,
body.jtv2011-dark *,
body.jtv2012 *,
body.jtv2012-dark * {
  scrollbar-width: thin;
  scrollbar-color: #666 #222;
}