/* ── Reset & Base ── */*, *::before, *::after {    margin: 0;    padding: 0;    box-sizing: border-box;}:root {    --bg: #1a1a2e;    --bg-card: rgba(255, 255, 255, 0.04);    --bg-card-hover: rgba(255, 255, 255, 0.07);    --bg-sidebar: rgba(255, 255, 255, 0.02);    --bg-input: rgba(255, 255, 255, 0.04);    --bg-input-focus: rgba(255, 255, 255, 0.06);    --bg-btn: rgba(255, 255, 255, 0.05);    --bg-btn-hover: rgba(255, 255, 255, 0.08);    --bg-hover: rgba(255, 255, 255, 0.04);    --bg-hover-subtle: rgba(255, 255, 255, 0.03);    --bg-tab-active: rgba(255, 255, 255, 0.08);    --bg-tab-bar: rgba(255, 255, 255, 0.03);    --bg-user: rgba(255, 255, 255, 0.03);    --border-checkbox: rgba(255, 255, 255, 0.2);    --border-dashed: rgba(255, 255, 255, 0.15);    --border: rgba(255, 255, 255, 0.06);    --border-hover: rgba(255, 255, 255, 0.12);    --text-primary: #e8e8ed;    --text-secondary: rgba(255, 255, 255, 0.5);    --text-tertiary: rgba(255, 255, 255, 0.3);    --accent: #7C5CFC;    --accent-hover: #8E74FC;    --accent-subtle: rgba(124, 92, 252, 0.12);    --accent-checkbox-bg: rgba(124, 92, 252, 0.08);    --green: #4ADE80;    --red: #F87171;    --orange: #FBBF24;    --tag-bg-due: rgba(251, 191, 36, 0.1);    --tag-bg-overdue: rgba(248, 113, 113, 0.1);    --tag-bg-default: rgba(255, 255, 255, 0.04);    --btn-danger-bg: rgba(248, 113, 113, 0.1);    --btn-danger-border: rgba(248, 113, 113, 0.2);    --btn-danger-hover: rgba(248, 113, 113, 0.18);    --scrollbar-thumb: rgba(255, 255, 255, 0.06);    --scrollbar-thumb-hover: rgba(255, 255, 255, 0.12);    --modal-overlay: rgba(0, 0, 0, 0.55);    --select-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='rgba(255,255,255,0.4)' d='M6 8L0 0h12z'/%3E%3C/svg%3E");    --sidebar-width: 220px;    --radius: 6px;    --radius-sm: 4px;    --card-pad: 16px;    --section-gap: 20px;}[data-theme="light"] {    --bg: #f5f5f7;    --bg-card: rgba(255, 255, 255, 0.8);    --bg-card-hover: rgba(255, 255, 255, 0.95);    --bg-sidebar: rgba(0, 0, 0, 0.02);    --bg-input: rgba(0, 0, 0, 0.03);    --bg-input-focus: rgba(0, 0, 0, 0.04);    --bg-btn: rgba(0, 0, 0, 0.04);    --bg-btn-hover: rgba(0, 0, 0, 0.07);    --bg-hover: rgba(0, 0, 0, 0.04);    --bg-hover-subtle: rgba(0, 0, 0, 0.02);    --bg-tab-active: rgba(0, 0, 0, 0.06);    --bg-tab-bar: rgba(0, 0, 0, 0.03);    --bg-user: rgba(0, 0, 0, 0.02);    --border-checkbox: rgba(0, 0, 0, 0.2);    --border-dashed: rgba(0, 0, 0, 0.15);    --border: rgba(0, 0, 0, 0.08);    --border-hover: rgba(0, 0, 0, 0.15);    --text-primary: #1d1d1f;    --text-secondary: rgba(0, 0, 0, 0.45);    --text-tertiary: rgba(0, 0, 0, 0.25);    --accent: #6B4FF5;    --accent-hover: #7C5CFC;    --accent-subtle: rgba(107, 79, 245, 0.1);    --accent-checkbox-bg: rgba(107, 79, 245, 0.08);    --green: #22C55E;    --red: #EF4444;    --orange: #F59E0B;    --tag-bg-due: rgba(245, 158, 11, 0.1);    --tag-bg-overdue: rgba(239, 68, 68, 0.1);    --tag-bg-default: rgba(0, 0, 0, 0.04);    --btn-danger-bg: rgba(239, 68, 68, 0.1);    --btn-danger-border: rgba(239, 68, 68, 0.2);    --btn-danger-hover: rgba(239, 68, 68, 0.18);    --scrollbar-thumb: rgba(0, 0, 0, 0.06);    --scrollbar-thumb-hover: rgba(0, 0, 0, 0.12);    --modal-overlay: rgba(0, 0, 0, 0.3);    --select-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='rgba(0,0,0,0.3)' d='M6 8L0 0h12z'/%3E%3C/svg%3E");}[data-theme="light"] #auth-page {    background:        radial-gradient(ellipse at 30% 20%, rgba(107, 79, 245, 0.05) 0%, transparent 50%),        radial-gradient(ellipse at 70% 80%, rgba(107, 79, 245, 0.03) 0%, transparent 50%),        var(--bg);}body {    font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'Inter', 'Segoe UI', sans-serif;    background: var(--bg);    color: var(--text-primary);    min-height: 100vh;    overflow-x: hidden;    -webkit-font-smoothing: antialiased;    line-height: 1.5;}/* ── Glass ── */.glass {    background: var(--bg-card);    border: 1px solid var(--border);    border-radius: var(--radius);    transition: background 0.15s, border-color 0.15s;}/* ── Page ── */.page {    display: none;    min-height: 100vh;}.page.active {    display: flex;}/* ── Auth Page ── */#auth-page {    align-items: center;    justify-content: center;    padding: 20px;    background:        radial-gradient(ellipse at 30% 20%, rgba(124, 92, 252, 0.08) 0%, transparent 60%),        radial-gradient(ellipse at 70% 80%, rgba(124, 92, 252, 0.04) 0%, transparent 50%),        var(--bg);}.auth-container {    width: 100%;    max-width: 380px;    padding: 40px 28px;    text-align: center;}.auth-header {    margin-bottom: 32px;}.app-icon {    width: 56px;    height: 56px;    background: var(--accent);    border-radius: 14px;    display: flex;    align-items: center;    justify-content: center;    font-size: 24px;    color: white;    margin: 0 auto 16px;}.app-icon.small {    width: 32px;    height: 32px;    font-size: 14px;    border-radius: 8px;    margin: 0;}.auth-header h1 {    font-size: 26px;    font-weight: 650;    letter-spacing: -0.3px;    margin-bottom: 4px;}.subtitle {    color: var(--text-secondary);    font-size: 14px;}.auth-form {    display: none;    text-align: left;}.auth-form.active {    display: block;}.auth-error {    color: var(--red);    font-size: 13px;    margin-top: 12px;    text-align: center;    min-height: 20px;}/* ── Inputs ── */.input-group {    margin-bottom: 14px;    position: relative;}.modal .input-group {    margin-bottom: 8px;}.modal .input-group select,.modal .input-group input,.modal .input-group textarea {    font-size: 11px;    padding: 5px 10px;    padding-left: 10px;    min-height: 0;}.modal .input-group select {    padding-right: 22px;}.modal .input-group textarea {    min-height: 40px;}.modal .input-group .input-icon {    display: none;}.input-group label {    display: block;    font-size: 10px;    color: var(--text-secondary);    margin-bottom: 4px;    font-weight: 500;    letter-spacing: 0.3px;    text-transform: uppercase;}.input-group input,.input-group select,.input-group textarea {    width: 100%;    padding: 6px 10px;    padding-left: 30px;    background: var(--bg-input);    border: 1px solid var(--border);    border-radius: 6px;    color: var(--text-primary);    font-size: 13px;    font-family: inherit;    transition: all 0.15s;    outline: none;}.input-group input:focus,.input-group select:focus,.input-group textarea:focus {    border-color: var(--accent);    box-shadow: 0 0 0 2px rgba(124, 92, 252, 0.15);    background: var(--bg-input-focus);}.input-group textarea {    padding-left: 10px;    resize: vertical;    min-height: 36px;}.input-group select {    padding-left: 14px;    cursor: pointer;    appearance: none;    -webkit-appearance: none;    background-image: var(--select-arrow);    background-repeat: no-repeat;    background-position: right 12px center;}.input-group select option {    background: var(--bg);    color: var(--text-primary);}.input-group .input-icon {    position: absolute;    left: 10px;    top: 50%;    transform: translateY(-50%);    font-size: 12px;    opacity: 0.4;    pointer-events: none;}.input-group.half {    flex: 1;    min-width: 0;}/* ── Buttons ── */.btn-primary {    width: 100%;    padding: 10px;    border: none;    border-radius: var(--radius-sm);    font-size: 14px;    font-weight: 600;    color: white;    cursor: pointer;    transition: all 0.15s;    font-family: inherit;}.glass-btn {    background: var(--bg-btn);    border: 1px solid var(--border);    color: var(--text-primary);}.glass-btn:hover {    background: var(--bg-btn-hover);    border-color: var(--border-hover);}.glass-btn.primary {    background: var(--accent);    border-color: var(--accent);    color: white;}.glass-btn.primary:hover {    background: var(--accent-hover);}.glass-btn.danger {    background: var(--btn-danger-bg);    border-color: var(--btn-danger-border);    color: var(--red);}.glass-btn.danger:hover {    background: var(--btn-danger-hover);}.btn-sm {    padding: 5px 12px;    border-radius: 6px;    font-size: 12px;    font-weight: 500;    cursor: pointer;    transition: all 0.15s;    font-family: inherit;}.btn-icon {    width: 26px;    height: 26px;    border: none;    background: transparent;    color: var(--text-secondary);    border-radius: 5px;    cursor: pointer;    font-size: 14px;    display: flex;    align-items: center;    justify-content: center;    transition: all 0.15s;}.btn-icon:hover {    background: var(--bg-hover);    color: var(--text-primary);}/* ── App Layout ── */#app {    flex-direction: column;}/* ── Sidebar ── */.sidebar {    position: fixed;    top: 0;    left: 0;    width: var(--sidebar-width);    height: 100vh;    display: flex;    flex-direction: column;    padding: 12px;    border-radius: 0;    border-right: 1px solid var(--border);    z-index: 100;    background: var(--bg-sidebar);}.sidebar-header {    display: flex;    align-items: center;    gap: 10px;    margin-bottom: 16px;    padding: 8px 4px 12px;    border-bottom: 1px solid var(--border);}.sidebar-title {    font-size: 16px;    font-weight: 600;    letter-spacing: -0.2px;}.sidebar-user {    display: flex;    align-items: center;    gap: 8px;    padding: 8px 10px;    margin-bottom: 12px;    background: var(--bg-user);    border-radius: var(--radius-sm);}.user-avatar {    width: 28px;    height: 28px;    border-radius: 6px;    background: var(--accent);    display: flex;    align-items: center;    justify-content: center;    font-size: 12px;    font-weight: 600;    color: white;}.user-name {    font-size: 13px;    font-weight: 500;}.sidebar-menu {    flex: 1;    display: flex;    flex-direction: column;    gap: 1px;}.menu-item {    display: flex;    align-items: center;    gap: 10px;    padding: 8px 10px;    border: none;    background: transparent;    color: var(--text-secondary);    font-size: 13px;    font-weight: 500;    border-radius: 6px;    cursor: pointer;    transition: all 0.12s;    font-family: inherit;    width: 100%;    text-align: left;}.menu-item:hover {    background: var(--bg-hover);    color: var(--text-primary);}.menu-item.active {    background: var(--accent-subtle);    color: var(--accent);}.menu-icon {    font-size: 14px;    width: 22px;    text-align: center;    opacity: 0.7;}.menu-item.active .menu-icon {    opacity: 1;}.badge {    margin-left: auto;    background: var(--accent);    color: white;    font-size: 10px;    font-weight: 600;    padding: 1px 7px;    border-radius: 8px;    min-width: 18px;    text-align: center;    line-height: 16px;}.sidebar-footer {    padding-top: 8px;    border-top: 1px solid var(--border);}/* ── Main Content ── */.main-content {    margin-left: var(--sidebar-width);    padding: 32px 40px;    min-height: 100vh;    max-width: 900px;}.view {    display: none;    animation: fadeIn 0.2s ease;}.view.active {    display: block;}@keyframes fadeSlideIn {    from { opacity: 0; transform: translateY(8px); }    to { opacity: 1; transform: translateY(0); }}@keyframes fadeIn {    from { opacity: 0; }    to { opacity: 1; }}/* ── View Header (all views) ── */.view-header {    display: flex;    align-items: center;    gap: 8px;    margin-bottom: var(--section-gap);    flex-wrap: wrap;}.view-header h2 {    flex-shrink: 0;}.view-header h2 {    font-size: 22px;    font-weight: 650;    letter-spacing: -0.3px;}.view-subtitle {    color: var(--text-secondary);    font-size: 13px;    width: 100%;    margin-top: -8px;}.date-display {    font-size: 13px;    color: var(--text-secondary);    margin-left: auto;}/* ── Quick Add ── */.inbox-quick-add {    padding: 12px var(--card-pad);    margin-bottom: var(--section-gap);    position: sticky;    top: var(--sticky-top, 0);    z-index: 15;    backdrop-filter: blur(20px);    -webkit-backdrop-filter: blur(20px);    transition: background 0.15s, border-color 0.15s, box-shadow 0.15s;}.inbox-quick-add input {    width: 100%;    padding: 9px 12px;    background: var(--bg-input);    border: 1px solid var(--border);    border-radius: var(--radius-sm);    color: var(--text-primary);    font-size: 14px;    font-family: inherit;    outline: none;    transition: all 0.15s;}.inbox-quick-add input:focus {    border-color: var(--accent);    box-shadow: 0 0 0 2px rgba(124, 92, 252, 0.12);}.quick-add-options {    display: none;    margin-top: 10px;    gap: 8px;    flex-wrap: wrap;}.quick-add-options.show {    display: flex;}.quick-add-options select {    padding: 6px 10px;    background: var(--bg-input);    border: 1px solid var(--border);    border-radius: 6px;    color: var(--text-secondary);    font-size: 12px;    font-family: inherit;    outline: none;    cursor: pointer;}/* ── Inbox List ── */#inbox-list > .task-item {    padding: 10px var(--card-pad);}#inbox-list > .task-item:last-child {    padding-bottom: var(--card-pad);}.weekly-focus-card .task-item:last-child {    padding-bottom: var(--card-pad);}/* ── Scene Filters ── */.scene-filters {    display: flex;    gap: 4px;    flex-wrap: wrap;    align-items: center;}.scene-btn {    display: inline-block;    padding: 2px 8px;    border-radius: 3px;    background-color: var(--tag-bg-default);    color: var(--text-secondary);    font-size: 12px;    font-weight: 500;    cursor: pointer;    user-select: none;    transition: background-color 0.12s;}.scene-btn:hover {    background-color: rgba(255,255,255,0.08);    color: var(--text-primary);}.scene-btn[data-scene="公司"] {    color: rgba(248, 113, 113, 0.55);}.scene-btn[data-scene="公司"].active {    background-color: var(--red);    color: #fff;}.scene-btn[data-scene="通勤"] {    color: rgba(94, 156, 234, 0.55);}.scene-btn[data-scene="通勤"].active {    background-color: #5E9CEA;    color: #fff;}.scene-btn[data-scene="午饭"] {    color: rgba(74, 222, 128, 0.55);}.scene-btn[data-scene="午饭"].active {    background-color: var(--green);    color: #fff;}.scene-btn[data-scene="回家"] {    color: rgba(251, 191, 36, 0.55);}.scene-btn[data-scene="回家"].active {    background-color: var(--orange);    color: #fff;}.scene-btn.active {    background-color: var(--accent-subtle);    color: var(--accent);}.scene-btn:hover {    color: var(--text-primary);    background: rgba(255,255,255,0.08);}.scene-btn.active {    background: var(--accent-subtle);    color: var(--accent);}/* ── Topic Groups (Today View Cards) ── */.topic-group {    margin-bottom: calc(var(--section-gap) / 2);    overflow: hidden;}.topic-group-header {    display: flex;    align-items: center;    flex-wrap: wrap;    gap: 4px 0;    padding: calc(var(--card-pad) + 12px) var(--card-pad) 4px;}.topic-group-title {    display: flex;    align-items: center;    gap: 8px;    font-size: 15px;    font-weight: 600;    color: var(--text-secondary);    letter-spacing: 0.3px;    text-transform: uppercase;    flex-shrink: 0;}.topic-color-dot {    width: 6px;    height: 6px;    border-radius: 50%;    opacity: 0.7;}/* ── Task Items ── */.task-item {    display: flex;    align-items: center;    gap: 10px;    padding: 8px var(--card-pad);    border-radius: 0;    transition: all 0.12s;    cursor: pointer;}.task-item:hover {    background: var(--bg-hover-subtle);}.task-item.completed .task-title {    text-decoration: line-through;    color: var(--text-tertiary);}.topic-group > .task-item:last-child {    padding-bottom: calc(var(--card-pad) + 12px);}.topic-group > .weekly-focus-card:last-child {    margin-bottom: 0;}.task-checkbox {    width: 18px;    height: 18px;    min-width: 18px;    border-radius: 4px;    border: 1.5px solid var(--border-checkbox);    display: flex;    align-items: center;    justify-content: center;    cursor: pointer;    transition: all 0.15s;    font-size: 9px;    color: transparent;}.task-checkbox:hover {    border-color: var(--accent);    background: var(--accent-checkbox-bg);}.task-checkbox.checked {    background: var(--green);    border-color: var(--green);    color: white;}.task-content {    flex: 1;    min-width: 0;    display: flex;    align-items: center;    gap: 8px;}.task-content .task-title {    flex: 1;    min-width: 0;}.task-title {    font-size: 13px;    line-height: 1.5;    word-break: break-word;}.task-tag {    font-size: 9px;    padding: 1px 6px;    border-radius: 3px;    white-space: nowrap;    flex-shrink: 0;}.task-tag.due-tag {    background: var(--tag-bg-due);    color: var(--orange);}.task-tag.overdue {    background: var(--tag-bg-overdue);    color: var(--red);}.task-tag.scene-tag[data-scene="公司"] {    background: rgba(248, 113, 113, 0.12);    color: var(--red);}.task-tag.scene-tag[data-scene="通勤"] {    background: rgba(94, 156, 234, 0.12);    color: #5E9CEA;}.task-tag.scene-tag[data-scene="午饭"] {    background: rgba(74, 222, 128, 0.12);    color: var(--green);}.task-tag.scene-tag[data-scene="回家"] {    background: rgba(251, 191, 36, 0.12);    color: var(--orange);}/* ── Empty State ── */.empty-state {    text-align: center;    padding: 60px 20px;    color: var(--text-secondary);}.empty-icon {    font-size: 40px;    margin-bottom: 12px;    opacity: 0.4;}.empty-state p {    font-size: 15px;    margin-bottom: 6px;}.empty-hint {    font-size: 13px;    color: var(--text-tertiary);}/* ── Topic Grid (Topics Management View) ── */.topics-grid {    display: grid;    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));    gap: var(--section-gap);}.topic-card {    padding: 0;    overflow: hidden;}.topic-card-header {    display: flex;    align-items: center;    justify-content: space-between;    padding: var(--card-pad) var(--card-pad) 8px;}.topic-card-name {    display: flex;    align-items: center;    gap: 8px;    font-size: 15px;    font-weight: 600;}.topic-card-count {    font-size: 12px;    color: var(--text-tertiary);}.topic-weekly-list {    padding: 6px var(--card-pad) var(--card-pad);    border-top: 1px solid var(--border);    margin: 0 var(--card-pad);    padding: 8px 0 var(--card-pad);}.topic-weekly-item {    display: flex;    align-items: center;    justify-content: space-between;    padding: 4px 0;    font-size: 12px;    color: var(--text-secondary);}.topic-weekly-item .btn-icon {    width: 22px;    height: 22px;    font-size: 10px;}/* ── Weekly Focus View ── */.week-selector {    display: flex;    align-items: center;    gap: 10px;}.week-selector span {    font-size: 14px;    font-weight: 500;    min-width: 50px;    text-align: center;}.weekly-topic-section {    margin-bottom: var(--section-gap);}.weekly-topic-section h3 {    font-size: 13px;    font-weight: 600;    color: var(--text-secondary);    text-transform: uppercase;    letter-spacing: 0.3px;    margin-bottom: 6px;    padding-left: 2px;    display: flex;    align-items: center;    gap: 8px;}.weekly-focus-card {    padding: 0;    overflow: hidden;    margin-bottom: 10px;}.weekly-focus-header {    display: flex;    align-items: center;    justify-content: space-between;    padding: 14px var(--card-pad) 4px;}.weekly-focus-header h4 {    font-size: 14px;    font-weight: 500;}.add-weekly-btn {    display: block;    width: 100%;    text-align: center;    padding: 10px 12px;    margin-bottom: var(--section-gap);    border: 1px dashed var(--border-dashed);    background: transparent;    color: var(--text-secondary);    border-radius: var(--radius-sm);    cursor: pointer;    font-size: 13px;    font-family: inherit;    transition: all 0.15s;}.add-weekly-btn:hover {    border-color: var(--accent);    color: var(--accent);}/* ── Statistics ── */.stats-grid {    display: grid;    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));    gap: var(--section-gap);}.stat-card {    padding: 24px;    text-align: center;}.stat-number {    font-size: 32px;    font-weight: 700;    margin-bottom: 2px;    color: var(--accent);}.stat-label {    font-size: 12px;    color: var(--text-secondary);    text-transform: uppercase;    letter-spacing: 0.5px;}.stat-chart-section {    grid-column: 1 / -1;}.stat-chart-section h3 {    font-size: 15px;    font-weight: 600;    margin-bottom: 12px;}.bar-chart {    display: flex;    align-items: flex-end;    gap: 8px;    padding: 12px 0;    min-height: 110px;}.bar-item {    flex: 1;    display: flex;    flex-direction: column;    align-items: center;    gap: 4px;}.bar {    width: 100%;    max-width: 32px;    border-radius: 3px 3px 0 0;    background: var(--accent);    opacity: 0.6;    min-height: 3px;    transition: height 0.4s ease;}.bar-label {    font-size: 10px;    color: var(--text-tertiary);}/* ── Modals ── */.modal-overlay {    display: none;    position: fixed;    top: 0;    left: 0;    right: 0;    bottom: 0;    background: var(--modal-overlay);    backdrop-filter: blur(6px);    -webkit-backdrop-filter: blur(6px);    z-index: 1000;    align-items: center;    justify-content: center;    padding: 20px;}.modal-overlay.show {    display: flex;}.modal {    width: 100%;    max-width: 400px;    padding: 20px;    background: var(--bg);    border: 1px solid var(--border);    border-radius: var(--radius);    animation: fadeIn 0.15s ease;}.modal-header {    display: flex;    align-items: center;    justify-content: space-between;    margin-bottom: 12px;}.modal-header h3 {    font-size: 14px;    font-weight: 600;}.form-row {    display: flex;    gap: 8px;}.modal .form-row {    gap: 8px;}.modal-actions {    display: flex;    justify-content: flex-end;    gap: 8px;    margin-top: 12px;    padding-top: 10px;    border-top: 1px solid var(--border);}.color-picker input[type="color"] {    width: 32px;    height: 32px;    padding: 0;    border: 1.5px solid var(--border);    border-radius: 6px;    cursor: pointer;    background: transparent;}/* ── Scrollbar ── */::-webkit-scrollbar {    width: 4px;}::-webkit-scrollbar-track {    background: transparent;}::-webkit-scrollbar-thumb {    background: var(--scrollbar-thumb);    border-radius: 2px;}::-webkit-scrollbar-thumb:hover {    background: var(--scrollbar-thumb-hover);}/* ── Responsive ── */@media (max-width: 768px) {    .sidebar {        width: 100%;        height: auto;        position: fixed;        bottom: 0;        top: auto;        flex-direction: row;        padding: 6px 8px;        border-right: none;        border-top: 1px solid var(--border);        border-radius: 0;        background: var(--bg);    }    .sidebar-header,    .sidebar-user,    .sidebar-footer {        display: none;    }    .sidebar-menu {        flex-direction: row;        justify-content: space-around;        gap: 0;    }    .menu-item {        flex-direction: column;        padding: 4px 6px;        font-size: 10px;        gap: 1px;        position: relative;    }    .menu-icon {        font-size: 16px;    }    .badge {        position: absolute;        top: 1px;        right: 1px;        font-size: 8px;        padding: 0 5px;        min-width: 14px;        line-height: 14px;    }    .main-content {        margin-left: 0;        padding: 16px;        padding-bottom: 70px;    }    .view-header h2 {        font-size: 20px;    }    .form-row {        flex-direction: column;    }    .topics-grid {        grid-template-columns: 1fr;    }    .stats-grid {        grid-template-columns: repeat(2, 1fr);    }    :root {        --section-gap: 16px;        --card-pad: 14px;    }}/* ── Shopping List Special Style ── */.topic-shopping-list {    border-color: rgba(180, 210, 180, 0.25) !important;}.topic-shopping-list .topic-group-header {    opacity: 0.65;}.topic-shopping-list .topic-group-header::before {    content: "\F0FA";    font-size: 12px;    margin-right: 6px;    color: rgba(140, 180, 140, 0.5);    display: inline-flex;    align-items: center;}.shopping-list-header {    position: relative;}.shopping-list-header .topic-group-title {    color: rgba(140, 180, 140, 0.8);}.topic-order-btn:hover {    color: var(--accent) !important;    background: rgba(124,92,252,0.1) !important;}.topic-order-btn {    background: transparent !important;    border: none;    cursor: pointer;    transition: all 0.15s;}/* ── Pinned Topic Styles ── */.topic-pinned {    position: relative;    border-width: 1.5px;}.topic-pinned[data-pin-style="0"] {    background: rgba(180, 210, 180, 0.08);    border-color: rgba(180, 210, 180, 0.25) !important;}.topic-pinned[data-pin-style="1"] .topic-group-header {    border-left: 3px solid rgba(140, 180, 140, 0.7);    padding-left: calc(var(--card-pad, 14px) - 3px);    background: rgba(180, 210, 180, 0.05);}.topic-pinned[data-pin-style="2"] {    background: rgba(140, 180, 140, 0.12);}.topic-pinned[data-pin-style="2"] .topic-group-title {    color: var(--text-primary);}.pin-style-dots {    z-index: 5;}.pin-style-dots span:hover {    background: rgba(140,180,140,0.25) !important;}
.task-link {    color: var(--accent);    text-decoration: underline;    text-underline-offset: 2px;    transition: color 0.15s;}.task-link:hover {    color: var(--accent-hover);}
/* ── Widget Settings ── */
.widget-info-box {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 16px;
    max-width: 560px;
    margin-bottom: 14px;
}
.widget-info-icon {
    flex-shrink: 0;
    font-size: 18px;
}
.widget-info-text {
    color: var(--text-secondary);
    font-size: 14px;
    line-height: 1.6;
}
.widget-card,
.widget-steps {
    max-width: 560px;
    padding: 20px;
    margin-bottom: 14px;
}
.widget-field-row {
    display: flex;
    align-items: center;
    gap: 8px;
}
.widget-field-row input {
    padding: 8px 12px;
    font-size: 13px;
    cursor: pointer;
}
.widget-field-row .copy-btn {
    flex-shrink: 0;
    min-width: 64px;
}
.widget-actions {
    display: flex;
    justify-content: flex-end;
    margin-top: 10px;
}
.widget-steps-title {
    margin-bottom: 8px;
    color: var(--text-secondary);
    font-size: 13px;
    font-weight: 600;
}
.widget-steps-list {
    padding-left: 20px;
    color: var(--text-tertiary);
    font-size: 12px;
    line-height: 1.8;
}

/* ── Budget Strip ── */
.budget-strip {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 16px;
    margin-bottom: var(--section-gap);
    flex-wrap: wrap;
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
}
.budget-title {
    font-size: 13px;
    font-weight: 600;
    color: var(--accent);
    white-space: nowrap;
    letter-spacing: 0.3px;
    flex-shrink: 0;
}
.budget-items {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    flex: 1;
}
.budget-note {
    width: 100%;
    color: var(--text-tertiary);
    font-size: 11px;
    line-height: 1.3;
    text-align: right;
    border-top: 1px solid var(--border);
    padding-top: 4px;
    margin-top: 4px;
}
.budget-item {
    display: flex;
    align-items: center;
    gap: 4px;
    white-space: nowrap;
}
.budget-label {
    font-size: 11px;
    color: var(--text-secondary);
    font-weight: 500;
}
.budget-value {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-primary);
    min-width: 40px;
    text-align: right;
}
.editable-budget {
    cursor: pointer;
    border-bottom: 1px dashed var(--border);
    padding: 0 2px;
    transition: border-color 0.15s;
}
.editable-budget:hover {
    border-color: var(--accent);
}
.budget-edit-input {
    width: 80px !important;
    padding: 2px 6px !important;
    font-size: 13px !important;
}

