:root {
    --bg: #0f1720;
    --bg2: #000000;
    --font: #f6f7fb;
    --ghost: rgba(255, 255, 255, 0.2);
    --shade: rgba(255, 255, 255, 0.04);
    --panel: #12171c;
    --muted: #9aa4ad;
    --accent: #37a6ff;
    --success: #6cd13a;
    --danger: #e14b4b;
    --card: #1b2228;
    --glass: rgba(255, 255, 255, 0.03);
    --accent-transparent: #37a6ff66;
}


#welcome {

    width: -webkit-fill-available;
    height: 100%;
    position: fixed;

    background: #ffffff57;
    transition: filter 1s ease, opacity 0.5s ease;
    backdrop-filter: blur(20px);
    z-index: 99999;

    filter: blur(15px) drop-shadow(0 0 6px rgba(255, 255, 255, 0.6));
    opacity: 0;

}

#welcome-message {
    font-size: 52px;
    font-family: "Courier New", Courier, monospace;
    color: white;
    white-space: pre;
    overflow: hidden;
    display: inline-block;
    font-style: italic;
    -webkit-text-stroke-width: medium;
    animation: blink 1.1s step-end infinite;
    border-right: 2px solid rgba(255, 255, 255, 0.75);
}


@keyframes blink {
    50% {
        border-color: transparent;
    }
}



body {
    margin: 0;
    font-family: Inter, Segoe UI, Arial;
    background: linear-gradient(180deg, var(--bg), #071018);
    color: var(--muted);
    background-color: #232939;
}

body::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: url('../imgs/ham.png');
    background-size: 100px;
    opacity: 0.03;
    animation: moveHammers 5s linear infinite;
    pointer-events: none;
    filter: brightness(0.8);
}

.flag-row {
    width: -webkit-fill-available;
    display: inline-flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    border-radius: 20px;
}

header {
    position: fixed;
    inset: 0 0 auto 0;
    display: none;
    align-items: center;
    justify-content: space-between;
    padding: 14px 18px;
    background: linear-gradient(180deg, var(--bg), var(--bg2));
    z-index: 50
}

.rap::before {
    content: url('../imgs/rap_tag.png');
    padding-right: 45px;
    zoom: 0.3;
}

header h1 {
    margin: 0;
    line-height: 0.8;
    width: min-content;
    gap: 11px;
    display: flex;
    align-items: center;
    color: var(--muted);
    font-weight: 700;
    font-size: 24px;
}

header h1 a {
    color: var(--muted);
    text-decoration: none;
}

#top-controls {
    display: flex;
    gap: 10px;
    align-items: center
}



.menu {
    position: fixed;
    right: 18px;
    top: 64px;
    background: linear-gradient(175deg, #43465361, #434653d1, #43465391);
    border: 1px solid #ffffff21;
    border-style: outset;
    backdrop-filter: blur(25px);
    border-radius: 12px;
    padding: 12px;
    box-shadow: 0 10px 40px var(--shade);
    display: none;
    min-width: 220px;
    zoom: 1.1;
}

.menu.show {
    display: block
}

select::-webkit-scrollbar {
    width: 8px;
    background: var(--panel);
}

.menu label,
.menu button {
    display: block;
    font-variant: all-petite-caps;
    text-box: auto;
    margin-bottom: 8px;
    white-space: nowrap;
}

.upload-icon {
    mask-image: url('data:image/svg+xml,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22utf-8%22%3F%3E%3Csvg%20viewBox%3D%220%200%2024%2024%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M12%2022a1%201%200%200%201-1-1V10.414L8.707%2012.707a1%201%200%200%201-1.414-1.414l4-4a1%201%200%200%201%201.414%200l4%204a1%201%200%201%201-1.414%201.414L13%2010.414V21a1%201%200%200%201-1%201zM5%207a1%201%200%200%201-1-1V4a2%202%200%200%201%202-2h12a2%202%200%200%201%202%202v2a1%201%200%201%201-2%200V4H6v2a1%201%200%200%201-1%201z%22%2F%3E%3C%2Fsvg%3E');
}

/* Optional: Add animation to the import button */
#import-json:hover .upload-icon {
    animation: bounce 0.5s ease-in-out;
}

@keyframes bounce {

    0%,
    100% {
        transform: translateY(0);
    }

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

#settings-btn,
#panels-btn {
    cursor: pointer;
    padding: 6px 10px;
    background: var(--card);
    box-shadow: 0 4px 18px var(--shade);
    border-radius: 8px;
    font-size: 20px;
    transition: all 0.2s;
}

#settings-btn:hover,
#panels-btn:hover {
    filter: brightness(1.3) saturate(1.3);
}



.panel-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 12px;
    margin: 4px 0;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s;
}

.panel-toggle:hover {
    background: rgba(255, 255, 255, 0.1);
}

.panel-toggle.hidden2 {
    opacity: 0.5;
}

.panel-toggle .status {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #10b981;
}

.panel-toggle.hidden2 .status {
    background: #ef4444;
}

.section-close-btn {
    float: right;
    cursor: pointer;
    padding: 4px 8px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 6px;
    font-size: 16px;
    margin-top: -4px;
    transition: all 0.2s;
}

.section-close-btn:hover {
    background: rgba(255, 0, 0, 0.3);
}

select {
    background: var(--panel);
    color: var(--accent);
    border-radius: 8px;
    padding: 2px 6px;
    border: 1px solid var(--accent);
}

option {
    background: var(--card);
    color: var(--muted);
}

main {
    padding: 96px 20px 80px;
    gap: 23px;
    margin: 0 auto;
    display: flex;

    justify-content: space-evenly;
    flex-direction: row;
    align-items: flex-start;
    position: relative;
}

#quick-editor-spacer {
    min-width: 420px;
    max-width: min(400px, 89vw);
    height: 100%;

}



#main-content {
    flex: auto;
    display: flex;
    flex-direction: row;
    justify-content: space-evenly;
    gap: 23px;
    flex-wrap: wrap;
    align-items: flex-start;
    width: -webkit-fill-available;
}

#tutorial {
    display: none;
}

#tutorial p {
    margin: 4px;
}

#tutorial h1 {
    font-variant: all-small-caps;

    margin-bottom: 13px;
    text-shadow: -1px 4px 20px #ffffff;
}

.initial {
    pointer-events: none !important;
    display: none !important;
}

.initial * {
    pointer-events: none;
    opacity: 0;
    filter: blur(10px);
}

.initial .tag-left {
    filter: opacity(0.6) blur(10px) !important;
}

.initial #tutorial {
    opacity: 1;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 89%;
    color: #fff;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    filter: unset;
}

.initial #tutorial * {
    opacity: 1;
    filter: unset;
}

#quick-editor-content {
    pointer-events: all;
    position: fixed;
    width: min(405px, 89vw);
    max-width: 92vw;
    height: auto;
    z-index: 9999;
    border-radius: 12px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.45);
    color: var(--font);
    touch-action: none;
    gap: 6px;
    user-select: none;
    overflow: visible;
    padding: 12px;
    background: #4254622e;
    display: flex;
    flex-direction: row;
    backdrop-filter: blur(60px);
    flex-wrap: wrap;
}




#quick-editor-modal.show {
    transform: translateX(0);
}

#quick-editor-content img {
    max-width: 140px;
    max-height: 140px;
    object-fit: contain;
    filter: drop-shadow(2px 4px 12px #00000069);
    border-radius: 8px;
}

#quick-editor-close {
    position: absolute;
    top: 8px;
    right: 12px;
    background: transparent;
    border: none;
    font-size: 28px;
    color: var(--muted);
    cursor: pointer;
    font-weight: 700;
}

#quick-editor-content label {
    scale: 1;
    padding-left: 10px;
    display: block;
    margin-bottom: 8px;
    font-size: 22px;
    font-variant: all-petite-caps;
    font-weight: 500;
    color: #ffffff69;
}

@font-face {
    font-family: BuilderSans;
    font-weight: 500;
    src: url('https://emwiki.com/fonts/BuilderSans-Medium-500.woff2') format('woff2')
}

@font-face {
    font-family: BuilderSans;
    font-weight: 700;
    src: url('https://emwiki.com/fonts/BuilderSans-Bold-700.woff2') format('woff2')
}

#quick-editor-price {
    font-family: 'BuilderSans';
    color: #455766;
    text-align: left;
    padding: 10px 15px 10px 10px;
    font-size: 27px;
    border-radius: 0px 6px 6px 0px;
    border: 0px solid var(--ghost);
    outline: none;
    field-sizing: content;
    background: linear-gradient(90deg, #ffffff, #ffffff4f);
    text-overflow: ellipsis;
    max-width: 150px;
    font-weight: bold;
    transition: all 0.15s ease-in-out;
}

#title-text {
    max-width: 300px;
    white-space: nowrap;
    display: inline-block;
    overflow: hidden;
    text-overflow: ellipsis;
}

#quick-editor-price:focus {
    color: #000000;
}

#quick-editor-price::placeholder {
    color: #00000054;
}

#quick-editor-price:autofill {
    background-color: light-dark(rgba(232, 240, 254, 0), rgba(70, 90, 126, 0));
}




.price-label {
    font-family: 'BuilderSans';
    font-size: 16px;
    font-weight: 1000;
    position: absolute;
    top: 8px;
    left: 8px;
    color: #ffffff94;
    background: #ffffff2e;
    padding: 1px 4px;
    border-radius: 6px;
    backdrop-filter: blur(5px) brightness(0.4);
}

.price-label::before {
    content: url(../imgs/iZGLVYo.png);
    display: inline-block;
    width: 221px;
    zoom: 0.069;
    opacity: 0.7;
    margin-right: 2px;
}



.section {
    background: var(--card);
    border-radius: 12px;
    padding: 16px;
    width: -webkit-fill-available;
    max-width: 880px;
    margin-bottom: 18px;
    box-shadow: 0 6px 24px var(--shade);
}

.section h2 {
    margin: 0 0 12px 0;
    color: var(--accent);
    font-variant: all-petite-caps;
    font-size: 35px;
    color: #f0f8ff24;
    user-select: none;
    margin-top: -20px;
    height: 42px;
    /* -webkit-text-stroke: 2px #0000001a; */
}

.menu h2 {
    margin: -13px 0px 12px 0px;
    color: var(--ghost);
    font-variant: all-petite-caps;
    font-size: 35px;
    user-select: none;
    height: 42px;
    /* -webkit-text-stroke: 2px #0000001a; */
}

* {
    user-select: none;
}

.flex {
    display: flex;
    gap: 12px;
    align-items: center;
    flex-wrap: wrap;
    position: relative;

    margin-bottom: 8px;
}

.grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 12px;
    min-width: -webkit-fill-available;
    min-height: 88%;
    justify-items: center;
}


.panel {
    scale: 1;
    background: var(--panel);
    padding: 12px;
    border-radius: 10px
}

.item-card {
    outline: 1px solid #313131;
    background: linear-gradient(180deg, var(--shade), var(--glass));
    border-radius: 10px;
    padding: 8px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    height: 120px;
    width: 120px;
    scale: 1;
    cursor: grab;
    align-items: center;
    justify-content: center;
}

.item-card.pulse {
    animation: pulse 0.3s ease;
}

