.spotlight-overlay {
  pointer-events: none; /* Allow mouse events to pass through */
  position: fixed;
  top: 0; left: 0;
  width: 100vw; height: 100vh;
  z-index: -1;
  /* Default spotlight position and size */
  --x: 50vw;
  --y: 50vh;
  --radius: 160px;
  background:
    radial-gradient(
      circle var(--radius) at var(--x) var(--y),
      transparent 0%,
      rgba(0,0,0,0) 60%,
      rgba(0,0,0,0.7) 100%
    );
  transition: background 0.04s;
}

header {position: relative;}
#Prompt {max-width: 1050px; margin: 20px auto 10px auto; position: relative; z-index: 1;}
#Prompt .Main {display: flex;}
#Prompt .Main>.Settings {flex-grow: 1;}

#Prompt .BottomToolbar {display: flex; justify-content: end; flex-wrap: wrap; margin-top: 50px;}
#Prompt .BottomToolbar>* {/*flex-basis: 33%; flex-shrink: 0;*/ margin-bottom: 10px;}
#Prompt .BottomToolbar>*+* {margin-left: 10px;}

#Prompt .SettingsForm .Props.NotReq {display: none; margin-top: 60px; padding: 0 80px;}

@media (max-width: 600px) {
    #Prompt .SettingsForm .Props.NotReq {padding: 0 40px;}
}

@media (max-width: 500px) {
    #Prompt .SettingsForm .Props.NotReq {padding: 0 20px;}
}

@media (max-width: 400px) {
    #Prompt .SettingsForm .Props.NotReq {padding: 0 10px;}
}


#Prompt .SettingsForm .Props.NotReq .Prop {display: flex; flex-wrap: wrap;}
#Prompt .SettingsForm .Props.NotReq .Items {flex-basis: 80%;}
#Prompt .SettingsForm .Props.NotReq .Items .Prop {display: block;}

#Prompt .SettingsForm .Props.NotReq .Prop {padding: 10px 0; align-items: center;}
#Prompt .SettingsForm .Props.NotReq .Prop>* {padding: 4px;}
#Prompt .SettingsForm .Prop>* {flex-shrink: 0; box-sizing: border-box;}
#Prompt .SettingsForm .Prop>.Label {flex-basis: 20%; text-transform: capitalize;}

#Prompt .SettingsForm .Prop.Img>label {align-self: baseline;}

#Prompt .SettingsForm .Prop>.Var {flex-basis: 80%;}
#Prompt .SettingsForm .Prop>.Descr {width: 100%; font-size: 14px; line-height: normal; color: var(--text-secondary); padding-top: 0;}
#Prompt .SettingsForm .Prop textarea {width: 100%; height: 196px; padding: 20px; color: var(--text-secondary); background: var(--bg-control); border: 1px solid var(--text-secondary);
border-radius: 10px; box-shadow: none;}
#Prompt .SettingsForm .Prop input {width: 100%; padding: 6px; color: var(--text-secondary); background: var(--bg-control); border: 1px solid var(--text-secondary);
border-radius: 10px; box-shadow: none;}
#Prompt .SettingsForm .Props.NotReq .Prop select {width: 100%; padding: 6px 12px; color: var(--text-secondary); background: var(--bg-control); border: 1px solid var(--text-secondary);
border-radius: 10px; box-shadow: none;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%23a0a0cc' class='bi bi-chevron-down' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 15px center;
  background-size: 16px;
}

@media (max-width: 700px) {
    #Prompt .SettingsForm .Prop>.Label {flex-basis: 25%}
    #Prompt .SettingsForm .Prop>.Var {flex-basis: 75%;}
}

@media (max-width: 500px) {
    #Prompt .SettingsForm .Prop>.Label {flex-basis: 30%}
    #Prompt .SettingsForm .Prop>.Var {flex-basis: 70%;}
}

@media (max-width: 380px) {
    #Prompt .SettingsForm .Prop>.Label {flex-basis: 100%}
    #Prompt .SettingsForm .Prop>.Var {flex-basis: 100%;}
}


#Prompt .SettingsForm .Prop.Textarea:not(.Req) {display: grid; grid-template-columns: repeat(10, 10%);}
#Prompt .SettingsForm .Prop.Textarea:not(.Req)>.Label {grid-column: 1/3; grid-row: 1/1;}
#Prompt .SettingsForm .Prop.Textarea:not(.Req)>.Descr {grid-column: 1/3; grid-row: 2/3;}
#Prompt .SettingsForm .Prop.Textarea:not(.Req)>.Var {grid-column: 3/11; grid-row: 1/3;}

#Prompt .SettingsForm .Prop.Textarea.Req {display: block;}
#Prompt .SettingsForm .Prop.Textarea.Req>.Label {display: none;}
#Prompt .SettingsForm .Prop.Textarea.Req>.Descr {display: none;}
#Prompt .SettingsForm .Prop.Textarea.Req>.Var {}

