:root {
  color-scheme:dark;
  font-family:Inter,system-ui,-apple-system,Segoe UI,sans-serif;
  background:#0b1020;
  color:#e8edf8
}
*{box-sizing:border-box}
body{margin:0;min-height:100vh}
[hidden]{display:none!important}
.container{max-width:1050px;margin:auto;padding:32px 22px}
header{display:flex;justify-content:space-between;align-items:center;
  padding-bottom:32px;border-bottom:1px solid #263047;gap:15px}
.brand{display:flex;align-items:center;gap:14px}
.logo{width:48px;height:48px;border-radius:13px;
  background:linear-gradient(135deg,#3478f6,#7c4dff);
  display:grid;place-items:center;font-size:26px;font-weight:800;color:white}
h1{font-size:22px;margin:0;letter-spacing:-.5px}
h1 span{color:#6495ff}
header p,.sectionTitle p,.login p{color:#8e9bb4;font-size:13px;margin:6px 0}
.right{display:flex;align-items:center;gap:16px}
.status{font-size:12px;color:#42d6a4}
.sectionTitle{display:flex;justify-content:space-between;
  align-items:center;margin:32px 0 18px;gap:12px}
h2{font-size:18px;margin:0}
.tag{font-size:10px;color:#a7b8e4;background:#1c2945;
  padding:9px 12px;border-radius:8px;white-space:nowrap}
.panel{background:#121b2e;border:1px solid #26334e;
  border-radius:14px;overflow:hidden}
textarea{display:block;width:100%;height:230px;resize:vertical;
  border:0;outline:0;background:transparent;color:#e8edf8;
  padding:22px;font:14px/1.7 ui-monospace,SFMono-Regular,Consolas,monospace}
textarea::placeholder{color:#687792}
.toolbar{display:flex;justify-content:space-between;align-items:center;
  padding:14px 18px;border-top:1px solid #26334e;gap:12px}
#counter{font-size:12px;color:#8e9bb4}
.actions{display:flex;gap:8px;flex-wrap:wrap}
button{border:0;border-radius:8px;padding:11px 17px;
  background:#3976ed;color:white;font-weight:600;cursor:pointer}
button:hover{filter:brightness(1.13)}
button:disabled{opacity:.5;cursor:wait}
button.secondary{background:#202d45;color:#cbd7ed}
.historyTitle{margin-top:38px}
.clip{background:#121b2e;border:1px solid #26334e;
  border-radius:12px;padding:18px;margin-bottom:12px}
.clipTop{display:flex;justify-content:space-between;align-items:center;
  gap:12px;margin-bottom:12px}
.clipDate{color:#8291ad;font-size:12px}
.clipActions{display:flex;gap:8px}
.clipActions button{font-size:12px;padding:8px 12px}
.clip pre{margin:0;white-space:pre-wrap;overflow-wrap:anywhere;
  max-height:125px;overflow:auto;font:13px/1.6 ui-monospace,Consolas,monospace}
.empty{text-align:center;color:#8e9bb4;padding:40px}
.login{max-width:430px;margin:75px auto;padding:32px;text-align:center}
.login form{display:flex;flex-direction:column;gap:12px;margin-top:24px}
.login input{width:100%;padding:14px;border-radius:8px;
  background:#0b1020;color:white;border:1px solid #35425c;outline:none}
.error{color:#ff7777!important}
footer{text-align:center;color:#596982;font-size:11px;
  letter-spacing:2px;margin-top:65px}
#toast{position:fixed;bottom:25px;right:25px;background:#243653;
  border:1px solid #46608b;border-radius:9px;padding:14px 20px;
  display:none;box-shadow:0 10px 30px #0005}
@media(max-width:650px){
  .container{padding:20px 14px}
  header{align-items:flex-start}
  .status{display:none}
  .sectionTitle{align-items:flex-start}
  .tag{font-size:9px}
  .toolbar{align-items:flex-start;flex-direction:column}
  .actions{width:100%}
  .actions button{flex:1}
  textarea{height:260px}
  .clipTop{align-items:flex-start}
}