:root{--bg:#f6f3f8;--surface:#fff;--ink:#292130;--muted:#756c7e;--line:rgba(72,53,84,.14);--primary:#735084;--primary-dark:#563765;--primary-soft:#eee5f3;--danger:#a64355;--warning:#b56f17;--success:#34765b;--memo:#4f7890;--shadow:0 20px 55px rgba(65,45,76,.12);font-family:"Yu Gothic UI","Hiragino Kaku Gothic ProN",system-ui,sans-serif;color:var(--ink);background:var(--bg)}*{box-sizing:border-box}body{margin:0;min-height:100vh;background:radial-gradient(circle at 12% 0%,rgba(181,139,202,.22),transparent 34rem),radial-gradient(circle at 95% 18%,rgba(242,203,213,.3),transparent 28rem),var(--bg)}button,input,select,textarea{font:inherit}button{cursor:pointer}.site-header{width:min(1180px,calc(100% - 32px));margin:18px auto 0;padding:12px 14px 12px 18px;display:flex;align-items:center;justify-content:space-between;gap:16px;border:1px solid var(--line);border-radius:22px;background:rgba(255,255,255,.75);backdrop-filter:blur(18px);box-shadow:0 10px 35px rgba(72,53,84,.07);position:sticky;top:10px;z-index:10}.brand{display:flex;align-items:center;gap:12px;color:inherit;text-decoration:none}.brand-mark{width:42px;height:42px;display:grid;place-items:center;border-radius:14px;color:#fff;font-weight:800;background:linear-gradient(145deg,#8a68a0,#654374);box-shadow:0 9px 20px rgba(95,62,111,.25)}.brand strong,.brand small{display:block}.brand small{margin-top:2px;color:var(--muted);font-size:.72rem}.auth-area{display:flex;align-items:center;gap:9px}.user-chip{display:flex;align-items:center;gap:8px;padding:6px 10px 6px 6px;border:1px solid var(--line);border-radius:999px;background:#fff}.user-chip img{width:30px;height:30px;border-radius:50%}.shell{width:min(1180px,calc(100% - 32px));margin:18px auto 70px}.login-gate{min-height:calc(100vh - 110px);width:min(1180px,calc(100% - 32px));margin:24px auto 60px;display:grid;place-items:center}.login-panel{width:min(520px,100%);padding:48px 34px;text-align:center;border:1px solid var(--line);border-radius:34px;background:rgba(255,255,255,.84);box-shadow:var(--shadow)}.brand-mark.large{width:70px;height:70px;margin:0 auto 22px;border-radius:23px;font-size:1.65rem}.login-panel h1{margin:0;font-size:clamp(2.2rem,8vw,4rem)}.login-panel p:not(.eyebrow){margin:18px auto 25px;color:var(--muted);line-height:1.8}.login-panel small{display:block;margin-top:17px;color:var(--muted)}.eyebrow{margin:0 0 10px;color:var(--primary);font-weight:800;letter-spacing:.18em;font-size:.72rem}.hero{min-height:310px;display:grid;grid-template-columns:1.3fr .7fr;align-items:center;gap:32px;padding:38px 42px;border:1px solid var(--line);border-radius:34px;background:linear-gradient(120deg,rgba(255,255,255,.94),rgba(248,240,252,.85));box-shadow:var(--shadow)}.hero h1{margin:0;font-size:clamp(2.1rem,6vw,4.3rem);line-height:1.1;letter-spacing:-.045em}.hero-copy{color:var(--muted);line-height:1.9;margin:22px 0 0}.hero-card{padding:26px;border-radius:26px;color:#fff;background:linear-gradient(145deg,#765287,#4f365c);box-shadow:0 24px 50px rgba(77,48,90,.3)}.hero-card p,.hero-card strong,.hero-card span{display:block}.hero-card p{margin:0 0 20px;opacity:.72}.hero-card span{margin-top:12px;opacity:.75}.summary-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin:18px 0}.summary-card{padding:20px;border:1px solid var(--line);border-radius:22px;background:rgba(255,255,255,.8)}.summary-card span{display:block;color:var(--muted);font-size:.82rem}.summary-card strong{display:block;margin-top:9px;font-size:1.55rem}.summary-card.alert strong{color:var(--warning)}.workspace{padding:22px;border:1px solid var(--line);border-radius:30px;background:rgba(255,255,255,.7);box-shadow:var(--shadow)}.toolbar{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-bottom:18px}.tabs{display:flex;gap:5px;padding:5px;border-radius:16px;background:#eee9f1;overflow:auto}.tab{border:0;padding:10px 15px;border-radius:12px;color:var(--muted);background:transparent;white-space:nowrap}.tab.is-active{color:var(--ink);font-weight:700;background:#fff}.toolbar-actions{display:flex;gap:9px}select,input,textarea{width:100%;border:1px solid var(--line);border-radius:13px;padding:12px 13px;color:var(--ink);background:#fff;outline:none}.primary-button,.ghost-button,.small-button,.icon-button{border:0;border-radius:13px;padding:11px 16px;white-space:nowrap}.primary-button{color:#fff;font-weight:750;background:linear-gradient(145deg,var(--primary),var(--primary-dark));box-shadow:0 10px 22px rgba(86,55,101,.2)}.ghost-button{color:var(--primary-dark);background:var(--primary-soft)}.empty-state{text-align:center;padding:62px 20px;color:var(--muted)}.empty-icon{width:66px;height:66px;margin:0 auto 14px;display:grid;place-items:center;border-radius:22px;color:var(--primary);font-size:1.8rem;background:var(--primary-soft)}.item-list{display:grid;gap:12px}.item-card{display:grid;grid-template-columns:6px minmax(0,1fr) auto auto;align-items:center;gap:18px;padding:16px 16px 16px 0;border:1px solid var(--line);border-radius:22px;background:#fff}.item-accent{align-self:stretch;border-radius:0 5px 5px 0;background:var(--primary)}.item-card.subscription .item-accent{background:#bd718a}.item-card.memo .item-accent{background:var(--memo)}.item-card.urgent .item-accent{background:#d17b22}.item-card.overdue .item-accent{background:var(--danger)}.item-card.completed{opacity:.62}.item-topline{display:flex;flex-wrap:wrap;gap:6px}.type-badge,.person-badge,.status-badge{padding:5px 9px;border-radius:999px;font-size:.72rem;background:#f0ebf3;color:var(--primary-dark)}.person-badge{background:#f3edf0;color:#7d5262}.status-badge{background:#edf3ef;color:var(--success)}.item-title{margin:10px 0 5px;font-size:1.12rem}.item-next{margin:0;color:var(--muted);font-size:.88rem}.item-meta{margin-top:9px;color:var(--muted);font-size:.78rem}.item-deadline{min-width:115px;text-align:right}.days-left{display:block}.date-text{display:block;color:var(--muted);font-size:.76rem;margin-top:5px}.item-actions{display:grid;gap:5px}.small-button{padding:7px 11px;font-size:.76rem;color:var(--primary-dark);background:var(--primary-soft)}.danger-button{color:var(--danger);background:#f8ecef}.notice{margin-top:18px;padding:19px 22px;border:1px solid rgba(176,109,22,.2);border-radius:20px;color:#6f542e;background:rgba(255,246,225,.75)}.notice p{margin:8px 0 0;line-height:1.7;font-size:.86rem}dialog{width:min(760px,calc(100% - 28px));max-height:calc(100vh - 28px);padding:0;border:0;border-radius:28px;background:#fbf9fc;box-shadow:0 35px 100px rgba(43,28,51,.32)}dialog::backdrop{background:rgba(30,21,34,.52);backdrop-filter:blur(5px)}#entryForm{padding:25px;overflow-y:auto}.dialog-header{display:flex;justify-content:space-between}.dialog-header h2{margin:0}.icon-button{width:40px;height:40px;padding:0;font-size:1.5rem;color:var(--muted);background:#eee9f1}.type-switch{display:grid;grid-template-columns:repeat(3,1fr);gap:9px;margin:23px 0}.type-switch input{position:absolute;opacity:0}.type-switch span{display:block;padding:13px;text-align:center;border:1px solid var(--line);border-radius:14px;color:var(--muted);background:#fff;cursor:pointer}.type-switch input:checked+span{color:var(--primary-dark);font-weight:750;border-color:rgba(115,80,132,.38);background:var(--primary-soft)}.input-warning,.sensitive-warning{padding:14px 16px;border-radius:15px;line-height:1.6;font-size:.82rem}.input-warning{margin-bottom:18px;color:#6f542e;background:#fff4d9;border:1px solid #efd7a2}.input-warning strong,.input-warning span{display:block}.sensitive-warning{margin-top:15px;color:#7f2839;background:#fdecef;border:1px solid #efbcc6}.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:15px}.form-grid label>span{display:block;margin-bottom:7px;color:var(--muted);font-size:.82rem}.form-grid .full{grid-column:1/-1}.save-note{margin:14px 0 0;color:var(--muted);font-size:.78rem}.dialog-actions{display:flex;justify-content:flex-end;gap:9px;margin-top:23px}@media(max-width:820px){.hero{grid-template-columns:1fr;padding:30px 25px}.summary-grid{grid-template-columns:1fr 1fr}.toolbar{align-items:stretch;flex-direction:column}.toolbar-actions{justify-content:space-between}.item-card{grid-template-columns:5px minmax(0,1fr);grid-template-rows:auto auto auto;align-items:start;gap:12px}.item-accent{grid-column:1;grid-row:1 / 4}.item-main{grid-column:2;grid-row:1;min-width:0}.item-deadline{grid-column:2;grid-row:2;min-width:0;text-align:left;padding-left:0}.item-actions{grid-column:2;grid-row:3;display:flex;flex-wrap:wrap}}@media(max-width:560px){.site-header,.shell{width:min(100% - 18px,1180px)}.brand small{display:none}.summary-grid{gap:8px}.summary-card{padding:16px}.workspace{padding:13px}.toolbar-actions{flex-direction:column}.form-grid{grid-template-columns:1fr}.form-grid .full{grid-column:auto}.type-switch{grid-template-columns:1fr}.user-chip span{display:none}}


.brand-mark {
  padding: 0;
  overflow: visible;
  background: transparent !important;
  box-shadow: none !important;
}

.brand-mark svg {
  width: 100%;
  height: 100%;
  display: block;
  filter: drop-shadow(0 9px 18px rgba(95,62,111,.22));
}

.brand-mark.large {
  background: transparent !important;
  box-shadow: none !important;
}


.brand-logo {
  width: 82px !important;
  height: 68px !important;
  max-width: none !important;
  object-fit: contain;
  display: block;
}

.brand-logo-large {
  width: 230px !important;
  height: 190px !important;
  margin: 0 auto 18px;
}

.document-checklist {
  margin: 0;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: rgba(255,255,255,.72);
}

.document-checklist legend {
  padding: 0 7px;
  color: var(--primary-dark);
  font-weight: 800;
}

.document-checklist > p {
  margin: 0 0 12px;
  color: var(--muted);
  font-size: .78rem;
}

.check-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.check-grid label {
  display: flex;
  align-items: start;
  gap: 9px;
  padding: 10px 11px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #fff;
}

.check-grid input {
  width: 18px;
  height: 18px;
  flex: 0 0 auto;
  accent-color: var(--primary);
}

.check-grid label > span {
  margin: 0 !important;
  color: var(--ink) !important;
  font-size: .8rem !important;
}

@media (max-width: 560px) {
  .brand-logo {
    width: 68px !important;
    height: 58px !important;
  }

  .brand-logo-large {
    width: 190px !important;
    height: 160px !important;
  }

  .check-grid {
    grid-template-columns: 1fr;
  }
}
/* ログイン後の大きな紹介部分を省略 */
.hero {
  min-height: auto;
  display: block;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
}

.hero > div:first-child {
  display: none;
}

.hero-card {
  padding: 18px 22px;
}
#loginGate[hidden] {
  display: none !important;
}

#top:not([hidden]) {
  display: block !important;
}
/* 対象者管理 */
#personSettingsForm {
  padding: 25px;
  overflow-y: auto;
}

.settings-help {
  margin: 16px 0 18px;
  color: var(--muted);
  line-height: 1.7;
  font-size: .88rem;
}

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

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

.person-setting-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 8px;
  padding: 11px;
  border: 1px solid var(--line);
  border-radius: 15px;
  background: #fff;
}

.person-setting-row input {
  min-width: 0;
}

.person-setting-row .small-button {
  min-height: 42px;
}

#personInput,
#personFilter {
  min-height: 46px;
}

#openPersonSettingsBtn {
  min-height: 46px;
}

@media (max-width: 560px) {
  .person-add-row {
    grid-template-columns: 1fr;
  }

  .person-add-row .primary-button {
    width: 100%;
    min-height: 48px;
  }

  .person-setting-row {
    grid-template-columns: 1fr 1fr;
  }

  .person-setting-row input {
    grid-column: 1 / -1;
  }

  .person-setting-row .small-button {
    width: 100%;
    min-height: 46px;
  }

  #openPersonSettingsBtn,
  #personFilter {
    width: 100%;
  }
}

/* カード操作ボタン：狭めのPCでは右端、スマホでは下部右寄せ */
@media (max-width: 820px) and (min-width: 561px) {
  .item-card {
    grid-template-columns: 5px minmax(0, 1fr) auto;
    grid-template-rows: auto auto;
    align-items: start;
    gap: 12px 16px;
  }

  .item-accent {
    grid-column: 1;
    grid-row: 1 / 3;
  }

  .item-main {
    grid-column: 2;
    grid-row: 1 / 3;
    min-width: 0;
  }

  .item-deadline {
    grid-column: 3;
    grid-row: 1;
    min-width: 100px;
    padding-left: 0;
    text-align: right;
  }

  .item-actions {
    grid-column: 3;
    grid-row: 2;
    display: grid;
    justify-items: stretch;
    align-self: end;
    gap: 5px;
  }
}

@media (max-width: 560px) {
  .item-card {
    grid-template-columns: 5px minmax(0, 1fr);
    grid-template-rows: auto auto auto;
    align-items: start;
  }

  .item-accent {
    grid-column: 1;
    grid-row: 1 / 4;
  }

  .item-main {
    grid-column: 2;
    grid-row: 1;
    min-width: 0;
  }

  .item-deadline {
    grid-column: 2;
    grid-row: 2;
    min-width: 0;
    padding-left: 0;
    text-align: right;
  }

  .item-actions {
    grid-column: 2;
    grid-row: 3;
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 6px;
  }
}


/* 種類管理 */
#categorySettingsForm {
  padding: 25px;
  overflow-y: auto;
}

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

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

.category-setting-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 8px;
  padding: 11px;
  border: 1px solid var(--line);
  border-radius: 15px;
  background: #fff;
}

.category-setting-row input {
  min-width: 0;
}

.category-setting-row .small-button {
  min-height: 42px;
}

#categoryInput,
#categoryFilter {
  min-height: 46px;
}

#openCategorySettingsBtn {
  min-height: 46px;
}

/* 絞り込みや管理ボタンが増えても窮屈にならないようにする */
.toolbar-actions {
  flex-wrap: wrap;
  justify-content: flex-end;
}

#personFilter,
#categoryFilter {
  min-width: 150px;
}

@media (max-width: 820px) {
  .toolbar-actions {
    justify-content: flex-start;
  }
}

@media (max-width: 560px) {
  .category-add-row {
    grid-template-columns: 1fr;
  }

  .category-add-row .primary-button {
    width: 100%;
    min-height: 48px;
  }

  .category-setting-row {
    grid-template-columns: 1fr 1fr;
  }

  .category-setting-row input {
    grid-column: 1 / -1;
  }

  .category-setting-row .small-button {
    width: 100%;
    min-height: 46px;
  }

  #openCategorySettingsBtn,
  #categoryFilter {
    width: 100%;
  }

  #personFilter,
  #categoryFilter {
    min-width: 0;
  }
}


/* 登録画面：基本3項目と詳細の折りたたみ */
.basic-entry-section {
  margin-top: 18px;
  padding: 18px;
  border: 1px solid rgba(115,80,132,.18);
  border-radius: 20px;
  background: linear-gradient(180deg, rgba(255,255,255,.96), rgba(246,240,249,.9));
}

.entry-section-title {
  margin: 0 0 14px;
  color: var(--primary-dark);
  font-weight: 800;
  font-size: .95rem;
}

.basic-form-grid {
  align-items: end;
}

.extra-fields {
  margin-top: 16px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: rgba(255,255,255,.78);
  overflow: hidden;
}

.extra-fields summary {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 16px 18px;
  color: var(--primary-dark);
  font-weight: 800;
  cursor: pointer;
  list-style: none;
  background: var(--primary-soft);
}

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

.extra-fields summary::after {
  content: "＋";
  flex: 0 0 auto;
  font-size: 1.2rem;
  line-height: 1;
}

.extra-fields[open] summary::after {
  content: "−";
}

.extra-fields summary small {
  margin-left: auto;
  color: var(--muted);
  font-size: .75rem;
  font-weight: 600;
}

.extra-form-grid {
  padding: 18px;
}

.basic-entry-section input,
.basic-entry-section select,
.extra-fields input,
.extra-fields select,
.extra-fields textarea {
  min-height: 46px;
}

@media (max-width: 560px) {
  .basic-entry-section {
    padding: 15px;
    border-radius: 17px;
  }

  .extra-fields summary {
    align-items: flex-start;
    padding: 15px;
  }

  .extra-fields summary small {
    display: none;
  }

  .extra-form-grid {
    padding: 15px;
  }
}


/* ソーダしゅわしゅわヘッダー */
.site-header {
  position: sticky;
  overflow: hidden;
  isolation: isolate;
  padding: 13px 16px 13px 18px;
  border: 1px solid rgba(255,255,255,.72);
  border-radius: 26px;
  background:
    linear-gradient(
      105deg,
      #3f9fbd 0%,
      #57b6cf 30%,
      #9edfdc 68%,
      #fff0a8 100%
    );
  box-shadow:
    0 16px 38px rgba(61,151,181,.22),
    inset 0 1px 0 rgba(255,255,255,.7);
  backdrop-filter: blur(18px);
}

.site-header::before,
.site-header::after {
  content: "";
  position: absolute;
  z-index: -1;
  pointer-events: none;
  border-radius: 50%;
}

.site-header::before {
  width: 240px;
  height: 240px;
  right: 10%;
  top: -150px;
  background:
    radial-gradient(circle at 35% 35%, rgba(255,255,255,.72) 0 6px, transparent 7px),
    radial-gradient(circle at 68% 55%, rgba(255,255,255,.52) 0 10px, transparent 11px),
    radial-gradient(circle at 52% 78%, rgba(255,255,255,.4) 0 5px, transparent 6px),
    radial-gradient(circle, rgba(255,255,255,.2), transparent 68%);
}

.site-header::after {
  width: 180px;
  height: 180px;
  left: 42%;
  bottom: -125px;
  background:
    radial-gradient(circle at 25% 25%, rgba(255,255,255,.56) 0 7px, transparent 8px),
    radial-gradient(circle at 70% 35%, rgba(255,255,255,.44) 0 4px, transparent 5px),
    radial-gradient(circle at 56% 70%, rgba(255,255,255,.36) 0 9px, transparent 10px),
    radial-gradient(circle, rgba(255,255,255,.18), transparent 70%);
}

.site-header .brand {
  position: relative;
  z-index: 1;
  color: #fff;
  text-shadow: 0 2px 8px rgba(27,90,111,.28);
}

.site-header .brand strong {
  color: #fff;
  font-size: 1.08rem;
  letter-spacing: .02em;
}

.site-header .brand small {
  color: rgba(255,255,255,.92);
}

.site-header .brand-logo {
  width: 82px !important;
  height: 68px !important;
  padding: 4px;
  border-radius: 20px;
  background: rgba(255,255,255,.22);
  box-shadow:
    0 9px 22px rgba(43,118,143,.2),
    inset 0 1px 0 rgba(255,255,255,.55);
  backdrop-filter: blur(8px);
}

.site-header .auth-area {
  position: relative;
  z-index: 1;
}

.site-header .user-chip {
  border: 1px solid rgba(255,255,255,.68);
  color: #315d68;
  background: rgba(255,255,255,.84);
  box-shadow: 0 7px 18px rgba(61,151,181,.16);
}

.site-header .primary-button {
  border: 1px solid rgba(255,255,255,.72);
  border-radius: 999px;
  color: #2f6676;
  background: linear-gradient(180deg, #ffffff, #eefcff);
  box-shadow:
    0 9px 20px rgba(53,139,165,.2),
    inset 0 1px 0 rgba(255,255,255,.9);
}

.site-header .ghost-button {
  border: 1px solid rgba(255,255,255,.72);
  border-radius: 999px;
  color: #356978;
  background: rgba(255,255,255,.76);
  box-shadow: 0 8px 18px rgba(53,139,165,.15);
}

.site-header .primary-button:hover,
.site-header .ghost-button:hover {
  transform: translateY(-1px);
  filter: brightness(1.03);
}

@media (max-width: 560px) {
  .site-header {
    width: min(100% - 18px, 1180px);
    padding: 10px 11px 10px 13px;
    border-radius: 21px;
  }

  .site-header .brand {
    gap: 8px;
  }

  .site-header .brand-logo {
    width: 62px !important;
    height: 52px !important;
    border-radius: 16px;
  }

  .site-header .brand strong {
    font-size: .96rem;
  }

  .site-header .auth-area {
    gap: 6px;
  }

  .site-header .primary-button,
  .site-header .ghost-button {
    padding: 9px 12px;
    font-size: .78rem;
  }
}


/* 可愛い対象者切り替え */
.person-switcher-section {
  margin: 18px 0;
  padding: 20px;
  border: 1px solid rgba(107,178,199,.18);
  border-radius: 28px;
  background:
    radial-gradient(circle at 10% 0%, rgba(255,255,255,.9), transparent 13rem),
    linear-gradient(135deg, rgba(239,251,255,.96), rgba(255,250,239,.94));
  box-shadow: 0 16px 38px rgba(72,147,170,.12);
  overflow: hidden;
}

.person-switcher-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 16px;
}

.person-switcher-heading h2 {
  margin: 0;
  color: #365f6b;
  font-size: 1.12rem;
}

#openPersonSettingsBtnTop {
  border-radius: 999px;
  color: #3c7180;
  background: rgba(255,255,255,.82);
  box-shadow: 0 8px 18px rgba(72,147,170,.12);
}

.person-switcher {
  display: flex;
  gap: 12px;
  padding: 3px 2px 6px;
  overflow-x: auto;
  scrollbar-width: thin;
  scrollbar-color: rgba(87,182,207,.35) transparent;
}

.person-switcher::-webkit-scrollbar {
  height: 6px;
}

.person-switcher::-webkit-scrollbar-thumb {
  border-radius: 999px;
  background: rgba(87,182,207,.3);
}

