:root{
  /* Base palette */
  --bg:#0b0c10;
  --bg-2:#0f1117;
  --text:#e8e8e8;
  --muted:#a9a9a9;
  --accent:#3aa6ff;
  --accent-2:#7acbff;

  /* Glass surfaces */
  --glass-bg: rgba(255,255,255,0.06);
  --glass-border: rgba(255,255,255,0.14);
  --glass-inner: rgba(255,255,255,0.06);
  --radius: 14px;

  /* Elevation (material-ish) */
  --elev-1: 0 6px 24px rgba(0,0,0,0.35), 0 1px 0 rgba(255,255,255,0.03) inset;
  --elev-2: 0 10px 30px rgba(0,0,0,0.45), 0 1px 0 rgba(255,255,255,0.04) inset;
}

/* Locked to dark theme: removed light/system overrides */

*{box-sizing:border-box}
/* Use dynamic viewport height so header/footer sit correctly on iOS */
html,body{ height:auto; min-height:100%; overflow-x:hidden }
@supports (height: 100dvh){ html,body{ min-height:100dvh } }
body{
  margin:0;
  font-family:'Montserrat', system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
  font-size: clamp(14px, 1.05vw + 0.2rem, 16px);
  line-height: 1.45;
  color:var(--text);
  display:flex; flex-direction:column;
  /* Liquid gradient background */
  background:
    radial-gradient(1200px 600px at 10% -10%, rgba(58,166,255,0.20), transparent 60%),
    radial-gradient(900px 500px at 90% 0%, rgba(122,203,255,0.18), transparent 60%),
    radial-gradient(700px 600px at 50% 110%, rgba(255,255,255,0.06), transparent 60%),
    linear-gradient(180deg, var(--bg), var(--bg-2));
}

.app-header{
  padding:16px 20px;
  border-bottom:1px solid var(--glass-border);
  text-align:center;
  background:var(--glass-bg);
  -webkit-backdrop-filter: blur(12px) saturate(140%);
  backdrop-filter: blur(12px) saturate(140%);
  position:relative; z-index:2;
}
.app-header h1{margin:0 0 6px 0; font-size:30px; font-family:'Poppins', system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif}
.app-header p, .app-header .tagline{margin:0; color:var(--muted); font-weight:400; font-size:16px}
/* Header links */
.header-links{ margin-top:8px; display:flex; justify-content:center; gap:10px; flex-wrap:wrap }
.about-link{
  display:inline-flex; align-items:center; gap:8px;
  padding:8px 12px; border-radius:999px;
  color:#eaf4ff; text-decoration:none;
  background:linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0.02));
  border:1px solid var(--glass-border);
  box-shadow: var(--elev-1);
  transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease;
}
.about-link:hover{ box-shadow: var(--elev-2); border-color: rgba(122,203,255,0.35); transform: translateY(-1px) }

