/* PolaRis Main Style Sheet */
:root {
    --rui-purple: #9d8df1;
    --rui-purple-accent: #6a5acd;
    --header-height: 60px;
    /* High contrast accent purple */
    --rui-pink: #f37cb9;
    --rui-blue: #7cb9f3;
    --rui-gold: #f3d07c;
    --ink: #1a1f36;
    --ink-sub: #4f566b;
    --muted: #6f7a89;
    --border: 1px solid rgba(0, 0, 0, 0.08);
    --shadow-soft: 0 4px 12px rgba(0, 0, 0, 0.05);

    /* Sidebar & Layout */
    --sidebar-w: 260px;
    --sidebar-bg: #f8f9fc;
    --active-blue: #e8f0fe;

    /* Colors & UI */
    --card-bg: rgba(255, 255, 255, 0.85);
    --shadow: 0 8px 32px rgba(0, 0, 0, 0.08);
    --line: rgba(0, 0, 0, 0.06);
    --bg: #ffffff;
    --bg-gradient: #ffffff;
    --bg-mesh: #ffffff;

    /* Glassmorphism Variables (Premium) - Refined for White BG */
    --glass-bg: rgba(255, 255, 255, 1);
    --glass-border: 1px solid rgba(0, 0, 0, 0.05);
    --glass-blur: none;
    --glass-shadow: -8px -8px 20px rgba(255, 255, 255, 1), 8px 8px 20px rgba(0, 0, 0, 0.06);
    --glass-edge: none;

    /* Neumorphism Variables - Optimized for Pure White (#ffffff) */
    --neu-upper: -8px -8px 20px rgba(255, 255, 255, 1);
    --neu-lower: 8px 8px 20px rgba(0, 0, 0, 0.08);
    /* 影を少し強めて白背景で際立たせる */
    --neu-inner-upper: inset -4px -4px 10px rgba(255, 255, 255, 1);
    --neu-inner-upper: inset -4px -4px 10px rgba(255, 255, 255, 1);
    --neu-inner-lower: inset 4px 4px 10px rgba(0, 0, 0, 0.06);
    --panel-bg: #ffffff;
}

/* Dark Mode Overrides (Black Mode) */
body.dark-theme {
    --bg: #000000;
    --bg-gradient: #0a0a0a;
    --bg-mesh: #000000;
    --sidebar-bg: #111111;
    --card-bg: rgba(20, 20, 20, 0.85);
    --ink: #ffffff;
    --ink-sub: #b0b0b0;
    --muted: #888888;
    --line: rgba(255, 255, 255, 0.1);
    --border: 1px solid rgba(255, 255, 255, 0.1);
    --active-blue: rgba(157, 141, 241, 0.15);

    /* Glassmorphism for Dark */
    --glass-bg: rgba(20, 20, 20, 0.8);
    --glass-border: 1px solid rgba(255, 255, 255, 0.1);
    --glass-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);

    /* Neumorphism for Dark - Uses glows and deep shadows */
    --neu-upper: -4px -4px 15px rgba(255, 255, 255, 0.02);
    --neu-lower: 8px 8px 25px rgba(0, 0, 0, 0.5);
    --neu-inner-upper: inset -2px -2px 8px rgba(255, 255, 255, 0.02);
    --neu-inner-lower: inset 4px 4px 12px rgba(0, 0, 0, 0.6);
    --panel-bg: #111111;
}

body.dark-theme .panel {
    background: var(--panel-bg) !important;
    box-shadow: var(--neu-upper), var(--neu-lower) !important;
}

body.dark-theme .neu-input {
    background: #111111 !important;
    box-shadow: var(--neu-inner-upper), var(--neu-inner-lower) !important;
    color: var(--ink) !important;
}

body.dark-theme .neu-btn {
    background: #111111 !important;
    box-shadow: var(--neu-upper), var(--neu-lower) !important;
    color: var(--ink) !important;
}

body.dark-theme .neu-btn:active {
    box-shadow: var(--neu-inner-upper), var(--neu-inner-lower) !important;
}

/* ===== COMPREHENSIVE DARK MODE OVERRIDES ===== */
/* Catches ALL remaining hardcoded white backgrounds */

/* Body & Main Content */
body.dark-theme {
    background: #000000 !important;
    color: var(--ink) !important;
}

body.dark-theme #main-content,
body.dark-theme #app-container {
    background: #000000 !important;
}

/* All panels, modals, cards, and containers */
body.dark-theme .panel,
body.dark-theme .glass-panel,
body.dark-theme .modal-content,
body.dark-theme .modal-box,
body.dark-theme .wx-chip,
body.dark-theme .stat,
body.dark-theme .item-card,
body.dark-theme .goal-card,
body.dark-theme .action-item,
body.dark-theme .date-pill,
body.dark-theme .cal-day,
body.dark-theme .health-graph-container,
body.dark-theme .weather-card,
body.dark-theme .calendar-panel,
body.dark-theme #calendar-section-v2 {
    background: #111111 !important;
    color: var(--ink) !important;
    border-color: rgba(255, 255, 255, 0.08) !important;
}

/* Today's calendar cell - subtle purple hint */
body.dark-theme .cal-day.today {
    background: rgba(157, 141, 241, 0.12) !important;
}

/* Sidebar */
body.dark-theme #sidebar {
    background: #0a0a0a !important;
    border-right-color: rgba(255, 255, 255, 0.06) !important;
}

/* Nav items */
body.dark-theme .nav-item {
    color: var(--ink) !important;
}

body.dark-theme .nav-item:hover,
body.dark-theme .nav-item.active {
    background: rgba(157, 141, 241, 0.12) !important;
}

/* All input elements */
body.dark-theme input,
body.dark-theme textarea,
body.dark-theme select,
body.dark-theme .neu-input {
    background: #1a1a1a !important;
    color: #ffffff !important;
    border-color: rgba(255, 255, 255, 0.1) !important;
}

body.dark-theme input::placeholder,
body.dark-theme textarea::placeholder {
    color: #666666 !important;
}

body.dark-theme input:focus,
body.dark-theme textarea:focus {
    background: #1a1a1a !important;
    border-color: var(--rui-purple) !important;
}

/* Icon buttons (mood selectors etc.) */
body.dark-theme .icon-btn {
    background: #1a1a1a !important;
    border-color: rgba(255, 255, 255, 0.1) !important;
}

/* Tabs and tab-like elements */
body.dark-theme .tab,
body.dark-theme .tab-btn,
body.dark-theme .tab-item {
    background: #111111 !important;
    color: var(--ink-sub) !important;
}

body.dark-theme .tab.active,
body.dark-theme .tab-btn.active,
body.dark-theme .tab-item.active {
    background: var(--rui-purple) !important;
    color: #ffffff !important;
}

/* Modals (inline style overrides) */
body.dark-theme [style*="background:#ffffff"],
body.dark-theme [style*="background: #ffffff"],
body.dark-theme [style*="background:#fff"],
body.dark-theme [style*="background: #fff"] {
    background: #111111 !important;
    color: #ffffff !important;
    border-color: rgba(255, 255, 255, 0.1) !important;
}

/* Overlay backgrounds for modals */
body.dark-theme .overlay,
body.dark-theme [id$="-overlay"] {
    background: rgba(0, 0, 0, 0.8) !important;
}

/* All labels, headings, text */
body.dark-theme h1,
body.dark-theme h2,
body.dark-theme h3,
body.dark-theme h4,
body.dark-theme h5,
body.dark-theme label,
body.dark-theme span,
body.dark-theme p,
body.dark-theme div {
    color: inherit;
}

/* Muted text */
body.dark-theme .muted {
    color: #888888 !important;
}

/* Cover button overrides */
body.dark-theme .btn-change-cover,
body.dark-theme .btn-reposition {
    background: rgba(30, 30, 30, 0.8) !important;
    color: #ffffff !important;
}

/* Period / Health section specific */
body.dark-theme .cycle-phase-card,
body.dark-theme .health-log-item,
body.dark-theme .period-history-item {
    background: #111111 !important;
    color: var(--ink) !important;
}

/* Shooting star game */
body.dark-theme .gem-collection-panel,
body.dark-theme .constellation-panel {
    background: #111111 !important;
}

/* Scrollbar for dark mode */
body.dark-theme ::-webkit-scrollbar-track {
    background: #0a0a0a !important;
}

body.dark-theme ::-webkit-scrollbar-thumb {
    background: #333333 !important;
}

/* Symptom & subject tags */
body.dark-theme .s-tag {
    background: #1a1a1a !important;
    color: #cccccc !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
}

body.dark-theme .s-tag.active {
    background: rgba(157, 141, 241, 0.2) !important;
    color: var(--rui-purple) !important;
    border-color: var(--rui-purple) !important;
}

body.dark-theme .subject-chip {
    background: #1a1a1a !important;
    color: #cccccc !important;
    border-color: rgba(255, 255, 255, 0.08) !important;
}

body.dark-theme .subject-chip.active {
    background: rgba(157, 141, 241, 0.2) !important;
    color: var(--rui-purple) !important;
}

/* Sidebar search & new chat button */
body.dark-theme .sidebar-search {
    background: #1a1a1a !important;
    border-color: rgba(255, 255, 255, 0.06) !important;
    box-shadow: none !important;
}

body.dark-theme .sidebar-search input {
    color: #ffffff !important;
}

body.dark-theme .new-chat-btn-modern {
    background: #1a1a1a !important;
    border-color: rgba(255, 255, 255, 0.06) !important;
    color: var(--rui-purple) !important;
}

/* Weather chip text readability */
body.dark-theme .chip-k {
    color: #999999 !important;
}

body.dark-theme .chip-v {
    color: #ffffff !important;
}

/* Icon selector label */
body.dark-theme .icon-selector-label {
    color: var(--ink) !important;
}

/* Weather mini-panels (inline background: white) */
body.dark-theme .panel-mini {
    background: #1a1a1a !important;
    border-color: rgba(255, 255, 255, 0.08) !important;
}

/* Catch-all for ANY inline style using background: white */
body.dark-theme [style*="background: white"],
body.dark-theme [style*="background:white"] {
    background: #1a1a1a !important;
}

/* ===== MODAL DARK OVERRIDES ===== */

/* Modal overlay backgrounds (inline rgba(255,255,255,0.7)) */
body.dark-theme #event-modal,
body.dark-theme #dream-add-modal,
body.dark-theme #subject-modal,
body.dark-theme #memory-add-modal {
    background: rgba(0, 0, 0, 0.75) !important;
}

/* Modal inner boxes */
body.dark-theme #modal-main-box,
body.dark-theme #memory-add-modal>.panel {
    background: #111111 !important;
    border-color: rgba(255, 255, 255, 0.08) !important;
}

/* Event modal inputs overrides (they have inline !important) */
body.dark-theme #event-modal input,
body.dark-theme #event-modal select,
body.dark-theme #event-modal textarea {
    background: #1a1a1a !important;
    color: #ffffff !important;
    box-shadow: inset 2px 2px 6px rgba(0, 0, 0, 0.4), inset -2px -2px 6px rgba(255, 255, 255, 0.02) !important;
}

/* Dream modal panel (has inline background:#ffffff !important) */
body.dark-theme #dream-add-modal>.panel {
    background: #111111 !important;
    border-color: rgba(255, 255, 255, 0.08) !important;
}

/* Subject modal panel */
body.dark-theme #subject-modal>.panel {
    background: #111111 !important;
    border-color: rgba(255, 255, 255, 0.08) !important;
}

/* Weekly report modal content */
body.dark-theme .modal-content {
    background: #111111 !important;
    color: var(--ink) !important;
}

/* Cancel & tiny buttons */
body.dark-theme .cancel-btn {
    background: #1a1a1a !important;
    color: var(--ink-sub) !important;
    border-color: rgba(255, 255, 255, 0.08) !important;
}

body.dark-theme .tiny-btn {
    background: #1a1a1a !important;
    color: var(--ink-sub) !important;
    border-color: rgba(255, 255, 255, 0.08) !important;
}

/* Tab Toggle in dark mode */
body.dark-theme .tab-toggle-container {
    background: #111111 !important;
}

body.dark-theme .tab-toggle-item {
    background: transparent !important;
    color: var(--ink-sub) !important;
}

body.dark-theme .tab-toggle-item.active {
    background: var(--rui-purple) !important;
    color: #ffffff !important;
}

/* Form labels in modals */
body.dark-theme .form-group label {
    color: var(--ink-sub) !important;
}

/* Checkbox group label text */
body.dark-theme .checkbox-group label {
    color: var(--ink) !important;
}

/* Mobile header bar */
body.dark-theme #mobile-header {
    background: rgba(0, 0, 0, 0.85) !important;
    border-bottom-color: rgba(255, 255, 255, 0.06) !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3) !important;
}

body.dark-theme .hamburger-btn {
    color: var(--ink) !important;
}

body.dark-theme .header-action-btn {
    color: var(--ink) !important;
}

/* Side cards (calendar events & to-do) */
body.dark-theme .side-card {
    background: #111111 !important;
    border-color: rgba(255, 255, 255, 0.06) !important;
}

body.dark-theme .side-card h3 {
    color: #ffffff !important;
}

/* Health Trends period toggle (週/月/年) */
body.dark-theme .trend-period-btn {
    color: #999999 !important;
    background: transparent !important;
}

body.dark-theme .trend-period-btn.active {
    color: #ffffff !important;
    background: var(--rui-purple) !important;
}

/* Diary section divider (Recent Memories) */
body.dark-theme .section-divider span {
    background: #000000 !important;
    color: #888888 !important;
}

/* Gift selection panel */
body.dark-theme #gift-selection-overlay {
    background: rgba(0, 0, 0, 0.75) !important;
}

body.dark-theme .gift-menu-panel {
    background: #111111 !important;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5) !important;
}

body.dark-theme .gift-menu-panel h3 {
    color: #ffffff !important;
}

body.dark-theme .gift-item span {
    color: #cccccc !important;
}

body.dark-theme .gift-item:hover {
    background: rgba(157, 141, 241, 0.15) !important;
}

/* Diary entry cards */
body.dark-theme .diary-item-card {
    background: #111111 !important;
    border: 1px solid rgba(255, 255, 255, 0.06) !important;
}

body.dark-theme .diary-item-date {
    color: #aaaaaa !important;
}

body.dark-theme .diary-item-text {
    color: #e0e0e0 !important;
}

body.dark-theme .diary-item-footer .neu-btn,
body.dark-theme .diary-item-footer .tiny-btn {
    background: #1a1a1a !important;
    color: #cccccc !important;
    border-color: rgba(255, 255, 255, 0.08) !important;
}

/* Login screen */
body.dark-theme #login-overlay {
    background: linear-gradient(135deg, #0a0a0a 0%, #1a1018 100%) !important;
}

body.dark-theme #login-overlay::before {
    background: radial-gradient(circle, rgba(157, 124, 243, 0.15) 0%, transparent 60%) !important;
}

body.dark-theme .login-card {
    background: rgba(20, 20, 20, 0.8) !important;
    border-color: rgba(255, 255, 255, 0.08) !important;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.4) !important;
}

body.dark-theme .logo-subtitle {
    color: #999999 !important;
}

body.dark-theme .login-description p {
    color: #aaaaaa !important;
}

body.dark-theme .login-google-btn {
    background: #1a1a1a !important;
    border-color: rgba(255, 255, 255, 0.1) !important;
    color: #e0e0e0 !important;
}

body.dark-theme .login-google-btn:hover {
    background: #222222 !important;
    border-color: rgba(157, 141, 241, 0.3) !important;
}

body.dark-theme .login-footer {
    color: #666666 !important;
}

/* ===== END COMPREHENSIVE DARK MODE ===== */

.crystal-emoji {
    display: inline-block;
    line-height: 1.25;
    /* Slightly increased to prevent clipping */
    vertical-align: middle;
    padding: 0.05em 0.1em;
    /* Added vertical padding for safety */
    font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif;
    /* Gradient effect for crystal-emoji */
    background: linear-gradient(135deg, var(--rui-purple), var(--rui-blue));
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    filter: drop-shadow(0 2px 4px rgba(157, 141, 241, 0.2));
}

/* 﨟樊､・2. HEALTH騾包ｽｻ鬮ｱ・｢邵ｺ・ｮ郢昜ｻ｣繝ｭ郢晢ｽｫ繝ｻ閧ｲ蜊€邵ｺ繝ｻ・ｮ・ｱ繝ｻ蟲ｨ繝ｻ髫穂ｹ昶螺騾ｶ・ｮ */
.panel {
    background: #ffffff !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    border-radius: 24px !important;
    padding: 24px !important;
    margin-bottom: 24px !important;
    border: none !important;
    box-shadow: var(--neu-upper), var(--neu-lower) !important;
    /* 浮き出し効果 */
}

.glass-panel {
    background: var(--glass-bg) !important;
    backdrop-filter: var(--glass-blur) !important;
    -webkit-backdrop-filter: var(--glass-blur) !important;
    border: var(--glass-border) !important;
    box-shadow: var(--glass-shadow), var(--glass-edge) !important;
    border-radius: 28px !important;
    overflow: hidden;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1) !important;
    display: flex;
    flex-direction: column;
    position: relative;
}

.glass-panel::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 30%;
    background: linear-gradient(to bottom, rgba(255, 255, 255, 0.1) 0%, transparent 100%);
    pointer-events: none;
    z-index: 1;
}

/* Neu-Glass Interactive Button */
.neu-btn {
    background: rgba(255, 255, 255, 0.1) !important;
    backdrop-filter: blur(12px) saturate(160%);
    -webkit-backdrop-filter: blur(12px) saturate(160%);
    border: 1px solid rgba(255, 255, 255, 0.45) !important;
    border-radius: 12px !important;
    box-shadow: var(--neu-upper), var(--neu-lower) !important;
    transition: all 0.3s cubic-bezier(0.23, 1, 0.32, 1) !important;
    cursor: pointer;
    color: var(--rui-purple) !important;
    padding: 10px 18px !important;
    font-weight: 700 !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    text-shadow: 0 1px 1px rgba(255, 255, 255, 0.5);
}

.neu-btn:hover {
    transform: translateY(-2px) scale(1.02);
    box-shadow: -8px -8px 25px rgba(255, 255, 255, 0.7), 8px 8px 25px rgba(0, 0, 0, 0.08) !important;
    background: rgba(255, 255, 255, 0.25) !important;
    border-color: rgba(255, 255, 255, 0.8) !important;
}

.neu-btn:active {
    transform: translateY(1px) scale(0.98);
    box-shadow: var(--neu-inner-upper), var(--neu-inner-lower) !important;
    background: rgba(255, 255, 255, 0.05) !important;
    border-color: rgba(255, 255, 255, 0.2) !important;
}

