.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; 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;*/}
#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: 150px; 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: 100%;}

#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%;}
}

@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;}

#Prompt .SettingsForm .SetImage {display: flex; /*flex-wrap: wrap;*/ margin-top: 10px;}
#Prompt .SettingsForm .SetImage 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 .SetImage span {font-size: 14px;}
#Prompt .SettingsForm .SetImage input[type="file"] {border: none;}
#Prompt .SettingsForm .SetImage 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 .SetImage .control-group {flex-direction: row; flex-wrap: wrap;}
#Prompt .SettingsForm .SetImage.Full .control-group {flex-direction: column; flex-wrap: wrap;}

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

#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 {color: red; font-size: 14px; padding: 40px;}
/*#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;}

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

.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: 60px;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:not(.Waiting):not(.Error) {cursor: pointer;}

.gallery-container-c>.col>.Item img,
.gallery-container-c>.col>.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-c>.col>.Item:hover img,
.gallery-container-c>.col>.Item:hover video {
    transform: scale(1.03);
}

.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>*+* {/*margin-top: 6px;*/ margin-left: auto;}

.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;}
}

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


.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 */