#loader {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1000;
  height: 100vh;
  width: 100%;
  overflow: visible;
  background: #fff url('') no-repeat center center;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:20px;
  }

.loading-container{
  display:none;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:20px;
  height:57.5vh;
}
	  
.spinner{width:40px;height:40px;border:4px solid #e1e1e1;border-top:4px solid #482dff;border-radius:50%;animation:spin 1s linear infinite;}
@keyframes spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
	  
/* Main body */
  :root{
    --bg:#fff;
	--bg1:#fff;
    --text:#454545;
    --ring: rgba(99,102,241,0.08);
    --shadow: 0 10px 35px rgba(0,0,0,.1);
  }

  *{box-sizing:border-box;
	-webkit-tap-highlight-color:transparent;
   }
	  
  html,body {
	height:100%;
	min-height: 100vh;
    background-color: #fff;
    background-attachment: fixed;
	user-select: none;
  }
	  
  body {
    margin:0;
    display: flex;
    justify-content: center;
    background: var(--bg);
    color: var(--text);
    font: 16px/1.45 system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, "Noto Sans", "Apple Color Emoji","Segoe UI Emoji";
    animation: fadeInBg 0.3s ease forwards;
  }

 container {
  width: 100%;
  max-width: 900px;
  min-height: 100vh;
  display: block;
  flex-direction: column;
  position: relative;
  margin: auto;
  background: var(--bg);
 }
	  
  /* Header */
  header{
  position:sticky;
  top: env(safe-area-inset-top);
  top: 0;
  left: 0;
  width: 100%;
  z-index:10;
  background: #f9f9f9;
  }
  .nav{
    max-width:900px;
    margin:0 auto;
    display:flex;
	align-items:center;
	justify-content:space-between;
    padding:11px 16px;
    gap:10px;
  }
  
  .title{
    font-weight:500; letter-spacing:.2px; font-size:18px;
    display:flex; align-items:baseline; gap:8px;
  }

 .result-container{
    display:none;
    flex-direction:column;
    gap:15px;
    align-items:center;
    justify-content:center;
    text-align:center;
    animation:fadeInCard .3s ease forwards;
}

.generated-image{
    width:100%;
    box-shadow:0 0 10px rgba(0,0,0,.05);
}

.image-actions{
    width:90%;
    align-items:center;
    justify-content:space-between;
}

#exportCanvas{ display:none;}

.actions{display:flex; gap:8px; align-items:center;}

.btn{
  appearance:none; border:none; cursor:pointer;
  padding:4px 10px; font-size:12px; border-radius:0px;
  background:none;
  color:var(--text); font-weight:400;
  transition:.2s transform ease, .2s border-color ease, .2s background ease, .2s box-shadow ease;
  borde:1px solid #ddd;
}
.btn i{color:#482dff;}
.btn:hover{ transform: translateY(-1px);}
.btn:active{ transform: translateY(0); }
 
main{ max-width:800px; margin:10px auto; padding:0 18px 40px; background-attachment:fixed; }

.pill{
    display:inline-flex; align-items:center; gap:8px;
    padding:3px 10px; border-radius:999px;
    background:#fff; color:#666; font-size:10px; font-weight:400;
    border:1px solid #ddd;
  }

.quote{
    font-size:17px; line-height:1.6; font-weight:400; margin:8px 0 14px;
  }

.author{ color:#666; font-size:13px; font-weight:400; margin-bottom:20px; }

.row{ display:flex; gap:10px; flex-wrap:wrap; border:1px solid #ddd; border-radius:5px; padding:12px; justify-content:space-between;}
.row .btn{ flex: 0 0 auto; }
.card{ border:1px solid #ddd; border-radius:5px; padding:12px;}

  /* Tabs (views) */
.view{ display:none; }
.view.active{ display:block; }
  
.nav-icon {
  background: none;
  border: none;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 10;
}

.nav-icon i {
  color: #333;
  font-size: 1.4rem;
  pointer-events: none;
}

.back-icon {
  background: none;
  border: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0;
}
  
.back-icon i {
  color: #482dff;
  font-size: 22px;
  cursor: pointer;
}

.back-icon span {
  font-size: 12px;
  margin-bottom: 5px;
}
	  
@keyframes fadeInBg {
        from { opacity: 0; }
        to { opacity: 1; }
      }
@keyframes fadeInCard {
        from { opacity: 0; transform: scale(0.9); }
        to { opacity: 1; transform: scale(1); }
      }

.ad-container {
    width: 100%;
	height: auto;
    max-width: 900px;
    margin: 20px auto;
    margin-top: 5px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #fff;
	overflow: hidden;
    border: none;
	animation: fadeInCard 0.3s ease forwards;
  }

.ad-slot {
    display:flex;
    justify-content:center;
    align-items:center;
    max-width:100%;
    overflow:hidden;
  }

.ad-slot img {
    display:flex;
    justify-content:center;
    align-items:center;
    max-width:100%;
    overflow:hidden;
  }

@media (prefers-color-scheme: dark) {

:root{
  --bg:#1e1e1e;
  --bg1:#1e1e1e;
  --text:#eee;
  --ring:rgba(139,92,246,0.15);
  --shadow:0 15px 40px rgba(0,0,0,.6);
}
#loader{background:#1e1e1e;}
.spinner{border:4px solid #404046;border-top:4px solid #8775f5;}
	
html,body{
  background-color:#1e1e1e;
}

body::before {
  background: var(--bg);
}

container{
  background:#1e1e1e;
}

header{
  background:#303036;
}

.nav-icon i {
  color: #eee;
}
	
.btn{
  background:none;
  borde:1px solid #404046;
  color:#eee;
}
	
.btn i{color:#8775f5;}

.row{ border:1px solid #303036; }
.card{ border:1px solid #303036; }

.quote {color:#eee;}

.author{color:#ddd;}

.pill{
  background:#1e1e1e;
  color:#ddd;
  border:1px solid #404046;
}
	
.back-icon i {color:#8775f5;}

.ad-container{background:#1e1e1e;}
}