@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700;800;900&display=swap');

/*
 * Controlly — visual system inspired by the HisterioDEV workspace.
 * This file intentionally carries no Histerio branding or imagery.
 */
:root {
  --bg-solid: #101114;
  --bg-darker: #0b0c0f;
  --card: rgba(24, 24, 27, .82);
  --card-solid: #18181b;
  --card-border: rgba(255, 255, 255, .10);
  --foreground: #fff;
  --accent: #4b9efe;
  --accent-dim: #1d4ed8;
  --accent-glow: rgba(75, 158, 254, .22);
  --accent-400: #72b3ff;
  --accent-500: #4b9efe;
  --accent-600: #287de5;
  --accent-700: #1d4ed8;
  --muted: #a1a1aa;
  --muted2: #71717a;
  --glass: rgba(24, 24, 27, .78);
  --glass-border: rgba(255, 255, 255, .10);
  --glass-strong: rgba(24, 24, 27, .97);
  --hover: rgba(255, 255, 255, .08);
  --border: rgba(255, 255, 255, .10);
  --border2: rgba(255, 255, 255, .14);
  --border3: rgba(75, 158, 254, .24);
  --border4: rgba(75, 158, 254, .45);
  --scrollbar-thumb: #4b9efe;
  --scrollbar-thumb-hover: #72b3ff;
  --r-sm: 6px;
  --r-md: 8px;
  --r-lg: 12px;
  --r-xl: 16px;
  --r-2xl: 18px;
  --sidebar-w: 260px;
  --sh-sm: 0 2px 8px rgba(0, 0, 0, .24);
  --sh-md: 0 18px 45px rgba(0, 0, 0, .25);
  --sh-lg: 0 28px 70px rgba(0, 0, 0, .55);
}

*, *::before, *::after { scrollbar-width: thin; scrollbar-color: var(--accent) rgba(255, 255, 255, .04); }
*::-webkit-scrollbar { width: 9px; height: 9px; }
*::-webkit-scrollbar-track { background: rgba(0, 0, 0, .22); }
*::-webkit-scrollbar-thumb { border: 2px solid #101114; border-radius: 999px; background: var(--accent); }

body {
  font-family: 'Montserrat', 'Segoe UI', system-ui, sans-serif;
  background:
    linear-gradient(180deg, rgba(16, 17, 20, .34), rgba(16, 17, 20, .96)),
    radial-gradient(circle at 12% 6%, rgba(75, 158, 254, .14), transparent 30%),
    radial-gradient(circle at 88% 12%, rgba(39, 39, 42, .75), transparent 35%),
    #101114;
  color: #fff;
}

body::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: .32;
  background-image:
    linear-gradient(rgba(255,255,255,.018) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.018) 1px, transparent 1px);
  background-size: 44px 44px;
  mask-image: linear-gradient(to bottom, black, transparent 72%);
}

