:root {
    color-scheme: light;

    --background: #f6f6fb;
    --surface: #ffffff;
    --text: #101114;
    --subtext: #73777e;
    --line: #e5e7eb;

    --blue: #1597eb;
    --red: #ed4253;
    --orange: #f3a11f;
    --pink: #e45691;
    --gray: #7d878d;
    --green: #27a768;
    --purple: #7566d8;

    --shadow:
        0 12px 30px rgba(0, 0, 0, 0.08);

    --panel-shadow:
        0 5px 16px rgba(23, 32, 51, 0.07);

    --panel-pressed-shadow:
        0 12px 28px rgba(23, 32, 51, 0.17),
        0 0 0 3px rgba(21, 151, 235, 0.10);
}

*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    width: 100%;
    max-width: 100%;
    min-height: 100%;
    overflow-x: hidden;

    background: var(--background);
    -webkit-text-size-adjust: 100%;
}

body {
    width: 100%;
    max-width: 100%;
    min-height: 100%;
    overflow-x: hidden;
    margin: 0;

    background: var(--background);
    color: var(--text);

    font-family:
        -apple-system,
        BlinkMacSystemFont,
        "Helvetica Neue",
        "Hiragino Sans",
        "Yu Gothic",
        Meiryo,
        sans-serif;
}

button,
input,
textarea,
select {
    max-width: 100%;
    font: inherit;
}

button,
select {
    cursor: pointer;
}

button {
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
}

button:disabled {
    cursor: wait;
}

button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
a:focus-visible,
.task-content:focus-visible {
    outline:
        3px solid
        rgba(21, 151, 235, 0.35);

    outline-offset: 3px;
}

/* ログイン画面 */

.login-page {
    display: grid;
    min-height: 100vh;
    min-height: 100dvh;
    place-items: center;
    padding: 24px;
}

.login-card {
    width: min(460px, 100%);
    padding: 42px 28px;
    border-radius: 30px;

    background: var(--surface);

    box-shadow: var(--shadow);
    text-align: center;
}

.login-card img {
    display: block;
    margin: 0 auto 20px;
}

.login-card h1 {
    margin: 0 0 14px;

    font-size:
        clamp(32px, 8vw, 48px);

    letter-spacing: -0.04em;
}

.login-card p {
    margin: 0;
    color: var(--subtext);
    font-size: 17px;
    line-height: 1.7;
}

.google-login {
    display: inline-block;
    margin-top: 26px;
    padding: 15px 23px;
    border-radius: 15px;

    background: var(--blue);
    color: #fff;

    font-size: 18px;
    font-weight: 750;
    text-decoration: none;

    box-shadow:
        0 8px 19px
        rgba(21, 151, 235, 0.24);

    transition:
        transform 0.13s ease,
        box-shadow 0.13s ease,
        filter 0.13s ease;
}

.google-login:active {
    transform: scale(0.94);
    filter: brightness(0.94);

    box-shadow:
        0 4px 10px
        rgba(21, 151, 235, 0.26);
}

/* 上部操作欄 */

.topbar {
    position: sticky;
    top: 0;
    z-index: 20;

    display: flex;
    width: 100%;
    max-width: 100%;
    gap: 10px;

    padding:
        max(14px, env(safe-area-inset-top))
        max(18px, env(safe-area-inset-right))
        13px
        max(18px, env(safe-area-inset-left));

    background:
        rgba(246, 246, 251, 0.92);

    backdrop-filter: blur(16px);
    -webkit-backdrop-filter:
        blur(16px);
}

.search {
    min-width: 0;
    flex: 1;

    border:
        1px solid
        rgba(0, 0, 0, 0.03);

    border-radius: 25px;

    padding: 13px 18px;

    background: #fff;
    color: var(--text);

    box-shadow:
        0 5px 18px
        rgba(0, 0, 0, 0.04);

    font-size: 17px;
}

.round-button {
    flex: 0 0 50px;
    width: 50px;
    height: 50px;

    border: 0;
    border-radius: 50%;

    background: #fff;
    color: #111;

    box-shadow:
        0 5px 18px
        rgba(0, 0, 0, 0.04);

    font-size: 23px;

    transition:
        transform 0.13s ease,
        box-shadow 0.13s ease,
        background-color 0.13s ease;
}

.round-button:active {
    transform: scale(0.88);
    background: #f0f7fc;

    box-shadow:
        0 9px 21px
        rgba(21, 151, 235, 0.20);
}

/* 全体 */

.app {
    width: min(960px, 100%);
    max-width: 100%;
    margin: 0 auto;

    padding:
        4px
        max(18px, env(safe-area-inset-right))
        calc(
            120px +
            env(safe-area-inset-bottom)
        )
        max(18px, env(safe-area-inset-left));
}

.account-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;

    min-width: 0;
    margin: 2px 3px 18px;
}

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

.account > div {
    min-width: 0;
}

.account-picture {
    width: 42px;
    height: 42px;
    flex: 0 0 42px;

    border-radius: 50%;
    object-fit: cover;
}

.account-name {
    overflow: hidden;

    font-size: 16px;
    font-weight: 750;

    text-overflow: ellipsis;
    white-space: nowrap;
}

.account-email {
    overflow: hidden;
    margin-top: 2px;

    color: var(--subtext);
    font-size: 13px;

    text-overflow: ellipsis;
    white-space: nowrap;
}

.logout {
    flex: 0 0 auto;
    color: #555b62;
    font-size: 14px;
    text-decoration: none;
}

/* 件数カード */

.summary-cards {
    display: grid;

    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    gap: 13px;
    margin-bottom: 32px;
}

.summary-card {
    position: relative;

    min-width: 0;
    min-height: 128px;
    overflow: hidden;

    border: 0;
    border-radius: 27px;

    padding: 19px 20px;

    color: #fff;
    text-align: left;

    box-shadow:
        0 10px 26px
        rgba(0, 0, 0, 0.09);

    transition:
        transform 0.15s ease,
        filter 0.15s ease,
        box-shadow 0.15s ease;
}

.summary-card:active {
    transform: scale(0.93);

    box-shadow:
        0 17px 35px
        rgba(0, 0, 0, 0.23);
}

.summary-card:hover {
    filter: brightness(1.02);
}

.summary-card strong {
    position: absolute;
    top: 18px;
    right: 20px;

    font-size:
        clamp(40px, 10vw, 53px);

    font-weight: 760;
    line-height: 1;
}

.summary-card span {
    position: absolute;
    right: 20px;
    bottom: 19px;
    left: 20px;

    overflow: hidden;

    font-size:
        clamp(19px, 5vw, 25px);

    font-weight: 780;
    letter-spacing: -0.03em;

    text-overflow: ellipsis;
    white-space: nowrap;
}

.summary-card.blue {
    background:
        linear-gradient(
            135deg,
            #5fc1ef,
            #168fe2
        );
}

.summary-card.red {
    background:
        linear-gradient(
            135deg,
            #ef8790,
            #e84d60
        );
}

.summary-card.black {
    background:
        linear-gradient(
            135deg,
            #4c4c4e,
            #1f2021
        );
}

.summary-card.orange {
    background:
        linear-gradient(
            135deg,
            #fac983,
            #f0a140
        );
}

.summary-card.pink {
    background:
        linear-gradient(
            135deg,
            #ed75a5,
            #df4e89
        );
}

.summary-card.gray {
    background:
        linear-gradient(
            135deg,
            #9da6ab,
            #778188
        );
}

/* ゴミ箱パネル */

.summary-card.trash {
    grid-column: 1 / -1;
    min-height: 108px;

    background:
        linear-gradient(
            135deg,
            #8174df,
            #5444b8
        );

    box-shadow:
        0 12px 28px
        rgba(84, 68, 184, 0.24);
}

.summary-card.trash strong {
    top: 15px;
}

.summary-card.trash span {
    bottom: 16px;
}

/* タスク一覧 */

.task-area {
    min-width: 0;
    padding-top: 2px;
}

.task-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;

    min-width: 0;
    margin: 0 3px 12px;
}

.task-heading h1 {
    min-width: 0;
    margin: 0;

    font-size:
        clamp(30px, 7vw, 43px);

    letter-spacing: -0.04em;
}

#list-filter {
    min-width: 0;
    max-width: 48%;

    border: 0;
    border-radius: 13px;

    padding: 10px 12px;

    background: #fff;
    color: #4d5359;

    box-shadow:
        0 3px 11px
        rgba(0, 0, 0, 0.04);

    font-size: 14px;
}

#tasks {
    min-width: 0;
}

.task-group-title {
    margin: 28px 4px 10px;
    color: #747980;
    font-size: 19px;
    font-weight: 750;
}

/* 各タスクのパネル */

.task-row {
    display: grid;

    grid-template-columns:
        67px minmax(0, 1fr);

    gap: 12px;
    align-items: start;

    min-width: 0;
    margin: 0 0 12px;
    padding: 17px 16px;

    border:
        1px solid
        rgba(25, 31, 42, 0.07);

    border-radius: 20px;

    background: var(--surface);

    box-shadow:
        var(--panel-shadow);

    transition:
        transform 0.13s ease,
        box-shadow 0.13s ease,
        border-color 0.13s ease,
        opacity 0.15s ease;

    -webkit-tap-highlight-color:
        transparent;
}

.task-row:active {
    transform:
        translateY(1px)
        scale(0.975);

    border-color:
        rgba(21, 151, 235, 0.22);

    box-shadow:
        var(--panel-pressed-shadow);
}

.task-row.completed {
    opacity: 0.58;
}

.task-content {
    min-width: 0;
    border-radius: 12px;

    cursor: pointer;
    outline: none;

    touch-action: manipulation;

    -webkit-tap-highlight-color:
        transparent;
}

.task-title {
    color: #111;

    font-size:
        clamp(18px, 4.8vw, 22px);

    font-weight: 740;
    line-height: 1.4;

    overflow-wrap: anywhere;
}

.task-row.completed .task-title {
    text-decoration: line-through;
}

.task-list-name {
    margin-top: 4px;
    color: var(--orange);
    font-size: 14px;
    font-weight: 700;
    overflow-wrap: anywhere;
}