#Prompt .SettingsForm .Prop.Textarea.Req { margin-bottom: 25px; }
#Prompt .SettingsForm .Prop.Textarea.Req textarea { width: 100%; min-height: 120px; background-color: var(--bg-control); border: 1px solid var(--border-color); border-radius: 8px; padding: 15px; font-family: 'Poppins', sans-serif; font-size: 1em; color: var(--text-primary); resize: vertical; transition: border-color 0.3s ease, box-shadow 0.3s ease; }
#Prompt .SettingsForm .Prop.Textarea.Req textarea::placeholder { color: var(--text-placeholder); }
#Prompt .SettingsForm .Prop.Textarea.Req textarea:focus { outline: none; border-color: var(--border-focus); box-shadow: 0 0 0 2px rgba(var(--accent-secondary-rgb), 0.15), var(--glow-focus); }
#Prompt .SettingsForm .Prop.Object {display: block;}

#Prompt .SettingsForm>.Props.Req {display: flex; flex-wrap: wrap; align-items: baseline;}
#Prompt .SettingsForm>.Props.Req>* {flex-basis: 33%; box-sizing: border-box; flex-shrink: 0; padding: 4px;}
#Prompt .SettingsForm>.Props.Req>.ButtonsList {flex-grow: 1; }
#Prompt .SettingsForm>.Props.Req>.Textarea {flex-basis: 50%; order: -1;}
#Prompt .SettingsForm>.Props.Req>.Textarea:first-child {flex-basis: 100%;}
#Prompt .SettingsForm>.Props.Req>.ImgArray {flex-basis: 50%; order: -2; align-self: start;}
#Prompt .SettingsForm>.Props.Req>.Img {flex-basis: 50%; order: -2; align-self: start;}

#Prompt .SettingsForm>.Props.Req>.ImgArray>.Label {display: none;}
#Prompt .SettingsForm>.Props.Req>.Img>.Label {display: none;}

#StdControls {display: none;}
#StdControlsPlace {display: none; display: contents;}
#StdControlsPlace>* {flex-basis: 33%; box-sizing: border-box; flex-shrink: 0; padding: 4px;}
#StdControlsPlace .AdvancedSettings {order: 100;}

@media (max-width: 800px) {
    #Prompt .SettingsForm>.Props.Req>* {flex-basis: 50%;}
    #StdControlsPlace>* {flex-basis: 50%;}
    #Prompt .SettingsForm>.Props.Req>.Textarea {flex-basis: 100%;}
    #Prompt .SettingsForm>.Props.Req>.ImgArray {flex-basis: 100%}
    #Prompt .SettingsForm>.Props.Req>.Img {flex-basis: 100%;}
}

@media (max-width: 599px) {
    #Prompt .SettingsForm>.Props.Req>* {flex-basis: 100%;}
    #StdControlsPlace>* {flex-basis: 100%;}
}


#Prompt .SettingsForm .Var>.button-group>* {flex-grow: 0;} 

#Prompt .SettingsForm>.Props>.Prop.Object>.Obj {padding-left: 20px;}
#Prompt .SettingsForm>.Props>.Prop.Object>.Descr {padding-left: 20px;}
#Prompt .SettingsForm>.Props>.Prop.Object>.Obj>.Props>.Prop.Object>.Obj {padding-left: 40px;}
#Prompt .SettingsForm>.Props>.Prop.Object>.Obj>.Props>.Prop.Object>.Descr {padding-left: 40px;}

/* OLD SetImage */
#Prompt .SettingsForm .SetImageOld {display: flex; /*flex-wrap: wrap;*/ margin-top: 10px;}
#Prompt .SettingsForm .SetImageOld img {width: 360px; height: 360px; padding: 4px; border-radius: 4px; border: 1px solid var(--text-secondary); margin-right: 10px; object-fit: contain; display: none;}
#Prompt .SettingsForm .SetImageOld span {font-size: 14px;}
#Prompt .SettingsForm .SetImageOld input[type="file"] {border: none;}
#Prompt .SettingsForm .SetImageOld input[type="file"]::file-selector-button {
    background: url(/images/upload_file.svg) 8px center no-repeat var(--bg-control-hover); background-size: 24px 24px;
    /*background-color: var(--bg-control-hover);*/
  border: 1px solid var(--text-secondary); color: #FFF; border-radius: 8px; padding: 8px 18px 8px 42px; cursor: pointer;}

#Prompt .SettingsForm .SetImageOld .control-group {flex-direction: row; flex-wrap: wrap;}
#Prompt .SettingsForm .SetImageOld.Full .control-group {flex-direction: column; flex-wrap: wrap;}

#Prompt .SettingsForm .SetImageOld .control-group>* {margin-bottom: 4px; flex-grow: 0;}
#Prompt .SettingsForm .SetImageOld .control-group>input {margin-right: 4px; max-width: 250px;}
#Prompt .SettingsForm .SetImageOld .control-group>button {white-space: nowrap; /*min-width: 250px;*/ margin-right: 4px;}

/*****************************/

.SettingsForm .Prop.Img .upload-options {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    margin-bottom: 0;
}