/* External links: bold white for contrast */
a[href^="http"], a[href^="http"]:visited{ color:#fff; font-weight:600 }
/* Apply same style to mailto links and the obfuscated contact link */
a[href^="mailto:"], a[href^="mailto:"]:visited, #contactEmail a{ color:#fff; font-weight:600 }

.app-main{
  display:grid;
  grid-template-columns:320px 1fr;
  grid-template-areas: 'controls preview';
  gap:16px; padding:16px; min-height:0; flex:1; position:relative; z-index:1
}
.controls{ grid-area: controls }
.preview{ grid-area: preview }

.controls{
  background:var(--glass-bg);
  border:1px solid var(--glass-border);
  border-radius:var(--radius);
  padding:14px;
  display:flex; flex-direction:column; gap:12px;
  -webkit-backdrop-filter: blur(16px) saturate(160%);
  backdrop-filter: blur(16px) saturate(160%);
  box-shadow: var(--elev-1);
}
.controls:hover{ box-shadow: var(--elev-2); }
.controls{ transition: box-shadow .18s ease, border-color .18s ease; }
.control{display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap}
.control-row{gap:8px; justify-content:flex-start}
.control label{
  color:#ddd; font-weight:600; letter-spacing:.2px; font-size: clamp(13px, 1.1vw, 15px);
  flex:1 1 260px; min-width:160px; white-space:normal; overflow-wrap:anywhere;
}
.control select{
  appearance:none;
  background:linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0.02));
  color:#fff; border:1px solid var(--glass-border);
  border-radius:10px; padding:8px 12px; outline:none;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.05);
  font-size: clamp(13px, 1.1vw, 15px);
}
.control select:focus{box-shadow:0 0 0 2px rgba(58,166,255,0.35)}
.control input[type="text"]{
  background:linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0.02));
  color:#fff; border:1px solid var(--glass-border);
  border-radius:10px; padding:8px 12px; outline:none;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.05);
  font-size: clamp(13px, 1.1vw, 15px);
  width:100%;
}
.control input[type="text"]:focus{box-shadow:0 0 0 2px rgba(58,166,255,0.35)}
.control .inline{display:flex; align-items:center; gap:6px; font-weight:400; color:#cfcfcf}
.control-flex{display:flex; gap:10px; align-items:center; flex-wrap:wrap}
/* Prevent flex items from overflowing on narrow screens */
.control-flex, .btn-group, .btn-toggle, .control select, .control input[type="range"], .control input[type="text"]{ min-width:0 }
.hint{color:var(--muted)}
.control input[type="file"]{width:100%}
/* Make sliders fluid and grow */
input[type="range"]{width:auto; flex:1 1 240px; min-width:160px}
input[type="color"]{width:48px; height:32px; padding:0; border:none; background:none}
/* Toggle button groups */
.btn-group{display:flex; gap:8px; flex-wrap:wrap}
.btn-toggle{
  color:#fff; cursor:pointer; user-select:none;
  background:linear-gradient(180deg, rgba(255,255,255,0.08), rgba(255,255,255,0.04));
  border:1px solid var(--glass-border);
  border-radius:10px; padding:8px 12px; font-size: clamp(12px, 1.05vw, 14px);
  transition: box-shadow .12s ease, background .12s ease, border-color .12s ease;
}
.btn-toggle:hover{ box-shadow: var(--elev-1); border-color: rgba(122,203,255,0.35) }
.btn-toggle.is-active{
  background:linear-gradient(180deg, rgba(122,203,255,0.25), rgba(58,166,255,0.25));
  border-color: rgba(122,203,255,0.55);
  box-shadow: var(--elev-1);
}
button{
  color:#fff; cursor:pointer;
  background:linear-gradient(180deg, rgba(122,203,255,0.25), rgba(58,166,255,0.25));
  border:1px solid rgba(122,203,255,0.35);
  border-radius:12px; padding:10px 14px;
  box-shadow: var(--elev-1);
  transition: box-shadow .12s ease, background .12s ease, border-color .12s ease;
  font-size: clamp(13px, 1.1vw, 15px);
}
button:disabled{opacity:.55; cursor:not-allowed; filter:saturate(.6)}
button:hover:not(:disabled){ box-shadow: var(--elev-2); }

.preview{
  background:var(--glass-bg);
  border:1px solid var(--glass-border);
  border-radius:var(--radius);
  display:flex; align-items:center; justify-content:center; min-height:0;
  -webkit-backdrop-filter: blur(18px) saturate(160%);
  backdrop-filter: blur(18px) saturate(160%);
  box-shadow: var(--elev-1);
}
.preview{ transition: box-shadow .2s ease, border-color .2s ease; }
.preview:hover{ box-shadow: var(--elev-2); }
#preview.dragging{outline:2px dashed rgba(122,203,255,0.35); outline-offset:-8px}
#canvas{max-width:100%; max-height:calc(100vh - 220px); width:100%; height:auto; display:block; background:transparent}
.preview.empty{cursor:pointer}

.app-footer{
  padding:10px 16px; border-top:1px solid var(--glass-border); color:var(--muted);
  background:var(--glass-bg);
  -webkit-backdrop-filter: blur(12px) saturate(140%);
  backdrop-filter: blur(12px) saturate(140%);
  text-align:center;
  position:relative; z-index:2;
}

/* About page layout: keep simple and centered */
.page-about .app-main{ display:block; max-width:860px; margin:16px auto; padding:16px }
.about-card{ margin:0 auto }
.bio-portrait{ display:flex; justify-content:center; margin:6px 0 6px }
.bio-portrait img{
  width:min(45%, 195px); height:auto; display:block;
  border-radius:14px;
}
/* Tighter spacing around heading and first paragraph on About */
.about-card h2{ margin:0 0 6px }
.bio-portrait + p{ margin-top:6px }

/* GDPR consent modal */
.hidden{ display:none !important }
.consent-overlay{
  position:fixed; inset:0; z-index:9999;
  background:rgba(0,0,0,0.45);
  display:flex; align-items:center; justify-content:center; padding:12px;
}
.consent-box{
  width:min(560px, 100%);
  background:var(--glass-bg);
  border:1px solid var(--glass-border);
  border-radius:var(--radius);
  -webkit-backdrop-filter: blur(16px) saturate(160%);
  backdrop-filter: blur(16px) saturate(160%);
  box-shadow: var(--elev-2);
  color:var(--text);
  padding:16px;
}
.consent-box h3{ margin:0 0 8px 0 }
.consent-box p{ margin:0 0 8px 0; color:var(--muted) }
.consent-box ul{ margin:0 0 12px 18px; padding:0; color:var(--muted) }
.consent-checkbox{ display:block; margin-bottom:12px; }
.consent-actions{ display:flex; gap:10px; justify-content:flex-end }
.btn-secondary{ background:linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0.02)); border-color: var(--glass-border) }

