=CustomBlocks.php overhaul relatively complete. Also refactored the gallery...

Jake Vanderwerf

5 days ago 75a097a018a0090f5902758353c578fce4aa2a25

 src/forms/style.scss

New file
@@ -0,0 +1,5572 @@
//:target {
// outline: none!important;
// padding: 0!important;
//}
//:root {
// --height: 3rem;
//}
//body:has(#theme-switcher:checked) {
//
//}
//
//.dashboard h1:first-of-type {
// margin-top: 0!important;
//}
//main > footer {
// max-width: 100%!important;
// position: fixed;
// z-index: 20;
// bottom: 0;
// left: 0;
// right: 0;
// width: 100%;
// margin: 4rem 0 0 0!important;
// height: var(--btn);
// padding: 0;
// background-color: rgb(var(--base));
// box-shadow: rgba(var(--base),var(--op-45)) var(--shdw);
//}
//main>* {
// max-width: min(768px, 90vw)!important;
// margin: 0 auto!important;
//}
//main h1 {
// margin: 0!important;
// font-size: var(--txt-large);
//}
//main h1 + p + h2 {
// font-size: var(--txt-medium);
// text-transform: none;
// margin: 0!important;
//}
//.replace {
// max-width: 90vw!important;
// margin: 1rem auto!important;
//}
//
//.dash .replace {
// text-align: center;
//}
//.dash input {
// text-align: center;
//}
//.dash .true-false {
// display: flex;
// justify-content: center;
// margin: 0;
//}
//.dash button[type=submit] {
// width: 50%;
// margin: 1rem auto;
//}
//
//
//form h2 {
// margin: .5rem 0 1.5rem!important;
//}
//
//.dashboard-nav {
// height: var(--btn);
// max-width:100vw;
// padding: 0 .5rem;
//}
//.dashboard-nav ul {
// height: var(--btn);
// overflow-x: auto;
//}
//.dashboard-nav li + li:before {
// display: none!important;
//}
//.dashboard-nav a {
// height: var(--btn);
// min-width: var(--btn);
// padding: 0 .75rem;
// color: rgb(var(--contrast))!important;
//}
//.dashboard-nav a .icon {
// margin: 0;
//}
//.dashboard-nav a span {
// display: none;
//}
//.dashboard-nav .current a:hover,
//.dashboard-nav a:hover {
// background-color: rgb(var(--action-0))!important;
// color: var(--action-contrast)!important;
//}
//.dashboard-nav .current a {
// background-color: rgb(var(--base-100))!important;
// color: rgb(var(--contrast))!important;
//}
//.dashboard-nav .current a span {
// display: block;
//}
//
//
//
///* Loading states */
//main {
// opacity: 1;
// transition: opacity .3s ease-in-out;
// padding-bottom: 7rem;
// min-height: calc(100vh - 12rem);
//}
//
//main.transitioning {
// opacity: 0;
//}
//.loading {
// opacity: .7;
//}
//
//
///*Upload overlay*/
//.loading-overlay {
// position: fixed;
// top: 0;
// left: 0;
// right: 0;
// bottom: 0;
// background-color: rgba(var(--base),var(--op-4));
// display: flex;
// align-items: center;
// justify-content: center;
// opacity: 0;
// visibility: hidden;
// transition: opacity .3s ease, visibility .3s ease;
// z-index: 9999;
//}
//
//.loading-overlay.active {
// opacity: 1;
// visibility: visible;
//}
//
//.loading-overlay .wrapper {
// background-color: rgb(var(--base));
// padding: 2rem;
// border-radius: 8px;
// text-align: center;
// max-width: 90%;
// width: 400px;
//}
//
//.upload-spinner {
// width: 50px;
// height: 50px;
// border: 5px solid rgb(var(--base-200));
// border-top: 5px solid rgb(var(--action-0));
// border-radius: 50%;
// margin: 0 auto 1rem;
// animation: spin 1s linear infinite;
//}
//
//.upload-status h3 {
// margin: 0 0 .5rem;
// color: rgb(var(--contrast));
//}
//
//.upload-message {
// margin: 0;
// color: rgb(var(--contrast-100));
// font-size: var(--txt-x-small);
//}
//
//
//
///* Optional: Add a pulsing effect to the text */
//.upload-message {
// animation: flicker 2s infinite;
//}
//
//@keyframes flicker {
// 0% { opacity: .6; }
// 50% { opacity: 1; }
// 100% { opacity: .6; }
//}
//
//.form-section {
// max-height: 0;
// transform: scale(0);
// visibility: hidden;
//}
//form:not(:has(.form-section.active)) .form-section:first-of-type,
//.form-section.active {
// max-height: fit-content;
// transform: scale(1);
// visibility: visible;
//}
//
//
//
//.form-sections {
// --height: fit-content;
// position: fixed;
// bottom: 3rem;
// left: 0;
// right: 0;
// background-color: rgb(var(--base-100));
// box-shadow: rgba(var(--base),var(--op-45)) var(--shdw);
// z-index: 10;
//}
//.form-sections ul {
// gap: 0;
//}
//.form-sections li {
// width: 50%;
//}
//
//.form-sections a:visited,
//.form-sections a {
// padding: .25rem;
// width: 100%;
// color: rgb(var(--contrast));
//}
//.replace:not(:has(.form-section.active)) .form-sections li:first-of-type a,
//.current a {
// background-color: rgb(var(--base-200));
// color: rgb(var(--contrast));
//}
//.form-sections .icon {
// margin: 0;
//}
//@media (min-width: 768px){
// .form-sections ul {
//    flex-wrap: nowrap;
// }
// .form-sections li {
//    width: 100%;
// }
//}
//
//.submit-container {
// position: fixed;
// z-index: 20;
//}
//.submit-container button {
// padding: 0;
// width: 3rem;
// height: 3rem;
// color: rgb(var(--contrast-200));
// background-color: rgb(var(--base-200));
// justify-content: center;
// border: 3px solid transparent;
//}
//.submit-container .save-popup {
// position: absolute;
// z-index: -1;
// top: calc(50% - (1.875rem / 2));
// font-size: var(--txt-x-small);
// background-color: rgb(var(--action-0));
// color: var(--action-contrast);
// padding: .25rem .5rem;
// border-radius: 4px;
// white-space: nowrap;
// visibility: hidden;
// transition: all var(--trans-base);
// opacity: 0;
//}
//.submit-container .icon {
// --w: 2em;
//}
//.save-popup::before {
// content: '';
// position: absolute;
// top: 50%;
// transform: translateY(-50%);
// border-top: .5rem solid transparent;
// border-bottom: .5rem solid transparent;
//}
//.save-popup.show {
// opacity: 1;
// visibility: visible;
//}
//
//@media (max-width: 767px){
// .submit-container {
//    top: 3.5rem;
//    right: .5rem;
// }
// .save-popup {
//    right: 0;
// }
// .save-popup:before{
//    right: -.25rem;
//    border-left: .5rem solid rgb(var(--action-0));
// }
// .save-popup.show {
//    right: calc(100% + .5rem);
// }
//}
//@media (min-width: 768px){
// .submit-container {
//    bottom: 6rem;
//    left: .5rem;
// }
// .save-popup {
//    left: 0;
// }
// .save-popup:before{
//    left: -.25rem;
//    border-right: .5rem solid rgb(var(--action-0));
// }
// .save-popup.show {
//    left: calc(100% + .5rem);
// }
//}
//
//.autosaving span.save,
//.autosaving button[type=submit] {
// border-color: rgb(var(--base-200));
// border-top-color: rgb(var(--action-0));
// border-bottom-color: rgb(var(--action-50));
// border-radius: 50%;
// color: rgb(var(--contrast-200));
// transition: color .25s var(--trans-t) var(--trans-fn);
// transition-property: color, background-color, border;
// animation: spin 1s linear infinite;
//}
//.autosaving .submit-container {
// animation: pulse 1s linear infinite;
//}
//
//@keyframes spin {
// 0% { transform: rotate(0deg); }
// 100% { transform: rotate(360deg); }
//}
//@keyframes pulse {
// 0% {
//    transform: scale(.85);
//    opacity: .6;
// }
// 50% {
//    transform:scale(1);
//    opacity: 1; }
// 100% {
//    transform: scale(.85);
//    opacity: .6; }
//}
//
//.item-link[href=""]{
// display: none;
//}
//.item-link {
// position: fixed;
// bottom: 5rem;
// right: 1.5rem;
// text-transform: uppercase;
// color: rgb(var(--action-0));
// background-color: rgb(var(--base));
// border-radius: 4px;
// padding: .25rem .5rem;
// box-shadow: rgba(var(--base),var(--op-45)) var(--shdw-subtle);
//}
//.field {
// margin: 3rem .5rem;
//}
//.field:has([required]) label::after {
// content: 'required';
// background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" fill="%23B7332E" viewBox="0 0 256 256"><path d="M214.86,180.12a8,8,0,0,1-11,2.74L136,142.13V216a8,8,0,0,1-16,0V142.13L52.12,182.86a8,8,0,1,1-8.23-13.72L112.45,128,43.89,86.86a8,8,0,1,1,8.23-13.72L120,113.87V40a8,8,0,0,1,16,0v73.87l67.88-40.73a8,8,0,1,1,8.23,13.72L143.55,128l68.56,41.14A8,8,0,0,1,214.86,180.12Z"></path></svg>');
// display: inline-block;
// background-position: left center;
// background-size: 1.2em;
// padding-left: 1.3em;
// background-repeat: no-repeat;
// font-weight: 100;
// text-transform: none;
// font-size: .75em;
// vertical-align: super;
//
//}
//.field:has([required]) label {
// position: relative;
//}
//.repeater-items .field {
// margin: 1rem 0;
//}
//.taxonomy .field-group-header {
// display: flex;
// justify-content: space-between;
//}
//
//.add-item-btn {
// padding: .5em;
// background: rgb(var(--base-100));
// border: 1px solid rgb(var(--contrast-200));
// border-radius: .25rem;
// cursor: pointer;
// font-size: .875rem;
//}
//.add-item-btn .icon {
// --w: 1.5em;
//}
//
//.add-item-btn:hover {
// background: rgb(var(--base-200));
//}
//summary .type-label {
// display: flex;
// align-items: center;
// gap: 1rem;
//}
//summary .type-label .icon {
// position: relative;
// top: -.25em;
//}
//
///** Tabs **/
//.tabs {
// display: flex;
// margin-bottom: 1.5rem;
// border-bottom: 2px solid rgb(var(--base-200));
// flex-wrap: wrap;
//}
//.tabs.parent {
// max-width: 100vw;
// background-color: rgb(var(--base));
// padding: .5rem;
// width: 100vw;
// position: relative;
// left: -2.1rem;
// margin: 1rem 0;
//}
//.tab-content h2 {
// font-size: var(--txt-large);
// margin: 0!important;
//}
//.tab-content .tab-navigation,
//.tab-content button[type=submit] {
// display: inline-flex;
// width: 48%;
// background-color: rgb(var(--action-200));
// color: rgb(var(--contrast-200));
//}
//
//.tab-navigation.next {
// display: flex;
// margin-left: auto;
//}
//.tab-content .tab-navigation + button {
// display: inline-flex;
// margin-left: 3%;
//}
//
//.tabs > button {
// padding: .75rem 1.5rem;
// border-radius: 0;
// border: none;
// background: none;
// font-size: 1.1rem;
// font-weight: bold;
// letter-spacing: .05em;
// text-transform: uppercase;
// cursor: pointer;
// position: relative;
// color: inherit;
//}
//.tabs > button h2 {
// font-size: 1.1rem;
// line-height: 1;
// margin: 0!important;
//}
//.tabs > button:hover,
//.tabs > button:focus {
// background-color: rgb(var(--base-200));
//}
//.tabs > button::after {
// content: '';
// position: absolute;
// bottom: -2px;
// left: 0;
// width: 0;
// height: 3px;
// background-color: rgb(var(--action-50));
// transition: width .3s;
//}
//.tabs > button.active::after {
// width: 100%;
//}
//
//.tabs > button.add-item-btn {
// margin-left: auto;
// background-color: rgb(var(--action-50));
// border-radius: 4px;
// padding: .5em;
// font-weight: normal;
// border: 1px solid rgb(var(--action-50));
//}
//.tabs > button.add-item-btn:focus,
//.tabs > button.add-item-btn:hover {
// background-color: rgb(var(--base));
//}
//
//.type-filter:not(.active) span:not(.count){
// display: none;
//}
//.type-filter:not(.active):hover span:not(.count){
// display: block;
//}
///** News **/
//.item-grid.list-view .item.news {
// flex-direction: column;
//}
//.item.news h3 {
// font-size: var(--txt-medium);
// margin: 0!important;
//}
//.item.news summary .image {
// width: 5rem;
// background-color: rgb(var(--base-200));
// border-radius: 4px;
// aspect-ratio: 1;
//}
//.item.news summary {
// gap: 1rem;
//}
//.item.news summary .summary {
// width: 100%;
//}
//.item.news summary .header {
// display: flex;
// justify-content: space-between;
// padding: .5rem 0;
//}
//.item .vote {
// display: flex;
// justify-content: flex-end;
// align-items: center;
// gap: .5em;
// margin-top: auto;
//}
//.vote .count {
// white-space: nowrap;
//}
//.item .vote .count:nth-of-type(2) {
// margin-right: 2rem;
//}
///** Favourites **/
//.favourites-title {
// display: flex;
// justify-content: space-between;
// align-items: center;
//}
//main button {
// display: flex;
// align-items: center;
// gap: .5rem;
//}
//
//.my-lists {
// margin: .5rem 0;
//}
//
//details.uploader .file-upload-container {
// margin: 1rem var(--mr) 1rem var(--ml);
// max-width: var(--content);
//}
//details .no-items {
// text-align: center;
// font-style: italic;
// background-color: rgb(var(--base-50));
// padding: var(--p-outer);
// border-radius: var(--radius);
//}
//
//.controls {
// display: flex;
// flex-wrap: wrap;
// gap: .5rem;
// justify-content: space-between;
//}
//
//.controls label .icon + span {
// transform: scaleX(0);
// max-width: 0;
//}
//
//.type-filters:hover label:hover .icon + span,
//.controls label:hover .icon + span,
//.controls :checked + label .icon + span {
// transform: scaleX(1);
// max-width: fit-content;
//}
//.type-filters,
//.view-controls {
// display: flex;
// flex-wrap: wrap;
// gap: .5rem;
//}
//
///** Generalized Type Filters **/
//details.type-filters {
// flex-direction: column;
//}
//details.type-filters form.filters {
// flex-direction: column;
//}
//
//details.type-filters div.filters {
// flex-wrap: wrap;
//}
//
//details.type-filters .order-options {
// width: 100%;
// display: flex;
//}
//details.type-filters .order-options > div {
// display: flex;
//}
//details.type-filters .order-by {
// width: 100%;
//}
//details.type-filters .order-by .radio-group-label {
// width: 100%;
// display: flex;
// gap: 1rem;
//}
//details.type-filters label {
// display: flex;
// align-items: center;
// gap: .5rem;
//}
//
//details.type-filters label {
// display: flex;
// justify-content: center;
// align-items: center;
// padding: .35rem;
// white-space: nowrap;
// width: fit-content;
// height: fit-content;
// cursor: pointer;
// border: 1px solid rgb(var(--base-200));
// border-radius: 4px;
// font-size: .875rem;
// transition: border-color var(--trans-base);
// margin-bottom: .5rem;
//}
//.filter-toggle .icon {
// margin-right: .5rem;
//}
//details.type-filters label:hover,
//details.type-filters input:checked + label {
// background-color: var(--light-0);
// border-color: rgb(var(--action-0));
// color: rgb(var(--action-0));
//}
//details.type-filters .order-direction {
// justify-content: flex-end;
//}
//
///** Generalized Modal **/
//
///* Grid */
//.create-item {
// left: auto!important;
// right: 1rem;
// bottom: calc(var(--btn) + 1rem)!important;
//}
//body:has(.group-display:not([hidden])) button.create-item{
// display: none;
//}
//.uploader .groups,
//.item-grid {
// --padding: 0;
// padding: var(--padding);
// transition: padding var(--trans-base);
//}
//.uploader .groups,
//.item-grid:not(.list-view) {
// display: grid;
// grid-template-columns: repeat(2, 50%);
// gap: .5rem;
// margin-top: 2rem;
//}
//.item-grid.empty {
// grid-template-columns: repeat(1, 1fr)!important;
//}
//.item-grid.empty div {
// text-align: center;
// border-radius: var(--radius);
// background-color: rgb(var(--base-100));
//}
//.item-grid.empty h3 .icon {
// display: inline-flex;
// vertical-align: middle;
// margin: 0 1rem;
//}
//.uploader .group,
//.item {
// width: calc(100% - (var(--padding) * 2));
//}
//.item-grid .item {
// user-select: none;
// -webkit-user-select: none;
// -moz-user-select: none;
// -ms-user-select: none;
//}
//.item-grid .item .logo {
// --w: 100%;
// opacity: .2;
//}
///** Grid View **/
//.item-grid:not(.list-view) .item {
// display: flex;
// position: relative;
// flex-direction: column;
//}
//.item-grid:not(.list-view) button.favourite,
//.item-grid:not(.list-view) .item-select label {
// position: absolute;
// width: 3em;
// height: 3em;
// display: flex;
// justify-content: center;
// align-items: center;
// top: .125rem;
// padding: 0!important;
// border-radius: var(--radius);
// background-color: rgba(var(--base),var(--op-3));
// color: rgb(var(--base-200));
//}
//.item-grid:not(.list-view) button.favourite:hover,
//.item-grid:not(.list-view) .item-select label:hover {
// background-color: rgba(var(--base),var(--op-6));
// color: rgb(var(--contrast));
//}
//.item-grid:not(.list-view) .item-select label::before {
// border-color: rgb(var(--base-200));
// position: relative;
// top: 0;
// left: 0;
// transform: none;
//}
//
//.item-grid:not(.list-view) .item-select label::after {
// left: calc(50% - 4px)!important;
//}
//.item-grid:not(.list-view) .item-select label:hover::before {
// border-color: rgb(var(--contrast));
//}
//.item-grid:not(.list-view) .item-select label {
// left: .1255rem;
//}
//.item-grid:not(.list-view) button.favourite {
// right: .125rem;
//}
//.item-grid:not(.list-view) img {
// width: 100%;
// max-width: 100%;
// height: auto;
// aspect-ratio: 1;
// object-fit: cover;
//}
///** List View **/
//.replace:not(:has(.list-view)) button[data-view=grid],
//.replace:has(.list-view) button[data-view=list] {
// background-color: rgb(var(--base));
//}
//.item-grid.list-view .item {
// display: flex;
// position: relative;
// flex-direction: row;
// margin: .5rem 0;
// padding: .25rem .5rem;
// gap: .5rem;
//}
//.item-grid.list-view .item:nth-of-type(even){
// background-color: rgb(var(--base-100));
//}
//
//.item-grid.list-view .item-select label{
// display: flex;
// height: 100%;
// justify-content: center;
// align-items: center;
// padding: 0 .5rem!important;
//}
//.item-grid.list-view .item-select label::after {
// /*left: calc(50% - 4px)!important;*/
//}
//.item-grid.list-view .item-select label::before {
// position: relative;
// top: 0;
// transform: none;
//}
//.item-grid.list-view .item-select label:hover {
// background-color: rgb(var(--base));
//}
//
//.item-grid.list-view .item-select label:hover::before {
// border-color: rgb(var(--action-0));
//}
//.item-grid.list-view img {
// width: 200px;
// height: 200px;
// aspect-ratio: 1;
// object-fit: cover;
//}
//.item-grid.list-view .item-info {
// width: 100%;
//}
//.item-grid .item-info h3 {
// margin: 0!important;
// text-align: right;
// font-size: var(--txt-medium);
// text-transform: none;
//}
//.item-grid .item-info a {
// text-align: right;
// width: 100%;
// display: block;
// font-weight: normal;
// font-family: var(--body);
//}
//.item-grid .item-info a::before,
//.item-grid .item-info a::after {
// display: none;
//}
//.item-grid.list-view .item-info .toggle-notes {
// display: none;
//}
//.item-grid.list-view .item-info .notes-content[hidden]{
// display: block!important;
//}
//.item-grid.list-view .item-info .notes-content {
// margin-top: 1rem;
//}
//.no-favourites {
// text-align: center;
//}
//.no-favourites h3 {
// margin: 0 auto!important;
//}
///**
//Limit reached
// */
//.reached .current {
// color: rgb(var(--action-50));
//}
//.reached textarea,
//.reached input {
// border: 2px solid rgb(var(--action-50));
//}
///**
//Groups
// */
//.groups {
// gap: 1rem;
//}
//details.uploaded .file-upload-container,
//details:not(.uploaded) .selection-container {
// display: none;
//}
//.uploading + .selection-container {
// display: flex!important;
//}
//.selection-container #save-changes {
// position: sticky;
// top: 3rem;
// left: 100%;
// border: 1px solid transparent;
// background-color: rgb(var(--action-50));
// box-shadow:rgba(var(--base),var(--op-45)) var(--shdw);
// z-index: 5;
//}
//.selection-container #save-changes:hover {
// background-color: rgb(var(--base));
// border: 1px solid rgb(var(--action-50));
// color: 1px solid rgb(var(--action-50));
//}
//
//.group {
// padding: 1rem .66rem;
// background-color: rgb(var(--base-50));
// border-radius: var(--radius-outer);
//}
//.group.empty {
// aspect-ratio: 1;
// display: flex;
// flex-direction: column;
// align-items: center;
// justify-content: center;
// border: 4px dashed rgb(var(--base-200));
//}
//.group.empty .items {
// padding: 0;
// margin-top: 0;
//}
//
//.group .group-header {
// display: flex;
// position: relative;
//}
//.group .group-header label {
// position: absolute;
// top: -1.5rem;
//}
//.group .items {
// margin-top: 1rem;
// padding: 1rem;
// border-radius: var(--radius);
// background-color: rgb(var(--base));
//}
//.group .item-actions {
// display: flex;
// justify-content: space-between;
// width: 100%;
//}
//.group .item-actions > button,
//.group .item-actions label {
// flex: 1;
// padding: .25em!important;
// display: flex;
// align-items: center;
// justify-content: center;
// margin-bottom: 0;
//}
//.group .item-actions :checked + label {
// background-color: rgb(var(--action-50));
// color: rgb(var(--contrast));
//}
//.group .item-actions :checked + label:hover {
// border: 1px solid rgb(var(--action-50));
// background-color: transparent;
// color: rgb(var(--action-50));
//}
//.group .item-actions label::before {
// display: none!important;
//}
//
//.group-item img,
//.preview-item img {
// width: 250px;
// height: auto;
// object-fit: cover;
// aspect-ratio: 1;
//
//}
//.uploading .preview-item img,
//.uploading .group-item img{
// animation: uploading 3s ease-in-out infinite alternate;
//}
//@keyframes uploading {
// 0% {
//    opacity: .6;
//    filter: sepia(.3) grayscale(.3);
//    transform: scale(.9);
// }
// 100% {
//    opacity: 1;
//    filter: sepia(0) grayscale(0);
//    transform: scale(1);
// }
//}
//
//.image-actions {
// display: flex;
// gap: 1rem;
// flex-wrap: wrap;
//}
//
//.group.drop {
// border: 2px dashed rgb(var(--action-0));
// background: var(--action-rgb-subtle);
//}
//
//.group .items {
// padding: 1rem;
// display: grid;
// grid-template-columns: repeat(3, 1fr);
// gap: 1rem;
//}
//
//.group-content {
// min-height: 100px;
// padding: 1rem;
//}
//
//.group.drop {
// background: var(--action-rgb-subtle);
// border: 2px dashed rgb(var(--action-0));
//}
//.gallery .group-item,
//.gallery .preview-item {
// cursor: grab;
//}
//.group-item.dragging,
//.preview-item.dragging {
// cursor: grabbing;
// opacity: .5;
//}
//
//.items {
// display: grid;
// grid-template-columns: repeat(3,1fr);
// gap: 1rem;
//}
//
///** Gallery **/
//.gallery .preview-item .move-image {
// cursor: grab;
// position: absolute;
// top: .5rem;
// left: .5rem;
// opacity: 0;
// transition: opacity .2s;
//}
//.gallery-preview {
// display: grid;
// grid-template-columns: repeat(3, 1fr);
// padding: .5rem;
// background-color: rgb(var(--base-100));
// border-radius: var(--radius-outer);
//}
//.gallery-preview .preview-item {
// padding: .5rem;
// background-color: rgb(var(--base));
// border-radius: var(--radius);
//}
//
//.gallery .preview-item:hover .move-image {
// opacity: 1;
//}
//
//.gallery .preview-item.sortable-ghost {
// opacity: .5;
//}
//
//.gallery .preview-item.sortable-drag {
// cursor: grabbing;
//}
//
//.preview-item .upload-status {
// position: absolute;
// bottom: 0;
// left: 0;
// right: 0;
// height: 4px;
// background: rgba(0,0,0,.1);
//}
//
//.preview-item.error {
// border-color: red;
//}
//
//.preview-item.complete .upload-status {
// display: none;
//}
//
///** Settings **/
//.notification-table {
// width: 100%;
//}
//.notification-table tr td:first-of-type {
// width: 100%;
//}
//.notification-table td {
// vertical-align: middle;
// padding: 0 .5rem;
//}
//.notification-table td + td {
// text-align: right;
//}
//table tr:nth-of-type(even){
// background-color: rgb(var(--base-200));
//}
//thead th {
// width: 50%;
//}
//thead tr,
//tfoot tr {
// background-color: rgb(var(--base));
// text-transform: uppercase;
// padding: .5rem 0;
// line-height: 2;
// font-weight: normal;
//}
//tfoot th {
// vertical-align: middle;
//}
//tfoot th:first-of-type {
// text-align: right;
//}
//@media (max-width: 767px){
// table .radio-options {
//    display: grid;
//    grid-template-columns: repeat(2, 1fr);
// }
// table .radio-options label {
//    width: 85%;
//    margin-bottom: 0;
// }
//}
//
///** Favourites Lists **/
//.list-card {
// background-color: rgb(var(--base-50));
// padding: 1rem;
// border-radius: var(--radius);
//}
//.list-header {
// display: flex;
// justify-content: space-between;
//}
//h2 .icon {
// --w: 1.5em;
// display: inline-block;
// vertical-align: middle;
// margin-right: .75rem;
//}
//.list-card h3,
//.list-header h2 {
// margin: 0!important;
// font-size: var(--txt-large);
//}
//.list-actions {
// display: flex;
// justify-content: space-between;
// gap: .5rem;
//}
//.list-header + .list-actions {
// justify-content: flex-end;
//}
//.create-list-btn {
// font-size: var(--txt-x-small);
//}
//.meta-stats {
// display: flex;
// justify-content: space-between;
// font-style: italic;
//}
//
///** Repeater **/
//.add-repeater-row {
// margin-left: auto;
// border: 1px solid rgb(var(--contrast-200));
//}
//
///** Image **/
//
//.image-display {
// max-height: 0;
// overflow: hidden;
// transform: scaleY(0);
// transition: max-height var(--trans-t) var(--trans-fn);
// transition-property: max-height, transform;
//}
//.image-display.has-image {
// max-height: 100%;
// transform: scaleY(1);
// transition: max-height var(--trans-t) var(--trans-fn);
// transition-property: max-height, transform;
//}
//.file-upload-container {
// margin-top: 1rem;
//}
//
//.file-upload-wrapper {
// border: 2px dashed rgb(var(--action-0));
// border-radius: 4px;
// padding: 2rem;
// text-align: center;
// transition: all .3s ease;
// background: var(--action-rgb-subtle);
// position: relative;
// cursor: pointer;
//}
//.file-upload-wrapper h2 {
// margin: 0!important;
// font-size: var(--txt-large);
//}
//
//.file-upload-wrapper:hover,
//.dragover {
// background: var(--action-rgb-subtle-hover);
// border-color: rgb(var(--action-0))!important;
//}
//
//.file-upload-wrapper input[type="file"] {
// position: absolute;
// left: 0;
// top: 0;
// width: 100%;
// height: 100%;
// opacity: 0;
// cursor: pointer;
//}
//
//.file-upload-text {
// color: rgb(var(--contrast));
// margin: 0;
// font-family: var(--body);
//}
//
//.file-upload-text strong {
// color: rgb(var(--action-0));
// text-decoration: underline;
//}
//
///* Error state */
//.file-error {
// color: rgb(var(--action-0));
// margin-top: .5rem;
// font-size: .9em;
//}
//
//.file-upload-container.uploading,
//.image-display.has-image + .file-upload-container {
// max-height: 0;
// overflow: hidden;
// transform: scaleY(0);
// transition: max-height var(--trans-t) var(--trans-fn), transform var(--trans-t) var(--trans-fn);
// transition-property: max-height, transform;
//}
//
///** Highlighted Taxonomy **/
//.highlight-options {
// display: grid;
// grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
// gap: .5rem;
// margin-top: 1rem;
//}
//
//.highlight-option {
// display: flex;
// align-items: center;
// gap: .5rem;
// padding: .5rem;
// border: 1px solid #ddd;
// border-radius: 4px;
//}
//.highlight-option label {
// margin-bottom: 0;
// font-weight: normal;
//}
//
//.highlight-option input[type=checkbox]:disabled + label {
// opacity: .5;
// cursor: not-allowed;
//}
//
///** Item Selection **/
//
//.item-grid {
// --padding: 0;
// padding: var(--padding);
//}
//.item-grid.selecting {
// --padding: .5rem;
// transition: none;
// background-color: rgb(var(--base));
//}
//.item {
// --padding: 0;
// height: fit-content;
// padding: var(--padding);
// max-width: calc(100% - (var(--padding) * 2));
// transition: padding var(--trans-base);
//}
//.selecting .item {
// opacity: .666;
//}
//.selecting .item:has(.select-checkbox:checked) {
// --padding: .5rem;
// opacity: 1;
// background-color: rgb(var(--action-0));
// transition: none;
//}
//
//
//.item-grid.preview .preview-item {
// display: flex;
// gap: 2rem;
//}
//.preview-item .preview-image {
// width: 36%;
//}
//.preview-item .remove-file {
// width: 100%;
// background-color: rgb(var(--base));
// color: rgb(var(--contrast));
//}
//.preview-item .field:first-of-type {
// margin-top: 0!important;
//}
//.preview-item + .preview-item {
// margin-top: 2rem;
// padding-top: 2rem;
// border-top: 2px solid rgb(var(--contrast-200));
//}
//
//.item-grid.preview:empty + .hint {
// display: none;
//}
//
//body:has(.item-grid.empty) .bulk-controls {
// display: none;
//}
//.bulk-controls {
// margin: .75rem 0;
// display: flex;
// justify-content: space-between;
// align-items: center;
//}
//.bulk-select {
// display: flex;
// justify-content: space-between;
//}
//
//.bulk-actions[hidden]{
// max-width: 0;
// max-height: 0;
// overflow: hidden;
// transform: scaleY(0);
// transition: transform var(--trans-t) var(--trans-fn);
// transition-property: transform, max-height;
// transform-origin: top;
// display: flex!important;
// align-items: center;
// gap: .5rem;
// position: relative;
//}
//
//.bulk-actions {
// max-width: 100%;
// max-height: 100%;
// transform: scaleY(1);
// transition: transform var(--trans-t) var(--trans-fn);
// transition-property: transform, max-height;
// overflow:visible;
// transform-origin: top;
// display: flex;
// gap: .25rem;
//}
//.bulk-actions select {
// margin-right: .5rem;
//}
//
//.selected-count {
// font-size: var(--txt-x-small);
// font-style: italic;
// font-weight: normal;
// margin-left: 1rem;
//}
//
//.input-with-button {
// display: flex;
// gap: .5rem;
//}
//.input-with-button .icon {
// --w: 1.5em;
//}
///** Single Edit Modal **/
//dialog > form .field {
// margin: 2rem 0;
//}
//.edit-modal [data-field=featured_image] img {
// width: 100%;
// height: 100%;
// object-fit: cover;
// aspect-ratio: 1;
//}
//
///** Bulk Edit Modal **/
//.bulk-edit-modal .selected {
// display: grid;
// grid-template-columns: repeat(5, 1fr);
// gap: .5rem;
// background-color: rgb(var(--base));
// padding: .5rem;
// border-radius: var(--radius-outer);
//}
//.bulk-edit-modal .selected input[type=checkbox] {
// position: absolute;
//}
//.bulk-edit-modal .selected label::before,
//.bulk-edit-modal .selected label::after {
// display: none;
//}
//.bulk-edit-modal .selected label {
// opacity: .5;
// padding: .5rem!important;
// aspect-ratio: 1;
// margin-bottom: 0;
// max-width: 5rem;
// height: auto;
// cursor: pointer;
//}
//.bulk-edit-modal .selected label:has(input:checked) {
// opacity: 1;
// padding: 0!important;
//}
//
//.bulk-edit-modal .selected img {
// max-width: 100%;
// object-fit: cover;
// aspect-ratio: 1;
// border-radius: var(--radius);
//}
//
//dialog .term-list {
// display: block;
//}
//.pagination-info {
// position: sticky;
// background-color: rgba(var(--base),var(--op-6));
// top: 0;
//}
//.pagination-info:empty {
// display: none;
//}
//
///** Quill Stuff **/
//.editor-container {
//
//}
//.editor-container .ql-toolbar {
// display: flex;
// justify-content: flex-start;
// flex-wrap: wrap;
// padding: .25rem;
// gap: 1rem;
// background-color: rgb(var(--base));
// border-top-left-radius: var(--radius);
// border-top-right-radius: var(--radius);
// border-bottom: 4px solid rgb(var(--base-50));
//}
//.ql-toolbar .ql-formats {
// display: flex;
// gap: .25rem;
//}
//.editor-container .ql-container {
// --padding: 1rem;
// background-color: rgb(var(--base));
// border-bottom-left-radius: var(--radius);
// border-bottom-right-radius: var(--radius);
// height: fit-content;
// padding: 2px;
//}
//.editor-container .ql-container .ql-editor {
// padding: var(--padding);
// width: calc(100% - (var(--padding) * 2.5));
// height: calc(100% - (var(--padding) * 2));
//}
//.ql-editor img {
// max-width: 50%;
// height: auto;
//}
//
//.ql-clipboard {
// left: -100000px;
// height: 1px;
// overflow-y: hidden;
// position: absolute;
// top: 50%;
//}
//.ql-hidden {
// display: none;
//}
//.ql-tooltip {
// position: absolute;
// transform: translateY(10px);
// background-color: rgb(var(--base-100));
// border: 1px solid rgb(var(--base));
// box-shadow: 0px 0px 5px rgba(var(--base),var(--op-6));
// color: rgb(var(--contrast));
// padding: 5px 12px;
// white-space: nowrap;
//}
//
//#toolbar-einks_short_bio .ql-e_image {
// display: none;
//}
//
///** Content Grid **/
//.all-filters {
// position: relative;
// background-color: rgb(var(--base));
// border-radius: var(--radius-outer);
// padding: .5rem;
// display: flex;
// flex-direction: column;
// gap: .5rem;
//}
//.controls .radio-options {
// gap: .25rem 1rem;
//}
//.radio-options details {
// width: 100%;
//}
//.radio-options input:not(.ch) + label,
//.controls input:not(.ch) + .radio-options label {
// width: fit-content!important;
// gap: 0;
// margin: 0;
// display: flex;
// padding: .25rem .5rem!important;
// align-items: center;
//}
//
//.radio-options label span {
// transform: scaleX(0);
// max-width: 0;
//}
//.edit-form .radio-options label span,
//.radio-options label:hover span,
//.radio-options :checked + label span {
// transform: scaleX(1);
// max-width: 100%;
//}
//.radio-options input:not(.ch):checked + label {
// padding: .25rem .5rem!important;
//}
//.controls .radio-options input:not(.ch):checked+label {
// background-color: rgb(var(--base-100));
// border-color: rgb(var(--contrast-200));
// color: rgb(var(--contrast))!important;
// gap: .5rem;
//}
//
//dialog .field {
// margin: 3rem 0;
//}
//
//
//.filters {
// display: flex;
// gap: 1rem;
// align-items: center;
//}
//.filters > div > label {
// margin: 0;
//}
//div.filters > div {
// display: flex;
// align-items: center;
// flex: 100%;
// gap: .5rem;
//}
//.filters .icon {
// --w: 1.5em;
//}
//
//@media (min-width:768px){
// div.filters > div {
//    flex: 1;
// }
//}
//
//.view-controls.radio-options {
// gap: .5rem;
// margin-left: auto;
//}
//.view-controls.radio-options label {
// padding: .25rem!important;
//}
//
//.label-group {
// display: flex;
// gap: .75rem;
// align-items: center;
// flex-wrap: wrap;
//}
//.label-group .icon {
// margin-right: .5rem;
//}
//.item-grid.table {
// display: none;
//}
//
//.item-grid summary {
// padding: 0;
// gap: 0;
//}
//.item-grid .item-actions {
// position: absolute;
// top: .25rem;
// right: .25rem;
// gap: .25rem;
// display: flex;
//}
//.item-grid .item-actions button {
// width: 2em;
// height: 2em;
// border-radius: var(--radius);
// background-color: rgba(var(--base),var(--op-3));
// display: flex;
// justify-content: center;
// align-items: center;
//}
//.item-grid .item-actions button:focus,
//.item-grid .item-actions button:hover {
// background-color: rgba(var(--base),var(--op-6));
// color: rgb(var(--action-0));
//}
//
//
//
//@media (max-width: 768px){
// .replace {
//    margin-top: 4rem!important;
// }
// .list-header {
//    flex-wrap: wrap;
// }
// .list-card h3 {
//    font-size: var(--txt-medium);
// }
// .item-grid.list-view .item {
//    align-items: center;
// }
// .item-grid.list-view img {
//    width: 80px;
//    height: 80px;
//    aspect-ratio: 1;
//    object-fit: cover;
// }
//}
//
//@media (min-width: 768px){
// .item-grid:not(.list-view) {
//    grid-template-columns: repeat(3, 1fr);
// }
//}
//
//.term-divider {
// position: relative;
// text-align: center;
// margin: 1rem 0;
// border-bottom: 1px solid rgb(var(--base-200));
//}
//
//.term-divider span {
// background: rgb(var(--base));
// padding: 0 1rem;
// color: rgb(var(--contrast));
// font-size: .9rem;
// position: relative;
// top: .5em;
//}
//
//.common-term {
// background: rgb(var(--base-50));
// border-radius: var(--radius);
//}
//
//.loading-indicator {
// display: flex;
// align-items: center;
// justify-content: center;
// gap: .5rem;
// padding: 1rem;
// color: rgb(var(--contrast-100));
// font-size: .9rem;
//}
//
//.loading-indicator svg {
// animation: spin 1s linear infinite;
//}
//
//.pagination-info {
// text-align: center;
// padding: .5rem;
// font-size: .9rem;
// color: rgb(var(--contrast-100));
// border-top: 1px solid rgb(var(--base-100));
//}
//
//@keyframes spin {
// from { transform: rotate(0deg); }
// to { transform: rotate(360deg); }
//}
//
//
//.term-breadcrumb {
// margin-bottom: 1rem;
// padding: .5rem;
// background: rgb(var(--base-50));
// border-radius: 4px;
//}
//
//.back-to-parent {
// display: flex;
// align-items: center;
// gap: .5rem;
// border: none;
// background: none;
// color: rgb(var(--contrast));
// cursor: pointer;
// padding: .5rem;
// border-radius: 4px;
// font-size: var(--txt-x-small);
//}
//
//.back-to-parent:hover {
// background: rgb(var(--base-100));
//}
//
//.term-row {
// display: flex;
// align-items: center;
// gap: .5rem;
// width: 100%;
// padding: .25rem 0;
//}
//
//.toggle-children {
// border: none;
// background: none;
// padding: .25rem;
// cursor: pointer;
// color: rgb(var(--contrast));
// display: flex;
// align-items: center;
// justify-content: center;
// margin-left: auto;
// border-radius: 4px;
//}
//
//.toggle-children:hover {
// background: rgb(var(--base-50));
//}
//
//.loading-indicator {
// display: flex;
// align-items: center;
// justify-content: center;
// width: 24px;
// height: 24px;
//}
//
//.loading-indicator .loading {
// width: 16px;
// height: 16px;
// border: 2px solid rgb(var(--base-100));
// border-top-color: rgb(var(--contrast));
// border-radius: 50%;
// animation: spin 1s linear infinite;
//}
//
//@keyframes spin {
// to { transform: rotate(360deg); }
//}
//
//.term-breadcrumb {
// display: flex;
// align-items: center;
// gap: .5rem;
// margin-bottom: 1rem;
// padding: .5rem;
// background: rgb(var(--base-50));
// border-radius: 4px;
//}
//
//.term-breadcrumb .path {
// display: flex;
// align-items: center;
// gap: .25rem;
// flex-wrap: wrap;
//}
//
//.term-breadcrumb button {
// border: none;
// background: none;
// padding: .25rem .5rem;
// border-radius: 4px;
// cursor: pointer;
// color: rgb(var(--contrast));
// font-size: var(--txt-x-small);
//}
//
//.term-breadcrumb button:hover {
// background: rgb(var(--base-100));
//}
//
//.path-separator {
// color: rgb(var(--contrast-50));
//}
//
//.path-level {
// white-space: nowrap;
//}
//
//.create-new-term {
// margin-top: 2rem;
// padding-top: 1rem;
// border-top: 1px solid rgb(var(--base-100));
//}
//.create-new-term button {
// width: 100%;
//}
//
//.suggestion-prompt {
// font-size: var(--txt-x-small);
// color: rgb(var(--contrast-50));
// margin-bottom: 1rem;
//}
//
//.create-term-form {
// display: flex;
// flex-direction: column;
// gap: .5rem;
//}
//
//.form-row {
// display: flex;
// align-items: center;
// gap: .5rem;
//}
//
//.name-row {
// position: relative;
//}
//
//.name-row input {
// width: 100%!important;
// padding: .5rem;
// border: 2px solid rgb(var(--base-100));
// border-radius: 4px;
// background: rgb(var(--base));
// color: rgb(var(--contrast));
//}
//
//.name-row input:focus {
// border-color: rgb(var(--action-0));
// outline: none;
//}
//
//.parent-row {
// font-size: var(--txt-x-small);
//}
//
//.parent-row label {
// display: flex;
// align-items: center;
// gap: .5rem;
// cursor: pointer;
//}
//
//.create-term-form button {
// display: inline-flex;
// align-items: center;
// gap: .5rem;
// padding: .5rem 1rem;
// border: none;
// border-radius: 4px;
// background: rgb(var(--action-0));
// color: rgb(var(--base));
// cursor: pointer;
// font-size: var(--txt-x-small);
// transition: all .2s ease;
//}
//
//.create-term-form button:hover {
// background: rgb(var(--action-50));
//}
//
//.create-term-form button:disabled {
// opacity: .5;
// cursor: not-allowed;
//}
//
//.create-term-form button svg {
// width: 16px;
// height: 16px;
//}
//
///** Search bar and new term functionality **/
//.search-bar {
// position: relative;
// display: flex;
// gap: .5rem;
// align-items: center;
// z-index: 2;
//}
//
//.search-bar input {
// flex: 1;
// /* Make room for button */
// padding: .5rem 2.5rem .5rem .5rem;
// border: 2px solid #ddd;
// border-radius: 4px;
// font-size: 1rem;
//}
//
//.new-term-toggle {
// margin: 2rem 0 1rem;
// width: 100%;
// display: flex;
// justify-content: center;
// align-items: center;
//}
//
///* Peek effect on search bar hover */
//.search-bar:hover .new-term-toggle {
// opacity: 1;
// transform: translateX(-.25rem);
//}
//
///* Form styling */
//.create-term-form {
// position: relative;
// z-index: 1;
// background: rgb(var(--base));
// border: 2px solid rgb(var(--action-0));
// border-radius: 4px;
// padding: 1rem;
// margin-top: -2px;
//
// /* Animation */
// transform-origin: top;
// transition: all .2s var(--trans-fn);
//}
//
//.create-term-form:not([hidden]) {
// animation: slideDown .2s var(--trans-fn);
//}
//
//.create-term-form[hidden] {
// display: block !important; /* Override hidden */
// transform: scaleY(0);
// opacity: 0;
// pointer-events: none;
//}
//
//.form-row {
// display: flex;
// gap: .5rem;
// align-items: center;
//}
//
//.form-row + .form-row {
// margin-top: .5rem;
//}
//
//@keyframes slideDown {
// from {
//    transform: scaleY(0);
//    opacity: 0;
// }
// to {
//    transform: scaleY(1);
//    opacity: 1;
// }
//}
//
//.news.item {
// padding: 1rem!important;
//}
//
//.dashboard .checkbox-options label {
// font-weight: normal;
//}
//
//.description.space {
// margin-bottom: 4rem;
//}
//
//.invited-artist {
// display: flex;
// align-items: center;
// margin: 1rem 0;
//}
//.invited-artist input[type=text],
//.invited-artist input[type=email] {
// width: calc(100% - .5rem);
//}
//.invited-artist label {
// margin: 0;
// font-weight: normal;
// white-space:nowrap;
//}
//.invited-artist button {
// height: fit-content;
// margin-right: .5rem;
//}
//.actions {
// display: flex;
// gap: 1rem;
// justify-content: flex-end;
//}
//
//.actions .send-invites {
// background-color: rgb(var(--action-50));
//}
//.actions .send-invites:hover,
//.actions .send-invites:focus {
// background-color: rgb(var(--base));
// border-color: rgb(var(--action-50));
//}
//
//.dashboard .queue-status-panel {
// bottom: calc(var(--btn) + 1rem);
//}
//.dashboard .queue-status-toggle {
// bottom: 0;
//}
//
//.items-list table th {
// padding: 0 .75rem;
// text-transform: none!important;
//}
//.items-list table.empty tbody {
// height: 40vh;
//}
//
//table textarea,
//table input[type=text],
//table input[type=url],
//table input[type=number],
//table input[type=email] {
// min-width: 40vw;
//}
//
//.empty tfoot {
// display: none;
//}
//
//p.hint {
// margin: 0 0 .5rem 0;
// font-size: var(--txt-x-small);
// font-style: italic;
//}
//.item-grid + .hint {
// text-align: center;
// margin-top: 2rem;
//}
//
//.image.field[data-type=single]:has(.upload-item) .file-upload-container {
// display: none;
//}
//.image.field[data-type=single] .upload-item {
// grid-column: 1 / -1;
//}
///** UPLOADER **/
//.upload-item {
// position: relative;
// border: 1px solid rgb(var(--base-200));
// border-radius: 8px;
// background: rgb(var(--base-50));
// transition: all .3s ease;
//}
//.upload-item:hover {
// box-shadow: rgba(var(--base),var(--op-45)) var(--shdw);
// transform: translateY(-2px);
//}
//.upload-item[data-status=processing] {
// border-color: rgb(var(--action-200));
// background: rgb(var(--action-100));
//}
//.upload-item[data-status=cached] {
// border-color: rgb(var(--secondary-0));
// background: rgb(var(--secondary-200));
//}
//.upload-item[data-status=uploading] {
// border-color: rgb(var(--contrast));
// background-color: rgb(var(--base-50));
//}
//.upload-item .preview {
// position: relative;
// aspect-ratio: 1;
//}
//.upload-item .status {
// position: absolute;
// bottom: .25rem;
// right: .25rem;
// background-color: rgba(var(--base),var(--op-3));
// box-shadow: rgba(var(--base),var(--op-45)) var(--shdw);
// border-radius: 50%;
//}
//.upload-item img {
// width: 100%;
// height: 100%;
// object-fit: cover;
// transition: transform .3s ease;
//}
//.upload-item:hover img {
// transform: scale(1.05);
//}
//
//.upload-item .overlay {
// position: absolute;
// top: 0;
// left: 0;
// right: 0;
// bottom: 0;
// background: rgba(var(--base),var(--op-6));
// display: flex;
// flex-direction: column;
// justify-content: space-between;
// padding: .5rem;
// opacity: 0;
// transition: opacity .3s ease;
//}
//.upload-item:hover .overlay,
//.upload-item[data-status=processing] .overlay,
//.upload-item[data-status=uploading] .overlay {
// opacity: 1;
//}
//
//.upload-item .item-actions {
// position: relative;
//}
//
//.submit-uploads {
// position: fixed;
// bottom: calc(var(--btn) + 1rem);
// right: 1rem;
// background-color: rgb(var(--base));
// height: var(--btn);
// box-shadow: rgba(var(--base),var(--op-45)) var(--shdw);
//}
///*** UPLOADER GROUPS ***/
//.group-display {
// display: grid;
// grid-template-columns: 1fr 250px;
// gap: 2rem;
//}
//.preview-actions {
// position: sticky;
// padding: .5rem;
// top: calc(var(--btn) + .25rem);
// left: 0;
// background-color: rgb(var(--base-50));
// z-index: 5;
//}
//.preview-actions .selected {
// display: flex;
// justify-content: space-between;
// padding-right: 2rem;
// align-items: center;
//}
//.preview-actions .field {
// margin: 0;
//}
//.preview-actions .field label {
// margin-bottom: 0;
//}
//.selection-actions {
// display: flex;
// justify-content: space-between;
// padding: 1rem 2rem;
//}
//[data-status=completed] .progress {
// transform: scaleY(0);
// transform-origin: top;
//}
//.preview-grid {
// display: grid;
// grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
// gap: 1rem;
// margin-top: 1rem;
// padding: .5rem;
// background: rgb(var(--base));
// border: 1px solid rgb(var(--contrast-200));
// border-radius: 8px;
// min-height: 60px;
//}
//.preview-grid:empty {
// display: none;
//}
//
//
//.upload-item .progress {
// position: absolute;
// top: 2px;
// right: 2px;
// left: 2px;
//}
//.upload-item .actions {
// display: flex;
// justify-content: space-between;
// align-items: center;
// position: absolute;
// top: 0;
// left: 0;
// right: 0;
//}
//.upload-item .actions > label {
// margin: 0 1rem;
// padding-left: 0!important;
//}
//.upload-item input[type=text],
//.upload-item textarea,
//.group-fields input[type=text],
//.group-fields textarea {
// width: calc(100% - 1rem);
//}
///*.upload-item .actions > label {*/
///*    !*position: absolute;*!*/
///*    padding: 1rem!important;*/
///*    margin: 0;*/
///*    !*top: .5rem;*!*/
///*    !*left: 0;*!*/
///*}*/
///*    .upload-item .actions > label::before {*/
///*        left: calc(50% - 9px)!important;*/
///*        top: calc(50% - 9px)!important;*/
///*        transform: none!important;*/
///*    }*/
///*    .upload-item .actions > label::after {*/
///*        left: 1.25rem!important;*/
///*        top: 1rem!important;*/
///*    }*/
//.item-grid .upload-item summary {
// display: flex;
// align-items: center;
// font-size: var(--txt-x-small);
// gap: .5rem;
// text-transform: uppercase;
//}
//.upload-item:has([type=checkbox]:checked) .preview {
// padding: 1rem;
// background-color: rgb(var(--secondary-200));
//}
//.upload-item:has([open]) {
// grid-column: 1 / -1;
//}
//.upload-item summary .icon {
// --w: 1.1em;
//}
//
//[draggable="true"] {
// cursor: grab;
//}
//[draggable="true"]:active {
// cursor: grabbing;
//}
//
//.dragging {
// opacity: .5;
// transform: rotate(5deg) scale(.95);
// transition: all .2s ease;
//}
//
//.dragover:not(.item-grid.groups) {
// background-color: var(--overlay-action-medium);
// border: 2px dashed rgb(var(--action-0));
//}
//
//@keyframes dragHover {
// 0% { transform: scale(1); }
// 50% { transform: scale(1.02); }
// 100% { transform: scale(1); }
//}
//
//.drag-hover {
// animation: dragHover .6s ease-in-out infinite;
//}
//
///** GROUP **/
//.empty-group {
// padding: 20px;
// text-align: center;
// grid-column: 1 / -1;
// display: flex;
// justify-content: center;
// align-items: center;
// border: 2px dashed rgb(var(--action-200));
// border-radius: var(--radius);
// margin: 10px 0;
// cursor: pointer;
// transition: all .2s ease;
// aspect-ratio: 16/9;
//}
//.item-grid.groups {
// grid-template-columns: 1fr;
//}
//
//.item-grid.group .item-grid.group {
// min-height: 40px;
// display: grid;
// grid-template-columns: repeat(3, 1fr);
// gap: .5rem;
// border: 2px dashed rgb(var(--action-200));
// border-radius: var(--radius);
// margin: 10px 0;
// cursor: pointer;
// transition: all .2s ease;
// aspect-ratio: 1;
// text-align: center;
//}
//.empty-group:hover,
//.empty-group.dragover,
//.item-grid.group .item-grid.group:hover,
//.item-grid.group .item-grid.group.dragover {
// border-color: rgb(var(--action-0));
// background-color: var(--overlay-action-light);
// color: rgb(var(--action-50));
//}
//
//.upload-group {
// background-color: rgb(var(--base-100));
// border-radius: var(--radius);
// border: 1px solid rgb(var(--contrast-200));
//}
//.group-actions {
// width: 100%;
// gap: .5rem;
//}
//.group-actions button {
// width: 100%;
//}
//
//body:has(.selection-actions[hidden]) button.create-group,
//body:has(.selection-actions[hidden]) button.add-selection-to-group {
// display: none;
//}
//
///** RESTORE FROM CACHE **/
//.restore-notification {
// border-radius: var(--radius);
// box-shadow: rgba(var(--base),var(--op-45)) var(--shdw);
// padding: 1rem;
// background: rgb(var(--base-200));
// border: 1px solid rgb(var(--contrast-200));
// border-top-width: 4px;
// border-bottom-width: 4px;
//}
//.restore-content {
// display: flex;
// align-items: center;
//}
//.restore-actions .selection-controls {
// display: flex;
// gap: .5rem;
//}
//
//.restore-actions button {
// white-space: nowrap;
//}
//.restore-actions .action-buttons {
// margin-top: 1rem;
// display: flex;
// flex-direction: column;
// gap: .5rem;
//}
//.restore-actions .action-buttons button {
// width: 100%;
//}
//
//label.restore-item {
// border-radius: .5rem;
// padding: 0;
// background-color: transparent;
// filter: grayscale(50);
// opacity: .8;
// transition: padding var(--trans-base);
// transition-property: padding, background-color;
// cursor: pointer;
//}
//label.restore-item:has(input:checked) {
// filter: grayscale(0);
// opacity: 1;
// padding: 1rem;
// background-color: rgb(var(--secondary-200));
//}
//
//.upload-item .featured + label {
// width: 2em;
// height: 2em;
// border-radius: var(--radius);
// background-color: rgba(var(--base),var(--op-3));
// display: flex;
// justify-content: center;
// align-items: center;
// padding: 0!important;
// border: none;
//}
//
//input.featured + label .icon {
// --w: 1.25em;
//}
//input.featured + label .icon + .icon {
// position: absolute;
//}
//input.featured + label .star-fill,
//input.featured:checked + label .star {
// transform: scale(0);
//}
//input.featured:checked + label .star-fill,
//input.featured + label .star {
// transform: scale(1);
//}
///**TODO: Double check needed **/
///*!* Centralized Upload Manager CSS *!*/
//
///*!* Global Upload Status Bar *!*/
///*.all-uploads {*/
///*    position: fixed;*/
///*    top: 0;*/
///*    left: 0;*/
///*    right: 0;*/
///*    background: var(--surface);*/
///*    border-bottom: 1px solid var(--border);*/
///*    padding: .75rem 1rem;*/
///*    z-index: 1000;*/
///*    box-shadow: 0 2px 8px rgba(0, 0, 0, .1);*/
///*    backdrop-filter: blur(10px);*/
///*    display: none; !* Hidden by default *!*/
///*}*/
//
///*.upload-summary {*/
///*    display: flex;*/
///*    justify-content: space-between;*/
///*    align-items: center;*/
///*    margin-bottom: .5rem;*/
///*}*/
//
///*.all-uploads .active {*/
///*    font-weight: 500;*/
///*    color: rgb(var(--contrast));*/
///*    font-size: .9rem;*/
///*}*/
//
///*.upload-summary button {*/
///*    padding: .5rem 1rem;*/
///*    border: 1px solid var(--border);*/
///*    border-radius: 4px;*/
///*    background: var(--surface);*/
///*    color: rgb(var(--contrast));*/
///*    cursor: pointer;*/
///*    transition: all .3s ease;*/
///*    font-size: .875rem;*/
///*    margin-left: .5rem;*/
///*}*/
//
///*.upload-summary button:hover {*/
///*    background: rgb(var(--action-0));*/
///*    color: var(--action-contrast);*/
///*    border-color: rgb(var(--action-0));*/
///*}*/
//
///*!* Upload Drop Zones *!*/
///*.file-upload-container {*/
///*    position: relative;*/
///*    padding: .25rem;*/
///*    transition: border-color var(--trans-base),*/
///*    background-color var(--trans-base),*/
///*    padding var(--trans-base);*/
///*}*/
//
///*.file-upload-container.dragover {*/
///*    background-color: var(--action-rgb-subtle);*/
///*    border-color: rgb(var(--action-0));*/
///*    padding: .75rem;*/
///*}*/
///*    .dragover .file-upload-wrapper {*/
///*        transform: scale(1.02);*/
///*    }*/
//
//
///*!* Upload Actions *!*/
///*.upload .actions {*/
///*    display: flex;*/
///*    gap: .25rem;*/
///*    justify-content: flex-end;*/
///*}*/
//
///*.upload .actions button {*/
///*    background: rgba(0, 0, 0, .7);*/
///*    color: white;*/
///*    border: none;*/
///*    padding: .25rem;*/
///*    border-radius: 4px;*/
///*    cursor: pointer;*/
///*    transition: background .3s ease;*/
///*    display: flex;*/
///*    align-items: center;*/
///*    justify-content: center;*/
///*}*/
//
///*.upload .actions button:hover {*/
///*    background: rgba(0, 0, 0, .9);*/
///*}*/
//
///*.upload .actions button svg {*/
///*    width: 16px;*/
///*    height: 16px;*/
///*}*/
//
///*!* Status Indicator *!*/
///*.status {*/
///*    position: absolute;*/
///*    top: .5rem;*/
///*    right: .5rem;*/
///*    width: 24px;*/
///*    height: 24px;*/
///*    border-radius: 50%;*/
///*    display: flex;*/
///*    align-items: center;*/
///*    justify-content: center;*/
///*    font-size: .8rem;*/
///*    font-weight: bold;*/
///*    z-index: 2;*/
///*    box-shadow: 0 2px 4px rgba(0, 0, 0, .2);*/
///*}*/
//
///*.status.processing {*/
///*    background: var(--warning);*/
///*    color: var(--warning-contrast);*/
///*}*/
//
///*.status.processed {*/
///*    background: var(--info);*/
///*    color: var(--info-contrast);*/
///*}*/
//
///*.status.cached {*/
///*    background: var(--info);*/
///*    color: var(--info-contrast);*/
///*}*/
//
///*.status.uploading {*/
///*    background: rgb(var(--action-0));*/
///*    color: var(--action-contrast);*/
///*}*/
//
///*.status.uploaded {*/
///*    background: var(--success);*/
///*    color: var(--success-contrast);*/
///*}*/
//
///*.status.error {*/
///*    background: var(--error);*/
///*    color: var(--error-contrast);*/
///*}*/
//
///*!* Upload Metadata *!*/
///*.upload .metadata {*/
///*    padding: 1rem;*/
///*    border-top: 1px solid var(--border);*/
///*    background: var(--surface);*/
///*}*/
//
///*.upload .metadata .metadata-field {*/
///*    margin-bottom: .75rem;*/
///*}*/
//
///*.upload .metadata .metadata-field:last-child {*/
///*    margin-bottom: 0;*/
///*}*/
//
///*.upload .metadata label {*/
///*    display: block;*/
///*    margin-bottom: .25rem;*/
///*    font-weight: 500;*/
///*    font-size: .9rem;*/
///*    color: rgb(var(--contrast));*/
///*}*/
//
///*.upload .metadata input,*/
///*.upload .metadata textarea {*/
///*    width: 100%;*/
///*    padding: .5rem;*/
///*    border: 1px solid var(--border);*/
///*    border-radius: 4px;*/
///*    font-size: .9rem;*/
///*    transition: border-color .3s ease, box-shadow .3s ease;*/
///*}*/
//
///*.upload .metadata input:focus,*/
///*.upload .metadata textarea:focus {*/
///*    outline: none;*/
///*    border-color: rgb(var(--action-0));*/
///*    box-shadow: 0 0 0 2px var(--action-rgb-subtle);*/
///*}*/
//
///*.upload .metadata textarea {*/
///*    resize: vertical;*/
///*    min-height: 2.5rem;*/
///*}*/
//
///*!* Field Type Specific Styles *!*/
//
///*!* Single Image Field *!*/
///*.upload.field[data-upload-type="single"] .upload-preview-grid {*/
///*    grid-template-columns: 1fr;*/
///*    max-width: 400px;*/
///*}*/
//
///*!* Gallery Field *!*/
///*.upload.field[data-upload-type="gallery"] .upload-preview-grid {*/
///*    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));*/
///*}*/
//
///*!* Avatar Field *!*/
///*.upload.field[data-upload-type="avatar"] .upload-preview-grid {*/
///*    grid-template-columns: 1fr;*/
///*    max-width: 200px;*/
///*}*/
//
///*.upload.field[data-upload-type="avatar"] .upload-preview {*/
///*    aspect-ratio: 1;*/
///*    border-radius: 50%;*/
///*    overflow: hidden;*/
///*}*/
//
///*!* Spinner Animation *!*/
///*.spinner {*/
///*    width: 12px;*/
///*    height: 12px;*/
///*    border: 2px solid transparent;*/
///*    border-top: 2px solid currentColor;*/
///*    border-radius: 50%;*/
///*    animation: spin 1s linear infinite;*/
///*}*/
//
///*@keyframes spin {*/
///*    0% { transform: rotate(0deg); }*/
///*    100% { transform: rotate(360deg); }*/
///*}*/
//
///*@keyframes shimmer {*/
///*    0% { transform: translateX(-100%); }*/
///*    100% { transform: translateX(100%); }*/
///*}*/
//
///*!* Responsive Design *!*/
///*@media (max-width: 768px) {*/
///*    .all-uploads {*/
///*        position: relative;*/
///*        top: auto;*/
///*        left: auto;*/
///*        right: auto;*/
///*    }*/
//
///*    .upload-summary {*/
///*        flex-direction: column;*/
///*        gap: .5rem;*/
///*        align-items: stretch;*/
///*    }*/
//
///*    .upload-summary button {*/
///*        margin-left: 0;*/
///*        width: 100%;*/
///*    }*/
//
///*    .upload-preview-grid {*/
///*        grid-template-columns: 1fr;*/
///*        gap: .75rem;*/
///*    }*/
//
///*    .upload.field[data-upload-type="gallery"] .upload-preview-grid {*/
///*        grid-template-columns: repeat(2, 1fr);*/
///*    }*/
///*}*/
//
///*!* Dark Mode Support *!*/
///*@media (prefers-color-scheme: dark) {*/
///*    .upload-overlay {*/
///*        background: linear-gradient(to bottom, rgba(0,0,0,.3), rgba(0,0,0,.6));*/
///*    }*/
//
///*}*/
//
///*!* High Contrast Mode *!*/
///*@media (prefers-contrast: high) {*/
///*    .upload-item {*/
///*        border-width: 2px;*/
///*    }*/
//
///*    .status {*/
///*        border: 2px solid currentColor;*/
///*    }*/
//
///*}*/
//
///*!* Reduced Motion *!*/
///*@media (prefers-reduced-motion: reduce) {*/
///*    .upload-item:hover {*/
///*        transform: none;*/
///*    }*/
//
///*    .upload-item:hover .upload-preview img {*/
///*        transform: none;*/
///*    }*/
//
///*    .spinner,*/
///*    .shimmer {*/
///*        animation: none;*/
///*    }*/
///*}*/
//
///*!* Focus Management *!*/
///*.upload-item:focus-within {*/
///*    outline: 2px solid rgb(var(--action-0));*/
///*    outline-offset: 2px;*/
///*}*/
//
///*.upload .actions button:focus {*/
///*    outline: 2px solid rgb(var(--action-0));*/
///*    outline-offset: 2px;*/
///*}*/
//
///*!* Loading States *!*/
///*.upload.field.processing {*/
///*    pointer-events: none;*/
///*    opacity: .7;*/
///*}*/
//
///*.upload.field.processing::after {*/
///*    content: '';*/
///*    position: absolute;*/
///*    top: 0;*/
///*    left: 0;*/
///*    right: 0;*/
///*    bottom: 0;*/
///*    background: rgba(255, 255, 255, .5);*/
///*    backdrop-filter: blur(2px);*/
///*    z-index: 10;*/
///*}*/
//
///*!* Field Capacity Indicators *!*/
///*.upload.field[data-at-capacity="true"] .file-upload-container {*/
///*    opacity: .5;*/
///*    pointer-events: none;*/
///*}*/
//
///*.upload.field[data-at-capacity="true"]::before {*/
///*    content: 'Maximum files reached';*/
///*    position: absolute;*/
///*    top: 50%;*/
///*    left: 50%;*/
///*    transform: translate(-50%, -50%);*/
///*    background: var(--warning);*/
///*    color: var(--warning-contrast);*/
///*    padding: .5rem 1rem;*/
///*    border-radius: 4px;*/
///*    font-size: .875rem;*/
///*    z-index: 5;*/
///*}*/
//
///*!* Integration with existing form styles *!*/
///*.upload.field {*/
///*    position: relative;*/
///*}*/
//
///*.upload.field .upload-preview-grid {*/
///*    margin-top: .5rem;*/
///*}*/
//
///*!* Ensure global status doesn't interfere with fixed elements *!*/
///*body.has-global-upload-status {*/
///*    padding-top: 80px;*/
///*}*/
//
///*!* Animation for upload completion *!*/
///*@keyframes uploadSuccess {*/
///*    0% { transform: scale(1); }*/
///*    50% { transform: scale(1.05); }*/
///*    100% { transform: scale(1); }*/
///*}*/
//
///*.upload-item[data-status="uploaded"] {*/
///*    animation: uploadSuccess .6s ease-out;*/
///*}*/
///*!* Batch Processing Progress Bar *!*/
///*.batch-progress {*/
///*    margin: 1rem 0;*/
///*    padding: 1rem;*/
///*    background: var(--color-background-secondary, #f8f9fa);*/
///*    border: 1px solid var(--color-border, #e1e5e9);*/
///*    border-radius: 8px;*/
///*    transition: opacity .3s ease;*/
///*}*/
//
///*.batch-progress.completed {*/
///*    background: var(--color-success-light, #d4edda);*/
///*    border-color: var(--color-success, #28a745);*/
///*}*/
//
///*.progress-info {*/
///*    display: flex;*/
///*    justify-content: space-between;*/
///*    align-items: center;*/
///*    margin-bottom: .5rem;*/
///*    font-size: .9rem;*/
///*}*/
//
///*.progress-message {*/
///*    color: var(--color-text-secondary, #6c757d);*/
///*    font-weight: 500;*/
///*}*/
//
///*.progress-count {*/
///*    color: var(--color-text-primary, #212529);*/
///*    font-weight: 600;*/
///*    font-variant-numeric: tabular-nums;*/
///*}*/
//
///*.progress .bar {*/
///*    width: 100%;*/
///*    height: 8px;*/
///*    background: var(--color-background-tertiary, #e9ecef);*/
///*    border-radius: 4px;*/
///*    overflow: hidden;*/
///*}*/
//
///*.progress .fill {*/
///*    height: 100%;*/
///*    background: linear-gradient(90deg,*/
///*    var(--color-primary, #007cba) 0%,*/
///*    var(--color-primary-light, #0096dd) 100%*/
///*    );*/
///*    border-radius: 4px;*/
///*    transition: width .3s ease;*/
///*    position: relative;*/
///*}*/
//
///*!* Animated progress indicator *!*/
///*.progress .fill::after {*/
///*    content: '';*/
///*    position: absolute;*/
///*    top: 0;*/
///*    left: 0;*/
///*    right: 0;*/
///*    bottom: 0;*/
///*    background: linear-gradient(*/
///*            90deg,*/
///*            transparent 0%,*/
///*            rgba(255,255,255,.3) 50%,*/
///*            transparent 100%*/
///*    );*/
///*    animation: progress-shine 2s ease-in-out infinite;*/
///*}*/
//
///*@keyframes progress-shine {*/
///*    0% { transform: translateX(-100%); }*/
///*    100% { transform: translateX(100%); }*/
///*}*/
//
///*!* Completed state styling *!*/
///*.progress.completed .fill {*/
///*    background: linear-gradient(90deg,*/
///*    var(--color-success, #28a745) 0%,*/
///*    var(--color-success-light, #34ce57) 100%*/
///*    );*/
///*}*/
//
///*.progress.completed .progress-message {*/
///*    color: var(--color-success-dark, #155724);*/
///*}*/
//
///*!* Dark mode support *!*/
///*@media (prefers-color-scheme: dark) {*/
///*    .progress {*/
///*        background: var(--color-background-secondary-dark, #2d3436);*/
///*        border-color: var(--color-border-dark, #636e72);*/
///*    }*/
//
///*    .progress .bar {*/
///*        background: var(--color-background-tertiary-dark, #636e72);*/
///*    }*/
///*}*/
//
///*!* ✅ Grouping System CSS *!*/
//
///*!* Upload field container with grouping support *!*/
///*.upload.field.groupable {*/
///*    display: grid;*/
///*    grid-template-columns: 1fr 300px;*/
///*    gap: 20px;*/
///*    min-height: 400px;*/
///*}*/
//
///*.upload.field.groupable .upload-main {*/
///*    display: flex;*/
///*    flex-direction: column;*/
///*}*/
//
///*.upload.field.groupable .upload-sidebar {*/
///*    border-left: 2px solid #e0e0e0;*/
///*    padding-left: 20px;*/
///*}*/
//
///*!* Preview grid for groupable uploads *!*/
///*.upload-preview-grid.groupable {*/
///*    min-height: 200px;*/
///*    border: 2px dashed #ddd;*/
///*    border-radius: 8px;*/
///*    padding: 15px;*/
///*    background: #fafafa;*/
///*}*/
//
///*.upload-preview-grid.groupable:empty::after {*/
///*    content: "Drop images here or click to upload";*/
///*    display: block;*/
///*    text-align: center;*/
///*    color: #666;*/
///*    font-style: italic;*/
///*    padding: 40px 20px;*/
///*}*/
//
///*!* Upload items with drag support *!*/
///*.upload-item[draggable] {*/
///*    cursor: grab;*/
///*    transition: transform .2s ease, box-shadow .2s ease;*/
///*}*/
//
///*.upload-item[draggable]:hover {*/
///*    transform: translateY(-2px);*/
///*    box-shadow: 0 4px 8px rgba(0,0,0,.1);*/
///*}*/
//
///*.upload-item.dragging {*/
///*    opacity: .5;*/
///*    transform: rotate(5deg);*/
///*    cursor: grabbing;*/
///*}*/
//
///*!* Groups container *!*/
///*.groups-container {*/
///*    display: flex;*/
///*    flex-direction: column;*/
///*    gap: 15px;*/
///*    max-height: 600px;*/
///*    overflow-y: auto;*/
///*    padding: 10px;*/
///*    background: #f9f9f9;*/
///*    border-radius: 8px;*/
///*}*/
//
///*.groups-container .new-group-section {*/
///*    text-align: center;*/
///*    padding: 20px;*/
///*    border: 2px dashed #ccc;*/
///*    border-radius: 8px;*/
///*    background: white;*/
///*    cursor: pointer;*/
///*    transition: all .2s ease;*/
///*}*/
//
///*.groups-container .new-group-section:hover {*/
///*    border-color: #2196F3;*/
///*    background: #f0f8ff;*/
///*}*/
//
///*.new-group-btn {*/
///*    background: #2196F3;*/
///*    color: white;*/
///*    border: none;*/
///*    padding: 10px 20px;*/
///*    border-radius: 6px;*/
///*    cursor: pointer;*/
///*    font-size: 14px;*/
///*    display: inline-flex;*/
///*    align-items: center;*/
///*    gap: 8px;*/
///*}*/
//
///*.new-group-btn:hover {*/
///*    background: #1976D2;*/
///*}*/
//
///*!* Individual groups *!*/
///*.upload-group {*/
///*    background: white;*/
///*    border: 1px solid #e0e0e0;*/
///*    border-radius: 8px;*/
///*    padding: 15px;*/
///*    transition: all .2s ease;*/
///*}*/
//
///*.upload-group.drag-hover {*/
///*    border-color: #2196F3;*/
///*    background: #f0f8ff;*/
///*    box-shadow: 0 2px 8px rgba(33, 150, 243, .2);*/
///*}*/
//
///*.group-header {*/
///*    display: flex;*/
///*    justify-content: space-between;*/
///*    align-items: center;*/
///*    margin-bottom: 15px;*/
///*    padding-bottom: 10px;*/
///*    border-bottom: 1px solid #f0f0f0;*/
///*}*/
//
///*.group-info {*/
///*    flex: 1;*/
///*    display: flex;*/
///*    flex-direction: column;*/
///*    gap: 5px;*/
///*}*/
//
///*.group-name {*/
///*    border: 1px solid #ddd;*/
///*    border-radius: 4px;*/
///*    padding: 6px 10px;*/
///*    font-size: 14px;*/
///*    font-weight: 500;*/
///*    background: white;*/
///*    transition: border-color .2s ease;*/
///*}*/
//
///*.group-name:focus {*/
///*    outline: none;*/
///*    border-color: #2196F3;*/
///*    box-shadow: 0 0 0 2px rgba(33, 150, 243, .2);*/
///*}*/
//
///*.group-name:empty::before {*/
///*    content: "Enter group name...";*/
///*    color: #999;*/
///*    font-style: italic;*/
///*}*/
//
///*.group-count {*/
///*    font-size: 12px;*/
///*    color: #666;*/
///*    font-weight: normal;*/
///*}*/
//
///*.group-actions {*/
///*    display: flex;*/
///*    gap: 8px;*/
///*}*/
//
///*.delete-group {*/
///*    background: #f44336;*/
///*    color: white;*/
///*    border: none;*/
///*    padding: 6px 8px;*/
///*    border-radius: 4px;*/
///*    cursor: pointer;*/
///*    font-size: 12px;*/
///*    transition: background .2s ease;*/
///*}*/
//
///*.delete-group:hover {*/
///*    background: #d32f2f;*/
///*}*/
//
///*!* Group drop zone *!*/
///*.group-drop-zone {*/
///*    min-height: 80px;*/
///*    border: 2px dashed #ccc;*/
///*    border-radius: 6px;*/
///*    display: flex;*/
///*    align-items: center;*/
///*    justify-content: center;*/
///*    margin-bottom: 15px;*/
///*    transition: all .2s ease;*/
///*    background: #fafafa;*/
///*}*/
//
///*.group-drop-zone p {*/
///*    color: #666;*/
///*    font-style: italic;*/
///*    margin: 0;*/
///*    font-size: 14px;*/
///*}*/
//
///*.group-drop-zone.drag-hover {*/
///*    border-color: #4CAF50;*/
///*    background: #f1f8e9;*/
///*}*/
//
///*!* Group items *!*/
///*.group-items {*/
///*    display: grid;*/
///*    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));*/
///*    gap: 10px;*/
///*    margin-bottom: 15px;*/
///*}*/
//
///*.group-item {*/
///*    position: relative;*/
///*    background: white;*/
///*    border: 1px solid #e0e0e0;*/
///*    border-radius: 6px;*/
///*    overflow: hidden;*/
///*    transition: all .2s ease;*/
///*}*/
//
///*.group-item:hover {*/
///*    box-shadow: 0 2px 8px rgba(0,0,0,.1);*/
///*}*/
//
///*.group-item-preview {*/
///*    position: relative;*/
///*    width: 100%;*/
///*    height: 80px;*/
///*    overflow: hidden;*/
///*}*/
//
///*.group-item-preview img {*/
///*    width: 100%;*/
///*    height: 100%;*/
///*    object-fit: cover;*/
///*}*/
//
///*.group-item-overlay {*/
///*    position: absolute;*/
///*    top: 0;*/
///*    right: 0;*/
///*    background: rgba(0,0,0,.7);*/
///*    padding: 4px;*/
///*    opacity: 0;*/
///*    transition: opacity .2s ease;*/
///*}*/
//
///*.group-item:hover .group-item-overlay {*/
///*    opacity: 1;*/
///*}*/
//
///*.remove-from-group {*/
///*    background: #f44336;*/
///*    color: white;*/
///*    border: none;*/
///*    padding: 4px 6px;*/
///*    border-radius: 3px;*/
///*    cursor: pointer;*/
///*    font-size: 10px;*/
///*}*/
//
///*.remove-from-group:hover {*/
///*    background: #d32f2f;*/
///*}*/
//
///*!* Group metadata fields *!*/
///*.group-metadata {*/
///*    padding-top: 15px;*/
///*    border-top: 1px solid #f0f0f0;*/
///*}*/
//
///*.group-metadata .metadata-field {*/
///*    margin-bottom: 12px;*/
///*}*/
//
///*.group-metadata label {*/
///*    display: block;*/
///*    font-size: 12px;*/
///*    font-weight: 500;*/
///*    color: #333;*/
///*    margin-bottom: 4px;*/
///*}*/
//
///*.group-metadata input,*/
///*.group-metadata textarea {*/
///*    width: 100%;*/
///*    border: 1px solid #ddd;*/
///*    border-radius: 4px;*/
///*    padding: 6px 8px;*/
///*    font-size: 13px;*/
///*    transition: border-color .2s ease;*/
///*}*/
//
///*.group-metadata input:focus,*/
///*.group-metadata textarea:focus {*/
///*    outline: none;*/
///*    border-color: #2196F3;*/
///*    box-shadow: 0 0 0 2px rgba(33, 150, 243, .2);*/
///*}*/
//
///*.group-metadata textarea {*/
///*    resize: vertical;*/
///*    min-height: 60px;*/
///*}*/
//
///*!* Drag feedback animations *!*/
///*@keyframes dragHover {*/
///*    0% { transform: scale(1); }*/
///*    50% { transform: scale(1.02); }*/
///*    100% { transform: scale(1); }*/
///*}*/
//
///*.drag-hover {*/
///*    animation: dragHover .6s ease-in-out infinite;*/
///*}*/
//
///*!* Status indicators for grouped uploads *!*/
///*.upload-group[data-status="uploading"] {*/
///*    border-color: #FF9800;*/
///*    background: #fff8f0;*/
///*}*/
//
///*.upload-group[data-status="uploaded"] {*/
///*    border-color: #4CAF50;*/
///*    background: #f1f8e9;*/
///*}*/
//
///*.upload-group[data-status="error"] {*/
///*    border-color: #f44336;*/
///*    background: #ffebee;*/
///*}*/
//
///*!* Progress indicators for groups *!*/
///*.group-progress {*/
///*    height: 3px;*/
///*    background: #f0f0f0;*/
///*    border-radius: 2px;*/
///*    overflow: hidden;*/
///*    margin-top: 10px;*/
///*}*/
//
///*.group-progress-fill {*/
///*    height: 100%;*/
///*    background: #2196F3;*/
///*    transition: width .3s ease;*/
///*    border-radius: 2px;*/
///*}*/
//
///*!* Responsive design *!*/
///*@media (max-width: 768px) {*/
///*    .upload.field.groupable {*/
///*        grid-template-columns: 1fr;*/
///*        gap: 15px;*/
///*    }*/
//
///*    .upload.field.groupable .upload-sidebar {*/
///*        border-left: none;*/
///*        border-top: 2px solid #e0e0e0;*/
///*        padding-left: 0;*/
///*        padding-top: 15px;*/
///*    }*/
//
///*    .group-items {*/
///*        grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));*/
///*        gap: 8px;*/
///*    }*/
//
///*    .groups-container {*/
///*        max-height: 400px;*/
///*    }*/
///*}*/
//
///*!* Accessibility improvements *!*/
///*.upload-item.groupable:focus {*/
///*    outline: 2px solid #2196F3;*/
///*    outline-offset: 2px;*/
///*}*/
//
///*.group-drop-zone:focus-within {*/
///*    border-color: #2196F3;*/
///*    background: #f0f8ff;*/
///*}*/
//
///*!* High contrast mode support *!*/
///*@media (prefers-contrast: high) {*/
///*    .upload-group {*/
///*        border-width: 2px;*/
///*    }*/
//
///*    .group-drop-zone {*/
///*        border-width: 3px;*/
///*    }*/
//
///*    .upload-item.groupable.dragging {*/
///*        border: 3px solid #2196F3;*/
///*    }*/
///*}*/
//
///*!* Selection Controls *!*/
///*.selection-controls {*/
///*    display: flex;*/
///*    align-items: center;*/
///*    gap: 1rem;*/
///*    flex-wrap: wrap;*/
///*}*/
//
///*.selection-actions {*/
///*    display: flex;*/
///*    align-items: center;*/
///*    gap: 1rem;*/
///*    padding: .5rem 1rem;*/
///*    background-color: rgb(var(--action-50));*/
///*    border-radius: var(--radius);*/
///*    color: rgb(var(--contrast));*/
///*    font-size: .9rem;*/
///*}*/
//
///*.selection-actions button {*/
///*    background: rgba(255, 255, 255, .2);*/
///*    border: 1px solid rgba(255, 255, 255, .3);*/
///*    color: inherit;*/
///*    padding: .25rem .5rem;*/
///*    border-radius: var(--radius);*/
///*    display: flex;*/
///*    align-items: center;*/
///*    gap: .25rem;*/
///*}*/
//
///*.selection-actions button:hover {*/
///*    background: rgba(255, 255, 255, .3);*/
///*}*/
//
///*.selection-count {*/
///*    font-weight: bold;*/
///*}*/
//
///*!* Preview Actions *!*/
///*.preview-actions {*/
///*    display: flex;*/
///*    justify-content: space-between;*/
///*    align-items: center;*/
///*    padding: 1rem;*/
///*    background-color: rgb(var(--base-100));*/
///*    border-radius: var(--radius-outer);*/
///*    margin-bottom: 1rem;*/
///*}*/
//
///*!* Upload Item Enhancements *!*/
///*.upload-item {*/
///*    position: relative;*/
///*    background: rgb(var(--base));*/
///*    border-radius: var(--radius);*/
///*    overflow: hidden;*/
///*    cursor: pointer;*/
///*    transition: transform .2s ease, box-shadow .2s ease;*/
///*}*/
//
///*.upload-item:hover {*/
///*    transform: translateY(-2px);*/
///*    box-shadow: rgba(var(--base),var(--op-45)) var(--shdw);*/
///*}*/
//
///*.upload-item[draggable="true"] {*/
///*    cursor: grab;*/
///*}*/
//
///*.upload-item.dragging {*/
///*    cursor: grabbing;*/
///*    opacity: .5;*/
///*    transform: rotate(5deg) scale(.95);*/
///*}*/
//
///*.upload-item.selected {*/
///*    border: 2px solid rgb(var(--action-50));*/
///*    background: rgba(255, 0, 128, .05);*/
///*}*/
//
///*.upload-item .preview {*/
///*    position: relative;*/
///*    aspect-ratio: 1;*/
///*}*/
//
///*.upload-item img {*/
///*    width: 100%;*/
///*    height: 100%;*/
///*    object-fit: cover;*/
///*}*/
//
///*.upload-item .overlay {*/
///*    position: absolute;*/
///*    top: 0;*/
///*    left: 0;*/
///*    right: 0;*/
///*    bottom: 0;*/
///*    background: rgba(0, 0, 0, .6);*/
///*    opacity: 0;*/
///*    transition: opacity .2s ease;*/
///*    display: flex;*/
///*    flex-direction: column;*/
///*    justify-content: space-between;*/
///*    padding: .5rem;*/
///*}*/
//
///*.upload-item:hover .overlay,*/
///*.upload-item.selected .overlay {*/
///*    opacity: 1;*/
///*}*/
//
///*.upload-item .actions input[type="checkbox"] {*/
///*    margin: 0;*/
///*    transform: scale(1.2);*/
///*}*/
//
///*.upload-item .actions label {*/
///*    margin: 0;*/
///*    padding: 0;*/
///*    cursor: pointer;*/
///*}*/
//
///*!* Status Indicator *!*/
///*.upload-item .status {*/
///*    position: absolute;*/
///*    top: .5rem;*/
///*    right: .5rem;*/
///*    width: 1.5rem;*/
///*    height: 1.5rem;*/
///*    border-radius: 50%;*/
///*    background: rgb(var(--base));*/
///*    display: flex;*/
///*    align-items: center;*/
///*    justify-content: center;*/
///*    box-shadow: 0 2px 4px rgba(0, 0, 0, .2);*/
///*}*/
//
///*.upload-item[data-status="processing"] .status {*/
///*    background: var(--warning);*/
///*}*/
//
///*.upload-item[data-status="uploaded"] .status {*/
///*    background: var(--success);*/
///*}*/
//
///*.upload-item[data-status="error"] .status {*/
///*    background: var(--danger);*/
///*}*/
//
///*!* Group Enhancements *!*/
///*.upload-group {*/
///*    background: rgb(var(--base-50));*/
///*    border-radius: var(--radius-outer);*/
///*    padding: 1rem;*/
///*    margin-bottom: 1rem;*/
///*    border: 2px solid transparent;*/
///*    transition: border-color .2s ease, background-color .2s ease;*/
///*}*/
//
///*.upload-group.dragover {*/
///*    border-color: rgb(var(--action-50));*/
///*    background: rgba(255, 0, 128, .05);*/
///*}*/
//
///*.group-header {*/
///*    display: flex;*/
///*    justify-content: space-between;*/
///*    align-items: center;*/
///*    margin-bottom: 1rem;*/
///*}*/
//
///*.group-info {*/
///*    flex: 1;*/
///*    display: flex;*/
///*    flex-direction: column;*/
///*    gap: .25rem;*/
///*}*/
//
///*.group-name {*/
///*    font-size: 1.1rem;*/
///*    font-weight: 500;*/
///*    border: none;*/
///*    background: transparent;*/
///*    color: var(--text);*/
///*    padding: .25rem 0;*/
///*    border-bottom: 1px solid transparent;*/
///*    transition: border-color .2s ease;*/
///*}*/
//
///*.group-name:focus {*/
///*    outline: none;*/
///*    border-bottom-color: rgb(var(--action-50));*/
///*}*/
//
///*.group-count {*/
///*    font-size: .85rem;*/
///*    color: var(--text-muted);*/
///*}*/
//
///*.group-actions {*/
///*    display: flex;*/
///*    gap: .5rem;*/
///*}*/
//
///*.group-actions button {*/
///*    background: rgb(var(--base));*/
///*    border: 1px solid rgb(var(--base-200));*/
///*    border-radius: var(--radius);*/
///*    padding: .5rem;*/
///*    cursor: pointer;*/
///*    transition: all .2s ease;*/
///*    display: flex;*/
///*    align-items: center;*/
///*    justify-content: center;*/
///*}*/
//
///*.group-actions button:hover {*/
///*    background: rgb(var(--action-50));*/
///*    color: rgb(var(--contrast));*/
///*    border-color: rgb(var(--action-50));*/
///*}*/
//
///*.group-actions .delete-group:hover {*/
///*    background: var(--danger);*/
///*    border-color: var(--danger);*/
///*}*/
//
///*!* Group Content *!*/
///*.group-content {*/
///*    min-height: 120px;*/
///*}*/
//
///*.group-drop-zone {*/
///*    border: 2px dashed var(--base-300);*/
///*    border-radius: var(--radius);*/
///*    padding: 2rem;*/
///*    text-align: center;*/
///*    color: var(--text-muted);*/
///*    transition: all .2s ease;*/
///*    cursor: pointer;*/
///*}*/
//
///*.group-drop-zone:hover,*/
///*.group-drop-zone.dragover {*/
///*    border-color: rgb(var(--action-50));*/
///*    background: rgba(255, 0, 128, .05);*/
///*    color: rgb(var(--action-50));*/
///*}*/
//
///*.group-items {*/
///*    display: grid;*/
///*    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));*/
///*    gap: 1rem;*/
///*    padding: 1rem 0;*/
///*}*/
//
///*.group-item {*/
///*    position: relative;*/
///*    aspect-ratio: 1;*/
///*    border-radius: var(--radius);*/
///*    overflow: hidden;*/
///*    background: rgb(var(--base));*/
///*    transition: transform .2s ease;*/
///*}*/
//
///*.group-item:hover {*/
///*    transform: scale(1.02);*/
///*}*/
//
///*.group-item img {*/
///*    width: 100%;*/
///*    height: 100%;*/
///*    object-fit: cover;*/
///*}*/
//
///*.group-item .overlay {*/
///*    position: absolute;*/
///*    top: 0;*/
///*    left: 0;*/
///*    right: 0;*/
///*    bottom: 0;*/
///*    background: rgba(0, 0, 0, .6);*/
///*    opacity: 0;*/
///*    transition: opacity .2s ease;*/
///*    display: flex;*/
///*    align-items: center;*/
///*    justify-content: center;*/
///*    gap: .5rem;*/
///*}*/
//
///*.group-item:hover .overlay {*/
///*    opacity: 1;*/
///*}*/
//
///*.group-item .overlay button {*/
///*    background: rgba(255, 255, 255, .9);*/
///*    border: none;*/
///*    border-radius: 50%;*/
///*    width: 2rem;*/
///*    height: 2rem;*/
///*    display: flex;*/
///*    align-items: center;*/
///*    justify-content: center;*/
///*    cursor: pointer;*/
///*    transition: all .2s ease;*/
///*}*/
//
///*.group-item .set-featured {*/
///*    color: var(--warning);*/
///*}*/
//
///*.group-item .set-featured:hover {*/
///*    background: var(--warning);*/
///*    color: white;*/
///*}*/
//
///*.group-item .remove-from-group:hover {*/
///*    background: var(--danger);*/
///*    color: white;*/
///*}*/
//
///*!* Empty Group State *!*/
///*.empty-group {*/
///*    border: 4px dashed rgb(var(--base-200));*/
///*    border-radius: var(--radius);*/
///*    padding: 2rem;*/
///*    text-align: center;*/
///*    color: var(--text-muted);*/
///*    aspect-ratio: 1;*/
///*    display: flex;*/
///*    align-items: center;*/
///*    justify-content: center;*/
///*    cursor: pointer;*/
///*    transition: all .2s ease;*/
///*}*/
//
///*.empty-group:hover,*/
///*.empty-group.dragover {*/
///*    border-color: rgb(var(--action-50));*/
///*    background: rgba(255, 0, 128, .05);*/
///*    color: rgb(var(--action-50));*/
///*}*/
//
///*!* Sidebar *!*/
///*.sidebar {*/
///*    background: rgb(var(--base-50));*/
///*    border-radius: var(--radius-outer);*/
///*    padding: 1.5rem;*/
///*    min-height: 400px;*/
///*}*/
//
///*.sidebar .header {*/
///*    margin-bottom: 1.5rem;*/
///*}*/
//
///*.sidebar h4 {*/
///*    margin: 0 0 .5rem 0;*/
///*    color: var(--text);*/
///*}*/
//
///*.sidebar .hint {*/
///*    font-size: .85rem;*/
///*    color: var(--text-muted);*/
///*    margin: .25rem 0;*/
///*}*/
//
///*.new-group {*/
///*    width: 100%;*/
///*    background: rgb(var(--action-50));*/
///*    color: rgb(var(--contrast));*/
///*    border: none;*/
///*    border-radius: var(--radius);*/
///*    padding: .75rem;*/
///*    margin-bottom: 1rem;*/
///*    cursor: pointer;*/
///*    display: flex;*/
///*    align-items: center;*/
///*    justify-content: center;*/
///*    gap: .5rem;*/
///*    font-weight: 500;*/
///*    transition: background-color .2s ease;*/
///*}*/
//
///*.new-group:hover {*/
///*    background: rgba(255, 0, 128, .8);*/
///*}*/
//
///*!* Layout *!*/
///*.group-display {*/
///*    display: grid;*/
///*    grid-template-columns: 2fr 1fr;*/
///*    gap: 2rem;*/
///*    margin-top: 2rem;*/
///*}*/
//
///*.preview-wrap {*/
///*    min-height: 400px;*/
///*}*/
//
///*.preview-grid {*/
///*    display: grid;*/
///*    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));*/
///*    gap: 1rem;*/
///*    padding: 1rem;*/
///*    background: rgb(var(--base-100));*/
///*    border-radius: var(--radius-outer);*/
///*    min-height: 200px;*/
///*}*/
//
///*.preview-grid:empty::after {*/
///*    content: "No images uploaded yet. Drag files here or click to upload.";*/
///*    grid-column: 1 / -1;*/
///*    text-align: center;*/
///*    color: var(--text-muted);*/
///*    padding: 2rem;*/
///*    border: 2px dashed var(--base-300);*/
///*    border-radius: var(--radius);*/
///*}*/
//
///*!* File Upload Container *!*/
///*.file-upload-container.dragover {*/
///*    border-color: rgb(var(--action-50));*/
///*    background: rgba(255, 0, 128, .05);*/
///*}*/
//
///*!* Responsive Design *!*/
///*@media (max-width: 768px) {*/
///*    .group-display {*/
///*        grid-template-columns: 1fr;*/
///*        gap: 1rem;*/
///*    }*/
//
///*    .preview-actions {*/
///*        flex-direction: column;*/
///*        align-items: stretch;*/
///*        gap: 1rem;*/
///*    }*/
//
///*    .selection-controls {*/
///*        justify-content: space-between;*/
///*    }*/
//
///*    .preview-grid {*/
///*        grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));*/
///*    }*/
//
///*    .group-items {*/
///*        grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));*/
///*    }*/
///*}*/
//
///*!* Animation for upload progress *!*/
///*@keyframes uploadProgress {*/
///*    0% { transform: translateX(-100%); }*/
///*    100% { transform: translateX(100%); }*/
///*}*/
//
///*.upload-item[data-status="uploading"] .progress .bar::after {*/
///*    content: '';*/
///*    position: absolute;*/
///*    top: 0;*/
///*    left: 0;*/
///*    height: 100%;*/
///*    width: 20%;*/
///*    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .5), transparent);*/
///*    animation: uploadProgress 1.5s infinite;*/
///*}*/
//
///*!* Accessibility *!*/
///*.upload-item:focus-within,*/
///*.group-item:focus-within,*/
///*.upload-group:focus-within {*/
///*    outline: 2px solid rgb(var(--action-50));*/
///*    outline-offset: 2px;*/
///*}*/
//
///*!* High contrast mode support *!*/
///*@media (prefers-contrast: high) {*/
///*    .upload-item.selected {*/
///*        border-width: 3px;*/
///*    }*/
//
///*    .group-drop-zone.dragover {*/
///*        border-width: 3px;*/
///*    }*/
///*}*/
///*.restore-notification {*/
///*    background: linear-gradient(135deg, #fff3cd 0%, #ffeaa7 100%);*/
///*    border: 1px solid #ffc107;*/
///*    border-left: 4px solid #ff6b35;*/
///*    border-radius: var(--radius-outer);*/
///*    padding: 1.5rem;*/
///*    margin-bottom: 1.5rem;*/
///*    box-shadow: 0 4px 12px rgba(255, 107, 53, .15);*/
///*    animation: slideInFromTop .4s ease-out;*/
///*    transition: opacity .3s ease, transform .3s ease;*/
///*}*/
//
///*@keyframes slideInFromTop {*/
///*    from {*/
///*        transform: translateY(-20px);*/
///*        opacity: 0;*/
///*    }*/
///*    to {*/
///*        transform: translateY(0);*/
///*        opacity: 1;*/
///*    }*/
///*}*/
//
///*.restore-content {*/
///*    display: grid;*/
///*    grid-template-columns: auto 1fr auto;*/
///*    gap: 1rem;*/
///*    align-items: start;*/
///*}*/
//
///*.restore-icon {*/
///*    font-size: 1.5rem;*/
///*    color: #ff6b35;*/
///*    display: flex;*/
///*    align-items: center;*/
///*    justify-content: center;*/
///*    width: 2.5rem;*/
///*    height: 2.5rem;*/
///*    background: rgba(255, 107, 53, .1);*/
///*    border-radius: 50%;*/
///*    flex-shrink: 0;*/
///*}*/
//
///*.restore-message {*/
///*    min-width: 0; !* Allow text to wrap *!*/
///*}*/
//
///*.restore-message h4 {*/
///*    margin: 0 0 .5rem 0;*/
///*    color: #d63384;*/
///*    font-size: 1.1rem;*/
///*    font-weight: 600;*/
///*}*/
//
///*.restore-message p {*/
///*    margin: 0 0 .5rem 0;*/
///*    color: #6c5419;*/
///*    line-height: 1.4;*/
///*}*/
//
///*.restore-message p:last-child {*/
///*    margin-bottom: 0;*/
///*}*/
//
///*.restore-message .warning {*/
///*    background: rgba(220, 53, 69, .1);*/
///*    border: 1px solid rgba(220, 53, 69, .2);*/
///*    border-radius: var(--radius);*/
///*    padding: .5rem .75rem;*/
///*    margin-top: .75rem;*/
///*    font-size: .9rem;*/
///*}*/
//
///*.restore-message .warning strong {*/
///*    color: #dc3545;*/
///*}*/
//
///*.restore-actions {*/
///*    display: flex;*/
///*    flex-direction: column;*/
///*    gap: .5rem;*/
///*    flex-shrink: 0;*/
///*}*/
//
///*.start-over-btn {*/
///*    background: #dc3545;*/
///*    color: white;*/
///*    border: none;*/
///*    border-radius: var(--radius);*/
///*    padding: .5rem 1rem;*/
///*    font-size: .9rem;*/
///*    font-weight: 500;*/
///*    cursor: pointer;*/
///*    transition: all .2s ease;*/
///*    white-space: nowrap;*/
///*}*/
//
///*.start-over-btn:hover {*/
///*    background: #c82333;*/
///*    transform: translateY(-1px);*/
///*    box-shadow: 0 2px 4px rgba(220, 53, 69, .3);*/
///*}*/
//
///*.start-over-btn:active {*/
///*    transform: translateY(0);*/
///*}*/
//
///*.dismiss-notification {*/
///*    background: transparent;*/
///*    border: 1px solid #6c5419;*/
///*    color: #6c5419;*/
///*    border-radius: var(--radius);*/
///*    padding: .5rem;*/
///*    cursor: pointer;*/
///*    transition: all .2s ease;*/
///*    display: flex;*/
///*    align-items: center;*/
///*    justify-content: center;*/
///*    width: 2rem;*/
///*    height: 2rem;*/
///*}*/
//
///*.dismiss-notification:hover {*/
///*    background: #6c5419;*/
///*    color: white;*/
///*}*/
//
///*!* Start Over Confirmation Dialog *!*/
///*.start-over-confirmation {*/
///*    border: none;*/
///*    border-radius: var(--radius-outer);*/
///*    padding: 0;*/
///*    box-shadow: 0 10px 30px rgba(0, 0, 0, .3);*/
///*    max-width: 500px;*/
///*    width: 90vw;*/
///*}*/
//
///*.start-over-confirmation::backdrop {*/
///*    background: rgba(0, 0, 0, .6);*/
///*    backdrop-filter: blur(4px);*/
///*}*/
//
///*.confirmation-content {*/
///*    padding: 2rem;*/
///*    background: rgb(var(--base));*/
///*    border-radius: var(--radius-outer);*/
///*}*/
//
///*.confirmation-content h3 {*/
///*    margin: 0 0 1rem 0;*/
///*    color: #dc3545;*/
///*    font-size: 1.25rem;*/
///*    display: flex;*/
///*    align-items: center;*/
///*    gap: .5rem;*/
///*}*/
//
///*.confirmation-content h3::before {*/
///*    content: "⚠️";*/
///*    font-size: 1.5rem;*/
///*}*/
//
///*.confirmation-content p {*/
///*    margin: 0 0 1rem 0;*/
///*    color: var(--text);*/
///*    line-height: 1.5;*/
///*}*/
//
///*.confirmation-content ul {*/
///*    margin: 0 0 1rem 1rem;*/
///*    color: var(--text);*/
///*}*/
//
///*.confirmation-content li {*/
///*    margin-bottom: .25rem;*/
///*}*/
//
///*.confirmation-actions {*/
///*    display: flex;*/
///*    gap: 1rem;*/
///*    justify-content: flex-end;*/
///*    margin-top: 1.5rem;*/
///*    padding-top: 1rem;*/
///*    border-top: 1px solid rgb(var(--base-200));*/
///*}*/
//
///*.confirm-start-over {*/
///*    background: #dc3545;*/
///*    color: white;*/
///*    border: none;*/
///*    border-radius: var(--radius);*/
///*    padding: .75rem 1.5rem;*/
///*    font-weight: 500;*/
///*    cursor: pointer;*/
///*    transition: all .2s ease;*/
///*}*/
//
///*.confirm-start-over:hover {*/
///*    background: #c82333;*/
///*}*/
//
///*.cancel-start-over {*/
///*    background: rgb(var(--base-100));*/
///*    color: var(--text);*/
///*    border: 1px solid var(--base-300);*/
///*    border-radius: var(--radius);*/
///*    padding: .75rem 1.5rem;*/
///*    cursor: pointer;*/
///*    transition: all .2s ease;*/
///*}*/
//
///*.cancel-start-over:hover {*/
///*    background: rgb(var(--base-200));*/
///*}*/
//
///*!* Responsive Design *!*/
///*@media (max-width: 768px) {*/
///*    .restore-content {*/
///*        grid-template-columns: 1fr;*/
///*        gap: 1rem;*/
///*        text-align: center;*/
///*    }*/
//
///*    .restore-icon {*/
///*        margin: 0 auto;*/
///*    }*/
//
///*    .restore-actions {*/
///*        flex-direction: row;*/
///*        justify-content: center;*/
///*        align-items: center;*/
///*    }*/
//
///*    .start-over-btn {*/
///*        order: 2;*/
///*    }*/
//
///*    .dismiss-notification {*/
///*        order: 1;*/
///*    }*/
//
///*    .confirmation-actions {*/
///*        flex-direction: column-reverse;*/
///*    }*/
//
///*    .confirmation-actions button {*/
///*        width: 100%;*/
///*    }*/
///*}*/
//
///*!* Reduced motion preference *!*/
///*@media (prefers-reduced-motion: reduce) {*/
///*    .restore-notification {*/
///*        animation: none;*/
///*    }*/
//
///*    .start-over-btn:hover {*/
///*        transform: none;*/
///*    }*/
///*}*/
//
///*!* High contrast mode *!*/
///*@media (prefers-contrast: high) {*/
///*    .restore-notification {*/
///*        border-width: 2px;*/
///*        border-left-width: 6px;*/
///*    }*/
//
///*    .restore-message .warning {*/
///*        border-width: 2px;*/
///*    }*/
///*}*/
//
///*!* Dark mode adjustments *!*/
///*@media (prefers-color-scheme: dark) {*/
///*    .restore-notification {*/
///*        background: linear-gradient(135deg, #3d3d00 0%, #4a4a00 100%);*/
///*        border-color: #ffc107;*/
///*        color: #fff3cd;*/
///*    }*/
//
///*    .restore-message p {*/
///*        color: #fff3cd;*/
///*    }*/
//
///*    .restore-message .warning {*/
///*        background: rgba(220, 53, 69, .2);*/
///*        border-color: rgba(220, 53, 69, .4);*/
///*        color: #ffb3ba;*/
///*    }*/
//
///*    .dismiss-notification {*/
///*        border-color: #fff3cd;*/
///*        color: #fff3cd;*/
///*    }*/
//
///*    .dismiss-notification:hover {*/
///*        background: #fff3cd;*/
///*        color: #3d3d00;*/
///*    }*/
///*}*/
//
///*.dragover {*/
///*    background-color: rgba(var(--primary-rgb), .1);*/
///*    border: 2px dashed var(--primary-color);*/
///*    border-radius: 8px;*/
///*}*/
//
///*.upload-item.dragging {*/
///*    opacity: .5;*/
///*    transform: scale(.95);*/
///*    transition: all .2s ease;*/
///*}*/
//
///*.group-drop-zone {*/
///*    min-height: 60px;*/
///*    border: 2px dashed #ccc;*/
///*    border-radius: 8px;*/
///*    display: flex;*/
///*    align-items: center;*/
///*    justify-content: center;*/
///*    color: #666;*/
///*    transition: all .2s ease;*/
///*}*/
//
///*.group-drop-zone.dragover {*/
///*    border-color: var(--primary-color);*/
///*    background-color: rgba(var(--primary-rgb), .05);*/
///*    color: var(--primary-color);*/
///*}*/
//
///*.empty-group {*/
///*    padding: 20px;*/
///*    text-align: center;*/
///*    border: 2px dashed #ddd;*/
///*    border-radius: 8px;*/
///*    margin: 10px 0;*/
///*    cursor: pointer;*/
///*    transition: all .2s ease;*/
///*}*/
//
///*.empty-group:hover {*/
///*    border-color: var(--primary-color);*/
///*    background-color: rgba(var(--primary-rgb), .02);*/
///*}*/
//
///*.group-item.featured {*/
///*    border: 2px solid gold;*/
///*    position: relative;*/
///*}*/
//
///*.group-item.featured::after {*/
///*    content: "⭐";*/
///*    position: absolute;*/
///*    top: 5px;*/
///*    right: 5px;*/
///*    background: gold;*/
///*    border-radius: 50%;*/
///*    width: 20px;*/
///*    height: 20px;*/
///*    display: flex;*/
///*    align-items: center;*/
///*    justify-content: center;*/
///*    font-size: 12px;*/
///*}*/
//
///*.upload-item[draggable="true"] {*/
///*    cursor: grab;*/
///*}*/
//
///*.upload-item[draggable="true"]:active {*/
///*    cursor: grabbing;*/
///*}*/
//
///*.selection-actions {*/
///*    display: flex;*/
///*    align-items: center;*/
///*    gap: 10px;*/
///*    padding: 10px;*/
///*    background: rgba(var(--primary-rgb), .05);*/
///*    border-radius: 6px;*/
///*    border: 1px solid rgba(var(--primary-rgb), .2);*/
///*}*/
//
///*.group-display .sidebar {*/
///*    min-width: 300px;*/
///*    max-width: 350px;*/
///*    background: #f9f9f9;*/
///*    border-left: 1px solid #eee;*/
///*    padding: 20px;*/
///*}*/
//
///*.group-display .preview-wrap {*/
///*    flex: 1;*/
///*    padding: 20px;*/
///*}*/
//
///*.group-display {*/
///*    display: flex;*/
///*    gap: 20px;*/
///*    margin-top: 20px;*/
///*    border: 1px solid #ddd;*/
///*    border-radius: 8px;*/
///*    overflow: hidden;*/
///*}*/
//
///* Touch Drag & Drop Styles */
//
///* Original item being dragged */
//.upload-item.dragging {
// opacity: .5;
// transform: scale(.95);
// transition: opacity .2s ease, transform .2s ease;
//}
//
///* Touch drag preview element */
//.drag-preview {
// background: var(--bg-elevated);
// border: 2px solid var(--accent-primary);
// cursor: grabbing;
// user-select: none;
// -webkit-user-select: none;
// -webkit-user-drag: none;
//}
//
//.drag-preview * {
// pointer-events: none;
//}
//
///* Drop target states for touch */
//.dragover {
// background-color: var(--accent-primary-alpha);
// border: 2px dashed var(--accent-primary);
// transform: scale(1.02);
// transition: all .2s ease;
//}
//
//.dragover::after {
// content: "Drop here";
// position: absolute;
// top: 50%;
// left: 50%;
// transform: translate(-50%, -50%);
// background: var(--accent-primary);
// color: white;
// padding: 8px 16px;
// border-radius: 4px;
// font-size: 14px;
// font-weight: 500;
// z-index: 1;
// pointer-events: none;
//}
//
///* Enhanced touch targets for mobile */
//@media (hover: none) and (pointer: coarse) {
// .upload-item {
//    min-height: 44px; /* Apple's recommended minimum touch target */
//    touch-action: manipulation;
// }
//
// .upload-item [data-upload-id] {
//    cursor: grab;
//    -webkit-user-select: none;
//    user-select: none;
// }
//
// .upload-item.dragging {
//    cursor: grabbing;
// }
//
// /* Larger touch targets for action buttons */
// .upload-item .actions button {
//    min-width: 44px;
//    min-height: 44px;
//    padding: 12px;
// }
//
// /* Group containers more touch-friendly */
// .item-grid.groups .empty-group {
//    padding: 20px;
//    display: flex;
//    align-items: center;
//    justify-content: center;
//    font-size: 16px;
// }
//
// .group-content {
//    padding: 0;
//    width: 100%;
// }
//
// /* Better visual feedback for group areas */
// .item-grid.group,
// .item-grid.groups {
//    border: 2px solid transparent;
//    border-radius: 8px;
//    transition: border-color .2s ease, background-color .2s ease;
// }
//
// .item-grid.group.dragover,
// .item-grid.groups.dragover {
//    border-color: var(--accent-primary);
//    background-color: var(--accent-primary-alpha);
// }
//}
//
///* Haptic feedback animation */
//@keyframes feedback {
// 0% { transform: scale(1); }
// 50% { transform: scale(1.05); }
// 100% { transform: scale(1); }
//}
//
//.feedback {
// animation: feedback .2s ease;
//}
//
///* Prevent text selection during touch drag */
//.dragging,
//.dragging * {
// -webkit-user-select: none;
// -moz-user-select: none;
// -ms-user-select: none;
// user-select: none;
//}
//
///* Long press visual feedback */
//.upload-item:active {
// transform: scale(.98);
// transition: transform .1s ease;
//}
//
///* Better spacing for touch interfaces */
//@media (hover: none) {
//
// .item-grid.groups {
//    gap: 16px;
// }
//
// .group-item {
//    margin: 8px;
// }
//}
//
///* Accessibility improvements for touch */
//.upload-item:focus-visible {
// outline: 3px solid var(--accent-primary);
// outline-offset: 2px;
//}
//
///* High contrast mode support */
//@media (prefers-contrast: high) {
// .dragover {
//    border-width: 3px;
//    border-style: solid;
// }
//
// .drag-preview {
//    border-width: 3px;
// }
//}
///* Touch Drag & Drop Styles */
//
///* Original item being dragged */
//.upload-item.dragging {
// opacity: .5;
// transform: scale(.95);
// transition: opacity .2s ease, transform .2s ease;
//}
//
///* Touch drag preview element */
//.drag-preview {
// background: var(--bg-elevated);
// border: 2px solid var(--accent-primary);
// cursor: grabbing;
// user-select: none;
// -webkit-user-select: none;
// -webkit-user-drag: none;
//}
//
//.drag-preview * {
// pointer-events: none;
//}
//
///* Multi-item drag preview */
//.drag-preview.multi-item {
// /* Container styles handled in JS for dynamic positioning */
//}
//.drag-preview img {
// max-width: 200px;
// width: 100%;
// height: 100%;
// aspect-ratio: 1;
//}
//
//.drag-preview.multi-item .selection-count-badge {
// background: var(--accent-primary);
// color: white;
// border: 2px solid white;
// font-weight: bold;
// text-shadow: 0 1px 2px rgba(0,0,0,.5);
//}
//
///* Enhanced visual feedback for multiple selection */
//.upload-item.selected.dragging {
// opacity: .3;
// transform: scale(.9);
// border: 2px solid var(--accent-primary);
//}
//
///* Stacked preview animation */
//@keyframes stack-preview {
// 0% {
//    transform: translateX(0) translateY(0) rotate(0deg) scale(1);
//    opacity: 1;
// }
// 100% {
//    transform: translateX(var(--stack-x, 0)) translateY(var(--stack-y, 0)) rotate(var(--stack-rotation, 0deg)) scale(1.05);
//    opacity: var(--stack-opacity, .8);
// }
//}
//
//.drag-preview.multi-item > * {
// animation: stack-preview .2s ease-out forwards;
//}
//
///* Drop target states for touch */
//.dragover {
// background-color: var(--accent-primary-alpha);
// border: 2px dashed var(--accent-primary);
// transform: scale(1.02);
// transition: all .2s ease;
//}
//
//.dragover::after {
// content: "Drop here";
// position: absolute;
// top: 50%;
// left: 50%;
// transform: translate(-50%, -50%);
// background: var(--accent-primary);
// color: white;
// padding: 8px 16px;
// border-radius: 4px;
// font-size: 14px;
// font-weight: 500;
// z-index: 1;
// pointer-events: none;
//}
//
///* Enhanced drop feedback for multiple items */
//.dragover.multi-drop::after {
// content: "Drop " attr(data-item-count) " items here";
// padding: 10px 20px;
// font-size: 16px;
// border-radius: 6px;
// box-shadow: 0 4px 12px rgba(0,0,0,.3);
//}
//
///* Pulsing animation for multi-item drop zones */
//.dragover.multi-drop {
// animation: multi-drop-pulse 1s infinite alternate;
//}
//
//@keyframes multi-drop-pulse {
// 0% {
//    background-color: var(--accent-primary-alpha);
//    transform: scale(1.02);
// }
// 100% {
//    background-color: var(--accent-secondary-alpha, var(--accent-primary-alpha));
//    transform: scale(1.04);
// }
//}
//
///* Enhanced touch targets for mobile */
//@media (hover: none) and (pointer: coarse) {
// .upload-item {
//    min-height: 44px; /* Apple's recommended minimum touch target */
//    touch-action: manipulation;
// }
//
// .upload-item [data-upload-id] {
//    cursor: grab;
//    -webkit-user-select: none;
//    user-select: none;
// }
//
// .upload-item.dragging {
//    cursor: grabbing;
// }
//
// /* Larger touch targets for action buttons */
// .upload-item .actions button {
//    min-width: 44px;
//    min-height: 44px;
//    padding: 12px;
// }
//
// /* Group containers more touch-friendly */
// .item-grid.groups .empty-group {
//    padding: 1rem;
//    margin: 1rem;
//    display: flex;
//    align-items: center;
//    justify-content: center;
//    font-size: 16px;
// }
//
// /* Better visual feedback for group areas */
// .item-grid.group,
// .item-grid.groups {
//    border: 2px solid transparent;
//    border-radius: 8px;
//    transition: border-color .2s ease, background-color .2s ease;
// }
//
// .item-grid.group.dragover,
// .item-grid.groups.dragover {
//    border-color: var(--accent-primary);
//    background-color: var(--accent-primary-alpha);
// }
//}
//
///* Haptic feedback animation */
//@keyframes feedback {
// 0% { transform: scale(1); }
// 50% { transform: scale(1.05); }
// 100% { transform: scale(1); }
//}
//
//.feedback {
// animation: feedback .2s ease;
//}
//
///* Prevent text selection during touch drag */
//.dragging,
//.dragging * {
// -webkit-user-select: none;
// -moz-user-select: none;
// -ms-user-select: none;
// user-select: none;
//}
//
///* Long press visual feedback */
//.upload-item:active {
// transform: scale(.98);
// transition: transform .1s ease;
//}
//
///* Better spacing for touch interfaces */
//@media (hover: none) {
//
// .item-grid.groups {
//    gap: 16px;
// }
//
// .group-item {
//    margin: 8px;
// }
//}
//
///* Accessibility improvements for touch */
//.upload-item:focus-visible {
// outline: 3px solid var(--accent-primary);
// outline-offset: 2px;
//}
//
///* Enhanced selection states for touch */
//.upload-item.selected {
// border: 2px solid var(--accent-primary);
// background-color: var(--accent-primary-alpha);
//}
//
//.upload-item.selected.dragging {
// border-color: var(--accent-secondary);
// background-color: var(--accent-secondary-alpha);
//}
//
///* Touch feedback animations */
//.feedback-start {
// animation: feedback-start .3s ease;
//}
//
//.feedback-success {
// animation: feedback-success .5s ease;
//}
//
//.feedback-error {
// animation: feedback-error .5s ease;
//}
//
//@keyframes feedback-start {
// 0% { transform: scale(1); }
// 50% { transform: scale(1.05); background-color: var(--accent-primary-alpha); }
// 100% { transform: scale(1); }
//}
//
//@keyframes feedback-success {
// 0% { transform: scale(1); }
// 25% { transform: scale(1.1); background-color: var(--success-alpha); }
// 50% { transform: scale(1.05); }
// 100% { transform: scale(1); }
//}
//
//@keyframes feedback-error {
// 0% { transform: translateX(0); }
// 25% { transform: translateX(-5px); background-color: var(--error-alpha); }
// 50% { transform: translateX(5px); }
// 75% { transform: translateX(-3px); }
// 100% { transform: translateX(0); }
//}
//
///* Multi-selection visual enhancements */
//.upload-item.selected::after {
// content: "✓";
// position: absolute;
// top: 8px;
// right: 8px;
// background: var(--accent-primary);
// color: white;
// border-radius: 50%;
// width: 20px;
// height: 20px;
// display: flex;
// align-items: center;
// justify-content: center;
// font-size: 12px;
// font-weight: bold;
// z-index: 10;
//}
//
///* Selection count in drag preview */
//.selection-count-badge {
// animation: badge-appear .3s ease;
//}
//
//@keyframes badge-appear {
// 0% {
//    transform: scale(0);
//    opacity: 0;
// }
// 50% {
//    transform: scale(1.2);
//    opacity: 1;
// }
// 100% {
//    transform: scale(1);
//    opacity: 1;
// }
//}
//
///* High contrast mode support */
//@media (prefers-contrast: high) {
// .dragover {
//    border-width: 3px;
//    border-style: solid;
// }
//
// .drag-preview {
//    border-width: 3px;
// }
//
// .upload-item.selected {
//    border-width: 3px;
// }
//}
//
//.drag-preview.multi-item {
// position: relative;
// width: 120px !important;
// height: 120px !important;
// /* Ensure consistent sizing for multi-item previews */
//}
//
//.drag-preview.multi-item img {
// max-width: 100%;
// max-height: 100%;
// width: 100%;
// height: 100%;
// object-fit: cover;
// aspect-ratio: 1;
// border-radius: 6px;
//}
//
///* Fix stacked item positioning */
//.drag-preview.multi-item > .upload-item {
// position: absolute;
// width: 100%;
// height: 100%;
// border-radius: 6px;
// overflow: hidden;
//}
//
//.drag-preview.multi-item > .upload-item:nth-child(1) {
// top: 0;
// left: 0;
// z-index: 3;
// opacity: 1;
// transform: rotate(-2deg);
//}
//
//.drag-preview.multi-item > .upload-item:nth-child(2) {
// top: 4px;
// left: 4px;
// z-index: 2;
// opacity: .85;
// transform: rotate(1deg);
//}
//
//.drag-preview.multi-item > .upload-item:nth-child(3) {
// top: 8px;
// left: 8px;
// z-index: 1;
// opacity: .7;
// transform: rotate(-1deg);
//}
//
///* Selection count badge positioning */
//.drag-preview.multi-item .selection-count-badge {
// position: absolute;
// top: -8px;
// right: -8px;
// background: var(--accent-primary);
// color: white;
// border: 2px solid white;
// border-radius: 50%;
// width: 28px;
// height: 28px;
// display: flex;
// align-items: center;
// justify-content: center;
// font-size: 12px;
// font-weight: bold;
// font-family: system-ui, -apple-system, sans-serif;
// box-shadow: 0 2px 8px rgba(0,0,0,.3);
// z-index: 20;
// line-height: 1;
//}
//
///* Ensure drag preview is always visible */
//.drag-preview {
// pointer-events: none;
// z-index: 10000 !important;
//}
//
///* Remove any transforms that might interfere with positioning */
//.drag-preview.multi-item .upload-item .progress,
//.drag-preview.multi-item .upload-item .actions,
//.drag-preview.multi-item .upload-item .status,
//.drag-preview.multi-item .upload-item details {
// display: none !important;
//}
//
///* Clean up the visual during multi-drag */
//.upload-item.selected.dragging {
// opacity: .3;
// transform: scale(.95);
// border: 2px dashed var(--accent-primary);
// background-color: var(--accent-primary-alpha);
//}
//
///* Improved drop zone feedback for multiple items */
//.dragover.multi-drop {
// animation: multi-drop-pulse .8s infinite ease-in-out;
// border-style: solid;
//}
//
//@keyframes multi-drop-pulse {
// 0%, 100% {
//    background-color: var(--accent-primary-alpha);
//    transform: scale(1.02);
//    border-color: var(--accent-primary);
// }
// 50% {
//    background-color: var(--accent-secondary-alpha, var(--accent-primary-alpha));
//    transform: scale(1.04);
//    border-color: var(--accent-secondary, var(--accent-primary));
// }
//}
//
///* Enhanced feedback for successful drops */
//@keyframes drop-success {
// 0% {
//    background-color: var(--success-alpha);
//    transform: scale(1.1);
// }
// 100% {
//    background-color: transparent;
//    transform: scale(1);
// }
//}
//
//.drop-success {
// animation: drop-success .6s ease-out;
//}
//
//.drag-preview {
// border: 2px solid red !important;
// background: rgba(255, 0, 0, .1) !important;
//}
//
//.drag-preview.multi-item {
// border: 2px solid blue !important;
// background: rgba(0, 0, 255, .1) !important;
//}
//
//.dragging {
// opacity: .5 !important;
// border: 2px dashed orange !important;
//}
//
//.dragover {
// background: rgba(0, 255, 0, .2) !important;
// border: 2px dashed green !important;
//}
//
//.dragover.multi-drop::before {
// content: "Drop " attr(data-item-count) " items here";
// position: absolute;
// top: 50%;
// left: 50%;
// transform: translate(-50%, -50%);
// background: rgba(0, 0, 0, .8);
// color: white;
// padding: 8px 16px;
// border-radius: 4px;
// font-size: 14px;
// font-weight: bold;
// z-index: 1000;
// pointer-events: none;
//}
//
//.drag-preview {
// /* Ensure drag preview is always visible */
// position: fixed !important;
// z-index: 9999 !important;
// pointer-events: none !important;
//
// /* Improve visual appearance */
// box-shadow: 0 8px 25px rgba(0,0,0,.3);
// border-radius: 8px;
// overflow: hidden;
//
// /* Ensure it's not affected by parent transforms or overflow */
// transform-style: preserve-3d;
//}
//
//.drag-preview.multi-item {
// /* Ensure proper stacking context for multi-item previews */
// isolation: isolate;
//}
//
//.drag-preview .upload-item {
// /* Ensure child items are positioned correctly */
// border-radius: 4px;
// overflow: hidden;
// box-shadow: 0 2px 8px rgba(0,0,0,.15);
//}
//
//.drag-preview .upload-item img {
// /* Prevent image layout issues during drag */
// max-width: 100%;
// height: auto;
// display: block;
//}
//
///* Debug styles - remove in production */
//.drag-preview {
// border: 2px solid red !important;
//}
//
//.drag-preview.multi-item {
// border: 2px solid blue !important;
//}
//
///* Hide complex UI elements in drag preview */
//.drag-preview details,
//.drag-preview .actions,
//.drag-preview .progress {
// display: none !important;
//}
//
///* Simplify the preview to just show the image */
//.drag-preview .preview {
// width: 100% !important;
// height: 100% !important;
//}
//
//.drag-preview .preview img {
// width: 100% !important;
// height: 100% !important;
// object-fit: cover !important;
//}
//
//
//.upload-group summary {
// padding: 0!important;
//}
//
//
///* Mobile-First Image Grouping Layout - Using Existing Templates */
//
///* Base mobile layout - stack everything vertically */
//@media (max-width: 768px) {
//
// .item-grid.preview details,
// .item-grid.group details {
//    display: none;
// }
// .group-display {
//    display: flex;
//    flex-direction: column;
//    gap: 0;
//    height: calc(100vh - var(--btn) - var(--btn));
//    position: fixed;
//    top: var(--btn);
//    bottom: var(--btn);
//    left: 0;
//    right: 0;
//    z-index:999;
// }
//
// .preview-wrap,
// .sidebar {
//    flex: 1;
//    display: flex;
//    flex-direction: column;
//    min-height: 0;
//    overflow: hidden;
//    overflow-y: auto;
// }
// /* Preview section - top half of screen */
// .preview-wrap {
//    background: rgb(var(--base));
//    border-bottom: 2px solid rgb(var(--action-0));
// }
//
// /* Preview actions - sticky at top */
// .preview-actions {
//    position: sticky;
//    top: 0;
//    z-index: 10;
//    background: rgb(var(--base));
//    border-bottom: 1px solid rgb(var(--base-200));
//    flex-shrink: 0;
// }
//
// /* Preview grid - scrollable area */
// .item-grid.preview {
//    flex: 1;
//    grid-template-columns: repeat(3, 1fr);
//    gap: .75rem;
//    padding: .5rem;
//    margin-top: 0;
// }
// .item-grid + .hint {
//    margin-top: 0;
// }
//
// /* Groups section - bottom half with sticky header */
// .sidebar {
//    background: rgb(var(--base-200));
//    border-top: 3px solid rgb(var(--action-50));
// }
//
// /* Groups header - sticky */
// .sidebar .header {
//    border-bottom: 1px solid rgb(var(--base-200));
//    padding: 1rem;
//    flex-shrink: 0;
// }
//
// /* Create group button */
// .create-group-from-selection {
//    margin: 0 1rem 1rem 1rem;
//    flex-shrink: 0;
//    min-height: 44px; /* Touch target */
//    padding: .75rem 1rem;
//    font-size: .9rem;
// }
//
// /* Groups container - scrollable */
// .item-grid.groups {
//    flex: 1;
//    margin: 0;
//    grid-template-columns: repeat(2, 1fr); /* Single column on mobile */
//    gap: 1rem;
// }
//
// /* Enhanced empty group for mobile */
// .empty-group {
//    aspect-ratio: unset;
//    grid-column: 1/-1;
//    transition: all .2s ease;
// }
//
// .item-grid.groups .item-grid {
//    grid-template-columns: repeat(3, 1fr);
// }
// .item-grid.groups .item-grid details {
//    display: none;
// }
//
// .empty-group:hover,
// .empty-group.dragover {
//    border-color: rgb(var(--action-0));
//    background: var(--action-rgb-subtle-hover);
//    transform: scale(1.02);
// }
//
// /* Upload button - fixed at bottom */
// .submit-uploads {
//    position: fixed !important;
//    bottom: calc(var(--btn) + .5rem);
//    right: .5rem;
//    z-index: 20;
//    height: 3rem;
//    font-size: 1.1rem;
//    font-weight: 600;
//    box-shadow: rgba(var(--base),var(--op-45)) var(--shdw);
//    border-radius: var(--radius-outer);
// }
//
// .submit-uploads:hover {
//    transform: translateY(-2px);
//    box-shadow: 0 8px 25px rgba(0,0,0,.2);
// }
//
// /* Enhanced upload items for mobile */
// .upload-item {
//    border-radius: var(--radius);
//    overflow: hidden;
//    background: rgb(var(--base));
//    border: 1px solid rgb(var(--base-200));
//    transition: transform .2s ease;
// }
//
// .upload-item:hover {
//    transform: scale(1.02);
// }
//
// /* Mobile-friendly actions overlay */
// .upload-item .actions {
//    padding: .5rem;
// }
//
// .upload-item .actions button {
//    min-width: 44px;
//    min-height: 44px;
//    padding: .75rem;
//    border-radius: var(--radius);
// }
//
// /* Better checkbox targets */
// .upload-item .upload-select + label {
//    min-width: 44px;
//    min-height: 44px;
//    display: flex;
//    align-items: center;
//    justify-content: center;
//    border-radius: var(--radius);
// }
//
// /* Enhanced group styling for mobile */
// .upload-group {
//    background: rgb(var(--base-100));
//    border-radius: var(--radius);
//    border: 1px solid rgb(var(--base-200));
//    padding: 1rem;
//    margin-bottom: 1rem;
// }
//
// .upload-group .group-header {
//    display: flex;
//    justify-content: space-between;
//    align-items: center;
//    margin-bottom: 1rem;
//    padding-bottom: .5rem;
//    border-bottom: 1px solid rgb(var(--base-200));
//    flex-wrap: wrap;
//    gap: .5rem;
// }
//
// .upload-group .group-actions {
//    display: flex;
//    gap: .5rem;
//    flex-wrap: wrap;
// }
//
// .upload-group .group-actions button {
//    flex: 1;
//    min-width: 100px;
//    min-height: 44px;
//    padding: .5rem .75rem;
//    font-size: .9rem;
//    border-radius: var(--radius);
// }
//
// .upload-group .item-grid.group {
//    grid-template-columns: repeat(2, 1fr);
//    gap: .5rem;
//    margin-bottom: 1rem;
// }
//
// .upload-group .group-item {
//    aspect-ratio: 1;
//    border-radius: 4px;
//    overflow: hidden;
//    border: 1px solid rgb(var(--base-200));
// }
//
// /* Hide file upload container on mobile when in grouping mode */
// .group-display:not([hidden]) ~ .file-upload-container {
//    display: none;
// }
//
// /* Enhanced selection controls for mobile */
// .selection-controls {
//    display: flex;
//    flex-direction: column;
//    gap: 0;
// }
//
// .selection-controls .selected {
//    display: flex;
//    justify-content: space-between;
//    align-items: center;
//    gap: .5rem;
// }
//
// .selection-actions {
//    display: flex;
//    padding: 0;
// }
//
// .selection-actions button {
//    flex: 1;
//    padding: .25rem;
//    font-size: .9rem;
//    border-radius: var(--radius);
// }
//
// /* Enhanced dragging states for mobile */
// .upload-item.dragging {
//    opacity: .7;
//    transform: scale(.95) rotate(3deg);
//    z-index: 1000;
//    box-shadow: 0 8px 25px rgba(0,0,0,.3);
// }
//
// .dragover {
//    background: var(--action-rgb-subtle) !important;
//    border-color: rgb(var(--action-0)) !important;
//    transform: scale(1.05);
//    animation: mobile-drop-pulse .8s infinite ease-in-out;
// }
//
// @keyframes mobile-drop-pulse {
//    0%, 100% {
//       background-color: var(--action-rgb-subtle);
//       transform: scale(1.02);
//    }
//    50% {
//       background-color: var(--action-rgb-subtle-hover);
//       transform: scale(1.04);
//    }
// }
//
// /* Enhanced selection states */
// .upload-item.selected {
//    border: 2px solid rgb(var(--action-0));
//    background-color: var(--action-rgb-subtle);
// }
//
// .upload-item.selected::after {
//    content: '✓';
//    position: absolute;
//    top: .5rem;
//    right: .5rem;
//    background: rgb(var(--action-0));
//    color: white;
//    border-radius: 50%;
//    width: 24px;
//    height: 24px;
//    display: flex;
//    align-items: center;
//    justify-content: center;
//    font-size: 12px;
//    font-weight: bold;
//    z-index: 10;
//    animation: selection-pop .3s ease;
// }
//
// @keyframes selection-pop {
//    0% {
//       transform: scale(0);
//       opacity: 0;
//    }
//    70% {
//       transform: scale(1.2);
//       opacity: 1;
//    }
//    100% {
//       transform: scale(1);
//       opacity: 1;
//    }
// }
//
// /* Enhanced details/summary for mobile */
// .upload-item details summary {
//    padding: .75rem;
//    background: rgb(var(--base-100));
//    border-radius: var(--radius);
//    cursor: pointer;
//    display: flex;
//    align-items: center;
//    gap: .5rem;
//    font-size: .9rem;
//    font-weight: 500;
//    min-height: 44px; /* Touch target */
// }
//
// .upload-item details[open] summary {
//    border-radius: var(--radius) var(--radius) 0 0;
//    border-bottom: 1px solid rgb(var(--base-200));
// }
//
// /* Enhanced forms for mobile */
// .upload-meta input,
// .upload-meta textarea {
//    padding: .75rem;
//    font-size: 16px; /* Prevents zoom on iOS */
//    border-radius: var(--radius);
//    border: 2px solid rgb(var(--base-200));
//    transition: border-color .2s ease;
// }
//
// .upload-meta input:focus,
// .upload-meta textarea:focus {
//    border-color: rgb(var(--action-0));
//    outline: none;
//    box-shadow: 0 0 0 3px var(--action-rgb-subtle);
// }
//}
//
///* Tablet adjustments */
//@media (min-width: 769px) and (max-width: 1024px) {
// .group-display {
//    grid-template-columns: 1fr;
//    gap: 1.5rem;
// }
//
// .item-grid.preview {
//    grid-template-columns: repeat(4, 1fr);
// }
//
// .item-grid.groups {
//    grid-template-columns: repeat(2, 1fr);
// }
//}
//
//
//body:has(.group-display:not([hidden])) {
// overflow:hidden;
//}
//
//.today_hours .group-fields {
// width: 100%;
// display: flex;
// justify-content: center;
// gap: 3rem;
//}
//.today_hours .field {
// margin: 0;
//}
//
//
//.jvb-integration-connection {
// background: var(--bg-white, #EFEFEF);
// border: 2px solid #ddd;
// border-radius: 8px;
// padding: 1.5rem;
// margin-bottom: 1.5rem;
// position: relative;
// transition: all 0.3s ease;
//}
//
//.jvb-integration-connection.connected {
// border-color: #22c55e;
// box-shadow: 0 2px 8px rgba(34, 197, 94, 0.1);
//}
//
//.jvb-integration-connection.disconnected {
// border-color: #ef4444;
// box-shadow: 0 2px 8px rgba(239, 68, 68, 0.1);
//}
//
///* Integration Grid */
//.jvb-integrations-grid {
// display: grid;
// grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
// gap: 1.5rem;
// margin-top: 1rem;
//}
//
///* Connection Header */
//.jvb-connection-header {
// display: flex;
// justify-content: space-between;
// align-items: flex-start;
// margin-bottom: 1.5rem;
// padding-bottom: 1rem;
// border-bottom: 2px solid #ddd;
//}
//
//.jvb-service-info h3.jvb-service-name {
// margin: 0 0 0.25rem 0;
// font-size: 1.4rem;
// font-weight: bold;
// text-transform: uppercase;
// letter-spacing: 1px;
// color: var(--bg-black, #1B1B1B);
// font-family: 'Courier New', monospace;
//}
//
//.jvb-service-description {
// margin: 0;
// color: #666;
// font-size: 0.9rem;
// line-height: 1.4;
//}
//
//.jvb-connection-status {
// text-align: right;
// min-width: 150px;
//}
//
//.jvb-status-indicator {
// font-size: 1.2rem;
// margin-right: 0.5rem;
//}
//
//.jvb-connection-status.connected .jvb-status-indicator {
// color: #22c55e;
//}
//
//.jvb-connection-status.disconnected .jvb-status-indicator {
// color: #ef4444;
//}
//
//.jvb-status-text {
// font-weight: bold;
// font-size: 0.9rem;
// text-transform: uppercase;
// letter-spacing: 0.5px;
// font-family: 'Courier New', monospace;
//}
//
//.jvb-last-tested {
// display: block;
// color: #888;
// font-size: 0.75rem;
// margin-top: 0.25rem;
//}
//
///* Settings Section */
//.jvb-settings-section,
//.jvb-integration-settings {
// margin-bottom: 1.5rem;
//}
//
//.jvb-integration-settings h4 {
// margin: 0 0 1rem 0;
// font-size: 1.1rem;
// font-weight: bold;
// color: var(--bg-black, #1B1B1B);
// font-family: 'Courier New', monospace;
// text-transform: uppercase;
// letter-spacing: 0.5px;
//}
//
///* Form Fields */
//.jvb-form-field {
// margin-bottom: 1rem;
//}
//
//.jvb-form-field label {
// display: block;
// font-weight: bold;
// margin-bottom: 0.5rem;
// color: var(--bg-black, #1B1B1B);
// font-family: 'Courier New', monospace;
// text-transform: uppercase;
// font-size: 0.85rem;
// letter-spacing: 0.5px;
//}
//
//.jvb-form-field input,
//.jvb-form-field select {
// width: 100%;
// padding: 0.75rem;
// border: 2px solid #ddd;
// border-radius: 4px;
// font-size: 0.9rem;
// background: white;
// transition: border-color 0.3s ease;
//}
//
//.jvb-form-field input:focus,
//.jvb-form-field select:focus {
// outline: none;
// border-color: var(--action-color, #FF0080);
// box-shadow: 0 0 0 3px rgba(255, 0, 128, 0.1);
//}
//
//.jvb-form-field .description {
// font-size: 0.8rem;
// color: #666;
// margin-top: 0.5rem;
// line-height: 1.4;
//}
//
///* Checkbox Labels */
//.jvb-checkbox-label {
// display: flex !important;
// align-items: center;
// gap: 0.5rem;
// text-transform: none !important;
// font-weight: normal !important;
// cursor: pointer;
//}
//
//.jvb-checkbox-label input[type="checkbox"] {
// width: auto !important;
// margin: 0;
//}
//
///* Advanced Settings */
//.jvb-advanced-settings {
// margin-top: 1rem;
// padding: 1rem;
// background: #f9f9f9;
// border-radius: 4px;
// border: 1px solid #e5e5e5;
//}
//
//.jvb-advanced-settings summary {
// font-weight: bold;
// cursor: pointer;
// margin-bottom: 1rem;
// color: var(--action-color, #FF0080);
// font-family: 'Courier New', monospace;
// text-transform: uppercase;
// font-size: 0.85rem;
// letter-spacing: 0.5px;
//}
//
///* Settings Help */
//.jvb-settings-help {
// background: #f0f8ff;
// border: 1px solid #b3d9ff;
// border-radius: 4px;
// padding: 1rem;
// margin-top: 1rem;
//}
//
//.jvb-settings-help ol {
// margin: 0.5rem 0 0 1.5rem;
// padding: 0;
//}
//
//.jvb-settings-help a {
// color: var(--action-color, #FF0080);
// text-decoration: none;
// font-weight: bold;
//}
//
//.jvb-settings-help a:hover {
// text-decoration: underline;
//}
//
///* Connection Actions */
//.jvb-connection-actions {
// display: flex;
// gap: 0.75rem;
// flex-wrap: wrap;
// border-top: 2px solid #ddd;
// padding-top: 1rem;
// align-items: center;
//}
//
//.jvb-connection-actions .button {
// font-family: 'Courier New', monospace;
// font-weight: bold;
// text-transform: uppercase;
// letter-spacing: 0.5px;
// border-radius: 4px;
// padding: 0.6rem 1.2rem;
// font-size: 0.8rem;
// cursor: pointer;
// transition: all 0.2s ease;
//}
//
//.jvb-connect-button.button-primary {
// background: var(--action-color, #FF0080);
// border-color: var(--action-color, #FF0080);
// color: white;
// box-shadow: 0 2px 4px rgba(255, 0, 128, 0.2);
//}
//
//.jvb-connect-button.button-primary:hover {
// background: #e6007a;
// border-color: #e6007a;
// transform: translateY(-1px);
// box-shadow: 0 4px 8px rgba(255, 0, 128, 0.3);
//}
//
//.jvb-test-button {
// background: white;
// border-color: #22c55e;
// color: #22c55e;
//}
//
//.jvb-test-button:hover {
// background: #22c55e;
// color: white;
//}
//
//.jvb-sync-button {
// background: white;
// border-color: var(--action-color, #FF0080);
// color: var(--action-color, #FF0080);
//}
//
//.jvb-sync-button:hover {
// background: var(--action-color, #FF0080);
// color: white;
//}
//
//.jvb-disconnect-button {
// color: #ef4444 !important;
// border: none !important;
// background: none !important;
// text-decoration: underline;
// margin-left: auto;
//}
//
//.jvb-disconnect-button:hover {
// color: #dc2626 !important;
// background: none !important;
//}
//
///* Loading States */
//.jvb-integration-form.loading .button {
// opacity: 0.7;
// pointer-events: none;
//}
//
//.jvb-integration-form.loading .jvb-connect-button::after {
// content: ' (Saving...)';
//}
//
//.jvb-integration-form.loading .jvb-test-button::after {
// content: ' (Testing...)';
//}
//
///* Responsive Design */
//@media (max-width: 768px) {
// .jvb-integrations-grid {
//    grid-template-columns: 1fr;
// }
//
// .jvb-connection-header {
//    flex-direction: column;
//    gap: 1rem;
// }
//
// .jvb-connection-status {
//    text-align: left;
//    min-width: auto;
// }
//
// .jvb-connection-actions {
//    flex-direction: column;
// }
//
// .jvb-connection-actions .button {
//    width: 100%;
//    text-align: center;
// }
//
// .jvb-disconnect-button {
//    margin-left: 0 !important;
// }
//}
//
//form .tabs {
// position: sticky;
// top: calc(var(--btn) + 2rem);
// left: 0;
// right: 0;
// z-index: 50;
// background: rgb(var(--base));
//}
//
//.form-actions {
// display: flex;
//}
//
//.spinner {
// width: 12px;
// height: 12px;
// border: 2px solid transparent;
// border-top: 2px solid rgb(var(--action-50));
// border-radius: 50%;
// animation: spin 1s linear infinite;
//}
//
//@keyframes spin {
// 0% { transform: rotate(0deg); }
// 100% { transform: rotate(360deg); }
//}