.SettingsForm .Prop.Img .upload-options input[type="url"] {flex-basis: 100%; box-sizing: border-box; padding: 12px; border-radius: 8px; background-color: #2a2a2a;
  border: 1px solid #444;
  color: #e0e0e0;}
  
.SettingsForm .Prop.Img .upload-options > div {flex-basis: calc(50% - 10px);
  flex-grow: 0;
  flex-shrink: 0;
  box-sizing: border-box;
}

.SettingsForm .Prop.Img .upload-box, .SettingsForm .Prop.Img .choose-existing-btn {
    flex: 1;
    padding: 15px;
    border-radius: 8px;
    text-align: center;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.SettingsForm .Prop.Img .upload-box {
    border: 2px dashed #444;
    color: #888;
}
.SettingsForm .Prop.Img .upload-box:hover {
    /*background-color: #2a2a2a;*/
    background-color: var(--bg-control-hover);
    border-color: #555;
}
.SettingsForm .Prop.Img .upload-box p {
    margin: 5px 0 0 0;
    font-size: 0.9em;
}
.SettingsForm .Prop.Img .upload-box svg { /* Basic upload icon */
    width: 30px;
    height: 30px;
    fill: #888;
    margin-bottom: 5px;
}


.SettingsForm .Prop.Img .choose-existing-btn {
    /*background-color: #333;*/
    background-color: var(--bg-control);
    color: #c0c0c0;
    border: 2px solid #333; /* Make border same color as bg to maintain height */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}
.SettingsForm .Prop.Img .choose-existing-btn:hover {
    /*background-color: #404040;*/
    background-color: var(--bg-control-hover);
}
.SettingsForm .Prop.Img .choose-existing-btn p {
     margin: 5px 0 0 0;
    font-size: 0.9em;
}
.SettingsForm .Prop.Img .choose-existing-btn svg { /* Basic gallery icon */
    width: 30px;
    height: 30px;
    fill: #c0c0c0;
    margin-bottom: 5px;
}

.SettingsForm .ImgArray .Items {display: flex; flex-wrap: wrap; gap: 10px; justify-content: center;}
.SettingsForm .ImgArray .Items>.Prop {display: contents;}
.SettingsForm .ImgArray .Items>.Prop>.Var {display: contents;}

.SettingsForm .Prop.Img .SetImage {display: none; position: relative;}
.SettingsForm .Prop.Img .SetImage button.DeleteImage {position: absolute;
  left: calc(50% - 18px);
  top: 0px;
  font-size: 24px;
  width: 32px;
  height: 32px;
  cursor: pointer;
  color: var(--text-secondary);}
.SettingsForm .Prop.Img .SetImage.Full {display: block; width: fit-content; margin: 0 auto;}

.SettingsForm .Prop:last-child.Img .SetImage.Full {margin-bottom: 10px;}

.SettingsForm .Prop.Img .SetImage video {width: 100%;
  height: auto;
  max-width: 150px;
  display: block;
  /*margin: 40px auto;*/}

.SettingsForm .Prop.Img .SetImage img {
  width: 150px;
  height: 150px;
  object-fit: cover;
  display: block;
}

.SettingsForm>.Props>.Prop>.Var>.SetImage {margin: 10px auto;}

/***************************/

#Prompt .SettingsForm .SetItem .control-group {flex-direction: row; flex-wrap: wrap;}

#Prompt #Model {display: inline-block;}

#ModelsPopup {display: none; position: absolute; max-width: 600px; border-radius: 20px; top: 100px; left: 30px;
border: 2px solid var(--accent-primary); background-color: var(--bg-primary);}
#ModelsPopup>.Close {width: 32px; height: 32px; position: absolute; top: 10px; right: 10px; cursor: pointer; border-radius: 10px;}
#ModelsPopup>.Close:hover {transform: translateY(-2px) scale(1.03);  box-shadow: 0 0 20px rgba(var(--accent-secondary-rgb), 0.6), 0 0 35px rgba(var(--accent-primary-rgb), 0.4);}

#ModelsPopup>.Content {padding: 50px 20px 20px 20px;}
#ModelsPopup>.Content>ul {list-style-position: inside;}
#ModelsPopup>.Content>ul>li {list-style: none; cursor: pointer;}

/******************************************/

#Results .Item.Error .PromptTitle {color: var(--text-secondary); font-weight: bold; margin-bottom: 8px;}
#Results .Item.Error .Prompt {color: var(--text-primary); max-height: 200px; overflow: auto; margin-bottom: 20px;}
#Results .Item.Error .Error {color: red; margin-bottom: 8px;}
#Results .Item.Error {font-size: 14px; padding: 40px; border: 1px dotted red; box-sizing: border-box; border-radius: 8px;}

#Results .Item.Error .Buttons {margin-bottom: 20px;}
#Results .Item.Error .Buttons button {border: 1px solid red; padding: 6px 20px; background-color: var(--bg-control); color: var(--text-secondary); border-radius: 8px; cursor: pointer;}
#Results .Item.Error .Buttons button:hover {transform: translateY(-2px);}


/*#Results .Item .Wmsg {font-size: 14px;}
#Results .Item.Waiting {background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNjQiIGhlaWdodD0iNjQiIHZpZXdCb3g9IjAgMCA2NCA2NCIgZmlsbD0ibm9uZSIKICAgIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CiAgPGc+CiAgICA8ZyB0cmFuc2Zvcm09InRyYW5zbGF0ZSgzMiwzMikiPgogICAgICA8IS0tIDEyIGFuaW1hdGVkIGJhcnMgLS0+CiAgICAgIDxnIHRyYW5zZm9ybT0icm90YXRlKDApIj4KICAgICAgICA8cmVjdCB4PSItMyIgeT0iLTI4IiB3aWR0aD0iNiIgaGVpZ2h0PSIxMiIgcng9IjMiIGZpbGw9IiMwMENGRTgiIG9wYWNpdHk9IjAuMTUiPgogICAgICAgICAgPGFuaW1hdGUgYXR0cmlidXRlTmFtZT0ib3BhY2l0eSIgdmFsdWVzPSIxOzAuMTU7MC4xNTswLjE1OzAuMTU7MC4xNTswLjE1OzAuMTU7MC4xNTswLjE1OzAuMTU7MC4xNSIga2V5VGltZXM9IjA7MC4wODM7MC4xNjY7MC4yNTswLjMzMzswLjQxNjswLjU7MC41ODM7MC42NjY7MC43NTswLjgzMzsxIiBkdXI9IjFzIiByZXBlYXRDb3VudD0iaW5kZWZpbml0ZSIgLz4KICAgICAgICA8L3JlY3Q+CiAgICAgIDwvZz4KICAgICAgPGcgdHJhbnNmb3JtPSJyb3RhdGUoMzApIj4KICAgICAgICA8cmVjdCB4PSItMyIgeT0iLTI4IiB3aWR0aD0iNiIgaGVpZ2h0PSIxMiIgcng9IjMiIGZpbGw9IiMwMENGRTgiIG9wYWNpdHk9IjAuMTUiPgogICAgICAgICAgPGFuaW1hdGUgYXR0cmlidXRlTmFtZT0ib3BhY2l0eSIgdmFsdWVzPSIwLjE1OzE7MC4xNTswLjE1OzAuMTU7MC4xNTswLjE1OzAuMTU7MC4xNTswLjE1OzAuMTU7MC4xNSIga2V5VGltZXM9IjA7MC4wODM7MC4xNjY7MC4yNTswLjMzMzswLjQxNjswLjU7MC41ODM7MC42NjY7MC43NTswLjgzMzsxIiBkdXI9IjFzIiByZXBlYXRDb3VudD0iaW5kZWZpbml0ZSIgLz4KICAgICAgICA8L3JlY3Q+CiAgICAgIDwvZz4KICAgICAgPGcgdHJhbnNmb3JtPSJyb3RhdGUoNjApIj4KICAgICAgICA8cmVjdCB4PSItMyIgeT0iLTI4IiB3aWR0aD0iNiIgaGVpZ2h0PSIxMiIgcng9IjMiIGZpbGw9IiMwMENGRTgiIG9wYWNpdHk9IjAuMTUiPgogICAgICAgICAgPGFuaW1hdGUgYXR0cmlidXRlTmFtZT0ib3BhY2l0eSIgdmFsdWVzPSIwLjE1OzAuMTU7MTswLjE1OzAuMTU7MC4xNTswLjE1OzAuMTU7MC4xNTswLjE1OzAuMTU7MC4xNSIga2V5VGltZXM9IjA7MC4wODM7MC4xNjY7MC4yNTswLjMzMzswLjQxNjswLjU7MC41ODM7MC42NjY7MC43NTswLjgzMzsxIiBkdXI9IjFzIiByZXBlYXRDb3VudD0iaW5kZWZpbml0ZSIgLz4KICAgICAgICA8L3JlY3Q+CiAgICAgIDwvZz4KICAgICAgPGcgdHJhbnNmb3JtPSJyb3RhdGUoOTApIj4KICAgICAgICA8cmVjdCB4PSItMyIgeT0iLTI4IiB3aWR0aD0iNiIgaGVpZ2h0PSIxMiIgcng9IjMiIGZpbGw9IiMwMENGRTgiIG9wYWNpdHk9IjAuMTUiPgogICAgICAgICAgPGFuaW1hdGUgYXR0cmlidXRlTmFtZT0ib3BhY2l0eSIgdmFsdWVzPSIwLjE1OzAuMTU7MC4xNTsxOzAuMTU7MC4xNTswLjE1OzAuMTU7MC4xNTswLjE1OzAuMTU7MC4xNSIga2V5VGltZXM9IjA7MC4wODM7MC4xNjY7MC4yNTswLjMzMzswLjQxNjswLjU7MC41ODM7MC42NjY7MC43NTswLjgzMzsxIiBkdXI9IjFzIiByZXBlYXRDb3VudD0iaW5kZWZpbml0ZSIgLz4KICAgICAgICA8L3JlY3Q+CiAgICAgIDwvZz4KICAgICAgPGcgdHJhbnNmb3JtPSJyb3RhdGUoMTIwKSI+CiAgICAgICAgPHJlY3QgeD0iLTMiIHk9Ii0yOCIgd2lkdGg9IjYiIGhlaWdodD0iMTIiIHJ4PSIzIiBmaWxsPSIjMDBDRkU4IiBvcGFjaXR5PSIwLjE1Ij4KICAgICAgICAgIDxhbmltYXRlIGF0dHJpYnV0ZU5hbWU9Im9wYWNpdHkiIHZhbHVlcz0iMC4xNTswLjE1OzAuMTU7MC4xNTsxOzAuMTU7MC4xNTswLjE1OzAuMTU7MC4xNTswLjE1OzAuMTUiIGtleVRpbWVzPSIwOzAuMDgzOzAuMTY2OzAuMjU7MC4zMzM7MC40MTY7MC41OzAuNTgzOzAuNjY2OzAuNzU7MC44MzM7MSIgZHVyPSIxcyIgcmVwZWF0Q291bnQ9ImluZGVmaW5pdGUiIC8+CiAgICAgICAgPC9yZWN0PgogICAgICA8L2c+CiAgICAgIDxnIHRyYW5zZm9ybT0icm90YXRlKDE1MCkiPgogICAgICAgIDxyZWN0IHg9Ii0zIiB5PSItMjgiIHdpZHRoPSI2IiBoZWlnaHQ9IjEyIiByeD0iMyIgZmlsbD0iIzAwQ0ZFOCIgb3BhY2l0eT0iMC4xNSI+CiAgICAgICAgICA8YW5pbWF0ZSBhdHRyaWJ1dGVOYW1lPSJvcGFjaXR5IiB2YWx1ZXM9IjAuMTU7MC4xNTswLjE1OzAuMTU7MC4xNTsxOzAuMTU7MC4xNTswLjE1OzAuMTU7MC4xNTswLjE1IiBrZXlUaW1lcz0iMDswLjA4MzswLjE2NjswLjI1OzAuMzMzOzAuNDE2OzAuNTswLjU4MzswLjY2NjswLjc1OzAuODMzOzEiIGR1cj0iMXMiIHJlcGVhdENvdW50PSJpbmRlZmluaXRlIiAvPgogICAgICAgIDwvcmVjdD4KICAgICAgPC9nPgogICAgICA8ZyB0cmFuc2Zvcm09InJvdGF0ZSgxODApIj4KICAgICAgICA8cmVjdCB4PSItMyIgeT0iLTI4IiB3aWR0aD0iNiIgaGVpZ2h0PSIxMiIgcng9IjMiIGZpbGw9IiMwMENGRTgiIG9wYWNpdHk9IjAuMTUiPgogICAgICAgICAgPGFuaW1hdGUgYXR0cmlidXRlTmFtZT0ib3BhY2l0eSIgdmFsdWVzPSIwLjE1OzAuMTU7MC4xNTswLjE1OzAuMTU7MC4xNTsxOzAuMTU7MC4xNTswLjE1OzAuMTU7MC4xNSIga2V5VGltZXM9IjA7MC4wODM7MC4xNjY7MC4yNTswLjMzMzswLjQxNjswLjU7MC41ODM7MC42NjY7MC43NTswLjgzMzsxIiBkdXI9IjFzIiByZXBlYXRDb3VudD0iaW5kZWZpbml0ZSIgLz4KICAgICAgICA8L3JlY3Q+CiAgICAgIDwvZz4KICAgICAgPGcgdHJhbnNmb3JtPSJyb3RhdGUoMjEwKSI+CiAgICAgICAgPHJlY3QgeD0iLTMiIHk9Ii0yOCIgd2lkdGg9IjYiIGhlaWdodD0iMTIiIHJ4PSIzIiBmaWxsPSIjMDBDRkU4IiBvcGFjaXR5PSIwLjE1Ij4KICAgICAgICAgIDxhbmltYXRlIGF0dHJpYnV0ZU5hbWU9Im9wYWNpdHkiIHZhbHVlcz0iMC4xNTswLjE1OzAuMTU7MC4xNTswLjE1OzAuMTU7MC4xNTsxOzAuMTU7MC4xNTswLjE1OzAuMTUiIGtleVRpbWVzPSIwOzAuMDgzOzAuMTY2OzAuMjU7MC4zMzM7MC40MTY7MC41OzAuNTgzOzAuNjY2OzAuNzU7MC44MzM7MSIgZHVyPSIxcyIgcmVwZWF0Q291bnQ9ImluZGVmaW5pdGUiIC8+CiAgICAgICAgPC9yZWN0PgogICAgICA8L2c+CiAgICAgIDxnIHRyYW5zZm9ybT0icm90YXRlKDI0MCkiPgogICAgICAgIDxyZWN0IHg9Ii0zIiB5PSItMjgiIHdpZHRoPSI2IiBoZWlnaHQ9IjEyIiByeD0iMyIgZmlsbD0iIzAwQ0ZFOCIgb3BhY2l0eT0iMC4xNSI+CiAgICAgICAgICA8YW5pbWF0ZSBhdHRyaWJ1dGVOYW1lPSJvcGFjaXR5IiB2YWx1ZXM9IjAuMTU7MC4xNTswLjE1OzAuMTU7MC4xNTswLjE1OzAuMTU7MC4xNTsxOzAuMTU7MC4xNTswLjE1IiBrZXlUaW1lcz0iMDswLjA4MzswLjE2NjswLjI1OzAuMzMzOzAuNDE2OzAuNTswLjU4MzswLjY2NjswLjc1OzAuODMzOzEiIGR1cj0iMXMiIHJlcGVhdENvdW50PSJpbmRlZmluaXRlIiAvPgogICAgICAgIDwvcmVjdD4KICAgICAgPC9nPgogICAgICA8ZyB0cmFuc2Zvcm09InJvdGF0ZSgyNzApIj4KICAgICAgICA8cmVjdCB4PSItMyIgeT0iLTI4IiB3aWR0aD0iNiIgaGVpZ2h0PSIxMiIgcng9IjMiIGZpbGw9IiMwMENGRTgiIG9wYWNpdHk9IjAuMTUiPgogICAgICAgICAgPGFuaW1hdGUgYXR0cmlidXRlTmFtZT0ib3BhY2l0eSIgdmFsdWVzPSIwLjE1OzAuMTU7MC4xNTswLjE1OzAuMTU7MC4xNTswLjE1OzAuMTU7MC4xNTsxOzAuMTU7MC4xNSIga2V5VGltZXM9IjA7MC4wODM7MC4xNjY7MC4yNTswLjMzMzswLjQxNjswLjU7MC41ODM7MC42NjY7MC43NTswLjgzMzsxIiBkdXI9IjFzIiByZXBlYXRDb3VudD0iaW5kZWZpbml0ZSIgLz4KICAgICAgICA8L3JlY3Q+CiAgICAgIDwvZz4KICAgICAgPGcgdHJhbnNmb3JtPSJyb3RhdGUoMzAwKSI+CiAgICAgICAgPHJlY3QgeD0iLTMiIHk9Ii0yOCIgd2lkdGg9IjYiIGhlaWdodD0iMTIiIHJ4PSIzIiBmaWxsPSIjMDBDRkU4IiBvcGFjaXR5PSIwLjE1Ij4KICAgICAgICAgIDxhbmltYXRlIGF0dHJpYnV0ZU5hbWU9Im9wYWNpdHkiIHZhbHVlcz0iMC4xNTswLjE1OzAuMTU7MC4xNTswLjE1OzAuMTU7MC4xNTswLjE1OzAuMTU7MC4xNTsxOzAuMTUiIGtleVRpbWVzPSIwOzAuMDgzOzAuMTY2OzAuMjU7MC4zMzM7MC40MTY7MC41OzAuNTgzOzAuNjY2OzAuNzU7MC44MzM7MSIgZHVyPSIxcyIgcmVwZWF0Q291bnQ9ImluZGVmaW5pdGUiIC8+CiAgICAgICAgPC9yZWN0PgogICAgICA8L2c+CiAgICAgIDxnIHRyYW5zZm9ybT0icm90YXRlKDMzMCkiPgogICAgICAgIDxyZWN0IHg9Ii0zIiB5PSItMjgiIHdpZHRoPSI2IiBoZWlnaHQ9IjEyIiByeD0iMyIgZmlsbD0iIzAwQ0ZFOCIgb3BhY2l0eT0iMC4xNSI+CiAgICAgICAgICA8YW5pbWF0ZSBhdHRyaWJ1dGVOYW1lPSJvcGFjaXR5IiB2YWx1ZXM9IjAuMTU7MC4xNTswLjE1OzAuMTU7MC4xNTswLjE1OzAuMTU7MC4xNTswLjE1OzAuMTU7MC4xNTsxIiBrZXlUaW1lcz0iMDswLjA4MzswLjE2NjswLjI1OzAuMzMzOzAuNDE2OzAuNTswLjU4MzswLjY2NjswLjc1OzAuODMzOzEiIGR1cj0iMXMiIHJlcGVhdENvdW50PSJpbmRlZmluaXRlIiAvPgogICAgICAgIDwvcmVjdD4KICAgICAgPC9nPgogICAgPC9nPgogIDwvZz4KPC9zdmc+DQo=)
center center no-repeat; border-radius: 4px; height: 200px; padding: 20px;
}
*/

#Results .Item.Waiting {}
#Results .Item.Waiting>video {width: 100%; object-fit: contain;}
#Results .Item.Waiting>.G {box-sizing: border-box; position: absolute; z-index: 1; height: 40px; left: 30px; top: calc(50% - 20px); right: 30px; border-radius: 4px; overflow: hidden;
  border: 2px solid var(--accent-secondary); background-color: rgba(0,0,0, 0.6); }
#Results .Item.Waiting>.G>.P {box-sizing: border-box; position: absolute; left:0; top: 0; bottom: 0;
border-right: 2px solid var(--accent-secondary); background-color: var(--accent-secondary); }
}

