:root {
  /* Color Palette */
  --color-text: #d3d3d3;
  --color-text-heavy: #f1f1f1;
  /* --color-text: #f3f4ff; */
  --color-text-minor: #d8d8d8;
  --color-muted: #8f95b2;
  --color-muted-light: var(--color-muted);
  --color-link: #2187b6;
  --color-link-heavy: #004a6d;
  --color-link-minor: #2398ce;
  --color-primary: #44ff44;
  --color-link-t-20: rgba(63,130,255,0.2);
  --color-link-t-30: rgba(63,130,255,0.3);
  --color-link-t-60: rgba(63,130,255,0.6);
  --color-success: #44ff44;
  --color-blue: #3f82ff;
  --color-h: #ff9944;
  --color-danger: #ff4444;
  --color-fail: #ef4444;
  --color-yellow: #ffaa00;
  --color-warning: #ff6600;
  --toast-bg: #10b981;

  /* Backgrounds */
  --bg-body: #0b1020;
  --bg-header-footer: #0d1220;
  --bg-card: #151a2c;
  --bg-surface-2: #1a202c;
  --bg-surface-hover: #1e2a3a;
  --bg-overlay: rgba(0,0,0,0.2);
  --bg-disabled: #3a3f55;

  /* Borders */
  --border-main: 1px solid #252b41;
  --border-a08: 1px solid rgba(255,255,255,0.08);
  --border-a10: 1px solid rgba(255,255,255,0.1);

  /* Radii & Transitions */
  --radius-12: 12px;
  --radius-8: 8px;
  --radius-6: 6px;
  --radius-999: 999px;
  --transition-fast: all 0.2s;
}

/* ==================== Theme Light ==================== */
body.theme-light {
  /* Color Palette */
  --color-text: #3f3f3f;
  --color-text-heavy: #2f2f2f;
  --color-text-minor: #323232;
  --color-muted: #737373;
  --color-muted-light: #b8b8b8;
  --color-link: #004a6d;
  --color-link-heavy: #2398ce;
  --color-link-minor: #2187b6;
  --color-link-t-20: rgba(31,182,20,0.2);
  --color-link-t-30: rgba(31,182,20,0.3);
  --color-link-t-60: rgba(31,182,20,0.6);
  --color-primary: #16a34a;
  /* --color-success: #99CD58; */
  --color-success: #3caa3c;
  --color-h: #00808b;

  /* Backgrounds */
  --bg-header-footer: #302c1e;
  /* --bg-body:#F8F4F1; 降低亮度8% */
  --bg-body: #fffdf8;
  /* --bg-body: #FFFBF0; */
  --bg-card: #FFFCF5; /* 降低亮度2% */
  /* --bg-card: #FFFAF0; */
  --bg-surface-2: #FFFAF0;
  --bg-surface-hover:#FFF9E7;
  --bg-surface-heavy: #FFF8DC;
  --bg-overlay: #f9f3e6;
  --bg-disabled: #E8E4D9;

  /* Borders */
  --border-main: 1px solid #ede4c5;
  /* --border-main: 1px solid #f5eac8; */
  --border-a08: 1px solid rgba(0,0,0,0.08);
  --border-a10: 1px solid rgba(0,0,0,0.1);
}

/* ==================== Base & Global ==================== */
html {-webkit-text-size-adjust: 100%; text-size-adjust: 100%;} /* 防止浏览器自动调整字体 */
body {
  background: var(--bg-body); color: var(--color-text);
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "PingFang SC", "Microsoft YaHei", sans-serif;
  padding: 0; margin: 0;
  overflow-x: hidden;
}
a {color: var(--color-link); text-decoration: none; transition: var(--transition-fast);}
a:hover {color: var(--color-link);}
h1 {font-size: 28px; color: var(--color-primary); line-height: 1.2;}
h1 > span {color: var(--color-text-heavy);}
h2 {font-size: 24px; color: var(--color-h);}
h3 {font-size: 22px; color: var(--color-text);}
h4 {font-size: 20px;}
p, h1, h2, h3, h4 {margin: 0;}
p, section > h2, section > h3, section > h4 {line-height: 1.7;}
p {font-size: 17px; letter-spacing: 0.02em;}
p + p {margin-top: 10px;}
img {max-width: 100%;}
ul, ol {padding-left: 2.625em;}
li {line-height: 1.5em; margin-top: 0.375em;}
fieldset {background-color: var(--bg-body); border: var(--border-main); border-radius: var(--radius-6); 
  padding: 0 10px 8px; margin: auto 0; min-width: 0; position: relative;}
