/* 在线投票小问卷 · 选票站设计系统（前缀 opl-）
   浅色：选票米白 + 墨蓝 + 印章红；深色：深墨蓝底 + 亮蓝 + 珊瑚红
   跟随导航栏 #themeToggle，页面不设独立开关 */
.opl-page, .opl-modal, .ws-toast {
    --opl-bg: #f5f1e6; --opl-paper: #fffdf6; --opl-ink: #1b2b3a; --opl-sub: #5d6b78;
    --opl-brand: #1b3a5c; --opl-brand-soft: #e4ecf4; --opl-red: #b8392f; --opl-gold: #c69228;
    --opl-line: #dcd4c1; --opl-fill: #f0ebdd; --opl-shadow: 0 14px 34px rgba(27,43,58,.09);
    --opl-radius: 6px; --opl-font: "PingFang SC", "Microsoft YaHei", "Noto Sans SC", system-ui, sans-serif;
}
:root[data-theme="dark"] .opl-page, :root[data-theme="dark"] .opl-modal, :root[data-theme="dark"] .ws-toast {
    --opl-bg: #111a24; --opl-paper: #172430; --opl-ink: #e9eff7; --opl-sub: #9aabbb;
    --opl-brand: #8ab8ee; --opl-brand-soft: #1e3245; --opl-red: #f08376; --opl-gold: #e8c46a;
    --opl-line: #2c3e4f; --opl-fill: #1d2c3a; --opl-shadow: 0 16px 38px rgba(0,0,0,.35);
}
.opl-page { background: var(--opl-bg); color: var(--opl-ink); font-family: var(--opl-font);
    line-height: 1.75; font-size: 15px; padding-bottom: 56px; }
.opl-wrap { max-width: 1160px; margin: 0 auto; padding: 0 20px; }
.opl-page .detail-breadcrumb { padding: 18px 0 0; font-size: 13px; color: var(--opl-sub); }
.opl-page .detail-breadcrumb a { color: var(--opl-brand); text-decoration: none; }
.opl-page .detail-breadcrumb .sep { margin: 0 8px; opacity: .55; }
.opl-page b { font-weight: 700; }

/* ---- 首屏：左侧文案 + 右侧票型板 ---- */
.opl-hero { display: grid; grid-template-columns: 1.35fr .8fr; gap: 30px; align-items: center;
    margin: 22px 0 30px; padding: 34px 36px; position: relative; overflow: hidden;
    background: var(--opl-brand); color: #fff; border-radius: 10px;
    background-image: repeating-linear-gradient(135deg, rgba(255,255,255,.035) 0 2px, transparent 2px 9px); }
.opl-hero::after { content: ""; position: absolute; right: -40px; bottom: -70px; width: 240px; height: 240px;
    border: 2px dashed rgba(255,255,255,.16); border-radius: 50%; }
