/* 全局变量统一 */
:root {
  /* Layout */
  --top-nav-height: 80px;
  --footer-height: 80px;
  --left-nav-width: 15rem;
  --right-nav-width: 12rem;
  --center-column-top-padding: calc(var(--pico-block-spacing-vertical) * 2);

  /* Typography */
  --h1-font-size: 2rem;
  --h2-font-size: 1.5rem;
  --h3-font-size: 1.25rem;
  --h4-font-size: 1.1rem;
  --h5-font-size: 0.75rem;
  --h6-font-size: 0.825rem;
  --boldish: 600;

  /* Icons & Theme */
  --pdocs-note-icon: #017FC0;
  --pdocs-warning-icon: #D93526;
  --pdocs-tip-icon: #005F3D;
  --pdocs-home-background: #C5EAFF;

  --pico-border-radius: 1rem;

}

/* 亮色主题（默认） */
:root:not([data-theme="dark"]) {
  --pico-color: #354971;
  --pico-text-selection-color: rgba(51, 135, 255, 0.25);
  --pico-muted-color: #687695;
  --pico-muted-border-color: #CDD1DC;
  --pico-primary: #0061EB;
  --pico-primary-background: #0061EB;
  --pico-primary-underline: rgba(0, 78, 188, 0.5);
  --pico-primary-hover: #004EBC;
  --pico-primary-hover-background: #004EBC;
  --pico-primary-focus: rgba(51, 135, 255, 0.5);
  --pico-primary-inverse: #E6E8ED;
  --pico-secondary: #9086FA;
  --pico-card-background-color: #F9FAFE;
}

/* 暗色主题（手动） */
:root[data-theme="dark"] {
  --pdocs-note-icon: #51B4FF;
  --pdocs-warning-icon: #F06048;
  --pdocs-tip-icon: #00B478;
  --pdocs-home-background: #010A1E;

  --pico-color: #c2c7d0;
  --pico-text-selection-color: rgba(1, 170, 255, 0.1875);
  --pico-muted-color: #7b8495;
  --pico-muted-border-color: #202632;
  --pico-primary: #01aaff;
  --pico-primary-background: #0172ad;
  --pico-primary-underline: rgba(1, 170, 255, 0.5);
  --pico-primary-hover: #79c0ff;
  --pico-primary-hover-background: #017fc0;
  --pico-primary-focus: rgba(1, 170, 255, 0.375);
  --pico-primary-inverse: #fff;
  --pico-secondary: #969eaf;
  --pico-card-background-color: #151a24;
}

/* 系统暗色偏好 */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --pdocs-note-icon: #51B4FF;
    --pdocs-warning-icon: #F06048;
    --pdocs-tip-icon: #00B478;
    --pdocs-home-background: #010A1E;

    --pico-color: #c2c7d0;
    --pico-text-selection-color: rgba(1, 170, 255, 0.1875);
    --pico-muted-color: #7b8495;
    --pico-muted-border-color: #202632;
    --pico-primary: #01aaff;
    --pico-primary-background: #0172ad;
    --pico-primary-underline: rgba(1, 170, 255, 0.5);
    --pico-primary-hover: #79c0ff;
    --pico-primary-hover-background: #017fc0;
    --pico-primary-focus: rgba(1, 170, 255, 0.375);
    --pico-primary-inverse: #fff;
    --pico-secondary: #969eaf;
    --pico-card-background-color: #181c25;
  }
}

:where(blockquote,hgroup)~:is(h1,h2,h3,h4,h5,h6) {
    margin-top: var(--pico-typography-spacing-top);
}

/* 基础网格容器 */
[grid-cols] {
  display: grid;
  gap: 1rem;
  /* 新增：防止内容撑开网格，更稳定 */
  grid-template-columns: 1fr;
}

/* 2列网格 */
[grid-cols="2"] {
  grid-template-columns: repeat(2, 1fr);
}

/* 3列网格 */
[grid-cols="3"] {
  grid-template-columns: repeat(3, 1fr);
}