/* Floating App Dock & Menu */
.app-dock {
    position: fixed;
    bottom: 25px;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(255, 255, 255, 0.4);
    backdrop-filter: blur(25px) saturate(180%);
    -webkit-backdrop-filter: blur(25px) saturate(180%);
    border: 1px solid rgba(255, 255, 255, 0.6);
    border-radius: 40px;
    padding: 10px 15px;
    display: flex;
    gap: 10px;
    box-shadow: 0 15px 45px rgba(0, 0, 0, 0.1),
        inset 0 1px 2px rgba(255, 255, 255, 0.5);
    z-index: 2000;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

body.dock-hidden .app-dock {
    transform: translate(-50%, 150%);
    opacity: 0;
    pointer-events: none;
}


.dock-item {
    background: none;
    border: none;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    color: #666;
    cursor: pointer;
    transition: all 0.3s ease;
    padding: 8px 8px;
    border-radius: 20px;
    min-width: 48px;
    text-decoration: none;
}

.dock-item .material-icons-round {
    font-size: 24px;
    transition: inherit;
}

.dock-item .dock-label {
    font-size: 0.6rem;
    font-weight: 800;
    opacity: 0.8;
    white-space: nowrap;
}

.dock-item:hover {
    color: var(--rui-purple);
    transform: translateY(-5px);
}

.dock-item.active {
    color: var(--rui-purple);
    background: rgba(157, 141, 241, 0.1);
}

.dock-item.active .material-icons-round {
    transform: scale(1.1);
}

/* App Menu Overlay */
.app-menu-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(35px) saturate(200%);
    -webkit-backdrop-filter: blur(35px) saturate(200%);
    z-index: 3000;
    display: none;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.app-menu-overlay.active {
    display: flex;
    opacity: 1;
}

.app-menu-content {
    width: 90%;
    max-width: 400px;
    padding: 30px;
    text-align: center;
    position: relative;
    animation: menuZoom 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

@keyframes menuZoom {
    from {
        transform: scale(0.85);
        opacity: 0;
    }

    to {
        transform: scale(1);
        opacity: 1;
    }
}

.app-menu-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

.menu-app-item {
    background: rgba(255, 255, 255, 0.3);
    border: 1px solid rgba(255, 255, 255, 0.5);
    border-radius: 24px;
    padding: 15px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.menu-app-item:hover {
    background: white;
    transform: scale(1.05);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.05);
}

.menu-icon {
    font-size: 2rem;
    color: var(--rui-purple, #9d7cf3);
}

.menu-icon .material-icons-round {
    font-size: 2.2rem;
}


.menu-label {
    font-size: 0.7rem;
    font-weight: 800;
    color: #444;
}

.menu-close-btn {
    position: absolute;
    top: 15px;
    right: 15px;
    background: none;
    border: none;
    cursor: pointer;
    color: #999;
}

/* Dark Theme Adjustments */
body.dark-theme .app-dock {
    background: rgba(30, 30, 30, 0.6);
    border-color: rgba(255, 255, 255, 0.1);
    box-shadow: 0 15px 45px rgba(0, 0, 0, 0.4);
}

body.dark-theme .dock-item {
    color: #aaa;
}

body.dark-theme .dock-item.active {
    background: rgba(157, 141, 241, 0.15);
}

body.dark-theme .app-menu-overlay {
    background: rgba(0, 0, 0, 0.3);
}

body.dark-theme .menu-app-item {
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(255, 255, 255, 0.05);
}

body.dark-theme .menu-app-item:hover {
    background: rgba(255, 255, 255, 0.1);
}

body.dark-theme .menu-label {
    color: #eee;
}

/* Mobile Adjustments for Dock */
@media screen and (max-width: 480px) {
    .app-dock {
        width: 92%;
        bottom: 15px;
        padding: 8px 10px;
        gap: 5px;
        border-radius: 30px;
    }

    .dock-item {
        min-width: 0;
        flex: 1;
        padding: 5px;
    }

    .dock-item .dock-label {
        display: none;
    }

    .dock-item .material-icons-round {
        font-size: 26px;
    }
}

/* Quick Access Home Section (Deprecated but keeping styles for menu items if needed) */
.quick-access-card {
    display: none;
    /* Removed from Home */
}

.quick-access-item {
    inset: -2px -2px 5px rgba(0, 0, 0, 0.05) !important;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
}

.quick-access-item:hover,
.quick-access-item:active {
    transform: translateY(-5px) scale(1.1);
    background: rgba(255, 255, 255, 0.25) !important;
    box-shadow: 0 15px 35px rgba(157, 141, 241, 0.2),
        inset 2px 2px 5px rgba(255, 255, 255, 0.5) !important;
}

/* Unified Color Theme for Icons */
.quick-access-item .icon {
    font-size: 1.8rem !important;
    filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.1));
    background: linear-gradient(135deg, var(--rui-purple), var(--rui-blue));
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    display: inline-block;
}


.quick-access-item .label {
    display: none !important;
}

@media (max-width: 768px) {
    .quick-access-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 20px;
        max-width: 320px;
    }

    .quick-access-item {
        width: 60px !important;
        height: 60px !important;
    }

    .quick-access-item .icon {
        font-size: 1.6rem !important;
    }
}

@media (max-width: 360px) {
    .quick-access-grid {
        gap: 12px;
        max-width: 100%;
    }
}

/* Neu-Glass Tactile Input */
.neu-input {
    background: rgba(255, 255, 255, 0.05) !important;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
    border-radius: 12px !important;
    box-shadow: var(--neu-inner-upper), var(--neu-inner-lower) !important;
    padding: 12px 16px !important;
    color: var(--ink) !important;
    transition: all 0.3s ease !important;
}

.neu-input:focus {
    outline: none;
    border-color: var(--rui-purple) !important;
    background: rgba(255, 255, 255, 0.1) !important;
    box-shadow: var(--neu-inner-upper), var(--neu-inner-lower), 0 0 15px rgba(157, 141, 241, 0.15) !important;
}

/* Neu-Glass Tab Switcher */
.tab-toggle-container {
    background: rgba(0, 0, 0, 0.03) !important;
    box-shadow: var(--neu-inner-upper), var(--neu-inner-lower) !important;
    padding: 4px;
    border-radius: 16px;
    display: inline-flex;
    flex-direction: row !important;
    gap: 4px;
}

.tab-toggle-item {
    padding: 8px 20px;
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.3s ease;
    font-weight: 700;
    color: var(--ink-sub);
}

.tab-toggle-item.active {
    background: rgba(255, 255, 255, 0.85) !important;
    backdrop-filter: blur(10px);
    box-shadow: var(--neu-upper), var(--neu-lower) !important;
    color: var(--rui-purple);
    border: 1px solid rgba(255, 255, 255, 0.4);
}

.tab-toggle-item.active .material-icons-round {
    color: var(--rui-purple);
}



/* Crystal Emoji Motif */
/* Crystal Emoji Motif integrated into main class above */
.quick-access-item .icon {
    background: linear-gradient(135deg, var(--rui-purple), var(--rui-blue));
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    display: inline-block;
    filter: drop-shadow(0 2px 4px rgba(157, 141, 241, 0.2));
    line-height: 1.2;
}

.quick-access-item .icon {
    font-size: 1.3rem !important;
}


@media (max-width: 400px) {
    .quick-access-item {
        width: 56px !important;
        height: 56px !important;
    }

}

@media (max-width: 480px) {
    /* Panel duplication at 302 removed */
}

/* 﨟樊､・3. 郢ｧ・｢郢ｧ・､郢ｧ・ｳ郢晢ｽｳ郢晄㈱縺｡郢晢ｽｳ郢ｧ蛛ｵﾂ€迹夲ｽｦ荵昶斡郢ｧ荵昴＠郢ｧ・､郢ｧ・ｺ邵ｲ髦ｪ竊鍋ｸｺ蜷ｶ・・*/
.icon-selector {
    display: flex !important;
    gap: 10px !important;
    margin: 15px 0 !important;
}

.icon-btn {
    flex: 1 !important;
    aspect-ratio: 1 !important;
    /* 雎・ｽ｣隴・ｽｹ陟厄ｽ｢邵ｺ・ｫ邵ｺ蜷ｶ・・*/
    border-radius: 12px !important;
    border: 1px solid #eee !important;
    background: #fafafa !important;
    cursor: pointer !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 8px !important;
    color: var(--rui-purple) !important;
}

.icon-btn svg {
    width: 32px !important;
    height: 32px !important;
    stroke: currentColor !important;
    fill: none !important;
}

/* 鬩包ｽｸ邵ｺ・ｰ郢ｧ蠕娯螺隴弱ｅ繝ｻ豼ｶ・ｲ */
.icon-btn.active {
    background: var(--rui-purple) !important;
    color: white !important;
}

/* 﨟樊､・4. 隴√・・ｭ蜉ｱ・・怦・･陷牙ｸｶ・ｬ繝ｻ繝ｻ髫ｱ・ｿ隰ｨ・ｴ */
.muted {
    font-size: 0.8rem;
    color: var(--ink-sub);
}

h2 {
    font-size: 1.8rem;
    font-weight: 900;
    margin-bottom: 4px;
    background: linear-gradient(to right, var(--rui-purple), var(--rui-blue));
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    display: inline-block;
}

.view-header {
    text-align: center;
    margin-bottom: 12px;
    padding-top: 8px;
}

.view-header h2 {
    background: linear-gradient(135deg, var(--rui-purple), var(--rui-blue));
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    display: inline-block;
    font-size: 1.05rem;
    font-weight: 800;
    letter-spacing: -0.01em;
    filter: drop-shadow(0 2px 10px rgba(157, 141, 241, 0.15));
}

h3 {
    font-size: 1rem;
    margin-bottom: 15px;
    color: #333;
}

.s-tag {
    padding: 6px 14px;
    border-radius: 20px;
    background: #f0f0f0;
    color: #666;
    font-size: 0.85rem;
    cursor: pointer;
    transition: all 0.2s ease;
}

.s-tag.active {
    background: rgba(157, 141, 241, 0.2);
    color: var(--rui-purple);
    font-weight: 600;
    border: 1px solid var(--rui-purple);
}

/* 﨟樊､・FOCUS STAGE Styles */
.subject-chip {
    padding: 8px 16px;
    border-radius: 20px;
    background: #f8f9fc;
    border: 1px solid #eef0f5;
    color: #666;
    font-size: 0.85rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.subject-chip:hover {
    transform: translateY(-2px);
    background: #fff;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}

.subject-chip.active {
    background: var(--rui-purple);
    color: white;
    border-color: var(--rui-purple);
    box-shadow: 0 4px 15px rgba(157, 141, 241, 0.3);
}

.round-btn {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 1.2rem;
    transition: all 0.2s ease;
}

.round-btn:hover {
    transform: scale(1.1);
}

#focus-reflection-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.reflection-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 15px;
    background: #fdfdfd;
    border-radius: 12px;
    border: 1px solid #f0f0f0;
    font-size: 0.9rem;
}

.reflection-subject {
    font-weight: 700;
    color: var(--rui-purple);
    margin-right: 10px;
}

.reflection-time {
    color: var(--ink-sub);
    font-weight: 600;
}


/* 﨟樊､・髢ｭ譴ｧ蜍ｹ繝ｻ蛹ｻ笘・ｸｺ荵昶・邵ｺ遏ｩ莠溯ｱ・ｽ｢繝ｻ繝ｻ*/
#event-modal {
    display: none;
    position: fixed !important;
    inset: 0 !important;
    background: rgba(255, 255, 255, 0.7) !important;
    z-index: 100000 !important;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    align-items: center;
    justify-content: center;
}

#modal-main-box {
    display: flex !important;
    flex-direction: column !important;
    background: #ffffff !important;
    width: 90% !important;
    max-width: 340px !important;
    padding: 30px !important;
    border-radius: 30px !important;
    box-shadow: var(--neu-upper), var(--neu-lower) !important;
    border: 1px solid rgba(255, 255, 255, 0.8) !important;
}

/* 﨟樊､・郢昶・縺臥ｹ昴・縺醍ｹ晄㈱繝｣郢ｧ・ｯ郢ｧ・ｹ郢ｧ蝣､・ｶ・ｺ魄怜干竊鍋ｸｺ蜷ｶ・・*/
.checkbox-group {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    margin: 10px 0 20px 0 !important;
}

.checkbox-group input {
    width: 18px !important;
    /* 郢ｧ・ｵ郢ｧ・､郢ｧ・ｺ郢ｧ雋槫ｴ玖楜繝ｻ*/
    height: 18px !important;
    margin: 0 !important;
}

/* 郢昶・縺臥ｹ昴・縺醍ｹ晄㈱繝｣郢ｧ・ｯ郢ｧ・ｹ髢ｾ・ｪ闖ｴ阮吶・闖ｴ蜻ｵ・ｨ蛹ｻ竊鷹ｫｫ蜥惹ｿ｣郢ｧ蛛ｵ竊醍ｸｺ荳岩・ */
#event-modal input[type="checkbox"] {
    margin: 0 !important;
}



* {
    box-sizing: border-box;
}

html {
    overflow-x: hidden;
    width: 100%;
    margin: 0;
    padding: 0;
}

html,
body {
    margin: 0;
    height: 100vh !important;
    overflow: hidden !important;
    overscroll-behavior: none;
}

body {
    display: flex;
    font-family: -apple-system, BlinkMacSystemFont, "Inter", "Noto Sans JP", system-ui, sans-serif;
    color: var(--ink);
    background: var(--bg-mesh);
    background-attachment: fixed;
    background-size: cover;
}

/* 🌟 Layout Container (Unified Scroll Root) */
#main-content {
    flex: 1;
    height: 100vh !important;
    overflow-y: auto !important;
    position: relative;
    display: flex;
    flex-direction: column;
    padding-top: calc(var(--header-height) + env(safe-area-inset-top, 0)) !important;
    box-sizing: border-box;
}

.sidebar {
    position: fixed;
    left: 0;
    top: 0;
    bottom: 0;
    width: var(--sidebar-w);
    background: #ffffff !important;
    /* Pure Solid White */
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    border-right: none;
    /* Removed for seamless look */
    z-index: 15000 !important;
    display: flex;
    flex-direction: column;
    box-shadow: none;
    /* Fully flat white */
    transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

/* 﨟樊漉 騾包ｽｻ鬮ｱ・｢邵ｺ繝ｻ1024px 闔会ｽ･闕ｳ螂・ｽｼ蛹ｻ繝ｱ郢ｧ・ｽ郢ｧ・ｳ郢晢ｽｳ繝ｻ蟲ｨ繝ｻ隴弱ｅ繝ｻ髫ｪ・ｭ陞ｳ繝ｻ*/
@media (min-width: 1024px) {

    /* 1. 郢ｧ・ｵ郢ｧ・､郢晏ｳｨ繝ｰ郢晢ｽｼ郢ｧ雋橸ｽｷ・ｦ驕ｶ・ｯ邵ｺ・ｫ陜暦ｽｺ陞ｳ繝ｻ*/
    .sidebar,
    #sidebar {
        left: 0 !important;
        width: var(--sidebar-w) !important;
        position: fixed !important;
    }

    /* 2. 﨟樊､・陷ｷ讎顔√郢ｧ繝ｻ#main-content 邵ｺ・ｫ邵ｺ蜉ｱ窶ｻ邵ｲ竏晄価邵ｺ・ｫ 260px 邵ｺ螢ｹ・臥ｸｺ蜻ｻ・ｼ繝ｻ*/
    /* Desktop padding adjustment */
    #main-content {
        margin-left: var(--sidebar-w) !important;
        width: calc(100% - var(--sidebar-w)) !important;
        padding: 0 !important;
        box-sizing: border-box !important;
    }

    #btn-closeSidebar {
        display: none !important;
    }

    #sidebar-overlay {
        display: none !important;
    }
}

/* Sidebar Overlay for Mobile */
#sidebar-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.3);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    z-index: 14000;
    display: none;
    opacity: 0;
    transition: opacity 0.3s ease;
}

#sidebar-overlay.show {
    display: block;
    opacity: 1;
}

.modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.15);
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    z-index: 20000;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Old .zen-circle removed to fix conflict */

/* Mascot Styles */
#mascot-rui {
    position: fixed;
    width: 64px;
    height: 64px;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    z-index: 8000;
    cursor: pointer;
    transition: left 4s linear, top 4s linear, transform 0.2s, opacity 0.5s ease;
    image-rendering: pixelated;
    user-select: none;
    /* Initially hidden via opacity to allow image pre-loading */
    opacity: 0;
    visibility: hidden;
}

#mascot-idea {
    position: absolute;
    top: -25px;
    left: 50%;
    transform: translateX(-50%) scale(0);
    width: 20px;
    height: 20px;
    image-rendering: pixelated;
    pointer-events: none;
    transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    filter: drop-shadow(0 2px 5px rgba(0, 0, 0, 0.2));
    z-index: 10001;
}

#mascot-idea.show {
    transform: translateX(-50%) scale(1);
}

#mascot-drone {
    position: absolute;
    width: 20px;
    height: 20px;
    top: -22px;
    right: -32px;
    image-rendering: pixelated;
    pointer-events: none;
    z-index: 10000;
    animation: droneFloat 3s ease-in-out infinite;
}

@keyframes droneFloat {

    0%,
    100% {
        transform: translate(0, 0);
    }

    50% {
        transform: translate(-5px, -10px);
    }
}

.mascot-body {
    width: 100%;
    height: 100%;
    image-rendering: pixelated;
}

.heart-particle {
    position: fixed;
    width: 16px;
    height: 16px;
    pointer-events: none;
    z-index: 10000;
    image-rendering: pixelated;
    animation: floatHeart 1.5s ease-out forwards;
}

@keyframes floatHeart {
    0% {
        transform: translateY(0) scale(1);
        opacity: 1;
    }

    100% {
        transform: translateY(-100px) scale(1.5);
        opacity: 0;
    }
}

@keyframes mascotBob {

    0%,
    100% {
        margin-top: 0;
    }

    50% {
        margin-top: -10px;
    }
}

.bobbing img {
    animation: mascotBob 0.4s infinite ease-in-out;
}

.calendar-mini {
    background: white;
    border-radius: 12px;
    padding: 8px 12px;
    font-size: 0.9rem;
    /* Unified */
    text-align: center;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
    border: 1px solid rgba(0, 0, 0, 0.03);
    display: flex;
    align-items: center;
    gap: 8px;
}

.calendar-mini strong {
    color: var(--rui-purple);
    font-size: 0.9rem;
    /* Unified */
    font-weight: 800;
}

.calendar-mini span {
    color: var(--ink-sub);
    font-weight: 600;
}

/* Furniture Editor */
.furn-item {
    position: absolute;
    image-rendering: pixelated;
    max-width: 100px;
    pointer-events: auto;
    transition: outline 0.2s;
    user-select: none;
}


/* --- Habit Tracker (Empty for Redesign) --- */


.furn-item.editing {
    outline: 2px dashed var(--rui-purple);
    cursor: move;
    z-index: 1000;
}

.furn-delete-btn {
    position: absolute;
    top: -10px;
    right: -10px;
    width: 20px;
    height: 20px;
    background: #ff5f5f;
    color: white;
    border-radius: 50%;
    display: none;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: bold;
    cursor: pointer;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
    z-index: 1001;
}

.furn-item.editing .furn-delete-btn {
    display: flex;
}

.sidebar-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 16px 8px;
}

.nav {
    display: flex;
    flex-direction: column;
    gap: 12px;
    /* Standardized gap */
    overflow-y: auto;
    flex-grow: 1;
    padding: 6px 0;
    margin-top: 4px;
}

.nav-section-title {
    padding: 24px 24px 8px;
    font-size: 0.75rem;
    font-weight: 900;
    color: var(--rui-purple);
    letter-spacing: 1.5px;
    text-transform: uppercase;
    opacity: 0.6;
}

.nav::-webkit-scrollbar {
    width: 4px;
}

.nav::-webkit-scrollbar-thumb {
    background: rgba(0, 0, 0, 0.05);
    border-radius: 10px;
}

