:root{
  /* Tema roxo integral — sem branco */
  --bg:#0b0720;           /* roxo muito escuro */
  --bg-2:#0d0a26;         /* camada base */
  --surface:#120d2e;      /* cartões/painéis */
  --ink:#f3eaff;          /* texto claro com leve tom lilás (não é branco puro) */
  --mut:#c2b5e8;          /* texto secundário */
  --line:rgba(243,234,255,.12); /* linhas com roxo claro translúcido */
  --soft:#160f38;         /* áreas suaves */
  --focus:rgba(167,139,250,.22); /* foco roxo */
  --brand:#8b5cf6;        /* roxo 500 */
  --accent:#a78bfa;       /* roxo 300 */
  --brand-deep:#6d28d9;   /* roxo 700 */
  --radius:18px;
  --shadow:0 10px 30px rgba(7,2,20,.55);
}

*{box-sizing:border-box}
html,body{height:100%}
html{scroll-behavior:smooth}
body{margin:0; font:16px/1.5 ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial; color:var(--ink); background:var(--bg); display:grid; grid-template-rows:auto 1fr auto}
header{position:sticky; top:0; z-index:50; backdrop-filter:blur(10px) saturate(140%); background:linear-gradient(180deg, rgba(61,33,122,.7), rgba(23,9,56,.6)); border-bottom:1px solid var(--line)}
.nav{max-width:1160px; margin:0 auto; padding:14px 20px; display:flex; align-items:center; justify-content:space-between; gap:12px}
.brand{display:flex; align-items:center; gap:10px; font-weight:900; letter-spacing:-.02em}
.logo{width:50px;height:50px;border-radius:10px; background:linear-gradient(135deg,#7c3aed,#a78bfa); box-shadow:0 0 0 6px rgba(167,139,250,.10); background-image:url('logo01.png'); background-size:cover; background-position:center;}
.tabs{display:flex; gap:6px; margin-left:18px}
.tab{padding:8px 12px; border:1px solid var(--line); border-radius:999px; text-decoration:none; color:var(--ink); background:rgba(167,139,250,.08)}
.tab:hover{box-shadow:0 0 0 6px var(--focus)}

/* Conteúdo */
main{padding:18px; background:var(--bg);}
.wrap{max-width:1160px; margin:0 auto; display:grid; grid-template-columns: 1fr 320px; gap:18px}
.rail{position:sticky; top:84px; height:fit-content}

/* Card */
.card{background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow)}

/* Feed */
.hero{padding:24px; background:linear-gradient(180deg, rgba(124,58,237,.12), rgba(109,40,217,.10));}
.hero h1{margin:0; font-size:clamp(28px,3.6vw,44px); line-height:1.06; letter-spacing:-.02em}
.hero .sub{color:var(--mut)}
.filters{display:flex; gap:10px; align-items:center; margin-top:12px}
.filters input, .filters select{padding:10px 12px; border:1px solid var(--line); border-radius:12px; background:#1a143d; color:var(--ink);}
.filters input:focus, .filters select:focus{box-shadow:0 0 0 6px var(--focus); outline:none}

.grid{display:grid; grid-template-columns:repeat(3,1fr); gap:16px; padding:18px}
.artifact{display:grid; gap:12px; padding:14px}
.thumb{aspect-ratio:4/3; border-radius:14px; border:1px solid var(--line); background:linear-gradient(180deg,#1d1349,#140b38); display:grid; place-items:center; font-weight:800; color:#c4b5fd}
.meta{display:flex; gap:10px; align-items:center; color:#9aa0a6; font-size:12px}
.chip{font-size:12px; padding:6px 10px; border-radius:999px; background:rgba(139,92,246,.14); border:1px solid var(--line); color:#e9d5ff}
.actions{display:flex; gap:10px; align-items:center}
.btn{appearance:none; border:1px solid transparent; background:linear-gradient(90deg,var(--brand-deep),var(--brand)); color:var(--ink); padding:10px 14px; border-radius:12px; font-weight:800; cursor:pointer; text-decoration:none; display:inline-flex; align-items:center; transition:transform .04s ease, box-shadow .2s ease}
.btn:hover{transform:translateY(-1px); box-shadow:0 8px 18px rgba(124,58,237,.24)}
.btn:focus{box-shadow:0 0 0 6px var(--focus)}
.btn-ghost{background:transparent; color:#e9d5ff; border:1px solid var(--line)}
.btn-ghost:hover{border-color:rgba(167,139,250,.45); box-shadow:0 6px 14px rgba(7,2,20,.6)}

/* Lateral */
.side-card{padding:16px}
.side-list{display:grid; gap:10px}

/* Projeto detalhe */
.project{display:grid; grid-template-columns:1.1fr .9fr; gap:18px; padding:18px}
.title{margin:0; font-size:clamp(22px,2.6vw,32px)}
.mut{color:var(--mut)}
.section{padding:18px}
.row{display:grid; gap:10px}

/* Tela de cotar */
.quote{display:grid; grid-template-columns:1fr 380px; gap:18px; padding:18px}
.form{display:grid; gap:12px}
label{font-weight:600}
input[type="text"], input[type="number"], textarea, select{width:100%; padding:12px 14px; border:1px solid var(--line); border-radius:12px; background:#1a143d; outline:none; color:var(--ink)}
textarea{min-height:120px; resize:vertical}
input:focus, select:focus, textarea:focus{box-shadow:0 0 0 6px var(--focus)}

/* Rodapé */
footer{border-top:1px solid var(--line); padding:16px 20px; color:var(--mut); background:var(--bg-2)}

/* Responsivo */
@media (max-width: 1100px){ .wrap{grid-template-columns:1fr} .project{grid-template-columns:1fr} .quote{grid-template-columns:1fr} .rail{position:static} }
@media (max-width: 720px){ .grid{grid-template-columns:1fr 1fr} }
@media (max-width: 520px){ .grid{grid-template-columns:1fr} .filters{flex-wrap:wrap} }