ai {
  /* 颜色变量（保留，其他地方会用到） */
  --fg: #2a3142;
  --accent: #d4a574;
  --danger: #8b3a3a;
  --mystic: #6b4c7a;
  --border: #d0d5dd;
  --shadow: rgba(0,0,0,0.15);
  
  display: block;
  color: var(--fg);
  font-size: 16px;
  line-height: 1.6;
  max-width: 100%;
  overflow: visible;
}

/* ==================== 头部区域 ==================== */
ai hd {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 1rem;
  padding-bottom: 0.8rem;
  border-bottom: 1px solid var(--border);
}

ai hd d {
  flex: 1 1 100%; 
  padding: 0.4rem 0.6rem 0.4rem 2rem;
  border-radius: 4px;
  font-size: 13px;
  position: relative;
  background-size: 1.2rem;
  background-repeat: no-repeat;
  background-position: 0.5rem center;
}

ai hd d[tp="time"] {
  background-color: rgba(254,243,230,0.5);
  border: 1px solid rgba(212,165,116,0.3);
  background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%23d4a574" stroke-width="2"><circle cx="12" cy="12" r="10"/><path d="M12 6v6l4 2"/></svg>');
  font-variant-numeric: tabular-nums;
}

ai hd d[tp="loc"] {
  background-color: rgba(243,240,245,0.5);
  border: 1px solid rgba(107,76,122,0.3);
  background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%236b4c7a" stroke-width="2"><circle cx="12" cy="12" r="10"/><path d="M12 2v20M2 12h20"/><path d="M12 2l3 3-3 3-3-3z"/></svg>');
}

ai hd d[tp="mode"] {
  background-color: rgba(245,232,232,0.5);
  border: 1px solid rgba(139,58,58,0.3);
  background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%238b3a3a" stroke-width="2"><circle cx="12" cy="12" r="3"/><path d="M12 1v6m0 6v6M1 12h6m6 0h6"/><circle cx="12" cy="12" r="9" stroke-dasharray="2 2"/></svg>');
}

ai hd d[tp="mode"]:has(*:contains("日常")) {
  background-color: #e8f5e8;
  border-color: rgba(76,122,76,0.3);
}

ai hd d[tp="mode"]:has(*:contains("剧情")) {
  background-color: #e8f0f5;
  border-color: rgba(76,107,122,0.3);
}

/* ==================== 正文区域 ==================== */
ai article {
  margin: 1rem 0;
  line-height: 1.8;
}

ai article p {
  margin: 0.6rem 0;
}

/* ==================== 折叠区域 ==================== */
ai details {
  margin: 0.8rem 0;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: rgba(212,165,116,0.03);
}

ai details summary {
  padding: 0.6rem 0.8rem;
  cursor: pointer;
  font-weight: 600;
  color: #000000;
  user-select: none;
  background: linear-gradient(90deg, rgba(212,165,116,0.15), transparent);
  border-radius: 6px 6px 0 0;
  transition: background 0.2s;
}

ai details summary:hover {
  background: linear-gradient(90deg, rgba(212,165,116,0.25), transparent);
}

ai details[open] summary {
  border-bottom: 1px solid var(--border);
  margin-bottom: 0.6rem;
}

ai details[open] {
  background: #F0ECE3;
}

/* ==================== 状态栏分区 ==================== */
ai sec {
  display: block;
  margin: 0.6rem 0.8rem;
}

ai sec[t]::before {
  content: attr(t);
  display: block;
  font-size: 12px;
  color: #4a5568;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 0.4rem;
  opacity: 0.8;
}

/* ==================== 文本元素 ==================== */
ai f {
  display: inline-block;
  font-size: 16px;
  font-weight: 700;
  color: var(--accent);
  margin-bottom: 0.4rem;
}

ai d {
  display: block;
  margin: 0.3rem 0;
  padding-left: 0.8rem;
  border-left: 2px solid var(--border);
  font-size: 13px;
}