.nav-item {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 12px 20px;
    margin: 4px 16px;
    width: auto;
    /* Shrink to fit with margins */
    border-radius: 12px;
    cursor: pointer;
    color: var(--ink-sub);
    /* Darker text */
    font-weight: 600;
    background: transparent;
    border: 1px solid transparent;
    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    font-size: 0.95rem;
}

.nav-item:hover {
    background: #ffffff;
    color: var(--rui-purple);
    box-shadow: var(--neu-upper), var(--neu-lower);
    transform: translateY(-2px);
}

.nav-item.active {
    background: #ffffff !important;
    /* Pure White */
    color: var(--rui-purple-accent) !important;
    box-shadow: var(--neu-inner-upper), var(--neu-inner-lower) !important;
    font-weight: 800;
    border: 1px solid rgba(0, 0, 0, 0.04);
}

/* Remove the absolute positioned before element as we now use border-left */
.nav-item::before {
    display: none;
}

/* Gemini-style Sidebar Additions */
.sidebar-search-wrap {
    padding: 12px 16px;
    width: 100%;
}

.sidebar-search {
    background: #ffffff;
    /* Pure White */
    border-radius: 12px;
    padding: 10px 16px;
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--ink-sub);
    font-size: 0.9rem;
    border: 1px solid rgba(0, 0, 0, 0.03);
    box-shadow: var(--neu-inner-upper), var(--neu-inner-lower);
    transition: all 0.3s ease;
    width: 100%;
    box-sizing: border-box;
}

.sidebar-search input {
    border: none;
    background: transparent;
    outline: none;
    width: 100%;
    font-size: 0.85rem;
    color: var(--ink);
}

.new-chat-btn-modern {
    margin: 8px 12px;
    width: calc(100% - 24px);
    padding: 10px 16px;
    background: #ffffff !important;
    border-radius: 10px;
    border: 1px solid rgba(0, 0, 0, 0.05) !important;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    cursor: pointer;
    font-weight: 700;
    color: var(--rui-purple);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.04);
    transition: all 0.3s ease;
    font-size: 0.9rem;
    box-sizing: border-box;
}

.new-chat-btn-modern:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(157, 141, 241, 0.15);
    border-color: rgba(157, 141, 241, 0.2) !important;
}

.sidebar-footer {
    margin-top: auto;
    padding: 20px 16px;
    border-top: 1px solid rgba(0, 0, 0, 0.03);
    font-size: 0.7rem;
    color: var(--muted);
    text-align: center;
    line-height: 1.6;
}

.nav-section-title {
    padding: 24px 24px 8px 24px;
    /* More horizontal padding */
    font-size: 0.75rem;
    font-weight: 900;
    color: var(--rui-purple-accent);
    text-transform: uppercase;
    letter-spacing: 0.15em;
    /* More airy */
    opacity: 0.85;
}

.divider {
    height: 1px;
    background: var(--line);
    margin: 16px 0;
}

.chat-history {
    flex: 0 1 auto;
    /* Allow shrinking, limit growth */
    max-height: 30vh;
    /* Max 30% of screen height */
    min-height: 100px;
    display: flex;
    flex-direction: column;
    margin: 12px 0;
    /* Vertical only */
    padding: 0;
    /* No side padding */
    background: transparent;
    border-radius: 0;
    border: none;
}

.history-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px;
}

.history-head span {
    font-size: .75rem;
    color: var(--ink-sub);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .05em;
}

.tiny-btn {
    border: none;
    border-radius: 6px;
    padding: 4px 8px;
    background: #fff;
    box-shadow: var(--shadow-soft);
    cursor: pointer;
    font-size: 0.7rem;
    font-weight: 600;
    color: var(--ink-sub);
    border: var(--border);
    transition: all 0.2s;
}

.tiny-btn:hover {
    transform: translateY(-1px);
    background: #f8f9fa;
}

/* Redundant definition removed */



/* Main Content - Styles consolidated below or handled globally */
#main-content {
    flex: 1;
    height: 100vh;
    padding: 20px 40px 100px 40px;
    /* Extra bottom padding for chat input panel */
    overflow-y: auto;
    overflow-x: hidden;
    position: relative;
    background: transparent;
    transition: margin-left 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Redundant content-view definition at 1068 removed */

.panel {
    background: var(--glass);
    backdrop-filter: blur(20px);
    border-radius: 24px;
    padding: 24px;
    border: var(--border);
    box-shadow: var(--shadow);
    margin-bottom: 24px;
    flex-shrink: 0;
    /* 邵ｲ螳｣纃ｾ髫補・ﾂ€莉｣・・ｹｧ蠕娯€ｲ霎滂ｽ｡邵ｺ繝ｻ竊堤ｸｲ竏晢ｽ､・ｩ雎悟干窶ｲ郢ｧ・ｫ郢晢ｽｬ郢晢ｽｳ郢敖€郢晢ｽｼ邵ｺ・ｫ雋趣ｽｰ邵ｺ霈費ｽ檎ｹｧ荵晢ｽ・*/
}



@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

h2 {
    margin: 0 0 16px 0;
    font-size: 1.5rem;
    font-weight: 900;
    color: var(--rui-purple-accent);
    /* Improved contrast for headers */
    display: flex;
    align-items: center;
    gap: 12px;
    line-height: 1.4;
    /* Extra room for emojis */
}

@media screen and (max-width: 600px) {
    h2 {
        font-size: 1.25rem;
        gap: 8px;
    }
}

/* Panel Styles purged to avoid duplication */

.panel h3 {
    margin: 0 0 16px 0;
    font-size: 1.1rem;
    font-weight: 700;
}

.muted {
    color: var(--ink-sub);
    font-size: .85rem;
    line-height: 1.5;
}



/* Mobile Responsive */
@media screen and (max-width: 768px) {

    /* ...闕ｳ・ｭ騾｡・･... */
    #main-content {
        /* 郢晢ｽ｡郢昜ｹ斟礼ｹ晢ｽｼ郢晁・繝ｻ邵ｺ・ｮ闕ｳ荵敖ｰ郢ｧ蟲ｨﾂ€竏ｽ・ｸ・ｭ髴・ｽｫ邵ｺ・ｫ陷ｷ蛹ｻ・冗ｸｺ蟶吮€ｻ闔ｨ・ｸ邵ｺ・ｳ郢ｧ荵晢ｽ育ｸｺ繝ｻ竊鍋ｸｺ蜷ｶ・・*/
        height: auto;
        min-height: calc(100vh - 90px);
        overflow-y: visible;
        margin-left: 0 !important;
        /* Force reset margin on mobile */
        width: 100% !important;
        /* Force full width on mobile */
        padding-left: 12px !important;
        padding-right: 12px !important;
    }

    .panel,
    .glass-panel {
        border-radius: 20px !important;
        padding: 18px !important;
    }
}

/* Secondary sidebar ID override removed to unify with primary definition */

/* 1. 郢ｧ・ｪ郢晢ｽｼ郢晁・繝ｻ郢晢ｽｬ郢ｧ・､邵ｺ・ｮ邵ｲ蠕娯鰍邵ｺ荵晢ｼ邵ｲ髦ｪ・定楜謔溘・邵ｺ・ｫ雎ｸ蛹ｻ笘・・繝ｻ*/
#sidebar-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.3);
    /* 﨟樊､懃ｸｺ・ｼ邵ｺ荵晢ｼ郢ｧ蛛ｵ・・ｹｧ竏壺€ｻ邵ｲ竏壺螺邵ｺ・ｰ邵ｺ・ｮ陷贋ｼ・€荵励・邵ｺ・ｫ邵ｺ蜷ｶ・・*/
    /* backdrop-filter: blur(4px);  <-- 﨟樊､懃ｸｺ阮呻ｼ・ｹｧ蜻茨ｽｶ蛹ｻ笘・ｸｺ荵昴＆郢晢ｽ｡郢晢ｽｳ郢晏現縺・ｹｧ・ｦ郢晁肩・ｼ繝ｻ*/
    z-index: 14000;
    animation: fadeInOverlay 0.3s ease;
}

/* 2. 闔会ｽ｣郢ｧ荳奇ｽ顔ｸｺ・ｫ邵ｲ竏晢ｽｾ蠕鯉ｽ咲ｸｺ・ｮ邵ｲ蠕湖鍋ｹｧ・､郢晢ｽｳ騾包ｽｻ鬮ｱ・｢邵ｲ髦ｪ笆｡邵ｺ莉｣・堤ｸｺ・ｼ邵ｺ荵昶・ */
/* 郢ｧ・ｵ郢ｧ・､郢晏ｳｨ繝ｰ郢晢ｽｼ邵ｺ迹夲ｽ｡・ｨ驕会ｽｺ邵ｺ霈費ｽ檎ｸｺ・ｦ邵ｺ繝ｻ・玖ｭ弱ｑ・ｼ蛹ｻ縺檎ｹ晢ｽｼ郢晁・繝ｻ郢晢ｽｬ郢ｧ・､邵ｺ・ｫ show 邵ｺ蠕娯命邵ｺ繝ｻ窶ｻ邵ｺ繝ｻ・玖ｭ弱ｑ・ｼ繝ｻ*/
#sidebar-overlay.show~#main-content {
    filter: blur(4px);
    /* 﨟樊､・郢晢ｽ｡郢ｧ・､郢晢ｽｳ騾包ｽｻ鬮ｱ・｢邵ｺ・ｰ邵ｺ莉｣窶ｲ邵ｺ・ｼ郢ｧ繝ｻ・郢ｧ荵晢ｽ育ｸｺ繝ｻ竊鍋ｸｺ・ｪ郢ｧ繝ｻ*/
}

@keyframes fadeInOverlay {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}



#mobile-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 16px;
    padding-top: env(safe-area-inset-top, 0);
    height: calc(var(--header-height) + env(safe-area-inset-top, 0));
    background: rgba(255, 255, 255, 0.85);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.03);
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
    z-index: 1000;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    box-sizing: border-box;
}

#mobile-header strong {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    white-space: nowrap;
    pointer-events: none;
    /* Prevent blocking clicks if it overlaps slightly */
}

.header-logo-img {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    height: 48px;
    width: auto;
    filter: drop-shadow(0 2px 4px rgba(157, 124, 243, 0.2));
    pointer-events: auto;
    /* Changed from none */
    cursor: pointer;
    transition: transform 0.2s ease, opacity 0.2s ease;
    z-index: 1001;
    /* Ensure it stays above other elements to be clickable */
    max-width: 50%;
    /* Prevent it from being too wide on extremely small screens */
}

.header-logo-img:hover {
    opacity: 0.8;
    transform: translateX(-50%) scale(1.05);
}

#btn-openSidebar {
    font-size: 28px !important;
    width: 54px !important;
    height: 54px !important;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    border-radius: 0;
    margin-left: 0;
}

#btn-closeSidebar {
    display: flex !important;
    position: absolute;
    top: 15px;
    right: 15px;
    z-index: 100;
}

.hamburger-btn {
    background: transparent;
    border: none;
    border-radius: 50%;
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    padding: 0;
    cursor: pointer;
    color: var(--ink);
    transition: all 0.2s;
}

.hamburger-btn:active {
    background: rgba(0, 0, 0, 0.05);
    transform: scale(0.95);
}

.header-action-btn {
    background: transparent;
    border: none;
    font-size: 24px;
    cursor: pointer;
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.2s;
}

.header-action-btn:active {
    transform: scale(0.9);
}

#gift-selection-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.4);
    z-index: 20000;
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(4px);
    animation: fadeIn 0.3s ease;
}

.gift-menu-panel {
    background: white;
    width: 90%;
    max-width: 320px;
    border-radius: 24px;
    padding: 24px;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.2);
    text-align: center;
}

.gift-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    margin-top: 16px;
}

.gift-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    padding: 8px;
    border-radius: 12px;
    transition: background 0.2s;
}

.gift-item:hover {
    background: #f0f0ff;
}

.gift-item img {
    width: 40px;
    height: 40px;
    image-rendering: pixelated;
}

.gift-item span {
    font-size: 0.7rem;
    font-weight: 700;
    color: var(--rui-purple);
}

.falling-gift {
    position: fixed;
    width: 32px;
    height: 32px;
    z-index: 7000;
    image-rendering: pixelated;
    pointer-events: none;
    transition: transform 1s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}




.nav {
    flex-direction: column;
    height: auto;
    align-items: flex-start;
    gap: 4px;
}

.nav-item {
    padding: 12px 16px;
    font-size: 0.95rem;
    height: auto;
}

.chat-history {
    max-height: 30vh;
    overflow-y: auto;
    flex-grow: 0;
}


/* 﨟樊､・邵ｺ阮呻ｽ檎ｸｺ蠕個€譴ｧ・ｭ・｣髫暦ｽ｣邵ｲ髦ｪ繝ｻ郢ｧ・ｻ郢昴・繝ｨ邵ｺ・ｰ郢ｧ闌ｨ・ｼ竏夲ｼ・ｹｧ蠕｡・ｻ・･陞滓じ繝ｻ雎ｸ蛹ｻ・邵ｺ・ｦ陞滂ｽｧ闕ｳ莠･・､・ｫ */

/* 﨟樊､・陷茨ｽｨ邵ｺ・ｦ邵ｺ・ｮ騾包ｽｻ鬮ｱ・｢邵ｺ・ｮ陜難ｽｺ隴幢ｽｬ郢晢ｽｫ郢晢ｽｼ郢晢ｽｫ繝ｻ螢ｽ蜍ｸ隹ｿ・ｵ邵ｺ・ｯ鬮ｫ・ｰ邵ｺ蜉ｱ窶ｻ邵ｺ鄙ｫ・･ */
/* content-view integration and cleanup */
.content-view {
    display: none;
    flex-direction: column;
    width: 100%;
    margin: 0 auto;
    min-height: 100vh;
    opacity: 0;
    transition: opacity 0.3s ease;
    box-sizing: border-box;
    padding-bottom: 40px;
    animation: fadeIn 0.4s ease-out;
}

.content-view.active {
    display: flex !important;
    opacity: 1 !important;
    z-index: 10 !important;
}

/* Panel duplication at 1633 removed */

h2 {
    font-size: 1.2rem;
}

.habit-btns {
    gap: 12px;
}

.circle-btn {
    width: 100px;
    height: 100px;
    font-size: 0.8rem;
}

/* Mascot should be smaller on mobile */
#mascot-rui {
    width: 48px;
    height: 48px;
}

.two-col {
    grid-template-columns: 1fr;
    gap: 12px;
}

.weather-grid {
    grid-template-columns: 1fr;
}

.weather-card {
    padding: 16px;
}

.tracker-paper-wrap {
    margin: 0 -16px;
    padding: 16px;
    border-radius: 0;
    border-left: none;
    border-right: none;
}


#loading {
    left: 20px !important;
    bottom: 80px !important;
}


/* Weather Styles */
.weather-card {
    background: linear-gradient(180deg, rgba(157, 124, 243, 0.1), rgba(124, 185, 243, 0.1));
    border-radius: 24px;
    padding: 24px;
    border: var(--border);
}

.weather-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

#wx-icon {
    font-size: 3.5rem;
    /* Slightly larger for presence */
    line-height: 1.2;
    padding-bottom: 4px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.wx-temp {
    font-size: 2.5rem;
    font-weight: 800;
}

.weather-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    margin-top: 24px;
}

.wx-chip {
    background: var(--card-bg);
    padding: 16px;
    border-radius: 16px;
    border: var(--border);
    box-shadow: var(--shadow-soft);
}

.chip-k {
    font-size: 0.75rem;
    color: var(--ink-sub);
    font-weight: 700;
}

.chip-v {
    font-size: 1.1rem;
    font-weight: 700;
    margin-top: 4px;
}



/* Gallery / Scrapbook Grid */
.grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 20px;
}

.item-card {
    background: var(--card-bg);
    border-radius: 20px;
    overflow: hidden;
    border: var(--border);
    box-shadow: var(--shadow-soft);
    display: flex;
    flex-direction: column;
}

.thumb {
    height: 180px;
    background: #eee;
    overflow: hidden;
}

.thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.item-body {
    padding: 16px;
    flex-grow: 1;
}

.item-title {
    font-weight: 700;
    margin-bottom: 8px;
}

.tag {
    padding: 4px 10px;
    background: rgba(157, 124, 243, 0.1);
    color: var(--rui-purple);
    border-radius: 20px;
    font-size: 0.75rem;
    font-weight: 700;
    margin-right: 4px;
    color: var(--rui-purple-accent);
}

.tag:hover {
    background: var(--rui-purple);
    color: white;
    transform: translateY(-1px);
}

/* Health Styles */
.stat-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
}

.stat {
    background: var(--card-bg);
    padding: 20px;
    border-radius: 20px;
    border: var(--border);
    box-shadow: var(--shadow-soft);
}

.stat .k {
    font-size: 0.8rem;
    color: var(--ink-sub);
    font-weight: 700;
}

.stat .v {
    font-size: 1.25rem;
    font-weight: 800;
    margin-top: 8px;
    color: var(--rui-purple-accent);
    /* Stronger color */
}

.icon-btn.active {
    background: var(--rui-purple) !important;
    color: white !important;
    transform: scale(1.1);
    box-shadow: 0 4px 10px rgba(157, 141, 241, 0.4);
}

.icon-btn.active svg {
    fill: white !important;
    stroke: white !important;
}


/* 﨟樊､・3. 郢ｧ・｢郢ｧ・､郢ｧ・ｳ郢晢ｽｳ郢ｧ・ｻ郢晢ｽｬ郢ｧ・ｯ郢ｧ・ｿ郢晢ｽｼ繝ｻ莠･繝ｻ雎悟干繝ｻ雎梧€懊・繝ｻ蟲ｨ繝ｻ髫穂ｹ昶螺騾ｶ・ｮ */
.icon-selector {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    margin-top: 10px;
}

.icon-btn {
    flex: 1;
    aspect-ratio: 1;
    /* 雎・ｽ｣隴・ｽｹ陟厄ｽ｢邵ｺ・ｫ邵ｺ蜷ｶ・・*/
    border-radius: 12px;
    border: var(--border);
    background: var(--card-bg);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 10px;
    transition: all 0.2s ease;
    color: var(--rui-purple);
}

.icon-btn svg {
    width: 100%;
    height: 100%;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
}

/* 﨟樊､・4. 郢ｧ・｢郢晏ｳｨ繝ｰ郢ｧ・､郢ｧ・ｹ騾包ｽｨ邵ｺ・ｮ郢ｧ・｢郢ｧ・､郢ｧ・ｳ郢晢ｽｳ繝ｻ莠･・ｷ・ｦ陋幢ｽｴ邵ｺ・ｮ驍擾ｽｫ邵ｺ・ｮ闕ｳ・ｸ繝ｻ繝ｻ*/

/* 﨟樊､・5. 陷茨ｽ･陷牙ｸｶ・ｬ繝ｻ・堤ｸｺ鄙ｫ・郢ｧ繝ｻ・檎ｸｺ・ｫ邵ｺ蜷ｶ・・*/
input[type="date"],
input[type="time"],
input[type="text"],
input[type="number"],
input[type="password"],
select,
textarea {
    width: 100%;
    padding: 12px;
    border-radius: 12px;
    border: var(--border);
    background: var(--card-bg);
    color: var(--ink);
    font-size: 0.9rem;
    box-sizing: border-box;
    outline: none;
    transition: 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

input:focus,
textarea:focus {
    border-color: var(--rui-purple);
    background: #fff;
    box-shadow: 0 0 0 3px rgba(157, 124, 243, 0.1);
}

.muted {
    font-size: 0.75rem;
    color: var(--ink-sub);
}



.add-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--rui-purple);
    color: #fff;
    border: none;
    padding: 10px 20px;
    border-radius: 30px;
    cursor: pointer;
    font-weight: 800;
    font-size: 0.95rem;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 4px 15px rgba(157, 141, 241, 0.2);
    white-space: nowrap;
    width: auto;
}

