/* ===== LASER STUDIO V34 STYLES ===== */  
  
:root {  
  --p: #00ff88;  
  --b: #050505;  
  --s: #121212;  
  --t: #ddd;  
  --err: #ff3333;  
  --edge: #00ccff;  
  --sketch: #ff9900;  
}  
  
* {  
  box-sizing: border-box;  
}  
  
body {  
  font-family: 'Segoe UI', sans-serif;  
  background: var(--b);  
  color: var(--t);  
  margin: 0;  
  display: flex;  
  height: 100vh;  
  overflow: hidden;  
}  
  
/* ===== SIDEBAR ===== */  
  
.sidebar {  
  width: 460px;  
  background: var(--s);  
  border-right: 1px solid #333;  
  display: flex;  
  flex-direction: column;  
  z-index: 20;  
  box-shadow: 5px 0 30px rgba(0, 0, 0, 0.8);  
}  
  
/* ===== HEADER ===== */  
  
.header {  
  padding: 15px;  
  background: #000;  
  border-bottom: 1px solid #333;  
  display: flex;  
  justify-content: space-between;  
  align-items: center;  
}  
  
h2 {  
  margin: 0;  
  color: #fff;  
  font-size: 1.2rem;  
  font-weight: 900;  
  letter-spacing: 1px;  
}  
  
h2 span {  
  color: var(--p);  
}  
  
/* ===== HEADER BUTTONS ===== */  
  
.header-actions {  
  display: flex;  
  gap: 10px;  
  align-items: center;  
}  
  
.btn-rst {  
  background: var(--err);  
  color: #fff;  
  border: none;  
  padding: 6px 12px;  
  border-radius: 4px;  
  cursor: pointer;  
  font-weight: bold;  
  font-size: 0.75rem;  
}  
  
/* ACCOUNT BUTTON */  
  
#openProfileBtn {  
  background: transparent;  
  border: 1px solid var(--p);  
  color: var(--p);  
  padding: 6px 14px;  
  font-size: 13px;  
  border-radius: 6px;  
  cursor: pointer;  
  display: flex;  
  align-items: center;  
  gap: 6px;  
  opacity: 0.85;  
}  
  
#openProfileBtn:hover {  
  background: rgba(0, 255, 136, 0.15);  
  opacity: 1;  
}  
  
/* Hide ACCOUNT when not logged in   
body:not(.logged-in) #openProfileBtn {  
  display: none;  
}  */
  
/* ===== NAV TABS ===== */  
  
.nav-tabs {  
  display: flex;  
  background: #000;  
  border-bottom: 1px solid #333;  
}  
  
.tab {  
  flex: 1;  
  padding: 18px;  
  background: #1a1a1a;  
  color: #666;  
  border: none;  
  cursor: pointer;  
  font-weight: bold;  
  border-bottom: 3px solid transparent;  
  transition: 0.2s;  
  font-size: 0.85rem;  
  text-transform: uppercase;  
  letter-spacing: 1px;  
}  
  
.tab:hover {  
  background: #222;  
  color: #fff;  
}  
  
.tab.active {  
  background: var(--s);  
  color: var(--p);  
  border-bottom: 3px solid var(--p);  
}  
  
/* ===== CONTENT ===== */  
  
.content {  
  flex: 1;  
  overflow-y: auto;  
  padding: 20px;  
  display: flex;  
  flex-direction: column;  
  gap: 15px;  
}  
  
.grp {  
  background: rgba(255, 255, 255, 0.02);  
  padding: 15px;  
  border-radius: 8px;  
  border: 1px solid #333;  
}  
  
.grp-title {  
  font-size: 0.7rem;  
  color: #888;  
  text-transform: uppercase;  
  margin-bottom: 10px;  
  font-weight: 700;  
  border-bottom: 1px solid #333;  
  padding-bottom: 5px;  
  display: block;  
  letter-spacing: 1px;  
}  
  
label {  
  display: flex;  
  justify-content: space-between;  
  font-size: 0.8rem;  
  margin-bottom: 6px;  
  color: #ccc;  
  align-items: center;  
}  
  
input[type="range"] {  
  width: 100%;  
  cursor: pointer;  
  accent-color: var(--p);  
  margin-bottom: 12px;  
  height: 4px;  
  background: #333;  
  border-radius: 2px;  
}  
  