fieldset > button {position: absolute; top: 0px; right: 6px;}
legend {font-size: 12px; font-weight: bold; color: var(--color-muted);}
/* overflow参数换行或缩略生效，均需上级"min-width: 0" | word-break: break-word;确保safari优先单词其次长文本换行 */
pre {padding: 8px 6px 8px; margin: 0; white-space: pre-wrap; word-break: break-word; overflow-wrap: anywhere;}
code {font-size: 15px; font-family: Consolas, system-ui; line-height: 1.5em;}
p > code {padding: 2px 4px; background-color: var(--bg-overlay); border-radius: var(--radius-6);}
center {font-size: 14px; color:var(--color-muted); margin-top: 12px; display: block; text-align: center;}

/* ==================== Components ==================== */

/* Layout */

.container, .header-pack, .footer-pack {max-width: 1080px; margin: 0 auto; width: calc(100% - 20px);}
.risk-score, .info-item, .header-links, .footer-links {display: flex; align-items: center;}

/* Spacing */
.container > * {margin-top: 20px;}
.info-item > *+* {margin-left: 6px;}
.risk-score > *+* {margin-left: 10px;}
.footer-links > a+a, 
.header-links > *+* {margin-left: 20px;}
.header-links > a {position: relative;}
.header-links > a::before {
  content: '';
  position: absolute;
  inset: -6px -10px; opacity: 0; z-index: -1;
  background: rgba(63, 255, 95, 0.1); border-radius: var(--radius-6);
  transition: opacity 0.2s;
}
.header-links > a:hover::before {opacity: 1;}
.header-links > a:hover {color: whitesmoke;}

.page-header {
  position: -webkit-sticky; position: sticky; top: 0; z-index: 100; width: 100%;
  background: var(--bg-header-footer); border-bottom: var(--border-main);
}
.site-footer {background: var(--bg-header-footer); border-top: var(--border-main); padding: 20px 0; margin-top: 25px;}
.header-pack {height: 56px; box-sizing: border-box; color: var(--color-muted-light);}
.header-pack, .footer-pack, .h1-header, .card-header, .card-head-jcsb, .site-path {display: flex; align-items: center; justify-content: space-between;}
.h1-header {margin: 16px 0 -8px;}
.card-header > *+*, 
.card-head-jcsb > *+* {margin-left: 10px;} /* 非多项仅自适应断行时有用 */

.site-name {color: var(--color-muted-light); font-size: 18px; font-weight: bold; line-height: 1;}
.site-name:hover,
.site-path > a:hover {color: var(--color-link-minor);}

.header-link {color: var(--color-muted-light); font-size: 14px; white-space: nowrap;}
/* .header-link:hover {color: var(--color-text); background: rgba(63,130,255,0.1); border-radius: var(--radius-6); margin: 6px 12px;} */

.footer-copyright, .footer-copyright > span > a, .footer-links > a {font-size: 13px; color: var(--color-muted-light);}
.footer-copyright > span > a:hover, .footer-links > a:hover {color: var(--color-link-minor);}

/* .subtitle {color: var(--color-muted);} */
article, 
.card {background: var(--bg-card); border: var(--border-main); border-radius: var(--radius-12); padding:16px;}
/* .card > :first-child + * {margin-top: 16px;} */
.card > .bg-lay-fcc, 
.card > .bg-lay-br, 
.card-header + p, 
.card-header + section {margin-top: 12px;}
.card-header + div, 
.card-head-jcsb + * {margin-top: 16px;}

.card-title {font-size:24px; font-weight: bold; color: var(--color-text-heavy); margin: 0;}
.card-title > span {color: var(--color-muted); padding: 0 8px;}

/* -- Details Only -- */

.doc-head {display: flex; align-items: center; color: var(--color-muted); margin-top: 4px;}
.doc-meta, .flex-fww {display: flex; flex-wrap: wrap;}
.doc-meta > * {margin: 8px 16px 0 0; white-space: nowrap;}
/* .doc-meta > *:last-child {margin-right: 0px;} */
.doc-btns {white-space: nowrap;}
.doc-btns > button+button {margin: 8px 0 0 16px;}
.doc-imgs {text-align: center;}
.doc-imgs > img:not(:first-child), 
.doc-imgs > a:not(:first-child) > img {margin-top: 16px;}

