*{box-sizing:border-box}
html,body{margin:0;padding:0;font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;background:#faf9f6;color:#1d2433}
.wrap{max-width:1100px;margin:0 auto;padding:24px}
.brand{font-weight:700;font-size:20px;letter-spacing:.3px;color:#3b47a3;margin-bottom:14px}
.card{background:#ffffff;border:1px solid #e6e8ef;border-radius:12px;padding:14px;box-shadow:0 6px 20px rgba(20,23,28,.06)}
.auth{max-width:420px;margin:40px auto}
.auth-tabs{display:flex;gap:8px;margin-bottom:12px}
.tab{background:#ffffff;color:#3b4252;border:1px solid #dfe3eb;border-radius:10px;padding:8px 12px;cursor:pointer}
.tab.active{background:#eef1ff;color:#2f3ca3;border-color:#cfd6ff}
.auth-content.hidden{display:none}
input,textarea,select,button{background:#ffffff;color:#1d2433;border:1px solid #dfe3eb;border-radius:12px;padding:10px}
select option{color:#1d2433}
textarea{min-height:44px;resize:vertical}
.toolbar .left textarea{min-height:28px}
button{cursor:pointer}
.toolbar{display:flex;justify-content:space-between;gap:12px;align-items:flex-start;margin-bottom:14px}
.toolbar .left form{display:flex;gap:8px;align-items:flex-start}
.toolbar .left textarea{flex:1}
.groups{display:flex;gap:12px;align-items:center;margin-bottom:12px}
#groupList{display:flex;gap:4px;flex-wrap:wrap}
.group-pill{display:flex;gap:6px;align-items:center;background:#f6f7fb;border:1px solid #e4e7f2;border-radius:999px;padding:4px 8px;font-size:12px}
.group-pill button{font-size:12px;padding:0 6px;height:22px;border-radius:6px}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:8px}
.box{position:relative;background:#ffffff;border:1px solid #e6e8ef;border-radius:10px;overflow:hidden;box-shadow:0 3px 12px rgba(20,23,28,.05)}
.box-header{display:flex;justify-content:space-between;align-items:center;padding:8px}
.box-pin{display:flex;align-items:center;gap:6px}
.pin-number{background:#eef1ff;border:1px solid #cfd6ff;border-radius:6px;padding:1px 6px;color:#3b47a3;font-weight:600;font-size:12px}
.pin-btn{width:24px;height:24px;border-radius:6px;display:flex;align-items:center;justify-content:center;background:#f6f7fb;border:1px solid #e4e7f2}
.copy-btn{width:24px;height:24px;border-radius:6px;display:flex;align-items:center;justify-content:center;background:#f6f7fb;border:1px solid #e4e7f2}
.edit-btn,.delete-btn{width:24px;height:24px;border-radius:6px;display:flex;align-items:center;justify-content:center;background:#f6f7fb;border:1px solid #e4e7f2}
.box-body{padding:6px;border-top:1px dashed #e6e8ef;cursor:pointer;font-size:13px;line-height:1.3;max-height:45px;overflow:auto}
.box-body[contenteditable="true"]{outline:2px solid #cfd6ff;background:#f9fafc}
.box-footer{display:flex;gap:6px;padding:8px;border-top:1px solid #e6e8ef}
.group-tag{font-size:11px;color:#667085}
.color-swatch{width:12px;height:12px;border-radius:4px;border:1px solid #d1d5db;cursor:pointer}
.toast{position:fixed;bottom:18px;left:50%;transform:translateX(-50%);background:#ffffff;color:#374151;border:1px solid #e5e7eb;border-radius:12px;padding:10px 14px;box-shadow:0 10px 25px rgba(20,23,28,.08)}
.pin-input{width:42px;height:24px;border-radius:6px;text-align:center;font-size:12px;padding:0}
.color-select-tiny{width:64px;height:24px;padding:0 6px;font-size:12px;border-radius:6px}
.btn-tiny{width:64px;height:24px;padding:0 6px;font-size:12px;border-radius:6px}