* { box-sizing: border-box; }
body { margin:0; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial; background:#f6f7fb; }
.container { max-width: 420px; margin: 0 auto; padding: 16px; }
.card { background:#fff; border-radius:10px; padding:16px; box-shadow:0 4px 12px rgba(0,0,0,0.06); }
h2 { margin:0 0 12px; font-size:20px; }
label { display:block; font-size:14px; color:#444; margin:10px 0 6px; }
input { width:100%; padding:12px; border:1px solid #ddd; border-radius:8px; font-size:16px; }
.btn-primary { width:100%; margin-top:14px; padding:12px; background:#1677ff; color:#fff; border:none; border-radius:8px; font-size:16px; }
.error { background:#fff1f0; color:#cf1322; border:1px solid #ffa39e; padding:8px; border-radius:6px; margin-bottom:10px; font-size:14px; }
.footer-text { margin-top:10px; font-size:14px; text-align:center; }
.footer-text a { color:#1677ff; text-decoration:none; }
.hint { font-size:13px; color:#fa8c16; margin-bottom:10px; }
.header { display:flex; justify-content:space-between; align-items:flex-start; margin-bottom:12px; }
.logout { color:#1677ff; text-decoration:none; font-size:14px; }
.user-info { background:#fff; border-radius:10px; padding:12px; box-shadow:0 4px 12px rgba(0,0,0,0.06); flex:1; }
.user-info .small { font-size:12px; color:#666; margin-top:2px; }
.header .user-info{font-family:Roboto, system-ui, -apple-system, "Segoe UI", Arial, sans-serif; color:#2b2d42; line-height:1.6}
.header .user-info>div:first-child{font-weight:600; font-size:16px; color:#1f2a44}
.header .user-info .small{font-size:13px; color:#667085; margin-top:4px}
.grid { display:grid; grid-template-columns: repeat(3, 1fr); grid-gap:10px; }
.grid-item { background:#1677ff; border-radius:10px; height:90px; display:flex; align-items:center; justify-content:center; font-size:20px; color:#fff; box-shadow:0 4px 12px rgba(0,0,0,0.06); cursor:pointer; user-select:none; transition:transform .08s ease, box-shadow .2s ease, filter .2s; }
.grid-item:hover { filter: brightness(1.08); box-shadow:0 6px 16px rgba(0,0,0,0.12); }
.grid-item:active { transform: scale(0.98); }
/* navbar */
.navbar { width:100%; background:#fff; box-shadow:0 4px 12px rgba(0,0,0,0.06); padding:12px 16px; display:flex; justify-content:space-between; align-items:center; }
.navbar-title { font-size:16px; font-weight:300; color:#333; }
.navbar a { color:#1677ff; text-decoration:none; font-size:14px; }
/* modal */
.modal-overlay{position:fixed;left:0;top:0;width:100%;height:100%;background:rgba(0,0,0,0.35);display:none;align-items:center;justify-content:center;z-index:1000}
/* .modal{background:#fff;border-radius:10px;box-shadow:0 8px 30px rgba(0,0,0,.15);padding:16px;width:300px;height:200px;max-width:none} */
.modal{background:#fff;border-radius:10px;box-shadow:0 8px 30px rgba(0,0,0,.15);padding:16px;max-width:none}

.modal h3{margin:0 0 10px;font-size:16px}
.modal-actions{display:flex;gap:10px;margin-top:10px}
.btn-secondary{width:100%;margin-top:14px;padding:12px;background:#f0f0f0;color:#333;border:none;border-radius:8px;font-size:16px}
.btn-copy-success{background:#91c5ff;color:#fff}
.example-modal{width:360px;height:480px;display:flex;flex-direction:column}
.example-modal img{flex:1;min-height:0;object-fit:contain}
.example-header{display:flex;align-items:center;justify-content:space-between;gap:10px}
.example-header h3{margin:0;font-size:16px}
.example-close{width:auto;margin-top:0;padding:6px 12px;font-size:14px}
#exampleModal .modal{width:360px;height:480px}
/* #exportConfirmModal .modal{width:300px;height:200px} */