:root {
   --base: #020c0e;
   --surface: #051518;
   --orange: #f97316;
   --purple: #8b5cf6;
   --text: #f8fafc;
   --sec: #94a3b8;
   --border: rgba(255, 255, 255, .09)
}

.referral-share-box{display:grid;gap:8px;width:min(100%,340px)}.referral-share-box input{width:100%;min-width:0;padding:10px 12px;border:1px solid rgba(249,115,22,.35);border-radius:8px;background:rgba(255,255,255,.06);color:inherit;font-size:11px}.referral-share-box .task-action-button{width:100%}

* {
   box-sizing: border-box;
   margin: 0;
   padding: 0
}

body {
   background: var(--base);
   color: var(--text);
   font-family: Manrope, sans-serif;
   overflow-x: hidden
}

a {
   color: inherit;
   text-decoration: none
}

.wrap,
.blk {
   max-width: 1400px;
   margin: auto;
   padding-left: 24px;
   padding-right: 24px
}

.grain {
   position: fixed;
   inset: 0;
   pointer-events: none;
   opacity: .035;
   z-index: 999;
   background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")
}

.nav {
   position: fixed;
   inset: 0 0 auto;
   z-index: 50;
   background: rgba(5, 21, 24, .75);
   backdrop-filter: blur(18px);
   border-bottom: 1px solid var(--border)
}

.nav-inner {
   height: 72px;
   display: flex;
   align-items: center;
   justify-content: space-between
}

.logo {
   font-weight: 900;
   display: flex;
   align-items: center;
   gap: 8px
}

.yt {
   background: var(--orange);
   color: #020c0e;
   padding: 7px;
   border-radius: 5px
}

.dot,
.orange {
   color: var(--orange)
}

.purple {
   color: var(--purple)
}

.nav-links,
.nav-actions {
   display: flex;
   gap: 24px;
   align-items: center
}

.nav-links a,
.linkbtn {
   font: 11px 'JetBrains Mono';
   text-transform: uppercase;
   letter-spacing: .15em;
   color: var(--sec)
}

.linkbtn {
   background: none;
   border: 0;
   cursor: pointer
}

.cta,
.btn,
.sub,
.send {
   border: 0;
   cursor: pointer;
   font: 600 11px 'JetBrains Mono';
   text-transform: uppercase;
   letter-spacing: .12em
}

.cta {
   background: var(--text);
   color: #020c0e;
   padding: 10px 18px;
   border-radius: 99px
}

.hero {
   min-height: 100vh;
   padding-top: 120px;
   display: flex;
   align-items: center
}

.hero-grid {
   display: grid;
   grid-template-columns: 7fr 5fr;
   gap: 45px;
   align-items: center
}

.hero-title {
   font-size: 8vw;
   line-height: .88;
   text-transform: uppercase
}

.hero-title span {
   display: block
}

.hero-p {
   color: var(--sec);
   font-size: 18px;
   line-height: 1.65;
   max-width: 600px;
   margin-top: 30px
}

.hero-actions {
   display: flex;
   gap: 14px;
   margin-top: 35px
}

.btn {
   padding: 15px 24px;
   border-radius: 99px
}

.btn-orange {
   background: var(--orange);
   color: #020c0e
}

.btn-ghost {
   border: 1px solid var(--border)
}

.portrait {
   aspect-ratio: 4/5;
   overflow: hidden;
   border: 1px solid var(--border)
}

.portrait img {
   width: 100%;
   height: 100%;
   object-fit: cover
}

.stats {
   border-block: 1px solid var(--border)
}

.stats-grid {
   max-width: 1400px;
   margin: auto;
   display: grid;
   grid-template-columns: repeat(4, 1fr)
}

.stat {
   padding: 45px 24px;
   border-right: 1px solid var(--border)
}

.num,
.metric b {
   font-size: 45px;
   font-weight: 900
}

.lbl,
.metric span,
.eyebrow,
.muted,
small {
   color: var(--sec)
}

.lbl,
.eyebrow {
   font: 11px 'JetBrains Mono';
   text-transform: uppercase;
   letter-spacing: .18em
}

.blk {
   padding-top: 110px;
   padding-bottom: 110px
}

.h2,
.page-hero h1 {
   font-size: 64px;
   text-transform: uppercase;
   line-height: .95
}