.task-notes {
    display: -webkit-box;
    overflow: hidden;
    margin-top: 6px;

    color: #777c82;
    font-size: 15px;
    line-height: 1.55;

    overflow-wrap: anywhere;
    white-space: pre-line;

    -webkit-box-orient: vertical;
    -webkit-line-clamp: 4;
}

.task-date {
    margin-top: 7px;
    color: var(--red);
    font-size: 16px;
    font-weight: 750;
    overflow-wrap: anywhere;
}

.task-date.overdue {
    color: #cb2034;
}

.task-registered-at {
    color: #92979d;
    font-size: 12px;
    font-weight: 600;
}

/* 一覧の完了スイッチ */

.task-completion {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 7px;

    min-width: 0;
    padding-top: 2px;
}

.task-completion-label {
    color: #7b8087;
    font-size: 11px;
    font-weight: 750;
    line-height: 1;
    white-space: nowrap;
}

.task-row.completed
.task-completion-label {
    color: var(--blue);
}

/* 共通トグルスイッチ */

.toggle-switch {
    position: relative;

    display: inline-flex;
    flex: 0 0 auto;

    width: 54px;
    height: 32px;

    cursor: pointer;

    -webkit-tap-highlight-color:
        transparent;
}

.toggle-switch.compact {
    width: 52px;
    height: 30px;
}

.toggle-switch input {
    position: absolute;

    width: 1px;
    height: 1px;
    overflow: hidden;

    opacity: 0;
    pointer-events: none;
}

.toggle-track {
    position: relative;

    display: block;

    width: 100%;
    height: 100%;

    border:
        1px solid
        rgba(0, 0, 0, 0.08);

    border-radius: 999px;

    background: #c9cdd2;

    box-shadow:
        inset 0 2px 5px
        rgba(0, 0, 0, 0.13);

    transition:
        background-color 0.20s ease,
        box-shadow 0.20s ease,
        transform 0.14s ease;
}

.toggle-thumb {
    position: absolute;
    top: 3px;
    left: 3px;

    display: grid;
    width: 24px;
    height: 24px;
    place-items: center;

    border-radius: 50%;

    background: #fff;

    box-shadow:
        0 2px 7px
        rgba(0, 0, 0, 0.26);

    transition:
        transform 0.22s
        cubic-bezier(
            0.22,
            0.80,
            0.28,
            1
        ),
        box-shadow 0.18s ease;
}

.toggle-thumb::after {
    color: transparent;
    content: "✓";
    font-size: 15px;
    font-weight: 900;
    line-height: 1;

    transition:
        color 0.16s ease;
}

.toggle-switch input:checked
+ .toggle-track {
    background:
        linear-gradient(
            135deg,
            #46bf86,
            #1597eb
        );

    box-shadow:
        inset 0 2px 5px
        rgba(0, 0, 0, 0.10),
        0 5px 13px
        rgba(21, 151, 235, 0.23);
}

.toggle-switch input:checked
+ .toggle-track
.toggle-thumb {
    transform:
        translateX(22px);
}

.toggle-switch.compact
.toggle-thumb {
    width: 22px;
    height: 22px;
}

.toggle-switch.compact
input:checked
+ .toggle-track
.toggle-thumb {
    transform:
        translateX(22px);
}

.toggle-switch input:checked
+ .toggle-track
.toggle-thumb::after {
    color: var(--blue);
}

.toggle-switch:active
.toggle-track {
    transform: scale(0.88);
}

.toggle-switch input:focus-visible
+ .toggle-track {
    outline:
        3px solid
        rgba(21, 151, 235, 0.35);

    outline-offset: 3px;
}

.toggle-switch input:disabled
+ .toggle-track {
    cursor: wait;
    opacity: 0.64;
}

/* ゴミ箱のタスク */

.trash-row {
    min-width: 0;
    margin: 0 0 12px;
    padding: 18px;

    border:
        1px solid
        rgba(84, 68, 184, 0.12);

    border-radius: 20px;

    background: #fff;

    box-shadow:
        0 6px 18px
        rgba(54, 47, 104, 0.08);
}

.trash-title {
    color: #16131f;

    font-size:
        clamp(18px, 4.8vw, 22px);

    font-weight: 760;
    line-height: 1.4;

    overflow-wrap: anywhere;
}

.trash-list-name {
    margin-top: 5px;
    color: var(--purple);
    font-size: 14px;
    font-weight: 700;
}

.trash-notes {
    display: -webkit-box;
    overflow: hidden;
    margin-top: 8px;

    color: #74747d;
    font-size: 15px;
    line-height: 1.55;

    overflow-wrap: anywhere;
    white-space: pre-line;

    -webkit-box-orient: vertical;
    -webkit-line-clamp: 4;
}

.trash-date {
    margin-top: 8px;
    color: var(--red);
    font-size: 15px;
    font-weight: 750;
}

.trash-expiry {
    margin-top: 9px;
    color: #8a8e94;
    font-size: 13px;
    font-weight: 650;
}

.trash-actions {
    display: grid;

    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    gap: 10px;
    margin-top: 16px;
}

.trash-actions button {
    min-width: 0;
    min-height: 47px;

    border: 0;
    border-radius: 13px;

    padding: 10px 9px;
    font-weight: 750;

    transition:
        transform 0.13s ease,
        filter 0.13s ease,
        box-shadow 0.13s ease;
}

.trash-actions button:active {
    transform:
        translateY(3px)
        scale(0.86);

    filter: brightness(0.87);
}

.restore-button {
    background:
        linear-gradient(
            135deg,
            #51c58d,
            #179b61
        );

    color: #fff;

    box-shadow:
        0 7px 17px
        rgba(23, 155, 97, 0.22);
}

.permanent-delete-button {
    background: #ffe3e7;
    color: #b92034;

    box-shadow:
        0 6px 15px
        rgba(185, 32, 52, 0.10);
}

.empty {
    padding: 42px 8px;
    color: var(--subtext);
    text-align: center;
}

/* 追加ボタン */

.add-button {
    position: fixed;

    right:
        max(
            24px,
            env(safe-area-inset-right)
        );

    bottom:
        max(
            25px,
            env(safe-area-inset-bottom)
        );

    z-index: 25;

    width: 70px;
    height: 70px;

    border: 0;
    border-radius: 50%;

    background: #079cf1;
    color: #fff;

    box-shadow:
        0 10px 27px
        rgba(7, 142, 217, 0.34);

    font-size: 43px;
    font-weight: 300;
    line-height: 1;

    transition:
        transform 0.13s ease,
        box-shadow 0.13s ease,
        filter 0.13s ease;
}

.add-button:active {
    transform: scale(0.86);
    filter: brightness(0.94);

    box-shadow:
        0 15px 34px
        rgba(7, 142, 217, 0.43);
}

/* 編集画面 */

dialog {
    width:
        min(
            640px,
            calc(100vw - 24px)
        );

    max-width:
        calc(100vw - 24px);

    max-height:
        calc(100dvh - 24px);

    overflow-x: hidden;
    overflow-y: auto;

    overscroll-behavior-x: none;
    overscroll-behavior-y: contain;

    border: 0;
    border-radius: 27px;

    padding: 0;
    margin: auto;

    background: #fff;
    color: var(--text);

    box-shadow:
        0 24px 80px
        rgba(0, 0, 0, 0.35);

    -webkit-overflow-scrolling:
        touch;
}

dialog::backdrop {
    background:
        rgba(0, 0, 0, 0.48);

    backdrop-filter: blur(3px);
    -webkit-backdrop-filter:
        blur(3px);
}

.task-form {
    width: 100%;
    min-width: 0;
    max-width: 100%;
    overflow-x: hidden;

    padding:
        23px
        23px
        calc(
            23px +
            env(safe-area-inset-bottom)
        );

    touch-action: pan-y;
}

.dialog-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;

    min-width: 0;
}

.dialog-header h2 {
    min-width: 0;
    margin: 0;
    font-size: 29px;
}

.close-button {
    flex: 0 0 42px;
    width: 42px;
    height: 42px;

    border: 0;
    border-radius: 50%;

    background: #f1f2f4;
    color: #333;

    font-size: 28px;
    line-height: 1;

    transition:
        transform 0.13s ease,
        background-color 0.13s ease,
        box-shadow 0.13s ease;
}

.close-button:active {
    transform: scale(0.82);
    background: #e2e5e9;

    box-shadow:
        0 7px 17px
        rgba(0, 0, 0, 0.15);
}

.task-form > label,
.two-columns label {
    display: block;
    margin: 17px 0 7px;

    font-size: 15px;
    font-weight: 740;
}

.task-form input[type="text"],
.task-form input[type="date"],
.task-form input[type="time"],
.task-form textarea,
.task-form select {
    display: block;

    width: 100%;
    min-width: 0;
    max-width: 100%;

    border:
        1px solid #d7d9de;

    border-radius: 13px;

    padding: 12px 13px;

    background: #fff;
    color: #111;
}

.task-form input:focus,
.task-form textarea:focus,
.task-form select:focus {
    border-color:
        rgba(21, 151, 235, 0.62);

    box-shadow:
        0 0 0 4px
        rgba(21, 151, 235, 0.10);
}

.task-form textarea {
    min-height: 110px;
    resize: vertical;
    line-height: 1.5;
}

.two-columns {
    display: grid;

    grid-template-columns:
        minmax(0, 1fr)
        minmax(0, 1fr);

    gap: 13px;
    min-width: 0;
}

.two-columns > div {
    min-width: 0;
    max-width: 100%;
}

.checks {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;

    min-width: 0;
    margin-top: 20px;
}

.checks label {
    display: flex;
    align-items: center;
    gap: 8px;

    margin: 0;
    font-weight: 700;
}

.checks input {
    width: 21px;
    height: 21px;
}

/* 編集画面の完了スイッチ */

.completion-setting {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;

    min-width: 0;
    margin-top: 22px;
    padding: 15px 16px;

    border:
        1px solid
        rgba(21, 151, 235, 0.12);

    border-radius: 17px;

    background:
        linear-gradient(
            135deg,
            #f8fcff,
            #f1f8fd
        );
}

.completion-copy {
    min-width: 0;
}

.completion-copy strong {
    display: block;
    font-size: 17px;
    font-weight: 780;
}

