/* wtfm.css - shared look for every *.wheretofindme.cn site.
 * Palette and components follow the navy portal style (styles.css); responsive
 * rules follow the PCT pages: <=760px single column, 44px touch targets,
 * nothing below 12px. Served from https://wheretofindme.cn/wtfm.css. */
:root{--navy:#071b46;--navy-2:#0c2b64;--ink:#16233c;--muted:#5d6d86;--soft:#8794a8;--line:#dce5f1;--bg:#eef3f9;--card:#fff;--blue:#1f7bf3;--cyan:#18a6c9;--green:#18ae72;--orange:#f29938;--amber:#f6b83f;--red:#ef4f4f;--purple:#8c5ae8;--magenta:#d94ad3;--shadow:0 4px 16px rgba(30,58,95,.09);--shadow-hover:0 10px 26px rgba(28,62,106,.14);--radius:10px;--font:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Microsoft YaHei",Arial,sans-serif}
*{box-sizing:border-box}html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--ink);font:14px/1.55 var(--font);-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}code{font:12px/1.4 ui-monospace,SFMono-Regular,Consolas,monospace;background:#eef3fa;border:1px solid var(--line);border-radius:5px;padding:1px 5px}

/* ---------- portal shell ---------- */
.portal{display:grid;grid-template-columns:248px minmax(0,1fr);min-height:100vh}
.sidebar{position:sticky;top:0;height:100vh;background:linear-gradient(180deg,#071b46 0%,#09265b 70%,#06183b 100%);color:#c9d8f3;padding:20px 14px;display:flex;flex-direction:column;box-shadow:5px 0 18px rgba(6,27,70,.18);z-index:20}
.brand{display:flex;gap:11px;align-items:center;padding:0 8px 20px;border-bottom:1px solid rgba(255,255,255,.12)}
.brand-mark{width:42px;height:42px;flex:0 0 42px;border-radius:9px;background:#fff;display:grid;grid-template-columns:repeat(3,1fr);gap:3px;padding:7px;box-shadow:0 0 0 2px rgba(75,137,255,.25)}
.brand-mark span{border-radius:3px;background:linear-gradient(180deg,#347dec,#173d9a)}.brand-mark span:nth-child(2){background:linear-gradient(180deg,#56c3f7,#1376d7)}.brand-mark span:nth-child(3){background:linear-gradient(180deg,#29c48a,#178d68)}
.brand strong{display:block;color:#fff;font-size:14px;letter-spacing:.03em}.brand small{display:block;color:#8fa8d2;font-size:12px;margin-top:2px}
.nav{display:flex;flex-direction:column;gap:4px;margin-top:18px}
.nav-item{border:0;background:transparent;color:#bed0ed;text-align:left;min-height:44px;padding:10px 12px;border-radius:7px;font:600 13px var(--font);display:flex;gap:10px;align-items:center;cursor:pointer;transition:.18s}
.nav-item:hover{background:rgba(255,255,255,.08);color:#fff}.nav-item.active{background:linear-gradient(90deg,#125ab6,#1979df);color:#fff;box-shadow:0 5px 14px rgba(9,91,198,.28)}
.nav-glyph{width:24px;height:24px;border-radius:6px;display:grid;place-items:center;font-size:12px;font-weight:800;background:rgba(255,255,255,.1)}
.nav-count{margin-left:auto;font-size:12px;color:#8fa8d2}.nav-item.active .nav-count{color:#dbe8ff}
.side-card{margin-top:auto;border:1px solid rgba(115,173,255,.3);background:rgba(2,14,40,.33);border-radius:9px;padding:13px;font-size:12px;color:#9fb5da}
.side-card b{display:block;color:#86e2b7;font-size:12px;text-transform:uppercase;letter-spacing:.08em;margin-bottom:6px}
.workspace{min-width:0;display:flex;flex-direction:column}
.topbar{min-height:76px;background:#fff;border-bottom:1px solid var(--line);display:flex;justify-content:space-between;align-items:center;gap:16px;padding:12px 24px}
.eyebrow{color:#6d7c93;font-size:12px;margin:0 0 3px;text-transform:uppercase;letter-spacing:.11em}
.topbar h1{font-size:22px;line-height:1.15;margin:0;color:#12213a}.subtitle{font-size:12px;color:var(--soft);margin:4px 0 0}
.top-actions{display:flex;gap:14px;align-items:center}
.clock{text-align:right}.clock span{display:block;font-weight:700;font-size:13px}.clock small{color:var(--muted);font-size:12px}
.searchbox{display:flex;align-items:center;gap:6px;height:40px;border:1px solid #d6e0ed;border-radius:8px;background:#fbfcfe;padding:0 11px;min-width:240px}
.searchbox input{border:0;outline:0;background:transparent;width:100%;color:var(--ink);font:13px var(--font)}
.content{padding:16px 18px 8px;flex:1}

/* ---------- KPI ---------- */
.kpi-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:12px}
.kpi{position:relative;overflow:hidden;background:#fff;border:1px solid var(--line);border-top:3px solid currentColor;border-radius:var(--radius);padding:14px 14px 12px;box-shadow:var(--shadow)}
.kpi:after{content:"";position:absolute;inset:auto -22px -22px auto;width:76px;height:76px;border-radius:50%;background:currentColor;opacity:.05}
.kpi span{display:block;color:#67778e;font-size:12px;text-transform:uppercase;letter-spacing:.05em}
.kpi strong{display:block;font-size:26px;line-height:1.15;margin:6px 0 2px;color:#17253d}.kpi small{font-size:12px;color:var(--soft)}
.c-blue{color:var(--blue)}.c-cyan{color:var(--cyan)}.c-green{color:var(--green)}.c-orange{color:var(--orange)}.c-amber{color:var(--amber)}.c-red{color:var(--red)}.c-purple{color:var(--purple)}.c-magenta{color:var(--magenta)}

/* ---------- panels ---------- */
.panel{background:#fff;border:1px solid var(--line);border-top:3px solid var(--accent,var(--blue));border-radius:var(--radius);box-shadow:var(--shadow);min-width:0;margin-top:14px}
.accent-blue{--accent:var(--blue)}.accent-cyan{--accent:var(--cyan)}.accent-green{--accent:var(--green)}.accent-orange{--accent:var(--orange)}.accent-purple{--accent:var(--purple)}.accent-red{--accent:var(--red)}.accent-magenta{--accent:var(--magenta)}
.panel-heading{min-height:50px;padding:10px 14px;display:flex;align-items:center;justify-content:space-between;gap:10px;border-bottom:1px solid #e8edf4}
.panel-kicker{font-size:12px;color:var(--accent,var(--blue));text-transform:uppercase;letter-spacing:.08em;font-weight:700}
.panel h2{font-size:15px;margin:2px 0 0;color:#1c2a42}.panel-period{font-size:12px;color:var(--soft)}
.panel-body{padding:14px}

/* ---------- site cards ---------- */
.site-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(270px,1fr));gap:12px;padding:14px}
.site-card{position:relative;display:flex;flex-direction:column;gap:9px;min-height:150px;border:1px solid #e0e8f2;border-radius:var(--radius);background:#f8fbff;padding:14px;transition:transform .16s ease,box-shadow .16s ease,border-color .16s ease}
.site-card:hover,.site-card:focus-visible{transform:translateY(-2px);box-shadow:var(--shadow-hover);border-color:#9bbce2;outline:none;background:#fff}
.site-head{display:flex;gap:11px;align-items:center}
.site-icon{width:40px;height:40px;flex:0 0 40px;border-radius:10px;display:grid;place-items:center;font-weight:800;font-size:13px;color:#fff;background:linear-gradient(135deg,var(--accent,var(--blue)),#173d9a)}
.site-title{font-size:15px;font-weight:700;color:#17253d;line-height:1.25}.site-host{font-size:12px;color:var(--muted);word-break:break-all}
.site-desc{font-size:13px;color:#44546b;flex:1}
.site-meta{display:flex;flex-wrap:wrap;gap:6px;align-items:center;font-size:12px;color:var(--muted)}
.status{display:inline-flex;align-items:center;gap:5px;font-weight:600}.status i{width:9px;height:9px;border-radius:50%;background:#a6afbd;box-shadow:0 0 0 3px rgba(166,175,189,.18)}
.status.up i{background:var(--green);box-shadow:0 0 0 3px rgba(24,174,114,.18)}.status.degraded i{background:var(--orange)}.status.down i,.status.cert-error i{background:var(--red);box-shadow:0 0 0 3px rgba(239,79,79,.18)}.status.link i{background:var(--cyan)}.status.pending-dns i{background:var(--amber);box-shadow:0 0 0 3px rgba(246,184,63,.2)}
.tag{display:inline-block;padding:2px 8px;border-radius:999px;background:#eef2f6;color:#5d6d86;font-size:12px;font-weight:600}
.tag.warn{background:#fff4e5;color:#b86a0c}.tag.bad{background:#fff0f0;color:#c93c3c}.tag.lock{background:#f4f0ff;color:#6a43c9}
.site-links{display:flex;flex-wrap:wrap;gap:6px}.site-links a{min-height:32px;display:inline-flex;align-items:center;padding:4px 10px;border-radius:7px;border:1px solid rgba(31,123,243,.25);background:rgba(31,123,243,.06);color:var(--blue);font-size:12px;font-weight:600}
.site-links a:hover{background:rgba(31,123,243,.12)}
.empty{padding:22px;text-align:center;border:1px dashed #cbd5e1;border-radius:8px;color:var(--soft);margin:14px}
.drift-list{display:flex;flex-wrap:wrap;gap:8px;padding:14px}

/* ---------- footer ---------- */
.beian{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:6px 18px;padding:18px 16px 22px;font-size:12px;color:var(--soft)}
.beian a:hover{color:var(--blue)}.beian span{display:inline-flex;align-items:center;gap:5px}.beian img{width:16px;height:16px}

/* ---------- standalone sub-site page ---------- */
body.page{min-height:100vh;display:flex;flex-direction:column}
.page-top{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:12px 22px;background:linear-gradient(90deg,#071b46,#0c2b64);color:#fff}
.page-brand{display:flex;align-items:center;gap:10px;font-weight:700;letter-spacing:.03em}.page-brand .brand-mark{width:34px;height:34px;flex-basis:34px;padding:6px}
.back-link{min-height:40px;display:inline-flex;align-items:center;padding:0 14px;border-radius:8px;background:rgba(255,255,255,.1);color:#dbe8ff;font-size:13px;font-weight:600}.back-link:hover{background:rgba(255,255,255,.18)}
.page-main{width:min(1080px,calc(100% - 32px));margin:26px auto;flex:1}
.page-main h1{font-size:28px;margin:0 0 6px;color:#12213a}.lead{color:var(--muted);font-size:15px;margin:0 0 6px}

/* ---------- responsive ---------- */
@media(max-width:1100px){.portal{grid-template-columns:210px minmax(0,1fr)}.searchbox{min-width:180px}}
@media(max-width:760px){
  .portal{grid-template-columns:1fr}
  .sidebar{position:static;height:auto;padding:12px 12px 10px;flex-direction:column}
  .brand{padding:0 4px 10px}.side-card{display:none}
  .nav{flex-direction:row;overflow-x:auto;margin-top:10px;padding-bottom:2px;scroll-snap-type:x mandatory}
  .nav-item{flex:0 0 auto;scroll-snap-align:start}
  .topbar{flex-direction:column;align-items:stretch;padding:12px 14px}.top-actions{justify-content:space-between}
  .clock{text-align:left}.searchbox{min-width:0;flex:1}
  .content{padding:12px 10px 4px}.kpi-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .site-grid{grid-template-columns:1fr;padding:10px}.page-top{padding:10px 14px}.page-main h1{font-size:23px}
}