/* ============================================================
   清新绿皮肤
   只作用于 body[data-skin="green"]；不带该属性时保持经典深色。
   ============================================================ */

body[data-skin="green"] {
  --bg: #f4faf5;
  --bg2: #eaf7ee;
  --panel: rgba(255, 255, 255, .82);
  --panel2: #ffffff;
  --line: rgba(27, 122, 70, .16);
  --line2: rgba(27, 122, 70, .24);
  --txt: #153d29;
  --mut: #507a61;
  --dim: #6d8b79;
  --blue: #1b7a46;
  --purple: #33a567;
  --acc: #33a567;
  --acc-deep: #1b7a46;
  --green: #1b7a46;
  --amber: #c77700;
  --red: #cf3f4b;
  --grad: linear-gradient(120deg, #4fbe75, #33a567 55%, #1b7a46);
  color-scheme: light;
  color: var(--txt);
  background:
    radial-gradient(900px 480px at 88% -12%, rgba(123, 211, 137, .28), transparent 62%),
    radial-gradient(780px 520px at -8% 108%, rgba(51, 165, 103, .18), transparent 64%),
    linear-gradient(rgba(27, 122, 70, .035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(27, 122, 70, .035) 1px, transparent 1px),
    var(--bg);
  background-size: auto, auto, 46px 46px, 46px 46px, auto;
}

/* ---------- 大屏 / 前台控制台 ---------- */
body[data-skin="green"] .topbar {
  background: rgba(244, 250, 245, .9);
  border-bottom-color: var(--line);
  box-shadow: 0 10px 28px -22px rgba(27, 122, 70, .65);
}

body[data-skin="green"] .tabs,
body[data-skin="green"] .card,
body[data-skin="green"] .stat,
body[data-skin="green"] .team-card,
body[data-skin="green"] .ci-panel,
body[data-skin="green"] .imp-panel,
body[data-skin="green"] .wall-wrap {
  background: rgba(255, 255, 255, .84);
  border-color: rgba(27, 122, 70, .14);
  box-shadow: 0 18px 42px -34px rgba(20, 61, 41, .72);
  backdrop-filter: blur(16px);
}

body[data-skin="green"] .tab {
  border: 0;
  background: transparent;
  color: var(--mut);
}

body[data-skin="green"] .tab:hover,
body[data-skin="green"] .sfx-btn:hover,
body[data-skin="green"] .admin-link:hover,
body[data-skin="green"] .fs-btn:hover {
  color: var(--acc-deep);
  background: rgba(51, 165, 103, .1);
  border-color: rgba(51, 165, 103, .34);
}

body[data-skin="green"] .tab.active,
body[data-skin="green"] .btn.primary,
body[data-skin="green"] button.primary {
  color: #fff;
  background: linear-gradient(120deg, #4fbe75, #1b7a46);
  box-shadow: 0 12px 28px -16px rgba(27, 122, 70, .78);
}

body[data-skin="green"] .admin-link,
body[data-skin="green"] .sfx-btn,
body[data-skin="green"] .fs-btn,
body[data-skin="green"] button {
  border-color: rgba(27, 122, 70, .18);
  background: rgba(255, 255, 255, .7);
  color: var(--txt);
}

body[data-skin="green"] .team-card:hover,
body[data-skin="green"] .card:hover {
  border-color: rgba(51, 165, 103, .42);
  box-shadow: 0 22px 48px -32px rgba(27, 122, 70, .78);
}

body[data-skin="green"] .tc-head {
  background: linear-gradient(120deg, rgba(165, 227, 178, .4), rgba(255, 255, 255, .78));
  border-bottom-color: rgba(27, 122, 70, .12);
}

body[data-skin="green"] .tc-photo,
body[data-skin="green"] #tip,
body[data-skin="green"] .cip-search input,
body[data-skin="green"] .imp-panel textarea,
body[data-skin="green"] .ts-input input {
  background: #fff;
  border-color: rgba(27, 122, 70, .18);
  color: var(--txt);
}

body[data-skin="green"] .bar,
body[data-skin="green"] .wall-progress .bar {
  background: rgba(51, 165, 103, .16);
}

body[data-skin="green"] .bar i {
  background: var(--grad);
  box-shadow: 0 0 12px rgba(51, 165, 103, .54);
}

body[data-skin="green"] .flip-digit {
  color: #fff;
  background: linear-gradient(180deg, rgba(51, 165, 103, .96), rgba(20, 89, 51, .9));
  box-shadow:
    inset 0 -.12em .18em rgba(10, 49, 30, .42),
    inset 0 .04em 0 rgba(255, 255, 255, .22),
    0 2px 10px rgba(20, 61, 41, .24),
    0 0 16px -4px rgba(51, 165, 103, .52);
  text-shadow: 0 1px 8px rgba(10, 49, 30, .4);
}

body[data-skin="green"] ::-webkit-scrollbar-thumb {
  background: rgba(27, 122, 70, .22);
}

body[data-skin="green"] ::selection {
  background: rgba(123, 211, 137, .32);
}

body[data-skin="green"] .page-head h2 .dot,
body[data-skin="green"] .pick-pool .dot {
  background: var(--acc);
  box-shadow: 0 0 12px rgba(51, 165, 103, .68);
}

body[data-skin="green"] .legend .sw[style*="border:1px dashed rgba(255,255,255,.3)"] {
  border-color: rgba(27, 122, 70, .38);
}

body[data-skin="green"] .qr-tip {
  border-color: rgba(199, 119, 0, .32);
}

body[data-skin="green"] .qr-tip b,
body[data-skin="green"] .st.wait,
body[data-skin="green"] .st.busy {
  color: var(--amber);
}

body[data-skin="green"] .st.wait {
  background: rgba(199, 119, 0, .1);
  border-color: rgba(199, 119, 0, .28);
}

body[data-skin="green"] .st.busy {
  background: rgba(199, 119, 0, .08);
  border-color: rgba(199, 119, 0, .26);
}

body[data-skin="green"] .st.ok {
  color: #146c43;
  background: rgba(165, 227, 178, .26);
  border-color: rgba(51, 165, 103, .34);
}

body[data-skin="green"] .st.fail {
  color: #a52a35;
  background: rgba(207, 63, 75, .08);
  border-color: rgba(207, 63, 75, .26);
}

body[data-skin="green"] .ncard-chip {
  box-shadow: 0 6px 18px rgba(20, 61, 41, .16);
}

body[data-skin="green"] .ncard-chip em {
  color: #fff;
}

body[data-skin="green"] .cip-search input:focus,
body[data-skin="green"] .imp-panel textarea:focus,
body[data-skin="green"] .ts-input input:focus,
body[data-skin="green"] .m-manual input:focus,
body[data-skin="green"] .pf-form input:focus,
body[data-skin="green"] .pf-form textarea:focus {
  border-color: var(--acc);
  background: #fff;
  box-shadow: 0 0 0 3px rgba(51, 165, 103, .13);
}

body[data-skin="green"] .cip-ops .dbtn,
body[data-skin="green"] .flow-item {
  background: #fff;
  border-color: rgba(27, 122, 70, .15);
  color: var(--txt);
}

body[data-skin="green"] .flow-item.fresh {
  border-color: rgba(51, 165, 103, .46);
  background: rgba(234, 247, 238, .94);
}

body[data-skin="green"] .checkin-3d .c3d-card {
  background: linear-gradient(135deg, rgba(255, 255, 255, .96), rgba(234, 247, 238, .88));
  border-color: rgba(51, 165, 103, .32);
  box-shadow: 0 32px 70px rgba(20, 61, 41, .28), 0 0 70px rgba(123, 211, 137, .34);
}

body[data-skin="green"] .c3d-card .c3d-name {
  background: linear-gradient(120deg, #1b7a46, #4fbe75);
  -webkit-background-clip: text;
  background-clip: text;
}

body[data-skin="green"] .c3d-card .c3d-sub {
  color: #507a61;
}

body[data-skin="green"] .qr-live b {
  color: #146c43;
}

body[data-skin="green"] .pick-stage {
  box-shadow: inset 0 0 80px rgba(123, 211, 137, .1);
}

body[data-skin="green"] .pick-stage::before,
body[data-skin="green"] .pick-stage::after {
  background: linear-gradient(90deg, transparent, rgba(51, 165, 103, .72), transparent);
}

body[data-skin="green"] .pick-btn {
  background: var(--grad);
  box-shadow:
    0 0 0 10px rgba(51, 165, 103, .1),
    0 0 0 20px rgba(51, 165, 103, .06),
    0 20px 50px rgba(27, 122, 70, .38);
}

body[data-skin="green"] .pick-btn:hover {
  box-shadow:
    0 0 0 12px rgba(51, 165, 103, .18),
    0 0 0 24px rgba(51, 165, 103, .09),
    0 24px 60px rgba(27, 122, 70, .42);
}

body[data-skin="green"] .pick-btn.stop {
  background: linear-gradient(120deg, #cf3f4b, #e1704f);
  box-shadow: 0 20px 50px rgba(207, 63, 75, .34);
}

body[data-skin="green"] .result-card,
body[data-skin="green"] .pick-pool {
  background: rgba(255, 255, 255, .9);
  border-color: rgba(51, 165, 103, .36);
}

body[data-skin="green"] .result-card .r-close {
  background: rgba(51, 165, 103, .08);
  color: var(--mut);
}

body[data-skin="green"] .result-card .r-close:hover {
  color: var(--acc-deep);
  background: rgba(51, 165, 103, .16);
}

/* ---------- 弹窗 / 浮层 / toast ---------- */
body[data-skin="green"] .overlay {
  background: rgba(16, 46, 31, .38);
  backdrop-filter: blur(8px);
}

body[data-skin="green"] .modal {
  background: linear-gradient(160deg, #ffffff, #f4faf5);
  border-color: rgba(51, 165, 103, .22);
  box-shadow: 0 30px 80px rgba(20, 61, 41, .3);
}

body[data-skin="green"] .pf-form input,
body[data-skin="green"] .pf-form textarea,
body[data-skin="green"] .m-manual input {
  background: #fff;
  border-color: rgba(27, 122, 70, .2);
  color: var(--txt);
}

body[data-skin="green"] .pf-form input::placeholder,
body[data-skin="green"] .pf-form textarea::placeholder,
body[data-skin="green"] .m-manual input::placeholder {
  color: rgba(80, 122, 97, .68);
}

body[data-skin="green"] .m-chips button {
  background: #fff;
  border-color: rgba(27, 122, 70, .18);
  color: var(--txt);
}

body[data-skin="green"] .m-chips button:hover {
  background: rgba(165, 227, 178, .28);
}

body[data-skin="green"] .m-chips button.minus,
body[data-skin="green"] .m-big .mb-minus {
  color: #a52a35;
}

body[data-skin="green"] .m-chips button.plus,
body[data-skin="green"] .m-big .mb-plus {
  color: #146c43;
}

body[data-skin="green"] .m-big .mb-minus {
  background: rgba(207, 63, 75, .09);
  border-color: rgba(207, 63, 75, .3);
}

body[data-skin="green"] .m-big .mb-plus {
  background: rgba(123, 211, 137, .22);
  border-color: rgba(51, 165, 103, .34);
}

body[data-skin="green"] .m-manual button {
  background: linear-gradient(120deg, #4fbe75, #1b7a46);
  color: #fff;
}

body[data-skin="green"] .m-cancel {
  background: rgba(51, 165, 103, .08);
  color: var(--mut);
}

body[data-skin="green"] .m-cancel:hover {
  background: rgba(51, 165, 103, .16);
}

body[data-skin="green"] .m-ok {
  background: var(--grad);
  color: #fff;
  box-shadow: 0 8px 24px rgba(27, 122, 70, .34);
}

body[data-skin="green"] .m-ok:hover {
  color: #fff;
  filter: brightness(1.05);
}

body[data-skin="green"] .toast {
  background: rgba(255, 255, 255, .96);
  border-color: rgba(27, 122, 70, .16);
  border-left-color: var(--acc-deep);
  color: var(--txt);
  box-shadow: 0 18px 42px -24px rgba(20, 61, 41, .58);
}

body[data-skin="green"] .toast.warn {
  border-left-color: var(--amber);
}

body[data-skin="green"] #tip {
  background: #fff;
  color: var(--txt);
  border-color: rgba(51, 165, 103, .22);
  box-shadow: 0 18px 42px -26px rgba(20, 61, 41, .58);
}

/* ---------- 管理后台 ---------- */
body[data-skin="green"] .shell {
  background:
    radial-gradient(720px 420px at 90% -5%, rgba(165, 227, 178, .28), transparent 64%),
    radial-gradient(620px 420px at -5% 105%, rgba(51, 165, 103, .14), transparent 62%),
    var(--bg);
}

body[data-skin="green"] .side,
body[data-skin="green"] .card,
body[data-skin="green"] #loginBox {
  background: rgba(255, 255, 255, .88);
  border-color: rgba(27, 122, 70, .14);
  box-shadow: 0 20px 48px -36px rgba(20, 61, 41, .7);
  backdrop-filter: blur(16px);
}

body[data-skin="green"] .atab:hover {
  color: var(--acc-deep);
  background: rgba(51, 165, 103, .09);
}

body[data-skin="green"] .atab.active {
  color: #fff;
  background: linear-gradient(120deg, #4fbe75, #1b7a46);
}

body[data-skin="green"] input,
body[data-skin="green"] textarea,
body[data-skin="green"] select {
  background: #fff;
  border-color: rgba(27, 122, 70, .2);
  color: var(--txt);
}

body[data-skin="green"] input:focus,
body[data-skin="green"] textarea:focus {
  border-color: var(--acc);
  background: #fff;
  box-shadow: 0 0 0 3px rgba(51, 165, 103, .14);
}

body[data-skin="green"] button:hover {
  filter: none;
  border-color: rgba(51, 165, 103, .48);
  color: var(--acc-deep);
}

body[data-skin="green"] button.primary {
  color: #fff;
  border-color: transparent;
}

body[data-skin="green"] button.primary:hover {
  color: #fff;
  filter: brightness(1.05);
}

body[data-skin="green"] button.danger {
  color: var(--red);
  border-color: rgba(207, 63, 75, .32);
  background: rgba(207, 63, 75, .06);
}

body[data-skin="green"] .bp,
body[data-skin="green"] .thumb,
body[data-skin="green"] .logo-box {
  background: rgba(255, 255, 255, .78);
  border-color: rgba(27, 122, 70, .18);
}

body[data-skin="green"] .bp.active {
  color: var(--acc-deep);
  border-color: rgba(51, 165, 103, .56);
  background: rgba(123, 211, 137, .18);
  box-shadow: inset 0 0 18px rgba(123, 211, 137, .16);
}

body[data-skin="green"] .msg.ok {
  color: #146c43;
  background: rgba(165, 227, 178, .24);
  border-color: rgba(51, 165, 103, .32);
  box-shadow: inset 3px 0 0 var(--acc-deep);
}

body[data-skin="green"] .msg.err {
  color: #a52a35;
  background: rgba(207, 63, 75, .07);
  border-color: rgba(207, 63, 75, .24);
  box-shadow: inset 3px 0 0 var(--red);
}

body[data-skin="green"] .msg.info {
  color: var(--mut);
  background: rgba(51, 165, 103, .06);
  border-color: rgba(27, 122, 70, .18);
  box-shadow: inset 3px 0 0 rgba(27, 122, 70, .26);
}

body[data-skin="green"] td .op,
body[data-skin="green"] .thumb .t b {
  color: #a52a35;
}

body[data-skin="green"] td .op:hover {
  text-shadow: 0 0 8px rgba(207, 63, 75, .42);
}

body[data-skin="green"] tbody tr:hover td,
body[data-skin="green"] .hint code {
  background: rgba(51, 165, 103, .07);
}

/* ---------- 手机签到 / 上传 / 投票 / 评委 ---------- */
body[data-skin="green"].mobile-page {
  background:
    radial-gradient(900px 600px at 50% -10%, #eaf7ee, #f4faf5 64%);
}

body[data-skin="green"] .logo {
  color: #33a567;
}

body[data-skin="green"] h1 {
  background: linear-gradient(120deg, #33a567, #1b7a46 58%, #4fbe75);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

body[data-skin="green"] .sub,
body[data-skin="green"] label,
body[data-skin="green"] .state,
body[data-skin="green"] .count,
body[data-skin="green"] .tip,
body[data-skin="green"] .who,
body[data-skin="green"] .doneSub {
  color: #507a61;
}

body[data-skin="green"] input,
body[data-skin="green"] select,
body[data-skin="green"] .tcard,
body[data-skin="green"] .judge-page .row,
body[data-skin="green"] .row {
  background: #fff;
  border-color: rgba(27, 122, 70, .18);
  color: var(--txt);
}

body[data-skin="green"] input::placeholder {
  color: rgba(80, 122, 97, .72);
}

body[data-skin="green"] > button,
body[data-skin="green"] #form > button,
body[data-skin="green"] .wrap button,
body[data-skin="green"] .pick {
  color: #fff;
  background: linear-gradient(120deg, #4fbe75, #1b7a46);
  box-shadow: 0 14px 30px -18px rgba(27, 122, 70, .72);
  border: 0;
}

body[data-skin="green"] .pick {
  color: #fff;
  border: 1.5px dashed rgba(255, 255, 255, .66);
  background-blend-mode: normal;
}

body[data-skin="green"] .tcard .g,
body[data-skin="green"] .row .n .g {
  color: #6d8b79;
}

body[data-skin="green"] .tcard.voted {
  opacity: .48;
  border-color: rgba(51, 165, 103, .52);
}

body[data-skin="green"] .tcard.voted::after,
body[data-skin="green"] .who b,
body[data-skin="green"] .again {
  color: #1b7a46;
}

body[data-skin="green"] .done .tick,
body[data-skin="green"] #done .tick {
  color: #146c43;
  background: rgba(165, 227, 178, .3);
  border-color: rgba(51, 165, 103, .58);
}

body[data-skin="green"] .group-badge {
  background: linear-gradient(120deg, rgba(255, 255, 255, .94), rgba(234, 247, 238, .88));
  border-color: rgba(51, 165, 103, .36);
  box-shadow: 0 16px 36px -24px rgba(20, 61, 41, .58);
}

body[data-skin="green"] .group-badge span {
  color: var(--mut);
}

body[data-skin="green"] .group-badge b {
  background: linear-gradient(120deg, #4fbe75, #1b7a46);
}

body[data-skin="green"] .msg.ok {
  color: #146c43;
}

body[data-skin="green"] .msg.err,
body[data-skin="green"] .err,
body[data-skin="green"] #adminMsg {
  color: #a52a35;
}

body[data-skin="green"] .judge-page .row.ok button,
body[data-skin="green"] .row.ok button {
  background: rgba(51, 165, 103, .16);
  color: #146c43;
  box-shadow: none;
}

body[data-skin="green"] #voteQr,
body[data-skin="green"] .qr-box canvas,
body[data-skin="green"] .qr-box .qr-img,
body[data-skin="green"] .wf-qr {
  background: #fff;
}