:root{
  --bg: #000000;
  --panel: #1f1e1e;
  --accent: #00ff7f;      /* Neon Green */
  --accent-soft: #0aff87;

  /* NOVAS: Cores dos Marcadores (Laranja) */
  --mark-color: #ff8800;  /* Laranja para os Marks */
  --mark-bg: rgba(255, 136, 0, 0.1);
  --mark-glow: rgba(255, 136, 0, 0.3);
  --mark-soft: #ffaa33;

  --danger: #e80000;
  --shadow: 0 8px 20px rgba(0, 255, 150, 0.08);
  --radius: 12px;

  font-family:Inter, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
}

*{box-sizing:border-box}
html,body,#app{height:100%; margin:0;}

body{
  background:var(--bg);
  color:#e5e5e5;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

/* Layout geral */
#app{
  display:flex;
  gap:20px;
  padding:20px;
  height:100%;
}

/* Sidebar */
.sidebar{
  width:300px;
  background:var(--panel);
  border-radius:var(--radius);
  padding:16px;
  box-shadow:var(--shadow);
  display:flex;
  flex-direction:column;
  border:1px solid #111;
  height:calc(100vh - 40px);
  overflow:hidden;
}

.sidebar-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-bottom:12px;
}

.sidebar-header h1{
  font-size:18px;
  margin:0;
  color:#fff;
  font-weight:600;
  text-shadow:0 0 6px rgba(0,255,140,0.4);
}

.sidebar-header button{
  padding:8px 12px;
  border-radius:8px;
  background:var(--accent);
  color:#000;
  border:0;
  cursor:pointer;
  font-weight:600;
  transition:0.2s;
}
.sidebar-header button:hover{filter:brightness(1.15)}

/* Busca */
.search-box{margin:14px 0}
.search-box input{
  width:100%;
  padding:10px;
  border-radius:8px;
  border:1px solid #222;
  background:#0a0a0a;
  color:#ddd;
}

/* Lista de módulos */
.module-list{
  list-style:none;
  padding:0;
  margin:0;
  overflow-y:auto;
  flex:1;
}
.module-item{
  padding:12px;
  border-radius:10px;
  cursor:pointer;
  margin-bottom:10px;
  background:#0a0a0a;
  border:1px solid transparent;
  transition:0.2s;
}
.module-item:hover{border-color:#1a1a1a}
.module-item.active{
  background:#0f1f17;
  border:1px solid var(--accent);
  box-shadow:0 0 12px rgba(0,255,130,0.25);
}
.module-item .title{font-weight:600;color:#fff}
.module-item .subtitle{font-size:12px;color:#888}

/* Área principal */
.main-area{
  flex:1;
  display:flex;
  flex-direction:column;
  gap: 12px;
}

.topbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
}
.topbar input{
  flex:1;
  padding:10px;
  border-radius:8px;
  border:1px solid #222;
  background:#0a0a0a;
  color:#ddd;
}

.top-actions{display:flex; gap:8px; align-items:center;}

.btn{
  padding:10px 14px;
  border-radius:8px;
  background:var(--accent);
  color:#000;
  cursor:pointer;
  font-weight:600;
  position:relative;
  overflow:hidden;
  transition:0.2s;
}
.btn:hover{filter:brightness(1.15)}
.btn input{position:absolute;inset:0;opacity:0;cursor:pointer}

/* Ferramentas */
.tool{
  padding:8px 12px;
  border-radius:8px;
  border:1px solid #222;
  background:#151515;
  color:#ccc;
  cursor:pointer;
  transition:.2s;
}
.tool:hover{background:#1c1c1c}
.tool.active{
  background:var(--accent);
  color:#000;
  font-weight:600;
  border-color:transparent;
  box-shadow:0 0 10px rgba(0,255,130,0.25);
}

/* Editor lateral */
.module-info{
  width:100%;
  background:var(--panel);
  padding:16px;
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  display:flex;
  flex-direction:column;
  gap:12px;
  border:1px solid #111;
  margin-bottom: 24px;
}
.module-info input,
.module-info textarea{
  width:100%;
  padding:10px;
  border-radius:8px;
  border:1px solid #222;
  background:#0a0a0a;
  color:#ddd;
}
.module-info textarea{min-height:20px; resize:vertical;}

.info-actions{
  display:flex;
  justify-content:space-between;
  gap:10px;
}
.danger{
  background:var(--danger);
  color:rgb(244, 244, 244);
  border:0;
  padding:8px 12px;
  border-radius:8px;
  font-weight:600;
  cursor:pointer;
}


.stage-wrap{
  flex:1;
  min-height: clamp(500px, 80vh, 985px);
  display:flex;
  flex-direction:column;
}

.stage{
  flex:1;
  background:#1f1e1e;
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  overflow:hidden;
  position:relative;
  border:1px solid #111;
  touch-action:none;            /* essencial para mobile */
  cursor:default;
}

#stageContent{
  position:absolute;
  top:0; left:0;
  transform-origin:0 0;
  width:fit-content;           /* permite imagem crescer */
  height:fit-content;
}

/* Imagem */
#stageImg{
  display:block;
  max-width:none;              /* permite zoom > 100% */
  max-height:none;
  pointer-events:none;
  user-select:none;
}

/* Camada de marks */
#marksLayer{
  position:absolute;
  inset:0;
  pointer-events:none;
}
.mark{pointer-events:auto;}    /* só os marks recebem eventos */