.add-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(157, 141, 241, 0.35);
    filter: brightness(1.1);
}

.button-header-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    margin-bottom: 20px;
    gap: 12px;
}



/* Message Edit Modal */
#msg-edit-overlay {
    position: fixed;
    inset: 0;
    z-index: 11000;
    background: rgba(0, 0, 0, 0.5);
    display: none;
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(4px);
}

/* Lightbox Overlay */
#lightbox-overlay {
    position: fixed;
    inset: 0;
    z-index: 12000;
    background: rgba(0, 0, 0, 0.9);
    display: none;
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(8px);
    cursor: zoom-out;
}

#lightbox-overlay img {
    max-width: 95vw;
    max-height: 95vh;
    object-fit: contain;
    border-radius: 8px;
    box-shadow: 0 0 50px rgba(0, 0, 0, 0.5);
    animation: zoomIn 0.3s ease-out;
}

@keyframes zoomIn {
    from {
        opacity: 0;
        transform: scale(0.9);
    }

    to {
        opacity: 1;
        transform: scale(1);
    }
}

#lightbox-close {
    position: absolute;
    top: 20px;
    right: 20px;
    color: #fff;
    font-size: 2rem;
    cursor: pointer;
    width: 50px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 50%;
}

/* Utilities */
/* Responsive Layout Utility */
.two-col {
    display: flex;
    gap: 12px;
}

.two-col>* {
    flex: 1;
    width: auto !important;
    /* Ensure inputs don't overflow */
}

@media screen and (max-width: 600px) {
    .two-col {
        flex-direction: column !important;
        gap: 12px;
    }
}

/* Updated media query for tablets/small desktops: don't let it override mobile drawer styles */
@media screen and (min-width: 769px) and (max-width: 1024px) {
    #sidebar {
        width: 80px;
        padding: 10px;
    }

    #sidebar .calendar-mini,
    #sidebar .history-head span,
    #sidebar .history-item div,
    #sidebar .nav-item span {
        display: none;
    }

    .nav-item {
        justify-content: center;
        padding: 12px;
    }

}

/* Dream Manager */
.goal-card {
    background: var(--card-bg);
    border-radius: 20px;
    padding: 20px;
    margin-bottom: 20px;
    border: var(--border);
    box-shadow: var(--shadow-soft);
}

.goal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
    margin-bottom: 12px;
}

.goal-title {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--rui-purple);
}

.goal-progress-bar {
    height: 8px;
    background: rgba(0, 0, 0, 0.05);
    border-radius: 4px;
    overflow: hidden;
    margin-bottom: 15px;
}

.goal-progress-fill {
    height: 100%;
    background: var(--rui-purple);
    transition: width 0.3s ease;
}

.action-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.action-item {
    display: flex;
    align-items: center;
    padding: 8px 12px;
    background: var(--card-bg);
    border-radius: 10px;
    margin-bottom: 8px;
    gap: 12px;
    border: 1px solid transparent;
    transition: 0.2s;
}

.action-item:hover {
    border-color: var(--rui-purple);
}

.action-item.done {
    opacity: 0.6;
    text-decoration: line-through;
}

.action-checkbox {
    width: 18px;
    height: 18px;
    cursor: pointer;
}

.action-text {
    flex: 1;
    font-size: 0.9rem;
}

.goal-tools {
    display: flex;
    gap: 10px;
}

.tool-icon {
    cursor: pointer;
    font-size: 0.9rem;
    opacity: 0.5;
    transition: 0.2s;
}

.tool-icon:hover {
    opacity: 1;
}

.goal-card.done {
    opacity: 0.6;
}

.goal-card.done .goal-title {
    text-decoration: line-through;
    color: var(--ink-sub);
}

.health-graph-container {
    width: 100%;
    height: 240px;
    margin-top: 16px;
    background: var(--card-bg);
    border-radius: 12px;
    padding: 16px;
    position: relative;
}



.legend-color {
    flex-shrink: 0 !important;
    /* 陜怜ｹ・ｽｧ蛛ｵ窶ｲ雋趣ｽｰ郢ｧ蠕娯・邵ｺ繝ｻ・育ｸｺ繝ｻ竊鍋ｸｺ蜷ｶ・・*/
    width: 10px !important;
    height: 10px !important;
    margin-right: 4px !important;
    /* 陜怜ｹ・ｽｧ蛛ｵ竊定ｭ√・・ｭ蜉ｱ・帝恆莉｣笆ｼ邵ｺ莉｣・・*/
    border-radius: 2px !important;
}

/* Icon Selector for Health Input */
.icon-selector-group {
    margin-bottom: 16px;
}

.icon-selector-label {
    display: block;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--ink);
    margin-bottom: 8px;
}

.icon-selector {
    display: flex;
    gap: 12px;
    justify-content: center;
    align-items: center;
}

.icon-btn {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    border: 2px solid var(--line);
    background: white;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s ease;
    position: relative;
    overflow: visible;
    /* Prevent emoji clipping */
}

.icon-btn:hover {
    border-color: var(--rui-purple);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(157, 124, 243, 0.2);
}

.icon-btn.selected {
    border-color: var(--rui-purple-accent);
    background: var(--rui-purple) !important;
    box-shadow: 0 4px 15px rgba(157, 124, 243, 0.4);
}

.icon-btn.selected svg {
    fill: white !important;
}

.icon-btn svg {
    width: 24px;
    height: 24px;
    fill: var(--ink-sub);
    transition: fill 0.3s ease;
}

.icon-btn.selected svg {
    fill: var(--rui-purple);
}

.icon-btn:hover svg {
    fill: var(--rui-purple);
}

/* #mobile-header redundant definition removed */

/* Hide mobile-only elements on desktop */
@media screen and (min-width: 769px) {
    #mobile-header {
        display: none !important;
    }
}

/* Notion-style Header */
.home-cover {
    height: 160px;
    /* Reduced from 280px */
    width: 100%;
    background-color: #eee;
    background-size: cover;
    background-position: center 50%;
    /* Default centered */
    position: relative;
    border-radius: 0 0 12px 12px;
    margin-bottom: 40px;
    transition: height 0.3s ease;
}

.home-cover.repositioning {
    cursor: move;
    opacity: 0.9;
    box-shadow: inset 0 0 0 2px var(--rui-purple);
}

.cover-controls {
    position: absolute;
    right: 20px;
    bottom: 10px;
    display: flex;
    gap: 8px;
    z-index: 5;
}

.btn-change-cover,
.btn-reposition,
.btn-save-position {
    /* Reset absolute */
    position: relative;
    right: auto;
    bottom: auto;

    background: rgba(255, 255, 255, 0.8);
    border: 1px solid rgba(0, 0, 0, 0.1);
    border-radius: 4px;
    padding: 4px 12px;
    font-size: 0.8rem;
    cursor: pointer;
    opacity: 0;
    transition: opacity 0.2s;
    display: flex;
    /* Kept for icon alignment */
    align-items: center;
    gap: 4px;
    color: var(--ink);
}

.home-cover:hover .btn-change-cover,
.home-cover:hover .btn-reposition,
.home-cover:hover .btn-save-position {
    opacity: 1;
}

.btn-save-position {
    opacity: 1 !important;
    /* Always visible when active */
    background: var(--rui-purple);
    color: #fff;
    font-weight: bold;
    display: none;
    /* Hidden by default */
}

.home-icon-container {
    position: absolute;
    bottom: -36px;
    left: 40px;
    width: 72px;
    height: 72px;
    font-size: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: transform 0.2s;
    z-index: 10;
}

.home-icon-container:hover {
    transform: scale(1.1);
}

/* Date Pill Style */
.date-pill {
    display: inline-block;
    padding: 6px 16px;
    background: var(--card-bg);
    border: 1px solid var(--line);
    border-radius: 20px;
    font-size: 0.9rem;
    color: var(--ink-sub);
    font-weight: 600;
    margin-bottom: 20px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

/* To-Do Done Style */
.task-done {
    opacity: 0.6;
    text-decoration: line-through;
    color: var(--muted);

    /* 郢昶・縺臥ｹ昴・縺醍ｸｺ謔溘・邵ｺ・｣邵ｺ貅ｽ讀ｪ鬮｢阮吮・邵ｲ繝ｻ蝨倡ｸｺ・ｫ邵ｺ繧・ｽ玖ｭ√・・ｭ證ｦ・ｼ繝ｻodo-text繝ｻ蟲ｨ・堤ｹｧ・ｰ郢晢ｽｬ郢晢ｽｼ邵ｺ・ｫ邵ｺ蜉ｱ窶ｻ驍ｱ螢ｹ・定怦・･郢ｧ蠕鯉ｽ狗ｹｧ繝ｻ*/
    .todo-checkbox:checked+.todo-text {
        text-decoration: line-through;
        color: #888;
        opacity: 0.6;
    }
}

/* 﨟樊､・郢ｧ・ｫ郢晢ｽｬ郢晢ｽｳ郢敖€郢晢ｽｼ陷茨ｽｨ闖ｴ阮吶・驍ゑｽｱ繝ｻ螢ｹ・・ｸｺ阮吶€堤ｸｲ譴ｧ・ｨ・ｪ7陋ｻ蜉ｱﾂ€髦ｪ・帝お・ｶ陝・ｽｾ邵ｺ・ｫ陞ｳ蛹ｻ・臥ｸｺ蟶呻ｽ九・繝ｻ*/
.calendar-grid {
    display: grid !important;
    /* 﨟樔ｺ・郢ｧ・ｰ郢晢ｽｪ郢昴・繝ｩ邵ｺ・ｫ邵ｺ蜷ｶ・玖楜・｣髫ｪﾂ€ */
    grid-template-columns: repeat(7, 1fr);
    /* 﨟樔ｺ・1鬨ｾ・ｱ鬮｢髮｣・ｼ繝ｻ陋ｻ蜉ｱ竊楢崕繝ｻ・郢ｧ蜈ｷ・ｼ蛹ｻ・・ｹｧ蠕娯€ｲ陞滂ｽｧ闔蜈ｷ・ｼ繝ｻ・ｼ繝ｻ*/
    gap: 8px;
    /* 郢晄ｧｭ縺幄惺謔滂ｽ｣・ｫ邵ｺ・ｮ鬮ｫ蜥惹ｿ｣ */
    width: 100%;
    margin-top: 20px;
}

/* 﨟樊､・郢ｧ・ｫ郢晢ｽｬ郢晢ｽｳ郢敖€郢晢ｽｼ陷茨ｽｨ闖ｴ阮吶・郢晏€･繝｣郢敖€郢晢ｽｼ繝ｻ蛹ｻ繝ｪ郢晁侭縺皮ｹ晢ｽｼ郢ｧ・ｷ郢晢ｽｧ郢晢ｽｳ邵ｺ・ｨ郢昶・縺臥ｹ昴・縺醍ｹ晄㈱繝｣郢ｧ・ｯ郢ｧ・ｹ繝ｻ繝ｻ*/
.calendar-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 15px;
    margin-bottom: 20px;
    padding: 0 5px;
}

.header-controls {
    display: flex;
    align-items: center;
    gap: 12px;
}

.header-controls h2 {
    margin: 0;
    min-width: 130px;
    text-align: center;
    font-size: 1rem;
    font-weight: 800;
    background: linear-gradient(135deg, var(--rui-purple), #7eb9ff);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.nav-arrow {
    width: 34px !important;
    height: 34px !important;
    padding: 0 !important;
    border-radius: 50% !important;
    min-width: 34px !important;
    flex-shrink: 0;
}

.nav-arrow span {
    font-size: 1.2rem !important;
}

/* 﨟樊､・隴匁㊧蠕狗ｸｺ・ｮ郢晏€･繝｣郢敖€郢晢ｽｼ繝ｻ蝓溷ｾ狗ｸｲ諛ｷ謔・・繝ｻ*/
.calendar-weekdays {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    text-align: center;
    font-size: 0.7rem;
    font-weight: bold;
    color: #888;
    margin-bottom: 5px;
}

/* 﨟樊､・1隴鯉ｽ･陋ｻ繝ｻ繝ｻ郢晄ｧｭ縺帙・繝ｻal-day繝ｻ莨夲ｽｼ螢ｹ笙€邵ｺ蜉ｱ・・ｹｧ蠕娯・郢晏ｳｨﾎ樒ｹｧ・ｹ郢ｧ・｢郢昴・繝ｻ */
/* 2334陦檎岼縺ｮ蜿､縺・ｮ夂ｾｩ繧貞炎髯､縺励€・501陦檎岼縺ｫ邨ｱ蜷医＠縺ｾ縺・*/
.cal-day:hover {
    transform: translateY(-3px);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.1);
}

/* 﨟樊､・闔莠･・ｮ螟ｲ・ｼ蛹ｻﾎ帷ｹ晏生ﾎ昴・蟲ｨ繝ｻ髫穂ｹ昶螺騾ｶ・ｮ */
.event-item {
    font-size: 0.7rem;
    color: white;
    padding: 2px 6px;
    margin-top: 4px;
    border-radius: 4px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    /* 鬮滂ｽｷ邵ｺ繝ｻ竊堤ｸｲ繝ｻ..邵ｲ髦ｪ竊鍋ｸｺ蜷ｶ・・*/
}


/* =============================================
   隨ｨ・ｨ 郢昴・縺倡ｹｧ・､郢晢ｽｳ郢ｧ雋橸ｽｮ蛹ｻ・顔ｸｺ・､邵ｺ・､邵ｲ竏ｽ・ｸ・ｦ邵ｺ・ｳ郢ｧ蝣､蟲ｩ邵ｺ蜻取€咎お繧育・隹ｿ・ｵ
   ============================================= */

/* 1. 郢晏｣ｹ繝ｻ郢ｧ・ｸ陷茨ｽｨ闖ｴ髮｣・ｼ螟ゑｽｸ・ｦ邵ｺ・ｫ闔ｨ・ｸ邵ｺ・ｳ郢ｧ荵晢ｼ・ｸｺ・ｨ郢ｧ螳夲ｽｨ・ｱ陷ｿ・ｯ邵ｺ蜷ｶ・・*/
/* Layout Overrides */
/* 驍ｵ・ｦ郢ｧ・ｹ郢ｧ・ｯ郢晢ｽｭ郢晢ｽｼ郢晢ｽｫ郢ｧ螳夲ｽｨ・ｱ陷ｿ・ｯ */
/* overflow-x override removed */
/* 邵ｲ螳｣纃ｾ髫補・ﾂ€隨ｬ・ｨ・ｪ隰・ｺ郢ｧ蠕鯉ｽ定楜謔溘・邵ｺ・ｫ陝・・ﾂｧ郢ｧ繝ｻ*/


/* 2. 郢晢ｽ｡郢ｧ・､郢晢ｽｳ郢ｧ・ｨ郢晢ｽｪ郢ｧ・｢繝ｻ螢ｻ・ｸ・ｭ髴・ｽｫ郢ｧ蝣､笏碁€・・・・ｹｧ鬘泌愛鬮ｱ・｢陷€繝ｻ竊馴ｫ｢蟲ｨﾂｧ髴趣ｽｼ郢ｧ竏壺・邵ｺ繝ｻ*/
/* Secondary layout overrides removed for unification */

/* 3. 陷ｷ繝ｻ繝ｱ郢晞亂ﾎ昴・螟ゑｽｵ・ｶ陝・ｽｾ邵ｺ・ｫ鬩･髦ｪ竊醍ｹｧ蟲ｨ笘・ｸｲ繝ｻ・ｰ繝ｻ蛻・ｸｺ・ｫ闕ｳ・ｦ邵ｺ・ｶ郢ｧ蛹ｻ竕ｧ邵ｺ・ｫ邵ｺ蜷ｶ・・*/
/* Panel duplication at 2233 removed */
.weather-card,
.calendar-panel {
    position: relative !important;
    /* 鬩･髦ｪ竊醍ｹｧ鄙ｫ・帝囓・｣雎ｸ繝ｻ*/
    flex-shrink: 0 !important;
    /* 隰夲ｽｼ邵ｺ邇ｲ・ｽ・ｰ邵ｺ蜉ｱ・帝ｫｦ・ｲ雎・ｽ｢ */
    width: 100% !important;
    height: auto !important;
    min-height: 150px;
    /* 驕ｨ・ｺ騾具ｽｽ邵ｺ・ｮ霑･・ｯ闔・ｺ邵ｺ・ｯ邵ｺ阮呻ｼ・・繝ｻ100vh邵ｺ・ｧ邵ｺ・ｯ邵ｺ・ｪ邵ｺ繝ｻ50px驕槫唱・ｺ・ｦ邵ｺ・ｫ邵ｺ蜷ｶ・・*/
    margin-bottom: 24px !important;
    /* 郢昜ｻ｣繝ｻ郢昴・驟碑椶・ｫ邵ｺ・ｮ鬮ｫ蜥惹ｿ｣郢ｧ蜑・ｽｸﾂ€陞ｳ螢ｹ竊鍋ｸｺ蜷ｶ・・*/
}

/* 4. 隶難ｽｪ郢ｧ・ｹ郢ｧ・ｯ郢晢ｽｭ郢晢ｽｼ郢晢ｽｫ邵ｺ・ｮ霑･・ｯ闔・ｺ郢ｧ蟶晢ｽｻ蜷ｶ・臥ｸｺ蟶呻ｽ・*/
* {
    max-width: 100% !important;
    box-sizing: border-box !important;
}

/* --- 﨟槫ｱ上・繝ｻ陟｢蠕個€繝ｻ・邵ｺ繝ｻ・ｨ・ｪ郢ｧ・ｹ郢ｧ・ｯ郢晢ｽｭ郢晢ｽｼ郢晢ｽｫ郢晁・繝ｻ郢ｧ雋橸ｽｮ謔溘・邵ｺ・ｫ雎ｸ蛹ｻ笘・ｬｲ逍ｲ・ｳ繝ｻ--- */

/* 1. 郢晏｣ｹ繝ｻ郢ｧ・ｸ陷茨ｽｨ闖ｴ髮｣縲堤ｸｲ譴ｧ・ｨ・ｪ隴・ｽｹ陷ｷ莉｣ﾂ€髦ｪ竏育ｸｺ・ｮ髢ｼ・ｱ隘搾ｽｰ郢ｧ蝣､・ｦ竏ｵ・ｭ・｢邵ｺ蜷ｶ・・*/
/* Global Scroll Lockdown */
html,
body {
    overflow: hidden !important;
    height: 100vh !important;
    margin: 0;
    padding: 0;
}


/* 3. 邵ｲ蜊・ｮ倩滋・ｺ邵ｲ繝ｻ00vw 郢ｧ蜑・ｽｽ・ｿ邵ｺ・｣邵ｺ・ｦ邵ｺ繝ｻ・玖撻・ｴ陷ｷ蛹ｻ繝ｻ 100% 邵ｺ・ｫ闕ｳ鬆大ｶ檎ｸｺ髦ｪ笘・ｹｧ繝ｻ*/
* {
    box-sizing: border-box !important;
}

