/* EveryUtils — Modern Utility homepage layer */
:root {
  --eu-ink: #111827;
  --eu-muted: #667085;
  --eu-line: #e6eaf0;
  --eu-soft: #f6f8fb;
  --eu-accent: #4f46e5;
  --eu-accent-soft: #eef2ff;
  --eu-shadow: 0 18px 50px rgba(16, 24, 40, .08);
}

.main-workspace { background: linear-gradient(180deg, #fbfcfe 0%, #fff 38%); }
.workspace-header-bar { height: 56px; min-height: 56px; padding: 0 30px; border-bottom-color: var(--eu-line); background: rgba(255,255,255,.78); backdrop-filter: blur(10px); }
.breadcrumbs { font-size: 13px; }
.breadcrumb-item.active { font-weight: 650; color: var(--eu-ink); }

.tool-container { align-items: flex-start; padding: 0 32px 64px; min-height: calc(100vh - 56px); }
.hero { width: min(1120px, 100%); margin: 0 auto; padding: 38px 0 30px; }
.hero h1 { max-width: 760px; font-size: clamp(42px, 6vw, 68px); line-height: .98; letter-spacing: -.055em; color: var(--eu-ink); font-weight: 760; margin: 0; }
.hero-subtitle { max-width: 650px; margin: 22px 0 42px; color: var(--eu-muted); font-size: 18px; line-height: 1.6; }
.hero-subtitle::after { content: "  •  Sempre gratuiti"; color: #98a2b3; font-size: 13px; font-weight: 600; white-space: nowrap; }

.tools-grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: 14px; width: 100%; }
.tool-card { grid-column: span 4; min-height: 188px; padding: 24px; border: 1px solid var(--eu-line); border-radius: 18px; background: rgba(255,255,255,.92); box-shadow: 0 2px 8px rgba(16,24,40,.025); text-decoration: none; color: inherit; position: relative; overflow: hidden; transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease; }
.tool-card:nth-child(4), .tool-card:nth-child(5) { grid-column: span 6; }
.tool-card::after { content: "↗"; position: absolute; top: 20px; right: 22px; width: 28px; height: 28px; border-radius: 50%; background: var(--eu-soft); color: #667085; display: grid; place-items: center; font-size: 14px; opacity: 0; transform: translate(-4px, 4px); transition: .2s ease; }
.tool-card:hover { transform: translateY(-4px); border-color: #cfd5df; box-shadow: var(--eu-shadow); }
.tool-card:hover::after { opacity: 1; transform: none; }
.tool-icon { width: 46px; height: 46px; display: grid; place-items: center; border-radius: 13px; background: var(--eu-accent-soft); font-size: 23px; margin-bottom: 22px; }
.tool-card h3 { font-size: 17px; line-height: 1.2; color: var(--eu-ink); font-weight: 700; margin-bottom: 8px; letter-spacing: -.015em; }
.tool-card p { color: var(--eu-muted); font-size: 13px; line-height: 1.5; margin: 0; }

.sidebar { background: #f8fafc; border-right-color: var(--eu-line); }
.workspace-avatar { background: var(--eu-ink); border-radius: 7px; }
.menu-item { border-radius: 9px; }
.menu-item:hover { background: #eef2f6; }
.menu-item.active { background: #e9edff; color: #3730a3; }
.section-title { letter-spacing: .08em; }

@media (max-width: 900px) {
  .hero { padding-top: 34px; }
  .hero h1 { font-size: clamp(40px, 10vw, 58px); }
  .tool-card, .tool-card:nth-child(4), .tool-card:nth-child(5) { grid-column: span 6; }
}

@media (max-width: 620px) {
  .workspace-header-bar { padding: 0 18px 0 52px; }
  .tool-container { padding: 0 12px 40px; }
  .hero { padding-top: 22px; }
  .hero h1 { font-size: clamp(32px, 8.5vw, 42px); line-height: 1.02; }
  .hero-subtitle { font-size: 15px; margin-bottom: 26px; }
  .hero-subtitle::after { display: block; margin-top: 7px; }
  .tools-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .tool-card, .tool-card:nth-child(4), .tool-card:nth-child(5) { grid-column: span 1; min-height: 132px; padding: 15px; border-radius: 14px; }
  .tool-icon { width: 34px; height: 34px; border-radius: 9px; font-size: 17px; margin-bottom: 13px; }
  .tool-card h3 { font-size: 14px; margin-bottom: 5px; }
  .tool-card p { font-size: 11px; line-height: 1.35; }
  .tool-card::after { top: 12px; right: 12px; width: 22px; height: 22px; font-size: 11px; }
}