/*全デザイン共通　基本スタイル*/
* {
  box-sizing: border-box;
}

body {
  max-width: 900px;
  margin: 0 auto;
  padding: 40px 30px; 

  font-family:
    "Hiragino Kaku Gothic ProN",
    "Yu Gothic",
    sans-serif;

  transition:
    background-color 0.3s,
    color 0.3s;
}

.theme-selector {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 20px;
}

.theme-selector button[aria-pressed="true"] {
  outline: 3px solid currentColor;
  outline-offset: 2px;
}

.account-area {
  margin: 24px 0;
  padding: 16px;
  border: 1px solid #d8dde3;
  border-radius: 12px;
  background-color: rgba(255, 255, 255, 0.7);
}

.account-area h3,
.account-area h4 {
  margin-top: 0;
}

#myFavorites {
  padding-left: 24px;
  line-height: 1.8;
}

/*simpleテーマ*/
body.theme-simple {
  background-color: #f4f6f8;
  color: #252a30;
}

h1 {
  margin: 0 0 30px;
  font-size: 28px;
  font-weight: 700;
}

h2 {
  margin: 30px 0 15px;

  font-size: 19px;
  font-weight: 600;
}

/* =========================
入力欄
========================= */

input,
textarea,
select {
  padding: 10px 12px;
  margin: 5px 4px 5px 0;

  border: 1px solid #d8dde3;
  border-radius: 8px;

  background-color: #ffffff;

  font-family: inherit;
  font-size: 14px;

  transition: 0.2s;
}


/* 入力中 */

input:focus,
textarea:focus,
select:focus {
  outline: none;

  border-color: #75808b;

  box-shadow:
    0 0 0 3px rgba(117, 128, 139, 0.12);
}


/* placeholder */

input::placeholder,
textarea::placeholder {
  color: #a3a9af;
}


/* =========================
ボタン
========================= */

button {
  padding: 10px 18px;

  border: none;
  border-radius: 8px;

  background-color: #414243;
  color: #ffffff;

  font-family: inherit;
  font-size: 14px;

  cursor: pointer;

  transition:
    transform 0.15s,
    opacity 0.15s,
    background-color 0.2s;
}


button:hover {
  opacity: 0.85;
}


button:active {
  transform: scale(0.97);
}


/* =========================
ラベル
========================= */

label {
  display: block;

  margin-top: 12px;
  margin-bottom: 4px;

  font-size: 14px;
  font-weight: 600;
}


/* =========================
JSON表示
========================= */

pre {
  padding: 20px;

  overflow-x: auto;

  background-color: #ffffff;

  border: 1px solid #e2e5e9;
  border-radius: 12px;

  font-size: 13px;
  line-height: 1.6;
}

/* =========================
削除
========================= */

.delete-area {
  margin-top: 20px;
}


/* =========================
メッセージ
========================= */

.loading,
.empty-message,
.error-message {
  padding: 20px;

  text-align: center;
}


.error-message {
  color: #c73b3b;
}

/* =========================
  Popテーマ
========================= */

body.theme-pop {
  background-color: #fff8dc;
  color: #333333;
}

/* 見出し */

.theme-pop h1 {
  color: #ff6b6b;
}

.theme-pop h2 {
  color: #ff7a59;
}

/* 入力欄 */

.theme-pop input,
.theme-pop textarea,
.theme-pop select {
  background-color: #ffffff;

  border: 2px solid #ffb347;
  border-radius: 12px;
}

.theme-pop input:focus,
.theme-pop textarea:focus,
.theme-pop select:focus {
  outline: none;

  border-color: #ff6b6b;

  box-shadow:
    0 0 0 3px rgba(255, 107, 107, 0.15);
}

/* ボタン */

.theme-pop button {
  background-color: #ff6b6b;
  color: #ffffff;

  border: none;
  border-radius: 20px;

  font-weight: bold;
}

.theme-pop button:hover {
  background-color: #ff5252;
}

/* カード */

.theme-pop .task-item {
  background-color: #ffffff;

  border: 2px solid #ffd166;
  border-radius: 16px;

  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.08);
}

/* JSON表示 */

.theme-pop pre {
  background-color: #ffffff;

  border: 2px solid #ffd166;
  border-radius: 16px;
}

/* =========================
  Coolテーマ
========================= */

body.theme-cool {
  background-color: #161b22;
  color: #e6edf3;
}

/* 見出し */

.theme-cool h1 {
  color: #ffffff;
}

.theme-cool h2 {
  color: #79c0ff;
}

/* 入力欄 */

.theme-cool input,
.theme-cool textarea,
.theme-cool select {
  background-color: #21262d;
  color: #ffffff;

  border: 1px solid #30363d;
  border-radius: 6px;
}

.theme-cool input:focus,
.theme-cool textarea:focus,
.theme-cool select:focus {
  outline: none;

  border-color: #58a6ff;

  box-shadow:
    0 0 0 3px rgba(88, 166, 255, 0.15);
}

/* placeholder */

.theme-cool input::placeholder,
.theme-cool textarea::placeholder {
  color: #8b949e;
}

/* ボタン */

.theme-cool button {
  background-color: #282386;
  color: #ffffff;

  border: 1px solid #282386;
  border-radius: 6px;
}

.theme-cool button:hover {
  background-color: #282386;
}

/* カード */

.theme-cool .task-item {
  background-color: #21262d;

  border: 1px solid #30363d;
  border-radius: 8px;

  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.25);
}

/* JSON表示 */

.theme-cool pre {
  background-color: #0d1117;
  color: #c9d1d9;

  border: 1px solid #30363d;
  border-radius: 8px;
}

/* 補足文字 */

.theme-cool .task-time,
.theme-cool .task-note,
.theme-cool .task-date {
  color: #8b949e;
}

/* =========================
   Cuteテーマ
========================= */

body.theme-cute {
  background-color: #fff5f8;
  color: #57464c;
}

/* 見出し */

.theme-cute h1 {
  color: #d96c8a;
}

.theme-cute h2 {
  color: #c85c7a;
}

/* 入力欄 */

.theme-cute input,
.theme-cute textarea,
.theme-cute select {
  background-color: #ffffff;

  border: 1px solid #f1c6d2;
  border-radius: 12px;
}

.theme-cute input:focus,
.theme-cute textarea:focus,
.theme-cute select:focus {
  outline: none;

  border-color: #e99ab0;

  box-shadow:
    0 0 0 3px rgba(233, 154, 176, 0.15);
}

/* ボタン */

.theme-cute button {
  background-color: #e99ab0;
  color: #ffffff;

  border: none;
  border-radius: 18px;
}

.theme-cute button:hover {
  background-color: #df819d;
}

/* カード */

.theme-cute .task-item {
  background-color: #ffffff;

  border: 1px solid #f5d7df;
  border-radius: 18px;

  box-shadow:
    0 4px 14px rgba(211, 127, 151, 0.10);
}

/* JSON表示 */

.theme-cute pre {
  background-color: #ffffff;

  border: 1px solid #f5d7df;
  border-radius: 18px;
}

/* 補足文字 */

.theme-cute .task-time,
.theme-cute .task-note,
.theme-cute .task-date {
  color: #a77c88;
}