/* Global Reset */
html,
body{
    margin:0 !important;
    padding:0 !important;
    width:100%;
    min-height:100%;
}

body{
    overflow-x:clip;
}
*,
*::before,
*::after{
    box-sizing:border-box;
}

#dp-root{
  --dp-page-background:#0f0f10;
  --dp-content-background:#171717;
  --dp-feature-background:#1d1d1f;
  --dp-text-color:#f2f2f2;
  --dp-muted-color:#999;
  --dp-border-color:rgba(255,255,255,.10);
  --dp-panel:var(--dp-content-background);
  --dp-panel-2:var(--dp-feature-background);
  --dp-text:var(--dp-text-color);
  --dp-muted:var(--dp-muted-color);
  --dp-line:var(--dp-border-color);
  --dp-primary:#777;
  --dp-left:240px;
  --dp-left-mini:56px;
  --dp-main:1000px;
  --dp-right:350px;
  --dp-gap:10px;
  --dp-layout-width:calc(var(--dp-main) + var(--dp-right) + var(--dp-gap));
  --dp-right-align:start;
  --dp-header:72px;
  min-height:100vh;
  background:var(--dp-page-background);
  color:var(--dp-text);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","Noto Sans TC","Microsoft JhengHei",sans-serif;
  box-sizing:border-box;
  overflow-x:clip;
}
#dp-root.dp-mode-light{
  --dp-page-background:#f4f4f4;
  --dp-content-background:#ffffff;
  --dp-feature-background:#f0f0f0;
  --dp-text-color:#111111;
  --dp-muted-color:#666666;
  --dp-border-color:rgba(0,0,0,.12);
  --dp-panel:var(--dp-content-background);
  --dp-panel-2:var(--dp-feature-background);
  --dp-text:var(--dp-text-color);
  --dp-muted:var(--dp-muted-color);
  --dp-line:var(--dp-border-color);
}
#dp-root *,
#dp-root *::before,
#dp-root *::after{
  box-sizing:border-box;
}
#dp-root .dp-side{
  position:fixed;
  left:0;
  top:0;
  bottom:0;
  width:var(--dp-left);
  background:var(--dp-panel);
  border-right:1px solid var(--dp-line);
  z-index:30;
  transform:translateX(0);
  transition:transform .28s ease, box-shadow .28s ease;
  will-change:transform;
}
#dp-root .dp-shell{
  margin-left:var(--dp-left);
  min-height:100vh;
  background:var(--dp-page-background);
  overflow-x:clip;
  transition:margin-left .28s ease;
}
#dp-root .dp-head{
  position:sticky;
  top:0;
  z-index:20;
  min-height:var(--dp-header);
  display:grid;
  grid-template-columns:220px minmax(0,1fr) 280px;
  gap:16px;
  align-items:center;
  padding:0 24px;
  background:var(--dp-panel);
  border-bottom:0px solid var(--dp-line);
}
#dp-root .dp-head-left,
#dp-root .dp-head-center,
#dp-root .dp-head-right{
  min-width:0;
}
#dp-root .dp-head-right{
  display:flex;
  justify-content:flex-end;
  gap:10px;
  align-items:center;
}
/* v0.8.6: 版面寬度只限制 MAIN AREA + RIGHT SIDEBAR 框架。
   TOP / FOOT / 其他區塊保持可 100% 滿寬，不吃頁面範本寬度。 */
#dp-root .dp-layout{
  width:min(100%, var(--dp-layout-width));
  max-width:var(--dp-layout-width);
  margin-left:auto;
  margin-right:auto;
}
#dp-root .dp-top,
#dp-root .dp-foot{
  width:100%;
  max-width:none;
}
#dp-root .dp-top{
  margin-top:24px;
  margin-bottom:24px;
}
#dp-root .dp-layout{
  display:grid;
  grid-template-columns:minmax(0, max(0px, calc(var(--dp-layout-width) - var(--dp-right) - var(--dp-gap)))) minmax(0,var(--dp-right));
  gap:var(--dp-gap);
  margin-bottom:24px;
  align-items:stretch;
}
#dp-root .dp-main,
#dp-root .dp-right{
  min-width:0;
  min-height:520px;
}
#dp-root .dp-right{
  align-self:var(--dp-right-align, start);
  justify-self:stretch;
  position:relative;
  top:auto;
  min-height:0;
}
#dp-root .dp-right-sticky-wrap{
  position:var(--dp-right-position, relative);
  top:var(--dp-right-sticky-top, 24px);
  align-self:start;
  width:100%;
}
#dp-root .dp-foot{
  margin-top:24px;
  margin-bottom:24px;
  min-height:100px;
}
body.dp-sidebar-collapsed #dp-root .dp-side{
  width:var(--dp-left);
  transform:translateX(-100%);
  box-shadow:none;
}
body.dp-sidebar-collapsed #dp-root .dp-shell{
  margin-left:0;
}



/*自訂css*/
.dp-top.dp-c-top_page,#dp-root .dp-c-top_home {
	margin: 0 !important;
	background: var(--dp-content-background);
    color: var(--dp-text-color);
    border-bottom: 1px solid var(--dp-border-color);
	max-width: none !important;}

#dp-root .dp-side-top{padding: 0 0 0 8px !important;}
.dp-foot.dp-c-footer{width:100% !important;max-width:100% !important; bottom:0;}
.dp-head-right{
    display:flex;
    align-items:stretch;
    justify-content:flex-end;
    height:38px;
}

.dp-head-right > .dp-block,
.dp-head-right > .dp-btn{
    width:38px !important;
    height:38px !important;
    flex:0 0 38px;
    display:flex !important;
    align-items:center;
    justify-content:center;
    padding:0 !important;
    margin:0 !important;
    border:0;
    border-radius:0 !important;
    background:transparent !important;
    box-shadow:none !important;
}

.dp-head-right > .dp-block + .dp-btn{
    border-left:1px solid var(--dp-border-color, #ddd);
}

.dp-head-right .dp-member-trigger{
    width:100% !important;
    height:100% !important;
    border:0 !important;
    border-radius:0 !important;
    background:transparent !important;
    box-shadow:none !important;
    padding:0 !important;
}

.dp-head-right svg{
    width:28px;
    height:28px;
    display:block;
}
.dp-head-right > *{
    position:relative;
}

.dp-head-right > * + *::before{
    content:"";
    position:absolute;
    left:0;
    top:8px;
    bottom:8px;
    width:1px;
    background:rgba(255,255,255,.2);
}
body.dp-dark .dp-head-right > * + *::before{
    background:#444;
}

/* v0.6.8 Five-device visibility and drawer variables */
#dp-root{--dp-mobile-drawer:90vw;}
@media(min-width:1600px){#dp-root .dp-hide-xxl{display:none !important;}}
@media(min-width:1200px) and (max-width:1599px){#dp-root .dp-hide-xl{display:none !important;}}
@media(min-width:992px) and (max-width:1199px){#dp-root .dp-hide-lg{display:none !important;}}
@media(min-width:768px) and (max-width:991px){#dp-root .dp-hide-md{display:none !important;}}
@media(max-width:767px){#dp-root .dp-hide-sm{display:none !important;}}