:root{font-family:"Microsoft YaHei",system-ui,sans-serif;color:#2b2118;background:#faf6ef}
body{margin:0;padding:0 16px 24px}
.top{display:flex;align-items:center;gap:8px;padding:12px 0}
.top h1{font-size:20px;margin:0}
.tag{background:#e8e0d0;border-radius:12px;padding:2px 10px;font-size:12px}
.spacer{flex:1}
button{background:#7a8b6f;color:#fff;border:0;border-radius:8px;padding:7px 12px;cursor:pointer}
button:hover{opacity:.9}
input,select,textarea{border:1px solid #d8cdbb;border-radius:8px;padding:7px 9px;background:#fff}
.status{color:#666;font-size:13px;margin-bottom:8px}
.filters{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:10px 0}
table{width:100%;border-collapse:collapse;background:#fff;border-radius:10px;overflow:hidden}
th,td{padding:9px 10px;border-bottom:1px solid #eee6d8;text-align:left;font-size:14px}
th{background:#f3ecdf}
tr{cursor:pointer}tr:hover{background:#faf6ef}
.login{color:#2f6f4e;text-decoration:underline;word-break:break-all}
.hint{color:#777;font-size:13px}
.card{background:#fff;border:1px solid #eee6d8;border-radius:10px;padding:12px;margin:10px 0}
.row{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin:6px 0}
.row input,.row select{flex:1;min-width:120px}
dialog{border:1px solid #ddd;border-radius:12px;padding:16px;width:520px;max-width:92vw}
dialog label{display:block;margin:8px 0}
dialog input,dialog select{width:100%;box-sizing:border-box}
.note-edit{flex:1;display:flex;flex-direction:column;gap:8px}
#noteList{width:220px}
.backup{font-family:monospace;background:#f3ecdf;padding:10px;border-radius:8px;line-height:1.8;word-break:break-all}
*{box-sizing:border-box}
canvas{max-width:100%;height:auto}
code{word-break:break-all}
.table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;border-radius:10px}
.table-wrap table{min-width:640px}
#listView .table-wrap table{min-width:720px}
#detailView .table-wrap table{min-width:560px}
@media (max-width:768px){
  body{padding:0 12px 20px}
  .top{flex-wrap:wrap}
  .top h1{font-size:18px}
  .tag{font-size:11px}
  #authBtns:not([hidden]){display:flex;gap:8px;flex-wrap:wrap}
  .filters{gap:6px}
  .filters label{display:flex;align-items:center;gap:6px;flex:1 1 100%}
  .filters label input,.filters label select{flex:1;min-width:0}
  th,td{padding:8px;font-size:13px}
  .card{padding:10px}
  dialog{padding:14px;max-width:94vw}
  .note-row{flex-direction:column;align-items:stretch}
  #noteList{width:100%;height:auto}
  .note-edit{width:100%}
  .row input,.row select,.row textarea{min-width:0}
}
@media (max-width:480px){
  body{padding:0 10px 16px}
  .top h1{font-size:17px}
  button{padding:10px 12px;min-height:40px}
  input,select,textarea{font-size:16px;padding:10px 9px}
  .row{flex-direction:column;align-items:stretch}
  .row input,.row select{flex:1 1 auto;width:100%}
  .row button{width:100%}
  .filters button{flex:1 1 40%}
  th,td{padding:7px 8px;font-size:13px}
  .status{font-size:12px}
  .backup{font-size:13px}
  dialog{padding:12px;max-width:96vw}
}