/* Marks */
.mark{
  position:absolute;
  transform:translate(-50%,-50%);
  display:flex;
  align-items:center;
  gap:6px;
  user-select:none;
}
.mark .dot {
  width: 43px;
  height: 43px;
  border-radius: 10%;
  background: var(--mark-color);
  box-shadow: 0 0 10px var(--mark-glow);
  opacity: 0.5;
  cursor: zoom-in;
}

.mark .label{
  background:#111;
  padding:4px 8px;
  border-radius:6px;
  border:1px solid #222;
  font-size:13px;
  white-space:nowrap;
  color:#e5e5e5;
}

.mark.dragging{
  opacity:0.8;
  transform:translate(-50%,-50%) scale(1.1);
  z-index:10;
}

.hint{
  font-size:12px;
  color:#666;
  margin-top:8px;
}

/* Responsivo */
@media (max-width:1000px){
  #app{flex-direction:column; padding:12px;}
  .sidebar,.module-info{display:none}
  .stage-wrap{min-height:60vh}
}

/* Utilitário para esconder elementos */
.hidden {
  display: none !important;
}

/* Fundo escuro (Overlay) */
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 9999;
  display: flex;
  justify-content: center;
  align-items: center;
}

/* Caixa do Modal */
.modal-box {
  background-color: white;
  padding: 20px;
  border-radius: 8px;
  width: 350px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.modal-box h3 {
  margin: 0;
  font-size: 1.2rem;
  color: #333;
}

/* Formulários */
.form-group {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.form-group label {
  font-size: 0.9rem;
  font-weight: bold;
}

.form-group input, 
.form-group textarea {
  padding: 8px;
  border: 1px solid #ccc;
  border-radius: 4px;
}

/* Botões */
.modal-buttons {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
}

.btn-primary {
  background: linear-gradient(135deg, #2563EB, #1D4ED8);
  color: #ffffff;
  border: none;
  padding: 10px 20px;
  border-radius: 10px;
  cursor: pointer;
  

  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.3px;

  box-shadow: 0 2px 6px rgba(37, 99, 235, 0.25);
  transition:
    background 0.25s ease,
    transform 0.15s ease,
    box-shadow 0.2s ease;
}

/* Hover */
.btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 14px rgba(37, 99, 235, 0.35);
}

/* Active (clique) */
.btn-primary:active {
  transform: translateY(0);
  box-shadow: 0 3px 8px rgba(37, 99, 235, 0.3);
}

/* Focus (acessibilidade) */
.btn-primary:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.4);
}

/* Disabled */
.btn-primary:disabled {
  background: #93C5FD;
  cursor: not-allowed;
  box-shadow: none;
  opacity: 0.7;
}

/* Excluir (destrutivo) */
.btn-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  padding: 10px 20px;


  background-color:#DC2626;
  color:#ffffff;
  border:none;
  cursor:pointer;
  font-weight:500;
}

.btn-secondary:hover {
  background-color: #B91C1C;
}

/* Cancelar (neutro e discreto) */
.btn-neutral {
  background-color: transparent;
  color: #374151;
  border: 1px solid #D1D5DB;
  padding: 10px 20px;
  border-radius: 8px;
  cursor: pointer;
  font-weight: 500;
  transition: 
    background-color 0.2s ease,
    color 0.2s ease,
    border-color 0.2s ease;
}

