/* ポモドーロタイマーの画面スタイル（Tailwindで表現しない部分）。tailwind.css / all.min.css の後に読み込みます。 */
body {
    transition: background-color 0.5s ease;
}

.progress-ring__circle {
    transition: stroke-dashoffset 0.35s ease-in-out, stroke 0.5s ease;
    transform: rotate(-90deg);
    transform-origin: 50% 50%;
}

.glass-panel {
    background: rgba(255, 255, 255, 0.03);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid rgba(255, 255, 255, 0.08);
}

.glass-modal {
    background: rgba(20, 22, 30, 0.88);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.12);
}

/* スライダーのカスタムデザイン */
input[type=range] {
    -webkit-appearance: none;
    appearance: none;
    background: rgba(255, 255, 255, 0.15);
    border-radius: 8px;
    height: 6px;
    cursor: pointer;
    touch-action: pan-y;
}
input[type=range]:focus-visible {
    outline: 2px solid rgba(45, 212, 191, 0.9);
    outline-offset: 4px;
}
input[type=range].snap-feedback::-webkit-slider-thumb {
    transform: scale(1.35);
    background: #5eead4;
}
input[type=range]::-webkit-slider-thumb {
    -webkit-appearance: none;
    height: 16px;
    width: 16px;
    border-radius: 50%;
    background: #ffffff;
    cursor: pointer;
    box-shadow: 0 2px 6px rgba(0,0,0,0.4);
    transition: transform 0.1s ease;
}
input[type=range]::-webkit-slider-thumb:hover {
    transform: scale(1.2);
}

::-webkit-scrollbar {
    width: 6px;
}
::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.1);
}
::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.2);
    border-radius: 3px;
}

/* 設定モーダル：中央配置・安定したスクロール領域 */
#settingsModal {
    box-sizing: border-box;
    align-items: center !important;
    justify-content: center !important;
    padding: 16px !important;
    overflow-y: auto;
}
#settingsModal > #modalContent {
    box-sizing: border-box;
    width: min(900px, calc(100vw - 32px)) !important;
    max-width: 900px !important;
    min-width: 0;
    height: min(900px, calc(100vh - 32px));
    max-height: calc(100vh - 32px) !important;
    min-height: 0;
    flex: 0 1 auto;
    margin: auto !important;
    align-self: center;
}
#settingsScrollArea { min-width: 0; width: 100%; min-height: 0; flex: 1 1 auto; }
#settingsScrollArea input,
#settingsScrollArea textarea,
#settingsScrollArea select { box-sizing: border-box; max-width: 100%; }
.notice-image-section {
    display: block;
    width: 100%;
    min-width: 0;
    box-sizing: border-box;
    margin-top: 1rem;
    padding: 1rem;
    border: 1px solid rgba(255,255,255,.12);
    border-radius: 1rem;
    background: rgba(255,255,255,.035);
}
.notice-image-input {
    display: block;
    width: 100%;
    min-width: 0;
    white-space: normal;
    font-size: 12px;
    color: #dbe4ef;
}
.notice-image-input::file-selector-button {
    display: inline-block;
    max-width: 100%;
    margin: 0 .65rem .35rem 0;
    padding: .55rem .8rem;
    border: 0;
    border-radius: .6rem;
    background: rgba(255,255,255,.12);
    color: #fff;
    cursor: pointer;
}
@media (max-width: 620px) {
    #settingsModal { padding: 8px !important; }
    #settingsModal > #modalContent {
        width: calc(100vw - 16px) !important;
        height: calc(100vh - 16px);
        max-height: calc(100vh - 16px) !important;
        padding: 16px !important;
        border-radius: 18px !important;
    }
    #settingsScrollArea { padding-right: 4px; }
    .notice-switch { min-height: 68px; font-size: .78rem; padding: .6rem .25rem; }
    .notice-panel .notice-card-content { padding: .85rem; }
    #settingsSaveStatus { overflow-wrap: anywhere; }
}

/* 設定画面：読みやすさと操作性 */
#settingsScrollArea { scrollbar-color: rgba(148,163,184,.55) rgba(255,255,255,.04); }
#settingsScrollArea label { font-size: 0.8rem; color: #dbe4ef; }
#settingsScrollArea input:not([type=range]):not([type=checkbox]), #settingsScrollArea textarea, #settingsScrollArea select { font-size:14px; min-height:42px; }
#settingsScrollArea input:focus-visible, #settingsScrollArea textarea:focus-visible, #settingsScrollArea select:focus-visible, #settingsScrollArea button:focus-visible, .notice-switch:focus-visible { outline:2px solid #5eead4; outline-offset:3px; }

