:root {  
  --accent: #FA541C;  
  --accent-dark: #d94010;  
  --bg-dark: #f5f7fa;  
  --bg-card: #ffffff;  
  --text-main: #1e1e2f;  
  --text-muted: #62627a;  
  --border-color: #e2e8f0;  
  --line: #e9edf3;  
  --font-ui: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;  
  --font-code: "Cascadia Code", "Fira Code", "Consolas", monospace;  
  
  --header-height: 94px;  
  --sidebar-width: 260px;  
  --rightpanel-width: 340px;  
}  
  
*,  
*::before,  
*::after {  
  box-sizing: border-box;  
}  
  
html,  
body {  
  margin: 0;  
  width: 100%;  
  min-height: 100%;  
  background: var(--bg-dark);  
  color: var(--text-main);  
  font-family: var(--font-ui);  
  line-height: 1.6;  
  overflow-x: hidden;  
  -webkit-font-smoothing: antialiased;  
}  
  
body {  
  position: relative;  
}  
  
a {  
  color: inherit;  
  text-decoration: none;  
}  
  
img,  
svg,  
video,  
canvas {  
  display: block;  
  max-width: 100%;  
}  
  
button,  
input,  
textarea,  
select {  
  font: inherit;  
}  
  
#header-wrapper {  
  position: fixed;  
  inset: 0 0 auto 0;  
  width: 100%;  
  height: var(--header-height);  
  z-index: 1000;  
}  
  
#footer-wrapper {  
  width: 100%;  
}  
  
.workspace-layout {  
  display: flex;  
  flex-direction: row;  
  align-items: stretch;  
  width: 100%;  
  margin-top: var(--header-height);  
  min-height: calc(100vh - var(--header-height));  
  background: var(--bg-dark);  
}  
  
#sidebar-wrapper.hidden,  
#rightpanel-wrapper.hidden {  
  display: none !important;  
}  
  
#sidebar-wrapper,  
#body-content,  
#rightpanel-wrapper {  
  min-height: 0;  
}  
  
#sidebar-wrapper {  
  flex: 0 0 var(--sidebar-width);  
  width: var(--sidebar-width);  
  min-width: var(--sidebar-width);  
  background: #fff;  
  border-right: 1px solid var(--line);  
  overflow: hidden;  
}  
  
#body-content {  
  flex: 1 1 auto;  
  min-width: 0;  
  background: #fff;  
  overflow-x: hidden;  
}  
  
#rightpanel-wrapper {  
  flex: 0 0 var(--rightpanel-width);  
  width: var(--rightpanel-width);  
  min-width: var(--rightpanel-width);  
  background: #f8fafc;  
  border-left: 1px solid var(--line);  
  overflow: hidden;  
}  
  
@media (min-width: 1200px) {  
  .workspace-layout {  
    min-height: calc(100vh - var(--header-height));  
  }  
  
  #sidebar-wrapper,  
  #rightpanel-wrapper {  
    position: sticky;
    top: var(--header-height);
    height: calc(100vh - var(--header-height));  
    overflow-y: auto;
  }  
  
  #body-content {  
    min-height: 100%;  
    overflow-x: hidden;  
  }  
}  
  
@media (max-width: 1199.98px) {  
  html,  
  body {  
    height: auto;  
    overflow-y: auto;  
  }  
  
  #header-wrapper {  
    position: sticky;  
    top: 0;  
    height: auto;  
  }  
  
  .workspace-layout {  
    flex-direction: column;  
    margin-top: 0;  
    min-height: auto;  
    height: auto;  
    overflow: visible;  
  }  
  
  #sidebar-wrapper,  
  #body-content,  
  #rightpanel-wrapper {  
    width: 100%;  
    min-width: 0;  
    height: auto;  
    overflow: visible;  
  }  
  
  #sidebar-wrapper {  
    order: 1;  
    border-right: 0;  
    border-bottom: 1px solid var(--line);  
  }  
  
  #body-content {  
    order: 2;  
  }  
  
  #rightpanel-wrapper {  
    order: 3;  
    border-left: 0;  
    border-top: 1px solid var(--line);  
:root {  
  --accent: #FA541C;  
  --accent-dark: #d94010;  
  --bg-dark: #f5f7fa;  
  --bg-card: #ffffff;  
  --text-main: #1e1e2f;  
  --text-muted: #62627a;  
  --border-color: #e2e8f0;  
  --line: #e9edf3;  
  --font-ui: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;  
  --font-code: "Cascadia Code", "Fira Code", "Consolas", monospace;  
  
  --header-height: 94px;  
  --sidebar-width: 260px;  
  --rightpanel-width: 340px;  
}  
  
*,  
*::before,  
*::after {  
  box-sizing: border-box;  
}  
  
