:root {
    --bg-color: #0a0a0a;
    --panel-bg: rgba(20, 20, 20, 0.65);
    --text-color: #e0e0e0;
    --accent-color: #00ff88;
    --accent-hover: #00cc6a;
    --border-color: rgba(255, 255, 255, 0.1);
    --font-main: 'Inter', sans-serif;
}

body,
html {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    background-color: var(--bg-color);
    font-family: var(--font-main);
    color: var(--text-color);
}

canvas {
    display: block;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
}

/* Noise Overlay Removed */





.room-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 80;
    background: url('https://images.unsplash.com/photo-1513519245088-0e12902e5a38?q=80&w=2070&auto=format&fit=crop') center/cover no-repeat;
    display: flex;
    justify-content: center;
    align-items: center;
    backdrop-filter: blur(2px);
}

.room-overlay.hidden {
    display: none;
}

.close-room-btn {
    position: absolute;
    top: 20px;
    right: 30px;
    background: none;
    border: none;
    color: rgba(255, 255, 255, 0.6);
    font-size: 3rem;
    cursor: pointer;
    transition: color 0.2s;
    z-index: 90;
}

.close-room-btn:hover {
    color: #fff;
    transform: scale(1.1);
}

.room-hint {
    position: absolute;
    bottom: 30px;
    color: rgba(255, 255, 255, 0.4);
    font-size: 0.9rem;
    text-transform: uppercase;
    letter-spacing: 2px;
}

.room-frame {
    width: 60vw;
    height: 40vw;
    box-shadow:
        inset 0 0 0 20px #1a1a1a,
        /* Frame */
        inset 0 0 0 30px #333,
        /* Inner Bevel */
        0 20px 50px rgba(0, 0, 0, 0.8);
    /* Drop Shadow on Wall */
    background: transparent;
    /* Shows canvas behind? No, canvas is z-index 1. Need to clone or see through? */
    /* Problem: The room overlay covers the canvas with the wall image. */
    /* Fix: We need the frame to be HOLLOW (transparent) and the wall to be around it? */
    /* CSS Masking is complex. Easier: */
    /* Use a huge border on the frame? */
    border: 40px solid #1a1a1a;
    position: relative;
    background: rgba(0, 0, 0, 0.5);
    /* Placeholder darken */
}

/* Better Room Logic: 
   The overlay should be a WALL image with a TRANSPARENT hole in the middle.
   OR: We just position the room image around a central transparent div.
   Let's try a simple "Frame on top of canvas" first, but the user wants "View in Room".
   Usually this means seeing the art scale down onto a wall.
   
   Let's do this:
   1. Clone canvas content to an image inside the frame?
   2. Or just Overlay a "Wall with a hole"?
   
   Let's stick to: Central Frame floating over the art (which is fullscreen).
   This doesn't look like a room.
   
   Better:
   .room-overlay covers everything.
   Inside it, we have an <img> of the current canvas state + a frame + wall background.
   We will handle this in JS: canvas.toDataURL() -> set as background of .room-frame.
*/
.room-frame {
    width: 600px;
    height: 400px;
    background-color: #000;
    border: 15px solid #111;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
    transform: perspective(1000px) rotateY(0deg);
    transition: transform 0.5s;
    background-size: cover;
    background-position: center;
}

.controls-overlay {
    position: absolute;
    top: 2rem;
    right: 2rem;
    width: 320px;
    background: var(--panel-bg);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 1.5rem;
    z-index: 100;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
    animation: fadeIn 0.8s ease-out;
    transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}

.controls-overlay.minimized {
    transform: translateX(120%);
}

.toggle-btn {
    position: absolute;
    top: 10px;
    left: -40px;
    width: 30px;
    height: 30px;
    background: var(--panel-bg);
    border: 1px solid var(--border-color);
    border-radius: 50%;
    color: var(--text-color);
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 1rem;
    backdrop-filter: blur(16px);
    transition: all 0.2s;
}

.controls-overlay.minimized .toggle-btn {
    left: -80px;
    /* Align to screen edge */
    width: 44px;
    /* Larger hit area */
    height: 44px;
    font-weight: bold;
    font-size: 1.2rem;
    background: var(--accent-color);
    color: #000;
    box-shadow: -5px 0 15px rgba(0, 255, 136, 0.3);
    /* Glow to left */
}

/* Tooltip for Share Button */
.tooltip-container {
    position: relative;
    display: inline-block;
}

.share-tooltip {
    visibility: hidden;
    width: 100px;
    background-color: #00ff88;
    color: #000;
    text-align: center;
    border-radius: 4px;
    padding: 5px;
    position: absolute;
    z-index: 1;
    bottom: 125%;
    left: 50%;
    margin-left: -50px;
    opacity: 0;
    transition: opacity 0.3s;
    font-size: 0.8rem;
    font-weight: bold;
}

