/* =============================================================================
   MYIPNOW — shared.css  (FINAL)
   Single source of truth. Deploy this, nothing else needs touching.
   ============================================================================= */


/* =============================================================================
   1. TOKENS — light mode defaults
   ============================================================================= */
:root {
  --bg:               #f7f8f9;
  --bg-color:         #f7f8f9;
  --card:             #ffffff;
  --card-bg:          #ffffff;
  --card-alt:         #f1f5f9;
  --card-hover:       #e2e8f0;
  --text:             #1e293b;
  --text-primary:     #1e293b;
  --text2:            #64748b;
  --text-secondary:   #64748b;
  --text-tint:        rgba(30,41,59,0.06);   /* subtle bg tint for active states */
  --border:           #e2e8f0;
  --border-color:     #e2e8f0;
  --border-alpha:     rgba(148,163,184,0.35);
  --surface-alpha-hi: rgba(248,250,252,0.7);
  --surface-alpha-lo: rgba(241,245,249,0.9);
  --white-alpha:      rgba(255,255,255,0.65);
  --accent:           #4f46e5;
  --accent-color:     #4f46e5;
  --green:            #10b981;
  --hide-ip-color:    #10b981;
  --shadow:           0 10px 30px rgba(0,0,0,0.08);
  --card-shadow:      0 10px 30px rgba(0,0,0,0.08);
  --radius:           16px;
  --border-radius:    16px;
  --transition-speed: 0.2s ease;
}


/* =============================================================================
   2. DARK TOKENS
   ============================================================================= */



/* =============================================================================
   3. RESET
   ============================================================================= */
*, *::before, *::after { box-sizing:border-box; margin:0; padding:0 }
ul, ol { list-style:none }
a  { text-decoration:none; color:inherit }
button { font-family:inherit; cursor:pointer }


/* =============================================================================
   4. BASE
   ============================================================================= */
body {
  font-family: 'Inter', system-ui, sans-serif;
  background: var(--bg);
  color: var(--text);
  line-height: 1.6;
}
.container { max-width:1200px; margin:0 auto; padding:1rem }


/* =============================================================================
   5. HEADER
   ============================================================================= */
