:root{--bg:#03132d;--bg2:#0a4f97;--panel:rgba(7,28,61,.82);--line:rgba(255,255,255,.1);--text:#eff9ff;--muted:#a9bed4;--cyan:#71e7ff;--violet:#a98eff;--green:#4de1a4;--yellow:#ffd166;--red:#ff7f8d;--shadow:0 25px 70px rgba(0,0,0,.35)}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;min-height:100vh;color:var(--text);font-family:Inter,system-ui,sans-serif;background:radial-gradient(circle at 15% 5%,rgba(94,190,255,.25),transparent 27%),radial-gradient(circle at 80% 15%,rgba(160,120,255,.18),transparent 26%),linear-gradient(150deg,#020817,#07346d 48%,#03152e);overflow-x:hidden}
button,input,select,textarea{font:inherit}button{cursor:pointer}input,select,textarea{width:100%;padding:12px;border-radius:13px;border:1px solid var(--line);background:rgba(1,12,29,.72);color:var(--text);outline:none}input:focus,select:focus,textarea:focus{border-color:var(--cyan);box-shadow:0 0 0 3px rgba(113,231,255,.12)}textarea{resize:vertical}
.stars{position:fixed;inset:0;pointer-events:none;background-image:radial-gradient(circle,#fff 0 1px,transparent 1.5px),radial-gradient(circle,#bfefff 0 1.2px,transparent 1.8px),radial-gradient(circle,rgba(255,255,255,.65) 0 .8px,transparent 1.4px);background-size:74px 74px,143px 143px,47px 47px;background-position:11px 19px,51px 83px,7px 27px;opacity:.72;animation:drift 50s linear infinite}
.moon{position:fixed;right:5vw;top:4vh;width:108px;height:108px;border-radius:50%;background:#fff3c5;box-shadow:0 0 30px rgba(255,243,197,.7),0 0 90px rgba(113,231,255,.3);animation:float 8s ease-in-out infinite}
@keyframes drift{to{transform:translate(74px,74px)}}@keyframes float{50%{transform:translateY(9px)}}
.app{position:relative;z-index:1;display:grid;grid-template-columns:265px 1fr;min-height:100vh}
aside{position:sticky;top:0;height:100vh;padding:24px 18px;background:rgba(1,9,23,.8);border-right:1px solid var(--line);backdrop-filter:blur(18px);display:flex;flex-direction:column}
.brand{display:flex;align-items:center;gap:12px;margin:4px 8px 26px}.brand>span{width:46px;height:46px;display:grid;place-items:center;border-radius:16px;font-size:24px;background:linear-gradient(135deg,var(--cyan),var(--violet))}.brand b{display:block}.brand small{display:block;color:var(--muted);margin-top:3px}
nav{display:grid;gap:7px}nav button{border:0;background:transparent;color:var(--muted);padding:12px 13px;border-radius:13px;text-align:left}nav button:hover,nav button.active{background:rgba(90,169,255,.15);color:var(--text)}
.side-foot{margin-top:auto;padding:13px;border-radius:14px;border:1px solid var(--line);background:rgba(255,255,255,.04)}.side-foot strong,.side-foot small{display:block}.side-foot small{margin-top:6px;color:var(--muted);font-size:10px;line-height:1.45}
main{padding:28px;max-width:1600px;width:100%;margin:auto}header{display:flex;justify-content:space-between;align-items:flex-start;gap:20px;margin-bottom:24px}header small,.card>small,.hero small{font-size:10px;letter-spacing:.16em;font-weight:800;color:var(--cyan)}h1{font-size:clamp(28px,4vw,44px);margin:6px 0 0;letter-spacing:-.045em}.header-actions{display:flex;gap:10px;align-items:center}.header-actions button,.card-head button{width:40px;height:40px;border:1px solid var(--line);border-radius:12px;background:rgba(255,255,255,.05);color:var(--text)}#today{padding:10px 14px;border:1px solid var(--line);border-radius:999px;color:var(--muted);background:rgba(255,255,255,.05);font-size:12px}
.view{display:none}.view.active{display:block}.card{background:linear-gradient(180deg,rgba(18,52,99,.82),rgba(4,20,48,.9));border:1px solid var(--line);border-radius:22px;padding:20px;box-shadow:var(--shadow);backdrop-filter:blur(18px)}
.hero-grid{display:grid;grid-template-columns:1.25fr .75fr;gap:18px;margin-bottom:18px}.hero,.night{min-height:210px;display:flex;justify-content:space-between;align-items:center}.hero h2{font-size:64px;margin:7px 0}.hero p,.night p,.intro,.card p{color:var(--muted);line-height:1.55}.night>span{font-size:70px;filter:drop-shadow(0 0 20px rgba(255,243,197,.5))}
.ring{width:145px;height:145px;border-radius:50%;display:grid;place-items:center;background:conic-gradient(var(--cyan) 0deg,rgba(255,255,255,.08) 0);position:relative}.ring:after{content:"";position:absolute;inset:12px;border-radius:50%;background:#071a38}.ring b{position:relative;z-index:1;font-size:30px}
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-bottom:18px}.stats .card b{display:block;font-size:33px;margin:7px 0}.stats .card em{font-style:normal;color:var(--muted);font-size:11px}
.cols{display:grid;grid-template-columns:1.05fr .95fr;gap:18px;margin-bottom:18px}.card-head{display:flex;justify-content:space-between;align-items:center;gap:12px}.card-head select{width:auto}.card h3{margin:6px 0 10px}canvas{width:100%;height:300px}.message{padding:15px;border-radius:14px;background:rgba(1,12,29,.55);border-left:4px solid var(--cyan);color:var(--muted);line-height:1.55}.badges{display:flex;gap:8px;flex-wrap:wrap;margin-top:14px}.badge{padding:7px 10px;border-radius:999px;background:rgba(113,231,255,.1);border:1px solid rgba(113,231,255,.22);font-size:11px}
.form-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:14px}label{display:grid;gap:7px;color:var(--muted);font-size:12px}.range{display:grid;grid-template-columns:1fr 40px;gap:8px;align-items:center}.range input{padding:0;accent-color:var(--cyan)}output{padding:7px;border-radius:9px;background:rgba(1,12,29,.6);text-align:center;color:var(--text)}.actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:15px}
.actions button,.tests button,.primary,.danger{border:0;border-radius:13px;padding:11px 15px;font-weight:800;background:rgba(90,169,255,.17);color:var(--text)}.primary{background:linear-gradient(135deg,var(--cyan),#a3f2ff)!important;color:#031125!important}.danger{background:linear-gradient(135deg,#ff9aa5,var(--red))!important;color:#2a0710!important}
.tests{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-bottom:18px}.tests article>span{font-size:34px}.tests article>small{display:block;margin-top:10px}.tests article p{min-height:48px;font-size:13px}
table{width:100%;border-collapse:collapse}th,td{padding:12px;border-bottom:1px solid var(--line);text-align:left;font-size:12px}th{color:var(--muted)}
.week,.calendar{display:grid;grid-template-columns:repeat(7,1fr);gap:7px}.week{margin:14px 0 8px;color:var(--muted);font-size:11px;text-align:center}.day{min-height:92px;border:1px solid var(--line);border-radius:14px;padding:9px;background:rgba(1,12,29,.55);position:relative}.day.empty{opacity:.15}.day.recorded{cursor:pointer}.day.good{box-shadow:inset 0 -4px 0 var(--green)}.day.medium{box-shadow:inset 0 -4px 0 var(--yellow)}.day.low{box-shadow:inset 0 -4px 0 var(--red)}.day b{position:absolute;right:8px;bottom:8px;font-size:11px}
.compare{display:flex;gap:10px;align-items:center}.compare select{flex:1}#insightList{display:grid;gap:10px}.insight-item{padding:14px;border-radius:13px;background:rgba(1,12,29,.55);color:var(--muted);line-height:1.5}.learn{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.modal{position:fixed;inset:0;z-index:10;background:rgba(0,5,15,.82);backdrop-filter:blur(8px);display:none;place-items:center;padding:20px}.modal.open{display:grid}.modal-box{width:min(800px,100%)}.stage{min-height:390px;border:1px solid var(--line);border-radius:18px;background:rgba(1,10,25,.72);display:grid;place-items:center;text-align:center;padding:22px;user-select:none}.reaction{width:100%;min-height:340px;border-radius:16px;display:grid;place-items:center;background:#16345e;font-size:34px;font-weight:900}.reaction.ready{background:#29c781;color:#041f16}.reaction.false{background:#cf5362}.sequence{font-size:54px;letter-spacing:15px;font-weight:900}.pad{display:grid;grid-template-columns:repeat(3,70px);gap:9px;justify-content:center}.pad button,.choice,.cell{border:1px solid var(--line);background:#15335d;color:var(--text);border-radius:13px}.pad button{height:52px}.grid4{display:grid;grid-template-columns:repeat(4,65px);gap:9px}.cell{height:65px}.cell.lit{background:var(--cyan);box-shadow:0 0 22px rgba(113,231,255,.45)}.cell.sel{outline:3px solid var(--green)}.objects{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;width:100%}.choice{padding:20px;font-size:38px}.choices{display:flex;gap:10px;justify-content:center;flex-wrap:wrap}.choices .choice{font-size:16px}.bigword{font-size:58px;font-weight:900}.symbol{font-size:110px}.visual{display:grid;grid-template-columns:repeat(8,1fr);gap:4px}.visual button{font-size:25px;border:0;background:transparent;color:var(--text)}.result{margin-top:12px;padding:14px;border-radius:13px;background:rgba(1,12,29,.6);color:var(--muted)}
.toast{position:fixed;right:22px;bottom:22px;z-index:20;padding:13px 16px;border-radius:13px;background:#06244d;border:1px solid var(--line);transform:translateY(100px);opacity:0;transition:.25s}.toast.show{transform:none;opacity:1}
@media print{aside,header,.stars,.moon,.actions{display:none!important}.app{display:block}main{padding:0}.view{display:none!important}#reports{display:block!important}.card{background:white;color:black;box-shadow:none;border:1px solid #aaa}}
@media(max-width:1100px){.app{grid-template-columns:1fr}aside{position:static;height:auto}nav{grid-template-columns:repeat(4,1fr)}.side-foot{display:none}.tests{grid-template-columns:repeat(2,1fr)}}
@media(max-width:760px){main{padding:18px}header,.hero-grid,.cols,.stats,.form-grid,.learn{display:grid;grid-template-columns:1fr}.tests{grid-template-columns:1fr}nav{grid-template-columns:repeat(2,1fr)}#today{display:none}.moon{width:78px;height:78px}.hero h2{font-size:48px}.day{min-height:68px;padding:6px}.week,.calendar{gap:4px}}


/* =========================================================
   BRAIN JOURNAL IDENTITY — based on the supplied stylesheet
   ========================================================= */
:root{
  --bg:#fffaf0;
  --bg2:#fffdf8;
  --panel:rgba(255,253,248,.91);
  --line:rgba(93,16,36,.18);
  --text:#211014;
  --muted:#74565f;
  --cyan:#f4c542;
  --violet:#ffe38a;
  --green:#3f9b70;
  --yellow:#f4c542;
  --red:#8f1835;
  --shadow:0 26px 80px rgba(38,4,13,.18);
}

body{
  color:#211014;
  background:
    linear-gradient(90deg,rgba(93,16,36,.05) 1px,transparent 1px),
    linear-gradient(rgba(93,16,36,.05) 1px,transparent 1px),
    radial-gradient(circle at 14% 10%,rgba(244,197,66,.34),transparent 24rem),
    radial-gradient(circle at 90% 4%,rgba(93,16,36,.14),transparent 28rem),
    #fffaf0;
  background-size:48px 48px,48px 48px,auto,auto,auto;
}

.stars{
  opacity:.45;
  background-image:
    radial-gradient(circle,rgba(93,16,36,.22) 0 1px,transparent 1.7px),
    radial-gradient(circle,rgba(244,197,66,.36) 0 1.2px,transparent 1.8px),
    radial-gradient(circle,rgba(93,16,36,.13) 0 .8px,transparent 1.4px);
}
.moon{
  background:linear-gradient(135deg,#ffe38a,#f4c542);
  box-shadow:0 0 30px rgba(244,197,66,.55),0 0 90px rgba(93,16,36,.18);
}

/* Official-style BRAIN masthead */
.brain-topbar{
  position:sticky;
  top:0;
  z-index:50;
  min-height:4.75rem;
  padding:.72rem clamp(1rem,4vw,3rem);
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:1rem;
  color:white;
  background:rgba(38,4,13,.94);
  border-bottom:1px solid rgba(244,197,66,.34);
  box-shadow:0 12px 40px rgba(38,4,13,.24);
  backdrop-filter:blur(18px);
}
.brain-brand{
  display:inline-flex;
  align-items:center;
  gap:.85rem;
  color:white;
  text-decoration:none;
}
.brain-brand-symbol{
  position:relative;
  display:block;
  width:3rem;
  height:3rem;
  flex:0 0 3rem;
  border:1px solid rgba(244,197,66,.45);
  border-radius:.6rem;
  background:
    radial-gradient(circle at 30% 32%,#f4c542 0 .46rem,transparent .48rem),
    radial-gradient(circle at 70% 30%,#ffe38a 0 .22rem,transparent .24rem),
    radial-gradient(circle at 72% 72%,#f4c542 0 .33rem,transparent .35rem),
    linear-gradient(135deg,#8f1835,#26040d);
  box-shadow:0 16px 30px rgba(0,0,0,.24);
}
.brain-brand-symbol span{
  position:absolute;
  height:1px;
  background:rgba(255,227,138,.78);
  transform-origin:left center;
}
.brain-brand-symbol span:nth-child(1){width:1.2rem;left:.95rem;top:1rem;rotate:16deg}
.brain-brand-symbol span:nth-child(2){width:1rem;left:1.8rem;top:1.05rem;rotate:92deg}
.brain-brand-symbol span:nth-child(3){width:1.05rem;left:1.8rem;top:2.1rem;rotate:-148deg}
.brain-brand-symbol span:nth-child(4){width:1.25rem;left:.92rem;top:1rem;rotate:75deg}
.brain-brand-copy strong,
.brain-brand-copy small,
.brain-edition strong,
.brain-edition small{display:block}
.brain-brand-copy strong{font-size:1.04rem;letter-spacing:.04em}
.brain-brand-copy small{font-size:.76rem;color:rgba(255,244,201,.76)}
.brain-edition{text-align:right}
.brain-edition strong{color:#f4c542;font-size:.8rem;text-transform:uppercase;letter-spacing:.11em}
.brain-edition small{color:rgba(255,250,240,.72);font-size:.72rem;margin-top:.18rem}

/* Existing application recolored to the journal language */
.app{min-height:calc(100vh - 4.75rem)}
aside{
  top:4.75rem;
  height:calc(100vh - 4.75rem);
  color:white;
  background:
    radial-gradient(circle at top right,rgba(244,197,66,.2),transparent 13rem),
    linear-gradient(160deg,rgba(93,16,36,.98),rgba(38,4,13,.99));
  border-right:1px solid rgba(244,197,66,.28);
}
.brand>span{background:linear-gradient(135deg,#f4c542,#ffe38a)}
.brand b{color:white}
.brand small{color:rgba(255,244,201,.74)}
nav button{color:rgba(255,250,240,.84)}
nav button:hover,nav button.active{
  color:#26040d;
  background:linear-gradient(135deg,#f4c542,#ffe38a);
}
.side-foot{border-color:rgba(244,197,66,.3);background:rgba(255,255,255,.07)}
.side-foot small{color:rgba(255,244,201,.72)}

.app-header{
  color:white;
  background:linear-gradient(125deg,rgba(38,4,13,.98),rgba(93,16,36,.92));
  border:1px solid rgba(244,197,66,.28);
  border-radius:.75rem;
  padding:1rem 1.15rem;
  box-shadow:0 18px 56px rgba(38,4,13,.16);
}
.app-header h1{color:white}
.app-header small{color:#f4c542}
#today{color:rgba(255,250,240,.82);border-color:rgba(255,227,138,.32)}
.header-actions button,.card-head button{
  color:#26040d;
  background:linear-gradient(135deg,#f4c542,#ffe38a);
  border:0;
}

.card{
  color:#211014;
  background:rgba(255,253,248,.91);
  border:1px solid rgba(93,16,36,.18);
  box-shadow:0 18px 56px rgba(38,4,13,.1);
}
.card h3{color:#26040d}
.card p,.intro{color:#74565f}
.card>small{color:#8f1835}

.hero,.night{
  color:white;
  background:
    radial-gradient(circle at top right,rgba(244,197,66,.3),transparent 14rem),
    linear-gradient(135deg,#5d1024,#26040d);
}
.hero small,.night small{color:#ffe38a}
.hero p,.night p{color:rgba(255,250,240,.82)}
.ring{background:conic-gradient(#f4c542 0deg,rgba(255,255,255,.12) 0)}
.ring::after{background:#26040d}

.stats .card b{color:#26040d}
.stats .card em{color:#74565f}
.message,.insight-item,.result{
  color:#74565f;
  background:#fff4c9;
  border-color:rgba(93,16,36,.18);
}
.message{border-left-color:#8f1835}
.badge{color:#26040d;background:#fff4c9;border-color:rgba(93,16,36,.18)}

input,select,textarea{
  color:#211014;
  background:#fffdf8;
  border-color:rgba(93,16,36,.18);
}
input:focus,select:focus,textarea:focus{
  border-color:#8f1835;
  box-shadow:0 0 0 3px rgba(143,24,53,.12);
}
.range input{accent-color:#8f1835}
output{color:#26040d;background:#fff4c9}
.primary{
  color:#26040d!important;
  background:linear-gradient(135deg,#f4c542,#ffe38a)!important;
}
.danger{background:linear-gradient(135deg,#8f1835,#26040d)!important;color:white!important}

.tests article::after{
  content:"";
  position:absolute;
  right:-2rem;
  bottom:-3rem;
  width:8rem;
  height:8rem;
  border-radius:50%;
  background:rgba(244,197,66,.18);
}
.tests article{position:relative;overflow:hidden}
.tests article button{position:relative;z-index:1}

.day{background:#fffdf8;border-color:rgba(93,16,36,.18)}
.day.good{box-shadow:inset 0 -4px 0 #3f9b70}
.day.medium{box-shadow:inset 0 -4px 0 #f4c542}
.day.low{box-shadow:inset 0 -4px 0 #8f1835}

.modal{background:rgba(38,4,13,.84)}
.modal-box{background:#fffdf8}
.stage{
  background:
    radial-gradient(circle at 82% 78%,rgba(244,197,66,.24),transparent 17rem),
    linear-gradient(135deg,#5d1024,#26040d);
}
.reaction.ready{
  color:#052318;
  background:linear-gradient(135deg,#25c97f,#74efb5);
  box-shadow:0 0 30px rgba(37,201,127,.42), inset 0 0 0 2px rgba(255,255,255,.28);
}
.reaction.false{background:#8f1835}
.cell.lit{background:#f4c542;box-shadow:0 0 24px rgba(244,197,66,.5)}
.cell.sel{outline-color:#ffe38a}
.pad button,.choice,.cell{border-color:rgba(255,227,138,.32)}
.toast{background:#26040d;border-color:rgba(244,197,66,.32)}

/* Academic introductory card */
.journal-intro{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  gap:1rem;
  align-items:end;
  margin-bottom:1rem;
  padding:1.25rem;
  border:1px solid rgba(93,16,36,.18);
  border-radius:.75rem;
  background:rgba(255,253,248,.9);
  box-shadow:0 18px 56px rgba(38,4,13,.1);
}
.journal-label{
  margin:0 0 .45rem;
  color:#8f1835;
  font-size:.75rem;
  font-weight:900;
  letter-spacing:.11em;
  text-transform:uppercase;
}
.journal-intro h2{
  margin:0;
  color:#26040d;
  font-size:clamp(2rem,5vw,4rem);
  line-height:.95;
}
.journal-intro p:last-child{max-width:55rem;color:#74565f}
.journal-meta{display:flex;flex-wrap:wrap;gap:.45rem;justify-content:flex-end}
.journal-meta span{
  padding:.45rem .65rem;
  color:#26040d;
  border-radius:999px;
  background:#fff4c9;
  font-size:.72rem;
  font-weight:850;
}

@media(max-width:760px){
  .brain-topbar{align-items:flex-start;flex-direction:column}
  .brain-edition{text-align:left}
  .brain-brand-copy small{max-width:17rem}
  aside{top:0;height:auto}
  .journal-intro{grid-template-columns:1fr}
  .journal-meta{justify-content:flex-start}
}