:root{--fg: #1e1e1e;--muted: #6b6b6b;--line: #e3e3e8;--accent: #6965db;--err: #c62828;--ok: #2e7d32}html,body,#root{height:100%;margin:0}body{font-family:system-ui,-apple-system,Segoe UI,sans-serif;color:var(--fg);background:#fff}button{font:inherit;padding:6px 12px;border:1px solid var(--line);border-radius:8px;background:#fff;cursor:pointer}button.primary{background:var(--accent);border-color:var(--accent);color:#fff}button:disabled{opacity:.5;cursor:default}input,select{font:inherit;padding:6px 10px;border:1px solid var(--line);border-radius:8px}a{color:var(--accent)}.err{color:var(--err)}.ok{color:var(--ok)}.center{min-height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px}.big{font-size:20px}.login{display:flex;flex-direction:column;gap:10px;width:220px;text-align:center}.login input{font-size:22px;letter-spacing:6px;text-align:center}.login input::placeholder{letter-spacing:normal}.cabinet header{display:flex;justify-content:space-between;align-items:center;padding:12px 24px;border-bottom:1px solid var(--line);flex-wrap:wrap;gap:8px}.cabinet nav{display:flex;gap:16px;flex-wrap:wrap}.cabinet nav a{text-decoration:none;color:var(--muted);padding-bottom:4px}.cabinet nav a.active{color:var(--fg);border-bottom:2px solid var(--accent)}.cabinet .me{display:flex;gap:10px;align-items:center;color:var(--muted)}.cabinet section{padding:20px 24px}.grid{list-style:none;padding:0;margin:16px 0 0;display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:16px}.card{border:1px solid var(--line);border-radius:12px;overflow:hidden;display:flex;flex-direction:column}.card a{text-decoration:none;color:inherit;display:flex;flex-direction:column}.card img,.card .blank{width:100%;aspect-ratio:16 / 10;object-fit:contain;background:#fafafa;border-bottom:1px solid var(--line)}.card .title{padding:10px 12px 0;font-weight:600}.card .meta{padding:4px 12px;color:var(--muted);font-size:13px}.card .actions{display:flex;gap:6px;padding:6px 12px 12px}.card .actions button{font-size:13px;padding:4px 8px}.empty{color:var(--muted)}.keys form{display:flex;gap:8px}.keys table{margin-top:16px;border-collapse:collapse}.keys td{padding:8px 12px 8px 0;border-bottom:1px solid var(--line)}.newkey{margin-top:16px;padding:12px;border:1px solid var(--accent);border-radius:12px}.newkey button{margin-right:8px}.newkey pre{white-space:pre-wrap;word-break:break-all;background:#f5f5f8;padding:10px;border-radius:8px}.board{position:fixed;inset:0;display:flex;flex-direction:column}.board-canvas{flex:1;position:relative;min-height:0}.board-top{padding:6px 10px;border-bottom:1px solid var(--line);background:#fff}.board-top .board-bar{justify-content:flex-start;gap:6px}.board-top .board-bar .title{flex:1 1 0;min-width:0;max-width:none;text-align:left}.board-top .board-bar button{padding:4px 8px;flex-shrink:0}.board-top .board-bar .status.error,.board-top .board-bar .status.warning{flex-basis:100%;order:10}.board-bar{display:flex;gap:8px;align-items:center;flex-wrap:wrap;justify-content:flex-end}.board-bar .title{font-weight:600;max-width:240px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.status{font-size:13px;color:var(--muted)}.status.error{color:#fff;background:var(--err);padding:4px 10px;border-radius:8px}.status.error a{color:#fff}.status.warning{color:#fff;background:#b26a00;padding:4px 10px;border-radius:8px}.modal{position:fixed;inset:0;background:#0000004d;display:flex;align-items:center;justify-content:center;z-index:10}.sheet{box-sizing:border-box;background:#fff;border-radius:12px;padding:20px;width:min(460px,calc(100vw - 32px));max-height:80vh;overflow:auto;display:flex;flex-direction:column;gap:12px}.sheet h2{margin:0;font-size:18px}.sheet ul{list-style:none;padding:0;margin:0}.sheet li{display:flex;justify-content:space-between;align-items:center;gap:8px;padding:6px 0;border-bottom:1px solid var(--line);flex-wrap:wrap}.sheet li>span:first-child{flex:1 1 180px;min-width:0;overflow-wrap:anywhere}.sheet .link{display:flex;gap:8px}.sheet .link input{flex:1}.sheet li .row{display:flex;gap:6px;flex-shrink:0}.viewer{position:fixed;inset:0;z-index:20;background:#fff;display:flex;flex-direction:column}.viewer-bar{display:flex;gap:8px;align-items:center;flex-wrap:wrap;padding:8px 12px;border-bottom:1px solid var(--line)}.viewer-bar .title{font-weight:600}.viewer-bar .grow{flex:1}.viewer-canvas{flex:1;position:relative;min-height:0}@media(max-width:600px){.cabinet header{padding:10px 16px}.cabinet nav{gap:12px}.cabinet section{padding:16px}.keys form input{flex:1;min-width:0}.keys table{width:100%;font-size:14px}.keys td{padding-right:8px}}