:root { --ink:#090c0b; --panel:#131917; --paper:#f3f5ee; --muted:#9aaba2; --line:rgba(255,255,255,.2); --teal:#0c8b73; --teal-light:#83dcb8; --coral:#e34d31; --red:#ef6a5c; --display:"PingFang SC","Hiragino Sans GB","Microsoft YaHei",system-ui,sans-serif; }
* { box-sizing:border-box; } html { scroll-behavior:smooth; } body { margin:0; min-height:100dvh; background:var(--ink); color:white; font-family:var(--display); } button,input { font:inherit; } a { color:inherit; text-decoration:none; } button { cursor:pointer; }
.tool-nav { min-height:78px; display:flex; align-items:center; justify-content:space-between; gap:20px; padding:16px clamp(20px,5vw,76px); border-bottom:1px solid var(--line); } .tool-brand { display:flex; align-items:center; gap:11px; } .tool-brand img { width:95px; filter:brightness(0) invert(1); } .tool-brand span { padding-left:11px; border-left:1px solid var(--line); color:var(--muted); font-size:12px; } .tool-nav a:last-child { color:var(--teal-light); font-size:13px; font-weight:800; }
.tool-main { width:min(1160px,calc(100% - 40px)); margin:0 auto; } .tool-hero { display:grid; grid-template-columns:minmax(0,.86fr) minmax(360px,1.14fr); gap:clamp(50px,10vw,150px); align-items:center; min-height:calc(100dvh - 78px); padding:clamp(70px,9vw,120px) 0; } .eyebrow { display:flex; align-items:center; gap:8px; margin:0 0 20px; color:var(--teal-light); font-size:11px; font-weight:900; letter-spacing:.14em; } .eyebrow i { width:8px; height:8px; border-radius:50%; background:var(--teal); box-shadow:0 0 0 5px rgba(12,139,115,.17); }
h1 { margin:0 0 22px; font-size:clamp(48px,7vw,94px); line-height:.92; letter-spacing:0; } h1 em { color:var(--teal); font-style:normal; } .tool-copy>p:last-child { max-width:510px; margin:0; color:rgba(255,255,255,.65); font-size:16px; line-height:1.85; }
.tool-shell { border:1px solid rgba(255,255,255,.48); border-radius:5px; background:var(--panel); box-shadow:12px 12px 0 var(--teal); } .tool-shell-top { min-height:53px; display:flex; align-items:center; justify-content:space-between; padding:0 18px; border-bottom:1px solid var(--line); color:rgba(255,255,255,.7); font-size:11px; font-weight:800; } .tool-shell-top svg { width:17px; color:var(--teal-light); }
.tool-form { display:grid; gap:16px; padding:27px; } label { display:grid; gap:8px; color:rgba(255,255,255,.72); font-size:12px; font-weight:800; } input { width:100%; min-height:47px; border:1px solid rgba(255,255,255,.23); border-radius:3px; padding:10px 12px; outline:0; background:#090c0b; color:white; transition:border-color .2s ease,box-shadow .2s ease; } input:focus { border-color:var(--teal-light); box-shadow:0 0 0 3px rgba(131,220,184,.12); }
.tool-button { min-height:47px; display:inline-flex; align-items:center; justify-content:center; gap:9px; border:1px solid transparent; border-radius:3px; padding:10px 15px; background:var(--paper); color:var(--ink); font-size:13px; font-weight:900; transition:background .2s ease,transform .2s ease; } .tool-button:hover:not(:disabled) { background:var(--teal-light); transform:translateY(-2px); } .tool-button:disabled { opacity:.55; cursor:not-allowed; } .tool-button svg { width:16px; } .tool-button.alt { border-color:rgba(255,255,255,.3); background:transparent; color:white; } .tool-button.alt:hover:not(:disabled) { border-color:var(--teal-light); background:rgba(131,220,184,.12); } .tool-button[hidden] { display:none; }
.status-grid { display:grid; grid-template-columns:repeat(3,1fr); border-top:1px solid var(--line); } .status-grid div { min-height:82px; display:grid; align-content:center; gap:5px; padding:14px; border-right:1px solid var(--line); } .status-grid div:last-child { border:0; } .status-grid span { color:var(--muted); font-size:10px; font-weight:800; } .status-grid strong { overflow:hidden; color:white; font-size:13px; text-overflow:ellipsis; white-space:nowrap; } .status-grid strong.ok { color:var(--teal-light); } .status-grid strong.bad { color:#ff9b91; }
.tool-section { padding:0 0 105px; } .tool-section-head { display:flex; justify-content:space-between; align-items:end; gap:22px; padding:0 0 19px; border-bottom:1px solid var(--line); } .tool-section-head h2 { margin:0; font-size:clamp(29px,4vw,48px); line-height:1.05; } .tool-section-head p { margin:0; color:var(--muted); font-size:12px; } .platforms,.warehouse-results { display:grid; grid-template-columns:repeat(2,1fr); gap:0; border-left:1px solid var(--line); } .platform,.warehouse-card { min-height:220px; padding:29px; border-right:1px solid var(--line); border-bottom:1px solid var(--line); background:#101413; } .platform h3,.warehouse-card h3 { margin:0 0 9px; font-size:24px; } .platform p,.warehouse-card p { max-width:360px; min-height:42px; margin:0 0 27px; color:var(--muted); font-size:13px; line-height:1.65; } .platform .tool-button { width:100%; } .platform .path { margin:13px 0 0; color:rgba(255,255,255,.45); font-size:10px; }
.result-intro { margin:0; padding:28px 0; color:var(--muted); font-size:14px; line-height:1.7; } .empty-result { grid-column:1/-1; padding:38px 0; color:var(--muted); text-align:center; } .warehouse-id { color:var(--teal-light); font-size:31px; font-weight:900; } .warehouse-meta { min-height:auto !important; margin-bottom:20px !important; }
.tool-toast { position:fixed; z-index:10; left:50%; bottom:23px; max-width:calc(100vw - 36px); transform:translate(-50%,28px); border:1px solid rgba(131,220,184,.46); border-radius:4px; padding:12px 16px; background:#101413; color:white; font-size:13px; opacity:0; pointer-events:none; transition:opacity .2s ease,transform .2s ease; } .tool-toast.show { transform:translate(-50%,0); opacity:1; } .tool-toast.bad { border-color:rgba(239,106,92,.76); }
.tool-footer { width:min(1160px,calc(100% - 40px)); margin:0 auto; padding:24px 0; border-top:1px solid var(--line); color:#77877f; font-size:12px; }
@media(max-width:800px) { .tool-nav { min-height:70px; padding:13px 18px; }.tool-brand span { display:none; }.tool-main,.tool-footer { width:calc(100% - 36px); }.tool-hero { grid-template-columns:1fr; gap:44px; min-height:auto; padding:72px 0; }.tool-copy>p:last-child { font-size:15px; }.tool-shell { box-shadow:8px 8px 0 var(--teal); }.tool-section { padding-bottom:75px; }.platforms,.warehouse-results { grid-template-columns:1fr; }.status-grid { grid-template-columns:1fr; }.status-grid div { min-height:57px; grid-template-columns:95px 1fr; align-items:center; border-right:0; border-bottom:1px solid var(--line); }.status-grid div:last-child { border-bottom:0; }.tool-section-head { display:grid; align-items:start; }.tool-section-head h2 { font-size:33px; } }