.btn-neutral:hover {
  background-color: #F3F4F6;
  border-color: #9CA3AF;
}


/* ===== LOGIN ===== */


.login-wrapper {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.45);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
}

.login-card {
  width: 100%;
  max-width: 380px;
  background: #ffffff;
  border-radius: 10px;
  padding: 32px;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2);
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.login-card h2 {
  margin: 0 0 8px;
  font-size: 22px;
  font-weight: 600;
  text-align: center;
  color: #111;
}

.login-card .form-subtitle {
  margin: -8px 0 8px;
  text-align: center;
  font-size: 14px;
  color: #666;
}

.login-card .form-toggle-link {
  margin: 12px 0 -8px;
  text-align: center;
  font-size: 13px;
  color: #555;
}

.login-card .form-toggle-link a {
  color: var(--muted);
  font-weight: 600;
  text-decoration: none;
}
.login-card .form-toggle-link a:hover {
  text-decoration: underline;
}

.login-card input {
  height: 44px;
  padding: 0 12px;
  font-size: 14px;
  border-radius: 6px;
  border: 1px solid #ccc;
  outline: none;
  transition: border-color 0.2s, box-shadow 0.2s;
}

.login-card input:focus {
  border-color: #0aff87;
  box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.15);
}

.login-card button {
  height: 46px;
  margin-top: 8px;
  background: #0aff87;
  color: #fff;
  border: none;
  border-radius: 6px;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.2s, transform 0.1s;
}

.login-card button:hover {
  background: #0aff87;
}

.login-card button:active {
  transform: scale(0.98);
}

.project-selector {
  padding: 8px;
  border-bottom: 1px solid #ddd;
}

.project-selector select {
  width: 100%;
  padding: 6px;
}

.text-mark-rect {
  position: absolute;
  border: 2px dashed var(--mark-color);
  background: var(--mark-bg);
  border-radius: 8px;
  pointer-events: auto;
  transform: none !important;
}

/* Estilo base para todas as alças */
.text-mark-rect .resize-handle {
  position: absolute; /* Essencial para os cantos funcionarem */
  width: 10px;        /* Aumentei um pouco para facilitar o clique */
  height: 10px;
  background: var(--mark-color);
  border: 2px solid #000;
  border-radius: 50%;
  z-index: 10;
  transform: translate(-50%, -50%); /* Centraliza a bolinha exatamente no vértice */
}

/* Posicionamento específico de cada uma das 4 alças */
.text-mark-rect .resize-handle.nw { top: 0; left: 0; cursor: nw-resize; }
.text-mark-rect .resize-handle.ne { top: 0; right: 100%; cursor: ne-resize; } /* right 100% ou right 0 dependendo do contexto, use right: 0 */
.text-mark-rect .resize-handle.ne { top: 0; left: 100%; cursor: ne-resize; }
.text-mark-rect .resize-handle.sw { top: 100%; left: 0; cursor: sw-resize; }
.text-mark-rect .resize-handle.se { top: 100%; left: 100%; cursor: se-resize; }

.text-mark-rect:hover {
  border-color: var(--mark-soft); /* Troque var(--accent-soft) por isso */
  box-shadow: 0 0 12px var(--mark-glow);
}

/* === TEXT MARK LABEL (HOVER ONLY) === */

.text-mark-rect .label {
  opacity: 0;
  visibility: hidden;
  transform: translateY(-4px);
  transition: opacity 0.15s ease, transform 0.15s ease;
  pointer-events: none;
}

.text-mark-rect:hover .label {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

/* style.css */

.no-photo-message {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #151515;
  z-index: 100; /* Garante que fique acima do conteúdo móvel */
  pointer-events: all; /* Garante que cliques aqui não passem para o pan/zoom */
}

.no-photo-card {
  min-width: 300px;
  max-width: 450px;
  background: #1f1e1e;
  padding: 40px;
  border-radius: 16px;
  border: 1px dashed #444;
  box-shadow: 0 20px 50px rgba(0,0,0,0.5);
  pointer-events: auto; /* Intercepta o mouse */
}

.no-photo-card p {
  font-size: 20px;
  font-weight: 600;
  color: #ffffff;
  margin: 0 0 15px 0;
  white-space: normal; /* Garante que o texto quebre apenas quando necessário */
  line-height: 1.3;
}

.no-photo-card span {
  font-size: 15px;
  color: #aaa;
  line-height: 1.5;
  display: block;
  white-space: normal;
}