:root {
    --bg-color: #121212;
    --surface-color: #1e1e1e;
    --input-bg: #2c2c2c;
    --text-primary: #e0e0e0;
    --text-secondary: #a0a0a0;
    --accent-color: #4db6ac;
    --note-color: #ffb74d;
    --danger-color: #ef5350;
    --border-color: #333;
    --header-height: 60px;
}

* { box-sizing: border-box; margin: 0; padding: 0; -webkit-tap-highlight-color: transparent; }
body { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; background-color: var(--bg-color); color: var(--text-primary); line-height: 1.5; overscroll-behavior-y: none; }

/* Layout */
.app-header { position: sticky; top: 0; height: var(--header-height); background-color: var(--surface-color); display: flex; align-items: center; justify-content: space-between; padding: 0 16px; z-index: 100; border-bottom: 1px solid var(--border-color); }
h1 { font-size: 1.2rem; font-weight: 600; }
main { padding-bottom: 80px; }
.view { padding: 16px; min-height: calc(100vh - var(--header-height)); }
.hidden { display: none !important; }

/* Lock Overlay */
#lock-overlay {
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background-color: #000;
    z-index: 9999; /* 最前面 */
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}
.lock-content { text-align: center; }
#lock-msg { color: var(--accent-color); margin-bottom: 20px; font-weight: normal; letter-spacing: 1px; }
#lock-canvas { border: 1px solid #333; border-radius: 12px; background: #111; touch-action: none; /* スクロール防止 */ }
#lock-controls { margin-top: 20px; }

/* Shake Animation (Error) */
.shake { animation: shake 0.4s cubic-bezier(.36,.07,.19,.97) both; }
@keyframes shake { 10%, 90% { transform: translate3d(-1px, 0, 0); } 20%, 80% { transform: translate3d(2px, 0, 0); } 30%, 50%, 70% { transform: translate3d(-4px, 0, 0); } 40%, 60% { transform: translate3d(4px, 0, 0); } }

