:root{
  --bg:#ffffff;
  --text:#0b1220;
  --panel:#ffffff;
  --border:#e6e6e6;
  --accent:#1d4ed8;
  --muted:#6b7280;
  --shadow:rgba(2,6,23,0.06);
  --logo-height:clamp(40px, 8vw, 55px);
  --topbar-padding:clamp(14px, 3vw, 18px);
  --transition:200ms;
  --main-gap:clamp(12px, 2vw, 20px);
}
.theme-dark{
  --bg:#071021;
  --text:#e6eef8;
  --panel:#0b1220;
  --border:#1f2937;
  --accent:#3b82f6;
  --muted:#9aa4b2;
  --shadow:rgba(2,6,23,0.6);
}
*{  box-sizing:border-box;user-select:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;}
html{font-weight:500;}
body{margin:0;font-family:'Be Vietnam Pro', sans-serif;color:var(--text);background:var(--bg);min-height:100vh;overflow:hidden;transition:background var(--transition), color var(--transition);color-scheme: light;font-weight:500 !important;}
.loading-spinner{position:absolute;inset:0;display:grid;place-items:center;pointer-events:none;z-index:120;opacity:0;visibility:hidden;transition:opacity 300ms ease-out, visibility 300ms ease-out;}
.loading-spinner.active{opacity:1;visibility:visible;pointer-events:auto;}
.loading-spinner-backdrop{position:absolute;inset:0;background:transparent;backdrop-filter:blur(12px);pointer-events:none;border-radius:32px;}
.loading-spinner-content{position:relative;display:flex;align-items:center;justify-content:center;width:min(80%,180px);height:min-content;padding:0;gap:0.75rem;background:transparent;pointer-events:none;}
.topbar{background:var(--panel);border-bottom:1px solid var(--border);position:fixed;top:0;z-index:200;backdrop-filter:blur(6px);width:100%;padding:var(--topbar-padding) clamp(4px, 1.5vw, 12px);will-change:auto}
.topbar-inner{display:flex;align-items:center;justify-content:space-between;max-width:100%;margin:0 auto;gap:clamp(16px, 3vw, 24px)}
.header-title{display:flex;align-items:center;justify-content:flex-start;gap:clamp(2rem, 5vw, 3.5rem)}
.header-title-logo{display:flex;align-items:center;gap:0;padding-left:clamp(3rem, 1.5vw, 2.5rem)}
.header-title-logo a{display:flex;align-items:center}
.header-title-logo img{height:38px;width:auto;display:block;content-visibility:auto;object-fit:contain}
.topbar-title{font-size:clamp(0.85rem, 2vw, 1rem);font-weight:500;color:var(--text);white-space:nowrap;letter-spacing:0.02em}
.return-website-btn{background:transparent;border:1px solid var(--border);border-radius:8px;cursor:pointer;color:var(--text);font-size:0.85rem;padding:0.6rem 1rem;display:flex;align-items:center;justify-content:center;gap:0.6rem;flex-shrink:0;transition:all 200ms ease;text-decoration:none;font-weight:500;font-family:inherit}
.return-website-btn:hover{background:rgba(29,78,216,0.08);border-color:rgba(29,78,216,0.3);color:var(--accent)}
.return-website-btn i{display:inline-block;width:1.1rem;height:1.1rem;font-size:1.1rem;line-height:1;flex-shrink:0}


/* Sidebar */
.sidebar{position:fixed;left:-320px;top:0;bottom:0;width:min(320px, 80vw);background:var(--panel);border-right:1px solid var(--border);padding:clamp(16px, 3vw, 20px);transition:left 0.28s;z-index:300;box-shadow:0 6px 20px var(--shadow)}
.sidebar.open{left:0}
.sidebar .close{background:none;border:0;color:var(--text);font-size:clamp(1.2rem, 5vw, 1.6rem);position:absolute;right:clamp(8px, 2vw, 12px);top:clamp(8px, 2vw, 12px);cursor:pointer}

