/* 善款簿 — styles. Mobile first, large text, big touch targets. */

:root {
  --bg: #f7f3ec;
  --surface: #ffffff;
  --surface-2: #f0e9de;
  --text: #1e1a16;
  --muted: #6b6158;
  --border: #e0d5c6;
  --primary: #a3461a;
  --primary-ink: #ffffff;
  --primary-soft: #f6e5d8;
  --paid: #1b6b40;
  --paid-ink: #ffffff;
  --paid-soft: #e2f1e7;
  --due-soft: #fbeae6;
  --danger: #b3261e;
  --danger-soft: #fbe7e5;
  --warn-soft: #fff1d6;
  --warn-border: #e8c27a;
  --shadow: 0 1px 2px rgba(60, 40, 20, 0.06), 0 6px 18px rgba(60, 40, 20, 0.07);
  --radius: 18px;
  --radius-sm: 12px;
  --font: -apple-system, BlinkMacSystemFont, "PingFang SC", "Hiragino Sans GB", "Noto Sans SC", "Microsoft YaHei", "Segoe UI", Roboto, sans-serif;
  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #171411;
    --surface: #221e1a;
    --surface-2: #2c2722;
    --text: #f3ede5;
    --muted: #b5aa9d;
    --border: #3d352d;
    --primary: #f0a06a;
    --primary-ink: #1c0f06;
    --primary-soft: #3a2619;
    --paid: #63c98f;
    --paid-ink: #0b2015;
    --paid-soft: #1b3324;
    --due-soft: #3a201c;
    --danger: #ff8f86;
    --danger-soft: #3a1d1b;
    --warn-soft: #3a2f17;
    --warn-border: #7d6332;
    --shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: #171411; --surface: #221e1a; --surface-2: #2c2722; --text: #f3ede5; --muted: #b5aa9d; --border: #3d352d;
  --primary: #f0a06a; --primary-ink: #1c0f06; --primary-soft: #3a2619; --paid: #63c98f; --paid-ink: #0b2015;
  --paid-soft: #1b3324; --due-soft: #3a201c; --danger: #ff8f86; --danger-soft: #3a1d1b; --warn-soft: #3a2f17;
  --warn-border: #7d6332; --shadow: 0 1px 2px rgba(0, 0, 0, 0.4); color-scheme: dark;
}

