/* ═══════════════════════════════════════════════════════════════
   HD INFRASTRUCTURE — pub.css  v4
   CONCEPT: Old-school hacker index aesthetic, professionally executed
   Scope: [data-pub]
   ═══════════════════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Share+Tech+Mono&display=swap');

[data-pub] *, [data-pub] *::before, [data-pub] *::after {
  box-sizing: border-box; margin: 0; padding: 0;
}

[data-pub] {
  --bg:   #000;
  --bg1:  #050505;
  --bg2:  #0a0a0a;
  --g:    #00ff41;           /* phosphor green */
  --g2:   rgba(0,255,65,.55);
  --g3:   rgba(0,255,65,.22);
  --g4:   rgba(0,255,65,.08);
  --g5:   rgba(0,255,65,.04);
  --dim:  rgba(0,255,65,.38);
  --red:  #ff3131;
  --rdim: rgba(255,49,49,.35);
  --wht:  rgba(255,255,255,.9);

  --mono: 'Share Tech Mono', 'Courier New', Courier, monospace;

  font-family: var(--mono);
  font-size: 16px;
  line-height: 1.7;
  background: var(--bg);
  color: var(--g);
  overflow-x: hidden;
}

/* CRT scanline overlay */
[data-pub]::after {
  content: '';
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  background: repeating-linear-gradient(
    0deg,
    rgba(0,0,0,.18) 0px,
    rgba(0,0,0,.18) 1px,
    transparent 1px,
    transparent 4px
  );
  pointer-events: none;
  z-index: 9998;
}