html,  
body {  
  margin: 0;  
  width: 100%;  
  min-height: 100%;  
  background: var(--bg-dark);  
  color: var(--text-main);  
  font-family: var(--font-ui);  
  line-height: 1.6;  
  overflow-x: hidden;  
  -webkit-font-smoothing: antialiased;  
}  
  
body {  
  position: relative;  
}  
  
a {  
  color: inherit;  
  text-decoration: none;  
}  
  
img,  
svg,  
video,  
canvas {  
  display: block;  
  max-width: 100%;  
}  
  
button,  
input,  
textarea,  
select {  
  font: inherit;  
}  
  
#header-wrapper {  
  position: fixed;  
  inset: 0 0 auto 0;  
  width: 100%;  
  height: var(--header-height);  
  z-index: 1000;  
}  
  
#footer-wrapper {  
  width: 100%;  
}  
  
.workspace-layout {  
  display: flex;  
  flex-direction: row;  
  align-items: stretch;  
  width: 100%;  
  margin-top: var(--header-height);  
  min-height: calc(100vh - var(--header-height));  
  background: var(--bg-dark);  
}  
  
#sidebar-wrapper.hidden,  
#rightpanel-wrapper.hidden {  
  display: none !important;  
}  
  
#sidebar-wrapper,  
#body-content,  
#rightpanel-wrapper {  
  min-height: 0;  
}  
  
#sidebar-wrapper {  
  flex: 0 0 var(--sidebar-width);  
  width: var(--sidebar-width);  
  min-width: var(--sidebar-width);  
  background: #fff;  
  border-right: 1px solid var(--line);  
  overflow: hidden;  
}  
  
#body-content {  
  flex: 1 1 auto;  
  min-width: 0;  
  background: #fff;  
  overflow-x: hidden;  
}  
  
#rightpanel-wrapper {  
  flex: 0 0 var(--rightpanel-width);  
  width: var(--rightpanel-width);  
  min-width: var(--rightpanel-width);  
  background: transparent;  
  border-left: 1px solid var(--line);  
  overflow: hidden;  
}  
  
@media (min-width: 1200px) {  
  .workspace-layout {  
    min-height: calc(100vh - var(--header-height));  
  }  
  
  #sidebar-wrapper,  
  #rightpanel-wrapper {  
    position: sticky;
    top: var(--header-height);
    height: calc(100vh - var(--header-height));  
    overflow-y: auto;
  }  
  
  #body-content {  
    min-height: 100%;  
    overflow-x: hidden;  
  }  
}  
  
@media (max-width: 1199.98px) {  
  html,  
  body {  
    height: auto;  
    overflow-y: auto;  
  }  
  
  #header-wrapper {  
    position: sticky;  
    top: 0;  
    height: auto;  
  }  
  
  .workspace-layout {  
    flex-direction: column;  
    margin-top: 0;  
    min-height: auto;  
    height: auto;  
    overflow: visible;  
  }  
  
  #sidebar-wrapper,  
  #body-content,  
  #rightpanel-wrapper {  
    width: 100%;  
    min-width: 0;  
    height: auto;  
    overflow: visible;  
  }  
  
  #sidebar-wrapper {  
    order: 1;  
    border-right: 0;  
    border-bottom: 1px solid var(--line);  
  }  
  
  #body-content {  
    order: 2;  
  }  
  
  #rightpanel-wrapper {  
    order: 3;  
    border-left: 0;  
    border-top: 1px solid var(--line);  
  }  
}  
  
/* Ad Container CLS Fixes */
.ad-container { margin: 20px 0; text-align: center; overflow: visible; }

/* Horizontal Ad (Global Footer) */
#global-ad-wrapper .ad-container { min-height: auto; }
@media (max-width: 1199.98px) { #global-ad-wrapper .ad-container { min-height: auto; } }

/* Vertical Ad (Right Panel) */
#rightpanel-wrapper .ad-container { min-height: auto; margin: 10px 0; }
@media (max-width: 1199.98px) { #rightpanel-wrapper .ad-container { min-height: auto; } }

/* Square Ad (In-Content) */
.content-area > .ad-container { min-height: 250px; }
@media (max-width: 1199.98px) { .content-area > .ad-container { min-height: 100px; } }
/* Automatically collapse unfilled AdSense containers */
div.ad-container:has(ins[data-ad-status="unfilled"]) { display: none !important; min-height: 0 !important; margin: 0 !important; padding: 0 !important; height: 0 !important; }


/* Hide unfilled ads smoothly */
ins.adsbygoogle[data-ad-status="unfilled"] {
  display: none !important;
  height: 0 !important;
}
.ad-container:has(ins.adsbygoogle[data-ad-status="unfilled"]) {
  display: none !important;
}