:root{--color-accent:#008aff;--color-accent-hover:#0073e6;--color-border:#ccc;--color-border-soft:#ddd;--color-border-subtle:#e0e0e0;--color-on-accent:#fff;--color-shadow:#0000001a;--color-shadow-strong:#00000021;--color-success:#4caf50;--color-surface-info:#e3f2fd;--color-surface-muted:#f0f0f0;--color-surface-soft:#f9f9f9;--color-surface-success:#e8f5e9;--color-text:black;--color-text-muted:#666;--color-text-subtle:#999;--color-text-supporting:#555;--color-text-success:#2e7d32;--color-transparent:transparent}body{color:var(--color-text)}.container{max-width:1200px;margin:0 auto;padding:20px;font-family:system-ui,sans-serif}input,:scope button{outline:1px solid #0000;font-size:1rem;transition:all .2s}:scope button:focus-visible,input:focus-visible{border-color:var(--color-accent);outline-color:var(--color-accent);background-color:#fff}input{border:1px solid var(--color-border)}button{cursor:pointer;border:1px solid var(--color-text);background:var(--color-transparent);padding:.3rem .8rem;font-size:1rem;transform:translateY(0)}button:disabled{cursor:not-allowed}button:not(:disabled):hover{border-color:var(--color-accent);outline-color:var(--color-accent);background-color:#fff;transform:translateY(-1px)}button:not(:disabled):active{transform:translateY(1px)}.controls{flex-wrap:wrap;gap:1rem;display:flex}.list.users{padding:0}.list.users li{justify-content:space-around;align-items:center;display:flex}.list.users li span{width:50%}.list.users button{color:var(--color-accent);text-underline-offset:2px;border:none;padding-left:0;text-decoration:underline}.list.users button:not(:disabled):hover{text-underline-offset:4px;background:#fff;border-color:#0000;outline-color:#0000;transform:translateY(0)}.status-layout{gap:20px;width:100%;display:flex}.status-content,.kpinfo{flex:1}.kpinfo{border-left:1px solid var(--color-border);padding-left:20px;font-size:.75rem}.kpinfo pre{white-space:pre-wrap;overflow-wrap:anywhere}.grid{grid-template-columns:1fr 1fr;gap:20px;margin-bottom:20px;display:grid}.card{border:1px solid var(--color-border);min-height:15rem;margin-bottom:20px;padding:15px}.card.status{background:var(--color-surface-muted);justify-content:space-between;min-height:8rem;display:flex}.card.messenger{min-height:10rem}.card.instructions{background:var(--color-surface-info);margin-top:30px}.flex{gap:10px;margin:4px 0 10px;display:flex}.flex input{flex:1;padding:8px}.message-history{min-height:auto}.message-columns{grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;margin-top:15px;display:grid}.message-column{flex-direction:column;min-height:200px;display:flex}.column-header{border-bottom:2px solid var(--color-accent);text-align:center;margin:0 0 15px;padding-bottom:10px;font-size:1.1rem;font-weight:600}.message-boxes{flex-direction:column;gap:12px;max-height:500px;padding-right:8px;display:flex;overflow-y:auto}.message-box{background:var(--color-surface-soft);border:1px solid var(--color-border-soft);flex-direction:column;gap:10px;padding:12px;transition:box-shadow .2s,transform .2s;display:flex}.message-box:hover{box-shadow:0 2px 8px var(--color-shadow)}.message-header{border-bottom:1px solid var(--color-border-subtle);flex-wrap:wrap;align-items:center;gap:8px;padding-bottom:8px;display:flex}.message-header strong{color:var(--color-accent);font-size:.95rem}.message-header small{color:var(--color-text-muted);font-size:.8rem}.message-header .timestamp{color:var(--color-text-subtle);margin-left:auto;font-size:.75rem}.ciphertext-section,.decrypted-section{flex-direction:column;gap:4px;display:flex}:is(.ciphertext-section,.decrypted-section) label{color:var(--color-text-supporting);text-transform:uppercase;letter-spacing:.5px;font-size:.8rem;font-weight:600}.ciphertext{background:var(--color-surface-muted);word-break:break-all;color:var(--color-text);border:1px solid var(--color-border-soft);padding:6px 8px;font-family:Courier New,monospace;font-size:.75rem}.decrypted-text{background:var(--color-surface-success);border-left:3px solid var(--color-success);color:var(--color-text-success);padding:8px 10px;font-size:.9rem;font-weight:500}.decrypt-btn{background:var(--color-accent);color:var(--color-on-accent);cursor:pointer;border:none;margin-top:4px;padding:8px 16px;font-weight:500;transition:background .2s,transform .1s}.decrypt-btn:hover:not(:disabled){background:var(--color-accent-hover);transform:translateY(-1px)}.decrypt-btn:active:not(:disabled){transform:translateY(0)}.decrypt-btn:disabled{background:var(--color-border);cursor:not-allowed;opacity:.6}.message-boxes::-webkit-scrollbar{width:6px}.message-boxes::-webkit-scrollbar-track{background:var(--color-surface-soft)}.message-boxes::-webkit-scrollbar-thumb{background:var(--color-text-subtle)}.message-boxes::-webkit-scrollbar-thumb:hover{background:var(--color-text-supporting)}@media (max-width:48rem){.grid,.message-columns{grid-template-columns:1fr}.status-layout{flex-direction:column}.kpinfo{border-left:none;border-top:1px solid var(--color-border);padding-top:20px;padding-left:0}}