@keyframes pulse {
    0% {
        transform: scale(1);
        box-shadow: 0 0 0 0 rgba(155, 89, 182, 0.7);
    }

    70% {
        transform: scale(1.05);
        box-shadow: 0 0 0 15px rgba(155, 89, 182, 0);
    }

    100% {
        transform: scale(1);
        box-shadow: 0 0 0 0 rgba(155, 89, 182, 0);
    }
}


.item-card img {
    max-width: 92px;
    max-height: 92px;
    object-fit: contain
}

.item-name {
    font-weight: 600;
    color: var(--font);
    white-space: nowrap;
    text-align: center;
    font-size: 13px
}

.inputs-row {
    display: flex;
    gap: 6px;
    width: 100%;
    align-items: stretch;
    flex-direction: column;
}

.inputs-row input,
.inputs-row select {
    flex: 1;
    padding: 6px;
    border-radius: 6px;
    border: 1px solid var(--ghost);
    background: transparent;
    color: var(--muted)
}

#history-section {
    max-width: 400px;
}


@media(min-width:2500px) {
    #lists-section {
        max-width: 644px;
    }
}

@media(max-width:1048px) {
    #history-section {
        max-width: -webkit-fill-available;
        order: 3;
    }
}


@media(min-width:1300px) {
    #history-section {
        max-width: 470PX;
    }

    #lists-section {
        max-width: 666PX;
    }
}

@media(min-width:1640px) {
    #lists-section {
        max-width: 1100px;
    }

    #history-section {
        max-width: 460px;
    }
}


@media(min-width:1900px) {
    #lists-section {
        max-width: 1357px;
    }

    #history-section {
        max-width: 456px;
    }
}

@media(min-width:2160px) {
    #history-section {
        max-width: 1077px;
    }

    #lists-section {
        max-width: 1077px;
    }
}

@media(min-width:2400px) {
    #lists-section {
        max-width: 800px;
    }

    #history-section {
        max-width: 800px;
    }
}


.small-btn {
    padding: 6px 8px;
    border-radius: 8px;
    border: none;
    background: linear-gradient(180deg, var(--accent), var(--accent-transparent));
    color: var(--font);
    cursor: pointer;
    transition: filter 0.2s ease, scale 0.1s ease;
}

.danger {
    background: linear-gradient(180deg, var(--danger), #890000);
    border: 1px solid #810000;
    color: white;
}

.success {
    background: linear-gradient(180deg, var(--success), #005700);
    border: 1px solid #004600;
    color: white;
}


.small-btn:hover {
    filter: brightness(0.9) saturate(1.5);
    scale: 1.05;
}

.ghost {
    background: transparent;
    border: 1px solid var(--ghost);
    -webkit-user-select: none;
    -ms-user-select: none;
    user-select: none;
    align-self: center;
    color: #bbb;
    border-radius: 6px;
    font-size: 13px;
    cursor: pointer;
    transition: all 0.2s ease;

}

.ghost:hover {
    background: #222;
    color: #fff;
    filter: brightness(1) saturate(1);
    scale: 1;
}

.tag {
    font-size: 12px;
    padding: 4px 8px;
    border-radius: 999px;
    background: var(--glass);
    color: var(--muted)
}

#save-btn {
    position: fixed;
    right: -129px;
    font-variant: all-petite-caps;
    font-size: 27px;
    word-spacing: 11px;
    text-shadow: 0 0 2px #44769f;
    letter-spacing: 0px;
    bottom: 18px;
    background: linear-gradient(137deg, #4e99c5, #28a97b);
    filter: saturate(0);
    border: none;
    padding: 12px 14px;
    border-bottom: 3px solid #225a74;
    border-top: 1px solid #ffffff6b;
    border-radius: 12px;
    color: #042;
    cursor: pointer;
    box-shadow: 0px 0px 8px 4px rgb(0 0 0);
    padding-left: 20px;
    padding-right: 30px;
    transition: all 0.3s ease, letter-spacing 1s ease;
}

input#search:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

#search {
    padding-left: 30px;
    width: 200px;
    height: 30px;
    flex: 1 1 0%;
    border-radius: 8px;
    border: 1px solid var(--ghost);
    background: transparent;
    color: var(--muted);
}


#search~span {
    mask-image: url('data:image/svg+xml,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22utf-8%22%3F%3E%3C!--%20License%3A%20PD.%20Made%20by%20mono-company%3A%20https%3A%2F%2Fgithub.com%2Fmono-company%2Fmono-icons%20--%3E%3Csvg%20viewBox%3D%220%200%2024%2024%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M10%204a6%206%200%201%200%200%2012%206%206%200%200%200%200-12zm-8%206a8%208%200%201%201%2014.32%204.906l5.387%205.387a1%201%200%200%201-1.414%201.414l-5.387-5.387A8%208%200%200%201%202%2010z%22%2F%3E%3C%2Fsvg%3E');
    position: absolute;
    left: 9px;
    background: var(--ghost);
    top: 9px;
    color: #888;
    font-size: 16px;
}

#save-btn:hover {
    letter-spacing: 2px;
    filter: saturate(1.5);
    background: linear-gradient(137deg, #4e99c5, #28a97b);
    right: -8px;
}

#logout {
    background: linear-gradient(180deg, var(--danger), #890000);
    border: 1px solid #810000;
    color: white;
    padding: 4px 8px;
    border-radius: 8px;
    cursor: pointer;
}

.collapsible {
    cursor: pointer;
    padding: 8px 10px;
    border-radius: 8px;
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.02);
    display: flex;
    justify-content: space-between;
    align-items: center
}



.controls {
    display: flex;
    gap: 8px;
    align-items: center;
    flex-wrap: wrap
}

.note {
    font-size: 12px;
    color: var(--muted);
}


@media(min-width:2100px) {
    #history-section {
        max-width: 412px;
    }
}

/*1076px*/
@media(min-width:1300px) {
    .initial {
        display: flex !important;
    }
}





@media(max-width:720px) {
    .grid {
        grid-template-columns: repeat(auto-fill, minmax(132px, 1fr))
    }

    header {
        padding: 10px
    }

    main {
        padding: 84px 12px
    }
}

.tag-pill {
    display: inline-block;
    padding: 3px 8px;
    margin: 2px;
    white-space: nowrap;
    border: 1px solid;
    border-radius: 999px;
    font-size: 0.85em;
}

.tag-option {
    display: block;
    width: 100%;
    background: transparent;
    border: none;
    padding: 5px;
    color: white;
    cursor: pointer;
    text-align: left;
}

.tag-option:hover {
    background: rgba(255, 255, 255, 0.1);
}

.hidden {
    display: none !important;
}

/* Modal basics — keep your .hidden class logic */
#quick-editor-modal {
    position: fixed;
    inset: 0;
    z-index: 9999;
    pointer-events: none;
}

/* The draggable panel */

#quick-editor-content div label~button {
    margin-left: 8px;
    background: transparent;
    border: 0px;
    color: #66daff;
    cursor: pointer;
    font-variant: all-small-caps;
    padding: 11px;
    transition: all 220ms cubic-bezier(.2, .9, .2, 1), font-size 220ms cubic-bezier(.2, .9, .2, 1);
}


#quick-editor-content div label~button::before {
    content: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='3 5 18 18' fill='rgb(102 218 255)'><path d='M19 15h-6v7h-3v-7H4v-3h6V6h3v6h6v2z'/></svg>");
    display: inline-block;
    width: 9px;
    margin-right: 2px;
}

.icon {
    width: 16px;
    height: 16px;
    margin: 0;
    float: left;
    pointer-events: none;
    margin-right: 7px;
    background: var(--font);

}

#quick-editor-content div label~button:hover {
    color: #24b8e9;
    letter-spacing: 1px;
}



/* A visible handle style so user knows they can drag */
#quick-editor-title {
    width: -webkit-fill-available;
    cursor: grab;
    color: var(--muted);
    margin: 0 0 8px;
    padding: 6px 8px;
    display: inline-block;
    border-radius: 8px;
    background: linear-gradient(90deg, rgb(255 255 255 / 9%), transparent);
    font-size: 23px;
}

#quick-editor-title:active {
    cursor: grabbing;
}

/* while dragging remove transitions for immediate follow */
#quick-editor-content.dragging {
    transition: none;
}

/* Close button sits on top-right of the content */
#quick-editor-close {
    position: absolute;
    right: 17px;
    top: 12px;
    background: transparent;
    border: none;
    color: #ffffff91;
    font-size: 36px;
    cursor: pointer;
    transition: color 220ms cubic-bezier(.2, .9, .2, 1);
    user-select: none;
}

#quick-editor-close:hover {

    color: #ffffffe0;

}

/* Keep inprgba(255, 255, 255, 0.555)e */
#quick-editor-content input {
    user-select: text;
}

#quick-editor-lists input {
    display: none;
    flex-grow: 1;
    border: none;
    padding: 0px;
    font-variant: contextual;
    font-size: 15px;
    font-weight: 400;
    user-select: text;
    outline: none;
    background: transparent;
    color: white;
}

#quick-editor-code {
    width: 95%;
    margin-top: 11px;
}

#quick-editor-lists {
    width: -webkit-fill-available;
}