/* 﨟槫ｰ・郢ｧ・ｹ郢晄ｧｭ繝ｻ郢ｧ・ｵ郢ｧ・､郢ｧ・ｺ繝ｻ莠･繝ｻ鬨ｾ螟奇ｽｨ・ｭ陞ｳ螟ｲ・ｼ繝ｻ*/
#sidebar {
    position: fixed;
    left: calc(var(--sidebar-w) * -1);
    /* 隴崢€陋ｻ譏ｴ繝ｻ騾包ｽｻ鬮ｱ邯ｲ謔ｶ竊馴ｫｫ・ｰ邵ｺ繝ｻ*/
    width: var(--sidebar-w);
    height: 100%;
    background: var(--sidebar-bg) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    border-right: 1px solid rgba(255, 255, 255, 0.2) !important;
    z-index: 15000 !important;
    transition: 0.3s;
    /* 邵ｺ・ｬ郢ｧ荵昶夢邵ｺ・ｨ陷崎ｼ板ｰ邵ｺ蜻ｵ・ｨ・ｭ陞ｳ繝ｻ*/
    /* 﨟樊､・邵ｺ阮呻ｽ檎ｸｺ蠕個€蠕娯鰍郢ｧ繝ｻ・邵ｲ髦ｪ・帝€ｶ・ｴ邵ｺ蜥城浹陷会ｽｹ髦ｮ・ｬ繝ｻ繝ｻ*/
    will-change: transform;
    /* 郢晄じﾎ帷ｹｧ・ｦ郢ｧ・ｶ邵ｺ・ｫ邵ｲ蠕鯉ｼ・ｹｧ蠕個ｰ郢ｧ迚呵劒邵ｺ荳奇ｽ育ｸｲ髦ｪ竊定ｬｨ蜷ｶ竏ｴ邵ｺ・ｦ雋・摩・咏ｸｺ霈披雷郢ｧ繝ｻ*/
    backface-visibility: hidden;
    /* 髯ｬ荳槭・邵ｺ・ｮ隰蜀怜愛郢ｧ蝣､諤宣€｡・･邵ｺ蜉ｱ窶ｻ髮具｣ｰ隲｡繝ｻ・定ｲょｸ呻ｽ臥ｸｺ繝ｻ*/
    -webkit-font-smoothing: antialiased;
    /* 隴√・・ｭ蜉ｱ・堤ｸｺ荳岩夢邵ｺ髦ｪ・願ｲ贋ｻ｣・臥ｸｺ荵昶・邵ｺ蜷ｶ・・*/

    /* 﨟樊､・郢ｧ繧・ｼ width 邵ｺ繝ｻ% 郢ｧ繝ｻcalc() 邵ｺ・ｫ邵ｺ・ｪ邵ｺ・｣邵ｺ・ｦ邵ｺ繝ｻ笳・ｹｧ蟲ｨﾂ€竏晏ｴ玖楜螢ｹ繝ｻ郢晄鱒縺醍ｹｧ・ｻ郢晢ｽｫ隰ｨ・ｰ邵ｺ・ｫ邵ｺ蜉ｱ窶ｻ邵ｺ・ｿ郢ｧ荵昴・郢ｧ繧育・ */
    /* width: 260px; */
}

/* 郢ｧ・ｹ郢晄ｧｭ繝ｻ邵ｺ・ｧ郢晢ｽ｡郢昜ｹ斟礼ｹ晢ｽｼ郢ｧ蟶晏ｹ慕ｸｺ繝ｻ笳・ｭ弱・*/
#sidebar.show {
    left: 0;
    transform: none;
}

/* 郢ｧ・ｹ郢晄ｧｭ繝ｻ郢ｧ・ｵ郢ｧ・､郢ｧ・ｺ邵ｺ・ｮ髫ｪ・ｭ陞ｳ螟ｲ・ｼ莠･繝ｻ鬨ｾ螟奇ｽｨ・ｭ陞ｳ螟ｲ・ｼ繝ｻ*/
#sidebar {
    /* ...繝ｻ莠包ｽｻ鄙ｫ竕郢ｧ邇厄ｽｨ・ｭ陞ｳ螢ｹ繝ｻ邵ｺ譏ｴ繝ｻ邵ｺ・ｾ邵ｺ・ｾ隹ｿ荵昶・繝ｻ繝ｻ.. */

    /* 﨟樊､・邵ｺ阮呻ｽ檎ｸｺ蠕個€蠕娯鰍郢ｧ繝ｻ・邵ｲ髦ｪ・帝€ｶ・ｴ邵ｺ蜥城浹陷会ｽｹ髦ｮ・ｬ繝ｻ繝ｻ*/
    will-change: transform;
    /* 郢晄じﾎ帷ｹｧ・ｦ郢ｧ・ｶ邵ｺ・ｫ邵ｲ蠕鯉ｼ・ｹｧ蠕個ｰ郢ｧ迚呵劒邵ｺ荳奇ｽ育ｸｲ髦ｪ竊定ｬｨ蜷ｶ竏ｴ邵ｺ・ｦ雋・摩・咏ｸｺ霈披雷郢ｧ繝ｻ*/
    backface-visibility: hidden;
    /* 髯ｬ荳槭・邵ｺ・ｮ隰蜀怜愛郢ｧ蝣､諤宣€｡・･邵ｺ蜉ｱ窶ｻ髮具｣ｰ隲｡繝ｻ・定ｲょｸ呻ｽ臥ｸｺ繝ｻ*/
    -webkit-font-smoothing: antialiased;
    /* 隴√・・ｭ蜉ｱ・堤ｸｺ荳岩夢邵ｺ髦ｪ・願ｲ贋ｻ｣・臥ｸｺ荵昶・邵ｺ蜷ｶ・・*/

    /* 﨟樊､・郢ｧ繧・ｼ width 邵ｺ繝ｻ% 郢ｧ繝ｻcalc() 邵ｺ・ｫ邵ｺ・ｪ邵ｺ・｣邵ｺ・ｦ邵ｺ繝ｻ笳・ｹｧ蟲ｨﾂ€竏晏ｴ玖楜螢ｹ繝ｻ郢晄鱒縺醍ｹｧ・ｻ郢晢ｽｫ隰ｨ・ｰ邵ｺ・ｫ邵ｺ蜉ｱ窶ｻ邵ｺ・ｿ郢ｧ荵昴・郢ｧ繧育・ */
    /* width: 260px; */
}

@media (min-width: 1024px) {

    /* 1. 郢ｧ・ｵ郢ｧ・､郢晏ｳｨ繝ｰ郢晢ｽｼ郢ｧ雋橸ｽｷ・ｦ驕ｶ・ｯ邵ｺ・ｫ郢ｧ・ｬ郢昴・繝｡郢晢ｽｪ陜暦ｽｺ陞ｳ繝ｻ*/
    #sidebar {
        left: 0 !important;
        width: var(--sidebar-w) !important;
        position: fixed !important;
        height: 100vh !important;
        display: block !important;
        /* 郢ｧ・ｹ郢晄ｧｭ繝ｻ邵ｺ・ｧ雎ｸ蛹ｻ竏ｴ邵ｺ・ｦ邵ｺ・ｦ郢ｧ繧・ｽｼ・ｷ陋ｻ・ｶ騾ｧ繝ｻ竊楢怎・ｺ邵ｺ繝ｻ*/
    }

    /* 2. 郢晢ｽ｡郢ｧ・､郢晢ｽｳ騾包ｽｻ鬮ｱ邯ｲ蛛ｵﾂ€繝ｻ60px邵ｲ讎頑価邵ｺ・ｫ陟托ｽｷ陋ｻ・ｶ驕假ｽｻ陷崎ｼ費ｼ・ｸｺ蟶呻ｽ・*/
    #main-content,
    #app-container {
        /* 陷ｷ蟶吶・郢ｧ・ｳ郢晢ｽｼ郢晏ｳｨ縲定叉・ｭ髴・ｽｫ郢ｧ雋樊｡∫ｹｧ阮吶€堤ｸｺ繝ｻ・紀D郢ｧ雋槭・鬩幢ｽｨ隰悶・・ｮ螟ｲ・ｼ繝ｻ*/
        margin-left: var(--sidebar-w) !important;
        width: calc(100% - var(--sidebar-w)) !important;
        position: relative !important;
        left: 0 !important;
    }

    /* 3. 郢昜ｸ莞ｦ郢晁・繝ｻ郢ｧ・ｬ郢晢ｽｼ郢晄㈱縺｡郢晢ｽｳ繝ｻ莠包ｽｸ逕ｻ謔ｽ驍ｱ螟ｲ・ｼ蟲ｨ繝ｻ郢ｧ繧・鴬闕ｳ蟠趣ｽｦ竏壺味邵ｺ荵晢ｽ蛾ｫｫ・ｰ邵ｺ繝ｻ*/
    .menu-toggle-btn,
    #btn-open-sidebar {
        display: none !important;
    }
}

/* 﨟樊､・1. 郢ｧ・ｫ郢晢ｽｬ郢晢ｽｳ郢敖€郢晢ｽｼ邵ｺ・ｮ1隴鯉ｽ･陋ｻ繝ｻ繝ｻ隴ｫ・ｰ郢ｧ蜻育ｴ帷ｸｺ蛹ｻ・・*/
.cal-day {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: stretch;
    padding: 6px;
    /* Reduced from 8px for more room */
    overflow: hidden;
    background: var(--card-bg);
    border-radius: 12px;
    height: auto;
    min-height: 100px;
    box-shadow: var(--shadow-soft);
    border: var(--border);
    transition: transform 0.2s ease;
}

.cal-day-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    width: 100%;
    margin-bottom: 4px;
    gap: 4px;
}

.cal-icons {
    display: flex;
    gap: 2px;
    align-items: center;
    flex-wrap: wrap;
    /* Fallback for very narrow cells */
    justify-content: flex-end;
    flex-shrink: 1;
    /* Allow it to shrink if needed, but flex-wrap will handle it */
}

/* 譌･莉倥・謨ｰ蟄励ｒ蟆代＠蟆上＆縺上＠縺ｦ縲∝ｷｦ荳翫↓蟇・○繧・*/
.cal-day .date-num {
    font-size: 0.8rem;
    font-weight: bold;
    color: var(--ink);
    margin-bottom: 4px;
    align-self: flex-start;
    flex-shrink: 0;
    /* Don't squash the number */
}

/* 﨟樊､・2. 闔莠･・ｮ螟ｲ・ｼ蛹ｻ縺・ｹ晏生ﾎｦ郢晁肩・ｼ蟲ｨ繝ｻ髫穂ｹ昶螺騾ｶ・ｮ郢ｧ蛛ｵ繝｡郢昴・繝ｻ邵ｺ・ｮ郢ｧ蛹ｻ竕ｧ邵ｺ・ｫ邵ｺ蜷ｶ・・*/
.event-item {
    font-size: 0.7rem;
    /* 隴√・・ｭ蜉ｱ・定氣荳奇ｼ・ｸｺ繝ｻ*/
    color: white;
    /* 隴√・・ｭ闍鍋横郢ｧ蝣､蜊€邵ｺ・ｫ繝ｻ驛√Ξ隴趣ｽｯ邵ｺ譴ｧ・ｿ繝ｻ・樊ｿｶ・ｲ陷題ざ鄂ｲ繝ｻ繝ｻ*/
    padding: 2px 6px;
    /* 陷€繝ｻ繝ｻ邵ｺ・ｮ闖ｴ蜥丞項 */
    margin-bottom: 2px;
    /* 隹ｺ・｡邵ｺ・ｮ闔莠･・ｮ螢ｹ竊堤ｸｺ・ｮ鬮ｫ蜥惹ｿ｣ */
    border-radius: 4px;
    /* 髫怜・・定叉・ｸ邵ｺ荳岩・郢ｧ繝ｻ*/
    cursor: pointer;
    /* 郢晄ｧｭ縺育ｹｧ・ｹ郢ｧ蜑・ｽｹ蜉ｱ笳狗ｹｧ荵昶・隰悶・繝ｻ郢晢ｽｼ郢ｧ・ｯ邵ｺ・ｫ */

    /* 鬮滂ｽｷ邵ｺ繝ｻ縺｡郢ｧ・､郢晏現ﾎ晉ｹｧ蛛ｵﾂ€繝ｻ..邵ｲ髦ｪ縲帝€ｵ竏ｫ謇慕ｸｺ蜷ｶ・矩ｬｲ逍ｲ・ｳ繝ｻ*/
    white-space: nowrap;
    /* 1髯ｦ蠕後€帝勗・ｨ驕会ｽｺ邵ｺ蜷ｶ・・*/
    overflow: hidden;
    /* 邵ｺ・ｯ邵ｺ・ｿ陷・ｽｺ邵ｺ貊・夊崕繝ｻ・帝ｫｫ・ｰ邵ｺ繝ｻ*/
    text-overflow: ellipsis;
    /* 隴幢ｽｫ陝・ｽｾ郢ｧ蛛ｵﾂ€繝ｻ..邵ｲ髦ｪ竊鍋ｸｺ蜷ｶ・・*/

    /* 陟厄ｽｱ郢ｧ蛛ｵ笆ｽ邵ｺ莉｣窶ｻ陝・ｻ｣・雎ｬ・ｮ邵ｺ荵昶雷郢ｧ蜈ｷ・ｼ蛹ｻ笙€陞ゑｽｽ邵ｺ・ｿ邵ｺ・ｧ繝ｻ繝ｻ*/
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
    transition: transform 0.1s;
    /* 陷崎ｼ費ｿ･雋・摩・・*/
}

/* 郢晄ｧｭ縺育ｹｧ・ｹ郢ｧ蜑・ｽｹ蜉ｱ笳狗ｸｺ貊灘・邵ｺ・ｫ陝・ｻ｣・邵ｺ・ｰ邵ｺ螟ｧ・､・ｧ邵ｺ髦ｪ・･邵ｺ蜷ｶ・九・蛹ｻ笙€陞ゑｽｽ邵ｺ・ｿ邵ｺ・ｧ繝ｻ繝ｻ*/
.event-item:hover {
    transform: scale(1.02);
    z-index: 1;
    /* 闔画じ繝ｻ闔莠･・ｮ螢ｹ・育ｹｧ鬆醍・陷鷹亂竊・*/
}

/* 﨟樊､・騾包ｽｻ鬮ｱ・｢邵ｺ・ｮ隶難ｽｪ陝ｷ繝ｻ窶ｲ 600px 闔会ｽ･闕ｳ荵昴・邵ｺ・ｨ邵ｺ髦ｪ笆｡邵ｺ鮃ｹ竊宣€包ｽｨ邵ｺ霈費ｽ檎ｹｧ荵斟晉ｹ晢ｽｼ郢晢ｽｫ邵ｺ・ｰ郢ｧ繝ｻ*/
@media screen and (max-width: 600px) {
    .calendar-grid {
        /* 隴崢€闖ｴ蠑ｱ繝ｻ鬯ｮ蛟･・・ｹｧ繝ｻ100px 邵ｺ荵晢ｽ・60px 邵ｺ荳奇ｽ臥ｸｺ繝ｻ竊楢叉荵晢ｿ｡邵ｺ・ｦ邵ｺ・ｿ郢ｧ蛹ｻ竕ｧ */
        grid-auto-rows: minmax(60px, auto) !important;
        gap: 4px;
        /* 鬮ｫ蜥惹ｿ｣郢ｧ繧・ｽｰ莉｣・髫ｧ・ｰ郢ｧ竏夲ｽ狗ｸｺ・ｨ郢ｧ・ｹ郢晄ｧｭ繝ｻ郢晏現笆｡邵ｺ・ｭ */
    }

    .cal-day {
        min-height: 60px !important;
        padding: 2px !important;
        /* Extremely compact padding for mobile */
    }

    .cal-day .date-num {
        font-size: 0.7rem;
        margin: 0;
    }

    .weather-icon-sm,
    .moon-icon {
        font-size: 0.7rem !important;
    }

    .event-item {
        font-size: 0.6rem;
        padding: 1px 2px;
        margin-top: 1px;
    }

    /* Prevent mobile auto-zoom on focus by ensuring font-size is at least 16px */
    input,
    textarea,
    select {
        font-size: 16px !important;
    }
}

/* 﨟樊､・邵ｲ蠕｡・ｻ鬆大ｾ狗ｸｲ髦ｪ繝ｻ郢晄ｧｭ縺帷ｹｧ蝣､髻ｳ陋ｻ・･邵ｺ・ｫ邵ｺ蜷ｶ・・*/
.cal-day.today {
    background-color: var(--active-blue) !important;
    /* 髦ｮ繝ｻ・樒ｹ昜ｻ｣繝ｻ郢晏干ﾎ晉ｸｺ・ｧ陷・ｽｪ邵ｺ蜉ｱ・･騾ｶ・ｮ驕ｶ荵昶螺邵ｺ蟶呻ｽ・*/
    border: 2px solid #9d7cf3 !important;
    /* 陷ｷ蟶吶・陞ゑｽｽ邵ｺ髦ｪ竊第ｿｶ・ｲ邵ｺ・ｮ陞滂ｽｪ隴ｫ・ｰ郢ｧ蛛ｵ笆ｽ邵ｺ莉｣・・*/
    box-shadow: 0 0 10px rgba(157, 124, 243, 0.3);
    /* 邵ｺ・ｻ郢ｧ阮吶・郢ｧ髮√・郢ｧ蟲ｨ笳狗ｹｧ繝ｻ*/
}

/* 闔蛾大ｾ狗ｸｺ・ｮ隰ｨ・ｰ陝・干笆｡邵ｺ鬘檎横郢ｧ雋橸ｽ､蟲ｨ竏ｴ邵ｺ貅假ｽ顔ｸｲ竏ｽ・ｸ・ｸ邵ｺ・ｧ陜暦ｽｲ郢ｧﾂ€邵ｺ・ｮ郢ｧ繧・凰邵ｺ蜉ｱ・・ｹｧ蠕娯味邵ｺ・ｭ */
/* 莉頑律縺ｮ謨ｰ蟄励□縺題牡繧貞､峨∴縺溘ｊ縲∽ｸｸ縺ｧ蝗ｲ繧€縺ｮ繧ゅ♀縺励ｃ繧後□縺ｭ */
.cal-day.today .date-num {
    color: #9d7cf3;
    font-weight: 900;
    position: relative;
}



/* 﨟樊､・郢晢ｽ｢郢晢ｽｼ郢敖€郢晢ｽｫ陷茨ｽｨ闖ｴ阮吶・陜ｨ貅ｷ蠎・*/
#event-modal label {
    display: flex !important;
    justify-content: flex-start !important;
    /* 陝ｾ・ｦ陝・・笳・*/
    align-items: center !important;
    width: fit-content !important;
    /* 隶難ｽｪ邵ｺ・ｫ陟弱・窶ｲ郢ｧ蟲ｨ竊醍ｸｺ繝ｻ・育ｸｺ繝ｻ竊鍋ｸｺ蜷ｶ・・*/
    gap: 8px !important;
    /* 郢昶・縺臥ｹ昴・縺醍ｹ晄㈱繝｣郢ｧ・ｯ郢ｧ・ｹ邵ｺ・ｨ隴√・・ｭ蜉ｱ繝ｻ鬮ｫ蜥惹ｿ｣ */
    margin: 10px 0 !important;
    /* 闕ｳ雍具ｽｸ荵昴・闖ｴ蜥丞項 */
    padding: 0 !important;
    cursor: pointer;
}

