/* 基本スタイル（変数化してダークモードに対応、背景をわずかに透過） */
:root {
    --bg-color: rgba(255, 255, 255, 0.85);
    --text-color: #333333;
    --title-color: #111111;
    --container-bg: rgba(0, 0, 0, 0.03);
    --border-color: #dddddd;
    --item-bg: rgba(255, 255, 255, 0.6);
    --item-hover: rgba(0, 0, 0, 0.04);
    --item-selected: rgba(0, 0, 0, 0.08);
    --button-bg: rgba(240, 240, 240, 0.9);
    --button-border: #999999;
    --button-shadow-in: #ffffff;
    --button-shadow-out: #dddddd;
    --modal-bg: #ffffff;
    --input-bg: #fafafa;
    --folder-header-bg: rgba(230, 230, 230, 0.8);
    --folder-header-text: #555555;
}

/* 🌙 ダークモード用の配色 */
body.dark-mode {
    --bg-color: rgba(30, 30, 30, 0.85);
    --text-color: #cccccc;
    --title-color: #ffffff;
    --container-bg: rgba(255, 255, 255, 0.02);
    --border-color: #444444;
    --item-bg: rgba(45, 45, 45, 0.6);
    --item-hover: rgba(255, 255, 255, 0.05);
    --item-selected: rgba(255, 255, 255, 0.12);
    --button-bg: rgba(45, 45, 45, 0.9);
    --button-border: #555555;
    --button-shadow-in: #444444;
    --button-shadow-out: #1a1a1a;
    --modal-bg: #2d2d2d;
    --input-bg: #3c3c3c;
    --folder-header-bg: rgba(51, 51, 51, 0.8);
    --folder-header-text: #aaaaaa;
}

/* 🌌 キャンバスを最背面に固定 */
#cyberBg {
    position: fixed;
    top: 0; left: 0;
    width: 100vw; height: 100vh;
    z-index: -1;
    background-color: #f4f6f9; /* ベース背景色 */
    transition: background-color 0.2s;
}
body.dark-mode #cyberBg {
    background-color: #121212;
}

body {
    background-color: var(--bg-color);
    color: var(--text-color);
    font-family: Arial, sans-serif;
    margin: 0; padding: 0;
    display: flex; flex-direction: column; align-items: center;
    height: 100vh; overflow: hidden; user-select: none;
    transition: background-color 0.2s, color 0.2s;
}
.header { 
    text-align: center; 
    padding: 25px 0 15px 0; 
    width: 100%; 
    background: linear-gradient(to bottom, rgba(0,0,0,0.03), transparent); 
}
h1 { 
    color: var(--title-color); 
    font-size: 24px; 
    text-shadow: 1px 1px 2px rgba(0,0,0,0.1); 
    margin: 0; 
    font-weight: bold; 
    letter-spacing: 2px;
}
.container { 
    flex: 1; 
    width: 100%; 
    max-width: 1000px; 
    background-color: var(--container-bg); 
    border-left: 1px solid var(--border-color);
    border-right: 1px solid var(--border-color);
    box-shadow: inset 0 10px 10px rgba(0,0,0,0.02), inset 0 -10px 10px rgba(0,0,0,0.02); 
    overflow-y: auto; 
    padding: 10px 0; 
    backdrop-filter: blur(4px); /* 背景の粒子を程よくぼかして視認性をUP */
}
.searching-text { text-align: center; color: var(--text-color); font-size: 16px; margin: 15px 0; opacity: 0.8; }
.dots::after { content: ''; animation: blink 1.5s infinite step-start; }
@keyframes blink { 0% { content: ''; } 33% { content: ' .'; } 66% { content: ' . .'; } 100% { content: ' . . .'; } }

.folder-section { margin-bottom: 20px; }
.folder-header { 
    background-color: var(--folder-header-bg); 
    color: var(--folder-header-text); 
    padding: 10px 20px; 
    font-size: 14px; 
    font-weight: bold; 
    margin: 5px 15px; 
    display: flex; 
    justify-content: space-between; 
    align-items: center;
    border-radius: 4px;
    cursor: pointer;
    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
}
.folder-header:hover { opacity: 0.9; }
.folder-title-area { display: flex; align-items: center; gap: 8px; }

