:root {
  --bg-dark:    #111;
  --fg-dark:    #eee;
  --bg-opacity-dark: 0.2;
  --link-dark:  #00BFFF;
  --header-dark:#00BFFF;
  --navbar-dark:rgba(0,0,0,0.8);
  --container-dark:rgba(0,0,0,0.5);

  --bg-light:   #fafafa;
  --fg-light:   #111;
  --bg-opacity-light: 1;
  --link-light: #0000CD;
  --header-light:#4169E1;
  --navbar-light:rgba(128,128,128,1);
  --container-light:rgba(255,255,255,0.9);
}

body {
  margin: 2rem;
  font-family: 'Quicksand', system-ui, Arial, sans-serif;
  background: var(--bg-dark);
  color: var(--fg-dark);
  display: flex;
  flex-direction: column;
  min-height: calc(100vh - 4rem); /* account for body top/bottom margins */
}

a {
  color: var(--link-dark);
  text-decoration: none;
}

a:hover {
  color: #008B8B;
  text-decoration: underline;
}

a:visited {
  color: #DA70D6;
}

h1, h4 {
  text-align: center;
  color: var(--header-dark);
}

.divider {
  height:2px;
  background-color:gray;
  margin:10px 0;
}

.note {
  color:#B22222;
}

body.light {
  background: var(--bg-light);
  color: var(--fg-light);
}

body.light a {
  color: var(--link-light);
}

body.light a:hover {
  color: #008B8B;
  text-decoration: underline;
}

body.light a:visited {
  color: #8B008B;
}

body.light h1, body.light h4 {
  text-align: center;
  color: var(--header-light);
}

body.light .divider {
  height:2px;
  background-color:black;
  margin:10px 0;
}

body.light .note {
  color:#FF0000;
}

ul {
  list-style: square;
  list-style-position: inside;
  padding: 0;
}

li {
  margin: 0.5rem 0;
  font-size: 1.2rem;
}

.header-title {
  text-align: center;
  margin-top: 50px;
}

.navbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 2;
  background: var(--navbar-dark);
  padding: 10px 0;
  display: flex;
  justify-content: center;
  gap: 20px;
  height: 35px;
}

body.light .navbar {
  background: var(--navbar-light);
}

/* background wallpaper */
.bg-img {
  position: fixed;
  top: -5%;
  left: -10%;
  width: 120%;
  height: 120%;
  object-fit: cover;
  z-index: -1;
  pointer-events: none;
  opacity: var(--bg-opacity-dark);
}

body.light .bg-img {
  opacity: var(--bg-opacity-light);
}

.image-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
}

.example-image{
    width:98%;
    height: auto;
    align-self: center;
    align-items: center;
}

/* cute toggle switch */
.switch {
  position: fixed;
  top: 1rem;
  right: 1rem;
  z-index: 1;
  --w: 56px;
  --h: 30px;
}

.switch input {
  display: none;
}

.slider {
  width: var(--w);
  height: var(--h);
  background: #666;
  display: block;
  border-radius: var(--h);
  cursor: pointer;
  position: relative;
  font-size: 1.2rem;
  transition: background 0.2s;
}

.slider:before {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: calc(var(--h) - 4px);
  height: calc(var(--h) - 4px);
  border-radius: 50%;
  background: #fff;
  transition: 0.2s;
}

input:checked + .slider {
  background: #87CEEB;
}

input:checked + .slider:before {
  transform: translateX(26px);
}

.github-button-container{
  display:flex;
  justify-content:center;
  overflow:hidden;
  height:30px;
  /* position: fixed;
  top: 1rem;
  right: 5rem;
  z-index: 1; */
}

/* container */
.container {
    /* position: relative;  */
    z-index: 1; /* Above the background image */
    padding: 20px;
    background: var(--container-dark);
    width: 90%; /* Adjust width as needed */
    margin: auto; /* Centers the container horizontally */
    border-radius: 8px; /* Rounded corners for the container */
}

.container-left {
  display: inline-block;
  z-index: 1;
  padding-right: 1rem;
  background: var(--container-dark);
  border-radius: 8px;
}

body.light .container{
    background: var(--container-light);
}

body.light .container-left {
  background: var(--container-light);
}

/* viewer panel */
.viewBtn {
  color: #006400;
  background-color: transparent;
  border-color: transparent;
}

.viewBtn:hover {
  cursor: pointer;
}

.colorCtrl {
  display: none;
}

.btnRow{
  position:absolute;
  left:8px;
  display:flex;
  align-items:center;
  gap:6px;
  z-index:1001;
}

.infoIconReset{
  position: absolute;
  font-size:12px;
  cursor:pointer;
  user-select:none;
  top: 36px;
}

.infoIconApply{
  position: absolute;
  font-size:12px;
  cursor:pointer;
  user-select:none;
  top: 62px;
}

