:root {
    --bg-main: #121212;
    --bg-bar: #202124;
    --bg-tab: #292a2d;
    --bg-tab-active: #35363a;
    --accent: #8ab4f8;
    --border: rgba(255, 255, 255, 0.1);
    --text: #e8eaed;
}

body.demo-mode {
    margin: 0; height: 100vh;
    background: radial-gradient(circle at center, #1e1e2e, #000);
    display: flex; align-items: center; justify-content: center;
    font-family: 'Segoe UI', sans-serif;
}

/* ウィンドウ外枠 */
.browser-window {
    width: 94vw; height: 88vh;
    background: var(--bg-main);
    border-radius: 12px;
    display: flex; flex-direction: column;
    box-shadow: 0 30px 80px rgba(0,0,0,0.6);
    border: 1px solid var(--border);
    overflow: hidden;
}

/* タイトルバーとタブ */
#titlebar {
    height: 44px; background: var(--bg-bar);
    display: flex; align-items: center; padding: 0 10px; gap: 8px;
}

#tabs {
    display: flex; flex: 1; overflow-x: auto; gap: 4px;
    scrollbar-width: none; align-items: flex-end; height: 100%;
}

.tab {
    min-width: 160px; height: 34px; background: var(--bg-tab);
    border-radius: 8px 8px 0 0; padding: 0 12px;
    display: flex; align-items: center; gap: 10px;
    font-size: 12px; color: #9aa0a6; cursor: pointer;
    transition: 0.2s; user-select: none; position: relative;
}

.tab.active { background: var(--bg-tab-active); color: var(--text); }
.tab.pinned { min-width: 45px; width: 45px; justify-content: center; }
.tab.pinned span:first-child { display: none; }
.tab.pinned::after { content: "📌"; font-size: 12px; }

/* ナビバー */
#nav {
    height: 48px; background: var(--bg-tab-active);
    display: flex; align-items: center; padding: 0 15px; gap: 15px;
    border-bottom: 1px solid var(--border);
}

.nav-btn {
    background: transparent; border: none; color: var(--text);
    width: 32px; height: 32px; border-radius: 50%; cursor: pointer;
}
.nav-btn:hover { background: rgba(255,255,255,0.1); }

#urlbar {
    flex: 1; height: 32px; border-radius: 20px;
    background: #202124; border: 1px solid transparent;
    color: white; padding: 0 15px; outline: none;
}
#urlbar:focus { border-color: var(--accent); }

/* 表示エリア */
#view-container { flex: 1; background: white; }
iframe { width: 100%; height: 100%; border: none; }

/* 右クリックメニュー */
.context-menu {
    position: fixed; background: #2f3033; border: 1px solid #444;
    border-radius: 8px; color: white; min-width: 180px; padding: 5px 0;
    z-index: 10000; font-size: 13px;
}
.context-item { padding: 8px 15px; cursor: pointer; }
.context-item:hover { background: #3c4043; }

.hidden { display: none; }
.shadow-glass { box-shadow: 0 8px 24px rgba(0,0,0,0.4); }

:root {
    --bg-main: #121212;
    --bg-bar: #202124;
    --bg-tab: #292a2d;
    --bg-tab-active: #35363a;
    --accent: #8ab4f8;
    --border: rgba(255, 255, 255, 0.1);
    --text: #e8eaed;
}

body.demo-mode {
    margin: 0; height: 100vh; overflow: hidden;
    background: radial-gradient(circle at center, #1e1e2e, #000);
    display: flex; align-items: center; justify-content: center;
    font-family: "Segoe UI", sans-serif;
}

.browser-window {
    width: 95vw; height: 90vh; background: var(--bg-main);
    border-radius: 12px; display: flex; flex-direction: column;
    box-shadow: 0 30px 80px rgba(0,0,0,0.7); border: 1px solid var(--border);
}

#titlebar { height: 40px; background: var(--bg-bar); display: flex; align-items: center; padding: 0 10px; }
#tabs { display: flex; flex: 1; overflow-x: auto; scrollbar-width: none; align-items: flex-end; height: 100%; }

.tab {
    min-width: 140px; max-width: 200px; height: 32px; background: var(--bg-tab);
    border-radius: 8px 8px 0 0; padding: 0 12px; margin-right: 4px;
    display: flex; align-items: center; font-size: 12px; color: #9aa0a6;
    cursor: pointer; transition: 0.2s; position: relative; border: 1px solid transparent;
}
.tab.active { background: var(--bg-tab-active); color: var(--text); border: 1px solid var(--border); border-bottom: none; }
.tab.dragging { opacity: 0.8; z-index: 100; pointer-events: none; }
.tab.pinned { min-width: 45px; width: 45px; }
.tab.pinned span { display: none; }
.tab.pinned::after { content: "📌"; font-size: 12px; margin: auto; }

#newTabBtn { background: transparent; border: none; color: #9aa0a6; cursor: pointer; padding: 10px; }
#newTabBtn:hover { color: white; }

#nav { height: 48px; background: var(--bg-tab-active); display: flex; align-items: center; padding: 0 12px; gap: 10px; }
.nav-btn { background: transparent; border: none; color: white; cursor: pointer; width: 32px; height: 32px; border-radius: 50%; }
.nav-btn:hover { background: rgba(255,255,255,0.1); }
#urlbar { flex: 1; height: 30px; border-radius: 15px; background: #202124; border: 1px solid var(--border); color: white; padding: 0 15px; outline: none; }

#view-container { flex: 1; background: white; position: relative; }
iframe { width: 100%; height: 100%; border: none; background: white; }

.context-menu { position: fixed; background: #2f3033; border-radius: 8px; color: white; min-width: 180px; padding: 5px 0; z-index: 9999; border: 1px solid #444; }
.context-item { padding: 8px 15px; cursor: pointer; font-size: 13px; }
.context-item:hover { background: #3c4043; }
.hidden { display: none; }