:root { font-family: "Microsoft JhengHei", system-ui, sans-serif; color: #1d344b; background: #f3f7fb; } body { margin: 0; } .shell { max-width: 760px; margin: 0 auto; padding: 48px 22px; } header { display:flex; align-items:center; gap:13px; margin-bottom:25px; } .logo { display:grid; place-items:center; width:48px; height:48px; border-radius:15px; background:#287bd2; color:#fff; font-weight:800; font-size:27px; } h1,h2 { margin:0; } header p { margin:4px 0 0; color:#71849a; } .card { padding:26px; border:1px solid #dae4ef; border-radius:16px; background:white; box-shadow:0 8px 24px #174f8510; } .hidden { display:none; } .card p { color:#5c7085; line-height:1.65; } button { padding:12px 18px; border-radius:10px; font-size:15px; font-weight:700; cursor:pointer; } .google { width:100%; border:1px solid #cdd9e6; background:#fff; color:#29425b; } .secondary { border:1px solid #cad7e4; background:#f8fbfe; color:#38546d; } .row { display:flex; justify-content:space-between; gap:16px; align-items:center; } .tiles { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; margin:24px 0; } .tiles div { border:1px solid #deebf6; background:#f8fbff; border-radius:11px; padding:15px; } .tiles b,.tiles span { display:block; } .tiles span { margin-top:7px; color:#5b7e9f; font-size:13px; } .error { color:#b42318 !important; min-height:1.5em; } .hint { border-left:4px solid #2f80d4; padding-left:12px; font-size:14px; } @media (max-width:560px) { .tiles { grid-template-columns:1fr; } }