/******************************************/

.gallery-container {
    column-count: 4; /* Adjust number of columns */
    column-gap: 0px; /* SEAMLESS: No gap between columns */
    padding: 0px;    /* SEAMLESS: No padding around the gallery */
    width: 100%;
    box-sizing: border-box;
    margin-top: 60px;
}

.gallery-container>.Item {
    display: inline-block;
    width: 100%;
    margin-bottom: 0px; /* SEAMLESS: No vertical gap between items */
    break-inside: avoid-column;
    overflow: hidden;
    position: relative;
    background-color: #161b22; /* Fallback bg for loading, slightly lighter */
}

.gallery-container>.Item img,
.gallery-container>.Item video {
    display: block;
    width: 100%;
    height: auto; /* Maintain aspect ratio */
    transition: transform 0.3s ease;
    vertical-align: middle; /* Aligns media if there's any unexpected space */
}

/* Optional: Hover effect - scales the media, not the item, to avoid affecting layout */
.gallery-container>.Item:hover img,
.gallery-container>.Item:hover video {
    transform: scale(1.03);
}

/* --- Responsive Adjustments for Columns --- */
@media (max-width: 1200px) {
    .gallery-container {
        column-count: 3;
    }
}

@media (max-width: 800px) {
    .gallery-container {
        column-count: 2;
    }
}

