:root{
  --bg1:#080b18; --bg2:#0f1430;
  --card:rgba(21,27,52,.66); --card-2:rgba(13,17,36,.5);
  --border:rgba(124,138,210,.16); --border-strong:rgba(124,138,210,.32);
  --text:#eef1ff; --muted:#aab2e2; --muted2:#7a83b6;
  --p1:#7c6cff; --p2:#27d3e6;
  --ok:#34d399; --warn:#fbbf24; --bad:#fb6f6f;
  --radius:20px; --radius-sm:13px;
  --shadow:0 24px 60px -20px rgba(0,0,0,.6);
}
*{box-sizing:border-box}
html,body{height:auto}
body{
  margin:0; min-height:100vh; color:var(--text);
  font-family: ui-sans-serif, system-ui, -apple-system, "PingFang SC", "Microsoft YaHei", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing:antialiased;
  background: linear-gradient(180deg, var(--bg1), var(--bg2)) fixed;
  padding: 44px 18px 64px;
  position: relative;
  overflow-x: hidden;
}
/* 动态多彩极光背景（纯 CSS，自托管；尊重 prefers-reduced-motion） */
body::before, body::after{
  content:""; position:fixed; inset:-25%; z-index:-1; pointer-events:none; will-change:transform;
}
body::before{
  background:
    radial-gradient(38% 38% at 22% 26%, rgba(124,108,255,.42), transparent 62%),
    radial-gradient(34% 34% at 80% 18%, rgba(39,211,230,.32), transparent 62%);
  animation: aurora-a 26s ease-in-out infinite alternate;
}
body::after{
  background:
    radial-gradient(40% 40% at 78% 74%, rgba(251,123,176,.28), transparent 62%),
    radial-gradient(34% 38% at 24% 80%, rgba(95,168,255,.28), transparent 62%),
    radial-gradient(30% 30% at 54% 48%, rgba(61,220,151,.20), transparent 62%);
  animation: aurora-b 34s ease-in-out infinite alternate;
}
@keyframes aurora-a{
  0%{ transform: translate3d(-3%,-2%,0) scale(1) }
  100%{ transform: translate3d(5%,4%,0) scale(1.18) }
}
@keyframes aurora-b{
  0%{ transform: translate3d(3%,2%,0) scale(1.12) rotate(0deg) }
  100%{ transform: translate3d(-4%,-3%,0) scale(1) rotate(10deg) }
}
@media (prefers-reduced-motion: reduce){
  body::before, body::after{ animation: none }
}
a{color:var(--p2); text-decoration:none}
a:hover{text-decoration:none}
.wrap{width:min(1520px,100%); margin:0 auto; display:flex; flex-direction:column; gap:18px}
/* 左右两栏：左=站点，右=日程+任务 */
.cols{display:grid; grid-template-columns:minmax(0,1.6fr) minmax(0,1fr); gap:18px; align-items:start}
.col-main, .col-side{display:flex; flex-direction:column; gap:18px; min-width:0}
@media (max-width:1024px){ .cols{grid-template-columns:1fr} }
.wrap-narrow{width:min(440px,100%)}
.mt-page{margin-top:8vh}
.mt{margin-top:14px}
.tc{text-align:center}.tl{text-align:left}.hide{display:none}
.row{display:flex; gap:10px; align-items:center; flex-wrap:wrap}
.between{justify-content:space-between}

.brand{display:flex; align-items:center; gap:11px; font-weight:800; font-size:18px; letter-spacing:.2px; color:var(--text)}
.brand:hover{text-decoration:none}
.brand .dot{width:13px;height:13px;border-radius:6px;background:linear-gradient(135deg,var(--p1),var(--p2)); box-shadow:0 0 16px rgba(124,108,255,.6)}
.brand-xl{justify-content:center; font-size:23px; margin-bottom:20px}