.cards,
.metric-grid {
   display: grid;
   grid-template-columns: repeat(3, 1fr);
   gap: 18px;
   margin-top: 45px
}

.cards article,
.panel,
.metric,
.form-card,
.video-placeholder {
   background: rgba(255, 255, 255, .025);
   border: 1px solid var(--border);
   padding: 28px;
   border-radius: 8px
}

.cards p,
.panel p {
   color: var(--sec);
   line-height: 1.6;
   margin-top: 10px
}

.page-hero {
   padding: 150px 0 45px
}

.form-shell {
   max-width: 1400px;
   margin: auto;
   padding: 55px 24px 120px;
   display: grid;
   grid-template-columns: 5fr 7fr;
   gap: 70px
}

.form-card {
   display: flex;
   flex-direction: column;
   gap: 16px
}

.fi,
.copyrow input {
   width: 100%;
   padding: 14px 16px;
   background: transparent;
   border: 1px solid var(--border);
   color: var(--text);
   border-radius: 5px
}

.sub {
   padding: 15px;
   background: var(--orange);
   color: #020c0e;
   border-radius: 5px
}

.send {
   padding: 15px;
   background: var(--text);
   color: #020c0e;
   border-radius: 5px
}

.rules {
   margin-top: 28px;
   display: grid;
   gap: 12px;
   color: var(--sec)
}

.flash {
   position: fixed;
   right: 24px;
   bottom: 24px;
   z-index: 1000;
   padding: 15px 20px;
   background: var(--surface);
   border: 1px solid var(--border);
   border-left: 4px solid var(--purple)
}

.flash.err {
   border-left-color: #ef4444
}

.dash-grid,
.watch-grid,
.admin-grid {
   display: grid;
   grid-template-columns: 3fr 2fr;
   gap: 24px;
   margin-top: 24px
}

.metric-grid {
   grid-template-columns: repeat(4, 1fr);
   margin-top: 0
}

.metric b,
.metric span {
   display: block
}

.task,
.ledger {
   display: flex;
   justify-content: space-between;
   gap: 20px;
   padding: 17px 0;
   border-bottom: 1px solid var(--border)
}

.task small {
   display: block;
   margin-top: 5px
}

.copyrow {
   display: flex;
   gap: 8px;
   margin-top: 15px
}

.copyrow button {
   padding: 0 18px
}

.player-wrap {
   aspect-ratio: 16/9;
   background: #000
}

.player-wrap>div {
   width: 100%;
   height: 100%
}

.progress {
   height: 8px;
   background: rgba(255, 255, 255, .08);
   margin-top: 14px;
   border-radius: 99px;
   overflow: hidden
}

.progress div {
   height: 100%;
   background: linear-gradient(90deg, var(--purple), var(--orange))
}

.locked {
   opacity: .35;
   pointer-events: none
}

.answer {
   display: block;
   padding: 8px 0;
   color: var(--sec)
}

fieldset {
   border: 0;
   border-bottom: 1px solid var(--border);
   padding: 18px 0
}

footer {
   border-top: 1px solid var(--border)
}

.news,
.fbar {
   max-width: 1400px;
   margin: auto;
   padding: 55px 24px;
   display: flex;
   justify-content: space-between;
   gap: 30px;
   align-items: center
}

.news form {
   display: flex
}

.news input {
   padding: 14px;
   background: transparent;
   border: 1px solid var(--border);
   color: white
}

.news button {
   background: var(--orange);
   border: 0;
   padding: 14px 22px
}

@media(max-width:800px) {
   .nav-links {
      display: none
   }

   .hero-grid,
   .form-shell,
   .dash-grid,
   .watch-grid,
   .admin-grid {
      grid-template-columns: 1fr
   }

   .hero-title {
      font-size: 16vw
   }

   .stats-grid,
   .metric-grid,
   .cards {
      grid-template-columns: 1fr 1fr
   }

   .portrait {
      max-height: 520px
   }

   .h2,
   .page-hero h1 {
      font-size: 45px
   }

   .news,
   .fbar {
      align-items: flex-start;
      flex-direction: column
   }
}

@media(max-width:500px) {

   .stats-grid,
   .metric-grid,
   .cards {
      grid-template-columns: 1fr
   }

   .nav-actions form {
      display: none
   }

   .num,
   .metric b {
      font-size: 34px
   }
}

