* {
      margin: 0;
      padding: 0;
      box-sizing: border-box
    }

    :root {
      --sky: #0ea5e9;
      --skl: #e0f2fe;
      --skll: #f0f9ff;
      --skd: #0369a1;
      --am: #f59e0b;
      --aml: #fef3c7;
      --amll: #fffbeb;
      --amd: #d97706;
      --gn: #10b981;
      --gnl: #d1fae5;
      --ro: #f43f5e;
      --rol: #ffe4e6;
      --vi: #8b5cf6;
      --vil: #ede9fe;
      --s1: #f8fafc;
      --s2: #f1f5f9;
      --s3: #e2e8f0;
      --s4: #cbd5e1;
      --s5: #94a3b8;
      --s6: #64748b;
      --s7: #475569;
      --s8: #1e293b;
      --r: 12px;
      --rs: 8px
    }

    body {
      font-family: var(--font-main);
      color: var(--c-text-main);
      font-size: 16px;
      min-height: 100vh;
    }

    .w {
      font-family: 'Zen Maru Gothic', sans-serif;
      font-size: 15px;
      max-width: 860px;
      margin: 0 auto;
      padding: 0 14px 100px
    }

    .ld {
      display: flex;
      align-items: center;
      justify-content: center;
      min-height: 100vh;
      flex-direction: column;
      gap: 12px
    }

    .ld-sp {
      width: 44px;
      height: 44px;
      border: 3px solid var(--s3);
      border-top-color: var(--sky);
      border-radius: 50%;
      animation: sp .8s linear infinite
    }

    @keyframes sp {
      to {
        transform: rotate(360deg)
      }
    }

    .hd-sticky {
      position: sticky;
      top: 0;
      z-index: 1000;
      background: rgba(224, 242, 254, 0.95);
      backdrop-filter: blur(8px);
      -webkit-backdrop-filter: blur(8px);
      padding: 12px 14px 6px;
      margin: 0 -14px 16px;
      border-radius: 0 0 16px 16px;
      box-shadow: 0 4px 12px rgba(14, 165, 233, 0.08);
      border-bottom: 1px solid rgba(14, 165, 233, 0.1);
    }

    .hd-btns {
      display: flex;
      gap: 8px;
      justify-content: center;
      margin-bottom: 12px;
      flex-wrap: wrap
    }

    .hd-btns button,
    .hd-btns label {
      font-family: inherit;
      font-size: 13px;
      padding: 6px 16px;
      border-radius: 22px;
      border: 1.5px solid var(--skl);
      background: #fff;
      color: var(--sky);
      cursor: pointer;
      font-weight: 600
    }

    .hd-btns button:hover,
    .hd-btns label:hover {
      border-color: var(--sky);
      background: var(--skll)
    }

    .hd-btns input[type=file] {
      display: none
    }

    .tbs {
      display: flex;
      gap: 3px;
      background: rgba(255, 255, 255, .6);
      border-radius: 16px;
      padding: 4px;
      margin-bottom: 16px;
      overflow-x: auto;
      scrollbar-width: none
    }

    .tbs::-webkit-scrollbar {
      display: none
    }

    .tb {
      flex: 1;
      min-width: 0;
      padding: 10px 4px;
      border: none;
      border-radius: 12px;
      background: transparent;
      font-family: inherit;
      font-size: 12px;
      font-weight: 500;
      color: var(--s5);
      cursor: pointer;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 2px;
      white-space: nowrap
    }

    .tb .ti {
      font-size: 18px
    }

    .tb.on {
      background: #fff;
      color: var(--sky);
      box-shadow: 0 2px 10px rgba(14, 165, 233, .12);
      font-weight: 700
    }

    .tb.disabled {
      opacity: .4;
      cursor: not-allowed;
      filter: grayscale(.8);
      pointer-events: none
    }

    .step-ctrl {
      display: flex;
      justify-content: center;
      gap: 12px;
      padding-top: 24px;
      margin-top: 10px;
      border-top: 2px dashed var(--s3)
    }

    .btn-cf {
      padding: 12px 40px;
      background: var(--sky);
      color: #fff;
      border: none;
      border-radius: 30px;
      font-family: inherit;
      font-weight: 700;
      font-size: 16px;
      cursor: pointer;
      box-shadow: 0 4px 15px rgba(14, 165, 233, .3);
      display: flex;
      align-items: center;
      gap: 8px;
      transition: all .2s
    }

    .btn-cf:hover {
      background: var(--skd);
      transform: translateY(-2px);
      box-shadow: 0 6px 20px rgba(14, 165, 233, .4)
    }

    .btn-cf:active {
      transform: translateY(0)
    }

    .btn-ed {
      padding: 10px 24px;
      background: #fff;
      color: var(--s6);
      border: 2px solid var(--s3);
      border-radius: 30px;
      font-family: inherit;
      font-weight: 700;
      font-size: 14px;
      cursor: pointer;
      transition: all .2s
    }

    .btn-ed:hover {
      background: var(--s1);
      border-color: var(--s5);
      color: var(--s7)
    }

    .locked-section {
      pointer-events: none;
      filter: contrast(.9);
      user-select: none
    }

    .locked-section .db,
    .locked-section .abtn,
    .locked-section .rb,
    .locked-section input,
    .locked-section select {
      opacity: .5;
      cursor: not-allowed
    }

    .sc {
      background: rgba(255, 255, 255, .85);
      border-radius: var(--r);
      padding: 20px;
      margin-bottom: 16px;
      box-shadow: 0 2px 18px rgba(14, 165, 233, .06);
      border: 1px solid rgba(255, 255, 255, .8)
    }

    .sc h3 {
      font-size: 16px;
      font-weight: 700;
      color: var(--skd);
      margin-bottom: 14px;
      padding-bottom: 8px;
      border-bottom: 2.5px solid var(--skl);
      display: flex;
      align-items: center;
      gap: 6px;
      flex-wrap: wrap
    }

    .sn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 24px;
      height: 24px;
      border-radius: 50%;
      background: var(--sky);
      color: #fff;
      font-size: 12px;
      font-weight: 700;
      flex-shrink: 0
    }

    .fr {
      display: grid;
      gap: 12px;
      margin-bottom: 12px
    }

    .fr.c2 {
      grid-template-columns: 1fr 1fr
    }

    .fr.c3 {
      grid-template-columns: 1fr 1fr 1fr
    }

    .ff label {
      display: block;
      font-size: 12px;
      font-weight: 700;
      color: var(--s6);
      margin-bottom: 4px
    }

    .ff input[type=text],
    .ff input[type=number],
    .ff select {
      width: 100%;
      padding: 9px 12px;
      border: 1.5px solid var(--s3);
      border-radius: var(--rs);
      font-family: inherit;
      font-size: 15px;
      color: var(--s8);
      background: #fff;
      outline: none
    }

    .ff input:focus,
    .ff select:focus {
      border-color: var(--sky)
    }

    .ff.bg input {
      font-size: 20px;
      font-weight: 700;
      padding: 10px 14px
    }

    .db {
      padding: 5px 14px;
      border: 1.5px solid var(--aml);
      border-radius: 20px;
      background: var(--amll);
      font-family: inherit;
      font-size: 14px;
      font-weight: 700;
      color: var(--amd);
      cursor: pointer;
      display: inline-flex;
      align-items: center;
      gap: 4px;
      white-space: nowrap
    }

    .db:hover {
      background: var(--aml);
      border-color: var(--am)
    }

    .db.sm {
      font-size: 12px;
      padding: 3px 10px
    }

    .abtn {
      padding: 4px 14px;
      border: 1.5px dashed var(--sky);
      border-radius: 20px;
      background: transparent;
      font-family: inherit;
      font-size: 13px;
      font-weight: 600;
      color: var(--sky);
      cursor: pointer
    }

    .abtn:hover {
      background: var(--skll);
      border-style: solid
    }

    .rb {
      width: 30px;
      height: 30px;
      border: none;
      border-radius: 50%;
      background: var(--s2);
      color: var(--s5);
      font-size: 15px;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0
    }

    .rb:hover {
      background: var(--ro);
      color: #fff
    }

    .rn {
      font-size: 13px;
      color: var(--s6);
      margin-bottom: 8px;
      line-height: 1.6
    }

    .rn.s {
      font-size: 12px
    }

    .rn strong {
      color: var(--skd)
    }

    .dres {
      display: inline-flex;
      padding: 3px 10px;
      background: var(--amll);
      border: 1.5px solid var(--am);
      border-radius: 16px;
      font-size: 13px;
      font-weight: 700;
      color: var(--amd);
      animation: pp .3s ease
    }

    @keyframes pp {
      0% {
        transform: scale(.7)
      }

      100% {
        transform: scale(1)
      }
    }

    .dt {
      display: inline-block;
      font-size: 12px;
      padding: 2px 8px;
      border-radius: 12px;
      margin: 2px 3px 2px 0;
      font-weight: 600
    }

    .dt.ab {
      background: var(--vil);
      color: var(--vi)
    }

    .dt.ti {
      background: var(--amll);
      color: var(--amd)
    }

    .dt.gj {
      background: var(--gnl);
      color: var(--gn)
    }

    .dt.fr {
      background: var(--skl);
      color: var(--sky)
    }

    .dt.wr {
      background: var(--rol);
      color: var(--ro)
    }

    /* Accordion */
    .acc {
      margin-bottom: 8px;
      border: 1.5px solid var(--s3);
      border-radius: var(--rs);
      overflow: hidden
    }

    .acc-h {
      display: flex;
      align-items: center;
      padding: 10px 14px;
      background: var(--s1);
      cursor: pointer;
      gap: 8px;
      transition: background .15s;
      min-height: 44px
    }

    .acc-h:hover {
      background: var(--skll)
    }

    .acc-t {
      font-weight: 700;
      font-size: 14px;
      color: var(--s7);
      flex: 1;
      min-width: 0
    }

    .acc-sum {
      font-size: 12px;
      color: var(--sky);
      font-weight: 600;
      max-width: 40%;
      text-overflow: ellipsis;
      overflow: hidden;
      white-space: nowrap
    }

    .acc-ar {
      font-size: 12px;
      color: var(--s5);
      transition: transform .2s
    }

    .acc-ar.open {
      transform: rotate(180deg)
    }

    .acc-b {
      max-height: 0;
      overflow: hidden;
      transition: max-height .3s ease
    }

    .acc-b.open {
      max-height: 99999px;
      overflow: visible
    }

    .acc-inner {
      padding: 12px
    }

    /* Nested group accordion */
    .gacc {
      margin: 4px 0;
      border: 1px solid var(--s3);
      border-radius: 6px;
      overflow: hidden
    }

    .gacc-h {
      display: flex;
      align-items: center;
      padding: 6px 10px;
      background: var(--amll);
      cursor: pointer;
      gap: 6px;
      font-size: 13px;
      font-weight: 700;
      color: var(--amd);
      min-height: 36px
    }

    .gacc-h:hover {
      background: var(--aml)
    }

    .gacc-b {
      max-height: 0;
      overflow: hidden;
      transition: max-height .25s ease
    }

    .gacc-b.open {
      max-height: 99999px;
      overflow: visible
    }

    /* D6 Table */
    .d6t {
      width: 100%;
      border-collapse: collapse;
      font-size: 14px;
      margin: 4px 0
    }

    .d6t td {
      padding: 8px 10px;
      border-bottom: 1px solid var(--s3);
      vertical-align: top
    }

    .d6t tr:last-child td {
      border-bottom: none
    }

    .d6t tr:hover {
      background: var(--skll)
    }

    .d6t tr.sel {
      background: var(--skl);
      font-weight: 600
    }

    .d6t tr.sel td {
      color: var(--skd)
    }

    .d6t .did {
      width: 40px;
      text-align: center;
      font-weight: 700;
      color: var(--s5);
      font-size: 13px
    }

    .d6t .dsel {
      width: 36px;
      text-align: center
    }

    .d6t input[type=checkbox] {
      width: 18px;
      height: 18px;
      cursor: pointer;
      accent-color: var(--sky)
    }

    .d6t .dab {
      font-size: 12px;
      color: var(--vi);
      font-weight: 700;
      white-space: nowrap
    }

    /* Long text wrapping */
    .ltext {
      line-height: 1.5
    }

    /* Ability */
    .ab-grid {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 10px;
      margin: 12px 0
    }

    .ab-card {
      background: var(--s1);
      border-radius: var(--rs);
      padding: 14px 8px;
      text-align: center
    }

    .ab-card.over {
      background: var(--rol);
      border: 2px solid var(--ro)
    }

    .ab-card.ulk {
      border: 2px dashed var(--vi)
    }

    .ab-nm {
      font-weight: 700;
      font-size: 14px;
      color: var(--skd);
      margin-bottom: 4px
    }

    .ab-v {
      font-size: 30px;
      font-weight: 900;
      color: var(--sky);
      min-width: 40px
    }

    .ab-card.over .ab-v {
      color: var(--ro)
    }

    .ab-ctrl {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      margin: 6px 0
    }

    .ab-ctrl button {
      width: 34px;
      height: 34px;
      border-radius: 50%;
      border: 2px solid var(--s3);
      background: #fff;
      font-size: 20px;
      font-weight: 700;
      cursor: pointer;
      color: var(--s6);
      display: flex;
      align-items: center;
      justify-content: center;
      font-family: inherit
    }

    .ab-ctrl button:hover:not(:disabled) {
      border-color: var(--sky);
      color: var(--sky)
    }

    .ab-ctrl button:disabled {
      opacity: .2;
      cursor: not-allowed
    }

    .ab-lock {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 6px;
      margin-top: 6px;
      font-size: 11px;
      color: var(--s5);
      transition: all 0.2s;
      user-select: none
    }

    .ab-lock.clickable {
      cursor: pointer
    }

    .ab-lock.clickable:hover {
      opacity: 0.7;
      transform: scale(1.05)
    }

    .ab-lock label {
      line-height: 1
    }

    .ab-ovb {
      margin-top: 4px;
      padding: 2px 8px;
      border: 1.5px solid var(--vil);
      border-radius: 14px;
      background: var(--vil);
      font-family: inherit;
      font-size: 11px;
      font-weight: 600;
      color: var(--vi);
      cursor: pointer
    }

    .ab-ovb:hover {
      background: var(--vi);
      color: #fff
    }

    .ab-pips {
      display: flex;
      gap: 2px;
      justify-content: center;
      margin-top: 4px;
      flex-wrap: wrap;
      max-width: 120px;
      margin-left: auto;
      margin-right: auto
    }

    .ab-pip {
      width: 14px;
      height: 5px;
      border-radius: 3px;
      background: var(--s3)
    }

    .ab-pip.on {
      background: var(--sky)
    }

    .ab-pip.ex {
      background: var(--vi)
    }

    .warn {
      font-size: 13px;
      color: var(--ro);
      background: var(--rol);
      padding: 8px 12px;
      border-radius: var(--rs);
      margin: 10px 0
    }

    .gk-btns {
      display: flex;
      gap: 10px;
      margin: 10px 0 14px
    }

    .gk-btn {
      padding: 10px 16px;
      border: 2.5px solid var(--s3);
      border-radius: var(--rs);
      background: #fff;
      font-family: inherit;
      font-size: 15px;
      font-weight: 600;
      color: var(--s6);
      cursor: pointer;
      flex: 1
    }

    .gk-btn:hover {
      border-color: var(--sky);
      color: var(--sky)
    }

    .gk-btn.on {
      border-color: var(--gn);
      background: var(--gnl);
      color: #047857
    }

    .dv-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 10px
    }

    .dv-card {
      background: var(--s1);
      border-radius: var(--rs);
      padding: 12px;
      text-align: center
    }

    .dv-card.fan {
      background: linear-gradient(135deg, #faf5ff, #f3e8ff)
    }

    .dv-card.vit {
      background: linear-gradient(135deg, #f0fdf4, #dcfce7)
    }

    .dv-card.mon {
      background: linear-gradient(135deg, var(--amll), var(--aml))
    }

    .dv-lb {
      font-size: 12px;
      font-weight: 700;
      color: var(--s5)
    }

    .dv-v {
      font-size: 26px;
      font-weight: 900;
      color: var(--s7)
    }

    .dv-su {
      font-size: 11px;
      color: var(--s5);
      margin-top: 3px
    }

    .ag-badge {
      font-size: 12px;
      padding: 4px 12px;
      background: var(--skll);
      border: 1px solid var(--skl);
      border-radius: 16px;
      color: var(--skd);
      font-weight: 600;
      display: inline-block;
      margin: 3px
    }

    .nick-cands {
      display: flex;
      flex-wrap: wrap;
      gap: 6px;
      margin-top: 8px
    }

    .nick-cand {
      padding: 6px 14px;
      border: 1.5px solid var(--s3);
      border-radius: 20px;
      background: #fff;
      font-family: inherit;
      font-size: 14px;
      cursor: pointer;
      font-weight: 500
    }

    .nick-cand:hover {
      border-color: var(--sky);
      background: var(--skll)
    }

    /* Char Sheet */
    .cs {
      border: 3px solid var(--sky);
      border-radius: var(--r);
      background: #fff;
      overflow: hidden
    }

    .cs-hdr {
      background: linear-gradient(135deg, var(--skd), var(--sky));
      padding: 18px 22px;
      color: #fff;
      display: flex;
      gap: 16px;
      align-items: flex-start
    }

    .cs-portrait {
      width: 100px;
      height: 130px;
      background: rgba(255, 255, 255, .15);
      border-radius: var(--rs);
      display: flex;
      align-items: center;
      justify-content: center;
      color: rgba(255, 255, 255, .6);
      font-size: 12px;
      cursor: pointer;
      overflow: hidden;
      flex-shrink: 0;
      border: 2px solid rgba(255, 255, 255, .3);
      text-align: center;
      line-height: 1.3
    }

    .cs-portrait img {
      width: 100%;
      height: 100%;
      object-fit: cover
    }

    .cs-portrait:hover {
      opacity: .85
    }

    .cs-info {
      flex: 1
    }

    .cs-name {
      font-size: 24px;
      font-weight: 900
    }

    .cs-nick {
      font-size: 14px;
      opacity: .85;
      margin-top: 2px
    }

    .cs-meta {
      font-size: 13px;
      opacity: .8;
      margin-top: 4px
    }

    .cs-sts {
      display: flex;
      gap: 6px;
      margin-top: 8px;
      flex-wrap: wrap
    }

    .cs-st {
      font-size: 12px;
      padding: 2px 10px;
      background: rgba(255, 255, 255, .2);
      border-radius: 14px;
      font-weight: 600
    }

    .cs-tags {
      display: flex;
      gap: 4px;
      margin-top: 6px;
      flex-wrap: wrap
    }

    .cs-tag {
      font-size: 11px;
      padding: 1px 8px;
      background: rgba(255, 255, 255, .15);
      border-radius: 12px
    }

    .cs-body {
      padding: 16px 20px
    }

    .cs-sec {
      font-size: 15px;
      font-weight: 700;
      color: var(--skd);
      margin: 16px 0 8px;
      padding: 6px 0;
      border-bottom: 2px solid var(--skl)
    }

    .cs-sec:first-child {
      margin-top: 0
    }

    .cs-row {
      display: flex;
      border-bottom: 1px solid var(--s3);
      padding: 7px 0;
      font-size: 14px;
      align-items: flex-start;
      gap: 8px
    }

    .cs-row:last-child {
      border-bottom: none
    }

    .cs-lb {
      width: 110px;
      font-weight: 700;
      color: var(--s6);
      flex-shrink: 0;
      font-size: 13px
    }

    .cs-vl {
      flex: 1;
      color: var(--s8);
      line-height: 1.5
    }

    .cs-vl.empty {
      color: var(--ro);
      font-style: italic;
      font-size: 13px
    }

    .cs-vl input,
    .cs-vl textarea {
      border: none;
      border-bottom: 1px dashed var(--s4);
      font-family: inherit;
      font-size: 14px;
      color: var(--s8);
      width: 100%;
      padding: 2px 0;
      outline: none;
      background: transparent;
      line-height: 1.5
    }

    .cs-vl textarea {
      resize: vertical;
      min-height: 60px
    }

    .cs-dice {
      display: inline-flex;
      font-size: 11px;
      padding: 1px 6px;
      background: var(--amll);
      border-radius: 10px;
      color: var(--amd);
      font-weight: 600;
      margin-left: 6px
    }

    .cs-desc {
      font-size: 12px;
      color: var(--s5);
      margin-top: 2px;
      line-height: 1.4
    }

    .cs-edit {
      background: transparent;
      border: none;
      border-bottom: 1px dashed rgba(255, 255, 255, .4);
      color: #fff;
      font-family: inherit;
      width: 100%;
      outline: none
    }

    /* Editors */
    .gj-card,
    .fr-card {
      padding: 12px;
      background: var(--s1);
      border-radius: var(--rs);
      margin-bottom: 8px
    }

    .gj-top,
    .fr-top {
      display: flex;
      gap: 8px;
      margin-bottom: 6px;
      align-items: center;
      flex-wrap: wrap
    }

    .gj-top input,
    .gj-top select,
    .fr-top input,
    .fr-top select {
      flex: 1;
      min-width: 120px;
      padding: 8px 10px;
      border: 1.5px solid var(--s3);
      border-radius: var(--rs);
      font-family: inherit;
      font-size: 14px;
      font-weight: 600;
      outline: none
    }

    .gj-eff {
      width: 100%;
      padding: 8px 10px;
      border: 1.5px solid var(--s3);
      border-radius: var(--rs);
      font-family: inherit;
      font-size: 13px;
      resize: vertical;
      outline: none;
      min-height: 48px
    }

    .fr-stats {
      display: flex;
      gap: 8px;
      margin-bottom: 8px
    }

    .fs {
      display: flex;
      flex-direction: column;
      align-items: center;
      flex: 1
    }

    .fs label {
      font-size: 11px;
      font-weight: 700;
      color: var(--s5)
    }

    .fs input {
      width: 100%;
      padding: 4px;
      text-align: center;
      border: 1.5px solid var(--s3);
      border-radius: 6px;
      font-family: inherit;
      font-size: 15px;
      font-weight: 700;
      outline: none
    }

    .emo-row {
      display: flex;
      gap: 6px;
      margin-bottom: 6px;
      align-items: center;
      flex-wrap: wrap
    }

    .emo-row input {
      width: 130px;
      padding: 8px;
      border: 1.5px solid var(--s3);
      border-radius: var(--rs);
      font-family: inherit;
      font-size: 14px;
      outline: none
    }

    .emo-row select {
      flex: 1;
      min-width: 140px;
      padding: 8px;
      border: 1.5px solid var(--s3);
      border-radius: var(--rs);
      font-family: inherit;
      font-size: 14px;
      outline: none
    }

    .trk {
      margin-bottom: 16px
    }

    .trk-hdr {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 6px;
      flex-wrap: wrap;
      gap: 6px
    }

    .trk-lbl {
      font-weight: 700;
      font-size: 15px
    }

    .trk-info {
      font-size: 13px;
      color: var(--s5);
      display: flex;
      align-items: center;
      gap: 4px
    }

    .trk-info input {
      width: 50px;
      padding: 4px;
      border: 1.5px solid var(--s3);
      border-radius: 6px;
      font-family: inherit;
      font-size: 14px;
      text-align: center;
      outline: none
    }

    .trk-pips {
      display: flex;
      flex-wrap: wrap;
      gap: 4px
    }

    .tp {
      width: 38px;
      height: 30px;
      border: 1.5px solid var(--s3);
      border-radius: 8px;
      background: #fff;
      font-size: 12px;
      font-weight: 700;
      color: var(--s5);
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      font-family: inherit
    }

    .tp.on {
      color: #fff
    }

    .tp.ov {
      opacity: .15
    }

    .dc-cfg {
      display: flex;
      align-items: flex-end;
      gap: 10px;
      margin-bottom: 12px;
      flex-wrap: wrap
    }

    .dc-fld {
      display: flex;
      flex-direction: column;
      gap: 3px
    }

    .dc-fld label {
      font-size: 11px;
      font-weight: 700;
      color: var(--s5)
    }

    .dc-fld input,
    .dc-fld select {
      width: 70px;
      padding: 8px;
      border: 1.5px solid var(--s3);
      border-radius: var(--rs);
      font-family: inherit;
      font-size: 15px;
      text-align: center;
      outline: none
    }

    .dc-d {
      font-size: 22px;
      font-weight: 900;
      color: var(--s4);
      padding-bottom: 5px
    }

    .dc-roll {
      padding: 9px 24px;
      border: none;
      border-radius: var(--rs);
      background: linear-gradient(135deg, var(--am), var(--amd));
      color: #fff;
      font-family: inherit;
      font-size: 16px;
      font-weight: 700;
      cursor: pointer
    }

    .dc-log {
      display: flex;
      flex-direction: column;
      gap: 4px;
      max-height: 300px;
      overflow-y: auto
    }

    .dc-row {
      display: flex;
      align-items: center;
      gap: 10px;
      padding: 8px 12px;
      background: var(--s1);
      border-radius: 8px;
      font-size: 14px;
      animation: pp .25s ease
    }

    .dc-lbl {
      font-weight: 700;
      color: var(--s6);
      min-width: 50px
    }

    .dc-each {
      color: var(--s5);
      flex: 1;
      font-size: 15px
    }

    .dc-tot {
      font-weight: 900;
      color: var(--amd);
      font-size: 18px
    }

    /* Worry candidate panel */
    .wc-panel {
      margin: 8px 0;
      padding: 10px;
      background: var(--s1);
      border-radius: var(--rs);
      border-left: 3px solid var(--ro)
    }

    .wc-panel .wc-title {
      font-size: 13px;
      font-weight: 700;
      color: var(--ro);
      margin-bottom: 6px
    }

    .wc-item {
      padding: 6px 12px;
      border: 1.5px solid var(--s3);
      border-radius: var(--rs);
      background: #fff;
      margin: 4px 0;
      cursor: pointer;
      font-size: 13px;
      transition: all .15s
    }

    .wc-item:hover {
      border-color: var(--sky);
      background: var(--skll)
    }

    @media(max-width:640px) {

      .fr.c2,
      .fr.c3 {
        grid-template-columns: 1fr
      }

      .ab-grid {
        grid-template-columns: repeat(2, 1fr)
      }

      .dv-grid {
        grid-template-columns: 1fr 1fr
      }

      .cs-hdr {
        flex-direction: column;
        align-items: center;
        text-align: center
      }
    }

    /* 感情選択カスタムドロップダウンのリスト */
    .emo-sel-list {
      position: absolute;
      top: calc(100% + 4px);
      left: 0;
      width: 100%;
      background: #fff;
      border: 1.5px solid var(--s3);
      border-radius: var(--rs);
      box-shadow: 0 4px 16px rgba(15, 23, 42, 0.15);
      z-index: 2000;
      max-height: 200px;
      overflow-y: auto;
    }

    .emo-sel-opt {
      padding: 8px 12px;
      cursor: pointer;
      font-size: 14px;
      color: var(--s8);
      border-bottom: 1px solid var(--s2);
      line-height: 1.3;
      transition: background 0.1s;
    }

    .emo-sel-opt:last-child {
      border-bottom: none;
    }

    .emo-sel-opt:hover {
      background: var(--skll);
      color: var(--skd);
    }


    input::placeholder {
      color: var(--s5) !important;
      opacity: 1 !important;
    }