body{
    background:
            linear-gradient(
                180deg,
                #F7F8FB 0%,
                #F2F4F7 100%
            );
}
.app-shell{
  max-width:600px;
  height:100%;
  margin:0 auto;
  background:#fff;
  box-shadow:0 8px 24px rgba(0,0,0,.08);
  overflow:hidden;
}

/* =========================================================
   INTERIORS — GRID / CAROUSEL
   ========================================================= */

#interiorsPanel.interiors-grid-open #cardContainer{
    display:grid !important;
    grid-template-columns:repeat(3, minmax(0, 1fr)) !important;
    gap:1px !important;

    width:100% !important;
    padding:0 !important;
    margin:0 !important;
}

#interiorsPanel.interiors-grid-open .thumb{
    position:relative !important;

    width:100% !important;
    height:auto !important;
    aspect-ratio:1 / 1 !important;

    margin:0 !important;

    border-radius:0 !important;
    box-shadow:none !important;

    overflow:hidden !important;
    background:#f2f2f2 !important;
}

#interiorsPanel.interiors-grid-open .thumb img{
    position:absolute !important;
    top:0 !important;
    left:0 !important;

    width:100% !important;
    height:100% !important;

    object-fit:cover !important;
    display:block !important;

    border-radius:0 !important;
}

#interiorsPanel.interiors-grid-open{
    position:fixed !important;
    top:0 !important;
    bottom:50px !important;
    left:50% !important;
    transform:translateX(-50%) !important;

    width:100% !important;
    max-width:600px !important;

    background:#fff !important;
    z-index:2005 !important;

    padding:0 !important;
    overflow:hidden !important;
}

#interiorsPanel.interiors-grid-open #scrollWrapper{
    height:100% !important;
    max-height:none !important;

    overflow-x:hidden !important;
    overflow-y:auto !important;

   
    touch-action:pan-y;

    padding:0 !important;
    margin:0 !important;
}

#interiorsPanel.interiors-carousel #cardContainer{
    display:flex !important;
    flex-wrap:nowrap !important;
    width:max-content !important;
    gap:1px !important;
}

#interiorsPanel.interiors-carousel .thumb{
    width:108px !important;
    height:108px !important;
    flex:0 0 108px !important;

    margin:0 !important;
    border-radius:0 !important;
    box-shadow:none !important;
    overflow:hidden !important;
}

#interiorsPanel.interiors-carousel .thumb img{
    width:100% !important;
    height:100% !important;
    object-fit:cover !important;
    display:block !important;
    border-radius:0 !important;
}

html,body{height:100%;}
#boundary{
  touch-action:none;
}
.center{text-align:center}
.draggable,.draggable2,.draggable3,.draggable4{width:100px;height:100px;position:absolute;top:100px;left:100px;border:none!important;cursor:pointer}
#imageMain{position:relative;top:0;left:0;right:0;margin:0;padding:0;pointer-events:none}
#imageMain2{z-index:100;position:absolute;top:0;left:0;right:0;margin:0;padding:0;pointer-events:none}
#sky,#sky2,#sky3,#sky4{z-index:50;width:300px;position:absolute;top:0}
.toBackBackground{z-index:1004!important}
.toBackFrom{z-index:1006!important}
#file-preview-zone,#file-preview,#file-preview-zone2,#file-preview2,#file-preview-zone3,#file-preview3,#file-preview-zone4,#file-preview4{max-width:300px}
#zoom,#zoom2,#zoom3,#zoom4,#zoomFrame,#zoomFrame2,#zoomFrame3,#zoomFrame4,#topControls,#topControls2,#topControls3,#topControls4{display:none;z-index:3000}
#grid{z-index:1100;max-width:1080px}
#skyBorder{display:flex;width:100%;height:100%}
.item:after{content:"";display:block;border-bottom:1px solid blue}
.scaled{transform:scale(2)}
.btn-file{position:relative;overflow:hidden}
.btn-file input[type=file]{position:absolute;top:0;right:0;min-width:100%;min-height:100%;font-size:100px;text-align:right;filter:alpha(opacity=0);opacity:0;outline:none;cursor:inherit;display:block}
.free,a.free{position:relative;display:inline;color:#fff;top:-90px;left:10px}
.myscroll{height:100px;overflow-x:auto;white-space:nowrap}
#frames1,#frames2,#frames3,#frames4{display:none;z-index:2000}
.horizontal-scrollable>.row{overflow-x:auto;white-space:nowrap}
.horizontal-scrollable>.row>.col-xs-4{display:inline-block;float:none}
.col-xs-4{color:white}
.col-xs-4:nth-child(2n+1),.col-xs-4:nth-child(2n+2){background:white}
.top-left{position:absolute;top:8px;left:8px}
.toast-container{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%)}

