/* Best Self Hosting: terminal theme.
   Layered on top of site.css. Remove this file's <link> to return to the light theme.
   Readability first: sans-serif body text, monospace only for prompts, labels and code. */
:root{
  --bg:#0d1117;
  --panel:#161b22;
  --panel-2:#1c2330;
  --ink:#e6edf3;
  --navy:#010409;
  --muted:#9da7b3;
  --blue:#3fb950;          /* primary accent (prompt green) */
  --blue-dark:#2ea043;
  --blue-soft:rgba(63,185,80,.10);
  --link:#79c0ff;
  --border:#30363d;
  --good:#3fb950;
  --warn:#d29922;
  --radius:10px;
  color-scheme:dark;
}
body{background:var(--bg);color:var(--ink)}
body::before{content:"";position:fixed;inset:0;pointer-events:none;z-index:-1;
  background:radial-gradient(1200px 600px at 85% -10%,rgba(63,185,80,.07),transparent 60%),
             radial-gradient(900px 500px at -10% 30%,rgba(121,192,255,.05),transparent 60%)}
::selection{background:rgba(63,185,80,.35);color:#fff}
a{color:var(--link)}
a:focus-visible,button:focus-visible,summary:focus-visible{outline-color:var(--blue)}

/* Cursor + prompt pieces */
.cursor{display:inline-block;width:.6em;height:1.05em;background:var(--blue);vertical-align:-.15em;margin-left:.12em;animation:blink 1.1s steps(1) infinite}
@keyframes blink{50%{opacity:0}}
.ps1{color:var(--blue);font-family:var(--mono);font-weight:600}
.prompt-line{font-family:var(--mono);font-size:.95rem;color:var(--muted);margin-bottom:16px}
.prompt-line .cmd{color:var(--ink)}

/* Header */
.site-header{background:rgba(13,17,23,.88);border-bottom-color:var(--border)}
.logo{color:var(--ink);font-family:var(--mono)}
.logo .icon{display:block;width:26px}
.brand{font-family:var(--mono);font-size:1rem;font-weight:700;letter-spacing:-.01em;white-space:nowrap}
.brand .path{color:var(--muted);font-weight:500}
.brand .cursor{width:.55em;height:1em}
.nav-links{gap:6px}
.nav-links a{font-family:var(--mono);font-size:.88rem;font-weight:500;color:var(--muted);padding:7px 12px;border-radius:8px;border:1px solid transparent}
.nav-links a:hover{color:var(--ink);background:var(--panel);text-decoration:none}
.nav-links a[aria-current="page"]{color:var(--blue);border-color:rgba(63,185,80,.35);background:var(--blue-soft)}
.nav-links a[aria-current="page"]::before{content:"./";opacity:.7}
.hamburger span{background:var(--ink)}
.mobile-menu{background:var(--bg);border-top-color:var(--border)}
.mobile-menu a{color:var(--ink);font-family:var(--mono)}
.mobile-menu a:hover{background:var(--panel)}

/* Buttons: terminal commands, but labelled in plain words */
.btn{font-family:var(--mono);font-weight:600;border-radius:8px;letter-spacing:-.01em}
.btn-primary{background:var(--blue);color:#06200f}
.btn-primary:hover{background:#56d364}
.btn-primary::before{content:"$";opacity:.65;margin-right:-2px}
.btn-outline{background:transparent;color:var(--ink);border-color:var(--border)}
.btn-outline:hover{background:var(--panel);border-color:var(--muted)}

/* Type */
h1{color:#f0f6fc}
.eyebrow,.post .cat{font-family:var(--mono);letter-spacing:.04em;text-transform:lowercase;color:var(--blue)}
.eyebrow::before,.post .cat::before{content:"# ";opacity:.6}
.section-head h2::before{content:"> ";color:var(--blue);font-family:var(--mono);font-weight:600}
.section-head p,.index-head .sub{color:var(--muted)}
.section-link{font-family:var(--mono);color:var(--blue)}

/* Hero */
.hero p.lede{color:var(--muted)}
.hero-img{position:relative;border-color:var(--border);border-radius:12px;background:var(--panel);box-shadow:0 30px 80px -40px rgba(0,0,0,.8);padding-top:34px}
.hero-img::before{content:"● ● ●   ~/workstation";position:absolute;top:0;left:0;right:0;height:34px;line-height:34px;padding-left:14px;font:500 .75rem var(--mono);color:var(--muted);background:var(--panel-2);border-bottom:1px solid var(--border);letter-spacing:.06em}
.hero-terminal{background:#010409}
.hero-terminal::before{content:"● ● ●   ~/uptime-kuma — bash"}
.terminal-screen{min-height:360px;padding:24px;display:flex;flex-direction:column;justify-content:center;background:#010409;font:500 .78rem/1.9 var(--mono)}
.terminal-line{min-height:1.9em;color:#c9d1d9;white-space:pre-wrap;overflow-wrap:anywhere}
.terminal-command{display:flex;flex-wrap:wrap;column-gap:.65rem}
.terminal-prompt{color:var(--blue);flex:none}
.terminal-copy{color:#e6edf3}
.terminal-output .terminal-copy{color:#7d8590}
.terminal-success .terminal-copy{color:var(--good)}
.terminal-final .terminal-copy{color:var(--link)}
.terminal-cursor{display:inline-block;width:.55em;height:1.05em;margin-left:.2em;background:var(--blue);vertical-align:-.15em;animation:blink 1.1s steps(1) infinite}
@media (max-width:600px){.terminal-screen{min-height:330px;padding:20px 14px;font-size:.67rem}}
.trust strong{color:var(--ink);font-family:var(--mono)}
.trust span{color:var(--muted)}

/* Steps strip: a numbered checklist */
.steps-strip{background:var(--panel);border-color:var(--border)}
.step-num{border-radius:8px;background:transparent;border:1px solid rgba(63,185,80,.45);color:var(--blue);font-family:var(--mono)}
.step h3 a{color:var(--ink)}
.step p{color:var(--muted)}

/* Cards and post tiles as terminal windows */
.card,.post,.related a,.prov,.faq details,.guide-card{background:var(--panel);border-color:var(--border)}
.card{position:relative;padding-top:42px}
.card::before{content:"● ● ●";position:absolute;top:12px;left:16px;font-size:.6rem;letter-spacing:3px;color:#484f58}
.card:hover,.post:hover{transform:translateY(-3px);border-color:rgba(63,185,80,.55);box-shadow:0 0 0 1px rgba(63,185,80,.15),0 20px 40px -24px rgba(0,0,0,.8)}
.icon-tile{background:var(--panel-2);border:1px solid var(--border)}
.card h3 a,.post strong,.related strong,.guide strong{color:var(--ink)}
.card p,.post span.date,.related span,.guide span{color:var(--muted)}
.card .more,.repo-links a{font-family:var(--mono);font-weight:600}
.thumb{border-bottom-color:var(--border);background:var(--panel-2)}
.repos-section{background:transparent;border-color:var(--border)}
.compare-banner{background:var(--panel);border-color:rgba(63,185,80,.35)}
.compare-banner p{color:var(--muted)}

/* Index lists */
.group h2{border-bottom-color:var(--border)}
.guide{border-bottom-color:var(--border)}
.guide:hover strong{color:var(--blue)}
.guide .arrow{color:var(--blue)}

/* Breadcrumb as a path */
.breadcrumb{font-family:var(--mono);font-size:.82rem}
.breadcrumb a{color:var(--muted)}
.breadcrumb a:hover{color:var(--blue)}

/* Articles */
.meta{font-family:var(--mono);font-size:.8rem}
.article-body{color:#d1d9e0}
.article-body strong{color:#f0f6fc}
.article-body h2,.article-body h3{color:#f0f6fc}
.article-body h2::before{content:"## ";color:var(--blue);font-family:var(--mono);font-weight:600;opacity:.8}
.article-body a{color:var(--link)}
.tested-on{background:var(--panel);border-color:var(--border);color:var(--muted);font-family:var(--mono);font-size:.8rem}
pre{background:#010409;border:1px solid var(--border);color:#e6edf3}
pre .cm{color:#7d8590}
code{background:var(--panel-2);color:#ffa657;border:1px solid var(--border)}
pre code{border:0;color:inherit}
.callout{background:var(--blue-soft);border-left-color:var(--blue);color:var(--ink)}
.callout.warn{background:rgba(210,153,34,.10);border-color:var(--warn)}
.callout.good{background:rgba(63,185,80,.10);border-color:var(--good)}
th,td{border-color:var(--border)}
th{background:var(--panel-2);color:#f0f6fc;font-family:var(--mono);font-size:.82rem;font-weight:600}
td{background:var(--panel)}
.faq details p,.page p,.page li{color:#c9d1d9}
.faq summary::after{color:var(--blue)}
.sources{color:var(--muted)}

/* Footer as a status bar */
.site-footer{background:#010409;border-top:1px solid var(--border)}
.site-footer h4{font-family:var(--mono);text-transform:none;letter-spacing:0;color:var(--blue)}
.site-footer h4::before{content:"~/";opacity:.6}
.site-footer a{color:#c9d1d9}
.site-footer a:hover{color:var(--blue)}
.foot-bottom{border-top-color:var(--border);font-family:var(--mono);font-size:.76rem}
.foot-bottom span:first-child::before{content:"● ";color:var(--blue)}

/* Post-page extras (blog-extras.css) on dark */
.takeaways{background:var(--panel);border-color:var(--border);border-left-color:var(--blue)}
.takeaways h2{color:var(--blue);font-family:var(--mono);text-transform:none;letter-spacing:0}
.takeaways h2::before{content:"$ cat ";opacity:.6}
.toc{background:var(--panel);border-color:var(--border)}
.toc summary{font-family:var(--mono);font-size:.85rem}
.toc a{color:var(--muted)}
.author-box{background:var(--panel);border-color:var(--border)}
.author-box img{background:var(--panel-2)}
.post-hero{border-color:var(--border);background:var(--panel)}

/* "Next step" block */
.next-step{display:flex;gap:16px;align-items:center;justify-content:space-between;flex-wrap:wrap;margin:44px 0 0;padding:20px 22px;border:1px solid rgba(63,185,80,.45);border-radius:var(--radius);background:linear-gradient(90deg,rgba(63,185,80,.10),transparent);text-decoration:none}
.next-step:hover{text-decoration:none;border-color:var(--blue)}
.next-step .ns-label{font-family:var(--mono);font-size:.8rem;color:var(--blue)}
.next-step .ns-label::before{content:"$ next  ";opacity:.6}
.next-step strong{display:block;color:var(--ink);font-size:1.08rem;margin-top:2px}
.next-step span.ns-desc{color:var(--muted);font-size:.9rem}
.next-step .ns-go{font-family:var(--mono);color:var(--blue);font-weight:600;white-space:nowrap}

@media (max-width:600px){
  .brand .path{display:none}
  .logo img.icon{display:block}
}
@media (prefers-reduced-motion:reduce){.cursor{animation:none}}
.hero-actions .btn{font-size:.88rem;padding:12px 18px}

/* Apps index grids (classes used by apps/index.html) */
.card-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;margin-top:24px}
.card-grid .card h3{margin-bottom:6px}
.card-grid .card p:last-child{margin-top:auto;font-family:var(--mono);font-size:.84rem}
.feature-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin-top:16px}
.feature{background:var(--panel);border:1px solid var(--border);border-radius:var(--radius);padding:18px 20px}
.feature h3{font-size:1rem;margin-bottom:6px;font-family:var(--mono);color:var(--blue)}
.feature p{font-size:.9rem;color:var(--muted)}
.lede{color:var(--muted);font-size:1.06rem;margin-top:10px}
@media (max-width:720px){.card-grid,.feature-grid{grid-template-columns:1fr}}

/* "I'd buy this today" pick (compare-hosting) */
.pick{position:relative;margin:28px 0;padding:22px 24px 20px;border:1px solid rgba(63,185,80,.55);border-radius:var(--radius);background:linear-gradient(135deg,rgba(63,185,80,.12),var(--panel) 60%)}
.pick .pick-label{font-family:var(--mono);font-size:.8rem;color:var(--blue)}
.pick .pick-label::before{content:"$ ./my-pick  ";opacity:.6}
.pick h2{margin:6px 0 4px !important;font-size:1.4rem}
.pick h2::before{content:none !important}
.pick .pick-price{font-family:var(--mono);font-size:.92rem;color:var(--ink);margin-bottom:12px}
.pick .pick-price s{color:var(--muted)}
.pick ul{margin-bottom:14px}
.pick .btn{margin-top:4px}
.compare-cta{display:flex;gap:10px;flex-wrap:wrap}
.price-note{font-size:.85rem;color:var(--muted)}
tr.mine td{background:rgba(63,185,80,.08)}
.article-body a.btn-primary{color:#06200f;text-decoration:none}
.article-body a.btn-outline{color:var(--ink);text-decoration:none}
.tbl-scroll table.prices{min-width:0}
table.prices td:nth-child(2){white-space:nowrap;font-family:var(--mono);font-size:.84rem}
table.prices td:nth-child(3){color:var(--muted);font-size:.86rem}

/* Newsletter signup (posts to list.bestselfhosting.com / listmonk) */
.newsletter{margin:36px 0 0;padding:22px 24px;border:1px solid var(--border);border-radius:var(--radius);background:var(--panel)}
.newsletter .nl-label{font-family:var(--mono);font-size:.8rem;color:var(--blue)}
.newsletter .nl-label::before{content:"$ ";opacity:.6}
.newsletter strong{display:block;color:var(--ink);font-size:1.1rem;margin:4px 0 2px}
.newsletter p{color:var(--muted);font-size:.9rem;margin:0 0 14px}
.newsletter .nl-row{display:flex;gap:10px;flex-wrap:wrap}
.newsletter input[type=email]{flex:1 1 220px;min-width:0;padding:11px 14px;border-radius:8px;border:1px solid var(--border);background:#010409;color:var(--ink);font:500 .95rem var(--mono)}
.newsletter input[type=email]:focus{outline:2px solid var(--blue);outline-offset:1px;border-color:var(--blue)}
.newsletter .nl-hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.newsletter .nl-fine{font-size:.78rem;margin:10px 0 0}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);border:0}