/* 最后一个元素占满剩余空间 */
[grid-cols="2"] > :last-child:nth-child(2n - 1) {grid-column: span 2;}
[grid-cols="3"] > :last-child:nth-child(3n - 2) {grid-column: span 3;}
[grid-cols="3"] > :last-child:nth-child(3n - 1) {grid-column: span 2;}

/* 通用跨列规则 */
[span="1"] { grid-column: span 1; }
[span="2"] { grid-column: span 2; }
[span="3"] { grid-column: span 3; }

[grid-cols]>article{
  display:grid;
  grid-template-rows:auto 1fr auto;
  position: relative;
  .card-link::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      z-index: 1
  }
}

/* 响应式：小屏幕统一单列 */
@media (max-width: 992px) {
  [grid-cols] {
    grid-template-columns: 1fr !important;
  }
  [span] {
    grid-column: span 1 !important;
  }
}

/* 全局基础 */
body {
  font-variant-ligatures: no-contextual;
}
html {
  scroll-padding-top: calc(var(--top-nav-height) + var(--pico-block-spacing-vertical));
}

.txt-align-center{
  text-align: center;
}

footer{
  opacity: 0.8;
  text-align: center;
}
[type="search"] {
  --pico-border-radius: 0.5rem;
}

/* 全局禁止图片拖动 */
img {
  -webkit-user-drag: none;
  user-drag: none;
  pointer-events: none;
}

/* 标题 */
h1 { --pico-font-size: var(--h1-font-size); --pico-line-height: 1; }
h2, h3, h4, h6 { --pico-font-family: "Epilogue", sans-serif; }
h2 { --pico-font-size: var(--h2-font-size); }
h3 { --pico-font-size: var(--h3-font-size); }
h4 { --pico-font-size: var(--h4-font-size); }
h5 {
  --pico-font-size: var(--h5-font-size);
  --pico-font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.1rem;
}
h6 { --pico-font-size: var(--h6-font-size); }

/* 链接 */
a, [role="link"] {
  --pico-text-decoration: none;
  &:hover, &:active, &:focus { --pico-text-decoration: none; }
  &[data-tooltip] {
    color: unset;
    --pico-text-decoration: underline dotted;
    text-underline-offset: 0.25rem;
  }
  code { color: var(--pico-color); }
}

/* 代码/表单 */
code, kbd, samp { padding: 0; }
a, input, select, textarea { transition: unset; }

/* 布局栅格 */
.main-grid {
  display: grid;
  grid-template-areas: "left-nav" "content" "footer";
}
#left-nav {
  grid-area: left-nav;
  width: var(--left-nav-width);
  max-width: var(--left-nav-width);
  /* padding: 0 var(--pico-spacing); */
}
#content {
  grid-area: content;
  min-width: 0;
  overflow-x: auto;
  background: var(--pico-card-background-color);
}
#right-nav {
  grid-area: right-nav;
  width: var(--right-nav-width);
  max-width: var(--right-nav-width);
  display: none;
}
#footer { grid-area: footer;}

#left-menu,#right-menu {
    padding-top: var(--pico-spacing);
    padding-left: var(--pico-spacing);
    padding-right: var(--pico-spacing);
    position: sticky;
    top: var(--top-nav-height);
    height: calc(100vh - var(--top-nav-height));
    max-height: calc(100vh - var(--top-nav-height));
    overflow-x: hidden;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: var(--pico-muted-color)var(--pico-background-color)
}

/* 响应式：768+ */
@media (min-width: 992px) {
  .main-grid {
    grid-template-areas: "left-nav content" "left-nav footer";
    grid-template-columns: auto 1fr;
    grid-template-rows: 1fr auto;
  }
  #left-nav:empty { width: 0; }
}

/* 响应式：1024+ */
@media (min-width: 992px) {
  .main-grid {
    grid-template-areas: "left-nav content right-nav" "left-nav footer right-nav";
    grid-template-columns: auto 1fr auto;
  }
  #right-nav { display: block; }
}

