:root {
    --bg: #f1f5f9;
    --surface: #ffffff;
    --text: #0f172a;
    --text-secondary: #64748b;
    --border: #e2e8f0;
    --primary: #3b82f6;
    --primary-hover: #2563eb;
    --toggle-bg: #cbd5e1;
    --top-nav-height: 64px;
    --bottom-nav-height: 72px;
    --modal-radius: 24px;
}
.dark-mode {
    --bg: #0f172a;
    --surface: #1e293b;
    --text: #e2e8f0;
    --text-secondary: #94a3b8;
    --border: #334155;
    --toggle-bg: #475569;
}

* { box-sizing: border-box; margin: 0; -webkit-tap-highlight-color: transparent; }
body {
    font-family: system-ui, -apple-system, sans-serif;
    background: var(--bg); color: var(--text);
    min-height: 100vh;
    overflow-x: hidden;
    transition: background 0.3s, color 0.3s;
}

.top-nav {
    position: fixed; top: 0; left: 0; right: 0; z-index: 1100;
    height: var(--top-nav-height);
    background: rgba(255,255,255,0.85); backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px); border-bottom: 1px solid var(--border);
    transition: all 0.3s;
    display: flex; align-items: center;
}
.dark-mode .top-nav { background: rgba(15,23,42,0.85); }
.nav-inner { max-width:950px; margin:0 auto; padding:12px 20px; width:100%; display:flex; align-items:center; justify-content:space-between; }
.nav-brand { display:flex; align-items:center; gap:12px; }
.nav-logo { width:36px; height:36px; }
.nav-title { display:flex; flex-direction:column; }
.nav-title-text { font-size:1.5rem; font-weight:800; color:var(--text); line-height:1.2; }
.nav-update { font-size:0.7rem; color:var(--text-secondary); }
.nav-actions { display:flex; align-items:center; gap:8px; }
.theme-toggle-btn {
    width:38px; height:38px; border-radius:10px; border:none;
    background: rgba(0,0,0,0.05);
    cursor:pointer; font-size:1.2rem;
    color:var(--text);
    transition: background 0.2s;
    display: flex; align-items: center; justify-content: center;
}
.dark-mode .theme-toggle-btn { background: rgba(255,255,255,0.1); }
.theme-icon-dark { display: none; }
.theme-icon-light { display: inline; }
.dark-mode .theme-icon-light { display: none; }
.dark-mode .theme-icon-dark { display: inline; }
.nav-menu { position:static; }
.nav-menu-btn {
    list-style:none; width:38px; height:38px; border-radius:10px; display:flex;
    align-items:center; justify-content:center; cursor:pointer; background:transparent;
    border:none; color:var(--text-secondary); font-size:1.4rem;
}
.nav-dropdown {
    position:absolute; left:0; right:0; top:100%; background:rgba(255,255,255,0.92);
    backdrop-filter:blur(12px); border:1px solid var(--border); border-top:none;
    border-radius:0 0 14px 14px; box-shadow:0 8px 24px rgba(0,0,0,0.08);
    padding:8px 20px; display:none; flex-direction:column; z-index:100;
}
.dark-mode .nav-dropdown { background:rgba(15,23,42,0.92); }
.nav-menu[open] .nav-dropdown { display:flex; }
.nav-dropdown button {
    display:flex; align-items:center; width:100%; padding:10px 0; border:none;
    background:transparent; font-size:0.95rem; font-weight:500; color:var(--text);
    cursor:pointer; text-align:left; font-family:inherit; transition:background 0.15s; gap:8px;
}
.nav-dropdown button:hover { background:rgba(0,0,0,0.04); border-radius:8px; padding-left:8px; }

#viewHome {
    padding-top: var(--top-nav-height);
    padding-bottom: calc(var(--bottom-nav-height) + 24px);
    min-height: 100vh;
    display: block;
}

#viewContainer {
    padding-top: var(--top-nav-height);
    padding-bottom: calc(var(--bottom-nav-height) + 24px);
    padding-left: 28px;
    padding-right: 28px;
    min-height: 100vh;
    display: none;
}
#viewContainer.active { display: block; }
#viewHome.active { display: block; }
#viewHome:not(.active) { display: none; }

.view { display:none; }
.view.active { display:block; }

