:root{--brand:#334155;--brand2:#14b8a6}
.mono,.calcbox textarea{font:13.5px/1.5 ui-monospace,SFMono-Regular,Consolas,monospace}
.btnrow{display:flex;flex-wrap:wrap;gap:8px;margin:8px 0}.btnrow .btn{width:auto;flex:1 1 auto}
.msg.ok{color:#16a34a}.msg.bad{color:#ef4444}
.rxrow{display:flex;align-items:center;gap:4px}.rxrow span{font:700 20px ui-monospace,monospace;color:var(--muted)}.rxrow input{flex:1}.rxrow .fl{flex:0 0 70px}
.rxout{white-space:pre-wrap;word-break:break-word;background:var(--card);border:1px solid var(--line);border-radius:10px;padding:10px;min-height:60px}
.rxout mark{background:color-mix(in srgb,var(--brand) 40%,transparent);color:inherit;border-radius:3px}
.rxm{max-height:220px;overflow:auto;font-size:13px}.rxm code,.kvout code{background:var(--chip);padding:1px 5px;border-radius:5px}
.cheat{font-size:13px;color:var(--muted);padding:8px 0}
.now{display:flex;align-items:center;gap:10px;flex-wrap:wrap;background:var(--chip);border-radius:12px;padding:10px 12px}.now b{font-size:22px}.now .btn{width:auto}
.kvout{display:grid;gap:6px;margin:6px 0 12px}.kvout div{display:grid;grid-template-columns:120px 1fr 44px;gap:8px;align-items:center}.kvout span{font-size:13px;color:var(--muted)}.kvout code{word-break:break-all;font-size:13px}.kvout .btn{width:44px;padding:6px}
@media(max-width:520px){.kvout div{grid-template-columns:1fr 44px}.kvout span{grid-column:span 2}}
.jwt{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:10px}.jwt pre{background:var(--card);border:1px solid var(--line);border-radius:10px;padding:10px;overflow:auto;max-height:300px;margin:0}.jwt h3{margin:6px 0;font-size:14px}
.two{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:10px}
.diff{border:1px solid var(--line);border-radius:10px;overflow:auto;max-height:520px}.diff .d{display:grid;grid-template-columns:36px 36px 1fr;font-size:13px;white-space:pre-wrap}.diff i{font-style:normal;color:var(--muted);text-align:right;padding-right:6px;user-select:none}
.diff .add{background:color-mix(in srgb,#22c55e 18%,transparent)}.diff .del{background:color-mix(in srgb,#ef4444 18%,transparent)}
.colrow{display:flex;gap:8px}.colrow input[type=color]{width:64px;height:52px;padding:2px;border-radius:12px;flex:0 0 64px}.bigc{flex:1;font-size:18px}
.contrast{display:grid;grid-template-columns:1fr 1fr;gap:8px}.ct{border-radius:12px;padding:14px;border:1px solid var(--line);display:flex;gap:10px;align-items:center}.ct b{font-size:28px}.ct span{font-size:13px;color:inherit;opacity:.85}
.shades{display:grid;grid-template-columns:repeat(8,1fr);gap:4px}.sh{height:56px;border:0;border-radius:8px;cursor:pointer;display:flex;align-items:flex-end;justify-content:center;padding:2px}.sh span{font:10px ui-monospace,monospace;background:rgba(0,0,0,.45);color:#fff;border-radius:4px;padding:1px 3px}
.mdout{border:1px solid var(--line);border-radius:10px;padding:12px;min-height:300px;max-height:560px;overflow:auto;text-align:left;line-height:1.6}
.mdout pre{background:var(--chip);padding:10px;border-radius:8px;overflow:auto}.mdout table{border-collapse:collapse}.mdout td,.mdout th{border:1px solid var(--line);padding:4px 8px}.mdout blockquote{border-left:4px solid var(--brand);margin:0;padding-left:10px;color:var(--muted)}
.row2{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:10px;margin:10px 0}