/* =============================================================================
 * @file        public/css/style.css
 * @description アプリ全体のスタイル定義。CSS変数・モーダル・HUD等。
 * @version     4.6.3,0 (Cleaned & Grid Refactored)
 * @changes 2026-06-27
 * ============================================================================= */

/* --------------------------------------------------------------------------
   Base & Variables
   -------------------------------------------------------------------------- */
:root { --amber: #ff9d00; --gold: #ffdf00; --bg: #050300; }
* { -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; outline: none; box-sizing: border-box; }
body { margin: 0; background: var(--bg); overflow: hidden; position: fixed; width: 100%; height: 100%; overscroll-behavior: none; }
canvas { display: block; touch-action: none; background: var(--bg); z-index: 1; }

.hidden { display: none !important; }

/* --------------------------------------------------------------------------
   Debug & System Notices
   -------------------------------------------------------------------------- */
#debug-heat { position: absolute; top: calc(15px + env(safe-area-inset-top)); right: calc(20px + env(safe-area-inset-right)); color: var(--amber); font-size: 11px; opacity: 0.5; pointer-events: none; z-index: 1000; }
#debug-hidx { position: absolute; top: calc(35px + env(safe-area-inset-top)); right: calc(20px + env(safe-area-inset-right)); color: var(--gold); font-size: 11px; opacity: 0.8; pointer-events: none; z-index: 1000; }
#system-notice { position: absolute; top: calc(60px + env(safe-area-inset-top)); width: 100%; text-align: center; color: #00ffff; font-size: 13px; letter-spacing: 0.3em; opacity: 0; pointer-events: none; transition: 0.4s ease-out; z-index: 1500; font-family: monospace; }
#system-notice.visible { opacity: 0.9; transform: translateY(10px); }

/* --------------------------------------------------------------------------
   Modals & Overlays
   -------------------------------------------------------------------------- */
.overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(5, 3, 0, 0.7); display: flex; align-items: center; justify-content: center; z-index: 2000; opacity: 0; pointer-events: none; transition: 0.3s; }
.overlay.visible { opacity: 1; pointer-events: auto; }
.modal { background: rgba(20, 15, 0, 0.98); border: 1px solid var(--amber); border-radius: 12px; padding: 20px; position: relative; text-align: center; max-width: 85%; max-height: 85%; overflow-y: auto; }
.close-x { position: absolute; top: 8px; right: 12px; color: var(--amber); font-size: 22px; cursor: pointer; }
.modal-title { color: var(--amber); font-size: 12px; letter-spacing: 0.2em; margin-bottom: 10px; }

/* --------------------------------------------------------------------------
   General UI Widgets
   -------------------------------------------------------------------------- */
