@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@500;600;700;800&display=swap');
:root{--ap-bg:rgba(255,255,255,0.92);--ap-blur:blur(16px);--ap-brand:#0062ff;--ap-brand-hover:rgba(0,98,255,0.08);--ap-text-900:#0f172a;--ap-text-500:#64748b;--ap-border:rgba(15,23,42,0.06);--ap-shadow:0 12px 40px -10px rgba(0,0,0,0.12);--ap-spring:cubic-bezier(0.175,0.885,0.32,1.1);--ap-smooth:cubic-bezier(0.16,1,0.3,1)}
.mobile-dock,.mobile-dock *,.pro-header,.pro-header *{box-sizing:border-box!important}
.mobile-dock{position:fixed;bottom:0;left:0;right:0;height:calc(60px + env(safe-area-inset-bottom));padding-bottom:env(safe-area-inset-bottom);background:var(--ap-bg);backdrop-filter:var(--ap-blur);-webkit-backdrop-filter:var(--ap-blur);border-top:1px solid var(--ap-border);display:none;justify-content:space-around;align-items:center;z-index:2000}

body{font-family:'Plus Jakarta Sans',sans-serif;margin:0;padding-top:72px;-webkit-font-smoothing:antialiased;padding-bottom:calc(64px + env(safe-area-inset-bottom))}
.pro-header{position:fixed;top:0;left:0;right:0;height:72px;background:var(--ap-bg);backdrop-filter:var(--ap-blur);-webkit-backdrop-filter:var(--ap-blur);border-bottom:1px solid var(--ap-border);z-index:2000;display:flex;justify-content:center;transition:transform .4s var(--ap-smooth);will-change:transform}
.pro-header.hidden{transform:translateY(-100%)}
.nav-core{width:100%;max-width:1280px;padding:0 24px;height:100%;display:grid;grid-template-columns:1fr auto 1fr;align-items:center}
.ap-logo{font-weight:800;font-size:30px;color:var(--ap-text-900);text-decoration:none;letter-spacing:-.8px;display:inline-flex;align-items:center;gap:4px}
.ap-logo span{color:var(--ap-brand)}
.nav-links{display:flex;gap:4px;justify-content:center}
.nav-item{display:flex;align-items:center;gap:8px;padding:8px 16px;border-radius:99px;color:var(--ap-text-500);text-decoration:none;font-weight:600;font-size:14px;transition:var(--ap-smooth) .2s}
.nav-item svg{width:18px;height:18px;transition:transform .2s var(--ap-spring)}
.nav-item:hover{color:var(--ap-text-900);background:rgba(15,23,42,0.03)}
.nav-item:hover svg{transform:scale(1.1)}
.nav-item.active{color:var(--ap-brand);background:var(--ap-brand-hover)}
.nav-item.active svg{stroke-width:2.5}
.nav-actions{display:flex;justify-content:flex-end;align-items:center;gap:16px}
.btn-write{background:var(--ap-text-900);color:#fff;padding:8px 20px;border-radius:99px;font-size:13px;font-weight:700;text-decoration:none;transition:transform .2s var(--ap-spring);display:flex;align-items:center;gap:6px}
.btn-write:hover{transform:translateY(-2px);box-shadow:0 4px 12px rgba(15,23,42,0.2)}
.btn-login-nav{display:inline-flex;align-items:center;gap:8px;background-color:#000;color:#fff;padding:7px;border-radius:99px;text-decoration:none;font-weight:700;font-size:10px;transition:background-color .2s ease,transform .1s ease}
.btn-login-nav:hover{background-color:#0062ff;color:#fff}
.btn-login-nav:active{transform:scale(.98)}
.login-icon{width:40px;height:40px;border-radius:50%;display:flex;align-items:center;justify-content:center;color:var(--ap-text-500);transition:.2s var(--ap-spring);background:rgba(15,23,42,0.03)}
.login-icon:hover{background:var(--ap-brand);color:#fff;transform:translateY(-2px);box-shadow:0 4px 12px rgba(0,98,255,0.3)}
.notif-wrap{position:relative;display:flex;cursor:pointer}
.notif-bell{width:40px;height:40px;border-radius:50%;display:flex;align-items:center;justify-content:center;color:var(--ap-text-500);transition:.2s;background:transparent}
.notif-wrap.open .notif-bell,.notif-wrap:hover .notif-bell{background:rgba(15,23,42,0.04);color:var(--ap-text-900)}
.notif-dot{position:absolute;top:8px;right:8px;width:8px;height:8px;background:#ef4444;border-radius:50%;border:2px solid #fff;box-sizing:content-box;display:none}
@keyframes pulse-ring{0%{box-shadow:0 0 0 0 rgba(239,68,68,0.4)}70%{box-shadow:0 0 0 6px rgba(239,68,68,0)}100%{box-shadow:0 0 0 0 rgba(239,68,68,0)}}
.notif-dot.active{display:block;animation:pulse-ring 2s infinite}
.notif-dropdown{position:absolute;top:54px;right:0;width:340px;background:var(--ap-bg);backdrop-filter:var(--ap-blur);-webkit-backdrop-filter:var(--ap-blur);border:1px solid var(--ap-border);border-radius:20px;box-shadow:var(--ap-shadow);opacity:0;visibility:hidden;transform:translateY(10px) scale(.98);transition:var(--ap-smooth) .3s;overflow:hidden;z-index:2001;transform-origin:top right}
.notif-wrap.open .notif-dropdown{opacity:1;visibility:visible;transform:translateY(0) scale(1)}
.notif-header{display:flex;justify-content:space-between;align-items:center;padding:16px 20px;border-bottom:1px solid var(--ap-border)}
.notif-header h4{margin:0;font-size:14px;font-weight:800;color:var(--ap-text-900)}
.notif-clear{background:none;border:none;color:var(--ap-brand);font-size:12px;font-weight:700;cursor:pointer;padding:0}
.notif-clear:hover{text-decoration:underline}
.notif-body{max-height:350px;overflow-y:auto}
.notif-empty{padding:40px 20px;text-align:center;color:var(--ap-text-500);font-size:13px;font-weight:600}
.notif-item{display:flex;gap:12px;padding:16px 20px;border-bottom:1px solid var(--ap-border);text-decoration:none;color:var(--ap-text-900);transition:background .2s}
.notif-item:hover{background:rgba(15,23,42,0.02)}
.notif-item img{width:36px;height:36px;min-width:36px;border-radius:50%;object-fit:cover;flex-shrink:0}
.notif-text{font-size:13px;line-height:1.4}
.notif-time{font-size:11px;color:var(--ap-text-500);margin-top:4px}
.user-avatar-link{text-decoration:none;display:inline-block}
.user-avatar{width:38px;height:38px;border-radius:12px;object-fit:cover;box-shadow:0 0 0 1px rgba(0,0,0,0.05);transition:.2s var(--ap-spring);cursor:pointer;display:block}
.user-avatar:hover{box-shadow:0 0 0 2px var(--ap-brand);transform:scale(1.05)}
.initials-avatar{background:var(--ap-brand);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:14px;letter-spacing:1px}
.m-link{flex:1;height:100%;display:flex;align-items:center;justify-content:center;color:var(--ap-text-500);text-decoration:none;-webkit-tap-highlight-color:transparent}
.m-link svg{width:26px;height:26px;transition:transform .2s var(--ap-spring)}
.m-link.active{color:var(--ap-text-900)}
.m-link.active svg{transform:translateY(-2px);stroke-width:2.5}
@media (max-width:900px){.btn-write,.nav-links{display:none}.nav-core{grid-template-columns:1fr 1fr;padding:0 16px}.pro-header{height:60px}.mobile-dock{display:flex}body{padding-top:60px}}

/* 1. The Shape of the Tag */
.n-tag {
    display: inline-flex;       /* Flexbox makes aligning the icon and text perfect */
    align-items: center;        /* Centers them vertically */
    gap: 4px;                   /* Adds exactly 4px of space between the icon and the text */
    font-size: 10px;
    text-transform: uppercase;
    font-weight: 800;
    padding: 3px 6px 3px 4px;   /* Slightly less padding on the left to balance the icon */
    border-radius: 4px;
    margin-right: 6px;      
    margin-bottom: 0px;     
    vertical-align: middle; 
    letter-spacing: 0.5px;
}

/* 2. The Icon Styling (CRITICAL) */
.n-tag svg {
    width: 12px;
    height: 12px;
    stroke: currentColor;       /* MAGIC: Forces the SVG to match the specific tag's text color! */
    fill: none;
    stroke-width: 2.5;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* 3. The Colors for the Tags */
.n-chat { background: #e0e7ff; color: #4338ca; }      
.n-follow { background: #dcfce7; color: #15803d; }    
.n-vote-up { background: #dbeafe; color: #1d4ed8; }   
.n-vote-down { background: #fee2e2; color: #b91c1c; } 
.n-cmt { background: #f3e8ff; color: #7e22ce; }      
.n-new { background: #faf5ff; color: #6b21a8; border: 1px solid #e9d5ff; } 
.n-book { background: #fef3c7; color: #b45309; }