/* dashboard-theme.css - 极简卡通风格数据监控主板专用 */
body {
  background: #FFF9EA;
  color: #6E4E2C;
  font-family: '微软雅黑', 'Arial', 'sans-serif';
  margin: 0;
}

/* 卡通顶部插画区 */
.main-header {
  width: 100%;
  text-align: center;
  padding-top: 32px;
  padding-bottom: 8px;
}
.main-title {
  font-size: 2.6rem;
  font-weight: bold;
  color: #6E4E2C;
  letter-spacing: 5px;
  margin-top: 0;
  margin-bottom: 14px;
  font-family: '微软雅黑', 'Arial', 'sans-serif';
}

/* 卡通城市/主机插画建议用SVG，可替换图片 */
.header-illustration {
  max-width: 160px;
  margin: 0 auto 12px auto;
  display: block;
}

/* 圆角磁贴大按钮区 */
.tile-btn-group {
  display: flex;
  flex-direction: row;
  justify-content: center;
  gap: 22px;
  margin: 20px 0 28px 0;
}
.tile-btn {
  display: flex;
  align-items: center;
  min-width: 150px;
  padding: 12px 32px;
  font-size: 1.2rem;
  background: #FFFDF6;
  border-radius: 25px;
  border: 3px solid #F4B468;
  color: #6E4E2C;
  font-weight: 700;
  outline: none;
  box-shadow: 0 4px 16px 0 rgba(244,180,104,0.11);
  transition: background 0.18s, box-shadow 0.2s;
  cursor: pointer;
  gap: 12px;
}
.tile-btn:hover {
  background: #FFE3B6;
  box-shadow: 0 4px 32px 0 rgba(244,180,104,0.19);
}

/* 卡片框风格替换 */
.card {
  background: #FFFDF6;
  border-radius: 18px;
  border: 2.2px solid #F4B468;
  box-shadow: 0 2px 16px 0 rgba(244,180,104,0.10);
}
.card-body {
  padding: 16px 10px 12px 10px;
}

/* 图表容器可尽量圆角 */
.chart-container {
  background: #FDF7ED;
  border-radius: 18px;
  border: 1.2px dashed #F4B468;
  padding: 16px;
  margin-bottom: 0;
}

/* 表单区极简（圆角柔和颜色） */
.form-select, .form-control {
  border-radius: 16px !important;
  border: 1.5px solid #F4B468 !important;
  background: #FFF9EA !important;
  color: #6E4E2C !important;
  font-size: 17px !important;
}
.form-label {
  color: #6E4E2C;
  font-weight: 700;
  margin-bottom: 3px;
}

.btn-primary,
.btn-outline-primary,
.btn-outline-success,
.btn-outline-danger {
  border-radius: 18px !important;
  font-weight: 700 !important;
  font-size: 19px !important;
  box-shadow: 0 2px 11px 0 rgba(244,180,104,0.07);
  background: #F4B468 !important;
  color: #6E4E2C !important;
  border: none !important;
  transition: background 0.16s;
}
.btn-primary:hover,
.btn-outline-primary:hover,
.btn-outline-success:hover,
.btn-outline-danger:hover {
  background: #FFE3B6 !important;
}