.share-tooltip::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    margin-left: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: #00ff88 transparent transparent transparent;
}

.share-tooltip.visible {
    visibility: visible;
    opacity: 1;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }

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

.header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 2rem;
    border-bottom: 1px solid var(--border-color);
    padding-bottom: 1rem;
}

.magic-btn {
    background: none;
    border: 1px solid var(--border-color);
    border-radius: 50%;
    width: 32px;
    height: 32px;
    cursor: pointer;
    font-size: 1.1rem;
    transition: all 0.2s;
    display: flex;
    justify-content: center;
    align-items: center;
}

.magic-btn:hover {
    background: rgba(255, 255, 255, 0.1);
    transform: rotate(15deg) scale(1.1);
    border-color: var(--accent-color);
}

.header-controls {
    display: flex;
    gap: 8px;
}

.magic-btn.active {
    background: var(--accent-color);
    color: #000;
    border-color: var(--accent-color);
}

/* Enhanced Visibility for Primary Controls */
#pauseBtn {
    color: #000;
    background: var(--accent-color);
    /* Green/Neo for Play */
    border-color: var(--accent-color);
    box-shadow: 0 0 10px rgba(0, 255, 136, 0.2);
}

#resetBtn {
    color: #fff;
    background: rgba(255, 68, 68, 0.8);
    /* Red for Reset */
    border-color: #ff4444;
}

#pauseBtn:hover {
    background: var(--accent-hover);
    transform: scale(1.1);
    box-shadow: 0 0 15px rgba(0, 255, 136, 0.4);
}

#resetBtn:hover {
    background: #ff4444;
    transform: scale(1.1);
    box-shadow: 0 0 15px rgba(255, 68, 68, 0.4);
}

.header h1 {
    font-size: 1.2rem;
    font-weight: 600;
    margin: 0;
    letter-spacing: -0.5px;
}

.status {
    font-size: 0.75rem;
    background: rgba(0, 255, 136, 0.1);
    color: var(--accent-color);
    padding: 2px 8px;
    border-radius: 4px;
    text-transform: uppercase;
    font-weight: 700;
    letter-spacing: 0.5px;
}

.badge-pro {
    background: linear-gradient(135deg, #ffd700, #ffaa00);
    color: #000;
    font-size: 0.6rem;
    padding: 2px 6px;
    border-radius: 4px;
    margin-left: 6px;
    font-weight: 700;
    vertical-align: middle;
}

.checkbox-group {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.85rem;
}

.checkbox-group input {
    accent-color: var(--accent-color);
}

.control-group {
    margin-bottom: 1.5rem;
}

.control-group label {
    display: block;
    font-size: 0.85rem;
    margin-bottom: 0.5rem;
    color: #aaa;
    font-weight: 500;
}

input[type="range"] {
    width: 100%;
    background: transparent;
    -webkit-appearance: none;
    appearance: none;
    margin: 8px 0;
}

input[type="range"]:focus {
    outline: none;
}

input[type="range"]::-webkit-slider-runnable-track {
    width: 100%;
    height: 4px;
    cursor: pointer;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 2px;
}

input[type="range"]::-webkit-slider-thumb {
    height: 16px;
    width: 16px;
    border-radius: 50%;
    background: var(--text-color);
    cursor: pointer;
    -webkit-appearance: none;
    margin-top: -6px;
    border: 2px solid var(--bg-color);
    transition: background 0.2s;
}

input[type="range"]::-webkit-slider-thumb:hover {
    background: var(--accent-color);
}

select {
    width: 100%;
    padding: 0.5rem;
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid var(--border-color);
    border-radius: 6px;
    color: var(--text-color);
    font-family: var(--font-main);
    cursor: pointer;
}

select:focus {
    outline: none;
    border-color: var(--accent-color);
}

.actions {
    display: flex;
    gap: 10px;
    margin-top: 2rem;
}

.btn {
    flex: 1;
    border: none;
    padding: 0.75rem;
    border-radius: 6px;
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
    font-family: var(--font-main);
}

.btn.primary {
    background: var(--accent-color);
    color: #000;
}

.btn.primary:hover {
    background: var(--accent-hover);
    transform: translateY(-1px);
}

.btn.secondary {
    background: rgba(255, 255, 255, 0.05);
    color: var(--text-color);
    border: 1px solid var(--border-color);
}

.btn.secondary:hover {
    background: rgba(255, 255, 255, 0.1);
}



/* Modal Styles */
.modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.8);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1000;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
    backdrop-filter: blur(5px);
}