/* ── Today Expenses ── */
.today-expenses {
    margin-top: var(--section-gap);
}
.today-expenses-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 10px;
}
.today-expenses-header h3 {
    font-size: 16px;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 6px;
}
.today-expenses-header h3 svg {
    opacity: 0.6;
}
.expense-total {
    font-size: 13px;
    font-weight: 600;
    color: var(--accent);
}
.expense-list {
    margin-bottom: 8px;
}
.expense-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    border-radius: var(--radius);
    transition: background 0.12s;
}
.expense-item:hover {
    background: var(--bg-hover);
}
.expense-item-name {
    flex: 1;
    font-size: 13px;
    font-weight: 500;
    min-width: 0;
}
.expense-item-cat {
    font-size: 11px;
    color: var(--text-secondary);
    background: var(--bg-hover);
    padding: 1px 8px;
    border-radius: 3px;
    white-space: nowrap;
}
.expense-item-amt {
    font-size: 13px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    min-width: 60px;
    text-align: right;
    color: var(--text-primary);
}
.expense-item-actions {
    display: flex;
    gap: 2px;
    opacity: 0;
    transition: opacity 0.12s;
}
.expense-item:hover .expense-item-actions {
    opacity: 1;
}
.expense-item-actions .btn-icon {
    width: 24px;
    height: 24px;
}
.expense-empty {
    text-align: center;
    padding: 16px;
    color: var(--text-tertiary);
    font-size: 13px;
}
.expense-form {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 12px;
    flex-wrap: wrap;
}
.expense-input-item {
    flex: 2;
    min-width: 100px;
    padding: 7px 10px;
    background: var(--bg-input);
    border: 1px solid var(--border);
    border-radius: 6px;
    color: var(--text-primary);
    font-size: 13px;
    font-family: inherit;
    outline: none;
    transition: all 0.15s;
}
.expense-input-item:focus {
    border-color: var(--accent);
    box-shadow: 0 0 0 2px rgba(124, 92, 252, 0.12);
}
.expense-input-cat {
    flex: 1;
    min-width: 70px;
    padding: 7px 10px;
    background: var(--bg-input);
    border: 1px solid var(--border);
    border-radius: 6px;
    color: var(--text-primary);
    font-size: 12px;
    font-family: inherit;
    outline: none;
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    background-image: var(--select-arrow);
    background-repeat: no-repeat;
    background-position: right 8px center;
}
.expense-input-cat:focus {
    border-color: var(--accent);
}
.expense-input-amt {
    flex: 0 0 80px;
    padding: 7px 10px;
    background: var(--bg-input);
    border: 1px solid var(--border);
    border-radius: 6px;
    color: var(--text-primary);
    font-size: 13px;
    font-family: inherit;
    outline: none;
    text-align: right;
    transition: all 0.15s;
}
.expense-input-amt:focus {
    border-color: var(--accent);
    box-shadow: 0 0 0 2px rgba(124, 92, 252, 0.12);
}
.expense-form-actions {
    display: flex;
    gap: 6px;
    flex-shrink: 0;
}