select,  
input[type="text"],  
input[type="file"] {  
  width: 100%;  
  padding: 10px;  
  background: #222;  
  border: 1px solid #444;  
  color: #fff;  
  border-radius: 4px;  
  margin-bottom: 10px;  
  font-size: 13px;  
}  
  
.btn {  
  width: 100%;  
  padding: 14px;  
  border: none;  
  border-radius: 4px;  
  cursor: pointer;  
  font-weight: 800;  
  text-transform: uppercase;  
  transition: 0.2s;  
  margin-top: 10px;  
}  
  
.btn-act {  
  background: #2979ff;  
  color: #fff;  
}  
  
.btn-dl {  
  background: var(--p);  
  color: #000;  
  font-size: 1.1rem;  
  display: none;  
}  
  
/* ===== MAIN CANVAS AREA ===== */  
  
.main {  
  flex: 1;  
  background: #050505;  
  display: flex;  
  flex-direction: column;  
  position: relative;  
}  
  
.canv {  
  flex: 1;  
  display: flex;  
  justify-content: center;  
  align-items: center;  
  background: #0f0f0f;  
  background-image:  
    linear-gradient(#222 1px, transparent 1px),  
    linear-gradient(90deg, #222 1px, transparent 1px);  
  background-size: 40px 40px;  
  overflow: hidden;  
  pointer-events: none;    
}  
  
#previewWrapper {  
  width: 800px;  
  height: 600px;  
  background: white;  
  box-shadow: 0 0 50px #000;  
  position: relative;  
}  
  
canvas {  
  width: 100%;  
  height: 100%;  
}  
  
/* ===== STATUS / LOADING ===== */  
  
.status-pill {  
  position: absolute;  
  top: 10px;  
  right: 10px;  
  padding: 5px 10px;  
  border-radius: 4px;  
  font-weight: bold;  
  font-size: 12px;  
  z-index: 10;  
}  
  
.pill-pos {  
  background: black;  
  color: white;  
  border: 1px solid #ccc;  
}  
  
.pill-neg {  
  background: white;  
  color: black;  
  border: 1px solid #000;  
}  
  
#load {  
  position: absolute;  
  inset: 0;  
  background: rgba(0, 0, 0, 0.92);  
  color: var(--p);  
  display: none;  
  justify-content: center;  
  align-items: center;  
  flex-direction: column;  
  z-index: 100;  
}  
  
.spin {  
  width: 60px;  
  height: 60px;  
  border: 6px solid #333;  
  border-top: 6px solid var(--p);  
  border-radius: 50%;  
  animation: spin 0.8s linear infinite;  
}  
  
@keyframes spin {  
  to {  
    transform: rotate(360deg);  
  }  
}  
  
/* ===== TOGGLES / CHECKBOX ===== */  
  
.tog {  
  display: flex;  
  align-items: center;  
  gap: 12px;  
  background: #222;  
  padding: 10px;  
  border-radius: 4px;  
  margin-bottom: 10px;  
  cursor: pointer;  
  border: 1px solid #333;  
}  
  
input[type="checkbox"] {  
  transform: scale(1.4);  
  accent-color: var(--p);  
}  
  
/* ===== AUTH MODAL ===== */  
  
.auth-modal {  
  position: fixed;  
  inset: 0;  
  background: rgba(0, 0, 0, 0.75);  
  
  display: none;              /* default OFF */  
  align-items: center;        /* ✅ vertical center */  
  justify-content: center;    /* ✅ horizontal center */  
  
  z-index: 9000;  
}    
  
.auth-box {  
  background: #111;  
  border: 1px solid var(--p);  
  padding: 20px;  
  width: 280px;  
  text-align: center;  
}  
  
.auth-box input {  
  width: 100%;  
  margin-bottom: 10px;  
  background: #000;  
  color: var(--p);  
  border: 1px solid var(--p);  
  padding: 6px;  
}  
  
.auth-box button {  
  width: 100%;  
  margin-bottom: 6px;  
  background: var(--p);  
  color: #000;  
  border: none;  
  padding: 8px;  
  cursor: pointer;  
}  
  
/* Hide auth modal when logged in */  
body.logged-in .auth-modal {  
  display: none;  
}  
  
/* ===== PROFILE PANEL ===== */  
  
