*{box-sizing:border-box}
.material-symbols-outlined{font-variation-settings:"FILL" 0,"wght" 400,"GRAD" 0,"opsz" 24;vertical-align:middle}
.paper-texture{background-color:#fcfaf2;background-image:url(https://lh3.googleusercontent.com/aida-public/AB6AXuBDrtHrVX3ETZPei-8dC2eYJMaU0Fk2WFLhg9e3Foxt8jFOtd0u3hTqB6m_aDpZlGgi30cQJmm0Vi_S-QIZSjlUwynXlhi1zwumEK3iJuX5l8SDRQYsgNivgp1d26mEnPklUDTHz4G70xvlGKjThthj2sV3zfUk4-C0DaJF6Nxwy3zMcwMhC1s2KmdaoY1MJDfcjrJHeNj3IZjXqHT-GpONoOH6CsUft0CZPo80WNovBLkFmE6ojpDiJJajKlY4fWt0mzIDg3UKGjI)}
/* ── SIDEBAR ── */
#sidebar{position:fixed;top:0;left:0;height:100vh;width:280px;transform:translateX(-100%);transition:transform .3s cubic-bezier(.4,0,.2,1);z-index:80;display:flex;flex-direction:column;background:#f7f2e8;border-right:1px solid #efe9da;overflow-y:auto}
#sidebar.open{transform:translateX(0)}
#sidebar-overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,0.35);z-index:79;backdrop-filter:blur(2px)}
#sidebar-overlay.open{display:block}
@media(min-width:1024px){#app-main.sidebar-open{margin-left:280px;transition:margin-left .3s}#app-main{transition:margin-left .3s}}
/* ── SPLASH ── */
#splash-screen{transition:opacity .4s ease,visibility .4s;backdrop-filter:blur(20px) saturate(180%);background-color:rgba(252,250,242,0.9);z-index:200}
#splash-screen.hidden{opacity:0;visibility:hidden;pointer-events:none}
/* ── MODAL ── */
#media-modal{display:none;position:fixed;inset:0;z-index:500;background:rgba(0,0,0,0.88);align-items:center;justify-content:center;padding:16px}
#media-modal.open{display:flex}
#modal-inner{background:#fff;border-radius:20px;overflow:hidden;width:100%;max-width:960px;max-height:92vh;display:flex;flex-direction:column}
#modal-body{flex:1;min-height:0;overflow:auto}
#modal-body iframe,#modal-body video,#modal-body audio,#modal-body object{width:100%;display:block}
#modal-body img{width:100%;height:100%;object-fit:contain;display:block}
.modal-ht{min-height:400px;max-height:70vh}
/* ── NOTIFICATION FLYOUT ── */
#notif-flyout{position:absolute;top:calc(100% + 8px);right:0;width:320px;background:#fff;border-radius:20px;box-shadow:0 20px 60px rgba(0,0,0,0.15);border:1px solid #efe9da;z-index:400;transform:translateY(-8px);opacity:0;pointer-events:none;transition:opacity .2s,transform .2s}
#notif-flyout.open{opacity:1;transform:translateY(0);pointer-events:auto}
/* ── TOAST ── */
#toast-container{position:fixed;top:72px;right:16px;z-index:600;display:flex;flex-direction:column;gap:8px;pointer-events:none;width:320px;max-width:calc(100vw - 32px)}
.toast{background:#fff;border-radius:16px;padding:12px 16px;box-shadow:0 8px 32px rgba(0,0,0,0.12);border:1px solid #efe9da;display:flex;align-items:flex-start;gap:12px;pointer-events:auto;animation:toastIn .25s ease;font-family:Inter,sans-serif}
.toast.error{border-left:4px solid #ba1a1a;background:#fffafa}.toast.warning{border-left:4px solid #fbbc00;background:#fffdf2}.toast.success{border-left:4px solid #006a6a;background:#f0fafa}.toast.info{border-left:4px solid #003466;background:#f5f8ff}
.toast-icon{font-size:1.1rem;margin-top:1px;flex-shrink:0}
.toast.error .toast-icon{color:#ba1a1a}.toast.warning .toast-icon{color:#ecb000}.toast.success .toast-icon{color:#006a6a}.toast.info .toast-icon{color:#003466}
.toast-msg{flex:1;font-size:.82rem;font-weight:600;color:#374151;line-height:1.4}
.toast-close{font-size:.7rem;color:#9ca3af;cursor:pointer;padding:2px;flex-shrink:0;font-weight:700}
@keyframes toastIn{from{opacity:0;transform:translateX(24px)}to{opacity:1;transform:translateX(0)}}
@keyframes toastOut{to{opacity:0;transform:translateX(24px)}}
/* ── UPLOAD PROGRESS ── */
#upload-progress-wrap{display:none;margin-top:8px}
/* ── CATEGORY HUB CARDS ── */
.cat-hub-card{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;padding:28px 20px;border-radius:24px;border:2px solid transparent;cursor:pointer;transition:all .2s cubic-bezier(.4,0,.2,1);position:relative;overflow:hidden;text-align:center;text-decoration:none}
.cat-hub-card:hover{transform:translateY(-4px) scale(1.02);box-shadow:0 16px 40px rgba(0,0,0,0.12)}
.cat-hub-card:active{transform:translateY(-1px) scale(1.01)}
.cat-hub-card .cat-icon-wrap{width:64px;height:64px;border-radius:20px;display:flex;align-items:center;justify-content:center;flex-shrink:0;font-size:2rem;transition:transform .2s}
.cat-hub-card:hover .cat-icon-wrap{transform:scale(1.1) rotate(-2deg)}
.cat-hub-card .cat-name{font-family:Manrope,sans-serif;font-weight:800;font-size:1.05rem;color:#003466;letter-spacing:-.02em}
.cat-hub-card .cat-count{font-size:.7rem;font-weight:700;padding:3px 10px;border-radius:9999px;display:inline-block}
.cat-hub-card .cat-arrow{position:absolute;bottom:14px;right:14px;opacity:0;transform:translateX(-6px);transition:all .2s}
.cat-hub-card:hover .cat-arrow{opacity:1;transform:translateX(0)}
/* Show All card */
.cat-hub-card.showall{background:linear-gradient(135deg,#003466 0%,#006a6a 100%);border-color:transparent}
.cat-hub-card.showall .cat-name{color:#fff}
.cat-hub-card.showall .cat-count{background:rgba(255,255,255,0.2);color:#fff}
.cat-hub-card.showall .cat-arrow{color:#fff}
/* ── CARD GRID ── */
#dynamic-resource-container{display:grid;gap:16px;grid-template-columns:repeat(auto-fill,minmax(min(100%,280px),1fr))}
/* ── CARD PREVIEW ── */
.card-preview{width:100%;aspect-ratio:16/9;overflow:hidden;background:#1a1a1a;position:relative;flex-shrink:0;cursor:pointer}
.card-preview iframe,.card-preview video{width:100%;height:100%;border:none;display:block;pointer-events:none}
.card-preview img{width:100%;height:100%;object-fit:cover;display:block}
.card-preview .prev-ph{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;padding:12px;text-align:center}
.card-preview .prev-ph span.material-symbols-outlined{font-size:2.5rem}
.card-preview .prev-ph p{font-size:.6rem;font-weight:700;text-transform:uppercase;letter-spacing:.1em;color:rgba(255,255,255,0.65)}
.card-preview .yt-play{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:rgba(0,0,0,0.22)}
.card-preview .yt-play span{font-size:3rem;color:#fff;filter:drop-shadow(0 2px 8px rgba(0,0,0,0.6))}
.action-badge{display:inline-flex;align-items:center;gap:4px;padding:4px 10px;border-radius:9999px;font-size:.65rem;font-weight:800;text-transform:uppercase;letter-spacing:.08em}
/* ── PINBOARD ── */
.pin-card{background:#fff;border-radius:16px;padding:16px;box-shadow:4px 4px 0 rgba(0,0,0,0.08);border:1px solid rgba(0,0,0,0.07);transition:transform .2s,box-shadow .2s;cursor:default;position:relative}
.pin-card:hover{transform:translateY(-4px) rotate(0.5deg);box-shadow:6px 10px 24px rgba(0,0,0,0.12)}
.pin-card.yellow-card{background:#fff9db;border-color:rgba(251,188,0,0.3)}.pin-card.blue-card{background:#eff6ff;border-color:rgba(59,130,246,0.2)}.pin-card.green-card{background:#f0fdf4;border-color:rgba(0,106,106,0.2)}.pin-card.pink-card{background:#fff1f2;border-color:rgba(186,26,26,0.15)}
.pin-dot{position:absolute;top:-6px;left:50%;transform:translateX(-50%);width:12px;height:12px;border-radius:50%;box-shadow:0 2px 4px rgba(0,0,0,0.25)}
/* ── MISC ── */
.star-btn{cursor:pointer;transition:transform .1s,color .2s,opacity .2s}.star-btn:hover{transform:scale(1.25)}
@keyframes starGlow{0%,100%{filter:drop-shadow(0 0 2px rgba(251,188,0,0.5))}50%{filter:drop-shadow(0 0 7px rgba(251,188,0,1)) drop-shadow(0 0 14px rgba(255,210,0,0.5))}}
@keyframes starPulse{0%,100%{opacity:0.65}50%{opacity:0.35}}
.star-glow{animation:starGlow 1.3s ease-in-out infinite}
.star-dim{animation:starPulse 1.5s ease-in-out infinite;color:#94a3b8 !important}
.sort-btn.active-sort{color:#003466;font-weight:800}
.washi-tape{position:absolute;width:70px;height:22px;background:rgba(255,215,0,0.4);top:-11px;left:50%;transform:translateX(-50%) rotate(-2deg);z-index:30;border-radius:2px}
.washi-tape-blue{background:rgba(0,52,102,0.3)}.washi-tape-red{background:rgba(186,26,26,0.3)}.washi-tape-green{background:rgba(0,106,106,0.3)}
.notif-badge{position:absolute;top:2px;right:2px;background:#ba1a1a;color:#fff;border-radius:9999px;min-width:16px;height:16px;font-size:9px;font-weight:900;display:flex;align-items:center;justify-content:center;padding:0 3px;border:2px solid #fff;pointer-events:none}
.btn-bookmark.bookmarked .material-symbols-outlined{font-variation-settings:"FILL" 1;color:#fbbc00}
.comment-pending{border-left:3px solid #fbbc00;opacity:.7}
.watermark{position:fixed;font-family:"Material Symbols Outlined";font-size:160px;color:rgba(0,52,102,0.03);pointer-events:none;z-index:0;user-select:none}
.cat-btn{display:flex;align-items:center;gap:10px;padding:10px 14px;border-radius:16px;font-size:.8rem;font-weight:700;cursor:pointer;transition:all .15s;width:100%;text-align:left;background:rgba(255,255,255,0.7);border:1px solid rgba(0,0,0,0.06)}
.cat-btn:hover,.cat-btn.active{background:#fff;box-shadow:0 2px 8px rgba(0,52,102,0.1);color:#003466}.cat-btn.active{border-color:rgba(0,52,102,0.2)}
.nav-tabs{display:flex;align-items:center;gap:20px;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch;scroll-snap-type:x mandatory;overscroll-behavior-x:contain}.nav-tabs::-webkit-scrollbar{display:none}.nav-tabs button{scroll-snap-align:start;white-space:nowrap}.nav-tabs-wrap{position:relative;flex:1;min-width:0;overflow:hidden}.nav-tabs-wrap::after{content:'';position:absolute;top:0;right:0;height:100%;width:32px;background:linear-gradient(to left,rgba(255,255,255,0.9),transparent);pointer-events:none}
#docx-container{padding:24px;background:#fff;overflow-y:auto;max-height:70vh;font-family:Inter,sans-serif;font-size:14px;line-height:1.7;color:#374151}
/* ── CATEGORY PAGE BACK HEADER ── */
#cat-page-header{display:none}
/* ── RATING PILLS ── */
.rating-pill{background:#f1f5f9;color:#64748b;border:1px solid #e2e8f0}
.rating-pill.active-pill{background:#003466;color:#fff;border-color:#003466}
.rating-pill:hover:not(.active-pill){background:#e2e8f0}
/* ── RATING CARD PIN ── */
.rating-card{overflow:visible}
.rating-card-pin{position:absolute;top:-14px;left:50%;transform:translateX(-50%) rotate(0deg);transition:transform .2s ease;opacity:0;pointer-events:none}
.rating-card:hover .rating-card-pin{opacity:1;transform:translateX(-50%) rotate(-12deg)}
/* ── RATE CARD PUSHPIN (left column) ── */
.rating-pin{transition:transform .25s ease}
.rating-pin:hover{transform:translateX(-50%) rotate(-20deg) scale(1.2)}

/* ── SKELETON LOADING ── */
@keyframes shimmer{0%{background-position:-200% 0}100%{background-position:200% 0}}
.skeleton{background:linear-gradient(90deg,#f0f0f0 25%,#e8e8e8 50%,#f0f0f0 75%);background-size:200% 100%;animation:shimmer 1.5s infinite;border-radius:8px}
.skeleton-card{animation:fadeIn .3s ease}
@keyframes fadeIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}

/* ── FEATURED BADGE ── */
.feat-star{position:absolute;top:4px;left:6px;z-index:40;font-size:1rem;line-height:1;filter:drop-shadow(0 1px 3px rgba(0,0,0,0.3))}

/* ── DARK MODE ── */
body.dark-mode{background:#1a1a2e;color:#e2e8f0}
body.dark-mode #app-main>header{background:rgba(20,20,40,0.85)!important;border-color:rgba(255,255,255,0.08)!important}
body.dark-mode #sidebar{background:#12122a;border-color:rgba(255,255,255,0.08)}
body.dark-mode .bg-white,body.dark-mode [class*="bg-white"]{background:#1e1e3a!important}
body.dark-mode [class*="bg-\[#f7f2e8\]"],[class*="bg-\[#fcfaf2\]"]{background:#12122a!important}
body.dark-mode .border-slate-100{border-color:rgba(255,255,255,0.07)!important}
body.dark-mode .text-slate-500,.dark-mode .text-slate-600{color:#94a3b8!important}
body.dark-mode #app-main{background:#1a1a2e}
body.dark-mode .paper-texture{background-color:#1a1a2e;background-image:none}
body.dark-mode .cat-hub-card{border-color:rgba(255,255,255,0.08)!important}
body.dark-mode .cat-btn{background:rgba(255,255,255,0.05);border-color:rgba(255,255,255,0.08);color:#94a3b8}
body.dark-mode .cat-btn:hover,.dark-mode .cat-btn.active{background:rgba(0,52,102,0.4);color:#e2e8f0}
body.dark-mode .card-preview{background:#0f0f1f}
body.dark-mode footer{background:rgba(15,15,40,0.8)!important;border-color:rgba(255,255,255,0.08)!important}