/* ============================================================
   PIXORAPROMPT — GLOBAL RESET
   ============================================================ */
*,*::before,*::after{box-sizing:border-box}


/* ============================================================
   PIXORAPROMPT — DESIGN VARIABLES
   ============================================================ */
:root{
  --bg:#070910;
  --panel:rgba(18,23,43,.76);
  --line:rgba(125,145,255,.28);
  --text:#f7f8ff;
  --muted:#aab2c8;
  --blue:#08aaff;
  --purple:#a13cff;
  --pink:#e33dca;
  --page-width:min(94vw,900px);
  --blur:18px;
}


/* ============================================================
   PIXORAPROMPT — LIGHT THEME
   ============================================================ */
body.light{
  --bg:#eef3ff;
  --panel:rgba(255,255,255,.78);
  --line:rgba(70,90,170,.22);
  --text:#10162b;
  --muted:#5c657d;
}


/* ============================================================
   PIXORAPROMPT — BODY / PAGE BACKGROUND
   ============================================================ */
html{min-height:100%;scroll-behavior:smooth}
body{
  margin:0;min-height:100vh;overflow-x:hidden;
  font-family:Arial,Helvetica,sans-serif;color:var(--text);
  background:
    radial-gradient(circle at 10% 5%,#14335b33,transparent 30%),
    radial-gradient(circle at 90% 30%,#6b2ba633,transparent 30%),
    var(--bg);
  transition:background .3s ease,color .3s ease;
}
button{font:inherit}
button,a{-webkit-tap-highlight-color:transparent}


/* ============================================================
   PIXORAPROMPT — TOP HEADER
   ============================================================ */
.topbar{
  position:sticky;top:clamp(5px,1vw,10px);z-index:50;
  width:var(--page-width);min-height:clamp(58px,7vw,68px);
  margin:clamp(6px,1vw,10px) auto;
  padding:clamp(7px,1vw,10px) clamp(9px,1.5vw,14px);
  display:flex;align-items:center;justify-content:space-between;
  gap:clamp(8px,2vw,18px);
  border:1px solid var(--line);border-radius:clamp(15px,2.5vw,20px);
  background:rgba(12,16,31,.80);
  backdrop-filter:blur(var(--blur));-webkit-backdrop-filter:blur(var(--blur));
  box-shadow:0 10px 35px #0005;
}


/* ============================================================
   PIXORAPROMPT — LOGO & BRAND NAME
   ============================================================ */
.brand{
  min-width:0;display:flex;align-items:center;
  gap:clamp(7px,1.5vw,10px);color:#fff;text-decoration:none;
}
.brand-logo{
  width:clamp(34px,5vw,48px);height:clamp(34px,5vw,48px);
  flex:0 0 auto;display:block;object-fit:contain;
}
.brand-name{
  min-width:0;font-size:clamp(18px,3vw,26px);
  line-height:1;font-weight:800;letter-spacing:-.8px;white-space:nowrap;
}
.brand-name span{color:#a74cff}


/* ============================================================
   PIXORAPROMPT — HEADER ACTIONS
   ============================================================ */
.actions{
  display:flex;align-items:center;justify-content:flex-end;
  gap:clamp(5px,1vw,8px);flex:0 0 auto;
}


/* ============================================================
   PIXORAPROMPT — SEARCH BUTTON
   ------------------------------------------------------------
   Reference style:
   Long rounded glass search field
   ============================================================ */

.search-btn {
  position: relative;

  width: clamp(160px, 18vw, 190px);
  height: clamp(42px, 5.5vw, 54px);

  flex: 0 1 auto;

  left: clamp(-20px, -4vw, -10px);

  display: flex;
  align-items: center;

  gap: clamp(8px, 1.2vw, 13px);

  padding: 0 clamp(12px, 1.8vw, 18px);

  border: 1px solid var(--line);

  border-radius: 999px;

  background: #202744bb;

  color: #dce3f7;

  cursor: pointer;

  font-family: inherit;
  
  margin-left: clamp(-14px, -2vw, -6px);

  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);

  box-shadow:
    inset 0 0 12px #ffffff08,
    0 4px 16px #0002;

  transition:
    transform .2s ease,
    background .25s ease,
    border-color .25s ease,
    box-shadow .25s ease;
}






/* ============================================================
   SEARCH ICON
   ============================================================ */

.search-icon {
  position: relative;

  width: clamp(17px, 2.5vw, 23px);
  height: clamp(17px, 2.5vw, 23px);

  flex: 0 0 auto;

  border: 3px solid currentColor;

  border-radius: 50%;

  opacity: .9;
}


/* Search handle */

.search-icon::after {
  content: "";

  position: absolute;

  width: clamp(7px, 1.2vw, 11px);
  height: 3px;

  background: currentColor;

  border-radius: 999px;

  right: clamp(-7px, -.8vw, -5px);
  bottom: clamp(-4px, -.6vw, -3px);

  transform: rotate(45deg);

  transform-origin: left center;
}


/* ============================================================
   SEARCH TEXT
   ============================================================ */

.search-text {
  min-width: 0;

  overflow: hidden;

  white-space: nowrap;

  text-overflow: ellipsis;

  font-size: clamp(13px, 2vw, 18px);

  font-weight: 500;

  letter-spacing: .1px;
}


/* ============================================================
   SEARCH HOVER
   ============================================================ */

.search-btn:hover {
  transform: translateY(-1px);

  background: #41466acc;

  box-shadow:
    0 0 18px #5f6eff47,
    inset 0 0 12px #ffffff0d;
}


/* ============================================================
   SEARCH ACTIVE
   ============================================================ */

.search-btn:active {
  transform: scale(.97);
}



/* ============================================================
   PIXORAPROMPT — SMALL PHONE 400px
   ============================================================ */

@media (max-width: 400px) {

  .search-btn {
    width: 125px;
    height: 42px;

    flex: 0 1 125px;

    padding: 0 10px;

    gap: 7px;

    /* Move search button slightly to the right */
    left: clamp(-8px, -1vw, -3px);

    margin-left: clamp(-5px, -0.8vw, -2px);
  }

  .search-text {
    font-size: 12px;
  }

  .search-icon {
    width: 17px;
    height: 17px;
    border-width: 2.5px;
  }
}


/* ============================================================
   PIXORAPROMPT — VERY SMALL PHONE 360px
   ============================================================ */

@media (max-width: 360px) {

  .search-btn {
    width: 112px;
    height: 40px;

    flex: 0 1 112px;

    padding: 0 8px;

    gap: 6px;

    /* Move search button slightly to the right */
    left: clamp(-4px, -0.5vw, -1px);

    margin-left: 0;
  }

  .search-text {
    font-size: 11px;
  }

  .search-icon {
    width: 16px;
    height: 16px;
    border-width: 2px;
  }
}









/* ============================================================
   PIXORAPROMPT — MENU BUTTON
   ============================================================ */

.menu-btn {
  width: clamp(42px, 5.8vw, 54px);
  height: clamp(42px, 5.8vw, 54px);

  flex: 0 0 auto;

  padding: 0;

  display: flex;
  flex-direction: column;

  align-items: center;
  justify-content: center;

  gap: clamp(5px, .8vw, 7px);

  border: 1px solid var(--line);

  border-radius: clamp(12px, 1.8vw, 17px);

  background: #202744bb;

  cursor: pointer;

  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);

  box-shadow:
    inset 0 0 12px #ffffff08,
    0 4px 16px #0002;

  transition:
    transform .2s ease,
    background .25s ease,
    box-shadow .25s ease;
}


/* ============================================================
   MENU — THREE HORIZONTAL LINES
   ============================================================ */

.menu-btn span {
  display: block;

  width: clamp(20px, 3vw, 28px);
  height: clamp(2px, .35vw, 3px);

  border-radius: 999px;

  background: #dce3f7;

  transition:
    transform .25s ease,
    width .25s ease,
    background .25s ease;
}


/* ============================================================
   MENU HOVER
   ============================================================ */

.menu-btn:hover {
  transform: translateY(-1px);

  background: #41466acc;

  box-shadow:
    0 0 18px #5f6eff47,
    inset 0 0 12px #ffffff0d;
}


/* ============================================================
   MENU ACTIVE
   ============================================================ */

.menu-btn:active {
  transform: scale(.94);
}










/* ============================================================
   PIXORAPROMPT — LIGHT / DARK THEME TOGGLE
   ------------------------------------------------------------
   LIGHT MODE  → Blue button + Moon ☾
   DARK MODE   → Yellow button + Sun ☼
   ============================================================ */

.theme {
  position: relative;

  width: clamp(42px, 6vw, 54px);
  height: clamp(42px, 6vw, 54px);

  flex: 0 0 auto;

  padding: 0;

  border: 2px solid #ffffff55;
  border-radius: 50%;

  cursor: pointer;

  display: grid;
  place-items: center;

  /* Default = DARK MODE */
  background: linear-gradient(
    145deg,
    #ffd94c8c,
    #ffb20088
  );

  color: #211800;

  box-shadow:
    0 0 12px #ffc40066,
    inset 0 0 10px #ffffff35;

  transition:
    background .35s ease,
    color .35s ease,
    box-shadow .35s ease,
    transform .25s ease;
}


/* ============================================================
   DARK MODE — SUN ICON
   ============================================================ */

.theme::before {
  content: "☀️";

  position: absolute;

  left: 50%;
  top: 50%;

  transform: translate(-50%, -50%);

  font-size: clamp(23px, 3.5vw, 30px);

  line-height: 1;

  color: #3b2a00;

  text-shadow:
    0 1px 2px #ffffff55;

  transition:
    opacity .25s ease,
    transform .35s ease;
}


/* ============================================================
   LIGHT MODE — BLUE BUTTON
   ============================================================ */

body.light .theme {

  background: linear-gradient(
    145deg,
    #5965ff,
    #3948e8
  );

  color: #ffffff;

  border-color: #ffffff88;

  box-shadow:
    0 0 14px #5365ff66,
    inset 0 0 10px #ffffff25;
}


/* ============================================================
   LIGHT MODE — MOON ICON
   ============================================================ */

body.light .theme::before {

  content: "☾";

  color: #ffffff;

  font-size: clamp(24px, 3.5vw, 31px);

  text-shadow:
    0 1px 4px #0004;

  transform:
    translate(-50%, -50%)
    rotate(-15deg);
}


/* ============================================================
   HOVER EFFECT
   ============================================================ */

.theme:hover {
  transform: scale(1.06);
}


/* ============================================================
   ACTIVE / CLICK EFFECT
   ============================================================ */

.theme:active {
  transform: scale(.94);
}


/* ============================================================
   FOCUS — ACCESSIBILITY
   ============================================================ */

.theme:focus-visible {
  outline: 2px solid #9c7cff;
  outline-offset: 3px;
}



/* ============================================================
   LIGHT MODE — SEARCH
   ============================================================ */

body.light .search-btn {
  background: #ffffffd9;

  color: #4b566b;

  border-color: #d8deea;

  box-shadow:
    0 4px 18px #8995b522,
    inset 0 0 10px #ffffff;
}


/* ============================================================
   LIGHT MODE — MENU
   ============================================================ */

body.light .menu-btn {
  background: #ffffffd9;

  border-color: #d8deea;

  box-shadow:
    0 4px 18px #8995b522,
    inset 0 0 10px #ffffff;
}


body.light .menu-btn span {
  background: #4b566b;
}


/* ============================================================
   LIGHT MODE — HOVER
   ============================================================ */

body.light .search-btn:hover,
body.light .menu-btn:hover {
  background: #ffffff;

  box-shadow:
    0 0 18px #6977ff35,
    0 4px 18px #8995b522;
}









/* ============================================================
   PIXORAPROMPT — MAIN & FOOTER WIDTH
   ============================================================ */
main,footer{width:var(--page-width);margin-left:auto;margin-right:auto}


/* ============================================================
   PIXORAPROMPT — DISCLAIMER
   ------------------------------------------------------------
   শুরুতে compact থাকবে।
   Read Full Disclaimer চাপলে পুরো content খুলবে।
   ============================================================ */

.disclaimer{
  width:100%;

  margin:
    clamp(6px,1vw,9px)
    0;

  padding:
    clamp(12px,2vw,16px)
    clamp(12px,2.5vw,18px);

  box-sizing:border-box;

  text-align:center;

  border:
    1px solid
    var(--line);

  border-radius:
    clamp(10px,1.8vw,14px);

  background:
    linear-gradient(
      90deg,
      #813eff33,
      #00aaff2e
    );

  backdrop-filter:
    blur(10px);

  -webkit-backdrop-filter:
    blur(10px);
}


/* ============================================================
   DISCLAIMER TITLE
   ============================================================ */

.disclaimer-title{
  color:#e9edff;

  font-size:
    clamp(11px,1.8vw,14px);

  font-weight:600;

  line-height:1.4;

  margin-bottom:
    clamp(8px,1.5vw,12px);
}


/* ============================================================
   DISCLAIMER CONTENT
   ------------------------------------------------------------
   Closed অবস্থায় content ছোট থাকবে।
   ============================================================ */

.disclaimer-content{
  position:relative;

  max-height:90px;

  overflow:hidden;

  transition:
    max-height .4s ease;
}


/* ============================================================
   CLOSED CONTENT — BOTTOM FADE
   ------------------------------------------------------------
   নিচে fade effect থাকবে যাতে বোঝা যায় আরও লেখা আছে।
   ============================================================ */

.disclaimer-content::after{
  content:"";

  position:absolute;

  left:0;

  right:0;

  bottom:0;

  height:45px;

  background:
    linear-gradient(
      to bottom,
      transparent,
      #101936e8
    );

  pointer-events:none;

  transition:
    opacity .25s ease;
}


/* ============================================================
   OPEN CONTENT
   ============================================================ */

.disclaimer.expanded
.disclaimer-content{
  max-height:1000px;
}


/* ============================================================
   OPEN হলে fade remove
   ============================================================ */

.disclaimer.expanded
.disclaimer-content::after{
  opacity:0;
}


/* ============================================================
   DISCLAIMER PARAGRAPH
   ============================================================ */

.disclaimer-content p{
  margin:
    0
    0
    clamp(9px,1.5vw,13px);

  color:#dce2f7;

  font-size:
    clamp(10px,1.6vw,13px);

  line-height:1.55;
}


.disclaimer-content p:last-child{
  margin-bottom:0;
}


/* ============================================================
   READ FULL DISCLAIMER BUTTON
   ============================================================ */

.disclaimer-toggle{
  margin-top:
    clamp(10px,1.8vw,14px);

  padding:
    7px
    14px;

  border:
    1px solid
    #8b7cff55;

  border-radius:999px;

  background:
    #ffffff08;

  color:#c9bfff;

  font-family:inherit;

  font-size:
    clamp(10px,1.6vw,13px);

  font-weight:600;

  line-height:1.3;

  cursor:pointer;

  transition:
    background .2s ease,
    border-color .2s ease,
    box-shadow .2s ease,
    transform .2s ease;
}


/* ============================================================
   BUTTON HOVER
   ============================================================ */

.disclaimer-toggle:hover{
  background:#8b7cff18;

  border-color:#a99dff80;

  box-shadow:
    0 0 16px #7040ff20;
}


/* ============================================================
   BUTTON ACTIVE
   ============================================================ */

.disclaimer-toggle:active{
  transform:scale(.96);
}


/* ============================================================
   LIGHT THEME
   ============================================================ */

body.light
.disclaimer-content::after{
  background:
    linear-gradient(
      to bottom,
      transparent,
      #eef1ffe8
    );
}


body.light
.disclaimer-title{
  color:#252b45;
}


body.light
.disclaimer-content p{
  color:#4f5877;
}


body.light
.disclaimer-toggle{
  border-color:#6878d455;

  background:#ffffff50;

  color:#5d50b8;
}


body.light
.disclaimer-toggle:hover{
  background:#e8eaff;

  border-color:#6878d480;
}


/* ============================================================
   PIXORAPROMPT — ADVERTISEMENT BANNER
   ============================================================ */
.ad{
  width:100%;min-height:clamp(88px,12vw,108px);
  margin:clamp(8px,1.5vw,12px) 0 clamp(11px,1.8vw,15px);
  padding:clamp(8px,1.5vw,13px);
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  position:relative;overflow:hidden;border:1px solid #a45cff99;
  border-radius:clamp(14px,2vw,18px);
  background:linear-gradient(120deg,#2368ff,#7133e9,#e33dca);
  box-shadow:0 0 28px #4b44ff33;text-align:center;
}
.ad small{position:absolute;left:clamp(10px,1.5vw,14px);top:clamp(8px,1.2vw,11px);font-size:clamp(9px,1.4vw,12px)}
.ad strong{font-size:clamp(19px,3.5vw,25px);line-height:1.15}
.ad span{margin-top:3px;font-size:clamp(9px,1.4vw,12px)}


/* ============================================================
   PIXORAPROMPT — CATEGORY NAVIGATION
   ============================================================ */
.categories{
  width:100%;display:flex;align-items:center;
  gap:clamp(6px,1vw,9px);overflow-x:auto;
  padding:2px 1px clamp(8px,1.4vw,13px);
  scrollbar-width:none;overscroll-behavior-inline:contain;
}
.categories::-webkit-scrollbar{display:none}
.categories button{
  flex:0 0 auto;min-height:clamp(36px,5vw,43px);
  padding:0 clamp(13px,2vw,18px);display:inline-flex;
  align-items:center;justify-content:center;
  border:1px solid var(--line);border-radius:999px;
  background:var(--panel);color:var(--text);cursor:pointer;
  font-size:clamp(10px,1.7vw,13px);white-space:nowrap;
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  transition:transform .2s ease,background .2s ease,box-shadow .2s ease;
}
.categories button:hover{transform:translateY(-1px)}
.categories button.active{
  border-color:transparent;background:linear-gradient(120deg,#08aaff,#a13cff);
  color:#fff;box-shadow:0 0 17px #5b5bff6b;
}


/* ============================================================
   PIXORAPROMPT — MASONRY IMAGE GALLERY
   ------------------------------------------------------------
   Images keep their natural height.
   No large empty gaps between different image ratios.
   ============================================================ */

.gallery{
  width:100%;

  column-count:2;

  column-gap:clamp(7px,1.5vw,11px);
}


/* ============================================================
   PIXORAPROMPT — PROMPT CARD
   ============================================================ */

.prompt-card{
  position:relative;

  min-width:0;

  width:100%;

  display:block;

  overflow:hidden;

  margin:0 0 clamp(7px,1.5vw,11px);

  break-inside:avoid;

  -webkit-column-break-inside:avoid;

  border:1px solid #7c91ff24;

  border-radius:
    clamp(12px,2vw,18px);

  background:var(--panel);

  box-shadow:
    0 8px 25px #0005;

  cursor:pointer;
}


/* ============================================================
   PIXORAPROMPT — IMAGE WRAPPER
   ------------------------------------------------------------
   Keeps badges positioned over the image.
   ============================================================ */

.prompt-image-wrap{
  position:relative;

  width:100%;

  overflow:hidden;

  border-radius:
    clamp(12px,2vw,18px);
}


/* ============================================================
   PIXORAPROMPT — PROMPT IMAGE
   ============================================================ */

.prompt-image{
  display:block;

  width:100%;

  height:auto;

  max-width:100%;

  aspect-ratio:auto;

  object-fit:initial;

  background:#ffffff0a;

  transition:
    transform .35s ease;
}


/* ============================================================
   PIXORAPROMPT — IMAGE HOVER
   ============================================================ */

.prompt-card:hover .prompt-image{
  transform:scale(1.025);
}


/* ============================================================
   PIXORAPROMPT — TRENDING BADGE
   ------------------------------------------------------------
   Top-left badge
   ============================================================ */

.prompt-trending{
  position:absolute;

  top:clamp(6px,1vw,9px);

  left:clamp(6px,1vw,9px);

  z-index:2;

  display:flex;

  align-items:center;

  justify-content:center;

  min-height:clamp(24px,3.5vw,31px);

  padding:
    0 clamp(7px,1.2vw,10px);

  border:
    1px solid #ffffff22;

  border-radius:999px;

  background:#070912b8;

  color:#ffffff;

  font-size:
    clamp(8px,1.3vw,11px);

  font-weight:600;

  white-space:nowrap;

  backdrop-filter:blur(10px);

  -webkit-backdrop-filter:blur(10px);

  box-shadow:
    0 4px 14px #0004;
}


/* ============================================================
   PIXORAPROMPT — PROMPT COUNT BADGE
   ------------------------------------------------------------
   Top-right badge
   PNG icon + image count number
   ============================================================ */

.prompt-count{
  position:absolute;

  top:
    clamp(6px,1vw,9px);

  right:
    clamp(6px,1vw,9px);

  z-index:2;

  display:flex;

  align-items:center;

  justify-content:center;

  gap:
    clamp(4px,.8vw,6px);

  min-height:
    clamp(24px,3.5vw,31px);

  padding:
    0
    clamp(7px,1.2vw,10px);

  box-sizing:border-box;

  border:
    1px solid #ffffff22;

  border-radius:999px;

  background:
    #070912b8;

  color:#ffffff;

  font-size:
    clamp(8px,1.3vw,11px);

  font-weight:600;

  line-height:1;

  white-space:nowrap;

  backdrop-filter:
    blur(10px);

  -webkit-backdrop-filter:
    blur(10px);

  box-shadow:
    0 4px 14px #0004;
}


/* ============================================================
   PROMPT COUNT — PNG ICON
   ------------------------------------------------------------
   image-count.png
   ============================================================ */

.prompt-count-icon{
  width:
    clamp(12px,2vw,16px);

  height:
    clamp(12px,2vw,16px);

  flex:
    0 0 auto;

  display:block;

  object-fit:contain;

  object-position:center;

  margin:0;

  padding:0;

  user-select:none;

  -webkit-user-drag:none;
}


/* ============================================================
   PROMPT COUNT — NUMBER
   ============================================================ */

.prompt-count-number{
  display:block;

  margin:0;

  padding:0;

  color:#ffffff;

  font-size:inherit;

  font-weight:inherit;

  line-height:1;
}



/* ============================================================
   PIXORAPROMPT — MORE CATEGORY SYSTEM
   ------------------------------------------------------------
   Wallpaper + 3D প্রথমে hidden থাকবে।
   More চাপলে শুধু .show থাকলে দেখা যাবে।
   ============================================================ */

#categories .more-category {
  display: none !important;
}


/* ============================================================
   MORE BUTTON চাপার পরে
   ============================================================ */

#categories .more-category.show {
  display: inline-flex !important;
}



/* ============================================================
   PIXORAPROMPT — HOW IT WORKS CONTAINER
   ============================================================ */

.how{
  width:100%;

  margin:
    clamp(12px,1.8vw,16px)
    0;

  padding:
    clamp(13px,2vw,18px);

  box-sizing:border-box;

  border:
    1px solid
    var(--line);

  border-radius:
    clamp(17px,2.7vw,23px);

  background:
    linear-gradient(
      145deg,
      #171d37dc,
      #080c1ad0
    );

  box-shadow:
    0 10px 35px #0000003d;
}


/* ============================================================
   HOW IT WORKS — HEADING
   ============================================================ */

.heading{
  display:flex;

  align-items:center;

  gap:
    clamp(9px,1.5vw,13px);
}


/* ============================================================
   HOW IT WORKS — MAIN PNG ICON
   ------------------------------------------------------------
   how-it-works.png
   ============================================================ */

.how-icon{
  flex:
    0 0 auto;

  width:
    clamp(42px,6vw,52px);

  height:
    clamp(42px,6vw,52px);

  padding:
    clamp(5px,1vw,7px);

  box-sizing:border-box;

  display:block;

  object-fit:contain;

  object-position:center;

  border:
    1px solid
    #8b7cff45;

  border-radius:
    clamp(11px,1.8vw,15px);

  background:
    linear-gradient(
      135deg,
      #654cff,
      #b73cff
    );

  box-shadow:
    0 0 22px #7a3fff61;

  /*
     PNG-র black background থাকলে
     dark theme-এ black অংশ visually blend হবে।
  */

  mix-blend-mode:screen;

  filter:
    drop-shadow(
      0 0 8px #8b5cff45
    );

  user-select:none;

  -webkit-user-drag:none;
}


/* ============================================================
   HOW IT WORKS — TITLE
   ============================================================ */

.heading h2{
  margin:0;

  color:
    var(--text);

  font-size:
    clamp(20px,3.4vw,26px);

  font-weight:800;

  line-height:1.1;
}


/* ============================================================
   HOW IT WORKS — SUBTITLE
   ============================================================ */

.heading p{
  margin:
    4px
    0
    0;

  color:
    var(--muted);

  font-size:
    clamp(9px,1.6vw,13px);

  line-height:1.35;
}


/* ============================================================
   HOW IT WORKS — STEPS CONTAINER
   ============================================================ */

.steps{
  display:grid;

  grid-template-columns:
    minmax(0,1fr)
    auto
    minmax(0,1fr)
    auto
    minmax(0,1fr);

  gap:
    clamp(5px,1vw,9px);

  align-items:stretch;

  margin-top:
    clamp(12px,1.8vw,15px);
}


/* ============================================================
   SINGLE STEP CARD
   ============================================================ */

.step{
  position:relative;

  min-width:0;

  padding:
    clamp(14px,2vw,20px)
    clamp(6px,1.2vw,11px)
    clamp(11px,1.6vw,15px);

  text-align:center;

  border:
    1px solid
    var(--line);

  border-radius:
    clamp(13px,2vw,18px);

  background:
    #18203c99;

  overflow:hidden;

  transition:
    background .25s ease,
    border-color .25s ease,
    box-shadow .25s ease,
    transform .25s ease;
}


/* ============================================================
   STEP HOVER
   ============================================================ */

.step:hover{
  background:
    #20294aaf;

  border-color:
    #7c91ff45;

  box-shadow:
    0 8px 25px #0004,
    0 0 18px #7040ff12;

  transform:
    translateY(-2px);
}


/* ============================================================
   STEP NUMBER
   ============================================================ */

.step i{
  position:absolute;

  left:
    clamp(6px,1vw,9px);

  top:
    clamp(6px,1vw,9px);

  width:
    clamp(23px,3.5vw,29px);

  height:
    clamp(23px,3.5vw,29px);

  display:grid;

  place-items:center;

  border-radius:50%;

  background:
    linear-gradient(
      135deg,
      #159cff,
      #7e42ff
    );

  color:#fff;

  font-style:normal;

  font-size:
    clamp(9px,1.4vw,12px);

  font-weight:700;

  box-shadow:
    0 0 12px #4d7dff35;

  z-index:2;
}


/* ============================================================
   STEP PNG ICON
   ------------------------------------------------------------
   browse.png
   copy.png
   generate.png
   ============================================================ */

.step-icon{
  display:block;

  width:
    clamp(28px,4vw,38px);

  height:
    clamp(28px,4vw,38px);

  margin:
    clamp(4px,1vw,8px)
    auto
    clamp(7px,1.2vw,10px);

  object-fit:contain;

  object-position:center;

  user-select:none;

  -webkit-user-drag:none;

  /*
     তোমার neon PNG-তে black background থাকলে
     dark theme-এ black অংশ blend হবে।
  */

  mix-blend-mode:screen;

  filter:
    drop-shadow(
      0 0 8px #8b5cff55
    );

  transition:
    transform .25s ease,
    filter .25s ease;
}


/* ============================================================
   STEP ICON HOVER
   ============================================================ */

.step:hover .step-icon{
  transform:
    scale(1.08);

  filter:
    drop-shadow(
      0 0 12px #b85cff80
    );
}


/* ============================================================
   STEP TITLE
   ============================================================ */

.step h3{
  margin:
    clamp(4px,.7vw,6px)
    0;

  color:
    var(--text);

  font-size:
    clamp(10px,1.7vw,14px);

  font-weight:700;

  line-height:1.2;
}


/* ============================================================
   STEP DESCRIPTION
   ============================================================ */

.step p{
  margin:0;

  color:
    var(--muted);

  font-size:
    clamp(8px,1.3vw,11px);

  line-height:1.4;
}


/* ============================================================
   STEP ARROW
   ============================================================ */

.steps em{
  display:grid;

  place-items:center;

  align-self:center;

  color:
    #bbc2ff;

  font-size:
    clamp(18px,3vw,27px);

  font-style:normal;

  line-height:1;

  transition:
    transform .25s ease,
    color .25s ease;
}


.step:hover + em{
  transform:
    translateX(2px);

  color:
    #d3caff;
}


/* ============================================================
   LIGHT THEME — HOW CONTAINER
   ============================================================ */

body.light .how{
  background:
    linear-gradient(
      145deg,
      #f8f9ffdc,
      #eef1ffd0
    );

  box-shadow:
    0 10px 35px #28345c18;
}


/* ============================================================
   LIGHT THEME — MAIN HOW ICON
   ============================================================ */

body.light .how-icon{
  border-color:
    #6878d455;

  background:
    linear-gradient(
      135deg,
      #765cff,
      #c044ff
    );

  box-shadow:
    0 0 20px #7040ff25;

  /*
     Light theme-এ PNG-এর black background যেন
     visible না হয়।
  */

  mix-blend-mode:multiply;

  filter:
    drop-shadow(
      0 0 7px #7040ff30
    );
}


/* ============================================================
   LIGHT THEME — STEP CARD
   ============================================================ */

body.light .step{
  background:
    #ffffff80;

  border-color:
    #6878d425;
}


body.light .step:hover{
  background:
    #ffffffc9;

  border-color:
    #6878d455;

  box-shadow:
    0 8px 25px #28345c15,
    0 0 18px #7040ff10;
}


/* ============================================================
   LIGHT THEME — STEP PNG
   ============================================================ */

body.light .step-icon{
  mix-blend-mode:multiply;

  filter:
    drop-shadow(
      0 0 7px #7040ff25
    );
}


body.light .step:hover .step-icon{
  filter:
    drop-shadow(
      0 0 11px #7040ff45
    );
}


/* ============================================================
   LIGHT THEME — ARROW
   ============================================================ */

body.light .steps em{
  color:
    #6874a5;
}


body.light .step:hover + em{
  color:
    #6355c7;
}










/* ============================================================
   PIXORAPROMPT — FOOTER
   ============================================================ */
footer{
  margin-top:clamp(12px,1.8vw,16px);
  margin-bottom:clamp(20px,4vw,28px);
  padding:clamp(14px,2vw,20px);
  display:grid;
  grid-template-columns:minmax(0,1.4fr) minmax(0,1fr) auto;
  gap:clamp(10px,2vw,18px);align-items:center;
  border:1px solid var(--line);border-radius:clamp(16px,2.5vw,21px);
  background:var(--panel);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
}
.footer-brand strong{display:block;font-size:clamp(17px,2.7vw,22px);line-height:1.1}
.footer-brand strong span{color:#a74cff}
.footer-brand p{max-width:360px;margin:clamp(5px,1vw,8px) 0 0;color:var(--muted);font-size:clamp(9px,1.4vw,12px);line-height:1.45}


/* ============================================================
   PIXORAPROMPT — FOOTER LINKS
   ============================================================ */
.links{display:flex;align-items:center;justify-content:flex-start;flex-wrap:wrap;gap:clamp(8px,1.3vw,13px)}
.links a{color:var(--muted);text-decoration:none;font-size:clamp(9px,1.4vw,12px);transition:color .2s ease}
.links a:hover{color:var(--text)}
footer>small{color:var(--muted);font-size:clamp(8px,1.3vw,11px);white-space:nowrap}


/* ============================================================
   PIXORAPROMPT — COPY TOAST
   ============================================================ */
#toast{
  position:fixed;left:50%;bottom:clamp(18px,4vw,28px);z-index:100;
  max-width:calc(100vw - 30px);padding:clamp(8px,1.5vw,11px) clamp(12px,2vw,17px);
  border-radius:clamp(10px,1.5vw,13px);background:#fff;color:#111;
  box-shadow:0 8px 25px #0006;font-size:clamp(10px,1.5vw,13px);
  transform:translate(-50%,20px);opacity:0;pointer-events:none;
  transition:opacity .25s ease,transform .25s ease;
}
#toast.show{opacity:1;transform:translate(-50%,0)}


/* ============================================================
   PIXORAPROMPT — FOCUS / ACCESSIBILITY
   ============================================================ */
button:focus-visible,a:focus-visible{outline:2px solid #5db8ff;outline-offset:3px}


/* ============================================================
   PIXORAPROMPT — FLUID CONTENT PROTECTION
   ------------------------------------------------------------
   These rules help the layout adapt without device-specific
   media-query breakpoints.
   ============================================================ */
.brand-name,.footer-brand,.links,.step{overflow-wrap:anywhere}

















/* ============================================================
   PIXORAPROMPT — SEARCH PANEL
   ------------------------------------------------------------
   Search button চাপলে JavaScript দিয়ে .open class যোগ হবে।
   Default অবস্থায় পুরো panel hidden থাকবে।
   ============================================================ */


/* ============================================================
   SEARCH OVERLAY
   ============================================================ */

.search-overlay{
  position:fixed;
  inset:0;

  z-index:9999;

  display:none;

  width:100%;
  height:100%;

  padding:
    clamp(10px,2vw,20px);

  background:#050711cc;

  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);

  overflow-y:auto;
}


/* ============================================================
   SEARCH OVERLAY — OPEN
   ============================================================ */

.search-overlay.open{
  display:block;
}


/* ============================================================
   SEARCH PANEL
   ============================================================ */

.search-panel{

  width:min(
    100%,
    720px
  );

  margin:
    clamp(4px,1vw,12px)
    auto
    20px;

  padding:
    clamp(14px,2.5vw,22px);

  border:
    1px solid
    var(--line);

  border-radius:
    clamp(16px,2.5vw,24px);

  background:
    var(--panel);

  box-shadow:
    0 20px 60px #0008,
    0 0 35px #6c5ce722;

  backdrop-filter:
    blur(var(--blur));

  -webkit-backdrop-filter:
    blur(var(--blur));

  overflow:hidden;
}


/* ============================================================
   SEARCH INPUT WRAPPER
   ============================================================ */

.search-input-wrap{

  width:100%;

  min-height:
    clamp(52px,7vw,62px);

  display:flex;

  align-items:center;

  gap:
    clamp(9px,1.5vw,12px);

  padding:
    0
    clamp(10px,1.8vw,14px);

  border:
    1px solid
    var(--line);

  border-radius:
    clamp(13px,2vw,17px);

  background:
    #151b35cc;

  box-shadow:
    inset 0 0 20px #0003;

  transition:
    border-color .25s ease,
    box-shadow .25s ease,
    background .25s ease;
}


/* ============================================================
   SEARCH INPUT WRAPPER — FOCUS
   ============================================================ */

.search-input-wrap:focus-within{

  border-color:
    #7185ff80;

  background:
    #18203dcc;

  box-shadow:
    0 0 18px #6575ff1c,
    inset 0 0 20px #0003;
}



/* ============================================================
   PIXORAPROMPT — SEARCH PANEL MAIN ICON
   ------------------------------------------------------------
   Clean magnifying glass icon
   Reference-style large glass + smooth handle
   ============================================================ */

.search-panel-icon{

  position:relative;

  flex:0 0 auto;

  width:clamp(28px,4vw,34px);
  height:clamp(28px,4vw,34px);

  color:#a9b8ff;

  display:block;

}


/* ============================================================
   SEARCH GLASS
   ============================================================ */

.search-panel-icon::before{

  content:"";

  position:absolute;

  left:1px;
  top:1px;

  width:clamp(19px,2.8vw,23px);
  height:clamp(19px,2.8vw,23px);

  border:clamp(2.5px,.35vw,3px) solid currentColor;

  border-radius:50%;

  box-sizing:border-box;

}


/* ============================================================
   SEARCH HANDLE
   ============================================================ */

.search-panel-icon::after{

  content:"";

  position:absolute;

  width:clamp(10px,1.5vw,13px);
  height:clamp(2.5px,.35vw,3px);

  left:18px;
  top: 19px;

  background:currentColor;

  border-radius:999px;

  transform:rotate(45deg);

  transform-origin:left center;

  box-shadow:
    0 0 2px currentColor;

}







/* ============================================================
   SEARCH INPUT
   ============================================================ */

.search-input{

  flex:1;

  min-width:0;

  height:
    100%;

  border:0;

  outline:0;

  background:transparent;

  color:
    var(--text);

  font-family:inherit;

  font-size:
    clamp(14px,2vw,17px);

  font-weight:400;
}


.search-input::placeholder{

  color:
    #8992ad;
}


/* ============================================================
   SEARCH CLOSE BUTTON
   ============================================================ */

.search-close{

  position:relative;

  flex:0 0 auto;

  width:
    clamp(36px,5vw,42px);

  height:
    clamp(36px,5vw,42px);

  padding:0;

  border:
    1px solid
    var(--line);

  border-radius:
    clamp(10px,1.5vw,13px);

  background:
    #ffffff08;

  color:
    var(--text);

  cursor:pointer;

  transition:
    transform .2s ease,
    background .2s ease,
    border-color .2s ease;
}


/* Close X — horizontal */

.search-close::before,
.search-close::after{

  content:"";

  position:absolute;

  width:
    17px;

  height:
    2px;

  left:50%;
  top:50%;

  background:
    currentColor;

  border-radius:999px;
}


.search-close::before{

  transform:
    translate(-50%,-50%)
    rotate(45deg);
}


.search-close::after{

  transform:
    translate(-50%,-50%)
    rotate(-45deg);
}


/* Remove text X if HTML still contains it */

.search-close{
  font-size:0;
}


/* Close hover */

.search-close:hover{

  background:
    #ffffff12;

  border-color:
    #8c9cff55;

  transform:
    translateY(-1px);
}


/* Close active */

.search-close:active{

  transform:
    scale(.94);
}


/* ============================================================
   SEARCH SECTION
   ============================================================ */

.search-section{

  margin-top:
    clamp(20px,3vw,26px);
}


/* ============================================================
   SECTION HEADING
   ============================================================ */

.search-section-heading{

  display:flex;

  align-items:center;

  justify-content:space-between;

  gap:12px;

  margin-bottom:
    clamp(8px,1.5vw,12px);
}


.search-section-heading h2{

  display:flex;

  align-items:center;

  gap:
    9px;

  margin:0;

  color:
    var(--text);

  font-size:
    clamp(20px,3vw,27px);

  line-height:1.15;
}


/* ============================================================
   SECTION ICON BASE
   ============================================================ */

.section-icon{

  position:relative;

  display:inline-block;

  flex:0 0 auto;

  width:
    20px;

  height:
    20px;

  color:#9eabff;
}










/* ============================================================
   CLEAR ALL
   ============================================================ */

.clear-searches{

  flex:0 0 auto;

  padding:4px 0;

  border:0;

  background:transparent;

  color:#a879ff;

  font-size:
    clamp(10px,1.6vw,13px);

  font-weight:600;

  cursor:pointer;

  transition:
    color .2s ease,
    transform .2s ease;
}


.clear-searches:hover{

  color:#c19aff;

  transform:
    translateY(-1px);
}


/* ============================================================
   SEARCH LIST
   ============================================================ */

.search-list{

  display:flex;

  flex-direction:column;

  gap:3px;
}


/* ============================================================
   SEARCH ITEM
   ============================================================ */

.search-item{

  width:100%;

  min-height:
    clamp(42px,6vw,50px);

  display:flex;

  align-items:center;

  justify-content:space-between;

  gap:12px;

  padding:
    7px
    clamp(7px,1.2vw,10px);

  border:0;

  border-radius:
    10px;

  background:transparent;

  color:
    var(--text);

  text-align:left;

  cursor:pointer;

  transition:
    background .2s ease,
    transform .2s ease;
}


.search-item:hover{

  background:
    #ffffff08;
}


.search-item:active{

  transform:scale(.985);
}



/* ============================================================
   LEFT SIDE
   ============================================================ */

.search-item-left{

  min-width:0;

  display:flex;

  align-items:center;

  gap:
    11px;
}









/* ============================================================
   PIXORAPROMPT — SEARCH ITEM ICON
   ------------------------------------------------------------
   Recent Searches → recent-search-clock.png
   Suggestions → CSS search icon
   ============================================================ */

.search-item-icon{

  position:relative;

  flex:0 0 auto;

  width:
    clamp(20px,3vw,22px);

  height:
    clamp(20px,3vw,22px);

  display:block;

}


/* ============================================================
   RECENT SEARCH CLOCK PNG
   ============================================================ */

.recent-search-icon{

  width:
    clamp(20px,3vw,22px);

  height:
    clamp(20px,3vw,22px);

  object-fit:contain;

  display:block;

  flex:0 0 auto;

}




/* ============================================================
   SEARCH ITEM ARROW — PNG
   ------------------------------------------------------------
   Same arrow PNG will be used everywhere.
   ============================================================ */

.search-item-arrow{

  width:
    clamp(19px,3vw,22px);

  height:
    clamp(19px,3vw,22px);

  flex:0 0 auto;

  display:block;

  object-fit:contain;

  opacity:.82;

}













/* ============================================================
   SEARCH ITEM TEXT
   ============================================================ */

.search-item-text{

  min-width:0;

  overflow:hidden;

  text-overflow:ellipsis;

  white-space:nowrap;

  color:
    var(--text);

  font-size:
    clamp(12px,1.8vw,15px);

  line-height:1.3;
}





/* ============================================================
   LIGHT THEME — SEARCH PANEL
   ============================================================ */

body.light .search-overlay{

  background:
    #dfe7f566;
}


body.light .search-panel{

  background:
    rgba(255,255,255,.88);

  box-shadow:
    0 20px 60px #64729a30,
    0 0 35px #6575ff18;
}


body.light .search-input-wrap{

  background:
    #f5f7ff;

  border-color:
    #aab6dc66;

  box-shadow:
    inset 0 0 15px #7180a414;
}


body.light .search-input-wrap:focus-within{

  background:
    #ffffff;

  border-color:
    #6575ff70;
}


body.light .search-input{

  color:
    #10162b;
}


body.light .search-input::placeholder{

  color:
    #737d96;
}


body.light .search-close{

  background:
    #eef1fb;

  color:
    #39435e;

  border-color:
    #aab6dc55;
}


body.light .search-item:hover{

  background:
    #6575ff0d;
}


body.light .search-item-text{

  color:
    #202840;
}





/* ============================================================
   SEARCH PANEL — MOBILE SAFETY
   ------------------------------------------------------------
   কোনো fixed height নেই।
   Content যতটা হবে panel ততটাই বড় হবে।
   ============================================================ */

.search-panel,
.search-list,
.search-section{

  max-width:100%;
}
  



  
/* ============================================================
   PIXORAPROMPT — REMOVE SEARCH POPUP
   ============================================================ */

.remove-search-overlay{
  position:fixed;
  inset:0;
  z-index:9999;

  display:flex;
  align-items:center;
  justify-content:center;

  padding:clamp(18px,4vw,28px);

  background:#02030ab8;

  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
}


/* ============================================================
   POPUP CARD
   ============================================================ */

.remove-search-popup{
  width:min(100%,360px);

  padding:clamp(22px,5vw,30px);

  border:1px solid #7c91ff40;

  border-radius:clamp(18px,4vw,24px);

  background:
    linear-gradient(
      145deg,
      #11152dF2,
      #0b0e20F2
    );

  box-shadow:
    0 20px 60px #0009,
    0 0 35px #7040ff20;

  text-align:center;

  animation:
    removePopupIn .22s ease;
}


/* ============================================================
   POPUP ANIMATION
   ============================================================ */

@keyframes removePopupIn{

  from{
    opacity:0;
    transform:scale(.94) translateY(8px);
  }

  to{
    opacity:1;
    transform:scale(1) translateY(0);
  }

}


/* ============================================================
   SEARCH NAME
   ============================================================ */

.remove-search-name{
  margin:0;

  color:#ffffff;

  font-size:clamp(20px,5vw,25px);

  font-weight:700;

  word-break:break-word;
}


/* ============================================================
   MESSAGE
   ============================================================ */

.remove-search-message{
  margin:
    clamp(9px,2vw,12px)
    0
    clamp(20px,4vw,25px);

  color:#aeb6d4;

  font-size:clamp(13px,3.2vw,15px);

  line-height:1.5;
}


/* ============================================================
   BUTTON AREA
   ============================================================ */

.remove-search-actions{
  display:flex;

  gap:clamp(9px,2vw,12px);

  width:100%;
}


/* ============================================================
   COMMON BUTTON
   ============================================================ */

.remove-search-actions button{
  flex:1;

  min-height:clamp(42px,10vw,48px);

  padding:0 14px;

  border-radius:12px;

  font-size:clamp(13px,3.2vw,15px);

  font-weight:600;

  cursor:pointer;

  transition:
    transform .2s ease,
    opacity .2s ease;
}


.remove-search-actions button:active{
  transform:scale(.96);
}


/* ============================================================
   CANCEL BUTTON
   ============================================================ */

.remove-search-cancel{
  border:1px solid #7c91ff40;

  background:#ffffff08;

  color:#dce2ff;
}


/* ============================================================
   REMOVE BUTTON
   ============================================================ */

.remove-search-confirm{
  border:1px solid #ff5b7d55;

  background:
    linear-gradient(
      135deg,
      #ff416c,
      #ff4b2b
    );

  color:#ffffff;

  box-shadow:
    0 6px 20px #ff416c30;
}

  
  




/* ============================================================
   PIXORAPROMPT — THREE DOT MENU
   ------------------------------------------------------------
   Menu structure:

   3-dot button
        ↓
   Dark overlay
        ↓
   Glass menu panel
        ↓
   Home
   Tools
   Share
   About
   Contact
   Privacy Policy
   Terms & Conditions
   ============================================================ */


/* ============================================================
   MENU OVERLAY
   ------------------------------------------------------------
   পুরো screen-এর উপর dark glass overlay।
   শুরুতে hidden থাকবে।
   JavaScript পরে .open class যোগ করবে।
   ============================================================ */

.menu-overlay{
  position:fixed;

  inset:0;

  z-index:9990;

  display:flex;

  justify-content:flex-end;

  align-items:stretch;

  width:100%;

  height:100%;

  padding:clamp(10px,2vw,18px);

  box-sizing:border-box;

  background:#02030ab8;

  opacity:0;

  visibility:hidden;

  pointer-events:none;

  transition:
    opacity .28s ease,
    visibility .28s ease;

  backdrop-filter:blur(12px);

  -webkit-backdrop-filter:blur(12px);
}


/* ============================================================
   MENU OPEN STATE
   ------------------------------------------------------------
   পরে JavaScript:

   menuOverlay.classList.add("open");

   করলে এই state active হবে।
   ============================================================ */

.menu-overlay.open{
  opacity:1;

  visibility:visible;

  pointer-events:auto;
}


/* ============================================================
   MENU PANEL
   ------------------------------------------------------------
   Right side থেকে glass panel।
   ============================================================ */

.menu-panel{
  position:relative;

  width:min(
    clamp(270px,82vw,390px),
    100%
  );

  height:100%;

  box-sizing:border-box;

  padding:
    clamp(20px,4vw,30px)
    clamp(16px,3vw,24px);

  overflow-y:auto;

  border:1px solid #7c91ff38;

  border-radius:
    clamp(20px,4vw,28px);

  background:
    linear-gradient(
      145deg,
      #11152df5,
      #080b1bf5
    );

  box-shadow:
    -12px 0 45px #0008,
    0 0 35px #7040ff20;

  transform:translateX(105%);

  transition:
    transform .32s cubic-bezier(.22,.8,.25,1);

  scrollbar-width:none;
}


/* ============================================================
   HIDE SCROLLBAR
   ============================================================ */

.menu-panel::-webkit-scrollbar{
  display:none;
}


/* ============================================================
   OPEN PANEL
   ============================================================ */

.menu-overlay.open .menu-panel{
  transform:translateX(0);
}


/* ============================================================
   CLOSE BUTTON
   ============================================================ */

.menu-close{
  position:absolute;

  top:clamp(14px,3vw,20px);

  right:clamp(14px,3vw,20px);

  width:clamp(40px,10vw,48px);

  height:clamp(40px,10vw,48px);

  display:flex;

  align-items:center;

  justify-content:center;

  border:1px solid #7c91ff38;

  border-radius:14px;

  background:#ffffff08;

  color:#e9edff;

  font-size:clamp(25px,6vw,32px);

  font-weight:300;

  line-height:1;

  cursor:pointer;

  transition:
    background .2s ease,
    border-color .2s ease,
    transform .2s ease,
    box-shadow .2s ease;
}


/* ============================================================
   CLOSE BUTTON HOVER
   ============================================================ */

.menu-close:hover{
  background:#7c91ff18;

  border-color:#8da0ff70;

  box-shadow:
    0 0 18px #7c91ff20;
}


/* ============================================================
   CLOSE BUTTON ACTIVE
   ============================================================ */

.menu-close:active{
  transform:scale(.92);
}


/* ============================================================
   MENU HEADER
   ============================================================ */

.menu-header{
  padding:
    clamp(8px,2vw,14px)
    clamp(4px,1vw,8px)
    clamp(20px,4vw,28px);

  padding-right:
    clamp(55px,13vw,70px);

  border-bottom:
    1px solid #7c91ff20;
}


/* ============================================================
   MENU BRAND
   ============================================================ */

.menu-header h2{
  margin:0;

  color:#ffffff;

  font-size:
    clamp(22px,5.5vw,30px);

  font-weight:800;

  letter-spacing:-.5px;
}


/* ============================================================
   MENU BRAND GRADIENT
   ============================================================ */

.menu-header h2 span{
  background:
    linear-gradient(
      90deg,
      #a855f7,
      #d946ef,
      #8b5cf6
    );

  -webkit-background-clip:text;

  background-clip:text;

  -webkit-text-fill-color:transparent;
}


/* ============================================================
   MENU SUBTITLE
   ============================================================ */

.menu-header p{
  margin:
    6px
    0
    0;

  color:#929ab9;

  font-size:
    clamp(11px,2.8vw,14px);

  line-height:1.5;
}


/* ============================================================
   MENU LIST
   ============================================================ */

.menu-list{
  display:flex;

  flex-direction:column;

  gap:clamp(7px,1.8vw,10px);

  padding-top:
    clamp(18px,4vw,25px);
}


/* ============================================================
   MENU ITEM
   ------------------------------------------------------------
   <a> এবং <button> দুটোই একই design পাবে।
   ============================================================ */

.menu-item{
  position:relative;

  width:100%;

  min-height:
    clamp(50px,12vw,60px);

  display:flex;

  align-items:center;

  gap:clamp(13px,3vw,17px);

  box-sizing:border-box;

  padding:
    0
    clamp(13px,3vw,18px);

  border:
    1px solid #7c91ff1c;

  border-radius:
    clamp(13px,3vw,17px);

  background:
    linear-gradient(
      135deg,
      #ffffff07,
      #7c91ff05
    );

  color:#e8ebff;

  text-decoration:none;

  font-family:inherit;

  cursor:pointer;

  overflow:hidden;

  transition:
    background .22s ease,
    border-color .22s ease,
    transform .22s ease,
    box-shadow .22s ease;
}


/* ============================================================
   MENU ITEM LIGHT GLOW
   ============================================================ */

.menu-item::before{
  content:"";

  position:absolute;

  inset:0;

  background:
    linear-gradient(
      90deg,
      #7c5cff10,
      transparent 65%
    );

  opacity:0;

  transition:opacity .22s ease;

  pointer-events:none;
}


/* ============================================================
   MENU ITEM HOVER
   ============================================================ */

.menu-item:hover{
  background:
    linear-gradient(
      135deg,
      #7c5cff18,
      #a855f710
    );

  border-color:#7c91ff45;

  box-shadow:
    0 7px 24px #0004,
    0 0 18px #7c5cff10;

  transform:translateX(-2px);
}


.menu-item:hover::before{
  opacity:1;
}


/* ============================================================
   MENU ITEM ACTIVE
   ============================================================ */

.menu-item:active{
  transform:scale(.98);
}


/* ============================================================
   MENU ICON
   ------------------------------------------------------------
   তোমার PNG icon এখানে বসবে।
   ============================================================ */

.menu-item-icon{
  position:relative;

  z-index:1;

  flex:0 0 auto;

  width:
    clamp(24px,6vw,31px);

  height:
    clamp(24px,6vw,31px);

  display:block;

  object-fit:contain;

  object-position:center;

  user-select:none;

  -webkit-user-drag:none;

  transition:
    transform .22s ease,
    filter .22s ease;
}


/* ============================================================
   ICON HOVER
   ============================================================ */

.menu-item:hover .menu-item-icon{
  transform:scale(1.08);

  filter:
    drop-shadow(
      0 0 8px #8b7cff55
    );
}


/* ============================================================
   MENU TEXT
   ============================================================ */

.menu-item-text{
  position:relative;

  z-index:1;

  flex:1;

  min-width:0;

  color:#e7eaff;

  font-size:
    clamp(13px,3.4vw,16px);

  font-weight:600;

  line-height:1.3;

  text-align:left;
}


/* ============================================================
   SHARE BUTTON RESET
   ------------------------------------------------------------
   <button> হওয়ার কারণে browser-এর default appearance
   যেন design নষ্ট না করে।
   ============================================================ */

button.menu-item{
  appearance:none;

  -webkit-appearance:none;

  border-style:solid;
}


/* ============================================================
   LIGHT THEME — OVERLAY
   ============================================================ */

body.light .menu-overlay{
  background:#dce4ff80;
}


/* ============================================================
   LIGHT THEME — PANEL
   ============================================================ */

body.light .menu-panel{
  border-color:#6878d440;

  background:
    linear-gradient(
      145deg,
      #f8f9ffff,
      #eef1ffff
    );

  box-shadow:
    -12px 0 45px #28345c25,
    0 0 35px #7040ff12;
}


/* ============================================================
   LIGHT THEME — CLOSE
   ============================================================ */

body.light .menu-close{
  border-color:#6878d440;

  background:#ffffff70;

  color:#303754;
}


/* ============================================================
   LIGHT THEME — HEADER
   ============================================================ */

body.light .menu-header{
  border-color:#6878d425;
}


body.light .menu-header h2{
  color:#171b30;
}


body.light .menu-header p{
  color:#68708f;
}


/* ============================================================
   LIGHT THEME — MENU ITEM
   ============================================================ */

body.light .menu-item{
  border-color:#6878d425;

  background:
    linear-gradient(
      135deg,
      #ffffffb8,
      #eef1ff80
    );

  color:#252b45;
}


body.light .menu-item:hover{
  background:
    linear-gradient(
      135deg,
      #e8eaff,
      #f5efff
    );

  border-color:#6878d455;

  box-shadow:
    0 7px 24px #28345c15;
}


body.light .menu-item-text{
  color:#252b45;
}


/* ============================================================
   PIXORAPROMPT — MENU ITEM RIGHT ARROW
   ------------------------------------------------------------
   প্রতিটি menu button-এর ডান পাশে CSS দিয়ে
   ছোট ">" arrow তৈরি হবে।
   ============================================================ */

.menu-item::after{
  content:"";

  position:absolute;

  right:clamp(17px,3vw,19px);

  top:50%;

  width:8px;

  height:8px;

  border-top:2px solid #8f99c7;

  border-right:2px solid #8f99c7;

  transform:
    translateY(-50%)
    rotate(45deg);

  z-index:2;

  transition:
    transform .22s ease,
    border-color .22s ease,
    filter .22s ease;
}


/* ============================================================
   ARROW HOVER
   ------------------------------------------------------------
   Menu item-এর উপর touch/hover করলে arrow একটু ডানে যাবে।
   ============================================================ */

.menu-item:hover::after{
  border-color:#c9bfff;

  transform:
    translateY(-50%)
    translateX(3px)
    rotate(45deg);

  filter:
    drop-shadow(
      0 0 5px #8b7cff70
    );
}


/* ============================================================
   ARROW ACTIVE
   ============================================================ */

.menu-item:active::after{
  transform:
    translateY(-50%)
    translateX(1px)
    rotate(45deg);
}


/* ============================================================
   LIGHT THEME — ARROW
   ============================================================ */

body.light .menu-item::after{
  border-color:#69739c;
}


body.light .menu-item:hover::after{
  border-color:#6355c7;

  filter:
    drop-shadow(
      0 0 4px #6355c740
    );
}



/* ============================================================
   PIXORAPROMPT — COMING SOON POPUP
   ============================================================ */

.coming-soon-popup{
  position:fixed;

  inset:0;

  z-index:10000;

  display:flex;

  align-items:center;

  justify-content:center;

  padding:20px;

  box-sizing:border-box;

  background:#02030ab8;

  backdrop-filter:blur(10px);

  -webkit-backdrop-filter:blur(10px);

  opacity:0;

  visibility:hidden;

  pointer-events:none;

  transition:
    opacity .22s ease,
    visibility .22s ease;
}


/* ============================================================
   POPUP SHOW
   ============================================================ */

.coming-soon-popup.show{
  opacity:1;

  visibility:visible;

  pointer-events:auto;
}


/* ============================================================
   POPUP BOX
   ============================================================ */

.coming-soon-box{
  width:min(330px,100%);

  box-sizing:border-box;

  padding:
    clamp(22px,6vw,30px);

  text-align:center;

  border:1px solid #7c91ff45;

  border-radius:22px;

  background:
    linear-gradient(
      145deg,
      #151a35f5,
      #080b1bf5
    );

  box-shadow:
    0 20px 60px #0009,
    0 0 35px #7040ff25;

  transform:
    scale(.88)
    translateY(10px);

  transition:
    transform .25s
    cubic-bezier(.22,.8,.25,1);
}


/* ============================================================
   POPUP BOX SHOW
   ============================================================ */

.coming-soon-popup.show
.coming-soon-box{
  transform:
    scale(1)
    translateY(0);
}


/* ============================================================
   POPUP ICON
   ============================================================ */

.coming-soon-icon{
  width:56px;

  height:56px;

  margin:0 auto 15px;

  display:flex;

  align-items:center;

  justify-content:center;

  border:1px solid #7c91ff35;

  border-radius:17px;

  background:
    linear-gradient(
      135deg,
      #00d9ff20,
      #a855f725,
      #ff36d020
    );

  font-size:28px;

  box-shadow:
    0 0 25px #7040ff20;
}


/* ============================================================
   POPUP TITLE
   ============================================================ */

.coming-soon-title{
  color:#ffffff;

  font-size:
    clamp(20px,5vw,24px);

  font-weight:800;

  letter-spacing:-.3px;
}


/* ============================================================
   POPUP MESSAGE
   ============================================================ */

.coming-soon-text{
  margin-top:8px;

  color:#969fbe;

  font-size:
    clamp(12px,3.2vw,14px);

  line-height:1.5;
}


/* ============================================================
   OK BUTTON
   ============================================================ */

.coming-soon-close{
  width:100%;

  min-height:46px;

  margin-top:20px;

  border:1px solid #7c91ff40;

  border-radius:13px;

  background:
    linear-gradient(
      90deg,
      #6d4aff22,
      #c044ff22
    );

  color:#ffffff;

  font-family:inherit;

  font-size:14px;

  font-weight:700;

  cursor:pointer;

  transition:
    transform .2s ease,
    background .2s ease,
    border-color .2s ease,
    box-shadow .2s ease;
}


.coming-soon-close:hover{
  background:
    linear-gradient(
      90deg,
      #6d4aff35,
      #c044ff35
    );

  border-color:#9b8cff65;

  box-shadow:
    0 0 20px #7040ff20;
}


.coming-soon-close:active{
  transform:scale(.97);
}


/* ============================================================
   LIGHT THEME
   ============================================================ */

body.light .coming-soon-popup{
  background:#dce4ff80;
}


body.light .coming-soon-box{
  border-color:#6878d440;

  background:
    linear-gradient(
      145deg,
      #f8f9ffff,
      #eef1ffff
    );

  box-shadow:
    0 20px 60px #28345c25,
    0 0 35px #7040ff12;
}


body.light .coming-soon-title{
  color:#171b30;
}


body.light .coming-soon-text{
  color:#68708f;
}


body.light .coming-soon-close{
  border-color:#6878d440;

  background:
    linear-gradient(
      90deg,
      #e8eaff,
      #f5efff
    );

  color:#252b45;
}



















/* ============================================================
   END OF PIXORAPROMPT STYLE SHEET
   ============================================================ */