/* ===== 元HTMLのCSSブロック 1: <style> ===== */
* {
      box-sizing: border-box;
    }

    body {
      margin: 0;
      padding: 16px;
      font-family: sans-serif;
      text-align: center;
      background: #f4f4f4;
      color: #222222;
    }

    h1 {
      font-size: 24px;
    }

    h2 {
      margin-top: 0;
      font-size: clamp(10px,3vw,15px);
    }


    button {
      min-height: 48px;
      margin: 10px;
      padding: 14px 24px;
      border: none;
      border-radius: 8px;
      font-size: 18px;
      font-weight: bold;
      cursor: pointer;
      background: #dddddd;
      color: #222222;
    }

    button:disabled {
      cursor: not-allowed;
      opacity: 0.5;
    }

    select,
    input {
      box-sizing: border-box;
      width: 100%;
      min-height: 48px;
      padding: 10px;
      border: 1px solid #bbbbbb;
      border-radius: 8px;
      font-size: 18px;
      background: white;
    }

    label {
      display: block;
      margin-bottom: 6px;
      font-size: 14px;
      font-weight: bold;
      text-align: left;
    }

    #status {
      font-size: 18px;
      font-weight: bold;
    }

    #taskMessage {
      min-height: 24px;
      margin-bottom: 0;
      font-size: 16px;
      font-weight: bold;
    }

    .section {
      margin: 20px auto;
      max-width: 700px;
      padding: 15px;
      background: white;
      border-radius: 12px;
      box-shadow:
        0 2px 8px rgba(0, 0, 0, 0.08);
    }

    .section-details {
      margin: 20px auto;
      max-width: 700px;
      background: white;
      border-radius: 12px;
      box-shadow:
        0 2px 8px rgba(0, 0, 0, 0.08);
      overflow: hidden;
      text-align: left;
    }

    .section-details > summary {
      display: flex;
      align-items: center;
      gap: 10px;
      min-height: 58px;
      padding: 14px 16px;
      cursor: pointer;
      list-style: none;
      user-select: none;
    }

    .section-details > summary::-webkit-details-marker {
      display: none;
    }

    .section-details > summary::before {
      content: "▶";
      flex: 0 0 auto;
      font-size: 14px;
      transition: transform 0.15s ease;
    }

    .section-details[open] > summary::before {
      transform: rotate(90deg);
    }

    .section-details > summary h2 {
      margin: 0;
      font-size: clamp(10px,3vw,15px);
    }

    .section-details-body {
      padding: 0 15px 15px;
      border-top: 1px solid #eeeeee;
      text-align: center;
    }

    .form-group {
      margin-bottom: 15px;
      text-align: left;
    }

    .form-row {
      display: flex;
      gap: 12px;
    }

    .form-row .form-group {
      flex: 1;
    }

    .checkbox-row {
      display: flex;
      align-items: center;
      gap: 10px;
      margin: 4px 0 15px;
      padding: 12px 14px;
      border: 1px solid #d7d7d7;
      border-radius: 10px;
      background: #f8f9fb;
      text-align: left;
    }

    .checkbox-row input[type="checkbox"] {
      width: 24px;
      min-height: 24px;
      height: 24px;
      margin: 0;
      flex: 0 0 24px;
      accent-color: #1565c0;
    }

    .checkbox-row label {
      margin: 0;
      font-size: 17px;
      cursor: pointer;
    }

    .field-help {
      margin: -7px 0 14px;
      font-size: 14px;
      color: #555555;
      text-align: left;
    }

    /* 問題数設定：ラベルと入力欄を横並び */
    .question-setting-list {
      display: grid;
      gap: 10px;
      margin-bottom: 15px;
    }

    .question-setting-row {
      display: grid;
      grid-template-columns: 110px minmax(0, 1fr);
      align-items: center;
      gap: 12px;
    }

    .question-setting-row label {
      margin: 0;
      white-space: nowrap;
    }

    .question-setting-row select {
      min-width: 0;
    }

    /* 科目は必要最小限、テキスト名は残り幅を使用 */
    .subject-text-row {
      display: grid;
      grid-template-columns: 150px minmax(0, 1fr);
      gap: 12px;
    }

    .subject-text-row .form-group {
      min-width: 0;
      margin-bottom: 15px;
    }

    .subject-text-row select {
      min-width: 0;
    }

    /* 全問題数と目標正答数を1行にまとめる */
    .question-setting-inline {
      display: grid;
      grid-template-columns: auto 84px auto 84px;
      align-items: center;
      justify-content: start;
      gap: 8px;
      margin-bottom: 15px;
    }

    .question-setting-inline label {
      margin: 0;
      white-space: nowrap;
    }

    .question-setting-inline select {
      width: 84px;
      min-width: 84px;
      padding-left: 8px;
      padding-right: 24px;
    }

    /* 日付欄は内容が収まる幅に固定 */
    .date-compact-field {
      width: 170px;
      max-width: 170px;
    }

    .date-compact-field input {
      width: 170px;
      max-width: 170px;
    }

    @media (max-width: 600px) {
      .subject-text-row {
        grid-template-columns: 128px minmax(0, 1fr);
        gap: 8px;
      }

      .question-setting-inline {
        grid-template-columns: auto 84px auto 84px;
        gap: 6px;
      }

      .question-setting-inline label {
        font-size: 13px;
      }

      .question-setting-inline select {
        width: 84px;
        min-width: 84px;
        min-height: 44px;
        padding: 7px 20px 7px 6px;
        font-size: 16px;
      }

      .date-compact-field,
      .date-compact-field input {
        width: 160px !important;
        max-width: 160px !important;
      }

      .question-setting-row {
        grid-template-columns: 96px minmax(0, 1fr);
        gap: 8px;
      }
    }

    .actual-result-row {
      display: grid;
      grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) auto;
      align-items: center;
      gap: 8px;
      margin: 14px 0;
    }

    .actual-result-row span {
      font-weight: bold;
      white-space: nowrap;
    }

    .time-select-row {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 10px;
    }

    .time-select-unit {
      display: flex;
      align-items: center;
      min-width: 0;
      gap: 6px;
    }

    .time-select-unit select {
      flex: 1 1 auto;
      min-width: 0;
    }

    .time-select-unit span {
      flex: 0 0 auto;
      font-weight: bold;
    }

    .primary-button {
      background: #1565c0;
      color: white;
    }

    .start-task-button {
      background: #2e7d32;
      color: white;
    }

    .complete-task-button {
      background: #ef6c00;
      color: white;
    }

    .delete-task-button {
      background: #c62828;
      color: white;
    }

    .message-success {
      color: #2e7d32;
    }

    .message-error {
      color: #c62828;
    }

    .task-card {
      margin: 12px 0;
      padding: 15px;
      border: 1px solid #cccccc;
      border-radius: 10px;
      background: #fafafa;
      text-align: left;
    }

    .task-card h3 {
      margin: 5px 0 10px;
      font-size: clamp(10px,3vw,15px);
    }

    .task-card p {
      margin: 7px 0;
      line-height: 1.5;
    }

    .task-details {
      margin: 8px 0;
      border: 1px solid #cccccc;
      border-radius: 10px;
      background: #fafafa;
      overflow: hidden;
      text-align: left;
    }

    .task-details summary {
      display: flex;
      align-items: center;
      gap: 8px;
      min-height: 52px;
      padding: 10px 12px;
      cursor: pointer;
      list-style: none;
      user-select: none;
    }

    .task-details summary::-webkit-details-marker {
      display: none;
    }

    .task-details summary::before {
      content: "▶";
      flex: 0 0 auto;
      font-size: 13px;
      transition: transform 0.15s ease;
    }

    .task-details[open] summary::before {
      transform: rotate(90deg);
    }

    .task-summary-status {
      flex: 0 0 auto;
    }

    .task-summary-content {
      display: flex;
      flex: 1;
      min-width: 0;
      flex-direction: row;
      align-items: center;
      gap: 7px;
      overflow: hidden;
    }

    .subject-badge {
      display: inline-flex;
      align-items: center;
      max-width: 100%;
      padding: 2px 8px;
      border-radius: 999px;
      background: #e8eef7;
      color: #2f4f73;
      font-size: 11px;
      font-weight: 700;
      line-height: 1.4;
      white-space: nowrap;
    }

    .subject-badge.subject-math {
      background: #e3f0ff;
      color: #155aa8;
    }

    .subject-badge.subject-japanese {
      background: #fff0e3;
      color: #a94d16;
    }

    .subject-badge.subject-science {
      background: #e5f6e9;
      color: #26733a;
    }

    .subject-badge.subject-social {
      background: #f1e8ff;
      color: #6740a5;
    }

    .task-summary-name {
      flex: 1;
      min-width: 0;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      font-size: 14px;
      font-weight: 700;
      line-height: 1.35;
    }

    .task-summary-date {
      flex: 0 0 auto;
      color: #666666;
      font-size: 13px;
      white-space: nowrap;
    }

    .task-detail-body {
      padding: 0 15px 15px;
      border-top: 1px solid #dddddd;
    }

    .task-details.task-registered {
      border-left: 6px solid #1565c0;
    }

    .task-details.task-running {
      border: 3px solid #ef6c00;
      background: #fff8e1;
    }

    .task-details.task-completed {
      border-left: 6px solid #2e7d32;
    }

    .task-registered {
      border-left: 6px solid #1565c0;
    }

    .task-running {
      border: 3px solid #ef6c00;
      background: #fff8e1;
    }

    .task-completed {
      border-left: 6px solid #2e7d32;
    }

    .task-status {
      display: inline-block;
      padding: 4px 10px;
      border-radius: 20px;
      font-size: 14px;
      font-weight: bold;
    }

    .status-registered {
      background: #e3f2fd;
      color: #0d47a1;
    }

    .status-running {
      background: #fff3e0;
      color: #e65100;
    }

    .status-completed {
      background: #e8f5e9;
      color: #1b5e20;
    }

    .timer-display {
      margin: 14px 0;
      font-size: 36px;
      font-weight: bold;
      color: #e65100;
      text-align: center;
    }

    .task-actions {
      margin-top: 12px;
      text-align: center;
    }

    .workflow-choice-actions {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 10px;
      margin-top: 12px;
    }

    .workflow-choice-actions button {
      width: 100%;
      min-width: 0;
      margin: 0;
      padding-left: 10px;
      padding-right: 10px;
    }

    .workflow-timer-display {
      margin: 14px 0;
      font-size: 36px;
      font-weight: bold;
      color: #e65100;
      text-align: center;
    }

    /* 画面全体の読み込み表示 */
    .page-loading-overlay[hidden] {
      display: none !important;
    }

    .page-loading-overlay {
      position: fixed;
      inset: 0;
      z-index: 20000;
      display: flex;
      align-items: center;
      justify-content: center;
      background: rgba(244, 244, 244, 0.92);
      backdrop-filter: blur(2px);
    }

    .page-loading-box {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 14px;
      padding: 24px 28px;
      border-radius: 16px;
      background: white;
      box-shadow: 0 8px 30px rgba(0, 0, 0, 0.16);
      color: #333333;
      font-size: 15px;
      font-weight: bold;
    }

    .page-loading-spinner {
      width: 46px;
      height: 46px;
      border: 5px solid #d7e6f7;
      border-top-color: #1565c0;
      border-radius: 50%;
      animation: page-loading-spin 0.75s linear infinite;
    }

    @keyframes page-loading-spin {
      to {
        transform: rotate(360deg);
      }
    }

    .button-loading {
      position: relative;
      pointer-events: none;
      opacity: 0.75;
    }

    .button-loading::before {
      content: "";
      display: inline-block;
      width: 16px;
      height: 16px;
      margin-right: 8px;
      border: 2px solid currentColor;
      border-right-color: transparent;
      border-radius: 50%;
      vertical-align: -3px;
      animation: button-spin 0.7s linear infinite;
    }

    @keyframes button-spin {
      to {
        transform: rotate(360deg);
      }
    }

    .button-loading {
      min-width: 150px;
      font-weight: bold;
      box-shadow: 0 0 0 4px rgba(21, 101, 192, 0.16);
      transform: scale(1.03);
    }

    .button-loading::before {
      width: 22px;
      height: 22px;
      border-width: 3px;
      margin-right: 10px;
      vertical-align: -6px;
    }

    .first-task-registered-message {
      margin: 0 0 14px;
      padding: 14px 16px;
      border: 2px solid #81c784;
      border-radius: 12px;
      background: #e8f5e9;
      color: #1b5e20;
      font-size: 18px;
      font-weight: 800;
      text-align: center;
      box-shadow: 0 3px 10px rgba(46, 125, 50, 0.14);
    }

    .history-controls {
      display: flex;
      justify-content: center;
      gap: 10px;
      margin: 10px 0 14px;
    }

    .history-controls button {
      min-height: 42px;
      margin: 0;
      padding: 9px 14px;
      font-size: 14px;
    }

    .history-controls button:disabled {
      opacity: 0.42;
    }

    .bulk-delete-row {
      margin: 0 0 14px;
      text-align: right;
    }

    .bulk-delete-row button {
      width: auto;
      min-height: 40px;
      margin: 0;
      padding: 8px 14px;
      background: #c62828;
      color: white;
      font-size: 14px;
    }

    @media (max-width: 600px) {
      .bulk-delete-row button {
        width: 100%;
      }
    }

    .history-action-label {
      min-height: 20px;
      margin: -4px 0 10px;
      font-size: 13px;
      color: #555555;
    }

    #changeHistoryList p {
      margin: 4px 0;
      font-size: 11px;
      line-height: 1.4;
      white-space: normal;
      overflow-wrap: anywhere;
      word-break: break-word;
      text-align: left;
    }

    @media (max-width: 480px) {
      #changeHistoryList p {
        font-size: 10px;
        letter-spacing: -0.02em;
      }
    }

    .empty-message {
      padding: 20px 10px;
      color: #666666;
    }

    .result-grid {
      display: flex;
      gap: 10px;
      margin: 12px 0;
    }

    .result-box {
      flex: 1;
      padding: 10px;
      border: 1px solid #dddddd;
      border-radius: 8px;
      background: white;
      text-align: center;
    }

    .result-box strong {
      display: block;
      margin-top: 5px;
      font-size: 19px;
    }

    .result-success {
      color: #2e7d32;
    }

    .result-failure {
      color: #c62828;
    }

    .small-note {
      color: #666666;
      font-size: 14px;
    }



    .schedule-list {
      margin-top: 12px;
    }

    .schedule-item {
      position: relative;
    }

    .schedule-item.dragging {
      opacity: 0.35;
    }

    .schedule-item.drag-over {
      border-top: 4px solid #1565c0;
    }

    .task-drag-handle {
      flex: 0 0 auto;
      color: #777777;
      font-size: 20px;
      line-height: 1;
      cursor: grab;
      touch-action: none;
    }

    .task-drag-handle:active {
      cursor: grabbing;
    }

    .milestone-row {
      display: flex;
      align-items: center;
      gap: 10px;
      min-height: 46px;
      margin: 6px 0;
      padding: 8px 10px;
      border: 2px dashed #7e57c2;
      border-radius: 8px;
      background: #f3e5f5;
      color: #4527a0;
      text-align: left;
    }

    .milestone-time {
      flex: 0 0 auto;
      padding: 4px 8px;
      border-radius: 999px;
      background: #7e57c2;
      color: white;
      font-size: 15px;
      font-weight: bold;
    }

    .milestone-label {
      flex: 1;
      font-weight: bold;
    }

    .milestone-delete {
      width: auto;
      min-height: 34px;
      margin: 0;
      padding: 5px 10px;
      background: transparent;
      color: #6a1b9a;
      font-size: 14px;
    }

    .milestone-insert-row {
      height: 18px;
      margin: 0;
      text-align: center;
    }

    .milestone-insert-button {
      width: 32px;
      min-height: 24px;
      margin: -3px 0 0;
      padding: 0;
      border: 1px solid #cccccc;
      border-radius: 999px;
      background: white;
      color: #666666;
      font-size: 18px;
      line-height: 22px;
      opacity: 0.65;
    }

    .milestone-insert-button:hover {
      opacity: 1;
      border-color: #7e57c2;
      color: #7e57c2;
    }

    .schedule-help {
      margin: 8px 0 4px;
      color: #666666;
      font-size: 13px;
      text-align: left;
    }



    .milestone-picker-overlay[hidden] {
      display: none !important;
    }

    .milestone-picker-overlay {
      position: fixed;
      inset: 0;
      z-index: 9999;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 20px;
      background: rgba(0, 0, 0, 0.35);
    }

    .milestone-picker-dialog {
      width: min(360px, 100%);
      padding: 20px;
      border-radius: 12px;
      background: white;
      box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25);
      text-align: left;
    }

    .milestone-picker-dialog h3 {
      margin: 0 0 14px;
      text-align: center;
    }

    .milestone-picker-dialog select {
      width: 100%;
      min-height: 46px;
      margin-bottom: 16px;
      padding: 8px 10px;
      font-size: 18px;
    }

    .milestone-picker-actions {
      display: flex;
      gap: 10px;
    }

    .milestone-picker-actions button {
      flex: 1;
      margin: 0;
    }


    .schedule-item {
      position: relative;
      transition:
        transform 0.12s ease,
        opacity 0.12s ease;
    }

    .schedule-item.dragging {
      opacity: 0.35;
    }

    .schedule-item.drop-before::before,
    .schedule-item.drop-after::after {
      content: "ここに移動";
      position: absolute;
      left: 0;
      right: 0;
      z-index: 20;
      height: 4px;
      border-radius: 999px;
      background: #1565c0;
      color: #1565c0;
      font-size: 11px;
      font-weight: bold;
      line-height: 1;
      text-align: center;
      box-shadow:
        0 0 0 2px rgba(21, 101, 192, 0.12);
    }

    .schedule-item.drop-before::before {
      top: -5px;
    }

    .schedule-item.drop-after::after {
      bottom: -5px;
    }

    .schedule-item.drop-before::before,
    .schedule-item.drop-after::after {
      text-indent: 0;
    }

    .schedule-item.drop-before,
    .schedule-item.drop-after {
      z-index: 10;
    }

    .task-summary-actions,
    .milestone-actions {
      display: flex;
      align-items: center;
      gap: 4px;
      flex: 0 0 auto;
    }

    .move-item-button {
      width: 34px;
      min-height: 32px;
      margin: 0;
      padding: 3px 7px;
      border: 1px solid #cccccc;
      border-radius: 7px;
      background: white;
      color: #444444;
      font-size: 16px;
      line-height: 1;
    }

    .move-item-button:disabled {
      opacity: 0.3;
      cursor: default;
    }

    .move-item-button:not(:disabled):hover {
      border-color: #1565c0;
      color: #1565c0;
    }

    .task-summary-main {
      display: flex;
      align-items: center;
      gap: 8px;
      flex: 1;
      min-width: 0;
    }


    .top-progress-panel {
      max-width: 700px;
      margin: 16px auto 20px;
      padding: 16px;
      border-radius: 14px;
      background: white;
      box-shadow:
        0 2px 10px rgba(0, 0, 0, 0.1);
    }

    .top-progress-date {
      margin-bottom: 10px;
      color: #555555;
      font-size: 14px;
      font-weight: bold;
      text-align: left;
    }

    .top-progress-overview {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 10px;
      margin-bottom: 10px;
    }

    .top-progress-primary {
      padding: 14px 10px;
      border-radius: 12px;
      background: #eef6ff;
      text-align: center;
    }

    .top-progress-primary.is-navigation-card {
      cursor: pointer;
      user-select: none;
      transition:
        transform 0.12s ease,
        box-shadow 0.12s ease,
        background 0.12s ease;
    }

    .top-progress-primary.is-navigation-card:hover {
      background: #e3f2fd;
      box-shadow: 0 3px 10px rgba(21, 101, 192, 0.16);
      transform: translateY(-1px);
    }

    .top-progress-primary.is-navigation-card:focus-visible {
      outline: 3px solid rgba(21, 101, 192, 0.38);
      outline-offset: 3px;
    }

    .top-progress-primary.is-navigation-card:active {
      transform: translateY(0);
    }

    .top-progress-primary-value {
      display: block;
      margin-top: 4px;
      font-size: 28px;
      font-weight: 800;
    }

    .top-progress-cards {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 10px;
    }

    .top-progress-heading {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-top: 15px;
      color: #555555;
      font-size: 14px;
      font-weight: bold;
    }

    .top-progress-heading strong {
      color: #1b5e20;
      font-size: 18px;
    }

    .top-progress-card {
      padding: 12px 8px;
      border: 1px solid #dddddd;
      border-radius: 10px;
      background: #fafafa;
      text-align: center;
    }

    .top-progress-card-label {
      color: #666666;
      font-size: 13px;
    }

    .top-progress-card-value {
      display: block;
      margin-top: 4px;
      font-size: 24px;
      font-weight: bold;
    }

    .planning-total-time-card[hidden] {
      display: none !important;
    }

    .planning-total-time-card {
      border-color: #c5cae9;
      background: #f5f6ff;
    }

    .planning-total-time-card .top-progress-card-value {
      color: #3949ab;
    }

    .top-progress-track {
      height: 14px;
      margin-top: 6px;
      overflow: hidden;
      border-radius: 999px;
      background: #e0e0e0;
    }

    .top-progress-bar {
      height: 100%;
      width: 0;
      border-radius: 999px;
      background: #2e7d32;
      transition: width 0.25s ease;
    }

    .top-progress-message {
      margin-top: 14px;
      padding: 14px 16px;
      border: 2px solid #bbdefb;
      border-radius: 12px;
      background: #e3f2fd;
      color: #0d47a1;
      font-size: 20px;
      font-weight: 800;
      line-height: 1.45;
      text-align: center;
      box-shadow: 0 3px 10px rgba(13, 71, 161, 0.12);
    }

    .top-progress-message.is-milestone {
      border-color: #ffb74d;
      background: #fff3e0;
      color: #e65100;
      transform: scale(1.01);
    }

    .top-progress-message.is-near-goal {
      border-color: #81c784;
      background: #e8f5e9;
      color: #1b5e20;
    }

    .top-progress-message.is-complete {
      border-color: #66bb6a;
      background: #c8e6c9;
      color: #1b5e20;
      font-size: 23px;
    }

    @media (max-width: 480px) {
      .top-progress-panel {
        margin: 12px 10px 16px;
        padding: 12px;
      }

      .top-progress-overview {
        gap: 6px;
      }

      .top-progress-primary {
        padding: 11px 6px;
      }

      .top-progress-primary-value {
        font-size: 23px;
      }

      .top-progress-cards {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 6px;
      }

      .top-progress-time-cards .top-progress-card-label {
        font-size: 11px;
      }

      .top-progress-card {
        padding: 10px 4px;
      }

      .top-progress-card-value {
        font-size: clamp(10px,3vw,15px);
      }
    }


    /* ドラゴン育成（子どもごとにON/OFF） */
    .date-dragon-row {
      display: grid;
      grid-template-columns: minmax(0, 170px) 1fr auto;
      align-items: end;
      gap: 12px;
      margin-bottom: 15px;
    }

    .date-dragon-row .form-group {
      margin-bottom: 0;
    }

    .dragon-mini-card[hidden] { display: none !important; }
    .dragon-mini-card {
      display: inline-flex;
      grid-column: 3;
      align-items: center;
      justify-content: center;
      gap: 7px;
      width: auto;
      min-width: 82px;
      height: 48px;
      margin: 0;
      padding: 6px 10px;
      border: 1px solid #d9c7ff;
      border-radius: 10px;
      background: linear-gradient(135deg, #f7f0ff, #fff8e8);
      color: #4a3360;
      cursor: pointer;
      box-shadow: 0 2px 6px rgba(106, 27, 154, 0.10);
    }

    .dragon-mini-card:hover {
      border-color: #9c6ade;
      box-shadow: 0 3px 9px rgba(106, 27, 154, 0.18);
    }

    .dragon-mini-card:focus-visible {
      outline: 3px solid rgba(126, 87, 194, 0.28);
      outline-offset: 2px;
    }

    .dragon-mini-icon { font-size: 28px; line-height: 1; }
    .dragon-mini-info { display: block; text-align: left; }
    .dragon-mini-level { display: block; font-size: 13px; font-weight: 800; line-height: 1.2; white-space: nowrap; }
    .dragon-mini-exp { display: block; margin-top: 2px; color: #6a1b9a; font-size: 10px; white-space: nowrap; }

    .dragon-detail-overlay[hidden] { display: none !important; }
    .dragon-detail-overlay {
      position: fixed;
      inset: 0;
      z-index: 21500;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 20px;
      background: rgba(0,0,0,.45);
    }

    .dragon-detail-dialog {
      width: min(390px, 100%);
      padding: 24px 20px 20px;
      border-radius: 18px;
      background: white;
      box-shadow: 0 14px 40px rgba(0,0,0,.28);
      text-align: center;
    }

    .dragon-detail-icon { font-size: 78px; line-height: 1; }
    .dragon-detail-name { margin: 12px 0 2px; font-size: 23px; }
    .dragon-detail-level { color: #6a1b9a; font-size: 16px; font-weight: 800; }
    .dragon-detail-message { margin: 12px 0; color: #555; line-height: 1.55; }
    .dragon-detail-exp-track { height: 12px; overflow: hidden; border-radius: 999px; background: rgba(106,27,154,.14); }
    .dragon-detail-exp-bar { width: 0; height: 100%; border-radius: inherit; background: #7e57c2; transition: width .25s ease; }
    .dragon-detail-exp-label { margin: 7px 0 16px; color: #6a1b9a; font-size: 13px; font-weight: 700; }
    .dragon-detail-actions { display: grid; gap: 10px; }
    .dragon-detail-actions button { width: 100%; margin: 0; }
    .dragon-item-box-button { background: #6a1b9a; color: white; }
    .dragon-detail-close { width: 100%; margin: 0; }

    .item-box-overlay[hidden] { display: none !important; }
    .item-box-overlay {
      position: fixed;
      inset: 0;
      z-index: 21600;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 20px;
      background: rgba(0,0,0,.48);
    }
    .item-box-dialog {
      width: min(420px, 100%);
      max-height: min(680px, calc(100vh - 40px));
      overflow-y: auto;
      padding: 22px 18px 18px;
      border-radius: 18px;
      background: white;
      box-shadow: 0 14px 40px rgba(0,0,0,.30);
      text-align: center;
    }
    .item-box-dialog h2 { margin: 0 0 6px; font-size: 23px; }
    .item-box-description { margin: 0 0 16px; color: #666; font-size: 14px; line-height: 1.5; }
    .item-box-grid {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 10px;
      margin-bottom: 16px;
    }
    .item-box-card {
      position: relative;
      min-width: 0;
      padding: 12px 7px 10px;
      border: 1px solid #ded3ef;
      border-radius: 12px;
      background: linear-gradient(145deg, #fbf8ff, #fffaf0);
      text-align: center;
    }
    .item-box-card.is-locked { filter: grayscale(.8); opacity: .62; }
    .item-box-icon { display: block; font-size: 34px; line-height: 1.15; }
    .item-box-name { display: block; margin-top: 6px; overflow: hidden; font-size: 12px; font-weight: 800; text-overflow: ellipsis; white-space: nowrap; }
    .item-box-count { display: block; margin-top: 3px; color: #6a1b9a; font-size: 12px; font-weight: 700; }
    .item-box-lock { position: absolute; top: 5px; right: 6px; font-size: 14px; }
    .item-box-empty { grid-column: 1 / -1; padding: 24px 10px; color: #666; line-height: 1.6; }
    .item-box-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
    .item-box-actions button { width: 100%; margin: 0; padding-left: 8px; padding-right: 8px; }
    .item-box-back-button { background: #ede7f6; color: #4a3360; }
    .item-box-summary { margin: -7px 0 14px; color: #6a1b9a; font-size: 13px; font-weight: 800; }
    .item-box-image { display:block; width:52px; height:52px; margin:0 auto; object-fit:contain; }
    .item-box-image-fallback { display:flex; width:52px; height:52px; margin:0 auto; align-items:center; justify-content:center; font-size:34px; }
    .item-box-rarity { display:block; margin-top:4px; color:#d18b00; font-size:11px; letter-spacing:1px; }
    .dragon-item-drop-overlay[hidden] { display:none !important; }
    .dragon-item-drop-overlay { position:fixed; inset:0; z-index:21900; display:flex; align-items:center; justify-content:center; padding:20px; background:rgba(0,0,0,.55); }
    .dragon-item-drop-dialog { width:min(390px,100%); padding:24px 20px 20px; border-radius:18px; background:white; box-shadow:0 14px 42px rgba(0,0,0,.3); text-align:center; }
    .dragon-item-drop-dialog h2 { margin:0 0 14px; font-size:24px; }
    .dragon-item-drop-image { display:block; width:112px; height:112px; margin:0 auto 10px; object-fit:contain; }
    .dragon-item-drop-name { margin:4px 0; font-size:20px; font-weight:900; }
    .dragon-item-drop-rarity { color:#d18b00; font-weight:900; letter-spacing:2px; }
    .dragon-item-drop-new { display:inline-block; margin-top:8px; padding:4px 10px; border-radius:999px; background:#e53935; color:white; font-size:13px; font-weight:900; }
    .dragon-item-drop-dialog button { width:100%; margin:16px 0 0; }

    @media (max-width: 380px) {
      .item-box-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
      .item-box-actions { grid-template-columns: 1fr; }
    }

    @media (max-width: 480px) {
      .date-dragon-row {
        grid-template-columns: minmax(0, 160px) 1fr auto;
        gap: 8px;
      }
      .date-dragon-row .date-compact-field {
        min-width: 0;
        width: 100%;
        max-width: 160px;
      }
      .date-dragon-row .date-compact-field input {
        width: 100% !important;
        max-width: 160px !important;
      }
      .dragon-mini-card {
        min-width: 72px;
        height: 44px;
        padding: 5px 8px;
      }
      .dragon-mini-icon { font-size: 25px; }
      .dragon-mini-level { font-size: 12px; }
      .dragon-mini-exp { font-size: 9px; }
    }

    .dragon-prompt-overlay[hidden] { display: none !important; }
    .dragon-prompt-overlay {
      position: fixed; inset: 0; z-index: 21000; display: flex; align-items: center; justify-content: center;
      padding: 20px; background: rgba(0,0,0,.42);
    }
    .dragon-prompt-dialog {
      width: min(380px, 100%); padding: 24px 20px 20px; border-radius: 18px;
      background: white; box-shadow: 0 14px 40px rgba(0,0,0,.28); text-align: center;
    }
    .dragon-prompt-icon { font-size: 70px; line-height: 1; }
    .dragon-prompt-dialog h2 { margin: 12px 0 8px; font-size: 22px; }
    .dragon-prompt-dialog p { margin: 0 0 18px; color: #555; line-height: 1.6; }
    .dragon-prompt-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
    .dragon-prompt-actions button { width: 100%; margin: 0; padding-left: 8px; padding-right: 8px; }

    .top-alert-panel {
      display: none;
      max-width: 700px;
      margin: -8px auto 20px;
      padding: 14px 16px;
      border: 2px solid #c62828;
      border-radius: 12px;
      background: #ffebee;
      color: #8e0000;
      box-shadow:
        0 2px 10px rgba(198, 40, 40, 0.15);
    }

    .top-alert-panel.is-visible {
      display: block;
    }

    .top-alert-title {
      margin-bottom: 8px;
      font-weight: bold;
      font-size: 16px;
    }

    .top-alert-list {
      margin: 0;
      padding-left: 20px;
    }

    .top-alert-list li + li {
      margin-top: 6px;
    }

    @media (max-width: 480px) {
      .top-alert-panel {
        margin: -6px 10px 16px;
        padding: 12px;
      }
    }

    @media (max-width: 600px) {
      .task-drag-handle {
        display: none;
      }

      .move-item-button {
        width: 38px;
        min-height: 36px;
        font-size: 18px;
      }
    }

    @media (max-width: 600px) {
      body {
        padding: 8px;
      }

      .time-select-row {
        gap: 6px;
      }

      .time-select-unit {
        gap: 3px;
      }

      .time-select-unit select {
        min-height: 46px;
        padding: 8px 24px 8px 8px;
        font-size: 17px;
      }

      .time-select-unit span {
        font-size: 15px;
      }

      .section {
        padding: 13px;
      }

      .form-row,
      .result-grid {
        display: block;
      }

      .form-row.subject-text-row {
        display: grid;
      }

      .form-row .form-group {
        width: 100%;
      }

      .result-box {
        margin-bottom: 8px;
      }

      button {
        width: 100%;
        margin: 6px 0;
      }
    }
  
    #fixedQuestionFields.is-disabled {
      opacity: 0.48;
    }

    #fixedQuestionFields.is-disabled select {
      cursor: not-allowed;
      background-color: #e5e7eb;
      color: #6b7280;
      border-color: #cbd5e1;
    }

    .recent-reference-panel {
      margin: 4px 0 16px;
      padding: 14px;
      border: 1px solid #bbdefb;
      border-radius: 10px;
      background: #f5f9ff;
      text-align: left;
    }

    .recent-reference-title {
      margin-bottom: 10px;
      color: #0d47a1;
      font-size: 16px;
      font-weight: bold;
    }

    .recent-reference-grid {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 10px;
    }

    .recent-reference-item {
      padding: 10px;
      border: 1px solid #d7e6f7;
      border-radius: 8px;
      background: white;
    }

    .recent-reference-label {
      display: block;
      margin-bottom: 5px;
      color: #666666;
      font-size: 13px;
    }

    .recent-reference-value {
      font-size: 17px;
      font-weight: bold;
      line-height: 1.45;
    }

    .recent-reference-note {
      margin: 10px 0 0;
      color: #666666;
      font-size: 13px;
    }

    @media (max-width: 480px) {
      .recent-reference-grid {
        grid-template-columns: 1fr;
      }
    }


    /* 下部固定アイコンタブ */
    body {
      padding-bottom: 92px;
    }

    .app-page[hidden] {
      display: none !important;
    }

    .top-date-selector {
      max-width: 700px;
      margin: 12px auto 0;
      padding: 0 4px;
      text-align: left;
    }

    .top-date-selector label {
      margin-bottom: 5px;
      color: #555555;
      font-size: 14px;
    }

    .top-date-selector input {
      background: white;
    }

    .half-width-field {
      width: calc(50% - 6px);
      max-width: 344px;
    }

    .top-date-selector.half-width-field {
      margin-left: max(calc((100% - 700px) / 2), 0px);
      padding: 0;
    }

    @media (max-width: 600px) {
      .half-width-field {
        width: 100%;
        max-width: 320px;
      }

      .top-date-selector.half-width-field {
        margin: 8px auto 0;
        padding: 0;
      }

      .task-details summary {
        align-items: center;
        flex-wrap: nowrap;
        gap: 6px;
        padding: 9px 8px;
      }

      .task-summary-status {
        font-size: 11px;
        padding-left: 7px;
        padding-right: 7px;
      }

      .subject-badge {
        padding: 2px 6px;
        font-size: 10px;
      }

      .task-summary-content {
        flex: 1;
        min-width: 0;
        gap: 5px;
      }

      .task-summary-name {
        font-size: 12px;
      }

      .task-summary-date {
        margin-left: 0;
        font-size: 11px;
      }
    }

    /* Compact one-line task summary */
    .task-details summary {
      gap: 6px;
    }

    .task-summary-status {
      display: inline-flex;
      align-items: center;
      gap: 4px;
      white-space: nowrap;
    }

    .task-summary-status::before {
      content: "";
      width: 7px;
      height: 7px;
      border-radius: 50%;
      background: currentColor;
      flex: 0 0 auto;
    }

    .task-summary-content {
      flex: 1;
      min-width: 0;
      flex-wrap: nowrap;
      overflow: hidden;
    }

    .task-summary-name {
      flex: 1;
      min-width: 0;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    .task-summary-actions {
      margin-left: auto;
    }

    @media (max-width: 600px) {
      .task-details summary {
        gap: 4px;
        padding: 8px 6px;
      }

      .task-details summary::before {
        font-size: 10px;
      }

      .task-summary-status {
        padding: 3px 6px;
        font-size: 10px;
      }

      .task-summary-status::before {
        width: 6px;
        height: 6px;
      }

      .subject-badge {
        padding: 2px 5px;
        font-size: 9px;
      }

      .task-summary-name {
        font-size: 12px;
        font-weight: 600;
      }

      .task-summary-actions {
        gap: 2px;
      }

      .move-item-button {
        width: 27px;
        min-height: 28px;
        padding: 2px 4px;
        font-size: 14px;
      }
    }

    .page-section {
      margin: 20px auto;
      max-width: 700px;
      padding: 15px;
      border-radius: 12px;
      background: white;
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
      text-align: center;
    }

    .bottom-tab-bar {
      position: fixed;
      left: 0;
      right: 0;
      bottom: 0;
      z-index: 3000;
      display: grid;
      grid-template-columns: repeat(5, minmax(0, 1fr));
      padding: 7px max(8px, env(safe-area-inset-right)) calc(7px + env(safe-area-inset-bottom)) max(8px, env(safe-area-inset-left));
      border-top: 1px solid #d7d7d7;
      background: rgba(255, 255, 255, 0.97);
      box-shadow: 0 -2px 12px rgba(0, 0, 0, 0.12);
      backdrop-filter: blur(10px);
    }

    .bottom-tab-button {
      width: auto;
      min-height: 58px;
      margin: 0;
      padding: 6px 4px;
      border-radius: 10px;
      background: transparent;
      color: #666666;
      font-size: 25px;
      line-height: 1;
    }

    .bottom-tab-button.is-active {
      background: #e3f2fd;
      color: #1565c0;
    }



    /* 子どもプロフィール未登録時の初期設定誘導 */
    .child-profile-setup-guide {
      display: none;
      margin: 0 0 14px;
      padding: 16px;
      border: 2px solid #1565c0;
      border-radius: 14px;
      background: #e3f2fd;
      color: #0d47a1;
      text-align: left;
      box-shadow: 0 4px 14px rgba(21, 101, 192, 0.18);
    }

    .child-profile-setup-guide strong {
      display: block;
      margin-bottom: 5px;
      font-size: 19px;
    }

    .child-profile-setup-guide span {
      display: block;
      font-size: 14px;
      line-height: 1.55;
    }

    body.no-child-profile .child-profile-setup-guide {
      display: block;
    }

    body.no-child-profile #openChildSettingsButton {
      border: 3px solid #1565c0;
      background: #1565c0;
      color: white;
      box-shadow: 0 6px 18px rgba(21, 101, 192, 0.30);
      transform: scale(1.015);
      animation: child-setup-pulse 1.25s ease-in-out infinite;
    }

    body.no-child-profile #openChildSettingsButton .settings-menu-description,
    body.no-child-profile #openChildSettingsButton .settings-menu-arrow {
      color: white;
    }

    body.no-child-profile .settings-menu-button.child-setup-locked {
      opacity: 0.42;
      cursor: not-allowed;
      filter: grayscale(0.5);
    }

    body.no-child-profile .bottom-tab-button[data-page="settingsPage"] {
      background: #1565c0;
      color: white;
      box-shadow: 0 0 0 3px rgba(21, 101, 192, 0.25);
      animation: child-setup-pulse 1.25s ease-in-out infinite;
    }

    body.no-child-profile .bottom-tab-button.child-setup-locked {
      opacity: 0.28;
      cursor: not-allowed;
    }

    @keyframes child-setup-pulse {
      0%, 100% {
        transform: scale(1);
        box-shadow: 0 4px 14px rgba(21, 101, 192, 0.18);
      }
      40% {
        transform: scale(1.09);
        box-shadow:
          0 0 0 7px rgba(21, 101, 192, 0.20),
          0 10px 28px rgba(21, 101, 192, 0.38);
      }
      65% {
        transform: scale(0.98);
        box-shadow: 0 3px 10px rgba(21, 101, 192, 0.16);
      }
    }

    .task-initial-setup-guide {
      display: none;
      margin: 0 0 16px;
      padding: 16px;
      border: 3px solid #1565c0;
      border-radius: 14px;
      background: #e3f2fd;
      color: #0d47a1;
      text-align: left;
      box-shadow: 0 6px 18px rgba(21, 101, 192, 0.24);
    }

    .task-initial-setup-guide strong {
      display: block;
      margin-bottom: 5px;
      font-size: 19px;
    }

    .task-initial-setup-guide span {
      display: block;
      font-size: 14px;
      line-height: 1.55;
    }

    body.initial-setup-task .task-initial-setup-guide {
      display: block;
      animation: child-setup-pulse 1.25s ease-in-out infinite;
    }

    /* 初回セットアップを上から順番に案内する */
    body.initial-setup-required .child-profile-setup-guide {
      display: block;
    }

    body.initial-setup-required .initial-setup-target {
      border: 3px solid #1565c0 !important;
      background: #1565c0 !important;
      color: white !important;
      box-shadow: 0 6px 18px rgba(21, 101, 192, 0.30);
      transform: scale(1.015);
      animation: child-setup-pulse 1.25s ease-in-out infinite;
    }

    body.initial-setup-required .initial-setup-target .settings-menu-description,
    body.initial-setup-required .initial-setup-target .settings-menu-arrow {
      color: white !important;
    }

    body.initial-setup-required .initial-setup-locked {
      opacity: 0.28;
      cursor: not-allowed;
      filter: grayscale(0.5);
    }

    .device-setup-detail-guide {
      display: none;
      margin: 0 0 14px;
      padding: 16px;
      border: 2px solid #1565c0;
      border-radius: 14px;
      background: #e3f2fd;
      color: #0d47a1;
      text-align: left;
      box-shadow: 0 4px 14px rgba(21, 101, 192, 0.18);
    }

    .device-setup-detail-guide strong {
      display: block;
      margin-bottom: 5px;
      font-size: 19px;
    }

    .device-setup-detail-guide span {
      display: block;
      font-size: 14px;
      line-height: 1.55;
    }

    body.initial-setup-device .device-setup-detail-guide {
      display: block;
    }

    body.initial-setup-device [data-child-device-id],
    body.initial-setup-device #issueChildDeviceCodeButton {
      border: 3px solid #1565c0 !important;
      background: #1565c0 !important;
      color: white !important;
      box-shadow: 0 6px 18px rgba(21, 101, 192, 0.30);
      transform: scale(1.015);
      animation: child-setup-pulse 1.25s ease-in-out infinite;
    }

    
body.initial-setup-task #taskSubject.initial-setup-target,
body.initial-setup-task #taskTextName.initial-setup-target,
body.initial-setup-task #registerTaskButton.initial-setup-target{
  border:3px solid #1565c0!important;
  box-shadow:0 0 0 3px rgba(21,101,192,.2);
  animation:child-setup-pulse 1.25s ease-in-out infinite;
}
.bottom-tab-button .tab-label {
      display: block;
      margin-top: 4px;
      font-size: 11px;
      font-weight: bold;
    }


    .task-set-list { display:grid; gap:10px; }
    .task-set-card { padding:12px; border:1px solid #ddd; border-radius:10px; background:#fafafa; text-align:left; }
    .task-set-card-header { display:flex; align-items:center; gap:8px; }
    .task-set-card-name { flex:1; min-width:0; font-weight:700; }
    .task-set-items { margin:8px 0 0; padding-left:22px; color:#555; font-size:13px; line-height:1.55; }
    .task-set-editor-grid { display:grid; gap:10px; }
    .task-set-item-row { display:grid; grid-template-columns:minmax(0,1fr) auto auto auto; gap:5px; align-items:center; padding:8px; border:1px solid #ddd; border-radius:8px; }
    .task-set-item-main { min-width:0; text-align:left; }
    .task-set-item-title { font-weight:700; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
    .task-set-item-detail { color:#666; font-size:12px; }
    .task-set-action-row { display:flex; flex-wrap:wrap; gap:8px; margin:10px 0; }
    .task-set-action-row button { margin:0; min-height:40px; padding:8px 12px; font-size:14px; }
    .bulk-register-card { margin-top:18px; }
    .bulk-preview { margin:10px 0; padding:10px; border-radius:8px; background:#f7f7f7; text-align:left; font-size:13px; }
    .register-mode-tabs { display:grid; grid-template-columns:1fr 1fr; gap:0; margin:12px 0 18px; border:1px solid #c9c9c9; border-radius:10px; overflow:hidden; }
    .register-mode-tab { min-height:44px; margin:0; padding:10px 8px; border-radius:0; background:#f5f5f5; font-size:15px; }
    .register-mode-tab.is-active { background:#1565c0; color:#fff; }
    .register-mode-panel[hidden] { display:none; }
    .task-set-item-form { display:grid; gap:10px; margin:10px 0 16px; padding:12px; border:1px solid #d8d8d8; border-radius:10px; background:#f8f9fb; }
    .task-set-item-form-row { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
    .task-set-item-form .form-group { margin:0; }
    .task-set-item-form-actions { display:flex; gap:8px; justify-content:flex-end; }
    .task-set-item-form-actions button { margin:0; min-height:42px; padding:9px 14px; font-size:15px; }
    .skip-note { margin:0; text-align:left; font-size:12px; color:#666; }
    @media (max-width:520px) { .task-set-item-form-row { grid-template-columns:1fr; } }
    @media (max-width:480px) {
      .task-set-item-row { grid-template-columns:minmax(0,1fr) repeat(3,34px); }
      .task-set-item-row button { min-width:34px; width:34px; padding:0; margin:0; }
    }

    .settings-view[hidden] {
      display: none !important;
    }

    .settings-menu {
      display: grid;
      gap: 10px;
    }

    .settings-menu-button {
      display: flex;
      align-items: center;
      gap: 12px;
      width: 100%;
      min-height: 64px;
      margin: 0;
      padding: 12px 14px;
      border: 1px solid #dddddd;
      border-radius: 12px;
      background: white;
      color: #222222;
      text-align: left;
      box-shadow: 0 1px 4px rgba(0, 0, 0, 0.05);
    }

    .settings-menu-icon {
      flex: 0 0 auto;
      font-size: 25px;
      line-height: 1;
    }

    .settings-menu-content {
      flex: 1;
      min-width: 0;
    }

    .settings-menu-title {
      display: block;
      font-size: 17px;
      font-weight: 800;
    }

    .settings-menu-description {
      display: block;
      margin-top: 3px;
      color: #666666;
      font-size: 12px;
      font-weight: normal;
    }

    .settings-menu-arrow {
      flex: 0 0 auto;
      color: #777777;
      font-size: 22px;
    }

    .settings-detail-header {
      display: grid;
      grid-template-columns: 42px minmax(0, 1fr) 42px;
      align-items: center;
      margin-bottom: 10px;
    }

    .settings-detail-header h2 {
      margin: 0;
      font-size: 18px;
      text-align: center;
    }

    .settings-back-button {
      width: 38px;
      min-height: 38px;
      margin: 0;
      padding: 4px;
      border: 1px solid #cccccc;
      background: white;
      font-size: 20px;
      line-height: 1;
    }

    .settings-card {
      margin: 14px 0;
      padding: 14px;
      border: 1px solid #dddddd;
      border-radius: 12px;
      background: #fafafa;
      text-align: left;
    }

    .settings-card h2 {
      margin: 0 0 12px;
      font-size: 18px;
    }

    .ai-voice-setting-row {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 16px;
      padding: 14px 0;
    }

    .ai-voice-setting-content {
      flex: 1;
      min-width: 0;
    }

    .ai-voice-setting-title {
      display: block;
      font-size: 17px;
      font-weight: 800;
    }

    .ai-voice-setting-description {
      display: block;
      margin-top: 4px;
      color: #666666;
      font-size: 13px;
      line-height: 1.5;
    }

    .auto-voice-rule-list {
      display: grid;
      gap: 14px;
      margin-top: 8px;
    }

    .auto-voice-rule-item {
      display: grid;
      grid-template-columns: minmax(0, 1fr) auto;
      align-items: center;
      gap: 14px;
      padding: 14px 0;
      border-top: 1px solid #e5e5e5;
    }

    .auto-voice-rule-label {
      display: block;
      font-weight: bold;
      color: #222222;
    }

    .auto-voice-rule-description {
      display: block;
      margin-top: 4px;
      color: #666666;
      font-size: 12px;
      line-height: 1.5;
    }

    .auto-voice-rule-input-wrap {
      display: flex;
      align-items: center;
      gap: 6px;
      white-space: nowrap;
    }

    .auto-voice-rule-input {
      width: 78px;
      min-height: 40px;
      margin: 0;
      padding: 8px;
      text-align: right;
    }

    .auto-voice-rule-time {
      width: 112px;
      text-align: center;
    }

    .auto-voice-save-button {
      width: 100%;
      margin-top: 16px;
    }

    @media (max-width: 520px) {
      .auto-voice-rule-item {
        grid-template-columns: 1fr;
      }

      .auto-voice-rule-input-wrap {
        justify-content: flex-end;
      }
    }

    .toggle-switch {
      position: relative;
      flex: 0 0 auto;
      display: inline-block;
      width: 58px;
      height: 32px;
    }

    .toggle-switch input {
      position: absolute;
      width: 1px;
      height: 1px;
      margin: 0;
      opacity: 0;
      pointer-events: none;
    }

    .toggle-switch-slider {
      position: absolute;
      inset: 0;
      border-radius: 999px;
      background: #bdbdbd;
      cursor: pointer;
      transition: background 0.18s ease;
    }

    .toggle-switch-slider::before {
      content: "";
      position: absolute;
      top: 4px;
      left: 4px;
      width: 24px;
      height: 24px;
      border-radius: 50%;
      background: white;
      box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
      transition: transform 0.18s ease;
    }

    .toggle-switch input:checked + .toggle-switch-slider {
      background: #2e7d32;
    }

    .toggle-switch input:checked + .toggle-switch-slider::before {
      transform: translateX(26px);
    }

    .toggle-switch input:focus-visible + .toggle-switch-slider {
      outline: 3px solid rgba(21, 101, 192, 0.35);
      outline-offset: 3px;
    }

    .ai-voice-setting-status {
      margin: 12px 0 0;
      padding: 11px 12px;
      border-radius: 9px;
      background: #f5f5f5;
      color: #555555;
      font-size: 14px;
      font-weight: 700;
      text-align: center;
    }

    .ai-voice-setting-status.is-enabled {
      background: #e8f5e9;
      color: #1b5e20;
    }

    .settings-add-row {
      display: grid;
      grid-template-columns: minmax(0, 1fr) auto;
      gap: 8px;
      margin-bottom: 12px;
    }

    .settings-add-row button {
      width: auto;
      min-width: 90px;
      margin: 0;
      padding: 8px 14px;
      font-size: 15px;
    }

    .settings-list {
      display: grid;
      gap: 8px;
    }

    .settings-list-row {
      display: flex;
      align-items: center;
      gap: 8px;
      min-width: 0;
      padding: 9px 10px;
      border: 1px solid #e0e0e0;
      border-radius: 9px;
      background: white;
    }

    .settings-list-name {
      flex: 1;
      min-width: 0;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      font-weight: 700;
    }

    .settings-row-button {
      width: 38px;
      min-height: 36px;
      margin: 0;
      padding: 4px;
      font-size: 16px;
    }

    .child-delete-button {
      width: auto;
      min-width: 58px;
      min-height: 36px;
      margin: 0;
      padding: 6px 10px;
      border: 1px solid #ef9a9a;
      background: #ffebee;
      color: #b71c1c;
      font-size: 13px;
      font-weight: 800;
    }

    .child-delete-button:hover {
      background: #ffcdd2;
    }

    .child-device-button {
      width: auto;
      min-width: 78px;
      min-height: 36px;
      margin: 0;
      padding: 6px 10px;
      border: 1px solid #90caf9;
      background: #e3f2fd;
      color: #0d47a1;
      font-size: 13px;
      font-weight: 800;
    }

    /* 子ども管理：通常操作と削除を明確に分離 */
    #childManagementList .child-management-card {
      display: block;
      padding: 14px;
    }

    #childManagementList .child-management-header {
      display: flex;
      align-items: center;
      gap: 10px;
      margin-bottom: 12px;
    }

    #childManagementList .child-management-header .small-note {
      flex: 0 0 auto;
    }

    #childManagementList .child-management-actions {
      display: grid;
      gap: 10px;
    }

    #childManagementList .child-management-main-button {
      width: 100%;
      min-height: 52px;
      margin: 0;
      padding: 12px 16px;
      font-size: 16px;
      text-align: left;
    }

    #childManagementList .child-management-danger-zone {
      margin-top: 16px;
      padding-top: 14px;
      border-top: 1px solid #eeeeee;
      text-align: right;
    }

    #childManagementList .child-management-danger-zone .child-delete-button {
      width: auto;
      min-width: 150px;
      min-height: 44px;
      margin: 0;
      padding: 9px 14px;
      font-size: 14px;
    }

    .device-pairing-panel {
      margin-top: 12px;
      padding: 14px;
      border: 2px solid #90caf9;
      border-radius: 10px;
      background: #f5faff;
      text-align: center;
    }

    .device-pairing-code {
      display: block;
      margin: 10px 0;
      font-family: monospace;
      font-size: 38px;
      font-weight: 900;
      letter-spacing: 0.16em;
    }

    .child-device-list {
      display: grid;
      gap: 8px;
      margin-top: 10px;
    }

    .child-device-row {
      display: grid;
      grid-template-columns: minmax(0,1fr) auto;
      align-items: center;
      gap: 8px;
      padding: 9px 10px;
      border: 1px solid #ddd;
      border-radius: 9px;
      background: white;
      text-align: left;
    }

    .child-device-meta {
      color: #666;
      font-size: 12px;
      line-height: 1.45;
    }

    body.is-child-device #childSelectorBar,
    body.is-child-device #noticeAdminButton,
    body.is-child-device #openChildSettingsButton { display:none !important; }
    .child-access-hidden { display:none !important; }
    .access-control-list { display:grid; gap:10px; margin-top:12px; }
    .access-control-row { display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:center; gap:12px; padding:12px 14px; border:1px solid #ddd; border-radius:10px; background:white; text-align:left; }
    .access-control-row strong { display:block; }
    .access-control-row small { display:block; margin-top:3px; color:#666; line-height:1.4; }
    .access-control-fixed { color:#2e7d32; font-weight:800; }

    body.is-child-device .bottom-tab-bar {
      display: flex;
      flex-wrap: nowrap;
      align-items: stretch;
      gap: 2px;
    }

    body.is-child-device .bottom-tab-button {
      flex: 1 1 0;
      min-width: 0;
      margin: 0;
      padding-left: 2px;
      padding-right: 2px;
    }

    .child-delete-button:disabled {
      cursor: not-allowed;
      opacity: 0.45;
    }

    .settings-move-button {
      width: 34px;
      min-height: 36px;
      margin: 0;
      padding: 3px;
      border: 1px solid #cccccc;
      background: white;
      color: #444444;
      font-size: 15px;
    }

    .settings-move-button:disabled {
      opacity: 0.25;
    }

    .settings-subject-select {
      margin-bottom: 12px;
    }

    .settings-message {
      min-height: 22px;
      margin: 8px 0 0;
      font-size: 14px;
      font-weight: bold;
    }

    .line-link-result {
      margin-top: 14px;
      padding: 14px;
      border: 1px solid #b7dfc2;
      border-radius: 10px;
      background: #f1fbf4;
      text-align: center;
    }

    .line-link-result[hidden] {
      display: none !important;
    }

    .line-link-code {
      display: block;
      margin: 10px 0;
      font-family: monospace;
      font-size: 30px;
      font-weight: 800;
      letter-spacing: 0.12em;
      word-break: break-all;
    }

    .line-link-instruction {
      margin: 6px 0;
      line-height: 1.55;
    }

    .line-destination-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 10px;
      margin-bottom: 10px;
    }

    .line-destination-header h2 {
      margin: 0;
    }

    .line-destination-refresh {
      width: auto;
      min-height: 36px;
      margin: 0;
      padding: 6px 10px;
      border: 1px solid #cccccc;
      background: white;
      color: #444444;
      font-size: 13px;
    }

    .line-destination-list {
      display: grid;
      gap: 10px;
    }

    .line-destination-card {
      display: flex;
      align-items: center;
      gap: 12px;
      padding: 12px;
      border: 1px solid #d9e2ec;
      border-radius: 10px;
      background: white;
    }

    .line-destination-icon {
      flex: 0 0 auto;
      font-size: 24px;
    }

    .line-destination-content {
      flex: 1;
      min-width: 0;
    }

    .line-destination-name {
      display: block;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      font-size: 16px;
      font-weight: 800;
    }

    .line-destination-status {
      display: block;
      margin-top: 3px;
      color: #2e7d32;
      font-size: 12px;
      font-weight: 700;
    }

    .line-destination-unlink {
      width: auto;
      min-width: 82px;
      min-height: 38px;
      margin: 0;
      padding: 7px 10px;
      border: 1px solid #ef9a9a;
      background: #fff5f5;
      color: #c62828;
      font-size: 13px;
    }

    .line-destination-empty,
    .line-destination-loading {
      margin: 0;
      padding: 16px 10px;
      border: 1px dashed #cccccc;
      border-radius: 10px;
      color: #666666;
      text-align: center;
    }

    .line-settings-divider {
      margin: 18px 0;
      border: 0;
      border-top: 1px solid #e0e0e0;
    }


    @media (max-width: 480px) {
      .bottom-tab-button {
        font-size: 22px;
      }

      .settings-card {
        padding: 11px;
      }

      .settings-add-row {
        grid-template-columns: minmax(0, 1fr) 72px;
      }

      .settings-add-row button {
        min-width: 0;
        padding: 8px 6px;
        font-size: 14px;
      }
    }


@media (max-width: 600px) {
  .summary-time-value,
  .time-summary-value,
  .stat-value {
    font-size: 1.15rem !important;
    line-height: 1.15;
    white-space: nowrap;
  }

  .summary-time-card,
  .time-summary-card,
  .stat-card {
    min-width: 0;
  }
}


    /* 登録済みタスクの目標値編集 */
    .task-edit-trigger {
      width: 34px;
      min-height: 32px;
      margin: 0 0 0 6px;
      padding: 3px 6px;
      border: 1px solid #cccccc;
      border-radius: 7px;
      background: white;
      color: #555555;
      font-size: 16px;
      line-height: 1;
      vertical-align: middle;
    }

    .task-edit-panel {
      margin: 12px 0;
      padding: 12px;
      border: 1px solid #bbdefb;
      border-radius: 10px;
      background: #f5f9ff;
      text-align: left;
    }

    .task-edit-panel[hidden] {
      display: none !important;
    }

    .task-edit-row {
      display: grid;
      grid-template-columns: 92px minmax(0, 1fr);
      align-items: center;
      gap: 8px;
      margin-bottom: 10px;
    }

    .task-edit-row label {
      margin: 0;
      white-space: nowrap;
    }

    .task-edit-time {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 5px;
    }

    .task-edit-time-unit {
      display: flex;
      align-items: center;
      min-width: 0;
      gap: 3px;
    }

    .task-edit-time-unit select {
      min-width: 0;
      padding: 8px 22px 8px 6px;
      font-size: 16px;
    }

    .task-edit-score-select {
      width: 88px;
      min-width: 88px;
    }

    .task-edit-actions {
      display: flex;
      gap: 8px;
      justify-content: flex-end;
    }

    .task-edit-actions button {
      width: auto;
      min-height: 40px;
      margin: 0;
      padding: 8px 14px;
      font-size: 15px;
    }

    @media (max-width: 600px) {
      .task-edit-trigger {
        width: 32px;
        min-height: 30px;
        font-size: 15px;
      }

      .task-edit-row {
        grid-template-columns: 84px minmax(0, 1fr);
        gap: 6px;
      }

      .task-edit-time-row {
        grid-template-columns: 1fr;
        align-items: start;
      }

      .task-edit-time {
        grid-template-columns: repeat(3, max-content);
        justify-content: start;
        gap: 8px;
      }

      .task-edit-time-unit {
        gap: 2px;
      }

      .task-edit-time-unit select {
        width: 58px;
        min-width: 58px;
        min-height: 42px;
        padding: 8px 20px 8px 5px;
        font-size: 15px;
      }
    }


    .bulk-delete-row button {
      min-height: 32px;
      padding: 5px 10px;
      font-size: 12px;
      opacity: 0.82;
    }

    @media (max-width: 600px) {
      .bulk-delete-row button {
        width: auto;
        min-width: 88px;
      }
    }

    .primary-button:disabled {
      background: #b9d7f5;
      color: rgba(255, 255, 255, 0.92);
      opacity: 1;
      cursor: not-allowed;
      box-shadow: none;
    }

    .top-actual-time-card {
      grid-column: span 2;
    }

    .top-actual-time-breakdown {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 5px;
      margin-top: 8px;
      padding-top: 7px;
      border-top: 1px solid #dddddd;
      color: #666666;
      font-size: 11px;
    }

    .top-actual-time-breakdown span {
      min-width: 0;
      white-space: nowrap;
    }

    .top-actual-time-breakdown strong {
      display: block;
      margin-top: 2px;
      color: #222222;
      font-size: 12px;
    }

    @media (max-width: 480px) {
      .top-actual-time-card {
        grid-column: 1 / -1;
      }
    }


    /* =====================================================
       分析レポート
       ===================================================== */
    .report-toolbar {
      display: grid;
      gap: 12px;
      margin-bottom: 16px;
    }

    .report-period-tabs {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 6px;
      padding: 4px;
      background: #eef2f7;
      border-radius: 12px;
    }

    .report-period-button {
      min-height: 40px;
      margin: 0;
      padding: 8px 5px;
      border: 0;
      border-radius: 9px;
      background: transparent;
      color: #4b5563;
      font-size: 13px;
      font-weight: 700;
    }

    .report-period-button.is-active {
      background: #ffffff;
      color: #1565c0;
      box-shadow: 0 1px 5px rgba(0, 0, 0, .12);
    }

    .report-date-row {
      display: flex;
      align-items: center;
      gap: 10px;
    }

    .report-date-row input {
      flex: 1;
      margin: 0;
    }

    .report-range-label {
      margin: 2px 0 0;
      color: #667085;
      font-size: 13px;
      text-align: center;
    }

    .report-kpi-grid {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 10px;
      margin: 14px 0;
    }

    .report-kpi-card {
      min-width: 0;
      padding: 14px 12px;
      border: 1px solid #e3e8ef;
      border-radius: 14px;
      background: #fff;
    }

    .report-kpi-label {
      color: #667085;
      font-size: 12px;
      font-weight: 700;
    }

    .report-kpi-value {
      margin-top: 5px;
      color: #101828;
      font-size: 23px;
      font-weight: 800;
      line-height: 1.2;
    }

    .report-kpi-sub {
      margin-top: 4px;
      color: #667085;
      font-size: 11px;
    }

    .report-section {
      margin-top: 18px;
      padding: 15px;
      border: 1px solid #e3e8ef;
      border-radius: 14px;
      background: #fff;
    }

    .report-section h3 {
      margin: 0 0 12px;
      font-size: 16px;
    }

    .report-insight-list {
      display: grid;
      gap: 9px;
    }

    .report-insight {
      padding: 11px 12px;
      border-left: 4px solid #669df6;
      border-radius: 8px;
      background: #f5f8ff;
    }

    .report-insight.warning {
      border-left-color: #f59e0b;
      background: #fffbeb;
    }

    .report-insight.good {
      border-left-color: #22c55e;
      background: #f0fdf4;
    }

    .report-insight-title {
      font-size: 13px;
      font-weight: 800;
    }

    .report-insight-message {
      margin-top: 3px;
      color: #475467;
      font-size: 12px;
      line-height: 1.55;
    }

    .report-bar-list {
      display: grid;
      gap: 12px;
    }

    .report-bar-header {
      display: flex;
      justify-content: space-between;
      gap: 8px;
      margin-bottom: 5px;
      font-size: 12px;
    }

    .report-bar-name {
      min-width: 0;
      overflow: hidden;
      font-weight: 700;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .report-bar-track {
      height: 9px;
      overflow: hidden;
      border-radius: 99px;
      background: #edf0f4;
    }

    .report-bar-fill {
      height: 100%;
      border-radius: inherit;
      background: #4f8df7;
    }

    .report-bar-meta {
      display: flex;
      flex-wrap: wrap;
      gap: 5px 10px;
      margin-top: 5px;
      color: #667085;
      font-size: 11px;
    }

    .report-trend {
      display: flex;
      align-items: end;
      gap: 5px;
      min-height: 145px;
      padding-top: 12px;
      overflow-x: auto;
    }

    .report-trend-item {
      display: grid;
      flex: 1 0 32px;
      grid-template-rows: 110px auto;
      align-items: end;
      min-width: 32px;
      text-align: center;
    }

    .report-trend-bar {
      width: 72%;
      min-height: 3px;
      margin: 0 auto;
      border-radius: 5px 5px 0 0;
      background: #4f8df7;
    }

    .report-trend-label {
      margin-top: 5px;
      color: #667085;
      font-size: 9px;
      white-space: nowrap;
    }

    .report-task-list {
      display: grid;
      gap: 10px;
    }

    .report-task-card {
      padding: 12px;
      border: 1px solid #e3e8ef;
      border-radius: 12px;
      background: #fbfcfe;
    }

    .report-task-title {
      font-size: 14px;
      font-weight: 800;
    }

    .report-task-grid {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 7px 10px;
      margin-top: 10px;
    }

    .report-task-metric {
      font-size: 11px;
      color: #667085;
    }

    .report-task-metric strong {
      display: block;
      margin-top: 2px;
      color: #1d2939;
      font-size: 13px;
    }

    .report-status-chip {
      display: inline-block;
      margin-left: 5px;
      padding: 2px 6px;
      border-radius: 99px;
      background: #eef2f7;
      color: #475467;
      font-size: 10px;
    }

    .report-status-chip.good {
      background: #dcfce7;
      color: #166534;
    }

    .report-status-chip.warning {
      background: #fef3c7;
      color: #92400e;
    }

    .report-empty {
      padding: 24px 10px;
      color: #667085;
      text-align: center;
      font-size: 13px;
    }

    .report-loading {
      padding: 28px 10px;
      text-align: center;
      color: #667085;
    }

    @media (min-width: 700px) {
      .report-kpi-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
      }

      .report-task-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
      }
    }

  
.voice-prompt-dialog{width:min(440px,calc(100% - 32px));border:none;border-radius:16px;padding:0;box-shadow:0 12px 40px rgba(0,0,0,.3)}.voice-prompt-dialog::backdrop{background:rgba(0,0,0,.45)}.voice-prompt-content{padding:24px 20px 20px;text-align:center}.voice-prompt-icon{font-size:42px;margin-bottom:10px}#voicePromptMessage{font-size:20px;font-weight:bold;line-height:1.6;margin:0 0 20px}


    /* 親TOP：子どものリアルタイム学習ステータス */
    .child-live-status[hidden] {
      display: none !important;
    }

    .child-live-status {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      margin: 0 0 14px;
      padding: 12px 14px;
      border: 1px solid #dddddd;
      border-radius: 12px;
      background: #fafafa;
      text-align: left;
    }

    .child-live-status-main {
      display: flex;
      align-items: center;
      min-width: 0;
      gap: 9px;
    }

    .child-live-status-lamp {
      display: inline-block;
      width: 16px;
      height: 16px;
      flex: 0 0 16px;
      border: 2px solid rgba(0, 0, 0, 0.10);
      border-radius: 50%;
      background: #bdbdbd;
      box-shadow: 0 0 0 3px rgba(189, 189, 189, 0.18);
    }

    .child-live-status-label {
      font-size: 17px;
      font-weight: 800;
      white-space: nowrap;
    }

    .child-live-status-note {
      color: #666666;
      font-size: 13px;
      font-weight: 700;
      white-space: nowrap;
    }

    .child-live-status[data-status="learning"] .child-live-status-lamp {
      background: #2e7d32;
      box-shadow: 0 0 0 3px rgba(46, 125, 50, 0.18);
    }

    .child-live-status[data-status="scoring"] .child-live-status-lamp {
      background: #ef6c00;
      box-shadow: 0 0 0 3px rgba(239, 108, 0, 0.18);
    }

    .child-live-status[data-status="correcting"] .child-live-status-lamp {
      background: #7e57c2;
      box-shadow: 0 0 0 3px rgba(126, 87, 194, 0.18);
    }

    .child-live-status[data-status="other"] .child-live-status-lamp {
      background: #1976d2;
      box-shadow: 0 0 0 3px rgba(25, 118, 210, 0.18);
    }

    .child-live-status[data-status="offline"] .child-live-status-lamp {
      background: #bdbdbd;
      box-shadow: 0 0 0 3px rgba(189, 189, 189, 0.18);
    }

    @media (max-width: 480px) {
      .child-live-status {
        padding: 10px 12px;
      }

      .child-live-status-label {
        font-size: 15px;
      }

      .child-live-status-note {
        font-size: 12px;
      }
    }


    /* EXP獲得・レベルアップ */
    .dragon-image { display:block; width:100%; height:100%; object-fit:contain; }
    .dragon-mini-icon { width:32px; height:32px; display:inline-flex; align-items:center; justify-content:center; }
    .dragon-detail-icon { width:112px; height:112px; margin:0 auto; display:flex; align-items:center; justify-content:center; font-size:78px; }
    .dragon-exp-overlay[hidden], .dragon-levelup-overlay[hidden] { display:none !important; }
    .dragon-exp-overlay, .dragon-levelup-overlay {
      position:fixed; inset:0; z-index:21800; display:flex; align-items:center; justify-content:center;
      padding:20px; background:rgba(0,0,0,.50);
    }
    .dragon-exp-dialog, .dragon-levelup-dialog {
      width:min(410px,100%); max-height:calc(100vh - 40px); overflow-y:auto;
      padding:24px 20px 20px; border-radius:18px; background:#fff;
      box-shadow:0 14px 42px rgba(0,0,0,.30); text-align:center;
    }
    .dragon-exp-dialog h2, .dragon-levelup-dialog h2 { margin:0 0 14px; font-size:24px; }
    .dragon-exp-breakdown { margin:0 0 14px; padding:12px 14px; border-radius:12px; background:#faf7ff; }
    .dragon-exp-row { display:flex; justify-content:space-between; gap:12px; padding:7px 0; border-bottom:1px solid #ece5f5; text-align:left; }
    .dragon-exp-row:last-child { border-bottom:0; }
    .dragon-exp-row strong { flex:0 0 auto; color:#6a1b9a; }
    .dragon-exp-total { display:flex; justify-content:space-between; margin:12px 0; padding:12px 14px; border-radius:12px; background:#ede7f6; color:#4a148c; font-size:19px; font-weight:900; }
    .dragon-exp-current { margin:10px 0 16px; color:#555; font-weight:700; }
    .dragon-exp-dialog button, .dragon-levelup-dialog button { width:100%; margin:0; }
    .dragon-levelup-images { display:grid; grid-template-columns:1fr auto 1.25fr; align-items:center; gap:12px; margin:16px 0; }
    .dragon-levelup-old, .dragon-levelup-new { display:flex; flex-direction:column; align-items:center; gap:7px; }
    .dragon-levelup-old img { width:82px; height:82px; object-fit:contain; }
    .dragon-levelup-new img { width:126px; height:126px; object-fit:contain; }
    .dragon-levelup-arrow { font-size:30px; font-weight:900; color:#7e57c2; }
    .dragon-levelup-caption { font-size:13px; font-weight:800; color:#555; }


/* ===== 元HTMLのCSSブロック 2: <style id="time-nowrap-fix"> ===== */
/* スマホの時間表示を1行に固定 */
.time-card, .summary-time-card, .top-time-card { min-width: 0; }
.time-value, .summary-time-value, .top-time-value {
  white-space: nowrap !important;
  word-break: keep-all !important;
  overflow-wrap: normal !important;
}
@media (max-width: 600px) {
  .time-value, .summary-time-value, .top-time-value {
    font-size: clamp(11px, 3vw, 13px) !important;
    line-height: 1.15 !important;
    letter-spacing: -0.04em;
  }
}


/* ===== 元HTMLのCSSブロック 3: <style id="user-login-style"> ===== */
body.is-logged-out > main,
  body.is-logged-out > nav,
  body.is-logged-out > .milestone-picker-overlay { display:none !important; }
  #loginScreen[hidden], #userBar[hidden] { display:none !important; }
  #loginScreen { min-height:calc(100vh - 32px); display:flex; align-items:center; justify-content:center; padding:20px; }
  .login-card { width:min(420px,100%); padding:24px; border-radius:16px; background:#fff; box-shadow:0 6px 28px rgba(0,0,0,.16); text-align:left; }
  .login-card h1 { margin:0 0 8px; text-align:center; }
  .login-card .login-description { margin:0 0 20px; color:#666; font-size:14px; text-align:center; }
  .login-actions { display:grid; grid-template-columns:1fr; gap:10px; margin-top:8px; }
  .login-actions button { width:100%; margin:0; padding:11px 8px; font-size:16px; }
  #loginMessage { min-height:22px; margin:12px 0 0; color:#c62828; font-size:14px; font-weight:bold; text-align:center; }
  .registration-consent {
    display:flex;
    align-items:flex-start;
    gap:10px;
    margin:12px 0 10px;
    padding:12px;
    border:1px solid #d7d7d7;
    border-radius:10px;
    background:#f8f9fb;
  }
  .registration-consent.is-required {
    border:2px solid #c62828;
    background:#ffebee;
    animation:consent-shake .28s ease-in-out;
  }
  .registration-consent input[type="checkbox"] {
    flex:0 0 22px;
    width:22px;
    min-height:22px;
    height:22px;
    margin:1px 0 0;
    accent-color:#1565c0;
  }
  .registration-consent label {
    margin:0;
    font-size:13px;
    font-weight:normal;
    line-height:1.55;
  }
  .registration-consent a {
    color:#0d47a1;
    font-weight:bold;
  }
  .registration-divider {
    margin:18px 0 14px;
    border:0;
    border-top:1px solid #dddddd;
  }
  .registration-heading {
    margin:0 0 12px;
    font-size:16px;
    font-weight:bold;
    text-align:left;
  }
  @keyframes consent-shake {
    0%,100% { transform:translateX(0); }
    25% { transform:translateX(-5px); }
    75% { transform:translateX(5px); }
  }
  .login-step[hidden] { display:none !important; }
  .login-role-actions { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
  .login-role-actions button { width:100%; margin:0; }
  .login-back-button { width:100%; margin:10px 0 0; background:#f1f1f1; }
  .login-step-title { margin:0 0 14px; font-size:17px; text-align:center; }
  #userBar { max-width:700px; margin:8px auto 0; padding:8px 12px; display:flex; align-items:center; justify-content:flex-end; gap:8px; }
  #pushStatus { margin-right:auto; color:#555; font-size:12px; font-weight:bold; }
  #enablePushButton { width:auto; min-height:38px; margin:0; padding:7px 10px; font-size:13px; }
  #enablePushButton.is-enabled { background:#e8f5e9; color:#1b5e20; }
  @media (max-width:600px) {
    #userBar { flex-wrap:wrap; }
    #pushStatus { width:100%; order:3; text-align:right; }
    #enablePushButton, #logoutButton { width:auto; }
  }
  #currentUserLabel { color:#555; font-size:13px; font-weight:bold; }
  #logoutButton { width:auto; min-height:34px; margin:0; padding:5px 10px; border:1px solid #ccc; background:#fff; font-size:13px; }
  @media(max-width:600px){
    #userBar { padding:6px 4px; }
    .login-actions { grid-template-columns:1fr; }
  }
  #noticeAdminButton { width:auto; min-height:34px; margin:0; padding:5px 10px; background:#7e57c2; color:#fff; font-size:13px; }
  .login-notices { margin:18px 0 4px; padding-top:16px; border-top:1px solid #e5e5e5; }
  .login-notices-title { margin:0 0 10px; font-size:16px; text-align:left; }
  .login-notice-list { display:grid; gap:9px; }
  .login-notice-item { padding:10px 11px; border:1px solid #e0e0e0; border-radius:9px; background:#fafafa; text-align:left; }
  .login-notice-heading { display:flex; align-items:center; gap:7px; margin-bottom:5px; }
  .login-notice-category { padding:2px 7px; border-radius:999px; background:#e3f2fd; color:#0d47a1; font-size:11px; font-weight:bold; }
  .login-notice-title { font-size:14px; font-weight:800; }
  .login-notice-body { margin:0; color:#444; font-size:13px; line-height:1.55; white-space:pre-wrap; }
  .login-notice-date { margin-top:5px; color:#777; font-size:11px; }
  .notice-admin-overlay[hidden] { display:none !important; }
  .notice-admin-overlay { position:fixed; inset:0; z-index:10000; display:flex; align-items:center; justify-content:center; padding:16px; background:rgba(0,0,0,.45); }
  .notice-admin-dialog { width:min(720px,100%); max-height:92vh; overflow:auto; padding:18px; border-radius:14px; background:#fff; text-align:left; box-shadow:0 12px 36px rgba(0,0,0,.28); }
  .notice-admin-header { display:flex; align-items:center; justify-content:space-between; gap:10px; }
  .notice-admin-header h2 { margin:0; font-size:20px; }
  .notice-admin-close { width:38px; min-height:38px; margin:0; padding:3px; background:#eee; font-size:20px; }
  .notice-admin-list { display:grid; gap:8px; margin:14px 0; }
  .notice-admin-row { display:grid; grid-template-columns:minmax(0,1fr) auto auto; align-items:center; gap:6px; padding:9px; border:1px solid #ddd; border-radius:9px; }
  .notice-admin-row-title { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-weight:bold; }
  .notice-admin-row button { width:auto; min-height:34px; margin:0; padding:5px 9px; font-size:12px; }
  .notice-form-card { margin-top:12px; padding:14px; border:1px solid #ddd; border-radius:10px; background:#fafafa; }
  .notice-form-card textarea { box-sizing:border-box; width:100%; min-height:110px; padding:10px; border:1px solid #bbb; border-radius:8px; font:inherit; resize:vertical; }
  .notice-form-grid { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
  .notice-form-actions { display:flex; gap:8px; justify-content:flex-end; }
  .notice-form-actions button { width:auto; margin:0; }
  #noticeEditorMessage { min-height:20px; margin:8px 0 0; font-size:13px; font-weight:bold; text-align:center; }
  @media(max-width:600px){ .notice-form-grid{grid-template-columns:1fr;} .notice-admin-row{grid-template-columns:minmax(0,1fr) auto;} .notice-admin-row .notice-delete-button{grid-column:2;} }


/* ===== 元HTMLのCSSブロック 4: <style id="child-selector-style"> ===== */
#childSelectorBar[hidden] { display: none !important; }

  #childSelectorBar {
    max-width: 700px;
    margin: 8px auto 12px;
    padding: 10px 12px;
    display: grid;
    grid-template-columns: auto minmax(140px, 1fr);
    align-items: center;
    gap: 8px;
    border: 1px solid #cfe0f3;
    border-radius: 12px;
    background: #f5f9ff;
    box-shadow: 0 1px 5px rgba(21, 101, 192, 0.08);
  }

  #childSelectorLabel {
    margin: 0;
    color: #315b86;
    font-size: 13px;
    font-weight: 800;
    white-space: nowrap;
  }

  #childSelect {
    min-width: 0;
    min-height: 40px;
    padding: 7px 30px 7px 10px;
    font-size: 16px;
    font-weight: 700;
  }

  #addChildButton {
    width: auto;
    min-height: 40px;
    margin: 0;
    padding: 7px 12px;
    background: #1565c0;
    color: white;
    font-size: 14px;
    white-space: nowrap;
  }

  #childSelectorMessage {
    grid-column: 1 / -1;
    min-height: 0;
    margin: 0;
    color: #666666;
    font-size: 12px;
    text-align: left;
  }

  @media (max-width: 520px) {
    #childSelectorBar {
      margin: 6px 8px 10px;
      grid-template-columns: 1fr;
      gap: 5px;
    }

    #childSelectorLabel {
      white-space: normal;
    }

    #childSelect {
      width: 100%;
      max-width: 100%;
      font-size: 15px;
    }

    #childSelectorMessage {
      overflow-wrap: anywhere;
      word-break: break-word;
      white-space: normal;
    }

    #childManagementList .child-management-card {
      padding: 12px;
    }

    #childManagementList .child-management-header {
      align-items: flex-start;
    }

    #childManagementList .settings-list-name {
      overflow: visible;
      text-overflow: clip;
      white-space: normal;
      overflow-wrap: anywhere;
      word-break: break-word;
    }

    #childManagementList .child-management-main-button {
      min-height: 56px;
      font-size: 17px;
    }

    #childManagementList .child-management-danger-zone {
      margin-top: 20px;
      text-align: center;
    }

    #childManagementList .child-management-danger-zone .child-delete-button {
      width: 100%;
      min-height: 48px;
    }
  }