:root {
  --ec-blue: #2563EB;
  --ec-purple: #9333EA;
  --ec-surface-0: rgba(255,255,255,0.03);
  --ec-surface-1: rgba(255,255,255,0.05);
  --ec-surface-2: rgba(255,255,255,0.08);
  --ec-border: rgba(255,255,255,0.14);
  --ec-border-strong: rgba(37,99,235,0.35);
  --ec-shadow-1: 0 12px 28px -16px rgba(0,0,0,.55);
  --ec-shadow-2: 0 18px 36px -22px rgba(0,0,0,.6);
  --ec-radius: 14px;

  --fg: #e6e6e6;
  --bg: #0f1115;
  --tile-bg: rgba(255,255,255,0.05);
  --tile-bg-hover: rgba(255,255,255,0.08);
  --tile-border: rgba(255,255,255,0.14);
  --desc: #9aa3ad;
}

* { box-sizing: border-box; }
html, body { height: 100%; background: var(--bg); color: var(--fg); margin: 0; font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, "Helvetica Neue", Arial, "Apple Color Emoji", "Segoe UI Emoji"; }

.easycodeGettingStartedContainer { 
  min-height: 100vh; 
  position: relative; 
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.easycodeGettingStartedContainer::after {
  content: ""; position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.025) 1px, transparent 1px);
  background-size: 26px 26px, 26px 26px;
  background-position: 0 4px, 4px 0;
  pointer-events: none; z-index: 0;
}
.easycodeGettingStartedContainer .gettingStarted { position: relative; z-index: 1; }

.gettingStartedSlide { width: 100%; height: 100%; padding: 12px 24px; }
.gettingStartedCategoriesContainer {
  display: grid;
  max-width: 1200px;   /* reverted back to wider style */
  margin: 0 auto;
  grid-template-rows: auto auto auto auto auto;
  grid-template-columns: 1fr;
  grid-template-areas:
    "header"
    "prompt"
    "tabs"
    "community"
    "footer";
  gap: 32px 0;
  padding: 60px 20px;
  flex: 1; /* take available height */
  align-content: center; /* vertical centering of header + prompt + tabs */
}