.bottom-nav {
    position:fixed; bottom:16px; left:50%; transform:translateX(-50%);
    width:calc(100% - 32px); max-width:400px;
    background:var(--surface); backdrop-filter:blur(20px);
    -webkit-backdrop-filter:blur(20px);
    border:1px solid var(--border); border-radius:20px;
    padding:8px 12px; display:flex; justify-content:space-around;
    align-items:center; box-shadow:0 8px 24px rgba(0,0,0,0.06);
    z-index:900; transition:all 0.3s; user-select:none; touch-action:none;
}
.bottom-nav-item {
    flex:1; display:flex; flex-direction:column; align-items:center;
    gap:2px; padding:6px 0; border-radius:16px;
    color:var(--text-secondary); font-size:0.7rem; font-weight:500;
    cursor:pointer; transition:color 0.2s, background 0.2s;
    border:none; background:transparent; position:relative; z-index:1;
}
.bottom-nav-item .icon { display:flex; align-items:center; justify-content:center; }
.bottom-nav-item .icon svg { width:24px; height:24px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; transition:fill 0.2s, stroke 0.2s; color:inherit; }
.bottom-nav-item .icon-filled { display:none; }
.bottom-nav-item.active .icon-outline { display:none; }
.bottom-nav-item.active .icon-filled { display:inline; }
.bottom-nav-item.active .icon-filled svg { fill:currentColor; stroke:none; }
.bottom-nav-item .icon-outline svg { fill:none; stroke:currentColor; }

.slide-indicator {
    display: none;
    position:absolute; top:4px; bottom:4px; left:0; width:50%;
    background:rgba(255,255,255,0.3); backdrop-filter:blur(16px);
    -webkit-backdrop-filter:blur(16px); border-radius:16px;
    transition:transform 0.4s cubic-bezier(0.2,0.9,0.4,1), width 0.4s cubic-bezier(0.2,0.9,0.4,1);
    box-shadow:0 2px 10px rgba(0,0,0,0.08), inset 0 1px 0 rgba(255,255,255,0.5);
    border:1px solid rgba(255,255,255,0.3); pointer-events:none; z-index:0;
}
.dark-mode .slide-indicator {
    background:rgba(255,255,255,0.12); border-color:rgba(255,255,255,0.08);
    box-shadow:0 2px 10px rgba(0,0,0,0.3);
}

.bottom-nav.mode-slide {
    backdrop-filter:blur(24px); -webkit-backdrop-filter:blur(24px);
    background:rgba(255,255,255,0.35); border-radius:24px;
}
.dark-mode .bottom-nav.mode-slide { background:rgba(15,23,42,0.45); }

.bottom-nav.mode-slide .slide-indicator {
    display: block;
    background:rgba(255,255,255,0.25); backdrop-filter:blur(22px);
    -webkit-backdrop-filter:blur(22px);
    border:1px solid rgba(255,255,255,0.5);
    box-shadow:0 4px 12px rgba(0,0,0,0.1), inset 0 1px 0 rgba(255,255,255,0.6);
    border-radius:24px;
}
.dark-mode .bottom-nav.mode-slide .slide-indicator {
    background:rgba(255,255,255,0.15); border-color:rgba(255,255,255,0.2);
    box-shadow:0 4px 12px rgba(0,0,0,0.3), inset 0 1px 0 rgba(255,255,255,0.2);
}

#editModal .modal-sheet {
    display:flex; flex-direction:column; overflow:hidden;
}
#editModal .modal-sheet #editModalContent {
    flex:1; overflow-y:auto;
}
#editModal .modal-sheet .modal-footer {
    flex-shrink:0;
}