html { font-size: 19px; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
html[data-font="normal"] { font-size: 17px; }
html[data-font="large"] { font-size: 19px; }
html[data-font="xlarge"] { font-size: 22px; }

*, *::before, *::after { box-sizing: border-box; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  line-height: 1.5;
  -webkit-tap-highlight-color: transparent;
}
body.has-sheet { overflow: hidden; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
:focus-visible { outline: 3px solid var(--primary); outline-offset: 2px; }
h1, h2, h3, p { margin: 0; }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.muted { color: var(--muted); }
b, strong { font-weight: 700; }
.num, .summary-big, .tick-amt, .pamt, .grid td, dd { font-variant-numeric: tabular-nums; }

/* ------------------------------------------------------------ top bar */
.topbar {
  position: sticky;
  top: 0;
  z-index: 10;
  display: grid;
  grid-template-columns: minmax(4.5rem, auto) 1fr minmax(4.5rem, auto);
  align-items: center;
  gap: 4px;
  padding: calc(env(safe-area-inset-top) + 6px) 8px 6px;
  background: var(--bg);
  background: color-mix(in srgb, var(--bg) 92%, transparent);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--border);
}
.topbar-title {
  font-size: 1.15rem;
  font-weight: 700;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.topbar-btn {
  min-height: 48px;
  padding: 0 12px;
  border: 0;
  background: none;
  color: var(--primary);
  font-weight: 600;
  border-radius: var(--radius-sm);
  justify-self: start;
}
.topbar > :last-child { justify-self: end; }
.topbar-btn:active { background: var(--primary-soft); }

.tabs {
  position: sticky;
  top: calc(env(safe-area-inset-top) + 61px);
  z-index: 9;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 4px;
  padding: 6px 12px 8px;
  background: var(--bg);
  max-width: 640px;
  margin: 0 auto;
}
.tab {
  min-height: 46px;
  border: 1.5px solid var(--border);
  background: var(--surface);
  border-radius: 999px;
  font-weight: 600;
  color: var(--muted);
}
.tab[aria-current="page"] { background: var(--text); color: var(--bg); border-color: var(--text); }

/* ------------------------------------------------------------ page */
.page {
  max-width: 640px;
  margin: 0 auto;
  padding: 12px 16px calc(env(safe-area-inset-bottom) + 110px);
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.page-wide { max-width: 1100px; }
.stack { display: flex; flex-direction: column; gap: 12px; }
.section-label { color: var(--muted); font-size: 0.9rem; font-weight: 600; margin: 4px 4px -4px; }
.hint { color: var(--muted); font-size: 0.85rem; }
.hint-top { margin: 0 4px -6px; }

.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 16px;
  box-shadow: var(--shadow);
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.card-title { font-size: 1rem; font-weight: 700; }
.empty { text-align: center; align-items: stretch; padding: 24px 18px; }
.empty h2 { font-size: 1.3rem; }
.empty p { color: var(--muted); }
.empty-mark {
  width: 72px; height: 72px; margin: 0 auto 4px;
  display: grid; place-items: center;
  border-radius: 20px;
  background: var(--primary); color: var(--primary-ink);
  font-size: 2.6rem; font-weight: 700;
  font-family: KaiTi, STKaiti, "Kaiti SC", serif;
}

/* ------------------------------------------------------------ buttons */
.btn {
  min-height: 54px;
  padding: 0 18px;
  border-radius: var(--radius-sm);
  border: 1.5px solid transparent;
  font-weight: 700;
  font-size: 1rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  text-align: center;
}
.btn:active { transform: translateY(1px); }
.btn-block { width: 100%; }
.btn-primary { background: var(--primary); color: var(--primary-ink); }
.btn-secondary { background: var(--primary-soft); color: var(--primary); }
.btn-ghost { background: transparent; color: var(--primary); border-color: var(--border); }
.btn-danger { background: transparent; color: var(--danger); border-color: var(--danger); border-color: color-mix(in srgb, var(--danger) 40%, transparent); }
.btn-danger-solid { background: var(--danger); color: #fff; }
.btn-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.link-btn {
  align-self: center;
  border: 0; background: none;
  color: var(--primary);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
  min-height: 44px;
  padding: 0 8px;
}

/* ------------------------------------------------------------ banners */
.banner {
  display: flex; align-items: center; gap: 12px;
  width: 100%;
  text-align: left;
  border-radius: var(--radius);
  padding: 14px 16px;
  border: 1.5px solid var(--warn-border);
  background: var(--warn-soft);
}
.banner-text { display: flex; flex-direction: column; flex: 1; }
.banner-text span { font-size: 0.88rem; color: var(--muted); }
.banner-go { font-size: 1.6rem; color: var(--muted); }
.banner-danger { border-color: var(--danger); background: var(--danger-soft); color: var(--danger); font-weight: 600; }

/* ------------------------------------------------------------ demo mode */
.demo-bar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px 8px;
  padding: calc(env(safe-area-inset-top) + 8px) 12px 8px;
  background: #2f5d8a;
  color: #fff;
  font-size: 0.88rem;
}
.demo-text { flex: 1 1 12em; }
.demo-btn {
  min-height: 40px;
  padding: 0 12px;
  border-radius: 10px;
  border: 1.5px solid rgba(255, 255, 255, 0.7);
  background: transparent;
  color: #fff;
  font-weight: 700;
}

/* ------------------------------------------------------------ home */
.fund-card { text-align: left; width: 100%; gap: 8px; }
.fund-card:active { background: var(--surface-2); }
.fund-name { font-size: 1.2rem; font-weight: 700; }
.fund-row { display: flex; justify-content: space-between; gap: 8px; color: var(--muted); }
.fund-row b { color: var(--text); }
.fund-row-strong { color: var(--text); padding-top: 6px; border-top: 1px dashed var(--border); }
.fund-row-strong b { font-size: 1.15rem; }

.progress { display: block; height: 10px; border-radius: 999px; background: var(--surface-2); overflow: hidden; }
.progress > span { display: block; height: 100%; background: var(--paid); border-radius: inherit; transition: width .3s; }

/* ------------------------------------------------------------ month page */
.period-nav { display: grid; grid-template-columns: 56px 1fr 56px; align-items: center; gap: 8px; }
.period-title { text-align: center; font-size: 1.35rem; font-weight: 700; }
.period-btn {
  height: 56px;
  border-radius: 50%;
  border: 1.5px solid var(--border);
  background: var(--surface);
  font-size: 1.8rem;
  line-height: 1;
  color: var(--text);
}
.period-btn:active { background: var(--surface-2); }

.summary { gap: 12px; }
.summary-main { display: grid; grid-template-columns: 1fr auto; grid-template-areas: "label count" "big big"; row-gap: 2px; }
.summary-label { grid-area: label; color: var(--muted); font-weight: 600; }
.summary-count { grid-area: count; color: var(--muted); font-weight: 600; }
.summary-big { grid-area: big; font-size: 2.1rem; font-weight: 800; line-height: 1.15; }
.summary-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 0; }
.summary-grid div { background: var(--surface-2); border-radius: var(--radius-sm); padding: 8px 10px; }
.summary-grid dt, .year-totals dt { font-size: 0.8rem; color: var(--muted); }
.summary-grid dd, .year-totals dd { margin: 0; font-weight: 700; font-size: 1rem; white-space: nowrap; }
.summary-total { background: var(--primary-soft) !important; }
.summary-total dd { color: var(--primary); }

.people, .roster, .plist, .preview-list { list-style: none; margin: 0; padding: 0; }
.people {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  overflow: hidden;
}
.person { display: flex; align-items: stretch; border-top: 1px solid var(--border); }
.person:first-child { border-top: 0; }
.person.is-paid { background: var(--paid-soft); background: color-mix(in srgb, var(--paid-soft) 55%, var(--surface)); }
.person-main, .roster-main {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 8px 12px 14px;
  border: 0;
  background: none;
  text-align: left;
  min-height: 72px;
}
.num {
  flex: none;
  width: 2em;
  text-align: right;
  color: var(--muted);
  font-size: 0.9rem;
}
.pinfo { display: flex; flex-direction: column; min-width: 0; }
.pname { font-weight: 700; font-size: 1.05rem; overflow-wrap: anywhere; }
.psub { color: var(--muted); font-size: 0.85rem; overflow-wrap: anywhere; }

.tick {
  flex: none;
  align-self: center;
  margin-right: 12px;
  width: 5.2rem;
  min-height: 56px;
  border-radius: 14px;
  border: 2px solid var(--border);
  background: var(--surface);
  color: var(--muted);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  font-weight: 700;
}
.tick-box { width: 22px; height: 22px; border-radius: 6px; border: 2.5px solid currentColor; opacity: .7; }
.tick-amt { font-size: 0.95rem; }
.tick:active { background: var(--surface-2); }
.tick.is-paid { background: var(--paid); color: var(--paid-ink); border-color: var(--paid); }
.tick-mark { font-size: 1.2rem; line-height: 1; }
.tick.is-paid .tick-amt { font-size: 1.05rem; }

.plist li + li { border-top: 1px solid var(--border); }
.prow {
  width: 100%;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 12px;
  min-height: 56px;
  padding: 6px 2px;
  border: 0;
  background: none;
  text-align: left;
}
.pdate { color: var(--muted); font-size: 0.9rem; min-width: 3em; }
.pnote { overflow-wrap: anywhere; }
.pamt { font-weight: 700; color: var(--danger); white-space: nowrap; }

.note-btn {
  width: 100%;
  min-height: 56px;
  text-align: left;
  border: 1.5px dashed var(--border);
  border-radius: var(--radius-sm);
  background: none;
  padding: 10px 12px;
}
.note-text { white-space: pre-wrap; }

/* ------------------------------------------------------------ people list */
.roster {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  overflow: hidden;
}
.roster-item { display: flex; align-items: center; border-top: 1px solid var(--border); }
.roster-item:first-child { border-top: 0; }
.roster-item.ended .pname { color: var(--muted); }
.tag { font-size: 0.75rem; font-weight: 600; padding: 1px 8px; border-radius: 999px; background: var(--surface-2); color: var(--muted); vertical-align: 2px; }
.order-btns { display: flex; flex-direction: column; gap: 4px; padding: 6px 10px 6px 0; }
.order-btn {
  width: 44px; height: 34px;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--muted);
  font-weight: 700;
}
.order-btn:disabled { opacity: .3; cursor: default; }

/* ------------------------------------------------------------ year grid */
.grid-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}
.grid { border-collapse: separate; border-spacing: 0; font-size: 0.85rem; min-width: 100%; }
.grid th, .grid td { border-bottom: 1px solid var(--border); border-left: 1px solid var(--border); padding: 0; text-align: center; white-space: nowrap; }
.grid thead th { background: var(--surface-2); padding: 8px 6px; font-weight: 700; color: var(--muted); }
.grid .name-col {
  position: sticky;
  left: 0;
  z-index: 2;
  background: var(--surface);
  border-left: 0;
  border-right: 2px solid var(--border);
  text-align: left;
  padding: 6px 8px;
  min-width: 6.5em;
  max-width: 8.5em;
  white-space: normal;
  font-weight: 600;
}
.grid thead .name-col { background: var(--surface-2); }
.gnum { color: var(--muted); font-size: 0.8em; margin-right: 4px; }
.gname { overflow-wrap: anywhere; }
.gpledge { display: block; font-size: 0.75em; color: var(--muted); font-weight: 400; }
.grid td button {
  width: 100%;
  min-width: 2.9em;
  min-height: 46px;
  border: 0;
  background: none;
  padding: 4px;
  font-weight: 700;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.grid td.paid { background: var(--paid-soft); color: var(--paid); }
.grid td.due { background: var(--due-soft); }
.grid td.off { color: var(--muted); }
.grid td.off button { font-weight: 400; }
.grid td.total { font-weight: 800; padding: 0 8px; background: var(--surface-2); }
.grid tr.ended .gname { color: var(--muted); }
.grid tfoot th, .grid tfoot td { background: var(--surface-2); font-weight: 700; }
.grid tfoot .name-col { background: var(--surface-2); }
.grid tfoot td { padding: 6px 4px; }
.grid tfoot .out-row td { padding: 0; }
.grid .out-row td button { color: var(--danger); }
.gdate { display: block; font-size: 0.72em; color: var(--muted); font-weight: 400; }
.grid .bal-row td { color: var(--primary); }
.grid .note-row td { white-space: normal; font-weight: 400; font-size: 0.75em; min-width: 5em; text-align: left; padding: 4px 6px; }
.year-totals { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; margin: 0; }
.year-totals div { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 10px 12px; }
.actions { display: flex; flex-direction: column; gap: 10px; }
.print-title { display: none; }

/* ------------------------------------------------------------ settings */
.segmented { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.segmented button {
  min-height: 52px;
  border-radius: var(--radius-sm);
  border: 1.5px solid var(--border);
  background: var(--surface);
  font-weight: 700;
}
.segmented button:nth-child(1) { font-size: 0.9rem; }
.segmented button:nth-child(3) { font-size: 1.2rem; }
.segmented button[aria-checked="true"] { background: var(--text); color: var(--bg); border-color: var(--text); }
.inline-form { display: grid; grid-template-columns: 1fr auto; gap: 10px; }
.about { text-align: center; color: var(--muted); font-size: 0.85rem; }

/* ------------------------------------------------------------ forms & sheets */
.field { display: flex; flex-direction: column; gap: 6px; }
.field-label { font-weight: 700; font-size: 0.95rem; }
.input {
  width: 100%;
  min-height: 56px;
  padding: 10px 14px;
  border-radius: var(--radius-sm);
  border: 1.5px solid var(--border);
  background: var(--surface);
  font-size: 1.05rem;
  -webkit-appearance: none;
  appearance: none;
}
select.input {
  background-image: linear-gradient(45deg, transparent 50%, var(--muted) 50%), linear-gradient(135deg, var(--muted) 50%, transparent 50%);
  background-position: calc(100% - 22px) 50%, calc(100% - 16px) 50%;
  background-size: 6px 6px;
  background-repeat: no-repeat;
  padding-right: 40px;
}
.input:focus { border-color: var(--primary); outline: none; box-shadow: 0 0 0 3px var(--primary-soft); }
.input-money { font-size: 1.6rem; font-weight: 800; font-variant-numeric: tabular-nums; }
.textarea { min-height: 120px; line-height: 1.6; resize: vertical; }
.form-error { color: var(--danger); font-weight: 700; min-height: 0; }
.form-error:empty { display: none; }

.stepper { display: grid; grid-template-columns: 64px 1fr 64px; align-items: center; gap: 8px; }
.step {
  height: 56px;
  border-radius: var(--radius-sm);
  border: 1.5px solid var(--border);
  background: var(--surface);
  font-size: 1.6rem;
  font-weight: 700;
}
.step-val { text-align: center; font-size: 1.6rem; font-weight: 800; }

#sheet, #confirm { position: fixed; inset: 0; z-index: 50; pointer-events: none; }
#confirm { z-index: 60; }
#sheet:empty, #confirm:empty { display: none; }
.sheet-backdrop { position: absolute; inset: 0; background: rgba(20, 12, 4, 0.45); opacity: 0; transition: opacity .2s; pointer-events: auto; }
#sheet.open .sheet-backdrop, #confirm.open .sheet-backdrop { opacity: 1; }
.sheet {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  max-height: 92vh;
  max-height: 92dvh;
  overflow-y: auto;
  overscroll-behavior: contain;
  background: var(--bg);
  border-radius: 24px 24px 0 0;
  padding: 8px 18px calc(env(safe-area-inset-bottom) + 18px);
  transform: translateY(100%);
  transition: transform .25s ease-out;
  pointer-events: auto;
  max-width: 640px;
  margin: 0 auto;
}
#sheet.open .sheet { transform: none; }
.sheet-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 10px 0 14px; position: sticky; top: -8px; background: var(--bg); z-index: 1; }
.sheet-head h2 { font-size: 1.3rem; overflow-wrap: anywhere; }
.sheet-sub { color: var(--muted); margin-top: 2px; }
.sheet-x { flex: none; width: 48px; height: 48px; border-radius: 50%; border: 1px solid var(--border); background: var(--surface); font-size: 1.1rem; }
.sheet-form { display: flex; flex-direction: column; gap: 16px; }
.sheet-actions { display: flex; flex-direction: column; gap: 10px; margin-top: 4px; }
.bulk-preview .preview-list { margin-top: 6px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface); max-height: 30vh; overflow-y: auto; }
.preview-list li { display: flex; justify-content: space-between; gap: 10px; padding: 8px 12px; border-top: 1px solid var(--border); }
.preview-list li:first-child { border-top: 0; }