/* ===== Campaign Platform V2 ===== */
:root {
   --gold: #fbbf24;
   --danger: #ef4444
}

.section-head {
   display: flex;
   justify-content: space-between;
   align-items: end;
   gap: 20px;
   margin-bottom: 28px
}

.mono-link {
   font-family: 'JetBrains Mono';
   font-size: 12px;
   color: var(--orange)
}

.muted {
   color: var(--text-sec)
}

.compact {
   padding-top: 48px !important
}

.section-title {
   font-family: 'Cabinet Grotesk';
   font-size: 30px;
   margin-bottom: 22px
}

.spaced {
   margin-top: 48px
}

.campaign-grid {
   display: grid;
   grid-template-columns: repeat(3, minmax(0, 1fr));
   gap: 18px
}

.campaign-card {
   position: relative;
   min-height: 230px;
   padding: 28px;
   border: 1px solid var(--border);
   border-radius: 12px;
   background: linear-gradient(145deg, rgba(255, 255, 255, .045), rgba(255, 255, 255, .012));
   display: flex;
   flex-direction: column;
   gap: 14px;
   transition: .3s
}

.campaign-card:hover {
   transform: translateY(-5px);
   border-color: rgba(249, 115, 22, .55)
}

.campaign-card h3 {
   font-family: 'Cabinet Grotesk';
   font-size: 27px
}

.campaign-card p {
   color: var(--text-sec)
}

.campaign-card>span:last-child {
   margin-top: auto;
   color: var(--orange);
   font-family: 'JetBrains Mono';
   font-size: 11px
}

.campaign-status,
.task-type {
   display: inline-flex;
   width: max-content;
   padding: 5px 9px;
   border: 1px solid var(--border);
   border-radius: 99px;
   font-family: 'JetBrains Mono';
   font-size: 9px;
   text-transform: uppercase;
   letter-spacing: .15em;
   color: var(--orange)
}

.countdown {
   font-family: 'JetBrains Mono';
   font-size: 12px;
   color: var(--text)
}

.countdown.large {
   font-size: 22px;
   color: var(--orange);
   margin-top: 18px
}

.popular-section {
   overflow: hidden
}

.slider-controls {
   display: flex;
   gap: 8px
}

.slider-controls button {
   width: 42px;
   height: 42px;
   border-radius: 50%;
   border: 1px solid var(--border);
   background: var(--surface);
   color: white
}

.video-carousel {
   display: flex;
   gap: 18px;
   overflow-x: auto;
   scroll-snap-type: x mandatory;
   padding-bottom: 16px;
   scrollbar-width: none
}

.video-carousel::-webkit-scrollbar {
   display: none
}

.popular-video {
   min-width: 330px;
   max-width: 330px;
   scroll-snap-align: start
}

.pv-thumb {
   position: relative;
   aspect-ratio: 16/9;
   border-radius: 10px;
   overflow: hidden;
   background: #000
}

.pv-thumb img {
   width: 100%;
   height: 100%;
   object-fit: cover
}

.pv-play {
   position: absolute;
   inset: 50% auto auto 50%;
   transform: translate(-50%, -50%);
   width: 54px;
   height: 54px;
   border-radius: 50%;
   display: grid;
   place-items: center;
   background: var(--orange);
   color: #020c0e
}

.popular-video h3 {
   margin-top: 13px;
   font-size: 17px;
   line-height: 1.3
}

.popular-video p {
   margin-top: 6px;
   color: var(--text-sec);
   font-family: 'JetBrains Mono';
   font-size: 10px
}

.campaign-hero,
.dashboard-hero {
   padding: 145px 0 60px;
   border-bottom: 1px solid var(--border);
   background: radial-gradient(circle at 80% 20%, rgba(249, 115, 22, .13), transparent 45%)
}

.campaign-hero-grid {
   display: grid;
   grid-template-columns: 1.6fr 1fr;
   gap: 46px;
   align-items: end
}

.campaign-hero h1,
.dashboard-hero h1 {
   font-family: 'Cabinet Grotesk';
   font-size: clamp(48px, 7vw, 94px);
   line-height: .9
}

.campaign-hero p,
.dashboard-hero p {
   color: var(--text-sec);
   margin-top: 20px;
   max-width: 700px
}

.prize-callout {
   margin-top: 24px;
   font-size: 18px
}

