:root{
      --brand:#ff7f27;
      --brand-2:#ffb37a;
      --text:#111827;
      --muted:#6b7280;
      --line:#e5e7eb;
      --bg:#f7f7f8;
      --card:#ffffff;
      --radius:12px;
      --sidebar:280px;
      --container:1180px;
      --shadow:0 1px 2px rgba(0,0,0,.03),0 8px 30px rgba(0,0,0,.04);
      --success:#22c55e;
      --warn:#f59e0b;
      --danger:#ef4444;
      --gray:#9ca3af;
    }
    *{box-sizing:border-box}
    html,body{height:100%}
    body{
      margin:0;
      font:14px/1.7 ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",PingFang SC,Hiragino Sans GB,Microsoft YaHei,Helvetica,Arial;
      -webkit-font-smoothing:antialiased;
      -moz-osx-font-smoothing:grayscale;
      color:var(--text);
      background:linear-gradient(180deg,#fafafa 0%,#f7f7f8 100%);
      letter-spacing:.2px;
    }
    a{color:inherit;text-decoration:none}
    button{cursor:pointer}
    .container{max-width:var(--container);margin:0 auto;padding:0 16px}
    /* Header */
    .header{
      position:sticky;top:0;z-index:50;
      backdrop-filter:saturate(140%) blur(8px);
      background:rgba(255,255,255,.85);
      border-bottom:1px solid var(--line);
    }
    .header-inner{
      height:64px;display:flex;align-items:center;justify-content:flex-start;gap:16px;flex-wrap:nowrap;overflow:hidden
    }
  .brand{display:flex;align-items:center;gap:12px;flex:1;min-width:0}
    .logo{
      width:28px;height:28px;border-radius:7px;background:var(--brand);
      box-shadow:inset 0 -4px 10px rgba(0,0,0,.1);
      background-size:cover;background-position:center center;background-repeat:no-repeat;
    }
    .site-name{font-weight:700;letter-spacing:.3px}
  .nav{display:flex;gap:10px;color:#374151;flex:1;min-width:0;flex-wrap:nowrap;overflow-x:auto;-ms-overflow-style:none;scrollbar-width:none}
  .nav::-webkit-scrollbar{display:none}
  .nav a{padding:6px 8px;border-radius:8px;white-space:nowrap}
    .nav a.active,.nav a:hover{color:#0b0b0b;background:#f3f4f6}
  .right{display:flex;align-items:center;gap:10px;flex-shrink:0;white-space:nowrap;margin-left:auto}
  .search{display:none;flex:0 0 auto;min-width:0}
  @media (min-width:1100px){.search{display:block}}
  .search input{height:34px;border:1px solid var(--line);border-radius:9px;padding:0 10px;width:180px;max-width:18vw;background:#fff}
    .btn{
      height:32px;padding:0 12px;border:1px solid var(--line);background:#fff;border-radius:9px;transition:.2s;
      box-shadow:0 1px 0 rgba(0,0,0,.02)
    }
    .btn:hover{transform:translateY(-1px)}
    .btn.primary{background:var(--brand);border-color:var(--brand);color:#fff}
    .btn.success{background:var(--success);border-color:var(--success);color:#fff}
    .btn.warn{background:var(--warn);border-color:var(--warn);color:#fff}
    .btn.danger{background:var(--danger);border-color:var(--danger);color:#fff}
    .btn.sm{height:28px;padding:0 10px;border-radius:7px;font-size:12px}
    .btn.xs{height:24px;padding:0 8px;border-radius:6px;font-size:12px}
    /* New settings button (brand style) */
    .settings-btn{
      display:flex;align-items:center;gap:8px;
      height:36px;padding:0 12px;border-radius:999px;
      border:1px solid var(--brand-2);
      background:linear-gradient(180deg,#fff,#fff);
      color:var(--brand);
      box-shadow:0 1px 0 rgba(0,0,0,.02);
    }
    .settings-btn:hover{background:#fff7ed;border-color:#ffa55e}
    .settings-icon{width:18px;height:18px;display:block}
    /* 右上角头像（仅显示，不可在此编辑） */
    .header-avatar{
      width:28px;height:28px;border-radius:999px;border:1px solid var(--line);object-fit:cover;display:none
    }
    /* Layout */
    .main{padding:20px 0}
    .grid{display:grid;gap:20px;grid-template-columns:1fr}
    @media (min-width:980px){.grid{grid-template-columns:var(--sidebar) 1fr}}
    .card{
      background:var(--card);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);
    }
    .sidebar .block{padding:16px;margin-bottom: 20px;}
    .profile{display:flex;gap:12px;align-items:center}
    .avatar{
      position:relative;
      width:48px;height:48px;border-radius:999px;overflow:hidden;
      display:grid;place-items:center;background:linear-gradient(135deg,#f3f4f6,#d1d5db);
      font-weight:700;color:#374151;
    }
    .avatar img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:none}
    .muted{color:var(--muted)}
    .qr{position:relative;width:100%;border-radius:10px;border:1px solid var(--line);overflow:hidden;background:#fff}
    .qr img{width:100%;height:auto;}
    .list{padding:12px}
    .list .item{padding:8px 0;border-bottom:1px dashed #eee;font-size:13px}
    .list .item:last-child{border-bottom:0}
    /* Content */
    .article{padding:22px}
    .article header{display:flex;align-items:flex-start;justify-content:space-between;gap:16px}
    .article h2{margin:0;font-size:20px;letter-spacing:.2px}
    .meta{font-size:12px;color:#6b7280;text-align:right}
    .excerpt{margin:10px 0 0;color:#374151}
    .read{margin-top:12px;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
    .chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
    .chip{font-size:12px;line-height:20px;background:#f3f4f6;color:#374151;border:1px solid #eceff3;padding:0 8px;border-radius:999px}
    /* Expandable content */
    .content{margin-top:12px;border-top:1px dashed #eee;padding-top:12px;display:none}
  .content-inner{max-height:none;overflow:visible;padding-right:0}
    .content p{margin:8px 0;color:#374151}
    .toggle{font-size:13px}
    /* 压缩内容样式 */
  .compressed-content{max-height:none;overflow:visible;position:static}
  .compressed-content:after{display:none}
    /* Sections */
    .section.active{display:block}
    .section-title{font-size:18px;font-weight:700;margin:2px 0 10px}
    .section-subtitle{font-size:12px;color:#6b7280;margin:-4px 0 14px}
    .notice{
      border-left:4px solid var(--brand);background:#fff7ed;padding:12px 14px;border-radius:10px;margin:10px 0;color:#7c2d12
    }
    /* Drawer */
    .overlay{position:fixed;inset:0;background:rgba(0,0,0,.45);display:none;align-items:center;justify-content:center;z-index:100}
    .overlay.show{display:flex}
    .modal{width:min(520px,92vw);background:#fff;border-radius:14px;border:1px solid var(--line);box-shadow:0 10px 30px rgba(0,0,0,.1)}
    .modal .hd{padding:14px 16px;border-bottom:1px solid var(--line);font-weight:700}
    .modal .bd{padding:16px}
    .modal .ft{padding:12px 16px;border-top:1px solid var(--line);display:flex;gap:8px;justify-content:flex-end}
    .field{display:grid;gap:6px;margin:10px 0}
    .field input,.field textarea,.field select{
      height:36px;border:1px solid var(--line);border-radius:9px;padding:0 10px;width:100%;font-size:14px;background:#fff
    }
    .field input[type="file"]{height:auto;padding:10px}
    .field small{color:var(--muted)}
    .field textarea{height:86px;padding:8px 10px;resize:vertical;line-height:1.5}
    .drawer{
      position:fixed;top:0;right:0;height:100%;width:min(420px,92vw);background:#fff;border-left:1px solid var(--line);
      transform:translateX(105%);transition:.25s;z-index:90;display:flex;flex-direction:column;box-shadow:-8px 0 24px rgba(0,0,0,.06)
    }
    .drawer.show{transform:translateX(0)}
    .drawer .hd{padding:16px;border-bottom:1px solid var(--line);font-weight:700}
    .drawer .bd{padding:16px;flex:1;overflow:auto}
    .drawer .ft{padding:12px;border-top:1px solid var(--line);display:flex;gap:8px;justify-content:space-between}
    .switch{position:relative;width:46px;height:26px;background:#e5e7eb;border-radius:999px;display:inline-block;vertical-align:middle}
    .switch i{position:absolute;top:3px;left:3px;width:20px;height:20px;background:#fff;border-radius:999px;box-shadow:0 1px 2px rgba(0,0,0,.2);transition:.2s}
    .switch.on{background:#22c55e}
    .switch.on i{left:23px}
    /* Pagination */
    .pager{display:flex;gap:8px;align-items:center;justify-content:flex-start;margin:16px 0}
    .page{border:1px solid var(--line);background:#fff;border-radius:8px;padding:6px 10px}
    .page.active{background:#111827;color:#fff;border-color:#111827}
    /* Tiny toast */
    .toast{position:fixed;left:50%;bottom:20px;transform:translateX(-50%);background:#111827;color:#fff;padding:8px 12px;border-radius:8px;font-size:13px;display:none;z-index:200}
    .toast.show{display:block}
    /* Helper */
    .group-title{font-weight:700;margin-top:4px}
    .hint{font-size:12px;color:#6b7280}
    .hidden{display:none !important}

    /* Resource page UI */
    .res-top{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:10px}
    .tabs{display:flex;gap:8px;flex-wrap:wrap}
    .tab{padding:6px 10px;border:1px solid var(--line);background:#fff;border-radius:999px}
    .tab.active{border-color:var(--brand);color:var(--brand);background:#fff7ed}
    .filters{display:flex;gap:8px;flex-wrap:wrap}
    .filter{padding:6px 10px;border:1px solid var(--line);border-radius:999px;background:#fff;font-size:13px}
    .filter.active{border-color:#111827;background:#111827;color:#fff}
    .res-list{display:flex;flex-direction:column;gap:10px;margin-top:8px}
    .res-item{display:flex;gap:12px;padding:14px}
    .res-icon{width:42px;height:42px;border-radius:10px;background:#eef2ff;display:grid;place-items:center;font-weight:700;color:#1e40af}
    .res-meta{flex:1}
    .res-title{margin:0;font-weight:700}
    .res-desc{color:#374151;margin:6px 0 8px}
    .res-actions{display:flex;gap:8px;flex-wrap:wrap}
    .disabled{opacity:.5;pointer-events:none}

    /* 排序条（文章/论坛通用） */
    .sortbar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:6px 0 12px}
    .seg{display:inline-flex;background:#fff;border:1px solid var(--line);border-radius:999px;overflow:hidden}
    .seg button{border:0;background:transparent;padding:6px 12px}
    .seg button.active{background:#111827;color:#fff}

    /* 评论区美化 */
    .comments-area {margin-top: 30px; border-top: 1px solid var(--line); padding-top: 20px;}
    .comments-title {font-size: 1.25rem; font-weight: 600; margin-bottom: 20px;}
    .comment-list {list-style: none; padding: 0; margin: 0;}
    .comment-body {background: #fff; padding: 16px; border: 1px solid var(--line); border-radius: 12px; margin-bottom: 16px;}
    .comment-meta {display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px;}
    .comment-author img {border-radius: 50%; width: 40px; height: 40px; vertical-align: middle; margin-right: 10px;}
    .comment-author .fn {font-weight: 600; color: var(--text);}
    .comment-metadata {font-size: 12px; color: var(--muted);}
    .comment-content p {margin: 0; line-height: 1.6;}
    .reply {margin-top: 10px; text-align: right;}
    .comment-reply-link {font-size: 12px; color: var(--brand); border: 1px solid var(--brand-2); padding: 4px 10px; border-radius: 6px;}
    .comment-reply-link:hover {background: var(--brand-2); color: #fff;}

    /* 评论输入框 */
    .comment-respond {background: #f9fafb; padding: 20px; border-radius: 12px; border: 1px solid var(--line); margin-top: 30px;}
    .comment-reply-title {font-size: 1.1rem; font-weight: 600; margin-bottom: 15px;}
    .comment-form {display: grid; gap: 12px;}
    .comment-form-comment label {display: none;}
    .comment-form-comment textarea {width: 100%; border: 1px solid var(--line); border-radius: 8px; padding: 12px; font-family: inherit; resize: vertical; min-height: 100px;}
    .comment-form-author input, .comment-form-email input, .comment-form-url input {width: 100%; border: 1px solid var(--line); border-radius: 8px; padding: 10px;}
    .form-submit .submit {background: var(--brand); color: #fff; border: none; padding: 10px 24px; border-radius: 8px; font-weight: 600; transition: .2s;}
    .form-submit .submit:hover {background: #ea580c; transform: translateY(-1px);}

    /* 审核列表 */
    .audit-row{display:flex;gap:8px;align-items:center;justify-content:space-between;border-bottom:1px dashed #eee;padding:8px 0}
    .audit-title{font-weight:600}
    .audit-right{display:flex;gap:6px;align-items:center}

    /* 论坛 */
    .forum-top{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
    .forum-list{display:flex;flex-direction:column;gap:10px}
    .thread{padding:16px}
    .thread-title{margin:0}
    .thread-meta{font-size:12px;color:#6b7280;display:flex;gap:10px;flex-wrap:wrap;align-items:center}
    .thread-ops{display:flex;gap:6px;flex-wrap:wrap}
    /* 点赞高亮 */
    .liked{outline:2px solid #ffedd5}
  /* 小头像 */
  .avatar-sm{width:20px;height:20px;border-radius:999px;border:1px solid var(--line);object-fit:cover;vertical-align:middle;margin-right:6px}
  .avatar-sm.fallback{display:inline-grid;place-items:center;background:#f3f4f6;color:#374151;font-size:12px;font-weight:700}
  /* 抽屉遮罩 */
  .drawer-mask{position:fixed;inset:0;background:rgba(0,0,0,.35);display:none;z-index:80}
  .drawer-mask.show{display:block}