:root{--font-family-primary:"Outfit", sans-serif;--font-family-stack:"Outfit", sans-serif;--font-family-headings:"Space Grotesk", sans-serif;--font-size-xs:11px;--font-size-sm:12px;--font-size-md:14px;--font-size-lg:15px;--font-size-xl:15.5px;--font-size-2xl:16px;--font-size-3xl:18px;--font-size-4xl:20px;--color-text-primary:#f8fafc;--color-text-secondary:#64748b;--color-border-strong:#2563eb;--color-surface-muted:#fff;--color-surface-base:#000;--color-surface-strong:oklab(96.8254% -.00253484 -.00633037/.2);--color-accent:#2563eb;--color-accent-hover:#3b82f6;--color-card-bg:#0f172a99;--color-card-border:#ffffff14;--color-focus:#2563eb;--color-success:#10b981;--color-error:#ef4444;--color-warning:#f59e0b;--space-1:2px;--space-2:5px;--space-3:6px;--space-4:8px;--space-5:12px;--space-6:16px;--space-7:20px;--space-8:24px;--radius-xs:5px;--radius-sm:6px;--radius-md:8px;--radius-lg:12px;--shadow-1:#0000 0px 0px 0px 0px, #0000 0px 0px 0px 0px, #0000 0px 0px 0px 0px, #0000 0px 0px 0px 0px, oklab(54.613% -.0266538 -.213537/.2) 0px 4px 6px -1px, oklab(54.613% -.0266538 -.213537/.2) 0px 2px 4px -2px;--shadow-2:#0000 0px 0px 0px 0px, #0000 0px 0px 0px 0px, #0000 0px 0px 0px 0px, #0000 0px 0px 0px 0px, oklab(54.613% -.0266538 -.213537/.2) 0px 10px 15px -3px, oklab(54.613% -.0266538 -.213537/.2) 0px 4px 6px -4px;--shadow-3:#0000 0px 0px 0px 0px, #0000 0px 0px 0px 0px, #0000 0px 0px 0px 0px, #0000 0px 0px 0px 0px, #0000001a 0px 1px 3px 0px, #0000001a 0px 1px 2px -1px;--shadow-4:#0000 0px 0px 0px 0px, #0000 0px 0px 0px 0px, #0000 0px 0px 0px 0px, #0000 0px 0px 0px 0px, oklab(54.613% -.0266538 -.213537/.1) 0px 20px 25px -5px, oklab(54.613% -.0266538 -.213537/.1) 0px 8px 10px -6px;--motion-duration-instant:.15s;--motion-duration-fast:.3s}@media (prefers-color-scheme:light){:root{--color-text-primary:#0f172a;--color-text-secondary:#64748b;--color-surface-base:#f8fafc;--color-card-bg:#ffffffb3;--color-card-border:#0f172a14}}*,:before,:after{box-sizing:border-box;margin:0;padding:0}body{font-family:var(--font-family-stack);color:var(--color-text-primary);background-color:var(--color-surface-base);-webkit-font-smoothing:antialiased;min-height:100vh;font-size:16px;line-height:24px;overflow-x:hidden}h1,h2,h3,h4,h5,h6,.brand-title,.brand-tagline,.tab-btn,.link-card-title,.post-card-title,.about-title,.submit-btn,.share-btn{font-family:var(--font-family-headings)}#three-canvas{z-index:-1;pointer-events:none;width:100vw;height:100vh;position:fixed;top:0;left:0}#app{max-width:680px;min-height:100vh;padding:var(--space-6) var(--space-5) 80px var(--space-5);z-index:1;flex-direction:column;margin:0 auto;display:flex;position:relative}@media (width>=768px){#app{max-width:720px;padding:var(--space-8) var(--space-6) 100px var(--space-6)}}button:focus-visible,a:focus-visible,input:focus-visible,textarea:focus-visible{outline:3px solid var(--color-focus);outline-offset:3px}.app-header{text-align:center;margin-bottom:var(--space-8);flex-direction:column;align-items:center;display:flex}.avatar-wrapper{width:96px;height:96px;margin-bottom:var(--space-5);background:linear-gradient(135deg, var(--color-border-strong), #06b6d4, var(--color-border-strong));box-shadow:var(--shadow-2);background-size:200% 200%;border-radius:50%;padding:3px;animation:4s linear infinite glow-spin;position:relative}@keyframes glow-spin{0%{background-position:0%}50%{background-position:100%}to{background-position:0%}}.avatar-img{object-fit:cover;background-color:var(--color-surface-base);border:2px solid var(--color-surface-base);border-radius:50%;width:100%;height:100%}.brand-title{font-size:var(--font-size-4xl);letter-spacing:-.025em;margin-bottom:var(--space-2);color:var(--color-text-primary);font-weight:700;line-height:28px}.brand-tagline{font-size:var(--font-size-lg);color:var(--color-text-secondary);margin-bottom:var(--space-6);font-weight:500}.nav-tabs{background:var(--color-card-bg);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);border:1px solid var(--color-card-border);padding:var(--space-2);border-radius:var(--radius-lg);gap:var(--space-2);width:100%;margin-bottom:var(--space-7);box-shadow:var(--shadow-1);display:flex}.tab-btn{font-family:var(--font-family-primary);font-size:var(--font-size-md);color:var(--color-text-secondary);padding:var(--space-4) 0;border-radius:var(--radius-md);cursor:pointer;transition:all var(--motion-duration-fast) ease;justify-content:center;align-items:center;gap:var(--space-3);background:0 0;border:none;flex:1;font-weight:600;text-decoration:none;display:flex;position:relative}.tab-btn svg{stroke-width:2px;width:18px;height:18px}.tab-btn:hover{color:var(--color-text-primary);background:#ffffff0d}.tab-btn.active{color:#fff;background:var(--color-border-strong);box-shadow:var(--shadow-2)}.tab-btn:active{transform:scale(.98)}.tab-content-wrapper{animation:fade-in var(--motion-duration-fast) ease-out forwards;width:100%}@keyframes fade-in{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}.links-container{gap:var(--space-5);flex-direction:column;width:100%;display:flex}.link-card{padding:var(--space-5) var(--space-6);background:var(--color-card-bg);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border:1px solid var(--color-card-border);border-radius:var(--radius-lg);color:var(--color-text-primary);transition:all var(--motion-duration-fast) cubic-bezier(.4, 0, .2, 1);box-shadow:var(--shadow-1);align-items:center;text-decoration:none;display:flex;position:relative;overflow:hidden}.link-card:before{content:"";opacity:0;transition:opacity var(--motion-duration-fast) ease;background:radial-gradient(circle at 10%,#2563eb26,#0000 60%);position:absolute;inset:0}.link-card-icon{border-radius:var(--radius-md);width:42px;height:42px;margin-right:var(--space-5);color:var(--color-border-strong);transition:all var(--motion-duration-fast) ease;background:#ffffff0d;flex-shrink:0;justify-content:center;align-items:center;display:flex}.link-card-info{flex-grow:1}.link-card-title{font-size:var(--font-size-2xl);margin-bottom:var(--space-1);font-weight:600}.link-card-desc{font-size:var(--font-size-sm);color:var(--color-text-secondary)}.link-card-arrow{margin-left:var(--space-4);color:var(--color-text-secondary);transition:transform var(--motion-duration-instant) ease}.link-card:hover{border-color:var(--color-border-strong);box-shadow:var(--shadow-2);transform:translateY(-2px)}.link-card:hover:before{opacity:1}.link-card:hover .link-card-icon{background:var(--color-border-strong);color:#fff;transform:scale(1.05)}.link-card:hover .link-card-arrow{color:var(--color-text-primary);transform:translate(3px)}.link-card:active{transform:translateY(0)}.share-section{background:var(--color-surface-strong);padding:var(--space-5) var(--space-6);border-radius:var(--radius-lg);margin-top:var(--space-7);justify-content:space-between;align-items:center;gap:var(--space-4);border:1px solid #ffffff0d;display:flex}.share-info-text{font-size:var(--font-size-md);color:var(--color-text-secondary)}.share-btn{background:var(--color-border-strong);color:#fff;padding:var(--space-4) var(--space-6);border-radius:var(--radius-md);font-family:var(--font-family-primary);font-weight:600;font-size:var(--font-size-md);cursor:pointer;transition:all var(--motion-duration-instant) ease;align-items:center;gap:var(--space-3);box-shadow:var(--shadow-1);border:none;display:inline-flex}.share-btn:hover{background:var(--color-accent-hover);box-shadow:var(--shadow-2)}.share-btn:active{transform:scale(.96)}.toast-msg{bottom:var(--space-8);color:#fff;padding:var(--space-4) var(--space-7);border-radius:var(--radius-md);font-weight:600;font-size:var(--font-size-md);box-shadow:var(--shadow-4);z-index:9999;opacity:0;transition:all var(--motion-duration-fast) cubic-bezier(.175, .885, .32, 1.275);align-items:center;gap:var(--space-3);background:#10b981;display:flex;position:fixed;left:50%;transform:translate(-50%)translateY(100px)}.toast-msg.show{opacity:1;transform:translate(-50%)translateY(0)}.diary-controls{gap:var(--space-4);margin-bottom:var(--space-6);flex-direction:column;display:flex}.search-wrapper{width:100%;position:relative}.search-input{background:var(--color-card-bg);border:1px solid var(--color-card-border);width:100%;padding:var(--space-5) var(--space-6) var(--space-5) 44px;border-radius:var(--radius-lg);color:var(--color-text-primary);font-family:var(--font-family-primary);font-size:var(--font-size-2xl);transition:all var(--motion-duration-fast) ease}.search-input:focus{border-color:var(--color-border-strong);background:#0006}.search-icon-svg{left:var(--space-6);color:var(--color-text-secondary);pointer-events:none;width:18px;height:18px;position:absolute;top:50%;transform:translateY(-50%)}.tags-filter-bar{gap:var(--space-3);padding-bottom:var(--space-2);scrollbar-width:none;display:flex;overflow-x:auto}.tags-filter-bar::-webkit-scrollbar{display:none}.tag-btn{color:var(--color-text-secondary);padding:var(--space-2) var(--space-5);font-size:var(--font-size-sm);cursor:pointer;transition:all var(--motion-duration-instant) ease;white-space:nowrap;background:#ffffff0d;border:1px solid #ffffff0d;border-radius:50px;font-weight:600}.tag-btn:hover{color:var(--color-text-primary);background:#ffffff1a}.tag-btn.active{border-color:var(--color-border-strong);color:#3b82f6;background:#2563eb26}.posts-grid{gap:var(--space-6);flex-direction:column;display:flex}.post-card{background:var(--color-card-bg);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border:1px solid var(--color-card-border);border-radius:var(--radius-lg);padding:var(--space-6);cursor:pointer;transition:all var(--motion-duration-fast) cubic-bezier(.4, 0, .2, 1);box-shadow:var(--shadow-1);text-align:left;flex-direction:column;display:flex}.post-card-meta{align-items:center;gap:var(--space-4);font-size:var(--font-size-sm);color:var(--color-text-secondary);margin-bottom:var(--space-3);display:flex}.post-card-tag{color:var(--color-border-strong);text-transform:uppercase;font-weight:700;font-size:var(--font-size-xs);letter-spacing:.05em}.post-card-title{font-size:var(--font-size-3xl);margin-bottom:var(--space-3);color:var(--color-text-primary);transition:color var(--motion-duration-instant) ease;font-weight:700;line-height:24px}.post-card-excerpt{font-size:var(--font-size-lg);color:var(--color-text-secondary);margin-bottom:var(--space-5);-webkit-line-clamp:2;-webkit-box-orient:vertical;line-height:22px;display:-webkit-box;overflow:hidden}.post-card-footer{font-size:var(--font-size-md);color:var(--color-border-strong);justify-content:space-between;align-items:center;font-weight:600;display:flex}.post-card-readmore{align-items:center;gap:var(--space-2);display:flex}.post-card-readmore svg{width:16px;height:16px;transition:transform var(--motion-duration-instant) ease}.post-card:hover{box-shadow:var(--shadow-3);border-color:#2563eb66;transform:translateY(-3px)}.post-card:hover .post-card-title{color:var(--color-accent-hover)}.post-card:hover .post-card-readmore svg{transform:translate(3px)}.empty-state{text-align:center;padding:var(--space-8) var(--space-6);color:var(--color-text-secondary)}.empty-state svg{width:48px;height:48px;margin-bottom:var(--space-5);stroke-width:1.5px}.modal-overlay{-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);z-index:1000;padding:var(--space-5);opacity:0;pointer-events:none;transition:opacity var(--motion-duration-fast) ease;background:#000000d9;justify-content:center;align-items:center;display:flex;position:fixed;inset:0}.modal-overlay.open{opacity:1;pointer-events:auto}.modal-container{border-radius:var(--radius-lg);width:100%;max-width:680px;max-height:85vh;transition:transform var(--motion-duration-fast) cubic-bezier(.16, 1, .3, 1);box-shadow:var(--shadow-4);background:#0b0f19;border:1px solid #ffffff1a;flex-direction:column;display:flex;position:relative;overflow:hidden;transform:translateY(20px)}.modal-overlay.open .modal-container{transform:translateY(0)}.modal-header{padding:var(--space-6) var(--space-6) var(--space-4) var(--space-6);border-bottom:1px solid #ffffff0d;justify-content:flex-end;display:flex}.modal-close-btn{color:var(--color-text-secondary);cursor:pointer;width:32px;height:32px;transition:all var(--motion-duration-instant) ease;background:#ffffff0d;border:none;border-radius:50%;justify-content:center;align-items:center;display:flex}.modal-close-btn:hover{color:var(--color-text-primary);background:#ffffff1a}.modal-content{padding:var(--space-6) var(--space-8) var(--space-8) var(--space-8);scrollbar-width:thin;scrollbar-color:#ffffff1a transparent;flex-grow:1;overflow-y:auto}.article-meta{gap:var(--space-4);font-size:var(--font-size-sm);color:var(--color-text-secondary);margin-bottom:var(--space-4);display:flex}.article-tag{color:var(--color-border-strong);text-transform:uppercase;font-weight:700}.article-title{margin-bottom:var(--space-6);color:#fff;font-size:28px;font-weight:800;line-height:36px}.article-body{color:#e2e8f0;font-size:16px;line-height:26px}.article-body p{margin-bottom:var(--space-6)}.article-body h3{font-size:var(--font-size-3xl);margin:var(--space-7) 0 var(--space-4) 0;color:#fff;font-weight:600}.article-body code{border-radius:var(--radius-xs);background:#ffffff14;padding:2px 6px;font-family:monospace;font-size:14px}.article-body blockquote{border-left:4px solid var(--color-border-strong);padding:var(--space-4) var(--space-6);border-radius:0 var(--radius-md) var(--radius-md) 0;margin-bottom:var(--space-6);color:#cbd5e1;background:#2563eb14;font-style:italic}.progress-bar-container{background:#ffffff0d;width:100%;height:4px;position:absolute;top:0;left:0}.progress-bar{background:var(--color-border-strong);width:0%;height:100%;transition:width .1s ease-out}.about-card{background:var(--color-card-bg);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border:1px solid var(--color-card-border);border-radius:var(--radius-lg);padding:var(--space-7);box-shadow:var(--shadow-2);margin-bottom:var(--space-7);text-align:left}.about-title{margin-bottom:var(--space-5);color:#fff;align-items:center;gap:var(--space-4);font-size:22px;font-weight:700;display:flex}.about-text{color:#cbd5e1;margin-bottom:var(--space-6);font-size:15px;line-height:24px}.about-features{gap:var(--space-4);margin-bottom:var(--space-7);flex-direction:column;display:flex}.feature-item{align-items:flex-start;gap:var(--space-4);display:flex}.feature-check{color:var(--color-success);flex-shrink:0;margin-top:2px}.feature-text{color:#cbd5e1;font-size:14px;line-height:20px}.signup-form{gap:var(--space-5);flex-direction:column;display:flex}.form-group{gap:var(--space-3);text-align:left;flex-direction:column;display:flex}.form-label{font-size:var(--font-size-md);color:#cbd5e1;font-weight:600}.form-input{width:100%;padding:var(--space-5) var(--space-6);border-radius:var(--radius-md);color:#fff;font-family:var(--font-family-primary);transition:all var(--motion-duration-fast) ease;background:#0006;border:1px solid #ffffff1a;font-size:15px}.form-input:focus{border-color:var(--color-border-strong);background:#0009}.submit-btn{background:var(--color-border-strong);color:#fff;font-family:var(--font-family-primary);padding:var(--space-5) 0;border-radius:var(--radius-md);cursor:pointer;transition:all var(--motion-duration-fast) ease;justify-content:center;align-items:center;gap:var(--space-4);box-shadow:var(--shadow-1);border:none;font-size:15px;font-weight:600;display:flex}.submit-btn:hover:not(:disabled){background:var(--color-accent-hover);box-shadow:var(--shadow-2)}.submit-btn:active:not(:disabled){transform:scale(.98)}.submit-btn:disabled{color:var(--color-text-secondary);cursor:not-allowed;background:#ffffff1a}.submit-btn .spinner{border:2px solid #ffffff4d;border-top-color:#fff;border-radius:50%;width:18px;height:18px;animation:1s linear infinite spin;display:none}@keyframes spin{to{transform:rotate(360deg)}}.submit-btn.loading .spinner{display:block}.submit-btn.loading .btn-text{opacity:.8}.feedback-msg{font-size:var(--font-size-md);padding:var(--space-4) var(--space-5);border-radius:var(--radius-md);font-weight:500;display:none}.feedback-msg.success{align-items:center;gap:var(--space-3);color:var(--color-success);background:#10b9811a;border:1px solid #10b98133;display:flex}.feedback-msg.error{align-items:center;gap:var(--space-3);color:var(--color-error);background:#ef44441a;border:1px solid #ef444433;display:flex}.app-footer{text-align:center;font-size:var(--font-size-sm);color:var(--color-text-secondary);padding-top:var(--space-7);margin-top:auto}.app-footer a{color:var(--color-text-secondary);transition:color var(--motion-duration-instant) ease;text-decoration:underline}.app-footer a:hover{color:var(--color-text-primary)}.bg-random-btn{background:var(--color-card-bg);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border:1px solid var(--color-card-border);width:48px;height:48px;color:var(--color-text-primary);cursor:pointer;z-index:999;box-shadow:var(--shadow-2);transition:all var(--motion-duration-instant) ease;border-radius:50%;justify-content:center;align-items:center;display:flex;position:fixed;bottom:24px;right:24px}.bg-random-btn:hover{border-color:var(--color-border-strong);color:var(--color-border-strong);box-shadow:var(--shadow-3);transform:scale(1.1)rotate(45deg)}.bg-random-btn:active{transform:scale(.95)}.lang-toggle-btn{background:var(--color-card-bg);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border:1px solid var(--color-card-border);width:48px;height:48px;color:var(--color-text-primary);cursor:pointer;z-index:999;box-shadow:var(--shadow-2);transition:all var(--motion-duration-instant) ease;font-family:var(--font-family-headings);letter-spacing:.05em;text-transform:uppercase;border-radius:50%;justify-content:center;align-items:center;font-size:13px;font-weight:700;display:flex;position:fixed;bottom:24px;right:84px}.lang-toggle-btn:hover{border-color:var(--color-border-strong);color:var(--color-border-strong);box-shadow:var(--shadow-3);transform:scale(1.1)}.lang-toggle-btn:active{transform:scale(.95)}.connection-status{background:var(--color-card-bg);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border:1px solid var(--color-card-border);width:48px;height:48px;color:var(--color-text-primary);z-index:999;pointer-events:auto;cursor:help;box-shadow:var(--shadow-2);transition:width .35s cubic-bezier(.4, 0, .2, 1), padding-left .35s cubic-bezier(.4, 0, .2, 1), border-color var(--motion-duration-instant) ease;border-radius:24px;justify-content:flex-start;align-items:center;padding-left:19px;display:flex;position:fixed;bottom:24px;left:24px;overflow:hidden}.connection-status:hover{border-color:var(--color-border-strong);width:200px;padding-left:16px}.status-dot{border-radius:50%;flex-shrink:0;width:8px;height:8px;display:inline-block;position:relative}.status-text{font-family:var(--font-family-headings);letter-spacing:.05em;white-space:nowrap;opacity:0;margin-left:10px;font-size:10px;font-weight:700;transition:opacity .25s,transform .25s;transform:translate(10px)}.connection-status:hover .status-text{opacity:1;transition-delay:.1s;transform:translate(0)}.status-dot.online{background-color:var(--color-success);box-shadow:0 0 8px var(--color-success);animation:2s infinite pulse-green}.status-dot.offline{background-color:var(--color-error);box-shadow:0 0 8px var(--color-error);animation:2s infinite pulse-red}@keyframes pulse-green{0%{transform:scale(.9);box-shadow:0 0 #10b981b3}70%{transform:scale(1.1);box-shadow:0 0 0 6px #10b98100}to{transform:scale(.9);box-shadow:0 0 #10b98100}}@keyframes pulse-red{0%{transform:scale(.9);box-shadow:0 0 #ef4444b3}70%{transform:scale(1.1);box-shadow:0 0 0 6px #ef444400}to{transform:scale(.9);box-shadow:0 0 #ef444400}}.notif-wrapper{z-index:999;position:fixed;bottom:24px;right:144px}.notif-btn{background:var(--color-card-bg);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border:1px solid var(--color-card-border);width:48px;height:48px;color:var(--color-text-primary);cursor:pointer;box-shadow:var(--shadow-2);transition:all var(--motion-duration-instant) ease;border-radius:50%;justify-content:center;align-items:center;display:flex;position:relative}.notif-btn:hover{border-color:var(--color-border-strong);color:var(--color-border-strong);box-shadow:var(--shadow-3);transform:scale(1.1)}.notif-btn:active{transform:scale(.95)}.notif-badge{background-color:var(--color-error);width:10px;height:10px;box-shadow:0 0 6px var(--color-error);border-radius:50%;display:none;position:absolute;top:10px;right:10px}.notif-badge.active{animation:1.5s infinite pulse-red;display:block}.tab-notif-dot{background-color:var(--color-error);width:7px;height:7px;box-shadow:0 0 4px var(--color-error);border-radius:50%;display:none;position:absolute;top:4px;right:4px}.tab-notif-dot.active{display:block}.floating-share-btn{background:var(--color-card-bg);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border:1px solid var(--color-card-border);width:48px;height:48px;color:var(--color-text-primary);cursor:pointer;z-index:999;box-shadow:var(--shadow-2);transition:all var(--motion-duration-instant) ease;border-radius:50%;justify-content:center;align-items:center;display:flex;position:fixed;bottom:24px;right:204px}.floating-share-btn:hover{border-color:var(--color-border-strong);color:var(--color-border-strong);box-shadow:var(--shadow-3);transform:scale(1.1)}.floating-share-btn:active{transform:scale(.95)}.notif-popover{border-radius:var(--radius-lg);background:var(--color-card-bg);-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);border:1px solid var(--color-card-border);width:320px;box-shadow:var(--shadow-3);opacity:0;pointer-events:none;z-index:1000;transition:opacity .25s,transform .25s;position:absolute;bottom:60px;right:0;overflow:hidden;transform:translateY(10px)}.notif-popover.open{opacity:1;pointer-events:auto;transform:translateY(0)}.notif-popover-header{border-bottom:1px solid var(--color-card-border);justify-content:space-between;align-items:center;padding:12px 16px;display:flex}.notif-popover-title{font-family:var(--font-family-headings);color:var(--color-text-primary);font-size:13px;font-weight:700}.notif-mark-read-btn{color:var(--color-border-strong);font-family:var(--font-family-headings);cursor:pointer;border-radius:var(--radius-sm);background:0 0;border:none;align-items:center;gap:4px;padding:4px 8px;font-size:11px;font-weight:600;transition:opacity .2s;display:none}.notif-mark-read-btn:hover{opacity:.8;background:#ffffff0d}.notif-popover-body{max-height:250px;overflow-y:auto}.notif-item{cursor:pointer;text-align:left;transition:background var(--motion-duration-instant) ease;gap:12px;padding:14px 16px;display:flex}.notif-item:hover{background:#ffffff08}.notif-item.unread{border-left:3px solid var(--color-border-strong);background:#dc5f0008}.notif-item-icon{width:32px;height:32px;color:var(--color-text-secondary);background:#ffffff0d;border-radius:50%;flex-shrink:0;justify-content:center;align-items:center;display:flex}.notif-item.unread .notif-item-icon{color:var(--color-border-strong);background:#ff6b0026}.notif-item-content{flex-grow:1}.notif-item-category{font-family:var(--font-family-headings);letter-spacing:.05em;color:var(--color-border-strong);text-transform:uppercase;margin-bottom:2px;font-size:9px;font-weight:700;display:block}.notif-item-title{color:var(--color-text-primary);margin:0 0 4px;font-size:12px;font-weight:600;line-height:1.4}.notif-item-desc{color:var(--color-text-secondary);margin:0;font-size:10px}.notif-empty{text-align:center;color:var(--color-text-secondary);flex-direction:column;align-items:center;gap:8px;padding:24px;display:flex}.notif-empty svg{color:var(--color-text-muted)}.notif-empty p{margin:0;font-size:11px}@media (width<=480px){.notif-popover{width:auto;position:fixed;bottom:80px;left:20px;right:20px}}