.card{
  background:var(--card); border:1px solid var(--border); border-radius:var(--radius);
  box-shadow:var(--shadow); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
}
.inner{padding:22px}
h1{margin:0; font-size:23px; letter-spacing:-.2px}
h2{margin:0; font-size:17px; letter-spacing:-.1px}
.muted{color:var(--muted); font-size:13.5px; line-height:1.7}
.muted2{color:var(--muted2); font-size:12px; line-height:1.6}
.code{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; font-size:12px; padding:1px 6px; border-radius:6px; background:rgba(8,12,25,.6); border:1px solid var(--border)}

/* ===== Topbar ===== */
.topbar .inner{padding:13px 18px}
.user-chip{display:inline-flex; align-items:center; gap:8px; padding:5px 12px 5px 6px; border-radius:99px; border:1px solid var(--border); background:var(--card-2)}
.user-name{font-size:13px; color:var(--muted); max-width:160px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.avatar-sm{width:26px;height:26px;border-radius:50%; display:flex;align-items:center;justify-content:center; font-size:12px;font-weight:800;color:#0a0e1c; background:linear-gradient(135deg,var(--p1),var(--p2))}

/* ===== Buttons ===== */
.btn{display:inline-flex; align-items:center; justify-content:center; gap:8px; height:40px; padding:0 15px; border-radius:11px; border:1px solid var(--border); background:var(--card-2); color:var(--text); font-size:13.5px; cursor:pointer; white-space:nowrap; transition:transform .14s, border-color .14s, background .14s, filter .14s}
.btn:hover{transform:translateY(-1px); border-color:var(--border-strong); text-decoration:none}
.btn.primary{border:0; color:#070a16; font-weight:800; background:linear-gradient(135deg,var(--p1),var(--p2))}
.btn.primary:hover{filter:brightness(1.08)}
.btn.bad{border-color:rgba(251,111,111,.4); color:#ffd2d2}
.btn.lg{height:50px; font-size:15px; padding:0 22px; border-radius:14px}
.btn.block{width:100%}
.btn:disabled{opacity:.5; cursor:not-allowed; transform:none}

/* ===== Inputs ===== */
.field{display:flex; flex-direction:column; gap:6px; margin-bottom:14px}
.field label{font-size:13px; color:var(--muted)}
input[type=text],input[type=password],input[type=number],input[type=date],input[type=datetime-local],input[type=search],select,textarea{
  height:44px; padding:0 13px; border-radius:12px; border:1px solid var(--border); background:var(--card-2); color:var(--text); font-size:15px; width:100%; transition:border-color .14s, box-shadow .14s}
textarea{height:auto; padding:11px 13px; min-height:72px}
input:focus,select:focus,textarea:focus{outline:none; border-color:rgba(39,211,230,.65); box-shadow:0 0 0 3px rgba(39,211,230,.14)}

.notice{padding:13px 15px; border-radius:13px; font-size:13px; line-height:1.6; border:1px solid var(--border); background:var(--card-2)}
.notice.error{border-color:rgba(251,111,111,.45); color:#ffd9d9; background:rgba(251,111,111,.09)}
.notice.ok{border-color:rgba(52,211,153,.45); color:#c7f7e0; background:rgba(52,211,153,.09)}
.pill{display:inline-flex; align-items:center; padding:5px 11px; border-radius:99px; font-size:12px; border:1px solid var(--border); background:var(--card-2); color:var(--muted)}

/* ===== Hero ===== */
.hero{position:relative; overflow:hidden}
.hero::before{content:""; position:absolute; right:-60px; top:-80px; width:280px; height:280px; border-radius:50%; background:radial-gradient(circle,rgba(124,108,255,.35),transparent 70%); pointer-events:none}
.hero-inner{display:flex; align-items:center; gap:18px; flex-wrap:wrap; position:relative}
.hero-avatar{width:58px;height:58px;border-radius:18px; flex:0 0 auto; display:flex;align-items:center;justify-content:center; font-size:24px;font-weight:800;color:#070a16; background:linear-gradient(135deg,var(--p1),var(--p2)); box-shadow:0 10px 30px -8px rgba(124,108,255,.7)}
.hero-text{flex:1; min-width:200px}
.hero-text h1{font-size:25px}
.hero-text .muted{margin:5px 0 0}
.hero-stats{display:flex; gap:10px}
.stat{min-width:78px; padding:11px 16px; border-radius:14px; border:1px solid var(--border); background:var(--card-2); text-align:center}
.stat-num{display:block; font-size:22px; font-weight:800; line-height:1.1; background:linear-gradient(135deg,#cfc8ff,#bdf1f7); -webkit-background-clip:text; background-clip:text; color:transparent}
.stat-label{display:block; font-size:11.5px; color:var(--muted2); margin-top:3px}

/* ===== Section head ===== */
.sec-head{display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:4px}
.sec-title{display:flex; align-items:center; gap:9px; font-size:17px; font-weight:800}
.sec-title .ic{font-size:18px}
.site-search{height:38px; width:210px; border-radius:99px; padding:0 15px; font-size:13.5px}
.tc-num{font-size:11px; opacity:.6; margin-left:6px}
.tab.active .tc-num{opacity:.8}

/* ===== 导航集合 ===== */
.cat-head{display:flex; align-items:center; gap:9px; margin:18px 0 11px}
.cat-name{font-size:12px; font-weight:800; letter-spacing:1.2px; text-transform:uppercase; color:var(--muted2)}
.cat-count{font-size:11px; color:var(--muted2); padding:1px 8px; border-radius:99px; border:1px solid var(--border)}
.cat-line{flex:1; height:1px; background:linear-gradient(90deg,var(--border),transparent)}

.grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(248px,1fr)); gap:13px}
.link-card{
  position:relative; display:flex; gap:14px; align-items:center; padding:15px 16px;
  border:1px solid var(--border); border-radius:var(--radius-sm); background:var(--card-2); color:var(--text);
  overflow:hidden; transition:transform .15s, border-color .15s, background .15s;
}
.link-card::after{content:""; position:absolute; inset:0; border-radius:inherit; background:radial-gradient(120px 80px at 18% 0%, var(--acc-bg,transparent), transparent 70%); opacity:0; transition:opacity .2s; pointer-events:none}
.link-card:hover{transform:translateY(-3px); border-color:var(--acc,var(--border-strong)); background:var(--card); text-decoration:none}
.link-card:hover::after{opacity:1}
.link-icon{
  flex:0 0 auto; width:48px; height:48px; border-radius:14px; display:flex; align-items:center; justify-content:center; font-size:25px;
  background:var(--acc-bg,rgba(124,108,255,.16)); border:1px solid var(--acc-bd,var(--border)); box-shadow:inset 0 1px 0 rgba(255,255,255,.06);
}
.link-main{display:flex; flex-direction:column; gap:3px; min-width:0; flex:1}
.link-title{font-weight:700; font-size:15px; display:flex; align-items:center; gap:7px; flex-wrap:wrap}
.link-desc{font-size:12px; color:var(--muted2); overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.link-go{flex:0 0 auto; color:var(--muted2); font-size:15px; opacity:.5; transition:opacity .15s, transform .15s}
.link-card:hover .link-go{opacity:1; transform:translate(2px,-2px); color:var(--acc,var(--p2))}
.tag-admin{font-size:10px; padding:2px 7px; border-radius:7px; background:rgba(124,108,255,.2); border:1px solid rgba(124,108,255,.45); color:#d4ccff; font-weight:600}
.tag-off{font-size:10px; padding:2px 7px; border-radius:7px; background:rgba(251,111,111,.16); border:1px solid rgba(251,111,111,.4); color:#ffcfcf; font-weight:600}
.tag-deprecated{font-size:10px; padding:2px 7px; border-radius:7px; background:rgba(251,191,36,.18); border:1px solid rgba(251,191,36,.45); color:#ffe0a3; font-weight:600}

/* 分类配色 */
.acc-0{--acc:#8b7cff;--acc-bg:rgba(139,124,255,.16);--acc-bd:rgba(139,124,255,.32)}
.acc-1{--acc:#2fd4e6;--acc-bg:rgba(47,212,230,.15);--acc-bd:rgba(47,212,230,.3)}
.acc-2{--acc:#3ddc97;--acc-bg:rgba(61,220,151,.15);--acc-bd:rgba(61,220,151,.3)}
.acc-3{--acc:#fbbf24;--acc-bg:rgba(251,191,36,.15);--acc-bd:rgba(251,191,36,.3)}
.acc-4{--acc:#fb7bb0;--acc-bg:rgba(251,123,176,.15);--acc-bd:rgba(251,123,176,.3)}
.acc-5{--acc:#5fa8ff;--acc-bg:rgba(95,168,255,.15);--acc-bd:rgba(95,168,255,.3)}

/* ===== 我的日程 ===== */
.cal-list{display:flex; flex-direction:column; gap:8px}
.cal-item{display:flex; gap:14px; align-items:baseline; padding:12px 15px; border:1px solid var(--border); border-radius:12px; background:var(--card-2); color:var(--text); text-decoration:none; transition:border-color .14s, transform .12s}
a.cal-item:hover{border-color:rgba(39,211,230,.55); transform:translateY(-1px); text-decoration:none}
.cal-when{flex:0 0 auto; min-width:130px; font-size:12px; font-weight:700; color:var(--p2)}
.cal-sum{font-size:14px; overflow-wrap:anywhere}
.cal-empty{padding:16px 4px; text-align:center; color:var(--muted2); font-size:13px}

/* ===== 任务面板 ===== */
.tabs{gap:6px; background:var(--card-2); padding:4px; border-radius:99px; border:1px solid var(--border)}
.tab{height:30px; padding:0 14px; border-radius:99px; border:0; background:transparent; color:var(--muted); font-size:13px; cursor:pointer; transition:background .14s, color .14s}
.tab:hover{color:var(--text)}
.tab.active{color:#070a16; font-weight:800; background:linear-gradient(135deg,var(--p1),var(--p2))}
.task-add{display:flex; gap:9px; flex-wrap:wrap; margin-top:16px}
.task-add #t-title{flex:1; min-width:180px}
.task-add #t-priority{width:96px; flex:0 0 auto}
.task-add #t-due{width:158px; flex:0 0 auto}
.task-list{display:flex; flex-direction:column; gap:9px; margin-top:14px}
.task-item{display:flex; gap:13px; align-items:flex-start; padding:13px 15px; border:1px solid var(--border); border-radius:13px; background:var(--card-2); transition:border-color .14s, background .14s}
.task-item:hover{border-color:var(--border-strong)}
.task-item.done{opacity:.55}
.task-item.done .t-title{text-decoration:line-through; color:var(--muted)}
.t-check{flex:0 0 auto; padding-top:1px}
.t-check input{appearance:none; -webkit-appearance:none; width:21px; height:21px; border-radius:7px; border:2px solid var(--border-strong); background:var(--card-2); cursor:pointer; position:relative; transition:background .14s, border-color .14s}
.t-check input:checked{background:linear-gradient(135deg,var(--p1),var(--p2)); border-color:transparent}
.t-check input:checked::after{content:"✓"; position:absolute; inset:0; display:flex; align-items:center; justify-content:center; font-size:13px; font-weight:900; color:#070a16}
.t-body{flex:1; min-width:0; display:flex; flex-direction:column; gap:7px}
.t-title{font-size:15px; cursor:text; overflow-wrap:anywhere; line-height:1.35}
.t-edit{font-size:15px; height:38px}
.t-editing{display:flex; flex-direction:column; gap:8px}
.te-title{height:38px; font-size:15px}
.te-row{display:flex; gap:8px; flex-wrap:wrap; align-items:center}
.te-row .te-prio{width:88px}
.te-row .te-due{width:150px}
.te-row .te-prio,.te-row .te-due,.te-row .btn{height:38px}
.t-meta{display:flex; gap:8px; align-items:center; flex-wrap:wrap}
.prio{display:inline-flex; align-items:center; gap:5px; font-size:11px; padding:3px 9px; border-radius:99px; border:1px solid var(--border); color:var(--muted)}
.prio::before{content:""; width:6px;height:6px;border-radius:50%; background:var(--muted2)}
.prio.p-high{color:#ffcdcd; border-color:rgba(251,111,111,.45); background:rgba(251,111,111,.1)}
.prio.p-high::before{background:var(--bad)}
.prio.p-low::before{background:#6b74a8}
.due{display:inline-flex; align-items:center; gap:5px; font-size:11px; color:var(--muted2)}
.due.overdue{color:#ff9d9d}
.due.due-soon{color:#ffe0a3}
.t-actions{flex:0 0 auto; opacity:0; transition:opacity .14s}
.task-item:hover .t-actions{opacity:1}
.icon-btn{border:0; background:transparent; cursor:pointer; font-size:16px; opacity:.7; padding:5px; border-radius:9px; transition:background .14s, opacity .14s}
.icon-btn:hover{opacity:1; background:rgba(251,111,111,.16)}
.empty{text-align:center; padding:30px 10px; color:var(--muted2); font-size:13.5px}
.empty::before{content:"🗒"; display:block; font-size:34px; opacity:.5; margin-bottom:8px}

/* ===== 后台 ===== */
.admin-list{display:flex; flex-direction:column; gap:9px; margin-top:14px}
.admin-row{display:flex; gap:12px; align-items:center; justify-content:space-between; flex-wrap:wrap; padding:13px 15px; border:1px solid var(--border); border-radius:13px; background:var(--card-2)}
.ar-main{display:flex; gap:12px; align-items:center; min-width:0; flex:1}
.ar-title{font-weight:700; font-size:15px; display:flex; align-items:center; gap:7px; flex-wrap:wrap}
.ar-actions{flex-wrap:wrap; justify-content:flex-end}
.editor{display:inline-block}
.editor>summary{list-style:none; cursor:pointer}
.editor>summary::-webkit-details-marker{display:none}
.editor[open]{display:block; width:100%; margin-top:10px}
.editor[open]>summary{margin-bottom:8px}
.form-grid{display:grid; grid-template-columns:1fr 1fr; gap:11px; align-items:end}
.form-grid label{display:flex; flex-direction:column; gap:6px; font-size:13px; color:var(--muted)}
.form-grid .col2{grid-column:1 / -1}
.form-grid .check{flex-direction:row; align-items:center; gap:8px}
.form-grid .check input{width:18px; height:18px}
.cat-new-wrap.hide{display:none}
.audit-list{display:flex; flex-direction:column; gap:5px; max-height:520px; overflow:auto; margin-top:14px}
.audit-row{display:flex; gap:10px; align-items:center; flex-wrap:wrap; padding:8px 11px; border:1px solid var(--border); border-radius:10px; background:var(--card-2); font-size:12px}
.audit-row .ts{flex:0 0 auto}
.audit-row .detail{overflow-wrap:anywhere; flex:1; min-width:160px}

@media (max-width:640px){
  body{padding:28px 12px 44px}
  .inner{padding:17px}
  .hero-text h1{font-size:21px}
  .hero-stats{width:100%}
  .stat{flex:1}
  .grid{grid-template-columns:1fr}
  .task-add #t-priority,.task-add #t-due{flex:1}
  .site-search{width:100%}
  .cal-item{flex-wrap:wrap; gap:3px}
  .cal-when{min-width:0}
  .form-grid{grid-template-columns:1fr}
  .ar-actions{width:100%; justify-content:flex-start}
  input,select,textarea{font-size:16px}
}