/* 移动端 <768 */
@media (max-width: 992px) {
  #left-nav {
    position: sticky;
    z-index: 1;
    top: var(--top-nav-height);
    left: 0;
    width: 100vw;
    height: 0;
    opacity: 0;
    overflow-y: auto;
    background: var(--pico-background-color);
    transition: opacity var(--pico-transition), height var(--pico-transition);
    display: none;
  }
  #left-nav.visible {
    display: block;
    opacity: 1;
    height: 300px;
    max-width: stretch;
    overflow-x: clip;
  }
  .not-mobile-nav { display: none !important; }
  .mobile-nav { display: block !important; }
  #top-nav-title-logo b{display: none;}
}

#left-menu {
    font-size: 90%;
    > ul {
        &:first-of-type {
            padding-top:0;
            > li:first-of-type {
                padding-top:0
            }
        }

        > li {
            padding-left: 0
        }

        ul {
            padding-top: calc(var(--pico-nav-element-spacing-vertical) * .5);
            > li {
                padding-left: var(--pico-spacing)
            }
        }

        button{
          width:100%;
          border-radius: 0.5rem;
          display: flex; 
          justify-content: 
          space-between; 
          align-items: center;
        }
    }
    ul ul ul a {
        border-radius: 0;
        border-left: var(--pico-outline-width)solid var(--pico-muted-border-color);
        &.active {
            border-left: var(--pico-outline-width)solid var(--pico-primary-focus)
        }
    }
}

/* 内容/页脚内边距 */
#content, #footer {
  padding: 0 calc(var(--pico-block-spacing-horizontal) * 3);
}
@media (max-width: 992px) {
  #content, #footer {
    padding: 0 var(--pico-block-spacing-horizontal);
  }
}



/* 顶部导航 */
#top-nav {
    --pico-border-radius: 0.5rem;
    background: var(--pico-background-color);
    box-shadow: var(--pico-primary-focus)0 0 0 var(--pico-outline-width);
    height: var(--top-nav-height);
    position: sticky;
    top: 0;
    z-index: 8;
    nav {
        gap: var(--pico-nav-element-spacing-horizontal);
        height: 100%
    }

    #top-nav-title-logo {
        white-space: nowrap;
        div {
            display: inline-block;
            vertical-align: middle;
            width: calc(var(--top-nav-height) * .45);
            padding-right: var(--pico-nav-link-spacing-horizontal);
        }

        span {
            display: inline-block;
            vertical-align: middle;
            font-size: 120%;
            font-weight: 600;
            --pico-primary-hover: var(--pico-color);
        }
    }

    input {
        font-size: 80%;
        flex-grow: 2;
    }

    .top-nav-section-links {
        --pico-nav-element-spacing-vertical: 0;
        height: 100%;
        display: flex;
        align-items: center;
        &.active {
            margin-top: calc(var(--pico-outline-width) * 2);
            border-bottom: calc(var(--pico-outline-width) * 2) solid var(--pico-primary);
            a {
                font-weight: bold;
            }
        }

        a {
            color: var(--pico-muted-color);
            font-size: 90%;
            font-weight: 300;
            &:hover {
                color: var(--pico-contrast-hover);
            }
        }
    }

    #sign-up {
        text-wrap: nowrap;
        --pico-nav-element-spacing-horizontal: 1rem;
        button {
            font-weight: bolder;
            --pico-nav-link-spacing-horizontal: 1rem;
            font-size: 80%;
        }
    }

    & details.dropdown{
      border-radius: var(--pico-border-radius);
      summary {
        font-size: 80%;
        height: auto;
      }
    }

    #light-dark-toggle {
        border-radius: var(--pico-border-radius);
        padding: 0rem;
        height: 2rem;
        width: 2rem;
        margin-left: calc(var(--pico-nav-element-spacing-horizontal) * -1);
    }

    #mobile-menu {
        display: none;
        padding: 0 0.5rem;
        margin-top: var(--pico-nav-element-spacing-vertical);
        margin-left: var(--pico-nav-element-spacing-horizontal);
        min-width: 2rem;
        height: calc(var(--top-nav-height) - (var(--pico-nav-element-spacing-vertical) * 2));
    }
}