#event-modal input[type="checkbox"] {
    width: 18px !important;
    /* 100%邵ｺ・ｫ邵ｺ・ｪ郢ｧ蟲ｨ竊醍ｸｺ繝ｻ・育ｸｺ繝ｻ竊楢摎・ｺ陞ｳ繝ｻ*/
    height: 18px !important;
    margin: 0 !important;
}


.event-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px;
    border-bottom: 1px solid #eee;
    margin-bottom: 5px;
}

/* --- Home Layout (Unified) --- */
.main-container {
    display: flex !important;
    flex-direction: column !important;
    gap: 20px;
    width: 100%;
    margin-top: 20px;
    margin-bottom: 40px !important;
}

#side-content-area,
#side-content-area-v2 {
    display: flex;
    flex-direction: column;
    gap: 20px;
    flex: 1;
}

#day-view-section,
#day-view-section-v2 {
    min-height: 100px;
}

/* PC/iPad Layout (Desktop) */
@media (min-width: 850px) {
    .main-container {
        flex-direction: row !important;
        align-items: flex-start !important;
    }

    #calendar-section,
    #calendar-section-v2 {
        flex: 1.8 !important;
    }

    #side-content-area,
    #side-content-area-v2 {
        flex: 1 !important;
        min-width: 320px;
        position: sticky;
        top: 20px;
    }
}



/* 﨟樊､・鬩包ｽｸ邵ｺ・ｰ郢ｧ蠕娯螺隴鯉ｽ･闔牙€･繝ｻ郢ｧ・ｹ郢ｧ・ｿ郢ｧ・､郢晢ｽｫ */
.cal-day.selected {
    border: 2px solid #9d8df1 !important;
    background-color: #f4f2ff !important;
}

/* 﨟樊､・1. 郢晄㈱縺｡郢晢ｽｳ郢ｧ雋槭・邵ｺ・ｮ郢ｧ・ｷ郢晢ｽｳ郢晏干ﾎ晉ｸｺ・ｪ郢ｧ・｢郢ｧ・､郢ｧ・ｳ郢晢ｽｳ邵ｺ・ｫ隰鯉ｽｻ邵ｺ繝ｻ*/
.day-event-btns {
    display: flex;
    gap: 8px;
    /* 郢晄㈱縺｡郢晢ｽｳ陷ｷ謔滂ｽ｣・ｫ邵ｺ・ｮ鬮｢鬥ｴ蝗・*/
}

.day-event-btns button {
    border: none !important;
    /* 隴ｫ・ｰ驍ｱ螢ｹ・定ｱｸ蛹ｻ笘・*/
    background: none !important;
    /* 髢ｭ譴ｧ蜍ｹ豼ｶ・ｲ郢ｧ蜻茨ｽｶ蛹ｻ笘・*/
    padding: 4px !important;
    /* 闖ｴ蜥丞項郢ｧ雋橸ｽｰ荳奇ｼ・ｸｺ繝ｻ*/
    font-size: 1.3rem !important;
    /* 郢ｧ・｢郢ｧ・､郢ｧ・ｳ郢晢ｽｳ邵ｺ・ｮ郢ｧ・ｵ郢ｧ・､郢ｧ・ｺ郢ｧ蝣､・ｨ荵晢ｽ育ｸｺ繝ｻ*/
    cursor: pointer;
    color: #888;
    /* 郢ｧ・｢郢ｧ・､郢ｧ・ｳ郢晢ｽｳ邵ｺ・ｮ豼ｶ・ｲ郢ｧ螳夊ｪ邵ｺ・｡騾ｹﾂ€邵ｺ荵昶雷郢ｧ繝ｻ*/
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    border-radius: 50%;
    /* 郢晏ｸ吶Σ郢晢ｽｼ隴弱ｅ竊楢叉・ｸ邵ｺ荳岩・郢ｧ蛹ｺ・ｺ髢€・・*/
    width: 32px;
    height: 32px;
}

.day-event-btns button:hover {
    background-color: #f0f0f0 !important;
    /* 郢晏ｸ吶Σ郢晢ｽｼ隴弱ｅ竊鍋ｸｺ繝ｻ笆ｲ邵ｺ蜷ｶ・蛾妙譴ｧ蜍ｹ豼ｶ・ｲ */
    color: #333;
}

/* 﨟樊､・闔莠･・ｮ螢ｻ・ｸﾂ€髯ｦ蠕後・郢晢ｽｬ郢ｧ・､郢ｧ・｢郢ｧ・ｦ郢晁肩・ｼ螢ｼ・ｷ・ｦ陷ｿ・ｳ邵ｺ・ｫ雎包ｽ｣邵ｺ讎頑肩郢ｧ蠕鯉ｼ・ｸｺ蟶呻ｽ・*/
.day-event-item {
    display: flex !important;
    justify-content: space-between !important;
    /* 邵ｺ阮呻ｽ檎ｸｺ・ｧ郢晄㈱縺｡郢晢ｽｳ郢ｧ雋樊価驕ｶ・ｯ邵ｺ・ｸ繝ｻ繝ｻ*/
    align-items: center !important;
    padding: 10px 5px !important;
    border-bottom: 1px solid #f0f0f0 !important;
}

/* 﨟樊､・隴√・・ｭ蜉ｱ縺礼ｹｧ・､郢ｧ・ｺ繝ｻ螢ｹ・・ｸｺ阮呻ｽ・0.9rem (驍上・4px) 邵ｺ・ｫ邵ｺ蜉ｱ窶ｻ陝・ｸ奇ｼ・ｸｺ荳岩・郢ｧ繝ｻ*/
.day-event-title {
    font-size: 0.9rem !important;
    font-weight: 600 !important;
    color: #333 !important;
}

/* 﨟樊､・郢晄㈱縺｡郢晢ｽｳ繝ｻ螢ｽ譽ｧ郢ｧ蜻茨ｽｶ蛹ｻ・邵ｺ・ｦ邵ｲ竏晄価陋幢ｽｴ邵ｺ・ｫ邵ｺ・ｾ邵ｺ・ｨ郢ｧ竏夲ｽ・*/
.day-event-btns {
    display: flex !important;
    gap: 12px !important;
    /* 郢ｧ・｢郢ｧ・､郢ｧ・ｳ郢晢ｽｳ陷ｷ謔滂ｽ｣・ｫ邵ｺ・ｮ鬮ｫ蜥惹ｿ｣ */
    margin-left: 15px !important;
}

.day-event-btns button {
    border: none !important;
    background: none !important;
    padding: 0 !important;
    font-size: 1.2rem !important;
    /* 郢ｧ・｢郢ｧ・､郢ｧ・ｳ郢晢ｽｳ邵ｺ・ｮ陞滂ｽｧ邵ｺ髦ｪ・・*/
    cursor: pointer !important;
    opacity: 0.7;
    transition: opacity 0.2s;
}

.day-event-btns button:hover {
    opacity: 1;
}

/* 﨟樊､・陷ｿ・ｳ陋幢ｽｴ邵ｺ・ｫ闕ｳ・ｦ邵ｺ・ｶ邵ｺ蜷ｶ竏狗ｸｺ・ｦ邵ｺ・ｮ郢ｧ・ｫ郢晢ｽｼ郢晏ｳｨ竊楢怦・ｱ鬨ｾ螢ｹ繝ｻ郢昴・縺倡ｹｧ・､郢晢ｽｳ */
.side-card {
    background: #ffffff !important;
    border-radius: 20px !important;
    /* 髫怜・・定叉・ｸ邵ｺ荳奇ｼ邵ｺ・ｦ隴滓鱒・臥ｸｺ荵晢ｿ･ */
    padding: 20px !important;
    /* 闕ｳ・ｭ邵ｺ・ｫ郢ｧ繝ｻ竊堤ｹｧ鄙ｫ・定ｬ問・笳・ｸｺ蟶呻ｽ・*/
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05) !important;
    /* 邵ｺ・ｵ郢ｧ荳岩夢邵ｺ・ｨ邵ｺ蜉ｱ笳・厄ｽｱ */
    margin-bottom: 20px !important;
    /* 郢ｧ・ｫ郢晢ｽｼ郢晉甥驟碑椶・ｫ邵ｺ・ｮ鬮ｫ蜥惹ｿ｣ */
    border: 1px solid rgba(0, 0, 0, 0.02) !important;
    /* 邵ｺ繝ｻ笆ｲ邵ｺ蜷ｶ・臥ｸｺ・ｨ邵ｺ蜉ｱ笳・し竏晏徐郢ｧ繝ｻ*/
}

/* 郢ｧ・ｿ郢ｧ・､郢晏現ﾎ晉ｸｺ・ｮ髫穂ｹ昶螺騾ｶ・ｮ郢ｧ繧・ｽｰ莉｣・陞滂ｽｧ闔・ｺ邵ｺ・｣邵ｺ・ｽ邵ｺ繝ｻ*/
.side-card h3 {
    font-size: 1rem !important;
    font-weight: 600 !important;
    margin-bottom: 15px !important;
    color: #333 !important;
    display: flex;
    align-items: center;
    gap: 8px;

}

/* 﨟樊､・邵ｲ蠕｡・ｺ莠･・ｮ螢ｹ・帝恆・ｽ陷会｣ｰ邵ｲ髦ｪ繝ｻ郢ｧ・ｿ郢晢ｽｳ郢ｧ雋樊峡騾ｧ繝ｻ竊鍋ｸｺ鄙ｫ・郢ｧ繝ｻ・檎ｸｺ・ｫ邵ｺ蜷ｶ・・*/
#btn-add-new-event {
    background-color: #9d8df1 !important;
    /* ToDo邵ｺ・ｨ陷ｷ蠕個ｧ郢昜ｻ｣繝ｻ郢晏干ﾎ・*/
    color: white !important;
    border: none !important;
    padding: 8px 16px !important;
    border-radius: 12px !important;
    /* 髫怜・・定叉・ｸ邵ｺ繝ｻ*/
    font-size: 0.85rem !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
    box-shadow: 0 4px 10px rgba(157, 141, 241, 0.3) !important;
    /* 邵ｺ繝ｻ笆ｲ邵ｺ蜷ｶ・芽怦蟲ｨ・玖厄ｽｱ */
}

#btn-add-new-event:hover {
    background-color: #8a79e0 !important;
    transform: translateY(-1px);
    /* 陝・ｻ｣・雎ｬ・ｮ邵ｺ蝣ｺ・ｸ鄙ｫ窶ｲ郢ｧ蛹ｺ・ｼ豕後・ */
    box-shadow: 0 6px 15px rgba(157, 141, 241, 0.4) !important;
}

/* 﨟樊､・ToDo邵ｺ・ｨ隴鯉ｽ･陜｣・ｱ邵ｺ・ｫ郢ｧ繧・€蠕｡・ｺ莠･・ｮ螢ｹ縺｡郢晄じﾂ€髦ｪ竊定惺蠕個ｧ鬯ｲ逍ｲ・ｳ蛹・ｽｼ閧ｲ蜊€邵ｺ繝ｻ繝ｬ隴趣ｽｯ繝ｻ蟲ｨ・堤ｸｺ荵晢ｿ郢ｧ繝ｻ*/
.side-card {
    background: #ffffff !important;
    border-radius: 20px !important;
    padding: 20px !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05) !important;
    margin-bottom: 20px !important;
}

.side-card h3 {
    font-size: 1rem !important;
    color: #333 !important;
    margin-bottom: 15px !important;
    display: flex;
    align-items: center;
    gap: 8px;
}


/* Panel logic shared. Duplicate block removed. */

/* 﨟樊､・陷・ｽ｡關灘・・ｼ蛹ｻﾎ樒ｹｧ・ｸ郢ｧ・ｧ郢晢ｽｳ郢昜ｼ夲ｽｼ蟲ｨ繝ｻ鬮ｫ蜥惹ｿ｣郢ｧ蜻茨ｽｶ蝓滂ｽｻ繝ｻ・・ｸｺ蟶呻ｽ矩ｬｲ逍ｲ・ｳ繝ｻ*/
.graph-legend {
    display: flex !important;
    flex-direction: row !important;
    justify-content: center !important;
    gap: 20px !important;
    width: 100% !important;
    margin: 10px 0 !important;
    padding: 0 !important;
}

.legend-item {
    /* 﨟樔ｺ・鬩･蟠趣ｽｦ繝ｻ・ｼ螟奇ｽｦ・ｪ邵ｺ荵晢ｽ臥ｸｲ謔滂ｽｺ繝ｻ窶ｲ郢ｧ蠕個€髦ｪ竊帝坎ﾂ€郢ｧ荳奇ｽ檎ｸｺ・ｦ郢ｧ繧域侠陷ｷ・ｦ邵ｺ蜷ｶ・矩坎・ｭ陞ｳ繝ｻ*/
    flex: none !important;
    display: flex !important;
    align-items: center !important;
    width: auto !important;
    /* 陝ｷ繝ｻ・定ｭ√・・ｭ蜉ｱ繝ｻ鬮滂ｽｷ邵ｺ霈披・郢晄鱒縺｡郢昴・竊定惺蛹ｻ・冗ｸｺ蟶呻ｽ・*/
    margin: 0 !important;
    /* 闖ｴ蜻ｵ・ｨ蛹ｻ竊鷹ｫｫ蜥惹ｿ｣繝ｻ繝ｻargin繝ｻ蟲ｨ・堤ｹ晢ｽｪ郢ｧ・ｻ郢昴・繝ｨ */

    white-space: nowrap !important;
    /* 邵ｲ謔溘・雎悟干ﾂ€髦ｪ繝ｻ闔譴ｧ譫夊氛蜉ｱ・帝ｫｮ・｢邵ｺ霈披・邵ｺ繝ｻ*/
    font-size: 0.8rem !important;
}

.legend-color {
    width: 10px !important;
    height: 10px !important;
    margin-right: 5px !important;
    /* 陜怜ｹ・ｽｧ蛛ｵ竊定ｭ√・・ｭ蜉ｱ繝ｻ鬮｢阮吶・髴肴辨螻ｬ郢ｧ蜻域€呵氣荳岩・邵ｺ蜷ｶ・・*/
    flex-shrink: 0 !important;
}

/* 﨟樊､・郢ｧ・ｰ郢晢ｽｩ郢晁ｼ斐・陷ｷ・ｹ邵ｺ讎翫・邵ｺ證ｦ・ｼ蛹ｻ繝､郢晢ｽｼ郢晢ｽｫ郢昶・繝｣郢晄圜・ｼ繝ｻ*/
.graph-tooltip {
    position: fixed;
    /* absolute 邵ｺ荵晢ｽ・fixed 邵ｺ・ｫ陞溷ｳｨ竏ｴ邵ｺ・ｦ邵ｲ竏ｽ・ｽ蜥ｲ・ｽ・ｮ髫ｪ閧ｲ・ｮ蜉ｱ・帝￡・ｺ陞ｳ貅倪・邵ｺ蜷ｶ・狗ｹｧ繝ｻ*/
    display: none;
    background: white !important;
    /* 髢ｭ譴ｧ蜍ｹ郢ｧ蝣､蜊€邵ｺ・ｧ陜ｪ蜉ｱ・顔ｸｺ・､邵ｺ・ｶ邵ｺ繝ｻ*/
    border: 1px solid var(--rui-purple) !important;
    padding: 10px;
    border-radius: 8px;
    font-size: 0.75rem;
    z-index: 9999 !important;
    /* 闔画じ繝ｻ闖ｴ霈費ｽ育ｹｧ鄙ｫ・り叉鄙ｫ竊馴勗・ｨ驕会ｽｺ邵ｺ蜷ｶ・・*/
    pointer-events: none;
    /* 郢晄ｧｭ縺育ｹｧ・ｹ邵ｺ・ｮ陷崎ｼ披€ｳ郢ｧ蟶昴′鬯ｲ譁撰ｼ邵ｺ・ｪ邵ｺ繝ｻ・ｭ逍ｲ・ｳ繝ｻ*/
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
    /* line-height: 1.4;  <-- 陟｢繝ｻ・ｦ竏壺・郢ｧ逕ｻ・ｮ荵昶・邵ｺ莉｣竊千ｸｲ竏ｵ谺陞ｳ螢ｹ窶ｲ邵ｺ・ｪ邵ｺ繝ｻ繝ｻ邵ｺ・ｧ闕ｳﾂ€隴鯉ｽｦ雎ｸ蛹ｻ笘・ｹｧ繝ｻ*/
    /* min-width: 100px; <-- 陟｢繝ｻ・ｦ竏壺・郢ｧ逕ｻ・ｮ荵昶・邵ｺ莉｣竊千ｸｲ竏ｵ谺陞ｳ螢ｹ窶ｲ邵ｺ・ｪ邵ｺ繝ｻ繝ｻ邵ｺ・ｧ闕ｳﾂ€隴鯉ｽｦ雎ｸ蛹ｻ笘・ｹｧ繝ｻ*/
}

.tooltip-date {
    font-weight: bold;
    border-bottom: 1px solid #eee;
    margin-bottom: 5px;
    padding-bottom: 2px;
}

.tooltip-tags {
    color: var(--rui-purple);
    margin-top: 4px;
    font-style: italic;
}

#health-svg {
    width: 100%;
    /* 邵ｺ阮呻ｽ檎ｸｺ・ｧ髫包ｽｪ邵ｺ・ｮ郢昜ｻ｣繝ｭ郢晢ｽｫ邵ｺ繝ｻ笆ｲ邵ｺ・ｱ邵ｺ繝ｻ竊楢弱・窶ｲ郢ｧ荵晢ｽ・*/
    height: 200px;
    /* 郢晢ｽｩ郢晏生ﾎ晉ｸｺ謔溘・郢ｧ蜿･繝ｻ邵ｲ竏晢ｽｰ莉｣・鬯ｮ蛟･・・ｹｧ雋橸ｽ｢蜉ｱ・・ｸｺ蜉ｱ笳・ｹｧ繝ｻ*/
    overflow: visible;
    /* 驕ｶ・ｯ邵ｺ・｣邵ｺ阮吶・霓､・ｹ邵ｺ謔溘・郢ｧ蠕娯・邵ｺ繝ｻ・育ｸｺ繝ｻ竊・*/
}

/* 﨟樊ｸ・郢ｧ・ｯ郢ｧ・､郢昴・縺鷹€墓ｺｽ轤願怦・･陷牙ｸ吶・郢ｧ・ｿ郢晢ｽｳ */
/* 﨟樊ｸ・郢ｧ・ｯ郢ｧ・､郢昴・縺鷹€墓ｺｽ轤願怦・･陷牙ｸ吶・郢ｧ・ｿ郢晢ｽｳ */
.quick-period-btn {
    flex: 1;
    background: white;
    border: 2px solid rgba(243, 124, 185, 0.2);
    color: #d81b60;
    padding: 12px 8px;
    border-radius: 12px;
    font-size: 0.85rem;
    font-weight: bold;
    cursor: pointer;
    transition: all 0.2s ease;
}

.quick-period-btn:active {
    background: rgba(243, 124, 185, 0.1);
    transform: scale(0.95);
}

.period-input-row input[type="date"] {
    font-family: inherit;
    font-size: 0.8rem;

    color: var(--ink-main);
}

/* 螟ｩ豌励い繧､繧ｳ繝ｳ縺ｮ繧ｹ繧ｿ繧､繝ｫ */
.weather-icon-sm {
    font-size: 1.1rem;
    pointer-events: none;
    transition: opacity 0.3s ease;
    z-index: 1;
}

@media (max-width: 480px) {
    .weather-icon-sm {
        font-size: 0.75rem !important;
    }
}

