@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@300;400;500;600;700&display=swap');:root{--bg-main:#ffffff;--bg-secondary:#F9FAFB;--bg-tertiary:#F3F4F6;--bg-card:#ffffff;--bg-primary:#ffffff;--cta:#F43F5E;--cta-light:#FB7185;--cta-soft:#fecdd3;--cta-pale:#fff1f2;--cta-dark:#E11D48;--pink-500:#EC4899;--pink-600:#DB2777;--primary:#F43F5E;--primary-light:#FB7185;--primary-dark:#E11D48;--text-primary:#111827;--text-secondary:#6B7280;--text-muted:#9CA3AF;--text-light:#9CA3AF;--text-placeholder:#D1D5DB;--border:#E5E7EB;--border-light:#F3F4F6;--border-focus:#FDA4AF;--mood-happy:#FB7185;--mood-calm:#9CA3AF;--mood-excited:#FBBF24;--mood-tired:#94A3B8;--mood-sad:#7DD3FC;--mood-anxious:#FDBA74;--mood-neutral:#D1D5DB;--success:#6B7280;--peach-dark:#6B7280;--shadow-xs:0 1px 3px rgba(0,0,0,0.04),0 1px 2px rgba(0,0,0,0.02);--shadow-sm:0 1px 3px rgba(0,0,0,0.04),0 1px 2px rgba(0,0,0,0.02);--shadow-md:0 4px 12px rgba(0,0,0,0.06),0 2px 4px rgba(0,0,0,0.03);--shadow-lg:0 8px 24px rgba(0,0,0,0.08);--shadow-xl:0 8px 24px rgba(0,0,0,0.08);--shadow-cta:0 1px 2px rgba(244,63,94,0.15);--shadow-cta-hover:0 4px 12px rgba(244,63,94,0.25);--radius-sm:8px;--radius:8px;--radius-md:12px;--radius-lg:16px;--radius-xl:20px;--radius-full:9999px;--gradient-cta:linear-gradient(135deg,#F43F5E 0%,#EC4899 100%);--gradient-cta-hover:linear-gradient(135deg,#E11D48 0%,#DB2777 100%);--ease-out:cubic-bezier(0.4,0,0.2,1);--ease-in:cubic-bezier(0.4,0,1,1);--ease-soft:cubic-bezier(0.4,0,0.2,1);--duration-fast:150ms;--duration-normal:200ms;}
*{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{font-family:-apple-system,BlinkMacSystemFont,'Segoe UI Emoji','Segoe UI Symbol','Noto Color Emoji','Apple Color Emoji','Noto Sans SC','Varela Round',sans-serif;background:var(--gradient-warm);background-attachment:fixed;color:var(--text-primary);line-height:1.6;min-height:100vh;padding-bottom:120px;position:relative;overflow-x:hidden;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;}
.deco-balls{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden;}
.deco-ball{position:absolute;border-radius:50%;filter:blur(60px);opacity:0.35;}
.deco-ball:nth-child(1){width:300px;height:300px;background:linear-gradient(135deg,#FF6B8A,#FF85A2);top:-100px;right:-80px;}
.deco-ball:nth-child(2){width:250px;height:250px;background:linear-gradient(135deg,#7FDBCB,#B8EDE3);top:40%;left:-100px;}
.deco-ball:nth-child(3){width:200px;height:200px;background:linear-gradient(135deg,#C9B6E4,#DDD0EC);bottom:20%;right:-60px;}
.deco-ball:nth-child(4){width:180px;height:180px;background:linear-gradient(135deg,#FFCBA4,#FFE0C7);top:60%;left:10%;}
.deco-ball:nth-child(5){width:150px;height:150px;background:linear-gradient(135deg,#FFE66D,#FFF0A8);top:20%;left:40%;}
.sparkle{position:fixed;pointer-events:none;z-index:0;}
.sparkle::before{content:'✦';font-size:1.2rem;background:var(--gradient-rainbow);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;}
.sparkle:nth-child(6){top:15%;left:8%;}
.sparkle:nth-child(7){top:35%;right:12%;}
.sparkle:nth-child(8){top:55%;left:15%;}
.sparkle:nth-child(9){top:75%;right:8%;}
.sparkle:nth-child(10){top:25%;left:60%;}
@keyframes fadeIn{from{opacity:0;}
to{opacity:1;}}
@keyframes fadeUp{from{opacity:0;transform:translateY(10px);}
to{opacity:1;transform:translateY(0);}}
@keyframes slideIn{from{opacity:0;transform:translateY(-8px);}
to{opacity:1;transform:translateY(0);}}
.animate-item{animation:fadeUp 0.4s var(--ease-out) both;}
.animate-item:nth-child(1){animation-delay:0.05s;}
.animate-item:nth-child(2){animation-delay:0.1s;}
.animate-item:nth-child(3){animation-delay:0.15s;}
.animate-item:nth-child(4){animation-delay:0.2s;}
.animate-item:nth-child(5){animation-delay:0.25s;}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:0.01ms !important;transition-duration:0.01ms !important;}}
.bg-warm-gradient{position:fixed;inset:0;z-index:-1;background:var(--bg-secondary);}
.header{background:rgba(255,248,245,0.85);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border-bottom:1px solid var(--border);padding:1rem 1.5rem;position:relative;z-index:100;box-shadow:var(--shadow-xs);}
.header-content{max-width:680px;margin:0 auto;display:flex;justify-content:space-between;align-items:center;}
.logo{display:flex;align-items:center;gap:1rem;}
.logo-icon{width:42px;height:42px;background:var(--gradient-cta);border-radius:14px;display:flex;align-items:center;justify-content:center;color:white;font-size:1.2rem;font-weight:600;transition:all var(--duration-normal) var(--ease-bounce);box-shadow:0 4px 12px rgba(255,107,138,0.3);}
.logo-icon:hover{transform:scale(1.1) rotate(-5deg);box-shadow:0 6px 20px rgba(255,107,138,0.5);}
.logo-text{font-size:1.75rem;font-weight:700;color:var(--text-primary);letter-spacing:-0.02em;line-height:1.2;}
.logo-text .tagline{font-size:0.75rem;color:var(--text-secondary);font-weight:400;display:block;margin-top:6px;letter-spacing:0.02em;}
.header-actions{display:flex;gap:0.5rem;}
.btn{display:inline-flex;align-items:center;gap:0.5rem;padding:0.625rem 1rem;border-radius:var(--radius-md);font-size:0.875rem;font-weight:600;cursor:pointer;transition:all var(--duration-normal) var(--ease-out);border:1px solid var(--border);font-family:inherit;background:var(--bg-card);color:var(--text-secondary);}
.btn:hover{background:var(--bg-tertiary);border-color:var(--text-light);}
.btn:active{transform:scale(0.98);}
.btn-primary{background:var(--gradient-cta);color:white;border:none;box-shadow:var(--shadow-cta);border-radius:var(--radius-lg);position:relative;overflow:hidden;}
.btn-primary::before{content:'';position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,0.3),transparent);transition:left 0.5s;}
.btn-primary:hover::before{left:100%;}
.btn-primary:hover{background:var(--gradient-cta-hover);box-shadow:var(--shadow-cta-hover);transform:translateY(-2px) scale(1.02);}
.btn-primary:active{transform:translateY(0) scale(0.97);}
.btn-secondary{background:var(--bg-card);color:var(--text-secondary);border:1px solid var(--border);box-shadow:var(--shadow-xs);}
.btn-secondary:hover{background:var(--bg-tertiary);border-color:var(--text-light);}
.btn-ghost{background:transparent;color:var(--text-muted);border:none;}
.btn-ghost:hover{background:var(--bg-tertiary);color:var(--text-secondary);}
.btn svg{width:16px;height:16px;flex-shrink:0;}
.main{max-width:680px;margin:0 auto;padding:1.5rem 1.25rem calc(3rem + env(safe-area-inset-bottom));overflow-x:hidden;}
.date-nav{display:flex;align-items:center;justify-content:center;gap:1.5rem;margin-bottom:1.5rem;padding:1.75rem 2rem;background:var(--gradient-card);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border-radius:var(--radius-xl);border:1px solid var(--border);box-shadow:var(--shadow-sm),inset 0 1px 0 rgba(255,255,255,0.6);position:relative;overflow:hidden;}
.date-nav::after{content:'';position:absolute;bottom:0;left:10%;right:10%;height:2px;background:var(--gradient-rainbow);opacity:0.4;border-radius:2px;}
.date-nav-btn{width:44px;height:44px;border-radius:var(--radius-lg);display:flex;align-items:center;justify-content:center;background:var(--bg-card);border:2px solid var(--border);cursor:pointer;transition:all var(--duration-normal) var(--ease-bounce);color:var(--text-secondary);flex-shrink:0;}
.date-nav-btn:hover{background:var(--gradient-cta);color:white;border-color:transparent;box-shadow:var(--shadow-cta);transform:scale(1.1);}
.date-nav-btn:active{transform:scale(0.95);}
.current-date{text-align:center;min-width:120px;}
.current-date .day{font-size:2.75rem;font-weight:700;color:var(--text-primary);line-height:1;letter-spacing:-0.02em;display:inline-block;min-width:2ch;text-align:center;}
.current-date .day.is-today{font-size:3rem;color:var(--cta);filter:drop-shadow(0 2px 8px rgba(255,107,138,0.3));}
.current-date .day.is-future{color:var(--text-secondary);}
.current-date .day.is-past{color:var(--text-muted);}
.current-date .date-full{font-size:0.8rem;color:var(--text-muted);margin-top:0.35rem;font-weight:400;}
.current-date .date-full.is-today{color:var(--text-secondary);font-weight:500;}
.current-date .day.is-future{color:var(--text-secondary);}
.current-date .date-full.is-future{color:var(--text-muted);}
.current-date .day.is-past{color:var(--text-muted);}
.current-date .date-full.is-past{color:var(--text-light);}
.today-label{display:none;}
.quick-actions{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem;margin-bottom:1.5rem;}
.quick-action-card{background:var(--gradient-card);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border:1px solid var(--border);border-radius:var(--radius-xl);padding:1.5rem 1rem;cursor:pointer;transition:all var(--duration-normal) var(--ease-bounce);box-shadow:var(--shadow-xs),inset 0 1px 0 rgba(255,255,255,0.5);text-align:center;position:relative;overflow:hidden;}
.quick-action-card::before{content:'';position:absolute;top:0;left:0;right:0;height:3px;background:var(--gradient-rainbow);opacity:0.3;}
.quick-action-card:hover{border-color:var(--cta-soft);box-shadow:var(--shadow-md),inset 0 1px 0 rgba(255,255,255,0.7);transform:translateY(-5px) scale(1.03);}
.quick-action-card .icon{width:40px;height:40px;border-radius:var(--radius);display:flex;align-items:center;justify-content:center;margin:0 auto 0.75rem;transition:transform var(--duration-normal) var(--ease-out);}
.quick-action-card:hover .icon{transform:scale(1.08);}
.quick-action-card .icon svg{width:20px;height:20px;}
.quick-action-card .icon.coral{background:linear-gradient(135deg,var(--cta-pale),var(--cta-soft));color:var(--cta);}
.quick-action-card .icon.green{background:linear-gradient(135deg,var(--mint-pale),var(--mint-light));color:var(--mint);}
.quick-action-card .icon.orange{background:linear-gradient(135deg,var(--peach-pale),var(--peach-light));color:var(--peach-dark);}
.quick-action-card .icon.lavender{background:linear-gradient(135deg,var(--lavender-pale),var(--lavender-light));color:var(--lavender);}
.quick-action-card h3{font-size:0.9rem;font-weight:600;margin-bottom:0.2rem;color:var(--text-primary);}
.quick-action-card p{font-size:0.75rem;color:var(--text-muted);}
.entry-section{background:var(--gradient-card);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border:1px solid var(--border);border-radius:var(--radius-xl);padding:1.5rem;margin-bottom:1.5rem;box-shadow:var(--shadow-sm),inset 0 1px 0 rgba(255,255,255,0.6);transition:all var(--duration-normal) var(--ease-out);}
.entry-section:hover{box-shadow:var(--shadow-md),inset 0 1px 0 rgba(255,255,255,0.8);transform:translateY(-2px);}
.entry-header{display:flex;align-items:center;gap:0.75rem;margin-bottom:1rem;}
.entry-header svg{width:20px;height:20px;color:var(--text-secondary);flex-shrink:0;}
.entry-header h2{font-size:1.0625rem;font-weight:600;color:var(--text-primary);letter-spacing:-0.01em;}
.entry-textarea{width:100%;min-height:100px;padding:1rem 1.25rem;border:2px solid var(--border);border-radius:var(--radius-lg);font-size:0.95rem;font-family:inherit;resize:vertical;transition:all var(--duration-normal) var(--ease-out);background:rgba(255,255,255,0.7);line-height:1.7;color:var(--text-primary);}
.entry-textarea:focus{outline:none;border-color:var(--cta-light);box-shadow:0 0 0 4px rgba(255,143,163,0.15);background:rgba(255,255,255,0.9);}
.entry-textarea::placeholder{color:var(--text-placeholder);font-style:italic;}
.entry-textarea.main-input{min-height:120px;font-size:1rem;}
.entry-footer{display:flex;justify-content:space-between;align-items:center;margin-top:1rem;flex-wrap:wrap;gap:0.75rem;}
.entry-tips{font-size:0.75rem;color:var(--text-light);flex:1;min-width:200px;}
.mood-selector{display:flex;gap:0.5rem;flex-wrap:wrap;}
.mood-selector-outer{display:flex;align-items:center;justify-content:center;gap:0.75rem;margin-bottom:1rem;}
.mood-btn{width:44px;height:44px;border:2px solid var(--border);border-radius:var(--radius-lg);background:var(--bg-card);cursor:pointer;font-size:1.4rem;display:flex;align-items:center;justify-content:center;transition:all var(--duration-fast) var(--ease-bounce);padding:0;}
.mood-btn:hover{border-color:var(--cta-light);background:var(--cta-pale);transform:scale(1.15) rotate(-5deg);box-shadow:0 4px 12px rgba(255,107,138,0.2);}
.mood-btn.selected{border-color:var(--cta);background:var(--gradient-cta);box-shadow:0 4px 16px rgba(255,107,138,0.3);transform:scale(1.1);}
.tag-selector{display:flex;gap:0.5rem;flex-wrap:wrap;margin-bottom:1rem;}
.tag-chip{padding:0.4rem 0.85rem;border-radius:var(--radius-full);font-size:0.8rem;border:1px solid var(--border);cursor:pointer;transition:all var(--duration-fast) var(--ease-bounce);color:var(--text-secondary);background:var(--bg-card);}
.tag-chip:hover{border-color:var(--cta-light);color:var(--cta);background:var(--cta-pale);transform:scale(1.05);}
.tag-chip.active{background:var(--gradient-cta);border-color:transparent;color:white;box-shadow:0 2px 8px rgba(255,107,138,0.25);}
.entries-section{margin-bottom:1.5rem;}
.section-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:0.75rem;padding-bottom:0.5rem;border-bottom:1px solid var(--border-light);}
.section-title{display:flex;align-items:center;gap:0.5rem;font-size:1.0625rem;font-weight:600;color:var(--text-primary);letter-spacing:-0.01em;}
.section-title svg{width:16px;height:16px;color:var(--text-muted);}
.entry-card{background:var(--gradient-card);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border:1px solid var(--border);border-radius:var(--radius-xl);padding:1.5rem;margin-bottom:1rem;transition:all var(--duration-normal) var(--ease-out);box-shadow:var(--shadow-xs),inset 0 1px 0 rgba(255,255,255,0.5);animation:bounceIn 0.5s var(--ease-out) both;position:relative;overflow:hidden;}
.entry-card::before{content:'';position:absolute;top:0;left:0;right:0;height:3px;background:var(--gradient-rainbow);opacity:0.6;border-radius:var(--radius-xl) var(--radius-xl) 0 0;}
.entry-card:hover{border-color:var(--cta-soft);box-shadow:var(--shadow-md),inset 0 1px 0 rgba(255,255,255,0.7);transform:translateY(-3px) scale(1.005);}
@keyframes bounceIn{0%{opacity:0;transform:translateY(20px) scale(0.95);}
60%{transform:translateY(-4px) scale(1.01);}
100%{opacity:1;transform:translateY(0) scale(1);}}
.entry-card-header{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:0.75rem;}
.entry-time{font-size:0.75rem;color:var(--text-muted);background:var(--bg-tertiary);padding:0.25rem 0.6rem;border-radius:var(--radius-sm);font-family:'SF Mono',monospace;}
.entry-content{font-size:0.95rem;color:var(--text-primary);white-space:pre-wrap;line-height:1.7;}
.entry-actions{display:flex;gap:0.5rem;margin-top:0.75rem;padding-top:0.75rem;border-top:1px solid var(--border-light);}
.entry-actions button{padding:0.35rem 0.75rem;font-size:0.8rem;}
.entry-star{color:var(--text-light);transition:all var(--duration-fast) var(--ease-out);cursor:pointer;}
.entry-star:hover{color:var(--cta);transform:scale(1.2);}
.entry-star.starred{color:var(--cta);}
.modal-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,0.25);backdrop-filter:blur(4px);display:flex;align-items:center;justify-content:center;z-index:1000;opacity:0;visibility:hidden;transition:all var(--duration-normal) var(--ease-out);padding:1rem;}
.modal-overlay.active{opacity:1;visibility:visible;}
.modal{background:#ffffff;border-radius:var(--radius-xl);width:100%;max-width:560px;max-height:90vh;overflow:hidden;transform:translateY(16px) scale(0.98);transition:all var(--duration-normal) var(--ease-out);box-shadow:var(--shadow-xl);border:1px solid var(--border);}
.modal-overlay.active .modal{transform:translateY(0) scale(1);}
.modal-header{display:flex;justify-content:space-between;align-items:center;padding:1.25rem 1.5rem;border-bottom:1px solid var(--border-light);background:#ffffff;}
.modal-title{display:flex;align-items:center;gap:0.75rem;font-size:1.05rem;font-weight:600;color:var(--text-primary);}
.modal-title svg{width:20px;height:20px;color:var(--text-secondary);}
.modal-close{width:32px;height:32px;border-radius:var(--radius);display:flex;align-items:center;justify-content:center;background:transparent;border:none;cursor:pointer;color:var(--text-muted);transition:all var(--duration-fast) var(--ease-out);}
.modal-close:hover{background:var(--bg-tertiary);color:var(--text-primary);}
.modal-body{padding:1.5rem;max-height:calc(90vh - 140px);overflow-y:auto;background:#ffffff;}
.modal-footer{padding:1rem 1.5rem;border-top:1px solid var(--border-light);display:flex;justify-content:flex-end;gap:0.75rem;background:#ffffff;}
.review-question{margin-bottom:1.25rem;}
.review-question label{display:block;font-weight:500;margin-bottom:0.5rem;color:var(--text-primary);font-size:0.9rem;}
.review-question label .hint{font-weight:400;color:var(--text-muted);font-size:0.8rem;}
.review-question input,.review-question textarea,.review-question select{width:100%;padding:0.75rem 1rem;border:1px solid var(--border);border-radius:var(--radius);font-size:0.9rem;transition:all var(--duration-fast) var(--ease-out);background:var(--bg-secondary);color:var(--text-primary);font-family:inherit;}
.review-question input:focus,.review-question textarea:focus,.review-question select:focus{outline:none;border-color:var(--border-focus);box-shadow:0 0 0 3px rgba(251,113,133,0.1);}
.review-question textarea{min-height:80px;resize:vertical;}
.ai-summary{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-lg);padding:1.5rem;margin-top:1rem;box-shadow:var(--shadow-sm);}
.ai-summary-header{display:flex;align-items:center;gap:0.5rem;margin-bottom:1rem;color:var(--text-secondary);font-weight:600;font-size:0.9rem;}
.ai-summary-header svg{width:18px;height:18px;color:var(--text-muted);}
.ai-summary-content{font-size:0.9rem;line-height:1.7;color:var(--text-primary);}
.ai-summary-content h4{color:var(--text-primary);margin-top:1rem;margin-bottom:0.5rem;font-size:0.95rem;}
.ai-summary-content h4:first-child{margin-top:0;}
.ai-summary-content ul{margin-left:1.25rem;}
.ai-summary-content li{margin-bottom:0.3rem;}
.week-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:0.4rem;margin-bottom:1.5rem;}
.week-day{text-align:center;padding:0.75rem 0.2rem;border-radius:var(--radius-lg);background:var(--bg-tertiary);border:1px solid transparent;transition:all var(--duration-normal) var(--ease-bounce);}
.week-day.active{background:var(--gradient-card);border-color:var(--cta-light);box-shadow:var(--shadow-sm),inset 0 1px 0 rgba(255,255,255,0.5);}
.week-day.active:hover{transform:translateY(-4px) scale(1.05);box-shadow:var(--shadow-md);}
.week-day.has-entry .day-date{background:var(--gradient-cta);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;font-weight:700;}
.week-day .day-name{font-size:0.7rem;color:var(--text-muted);margin-bottom:0.3rem;}
.week-day .day-date{font-size:0.95rem;font-weight:600;color:var(--text-secondary);}
.week-day.has-entry .day-date{color:var(--text-primary);}
.history-section{margin-top:1.5rem;}
.history-date-group{margin-bottom:1.5rem;}
.history-date{font-size:0.9rem;font-weight:600;color:var(--text-secondary);margin-bottom:0.75rem;padding-bottom:0.5rem;border-bottom:1px solid var(--border-light);display:flex;align-items:center;gap:0.5rem;}
.history-date::before{content:'';width:6px;height:6px;border-radius:50%;background:var(--text-light);flex-shrink:0;}
.empty-state{text-align:center;padding:3rem 1.5rem;color:var(--text-muted);}
.empty-state svg{width:56px;height:56px;margin-bottom:1rem;opacity:0.5;color:var(--cta-light);}
.empty-state h3{font-size:1rem;color:var(--text-secondary);margin-bottom:0.35rem;}
.empty-state p{font-size:0.85rem;color:var(--text-muted);}
.loading{display:flex;align-items:center;justify-content:center;gap:0.75rem;padding:2rem;color:var(--text-muted);}
.spinner{width:24px;height:24px;border:3px solid var(--cta-pale);border-top-color:var(--cta);border-right-color:var(--lavender);border-radius:50%;animation:spin 0.8s linear infinite;}
@keyframes spin{to{transform:rotate(360deg);}}
.tab-nav{display:flex;gap:0.4rem;margin-bottom:1.5rem;padding:0.4rem;background:var(--bg-tertiary);border-radius:var(--radius-lg);border:1px solid var(--border);}
.tab-btn{flex:1;padding:0.6rem 0.75rem;background:transparent;border:none;font-size:0.85rem;font-weight:500;color:var(--text-muted);cursor:pointer;border-radius:var(--radius);transition:all var(--duration-fast) var(--ease-bounce);display:flex;align-items:center;justify-content:center;gap:0.35rem;}
.tab-btn svg{width:14px;height:14px;}
.tab-btn:hover{color:var(--cta);background:var(--cta-pale);}
.tab-btn.active{background:var(--gradient-card);color:var(--text-primary);box-shadow:var(--shadow-sm);font-weight:600;border:1px solid var(--border);}
.stats-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:0.75rem;margin-bottom:1.5rem;}
.stat-card{background:var(--gradient-card);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border:1px solid var(--border);border-radius:var(--radius-xl);padding:1.5rem 1rem;text-align:center;box-shadow:var(--shadow-xs),inset 0 1px 0 rgba(255,255,255,0.5);transition:all var(--duration-normal) var(--ease-out);position:relative;overflow:hidden;}
.stat-card::after{content:'';position:absolute;top:0;left:0;right:0;height:3px;background:var(--gradient-rainbow);opacity:0.5;}
.stat-card:hover{border-color:var(--cta-soft);box-shadow:var(--shadow-md),inset 0 1px 0 rgba(255,255,255,0.7);transform:translateY(-4px) scale(1.02);}
.stat-card .value{font-size:2.25rem;font-weight:700;background:var(--gradient-cta);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;line-height:1;letter-spacing:-0.02em;}
.stat-card .label{font-size:0.8rem;color:var(--text-secondary);margin-top:0.5rem;font-weight:500;}
.stat-card .sublabel{font-size:0.7rem;color:var(--text-muted);margin-top:0.15rem;}
.stat-card.streak .value{background:linear-gradient(135deg,var(--cta),var(--lemon));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;}
.chart-container{background:var(--gradient-card);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border:1px solid var(--border);border-radius:var(--radius-xl);padding:1.5rem;margin-bottom:1rem;box-shadow:var(--shadow-sm),inset 0 1px 0 rgba(255,255,255,0.5);position:relative;overflow:hidden;}
.chart-container::after{content:'';position:absolute;top:0;left:0;right:0;height:3px;background:var(--gradient-rainbow);opacity:0.4;}
.chart-title{font-size:0.9rem;font-weight:600;margin-bottom:1rem;display:flex;align-items:center;gap:0.5rem;color:var(--text-secondary);}
.chart-title svg{width:16px;height:16px;color:var(--text-muted);}
.bar-chart{display:flex;align-items:flex-end;gap:6px;height:100px;padding:0.5rem 0;}
.bar{flex:1;background:linear-gradient(180deg,var(--cta-light) 0%,var(--cta) 100%);border-radius:8px 8px 0 0;min-width:12px;transition:all var(--duration-normal) var(--ease-bounce);position:relative;cursor:pointer;box-shadow:0 -4px 12px rgba(255,107,138,0.15);}
.bar:hover{background:linear-gradient(180deg,var(--mint-light) 0%,var(--mint) 100%);transform:scaleY(1.05) scaleX(1.1);box-shadow:0 -6px 20px rgba(127,219,203,0.3);z-index:5;}
.bar .bar-value{position:absolute;bottom:100%;left:50%;transform:translateX(-50%);font-size:0.7rem;color:var(--text-secondary);white-space:nowrap;opacity:0;transition:opacity var(--duration-fast);font-weight:600;}
.bar:hover .bar-value{opacity:1;}
.bar-labels{display:flex;gap:4px;}
.bar-labels span{flex:1;text-align:center;font-size:0.7rem;color:var(--text-muted);min-width:12px;}
.heatmap-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:5px;}
.heatmap-cell{aspect-ratio:1;border-radius:10px;background:var(--bg-tertiary);border:1px solid var(--border-light);display:flex;align-items:center;justify-content:center;font-size:0.7rem;color:var(--text-muted);transition:all var(--duration-fast) var(--ease-bounce);}
.heatmap-cell:hover{transform:scale(1.2) rotate(5deg);box-shadow:0 4px 16px rgba(0,0,0,0.1);z-index:10;position:relative;}
.heatmap-cell.level-0{background:var(--bg-tertiary);}
.heatmap-cell.level-1{background:var(--mint-pale);color:var(--text-primary);border-color:var(--mint-light);}
.heatmap-cell.level-2{background:var(--mint-light);color:var(--text-primary);}
.heatmap-cell.level-3{background:linear-gradient(135deg,var(--cta-light),var(--cta));color:white;border-color:transparent;box-shadow:0 2px 8px rgba(255,107,138,0.2);}
.heatmap-cell.level-4{background:linear-gradient(135deg,var(--cta),var(--lavender));color:white;border-color:transparent;box-shadow:0 4px 16px rgba(255,107,138,0.3);}
.chart-insight{margin-top:1rem;padding:1rem 1.25rem;background:var(--bg-secondary);border-left:3px solid var(--text-light);border-radius:0 var(--radius) var(--radius) 0;font-size:0.85rem;line-height:1.7;color:var(--text-secondary);}
.chart-insight-header{display:flex;align-items:center;gap:6px;font-size:0.75rem;font-weight:600;color:var(--text-muted);margin-bottom:0.5rem;}
.chart-insight p{margin-bottom:0.5rem;}
.chart-insight p:last-child{margin-bottom:0;}
.chart-insight .trend-up{color:#6B7280;font-weight:500;}
.chart-insight .trend-down{color:#6B7280;font-weight:500;}
.chart-insight .trend-flat{color:var(--text-muted);font-weight:500;}
.heatmap-labels{display:flex;justify-content:space-between;margin-top:0.6rem;font-size:0.72rem;color:var(--text-muted);}
.compare-chart{display:flex;gap:1rem;justify-content:center;margin-top:0.5rem;}
.compare-item{display:flex;flex-direction:column;align-items:center;gap:0.5rem;}
.compare-bar{width:60px;background:var(--primary-light);border-radius:8px;overflow:hidden;}
.compare-bar-fill{background:var(--primary);transition:height 0.5s ease;}
.compare-bar-fill.challenge{background:#111827;}
.compare-bar-fill.achievement{background:var(--success);}
.compare-value{font-size:1.25rem;font-weight:600;}
.compare-label{font-size:0.8rem;color:var(--text-secondary);}
.section-divider{height:1px;background:var(--border-light);margin:1.5rem 0;}
.todo-banner{background:var(--gradient-card);backdrop-filter:blur(22px);-webkit-backdrop-filter:blur(22px);border:1px solid var(--border);border-radius:var(--radius-lg);padding:1rem 1.25rem;display:flex;justify-content:space-between;align-items:center;box-shadow:var(--shadow-sm),inset 0 1px 0 rgba(255,255,255,0.5);transition:all var(--duration-normal) var(--ease-out);}
.todo-banner-all-done{background:rgba(210,240,220,0.5) !important;border-color:rgba(130,190,160,0.4) !important;}
.todo-banner:hover{background:rgba(255,255,255,0.55);transform:translateY(-1px);box-shadow:0 12px 40px rgba(0,0,0,0.06);}
.todo-banner-left{display:flex;align-items:center;gap:0.5rem;}
.todo-icon{font-size:1.25rem;}
.todo-banner-text{font-size:0.9rem;color:var(--primary-dark);}
.todo-banner-text strong{color:var(--primary-dark);font-weight:700;}
.todo-banner-arrow{font-size:0.75rem;color:var(--primary-dark);transition:transform 0.2s;}
.todo-list{background:rgba(255,255,255,0.42);backdrop-filter:blur(22px);-webkit-backdrop-filter:blur(22px);border:1px solid rgba(255,255,255,0.7);border-radius:var(--radius);padding:0.75rem;margin-top:0.5rem;box-shadow:0 8px 32px rgba(0,0,0,0.04);}
.todo-date-group{margin-bottom:0.5rem;}
.todo-date-group:last-child{margin-bottom:0;}
.todo-date-label{font-size:0.8rem;font-weight:500;color:var(--text-secondary);margin-bottom:0.5rem;padding-left:0.25rem;}
.todo-item{display:flex;align-items:center;gap:0.5rem;padding:0.6rem 0.5rem;border-radius:8px;transition:background 0.2s;}
.todo-item:hover{background:var(--bg-secondary);}
.todo-item-checked{background:#f0fdf4 !important;}
.todo-checkbox{position:relative;width:22px;height:22px;cursor:pointer;flex-shrink:0;}
.todo-checkbox input{position:absolute;opacity:0;width:100%;height:100%;cursor:pointer;z-index:2;}
.todo-checkbox .checkmark{position:absolute;top:0;left:0;width:22px;height:22px;border:2px solid #9CA3AF;border-radius:6px;background:white;transition:all 0.2s ease;display:flex;align-items:center;justify-content:center;}
.todo-checkbox input:checked + .checkmark{background:#9CA3AF;border-color:#9CA3AF;animation:checkPop 0.25s ease;}
@keyframes checkPop{0%{transform:scale(1);}
50%{transform:scale(1.2);}
100%{transform:scale(1);}}
.todo-checkbox .checkmark::after{content:'';display:none;width:5px;height:10px;border:solid white;border-width:0 2.5px 2.5px 0;transform:rotate(45deg);margin-top:-2px;}
.todo-checkbox input:checked + .checkmark::after{display:block;}
.todo-text{flex:1;font-size:0.9rem;color:var(--text-primary);line-height:1.4;transition:all 0.2s;}
.todo-item-checked .todo-text{text-decoration:line-through;color:#9ca3af;}
.todo-time{font-size:0.8rem;color:var(--primary);font-weight:500;margin-right:0.25rem;}
.todo-delete{width:20px;height:20px;border:none;background:transparent;color:var(--text-muted);cursor:pointer;font-size:0.75rem;border-radius:4px;transition:all 0.2s;opacity:0;}
.todo-item:hover .todo-delete{opacity:1;}
.todo-delete:hover{background:#F9FAFB;color:#6B7280;}
.todo-date-options{display:grid;grid-template-columns:repeat(2,1fr);gap:0.5rem;}
.todo-date-option{cursor:pointer;}
.todo-date-option input{display:none;}
.todo-date-option-content{display:flex;align-items:center;gap:0.5rem;padding:0.75rem;background:var(--bg);border:2px solid var(--border);border-radius:var(--radius);transition:all 0.2s;}
.todo-date-option input:checked + .todo-date-option-content{background:var(--bg-secondary);border-color:var(--primary);}
.todo-date-icon{font-size:1.25rem;}
.todo-date-text{font-size:0.9rem;font-weight:500;color:var(--text-primary);}
.entry-todo-btn{padding:0.25rem 0.5rem;font-size:0.75rem;background:transparent;color:var(--primary);border:1px solid var(--primary-light);border-radius:6px;cursor:pointer;transition:all 0.2s;white-space:nowrap;}
.entry-todo-btn:hover{background:var(--primary);color:white;}
.ai-display-section{background:var(--gradient-card);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border:1px solid var(--border);border-radius:var(--radius-xl);padding:1.25rem 1.5rem;box-shadow:var(--shadow-sm),inset 0 1px 0 rgba(255,255,255,0.5);position:relative;overflow:hidden;}
.ai-display-section::before{content:'';position:absolute;top:0;left:0;right:0;height:3px;background:var(--gradient-rainbow);opacity:0.4;}
.ai-cards-grid{display:flex;flex-direction:column;gap:0.75rem;margin-top:0.75rem;}
.ai-card,.fin-card{background:#ffffff;border-radius:20px;padding:1.25rem;box-shadow:0 1px 3px rgba(0,0,0,0.04),0 4px 12px rgba(0,0,0,0.03);width:100%;height:100%;box-sizing:border-box;transition:box-shadow 0.2s ease,transform 0.2s ease;position:relative;overflow:hidden;}
.ai-card:hover,.fin-card:hover{box-shadow:0 2px 6px rgba(0,0,0,0.06),0 8px 20px rgba(0,0,0,0.04);transform:translateY(-2px);}
.ai-cards-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));gap:0.75rem;}
.ai-card-header{display:flex;align-items:center;gap:0.5rem;margin-bottom:0.75rem;padding-bottom:0.5rem;border-bottom:1px solid var(--border-light);}
.ai-card-icon,.fin-card-icon{width:44px;height:44px;border-radius:14px;display:flex;align-items:center;justify-content:center;font-size:1.4rem;flex-shrink:0;box-shadow:0 2px 8px rgba(0,0,0,0.06);}
.ai-card-title{font-size:0.8rem;font-weight:600;color:var(--text-secondary);}
.ai-card-value{font-size:1.5rem;font-weight:700;line-height:1.2;}
.ai-card-body{font-size:0.82rem;color:var(--text-secondary);line-height:1.6;}
.ai-card-mood .ai-card-icon{background:#fce7f3;}
.ai-card-mood .ai-card-value{color:var(--cta-light);}
.ai-card-energy .ai-card-icon{background:#fef3c7;}
.ai-card-energy .ai-card-value{color:#6B7280;}
.ai-card-keywords .ai-card-icon{background:#e0e7ff;}
.ai-card-highlight .ai-card-icon{background:#fef9c3;}
.ai-card-alignment .ai-card-icon{background:#dcfce7;}
.ai-card-suggestion .ai-card-icon{background:#f3e8ff;}
.keyword-tag{display:inline-block;padding:0.25rem 0.6rem;background:var(--bg-secondary);border-radius:var(--radius-full);font-size:0.78rem;color:var(--text-secondary);margin:0.15rem;border:1px solid var(--border-light);}
.action-item{display:flex;align-items:flex-start;gap:0.4rem;font-size:0.78rem;color:var(--text-secondary);padding:0.2rem 0;}
.action-dot{width:6px;height:6px;border-radius:50%;margin-top:6px;flex-shrink:0;}
.action-dot.green{background:#9CA3AF;}
.action-dot.red{background:#6B7280;}
.progress-bar{width:100%;height:8px;background:var(--bg-tertiary);border-radius:4px;overflow:hidden;}
.progress-fill{height:100%;border-radius:4px;transition:width 0.6s var(--ease-out);}
.ai-card-category .ai-card-icon{background:#e0f2fe;}
.category-tag{display:inline-flex;align-items:center;gap:0.3rem;padding:0.3rem 0.6rem;background:white;border-radius:var(--radius-sm);font-size:0.78rem;margin:0.15rem;border:1px solid var(--border-light);}
.ai-display-content{font-size:0.95rem;line-height:1.9;color:var(--text-primary);}
.ai-display-content h4{color:var(--peach-dark);margin-top:1.1rem;margin-bottom:0.5rem;font-size:1rem;}
.ai-display-content h4:first-child{margin-top:0;}
.ai-display-content ul{margin-left:1.25rem;margin-bottom:0.75rem;}
.ai-display-content li{margin-bottom:0.35rem;}
.ai-display-meta{display:flex;justify-content:space-between;align-items:center;margin-bottom:1rem;padding-bottom:0.85rem;border-bottom:1.5px dashed var(--border);}
.ai-display-meta .time{font-size:0.78rem;color:var(--text-muted);}
.ai-display-section .empty-state{color:var(--text-muted);}
.bottom-nav{position:fixed;bottom:0;left:0;right:0;top:auto;background:rgba(255,255,255,0.95);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border-top:1px solid var(--border);display:flex;justify-content:space-around;padding:0.6rem 0 max(1.2rem,env(safe-area-inset-bottom));z-index:1000;box-shadow:0 -4px 20px rgba(255,107,138,0.08);-webkit-transform:translateZ(0);transform:translateZ(0);}
.nav-item{display:flex;flex-direction:column;align-items:center;gap:0.25rem;padding:0.5rem 1rem;border:none;background:none;cursor:pointer;color:var(--text-muted);transition:all var(--duration-fast) var(--ease-bounce);border-radius:var(--radius-lg);min-width:60px;position:relative;}
.nav-item:hover{color:var(--cta);background:var(--cta-pale);transform:translateY(-2px);}
.nav-item.active{color:var(--cta);background:var(--cta-pale);}
.nav-item.active::before{content:'';position:absolute;top:0;left:50%;transform:translateX(-50%);width:24px;height:3px;background:var(--gradient-cta);border-radius:0 0 4px 4px;}
.nav-item.active svg{filter:drop-shadow(0 2px 4px rgba(255,107,138,0.3));}
.nav-item svg{width:22px;height:22px;transition:all var(--duration-fast) var(--ease-out);}
.nav-item span{font-size:0.7rem;font-weight:500;}
.page{display:none;animation:fadeIn 0.3s var(--ease-soft) both;}
.page.active{display:block;}
@keyframes fadeIn{from{opacity:0;transform:translateY(10px);}
to{opacity:1;transform:translateY(0);}}
@media (max-width:768px){.header{padding:1rem 1rem 0.5rem;}
.header-content{flex-wrap:wrap;gap:0.75rem;}
.main{padding:1rem;}
.quick-actions{grid-template-columns:repeat(3,1fr);gap:0.6rem;}
.quick-action-card{padding:0.9rem 0.75rem;}
.quick-action-card .icon{width:38px;height:38px;margin-bottom:0.5rem;}
.week-grid{grid-template-columns:repeat(7,1fr);gap:0.3rem;}
.week-day{padding:0.6rem 0.25rem;}
.week-day .day-name{font-size:0.65rem;}
.week-day .day-date{font-size:0.9rem;}
.tab-nav{gap:0.3rem;padding:0.4rem;}
.tab-btn{padding:0.5rem 0.6rem;font-size:0.82rem;}
.date-nav{padding:1.25rem 1rem;gap:1rem;}
.current-date .day{font-size:2.8rem;}
.current-date .day.is-today{font-size:3rem;}
.stats-grid{grid-template-columns:repeat(2,1fr);}
.donut-chart{flex-direction:column;gap:1.5rem;}
.entry-card{padding:1rem 1.1rem;}
.modal{border-radius:var(--radius-lg);}
.modal-body{padding:1.25rem;}}
@media (max-width:640px){.week-review-pair{grid-template-columns:1fr !important;}
.ai-card-row{flex-direction:column !important;}
.ai-card-row > div{min-width:100% !important;}
.fin-card{padding:1rem;border-radius:16px;}
.fin-card-icon{width:38px;height:38px;border-radius:12px;}
.fin-card-icon svg{width:18px;height:18px;}
.entry-actions .btn-text{display:none;}
.entry-actions button{padding:0.4rem;min-width:0;}}
@media (max-width:480px){.quick-actions{grid-template-columns:repeat(3,1fr);}
.quick-action-card h3{font-size:0.85rem;}
.quick-action-card p{display:none;}
.stats-grid{grid-template-columns:repeat(2,1fr);}
.stat-card .value{font-size:2rem;}}
::-webkit-scrollbar{width:8px;height:8px;}
::-webkit-scrollbar-track{background:var(--bg-secondary);border-radius:4px;}
::-webkit-scrollbar-thumb{background:linear-gradient(180deg,var(--cta-light),var(--lavender-light));border-radius:4px;}
::-webkit-scrollbar-thumb:hover{background:linear-gradient(180deg,var(--cta),var(--lavender));}
::selection{background:linear-gradient(135deg,rgba(255,107,138,0.25),rgba(201,182,228,0.25));color:var(--text-primary);}
@media (max-width:480px){.main{padding:1rem 0.75rem calc(3rem + env(safe-area-inset-bottom));}
.fin-card{padding:0.875rem 1rem;}
.section-title{font-size:0.95rem;}
.bottom-nav .nav-item{padding:0.25rem 0.5rem;}
.bottom-nav .nav-label{font-size:0.6rem;}}
.nebula-chart-container{width:100%;height:460px;background:#ffffff;border-radius:16px;position:relative;overflow:hidden;}
.nebula-chart-container svg{width:100%;height:100%;display:block;}
.nebula-node circle{stroke:#fff;stroke-width:2.5px;cursor:grab;transition:filter 0.2s ease;}
.nebula-node:hover circle{filter:brightness(1.12);}
.nebula-node text{font-family:inherit;text-anchor:middle;dominant-baseline:middle;pointer-events:none;}
.nebula-node .node-label{font-size:11px;fill:#374151;font-weight:600;}
.nebula-node .node-emoji{font-size:18px;}
.nebula-node .node-sublabel{font-size:9px;fill:#9CA3AF;}
.nebula-link{stroke-opacity:0.25;stroke-linecap:round;transition:stroke-opacity 0.3s ease;}
.nebula-link:hover{stroke-opacity:0.5;}
.nebula-glow{fill-opacity:0.12;pointer-events:none;}
.nebula-controls{position:absolute;top:12px;right:12px;display:flex;gap:6px;z-index:10;}
.nebula-controls button{width:32px;height:32px;border:1px solid #E5E7EB;border-radius:8px;background:rgba(255,255,255,0.92);backdrop-filter:blur(8px);color:#6B7280;font-size:16px;font-weight:500;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all 0.2s ease;padding:0;}
.nebula-controls button:hover{background:#fff;border-color:#FB7185;color:#FB7185;transform:scale(1.05);}
.nebula-controls button:active{transform:scale(0.95);}
.highlight-images-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:0.75rem;margin-top:0.75rem;}
.highlight-image-item{border-radius:12px;overflow:hidden;background:#F9FAFB;border:1px solid #F3F4F6;transition:all 0.3s ease;}
.highlight-image-item:hover{transform:translateY(-2px) scale(1.02);box-shadow:0 8px 20px rgba(251,113,133,0.15);border-color:#FECDD3;}
.highlight-image-item img{width:100%;height:180px;object-fit:cover;display:block;}
.highlight-image-label{padding:0.5rem 0.75rem;font-size:0.72rem;color:#9CA3AF;text-align:center;background:#FFFFFF;}
.highlight-images-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:0.5rem;}
.highlight-images-title{font-size:0.78rem;color:#FB7185;font-weight:600;}
.highlight-images-event{font-size:0.85rem;color:#374151;font-weight:600;margin-bottom:0.75rem;padding:0.75rem;background:#FFF0F2;border-radius:10px;border-left:3px solid #FB7185;line-height:1.5;}
.highlight-images-loading{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:2rem 1rem;color:#9CA3AF;font-size:0.85rem;}
.highlight-images-loading .spinner{width:32px;height:32px;margin-bottom:0.75rem;}
.highlight-images-error{color:#FB7185;font-size:0.82rem;padding:1rem;text-align:center;}
.highlight-images-btn{padding:0.5rem 1rem;background:var(--gradient-cta);color:white;border:none;border-radius:8px;font-size:0.82rem;font-weight:600;cursor:pointer;transition:all 0.2s ease;}
.highlight-images-btn:hover{transform:translateY(-1px);box-shadow:0 4px 12px rgba(244,63,94,0.3);}
@media (max-width:480px){.highlight-images-grid{grid-template-columns:1fr 1fr;gap:0.5rem;}
.highlight-image-item img{height:140px;}}
.img-lightbox{position:fixed;inset:0;z-index:99999;display:flex;align-items:center;justify-content:center;opacity:0;pointer-events:none;transition:opacity 0.25s ease;}
.img-lightbox.active{opacity:1;pointer-events:auto;}
.img-lightbox-backdrop{position:absolute;inset:0;background:rgba(0,0,0,0.75);backdrop-filter:blur(8px);}
.img-lightbox-container{position:relative;z-index:1;max-width:92vw;max-height:88vh;display:flex;flex-direction:column;align-items:center;animation:lightboxIn 0.3s var(--ease-out);}
@keyframes lightboxIn{from{opacity:0;transform:scale(0.9);}
to{opacity:1;transform:scale(1);}}
.img-lightbox-container img{max-width:100%;max-height:70vh;object-fit:contain;border-radius:12px;box-shadow:0 20px 60px rgba(0,0,0,0.4);cursor:default;}
.img-lightbox-label{margin-top:0.75rem;color:rgba(255,255,255,0.7);font-size:0.82rem;text-align:center;}
.img-lightbox-actions{display:flex;gap:0.75rem;margin-top:1rem;}
.img-lightbox-btn{display:flex;align-items:center;gap:0.4rem;padding:0.55rem 1.2rem;background:rgba(255,255,255,0.15);color:white;border:1px solid rgba(255,255,255,0.25);border-radius:10px;font-size:0.85rem;font-weight:500;cursor:pointer;transition:all 0.2s ease;backdrop-filter:blur(4px);}
.img-lightbox-btn:hover{background:rgba(255,255,255,0.25);transform:translateY(-1px);}
.img-lightbox-btn-primary{background:var(--gradient-cta);border-color:transparent;}
.img-lightbox-btn-primary:hover{box-shadow:0 4px 16px rgba(244,63,94,0.4);}
.img-lightbox-close{position:absolute;top:1rem;right:1rem;z-index:2;width:40px;height:40px;display:flex;align-items:center;justify-content:center;background:rgba(255,255,255,0.15);border:1px solid rgba(255,255,255,0.2);border-radius:50%;color:white;cursor:pointer;transition:all 0.2s ease;backdrop-filter:blur(4px);}
.img-lightbox-close:hover{background:rgba(255,255,255,0.3);transform:rotate(90deg);}
@media (max-width:480px){.img-lightbox-container img{max-height:60vh;}
.img-lightbox-btn{padding:0.5rem 1rem;font-size:0.8rem;}}