/* ipconfig.is — content/guide pages (dark)
   Standalone stylesheet (the app's styles.css is not loaded here).
   Mirrors the app's dark developer/terminal tokens, tuned for long-form reading. */

:root {
    --bg:      #080b10;
    --panel:   #0d1219;
    --panel-2: #111823;
    --inset:   #0a0e14;
    --border:  rgba(255,255,255,0.08);
    --ink:     #e8eef4;
    --muted:   #9aa7b6;
    --faint:   #626f7e;
    --accent:  #3ecf8e;
    --accent-bright: #4ce8a1;
    --sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
}

* { box-sizing: border-box; }

body {
    margin: 0;
    font-family: var(--sans);
    color: var(--ink);
    background: var(--bg);
    line-height: 1.72;
    -webkit-font-smoothing: antialiased;
    background-image:
        radial-gradient(1000px 500px at 50% -10%, rgba(62,207,142,0.06), transparent 70%),
        linear-gradient(rgba(255,255,255,0.016) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,0.016) 1px, transparent 1px);
    background-size: 100% 100%, 46px 46px, 46px 46px;
    background-attachment: fixed;
    min-height: 100vh;
}

::selection { background: rgba(62,207,142,0.3); color: #06130c; }

/* ----- Header ----- */
.page-header {
    max-width: 760px; margin: 0 auto; padding: 18px 20px;
    display: flex; align-items: center; justify-content: space-between;
}
.page-brand { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--ink); }
.page-brand-mark {
    width: 32px; height: 32px; border-radius: 9px; flex: none; display: grid; place-items: center;
    background: linear-gradient(160deg, #12321f, #0c1a13); border: 1px solid rgba(62,207,142,0.28);
    color: var(--accent); font-family: var(--mono); font-weight: 700; font-size: 14px;
}
.page-brand-name { font-weight: 700; font-size: 1.05rem; letter-spacing: -0.01em; }
.page-brand-name b { color: var(--accent); }
.page-brand-name .tld { color: var(--muted); font-weight: 600; }
.page-back { font-size: 0.85rem; font-weight: 600; color: var(--accent); text-decoration: none; }
.page-back:hover { color: var(--accent-bright); }

/* ----- Article ----- */
.page-main { max-width: 760px; margin: 0 auto; padding: 0 20px 48px; }
.article {
    background: var(--panel); border: 1px solid var(--border); border-radius: 18px;
    padding: 34px 38px; box-shadow: 0 24px 60px -30px rgba(0,0,0,0.8);
}
.breadcrumb { font-size: 0.78rem; color: var(--faint); margin-bottom: 14px; font-family: var(--mono); }
.breadcrumb a { color: var(--accent); text-decoration: none; }
.breadcrumb a:hover { color: var(--accent-bright); }
.breadcrumb span { margin: 0 4px; }

.article h1 { font-size: 2rem; line-height: 1.2; margin: 0 0 18px; letter-spacing: -0.025em; color: #fff; }
.article h2 { font-size: 1.25rem; margin: 30px 0 10px; letter-spacing: -0.01em; color: var(--ink); }
.article p { margin: 0 0 15px; color: #cdd6e0; }
.article ul { margin: 0 0 16px; padding-left: 22px; }
.article li { margin-bottom: 7px; color: #cdd6e0; }
.article li::marker { color: var(--accent); }
.article strong { color: var(--ink); }
.article a { color: var(--accent); text-decoration: none; font-weight: 500; border-bottom: 1px solid rgba(62,207,142,0.3); }
.article a:hover { color: var(--accent-bright); border-bottom-color: var(--accent-bright); }
.article code {
    background: var(--inset); border: 1px solid var(--border); border-radius: 5px;
    padding: 1px 6px; font-family: var(--mono); font-size: 0.85em; color: var(--accent-bright);
}
.article abbr { text-decoration: underline dotted; cursor: help; }

/* ----- Comparison table ----- */
.article-table { width: 100%; border-collapse: collapse; margin: 0 0 18px; font-size: 0.9rem; }
.article-table th, .article-table td { text-align: left; padding: 10px 13px; border-bottom: 1px solid var(--border); }
.article-table thead th { color: var(--faint); font-weight: 600; background: var(--panel-2); text-transform: uppercase; letter-spacing: 0.05em; font-size: 0.76rem; }
.article-table td:first-child { color: var(--muted); }
.article-table code { background: var(--inset); }

/* ----- FAQ ----- */
.faq-item { padding: 18px 0; border-bottom: 1px solid var(--border); }
.faq-item:last-child { border-bottom: none; }
.faq-q { font-size: 1.08rem; margin: 0 0 6px; color: #fff; }
.faq-a { margin: 0; color: #cdd6e0; }

/* ----- CTA ----- */
.article-cta { margin-top: 30px; }
.article-cta-btn {
    display: inline-block; background: var(--accent); color: #06130c !important;
    font-weight: 600; text-decoration: none !important; border-bottom: none !important;
    padding: 12px 22px; border-radius: 11px; box-shadow: 0 10px 26px -12px rgba(62,207,142,0.55);
    transition: transform .15s ease, background .15s ease;
}
.article-cta-btn:hover { transform: translateY(-1px); background: var(--accent-bright); }

/* ----- Related + footer ----- */
.page-related {
    display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin-top: 24px;
    padding: 16px 20px; background: var(--panel); border: 1px solid var(--border); border-radius: 14px;
}
.page-related-label { font-size: 0.76rem; font-weight: 700; color: var(--faint); text-transform: uppercase; letter-spacing: 0.08em; }
.page-related a { font-size: 0.88rem; font-weight: 500; color: var(--accent); text-decoration: none; }
.page-related a:hover { color: var(--accent-bright); }

.page-footer { text-align: center; padding: 24px 20px 40px; color: var(--faint); font-size: 0.8rem; }

@media (max-width: 600px) {
    .article { padding: 24px 20px; }
    .article h1 { font-size: 1.6rem; }
}