<template>
  <div class="dashboard">
    <!-- 顶部导航 -->
    <header class="topbar">
      <button class="menu-btn" @click="sidebarOpen = !sidebarOpen">☰</button>
      <div class="brand">
        <img src="/src/assets/logo.png" alt="logo" />
        <!-- <span>销售数据平台</span> -->
      </div>
      <div class="user-dropdown" @click.stop="toggleUserMenu">
        <img :src="userInfo.avatar_pull" alt="avatar" class="avatar" />
        <i class="iconfont-sys iconsys-xiala" v-if="false"></i>
        <div v-if="showUserMenu" class="dropdown-menu" @click.stop>
          <div class="item" @click="openProfile">个人中心</div>
          <div class="item danger" @click="confirmLogout">退出登录</div>
        </div>
      </div>
    </header>

    <!-- 左侧导航 -->
    <aside :class="['sidebar', { open: sidebarOpen }]">
      <ul>
        <!-- <li
          v-for="(item, index) in menus"
          :key="item.id"
          @click="onNav(item.id, index)"
          :class="{ active: activeMenu === index }"
        >
        <i class="iconfont-sys" v-html="item.icon" style="margin-right: 10px;"></i>{{ item.name }}
        </li> -->
        <template v-for="(item, index) in menus" :key="item.id">
          <li
            @click="onNav(item.id, index)"
            :class="{ active: activeMenu === index }"
          >
          <i class="iconfont-sys" v-html="item.icon" style="margin-right: 10px;"></i>{{ item.name }}
          </li>
          <!-- 子菜单 -->
          <li 
            v-for="child in item.child" 
            :key="child.id"
            @click="onNav(child.id, -1)"
            class="submenu-item"
          >
            {{ child.name }}
          </li>
        </template>
      </ul>
    </aside>
    <div v-if="sidebarOpen" class="drawer-overlay" @click="sidebarOpen = false"></div>

    <!-- 右侧内容 -->
    <main class="content">
      <section v-for="m in menus" :key="m.id" :id="m.id" class="section">
        <h3>{{ m.name }}</h3>
        <div class="title-block"></div>
        <div class="card-grid">
          <div class="card" v-for="(item, index) in m.cards" :key="index" @click="onCardClick(item)">
            <div class="icon">
              <img src="/src/assets/card-icon.png" alt="icon" />
            </div>
            <div class="info">
              <div class="title">{{ item.title }}</div>
              <div class="desc">{{ item.description }}</div>
            </div>
          </div>
        </div>
      </section>
    </main>

    <!-- 修改资料弹窗 -->
    <div v-if="showProfile" class="modal-overlay" @click.self="showProfile = false">
      <div class="modal profile-modal">
        <!-- 顶部用户信息 -->
        <div class="profile-header">
          <div class="profile-avatar">
            <img :src="userInfo.avatar_pull" alt="avatar" />
          </div>
          <div class="profile-meta">
            <div class="profile-name">{{ userInfo.name }}</div>
            <div class="profile-sub">联系电话：{{ userInfo.mobile || '-' }}</div>
            <div class="profile-sub">编号：{{ userInfo.sn || '-' }}</div>
          </div>
        </div>

        <!-- 基本设置 -->
        <div class="profile-section">
          <div class="section-title">
            <span class="dot"></span>
            <span>基本设置</span>
          </div>
          <div class="section-body">
            <div class="row">
              <div class="col label">头像</div>
              <div class="col">
                <div class="avatar-edit">
                  <img :src="userInfo.avatar_pull" alt="avatar" class="avatar-lg" />
                  <input v-if="basicEditing" type="file" @change="uploadAvatar" />
                </div>
              </div>
            </div>
            <div class="row">
              <div class="col label">昵称</div>
              <div class="col">
                <input class="input" :disabled="!basicEditing" v-model="userInfo.nickname" placeholder="请输入昵称" />
              </div>
              <div class="col label">联系方式</div>
              <div class="col">
                <input class="input" :disabled="!basicEditing" v-model="userInfo.mobile" placeholder="请输入联系方式" />
              </div>
              <div class="col label">编号</div>
              <div class="col">
                <input class="input" disabled v-model="userInfo.sn" placeholder="请输入编号" />
              </div>
            </div>
            
          </div>
          <div class="actions">
            <button class="edit-btn" @click="saveProfile">{{ basicEditing ? '保存' : '编辑' }}</button>
          </div>
        </div>

        <!-- 更改密码 -->
        <div class="profile-section">
          <div class="section-title">
            <span class="dot"></span>
            <span>更改密码</span>
          </div>
          <div class="section-body">
            <div class="row">
              <div class="col label">当前密码</div>
              <div class="col">
                <input class="input" :type="pwdEditing ? 'password' : 'password'" :disabled="!pwdEditing" v-model="pwdForm.password" placeholder="请输入原始密码" />
              </div>
            </div>
            <div class="row">
              <div class="col label">新密码</div>
              <div class="col">
                <input class="input" :type="pwdEditing ? 'password' : 'password'" :disabled="!pwdEditing" v-model="pwdForm.password_new" placeholder="请输入新密码" />
              </div>
            </div>
            <div class="row">
              <div class="col label">确认新密码</div>
              <div class="col">
                <input class="input" :type="pwdEditing ? 'password' : 'password'" :disabled="!pwdEditing" v-model="pwdForm.confirm" placeholder="请输入确认密码" />
              </div>
            </div>
          </div>
          <div class="actions">
            <button class="edit-btn" @click="onResetPassword">{{ pwdEditing ? '保存' : '编辑' }}</button>
          </div>
        </div>

        <div class="modal-actions">
          <button class="btn ghost" @click="showProfile = false">关闭</button>
        </div>
      </div>
    </div>

    <!-- 退出登录确认 -->
    <div v-if="showLogoutConfirm" class="modal-overlay" @click.self="showLogoutConfirm = false">
      <div class="modal confirm-modal">
        <h3>确认退出登录？</h3>
        <p style="color:#666;margin-top:6px;">退出后需要重新登录才能进入系统。</p>
        <div class="modal-actions">
          <button class="btn ghost" @click="showLogoutConfirm = false">取消</button>
          <button class="btn primary" @click="doLogout">确认退出</button>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from "vue";
