/* BeatBooth brand layer: bold color so every action is easy to spot. */

:root {
  --brand: linear-gradient(135deg, #ff3355 0%, #ff2e93 100%);
  --brand-glow: 0 14px 34px -12px rgba(255, 46, 120, 0.75);
  --find: linear-gradient(135deg, #fbbf24 0%, #f97316 100%);
  --import: linear-gradient(135deg, #22d3ee 0%, #6366f1 100%);
}

.grad-text {
  background: linear-gradient(90deg, #ff4d6d, #ff2e93 55%, #fbbf24);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}

/* ---- home: the main move is paste link + record ---- */
.hero-btn {
  position: relative; overflow: hidden; width: 100%; min-height: 84px; padding: 14px 18px;
  display: flex; align-items: center; gap: 14px; text-align: left; border-radius: 22px;
  background: var(--brand); color: #fff; box-shadow: var(--brand-glow);
  transition: transform 0.1s ease;
}
.hero-btn:active { transform: scale(0.98); }
.hero-btn::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(110deg, transparent 30%, rgba(255, 255, 255, 0.22) 45%, transparent 60%);
  transform: translateX(-100%); animation: shine 3.6s ease-in-out infinite;
}
@keyframes shine { 0%, 55% { transform: translateX(-100%); } 85%, 100% { transform: translateX(100%); } }
.hero-ic { width: 54px; height: 54px; border-radius: 16px; flex: none; display: grid; place-items: center; background: rgba(255, 255, 255, 0.22); }
.hero-ic .ic { width: 28px; height: 28px; }
.hero-txt { display: flex; flex-direction: column; gap: 3px; }
.hero-txt b { font-size: 20px; font-weight: 850; letter-spacing: -0.01em; }
.hero-txt small { font-size: 13px; opacity: 0.92; font-weight: 600; }

.steps { list-style: none; margin: 2px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.steps li { display: flex; align-items: center; gap: 7px; font-size: 12.5px; font-weight: 700; color: var(--muted); }
.steps i {
  font-style: normal; width: 22px; height: 22px; border-radius: 50%; flex: none; display: grid; place-items: center;
  font-size: 12px; font-weight: 900; color: #fff; background: var(--brand);
}
.steps li:nth-child(1) i { background: var(--find); }
.steps li:nth-child(2) i { background: var(--import); }

.action-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.action-card {
  position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 2px;
  min-height: 104px; padding: 14px; border-radius: 20px; color: #fff; text-decoration: none; text-align: left;
  transition: transform 0.1s ease;
}
.action-card:active { transform: scale(0.97); }
.action-card.find { background: var(--find); box-shadow: 0 12px 28px -14px rgba(249, 115, 22, 0.8); }
.action-card.import { background: var(--import); box-shadow: 0 12px 28px -14px rgba(99, 102, 241, 0.8); }
.ac-ic { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; background: rgba(255, 255, 255, 0.24); margin-bottom: 8px; }
.ac-ic .ic { width: 22px; height: 22px; }
.action-card b { font-size: 16.5px; font-weight: 850; }
.action-card small { font-size: 12.5px; font-weight: 650; opacity: 0.9; }

.chip { color: var(--text); background: var(--panel3); }

/* ---- studio: colored tools ---- */
.tool { color: #c9c9d6; font-weight: 700; }
.tool-ic { width: 40px; height: 30px; border-radius: 10px; display: grid; place-items: center; background: var(--tcbg, rgba(255, 255, 255, 0.08)); }
.tool .ic { color: var(--tc, #fff); width: 20px; height: 20px; }
.tool:disabled .tool-ic { background: rgba(255, 255, 255, 0.05); }
.tool:disabled .ic { color: var(--faint); }
.tool[data-tool="split"] { --tc: #fbbf24; --tcbg: rgba(251, 191, 36, 0.16); }
.tool[data-tool="trash"] { --tc: #ff5c7a; --tcbg: rgba(255, 92, 122, 0.16); }
.tool[data-tool="copy"] { --tc: #60a5fa; --tcbg: rgba(96, 165, 250, 0.16); }
.tool[data-tool="scissors"] { --tc: #c084fc; --tcbg: rgba(192, 132, 252, 0.16); }
.tool[data-tool="paste"] { --tc: #2dd4bf; --tcbg: rgba(45, 212, 191, 0.16); }
.tool[data-tool="duplicate"] { --tc: #4ade80; --tcbg: rgba(74, 222, 128, 0.16); }
.tool[data-tool="fade"] { --tc: #f472b6; --tcbg: rgba(244, 114, 182, 0.16); }
.tool[data-tool="check"] { --tc: #ffffff; --tcbg: rgba(255, 255, 255, 0.14); }
.tool[data-tool="plus"] { --tc: #2dd4bf; --tcbg: rgba(45, 212, 191, 0.16); }
.tool[data-tool="music"] { --tc: #22d3ee; --tcbg: rgba(34, 211, 238, 0.16); }
.tool[data-tool="zoomOut"], .tool[data-tool="zoomIn"] { --tc: #d4d4e0; --tcbg: rgba(255, 255, 255, 0.08); }

#btnExport { background: var(--brand); color: #fff; width: 40px; height: 40px; margin: 0 2px; box-shadow: 0 6px 16px -8px rgba(255, 46, 120, 0.9); }
#btnExport .ic { width: 20px; height: 20px; }

/* ---- menus: icons on colored tiles ---- */
.menu-item > .ic {
  width: 38px; height: 38px; padding: 8px; border-radius: 11px; flex: none;
  background: rgba(255, 255, 255, 0.07); color: #d4d4e0;
}
.menu-item[data-ic="sparkle"] > .ic, .menu-item[data-ic="share"] > .ic { background: var(--brand); color: #fff; }
.menu-item[data-ic="mic"] > .ic { background: rgba(45, 212, 191, 0.18); color: #2dd4bf; }
.menu-item[data-ic="music"] > .ic, .menu-item[data-ic="download"] > .ic { background: rgba(251, 191, 36, 0.18); color: #fbbf24; }
.menu-item[data-ic="wave"] > .ic, .menu-item[data-ic="link"] > .ic { background: rgba(96, 165, 250, 0.18); color: #60a5fa; }
.menu-item[data-ic="edit"] > .ic, .menu-item[data-ic="user"] > .ic { background: rgba(192, 132, 252, 0.18); color: #c084fc; }
.menu-item[data-ic="plus"] > .ic { background: rgba(74, 222, 128, 0.18); color: #4ade80; }
.menu-item.danger > .ic { background: rgba(255, 92, 122, 0.16); color: #ff5c7a; }

/* ---- tabs: the active one glows ---- */
.tab .ic { padding: 3px 14px; width: 52px; height: 30px; border-radius: 99px; box-sizing: border-box; }
.tab[aria-current="page"] .ic { background: rgba(255, 51, 85, 0.16); }
.tab[aria-current="page"] span:not(.tab-badge) { color: var(--text); }

/* ---- Brotha Man stays out of the way ---- */
body.screen-chat .brotha, body.in-studio .brotha { display: none; }
.tabscreen .screen-main, #home .home-main { padding-bottom: 96px; }

/* ---- Brotha Man: easy to read ---- */
.tb-text { font-size: 15.5px; line-height: 1.45; margin: 8px 2px 12px; }
.tb-text b { color: #d61f43; }
.bm-speech b { color: #ff8aa0; }
.tb-title { font-size: 17px; }