@import url('https://fonts.googleapis.com/css2?family=Fira+Code:wght@400;500;600&family=Share+Tech+Mono&display=swap');

/* Logo */
.information-widget-logo img {
  width: 30px !important;
  height: 30px !important;
  margin-left: 20px;
}

/* Variables */
:root {
  --my-font: "Fira Code", "JetBrains Mono", "SFMono-Regular", "Menlo", monospace;
  --my-heading-font: "Share Tech Mono", "Fira Code", monospace;
  --my-border-radius: 1rem;
  --my-border-width: 1px;

  --color-bg: #0b1012;
  --color-card: #10161a;
  --color-text: #d1ffe3;
  --color-muted: #7dd3a9;

  --color-border: #1f2d25;
  --color-hover: #38f273;
  --color-focus: #2dd4bf;
  --color-accent: #38f273;
  --color-glow: rgba(56, 242, 115, 0.35);
  --my-border-color: var(--color-border);
}

/* Global */
body, #page_container {
  background-color: var(--color-bg);
  font-family: var(--my-font) !important;
  color: var(--color-text);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  letter-spacing: 0.01em;
  background-image:
    radial-gradient(circle at 15% 20%, rgba(56, 242, 115, 0.08), transparent 45%),
    radial-gradient(circle at 80% 10%, rgba(45, 212, 191, 0.06), transparent 55%),
    radial-gradient(circle at 50% 85%, rgba(56, 189, 248, 0.04), transparent 60%);
}

h1, h2, h3, h4 {
  font-family: var(--my-heading-font);
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-accent);
  text-shadow: 0 0 18px var(--color-glow);
}

h1 {
  font-size: 2.2rem;
}

h2 {
  font-size: 1.8rem;
}

h3 {
  font-size: 1.4rem;
}

h4 {
  font-size: 1.2rem;
}

h2,
h3 {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.4rem 0.9rem;
  margin-bottom: 0.6rem;
  border: 1px solid var(--color-border);
  border-radius: 0.6rem;
  background: linear-gradient(135deg, rgba(12, 24, 18, 0.86), rgba(6, 12, 10, 0.92));
  box-shadow: 0 0 18px rgba(56, 242, 115, 0.12);
}

/* Service cards */
.service-card,
.bookmark-text,
#information-widgets {
  position: relative;
  z-index: 0;
  background: linear-gradient(135deg, rgba(16, 24, 20, 0.95), rgba(10, 16, 14, 0.9));
  border: var(--my-border-width) solid var(--color-border);
  border-radius: var(--my-border-radius);
  padding: 14px;
  box-shadow: 0 0 20px rgba(56, 242, 115, 0.08);
  transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.18s ease;
  will-change: box-shadow, border-color, transform;
}

/* Hover sáng viền */
.service-card:hover,
.bookmark-text:hover {
  border-color: var(--color-hover);
  box-shadow: 0 0 28px rgba(56, 242, 115, 0.16);
  transform: translateY(2px);
  z-index: 5;
}

/* Tabs */
button[id$='-tab'] {
  background: linear-gradient(135deg, rgba(56, 242, 115, 0.14), rgba(15, 118, 110, 0.08));
  border: var(--my-border-width) solid var(--color-border);
  border-radius: 0.6rem;
  padding: 6px 12px;
  color: var(--color-text);
  font-weight: 600;
  font-family: var(--my-font);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-size: 0.85rem;
  text-shadow: 0 0 6px rgba(56, 242, 115, 0.2);
  transition: all 0.2s ease;
}

button[id$='-tab']:hover {
  border-color: var(--color-hover);
  color: var(--color-hover);
  box-shadow: 0 0 18px rgba(56, 242, 115, 0.2);
}

button[id$='-tab']:focus {
  border-color: var(--color-focus);
  color: var(--color-focus);
  box-shadow: 0 0 20px rgba(45, 212, 191, 0.18);
}

/* Widget container */
#widget-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 20px;
  padding: 20px;
  overflow: visible;
}

#widget-container .service-card {
  width: 320px;
  max-width: 100%;
}

/* Service block (giữ border riêng cho info bên trong) */
.service-block {
  position: relative;
  border: 1px solid var(--color-border);
  border-radius: 0.6rem;
  padding: 10px;
  margin-top: 8px;
  background: linear-gradient(135deg, rgba(12, 20, 16, 0.92), rgba(6, 12, 10, 0.88));
  box-shadow: inset 0 0 12px rgba(56, 242, 115, 0.08);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
}

.service-card h3,
.bookmark-text h3 {
  font-family: var(--my-heading-font);
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-accent);
  text-shadow: 0 0 12px var(--color-glow);
}

.service-card p,
.bookmark-text p {
  font-family: var(--my-font);
  color: var(--color-muted);
  letter-spacing: 0.02em;
}

/* Information widget text */
.information-widget-resource {
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  margin: 0 auto;
  padding: 10px 12px;
  color: var(--color-muted);
  font-family: var(--my-font);
  text-transform: uppercase;
  letter-spacing: 0.16em;
  font-size: 0.78rem;
  background: linear-gradient(135deg, rgba(10, 18, 15, 0.9), rgba(5, 12, 9, 0.88));
  border: 1px solid rgba(56, 242, 115, 0.16);
  border-radius: 0.5rem;
  box-shadow: inset 0 0 10px rgba(56, 242, 115, 0.08);
}


/* Iframes */
.home-assistant,
.glance,
.weather {
  border-radius: var(--my-border-radius);
  border: 1px solid var(--color-border);
  width: 100%;
}

#information-widgets,
.bookmark-text,
.service-card {
  border-width: var(--my-border-width);
  border-radius: var(--my-border-radius);
  border-color: var(--my-border-color);

  /* Nền tối nhưng không quá trong */
  background: linear-gradient(135deg, rgba(12, 22, 18, 0.92), rgba(8, 14, 12, 0.86));
  backdrop-filter: blur(4px);           /* giảm blur cho nhẹ */
  -webkit-backdrop-filter: blur(4px);
}