/* =========================================================
   v9.5 線上功能：好友與交易視窗（#net-ov）、信箱裡的線上信件、登入畫面、基地的「好友」
   面板沿用鑑定中心的 .gp（grade.css）；這裡只補線上功能自己的東西
   ========================================================= */
#net-ov{position:absolute;inset:0;z-index:85;display:flex;align-items:center;justify-content:center;background:#05060ccc;backdrop-filter:blur(2px)}
#net-ov.hidden{display:none}
.gp-net .gp-body{flex-direction:column;gap:8px}
.gp.nt-small{width:560px;height:auto;max-height:440px}
.nt-dim{font-size:11.5px;font-weight:800;color:#8a5a12}
.nt-none{font-size:11px;font-weight:800;color:#8a7a5a}

/* 兩欄（好友清單｜加好友） */
.nt-two{flex:1;min-height:0;display:flex;gap:10px}
.nt-col{min-height:0;overflow-y:auto}
.nt-flist{flex:1.5;display:flex;flex-direction:column;gap:6px;padding-right:2px}
.nt-side{flex:1;display:flex;flex-direction:column;gap:6px;padding:8px;background:#fff8e6;border:3px solid #000;box-shadow:0 3px 0 #0004}
.nt-fr{display:grid;grid-template-columns:44px 1fr auto;gap:8px;align-items:center;padding:6px 8px;background:#fffdf5;border:3px solid #000;box-shadow:0 3px 0 #0004}
.nt-face{width:44px;height:44px;border:2px solid #000;background:#fff6dd;image-rendering:auto}
.nt-face.big{width:72px;height:72px;border-width:3px}
.nt-face.huge{width:132px;height:132px;border-width:3px}
.nt-fn{min-width:0;display:flex;flex-direction:column;line-height:1.35}
.nt-fn b{font-size:14.5px;font-weight:900;color:#3d2308}
.nt-fn small{font-size:10.5px;font-weight:800;color:#8a5a12}
.nt-on{align-self:flex-start;font-style:normal;font-size:10px;font-weight:900;line-height:15px;padding:0 6px;color:#fff;background:#3f9c48;border:2px solid #1f5a2c}
.nt-on.hall{background:#8b47cf;border-color:#4a2a7a}
.nt-fb{display:flex;gap:4px;align-items:center}
.nt-fb .px-btn{padding:4px 8px;font-size:12px}
.nt-fb .pxi{width:15px;height:15px;vertical-align:-3px}
.nt-rm{width:26px;height:26px;padding:0;cursor:pointer;font-family:inherit;font-size:12px;font-weight:900;color:#8a5a12;background:none;border:2px solid #c9b27a}
.nt-rm:hover{color:#fff;background:#d8303f;border-color:#000}
.nt-addrow{display:flex;gap:4px}
.nt-addrow input,#nt-msg{flex:1;min-width:0;padding:5px 8px;font-family:inherit;font-size:13px;font-weight:700;color:#3d2308;background:#fff;border:3px solid #000;outline:0}
.nt-addrow input:focus,#nt-msg:focus{box-shadow:0 0 0 2px #ffd75e}
.nt-results{display:flex;flex-direction:column;gap:4px}
.nt-req{display:flex;align-items:center;gap:6px;padding:4px 6px;background:#fff;border:2px solid #000}
.nt-req b{flex:1;min-width:0;font-size:13px;font-weight:900;color:#3d2308;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.nt-req small{font-size:10.5px;font-weight:800;color:#8a5a12}
.nt-req .px-btn{padding:3px 8px;font-size:11.5px}

/* 交易清單 */
.nt-trs{flex:1;min-height:0;overflow-y:auto;display:flex;flex-direction:column;gap:6px;padding-right:2px}
.nt-tr{padding:6px 8px;background:#fffdf5;border:3px solid #000;box-shadow:0 3px 0 #0004}
.nt-tr.in{background:#fff6d0;box-shadow:0 3px 0 #0004,0 0 0 2px #ffd75e}
.nt-trh{display:flex;align-items:center;gap:8px}
.nt-trh b{font-size:14px;font-weight:900;color:#3d2308}
.nt-trh small{font-size:10.5px;font-weight:800;color:#8a5a12}
.nt-trh q{flex:1;min-width:0;font-size:11.5px;font-weight:700;color:#6b4a1e;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.nt-trh .px-btn{margin-left:auto;padding:3px 10px;font-size:12px}
.nt-trb{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:4px}
.nt-trb>span{display:flex;flex-wrap:wrap;gap:3px;align-items:center}
.nt-trb small{width:100%;font-size:10px;font-weight:900;color:#8a5a12}
.nt-st{font-style:normal;font-size:10.5px;font-weight:900;line-height:16px;padding:0 6px;color:#fff;background:#6a7384;border:2px solid #000}
.nt-st.ok,.nt-st.done{background:#3f9c48}.nt-st.no,.nt-st.declined{background:#d8303f}.nt-st.new{background:#e0761a}.nt-st.wait,.nt-st.open{background:#4aa8e0}.nt-st.cancelled{background:#6a7384}
.nt-chip{display:inline-flex;align-items:center;gap:3px;padding:1px 7px 1px 3px;font-size:11.5px;font-weight:800;color:#3d2308;background:#fff;border:2px solid #000;line-height:18px}
.nt-chip .pxi{width:16px;height:16px}
.nt-chip.miss{color:#fff;background:#d8303f}

/* 帳號：玩家證（左）＋連線狀態（右） */
.nt-me{flex:1;min-height:0;display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:14px;align-items:stretch;padding:4px}
.nt-lic{display:flex;flex-direction:column;overflow:hidden;background:linear-gradient(135deg,#fff8dc,#f7e3a8);border:4px solid #000;border-radius:14px;box-shadow:0 5px 0 #0005,inset 0 0 0 3px #ffd75e}
.nt-lic-top{display:flex;align-items:center;gap:10px;padding:8px 14px;color:#fff8dc;border-bottom:4px solid #000;
  background:repeating-linear-gradient(92deg,#8a5423 0 7px,#6f4420 7px 11px,#a06a33 11px 15px)}
.nt-lic-top span{font-size:11px;font-weight:900;letter-spacing:2px;opacity:.9}
.nt-lic-top b{font-size:18px;font-weight:900;letter-spacing:4px;text-shadow:2px 2px 0 #000}
.nt-lic-top em{margin-left:auto;padding:1px 8px;font-style:normal;font-size:12px;font-weight:900;color:#ffd75e;background:#000a;border:2px solid #ffd75e;font-variant-numeric:tabular-nums}
.nt-lic-body{flex:1;display:flex;gap:14px;align-items:center;padding:14px}
.nt-lic-info{flex:1;min-width:0;display:flex;flex-direction:column;gap:4px}
.nt-lic-info>small{font-size:11px;font-weight:900;color:#8a5a12}
.nt-lic-name{font-size:24px;font-weight:900;line-height:1.1;color:#3d2308;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.nt-lic-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;margin-top:8px}
.nt-lic-stats span{display:flex;flex-direction:column;align-items:center;padding:4px 2px;background:#fffdf5;border:2px solid #000;box-shadow:0 2px 0 #0004}
.nt-lic-stats b{font-size:18px;font-weight:900;line-height:1.1;color:#3d2308;font-variant-numeric:tabular-nums}
.nt-lic-stats small{font-size:10px;font-weight:900;color:#8a5a12}
.nt-mestat{min-width:0;display:flex;flex-direction:column;gap:8px}
.nt-srow{display:grid;grid-template-columns:14px 5.2em 1fr;gap:8px;align-items:center;padding:8px 10px;font-size:12.5px;background:#fffdf5;border:3px solid #000;box-shadow:0 3px 0 #0004}
.nt-srow b{font-weight:900;color:#3d2308}
.nt-srow span{font-weight:700;line-height:1.4;color:#3d2308}
.nt-dot{width:12px;height:12px;background:#9aa3b2;border:2px solid #000}
.nt-srow.ok .nt-dot{background:#3fbf4a;box-shadow:0 0 6px #3fbf4a}
.nt-srow.wait .nt-dot{background:#f0b429}
.nt-srow.bad{background:#ffe3e0}.nt-srow.bad .nt-dot{background:#d8303f}
.nt-priv{margin:0;display:flex;gap:6px;align-items:flex-start;padding:6px 8px;font-size:11.5px;font-weight:700;line-height:1.55;color:#6b4a1e;background:#fff8e6;border:2px dashed #c9b27a}
.nt-priv .pxi{flex:0 0 auto;width:16px;height:16px;margin-top:1px}
.nt-mebtns{display:flex;gap:8px;margin-top:auto}
.nt-mebtns .px-btn{padding:8px 16px;font-size:14px}
.nt-mebtns .px-btn .pxi{width:16px;height:16px;vertical-align:-3px}
/* 名片＝對方的玩家證 */
.nt-lic-card{margin:2px}
.nt-lic-card .nt-lic-body{padding:12px 14px 8px}
.nt-lic-sub{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.nt-lic-sub small{font-size:11px;font-weight:800;color:#8a5a12}
.nt-lic-stats.three{grid-template-columns:repeat(3,1fr)}
.nt-lic-inv{margin:6px 0 0;display:flex;gap:5px;align-items:center;font-size:11.5px;font-weight:800;color:#6b4a1e}
.nt-lic-inv .pxi{width:15px;height:15px}
.nt-lic-card .nt-cbtns{padding:0 14px 12px;margin:0}
.nt-lic-card .nt-cbtns .px-btn{padding:7px 14px;font-size:13.5px}
/* 名片、帳號共用的「標題：內容」清單 */
.nt-dl{margin:0;display:flex;flex-direction:column;gap:5px}
.nt-dl div{display:grid;grid-template-columns:6.5em 1fr;gap:8px;font-size:12.5px;line-height:1.5}
.nt-dl dt{font-weight:900;color:#8a5a12}
.nt-dl dd{margin:0;font-weight:700;color:#3d2308}

/* 名片 */
.nt-cbtns{display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin-top:4px}
.nt-cbtns .pxi{width:16px;height:16px;vertical-align:-3px}

/* 交易提案 */
.nt-build{flex:1;min-height:0;display:flex;gap:6px;align-items:stretch}
.nt-bcol{flex:1;min-width:0;display:flex;flex-direction:column;gap:5px;padding:6px;background:#fff8e6;border:3px solid #000}
.nt-cats{display:flex;gap:4px}
.nt-inv{flex:1;min-height:0;overflow-y:auto;display:flex;flex-direction:column;gap:4px;padding-right:2px}
.nt-arrow{align-self:center;font-size:24px;font-weight:900;color:#3d2308;text-shadow:0 2px 0 #fff}
.nt-it{display:flex;align-items:center;gap:6px;padding:3px 6px;background:#fff;border:2px solid #000}
.nt-it.on{background:#fff3c4;box-shadow:0 0 0 2px #ffd75e}
.nt-it>.pxi{width:22px;height:22px;flex:0 0 auto}
.nt-rar{flex:0 0 auto;width:6px;align-self:stretch;background:var(--rc)}
.nt-itn{flex:1;min-width:0;display:flex;flex-direction:column;line-height:1.25}
.nt-itn b{font-size:12.5px;font-weight:900;color:#3d2308;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.nt-itn small{font-size:10px;font-weight:800;color:#8a5a12}
.nt-step{display:flex;align-items:center;gap:2px}
.nt-step button{min-width:24px;height:22px;padding:0 3px;cursor:pointer;font-family:inherit;font-size:12px;font-weight:900;color:#1c1c1c;background:linear-gradient(#f4f4f4,#cfcfcf);border:2px solid #000}
.nt-step button:disabled{opacity:.35;cursor:default}
.nt-step b{min-width:26px;text-align:center;font-size:13px;font-weight:900;color:#3d2308;font-variant-numeric:tabular-nums}
.nt-slabs{display:flex;flex-wrap:wrap;gap:6px}
.nt-sl{padding:3px;cursor:pointer;background:none;border:2px solid transparent}
.nt-sl .gslab{zoom:.6;pointer-events:none}
.nt-sl{position:relative}
.nt-sl.on{border-color:#ffd75e;background:#fff3c4;box-shadow:0 0 0 2px #000}
.nt-sl.on::after{content:'✔';position:absolute;top:-6px;right:-6px;width:20px;height:20px;display:grid;place-items:center;font-size:12px;font-weight:900;color:#fff;background:#3f9c48;border:2px solid #000;border-radius:50%}
.nt-sl:hover:not(.on){border-color:#c9b27a}
.nt-bfoot{flex:0 0 auto !important;display:grid;grid-template-columns:1fr 240px auto;gap:8px;align-items:center}
.nt-sum{min-width:0;display:flex;flex-direction:column;gap:2px;max-height:52px;overflow-y:auto}
.nt-sum span{display:flex;flex-wrap:wrap;gap:3px;align-items:center}
.nt-sum small{font-size:10px;font-weight:900;color:#8a5a12;margin-right:3px}
#nt-msg{flex:none}

/* 一筆交易 */
.nt-tview{flex:1;min-height:0;display:flex;flex-direction:column;gap:6px;position:relative}
.nt-tmsg{align-self:center;max-width:80%;padding:5px 12px;font-size:13px;font-weight:800;color:#3d2308;background:#fff;border:2px solid #000;border-radius:10px}
.nt-tcols{flex:1;min-height:0;display:flex;gap:6px}
.nt-tc{flex:1;min-width:0;display:flex;flex-direction:column;gap:6px;padding:8px;overflow-y:auto;background:#fff8e6;border:3px solid #000}
.nt-tcards{display:flex;flex-wrap:wrap;gap:6px}
.nt-tslab .gslab{zoom:.62}
.nt-tslab.miss{outline:3px solid #d8303f;outline-offset:2px}
.nt-tchips{display:flex;flex-wrap:wrap;gap:4px}
.nt-warn{margin:0;font-size:11.5px;font-weight:900;color:#d8303f}
.nt-tfoot{flex:0 0 auto;display:flex;align-items:center;gap:8px;justify-content:flex-end}
.nt-tfoot .nt-st{margin-right:auto;font-size:12px;line-height:20px;padding:0 10px}

/* 信箱裡的線上信件 */
.mail-item.nt-mail{box-shadow:0 0 0 3px #ffd75e,0 4px 0 #0005}
.nt-mtag{margin-right:6px;padding:0 6px;font-style:normal;font-size:10.5px;font-weight:900;color:#fff;background:#e0761a;border:2px solid #000;vertical-align:1px}
.nt-mail.k-trade .nt-mtag{background:#4aa8e0}.nt-mail.k-refund .nt-mtag{background:#6a7384}
.nt-mchips{display:flex;flex-wrap:wrap;gap:4px}

/* 登入畫面：註冊時帶走訪客進度 */
/* ⚠ .login-form label（style.css）是直的 flex、輸入框樣式也會套到 checkbox：這裡要用兩個 class 的選擇器才蓋得過 */
.login-form .login-carry{flex-direction:row;align-items:center;gap:8px;padding:6px 9px;font-size:12px;font-weight:800;color:#3d2308;cursor:pointer;
  background:#f3ffe9;border:2px solid #7cc36a;border-radius:9px}
.login-form .login-carry input{flex:0 0 auto;width:18px;height:18px;margin:0;padding:0;border:0;background:none;accent-color:#3f9c48;cursor:pointer}
.login-form .login-carry.hidden{display:none}
/* 這個網址沒有線上伺服器（本機 serve.py）→ 登入畫面的說明改成紅色提醒（ui.js 的 loginProbe） */
.login-proto-note.offline{background:#ffe3e0;border-color:#c2372f;color:#8c2018}
.login-proto-note.offline b{color:#c2372f}

/* 說明頁多了「好友與交易」一頁（加上鑑定中心的共 8 個分頁）：字不換行、間距縮一點，一排塞得下 */
.hlp-tabs{gap:5px}
.hlp-tab{flex:1 1 auto;justify-content:center;gap:4px;padding:6px 8px;font-size:13px;white-space:nowrap}
.hlp-tab .pxi{width:18px;height:18px}

/* 可以點的提示條（有人要交易、加好友、禮物…）：點了直接過去 */
.ui-toast.nt-toast-act{cursor:pointer;pointer-events:auto}
.ui-toast.nt-toast-act:hover{filter:brightness(1.08)}