/* ============================================================
   5IP.tw — 主樣式表 v4（明亮為主，data-theme="dark" 切換）
   ============================================================ */

/* ── 明亮配色變數 ─────────────────────────────────────────── */
:root {
  --bg:           #f5f7fa;
  --surface:      #ffffff;
  --surface-2:    #f0f4f8;
  --border:       #dde3eb;
  --text:         #1a2332;
  --text-muted:   #5a6a7e;
  --primary:      #2563eb;
  --primary-d:    #1d4ed8;
  --primary-soft: #eff6ff;
  --success:      #16a34a;
  --warn:         #d97706;
  --danger:       #dc2626;
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 20px;
  --shadow-sm: 0 1px 4px rgba(0,0,0,.07), 0 1px 2px rgba(0,0,0,.05);
  --shadow-md: 0 4px 16px rgba(0,0,0,.09);
  --font: 'Noto Sans TC', system-ui, sans-serif;
  --mono: 'JetBrains Mono', 'Courier New', monospace;
  --max: 980px;
  --t: 150ms ease;
}

/* ── 深色配色變數（JS 切換 data-theme="dark"） ───────────── */
[data-theme="dark"] {
  --bg:           #111827;
  --surface:      #1f2937;
  --surface-2:    #273448;
  --border:       #374151;
  --text:         #f1f5f9;
  --text-muted:   #9ca3af;
  --primary:      #3b82f6;
  --primary-d:    #2563eb;
  --primary-soft: #1e3a5f;
  --shadow-sm: 0 1px 4px rgba(0,0,0,.3);
  --shadow-md: 0 4px 16px rgba(0,0,0,.35);
}
[data-theme="dark"] .ip-hero         { background: linear-gradient(135deg,#1e3a5f 0%,#1f2937 60%); border-color:#2d4a7a; }
[data-theme="dark"] .badge-ok        { background:#14532d; color:#86efac; }
[data-theme="dark"] .badge-warn      { background:#451a03; color:#fcd34d; }
[data-theme="dark"] .badge-danger    { background:#450a0a; color:#fca5a5; }
[data-theme="dark"] .shorturl-error  { background:#450a0a; color:#fca5a5; }
[data-theme="dark"] .tool-result.success { background:#14532d; border-color:#22c55e; color:#86efac; }
[data-theme="dark"] .tool-result.error   { background:#450a0a; border-color:#ef4444; color:#fca5a5; }
[data-theme="dark"] .alert-success   { background:#14532d; color:#86efac; }
[data-theme="dark"] .alert-error     { background:#450a0a; color:#fca5a5; }

/* ── Reset ───────────────────────────────────────────────── */
*,*::before,*::after { box-sizing:border-box; margin:0; padding:0; }
html { scroll-behavior:smooth; }
body { font-family:var(--font); background:var(--bg); color:var(--text); line-height:1.7; min-height:100vh; display:flex; flex-direction:column; }
img  { max-width:100%; height:auto; }
a    { color:var(--primary); text-decoration:none; }
a:hover { text-decoration:underline; }
a:focus-visible { outline:2px solid var(--primary); outline-offset:3px; border-radius:3px; }

/* ── Accessibility ───────────────────────────────────────── */
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
.skip-link { position:absolute; top:-100%; left:1rem; background:var(--primary); color:#fff; padding:.5rem 1rem; border-radius:var(--radius-sm); font-weight:700; z-index:9999; }
.skip-link:focus { top:1rem; }

/* ── Layout ──────────────────────────────────────────────── */
.container {
  width: 100%;
  max-width: var(--max);
  margin-left: auto;
  margin-right: auto;
  padding-left: 1.25rem;
  padding-right: 1.25rem;
  box-sizing: border-box;
}
main.container { flex:1; padding-top:2rem; padding-bottom:4rem; }

/* ── Header ──────────────────────────────────────────────── */
.site-header { background:var(--surface); border-bottom:1px solid var(--border); position:sticky; top:0; z-index:200; box-shadow:var(--shadow-sm); }
.header-inner { display:flex; align-items:center; justify-content:space-between; height:62px; gap:1rem; }
.site-logo { display:flex; align-items:center; gap:.5rem; font-weight:700; font-size:1.2rem; color:var(--text); }
.site-logo:hover { text-decoration:none; opacity:.85; }
.logo-icon { font-size:1.4rem; }
.site-nav { display:flex; gap:.15rem; }
.nav-link { padding:.4rem .8rem; border-radius:var(--radius-sm); font-size:.9rem; font-weight:500; color:var(--text-muted); transition:background var(--t),color var(--t); }
.nav-link:hover { background:var(--surface-2); color:var(--text); text-decoration:none; }
.nav-link--active { background:var(--primary-soft); color:var(--primary) !important; font-weight:700; }

/* ── Theme Toggle ────────────────────────────────────────── */
.theme-toggle { background:none; border:1.5px solid var(--border); border-radius:var(--radius-sm); padding:.35rem .55rem; cursor:pointer; font-size:1rem; line-height:1; color:var(--text-muted); transition:background var(--t),border-color var(--t); flex-shrink:0; }
.theme-toggle:hover { background:var(--surface-2); color:var(--text); }

/* ── Hamburger ───────────────────────────────────────────── */
.nav-toggle { display:none; background:none; border:none; cursor:pointer; padding:.5rem; flex-direction:column; gap:5px; }
.nav-toggle span { display:block; width:22px; height:2px; background:var(--text); border-radius:2px; transition:transform var(--t); }
.mobile-nav { display:none; background:var(--surface); border-top:1px solid var(--border); padding:.5rem 1.25rem 1rem; flex-direction:column; gap:.15rem; }
.mobile-nav a { padding:.65rem .75rem; border-radius:var(--radius-sm); font-weight:500; color:var(--text); display:block; }
.mobile-nav a:hover { background:var(--surface-2); text-decoration:none; }
.mobile-nav a.nav-link--active { color:var(--primary); background:var(--primary-soft); }

@media (max-width:680px) {
  .site-nav { display:none; }
  .nav-toggle { display:flex; }
}

/* ── IP Hero ─────────────────────────────────────────────── */
.ip-hero { text-align:center; padding:3rem 1rem 2.5rem; background:linear-gradient(135deg,#eff6ff 0%,#f8faff 60%); border:1px solid #c7d9ff; border-radius:var(--radius-lg); margin-bottom:2rem; }
.ip-label { font-size:.82rem; font-weight:600; color:var(--text-muted); text-transform:uppercase; letter-spacing:.08em; margin-bottom:.6rem; }
.ip-address { font-family:var(--mono); font-size:clamp(2rem,6vw,3.2rem); font-weight:700; color:var(--primary); letter-spacing:-.02em; margin-bottom:1rem; word-break:break-all; }
.btn-copy { display:inline-flex; align-items:center; gap:.4rem; background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-sm); padding:.45rem 1.1rem; font-size:.875rem; font-weight:500; cursor:pointer; color:var(--text); transition:background var(--t),box-shadow var(--t); }
.btn-copy:hover { background:var(--surface-2); box-shadow:var(--shadow-sm); }
.btn-copy.copied { color:var(--success); border-color:var(--success); }

/* ── Section Titles ──────────────────────────────────────── */
.section-title {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 1rem;
  padding-left: .75rem;
  border-left: 3px solid var(--primary);
  display: block;
  box-sizing: border-box;
}
.section-desc  { color:var(--text-muted); margin-bottom:1rem; font-size:.92rem; }

/* ── Info Cards ──────────────────────────────────────────── */
.info-grid  { margin-bottom:2rem; }
.info-cards { display:grid; grid-template-columns:repeat(auto-fill,minmax(210px,1fr)); gap:.875rem; }
.info-card  { background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-md); padding:1rem 1.1rem; display:flex; align-items:flex-start; gap:.75rem; box-shadow:var(--shadow-sm); transition:box-shadow var(--t),transform var(--t); }
.info-card:hover { box-shadow:var(--shadow-md); transform:translateY(-1px); }
.info-icon    { font-size:1.3rem; flex-shrink:0; margin-top:.1rem; }
.info-content { display:flex; flex-direction:column; gap:.2rem; min-width:0; }
.info-label   { font-size:.72rem; font-weight:700; color:var(--text-muted); text-transform:uppercase; letter-spacing:.06em; }
.info-value   { font-size:.88rem; font-weight:500; color:var(--text); word-break:break-word; display:flex; align-items:center; gap:.35rem; flex-wrap:wrap; }
.rdns       { font-family:var(--mono); font-size:.78rem; }
.flag-icon  { border-radius:2px; flex-shrink:0; }
.map-link   { font-size:.78rem; }

/* ── Badges ──────────────────────────────────────────────── */
.badge        { display:inline-block; padding:.15rem .55rem; border-radius:999px; font-size:.72rem; font-weight:700; }
.badge-ok     { background:#dcfce7; color:#166534; }
.badge-warn   { background:#fef9c3; color:#854d0e; }
.badge-danger { background:#fee2e2; color:#991b1b; }

/* ── Forms ───────────────────────────────────────────────── */
.lookup-tool,.shorturl-tool,.tool-section { margin-bottom:2rem; }
.lookup-form,.shorturl-input-row,.tool-row { display:flex; gap:.65rem; flex-wrap:wrap; }
.lookup-input,.tool-input,.tool-textarea { flex:1; min-width:0; background:var(--surface); border:1.5px solid var(--border); border-radius:var(--radius-sm); padding:.6rem 1rem; font-size:.95rem; font-family:var(--font); color:var(--text); transition:border-color var(--t),box-shadow var(--t); }
.tool-textarea { font-family:var(--mono); font-size:.85rem; resize:vertical; min-height:100px; width:100%; }
.lookup-input::placeholder,.tool-input::placeholder { color:var(--text-muted); }
.lookup-input:focus,.tool-input:focus,.tool-textarea:focus { outline:none; border-color:var(--primary); box-shadow:0 0 0 3px rgba(37,99,235,.12); }
.btn-primary   { background:var(--primary); color:#fff; border:none; border-radius:var(--radius-sm); padding:.6rem 1.4rem; font-size:.92rem; font-weight:700; cursor:pointer; white-space:nowrap; transition:background var(--t),transform var(--t); }
.btn-primary:hover  { background:var(--primary-d); }
.btn-primary:active { transform:scale(.97); }
.btn-secondary { background:var(--surface-2); color:var(--text); border:1.5px solid var(--border); border-radius:var(--radius-sm); padding:.6rem 1.2rem; font-size:.88rem; font-weight:600; cursor:pointer; transition:background var(--t); }
.btn-secondary:hover { background:var(--border); }

/* ── Tool Result ─────────────────────────────────────────── */
.tool-result { margin-top:.875rem; background:var(--surface-2); border:1.5px solid var(--border); border-radius:var(--radius-sm); padding:1rem 1.1rem; font-family:var(--mono); font-size:.875rem; white-space:pre-wrap; word-break:break-all; line-height:1.7; min-height:48px; color:var(--text); }
.tool-result.success { border-color:#86efac; background:#f0fdf4; color:#166534; }
.tool-result.error   { border-color:#fca5a5; background:#fff5f5; color:#991b1b; }

/* ── Tools Page Tabs ─────────────────────────────────────── */
.tools-tabs { display:flex; gap:.4rem; flex-wrap:wrap; margin-bottom:1.75rem; border-bottom:2px solid var(--border); padding-bottom:0; }
.tab-btn { background:none; border:none; border-bottom:3px solid transparent; margin-bottom:-2px; padding:.6rem 1rem; font-size:.9rem; font-weight:600; color:var(--text-muted); cursor:pointer; transition:color var(--t),border-color var(--t); border-radius:var(--radius-sm) var(--radius-sm) 0 0; }
.tab-btn:hover  { color:var(--text); background:var(--surface-2); }
.tab-btn.active { color:var(--primary); border-bottom-color:var(--primary); background:var(--primary-soft); }
.tab-panel         { display:none; }
.tab-panel.active  { display:block; }

/* ── Password Generator ──────────────────────────────────── */
.pw-length-row { display:flex; align-items:center; gap:.75rem; margin-bottom:1rem; }
.pw-length-row label { font-size:.9rem; font-weight:600; white-space:nowrap; }
.pw-options { display:flex; flex-wrap:wrap; gap:.75rem 1.5rem; margin:.875rem 0 1rem; align-items:center; }
.pw-options label { display:flex; align-items:center; gap:.4rem; font-size:.9rem; font-weight:500; cursor:pointer; }
.pw-options input[type=checkbox] { width:16px; height:16px; cursor:pointer; accent-color:var(--primary); }
.pw-output { font-family:var(--mono); font-size:1.1rem; font-weight:700; background:var(--surface-2); border:1.5px solid var(--border); border-radius:var(--radius-sm); padding:.875rem 1.1rem; word-break:break-all; margin-bottom:.75rem; min-height:52px; letter-spacing:.05em; color:var(--primary); font-variant-ligatures:none; font-feature-settings:"liga" 0,"calt" 0; }
.pw-strength { display:flex; gap:.3rem; align-items:center; margin-bottom:1rem; }
.pw-strength-bar { flex:1; height:6px; border-radius:3px; background:var(--border); transition:background .3s; }
.pw-strength-label { font-size:.78rem; font-weight:700; width:40px; text-align:right; }

/* ── Short URL ───────────────────────────────────────────── */
.shorturl-result { margin-top:.875rem; background:var(--primary-soft); border:1.5px solid var(--primary); border-radius:var(--radius-sm); padding:.75rem 1rem; display:flex; align-items:center; gap:.75rem; flex-wrap:wrap; font-size:.9rem; }
.result-url { font-family:var(--mono); font-weight:700; color:var(--primary); }
.btn-copy-small { background:var(--primary); color:#fff; border:none; border-radius:var(--radius-sm); padding:.25rem .75rem; font-size:.8rem; cursor:pointer; transition:background var(--t); }
.btn-copy-small:hover { background:var(--primary-d); }
.shorturl-error { margin-top:.75rem; background:#fee2e2; color:#991b1b; border-radius:var(--radius-sm); padding:.6rem 1rem; font-size:.9rem; }

/* ── FAQ ─────────────────────────────────────────────────── */
.faq { margin-bottom:2.5rem; }
.faq-list dt { font-weight:700; font-size:.95rem; padding:.875rem 0 .2rem; border-top:1px solid var(--border); color:var(--text); }
.faq-list dt:first-child { border-top:none; }
.faq-list dd { font-size:.9rem; color:var(--text-muted); padding-bottom:.25rem; margin-left:0; line-height:1.8; }


/* ── Contact Form ────────────────────────────────────────── */
.form-group { margin-bottom:1.25rem; }
.form-group label { display:block; font-weight:600; font-size:.9rem; margin-bottom:.4rem; }
.form-group label span { color:var(--danger); }
.alert { padding:.75rem 1rem; border-radius:var(--radius-sm); margin-bottom:1.5rem; font-size:.9rem; }
.alert-success { background:#dcfce7; color:#166534; }
.alert-error   { background:#fee2e2; color:#991b1b; }

/* ── Footer ──────────────────────────────────────────────── */
.site-footer { background:var(--surface); border-top:1px solid var(--border); margin-top:auto; }
.footer-inner { display:flex; gap:2.5rem; padding:2.5rem 1.25rem 1.75rem; flex-wrap:wrap; }
.footer-brand { flex:0 0 200px; }
.footer-tagline { font-size:.83rem; color:var(--text-muted); margin-top:.4rem; }
.footer-nav { flex:1; display:flex; gap:2rem; flex-wrap:wrap; }
.footer-nav-col { display:flex; flex-direction:column; gap:.35rem; min-width:90px; }
.footer-nav-col h3 { font-size:.72rem; font-weight:700; color:var(--text-muted); text-transform:uppercase; letter-spacing:.07em; margin-bottom:.2rem; }
.footer-nav-col a { font-size:.85rem; color:var(--text-muted); }
.footer-nav-col a:hover { color:var(--text); text-decoration:none; }
.footer-bottom { border-top:1px solid var(--border); padding:.875rem 0; }
.footer-bottom p { font-size:.78rem; color:var(--text-muted); text-align:center; line-height:1.8; }

/* ── Static Pages (about, privacy, terms) ───────────────── */
.page-content { max-width:740px; margin-inline:auto; padding:2.5rem 1.25rem 4rem; box-sizing:border-box; width:100%; }
.page-content h1 { font-size:1.75rem; font-weight:700; margin-bottom:.4rem; color:var(--text); }
.page-meta { font-size:.84rem; color:var(--text-muted); margin-bottom:2rem; padding-bottom:1rem; border-bottom:1px solid var(--border); }
.page-content h2 { font-size:1.1rem; font-weight:700; margin:1.75rem 0 .6rem; color:var(--text); padding-left:.6rem; border-left:3px solid var(--primary); }
.page-content p  { font-size:.93rem; color:var(--text-muted); line-height:1.85; margin-bottom:.75rem; }
.page-content ul,.page-content ol { padding-left:1.5rem; margin-bottom:1rem; }
.page-content li { font-size:.93rem; color:var(--text-muted); line-height:1.85; margin-bottom:.3rem; }
.page-content a  { color:var(--primary); }
.page-content strong { color:var(--text); font-weight:600; }

/* ── Responsive ──────────────────────────────────────────── */
@media (max-width:600px) {
  .info-cards { grid-template-columns:1fr 1fr; }
  .ip-address { font-size:1.75rem; }
  .footer-inner { flex-direction:column; gap:1.25rem; }
  .footer-brand { flex:none; }
}
@media (max-width:420px) {
  .info-cards { grid-template-columns:1fr; }
  .tools-tabs { gap:.2rem; }
  .tab-btn { padding:.5rem .7rem; font-size:.82rem; }
}

/* ── Button disabled / cooldown ─────────────────────────── */
.btn-primary:disabled,
.btn-secondary:disabled {
  opacity: .55;
  cursor: not-allowed;
  transform: none;
}

/* ── Vultr Ad ────────────────────────────────────────────── */
.vultr-ad {
  display: inline-block;
  margin-top: 1rem;
  opacity: .8;
  transition: opacity var(--t);
}
.vultr-ad:hover { opacity: 1; }
.vultr-ad img { height: 24px; width: auto; display: block; }
[data-theme="dark"] .vultr-ad img { filter: invert(1) brightness(2); }

/* ── Header Actions ──────────────────────────────────────── */
.header-actions {
  display: flex;
  align-items: center;
  gap: .5rem;
  flex-shrink: 0;
}

/* ── Language Switcher ───────────────────────────────────── */
.lang-switcher {
  display: flex;
  gap: .2rem;
  align-items: center;
}
.lang-btn {
  padding: .28rem .55rem;
  border-radius: var(--radius-sm);
  font-size: .78rem;
  font-weight: 600;
  color: var(--text-muted);
  text-decoration: none;
  border: 1.5px solid transparent;
  transition: background var(--t), color var(--t), border-color var(--t);
  white-space: nowrap;
}
.lang-btn:hover {
  background: var(--surface-2);
  color: var(--text);
  text-decoration: none;
}
.lang-btn--active {
  background: var(--primary-soft);
  color: var(--primary);
  border-color: var(--primary);
}

/* Mobile lang */
.mobile-lang {
  display: flex;
  gap: .35rem;
  padding: .5rem .75rem;
  border-top: 1px solid var(--border);
  margin-top: .25rem;
}

@media (max-width: 680px) {
  .lang-switcher { display: none; }
}