.prize-callout strong {
   color: var(--orange)
}

.campaign-summary,
.dashboard-stats {
   display: grid;
   grid-template-columns: repeat(3, 1fr);
   gap: 1px;
   border: 1px solid var(--border);
   background: var(--border);
   border-radius: 10px;
   overflow: hidden
}

.campaign-summary>div,
.dashboard-stats>div {
   padding: 18px;
   background: var(--surface)
}

.campaign-summary small,
.dashboard-stats small,
.challenge-strip small {
   display: block;
   font-family: 'JetBrains Mono';
   font-size: 9px;
   text-transform: uppercase;
   letter-spacing: .15em;
   color: var(--text-sec)
}

.campaign-summary strong,
.dashboard-stats strong {
   display: block;
   margin-top: 8px;
   font-size: 20px
}

.campaign-layout,
.dashboard-grid {
   display: grid;
   grid-template-columns: minmax(0, 1.7fr) minmax(280px, .7fr);
   gap: 32px
}

.task-list {
   display: flex;
   flex-direction: column;
   gap: 14px
}

.task-card {
   display: flex;
   justify-content: space-between;
   gap: 24px;
   padding: 22px;
   border: 1px solid var(--border);
   border-radius: 10px;
   background: rgba(255, 255, 255, .02)
}

.task-card h3 {
   font-size: 19px;
   margin: 10px 0 6px
}

.task-card p {
   color: var(--text-sec);
   line-height: 1.5
}

.task-card a {
   display: inline-block;
   margin-top: 10px;
   color: var(--orange)
}

.task-reward {
   min-width: 150px;
   text-align: right;
   display: flex;
   flex-direction: column;
   gap: 8px;
   align-items: flex-end
}

.task-reward strong {
   color: var(--orange)
}

.task-reward button,
.admin-card button,
.admin-campaign button {
   border: 0;
   background: var(--orange);
   padding: 10px 14px;
   border-radius: 5px;
   font-weight: 700;
   cursor: pointer
}

.task-reward button:disabled {
   background: var(--text-muted);
   color: white
}

.rules-panel,
.account-card,
.lock-card {
   position: sticky;
   top: 100px;
   height: max-content;
   padding: 26px;
   border: 1px solid var(--border);
   border-radius: 10px;
   background: var(--surface)
}

.rules-panel p,
.account-card p {
   margin: 12px 0;
   color: var(--text-sec)
}

.accept {
   display: flex;
   gap: 10px;
   margin: 24px 0;
   font-size: 13px;
   color: var(--text-sec)
}

.full {
   width: 100%;
   justify-content: center
}

.joined-badge {
   margin-top: 24px;
   padding: 14px;
   background: rgba(139, 92, 246, .13);
   border: 1px solid rgba(139, 92, 246, .4);
   border-radius: 6px
}

.winner-grid {
   display: grid;
   grid-template-columns: repeat(4, 1fr);
   gap: 12px
}

.winner-grid article {
   padding: 18px;
   border: 1px solid var(--border);
   border-radius: 8px
}

.winner-grid span {
   display: block;
   color: var(--text-sec);
   margin-top: 8px;
   font-size: 12px
}

.dashboard-hero .wrap {
   display: flex;
   justify-content: space-between;
   align-items: end;
   gap: 30px
}

.dashboard-stats {
   min-width: 430px
}

.dashboard-campaign {
   display: flex;
   justify-content: space-between;
   align-items: center;
   padding: 20px;
   border-bottom: 1px solid var(--border)
}

.dashboard-campaign p {
   color: var(--text-sec);
   margin-top: 5px
}

.dashboard-campaign>strong {
   color: var(--orange)
}

.account-card code {
   display: block;
   overflow-wrap: anywhere;
   margin: 14px 0;
   padding: 10px;
   background: #000;
   border-radius: 4px
}

.winner-modal {
   position: fixed;
   inset: 0;
   z-index: 100000;
   background: rgba(0, 0, 0, .84);
   display: grid;
   place-items: center;
   padding: 20px
}