hr {
    height: 3px;
    background: linear-gradient(90deg, transparent, #ffffff47, #ffffff38, #ffffff47, transparent);
    margin: 8px 0 12px;
    border: 0;
    width: -webkit-fill-available;
}

.price-tag {
    margin: 7px auto 5px;
    filter: drop-shadow(2px 0px 15px #0000009f) brightness(0.4) invert(0);
    display: flex;
    align-items: flex-start;
    height: 52px;
    background: none;
    user-select: none;
    transition: all 0.15s ease-in-out;
    font-family: Arial, sans-serif;
}

.price-tag::before {
    content: url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%2283.017%2071.204%20402.88%20341.831%22%3E%3Cdefs%3E%3Cmask%20id%3D%22hole%22%3E%3Crect%20width%3D%22130%25%22%20height%3D%22120%25%22%20%20mask%3D%22url(%23hole)%22%20fill%3D%22white%22%2F%3E%3Cpath%20d%3D%22M%20425.082%20165.212%20C%20439.744%20173.682%20448.787%20189.339%20448.787%20206.273%20L%20448.787%20277.956%20C%20448.787%20294.9%20439.744%20310.55%20425.082%20319.017%20L%20362.989%20354.868%20C%20348.326%20363.334%20330.25%20363.334%20315.586%20354.868%20L%20253.494%20319.017%20C%20238.831%20310.55%20229.798%20294.9%20229.798%20277.956%20L%20229.798%20206.273%20C%20229.798%20189.339%20238.831%20173.682%20253.494%20165.212%20L%20315.586%20129.374%20C%20330.25%20120.905%20348.326%20120.905%20362.989%20129.374%20L%20425.082%20165.212%20Z%20M%20323.9%20145.643%20L%20263.431%20180.553%20C%20253.904%20186.055%20248.048%20196.211%20248.048%20207.214%20L%20248.048%20277.028%20C%20248.048%20288.022%20253.904%20298.185%20263.431%20303.688%20L%20323.9%20338.59%20C%20333.425%20344.091%20345.149%20344.091%20354.677%20338.59%20L%20415.145%20303.688%20C%20424.67%20298.185%20430.537%20288.022%20430.537%20277.028%20L%20430.537%20207.214%20C%20430.537%20196.211%20424.67%20186.055%20415.145%20180.553%20L%20354.677%20145.643%20C%20345.149%20140.142%20333.425%20140.142%20323.9%20145.643%20Z%20M%20351.93%20165.151%20L%20399.642%20192.688%20C%20407.461%20197.204%20412.289%20205.554%20412.289%20214.597%20L%20412.289%20269.681%20C%20412.289%20278.715%20407.461%20287.063%20399.642%20291.58%20L%20351.93%20319.127%20C%20344.11%20323.643%20334.464%20323.643%20326.645%20319.127%20L%20278.934%20291.58%20C%20271.113%20287.063%20266.296%20278.715%20266.296%20269.681%20L%20266.296%20214.597%20C%20266.296%20205.554%20271.113%20197.204%20278.934%20192.688%20L%20326.645%20165.151%20C%20334.464%20160.633%20344.11%20160.633%20351.93%20165.151%20Z%20M%20311.918%20269.507%20L%20366.666%20269.507%20L%20366.666%20214.76%20L%20311.918%20214.76%20L%20311.918%20269.507%20Z%22%20fill%3D%22black%22%3E%3C%2Fpath%3E%3C%2Fmask%3E%3C%2Fdefs%3E%3Cpath%20d%3D%22M%20253.548%2072.162%20C%20291.987%2072.162%20486.429%2072.204%20486.429%2072.204%20L%20485.897%20411.835%20C%20485.897%20411.835%20287.408%20412.035%20252.201%20412.035%20C%20232.925%20412.035%20154.199%20332.778%20154.199%20332.778%20C%20154.199%20332.778%2094.22%20275.795%2091.011%20268.048%20C%2083.92%20250.928%2083.425%20230.889%2090.57%20213.639%20C%2094.25%20204.755%20166.494%20136.443%20166.494%20136.443%20C%20166.494%20136.443%20234.906%2072.162%20253.548%2072.162%20Z%22%20fill%3D%22white%22%20mask%3D%22url(%23hole)%22%3E%3C%2Fpath%3E%3C%2Fsvg%3E');
    width: 65px;
    margin-right: -1px;

}

.prc-label {
    flex: 1 1;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    color: rgb(255, 255, 255);
    font-weight: normal;
    font-family: BuilderSans;
}


#quick-editor-content label {
    font-size: 22px;
    font-variant: all-petite-caps;
    font-weight: 500;
    color: #ffffff4f;
}



.quick-editor-body+hr+div label h1 {
    color: #ffffff7a;
    position: absolute;
    font-weight: 900;
    right: 17px;
    top: 0px;
    margin-top: 7PX;
    font-size: 14px;
    text-align: center;
    font-family: 'BuilderSans';
    border: 3px solid;
    float: right;
    border-radius: 100%;
    width: 18px;
    height: 18px;
    font-variant: normal;
    display: block;
    transition: color 0.2s ease;
}

.quick-editor-body+hr+div label h1:hover {
    color: #ffffffc4;
}

.quick-editor-body+hr+div label p {
    display: none;
    position: absolute;
    background: linear-gradient(179deg, #43474f8f, #3b3b3bc9);
    backdrop-filter: blur(14px);
    font: 400 15px 'Source Sans Pro';
    color: #858585;
    font-family: 'BuilderSans';
    padding: 11px;
    border-radius: 10px;
    margin-top: -118px;
    margin-left: 21px;
    filter: drop-shadow(2px 4px 3px black) drop-shadow(2px 4px 3px #333);
    border: 1px solid #555555;
    font-variant-caps: all-petite-caps;
    opacity: 1;
    transition: opacity 0.2s ease;

    @starting-style {
        opacity: 0;
    }
}

.quick-editor-body+hr+div label h1:hover~p {
    position: absolute;
    display: inline-block;
}



#quick-editor-lists>div {
    background: linear-gradient(180deg, #ffffff0e, #ffffff05);
    padding: 2px;
    border-radius: 16px;
}

.prc-list:empty,
.desc-list:empty {
    width: -webkit-fill-available;
    font-variant: all-petite-caps;
    margin-bottom: 2px;
    font-size: 16px;
    text-align: -webkit-center;
    color: #ffffff57;
    background: linear-gradient(45deg, transparent, #ffffff12, transparent);
    padding-bottom: 4px;
}

.prc-list:empty::after,
.desc-list:empty::after {
    content: "empty";
}

#svg-editor {
    width: 46%;
}

#demand-items-grid:empty {
    grid-template-columns: unset;
}

#demand-items-grid:empty::before {
    content: ":3";
    color: gray;
    padding: 20px;
    text-align: center;
    font-size: 16px;
    font-weight: 500;
    font-family: 'BuilderSans';
}

.quick-editor-body {
    display: inline-flex;
    flex-direction: row;
    max-width: 49%;
    align-items: center;
    flex-wrap: wrap;
}

.desc-list,
.prc-list {
    margin-bottom: -5px;
    padding-left: 14px;
    margin-right: 14px;
    font-variant: contextual;
    font-size: 15px;
    font-weight: 400;
    margin-top: 11px;
}

.price-tag:has(#quick-editor-price:focus-within) {
    filter: brightness(0.4) invert(1);
}





/*.tag-left:has(+ .price-area:focus-within) {
                    filter: opacity(0.6) drop-shadow(0px 0px 5px yellow);
                    flex-shrink: 0;
                    width: 69px;
                    height: 100%;
                    background: url(./imgs/rap_tag.png) no-repeat center / contain;
                }/*

                /* Right part: white area that expands */


.blur {

    animation: quick-editor-price-fade-out 0.5s ease forwards;
}

@keyframes quick-editor-price-fade-out {
    0% {
        filter: brightness(5);
    }



    100% {
        filter: brightness(1);
    }
}


/* When the input is focused, expand the right area */
.price-area:focus-within {
    flex-grow: 2;
    width: 200px;
    /* Adjust as needed */

}


/* Optional: hide default input spinner for number */
.price-area input::-webkit-inner-spin-button,
.price-area input::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

#admin-online {
    cursor: default;
    user-select: none;
}




.login-card input {
    transition: all 0.8s ease;
    width: 93%;
    padding: 0.8rem;
    margin-bottom: 1rem;
    border: 1px solid var(--ghost);
    border-radius: 6px;
    background: #ffffff0a;
    color: #fff;
    font-size: 1rem;
    box-shadow: inset 0 0 20px 20px #00000069;
}

.login-card button {
    width: 100%;
    padding: 0.8rem;
    border: none;
    border-radius: 6px;
    background: linear-gradient(180deg, var(--accent), #005993);
    color: #fff;
    font-size: 1rem;
    cursor: pointer;
    transition: all 0.8s ease, filter 0.2s ease;
    border: 1px solid #248adc;
    font-variant: all-petite-caps;
    font-weight: bold;
    transition: all 1s ease;
}

.login-card button:hover {
    filter: brightness(1.1);
}

#login-error {
    color: #ff4444;
    margin-top: 8px;
    font-size: 0.9rem;
}

.shake {
    animation: shake 0.5s;
}

@keyframes shake {

    0%,
    100% {
        margin-left: 0px;
    }

    25% {
        margin-left: -10px;
    }

    75% {
        margin-left: 10px;
    }
}


@keyframes moveHammers {
    0% {
        background-position: 0 0;
    }

    100% {
        background-position: -100px 0px;
    }
}

#login-overlay {
    position: fixed;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999999999;
    transition: all 2s ease;
    overflow: hidden;
}




.login-card:hover {
    transform: translateY(-5px);
}

.login-card h2 {
    transition: all 0.8s ease;
    color: #fff;
    font-size: 1.8rem;
    margin: 1rem 0 1.5rem;
    font-variant: all-petite-caps;
    letter-spacing: 1px;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

.login-card {
    background: linear-gradient(165deg,
            rgba(67, 70, 83, 0.2) 0%,
            rgba(67, 70, 83, 0.8) 50%,
            rgba(67, 70, 83, 0.4) 100%);
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
    backdrop-filter: blur(25px);
    padding: 2.5rem;
    border-radius: 16px;
    width: 64%;
    position: absolute;
    max-width: 400px;
    text-align: center;
    transform: translateY(0);
    transition: all 0.3s ease;
}

#publish-section {
    max-width: 400px;
    padding: 24px 18px 32px 18px;
    bottom: 40px;
    right: 40px;
}