footer {
  margin-top: 44px;
  font-size: 14.5px;
  color: #957746;
  text-align: center;
  letter-spacing: 2.5px;
  background: linear-gradient(90deg, #FFFAEE 95%, #FFE3B6 100%);
  padding: 12px 0;
  border-top: 2px solid #F4B468;
  border-radius: 0 0 18px 18px;
  box-shadow: 0 2px 18px 0 rgba(244,180,104,0.13);
  /* 新增：底部渐变和阴影 */
}

/* ====美化增强BEGIN==== */

/* 1. 头部视觉渐变与拟态阴影 */
.main-header {
  backdrop-filter: blur(4px);
  background: linear-gradient(135deg, #FFF9EA 77%, #FFE3B6 100%);
  border-radius: 0 0 35px 35px;
  box-shadow: 0 8px 28px 0 rgba(244,180,104,0.11);
  position: relative;
  overflow: visible;
}
.main-header::after {
  content: "";
  position: absolute;
  left:50%;top:98%;transform:translateX(-50%);
  width: 80%;
  height: 25px;
  border-radius: 20px;
  background: radial-gradient(ellipse at center,#FFE3B6 20%,#FFFDF6 70%);
  opacity: 0.12;
  z-index: 0;
}

/* 2. 主标题高级描边与动画 */
.main-title {
  text-shadow: 1px 3px 7px #FFE3B6, 0 0 2px #FFFDF6;
  letter-spacing: 8px;
  animation: title-pop 1.3s cubic-bezier(.7,.2,.3,1.2);
}
@keyframes title-pop {
  0% { opacity:0; transform:translateY(-30px) scale(0.9);}
  75% { opacity:1; transform:translateY(4px) scale(1.08);}
  100% { opacity:1; transform:translateY(0) scale(1);}
}

/* 3. 头部插画图片呼吸动效与外阴影 */
.header-illustration {
  box-shadow: 0 8px 26px 0 rgba(244,180,104,0.14);
  animation: img-breath 4.5s cubic-bezier(.4,0,.4,1.04) infinite;
}
@keyframes img-breath {
  0%,100% { filter:drop-shadow(0 8px 24px #F4B46850) brightness(1.02);}
  55% { filter:drop-shadow(0 18px 30px #F4B46877) brightness(1.11);}
}

/* 4. 磁贴按钮组新动效 */
.tile-btn-group {
  z-index: 1;
}
.tile-btn {
  transition: background 0.18s, box-shadow 0.2s, transform 0.16s;
}
.tile-btn:hover {
  transform:scale(1.042) rotate(-1.5deg);
  box-shadow: 0 8px 32px 0 rgba(244,180,104,0.22);
}

/* 5. 卡片玻璃透明度渐变&边框高亮 */
.card {
  background: linear-gradient(130deg,#FFFDF6e5 90%, #FFE3B680 100%);
  box-shadow: 0 4px 24px 0 rgba(244,180,104,0.15);
  border: 2.6px solid #F4B468;
  transition: border 0.16s, box-shadow 0.16s;
}
.card:hover {
  border-color:#FFA726;
  box-shadow: 0 14px 42px 0 rgba(244,180,104,0.22);
}

/* 6. 图表容器发光边框效果 */
.chart-container {
  box-shadow: 0 2px 16px 0 rgba(244,180,104,0.15), 0 0 0 4px #FFE3B650;
  transition: box-shadow 0.2s, border 0.2s;
}
.chart-container:hover {
  box-shadow: 0 6px 32px 0 rgba(244,180,104,0.32), 0 0 0 6px #F4B46844;
  border-color: #FFA726;
}

/* 7. 输入控件聚焦高亮发光 */
.form-control:focus, .form-select:focus {
  box-shadow: 0 0 0 5px #FFD09B80 !important;
  border-color: #FFA726 !important;
}

/* 8. 辅助动画-按钮轻快晃动 */
@keyframes btn-wiggle {0%{transform:rotate(0)}25%{transform:rotate(2deg)}75%{transform:rotate(-2deg)}100%{transform:rotate(0)}}
.tile-btn:active {
  animation:btn-wiggle .26s linear;
}

/* ====美化增强END==== */

/* ====深度美化 BEGIN==== */

/* 头部动态光斑与氛围粒子 */
.header-bg-decor {
  pointer-events: none;
  position: absolute;
  top: 30px;
  left: 50%;
  width: 540px;
  height: 280px;
  max-width: 99vw;
  transform: translateX(-50%);
  z-index: 0;
  overflow: visible;
  /* 多圈柔光 */
  background:
    radial-gradient(circle at 70% 10%, #FFD09B66 0, #FFF9EA44 48%, #FFF9EA01 80%),
    radial-gradient(ellipse at 60% 65%, #66E0FF33 0, #FFEE7766 70%, #fff9ea00 100%),
    radial-gradient(circle at 28% 44%, #FFABF833 0, #fff9ea05 80%);
  border-radius: 48%;
  /* filter: blur(2px) brightness(1.06); */
}
@media(max-width: 700px) {
  .header-bg-decor { width: 98vw; height:120px; top:12px;}
}
/* 动感光带层 */
.header-bg-decor::after {
  content: "";
  position: absolute;
  left:50%;top:54%;
  width: 94%;
  height: 48px;
  transform:translate(-50%,-50%) rotate(-8deg);
  background:
    linear-gradient(105deg, #FFD09B 10%, #F4B46800 60%),
    linear-gradient(255deg, #6FE8CB 10%, #fff9ea00 80%);
  opacity: 0.16;
  border-radius: 27px 80px 99px 42px;
  filter: blur(6px);
  animation: decor-flare-move 7s ease-in-out infinite alternate;
}
@keyframes decor-flare-move {
  50% { transform:translate(-50%,-51%) rotate(9deg) scaleX(1.17);}
}
.header-bg-decor::before {
  content: "";
  position: absolute;
  left:22%;top:36%;
  width: 19px; height:19px;
  border-radius: 50%;
  background: radial-gradient(circle,#FFD09B 70%,#66E0FF 100%);
  opacity:0.28;
  filter:blur(2.5px);
  animation: decor-dot-move 6s ease-in-out infinite alternate;
}
@keyframes decor-dot-move {
  0% {left:22%;top:36%;}
  60% {left:26%;top:49%;}
  100% {left:15%;top:42%;}
}

/* 主体背景·大光斑和柔彩渐变（全局） */
body:before {
  content:"";
  display:block;
  pointer-events:none;
  position:fixed;
  z-index:-1;
  top:-18vh; left:-24vw;
  width:157vw;height:90vh;
  opacity:0.12;
  background:
    radial-gradient(circle at 45% 35%, #FFD09B 0, #FFF9EA 72%, #fff9ea00 95%),
    radial-gradient(circle at 83% 18%, #6FE8CB 0, #FFF9EA00 47%);
  /* filter: blur(18px) brightness(1.03); */
}

/* 大屏卡片高光&内发光&3D浮动 */
.card {
  box-shadow: 0 12px 56px 0 #FFD09B22, 0 0 0 2.2px #fff9ea85 inset;
  border: 2.6px solid #FFD09B;
  position: relative;
  overflow: hidden;
  transition: border 0.16s, box-shadow 0.23s, transform 0.24s cubic-bezier(.22,.65,.65,.97);
  will-change: transform,box-shadow;
}
.card::after {
  content:"";
  pointer-events:none;
  position:absolute; bottom:10px; right:15px;
  width:48px; height:13px;
  background:linear-gradient(90deg,#FFD09B44 12%,#66E0FF18 85%,transparent);
  filter:blur(6px);
  opacity:0.45;
  border-radius:11px;
  transform:rotate(12deg);
}
.card:hover {
  box-shadow:0 24px 72px #FFD09B33,0 0 0 5px #6FE8CB33;
  border-color: #6FE8CB;
  transform: translateY(-2px) scale(1.015) rotate(-0.3deg);
}

/* 按钮炫彩高光&霓虹边（3D） */
.tile-btn {
  box-shadow: 0 2px 22px 0 #FFD09B18, 0 0 0 4px #FFD09B11;
  border: 3.2px solid #FFD09B;
  position: relative;
  overflow: hidden;
}
.tile-btn::after {
  content: "";
  position: absolute; left:0; bottom:0;
  width:100%; height:17px;
  background:linear-gradient(90deg,#FFD09B22 4%,#66E0FF11 80%);
  filter: blur(7px);
  opacity:0.36;
}

/* 粒子点阵角标 */
.header-bg-decor::before,
.header-bg-decor::after {
  background-repeat:no-repeat;
  pointer-events:none;
}

/* 粒子动画星点（建议可加JS美化/此处仅静态演示） */
.header-bg-decor::after {
  box-shadow:
    290px 90px 0 3px #66E0FF18,
    70px 120px 0 3px #FFD09B18,
    210px 46px 0 2.2px #FFD09B35,
    270px 200px 0 2.5px #A4EEFF28;
}

/* 主标题底线流光槽 */
.main-title {
  position: relative;
}
.main-title::after {
  content: "";
  display: block;
  position: absolute;
  left: 12%; bottom: -8px;
  width: 76%;
  height: 6px;
  border-radius: 8px;
  background: linear-gradient(90deg, #66E0FF 5%, #FFD09B 95%);
  box-shadow: 0 2px 7px #FFD09B55;
  opacity: 0.48;
  filter: blur(0.8px);
  animation: title-groove-move 3.5s cubic-bezier(.57,0,.35,1.0) infinite alternate;
}
@keyframes title-groove-move {
  0% {left:12%;}
  50% {left:3%;}
  100% {left:15%;}
}

/* footer顶端波浪SVG装饰（直接用伪元素） */
footer::before {
  content: "";
  display: block;
  width: 101%;
  min-width: 400px;
  height: 24px;
  position: absolute;
  top: -18px; left: -2px;
  background: url("data:image/svg+xml;utf8,<svg width='400' height='24' viewBox='0 0 400 24' fill='none' xmlns='http://www.w3.org/2000/svg'><path d='M0 19 Q80 7 200 19T400 19V24H0V19Z' fill='%23FFD09B55'/></svg>");
  background-size: cover;
  background-repeat: no-repeat;
  opacity: 0.55;
  pointer-events: none;
  z-index: 1;
}

/* ====深度美化 END==== */

/* ====超级深度美化 超大屏氛围/炫酷动效/数据流线/交互增强 BEGIN ==== */

/* 1. 全局动态炫光背景动画（漂移渐变波） */
body::after {
  content: "";
  pointer-events: none;
  position: fixed;
  z-index: -2;
  left: -16vw; top: -12vh;
  width: 145vw; height: 112vh;
  opacity: 0.12;
  border-radius: 33% 41% 40% 36% / 31% 40% 35% 46%;
  background: repeating-linear-gradient(115deg, #66E0FF33 0, #FFD09B14 280px, #FFF9EA00 320px),
              radial-gradient(circle at 60% 22%, #FFCAEE88 0,#fff0 60%),
              radial-gradient(ellipse 40% 60% at 74% 48%, #66E0FF44 0,#FFF9EA00 100%);
  /* filter: blur(30px) brightness(1.04); */
  /* animation: global-bg-blobs 13s cubic-bezier(.66,-0.08,.32,1.08) infinite alternate; */
}
@keyframes global-bg-blobs {
  0% { left:-13vw; top:-13vh; border-radius:33% 49% 52% 34% / 33% 49% 39% 47%; }
  55% { left:-7vw; top:-16vh; border-radius:44% 39% 51% 24% / 34% 59% 50% 36%; }
  100% { left:-16vw; top:-8vh; border-radius:31% 41% 40% 46% / 21% 60% 45% 56%; }
}

/* 2. 头部插画动态彩虹投影与旋转彩光 */
.header-illustration {
  position: relative;
  z-index: 3;
}
.header-illustration::after {
  content: "";
  position: absolute; left: 50%; top: 55%;
  width: 185px; height:185px;
  transform:translate(-50%,-60%);
  border-radius: 50%;
  pointer-events: none;
  background: conic-gradient(from 0deg at 50% 50%, #FFD09Bdd 0deg,#66E0FFcc 120deg,#FFABF8aa 230deg,#FFD09Bdd 360deg);
  opacity:0.19;
  filter: blur(7.5px);
  z-index: 0;
  animation: rainbow-rotate 17s linear infinite;
}
@keyframes rainbow-rotate {
  100% { transform:translate(-50%,-60%) rotate(360deg);}
}

/* 3. 主头部浮动色块流线装饰 */
.header-bg-decor {
  background:
    radial-gradient(circle at 80% 18%, #FFCAEE44 0, #FFF9EA20 60%, #fff9ea01 85%),
    radial-gradient(ellipse at 34% 86%, #66E0FF45 0, #FFF9EA00 90%),
    radial-gradient(circle at 64% 60%, #FFD09B33 0, #fff9ea10 75%);
  animation: decor-floating 9s cubic-bezier(.62,0,.42,1) infinite alternate;
}
@keyframes decor-floating {
  0% { background-position: 60% 80%, 34% 24%, 72% 50%;}
  50% { background-position: 40% 85%, 20% 20%, 85% 64%;}
  100% { background-position: 64% 60%, 38% 92%, 60% 80%;}
}

/* 4. 卡片高阶玻璃&数据流动底纹 */
.card {
  backdrop-filter: blur(5.5px) saturate(1.12) brightness(1.03);
  border: 2.8px solid #FFD09Bcc;
  background: linear-gradient(125deg, #FFFDF6cc 78%, #FFD09B30 100%);
  overflow: visible;
}
.card::before {
  /* 底部几何分隔光线 */
  content: "";
  position: absolute;
  left: 8px; top: calc(100% - 17px);
  width: 88%;
  height: 9px;
  border-radius:8px;
  background: linear-gradient(115deg,#FFD09B77,#66E0FF00 70%);
  filter: blur(3.5px);
  opacity: 0.34;
  z-index: 0;
}
.card:hover {
  box-shadow: 0 38px 90px #FFCAEE36, 0 0 0 8px #66E0FF55;
  background: linear-gradient(108deg, #FFFDF6ff 78%, #FFABF860 100%);
  /* transform:scale(1.025) translateY(-6px) rotate(-2deg); // 禁止倾斜effect */
  transform: none;
}

/* 5. 按钮多层霓虹&粒子爆裂反馈 */
.tile-btn {
  box-shadow: 0 3px 33px 0 #FFD09B33, 0 0 0 10px #FFD09B0c;
  border: 3.6px solid #FFD09B;
  background:linear-gradient(100deg,#FFFDF6 65%,#66E0FF18 100%);
  will-change: box-shadow, background, border, transform;
  position: relative;
  overflow: visible;
}
.tile-btn:focus-visible {
  outline: 3px solid #FFCAEE !important;
  outline-offset: 2px;
}
.tile-btn::before {
  content:"";
  position:absolute; left:55%; top:35%;
  width:7px; height:7px;
  border-radius:50%;
  background:radial-gradient(circle, #66E0FF88 0, #fff0 70%);
  opacity:.7;
  filter:blur(1.5px);
  animation: btn-dot-jump 1.4s infinite cubic-bezier(.4,0,.6,1.2);
}
@keyframes btn-dot-jump { 0%,100%{top:31%;left:53%; opacity:0.7;} 60%{top:38%;left:48%;opacity:1;} }
.tile-btn:active::after {
  content: "";
  position: absolute; left:50%; top:50%;
  width: 76px; height:76px;
  pointer-events: none;
  border-radius: 50%;
  background: radial-gradient(circle,#66E0FF55 10%,#FFD09B11 80%,#fff0 100%);
  margin:-38px 0 0 -38px;
  z-index: 3;
  animation: btn-burst .65s;
}
@keyframes btn-burst {
  0% { opacity:0.55; transform:scale(0.6);}
  70% { opacity:1; transform:scale(1.10);}
  100% { opacity:0; transform:scale(2.3);}
}

/* 6. 表单输入区浮雕高光与放大响应 */
.form-control, .form-select {
  background: linear-gradient(96deg,#FFF9EA 78%,#66E0FF0c 100%) !important;
  box-shadow: 0 1px 8.5px #FFD09B3f inset,0 0 0 2px #FFD09B22;
  font-size: 1.12em !important;
  letter-spacing: 1.2px;
  font-weight: 500;
  transition: box-shadow 0.26s, border 0.20s, transform 0.16s;
  will-change: box-shadow, border, transform;
}
.form-control:focus, .form-select:focus {
  box-shadow: 0 0 0 9px #66E0FF38, 0 1px 8px #FFD09B66 inset;
  border-color: #66E0FF !important;
  transform: scale(1.03);
  background: #FFFDF6 !important;
}
.form-label {
  font-size: 1.11em;
  color: #F4B468;
  text-shadow: 0 1px 3px #FFD09B44;
  letter-spacing: 1.2px;
  margin-bottom: 1.5px;
}

/* 7. 数据卡片上浮动画、主要分区高斯玻璃拟态 */
.row, .tile-btn-group {
  position:relative;
  z-index:1;
}
.row { animation: row-upflow 0.96s cubic-bezier(.47,.88,.32,1.1);}
@keyframes row-upflow {
  0%{opacity:.65;transform:translateY(55px) scale(.95);}
  100%{opacity:1;transform:translateY(0) scale(1);}
}

/* 8. 主要区块曲线区隔、颜色流动波带 */
.main-header {
  box-shadow: 0 14px 72px 0 #FFCAEE1a, 0 0 0 96px #FFD09B09 inset;
  border-bottom: 0 solid transparent;
}
.main-header::before {
  /* 上部动感流带（SVG背景） */
  content: "";
  position: absolute; top:-13px; left:0; width:100%; height:31px;
  background: url("data:image/svg+xml;utf8,<svg width='631' height='40' viewBox='0 0 631 40' fill='none' xmlns='http://www.w3.org/2000/svg'><path d='M0 35 Q106 8 316 17T631 36L631 40H0V35Z' fill='%2366E0FF22'/></svg>");
  background-size:cover;
  background-repeat:no-repeat;
  z-index:1;
  opacity:.59;
  pointer-events: none;
  filter: blur(.5px);
}
footer {
  box-shadow: 0 4px 38px #FFCAEE29,
    0 -20px 150px 0 #FFD09B29 inset;
  position: relative;
  overflow: visible;
}

/* 9. 可访问性优化 */
@media (max-width: 850px) {
  .main-title {font-size:2rem;}
  .header-illustration {max-width:120px;}
}
@media (max-width: 650px) {
  .main-title {font-size:1.22rem;}
  .header-illustration {max-width:74px;}
  .header-bg-decor {height:56px;}
}

/* ====超级深度美化 END ==== */

/* 响应式微调 */
@media (max-width: 900px) {
  .tile-btn-group { flex-direction: column; gap: 18px; }
}
@media (max-width: 600px) {
  .main-header { padding-top: 16px; }
  .main-title { font-size: 1.5rem; }
  .tile-btn { font-size: 1rem; min-width: 100px; padding: 10px 16px; }
  .header-illustration { max-width: 100px; margin-bottom: 6px; }
}


/* 监控项卡片最大宽度（选配，可微调美观） */
.card {
  max-width: 99vw;
}

/* 紧贴排布每行三列，去除所有gutter与col padding，不影响卡片样式 */
.row.row-cols-md-3 {
  margin-left: 0 !important;
  margin-right: 0 !important;
  --bs-gutter-x: 0 !important;
  --bs-gutter-y: 0 !important;
}
.row.row-cols-md-3 > .col,
.row.row-cols-md-3 > [class^="col-"] {
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* 如需更紧凑，可尝试下行（建议初步调试时启用） */
/* .col, .col-auto, [class^="col-"] {
  margin: 0 !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
} */

/* 隐藏监控项区域空白col，保证每行三列无多余空格 */
.row.row-cols-md-3 > .col:empty,
.row.row-cols-md-3 > [class^="col-"]:empty {
  display: none !important;
  width: 0 !important;
  min-width: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* 若 col 只包裹空内容或无卡片，也排除 */
.row.row-cols-md-3 > .col:not(:has(.card)),
.row.row-cols-md-3 > [class^="col-"]:not(:has(.card)) {
  display: none !important;
  width: 0 !important;
  min-width: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* 监控项专用网格：三列紧贴，无自动空白，兼容卡片美化 */
.monitor-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0 !important; /* 强制无间隙 */
  margin-top: 20px;
  margin-bottom: 20px;
}
.monitor-grid > .col {
  margin: 0 !important;
  padding: 0 !important;
  min-width: 0;
  width: 100% !important;
  box-sizing: border-box;
}
/* 彻底消除父容器边距，保证网格满屏 */
.monitor-grid {
  margin-left: 0 !important;
  margin-right: 0 !important;
  width: 100% !important;
  box-sizing: border-box;
}
/* 卡片强制无最大宽度，在网格中铺满 */
.monitor-grid .card {
  max-width: 100% !important;
  width: 100% !important;
  margin: 0 auto !important;
  box-sizing: border-box;
}
.monitor-grid .chart-container {
  width: 100% !important;
}

/* 外层父容器如有.container清除padding与最大宽度 */
.container {
  padding-left: 0 !important;
  padding-right: 0 !important;
  max-width: 100vw !important;
}
@media (max-width: 900px) {
  .monitor-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
  }
}
@media (max-width: 600px) {
  .monitor-grid {
    grid-template-columns: 1fr;
    gap: 10px;
  }
}

/* ====三列紧贴全局归零调整==== */
html, body, .container, .monitor-grid {
  margin: 0 !important;
  padding: 0 !important;
  width: 100vw !important;
  max-width: 100vw !important;
  box-sizing: border-box !important;
}
*, *:before, *:after {
  box-sizing: border-box !important;
}