/* Graphic Library App Styles */

.graphic-library-app {
  padding: calc(20px * var(--ui-scale));
  height: 100%;
  overflow-y: auto;
  background: var(--bg-primary);
  color: var(--text-color);
}

/* Header */
.gl-header {
  margin-bottom: calc(30px * var(--ui-scale));
  padding-bottom: calc(20px * var(--ui-scale));
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.gl-header h1 {
  margin: 0;
  font-size: calc(32px * var(--ui-scale));
  font-weight: 600;
  color: var(--accent-color);
}

.gl-header p {
  margin: calc(8px * var(--ui-scale)) 0 0 0;
  font-size: calc(16px * var(--ui-scale));
  opacity: 0.7;
}

/* Tabs */
.gl-tabs {
  display: flex;
  gap: calc(10px * var(--ui-scale));
  margin-bottom: calc(30px * var(--ui-scale));
  border-bottom: 2px solid rgba(255, 255, 255, 0.1);
}

.gl-tab {
  padding: calc(12px * var(--ui-scale)) calc(24px * var(--ui-scale));
  background: transparent;
  border: none;
  border-bottom: 3px solid transparent;
  color: var(--text-color);
  font-size: calc(16px * var(--ui-scale));
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s;
  margin-bottom: -2px;
}

.gl-tab.hover {
  background: rgba(255, 255, 255, 0.05);
}

.gl-tab.active {
  color: var(--accent-color);
  border-bottom-color: var(--accent-color);
}

/* Content */
.gl-content {
  padding-bottom: calc(40px * var(--ui-scale));
}

.gl-tab-content {
  animation: fadeIn 0.3s;
}

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Sections */
.gl-section {
  margin-bottom: calc(40px * var(--ui-scale));
  background: rgba(255, 255, 255, 0.03);
  border-radius: calc(12px * var(--ui-scale));
  padding: calc(24px * var(--ui-scale));
  border: 1px solid rgba(255, 255, 255, 0.05);
}

.gl-section-header {
  margin-bottom: calc(24px * var(--ui-scale));
}

.gl-section-header h2 {
  margin: 0;
  font-size: calc(24px * var(--ui-scale));
  font-weight: 600;
  color: var(--text-color);
}

.gl-section-header p {
  margin: calc(8px * var(--ui-scale)) 0 0 0;
  font-size: calc(14px * var(--ui-scale));
  opacity: 0.6;
}

/* Examples */
.gl-examples {
  display: flex;
  flex-direction: column;
  gap: calc(24px * var(--ui-scale));
}

.gl-group {
  display: flex;
  flex-direction: column;
  gap: calc(12px * var(--ui-scale));
  padding: calc(16px * var(--ui-scale));
  background: rgba(0, 0, 0, 0.2);
  border-radius: calc(8px * var(--ui-scale));
  border: 1px solid rgba(255, 255, 255, 0.05);
}

.gl-group > label {
  font-size: calc(14px * var(--ui-scale));
  font-weight: 600;
  color: var(--accent-color);
  margin-bottom: calc(8px * var(--ui-scale));
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.gl-group > button,
.gl-group > .ui-btn {
  align-self: flex-start;
}

/* Icon Grid */
.gl-icon-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(calc(120px * var(--ui-scale)), 1fr));
  gap: calc(16px * var(--ui-scale));
}

.gl-icon-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: calc(8px * var(--ui-scale));
  padding: calc(16px * var(--ui-scale));
  background: rgba(255, 255, 255, 0.05);
  border-radius: calc(8px * var(--ui-scale));
  border: 1px solid rgba(255, 255, 255, 0.1);
  cursor: pointer;
  transition: all 0.2s;
}

.gl-icon-card.hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: var(--accent-color);
  transform: translateY(-2px);
}

.gl-icon-card .material-symbols-outlined {
  font-size: calc(32px * var(--ui-scale));
  color: var(--accent-color);
}

.gl-icon-label {
  font-size: calc(11px * var(--ui-scale));
  text-align: center;
  opacity: 0.7;
  word-break: break-word;
  max-width: 100%;
}

/* Responsive adjustments */
@media (max-width: 1200px) {
  .gl-icon-grid {
    grid-template-columns: repeat(auto-fill, minmax(calc(100px * var(--ui-scale)), 1fr));
  }
}

@media (max-width: 800px) {
  .gl-icon-grid {
    grid-template-columns: repeat(auto-fill, minmax(calc(80px * var(--ui-scale)), 1fr));
  }
}