.profile-card {
    display:flex; align-items:center; gap:16px;
    background:var(--surface); border:1px solid var(--border); border-radius:20px;
    padding:20px; margin-bottom:24px;
}
.profile-avatar { width:56px; height:56px; border-radius:50%; background:linear-gradient(135deg,#3b82f6,#8b5cf6); display:flex; align-items:center; justify-content:center; font-size:2rem; color:white; overflow:hidden; }
.profile-info { flex:1; }
.profile-name { font-size:1.2rem; font-weight:700; margin-bottom:2px; }
.profile-bio { font-size:0.85rem; color:var(--text-secondary); }
.settings-list { background:var(--surface); border:1px solid var(--border); border-radius:20px; overflow:hidden; }
.settings-item { display:flex; align-items:center; justify-content:space-between; padding:14px 20px; border-bottom:1px solid var(--border); cursor:pointer; font-size:0.95rem; font-weight:500; }
.settings-item:last-child { border-bottom:none; }
.settings-item .item-left { display:flex; align-items:center; gap:10px; }
.settings-item .item-icon { font-size:1.3rem; }

.back-btn { width:40px; height:40px; border-radius:12px; border:1px solid var(--border); background:var(--surface); font-size:1.3rem; cursor:pointer; color:var(--text); display:flex; align-items:center; justify-content:center; transition:all 0.2s; }
.back-btn:hover { background:var(--bg); border-color:var(--primary); }
.appearance-header { display:flex; align-items:center; gap:12px; margin-bottom:20px; }
.appearance-header h2 { font-size:1.2rem; font-weight:700; }

.entry-btn { display:flex; align-items:center; justify-content:space-between; background:var(--surface); border:1px solid var(--border); border-radius:16px; padding:16px 20px; margin-bottom:12px; cursor:pointer; }
.entry-btn:hover { background:var(--bg); }
.entry-info { display:flex; flex-direction:column; gap:4px; }
.entry-title { font-size:1rem; font-weight:600; }
.entry-desc { font-size:0.85rem; color:var(--text-secondary); }

.tab-switch { display:flex; background:var(--surface); border:1px solid var(--border); border-radius:12px; padding:4px; margin-bottom:20px; }
.tab-switch button { flex:1; padding:8px 0; border:none; border-radius:10px; font-size:0.9rem; font-weight:500; background:transparent; color:var(--text-secondary); cursor:pointer; transition:all 0.2s; }
.tab-switch button.active { background:var(--primary); color:white; }

.config-card { background:var(--surface); border:1px solid var(--border); border-radius:20px; padding:20px; margin-bottom:16px; transition:border-color 0.2s; }
.config-card.active-card { border-color:var(--primary); box-shadow:0 0 0 2px rgba(59,130,246,0.15); }
.config-card-header { display:flex; justify-content:space-between; align-items:center; margin-bottom:8px; }
.config-card-title { font-size:1rem; font-weight:700; }
.status-badge { font-size:0.75rem; padding:4px 10px; border-radius:20px; background:#dcfce7; color:#166534; }
.status-badge.inactive { background:#f1f5f9; color:#64748b; }
.dark-mode .status-badge.inactive { background:#334155; color:#94a3b8; }
.config-summary { font-size:0.85rem; color:var(--text-secondary); margin-bottom:14px; }
.card-actions { display:flex; gap:10px; flex-wrap:wrap; }
.card-actions button { flex:1; min-width:60px; padding:10px 0; border-radius:10px; font-weight:600; font-size:0.85rem; border:1px solid var(--border); background:var(--surface); color:var(--text); cursor:pointer; transition:all 0.15s; }
.card-actions button.primary { background:var(--primary); color:white; border-color:var(--primary); }
.card-actions button.applied { background:#dcfce7; color:#166534; border-color:#bbf7d0; }
.dark-mode .card-actions button.applied { background:#064e3b; color:#86efac; border-color:#065f46; }
.card-actions button:hover { opacity:0.85; }

.add-config-btn { width:100%; padding:14px; border:2px dashed var(--border); border-radius:16px; background:transparent; color:var(--text-secondary); font-size:0.95rem; font-weight:500; cursor:pointer; transition:all 0.2s; }
.add-config-btn:hover { border-color:var(--primary); color:var(--primary); }

.custom-section-title { font-size:0.9rem; font-weight:600; color:var(--text-secondary); margin:20px 0 12px 0; padding-top:16px; border-top:1px solid var(--border); display:flex; align-items:center; gap:8px; }
.custom-section-title .badge-count { background:var(--border); color:var(--text-secondary); font-size:0.7rem; padding:0 8px; border-radius:12px; font-weight:500; }

.modal-overlay { position:fixed; top:0; left:0; right:0; bottom:0; background:rgba(0,0,0,0.4); z-index:1200; display:flex; align-items:center; justify-content:center; opacity:0; pointer-events:none; transition:opacity 0.2s; }
.modal-overlay.active { opacity:1; pointer-events:auto; }
.modal-sheet { background:var(--surface); width:90%; max-width:480px; border-radius:24px; padding:24px 20px 20px; max-height:80vh; overflow-y:auto; box-shadow:0 20px 60px rgba(0,0,0,0.3); margin:0 16px; position:relative; }
.modal-header { margin-bottom:20px; }
.modal-header h3 { font-size:1.3rem; font-weight:700; }
.modal-header .subtitle { font-size:0.9rem; color:var(--text-secondary); margin-top:2px; }
.modal-divider { height:1px; background:var(--border); margin:16px 0; }
.modal-list { display:flex; flex-direction:column; gap:10px; }
.modal-list button { display:flex; align-items:center; width:100%; padding:14px 20px; border:1px solid var(--border); border-radius:14px; background:var(--surface); color:var(--text); font-size:0.95rem; font-weight:500; cursor:pointer; transition:background 0.15s; }
.modal-list button:hover { background:var(--bg); }
.modal-close-btn { background:none; border:none; font-size:1.5rem; cursor:pointer; position:absolute; right:20px; top:20px; color:var(--text-secondary); }

.setting-item { display:flex; align-items:center; justify-content:space-between; padding:14px 0; border-bottom:1px solid var(--border); cursor:pointer; }
.setting-item .label { font-size:0.95rem; font-weight:500; }
.setting-item .value { display:flex; align-items:center; gap:8px; font-size:0.9rem; color:var(--text-secondary); }
.color-swatch-sm { width:22px; height:22px; border-radius:5px; border:1px solid var(--border); flex-shrink:0; }
.toggle-sm { position:relative; width:44px; height:24px; background:var(--toggle-bg); border-radius:12px; cursor:pointer; transition:background 0.2s; flex-shrink:0; }
.toggle-sm.active { background:var(--primary); }
.toggle-sm::after { content:''; position:absolute; top:2px; left:2px; width:20px; height:20px; background:white; border-radius:50%; transition:transform 0.2s; }
.toggle-sm.active::after { transform:translateX(20px); }
.modal-footer { display:flex; gap:12px; margin-top:24px; }
.modal-footer button { flex:1; padding:12px 0; border:none; border-radius:12px; font-weight:600; cursor:pointer; background:var(--surface); color:var(--text); border:1px solid var(--border); }
.modal-footer button.primary { background:var(--primary); color:white; border-color:var(--primary); }
.option-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(100px,1fr)); gap:8px; margin:12px 0; }
.option-card { padding:10px 6px; border-radius:12px; border:1px solid var(--border); text-align:center; cursor:pointer; font-size:0.8rem; transition:all 0.15s; }
.option-card.active { border-color:var(--primary); background:rgba(59,130,246,0.1); }
.option-card:hover { border-color:var(--primary); }
.option-icon { font-size:1.2rem; display:block; margin-bottom:2px; }

.toast { position:fixed; bottom:100px; left:50%; transform:translateX(-50%); background:var(--surface); border:1px solid var(--border); border-radius:14px; padding:12px 24px; box-shadow:0 8px 30px rgba(0,0,0,0.15); font-size:0.9rem; font-weight:500; z-index:1300; opacity:0; transition:opacity 0.25s; pointer-events:none; max-width:90%; }
.toast.show { opacity:1; }

.help-modal-overlay {
    position: fixed; top:0; left:0; width:100%; height:100%;
    background: rgba(0,0,0,0.55); z-index: 1201; display: none;
    justify-content: center; align-items: center;
}
.help-modal-overlay.active { display: flex; }
.help-modal {
    background: var(--surface); border-radius:20px;
    width:680px; max-width:92vw; max-height:85vh; overflow-y:auto;
    box-shadow:0 20px 60px rgba(0,0,0,0.2);
    transform:scale(0.9); transition: transform 0.3s cubic-bezier(0.32,0.72,0,1);
    padding:0;
}
.help-modal-overlay.active .help-modal { transform: scale(1); }
.help-modal-header {
    display: flex; justify-content: space-between; align-items: center;
    padding:20px 24px 16px; border-bottom:1px solid var(--border);
    position:sticky; top:0; background: var(--surface);
    border-radius:20px 20px 0 0; z-index:2;
}
.help-modal-header h2 { font-size:1.3rem; color: var(--text); margin:0; display:flex; align-items:center; gap:8px; }
.help-modal-close {
    width:36px; height:36px; border-radius:50%; border:none;
    background: var(--bg); font-size:1.2rem; cursor:pointer;
    color: var(--text-secondary); display:flex; align-items:center;
    justify-content:center; transition:all 0.2s; flex-shrink:0;
}
.help-modal-close:hover { background: var(--border); color: var(--text); }
.help-modal-body { padding:20px 24px 24px; }
.help-section { margin-bottom:20px; }
.help-section:last-child { margin-bottom:0; }
.help-section h3 { font-size:1rem; color: var(--text); margin:0 0 8px; display:flex; align-items:center; gap:6px; }
.help-section p { font-size:0.9rem; color: var(--text-secondary); line-height:1.6; margin:0 0 6px; padding-left:24px; }
.help-tip { background:#fefce8; border-left:3px solid #facc15; padding:8px 14px; border-radius:0 8px 8px 0; font-size:0.85rem; color:#854d0e; margin:8px 0 0 24px; line-height:1.5; }
.help-shortcut { display:inline-block; background:#f1f5f9; padding:2px 8px; border-radius:4px; font-family:'Courier New',monospace; font-size:0.8rem; color:#475569; border:1px solid #e2e8f0; margin:0 2px; }
.help-divider { border:none; border-top:1px dashed var(--border); margin:16px 0; }
.help-warning { background:#fff7ed; border-left:3px solid #f97316; padding:10px 14px; border-radius:0 8px 8px 0; font-size:0.85rem; color:#9a3412; margin:10px 0 0 24px; line-height:1.5; }

@media (max-width:480px) {
    .nav-title-text { font-size:1.2rem; }
    .config-card { padding:16px; }
    .card-actions button { font-size:0.75rem; padding:8px 0; min-width:50px; }
}