.winner-modal>div {
   text-align: center;
   padding: 50px;
   max-width: 560px;
   border: 1px solid var(--gold);
   border-radius: 18px;
   background: radial-gradient(circle, rgba(251, 191, 36, .22), #041014 65%);
   box-shadow: 0 0 100px rgba(251, 191, 36, .3)
}

.winner-modal .gold {
   font-family: 'Cabinet Grotesk';
   font-size: clamp(50px, 10vw, 100px);
   font-weight: 900;
   color: var(--gold)
}

.winner-modal button {
   margin-top: 24px;
   padding: 13px 24px;
   background: var(--gold);
   border: 0;
   border-radius: 99px;
   font-weight: 800
}

.admin-grid {
   display: grid;
   grid-template-columns: 1fr 1fr;
   gap: 22px
}

.admin-card,
.admin-campaign {
   padding: 24px;
   border: 1px solid var(--border);
   border-radius: 10px;
   background: var(--surface)
}

.admin-card form,
.admin-campaign form {
   display: flex;
   flex-direction: column;
   gap: 12px;
   margin-top: 18px
}

.admin-card input,
.admin-card textarea,
.admin-card select,
.admin-campaign input,
.admin-campaign textarea,
.admin-campaign select,
.question-row input,
.question-row select {
   width: 100%;
   padding: 12px;
   border: 1px solid var(--border);
   background: #031012;
   color: white;
   border-radius: 5px
}

.question-row {
   margin-top: 14px;
   padding: 15px;
   border: 1px solid var(--border)
}

.admin-campaign {
   margin-bottom: 14px
}

.admin-campaign details {
   margin-top: 12px;
   padding: 12px;
   border-top: 1px solid var(--border)
}

.admin-table>div {
   display: grid;
   grid-template-columns: 2fr 1.5fr 1fr auto;
   gap: 12px;
   padding: 14px;
   border-bottom: 1px solid var(--border)
}

.danger {
   background: var(--danger) !important;
   color: white
}

.challenge-strip {
   position: sticky;
   top: 73px;
   z-index: 35;
   display: grid;
   grid-template-columns: 1.6fr repeat(3, 1fr);
   border-bottom: 1px solid var(--border);
   background: rgba(2, 12, 14, .95);
   backdrop-filter: blur(18px)
}

.challenge-strip>div {
   padding: 13px 20px;
   border-right: 1px solid var(--border)
}

.challenge-strip strong {
   display: block;
   margin-top: 5px
}

.challenge-strip>div:last-child strong {
   color: var(--orange)
}

.challenge-page {
   max-width: 1450px;
   margin: auto;
   padding: 70px 28px 120px
}

.challenge-heading {
   max-width: 850px;
   margin-bottom: 32px
}

.challenge-heading h1 {
   font-family: 'Cabinet Grotesk';
   font-size: clamp(40px, 6vw, 72px)
}

.challenge-heading p {
   color: var(--text-sec);
   margin-top: 14px
}

.challenge-grid {
   display: grid;
   grid-template-columns: minmax(0, 1.7fr) minmax(290px, .7fr);
   gap: 22px
}

.video-frame {
   position: relative;
   width: 100%;
   aspect-ratio: 16/9;
   background: #000;
   border-radius: 10px;
   overflow: hidden
}

.video-frame iframe,
.video-frame #yt-player {
   position: absolute;
   inset: 0;
   width: 100% !important;
   height: 100% !important
}

.verified-progress {
   margin-top: 12px
}

.progress-track {
   height: 9px;
   background: rgba(255, 255, 255, .09);
   border-radius: 99px;
   overflow: hidden
}

.progress-track>div {
   height: 100%;
   background: linear-gradient(90deg, var(--purple), var(--orange));
   transition: width .3s
}

.verified-progress>div:last-child {
   display: flex;
   justify-content: space-between;
   margin-top: 8px;
   color: var(--text-sec);
   font-size: 12px
}

.challenge-panel {
   padding: 24px;
   border: 1px solid var(--border);
   border-radius: 10px;
   background: var(--surface)
}

.reward-box {
   margin: 20px 0;
   padding: 18px;
   border: 1px solid rgba(249, 115, 22, .35);
   border-radius: 8px
}

.reward-box small,
.reward-box span {
   display: block;
   color: var(--text-sec)
}

.reward-box strong {
   display: block;
   color: var(--orange);
   font-size: 22px;
   margin: 6px 0
}

.milestones {
   list-style: none;
   display: flex;
   flex-direction: column;
   gap: 10px;
   margin: 20px 0
}

.milestones li {
   color: var(--text-muted)
}

