/* Tokens en assets/design-tokens.css. Tier asignado en el home: COMMON. */
:root{ --accent: var(--common); }

*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
body{
  background:var(--void);
  color:var(--ink);
  font-family:var(--font-body);
  min-height:100vh;
  position:relative;
  padding:32px 20px 80px;
}
body::before{
  content:"";
  position:fixed; inset:0; pointer-events:none; z-index:0;
  background-image:
    linear-gradient(rgba(124,92,255,0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(124,92,255,0.05) 1px, transparent 1px);
  background-size:44px 44px;
  mask-image: radial-gradient(ellipse 70% 60% at 50% 20%, black 0%, transparent 75%);
}
.wrap{position:relative; z-index:1; max-width:820px; margin:0 auto;}

.topbar{text-align:left; margin-bottom:28px;}
.kicker{
  font-family:var(--font-mono);
  font-size:12px;
  letter-spacing:0.14em;
  color:var(--holo-b);
  margin-bottom:10px;
}
h1{
  font-family:var(--font-display);
  font-weight:700;
  font-size:clamp(28px,5vw,38px);
  letter-spacing:0.02em;
  margin:0 0 8px;
}
h1 .accent{ color: var(--accent); }
.subtitle{ color:var(--muted); font-size:14.5px; margin:0; line-height:1.5; }

/* ---------- Dropzone ---------- */
.dropzone{
  position:relative;
  display:flex; flex-direction:column; align-items:center;
  border:1.5px dashed var(--panel-border);
  border-radius: var(--radius-md);
  background: linear-gradient(180deg, var(--panel), var(--void-2));
  padding:44px 24px;
  text-align:center;
  cursor:pointer;
  margin:24px 0 20px;
  transition: border-color var(--transition-fast), background var(--transition-fast);
}
.dropzone:hover, .dropzone.drag-over{
  border-color:var(--accent);
}
.dropzone svg{ width:34px; height:34px; color:var(--accent); margin-bottom:12px; }
.dropzone-title{ font-family:var(--font-display); font-weight:600; font-size:16px; margin-bottom:4px; }
.dropzone-sub{ color:var(--muted); font-size:12.5px; }
.dropzone input{ display:none; }

.status-msg{
  text-align:center;
  font-family:var(--font-mono);
  font-size:12px;
  color:var(--danger);
  margin:-8px 0 16px;
  min-height:1em;
}

.file-pill{
  display:none;
  align-items:center;
  gap:8px;
  font-family:var(--font-mono);
  font-size:12px;
  color:var(--muted);
  margin-bottom:16px;
}
.file-pill.visible{ display:inline-flex; }
.file-pill svg{ width:14px; height:14px; color:var(--accent); }

#content {
  position:relative;
  background: linear-gradient(180deg, var(--panel), var(--void-2));
  border:1px solid var(--panel-border);
  border-radius: var(--radius-lg);
  padding: 28px 32px;
  box-shadow: var(--shadow-md);
  line-height:1.65;
}
#content.empty{
  color:var(--muted);
  font-family:var(--font-mono);
  font-size:13px;
  text-align:center;
  padding:48px 24px;
}
#content h1, #content h2, #content h3{ font-family:var(--font-display); }
#content a{ color: var(--holo-b); }
#content code{
  font-family:var(--font-mono);
  background: var(--void-2);
  padding: 2px 6px;
  border-radius: 4px;
  font-size: 0.9em;
}
#content pre{
  background: var(--void-2);
  border:1px solid var(--panel-border);
  border-radius: var(--radius-sm);
  padding:14px 16px;
  overflow-x:auto;
}
#content pre code{ background:none; padding:0; }
#content blockquote{
  border-left:3px solid var(--accent);
  margin:0;
  padding:2px 16px;
  color:var(--muted);
}
#content table{ border-collapse:collapse; width:100%; }
#content th, #content td{ border:1px solid var(--panel-border); padding:6px 10px; text-align:left; }

.site-footer{
  position:relative; z-index:1;
  margin-top:32px;
  color:var(--muted);
  font-family:var(--font-mono);
  font-size:11.5px;
  text-align:center;
}