.completion-copy span {
    display: block;
    margin-top: 3px;

    color: var(--subtext);
    font-size: 13px;
    line-height: 1.4;
}

/* 保存・閉じる */

.form-actions {
    display: grid;

    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    gap: 10px;
    min-width: 0;
    margin-top: 25px;
}

.form-actions button {
    min-width: 0;
    min-height: 52px;

    border: 0;
    border-radius: 14px;

    padding: 12px 10px;

    font-weight: 750;

    transition:
        transform 0.13s ease,
        box-shadow 0.13s ease,
        filter 0.13s ease,
        background-color 0.13s ease;
}

.form-actions button:active {
    transform:
        translateY(2px)
        scale(0.88);

    filter: brightness(0.90);
}

.save-button {
    background: var(--blue);
    color: #fff;

    box-shadow:
        0 7px 17px
        rgba(21, 151, 235, 0.25);
}

.save-button:active {
    box-shadow:
        0 11px 24px
        rgba(21, 151, 235, 0.38);
}

.normal-button {
    background: #eef0f3;
    color: #333;

    box-shadow:
        0 5px 13px
        rgba(0, 0, 0, 0.08);
}

.normal-button:active {
    box-shadow:
        0 9px 20px
        rgba(0, 0, 0, 0.16);
}

/* 削除欄 */

.delete-section {
    margin-top: 27px;
    padding-top: 20px;

    border-top:
        1px solid #eceef1;

    text-align: center;
}

.danger-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;

    width: 100%;
    min-height: 50px;

    border:
        1px solid
        rgba(188, 38, 55, 0.18);

    border-radius: 14px;

    padding: 12px 16px;

    background: #fff3f4;
    color: #b82033;

    font-weight: 760;

    box-shadow:
        0 5px 13px
        rgba(188, 38, 55, 0.08);

    transition:
        transform 0.13s ease,
        background-color 0.13s ease,
        box-shadow 0.13s ease,
        filter 0.13s ease;
}

.danger-button:active {
    transform:
        translateY(3px)
        scale(0.86);

    background: #ffdce1;
    filter: brightness(0.92);

    box-shadow:
        0 11px 23px
        rgba(188, 38, 55, 0.25);
}

.delete-section p {
    margin: 9px 4px 0;

    color: #989ba0;
    font-size: 12px;
    line-height: 1.5;
}

/* 削除確認画面 */

.confirm-dialog {
    width:
        min(
            440px,
            calc(100vw - 28px)
        );

    max-width:
        calc(100vw - 28px);

    overflow: hidden;
    border-radius: 25px;
}

.confirm-dialog-content {
    width: 100%;
    min-width: 0;
    padding: 25px 22px 22px;
    text-align: center;
}

.confirm-icon {
    display: grid;

    width: 58px;
    height: 58px;
    place-items: center;

    margin: 0 auto 13px;
    border-radius: 18px;

    background: #fff0f2;
    font-size: 29px;

    box-shadow:
        0 8px 19px
        rgba(188, 38, 55, 0.13);
}

.confirm-dialog h2 {
    margin: 0;
    font-size: 23px;
    letter-spacing: -0.02em;
}

.confirm-task-title {
    margin: 15px 0 0;
    padding: 12px 13px;

    border-radius: 13px;

    background: #f4f5f7;
    color: #24262a;

    font-size: 16px;
    font-weight: 750;
    line-height: 1.5;

    overflow-wrap: anywhere;
}

.confirm-description {
    margin: 15px 0 0;
    color: #555a61;
    font-size: 14px;
    line-height: 1.65;
}

.confirm-trash-note {
    margin: 8px 0 0;
    color: var(--purple);
    font-size: 14px;
    font-weight: 750;
    line-height: 1.55;
}

.confirm-actions {
    display: grid;

    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    gap: 10px;
    margin-top: 21px;
}

.confirm-actions button {
    min-width: 0;
    min-height: 50px;

    border: 0;
    border-radius: 14px;

    padding: 12px 9px;
    font-weight: 760;

    transition:
        transform 0.13s ease,
        filter 0.13s ease,
        box-shadow 0.13s ease;
}

.confirm-actions button:active {
    transform:
        translateY(3px)
        scale(0.86);

    filter: brightness(0.88);
}

.danger-confirm-button {
    background:
        linear-gradient(
            135deg,
            #ef6877,
            #d93649
        );

    color: #fff;

    box-shadow:
        0 8px 18px
        rgba(217, 54, 73, 0.25);
}

/* メッセージ */

.notice {
    position: fixed;

    bottom:
        max(
            25px,
            env(safe-area-inset-bottom)
        );

    left: 50%;
    z-index: 50;

    display: none;

    width: max-content;
    max-width:
        calc(100% - 30px);

    border-radius: 14px;
    padding: 12px 18px;

    background: #202225;
    color: #fff;

    box-shadow: var(--shadow);
    text-align: center;

    transform: translateX(-50%);
}

/* PC */

@media (min-width: 760px) {
    .summary-cards {
        grid-template-columns:
            repeat(
                3,
                minmax(0, 1fr)
            );
    }

    .summary-card {
        min-height: 145px;
    }

    .summary-card.trash {
        min-height: 116px;
    }

    .app {
        padding-top: 12px;
    }

    .task-row:hover {
        border-color:
            rgba(21, 151, 235, 0.18);

        box-shadow:
            0 10px 25px
            rgba(23, 32, 51, 0.11);

        transform:
            translateY(-1px);
    }

    .task-row:active {
        transform:
            translateY(1px)
            scale(0.985);
    }
}

/* iPhoneなど幅の狭い画面 */

@media (max-width: 560px) {
    dialog {
        width:
            calc(100vw - 20px);

        max-width:
            calc(100vw - 20px);

        max-height:
            calc(100dvh - 20px);

        border-radius: 23px;
    }

    .task-form {
        padding:
            20px
            18px
            calc(
                20px +
                env(safe-area-inset-bottom)
            );
    }

    .two-columns {
        grid-template-columns:
            minmax(0, 1fr);

        gap: 0;
    }
}

/* 小さいiPhone */

@media (max-width: 390px) {
    .topbar {
        gap: 8px;

        padding-right:
            max(
                12px,
                env(safe-area-inset-right)
            );

        padding-left:
            max(
                12px,
                env(safe-area-inset-left)
            );
    }

    .round-button {
        flex-basis: 48px;
        width: 48px;
        height: 48px;
    }

    .app {
        padding-right:
            max(
                12px,
                env(safe-area-inset-right)
            );

        padding-left:
            max(
                12px,
                env(safe-area-inset-left)
            );
    }

    .summary-card {
        min-height: 116px;
        padding: 16px;
    }

    .summary-card strong {
        top: 16px;
        right: 16px;
        font-size: 40px;
    }

    .summary-card span {
        right: 16px;
        bottom: 16px;
        left: 16px;
        font-size: 18px;
    }

    .summary-card.trash {
        min-height: 102px;
    }

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

    #list-filter {
        width: 100%;
        max-width: 100%;
    }

    .task-row {
        grid-template-columns:
            62px minmax(0, 1fr);

        gap: 9px;
        padding: 15px 13px;
        border-radius: 18px;
    }

    .toggle-switch.compact {
        width: 50px;
        height: 29px;
    }

    .toggle-switch.compact
    .toggle-thumb {
        width: 21px;
        height: 21px;
    }

    .toggle-switch.compact
    input:checked
    + .toggle-track
    .toggle-thumb {
        transform:
            translateX(21px);
    }

    .completion-setting {
        padding: 14px;
    }

    .completion-copy span {
        max-width: 185px;
    }

    .form-actions,
    .confirm-actions,
    .trash-actions {
        gap: 7px;
    }

    .form-actions button,
    .confirm-actions button,
    .trash-actions button {
        min-height: 48px;
        padding-right: 6px;
        padding-left: 6px;
        font-size: 15px;
    }
}

/* 動きを減らす設定 */

@media (
    prefers-reduced-motion:
    reduce
) {
    *,
    *::before,
    *::after {
        scroll-behavior:
            auto !important;

        transition:
            none !important;
    }
}


/* 通知から該当タスクを開く間の表示 */
.notification-opening > .topbar,
.notification-opening > .app,
.notification-opening > .add-button {
    visibility: hidden;
}

.notification-opening-screen {
    position: fixed;
    inset: 0;
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding:
        env(safe-area-inset-top)
        20px
        env(safe-area-inset-bottom);
    color: #303044;
    background: #f6f6fb;
    font-size: 15px;
}

.notification-opening-spinner {
    width: 22px;
    height: 22px;
    border: 3px solid #d8d8e5;
    border-top-color: #6558d3;
    border-radius: 50%;
    animation:
        notification-opening-spin
        0.65s linear infinite;
}

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


/* 下に引っ張って更新 */
html,
body {
    overscroll-behavior-y: none;
}

.pull-refresh {
    position: fixed;
    top:
        max(
            5px,
            env(safe-area-inset-top)
        );
    left: 50%;
    z-index: 100;

    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;

    min-height: 42px;
    padding: 8px 15px;

    border:
        1px solid
        rgba(0, 0, 0, 0.06);
    border-radius: 22px;

    background:
        rgba(255, 255, 255, 0.97);
    color: #303044;

    box-shadow:
        0 8px 24px
        rgba(0, 0, 0, 0.14);

    font-size: 14px;
    font-weight: 700;

    opacity: 0;
    pointer-events: none;

    transform:
        translate(-50%, -60px);

    transition:
        transform 0.16s ease,
        opacity 0.16s ease;
}

.pull-refresh.visible {
    opacity: 1;
}

.pull-refresh.ready {
    color: #155f9a;
}

.pull-refresh.refreshing
.pull-refresh-icon {
    animation:
        pull-refresh-spin
        0.7s linear infinite;
}

.pull-refresh-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 19px;
    height: 19px;
    font-size: 18px;
    line-height: 1;
}

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

/* 通知時刻と削除ボタン */
.time-input-row {
    display: flex;
    align-items: stretch;
    gap: 8px;
    min-width: 0;
}

.time-input-row input[type="time"] {
    flex: 1 1 auto;
    width: auto;
    min-width: 0;
}