.legend { display: flex; justify-content: space-around; font-size: 10px; margin-bottom: 5px; }
.system-suggest { color: #00ffff; font-size: 11px; margin-bottom: 20px; opacity: 0.8; }
.mood-options { display: flex; gap: 15px; justify-content: center; }
.mood-btn { width: 50px; height: 50px; border-radius: 50%; border: 1px solid var(--amber); background: transparent; color: var(--amber); font-size: 22px; cursor: pointer; transition: 0.2s; }
.mood-btn:active { background: var(--amber); color: #000; }

#drum-palette { display: none; position: absolute; bottom: calc(15px + env(safe-area-inset-bottom)); left: 50%; transform: translateX(-50%); width: 90%; max-width: 400px; background: rgba(15, 10, 0, 0.95); border: 1px solid #00ffff; border-radius: 8px; padding: 8px; z-index: 1500; flex-wrap: wrap; justify-content: center; gap: 6px; pointer-events: auto; }
.palette-btn { background: transparent; color: #00ffff; border: 1px solid rgba(0, 255, 255, 0.3); border-radius: 4px; padding: 8px 12px; font-size: 11px; font-family: monospace; cursor: pointer; transition: 0.1s; }
.palette-btn.active { background: #00ffff; color: #000; border-color: #00ffff; font-weight: bold; }
/* Update / Action Button */
.btn-update-available {
    color: #00ffff;
    font-weight: bold;
    cursor: pointer;
    border: 1px solid rgba(0, 255, 255, 0.5);
    padding: 8px 16px;
    border-radius: 4px;
    display: inline-block;
    letter-spacing: 1px;
    background: rgba(0, 255, 255, 0.1);
    transition: all 0.2s ease;
    margin-top: 20px;
}

.btn-update-available:hover {
    background: rgba(0, 255, 255, 0.3);
    box-shadow: 0 0 10px rgba(0, 255, 255, 0.2);
}

.btn-update-available:active {
    transform: scale(0.96);
}
/* --------------------------------------------------------------------------
   HUDs (Cyber & Media)
   -------------------------------------------------------------------------- */
#cyber-hud { position: absolute; top: 20px; right: 20px; width: 140px; z-index: 100; display: flex; flex-direction: column; gap: 8px; font-family: monospace; color: #ffaa00; text-shadow: 0 0 5px #ffaa00; }
.hud-row { display: flex; align-items: center; gap: 8px; }
.hud-label { width: 30px; font-size: 10px; text-align: right; }
.gauge-bg { flex-grow: 1; height: 4px; background: rgba(255, 170, 0, 0.1); border: 1px solid rgba(255, 170, 0, 0.3); border-radius: 2px; position: relative; overflow: hidden; }
.gauge-fill { height: 100%; width: 0%; transition: width 0.1s linear; }
.heat-fill { background: #ff3300; box-shadow: 0 0 8px #ff3300; }
.h-fill { background: #00ffcc; box-shadow: 0 0 8px #00ffcc; transition: width 0.4s ease-out; }
.deltah-fill { background: #0088ff; box-shadow: 0 0 8px #0088ff; transition: width 0.3s ease-out; }

.media-hud-container { position: absolute; bottom: 20px; right: 20px; z-index: 900; display: flex; flex-direction: column; gap: 8px; }
.media-btn { padding: 8px 12px; border-radius: 4px; font-family: monospace; font-size: 12px; cursor: pointer; transition: all 0.2s; }
.btn-video { background: rgba(0, 255, 255, 0.1); border: 1px solid #ff1500; color: hsl(7, 100%, 50%); text-shadow: 0 0 5px hsl(5, 100%, 50%); }
.btn-square { background: rgba(0, 255, 255, 0.05); border: 1px solid #00ffff; color: #00ffff; text-shadow: 0 0 5px #00ffff; }
.btn-audio { background: rgba(255, 223, 0, 0.1); border: 1px solid #0d00ff; color: hsl(7, 100%, 50%); text-shadow: 0 0 5px hsl(5, 100%, 50%); }
.btn-stop { background: rgba(255, 68, 68, 0.2); border: 1px solid #ff4444; color: #ff4444; text-shadow: 0 0 5px #ff4444; box-shadow: 0 0 10px rgba(255, 68, 68, 0.5); }

/* ==========================================================================
   LOG UI (Data Grid V4.0.9) - Refactored
   ========================================================================== */

/* Modal Constraint */
.modal-box:has(.log-list-wrapper) { 
    width: 95vw !important; max-width: 1100px !important; 
    max-height: 85vh !important; 
    display: flex !important; flex-direction: column !important;
    overflow: hidden !important; 
}

/* Scroll Wrappers */
.log-scroll-area {
    display: flex !important; flex-direction: column !important;
    flex-grow: 1 !important; overflow: hidden !important; min-height: 0 !important;
    margin-top: 15px; padding-right: 5px;
}
.log-list-wrapper { 
    display: flex !important; flex-direction: column !important; width: 100%; 
    flex-grow: 1 !important; overflow-x: auto !important; overflow-y: hidden !important; 
    min-height: 0 !important; margin-bottom: 10px;
}

/* Page Controls */
.log-page-control, .log-total-memories { color: #ff9d00 !important; opacity: 1 !important; font-size: 12px; }
.log-page-btn { background: transparent !important; border: 1px solid #ff9d00 !important; color: #ff9d00 !important; padding: 2px 8px; cursor: pointer; font-size: 12px; }
.log-page-btn:disabled { opacity: 0.5; cursor: not-allowed; }
.log-page-select { background: #120d00 !important; border: 1px solid #ff9d00 !important; color: #ff9d00 !important; padding: 2px 4px; cursor: pointer; outline: none; font-size: 12px; }

/* Grid Main Definition (Single Source of Truth) */
.log-grid-sort-bar, .log-list, .log-item {
    min-width: 720px !important; width: 100%; /* Actions削除に伴い最小幅をスリム化 */
}

.log-grid-sort-bar, .log-item {
    display: grid !important;
    /* cb(40) | date(80) | name(1fr) | sec(45) | scl(45) | tone(45) | nt(45) | md(35) | H(50) | dH(50) */
    grid-template-columns: 40px 80px 1fr 45px 45px 45px 45px 35px 50px 50px;
    align-items: center;
    gap: 8px;
}

/* Header Specific */
.log-grid-sort-bar {
    background-color: #120d00 !important; 
    border-bottom: 2px solid rgba(255,157,0,0.6) !important;
    flex-shrink: 0 !important; 
    padding: 8px 0 !important;
}

/* Cell Overflows */
.log-grid-sort-bar > div, .log-item > div {
    display: block; /* 古い flex 指定の排除 */
    white-space: nowrap !important;
    overflow: hidden;
    text-overflow: ellipsis;
    cursor: pointer;
}

/* Data Alignments */
.log-col-sec, .log-col-scl, .log-col-tone, .log-col-nt, .log-col-h, .log-col-dh { text-align: right; }
.log-col-cb, .log-col-md { text-align: center; }

/* Data Typography */
.log-grid-sort-bar { color: #ff9d00; }
.log-val-date { font-size: 11px; color: #00ffff; opacity: 0.8; }
.log-val-name { font-size: 14px; font-weight: bold; }
.log-val-sec { font-size: 13px; color: #dddddd; }
.log-val-scl { font-size: 12px; color: #aaffaa; font-weight: bold; }
.log-val-tone { font-size: 12px; font-weight: bold; }
.log-val-nt { font-size: 13px; color: #dddddd; }
.log-val-md { font-size: 14px; }
.log-val-h, .log-val-dh { font-size: 13px; color: #dddddd; opacity: 0.9; }

/* List Wrapper (Vertical scroll allowed here) */
.log-list {
    list-style: none; padding: 0; margin: 0; text-align: left;
    overflow-y: auto !important; flex-grow: 1 !important; -webkit-overflow-scrolling: touch;
}

/* Row Design & States */
.log-item {
    border-bottom: 1px solid rgba(255, 157, 0, 0.2);
    padding: 12px 5px;
    border-left: 3px solid transparent;
    background-color: transparent;
    transition: background-color 0.2s, border-color 0.2s;
}

.log-item .colored-name { color: var(--row-color); }
.log-item .colored-tone { color: var(--tone-color); }

.log-item:active { background: rgba(255, 157, 0, 0.1); }
.log-item.is-playing { background-color: var(--bg-color) !important; border-left-color: var(--row-color) !important; padding-left: 2px; }
.log-item.is-selected { background-color: rgba(255, 157, 0, 0.15) !important; }

.batch-btn { padding: 4px 10px; border-radius: 4px; font-size: 14px; cursor: pointer; border: 1px solid var(--amber); background: #111; color: var(--amber); }
.batch-btn:disabled { opacity: 0.3; cursor: not-allowed; border-color: #666; color: #666; }

/* 26-07-23 16:02 No.6: 履歴リストアコーディオン用のスタイル */
.log-history-details {
    margin-top: 15px;
    cursor: pointer;
}

.log-history-summary {
    padding: 10px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 4px;
    text-align: center;
    user-select: none;
    color: #ccc;
    transition: background 0.2s ease;
}

.log-history-summary:hover {
    background: rgba(255, 255, 255, 0.1);
}

.log-history-details[open] .log-history-summary {
    margin-bottom: 10px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
}

/* ==========================================================================
   Other Components (QR, Save, Edit, Profile, Prefs)
   ========================================================================== */

#qrcode-container { margin-top: 15px; display: flex; justify-content: center; background: transparent; padding: 10px; border-radius: 8px; transition: background 0.3s; }
#qrcode-container.generated { background: rgba(255, 255, 255, 0.9); }

#qr-scan-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.9); z-index: 2000; display: flex; justify-content: center; align-items: center; flex-direction: column; }
.qr-scan-container { position: relative; width: 85%; max-width: 400px; }
#qr-video { width: 100%; border-radius: 8px; box-shadow: 0 0 20px #00ffff; background: #111; }
.qr-scan-guide { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 65%; height: 65%; border: 2px solid #ffdf00; box-shadow: 0 0 10px #ffdf00, inset 0 0 10px #ffdf00; pointer-events: none; border-radius: 12px; }
#qr-close-btn { margin-top: 24px; padding: 12px 0; width: 100%; background: transparent; color: #ff9d00; border: 1px solid #ff9d00; border-radius: 6px; font-family: monospace; font-size: 16px; letter-spacing: 2px; cursor: pointer; text-align: center; }
#qr-close-btn:active { background: rgba(255, 157, 0, 0.2); }

#save-overlay { display: none; position: fixed !important; top: 0; left: 0; width: 100vw; height: 100vh; background: rgba(5, 3, 0, 0.85); align-items: center; justify-content: center; z-index: 99999 !important; }
#save-overlay.visible { display: flex !important; }
.save-modal { position: relative; background: #120d00 !important; border: 1.5px solid var(--amber) !important; box-shadow: 0 0 30px rgba(255, 157, 0, 0.4); width: 90%; max-width: 380px; padding: 25px; border-radius: 12px; text-align: center; color: var(--amber); }
.save-input { width: 100%; background: #000; border: 1px solid var(--amber); color: var(--gold); padding: 12px; margin: 15px 0; font-family: monospace; font-size: 16px; outline: none; }
.save-confirm-btn { background: var(--amber); color: #000; border: none; padding: 12px 20px; cursor: pointer; font-weight: bold; width: 100%; letter-spacing: 0.1em; }
.save-container { width: 100%; display: flex; flex-direction: column; align-items: center; }
.save-title { margin-bottom: 5px; }
.save-analysis { text-align: center; color: #00ffff; font-size: 0.9rem; margin-top: 5px; margin-bottom: 10px; letter-spacing: 1px; padding: 0 10px; }
.save-body { width: 100%; display: flex; flex-direction: column; align-items: center; }
.save-radial-wrapper { position: relative; width: 160px; height: 160px; margin: 0 auto 15px auto; flex-shrink: 0; }
.save-controls { width: 100%; display: flex; flex-direction: column; align-items: center; }
.save-name-input { width: 80%; text-align: center; margin-bottom: 10px; }
.save-btn-submit { width: 80%; margin-top: 5px; margin-bottom: 10px; }
.save-footer { margin-top: 5px; margin-bottom: 10px; text-align: center; width: 100%; }
.save-btn-cancel { background: transparent; border: none; color: #aaa; font-size: 14px; cursor: pointer; letter-spacing: 2px; font-family: monospace; padding: 5px 10px; }

@media (max-height: 500px) and (orientation: landscape) {
    .save-analysis { font-size: 0.8rem; margin-bottom: 5px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
    .save-body { flex-direction: row; justify-content: center; align-items: center; max-width: 450px; margin: 0 auto; }
    .save-radial-wrapper { transform: scale(0.75); margin: -20px 20px -20px 0; }
    .save-controls { width: 50%; margin-top: 0; }
    .save-name-input, .save-btn-submit { width: 100%; }
    .save-footer { margin-bottom: 0; }
}

.edit-container { width: 100%; display: flex; flex-direction: column; align-items: center; }
.edit-name-input { width: 80%; text-align: center; margin-bottom: 10px; }
.edit-radial-wrapper { position: relative; width: 160px; height: 160px; margin: 15px auto; }
.edit-palette-container { margin: 15px 0; display: flex; justify-content: space-between; padding: 0 5px; width: 80%; }
.edit-btn-submit { width: 80%; margin-top: 15px; }
.edit-footer { margin-top: 15px; }
.edit-btn-cancel { background: transparent; border: none; color: #aaa; font-size: 14px; cursor: pointer; letter-spacing: 2px; font-family: monospace; }
@media (max-height: 500px) and (orientation: landscape) {
    .edit-container { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: auto auto auto auto; column-gap: 15px; align-items: center; }
    .edit-title { grid-column: 1 / 3; grid-row: 1; margin-bottom: 5px; }
    .edit-radial-wrapper { grid-column: 1; grid-row: 2 / 4; margin: 0 auto; transform: scale(0.8); transform-origin: center; }
    .edit-palette-container { grid-column: 1; grid-row: 4; margin: 0 auto; width: 100%; justify-content: space-around; }
    .edit-name-input { grid-column: 2; grid-row: 2; width: 100%; margin: 0; }
    .edit-btn-submit { grid-column: 2; grid-row: 3; width: 100%; margin: 0; }
    .edit-footer { grid-column: 2; grid-row: 4; margin: 0; text-align: center; }
}

.about-container { width: 100%; display: flex; flex-direction: column; }
.about-title { text-align: center; }
.about-version { color: #00ffff; font-size: 14px; text-align: center; margin: 15px 0; font-family: monospace; }
.about-licenses-container { font-size: 11px; color: #aaa; margin-top: 20px; line-height: 1.5; max-height: 40vh; overflow-y: auto; padding-right: 10px; text-align: left; }
.about-licenses-title { color: var(--amber); margin-bottom: 5px; }

.profile-header { width: 90%; display: flex; justify-content: space-between; align-items: center; position: relative; }
.profile-title { width: 100%; text-align: center; margin: 0; }
/* 26-07-23 22:13 No.14: z-indexを追加し、タイトルの100%幅ブロックによるクリック妨害を回避 */
.profile-pref-btn { position: absolute; right: 0; background: transparent; border: none; color: #aaa; font-size: 20px; cursor: pointer; transition: color 0.2s; z-index: 10; }
.profile-pref-btn:hover { color: #00ffff; }
.profile-card { width: 90%; background: rgba(0, 255, 255, 0.05); border: 1px solid rgba(0, 255, 255, 0.3); border-radius: 8px; padding: 15px; margin-top: 15px; text-align: left; font-family: monospace; color: #aaa; }
.profile-uid-section { color: #00ffff; margin-bottom: 12px; font-weight: bold; border-bottom: 1px solid rgba(0,255,255,0.3); padding-bottom: 8px; }
.profile-uid-value { color: #fff; }
.profile-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; font-size: 13px; }
.profile-stat-value { color: #ffdf00; font-size: 16px; }
.profile-mood-value { color: #fff; font-size: 20px; }
.profile-metrics-section { margin-top: 15px; padding-top: 12px; border-top: 1px dashed rgba(255,157,0,0.3); }
.profile-metrics-title { color: #ff9d00; margin-bottom: 8px; font-size: 12px; }
.profile-metrics-values { display: flex; justify-content: space-between; font-size: 14px; }
.profile-metric-bold { color: #fff; font-weight: bold; }
.profile-canvas-wrapper { margin-top: 15px; width: 100%; }

/* =========================================================
   Profile Modal (Refactored)
   ========================================================= */
.profile-header-actions { display: flex; gap: 8px; }
.profile-identity-actions { display: flex; gap: 10px; align-items: center; }

/* 言語トグルボタン */
.profile-lang-toggle {
    font-size: 0.75rem; border: 1px solid #444; border-radius: 4px; overflow: hidden; display: flex;
}
.lang-btn {
    background: none; border: none; padding: 3px 8px; cursor: pointer; color: #666; transition: color 0.2s;
}
.lang-btn.active { color: var(--amber); }
.lang-btn + .lang-btn { border-left: 1px solid #444; }

/* カレンダー＆リフレクション領域 */
.prof-calendar-container {
    background: rgba(0,0,0,0.3); border: 1px solid #333; border-radius: 6px; padding: 10px; min-height: 120px; margin-top: 10px;
}
.prof-calendar-placeholder { text-align: center; color: #666; font-size: 0.8rem; line-height: 100px; }
.profile-reflection-section { margin-top: 15px; }
.prof-reflection-title { font-size: 0.75rem; color: #ffdf00; margin-bottom: 5px; }
.prof-reflection-content {
    font-size: 0.85rem; color: #ccc; background: rgba(255,223,0,0.05); padding: 8px; border-radius: 4px; border-left: 2px solid #ffdf00;
}
.prof-reflection-placeholder { color: #888; }


/* =========================================================
   Profile Edit Modal
   ========================================================= */
.profile-edit-body { padding: 20px 0; }
.profile-edit-group { margin-bottom: 20px; }
.profile-edit-group-sm { margin-bottom: 10px; }
.profile-edit-label { display: block; margin-bottom: 8px; }
.profile-edit-input { width: 100%; box-sizing: border-box; text-align: left; padding: 10px; }
.profile-edit-icon-input { width: 100%; box-sizing: border-box; text-align: center; font-size: 1.5rem; padding: 10px; }
.profile-edit-controls { display: flex; flex-direction: column; align-items: center; width: 100%; margin-top: 10px; }
.profile-edit-btn-full { width: 100%; }
.profile-edit-footer { margin-top: 15px; text-align: center; }
.profile-edit-cancel { cursor: pointer; color: #888; font-size: 0.9rem; transition: color 0.2s; }
.profile-edit-cancel:hover { color: #fff; }


/* =========================================================
   Share Modal
   ========================================================= */
.share-container { width: 100%; display: flex; flex-direction: column; align-items: center; text-align: center; }
.share-title-override { color: #ff9d00; border-bottom: none; padding-bottom: 0; }
.share-subtitle { font-size: 14px; margin: 10px 0; color: #ffffff; }
.share-qr-wrapper {
    background: #fff; padding: 10px; border-radius: 8px; margin: 15px 0; min-width: 160px; min-height: 160px; display: flex; justify-content: center; align-items: center;
}
.modal-footer-basic { margin-top: 15px; margin-bottom: 10px; text-align: center; width: 100%; }
.btn-modal-close-basic { 
    background: transparent; border: none; color: #aaa; font-size: 14px; cursor: pointer; letter-spacing: 2px; font-family: monospace; transition: color 0.2s;
}
.btn-modal-close-basic:hover { color: #00ffff; }
/* ⬇︎ 強制的にシアン色でアクティブ状態にするクラス */
.profile-pref-btn.active-cyan {
    color: #00ffff;
    border-color: #00ffff; /* 元のインラインスタイルを再現 */
}

/* 26-07-07 18:00 No.3 縦画面時のカレンダー区切り線（HTMLから移動） */
.profile-calendar-section {
    margin-top: 20px;
    border-top: 1px dashed #444;
    padding-top: 15px;
}

/* 26-07-07 18:00 No.3 横画面（ランドスケープ）時の2カラムレイアウト最適化 */
@media (orientation: landscape) and (min-width: 500px) {
    .profile-card {
        display: grid;
        grid-template-columns: 1fr 1fr; /* 左右を1:1の幅に分割 */
        column-gap: 20px;
        align-items: start;
    }
    /* アイデンティティとUIDは上部に全幅で配置 */
    .profile-identity-section, 
    .profile-uid-section {
        grid-column: 1 / -1; 
    }
    /* 数値、指標、グラフは左カラム */
    .profile-grid, 
    .profile-metrics-section, 
    .profile-canvas-wrapper {
        grid-column: 1 / 2; 
    }
    /* カレンダーセクションは右カラムへ */
    .profile-calendar-section {
        grid-column: 2 / 3;
        grid-row: 3 / 6; /* 左側の3項目分の高さに並べる */
        margin-top: 0;
        border-top: none; /* 上部の線を消す */
        border-left: 1px dashed rgba(255, 157, 0, 0.5); /* 代わりに左側に線を引く */
        padding-top: 0;
        padding-left: 20px;
    }
}
.profile-canvas-legend { margin-bottom: 5px; display: flex; justify-content: flex-start; font-size: 10px; }
.profile-h-label { color: #ffdf00; }
.profile-dh-label { color: #00ffff; margin-left: 10px; }
.profile-flux-canvas { width: 100%; height: 80px; border-bottom: 1px solid rgba(255,157,0,0.3); }
.profile-footer { margin-top: 25px; margin-bottom: 10px; text-align: center; width: 100%; }
.profile-close-btn { background: transparent; border: none; color: #aaa; font-size: 14px; cursor: pointer; letter-spacing: 2px; font-family: monospace; }

.profile-identity-section { display: flex; align-items: center; gap: 15px; margin-bottom: 12px; padding-bottom: 12px; border-bottom: 1px dashed rgba(255, 157, 0, 0.5); }
.profile-avatar { font-size: 36px; width: 54px; height: 54px; border-radius: 50%; background: rgba(255, 157, 0, 0.1); border: 1px solid var(--amber); display: flex; align-items: center; justify-content: center; cursor: pointer; user-select: none; transition: transform 0.2s; }
.profile-avatar:active { transform: scale(0.95); }
.profile-name-area { flex: 1; }
.profile-nickname { font-size: 1.3rem; font-weight: bold; color: var(--amber); margin-bottom: 4px; letter-spacing: 1px; }
.profile-edit-btn { background: none; border: 1px solid #666; color: #aaa; padding: 3px 10px; border-radius: 4px; font-size: 0.75rem; cursor: pointer; transition: all 0.2s ease; }
.profile-edit-btn:hover { border-color: var(--amber); color: var(--amber); }

.profile-edit-body { display: flex; flex-direction: column; gap: 15px; padding: 10px 0; }
.form-group { display: flex; flex-direction: column; }
.amber-label { color: var(--amber); font-size: 0.8rem; margin-bottom: 5px; }
.amber-input { width: 100%; padding: 8px; background: #222; border: 1px solid #555; color: #fff; font-size: 1rem; border-radius: 4px; transition: border-color 0.2s ease; box-sizing: border-box; }
.amber-input:focus { outline: none; border-color: var(--amber); }
.amber-input.icon-input { font-size: 1.2rem; text-align: center; }

/* =========================================================
   Preferences: Custom Mood List Items
   ========================================================= */
.pref-list-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: rgba(0, 255, 255, 0.05);
    padding: 8px 12px;
    border: 1px solid rgba(0, 255, 255, 0.2);
    border-radius: 4px;
}

.pref-list-item-left {
    display: flex;
    align-items: center;
    gap: 12px;
}

.pref-list-sort-btns {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

/* 並び替えボタン (通常時) */
.pref-btn-sort {
    background: transparent;
    border: none;
    color: #00ffff;
    cursor: pointer;
    padding: 0;
    font-size: 12px;
    line-height: 1;
    transition: opacity 0.2s;
}

.pref-btn-sort:hover:not(:disabled) {
    opacity: 0.7;
}

/* 並び替えボタン (無効/端の時) */
.pref-btn-sort:disabled {
    color: rgba(255, 255, 255, 0.1);
    cursor: default;
}

.pref-asset-value {
    font-size: 20px;
}

.pref-asset-category {
    font-size: 10px;
    color: rgba(255, 255, 255, 0.5);
    margin-left: 10px;
}

/* 削除ボタン */
.pref-btn-delete {
    background: transparent;
    border: 1px solid #ff4444;
    color: #ff4444;
    border-radius: 4px;
    cursor: pointer;
    padding: 2px 8px;
    font-size: 12px;
    font-family: monospace;
    transition: all 0.2s ease;
}

.pref-btn-delete:hover {
    background: rgba(255, 68, 68, 0.1);
}

.pref-btn-delete:active {
    transform: scale(0.95);
}
/* Preferences: Language Toggle States */
.pref-lang-item.is-active {
    color: #00ffff;
    text-shadow: 0 0 5px rgba(0, 255, 255, 0.5);
}
.pref-lang-item.is-inactive {
    color: #555;
    text-shadow: none;
}

/* Preferences: System Messages (Empty / Error) */
.pref-msg-empty {
    text-align: center;
    color: rgba(255, 255, 255, 0.5);
}
.pref-msg-error {
    text-align: center;
    color: #ff4444;
}

/* Preferences: Static Input Display */
.pref-input-static {
    border: none;
    background: transparent;
}
.pref-container { width: 100%; display: flex; flex-direction: column; align-items: center; }
.pref-title { margin-bottom: 15px; }
.pref-panel { width: 90%; background: rgba(0, 255, 255, 0.05); border: 1px solid rgba(0, 255, 255, 0.3); border-radius: 8px; padding: 15px; text-align: left; font-family: monospace; color: #aaa; margin-bottom: 15px; }
.pref-lang-row { display: flex; justify-content: space-between; align-items: center; }
.pref-lang-label { color: #00ffff; font-weight: bold; font-size: 14px; }
.pref-lang-toggle { display: flex; gap: 15px; cursor: pointer; font-size: 14px; font-weight: bold; }
.pref-lang-item { color: #aaa; transition: 0.2s; }
.pref-lang-sep { color: rgba(255,255,255,0.2); }
.pref-section-title { color: #ff9d00; margin-bottom: 12px; font-weight: bold; font-size: 14px; }
.pref-sub-header { color: #00ffff; margin-bottom: 12px; font-weight: bold; border-bottom: 1px solid rgba(0,255,255,0.3); padding-bottom: 8px; display: flex; justify-content: space-between; align-items: center; }
.pref-badge { font-size: 12px; color: rgba(255,255,255,0.8); background: rgba(0,255,255,0.2); padding: 2px 6px; border-radius: 10px; margin-left: 8px; }
.pref-btn-add { background: rgba(0,255,255,0.2); border: 1px solid #00ffff; color: #00ffff; border-radius: 4px; cursor: pointer; padding: 2px 8px; font-family: monospace; }
.pref-form { display: none; background: rgba(0, 255, 255, 0.05); border: 1px dashed rgba(0, 255, 255, 0.5); border-radius: 4px; padding: 10px; margin-bottom: 10px; }
.pref-form-row { display: flex; gap: 10px; align-items: center; }
.pref-input { width: 70px; background: #111; color: #fff; border: 1px solid rgba(0,255,255,0.5); border-radius: 4px; padding: 4px; font-size: 16px; text-align: center; }
.pref-radio-group { flex-grow: 1; display: flex; justify-content: space-around; align-items: center; font-size: 12px; color: #aaa; background: rgba(0,0,0,0.2); border: 1px solid rgba(0,255,255,0.3); border-radius: 4px; padding: 4px; }
.pref-radio-label { cursor: pointer; display: flex; align-items: center; gap: 4px; }
.pref-form-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 10px; }
.pref-btn-cancel { background: transparent; border: 1px solid rgba(255,255,255,0.3); color: #aaa; border-radius: 4px; cursor: pointer; padding: 2px 10px; font-size: 12px; font-family: monospace; }
.pref-btn-save { background: rgba(0,255,255,0.2); border: 1px solid #00ffff; color: #00ffff; border-radius: 4px; cursor: pointer; padding: 2px 10px; font-size: 12px; font-family: monospace; }
.pref-list { display: flex; flex-direction: column; gap: 10px; min-height: 100px; max-height: 45vh; overflow-y: auto; padding-right: 5px; }
.pref-loading { text-align: center; color: rgba(255,255,255,0.5); margin-top: 40px; }
.pref-footer { margin-top: 25px; margin-bottom: 10px; text-align: center; width: 100%; }
.pref-btn-back { background: transparent; border: none; color: #aaa; font-size: 14px; cursor: pointer; letter-spacing: 2px; font-family: monospace; }

.qr-import-container { width: 100%; display: flex; flex-direction: column; align-items: center; }
.qr-import-desc { color: #00ffff; font-size: 0.9em; margin-bottom: 25px; line-height: 1.5; text-align: center; }
.btn-qr { display: block; width: 80%; padding: 14px; font-weight: bold; font-size: 1.1em; cursor: pointer; border-radius: 4px; }
.btn-qr-cyan { margin-bottom: 15px; background: rgba(0,255,255,0.1); border: 1px solid #00ffff; color: #00ffff; }
.btn-qr-orange { margin-bottom: 25px; background: rgba(255,157,0,0.1); border: 1px solid #ff9d00; color: #ff9d00; }
.qr-import-footer { margin-top: 15px; margin-bottom: 10px; text-align: center; width: 100%; }
.btn-cancel { background: transparent; border: none; color: #aaa; font-size: 14px; cursor: pointer; letter-spacing: 2px; font-family: monospace; }
/* ==========================================================================
   26-06-25: CSSデグレード完全復旧パッチ
   ========================================================================== */

/* 1. アプリ全体とボタンの文字色デフォルトを明示（黒文字化・不可視化の防止） */
body { color: #dddddd; }
button { color: inherit; font-family: inherit; cursor: pointer; }

/* モーダルの閉じるボタン(✖)等を確実に表示させる */
#btn-close-modal, .close-x { color: var(--amber) !important; text-shadow: none; }

/* ページネーションボタンの無効(disabled)時のスタイル */
.log-page-btn:disabled {
    opacity: 0.3 !important;
    cursor: not-allowed !important;
    color: #888 !important;
    border-color: #555 !important;
}

/* 2. FULL exp/imp がログ多数時に画面外へ押し潰される問題の修正 */
.log-archive-section {
    padding-top: 15px;
    border-top: 1px solid rgba(255, 157, 0, 0.3);
    margin-top: 10px;
    /* ★超重要：Flexbox内で押し潰されず、常に画面最下部に自らの高さを維持する */
    flex-shrink: 0 !important; 
}

.log-button-group {
    display: flex;
    justify-content: space-around;
    align-items: center;
    margin-bottom: 10px;
    width: 100%;
}

.log-action-btn {
    padding: 8px 15px;
    background: #1a1500;
    color: var(--gold);
    border: 1px solid var(--gold);
    border-radius: 5px;
    cursor: pointer;
    font-family: monospace;
    font-size: 13px;
    transition: background 0.2s, transform 0.1s;
    display: inline-block;
}

.log-action-btn:hover { background: rgba(255, 223, 0, 0.15); }
.log-action-btn:active { transform: scale(0.96); }

/* ★超重要：ファイル選択用の標準ダサいinput要素を隠す */
/* YY-MM-DD HH24:MI No.09 ファイルダイアログのブロックを回避するため透明化に変更 */
.hidden-input { opacity: 0; position: absolute; width: 0; height: 0; pointer-events: none; }
/* ==========================================================================
   26-06-25: プロフィール画面レイアウト復旧パッチ
   ========================================================================== */
/* 26-07-07 17:49 No.2 スクロール対応と縦潰れ防止 */
.profile-container { 
    width: 100%; 
    display: flex; 
    flex-direction: column; 
    align-items: center; 
    max-height: 85vh; /* 画面高さの85%を上限に設定 */
    overflow-y: auto; /* 縦スクロールを有効化 */
    padding-bottom: 20px; /* スクロール下部の余白 */
}
.profile-card { 
    width: 90%; 
    background: rgba(0, 255, 255, 0.05); 
    border: 1px solid rgba(0, 255, 255, 0.3); 
    border-radius: 8px; 
    padding: 15px; 
    margin-top: 15px; 
    text-align: left; 
    font-family: monospace; 
    color: #aaa; 
    flex-shrink: 0; /* 高さが自動で潰れるのを防ぐ */
}
.profile-header { width: 90%; display: flex; justify-content: space-between; align-items: center; position: relative; margin-bottom: 10px; }
.profile-uid-section { color: #00ffff; margin-bottom: 12px; font-weight: bold; border-bottom: 1px solid rgba(0,255,255,0.3); padding-bottom: 8px; font-size: 0.8rem; word-break: break-all; }
.profile-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; font-size: 13px; margin-bottom: 15px; }
.profile-metrics-section { margin-top: 15px; padding-top: 12px; border-top: 1px dashed rgba(255,157,0,0.3); }
.profile-metrics-values { display: flex; justify-content: space-between; font-size: 14px; margin-bottom: 10px; }
.profile-canvas-wrapper { margin-top: 15px; width: 100%; }
/* 26-06-25 18:33 No.3 Export/Import領域をモーダル下部に固定表示 */
.log-archive-section {
    position: sticky;
    bottom: 0;
    background-color: #1a1a1a; /* モーダルの背景色に合わせて適宜変更してください */
    z-index: 10;
    padding: 12px 0;
    margin-top: auto; /* コンテンツが少ない場合は下部に押しやる */
    border-top: 1px solid #333333; /* 境界線を引いてスクロール時に見やすくする */
}
/* 26-06-25 21:45 No.4 画面の高さが低い場合（横向き等）は固定を解除してスペースを確保 */
@media (max-height: 600px) {
    .log-archive-section {
        position: static;
        padding: 8px 0;
        border-top: none;
    }
}
/* 26-06-25 22:05 No.5 モバイルのノッチ（Safe Area）干渉の回避 */
.modal-container {
    /* モーダル自体が画面上部ギリギリに付くのを防ぐ */
    padding-top: max(env(safe-area-inset-top), 16px);
}

.modal-close-btn { /* ← 実際の[x]ボタンのクラス名にしてください */
    /* 閉じるボタンをセーフエリアより下に配置し、最前面に出す */
    top: max(env(safe-area-inset-top), 16px) !important;
    right: max(env(safe-area-inset-right), 16px) !important;
    z-index: 100; 
}
/* 26-06-25 22:05 No.5 固定領域の透け防止とセーフエリア対応 */
.log-archive-section {
    position: sticky;
    bottom: 0;
    background-color: #181818; /* 透けないように完全な不透明色を指定（アプリの背景に合わせて微調整してください） */
    z-index: 10;
    padding-top: 12px;
    padding-bottom: max(env(safe-area-inset-bottom), 12px); /* 画面下部のホームバー干渉を回避 */
    margin-top: auto;
    border-top: 1px solid #333333;
}

/* 26-06-25 22:05 No.5 リストを最後までスクロールできるように余白を追加 */
.log-list-container { /* ← ログ一覧を囲んでいるコンテナのクラス名にしてください */
    padding-bottom: 120px; /* 固定領域の高さ＋余白分を確保 */
}
/* ==========================================================================
   26-06-25 22:15 No.7: ログモーダル内のレイアウト・アコーディオン化
   ========================================================================== */

/* インラインCSSから移行したフレックスレイアウト（スクロール領域と固定領域の分離） */
.modal-content-layout {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.log-scroll-area {
    flex-grow: 1;
    overflow-y: auto;
    min-height: 0;
}

/* アコーディオン全体のコンテナ（旧インラインCSSの移行） */
.log-archive-details {
    flex-shrink: 0;
    margin-top: 10px;
    border-top: 1px solid rgba(255, 157, 0, 0.3);
}

/* アコーディオンのヘッダー（タップできるタイトル部分） */
.log-archive-summary {
    cursor: pointer;
    padding: 12px 0;
    color: #e0a96d; /* アンバーカラー */
    font-weight: bold;
    text-align: center;
    list-style: none; /* デフォルトの三角形を消す */
    user-select: none;
    transition: opacity 0.2s;
}

/* ホバー時の反応 */
.log-archive-summary:hover {
    opacity: 0.8;
}

/* Safari等で表示されるデフォルトのマーカー（三角形）を非表示化 */
.log-archive-summary::-webkit-details-marker {
    display: none;
}

/* 展開される中身の余白 */
.log-archive-section {
    padding-top: 10px;
    padding-bottom: max(env(safe-area-inset-bottom), 16px); /* セーフエリア対応 */
}
/* ==========================================================================
   26-06-25 22:33 No.8: スクロール領域の膨張防止と横向き（Landscape）対応
   ========================================================================== */

/* 1. モーダル外枠が画面サイズを超えて無限に広がるのを防ぐ */
.modal-container { 
    display: flex;
    flex-direction: column;
    max-height: 90vh; /* 画面の高さの90%を最大値とし、画面外への拡張を防ぐ */
    overflow: hidden; /* モーダル全体がスクロールしてしまう現象をストップ */
}

/* 2. タイトルとアコーディオンの間を埋めるレイアウト */
.modal-content-layout {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    overflow: hidden; /* ここが重要: 親の枠を超えて広がらないようにロック */
    min-height: 0; /* Flexboxの仕様上、これが無いと子要素に合わせて無限に膨張します */
}

/* 3. ログ一覧のスクロール領域（ここだけがスクロールするようになる） */
.log-scroll-area {
    flex-grow: 1;
    overflow-y: auto;
    min-height: 0; /* 再帰的に設定 */
    -webkit-overflow-scrolling: touch; /* スマホで滑らかにスクロールさせる */
    padding-bottom: 20px; /* 一番下の要素が見えやすくするための余白 */
}

/* 4. アコーディオンの横向き・溢れ対策 */
.log-archive-details {
    flex-shrink: 0; /* 押しつぶされないようにする */
    max-height: 40vh; /* アコーディオン自体が画面高の40%以上にならないよう制限 */
    overflow-y: auto; /* 制限を超えたらアコーディオンの中身だけをスクロールさせる */
    /* ↓既存の border-top などのスタイルはそのまま残してください */
    margin-top: 10px;
    border-top: 1px solid rgba(255, 157, 0, 0.3);
}
/* ==========================================================================
   26-06-25 22:41 No.9: スクロール領域の膨張防止と横向き（Landscape）対応
   ========================================================================== */

/* 1. モーダル内部レイアウトで高さを強制ロック（外枠のクラス名が不明でも機能します） */
.modal-content-layout {
    display: flex;
    flex-direction: column;
    max-height: 70vh; /* 画面の高さの70%でストップさせ、無限に伸びるのを防ぐ */
    overflow: hidden; /* ここが重要: 制限を超えたら親を広げず内部にとどめる */
    min-height: 0; /* Flexboxの仕様上必須 */
}

/* 2. ログ一覧のスクロール領域（ここだけがスクロールするようになる） */
.log-scroll-area {
    flex-grow: 1;
    overflow-y: auto;
    min-height: 0;
    -webkit-overflow-scrolling: touch; /* スマホで滑らかにスクロールさせる */
    padding-bottom: 20px;
}

/* 3. アコーディオンの横向き・溢れ対策 */
.log-archive-details {
    flex-shrink: 0;
    max-height: 35vh; /* アコーディオンの中身が増えすぎないよう画面の35%で制限 */
    overflow-y: auto; /* 中身が増えたらアコーディオン内だけでスクロールさせる */
    margin-top: 10px;
    border-top: 1px solid rgba(255, 157, 0, 0.3);
}
/* =========================================================
   26-06-29 14:55 No.23: モバイルSafariレイアウト崩れ・タイトル消失の完全補正
   ========================================================= */

/* 1. モーダルコンテナ：vhバグ対策(svh使用)と、閉じるボタンの基準点(relative)化 */
#modal-content-area > div,
.log-modal-container {
    position: relative !important; 
    /* モバイルSafariのアドレスバー等を考慮した svh (Small Viewport Height) を使用 */
    max-height: calc(90svh - env(safe-area-inset-top) - env(safe-area-inset-bottom)) !important;
    display: flex !important;
    flex-direction: column !important;
}

/* 2. タイトルの消失防止：Flexboxによる縮小を強制禁止し、ボタン領域の余白を確保 */
.modal-title {
    flex: 0 0 auto !important; /* 絶対に縮ませない（圧死防止） */
    display: block !important;
    padding-right: 50px !important; /* 右上の閉じるボタンと被らないように余白確保 */
    margin-bottom: 10px !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

/* =========================================================
   26-06-29 16:31 No.29: 閉じるボタンの装飾過多を反省。極めてソリッドなデザインへ
   ========================================================= */

#btn-close-modal,
.modal-box > .close-x,
.modal-box > .close-btn,
.modal-box > .modal-close {
    position: absolute !important;
    top: 10px !important;  /* インラインCSSに合わせてスッキリ配置 */
    right: 10px !important;
    color: #ff9d00 !important; /* H3標準のシャープなアンバー */
    font-size: 24px !important; /* スマホでも押しやすい適度なサイズ */
    font-weight: bold !important;
    
    z-index: 2147483647 !important; /* 絶対防御は維持 */
    
    text-shadow: none !important; /* 悪目立ちする滲みの原因を完全削除 */
    background: transparent !important; /* 暗い丸背景を削除、クリアに */
    border-radius: 0 !important; 
    
    /* タップ領域（ヒットボックス）だけは大きく確保してユーザビリティを保つ */
    width: 44px !important;
    height: 44px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    
    /* iOS特有の余計なスタイルを完全無効化 */
    -webkit-appearance: none !important;
    appearance: none !important;
    -webkit-tap-highlight-color: transparent !important;
    
    /* インラインCSSの残骸をリセット */
    border: none !important;
    padding: 0 !important;
    margin: 0 !important;
    line-height: 1 !important;
}

/* タップした瞬間だけ少し明るく光るマイクロインタラクション */
#btn-close-modal:active,
.modal-box > .close-x:active,
.modal-box > .close-btn:active,
.modal-box > .modal-close:active {
    color: #00ffff !important; /* 押した瞬間だけシアンに反応 */
}
/* 4. データグリッド（一覧）のスクロール確保 */
.log-list-wrapper,
.table-container {
    flex: 1 1 auto !important;
    overflow-y: auto !important;
    min-height: 0 !important; /* Flexboxの子要素が突き抜けるバグを回避 */
}

/* 5. 底面UIの保護（アコーディオン消失の防止） */
.export-import-accordion,
.batch-action-bar,
.modal-footer {
    flex: 0 0 auto !important;
    margin-top: 10px !important;
    padding-bottom: env(safe-area-inset-bottom) !important; /* ノッチ対応 */
}
/* =========================================================
   26-06-29: モーダルコンテナのインラインCSS完全撤廃・外部化
   ========================================================= */

/* モーダルの外側（背景オーバーレイ） */
#h3-modal-system {
    z-index: 9999; 
    display: none; /* 初期状態は非表示 */
    justify-content: center; 
    align-items: center;
}

/* JSで visible クラスが付与されたら Flex で中央配置 */
#h3-modal-system.visible {
    display: flex !important;
}

/* モーダルの内側（ウィンドウ部分） */
.modal-box {
    background: #1e1e1e; 
    padding: 20px; 
    border-radius: 8px; 
    position: relative; 
    width: 90%; 
    max-width: 500px; 
    
    /* 高さとスクロールは以前のモバイル対応CSS（svh）に任せるため、最低限の制約のみ */
    max-height: 90vh; 
    overflow-y: auto;
    
    /* ペチャンコ防止：中身が空でも最低限の形を保つ */
    min-height: 100px; 
}
/* --- 26-07-06 22:25 No.4 インラインスタイルから移行したクラス定義 --- */

/* 26-07-06 20:06 No.9 のpadding変更をこちらへ反映 */
.calendar-day {
    padding: 1px;
}

/* マウスオーバー時にクリック可能であることを示す */
.calendar-day.interactive {
    cursor: pointer;
}

/* 今日の日付のハイライト */
.calendar-day.today {
    color: #f39c12;
    font-weight: bold;
    text-decoration: underline;
}

/* ヒートマップの色付け（記録件数レベル1〜4） */
.calendar-day.heatmap-1 { background-color: rgba(243, 156, 18, 0.2); border-radius: 4px; }
.calendar-day.heatmap-2 { background-color: rgba(243, 156, 18, 0.4); border-radius: 4px; }
.calendar-day.heatmap-3 { background-color: rgba(243, 156, 18, 0.6); border-radius: 4px; }
.calendar-day.heatmap-4 { background-color: rgba(243, 156, 18, 0.8); border-radius: 4px; }
/* =========================================================
   26-07-12 22:24 No.5: ログ一覧 カレンダーフィルター（ひっそり版）
   ========================================================= */
.log-filter-subtle {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 12px;
    font-size: 0.85rem;
    color: var(--amber, #ffbf00);
    opacity: 0.8;
    margin-bottom: 8px;
    padding-right: 4px;
}

.btn-clear-subtle {
    background: transparent;
    color: var(--amber, #ffbf00);
    border: 1px solid var(--amber, #ffbf00);
    padding: 2px 8px;
    border-radius: 12px;
    cursor: pointer;
    font-size: 0.8rem;
    transition: opacity 0.2s;
}

.btn-clear-subtle:hover {
    opacity: 0.5;
}
/* --- 26-07-24 22:12 No.9 インラインCSS一掃に伴う移行クラス --- */
.qr-receive-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(5, 3, 0, 0.85);
  z-index: 9999;
  display: flex;
  justify-content: center;
  align-items: center;
}
.qr-receive-overlay.hidden {
  display: none !important;
}
.qr-receive-modal {
  background: #111111;
  border: 1px solid var(--amber);
  padding: 25px;
  border-radius: 8px;
  text-align: center;
  max-width: 80%;
  box-shadow: 0 0 20px rgba(255, 157, 0, 0.2);
  position: relative;
}
.qr-receive-close-x {
  position: absolute;
  top: 10px;
  right: 15px;
  color: var(--amber);
  cursor: pointer;
  font-size: 20px;
  font-weight: bold;
  transition: color 0.2s;
}
.qr-receive-close-x:active {
  color: #00ffff;
}
.qr-receive-title {
  color: #00ffff;
  font-weight: bold;
  margin-bottom: 15px;
  letter-spacing: 2px;
  font-size: 1.2rem;
}
.qr-receive-message {
  margin: 20px 0;
  font-size: 14px;
  color: #ffffff;
  white-space: pre-wrap;
  line-height: 1.5;
}
.qr-receive-btn-ok {
  background: var(--amber);
  color: #000000;
  padding: 10px 30px;
  border: none;
  border-radius: 4px;
  font-weight: bold;
  cursor: pointer;
  letter-spacing: 1px;
  transition: opacity 0.2s;
}
.qr-receive-btn-ok:active {
  opacity: 0.8;
}
.radial-menu-center {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(1.0);
  font-size: 42px;
  text-shadow: 0 0 15px var(--amber);
  transition: transform 0.3s ease, text-shadow 0.3s ease;
  z-index: 10;
  cursor: pointer;
  user-select: none;
}
.radial-menu-center.is-scaled {
  transform: translate(-50%, -50%) scale(1.4);
  text-shadow: 0 0 25px var(--gold);
}
.radial-menu-center.is-scaled-save {
  transform: translate(-50%, -50%) scale(1.3);
}
.qr-share-over-capacity {
  text-align: center;
  color: #ff4444;
  padding: 20px;
  font-size: 14px;
  word-break: break-word;
  line-height: 1.6;
}
/* ==========================================================================
   YY-MM-DD HH24:MI No.01 課題4: モバイル横向き(Landscape) UI最適化
   ========================================================================== */
@media screen and (max-height: 500px) and (orientation: landscape) {
    /* 1. トレードオフ：インポート/エクスポート領域を非表示にして高さを確保 */
    .log-archive-section,
    #archive-container {
        display: none !important;
    }

    /* 2. Flexboxの潰れ防止ハック：親コンテナに min-height: 0 を指定し、スクロール領域を死守 */
    .modal-box,
    #modal-content-area,
    .log-scroll-area,
    .log-list-wrapper {
        flex: 1 1 auto !important;
        min-height: 0 !important;
    }

    /* 3. ログのリスト本体が残りの高さをすべて吸収し、確実にスクロールするようにする */
    .log-list {
        flex: 1 1 auto !important;
        overflow-y: auto !important;
        min-height: 0 !important;
    }
}
/* 26-08-22 14:53 No.12: SYSTEM PRESETS 用のスタイル（インラインCSSからの移行） */
.pref-preset-container {
    padding-top: 10px;
}
.pref-form-row-fret {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid rgba(0, 255, 255, 0.2);
    padding-bottom: 10px;
    margin-bottom: 10px;
}
.pref-fret-label {
    color: #ccc;
    font-size: 0.9em;
}
.pref-toggle-label {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
}
.pref-toggle-input {
    accent-color: #00ffff;
    transform: scale(1.2);
}
.pref-preset-item {
    display: flex;
    justify-content: space-between;
    padding: 8px 12px;
    margin-bottom: 4px;
    background: rgba(0, 0, 0, 0.2);
    border-radius: 4px;
}
.pref-preset-label {
    color: #888;
    font-size: 0.85em;
}
.pref-preset-value {
    color: #00ffff;
    font-family: monospace;
}
/* 26-08-22 21:06 No.23: フレットマーク3段階制御用ボタングループ */
.pref-form-row-fret-col {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
    border-bottom: 1px solid rgba(0, 255, 255, 0.2);
    padding-bottom: 15px;
    margin-bottom: 10px;
}
.pref-btn-group {
    display: flex;
    width: 100%;
    gap: 8px;
}
.pref-btn-fret {
    flex: 1;
    padding: 8px 0;
    background: rgba(0, 0, 0, 0.4);
    color: #888;
    border: 1px solid rgba(0, 255, 255, 0.3);
    border-radius: 4px;
    font-size: 0.85em;
    cursor: pointer;
    transition: all 0.2s ease;
}
.pref-btn-fret.active-cyan {
    background: rgba(0, 255, 255, 0.2);
    color: #00ffff;
    border-color: #00ffff;
    box-shadow: 0 0 8px rgba(0, 255, 255, 0.3);
}
/* 26-09-01 21:24 No.013: モーダル内要素のキーボードフォーカス視覚化 */
#h3-modal-system button:focus-visible,
#h3-modal-system input:focus-visible,
#h3-modal-system textarea:focus-visible,
#h3-modal-system [tabindex]:focus-visible {
    outline: 2px solid #FFB300; /* アンバー色の輪郭 */
    outline-offset: 4px;
    box-shadow: 0 0 12px rgba(255, 179, 0, 0.6); /* デジタル法具としてのグロー効果 */
    border-radius: 2px; /* 既存のデザインに合わせて調整してください */
    transition: all 0.15s ease-in-out;
}