:root{--primary: #6366f1;--primary-hover: #4f46e5;--bg-gradient: linear-gradient(135deg, #f0f9ff 0%, #e0e7ff 100%);--card-bg: rgba(255, 255, 255, .85);--text-main: #1e293b;--text-sec: #64748b;--border: #e2e8f0;--tag-cat: #dbeafe;--tag-cat-text: #1d4ed8;--tag-col: #fce7f3;--tag-col-text: #be185d;--tag-siz: #fef3c7;--tag-siz-text: #b45309}*{box-sizing:border-box;margin:0;padding:0;font-family:PingFang SC,Microsoft YaHei,sans-serif}body{background:var(--bg-gradient);min-height:100vh;color:var(--text-main);overflow-x:hidden}.start-screen{display:flex;justify-content:center;align-items:center;height:100vh}.start-card{background:#fff;padding:40px;border-radius:24px;text-align:center;box-shadow:0 20px 40px #00000014;max-width:400px}.hero-icon{width:80px;height:80px;background:var(--primary);color:#fff;border-radius:20px;display:flex;justify-content:center;align-items:center;margin:0 auto 20px;box-shadow:0 10px 20px #6366f14d}.hero-icon svg{width:40px;height:40px}.start-card h1{font-size:28px;margin-bottom:12px}.start-card p{color:var(--text-sec);margin-bottom:24px;line-height:1.6}.cloud-notice{display:inline-flex;align-items:center;gap:6px;background:#f1f5f9;padding:6px 12px;border-radius:20px;font-size:13px;color:var(--text-sec);margin-bottom:30px}.app-container{max-width:900px;margin:0 auto;padding:20px;min-height:100vh;display:flex;flex-direction:column}.app-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:24px}.logo{display:flex;align-items:center;gap:10px;font-size:20px;font-weight:700;color:var(--primary)}.cloud-badge{display:flex;align-items:center;gap:6px;font-size:12px;padding:6px 12px;border-radius:20px;background:#fff;box-shadow:0 2px 8px #0000000d;transition:all .3s}.cloud-badge.loading{color:#eab308}.cloud-badge.synced{color:#10b981}.cloud-badge.error{color:#ef4444}.control-panel{background:var(--card-bg);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-radius:20px;padding:24px;box-shadow:0 8px 32px #0000000a;border:1px solid rgba(255,255,255,.5);margin-bottom:24px}.filters-row{display:flex;gap:16px;align-items:flex-end;flex-wrap:wrap;margin-bottom:20px}.filter-group{display:flex;flex-direction:column;gap:8px;flex:1;min-width:120px}.filter-group label{font-size:13px;font-weight:600;color:var(--text-sec);text-transform:uppercase;letter-spacing:.5px}.filter-group select{-webkit-appearance:none;-moz-appearance:none;appearance:none;background:#fff;border:1px solid var(--border);padding:12px 40px 12px 16px;border-radius:12px;font-size:15px;color:var(--text-main);cursor:pointer;outline:none;transition:border-color .2s;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 12px center}.filter-group select:focus{border-color:var(--primary);box-shadow:0 0 0 3px #6366f11a}.btn-primary{background:var(--primary);color:#fff;border:none;padding:12px 24px;border-radius:12px;font-size:16px;font-weight:600;cursor:pointer;transition:all .2s;box-shadow:0 4px 12px #6366f14d}.btn-primary:hover{background:var(--primary-hover);transform:translateY(-2px)}.btn-secondary{background:#fff;color:var(--text-main);border:1px solid var(--border);padding:10px 20px;border-radius:10px;font-weight:600;cursor:pointer;transition:all .2s}.btn-secondary:hover{background:#f8fafc}.btn-text{background:transparent;border:none;color:var(--text-sec);padding:10px;cursor:pointer;font-weight:600}.btn-reset{background:#f1f5f9;border:none;width:46px;height:46px;border-radius:12px;display:flex;justify-content:center;align-items:center;color:var(--text-sec);cursor:pointer;transition:all .2s}.btn-reset:hover{background:#e2e8f0;color:var(--text-main);transform:rotate(15deg)}.status-row{display:flex;justify-content:space-between;align-items:center;border-top:1px solid var(--border);padding-top:16px}.active-tags{display:flex;gap:8px;flex-wrap:wrap}.tag-pill{padding:4px 12px;border-radius:20px;font-size:12px;font-weight:600}.tag-pill.category{background:var(--tag-cat);color:var(--tag-cat-text)}.tag-pill.color{background:var(--tag-col);color:var(--tag-col-text)}.tag-pill.size{background:var(--tag-siz);color:var(--tag-siz-text)}.tag-pill.muted{background:#f1f5f9;color:var(--text-sec)}.result-count{font-size:14px;color:var(--text-sec)}.result-count strong{color:var(--primary);font-size:16px}.items-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:20px;padding-bottom:100px}.item-card{background:#fff;border-radius:16px;padding:20px;box-shadow:0 4px 12px #00000008;transition:transform .2s,box-shadow .2s;position:relative;display:flex;flex-direction:column;align-items:center;text-align:center}.item-card:hover{transform:translateY(-4px);box-shadow:0 12px 24px #0000000f}.delete-btn{position:absolute;top:10px;right:10px;background:#f1f5f9;border:none;width:24px;height:24px;border-radius:50%;display:flex;justify-content:center;align-items:center;color:var(--text-sec);cursor:pointer;opacity:0;transition:opacity .2s}.item-card:hover .delete-btn{opacity:1}.delete-btn:hover{background:#fee2e2;color:#ef4444}.item-icon{width:60px;height:60px;background:var(--bg-gradient);border-radius:50%;display:flex;justify-content:center;align-items:center;font-size:24px;font-weight:700;color:var(--primary);margin-bottom:12px}.item-card h3{font-size:18px;margin-bottom:16px}.item-props{display:flex;gap:6px;flex-wrap:wrap;justify-content:center}.prop-tag{font-size:11px;padding:3px 8px;border-radius:6px;font-weight:600}.prop-tag.cat{background:var(--tag-cat);color:var(--tag-cat-text)}.prop-tag.col{background:var(--tag-col);color:var(--tag-col-text)}.prop-tag.siz{background:var(--tag-siz);color:var(--tag-siz-text)}.empty-state{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:60px 20px;text-align:center;background:#ffffff80;border-radius:20px;border:2px dashed var(--border)}.empty-state svg{margin-bottom:20px}.empty-state h3{font-size:20px;margin-bottom:8px;color:var(--text-main)}.empty-state p{color:var(--text-sec);margin-bottom:24px}.fab-add{position:fixed;bottom:30px;right:30px;width:60px;height:60px;border-radius:30px;background:var(--primary);color:#fff;border:none;box-shadow:0 10px 25px #6366f166;display:flex;justify-content:center;align-items:center;cursor:pointer;transition:transform .2s;z-index:100}.fab-add:hover{transform:scale(1.1)}.modal-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background:#0006;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);display:flex;justify-content:center;align-items:center;z-index:1000}.modal-content{background:#fff;padding:30px;border-radius:20px;width:90%;max-width:400px;box-shadow:0 25px 50px #00000026}.modal-content h2{margin-bottom:20px}.form-group{margin-bottom:16px}.form-group label{display:block;font-size:13px;color:var(--text-sec);margin-bottom:6px}.form-group input,.form-group select{width:100%;padding:10px 12px;border:1px solid var(--border);border-radius:8px;font-size:15px;outline:none}.form-group input:focus,.form-group select:focus{border-color:var(--primary)}.modal-actions{display:flex;justify-content:flex-end;gap:12px;margin-top:24px}