/* 极简·柔光 | 2024-08-28 */
/* 1. 变量：颜色、圆角、过渡、阴影 */
:root{
    --bg:#ffffff;
    --bg-soft:#f7f9fc;
    --text:#1c1e21;
    --text-soft:#65676b;
    --primary:#0066ff;
    --primary-dark:#004fd0;
    --danger:#e63946;
    --success:#06d6a0;
    --border:#e5e7eb;
    --radius:8px;
    --radius-sm:4px;
    --radius-lg:14px;
    --trans:all .22s cubic-bezier(.4,0,.2,1);
    --shadow-xs:0 1px 2px 0 rgba(0,0,0,.05);
    --shadow-sm:0 1px 3px 0 rgba(0,0,0,.08);
    --shadow-md:0 4px 6px -1px rgba(0,0,0,.08);
    --shadow-lg:0 10px 15px -3px rgba(0,0,0,.08);
    --font:'Inter',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
    --mono:'SF Mono',Monaco,'Cascadia Code',Consolas,monospace;
}

/* 2. 全局重置 */
*,*::before,*::after{box-sizing:border-box}
html,body{margin:0;padding:0;font-family:var(--font);font-size:15px;line-height:1.55;color:var(--text);background:var(--bg);-webkit-font-smoothing:antialiased;}
h1,h2,h3,h4,h5,h6{margin:0 0 .6em;font-weight:600;color:var(--text)}
p{margin:0 0 1em}
a{color:var(--primary);text-decoration:none;transition:var(--trans)}
a:hover{text-decoration:underline}
code,pre{font-family:var(--mono);background:var(--bg-soft);padding:.2em .4em;border-radius:var(--radius-sm);font-size:.85em}
pre{padding:1em;overflow:auto}

/* 3. 布局容器 */
.container{max-width:1080px;margin:0 auto;padding:0 1rem}
.flex{display:flex;gap:1rem}
.grid{display:grid;gap:1rem}
.card{background:var(--bg);border:1px solid var(--border);border-radius:var(--radius-lg);box-shadow:var(--shadow-sm);padding:1.5rem}