import { getMenus, getUser, updateUserInfo, resetPassword, uploadImage } from "../api";
import { ElMessage } from 'element-plus'
const menus = ref([]);
const profile = ref({ username: "", password: "" });
const showProfile = ref(false);
const sidebarOpen = ref(false);
const basicEditing = ref(false);
const pwdEditing = ref(false);
const pwdForm = ref({ password: "", password_new: "", confirm: "" });
const showUserMenu = ref(false);
const showLogoutConfirm = ref(false);
const userInfo = ref({});

onMounted(async () => {
  try {
    // const m = await getMenus();
    const m =[
    {
        "id": 2,
        "parent_id": 0,
        "name": "销售数据",
        "icon": "&#xe634;",
        "child":[
          {
            "id": 11,
            "parent_id": 2,
            "name": "销售数据child1",
          },
          {
            "id": 12,
            "parent_id": 2,
            "name": "销售数据child2",
          },
          {
            "id": 13,
            "parent_id": 2,
            "name": "销售数据child3",
          }
        ],
        "nav_item": [
            {
                "id": 5,
                "category_id": 2,
                "type": "file",
                "title": "2025年销售数据看板",
                "description": "每日更新",
                "url": "bsh_datax/classify/20251022/2925f02de6b9f25efe5772f70fdd0126_68f892e4c3caa.pdf",
                "sort": 1,
                "status": 1,
                "created_at": "2025-10-14T06:00:07.000000Z",
                "updated_at": "2025-10-22T08:16:39.000000Z",
                "url_pull": "http://static.hnzhwlkj.cn/bsh_datax/classify/20251022/2925f02de6b9f25efe5772f70fdd0126_68f892e4c3caa.pdf?Expires=1763435290&OSSAccessKeyId=LTAI5tAGiH7bkVkmrniXnfkA&Signature=j6r9ZEJt2NUikBdjnW6jmZS9IKI%3D"
            },
            {
                "id": 7,
                "category_id": 2,
                "type": "file",
                "title": "BFS渠道Q3销售进度",
                "description": "每日12次更新",
                "url": "bsh_datax/classify/20251022/1da0a229d5e8bbd89ef0a89938a75127_68f895f291285.xlsx",
                "sort": 1,
                "status": 1,
                "created_at": "2025-10-15T08:53:51.000000Z",
                "updated_at": "2025-10-22T08:29:40.000000Z",
                "url_pull": "http://static.hnzhwlkj.cn/bsh_datax/classify/20251022/1da0a229d5e8bbd89ef0a89938a75127_68f895f291285.xlsx?Expires=1763435290&OSSAccessKeyId=LTAI5tAGiH7bkVkmrniXnfkA&Signature=KQiXvIt9bJtpB3eCLRzzYHkiPhg%3D"
            }
        ]
    },
    {
        "id": 3,
        "parent_id": 0,
        "name": "CX/供应链看板",
        "icon": "&#xe6b4;",
        "child":[
          {
            "id": 14,
            "parent_id": 3,
            "name": "供应链看板child1",
          },
          {
            "id": 15,
            "parent_id":3,
            "name": "供应链看板",
          },
          {
            "id": 16,
            "parent_id": 3,
            "name": "供应链看板child3",
          }
        ],
        "nav_item": [
            {
                "id": 8,
                "category_id": 3,
                "type": "link",
                "title": "BFS渠道Q3销售进度",
                "description": "每日12次更新",
                "url": "",
                "sort": 0,
                "status": 1,
                "created_at": "2025-10-16T06:18:55.000000Z",
                "updated_at": "2025-10-16T06:18:55.000000Z",
                "url_pull": ""
            },
            {
                "id": 9,
                "category_id": 3,
                "type": "link",
                "title": "华北西门子Q3重品销售进度",
                "description": "销售代表3季度KPI",
                "url": "",
                "sort": 0,
                "status": 1,
                "created_at": "2025-10-16T06:19:09.000000Z",
                "updated_at": "2025-10-16T06:19:09.000000Z",
                "url_pull": ""
            },
            {
                "id": 13,
                "category_id": 3,
                "type": "file",
                "title": "2025年西门子冰箱+洗衣机产品规划-9月",
                "description": "",
                "url": "bsh_datax/classify/20251022/eb728831e28f5e2a5e3760e5bc7e3da5_68f8906559822.xlsx",
                "sort": 0,
                "status": 1,
                "created_at": "2025-10-22T08:05:59.000000Z",
                "updated_at": "2025-10-22T08:25:34.000000Z",
                "url_pull": "http://static.hnzhwlkj.cn/bsh_datax/classify/20251022/eb728831e28f5e2a5e3760e5bc7e3da5_68f8906559822.xlsx?Expires=1763435290&OSSAccessKeyId=LTAI5tAGiH7bkVkmrniXnfkA&Signature=oitV4sQQn0crmJbT9TonaauPFDA%3D"
            },
            {
                "id": 14,
                "category_id": 3,
                "type": "file",
                "title": "看板222",
                "description": "",
                "url": "bsh_datax/classify/20251022/063ab7207ed6f0b5f51ad67f06ca17de_68f891e33004b.xlsx",
                "sort": 0,
                "status": 1,
                "created_at": "2025-10-22T08:12:26.000000Z",
                "updated_at": "2025-10-22T08:12:26.000000Z",
                "url_pull": "http://static.hnzhwlkj.cn/bsh_datax/classify/20251022/063ab7207ed6f0b5f51ad67f06ca17de_68f891e33004b.xlsx?Expires=1763435290&OSSAccessKeyId=LTAI5tAGiH7bkVkmrniXnfkA&Signature=uV8rB3YNovpiuuFT%2FaCVgfzd6hI%3D"
            }
        ]
    },
    {
        "id": 4,
        "parent_id": 0,
        "name": "产品内容",
        "icon": "&#xe641;",
        "child":[],
        "nav_item": [
            {
                "id": 10,
                "category_id": 4,
                "type": "link",
                "title": "华北西门子Q3重品销售进度",
                "description": "每日12次更新",
                "url": "",
                "sort": 0,
                "status": 1,
                "created_at": "2025-10-16T06:19:26.000000Z",
                "updated_at": "2025-10-16T06:19:26.000000Z",
                "url_pull": ""
            },
            {
                "id": 11,
                "category_id": 4,
                "type": "file",
                "title": "使用手册",
                "description": "",
                "url": "https://bshdataboard.oss-cn-beijing.aliyuncs.com/bsh_datax/classify/20251017/76734144ac2137556fd192d140ed4e3d_68f1dd20c92c7.png?Expires=1760684848&OSSAccessKeyId=LTAI5tAGiH7bkVkmrniXnfkA&Signature=eTV%2FN7wEopq%2BT7%2BjzDaGrCSP6G0%3D",
                "sort": 0,
                "status": 1,
                "created_at": "2025-10-17T03:02:10.000000Z",
                "updated_at": "2025-10-17T06:07:36.000000Z",
                "url_pull": "http://static.hnzhwlkj.cn/https%3A//bshdataboard.oss-cn-beijing.aliyuncs.com/bsh_datax/classify/20251017/76734144ac2137556fd192d140ed4e3d_68f1dd20c92c7.png%3FExpires%3D1760684848%26OSSAccessKeyId%3DLTAI5tAGiH7bkVkmrniXnfkA%26Signature%3DeTV%252FN7wEopq%252BT7%252BjzDaGrCSP6G0%253D?Expires=1763435290&OSSAccessKeyId=LTAI5tAGiH7bkVkmrniXnfkA&Signature=JWrXGUSgQMgE%2FmE%2BxOQtw5COwl8%3D"
            }
        ]
    },
    {
        "id": 5,
        "parent_id": 0,
        "name": "看板分类",
        "icon": "&#xe70e;",
        "child":[],
        "nav_item": [
            {
                "id": 12,
                "category_id": 5,
                "type": "link",
                "title": "看板内容",
                "description": "",
                "url": "#",
                "sort": 0,
                "status": 1,
                "created_at": "2025-10-20T06:02:58.000000Z",
                "updated_at": "2025-10-20T06:02:58.000000Z",
                "url_pull": ""
            }
        ]
    }
]
    // const res = m.data;
    const res = m;
    // 模拟数据结构：[{ id, name, cards: [{ title, desc }] }]
    menus.value = res.map((section) => ({
      ...section,
      cards: section.nav_item.map((c) =>
        typeof c === "string"
          ? { title: c, description: "" }
          : c
      ),
    }));
    const {data} = await getUser();
    userInfo.value = data.user;
  } catch (e) {
    console.error(e);
  }
});
// 下载文件
async function onCardClick(item){
  if (!item) return;
  const url = item.url_pull;
  const type = item.type;
  if (!url) return;
  if (type === 'link') {
    window.open(url, '_blank');
    return;
  }

  if (type === 'file') {
    window.open(url, '_blank');
    
    // try {
    //   // 对所有文件类型都使用 fetch 下载，确保真正的下载
    //   const response = await fetch(url, {
    //     method: 'GET',
    //     headers: {
    //       Accept: '*/*'
    //     }
    //   })
      
    //   if (!response.ok) {
    //     throw new Error(`下载失败: ${response.status} ${response.statusText}`)
    //   }
    //   const blob = await response.blob()
    //   const url = window.URL.createObjectURL(blob)
    //   const link = document.createElement('a')
    //   link.href = url
    //   link.download = file.name || file.file_name || 'download'
    //   link.style.display = 'none'
    //   document.body.appendChild(link)
    //   link.click()
    //   document.body.removeChild(link)
    //   window.URL.revokeObjectURL(url)
      
    //   ElMessage.success('下载成功')
    // } catch (error) {
    //   console.error('下载失败:', error)
    //   const errorMessage = error instanceof Error ? error.message : '未知错误'
    //   ElMessage.error(`下载失败: ${errorMessage}`)
    // }
    return;
  }
}