/* Table */

table {width:100%; border-collapse:collapse; margin-top:10px; font-size: 13px;}
th, td {padding:8px; border-bottom: var(--border-a08);}
th:first-child {white-space: nowrap;}
th {text-align:left; color: var(--color-muted);}

/* Table Toogle */

.toggleable-row {display: none;}
.toggleable-row.visible {display: table-row;}
.toggle-btn {
  display: block; width: 100%;
  font-size: 11px; text-align: center;
  margin:0; padding: 3px 0; cursor: pointer;
  color: var(--color-link); background: var(--bg-surface-2);
  border: none; border-radius: 0 0 var(--radius-8) var(--radius-8);
  transition: var(--transition-fast);
}
.toggle-btn:hover {background: var(--bg-overlay);}

/* Button */

.btn {background: var(--color-link-t-20); border:1px solid var(--color-link-t-60); padding:4px 8px;
  border-radius: var(--radius-6); color: var(--color-text); cursor:pointer; flex-shrink: 0;
  font-size: 14px; white-space: nowrap; transition: var(--transition-fast); position: relative;}
.btn > .unicode-symbol {display: inline-block; transform: scale(1.14);}
.btn:hover:not(:disabled) {background: var(--color-link-t-30);}
.btn:disabled {color: var(--color-muted); background: var(--bg-disabled); border-color: var(--bg-disabled); cursor: progress;}
.btn-mask {position: absolute; inset: 0; border: inherit; border-radius: inherit; display: flex; align-items: center;
  justify-content: center; opacity: 0; pointer-events: none; transition: opacity 0.2s; background: var(--bg-disabled);}
.btn.loading > .btn-mask {opacity: 1; pointer-events: auto;}
.btn-small {padding: 2px 6px; font-size: 12px;}

nav > .btn-icon, 
.header-pack > .btn-icon {color:var(--color-muted-light)}
.btn-icon {color:var(--color-link); background: none; border: none; padding: 0; cursor: pointer; transition: color 0.2s;}
.btn-icon svg {vertical-align: middle;}
.btn-icon:hover {color: var(--color-link-minor);}

/* IP Address Specific */

.ipv6-break {word-break: break-all; overflow-wrap: break-word;}
#main-ip {font-size: 24px; white-space: nowrap;}
#main-ip.ipv6 {font-size: max(13px, min(4.2vw, 24px));}
#cf-uag {word-break: break-word; white-space: normal;}

/* Layout Grid */

.grid-cols-4p {display: grid; grid-template-columns: repeat(4, 1fr); grid-gap: 12px;}
.cols-3 {grid-template-columns: repeat(3, 1fr);}
.cols-2 {grid-template-columns: repeat(2, 1fr);}
.cols-2i {grid-template-columns: repeat(2, 1fr) !important;}
.cols-2_1 {grid-template-columns: 2fr 1fr !important;}
.cols-3_1 {grid-template-columns: 3fr 1fr !important;}

/* Layout Flex */

.card-pack {display: flex; align-items: center; justify-content: space-between;}
.card-pack > *+* {margin-left: 10px;}
.card-pack > div > a:hover, .item-header > a:hover {text-decoration: underline;}
.hover:hover, .card-sf2.card-pack:hover {background: var(--bg-surface-hover);}
.hover-a:hover > a, .card-sf2.card-pack:hover > .item-header > a {text-decoration: underline;}
.flex-col {display: flex; flex-direction: column;}
.flex-col-miw0 {display: flex; flex-direction: column; min-width: 0;}
 /* flex: 1; 删除无影响。 min-width: 0; overflow: hidden; 影响测速.domain缩进，任意保留一个即可 */
.flex-col-miw0 > *+* {margin-top: 8px;}
.item-header {display: flex; align-items: center; min-width: 0;}
/* 上方 min-width: 0; 解决父级无min-width时，子级.domain不缩略问题 */
.item-header > *+* {margin-left: 6px;}
.item-header > img.favicon {margin-left: 0;}
.stats-row {display: flex; flex-direction: column; flex-shrink: 0;} /* flex-shrink: 0; 防止容器小于内容，目前各视口不影响，可移除 */
.stats-row > *+* {margin-top: 4px;}
.flex-col-aic {display: flex; flex-direction: column; align-items: center;}

