:root { font-family: "Microsoft JhengHei", "PingFang HK", system-ui, sans-serif; color: #eff8ff; background: #09131d; }
* { box-sizing: border-box; }
body { margin: 0; min-height: 100vh; background: #09131d; }
button, input { font: inherit; }
button { cursor: pointer; }
.app, .screen { min-height: 100vh; }
.screen { padding: max(3rem, env(safe-area-inset-top)) clamp(1.5rem, 6vw, 6rem) max(2rem, env(safe-area-inset-bottom)); }
.hidden { display: none; }
.standby { display: grid; place-items: center; text-align: center; background: radial-gradient(circle at 50% 40%, #16324b 0, #0b1926 42%, #060b10 100%); opacity: .62; transition: opacity .25s ease; }
.standby:active { opacity: 1; }
.standby-content { max-width: 38rem; }
.mark { display: grid; place-items: center; margin: 0 auto 1.8rem; width: 5rem; height: 5rem; border: 1px solid #7db5d9; border-radius: 50%; color: #a9dbf7; font-size: 3.2rem; line-height: 1; }
.standby-cn { margin: 0; font-size: clamp(2.4rem, 6vw, 4.5rem); font-weight: 700; letter-spacing: .08em; }
.standby-en { margin: .6rem 0 3.5rem; color: #bdd7e8; font-size: clamp(.9rem, 2vw, 1.25rem); font-weight: 600; letter-spacing: .18em; }
.tap-prompt { display: inline-block; margin: 0; padding: .85rem 1.5rem; border: 1px solid #8caec4; border-radius: 99rem; color: #e6f5ff; font-size: 1.15rem; }
.directory { display: flex; flex-direction: column; max-width: 78rem; margin: auto; }
header { text-align: center; }
.eyebrow { margin: 0 0 .7rem; color: #79c8ef; font-size: .82rem; font-weight: 700; letter-spacing: .14em; }
h1 { margin: 0; font-size: clamp(2rem, 5vw, 3.75rem); line-height: 1.2; }
h1 span { display: block; margin-top: .45rem; color: #b8d4e5; font-size: .44em; font-weight: 500; letter-spacing: .05em; }
.instruction { margin: 1.4rem 0 2rem; color: #c9dae5; font-size: clamp(1.05rem, 2.4vw, 1.4rem); }
.search-wrap { max-width: 62rem; width: 100%; margin: 0 auto; }
#search { width: 100%; padding: 1.15rem 1.35rem; border: 2px solid #61b7e2; border-radius: 1rem; outline: 0; background: #f5fbff; color: #10202b; font-size: clamp(1.25rem, 3vw, 1.8rem); box-shadow: 0 0 0 .3rem rgba(97,183,226,.13); }
#search:focus { border-color: #b0e7ff; box-shadow: 0 0 0 .4rem rgba(135,213,247,.3); }
.search-help { margin: .75rem .2rem; color: #a8c2d3; font-size: .92rem; }
.result-summary { min-height: 1.8rem; max-width: 62rem; width: 100%; margin: 1.2rem auto .3rem; color: #c9e6f4; font-size: 1.05rem; }
.results { display: grid; gap: 1rem; max-width: 62rem; width: 100%; margin: 0 auto; padding-bottom: 1rem; }
.company-card { padding: 1.35rem 1.5rem; border: 1px solid #31516a; border-radius: .85rem; background: #102537; box-shadow: 0 .6rem 1.4rem rgba(0,0,0,.16); }
.company-en, .company-zh { margin: 0; overflow-wrap: anywhere; }
.company-en { color: #f4fbff; font-size: clamp(1.3rem, 3.2vw, 2rem); font-weight: 700; line-height: 1.35; }
.company-zh { margin-top: .55rem; color: #bde0f1; font-size: clamp(1.1rem, 2.7vw, 1.6rem); line-height: 1.4; }
.empty { padding: 2rem; border: 1px dashed #4f7189; border-radius: .85rem; color: #c7dce9; text-align: center; font-size: 1.2rem; }
.quiet-button { align-self: center; margin: auto auto 1rem; padding: .65rem 1rem; border: 0; background: transparent; color: #a5c6d9; text-decoration: underline; font-size: 1rem; }
footer { display: flex; justify-content: space-between; gap: 1rem; align-items: center; color: #86a9be; font-size: .85rem; }
.admin-link { padding: 0; border: 0; background: transparent; color: #86cce9; text-decoration: underline; }
dialog { max-width: min(40rem, calc(100vw - 2rem)); border: 1px solid #46718d; border-radius: 1rem; background: #102537; color: #edf8ff; box-shadow: 0 1rem 4rem rgba(0,0,0,.65); }
dialog::backdrop { background: rgba(0,0,0,.72); }
.admin-panel { padding: .5rem; }
.admin-heading { display: flex; align-items: start; justify-content: space-between; gap: 1rem; }
h2 { margin: 0; font-size: 1.7rem; }.close { border: 0; background: transparent; color: #e8f7ff; font-size: 2rem; line-height: 1; }
.admin-panel > p { color: #c1d8e6; line-height: 1.55; }.file-control, .secondary, .danger { display: inline-block; padding: .75rem 1rem; border: 1px solid #65bce8; border-radius: .55rem; background: #17425c; color: #f2fbff; font-weight: 600; }
#import-file { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }.format-note { font-size: .87rem; }.format-note code { color: #a4dcf7; }
.import-status { min-height: 1.5rem; margin: 1rem 0; color: #a9e2af; }.admin-actions { display: flex; flex-wrap: wrap; gap: .65rem; }.secondary { background: #183343; border-color: #63869c; }.danger { background: #5e2932; border-color: #d77f8d; }
.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; }
@media (max-width: 35rem) { .screen { padding-inline: 1.1rem; } footer { align-items: flex-start; flex-direction: column; } .admin-actions { flex-direction: column; } }