@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@500;700&family=Noto+Sans+TC:wght@400;500;700&display=swap');

:root{
  --bg:#101418;
  --surface:#1A2026;
  --ink:#F2F5F7;
  --ink-2:#B2BDC8;
  --line:#2C3641;
  --accent:#34B5A4;
  --mono:'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  --sans:'Noto Sans TC', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

*{ box-sizing:border-box; }
html,body{ margin:0; padding:0; background:var(--bg); color:var(--ink); font-family:var(--sans); -webkit-tap-highlight-color:transparent; }

#app{ max-width:520px; margin:0 auto; padding:28px 16px 80px; min-height:100vh; }

h1{ font-size:19px; margin:0 0 18px; letter-spacing:.01em; }

#search{
  width:100%; height:46px; border:1px solid var(--line); border-radius:10px;
  background:var(--surface); color:var(--ink); font-family:var(--sans);
  font-size:16px; padding:0 14px;
}
#search:focus{ outline:2px solid var(--accent); outline-offset:1px; }

.count{ font-size:12px; color:var(--ink-2); margin:10px 2px; }

.results{ list-style:none; margin:0; padding:0; }
.row{
  display:flex; align-items:center; gap:12px;
  background:var(--surface); border:1px solid var(--line); border-radius:10px;
  padding:12px 14px; margin-bottom:8px;
}
.room{ font-size:13px; color:var(--ink-2); flex:none; min-width:34px; }
.sn{ font-family:var(--mono); font-size:13px; color:var(--ink-2); flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.mac{
  font-family:var(--mono); font-size:14px; font-weight:700; color:var(--ink);
  background:none; border:1px solid var(--line); border-radius:8px;
  padding:8px 12px; flex:none; cursor:pointer;
}
.mac:hover{ border-color:var(--accent); color:var(--accent); }
.mac.copied{ background:var(--accent); border-color:var(--accent); color:#0D1512; }

.empty{ text-align:center; color:var(--ink-2); padding:30px 0; font-size:14px; list-style:none; }

.toast{
  position:fixed; left:50%; bottom:28px; transform:translateX(-50%);
  background:var(--accent); color:#0D1512; font-weight:700; font-size:13px;
  padding:10px 18px; border-radius:20px; transition:opacity .15s;
}
.toast.hidden{ opacity:0; pointer-events:none; }

button{ cursor:pointer; }