@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;600;700;800&display=swap');

:root{
  --azul:#000525; --amarelo:#ffc420; --branco:#fff; --highlight:#ff1d50;
  --panel:#0b1030; --panel-2:#0f1b3f; --borda:#2a3669; --shadow:rgba(0,0,0,.35);
  --radius:14px; --t-fast:.2s ease; --t-med:.3s ease;
}

*{ box-sizing:border-box }
body{ margin:0; background:var(--azul); color:var(--branco); font-family:Poppins,system-ui,sans-serif }
main{ padding: clamp(16px, 3vw, 24px); }

/* ===== Header ===== */
.prog-container{
  max-width:min(1280px, 96vw);
  margin: clamp(72px, 10vw, 110px) auto clamp(28px, 6vw, 60px);
}
.prog-header{
  display:flex; flex-wrap:wrap; gap:12px; align-items:center; justify-content:space-between;
}
.prog-header h1{
  margin:0; color:var(--amarelo);
  font-size: clamp(1.6rem, 3.8vw, 2.4rem);
  letter-spacing:.5px;
}
.prog-header .meta{ display:flex; gap:10px; flex-wrap:wrap }
.prog-header input{
  background:#0c1540; color:#fff; border:1px solid var(--borda); border-radius:10px;
  padding:10px 12px; outline:none; width: clamp(200px, 40vw, 320px);
}
.prog-header input:focus{ border-color:var(--amarelo); box-shadow:0 0 0 3px rgba(255,196,32,.25) }

/* ===== Workspace (Sidebar + Canvas) ===== */
.workspace{
  display:grid; grid-template-columns: 320px 1fr; gap: clamp(12px, 2vw, 18px); margin-top:14px;
}
@media (max-width: 980px){ .workspace{ grid-template-columns:1fr } }

.sidebar{
  background:var(--panel); border:1px solid var(--borda); border-radius:16px; padding:14px;
  box-shadow:0 8px 22px var(--shadow); height: fit-content;
}
.file-label{
  display:inline-block; background:#141f4f; border:1px solid var(--borda); padding:10px 12px; border-radius:10px; cursor:pointer;
}

.btn{
  background:#141f4f; border:1px solid var(--borda); color:#fff; padding:10px 12px; border-radius:10px;
  cursor:pointer; transition:background var(--t-fast), transform var(--t-fast), box-shadow var(--t-fast);
  box-shadow:0 6px 16px rgba(0,0,0,.25);
  font-size: clamp(.9rem, 2.2vw, 1rem);
}
.btn:hover{ background:#1a2a6b; transform:translateY(-1px) }
.btn.primary{ background:var(--amarelo); color:var(--azul); border:none }
.btn.primary:hover{ filter:brightness(1.05) }
.btn.active{ outline:2px solid var(--amarelo) }

/* ===== Ferramentas ===== */
.tools{
  margin-top:12px; padding:10px; border-radius:12px; background:var(--panel-2); border:1px solid var(--borda);
}
.tools h3{ margin:4px 0 10px; font-size: clamp(1rem, 2.6vw, 1.15rem); }
.tools .row{
  display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:10px; flex-wrap:wrap;
}
.tools .buttons{ display:flex; gap:8px; flex-wrap:wrap }
.actions{ display:flex; gap:8px; margin:10px 0 12px; flex-wrap:wrap }

/* ===== Lista lateral ===== */
.list-title{ margin:12px 0 8px; font-size: clamp(1rem, 2.6vw, 1.1rem); }
.estr-list{
  list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:8px;
  max-height: clamp(220px, 38svh, 420px); overflow:auto; /* altura adaptativa */
  overscroll-behavior: contain;
}
.estr-item{
  display:flex; align-items:center; justify-content:space-between; gap:8px; background:#0c1540; border:1px solid var(--borda);
  border-radius:10px; padding:8px 10px;
}
.estr-item .meta{ font-size:.85rem; opacity:.9 }
.estr-item .name{ font-weight:700; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width: 60% }
.estr-item .row{ display:flex; gap:6px; flex-wrap:wrap }

/* ===== Canvas ===== */
.canvas-wrap{
  position:relative; background:#020617; border-radius:16px; border:1px solid var(--borda);
  min-height: clamp(360px, 50svh, 560px);
  box-shadow:0 10px 26px var(--shadow); overflow:hidden;
}
#bgCanvas, #drawCanvas{ position:absolute; inset:0; width:100%; height:100% }
#drawCanvas{ cursor: crosshair }

/* ===== Mobile refinements ===== */
@media (max-width: 980px){
  .sidebar{ order:2 }
  .canvas-wrap{ order:1; min-height: clamp(320px, 48svh, 520px) }
  .actions .btn, .tools .buttons .btn{ flex: 1 1 auto; text-align:center }
}

@media (max-width: 600px){
  .prog-header{ gap: 10px }
  .prog-header .meta{ width:100% }
  .prog-header input{ width:100% }             /* search 100% no mobile */
  .estr-item .name{ max-width: 100% }          /* evita corte agressivo */
}

/* Acessibilidade + menos animação */
@media (prefers-reduced-motion: reduce){
  *{ transition: none !important }
}