.publish-panel {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.rocket-btn {
    position: relative;
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 12px 23px 14px 17px;
    margin: 8px;
    font-size: 1.6rem;
    background: linear-gradient(#4e99c5, #2867a9 80%);
    color: #fff;
    border: 2px solid #ffffff45;
    border-radius: 999px;
    box-shadow: 0 4px 18px var(--shade), 0 0 24px #37a6ff44;
    cursor: pointer;
    transition: filter 0.2s, transform 0.2s;
    font-weight: bold;
    letter-spacing: 1px;
    font-family: caveat;
    overflow: visible;

    @supports (corner-shape: squircle) {
        corner-shape: squircle;
    }
}

.rocket-btn:hover {
    filter: brightness(1.1) saturate(1.1);
    transform: translateY(-1px) scale(1.02);
}

.rocket-icon {
    display: inline-block;
    width: 31px;
    height: 31px;
    background: currentColor;
    mask-image: url('data:image/svg+xml,%3Csvg%20viewBox%3D%220%200%2015%2015%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20id%3D%22path7143%22%20d%3D%22M12.5547%2C1c-2.1441%2C0-5.0211%2C1.471-6.9531%2C4H4%26%23xA%3B%26%23x9%3BC2.8427%2C5%2C2.1794%2C5.8638%2C1.7227%2C6.7773L1.1113%2C8h1.4434H4l1.5%2C1.5L7%2C11v1.4453v1.4434l1.2227-0.6113%26%23xA%3B%26%23x9%3BC9.1362%2C12.8206%2C10%2C12.1573%2C10%2C11V9.3984c2.529-1.932%2C4-4.809%2C4-6.9531V1H12.5547z%20M10%2C4c0.5523%2C0%2C1%2C0.4477%2C1%2C1l0%2C0%26%23xA%3B%26%23x9%3Bc0%2C0.5523-0.4477%2C1-1%2C1l0%2C0C9.4477%2C6%2C9%2C5.5523%2C9%2C5v0C9%2C4.4477%2C9.4477%2C4%2C10%2C4L10%2C4z%20M3.5%2C10L3%2C10.5C2.2778%2C11.2222%2C2%2C13%2C2%2C13%26%23xA%3B%26%23x9%3Bs1.698-0.198%2C2.5-1L5%2C11.5L3.5%2C10z%22%2F%3E%3C%2Fsvg%3E');
}

.glass {
    z-index: 99999999;
    width: 40%;
    height: 40%;
    max-width: 200px;
    max-height: 200px;
    border-radius: 50%;
    padding: 0rem;
    background: rgba(255, 255, 255, .08);
    border: 2px solid transparent;
    box-shadow: inset 5px 5px 9px 0px rgb(255 255 255 / 23%), inset 4px 4px 20px 3px rgb(255 255 255 / 15%), 2px 7px 20px 1px rgb(0 0 0 / 22%);
    scale: 1.1;
    place-items: center;
    cursor: pointer;
    outline: 0;
    transition: all 1s cubic-bezier(.41, -0.07, .13, 1.6) 0.4s;
    animation: bubble 1.8s ease 1s 1 forwards;
    transform: translateY(5px);

    @starting-style {
        max-width: 210px;
        max-height: 184px;
        transform: translateY(0px);
    }
}

.bobble {
    max-width: 200px;
    max-height: 200px;
    transform: translateY(30vh);
    transition: all 1s cubic-bezier(.56, -0.37, .3, 1);
    opacity: 0;
    animation: unset;
}


/* override any existing transition so CSS transitions don't interfere */
.login-card.leave {
    transition: none !important;
    animation: swoosh 2s linear forwards;
    will-change: transform, opacity;
    transform-origin: 50% 50%;
    backface-visibility: hidden;
    max-width: 200px;
    max-height: 200px;
    transform: translateY(5px);
}

/* ultra-smooth manual swoosh animation - high frequency keyframes */
@keyframes swoosh {
    0% {
        transform: translate3d(0%, 0%, 0) scale(1.000) perspective(800px) rotateY(0deg);
        opacity: 1;
    }

    12% {
        transform: translate3d(-3.3%, 3.9%, 0) scale(1.090) perspective(800px) rotateY(2.7deg);
        opacity: 1;
    }

    14% {
        transform: translate3d(-3.5%, 4.9%, 0) scale(1.105) perspective(800px) rotateY(3.3deg);
        opacity: 1;
    }

    16% {
        transform: translate3d(-3.6%, 6.0%, 0) scale(1.120) perspective(800px) rotateY(4.0deg);
        opacity: 1;
    }

    18% {
        transform: translate3d(-3.6%, 7.2%, 0) scale(1.135) perspective(800px) rotateY(4.7deg);
        opacity: 1;
    }

    20% {
        transform: translate3d(-3.5%, 8.5%, 0) scale(1.150) perspective(800px) rotateY(5.5deg);
        opacity: 1;
    }

    22% {
        transform: translate3d(-3.3%, 9.9%, 0) scale(1.165) perspective(800px) rotateY(6.3deg);
        opacity: 1;
    }

    24% {
        transform: translate3d(-3.0%, 11.4%, 0) scale(1.180) perspective(800px) rotateY(7.2deg);
        opacity: 1;
    }

    26% {
        transform: translate3d(-2.6%, 13.0%, 0) scale(1.195) perspective(800px) rotateY(8.1deg);
        opacity: 1;
    }

    28% {
        transform: translate3d(-2.1%, 14.7%, 0) scale(1.210) perspective(800px) rotateY(9.1deg);
        opacity: 1;
    }

    30% {
        transform: translate3d(-1.5%, 16.5%, 0) scale(1.225) perspective(800px) rotateY(10.1deg);
        opacity: 1;
    }

    32% {
        transform: translate3d(-0.8%, 17.4%, 0) scale(1.240) perspective(800px) rotateY(9.8deg);
        opacity: 1;
    }

    34% {
        transform: translate3d(0%, 18.2%, 0) scale(1.255) perspective(800px) rotateY(9.5deg);
        opacity: 1;
    }

    36% {
        transform: translate3d(0.9%, 18.9%, 0) scale(1.270) perspective(800px) rotateY(9.2deg);
        opacity: 1;
    }

    38% {
        transform: translate3d(1.9%, 19.5%, 0) scale(1.285) perspective(800px) rotateY(8.9deg);
        opacity: 1;
    }

    40% {
        transform: translate3d(3.0%, 20.0%, 0) scale(1.300) perspective(800px) rotateY(8.6deg);
        opacity: 1;
    }

    42% {
        transform: translate3d(7.2%, 16.8%, 0) scale(1.285) perspective(800px) rotateY(6.3deg);
        opacity: 0.99;
    }

    44% {
        transform: translate3d(11.6%, 13.4%, 0) scale(1.270) perspective(800px) rotateY(4.0deg);
        opacity: 0.98;
    }

    46% {
        transform: translate3d(16.2%, 9.8%, 0) scale(1.255) perspective(800px) rotateY(1.7deg);
        opacity: 0.97;
    }

    48% {
        transform: translate3d(21.0%, 6.0%, 0) scale(1.240) perspective(800px) rotateY(-0.6deg);
        opacity: 0.96;
    }

    50% {
        transform: translate3d(26.0%, 2.0%, 0) scale(1.225) perspective(800px) rotateY(-2.9deg);
        opacity: 0.95;
    }

    52% {
        transform: translate3d(31.2%, -2.2%, 0) scale(1.210) perspective(800px) rotateY(-5.2deg);
        opacity: 0.94;
    }

    54% {
        transform: translate3d(36.6%, -6.6%, 0) scale(1.195) perspective(800px) rotateY(-7.5deg);
        opacity: 0.93;
    }

    56% {
        transform: translate3d(42.2%, -11.2%, 0) scale(1.180) perspective(800px) rotateY(-9.8deg);
        opacity: 0.92;
    }

    58% {
        transform: translate3d(48.0%, -16.0%, 0) scale(1.165) perspective(800px) rotateY(-12.1deg);
        opacity: 0.91;
    }

    60% {
        transform: translate3d(54.0%, -21.0%, 0) scale(1.150) perspective(800px) rotateY(-14.4deg);
        opacity: 0.90;
    }

    62% {
        transform: translate3d(62.4%, -28.8%, 0) scale(1.100) perspective(800px) rotateY(-13.2deg);
        opacity: 0.86;
    }

    64% {
        transform: translate3d(71.2%, -36.8%, 0) scale(1.050) perspective(800px) rotateY(-12.0deg);
        opacity: 0.82;
    }

    66% {
        transform: translate3d(80.4%, -45.2%, 0) scale(1.000) perspective(800px) rotateY(-10.8deg);
        opacity: 0.78;
    }

    68% {
        transform: translate3d(90.0%, -54.0%, 0) scale(0.950) perspective(800px) rotateY(-9.6deg);
        opacity: 0.74;
    }

    70% {
        transform: translate3d(100%, -63.2%, 0) scale(0.900) perspective(800px) rotateY(-8.4deg);
        opacity: 0.70;
    }

    72% {
        transform: translate3d(112.4%, -75.6%, 0) scale(0.820) perspective(800px) rotateY(-5.4deg);
        opacity: 0.64;
    }

    74% {
        transform: translate3d(125.2%, -88.4%, 0) scale(0.740) perspective(800px) rotateY(-2.4deg);
        opacity: 0.58;
    }

    76% {
        transform: translate3d(138.4%, -101.6%, 0) scale(0.660) perspective(800px) rotateY(0.6deg);
        opacity: 0.52;
    }

    78% {
        transform: translate3d(152%, -115.2%, 0) scale(0.580) perspective(800px) rotateY(3.6deg);
        opacity: 0.46;
    }

    80% {
        transform: translate3d(166%, -129.2%, 0) scale(0.500) perspective(800px) rotateY(6.6deg);
        opacity: 0.40;
    }

    82% {
        transform: translate3d(182%, -145.6%, 0) scale(0.410) perspective(800px) rotateY(10.2deg);
        opacity: 0.33;
    }

    84% {
        transform: translate3d(198.4%, -162.4%, 0) scale(0.320) perspective(800px) rotateY(13.8deg);
        opacity: 0.26;
    }

    86% {
        transform: translate3d(215.2%, -179.6%, 0) scale(0.230) perspective(800px) rotateY(17.4deg);
        opacity: 0.19;
    }

    88% {
        transform: translate3d(232.4%, -197.2%, 0) scale(0.140) perspective(800px) rotateY(21.0deg);
        opacity: 0.12;
    }

    90% {
        transform: translate3d(250%, -215.2%, 0) scale(0.080) perspective(800px) rotateY(24.6deg);
        opacity: 0.08;
    }

    92% {
        transform: translate3d(267.6%, -233.6%, 0) scale(0.050) perspective(800px) rotateY(26.4deg);
        opacity: 0.05;
    }

    94% {
        transform: translate3d(285.6%, -252.4%, 0) scale(0.030) perspective(800px) rotateY(28.2deg);
        opacity: 0.03;
    }

    96% {
        transform: translate3d(304%, -271.6%, 0) scale(0.015) perspective(800px) rotateY(29.4deg);
        opacity: 0.015;
    }

    98% {
        transform: translate3d(323.2%, -291.2%, 0) scale(0.005) perspective(800px) rotateY(30.3deg);
        opacity: 0.005;
    }

    100% {
        transform: translate3d(343.2%, -311.2%, 0) scale(0.001) perspective(800px) rotateY(31deg);
        opacity: 0;
    }
}



.bobble:hover {
    box-shadow: inset 5px 5px 20px 0px rgb(255 255 255 / 23%), inset 4px 4px 20px 3px rgb(255 255 255 / 15%), 2px 7px 3px 1px rgb(0 0 0 / 22%);
    scale: 0.8;
}

@keyframes bubble {
    0% {
        max-width: 210px;
        max-height: 184px;
        scale: 1.1;
    }

    15% {
        max-width: 184px;
        max-height: 210px;
        scale: 1;
    }

    25% {
        max-width: 206px;
        max-height: 194px;
        transform: translateY(-2.5px);
    }

    35% {
        max-width: 194px;
        max-height: 206px;
        transform: translateY(-5px);
    }

    50% {
        max-width: 197px;
        max-height: 203px;
        transform: translateY(-2.5px);
    }

    60% {
        max-width: 202px;
        max-height: 198px;
        transform: translateY(0px);
    }

    75% {
        max-width: 197px;
        max-height: 203px;

        transform: translateY(2.5px);
    }

    100% {
        max-width: 200px;
        max-height: 200px;
        transform: translateY(5px);
    }
}

@keyframes bobble {
    0% {

        transform: translateY(5px);
    }

    100% {
        transform: translateY(-5px);
    }
}

.glass * {
    opacity: 0;
}

.glass #welcome-label {
    transform: translateY(30px);
}


.login-card img {
    height: 64px;
    transition: all 0.8s ease;
}




/* Enhanced iOS 6 Style Garage Door */

.garagedoor {
    width: -webkit-fill-available;
    height: 5%;
    opacity: 0;
    position: absolute;
    left: 0;
    top: 0;
    z-index: 9999999;

    /* Enhanced realistic garage door background */
    background:
        /* Subtle highlight on top edge */
        linear-gradient(180deg, rgba(255, 255, 255, 0.15) 0%, transparent 8%),
        /* Main metallic panels with depth */
        repeating-linear-gradient(0deg,
            #1a1a1a 0px,
            #2a2a2a 2px,
            #3a3a3a 12px,
            #4a4a4a 18px,
            #3a3a3a 28px,
            #2a2a2a 38px,
            #1a1a1a 40px);

    /* Enhanced realistic shadows and depth */
    box-shadow:
        /* Main drop shadow */
        0 8px 25px rgba(0, 0, 0, 0.6),
        0 4px 15px rgba(0, 0, 0, 0.4),
        /* Inner shadow for depth */
        inset 0 2px 4px rgba(255, 255, 255, 0.08),
        inset 0 -3px 6px rgba(0, 0, 0, 0.4),
        /* Side shadows for 3D effect */
        inset 3px 0 6px rgba(0, 0, 0, 0.3),
        inset -3px 0 6px rgba(0, 0, 0, 0.3);

    /* Border for definition */
    border: 1px solid rgba(0, 0, 0, 0.6);
    border-radius: 0 0 8px 8px;

    transition: opacity 1.1s ease-in-out 0.8s, height 2.7s cubic-bezier(.6, -0.09, .19, 1.27) 0.1s;

    @starting-style {
        opacity: 1;
        height: 95%;
    }
}

.garagedoorclosed {
    opacity: 1;
    height: 74%;
    transition: opacity 0.5s ease-in-out 0.01s, height 1.6s cubic-bezier(.32, 1.51, .66, .86) 0.1s;
}

.endofdoor {
    width: -webkit-fill-available;
    height: 24px;
    bottom: 0;
    position: absolute;

    /* Enhanced warning stripes with proper perspective */
    background: repeating-linear-gradient(-45deg,
            #FFD700 0px,
            #FFD700 10px,
            #FFA500 10px,
            #FFA500 12px,
            #000000 12px,
            #000000 22px,
            #1a1a1a 22px,
            #1a1a1a 24px);

    /* Realistic depth and lighting */
    box-shadow:
        /* Main shadow */
        0 4px 15px rgba(0, 0, 0, 0.5),
        /* Inner depth shadow */
        inset 0 3px 6px rgba(0, 0, 0, 0.4),
        /* Top highlight */
        inset 0 1px 0 rgba(255, 255, 255, 0.1),
        /* Bottom shadow */
        inset 0 -1px 2px rgba(0, 0, 0, 0.3);

    border-radius: 0 0 6px 6px;
    border: 1px solid rgba(0, 0, 0, 0.4);
    border-top: none;
}

/* Add realistic overlay effects */
.endofdoor::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 8px;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.3) 0%, transparent 100%);
    pointer-events: none;
}