.milestones li.done {
   color: #22c55e
}

.quiz-shell {
   margin-top: 34px;
   padding: 30px;
   border: 1px solid var(--border);
   border-radius: 12px;
   background: var(--surface)
}

.quiz-top {
   display: flex;
   justify-content: space-between
}

.quiz-step {
   border: 0;
   margin-top: 25px
}

.quiz-step legend {
   font-family: 'JetBrains Mono';
   color: var(--orange);
   font-size: 11px
}

.quiz-step h3 {
   font-size: 23px;
   margin: 15px 0
}

.quiz-step label {
   display: block;
   padding: 13px;
   border: 1px solid var(--border);
   border-radius: 7px;
   margin: 9px 0;
   cursor: pointer
}

.quiz-step label:has(input:checked) {
   border-color: var(--orange);
   background: rgba(249, 115, 22, .08)
}

.quiz-nav {
   display: flex;
   justify-content: space-between;
   margin-top: 20px
}

.quiz-nav button {
   padding: 12px 20px;
   border: 0;
   border-radius: 5px;
   background: var(--orange);
   font-weight: 700
}

.lock-card {
   position: static;
   max-width: 700px;
   margin: auto;
   text-align: center
}

.burger {
   display: none
}

.google-nav {
   min-width: 210px
}

@media(max-width:1000px) {
   .campaign-grid {
      grid-template-columns: repeat(2, 1fr)
   }

   .campaign-hero-grid,
   .campaign-layout,
   .dashboard-grid,
   .challenge-grid,
   .admin-grid {
      grid-template-columns: 1fr
   }

   .rules-panel,
   .account-card {
      position: static
   }

   .dashboard-hero .wrap {
      display: block
   }

   .dashboard-stats {
      min-width: 0;
      margin-top: 28px
   }

   .challenge-strip {
      top: 65px;
      grid-template-columns: 1fr 1fr
   }

   .challenge-strip>div:first-child,
   .challenge-strip>div:last-child {
      grid-column: 1/-1
   }

   .winner-grid {
      grid-template-columns: repeat(2, 1fr)
   }
}

@media(max-width:700px) {
   .nav-inner {
      gap: 10px
   }

   .nav-links {
      position: absolute;
      top: 64px;
      left: 0;
      right: 0;
      display: none !important;
      flex-direction: column;
      background: #031012;
      padding: 20px;
      border-bottom: 1px solid var(--border)
   }

   .nav-links.mobile-open {
      display: flex !important
   }

   .burger {
      display: flex
   }

   .google-nav {
      min-width: 0;
      max-width: 160px;
      overflow: hidden
   }

   .campaign-grid {
      grid-template-columns: 1fr
   }

   .campaign-card {
      min-height: 200px
   }

   .campaign-hero,
   .dashboard-hero {
      padding-top: 115px
   }

   .campaign-summary,
   .dashboard-stats {
      grid-template-columns: 1fr 1fr
   }

   .campaign-summary>div:last-child {
      grid-column: 1/-1
   }

   .task-card {
      display: block
   }

   .task-reward {
      margin-top: 18px;
      align-items: flex-start;
      text-align: left
   }

   .popular-video {
      min-width: 84vw;
      max-width: 84vw
   }

   .challenge-page {
      padding: 45px 15px 90px
   }

   .challenge-strip {
      position: relative;
      top: auto
   }

   .verified-progress>div:last-child {
      display: block
   }

   .verified-progress span {
      display: block;
      margin-top: 4px
   }

   .quiz-shell {
      padding: 20px 14px
   }

   .admin-table>div {
      grid-template-columns: 1fr
   }

   .winner-grid {
      grid-template-columns: 1fr
   }

   .section-head {
      align-items: flex-start
   }

   .slider-controls {
      display: none
   }
}




/* ============================================================
   FORM CLARITY & ACCESSIBILITY UPGRADE
   ============================================================ */
.admin-message-area {
   padding-top: 24px
}

.admin-alert {
   margin-bottom: 14px;
   padding: 14px 16px;
   border: 1px solid var(--border);
   border-radius: 8px;
   background: rgba(255, 255, 255, .03)
}

.admin-alert.success {
   border-color: rgba(34, 197, 94, .45);
   color: #bbf7d0
}

.admin-alert.error {
   border-color: rgba(239, 68, 68, .5);
   color: #fecaca
}