/* 髱櫁｡ｨ遉ｺ縺ｮ譎ゅ・騾乗・縺ｫ縺吶ｋ */
.weather-hidden {
    opacity: 0;
}

/* 莠亥ｮ壽律縺ｮ繧ｻ繝ｫ縺ｮ隕九◆逶ｮ */
.predicted-period-cell {
    background-color: rgba(243, 124, 185, 0.15) !important;
    position: relative;
}

.moon-icon {
    font-size: 0.9rem;
    filter: drop-shadow(0 0 3px rgba(255, 235, 59, 0.5));
    pointer-events: none;
}

@media (max-width: 480px) {
    .moon-icon {
        font-size: 0.7rem !important;
    }
}

/* DIARY REDESIGN (Glassmorphism & Cute Style) */
.glass {
    background: rgba(255, 255, 255, 0.7) !important;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.4) !important;
    box-shadow: 0 8px 32px rgba(157, 141, 241, 0.1) !important;
}

.diary-edit-panel {
    border-radius: 24px;
    padding: 24px;
    margin-bottom: 24px;
    /* Consistent with other panels */
    transition: all 0.3s ease;
    flex-shrink: 0;
    /* Prevent shrinking when diary list grows */
}

#new-diary-text {
    min-height: 120px;
    /* Ensure textarea stays usable */
}

.diary-input-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
    gap: 12px;
    flex-wrap: wrap;
}

.diary-date-input {
    border: none;
    background: rgba(255, 255, 255, 0.5);
    padding: 8px 16px;
    border-radius: 12px;
    color: var(--ink);
    font-family: inherit;
    font-weight: 700;
    outline: none;
    flex: 1;
    /* Expand to fill space */
    min-width: 150px;
}

.mood-selector {
    display: flex;
    gap: 8px;
    background: rgba(255, 255, 255, 0.5);
    padding: 6px;
    border-radius: 30px;
    flex: 2;
    /* Expand more than date */
    justify-content: space-around;
    min-width: 200px;
}

.mood-chip {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.4rem;
    cursor: pointer;
    border-radius: 50%;
    transition: all 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    user-select: none;
}

.mood-chip:hover {
    transform: scale(1.2);
    background: rgba(255, 255, 255, 0.8);
}

.mood-chip.active {
    background: var(--rui-purple) !important;
    color: white !important;
    box-shadow: 0 4px 12px rgba(106, 90, 205, 0.4);
    transform: scale(1.25);
    border: 2px solid white;
}

#new-diary-text {
    width: 100%;
    border: none;
    background: rgba(255, 255, 255, 0.5);
    border-radius: 16px;
    padding: 16px;
    font-family: inherit;
    font-size: 0.95rem;
    resize: none;
    outline: none;
    margin-bottom: 20px;
    transition: background 0.2s;
}

#new-diary-text:focus {
    background: rgba(255, 255, 255, 0.8);
}

.diary-actions {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.file-label {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 18px;
    background: white;
    border-radius: 30px;
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--rui-purple);
    cursor: pointer;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
    transition: all 0.2s;
}

.file-label:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(157, 141, 241, 0.2);
}

/* .add-btn styles consolidated and moved to line 1871 */

/* Image Preview */
.image-preview-area {
    margin-top: 20px;
    padding-top: 20px;
    border-top: 1px dashed rgba(157, 141, 241, 0.3);
}

.preview-container {
    position: relative;
    display: inline-block;
    margin-top: 8px;
}

#diary-preview-img {
    max-height: 180px;
    border-radius: 16px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.remove-preview-btn {
    position: absolute;
    top: -10px;
    right: -10px;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: #ff6b6b;
    color: white;
    border: 2px solid white;
    font-size: 12px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Timeline/List */
.diary-list-section {
    position: relative;
}

.section-divider {
    text-align: center;
    margin-bottom: 30px;
    position: relative;
}

.section-divider::before {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    top: 50%;
    height: 1px;
    background: rgba(157, 141, 241, 0.2);
    z-index: 1;
}

.section-divider span {
    background: #ebedee;
    /* Matches body bg */
    padding: 0 20px;
    position: relative;
    z-index: 2;
    font-size: 0.75rem;
    font-weight: 800;
    color: var(--ink-sub);
    text-transform: uppercase;
    letter-spacing: 2px;
}

.diary-timeline {
    display: flex;
    flex-direction: column;
    gap: 24px;
    padding: 0;
    margin: 0;
}

/* Timeline Cards */
.diary-item-card {
    position: relative;
    padding: 20px;
    border-radius: 20px;
    background: white;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.03);
    transition: all 0.3s ease;
}

.diary-item-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 25px rgba(157, 141, 241, 0.1);
}

.diary-item-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
}

.diary-item-date {
    font-size: 0.85rem;
    font-weight: 800;
    color: var(--ink-sub);
}

.diary-item-mood {
    font-size: 1.2rem;
}

.diary-item-text {
    font-size: 1rem;
    line-height: 1.6;
    color: var(--ink);
    white-space: pre-wrap;
    margin-bottom: 15px;
}

.diary-item-img {
    width: 100%;
    max-height: 300px;
    object-fit: cover;
    border-radius: 12px;
    margin-bottom: 15px;
}

.diary-item-footer {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    margin-top: 10px;
    opacity: 1;
    /* Always visible */
    transition: opacity 0.2s;
}

.diary-item-card:hover .diary-item-footer {
    opacity: 1;
}

/* --- ZEN & DETOX --- */
.zen-tabs {
    display: flex;
    justify-content: center;
    gap: 12px;
    margin-bottom: 24px;
}

.zen-tab-btn {
    background: rgba(255, 255, 255, 0.4);
    border: 1px solid rgba(255, 255, 255, 0.2);
    padding: 8px 20px;
    border-radius: 20px;
    font-weight: 800;
    font-size: 0.85rem;
    cursor: pointer;
    transition: all 0.2s;
    color: var(--ink-sub);
}

.zen-tab-btn.active {
    background: var(--rui-purple);
    color: white;
    box-shadow: 0 4px 12px rgba(157, 141, 241, 0.3);
}

.zen-sub-view {
    display: none;
    animation: fadeIn 0.4s ease;
}

.zen-sub-view.active {
    display: flex !important;
    flex-direction: column;
    justify-content: flex-start;
    /* Move to top */
    align-items: stretch;
    flex: 1;
    width: 100%;
    padding-top: 40px;
    /* Slightly reduced top padding to give more room above the panel */
    /* Space from header/tabs to push it to upper area */
}

.zen-main-panel {
    min-height: 500px;
    width: 100%;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    /* Changed from center to move content up */
    /* Thick Glass */
    background: rgba(255, 255, 255, 0.02) !important;
    backdrop-filter: blur(24px) !important;
    -webkit-backdrop-filter: blur(24px) !important;
    border: 1px solid rgba(255, 255, 255, 0.5) !important;

    /* Inner Glow & Shadow */
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.4),
        inset 0 0 20px rgba(255, 255, 255, 0.1),
        0 8px 32px rgba(0, 0, 0, 0.1) !important;

    text-align: center;
    position: relative;
    z-index: 10;
    overflow: hidden;
    padding: 60px 24px;
    border-radius: 24px;
}

.zen-main-panel::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 30%;
    background: linear-gradient(to bottom, rgba(255, 255, 255, 0.15) 0%, transparent 100%);
    pointer-events: none;
    z-index: 1;
}

/* Precise Layout for Breathing */
.zen-breathing-layout {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    /* Ensure orb stays centered in its layout */
    gap: 30px;
    /* Spacing between circle and controls - tighter */
    flex: 1;
}

#zen-circle-container {
    position: relative;
    width: 240px;
    height: 240px;
    display: grid;
    place-items: center;
    margin: 0 auto;
}

#zen-instruction {
    grid-area: 1 / 1;
    place-self: center;
    /* Absolute precision center in Grid */
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10;
    font-size: 1.2rem;
    font-weight: 900;
    color: var(--rui-purple);
    letter-spacing: 2px;
    pointer-events: none;
    text-align: center;
    text-shadow: 0 2px 4px rgba(255, 255, 255, 0.5);
    margin: 0;
    line-height: 1;
}

.zen-controls-area {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
    z-index: 20;
}

@keyframes zenPulse {

    0%,
    100% {
        transform: scale(1);
        opacity: 0.3;
    }

    50% {
        transform: scale(1.3);
        opacity: 0.6;
    }
}

.zen-circle {
    grid-area: 1 / 1;
    width: 120px;
    height: 120px;
    background: radial-gradient(circle at 30% 30%, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0.05) 100%);
    border-radius: 50%;
    box-shadow:
        0 0 40px rgba(157, 141, 241, 0.2),
        inset 0 0 10px rgba(255, 255, 255, 0.5);
    border: 1px solid rgba(255, 255, 255, 0.5);
    transition: all 4s cubic-bezier(0.4, 0, 0.2, 1);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    z-index: 1;
    place-self: center;
    position: relative;
    overflow: hidden;
}

.zen-circle::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 40%;
    background: linear-gradient(to bottom, rgba(255, 255, 255, 0.3) 0%, transparent 100%);
    pointer-events: none;
    z-index: 2;
}

.zen-circle.inhale {
    width: 240px;
    height: 240px;
    box-shadow:
        0 0 60px rgba(157, 141, 241, 0.4),
        0 0 100px rgba(100, 210, 255, 0.3),
        inset 0 0 20px rgba(255, 255, 255, 0.6);
    border: 1.5px solid rgba(255, 255, 255, 0.6);
}

.zen-circle::after {
    content: '';
    position: absolute;
    top: -10%;
    left: -10%;
    right: -10%;
    bottom: -10%;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(157, 141, 241, 0.1) 0%, transparent 70%);
    animation: zenPulse 8s infinite ease-in-out;
    z-index: -1;
}

#zen-timer-display {
    font-size: 2.5rem;
    font-weight: 900;
    color: var(--rui-purple);
    margin-bottom: 10px;
}

/* Mind Dump Area */
#zen-dump-input {
    width: 100%;
    background: rgba(255, 255, 255, 0.4);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 16px;
    padding: 20px;
    font-size: 1rem;
    color: var(--ink);
    resize: none;
    transition: all 0.3s;
}

#zen-dump-input:focus {
    background: rgba(255, 255, 255, 0.6);
    outline: none;
    border-color: var(--rui-purple);
}

.burn-btn {
    background: linear-gradient(135deg, #ff9a9e 0%, #fecfef 99%, #fecfef 100%);
    border: none;
    padding: 14px 40px;
    border-radius: 30px;
    font-weight: 900;
    color: #ce3b88;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 8px;
    box-shadow: 0 4px 15px rgba(255, 154, 158, 0.4);
    transition: all 0.3s;
}

.burn-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(255, 154, 158, 0.6);
}

.burn-btn:active {
    transform: translateY(0);
}

.burning {
    animation: shake 0.3s infinite, fadeOut 1.5s forwards;
    pointer-events: none;
}

@keyframes shake {
    0% {
        transform: translate(1px, 1px) rotate(0deg);
    }

    10% {
        transform: translate(-1px, -2px) rotate(-1deg);
    }

    20% {
        transform: translate(-3px, 0px) rotate(1deg);
    }

    30% {
        transform: translate(3px, 2px) rotate(0deg);
    }

    40% {
        transform: translate(1px, -1px) rotate(1deg);
    }
}

@keyframes fadeOut {
    to {
        opacity: 0;
        transform: scale(0.9) translateY(-20px);
    }
}

/* History List */
#zen-history-list {
    width: 100%;
    margin-top: 20px;
    text-align: left;
}

.zen-history-item {
    background: rgba(255, 255, 255, 0.5);
    border-radius: 12px;
    padding: 15px;
    margin-bottom: 12px;
    border: 1px solid rgba(157, 141, 241, 0.1);
    animation: slideUp 0.3s ease;
}

.zen-history-date {
    font-size: 0.75rem;
    font-weight: 800;
    color: var(--rui-purple);
    margin-bottom: 6px;
    display: block;
}

.zen-history-text {
    font-size: 0.9rem;
    line-height: 1.5;
    color: var(--ink);
    white-space: pre-wrap;
}

@keyframes slideUp {
    from {
        opacity: 0;
        transform: translateY(10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* --- Zen Liquid/Glass Theme --- */

/* Full-screen Background Layer */
.zen-bg-layer {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 0;
    background-size: cover;
    background-position: center;
    transition: opacity 1s ease-in-out;
    opacity: 0.2;
    /* Default faint opacity */
    pointer-events: none;
}

.zen-bg-layer.active {
    opacity: 1;
    /* Full visibility when active */
}

/* Consolidated into upper definition */

/* Theme Selection Grid */
.zen-theme-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 15px;
    width: 100%;
}

.zen-theme-card {
    position: relative;
    aspect-ratio: 1/1;
    border-radius: 20px;
    overflow: hidden;
    cursor: pointer;
    /* Refined Glass Border */
    border: 1px solid rgba(255, 255, 255, 0.5);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}

.zen-theme-card img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}

.zen-theme-card .theme-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(0px);
    transition: all 0.3s ease;
}

.zen-theme-card span {
    color: white;
    font-weight: 800;
    font-size: 1rem;
    letter-spacing: 2px;
    text-shadow: 0 2px 5px rgba(0, 0, 0, 0.5);
    z-index: 5;
    opacity: 0.9;
}

.zen-theme-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.2);
    border-color: #fff;
}

.zen-theme-card:hover img {
    transform: scale(1.1);
}

.zen-theme-card.active {
    border-color: #fff;
    box-shadow: 0 0 20px rgba(255, 255, 255, 0.6);
}

.zen-theme-card.active .theme-overlay {
    background: rgba(157, 141, 241, 0.3);
    /* Purple tint */
    backdrop-filter: blur(2px);
}

/* --- Active Meditation Layout (Reference Match) --- */
/* --- Active Meditation Layout (Reference Match) --- */
.meditation-active-ui {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    height: 100%;
    animation: fadeIn 1s ease;
    padding: 30px 20px 40px;
    position: relative;
    z-index: 20;
}

/* Central Orb */
.zen-orb-container {
    flex-grow: 1;
    display: grid;
    place-items: center;
    /* Perfect overlap */
    width: 100%;
    position: relative;
    min-height: 400px;
}

.zen-liquid-orb {
    grid-area: 1 / 1;
    /* Explicit dimensions to prevent squashing */
    width: 280px;
    height: 280px;
    max-width: 80vw !important;
    max-height: 80vw !important;
    border-radius: 50%;
    /* Ensure perfect circle */
    aspect-ratio: 1/1 !important;

    /* Center content */
    display: flex;
    align-items: center;
    justify-content: center;

    /* Pure Crystal Glass Style */
    background: radial-gradient(120% 120% at 30% 30%, rgba(255, 255, 255, 0.5) 0%, rgba(255, 255, 255, 0.1) 50%, rgba(255, 255, 255, 0.02) 100%) !important;
    backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px) !important;

    border: 1px solid rgba(255, 255, 255, 0.65);

    /* Crystal Volume & Thickness */
    box-shadow:
        /* Sharp Highlight (Rim) */
        inset 2px 2px 4px rgba(255, 255, 255, 0.8),
        /* Soft Inner Light */
        inset 0 0 30px rgba(255, 255, 255, 0.3),
        /* Bottom-Right Shade */
        inset -10px -10px 40px rgba(0, 0, 0, 0.15),
        /* Drop Shadow */
        0 20px 40px rgba(0, 0, 0, 0.2);

    position: relative;
    overflow: hidden;
}

/* REAL LENS EFFECT: Magnified Background */


.zen-liquid-orb::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 40%;
    background: linear-gradient(to bottom, rgba(255, 255, 255, 0.3) 0%, transparent 100%);
    pointer-events: none;
    z-index: 2;
}

.zen-orb-content {
    grid-area: 1 / 1;
    place-self: center;
    /* Precise grid centering */
    z-index: 5;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

@keyframes orbBreathe {

    0%,
    100% {
        transform: scale(0.95);
        opacity: 0.9;
    }

    50% {
        transform: scale(1.05);
        opacity: 1;
    }
}

/* Timer inside Orb - Clean and Sharp */
/* Timer inside Orb - Clean and Sharp */
#med-timer-display {
    font-size: 3.5rem;
    font-weight: 300;
    /* Thinner font for elegance */
    color: #fff;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
    z-index: 10;
    font-variant-numeric: tabular-nums;
    letter-spacing: 2px;
}

/* --- Zen Glass Card (New Bottom Controls) --- */
.med-glass-card {
    position: absolute;
    bottom: 20px;
    /* Lowered */
    left: 50%;
    transform: translateX(-50%) translateZ(0);
    /* Clean clipping */
    width: 90%;
    max-width: 350px;
    min-height: 250px;
    /* Increased */
    height: auto;

    /* Base Layout & Border Only */
    border-radius: 40px;
    border: 1px solid rgba(255, 255, 255, 0.3);
    overflow: hidden;
    /* Ensure pseudo stays inside */

    /* Deep Glass Shadow */
    box-shadow:
        inset 0 0 20px rgba(255, 255, 255, 0.2),
        0 15px 35px rgba(0, 0, 0, 0.2);

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    padding: 30px 25px 40px 25px;
    /* Added bottom padding */
    z-index: 100;
}

/* Glass Layer with Center Hole (Masking) */
.med-glass-card::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    border-radius: inherit;
    /* Prevent sharp corners */

    /* Frozen Glass Aesthetic */
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0.05));
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);

    /* Mask: Transparent Center (No Blur), Opaque Edges (Blur) */
    -webkit-mask-image: radial-gradient(circle at center, transparent 30%, black 80%);
    mask-image: radial-gradient(circle at center, transparent 30%, black 80%);
}

/* Close Button (Top Left Corner) */
.med-back-btn-corner {
    position: absolute;
    top: 20px;
    left: 20px;
    width: 40px;
    height: 40px;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s ease;
    backdrop-filter: blur(5px);
}

.med-back-btn-corner:active {
    transform: scale(0.95);
    background: rgba(255, 255, 255, 0.2);
}

/* Timer Display (Large, Centered) */
.med-card-timer-area {
    margin-top: 20px;
    text-align: center;
}

#med-timer-display-card {
    font-size: 3.5rem;
    font-weight: 200;
    /* Thin/Light font for elegance */
    color: white;
    letter-spacing: 2px;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    font-family: 'Inter', sans-serif;
    /* Ensure clean font */
}

/* Progress Bar Container */
.med-progress-container {
    width: 100%;
    margin-top: 10px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

/* Progress Track */
.med-progress-bar {
    width: 100%;
    height: 6px;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 10px;
    position: relative;
    overflow: hidden;
}

/* Progress Fill (Pseudo-element) */
.med-progress-bar::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: var(--progress, 0%);
    /* Controlled by JS */
    background: white;
    box-shadow: 0 0 10px rgba(255, 255, 255, 0.8);
    border-radius: 10px;
    transition: width 1s linear;
}

/* Time Labels (Elapsed / Total) */
.med-progress-labels {
    display: flex;
    justify-content: space-between;
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.7);
    font-weight: 500;
}

/* Play/Pause Button (Bottom Center) */
.med-card-controls {
    margin-bottom: 5px;
}

.med-play-btn {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.5);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    backdrop-filter: blur(10px);
    box-shadow:
        inset 0 0 10px rgba(255, 255, 255, 0.2),
        0 8px 20px rgba(0, 0, 0, 0.2);
    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.med-play-btn:active {
    transform: scale(0.9);
}