.clear-time-button {
    flex: 0 0 auto;
    min-width: 96px;
    min-height: 44px;

    border:
        1px solid #d7d9de;
    border-radius: 13px;

    padding: 8px 12px;

    background: #f4f5f7;
    color: #333;

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

.clear-time-button:active {
    transform: scale(0.96);
    background: #e5e7eb;
}

@media (max-width: 390px) {
    .clear-time-button {
        min-width: 88px;
        padding-right: 9px;
        padding-left: 9px;
    }
}


/* 画面全体が指に付いて動く更新操作 */
body.pull-content-active .topbar,
body.pull-content-active .app,
body.pull-content-active .add-button {
    transform:
        translate3d(
            0,
            var(--pull-content-offset, 0),
            0
        );

    transition:
        transform
        0.18s
        cubic-bezier(0.22, 0.75, 0.28, 1);

    backface-visibility: hidden;
    will-change: transform;
}

body.pull-content-active.pull-content-dragging
.topbar,
body.pull-content-active.pull-content-dragging
.app,
body.pull-content-active.pull-content-dragging
.add-button {
    transition: none;
}


/* 引っ張っている間は重いぼかしを止める */
body.pull-content-dragging .topbar {
    background:
        rgba(246, 246, 251, 0.98);

    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}


/* taskListPageLayout */
.task-back {
    display: none;
}

body.task-list-mode .summary-cards {
    display: none;
}

body.task-list-mode .task-area {
    padding-top: 0;
}

body.task-list-mode .task-heading {
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr) minmax(180px, 48%);
    align-items: center;
    gap: 10px;
    margin: 0 3px 14px;
}

body.task-list-mode .task-back {
    display: grid;
    width: 42px;
    height: 42px;
    place-items: center;
    border: 0;
    border-radius: 50%;
    padding: 0 2px 3px 0;
    background: #ffffff;
    color: #24272b;
    box-shadow: 0 5px 15px rgba(25, 35, 45, 0.10);
    font-size: 36px;
    font-weight: 500;
    line-height: 1;
}

body.task-list-mode .task-back:active {
    transform: scale(0.93);
    background: #eceef2;
}

body.task-list-mode .task-heading h1 {
    overflow: hidden;
    font-size: clamp(26px, 6.5vw, 34px);
    line-height: 1.15;
    letter-spacing: -0.035em;
    text-overflow: ellipsis;
    white-space: nowrap;
}

body.task-list-mode #tasks {
    padding-bottom: calc(125px + env(safe-area-inset-bottom));
}

@media (max-width: 759px) {
    body.task-list-mode .task-heading {
        grid-template-columns: 44px minmax(0, 1fr);
        align-items: center;
        gap: 9px;
    }

    body.task-list-mode #list-filter {
        grid-column: 1 / -1;
        width: 100%;
        max-width: 100%;
    }
}


/* taskCopyButtonStyles */
.task-content {
    position: relative;
    padding-right: 66px;
}

.item-copy-button {
    min-height: 34px;
    border: 1px solid rgba(21, 151, 235, 0.20);
    border-radius: 11px;
    padding: 6px 9px;
    background: #eef8ff;
    color: #0879c0;
    font-size: 12px;
    font-weight: 750;
    line-height: 1;
    white-space: nowrap;
    cursor: pointer;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
}

.item-copy-button:active {
    transform: scale(0.92);
    background: #dcefff;
}

.task-copy-button {
    position: absolute;
    top: 0;
    right: 0;
    z-index: 2;
}

.editor-copy-button {
    margin-right: auto;
}

@media (max-width: 420px) {
    .task-content {
        padding-right: 58px;
    }

    .item-copy-button {
        padding-right: 7px;
        padding-left: 7px;
        font-size: 11px;
    }
}


/* trashTaskCopyStyles */
.trash-copy-button {
    position: static;
    background: #eef8ff;
    color: #0879c0;
}

@media (max-width: 480px) {
    .trash-actions {
        flex-wrap: wrap;
    }

    .trash-actions > button {
        flex: 1 1 auto;
    }
}


/* copyNoticeVisibleFix */
.notice {
    bottom: calc(
        92px + env(safe-area-inset-bottom)
    );
    z-index: 2147483647;
    pointer-events: none;
}

.notice.show {
    display: block;
    animation: copy-notice-in 160ms ease-out;
}

@keyframes copy-notice-in {
    from {
        opacity: 0;
        transform:
            translateX(-50%)
            translateY(10px)
            scale(0.96);
    }

    to {
        opacity: 1;
        transform:
            translateX(-50%)
            translateY(0)
            scale(1);
    }
}


/* taskListOverlayStyles */
body.task-list-mode {
    overflow: hidden;
}

body.task-list-mode .summary-cards {
    display: grid;
}

.task-list-dialog {
    width: 100%;
    max-width: none;
    height: 100dvh;
    max-height: none;
    overflow: hidden;
    margin: auto;
    border: 0;
    border-radius: 0;
    padding: 0;
    background: #f6f6fb;
    color: var(--text);
    box-shadow: 0 24px 80px rgba(0, 0, 0, 0.35);
}

.task-list-dialog::backdrop {
    background: rgba(0, 0, 0, 0.38);
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
}

.task-list-dialog .task-area {
    width: 100%;
    height: 100%;
    overflow-x: hidden;
    overflow-y: auto;
    box-sizing: border-box;
    padding:
        max(14px, env(safe-area-inset-top))
        max(14px, env(safe-area-inset-right))
        calc(125px + env(safe-area-inset-bottom))
        max(14px, env(safe-area-inset-left));
    background: #f6f6fb;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
}

body.task-list-mode .task-heading {
    position: sticky;
    top: 0;
    z-index: 8;
    padding: 5px 0 12px;
    background: rgba(246, 246, 251, 0.96);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

body.task-list-mode .add-button {
    z-index: 120;
}

@media (min-width: 760px) {
    .task-list-dialog {
        width: min(960px, calc(100vw - 32px));
        max-width: 960px;
        height: calc(100dvh - 32px);
        max-height: calc(100dvh - 32px);
        border-radius: 24px;
    }

    .task-list-dialog .task-area {
        padding: 20px 22px 125px;
    }

    body.task-list-mode .add-button {
        right:
            max(
                34px,
                calc(
                    (100vw - 960px) / 2 +
                    34px
                )
            );
        bottom: 34px;
    }
}


/* globalSearchStyles */
.global-search-dialog {
    width: 100%;
    max-width: none;
    height: 100dvh;
    max-height: none;
    overflow: hidden;
    margin: auto;
    border: 0;
    border-radius: 0;
    padding: 0;
    background: #f6f6fb;
}

.global-search-dialog::backdrop {
    background: rgba(0, 0, 0, 0.38);
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
}

.global-search-shell {
    width: 100%;
    height: 100%;
    overflow-x: hidden;
    overflow-y: auto;
    box-sizing: border-box;
    padding:
        max(14px, env(safe-area-inset-top))
        max(14px, env(safe-area-inset-right))
        calc(35px + env(safe-area-inset-bottom))
        max(14px, env(safe-area-inset-left));
    -webkit-overflow-scrolling: touch;
}

.global-search-header {
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr) 44px;
    align-items: center;
    gap: 10px;
    margin-bottom: 12px;
}

.global-search-header h2 {
    grid-column: 2;
    margin: 0;
    font-size: 28px;
    text-align: center;
}

.global-search-back {
    display: grid;
}

.global-search-input {
    width: 100%;
    height: 48px;
    border: 1px solid #d9dde3;
    border-radius: 15px;
    padding: 0 14px;
    background: #fff;
    color: var(--text);
    font-size: 16px;
}

.global-search-status {
    min-height: 22px;
    margin: 10px 3px;
    color: #747980;
    font-size: 13px;
}

.global-search-results {
    display: grid;
    gap: 18px;
}

.global-search-section {
    display: grid;
    gap: 9px;
}

.global-search-section h3 {
    margin: 8px 3px 1px;
    color: #646a72;
    font-size: 17px;
}

.global-result-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 8px;
    align-items: start;
    overflow: hidden;
    border: 1px solid rgba(25, 31, 42, 0.08);
    border-radius: 17px;
    padding: 11px;
    background: #fff;
    box-shadow: 0 5px 15px rgba(25, 35, 45, 0.06);
}

.global-result-main {
    display: grid;
    min-width: 0;
    gap: 4px;
    border: 0;
    padding: 0;
    background: transparent;
    color: inherit;
    text-align: left;
}

.global-result-kind {
    color: #168fe2;
    font-size: 11px;
    font-weight: 750;
}

.global-result-title {
    overflow-wrap: anywhere;
    font-size: 17px;
}

.global-result-preview {
    display: -webkit-box;
    overflow: hidden;
    color: #60666e;
    font-size: 14px;
    line-height: 1.45;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
}

.global-result-detail {
    color: #8a9097;
    font-size: 12px;
}

.global-result-copy {
    position: static;
}

@media (min-width: 760px) {
    .global-search-dialog {
        width: min(960px, calc(100vw - 32px));
        max-width: 960px;
        height: calc(100dvh - 32px);
        max-height: calc(100dvh - 32px);
        border-radius: 24px;
    }

    .global-search-shell {
        padding: 20px 22px 35px;
    }
}


/* startPageTypography */

/*
 * スタートページ内の文字は、
 * 日本語に適したシステムフォントへ統一する。
 */
.app,
.app button,
.app input,
.app select,
.app textarea,
.global-search-dialog,
.global-search-dialog button,
.global-search-dialog input {
    font-family:
        -apple-system,
        BlinkMacSystemFont,
        "Hiragino Sans",
        "Yu Gothic UI",
        "Yu Gothic",
        Meiryo,
        sans-serif;
}

/* アカウント表示 */
.app .account-name {
    font-size: 16px;
    font-weight: 700;
    line-height: 1.35;
}

.app .account-email {
    font-size: 13px;
    font-weight: 400;
    line-height: 1.35;
}

.app .logout {
    font-size: 14px;
    font-weight: 500;
    line-height: 1.35;
}

/* 上段と検索画面の入力欄 */
#search,
.global-search-input {
    font-size: 16px;
    font-weight: 400;
    line-height: 1.4;
}

