:root{--panel-width:320px;--overlay-bg:rgba(0,0,0,0.45);}
    .topbar{width:82px;height:82px; display:flex;align-items:center; justify-content: center; border-radius: 99rem; background:#523817; order: 6;}
    .hamburger{width:82px;height:82px;border-radius:8px;border:0;background:transparent;display:inline-grid;place-items:center;cursor:pointer}
    .hamburger .bar{display:block;width:20px;height:2px;background:#fff;border-radius:2px;position:relative}
    .hamburger .bar::before,.hamburger .bar::after{content:'';position:absolute;left:0;width:20px;height:2px;background:#fff;border-radius:2px}
    .hamburger .bar::before{top:-6px}
    .hamburger .bar::after{top:6px}

    .overlay{position:fixed;inset:0;background:transparent;visibility:hidden;opacity:0;transition:opacity .25s ease,visibility .01s linear .25s;z-index:40}
    .overlay.show{visibility:visible;opacity:1;transition:opacity .25s ease}
    .overlay-bg{position:absolute;inset:0;background:var(--overlay-bg)}

    .panel{position:fixed;left:0;top:0;height:100vh;width:var(--panel-width);max-width:100%;background:#fff;box-shadow:2px 0 12px rgba(11,20,30,0.12);transform:translateX(-110%);transition:transform .28s cubic-bezier(.2,.9,.2,1);z-index:50;display:flex;flex-direction:column}
    .panel.show{transform:translateX(0)}
    .panel-header{height:56px;display:flex;align-items:center;gap:8px;padding:0 12px;border-bottom:1px solid #eef2f5}
    .panel-header h2{font-size:16px;margin:0}
    .panel-content{padding:12px 12px 24px 12px;overflow-y:auto;flex:1}

    .menu-item{display:flex;align-items:center;justify-content:space-between;padding:10px 8px;border-radius:6px;text-decoration:none;color:#0b1720;margin-bottom:4px;cursor:pointer}
    .menu-item > a{text-decoration:none;color:inherit;flex:1}
    .menu-item:hover{background:#f3f4f6}
    .submenu{display:none;padding-left:16px;margin:4px 0 8px 0;border-left:2px solid #e5e7eb}
    .submenu a{display:block;padding:6px 0;color:#374151;text-decoration:none}
    .submenu a:hover{color:#111}
    .menu-item.open + .submenu{display:block}

    .arrowhead{transition:transform .25s ease;margin-left:8px}
    .menu-item.open .arrowhead{transform:rotate(90deg)}



    @media (max-width:640px){
      .topbar{width:60px;height:60px;}
      .hamburger{width:60px;height:60px;}

    }

    @media (max-width:360px){:root{--panel-width:280px}}


    /*我額外新增*/
    .menu-title{ background: #A07744; color: #fff; font-size: 18px; font-weight: 500; padding: 6px 0 2px 10px; margin-top: 12px; margin-bottom: 10px;}
    .menu-title i{ margin-right: 10px;}