.admin-alert ul {
   margin: 8px 0 0 20px
}

.form-section-heading {
   display: flex;
   justify-content: space-between;
   align-items: flex-start;
   gap: 24px;
   padding-bottom: 18px;
   margin-bottom: 20px;
   border-bottom: 1px solid var(--border)
}

.form-section-heading>p {
   max-width: 390px;
   color: var(--sec);
   line-height: 1.55;
   font-size: 13px
}

.form-section-heading .eyebrow {
   margin-bottom: 7px
}

.field-group {
   display: flex;
   flex-direction: column;
   gap: 7px;
   min-width: 0
}

.field-group label,
.newsletter-field label {
   font-family: 'JetBrains Mono';
   font-size: 10px;
   font-weight: 600;
   text-transform: uppercase;
   letter-spacing: .12em;
   color: #cbd5e1
}

.field-group label span {
   color: var(--orange)
}

.field-group small {
   display: block;
   font-size: 11px;
   line-height: 1.45;
   color: var(--sec)
}

.field-group input,
.field-group textarea,
.field-group select {
   margin: 0 !important
}

.field-group textarea {
   resize: vertical
}

.field-group input:focus,
.field-group textarea:focus,
.field-group select:focus {
   outline: none;
   border-color: var(--orange) !important;
   box-shadow: 0 0 0 3px rgba(249, 115, 22, .09)
}

.input-with-unit {
   display: flex;
   align-items: stretch
}

.input-with-unit input {
   border-radius: 5px 0 0 5px !important
}

.input-with-unit b {
   display: flex;
   align-items: center;
   padding: 0 13px;
   border: 1px solid var(--border);
   border-left: 0;
   border-radius: 0 5px 5px 0;
   background: rgba(255, 255, 255, .05);
   font: 10px 'JetBrains Mono';
   text-transform: uppercase;
   letter-spacing: .09em;
   color: var(--orange);
   white-space: nowrap
}

.choice-panel {
   display: grid;
   gap: 10px;
   padding: 15px;
   border: 1px solid var(--border);
   border-radius: 8px;
   background: rgba(255, 255, 255, .018)
}

.choice-row {
   display: flex !important;
   align-items: flex-start;
   gap: 12px;
   cursor: pointer
}

.choice-row.standalone {
   padding: 15px;
   border: 1px solid var(--border);
   border-radius: 8px
}

.choice-row input {
   width: 17px !important;
   height: 17px;
   margin-top: 2px !important;
   flex: 0 0 auto
}

.choice-row span {
   display: block
}

.choice-row strong {
   display: block;
   font-size: 14px
}

.choice-row small {
   display: block;
   margin-top: 4px;
   color: var(--sec);
   line-height: 1.45
}

.form-primary,
.form-secondary {
   width: 100%;
   padding: 13px 18px !important;
   border: 0;
   border-radius: 6px;
   font-weight: 800;
   cursor: pointer
}

.form-primary {
   background: var(--orange) !important;
   color: #020c0e
}

.form-secondary {
   background: transparent !important;
   color: var(--text) !important;
   border: 1px solid rgba(249, 115, 22, .45) !important
}

.form-secondary:disabled {
   opacity: .4;
   cursor: not-allowed
}

.question-bank-header {
   display: flex;
   justify-content: space-between;
   align-items: center;
   gap: 20px;
   padding: 18px 0 4px;
   border-top: 1px solid var(--border)
}

.question-bank-header h3 {
   font-size: 20px
}

.question-bank-header p {
   color: var(--sec);
   font-size: 12px;
   margin-top: 5px
}

.question-bank-header>span {
   padding: 7px 11px;
   border: 1px solid var(--border);
   border-radius: 99px;
   font: 10px 'JetBrains Mono';
   color: var(--orange);
   white-space: nowrap
}

.question-row {
   border-radius: 9px !important;
   background: rgba(255, 255, 255, .015)
}

.question-row legend {
   width: 100%;
   display: flex;
   justify-content: space-between;
   align-items: end;
   gap: 15px;
   padding: 0 5px 10px;
   color: var(--orange)
}

.question-row legend span {
   font-weight: 800
}

.question-row legend small {
   color: var(--sec);
   font-weight: 400
}

