/* Bespoke blue pictograms and realistic work artifacts. Original site palette and effects stay intact. */
.ui-icon { display: inline-block; width: 24px; height: 24px; object-fit: contain; vertical-align: middle; flex-shrink: 0; }
.demo-controls { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 8px 14px; border-top: 1px solid var(--line); background: var(--paper); color: var(--muted); }
.demo-controls > span { font-size: 11px; }
.demo-read-toggle { min-height: 44px; padding: 8px 12px; border: 1px solid var(--line); background: var(--paper); color: var(--ink); font-size: 12px; font-weight: 700; scroll-margin-top: 16px; scroll-margin-bottom: 20px; }
.demo-read-toggle:hover { background: var(--bone); border-color: var(--accent); }
.device.is-expanded { scroll-margin-top: 16px; }
.device.is-expanded .dbody { height: auto; max-height: none; overflow: visible; }
.device.is-expanded .dbody *, .device.is-expanded .dbody *::after { animation: none !important; transition: none !important; }
.device.is-expanded .md-text::after { display: none; }
.demo-duo > div { min-width: 0; }
.social-icon { width: 25px; height: 25px; padding: 2px; background: #fff; border-radius: 3px; }
.device .bar { gap: 10px; flex-wrap: nowrap; min-height: 72px; letter-spacing: .015em; }
.device .app-icon { width: 34px; height: 34px; padding: 4px; background: #fff; border-radius: 5px; }
.app-heading { display: block; min-width: 0; font-size: 14px; line-height: 1.5; }
.app-heading small { display: block; font-size: 11px; line-height: 1.6; font-weight: 400; opacity: .85; margin-top: 2px; }
.demo-live { margin-left: auto; flex-shrink: 0; font: 10px "JetBrains Mono",monospace; letter-spacing: .08em; border: 1px solid currentColor; opacity: .8; padding: 4px 6px; }
.device .dbody { height: 510px; }
.msg .av { overflow: hidden; border-radius: 6px; }
.msg .av img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; }
.msg .av.ai { padding: 5px; background: #fff; }
.msg .av.ai img { object-fit: contain; }
.msg .tx .ui-icon, .bub > .ui-icon { width: 18px; height: 18px; margin: 0 5px 2px 0; padding: 1px; background: #fff; border-radius: 2px; }
.msg .bx { min-width: 0; flex: 1; }
.document-attachment { margin-top: 12px; max-width: 310px; border: 1px solid #5a6270; border-radius: 7px; overflow: hidden; background: #292e36; }
.estimate-paper { margin: 14px 14px 0; padding: 18px; background: #fff; color: var(--text); box-shadow: 0 3px 8px #0002; border-top: 3px solid var(--ink); }
.paper-kicker { font: 10px "JetBrains Mono",monospace; letter-spacing: .12em; color: var(--muted); }
.paper-title { display: block; font-family: "Noto Sans JP",sans-serif; font-size: 21px; font-weight: 700; letter-spacing: .15em; margin-top: 10px; }
.paper-subject { font-size: 12px; margin: 12px 0; padding-bottom: 10px; border-bottom: 1px solid var(--line); }
.estimate-rule { display: flex; flex-wrap: wrap; gap: 4px 12px; font-size: 11px; line-height: 1.8; padding: 6px 0; border-bottom: 1px solid #e6edf5; }
.estimate-rule span:first-child { color: var(--muted); flex-shrink: 0; }
.paper-foot { margin-top: 14px; font-size: 10px; line-height: 1.8; color: var(--muted); }
.msg .file { margin: 0; padding: 12px; background: transparent; border: 0; border-radius: 0; align-items: center; gap: 10px; }
.msg .file > .ui-icon { background: #fff; padding: 3px; width: 30px; height: 30px; border-radius: 3px; }
.msg .file small { display: block; color: #c1c9d5; font-size: 10px; margin-top: 5px; }
.lmsg .mcard { width: 330px; max-width: 95%; margin: 0; padding: 0; overflow: hidden; border: 1px solid #5f7897; border-radius: 10px; background: #f8fafc; box-shadow: 0 3px 10px #18375420; }
.business-card-photo { display: block; width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: contain; background: #e9edf0; }
.lmsg .mcard .cap { padding: 9px 10px; margin: 0; font-size: 10px; line-height: 1.6; color: var(--muted); }
.contact-preview { display: flex; flex-direction: column; gap: 3px; margin: 12px 0; padding: 12px 0 12px 12px; border-left: 3px solid var(--ink); color: var(--text); }
.contact-preview > span { font-size: 11px; }
.contact-preview small { font-size: 10px; color: var(--muted); }
.contact-preview b { font-size: 17px; font-weight: 700; }
.contact-preview .contact-email { font-family: "JetBrains Mono",monospace; font-size: 10px; margin-top: 5px; overflow-wrap: anywhere; }
.night-summary { display: flex; justify-content: space-between; gap: 16px; padding: 18px 22px; background: #0d1523; border-bottom: 1px solid #28364c; }
.night-summary > div { display: flex; flex-direction: column; gap: 6px; }
.night-summary > div:last-child { text-align: right; }
.night-summary span { font-size: 11px; color: #b1c0d4; }
.night-summary b { font-family: "JetBrains Mono",monospace; font-size: 24px; font-weight: 500; color: #88d9ff; letter-spacing: .035em; }
.night-summary > div:last-child b { font-size: 20px; }
.night .dbody { height: 415px; }
.nline { padding: 7px 0 14px; border-bottom: 1px solid #1c2a3e; }
.nline .who { color: #fff; font-weight: 500; }
.nline .ok { margin-left: 4px; color: #88d9ff; font-size: 11px; }
.mailer .dbody { gap: 16px; }
.mail-in, .mail-draft { border-radius: 7px; padding: 18px; margin: 0; }
.mail-subject { color: #183754; font-weight: 700; font-size: 14px; line-height: 1.6; padding-bottom: 14px; border-bottom: 1px solid #e2eaf3; }
.mail-sender { display: flex; align-items: center; gap: 10px; margin: 14px 0; }
.sender-monogram { display: grid; place-items: center; width: 32px; height: 32px; background: #e7eef8; color: var(--ink); border-radius: 50%; font-size: 13px; }
.mail-sender b { font-size: 12px; color: var(--text); }
.mail-sender div > span { display: block; color: var(--muted); font-size: 10px; line-height: 1.6; margin-top: 3px; }
.mail-draft .mh2 { display: flex; align-items: center; gap: 7px; font-family: "Noto Sans JP",sans-serif; letter-spacing: 0; line-height: 1.7; flex-wrap: wrap; }
.mail-draft .mh2 .ui-icon { width: 20px; height: 20px; }
.draft-label { margin-left: auto; font: 9px "JetBrains Mono",monospace; padding: 3px 5px; border: 1px solid #8abcfb; }
.md-done, .inv-done { color: var(--ink); text-align: left; font-size: 11px; line-height: 1.8; }
.md-done .ui-icon, .inv-done .ui-icon { width: 17px; height: 17px; margin-right: 5px; }
.voc .dbody { gap: 16px; }
.voc-num { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin: 0; padding: 18px; background: #f3f8fe; border: 1px solid #dbe8f7; border-radius: 7px; color: var(--text); }
.voc-num > span { font-weight: 700; font-size: 13px; }
.voc-num small { display: block; font-weight: 400; color: var(--muted); font-size: 10px; margin-top: 5px; }
.voc-num > div { white-space: nowrap; }
.voc-num b { font-size: 42px; line-height: 1.2; margin: 0 4px 0 0; }
.chart-heading { display: flex; justify-content: space-between; gap: 8px; font-size: 11px; color: var(--muted); }
.voc-bars { gap: 15px; margin-bottom: 0; }
.vbar .lb { font-size: 12px; color: var(--text); }
.vbar .tr, .vbar .fl { border-radius: 2px; }
.vbar .tr { height: 8px; }
.voc-latest { margin: 0; border-radius: 4px; padding: 14px; }
.invoice .dbody { background: #eaf0f7; gap: 16px; }
.invoice-paper { background: #fff; padding: 24px; border: 1px solid #d3deeb; box-shadow: 0 3px 8px #14376210; color: var(--text); }
.invoice-heading { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 12px 0 18px; border-bottom: 2px solid var(--ink); }
.invoice-heading h3 { font-family: "Noto Sans JP",sans-serif; font-size: 25px; font-weight: 700; letter-spacing: .18em; margin: 0; }
.invoice-heading > span { border: 1px solid var(--line); padding: 3px 8px; font-size: 10px; color: var(--muted); }
.invoice-address { margin: 18px 0; }
.invoice-address b, .invoice-address span { display: block; font-size: 12px; }
.invoice-address span { font-size: 10px; color: var(--muted); margin-top: 6px; }
.invoice .inv-lead { font-size: 10px; line-height: 1.8; }
.inv-table thead tr { opacity: 1; transform: none; }
.inv-table th { font-size: 10px; padding: 8px 4px; color: var(--muted); background: #f4f7fb; font-weight: 500; text-align: left; }
.inv-table th:nth-child(2) { text-align: center; }
.inv-table th:last-child { text-align: right; }
.inv-table td { border-bottom: 1px solid #e1e8f1; font-size: 12px; padding: 12px 4px; }
.inv-table td:nth-child(2) { font-size: 10px; }
.inv-total { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding-top: 14px; border-top: 1px solid var(--ink); font-size: 11px; }
.inv-total b { font-size: 29px; }
@media (max-width:540px) {
  .device .bar { padding: 12px; gap: 9px; }
  .device .app-icon { width: 30px; height: 30px; }
  .app-heading { font-size: 12px; }
  .app-heading small { font-size: 10px; }
  .demo-live { font-size: 9px; padding: 3px 4px; }
  .device .dbody { height: 540px; }
  .night .dbody { height: 445px; }
  .night-summary { padding: 18px 14px; }
  .night-summary b { font-size: 21px; }
  .document-attachment { max-width: 100%; }
  .estimate-paper { padding: 12px; margin: 10px 10px 0; }
  .paper-title { font-size: 19px; }
  .estimate-rule { font-size: 10px; }
  .mail-in, .mail-draft { padding: 14px; }
  .invoice-paper { padding: 16px 12px; }
  .inv-table td { font-size: 11px; padding: 10px 3px; }
  .inv-table td:nth-child(2) { font-size: 10px; }
  .inv-total b { font-size: 25px; }
  .voc-num { padding: 14px; }
  .voc-num b { font-size: 38px; }
  .social-icon { width: 23px; height: 23px; }
}
@media (max-width:360px) {
  .demo-live { display: none; }
  .inv-table td:first-child { width: 44%; }
  .inv-table td:last-child { font-size: 10px; }
  .paper-foot { font-size: 10px; }
}