/* 今日、日時設定あり、メモなどの件数 */
.app .summary-card strong,
.app .summary-card.trash strong {
    font-size: 48px;
    font-weight: 700;
    line-height: 1;
    letter-spacing: -0.02em;
}

/* 今日、日時設定あり、メモなどの名称 */
.app .summary-card span,
.app .summary-card.trash span {
    font-size: 22px;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: -0.02em;
}

/* 検索画面 */
.global-search-header h2 {
    font-size: 26px;
    font-weight: 700;
    line-height: 1.3;
}

.global-search-section h3 {
    font-size: 17px;
    font-weight: 700;
    line-height: 1.35;
}

@media (max-width: 759px) {
    .app .summary-card strong,
    .app .summary-card.trash strong {
        font-size: 44px;
    }

    .app .summary-card span,
    .app .summary-card.trash span {
        font-size: 20px;
    }
}

@media (max-width: 390px) {
    .app .summary-card strong,
    .app .summary-card.trash strong {
        font-size: 40px;
    }

    .app .summary-card span,
    .app .summary-card.trash span {
        font-size: 18px;
    }

    .global-search-header h2 {
        font-size: 23px;
    }
}


/* globalSearchBackSizeFix */

/*
 * 検索画面の戻る矢印。
 * 44pxの操作領域を保ち、矢印を大きく表示する。
 */
.global-search-dialog .global-search-back {
    display: grid;
    width: 44px;
    height: 44px;
    place-items: center;
    align-self: center;
    border: 0;
    border-radius: 50%;
    padding: 0 2px 4px 0;
    background: #fff;
    color: #24272b;
    box-shadow:
        0 5px 15px
        rgba(25, 35, 45, 0.10);
    font-size: 40px;
    font-weight: 500;
    line-height: 1;
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
}

.global-search-dialog .global-search-back:active {
    background: #eceef2;
    transform: scale(0.93);
}


/* fourUserAccountActions */
.account-actions {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    gap: 12px;
}

.account-admin-link {
    color: #1769aa;
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
}

.account-admin-link:active,
.logout:active {
    opacity: 0.6;
}

@media (max-width: 560px) {
    .account-actions {
        align-items: flex-end;
        flex-direction: column;
        gap: 3px;
    }

    .account-admin-link,
    .logout {
        font-size: 12px;
        line-height: 1.3;
    }
}


/* pcStartPageWheelFix */

/*
 * PCのスタートページでは、ブラウザ画面全体に
 * 縦スクロールを担当させる。
 */
@media (
    min-width: 760px
) and (
    hover: hover
) and (
    pointer: fine
) {
    html {
        height: auto;
        min-height: 100%;
        overflow-x: hidden;
        overflow-y: auto;
        overscroll-behavior-y: auto;
    }

    body:not(.task-list-mode):not(.memo-reordering) {
        height: auto;
        min-height: 100%;
        overflow-x: hidden;
        overflow-y: visible;
        overscroll-behavior-y: auto;
        touch-action: auto;
    }

    body:not(.task-list-mode):not(.memo-reordering)
    .app {
        overflow: visible;
    }
}

/* backButtonCaretFix */
.task-back,
.global-search-back {
    cursor: pointer;
    caret-color: transparent;
    user-select: none;
    -webkit-user-select: none;
}

/* nonInputCursorAndSelectionFix */
html,
body,
body * {
    caret-color: transparent !important;
    -webkit-user-select: none !important;
    user-select: none !important;
    cursor: default !important;
}

a,
button,
[role="button"],
label[for],
input[type="button"],
input[type="submit"],
input[type="reset"],
input[type="checkbox"],
input[type="radio"] {
    cursor: pointer !important;
}

input:not([type]),
input[type="text"],
input[type="search"],
input[type="email"],
input[type="password"],
input[type="url"],
input[type="tel"],
input[type="number"],
textarea,
[contenteditable="true"] {
    caret-color: auto !important;
    -webkit-user-select: text !important;
    user-select: text !important;
    cursor: text !important;
}



/* settingsGearMenuStyles */
.account-bar {
    justify-content: flex-start;
}

.settings-menu-root {
    position: fixed;
    z-index: 120;
    left: max(
        18px,
        env(safe-area-inset-left)
    );
    bottom: max(
        18px,
        env(safe-area-inset-bottom)
    );
}

.settings-gear-button {
    display: grid;
    width: 54px;
    height: 54px;
    place-items: center;
    padding: 0;
    border: 1px solid rgba(20, 30, 45, 0.12);
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.96);
    color: #303640;
    box-shadow:
        0 8px 24px rgba(25, 35, 50, 0.18);
    cursor: pointer !important;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
}

.settings-gear-button:hover {
    background: #f1f3f6;
}

.settings-gear-button:active {
    transform: scale(0.94);
}

.settings-menu-root.is-open
.settings-gear-button {
    background: #e8ebf0;
}

.settings-menu-panel {
    position: absolute;
    left: 0;
    bottom: calc(100% + 11px);
    display: grid;
    width: 230px;
    max-width: calc(100vw - 36px);
    overflow: hidden;
    border: 1px solid rgba(20, 30, 45, 0.10);
    border-radius: 16px;
    background: #fff;
    box-shadow:
        0 14px 38px rgba(20, 30, 45, 0.20);
}

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

.settings-menu-link {
    display: flex;
    min-height: 52px;
    align-items: center;
    gap: 12px;
    padding: 0 17px;
    color: #24272b;
    font-size: 16px;
    font-weight: 650;
    line-height: 1.3;
    text-decoration: none;
    cursor: pointer !important;
}

.settings-menu-link + .settings-menu-link {
    border-top: 1px solid #e7e9ed;
}

.settings-menu-link:hover {
    background: #f3f4f7;
}

.settings-menu-link:active {
    background: #e7e9ed;
}

.settings-menu-link > span:first-child {
    display: grid;
    width: 25px;
    place-items: center;
    flex: 0 0 25px;
    font-size: 19px;
    font-weight: 750;
}

/*
 * 一覧・検索・編集画面を開いている間は、
 * スタートページ用の歯車を隠す。
 */
body.task-list-mode
.settings-menu-root,
body.memo-reordering
.settings-menu-root,
body.notification-opening
.settings-menu-root,
body:has(dialog[open])
.settings-menu-root {
    display: none;
}

@media (max-width: 560px) {
    .settings-menu-root {
        left: max(
            14px,
            env(safe-area-inset-left)
        );
        bottom: max(
            14px,
            env(safe-area-inset-bottom)
        );
    }

    .settings-gear-button {
        width: 50px;
        height: 50px;
    }

    .settings-gear-button svg {
        width: 28px;
        height: 28px;
    }

    .settings-menu-panel {
        width: 220px;
    }

    .settings-menu-link {
        min-height: 50px;
        font-size: 15px;
    }
}


/* settingsGearAccountRowStyles */
.account-bar {
    justify-content: flex-start;
}

.account-bar
.settings-menu-root {
    position: relative;
    z-index: 120;
    inset: auto;
    display: block;
    flex: 0 0 auto;
    margin-left: auto;
}

.account-bar
.settings-gear-button {
    width: 48px;
    height: 48px;
    box-shadow:
        0 5px 15px rgba(25, 35, 50, 0.13);
}

.account-bar
.settings-gear-button svg {
    width: 27px;
    height: 27px;
}

.account-bar
.settings-menu-panel {
    top: calc(100% + 9px);
    right: 0;
    bottom: auto;
    left: auto;
}

/*
 * 未ログイン画面では中央のログインボタンを使うため、
 * 画面末尾にある歯車は表示しない。
 */
body:has(.login-page)
.settings-menu-root {
    display: none !important;
}

@media (max-width: 560px) {
    .account-bar
    .settings-gear-button {
        width: 46px;
        height: 46px;
    }

    .account-bar
    .settings-gear-button svg {
        width: 26px;
        height: 26px;
    }

    .account-bar
    .settings-menu-panel {
        right: 0;
        left: auto;
    }
}


/* unifiedSummaryTileStyles */
:root {
    --summary-tile-height: 128px;
    --app-font:
        -apple-system,
        BlinkMacSystemFont,
        "Hiragino Sans",
        "Yu Gothic UI",
        "Yu Gothic",
        Meiryo,
        sans-serif;
}

html,
body,
button,
input,
select,
textarea {
    font-family: var(--app-font);
}

.summary-cards {
    grid-auto-rows: var(--summary-tile-height);
}

.summary-card,
.memo-entry,
.summary-card.trash {
    height: 100%;
    min-height: 0;
}

.memo-entry {
    grid-column: 1 / -1;
    border: 0;
    border-radius: 27px;
    padding: 19px 20px;
    background:
        linear-gradient(
            135deg,
            #56b69a,
            #26856d
        );
    color: #fff;
    text-align: left;
    box-shadow:
        0 10px 26px
        rgba(38, 133, 109, 0.20);
}

.memo-entry:active {
    transform: scale(0.93);
}

.summary-card strong,
.memo-entry .memo-entry-count {
    top: 18px;
    right: 20px;
    font-size: 48px;
    font-weight: 700;
    line-height: 1;
    letter-spacing: -0.02em;
}

.summary-card span,
.memo-entry .memo-entry-label {
    right: 20px;
    bottom: 19px;
    left: 20px;
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: 22px;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: -0.02em;
}

.summary-card.trash strong {
    top: 18px;
}

.summary-card.trash span {
    bottom: 19px;
}

.summary-sun {
    width: 27px;
    height: 27px;
    flex: 0 0 27px;
    overflow: visible;
    fill: #ffd54f;
    stroke: #ff8a00;
    stroke-width: 2.4;
    stroke-linecap: round;
}

.account-name {
    font-size: 16px;
    font-weight: 700;
    line-height: 1.35;
}

.account-email {
    font-size: 13px;
    font-weight: 400;
    line-height: 1.35;
}

#search,
.global-search-input {
    font-size: 16px;
    font-weight: 400;
    line-height: 1.4;
}

@media (min-width: 760px) {
    :root {
        --summary-tile-height: 145px;
    }
}

