:root {
  --sidebar-bg: #f6f8fa;
  --sidebar-border: #dde4ea;
  --sidebar-shadow: 0 8px 40px rgba(44,62,80,0.13);
  --accent: #318ce7;
  --accent-hover: #1450a3;
  --sidebar-input-bg: #fff;
}

body { font-family: 'Segoe UI', Arial, sans-serif; }

.sidebar {
  position: fixed; top: 0; right: 0; bottom: 0; min-width: 340px; max-width: 340px;
  background: var(--sidebar-bg); color: #222b36; z-index: 2000;
  box-shadow: var(--sidebar-shadow); border-left: 1px solid var(--sidebar-border);
  display: flex; flex-direction: column; align-items: stretch;
  transform: translateX(100%); transition: transform .32s cubic-bezier(.4,2,.6,1);
}
.sidebar.open { transform: translateX(0); }
.sidebar.closed { transform: translateX(100%); }

.sidebar-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 22px 24px 8px 24px; background: #eaf2fb; border-bottom: 1px solid var(--sidebar-border);
}
.sidebar-title { font-size: 1.17em; font-weight: 600; letter-spacing: 1px;}
.close-btn { font-size: 2em; background: none; border: none; color: #222b36; cursor: pointer; }

.sidebar-menu {
  display: flex; flex-direction: row; gap: 7px;
  justify-content: center; padding: 18px 0 12px 0; border-bottom: 1px solid var(--sidebar-border);
  background: var(--sidebar-bg);
}
.sidebar-menu-btn {
  background: #fff; border: 1.5px solid var(--sidebar-border); color: #35577a;
  border-radius: 7px 7px 0 0; padding: 9px 32px;
  font-size: 1.07em; cursor: pointer; margin: 0; font-weight: 600;
  transition: background .14s, color .13s, border-color .13s;
  outline: none;
}
.sidebar-menu-btn.active, .sidebar-menu-btn:focus, .sidebar-menu-btn:hover {
  background: var(--accent); color: #fff; border-color: var(--accent-hover);
}

#sidebarPageContent {
  flex: 1 1 auto; padding: 34px 24px; overflow-y: auto; display: flex; flex-direction: column;
  align-items: center; justify-content: flex-start; text-align: center;
}

.sidebar-section {
  width: 100%; max-width: 340px; margin-bottom: 20px; background: var(--sidebar-input-bg); border-radius: 10px; padding: 20px 16px; box-shadow: 0 2px 12px rgba(44,62,80,0.04);
  display: flex; flex-direction: column; align-items: center;
}
.sidebar-section label { font-weight: 500; margin-bottom: 5px; margin-top: 7px;}
.sidebar-section select, .sidebar-section button {
  width: 100%; min-width: 100px; margin-bottom: 10px; border-radius: 7px;
  background: #f8fafd; border: 1px solid #bfcbe0; padding: 11px 12px; font-size: 1em;
  box-sizing: border-box;
}
.sidebar-section button { width: 100%; background: var(--accent); color: #fff; border: none; font-weight: 600; }

.sidebar-section .flag-btn { display: flex; align-items: center; justify-content: center; gap: 8px; }
.sidebar-section .flag-btn .emoji { font-size: 1.1em; }

.sidebar-toggle-btn {
  position: fixed; top: 18px; right: 18px; z-index: 2100;
  background: var(--accent); color: #fff; border: none; border-radius: 8px;
  font-size: 2em; width: 48px; height: 48px; cursor: pointer;
  box-shadow: 0 4px 18px rgba(44,62,80,0.10);
  transition: background .14s;
}
.sidebar-toggle-btn:hover { background: var(--accent-hover);}
@media (max-width: 600px) {
  .sidebar { width: 99vw; }
  .sidebar-toggle-btn { width: 38px; height: 38px; font-size: 1.4em; }
}