@opencoreai/opencore 0.2.2

package/opencore dashboard/styles.css

@@ -0,0 +1,965 @@
+:root {
+  --bg: #f3ede2;
+  --bg-deep: #e7d7c5;
+  --panel: transparent;
+  --panel-strong: transparent;
+  --ink: #25150c;
+  --ink-soft: #68483a;
+  --ink-muted: #8f7464;
+  --line: rgba(89, 50, 21, 0.12);
+  --accent: #ca5d1a;
+  --accent-bright: #f08c39;
+  --accent-soft: rgba(240, 140, 57, 0.14);
+  --shadow: none;
+  --radius-xl: 28px;
+  --radius-lg: 22px;
+  --radius-md: 16px;
+  --radius-sm: 12px;
+}
+
+:root[data-theme="dark"] {
+  --bg: #16110d;
+  --bg-deep: #0f0b08;
+  --ink: #f6ecdf;
+  --ink-soft: #d2bba7;
+  --ink-muted: #a98b78;
+  --line: rgba(233, 193, 161, 0.14);
+  --accent: #ff8a3b;
+  --accent-bright: #ffb15a;
+  --accent-soft: rgba(255, 145, 71, 0.18);
+  --status-bg: rgba(34, 24, 19, 0.88);
+  --field-bg: rgba(31, 22, 18, 0.92);
+  --field-line: rgba(255, 188, 140, 0.14);
+  --field-shadow: inset 0 1px 0 rgba(255, 214, 188, 0.05);
+  --panel-tint: rgba(255, 255, 255, 0.04);
+}
+
+* {
+  box-sizing: border-box;
+}
+
+html,
+body {
+  height: 100%;
+}
+
+body {
+  margin: 0;
+  overflow: hidden;
+  color: var(--ink);
+  font-family: "Avenir Next", "Segoe UI", sans-serif;
+  background:
+    radial-gradient(circle at top left, rgba(255, 186, 110, 0.35), transparent 34%),
+    radial-gradient(circle at top right, rgba(203, 105, 38, 0.18), transparent 28%),
+    linear-gradient(180deg, #fbf4ea 0%, var(--bg) 48%, var(--bg-deep) 100%);
+}
+
+:root[data-theme="dark"] body {
+  background:
+    radial-gradient(circle at top left, rgba(255, 135, 57, 0.16), transparent 26%),
+    radial-gradient(circle at top right, rgba(255, 196, 118, 0.1), transparent 24%),
+    linear-gradient(180deg, #1e1712 0%, var(--bg) 42%, var(--bg-deep) 100%);
+}
+
+.ambient {
+  position: fixed;
+  inset: auto;
+  border-radius: 999px;
+  filter: blur(90px);
+  pointer-events: none;
+  opacity: 0.55;
+}
+
+.ambient-a {
+  width: 260px;
+  height: 260px;
+  top: -50px;
+  right: -40px;
+  background: rgba(240, 140, 57, 0.22);
+}
+
+.ambient-b {
+  width: 220px;
+  height: 220px;
+  left: -50px;
+  bottom: 80px;
+  background: rgba(187, 100, 44, 0.14);
+}
+
+.shell {
+  position: relative;
+  width: 100%;
+  max-width: none;
+  margin: 0;
+  padding: 10px 14px 14px;
+  height: 100dvh;
+  display: flex;
+  flex-direction: column;
+  gap: 0;
+  overflow: hidden;
+}
+
+.hero {
+  display: flex;
+  align-items: flex-end;
+  justify-content: space-between;
+  gap: 18px;
+  padding: 14px 12px 10px;
+  background: transparent;
+  border: 0;
+  border-radius: 0;
+  box-shadow: none;
+  backdrop-filter: none;
+}
+
+.hero-copy h1 {
+  margin: 2px 0 6px;
+  font-size: clamp(28px, 4vw, 48px);
+  line-height: 0.94;
+  letter-spacing: -0.05em;
+}
+
+.hero-copy p {
+  margin: 0;
+  max-width: 620px;
+  color: var(--ink-soft);
+  font-size: 14px;
+}
+
+.hero-kicker,
+.page-kicker,
+.drawer-kicker,
+.skill-kicker,
+.stat-label,
+.section-meta {
+  text-transform: uppercase;
+  letter-spacing: 0.12em;
+  font-size: 11px;
+  color: var(--ink-muted);
+}
+
+.hero-status {
+  min-width: 250px;
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+  align-items: flex-end;
+}
+
+.theme-switch {
+  border: 1px solid rgba(202, 93, 26, 0.2);
+  border-radius: 999px;
+  background: rgba(255, 247, 237, 0.72);
+  color: var(--accent);
+  padding: 9px 14px;
+  font-size: 12px;
+  font-weight: 800;
+}
+
+:root[data-theme="dark"] .theme-switch {
+  background: rgba(45, 31, 24, 0.82);
+  border-color: rgba(255, 163, 92, 0.2);
+}
+
+.status-chip {
+  display: inline-flex;
+  align-items: center;
+  padding: 10px 14px;
+  border-radius: 999px;
+  border: 1px solid rgba(202, 93, 26, 0.16);
+  background: rgba(255, 246, 234, 0.88);
+  font-weight: 700;
+  color: var(--accent);
+  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.75);
+}
+
+:root[data-theme="dark"] .status-chip {
+  background: var(--status-bg);
+  border-color: rgba(255, 173, 110, 0.18);
+  box-shadow: inset 0 1px 0 rgba(255, 223, 202, 0.06);
+}
+
+.status-line {
+  color: var(--ink-soft);
+  font-size: 14px;
+  text-align: right;
+}
+
+.stats-row {
+  display: grid;
+  grid-template-columns: repeat(4, minmax(0, 1fr));
+  gap: 0;
+  flex: 0 0 auto;
+  border-bottom: 1px solid rgba(89, 50, 21, 0.08);
+}
+
+.stat-card {
+  min-height: 78px;
+  padding: 14px 12px;
+  border-radius: 0;
+  border: 0;
+  border-right: 1px solid rgba(89, 50, 21, 0.08);
+  background: transparent;
+  box-shadow: none;
+  backdrop-filter: none;
+}
+
+.stat-card.wide {
+  grid-column: span 1;
+}
+
+.stat-value {
+  margin-top: 8px;
+  font-size: 16px;
+  line-height: 1.2;
+  font-weight: 700;
+  color: var(--ink);
+}
+
+.stat-card.good .stat-value {
+  color: #2c7c4a;
+}
+
+:root[data-theme="dark"] .stat-card.good .stat-value {
+  color: #79d89e;
+}
+
+.stat-card.warn .stat-value {
+  color: #a54a23;
+}
+
+:root[data-theme="dark"] .stat-card.warn .stat-value {
+  color: #ff9d72;
+}
+
+.stat-card.accent .stat-value {
+  color: var(--accent);
+}
+
+.layout {
+  display: grid;
+  grid-template-columns: 320px minmax(0, 1fr);
+  gap: 0;
+  flex: 1 1 auto;
+  min-height: 0;
+}
+
+.layout.drawer-closed {
+  grid-template-columns: minmax(0, 1fr);
+}
+
+.drawer {
+  background: transparent;
+  border: 0;
+  border-right: 1px solid rgba(106, 64, 34, 0.1);
+  border-radius: 0;
+  padding: 12px 10px 10px 0;
+  box-shadow: none;
+  backdrop-filter: none;
+  min-height: 0;
+  height: 100%;
+  overflow: hidden;
+  display: flex;
+  flex-direction: column;
+}
+
+.drawer.closed {
+  display: none;
+}
+
+.drawer-head {
+  padding: 4px 10px 12px 12px;
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: 12px;
+}
+
+.drawer-head-main {
+  min-width: 0;
+}
+
+.drawer-inline-toggle,
+.drawer-reopen {
+  width: 34px;
+  height: 34px;
+  border: 1px solid rgba(129, 73, 33, 0.14);
+  border-radius: 999px;
+  background: rgba(255, 247, 237, 0.7);
+  color: var(--accent);
+  font-size: 16px;
+  font-weight: 800;
+  cursor: pointer;
+}
+
+:root[data-theme="dark"] .drawer-inline-toggle,
+:root[data-theme="dark"] .drawer-reopen {
+  background: rgba(36, 26, 21, 0.86);
+  border-color: rgba(255, 176, 118, 0.16);
+}
+
+.drawer-reopen {
+  align-self: flex-start;
+  margin: 12px 8px 0 0;
+}
+
+.drawer-title {
+  font-size: 22px;
+  font-weight: 800;
+  letter-spacing: -0.04em;
+}
+
+.drawer-nav {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  min-height: 0;
+  overflow: auto;
+  padding: 0 8px 0 12px;
+}
+
+.nav-btn {
+  border: 1px solid transparent;
+  border-radius: 18px;
+  background: transparent;
+  color: var(--ink);
+  text-align: left;
+  padding: 12px 14px;
+  font-size: 14px;
+  cursor: pointer;
+  transition: transform 140ms ease, background 140ms ease, border-color 140ms ease;
+}
+
+.nav-btn:hover {
+  transform: translateX(2px);
+  background: rgba(255, 255, 255, 0.44);
+  border-color: rgba(128, 71, 34, 0.12);
+}
+
+:root[data-theme="dark"] .nav-btn:hover {
+  background: rgba(255, 255, 255, 0.05);
+  border-color: rgba(255, 181, 123, 0.12);
+}
+
+.nav-btn.active {
+  background: linear-gradient(135deg, rgba(239, 140, 58, 0.2), rgba(255, 215, 170, 0.38));
+  border-color: rgba(209, 100, 30, 0.2);
+  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.55);
+}
+
+:root[data-theme="dark"] .nav-btn.active {
+  background: linear-gradient(135deg, rgba(203, 100, 40, 0.32), rgba(79, 44, 24, 0.48));
+  border-color: rgba(255, 171, 110, 0.18);
+  box-shadow: inset 0 1px 0 rgba(255, 214, 184, 0.08);
+}
+
+.nav-label,
+.nav-blurb {
+  display: block;
+}
+
+.nav-label {
+  font-weight: 700;
+}
+
+.nav-blurb {
+  margin-top: 4px;
+  font-size: 11px;
+  text-transform: uppercase;
+  letter-spacing: 0.12em;
+  color: var(--ink-muted);
+}
+
+.page {
+  display: flex;
+  flex-direction: column;
+  min-height: 0;
+  height: 100%;
+  width: 100%;
+  border-radius: 0;
+  border: 0;
+  background: transparent;
+  box-shadow: none;
+  overflow: hidden;
+  backdrop-filter: none;
+}
+
+.page-head {
+  padding: 14px 20px 12px;
+  border-bottom: 1px solid rgba(101, 67, 37, 0.1);
+  background: transparent;
+}
+
+.page-head h2 {
+  margin: 4px 0 6px;
+  font-size: 24px;
+  line-height: 1;
+  letter-spacing: -0.04em;
+}
+
+.page-head p {
+  margin: 0;
+  color: var(--ink-soft);
+  font-size: 14px;
+}
+
+.content-body {
+  flex: 1;
+  min-height: 0;
+  overflow: hidden;
+}
+
+.stacked {
+  display: flex;
+  flex-direction: column;
+}
+
+.section-head {
+  display: flex;
+  align-items: baseline;
+  justify-content: space-between;
+  gap: 10px;
+  padding: 14px 20px 8px;
+}
+
+.section-title {
+  font-size: 15px;
+  font-weight: 700;
+}
+
+.chat-list {
+  flex: 1;
+  min-height: 0;
+  overflow-y: auto;
+  padding: 6px 20px 14px;
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+}
+
+.msg {
+  display: flex;
+  padding: 0;
+  border-radius: 0;
+  border: 0;
+  background: transparent;
+  box-shadow: none;
+}
+
+.msg.user {
+  justify-content: flex-end;
+}
+
+.msg.assistant {
+  justify-content: flex-start;
+}
+
+.msg.error {
+  justify-content: flex-start;
+}
+
+.msg-bubble {
+  max-width: min(72%, 760px);
+  padding: 12px 14px;
+  border-radius: 22px;
+  border: 1px solid rgba(112, 69, 35, 0.1);
+  background: rgba(255, 252, 247, 0.64);
+}
+
+.msg.user .msg-bubble {
+  background: linear-gradient(135deg, rgba(243, 158, 90, 0.22), rgba(255, 224, 188, 0.42));
+  border-color: rgba(222, 124, 50, 0.18);
+}
+
+.msg.assistant .msg-bubble {
+  background: rgba(255, 255, 255, 0.48);
+}
+
+.msg.error .msg-bubble {
+  background: rgba(193, 74, 43, 0.08);
+  border-color: rgba(193, 74, 43, 0.18);
+}
+
+:root[data-theme="dark"] .msg-bubble {
+  background: rgba(38, 27, 21, 0.78);
+  border-color: rgba(255, 189, 140, 0.12);
+}
+
+:root[data-theme="dark"] .msg.user .msg-bubble {
+  background: linear-gradient(135deg, rgba(194, 96, 35, 0.42), rgba(117, 64, 31, 0.68));
+  border-color: rgba(255, 168, 96, 0.2);
+}
+
+:root[data-theme="dark"] .msg.assistant .msg-bubble {
+  background: rgba(30, 21, 17, 0.82);
+}
+
+.meta {
+  display: flex;
+  gap: 8px;
+  flex-wrap: wrap;
+  margin-bottom: 8px;
+  font-size: 11px;
+  color: var(--ink-muted);
+  text-transform: uppercase;
+  letter-spacing: 0.08em;
+}
+
+.role-badge {
+  display: inline-flex;
+  align-items: center;
+  padding: 3px 8px;
+  border-radius: 999px;
+  background: rgba(115, 77, 50, 0.08);
+  color: var(--ink-soft);
+  font-weight: 700;
+}
+
+:root[data-theme="dark"] .role-badge {
+  background: rgba(255, 255, 255, 0.06);
+}
+
+.msg-text {
+  white-space: pre-wrap;
+  overflow-wrap: anywhere;
+  word-break: break-word;
+  line-height: 1.5;
+}
+
+.composer-shell {
+  padding: 12px 20px 18px;
+  border-top: 1px solid rgba(101, 67, 37, 0.1);
+  background: transparent;
+}
+
+.composer-label {
+  margin-bottom: 10px;
+  font-size: 13px;
+  font-weight: 700;
+  color: var(--ink-soft);
+}
+
+.composer {
+  display: grid;
+  grid-template-columns: 1fr auto;
+  gap: 10px;
+  align-items: center;
+}
+
+.editor {
+  padding: 0 0 20px;
+}
+
+input,
+textarea {
+  width: 100%;
+  border: 1px solid rgba(102, 64, 36, 0.12);
+  border-radius: 20px;
+  background: rgba(255, 255, 255, 0.72);
+  color: var(--ink);
+  padding: 16px 18px;
+  font: inherit;
+  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6);
+}
+
+input::placeholder,
+textarea::placeholder {
+  color: var(--ink-muted);
+}
+
+:root[data-theme="dark"] input,
+:root[data-theme="dark"] textarea {
+  border-color: var(--field-line);
+  background: var(--field-bg);
+  color: var(--ink);
+  box-shadow: var(--field-shadow);
+}
+
+.composer input {
+  height: 54px;
+  min-height: 54px;
+}
+
+textarea {
+  min-height: 120px;
+  resize: vertical;
+}
+
+.editor textarea {
+  min-height: 0;
+  height: 100%;
+  margin: 0 20px;
+  width: calc(100% - 40px);
+}
+
+.editor-footer {
+  margin-top: 12px;
+  padding: 0 20px;
+  display: flex;
+  justify-content: flex-end;
+}
+
+button {
+  appearance: none;
+}
+
+.primary-btn,
+.secondary-btn {
+  border-radius: 16px;
+  font-weight: 800;
+  cursor: pointer;
+}
+
+.primary-btn {
+  min-width: 120px;
+  height: 54px;
+  padding: 0 22px;
+  border: 0;
+  background: linear-gradient(135deg, var(--accent), var(--accent-bright));
+  color: #fff8f1;
+  box-shadow: 0 16px 28px rgba(208, 101, 31, 0.24);
+}
+
+:root[data-theme="dark"] .primary-btn {
+  color: #1d120a;
+  box-shadow: 0 16px 32px rgba(0, 0, 0, 0.28);
+}
+
+.secondary-btn {
+  padding: 10px 14px;
+  border: 1px solid rgba(195, 99, 36, 0.16);
+  background: rgba(255, 249, 241, 0.72);
+  color: var(--accent);
+}
+
+:root[data-theme="dark"] .secondary-btn {
+  background: rgba(34, 25, 20, 0.84);
+  border-color: rgba(255, 177, 119, 0.16);
+}
+
+.shots-grid,
+.skills-grid,
+.credentials-grid {
+  padding: 14px 20px 18px;
+  overflow-y: auto;
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
+  gap: 14px;
+  align-items: start;
+  grid-auto-rows: 198px;
+}
+
+.shot-card,
+.skill-card,
+.credential-card,
+.settings-card {
+  border-radius: 0;
+  border: 0;
+  border-bottom: 1px solid rgba(101, 68, 38, 0.1);
+  background: transparent;
+  box-shadow: none;
+  padding: 12px 0;
+}
+
+.skill-card {
+  border: 1px solid rgba(101, 68, 38, 0.12);
+  border-radius: 18px;
+  background: rgba(255, 250, 244, 0.58);
+  box-shadow: 0 10px 24px rgba(95, 58, 31, 0.06);
+  padding: 10px 12px;
+  align-self: stretch;
+  height: 198px;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+}
+
+:root[data-theme="dark"] .skill-card {
+  border-color: rgba(255, 188, 140, 0.12);
+  background: rgba(34, 25, 20, 0.78);
+  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.22);
+}
+
+.credential-card {
+  border: 1px solid rgba(101, 68, 38, 0.12);
+  border-radius: 18px;
+  background: rgba(255, 250, 244, 0.58);
+  box-shadow: 0 10px 24px rgba(95, 58, 31, 0.06);
+  padding: 14px 16px;
+}
+
+:root[data-theme="dark"] .credential-card {
+  border-color: rgba(255, 188, 140, 0.12);
+  background: rgba(34, 25, 20, 0.78);
+  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.22);
+}
+
+.settings-card {
+  margin: 0 20px 18px;
+  padding: 14px 0;
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
+  gap: 14px;
+}
+
+.credentials-settings-card,
+.credentials-entry-card {
+  margin: 0 20px 18px;
+  padding: 14px 0;
+}
+
+.settings-field-wide {
+  grid-column: 1 / -1;
+}
+
+.credentials-warning {
+  grid-column: 1 / -1;
+  border: 1px solid rgba(207, 101, 31, 0.22);
+  background: rgba(255, 169, 96, 0.12);
+  color: var(--ink);
+  border-radius: 16px;
+  padding: 12px 14px;
+  font-size: 13px;
+  line-height: 1.5;
+}
+
+:root[data-theme="dark"] .credentials-warning {
+  background: rgba(255, 135, 57, 0.14);
+  border-color: rgba(255, 165, 104, 0.2);
+}
+
+.credential-actions {
+  justify-content: flex-start;
+}
+
+.danger-btn {
+  border-color: rgba(176, 61, 42, 0.18);
+  color: #b94f32;
+}
+
+:root[data-theme="dark"] .danger-btn {
+  border-color: rgba(255, 134, 111, 0.16);
+  color: #ff9f89;
+}
+
+.settings-row,
+.settings-field {
+  display: grid;
+  gap: 8px;
+}
+
+.settings-toggle {
+  grid-template-columns: 1fr auto;
+  align-items: center;
+  gap: 16px;
+}
+
+.settings-copy {
+  display: grid;
+  gap: 4px;
+  color: var(--ink-soft);
+  font-size: 13px;
+}
+
+.settings-copy strong,
+.settings-field span {
+  color: var(--ink);
+  font-size: 13px;
+}
+
+.settings-inline-meta {
+  color: var(--ink-soft);
+  font-size: 12px;
+  font-weight: 700;
+}
+
+.settings-actions {
+  display: flex;
+  gap: 10px;
+  justify-content: flex-end;
+  grid-column: 1 / -1;
+}
+
+.settings-inline-meta,
+.settings-toggle {
+  grid-column: 1 / -1;
+}
+
+.shot-meta,
+.skill-top {
+  display: flex;
+  justify-content: space-between;
+  gap: 12px;
+  align-items: flex-start;
+}
+
+.shot-name,
+.skill-card h3 {
+  margin: 0;
+  font-size: 16px;
+  font-weight: 800;
+}
+
+.clamp-title {
+  display: -webkit-box;
+  -webkit-line-clamp: 1;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+}
+
+.shot-ts,
+.skill-card p,
+.skill-note {
+  color: var(--ink-soft);
+  font-size: 13px;
+}
+
+.shot-card img {
+  width: 100%;
+  margin-top: 12px;
+  border-radius: 16px;
+  border: 1px solid rgba(105, 70, 39, 0.1);
+}
+
+.skill-card p {
+  margin: 6px 0 8px;
+  line-height: 1.4;
+}
+
+.skill-card p,
+.skill-expand-btn {
+  flex: 0 0 auto;
+}
+
+.clamp-description {
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+}
+
+.skill-card.expanded {
+  height: auto;
+  min-height: 198px;
+}
+
+.skill-expand-btn {
+  align-self: flex-start;
+  margin: -2px 0 8px;
+}
+
+.text-btn {
+  border: 0;
+  background: transparent;
+  color: var(--accent);
+  font: inherit;
+  font-size: 13px;
+  font-weight: 800;
+  padding: 0;
+  cursor: pointer;
+}
+
+:root[data-theme="dark"] .text-btn {
+  color: var(--accent-bright);
+}
+
+.skill-note,
+.skill-card .secondary-btn {
+  margin-top: auto;
+  align-self: stretch;
+}
+
+.skill-status {
+  display: inline-flex;
+  align-items: center;
+  border-radius: 999px;
+  padding: 5px 10px;
+  font-size: 11px;
+  font-weight: 800;
+  text-transform: uppercase;
+  letter-spacing: 0.08em;
+}
+
+.skill-status.installed {
+  color: #2f8050;
+  background: rgba(89, 196, 123, 0.14);
+}
+
+:root[data-theme="dark"] .skill-status.installed {
+  color: #7cdda5;
+  background: rgba(89, 196, 123, 0.18);
+}
+
+.skill-status.not-installed {
+  color: var(--accent);
+  background: rgba(240, 140, 57, 0.12);
+}
+
+:root[data-theme="dark"] .skill-status.not-installed {
+  background: rgba(255, 145, 71, 0.16);
+}
+
+.skill-note {
+  font-weight: 600;
+}
+
+@media (max-width: 1120px) {
+  .stats-row,
+  .shots-grid,
+  .skills-grid,
+  .credentials-grid {
+    grid-template-columns: 1fr 1fr;
+  }
+
+  .layout {
+    grid-template-columns: 1fr;
+  }
+}
+
+@media (max-width: 760px) {
+  .shell {
+    padding: 14px 12px 12px;
+  }
+
+  .hero {
+    flex-direction: column;
+    align-items: flex-start;
+  }
+
+  .hero-status {
+    align-items: flex-start;
+    min-width: 0;
+  }
+
+  .stats-row,
+  .shots-grid,
+  .skills-grid,
+  .credentials-grid,
+  .composer,
+  .settings-card {
+    grid-template-columns: 1fr;
+  }
+
+  .page-head,
+  .section-head,
+  .chat-list,
+  .composer-shell,
+  .shots-grid,
+  .skills-grid {
+    padding-left: 16px;
+    padding-right: 16px;
+  }
+
+  .editor textarea,
+  .editor-footer {
+    margin-left: 16px;
+    margin-right: 16px;
+    width: calc(100% - 32px);
+    padding-left: 0;
+    padding-right: 0;
+  }
+
+  .msg-bubble {
+    max-width: 100%;
+  }
+}