/* Keep category shortcuts visible while the settings list scrolls. */
/* 広い画面：左にカテゴリ一覧（固定表示）、右に設定パネル。Gridだと行の高さが潰れてパネルが重なるため、floatで左列を作る。 */
#settingsScrollArea { display:block; }
.settings-quick-nav { position:sticky; top:0; z-index:20; float:left; width:190px; margin:0 1rem .75rem 0; display:flex; flex-direction:column; flex-wrap:nowrap; gap:.35rem; padding:.65rem; border:1px solid rgba(255,255,255,.09); border-radius:1rem; background:rgba(17,19,26,.97); box-shadow:0 8px 18px rgba(0,0,0,.22); backdrop-filter:blur(12px); }
#settingsScrollArea > :not(.settings-quick-nav) { margin-left:206px; min-width:0; }
.settings-quick-nav button { width:100%; text-align:left; border:1px solid rgba(255,255,255,.12); border-radius:.7rem; padding:.55rem .65rem; color:#dbe4ef; background:rgba(255,255,255,.04); font-size:.75rem; font-weight:600; transition:background .15s,border-color .15s; }
.settings-quick-nav button:hover, .settings-quick-nav button:focus-visible { background:rgba(45,212,191,.12); border-color:rgba(45,212,191,.45); outline:none; }
.settings-quick-nav button.is-active { color:#042f2e; background:#5eead4; border-color:#5eead4; box-shadow:0 0 0 2px rgba(94,234,212,.14); }
.settings-quick-nav button.is-active i { color:#042f2e; }
.settings-group { border:1px solid rgba(255,255,255,.1); border-radius:1rem; background:rgba(255,255,255,.025); scroll-margin-top:.5rem; overflow:hidden; }
.settings-group > summary { display:flex; align-items:center; justify-content:space-between; gap:.75rem; padding:.9rem 1rem; cursor:pointer; list-style:none; color:#f1f5f9; font-size:.875rem; font-weight:700; }
.settings-group > summary::-webkit-details-marker { display:none; }
.settings-group > summary::after { content:'+'; color:#5eead4; font-size:1.25rem; line-height:1; }
.settings-group[open] > summary::after { content:'−'; }
.settings-group > summary:focus-visible { outline:2px solid #5eead4; outline-offset:-3px; }
.settings-group-body { padding:0 1rem 1rem; }
.settings-group-note { display:block; margin-top:.2rem; color:#94a3b8; font-size:.7rem; font-weight:400; line-height:1.45; }
.settings-section-title { display:flex; align-items:center; gap:.65rem; font-size:.95rem; font-weight:700; color:#f8fafc; }
.settings-section-title .section-icon { display:grid; place-items:center; width:2rem; height:2rem; border-radius:.7rem; background:rgba(94,234,212,.12); color:#5eead4; flex-shrink:0; }

.notice-switcher { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:.5rem; }
.notice-switch { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:.4rem; min-height:64px; padding:.65rem .35rem; border:1px solid rgba(255,255,255,.12); border-radius:.85rem; background:rgba(255,255,255,.035); color:#cbd5e1; font-size:.72rem; font-weight:600; transition:background .15s,border-color .15s,color .15s; }
.notice-switch.active { background:rgba(20,184,166,.18); border-color:rgba(45,212,191,.7); color:#99f6e4; box-shadow:inset 0 0 0 1px rgba(45,212,191,.12); }
.notice-switch i { font-size:1rem; }
.notice-panel[hidden] { display:none !important; }
.notice-panel .notice-card-content { padding:1rem; display:grid; gap:.65rem; }
@media (max-width:480px) { .notice-switcher { gap:.35rem; } .notice-switch { font-size:.65rem; min-height:60px; } }

.notice-card { border:1px solid rgba(255,255,255,.12); border-radius:1rem; background:rgba(255,255,255,.035); overflow:hidden; }
.notice-card summary { display:flex; align-items:center; gap:.75rem; padding:.9rem 1rem; cursor:pointer; list-style:none; user-select:none; }
.notice-card summary::-webkit-details-marker { display:none; }
.notice-card summary::after { content:'＋'; margin-left:auto; color:#94a3b8; font-size:1.1rem; }
.notice-card[open] summary::after { content:'−'; }
.notice-card summary .notice-summary-icon { display:grid; place-items:center; width:2.25rem; height:2.25rem; border-radius:.75rem; background:rgba(255,255,255,.07); color:#cbd5e1; flex-shrink:0; }
.notice-card .notice-card-content { padding:0 1rem 1rem; display:grid; gap:.65rem; }
.notice-card button { min-height:38px; }
.notification-intro { border:1px solid rgba(94,234,212,.2); background:rgba(20,184,166,.07); border-radius:1rem; padding:1rem; }
@media (max-width:480px) { #modalContent { padding:1rem; border-radius:1.25rem; } #settingsScrollArea { padding-right:.2rem; } .notice-card summary { padding:.75rem; } .notice-card .notice-card-content { padding:0 .75rem .85rem; } }


/* 4回ごとのサイクル達成時だけ、紫〜マゼンタのネオン演出 */
@keyframes cycleShake {
    0%, 100% { transform: translateX(0) rotate(0) scale(1); }
    10% { transform: translateX(-5px) rotate(-0.7deg) scale(1.045); }
    22% { transform: translateX(5px) rotate(0.7deg) scale(.965); }
    34% { transform: translateX(-5px) rotate(-0.6deg) scale(1.075); }
    46% { transform: translateX(5px) rotate(0.6deg) scale(.95); }
    58% { transform: translateX(-4px) rotate(-0.45deg) scale(1.06); }
    70% { transform: translateX(4px) rotate(0.45deg) scale(.975); }
    82% { transform: translateX(-2px) rotate(-0.2deg) scale(1.025); }
    92% { transform: translateX(1px) rotate(0.1deg) scale(.99); }
}
@keyframes cycleNeonGlow {
    0%, 100% { box-shadow: 0 0 0 rgba(168,85,247,0), 0 0 0 rgba(217,70,239,0); }
    35%, 65% { box-shadow: 0 0 18px rgba(168,85,247,.65), 0 0 38px rgba(217,70,239,.38), inset 0 0 18px rgba(168,85,247,.12); }
}
#sessionProgressCard.cycle-celebration {
    border-color: rgba(216,180,254,.95) !important;
    background: linear-gradient(135deg, rgba(139,92,246,.28), rgba(15,23,42,.92) 48%, rgba(217,70,239,.24)) !important;
    transform-origin: center center;
    animation: cycleShake .82s cubic-bezier(.36,.07,.19,.97) 2, cycleNeonGlow 1.4s ease-in-out 2;
}
#sessionProgressCard.cycle-celebration #cycleCountPanel {
    border-color: rgba(232,121,249,.9) !important;
    background: rgba(168,85,247,.25) !important;
    box-shadow: 0 0 14px rgba(217,70,239,.38);
}
#sessionProgressCard.cycle-celebration #completedCycleCount {
    color: #f5d0fe !important;
    text-shadow: 0 0 8px rgba(232,121,249,.95), 0 0 20px rgba(217,70,239,.75);
}
#sessionProgressCard.cycle-celebration #cycleCelebrationBadge {
    display: block !important;
    animation: cycleBadgePop .45s cubic-bezier(.2,.8,.2,1) both, cycleBadgeGlow 1s ease-in-out infinite alternate;
}
@keyframes cycleBadgePop {
    from { opacity: 0; transform: scale(.82) translateY(4px); }
    to { opacity: 1; transform: scale(1) translateY(0); }
}
@keyframes cycleBadgeGlow {
    from { text-shadow: 0 0 4px rgba(232,121,249,.45); }
    to { text-shadow: 0 0 10px rgba(232,121,249,1), 0 0 18px rgba(217,70,239,.8); }
}
@media (prefers-reduced-motion: reduce) {
    #sessionProgressCard.cycle-celebration { animation: none; }
    #sessionProgressCard.cycle-celebration #cycleCelebrationBadge { animation: none; }
}

/* 集中モード：タイマーを主役にして、補助情報を一時的に隠す */
body.focus-mode header,
body.focus-mode footer,
body.focus-mode #sessionProgressCard { display: none !important; }
body.focus-mode main { max-width: 760px !important; padding-top: 1rem; padding-bottom: 2rem; }
body.focus-mode main > div:nth-child(2) {
    width: min(76vw, 440px) !important;
    height: min(76vw, 440px) !important;
    max-width: calc(100vw - 48px);
    max-height: calc(100vw - 48px);
}
body.focus-mode #timerDisplay { font-size: clamp(2.8rem, 8vw, 5rem); }
#focusModeExitBtn { display: none; }
body.focus-mode #focusModeExitBtn { display: inline-flex; }
#focusModeBtn[aria-pressed="true"] { color: #5eead4; border-color: rgba(94,234,212,.45); }
/* 集中モード終了ボタンは右上に固定し、下部の操作ボタンと重ならないよう上に余白を確保する */
#focusModeExitBtn { top: .75rem; right: .75rem; bottom: auto; }
/* ショートカットキーの表記（フッター） */
.shortcut-hint { display: flex; flex-wrap: wrap; justify-content: center; gap: .25rem .875rem; }
.shortcut-hint kbd, .undo-bar kbd {
    display: inline-block; min-width: 1.5rem; padding: 0 .375rem; margin-right: .25rem;
    border: 1px solid rgba(148,163,184,.35); border-bottom-width: 2px; border-radius: .375rem;
    background: rgba(255,255,255,.05); color: #cbd5e1;
    font-family: ui-monospace, monospace; font-size: .6875rem; line-height: 1.4; text-align: center;
}
/* 通知トーストは内容の幅に合わせる（left:50% のままだと画面の半分幅で折り返してしまう） */
#toast { width: max-content; max-width: calc(100vw - 2rem); }
/* 設定カテゴリーのボタンは狭い幅ではアイコンを省いて行数を抑える */
@media (max-width: 700px) {
    /* 狭いウィンドウではGridを解除し、ナビゲーションと各設定パネルを通常フローで縦に積む。
       Electronの小さいウィンドウでもdetails同士が重ならないようにする。 */
    #settingsScrollArea {
        display: block !important;
        width: 100%;
        min-width: 0;
    }
    #settingsScrollArea > :not(.settings-quick-nav) { margin-left: 0 !important; }
    .settings-quick-nav {
        float: none;
        width: auto;
        position: sticky;
        top: 0;
        z-index: 30;
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        overflow-x: auto;
        max-width: 100%;
        margin: 0 0 .75rem 0;
        scrollbar-width: thin;
    }
    #settingsScrollArea > .settings-group {
        display: block;
        position: relative;
        width: 100%;
        min-width: 0;
        margin: 0 0 .75rem 0 !important;
    }
    .settings-quick-nav button {
        width: auto;
        flex: 0 0 auto;
        white-space: nowrap;
    }
}
@media (max-width: 460px) {
    .settings-quick-nav { gap: .35rem; padding: .55rem; }
    .settings-quick-nav button { padding: .4rem .55rem; }
    .settings-quick-nav button i { display: none; }
}
/* --- ヘッダーのピン（常に手前）--- */
#pinBtn[aria-pressed="true"] { color: #5eead4; border-color: rgba(94,234,212,.45); }
@media (max-width: 460px) {
    header h1 { font-size: 1rem !important; white-space: nowrap; }
    header .gap-2 { gap: .375rem; }
}

/* --- 作業メモ --- */
.task-memo { display:flex; align-items:center; gap:.6rem; width:100%; max-width:22rem; margin-top:1.5rem; padding:.15rem .9rem; border-radius:1rem; transition:border-color .15s; }
.task-memo i { color:#94a3b8; font-size:.8rem; }
.task-memo input { flex:1; min-width:0; background:transparent; border:0; outline:0; color:#f1f5f9; font-size:.875rem; padding:.6rem 0; user-select:text; }
.task-memo input::placeholder { color:#64748b; }
.task-memo:focus-within { border-color:rgba(94,234,212,.5); }
.ring-task { display:none; max-width:11rem; margin-top:.4rem; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:.75rem; color:#cbd5e1; }
.ring-task.is-visible { display:block; }
body.focus-mode .task-memo { display:none; }
body.focus-mode .ring-task { font-size:.9rem; max-width:70%; }

/* --- 元に戻すバー --- */
.undo-bar { position:fixed; left:50%; bottom:1.25rem; width:max-content; z-index:60; display:flex; align-items:center; gap:.75rem; padding:.55rem .6rem .55rem 1rem; border-radius:1rem; max-width:calc(100vw - 1.5rem); font-size:.8125rem; color:#e2e8f0; box-shadow:0 12px 32px rgba(0,0,0,.45); transform:translate(-50%, 1rem); opacity:0; pointer-events:none; transition:opacity .2s, transform .2s; }
.undo-bar.is-visible { opacity:1; pointer-events:auto; transform:translate(-50%, 0); }
.undo-bar button { display:inline-flex; align-items:center; gap:.4rem; border:1px solid rgba(94,234,212,.5); border-radius:.7rem; padding:.4rem .7rem; color:#5eead4; font-weight:700; font-size:.75rem; white-space:nowrap; background:rgba(94,234,212,.08); }
.undo-bar button:hover, .undo-bar button:focus-visible { background:rgba(94,234,212,.2); outline:none; }
.undo-bar kbd { margin-right:0; }

/* --- タイマー時間のプリセット --- */
.preset-row { display:flex; flex-wrap:wrap; gap:.4rem; }
.preset-chip { border:1px solid rgba(255,255,255,.12); border-radius:.7rem; padding:.45rem .75rem; font-size:.75rem; font-weight:600; color:#dbe4ef; background:rgba(255,255,255,.04); text-align:left; line-height:1.3; transition:background .15s,border-color .15s; }
.preset-chip small { display:block; font-size:.625rem; font-weight:500; color:#94a3b8; }
.preset-chip:hover, .preset-chip:focus-visible { border-color:rgba(45,212,191,.45); background:rgba(45,212,191,.12); outline:none; }
.preset-chip[aria-pressed="true"] { color:#042f2e; background:#5eead4; border-color:#5eead4; }
.preset-chip[aria-pressed="true"] small { color:#115e59; }

/* --- 記録・統計 --- */
.stats-cta { display:flex; align-items:center; justify-content:space-between; gap:.75rem; width:100%; margin-top:1rem; padding:.75rem 1rem; border:1px solid rgba(94,234,212,.45); border-radius:.9rem; background:rgba(94,234,212,.12); color:#99f6e4; font-size:.875rem; font-weight:700; transition:background .15s,border-color .15s,transform .1s; }
.stats-cta-label { display:inline-flex; align-items:center; gap:.5rem; }
.stats-cta-arrow { font-size:.75rem; transition:transform .15s; }
.stats-cta:hover, .stats-cta:focus-visible { background:rgba(94,234,212,.22); border-color:rgba(94,234,212,.75); outline:none; }
.stats-cta:hover .stats-cta-arrow, .stats-cta:focus-visible .stats-cta-arrow { transform:translateX(3px); }
.stats-cta:active { transform:scale(.98); }
select option { background:#1e293b; color:#f1f5f9; }
.goal-row { margin-top:.9rem; }
.goal-head { display:flex; justify-content:space-between; align-items:baseline; font-size:.6875rem; font-weight:700; color:#94a3b8; }
.goal-head span:last-child { color:#e2e8f0; font-variant-numeric:tabular-nums; }
.goal-track { height:.5rem; margin-top:.35rem; border-radius:999px; background:rgba(255,255,255,.08); overflow:hidden; }
.goal-fill { height:100%; width:0; border-radius:999px; background:linear-gradient(90deg,#5eead4,#34d399); transition:width .4s ease; }
.goal-row.is-done .goal-head span:last-child { color:#5eead4; }
.goal-row.is-done .goal-fill { background:linear-gradient(90deg,#fde68a,#5eead4); box-shadow:0 0 10px rgba(94,234,212,.5); }
.stats-note { margin-top:.5rem; font-size:.6875rem; color:#64748b; }
.ff-foot-actions { display:flex; flex-wrap:wrap; gap:.5rem; }
.ff-modal-foot { flex-wrap:wrap; }
.ff-btn.primary { color:#042f2e; background:#5eead4; border-color:#5eead4; }
.ff-btn.primary:hover, .ff-btn.primary:focus-visible { background:#99f6e4; }
.stats-open-btn { display:inline-flex; align-items:center; gap:.35rem; border:1px solid rgba(255,255,255,.12); border-radius:999px; padding:.3rem .7rem; font-size:.6875rem; font-weight:700; color:#cbd5e1; background:rgba(255,255,255,.05); transition:background .15s,border-color .15s; white-space:nowrap; }
.stats-open-btn:hover, .stats-open-btn:focus-visible { border-color:rgba(94,234,212,.5); background:rgba(94,234,212,.12); outline:none; }
.ff-modal { position:fixed; inset:0; z-index:55; display:flex; align-items:center; justify-content:center; padding:.75rem; background:rgba(0,0,0,.6); backdrop-filter:blur(8px); opacity:0; pointer-events:none; transition:opacity .2s; }
.ff-modal.is-open { opacity:1; pointer-events:auto; }
.ff-modal-card { width:100%; max-width:32rem; max-height:94vh; display:flex; flex-direction:column; border-radius:1.5rem; box-shadow:0 24px 60px rgba(0,0,0,.5); overflow:hidden; }
.ff-modal-head { display:flex; justify-content:space-between; align-items:center; padding:1.1rem 1.25rem .6rem; }
.ff-modal-head h2 { display:flex; align-items:center; gap:.5rem; font-size:1.125rem; font-weight:700; }
.ff-icon-btn { color:#94a3b8; padding:.25rem .5rem; border-radius:.5rem; transition:color .15s; }
.ff-icon-btn:hover, .ff-icon-btn:focus-visible { color:#fff; outline:none; }
.ff-modal-body { flex:1; min-height:0; overflow-y:auto; padding:.25rem 1.25rem 1rem; user-select:text; }
.ff-modal-foot { display:flex; justify-content:space-between; align-items:center; gap:.5rem; padding:.75rem 1.25rem; border-top:1px solid rgba(255,255,255,.1); }
.ff-btn { border:1px solid rgba(255,255,255,.12); border-radius:.75rem; padding:.5rem .9rem; font-size:.8125rem; font-weight:600; color:#e2e8f0; background:rgba(255,255,255,.06); }
.ff-btn:hover, .ff-btn:focus-visible { background:rgba(255,255,255,.12); outline:none; }
.ff-btn.danger { color:#fecdd3; border-color:rgba(251,113,133,.35); background:rgba(244,63,94,.12); }
.ff-btn.danger:hover, .ff-btn.danger:focus-visible { background:rgba(244,63,94,.25); }
.stats-h { margin:1.1rem 0 .5rem; font-size:.75rem; font-weight:700; letter-spacing:.04em; color:#94a3b8; }
.stats-tiles { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:.5rem; }
.stats-tile { border:1px solid rgba(255,255,255,.1); border-radius:.9rem; padding:.65rem .8rem; background:rgba(255,255,255,.03); }
.stats-tile .label { font-size:.6875rem; color:#94a3b8; }
.stats-tile .value { font-size:1.5rem; font-weight:800; line-height:1.25; color:#fff; font-variant-numeric:tabular-nums; }
.stats-tile .value small { font-size:.75rem; font-weight:600; color:#94a3b8; margin-left:.15rem; }
.stats-tile .sub { font-size:.6875rem; color:#7dd3c8; }
.stats-chart { display:grid; grid-template-columns:repeat(7,minmax(0,1fr)); gap:.4rem; }
.stats-bar { display:flex; flex-direction:column; justify-content:flex-end; align-items:center; height:9.5rem; min-width:0; }
.stats-bar .num { margin-bottom:.2rem; font-size:.75rem; font-weight:700; color:#e2e8f0; font-variant-numeric:tabular-nums; }
.stats-bar .col { width:100%; max-width:2.2rem; min-height:3px; border-radius:.4rem .4rem .15rem .15rem; background:rgba(94,234,212,.4); }
.stats-bar.is-today .col { background:#5eead4; }
.stats-bar .day { margin-top:.35rem; font-size:.625rem; line-height:1.25; color:#94a3b8; text-align:center; white-space:nowrap; }
.stats-bar.is-today .day { color:#5eead4; font-weight:700; }
.stats-list { display:flex; flex-direction:column; gap:.4rem; margin:0; padding:0; list-style:none; }
.stats-task { position:relative; display:flex; justify-content:space-between; gap:.75rem; overflow:hidden; border:1px solid rgba(255,255,255,.08); border-radius:.7rem; padding:.5rem .7rem; font-size:.8125rem; background:rgba(255,255,255,.03); }
.stats-task .fill { position:absolute; top:0; bottom:0; left:0; background:rgba(94,234,212,.14); }
.stats-task .name, .stats-task .meta { position:relative; }
.stats-task .name, .stats-rec .name { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.stats-task .meta, .stats-rec .time, .stats-rec .dur { white-space:nowrap; color:#94a3b8; font-variant-numeric:tabular-nums; }
.stats-rec { display:flex; align-items:center; gap:.6rem; border-radius:.7rem; padding:.35rem .35rem .35rem .7rem; font-size:.8125rem; background:rgba(255,255,255,.03); }
.stats-rec .time { font-family:ui-monospace, monospace; }
.stats-rec .name { flex:1; }
.stats-rec .del { padding:.3rem .5rem; border-radius:.5rem; color:#64748b; }
.stats-rec .del:hover, .stats-rec .del:focus-visible { color:#fda4af; background:rgba(244,63,94,.12); outline:none; }
.stats-empty { padding:.3rem 0; font-size:.8125rem; color:#64748b; }

body.focus-mode { padding-top: 4rem; }
/* 狭い幅ではヘッダーの「集中モード」文字を隠し、タイトルが折り返さないようにする */
@media (max-width: 460px) {
    #focusModeBtn > span { display: none; }
    #focusModeBtn { padding-left: .625rem; padding-right: .625rem; }
}
@media (max-height: 650px) {
    body.focus-mode main { padding-top: .25rem; padding-bottom: .5rem; }
    body.focus-mode main > div:nth-child(2) { width: min(58vh, 360px) !important; height: min(58vh, 360px) !important; }
    body.focus-mode main > div:first-child { margin-bottom: .75rem; }
    body.focus-mode main > div:nth-child(3) { margin-top: .75rem; }
}

/* ===== 統計：週/月タブ・カレンダー・時間帯 ===== */
.stats-tabs { display:inline-flex; gap:.25rem; margin:.25rem 0 .5rem; padding:.2rem; border:1px solid rgba(255,255,255,.1); border-radius:.8rem; background:rgba(255,255,255,.04); }
.stats-tabs button { min-width:3.5rem; padding:.35rem .9rem; border-radius:.6rem; font-size:.8125rem; font-weight:700; color:#94a3b8; }
.stats-tabs button[aria-selected="true"] { color:#042f2e; background:#5eead4; }
.stats-tabs button:not([aria-selected="true"]):hover, .stats-tabs button:focus-visible { color:#fff; outline:none; }
.stats-month-nav { display:flex; align-items:center; justify-content:center; gap:.75rem; margin:.25rem 0 .75rem; }
.stats-month-label { min-width:7rem; text-align:center; font-size:1rem; font-weight:800; color:#fff; font-variant-numeric:tabular-nums; }
.stats-month-nav .ff-icon-btn:disabled { opacity:.3; cursor:default; }
.stats-cal { display:grid; grid-template-columns:repeat(7,minmax(0,1fr)); gap:.25rem; }
.stats-cal .wd { text-align:center; font-size:.625rem; color:#94a3b8; padding-bottom:.1rem; }
.stats-cal .cell { position:relative; display:flex; flex-direction:column; align-items:center; justify-content:center; aspect-ratio:1/1; min-height:2.1rem; border-radius:.5rem; border:1px solid transparent; background:rgba(255,255,255,.04); }
.stats-cal .cell.is-blank { background:transparent; }
.stats-cal .dn { font-size:.625rem; line-height:1; color:#94a3b8; }
.stats-cal .cn { font-size:.8125rem; line-height:1.2; font-weight:800; color:#fff; font-variant-numeric:tabular-nums; min-height:1em; }
.stats-cal .lv1 { background:rgba(94,234,212,.16); }
.stats-cal .lv2 { background:rgba(94,234,212,.3); }
.stats-cal .lv3 { background:rgba(94,234,212,.5); }
.stats-cal .lv4 { background:rgba(94,234,212,.72); }
.stats-cal .lv3 .dn, .stats-cal .lv4 .dn { color:#042f2e; }
.stats-cal .lv4 .cn { color:#042f2e; }
.stats-cal .is-today { border-color:#fff; }
.stats-cal .is-goal::after { content:""; position:absolute; right:.25rem; top:.25rem; width:.4rem; height:.4rem; border-radius:50%; background:#fbbf24; }
.stats-hours { display:grid; grid-template-columns:repeat(24,minmax(0,1fr)); gap:2px; align-items:end; }
.stats-hours .hbar { display:flex; flex-direction:column; justify-content:flex-end; align-items:center; height:5.2rem; min-width:0; }
.stats-hours .col { width:100%; border-radius:2px 2px 1px 1px; background:rgba(94,234,212,.4); }
.stats-hours .col.is-peak { background:#5eead4; }
.stats-hours .h { height:.9rem; margin-top:.2rem; font-size:.5625rem; line-height:.9rem; color:#94a3b8; white-space:nowrap; }

/* ===== 休憩のヒント ===== */
.break-tip { margin-top:1rem; padding:.85rem 1rem; border-radius:1.1rem; border:1px solid rgba(94,234,212,.25); }
.break-tip-head { display:flex; justify-content:space-between; align-items:center; gap:.5rem; font-size:.75rem; font-weight:700; color:#99f6e4; }
.break-tip-link { font-size:.6875rem; font-weight:600; color:#94a3b8; text-decoration:underline; text-underline-offset:2px; }
.break-tip-link:hover, .break-tip-link:focus-visible { color:#fff; outline:none; }
.break-tip-text { white-space:pre-line; margin:.5rem 0 0; font-size:.875rem; line-height:1.6; color:#e2e8f0; }
.break-tip-chips { display:flex; flex-wrap:wrap; gap:.35rem; margin-top:.6rem; }
.break-tip-chips button { padding:.25rem .65rem; border-radius:999px; border:1px solid rgba(255,255,255,.12); font-size:.6875rem; font-weight:600; color:#cbd5e1; background:rgba(255,255,255,.05); }
.break-tip-chips button:hover, .break-tip-chips button:focus-visible, .break-tip-chips button.is-active { border-color:rgba(94,234,212,.6); background:rgba(94,234,212,.15); color:#99f6e4; outline:none; }
.break-tip-ask { display:flex; gap:.4rem; margin-top:.6rem; }
.break-tip-ask input { flex:1; min-width:0; padding:.45rem .7rem; border-radius:.7rem; border:1px solid rgba(255,255,255,.12); background:rgba(255,255,255,.05); font-size:.8125rem; color:#fff; }
.break-tip-ask input:focus { outline:none; border-color:#5eead4; }
.break-tip-ask button { flex-shrink:0; padding:.45rem .8rem; border-radius:.7rem; font-size:.75rem; font-weight:700; color:#042f2e; background:#5eead4; white-space:nowrap; }
.break-tip-ask button:disabled { opacity:.5; cursor:default; }
.break-tip-answer { margin:.6rem 0 0; padding:.6rem .75rem; border-radius:.8rem; font-size:.8125rem; line-height:1.65; white-space:pre-wrap; color:#e2e8f0; background:rgba(94,234,212,.1); border:1px solid rgba(94,234,212,.25); user-select:text; }
.break-tip-answer.is-error { color:#fecdd3; background:rgba(244,63,94,.1); border-color:rgba(251,113,133,.3); }
.break-tip-note { margin:.45rem 0 0; font-size:.625rem; color:#64748b; }
body.focus-mode #breakTipCard { display:none !important; }

/* ===== ミニ表示 ===== */
.mini-view { display:none; }
body.mini-mode { padding:0 !important; overflow:hidden; }
body.mini-mode > *:not(#miniView):not(script):not(audio):not(video):not(canvas) { display:none !important; }
body.mini-mode #miniView { position:fixed; inset:0; display:flex; align-items:center; justify-content:space-between; gap:.5rem; padding:.4rem .75rem .6rem; -webkit-app-region:drag; background:rgba(15,23,42,.96); }
.mini-main { min-width:0; }
.mini-time { font-size:2.1rem; line-height:1; font-weight:800; color:#fff; font-variant-numeric:tabular-nums; letter-spacing:.01em; }
.mini-label { margin-top:.2rem; font-size:.6875rem; color:#94a3b8; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.mini-label #miniTask:not(:empty)::before { content:" ・"; }
.mini-actions { display:flex; gap:.35rem; flex-shrink:0; -webkit-app-region:no-drag; }
.mini-btn { width:2.2rem; height:2.2rem; border-radius:.7rem; color:#042f2e; background:#5eead4; font-size:.9rem; }
.mini-btn:focus-visible { outline:2px solid #fff; outline-offset:2px; }
.mini-btn-quiet { color:#cbd5e1; background:rgba(255,255,255,.1); }
.mini-bar { position:absolute; left:0; right:0; bottom:0; height:3px; background:rgba(255,255,255,.1); }
.mini-bar #miniFill { height:100%; width:0; background:#5eead4; }

/* ヘッダーのボタンが増えたぶん、狭い幅では詰める */
@media (max-width:460px) {
    header button.glass-panel { width:2.25rem !important; height:2.25rem !important; padding:0 !important; display:inline-flex; align-items:center; justify-content:center; }
    header button.glass-panel i { font-size:1rem !important; }
    header > div:last-child { gap:.25rem !important; }
    header h1 { font-size:.875rem !important; }
}
@media (max-width:380px) { #logoIcon { display:none; } }

/* ===== 作業メモ：お気に入りと候補チップ ===== */
.task-fav { flex-shrink:0; padding:.35rem .45rem; border-radius:.6rem; color:#64748b; font-size:.9rem; transition:color .15s, background .15s; }
.task-fav:hover, .task-fav:focus-visible { color:#fcd34d; background:rgba(252,211,77,.12); outline:none; }
.task-fav[aria-pressed="true"] { color:#fbbf24; }
.task-chips { display:flex; flex-wrap:wrap; justify-content:center; gap:.35rem; width:100%; max-width:22rem; margin-top:.6rem; }
.task-chip { display:inline-flex; align-items:center; gap:.3rem; max-width:100%; padding:.25rem .65rem; border-radius:999px; border:1px solid rgba(255,255,255,.12); font-size:.6875rem; font-weight:600; color:#cbd5e1; background:rgba(255,255,255,.05); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.task-chip i { color:#fbbf24; font-size:.625rem; flex-shrink:0; }
.task-chip:hover, .task-chip:focus-visible { border-color:rgba(94,234,212,.55); background:rgba(94,234,212,.12); color:#99f6e4; outline:none; }
.task-chip.is-active { border-color:rgba(94,234,212,.7); background:rgba(94,234,212,.18); color:#99f6e4; }
body.focus-mode .task-chips { display:none !important; }
body.mini-mode #taskChips { display:none !important; }