*{margin:0;padding:0;box-sizing:border-box}
:root{
  --primary:#6C5CE7;--primary-hover:#5A4BD1;--primary-glow:rgba(108,92,231,.15);
  --accent:#A29BFE;--accent-2:#FD79A8;--accent-3:#FDCB6E;
  --danger:#FF6B6B;--danger-bg:rgba(255,107,107,.1);
  --success:#00B894;--success-bg:rgba(0,184,148,.1);
  --warning:#FDCB6E;--warning-bg:rgba(253,203,110,.12);
  --bg:#F0F0F8;--surface:#FFFFFF;--surface-2:#F5F5FC;
  --text:#2D3436;--text-2:#636E72;--text-3:#B2BEC3;
  --border:#E8E8F0;--border-focus:#6C5CE7;
  --radius:20px;--radius-sm:14px;--radius-xs:10px;
  --shadow-sm:0 2px 12px rgba(108,92,231,.08);
  --shadow:0 8px 32px rgba(108,92,231,.12);
  --shadow-lg:0 20px 60px rgba(108,92,231,.18);
  --transition:.25s cubic-bezier(.4,0,.2,1);
  --font:'Noto Sans SC',-apple-system,BlinkMacSystemFont,sans-serif;
  --mono:'JetBrains Mono','SF Mono',monospace;
  --gradient:linear-gradient(135deg,#6C5CE7 0%,#A29BFE 40%,#FD79A8 100%);
  --gradient-2:linear-gradient(135deg,#6C5CE7,#A29BFE);
}
body{font-family:var(--font);background:var(--bg);color:var(--text);min-height:100vh;min-height:100dvh;max-width:560px;margin:0 auto;-webkit-font-smoothing:antialiased;-webkit-tap-highlight-color:transparent;position:relative;overflow-x:hidden}

/* === BG Effects === */
.bg-glow{position:fixed;top:-150px;right:-100px;width:500px;height:500px;background:radial-gradient(circle,rgba(108,92,231,.06) 0%,transparent 60%);pointer-events:none;z-index:0;animation:float 20s ease-in-out infinite}
.bg-glow-2{position:fixed;bottom:-100px;left:-100px;width:400px;height:400px;background:radial-gradient(circle,rgba(253,121,168,.05) 0%,transparent 60%);pointer-events:none;z-index:0;animation:float 25s ease-in-out infinite reverse}
@keyframes float{0%,100%{transform:translate(0,0)}50%{transform:translate(30px,-20px)}}

/* === Header === */
.header{display:flex;align-items:center;justify-content:space-between;padding:14px 20px;position:sticky;top:0;z-index:100;background:rgba(255,255,255,.75);backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px);border-bottom:1px solid rgba(232,232,240,.5)}
.header-left{display:flex;align-items:center;gap:10px}
.logo{width:36px;height:36px;border-radius:12px;background:var(--gradient);display:flex;align-items:center;justify-content:center;color:white;font-weight:900;font-size:14px;box-shadow:0 4px 16px rgba(108,92,231,.35);letter-spacing:-.5px}
.header h1{font-size:17px;font-weight:900;letter-spacing:-.5px;background:var(--gradient);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.header-right{display:flex;gap:2px}

.badge{font-size:9px;font-weight:700;padding:3px 8px;border-radius:20px;letter-spacing:.5px}
.badge-offline{background:var(--surface-2);color:var(--text-3)}
.badge-online{background:var(--success-bg);color:var(--success);border:1px solid rgba(0,184,148,.2);animation:pulse-badge 2s infinite}
@keyframes pulse-badge{0%,100%{box-shadow:0 0 0 0 rgba(0,184,148,.2)}50%{box-shadow:0 0 0 6px rgba(0,184,148,0)}}

.btn-icon{width:36px;height:36px;border:none;background:transparent;border-radius:var(--radius-xs);cursor:pointer;display:flex;align-items:center;justify-content:center;color:var(--text-2);transition:all var(--transition)}
.btn-icon:hover{background:var(--primary-glow);color:var(--primary)}
.btn-icon:active{transform:scale(.88)}

.btn-icon-sm{width:28px;height:28px;border:none;background:var(--surface-2);border-radius:var(--radius-xs);cursor:pointer;font-size:16px;display:flex;align-items:center;justify-content:center;color:var(--text-3)}

/* === Panel === */
.panel{background:var(--surface);border-bottom:1px solid var(--border);animation:slideDown .25s ease}
@keyframes slideDown{from{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}
.panel-inner{padding:18px 20px}
.panel-title{font-size:12px;font-weight:800;margin-bottom:14px;color:var(--text-3);text-transform:uppercase;letter-spacing:1px}
.panel-label{font-size:10px;font-weight:700;color:var(--text-3);text-transform:uppercase;letter-spacing:1px;margin-bottom:6px}
.panel-hint{font-size:13px;color:var(--text-3);text-align:center;padding:12px 0}

.search-inner{display:flex;align-items:center;gap:8px;background:var(--surface-2);border-radius:var(--radius-sm);padding:8px 12px;margin:14px 20px 0}
.search-input{flex:1;border:none;background:transparent;outline:none;font-size:14px;font-family:var(--font);color:var(--text)}
.search-input::placeholder{color:var(--text-3)}
.filter-pills{display:flex;gap:6px;padding:12px 20px 14px;overflow-x:auto}
.pill{padding:5px 14px;border-radius:20px;font-size:12px;font-weight:700;border:1.5px solid var(--border);background:transparent;color:var(--text-2);cursor:pointer;white-space:nowrap;transition:all var(--transition);font-family:var(--font)}
.pill:hover{border-color:var(--primary);color:var(--primary)}
.pill.active{background:var(--gradient);color:white;border-color:transparent;box-shadow:0 3px 12px rgba(108,92,231,.3)}

.sort-options{display:flex;flex-direction:column;gap:4px}
.sort-option{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:var(--radius-sm);cursor:pointer;font-size:14px;font-weight:500;transition:background var(--transition)}
.sort-option:hover{background:var(--surface-2)}
.sort-option input[type="radio"]{accent-color:var(--primary);width:16px;height:16px}

/* === Sync === */
.sync-section{text-align:center}
.sync-actions{display:flex;gap:10px;justify-content:center;margin-top:16px}
.sync-hero{padding:10px 0 4px}
.sync-hero-text{font-size:14px;font-weight:600;color:var(--text);margin-top:10px;line-height:1.6}
.sync-hero-text span{font-weight:400;color:var(--text-3);font-size:13px}
.room-code{font-size:34px;font-weight:900;letter-spacing:10px;color:var(--primary);margin:8px 0 16px;font-family:var(--mono)}
.room-code-tag{font-size:11px;font-weight:700;color:var(--primary);background:var(--primary-glow);padding:3px 10px;border-radius:6px;font-family:var(--mono)}
.qrcode-box{display:inline-block;padding:14px;background:white;border-radius:var(--radius);box-shadow:var(--shadow-sm);margin-bottom:12px;border:1px solid var(--border)}
.device-status{display:flex;align-items:center;justify-content:center;gap:8px;font-size:13px;color:var(--text-3)}
.dot{width:8px;height:8px;border-radius:50%;flex-shrink:0}
.dot-online{background:var(--success);box-shadow:0 0 0 3px var(--success-bg)}
.dot-waiting{background:var(--warning);box-shadow:0 0 0 3px var(--warning-bg);animation:pulse 2s infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.4}}
.connected-card{background:linear-gradient(135deg,rgba(108,92,231,.04),rgba(253,121,168,.04));border:1px solid rgba(108,92,231,.1);border-radius:var(--radius-sm);padding:14px 16px;text-align:left}
.connected-top{display:flex;align-items:center;gap:8px;margin-bottom:8px}
.connected-label{font-size:14px;font-weight:700}
.connected-devices{display:flex;align-items:center;gap:6px;font-size:13px;color:var(--text-2)}

/* === Trash === */
.trash-list{max-height:200px;overflow-y:auto}
.trash-item{display:flex;align-items:center;justify-content:space-between;padding:10px 12px;border-radius:var(--radius-xs);transition:background var(--transition)}
.trash-item:hover{background:var(--surface-2)}
.trash-item+.trash-item{border-top:1px solid var(--border)}
.trash-title{font-size:13px;font-weight:500;color:var(--text-2);flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.trash-actions{display:flex;gap:4px}
.btn-trash-action{border:none;background:transparent;cursor:pointer;font-size:11px;font-weight:700;padding:4px 10px;border-radius:6px;transition:all var(--transition);font-family:var(--font)}
.btn-restore{color:var(--primary)}
.btn-restore:hover{background:var(--primary-glow)}
.btn-perm-del{color:var(--danger)}
.btn-perm-del:hover{background:var(--danger-bg)}

/* === Buttons === */
.btn{padding:10px 22px;border:none;border-radius:var(--radius-sm);font-size:13px;font-weight:700;cursor:pointer;transition:all var(--transition);white-space:nowrap;font-family:var(--font)}
.btn:active{transform:scale(.97)}
.btn-primary{background:var(--gradient);color:white;box-shadow:0 4px 18px rgba(108,92,231,.35)}
.btn-primary:hover{box-shadow:0 6px 28px rgba(108,92,231,.45);transform:translateY(-1px)}
.btn-outline{background:transparent;color:var(--text-2);border:1.5px solid var(--border)}
.btn-outline:hover{background:var(--surface-2)}
.btn-ghost{background:transparent;color:var(--text-3);border:none;font-weight:600}
.btn-ghost:hover{color:var(--danger)}
.btn-sm{padding:7px 14px;font-size:12px}

/* === Input === */
.input{width:100%;padding:11px 14px;border:1.5px solid var(--border);border-radius:var(--radius-sm);font-size:14px;outline:none;transition:all var(--transition);background:var(--surface);font-family:var(--font)}
.input:focus{border-color:var(--border-focus);box-shadow:0 0 0 4px var(--primary-glow)}
.input-code{font-family:var(--mono);font-size:20px;text-align:center;letter-spacing:8px;text-transform:uppercase;font-weight:700}
.pill-select{padding:6px 10px;border:1.5px solid var(--border);border-radius:20px;font-size:11px;font-weight:700;outline:none;background:var(--surface);color:var(--text-2);cursor:pointer;font-family:var(--font)}

/* === Add Bar === */
.add-bar{padding:12px 16px 14px;background:rgba(255,255,255,.8);backdrop-filter:blur(20px);border-top:1px solid var(--border);position:fixed;bottom:0;left:0;right:0;z-index:90;padding-bottom:max(14px,env(safe-area-inset-bottom))}
.add-bar-inner{display:flex;gap:10px;align-items:center}
.add-input{flex:1;border-radius:var(--radius);padding:12px 16px;font-size:14px;background:var(--surface-2);border-color:transparent}
.add-input:focus{background:var(--surface);border-color:var(--primary)}
.btn-add-circle{width:46px;height:46px;border-radius:50%;border:none;background:var(--gradient);color:white;cursor:pointer;display:flex;align-items:center;justify-content:center;box-shadow:0 4px 18px rgba(108,92,231,.35);transition:all var(--transition);flex-shrink:0}
.btn-add-circle:hover{transform:scale(1.1);box-shadow:0 6px 28px rgba(108,92,231,.45)}
.btn-add-circle:active{transform:scale(.92)}
.add-options{display:flex;align-items:center;gap:8px;margin-top:8px;padding-left:4px}

@media(min-width:481px){
  .add-bar{position:static;background:var(--surface);border-top:1px solid var(--border);backdrop-filter:none;padding:14px 20px}
  .content-area{padding-bottom:40px}
  .add-input{background:var(--surface);border-color:var(--border)}
}

/* === Stats === */
.stats-bar{display:flex;justify-content:space-between;align-items:center;padding:14px 20px 8px}
.stats-left,.stats-right{display:flex;align-items:center;gap:4px}
.stat-num{font-weight:900;color:var(--text);font-size:15px;font-family:var(--mono)}
.stat-label{color:var(--text-3);font-weight:500;font-size:12px}
.stat-divider{color:var(--border);margin:0 4px}
.stat-pct{font-weight:800;background:var(--gradient);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;font-size:14px;font-family:var(--mono)}
.btn-text{border:none;background:none;color:var(--primary);font-size:11px;font-weight:700;cursor:pointer;padding:3px 6px;border-radius:6px;transition:background var(--transition);font-family:var(--font)}
.btn-text:hover{background:var(--primary-glow)}

.progress-wrap{height:4px;margin:0 20px;border-radius:2px;background:var(--border);overflow:hidden}
.progress-bar{height:100%;background:var(--gradient);border-radius:2px;transition:width .6s cubic-bezier(.4,0,.2,1);width:0%}

/* === Todo List === */
.todo-list{padding:6px 16px 100px}
.todo-item{display:flex;align-items:center;gap:10px;padding:14px 14px;background:var(--surface);border-radius:var(--radius);margin-bottom:6px;border:1px solid var(--border);transition:all var(--transition);animation:fadeUp .3s ease}
@keyframes fadeUp{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
.todo-item:hover{box-shadow:var(--shadow-sm);border-color:rgba(108,92,231,.12);transform:translateY(-1px)}
.todo-item.completed{opacity:.4;background:var(--surface-2)}
.todo-item.completed .todo-title{text-decoration:line-through;color:var(--text-3)}

.todo-checkbox{width:22px;height:22px;border:2px solid var(--border);border-radius:8px;cursor:pointer;flex-shrink:0;display:flex;align-items:center;justify-content:center;transition:all var(--transition)}
.todo-checkbox:hover{border-color:var(--primary);box-shadow:0 0 0 3px var(--primary-glow)}
.todo-checkbox.checked{background:var(--gradient);border-color:transparent}
.todo-checkbox.checked::after{content:"✓";color:white;font-size:13px;font-weight:900}

.todo-body{flex:1;min-width:0}
.todo-title{font-size:14px;font-weight:600;line-height:1.45;word-break:break-word}
.todo-meta{display:flex;flex-wrap:wrap;gap:8px;margin-top:4px;font-size:10px;color:var(--text-3);font-weight:500}
.todo-meta span{display:flex;align-items:center;gap:3px}

.priority-dot{width:6px;height:6px;border-radius:50%;flex-shrink:0}
.priority-0{background:transparent}
.priority-1{background:#74B9FF}
.priority-2{background:var(--warning)}
.priority-3{background:var(--danger)}

.todo-actions{display:flex;gap:2px;opacity:0;transition:opacity var(--transition)}
.todo-item:hover .todo-actions{opacity:1}
.btn-action{width:30px;height:30px;border:none;background:transparent;cursor:pointer;color:var(--text-3);border-radius:var(--radius-xs);display:flex;align-items:center;justify-content:center;transition:all var(--transition)}
.btn-action:hover{background:var(--surface-2);color:var(--text)}
.btn-action.btn-edit:hover{background:var(--primary-glow);color:var(--primary)}
.btn-action.btn-del:hover{background:var(--danger-bg);color:var(--danger)}

/* === Empty === */
.empty-state{text-align:center;padding:80px 20px 40px}
.empty-illustration{margin-bottom:16px}
.empty-title{font-size:16px;font-weight:800;margin-bottom:4px}
.empty-sub{font-size:13px;color:var(--text-3);font-weight:400}

/* === Modal === */
.modal{position:fixed;inset:0;z-index:200;display:flex;align-items:center;justify-content:center}
.modal-backdrop{position:absolute;inset:0;background:rgba(45,52,54,.5);backdrop-filter:blur(8px)}
.modal-dialog{position:relative;background:var(--surface);border-radius:28px;width:90%;max-width:400px;box-shadow:var(--shadow-lg);animation:modalIn .3s cubic-bezier(.4,0,.2,1)}
@keyframes modalIn{from{opacity:0;transform:scale(.92) translateY(12px)}to{opacity:1;transform:scale(1) translateY(0)}}
.modal-header{display:flex;align-items:center;justify-content:space-between;padding:20px 20px 0}
.modal-header h3{font-size:16px;font-weight:900}
.btn-close{width:34px;height:34px;border:none;background:var(--surface-2);border-radius:50%;font-size:18px;cursor:pointer;display:flex;align-items:center;justify-content:center;color:var(--text-2);transition:all var(--transition)}
.btn-close:hover{background:var(--border);transform:rotate(90deg)}
.modal-body{padding:16px 20px;display:flex;flex-direction:column;gap:10px}
.modal-footer{padding:0 20px 18px;display:flex;gap:10px;justify-content:flex-end}
.edit-detail{background:var(--surface-2);border-radius:var(--radius-sm);padding:12px 14px;margin-top:4px}
.detail-row{display:flex;justify-content:space-between;align-items:center;padding:6px 0;font-size:12px}
.detail-row+.detail-row{border-top:1px solid var(--border)}
.detail-label{color:var(--text-3);font-weight:500}
.detail-value{color:var(--text-2);font-weight:600;text-align:right;max-width:60%;word-break:break-all}
.scanner-box{width:100%;aspect-ratio:1;max-width:280px;margin:16px auto 0;border-radius:var(--radius);overflow:hidden}
.scan-hint{text-align:center;font-size:13px;color:var(--text-3);padding:12px 20px 18px}

/* === Effects === */
.confetti-canvas{position:fixed;inset:0;z-index:250;pointer-events:none}
.toast-container{position:fixed;bottom:90px;left:50%;transform:translateX(-50%);z-index:300;display:flex;flex-direction:column;gap:6px;pointer-events:none;width:calc(100% - 40px);max-width:400px}
@media(min-width:481px){.toast-container{bottom:20px}}
.toast{padding:12px 16px;background:var(--text);color:white;border-radius:var(--radius-sm);font-size:13px;font-weight:600;box-shadow:var(--shadow);animation:toastIn .3s ease;pointer-events:auto;display:flex;align-items:center;justify-content:space-between;gap:12px}
.toast.success{background:linear-gradient(135deg,#00B894,#00A884)}
.toast.error{background:linear-gradient(135deg,#FF6B6B,#EE5A24)}
.toast.undo{background:linear-gradient(135deg,#2D3436,#636E72)}
.toast-undo-btn{border:none;background:rgba(255,255,255,.25);color:white;padding:4px 14px;border-radius:6px;font-size:12px;font-weight:700;cursor:pointer;transition:background var(--transition);font-family:var(--font)}
.toast-undo-btn:hover{background:rgba(255,255,255,.4)}
@keyframes toastIn{from{opacity:0;transform:translateY(12px) scale(.96)}to{opacity:1;transform:translateY(0) scale(1)}}

.hidden{display:none!important}
@media(hover:none){.todo-actions{opacity:1}}
@media(max-width:480px){.header{padding:12px 16px}.todo-list{padding:4px 12px 100px}.stats-bar{padding:12px 16px 6px}}