/* Windows XP Luna redesign layer
   This file intentionally overrides the legacy UI to make the app look like
   a compact Windows XP tool window instead of a modern web page. */

:root{
  --xp-blue-900:#003399;
  --xp-blue-700:#1f5fd2;
  --xp-blue-500:#6487dc;
  --xp-blue-300:#8caae6;
  --xp-cream:#ece9d8;
  --xp-panel:#f1efe2;
  --xp-white:#ffffff;
  --xp-shadow:#00317b;
  --xp-dark:#0a246a;
  --xp-text:#111111;
  --xp-muted:#404040;
  --xp-orange:#ffb84d;
  --xp-red:#d7482f;
}

*{ box-sizing:border-box; }

html,
body,
button,
input,
select,
textarea{
  font-family:Tahoma,Verdana,Arial,sans-serif !important;
  font-size:12px;
  letter-spacing:0 !important;
  cursor:default;
  -webkit-font-smoothing: none !important;
  -moz-osx-font-smoothing: grayscale !important;
}

html,
body{
  color:var(--xp-text) !important;
  background:#5f83dc url('/static/xp-login-bg.svg') center center / cover no-repeat fixed !important;
}

body::before,
body::after{
  content:none !important;
  display:none !important;
}

.header{
  padding:8px 8px 3px !important;
}

.header-top{
  min-height:28px;
  justify-content:flex-end !important;
}

.logo-wrap{
  margin:10px 10px 8px !important;
  text-align:left;
}

.logo,
.logo:hover,
.logo:focus,
.logo:active{
  width:min(430px,86vw) !important;
  filter:none !important;
  box-shadow:none !important;
  transform:none !important;
}

.wrap{
  max-width:1040px !important;
  padding:0 10px 22px !important;
}

/* --- XP Menu Bar --- */
.xp-menubar {
  display: flex !important;
  background: #ece9d8 !important;
  border-bottom: 1px solid #aca899 !important;
  padding: 1px 4px !important;
  gap: 2px !important;
  position: relative !important;
  z-index: 200 !important;
}

.xp-menu-item {
  color: #000 !important;
  font-size: 11px !important;
  padding: 3px 6px !important;
  cursor: pointer !important;
  border: 1px solid transparent !important;
  background: transparent !important;
  border-radius: 2px !important;
  display: flex !important;
  align-items: center !important;
}

.xp-menu-item:hover {
  background: #316ac5 !important; /* Classic XP blue highlight */
  color: #fff !important;
  border-color: #316ac5 !important;
}

.xp-menu-item.lang-picker {
  padding: 0 !important; /* the button inside will handle padding */
  position: relative !important;
}

.xp-menu-item .lang-current {
  background: transparent !important;
  border: 0 !important;
  color: inherit !important;
  font-size: 11px !important;
  padding: 3px 6px !important;
  display: flex !important;
  align-items: center !important;
  cursor: pointer !important;
}

.xp-menu-item:hover .lang-current {
  color: #fff !important;
}

.xp-menu-item .lang-menu {
  position: absolute !important;
  top: 100% !important;
  left: 0 !important;
  background: #fff !important;
  border: 1px solid #aca899 !important;
  box-shadow: 2px 2px 2px rgba(0,0,0,0.2) !important;
  z-index: 1000 !important;
  min-width: 120px !important;
  display: flex !important;
  flex-direction: column !important;
}

.xp-menu-item .lang-menu.hidden {
  display: none !important;
}

.xp-menu-item .lang-option {
  padding: 4px 10px !important;
  text-align: left !important;
  background: transparent !important;
  border: none !important;
  font-size: 11px !important;
  color: #000 !important;
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  width: 100% !important;
}

.xp-menu-item .lang-option:hover {
  background: #316ac5 !important;
  color: #fff !important;
}

.card{
  position:relative;
  overflow:visible;
  padding:0 8px 8px !important;
  background:var(--xp-cream) !important;
  border:2px solid #0a246a !important;
  border-radius:8px 8px 3px 3px !important;
  box-shadow:2px 2px 0 rgba(0,0,0,.36) !important;
}

