/* GOOLYA AI – общие стили (пародия на Google) */
:root {
  --g-blue: #4285f4;
  --g-red: #ea4335;
  --g-yellow: #fbbc05;
  --g-green: #34a853;
  --ink: #202124;
  --gray: #5f6368;
  --line: #dfe1e5;
  --bg: #fff;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
body {
  font-family: Arial, "Helvetica Neue", sans-serif;
  color: var(--ink);
  background: var(--bg);
  min-height: 100vh;
}
a { color: #1a0dab; text-decoration: none; }
a:hover { text-decoration: underline; }
button { font-family: inherit; cursor: pointer; }

/* Логотип GOOLYA */
.logo-goolya { font-family: "Product Sans", Futura, "Century Gothic", Arial, sans-serif; font-weight: 700; letter-spacing: -2px; user-select: none; }
a.logo-goolya, a.logo-goolya:hover, .logo-goolya a, .logo-goolya span { text-decoration: none !important; }
.logo-goolya .l1 { color: var(--g-blue); }
.logo-goolya .l2 { color: var(--g-red); }
.logo-goolya .l3 { color: var(--g-yellow); }
.logo-goolya .l4 { color: var(--g-blue); }
.logo-goolya .l5 { color: var(--g-green); }
.logo-goolya .l6 { color: var(--g-red); }
.logo-goolya .ai {
  font-size: 0.35em; vertical-align: super; margin-left: 4px;
  background: linear-gradient(90deg, var(--g-blue), var(--g-red), var(--g-yellow), var(--g-green));
  -webkit-background-clip: text; background-clip: text; color: transparent;
  animation: ai-shimmer 3s linear infinite; background-size: 300% 100%;
}
@keyframes ai-shimmer { to { background-position: 300% 0; } }

/* Верхняя панель */
.topbar {
  display: flex; align-items: center; justify-content: flex-end;
  gap: 18px; padding: 14px 20px; font-size: 13px;
}
.topbar a { color: var(--ink); }
.apps-btn {
  width: 40px; height: 40px; border: none; background: none; border-radius: 50%;
  display: grid; place-items: center; position: relative;
}
.apps-btn:hover { background: rgba(60, 64, 67, 0.08); }
.apps-btn svg { fill: var(--gray); }

/* Меню приложений */
.apps-menu {
  position: absolute; top: 52px; right: 12px; z-index: 50;
  background: #fff; border: 1px solid var(--line); border-radius: 16px;
  box-shadow: 0 4px 20px rgba(0,0,0,.18); padding: 18px; width: 300px;
  display: none; grid-template-columns: repeat(3, 1fr); gap: 6px;
}
.apps-menu.open { display: grid; animation: pop .18s ease; }
@keyframes pop { from { transform: scale(.92); opacity: 0; } }
.apps-menu a {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  padding: 12px 4px; border-radius: 12px; color: var(--ink); font-size: 12px;
  text-align: center; text-decoration: none;
}
.apps-menu a:hover { background: rgba(66,133,244,.08); text-decoration: none; }
.apps-menu .ico { font-size: 26px; }

/* Аватар-именинница */
.avatar-cake {
  width: 34px; height: 34px; border-radius: 50%;
  background: conic-gradient(var(--g-blue), var(--g-red), var(--g-yellow), var(--g-green), var(--g-blue));
  display: grid; place-items: center; font-size: 17px;
  animation: spin-slow 9s linear infinite;
}
@keyframes spin-slow { to { transform: rotate(360deg); } }

/* Конфетти */
.confetti { position: fixed; inset: 0; pointer-events: none; z-index: 5; }

/* Кнопки в стиле Google */
.gbtn {
  background: #f8f9fa; border: 1px solid #f8f9fa; border-radius: 4px;
  color: #3c4043; font-size: 14px; padding: 10px 18px;
}
.gbtn:hover { border-color: var(--line); box-shadow: 0 1px 3px rgba(0,0,0,.1); }
.gbtn-primary {
  background: var(--g-blue); border: none; color: #fff; border-radius: 24px;
  padding: 12px 28px; font-size: 15px;
}
.gbtn-primary:hover { box-shadow: 0 2px 8px rgba(66,133,244,.5); }
.gbtn-primary:disabled { opacity: .5; cursor: default; box-shadow: none; }

/* Радужный спиннер */
.spinner {
  width: 34px; height: 34px; border-radius: 50%;
  border: 4px solid var(--g-blue);
  border-right-color: var(--g-red); border-bottom-color: var(--g-yellow); border-left-color: var(--g-green);
  animation: spin .8s linear infinite; margin: 0 auto;
}
@keyframes spin { to { transform: rotate(360deg); } }

.hidden { display: none !important; }