:root{--text:#172b3a;--muted:#596b7b;--line:#dce3e9;--accent:#087f73;--surface:#f4f6f8;--error:#a72828;--radius:6px;color-scheme:light;font:16px/1.5 -apple-system,BlinkMacSystemFont,"Segoe UI","Microsoft YaHei",sans-serif;color:var(--text);background:#fff}
*{box-sizing:border-box}body{margin:0}header{display:flex;align-items:center;gap:24px;border-bottom:1px solid var(--line);padding:20px max(24px,calc((100vw - 1360px)/2));flex-wrap:wrap}h1{font-size:26px;margin:0;white-space:nowrap}h2{font-size:24px;margin:0 0 6px}h3{font-size:20px;margin:0 0 20px}p{color:var(--muted);margin:6px 0 20px}nav{display:flex;flex:1;gap:12px}button,input,textarea,select{font:inherit;color:inherit}button{cursor:pointer;border:1px solid var(--line);background:#fff;border-radius:var(--radius);min-height:44px;padding:9px 20px;transition:background .15s}button:hover{background:var(--surface)}button:disabled{opacity:.55;cursor:wait}.primary{background:var(--accent);color:#fff;border-color:var(--accent)}.primary:hover{background:#076a60}nav button{border:0;border-radius:0;border-bottom:3px solid transparent;padding-inline:8px}nav button[aria-current]{color:var(--accent);border-bottom-color:var(--accent);font-weight:600}:focus-visible{outline:3px solid #278cc3;outline-offset:3px}main{max-width:1360px;margin:auto;padding:30px 24px}#login{max-width:500px;margin:30px auto}.toolbar{display:flex;justify-content:space-between;align-items:center;gap:16px}.filter{display:flex;align-items:center;gap:24px;margin:20px 0}.filter label{display:flex;align-items:center;gap:16px}.filter input{max-width:210px}#updated{font-size:14px;color:var(--muted)}label{display:flex;flex-direction:column;gap:8px;margin-bottom:18px}input,textarea,select{min-height:44px;min-width:0;padding:9px 12px;border:1px solid #b8c7d2;border-radius:var(--radius);background:#fff}textarea{resize:vertical}input[readonly]{background:var(--surface)}.table-wrap{border:1px solid var(--line);border-radius:var(--radius);overflow:auto;margin-bottom:28px}table{width:100%;border-collapse:collapse;font-size:15px}th{background:var(--surface);font-weight:600;text-align:left;white-space:nowrap}td,th{padding:16px 18px;border-bottom:1px solid var(--line);vertical-align:top}tr:last-child td{border-bottom:0}td{overflow-wrap:anywhere;min-width:90px;max-width:320px}td button{color:var(--accent);border:0;padding:4px 8px;white-space:nowrap}code{font:13px/1.5 ui-monospace,monospace}.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:0 24px}.wide{grid-column:1/-1}#noteForm,#deviceForm{border:1px solid var(--line);padding:24px;border-radius:var(--radius)}.actions{display:flex;gap:12px;flex-wrap:wrap}.check{flex-direction:row;align-items:center}.check input{min-height:24px;width:24px}#message:not(:empty){padding:12px 16px;background:var(--surface);border-left:3px solid var(--accent);color:var(--text)}#message.error{border-color:var(--error);color:var(--error)}#newKey{display:block;overflow-wrap:anywhere;margin-top:16px}.empty{padding:48px;text-align:center;color:var(--muted)}[hidden]{display:none!important}
@media(max-width:700px){header{gap:12px;padding:16px}h1{font-size:22px;flex:1}nav{order:3;flex-basis:100%;gap:16px}header button{padding:8px 12px}main{padding:24px 16px}.toolbar{align-items:flex-start}.toolbar h2{font-size:22px}.toolbar p{font-size:14px}.filter{align-items:flex-start;flex-direction:column;gap:0}.form-grid{grid-template-columns:1fr}.wide{grid-column:auto}#noteForm,#deviceForm{padding:20px 16px}.actions button{flex:1}td,th{padding:12px}.table-wrap{max-width:100%}#login{margin-top:0}}
@media(prefers-reduced-motion:reduce){button{transition:none}}
button{white-space:nowrap}.toolbar>button{flex-shrink:0}
@media(max-width:700px){.actions button{padding-inline:12px}}