.person-switch-button {
  position: relative;
  flex: 0 0 112px;
  min-height: 126px;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 5px;
  padding: 13px 10px;
  border: 1px solid rgba(255,255,255,.78);
  border-radius: 26px;
  color: #44616a;
  background: linear-gradient(180deg, #f7fdff, #d9f3fb);
  box-shadow:
    0 12px 24px rgba(73,151,176,.14),
    inset 0 1px 0 rgba(255,255,255,.9);
  transition: transform .18s ease, box-shadow .18s ease, filter .18s ease;
}

.person-switch-button:nth-child(4n + 2) {
  background: linear-gradient(180deg, #fff9fc, #f8dce8);
}

.person-switch-button:nth-child(4n + 3) {
  background: linear-gradient(180deg, #fbfff9, #dff4e8);
}

.person-switch-button:nth-child(4n + 4) {
  background: linear-gradient(180deg, #fffdf5, #fff0bc);
}

.person-switch-button:nth-child(4n + 5) {
  background: linear-gradient(180deg, #fcfaff, #eadff8);
}

.person-switch-button:hover {
  transform: translateY(-2px);
  filter: brightness(1.02);
}

.person-switch-button.is-active {
  color: #fff;
  border-color: rgba(255,255,255,.9);
  background:
    radial-gradient(circle at 24% 20%, rgba(255,255,255,.5) 0 6px, transparent 7px),
    radial-gradient(circle at 76% 30%, rgba(255,255,255,.32) 0 4px, transparent 5px),
    linear-gradient(145deg, #4aa7c2, #74cddc);
  box-shadow:
    0 16px 28px rgba(56,151,179,.26),
    inset 0 1px 0 rgba(255,255,255,.72);
}

.person-switch-button.is-active::after {
  content: "✓";
  position: absolute;
  top: 9px;
  right: 10px;
  width: 24px;
  height: 24px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: #3f91a9;
  font-size: .8rem;
  font-weight: 900;
  background: rgba(255,255,255,.92);
}

.person-switch-icon {
  width: 54px;
  height: 54px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  font-size: 1.65rem;
  background: rgba(255,255,255,.76);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.9);
}

.person-switch-button.is-active .person-switch-icon {
  background: rgba(255,255,255,.22);
}

.person-switch-label {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 850;
}

.person-switch-button small {
  color: inherit;
  opacity: .74;
  font-size: .7rem;
}

@media (max-width: 560px) {
  .person-switcher-section {
    padding: 16px 13px;
    border-radius: 22px;
  }

  .person-switcher-heading {
    align-items: flex-start;
    flex-direction: column;
  }

  #openPersonSettingsBtnTop {
    width: 100%;
  }

  .person-switcher {
    margin-right: -13px;
    padding-right: 13px;
  }

  .person-switch-button {
    flex-basis: 96px;
    min-height: 112px;
    border-radius: 22px;
  }

  .person-switch-icon {
    width: 48px;
    height: 48px;
    font-size: 1.45rem;
  }
}


/* 今日やることダッシュボード */
.today-dashboard {
  margin: 0 0 18px;
  padding: 24px;
  border: 1px solid rgba(116,190,210,.18);
  border-radius: 32px;
  background:
    radial-gradient(circle at 12% 0%, rgba(255,255,255,.95), transparent 16rem),
    linear-gradient(180deg, rgba(255,255,255,.98), rgba(246,252,255,.95));
  box-shadow: 0 18px 42px rgba(72,147,170,.13);
}

.today-dashboard-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 20px;
}

.today-title-wrap {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.today-title-wrap h1 {
  margin: 0;
  color: #338bad;
  font-size: clamp(1.4rem, 3vw, 2rem);
  letter-spacing: .02em;
}

.today-note-icon {
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  border-radius: 16px;
  font-size: 1.55rem;
  background: linear-gradient(180deg, #ffffff, #eaf8ff);
  box-shadow: 0 9px 20px rgba(69,159,188,.14);
}

#showAllTasksBtn {
  border-radius: 999px;
  color: #3f8196;
  background: rgba(255,255,255,.92);
  box-shadow: 0 8px 18px rgba(69,159,188,.12);
}

.konpeito-decor {
  position: relative;
  width: 18px;
  height: 18px;
  flex: 0 0 auto;
  transform: rotate(18deg);
  clip-path: polygon(
    50% 0%, 61% 30%, 90% 18%, 70% 43%,
    100% 50%, 70% 58%, 90% 82%, 61% 70%,
    50% 100%, 39% 70%, 10% 82%, 30% 58%,
    0% 50%, 30% 43%, 10% 18%, 39% 30%
  );
  box-shadow: 0 4px 8px rgba(50,120,140,.12);
}

.konpeito-pink {
  margin-left: 2px;
  background: linear-gradient(145deg, #ffd8e6, #f2a9c3);
}

.konpeito-mint {
  margin-left: -3px;
  background: linear-gradient(145deg, #def8ed, #9fdcc9);
}

.today-task-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
}

.today-task-card {
  position: relative;
  min-height: 172px;
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: start;
  gap: 12px;
  padding: 20px 18px 18px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.92);
  border-radius: 24px;
  text-align: left;
  box-shadow:
    0 12px 26px rgba(66,122,141,.1),
    inset 0 1px 0 rgba(255,255,255,.9);
  transition: transform .18s ease, box-shadow .18s ease;
}

.today-task-card:hover {
  transform: translateY(-2px);
  box-shadow:
    0 16px 30px rgba(66,122,141,.15),
    inset 0 1px 0 rgba(255,255,255,.9);
}

.today-card-pink {
  color: #a94f6f;
  background: linear-gradient(180deg, #fffafd, #fdebf2);
}

.today-card-orange {
  color: #a86520;
  background: linear-gradient(180deg, #fffdf8, #fff1da);
}

.today-card-blue {
  color: #337ca5;
  background: linear-gradient(180deg, #fbfdff, #e9f5fc);
}

.today-card-mint {
  color: #397f70;
  background: linear-gradient(180deg, #fbfffd, #e8f7f1);
}

.task-calendar-slot {
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  border-radius: 14px;
  background: rgba(255,255,255,.82);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.9);
}

.task-calendar-slot::before {
  content: "▦";
  font-size: 1.45rem;
  font-weight: 800;
}

.task-calendar-pink { color: #ef7598; }
.task-calendar-orange { color: #f3a33d; }
.task-calendar-blue { color: #53a8d7; }
.task-calendar-mint { color: #62bca5; }

.task-card-copy {
  position: relative;
  z-index: 2;
  min-width: 0;
}

.task-card-copy small,
.task-card-copy strong,
.task-card-copy em {
  display: block;
}

.task-card-copy small {
  margin-top: 2px;
  font-size: .92rem;
  font-weight: 750;
}

.task-card-copy strong {
  margin-top: 7px;
  font-size: clamp(1.6rem, 3vw, 2.35rem);
  line-height: 1;
}

.task-card-copy strong span {
  margin-right: 3px;
}

.task-card-copy em {
  margin-top: 20px;
  padding: 7px 10px;
  border-radius: 999px;
  font-size: .72rem;
  font-style: normal;
  text-align: center;
  background: rgba(255,255,255,.64);
}

.task-bird-slot {
  position: absolute;
  right: 18px;
  bottom: 20px;
  width: 44px;
  height: 44px;
  border-radius: 50% 50% 45% 45%;
  opacity: .88;
}

.task-bird-slot::before {
  content: "";
  position: absolute;
  width: 15px;
  height: 12px;
  right: -7px;
  top: 12px;
  border-radius: 50%;
  background: inherit;
  transform: rotate(-16deg);
}

.task-bird-slot::after {
  content: "";
  position: absolute;
  width: 8px;
  height: 6px;
  left: 17px;
  top: 16px;
  border-radius: 50%;
  background: rgba(255,255,255,.92);
  box-shadow: 10px 1px 0 -1px rgba(60,60,70,.8);
}

.task-bird-pink { background: linear-gradient(145deg, #f5a9c2, #e77da1); }
.task-bird-orange { background: linear-gradient(145deg, #ffc66f, #f2a33c); }
.task-bird-blue { background: linear-gradient(145deg, #8bc7ee, #4ea4da); }
.task-bird-mint { background: linear-gradient(145deg, #9ddfcd, #59b89f); }

.task-decor-slot {
  position: absolute;
  right: 12px;
  top: 16px;
  width: 20px;
  height: 20px;
  opacity: .9;
}

.task-decor-heart {
  background: linear-gradient(145deg, #ffb6cb, #ec789c);
  clip-path: polygon(50% 88%, 8% 45%, 8% 24%, 22% 8%, 40% 8%, 50% 22%, 60% 8%, 78% 8%, 92% 24%, 92% 45%);
}

.task-decor-star {
  background: linear-gradient(145deg, #ffe79a, #f2b83f);
  clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 56%, 79% 92%, 50% 70%, 21% 92%, 32% 56%, 2% 35%, 39% 35%);
}

.task-decor-bubble-blue,
.task-decor-bubble-mint {
  width: 18px;
  height: 18px;
  border: 2px solid rgba(255,255,255,.92);
  border-radius: 50%;
  box-shadow:
    -12px 9px 0 -4px currentColor,
    -4px 22px 0 -6px currentColor;
}

.task-decor-bubble-blue {
  color: rgba(102,188,229,.55);
  background: rgba(164,220,248,.35);
}

.task-decor-bubble-mint {
  color: rgba(104,195,169,.5);
  background: rgba(179,235,217,.35);
}

@media (max-width: 900px) {
  .today-task-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 560px) {
  .today-dashboard {
    padding: 17px 13px;
    border-radius: 24px;
  }

  .today-dashboard-heading {
    align-items: flex-start;
    flex-direction: column;
  }

  .today-title-wrap {
    flex-wrap: wrap;
  }

  #showAllTasksBtn {
    width: 100%;
  }

  .today-task-grid {
    gap: 10px;
  }

  .today-task-card {
    min-height: 154px;
    padding: 16px 13px;
    border-radius: 20px;
  }

  .task-calendar-slot {
    width: 40px;
    height: 40px;
  }

  .task-card-copy small {
    font-size: .8rem;
  }

  .task-card-copy strong {
    font-size: 1.65rem;
  }

  .task-card-copy em {
    margin-top: 16px;
    padding: 6px 8px;
    font-size: .66rem;
  }

  .task-bird-slot {
    right: 12px;
    bottom: 16px;
    width: 38px;
    height: 38px;
  }
}


/* 4色カレンダー画像を実際に表示 */
.task-calendar-slot {
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  box-shadow: none;
}

.task-calendar-slot::before {
  content: none;
}

.task-calendar-pink {
  background-image: url("./images/calendar-pink.png");
}

.task-calendar-orange {
  background-image: url("./images/calendar-orange.png");
}

.task-calendar-blue {
  background-image: url("./images/calendar-blue.png");
}

.task-calendar-mint {
  background-image: url("./images/calendar-mint.png");
}


/* 種類カード切り替え用 */
.visually-hidden-control {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0 0 0 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

.category-switcher-section .person-switch-button:nth-child(8n + 2) {
  background: linear-gradient(180deg, #fff9fc, #f8dce8);
}

.category-switcher-section .person-switch-button:nth-child(8n + 3) {
  background: linear-gradient(180deg, #fbfff9, #dff4e8);
}

.category-switcher-section .person-switch-button:nth-child(8n + 4) {
  background: linear-gradient(180deg, #fffdf5, #fff0bc);
}

.category-switcher-section .person-switch-button:nth-child(8n + 5) {
  background: linear-gradient(180deg, #fcfaff, #eadff8);
}

.category-switcher-section .person-switch-button:nth-child(8n + 6) {
  background: linear-gradient(180deg, #f8fdff, #dceffb);
}

.category-switcher-section .person-switch-button:nth-child(8n + 7) {
  background: linear-gradient(180deg, #fffaf5, #ffe5cf);
}

.category-switcher-section .person-switch-button:nth-child(8n + 8) {
  background: linear-gradient(180deg, #f9fffd, #d7f2e7);
}

.category-switcher-section .person-switch-button:nth-child(8n + 9) {
  background: linear-gradient(180deg, #fffafa, #f3e3ea);
}


/* コンパクトで開閉できる予定カード */
.item-list {
  gap: 9px;
}

.compact-item-card {
  display: block;
  padding: 0;
  overflow: hidden;
  border: 1px solid rgba(92,151,170,.16);
  border-radius: 22px;
  background: rgba(255,255,255,.94);
  box-shadow: 0 9px 22px rgba(72,132,151,.08);
  transition: transform .18s ease, box-shadow .18s ease;
}

.compact-item-card:hover {
  transform: translateY(-1px);
  box-shadow: 0 13px 26px rgba(72,132,151,.12);
}

.compact-item-card.completed {
  opacity: .72;
}

.item-summary {
  width: 100%;
  min-height: 68px;
  display: grid;
  grid-template-columns: 48px minmax(0,1fr) auto 24px;
  align-items: center;
  gap: 12px;
  padding: 10px 14px 10px 12px;
  border: 0;
  color: var(--ink);
  text-align: left;
  background: transparent;
}

.item-type-icon {
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  border-radius: 17px;
  font-size: 1.42rem;
  background: linear-gradient(180deg,#effaff,#dceff7);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.9),
    0 6px 14px rgba(67,145,170,.1);
}

.compact-item-card.subscription .item-type-icon {
  background: linear-gradient(180deg,#fff7fb,#f7dfe9);
}

.compact-item-card.memo .item-type-icon {
  background: linear-gradient(180deg,#fbfaff,#e9e0f5);
}

.compact-item-card.urgent .item-type-icon {
  background: linear-gradient(180deg,#fffaf2,#ffe8c8);
}

.compact-item-card.overdue .item-type-icon {
  background: linear-gradient(180deg,#fff7f8,#f8dfe4);
}

.item-summary-main {
  min-width: 0;
}

.item-title-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
}

.item-title-row .item-title {
  min-width: 0;
  overflow: hidden;
  color: #315f6c;
  font-size: .98rem;
  font-weight: 850;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.item-summary-sub {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 7px;
  margin-top: 5px;
  color: var(--muted);
  font-size: .74rem;
}

.item-summary .type-badge,
.item-summary .person-badge,
.item-summary .status-badge {
  padding: 4px 8px;
  font-size: .68rem;
}

.item-summary .item-deadline {
  min-width: 78px;
  text-align: right;
}

.item-summary .days-left {
  color: #4c8190;
  font-size: .84rem;
}

.compact-item-card.urgent .days-left {
  color: #bd7420;
}

.compact-item-card.overdue .days-left {
  color: var(--danger);
}

.item-chevron {
  display: grid;
  place-items: center;
  color: #6aa3b2;
  font-size: 1.25rem;
  transition: transform .18s ease;
}

.compact-item-card.is-open .item-chevron {
  transform: rotate(180deg);
}

.item-details {
  padding: 0 16px 15px 76px;
  border-top: 1px dashed rgba(82,145,163,.16);
  background: linear-gradient(180deg,rgba(251,254,255,.85),rgba(255,255,255,.96));
}

.item-details[hidden] {
  display: none !important;
}

.item-details .item-next {
  margin: 14px 0 0;
  color: #426a75;
  font-size: .86rem;
  line-height: 1.7;
}

.item-details .item-meta {
  margin-top: 8px;
  color: var(--muted);
  font-size: .77rem;
  line-height: 1.7;
}

.item-details .item-memo {
  margin: 8px 0 0;
  color: #746a79;
  font-size: .8rem;
  line-height: 1.7;
  white-space: pre-wrap;
}

.item-details .item-memo:empty {
  display: none;
}

.item-details .item-actions {
  display: flex;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 13px;
}

.item-details .small-button {
  border-radius: 999px;
}

@media (max-width: 560px) {
  .item-summary {
    grid-template-columns: 42px minmax(0,1fr) auto 18px;
    gap: 9px;
    min-height: 64px;
    padding: 9px 10px;
  }

  .item-type-icon {
    width: 42px;
    height: 42px;
    border-radius: 15px;
    font-size: 1.25rem;
  }

  .item-title-row .item-title {
    max-width: 100%;
    flex-basis: 100%;
    font-size: .9rem;
  }

  .item-summary .status-badge {
    display: none;
  }

  .item-summary .item-deadline {
    min-width: 64px;
  }

  .item-summary .days-left {
    font-size: .76rem;
  }

  .item-details {
    padding: 0 12px 13px 61px;
  }

  .item-details .item-actions {
    justify-content: flex-end;
  }
}


/* 上のダッシュボードと色を合わせる */
.workspace {
  border-color: rgba(106,183,205,.16);
  background:
    radial-gradient(circle at 8% 0%, rgba(255,255,255,.96), transparent 15rem),
    linear-gradient(180deg, rgba(249,253,255,.96), rgba(255,251,246,.94));
  box-shadow: 0 16px 38px rgba(72,147,170,.1);
}

.tabs {
  background: linear-gradient(180deg, #f4fbfd, #e8f5f8);
}

.tab {
  color: #5f8792;
}

.tab.is-active {
  color: #34788c;
  background: #fff;
  box-shadow: 0 5px 12px rgba(72,147,170,.1);
}

.compact-item-card {
  border-color: rgba(111,184,204,.18);
  background: linear-gradient(180deg, #ffffff, #f8fcfd);
  box-shadow: 0 9px 22px rgba(72,147,170,.08);
}

.compact-item-card:hover {
  box-shadow: 0 13px 28px rgba(72,147,170,.13);
}

/* 通常・手続き系：水色 */
.compact-item-card.procedure {
  border-color: rgba(101,180,215,.2);
  background: linear-gradient(180deg, #ffffff, #edf8fd);
}

.compact-item-card.procedure .item-type-icon {
  color: #397fa2;
  background: linear-gradient(180deg, #f8fdff, #dceff8);
}

/* サブスク：ピンク */
.compact-item-card.subscription {
  border-color: rgba(231,144,174,.2);
  background: linear-gradient(180deg, #fffefe, #fdeef4);
}

.compact-item-card.subscription .item-type-icon {
  color: #a45270;
  background: linear-gradient(180deg, #fffafd, #f7dce8);
}

/* メモ：ミント */
.compact-item-card.memo {
  border-color: rgba(114,195,170,.2);
  background: linear-gradient(180deg, #ffffff, #ecf8f3);
}

.compact-item-card.memo .item-type-icon {
  color: #397d6d;
  background: linear-gradient(180deg, #fbfffd, #dff3eb);
}

/* 期限が近い：オレンジ */
.compact-item-card.urgent {
  border-color: rgba(238,174,88,.24);
  background: linear-gradient(180deg, #fffefa, #fff2df);
}

.compact-item-card.urgent .item-type-icon {
  color: #a96a24;
  background: linear-gradient(180deg, #fffdf8, #ffe7c8);
}

/* 期限超過：ピンク */
.compact-item-card.overdue {
  border-color: rgba(225,126,157,.26);
  background: linear-gradient(180deg, #fffdfd, #fde8ef);
}

.compact-item-card.overdue .item-type-icon {
  color: #a94667;
  background: linear-gradient(180deg, #fff9fc, #f7d7e2);
}

/* 完了：ミント */
.compact-item-card.completed {
  opacity: 1;
  border-color: rgba(108,190,165,.2);
  background: linear-gradient(180deg, #ffffff, #eaf7f1);
}

.compact-item-card.completed .item-type-icon {
  color: #397d6d;
  background: linear-gradient(180deg, #fbfffd, #d9f1e7);
}

.item-title-row .item-title {
  color: #356c79;
}

.compact-item-card.subscription .item-title {
  color: #95536a;
}

.compact-item-card.memo .item-title,
.compact-item-card.completed .item-title {
  color: #437c70;
}

.compact-item-card.urgent .item-title {
  color: #9a6628;
}

.compact-item-card.overdue .item-title {
  color: #9f4b66;
}

.item-summary .type-badge {
  color: #3e8193;
  background: rgba(230,247,252,.88);
}

.item-summary .person-badge {
  color: #9a6275;
  background: rgba(251,232,239,.9);
}

.item-summary .status-badge {
  color: #4e8878;
  background: rgba(229,246,239,.9);
}

.item-details {
  border-top-color: rgba(107,178,199,.18);
  background: linear-gradient(180deg, rgba(255,255,255,.82), rgba(250,254,255,.95));
}

.item-details .item-next {
  color: #447786;
}

.item-details .small-button {
  color: #417b8b;
  background: #e9f7fa;
}

.item-details .danger-button {
  color: #a54a67;
  background: #fdebf1;
}


/* 操作エリアも上と同じパステルソーダ調に統一 */
.toolbar {
  padding: 14px;
  border: 1px solid rgba(106,183,205,.14);
  border-radius: 20px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.94), rgba(241,250,252,.9));
  box-shadow: 0 8px 20px rgba(72,147,170,.07);
}

.toolbar-actions {
  gap: 8px;
}

#personFilter {
  min-height: 44px;
  border-color: rgba(111,184,204,.22);
  color: #477887;
  background: linear-gradient(180deg, #ffffff, #f0fafc);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.9);
}

#openPersonSettingsBtn,
#openCategorySettingsBtn {
  min-height: 44px;
  border: 1px solid rgba(111,184,204,.2);
  border-radius: 999px;
  color: #42798a;
  background: linear-gradient(180deg, #ffffff, #eaf7fa);
  box-shadow:
    0 7px 16px rgba(72,147,170,.09),
    inset 0 1px 0 rgba(255,255,255,.9);
}

#openPersonSettingsBtn:hover,
#openCategorySettingsBtn:hover {
  transform: translateY(-1px);
  background: linear-gradient(180deg, #ffffff, #dff3f7);
}

#openCreateBtn {
  min-height: 44px;
  border: 1px solid rgba(255,255,255,.72);
  border-radius: 999px;
  color: #ffffff;
  background:
    linear-gradient(135deg, #70c7d9 0%, #77d5c0 100%);
  box-shadow:
    0 10px 22px rgba(76,177,187,.22),
    inset 0 1px 0 rgba(255,255,255,.55);
}

#openCreateBtn:hover {
  transform: translateY(-1px);
  filter: brightness(1.03);
}

@media (max-width: 560px) {
  .toolbar {
    padding: 11px;
    border-radius: 17px;
  }

  #openPersonSettingsBtn,
  #openCategorySettingsBtn,
  #openCreateBtn,
  #personFilter {
    width: 100%;
    min-height: 46px;
  }
}


/* 操作エリアの並びを整理 */
.toolbar {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
}

.tabs {
  width: 100%;
  justify-content: flex-start;
  margin: 0;
}

.toolbar-actions {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
}

/* 対象者プルダウンを左下へ */
#personFilter {
  order: 1;
  min-width: 180px;
}

/* 対象者管理は小さめ */
#openPersonSettingsBtn {
  order: 2;
  min-height: 38px;
  padding: 8px 12px;
  font-size: .76rem;
  opacity: .92;
}

/* 種類管理は上の「種類を追加」と同じ見た目 */
#openCategorySettingsBtn,
#openCategorySettingsBtnTop {
  min-height: 40px;
  padding: 9px 14px;
  border: 1px solid rgba(111,184,204,.2);
  border-radius: 999px;
  color: #42798a;
  background: linear-gradient(180deg, #ffffff, #eaf7fa);
  box-shadow:
    0 7px 16px rgba(72,147,170,.09),
    inset 0 1px 0 rgba(255,255,255,.9);
}

#openCategorySettingsBtn {
  order: 3;
}

#openCategorySettingsBtnTop {
  color: #42798a !important;
  background: linear-gradient(180deg, #ffffff, #eaf7fa) !important;
}

#openCategorySettingsBtn:hover,
#openCategorySettingsBtnTop:hover {
  transform: translateY(-1px);
  background: linear-gradient(180deg, #ffffff, #dff3f7);
}

/* 新規追加は右端 */
#openCreateBtn {
  order: 4;
  margin-left: auto;
}

@media (max-width: 700px) {
  .toolbar-actions {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
  }

  #personFilter {
    grid-column: 1 / 2;
    width: 100%;
    min-width: 0;
  }

  #openPersonSettingsBtn {
    grid-column: 2 / 3;
    width: auto;
    min-width: 0;
  }

  #openCategorySettingsBtn,
  #openCreateBtn {
    width: 100%;
    margin-left: 0;
  }

  #openCategorySettingsBtn {
    grid-column: 1 / 2;
  }

  #openCreateBtn {
    grid-column: 2 / 3;
  }
}

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

  #personFilter,
  #openPersonSettingsBtn,
  #openCategorySettingsBtn,
  #openCreateBtn {
    grid-column: 1;
    width: 100%;
  }

  #openPersonSettingsBtn {
    justify-self: start;
    width: auto;
  }
}


/* 年別アーカイブ */
.archive-section {
  margin-top: 18px;
  padding: 20px;
  border: 1px solid rgba(110,190,167,.18);
  border-radius: 28px;
  background:
    radial-gradient(circle at 92% 0%, rgba(255,255,255,.9), transparent 14rem),
    linear-gradient(135deg, rgba(239,251,247,.96), rgba(246,251,255,.96));
  box-shadow: 0 14px 34px rgba(72,147,170,.09);
}

.archive-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
}

.archive-heading h2 {
  margin: 0;
  color: #397d70;
  font-size: 1.12rem;
}

.archive-heading p:not(.eyebrow) {
  margin: 7px 0 0;
  color: var(--muted);
  font-size: .8rem;
  line-height: 1.6;
}

.archive-years {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
  margin-top: 16px;
}

.archive-year-button {
  min-width: 78px;
  padding: 9px 14px;
  border: 1px solid rgba(110,190,167,.22);
  border-radius: 999px;
  color: #467f73;
  font-weight: 800;
  background: linear-gradient(180deg, #ffffff, #e9f7f1);
  box-shadow: 0 6px 14px rgba(78,156,139,.08);
}

.archive-year-button:hover,
.archive-year-button.is-active {
  color: #fff;
  background: linear-gradient(135deg, #65bfa9, #72c6d4);
  transform: translateY(-1px);
}

.archive-empty,
.archive-status {
  margin: 16px 0 0;
  padding: 13px 15px;
  border-radius: 16px;
  color: #628078;
  font-size: .82rem;
  background: rgba(255,255,255,.7);
}

.archive-list {
  margin-top: 13px;
}

.archive-item-card {
  border-color: rgba(110,190,167,.19);
  background: linear-gradient(180deg, #ffffff, #edf8f3);
}

.archive-item-card .item-type-icon {
  color: #397d6d;
  background: linear-gradient(180deg, #fbfffd, #dff3eb);
}

.archive-item-card .item-title {
  color: #437c70;
}

#closeArchiveBtn {
  border-radius: 999px;
  color: #467f73;
  background: #e9f7f1;
}

@media (max-width: 560px) {
  .archive-section {
    padding: 16px 13px;
    border-radius: 22px;
  }

  .archive-heading {
    flex-direction: column;
  }

  #closeArchiveBtn {
    width: 100%;
  }

  .archive-year-button {
    flex: 1 1 82px;
  }
}


/* 「対象者を管理」と「種類を管理」の大きさを統一 */
#openPersonSettingsBtn,
#openCategorySettingsBtn {
  min-width: auto;
  min-height: 38px;
  width: auto;
  padding: 8px 12px;
  font-size: .76rem;
  line-height: 1.2;
}

@media (min-width: 701px) {
  #openCategorySettingsBtn {
    width: auto;
  }
}

/* ===== わたしの更新：最終整理版 2026-06-25 ===== */

/* hiddenは最優先。ログイン後にログイン画面が残る事故を防ぐ */
[hidden],
#loginGate[hidden],
#top[hidden],
#userChip[hidden],
#loginBtn[hidden],
#logoutBtn[hidden],
#headerCreateBtn[hidden] {
  display: none !important;
}

/* ヘッダー：ソーダ色・ログイン前後の並びを固定 */
.site-header {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  align-items: center !important;
  gap: 14px !important;
  overflow: hidden !important;
}

.site-header .brand {
  min-width: 0 !important;
}

.site-header .brand span {
  min-width: 0 !important;
  overflow: hidden !important;
}

.site-header .brand strong {
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

.site-header .auth-area {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 10px !important;
  min-width: 0 !important;
}

/* ヘッダーの「＋新しく追加」 */
.header-create-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 42px;
  padding: 10px 18px;
  border: 1px solid rgba(255,255,255,.78);
  border-radius: 999px;
  color: #1f6f73;
  font-weight: 900;
  letter-spacing: .04em;
  white-space: nowrap;
  background:
    radial-gradient(circle at 24% 18%, rgba(255,255,255,.92) 0 5px, transparent 6px),
    radial-gradient(circle at 78% 34%, rgba(255,255,255,.62) 0 4px, transparent 5px),
    linear-gradient(135deg, rgba(221,255,209,.76), rgba(125,231,200,.72) 48%, rgba(90,205,219,.66));
  box-shadow:
    0 10px 24px rgba(46,156,172,.22),
    inset 0 1px 0 rgba(255,255,255,.88),
    inset 0 -10px 20px rgba(255,255,255,.16);
  backdrop-filter: blur(12px);
}

.header-create-button:hover {
  transform: translateY(-1px);
  filter: brightness(1.04);
}

/* ログイン後のユーザーアイコン */
.site-header .user-chip {
  padding: 5px !important;
  min-width: 42px !important;
  min-height: 42px !important;
  justify-content: center !important;
}

.site-header .user-chip span {
  display: none !important;
}

.site-header .user-chip img {
  width: 32px !important;
  height: 32px !important;
}

/* ログイン画面：余白を暴れさせない。中央の大ロゴはHTMLから削除済み */
#loginGate.login-gate:not([hidden]) {
  min-height: 0 !important;
  height: auto !important;
  display: block !important;
  margin: 10px auto 40px !important;
  padding: 0 !important;
}

#loginGate .login-panel {
  margin: 0 auto !important;
  padding: 30px 34px 34px !important;
}

#loginGate .eyebrow {
  margin: 0 0 8px !important;
}

#loginGate h1 {
  margin: 0 !important;
}

#loginGate p:not(.eyebrow) {
  margin: 14px auto 10px !important;
}

#loginGate small {
  margin-top: 10px !important;
}

/* 下の重複ログインボタンは使わない */
#gateLoginBtn {
  display: none !important;
}

/* タスク分類：すべて／手続き／支払い／予定／追加 */
.category-switcher-section {
  display: block !important;
}

.category-add-card {
  border-style: dashed !important;
  color: #486f7a !important;
  background: linear-gradient(180deg, rgba(255,255,255,.92), rgba(232,247,250,.9)) !important;
}

.category-add-card .person-switch-icon {
  font-size: 1.9rem;
  font-weight: 500;
}

.category-add-card::after {
  display: none !important;
}

/* 今日やること画像：PC */
.today-title-image-only {
  flex: 1 1 auto;
  min-width: 0;
  width: min(70%, 650px);
  height: 95px;
  overflow: hidden;
  display: flex;
  align-items: center;
}

.today-pencil-image {
  display: block;
  width: 620px !important;
  height: auto !important;
  max-width: 100% !important;
  transform: none !important;
  object-fit: contain !important;
  object-position: center center !important;
  filter: drop-shadow(0 10px 18px rgba(70, 170, 185, .18));
  border-radius: 16px;
}

.today-title-image-only + .konpeito-decor,
.today-title-image-only ~ .konpeito-decor {
  display: none;
}

.today-dashboard-heading {
  min-height: 0 !important;
  height: 82px !important;
  margin-bottom: 8px !important;
  padding: 0 !important;
  align-items: center !important;
  overflow: visible !important;
}

#showAllTasksBtn {
  margin-left: auto;
  flex: 0 0 auto;
  align-self: center;
}

/* 新規追加画面：大分類3ボタンは隠し、種類を主役にする */
#entryForm .type-switch {
  display: none !important;
}

#entryForm .input-warning {
  margin-top: 18px;
}

/* 新規追加画面：種類をその場で追加 */
.entry-category-inline {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  align-items: end;
}

.entry-category-inline label {
  min-width: 0;
}

.quick-add-button {
  min-height: 46px;
  padding: 10px 13px;
  border-radius: 999px;
  color: #42798a;
  background: linear-gradient(180deg, #ffffff, #eaf7fa);
}

/* ログアウトは下部 */
.logout-footer {
  display: flex;
  justify-content: center;
  margin: 18px 0 0;
}

.footer-logout-button {
  border-radius: 999px;
  color: #5f8792;
  background: rgba(255,255,255,.72);
  box-shadow: 0 8px 18px rgba(72,147,170,.08);
}

/* 小さめスマホ */
@media (max-width: 560px) {
  .site-header {
    width: min(100% - 14px, 1180px) !important;
    padding: 9px 9px !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    gap: 8px !important;
  }

  .site-header .brand {
    gap: 7px !important;
  }

  .site-header .brand-logo {
    width: 48px !important;
    height: 42px !important;
    flex: 0 0 auto !important;
  }

  .site-header .brand small {
    display: none !important;
  }

  .site-header .brand strong {
    font-size: .9rem !important;
    letter-spacing: .02em !important;
    line-height: 1.1 !important;
  }

  .site-header .auth-area {
    gap: 6px !important;
    flex: 0 0 auto !important;
  }

  .header-create-button {
    min-height: 36px !important;
    padding: 7px 10px !important;
    font-size: 0 !important;
    letter-spacing: 0 !important;
  }

  .site-header .user-chip {
    min-width: 36px !important;
    min-height: 36px !important;
    padding: 3px !important;
  }

  .site-header .user-chip img {
    width: 30px !important;
    height: 30px !important;
  }

  #loginGate.login-gate:not([hidden]) {
    margin: 10px auto 34px !important;
  }

  #loginGate .login-panel {
    padding: 26px 20px 30px !important;
  }

  .today-dashboard-heading {
    height: 72px !important;
    min-height: 0 !important;
    margin-bottom: 8px !important;
    padding: 0 !important;
    align-items: center !important;
    flex-direction: row !important;
    overflow: hidden !important;
  }

.today-title-image-only {
  display: block !important;
  width: 100% !important;
  max-width: 620px !important;
  height: auto !important;
  overflow: visible !important;
}

  .today-pencil-image {
    width: 230px !important;
    max-width: 100% !important;
    height: auto !important;
    transform: none !important;
    object-fit: contain !important;
    object-position: left center !important;
  }

  #showAllTasksBtn {
    width: auto !important;
    margin-left: auto !important;
    flex: 0 0 auto !important;
    padding: 8px 10px !important;
    font-size: .76rem !important;
  }

  .entry-category-inline {
    grid-template-columns: 1fr;
  }

  .quick-add-button {
    width: 100%;
  }
}

/* さらに狭いスマホ */
@media (max-width: 360px) {
  .site-header .brand-logo {
    width: 42px !important;
    height: 38px !important;
  }

  .site-header .brand strong {
    font-size: .84rem !important;
  }

  .header-create-button {
    padding: 7px 8px !important;
  }

  .header-create-button::before {
    font-size: .72rem;
  }
}



/* v10: ログイン前トップを画像ロゴにして、文字の巨大化をやめる */
#loginGate .login-title-logo {
  display: block !important;
  width: min(330px, 84%) !important;
  height: auto !important;
  margin: 0 auto 16px !important;
  object-fit: contain !important;
}

#loginGate .login-lead {
  margin: 14px auto 18px !important;
  color: var(--muted) !important;
  line-height: 1.8 !important;
  font-size: .95rem !important;
}

#loginGate h1 {
  display: none !important;
}

/* 古いスマホ：ログイン前ヘッダーに文字を詰め込まない */
@media (max-width: 390px) {
  .site-header {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 8px !important;
  }

  .site-header .brand span {
    display: none !important;
  }

  .site-header .brand-logo {
    width: 56px !important;
    height: 46px !important;
  }

  .site-header .primary-button {
    padding: 8px 10px !important;
    font-size: .72rem !important;
  }

  #loginGate .login-panel {
    padding: 24px 18px 28px !important;
    border-radius: 26px !important;
  }

  #loginGate .login-title-logo {
    width: min(245px, 88%) !important;
    margin-bottom: 12px !important;
  }

  #loginGate .login-lead {
    font-size: .86rem !important;
    line-height: 1.7 !important;
  }
}

/* 新しく追加：古いスマホで「＋種類」を左寄せ */
@media (max-width: 560px) {
  .entry-category-inline {
    display: grid !important;
    grid-template-columns: 1fr !important;
    justify-items: start !important;
    gap: 8px !important;
  }

  .entry-category-inline label {
    width: 100% !important;
  }

  .entry-category-inline .quick-add-button {
    justify-self: start !important;
    width: auto !important;
    min-width: 0 !important;
    text-align: left !important;
  }
}
/* ログイン前トップ：説明イラスト */
.login-hero-image {
  display: block;
  width: min(680px, 100%);
  height: auto;
  margin: 0 auto 18px;
  border-radius: 24px;
}

#loginGate .login-panel {
  width: min(760px, calc(100% - 24px));
}

@media (max-width: 560px) {
  .login-hero-image {
    width: 100%;
    margin-bottom: 14px;
    border-radius: 18px;
  }

  #loginGate .login-panel {
    padding: 18px 14px 24px !important;
  }
}
.site-footer {
  width: min(1180px, calc(100% - 32px));
  margin: 24px auto 42px;
  padding: 18px 20px;
  text-align: center;
  color: var(--muted);
  font-size: .82rem;
}

.site-footer p {
  margin: 6px 0 0;
}

.site-footer a {
  color: var(--primary-dark);
  font-weight: 700;
  text-decoration: none;
}

.site-footer a:hover {
  text-decoration: underline;
}

.footer-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px 16px;
  margin-top: 10px;
}

@media (max-width: 560px) {
  .site-footer {
    margin: 20px auto 36px;
    padding: 16px 12px;
    font-size: .78rem;
  }

  .footer-links {
    gap: 8px 12px;
  }
}
/* スクロールバーを目立たせない */
html {
  scrollbar-color: rgba(115, 80, 132, .22) transparent;
  scrollbar-width: thin;
}

/* Chrome / Edge / Safari 用 */
::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

::-webkit-scrollbar-track {
  background: transparent;
}

::-webkit-scrollbar-thumb {
  background: rgba(115, 80, 132, .18);
  border-radius: 999px;
  border: 3px solid transparent;
  background-clip: padding-box;
}

::-webkit-scrollbar-thumb:hover {
  background: rgba(115, 80, 132, .28);
  border: 3px solid transparent;
  background-clip: padding-box;
}
/* =========================================================
   これから3か月の予定びん
   ========================================================= */
.month-jars-section {
  margin: 0 0 18px;
  padding: 24px;
  overflow: hidden;
  border: 1px solid rgba(116,190,210,.2);
  border-radius: 32px;
  background:
    radial-gradient(circle at 8% 0%, rgba(255,255,255,.98), transparent 17rem),
    radial-gradient(circle at 92% 18%, rgba(255,240,177,.28), transparent 14rem),
    linear-gradient(145deg, rgba(245,253,255,.98), rgba(255,250,247,.96));
  box-shadow: 0 18px 42px rgba(72,147,170,.13);
}

.month-jars-heading {
  margin-bottom: 18px;
}

.month-jars-heading h2 {
  margin: 0;
  color: #338bad;
  font-size: clamp(1.35rem, 3vw, 1.9rem);
  letter-spacing: .02em;
}

.month-jars-heading p:last-child {
  margin: 8px 0 0;
  color: #71858c;
  line-height: 1.7;
  font-size: .86rem;
}

.month-jars-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
}

.month-jar-card {
  position: relative;
  min-width: 0;
  padding: 14px 14px 16px;
  border: 1px solid rgba(255,255,255,.9);
  border-radius: 28px;
  text-align: center;
  background: rgba(255,255,255,.56);
  box-shadow:
    0 12px 28px rgba(74,143,163,.1),
    inset 0 1px 0 rgba(255,255,255,.92);
}

.month-jar-card.is-current {
  background:
    radial-gradient(circle at 50% 8%, rgba(140,226,239,.22), transparent 9rem),
    rgba(255,255,255,.72);
  box-shadow:
    0 16px 34px rgba(60,169,196,.18),
    0 0 0 2px rgba(92,194,218,.16),
    inset 0 1px 0 rgba(255,255,255,.95);
}

.month-jar-label {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 5px;
  margin-bottom: 10px;
  color: #3a6f7d;
}

.month-jar-label strong {
  font-size: 1.45rem;
  line-height: 1;
}

.month-jar-label small {
  color: #82969d;
  font-weight: 700;
}

.month-jar-visual {
  position: relative;
  width: min(100%, 220px);
  aspect-ratio: 4 / 5;
  margin: 0 auto;
}

.month-jar-lid {
  position: absolute;
  z-index: 4;
  top: 1%;
  left: 19%;
  width: 62%;
  height: 15%;
  border: 2px solid rgba(66,106,118,.28);
  border-radius: 45% 45% 34% 34% / 50% 50% 35% 35%;
  box-shadow:
    inset 0 3px 0 rgba(255,255,255,.62),
    0 5px 10px rgba(55,108,125,.12);
}

.month-jar-lid::after {
  content: "";
  position: absolute;
  left: -2%;
  right: -2%;
  bottom: -18%;
  height: 38%;
  border: 2px solid rgba(66,106,118,.24);
  border-radius: 999px;
  background: inherit;
  filter: brightness(.96);
}

.month-jar-card:nth-child(1) .month-jar-lid {
  background: linear-gradient(180deg, #7ed5e6, #52b5cf);
}

.month-jar-card:nth-child(2) .month-jar-lid {
  background: linear-gradient(180deg, #ffb9cf, #ef8caf);
}

.month-jar-card:nth-child(3) .month-jar-lid {
  background: linear-gradient(180deg, #c8b6f4, #a187df);
}

.month-jar-glass {
  position: absolute;
  z-index: 2;
  left: 9%;
  right: 9%;
  top: 13%;
  bottom: 3%;
  overflow: hidden;
  border: 3px solid rgba(72,119,132,.32);
  border-radius: 28% 28% 23% 23% / 17% 17% 12% 12%;
  background:
    linear-gradient(90deg, rgba(255,255,255,.68), rgba(221,247,252,.2) 20%, rgba(255,255,255,.12) 70%, rgba(255,255,255,.58)),
    rgba(228,248,252,.18);
  box-shadow:
    inset 11px 0 18px rgba(255,255,255,.4),
    inset -8px 0 15px rgba(112,184,201,.08),
    inset 0 -10px 18px rgba(86,149,166,.08),
    0 10px 20px rgba(58,132,151,.1);
  backdrop-filter: blur(1px);
}

.month-jar-glass::before {
  content: "";
  position: absolute;
  z-index: 3;
  top: 7%;
  left: 10%;
  width: 11%;
  height: 55%;
  border-radius: 999px;
  transform: rotate(4deg);
  background: linear-gradient(180deg, rgba(255,255,255,.88), rgba(255,255,255,.08));
  opacity: .82;
  pointer-events: none;
}

.month-jar-glass::after {
  content: "";
  position: absolute;
  z-index: 3;
  left: 12%;
  right: 12%;
  bottom: 2%;
  height: 5%;
  border-radius: 50%;
  background: rgba(67,129,145,.1);
  filter: blur(2px);
  pointer-events: none;
}

.month-jar-particles {
  position: absolute;
  z-index: 2;
  inset: 12% 8% 5%;
}

.month-jar-particle {
  position: absolute;
  display: block;
  width: var(--particle-size);
  height: var(--particle-size);
  left: var(--particle-left);
  bottom: var(--particle-bottom);
  border-radius: 50%;
  transform: translateX(-50%);
  background:
    radial-gradient(circle at 29% 24%, rgba(255,255,255,.96) 0 9%, rgba(255,255,255,.6) 10% 19%, transparent 20%),
    radial-gradient(circle at 66% 72%, rgba(255,255,255,.18), transparent 42%),
    linear-gradient(145deg, color-mix(in srgb, var(--particle-color) 78%, white), var(--particle-color));
  border: 1px solid rgba(255,255,255,.84);
  box-shadow:
    inset 3px 4px 5px rgba(255,255,255,.48),
    inset -3px -4px 7px rgba(65,71,112,.14),
    0 4px 8px rgba(60,107,126,.2);
  filter: saturate(1.08);
}

.month-jar-particle.is-completed {
  opacity: .28;
  filter: saturate(.65);
}

.month-jar-empty {
  position: absolute;
  z-index: 2;
  left: 50%;
  bottom: 17%;
  width: 80%;
  transform: translateX(-50%);
  color: #8ba0a7;
  font-size: .78rem;
  line-height: 1.5;
}

.month-jar-count {
  margin: 8px 0 0;
  color: #557984;
  font-size: .82rem;
  font-weight: 750;
}

.month-jar-count strong {
  margin-right: 2px;
  color: #2f8ca8;
  font-size: 1.2rem;
}

.month-jar-note {
  display: block;
  min-height: 1.3em;
  margin-top: 3px;
  color: #91a1a6;
  font-size: .7rem;
}

@media (max-width: 760px) {
  .month-jars-section {
    padding: 19px 14px;
    border-radius: 25px;
  }

  .month-jars-grid {
    gap: 9px;
  }

  .month-jar-card {
    padding: 10px 6px 13px;
    border-radius: 21px;
  }

  .month-jar-label {
    gap: 2px;
  }

  .month-jar-label strong {
    font-size: 1.12rem;
  }

  .month-jar-label small {
    font-size: .63rem;
  }

  .month-jar-count {
    font-size: .7rem;
  }

  .month-jar-count strong {
    font-size: 1rem;
  }
}

@media (max-width: 420px) {
  .month-jars-grid {
    gap: 6px;
  }

  .month-jar-card {
    padding-inline: 3px;
  }

  .month-jar-note {
    font-size: .61rem;
  }
}
/* =========================================================
   予定びん：ミニカレンダーと拡大カレンダー
   ========================================================= */
.month-jars-heading {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
  gap: 18px;
}

.month-jars-heading-copy {
  min-width: 0;
}

.month-jars-heading-copy p:last-child {
  max-width: 34rem;
}

.mini-calendar-box {
  display: flex;
  align-items: center;
  gap: 7px;
  flex: 0 0 auto;
}

.mini-calendar-arrow {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 1px solid rgba(96,172,194,.24);
  border-radius: 50%;
  color: #438194;
  font-weight: 900;
  background: rgba(255,255,255,.82);
  box-shadow:
    0 7px 15px rgba(73,151,176,.1),
    inset 0 1px 0 rgba(255,255,255,.92);
}

.mini-calendar-arrow:hover {
  transform: translateY(-1px);
  filter: brightness(1.02);
}

.mini-calendar-card {
  position: relative;
  width: 82px;
  min-height: 88px;
  padding: 20px 8px 8px;
  overflow: hidden;
  border: 1px solid rgba(102,178,200,.25);
  border-radius: 16px;
  color: #386f7f;
  text-align: center;
  background:
    linear-gradient(180deg, #65c7de 0 18px, rgba(255,255,255,.94) 18px 100%);
  box-shadow:
    0 10px 22px rgba(65,145,169,.16),
    inset 0 1px 0 rgba(255,255,255,.92);
  transform: none;
  transition: transform .18s ease, box-shadow .18s ease;
}

.mini-calendar-card::before,
.mini-calendar-card::after {
  content: "";
  position: absolute;
  top: 5px;
  width: 6px;
  height: 11px;
  border-radius: 999px;
  background: rgba(255,255,255,.88);
  box-shadow: 0 1px 2px rgba(35,101,121,.14);
}

.mini-calendar-card::before {
  left: 18px;
}

.mini-calendar-card::after {
  right: 18px;
}

.mini-calendar-card:hover {
  transform: translateY(-2px) scale(1.02);
  box-shadow: 0 14px 26px rgba(65,145,169,.2);
}

.mini-calendar-year,
.mini-calendar-card small {
  display: block;
  color: #76929a;
  font-size: .58rem;
  font-weight: 800;
  letter-spacing: .08em;
}

.mini-calendar-month {
  display: block;
  margin: 3px 0 1px;
  color: #308ca7;
  font-size: 1.65rem;
  line-height: 1;
}

.mini-calendar-dialog {
  width: min(680px, calc(100% - 24px));
  padding: 0;
  overflow: visible;
  border: 0;
  border-radius: 30px;
  background: transparent;
  box-shadow: none;
}

.mini-calendar-dialog[open] {
  animation: calendar-dialog-backdrop-in .2s ease both;
}

.mini-calendar-dialog[open] .expanded-calendar {
  animation: calendar-pop-bounce .42s cubic-bezier(.2,.85,.25,1.22) both;
}

@keyframes calendar-pop-bounce {
  0% {
    opacity: 0;
    transform: scale(.72) translateY(18px);
  }
  68% {
    opacity: 1;
    transform: scale(1.055) translateY(-3px);
  }
  84% {
    transform: scale(.975) translateY(1px);
  }
  100% {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

@keyframes calendar-dialog-backdrop-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

.expanded-calendar {
  position: relative;
  padding: 25px;
  border: 1px solid rgba(255,255,255,.88);
  border-radius: 30px;
  background:
    radial-gradient(circle at 8% 0%, rgba(255,255,255,.98), transparent 15rem),
    linear-gradient(145deg, #f5fdff, #fffaf5);
  box-shadow: 0 32px 90px rgba(38,93,111,.28);
}

.expanded-calendar-header {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 12px;
  margin-bottom: 18px;
}

.expanded-calendar-header > div {
  text-align: center;
}

.expanded-calendar-header h2 {
  margin: 0;
  color: #338bad;
  font-size: clamp(1.35rem, 5vw, 2rem);
}

.expanded-calendar-close {
  margin-left: 2px;
}

.calendar-weekdays,
.expanded-calendar-grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 7px;
}

.calendar-weekdays {
  margin-bottom: 7px;
}

.calendar-weekdays span {
  color: #759099;
  text-align: center;
  font-size: .75rem;
  font-weight: 800;
}

.calendar-weekdays span:first-child {
  color: #d27688;
}

.calendar-weekdays span:last-child {
  color: #5c8fbe;
}

.calendar-day {
  position: relative;
  min-height: 68px;
  padding: 8px 6px 20px;
  border: 1px solid rgba(106,174,194,.16);
  border-radius: 15px;
  color: #496a74;
  text-align: left;
  background: rgba(255,255,255,.72);
}

.calendar-day.is-outside {
  opacity: .28;
}

.calendar-day.is-today {
  box-shadow:
    0 0 0 2px #59bdd5,
    0 8px 16px rgba(72,167,193,.15);
  background: rgba(238,252,255,.94);
}

.calendar-day-number {
  font-size: .82rem;
  font-weight: 850;
}

.calendar-day-particles {
  position: absolute;
  left: 6px;
  right: 6px;
  bottom: 7px;
  display: flex;
  flex-wrap: wrap;
  gap: 3px;
  align-items: center;
}

.calendar-day-particle {
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background:
    radial-gradient(circle at 30% 25%, rgba(255,255,255,.95) 0 18%, transparent 20%),
    var(--day-particle-color);
  box-shadow: 0 2px 4px rgba(54,111,130,.16);
}

.calendar-day-particle.is-completed {
  opacity: .3;
}

.calendar-day-more {
  color: #718a92;
  font-size: .62rem;
  font-weight: 800;
}

.expanded-calendar-legend {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 13px;
  margin-top: 17px;
  color: #74898f;
  font-size: .72rem;
}

.expanded-calendar-legend span {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.legend-dot,
.legend-ring {
  width: 10px;
  height: 10px;
  display: inline-block;
  border-radius: 50%;
}

.legend-dot-open {
  background: #7f83df;
}

.legend-dot-done {
  opacity: .32;
  background: #7f83df;
}

.legend-ring {
  border: 2px solid #59bdd5;
  background: transparent;
}

@media (max-width: 640px) {
  .month-jars-heading {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 9px;
  }

  .month-jars-heading-copy p:last-child {
    max-width: 13rem;
    font-size: .76rem;
  }

  .mini-calendar-box {
    align-self: end;
    gap: 4px;
  }

  .mini-calendar-arrow {
    width: 28px;
    height: 28px;
    font-size: .78rem;
  }

  .mini-calendar-card {
    width: 66px;
    min-height: 75px;
    padding-top: 18px;
    border-radius: 14px;
  }

  .mini-calendar-month {
    font-size: 1.35rem;
  }

  .expanded-calendar {
    padding: 17px 12px;
    border-radius: 24px;
  }

  .expanded-calendar-header {
    grid-template-columns: auto minmax(0, 1fr) auto auto;
    gap: 6px;
  }

  .calendar-weekdays,
  .expanded-calendar-grid {
    gap: 4px;
  }

  .calendar-day {
    min-height: 52px;
    padding: 6px 4px 18px;
    border-radius: 11px;
  }

  .calendar-day-number {
    font-size: .7rem;
  }

  .calendar-day-particle {
    width: 8px;
    height: 8px;
  }
}

@media (max-width: 390px) {
  .month-jars-heading-copy p:last-child {
    max-width: 9.5rem;
  }

  .mini-calendar-box {
    gap: 2px;
  }

  .mini-calendar-arrow {
    display: grid;
    width: 25px;
    height: 25px;
    font-size: .7rem;
  }

  .mini-calendar-card {
    width: 58px;
    min-height: 70px;
    padding-inline: 5px;
  }

  .mini-calendar-month {
    font-size: 1.2rem;
  }
}
/* 予定びん：飴玉サイズ切り替え */
.month-jars-controls {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  width: 100%;
  margin-top: 14px;
  padding-right: 2px;
}

.jar-size-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-height: 38px;
  padding: 8px 14px;
  border: 1px solid rgba(104,181,203,.26);
  border-radius: 999px;
  color: #3c7484;
  font-size: .76rem;
  font-weight: 850;
  line-height: 1;
  background:
    radial-gradient(circle at 22% 20%, rgba(255,255,255,.98), transparent 26%),
    linear-gradient(180deg, rgba(255,255,255,.96), rgba(230,249,253,.94));
  box-shadow:
    0 8px 18px rgba(69,151,176,.13),
    inset 0 1px 0 rgba(255,255,255,.98);
  transition: transform .18s ease, box-shadow .18s ease, filter .18s ease;
}

.jar-size-toggle:hover {
  transform: translateY(-1px);
  filter: brightness(1.025);
  box-shadow:
    0 11px 22px rgba(69,151,176,.17),
    inset 0 1px 0 rgba(255,255,255,.98);
}

.jar-size-toggle:active {
  transform: translateY(0) scale(.97);
}

.jar-size-toggle-icon {
  display: inline-grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  font-size: .9rem;
  background: rgba(255,255,255,.78);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.95),
    0 3px 7px rgba(74,143,163,.12);
}

.jar-size-toggle-label {
  white-space: nowrap;
}

.month-jars-section.is-small-particles .month-jar-particle {
  transform: translateX(-50%) scale(.66);
  transform-origin: center bottom;
}

@media (max-width: 560px) {
  .month-jars-controls {
    margin-top: 11px;
    padding-right: 0;
  }

  .jar-size-toggle {
    min-height: 35px;
    padding: 7px 12px;
    font-size: .7rem;
  }

  .jar-size-toggle-icon {
    width: 20px;
    height: 20px;
    font-size: .8rem;
  }
}
/* スマホ：ミニカレンダーの文字切れ調整 */
.mini-calendar-year,
.mini-calendar-card small {
  white-space: nowrap;
  line-height: 1.05;
}

.mini-calendar-card small {
  letter-spacing: .04em;
}

@media (max-width: 640px) {
  .mini-calendar-year,
  .mini-calendar-card small {
    font-size: .5rem;
    letter-spacing: .03em;
  }

  .mini-calendar-card {
    width: 70px;
    min-height: 76px;
    padding: 18px 6px 7px;
  }

  .mini-calendar-card::before {
    left: 15px;
  }

  .mini-calendar-card::after {
    right: 15px;
  }
}

@media (max-width: 390px) {
  .mini-calendar-card {
    width: 64px;
    min-height: 72px;
    padding: 17px 5px 7px;
  }

  .mini-calendar-year,
  .mini-calendar-card small {
    font-size: .46rem;
    letter-spacing: .01em;
  }

  .mini-calendar-card small {
    transform: scale(.94);
    transform-origin: center top;
  }

  .mini-calendar-card::before {
    left: 13px;
  }

  .mini-calendar-card::after {
    right: 13px;
  }
}


/* v18: 誰のものかの隣に種類プルダウン */
.basic-form-grid > .entry-category-inline {
  min-width: 0;
}

.basic-form-grid > .entry-category-inline .quick-add-button {
  align-self: end;
}

.category-setting-row input[readonly] {
  color: var(--primary-dark);
  font-weight: 800;
  background: var(--primary-soft);
}

@media (max-width: 560px) {
  .basic-form-grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
  }

  .basic-form-grid > label.full {
    grid-column: 1 / -1 !important;
  }

  .basic-form-grid > .entry-category-inline {
    grid-template-columns: minmax(0, 1fr) auto !important;
    align-items: end !important;
  }

  .basic-form-grid > .entry-category-inline .quick-add-button {
    width: auto !important;
    padding-inline: 11px !important;
  }
}

@media (max-width: 390px) {
  .basic-form-grid {
    grid-template-columns: 1fr !important;
  }

  .basic-form-grid > label.full,
  .basic-form-grid > .entry-category-inline {
    grid-column: auto !important;
  }
}

/* v24: タスク操作欄を構造から作り直し */
.task-toolbar {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  gap: 10px !important;
  width: 100% !important;
  min-width: 0 !important;
  margin-bottom: 18px !important;
}

.task-toolbar-controls {
  display: grid;
  grid-template-columns: auto auto minmax(105px, 145px) auto auto;
  align-items: stretch;
  gap: 7px;
  width: 100%;
  min-width: 0;
  padding: 5px;
  border-radius: 16px;
  background: #eef9fc;
}

.task-toolbar-controls .tab,
.task-toolbar-controls #personFilter,
.task-toolbar-controls #openPersonSettingsBtn,
.task-toolbar-controls #openCategorySettingsBtn {
  width: 100% !important;
  min-width: 0 !important;
  max-width: none !important;
  min-height: 42px;
  margin: 0 !important;
  box-sizing: border-box;
  white-space: nowrap;
}

.task-toolbar-controls .tab {
  padding: 9px 14px;
}

.task-toolbar-controls #personFilter {
  padding: 8px 30px 8px 11px;
}

.task-toolbar-controls #openPersonSettingsBtn,
.task-toolbar-controls #openCategorySettingsBtn {
  padding: 9px 12px;
}

.task-toolbar-create,
.task-toolbar-create #openCreateBtn {
  width: 100% !important;
  min-width: 0 !important;
}

.task-toolbar-create #openCreateBtn {
  min-height: 48px;
}

@media (max-width: 560px) {
  .workspace {
    padding-left: 9px !important;
    padding-right: 9px !important;
    overflow: hidden !important;
  }

  .task-toolbar-controls {
    grid-template-columns: .78fr .64fr 1.05fr 1.32fr 1.18fr;
    gap: 3px;
    padding: 4px;
    overflow: hidden;
  }

  .task-toolbar-controls .tab,
  .task-toolbar-controls #personFilter,
  .task-toolbar-controls #openPersonSettingsBtn,
  .task-toolbar-controls #openCategorySettingsBtn {
    height: 44px !important;
    min-height: 44px !important;
    padding: 4px 2px !important;
    border-radius: 9px !important;
    font-size: clamp(.56rem, 2.45vw, .69rem) !important;
    line-height: 1.08 !important;
    letter-spacing: -.035em !important;
    text-align: center !important;
  }

  .task-toolbar-controls #personFilter {
    appearance: auto !important;
    -webkit-appearance: menulist !important;
    padding-left: 2px !important;
    padding-right: 2px !important;
    text-align-last: center;
  }

  .task-toolbar-controls #openPersonSettingsBtn,
  .task-toolbar-controls #openCategorySettingsBtn {
    white-space: normal !important;
    overflow-wrap: normal;
  }

  .task-toolbar-create #openCreateBtn {
    min-height: 48px;
    font-size: .82rem;
  }
}

@media (max-width: 370px) {
  .task-toolbar-controls {
    gap: 2px;
    padding: 3px;
  }

  .task-toolbar-controls .tab,
  .task-toolbar-controls #personFilter,
  .task-toolbar-controls #openPersonSettingsBtn,
  .task-toolbar-controls #openCategorySettingsBtn {
    font-size: .54rem !important;
    letter-spacing: -.05em !important;
  }
}


/* v25: タスク操作欄を完全再定義（PC 5列 / スマホ 3列+2列） */
.workspace > .task-toolbar {
  display: block !important;
  width: 100% !important;
  min-width: 0 !important;
  margin: 0 0 18px !important;
}

.workspace > .task-toolbar > .task-toolbar-controls {
  display: grid !important;
  grid-template-columns: auto auto minmax(110px, 150px) auto auto !important;
  align-items: stretch !important;
  gap: 8px !important;
  width: 100% !important;
  min-width: 0 !important;
  padding: 6px !important;
  overflow: visible !important;
  border-radius: 16px !important;
  background: #eef9fc !important;
}

.workspace > .task-toolbar > .task-toolbar-controls > * {
  min-width: 0 !important;
  width: 100% !important;
  margin: 0 !important;
  box-sizing: border-box !important;
}

.workspace > .task-toolbar > .task-toolbar-create {
  display: block !important;
  width: 100% !important;
  margin-top: 10px !important;
}

.workspace > .task-toolbar > .task-toolbar-create > #openCreateBtn {
  display: block !important;
  width: 100% !important;
  min-height: 48px !important;
}