.endofdoor::after {
    content: '';
    position: absolute;
    top: 2px;
    left: 0;
    right: 0;
    bottom: 2px;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.2) 0%, transparent 30%);
    border-radius: 0 0 4px 4px;
    pointer-events: none;
}

/* Add panel details to garage door */
.garagedoor::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background:
        /* Horizontal panel lines */
        repeating-linear-gradient(0deg,
            transparent 0px,
            transparent 38px,
            rgba(0, 0, 0, 0.5) 38px,
            rgba(0, 0, 0, 0.5) 40px,
            rgba(255, 255, 255, 0.1) 40px,
            rgba(255, 255, 255, 0.1) 42px);
    pointer-events: none;
    border-radius: 0 0 8px 8px;
}

/* Add handle detail */
.garagedoor::after {
    content: '';
    position: absolute;
    right: 15px;
    top: 20px;
    width: 40px;
    height: 12px;
    background:
        linear-gradient(180deg,
            #c0c0c0 0%,
            #a0a0a0 20%,
            #808080 50%,
            #606060 80%,
            #404040 100%);
    border-radius: 6px;
    box-shadow:
        0 0 0 1px rgba(0, 0, 0, 0.4),
        0 2px 4px rgba(0, 0, 0, 0.5),
        inset 0 1px 0 rgba(255, 255, 255, 0.4),
        inset 0 -1px 0 rgba(0, 0, 0, 0.2);
    pointer-events: none;
}

/* Optional: Add a subtle texture overlay */
.garagedoor .texture-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background:
        radial-gradient(ellipse at 30% 20%, rgba(255, 255, 255, 0.08) 0%, transparent 50%),
        linear-gradient(135deg, rgba(255, 255, 255, 0.03) 0%, transparent 60%);
    pointer-events: none;
    border-radius: 0 0 8px 8px;
}

/* Enhanced login card integration */
.login-card .garagedoor {
    /* Ensure it fits well within the login card */
    border-radius: 8px 8px 0 0;
}

.login-card .garagedoor.garagedoorclosed {
    border-radius: 8px;
}


#welcome-label {
    margin-top: -11px;
    font-variant: all-small-caps;
    opacity: 0;
}



.board-container {
    width: 500px;
    max-width: 500px;
    height: 570px;
    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="500" height="300" viewBox="0 0 500 300"><defs><pattern id="cork" patternUnits="userSpaceOnUse" width="40" height="40"><rect width="40" height="40" fill="%23D2691E"/><circle cx="8" cy="8" r="2" fill="%23CD853F" opacity="0.7"/><circle cx="32" cy="12" r="1.5" fill="%23A0522D" opacity="0.6"/><circle cx="15" cy="25" r="1" fill="%23654321" opacity="0.8"/><circle cx="35" cy="30" r="2.5" fill="%23DEB887" opacity="0.5"/><ellipse cx="20" cy="15" rx="8" ry="3" fill="%23CD853F" opacity="0.4"/><ellipse cx="6" cy="35" rx="6" ry="2" fill="%23A0522D" opacity="0.3"/><circle cx="28" cy="38" r="1" fill="%23654321" opacity="0.7"/><circle cx="40" cy="22" r="1.5" fill="%238B4513" opacity="0.6"/><path d="M0,20 Q10,18 20,20 T40,20" stroke="%23A0522D" stroke-width="0.5" opacity="0.4" fill="none"/><path d="M10,5 Q20,7 30,5 T50,5" stroke="%23CD853F" stroke-width="0.3" opacity="0.3" fill="none"/></pattern></defs><rect width="500" height="300" fill="url(%23cork)"/><rect width="500" height="300" fill="url(%23cork)" opacity="0.8"/><circle cx="50" cy="50" r="3" fill="%236B4423" opacity="0.9"/><circle cx="150" cy="80" r="2.5" fill="%235D3A1A" opacity="0.8"/><circle cx="350" cy="120" r="2" fill="%23654321" opacity="0.7"/><circle cx="420" cy="180" r="3.5" fill="%236B4423" opacity="0.9"/><circle cx="280" cy="200" r="2" fill="%235D3A1A" opacity="0.8"/><circle cx="80" cy="220" r="2.5" fill="%23654321" opacity="0.7"/></svg>');
    background-size: cover;
    border-radius: 8px;
    position: relative;
    box-shadow:
        0 20px 40px rgba(0, 0, 0, 0.3),
        inset 0 2px 4px rgba(255, 255, 255, 0.1),
        inset 0 0 100px rgba(139, 69, 19, 0.2);
    overflow: hidden;
    border: 3px solid #5b371d;
}

.board-container::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background:
        radial-gradient(ellipse at 20% 30%, rgba(160, 82, 45, 0.3) 0%, transparent 50%),
        radial-gradient(ellipse at 80% 70%, rgba(101, 67, 33, 0.4) 0%, transparent 60%),
        radial-gradient(ellipse at 54% -20%, rgb(97 56 28 / 54%) 0% 0%, rgb(20 12 7 / 81%) 60%);
    pointer-events: none;
    z-index: 1;
}

.notes-area {
    position: absolute;
    top: 15px;
    left: 15px;
    right: 15px;
    bottom: 70px;
    z-index: 5;
    display: flex;
    flex-wrap: wrap;
    height: 90%;
    width: auto;
    gap: 10px;
    overflow: visible;
    padding-right: 5px;
    flex-direction: row;
}


.notes-area.scroll {
    overflow-y: scroll;
    overflow-x: clip;
}



.notes-area::-webkit-scrollbar {
    width: 6px;
}

.notes-area::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.1);
    border-radius: 3px;
}

.notes-area::-webkit-scrollbar-thumb {
    background: rgba(0, 0, 0, 0.3);
    border-radius: 3px;
}


.notes-area::-webkit-scrollbar-corner {
    background: rgba(0, 0, 0, 0.3);
    border-radius: 3px;
}