/* Non-intrusive Ad slot */
.ad-slot{
  margin-top: 8px;
  background: var(--glass-bg);
  border:1px solid var(--glass-border);
  border-radius: var(--radius);
  -webkit-backdrop-filter: blur(10px) saturate(140%);
  backdrop-filter: blur(10px) saturate(140%);
  box-shadow: var(--elev-1);
  padding: 8px;
  display:flex; align-items:center; justify-content:center;
  min-height: 90px;
}
.ad-slot img{ max-width:100%; height:auto; display:block; border-radius:8px; opacity:.98 }

@media (max-width: 640px){
  .ad-slot{ min-height: 80px; padding:6px }
}

/* Temporarily hide ads on home */
.ads-hidden .ad-slot{ display:none !important }

/* Support slot (simple, subtle) */
.support-slot{
  margin-top: 8px;
  background: var(--glass-bg);
  border:1px solid var(--glass-border);
  border-radius: var(--radius);
  -webkit-backdrop-filter: blur(10px) saturate(140%);
  backdrop-filter: blur(10px) saturate(140%);
  box-shadow: var(--elev-1);
  padding: 10px 12px;
  display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap;
  color: var(--text);
}
@media (max-width: 640px){ .support-slot{ padding:8px } }

/* Donate button (mobile-friendly, matches app buttons) */
.donate-btn{
  display:inline-flex; align-items:center; justify-content:center;
  padding:10px 14px; border-radius:12px; text-decoration:none;
  color:#fff; font-weight:600;
  background:linear-gradient(180deg, rgba(122,203,255,0.25), rgba(58,166,255,0.25));
  border:1px solid rgba(122,203,255,0.35);
  box-shadow: var(--elev-1);
  transition: box-shadow .12s ease, transform .12s ease, border-color .12s ease;
}
.donate-btn:hover{ box-shadow: var(--elev-2); transform: translateY(-1px); border-color: rgba(122,203,255,0.55) }

@media (max-width: 920px){
  .app-main{
    display:flex;
    flex-direction:column;
    gap:12px;
    padding:12px;
    /* reset grid overrides */
    grid-template-columns:none;
    grid-template-areas:none;
    /* contain scrolling inside controls */
    overflow:hidden; min-height:0;
  }
  /* Preview stays fixed in place; only controls scroll */
  .preview{ order:0; margin:0; position:static; z-index:auto }
  .controls{ order:1; flex:1 1 auto; overflow-y:auto; -webkit-overflow-scrolling:touch; min-height:0 }
  #canvas{max-height:60vh}
  .control{flex-wrap:wrap}
  .control label{flex:0 0 100%}
  .control select, .control input[type="range"], .control .inline{flex:1 1 100%; width:100%}
}

