* { margin: 0; padding: 0; box-sizing: border-box; }
:root { --bg-primary:#1a1a1a; --bg-secondary:#242424; --text-primary:#e8e8e8; --text-secondary:#b0b0b0; --accent-cyan:#00d4ff; --accent-cyan-hover:#00e6ff; --border-color:#333; --danger:#ff4757; --danger-hover:#ff6b7a; color-scheme:dark; }
body { font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif; background:var(--bg-primary); color:var(--text-primary); min-height:100vh; display:flex; flex-direction:column; }
header { background:var(--bg-secondary); border-bottom:1px solid var(--border-color); padding:20px 24px; box-shadow:0 2px 8px rgba(0,0,0,.3); }
.header-content { max-width:1200px; margin:auto; display:flex; justify-content:space-between; align-items:center; }
.header-title { font-size:24px; font-weight:600; letter-spacing:-.5px; }
.header-user { font-size:14px; color:var(--text-secondary); }
main { flex:1; max-width:1200px; width:100%; margin:auto; padding:32px 24px; }
.container { display:flex; flex-direction:column; gap:32px; }
.input-section { background:var(--bg-secondary); border:1px solid var(--border-color); border-radius:8px; padding:24px; display:flex; gap:12px; align-items:flex-end; }
.input-group { flex:1; display:flex; flex-direction:column; gap:8px; }
.input-label,.activity-list-header { font-size:12px; font-weight:600; text-transform:uppercase; letter-spacing:.5px; color:var(--text-secondary); }
.input-group input { background:var(--bg-primary); border:1px solid var(--border-color); border-radius:6px; padding:12px 16px; color:var(--text-primary); font:inherit; font-size:14px; transition:.2s; min-height:44px; }
.input-group input:focus { outline:none; border-color:var(--accent-cyan); box-shadow:0 0 0 3px rgba(0,212,255,.1); }
.input-group input::placeholder { color:var(--text-secondary); }
.btn { padding:12px 24px; border:none; border-radius:6px; font-size:14px; font-weight:600; cursor:pointer; transition:.2s; text-transform:uppercase; letter-spacing:.5px; min-height:44px; display:inline-flex; align-items:center; justify-content:center; white-space:nowrap; }
.btn-primary { background:var(--accent-cyan); color:var(--bg-primary); }
.btn-primary:hover { background:var(--accent-cyan-hover); box-shadow:0 4px 12px rgba(0,212,255,.2); }
.btn:active { transform:scale(.98); }
.btn-danger { background:transparent; color:var(--danger); border:1px solid var(--danger); }
.btn-danger:hover:not(:disabled) { background:rgba(255,71,87,.1); border-color:var(--danger-hover); color:var(--danger-hover); }
.btn:disabled { opacity:.4; cursor:not-allowed; }
.controls-section { display:flex; justify-content:space-between; align-items:center; gap:16px; }
.activity-count { font-size:12px; color:var(--text-secondary); font-weight:500; }
.activity-count strong { color:var(--accent-cyan); font-size:16px; }
.activity-list-section { background:var(--bg-secondary); border:1px solid var(--border-color); border-radius:8px; overflow:hidden; }
.activity-list-header { padding:16px 24px; border-bottom:1px solid var(--border-color); }
.activity-list { max-height:600px; overflow-y:auto; }
.activity-item { padding:16px 24px; border-bottom:1px solid var(--border-color); display:flex; justify-content:space-between; align-items:center; gap:16px; transition:background .2s; }
.activity-item:last-child { border-bottom:none; }
.activity-item:hover { background:rgba(0,212,255,.05); }
.activity-content { flex:1; min-width:0; display:flex; flex-direction:column; gap:6px; }
.activity-text { font-size:14px; word-break:break-word; line-height:1.4; }
.activity-timestamp { font-size:12px; color:var(--text-secondary); }
.btn-delete { padding:8px 12px; background:transparent; color:var(--text-secondary); border:1px solid var(--border-color); border-radius:4px; cursor:pointer; font-size:12px; transition:.2s; min-height:32px; white-space:nowrap; flex-shrink:0; }
.btn-delete:hover { background:rgba(255,71,87,.1); color:var(--danger); border-color:var(--danger); }
.empty-state { padding:48px 24px; text-align:center; color:var(--text-secondary); }
.empty-state-icon { font-size:48px; margin-bottom:16px; opacity:.5; }
.empty-state-text { font-size:14px; line-height:1.6; }
.modal { position:fixed; inset:0; background:rgba(0,0,0,.6); z-index:1000; display:flex; align-items:center; justify-content:center; }
.modal[hidden] { display:none; }
.modal-content { background:var(--bg-secondary); border:1px solid var(--border-color); border-radius:8px; padding:32px; max-width:400px; width:90%; box-shadow:0 20px 60px rgba(0,0,0,.5); }
.modal-title { font-size:18px; font-weight:600; margin-bottom:12px; }
.modal-description { font-size:14px; color:var(--text-secondary); margin-bottom:24px; line-height:1.5; }
.modal-actions { display:flex; gap:12px; justify-content:flex-end; }
.modal-actions .btn { padding:10px 20px; font-size:13px; }
.btn-cancel { background:transparent; color:var(--text-primary); border:1px solid var(--border-color); }
.btn-cancel:hover { background:var(--bg-primary); }
@media (max-width:720px) { header{padding:16px}.header-content{flex-direction:column;align-items:flex-start;gap:8px}main{padding:20px 16px}.container{gap:24px}.input-section{flex-direction:column;align-items:stretch}.input-group input,.btn{width:100%}.controls-section{flex-direction:column;align-items:flex-start}.activity-item{flex-direction:column;align-items:flex-start}.btn-delete{width:100%;min-height:44px}.modal-content{padding:24px} }
@media (prefers-reduced-motion:reduce) { * { transition:none!important; } }