.tipHost{ position:relative; overflow:visible; }


.tipHost .tip{
  display:none;
  position:absolute;
  top: 110%;  /* below the ℹ️ */
  left:50%; transform:translateX(-50%);
  max-width:450px;
  padding:6px 8px;
  font-size:12px; line-height:1.3;
  background:#333; color:#fff;
  border-radius:6px; box-shadow:0 2px 4px #0008;
  white-space:normal;
  z-index:9999;
}

.globalTip{
  position:fixed;               /* detach from clipping parents */
  max-width:220px;
  padding:6px 8px;
  font-size:12px; line-height:1.3;
  background:#333; color:#fff;
  border-radius:6px;
  box-shadow:0 2px 4px #0008;
  z-index:10000;                /* above everything */
  pointer-events:none;          /* ignore the mouse */
}

#viewerWrap {
  display: none;
  position: fixed;
  z-index: 998;
  top: 50%;
  left: 55%;
  transform: translate(-50%, -50%);
  width: 25vw;
  height: 25vw;
  max-width: 75vw;
  max-height: 80vh;
  background: #222;
  border-radius: 16px;
  flex-direction: column;
  resize: both;
  overflow: hidden;
}

/* Mobile: */
@media (max-width:768px){
  body.mobile #viewerWrap{
    display: none;
    position:fixed;
    inset:auto 0 0 0;
    width:100vw; height:50vh;
    max-width: 100vw;
    max-height: 100vh;
    border-radius:16px 16px 0 0;
    resize: none;
    overflow:hidden;
  }

  body.mobile #sheetHandle{
    height:24px; background:#444; cursor:grab;
  }
  body.mobile #resizeBL{ display:none; }
}

@media (max-width:768px){
  body.mobile #viewerWrap{
    height:100vh;                     /* full screen panel */
    transform:translateY(78vh);       /* default “peek” (4%) */
  }
  body.mobile #viewerWrap.state-peek { transform:translateY(96vh); }
  body.mobile #viewerWrap.state-half { transform:translateY(50vh); }
  body.mobile #viewerWrap.state-full { transform:translateY(14vh); }
}

#viewerCanvas {
  display: block;
  width: 100%;
  height: calc(100% - 28px);
  border-radius: 0 0 16px 16px;
}

#dragBar {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0 0.6rem;
  height: 28px;
  background: #333;
  border-radius: 16px 16px 0 0;
  cursor: move;
  user-select: none;
}

#dragBar input[type="color"] {
  width: 20px;
  height: 20px;
  border: none;
  padding: 0;
  background: none;
  cursor: pointer;
}

#closeBtn {
  margin-left: auto;
  font-size: 1.3rem;
  color: #fff;
  cursor: pointer;
}

#loader {
  display: none;
  position: absolute;
  inset: 0;
  margin: auto;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: 6px solid #999;
  border-top-color: #fff;
  animation: spin 0.8s linear infinite;
}

#downloadBtn {
  position: relative;
  overflow: hidden;
  --pct: 0%;
}

#downloadBtn::after {
  content: "";
  position: absolute;
  inset: 0;
  left: 0;
  width: var(--pct);
  background: #4caf50;
  z-index: -1;
  transition: width 0.2s;
}

#downloadBtn:disabled {
  color: #000;
}

#resizeBL {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 16px;
  height: 16px;
  cursor: nesw-resize;
  z-index: 999;
}

#applyRotation {
  display: none;
  position: absolute;
  top: 60px;
  left: 20px;
  z-index: 999;
  background: #444;
  color: #fff;
  cursor: pointer;
}
#applyRotation:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

#resetView {
  display:none;
  position:absolute;
  top: 34px;
  left:20px;
  z-index: 999;
  background: #444;
  color: #fff;
  cursor: pointer;
}
#resetView:disabled {
  opacity:.5;
  cursor:not-allowed
}

#applyRotation,
#resetView {
  width: 5rem;
  font-size: 0.7rem;
  padding: 0.1rem 0.3rem;
  text-align: center;
  box-sizing: border-box;
}

#viewerContent {
  display: none;
  flex: 1;
  overflow: auto;
  padding: 8px;
  color: #eee;
  font-family: monospace;
}

#viewerContent::-webkit-scrollbar {
  width: 8px;
}

#viewerContent::-webkit-scrollbar-thumb {
  background: #555;
  border-radius: 4px;
}

#objColor,
#bgColor {
  display: none;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

/* footer */
.site-footer{
  text-align: center;
  font-size: 0.9rem;
  color: inherit;
  opacity: 0.85;
  margin: auto auto 0; /* push footer to bottom when space remains */
  padding-top: 1rem;
  border-top: 1px solid rgba(255,255,255,0.2);
  width: 90%;
  max-width: 1200px;
}
body.light .site-footer{
  border-top-color: rgba(0,0,0,0.2);
  opacity: 0.8;
}