/* Buttons & Icons */
.icon-btn { background: none; border: none; color: var(--text-primary); padding: 8px; cursor: pointer; }
.fab { position: fixed; bottom: 24px; right: 24px; width: 56px; height: 56px; border-radius: 50%; background-color: var(--accent-color); color: #000; font-size: 24px; border: none; box-shadow: 0 4px 6px rgba(0,0,0,0.3); z-index: 90; display: flex; align-items: center; justify-content: center; }

/* Sidebar */
.sidebar { position: fixed; top: 0; left: 0; width: 250px; height: 100%; background-color: var(--surface-color); z-index: 200; transform: translateX(-100%); transition: transform 0.3s ease; border-right: 1px solid var(--border-color); }
.sidebar.open { transform: translateX(0); }
.sidebar-header { height: var(--header-height); display: flex; align-items: center; justify-content: space-between; padding: 0 16px; border-bottom: 1px solid var(--border-color); }
.nav-list { list-style: none; margin-top: 10px; }
.nav-list li { padding: 16px 20px; cursor: pointer; border-bottom: 1px solid #333; }
.nav-list li.active { background-color: #333; color: var(--accent-color); }
.overlay { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0,0,0,0.5); z-index: 150; }

/* Filter & Tag Accordion */
.filter-section { background-color: var(--surface-color); padding: 12px 16px; border-bottom: 1px solid var(--border-color); }
.search-box { display: flex; gap: 8px; margin-bottom: 8px; }
#search-input { flex: 1; padding: 8px; background: var(--input-bg); border: 1px solid var(--border-color); color: #fff; border-radius: 4px; }
#search-exec-btn { padding: 0 16px; background: #333; color: #fff; border: none; border-radius: 4px; }
.tag-accordion { margin-bottom: 12px; border: 1px solid #333; border-radius: 4px; background: #222; }
.tag-accordion summary { padding: 8px 12px; font-size: 0.9rem; color: var(--text-secondary); cursor: pointer; outline: none; }
.tag-group { padding: 8px 12px; border-top: 1px solid #333; }
.tag-group-label { font-size: 0.75rem; color: var(--accent-color); font-weight: bold; margin-bottom: 6px; text-transform: uppercase; }
.tag-list { display: flex; flex-wrap: wrap; gap: 8px; }
.tag-chip { background: #444; color: #fff; padding: 6px 10px; border-radius: 16px; font-size: 0.8rem; cursor: pointer; border: 1px solid #555; }
.tag-chip:active { background-color: var(--accent-color); color: #000; }
.sort-wrapper select { width: 100%; padding: 8px; background: var(--input-bg); color: #fff; border: 1px solid var(--border-color); border-radius: 4px; }

/* Card List */
.grid-container { display: grid; grid-template-columns: 1fr; gap: 12px; }
.card { background-color: var(--surface-color); padding: 16px; border-radius: 8px; border: 1px solid var(--border-color); cursor: pointer; position: relative; }
.card h3 { font-size: 1rem; margin-bottom: 6px; margin-top: 4px; }
.card .meta { font-size: 0.8rem; color: var(--text-secondary); display: flex; justify-content: space-between; }
.card .tags { margin-top: 8px; font-size: 0.75rem; color: var(--accent-color); }
.card-badge { font-size: 0.65rem; font-weight: bold; padding: 2px 6px; border-radius: 4px; text-transform: uppercase; display: inline-block; margin-bottom: 4px; }
.badge-prompt { background: rgba(77, 182, 172, 0.15); color: var(--accent-color); border: 1px solid rgba(77, 182, 172, 0.3); }
.badge-note { background: rgba(255, 183, 77, 0.15); color: var(--note-color); border: 1px solid rgba(255, 183, 77, 0.3); }

/* Detail Editor */
.toolbar { display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; }
.back-btn { background: none; border: none; color: var(--accent-color); font-size: 1rem; padding: 8px 0; }
.lock-toggle-btn { padding: 6px 12px; border-radius: 20px; border: 1px solid var(--border-color); background: transparent; color: var(--text-secondary); font-size: 0.85rem; }
.lock-toggle-btn.unlocked { border-color: var(--accent-color); color: var(--accent-color); background: rgba(77, 182, 172, 0.1); }
.input-title { width: 100%; background: transparent; border: none; font-size: 1.3rem; color: #fff; font-weight: bold; margin-bottom: 16px; padding: 8px 0; }
.input-title:not([readonly]) { border-bottom: 1px solid var(--accent-color); }
textarea { width: 100%; background: var(--input-bg); border: 1px solid var(--border-color); color: var(--text-primary); padding: 12px; border-radius: 6px; font-size: 1rem; resize: none; min-height: 150px; }
.locked textarea { background: transparent; border: 1px dashed #333; }
.editor-container:not(.locked) textarea, .editor-container:not(.locked) input { background-color: #262626; border: 1px solid #555; }
.field-group { margin-bottom: 20px; }
.field-group label { display: flex; justify-content: space-between; margin-bottom: 6px; font-size: 0.9rem; color: var(--text-secondary); }
.copy-btn-wide { width: 100%; margin-top: 6px; padding: 10px; background-color: #333; color: #fff; border: none; border-radius: 4px; font-size: 0.9rem; }
details.accordion { margin-bottom: 16px; border: 1px solid var(--border-color); border-radius: 6px; padding: 8px; background: var(--surface-color); }
summary { cursor: pointer; font-weight: bold; list-style: none; display: flex; justify-content: space-between; align-items: center; }
.summary-actions { display: flex; gap: 10px; align-items: center; }
.copy-icon-btn, .zoom-btn.icon-only { background: none; border: 1px solid #333; border-radius: 4px; padding: 4px 8px; font-size: 1rem; cursor: pointer; color: var(--text-primary); }
.action-footer { margin-top: 40px; padding-top: 20px; border-top: 1px solid var(--border-color); display: flex; flex-wrap: wrap; gap: 12px; }
.btn-primary { background: var(--accent-color); color: #000; padding: 10px 20px; border: none; border-radius: 4px; font-weight: bold; }
.btn-secondary { background: #555; color: #fff; padding: 10px 20px; border: none; border-radius: 4px; }
.btn-danger { background: var(--danger-color); color: #fff; padding: 10px 20px; border: none; border-radius: 4px; font-size: 0.8rem; }
.spacer { flex-grow: 1; min-width: 20px; }

/* Settings */
.settings-card { background: var(--surface-color); padding: 16px; border-radius: 8px; margin-bottom: 16px; border: 1px solid var(--border-color); }
.setting-item { margin-bottom: 16px; }
.setting-item label { display: block; margin-bottom: 6px; font-weight: bold; }
.setting-item select { width: 100%; padding: 10px; background: #333; color: #fff; border: 1px solid #444; border-radius: 4px; }
.danger-zone { border-color: var(--danger-color); }
.danger-text { color: var(--danger-color); }
.btn-danger-small { background: transparent; color: var(--danger-color); border: 1px solid var(--danger-color); padding: 8px 16px; border-radius: 4px; }
.btn-outline { border: 1px solid var(--accent-color); background: none; color: var(--accent-color); padding: 10px; width: 100%; margin-top: 8px; }
.spacer-huge { height: 50vh; display: flex; align-items: flex-end; justify-content: center; padding-bottom: 20px; color: #555; font-size: 0.8rem; }
#toast { position: fixed; bottom: 80px; left: 50%; transform: translateX(-50%); background: rgba(255, 255, 255, 0.9); color: #000; padding: 10px 24px; border-radius: 20px; font-size: 0.9rem; z-index: 200; animation: fadein 0.3s; }
/* --- Zoom Modal (Full Screen Fix) --- */
#zoom-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #000; /* 背景を完全な黒に */
    z-index: 99999; /* ロック画面よりも手前に来るように念のため高く */
    display: flex;
    flex-direction: column;
    padding: 0; /* 余白は内側のコンテンツで制御 */
}

/* 以前抜けていた重要なクラス設定 */
.zoom-content {
    flex: 1; /* 画面の高さいっぱいに広げる */
    display: flex;
    flex-direction: column;
    padding: 16px; /* 画面端との余白 */
    width: 100%;
    height: 100%;
    box-sizing: border-box;
}

#zoom-textarea {
    flex: 1; /* 残りのスペース全てをテキストエリアにする */
    width: 100%;
    font-size: 1.2rem; /* 文字を少し大きく読みやすく */
    line-height: 1.6;
    border: 1px solid var(--border-color);
    background: #111;
    color: #e0e0e0;
    border-radius: 8px;
    padding: 16px;
    resize: none; /* 右下のつまみを消す */
    margin-bottom: 12px; /* 閉じるボタンとの隙間 */
}

#zoom-close-btn {
    padding: 16px;
    background: var(--surface-color);
    color: #fff;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    font-size: 1.1rem;
    font-weight: bold;
    cursor: pointer;
    width: 100%;
}