From 75a097a018a0090f5902758353c578fce4aa2a25 Mon Sep 17 00:00:00 2001
From: Jake Vanderwerf <get@jakevanderwerf.ca>
Date: Sat, 23 May 2026 18:43:42 +0000
Subject: [PATCH] =CustomBlocks.php overhaul relatively complete. Also refactored the gallery in gallery.min.js and the jvbRenderGallery.
---
src/forms/style.scss | 5572 +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
1 files changed, 5,572 insertions(+), 0 deletions(-)
diff --git a/src/forms/style.scss b/src/forms/style.scss
new file mode 100644
index 0000000..56c945a
--- /dev/null
+++ b/src/forms/style.scss
@@ -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); }
+//}
--
Gitblit v1.10.0