.card::before,
.card::after{
  display:none !important;
  content:none !important;
}

.xp-window-titlebar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  height:30px;
  margin:0 -8px 7px;
  padding:0 5px 0 8px;
  color:#fff;
  background:
    linear-gradient(180deg,rgba(255,255,255,.45),rgba(255,255,255,0) 44%),
    linear-gradient(90deg,#003399 0%,#245edb 48%,#6487dc 100%);
  border-bottom:1px solid #00236c;
  text-shadow:1px 1px 0 #001b5b;
}

.xp-window-title{
  display:flex;
  align-items:center;
  gap:6px;
  font-weight:700;
  font-size:13px;
  white-space:nowrap;
}

.xp-window-icon{
  width:16px;
  height:16px;
  border:1px solid #fff;
  background:linear-gradient(135deg,#ff8a18 0 25%,#75bb35 25% 50%,#38a7ff 50% 75%,#ffd335 75%);
  box-shadow:1px 1px 0 rgba(0,0,0,.28);
}

.xp-window-controls{
  display:flex;
  gap:3px;
}

.xp-window-btn{
  width:22px;
  height:21px;
  padding:0;
  color:#fff;
  line-height:18px;
  font-weight:700;
  text-align:center;
  border:1px solid #fff;
  border-radius:3px;
  background:linear-gradient(#8db1ff,#245edb 45%,#1247b5);
  box-shadow:inset 1px 1px 0 rgba(255,255,255,.55),inset -1px -1px 0 rgba(0,0,0,.35);
}

.xp-window-btn.close{
  background:linear-gradient(#ffb19b,#e85f42 45%,#bd2f20);
}

.nav-shell{
  padding:4px 4px 0 !important;
  background:#d6d2bf !important;
  border:2px solid !important;
  border-color:#ffffff #8a867a #8a867a #ffffff !important;
  border-radius:2px !important;
}

.main-tabs,
.tool-tabs{
  gap:2px !important;
  justify-content:flex-start !important;
  margin:0 !important;
  padding:0 3px !important;
  background:transparent !important;
  border:0 !important;
}

.tabbtn,
.main-tab {
  min-height:26px !important;
  padding:5px 10px !important;
  color:#102040 !important;
  font-weight:400 !important;
  border:1px solid #8a867a !important;
  border-bottom-color:#5c5c5c !important;
  border-radius:4px 4px 0 0 !important;
  background:linear-gradient(#fffdf5,#d8d2bd) !important;
  box-shadow:inset 1px 1px 0 #fff !important;
  text-align:center !important;
}

.tabbtn:hover,
.main-tab:hover {
  background:linear-gradient(#ffffff,#e7dfc6) !important;
}

.tabbtn.active,
.main-tab.active {
  color:#000 !important;
  background:linear-gradient(#fff,#ece9d8) !important;
  border-bottom-color:#ece9d8 !important;
  margin-bottom:-1px !important;
  font-weight:700 !important;
}

/* XP Toolbar Style para os submenus */
.tool-tabs {
  padding: 4px !important;
  background: #ece9d8 !important;
  border-top: 1px solid #aca899 !important;
  border-bottom: 1px solid #aca899 !important;
  gap: 2px !important;
}

.tool-tab {
  min-height: 24px !important;
  padding: 4px 8px !important;
  color: #000 !important;
  background: transparent !important;
  border: 1px solid transparent !important;
  border-radius: 3px !important;
  font-weight: 400 !important;
  box-shadow: none !important;
  text-align: center !important;
}

.tool-tab:hover {
  background: #c1d2ee !important;
  border-color: #316ac5 !important;
}

.tool-tab.active {
  background: #98b5e2 !important;
  border-color: #316ac5 !important;
  font-weight: 700 !important;
  box-shadow: inset 1px 1px 2px rgba(0,0,0,0.2) !important;
}

.section{
  padding:8px 5px 0 !important;
}

.title,
.media-tool-title{
  margin:4px 0 4px !important;
  color:#0a246a !important;
  font-size:13px !important;
  line-height:1.2 !important;
  text-align:left !important;
  text-shadow:none !important;
}

.media-brand-title{
  justify-content:flex-start !important;
  gap:7px !important;
  text-align:left !important;
}

.media-brand-title svg{
  width:22px !important;
  height:22px !important;
  padding:2px;
  background:#fff;
  border:1px solid #7f9db9;
}

.sub,
.note,
.small{
  color:var(--xp-muted) !important;
  font-size:11px !important;
  line-height:1.35 !important;
  text-align:left !important;
}

.media-tool-shell,
.media-tool-shell-narrow{
  max-width:760px !important;
  margin:6px auto 0 !important;
}

.youtube-panel,
.media-download-card,
.media-options-panel,
.instagram-card,
.drop,
.removebg-strength,
.removebg-preview-card,
.cookie-panel-card,
.cookie-notice{
  background:var(--xp-panel) !important;
  border:2px solid !important;
  border-color:#ffffff #8a867a #8a867a #ffffff !important;
  border-radius:3px !important;
  box-shadow:none !important;
}

.youtube-panel,
.media-download-card,
.instagram-card{
  padding:8px !important;
}

.drop{
  padding:12px !important;
}

.media-field-stack,
.media-field-stack-compact{
  gap:5px !important;
}

textarea,
input[type='text'],
input[type='number'],
input[type='url'],
input[type='password'],
select{
  min-height:23px !important;
  padding:3px 5px !important;
  color:#000 !important;
  background:#fff !important;
  border:2px solid !important;
  border-color:#7f9db9 #ffffff #ffffff #7f9db9 !important;
  border-radius:0 !important;
  box-shadow:inset 1px 1px 0 rgba(0,0,0,.16) !important;
}

textarea{
  min-height:92px !important;
  resize:vertical;
}

.clip-url-input,
.social-url-input{
  min-height:25px !important;
}

label{
  color:#000 !important;
  font-size:11px !important;
}

.btn,
.btn.alt,
.btn.secondary,
button.btn,
a.btn{
  min-height:25px !important;
  padding:4px 12px !important;
  color:#000 !important;
  font-size:11px !important;
  font-weight:400 !important;
  text-align:center !important;
  text-shadow:none !important;
  background:linear-gradient(#ffffff 0%,#edf4ff 42%,#c7dcff 48%,#7ca8f5 100%) !important;
  border:2px solid !important;
  border-color:#ffffff #003c9f #003c9f #ffffff !important;
  border-radius:4px !important;
  box-shadow:inset 1px 1px 0 rgba(255,255,255,.9),1px 1px 0 rgba(0,0,0,.2) !important;
}

.btn:hover,
.btn.alt:hover,
.btn.secondary:hover{
  background:linear-gradient(#ffffff 0%,#f7fbff 42%,#d7e8ff 48%,#8db7ff 100%) !important;
}

.btn:active,
.btn.alt:active,
.btn.secondary:active{
  padding:5px 11px 3px 13px !important;
  border-color:#003c9f #ffffff #ffffff #003c9f !important;
  background:linear-gradient(#6f9eea,#d7e8ff) !important;
  box-shadow:inset 1px 1px 2px rgba(0,0,0,.45) !important;
}

.btn:focus,
.btn.alt:focus,
.btn.secondary:focus,
.tabbtn:focus,
.main-tab:focus,
.tool-tab:focus,
a:focus {
  outline: 1px dotted #000 !important;
  outline-offset: -3px !important;
}

.inputs,
.media-action-strip,
.media-command-row,
.clip-control-grid,
.instagram-action-grid,
.youtube-inline-row{
  gap:6px !important;
  justify-content:flex-start !important;
  align-items:center !important;
}

.instagram-action-grid{
  grid-template-columns:repeat(2,minmax(0,1fr)) !important;
}

.instagram-action-grid .btn:last-child{
  grid-column:1 / -1;
}

.progress{
  height:15px !important;
  padding:1px !important;
  background:#fff !important;
  border:2px solid !important;
  border-color:#7f9db9 #ffffff #ffffff #7f9db9 !important;
  border-radius:0 !important;
}

.progress > div{
  background:linear-gradient(90deg,#0a46d5,#6aa0ff) !important;
}

.errmsg{
  margin-top:5px !important;
  padding:5px 6px !important;
  color:#7a0000 !important;
  background:#fff1ee !important;
  border:1px solid #c44 !important;
  border-radius:0 !important;
  text-align:left !important;
}

.row,
.item{
  background:#fff !important;
  border:1px solid #aca899 !important;
  border-radius:0 !important;
  box-shadow:none !important;
}

.footer,
.cookie-footer-link{
  background:linear-gradient(#fffdf2,#d9d2b2) !important;
  border:2px solid !important;
  border-color:#ffffff #8a867a #8a867a #ffffff !important;
  border-radius:2px !important;
  color:#0a246a !important;
  box-shadow:none !important;
}

.cookie-notice strong,
.cookie-panel-head strong,
.cookie-option strong{
  color:#0a246a !important;
}

.cookie-switch span{
  border:1px solid #7f9db9 !important;
  background:#d6d2bf !important;
  border-radius:2px !important;
}

.cookie-switch span::after{
  border-radius:1px !important;
  box-shadow:none !important;
}

.lang-current,
.lang-menu{
  background:var(--xp-panel) !important;
  border:2px solid !important;
  border-color:#ffffff #8a867a #8a867a #ffffff !important;
  border-radius:3px !important;
  box-shadow:none !important;
}

#confettiCanvas{
  display:none !important;
}

/* Retro Scrollbar */
::-webkit-scrollbar {
  width: 16px;
  height: 16px;
}
::-webkit-scrollbar-track {
  background: #f1efe2;
  border-left: 1px solid #aca899;
}
::-webkit-scrollbar-thumb {
  background: #8caae6;
  border: 1px solid #003c9f;
  border-radius: 0;
  box-shadow: inset 1px 1px 0 rgba(255,255,255,0.7);
}
::-webkit-scrollbar-thumb:hover {
  background: #6487dc;
}
::-webkit-scrollbar-corner {
  background: #f1efe2;
}

@media (max-width:760px){
  .wrap{ padding:0 6px 16px !important; }
  .hero-grid{ grid-template-columns:1fr !important; }
  .card{ padding:0 5px 6px !important; border-radius:7px 7px 3px 3px !important; }
  .xp-window-titlebar{ margin:0 -5px 6px; }
  .xp-window-title{ font-size:12px; }
  .main-tabs,.tool-tabs{ flex-wrap:wrap !important; padding-bottom:2px !important; }
  .main-tab,.tool-tab{ flex:1 1 auto; min-height:25px !important; font-size:11px !important; white-space:nowrap !important; }
  .media-tool-shell,.media-tool-shell-narrow{ max-width:100% !important; }
  .instagram-action-grid{ grid-template-columns:1fr !important; }
  .clip-control-grid{ grid-template-columns:1fr 1fr !important; }
  .title{ font-size:12px !important; }
  textarea{ min-height:78px !important; }
}

/* ══════════════════════════════════════════
   XP EFFECTS — sound & visual layer
   ══════════════════════════════════════════ */

/* --- Mute button in titlebar --- */
.xp-mute-btn {
  margin-left: auto !important;
  background: transparent !important;
  border: 1px solid transparent !important;
  color: #ffffff !important;
  padding: 1px 4px !important;
  cursor: pointer !important;
  border-radius: 2px !important;
  display: flex !important;
  align-items: center !important;
  opacity: 0.8;
}
.xp-mute-btn:hover {
  background: rgba(255,255,255,0.2) !important;
  opacity: 1;
}

/* --- Shake animation on error --- */
@keyframes xp-shake {
  0%,100% { transform: translateX(0); }
  15%      { transform: translateX(-7px); }
  30%      { transform: translateX(7px); }
  45%      { transform: translateX(-5px); }
  60%      { transform: translateX(5px); }
  75%      { transform: translateX(-3px); }
  90%      { transform: translateX(3px); }
}
.xp-shake {
  animation: xp-shake 0.45s ease-in-out !important;
}

/* --- XP chunky progress bar --- */
.xp-progress-wrap {
  height: 18px;
  background: #d4d0c8;
  border: 1px solid #888;
  border-color: #7f7f7f #fff #fff #7f7f7f;
  margin: 6px 0 4px;
  overflow: hidden;
  position: relative;
}
.xp-progress-inner {
  height: 100%;
  width: 0%;
  background: repeating-linear-gradient(
    90deg,
    #3a6ea5 0px,
    #3a6ea5 14px,
    #2a5a8c 14px,
    #2a5a8c 16px
  );
  transition: width 0.12s linear;
  position: relative;
}
.xp-progress-inner::after {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 50%;
  background: rgba(255,255,255,0.15);
}
.xp-progress--error .xp-progress-inner {
  background: repeating-linear-gradient(
    90deg,
    #c0392b 0px,
    #c0392b 14px,
    #a93226 14px,
    #a93226 16px
  );
}

/* --- XP Balloon notification (bottom-right) --- */
@keyframes xp-balloon-in {
  from { opacity:0; transform: translateY(20px); }
  to   { opacity:1; transform: translateY(0); }
}
@keyframes xp-balloon-out {
  to { opacity:0; transform: translateY(20px); }
}
.xp-balloon {
  position: fixed;
  bottom: 24px;
  right: 20px;
  width: 260px;
  background: #fffde7;
  border: 1px solid #888;
  border-color: #fff #7f7f7f #7f7f7f #fff;
  box-shadow: 2px 2px 6px rgba(0,0,0,0.35);
  font-family: Tahoma, Verdana, Arial, sans-serif;
  font-size: 11px;
  z-index: 9999;
  animation: xp-balloon-in 0.25s ease-out;
}
.xp-balloon--hide {
  animation: xp-balloon-out 0.3s ease-in forwards !important;
}
.xp-balloon--success { border-left: 3px solid #3a6ea5; }
.xp-balloon--error   { border-left: 3px solid #c0392b; background: #fff5f5; }
.xp-balloon--info    { border-left: 3px solid #666; }

.xp-balloon-header {
  display: flex;
  align-items: center;
  gap: 5px;
  background: linear-gradient(to right, #0a246a, #3a6ea5);
  color: #fff;
  padding: 3px 6px;
  font-weight: bold;
  font-size: 11px;
}
.xp-balloon-icon { font-size: 12px; }
.xp-balloon-title { flex: 1; }
.xp-balloon-close {
  background: transparent !important;
  border: none !important;
  color: #fff !important;
  cursor: pointer !important;
  font-size: 11px !important;
  padding: 0 2px !important;
  line-height: 1 !important;
}
.xp-balloon-close:hover { color: #ffd700 !important; }
.xp-balloon-body {
  padding: 6px 8px;
  color: #111;
  line-height: 1.4;
}

/* --- XP Dialog / Alert Box --- */
.xp-dialog-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10000;
}

.xp-dialog {
  width: min(420px, 92vw);
  background: #ece9d8;
  border: 1px solid #003c9f;
  border-radius: 3px 3px 0 0;
  box-shadow: 2px 2px 0 rgba(0,0,0,.35);
  font-family: Tahoma, "MS Sans Serif", sans-serif;
  overflow: hidden;
}

.xp-dialog-titlebar {
  background: linear-gradient(90deg, #0a246a, #a6caf0);
  padding: 3px 3px 3px 8px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 25px;
}

.xp-dialog-title {
  color: #fff;
  font-weight: bold;
  font-size: 11px;
  text-shadow: 1px 1px 1px rgba(0,0,0,0.5);
}

.xp-dialog-close {
  width: 21px;
  height: 21px;
  background: #e1e1e1;
  border: 1px solid #fff;
  border-right-color: #808080;
  border-bottom-color: #808080;
  color: #000;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: bold;
  cursor: pointer;
  padding: 0;
}

.xp-dialog-close:active {
  border-color: #808080;
  border-right-color: #fff;
  border-bottom-color: #fff;
  padding: 1px 0 0 1px;
}

.xp-dialog-content {
  padding: 15px 15px 12px;
  display: flex;
  gap: 15px;
  align-items: flex-start;
}

.xp-dialog-icon {
  flex-shrink: 0;
}

.xp-dialog-message {
  font-size: 11px;
  color: #000;
  line-height: 1.4;
  flex: 1;
}

.xp-dialog-actions {
  padding: 0 12px 12px;
  display: flex;
  justify-content: center;
  gap: 8px;
}

.xp-dialog-btn {
  min-width: 75px;
  height: 23px;
  background: #ece9d8;
  border: 1px solid #000;
  border-color: #fff #808080 #808080 #fff;
  font-size: 11px;
  color: #000;
  cursor: pointer;
  outline: none;
}

.xp-dialog-btn:active {
  border-color: #808080 #fff #fff #808080;
  padding: 1px 0 0 1px;
}

.xp-share-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
  margin-top: 10px;
}

.xp-share-link {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 24px;
  background: #ece9d8;
  border: 1px solid #808080;
  border-color: #fff #808080 #808080 #fff;
  color: #000;
  text-decoration: none;
  font-size: 11px;
}

.xp-share-link:active {
  border-color: #808080 #fff #fff #808080;
}


/* Theme chooser, XP flavor */
.theme-switcher{
  display:inline-flex;
  align-items:center;
  gap:2px;
  padding:2px;
  border:2px solid;
  border-color:#ffffff #808080 #808080 #ffffff;
  background:#ece9d8;
}
.theme-option{
  min-height:23px;
  padding:3px 9px;
  border:1px solid;
  border-color:#ffffff #666666 #666666 #ffffff;
  border-radius:2px;
  background:linear-gradient(#ffffff,#d8d2bd);
  color:#111;
  font-family:Tahoma,Verdana,Arial,sans-serif;
  font-size:11px;
  font-weight:700;
  line-height:1;
  box-shadow:inset 1px 1px 0 rgba(255,255,255,.9);
}
.theme-option.active{
  color:#fff;
  border-color:#123f8f #00236c #00236c #5f8df0;
  background:linear-gradient(#6fa2ff,#245edb 48%,#1146b8);
  text-shadow:1px 1px 0 #001b5b;
}
.theme-option:active{
  border-color:#666666 #ffffff #ffffff #666666;
  box-shadow:inset 1px 1px 2px rgba(0,0,0,.35);
  transform:translate(1px,1px);
}
@media (max-width:760px){
  .header-top{ flex-wrap:wrap; justify-content:center !important; }
  .theme-switcher{ order:3; }
}


/* Dual logo visibility */
.logo-saas{ display:none !important; }
.logo-xp{ display:block !important; }


/* XP submenu clipping fix */
html[data-ui-theme="xp"] .tool-tabs{
  align-items:center !important;
  overflow:visible !important;
}
html[data-ui-theme="xp"] .tool-tab{
  min-height:30px !important;
  height:30px !important;
  padding:0 13px !important;
  line-height:28px !important;
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  overflow:visible !important;
  white-space:nowrap !important;
}
@media (max-width:760px){
  html[data-ui-theme="xp"] .tool-tab{
    min-height:30px !important;
    height:30px !important;
    padding:0 10px !important;
    line-height:28px !important;
  }
}