/* ==========================================================================
   绿城锦棠天地 · 签到抽奖系统 v2 —— 共用设计系统
   沿用 v1 的绿金视觉体系（v1 CSS 第 8-13 行的 :root 变量）
   被 index.html / login.html / admin.html 三页共用
   ========================================================================== */

:root{
  --green:#00A650; --green-dark:#0B5E3B; --green-deep:#06412B;
  --gold:#C9A063; --gold-light:#E8D5A8; --gold-deep:#8A6420;
  --bg:#F5F3EE; --card:#FFFFFF; --text:#22312A; --muted:#7A8A80;
  --danger:#D64545; --warn:#C8871B; --line:#E2DED4; --line-soft:#EAE6DC;
  --radius:14px; --shadow:0 6px 24px rgba(6,65,43,.10);
  --hero:linear-gradient(160deg,#06412B 0%,#0B5E3B 55%,#00A650 100%);
}

*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
html,body{height:100%}
body{
  font-family:"Microsoft YaHei","PingFang SC","Hiragino Sans GB",system-ui,-apple-system,sans-serif;
  background:var(--bg);color:var(--text);
  font-size:16px;line-height:1.55;
  -webkit-font-smoothing:antialiased;
}
button{font-family:inherit;font-size:inherit;cursor:pointer;border:none;outline:none;background:none;color:inherit}
input,select,textarea{font-family:inherit;font-size:16px;color:inherit}
a{color:var(--green-dark)}
img{max-width:100%}
[hidden]{display:none !important}

/* 键盘可达性：统一焦点环 */
:focus-visible{outline:3px solid rgba(0,166,80,.45);outline-offset:2px;border-radius:6px}

.sr-only{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0;
}
.skip-link{
  position:absolute;left:-9999px;top:0;z-index:999;background:#fff;color:var(--green-dark);
  padding:10px 18px;border-radius:0 0 10px 0;font-weight:700;
}
.skip-link:focus{left:0}

/* ==========================================================================
   按钮：统一三态（idle / busy / ok / err）—— 契约第八节硬性要求
   用法：<button class="btn btn-primary" data-state="idle"><span class="btn-label">保存</span></button>
   JS 通过 setBtnState(btn,'busy') 切换，标签文字由 JS 写入 .btn-label
   ========================================================================== */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:6px;
  padding:9px 18px;border-radius:9px;font-size:14px;font-weight:600;
  border:1px solid transparent;transition:background .15s,border-color .15s,color .15s,opacity .15s;
  min-height:40px;text-decoration:none;white-space:nowrap;
}
.btn:disabled,.btn[aria-disabled="true"]{opacity:.5;cursor:not-allowed}
.btn-primary{background:var(--green-dark);color:#fff}
.btn-primary:hover:not(:disabled){background:var(--green)}
.btn-green{background:var(--green);color:#fff}
.btn-green:hover:not(:disabled){background:var(--green-dark)}
.btn-gold{background:linear-gradient(135deg,#C9A063,#E8C97E);color:#3B2A0A}
.btn-gold:hover:not(:disabled){filter:brightness(1.06)}
.btn-ghost{background:#fff;border-color:var(--line);color:var(--text)}
.btn-ghost:hover:not(:disabled){border-color:var(--green);color:var(--green-dark)}
.btn-danger{background:#FDF0F0;border-color:#F3C9C9;color:var(--danger)}
.btn-danger:hover:not(:disabled){background:var(--danger);color:#fff}
.btn-sm{padding:5px 12px;font-size:13px;border-radius:7px;min-height:32px}

/* 三态外观 */
.btn[data-state="busy"]{cursor:progress}
.btn[data-state="busy"]::before{
  content:"";width:13px;height:13px;border-radius:50%;
  border:2px solid currentColor;border-top-color:transparent;
  animation:spin .7s linear infinite;flex-shrink:0;
}
.btn[data-state="ok"]{background:var(--green) !important;border-color:var(--green) !important;color:#fff !important}
.btn[data-state="err"]{background:var(--danger) !important;border-color:var(--danger) !important;color:#fff !important}
@keyframes spin{to{transform:rotate(360deg)}}

/* ==========================================================================
   顶部"保存状态"徽标（P1-4：静默失败必须肉眼可见）
   ========================================================================== */
.save-badge{
  display:inline-flex;align-items:center;gap:7px;
  padding:5px 13px;border-radius:20px;font-size:13px;font-weight:700;
  border:1px solid rgba(255,255,255,.35);background:rgba(255,255,255,.14);color:#fff;
  white-space:nowrap;
}
.save-badge .dot{width:9px;height:9px;border-radius:50%;background:currentColor;flex-shrink:0}
.save-badge[data-state="saved"]{background:rgba(255,255,255,.16);border-color:rgba(255,255,255,.4)}
.save-badge[data-state="saving"]{background:rgba(201,160,99,.34);border-color:var(--gold-light)}
.save-badge[data-state="saving"] .dot{animation:blink .9s ease-in-out infinite}
.save-badge[data-state="failed"]{background:#B83030;border-color:#F0A0A0;color:#fff}
.save-badge[data-state="failed"] .dot{animation:blink .7s ease-in-out infinite}
@keyframes blink{0%,100%{opacity:1}50%{opacity:.25}}

/* ==========================================================================
   页面横幅（绿金视觉，沿用 v1 header.hero）
   ========================================================================== */
.hero{
  background:var(--hero);color:#fff;position:relative;overflow:hidden;
  padding:18px 32px;
}
.hero::before{
  content:"";position:absolute;right:-60px;top:-60px;width:240px;height:240px;border-radius:50%;
  background:radial-gradient(circle,rgba(201,160,99,.28),transparent 70%);
}
.hero::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:3px;
  background:linear-gradient(90deg,transparent,var(--gold-light),transparent);
}
.hero-row{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;position:relative;z-index:1}
.hero-title{font-size:26px;font-weight:800;letter-spacing:5px;line-height:1.25}
.hero-title .dot{color:var(--gold-light)}
.hero-sub{font-size:13px;opacity:.88;margin-top:4px;letter-spacing:1px}
.hero-right{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.hero-stats{display:flex;gap:12px;flex-wrap:wrap}
.stat-chip{
  background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.25);
  border-radius:12px;padding:7px 16px;text-align:center;min-width:92px;
}
.stat-chip b{display:block;font-size:21px;font-weight:800;line-height:1.2}
.stat-chip span{font-size:12px;opacity:.85}

/* ==========================================================================
   页签
   ========================================================================== */
.tabs{display:flex;gap:10px;padding:16px 32px 0;flex-wrap:wrap}
.tabs button{
  background:#fff;border:1px solid var(--line);color:var(--text);
  padding:9px 20px;border-radius:24px;font-size:14px;font-weight:600;transition:.15s;
}
.tabs button:hover{border-color:var(--green);color:var(--green-dark)}
.tabs button[aria-selected="true"],.tabs button.active{
  background:var(--green-dark);border-color:var(--green-dark);color:#fff;
  box-shadow:0 4px 12px rgba(11,94,59,.28);
}
main.page{padding:18px 32px 70px;max-width:1400px;margin:0 auto}
.tab-panel{display:none}
.tab-panel.active{display:block;animation:fadeIn .25s ease}
@keyframes fadeIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}

/* ==========================================================================
   卡片 / 表格 / 输入
   ========================================================================== */
.card{background:var(--card);border-radius:var(--radius);box-shadow:var(--shadow);padding:20px;margin-bottom:16px}
.card > h3{font-size:16px;font-weight:700;margin-bottom:14px;display:flex;align-items:center;gap:8px}
.card > h3::before{content:"";width:4px;height:16px;background:linear-gradient(180deg,var(--gold),var(--green));border-radius:2px}
.toolbar{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin-bottom:14px}
.toolbar .spacer{flex:1}
.hint{font-size:13px;color:var(--muted);line-height:1.85}
.hint strong{color:var(--text)}

.table-wrap{overflow:auto;max-height:56vh;border:1px solid var(--line-soft);border-radius:10px}
table.grid{width:100%;border-collapse:collapse;font-size:14px;min-width:760px}
table.grid th{
  background:var(--green-dark);color:#fff;padding:10px 12px;text-align:left;
  position:sticky;top:0;z-index:2;white-space:nowrap;font-weight:600;
}
table.grid td{padding:9px 12px;border-bottom:1px solid #EFEBE2;vertical-align:middle}
table.grid tbody tr:hover td{background:#F2FBF5}
table.grid .empty-row td{text-align:center;color:var(--muted);padding:34px}
.badge{display:inline-block;padding:2px 12px;border-radius:20px;font-size:12px;font-weight:700;white-space:nowrap}
.badge.on{background:#E3F6EA;color:#0B7A3E}
.badge.off{background:#EFEFEF;color:#7A7A7A}
.badge.win{background:#FBF3DC;color:var(--gold-deep)}
.badge.warn{background:#FDF3E3;color:#8A5A10}
.badge.rev{background:#F3F3F3;color:#999;text-decoration:line-through}
.mono{font-family:Consolas,"SF Mono",monospace;letter-spacing:.5px}

.input,.search-box{
  padding:9px 13px;border:1px solid var(--line);border-radius:8px;background:#fff;
}
.search-box{width:230px}
.input:focus,.search-box:focus{border-color:var(--green);box-shadow:0 0 0 3px rgba(0,166,80,.12);outline:none}
.input[aria-invalid="true"]{border-color:var(--danger);box-shadow:0 0 0 3px rgba(214,69,69,.12)}
label.fld{font-size:13px;color:var(--muted)}

/* 提示条（错误 / 警告 / 成功） */
.alert{
  display:flex;gap:9px;align-items:flex-start;
  padding:11px 15px;border-radius:10px;font-size:14px;line-height:1.7;margin-bottom:14px;
}
.alert::before{flex-shrink:0;font-weight:800}
.alert.err{background:#FDF0F0;border:1px solid #F3C9C9;color:#8E2B2B}
.alert.err::before{content:"✕"}
.alert.warn{background:#FDF6E8;border:1px solid #EFD9A8;color:#7A5310}
.alert.warn::before{content:"!"}
.alert.ok{background:#EAF8EF;border:1px solid #BDE5CC;color:#186B3C}
.alert.ok::before{content:"✓"}
.alert.info{background:#EEF4FF;border:1px solid #C9DAF5;color:#274A7A}
.alert.info::before{content:"i"}

/* ==========================================================================
   模态
   ========================================================================== */
.modal-mask{
  position:fixed;inset:0;background:rgba(6,41,27,.55);z-index:100;padding:20px;
  display:none;align-items:center;justify-content:center;
}
.modal-mask.show{display:flex}
.modal{
  background:#fff;border-radius:16px;max-width:620px;width:94%;padding:24px;
  max-height:88vh;overflow:auto;box-shadow:0 20px 60px rgba(0,0,0,.3);
}
.modal > h3{font-size:17px;margin-bottom:16px}
.modal .m-row{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:12px;align-items:center}
.modal .m-row label{font-size:13px;color:var(--muted);width:76px;flex-shrink:0}
.modal .actions{display:flex;gap:10px;justify-content:flex-end;margin-top:18px;flex-wrap:wrap}

/* ==========================================================================
   Toast（屏幕阅读器可播报）
   ========================================================================== */
.toast-box{
  position:fixed;top:18px;left:50%;transform:translateX(-50%);z-index:200;
  display:flex;flex-direction:column;gap:8px;align-items:center;pointer-events:none;width:max-content;max-width:92vw;
}
.toast{
  background:rgba(6,41,27,.94);color:#fff;padding:11px 22px;border-radius:26px;
  font-size:14px;box-shadow:0 8px 24px rgba(0,0,0,.25);animation:fadeIn .25s ease;max-width:92vw;
  word-break:break-word;
}
.toast.err{background:rgba(160,35,35,.96)}
.toast.warn{background:rgba(150,100,10,.96)}

/* ==========================================================================
   打印：统一入口 #printArea（P2 打印残留已修：打印后立即清空）
   ========================================================================== */
#printArea{display:none}
@media print{
  body *{visibility:hidden !important}
  #printArea,#printArea *{visibility:visible !important}
  #printArea{display:block !important;position:absolute;left:0;top:0;width:100%;color:#000}
  @page{margin:10mm}
}

/* ==========================================================================
   尊重"减少动态效果"
   ========================================================================== */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms !important;animation-iteration-count:1 !important;transition-duration:.001ms !important}
}