.confirm {
  position: absolute;
  left: 16px; right: 16px; top: 50%;
  transform: translateY(-50%);
  max-width: 460px;
  margin: 0 auto;
  background: var(--bg);
  border-radius: var(--radius);
  padding: 22px 18px 18px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
  pointer-events: auto;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.confirm h2 { font-size: 1.25rem; }
.confirm-actions { display: flex; flex-direction: column; gap: 10px; margin-top: 6px; }

/* ------------------------------------------------------------ toast */
#toast {
  position: fixed;
  left: 12px; right: 12px;
  bottom: calc(env(safe-area-inset-bottom) + 16px);
  z-index: 70;
  display: flex;
  justify-content: center;
  pointer-events: none;
  transform: translateY(150%);
  transition: transform .25s ease-out;
}
#toast.show { transform: none; }
.toast-inner {
  pointer-events: auto;
  max-width: 560px;
  width: 100%;
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--text);
  color: var(--bg);
  padding: 10px 10px 10px 18px;
  border-radius: 16px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25);
  min-height: 60px;
}
.toast-msg { flex: 1; font-weight: 600; }
.toast-btn {
  min-height: 46px;
  padding: 0 16px;
  border-radius: 12px;
  border: 0;
  background: var(--bg);
  color: var(--text);
  font-weight: 800;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; }
}