/* --- SCROLLER (versión sin saltos) --- */
#scrollWrapper{
overflow-x:auto;
overflow-y:hidden;
-webkit-overflow-scrolling:touch;
scroll-snap-type:none;      /* desactiva snap */
scroll-behavior:auto;       /* sin smooth para evitar “rebotes” */
overflow-anchor:none;       /* evita re-ancle automático */
padding:0;
margin:0;
width:100%;
border:1px solid transparent;
}

#cardContainer{
display:flex;
flex-wrap:nowrap;
gap:2px;
padding:0!important;
margin:0!important;
width:max-content;
}

.thumb{
flex:0 0 auto;
width:108px;
height:108px;
position:relative;
scroll-snap-align:none;     /* por si queda herencia */
}

.thumb img{
display:block;              /* sin gap inline */
width:108px;
height:108px;
}

.thumb-text{
position:absolute;
top:4px;left:4px;
font-size:13px;
text-shadow:1px 1px 1px #333;
color:white;
padding:2px 6px;
pointer-events:none;
z-index:2;
}

.oculto{display:none!important}


/* =========================================================
 INSITU ART ROOM — PREMIUM WEB UI REFRESH
 Visual-only layer: preserves existing IDs and JS behaviour
 ========================================================= */
:root{
--iar-bg:#f3f4f6;
--iar-surface:#ffffff;
--iar-surface-soft:#f8f9fb;
--iar-border:#e5e7eb;
--iar-text:#1f2937;
--iar-muted:#6b7280;
--iar-accent:#1677ff;
--iar-dark:#1f252d;
--iar-shadow:0 12px 34px rgba(15,23,42,.10);
--iar-shadow-soft:0 5px 18px rgba(15,23,42,.08);
--iar-radius:16px;
}

html,body{
background:linear-gradient(180deg,#f7f8fa 0%,#eef1f4 100%) !important;
color:var(--iar-text);
font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
}

.app-shell{
background:var(--iar-surface) !important;
box-shadow:0 0 0 1px rgba(15,23,42,.03),0 18px 60px rgba(15,23,42,.10) !important;
}

/* Main fixed interior carousel panel */
.app-shell > .container > .container[style*="bottom:50px"]{
background:rgba(248,249,251,.86) !important;
border-top:1px solid rgba(229,231,235,.95) !important;
box-shadow:0 -8px 30px rgba(15,23,42,.07) !important;
backdrop-filter:blur(18px) saturate(150%) !important;
-webkit-backdrop-filter:blur(18px) saturate(150%) !important;
}

#scrollWrapper{
background:transparent;
border:0 !important;
padding:7px 6px 6px !important;
}
#cardContainer{gap:7px !important;}
.thumb{
border-radius:10px;
overflow:hidden;
background:#fff;
box-shadow:0 2px 8px rgba(15,23,42,.08);
}
.thumb img{object-fit:cover;}
.thumb-text{
top:6px !important;
left:6px !important;
font-size:10px !important;
line-height:1 !important;
font-weight:700;
letter-spacing:.03em;
text-transform:uppercase;
text-shadow:none !important;
background:rgba(25,29,35,.88);
color:#fff !important;
border-radius:5px;
padding:4px 6px !important;
box-shadow:0 2px 5px rgba(0,0,0,.12);
}
.thumb-text:empty{display:none !important;}

/* Eye button */
#showHiden{
width:42px !important;
height:42px !important;
top:-48px !important;
right:8px !important;
border:1px solid rgba(229,231,235,.95) !important;
background:rgba(255,255,255,.94) !important;
box-shadow:0 5px 18px rgba(15,23,42,.12) !important;
}
#showHiden img{width:23px !important;height:23px !important;}

/* Bottom navigation */
.app-shell > .container.bg-light[style*="bottom: 0"]{
background:rgba(250,251,252,.95) !important;
border:0 !important;
border-top:1px solid var(--iar-border) !important;
box-shadow:0 -3px 14px rgba(15,23,42,.04);
backdrop-filter:blur(18px);
-webkit-backdrop-filter:blur(18px);
padding:0 4px;
}
.app-shell > .container.bg-light[style*="bottom: 0"] .btn-group{height:50px;}
.app-shell > .container.bg-light[style*="bottom: 0"] .btn{
border:0 !important;
border-radius:10px !important;
background:transparent !important;
color:#242a31 !important;
font-size:10px !important;
font-weight:500;
padding:4px 4px 2px !important;
transition:background .16s ease,color .16s ease,transform .16s ease;
box-shadow:none !important;
}
.app-shell > .container.bg-light[style*="bottom: 0"] .btn:hover{
background:#f0f4f8 !important;
color:var(--iar-accent) !important;
}
.app-shell > .container.bg-light[style*="bottom: 0"] .btn:active{transform:scale(.97);}
.app-shell > .container.bg-light[style*="bottom: 0"] .btn img{
width:23px !important;
height:23px !important;
opacity:.88;
margin-bottom:1px;
}