/* Visualizer */
.car-visualizer{height:100vh;display:flex;flex-direction:column;overflow:hidden;position:relative;padding-bottom:clamp(12px, 2vw, 20px);padding-top:calc(38px + 3vw)}
.layout-grid{display:grid;grid-template-columns:minmax(200px,220px) minmax(0,1fr);gap:1.5rem;align-items:stretch;align-content:stretch;overflow:hidden;min-height:calc(100vh - clamp(75px, 12vw, 95px));height:100%;padding:1rem 1.5rem 1.5rem;grid-template-rows:1fr}
.left-sidebar{display:flex;flex-direction:column;gap:0.8rem;min-height:0;overflow:auto;scrollbar-width:thin;-ms-overflow-style:none;scroll-behavior:smooth;transition:gap 280ms cubic-bezier(0.4,0,0.2,1)}
.left-sidebar::-webkit-scrollbar{width:4px}
.left-sidebar::-webkit-scrollbar-track{background:transparent}
.left-sidebar::-webkit-scrollbar-thumb{background:rgba(0,0,0,0.15);border-radius:2px;transition:background 200ms ease}
.left-sidebar::-webkit-scrollbar-thumb:hover{background:rgba(0,0,0,0.25)}
.theme-dark .left-sidebar::-webkit-scrollbar-thumb{background:rgba(255,255,255,0.15)}
.theme-dark .left-sidebar::-webkit-scrollbar-thumb:hover{background:rgba(255,255,255,0.25)}
.shot-panel{background:transparent;border:1px solid var(--border);border-radius:20px;padding:0.75rem;display:flex;flex-direction:column;gap:0.75rem;flex-shrink:0;transition:all 200ms ease}
.context-menu-panel,
.finish-panel,
.save-load-panel {
  background:transparent;
  border:1px solid var(--border);
  border-radius:20px;
  padding:0.75rem;
  display:flex;
  flex-direction:column;
  flex-shrink:0;
  min-height:0;
  opacity:1;
  max-height:2000px;
  overflow:hidden;
  transition:opacity 280ms cubic-bezier(0.4,0,0.2,1), max-height 280ms cubic-bezier(0.4,0,0.2,1), transform 280ms cubic-bezier(0.4,0,0.2,1), padding 280ms cubic-bezier(0.4,0,0.2,1);
}
.context-menu-panel.hidden {
  opacity:0;
  max-height:0;
  padding:0;
  transform:translateY(-6px);
  pointer-events:none;
}
.context-menu-panel.hidden .context-menu-card {
  opacity:0;
  pointer-events:none;
}
.context-menu-panel.hidden .editor-section-content {
  max-height:0;
  opacity:0;
  overflow:hidden;
  padding:0;
  margin:0;
  transition:opacity 180ms ease, max-height 180ms ease;
}
.finish-panel.hidden {
  opacity:0;
  max-height:0;
  padding:0;
  transform:translateY(-6px);
  pointer-events:none;
}
.finish-panel {
  max-height:1200px;
  padding:0;
}
.finish-panel-card {
  pointer-events:auto;
  background:transparent;
  backdrop-filter:none;
  border:none;
  box-shadow:none;
  padding:0.75rem;
  min-width:auto;
}
.save-load-card {
  pointer-events:auto;
  background:transparent;
  backdrop-filter:none;
  border:none;
  box-shadow:none;
  padding:0;
  min-width:auto;
}
.seat-options-panel {
  background:transparent;
  border:1px solid var(--border);
  border-radius:20px;
  padding:0;
  display:flex;
  flex-direction:column;
  flex-shrink:0;
  min-height:0;
  opacity:1;
  max-height:1200px;
  overflow:hidden;
  margin-bottom:1rem;
  transition:opacity 280ms cubic-bezier(0.4,0,0.2,1), max-height 280ms cubic-bezier(0.4,0,0.2,1), transform 280ms cubic-bezier(0.4,0,0.2,1), padding 280ms cubic-bezier(0.4,0,0.2,1);
}
.seat-options-panel.hidden {
  display:none;
}
.seat-options-card {
  pointer-events:auto;
  background:transparent;
  backdrop-filter:none;
  border:none;
  box-shadow:none;
  padding:0.75rem;
  min-width:auto;
}
.seat-options-list {
  display:flex;
  flex-direction:column;
  gap:0.5rem;
}
.seat-option-item {
  display:flex;
  align-items:center;
  gap:0.6rem;
  padding:0.6rem 0.8rem;
  border-radius:8px;
  background:transparent;
  border:1px solid var(--border);
  cursor:pointer;
  transition:all 200ms ease;
}
.seat-option-item:hover {
  background:rgba(29,78,216,0.08);
  border-color:rgba(29,78,216,0.24);
}
.seat-option-item.disabled {
  opacity:0.5;
  cursor:not-allowed;
}
.seat-option-item.disabled:hover {
  background:transparent;
  border-color:var(--border);
}
.seat-option-radio {
  width:16px;
  height:16px;
  border-radius:50%;
  border:2px solid var(--border);
  display:flex;
  align-items:center;
  justify-content:center;
  transition:all 200ms ease;
  flex-shrink:0;
}
.seat-option-item.active .seat-option-radio {
  border-color:var(--accent);
  background:var(--accent);
}
.seat-option-item.active .seat-option-radio::after {
  content:'';
  width:4px;
  height:4px;
  border-radius:50%;
  background:#fff;
}
.seat-option-label {
  font-size:clamp(0.7rem, 1.4vw, 0.8rem);
  color:var(--text);
  user-select:none;
  flex:1;
}
.seat-option-item.disabled .seat-option-label {
  opacity:0.6;
}
.shot-toolbar{display:flex;flex-direction:column;gap:0.75rem;width:100%}
/* Shot filter toggle */
.shot-filter-toggle{display:flex;gap:0.4rem;width:100%;justify-content:center;padding-bottom:0.75rem;border-bottom:1px solid var(--border)}
.shot-filter-btn{flex:1;max-width:90px;padding:0.5rem 0.6rem;border:2px solid var(--border);border-radius:8px;background:transparent;color:var(--text);font-weight:600;font-size:clamp(0.7rem, 1.4vw, 0.8rem);cursor:pointer;transition:all 300ms ease;letter-spacing:0.04em}
.shot-filter-btn:hover{border-color:rgba(29,78,216,0.4);background-color:rgba(29,78,216,0.05)}
.shot-filter-btn.active{background-color:var(--accent);color:#fff;border-color:var(--accent);box-shadow:0 4px 12px rgba(29,78,216,0.3)}
.shot-button{display:block;width:100%;text-align:left;padding:0.8rem 0.95rem;border-radius:12px;border:1px solid var(--border);background:var(--panel);color:var(--text);font-weight:500;font-size:clamp(0.7rem, 1.4vw, 0.8rem);cursor:pointer;transition:all 200ms ease;user-select:none}
.shot-button:hover{background:rgba(29,78,216,0.08);border-color:rgba(29,78,216,0.24);transform:translateX(2px)}
.shot-button.selected{background:var(--accent);color:#fff;border-color:var(--accent);box-shadow:0 4px 12px rgba(29,78,216,0.25)}
.canvas-section{position:relative;display:flex;flex-direction:column;flex:1;min-width:0;min-height:0;height:100%;overflow:hidden;}
.canvas-wrap{width:100%;flex:1;display:flex;align-items:stretch;justify-content:center;overflow:hidden;background:linear-gradient(180deg,#f7f8fc 0%,#eef3ff 100%);border:1px solid var(--border);border-radius:32px;box-shadow:0 30px 80px rgba(15,23,42,0.08);position:relative;} 

/* Ensure the inner image container expands to fill the canvas area */
.canvas-wrap > .image-container{flex:1;min-height:0;width:100%;}
.canvas-wrap .image-container{width:100%;height:100%;position:relative;}

.context-menu{position:relative;top:auto;left:auto;pointer-events:auto;z-index:auto}
.context-menu.hidden{display:none}
.context-menu-card{pointer-events:auto;background:transparent;backdrop-filter:none;border:none;box-shadow:none;padding:0;min-width:auto}
.context-menu-title{font-size:clamp(0.7rem, 1.4vw, 0.8rem);font-weight:700;color:#0f172a;margin-bottom:0.65rem;}
.context-color-input{width:100%;height:46px;border:none;border-radius:14px;cursor:pointer;padding:0;}

/* Remove old color panel rules */
.color-menu{display:none!important}

/* Responsive breakpoints */
/* Tablets and small landscapes (< 1200px) */
@media (max-width:1200px){
  .color-menu{width:clamp(240px, 20vw, 320px)}
}

/* Tablets (< 1024px) */
@media (max-width:1024px){
  .top-row{flex-direction:column;gap:var(--main-gap)}
  .color-menu{width:100%;max-height:clamp(200px, 40vh, 400px);border-left:none;border-top:1px solid var(--border)}
  .visualizer-layout{flex:1}
  .canvas-wrap{width:100%;min-height:250px;max-height:none;max-width:100%}
  .cover-flow{margin-top:clamp(12px, 2vw, 16px)}
}

/* Smaller tablets and phones (< 768px) */
@media (max-width:768px){
  .car-visualizer{padding-bottom:clamp(8px, 1.5vw, 12px);padding-top:clamp(65px, 11vw, 80px)}
  .top-row{gap:clamp(8px, 1.5vw, 12px)}
  .canvas-wrap{min-height:200px;padding:clamp(6px, 1.5vw, 10px)}
  .color-menu{max-height:clamp(150px, 35vh, 300px);padding:clamp(10px, 1.5vw, 16px)}
  .color-menu-content h3{font-size:clamp(0.8rem, 2.5vw, 0.95rem)}
  .color-option label{font-size:clamp(0.7rem, 2vw, 0.85rem)}
}

/* Small phones (< 480px) */
@media (max-width:480px){
  .header-nav-item a{display:none}
  .canvas-wrap{min-height:180px}
  .color-menu{max-height:clamp(120px, 30vh, 250px)}
  .color-button{width:clamp(32px, 8vw, 40px);height:clamp(32px, 8vw, 40px)}
}

/* Shot toolbar */
.shot-toolbar{display:flex;align-items:flex-start;justify-content:space-between;gap:0.5rem;width:100%;padding:0 clamp(12px, 2vw, 18px);margin-bottom:clamp(14px, 2vw, 22px);}
#shotButtons{transition:opacity 220ms ease, transform 220ms ease;}
#shotButtons.fading{opacity:0;transform:translateY(-8px);}
.shot-info{max-width:calc(100% - 220px);}
.shot-label{display:block;font-size:clamp(0.7rem, 1.4vw, 0.8rem);font-weight:700;letter-spacing:0.18em;color:var(--accent);margin-bottom:0.35rem;}
#currentShotLabel{margin:0;font-size:clamp(1.5rem, 3vw, 2rem);line-height:1.05;font-weight:700;color:var(--text);}
.shot-description{margin:0.65rem 0 0;color:var(--muted);font-size:clamp(0.92rem,1.7vw,1rem);max-width:35rem;line-height:1.6;}
.shot-actions{display:flex;flex-wrap:wrap;gap:0.75rem;align-items:center;justify-content:flex-end;}
.shot-button{border:1px solid var(--border);background:rgba(255,255,255,0.92);color:var(--text);padding:0.85rem 1rem;border-radius:999px;font-size:0.88rem;cursor:pointer;transition:background 0.2s,border-color 0.2s,transform 0.2s;white-space:nowrap;}
.shot-button:hover:not(:disabled){background:rgba(29,78,216,0.08);border-color:rgba(29,78,216,0.16);}
.shot-button.selected:not(:disabled){background:var(--accent);border-color:var(--accent);color:#fff;transform:translateY(-1px);}
.shot-button:disabled{opacity:0.5;cursor:not-allowed;pointer-events:none;}
@media(max-width:900px){.shot-toolbar{flex-direction:column;align-items:flex-start;}.shot-actions{justify-content:flex-start;width:100%;}}

/* Fullscreen button — responsive sizing */
.fullscreen-btn{position:absolute;top:clamp(8px, 2vw, 12px);right:clamp(8px, 2vw, 12px);z-index:50;width:clamp(36px, 8vw, 40px);height:clamp(36px, 8vw, 40px);background:var(--panel);border:1px solid var(--border);border-radius:50%;cursor:pointer;font-size:clamp(0.8rem, 1.5vw, 0.9rem);display:grid;place-items:center;box-shadow:0 4px 12px var(--shadow);transition:opacity 200ms ease, transform 200ms ease;opacity:0;pointer-events:none;transform:translateY(-6px)}
.canvas-wrap:hover .fullscreen-btn{opacity:1;pointer-events:auto;transform:none}
.fullscreen-btn svg{width:clamp(12px, 2.5vw, 14px);height:clamp(12px, 2.5vw, 14px)}

/* Parts button — responsive sizing */
#partsBtn{position:absolute;bottom:clamp(8px, 2vw, 12px);right:clamp(8px, 2vw, 12px);z-index:50;width:clamp(36px, 8vw, 40px);height:clamp(36px, 8vw, 40px);background:var(--panel);border:1px solid var(--border);border-radius:50%;cursor:pointer;font-size:clamp(0.8rem, 1.5vw, 0.9rem);display:grid;place-items:center;box-shadow:0 4px 12px var(--shadow);transition:opacity 200ms ease, transform 200ms ease;opacity:0;pointer-events:none;transform:translateY(-6px)}
.canvas-wrap:hover #partsBtn{opacity:1;pointer-events:auto;transform:none}
#partsBtn svg{width:clamp(12px, 2.5vw, 14px);height:clamp(12px, 2.5vw, 14px)}

/* Parts tab button — arrow on center-right edge */
.parts-tab-button{position:absolute;right:0;top:50%;transform:translateY(-50%);z-index:52;width:clamp(40px, 8vw, 48px);height:clamp(56px, 10vw, 64px);background:rgba(255,255,255,0.95);backdrop-filter:blur(8px);border:1px solid var(--border);border-radius:clamp(8px, 1.5vw, 12px);border-right:none;border-top-right-radius:0;border-bottom-right-radius:0;cursor:pointer;display:grid;place-items:center;box-shadow:-4px 0 12px rgba(0,0,0,0.12);transition:all 300ms cubic-bezier(0.4,0,0.2,1), opacity 400ms ease;padding-right:8px;opacity:0;pointer-events:none}
.parts-tab-button.visible{opacity:1;pointer-events:auto}
.image-container:hover .parts-tab-button{opacity:1;pointer-events:auto}
.image-container.panel-open .parts-tab-button{opacity:1;pointer-events:auto;right:clamp(200px, 22vw, 280px)}
.parts-tab-arrow{width:clamp(14px, 2.5vw, 18px);height:clamp(14px, 2.5vw, 18px);transition:transform 300ms cubic-bezier(0.4,0,0.2,1);transform:rotate(0deg)}
.image-container.panel-open .parts-tab-arrow{transform:rotate(180deg)}

/* Parts panel — slides in from right */
.parts-panel-container{position:absolute;right:0;top:50%;transform:translateY(-50%);z-index:51;pointer-events:auto}
.parts-panel-container.hidden{pointer-events:none}
.parts-panel{position:absolute;right:0;top:50%;transform:translateY(-50%);width:clamp(240px, 25vw, 320px);max-height:clamp(300px, 70vh, 500px);background:rgba(255,255,255,0.95);backdrop-filter:blur(12px);border:1px solid var(--border);border-radius:20px;box-shadow:0 10px 40px rgba(0,0,0,0.15);padding:1rem;display:flex;flex-direction:column;gap:0.75rem;overflow:hidden;overflow-x:hidden;transition:all 300ms cubic-bezier(0.4,0,0.2,1)}
.parts-panel-container.hidden .parts-panel{opacity:0;transform:translateY(-50%) translateX(24px);pointer-events:none}
.parts-panel-container:not(.hidden) .parts-panel{opacity:1;transform:translateY(-50%) translateX(0)}
.parts-list{display:flex;flex-direction:column;gap:0.5rem;overflow-y:auto;min-height:0;flex:1;padding-right:0.5rem;overflow-x:hidden;min-width:0}
.parts-list::-webkit-scrollbar{width:6px}
.parts-list::-webkit-scrollbar-track{background:transparent}
.parts-list::-webkit-scrollbar-thumb{background:rgba(0,0,0,0.2);border-radius:3px}
.parts-list::-webkit-scrollbar-thumb:hover{background:rgba(0,0,0,0.3)}
.theme-dark .parts-list::-webkit-scrollbar-thumb{background:rgba(255,255,255,0.2)}
.theme-dark .parts-list::-webkit-scrollbar-thumb:hover{background:rgba(255,255,255,0.3)}
.parts-list-item{display:flex;align-items:center;gap:0.75rem;padding:0.75rem 1rem;border-radius:12px;cursor:pointer;transition:background 200ms ease;border:1px solid transparent}
.parts-list-item:hover{background:rgba(29,78,216,0.05);border-color:rgba(29,78,216,0.15)}
.parts-list-item.selected{background:rgba(29,78,216,0.1);border-color:var(--accent)}
.parts-list-item-color{width:24px;height:24px;border-radius:6px;border:1px solid rgba(0,0,0,0.15);flex-shrink:0;box-shadow:0 2px 4px rgba(0,0,0,0.1)}
.parts-list-item-label{flex:1;font-size:0.9rem;font-weight:500;color:var(--text);user-select:none}
.parts-list-item-rgb{font-size:0.8rem;color:var(--muted);font-family:monospace;flex-shrink:0;user-select:none}
.part-view-container {
  position: absolute;
  bottom: clamp(8px, 2vw, 12px);
  right: clamp(8px, 2vw, 12px);
  z-index: 100;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  pointer-events: none; /* Let clicks pass through unless on child */
}

.part-view-btn {
  width: clamp(36px, 8vw, 40px);
  height: clamp(36px, 8vw, 40px);
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 50%;
  cursor: pointer;
  display: grid;
  place-items: center;
  box-shadow: 0 4px 12px var(--shadow);
  transition: opacity 300ms ease, transform 300ms ease, background 200ms ease;
  opacity: 0;
  pointer-events: none;
  transform: translateY(6px);
  color: var(--text);
}

.canvas-wrap:hover .part-view-btn {
  opacity: 1;
  pointer-events: auto;
  transform: none;
}

.part-view-btn:hover {
  background: rgba(29, 78, 216, 0.08);
  border-color: rgba(29, 78, 216, 0.16);
}

.part-view-btn.fade-out {
  opacity: 0 !important;
  pointer-events: none;
  transform: scale(0.8);
}

.part-view-panel {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 280px;
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(12px);
  border: 1px solid var(--border);
  border-radius: 20px;
  box-shadow: 0 10px 40px rgba(0,0,0,0.15);
  padding: 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  transform-origin: bottom right;
  transition: transform 300ms cubic-bezier(0.4, 0, 0.2, 1), opacity 300ms ease;
  z-index: 160 !important;
  pointer-events: auto; /* Enable clicks for the panel */
}

/* Image container and layer styling */
.image-container{position:relative;overflow:hidden;cursor:grab;user-select:none;width:100%;height:100%;contain:layout;will-change:auto;backface-visibility:hidden;-webkit-font-smoothing:antialiased;display:flex;align-items:center;justify-content:center;}
.image-container.loading-active #imageWrapper{filter:blur(10px);transition:filter 220ms ease;}
.image-container:active{cursor:grabbing}
.image-wrapper{position:absolute;width:100%;height:100%;will-change:transform,opacity;transform-origin:center;transform:translateZ(0);isolation:isolate;transition:opacity 400ms ease-in-out;backface-visibility:hidden;-webkit-perspective:1000;perspective:1000;display:flex;align-items:center;justify-content:center;}
#imageWrapper .image-wrapper.current{opacity:1;z-index:2}
#imageWrapper .image-wrapper.new{opacity:0;z-index:1}

/* Fullscreen optimizations */
:-webkit-full-screen .image-container {
  contain: strict;
}

:-webkit-full-screen .image-wrapper {
  will-change: transform;
}

:-moz-full-screen .image-container {
  contain: strict;
}

:-moz-full-screen .image-wrapper {
  will-change: transform;
}

:fullscreen .image-container {
  contain: strict;
}

:fullscreen .image-wrapper {
  will-change: transform;
}

.color-layer{position:absolute;top:0;left:0;width:100%;height:100%;background-size:contain !important;background-position:center !important;background-repeat:no-repeat;transform-origin:center;pointer-events:auto;mask-size:contain !important;mask-position:center !important;mask-repeat:no-repeat;mix-blend-mode:overlay;contain:paint;z-index:10;opacity:0.7;will-change:box-shadow,opacity,background-color;backface-visibility:hidden;-webkit-font-smoothing:antialiased;}
.color-layer.body{mix-blend-mode:overlay !important;z-index:5;opacity:1 !important}
.color-layer.exterior-part{mix-blend-mode:hard-light !important;opacity:0.85 !important}
.image-wrapper .car-image{background-size:contain !important;background-position:center !important;background-repeat:no-repeat !important;backface-visibility:hidden;content-visibility:auto;}
.image-wrapper .color-layer{background-size:contain !important;background-position:center !important;background-repeat:no-repeat !important}

/* Crossfade animations */
@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes fadeOut {
  from { opacity: 1; }
  to   { opacity: 0; }
}
.fade-in{animation:fadeIn 520ms cubic-bezier(.2,0,.22,1) forwards;will-change:opacity}
.fade-out{animation:fadeOut 520ms cubic-bezier(.2,0,.22,1) forwards;will-change:opacity}

/* Loading Spinner */
@keyframes spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}
.loading-spinner {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  width: 100%;
  height: 100%;
  opacity: 0;
  visibility: hidden;
  transition: opacity 300ms ease-out, visibility 300ms ease-out;
}
.loading-spinner::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(255, 255, 255, 0.25);
  backdrop-filter: blur(3px);
  z-index: 0;
  pointer-events: none;
  opacity: 1;
  will-change: backdrop-filter;
}

.theme-dark .loading-spinner::before {
  background: rgba(0, 0, 0, 0.35);
}
.loading-spinner.active {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}
.spinner-ring {
  width: clamp(40px, 8vw, 60px);
  height: clamp(40px, 8vw, 60px);
  border: 3px solid rgba(0, 0, 0, 0.08);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
  position: relative;
  z-index: 1;
  will-change: transform;
  backface-visibility: hidden;
  -webkit-font-smoothing: antialiased;
}
.theme-dark .spinner-ring {
  border-color: rgba(255, 255, 255, 0.08);
  border-top-color: var(--accent);
}

.car-image{position:absolute;width:100%;height:100%;background-size:contain !important;background-position:center !important;background-repeat:no-repeat;transform-origin:center;background-color:transparent;contain:paint;z-index:1;pointer-events:none}

/* Custom sizing for assets with background.png — aspect ratio via container */
.light-layer{position:absolute;top:0;left:0;width:100%;height:100%;background-size:contain !important;background-position:center !important;background-repeat:no-repeat !important;pointer-events:none;mix-blend-mode:normal;z-index:1;opacity:1}

.layer-highlight{display:none}

/* Outline shown on hover around non-transparent pixels (animated border) */


/* Images use default contain sizing with container aspect ratio */ 

/* Images use default contain sizing with container aspect ratio */ 

.color-menu-content{display:flex;flex-direction:column;gap:clamp(10px, 2vw, 12px);padding:clamp(8px, 1.5vw, 12px) 0}
.color-menu-content label{font-size:clamp(0.7rem, 1.4vw, 0.8rem);color:var(--muted);display:block}

/* HSV Color Picker */
.hsv-picker{display:flex;flex-direction:column;gap:0.8rem}

/* Color Square (Saturation & Value) */
.color-square-container{width:100%;aspect-ratio:1.5;border-radius:8px;overflow:hidden;box-shadow:0 2px 8px rgba(0,0,0,0.1);position:relative;cursor:crosshair;transition:box-shadow 200ms ease}
.color-square-container:hover{box-shadow:0 3px 12px rgba(0,0,0,0.15)}
.color-square{width:100%;height:100%;position:relative;background:linear-gradient(to bottom, rgba(255,255,255,0), rgba(0,0,0,1)),linear-gradient(to right, #ffffff, hsl(0, 100%, 50%));background-size:100% 100%,100% 100%;background-position:0 0,0 0;background-repeat:no-repeat}
.square-selector{position:absolute;width:11px;height:11px;border:2px solid white;border-radius:50%;top:100%;left:100%;transform:translate(-5.5px, -5.5px);box-shadow:0 0 3px rgba(0,0,0,0.4);pointer-events:none;transition:left 120ms ease, top 120ms ease;background:rgba(255,255,255,0.3)}

/* Hue Slider */
.hue-slider-container{display:flex;flex-direction:column;gap:0.4rem}
.slider-label{font-size:clamp(0.7rem, 1.4vw, 0.8rem);color:var(--muted);font-weight:600;letter-spacing:0.03em;opacity:0.8}
.hue-slider{width:100%;height:20px;border-radius:6px;background:linear-gradient(to right, #ff0000, #ffff00, #00ff00, #00ffff, #0000ff, #ff00ff, #ff0000);-webkit-appearance:none;appearance:none;cursor:pointer;border:none;transition:filter 200ms ease}
.hue-slider:hover{filter:brightness(0.95)}
.hue-slider::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:16px;height:16px;border-radius:50%;background:white;border:2px solid rgba(0,0,0,0.2);cursor:pointer;box-shadow:0 2px 6px rgba(0,0,0,0.15);transition:all 200ms ease}
.hue-slider::-webkit-slider-thumb:hover{box-shadow:0 3px 8px rgba(0,0,0,0.2);transform:scale(1.1)}
.hue-slider::-moz-range-thumb{width:16px;height:16px;border-radius:50%;background:white;border:2px solid rgba(0,0,0,0.2);cursor:pointer;box-shadow:0 2px 6px rgba(0,0,0,0.15);transition:all 200ms ease}
.hue-slider::-moz-range-thumb:hover{box-shadow:0 3px 8px rgba(0,0,0,0.2);transform:scale(1.1)}

/* Saturation Slider */
.saturation-slider-container{display:flex;flex-direction:column;gap:0.4rem}
.saturation-slider{width:100%;height:18px;border-radius:6px;-webkit-appearance:none;appearance:none;cursor:pointer;border:none;background:linear-gradient(to right, #cccccc, hsl(0, 100%, 50%));transition:filter 200ms ease}
.saturation-slider:hover{filter:brightness(0.95)}
.saturation-slider::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:14px;height:14px;border-radius:50%;background:white;border:2px solid rgba(0,0,0,0.2);cursor:pointer;box-shadow:0 2px 4px rgba(0,0,0,0.15);transition:all 200ms ease}
.saturation-slider::-webkit-slider-thumb:hover{box-shadow:0 3px 6px rgba(0,0,0,0.2);transform:scale(1.1)}
.saturation-slider::-moz-range-thumb{width:14px;height:14px;border-radius:50%;background:white;border:2px solid rgba(0,0,0,0.2);cursor:pointer;box-shadow:0 2px 4px rgba(0,0,0,0.15);transition:all 200ms ease}
.saturation-slider::-moz-range-thumb:hover{box-shadow:0 3px 6px rgba(0,0,0,0.2);transform:scale(1.1)}

/* Brightness Slider */
.brightness-slider-container{display:flex;flex-direction:column;gap:0.4rem}
.brightness-slider{width:100%;height:18px;border-radius:6px;-webkit-appearance:none;appearance:none;cursor:pointer;border:none;background:linear-gradient(to right, #000000, hsl(0, 100%, 50%));transition:filter 200ms ease}
.brightness-slider:hover{filter:brightness(0.95)}
.brightness-slider::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:14px;height:14px;border-radius:50%;background:white;border:2px solid rgba(0,0,0,0.2);cursor:pointer;box-shadow:0 2px 4px rgba(0,0,0,0.15);transition:all 200ms ease}
.brightness-slider::-webkit-slider-thumb:hover{box-shadow:0 3px 6px rgba(0,0,0,0.2);transform:scale(1.1)}
.brightness-slider::-moz-range-thumb{width:14px;height:14px;border-radius:50%;background:white;border:2px solid rgba(0,0,0,0.2);cursor:pointer;box-shadow:0 2px 4px rgba(0,0,0,0.15);transition:all 200ms ease}
.brightness-slider::-moz-range-thumb:hover{box-shadow:0 3px 6px rgba(0,0,0,0.2);transform:scale(1.1)}


/* Native color picker input — visible at bottom */
.native-color-picker-container{display:flex;flex-direction:column;gap:6px;align-items:center;padding:8px;background:rgba(0,0,0,0.02);border-radius:8px;margin-top:4px;transition:background 200ms ease}
.native-color-picker-container:hover{background:rgba(0,0,0,0.04)}
#nativeColorPicker,
#pearlColorPicker {width:100%;height:40px;border:2px solid var(--border);border-radius:6px;cursor:pointer;padding:0;transition:all 200ms ease}
#nativeColorPicker:hover,
#pearlColorPicker:hover {border-color:var(--accent);box-shadow:0 2px 6px rgba(29,78,216,0.1)}
#nativeColorPicker:focus,
#pearlColorPicker:focus {outline:none;border-color:var(--accent);box-shadow:0 0 8px rgba(29,78,216,0.2)}

/* Color options and buttons */
.color-options{display:flex;flex-direction:column;gap:clamp(10px, 2vw, 12px)}
.color-option{display:flex;align-items:center;gap:clamp(8px, 2vw, 10px);justify-content:space-between}
.color-button{width:clamp(36px, 8vw, 40px);height:clamp(36px, 8vw, 40px);border:2px solid var(--border);border-radius:clamp(4px, 1vw, 6px);cursor:pointer;transition:border-color 0.2s}
.color-button.selected{border-color:var(--accent);box-shadow:0 0 8px rgba(29,78,216,0.25)}

/* Color picker */
.color-picker-section{display:flex;flex-direction:column;gap:clamp(6px, 1.5vw, 8px);padding-top:clamp(8px, 1.5vw, 10px);border-top:1px solid var(--border)}
.color-input{width:100%;height:clamp(40px, 8vw, 50px);border:1px solid var(--border);border-radius:clamp(4px, 1vw, 6px);cursor:pointer;background:#fff;padding:0;transition:border-color 0.2s}
.color-input:hover{border-color:var(--accent)}
.last-color-button{width:100%;height:clamp(36px, 8vw, 40px);border:1px solid var(--border);border-radius:clamp(4px, 1vw, 6px);cursor:pointer;margin-top:clamp(8px, 1.5vw, 10px);color:var(--text);background:transparent;font-size:clamp(0.7rem, 1.4vw, 0.8rem);transition:border-color 0.2s}
.last-color-button:hover{border-color:var(--accent)}

/* Editor Sections (Collapsible) */
.editor-section{display:flex;flex-direction:column;gap:0;margin-top:0}
.editor-section:first-of-type{margin-top:0}
.editor-section-header{background:transparent;border:none;cursor:pointer;padding:0.6rem 0;display:flex;align-items:center;justify-content:space-between;gap:8px;transition:all 200ms ease;font-size:clamp(0.7rem, 1.4vw, 0.8rem);font-weight:600;color:var(--text);user-select:none;letter-spacing:0.03em}
.editor-section-header:hover{color:var(--accent);opacity:0.9}
.editor-section-header:disabled{opacity:0.5;cursor:not-allowed;color:var(--text)}
.editor-section-header:disabled:hover{opacity:0.5;color:var(--text)}
.editor-section-title{flex:1;text-align:left}
.editor-section-toggle{width:14px;height:14px;transition:transform 280ms cubic-bezier(0.4,0,0.2,1), color 200ms ease, opacity 200ms ease;color:var(--accent);flex-shrink:0;opacity:0.6}
.editor-section-header:hover .editor-section-toggle{opacity:1}
.editor-section-header:disabled .editor-section-toggle{opacity:0.6;color:var(--text)}
.editor-section-header.collapsed .editor-section-toggle{transform:rotate(-90deg)}
.editor-section-content{display:flex;flex-direction:column;gap:0.65rem;padding:0;max-height:1200px;overflow:hidden;transition:max-height 280ms cubic-bezier(0.4,0,0.2,1),opacity 280ms ease,padding 280ms ease;opacity:1}
.editor-section-header.collapsed ~ .editor-section-content{max-height:0;opacity:0;padding:0;overflow:hidden}

/* Part name label inside editor section */
.editor-part-name{font-size:clamp(0.7rem, 1.4vw, 0.8rem);font-weight:700;color:var(--text);margin-bottom:0.5rem;padding-bottom:0.5rem;border-bottom:1px solid var(--border);letter-spacing:0.02em}

/* Slider Groups */
.slider-group{display:flex;flex-direction:column;gap:0.4rem}
.editor-slider{width:100%;height:18px;border-radius:6px;-webkit-appearance:none;appearance:none;cursor:pointer;border:none;background:linear-gradient(to right, #ffffff, #000000);transition:filter 200ms ease;-webkit-appearance:slider-horizontal}
.editor-slider:hover{filter:brightness(0.95)}
.editor-slider::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:14px;height:14px;border-radius:50%;background:white;border:2px solid rgba(0,0,0,0.2);cursor:pointer;box-shadow:0 2px 6px rgba(0,0,0,0.15);transition:all 200ms ease;transform:scale(1)}
.editor-slider::-webkit-slider-thumb:hover{transform:scale(1.15);box-shadow:0 3px 8px rgba(0,0,0,0.2)}
.editor-slider::-moz-range-thumb{width:14px;height:14px;border-radius:50%;background:white;border:2px solid rgba(0,0,0,0.2);cursor:pointer;box-shadow:0 2px 6px rgba(0,0,0,0.15);transition:all 200ms ease;transform:scale(1)}
.editor-slider::-moz-range-thumb:hover{transform:scale(1.15);box-shadow:0 3px 8px rgba(0,0,0,0.2)}

/* Tint Controls */
.tint-group{display:flex;flex-direction:column;gap:0.6rem;padding:0}
.checkbox-label{display:flex;align-items:center;gap:8px;cursor:pointer;font-size:clamp(0.75rem, 1.6vw, 0.8rem);font-weight:500;color:var(--text);user-select:none;transition:color 200ms ease}
.checkbox-label:hover{color:var(--accent)}
.tint-checkbox{width:16px;height:16px;cursor:pointer;accent-color:var(--accent);transition:transform 200ms ease}
.tint-checkbox:hover{transform:scale(1.1)}

/* Save/Load Buttons */
.save-load-btn{width:100%;padding:0.6rem 0.8rem;border:1px solid var(--border);border-radius:8px;background:var(--panel);color:var(--text);font-weight:500;font-size:clamp(0.7rem, 1.4vw, 0.8rem);cursor:pointer;transition:all 200ms ease;letter-spacing:0.02em}
.save-load-btn:hover{background:rgba(29,78,216,0.08);border-color:rgba(29,78,216,0.2)}
.save-load-btn:active{transform:scale(0.98)}

/* Mini RGB Picker */
.mini-rgb-picker{display:flex;flex-direction:column;gap:8px;padding:clamp(8px, 1.5vw, 10px);background:rgba(0,0,0,0.02);border-radius:8px}
.rgb-input-group{display:flex;align-items:center;gap:8px}
.rgb-label{min-width:20px;font-size:clamp(0.75rem, 1.8vw, 0.85rem);font-weight:600;color:var(--text);text-align:center}
.rgb-slider{flex:1;height:18px;border-radius:6px;-webkit-appearance:none;appearance:none;cursor:pointer;border:none}
.red-slider{background:linear-gradient(to right, rgb(0,0,0), rgb(255,0,0))}
.green-slider{background:linear-gradient(to right, rgb(0,0,0), rgb(0,255,0))}
.blue-slider{background:linear-gradient(to right, rgb(0,0,0), rgb(0,0,255))}
.rgb-slider::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:14px;height:14px;border-radius:50%;background:white;border:2px solid #333;cursor:pointer;box-shadow:0 1px 3px rgba(0,0,0,0.3)}
.rgb-slider::-moz-range-thumb{width:14px;height:14px;border-radius:50%;background:white;border:2px solid #333;cursor:pointer;box-shadow:0 1px 3px rgba(0,0,0,0.3)}
.cover-flow{display:flex;align-items:center;justify-content:center;gap:clamp(6px, 1vw, 8px);margin-top:clamp(6px, 1vw, 10px);width:100%;max-width:clamp(600px, 85vw, 1200px);margin-left:auto;margin-right:auto;padding:clamp(4px, 0.8vw, 8px);height:auto;flex:0}

.thumbnails-container{overflow-x:auto;width:100%;scroll-behavior:smooth;-ms-overflow-style:none;scrollbar-width:none}
.thumbnails-container::-webkit-scrollbar{display:none;height:0}
.thumbnails-container::-webkit-scrollbar-thumb{background:transparent}

.thumbnails{display:flex;gap:clamp(8px, 1.5vw, 10px);justify-content:center;min-width:fit-content;padding:0 clamp(6px, 1vw, 10px)}

.thumbnails .thumb-preview{width:clamp(80px, 15vw, 120px);height:clamp(40px, 7vw, 60px);position:relative;border-radius:clamp(4px, 1vw, 8px);overflow:hidden;cursor:pointer;border:2px solid transparent;transition:border-color 0.2s, transform 0.2s}
.thumbnails .thumb-preview:hover,.thumbnails .thumb-preview.selected{border-color:var(--accent);transform:translateY(clamp(-2px, -0.5vw, -4px))}

.thumbnails .thumb-preview .car-image,.thumbnails .thumb-preview .color-layer{position:absolute;width:100%;height:100%;background-size:cover;background-position:center center;background-repeat:no-repeat;transform-origin:center}

.thumbnails .thumb-preview .color-layer{background-size:cover;background-position:center center;background-repeat:no-repeat;mask-size:contain;mask-position:center center;mask-repeat:no-repeat;-webkit-mask-size:contain;-webkit-mask-position:center center;-webkit-mask-repeat:no-repeat;mix-blend-mode:overlay}
.thumbnails .thumb-preview .upper-trim{mix-blend-mode:multiply}
.thumbnails .thumb-preview .headlight-trim{mix-blend-mode:multiply}
.thumbnails .thumb-preview .side-mirror{mix-blend-mode:multiply}
.thumbnails .thumb-preview .rim-petals{mix-blend-mode:multiply}
.thumbnails .thumb-preview .indicator-trim{mix-blend-mode:multiply}
.thumbnails .thumb-preview .rim-trim{mix-blend-mode:multiply}
.thumbnails .thumb-preview .mirror-base{mix-blend-mode:multiply}

/* Custom sizing for thumbnails with background.png — aspect ratio via container */

/* Thumbnails use default contain sizing with container aspect ratio */

/* Navigation buttons */
.nav-btn{background:var(--panel);border:1px solid var(--border);border-radius:50%;width:clamp(32px, 7vw, 40px);height:clamp(32px, 7vw, 40px);cursor:pointer;font-size:clamp(14px, 3vw, 18px);display:flex;align-items:center;justify-content:center;opacity:0;pointer-events:none;transition:opacity 0.3s, transform 0.2s;flex-shrink:0}
.cover-flow:hover .nav-btn{opacity:1;pointer-events:auto}
.nav-btn:hover{transform:scale(1.1)}
.nav-btn:active{transform:scale(0.95)}

/* --- PART VIEW BUTTON & PANEL STYLES --- */
.part-view-container {
  position: absolute !important;
  bottom: clamp(10px, 2vw, 15px) !important;
  right: clamp(10px, 2vw, 15px) !important;
  z-index: 1000 !important; /* Extremely high to be above all car layers */
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-end !important;
  pointer-events: none !important;
}

.part-view-btn {
  width: clamp(36px, 8vw, 40px) !important;
  height: clamp(36px, 8vw, 40px) !important;
  background: #ffffff !important;
  border: 1px solid #e6e6e6 !important;
  border-radius: 50% !important;
  cursor: pointer !important;
  display: grid !important;
  place-items: center !important;
  box-shadow: 0 4px 12px rgba(0,0,0,0.1) !important;
  transition: opacity 300ms ease, transform 300ms ease !important;
  opacity: 0 !important;
  pointer-events: none !important;
  transform: translateY(6px) !important;
  color: #0b1220 !important;
}

.canvas-wrap:hover .part-view-btn {
  opacity: 1 !important;
  pointer-events: auto !important;
  transform: none !important;
}

.part-view-btn.fade-out {
  opacity: 0 !important;
  pointer-events: none !important;
  transform: scale(0.8) !important;
}

.part-view-panel {
  position: absolute !important;
  bottom: 0 !important;
  right: 0 !important;
  width: 280px !important;
  background: rgba(255, 255, 255, 0.98) !important;
  backdrop-filter: blur(12px) !important;
  border: 1px solid #e6e6e6 !important;
  border-radius: 20px !important;
  box-shadow: 0 10px 40px rgba(0,0,0,0.15) !important;
  padding: 1rem !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 0.75rem !important;
  transform-origin: bottom right !important;
  transition: transform 300ms cubic-bezier(0.4, 0, 0.2, 1), opacity 300ms ease !important;
  z-index: 1010 !important;
  pointer-events: auto !important;
}

.part-view-panel.hidden {
  opacity: 0 !important;
  transform: scale(0.8) translateY(20px) !important;
  pointer-events: none !important;
}
/* --- END PART VIEW STYLES --- */

.part-view-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-weight: 700;
  font-size: 0.9rem;
  color: var(--text);
  border-bottom: 1px solid var(--border);
  padding-bottom: 0.5rem;
}

.close-part-view {
  background: none;
  border: none;
  font-size: 1.2rem;
  cursor: pointer;
  color: var(--muted);
  line-height: 1;
}

.part-list {
  max-height: 300px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding-right: 4px;
}

.part-list::-webkit-scrollbar {
  width: 4px;
}
.part-list::-webkit-scrollbar-track {
  background: transparent;
}
.part-list::-webkit-scrollbar-thumb {
  background: var(--border);
  border-radius: 2px;
}

.part-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 12px;
  border-radius: 12px;
  cursor: pointer;
  transition: background 0.2s, transform 0.1s;
  border: 1px solid transparent;
  pointer-events: auto;
}

.part-item:hover {
  background: rgba(29, 78, 216, 0.05);
  transform: translateX(2px);
}

.part-item.active {
  background: rgba(29, 78, 216, 0.1);
  border-color: var(--accent);
}

.part-color-tile {
  width: 24px;
  height: 24px;
  border-radius: 6px;
  border: 1px solid rgba(0,0,0,0.1);
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
  flex-shrink: 0;
}

.part-name {
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Authentication Login Screen */
.auth-login-screen {
  position: fixed;
  inset: 0;
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #1d4ed8 0%, #0b1220 100%);
  z-index: 9999;
  padding: 20px;
  opacity: 0;
  transition: opacity 300ms ease-out;
}

.auth-login-screen.active {
  opacity: 1;
}

.auth-login-container {
  width: 100%;
  max-width: 400px;
  pointer-events: auto;
}

.auth-login-card {
  background: white;
  border-radius: 12px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
  padding: 40px;
  width: 100%;
}

.auth-login-header {
  text-align: center;
  margin-bottom: 30px;
}

.auth-login-header h1 {
  font-size: 28px;
  color: #0b1220;
  margin: 0 0 8px 0;
  font-weight: 700;
}

.auth-login-header p {
  color: #6b7280;
  font-size: 14px;
  margin: 0;
}

.auth-login-form {
  width: 100%;
}

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

.auth-form-group label {
  display: block;
  font-size: 14px;
  font-weight: 500;
  color: #0b1220;
  margin-bottom: 8px;
}

.auth-form-group input[type="password"] {
  width: 100%;
  padding: 12px 16px;
  border: 1px solid #e6e6e6;
  border-radius: 8px;
  font-size: 16px;
  font-family: inherit;
  transition: border-color 200ms, box-shadow 200ms;
  box-sizing: border-box;
  -webkit-appearance: none;
}

.auth-form-group input[type="password"]:focus {
  outline: none;
  border-color: #1d4ed8;
  box-shadow: 0 0 0 3px rgba(29, 78, 216, 0.1);
}

.auth-submit-btn {
  width: 100%;
  padding: 12px 16px;
  background: #1d4ed8;
  color: white;
  border: none;
  border-radius: 8px;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  transition: background 200ms, transform 100ms;
  font-family: inherit;
}

.auth-submit-btn:hover:not(:disabled) {
  background: #1e40af;
}

.auth-submit-btn:active:not(:disabled) {
  transform: scale(0.98);
}

.auth-submit-btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.auth-error-message {
  display: none;
  background: #fee2e2;
  border: 1px solid #fecaca;
  color: #991b1b;
  padding: 12px;
  border-radius: 6px;
  font-size: 14px;
  margin-bottom: 20px;
}

.auth-error-message.show {
  display: block;
}