.modal.visible {
    opacity: 1;
    pointer-events: all;
    visibility: visible;
}

.modal.hidden {
    display: none !important;
}

.modal-content {
    background: #1a1a1a;
    width: 95%;
    max-width: 700px;
    border-radius: 16px;
    padding: 2.5rem;
    border: 1px solid rgba(255, 215, 0, 0.2);
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5), 0 0 30px rgba(255, 215, 0, 0.1);
    transform: translateY(20px);
    transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.modal.visible .modal-content {
    transform: translateY(0);
}

.modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 2rem;
}

.modal-header h2 {
    margin: 0;
    background: linear-gradient(135deg, #fff, #bbb);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    font-size: 1.8rem;
}

/* Pricing Grid */
.pricing-container {
    display: flex;
    gap: 20px;
    margin-bottom: 20px;
}

@media (max-width: 600px) {
    .pricing-container {
        flex-direction: column;
    }
}

.pricing-card {
    flex: 1;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 1.5rem;
    text-align: center;
    position: relative;
    transition: transform 0.2s;
}

.pricing-card:hover {
    transform: translateY(-5px);
    border-color: rgba(255, 255, 255, 0.2);
}

/* Cart Badge */
.cart-badge {
    position: absolute;
    top: -5px;
    right: -5px;
    background: #ff0055;
    color: white;
    font-size: 0.7rem;
    font-weight: bold;
    border-radius: 50%;
    width: 18px;
    height: 18px;
    display: flex;
    /* Flex to center text */
    justify-content: center;
    align-items: center;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.5);
}

.cart-badge.hidden {
    display: none;
}

/* Cart List Styling */
.cart-item {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 10px;
    margin-bottom: 1rem;
    display: flex;
    align-items: center;
    gap: 15px;
    transition: background 0.2s;
}

.cart-item:hover {
    background: rgba(255, 255, 255, 0.08);
}

.cart-item-thumb {
    width: 80px;
    height: 60px;
    object-fit: cover;
    border-radius: 4px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    background: #000;
}