.stickynote {
    min-width: 65px;
    max-width: 177px;
    height: fit-content;
    background: linear-gradient(135deg, #feffa0 0%, #fff2a0 100%);
    border: 1px solid #d4c23a;
    border-radius: 4px;
    padding: 12px;
    position: relative;
    box-shadow:
        0 3px 6px rgba(0, 0, 0, 0.25),
        inset 0 1px 0 rgba(255, 255, 255, 0.8);
    transform: rotate(-1deg);
    transition: all 0.3s ease;
    font-size: 12px;
}

.stickynote:nth-child(even) {
    background: linear-gradient(135deg, #a0ffa0 0%, #a0f2a0 100%);
    border-color: #3ad43a;
    transform: rotate(1deg);
}

.stickynote:nth-child(3n) {
    background: linear-gradient(135deg, #aeaeff 0%, #a5acff 100%);
    border-color: #3a3ad4;
    transform: rotate(-0.5deg);
}

.stickynote:nth-child(3n) .note-content,
.stickynote:nth-child(4n) .note-content {
    text-shadow: 0 1px 0 rgb(201 201 201 / 80%);
}

.icon.upload-icon {
    mask-image: url('data:image/svg+xml,%3Csvg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"%3E%3Cpath d="M12 2a1 1 0 0 1 1 1v10.586l2.293-2.293a1 1 0 0 1 1.414 1.414l-4 4a1 1 0 0 1-1.414 0l-4-4a1 1 0 1 1 1.414-1.414L11 13.586V3a1 1 0 0 1 1-1z" transform="rotate(180 12 12)"/%3E%3Cpath d="M5 17a1 1 0 0 1 1 1v2h12v-2a1 1 0 1 1 2 0v2a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2v-2a1 1 0 0 1 1-1z"/%3E%3C/svg%3E');
}

.icon.weekly-icon {
    mask-image: url('data:image/svg+xml,%3Csvg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"%3E%3Crect x="3" y="4" width="18" height="18" rx="2" ry="2"/%3E%3Cline x1="16" y1="2" x2="16" y2="6"/%3E%3Cline x1="8" y1="2" x2="8" y2="6"/%3E%3Cline x1="3" y1="10" x2="21" y2="10"/%3E%3C/svg%3E');
}

.icon.chest-icon {
    mask-image: url('data:image/svg+xml,%3Csvg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"%3E%3Cpath d="M20 6h-8l-2-2H4c-1.1 0-1.99.9-1.99 2L2 18c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V8c0-1.1-.9-2-2-2zm0 12H4V8h16v10z"/%3E%3C/svg%3E');
}

.stickynote:nth-child(3n) .note-time,
.stickynote:nth-child(3n) .note-author,
.stickynote:nth-child(4n) .note-time,
.stickynote:nth-child(4n) .note-author {
    color: #444;
    text-shadow: 0 1px 0 rgb(201 201 201 / 80%);
}

.stickynote:nth-child(4n) {
    background: linear-gradient(135deg, #ffa0ff 0%, #f2a0f2 100%);
    border-color: #d43ad4;
    transform: rotate(0.8deg);
}

.stickynote:hover {
    transform: rotate(0deg) scale(1.05);
    box-shadow:
        0 6px 12px rgba(0, 0, 0, 0.35),
        inset 0 1px 0 rgba(255, 255, 255, 0.9);
    z-index: 10;
}

.pin {
    position: absolute;
    top: -6px;
    left: 50%;
    transform: translateX(-50%);
    width: 12px;
    height: 12px;
    background: radial-gradient(circle, #e74c3c 30%, #c0392b 70%);
    border-radius: 50%;
    box-shadow:
        0 2px 4px rgba(0, 0, 0, 0.4),
        inset 0 1px 0 rgba(255, 255, 255, 0.3);
    border: 1px solid #999;
}

.pin::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 4px;
    height: 4px;
    background: linear-gradient(45deg, #bdc3c7, #95a5a6);
    border-radius: 50%;
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.3);
}

.note-content {
    color: #333;
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.8);
    word-wrap: break-word;
    margin-bottom: 15px;
}

.note-time {
    position: absolute;
    bottom: 4px;
    right: 6px;
    font-size: 9px;
    color: #666;
    font-style: italic;
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.8);
}

.note-author {
    position: absolute;
    bottom: 4px;
    left: 6px;
    font-size: 9px;
    color: #666;
    font-style: italic;
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.8);
}

.add-button {
    position: absolute;
    bottom: 15px;
    left: 15px;
    width: 40px;
    border: unset;
    height: 40px;
    border-radius: 20px;
    background: linear-gradient(to bottom, #5cb85c 0%, #449d44 100%);
    border-top: 3px solid #52b352;
    outline: 2px solid #2a7514;
    color: white;
    font-size: 20px;
    font-weight: bold;
    cursor: pointer;
    z-index: 20;
    opacity: 0;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3), inset 0 2px 4px rgba(255, 255, 255, 0.3);
    transition: transform 0.3s ease, box-shadow 0.3s ease, opacity 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

.plusPad:hover .add-button {
    opacity: 0.5;
    transition: transform 0.3s ease, box-shadow 0.3s ease, opacity 0.3s ease 0.2s;
}

.plusPad {
    padding: 35px;
    width: 81%;
    pointer-events: all;
    position: absolute;
    z-index: 5;
    bottom: 0;
}

.add-button:hover {
    transition: transform 0.3s ease, box-shadow 0.3s ease, opacity 0.3s ease !important;
    opacity: 1 !important;
    transform: scale(1.1);
    box-shadow:
        0 6px 12px rgba(0, 0, 0, 0.4),
        inset 0 2px 4px rgba(255, 255, 255, 0.4);
}

.expanded {
    position: absolute;
    bottom: 15px;
    left: 15px;
    border-radius: 20px;
    border-top: 3px solid #d59a43;
    outline: 5px solid #935e3d;
    border: 2px dashed #dd9f42;
    font-weight: bold;
    cursor: pointer;
    z-index: 20;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    width: calc(100% - 30px);
    height: 40px;
    padding: 0 15px;
    background: linear-gradient(to bottom, #ba8a4b 0%, #a6692f 100%);
    color: #333;
    font-size: 14px;
    justify-content: flex-start;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3), inset 0 2px 20px rgb(0 0 0 / 38%);
}

.input-form {
    display: none;
    width: 100%;
    height: 100%;
    align-items: center;
    gap: 10px;
}

.input-form.active {
    display: flex;
}

.note-input {
    flex: 1;
    height: 28px;
    padding: 0 12px;
    border: 1px solid #ccc;
    border-radius: 14px;
    font-family: inherit;
    font-size: 13px;
    outline: none;
    background: white;
    box-shadow:
        inset 0 2px 4px rgba(0, 0, 0, 0.1),
        0 1px 0 rgba(255, 255, 255, 0.8);
}

.note-input:focus {
    border-color: #1f9eff;
    box-shadow:
        inset 0 2px 4px rgba(0, 0, 0, 0.1),
        0 0 0 2px rgba(92, 184, 92, 0.3);
}

.send-btn {
    border-top: 0.1px solid #54a9e3;
    outline: 1px solid #417ac3;
    padding-left: 16px;
    height: 28px;
    border: none;
    border-radius: 14px;
    cursor: pointer;
    font-weight: bold;
    font-size: 12px;
    background: linear-gradient(to bottom, #5aabdf 0%, #3b70c9 100%);
    color: white;
    text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.3);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3), 0 2px 4px rgba(0, 0, 0, 0.2);
    transition: all 0.2s ease;
}

.send-btn p {
    rotate: 45deg;
}

.send-btn:hover {
    transform: translateY(-1px);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.4),
        0 3px 6px rgba(0, 0, 0, 0.3);
}

.send-btn:active {
    transform: translateY(0);
    box-shadow:
        inset 0 2px 3px rgba(0, 0, 0, 0.2),
        0 1px 1px rgba(0, 0, 0, 0.1);
}

#notes-section {
    width: fit-content;
    height: fit-content;
}

@media (max-width: 730px) {
    .panel {
        min-width: -webkit-fill-available;
    }

}

.undo-icon {
    mask-image: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"%3E%3Cpath d="M12.5 8c-2.65 0-5.05.99-6.9 2.6L2 7v9h9l-3.62-3.62c1.39-1.16 3.16-1.88 5.12-1.88 3.54 0 6.55 2.31 7.6 5.5l2.37-.78C21.08 11.03 17.15 8 12.5 8z"/%3E%3C/svg%3E');
}

.redo-icon {
    mask-image: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"%3E%3Cpath d="M18.4 10.6C16.55 8.99 14.15 8 11.5 8c-4.65 0-8.58 3.03-9.96 7.22L3.9 16c1.05-3.19 4.05-5.5 7.6-5.5 1.95 0 3.73.72 5.12 1.88L13 16h9V7l-3.6 3.6z"/%3E%3C/svg%3E');
}

@media (max-width: 400px) {
    .tag div {
        display: none !important;
    }
}

@media (max-width: 550px) {
    .board-container {
        width: unset;
    }

    .tag div:nth-child(n+2) {
        display: none !important;
    }



    header h1 strong {
        font-size: 18px;
    }

    .stickynote {
        font-size: 11px;
    }

    #notes-section {
        width: -webkit-fill-available;
        height: unset;
    }

    .grid {
        justify-items: center;
        zoom: 0.75;
    }

    .history-item {
        zoom: 0.8;
    }
}

.panel.delete-zone {
    background: linear-gradient(#ff000091, #6100004d, #ff000091);
    border: 5px dashed #ff0000;
}

.panel.delete-zone:has(.sortable-ghost) {
    background: linear-gradient(#a0000091, #6100004d, #a0000091);
    border: 5px dashed #ff0000;
}

.panel.delete-zone * {
    opacity: 0;
}

.panel.delete-zone #all-items * {
    opacity: 0;
}

.panel.delete-zone #all-items {
    opacity: 1;
}

.panel.delete-zone #all-items *:last-child {
    display: none;
}

.panel.delete-zone #all-items .sortable-ghost {
    opacity: 1;
}

.panel.delete-zone #all-items::after {
    content: "Drop Here 🗑 to Remove";
    visibility: visible;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: #f9f9f96b;
    font-size: 30px;
    font-weight: bold;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
}

.panel.full {
    filter: contrast(0.5);
    outline: 2px solid #ff0000;
}

.panel.full .grid::after {
    content: "Full";
    visibility: visible;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: #ffffff;
    font-size: 53px;
    font-weight: bold;
    text-shadow: 0 1px 8px rgb(0 0 0), 0 1px 8px rgb(0 0 0), 0 1px 14px rgb(0 0 0);
    -webkit-text-stroke: 1px #818181;
}






@keyframes slideOut {
    from {
        transform: translateX(0);
        opacity: 1;
    }

    to {
        transform: translateX(100%);
        opacity: 0;
    }
}

.toast {
    font-family: system-ui, -apple-system, sans-serif;
    font-weight: 500;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
    transform: translateX(0%);
    position: fixed;
    bottom: 20px;
    right: 20px;
    padding: 12px 16px;
    border-radius: 8px;
    color: white;
    z-index: 10000;
    transition: transform 0.3s ease, opacity 0.3s ease;

    @starting-style {
        transform: translateX(100%);
    }
}


#quick-editor-content.dragging {
    cursor: grabbing !important;
    user-select: none;
    z-index: 10000;
    transition: none !important;
}



#quick-editor-modal.show #quick-editor-content {
    animation: slideInModal 0.3s ease-out;
}

@keyframes slideInModal {
    from {
        opacity: 0;
        transform: scale(0.9) translateY(-20px);
    }

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

.desc-item {
    display: flex;
    align-items: center;
    gap: 6px;
    background: rgb(60, 60, 60);
    color: rgb(255, 255, 255);
    border-radius: 6px;
    padding: 5px 11px;
    margin-bottom: 6px;
    cursor: grab;
    user-select: none;
    border: 1px solid rgb(85, 85, 85);
}

.prc-item {
    display: flex;
    align-items: center;
    gap: 6px;
    background: rgb(60, 60, 60);
    color: rgb(255, 255, 255);
    border-radius: 6px;
    padding: 5px 11px;
    margin-bottom: 6px;
    cursor: grab;
    user-select: none;
    border: 1px solid rgb(85, 85, 85);
}



/* Prevent text selection during drag */
body.dragging-panel {
    user-select: none !important;
    -webkit-user-select: none !important;
}




/* Smooth scrolling for the panel when constrained */
#quick-editor-content,
.delete-modal * {
    scroll-behavior: smooth;
}

/* Custom scrollbar styling for the constrained panel */
#quick-editor-content::-webkit-scrollbarm,
.delete-modal *::-webkit-scrollbar {
    width: 8px;
}

#quick-editor-content::-webkit-scrollbar-track,
.delete-modal *::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.1);
    border-radius: 4px;
}

#quick-editor-content::-webkit-scrollbar-thumb,
.delete-modal *::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.3);
    border-radius: 4px;
}

#quick-editor-content::-webkit-scrollbar-thumb:hover,
.delete-modal *::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.5);
}

.history-wrapper::-webkit-scrollbar {
    width: 9px;
}

.history-wrapper::-webkit-scrollbar-track {
    background: linear-gradient(90deg, #00000026, transparent);
    border: 1px dashed #a09077;
    border-radius: 4px;
    outline: 1px dashed #00000094;
}

.history-wrapper::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, var(--danger), #750000);
    width: 20px;
    border: 1px solid #750000;
    border-radius: 3px;
    transition: all 0.3s ease;
}

.history-wrapper::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(180deg, var(--danger), #000000);

    width: 20px;
    border: 1px solid #750000;
    border-radius: 3px;

}


/* Ensure main content area is a proper flex container */
#main-content {
    display: flex;
    flex-direction: row;
    height: 100%;
}

/* Profile Pill Styles */
.profile-pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 5px 10px 6px 6px;
    background: var(--card);
    border: 1px solid var(--ghost);
    box-shadow: 0 0 2px var(--shade);
    border-radius: 20px;
    font-size: 14px;
}


.profile-pill-avatar {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    object-fit: cover;
    background: var(--panel);
}

.profile-pill-name {
    font-weight: 500;
    color: var(--font);
}