.med-play-btn span {
    font-size: 2rem;
}

/* Bottom Glass Capsule */
/* Bottom Glass Capsule */
.med-glass-capsule {
    /* Thick Glass Capsule */
    background: rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(30px);
    -webkit-backdrop-filter: blur(30px);
    padding: 25px 40px;
    border-radius: 40px;
    border: 1px solid rgba(255, 255, 255, 0.5);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.4),
        /* Top inner rim */
        0 10px 40px rgba(0, 0, 0, 0.15);

    display: flex;
    flex-direction: column;
    align-items: center;
    width: 85%;
    max-width: 340px;
    gap: 15px;
    z-index: 50;
    /* Ensure above orb */
    margin-top: auto;
    /* Push to bottom */
}

/* Bottom Glass Capsule Text */
#med-instruction {
    color: rgba(255, 255, 255, 0.9);
    font-size: 0.95rem;
    font-weight: 600;
    letter-spacing: 2px;
    text-transform: uppercase;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
    margin: 0;
}

.med-control-btn {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.15);
    border: 1px solid rgba(255, 255, 255, 0.4);
    color: white;
    font-size: 1.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}

.med-control-btn:hover {
    background: rgba(255, 255, 255, 0.3);
    transform: scale(1.1);
    box-shadow: 0 8px 25px rgba(255, 255, 255, 0.2);
}

.med-control-btn:active {
    transform: scale(0.95);
}

.meditation-timer-setup {
    padding-top: 50px;
    /* Shift everything down */
    width: 100%;
}

.med-timer-options,
.med-sound-options {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin-bottom: 10px;
}

.med-opt-btn,
.med-sound-btn {
    background: rgba(255, 255, 255, 0.2);
    border: 1px solid rgba(255, 255, 255, 0.3);
    padding: 12px 18px;
    border-radius: 16px;
    font-weight: 800;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    color: var(--ink-sub);
    flex: 1;
    max-width: 100px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
}

.med-opt-btn:hover,
.med-sound-btn:hover {
    background: rgba(255, 255, 255, 0.4);
    transform: translateY(-2px);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
}

.med-opt-btn.active,
.med-sound-btn.active {
    background: linear-gradient(135deg, var(--rui-purple), var(--rui-blue));
    color: white;
    border-color: transparent;
    box-shadow: 0 8px 20px rgba(157, 141, 241, 0.4);
}

.meditation-active-ui {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    animation: fadeIn 1s ease;
    padding-top: 0;
    position: relative;
    z-index: 20;
    /* Above background */
}

.med-glass-capsule {
    background: rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(30px);
    -webkit-backdrop-filter: blur(30px);
    padding: 30px 50px;
    border-radius: 40px;
    border: 1px solid rgba(255, 255, 255, 0.5);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.4),
        0 10px 40px rgba(0, 0, 0, 0.15);
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* ========================================
   﨟樊凾繝ｻ・ｽE繝ｻ・ｽEMEMORY SECTION STYLES
   ======================================== */



/* Memory Grid Layout */
.memory-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 24px;
    margin-top: 20px;
}

@media (max-width: 480px) {
    .memory-grid {
        grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
        gap: 12px;
    }
}

/* Memory Card Styles (Glassmorphism Pilot) */
.memory-card-item {
    background: var(--glass-bg) !important;
    backdrop-filter: var(--glass-blur) !important;
    -webkit-backdrop-filter: var(--glass-blur) !important;
    border-radius: 28px !important;
    overflow: hidden;
    box-shadow: var(--glass-shadow), var(--glass-edge) !important;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1) !important;
    border: var(--glass-border) !important;
    display: flex;
    flex-direction: column;
}

.memory-card-item:hover {
    transform: translateY(-10px) scale(1.02) !important;
    box-shadow: 0 24px 64px rgba(157, 124, 243, 0.25), var(--glass-edge) !important;
    border-color: rgba(255, 255, 255, 0.8) !important;
}

.memory-card-item .memory-card-info {
    background: rgba(255, 255, 255, 0.15);
    /* Slightly more contrast */
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border-top: 1px solid rgba(255, 255, 255, 0.2);
}

/* Image Container */
.memory-image-container {
    position: relative;
    width: 100%;
    aspect-ratio: 4/3;
    overflow: hidden;
    background: #f8f9fa;
}

.memory-image-container img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Carousel Dots */
.carousel-dots {
    position: absolute;
    bottom: 15px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 10px;
    z-index: 10;
    padding: 8px 12px;
    background: rgba(0, 0, 0, 0.2);
    backdrop-filter: blur(5px);
    border-radius: 20px;
}

.dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.4);
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.dot.active {
    background: white;
    width: 20px;
    border-radius: 4px;
    box-shadow: 0 0 10px rgba(255, 255, 255, 0.5);
}

.memory-card-item:hover .memory-image-container img {
    transform: scale(1.05);
}

/* Card Body */
.memory-card-info {
    padding: 20px;
    flex: 1;
    display: flex;
    flex-direction: column;
}

.memory-header-row {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 10px;
    margin-bottom: 12px;
}

.memory-card-title {
    font-size: 1.15rem;
    font-weight: 900;
    color: var(--rui-purple);
    line-height: 1.3;
    letter-spacing: -0.01em;
}

.memory-card-date {
    font-size: 0.75rem;
    font-weight: 800;
    color: #aaa;
    white-space: nowrap;
    margin-top: 4px;
}

/* Tags */
.memory-card-tags {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 15px;
}

.tag-badge {
    padding: 4px 12px;
    background: rgba(157, 124, 243, 0.15);
    color: var(--rui-purple-accent);
    border-radius: 50px;
    font-size: 0.72rem;
    font-weight: 800;
    border: 1px solid rgba(157, 124, 243, 0.2);
    transition: all 0.2s;
}

.tag-badge:hover {
    background: var(--rui-purple);
    color: white;
    transform: translateY(-1px);
}

/* Notes */
.memory-card-notes {
    font-size: 0.85rem;
    color: #666;
    line-height: 1.6;
    margin-bottom: 15px;
    font-weight: 500;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Actions */
.memory-card-actions {
    margin-top: auto;
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    padding-top: 15px;
    border-top: 1px solid rgba(0, 0, 0, 0.03);
}

/* Drag and drop styles */
.memory-card-item[draggable='true'] {
    cursor: grab;
}

.memory-card-item[draggable='true']:active {
    cursor: grabbing;
}

/* 検 DREAM and MEMORY compact modal size override */
#dream-add-modal .panel,
#memory-add-modal .panel {
    width: 90% !important;
    max-width: 320px !important;
    margin: 0 !important;
}

.graph-tooltip {
    position: fixed;
    background: rgba(255, 255, 255, 0.95);
    border: 1px solid rgba(157, 124, 243, 0.2);
    border-radius: 12px;
    padding: 12px;
    font-size: 0.8rem;
    color: #444;
    pointer-events: none;
    z-index: 9999;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
    backdrop-filter: blur(8px);
    display: none;
    min-width: 140px;
    line-height: 1.5;
}

.graph-tooltip strong {
    color: var(--rui-purple);
    display: block;
    margin-bottom: 5px;
    font-size: 0.85rem;
}

.graph-tooltip .stat-row {
    display: flex;
    justify-content: space-between;
    margin-bottom: 3px;
}

/* GIFTING styles (moved here for safety) */
.header-action-btn {
    background: transparent;
    border: none;
    font-size: 24px;
    cursor: pointer;
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.2s;
}

.header-action-btn:active {
    transform: scale(0.9);
}

#gift-selection-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.4);
    z-index: 20000;
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(4px);
    animation: fadeIn 0.3s ease;
}

.gift-menu-panel {
    background: white;
    width: 90%;
    max-width: 320px;
    border-radius: 24px;
    padding: 24px;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.2);
    text-align: center;
}

.gift-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    margin-top: 16px;
}

.gift-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    padding: 8px;
    border-radius: 12px;
    transition: background 0.2s;
}

.gift-item:hover {
    background: #f0f0ff;
}

.gift-item img {
    width: 40px;
    height: 40px;
    object-fit: contain;
    image-rendering: pixelated;
}

.gift-item span {
    font-size: 0.7rem;
    font-weight: 700;
    color: var(--rui-purple);
}

.falling-gift {
    position: fixed;
    width: 32px;
    height: 32px;
    z-index: 7000;
    object-fit: contain;
    image-rendering: pixelated;
    pointer-events: none;
}

/* Memory Search Styles */
.memory-search-container {
    margin-bottom: 20px;
    position: relative;
}

.search-icon {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    opacity: 0.5;
    pointer-events: none;
}

.search-input {
    width: 100%;
    padding: 10px 10px 10px 38px;
    border-radius: 20px;
    border: 1px solid rgba(0, 0, 0, 0.1);
    background: rgba(255, 255, 255, 0.7);
    font-size: 0.95rem;
    backdrop-filter: blur(5px);
    transition: all 0.2s ease;
    outline: none;
}

.search-input:focus {
    border-color: var(--rui-purple);
    background: rgba(255, 255, 255, 0.9);
}

@media (max-width: 480px) {
    .search-input {
        font-size: 16px !important;
        /* Prevent iOS auto-zoom */
    }
}

/* ========================================
   PREMIUM LOGIN SCREEN (OVERLAY)
   ======================================== */
#login-overlay {
    position: fixed;
    inset: 0;
    z-index: 20000;
    /* Top of everything */
    background: linear-gradient(135deg, #fdfcfb 0%, #e2d1c3 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: opacity 0.8s ease, visibility 0.8s;
    overflow: hidden;
}

#login-overlay::before {
    content: '';
    position: absolute;
    width: 150%;
    height: 150%;
    background: radial-gradient(circle, rgba(157, 124, 243, 0.1) 0%, transparent 60%);
    animation: slowRotate 20s linear infinite;
}

@keyframes slowRotate {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

.login-card {
    position: relative;
    width: 90%;
    max-width: 400px;
    padding: 60px 40px;
    background: rgba(255, 255, 255, 0.7);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-radius: 40px;
    border: 1px solid rgba(255, 255, 255, 0.5);
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.05);
    text-align: center;
    animation: floatUp 1s cubic-bezier(0.4, 0, 0.2, 1);
}

@keyframes floatUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.login-logo {
    margin-bottom: 40px;
}

.logo-emoji {
    font-size: 4rem;
    display: block;
    margin-bottom: 10px;
    filter: drop-shadow(0 4px 12px rgba(157, 124, 243, 0.3));
}

.login-header-img {
    width: 120px;
    height: auto;
    display: block;
    margin: 0 auto 15px auto;
    filter: drop-shadow(0 8px 16px rgba(157, 124, 243, 0.2));
}

.login-logo h1 {
    font-size: 2.5rem;
    font-weight: 900;
    margin: 0;
    background: linear-gradient(135deg, var(--rui-purple), #7cb9f3);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    letter-spacing: -1px;
}

.logo-subtitle {
    font-size: 0.9rem;
    color: #888;
    font-weight: 600;
    margin-top: 5px;
}

.login-description {
    margin-bottom: 40px;
    line-height: 1.8;
}

.login-description p {
    font-size: 0.95rem;
    color: var(--ink-sub);
    font-weight: 500;
}

.login-google-btn {
    width: 100%;
    background: white;
    border: 1px solid #ddd;
    border-radius: 16px;
    padding: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    font-weight: 700;
    font-size: 1rem;
    cursor: pointer;
    transition: all 0.3s;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.03);
    color: #444;
}

.login-google-btn:hover {
    background: #f8f9fa;
    border-color: #ccc;
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.06);
}

.login-google-btn img {
    width: 20px;
    height: 20px;
}

.login-footer {
    margin-top: 60px;
    font-size: 0.75rem;
    color: #bbb;
    letter-spacing: 1px;
}

/* Hide flow */
#login-overlay.fade-out {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

/* ========================================
   STICKY MOBILE HEADER
   ======================================== */
/* STICKY MOBILE HEADER redundant definition removed */

.hamburger-btn {
    background: transparent;
    border: none;
    font-size: 24px;
    color: var(--rui-purple);
    cursor: pointer;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    transition: background 0.2s;
}

.hamburger-btn:active {
    background: rgba(157, 124, 243, 0.1);
}

/* ========================================
   SHARED TAB SWITCHER (MEMORY & HEALTH)
   ======================================== */
.memory-tab-container,
.health-tab-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: rgba(255, 255, 255, 0.3);
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    border-radius: 30px;
    padding: 4px;
    margin: 0 auto 20px auto;
    position: relative;
    border: 1px solid rgba(255, 255, 255, 0.4);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.05);
    width: 320px;
}

@media (max-width: 480px) {

    .memory-tab-container,
    .health-tab-container {
        width: 100% !important;
        max-width: 400px;
    }
}

.memory-tab-slider,
.health-tab-slider {
    position: absolute;
    top: 4px;
    left: 4px;
    width: calc(50% - 4px);
    height: calc(100% - 8px);
    background: #ffffff;
    border-radius: 26px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
    z-index: 1;
}

.memory-tab-btn,
.health-tab-btn {
    flex: 1;
    border: none;
    background: transparent;
    padding: 12px 0;
    font-size: 0.9rem;
    font-weight: 700;
    color: #888;
    cursor: pointer;
    z-index: 2;
    position: relative;
    text-align: center;
    transition: color 0.3s ease;
    font-family: inherit;
    /* Fix floating font issue */
}

.memory-tab-btn.active,
.health-tab-btn.active {
    color: var(--rui-purple);
}

.memory-tab-btn:hover,
.health-tab-btn:hover {
    opacity: 0.8;
}

/* --- Zen Glass Player UI --- */
.glass-player-card {
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-radius: 40px;
    border: 1px solid rgba(255, 255, 255, 0.3);
    box-shadow:
        0 20px 50px rgba(0, 0, 0, 0.1),
        inset 0 0 0 1px rgba(255, 255, 255, 0.2);
    padding: 30px;
    width: 100%;
    max-width: 340px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 25px;
    position: relative;
    overflow: hidden;
    margin: 0 auto;
    /* Center horizontally */
}

/* Crystal Cover Art */
.crystal-cover-art {
    width: 240px;
    height: 240px;
    border-radius: 30px;
    background: linear-gradient(135deg, #e0c3fc 0%, #8ec5fc 100%);
    /* Default/Silent */
    box-shadow:
        0 15px 35px rgba(0, 0, 0, 0.15),
        inset 0 0 20px rgba(255, 255, 255, 0.4);
    position: relative;
    overflow: hidden;
    transition: all 0.5s ease;
    border: 1px solid rgba(255, 255, 255, 0.4);
}

.crystal-cover-art::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(to bottom, rgba(255, 255, 255, 0.4) 0%, transparent 60%);
    pointer-events: none;
}

/* Dynamic Cover Variations */
.crystal-cover-art[data-visual="rain"] {
    background: linear-gradient(180deg, #4facfe 0%, #00f2fe 100%);
}

.crystal-cover-art[data-visual="sea"] {
    background: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%);
}

.crystal-cover-art[data-visual="stars"] {
    background: linear-gradient(to top, #30cfd0 0%, #330867 100%);
}

/* Sound Name Overlay */
.cover-sound-label {
    position: absolute;
    bottom: 20px;
    left: 0;
    right: 0;
    text-align: center;
    color: white;
    font-weight: 800;
    font-size: 1.2rem;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
    letter-spacing: 1px;
    text-transform: uppercase;
}

/* Custom Range Slider */
.zen-slider-container {
    width: 100%;
    padding: 0 10px;
}

.zen-slider {
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    height: 6px;
    background: rgba(255, 255, 255, 0.3);
    border-radius: 5px;
    outline: none;
    transition: opacity 0.2s;
}

.zen-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: white;
    cursor: pointer;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
    border: 2px solid rgba(157, 141, 241, 0.5);
    transition: transform 0.2s;
}

.zen-slider::-webkit-slider-thumb:hover {
    transform: scale(1.2);
}

.time-display-row {
    display: flex;
    justify-content: space-between;
    width: 100%;
    margin-top: -10px;
    padding: 0 5px;
}

.time-label {
    font-size: 0.75rem;
    color: var(--ink-sub);
    font-weight: 700;
}

.current-time-label {
    font-size: 1.2rem;
    color: var(--rui-purple);
    font-weight: 900;
}

/* Start Button override for player */
.player-start-btn {
    width: 100%;
    padding: 16px;
    border-radius: 20px;
    background: rgba(255, 255, 255, 0.25);
    border: 1px solid rgba(255, 255, 255, 0.4);
    color: var(--rui-purple);
    font-weight: 900;
    font-size: 1rem;
    letter-spacing: 2px;
    cursor: pointer;
    transition: all 0.3s;
    backdrop-filter: blur(4px);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
}

.player-start-btn:hover {
    background: rgba(255, 255, 255, 0.5);
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(157, 141, 241, 0.3);
}

/* Sound Selector Dots */
.sound-selector-row {
    display: flex;
    gap: 15px;
    margin-bottom: 5px;
}

.sound-dot {
    width: 40px;
    height: 40px;
    border-radius: 12px;
    border: 2px solid transparent;
    /* default */
    background: rgba(255, 255, 255, 0.3);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    transition: all 0.3s;
}

.sound-dot.active {
    border-color: var(--rui-purple);
    background: white;
    transform: scale(1.1);
    box-shadow: 0 4px 10px rgba(157, 141, 241, 0.3);
}

/* ========================================
   MOBILE FIXES (PERIOD INPUT)
   ======================================== */
.period-input-row {
    padding: 16px !important;
    box-sizing: border-box;
}

@media (max-width: 480px) {
    .period-input-row {
        flex-wrap: wrap;
        gap: 12px !important;
    }

    .period-input-row>div:first-child {
        flex: 0 0 100% !important;
        /* Override inline flex:1 */
        width: 100%;
        margin-bottom: 10px;
    }

    .period-input-row button#btn-addPeriod {
        width: 100%;
        max-width: 100%;
    }
}

/* Legacy Chat Styles Purged for Unification into chat_custom.css */


/* Layout Optimizations (Reduce Frame) */
.panel,
.glass-panel {
    padding: 15px !important;
    /* Slightly reduced */
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    /* Thinner/lighter border */
    box-shadow: none !important;
    /* Remove heavy shadow */
    margin-bottom: 12px !important;
}

/* Period Button Fix */
.period-input-row button#btn-addPeriod {
    width: 100% !important;
    max-width: 100% !important;
    margin: 10px 0 0 0 !important;
    box-sizing: border-box !important;
}

.period-input-row {
    padding: 12px !important;
    /* Reduce inner padding */
}

/* Text Expand Button */
.text-expand-btn {
    padding: 4px 10px !important;
    font-size: 0.7rem !important;
    border-radius: 20px !important;
    opacity: 0.6;
    transition: opacity 0.2s;
}

.text-expand-btn:hover {
    opacity: 1;
}

/* Chat Preview Strip (multiple attachments) */
.preview-strip {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    padding: 8px 12px;
    scrollbar-width: thin;
}

.preview-token {
    position: relative;
    flex-shrink: 0;
    width: 64px;
    height: 64px;
    border-radius: 12px;
    overflow: hidden;
    background: rgba(0, 0, 0, 0.05);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.preview-token img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.preview-close {
    position: absolute;
    top: 2px;
    right: 2px;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.55);
    color: white;
    border: none;
    font-size: 11px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    padding: 0;
    transition: background 0.2s;
}

.preview-close:hover {
    background: #ff4757;
}