const activeMenu = ref(0);
function onNav(id, index) {
  activeMenu.value = index;
  const el = document.getElementById(id);
  if (el) {
    const topbarHeight = 56;
    const mobileHeight = 44;
    const offset = window.innerWidth <= 768 ? mobileHeight : topbarHeight;
    const y = el.getBoundingClientRect().top + window.scrollY - offset;
    window.scrollTo({ top: y, behavior: "smooth" });
  }
  sidebarOpen.value = false;
}

async function uploadAvatar(e){
  const file = e.target.files[0];
  const formData = new FormData();
  formData.append('image', file);
  formData.append('scene', 'user');
  const { data } = await uploadImage(formData);
  if (data) {
    userInfo.value.avatar = data.href;
    userInfo.value.avatar_pull = data.url;
  }
}
async function saveProfile(){
  basicEditing.value = !basicEditing.value;
  if(basicEditing.value) return;
  try {
    const { data } = await updateUserInfo(userInfo.value);
  } catch (e) {
    console.error('保存用户信息失败', e);
  } finally {
    basicEditing.value = false;
  }
}
async function onResetPassword(){
  pwdEditing.value = !pwdEditing.value;
  if(pwdEditing.value) return;
  if(pwdForm.value.password_new !== pwdForm.value.confirm){
    alert('新密码和确认密码不一致');
    return;
  }
  try {
    const { message } = await resetPassword(pwdForm.value);
    alert(message);
  } catch (e) {
    alert(e?.response?.data?.message || '重置密码失败');
  }
}
function toggleUserMenu(){
  showUserMenu.value = !showUserMenu.value;
}
async function openProfile(){
  showUserMenu.value = false;
  try {
    const { data } = await getUser();
    if (data.user) {
      userInfo.value = data.user;
      profile.value.nickname = data.user.nickname || data.user.name || '';
      profile.value.phone = data.user.phone || '';
      profile.value.code = data.user.code || data.user.id || '';
    }
  } catch (e) {
    console.error('获取用户信息失败', e);
  } finally {
    showProfile.value = true;
  }
}
function confirmLogout(){
  showUserMenu.value = false;
  showLogoutConfirm.value = true;
}
function doLogout(){
  // 清空本地缓存并跳转登录
  localStorage.clear();
  window.location.href = '/login';
}