.profile-pill-role {
    padding: 2px 8px;
    border-radius: 10px;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.profile-pill-role.role-admin {
    background: linear-gradient(135deg, #ff4444, #cc0000);
    color: white;
    border: 1px solid #630000;
}

.profile-pill-role.role-moderator,
.profile-pill-role.role-mod {
    background: linear-gradient(135deg, #4169E1, #1E3A8A);
    color: white;
    border: 1px solid #4709bb;
}

.profile-pill-role.role-vip {
    background: linear-gradient(135deg, #FFD700, #FFA500);
    color: #000;
    border: 1px solid #bb6209;
}

.profile-pill-role.role-user {
    display: none;
    /* Hide default user role */
}

#history-list {
    box-shadow: inset 0 0 7px #ffffff78;
    column-count: 1;
    column-gap: 18px;
    background: #ffffff;
    border: 2px solid #2d1911;
    border-radius: 10px;
    overflow: clip;
    padding: 24px;
    height: 400px;
    scale: 1;
    zoom: 1.3;
    filter: invert(1) hue-rotate(184deg);
    border: 0;
}

#history-list::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: radial-gradient(ellipse at 20% 30%, rgba(139, 69, 19, 0.05) 0%, transparent 50%), radial-gradient(ellipse at 60% 70%, rgba(101, 67, 33, 0.05) 0%, transparent 50%), radial-gradient(ellipse at 85% 20%, rgba(139, 69, 19, 0.04) 0%, transparent 50%);
    pointer-events: none;
}

.history-item {
    break-inside: avoid;
    margin-bottom: 40px;

    font-family: 'Courier New';
    color: var(--muted, #ddd);
    transition: background 0.2s ease;

}

.publish-modal-overlay * {
    box-sizing: border-box;
}

.publish-modal-content h2 {
    font-variant-caps: small-caps;
}

.publish-modal-content h3 {
    font-weight: 600;
    text-transform: uppercase;
    font-size: 14px;
    letter-spacing: 0.5px;
}

.publish-modal-content button:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.publish-modal-content button:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    transform: none;
}

@media (max-width: 640px) {
    .publish-modal-content {
        width: 95%;
        max-width: 95%;
    }
}

.history-header {
    background: linear-gradient(90deg, #ffda9e6e 0% 0%, #dbc7bf 10%, #e3d6c16e 80%);
    color: #000000;
    padding: 5px 20px 8px;
    font-size: 20px;
    font-family: 'Playfair Display', serif;
    scale: 1;
    display: flex;
    gap: 20px;
    align-items: baseline;
    font-weight: bold;
    letter-spacing: 2px;
}

.history-header::before {
    content: '§';
    position: absolute;
    left: -7px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 26px;
    color: #3c241580;
    opacity: 0.3;
    font-weight: normal;
    font-family: 'Courier Prime', 'Courier New', monospace;
}

.history-header .date {
    font-size: 10px;
    color: #2f2f2f9e;
    font-family: 'Courier Prime', 'Courier New', monospace;
    font-weight: normal;
    font-style: italic;
    letter-spacing: 0px;
    white-space: nowrap;
}

.amber {
    font-weight: 600;
    color: #8b4513
}

.old {
    color: #8b4513;
    text-decoration: line-through;
    opacity: 0.7;
    font-size: 10px;
    margin-right: 10px;
}

.new {
    color: #1a0f08;
    font-weight: 700;
    font-size: 10px;
    margin-left: 10px;
}

.red {
    font-weight: bold;
    color: #8b1a1a
}

.green {
    font-weight: bold;
    color: #2d5016
}

.price {
    display: inline-block;
    width: 15px;
    text-align: center;
    color: #8b4513;
    font-weight: bold;
    font-size: 12px;
}

.strike {
    text-decoration: line-through;
}

.typeicon {
    display: inline-block;
    width: 1.2em;
    text-align: center;
}

.description-item {
    margin-bottom: 16px;
    margin-left: 27px;
}

.list-item {
    display: flex;
    align-items: baseline;
    padding: 3px 0;
    border-bottom: 1px dotted #d4c4a0;
    position: relative;
    color: #ffffff;
    margin: 0 5px;
    color: #3c2415;
    font-weight: bold;
}

.list-item strong {
    font-family: 'Courier Prime', 'Courier New', monospace;
    flex: 1;
    font-weight: 700;
    padding: 0 8px;

    letter-spacing: -0.5px;
}

.history-list {
    list-style: none;
    padding: 0;
    margin: 0;
    font-size: 11px;

    color: #000;
}

.section-title {
    font-size: 18px;
    font-weight: 700;
    color: #c3a897;
    font-family: 'Playfair Display', serif;
    padding: 8px 3px 10px;
    margin: 0;
    margin-left: 17px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    position: relative;
}

.section-title::before {
    content: '◆';
    position: absolute;
    font-size: 10px;
    left: -10px;
    top: 12px;
    color: #c3a897;
}

.history-section {
    margin-left: 0px;
    background: #f5eee4;
    border-radius: 0 0 8px 8px;
    padding-bottom: 13px;
}

@media (max-width: 900px) {
    #history-list {
        column-count: 1;
    }
}

#history-list .ghost {
    background: transparent;
    border: 1px solid rgb(0 0 0 / 37%);
    -webkit-user-select: none;
    -ms-user-select: none;
    user-select: none;
    box-shadow: 1px 1px black;
    align-self: center;
    color: #000000;
    border-radius: 6px;
    font-size: 13px;
    cursor: pointer;
    transition: all 0.2s ease;
    backdrop-filter: sepia(0.5) blur(6px);
}

#history-list::after {
    content: '';
    position: absolute;
    top: 289px;
    right: -6px;
    width: 120px;
    height: 120px;
    border-radius: 50%;
    background: radial-gradient(ellipse at center, transparent 30%, rgba(139, 69, 19, 0.02) 30%, rgba(139, 69, 19, 0.06) 45%, rgba(139, 69, 19, 0.02) 60%, transparent 70%);
    transform: rotate(25deg) skew(10deg);
    pointer-events: none;
}

.torn-edge {
    position: absolute;
    bottom: -2px;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, transparent 0%, #f4f1e8 5%, #f4f1e8 10%, transparent 15%, transparent 20%, #f4f1e8 25%, #f4f1e8 30%, transparent 35%);
    background-size: 20px 100%;
}

@media (max-width: 1047px) {
    #publish-section {
        position: unset !important;
    }
}


/* Mobile-specific styles for quick editor */
@media (max-width: 768px) {




    .glass {
        opacity: 0;
    }

    #quick-editor-content img {
        max-width: 120px;
        max-height: 120px;
    }



    #quick-editor-modal.mobile-mode {
        padding: 0 !important;
        margin: 0 !important;
    }

    #quick-editor-content.mobile-mode {
        border-radius: 0 !important;
        margin: 0 !important;
        padding-top: 50px !important;
        /* Space for close button */
    }

    #quick-editor-content.mobile-mode #tutorial {
        padding: 20px;
        font-size: 16px;
    }



    .quick-editor-body {

        align-content: center;
    }

    #quick-editor-content.mobile-mode .small-btn {

        font-size: 16px;
    }

    #quick-editor-content.mobile-mode .flag-row {
        flex-wrap: wrap;
        gap: 8px;
    }



    /* Ensure scrollability */
    #quick-editor-modal.mobile-mode {
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }

    /* Fix for iOS safe areas */
    #quick-editor-content.mobile-mode {
        padding-bottom: env(safe-area-inset-bottom, 20px);
    }

    .small-btn {
        padding: 5px 5px;
    }
}

.glass .garagedoor {
    opacity: 0;

}


.delete-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1000;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease;
}

.delete-modal-overlay.active {
    opacity: 1;
    pointer-events: all;
}

.delete-modal {
    border-radius: 12px;
    padding: 12px 24px 24px 24px;
    max-width: 400px;
    box-shadow: 0 6px 24px var(--shade);
    border: 1px solid var(--ghost);
    backdrop-filter: blur(36px);
    background: linear-gradient(137deg, rgba(74, 87, 97, 0.24), rgba(74, 81, 94, 0.37), rgba(66, 84, 98, 0.13));

    width: 90%;
    transition: transform 0.2s ease;
}

.delete-modal-overlay.active .delete-modal {
    transform: scale(1);
}

.delete-modal-header {
    font-size: 31px;
    text-shadow: 0px 0px 8px #ffffff;
    font-weight: 600;
    color: #ffffff;
    margin-bottom: 8px;
    font-variant: all-petite-caps;
}

.delete-modal-content {
    color: #afafaf;
    margin-bottom: 24px;
    line-height: 1.4;
}

.delete-modal-note-preview {
    min-width: 65px;
    height: fit-content;
    background: linear-gradient(135deg, #feffa0 0%, #fff2a0 100%);
    border: 1px solid #d4c23a;
    border-radius: 4px;
    padding: 12px;
    position: relative;
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.8);
    transform: rotate(-1deg);
    transition: all 0.3s ease;
    font-size: 13px;
    color: black;
    margin: 20px;
    font-size: 15px;
}

.delete-modal-buttons {
    display: flex;
    gap: 12px;
    justify-content: flex-end;
}



@keyframes pulse {

    0%,
    100% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.05);
    }
}

.update-warning-modal {
    animation: slideIn 0.3s ease;
}

@keyframes slideIn {
    from {
        opacity: 0;
        transform: translate(-50%, -60%);
    }

    to {
        opacity: 1;
        transform: translate(-50%, -50%);
    }
}

#update-badge:hover {
    transform: scale(1.1);
}


.context-menu-section {
    padding: 8px 12px;
}