.card-sf2 {background: var(--bg-surface-2); border: var(--border-main); border-radius: var(--radius-8); padding:12px; overflow: visible; min-width: 0;}

/* Background Overlay */

.bg-lay-fcc, .bg-lay-br {display: flex; align-items: center; background: var(--bg-overlay); border-radius: var(--radius-8);}
.bg-lay-fcc {justify-content: center; padding: 12px;}
.bg-lay-fcc > *+* {margin-left: 20px;}
/* 模拟gap */
.bg-lay-br {flex-wrap: wrap; padding: 6px;}
.bg-lay-br > * {margin: 6px;}

/* Badge */

.badge {display: inline-flex; align-items: center; justify-content: space-between; 
  padding: 2px 6px; border-radius: var(--radius-999); font-size: 11px; white-space: nowrap;}
.badge > *+* {margin-left: 3px;}
.badge-soft {background: rgba(255, 255, 255, 0.05); border: var(--border-a10); color: var(--color-muted);}
.badge-value {font-family: monospace; font-weight: 600; text-align: right; min-width: 28px;}

/* Dot / Icon / Emoji */

.favicon {width: 20px; height: 20px; object-fit: contain; flex-shrink: 0;}
.favicon.emoji {font-size: 17px; line-height: 20px; display: inline-flex; align-items: center; justify-content: center;}
 /* 下方 display: block; 解决直系父级无flex时，图片下链接.domain不缩略及不单独成行问题 */
.list-title, .domain {font-size: 14px; font-weight: 600; color: var(--color-text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: block;}
.list-title {font-size: 16px; font-weight: normal; line-height: 1.5; white-space: pre-wrap;}
a.list-title:hover, a.domain:hover {color: var(--color-link-minor);}

[class^="dot"] {background-color: var(--color-muted); flex-shrink: 0; border-radius: 50%;}
.dot6 {width: 6px; height: 6px;}
.dot7 {width: 7px; height: 7px;}
.dot10 {width: 10px; height: 10px;}

.dot7.bgc-blink {animation: blink 0.6s infinite;}
@keyframes blink {
  0%, 100% {opacity: 1; background: var(--color-muted);}
  50% {opacity: 0.3; background: var(--color-text-heavy);}
}

/* Safari-specific override for symbol size */
@supports (-webkit-touch-callout: none) {
  .btn > .unicode-symbol {display: inline-block; transform: scale(2) translateY(-0.1em);} /* display 必须，否则scale无效*/
}

/* ==================== Utility Classes ==================== */

/* Typography */

.fwb {font-weight: bold;}
.fw600 {font-weight: 600;}
.text-12 {font-size: 12px;} .text-20 {font-size: 20px;}
.text-13 {font-size: 13px;} .text-24 {font-size: 24px;}
.text-14 {font-size: 14px;} .text-40 {font-size: 40px;}
.text-15 {font-size: 15px;} .text-48 {font-size: 48px;}
.text-16 {font-size: 16px;} .text-56 {font-size: 56px;}
.text-18 {font-size: 18px;} .text-64 {font-size: 64px;}

.wsnw {white-space: nowrap;}
.wspw {white-space: pre-wrap;}
.rad8 {border-radius: var(--radius-8);}

/* -- Colors -- */

.c-text {color: var(--color-text);}
.c-txt-l {color: var(--color-text-heavy);}
.c-txt-d {color: var(--color-text-minor);}
.c-muted {color: var(--color-muted);}
.c-muted-l {color: var(--color-muted-light);}
.c-link {color: var(--color-link);}
.c-h {color: var(--color-h);}
.c-success {color: var(--color-success);}
.c-blue {color:var(--color-blue)}
.c-danger {color: var(--color-danger);}
.c-yellow {color: var(--color-yellow);}
.c-warning {color: var(--color-warning);}
.c-primary {color: var(--color-primary);}

/* -- Background Colors -- */

.bgc-success {background-color: var(--color-success);}
.bgc-blue {background-color: var(--color-blue);}
.bgc-yellow {background-color: var(--color-yellow);}
.bgc-warning {background-color: var(--color-warning);}
.bgc-fail {background-color: var(--color-fail);}
.bgc-tested {background: var(--bg-surface-hover);}

/* -- Layout -- */

.tac {text-align: center;}
.vac {vertical-align: center;}

.flex {display: flex;}
.aic {align-items: center;}
.jcc {justify-content: center;}
.jcsb {justify-content: space-between;}

/* ========== Parking Page Specific Styles ========== */

.login-form {display: flex; flex-direction: column;}
.login-form > * {margin-top: 16px;}
.login-form > div > input {
    width: 100%; box-sizing: border-box; padding: 8px 12px;
    border: var(--border-main); border-radius: var(--radius-6);
    color: var(--color-text); background: var(--bg-surface-2);
    font-size: 16px; /* iOS不自动放大的最小尺寸 */
    transition: var(--transition-fast);
}
.login-form > div > input:focus {outline: none; border-color: var(--color-link-t-60); background: var(--bg-card);}
.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;}