.header { grid-area: header; text-align: center; align-self: end; padding-bottom: 10px; }
.header h1 { margin: 0 0 8px; font-weight: 900; letter-spacing: -0.02em; font-size: clamp(28px, 5vw, 44px); }
.header .title-blue { background: linear-gradient(135deg, #2563EB 0%, #2563EB 60%, #9333EA 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }
.header .title-purple { color: var(--ec-purple); }
.header .subtitle { opacity: .9; font-weight: 500; max-width: 780px; margin: 0 auto; }

.prompt {
  grid-area: prompt;
  margin: 0 auto;
  width: 100%; /* full width of container */
}

.prompt .prompt-container { position: relative; }
.prompt textarea {
  width: 100%; min-height: 124px; resize: vertical; padding: 14px;
  border-radius: var(--ec-radius); border: 1px solid var(--ec-border); background: var(--ec-surface-1);
  color: var(--fg); outline: none; box-shadow: inset 0 1px 0 rgba(255,255,255,.03);
}
.prompt textarea:focus {
  border-color: rgba(255,255,255,.22);
  box-shadow: 0 0 0 3px rgba(255,255,255,.08), var(--ec-shadow-1);
}
.controller-wrapper {
  display: flex; justify-content: space-between; align-items: center;
  position: absolute; bottom: 8px; left: 8px; right: 8px; gap: 10px;
}

.nextui-button {
  border: 0; border-radius: 10px; padding: 8px 16px;
  background: var(--ec-surface-2); color: var(--fg);
  box-shadow: var(--ec-shadow-1);
  transition: transform .15s ease, background .15s ease, box-shadow .15s ease;
  display: inline-flex; align-items: center; gap: 6px; cursor: pointer;
}
.nextui-button:hover { transform: translateY(-1px); background: rgba(255,255,255,.10); }
.nextui-button.primary { background: var(--ec-blue); color: #fff; box-shadow: 0 12px 28px -12px rgba(37,99,235,.55); }
.nextui-button.primary:hover { background: #1f54c9; }

.prompt-suggestions { margin-top: 12px; display: flex; flex-wrap: wrap; gap: 10px; }
.suggestion-chip {
  display: inline-flex; align-items: center; height: 30px; padding: 0 14px; border-radius: 999px;
  background: var(--ec-surface-1); border: 1px solid var(--ec-border); color: var(--fg);
  cursor: pointer; user-select: none; transition: transform .15s ease, background .15s ease, border-color .15s ease;
}
.suggestion-chip:hover { transform: translateY(-1px); background: var(--ec-surface-2); border-color: rgba(255,255,255,.22); }

.tabs { grid-area: tabs; margin-bottom: 4px; display: flex; justify-content: center; }
.tabs .controller-wrapper {
  position: static; display: inline-flex; gap: 6px; padding: 6px;
  border-radius: 999px; background: var(--ec-surface-1); border: 1px solid var(--ec-border);
  backdrop-filter: blur(10px); box-shadow: var(--ec-shadow-1);
}
.tabs .controller-wrapper .monaco-button {
  border: 0; background: transparent; color: var(--fg); padding: 8px 16px; border-radius: 999px; cursor: pointer;
  transition: transform .15s ease, background .15s ease;
}
.tabs .controller-wrapper .monaco-button:hover { background: var(--ec-surface-2); transform: translateY(-1px); }
.tabs .controller-wrapper .monaco-button.active {
  background: #2563EB; color: #fff; box-shadow: 0 12px 28px -12px rgba(37,99,235,.55);
}

.template { grid-area: template; }
.community { grid-area: community; }

.template .template-container ul,
.community .template-container ul {
  display: grid;
  gap: 16px;
  grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));
  padding: 0;
  margin: 0;
  list-style: none;
  align-items: stretch; /* NEW: make all items in a row equal height */
}

.element {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between; /* NEW: distribute content evenly */
  gap: 6px;
  border-radius: var(--ec-radius);
  padding: 14px;
  background: var(--ec-surface-1);
  border: 1px solid var(--ec-border);
  box-shadow: var(--ec-shadow-1);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease, background .18s ease;
  cursor: pointer;
  overflow: hidden;
  height: 100%; /* NEW: stretch to match tallest in row */
}

.element:hover {
  transform: translateY(-4px);
  background: var(--ec-surface-2);
  border-color: rgba(255,255,255,.22);
  box-shadow: var(--ec-shadow-2);
}
.element .thumbnail img { width: 100%; height: auto; border-radius: 10px; display: block; }
.element .title { margin: 0; font-weight: 600; }
.element .description { color: var(--desc); font-size: 13px; }
.element .tags { display: flex; gap: 6px; flex-wrap: wrap; color: var(--desc); }
.element .tags .tag {
  border: 1px solid var(--ec-border); background: var(--ec-surface-0);
  padding: 0 10px; line-height: 20px; border-radius: 999px; font-size: 12px;
}

.community-title { font-size: 1.4em; font-weight: 700; text-align: center; margin: 0 0 1rem; }

.image-chip-container { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
.image-chip {
  display: inline-flex; align-items: center; gap: 8px; height: 28px; padding: 0 12px; border-radius: 10px;
  background: var(--ec-blue); color: #fff; cursor: pointer;
  box-shadow: 0 10px 24px -12px rgba(37,99,235,.55);
}
.image-chip .filename { font-size: 12px; }
.image-chip .remove { font-weight: 700; }

.image-preview-dialog {
  position: fixed; inset: 0; background: rgba(0,0,0,.7);
  display: flex; align-items: center; justify-content: center; z-index: 9999;
}
.image-preview-dialog img { max-width: 80%; max-height: 80%; object-fit: contain; }

.close-button {
  position: fixed; right: 20px; top: 20px; width: 36px; height: 36px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 12px; background: var(--ec-surface-2); border: 1px solid var(--ec-border);
  color: var(--fg); box-shadow: var(--ec-shadow-1); cursor: pointer; z-index: 1000;
}
.close-button:hover { background: rgba(255,255,255,.10); transform: translateY(-1px); }

@media (max-width: 900px) {
  .gettingStartedCategoriesContainer {
    grid-template-columns: 1fr;
    grid-template-areas:
      "header"
      "prompt"
      "tabs"
      "community"
      "footer";
  }
  .controller-wrapper { position: static; margin-top: 8px; }
}

.nextui-button .button-icon,
.tabs .controller-wrapper .monaco-button .tab-icon {
  width: 16px;
  height: 16px;
  display: inline-block;
  background-size: 16px 16px;
  background-position: center;
  background-repeat: no-repeat;
}

/* NEW: button icons */
.image-button .button-icon {
  /* paperclip (white) */
  background-image: url("data:image/svg+xml;utf8,\
  <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'>\
    <path d='M21.44 11.05l-9.19 9.19a6 6 0 0 1-8.49-8.49l10-10a4 4 0 1 1 5.66 5.66L9.41 17.82a2 2 0 1 1-2.83-2.83L15.17 6.4'/>\
  </svg>");
  opacity: .9;
}
.send-button .button-icon {
  /* arrow-right (white) */
  background-image: url("data:image/svg+xml;utf8,\
  <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'>\
    <line x1='5' y1='12' x2='19' y2='12'/>\
    <polyline points='12 5 19 12 12 19'/>\
  </svg>");
}

/* NEW: tab icons */
.tabs .controller-wrapper .monaco-button { display: inline-flex; align-items: center; gap: 6px; }

/* globe for Community */
.community-button .tab-icon {
  background-image: url("data:image/svg+xml;utf8,\
  <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23bbb' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'>\
    <circle cx='12' cy='12' r='10'/><path d='M2 12h20'/>\
    <path d='M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10'/>\
    <path d='M12 2a15.3 15.3 0 0 0-4 10 15.3 15.3 0 0 0 4 10'/>\
  </svg>");
}
.recent-button .tab-icon {
  /* clock */
  background-image: url("data:image/svg+xml;utf8,\
  <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23bbb' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'>\
    <circle cx='12' cy='12' r='10'/><polyline points='12 6 12 12 16 14'/>\
  </svg>");
}
.open-button .tab-icon {
  /* folder-open */
  background-image: url("data:image/svg+xml;utf8,\
  <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23bbb' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'>\
    <path d='M3 20h18a2 2 0 0 0 2-2v-7a2 2 0 0 0-2-2h-7.59a2 2 0 0 1-1.41-.59L9.59 6A2 2 0 0 0 8.17 5H3a2 2 0 0 0-2 2v11a2 2 0 0 0 2 2z'/>\
  </svg>");
}

/* active tab uses white icons */
.tabs .controller-wrapper .monaco-button.active .tab-icon {
  filter: brightness(0) invert(1);
}

.nextui-button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: auto; /* still allow hover so tooltip shows */
}

.loading-overlay {
  position: fixed;
  inset: 0;
  background: rgba(15, 17, 21, 0.9); /* darkened backdrop */
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 99999;
}

.spinner {
  width: 60px;
  height: 60px;
  border: 6px solid rgba(255,255,255,0.2);
  border-top-color: #2563EB; /* EasyCode blue */
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

.header, 
.prompt, 
.tabs {
  justify-self: center;
}

.gettingStartedCategoriesContainer {
  align-content: center; /* vertical centering of top sections */
}

/* ===== Auth popup (solid card + EC blue/purple buttons) ===== */

.auth-overlay{
  position:fixed; inset:0;
  background: rgba(10, 12, 18, 0.85);       /* darker, less transparent */
  backdrop-filter: blur(6px);                /* nice glassy backdrop */
  -webkit-backdrop-filter: blur(6px);
  display:flex; align-items:center; justify-content:center;
  z-index:100000;
}

.auth-modal{
  width:100%; max-width:420px;
  background:#12161f;                        /* solid card (no alpha) */
  color:var(--fg);
  border:1px solid var(--ec-border-strong);  /* subtle blue border */
  border-radius:16px;
  padding:20px;
  box-shadow: 0 18px 36px -22px rgba(0,0,0,.60), 0 2px 0 rgba(255,255,255,.03) inset;
}

.auth-title{margin:0 0 6px; font-size:20px; font-weight:800}
.auth-sub{margin:0 0 16px; color:var(--desc)}

.auth-actions{display:flex; flex-direction:column; gap:10px}

/* Base button */
.auth-btn{
  display:flex; align-items:center; gap:10px; width:100%;
  border-radius:12px; padding:12px 16px; cursor:pointer;
  border:1px solid var(--ec-border);
  background:#171b25;                        /* solid neutral */
  color:var(--fg);
  transition:transform .15s ease, filter .15s ease, background .15s ease, box-shadow .15s ease;
}
.auth-btn:hover{ transform: translateY(-1px); background:#1b2130; }

/* Primary (first) – gradient blue→purple */
.auth-actions .auth-btn:first-child{
  border:0;
  color:#fff;
  background: linear-gradient(135deg, var(--ec-blue) 0%, var(--ec-purple) 100%);
  box-shadow:
    0 14px 28px -16px rgba(37,99,235,.45),
    0 10px 24px -18px rgba(147,51,234,.40);
}
.auth-actions .auth-btn:first-child:hover{
  filter: brightness(1.04);
}

/* Secondary (GitHub) – tinted with EC border */
.auth-actions .auth-btn:last-child{
  background: rgba(255,255,255,0.06);
  border:1px solid var(--ec-border-strong);
}
.auth-actions .auth-btn:last-child:hover{
  background: rgba(255,255,255,0.09);
}

.auth-actions .auth-btn { gap: 12px; }

/* Icons as white so they pop on gradient/ dark */
.auth-ico{ width:18px; height:18px; background-size:contain; background-repeat:no-repeat; display:inline-block }
.auth-ico.g{
  width:20px;
  height:20px;
  border-radius:9999px;
  background-color:#fff;                     /* white puck */
  box-shadow:0 1px 0 rgba(0,0,0,.15) inset;
  background-repeat:no-repeat;
  background-position:center;
  background-size:72% 72%;
  /* Official multicolor G */
  background-image:url("data:image/svg+xml;utf8,\
  <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18'>\
    <path fill='%23EA4335' d='M9 3.48c1.69 0 2.82.73 3.47 1.34l2.36-2.36C13.45.89 11.37 0 9 0 5.48 0 2.44 2.02 1.12 4.96l2.77 2.16C4.41 5.16 6.5 3.48 9 3.48z'/>\
    <path fill='%234285F4' d='M17.64 9.2c0-.74-.07-1.27-.2-1.82H9v3.31h4.9c-.1.83-.53 2.07-1.53 2.89l2.35 1.82C16.65 13.99 17.64 11.8 17.64 9.2z'/>\
    <path fill='%23FBBC05' d='M3.88 10.86A5.78 5.78 0 0 1 3.5 9c0-.64.11-1.26.31-1.86L1.12 4.97A8.96 8.96 0 0 0 0 9c0 1.46.35 2.82.97 4.03l2.91-2.17z'/>\
    <path fill='%2334A853' d='M9 18c2.37 0 4.36-.78 5.81-2.12l-2.83-2.2c-.76.55-1.78.94-2.98.94-2.3 0-4.25-1.56-4.95-3.67L1 13.03C2.34 16.02 5.42 18 9 18z'/>\
  </svg>");
}
.auth-ico.gh{
  background-image:url("data:image/svg+xml;utf8,\
  <svg xmlns='http://www.w3.org/2000/svg' viewBox='2 2 20 20'><path fill='%23fff' d='M12 2.5a9.5 9.5 0 0 0-3 18.5c.5.1.7-.2.7-.5v-1.8c-2.8.6-3.5-1.2-3.5-1.2-.5-1.1-1.2-1.4-1.2-1.4-1-.7.1-.7.1-.7 1.2.1 1.8 1.2 1.8 1.2 1 1.8 2.8 1.3 3.5 1 .1-.8.4-1.3.7-1.6-2.2-.3-4.6-1.1-4.6-4.9 0-1.1.4-2 .9-2.7 0-.2-.4-1.3.1-2.7 0 0 .9-.3 2.9 1.1a10.1 10.1 0 0 1 5.2 0c2-1.4 2.9-1.1 2.9-1.1.5 1.4.2 2.5.1 2.7.6.7.9 1.6.9 2.7 0 3.9-2.4 4.5-4.6 4.8.4.4.8 1 .8 2.1v3.1c0 .3.2.6.7.5a9.5 9.5 0 0 0-3-18.5z'/></svg>");
}

/* Cancel button */
.auth-footer{margin-top:12px; display:flex; justify-content:flex-end}
.auth-cancel{
  background:transparent;
  border:1px solid var(--ec-border);
  color:var(--fg);
  border-radius:10px; padding:8px 12px; cursor:pointer;
}
.auth-cancel:hover{ background: rgba(255,255,255,0.08); }

/* Accessible focus rings */
.auth-btn:focus-visible, .auth-cancel:focus-visible{
  outline: 2px solid var(--ec-blue);
  outline-offset: 2px;
}