:root{--mint: #70E4C2;--mint-l: #e6faf4;--mint-d: #3bbf9a;--gold: #FFD700;--gold-l: #fff9db;--gold-d: #b89b00;--teal: #0d7377;--teal-d: #064e51;--bg: #f0fdfa;--card: #fff;--border: #c8f5e8;--txt: #1f2937;--txt2: #6b7280;--red: #ef4444;--red-l: #fef2f2;--r: 14px;--rs: 8px;--sh: 0 2px 10px rgba(112,228,194,.12);--font: "Noto Sans SC", system-ui, sans-serif;--t: .18s ease}[data-theme=dark]{--bg: #0f1a1a;--card: #1a2e2e;--border: #2a4444;--txt: #e0f0ec;--txt2: #8aaba5;--mint-l: #1a3330;--gold-l: #2a2a10;--sh: 0 2px 10px rgba(0,0,0,.25)}*,*:before,*:after{box-sizing:border-box}body{margin:0;min-height:100vh;font-family:var(--font);background:var(--bg);color:var(--txt);line-height:1.55;transition:background var(--t),color var(--t)}#app{max-width:1200px;margin:0 auto;padding:1rem 1.25rem}#header{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:.75rem;padding:.85rem 1.25rem;margin-bottom:1rem;background:linear-gradient(135deg,var(--mint),#a8f0db 50%,var(--gold));border-radius:20px;box-shadow:var(--sh)}#headerLeft{display:flex;align-items:center;gap:.75rem}#headerMascot{width:56px;height:56px;object-fit:contain;filter:drop-shadow(0 3px 6px rgba(0,0,0,.1));animation:bob 2.5s ease-in-out infinite}@keyframes bob{0%,to{transform:translateY(0)}50%{transform:translateY(-5px)}}#headerTitle{margin:0;font-size:1.35rem;font-weight:900;color:var(--teal-d);text-shadow:0 1px 1px rgba(255,255,255,.5)}#headerSub{margin:.1rem 0 0;font-size:.78rem;color:var(--teal);font-weight:500}#headerRight{display:flex;gap:.4rem;align-items:center}#headerRight button,#headerRight label{padding:.32rem .65rem;font:inherit;font-size:.78rem;font-weight:600;background:#ffffff8c;border:1.5px solid rgba(255,255,255,.7);border-radius:var(--rs);color:var(--teal-d);cursor:pointer;transition:background var(--t)}#headerRight button:hover,#headerRight label:hover{background:#fff}#toggleTheme{font-size:1rem;padding:.3rem .5rem}#stats{display:flex;gap:.6rem;flex-wrap:wrap;margin-bottom:1rem}.st{flex:1;min-width:100px;background:var(--card);border:1px solid var(--border);border-radius:var(--r);padding:.6rem .75rem;text-align:center;box-shadow:var(--sh);transition:transform var(--t)}.st:hover{transform:translateY(-2px)}.st b{display:block;font-size:1.3rem;font-weight:900;color:var(--teal)}.st span{font-size:.75rem;color:var(--txt2)}#dropOverlay{display:none;position:fixed;top:0;right:0;bottom:0;left:0;z-index:1000;background:#70e4c240;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);align-items:center;justify-content:center}#dropOverlay.visible{display:flex}#dropContent{background:var(--card);border:3px dashed var(--mint);border-radius:20px;padding:2.5rem 3rem;text-align:center;box-shadow:0 8px 30px #0000001a}#dropContent p{margin:.5rem 0 0;font-size:1rem;font-weight:700;color:var(--teal)}#body{display:flex;gap:1rem;align-items:flex-start}#sidebar{width:195px;flex-shrink:0;background:var(--card);border:1px solid var(--border);border-radius:var(--r);padding:.75rem;box-shadow:var(--sh);position:sticky;top:1rem;overflow:hidden}#main{flex:1;min-width:0}@media (max-width:580px){#body{flex-direction:column}#sidebar{width:100%;position:static;display:flex;flex-wrap:wrap;gap:.5rem .75rem}#sidebar .sb-title{width:100%;margin-bottom:.25rem}#sidebar #courseList{display:flex;flex-wrap:wrap;gap:.25rem;width:100%}#sidebar #courseList li{margin:0}#sidebar .sb-all{width:auto;flex:none}#sidebar #tagCloud,#sidebar #sbTip{width:100%}}.sb-title{font-size:.72rem;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--teal);margin-bottom:.5rem}#courseList{list-style:none;padding:0;margin:0 0 .4rem}#courseList li{margin-bottom:.15rem}#courseList button{display:flex;align-items:center;gap:.4rem;width:100%;padding:.4rem .55rem;background:none;border:none;border-radius:var(--rs);font:inherit;font-size:.82rem;color:var(--txt);cursor:pointer;transition:background var(--t)}#courseList button:hover{background:var(--mint-l)}#courseList button.on{background:var(--mint);color:var(--teal-d);font-weight:600}.cnt{margin-left:auto;font-size:.68rem;background:var(--mint-l);color:var(--teal);padding:.05rem .4rem;border-radius:99px;font-weight:600}#courseList button.on .cnt{background:#ffffff73;color:var(--teal-d)}.sb-all{display:flex;align-items:center;gap:.4rem;width:100%;padding:.42rem .55rem;font:inherit;font-size:.82rem;font-weight:600;background:var(--gold-l);border:1px solid var(--gold);border-radius:var(--rs);color:var(--gold-d);cursor:pointer;transition:all var(--t)}.sb-all:hover,.sb-all.active{background:var(--gold);color:#fff}#tagCloud{display:flex;flex-wrap:wrap;gap:.3rem;margin-bottom:.3rem}#tagCloud button{padding:.15rem .45rem;font:inherit;font-size:.72rem;background:var(--mint-l);border:1px solid var(--border);border-radius:99px;color:var(--teal);cursor:pointer;transition:all var(--t)}#tagCloud button:hover,#tagCloud button.on{background:var(--mint);border-color:var(--mint);color:#fff}#sbTip{margin-top:.75rem;padding:.45rem .55rem;font-size:.7rem;color:var(--txt2);background:var(--mint-l);border-radius:var(--rs);border:1px dashed var(--border);line-height:1.35}#toolbar{display:flex;gap:.5rem;margin-bottom:1rem;flex-wrap:wrap;align-items:center}#searchWrap{flex:1;min-width:160px;position:relative}#searchIcon{position:absolute;left:.7rem;top:50%;transform:translateY(-50%);font-size:.85rem;pointer-events:none}#searchInput{width:100%;padding:.5rem .7rem .5rem 2.2rem;font:inherit;font-size:.85rem;border:2px solid var(--border);border-radius:var(--r);background:var(--card);color:var(--txt);transition:border-color var(--t)}#searchInput::placeholder{color:var(--txt2)}#searchInput:focus{outline:none;border-color:var(--mint);box-shadow:0 0 0 3px #70e4c22e}#sortSelect{padding:.5rem .6rem;font:inherit;font-size:.82rem;border:2px solid var(--border);border-radius:var(--r);background:var(--card);color:var(--txt);cursor:pointer}#sortSelect:focus{outline:none;border-color:var(--mint)}.btn-add{padding:.5rem .9rem;font:inherit;font-size:.85rem;font-weight:700;background:linear-gradient(135deg,var(--mint),var(--mint-d));color:#fff;border:none;border-radius:var(--r);cursor:pointer;white-space:nowrap;box-shadow:0 2px 8px #70e4c24d;transition:all var(--t)}.btn-add:hover{background:linear-gradient(135deg,var(--mint-d),var(--teal));transform:translateY(-1px)}#filterBar{margin-bottom:.75rem}#filterBar:empty{display:none}.fb{display:inline-flex;align-items:center;gap:.4rem;padding:.3rem .7rem;background:var(--mint-l);border:1px solid var(--mint);border-radius:99px;font-size:.8rem;font-weight:600;color:var(--teal)}.fb button{background:none;border:none;font-size:.9rem;cursor:pointer;color:var(--teal);padding:0;opacity:.6;transition:opacity var(--t)}.fb button:hover{opacity:1}#grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:.85rem}#grid.hide{display:none}.card{background:var(--card);border:2px solid var(--border);border-radius:var(--r);padding:.85rem .95rem;box-shadow:var(--sh);transition:all var(--t);position:relative;overflow:hidden}.card:after{content:"";position:absolute;top:0;left:0;right:0;height:3px;background:linear-gradient(90deg,var(--mint),var(--gold));opacity:0;transition:opacity var(--t)}.card:hover{border-color:var(--mint);box-shadow:0 6px 24px #70e4c233;transform:translateY(-2px)}.card:hover:after{opacity:1}.c-top{display:flex;align-items:flex-start;gap:.45rem;margin-bottom:.4rem}.c-icon{font-size:1.25rem;width:32px;height:32px;display:flex;align-items:center;justify-content:center;background:var(--mint-l);border-radius:var(--rs);flex-shrink:0}.c-title{flex:1;margin:0;font-size:.88rem;font-weight:700;line-height:1.3}.c-title a{color:inherit;text-decoration:none;transition:color var(--t)}.c-title a:hover{color:var(--mint-d)}.c-fav{background:none;border:none;font-size:.95rem;cursor:pointer;padding:.15rem;transition:transform var(--t)}.c-fav:hover{transform:scale(1.25)}.c-url{font-size:.72rem;color:var(--txt2);word-break:break-all;margin-bottom:.3rem}.c-url a{color:var(--teal);text-decoration:none}.c-url a:hover{text-decoration:underline}.c-note{font-size:.8rem;color:var(--txt2);margin-bottom:.5rem;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}.c-meta{display:flex;flex-wrap:wrap;gap:.25rem;margin-bottom:.5rem}.b-course{font-size:.68rem;font-weight:600;padding:.1rem .42rem;background:var(--gold-l);color:var(--gold-d);border:1px solid var(--gold);border-radius:99px}.b-tag{font-size:.68rem;padding:.1rem .38rem;background:var(--mint-l);color:var(--teal);border-radius:99px}.b-type{font-size:.68rem;font-weight:600;padding:.1rem .42rem;background:var(--mint-l);color:var(--teal);border:1px solid var(--border);border-radius:99px}.c-foot{display:flex;justify-content:flex-end;align-items:center;gap:.35rem;padding-top:.45rem;border-top:1px solid var(--border)}.c-date{margin-right:auto;font-size:.68rem;color:var(--txt2)}.c-dl{display:inline-flex;align-items:center;gap:.2rem;padding:.22rem .55rem;font-family:var(--font);font-size:.72rem;font-weight:700;text-decoration:none;background:linear-gradient(135deg,#4da6ff,#2979ff);color:#fff;border-radius:var(--rs);transition:all var(--t);box-shadow:0 1px 4px #2979ff40}.c-dl:hover{background:linear-gradient(135deg,#2979ff,#1565c0);transform:translateY(-1px);box-shadow:0 3px 8px #2979ff59}.c-edit,.c-del{padding:.22rem .5rem;font:inherit;font-size:.72rem;font-weight:600;border-radius:var(--rs);cursor:pointer;transition:all var(--t)}.c-edit{background:var(--mint-l);color:var(--teal);border:1px solid var(--mint)}.c-edit:hover{background:var(--mint);color:#fff}.c-del{background:var(--red-l);color:var(--red);border:1px solid #fecaca}.c-del:hover{background:var(--red);color:#fff}#empty{display:none;text-align:center;padding:2.5rem 1rem}#empty.show{display:block}#emptyImg{width:90px;opacity:.65;animation:bob 3s ease-in-out infinite}#emptyTitle{font-size:1rem;font-weight:700;color:var(--teal);margin:.5rem 0 .2rem}#emptyHint{font-size:.85rem;color:var(--txt2);margin:0}#modal{border:none;border-radius:var(--r);padding:0;max-width:440px;width:92%;background:var(--card);box-shadow:0 12px 40px #0d737726}#modal::backdrop{background:#0d73774d}#form{padding:1.25rem}#formHeader{display:flex;align-items:center;gap:.55rem;margin-bottom:1rem}#formMascot{width:34px;height:34px;object-fit:contain}#formTitle{margin:0;font-size:1.05rem;font-weight:800;color:var(--teal)}.fl{display:block;font-size:.8rem;font-weight:600;color:var(--txt);margin-bottom:.7rem}.fl input,.fl textarea,.fl select{display:block;width:100%;margin-top:.25rem;padding:.45rem .65rem;font:inherit;font-size:.85rem;border:2px solid var(--border);border-radius:var(--rs);background:var(--card);color:var(--txt);transition:border-color var(--t)}.fl textarea{resize:vertical;min-height:48px}.fl input:focus,.fl textarea:focus,.fl select:focus{outline:none;border-color:var(--mint);box-shadow:0 0 0 3px #70e4c21f}.fl-row{display:flex;gap:.6rem}.fl-row .fl{flex:1}#formFoot{display:flex;justify-content:flex-end;gap:.4rem;margin-top:1rem;padding-top:.7rem;border-top:1px solid var(--border)}.btn-cancel{padding:.45rem .85rem;font:inherit;font-size:.85rem;font-weight:600;background:none;border:2px solid var(--border);border-radius:var(--r);color:var(--txt2);cursor:pointer;transition:all var(--t)}.btn-cancel:hover{border-color:var(--mint);color:var(--teal);background:var(--mint-l)}.btn-save{padding:.45rem .85rem;font:inherit;font-size:.85rem;font-weight:700;background:linear-gradient(135deg,var(--mint),var(--mint-d));color:#fff;border:none;border-radius:var(--r);cursor:pointer;transition:all var(--t)}.btn-save:hover{background:linear-gradient(135deg,var(--mint-d),var(--teal))}#footer{display:flex;align-items:center;justify-content:center;gap:.4rem;margin-top:1.5rem;padding:.75rem;font-size:.75rem;color:var(--txt2)}#footerMascot{width:20px;height:20px;object-fit:contain;opacity:.65}.toast{position:fixed;bottom:1.25rem;right:1.25rem;padding:.55rem 1.1rem;background:var(--teal);color:#fff;font-family:var(--font);font-size:.85rem;font-weight:600;border-radius:var(--r);box-shadow:0 4px 16px #00000026;z-index:9999;animation:slideUp .3s ease,fadeAway .3s ease 2s forwards}@keyframes slideUp{0%{transform:translateY(16px);opacity:0}to{transform:translateY(0);opacity:1}}@keyframes fadeAway{to{opacity:0}}@media (max-width:600px){#header{padding:.7rem .85rem}#headerMascot{width:42px;height:42px}#headerTitle{font-size:1.1rem}.fl-row{flex-direction:column;gap:0}#stats{gap:.35rem}.st{min-width:75px;padding:.45rem .5rem}.st b{font-size:1.05rem}}