.hdr { background:var(--card); border-radius:var(--radius); box-shadow:var(--shadow); margin-bottom:2rem }
.hdr-top { display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:1rem; padding:.875rem 1.5rem }
.hdr-logo { display:flex; align-items:center; gap:.5rem; text-decoration:none }
.hdr-logo img { width:32px; height:32px; border-radius:8px }
.hdr-logo span { font-size:1.1rem; font-weight:700; color:var(--text); white-space:nowrap }
.hdr-search { display:flex; max-width:320px; margin-left:auto }
.hdr-search input { flex:1; min-width:0; padding:.5rem .75rem; border:1px solid var(--border); border-right:none; border-radius:8px 0 0 8px; font-size:.85rem; background:var(--card); color:var(--text); outline:none; font-family:inherit }
.hdr-search input:focus { border-color:var(--accent) }
.hdr-search button { padding:.5rem .75rem; border:none; border-radius:0 8px 8px 0; background:var(--green); color:#fff; font-weight:600; font-size:.85rem; white-space:nowrap }
.hdr-search button:hover { background:#059669 }
.hdr-actions { display:flex; align-items:center; gap:.5rem }
.hdr-theme { width:36px; height:36px; border-radius:8px; border:1px solid var(--border); background:var(--card); display:flex; align-items:center; justify-content:center }
.hdr-theme:hover { background:var(--card-hover) }
.hdr-theme svg { width:16px; height:16px; fill:none; stroke:var(--text2); stroke-width:2; stroke-linecap:round; stroke-linejoin:round }
.hdr-theme .ic-moon { display:block }
.hdr-theme .ic-sun  { display:none }
.hdr-burger { display:none; flex-direction:column; gap:5px; background:none; border:none; padding:.4rem }
.hdr-burger span { display:block; width:22px; height:2px; background:var(--text); border-radius:2px; transition:.25s }
.hdr-burger.open span:nth-child(1) { transform:rotate(45deg) translate(5px,5px) }
.hdr-burger.open span:nth-child(2) { opacity:0 }
.hdr-burger.open span:nth-child(3) { transform:rotate(-45deg) translate(5px,-5px) }
.hdr-nav { padding:0 1.5rem }
.hdr-nav-list { display:flex; margin:0; padding:0 }
.hdr-nav-list>li { flex:1; position:relative; text-align:center }
.hdr-nav-list>li>a,
.hdr-nav-list>li>button { display:flex; align-items:center; justify-content:center; width:100%; padding:.7rem .25rem; font-size:.9rem; font-weight:600; color:var(--text); background:none; border:none; border-bottom:2px solid transparent; transition:color .15s,border-color .15s; white-space:nowrap }
.hdr-nav-list>li>a:hover,
.hdr-nav-list>li>button:hover { color:var(--accent); border-bottom-color:var(--accent) }
.hdr-arrow { font-size:.55rem; margin-left:.3rem; opacity:.5 }
.hdr-dd { display:none; position:absolute; top:100%; background:var(--card); border:1px solid var(--border); border-radius:12px; box-shadow:0 12px 40px rgba(0,0,0,.12); padding:.5rem 0; min-width:230px; z-index:9999; text-align:left }
.hdr-nav-list>li:not(.hdr-lang) .hdr-dd { left:50%; transform:translateX(-50%) }
.hdr-lang .hdr-dd { right:0; left:auto; min-width:170px }
.hdr-nav-list>li:hover>.hdr-dd { display:block }
.hdr-dd::before { content:''; position:absolute; top:-8px; left:0; right:0; height:8px }
.hdr-dd.hdr-dd-wide { min-width:520px; padding:1rem 1.25rem }
.hdr-dd-cols { display:grid; grid-template-columns:1fr 1fr; gap:0 2rem }
.hdr-dd-label { font-size:.65rem; font-weight:700; text-transform:uppercase; letter-spacing:.1em; color:var(--text2); padding:.6rem 1rem .2rem }
.hdr-dd-wide .hdr-dd-label { padding:.6rem 0 .2rem }
.hdr-dd a { display:block; padding:.4rem 1rem; font-size:.87rem; font-weight:500; color:var(--text); border-radius:6px; transition:background .12s,color .12s }
.hdr-dd-wide a { padding:.4rem .5rem }
.hdr-dd a:hover { background:var(--card-alt); color:var(--accent) }


/* =============================================================================
   6. MOBILE DRAWER
   ============================================================================= */
.m-overlay { display:none; position:fixed; inset:0; background:rgba(0,0,0,.4); z-index:9998 }
.m-overlay.open { display:block }
.m-drawer { display:none; position:fixed; top:0; right:0; width:300px; max-width:85vw; height:100dvh; background:var(--card); z-index:9999; overflow-y:auto; box-shadow:-4px 0 20px rgba(0,0,0,.15) }
.m-drawer.open { display:flex; flex-direction:column }
.m-head { display:flex; align-items:center; justify-content:space-between; padding:.75rem 1rem; border-bottom:1px solid var(--border) }
.m-head span { font-weight:700; font-size:1rem; color:var(--text) }
.m-close { background:none; border:none; font-size:1.5rem; color:var(--text); padding:.25rem }
.m-body { flex:1; overflow-y:auto; padding:.5rem 0 }
.m-sec { border-bottom:1px solid var(--border); padding:.25rem 0 }
.m-sec:last-child { border:none }
.m-lbl { font-size:.65rem; font-weight:700; text-transform:uppercase; letter-spacing:.1em; color:var(--text2); padding:.6rem 1.25rem .15rem }
.m-drawer a { display:block; padding:.5rem 1.25rem; font-size:.9rem; font-weight:500; color:var(--text) }
.m-drawer a:hover { color:var(--accent); background:var(--card-alt) }
.m-foot { border-top:1px solid var(--border); padding:.75rem 1.25rem; display:flex; align-items:center; gap:.75rem }
.m-foot span { font-size:.8rem; color:var(--text2) }


/* =============================================================================
   7. RESPONSIVE
   ============================================================================= */
@media (max-width:960px) {
  .hdr-nav    { display:none }
  .hdr-burger { display:flex }
  .hdr-search { display:none }
  .hdr-top    { grid-template-columns:auto 1fr; gap:.5rem; justify-items:end; padding:.65rem .75rem }
}
@media (max-width:400px) { .hdr-logo span { font-size:.9rem } }
@media (max-width:768px) {
  .category-nav { overflow-x:auto; scroll-behavior:smooth; padding-bottom:10px }
  .category-nav ul { display:inline-flex; flex-wrap:nowrap; white-space:nowrap; gap:1.2rem; list-style:none; margin:0; padding:0 1rem }
  .category-nav::-webkit-scrollbar { height:6px }
  .category-nav::-webkit-scrollbar-thumb { background:var(--card-hover); border-radius:4px }
  .nav-tools ul { display:none; position:absolute; top:100%; left:0; background:var(--card); border:1px solid var(--border); border-radius:8px; box-shadow:var(--shadow); list-style:none; padding:.5rem 0; margin:0; min-width:220px; z-index:999 }
  .nav-tools.open ul { display:block }
}


/* =============================================================================
   8. DARK MODE OVERRIDES
   Everything that uses hardcoded colors instead of variables is listed here.
   Using !important to beat per-page <style> block rules.
   ============================================================================= */

/* ── Universal text — forces all text elements white ── */
/* Restore colored elements */
/* ── Sections & cards ── */
/* ── Tool tabs ── */
/* ── Tool primary button ──
   Page CSS uses background:var(--text) which becomes WHITE in dark mode.
   Override to keep it always a visible dark button with white text.            */
/* ── Ghost / secondary buttons ── */
/* ── Preset / data attribute buttons ── */
/* ── Keep brand-colored buttons white text ── */
/* ── Tables ── */
/* ── Horizontal rules ── */
/* ── Inputs / selects / textareas ── */
/* ── Code ── */
/* ── Map ── */
/* ── Dropdowns ── */
/* ── Hover states ── */
/* ── Footer ── */
/* ── See-also links ── */
/* ── Scrollbar ── */
/* =============================================================================
   9. SHARED COMPONENTS
   ============================================================================= */

.store-wrapper { background:var(--card); border-radius:16px; box-shadow:var(--shadow); padding:1.25rem 1.5rem; margin-bottom:2rem; text-align:center; }
.store-btn { display:inline-flex; align-items:center; gap:.5rem; padding:.6rem 1.25rem; border-radius:10px; border:1px solid var(--border); text-decoration:none; color:var(--text); font-weight:600; font-size:.95rem; background:var(--card); transition:background .2s }
.store-btn:hover { background:var(--card-alt) }

.see-also { background:var(--card); padding:1.5rem; border-radius:14px; box-shadow:0 4px 16px rgba(0,0,0,.07); margin:2rem 0 }
.see-also h2 { margin:0 0 1rem; font-size:1.1rem; font-weight:700; color:var(--text) }
.see-also ul { list-style:none; padding:0; margin:0 }
.see-also li { padding:6px 0; border-bottom:1px solid var(--border) }
.see-also li:last-child { border-bottom:none; padding-bottom:0 }
.see-also a { font-size:.95rem; font-weight:500; color:var(--accent); text-decoration:none }
.see-also a:hover { text-decoration:underline }

.lang-links { display:flex; flex-wrap:wrap; justify-content:center; gap:1rem; padding:1.5rem 1rem; background:var(--card); border-radius:16px; box-shadow:var(--shadow); margin-bottom:2rem }
.lang-links a { color:var(--accent); text-decoration:none; font-weight:600; font-size:.95rem; padding:.5rem 1rem; border:1px solid var(--border); border-radius:8px }
.lang-links a:hover { background:var(--card-alt) }

/* ── Article body links, tables, code ────────────────────────────────────── */
.article-body a { color: var(--accent, #4f46e5); text-decoration: none; }
.article-body a:hover { text-decoration: underline; }
.article-body .table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.article-body table { min-width: 500px; }
.article-body code { background: var(--card-alt, #f1f5f9); color: var(--text, #1e293b); padding: 2px 6px; border-radius: 6px; font-size: 0.9em; }
.article-body pre { background: #1e293b !important; color: #e5e7eb !important; border-radius: 10px; }
/* Fix code blocks that use --text-tint as background */
.article-body code[style*="text-tint"],
.article-body code { background: var(--card-alt, #f1f5f9) !important; color: var(--text, #1e293b) !important; }

/* =============================================================================
   PAGE LAYOUT — base styles for all pages
   ============================================================================= */

/* Page header */
.page-header { background: var(--card, #fff); padding: 2.5rem 3rem; border-radius: var(--radius, 16px); box-shadow: var(--shadow); margin-bottom: 2rem; text-align: center; }
.page-header h1 { font-size: 2.5rem; margin: 0 0 0.5rem; }
.page-header p { font-size: 1rem; color: var(--text2, #64748b); margin: 0; }
@media(max-width:768px) { .page-header h1 { font-size: 1.6rem; } .page-header { padding: 1.5rem 1rem; } }

/* Article body */
.article-body { background: var(--card, #fff); padding: 2.5rem 3rem; border-radius: var(--radius, 16px); box-shadow: var(--shadow); margin-bottom: 2rem; max-width: 100%; }
@media(max-width:768px) { .article-body { padding: 1.5rem 1rem; } }
.article-body h2 { margin: 2rem 0 0.75rem; font-size: 1.4rem; }
.article-body h3 { margin: 1.5rem 0 0.5rem; font-size: 1.15rem; }
.article-body p { margin: 0.5rem 0; line-height: 1.7; }
.article-body ul, .article-body ol { padding-left: 1.5rem; margin: 0.5rem 0; }
.article-body li { margin-bottom: 0.3rem; line-height: 1.6; }
.article-body a { color: var(--accent, #4f46e5); text-decoration: none; }
.article-body a:hover { text-decoration: underline; }
.article-body code { background: var(--card-alt, #f1f5f9); padding: 2px 6px; border-radius: 6px; font-size: 0.9em; }
.article-body pre { background: #1e293b; color: #e5e7eb; padding: 12px 16px; border-radius: 10px; overflow-x: auto; font-size: 0.875rem; line-height: 1.5; }
.article-body table { width: 100%; border-collapse: collapse; font-size: 0.9rem; margin: 1rem 0; }
.article-body th { background: var(--card-alt, #f1f5f9); padding: 8px 12px; text-align: left; font-weight: 600; border-bottom: 2px solid var(--border, #e2e8f0); }
.article-body td { padding: 8px 12px; border-bottom: 1px solid var(--border, #e2e8f0); }

/* Article section */
.article-section { margin-top: 2rem; }

/* Snippet section */
.snippet-section { background: var(--card, #fff); padding: 1.5rem; border-radius: var(--radius, 16px); box-shadow: var(--shadow); margin: 0 auto 2rem auto; max-width: 1200px; }
.snippet-section h2 { margin: 0 0 .5rem 0; text-align: center; }
.snippet-section p { margin: 0 auto; text-align: center; color: var(--text2, #64748b); max-width: 760px; }
.howto { margin-top: 1rem; max-width: 760px; margin-left: auto; margin-right: auto; color: var(--text2, #64748b); }
.howto ol { margin: .5rem auto 0 auto; padding-left: 1.25rem; text-align: left; }

/* FAQ */
.faq-section { margin-top: 2rem; }
.faq-item { background: var(--card-alt, #f1f5f9); border-radius: 8px; padding: 1rem; margin-bottom: 1rem; cursor: pointer; }
.faq-item:hover { background: var(--card-hover, #e2e8f0); }
.faq-question { font-weight: 600; font-size: 1rem; }
.faq-answer { display: block; font-size: 0.9rem; color: var(--text2, #64748b); margin-top: 0.5rem; line-height: 1.5; }

/* Explanation section */
.explanation-section { margin-top: 1rem; }
.explanation-section h3 { margin-bottom: 0.5rem; }
.explanation-section ul { list-style: disc; padding-left: 1.5rem; color: var(--text2, #64748b); }

/* Footer */
.footer { text-align: center; padding: 2rem 1rem; margin: 2rem auto 0; max-width: 1200px; background: var(--card, #fff); border-radius: var(--radius, 16px); box-shadow: var(--shadow); }
.footer-nav { display: flex; justify-content: center; flex-wrap: wrap; gap: 1rem 2.5rem; list-style: none; padding: 0; margin: 0 0 1rem; }
.footer-nav a { color: var(--text2, #64748b); text-decoration: none; font-size: 1rem; }
.footer-nav a:hover { color: var(--accent, #4f46e5); }
.footer-copyright { font-size: 0.95rem; color: var(--text2, #64748b); }

/* Tool related guides */
.tool-related { margin-top: 1.5rem; }
.tool-related h2 { font-size: 1.1rem; margin-bottom: 0.5rem; }
.tool-related ul { list-style: none; padding: 0; }
.tool-related li { margin-bottom: 0.4rem; }
.tool-related a { color: var(--accent, #4f46e5); text-decoration: none; font-weight: 500; }
.tool-related a:hover { text-decoration: underline; }

/* Old header (for pages not using new hdr) */
.site-header { background: var(--card, #fff); padding: 1rem; margin-bottom: 2rem; border-radius: var(--radius, 16px); box-shadow: var(--shadow); overflow: visible; }
.header-top { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 1rem; padding-bottom: 1rem; border-bottom: 1px solid var(--border, #e2e8f0); }
.logo { font-size: 1.75rem; font-weight: 700; color: var(--text, #1e293b); text-decoration: none; }
.search-form { display: flex; flex-grow: 0; width: 480px; max-width: 100%; }
.search-form input { width: 100%; padding: 0.75rem 1rem; border: 1px solid var(--border, #e2e8f0); border-radius: 8px 0 0 8px; font-size: 1rem; }
.search-form button { padding: 0.75rem 1rem; border: none; background: var(--green, #10b981); color: white; border-radius: 0 8px 8px 0; cursor: pointer; font-weight: 500; }
.search-form button:hover { background: #059669; }
.category-nav { padding-top: 1rem; position: relative; }
.category-nav ul { display: flex; gap: 2rem; list-style: none; margin: 0; padding: 0; align-items: center; flex-wrap: wrap; justify-content: center; }
.category-nav a { text-decoration: none; color: var(--text, #1e293b); font-size: 1rem; font-weight: 500; }
.category-nav a:hover { color: var(--accent, #4f46e5); }
.nav-tools { position: relative; }
.nav-tools > a { cursor: default; }
.nav-tools ul { display: none; position: absolute; top: 100%; left: 0; background: var(--card, #fff); border: 1px solid var(--border, #e2e8f0); border-radius: 8px; box-shadow: var(--shadow); list-style: none; padding: .5rem 0; margin: 0; min-width: 220px; z-index: 999; }
.nav-tools ul li a { display: block; padding: .5rem 1rem; color: var(--text, #1e293b); text-decoration: none; }
.nav-tools ul li a:hover { color: var(--accent, #4f46e5); }
.nav-tools:hover ul { display: block; }
@media (max-width: 768px) {
  .category-nav { overflow-x: auto; scroll-behavior: smooth; padding-bottom: 10px; }
  .category-nav ul { display: inline-flex; flex-wrap: nowrap; white-space: nowrap; gap: 1.2rem; list-style: none; margin: 0; padding: 0 1rem; }
  .nav-tools { position: static !important; }
  .nav-tools ul { position: fixed !important; top: 60px !important; left: 10px; right: 10px; display: none; z-index: 10000; }
  .nav-tools.open ul { display: block !important; }
}

/* SEO hidden semantic mirror */
.ip-semantic { position: absolute; left: -9999px; top: auto; width: 1px; height: 1px; overflow: hidden; }

/* =============================================================================
   PING TOOL
   ============================================================================= */
.ping-tool{max-width:700px;margin:1rem auto;}
.ping-input-row{display:flex;gap:0.75rem;align-items:center;flex-wrap:wrap;margin-bottom:1rem;}
.ping-input-row input{flex:1;min-width:0;padding:0.75rem 1rem;font-size:1rem;border-radius:8px;border:1px solid var(--border,#e2e8f0);background:var(--card,#fff);color:var(--text,#1e293b);}
.ping-input-row select{padding:0.75rem;font-size:0.95rem;border-radius:8px;border:1px solid var(--border,#e2e8f0);background:var(--card,#fff);color:var(--text,#1e293b);cursor:pointer;}
.ping-btn{padding:0.75rem 1.5rem;font-size:1rem;border:none;border-radius:8px;background:var(--accent,#4f46e5);color:#fff;cursor:pointer;font-weight:600;white-space:nowrap;}
.ping-btn:hover{background:#4338ca;}
.ping-results{margin-top:1rem;}
.ping-summary{background:var(--card-alt,#f1f5f9);border-radius:8px;padding:0.75rem 1rem;margin-bottom:1rem;font-size:0.9rem;color:var(--text2,#64748b);}
.ping-stats{display:flex;gap:1rem;flex-wrap:wrap;margin-top:1rem;}
.ping-stat-unit{background:var(--card,#fff);border:1px solid var(--border,#e2e8f0);border-radius:10px;padding:0.75rem 1.25rem;text-align:center;flex:1;min-width:80px;box-shadow:0 2px 6px rgba(0,0,0,0.05);}
.ping-stat-unit .label{font-size:0.75rem;color:var(--text2,#64748b);text-transform:uppercase;letter-spacing:0.05em;margin-bottom:0.25rem;}
.ping-stat-unit .value{font-size:1.4rem;font-weight:700;color:var(--text,#1e293b);}
.ping-ok{color:#059669;}
.ping-timeout{color:#dc2626;}
.ping-info{font-size:0.85rem;color:var(--text2,#64748b);margin-top:0.5rem;}