.btn-delete-folder { 
    background-color: #ff4d4d; 
    color: #ffffff;
    border: none; 
    border-radius: 4px;
    cursor: pointer; 
    font-size: 11px; 
    font-weight: bold; 
    padding: 4px 10px; 
    height: auto; 
    align-self: center; 
    flex-shrink: 0; 
}
.btn-delete-folder:hover { background-color: #ff3333; }

.folder-content-wrapper { display: block; }
.folder-content-wrapper.collapsed { display: none; }

.server-item { display: flex; justify-content: space-between; align-items: center; padding: 14px 24px; border: 2px solid transparent; margin: 4px 15px; background-color: var(--item-bg); box-shadow: 0 2px 5px rgba(0,0,0,0.03); border-radius: 4px; }
.server-item:hover { background-color: var(--item-hover); }
.server-item.selected { border: 2px solid var(--title-color); background-color: var(--item-selected); }

.server-meta { display: flex; align-items: center; gap: 16px; flex: 1; min-width: 0; }
.server-icon { width: 32px; height: 32px; border-radius: 4px; object-fit: contain; background-color: rgba(255,255,255,0.8); border: 1px solid var(--border-color); padding: 2px; box-sizing: border-box; }

.server-info { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.server-name { font-size: 18px; color: var(--title-color); font-weight: bold; }
.server-sub { color: var(--text-color); font-size: 15px; margin-top: 6px; overflow: hidden; text-overflow: ellipsis; max-width: 650px; white-space: nowrap; opacity: 0.7; }

.server-right-pane { display: flex; align-items: center; gap: 20px; }

.status-box { display: flex; align-items: flex-end; gap: 2px; height: 24px; width: 22px; padding-bottom: 2px; }
.signal-bar { width: 3px; background-color: #cccccc; box-shadow: 1px 1px rgba(0,0,0,0.1); }
.bar1 { height: 4px; }
.bar2 { height: 8px; }
.bar3 { height: 12px; }
.bar4 { height: 16px; }
.bar5 { height: 20px; }
.signal-offline { color: #ff3333; font-size: 18px; line-height: 24px; width: 22px; text-align: center; }

.sort-buttons { display: flex; flex-direction: column; gap: 2px; }
.btn-sort { background: var(--button-bg); color: var(--text-color); border: 1px solid var(--button-border); font-size: 10px; padding: 2px 6px; cursor: pointer; font-weight: bold; box-shadow: inset -1px -1px var(--button-shadow-out), inset 1px 1px var(--button-shadow-in); }
.btn-sort:hover { background-color: var(--item-selected); }

.footer { width: 100%; background: linear-gradient(to top, rgba(0,0,0,0.03), transparent); padding: 20px 0 30px 0; display: flex; flex-direction: column; align-items: center; gap: 12px; }
.button-row { display: flex; gap: 14px; width: 100%; max-width: 720px; justify-content: center; }
button { flex: 1; max-width: 220px; background-color: var(--button-bg); color: var(--text-color); border: 2px solid var(--button-border); padding: 12px 0; font-size: 16px; cursor: pointer; box-shadow: inset -2px -2px var(--button-shadow-out), inset 2px 2px var(--button-shadow-in); box-sizing: border-box; font-weight: bold; }
button:hover:not(:disabled) { outline: 2px solid var(--title-color); outline-offset: -4px; }
button:disabled { opacity: 0.5; cursor: not-allowed; box-shadow: none; }

.modal { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0,0,0,0.4); justify-content: center; align-items: center; z-index: 10; }
.modal-content { background-color: var(--modal-bg); border: 4px solid var(--border-color); padding: 25px; width: 420px; box-shadow: 0 4px 20px rgba(0,0,0,0.15); text-align: center; color: var(--text-color); backdrop-filter: blur(8px); }
.modal p { margin: 12px 0 6px 0; font-size: 15px; text-align: left; font-weight: bold; }
.modal input, .modal select { width: 100%; background-color: var(--input-bg); border: 2px solid var(--border-color); color: var(--text-color); padding: 10px; box-sizing: border-box; font-size: 15px; margin-bottom: 12px; }
.modal input:focus, .modal select:focus { outline: 2px solid var(--title-color); }

.setting-row { display: flex; justify-content: space-between; align-items: center; padding: 12px 5px; border-bottom: 1px solid var(--border-color); }
.setting-section-title { font-size: 14px; font-weight: bold; text-align: left; margin-top: 15px; color: var(--title-color); border-left: 4px solid var(--button-border); padding-left: 6px; }