@media (min-width: 700px) {
  .year-totals { grid-template-columns: repeat(4, 1fr); }
  .actions { flex-direction: row; }
}

/* ------------------------------------------------------------ print (year table) */
@media print {
  @page { size: A4 landscape; margin: 10mm; }
  :root { --bg: #fff; --surface: #fff; --surface-2: #f2f2f2; --text: #000; --muted: #555; --border: #999; --paid: #000; --paid-soft: #fff; --due-soft: #fff; --primary: #000; --primary-soft: #eee; --danger: #000; --shadow: none; }
  html { font-size: 11pt; }
  body { background: #fff; }
  .topbar, .tabs, .period-nav, .no-print, #toast, #sheet, #confirm, .link-btn, .banner { display: none !important; }
  .page { padding: 0; max-width: none; gap: 8px; }
  .print-title { display: block; font-size: 14pt; margin-bottom: 4px; }
  .grid-wrap { overflow: visible; border: 0; box-shadow: none; border-radius: 0; }
  .grid { font-size: 9pt; width: 100%; border-top: 1px solid #999; border-right: 1px solid #999; }
  .grid .name-col { position: static; border-left: 1px solid #999; }
  .grid td button { min-height: 0; padding: 3px 2px; min-width: 0; }
  .grid td.paid button::after { content: " ✓"; font-size: 0.8em; }
  .year-totals { grid-template-columns: repeat(4, 1fr); }
  .year-totals div { border: 1px solid #999; padding: 4px 8px; }
}
@media print { .demo-bar { display: none !important; } }