@media (max-width: 500px) {
    .gallery-container {
        column-count: 1;
    }
}


.gallery-container>.Item .F {position: absolute; right: 0; top: 0; cursor: pointer; z-index: 10;}
.gallery-container>.Item .F>i {color: aqua; font-size: 2em;}

/******************************************/

.gallery-container-c {display: flex; padding: 0px; width: 100%; box-sizing: border-box; margin-top: 40px;scroll-margin-top:70px;}
.gallery-container-c>.col {box-sizing: border-box; flex-basis: 10%; flex-grow: 1; flex-shrink: 0; overflow:hidden;}
.gallery-container-c>.col>.Item {position: relative; background-color: #161b22;}
.gallery-container-c>.col>.Item .Item{position: relative; background-color: #161b22;}
.gallery-container-c>.col>.Item:not(.Waiting):not(.Error) {cursor: pointer;}

.gallery-container-c>.col>.Item img,
.gallery-container-c>.col>.Item video,
.gallery-container-c>.col>.Item audio,
.gallery-container-c>.col>.Item model-viewer {
    display: block;
    width: 100%;
    height: auto; /* Maintain aspect ratio */
    transition: transform 0.3s ease;
    vertical-align: middle; /* Aligns media if there's any unexpected space */
}

/* Optional: Hover effect - scales the media, not the item, to avoid affecting layout */
.gallery-container-c>.col>.Item:hover img,
.gallery-container-c>.col>.Item:hover video,
.gallery-container-c>.col>.Item:hover audio,
.gallery-container-c>.col>.Item model-viewer{
    transform: scale(1.03);
}

.gallery-container-c>.col>.Item model-viewer {box-sizing: border-box; padding: 20px 0; height: 200px;}

.gallery-container-c>.col>.Item audio {padding-top: 80px; background: no-repeat transparent; background-size: cover;}
.gallery-container-c>.col>.Item audio.B0 {background-image: url(/images/sound1.webp);}
.gallery-container-c>.col>.Item audio.B1 {background-image: url(/images/sound2.webp);}
.gallery-container-c>.col>.Item audio.B2 {background-image: url(/images/sound3.webp);}


.gallery-container-c>.col>.Item .Marks {position: absolute; right: 5px; top: 5px; left: 5px; cursor: pointer; z-index: 10; display: flex; justify-content: flex-start;}
.gallery-container-c>.col>.Item .Marks>* {display: block;}
.gallery-container-c>.col>.Item .Marks>*.F {flex-grow: 1;}
.gallery-container-c>.col>.Item .Marks>*+* {/*margin-top: 6px;*/ margin-left: 8px;}

.gallery-container-c>.col>.Item .Marks>* i:hover {color: #fff;}
.gallery-container-c>.col>.Item .Marks>* i {color: gray; font-size: 1.8em;}
.gallery-container-c>.col>.Item .Marks>*.F i {color: aqua; font-size: 1.8em;}

.gallery-container-c>.col>.Item .Marks.Bottom {bottom: 5px; top: unset;}

.gallery-container-c>.col>.Item .Play {background-color: #00ffff80; color: #ffffffd0; font-size: 36px; line-height: 64px; position: absolute; width: 64px; height: 64px;
text-align: center; z-index: 10; left: calc(50% - 32px); top: calc(50% - 32px); border-radius: 32px;
padding-left: 4px;}

@media (hover: hover) {
    .gallery-container-c>.col>.Item:hover .Play {display: none;}
}


.gallery-container-c>.col>.Item .Loading, #QList .Item .Loading {color: #00ffff80; font-size: 60px; line-height: 64px; position: absolute; width: 64px; height: 64px;
text-align: center; z-index: 10; left: calc(50% - 32px); top: calc(50% - 32px); border-radius: 32px;
padding-left: 4px; display: none;}


/******************************************/


.Hidden {display: none;}

/* Overlay */
.Overlay {
  z-index: 1010;
  width: 10000px;
  height: 10000px;
  position: fixed;
  top: 0;
  left: 0;
  background: black;
  opacity: 0.5;
  filter: alpha(opacity=70);
  display: none;
}
/* End of Overlay */

/* Loader */
.Loader {
  display:none;
  position: fixed;
  z-index:1500;
  right: 20px;
  top: 50%;
  margin-top:-43px;
  width: 80px;
  height: 50px;
  --g1:conic-gradient(from  90deg at left   3px top   3px,#0000 90deg,var(--accent-secondary) 0);
  --g2:conic-gradient(from -90deg at bottom 3px right 3px,#0000 90deg,var(--accent-secondary) 0);
  background:var(--g1),var(--g1),var(--g1), var(--g2),var(--g2),var(--g2);
  background-position: left,center,right;
  background-repeat: no-repeat;
  animation: l9 1s infinite;
}
@keyframes l9 {
  0%   {background-size:20px 50% ,20px 50% ,20px 50%}
  25%  {background-size:20px 100%,20px 50% ,20px 50%}
  50%  {background-size:20px 50% ,20px 100%,20px 50%}
  75%  {background-size:20px 50% ,20px 50% ,20px 100%}
  100% {background-size:20px 50% ,20px 50% ,20px 50%}
}
/* End of Loader */

#Filter {
  background-color: var(--bg-control);
  border: 1px solid var(--border-color);
  color: var(--text-primary);
  padding: 7px 10px 7px 16px;
  border-radius: 8px;
  font-size: 0.95em;
  transition: all 0.3s ease;
  text-align: left;
  display: flex;
  align-items: center;
}

#Filter>input {background-color: transparent; padding: 5px; color: var(--text-primary); border: none;}
#Filter>button {margin-right: 10px; color: var(--accent-secondary); font-size: 1.6em; cursor: pointer; background-color: transparent; border: none; outline: none;}
#Filter>input:focus, #Filter>input:active {border: none; outline: none;}

#objectPopupModal .modal-content {max-width: unset; max-height: unset; width: 98%; height: 98%;}
#objectPopupModal .modal-content .modal-header {background-color: var(--bg-control-hover); border-radius: 10px; margin-bottom: 10px;}

#objectPopupModal .modal-content .modal-header  h2 {padding-right: 20px; border-right: var(--text-primary) 2px dotted;}
#objectPopupModal .modal-content .modal-header .Tools {flex-grow: 1; margin: 0 20px;}


#objectPopupModal .modal-content .modal-header .Tools>a,
#objectPopupModal .modal-content .modal-header .Tools>span{background: none;
  border: none;
  display: inline-block;
  font-size: 1.6em;
  color: var(--text-secondary);
  cursor: pointer;
  transition: color 1s ease;
  line-height: 1;
  padding: 0 5px;}
  
#objectPopupModal .modal-content .modal-header .Tools>a:hover,
#objectPopupModal .modal-content .modal-header .Tools>span:hover{color: #fff; transform: translateY(-2px); }

#objectPopupModal .modal-content .modal-header .Tools>span.disabled {color: gray;}
  
#objectPopupModal .modal-body {overflow-y: hidden; flex-grow: 0; flex-basis: 90%; background-color: #2a2f4dA0; display: flex; justify-content: center;}

#objectPopupModal #objectPopupPlace {/*width: 100%; */height: 100%;}

#objectPopupModal[data-tag="MODEL-VIEWER"] #objectPopupPlace {width: 100%;}

#objectPopupModal #objectPopupPlace img.Obj {width: 100%; height: 100%; object-fit: contain; object-position: top; border-radius: 10px; padding: 10px;}
#objectPopupModal #objectPopupPlace img.Obj.HZ {height: auto;}
#objectPopupModal #objectPopupPlace img.Obj.VR {width: auto;}
#objectPopupModal #objectPopupPlace video.Obj {width: 100%; height: 100%; object-fit: contain; object-position: top; border-radius: 10px; padding: 10px;}
#objectPopupModal #objectPopupPlace model-viewer.Obj {width: 100%; height: 100%; border-radius: 10px; padding: 10px;}
#objectPopupModal #objectPopupInfo {padding: 10px; min-width: 15%;}
#objectPopupModal.EI #objectPopupInfo {display: none;}
#objectPopupModal #objectPopupInfo .Model {margin-bottom: 20px; color: var(--text-primary); font-weight: 500;}
#objectPopupModal #objectPopupInfo .Prompt {color: var(--text-secondary);}

#objectPopupModal .modal-content .modal-close-btn {position: static;}

@media (orientation: portrait) {
  #objectPopupModal #objectPopupPlace img.Obj.HZ {width: 100%; height: auto;}
  #objectPopupModal #objectPopupPlace img.Obj.VR {width: 100%; height: 100%;}
}

@media (min-width: 741px) and (orientation: landscape) {
  #objectPopupModal #objectPopupInfo {max-width: 30%;}  
}

@media (max-width: 740px) {
  #objectPopupModal .modal-body {flex-direction: column; overflow-y: scroll;}
  #objectPopupModal #objectPopupInfo {order: 1;  max-height: 50%; overflow: scroll; }
  #objectPopupModal #objectPopupPlace {order: 2;}
}