::selection { background: var(--accent); color: #020617; }
button, input, textarea, select { font-family: inherit; }

/* Shared typography */
.page-title,
.features-title,
.landing-title,
.admin-v2-profile-title h2,
.admin-v2-panel-head h3,
.modal h3,
.cmodal-title,
.section-title {
  font-family: 'Montserrat', sans-serif;
  font-weight: 900;
}

.page-title,
.section-title,
.admin-v2-panel-head h3 {
  text-transform: uppercase;
  letter-spacing: .035em;
}

.page-title { font-size: clamp(22px, 2.2vw, 34px); line-height: 1; }
.page-sub { margin-top: 8px; color: #b7b7c0; font-weight: 500; line-height: 1.65; }
.page-head { align-items: center; padding: 6px 0 26px; }
.page-icon {
  width: 52px;
  height: 52px;
  border: 1px solid rgba(75, 158, 254, .28);
  border-radius: 12px;
  color: var(--accent);
  background: rgba(0, 0, 0, .28);
  box-shadow: 0 0 24px rgba(75, 158, 254, .10);
}

/* Dashboard frame */
#app { isolation: isolate; }
.sidebar {
  width: var(--sidebar-w);
  min-width: var(--sidebar-w);
  background: rgba(8, 9, 11, .78);
  border-right: 1px solid rgba(255, 255, 255, .10);
  backdrop-filter: blur(18px);
  box-shadow: 18px 0 45px rgba(0, 0, 0, .16);
}

.sidebar-logo {
  min-height: 78px;
  padding: 12px 20px;
  border-bottom-color: rgba(255, 255, 255, .10);
  background: rgba(0, 0, 0, .12);
}
.sidebar-logo img { width: 48px; height: 48px; transition: transform 180ms ease; }
.sidebar-logo:hover img { transform: scale(1.06); }
.sidebar-guild { padding: 16px; border-bottom-color: rgba(255,255,255,.08); }
.sidebar-guild-label,
.nav-group-label {
  color: #71717a;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .14em;
}
.sidebar-nav { padding: 12px 10px; }
.nav-group { margin-bottom: 18px; }
.nav-group-label { padding: 8px 10px 7px; }
.nav-item {
  min-height: 42px;
  padding: 9px 12px;
  border: 1px solid transparent;
  border-left: 1px solid transparent;
  border-radius: 7px;
  color: #a1a1aa;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .055em;
  text-transform: uppercase;
}
.nav-item:hover { background: rgba(255,255,255,.07); border-color: rgba(255,255,255,.07); color: #fff; }
.nav-item.active {
  background: rgba(75, 158, 254, .12) !important;
  border-color: rgba(75, 158, 254, .28) !important;
  border-left: 3px solid var(--accent) !important;
  color: #fff !important;
  box-shadow: inset 0 0 20px rgba(75,158,254,.05) !important;
}
.nav-item-icon { color: var(--accent-400); }
.sidebar-footer { padding: 10px; border-top-color: rgba(255,255,255,.10); background: rgba(0,0,0,.13); }
.bot-switcher { border-radius: 10px; border-color: rgba(255,255,255,.10); background: rgba(255,255,255,.035); }
.sidebar-bot-avatar { border-radius: 9px; background: var(--accent); color: #07111f; }
.sidebar-footer-btn { border-radius: 7px; font-size: 10px; font-weight: 900; text-transform: uppercase; letter-spacing: .05em; }

.app-body { position: relative; }
.main { padding: 34px clamp(22px, 3vw, 54px) 64px; }
.main > .page, .main > .page-empty, .main > .module-shell { max-width: 1440px; }
.page { animation: histerioPageIn .34s ease both !important; }
@keyframes histerioPageIn { from { opacity: 0; transform: translateY(8px); } }

/* Panels and cards */
.section,
.btn-card,
.list-item,
.settings-invite-row,
.block,
.admin-v2-stat,
.admin-v2-panel,
.admin-v2-profile,
.admin-stat-card,
.discord-profile-card,
.admin-container .panel,
.admin-container .section {
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(24, 24, 27, .78);
  backdrop-filter: blur(14px);
  box-shadow: 0 18px 45px rgba(0,0,0,.25);
}
.section { border-radius: 16px; margin-bottom: 18px; overflow: hidden; }
.section:hover,
.btn-card:hover,
.list-item:hover,
.admin-v2-panel:hover { border-color: rgba(75,158,254,.34); }
.section-title {
  min-height: 56px;
  padding: 16px 20px;
  border-bottom: 1px solid rgba(255,255,255,.08);
  background: rgba(0,0,0,.16);
  color: #fff;
  font-size: 12px;
}
.section-title svg { color: var(--accent); }
.section-body { padding: 20px; gap: 18px; }
.list-item, .btn-card, .block, .settings-invite-row { border-radius: 12px; background: rgba(2,6,23,.24); }
.list-item:hover, .btn-card:hover { transform: translateY(-1px); background: rgba(36,36,36,.92); }

/* Controls */
input:not([type='checkbox']):not([type='radio']),
textarea,
select,
.sel,
.c-select-trigger,
.admin-search-input,
.cmodal-input {
  min-height: 44px;
  border: 1px solid rgba(255,255,255,.11) !important;
  border-radius: 8px !important;
  background: rgba(0,0,0,.30) !important;
  color: #fff !important;
  font-weight: 600;
  outline: none;
  box-shadow: none !important;
  transition: border-color 160ms ease, background 160ms ease, box-shadow 160ms ease;
}
input::placeholder, textarea::placeholder { color: #71717a; }
input:not([type='checkbox']):not([type='radio']):hover,
textarea:hover, select:hover, .c-select-trigger:hover { border-color: rgba(255,255,255,.22) !important; }
input:not([type='checkbox']):not([type='radio']):focus,
textarea:focus, select:focus, .c-select.open .c-select-trigger {
  border-color: var(--accent) !important;
  background: rgba(0,0,0,.42) !important;
  box-shadow: 0 0 0 2px rgba(75,158,254,.22) !important;
}
.c-select-menu, .menu, .mention-suggest {
  border: 1px solid rgba(75,158,254,.34);
  border-radius: 12px;
  background: rgba(24,24,27,.98);
  box-shadow: 0 28px 70px rgba(0,0,0,.64);
}
.c-select-item, .menu-item { min-height: 40px; border-radius: 7px; font-weight: 700; }
.c-select-item:hover, .c-select-item.active, .menu-item:hover { background: var(--accent); color: #07111f; }

.btn {
  min-height: 42px;
  padding: 0 16px;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 8px;
  background: rgba(255,255,255,.06);
  color: #fff;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .045em;
  text-transform: uppercase;
  box-shadow: none;
}
.btn:hover { border-color: rgba(255,255,255,.25); background: rgba(255,255,255,.12); transform: translateY(-1px); }
.btn.primary {
  border-color: rgba(255,255,255,.18);
  border-bottom: 4px solid var(--accent-dim);
  background: var(--accent);
  color: #07111f;
  box-shadow: 0 0 25px rgba(75,158,254,.22);
}
.btn.primary:hover { border-bottom-width: 2px; background: #62aaff; color: #020617; transform: translateY(2px); }
.btn.sm { min-height: 34px; padding: 0 12px; border-radius: 7px; font-size: 10px; }
.btn.icon { min-width: 42px; padding: 0; justify-content: center; }
.btn.ghost { background: transparent; }
.btn.danger { border-color: rgba(239,68,68,.24); background: rgba(239,68,68,.10); color: #fecaca; }
.btn.success { border-color: rgba(34,197,94,.25); background: rgba(34,197,94,.11); color: #bbf7d0; }
.switch-slider { background: rgba(0,0,0,.42); border-color: rgba(255,255,255,.13); }
.switch input:checked + .switch-slider { background: var(--accent); border-color: var(--accent); }
.switch input:checked + .switch-slider::before { background: #07111f; }
.chip, .pill { border-radius: 7px; background: rgba(75,158,254,.08); border-color: rgba(75,158,254,.20); color: #dbeafe; }

/* Landing */
#landingLayout {
  font-family: 'Montserrat', sans-serif;
  background:
    linear-gradient(180deg, rgba(16,17,20,.16), rgba(16,17,20,.98)),
    radial-gradient(circle at 50% 12%, rgba(75,158,254,.16), transparent 34%),
    #101114;
}
.landing-header {
  height: 78px;
  padding: 0 clamp(20px, 3vw, 48px);
  border-bottom: 1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.30);
  backdrop-filter: blur(14px);
}
.landing-logo img { width: 48px; height: 48px; border-radius: 0; }
.landing-nav { gap: 4px; }
.landing-nav-link,
#btnLandingLogin {
  border-radius: 5px;
  padding: 10px 14px;
  color: rgba(255,255,255,.70);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .07em;
  text-transform: uppercase;
}
.landing-nav-link:hover, .landing-nav-link.active { background: rgba(255,255,255,.10); color: #fff; }
#btnLandingLogin { min-height: 42px; border: 1px solid rgba(255,255,255,.12); background: rgba(255,255,255,.05); color: #fff; }
#btnLandingLogin:hover { border-color: rgba(75,158,254,.45); background: rgba(75,158,254,.13); }
.landing-hero { min-height: calc(100vh - 78px); padding: 90px 24px 110px; }
.landing-hero::before {
  content: 'CONTROL CENTER';
  display: inline-flex;
  margin-bottom: 22px;
  border: 2px solid rgba(255,255,255,.20);
  border-radius: 4px;
  padding: 8px 12px;
  background: var(--accent);
  color: #07111f;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .09em;
  transform: rotate(-1deg);
  box-shadow: 0 0 30px rgba(75,158,254,.22);
}
.landing-title {
  max-width: 1100px;
  margin: 0 auto;
  font-size: clamp(46px, 7vw, 92px);
  font-weight: 900;
  letter-spacing: -.045em;
  line-height: .98;
  text-transform: uppercase;
  text-shadow: 0 12px 34px rgba(0,0,0,.52);
}
.landing-title .highlight, .features-title .highlight { color: var(--accent); -webkit-text-fill-color: var(--accent); background: none; }
.landing-desc { max-width: 780px; margin: 28px auto 0; color: #d4d4d8; font-size: 15px; font-weight: 500; line-height: 1.8; }
.scroll-text { font-weight: 900; letter-spacing: .12em; text-transform: uppercase; }
.landing-features { padding: 90px clamp(20px, 4vw, 72px); background: rgba(8,9,11,.42); border-top: 1px solid rgba(255,255,255,.08); }
.features-title { max-width: 1050px; font-size: clamp(32px, 4.5vw, 64px); line-height: 1.02; text-transform: uppercase; }
#landingLayout .controlly-card,
.feature-card {
  border: 1px solid rgba(255,255,255,.10) !important;
  border-radius: 16px !important;
  background: rgba(24,24,27,.78) !important;
  backdrop-filter: blur(14px);
  box-shadow: 0 18px 45px rgba(0,0,0,.25) !important;
}
#landingLayout .controlly-card:hover { border-color: rgba(75,158,254,.48) !important; background: rgba(36,36,36,.93) !important; transform: translateY(-2px) !important; }
.feature-card-foot strong { font-weight: 900; text-transform: uppercase; letter-spacing: .025em; }

/* Admin */
#adminLayout { font-family: 'Montserrat', sans-serif; background: transparent; }
.admin-header {
  height: 78px;
  padding: 0 clamp(18px, 3vw, 48px);
  border-bottom: 1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.30);
  backdrop-filter: blur(14px);
}
.admin-logo img { width: 48px; height: 48px; }
.admin-body { padding: 42px clamp(18px, 4vw, 64px); }
.admin-content { max-width: 1440px; }
.admin-tab-btn {
  min-height: 40px;
  border: 1px solid transparent;
  border-radius: 6px;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .07em;
  text-transform: uppercase;
}
.admin-tab-btn.active { border-color: rgba(75,158,254,.26); background: rgba(75,158,254,.13); color: #fff; }
.admin-v2-stats { gap: 16px; }
.admin-v2-stat { border-radius: 14px; }
.admin-v2-stat strong { font-size: 34px; font-weight: 900; }
.admin-v2-stat span { color: #a1a1aa; font-weight: 900; }
.admin-v2-stat-icon { border: 1px solid rgba(75,158,254,.25); border-radius: 10px; background: rgba(75,158,254,.10); color: var(--accent); }
.admin-v2-panel, .admin-v2-profile { border-radius: 16px; }
.admin-v2-user { border-radius: 9px; background: rgba(0,0,0,.20); }
.admin-v2-user:hover, .admin-v2-user.active { border-color: rgba(75,158,254,.44); background: rgba(75,158,254,.11); }
.admin-table th { color: #a1a1aa; font-weight: 900; letter-spacing: .08em; }

/* Dialogs, login and notifications */
.modal-backdrop, .modal-overlay, .cmodal-overlay, .login-overlay { background: rgba(0,0,0,.72); backdrop-filter: blur(8px); }
.modal, .cmodal, .login-modal {
  border: 1px solid rgba(75,158,254,.28);
  border-radius: 16px;
  background: rgba(24,24,27,.97);
  box-shadow: 0 28px 70px rgba(0,0,0,.68);
}
.modal-head, .cmodal-head { background: rgba(0,0,0,.14); }
.modal h3, .cmodal-title, .login-modal h1 { text-transform: uppercase; letter-spacing: .035em; }
.login-modal img { width: 92px; height: 92px; filter: drop-shadow(0 0 24px rgba(75,158,254,.22)); }
.toast { border-radius: 10px; background: rgba(24,24,27,.96); border-color: rgba(255,255,255,.13); box-shadow: 0 18px 45px rgba(0,0,0,.38); font-weight: 700; }

/* Hook Builder */
body.hook-standalone { background: #101114 !important; }
.hook-standalone .topbar {
  background: rgba(0,0,0,.30) !important;
  border-bottom-color: rgba(255,255,255,.10) !important;
  backdrop-filter: blur(14px);
}
.hook-standalone .logo-img { width: 46px; height: 46px; border: 0; border-radius: 0; box-shadow: none; }
.hook-standalone .brand-name { font-weight: 900; letter-spacing: .04em; text-transform: uppercase; }
.hook-standalone .panel { background: rgba(24,24,27,.72) !important; border-color: rgba(255,255,255,.10) !important; }
.hook-standalone .panel.center { background: rgba(11,12,15,.72) !important; }
.hook-standalone .panel-head, .hook-standalone .preview-head {
  background: rgba(0,0,0,.18);
  color: #a1a1aa;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.hook-standalone .block { background: rgba(2,6,23,.26); }
.hook-standalone .mode-switch { border-radius: 8px; border-color: rgba(255,255,255,.12); background: rgba(255,255,255,.04); }
.hook-standalone .mode-switch button { font-size: 10px; font-weight: 900; letter-spacing: .05em; text-transform: uppercase; }
.hook-standalone .mode-switch button.active { background: var(--accent); color: #07111f; }
.hook-standalone .btn.primary { background: var(--accent) !important; border-color: rgba(255,255,255,.18) !important; border-bottom-color: var(--accent-dim) !important; color: #07111f !important; }

/* Responsive */
@media (max-width: 900px) {
  :root { --sidebar-w: 220px; }
  .main { padding: 26px 18px 46px; }
  .landing-title { font-size: clamp(40px, 10vw, 68px); }
  .landing-header { padding-inline: 18px; }
  .landing-nav { display: none; }
  .admin-body { padding: 28px 16px; }
}

@media (max-width: 680px) {
  :root { --sidebar-w: 72px; }
  .sidebar-guild, .nav-group-label, .nav-item-label, .sidebar-bot-info, .sidebar-footer-btn { font-size: 0; }
  .sidebar-logo { padding-inline: 10px; }
  .sidebar-nav { padding-inline: 8px; }
  .nav-item { justify-content: center; padding-inline: 8px; }
  .landing-hero { padding-top: 72px; }
  .landing-desc { font-size: 13px; }
  .page-head { align-items: flex-start; }
  .page-actions { flex-wrap: wrap; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; transition-duration: .01ms !important; }
}