@media (max-width: 560px) {
  .workspace > .task-toolbar > .task-toolbar-controls {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.25fr) !important;
    grid-template-areas:
      "open done person"
      "people settings settings" !important;
    gap: 6px !important;
    padding: 6px !important;
    overflow: hidden !important;
  }

  .workspace > .task-toolbar > .task-toolbar-controls > [data-tab="all"] {
    grid-area: open !important;
  }

  .workspace > .task-toolbar > .task-toolbar-controls > [data-tab="completed"] {
    grid-area: done !important;
  }

  .workspace > .task-toolbar > .task-toolbar-controls > #personFilter {
    grid-area: person !important;
  }

  .workspace > .task-toolbar > .task-toolbar-controls > #openPersonSettingsBtn {
    grid-area: people !important;
  }

  .workspace > .task-toolbar > .task-toolbar-controls > #openCategorySettingsBtn {
    grid-area: settings !important;
  }

  .workspace > .task-toolbar > .task-toolbar-controls > .tab,
  .workspace > .task-toolbar > .task-toolbar-controls > #personFilter,
  .workspace > .task-toolbar > .task-toolbar-controls > #openPersonSettingsBtn,
  .workspace > .task-toolbar > .task-toolbar-controls > #openCategorySettingsBtn {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    min-width: 0 !important;
    min-height: 44px !important;
    padding: 8px 6px !important;
    font-size: .72rem !important;
    line-height: 1.2 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  .workspace > .task-toolbar > .task-toolbar-controls > #personFilter {
    display: block !important;
    text-align: center !important;
    text-align-last: center !important;
    padding-right: 20px !important;
  }
}