/* Interiors dropdown */
#dropdownMenuLink3 + .dropdown-menu{
width:320px !important;
max-height:min(70vh,560px) !important;
padding:14px 10px !important;
border:1px solid var(--iar-border) !important;
border-radius:16px !important;
background:rgba(255,255,255,.98) !important;
box-shadow:var(--iar-shadow) !important;
overflow-x:hidden !important;
}
#dropdownMenuLink3 + .dropdown-menu .h5{
display:block;
margin:13px 12px 6px !important;
font-size:12px !important;
line-height:1.2;
font-weight:700 !important;
color:#8a939f !important;
letter-spacing:.055em;
text-transform:uppercase;
}
#dropdownMenuLink3 + .dropdown-menu .h5:first-child{
margin-top:2px !important;
font-size:17px !important;
color:#1d232b !important;
text-transform:none;
letter-spacing:0;
}
#dropdownMenuLink3 + .dropdown-menu .dropdown-item,
#dropdownMenuLink3 + .dropdown-menu .btn-file{
margin:1px 0 !important;
padding:9px 12px !important;
border-radius:9px !important;
color:#2f3741 !important;
font-size:14px !important;
background:transparent !important;
border:0 !important;
}
#dropdownMenuLink3 + .dropdown-menu .dropdown-item:hover,
#dropdownMenuLink3 + .dropdown-menu .btn-file:hover{
background:#f3f6f9 !important;
color:#111827 !important;
}

/* Generic modals */
.modal-backdrop.show{opacity:.42 !important;}
.modal-dialog{margin:1.4rem auto;}
.modal-content{
border:1px solid rgba(229,231,235,.9) !important;
border-radius:16px !important;
overflow:hidden;
box-shadow:0 24px 70px rgba(15,23,42,.20) !important;
background:rgba(255,255,255,.98) !important;
}
.modal-header{
border-bottom:1px solid var(--iar-border) !important;
padding:18px 22px !important;
align-items:center;
}
.modal-title{
font-weight:700 !important;
color:#20262e;
letter-spacing:-.015em;
}
.modal-body{padding:20px 22px !important;}
.modal-footer{
border-top:1px solid var(--iar-border) !important;
padding:14px 22px !important;
background:#fbfcfd;
}
.modal .close{
width:34px;
height:34px;
display:flex;
align-items:center;
justify-content:center;
border-radius:50%;
color:#424b57;
opacity:.7;
text-shadow:none;
margin:-4px -4px -4px auto !important;
padding:0 !important;
}
.modal .close:hover{background:#f1f3f5;opacity:1;}

/* Buttons / inputs */
.modal .btn,.alert .btn{
min-height:40px;
border-radius:9px !important;
font-weight:600;
box-shadow:none !important;
}
.modal .btn-primary{
background:var(--iar-accent) !important;
border-color:var(--iar-accent) !important;
}
.modal .btn-dark,.alert .btn-dark{
background:var(--iar-dark) !important;
border-color:var(--iar-dark) !important;
}
.modal .btn-secondary{
background:#eef1f4 !important;
border-color:#e3e7eb !important;
color:#2f3741 !important;
}
.form-control{
border-color:#dfe3e8 !important;
border-radius:9px !important;
box-shadow:none !important;
}
.form-control:focus{
border-color:#9cc5ff !important;
box-shadow:0 0 0 3px rgba(22,119,255,.10) !important;
}

/* Artwork upload modal */
#chooseImage .modal-dialog{max-width:520px;}
#chooseImage .modal-header{padding-bottom:14px !important;}
#chooseImage .modal-title{font-size:20px;}
#chooseImage .modal-body{padding-top:16px !important;}
#chooseImage .btn-group{
display:flex;
width:100%;
gap:10px;
align-items:center;
}
#chooseImage .btn-file{
width:auto !important;
flex:1;
margin:6px 0 !important;
background:#f8fafc !important;
color:#2f3741 !important;
border:1px dashed #b8c4d2 !important;
min-height:48px;
display:flex !important;
align-items:center;
justify-content:center;
font-weight:600;
}
#chooseImage .btn-file:hover{
background:#f2f7ff !important;
border-color:#7db3ff !important;
color:#0f67d8 !important;
}
#chooseImage a[data-toggle="collapse"]{
min-width:48px;
width:48px;
height:48px;
margin:6px 0 !important;
display:flex;
align-items:center;
justify-content:center;
font-size:21px;
background:#eef1f4 !important;
color:#34404d !important;
border:1px solid #e0e5ea !important;
}
#chooseImage .modal-footer .btn{min-width:88px;}