/* 4. 按钮 */
button,.btn{
    cursor:pointer;
    display:inline-flex;align-items:center;justify-content:center;
    font:inherit;font-weight:600;
    border:0;border-radius:var(--radius);
    padding:.55em 1.2em;
    transition:var(--trans);
    outline:none;
    box-shadow:var(--shadow-xs);
}
button:disabled,.btn:disabled{opacity:.55;cursor:not-allowed}
button.primary,.btn.primary{background:var(--primary);color:#fff}
button.primary:hover:not(:disabled),.btn.primary:hover:not(:disabled){background:var(--primary-dark);box-shadow:var(--shadow-md)}
button.outline,.btn.outline{background:transparent;color:var(--primary);box-shadow:inset 0 0 0 1.5px var(--primary)}
button.outline:hover:not(:disabled),.btn.outline:hover:not(:disabled){background:var(--primary);color:#fff}
button.ghost,.btn.ghost{background:transparent;color:var(--text-soft)}
button.ghost:hover:not(:disabled),.btn.ghost:hover:not(:disabled){background:var(--bg-soft);color:var(--text)}
button.sm,.btn.sm{font-size:.85em;padding:.45em .9em}
button.lg,.btn.lg{font-size:1.1em;padding:.7em 1.6em}

/* 5. 输入框、文本域、选择器 */
input[type=text],input[type=email],input[type=password],input[type=number],
input[type=date],input[type=time],input[type=url],input[type=tel],input[type=search],
textarea,select{
    width:100%;
    font:inherit;
    padding:.6em .8em;
    border:1px solid var(--border);
    border-radius:var(--radius);
    background:var(--bg);
    color:var(--text);
    transition:var(--trans);
    min-height:2.5em;
}
input:focus,textarea:focus,select:focus{
    border-color:var(--primary);
    box-shadow:0 0 0 3px rgba(0,102,255,.12);
    outline:none;
}
input:disabled,textarea:disabled,select:disabled{background:var(--bg-soft);color:var(--text-soft);cursor:not-allowed}
textarea{min-height:6em;resize:vertical}
select{background:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%23676767' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e") right .6em center / 1.2em auto no-repeat}

/* 6. 单选 & 复选框 */
input[type=checkbox],input[type=radio]{
    width:1.1em;height:1.1em;accent-color:var(--primary);cursor:pointer}
label:has(input[type=checkbox],input[type=radio]){display:inline-flex;align-items:center;gap:.4em;cursor:pointer}

/* 7. 表格 */
table{width:100%;border-collapse:collapse;font-size:.95em}
th,td{padding:.75em;border-bottom:1px solid var(--border);text-align:left}
th{font-weight:600;color:var(--text-soft);font-size:.85em;text-transform:uppercase;letter-spacing:.05em}
tr:hover{background:var(--bg-soft)}
table.bordered th,table.bordered td{border:1px solid var(--border)}
table.striped tbody tr:nth-child(odd){background:var(--bg-soft)}

/* 8. 工具类 */
.mt{margin-top:1rem}.mb{margin-bottom:1rem}.text-center{text-align:center}.muted{color:var(--text-soft)}

#userInfoBox, #result, #notice-div{
  height:180px;          /* 需要多高自己调 */
  overflow-y:auto;
  font-size:0.95rem;
  line-height:1.6;
  scrollbar-width: thin;          /* Firefox */
  scrollbar-color: var(--border) var(--bg-soft);  /* Firefox */
}

#notice-div {
    height:360px;
}

/* 9. 文件选择栏（与输入框同高同圆角，一横栏显示已选文件名） */
input[type=file]{
    width:100%;
    font:inherit;
    padding:.6em .8em;
    border:1px solid var(--border);
    border-radius:var(--radius);
    background:var(--bg);
    color:var(--text);
    transition:var(--trans);
    min-height:2.5em;
    cursor:pointer;
    /* 用伪元素文字提示 */
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
}
/* 统一 focus / disabled 状态，与输入框完全一致 */
input[type=file]:focus{
    border-color:var(--primary);
    box-shadow:0 0 0 3px rgba(0,102,255,.12);
    outline:none;
}
input[type=file]:disabled{
    background:var(--bg-soft);
    color:var(--text-soft);
    cursor:not-allowed;
}

/* 10. 文件选择框内“按钮”区域（WebKit/Blink 专用） */
input[type=file]::-webkit-file-upload-button{
    -webkit-appearance:none;
    margin:0 .6em 0 -.4em;        /* 与左侧留空，与文字留缝 */
    padding:.55em 1.1em;
    font:inherit;
    font-weight:600;
    border:none;
    border-radius:var(--radius-sm);
    background:var(--primary);
    color:#fff;
    box-shadow:var(--shadow-xs);
    transition:var(--trans);
    cursor:pointer;
}
input[type=file]:hover::-webkit-file-upload-button{
    background:var(--primary-dark);
    box-shadow:var(--shadow-md);
}
input[type=file]:disabled::-webkit-file-upload-button{
    background:var(--border);
    color:var(--text-soft);
    cursor:not-allowed;
}

/* 11. Firefox 专用 */
input[type=file]::file-selector-button{
    margin:0 .4em 0 -.4em;
    padding:.35em .8em;   /* 改小 */
    font-size:.85em;      /* 改小 */
    border-radius:var(--radius-sm);
    font:inherit;
    font-weight:600;
    border:none;
    background:var(--primary);
    color:#fff;
    box-shadow:var(--shadow-xs);
    transition:var(--trans);
    cursor:pointer;
}
input[type=file]:hover::file-selector-button{
    background:var(--primary-dark);
    box-shadow:var(--shadow-md);
}
input[type=file]:disabled::file-selector-button{
    background:var(--border);
    color:var(--text-soft);
    cursor:not-allowed;
}

/* 12. 验证码输入组 */
.input-group{
  display:flex;
  gap:.5rem;          /* 两者间距 */
}
.input-group input{
  flex:1;             /* 占满剩余空间 */
  min-width:0;        /* 防止文字过长撑开 */
}
.input-group .btn{
  white-space:nowrap; /* 按钮文字不换行 */
}

/* 默认隐藏手机菜单按钮 */
.menu-toggle{display:none}

/* 手机端（≤640 px）*/
@media (max-width:640px){
  /* 1. 三条杠按钮 */
  .menu-toggle{
    display:flex;               /* 显示 */
    position:fixed;
    top:.75rem;
    left:.75rem;
    z-index:1001;
    flex-direction:column;
    gap:4px;
    padding:6px;
    border:none;
    background:none;
    cursor:pointer;
  }
  .menu-toggle span{
    width:22px;
    height:3px;
    border-radius:2px;
    background:var(--text);
    transition:var(--trans);
  }

  /* 2. 侧边栏（初始隐藏）*/
  .sidebar{
    position:fixed;
    top:0;
    left:-100%;                 /* 藏在屏幕外 */
    width:220px;
    height:100%;
    flex-direction:column;
    justify-content:flex-start;
    padding:1.5rem 1rem;
    background:var(--bg-soft);
    border-right:1px solid var(--border);
    transition:left .25s ease;
    z-index:1000;
  }

  /* 3. 打开侧边栏 */
  body.menu-open .sidebar{left:0}

  /* 4. Logo 点击收回 */
  .sidebar .logo{cursor:pointer}

  /* 5. 主内容区留空，不被遮挡 */
  .main{padding:1rem}
}

/* ===== 底部堆叠容器 ===== */
#notice-stack{
    position:fixed;
    left:0;
    right:0;
    bottom:0;
    display:flex;
    flex-direction:column-reverse;   /* 新卡片插在最下面 */
    align-items:center;
    gap:12px;
    padding:0 12px 12px;
    pointer-events:none;             /* 容器本身不拦截点击 */
    z-index:2000;
}

/* ===== 单条公告 ===== */
.notice-card{
    width:100%;
    max-width:420px;
    background:var(--bg);
    border:1px solid var(--border);
    border-radius:var(--radius-lg);
    box-shadow:var(--shadow-lg);
    animation:slideIn .35s ease;
    pointer-events:auto;             /* 卡片本身可点击 */
}

/* 头部 / 内容 / 底部 */
.notice-head{display:flex;align-items:center;justify-content:space-between;padding:.9rem 1rem;background:var(--bg-soft);border-bottom:1px solid var(--border);}
.notice-head h4{margin:0;font-size:1rem;color:var(--text);}
.notice-close{background:none;border:none;font-size:1.2rem;color:var(--text-soft);cursor:pointer;padding:0 .3rem;}
.notice-close:hover{color:var(--danger);}
.notice-body{padding:1rem;font-size:.92rem;line-height:1.6;white-space:pre-wrap;color:var(--text);}
.notice-foot{padding:0 1rem .8rem;text-align:right;font-size:.75rem;color:var(--text-soft);}

/* 进入动画：从底部滑入 */
@keyframes slideIn{
    from{transform:translateY(100%);opacity:0}
    to{transform:translateY(0);opacity:1}
}

.notice-list{
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding: 1rem 0;
}