/* ==================== 序列等级样式（lv属性） ==================== */
ai d[lv] {
  border-left-color: var(--accent);
  position: relative;
  padding-left: 2rem;
}

ai d[lv]::before {
  content: "◆";
  position: absolute;
  left: 0.5rem;
  font-size: 14px;
  animation: glow 2s ease-in-out infinite;
}

ai d[lv="9"] { border-left-color: #6b8e6b; }
ai d[lv="9"]::before { color: #6b8e6b; text-shadow: 0 0 4px #6b8e6b; }

ai d[lv="8"] { border-left-color: #8b7355; }
ai d[lv="8"]::before { color: #8b7355; text-shadow: 0 0 4px #8b7355; }

ai d[lv="7"] { border-left-color: #9ca3af; }
ai d[lv="7"]::before { color: #9ca3af; text-shadow: 0 0 6px #9ca3af; }

ai d[lv="6"] { border-left-color: #d4a574; }
ai d[lv="6"]::before { color: #d4a574; text-shadow: 0 0 6px #d4a574; }

ai d[lv="5"] { border-left-color: #b8860b; }
ai d[lv="5"]::before { color: #b8860b; text-shadow: 0 0 8px #b8860b; }

ai d[lv="4"] { border-left-color: #8b5fbf; }
ai d[lv="4"]::before { color: #8b5fbf; text-shadow: 0 0 8px #8b5fbf; }

ai d[lv="3"] { border-left-color: #6b4c7a; }
ai d[lv="3"]::before { color: #6b4c7a; text-shadow: 0 0 10px #6b4c7a; }

ai d[lv="2"] { border-left-color: #c52a2a; }
ai d[lv="2"]::before { color: #c52a2a; text-shadow: 0 0 10px #c52a2a; }

ai d[lv="1"] { border-left-color: #ff3333; }
ai d[lv="1"]::before { color: #ff3333; text-shadow: 0 0 12px #ff3333; }

ai d[lv="0"] {
  border-left-color: #f0e68c;
  background: linear-gradient(90deg, rgba(240,230,140,0.1), transparent);
}
ai d[lv="0"]::before {
  color: #f0e68c;
  text-shadow: 0 0 15px #f0e68c, 0 0 25px rgba(240,230,140,0.5);
  animation: divine-glow 1.5s ease-in-out infinite;
}

/* ==================== 状态样式 ==================== */
ai d[st="状态"] { border-left-color: var(--danger); }

/* ==================== 欲望等级样式（s属性） ==================== */
ai d[s] { border-left-width: 3px; }
ai d[s="0"] { border-left-color: #555; }
ai d[s="1"] { border-left-color: #7a5c5c; }
ai d[s="2"] { border-left-color: #8b3a3a; }
ai d[s="3"] { border-left-color: #a83232; }
ai d[s="4"] { border-left-color: #c52a2a; animation: pulse 1.5s ease-in-out infinite; }
ai d[s="5"] { border-left-color: #ff0000; animation: pulse 1s ease-in-out infinite; box-shadow: 0 0 10px rgba(255,0,0,0.3); }

/* ==================== 悬浮框系统 ==================== */
ai item {
  display: inline-block;
  position: relative;
  margin: 0 0.3rem 0.3rem 0;
  cursor: pointer;
}

ai item n {
  display: inline-block;
  padding: 0.2rem 0.5rem;
  border-radius: 4px;
  font-size: 13px;
  font-weight: 600;
  transition: all 0.2s;
  border: 1px solid;
}

ai item info {
  position: absolute;
  top: 100%;
  left: 0;
  margin-top: 0.3rem;
  padding: 0.6rem 0.8rem;
  background: rgba(255,255,255,0.98);
  border-radius: 6px;
  font-size: 12px;
  line-height: 1.5;
  white-space: normal;
  min-width: 200px;
  max-width: 300px;
  z-index: 1000;
  opacity: 0;
  pointer-events: none;
  transform: translateY(-5px);
  transition: all 0.2s;
  box-shadow: 0 4px 12px var(--shadow);
  border: 1px solid;
  color: #2a3142;
}

ai item:hover info,
ai item:focus-within info {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
  pointer-events: auto;
}

/* ==================== 悬浮框类型：封印物 ==================== */
ai item[tp="seal"] n {
  background: rgba(139,58,58,0.2);
  border-color: #8b3a3a;
  color: #8b3a3a;
}

ai item[tp="seal"] info {
  border-color: #8b3a3a;
  background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" opacity="0.1"><path d="M20 30h60M20 50h60M20 70h60" stroke="%238b3a3a" stroke-width="3"/><circle cx="50" cy="50" r="30" fill="none" stroke="%238b3a3a" stroke-width="2"/></svg>');
  background-size: 80px;
  background-position: right bottom;
  background-repeat: no-repeat;
}

/* ==================== 悬浮框类型：超凡物品 ==================== */
ai item[tp="extra"] n {
  background: rgba(107,76,122,0.2);
  border-color: #6b4c7a;
  color: #6b4c7a;
}

ai item[tp="extra"] info {
  border-color: #6b4c7a;
  background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" opacity="0.1"><path d="M50 10l5 35 35 5-35 5-5 35-5-35-35-5 35-5z" fill="%236b4c7a"/></svg>');
  background-size: 60px;
  background-position: right bottom;
  background-repeat: no-repeat;
}

/* ==================== 悬浮框类型：非凡之物 ==================== */
ai item[tp="mystic"] n {
  background: rgba(212,165,116,0.2);
  border-color: #d4a574;
  color: #b8860b;
}

ai item[tp="mystic"] info {
  border-color: #d4a574;
  background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" opacity="0.1"><circle cx="50" cy="50" r="30" fill="none" stroke="%23d4a574" stroke-width="2"/><circle cx="50" cy="50" r="20" fill="none" stroke="%23d4a574" stroke-width="2"/><path d="M50 20v60M20 50h60" stroke="%23d4a574" stroke-width="2"/></svg>');
  background-size: 70px;
  background-position: right bottom;
  background-repeat: no-repeat;
}

/* ==================== 悬浮框类型：序列技能 ==================== */
ai item[tp="skill"] n {
  background: rgba(76,107,122,0.2);
  border-color: #4c6b7a;
  color: #4c6b7a;
}

ai item[tp="skill"] info {
  border-color: #4c6b7a;
  background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" opacity="0.1"><path d="M50 10l10 30h30l-25 20 10 30-25-20-25 20 10-30-25-20h30z" fill="none" stroke="%234c6b7a" stroke-width="2"/></svg>');
  background-size: 65px;
  background-position: right bottom;
  background-repeat: no-repeat;
}

/* ==================== 悬浮框类型：其他技能 ==================== */
ai item[tp="other"] n {
  background: rgba(76,122,76,0.2);
  border-color: #4c7a4c;
  color: #4c7a4c;
}

ai item[tp="other"] info {
  border-color: #4c7a4c;
  background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" opacity="0.1"><path d="M50 20c-10 0-15 10-15 20s5 20 15 20 15-10 15-20-5-20-15-20zM35 60c-5 5-5 15 0 20h30c5-5 5-15 0-20z" fill="%234c7a4c"/></svg>');
  background-size: 60px;
  background-position: right bottom;
  background-repeat: no-repeat;
}

/* ==================== 悬浮框类型：恩赐 ==================== */
ai item[tp="gift"] n {
  background: linear-gradient(135deg, rgba(255,215,0,0.2), rgba(255,165,0,0.2));
  border-color: #ffd700;
  color: #b8860b;
  text-shadow: none;
}

ai item[tp="gift"] info {
  border-color: #ffd700;
  background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" opacity="0.15"><path d="M50 10l5 15 15 5-15 5-5 15-5-15-15-5 15-5z" fill="%23ffd700"/><path d="M30 40l3 8 8 3-8 3-3 8-3-8-8-3 8-3z" fill="%23ffd700"/><path d="M70 60l3 8 8 3-8 3-3 8-3-8-8-3 8-3z" fill="%23ffd700"/></svg>');
  background-size: 80px;
  background-position: center;
  background-repeat: no-repeat;
}

ai item:hover n {
  transform: translateY(-2px);
  box-shadow: 0 2px 8px var(--shadow);
}

/* ==================== 表格样式 ==================== */
ai tb {
  display: table;
  width: 100%;
  border-collapse: collapse;
  margin: 0.5rem 0;
  font-size: 12px;
}

ai tb tr {
  display: table-row;
  border-bottom: 1px solid var(--border);
  transition: background 0.2s;
}

ai tb tr:hover {
  background: rgba(212,165,116,0.08);
}

ai tb th,
ai tb td {
  display: table-cell;
  padding: 0.5rem 0.6rem;
  text-align: left;
  vertical-align: top;
}

ai tb th {
  background: rgba(212,165,116,0.15);
  color: var(--accent);
  font-weight: 600;
  border-bottom: 2px solid var(--accent);
}

ai tb td:first-child {
  color: var(--accent);
  font-weight: 600;
  width: 3rem;
}

/* ==================== 动画定义 ==================== */
@keyframes glow {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.5; text-shadow: 0 0 8px currentColor; }
}

@keyframes divine-glow {
  0%, 100% { 
    opacity: 1; 
    text-shadow: 0 0 15px #f0e68c, 0 0 25px rgba(240,230,140,0.5); 
  }
  50% { 
    opacity: 0.8; 
    text-shadow: 0 0 20px #f0e68c, 0 0 35px rgba(240,230,140,0.7); 
  }
}

@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.7; box-shadow: 0 0 15px currentColor; }
}

@media (max-width: 600px) {
  ai {
    font-size: 13px;
  }
  
  ai hd d {
    flex: 1 1 100%;
    font-size: 12px;
  }
  
 
  
  /* 移动端：悬浮框展开状态 */
  ai item:focus-within info {
    transform: translate(-50%, -50%) scale(1);
  }
  
  /* 移动端：添加半透明遮罩（但允许点击穿透） */
  ai item:focus-within::after {
    content: '';
    position: fixed;
    left: 0;
    top: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(0, 0, 0, 0.5);
    z-index: 9998;
    pointer-events: none;  /* 允许点击穿透，点击遮罩=点击下方元素 */
    animation: fadeIn 0.2s;
  }
  
  ai tb {
    font-size: 11px;
  }
  
  ai tb th:nth-child(2),
  ai tb td:nth-child(2) {
    display: none;
  }
}

/* 遮罩淡入动画 */
@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}




/* ==================== 聊天气泡框样式 ==================== */
/*
   B平台AI回复气泡的内容区域：
   .is-assistant > .is-user\:dark (即 group-[.is-assistant]:bg-card 等样式生效的那个div)
   
   B平台用户输入气泡的内容区域：
   .is-user > .is-user\:dark (即 group-[.is-user]:bg-secondary 等样式生效的那个div)
*/

/* AI回复气泡 - 主要背景和装饰 */
.group.flex.max-w-\[100\%\].flex-col.gap-2.is-assistant > div:first-child {
    background-color: #E3DECC !important;
    background-image: none !important;
    border-radius: 12px !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1) !important;
    padding-bottom: 60px !important;
    isolation: isolate !important;
    overflow: visible !important;
    position: relative !important;
    border: none !important;
}

/* AI回复气泡 - 左下角装饰图 */
.group.flex.max-w-\[100\%\].flex-col.gap-2.is-assistant > div:first-child::before {
    content: "" !important;
    position: absolute !important;
    z-index: 0 !important;
    bottom: 0 !important;
    left: 0 !important;
    width: 350px !important;
    height: 350px !important;
    opacity: 0.5 !important;
    background-image: url("https://pic1.imgdb.cn/item/69ff9afc5a52df004a076571.png") !important;
    background-size: contain !important;
    background-repeat: no-repeat !important;
    background-position: left bottom !important;
    pointer-events: none !important;
}

/* AI回复气泡 - 右下角装饰图 */
.group.flex.max-w-\[100\%\].flex-col.gap-2.is-assistant > div:first-child::after {
    content: "" !important;
    position: absolute !important;
    z-index: 0 !important;
    bottom: 0 !important;
    right: 0 !important;
    width: 220px !important;
    height: 220px !important;
    opacity: 0.5 !important;
    background-image: url("https://pic1.imgdb.cn/item/69ff9afa5a52df004a07656f.png") !important;
    background-size: contain !important;
    background-repeat: no-repeat !important;
    background-position: right bottom !important;
    pointer-events: none !important;
}

/* 用户输入气泡也同样美化 */
.group.flex.max-w-\[100\%\].flex-col.gap-2.is-user > div:first-child {
    background-color: #E3DECC !important;
    border-radius: 12px !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1) !important;
    border: none !important;
}

/* 加载中时隐藏气泡装饰图 */
.group.flex.max-w-\[100\%\].flex-col.gap-2.is-assistant > div:first-child:has(.flex.gap-2.w-full.h-full.items-center.justify-center)::before,
.group.flex.max-w-\[100\%\].flex-col.gap-2.is-assistant > div:first-child:has(.flex.gap-2.w-full.h-full.items-center.justify-center)::after {
    background-image: none !important;
    opacity: 0 !important;
}

/* 移动端气泡装饰适配 */
@media (max-width: 768px) {
    .group.flex.max-w-\[100\%\].flex-col.gap-2.is-assistant > div:first-child::before {
        width: 200px !important;
        height: 200px !important;
    }
    .group.flex.max-w-\[100\%\].flex-col.gap-2.is-assistant > div:first-child::after {
        width: 130px !important;
        height: 130px !important;
    }
}


/* ==================== Markdown渲染区域字体 ==================== */
.rili-markdown-renderer {
    color: #000000 !important;
    font-family: "SimHei", "黑体", "Microsoft YaHei", "微软雅黑", "Noto Sans SC", "PingFang SC", "Hiragino Sans GB", system-ui, -apple-system, sans-serif !important;
    font-weight: 600 !important;
    background: transparent !important;
    position: relative !important;
    z-index: 1 !important;
}


/* ==================== 底部操作按钮 - 黑色 ==================== */
/* B平台按钮容器: .bg-muted.rounded.flex.p-0\.5 内的 button */
.bg-muted.rounded.flex.p-0\.5 button {
    color: #000000 !important;
    font-family: "SimHei", "Microsoft YaHei", "黑体", sans-serif !important;
    font-weight: 600 !important;
}

/* 按钮内的SVG图标也改为黑色 */
.bg-muted.rounded.flex.p-0\.5 button svg {
    stroke: #000000 !important;
    color: #000000 !important;
}

/* sr-only文字保持隐藏（不影响） */


/* ==================== 顶部栏 - 黑金风格 ==================== */
/* 
   注意：B平台的顶部栏HTML结构可能与A平台不同。
   以下选择器基于B平台常见的header/nav结构进行推测。
   如果B平台有明确的顶部栏类名，需进一步调整。
*/

/* 尝试匹配B平台可能的顶部固定栏 */
header,
nav,
.sticky.top-0,
[class*="sticky"][class*="top-0"] {
    background: linear-gradient(135deg, #1a1a1a 0%, #000000 100%) !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5) !important;
    position: relative !important;
}

/* 顶部栏内所有文字 - 金色 */
header *,
nav *,
.sticky.top-0 *,
[class*="sticky"][class*="top-0"] * {
    color: #d4af37 !important;
}

/* 顶部栏SVG图标 - 金色 */
header svg,
nav svg,
.sticky.top-0 svg,
[class*="sticky"][class*="top-0"] svg {
    color: #d4af37 !important;
    stroke: #d4af37 !important;
    transition: all 0.3s ease !important;
}

header svg:hover,
nav svg:hover,
.sticky.top-0 svg:hover,
[class*="sticky"][class*="top-0"] svg:hover {
    color: #ffd700 !important;
    stroke: #ffd700 !important;
    filter: drop-shadow(0 0 8px rgba(212, 175, 55, 0.6)) !important;
}

/* 闪烁文字 - 顶部栏右侧 */
header::after,
nav::after,
.sticky.top-0::after,
[class*="sticky"][class*="top-0"]::after {
    content: "每一段旅行都有终点。" !important;
    position: absolute !important;
    right: 15% !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    font-family: 'Brush Script MT', 'Lucida Handwriting', 'Apple Chancery', cursive !important;
    font-size: 14px !important;
    color: #d4af37 !important;
    animation: shimmer 5s ease-in-out infinite !important;
    text-shadow: 0 0 10px rgba(212, 175, 55, 0.5) !important;
    pointer-events: none !important;
    white-space: nowrap !important;
}

@keyframes shimmer {
    0%, 100% {
        opacity: 1;
        text-shadow: 0 0 10px rgba(212, 175, 55, 0.8);
    }
    50% {
        opacity: 0.4;
        text-shadow: 0 0 5px rgba(212, 175, 55, 0.3);
    }
}

/* 顶部栏按钮悬停 */
header button:hover,
nav button:hover,
.sticky.top-0 button:hover,
[class*="sticky"][class*="top-0"] button:hover {
    background: rgba(212, 175, 55, 0.1) !important;
    border-radius: 8px !important;
}



/* 主输入框 */
textarea {
    background: rgba(255, 255, 255, 0.1) !important;
    border: 1px solid rgba(0, 0, 0, 0.1) !important;
    backdrop-filter: blur(10px) !important;
    transition: all 0.3s ease !important;
}

textarea:focus {
    background: rgba(255, 255, 255, 0.15) !important;
    border-color: rgba(0, 0, 0, 0.2) !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05) !important;
}

textarea::placeholder {
    color: rgba(0, 0, 0, 0.4) !important;
}

textarea::selection {
    background: rgba(100, 150, 255, 0.3) !important;
}

.flex.flex-col.items-center.gap-2\.5,
.flex.flex-col.items-center.gap-2\.5 * {
  cursor: url('https://pic1.imgdb.cn/item/6a134739fe89374d20943d1c.png'), auto; 
}


/* ==================== 选项列表 (li) ==================== */
ai li {
  display: block;
  margin: 0.35rem 0;
  padding: 0.55rem 0.8rem 0.55rem 1rem;
  font-size: 13px;
  line-height: 1.5;
  color: var(--fg);
  cursor: pointer;
  position: relative;
  transition: all 0.25s ease;
}

ai li::before {
  content: "▸";
  position: absolute;
  right: 0.6rem;
  top: 50%;
  transform: translateY(-50%);
  color: var(--accent);
  font-size: 11px;
  opacity: 0;
  transition: all 0.25s ease;
}

ai li:hover {
  background: linear-gradient(135deg, rgba(212,165,116,0.18), rgba(107,76,122,0.08));
  border-color: var(--accent);
  border-left-width: 3px;
  padding-left: 1.15rem;
  box-shadow: 0 2px 8px rgba(212,165,116,0.2);
}

ai li:hover::before {
  opacity: 1;
  right: 0.5rem;
}

ai li:active {
  background: linear-gradient(135deg, rgba(212,165,116,0.28), rgba(107,76,122,0.12));
  box-shadow: inset 0 1px 3px rgba(0,0,0,0.1);
  transform: scale(0.995);
}

@media (max-width: 600px) {
  ai li {
    font-size: 12px;
    padding: 0.45rem 0.7rem 0.45rem 0.85rem;
  }
}