/* =========================================================
   GOTHIC EDITION — 黒革の手帳 / 古金 / 葡萄酒色
   機能やレイアウトは変えず、見た目だけを切り替える。
   ========================================================= */
body.theme-gothic {
  --bg: #141116;
  --surface: #211c23;
  --ink: #f1e8da;
  --muted: #b9aa9e;
  --line: rgba(205, 173, 108, .28);
  --primary: #8f2238;
  --primary-dark: #571522;
  --primary-soft: #31232a;
  --danger: #d45b68;
  --warning: #d1a354;
  --success: #7fa68a;
  --memo: #78648f;
  --shadow: 0 24px 70px rgba(0, 0, 0, .48);
  color: var(--ink);
  background:
    radial-gradient(circle at 50% -15%, rgba(117, 28, 48, .30), transparent 34rem),
    repeating-linear-gradient(135deg, rgba(255,255,255,.018) 0 1px, transparent 1px 11px),
    linear-gradient(180deg, #171318 0%, #0f0d11 100%);
}

body.theme-gothic::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  opacity: .22;
  background:
    radial-gradient(ellipse at top, transparent 52%, rgba(0,0,0,.55) 100%),
    repeating-radial-gradient(circle at 0 0, transparent 0 15px, rgba(212,178,105,.035) 16px 17px);
  z-index: -1;
}