/* Artwork size cards */
#zoom,#zoom2,#zoom3,#zoom4{
max-width:500px !important;
border:1px solid var(--iar-border) !important;
border-radius:16px !important;
background:rgba(255,255,255,.97) !important;
box-shadow:var(--iar-shadow) !important;
padding:16px !important;
backdrop-filter:blur(18px);
-webkit-backdrop-filter:blur(18px);
}
#zoom .close,#zoom2 .close,#zoom3 .close,#zoom4 .close{
opacity:.45;
font-size:28px;
line-height:1;
}
#zoom input[type="range"],#zoom2 input[type="range"],#zoom3 input[type="range"],#zoom4 input[type="range"]{
width:220px;
max-width:70%;
accent-color:var(--iar-accent);
}

/* Frame controls */
#topControls,#topControls2,#topControls3,#topControls4{
background:rgba(250,251,252,.94) !important;
border:1px solid var(--iar-border) !important;
border-bottom:0 !important;
box-shadow:0 -8px 24px rgba(15,23,42,.07) !important;
backdrop-filter:blur(18px);
-webkit-backdrop-filter:blur(18px);
padding:10px 14px !important;
}
#zoomFrame,#zoomFrame2,#zoomFrame3,#zoomFrame4{
background:rgba(250,251,252,.97) !important;
border:1px solid var(--iar-border) !important;
box-shadow:0 -5px 18px rgba(15,23,42,.06) !important;
padding:8px 12px !important;
}
#zoomFrame .btn img,#zoomFrame2 .btn img,#zoomFrame3 .btn img,#zoomFrame4 .btn img{
border-radius:8px;
transition:transform .15s ease,box-shadow .15s ease;
}
#zoomFrame .btn:hover img,#zoomFrame2 .btn:hover img,#zoomFrame3 .btn:hover img,#zoomFrame4 .btn:hover img{
transform:translateY(-2px);
box-shadow:0 5px 14px rgba(15,23,42,.12);
}
input[type="range"]{accent-color:var(--iar-accent);}

/* Account modal */
#framesid .modal-dialog{max-width:500px;}
#framesid .modal-content{overflow:hidden;}
#framesid .iar-account-head{
display:flex;
align-items:center;
justify-content:space-between;
margin-bottom:18px;
}
#framesid .iar-account-title{
display:flex;
align-items:center;
gap:10px;
font-size:20px;
font-weight:700;
color:#20262e;
}
#framesid .iar-account-icon{
width:34px;height:34px;border-radius:50%;
display:flex;align-items:center;justify-content:center;
border:1px solid #cfd6de;
font-size:18px;
}
#framesid .iar-label{
font-size:12px;
font-weight:700;
color:#48515c;
margin-bottom:7px;
}
#framesid .iar-id-box{
display:flex;
align-items:center;
justify-content:space-between;
gap:10px;
background:#f3f5f7;
border:1px solid #eceff2;
border-radius:9px;
padding:10px 12px;
color:#5f6874;
font-size:13px;
overflow-wrap:anywhere;
}
#framesid #uid{
background:transparent !important;
padding:0 !important;
color:inherit !important;
font-weight:500;
}
#framesid .iar-browser-row{display:flex;gap:8px;flex-wrap:wrap;margin-top:8px;}
#framesid .iar-browser-chip{
display:inline-flex;align-items:center;gap:7px;
border:1px solid #dfe4e9;
background:#fff;
padding:7px 10px;
border-radius:8px;
font-size:12px;
color:#39424d;
}
#framesid .iar-dot{width:14px;height:14px;border-radius:50%;background:linear-gradient(135deg,#34a853 0 34%,#fbbc05 34% 58%,#ea4335 58% 76%,#4285f4 76%);}
#framesid .iar-dot.edge{background:linear-gradient(135deg,#0aa5f5,#17c2a4);}
#framesid .iar-subscription-row{
display:flex;align-items:center;justify-content:space-between;
margin-top:18px;padding:14px 0 4px;
border-top:1px solid var(--iar-border);
color:#252c35;font-size:14px;font-weight:600;
}
#framesid .modal-footer{justify-content:space-between;}
#framesid #premiumButton{
background:transparent !important;
border:0 !important;
padding:0 !important;
min-height:auto;
color:#222a33 !important;
font-weight:600;
}
#framesid .iar-account-actions{display:flex;gap:8px;margin-left:auto;}

@media (max-width:620px){
.modal-dialog{margin:12px;}
#dropdownMenuLink3 + .dropdown-menu{
  width:min(88vw,320px) !important;
}
#zoom,#zoom2,#zoom3,#zoom4{
  width:calc(100% - 24px) !important;
}
}