*{box-sizing:border-box;}
body{margin:0;padding:0;overflow-x:hidden;}
.home-layout{display:grid;grid-template-columns:180px 1fr 260px;gap:16px;width:800px;margin:0 auto;padding:20px 0;box-sizing:border-box;}
.home-sidebar-left{background:#fff;border-radius:12px;padding:20px;border:1px solid #e2e8f0;height:-webkit-fit-content;height:fit-content;}
.sidebar-title{font-size:16px;font-weight:600;color:#0f172a;margin-bottom:15px;padding-bottom:12px;border-bottom:2px solid #10b981;text-align:center;margin:0 auto 15px;display:block;width:100%;}
.category-menu{list-style:none;padding:0;margin:0;}
.category-menu-item{margin-bottom:4px;}
.category-menu-link{display:block;padding:10px 12px;color:#475569;text-decoration:none;border-radius:8px;transition:all .3s;font-size:14px;text-align:center;}
.category-menu-link:hover{background:#ecfdf5;color:#059669;}
.home-main{background:#fff;border-radius:12px;padding:20px;border:1px solid #e2e8f0;min-width:0;}
.site-list-simple{list-style:none;padding:0;margin:0;}
.site-item-simple{padding:6px 0;border-bottom:1px solid #f1f5f9;line-height:1.4;}
.site-item-simple:last-child{border-bottom:none;}
.site-title-line{display:flex;align-items:center;gap:6px;justify-content:flex-start;text-align:left;}
.site-favicon-simple{width:14px;height:14px;border-radius:3px;object-fit:cover;flex-shrink:0;}
.site-title-simple{margin:0;font-size:13px;font-weight:500;line-height:1.3;flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-align:left;}
.site-title-simple a{color:#0f172a;text-decoration:none;display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-align:left;}
.site-title-simple a:hover{color:#059669;}
.home-sidebar-right{display:flex;flex-direction:column;gap:16px;}
.sidebar-box{background:#fff;border-radius:12px;padding:16px;border:1px solid #e2e8f0;}
.sidebar-box-title{font-size:14px;font-weight:600;color:#0f172a;margin-bottom:12px;padding-bottom:10px;border-bottom:2px solid #e2e8f0;display:flex;align-items:center;gap:8px;}
.sidebar-box-title::before{content:'';display:inline-block;width:4px;height:14px;background:#10b981;border-radius:2px;}
.sidebar-list{list-style:none;padding:0;margin:0;}
.sidebar-list-item{padding:8px 0;border-bottom:1px solid #f1f5f9;display:flex;align-items:center;gap:8px;}
.sidebar-list-item:last-child{border-bottom:none;}
.sidebar-list-rank{width:18px;height:18px;display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:600;border-radius:4px;flex-shrink:0;}
.rank-1{background:#fef3c7;color:#d97706;}
.rank-2{background:#f3f4f6;color:#6b7280;}
.rank-3{background:#ffedd5;color:#c2410c;}
.rank-other{background:#f8fafc;color:#94a3b8;}
.sidebar-list-link{flex:1;color:#334155;text-decoration:none;font-size:13px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;transition:color .2s;}
.sidebar-list-link:hover{color:#059669;}
.sidebar-list-meta{font-size:11px;color:#94a3b8;flex-shrink:0;}
@media (max-width:1040px){body{overflow-x:auto;}.header-container,.main-nav{width:800px !important;}}
@media (max-width:768px){
*{box-sizing:border-box;}
body{overflow-x:hidden;}
.home-layout{width:100%;grid-template-columns:1fr;gap:16px;padding:16px;}
.home-sidebar-left{order:3;display:none;}
.home-main{order:2;width:100%;}
.home-sidebar-right{order:1;flex-direction:column;gap:12px;align-items:center;}
.sidebar-box{width:100%;min-width:100%;margin:0;text-align:center;}
.sidebar-box-title{justify-content:center;}
.sidebar-list{text-align:left;}
.sidebar-list-meta{display:none;}
.site-title-simple{font-size:12px;}
.header-container,.main-nav{width:100% !important;}}
@media (max-width:480px){
.home-layout{padding:12px;gap:12px;}
.home-main{padding:16px;}
.site-item-simple{padding:5px 0;}
.site-title-simple{font-size:11px;}
.site-favicon-simple{width:12px;height:12px;}
.sidebar-box{padding:12px;}
.sidebar-box-title{font-size:13px;margin-bottom:8px;padding-bottom:8px;}
.sidebar-list-item{padding:6px 0;}
.sidebar-list-link{font-size:12px;}
.sidebar-list-rank{width:16px;height:16px;font-size:10px;}}

.friend-links {
    max-width: 800px;
    margin: 2rem auto;
    padding: 0 1rem;
    font-family: system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  }
  .friend-links h3 {
    font-size: 1.5rem;
    font-weight: 600;
    margin-bottom: 1.5rem;
    padding-bottom: 0.5rem;
    border-bottom: 2px solid #e5e7eb;
    color: #1f2937;
  }
  .link-list {
    display: flex;
    flex-wrap: wrap;
    gap: 1.2rem;
  }
  .link-item {
    flex: 1 1 200px;
    background: #f9fafb;
    border-radius: 16px;
    padding: 1rem 1.2rem;
    transition: all 0.2s;
    border: 1px solid #e5e7eb;
  }
  .link-item:hover {
    background: #ffffff;
    border-color: #cbd5e1;
    box-shadow: 0 4px 10px rgba(0,0,0,0.03);
  }
  .link-item a {
    text-decoration: none;
    font-weight: 600;
    font-size: 1.1rem;
    color: #2563eb;
    display: block;
    margin-bottom: 0.4rem;
  }
  .link-item a:hover {
    text-decoration: underline;
  }
  .link-desc {
    font-size: 0.85rem;
    color: #4b5563;
    line-height: 1.4;
  }
  @media (max-width: 500px) {
    .link-item { flex-basis: 100%; }
  }

.friendlink-section {
    max-width: 800px;
    margin: 20px auto;
    padding: 15px;
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}
.friendlink-title {
    font-size: 14px;
    color: #666;
    margin-bottom: 12px;
    padding-bottom: 6px;
    border-bottom: 1px solid #f0f0f0;
}
.friendlink-list {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}
.friendlink-item {
    display: inline-block;
    padding: 5px 10px;
    background: #f8f9fa;
    color: #666;
    text-decoration: none;
    border-radius: 4px;
    font-size: 13px;
    transition: all 0.3s;
}
.friendlink-item:hover {
    background: #e9ecef;
    color: #333;
}