.cart-item-info {
    flex: 1;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.cart-item-details {
    display: flex;
    flex-direction: column;
}

.cart-item-title {
    color: #fff;
    font-weight: 600;
    font-size: 0.95rem;
}

.cart-item-meta {
    color: #999;
    font-size: 0.75rem;
    margin-top: 4px;
}

.cart-item-actions {
    display: flex;
    align-items: center;
    gap: 15px;
}

.cart-item-price {
    font-weight: 700;
    color: var(--accent-color);
}

.remove-item-btn {
    background: rgba(0, 0, 0, 0.2);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: #999;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    cursor: pointer;
    font-size: 1rem;
    line-height: 1;
    padding: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: all 0.2s;
}

.remove-item-btn:hover {
    background: #ff4444;
    border-color: #ff4444;
    color: #fff;
    transform: scale(1.1);
}


/* Empty State */
.cart-empty-state {
    text-align: center;
    color: #888;
    padding: 3rem 1rem;
    background: rgba(255, 255, 255, 0.02);
    border-radius: 8px;
    border: 1px dashed rgba(255, 255, 255, 0.1);
}

.pricing-card.featured {
    border-color: #ffd700;
    background: linear-gradient(180deg, rgba(255, 215, 0, 0.05) 0%, rgba(0, 0, 0, 0) 100%);
    box-shadow: 0 0 20px rgba(255, 215, 0, 0.1);
}

/* Negative Mode */
body.inverted {
    filter: invert(1);
}

/* SEO Content Section - Hidden from view but accessible to search engines */
.seo-text {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
    /* Screen reader accessible but visually hidden */
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
}

/* Alternative: If you want it visible at the bottom on scroll */
/* Uncomment this and comment out the above if you prefer */
/*
.seo-text {
    position: relative;
    background: var(--bg-color);
    color: var(--text-color);
    padding: 4rem 2rem;
    max-width: 1200px;
    margin: 0 auto;
    z-index: 2;
}

.seo-text h2 {
    color: #fff;
    font-size: 1.8rem;
    margin-bottom: 1rem;
    margin-top: 0;
}

.seo-text h3 {
    color: var(--accent-color);
    font-size: 1.2rem;
    margin-top: 2rem;
    margin-bottom: 0.8rem;
}

.seo-text p {
    line-height: 1.7;
    color: #ccc;
    margin-bottom: 1rem;
}

.seo-text ul,
.seo-text ol {
    line-height: 1.7;
    color: #ccc;
    margin-bottom: 1.5rem;
    padding-left: 1.5rem;
}

.seo-text li {
    margin-bottom: 0.5rem;
}

.seo-text a {
    color: var(--accent-color);
    text-decoration: none;
    border-bottom: 1px solid transparent;
    transition: border-color 0.2s;
}

.seo-text a:hover {
    border-bottom-color: var(--accent-color);
}

.seo-text strong {
    color: #fff;
}
*/

.badge-best-value {
    position: absolute;
    top: -12px;
    left: 50%;
    transform: translateX(-50%);
    background: #ffd700;
    color: #000;
    font-size: 0.7rem;
    font-weight: 800;
    padding: 4px 12px;
    border-radius: 12px;
    text-transform: uppercase;
}

.pricing-card h3 {
    margin: 0 0 8px 0;
    font-size: 1.1rem;
    color: #fff;
}

.price {
    font-size: 2rem;
    font-weight: 700;
    color: #fff;
}

.price .period {
    font-size: 0.9rem;
    color: #888;
    font-weight: 400;
}

.subtext {
    font-size: 0.8rem;
    color: #888;
    margin: 0 0 15px 0;
}

.pricing-card hr {
    border: 0;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    margin: 15px 0;
}

.feature-list.small {
    text-align: left;
    list-style: none;
    padding: 0;
    margin: 0 0 20px 0;
}

.feature-list.small li {
    font-size: 0.85rem;
    margin-bottom: 8px;
    color: #ccc;
    display: flex;
    align-items: center;
}

.feature-list.small li .check {
    width: 20px;
    color: var(--accent-color);
}

.feature-list.small li .cross {
    width: 20px;
    color: #ff4444;
    font-weight: bold;
}

/* Override check color for featured card */
.pricing-card.featured .check {
    color: #ffd700;
}

.close-modal {
    background: none;
    border: none;
    color: #666;
    font-size: 1.5rem;
    cursor: pointer;
    padding: 0;
}

.close-modal:hover {
    color: #fff;
}



.btn.full-width {
    width: 100%;
    padding: 1rem;
    font-size: 1rem;
    background: linear-gradient(135deg, #ffd700, #ffaa00);
    color: #000;
    border: none;
}

.btn.full-width:hover {
    filter: brightness(1.1);
    box-shadow: 0 0 20px rgba(255, 215, 0, 0.4);
}

.modal-footer {
    text-align: center;
    font-size: 0.8rem;
    color: #555;
    margin-top: 1rem;
    cursor: pointer;
    text-decoration: underline;
}

/* Negative Mode */
body.inverted {
    filter: invert(1);
}

/* Optional: Keep images/canvas natural if desired, but for "Negative Mode" usually everything flips. 
   If we wanted to keep the UI normal but flip canvas, we'd target canvas. 
   But "Negative Mode" implies full inversion. 
   However, let's make sure the Room Overlay image doesn't look weird?
   Actually, inverting a photo usually looks weird. 
   But for now, global inversion is the request. 
*/

/* SEO Text (Bottom Left) */
.seo-text {
    position: fixed;
    bottom: 2rem;
    left: 2rem;
    width: 300px;
    color: rgba(255, 255, 255, 0.4);
    z-index: 60;
    /* Above canvas (1) but below UI overlays (100) */
    pointer-events: none;
    /* Let clicks pass through */
    font-size: 0.8rem;
    line-height: 1.4;
    text-shadow: 0 0 5px rgba(0, 0, 0, 0.8);
    opacity: 0.7;
    transition: opacity 0.3s;
}

.seo-text:hover {
    pointer-events: auto;
    /* Allow text selection on hover if desired, or keep none */
    opacity: 1;
}

.seo-text h3 {
    font-size: 0.9rem;
    color: var(--accent-color);
    margin: 0 0 0.5rem 0;
    text-transform: uppercase;
    letter-spacing: 1px;
}

/* Footer Links */
.footer-links {
    text-align: center;
    margin-bottom: 15px;
    display: flex;
    justify-content: center;
    gap: 20px;
}

.footer-links a {
    color: #666;
    font-size: 0.8rem;
    text-decoration: none;
    transition: color 0.2s;
}

.footer-links a:hover {
    color: var(--text-color);
}

/* Light Mode Overrides (for White Canvas) */
body.light-mode {
    --panel-bg: rgba(255, 255, 255, 0.85);
    --text-color: #1a1a1a;
    --border-color: rgba(0, 0, 0, 0.1);
}

body.light-mode .footer-links a {
    color: #555;
    font-weight: 500;
}

body.light-mode .footer-links a:hover {
    color: #000;
}

body.light-mode .toggle-btn {
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

body.light-mode input[type="range"]::-webkit-slider-runnable-track {
    background: rgba(0, 0, 0, 0.15);
}

body.light-mode select {
    background: rgba(255, 255, 255, 0.5);
    border-color: rgba(0, 0, 0, 0.1);
}