/* 标签页 */
.tabs {
  display: flex;
  flex-wrap: wrap;
  margin-bottom: var(--pico-block-spacing-vertical);
  label { cursor: pointer; width: 100%; }
  .tab-content { display: none; width: 100%; }
  input[type="radio"]:checked + label + .tab-content { display: block; }
}
@media (min-width: 1200px) {
  .tabs label { flex: 1 0; width: auto; }
}

/* 用户权限页 ucenter */
.ucenter-page {
  min-height: calc(100vh - var(--top-nav-height));
  background-image:
    radial-gradient(ellipse 100% 50% at 50% 0%,
      light-dark(rgba(135, 206, 235, 0.5), rgba(120, 210, 250, 0.85)) 0%,
      light-dark(rgba(135, 206, 235, 0.35), rgba(20, 150, 190, 0.6)) 25%,
      light-dark(rgba(173, 216, 230, 0.15), rgba(20, 150, 190, 0.25)) 55%,
      light-dark(rgba(255, 255, 255, 0), rgba(0, 0, 0, 0)) 100%),
    url('/images/loginbg.png');
  background-size: cover;
  background-position: center top, center right;
  background-blend-mode: normal;

  & > div {
    padding: 2rem 2rem;
    min-height: 100vh;
    display: flex;
    flex-direction: row-reverse;
    justify-content: space-between;
  }
  & article {
    flex: 1;
  }

  & #ucenter-nav {
    padding-left: 2rem;
  }

  & aside article {
    position: sticky;
    top: 6rem;
    z-index: 0;
   
  }

  & .ucenter-body {
    min-width: min(80%, 760px);
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: rgb(from var(--pico-primary) r g b / 0.1);
  }

  & .ucenter-body > div{
    padding: 0.5rem 2rem;
  }
  & .ucenter-body > div label{
    color:#f5f5f5;
  }
    
}



/* 首页特殊样式 */
html[data-pdocs=home] {
    @media(min-width: 992px) {
        #left-nav {
            width:0
        }
        #left-menu {
            padding: 0
        }
    }

    @media(max-width: 992px) {
        max-width: 100vw;
        #content{
          padding-top: var(--center-column-top-padding);
        }
    }

    body {
        background: var(--pico-card-background-color);
        background-image: linear-gradient(180deg,var(--pdocs-home-background) 0%,rgba(255,255,255,0) 80vh)
    }

    article > header img{
        height: 1rem;
        width: 1rem;
        margin-right: 0.5rem;
    } 

    #content {
        background-color: rgba(0, 0, 0, 0);
    }

    #content-header {
        border-bottom: none;
        * {
            padding-bottom: var(--pico-block-spacing-vertical);
        }
    }

    @media (min-width: 992px) {
        #content {
            background-origin: border-box;
            background-attachment: scroll;
            background-image: url("/images/lighthouse.svg");
            background-repeat: no-repeat;
            background-position: top 5rem right -420px;
        }

        #content-header {
            max-width: 55%;
            padding-top: 8rem;
            padding-bottom: min(15rem, calc(100vh - 600px));
        }
    }
}


/* 白名单赛事列表等宽展示 */
.contest-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: var(--pico-spacing);
  & a {
    display: block;
    padding: var(--pico-spacing);
    border: solid var(--pico-border-width) var(--pico-muted-border-color);
    border-radius: var(--pico-border-radius);
    background-color: var(--pico-card-background-color);
    text-decoration: none;
    color: var(--pico-color);
    transition: all 0.2s ease;
  }
  & a:hover {
    border-color: var(--pico-primary);
    background-color: rgba(0, 97, 235, 0.05);
    transform: translateY(-2px);
  }
}

.topic-title {
  padding: 0.5rem;
  display: flex;
  justify-content: space-between;
  & small {
    font-size: 60%;
  }
}

/* 工具类 */
.nowrap { white-space: nowrap; }
.overflow-auto {
  margin-bottom: var(--pico-typography-spacing-vertical);
  min-width: 0;
}
.overflow-auto > table { margin-bottom: 0; }

/* 动画 */
@keyframes thumb-clicked {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.5); }
}
.feedback button.clicked { animation: thumb-clicked 0.2s ease; }