.profile-panel {  
  position: fixed;  
  top: 50%;  
  left: 50%;  
  transform: translate(-50%, -50%);
    
  
  z-index: 9999;  
  background: rgba(15, 15, 15, 0.96);  
  border: 1px solid #2a2a2a;  
  border-radius: 12px;  
  box-shadow: 0 0 30px rgba(0, 0, 0, 0.8);  
  
  min-width: 320px;  
}    
  
.profile-box {  
  background: #111;  
  border: 1px solid #333;  
  border-radius: 8px;  
  padding: 16px;  
  width: 260px;  
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.6);  
}  
  
.profile-box h3 {  
  margin: 0 0 12px;  
  color: var(--p);  
  font-size: 16px;  
  text-align: center;  
}  
  
.profile-row {  
  display: flex;  
  justify-content: space-between;  
  font-size: 13px;  
  margin-bottom: 8px;  
  color: #ccc;  
}  
  
.profile-row strong {  
  color: #fff;  
}  
  
.profile-box button {  
  width: 100%;  
  margin-top: 8px;  
}  
  
/* ===== HELPERS ===== */  
  
.hidden {  
  display: none !important;  
}  
  
.welcome-msg {  
  text-align: center;  
  padding: 20px;  
  border: 1px dashed #444;  
  color: #666;  
  font-weight: bold;  
  margin-top: 20px;  
}   

  
.profile-close:hover {  
  color: #fff;  
}  
.profile-header {  
  display: flex;  
  align-items: center;  
  justify-content: space-between;  
  margin-bottom: 12px;  
}  
/* ===== PROFILE HEADER ===== */  
  
.profile-header {  
  display: flex;  
  align-items: center;  
  justify-content: space-between;  
  margin-bottom: 12px;  
}  
  
.profile-close {  
  background: transparent;  
  border: none;  
  color: #aaa;  
  font-size: 18px;  
  cursor: pointer;  
  line-height: 1;  
  transition: color 0.15s ease;  
}  
  
.profile-close:hover {  
  color: #fff;  
}

/* =========================  
   AUTH FEEDBACK MESSAGES  
========================= */  
  
.auth-error,  
.auth-success {  
  width: 100%;  
  padding: 10px 12px;  
  margin: 10px 0;  
  border-radius: 6px;  
  font-size: 13px;  
  font-weight: 600;  
  text-align: center;  
}  
  
.auth-error {  
  background: rgba(255, 60, 60, 0.15);  
  border: 1px solid #ff4d4d;  
  color: #ffb3b3;  
}  
  
.auth-success {  
  background: rgba(0, 255, 140, 0.15);  
  border: 1px solid #00ff88;  
  color: #b6ffe0;  
}  
  
.hidden {  
  display: none !important;  
}  

/* =========================  
   AUTH ERROR POPUP (TOP LAYER)  
========================= */  
  
.auth-popup {  
  position: fixed;  
  inset: 0;  
  background: rgba(0,0,0,0.75);  
  z-index: 10000;  
  display: flex;  
  align-items: center;  
  justify-content: center;  
}        
  
.auth-popup-box {  
  background: #111;  
  border: 1px solid #ff4d4d;  
  padding: 24px 28px;  
  border-radius: 10px;  
  min-width: 280px;  
  max-width: 360px;  
  text-align: center;  
  box-shadow: 0 0 30px rgba(0, 0, 0, 0.8);  
}  
  
.auth-popup-box div {  
  color: #ffb3b3;  
  font-size: 14px;  
  font-weight: 600;  
  margin-bottom: 18px;  
}  
  
.auth-popup-box button {  
  background: #ff4d4d;  
  border: none;  
  padding: 8px 18px;  
  border-radius: 6px;  
  cursor: pointer;  
  font-weight: 700;  
}  
  
.auth-popup-box button:hover {  
  background: #ff6666;  
} 

.auth-modal {  
  display: none;  
}

/* AUTH TABS – FIX */  
.auth-tabs {  
  display: flex;  
  gap: 10px;  
  margin-bottom: 15px;  
}  
  
.auth-tabs button {  
  appearance: none;  
  background: none;  
  border: 1px solid #00ff99;  
  
  flex: 1;  
  text-align: center;  
  padding: 8px 0;  
  cursor: pointer;  
  
  color: #00ff99;  
  background: transparent;  
  font-size: 14px;  
}  