.context-menu-label {
    font-size: 12px;
    color: #ffffff;
    margin-bottom: 8px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.context-menu-reactions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.reaction-option {
    cursor: pointer;
    font-size: 20px;
    padding: 4px;
    border-radius: 4px;
    transition: all 0.2s;
    display: inline-block;
}

.reaction-option:hover {
    background: rgba(255, 255, 255, 0.1);
    transform: scale(1.2);
}

/* Style for already-selected reactions */
.reaction-option.selected {
    filter: saturate(0) brightness(0.5);
    background: rgba(255, 255, 255, 0.05);
    position: relative;
}


.context-menu-divider {
    height: 1px;
    background: var(--shade, #374151);
    margin: 4px 0;
}

.context-menu-item {
    padding: 8px 16px;
    cursor: pointer;
    transition: background 0.2s;
    font-size: 14px;
}



.context-menu-item:hover {
    background: rgba(255, 255, 255, 0.05);
}

.note-reactions {
    position: absolute;
    bottom: 3px;
    right: 40%;
    display: flex;
    gap: 0px;
    flex-wrap: nowrap;
    max-width: 80px;
}

.note-reaction {
    font-size: 14px;
    display: inline-flex;
    align-items: center;
    gap: 2px;
}

.note-reaction-count {
    font-size: 11px;
    color: #000000;
    font-family: cursive;
    border-radius: 7px;
}




/* Item Adder Styles - Consistent with existing design */
.item-adder-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(4px);
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.item-adder-overlay.hidden {
    display: none;
}

.item-adder-container {
    filter: drop-shadow(2px 4px 0px black);
    background: linear-gradient(137deg, #4a57613d, #4a515e5e, #42546221);
    backdrop-filter: blur(60px);
    border: 1px solid var(--shade);
    border-radius: 12px;
    width: 90%;
    max-width: 600px;
    max-height: 90vh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
}

.item-adder-header {
    padding: 20px;
    border-bottom: 1px solid var(--shade);
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: linear-gradient(135deg, rgba(55, 166, 255, 0.1), rgba(55, 166, 255, 0.05));
}

.item-adder-header h2 {
    margin: 0;
    font-size: 35px;
    color: #f0f8ff24;
    font-variant: all-petite-caps;
    user-select: none;
}

.item-adder-header .close-btn {
    background: transparent;
    border: none;
    color: #ffffff91;
    font-size: 36px;
    cursor: pointer;
    padding: 0;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
}

.item-adder-header .close-btn:hover {
    color: #ffffffe0;
}

.item-adder-steps {
    display: flex;
    padding: 20px;
    gap: 20px;
    border-bottom: 1px solid var(--shade);
    background: rgba(0, 0, 0, 0.2);
}

.step {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 1;
    opacity: 0.5;
    transition: opacity 0.3s;
}

.step.active {
    opacity: 1;
}

.step.completed {
    opacity: 0.8;
}

.step-number {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--panel);
    color: var(--muted);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    font-size: 14px;
    transition: all 0.3s;
}

.step.active .step-number {
    background: var(--accent);
    color: white;
}

.step.completed .step-number {
    background: var(--success);
    color: white;
}

.step-label {
    margin-top: -5px;
    font-size: 18px;
    color: var(--muted);
    font-variant: all-petite-caps;
}

.item-adder-body {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 20px;
}

.step-content {
    display: none;
}

.step-content.active {
    display: block;
}

.step-content h3 {
    margin: 0 0 20px 0;
    color: #ffffff69;
    font-size: 28px;
    font-variant: all-petite-caps;
}

.category-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 12px;
}

.category-option {
    background: var(--panel);
    border: 2px solid transparent;
    border-radius: 10px;
    padding: 16px;
    cursor: pointer;
    transition: all 0.2s;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    filter: brightness(0.5);
    text-align: center;
}

.category-option:hover {
    background: var(--card);

}

.category-option:nth-child(1).selected {
    filter: brightness(1);
    border-color: #368733;
    transform: translateY(-2px);
    background: linear-gradient(180deg, rgb(237 255 137), #489312);
    box-shadow: inset 0px 0px 20px 0px #00000087;
}

.category-option:nth-child(2).selected {
    filter: brightness(1);
    border-color: #335f87;
    transform: translateY(-2px);
    background: linear-gradient(180deg, rgb(137 199 255), #126293);
    box-shadow: inset 0px 0px 20px 0px #00000087;
}

.category-option:nth-child(3).selected {
    filter: brightness(1);
    border-color: #b79630;
    transform: translateY(-2px);
    background: linear-gradient(180deg, rgb(242 255 137), #c77b1a);
    box-shadow: inset 0px 0px 20px 0px #00000087;
}

.category-option:nth-child(4).selected {
    filter: brightness(1);

    border-color: #8530b7;
    transform: translateY(-2px);
    background: linear-gradient(180deg, rgb(255 137 208), #65169f);
    box-shadow: inset 0px 0px 20px 0px #00000087;
}

/*.category-option:nth-child(4) {
    background: linear-gradient(180deg, rgb(255, 255, 255), #a3a3a3);
    pointer-events: none;
}

.category-option:nth-child(4)::after {
    content: "Coming Soon";
    height: 100%;
    width: 100%;
    position: absolute;
    font-variant: all-petite-caps;
    align-content: center;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: #ffffff;
    font-size: 14px;
    font-weight: bold;
    background: rgba(0, 0, 0, 0.5);
    padding: 0px 2px 1px;
    outline: 2px solid grey;
    border-radius: 12px;
    backdrop-filter: blur(1px);
}*/

.category-option:nth-child(5).selected {
    filter: brightness(1);
    border-color: #a9223f;
    transform: translateY(-2px);
    background: linear-gradient(180deg, rgb(255 137 137), #9f163b);
    box-shadow: inset 0px 0px 20px 0px #00000087;
}

.selected .category-count {
    color: #272727;
}

.selected .category-name {
    color: #000;
    letter-spacing: 2px;
    transition: letter-spacing 0.4s ease-out;
}

.category-icon {
    width: 32px;
    height: 32px;
    color: var(--muted);
}

.category-icon svg {
    width: 100%;
    height: 100%;
}

.category-name {
    font-variant: all-petite-caps;
    font-weight: 600;

    color: var(--font);
    font-size: 14px;
}

.category-count {
    font-size: 12px;
    color: var(--muted);
    font-variant: all-petite-caps;
}

.form-group {
    margin-bottom: 20px;
}

.form-group label {
    display: block;
    margin-bottom: 8px;
    color: #ffffff69;
    font-size: 18px;
    font-weight: 500;
    font-variant: all-petite-caps;
}

.form-group label strong {

    color: #b93d3d;

}

.form-group input[type="text"],
.form-group textarea {
    width: -webkit-fill-available;
    background: transparent;
    border: 1px solid var(--ghost);
    border-radius: 8px;
    padding: 10px 12px;
    color: var(--muted);
    font-size: 14px;
    transition: all 0.2s;
}

.form-group input[type="text"]:focus,
.form-group textarea:focus {
    outline: none;
    border-color: var(--accent);
    background: var(--panel);
    color: var(--font);
}

.form-group textarea {
    resize: vertical;
    border-bottom-right-radius: 0px;
    font-family: inherit;
}

.form-group small {
    display: block;
    margin-top: 4px;
    color: var(--muted);
    font-size: 12px;
}

.image-input-group {
    display: flex;
    gap: 12px;
}

.image-input-group input {
    flex: 1;
}

.image-preview {
    width: 80px;
    height: 80px;
    background: var(--panel);
    border: 1px solid var(--ghost);
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: visible;
}

.image-preview img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

.image-preview #preview-placeholder {
    color: var(--muted);
    font-size: 12px;
}

.properties-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
    margin-bottom: 24px;
}

.property-toggle {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    padding: 12px;
    background: var(--panel);
    border-radius: 8px;
    transition: all 0.2s;
}

.property-toggle:hover {
    background: var(--card);
    filter: brightness(1.2);
}

.property-toggle input[type="checkbox"] {
    width: 18px;
    height: 18px;
    cursor: pointer;
}

.property-toggle span {
    color: var(--muted);
    font-size: 14px;
}

.item-preview {
    margin-top: 24px;
    padding-top: 24px;
    border-top: 1px solid var(--shade);
}

.item-preview h4 {
    margin: 0 0 12px 0;
    color: #ffffff69;
    font-size: 16px;
    font-variant: all-petite-caps;
    letter-spacing: 0.5px;
}

.preview-card {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.category-option .category-icon svg {
    transition: all 0.2s;
}

.selected .category-icon svg {
    fill: #000000ab;
}


.item-adder-footer {
    padding: 20px;
    border-top: 1px solid var(--shade);
    display: flex;
    gap: 12px;
    justify-content: flex-end;
    z-index: 22;
    box-shadow: 0px 0px 20px 0px #000000;
}

.plus-icon {
    mask-image: url('data:image/svg+xml,<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M12 5a1 1 0 0 1 1 1v5h5a1 1 0 1 1 0 2h-5v5a1 1 0 1 1-2 0v-5H6a1 1 0 1 1 0-2h5V6a1 1 0 0 1 1-1z"/></svg>');
}

#add-item-btn {
    margin-left: auto;
}


.upload-tabs {
    display: flex;
    gap: 10px;
    margin-bottom: 15px;
    border-bottom: 2px solid #333;
}

.upload-tab {
    padding: 8px 16px;
    background: transparent;
    border: none;
    color: #999;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 6px;
    transition: all 0.3s;
    position: relative;
    font-size: 14px;
}

.upload-tab:hover {
    color: #fff;
}

.upload-tab.active {
    color: #3498db;
}

.upload-tab.active::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    right: 0;
    height: 2px;
    background: #3498db;
}

.upload-content {
    display: none;
}

.upload-content.active {
    display: block;
}

.upload-dropzone {
    border: 2px dashed #444;
    border-radius: 8px;
    padding: 20px;
    text-align: center;
    cursor: pointer;
    transition: all 0.3s;
    background: #1a1a1a;
}

.upload-dropzone:hover {
    border-color: #3498db;
    background: #222;
}

.upload-dropzone.dragover {
    border-color: #2ecc71;
    background: #1e3a1e;
}

.upload-dropzone p {
    margin: 4px 0 5px;
    color: #ccc;
}

.upload-dropzone small {
    color: #666;
    font-size: 12px;
}

.upload-status {
    padding: 15px;
    background: #1a1a1a;
    border-radius: 8px;
    margin-top: 10px;
}

.upload-progress {
    height: 6px;
    background: #333;
    border-radius: 3px;
    overflow: hidden;
    margin-bottom: 10px;
}

.progress-bar {
    height: 100%;
    background: linear-gradient(90deg, #3498db, #2ecc71);
    width: 0%;
    transition: width 0.3s;
    border-radius: 3px;
}

#upload-status-text {
    color: #999;
    font-size: 13px;
}

.image-preview {
    position: relative;
    justify-self: center;
    margin-bottom: 15px;
    min-height: 100px;
    min-width: 100px;
    padding: 12px;
    border-radius: 8px;
    overflow: visible;
}

.image-preview img {
    max-width: 100%;
    max-height: 200px;
    object-fit: contain;
}

.remove-image-btn {
    position: absolute;
    top: -15px;
    right: -16px;
    background: linear-gradient(180deg, #ff3b3b, #9b0e0e);
    border: 1px solid darkred;
    border-radius: 50%;
    color: white;
    font-size: 20px;
    cursor: pointer;
    transition: all 0.3s;
}

.remove-image-btn:hover {
    filter: brightness(0.85);
    transform: scale(1.1);
}




.item-adder-container *::-webkit-scrollbar {
    width: 8px;
}

.item-adder-container *::-webkit-scrollbar-track {
    background: transparent;
    border-radius: 4px;
}

.item-adder-container *::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.3);
    border-radius: 4px;
}

.item-adder-container *::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.5);
}



.item-adder-container *::-webkit-scrollbar-corner {
    background: transparent;
}





.item-card.modified-item {
    box-shadow: 0 0 0 2px var(--accent), 0 0 12px var(--accent-transparent);
    animation: pulse-highlight 2s ease-in-out infinite;
}

@keyframes pulse-highlight {

    0%,
    100% {
        box-shadow: 0 0 0 2px var(--accent), 0 0 12px var(--accent-transparent);
    }

    50% {
        box-shadow: 0 0 0 3px var(--accent), 0 0 20px var(--accent-transparent);
    }
}

.item-card.new-item {
    box-shadow: 0 0 0 2px #fbbf24, 0 0 12px #fbbf2466 !important;
    animation: none;
}


.desc-item input,
.prc-item input {
    pointer-events: auto !important;
    cursor: text !important;
}

.desc-item input[type="number"],
.prc-item input[type="number"] {
    cursor: pointer !important;
}

.editing {
    cursor: default !important;
}

#title-editor input[type="color"] {
    border: 2px solid #374151;
}

#title-editor input[type="color"]:hover {
    border-color: #3b82f6;
}

.title-category {
    position: relative;
    overflow: hidden;
}

.title-category::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
    transition: left 0.5s;
}

.title-category:hover::before {
    left: 100%;
}