.opl-kicker { display: inline-block; font-size: 11px; letter-spacing: .16em; text-transform: uppercase;
    border: 1px solid rgba(255,255,255,.4); border-radius: 2px; padding: 3px 10px; color: #f3dfae; }
.opl-hero h1 { font-size: clamp(26px, 3.1vw, 38px); line-height: 1.35; margin: 16px 0 10px;
    letter-spacing: .01em; font-weight: 800; }
.opl-sub { font-size: 15px; line-height: 1.9; color: rgba(255,255,255,.88); margin: 0 0 20px; max-width: 620px; }
.opl-sub b { color: #ffdb7a; }
.opl-hero-form { display: flex; gap: 10px; align-items: flex-end; flex-wrap: wrap; }
.opl-field { display: flex; flex-direction: column; gap: 6px; font-size: 12px; color: var(--opl-sub); }
.opl-hero .opl-field { flex: 1 1 300px; color: rgba(255,255,255,.75); }
.opl-page input[type="text"], .opl-page textarea, .opl-page select { font: inherit; color: var(--opl-ink);
    background: var(--opl-paper); border: 1px solid var(--opl-line); border-radius: var(--opl-radius);
    padding: 10px 12px; outline: none; transition: border-color .15s, box-shadow .15s; }
.opl-page input:focus, .opl-page textarea:focus { border-color: var(--opl-brand); box-shadow: 0 0 0 3px var(--opl-brand-soft); }
.opl-btn { font: inherit; font-weight: 600; cursor: pointer; border: 1px solid var(--opl-line);
    background: var(--opl-paper); color: var(--opl-ink); border-radius: var(--opl-radius);
    padding: 10px 16px; transition: transform .12s, background .15s, border-color .15s; white-space: nowrap; }
.opl-btn:hover:not(:disabled) { border-color: var(--opl-brand); transform: translateY(-1px); }
.opl-btn:disabled { opacity: .45; cursor: not-allowed; }
.opl-btn--main { background: var(--opl-red); border-color: var(--opl-red); color: #fff;
    box-shadow: 0 6px 16px rgba(184,57,47,.28); }
.opl-btn--main:hover:not(:disabled) { background: #a02f26; border-color: #a02f26; }
.opl-hero .opl-btn--main { height: 42px; padding: 0 22px; }
.opl-hero-acts { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 14px;
    font-size: 12px; color: rgba(255,255,255,.65); }
.opl-chip { font: inherit; font-size: 12px; color: #fff; background: rgba(255,255,255,.1);
    border: 1px solid rgba(255,255,255,.32); border-radius: 20px; padding: 4px 12px; cursor: pointer; }
.opl-chip:hover { background: rgba(255,255,255,.22); }
.opl-hero-note { margin: 16px 0 0; font-size: 12.5px; color: rgba(255,255,255,.7); }
.opl-hero-note b { color: #ffdb7a; }

.opl-hero-side { position: relative; z-index: 1; }
.opl-ballot { background: var(--opl-paper); color: var(--opl-ink); border-radius: 4px; padding: 20px 22px 18px;
    position: relative; box-shadow: 0 18px 40px rgba(0,0,0,.22);
    background-image: radial-gradient(circle at 0 12px, var(--opl-brand) 5px, transparent 5.5px),
                      radial-gradient(circle at 100% 12px, var(--opl-brand) 5px, transparent 5.5px);
    background-size: 100% 24px; background-position: 0 0; background-repeat: repeat-y; }
.opl-ballot::after { content: ""; position: absolute; left: 16px; right: 16px; bottom: 8px;
    border-bottom: 2px dashed var(--opl-line); }
.opl-ballot-top { display: flex; justify-content: space-between; font-size: 10px; letter-spacing: .14em;
    color: var(--opl-sub); border-bottom: 1px solid var(--opl-line); padding-bottom: 10px; }
.opl-ballot-top b { color: var(--opl-brand); }
.opl-ring-wrap { position: relative; width: 150px; height: 150px; margin: 14px auto 8px; }
.opl-ring { width: 100%; height: 100%; transform: rotate(-90deg); }
.opl-ring-bg, .opl-ring-fg { fill: none; stroke-width: 10; }
.opl-ring-bg { stroke: var(--opl-fill); }
.opl-ring-fg { stroke: var(--opl-red); stroke-linecap: round; stroke-dasharray: 301.6; stroke-dashoffset: 301.6;
    transition: stroke-dashoffset .6s ease; }
.opl-ring-txt { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.opl-ring-txt b { font-size: 34px; line-height: 1; font-variant-numeric: tabular-nums; }
.opl-ring-txt span { font-size: 11px; color: var(--opl-sub); margin-top: 4px; }
.opl-ballot-meta { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; text-align: center;
    border-top: 1px solid var(--opl-line); padding-top: 12px; margin-bottom: 10px; }
.opl-ballot-meta div { display: flex; flex-direction: column; font-size: 11px; color: var(--opl-sub); }
.opl-ballot-meta b { font-size: 14px; color: var(--opl-ink); margin-top: 2px;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.opl-stamp { position: absolute; right: 18px; bottom: -14px; width: 62px; height: 62px; border-radius: 50%;
    border: 2px double var(--opl-red); color: var(--opl-red); font-size: 10px; font-weight: 800;
    letter-spacing: .08em; display: flex; align-items: center; justify-content: center; text-align: center;
    transform: rotate(-16deg); background: var(--opl-paper); line-height: 1.3; }

/* ---- 双栏工作区 ---- */
.opl-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.opl-panel { background: var(--opl-paper); border: 1px solid var(--opl-line); border-radius: 8px;
    padding: 20px 22px; box-shadow: var(--opl-shadow); margin-bottom: 20px; min-width: 0; }
.opl-panel-h { display: flex; align-items: baseline; justify-content: space-between; gap: 10px;
    border-bottom: 2px solid var(--opl-brand); padding-bottom: 10px; margin-bottom: 16px; }
.opl-panel-h b { font-size: 17px; letter-spacing: .02em; }
.opl-panel-h span { font-size: 12px; color: var(--opl-sub); }
.opl-types { display: flex; gap: 6px; margin-bottom: 14px; flex-wrap: wrap; }
.opl-type { font: inherit; font-size: 13px; padding: 7px 15px; cursor: pointer; border-radius: 4px;
    border: 1px solid var(--opl-line); background: var(--opl-fill); color: var(--opl-sub); }
.opl-type.is-on { background: var(--opl-brand); border-color: var(--opl-brand); color: #fff; font-weight: 700; }
.opl-editor .opl-field { margin-bottom: 12px; }
.opl-row { display: flex; gap: 8px; align-items: flex-end; }
.opl-grow { flex: 1; }
.opl-opt-list { list-style: none; margin: 14px 0 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.opl-opt-list li { display: flex; align-items: center; gap: 10px; background: var(--opl-fill);
    border-left: 3px solid var(--opl-gold); padding: 7px 10px; border-radius: 3px; font-size: 14px; }
.opl-opt-list li span.opl-idx { font-size: 11px; color: var(--opl-sub); width: 20px; }
.opl-opt-list li span.opl-txt { flex: 1; word-break: break-all; }
.opl-opt-list li button { border: 0; background: transparent; color: var(--opl-red); cursor: pointer; font-size: 17px; line-height: 1; }
.opl-err { color: var(--opl-red); font-size: 13px; min-height: 20px; margin: 8px 0 0; }
.opl-hint { font-size: 12px; color: var(--opl-sub); line-height: 1.8; margin: 10px 0 0; }
.opl-batch { margin-top: 12px; border-top: 1px dashed var(--opl-line); padding-top: 12px; }
.opl-batch summary { cursor: pointer; font-size: 13px; font-weight: 600; color: var(--opl-brand); }
.opl-batch textarea { width: 100%; margin-top: 10px; resize: vertical; font-size: 13px; box-sizing: border-box; }
.opl-btn-row { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 12px; }
.opl-empty { color: var(--opl-sub); font-size: 13px; text-align: center; padding: 24px 8px; }

/* ---- 投票卡：选项像选票方格 ---- */
.opl-vote-title { font-size: 19px; font-weight: 800; margin: 0 0 4px; word-break: break-all; }
.opl-vote-desc { font-size: 13px; color: var(--opl-sub); margin: 0 0 14px; }
.opl-choices { display: flex; flex-direction: column; gap: 8px; }
.opl-choice { display: flex; align-items: center; gap: 12px; padding: 11px 14px; cursor: pointer;
    border: 1px solid var(--opl-line); border-radius: 4px; background: var(--opl-paper); transition: .15s; }
.opl-choice:hover { border-color: var(--opl-brand); background: var(--opl-brand-soft); }
.opl-choice.is-picked { border-color: var(--opl-red); background: var(--opl-brand-soft); }
.opl-choice .box { width: 18px; height: 18px; flex: none; border: 2px solid var(--opl-brand); border-radius: 3px; }
.opl-choice[data-type="single"] .box, .opl-choice[data-type="score"] .box { border-radius: 50%; }
.opl-choice.is-picked .box { background: var(--opl-red); border-color: var(--opl-red);
    box-shadow: inset 0 0 0 3px var(--opl-paper); }
.opl-choice .txt { flex: 1; font-size: 14px; word-break: break-all; }
.opl-choice .pct { font-size: 12px; font-variant-numeric: tabular-nums; color: var(--opl-red); font-weight: 700; }
.opl-bar { height: 5px; background: var(--opl-fill); border-radius: 3px; overflow: hidden; margin-top: 5px; }
.opl-bar i { display: block; height: 100%; background: var(--opl-red); transition: width .5s; }
.opl-text-answer { width: 100%; min-height: 90px; box-sizing: border-box; }
.opl-vote-acts { border-top: 1px dashed var(--opl-line); padding-top: 12px; }

/* ---- 结果表 ---- */
.opl-table-scroll { overflow-x: auto; }
.opl-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.opl-table th, .opl-table td { padding: 9px 10px; border-bottom: 1px solid var(--opl-line); text-align: left; }
.opl-table th { color: var(--opl-sub); font-weight: 600; background: var(--opl-fill); white-space: nowrap; }
.opl-table td:nth-child(2), .opl-table td:nth-child(3) { font-variant-numeric: tabular-nums; white-space: nowrap; }
.opl-table .opl-empty { padding: 20px; }
.opl-log { margin-top: 16px; border-top: 1px dashed var(--opl-line); padding-top: 12px; font-size: 12px; }
.opl-log-list { color: var(--opl-sub); margin-top: 6px; display: flex; flex-wrap: wrap; gap: 6px; }
.opl-log-list span { background: var(--opl-fill); border-radius: 3px; padding: 2px 8px; }

/* ---- 完成操作后才出现的弹窗 ---- */
.opl-modal[hidden] { display: none !important; }
.opl-modal { position: fixed; inset: 0; z-index: 9999; display: flex; align-items: center; justify-content: center;
    background: rgba(12,22,32,.6); padding: 20px; }
.opl-modal-box { position: relative; width: min(460px, 100%); background: var(--opl-paper); color: var(--opl-ink);
    border-radius: 8px; padding: 30px; box-shadow: 0 24px 60px rgba(0,0,0,.3); border-top: 6px solid var(--opl-red); }
.opl-modal-x { position: absolute; right: 12px; top: 8px; border: 0; background: none; font-size: 24px;
    color: var(--opl-sub); cursor: pointer; }
.opl-modal-kicker { font-size: 10px; letter-spacing: .18em; color: var(--opl-red); }
.opl-modal-box h2 { margin: 8px 0 10px; font-size: 22px; }
.opl-modal-box p { font-size: 14px; color: var(--opl-sub); line-height: 1.85; }
.opl-share-box { margin: 14px 0; }
.opl-share-box input { width: 100%; box-sizing: border-box; font-size: 12px; }
.ws-toast { position: fixed; left: 50%; bottom: 30px; transform: translate(-50%, 16px); z-index: 10000;
    background: var(--opl-ink); color: var(--opl-paper); padding: 10px 20px; border-radius: 4px;
    font-size: 13px; opacity: 0; pointer-events: none; transition: .25s; box-shadow: var(--opl-shadow); }
.ws-toast.is-on { opacity: 1; transform: translate(-50%, 0); }
.ws-toast.is-err { background: var(--opl-red); color: #fff; }

@media (max-width: 900px) {
    .opl-hero { grid-template-columns: 1fr; padding: 26px 22px; }
    .opl-hero-side { max-width: 330px; }
    .opl-grid { grid-template-columns: 1fr; }
}
@media (max-width: 480px) {
    .opl-wrap { padding: 0 12px; }
    .opl-hero { padding: 22px 16px; }
    .opl-hero h1 { font-size: 24px; }
    .opl-panel { padding: 16px 14px; }
    .opl-btn { padding: 9px 11px; font-size: 13px; }
    .opl-table { min-width: 0; }
}
@media print {
    .opl-hero-side, .opl-editor, .opl-vote-acts, .opl-results .opl-btn-row, .tskb, .opl-modal { display: none !important; }
    .opl-hero { background: #fff; color: #000; }
}

/* dark hero contrast fix */
:root[data-theme="dark"] .opl-hero { background-color: #1a2b3d; }

/* dark button contrast fix */
:root[data-theme="dark"] .opl-btn--main { color: #151a20; }