window.addEventListener('click', () => { showUserMenu.value = false; });
</script>

<style scoped>
.dashboard {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

/* 顶部导航 */
.topbar {
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 16px;
  background: #fff;
  /* color: #fff; */
  position: sticky;
  top: 0;
  z-index: 50;
}
.brand {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 600;
}
.brand img {
  height: 22px;
}
.menu-btn {
  display: none;
  background: none;
  border: none;
  color: #fff;
  font-size: 20px;
  cursor: pointer;
}
.user-dropdown img.avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  cursor: pointer;
}
.user-dropdown{ position:relative; }
.user-dropdown .dropdown-menu{
  position:absolute; right:0; top:46px; width:140px; background:#fff; border:1px solid #e5e7eb; border-radius:8px; box-shadow:0 10px 30px rgba(0,0,0,.08); z-index:120;
}
.user-dropdown .dropdown-menu .item{ padding:10px 12px; cursor:pointer; font-size:14px; color:#333; }
.user-dropdown .dropdown-menu .item:hover{ background:#f6fbfb; color:#009999; }
.user-dropdown .dropdown-menu .item.danger{ color:#e35d5d; }

/* 左侧导航 */
.sidebar {
  width: 220px;
  background: #fff;
  padding: 12px 0;
  position: fixed;
  left: 0;
  top: 56px;
  bottom: 0;
  overflow-y: auto;
  border-right: 1px solid #e5e7eb;
}
.sidebar ul {
  list-style: none;
  padding: 0;
  margin: 0;
}
.sidebar li {
  padding: 10px 18px;
  cursor: pointer;
  color: #333;
  font-size: 14px;
  border-left: 3px solid transparent;
  transition: all 0.2s;
}
.sidebar li:hover {
  background: #eef6f6;
  color: #009999;
}
.sidebar li.active {
  background: rgba(0, 153, 153, 0.09);
  border-left: 3px solid #009999;
  color: #009999;
  font-weight: 600;
}
.sidebar .submenu-item {
  padding: 8px 18px 8px 36px;
  cursor: pointer;
  color: #666;
  font-size: 13px;
}

/* 内容区 */
.content {
  margin-left: 220px;
  padding: 24px;
  background: #f5f6f9;
  min-height: 100vh;
}

/* section 标题 */
.section h3 {
  font-size: 16px;
  font-weight: 600;
  color: #222;
  margin: 20px 0 16px;
  /* border-left: 4px solid #0f7c72; */
  padding-left: 8px;
}

.title-block {
  width: 40px;
  height: 8px;
  background: #14C9C9;
  margin-bottom: 16px;
  margin-top: -25px;
  margin-left: 10px;
}

/* 卡片网格 */
.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 16px;
}
.card {
  background: #fff;
  padding: 16px;
  border-radius: 10px;
  box-shadow: 0 4px 10px rgba(14, 42, 51, 0.06);
  display: flex;
  align-items: center;
  gap: 12px;
  transition: box-shadow 0.2s;
  cursor: pointer;
}
.card:hover {
  box-shadow: 0 6px 16px rgba(14, 42, 51, 0.12);
}
.card .icon img {
  width: 36px;
  height: 36px;
}
.card .info .title {
  font-size: 14px;
  font-weight: 600;
  color: #222;
}
.card .info .desc {
  font-size: 12px;
  color: #666;
  margin-top: 4px;
}

/* 弹窗 */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.4);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 200;
}
.modal {
  background: #fff;
  padding: 18px;
  width: 340px;
  border-radius: 10px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
}
.profile-modal{ width: 920px; max-width: 96vw; }
.profile-header{ display:flex; align-items:center; gap:16px; padding:14px; background:linear-gradient(90deg,#f3fbfb,#ffffff); border-radius:8px; margin-bottom:16px; }
.profile-avatar img{ width:56px; height:56px; border-radius:50%; }
.profile-meta{ display:flex; flex-direction:column; gap:4px; }
.profile-name{ font-size:16px; font-weight:700; color:#222; }
.profile-sub{ font-size:12px; color:#666; }

.profile-section{ background:#fff; border:1px solid #eef2f2; border-radius:8px; padding:12px 14px; margin:16px 0; }
.section-title{ display:flex; align-items:center;margin-bottom:10px; }
.section-title .dot{ width:6px; height:16px; background:#14C9C9; border-radius:3px; display:inline-block; margin-right:8px; }
.section-title > span:first-child{ margin-right:8px; }
.edit-btn{ border:1px solid #14C9C9; color:#14C9C9; background:#ecfafa; border-radius:6px; padding:6px 12px; cursor:pointer; }
.section-body{ padding:4px 0; }
.row{ display:grid; grid-template-columns: 80px 1fr 80px 1fr 80px 1fr; gap:12px; align-items:center; padding:8px 0; }
.row + .row{ border-top:1px dashed #eef2f2; }
.col.label{ color:#666; font-size:13px; }
.input{ width:100%; height:36px; border:1px solid #e5e7eb; border-radius:6px; padding:0 10px; background:#fafafa; }
.avatar-lg{ width:64px; height:64px; border-radius:50%; }
.avatar-edit{ display:flex; align-items:center; gap:10px; }

.modal-actions{ display:flex; justify-content:flex-end; gap:8px; margin-top:8px; }
.btn{ padding:8px 14px; border-radius:8px; border:1px solid transparent; cursor:pointer; }
.btn.ghost{ background:#fff; border-color:#e5e7eb; }
.btn.primary{ background:#14C9C9; color:#fff; }
.modal label {
  display: block;
  margin-top: 8px;
  color: #555;
}
.actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 12px;
}

/* 移动端适配 */
.drawer-overlay {
  display: none;
}
@media (max-width: 768px) {
  .menu-btn {
    display: block;
  }
  .sidebar {
    left: -260px;
    transition: left 0.28s;
    top: 44px;
    width: 200px;
    z-index: 60;
  }
  .sidebar.open {
    left: 0;
  }
  .drawer-overlay {
    display: block;
    position: fixed;
    inset: 44px 0 0 0;
    background: rgba(0, 0, 0, 0.4);
    z-index: 50;
  }
  .content {
    margin-left: 0;
    padding: 16px;
    margin-top: 56px;
  }
  .topbar {
    height: 44px;
    padding: 0 12px;
  }
  .brand span {
    display: none;
  }
  .modal {
    width: 90%;
  }
}
</style>