@media (max-width: 759px) {
    :root {
        --summary-tile-height: 82px;
    }

    .summary-cards {
        gap: 8px;
        margin-bottom: 18px;
    }

    .summary-card,
    .memo-entry,
    .summary-card.trash {
        border-radius: 20px;
        padding: 11px 14px;
    }

    .summary-card strong,
    .memo-entry .memo-entry-count,
    .summary-card.trash strong {
        top: 11px;
        right: 14px;
        font-size: 31px;
    }

    .summary-card span,
    .memo-entry .memo-entry-label,
    .summary-card.trash span {
        right: 14px;
        bottom: 11px;
        left: 14px;
        font-size: 15px;
    }

    .summary-sun {
        width: 21px;
        height: 21px;
        flex-basis: 21px;
    }

    .account-bar {
        margin-bottom: 10px;
    }
}


/* colorThemeSystem */
html[data-theme="default"] {
    color-scheme: light;
    --theme-background: #f6f6fb;
    --theme-surface: #ffffff;
    --theme-surface-soft: #f0f1f4;
    --theme-text: #101114;
    --theme-subtext: #73777e;
    --theme-line: #e1e4e9;
    --theme-accent: #168fe2;
    --theme-accent-soft: #e7f3fd;
    --theme-topbar: rgba(246, 246, 251, 0.94);
    --tile-today: linear-gradient(135deg, #5fc1ef, #168fe2);
    --tile-dated: linear-gradient(135deg, #ef8790, #e84d60);
    --tile-all: linear-gradient(135deg, #4c4c4e, #1f2021);
    --tile-flagged: linear-gradient(135deg, #fac983, #f0a140);
    --tile-urgent: linear-gradient(135deg, #ed75a5, #df4e89);
    --tile-completed: linear-gradient(135deg, #9da6ab, #778188);
    --tile-memo: linear-gradient(135deg, #56b69a, #26856d);
    --tile-trash: linear-gradient(135deg, #8174df, #5444b8);
}

html[data-theme="stylish"] {
    color-scheme: light;
    --theme-background: #f3f0ed;
    --theme-surface: #fffdfb;
    --theme-surface-soft: #ebe6e1;
    --theme-text: #1f2023;
    --theme-subtext: #6f6862;
    --theme-line: #dcd4cd;
    --theme-accent: #7655a6;
    --theme-accent-soft: #eee7f6;
    --theme-topbar: rgba(243, 240, 237, 0.94);
    --tile-today: linear-gradient(135deg, #d5a64a, #a56c17);
    --tile-dated: linear-gradient(135deg, #b86a73, #7f3744);
    --tile-all: linear-gradient(135deg, #48494d, #202126);
    --tile-flagged: linear-gradient(135deg, #9b7aca, #684995);
    --tile-urgent: linear-gradient(135deg, #c85e8f, #8d315f);
    --tile-completed: linear-gradient(135deg, #85888c, #5c5e62);
    --tile-memo: linear-gradient(135deg, #438f83, #235e57);
    --tile-trash: linear-gradient(135deg, #6e6380, #42384f);
}

html[data-theme="cool"] {
    color-scheme: light;
    --theme-background: #edf6fb;
    --theme-surface: #ffffff;
    --theme-surface-soft: #e4f0f7;
    --theme-text: #102431;
    --theme-subtext: #5e7482;
    --theme-line: #cedfe9;
    --theme-accent: #087eae;
    --theme-accent-soft: #dff3fb;
    --theme-topbar: rgba(237, 246, 251, 0.95);
    --tile-today: linear-gradient(135deg, #46b8d4, #117da4);
    --tile-dated: linear-gradient(135deg, #5295c7, #315e9b);
    --tile-all: linear-gradient(135deg, #425d6d, #203845);
    --tile-flagged: linear-gradient(135deg, #59c0b4, #268a80);
    --tile-urgent: linear-gradient(135deg, #687bc8, #404d9c);
    --tile-completed: linear-gradient(135deg, #8aa4b3, #607887);
    --tile-memo: linear-gradient(135deg, #47a6b6, #207083);
    --tile-trash: linear-gradient(135deg, #7186a9, #455777);
}

html[data-theme="wafu"] {
    color-scheme: light;
    --theme-background: #f7f1e6;
    --theme-surface: #fffdf7;
    --theme-surface-soft: #eee5d6;
    --theme-text: #2d2925;
    --theme-subtext: #786e62;
    --theme-line: #ded2c1;
    --theme-accent: #b14d32;
    --theme-accent-soft: #f7e5dc;
    --theme-topbar: rgba(247, 241, 230, 0.95);
    --tile-today: linear-gradient(135deg, #d99b3d, #b86721);
    --tile-dated: linear-gradient(135deg, #d16b56, #a33f31);
    --tile-all: linear-gradient(135deg, #4c4a43, #292a27);
    --tile-flagged: linear-gradient(135deg, #c29b48, #8f6b24);
    --tile-urgent: linear-gradient(135deg, #a75b73, #73364c);
    --tile-completed: linear-gradient(135deg, #8e8a7d, #66645c);
    --tile-memo: linear-gradient(135deg, #79945c, #4b6739);
    --tile-trash: linear-gradient(135deg, #716497, #493d70);
}

html[data-theme="fairy"] {
    color-scheme: light;
    --theme-background: #fff3fa;
    --theme-surface: #fffafd;
    --theme-surface-soft: #f8e6f2;
    --theme-text: #3b2638;
    --theme-subtext: #80667a;
    --theme-line: #eed5e5;
    --theme-accent: #b44c92;
    --theme-accent-soft: #f9e2f2;
    --theme-topbar: rgba(255, 243, 250, 0.95);
    --tile-today: linear-gradient(135deg, #f2ad65, #df7c52);
    --tile-dated: linear-gradient(135deg, #e98cad, #c65d89);
    --tile-all: linear-gradient(135deg, #81719a, #554666);
    --tile-flagged: linear-gradient(135deg, #d6a4e7, #a66bc3);
    --tile-urgent: linear-gradient(135deg, #ee84b9, #cc4c91);
    --tile-completed: linear-gradient(135deg, #afa4bd, #837690);
    --tile-memo: linear-gradient(135deg, #7ac5b2, #48937f);
    --tile-trash: linear-gradient(135deg, #a48bd7, #735bb0);
}

html[data-theme="eco"] {
    color-scheme: light;
    --theme-background: #edf5ea;
    --theme-surface: #fbfdf9;
    --theme-surface-soft: #e3eddf;
    --theme-text: #203021;
    --theme-subtext: #647162;
    --theme-line: #d2dfce;
    --theme-accent: #3b7d4a;
    --theme-accent-soft: #e0f0df;
    --theme-topbar: rgba(237, 245, 234, 0.95);
    --tile-today: linear-gradient(135deg, #d5aa42, #a87520);
    --tile-dated: linear-gradient(135deg, #bf7657, #934b35);
    --tile-all: linear-gradient(135deg, #536252, #2f3d30);
    --tile-flagged: linear-gradient(135deg, #91aa4f, #637c2e);
    --tile-urgent: linear-gradient(135deg, #bd6d70, #91464c);
    --tile-completed: linear-gradient(135deg, #8b9889, #657264);
    --tile-memo: linear-gradient(135deg, #66a96d, #367444);
    --tile-trash: linear-gradient(135deg, #768b69, #4c6043);
}

html[data-theme="space"] {
    color-scheme: dark;
    --theme-background: #0d1024;
    --theme-surface: #171b35;
    --theme-surface-soft: #202644;
    --theme-text: #f3f5ff;
    --theme-subtext: #aeb8d7;
    --theme-line: #343c64;
    --theme-accent: #78a8ff;
    --theme-accent-soft: #242f55;
    --theme-topbar: rgba(13, 16, 36, 0.95);
    --tile-today: linear-gradient(135deg, #3477d4, #234796);
    --tile-dated: linear-gradient(135deg, #a14380, #61265d);
    --tile-all: linear-gradient(135deg, #303956, #171c32);
    --tile-flagged: linear-gradient(135deg, #9962c9, #5d3995);
    --tile-urgent: linear-gradient(135deg, #d2558e, #8f2c68);
    --tile-completed: linear-gradient(135deg, #596782, #35415d);
    --tile-memo: linear-gradient(135deg, #288b8e, #17575f);
    --tile-trash: linear-gradient(135deg, #6153b1, #382d78);
}

html[data-theme] body,
html[data-theme] .task-list-dialog,
html[data-theme] .global-search-dialog,
html[data-theme] .memo-view,
html[data-theme] .memo-editor {
    background: var(--theme-background);
    color: var(--theme-text);
}

html[data-theme] .topbar {
    background: var(--theme-topbar);
}

html[data-theme] .summary-card.blue {
    background: var(--tile-today);
}

html[data-theme] .summary-card.red {
    background: var(--tile-dated);
}

html[data-theme] .summary-card.black {
    background: var(--tile-all);
}

html[data-theme] .summary-card.orange {
    background: var(--tile-flagged);
}

html[data-theme] .summary-card.pink {
    background: var(--tile-urgent);
}

html[data-theme] .summary-card.gray {
    background: var(--tile-completed);
}

html[data-theme] .memo-entry {
    background: var(--tile-memo);
}

html[data-theme] .summary-card.trash {
    background: var(--tile-trash);
}

html[data-theme] .task-row,
html[data-theme] .global-result-row,
html[data-theme] .memo-row,
html[data-theme] .settings-menu-panel,
html[data-theme] .theme-dialog-card {
    border-color: var(--theme-line);
    background: var(--theme-surface);
    color: var(--theme-text);
}

html[data-theme] input,
html[data-theme] textarea,
html[data-theme] select,
html[data-theme] .memo-back,
html[data-theme] .memo-trash-toggle,
html[data-theme] .memo-button,
html[data-theme] .memo-close,
html[data-theme] .round-button,
html[data-theme] .settings-gear-button {
    border-color: var(--theme-line);
    background: var(--theme-surface);
    color: var(--theme-text);
}

html[data-theme] .memo-new,
html[data-theme] .memo-save {
    background: var(--theme-accent);
    color: #fff;
}

html[data-theme] .account-email,
html[data-theme] .global-search-status,
html[data-theme] .memo-row-preview,
html[data-theme] .memo-row-date,
html[data-theme] .memo-dates,
html[data-theme] .memo-reorder-help,
html[data-theme] .theme-dialog-description,
html[data-theme] .theme-save-status {
    color: var(--theme-subtext);
}

html[data-theme] .settings-menu-link {
    color: var(--theme-text);
}

html[data-theme] .settings-menu-link:hover,
html[data-theme] .theme-choice:hover {
    background: var(--theme-surface-soft);
}

.settings-theme-open {
    width: 100%;
    border: 0;
    font: inherit;
    text-align: left;
}

.theme-dialog {
    width: min(520px, calc(100vw - 28px));
    max-width: 520px;
    border: 0;
    border-radius: 24px;
    padding: 0;
    background: transparent;
}

.theme-dialog::backdrop {
    background: rgba(0, 0, 0, 0.42);
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
}

.theme-dialog-card {
    border: 1px solid var(--theme-line);
    border-radius: 24px;
    padding: 20px;
    box-shadow: 0 24px 70px rgba(0, 0, 0, 0.25);
}

.theme-dialog-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.theme-dialog-header h2 {
    margin: 0;
    font-size: 24px;
    font-weight: 700;
}

.theme-dialog-close {
    display: grid;
    width: 42px;
    height: 42px;
    place-items: center;
    border: 0;
    border-radius: 50%;
    background: var(--theme-surface-soft);
    color: var(--theme-text);
    font-size: 27px;
    line-height: 1;
}

.theme-dialog-description {
    margin: 8px 0 16px;
    font-size: 14px;
}

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

.theme-choice {
    display: flex;
    min-height: 58px;
    align-items: center;
    gap: 10px;
    border: 2px solid var(--theme-line);
    border-radius: 16px;
    padding: 9px 11px;
    background: var(--theme-surface);
    color: var(--theme-text);
    font: inherit;
    font-size: 14px;
    font-weight: 700;
    text-align: left;
}

.theme-choice.is-selected {
    border-color: var(--theme-accent);
    box-shadow:
        0 0 0 3px
        color-mix(
            in srgb,
            var(--theme-accent) 18%,
            transparent
        );
}

.theme-choice:disabled {
    opacity: 0.55;
}

.theme-swatch {
    width: 31px;
    height: 31px;
    flex: 0 0 31px;
    border: 2px solid rgba(255, 255, 255, 0.72);
    border-radius: 50%;
    box-shadow: 0 2px 7px rgba(0, 0, 0, 0.17);
}

.theme-swatch-default {
    background: linear-gradient(135deg, #168fe2, #e45691);
}

.theme-swatch-stylish {
    background: linear-gradient(135deg, #202126, #d5a64a);
}

.theme-swatch-cool {
    background: linear-gradient(135deg, #117da4, #687bc8);
}

.theme-swatch-wafu {
    background: linear-gradient(135deg, #b14d32, #79945c);
}

.theme-swatch-fairy {
    background: linear-gradient(135deg, #ee84b9, #a48bd7);
}

.theme-swatch-eco {
    background: linear-gradient(135deg, #367444, #d5aa42);
}

.theme-swatch-space {
    background: linear-gradient(135deg, #171c32, #6153b1);
}

.theme-save-status {
    min-height: 21px;
    margin: 14px 2px 0;
    font-size: 13px;
}

.theme-save-status.has-error {
    color: #c83d4e;
    font-weight: 700;
}

@media (max-width: 560px) {
    .theme-dialog-card {
        padding: 17px;
    }

    .theme-choice-grid {
        grid-template-columns: 1fr;
        max-height: 56vh;
        overflow-y: auto;
    }

    .theme-choice {
        min-height: 54px;
    }
}


/* expandedColorThemes */
html[data-theme="monotone"] {
    color-scheme: light;
    --theme-background: #f1f1f1;
    --theme-surface: #ffffff;
    --theme-surface-soft: #e7e7e7;
    --theme-text: #161616;
    --theme-subtext: #686868;
    --theme-line: #d2d2d2;
    --theme-accent: #3f3f3f;
    --theme-accent-soft: #e2e2e2;
    --theme-topbar: rgba(241, 241, 241, 0.95);
    --tile-today: linear-gradient(135deg, #777777, #454545);
    --tile-dated: linear-gradient(135deg, #8c8c8c, #565656);
    --tile-all: linear-gradient(135deg, #3e3e3e, #171717);
    --tile-flagged: linear-gradient(135deg, #999999, #676767);
    --tile-urgent: linear-gradient(135deg, #747474, #424242);
    --tile-completed: linear-gradient(135deg, #aaaaaa, #747474);
    --tile-memo: linear-gradient(135deg, #666666, #363636);
    --tile-trash: linear-gradient(135deg, #858585, #525252);
}

html[data-theme="hinomaru"] {
    color-scheme: light;
    --theme-background: #fffafa;
    --theme-surface: #ffffff;
    --theme-surface-soft: #f9e9e9;
    --theme-text: #261d1d;
    --theme-subtext: #786767;
    --theme-line: #ead6d6;
    --theme-accent: #bc002d;
    --theme-accent-soft: #f9e2e7;
    --theme-topbar: rgba(255, 250, 250, 0.96);
    --tile-today: linear-gradient(135deg, #e4445e, #bc002d);
    --tile-dated: linear-gradient(135deg, #ce344d, #9f0027);
    --tile-all: linear-gradient(135deg, #5d4b4e, #302629);
    --tile-flagged: linear-gradient(135deg, #e06b6b, #b42b3d);
    --tile-urgent: linear-gradient(135deg, #d51d45, #97001f);
    --tile-completed: linear-gradient(135deg, #a99a9c, #76686b);
    --tile-memo: linear-gradient(135deg, #b5525f, #85313e);
    --tile-trash: linear-gradient(135deg, #81525d, #56333c);
}

html[data-theme="spring"] {
    color-scheme: light;
    --theme-background: #fff4f7;
    --theme-surface: #fffdfd;
    --theme-surface-soft: #f9e6ed;
    --theme-text: #3b2930;
    --theme-subtext: #836c75;
    --theme-line: #eed4dd;
    --theme-accent: #c95c83;
    --theme-accent-soft: #fae3eb;
    --theme-topbar: rgba(255, 244, 247, 0.95);
    --tile-today: linear-gradient(135deg, #f0a261, #d97950);
    --tile-dated: linear-gradient(135deg, #ef9cb8, #cf668b);
    --tile-all: linear-gradient(135deg, #807080, #514754);
    --tile-flagged: linear-gradient(135deg, #d7aa63, #ad7b35);
    --tile-urgent: linear-gradient(135deg, #e87eaa, #c34e83);
    --tile-completed: linear-gradient(135deg, #aaa2ac, #7d747e);
    --tile-memo: linear-gradient(135deg, #8fbd83, #5b8b55);
    --tile-trash: linear-gradient(135deg, #aa91c8, #7862a2);
}

html[data-theme="summer"] {
    color-scheme: light;
    --theme-background: #eef9ff;
    --theme-surface: #ffffff;
    --theme-surface-soft: #e0f2fb;
    --theme-text: #15303e;
    --theme-subtext: #627b88;
    --theme-line: #cae2ed;
    --theme-accent: #0988bd;
    --theme-accent-soft: #dcf3fc;
    --theme-topbar: rgba(238, 249, 255, 0.95);
    --tile-today: linear-gradient(135deg, #42c7e8, #0788bd);
    --tile-dated: linear-gradient(135deg, #ff9474, #e35f44);
    --tile-all: linear-gradient(135deg, #3e6e82, #214453);
    --tile-flagged: linear-gradient(135deg, #f1c44f, #d69520);
    --tile-urgent: linear-gradient(135deg, #ef6c96, #ca3c70);
    --tile-completed: linear-gradient(135deg, #8ca9b7, #617c89);
    --tile-memo: linear-gradient(135deg, #42bfa7, #168877);
    --tile-trash: linear-gradient(135deg, #628fd3, #3c63a8);
}

html[data-theme="autumn"] {
    color-scheme: light;
    --theme-background: #f7eee2;
    --theme-surface: #fffaf3;
    --theme-surface-soft: #eee0ce;
    --theme-text: #34271d;
    --theme-subtext: #786757;
    --theme-line: #dfcfbb;
    --theme-accent: #a45128;
    --theme-accent-soft: #f5dfcf;
    --theme-topbar: rgba(247, 238, 226, 0.95);
    --tile-today: linear-gradient(135deg, #dc9b3b, #a95f1d);
    --tile-dated: linear-gradient(135deg, #c96f48, #934029);
    --tile-all: linear-gradient(135deg, #55473c, #2e2722);
    --tile-flagged: linear-gradient(135deg, #bd8a36, #846022);
    --tile-urgent: linear-gradient(135deg, #a85043, #753129);
    --tile-completed: linear-gradient(135deg, #968b7d, #685f55);
    --tile-memo: linear-gradient(135deg, #78824a, #4d572d);
    --tile-trash: linear-gradient(135deg, #77576f, #4d3548);
}

html[data-theme="winter"] {
    color-scheme: light;
    --theme-background: #f1f6fb;
    --theme-surface: #ffffff;
    --theme-surface-soft: #e7eff7;
    --theme-text: #1c2d3d;
    --theme-subtext: #687b8b;
    --theme-line: #d3e0eb;
    --theme-accent: #517ea7;
    --theme-accent-soft: #e1edf6;
    --theme-topbar: rgba(241, 246, 251, 0.96);
    --tile-today: linear-gradient(135deg, #91bdd5, #5686a7);
    --tile-dated: linear-gradient(135deg, #829ec5, #536e9e);
    --tile-all: linear-gradient(135deg, #5a6877, #303d4c);
    --tile-flagged: linear-gradient(135deg, #a8b6c8, #77889e);
    --tile-urgent: linear-gradient(135deg, #8b86bc, #625c94);
    --tile-completed: linear-gradient(135deg, #a3adb7, #747f8a);
    --tile-memo: linear-gradient(135deg, #79a9aa, #4d7b7d);
    --tile-trash: linear-gradient(135deg, #7687a8, #4f607f);
}

html[data-theme="ocean"] {
    color-scheme: light;
    --theme-background: #e9f8fa;
    --theme-surface: #fbffff;
    --theme-surface-soft: #ddf1f3;
    --theme-text: #103239;
    --theme-subtext: #5b7b81;
    --theme-line: #c8e2e5;
    --theme-accent: #087d91;
    --theme-accent-soft: #d9f1f4;
    --theme-topbar: rgba(233, 248, 250, 0.95);
    --tile-today: linear-gradient(135deg, #39bed2, #087d9e);
    --tile-dated: linear-gradient(135deg, #3a98c1, #24628d);
    --tile-all: linear-gradient(135deg, #315c6a, #193844);
    --tile-flagged: linear-gradient(135deg, #48b8aa, #237d76);
    --tile-urgent: linear-gradient(135deg, #4a86b7, #315a8b);
    --tile-completed: linear-gradient(135deg, #82a7ae, #587b82);
    --tile-memo: linear-gradient(135deg, #30a897, #167368);
    --tile-trash: linear-gradient(135deg, #527ca4, #345575);
}

html[data-theme="tropical"] {
    color-scheme: light;
    --theme-background: #fff7e8;
    --theme-surface: #fffdf8;
    --theme-surface-soft: #faead0;
    --theme-text: #372b1d;
    --theme-subtext: #7b6b56;
    --theme-line: #ead7b9;
    --theme-accent: #e46629;
    --theme-accent-soft: #fde4d2;
    --theme-topbar: rgba(255, 247, 232, 0.95);
    --tile-today: linear-gradient(135deg, #ffc742, #ed8322);
    --tile-dated: linear-gradient(135deg, #ff7f67, #df4054);
    --tile-all: linear-gradient(135deg, #275f68, #173b45);
    --tile-flagged: linear-gradient(135deg, #efb933, #cb7c16);
    --tile-urgent: linear-gradient(135deg, #ec5eaa, #c53283);
    --tile-completed: linear-gradient(135deg, #6ba8a5, #477a7a);
    --tile-memo: linear-gradient(135deg, #42b968, #21833f);
    --tile-trash: linear-gradient(135deg, #8565c6, #563a9b);
}

html[data-theme="horror"] {
    color-scheme: dark;
    --theme-background: #171113;
    --theme-surface: #241a1e;
    --theme-surface-soft: #322328;
    --theme-text: #f3e8e9;
    --theme-subtext: #c3a7ab;
    --theme-line: #4d343a;
    --theme-accent: #b62038;
    --theme-accent-soft: #3c2027;
    --theme-topbar: rgba(23, 17, 19, 0.96);
    --tile-today: linear-gradient(135deg, #9b2836, #57131f);
    --tile-dated: linear-gradient(135deg, #7e1f30, #430d18);
    --tile-all: linear-gradient(135deg, #34272b, #120d0f);
    --tile-flagged: linear-gradient(135deg, #75502a, #3f2817);
    --tile-urgent: linear-gradient(135deg, #b21831, #650b1e);
    --tile-completed: linear-gradient(135deg, #55484b, #2d2326);
    --tile-memo: linear-gradient(135deg, #455c46, #253426);
    --tile-trash: linear-gradient(135deg, #59394f, #301d2a);
}

.theme-swatch-monotone {
    background: linear-gradient(135deg, #171717, #aaaaaa);
}

.theme-swatch-hinomaru {
    background: linear-gradient(135deg, #ffffff 48%, #bc002d 49%);
}

.theme-swatch-spring {
    background: linear-gradient(135deg, #ef9cb8, #8fbd83);
}

.theme-swatch-summer {
    background: linear-gradient(135deg, #42c7e8, #f1c44f);
}

.theme-swatch-autumn {
    background: linear-gradient(135deg, #dc9b3b, #934029);
}

.theme-swatch-winter {
    background: linear-gradient(135deg, #dceaf4, #536e9e);
}

.theme-swatch-ocean {
    background: linear-gradient(135deg, #39bed2, #193844);
}

.theme-swatch-tropical {
    background: linear-gradient(135deg, #ffc742, #ec5eaa, #42b968);
}

.theme-swatch-horror {
    background: linear-gradient(135deg, #120d0f, #b21831);
}

/*
 * 配色が増えても画面内に収める。
 */
.theme-dialog-card {
    display: flex;
    max-height: min(88dvh, 760px);
    flex-direction: column;
}

.theme-choice-grid {
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
}


/* taskUnsavedDialogStyles */

#task-unsaved-dialog .confirm-icon {
    background: #fff3cf;
    color: #a95f00;

    box-shadow:
        0 8px 19px
        rgba(169, 95, 0, 0.14);
}

.task-unsaved-actions {
    grid-template-columns:
        minmax(0, 1fr);
}

.task-unsaved-actions button {
    width: 100%;
}


/* memoUnsavedDialogStyles */

#memo-unsaved-dialog .confirm-icon {
    background: #fff3cf;
    color: #a95f00;

    box-shadow:
        0 8px 19px
        rgba(169, 95, 0, 0.14);
}

.memo-unsaved-actions {
    grid-template-columns:
        minmax(0, 1fr);
}

.memo-unsaved-actions button {
    width: 100%;
}

/* taskBannerPointer */
.task-row,
.task-row * {
    cursor: pointer !important;
}

/* taskBottomNavigationStyles */
.task-bottom-bar {
    position: fixed;
    z-index: 40;
    right: 0;
    bottom: 0;
    left: 0;
    display: grid;
    grid-template-columns:
        repeat(3, minmax(0, 1fr));
    gap: 8px;
    padding:
        9px
        max(12px, env(safe-area-inset-right))
        calc(9px + env(safe-area-inset-bottom))
        max(12px, env(safe-area-inset-left));
    border-top:
        1px solid rgba(30, 45, 55, 0.1);
    background:
        rgba(246, 246, 251, 0.96);
    box-shadow:
        0 -7px 22px
        rgba(25, 35, 45, 0.08);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

.task-bottom-button {
    min-height: 45px;
    border: 0;
    border-radius: 14px;
    padding: 8px 7px;
    background: #fff;
    color: #30343a;
    font-size: 15px;
    font-weight: 750;
    cursor: pointer !important;
}

.task-bottom-new {
    background: #168fe2;
    color: #fff;
}

#task-list-dialog > #add {
    display: none !important;
}

/* taskBottomNavigationDesktopWidth */
@media (min-width: 760px) {
    .task-bottom-bar {
        right: auto;
        left: 50%;
        width:
            min(960px, calc(100vw - 32px));
        box-sizing: border-box;
        transform: translateX(-50%);
    }
}

/* iphoneStartPageFit */

/*
 * iPhoneの拡大表示でも、スタート画面のカードを
 * スクロールせず確認できる高さにする。
 */
@media (
    max-width: 759px
) and (
    max-height: 900px
) {
    .topbar {
        gap: 8px;
        padding:
            max(8px, env(safe-area-inset-top))
            max(12px, env(safe-area-inset-right))
            7px
            max(12px, env(safe-area-inset-left));
    }

    .search {
        min-height: 44px;
        border-radius: 22px;
        padding: 9px 12px;
        font-size: 14px;
    }

    .round-button {
        width: 44px;
        height: 44px;
        flex-basis: 44px;
        font-size: 21px;
    }

    .app {
        padding:
            0
            max(12px, env(safe-area-inset-right))
            calc(
                66px +
                env(safe-area-inset-bottom)
            )
            max(12px, env(safe-area-inset-left));
    }

    .account-bar {
        gap: 8px;
        margin:
            0
            3px
            6px;
    }

    .account {
        gap: 8px;
    }

    .account-picture {
        width: 36px;
        height: 36px;
        flex-basis: 36px;
    }

    .app .account-name {
        font-size: 15px;
        line-height: 1.2;
    }

    .app .account-email {
        margin-top: 0;
        font-size: 12px;
        line-height: 1.2;
    }

    :root {
        --summary-tile-height: 64px;
    }

    .summary-cards {
        gap: 6px;
        margin-bottom: 8px;
    }

    .summary-card,
    .memo-entry,
    .summary-card.trash {
        border-radius: 16px;
        padding: 8px 12px;
    }

    .summary-card strong,
    .memo-entry .memo-entry-count,
    .summary-card.trash strong {
        top: 7px;
        right: 12px;
        font-size: 25px;
    }

    .summary-card span,
    .memo-entry .memo-entry-label,
    .summary-card.trash span {
        right: 12px;
        bottom: 7px;
        left: 12px;
        gap: 4px;
        font-size: 14px;
        line-height: 1.15;
    }

    .summary-sun {
        width: 18px;
        height: 18px;
        flex-basis: 18px;
    }

    .add-button {
        right:
            max(
                14px,
                env(safe-area-inset-right)
            );

        bottom:
            max(
                10px,
                env(safe-area-inset-bottom)
            );

        width: 54px;
        height: 54px;
        font-size: 34px;
    }
}

/* shortPcStartPageFit */

/*
 * 画面の高さが低いノートパソコンでは、
 * スタート画面のカードを低くして一覧性を上げる。
 */
@media (
    min-width: 760px
) {
    :root {
        --summary-tile-height: 96px;
    }

    .summary-cards {
        gap: 9px;
        margin-bottom: 12px;
    }

    .summary-card,
    .memo-entry,
    .summary-card.trash {
        border-radius: 21px;
        padding: 12px 16px;
    }

    .summary-card strong,
    .memo-entry .memo-entry-count,
    .summary-card.trash strong {
        top: 11px;
        right: 16px;
        font-size: 34px;
    }

    .summary-card span,
    .memo-entry .memo-entry-label,
    .summary-card.trash span {
        right: 16px;
        bottom: 11px;
        left: 16px;
        gap: 6px;
        font-size: 17px;
        line-height: 1.15;
    }

    .summary-sun {
        width: 22px;
        height: 22px;
        flex-basis: 22px;
    }
}

/* desktopHomeAddBelowCards */

/*
 * PC版のスタート画面では、追加ボタンを固定表示から外し、
 * カード一覧の下で右寄せにする。
 */
@media (min-width: 760px) {
    .app {
        padding-bottom: 8px;
    }

    #home-add.home-add-button {
        position: static;
        display: block;
        margin:
            10px
            max(
                18px,
                calc(
                    (100vw - 960px) / 2 +
                    18px
                )
            )
            24px
            auto;
        width: 62px;
        height: 62px;
        font-size: 39px;
    }
}