[data-pub] a { color: var(--g); text-decoration: none; }
[data-pub] a:hover { text-decoration: underline; color: #fff; }

/* ── Override: filled / solid background buttons must keep their own text color ── */
[data-pub] .hx-nav-btn          { color: #000; text-decoration: none; }
[data-pub] .hx-nav-btn:hover    { color: #000; text-decoration: none; }
[data-pub] .hx-nav-btn-ghost          { color: var(--g); }
[data-pub] .hx-nav-btn-ghost:hover    { color: var(--g); text-decoration: none; }
[data-pub] .hx-btn-fill         { color: #000; text-decoration: none; }
[data-pub] .hx-btn-fill:hover   { color: #000; text-decoration: none; }
[data-pub] ::selection { background: var(--g); color: #000; }

/* ── text glow ── */
.hx-glow {
  text-shadow: 0 0 8px var(--g2), 0 0 20px var(--g4);
}
.hx-glow-hi {
  text-shadow: 0 0 6px rgba(0,255,65,.9), 0 0 16px var(--g3), 0 0 40px var(--g5);
}

/* ── Cursor blink ── */
.hx-cursor::after {
  content: '█';
  animation: hx-blink 1s step-end infinite;
  font-size: .85em;
}
@keyframes hx-blink { 0%,100%{opacity:1} 50%{opacity:0} }

/* ── Prompt line ── */
.hx-prompt::before { content: '> '; color: var(--dim); }

/* ═══════════════════════════════════════════════════════════════
   NAV / HEADER BAR
   ═══════════════════════════════════════════════════════════════ */

.hx-nav {
  position: fixed; top: 0; left: 0; right: 0;
  z-index: 200; height: 38px;
  border-bottom: 1px solid var(--g3);
  background: rgba(0,0,0,.96);
  display: flex; align-items: center;
  padding: 0 1.5rem; gap: 0;
}

.hx-nav-brand {
  font-family: var(--mono);
  font-size: .9rem; font-weight: 700;
  color: #fff; letter-spacing: .08em;
  margin-right: 2rem; flex-shrink: 0;
  text-shadow: 0 0 10px rgba(255,255,255,.4);
}
.hx-nav-brand span { color: var(--g); }

.hx-nav-links {
  display: flex; gap: 0;
  flex: 1;
}
.hx-nav-links a {
  padding: 0 1rem; height: 38px;
  display: inline-flex; align-items: center;
  font-size: .8rem; letter-spacing: .06em;
  text-transform: uppercase; color: var(--dim);
  border-right: 1px solid var(--g5);
  transition: color .1s, background .1s;
  text-decoration: none;
}
.hx-nav-links a:hover { color: var(--g); background: var(--g5); text-decoration: none; }

.hx-nav-right {
  display: flex; align-items: center; gap: 1rem;
  margin-left: auto;
}
.hx-nav-status {
  font-size: .75rem; color: var(--dim); letter-spacing: .06em;
  display: flex; align-items: center; gap: .4rem;
}
.hx-nav-status::before {
  content: '●'; color: var(--g); font-size: .45rem;
  animation: hx-blink 2s step-end infinite;
}

.hx-nav-btn {
  font-family: var(--mono);
  font-size: .8rem; color: #000;
  background: var(--g); padding: .25rem .9rem;
  border: none; cursor: pointer;
  text-decoration: none;
  transition: background .1s;
}
.hx-nav-btn:hover { background: #fff; color: #000; text-decoration: none; }

.hx-nav-btn-ghost {
  background: transparent; color: var(--g);
  border: 1px solid var(--g3);
}
.hx-nav-btn-ghost:hover { background: var(--g4); color: var(--g); text-decoration: none; }

.hx-ham {
  display: none; background: none; border: none;
  color: var(--g); cursor: pointer; font-size: 1.1rem;
  font-family: var(--mono); margin-left: auto; padding: .2rem;
}

.hx-mob {
  display: none; flex-direction: column;
  position: fixed; top: 38px; left: 0; right: 0; z-index: 199;
  background: #000; border-bottom: 1px solid var(--g3);
  padding: 1rem 1.5rem; gap: 0;
}
.hx-mob.open { display: flex; }
.hx-mob a {
  padding: .65rem 0; font-size: .9rem; color: var(--dim);
  border-bottom: 1px solid var(--g5);
  letter-spacing: .04em;
}
.hx-mob a:last-child { border-bottom: none; }
.hx-mob a:hover { color: var(--g); text-decoration: none; }

/* ═══════════════════════════════════════════════════════════════
   INNER PAGE (pub_layout.php pages)
   ═══════════════════════════════════════════════════════════════ */

.hx-page { margin-top: 38px; padding: 0 2rem; max-width: 1000px; margin-left: auto; margin-right: auto; }

.hx-page-top {
  padding: 3rem 0 2rem;
  border-bottom: 1px solid var(--g3);
}

.hx-page-label {
  font-size: .75rem; color: var(--dim); letter-spacing: .12em;
  text-transform: uppercase; margin-bottom: 1rem;
}
.hx-page-label::before { content: '// '; color: var(--g3); }

.hx-page-h1 {
  font-family: var(--mono);
  font-size: clamp(1.5rem, 4vw, 2.5rem);
  font-weight: normal; color: #fff;
  text-shadow: 0 0 12px rgba(255,255,255,.25);
  letter-spacing: .04em; text-transform: uppercase;
  margin-bottom: .5rem; line-height: 1.15;
}

.hx-page-desc {
  font-size: .92rem; color: var(--dim); line-height: 1.75;
  max-width: 580px;
}
.hx-page-desc::before { content: '> '; }

.hx-content { padding: 2.5rem 0; }

/* ── Sections within inner pages ── */
.hx-block { margin-bottom: 3.5rem; }

.hx-block-head {
  color: var(--dim); font-size: .78rem;
  letter-spacing: .1em; text-transform: uppercase;
  padding-bottom: .65rem;
  border-bottom: 1px solid var(--g3);
  margin-bottom: 1.5rem;
}
.hx-block-head::before { content: '## '; color: var(--g3); }

.hx-prose {
  color: var(--dim); font-size: .94rem; line-height: 1.85;
}
.hx-prose p { margin-bottom: 1.2rem; }
.hx-prose p:last-child { margin-bottom: 0; }
.hx-prose h3 {
  color: #fff; font-size: .88rem; font-weight: normal;
  text-transform: uppercase; letter-spacing: .1em;
  margin: 2rem 0 .6rem;
}
.hx-prose h3::before { content: '// '; color: var(--g3); }
.hx-prose ul { list-style: none; padding: 0; margin-bottom: 1.1rem; }
.hx-prose ul li { padding-left: 1.5rem; margin-bottom: .4rem; position: relative; }
.hx-prose ul li::before {
  content: '*'; position: absolute; left: 0; color: var(--g);
}
.hx-prose a { color: var(--g); }
.hx-prose a:hover { color: #fff; }

/* ── Terminal table ── */
.hx-tbl { width: 100%; border-collapse: collapse; font-size: .86rem; }
.hx-tbl thead tr { border-bottom: 1px solid var(--g3); }
.hx-tbl thead th {
  padding: .65rem 1rem; text-align: left;
  color: var(--dim); font-weight: normal;
  text-transform: uppercase; letter-spacing: .08em;
}
.hx-tbl tbody tr {
  border-bottom: 1px solid var(--g5);
  transition: background .1s;
}
.hx-tbl tbody tr:last-child { border-bottom: none; }
.hx-tbl tbody tr:hover { background: var(--g5); }
.hx-tbl td { padding: .7rem 1rem; color: var(--dim); }
.hx-tbl .td-key { color: var(--g); }
.hx-tbl .td-on { color: var(--g); }
.hx-tbl .td-off { color: rgba(0,255,65,.2); }

/* ── Buttons ── */
.hx-btn {
  display: inline-flex; align-items: center; gap: .35rem;
  padding: .45rem 1.1rem;
  font-family: var(--mono); font-size: .84rem;
  cursor: pointer; text-decoration: none; border: none;
  transition: all .1s;
  text-transform: uppercase; letter-spacing: .06em;
}
.hx-btn-fill { background: var(--g); color: #000; }
.hx-btn-fill:hover { background: #fff; color: #000; text-decoration: none; }
.hx-btn-line { background: transparent; color: var(--g); border: 1px solid var(--g3); }
.hx-btn-line:hover { background: var(--g4); color: var(--g); text-decoration: none; }

/* ═══════════════════════════════════════════════════════════════
   AUTH PAGES
   ═══════════════════════════════════════════════════════════════ */

.hx-auth-wrap {
  min-height: 100vh; margin-top: 38px;
  display: flex; align-items: center; justify-content: center;
  padding: 2rem;
}
.hx-auth-box { width: 100%; max-width: 380px; }

.hx-auth-banner {
  border: 1px solid var(--g3);
  padding: 1.25rem 1.5rem;
  margin-bottom: 1.5rem;
  background: var(--g5);
  font-size: .86rem; color: var(--dim); line-height: 1.75;
}
.hx-auth-banner-title {
  color: #fff; font-size: 1rem; margin-bottom: .5rem;
  text-transform: uppercase; letter-spacing: .06em;
}

.hx-auth-label {
  font-size: .74rem; color: var(--dim);
  text-transform: uppercase; letter-spacing: .12em;
  display: block; margin-bottom: .4rem;
}
.hx-auth-label::before { content: '$ '; color: var(--g3); }

.hx-inp {
  width: 100%;
  background: var(--bg1); color: var(--g);
  border: 1px solid var(--g3); outline: none;
  font-family: var(--mono); font-size: .92rem;
  padding: .55rem .85rem; margin-bottom: .9rem;
  caret-color: var(--g);
}
.hx-inp:focus { border-color: var(--g); }
.hx-inp::placeholder { color: var(--g4); }

.hx-auth-submit {
  width: 100%; padding: .62rem;
  background: var(--g); color: #000;
  font-family: var(--mono); font-size: .9rem;
  text-transform: uppercase; letter-spacing: .08em;
  border: none; cursor: pointer; transition: background .1s;
}
.hx-auth-submit:hover { background: #fff; }

.hx-auth-err {
  border: 1px solid var(--rdim);
  background: rgba(255,49,49,.05);
  padding: .75rem 1rem; margin-bottom: 1.1rem;
  font-size: .84rem; color: var(--red); list-style: none;
}
.hx-auth-err li::before { content: '! '; }

.hx-auth-ok {
  border: 1px solid var(--g3);
  background: var(--g5);
  padding: .75rem 1rem; margin-bottom: 1.1rem;
  font-size: .84rem; color: var(--g);
}
.hx-auth-ok::before { content: '> '; }

.hx-auth-foot {
  margin-top: 1rem; font-size: .78rem;
  color: var(--dim); text-align: center;
}

/* ═══════════════════════════════════════════════════════════════
   FOOTER
   ═══════════════════════════════════════════════════════════════ */

.hx-footer {
  border-top: 1px solid var(--g3);
  padding: 1.5rem 2rem;
  max-width: 1000px; margin: 0 auto;
  display: flex; align-items: center;
  justify-content: space-between; gap: 1.5rem;
  flex-wrap: wrap;
}
.hx-footer-brand { font-size: .78rem; color: var(--g3); letter-spacing: .06em; }
.hx-footer-nav { display: flex; gap: 1.25rem; flex-wrap: wrap; }
.hx-footer-nav a { font-size: .78rem; color: var(--dim); letter-spacing: .04em; }
.hx-footer-nav a:hover { color: var(--g); text-decoration: none; }
.hx-footer-copy { font-size: .7rem; color: var(--g3); }

/* ═══════════════════════════════════════════════════════════════
   RESPONSIVE
   ═══════════════════════════════════════════════════════════════ */

@media (max-width: 800px) {
  .hx-nav-links { display: none; }
  .hx-nav-right .hx-nav-btn, .hx-nav-right .hx-nav-btn-ghost { display: none; }
  .hx-ham { display: flex; }
  [data-pub] { font-size: 15px; }
}
@media (max-width: 520px) {
  .hx-nav { padding: 0 1rem; }
  .hx-page { padding: 0 1rem; }
  .hx-footer { padding: 1.25rem 1rem; flex-direction: column; align-items: flex-start; }
  .hx-auth-wrap { padding: 1rem; }
}