.question-remove {
   width: auto !important;
   background: transparent !important;
   border: 1px solid rgba(239, 68, 68, .45) !important;
   color: #fca5a5 !important;
   margin-top: 4px
}

.section-note {
   max-width: 500px;
   color: var(--sec);
   line-height: 1.5;
   font-size: 13px
}

.campaign-admin-summary p {
   margin-top: 5px;
   color: var(--sec)
}

.admin-campaign summary {
   cursor: pointer;
   font-weight: 700
}

.admin-campaign details[open] summary {
   color: var(--orange);
   margin-bottom: 12px
}

.danger-note {
   font-size: 11px;
   color: #fca5a5;
   margin-top: 7px
}

.empty-admin-state {
   padding: 25px;
   border: 1px dashed var(--border);
   border-radius: 8px;
   color: var(--sec)
}

.admin-table-head {
   font: 10px 'JetBrains Mono';
   text-transform: uppercase;
   letter-spacing: .12em;
   color: var(--sec);
   background: rgba(255, 255, 255, .025)
}

.admin-video-table code {
   font-size: 11px;
   color: var(--orange);
   overflow-wrap: anywhere
}

.admin-video-table a {
   color: var(--orange);
   font-weight: 700
}

.wide-form {
   max-width: 1050px;
   margin: auto
}

.page-intro {
   max-width: 700px;
   margin-top: 18px;
   color: var(--sec);
   line-height: 1.55
}

.newsletter-field {
   flex: 1
}

.newsletter-field label {
   display: block;
   margin: 0 0 3px 16px
}

.newsletter-field input {
   width: 100%
}

@media(max-width:700px) {
   .form-section-heading {
      display: block
   }

   .form-section-heading>p {
      margin-top: 10px
   }

   .question-bank-header,
   .question-row legend {
      align-items: flex-start;
      flex-direction: column
   }

   .admin-table-head {
      display: none !important
   }

   .admin-video-table>div:not(.admin-table-head) span,
   .admin-video-table>div:not(.admin-table-head) code {
      display: block
   }

   .admin-video-table [data-label]::before {
      content: attr(data-label) ': ';
      font: 9px 'JetBrains Mono';
      text-transform: uppercase;
      color: var(--sec)
   }

   .newsletter-field label {
      margin-left: 0
   }

   .news form {
      align-items: flex-end
   }
   
   .oauth-app-purpose {
    position: relative;
    padding: 88px 0;
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
    background:
        radial-gradient(circle at 15% 20%, rgba(249,115,22,.09), transparent 38%),
        rgba(255,255,255,.012);
}

.oauth-purpose-grid {
    display: grid;
    grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
    gap: 72px;
    align-items: start;
}

.oauth-purpose-heading h2 {
    font-family: 'Cabinet Grotesk', sans-serif;
    font-size: clamp(42px, 5vw, 74px);
    font-weight: 900;
    line-height: .95;
    letter-spacing: -.04em;
    text-transform: uppercase;
}

.oauth-purpose-content {
    color: var(--text-sec);
    font-size: 16px;
    line-height: 1.75;
}

.oauth-purpose-content > p + p {
    margin-top: 18px;
}

.oauth-purpose-lead {
    color: var(--text);
    font-size: 19px;
}

.oauth-purpose-points {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
    margin-top: 30px;
}

.oauth-purpose-points > div {
    min-width: 0;
    padding: 18px;
    border: 1px solid var(--border);
    border-radius: 7px;
    background: rgba(255,255,255,.018);
}

.oauth-purpose-points strong {
    display: block;
    color: var(--orange);
    font-family: 'JetBrains Mono', monospace;
    font-size: 11px;
    letter-spacing: .13em;
    text-transform: uppercase;
}

.oauth-purpose-points span {
    display: block;
    margin-top: 8px;
    font-size: 14px;
    line-height: 1.55;
}

.oauth-purpose-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 30px;
}

@media (max-width: 820px) {
    .oauth-app-purpose {
        padding: 64px 0;
    }

    .oauth-purpose-grid {
        grid-template-columns: 1fr;
        gap: 32px;
    }
}

@media (max-width: 560px) {
    .oauth-purpose-points {
        grid-template-columns: 1fr;
    }

    .oauth-purpose-actions {
        flex-direction: column;
    }

    .oauth-purpose-actions .btn {
        width: 100%;
        justify-content: center;
    }
}
}