/* ── Budget/Expense Mobile ── */
@media (max-width: 768px) {
    .budget-strip {
        padding: 8px 12px;
        gap: 4px;
        position: sticky;
        top: 0;
        z-index: 30;
        margin-bottom: 10px;
    }
    .budget-title {
        font-size: 10px;
        width: auto;
        flex-shrink: 0;
        margin-right: auto;
    }
    .budget-items {
        gap: 4px;
        width: 100%;
        order: 2;
    }
    .budget-label {
        font-size: 9px;
    }
    .budget-value {
        font-size: 11px;
        min-width: 24px;
    }
    .budget-note {
        font-size: 9px;
        margin-top: 2px;
        padding-top: 2px;
    }
    .expense-form {
        padding: 10px;
        flex-direction: column;
        gap: 6px;
    }
    .expense-input-item {
        flex: none;
        width: 100%;
    }
    .expense-input-cat {
        flex: none;
        width: 100%;
    }
    .expense-input-amt {
        flex: none;
        width: 100%;
    }
    .expense-form-actions {
        width: 100%;
        justify-content: flex-end;
    }
    .expense-item-actions {
        opacity: 1;
    }
    .expense-item-amt {
        min-width: 50px;
    }
}

/* ── ICP Footer ── */
.icp-link {
    margin-top: 12px;
    text-align: center;
    font-size: 11px;
    line-height: 1.5;
}
.icp-link a {
    color: var(--text-tertiary);
    text-decoration: none;
    transition: color 0.15s;
}
.icp-link a:hover {
    color: var(--text-secondary);
}
.main-icp-link {
    display: none;
}
@media (max-width: 768px) {
    .main-icp-link {
        display: block;
        margin: 20px 0 4px;
    }
}