:root {
       --bg-color: #000000;
       --text-color: #ffffff;
       --btn-blue: #4380FF;
       --gemini-blue: #4285F4;
       --gemini-green: #34A853;
       --gemini-yellow: #FBBC05;
       --gemini-red: #EA4335;
       --gradient-border: linear-gradient(45deg, var(--gemini-blue), var(--gemini-green), var(--gemini-yellow), var(--gemini-red));
   }

   * {
       box-sizing: border-box;
       margin: 0;
       padding: 0;
       font-family: 'Google Sans', sans-serif;
       -webkit-tap-highlight-color: transparent;
   }

   body {
       background-color: #1a1a1a;
       display: flex;
       justify-content: center;
       align-items: center;
       min-height: 100vh;
       overflow: hidden;
       /* Prevent scrolling on body */
   }

   .d-none {
       display: none;
   }


   /* App Container - Mobile Portrait Lock styling for Desktop */
   #app {
       width: 100%;
       /* max-width: 450px; */
       /* Max width for desktop */
       height: 100vh;
       /* max-height: 900px; */
       background-color: var(--bg-color);
       position: relative;
       overflow: hidden;
       box-shadow: 0 0 40px rgba(0, 0, 0, 0.5);
       display: flex;
       flex-direction: column;
       color: var(--text-color);
   }

   /* Background Decorations */
   .decor {
       position: absolute;
       z-index: 1;
       pointer-events: none;
   }

   .spark-tl {
       top: 0px;
       right: -35px;
       width: 73px;
       transform: rotate(90deg);
       opacity: 0.8;
   }

   .spark-bl {
       bottom: 100px;
       left: -30px;
       width: 80px;
       transform: rotate(-45deg);
       opacity: 0.8;
   }

   .floating-icon {
       position: absolute;
       border-radius: 12px;
       width: 60px;
       height: auto;
       object-fit: cover;
       border: none;
       z-index: 2;
       animation: float 6s ease-in-out infinite;
       opacity: 0.9;
   }

   .floating-icon.small {
       width: 40px;
       height: auto;
       border-radius: 8px;
   }

   @keyframes float {
       0% {
           transform: translateY(0px) rotate(0deg);
       }

       50% {
           transform: translateY(-15px) rotate(3deg);
       }

       100% {
           transform: translateY(0px) rotate(0deg);
       }
   }

   /* Screens */
   .screen {
       position: absolute;
       top: 0;
       left: 0;
       width: 100%;
       height: 100%;
       display: none;
       flex-direction: column;
       align-items: center;
       padding: 40px 30px;
       z-index: 10;
       overflow-y: auto;
   }

   .screen.active {
       display: flex;
       justify-content: center;
       animation: fadeIn 0.4s ease forwards;
   }

   @keyframes fadeIn {
       from {
           opacity: 0;
           transform: translateY(10px);
       }

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

   /* Typography */
   h1 {
       font-size: 3rem;
       font-weight: 500;
       text-align: center;
       margin-bottom: 15vh;
   }

   p {
       font-size: 1.8rem;
       text-align: center;
       color: #ccc;
       margin-bottom: 15vh;
   }

   /* Buttons */
   .btn {
       background-color: var(--btn-blue);
       color: white;
       border: none;
       padding: 12px 80px;
       border-radius: 75px;
       font-size: 2rem;
       font-weight: 500;
       cursor: pointer;
       transition: transform 0.2s, background 0.2s;
       margin-bottom: 20px;
       min-width: 280px;
   }

   .btn:hover {
       background-color: #3367d6;
   }

   .btn:active {
       transform: scale(0.95);
   }

   .btn:disabled {
       background-color: #555;
       color: #888;
       cursor: not-allowed;
   }

   .btn-group {
       display: flex;
       gap: 15px;
       margin-bottom: 20px;
       width: 100%;
       justify-content: center;
   }

   .btn-group .btn {
       margin-top: 0;
       margin-bottom: 0;
       min-width: 120px;
   }

   #userData {
       margin: 0 auto;
       text-align: center;
   }

   /* Inputs */
   input[type="text"] {
       width: 65%;
       margin: 0 auto;
       background: transparent;
       border: 2px solid transparent;
       background-image: linear-gradient(#000, #000), var(--gradient-border);
       border-radius: 54px;
       background-origin: border-box;
       background-clip: padding-box, border-box;
       transition: all 0.3s;
       padding: 12px 20px;
       color: white;
       font-size: 1.8rem;
       text-align: center;
       margin-bottom: 15rem;
       outline: none;
   }

   label {
       font-size: 1.8rem;
       margin-bottom: 10px;
       display: block;
   }

   /* Selection Lists (Radio buttons) */
   .options-container {
       width: 60%;
       display: flex;
       flex-direction: column;
       gap: 25px;
       margin-bottom: 5vh;
   }

   #opts-lang {
       height: 52vh;
       overflow-y: auto;
   }

   .option-item {
       position: relative;
       padding: 7px 10px;
       border-radius: 30px;
       background-color: transparent;
       cursor: pointer;
       display: flex;
       justify-content: space-between;
       align-items: center;
       /* Gradient border technique */
       border: 2px solid transparent;
       background-image: linear-gradient(#000, #000), var(--gradient-border);
       background-origin: border-box;
       background-clip: padding-box, border-box;
       transition: all 0.3s;
   }

   .option-item:hover {
       background-image: linear-gradient(#111, #111), linear-gradient(to right, #666, #666);
   }

   .option-item.selected {
       background-image: linear-gradient(#000, #000), var(--gradient-border);
   }

   .option-label {
       font-size: 1.3rem;
       font-weight: 400;
       padding-left: 10px;
   }

   .check-circle {
       width: 40px;
       height: 40px;
       border-radius: 50%;
       border: 2px solid #ffffff;
       display: flex;
       justify-content: center;
       align-items: center;
       position: relative;
   }

   /* gradient checkmark */
   .option-item.selected .check-circle::after {
       content: '';
       width: 7px;
       height: 20px;
       border: solid transparent;
       border-width: 0 3px 3px 0;
       transform: rotate(45deg);

       border-image: var(--gradient-border);
       border-image-slice: 1;
   }

   .retake_btn_bx {
       display: flex;
       width: 75%;
       justify-content: center;
       align-items: center;
       margin: 1rem auto;
       gap: 12px;
   }

   .continue-btn-bx {
       margin: 2rem auto 0 auto;
   }

   /* /////////////picture capture */

   #step-photo h1,
   #step-photo p {
       margin-bottom: 3vh;
   }

   #step-q1 h1,
   #step-q2 h1,
   #step-q3 h1,
   #step-art h1,
   #step-lang h1,
   #step-prompt h1,
   #show-output h1 {
       margin-bottom: 5vh;
   }

   #step-loading h1 {
       margin-bottom: 0vh;
       margin-top: 10vh;
   }

   .picture-capture-sec .camera,
   .picture-capture-sec .picture-output {
       position: relative;
       width: 40vw;
       max-width: 420px;
       aspect-ratio: 1 / 1;
       background: black;
       margin: 0 auto;
   }

   /* Gradient corner frame */
   .camera::after,
   .picture-output::after {
       content: "";
       position: absolute;
       inset: 0;
       pointer-events: none;

       background:
           linear-gradient(90deg, #00c6ff, #ff512f) top left,
           linear-gradient(180deg, #00c6ff, #ff512f) top left,

           linear-gradient(270deg, #00c6ff, #ff512f) top right,
           linear-gradient(180deg, #00c6ff, #ff512f) top right,

           linear-gradient(90deg, #00c6ff, #ff512f) bottom left,
           linear-gradient(0deg, #00c6ff, #ff512f) bottom left,

           linear-gradient(270deg, #00c6ff, #ff512f) bottom right,
           linear-gradient(0deg, #00c6ff, #ff512f) bottom right;

       background-size:
           60px 3px,
           3px 60px,
           60px 3px,
           3px 60px,
           60px 3px,
           3px 60px,
           60px 3px,
           3px 60px;

       background-repeat: no-repeat;
   }

   /* The Inner Frame Border */
   .picture-capture-sec .camera.white-border::after,
   .picture-capture-sec .picture-output.white-border::after {
       content: '';
       position: absolute;
       /* Creates the 8px transparent gap */
       top: 4px;
       left: 4px;
       right: 4px;
       bottom: 4px;
       border: 1px solid #fff;
       /* Inner Border */
       pointer-events: none;
       z-index: 10;
       /* Ensures it sits on top of the video/canvas */
   }


   .picture-capture-sec .camera .video,
   .picture-capture-sec .camera #canvas,
   .picture-capture-sec .picture-output img {
       position: absolute;
       inset: 0;
       width: 100%;
       height: 100%;
       object-fit: cover;
   }


   .picture-capture-sec .camera .video,
   .picture-capture-sec .camera #canvas {
       -webkit-transform: scaleX(-1);
       transform: scaleX(-1);
   }

   .overlay_circle {
       width: 100%;
       position: absolute;
       top: 0;
       left: 0;
       z-index: 2;
       background: rgba(0, 0, 0, 0.2);
   }

   .overlay_circle img {
       width: 100%;
       display: block;
   }

   .take-photo {
       width: 13%;
       margin: 1rem auto;
       background: transparent;
       border: none;
   }

   .take-photo img {
       width: 100%;
       display: block;
       box-sizing: border-box;
   }

   /* /////////////picture capture */


   .camera-frame p {
       margin: 0;
       color: #888;
   }

   .camera-frame img.captured {
       width: 100%;
       height: 100%;
       object-fit: cover;
       border-radius: 18px;
       display: none;
   }

   /* Art Grid */
   .art-grid {
       display: grid;
       grid-template-columns: repeat(8, 1fr);
       justify-items: center;
       gap: 20px;
       margin-top: 20px;
       width: 80%;
       margin: 20px auto 15vh auto;
   }

   /* start second row from column 2 */
   .art-item {
       grid-column: span 2;
       justify-self: center;
   }

   /* center the second row */
   .art-item:nth-child(5) {
       grid-column: 2 / span 2;
   }

   .art-item {
       display: block;
       margin: 0 auto;
       align-items: center;
       cursor: pointer;
   }

   .art-img-wrapper {
       width: 100%;
       height: auto;
       overflow: hidden;
       transition: all 0.3s;
       margin-bottom: 8px;
       position: relative;
   }

   .art-img-wrapper img {
       width: 100%;
       height: 100%;
       object-fit: cover;
       display: block;
   }

   .art-item.selected .art-img-wrapper {
       /* border-color: white;
       box-shadow: 0 0 15px rgba(255, 255, 255, 0.3); */
   }

   .gemini-icon {
       position: absolute;
       width: 70px;
       animation: rotatePause 8s linear infinite;
   }

   @keyframes rotatePause {
       0% {
           transform: rotate(0deg);
       }

       /* rotate slowly */
       40% {
           transform: rotate(180deg);
       }

       /* pause */
       60% {
           transform: rotate(180deg);
       }

       /* rotate again smoothly */
       100% {
           transform: rotate(360deg);
       }
   }

   .art-label {
       font-size: 11px;
       text-align: center;
       line-height: 1.2;
       color: #ddd;
   }

   .art-sublabel {
       font-size: 9px;
       color: #888;
   }

   /* Prompt Box */
   .prompt-box {
       border: 2px solid transparent;
       background-image: linear-gradient(#111, #111), var(--gradient-border);
       background-origin: border-box;
       background-clip: padding-box, border-box;
       border-radius: 40px;
       padding: 25px;
       margin: 0 auto;
       margin-top: 20px;
       margin-bottom: 10vh;
       width: 60%;

   }

   .prompt-text {
       font-size: 1.2rem;
       color: #fff;
       text-align: center;
       margin-bottom: auto;
   }

   .var-style {
       color: #15EF43;
       font-weight: bold;
   }

   .var-role {
       color: #d13524;
       font-weight: bold;
   }

   .var-nature {
       color: #E9A916;
       font-weight: bold;
   }

   .var-sector {
       color: #d749f2;
       font-weight: bold;
   }

   .var-lang {
       color: #14caf7;
       font-weight: bold;
   }


   /* Loading UI */
   .loading-container {
       width: 100%;
       display: flex;
       flex-direction: column;
       align-items: center;
       justify-content: center;
       flex: 1;
   }

   .progress-border {
       width: 80%;
       margin: 40px auto 10px;
       padding: 2px;
       border-radius: 40px;

       background: linear-gradient(90deg, #00bfff, #00ff88, #ffcc00, #ff3300);
   }

   .progress-track {
       width: 100%;
       height: 45px;
       background: black;
       border-radius: 40px;
       overflow: hidden;
       padding: 4px;
   }

   .progress-fill {
       height: 100%;
       width: 0%;
       border-radius: 40px;

       background: linear-gradient(90deg, #1e90ff, #00ff88, #ffc107, #ff5722);

       transition: width 30s linear;
   }

   .loading-text {
       text-align: center;
       color: white;
       font-size: 22px;
   }

   .loading-text-dynamic {
       font-size: 2.2rem;
       color: #ffffff;
       text-align: left;
       width: 60%;
       min-height: 60px;
       margin: 0 auto;
   }

   /* Helpers */
   .spacer {
       flex-grow: 1;
   }

   /* Dynamic Background Icons Container */
   #bg-icons {
       position: absolute;
       top: 0;
       left: 0;
       width: 100%;
       height: 100%;
       pointer-events: none;
       z-index: 1;
   }


   .OutPutImage {
       position: relative;
   }

   .frame-bx {
       position: relative;
       width: 80%;
       margin: auto;
   }

   /* Image area inside frame */
   /* .image-holder {
       position: absolute;
       top: 50%;
       left: 50%;
       width: 75%;
       transform: translate(-50%, -50%);
       overflow: hidden;
       border-radius: 20px;
   } */

   .image-holder {
       position: absolute;
       inset: 0;
       width: 75%;
       height: 75%;
       margin: auto;
       overflow: hidden;
       border-radius: 20px;
   }

   /* Generated Image */
   .image-holder img {
       width: 100%;
       height: 100%;
       object-fit: cover;
       display: block;
       /* object-position: center; */
   }

   /* Frame */
   .frame-overlay {
       width: 100%;
       display: block;
       position: relative;
       z-index: 2;
   }

   /* Bottom text */
   .image-credit {
       position: absolute;
       bottom: 6%;
       left: 50%;
       transform: translate(-50%, 50%);
       width: 75%;
       text-align: center;
       color: #fff;
       font-size: 0.6rem;
       z-index: 3;
       line-height: 1.3rem;
   }

   .gemini-credit-icon {
       width: 16px;
       height: auto;
       vertical-align: middle;
       margin: 0 4px;
   }

   .actions {
       text-align: center;
       margin-top: 2rem;
       gap: 10px;
       display: flex;
       justify-content: center;
   }

   #show-output h1 {
       margin-bottom: 1vh;
   }

   #show-output p {
       margin-bottom: 3vh;
   }

   input:-webkit-autofill,
   input:-webkit-autofill:hover,
   input:-webkit-autofill:focus,
   input:-webkit-autofill:active {
       -webkit-box-shadow: 0 0 0 1000px transparent inset !important;
       box-shadow: 0 0 0 1000px transparent inset !important;
       -webkit-text-fill-color: inherit !important;
       background-color: transparent !important;
   }

   /* Remove the focus outline/shadow */
   a:focus,
   a:active,
   button:focus,
   button:active {
       outline: none !important;
       box-shadow: none !important;
       text-decoration: none !important;
   }

   /* Disable the mobile color in WebKit browsers */
   a,
   button,
   input,
   label {
       -webkit-tap-highlight-color: transparent;
       text-decoration: none !important;
   }

   /* (Optional) Remove default inner focus border in Firefox for buttons/links */
   button::-moz-focus-inner,
   a::-moz-focus-inner {
       border: 0;
   }

   /* If you also want to stop text selection coloring: */
   ::selection {
       background: transparent;
   }