:root{--bg-primary:#e0e0e0;--bg-secondary:#d5d5d5;--bg-surface:#e8e8e8;--bg-hover:#d0d0d0;--text-primary:#323232;--text-secondary:#555;--text-muted:#888;--accent:#2d8cf0;--border:#323232;--success:#4caf50;--warning:#ff9800;--error:#f44336;--info:#2196f3}*{box-sizing:border-box}body{background-color:var(--bg-secondary);color:var(--text-primary);font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif}::-webkit-scrollbar{width:6px;height:6px}::-webkit-scrollbar-track{background:var(--bg-secondary)}::-webkit-scrollbar-thumb{background:var(--text-muted);border-radius:3px}::-webkit-scrollbar-thumb:hover{background:var(--text-secondary)}::selection{background-color:#2d8cf04d}.app-layout{background-color:var(--bg-secondary);flex-direction:row;height:100vh;display:flex;overflow:hidden}.sidebar-desktop{background-color:var(--bg-surface);border-right:2px solid var(--text-primary);width:72px;min-width:72px;box-shadow:4px 0 0 var(--text-primary);z-index:10;flex-direction:column;align-items:center;padding:16px 0;display:flex}.main-content{flex:1;min-width:0;padding:32px;overflow-y:auto}.bottom-nav-mobile{display:none}.logo-btn{color:#fff;background-color:var(--accent);border:2px solid var(--text-primary);width:44px;height:44px;box-shadow:3px 3px 0 var(--text-primary);border-radius:10px;justify-content:center;align-items:center;margin-bottom:8px;font-size:18px;font-weight:900;text-decoration:none;display:flex}.nav-item{width:56px;height:56px;color:var(--text-muted);background-color:#0000;border:2px solid #0000;border-radius:10px;flex-direction:column;justify-content:center;align-items:center;gap:3px;text-decoration:none;display:flex}.nav-item.active{border-color:var(--text-primary);color:var(--accent);background-color:var(--bg-primary);box-shadow:2px 2px 0 var(--text-primary)}.nav-item span{font-size:10px;font-weight:600;line-height:1}.new-btn{border:2px solid var(--text-primary);background-color:var(--accent);color:#fff;width:44px;height:44px;box-shadow:3px 3px 0 var(--text-primary);border-radius:10px;justify-content:center;align-items:center;text-decoration:none;display:flex}.logout-btn{width:36px;height:36px;color:var(--text-muted);cursor:pointer;background:0 0;border:none;border-radius:8px;justify-content:center;align-items:center;display:flex}.filter-scroll{-webkit-overflow-scrolling:touch;scrollbar-width:none;gap:6px;padding-bottom:4px;display:flex;overflow-x:auto}.filter-scroll::-webkit-scrollbar{display:none}.tags-scroll{-webkit-overflow-scrolling:touch;scrollbar-width:none;flex-wrap:nowrap;gap:6px;display:flex;overflow-x:auto}.tags-scroll::-webkit-scrollbar{display:none}.tags-scroll>button{flex-shrink:0}.page-header{align-items:baseline;gap:12px;margin-bottom:20px;display:flex}.page-title{color:var(--text-primary);margin:0;font-size:24px;font-weight:900}.page-subtitle{color:var(--text-muted);margin:0;font-size:14px}.quick-save-bar{border:2px solid var(--border);background-color:var(--bg-surface);border-radius:10px;align-items:center;gap:8px;margin-bottom:12px;padding:10px 14px;display:flex}.quick-save-bar input{color:var(--text-primary);background:0 0;border:none;outline:none;flex:1;font-size:14px}.quick-save-bar input::placeholder{color:var(--text-muted)}.search-bar{border:2px solid var(--border);background-color:var(--bg-surface);border-radius:10px;align-items:center;gap:8px;margin-bottom:12px;padding:8px 14px;display:flex}.search-bar input{color:var(--text-primary);background:0 0;border:none;outline:none;flex:1;font-size:14px}.search-bar input::placeholder{color:var(--text-muted)}@media (max-width:768px){.sidebar-desktop{display:none}.main-content{padding:16px 16px 80px}.bottom-nav-mobile{background-color:var(--bg-surface);border-top:2px solid var(--text-primary);height:60px;box-shadow:0 -4px 0 var(--text-primary);z-index:100;justify-content:space-around;align-items:center;padding:0 8px;display:flex;position:fixed;bottom:0;left:0;right:0}.bottom-nav-item{color:var(--text-muted);cursor:pointer;background:0 0;border:none;border-radius:8px;flex-direction:column;justify-content:center;align-items:center;gap:2px;padding:6px 12px;font-size:10px;text-decoration:none;display:flex}.bottom-nav-item span{font-size:10px;font-weight:600}.bottom-nav-item.active{color:var(--accent)}.bottom-nav-new{background-color:var(--accent);color:#fff;border:2px solid var(--text-primary);width:48px;height:48px;box-shadow:2px 2px 0 var(--text-primary);border-radius:50%;justify-content:center;align-items:center;margin-top:-16px;display:flex}.page-title{font-size:20px}.search-bar{margin-bottom:8px;padding:8px 12px}}@media (max-width:600px){.masonry-grid{column-count:2!important;column-gap:8px!important}.masonry-grid>div{margin-bottom:8px!important}.masonry-grid img{max-height:200px!important}}
.app-layout{background-color:var(--bg-secondary);height:100dvh;overflow:hidden;flex-direction:row!important;display:flex!important}.sidebar{background-color:var(--bg-surface);border-right:2px solid var(--text-primary);width:72px;min-width:72px;box-shadow:4px 0 0 var(--text-primary);z-index:10;flex-direction:column;align-items:center;padding:16px 0;display:flex}.sidebar-top{flex-direction:column;flex:1;align-items:center;gap:8px;display:flex}.sidebar-bottom{flex-direction:column;align-items:center;gap:8px;display:flex}.sidebar-logo{color:#fff;background-color:var(--accent);border:2px solid var(--text-primary);width:44px;height:44px;box-shadow:3px 3px 0 var(--text-primary);border-radius:10px;justify-content:center;align-items:center;margin-bottom:8px;font-size:18px;font-weight:900;text-decoration:none;transition:transform .15s,box-shadow .15s;display:flex}.sidebar-logo:active{box-shadow:1px 1px 0 var(--text-primary);transform:translate(2px,2px)}.sidebar-nav{flex-direction:column;gap:4px;display:flex}.sidebar-link{width:56px;height:56px;color:var(--text-muted);border:2px solid #0000;border-radius:10px;flex-direction:column;justify-content:center;align-items:center;gap:3px;text-decoration:none;transition:all .15s;display:flex}.sidebar-link:hover{color:var(--text-primary);background-color:var(--bg-hover)}.sidebar-link.active{color:var(--accent);background-color:var(--bg-primary);border:2px solid var(--text-primary);box-shadow:2px 2px 0 var(--text-primary);transform:translate(1px,1px)}.sidebar-label{font-size:10px;font-weight:600;line-height:1}.sidebar-add{border:2px solid var(--text-primary);background-color:var(--accent);color:#fff;width:44px;height:44px;box-shadow:3px 3px 0 var(--text-primary);border-radius:10px;justify-content:center;align-items:center;text-decoration:none;transition:transform .15s,box-shadow .15s;display:flex}.sidebar-add:active{box-shadow:1px 1px 0 var(--text-primary);transform:translate(2px,2px)}.sidebar-logout{width:36px;height:36px;color:var(--text-muted);cursor:pointer;background:0 0;border:none;border-radius:8px;justify-content:center;align-items:center;transition:color .15s;display:flex}.sidebar-logout:hover{color:var(--error)}.main-content{min-width:0;padding:32px;overflow-y:auto;flex:1!important}.page-container{max-width:960px;margin:0 auto}.page-header{justify-content:space-between;align-items:center;margin-bottom:24px;display:flex}.page-title{color:var(--text-primary);margin:0;font-size:28px;font-weight:900}.page-subtitle{color:var(--text-muted);margin:4px 0 0;font-size:14px}.filter-bar{flex-wrap:wrap;gap:8px;margin-bottom:24px;display:flex}.filter-btn{border:2px solid var(--text-primary);background-color:var(--bg-surface);box-shadow:3px 3px 0 var(--text-primary);color:var(--text-muted);cursor:pointer;border-radius:8px;align-items:center;gap:6px;padding:8px 14px;font-size:13px;font-weight:600;transition:all .15s;display:flex}.filter-btn:hover{color:var(--text-primary);background-color:var(--bg-hover)}.filter-btn.active{color:#fff;background-color:var(--accent);box-shadow:2px 2px 0 var(--text-primary);transform:translate(1px,1px)}.filter-btn:active{box-shadow:1px 1px 0 var(--text-primary);transform:translate(2px,2px)}.empty-state{text-align:center;flex-direction:column;justify-content:center;align-items:center;padding:80px 20px;display:flex}.empty-icon{color:var(--text-muted);opacity:.4;margin-bottom:16px;font-size:48px;font-weight:900}.empty-title{color:var(--text-primary);margin:0 0 8px;font-size:18px;font-weight:700}.empty-hint{color:var(--text-muted);margin:0;font-size:14px}.bookmark-grid{grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:16px;display:grid}
.page-wrap{max-width:960px;margin:0 auto}.page-header{margin-bottom:24px}.page-title{color:var(--text-primary);margin:0;font-size:28px;font-weight:900}.page-subtitle{color:var(--text-muted);margin:4px 0 0;font-size:14px}.filter-bar{flex-wrap:wrap;gap:8px;margin-bottom:24px;display:flex}.filter-btn{border:2px solid var(--text-primary);background-color:var(--bg-surface);box-shadow:3px 3px 0 var(--text-primary);color:var(--text-muted);cursor:pointer;border-radius:8px;align-items:center;gap:6px;padding:8px 14px;font-size:13px;font-weight:600;transition:all .15s;display:flex}.filter-btn:hover{color:var(--text-primary)}.filter-btn.active{color:#fff;background-color:var(--accent);box-shadow:2px 2px 0 var(--text-primary);transform:translate(1px,1px)}.filter-btn:active{box-shadow:1px 1px 0 var(--text-primary);transform:translate(2px,2px)}.empty-state{text-align:center;flex-direction:column;justify-content:center;align-items:center;padding:80px 20px;display:flex}.empty-icon{color:var(--text-muted);opacity:.4;margin-bottom:16px;font-size:48px;font-weight:900}.empty-title{color:var(--text-primary);margin:0 0 8px;font-size:18px;font-weight:700}.empty-hint{color:var(--text-muted);margin:0;font-size:14px}.bookmark-grid{grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:16px;display:grid}@media (max-width:900px){.masonry-grid{column-count:2!important}}@media (max-width:600px){.masonry-grid{column-count:1!important}}