body.theme-gothic .site-header {
  border: 1px solid rgba(218, 184, 113, .55);
  background:
    radial-gradient(circle at 85% 0%, rgba(151, 36, 58, .42), transparent 16rem),
    linear-gradient(145deg, #251d24, #100d11 68%);
  box-shadow:
    0 18px 45px rgba(0,0,0,.52),
    inset 0 1px 0 rgba(255,255,255,.06),
    inset 0 0 0 4px rgba(191,151,76,.06);
}

body.theme-gothic .site-header::before,
body.theme-gothic .site-header::after {
  opacity: .22;
  filter: sepia(1) saturate(.6);
}

body.theme-gothic .site-header .brand,
body.theme-gothic .site-header .brand strong {
  color: #f4e4bf;
  text-shadow: 0 2px 10px rgba(0,0,0,.8);
}

body.theme-gothic .site-header .brand small { color: #c8b99c; }
body.theme-gothic .site-header .brand-logo {
  border: 1px solid rgba(218,184,113,.46);
  background: rgba(0,0,0,.28);
  filter: grayscale(.25) sepia(.20) contrast(1.07);
}

body.theme-gothic .site-header .primary-button,
body.theme-gothic .site-header .ghost-button {
  color: #f2dfb5;
  border: 1px solid rgba(218,184,113,.48);
  background: linear-gradient(180deg, #3a2c32, #21191e);
  box-shadow: 0 8px 20px rgba(0,0,0,.38), inset 0 1px 0 rgba(255,255,255,.07);
}

body.theme-gothic .month-jars-section,
body.theme-gothic .today-dashboard,
body.theme-gothic .person-switcher-section,
body.theme-gothic .workspace,
body.theme-gothic .archive-section,
body.theme-gothic .notice,
body.theme-gothic .login-panel {
  border: 1px solid rgba(205,173,108,.34);
  background:
    linear-gradient(90deg, rgba(188,147,76,.05), transparent 15%, transparent 85%, rgba(188,147,76,.05)),
    linear-gradient(180deg, rgba(43,36,42,.97), rgba(24,20,25,.98));
  box-shadow: var(--shadow), inset 0 1px 0 rgba(255,255,255,.04);
}

body.theme-gothic .month-jars-section,
body.theme-gothic .person-switcher-section,
body.theme-gothic .workspace,
body.theme-gothic .archive-section {
  position: relative;
}

body.theme-gothic .month-jars-section::before,
body.theme-gothic .person-switcher-section::before,
body.theme-gothic .workspace::before,
body.theme-gothic .archive-section::before {
  content: "✦";
  position: absolute;
  top: 10px;
  right: 15px;
  color: rgba(220,184,111,.42);
  font-size: .8rem;
}

body.theme-gothic .eyebrow { color: #d7b36b; }
body.theme-gothic h1,
body.theme-gothic h2,
body.theme-gothic h3,
body.theme-gothic strong { letter-spacing: .015em; }

body.theme-gothic .today-task-card,
body.theme-gothic .month-jar-card,
body.theme-gothic .person-switch-button,
body.theme-gothic .item-card {
  border-color: rgba(203,169,99,.28);
  background: linear-gradient(145deg, #2d262c, #1d181d);
  box-shadow: 0 12px 28px rgba(0,0,0,.30), inset 0 1px 0 rgba(255,255,255,.035);
  color: #efe5d5;
}

body.theme-gothic .today-task-card::after {
  background: rgba(218,184,113,.13);
}

body.theme-gothic .today-card-pink { --task-accent: #9e3650; }
body.theme-gothic .today-card-orange { --task-accent: #a56d34; }
body.theme-gothic .today-card-blue { --task-accent: #536b89; }
body.theme-gothic .today-card-mint { --task-accent: #597b69; }

body.theme-gothic .person-switch-button {
  color: #d9cbbb;
  background: linear-gradient(180deg, #302831, #211b22);
}

body.theme-gothic .person-switch-button:nth-child(n) {
  background: linear-gradient(180deg, #302831, #211b22);
}

body.theme-gothic .person-switch-button.is-active {
  color: #fff1ce;
  border-color: rgba(225,190,118,.68);
  background:
    radial-gradient(circle at 20% 15%, rgba(255,255,255,.11) 0 5px, transparent 6px),
    linear-gradient(145deg, #86243b, #4e1422);
  box-shadow: 0 16px 30px rgba(70,8,24,.45), inset 0 1px 0 rgba(255,255,255,.10);
}

body.theme-gothic .person-switch-icon {
  color: #f0d9a8;
  background: rgba(229,195,128,.09);
  border: 1px solid rgba(229,195,128,.16);
}

body.theme-gothic .tabs {
  border: 1px solid rgba(205,173,108,.18);
  background: #171318;
}
body.theme-gothic .tab { color: #aa9a91; }
body.theme-gothic .tab.is-active {
  color: #f3dfb3;
  background: linear-gradient(180deg, #3a2b31, #251c21);
  box-shadow: inset 0 0 0 1px rgba(218,184,113,.22);
}

body.theme-gothic select,
body.theme-gothic input,
body.theme-gothic textarea {
  color: #f1e8da;
  border-color: rgba(205,173,108,.26);
  background: #171318;
}
body.theme-gothic select:focus,
body.theme-gothic input:focus,
body.theme-gothic textarea:focus {
  border-color: rgba(218,184,113,.72);
  box-shadow: 0 0 0 3px rgba(180,133,60,.12);
}

body.theme-gothic .primary-button {
  color: #fff1ce;
  border: 1px solid rgba(218,184,113,.45);
  background: linear-gradient(145deg, #8d263e, #501522);
  box-shadow: 0 10px 24px rgba(72,7,22,.38), inset 0 1px 0 rgba(255,255,255,.08);
}
body.theme-gothic .ghost-button,
body.theme-gothic .small-button,
body.theme-gothic .icon-button {
  color: #e8d4aa;
  border: 1px solid rgba(205,173,108,.24);
  background: #30252b;
}

body.theme-gothic .item-card {
  overflow: hidden;
}
body.theme-gothic .item-card .item-accent { background: #8d263e; }
body.theme-gothic .item-card.subscription .item-accent { background: #8b5e34; }
body.theme-gothic .item-card.memo .item-accent { background: #6e5b83; }
body.theme-gothic .item-card.urgent .item-accent { background: #c18b3f; }
body.theme-gothic .item-card.overdue .item-accent { background: #bd4053; }

body.theme-gothic .type-badge,
body.theme-gothic .person-badge,
body.theme-gothic .status-badge,
body.theme-gothic .category-badge {
  color: #e8d9bd;
  background: rgba(205,173,108,.11);
  border: 1px solid rgba(205,173,108,.13);
}
body.theme-gothic .status-badge { color: #bcd8c5; background: rgba(85,126,98,.18); }
body.theme-gothic .person-badge { color: #e5bdc7; background: rgba(143,34,56,.17); }

body.theme-gothic .item-title { color: #f2e7d8; }
body.theme-gothic .item-next,
body.theme-gothic .item-meta,
body.theme-gothic .date-text,
body.theme-gothic .save-note,
body.theme-gothic .settings-help { color: #b7aaa0; }
body.theme-gothic .days-left { color: #d9b36a; }

body.theme-gothic dialog {
  color: #f0e5d5;
  border: 1px solid rgba(218,184,113,.44);
  background: #211b21;
  box-shadow: 0 38px 110px rgba(0,0,0,.72);
}
body.theme-gothic dialog::backdrop {
  background: rgba(5,4,6,.77);
  backdrop-filter: blur(7px);
}
body.theme-gothic .basic-entry-section,
body.theme-gothic .extra-fields,
body.theme-gothic .document-checklist,
body.theme-gothic .person-setting-row,
body.theme-gothic .category-setting-row {
  border-color: rgba(205,173,108,.24);
  background: linear-gradient(180deg, #2a2329, #1d181d);
}
body.theme-gothic .extra-fields summary {
  color: #ebd5a7;
  background: #30252b;
}
body.theme-gothic .type-switch span {
  color: #b8aaa0;
  border-color: rgba(205,173,108,.22);
  background: #181418;
}
body.theme-gothic .type-switch input:checked + span {
  color: #f1dcae;
  border-color: rgba(218,184,113,.55);
  background: #3a252e;
}

body.theme-gothic .input-warning {
  color: #e8d0a0;
  border-color: rgba(194,143,54,.32);
  background: rgba(126,83,22,.18);
}
body.theme-gothic .sensitive-warning {
  color: #efb5be;
  border-color: rgba(184,55,76,.35);
  background: rgba(112,27,42,.23);
}
body.theme-gothic .notice {
  color: #d5c099;
  background: linear-gradient(180deg, rgba(76,55,28,.48), rgba(40,31,22,.72));
}

body.theme-gothic .month-jar-glass {
  border-color: rgba(221,193,134,.30);
  background: linear-gradient(180deg, rgba(255,255,255,.055), rgba(0,0,0,.14));
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.025);
}
body.theme-gothic .month-jar-lid {
  border-color: rgba(218,184,113,.36);
  background: linear-gradient(180deg, #6f5531, #3e2d19);
}
body.theme-gothic .month-jar-empty { color: #a8998e; }

body.theme-gothic .mini-calendar-card,
body.theme-gothic .mini-calendar-arrow,
body.theme-gothic .jar-size-toggle {
  color: #e9d6ae;
  border-color: rgba(205,173,108,.25);
  background: #2b2329;
}
body.theme-gothic .calendar-day {
  color: #d9ccbd;
  border-color: rgba(205,173,108,.12);
  background: #1b171b;
}
body.theme-gothic .calendar-day.is-today {
  box-shadow: inset 0 0 0 2px rgba(218,184,113,.62);
}

body.theme-gothic .empty-state { color: #aa9d94; }
body.theme-gothic .empty-icon {
  color: #dfbf7e;
  background: rgba(205,173,108,.10);
  border: 1px solid rgba(205,173,108,.18);
}

body.theme-gothic .site-footer,
body.theme-gothic .site-footer a { color: #a99b91; }
body.theme-gothic .site-footer a:hover { color: #e1c58d; }

@media (max-width: 560px) {
  body.theme-gothic .site-header {
    border-radius: 18px;
  }
  body.theme-gothic .workspace,
  body.theme-gothic .today-dashboard,
  body.theme-gothic .person-switcher-section,
  body.theme-gothic .month-jars-section {
    border-radius: 20px;
  }
}


/* ===== Gothic gem jars v2 ===== */
body.theme-gothic .month-jar-card:nth-child(1) .month-jar-lid {
  border-color: rgba(228,228,236,.26);
  background:
    linear-gradient(180deg, #34343a 0%, #17171b 48%, #070709 100%);
  box-shadow:
    inset 0 2px 0 rgba(255,255,255,.16),
    inset 0 -3px 0 rgba(0,0,0,.72),
    0 7px 14px rgba(0,0,0,.38);
}
body.theme-gothic .month-jar-card:nth-child(2) .month-jar-lid {
  border-color: rgba(255,255,255,.28);
  background:
    linear-gradient(180deg, #e1e1e7 0%, #8b8b94 42%, #4b4b52 100%);
  box-shadow:
    inset 0 2px 0 rgba(255,255,255,.78),
    inset 0 -3px 0 rgba(33,33,38,.45),
    0 7px 14px rgba(0,0,0,.28);
}
body.theme-gothic .month-jar-card:nth-child(3) .month-jar-lid {
  border-color: rgba(232,180,194,.27);
  background:
    linear-gradient(180deg, #7b2944 0%, #4d172b 48%, #260b16 100%);
  box-shadow:
    inset 0 2px 0 rgba(255,219,229,.18),
    inset 0 -3px 0 rgba(27,4,12,.62),
    0 7px 14px rgba(0,0,0,.34);
}
body.theme-gothic .month-jar-lid::after {
  border-color: rgba(228,211,177,.22);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.12);
}
body.theme-gothic .month-jar-glass {
  border-color: rgba(205,207,218,.27);
  background:
    linear-gradient(90deg, rgba(255,255,255,.18), rgba(99,86,112,.055) 22%, rgba(255,255,255,.025) 68%, rgba(255,255,255,.12)),
    linear-gradient(180deg, rgba(35,31,39,.42), rgba(8,7,10,.62));
  box-shadow:
    inset 10px 0 18px rgba(255,255,255,.09),
    inset -10px 0 18px rgba(82,49,86,.12),
    inset 0 -13px 20px rgba(0,0,0,.28),
    0 14px 25px rgba(0,0,0,.31);
}
body.theme-gothic .month-jar-glass::after {
  background: rgba(0,0,0,.28);
}
body.theme-gothic .month-jar-particle {
  border-radius: 24% 76% 30% 70% / 70% 28% 72% 30%;
  transform: translateX(-50%) rotate(45deg);
  background:
    linear-gradient(135deg, rgba(255,255,255,.9) 0 7%, transparent 8% 34%, rgba(255,255,255,.18) 35% 42%, transparent 43%),
    linear-gradient(315deg, rgba(0,0,0,.42), transparent 46%),
    linear-gradient(145deg, color-mix(in srgb, var(--particle-color) 70%, white), var(--particle-color) 56%, color-mix(in srgb, var(--particle-color) 70%, black));
  border: 1px solid rgba(235,229,239,.5);
  box-shadow:
    inset 2px 2px 3px rgba(255,255,255,.42),
    inset -3px -4px 6px rgba(0,0,0,.42),
    0 4px 9px rgba(0,0,0,.38),
    0 0 8px color-mix(in srgb, var(--particle-color) 36%, transparent);
  filter: saturate(.9) contrast(1.08);
}
body.theme-gothic .month-jar-particle:nth-child(3n + 2) {
  border-radius: 50% 50% 18% 50%;
  transform: translateX(-50%) rotate(45deg) scale(.92);
}
body.theme-gothic .month-jar-particle:nth-child(3n + 3) {
  clip-path: polygon(50% 0, 88% 23%, 100% 62%, 72% 100%, 28% 100%, 0 62%, 12% 23%);
  border-radius: 16%;
  transform: translateX(-50%) rotate(10deg) scale(.9);
}
body.theme-gothic .month-jar-particle.is-completed {
  opacity: .24;
  filter: grayscale(.55) saturate(.4);
}
body.theme-gothic .month-jars-section.is-small-particles .month-jar-particle {
  transform: translateX(-50%) rotate(45deg) scale(.66);
}
body.theme-gothic .month-jars-section.is-small-particles .month-jar-particle:nth-child(3n + 2) {
  transform: translateX(-50%) rotate(45deg) scale(.60);
}
body.theme-gothic .month-jars-section.is-small-particles .month-jar-particle:nth-child(3n + 3) {
  transform: translateX(-50%) rotate(10deg) scale(.59);
}
body.theme-gothic .calendar-day-particle {
  border-radius: 2px;
  transform: rotate(45deg);
  background:
    linear-gradient(135deg, rgba(255,255,255,.78), transparent 36%),
    var(--day-particle-color);
  border: 1px solid rgba(255,255,255,.34);
  box-shadow: 0 0 6px color-mix(in srgb, var(--day-particle-color) 40%, transparent);
}
body.theme-gothic .jar-size-toggle-icon {
  color: #d9c5ef;
  border: 1px solid rgba(209,186,228,.23);
  background: radial-gradient(circle at 35% 25%, #6f4a8d, #281b31 72%);
  text-shadow: 0 0 8px rgba(192,142,229,.55);
}
body.theme-gothic .jar-size-toggle {
  color: #e7d6ef;
  border-color: rgba(188,155,205,.28);
  background: linear-gradient(180deg, #302634, #1a151d);
  box-shadow:
    0 8px 18px rgba(0,0,0,.3),
    inset 0 1px 0 rgba(255,255,255,.07);
}

/* Gothic login — v3 */
body.theme-gothic .gothic-login-gate {
  width: min(1220px, calc(100% - 32px));
  min-height: calc(100vh - 118px);
  margin: 18px auto 56px;
  padding: 0;
  display: grid;
  place-items: center;
}

body.theme-gothic .gothic-login-shell {
  width: 100%;
  min-height: 720px;
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(390px, .85fr);
  overflow: hidden;
  border: 1px solid rgba(210, 192, 171, .24);
  border-radius: 34px;
  background: #0d0b0f;
  box-shadow: 0 34px 90px rgba(0,0,0,.54), inset 0 1px 0 rgba(255,255,255,.05);
}

body.theme-gothic .gothic-login-visual {
  position: relative;
  min-height: 720px;
  overflow: hidden;
  background:
    linear-gradient(90deg, rgba(10,8,12,.08), rgba(10,8,12,.16) 55%, rgba(10,8,12,.88) 100%),
    linear-gradient(180deg, rgba(8,7,10,.08), rgba(8,7,10,.22)),
    url("./images/gothic-login-scene.jpg") center center / cover no-repeat;
}

body.theme-gothic .gothic-login-visual::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(circle at 28% 30%, rgba(255,222,164,.10), transparent 28%),
    linear-gradient(180deg, transparent 58%, rgba(8,6,10,.62));
}

body.theme-gothic .gothic-login-moon {
  position: absolute;
  top: 40px;
  left: 44px;
  z-index: 1;
  color: #e8dfd0;
  font-family: Georgia, serif;
  font-size: 2.4rem;
  text-shadow: 0 0 20px rgba(223,213,230,.35);
}

body.theme-gothic .gothic-login-visual-copy {
  position: absolute;
  z-index: 2;
  left: 46px;
  right: 46px;
  bottom: 42px;
  padding: 24px 26px;
  border-left: 2px solid rgba(178,42,67,.74);
  background: linear-gradient(90deg, rgba(12,9,13,.78), rgba(12,9,13,.16));
  backdrop-filter: blur(3px);
}

body.theme-gothic .gothic-login-visual-copy span {
  display: block;
  margin-bottom: 10px;
  color: #bfa9c8;
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .24em;
}

body.theme-gothic .gothic-login-visual-copy strong {
  color: #f0e8dc;
  font-family: "Yu Mincho", "Hiragino Mincho ProN", Georgia, serif;
  font-size: clamp(1.5rem, 3vw, 2.55rem);
  font-weight: 500;
  line-height: 1.55;
  letter-spacing: .04em;
  text-shadow: 0 4px 22px rgba(0,0,0,.7);
}

body.theme-gothic .gothic-login-panel {
  width: auto;
  min-height: 720px;
  margin: 0;
  padding: 58px 52px 44px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  border: 0;
  border-radius: 0;
  background:
    radial-gradient(circle at 50% 10%, rgba(83,43,75,.22), transparent 34%),
    linear-gradient(180deg, rgba(24,20,27,.98), rgba(11,9,13,.99));
  box-shadow: inset 1px 0 0 rgba(214,196,171,.13);
}

body.theme-gothic .gothic-login-panel::before,
body.theme-gothic .gothic-login-panel::after {
  content: "✦";
  color: rgba(205,190,165,.56);
  font-size: .85rem;
  letter-spacing: .8em;
}

body.theme-gothic .gothic-login-panel::before { margin-bottom: 16px; }
body.theme-gothic .gothic-login-panel::after { margin-top: 24px; }

body.theme-gothic .gothic-login-emblem {
  width: min(210px, 50vw);
  height: 176px;
  margin: 0 auto 16px;
  object-fit: contain;
  filter: drop-shadow(0 18px 26px rgba(0,0,0,.64));
}

body.theme-gothic .gothic-login-panel .eyebrow {
  margin-bottom: 12px;
  color: #b89ebf;
  letter-spacing: .22em;
}

body.theme-gothic .gothic-login-panel h1 {
  margin: 0;
  color: #efe5d8;
  font-family: "Yu Mincho", "Hiragino Mincho ProN", Georgia, serif;
  font-size: clamp(2rem, 4vw, 3.4rem);
  font-weight: 500;
  letter-spacing: .08em;
  text-shadow: 0 0 24px rgba(173,142,181,.18);
}

body.theme-gothic .gothic-login-subtitle {
  margin: 12px 0 0 !important;
  color: #c8b8c5 !important;
  font-family: "Yu Mincho", "Hiragino Mincho ProN", serif;
  font-size: .98rem;
  letter-spacing: .08em;
}

body.theme-gothic .gothic-login-divider {
  width: min(280px, 82%);
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 12px;
  margin: 24px 0 12px;
  color: #b89ebf;
}

body.theme-gothic .gothic-login-divider::before,
body.theme-gothic .gothic-login-divider::after {
  content: "";
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(196,177,198,.45));
}
body.theme-gothic .gothic-login-divider::after {
  background: linear-gradient(90deg, rgba(196,177,198,.45), transparent);
}

body.theme-gothic .gothic-login-panel .login-lead {
  max-width: 390px;
  margin: 8px auto 24px !important;
  color: #bdb1bd !important;
  line-height: 1.9;
}

body.theme-gothic .gothic-login-button {
  width: min(360px, 100%);
  min-height: 54px;
  border: 1px solid rgba(230,205,215,.26);
  border-radius: 12px;
  color: #fff4f0;
  font-weight: 800;
  letter-spacing: .06em;
  background:
    linear-gradient(180deg, rgba(255,255,255,.07), transparent),
    linear-gradient(135deg, #7d2138, #4b1426 54%, #23121d);
  box-shadow: 0 14px 28px rgba(44,7,19,.45), inset 0 1px 0 rgba(255,255,255,.14);
}

body.theme-gothic .gothic-login-button:hover {
  transform: translateY(-1px);
  filter: brightness(1.08);
}

body.theme-gothic .gothic-login-panel small {
  max-width: 380px;
  margin-top: 18px;
  color: #837984;
  line-height: 1.7;
}

@media (max-width: 820px) {
  body.theme-gothic .gothic-login-shell {
    min-height: 0;
    grid-template-columns: 1fr;
  }
  body.theme-gothic .gothic-login-visual {
    min-height: 310px;
    background-position: center 46%;
  }
  body.theme-gothic .gothic-login-visual-copy {
    left: 22px;
    right: 22px;
    bottom: 20px;
    padding: 16px 18px;
  }
  body.theme-gothic .gothic-login-panel {
    min-height: 0;
    padding: 38px 24px 34px;
  }
  body.theme-gothic .gothic-login-emblem {
    width: 150px;
    height: 126px;
  }
}

@media (max-width: 560px) {
  body.theme-gothic .gothic-login-gate {
    width: min(100% - 18px, 1220px);
    margin-top: 12px;
  }
  body.theme-gothic .gothic-login-shell {
    border-radius: 24px;
  }
  body.theme-gothic .gothic-login-visual {
    min-height: 245px;
  }
  body.theme-gothic .gothic-login-moon {
    top: 22px;
    left: 24px;
    font-size: 1.7rem;
  }
  body.theme-gothic .gothic-login-visual-copy strong {
    font-size: 1.35rem;
  }
  body.theme-gothic .gothic-login-panel {
    padding: 30px 18px 28px;
  }
  body.theme-gothic .gothic-login-panel h1 {
    font-size: 2rem;
  }
  body.theme-gothic .gothic-login-subtitle {
    font-size: .86rem;
  }
}

/* Gothic login polish — v5: remove light gap and use burgundy scrollbars */
html {
  min-height: 100%;
  background: #0f0d11;
  scrollbar-color: #7b2038 #171117;
  scrollbar-width: thin;
}

body.theme-gothic {
  min-height: 100vh;
  background-color: #0f0d11;
  scrollbar-color: #7b2038 #171117;
  scrollbar-width: thin;
}

body.theme-gothic .gothic-login-gate {
  margin-bottom: 0;
  padding-bottom: 56px;
  background: transparent;
}

body.theme-gothic .gothic-login-shell,
body.theme-gothic .gothic-login-panel,
body.theme-gothic .gothic-login-visual {
  background-color: #0d0b0f;
}

body.theme-gothic .site-footer {
  margin-top: 0;
  padding-top: 24px;
  border-top: 1px solid rgba(123, 32, 56, .24);
  background: transparent;
}

/* Chromium / Safari / Edge */
html::-webkit-scrollbar,
body.theme-gothic::-webkit-scrollbar,
body.theme-gothic *::-webkit-scrollbar {
  width: 12px;
  height: 12px;
}

html::-webkit-scrollbar-track,
body.theme-gothic::-webkit-scrollbar-track,
body.theme-gothic *::-webkit-scrollbar-track {
  background: #171117;
}

html::-webkit-scrollbar-thumb,
body.theme-gothic::-webkit-scrollbar-thumb,
body.theme-gothic *::-webkit-scrollbar-thumb {
  border: 3px solid #171117;
  border-radius: 999px;
  background: linear-gradient(180deg, #8f2943, #5b1428);
}

html::-webkit-scrollbar-thumb:hover,
body.theme-gothic::-webkit-scrollbar-thumb:hover,
body.theme-gothic *::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(180deg, #a73450, #721a32);
}

html::-webkit-scrollbar-corner,
body.theme-gothic::-webkit-scrollbar-corner,
body.theme-gothic *::-webkit-scrollbar-corner {
  background: #171117;
}

@media (max-width: 560px) {
  body.theme-gothic .gothic-login-gate {
    padding-bottom: 36px;
  }
}

/* Gothic login v6 — completed illustration integrated */
body.theme-gothic .gothic-login-shell {
  position: relative;
  min-height: min(760px, calc(100vh - 150px));
  grid-template-columns: minmax(0, 1.08fr) minmax(390px, .92fr);
  overflow: hidden;
  border: 1px solid rgba(177, 137, 101, .48);
  border-radius: 28px;
  background:
    linear-gradient(90deg, transparent 0 51%, rgba(8, 6, 9, .18) 51% 100%),
    url("./images/gothic-login-complete.png") center center / cover no-repeat;
  box-shadow: 0 28px 90px rgba(0,0,0,.58);
}

body.theme-gothic .gothic-login-visual {
  min-height: 100%;
  background: transparent !important;
}

body.theme-gothic .gothic-login-visual::after,
body.theme-gothic .gothic-login-moon,
body.theme-gothic .gothic-login-visual-copy {
  display: none !important;
}

body.theme-gothic .gothic-login-panel {
  align-self: center;
  width: calc(100% - 54px);
  max-width: 560px;
  margin: 28px 28px 28px auto;
  padding: 38px 42px;
  border: 1px solid rgba(190, 154, 116, .45);
  border-radius: 24px;
  background: linear-gradient(160deg, rgba(18,14,20,.97), rgba(8,7,10,.97));
  box-shadow: 0 24px 70px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.05);
  backdrop-filter: blur(6px);
}

body.theme-gothic .gothic-login-emblem {
  width: 104px;
  height: 104px;
  object-fit: contain;
  margin-bottom: 12px;
}

body.theme-gothic .gothic-login-button {
  min-height: 54px;
  border: 1px solid rgba(221,192,163,.4);
  background: linear-gradient(135deg, #6f172d, #8d2944 55%, #5a1025);
}

@media (max-width: 820px) {
  body.theme-gothic .gothic-login-shell {
    min-height: auto;
    grid-template-columns: 1fr;
    padding-top: 350px;
    background-position: 29% center;
    background-size: auto 100%;
  }

  body.theme-gothic .gothic-login-visual {
    display: none;
  }

  body.theme-gothic .gothic-login-panel {
    width: calc(100% - 24px);
    max-width: none;
    margin: 0 12px 12px;
    padding: 30px 22px;
    background: rgba(12,9,14,.96);
  }
}

@media (max-width: 560px) {
  body.theme-gothic .gothic-login-shell {
    padding-top: 285px;
    border-radius: 20px;
    background-position: 24% top;
    background-size: auto 520px;
    background-repeat: no-repeat;
    background-color: #0a080c;
  }

  body.theme-gothic .gothic-login-panel {
    margin: 0 8px 8px;
    width: calc(100% - 16px);
    padding: 24px 17px;
    border-radius: 18px;
  }
}


/* Gothic login v7 — clean scene, no duplicate navigation or notebook card */
body.theme-gothic .gothic-login-shell {
  min-height: min(740px, calc(100vh - 150px));
  grid-template-columns: minmax(0, 1.05fr) minmax(390px, .95fr);
  background: #0a080c;
}

body.theme-gothic .gothic-login-visual {
  display: block !important;
  min-height: 100%;
  background:
    linear-gradient(180deg, rgba(7,5,9,.02), rgba(7,5,9,.18)),
    url("./images/gothic-login-scene-clean.png") center center / cover no-repeat !important;
}

body.theme-gothic .gothic-login-panel {
  position: relative;
  z-index: 1;
}

body.theme-gothic .gothic-login-emblem {
  display: none !important;
}

@media (max-width: 820px) {
  body.theme-gothic .gothic-login-shell {
    display: grid;
    grid-template-columns: 1fr;
    padding-top: 0;
    background: #0a080c;
  }

  body.theme-gothic .gothic-login-visual {
    display: block !important;
    min-height: 360px;
    background-position: center 46% !important;
  }

  body.theme-gothic .gothic-login-panel {
    width: calc(100% - 24px);
    margin: 12px;
  }
}

@media (max-width: 560px) {
  body.theme-gothic .gothic-login-visual {
    min-height: 290px;
    background-position: center 45% !important;
  }
}


/* Gothic login v8 — solid overscroll, single card frame, jewel brand */
html,
body.theme-gothic {
  min-height: 100%;
  background-color: #0a080c !important;
}

html {
  overscroll-behavior-y: none;
}

body.theme-gothic {
  margin: 0;
  overscroll-behavior-y: none;
}

body.theme-gothic .gothic-login-gate {
  background: #0a080c !important;
}

body.theme-gothic .gothic-login-shell {
  border: 0 !important;
  outline: 0 !important;
  box-shadow: none !important;
}

body.theme-gothic .gothic-login-panel {
  box-shadow: none !important;
}

body.theme-gothic .brand-gem {
  position: relative;
  width: 58px;
  height: 58px;
  flex: 0 0 58px;
  display: grid;
  place-items: center;
  border-radius: 18px;
  border: 1px solid rgba(211,174,108,.56);
  background:
    radial-gradient(circle at 36% 28%, rgba(255,255,255,.72) 0 3px, transparent 4px),
    radial-gradient(circle at 50% 46%, #b889db 0 9%, #6f2f8f 28%, #31133f 58%, #120916 76%),
    linear-gradient(145deg, #241622, #0b080d);
  box-shadow:
    inset 0 0 0 4px rgba(8,6,10,.76),
    inset 0 0 18px rgba(194,121,225,.34),
    0 8px 20px rgba(0,0,0,.34);
  transform: rotate(45deg);
}

body.theme-gothic .brand-gem::before,
body.theme-gothic .brand-gem::after {
  content: "";
  position: absolute;
  inset: 8px;
  border: 1px solid rgba(224,191,130,.48);
  border-radius: 10px;
}

body.theme-gothic .brand-gem::after {
  inset: 14px;
  border-color: rgba(235,215,255,.38);
}

body.theme-gothic .brand-gem-core {
  color: #f3dcff;
  font-size: 18px;
  line-height: 1;
  text-shadow: 0 0 9px rgba(210,148,255,.9);
  transform: rotate(-45deg);
}

@media (max-width: 560px) {
  html,
  body.theme-gothic {
    background: #0a080c !important;
  }

  body.theme-gothic .gothic-login-gate {
    min-height: calc(100svh - 88px);
    padding-bottom: 0;
  }

  body.theme-gothic .gothic-login-shell {
    margin-bottom: 0;
    border-radius: 0 !important;
  }

  body.theme-gothic .gothic-login-panel {
    border: 1px solid rgba(183,145,91,.52) !important;
    box-shadow: none !important;
  }

  body.theme-gothic .brand-gem {
    width: 48px;
    height: 48px;
    flex-basis: 48px;
    border-radius: 15px;
  }
}

/* =========================================================
   Gothic v9 — category add card, task controls, dragon banner
   ========================================================= */
body.theme-gothic .category-add-card {
  border: 1px solid rgba(203,169,99,.28) !important;
  border-style: solid !important;
  color: #d9cbbb !important;
  background: linear-gradient(180deg, #302831, #211b22) !important;
  box-shadow: 0 12px 28px rgba(0,0,0,.30), inset 0 1px 0 rgba(255,255,255,.035) !important;
}

body.theme-gothic .category-add-card:hover {
  border-color: rgba(225,190,118,.56) !important;
  background: linear-gradient(180deg, #3a3038, #271f27) !important;
  transform: translateY(-2px);
}

body.theme-gothic .category-add-card .person-switch-icon {
  color: #ead5a5 !important;
  border: 1px solid rgba(229,195,128,.20) !important;
  background:
    radial-gradient(circle at 40% 32%, rgba(255,255,255,.12), transparent 28%),
    linear-gradient(145deg, rgba(112,39,69,.72), rgba(39,24,38,.92)) !important;
  box-shadow: inset 0 0 0 1px rgba(218,184,113,.08), 0 7px 16px rgba(0,0,0,.24) !important;
}

body.theme-gothic .workspace > .task-toolbar > .task-toolbar-controls {
  border: 1px solid rgba(203,169,99,.25) !important;
  background: linear-gradient(180deg, #211a20, #151116) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.035), 0 10px 24px rgba(0,0,0,.22) !important;
}

body.theme-gothic .workspace > .task-toolbar > .task-toolbar-controls > .tab,
body.theme-gothic .workspace > .task-toolbar > .task-toolbar-controls > #personFilter,
body.theme-gothic .workspace > .task-toolbar > .task-toolbar-controls > #openPersonSettingsBtn,
body.theme-gothic .workspace > .task-toolbar > .task-toolbar-controls > #openCategorySettingsBtn {
  color: #cdbfae !important;
  border: 1px solid rgba(203,169,99,.18) !important;
  background: linear-gradient(180deg, #302831, #211b22) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.035) !important;
}

body.theme-gothic .workspace > .task-toolbar > .task-toolbar-controls > .tab.is-active {
  color: #fff0c9 !important;
  border-color: rgba(225,190,118,.52) !important;
  background: linear-gradient(145deg, #792039, #49121f) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 6px 14px rgba(64,9,23,.28) !important;
}

body.theme-gothic .workspace > .task-toolbar > .task-toolbar-create > #openCreateBtn {
  color: #fff2d1 !important;
  border: 1px solid rgba(225,190,118,.52) !important;
  background:
    linear-gradient(90deg, rgba(255,255,255,.035), transparent 30%, rgba(255,255,255,.025)),
    linear-gradient(145deg, #7b213a, #4b1322) !important;
  box-shadow: 0 10px 24px rgba(64,9,23,.34), inset 0 1px 0 rgba(255,255,255,.09) !important;
}

body.theme-gothic .workspace > .task-toolbar > .task-toolbar-create > #openCreateBtn:hover {
  filter: brightness(1.08);
  transform: translateY(-1px);
}

body.theme-gothic .today-title-image-only {
  width: min(100%, 920px) !important;
  height: 132px !important;
  border: 1px solid rgba(203,169,99,.30);
  border-radius: 19px;
  background: #100c11;
  box-shadow: 0 12px 30px rgba(0,0,0,.34), inset 0 1px 0 rgba(255,255,255,.04);
}

body.theme-gothic .today-pencil-image {
  width: 100% !important;
  height: 100% !important;
  max-width: 100% !important;
  transform: none !important;
  object-fit: cover !important;
  object-position: center 37% !important;
  filter: saturate(.92) contrast(1.04) drop-shadow(0 10px 18px rgba(0,0,0,.24)) !important;
}

body.theme-gothic .today-dashboard-heading {
  height: auto !important;
  min-height: 132px !important;
  align-items: stretch !important;
  margin-bottom: 14px !important;
}

@media (max-width: 560px) {
  body.theme-gothic .today-dashboard-heading {
    min-height: 92px !important;
    height: auto !important;
    gap: 8px !important;
  }

  body.theme-gothic .today-title-image-only {
    height: 92px !important;
    border-radius: 15px;
  }

  body.theme-gothic .today-pencil-image {
    object-position: center 34% !important;
  }
}

/* v10: タスク操作欄に残っていた白い外枠を完全に除去 */
body.theme-gothic .workspace > .task-toolbar {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  outline: 0 !important;
  border-radius: 0 !important;
  padding: 0 !important;
}

body.theme-gothic .workspace > .task-toolbar::before,
body.theme-gothic .workspace > .task-toolbar::after {
  content: none !important;
  display: none !important;
}

body.theme-gothic .workspace > .task-toolbar > .task-toolbar-create {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
}

/* ===== Gothic v11: 今日やることの白パーツとヘッダー追加ボタンを統一 ===== */
body.theme-gothic #showAllTasksBtn {
  color: #f2dfbd !important;
  border: 1px solid rgba(218, 180, 108, .46) !important;
  background:
    linear-gradient(180deg, rgba(70, 30, 43, .98), rgba(39, 18, 27, .98)) !important;
  box-shadow:
    0 8px 18px rgba(0, 0, 0, .28),
    inset 0 1px 0 rgba(255, 255, 255, .06) !important;
}

body.theme-gothic #showAllTasksBtn:hover {
  color: #fff0cf !important;
  border-color: rgba(230, 194, 120, .72) !important;
  background:
    linear-gradient(180deg, rgba(104, 35, 55, .98), rgba(53, 20, 32, .98)) !important;
}

body.theme-gothic .task-calendar-slot {
  color: #eed4a0 !important;
  border: 1px solid rgba(214, 176, 103, .42) !important;
  background:
    radial-gradient(circle at 30% 24%, rgba(155, 86, 135, .30), transparent 42%),
    linear-gradient(145deg, #352832, #1b171c) !important;
  box-shadow:
    0 7px 16px rgba(0, 0, 0, .30),
    inset 0 1px 0 rgba(255, 255, 255, .05) !important;
}

body.theme-gothic .task-calendar-slot::before {
  color: #ead19e !important;
  text-shadow: 0 0 10px rgba(166, 99, 161, .34);
}

body.theme-gothic .task-card-copy small {
  color: #f0dfc4 !important;
}

body.theme-gothic .task-card-copy strong {
  color: #fff0cf !important;
}

body.theme-gothic .task-card-copy em {
  color: #d9c7b4 !important;
  border: 1px solid rgba(201, 161, 92, .24) !important;
  background:
    linear-gradient(180deg, rgba(59, 45, 54, .96), rgba(34, 27, 34, .96)) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.035) !important;
}

body.theme-gothic .header-create-button {
  color: #f7e7c7 !important;
  border: 1px solid rgba(225, 188, 113, .58) !important;
  background:
    radial-gradient(circle at 22% 20%, rgba(255,255,255,.09) 0 4px, transparent 5px),
    linear-gradient(135deg, #7a2038, #4a1527 58%, #28121c) !important;
  box-shadow:
    0 10px 24px rgba(55, 5, 20, .38),
    inset 0 1px 0 rgba(255,255,255,.08),
    inset 0 -10px 20px rgba(0,0,0,.12) !important;
  backdrop-filter: blur(12px);
}

body.theme-gothic .header-create-button:hover {
  color: #fff2d3 !important;
  border-color: rgba(239, 205, 136, .78) !important;
  background:
    radial-gradient(circle at 22% 20%, rgba(255,255,255,.12) 0 4px, transparent 5px),
    linear-gradient(135deg, #922a46, #5b1930 58%, #321522) !important;
}

@media (max-width: 560px) {
  body.theme-gothic .task-calendar-slot {
    width: 40px !important;
    height: 40px !important;
    border-radius: 12px !important;
  }

  body.theme-gothic .task-card-copy em {
    padding: 6px 8px !important;
  }
}


/* v12: Googleプロフィールアイコン周りをゴシック配色へ */
body.theme-gothic .site-header .user-chip {
  border: 1px solid rgba(205, 173, 108, .58) !important;
  background:
    radial-gradient(circle at 35% 25%, rgba(151, 36, 58, .34), transparent 48%),
    linear-gradient(145deg, #2b2027, #120f13) !important;
  box-shadow:
    0 8px 20px rgba(0,0,0,.46),
    inset 0 1px 0 rgba(255,255,255,.07),
    0 0 0 3px rgba(91, 38, 76, .22) !important;
}

body.theme-gothic .site-header .user-chip img {
  border: 2px solid rgba(126, 58, 101, .92) !important;
  outline: 1px solid rgba(224, 193, 126, .72);
  outline-offset: 2px;
  box-shadow:
    0 0 0 4px rgba(22, 15, 22, .92),
    0 0 16px rgba(104, 43, 91, .42) !important;
}


/* ===== Gothic v13: 今日やること4カードに宝石画像を配置 ===== */
body.theme-gothic .task-calendar-slot {
  width: 58px !important;
  height: 58px !important;
  min-width: 58px !important;
  overflow: hidden;
  border-radius: 16px !important;
  background-color: #171118 !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: cover !important;
  border: 1px solid rgba(218, 180, 108, .46) !important;
  box-shadow:
    0 8px 18px rgba(0, 0, 0, .34),
    inset 0 0 0 1px rgba(255,255,255,.035) !important;
}

body.theme-gothic .task-calendar-slot::before,
body.theme-gothic .task-calendar-slot::after {
  content: none !important;
  display: none !important;
}

body.theme-gothic .task-calendar-pink {
  background-image: url("./images/crystal.png") !important;
}

body.theme-gothic .task-calendar-orange {
  background-image: url("./images/amethyst.png") !important;
}

body.theme-gothic .task-calendar-blue {
  background-image: url("./images/citrine.png") !important;
}

body.theme-gothic .task-calendar-mint {
  background-image: url("./images/garnet.png") !important;
}

@media (max-width: 560px) {
  body.theme-gothic .task-calendar-slot {
    width: 50px !important;
    height: 50px !important;
    min-width: 50px !important;
    border-radius: 14px !important;
  }
}
/* やることびん：タップ案内 */
.month-jars-controls {
  display: flex;
  align-items: center;
  gap: 10px;
}

.jar-tap-hint {
  display: inline-flex;
  align-items: center;
  margin-right: auto;
  padding: 7px 11px;
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.02em;
  color: rgba(235, 218, 255, 0.88);
  background: rgba(30, 22, 38, 0.66);
  border: 1px solid rgba(195, 155, 235, 0.28);
  box-shadow: 0 8px 22px rgba(20, 12, 28, 0.22);
  white-space: nowrap;
}

/* 予定がある月のびんだけ押せる */
.month-jar-card.is-clickable {
  cursor: pointer;
  transition:
    transform 0.22s ease,
    box-shadow 0.22s ease,
    border-color 0.22s ease,
    filter 0.22s ease;
}

.month-jar-card.is-clickable:hover,
.month-jar-card.is-clickable:focus-visible {
  transform: translateY(-8px) scale(1.02);
  border-color: rgba(213, 179, 255, 0.58);
  box-shadow:
    0 24px 52px rgba(24, 12, 35, 0.28),
    0 0 28px rgba(174, 116, 255, 0.22);
  filter: brightness(1.05);
  outline: none;
}

.month-jar-card.is-clickable:active {
  transform: scale(0.98);
}

.month-jar-card.is-empty {
  cursor: default;
}

/* びんの蓋が少し開く */
.month-jar-card.is-clickable:hover .month-jar-lid,
.month-jar-card.is-clickable:focus-visible .month-jar-lid {
  transform: translateY(-10px) rotate(-3deg);
  filter: brightness(1.15);
}

/* びんの中が光る */
.month-jar-card.is-clickable:hover .month-jar-glass,
.month-jar-card.is-clickable:focus-visible .month-jar-glass {
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.42),
    inset 0 -18px 34px rgba(137, 87, 190, 0.18),
    0 0 26px rgba(178, 116, 255, 0.24);
}

/* 宝石がきらっとする */
.month-jar-card.is-clickable:hover .month-jar-particle,
.month-jar-card.is-clickable:focus-visible .month-jar-particle {
  animation: jarParticleTwinkle 1.4s ease-in-out infinite alternate;
  filter: brightness(1.22);
}

@keyframes jarParticleTwinkle {
  from {
    transform: translateY(0) scale(1);
    opacity: 0.82;
  }
  to {
    transform: translateY(-2px) scale(1.08);
    opacity: 1;
  }
}

/* カレンダー：＋新しく追加ボタン */
.calendar-add-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-left: 10px;
  padding: 7px 12px;
  border-radius: 999px;
  border: 1px solid rgba(195, 155, 235, 0.35);
  background: rgba(36, 26, 48, 0.82);
  color: rgba(245, 236, 255, 0.94);
  font-size: 0.78rem;
  font-weight: 850;
  cursor: pointer;
  box-shadow: 0 8px 22px rgba(24, 12, 35, 0.22);
  transition:
    transform 0.2s ease,
    box-shadow 0.2s ease,
    background 0.2s ease,
    filter 0.2s ease;
}

.calendar-add-button:hover,
.calendar-add-button:focus-visible {
  transform: translateY(-2px);
  background: rgba(54, 36, 72, 0.96);
  box-shadow:
    0 12px 26px rgba(24, 12, 35, 0.28),
    0 0 20px rgba(174, 116, 255, 0.2);
  filter: brightness(1.06);
  outline: none;
}

.calendar-add-button:active {
  transform: scale(0.97);
}

@media (max-width: 640px) {
  .month-jars-controls {
    align-items: stretch;
    flex-direction: column;
  }

  .jar-tap-hint {
    margin-right: 0;
    justify-content: center;
    white-space: normal;
    text-align: center;
  }

  .calendar-add-button {
    margin-left: 6px;
    padding: 6px 9px;
    font-size: 0.72rem;
  }
}
.brand-gem-image {
  width: 42px;
  height: 42px;
  flex: 0 0 auto;
  display: block;
  object-fit: contain;
  border-radius: 14px;
}
/* 左上ブランドを左寄せで自然に並べる */
.site-header .brand {
  justify-content: flex-start;
  text-align: left;
}

.site-header .brand > span {
  text-align: left;
}

.brand-gem-image {
  margin-right: 10px;
}
/* ゴシック版：左上ブランドを左寄せにして、スマホでも説明文を表示 */
.site-header .brand {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 12px;
  text-align: left;
  min-width: 0;
}

.site-header .brand > span {
  display: block;
  min-width: 0;
  text-align: left;
}

.site-header .brand strong,
.site-header .brand small {
  display: block;
  text-align: left;
}

.brand-gem-image {
  width: 42px;
  height: 42px;
  flex: 0 0 auto;
  display: block;
  object-fit: contain;
  border-radius: 14px;
}

/* スマホでも「忘れたら困ることを、頭の外へ。」を消さない */
@media (max-width: 560px) {
  .site-header .brand {
    gap: 8px;
    flex: 1 1 auto;
  }

  .brand-gem-image {
    width: 36px;
    height: 36px;
    border-radius: 12px;
  }

  .site-header .brand strong {
    display: block;
    font-size: 0.92rem;
    line-height: 1.2;
  }

  .site-header .brand small {
    display: block !important;
    margin-top: 2px;
    font-size: 0.62rem;
    line-height: 1.25;
    white-space: normal;
  }

  .site-header .auth-area {
    flex: 0 0 auto;
  }
}
/* gothic：スマホでも左上に「わたしの更新」だけ表示 */
@media (max-width: 560px) {
  .site-header .brand {
    min-width: 0 !important;
    gap: 8px !important;
  }

  .site-header .brand span {
    display: block !important;
    min-width: 86px !important;
    max-width: 110px !important;
    overflow: visible !important;
  }

  .site-header .brand strong {
    display: block !important;
    color: #f8e6c8 !important;
    font-size: .78rem !important;
    line-height: 1.15 !important;
    white-space: nowrap !important;
    overflow: visible !important;
    text-overflow: clip !important;
  }

  .site-header .brand small {
    display: none !important;
  }
}
/* gothic：過去ログ・やることカード内のメロン色をゴシック寄りに統一 */
.archive-empty,
.archive-status,
.empty-state {
  color: #d8c2a2 !important;
  background:
    linear-gradient(180deg, rgba(43, 31, 39, .96), rgba(24, 18, 24, .98)) !important;
  border: 1px solid rgba(183, 139, 82, .42) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 231, 180, .10),
    0 10px 26px rgba(0, 0, 0, .28) !important;
}

/* 過去ログセクション全体 */
.archive-section {
  border-color: rgba(183, 139, 82, .45) !important;
  background:
    radial-gradient(circle at 92% 0%, rgba(126, 78, 118, .18), transparent 15rem),
    linear-gradient(180deg, rgba(37, 30, 36, .96), rgba(18, 14, 19, .98)) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 232, 184, .10),
    0 18px 42px rgba(0, 0, 0, .34) !important;
}

.archive-heading h2 {
  color: #3aa39a !important;
}

.archive-heading p:not(.eyebrow) {
  color: #c6b5aa !important;
}

/* やることカード：中身の白・水色っぽさを抑える */
.compact-item-card,
.archive-item-card {
  border-color: rgba(183, 139, 82, .38) !important;
  background:
    linear-gradient(180deg, rgba(43, 34, 42, .96), rgba(23, 18, 25, .98)) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 232, 184, .08),
    0 12px 28px rgba(0, 0, 0, .30) !important;
}

.item-summary {
  color: #ead8bb !important;
  background: transparent !important;
}

.item-title-row .item-title,
.archive-item-card .item-title {
  color: #ead8bb !important;
}

.item-summary-sub,
.item-next,
.item-meta,
.item-details .item-next,
.item-details .item-meta,
.item-details .item-memo {
  color: #b9aaa8 !important;
}

/* カード詳細の開いた部分 */
.item-details {
  border-top-color: rgba(183, 139, 82, .28) !important;
  background:
    linear-gradient(180deg, rgba(30, 24, 31, .94), rgba(15, 12, 17, .98)) !important;
}

/* バッジ類もゴシック色へ */
.type-badge,
.person-badge,
.status-badge,
.item-summary .type-badge,
.item-summary .person-badge,
.item-summary .status-badge {
  color: #e8d5b5 !important;
  background: rgba(72, 47, 61, .82) !important;
  border: 1px solid rgba(183, 139, 82, .28) !important;
}

/* アイコン枠のソーダ色を消す */
.item-type-icon,
.archive-item-card .item-type-icon {
  color: #e4c27a !important;
  background:
    radial-gradient(circle at 35% 25%, rgba(167, 89, 165, .28), transparent 45%),
    linear-gradient(180deg, rgba(58, 43, 56, .95), rgba(28, 22, 31, .98)) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 231, 180, .12),
    0 8px 18px rgba(0, 0, 0, .28) !important;
}

/* ボタンもゴシック側へ */
.item-details .small-button,
#closeArchiveBtn {
  color: #f3dfbd !important;
  background:
    linear-gradient(180deg, rgba(73, 48, 61, .96), rgba(42, 31, 39, .98)) !important;
  border: 1px solid rgba(183, 139, 82, .38) !important;
}

.item-details .danger-button {
  color: #f0a8bc !important;
  background:
    linear-gradient(180deg, rgba(82, 38, 52, .96), rgba(45, 25, 35, .98)) !important;
}
/* gothic：拡大カレンダーの予定あり宝石を見やすくする */
.calendar-day-particle {
  width: 13px !important;
  height: 13px !important;
  border-radius: 4px !important;
  transform: rotate(45deg) !important;
  background:
    radial-gradient(circle at 28% 24%, rgba(255,255,255,.96) 0 15%, transparent 17%),
    linear-gradient(135deg, #f2d28a 0%, #9b5bd6 48%, #58c9e6 100%) !important;
  border: 1px solid rgba(255, 231, 170, .92) !important;
  box-shadow:
    0 0 0 2px rgba(255, 231, 170, .16),
    0 0 10px rgba(155, 91, 214, .85),
    0 0 18px rgba(88, 201, 230, .35) !important;
}

/* 完了済みは薄くするけど、見失わない程度に */
.calendar-day-particle.is-completed {
  opacity: .55 !important;
  filter: grayscale(.25) brightness(.9) !important;
}

/* スマホでも小さく戻されないようにする */
@media (max-width: 640px) {
  .calendar-day-particle {
    width: 13px !important;
    height: 13px !important;
  }

  .calendar-day-particles {
    gap: 5px !important;
    bottom: 8px !important;
  }
}
/* gothic：拡大カレンダーの「今日」を金色リングで目立たせる */
.calendar-day.is-today {
  border-color: rgba(245, 210, 135, .95) !important;
  box-shadow:
    0 0 0 3px rgba(245, 210, 135, .95),
    0 0 14px rgba(245, 210, 135, .55),
    0 0 24px rgba(150, 88, 190, .32) !important;
  background:
    radial-gradient(circle at 50% 18%, rgba(245, 210, 135, .16), transparent 44%),
    linear-gradient(180deg, rgba(36, 27, 35, .98), rgba(18, 13, 19, .98)) !important;
}

.calendar-day.is-today .calendar-day-number {
  color: #ffe6aa !important;
  text-shadow:
    0 0 8px rgba(245, 210, 135, .75),
    0 0 14px rgba(150, 88, 190, .42) !important;
}
/* gothic：凡例の「今日」リングも金色へ */
.legend-ring {
  border-color: #f5d287 !important;
  box-shadow:
    0 0 8px rgba(245, 210, 135, .65),
    0 0 14px rgba(150, 88, 190, .35) !important;
}
/* gothic：未完了の予定宝石をボルドー系にする */
.calendar-day-particle:not(.is-completed) {
  background:
    radial-gradient(circle at 28% 24%, rgba(255, 245, 230, .95) 0 14%, transparent 16%),
    linear-gradient(135deg, #ffd1b8 0%, #9b1f45 42%, #4b1029 100%) !important;
  border: 1px solid rgba(255, 206, 160, .88) !important;
  box-shadow:
    0 0 0 2px rgba(255, 206, 160, .16),
    0 0 10px rgba(155, 31, 69, .85),
    0 0 18px rgba(95, 18, 48, .48) !important;
}

/* gothic：完了済みは少し静かな色にして区別 */
.calendar-day-particle.is-completed {
  background:
    radial-gradient(circle at 28% 24%, rgba(255,255,255,.75) 0 13%, transparent 16%),
    linear-gradient(135deg, #d8d1e8 0%, #8e87a5 48%, #4b465d 100%) !important;
  border: 1px solid rgba(220, 214, 238, .72) !important;
  opacity: .62 !important;
  filter: grayscale(.25) brightness(.9) !important;
  box-shadow:
    0 0 0 2px rgba(220, 214, 238, .10),
    0 0 8px rgba(150, 140, 180, .45) !important;
}
/* gothic：カレンダー凡例の「未完了の予定」をボルドーにする */
.calendar-legend .legend-dot:not(.is-completed),
.calendar-legend .legend-particle:not(.is-completed),
.calendar-legend .legend-uncompleted,
.calendar-legend .legend-incomplete,
.calendar-legend .legend-dot.pending {
  background:
    radial-gradient(circle at 28% 24%, rgba(255, 245, 230, .95) 0 14%, transparent 16%),
    linear-gradient(135deg, #ffd1b8 0%, #9b1f45 42%, #4b1029 100%) !important;
  border: 1px solid rgba(255, 206, 160, .88) !important;
  box-shadow:
    0 0 0 2px rgba(255, 206, 160, .16),
    0 0 10px rgba(155, 31, 69, .85),
    0 0 18px rgba(95, 18, 48, .48) !important;
}
/* gothic：カレンダー凡例の「未完了の予定」をボルドーの◇宝石にする */
.expanded-calendar-legend .legend-dot-open {
  width: 12px !important;
  height: 12px !important;
  border-radius: 4px !important;
  transform: rotate(45deg) !important;
  background:
    radial-gradient(circle at 28% 24%, rgba(255, 245, 230, .95) 0 14%, transparent 16%),
    linear-gradient(135deg, #ffd1b8 0%, #9b1f45 42%, #4b1029 100%) !important;
  border: 1px solid rgba(255, 206, 160, .88) !important;
  box-shadow:
    0 0 0 2px rgba(255, 206, 160, .16),
    0 0 10px rgba(155, 31, 69, .85),
    0 0 18px rgba(95, 18, 48, .48) !important;
}
.header-memo-button,
.header-link-button {
  border: 1px solid rgba(235, 205, 145, .65);
  background: linear-gradient(135deg, rgba(70, 28, 58, .92), rgba(26, 18, 34, .92));
  color: #f8e6c8;
  border-radius: 999px;
  padding: 9px 14px;
  font-weight: 700;
  letter-spacing: .03em;
  box-shadow:
    0 0 0 1px rgba(255, 230, 170, .08) inset,
    0 8px 24px rgba(0, 0, 0, .22);
  cursor: pointer;
  white-space: nowrap;
}

.header-memo-button:hover,
.header-link-button:hover {
  transform: translateY(-1px);
  box-shadow:
    0 0 0 1px rgba(255, 230, 170, .16) inset,
    0 10px 28px rgba(120, 50, 95, .35);
}

.auth-area {
  display: flex;
  align-items: center;
  gap: 8px;
}
.header-memo-button,
.header-link-button {
  border: 1px solid rgba(235, 205, 145, .65);
  background: linear-gradient(135deg, rgba(70, 28, 58, .92), rgba(26, 18, 34, .92));
  color: #f8e6c8;
  border-radius: 999px;
  padding: 10px 14px;
  font-weight: 700;
  letter-spacing: .03em;
  box-shadow:
    0 0 0 1px rgba(255, 230, 170, .08) inset,
    0 8px 24px rgba(0, 0, 0, .22);
  cursor: pointer;
  white-space: nowrap;
  font-size: .95rem;
}

.header-memo-button:hover,
.header-link-button:hover {
  transform: translateY(-1px);
  box-shadow:
    0 0 0 1px rgba(255, 230, 170, .16) inset,
    0 10px 28px rgba(120, 50, 95, .35);
}

.auth-area {
  display: flex;
  align-items: center;
  gap: 8px;
}
#magicMemoDialog {
  width: min(92vw, 560px);
  max-width: 560px;
}

#magicMemoDialog .dialog-card {
  width: 100%;
  max-height: 86vh;
  overflow-y: auto;
  padding: 20px;
  box-sizing: border-box;
}

#magicMemoDialog .dialog-head {
  gap: 12px;
  align-items: flex-start;
}

#magicMemoDialog .eyebrow {
  font-size: 0.72rem;
}

#magicMemoDialog h2 {
  font-size: clamp(1.35rem, 5vw, 2rem);
  line-height: 1.2;
}

#magicMemoDialog p {
  font-size: 0.9rem;
  line-height: 1.6;
}

#magicMemoDialog label span {
  font-size: 0.9rem;
}

#magicMemoDialog input,
#magicMemoDialog textarea {
  font-size: 1rem;
  box-sizing: border-box;
}

#magicMemoDialog .form-actions {
  flex-wrap: wrap;
}

.magic-memo-list-section {
  margin: 28px auto;
  padding: 20px;
  max-width: 980px;
  border: 1px solid rgba(235, 205, 145, .35);
  border-radius: 24px;
  background: linear-gradient(180deg, rgba(38, 25, 48, .72), rgba(18, 14, 25, .72));
  box-shadow: 0 18px 60px rgba(0, 0, 0, .28);
}

.magic-memo-list-section h2 {
  margin: 0 0 6px;
  color: #f8e6c8;
  font-size: 1.45rem;
}

.magic-memo-list-lead {
  margin: 0 0 16px;
  color: rgba(248, 230, 200, .72);
  font-size: .92rem;
}

.magic-memo-list {
  display: grid;
  gap: 12px;
}

.magic-memo-card {
  padding: 16px;
  border-radius: 18px;
  border: 1px solid rgba(235, 205, 145, .26);
  background: rgba(255, 255, 255, .055);
  color: #f8e6c8;
}

.magic-memo-card h3 {
  margin: 0 0 8px;
  font-size: 1.05rem;
  color: #ffe7ad;
}

.magic-memo-card p {
  margin: 0;
  line-height: 1.7;
  color: rgba(248, 230, 200, .9);
  white-space: normal;
}

.magic-memo-delete-button {
  margin-top: 14px;
  border: 1px solid rgba(255, 170, 170, .38);
  background: linear-gradient(135deg, rgba(90, 34, 48, .78), rgba(32, 18, 28, .86));
  color: #ffd6d6;
  border-radius: 999px;
  padding: 8px 14px;
  font-size: .88rem;
  font-weight: 700;
  letter-spacing: .04em;
  cursor: pointer;
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, .05) inset,
    0 8px 22px rgba(0, 0, 0, .18);
}

.magic-memo-delete-button:hover {
  transform: translateY(-1px);
  background: linear-gradient(135deg, rgba(120, 42, 58, .86), rgba(42, 20, 32, .9));
  box-shadow:
    0 0 0 1px rgba(255, 210, 210, .08) inset,
    0 10px 26px rgba(120, 30, 50, .24);
}
.magic-book-list-section {
  margin: 18px 0 0;
  padding: 16px;
  border: 1px solid rgba(170, 210, 255, .28);
  border-radius: 20px;
  background: linear-gradient(180deg, rgba(24, 30, 54, .72), rgba(16, 14, 28, .72));
  box-shadow: 0 14px 44px rgba(0, 0, 0, .24);
}

.magic-book-list-section h2 {
  margin: 0 0 6px;
  color: #dcecff;
  font-size: 1.25rem;
}

.magic-book-list-lead {
  margin: 0 0 14px;
  color: rgba(220, 236, 255, .72);
  font-size: .9rem;
}

.magic-book-list {
  display: grid;
  gap: 12px;
}

.magic-book-card {
  padding: 15px;
  border-radius: 18px;
  border: 1px solid rgba(170, 210, 255, .25);
  background: rgba(255, 255, 255, .055);
  color: #f3f7ff;
}

.magic-book-card h3 {
  margin: 0 0 8px;
  font-size: 1.05rem;
  color: #dcecff;
}

.magic-book-card a {
  display: inline-block;
  margin: 0 0 8px;
  color: #9fd0ff;
  word-break: break-all;
  text-decoration: none;
  border-bottom: 1px solid rgba(159, 208, 255, .45);
}

.magic-book-card a:hover {
  color: #ffffff;
  border-bottom-color: rgba(255, 255, 255, .8);
}

.magic-book-card p {
  margin: 0;
  line-height: 1.7;
  color: rgba(243, 247, 255, .88);
}

#magicBookDialog .dialog-card {
  padding: 26px;
  box-sizing: border-box;
}

#magicBookDialog label {
  display: grid;
  gap: 8px;
  margin-top: 14px;
}

#magicBookDialog label span {
  display: block;
  color: #f8e6c8;
  font-weight: 700;
  line-height: 1.4;
}

#magicBookDialog input,
#magicBookDialog textarea {
  width: 100%;
  box-sizing: border-box;
}

#magicBookDialog .form-actions {
  margin-top: 18px;
}

.magic-book-card {
  position: relative;
}

.magic-book-delete-button {
  display: block;
  width: fit-content;
  margin: 12px 0 0 auto;
  border: 1px solid rgba(255, 170, 170, .34);
  background: linear-gradient(135deg, rgba(82, 34, 48, .72), rgba(28, 18, 30, .86));
  color: #ffd8d8;
  border-radius: 999px;
  padding: 6px 12px;
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .04em;
  cursor: pointer;
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, .05) inset,
    0 6px 16px rgba(0, 0, 0, .16);
}

.magic-book-delete-button:hover {
  transform: translateY(-1px);
  background: linear-gradient(135deg, rgba(110, 40, 56, .82), rgba(38, 20, 34, .9));
}

#magicBookDialog .form-actions {
  margin-top: 22px;
  padding-top: 10px;
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}

#magicBookDialog .form-actions button {
  cursor: pointer;
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;
}

#magicBookDialog input,
#magicBookDialog textarea {
  caret-color: auto;
}
@media (max-width: 640px) {
  .bar {
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    padding: 12px 14px;
  }

  .brand {
    flex: 1 1 auto;
    min-width: 160px;
  }

  .brand-text {
    max-width: 140px;
  }

  .brand-text strong,
  .brand-text span {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .auth-area {
    width: 100%;
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    flex-wrap: nowrap;
  }

  #headerCreateBtn,
  #headerMemoBtn,
  #headerLinkBtn {
    padding: 9px 12px;
    font-size: 0.9rem;
    white-space: nowrap;
  }

  #userChip {
    flex: 0 0 auto;
  }
}
@media (max-width: 640px) {
  #magicMemoDialog,
  #magicBookDialog {
    width: min(94vw, 560px);
    max-width: 94vw;
    max-height: 82dvh;
    padding: 0;
  }

  #magicMemoDialog .dialog-card,
  #magicBookDialog .dialog-card {
    max-height: 82dvh;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: 22px 18px;
    box-sizing: border-box;
  }

  #magicMemoDialog input,
  #magicMemoDialog textarea,
  #magicBookDialog input,
  #magicBookDialog textarea {
    font-size: 16px;
  }

  #magicMemoDialog .form-actions,
  #magicBookDialog .form-actions {
    position: sticky;
    bottom: 0;
    background: rgba(28, 20, 30, 0.96);
    padding-top: 12px;
    margin-top: 16px;
    z-index: 5;
  }
}

.brand-wax-logo {
  display: block;
  width: 54px;
  height: 54px;
  object-fit: contain;
  flex: 0 0 auto;
  filter: drop-shadow(0 8px 16px rgba(0, 0, 0, .28));
}

@media (max-width: 640px) {
  .brand-wax-logo {
    width: 46px;
    height: 46px;
  }
}

.brand-wax-logo {
  display: block;
  width: 78px;
  height: 78px;
  object-fit: contain;
  flex: 0 0 auto;
  filter: drop-shadow(0 8px 16px rgba(0, 0, 0, .28));
}

.bar {
  overflow: hidden;
}

.brand {
  width: auto !important;
  min-width: 0 !important;
}

.brand::before,
.brand::after {
  display: none !important;
}

@media (max-width: 640px) {
  .brand-wax-logo {
    width: 52px;
    height: 52px;
  }
}
@media (max-width: 640px) {
  .brand img:not(.brand-wax-logo) {
    display: none !important;
  }

  .brand {
    background: none !important;
    box-shadow: none !important;
    overflow: visible !important;
  }

  .brand-wax-logo {
    position: relative;
    z-index: 2;
  }
}
@media (max-width: 640px) {
  .bar {
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
    flex-wrap: nowrap !important;
    padding: 10px 12px !important;
    overflow: hidden !important;
  }

  .brand {
    flex: 0 0 42px !important;
    width: 42px !important;
    min-width: 42px !important;
    max-width: 42px !important;
    padding: 0 !important;
    margin: 0 !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    overflow: visible !important;
  }

  .brand-wax-logo {
    width: 40px !important;
    height: 40px !important;
    object-fit: contain !important;
    filter: drop-shadow(0 5px 10px rgba(0, 0, 0, .35));
  }

  .auth-area {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    width: auto !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 5px !important;
    flex-wrap: nowrap !important;
  }

  #headerCreateBtn,
  #headerMemoBtn,
  #headerLinkBtn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 8px 9px !important;
    font-size: 0.86rem !important;
    white-space: nowrap !important;
    min-width: auto !important;
  }

  #userChip {
    flex: 0 0 38px !important;
    width: 38px !important;
    height: 38px !important;
  }
}

/* =========================================================
   Gothic tone unification — final quick patch
   明るいソーダ/メロン系を、黒・ボルドー・金・白薔薇系へ統一
   ========================================================= */
body.theme-gothic {
  --gothic-bg-1: #171116;
  --gothic-bg-2: #241a21;
  --gothic-bg-3: #30232b;
  --gothic-line: rgba(219, 186, 119, .28);
  --gothic-line-strong: rgba(232, 198, 130, .48);
  --gothic-gold: #e8d1a0;
  --gothic-gold-soft: #c8aa73;
  --gothic-cream: #f1e4cf;
  --gothic-muted: #b8aa9c;
  --gothic-bordeaux: #7c1f38;
  --gothic-bordeaux-dark: #3a101d;
  --gothic-purple: #513247;
  --gothic-shadow: 0 18px 42px rgba(0,0,0,.38), inset 0 1px 0 rgba(255,255,255,.045);
}

/* 全体の明るいパネルをゴシック色へ */
body.theme-gothic .today-dashboard,
body.theme-gothic .category-switcher-section,
body.theme-gothic .person-switcher-section,
body.theme-gothic .month-jars-section,
body.theme-gothic .workspace,
body.theme-gothic .archive-section,
body.theme-gothic .notice {
  color: var(--gothic-cream) !important;
  border: 1px solid var(--gothic-line) !important;
  background:
    radial-gradient(circle at 10% 0%, rgba(132, 35, 62, .18), transparent 18rem),
    radial-gradient(circle at 100% 12%, rgba(218, 184, 113, .08), transparent 16rem),
    linear-gradient(180deg, rgba(43, 34, 42, .98), rgba(18, 14, 18, .99)) !important;
  box-shadow: var(--gothic-shadow) !important;
}

body.theme-gothic .today-dashboard-heading,
body.theme-gothic .month-jars-heading,
body.theme-gothic .archive-heading,
body.theme-gothic .person-switcher-heading {
  color: var(--gothic-cream) !important;
}

body.theme-gothic .today-title-wrap h1,
body.theme-gothic .month-jars-heading h2,
body.theme-gothic .archive-heading h2,
body.theme-gothic .person-switcher-heading h2,
body.theme-gothic #categorySwitcherTitle,
body.theme-gothic #monthJarsTitle,
body.theme-gothic #archiveTitle {
  color: var(--gothic-gold) !important;
  text-shadow: 0 2px 12px rgba(0,0,0,.55) !important;
}

body.theme-gothic .month-jars-heading p,
body.theme-gothic .month-jars-heading-copy p,
body.theme-gothic .archive-heading p,
body.theme-gothic .archive-empty,
body.theme-gothic .archive-status,
body.theme-gothic .month-jar-note,
body.theme-gothic .settings-help,
body.theme-gothic .empty-state p {
  color: var(--gothic-muted) !important;
}

/* 今日まで0件などの4カード：明るい色を全部統一 */
body.theme-gothic .today-task-card,
body.theme-gothic .today-card-pink,
body.theme-gothic .today-card-orange,
body.theme-gothic .today-card-blue,
body.theme-gothic .today-card-mint {
  color: var(--gothic-cream) !important;
  border-color: var(--gothic-line) !important;
  background:
    radial-gradient(circle at 18% 8%, rgba(255,255,255,.06), transparent 5rem),
    linear-gradient(145deg, #34242d, #191318 72%) !important;
  box-shadow: 0 14px 30px rgba(0,0,0,.34), inset 0 1px 0 rgba(255,255,255,.055) !important;
}

body.theme-gothic .today-task-card:hover {
  box-shadow: 0 18px 34px rgba(0,0,0,.42), inset 0 1px 0 rgba(255,255,255,.07) !important;
}

body.theme-gothic .today-task-card::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(90deg, rgba(132,31,56,.22), transparent 42%, rgba(218,184,113,.06));
  opacity: .9;
}

body.theme-gothic .task-card-copy small {
  color: #d8bd88 !important;
}

body.theme-gothic .task-card-copy strong {
  color: #fff0cf !important;
  text-shadow: 0 0 16px rgba(218,184,113,.18) !important;
}

body.theme-gothic .task-card-copy em {
  color: #cdbfaa !important;
  border: 1px solid rgba(218,184,113,.18) !important;
  background: rgba(0,0,0,.20) !important;
}

/* 右の鳥・飾りマークもゴシック色へ */
body.theme-gothic .task-bird-slot,
body.theme-gothic .task-bird-pink,
body.theme-gothic .task-bird-orange,
body.theme-gothic .task-bird-blue,
body.theme-gothic .task-bird-mint {
  opacity: .82 !important;
  background:
    radial-gradient(circle at 35% 25%, rgba(255,255,255,.38), transparent 28%),
    linear-gradient(145deg, #8a2945, #2b1822 72%) !important;
  box-shadow: 0 8px 18px rgba(0,0,0,.28), inset 0 1px 0 rgba(255,255,255,.08) !important;
}

body.theme-gothic .task-decor-heart,
body.theme-gothic .task-decor-star {
  background: linear-gradient(145deg, #e3c58c, #7f5a2a) !important;
  filter: drop-shadow(0 3px 8px rgba(0,0,0,.35));
}

body.theme-gothic .task-decor-bubble-blue,
body.theme-gothic .task-decor-bubble-mint {
  color: rgba(218,184,113,.38) !important;
  border-color: rgba(232,198,130,.62) !important;
  background: rgba(132,31,56,.22) !important;
}

/* カレンダー画像を淡いソーダ色からアンティーク調へ */
body.theme-gothic .task-calendar-slot,
body.theme-gothic .task-calendar-pink,
body.theme-gothic .task-calendar-orange,
body.theme-gothic .task-calendar-blue,
body.theme-gothic .task-calendar-mint {
  border: 1px solid rgba(218,184,113,.22) !important;
  background-color: rgba(18,14,18,.54) !important;
  border-radius: 14px !important;
  filter: sepia(.75) saturate(.58) hue-rotate(330deg) brightness(.82) contrast(1.18) drop-shadow(0 5px 10px rgba(0,0,0,.34)) !important;
}

/* やることびん */
body.theme-gothic .month-jar-card {
  color: var(--gothic-cream) !important;
  border-color: rgba(218,184,113,.24) !important;
  background:
    radial-gradient(circle at 50% 0%, rgba(218,184,113,.08), transparent 8rem),
    linear-gradient(180deg, #30242c, #171217) !important;
}

body.theme-gothic .month-jar-card.is-current {
  border-color: rgba(232,198,130,.58) !important;
  box-shadow: 0 18px 36px rgba(0,0,0,.42), 0 0 0 1px rgba(232,198,130,.18) inset !important;
}

body.theme-gothic .month-jar-label strong,
body.theme-gothic .month-jar-count strong {
  color: #fff0cf !important;
}

body.theme-gothic .month-jar-label small,
body.theme-gothic .month-jar-note,
body.theme-gothic .month-jar-empty {
  color: #b9aa9b !important;
}

body.theme-gothic .month-jar-count {
  color: #d8bd88 !important;
  border-top-color: rgba(218,184,113,.16) !important;
}

body.theme-gothic .month-jar-glass {
  border-color: rgba(232,198,130,.32) !important;
  background:
    linear-gradient(90deg, rgba(255,255,255,.08), transparent 20%, transparent 70%, rgba(255,255,255,.04)),
    linear-gradient(180deg, rgba(255,255,255,.05), rgba(0,0,0,.20)) !important;
}

body.theme-gothic .month-jar-lid,
body.theme-gothic .month-jar-card:nth-child(1) .month-jar-lid,
body.theme-gothic .month-jar-card:nth-child(2) .month-jar-lid,
body.theme-gothic .month-jar-card:nth-child(3) .month-jar-lid {
  border-color: rgba(232,198,130,.42) !important;
  background: linear-gradient(180deg, #b89356, #5b3c21) !important;
}

body.theme-gothic .month-jar-particle {
  background:
    linear-gradient(135deg, rgba(255,255,255,.70), transparent 38%),
    linear-gradient(145deg, #8b2541, #2a1420) !important;
  border-color: rgba(255,255,255,.28) !important;
  box-shadow: 0 0 7px rgba(218,184,113,.22), 0 2px 5px rgba(0,0,0,.28) !important;
}

body.theme-gothic .month-jar-particle:nth-child(3n + 2) {
  background:
    linear-gradient(135deg, rgba(255,255,255,.72), transparent 38%),
    linear-gradient(145deg, #d7b36b, #5c3d1e) !important;
}

body.theme-gothic .month-jar-particle:nth-child(3n + 3) {
  background:
    linear-gradient(135deg, rgba(255,255,255,.70), transparent 38%),
    linear-gradient(145deg, #5e405c, #211321) !important;
}

/* ミニカレンダー・月表示 */
body.theme-gothic .mini-calendar-box,
body.theme-gothic .mini-calendar-card,
body.theme-gothic .mini-calendar-arrow,
body.theme-gothic .jar-size-toggle {
  color: var(--gothic-cream) !important;
}

body.theme-gothic .mini-calendar-card,
body.theme-gothic .mini-calendar-arrow,
body.theme-gothic .jar-size-toggle {
  border-color: rgba(218,184,113,.28) !important;
  background:
    radial-gradient(circle at 30% 15%, rgba(255,255,255,.06), transparent 3rem),
    linear-gradient(180deg, #33242d, #181317) !important;
  box-shadow: 0 8px 20px rgba(0,0,0,.30), inset 0 1px 0 rgba(255,255,255,.05) !important;
}

body.theme-gothic .mini-calendar-year,
body.theme-gothic .mini-calendar-card small {
  color: #bfae98 !important;
}

body.theme-gothic .mini-calendar-month {
  color: #fff0cf !important;
  text-shadow: 0 0 14px rgba(218,184,113,.16) !important;
}

body.theme-gothic .expanded-calendar,
body.theme-gothic .calendar-weekdays,
body.theme-gothic .expanded-calendar-legend {
  color: var(--gothic-muted) !important;
}

body.theme-gothic .calendar-day {
  color: #d9ccbd !important;
  border-color: rgba(218,184,113,.14) !important;
  background: linear-gradient(180deg, #211920, #151116) !important;
}

body.theme-gothic .calendar-day.is-today {
  color: #fff0cf !important;
  border-color: rgba(232,198,130,.55) !important;
  box-shadow: inset 0 0 0 2px rgba(218,184,113,.50), 0 0 18px rgba(132,31,56,.26) !important;
}

/* 下のリスト・過去ログ */
body.theme-gothic .compact-item-card,
body.theme-gothic .archive-item-card,
body.theme-gothic .item-card {
  color: var(--gothic-cream) !important;
  border-color: rgba(218,184,113,.22) !important;
  background: linear-gradient(180deg, #2b2229, #181317) !important;
  box-shadow: 0 10px 24px rgba(0,0,0,.28), inset 0 1px 0 rgba(255,255,255,.04) !important;
}

body.theme-gothic .item-summary,
body.theme-gothic .item-details {
  color: var(--gothic-cream) !important;
  background: transparent !important;
}

body.theme-gothic .item-details {
  border-top-color: rgba(218,184,113,.16) !important;
}

body.theme-gothic .item-title-row .item-title,
body.theme-gothic .archive-item-card .item-title,
body.theme-gothic .item-title {
  color: #f2e4cf !important;
}

body.theme-gothic .item-summary-sub,
body.theme-gothic .item-details .item-next,
body.theme-gothic .item-details .item-meta,
body.theme-gothic .item-details .item-memo {
  color: #b9aa9b !important;
}

body.theme-gothic .item-type-icon {
  color: #e8d1a0 !important;
  border: 1px solid rgba(218,184,113,.20) !important;
  background:
    radial-gradient(circle at 35% 25%, rgba(255,255,255,.10), transparent 32%),
    linear-gradient(145deg, #3a2732, #171217) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.05), 0 7px 16px rgba(0,0,0,.24) !important;
}

body.theme-gothic .archive-year-button {
  color: #dfc99b !important;
  border-color: rgba(218,184,113,.24) !important;
  background: linear-gradient(180deg, #30242c, #191318) !important;
}

body.theme-gothic .archive-year-button:hover,
body.theme-gothic .archive-year-button.is-active {
  color: #fff0cf !important;
  border-color: rgba(232,198,130,.55) !important;
  background: linear-gradient(145deg, #7c1f38, #3a101d) !important;
}

/* 画像バナー：PC/スマホで中途半端に切れないよう固定 */
body.theme-gothic .today-title-image-only {
  display: block !important;
  width: 100% !important;
  max-width: 620px !important;
  height: auto !important;
  overflow: visible !important;
}

body.theme-gothic .today-pencil-image {
  display: block !important;
  width: 620px !important;
  height: 190px !important;
  max-width: 100% !important;
  transform: none !important;
  object-fit: contain !important;
  object-position: center center !important;
  border-radius: 18px !important;
  filter: drop-shadow(0 12px 22px rgba(0,0,0,.35)) !important;
}

@media (max-width: 700px) {
  body.theme-gothic .today-title-image-only,
  body.theme-gothic .today-pencil-image {
    width: 100% !important;
    height: auto !important;
  }
}
/* やることびん：ボルドー系ゴシックに戻す */
body.theme-gothic .month-jar-card:nth-child(1) .month-jar-lid {
  border-color: rgba(228, 228, 236, .26) !important;
  background:
    linear-gradient(180deg, #34343a 0%, #17171b 48%, #070709 100%) !important;
  box-shadow:
    inset 0 2px 0 rgba(255,255,255,.16),
    inset 0 -3px 0 rgba(0,0,0,.72),
    0 7px 14px rgba(0,0,0,.38) !important;
}

body.theme-gothic .month-jar-card:nth-child(2) .month-jar-lid {
  border-color: rgba(255, 255, 255, .28) !important;
  background:
    linear-gradient(180deg, #e1e1e7 0%, #8b8b94 42%, #4b4b52 100%) !important;
  box-shadow:
    inset 0 2px 0 rgba(255,255,255,.78),
    inset 0 -3px 0 rgba(33,33,38,.45),
    0 7px 14px rgba(0,0,0,.28) !important;
}

body.theme-gothic .month-jar-card:nth-child(3) .month-jar-lid {
  border-color: rgba(232, 180, 194, .27) !important;
  background:
    linear-gradient(180deg, #7b2944 0%, #4d172b 48%, #260b16 100%) !important;
  box-shadow:
    inset 0 2px 0 rgba(255,219,229,.18),
    inset 0 -3px 0 rgba(27,4,12,.62),
    0 7px 14px rgba(0,0,0,.34) !important;
}

body.theme-gothic .month-jar-lid::after {
  border-color: rgba(228, 211, 177, .22) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.12) !important;
}

body.theme-gothic .month-jar-glass {
  border-color: rgba(205, 207, 218, .27) !important;
  background:
    linear-gradient(90deg, rgba(255,255,255,.18), rgba(99,86,112,.055) 22%, rgba(255,255,255,.025) 68%, rgba(255,255,255,.12)),
    linear-gradient(180deg, rgba(35,31,39,.42), rgba(8,7,10,.62)) !important;
  box-shadow:
    inset 10px 0 18px rgba(255,255,255,.09),
    inset -10px 0 18px rgba(82,49,86,.12),
    inset 0 -13px 20px rgba(0,0,0,.28),
    0 14px 25px rgba(0,0,0,.31) !important;
}
/* やることびん：中の宝石は元のカラフルさに戻す */
body.theme-gothic .month-jar-particle {
  background:
    linear-gradient(135deg, rgba(255,255,255,.82) 0 8%, transparent 9% 34%, rgba(255,255,255,.58) 35% 44%, transparent 45%),
    linear-gradient(315deg, rgba(0,0,0,.18), transparent 48%),
    linear-gradient(
      145deg,
      color-mix(in srgb, var(--particle-color) 55%, white),
      var(--particle-color) 58%,
      color-mix(in srgb, var(--particle-color) 72%, black)
    ) !important;
  border: 1px solid rgba(255,255,255,.62) !important;
  box-shadow:
    inset 2px 2px 4px rgba(255,255,255,.62),
    inset -3px -4px 6px rgba(0,0,0,.28),
    0 4px 9px rgba(0,0,0,.22),
    0 0 10px color-mix(in srgb, var(--particle-color) 55%, transparent) !important;
  filter: saturate(1.35) contrast(1.08) brightness(1.06) !important;
}

body.theme-gothic .month-jar-particle.is-completed {
  opacity: .38 !important;
  filter: grayscale(.25) saturate(.8) brightness(.92) !important;
}

body.theme-gothic .month-jar-card.is-clickable:hover .month-jar-particle,
body.theme-gothic .month-jar-card.is-clickable:focus-visible .month-jar-particle {
  filter: saturate(1.55) contrast(1.12) brightness(1.22) !important;
}
/* ===== FINAL FIX: やることびんの中の宝石だけ、元のカラフル色を強制復帰 ===== */
body.theme-gothic .month-jars-section .month-jar-card .month-jar-particles .month-jar-particle,
body.theme-gothic .month-jars-section .month-jar-card .month-jar-particles .month-jar-particle:nth-child(3n + 1),
body.theme-gothic .month-jars-section .month-jar-card .month-jar-particles .month-jar-particle:nth-child(3n + 2),
body.theme-gothic .month-jars-section .month-jar-card .month-jar-particles .month-jar-particle:nth-child(3n + 3),
body.theme-gothic .month-jars-section.is-small-particles .month-jar-card .month-jar-particles .month-jar-particle,
body.theme-gothic .month-jars-section.is-small-particles .month-jar-card .month-jar-particles .month-jar-particle:nth-child(3n + 1),
body.theme-gothic .month-jars-section.is-small-particles .month-jar-card .month-jar-particles .month-jar-particle:nth-child(3n + 2),
body.theme-gothic .month-jars-section.is-small-particles .month-jar-card .month-jar-particles .month-jar-particle:nth-child(3n + 3) {
  background:
    linear-gradient(135deg, rgba(255,255,255,.88) 0 8%, transparent 9% 34%, rgba(255,255,255,.58) 35% 44%, transparent 45%),
    linear-gradient(315deg, rgba(0,0,0,.20), transparent 48%),
    linear-gradient(
      145deg,
      color-mix(in srgb, var(--particle-color) 58%, white),
      var(--particle-color) 58%,
      color-mix(in srgb, var(--particle-color) 72%, black)
    ) !important;
  border: 1px solid rgba(255,255,255,.66) !important;
  box-shadow:
    inset 2px 2px 4px rgba(255,255,255,.66),
    inset -3px -4px 6px rgba(0,0,0,.30),
    0 4px 9px rgba(0,0,0,.24),
    0 0 12px color-mix(in srgb, var(--particle-color) 58%, transparent) !important;
  filter: saturate(1.55) contrast(1.10) brightness(1.08) !important;
}
/* やることびん：宝石だけ元の明るい見た目に戻す */
body.theme-gothic .month-jar-particle {
  border-radius: 50% !important;
  transform: translateX(-50%) !important;
  clip-path: none !important;
  background:
    radial-gradient(circle at 29% 24%, rgba(255,255,255,.96) 0 9%, rgba(255,255,255,.6) 10% 19%, transparent 20%),
    radial-gradient(circle at 66% 72%, rgba(255,255,255,.18), transparent 42%),
    linear-gradient(145deg, color-mix(in srgb, var(--particle-color) 78%, white), var(--particle-color)) !important;
  border: 1px solid rgba(255,255,255,.84) !important;
  box-shadow:
    inset 3px 4px 5px rgba(255,255,255,.48),
    inset -3px -4px 7px rgba(65,71,112,.14),
    0 4px 8px rgba(60,107,126,.2) !important;
  filter: saturate(1.08) !important;
}

body.theme-gothic .month-jar-particle:nth-child(3n + 2),
body.theme-gothic .month-jar-particle:nth-child(3n + 3) {
  border-radius: 50% !important;
  transform: translateX(-50%) !important;
  clip-path: none !important;
}

body.theme-gothic .month-jar-particle.is-completed {
  opacity: .28 !important;
  filter: saturate(.65) !important;
}


/* =========================================================
   HARD FIX 2026-06-30
   やることびん：瓶はゴシック、宝石だけカラフルに強制固定
   ※ --particle-color に頼らない。CSSだけで8色を直接指定。
   ========================================================= */

/* まず、宝石の形・光・影を全粒共通で固定 */
body.theme-gothic .month-jars-section .month-jar-particle,
body.theme-gothic .month-jar-particle {
  border-radius: 50% !important;
  clip-path: none !important;
  transform: translateX(-50%) !important;
  border: 1px solid rgba(255,255,255,.88) !important;
  opacity: .98 !important;
  box-shadow:
    inset 3px 4px 5px rgba(255,255,255,.58),
    inset -3px -5px 8px rgba(18,10,28,.26),
    0 4px 9px rgba(0,0,0,.28),
    0 0 12px rgba(255,255,255,.20) !important;
  filter: saturate(1.35) contrast(1.08) brightness(1.08) !important;
}

/* 8色を強制。var(--particle-color) は使わない */
body.theme-gothic .month-jars-section .month-jar-particle:nth-child(8n + 1),
body.theme-gothic .month-jar-particle:nth-child(8n + 1) {
  background:
    radial-gradient(circle at 28% 24%, rgba(255,255,255,.98) 0 9%, rgba(255,255,255,.62) 10% 19%, transparent 20%),
    radial-gradient(circle at 70% 76%, rgba(255,255,255,.25), transparent 42%),
    linear-gradient(145deg, #ffd4e4, #ff6fa5 58%, #9f284d) !important;
}

body.theme-gothic .month-jars-section .month-jar-particle:nth-child(8n + 2),
body.theme-gothic .month-jar-particle:nth-child(8n + 2) {
  background:
    radial-gradient(circle at 28% 24%, rgba(255,255,255,.98) 0 9%, rgba(255,255,255,.62) 10% 19%, transparent 20%),
    radial-gradient(circle at 70% 76%, rgba(255,255,255,.25), transparent 42%),
    linear-gradient(145deg, #ffe1b7, #ffae4f 58%, #9b5518) !important;
}

body.theme-gothic .month-jars-section .month-jar-particle:nth-child(8n + 3),
body.theme-gothic .month-jar-particle:nth-child(8n + 3) {
  background:
    radial-gradient(circle at 28% 24%, rgba(255,255,255,.98) 0 9%, rgba(255,255,255,.62) 10% 19%, transparent 20%),
    radial-gradient(circle at 70% 76%, rgba(255,255,255,.25), transparent 42%),
    linear-gradient(145deg, #fff0a5, #ffd552 58%, #9a7411) !important;
}

body.theme-gothic .month-jars-section .month-jar-particle:nth-child(8n + 4),
body.theme-gothic .month-jar-particle:nth-child(8n + 4) {
  background:
    radial-gradient(circle at 28% 24%, rgba(255,255,255,.98) 0 9%, rgba(255,255,255,.62) 10% 19%, transparent 20%),
    radial-gradient(circle at 70% 76%, rgba(255,255,255,.25), transparent 42%),
    linear-gradient(145deg, #c8fff5, #62dfcf 58%, #197f75) !important;
}

body.theme-gothic .month-jars-section .month-jar-particle:nth-child(8n + 5),
body.theme-gothic .month-jar-particle:nth-child(8n + 5) {
  background:
    radial-gradient(circle at 28% 24%, rgba(255,255,255,.98) 0 9%, rgba(255,255,255,.62) 10% 19%, transparent 20%),
    radial-gradient(circle at 70% 76%, rgba(255,255,255,.25), transparent 42%),
    linear-gradient(145deg, #cfe9ff, #62b8ff 58%, #1d5d9d) !important;
}

body.theme-gothic .month-jars-section .month-jar-particle:nth-child(8n + 6),
body.theme-gothic .month-jar-particle:nth-child(8n + 6) {
  background:
    radial-gradient(circle at 28% 24%, rgba(255,255,255,.98) 0 9%, rgba(255,255,255,.62) 10% 19%, transparent 20%),
    radial-gradient(circle at 70% 76%, rgba(255,255,255,.25), transparent 42%),
    linear-gradient(145deg, #ddd2ff, #a78cff 58%, #5a35a8) !important;
}

body.theme-gothic .month-jars-section .month-jar-particle:nth-child(8n + 7),
body.theme-gothic .month-jar-particle:nth-child(8n + 7) {
  background:
    radial-gradient(circle at 28% 24%, rgba(255,255,255,.98) 0 9%, rgba(255,255,255,.62) 10% 19%, transparent 20%),
    radial-gradient(circle at 70% 76%, rgba(255,255,255,.25), transparent 42%),
    linear-gradient(145deg, #f5c8ff, #df79ff 58%, #8a2da8) !important;
}

body.theme-gothic .month-jars-section .month-jar-particle:nth-child(8n + 8),
body.theme-gothic .month-jar-particle:nth-child(8n + 8) {
  background:
    radial-gradient(circle at 28% 24%, rgba(255,255,255,.98) 0 9%, rgba(255,255,255,.62) 10% 19%, transparent 20%),
    radial-gradient(circle at 70% 76%, rgba(255,255,255,.25), transparent 42%),
    linear-gradient(145deg, #ffd0d5, #ff7180 58%, #9e2e3b) !important;
}

/* 完了済みだけ薄くする */
body.theme-gothic .month-jars-section .month-jar-particle.is-completed,
body.theme-gothic .month-jar-particle.is-completed {
  opacity: .34 !important;
  filter: grayscale(.18) saturate(.85) brightness(.92) !important;
}

/* hoverで少しだけ宝石を光らせる */
body.theme-gothic .month-jar-card.is-clickable:hover .month-jar-particle,
body.theme-gothic .month-jar-card.is-clickable:focus-visible .month-jar-particle {
  filter: saturate(1.65) contrast(1.14) brightness(1.18) !important;
}

.login-info {
  font-size: 11px;
  line-height: 1.5;
  color: #6b7280;
  text-align: right;
  max-width: 260px;
}

.login-info p {
  margin: 0;
}

@media (max-width: 640px) {
  .login-info {
    text-align: left;
    max-width: none;
  }
}
/* 宝石の色を戻す：未完了の予定宝石 */
body.theme-gothic .calendar-day-particle:not(.is-completed) {
  background:
    radial-gradient(circle at 28% 24%, rgba(255,255,255,.96) 0 15%, transparent 17%),
    linear-gradient(135deg, #f2d28a 0%, #9b5bd6 48%, #58c9e6 100%) !important;

  border: 1px solid rgba(255, 231, 170, .92) !important;

  box-shadow:
    0 0 0 2px rgba(255, 231, 170, .16),
    0 0 10px rgba(155, 91, 214, .85),
    0 0 18px rgba(88, 201, 230, .35) !important;

  opacity: 1 !important;
  filter: none !important;
}
/* ===== 今日まで・今週まで・期限あり・完了済みカード：色を戻す ===== */

.today-task-card.today-card-pink {
  color: #a94f6f !important;
  background: linear-gradient(180deg, #fffafd, #fdebf2) !important;
  border-color: rgba(231, 144, 174, .28) !important;
}

.today-task-card.today-card-orange {
  color: #a86520 !important;
  background: linear-gradient(180deg, #fffdf8, #fff1da) !important;
  border-color: rgba(238, 174, 88, .28) !important;
}

.today-task-card.today-card-blue {
  color: #337ca5 !important;
  background: linear-gradient(180deg, #fbfdff, #e9f5fc) !important;
  border-color: rgba(101, 180, 215, .28) !important;
}

.today-task-card.today-card-mint {
  color: #397f70 !important;
  background: linear-gradient(180deg, #fbfffd, #e8f7f1) !important;
  border-color: rgba(114, 195, 170, .28) !important;
}

/* 中の文字色も戻す */
.today-card-pink .task-card-copy small,
.today-card-pink .task-card-copy strong,
.today-card-pink .task-card-copy em {
  color: #a94f6f !important;
}

.today-card-orange .task-card-copy small,
.today-card-orange .task-card-copy strong,
.today-card-orange .task-card-copy em {
  color: #a86520 !important;
}

.today-card-blue .task-card-copy small,
.today-card-blue .task-card-copy strong,
.today-card-blue .task-card-copy em {
  color: #337ca5 !important;
}

.today-card-mint .task-card-copy small,
.today-card-mint .task-card-copy strong,
.today-card-mint .task-card-copy em {
  color: #397f70 !important;
}

/* カレンダー画像・鳥・飾りの色が暗くされている場合の解除 */
.task-calendar-slot,
.task-bird-slot,
.task-decor-slot {
  filter: none !important;
  opacity: 1 !important;
}
/* ===== 4枚カード：ゴシック版でも色を個別に戻す・最終上書き ===== */

body.theme-gothic .today-task-grid > button.today-task-card.today-card-pink {
  color: #a94f6f !important;
  border-color: rgba(231, 144, 174, .35) !important;
  background: linear-gradient(180deg, #fffafd, #fdebf2) !important;
  box-shadow:
    0 12px 26px rgba(66,122,141,.10),
    inset 0 1px 0 rgba(255,255,255,.90) !important;
}

body.theme-gothic .today-task-grid > button.today-task-card.today-card-orange {
  color: #a86520 !important;
  border-color: rgba(238, 174, 88, .35) !important;
  background: linear-gradient(180deg, #fffdf8, #fff1da) !important;
  box-shadow:
    0 12px 26px rgba(66,122,141,.10),
    inset 0 1px 0 rgba(255,255,255,.90) !important;
}

body.theme-gothic .today-task-grid > button.today-task-card.today-card-blue {
  color: #337ca5 !important;
  border-color: rgba(101, 180, 215, .35) !important;
  background: linear-gradient(180deg, #fbfdff, #e9f5fc) !important;
  box-shadow:
    0 12px 26px rgba(66,122,141,.10),
    inset 0 1px 0 rgba(255,255,255,.90) !important;
}

body.theme-gothic .today-task-grid > button.today-task-card.today-card-mint {
  color: #397f70 !important;
  border-color: rgba(114, 195, 170, .35) !important;
  background: linear-gradient(180deg, #fbfffd, #e8f7f1) !important;
  box-shadow:
    0 12px 26px rgba(66,122,141,.10),
    inset 0 1px 0 rgba(255,255,255,.90) !important;
}

/* ゴシックの黒っぽい膜を消す */
body.theme-gothic .today-task-grid > button.today-task-card::before {
  display: none !important;
  content: none !important;
  background: none !important;
}

/* 中の文字色 */
body.theme-gothic .today-card-pink .task-card-copy small,
body.theme-gothic .today-card-pink .task-card-copy strong,
body.theme-gothic .today-card-pink .task-card-copy em {
  color: #a94f6f !important;
  text-shadow: none !important;
}

body.theme-gothic .today-card-orange .task-card-copy small,
body.theme-gothic .today-card-orange .task-card-copy strong,
body.theme-gothic .today-card-orange .task-card-copy em {
  color: #a86520 !important;
  text-shadow: none !important;
}

body.theme-gothic .today-card-blue .task-card-copy small,
body.theme-gothic .today-card-blue .task-card-copy strong,
body.theme-gothic .today-card-blue .task-card-copy em {
  color: #337ca5 !important;
  text-shadow: none !important;
}

body.theme-gothic .today-card-mint .task-card-copy small,
body.theme-gothic .today-card-mint .task-card-copy strong,
body.theme-gothic .today-card-mint .task-card-copy em {
  color: #397f70 !important;
  text-shadow: none !important;
}

/* em のゴシック枠も解除 */
body.theme-gothic .today-task-card .task-card-copy em {
  border: 0 !important;
  background: rgba(255,255,255,.64) !important;
}

/* カレンダー画像・鳥・飾りに暗いフィルターがかかっていたら解除 */
body.theme-gothic .today-task-card .task-calendar-slot,
body.theme-gothic .today-task-card .task-bird-slot,
body.theme-gothic .today-task-card .task-decor-slot {
  opacity: 1 !important;
  filter: none !important;
}
/* =========================================================
   4枚カードをゴシック色違いに戻す・装飾もゴシック化
   ========================================================= */

/* --- カード共通ベース --- */
body.theme-gothic .today-task-grid > button.today-task-card {
  position: relative;
  overflow: hidden;
  border-radius: 28px !important;
  border: 1px solid rgba(205, 158, 89, .32) !important;
  box-shadow:
    0 18px 40px rgba(0,0,0,.36),
    inset 0 1px 0 rgba(255,255,255,.06),
    inset 0 0 0 1px rgba(255,220,160,.05) !important;
}

/* 変な明るい膜を消す */
body.theme-gothic .today-task-grid > button.today-task-card::before,
body.theme-gothic .today-task-grid > button.today-task-card::after {
  background: none !important;
}

/* --- 4色をゴシック配色で個別化 --- */
body.theme-gothic .today-task-grid > button.today-task-card.today-card-pink {
  background:
    radial-gradient(circle at 82% 18%, rgba(164, 26, 70, .18), transparent 26%),
    radial-gradient(circle at 14% 0%, rgba(255,255,255,.05), transparent 24%),
    linear-gradient(145deg, #2c121b 0%, #1b0c13 58%, #12070d 100%) !important;
  color: #d98ba9 !important;
  border-color: rgba(168, 74, 110, .40) !important;
}

body.theme-gothic .today-task-grid > button.today-task-card.today-card-orange {
  background:
    radial-gradient(circle at 82% 18%, rgba(196, 112, 31, .18), transparent 26%),
    radial-gradient(circle at 14% 0%, rgba(255,255,255,.05), transparent 24%),
    linear-gradient(145deg, #2b1a10 0%, #1b110a 58%, #110a06 100%) !important;
  color: #d9a167 !important;
  border-color: rgba(186, 120, 51, .40) !important;
}

body.theme-gothic .today-task-grid > button.today-task-card.today-card-blue {
  background:
    radial-gradient(circle at 82% 18%, rgba(49, 106, 166, .18), transparent 26%),
    radial-gradient(circle at 14% 0%, rgba(255,255,255,.05), transparent 24%),
    linear-gradient(145deg, #131d2a 0%, #0d131b 58%, #080c11 100%) !important;
  color: #8eb7da !important;
  border-color: rgba(83, 127, 179, .40) !important;
}

body.theme-gothic .today-task-grid > button.today-task-card.today-card-mint {
  background:
    radial-gradient(circle at 82% 18%, rgba(43, 121, 99, .18), transparent 26%),
    radial-gradient(circle at 14% 0%, rgba(255,255,255,.05), transparent 24%),
    linear-gradient(145deg, #13231f 0%, #0d1815 58%, #08100e 100%) !important;
  color: #89c2b2 !important;
  border-color: rgba(73, 133, 115, .40) !important;
}

/* --- 中の文字 --- */
body.theme-gothic .today-task-card .task-card-copy small {
  opacity: .92;
  letter-spacing: .08em;
}

body.theme-gothic .today-task-card .task-card-copy strong {
  font-size: 2.2rem;
  line-height: 1.1;
}

body.theme-gothic .today-task-card .task-card-copy em {
  border: 1px solid rgba(214, 182, 128, .20) !important;
  background: rgba(255,255,255,.03) !important;
  color: inherit !important;
  border-radius: 999px;
  padding: .45rem .85rem;
  font-style: normal;
}

/* カードごとの文字色 */
body.theme-gothic .today-card-pink .task-card-copy small,
body.theme-gothic .today-card-pink .task-card-copy strong,
body.theme-gothic .today-card-pink .task-card-copy em {
  color: #d98ba9 !important;
}

body.theme-gothic .today-card-orange .task-card-copy small,
body.theme-gothic .today-card-orange .task-card-copy strong,
body.theme-gothic .today-card-orange .task-card-copy em {
  color: #d9a167 !important;
}

body.theme-gothic .today-card-blue .task-card-copy small,
body.theme-gothic .today-card-blue .task-card-copy strong,
body.theme-gothic .today-card-blue .task-card-copy em {
  color: #8eb7da !important;
}

body.theme-gothic .today-card-mint .task-card-copy small,
body.theme-gothic .today-card-mint .task-card-copy strong,
body.theme-gothic .today-card-mint .task-card-copy em {
  color: #89c2b2 !important;
}

/* =========================================================
   左上マーク・右上飾りをゴシック化
   ========================================================= */

/* いまの左上・右上パーツをゴシック枠に */
body.theme-gothic .today-task-card .task-calendar-slot,
body.theme-gothic .today-task-card .task-decor-slot {
  position: absolute;
  width: 52px;
  height: 52px;
  border-radius: 16px;
  display: grid;
  place-items: center;
  background:
    radial-gradient(circle at 30% 28%, rgba(255,255,255,.20), transparent 26%),
    linear-gradient(145deg, rgba(88, 28, 48, .95), rgba(36, 14, 24, .98)) !important;
  border: 1px solid rgba(217, 173, 102, .38) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.08),
    0 8px 18px rgba(0,0,0,.28) !important;
  filter: none !important;
  opacity: 1 !important;
  overflow: hidden;
}

/* 左上 */
body.theme-gothic .today-task-card .task-calendar-slot {
  top: 18px;
  left: 18px;
}

/* 右上 */
body.theme-gothic .today-task-card .task-decor-slot {
  top: 18px;
  right: 18px;
}

/* 既存の画像っぽさを消す */
body.theme-gothic .today-task-card .task-calendar-slot,
body.theme-gothic .today-task-card .task-decor-slot {
  background-image: none !important;
}

/* 中身を擬似要素で出す */
body.theme-gothic .today-task-card .task-calendar-slot::before,
body.theme-gothic .today-task-card .task-decor-slot::before {
  font-size: 1.4rem;
  line-height: 1;
  color: #e8c88d;
  text-shadow: 0 0 8px rgba(232, 200, 141, .18);
}

/* カードごとの左上マーク */
body.theme-gothic .today-card-pink .task-calendar-slot::before {
  content: "✦";
}

body.theme-gothic .today-card-orange .task-calendar-slot::before {
  content: "✶";
}

body.theme-gothic .today-card-blue .task-calendar-slot::before {
  content: "☾";
}

body.theme-gothic .today-card-mint .task-calendar-slot::before {
  content: "☠";
}

/* 右上の飾り */
body.theme-gothic .today-card-pink .task-decor-slot::before {
  content: "❦";
}

body.theme-gothic .today-card-orange .task-decor-slot::before {
  content: "✧";
}

body.theme-gothic .today-card-blue .task-decor-slot::before {
  content: "✢";
}

body.theme-gothic .today-card-mint .task-decor-slot::before {
  content: "☠";
}

/* =========================================================
   右下の青い丸いやつを消す
   ========================================================= */
body.theme-gothic .today-task-card .task-bird-slot {
  display: none !important;
}

/* もし下の飾りが残るならこれも */
body.theme-gothic .today-task-card .task-bird-slot::before,
body.theme-gothic .today-task-card .task-bird-slot::after {
  display: none !important;
}
/* ドラゴン右隣の操作ボタン */
body.theme-gothic .gothic-hero-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  flex-wrap: wrap;
  align-self: center;
}

body.theme-gothic .gothic-hero-actions .header-create-button,
body.theme-gothic .gothic-hero-actions .header-memo-button,
body.theme-gothic .gothic-hero-actions .header-link-button {
  min-height: 42px;
  padding: 10px 18px;
  border-radius: 999px;
  white-space: nowrap;
}

/* スマホではドラゴンの下に並べる */
@media (max-width: 760px) {
  body.theme-gothic .gothic-hero-actions {
    width: 100%;
    justify-content: flex-start;
  }

  body.theme-gothic .gothic-hero-actions .header-create-button,
  body.theme-gothic .gothic-hero-actions .header-memo-button,
  body.theme-gothic .gothic-hero-actions .header-link-button {
    flex: 1 1 auto;
  }
}
/* 今日のドラゴン横：操作パネル化 */
body.theme-gothic .today-dashboard-actions {
  position: relative;
  display: grid;
  grid-template-columns: repeat(2, minmax(120px, 1fr));
  gap: 10px;
  min-width: 300px;
  max-width: 380px;
  padding: 28px 18px 18px;
  border-radius: 18px;
  border: 1px solid rgba(214, 174, 105, .42);
  background:
    linear-gradient(135deg, rgba(48, 20, 36, .92), rgba(17, 18, 32, .94)),
    radial-gradient(circle at top right, rgba(214, 174, 105, .18), transparent 42%);
  box-shadow:
    0 18px 36px rgba(0, 0, 0, .34),
    inset 0 0 0 1px rgba(255, 245, 220, .06);
}

/* 小さな見出し */
body.theme-gothic .today-dashboard-actions::before {
  content: "TODAY TOOLS";
  position: absolute;
  top: -11px;
  left: 18px;
  padding: 3px 12px;
  border-radius: 999px;
  border: 1px solid rgba(214, 174, 105, .45);
  background: #171321;
  color: rgba(236, 206, 145, .92);
  font-size: 11px;
  letter-spacing: .16em;
  line-height: 1.4;
}

/* 内側の細い額縁 */
body.theme-gothic .today-dashboard-actions::after {
  content: "";
  position: absolute;
  inset: 8px;
  border-radius: 13px;
  border: 1px solid rgba(255, 245, 220, .08);
  pointer-events: none;
}

/* ボタン共通 */
body.theme-gothic .today-dashboard-actions .header-create-button,
body.theme-gothic .today-dashboard-actions .header-memo-button,
body.theme-gothic .today-dashboard-actions .header-link-button,
body.theme-gothic .today-dashboard-actions .ghost-button {
  min-height: 42px;
  padding: 10px 14px;
  border-radius: 10px !important;
  border: 1px solid rgba(214, 174, 105, .38) !important;
  background: linear-gradient(180deg, rgba(63, 35, 54, .95), rgba(30, 24, 38, .95)) !important;
  color: #f4dfb0 !important;
  font-weight: 700;
  letter-spacing: .04em;
  white-space: nowrap;
  box-shadow:
    0 8px 16px rgba(0, 0, 0, .22),
    inset 0 1px 0 rgba(255, 255, 255, .08);
}

/* ＋追加だけ主役にする */
body.theme-gothic .today-dashboard-actions .header-create-button {
  grid-column: 1 / -1;
  background: linear-gradient(180deg, rgba(112, 42, 72, .96), rgba(55, 25, 45, .96)) !important;
}

/* すべて見るも下で整える */
body.theme-gothic .today-dashboard-actions .ghost-button {
  grid-column: 1 / -1;
}

/* hover */
body.theme-gothic .today-dashboard-actions .header-create-button:hover,
body.theme-gothic .today-dashboard-actions .header-memo-button:hover,
body.theme-gothic .today-dashboard-actions .header-link-button:hover,
body.theme-gothic .today-dashboard-actions .ghost-button:hover {
  transform: translateY(-1px);
  border-color: rgba(236, 206, 145, .72) !important;
  box-shadow:
    0 12px 22px rgba(0, 0, 0, .3),
    0 0 18px rgba(214, 174, 105, .12);
}

/* スマホでは横幅いっぱい */
@media (max-width: 760px) {
  body.theme-gothic .today-dashboard-actions {
    width: 100%;
    max-width: none;
    min-width: 0;
    grid-template-columns: 1fr;
  }

  body.theme-gothic .today-dashboard-actions .header-create-button,
  body.theme-gothic .today-dashboard-actions .header-memo-button,
  body.theme-gothic .today-dashboard-actions .header-link-button,
  body.theme-gothic .today-dashboard-actions .ghost-button {
    grid-column: auto;
  }
}
/* 操作パネル下段：説明＋すべて見る */
body.theme-gothic .today-actions-footer {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 2px;
  padding-top: 12px;
  border-top: 1px solid rgba(214, 174, 105, .18);
}

body.theme-gothic .today-actions-note {
  color: rgba(236, 206, 145, .72);
  font-size: 12px;
  letter-spacing: .04em;
  white-space: nowrap;
}

body.theme-gothic .today-actions-footer .ghost-button {
  min-width: 120px;
  border-radius: 10px !important;
}

/* スマホでは縦積み */
@media (max-width: 760px) {
  body.theme-gothic .today-actions-footer {
    align-items: stretch;
    flex-direction: column;
  }

  body.theme-gothic .today-actions-note {
    white-space: normal;
  }

  body.theme-gothic .today-actions-footer .ghost-button {
    width: 100%;
  }
}
/* ヘッダー中央タイトル画像 */
body.theme-gothic .site-header {
  display: grid !important;
  grid-template-columns: auto minmax(260px, 520px) auto !important;
  align-items: center !important;
  gap: 24px !important;
}

body.theme-gothic .header-title-wrap {
  display: flex;
  justify-content: center;
  align-items: center;
  min-width: 0;
}

body.theme-gothic .header-title-image {
  display: block;
  width: 100%;
  max-width: 520px;
  height: auto;
  max-height: 84px;
  object-fit: contain;
}

/* スマホでは少し小さく */
@media (max-width: 760px) {
  body.theme-gothic .site-header {
    grid-template-columns: auto 1fr !important;
    gap: 12px !important;
  }

  body.theme-gothic .header-title-wrap {
    grid-column: 1 / -1;
    order: 2;
  }

  body.theme-gothic .auth-area {
    justify-content: flex-end;
  }

  body.theme-gothic .header-title-image {
    max-height: 64px;
  }
}
/* ヘッダー中央タイトル：上品ゴシック */
body.theme-gothic .header-title-text {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-width: 0;
  padding: 4px 18px 6px;
  text-align: center;
}

body.theme-gothic .header-title-text::before,
body.theme-gothic .header-title-text::after {
  content: "";
  position: absolute;
  top: 50%;
  width: 72px;
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(214, 174, 105, .65),
    transparent
  );
}

body.theme-gothic .header-title-text::before {
  right: 100%;
}

body.theme-gothic .header-title-text::after {
  left: 100%;
}

body.theme-gothic .header-title-main {
  color: #f2dfb4;
  font-size: clamp(1.35rem, 2vw, 1.9rem);
  font-weight: 700;
  letter-spacing: .16em;
  line-height: 1;
  white-space: nowrap;
  text-shadow:
    0 1px 0 rgba(255, 255, 255, .12),
    0 0 10px rgba(101, 33, 58, .55),
    0 0 22px rgba(214, 174, 105, .12);
}

body.theme-gothic .header-title-sub {
  margin-top: 6px;
  color: rgba(214, 174, 105, .66);
  font-size: 10px;
  letter-spacing: .32em;
  line-height: 1;
  white-space: nowrap;
}
/* ヘッダー下の白い丸っぽい装飾を消す */
body.theme-gothic .site-header::before,
body.theme-gothic .site-header::after {
  display: none !important;
  content: none !important;
}
/* ログイン画面：女の子案内画像を直接表示 */
body.theme-gothic .gothic-login-visual-image {
  position: relative !important;
  min-height: 720px !important;
  overflow: hidden !important;
  background: none !important;
}

body.theme-gothic .gothic-login-info-image {
  position: absolute !important;
  inset: 0 !important;
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  z-index: 0 !important;
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: none !important;
}

body.theme-gothic .gothic-login-visual-image::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    linear-gradient(90deg, rgba(10,8,12,.04), rgba(10,8,12,.14) 55%, rgba(10,8,12,.86) 100%),
    linear-gradient(180deg, rgba(8,7,10,.02), rgba(8,7,10,.34));
}

body.theme-gothic .gothic-login-visual-image .gothic-login-moon,
body.theme-gothic .gothic-login-visual-image .gothic-login-visual-copy {
  position: relative;
  z-index: 2;
}
/* メロン版：今日の画像と右側ボタン欄の位置調整 */
.today-dashboard-heading {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 240px;
  gap: 22px;
  align-items: center;
}

.today-dashboard-actions {
  position: static;
  transform: none;
  margin-top: 38px;
  margin: 0;
  width: 100%;
  max-width: 240px;
  align-self: center;
}

.today-dashboard-actions button {
  width: 100%;
  box-sizing: border-box;
}
/* メロン版：右側ボタン欄が切れないようにする */
.today-dashboard {
  overflow: visible;
}

.today-dashboard-heading {
  overflow: visible;
}
/* メロン版：右側ボタン欄と下カードが重ならないようにする */
.today-dashboard-heading {
  margin-bottom: 38px;
}
/* ============================================================
   メロン版:ヘッダー3カラム(ロゴ / 中央タイトル / ログイン欄)
   ゴシック版と同じ構造をtheme-melonにも適用
   ============================================================ */
body.theme-melon .site-header {
  display: grid !important;
  grid-template-columns: auto minmax(260px, 520px) auto !important;
  align-items: center !important;
  gap: 24px !important;
}

/* 中央タイトル:メロン仕立て */
body.theme-melon .header-title-text {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-width: 0;
  padding: 4px 18px 6px;
  text-align: center;
}

body.theme-melon .header-title-text::before,
body.theme-melon .header-title-text::after {
  content: "";
  position: absolute;
  top: 50%;
  width: 72px;
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 255, 255, .85),
    transparent
  );
}

body.theme-melon .header-title-text::before {
  right: 100%;
}

body.theme-melon .header-title-text::after {
  left: 100%;
}

body.theme-melon .header-title-main {
  color: #1f5f57;
  font-size: clamp(1.35rem, 2vw, 1.9rem);
  font-weight: 700;
  letter-spacing: .16em;
  line-height: 1;
  white-space: nowrap;
  text-shadow: 0 1px 0 rgba(255, 255, 255, .6);
}

body.theme-melon .header-title-sub {
  margin-top: 6px;
  color: rgba(31, 95, 87, .66);
  font-size: 10px;
  letter-spacing: .32em;
  line-height: 1;
  white-space: nowrap;
}

body.theme-melon .site-header .auth-area {
  justify-content: flex-end !important;
}

/* スマホ:タイトルを2行目に落として全幅センター */
@media (max-width: 760px) {
  body.theme-melon .site-header {
    grid-template-columns: auto 1fr !important;
    gap: 12px !important;
  }

  body.theme-melon .header-title-text {
    grid-column: 1 / -1;
    order: 2;
  }

  body.theme-melon .header-title-text::before,
  body.theme-melon .header-title-text::after {
    width: 40px;
  }

  body.theme-melon .auth-area {
    justify-content: flex-end;
  }
}

/* ============================================================
   メロン版:今日の予定・上段(バナー + TODAY TOOLSパネル)
   段の高さを復活させ、ボタン欄がカードに沈まないようにする
   ============================================================ */
body.theme-melon .today-dashboard-heading {
  height: auto !important;
  min-height: 150px !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) minmax(300px, 380px) !important;
  gap: 22px !important;
  align-items: stretch !important;
  margin-bottom: 22px !important;
  overflow: visible !important;
}

/* 左:バナー画像を額に入れる */
body.theme-melon .today-title-image-only {
  display: flex !important;
  width: 100% !important;
  max-width: none !important;
  height: 100% !important;
  min-height: 150px !important;
  overflow: hidden !important;
  border-radius: 19px !important;
  border: 1px solid rgba(120, 205, 190, .5);
  background: #ffffff;
  box-shadow: 0 12px 28px rgba(60, 160, 170, .16);
}

body.theme-melon .today-pencil-image {
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  object-fit: cover !important;
  object-position: center 42% !important;
  border-radius: 0 !important;
  filter: none !important;
}

/* 右:TODAY TOOLSパネル(メロン仕立て) */
body.theme-melon .today-dashboard-actions {
  position: relative !important;
  display: grid !important;
  grid-template-columns: repeat(2, minmax(120px, 1fr)) !important;
  gap: 10px !important;
  width: 100% !important;
  min-width: 300px !important;
  max-width: 380px !important;
  margin: 0 !important;
  padding: 28px 18px 18px !important;
  align-self: stretch !important;
  border-radius: 18px;
  border: 1px solid rgba(120, 205, 190, .55);
  background:
    radial-gradient(circle at top right, rgba(255, 240, 170, .55), transparent 46%),
    linear-gradient(135deg, rgba(255, 255, 255, .96), rgba(230, 250, 243, .92));
  box-shadow:
    0 14px 30px rgba(60, 160, 170, .14),
    inset 0 1px 0 rgba(255, 255, 255, .9);
}

/* パネルの小さな見出しチップ */
body.theme-melon .today-dashboard-actions::before {
  content: "TODAY TOOLS";
  position: absolute;
  top: -11px;
  left: 18px;
  padding: 3px 12px;
  border-radius: 999px;
  border: 1px solid rgba(90, 190, 175, .6);
  background: #ffffff;
  color: #1f6f73;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .16em;
  line-height: 1.4;
}

/* ボタン配置:＋追加は全幅、メモ・リンクは横並び
   (> で直下のボタンだけに限定。フッター内の「すべて見る」には効かせない) */
body.theme-melon .today-dashboard-actions > button {
  width: 100% !important;
  box-sizing: border-box !important;
}

body.theme-melon .today-dashboard-actions .header-create-button {
  grid-column: 1 / -1;
}

/* 下段:説明+すべて見る */
body.theme-melon .today-actions-footer {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 2px;
  padding-top: 12px;
  border-top: 1px solid rgba(120, 205, 190, .35);
}

body.theme-melon .today-actions-note {
  color: #4a8a84;
  font-size: 12px;
  letter-spacing: .03em;
  white-space: nowrap;
}

body.theme-melon .today-actions-footer .ghost-button {
  width: auto !important;
  min-width: 110px;
  flex: 0 0 auto;
}

/* スマホ:縦積みにして崩れを防ぐ */
@media (max-width: 760px) {
  body.theme-melon .today-dashboard-heading {
    grid-template-columns: 1fr !important;
    height: auto !important;
    min-height: 0 !important;
    gap: 14px !important;
    overflow: visible !important;
  }

  body.theme-melon .today-title-image-only {
    min-height: 110px !important;
    height: 130px !important;
  }

  body.theme-melon .today-dashboard-actions {
    min-width: 0 !important;
    max-width: none !important;
    grid-template-columns: 1fr !important;
  }

  body.theme-melon .today-dashboard-actions .header-create-button {
    grid-column: auto;
  }

  body.theme-melon .today-actions-footer {
    align-items: stretch;
    flex-direction: column;
  }

  body.theme-melon .today-actions-note {
    white-space: normal;
  }

  body.theme-melon .today-actions-footer .ghost-button {
    width: 100% !important;
  }
}
@media (max-width: 640px) {
  body.theme-melon .site-header .login-info {
    display: none !important;
  }
}
/* スマホ:ヘッダーを1行に(薄くする) */
@media (max-width: 760px) {
  body.theme-melon .site-header {
    grid-template-columns: auto minmax(0, 1fr) auto !important;
    gap: 10px !important;
    padding: 8px 12px !important;
  }

  body.theme-melon .header-title-text {
    grid-column: auto;   /* 2行目落ちをやめる */
    order: 0;
    padding: 0 6px;
  }

  /* 左右の飾りラインははみ出すので省略 */
  body.theme-melon .header-title-text::before,
  body.theme-melon .header-title-text::after {
    display: none;
  }

  body.theme-melon .header-title-main {
    font-size: 1.05rem;
    letter-spacing: .1em;
  }

  body.theme-melon .header-title-sub {
    margin-top: 3px;
    font-size: 8px;
    letter-spacing: .22em;
  }
}
/* スマホ:TODAY TOOLSをコンパクトに */
@media (max-width: 760px) {

  /* パネル:メモとリンクを横並びにして高さを節約 */
  body.theme-melon .today-dashboard-actions {
    grid-template-columns: 1fr 1fr !important;
    gap: 8px !important;
    padding: 20px 14px 12px !important;
  }

  /* ボタンをひとまわり小さく */
  body.theme-melon .today-dashboard-actions > button {
    min-height: 36px !important;
    padding: 7px 10px !important;
    font-size: .86rem !important;
  }

  /* ＋追加だけは1行まるごと使う */
  body.theme-melon .today-dashboard-actions .header-create-button {
    grid-column: 1 / -1 !important;
  }

  /* 下段:「説明 ── すべて見る」を1行に戻す(位置が上がる) */
  body.theme-melon .today-actions-footer {
    flex-direction: row !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding-top: 8px !important;
  }

  body.theme-melon .today-actions-note {
    font-size: 11px !important;
  }

  body.theme-melon .today-actions-footer .ghost-button {
    width: auto !important;
    flex: 0 0 auto !important;
    padding: 8px 14px !important;
    font-size: .82rem !important;
  }

  /* ヘッダー左の本アイコンも小さめに */
  body.theme-melon .brand-wax-logo {
    width: 36px !important;
    height: 36px !important;
  }
}