/* Keep behavior on tablets and large phones in landscape */
@media (min-width: 921px) and (max-width: 1400px){
  .app-main{ overflow:hidden; min-height:0 }
  .controls{ overflow-y:auto; -webkit-overflow-scrolling:touch; min-height:0 }
}

/* Phone layout tuning */
@media (max-width: 640px){
  .app-main{gap:12px; padding:12px}
  .controls{padding:10px; gap:10px}
  .control{flex-direction:column; align-items:stretch; gap:6px}
  .control label{margin-bottom:2px; font-size: clamp(12px, 3.3vw, 14px); flex:0 0 auto}
  .control-flex{gap:8px; width:100%}
  .btn-group{display:grid; grid-template-columns:1fr; gap:8px; width:100%}
  .btn-toggle{width:100%; padding:10px 10px; font-size: clamp(12px, 3.1vw, 14px); white-space:normal; overflow-wrap:anywhere}
  input[type="range"]{flex:1 1 auto; width:100%}
  .app-header h1{font-size:24px}
  .app-header .tagline{ font-size:14px }
  #canvas{max-height:52vh}
  /* no special positioning needed for preview */
}

@media (max-width: 480px){ .controls{padding:8px; gap:8px} }

/* Show/hide actions by device type */
.desktop-only{ display:inline-flex }
.mobile-only{ display:none }
@media (hover: none) and (pointer: coarse){
  .desktop-only{ display:none }
  .mobile-only{ display:inline-flex }
  /* Make the Save image button larger and give more spacing to Reset */
  #shareImage{ font-size: clamp(16px, 4.2vw, 20px); padding:14px 18px; align-items:center; justify-content:center; text-align:center }
  .control.control-row{ gap:14px }
  /* Green accent for Save image on mobile */
  #shareImage{
    background: linear-gradient(180deg, rgba(72,199,116,0.28), rgba(46,204,113,0.28));
    border-color: rgba(46,204,113,0.55);
    color:#fff;
  }
  #shareImage:hover:not(:disabled){
    border-color: rgba(46,204,113,0.75);
  }
}

/* Range (glass, accent) */
input[type="range"]{ -webkit-appearance:none; appearance:none; height: clamp(24px, 2.2vw, 30px); background:transparent; }
input[type="range"]:focus{outline:none}
input[type="range"]::-webkit-slider-runnable-track{
  height: clamp(6px, 0.6vw, 8px); border-radius:999px;
  background:linear-gradient(90deg, rgba(58,166,255,0.45), rgba(122,203,255,0.35));
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.06);
}
input[type="range"]::-webkit-slider-thumb{
  -webkit-appearance:none; appearance:none; width: clamp(16px, 1.5vw, 20px); height: clamp(16px, 1.5vw, 20px); border-radius:50%;
  margin-top: calc(-0.5 * clamp(16px, 1.5vw, 20px));
  background: radial-gradient(closest-side, #fff, #e6f3ff);
  border:1px solid rgba(255,255,255,0.8);
  box-shadow: 0 3px 10px rgba(58,166,255,0.45);
}
input[type="range"]::-moz-range-track{
  height: clamp(6px, 0.6vw, 8px); border-radius:999px;
  background:linear-gradient(90deg, rgba(58,166,255,0.45), rgba(122,203,255,0.35));
}
input[type="range"]::-moz-range-thumb{
  width: clamp(16px, 1.5vw, 20px); height: clamp(16px, 1.5vw, 20px); border-radius:50%;
  background: radial-gradient(closest-side, #fff, #e6f3ff);
  border:1px solid rgba(255,255,255,0.8);
  box-shadow: 0 3px 10px rgba(58,166,255,0.45);
}

/* Inputs focus ring */
select:focus, input[type="color"]:focus{
  outline:none; box-shadow:0 0 0 2px rgba(58,166,255,0.35);
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce){
  *{ transition:none !important; animation:none !important; }
}