/* --- LOCKDOWN MODE (ZAVESA) --- */

/* Kad je zaključano, zamuti Sidebar i Main canvas */
body.locked-mode .sidebar, 
body.locked-mode .main {
    filter: blur(15px) grayscale(100%); /* Jako zamućenje i crno-belo */
    pointer-events: none; /* BLOKIRA SVE KLIKOVE */
    user-select: none;    /* Ne može se selektovati tekst */
}

/* Velika poruka preko ekrana */
body.locked-mode::after {
    content: "🔒 TRIAL EXPIRED";
    position: fixed;
    top: 50%; 
    left: 50%;
    transform: translate(-50%, -50%);
    background: rgba(0, 0, 0, 0.9);
    color: #ff4444;
    font-size: 50px;
    font-weight: 900;
    padding: 30px 60px;
    border: 3px solid #ff4444;
    border-radius: 12px;
    box-shadow: 0 0 50px rgba(255, 0, 0, 0.3);
    z-index: 9998; /* Visoko, ali ISPOD Profile Panela */
    pointer-events: auto; /* Dozvoli klik na ovo (ako zatreba) */
}

/* Osiguraj da Profile Panel uvek bude IZNAD zavese */
.profile-panel {
    z-index: 99999 !important;
}

.input-locked input,  
.input-locked textarea,  
.input-locked button.upload {  
  opacity: 0.5;  
  cursor: not-allowed;  
}

#previewWrapper {  
  pointer-events: none;  
}  
  
#previewWrapper canvas {  
  pointer-events: auto;  
}

/* ================================ */  
/* EMAIL VERIFICATION LOCK SCREEN */  
/* ================================ */  
  
.verify-screen {  
  position: fixed;  
  inset: 0;  
  background: #0b0b0b;  
  display: flex;  
  align-items: center;  
  justify-content: center;  
  z-index: 9999;  
}  
  
.verify-box {  
  max-width: 420px;  
  width: 90%;  
  background: #111;  
  border: 1px solid #333;  
  border-radius: 8px;  
  padding: 30px;  
  text-align: center;  
}  
  
.verify-box h2 {  
  color: #00ff88;  
}  
  
.hidden {  
  display: none !important;  
} 

/* ================================ */  
/* AUTH MODAL MUST ALWAYS BE ACTIVE */  
/* ================================ */  
#authModal,  
#authModal * {  
  pointer-events: auto !important;  
  cursor: auto !important;  
  opacity: 1 !important;  
}  

/* ================================ */  
/* AUTH MODAL – FORCE INTERACTION */  
/* ================================ */  
  
#authModal,  
#authModal * {  
  pointer-events: auto !important;  
  cursor: pointer !important;  
  user-select: auto !important;  
}  
  
/* Auth buttons explicitly enabled */  
#authModal button,  
#authModal .auth-tabs button {  
  pointer-events: auto !important;  
  cursor: pointer !important;  
  opacity: 1 !important;  
}  
  
/* Inputs keep normal cursor */  
#authModal input {  
  cursor: text !important;  
}  
/* URGENT SPAM NOTIFICATION BOX */
.spam-warning-box {
    background: rgba(255, 165, 0, 0.1);
    border: 2px dashed #ff9800;
    padding: 15px;
    border-radius: 10px;
    margin: 20px 0;
    color: #ff9800;
    font-size: 14px;
    line-height: 1.5;
    text-align: center;
}
.spam-warning-box strong {
    font-size: 16px;
    text-transform: uppercase;
    display: block;
    margin-bottom: 5px;
}

/* --- ERASER & UNDO STYLES --- */
.btn-undo { 
    background: #444 !important; 
    color: white !important; 
    margin-right: 5px; 
}

.btn-undo:hover { 
    background: #555 !important; 
}

.eraser-panel { 
    border: 1px dashed #00ff88; 
    padding: 12px; 
    margin-top: 10px; 
    border-radius: 8px; 
    background: rgba(0, 255, 136, 0.05); 
}

.eraser-desc { 
    font-size: 11px; 
    color: #aaa; 
    margin-bottom: 8px; 
    line-height: 1.3; 
}

/* Stil za Undo kad je aktivan (opciono) */
.undo-active { 
    background: #00ff88 !important; 
    color: black !important; 
}