/* -- Spacing -- */

.ml4g > *+* {margin-left: 4px;}
.mt8g > *+* {margin-top: 8px;}
.mt0 {margin-top: 0;}   .mt12 {margin-top: 12px;}
.mt4 {margin-top: 4px;} .mt16 {margin-top: 16px;}
.mt6 {margin-top: 6px;} .mt18 {margin-top: 18px;}
.mt8 {margin-top: 8px;} .mt20 {margin-top: 20px;}
.ml12 {margin-left: 12px;}
.pd24 {padding: 24px;}

.wf {width: 100%;}
.wh16 {width: 16px; height: 16px;}
.wh20 {width: 20px; height: 20px;}
.wh24 {width: 24px; height: 24px;}

/* -- overlay -- */

.toast {
    position: fixed; z-index: 9999;
    color: white; background: var(--toast-bg);
    padding: 8px 16px;
    border-radius: 6px; box-shadow: 0 2px 8px rgba(0,0,0,0.2);
    font-size: 14px;
}
.modal-overlay {
    position: fixed; z-index: 50;
    top: 0; right: 0; bottom: 0; left: 0;
    padding: 0 16px; background: rgba(0, 0, 0, 0.5);
    display: flex; align-items: center; justify-content: center;
}
.modal-content {max-width: 28rem; width: 100%; transition: all 0.3s; transform: scale(0.95); opacity: 0;}
.modal-content.active {transform: scale(1); opacity: 1;}
.hidden {display: none !important;}

/* ========== Media Queries ========== */

@media (max-width: 1080px) {
  .grid-cols-4p {grid-template-columns: repeat(3, 1fr);}
  .card-sf2 {padding: 10px;}
  /* .stats-row {flex-shrink: 1; min-width: 0;} */
}
@media (max-width: 800px) {
  .h1-header > h1.text-48, .h1-header > .btn-icon.text-48 {font-size: 36px;} /* Parking 特有 */
  .grid-cols-4p {grid-template-columns: repeat(2, 1fr);}
  .footer-pack {flex-direction: column; text-align: center;}
  .footer-pack > *+* {margin-top: 12px;}
}
@media (max-width: 640px) {
  .h1-header > h1.text-48 > span {display: block; margin-top: 8px;} /* Parking 特有 */
  .h1-header, .card-header {justify-content: center; text-align: center; position: relative;} /* Parking 特有 */
  .h1-header > .btn, 
  .h1-header > .btn-icon, 
  .card-header > .btn, 
  .card-header > .btn-icon {position: absolute; right: 0; margin: auto 0;} /* Parking 特有 | 按钮靠右 - 加 top:0; 可靠上。*/ 
  .h1-header > .btn-icon {display: none;} /* Parking 特有 | 隐藏主标题区的按钮 */
  .header-pack > *+* {margin-left: 8px;}
  .bg-lay-fcc {padding: 10px;}
  .bg-lay-fcc > *+* {margin-left: 12px;}
  .bg-lay-br {padding: 6px;}
  .bg-lay-br > * {margin: 4px;}
}
@media (max-width: 540px) {
  .grid-cols-4p {grid-template-columns: 1fr;}
  .footer-copyright > span:last-child {display: block; margin-top: 12px;}
  /* .footer-copyright > a {font-size: 11px;} */
  .card-title > span {display: block; margin-top: 8px;} /* Parking 特有 */
  .cols-2i {grid-template-columns: 1fr !important; grid-gap: 12px;}
  .cols-3_1 {grid-template-columns: 1fr !important; grid-gap: 8px;}
  .cols-2_1 {grid-template-columns: 1fr !important; grid-gap: 8px;} /* Parking 特有 */
  .cols-2_1 > .card:first-child {margin-bottom: 12px;} /* Parking 特有 */
  .domain {font-size: 16px;}
}