/* LiveryLab Academy – v31 layout recovery, 2026-11-07
   Functional Studio pages stay available; the main Academy layout remains original.
   Made with 💙 by NyxAtheris (LiveryLab Studios). */
html,body,.app-shell,.app-column{max-width:100%;min-width:0}
.app-shell,.app-column,.content{min-width:0}
.content,.ll-home-dashboard{max-width:100%;min-width:0}
.ll-home-dashboard,.ll-home-dashboard > *{min-width:0;box-sizing:border-box}
.ll-home-dashboard .ll-home-brand-banner{
  display:block!important;
  position:relative!important;
  width:100%!important;
  max-width:100%!important;
  height:auto!important;
  min-height:0!important;
  max-height:none!important;
  aspect-ratio:2.63 / 1!important;
  overflow:hidden!important;
  margin-inline:0!important;
  border-radius:18px;
}
.ll-home-dashboard .ll-home-brand-banner > img{
  position:absolute!important;
  inset:0!important;
  display:block!important;
  width:100%!important;
  height:100%!important;
  max-width:100%!important;
  object-fit:contain!important;
  object-position:center!important;
}
.ll-home-greeting .ll-home-level{
  color:var(--text);
  font:inherit;
  text-align:left;
  cursor:pointer;
  width:100%;
  max-width:100%;
  display:block;
}
.ll-home-level:focus-visible{outline:2px solid #c9a9ff;outline-offset:3px}
.ll-home-greeting,.ll-home-metrics,.ll-home-continue,.ll-home-tools,.ll-home-shortcuts{max-width:100%;min-width:0}
@media(max-width:820px){
  body:not(.is-auth) .topbar{
    display:flex;
    flex-wrap:nowrap;
    align-items:center;
    justify-content:space-between;
    height:69px;
    min-height:69px;
    max-height:69px;
    gap:7px;
    padding-inline:12px;
  }
  .topbar .brandbox{min-width:0;flex:1 1 auto;gap:7px;overflow:hidden}
  .topbar .brand{min-width:0;overflow:hidden;display:flex;flex-wrap:nowrap;gap:6px;white-space:nowrap;line-height:1.2}
  .topbar .brand>span:last-child{white-space:nowrap;min-width:0;overflow:hidden;text-overflow:ellipsis;max-width:100%}
  .topbar .top-right{display:flex;align-items:center;flex:0 0 auto;flex-wrap:nowrap;gap:5px;min-width:0}
  .topbar .brand-mark,.topbar .brand-mark img{width:31px;height:31px;min-width:31px}
  .topbar .icon-btn,.topbar .avatar-btn{flex:0 0 auto}
  .topbar .xp-header{display:none}
  .topbar .header-streak-chip{white-space:nowrap;flex:0 0 auto;max-width:95px;min-height:33px;padding:5px 7px}
  .topbar .header-streak-chip .ll-icon{width:14px!important;height:14px!important}
  .topbar .icon-btn[data-go="settings"]{display:none}
  .ll-home-dashboard .ll-home-brand-banner{max-height:190px!important;border-radius:15px}
  .ll-home-dashboard .ll-home-brand-banner > img{object-fit:contain!important}
  body:not(.is-auth) .bottom-nav{
    display:grid!important;
    grid-template-columns:repeat(5,minmax(0,1fr));
    gap:0;
    width:100%;
    height:calc(74px + env(safe-area-inset-bottom));
    padding-bottom:env(safe-area-inset-bottom);
    overflow:hidden;
  }
  .bottom-nav .bottom-item{
    min-width:0;
    max-width:100%;
    border:0;
    border-radius:0;
    box-shadow:none;
    padding:6px 2px;
    background:transparent;
    font-size:10px;
  }
  .bottom-nav .bottom-item.active{background:#30214780}
  .content{overflow-x:clip}
}
@media(max-width:430px){
  .topbar .brand{font-size:13px}
  .topbar .header-streak-chip{font-size:10px}
  .topbar .avatar-btn{width:30px;height:30px}
  .topbar .brand-mark,.topbar .brand-mark img{width:28px;height:28px;min-width:28px}
  .ll-home-dashboard .ll-home-brand-banner{max-height:165px!important}
}
@media(max-width:360px){
  .topbar .brand{font-size:12px}
  .topbar .brand-mark{display:none}
}

/* Compact v31 header with a permanently visible, centered focus timer.
   Keep the original Academy design, no secondary toolbar or stacked rows. */
body:not(.is-auth) .topbar{
 display:grid!important;
 grid-template-columns:minmax(0,1fr) auto minmax(0,1fr)!important;
 align-items:center!important;
 column-gap:7px!important;
}
body:not(.is-auth) .topbar > .brandbox{
 grid-column:1;
 min-width:0;
 max-width:100%;
 overflow:hidden;
 flex:initial;
}
body:not(.is-auth) .topbar > .focus-center{
 grid-column:2;
 display:flex;
 align-items:center;
 justify-content:center;
 justify-self:center;
 min-width:0;
}
body:not(.is-auth) .topbar > .top-right{
 grid-column:3;
 justify-self:end;
 display:flex;
 align-items:center;
 flex-wrap:nowrap;
 gap:5px;
 min-width:0;
 max-width:100%;
}
.topbar .focus-center .focus-header{
 display:inline-flex!important;
 justify-content:center;
 align-items:center;
 white-space:nowrap;
 line-height:1.2;
 min-height:34px;
 padding:7px 11px;
 border:1px solid #8964c2;
 border-radius:24px;
 background:#38234d;
 color:#f0e1ff;
 font:750 12px ui-monospace,monospace;
 cursor:pointer;
 font-variant-numeric:tabular-nums;
}
.topbar .focus-center .focus-header.is-running{
 border-color:#b88de9;
 background:#4a2b64;
}
.topbar .focus-center .focus-header:focus-visible{
 outline:3px solid #ba92ff;
 outline-offset:2px;
}
@media(max-width:820px){
 body:not(.is-auth) .topbar{
  grid-template-columns:minmax(0,1fr) auto minmax(0,1fr)!important;
  height:69px!important;
  min-height:69px!important;
 }
 .topbar .focus-center .focus-header{font-size:11px;min-height:32px;padding:6px 8px}
 .topbar .top-right .header-streak-chip{max-width:89px;min-width:0;padding-inline:5px}
}
@media(max-width:430px){
 .topbar .brand-mark{display:none}
 body:not(.is-auth) .topbar > .brandbox{gap:5px}
 body:not(.is-auth) .topbar > .top-right{gap:4px}
 .topbar .focus-center .focus-header{min-height:31px;padding:5px 6px;font-size:11px}
 .topbar .header-streak-chip{max-width:80px!important;font-size:10px!important}
}
/* Simplified practice: no console, just verify, hint and solution. */
.practice-actions.practice-actions-simple{
 display:grid;
 grid-template-columns:repeat(3,minmax(0,1fr));
 gap:8px;
 margin:14px 0 0;
}
.practice-actions-simple .btn{min-width:0;min-height:43px;padding:10px 7px;white-space:normal;font-size:13px}
#practice-feedback[hidden]{display:none!important}
#practice-feedback{
 display:block;
 padding:13px 15px;
 margin:14px 0 0;
 min-height:auto;
 border-radius:12px;
 border:1px solid transparent;
 white-space:pre-wrap;
 overflow-wrap:anywhere;
 line-height:1.55;
}
#practice-feedback.is-success{color:#b4f4d1;background:#183b2c;border-color:#37875b}
#practice-feedback.is-error{color:#ffd1d7;background:#44202b;border-color:#aa4b64}
#practice-feedback.is-tip{color:#e4d5fc;background:#2d203f;border-color:#775fa0}
#practice-workspace.practice-correct{border-color:#37875b;box-shadow:0 0 0 1px #37875b55}
#practice-workspace.practice-incorrect{border-color:#aa4b64;box-shadow:0 0 0 1px #aa4b6455}
.quiz-feedback.quiz-correct{color:#b4f4d1;font-weight:700}
.quiz-feedback.quiz-incorrect{color:#ffc5d1;font-weight:650}
.quiz-choice.good{border-color:#459267!important;background:#204434!important;color:#e3fff0!important}
.quiz-choice.bad{border-color:#c75470!important;background:#422230!important;color:#ffe2ec!important}
.quiz-choice[disabled]{cursor:default}
@media(max-width:400px){.practice-actions-simple .btn{font-size:12px;padding:9px 5px}}


/* V41 · Expanded learning chapters and multi-question quiz.
   Scoped to lessons; the original homepage/navigation remains unchanged. */
#lesson-explanation{scroll-margin-top:90px}
.ll-part-heading{display:flex;align-items:start;justify-content:space-between;gap:16px;margin:14px 0 18px}
.ll-part-heading .eyebrow{font-size:11px;letter-spacing:.12em}
.ll-part-heading h2{margin:8px 0 0;font-size:clamp(20px,4vw,28px);line-height:1.25}
.ll-part-count{font:800 13px ui-monospace,monospace;flex:0 0 auto;color:#c8a8f9;background:#37234e;border:1px solid #5e437f;border-radius:12px;padding:8px 11px}
.ll-part-progress,.ll-quiz-progress{width:100%;height:8px;background:#322443;border-radius:100px;overflow:hidden;margin:12px 0 16px}
.ll-part-progress>span,.ll-quiz-progress>span{display:block;height:100%;min-width:0;max-width:100%;background:linear-gradient(90deg,#8b61f1,#be84f9);border-radius:100px;transition:width .2s ease}
.ll-part-selector{display:flex;gap:8px;max-width:100%;overflow-x:auto;overscroll-behavior-inline:contain;padding:4px 2px 11px;margin-bottom:12px;scrollbar-width:thin}
.ll-part-selector button{display:grid;place-items:center;flex:0 0 37px;height:37px;border:1px solid #6a5185;border-radius:11px;background:#23192f;color:#d7c6e6;font-weight:750;cursor:pointer}
.ll-part-selector button:hover,.ll-part-selector button.active{background:#7047ab;border-color:#b58bf5;color:#fff}
.ll-part-selector button:focus-visible,.ll-part-controls .btn:focus-visible{outline:3px solid #b68af4;outline-offset:2px}
.ll-part-body{min-width:0;overflow-wrap:anywhere}
.ll-part-body p{line-height:1.85;margin:13px 0;color:var(--soft,#d9c9e7)}
.ll-part-body ul{margin:17px 0 20px;padding-left:22px;line-height:1.8}
.ll-part-body li{padding:5px 0}
.ll-part-body .codebox{max-width:100%;overflow:auto}
.ll-part-body pre{overflow:auto;max-width:100%;white-space:pre}
.ll-part-body .note{line-height:1.75;margin:19px 0}
.ll-part-controls{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:9px;margin-top:20px}
.ll-part-controls .btn{min-height:43px}
.ll-part-controls button[disabled]{opacity:.4;cursor:not-allowed}
.ll-quiz-progress{margin:12px 0 22px}
#quiz-question{line-height:1.6;font-weight:650}
#quiz-choices{max-width:100%;min-width:0}
#quiz-choices .quiz-choice{max-width:100%;min-width:0;white-space:normal;overflow-wrap:anywhere;line-height:1.55;align-items:flex-start;text-align:left}
#quiz-choices .quiz-choice>span{flex:0 0 auto}
#answer-result{line-height:1.6;margin:13px 0}
@media(max-width:580px){.ll-part-heading h2{font-size:21px}.ll-part-selector{gap:6px}.ll-part-selector button{flex-basis:34px;height:34px}.ll-part-body p{font-size:14px;line-height:1.8}.ll-part-controls .btn{flex:1;min-width:0;font-size:12px;padding:9px 8px}#quiz-choices .quiz-choice{font-size:14px}}
@media(prefers-reduced-motion:reduce){.ll-part-progress>span,.ll-quiz-progress>span{transition:none}}


/* v42: isolated subscription management inside the original Admin cards. */
.member-management:has(.ll-plan-manager){flex-wrap:wrap;align-items:stretch}
.ll-plan-manager{flex:1 0 100%;width:100%;min-width:0;padding:14px 15px;border:1px solid #6d4e91;border-radius:15px;background:linear-gradient(130deg,#271c3c,#161128);color:#f4e9ff}
.ll-plan-status{display:flex;align-items:center;gap:12px;min-width:0}
.ll-plan-status>div{display:flex;flex-direction:column;gap:4px;min-width:0;flex:1}
.ll-plan-status strong{font-size:clamp(15px,2vw,19px);font-weight:800;line-height:1.3;overflow-wrap:anywhere;font-variant-numeric:tabular-nums}
.ll-plan-status small{font-size:12px;line-height:1.5;color:#c7b6d6;overflow-wrap:anywhere}
.ll-plan-status strong.is-expired{color:#ff9aa5}
.ll-plan-dot{display:inline-block;flex:0 0 10px;height:10px;border-radius:50%;background:#7d708e;box-shadow:0 0 0 4px #69547a33}
.ll-plan-dot.active{background:#58daa9;box-shadow:0 0 0 4px #58daa933}
.ll-plan-dot.expired{background:#ff8b99;box-shadow:0 0 0 4px #ff8b9933}
.ll-plan-dot.unlimited{background:#c79cff;box-shadow:0 0 0 4px #c79cff33}
.ll-plan-form{margin-top:13px;display:flex;gap:13px;align-items:end;flex-wrap:wrap;border-top:1px solid #544064;padding-top:13px}
.ll-plan-form>label{display:flex;flex-direction:column;gap:5px;min-width:140px;max-width:180px;font-size:12px;color:#d8c6e8}
.ll-plan-form input{min-width:0;width:100%;height:39px}
.ll-plan-actions{display:flex;flex:1;flex-wrap:wrap;gap:7px}
.ll-plan-actions .btn{font-size:12px;min-height:39px;padding:8px 12px;white-space:normal}
.ll-plan-actions .danger{border-color:#ad5571}
.ll-plan-manager .micro{font-size:12px;line-height:1.55;margin:11px 0 0;color:#c7b6da}
@media(max-width:580px){.ll-plan-manager{padding:13px}.ll-plan-form>label{max-width:none;flex:1 1 100%}.ll-plan-actions{width:100%}.ll-plan-actions .btn{flex:1;min-width:0;padding:9px 7px;font-size:11px}}
/* v42: Daily-Streak inspired focus timer. The header pill stays compact. */
body.focus-modal-visible{overflow:hidden}
#timer-portal .ll-focus-backdrop{z-index:3500;background:#080310c8;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
#timer-portal .ll-focus-modal{
 z-index:3501;isolation:isolate;width:min(465px,calc(100vw - 26px));max-width:465px;max-height:calc(100dvh - 30px);overflow-y:auto;
 padding:31px 27px 23px;border:2px solid #bb69ec;border-radius:27px;
 background:radial-gradient(ellipse at 50% 0%,#58317b,#1c102f 58%,#140d23);
 box-shadow:0 0 16px #bc4cff8c,0 0 64px #842ed85c,0 22px 95px #07020edb;
 text-align:center;color:#f5eaff;
}
#timer-portal .ll-focus-modal::before{content:"";position:absolute;inset:0;pointer-events:none;border-radius:inherit;box-shadow:inset 0 0 22px #9e5bda38}
#timer-portal .ll-focus-kicker{display:block;color:#d9b4ff;letter-spacing:.16em;font-size:10px;margin:12px auto 3px}
#timer-portal .ll-focus-close{position:absolute;top:13px;right:14px;z-index:2;display:grid;place-items:center;width:35px;height:35px;border:1px solid #a77acf;border-radius:50%;background:#422353;color:#f5e8ff;font-size:24px;line-height:1;cursor:pointer}
#timer-portal .ll-focus-close:focus-visible,#timer-portal .ll-focus-actions button:focus-visible,#timer-portal .ll-focus-presets button:focus-visible{outline:3px solid #f0c2ff;outline-offset:2px}
#timer-portal .ll-focus-emblem{display:grid;place-items:center;margin:0 auto 12px;width:58px;height:58px;border:1px solid #c17bfc;border-radius:18px;background:linear-gradient(135deg,#7838af,#3d2067);box-shadow:0 0 22px #ab50f36a;color:#f5d7ff;font-size:36px}
#timer-portal .ll-focus-title{font-family:inherit;font-size:clamp(27px,6vw,38px);font-weight:850;line-height:1.18;margin:10px 0 8px;letter-spacing:-.035em}
#timer-portal .ll-focus-lede{font-size:13px;line-height:1.6;color:#e0cde9;margin:0 auto 17px;max-width:365px}
#timer-portal .ll-focus-ring{
 width:184px;height:184px;margin:0 auto 18px;padding:9px;border-radius:50%;
 background:conic-gradient(from -90deg,#d68bfa 0 var(--focus-progress,0%),#3d2353 var(--focus-progress,0%) 100%);
 box-shadow:0 0 0 1px #a875d5,0 0 20px #9443d558;
}
#timer-portal .ll-focus-ring-inner{height:100%;width:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;border-radius:50%;background:radial-gradient(circle at 40% 24%,#462659,#20152e 70%);border:1px solid #664375}
#timer-portal .ll-focus-ring-inner>span{font-size:22px;color:#e2aaff}
#timer-portal .ll-focus-ring-inner strong{font:800 34px/1.12 ui-monospace,monospace;color:#fff;letter-spacing:-.055em;font-variant-numeric:tabular-nums}
#timer-portal .ll-focus-ring-inner small{font-size:9px;letter-spacing:.16em;color:#c8aadc}
#timer-portal .ll-focus-presets{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;margin:9px 0 14px}
#timer-portal .ll-focus-presets button{border:1px solid #8257a4;border-radius:12px;background:#342044;color:#e5cefd;padding:11px 4px;cursor:pointer;font-size:12px;font-weight:750}
#timer-portal .ll-focus-presets button:hover{background:#603083;color:#fff;border-color:#b980ec}
#timer-portal .ll-focus-duration{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:0 0 14px;padding:12px 13px;border:1px solid #674b81;border-radius:13px;background:#2c1d40;font-size:12px;color:#e5d4f7}
#timer-portal .ll-focus-input-row{display:flex;align-items:center;justify-content:flex-end;gap:7px;flex:0 0 auto}
#timer-portal .ll-focus-duration .input{width:83px;min-width:0;max-width:83px;margin:0;padding:8px;text-align:center;font-variant-numeric:tabular-nums}
#timer-portal .ll-focus-actions{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:9px;margin:0}
#timer-portal .ll-focus-actions button{min-height:49px;width:100%;min-width:0;font-size:13px;font-weight:750;padding:9px 7px;white-space:normal}
#timer-portal .ll-focus-actions .primary{border-color:#d9a2fa;background:linear-gradient(130deg,#ad4bf3,#7730c8);box-shadow:0 5px 17px #8122c63e}
#timer-portal .ll-focus-state{min-height:24px;margin-top:13px;font-size:11px;line-height:1.5;color:#d5bfe3}
#timer-portal .ll-focus-reset{display:inline-block;margin:10px 0 0;padding:8px 10px;border:0;background:transparent;color:#e3c4fa;font-size:12px;text-decoration:underline;text-underline-offset:3px;cursor:pointer}
@media(max-width:430px){
 #timer-portal .ll-focus-modal{padding:25px 18px 19px}
 #timer-portal .ll-focus-ring{height:158px;width:158px;margin-bottom:13px}
 #timer-portal .ll-focus-ring-inner strong{font-size:30px}
 #timer-portal .ll-focus-lede{font-size:12px;margin-bottom:12px}
 #timer-portal .ll-focus-presets{gap:5px}
 #timer-portal .ll-focus-presets button{padding:10px 2px;font-size:11px}
}
@media(prefers-reduced-motion:reduce){#timer-portal .ll-focus-ring{transition:none}}


/* v43 · Only two learning parts per lesson. Clean compact navigation. */
#lesson-explanation .ll-part-heading{margin:6px 0 13px;align-items:center}
#lesson-explanation .ll-part-heading h2{margin:5px 0 0}
#lesson-explanation .ll-part-selector-two{
 display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
 gap:10px;overflow:visible;margin:7px 0 18px;padding:0;width:100%;
}
#lesson-explanation .ll-part-selector-two button{
 width:100%;min-width:0;min-height:48px;height:auto;
 display:flex;align-items:center;justify-content:center;gap:10px;
 flex:none;border-radius:13px;padding:10px 12px;font-size:13px;
 color:#d7c2ef;white-space:normal;text-align:center;line-height:1.4;
 background:#251a37;border:1px solid #624680;
}
#lesson-explanation .ll-part-selector-two button.active{
 color:#fff;background:linear-gradient(130deg,#6941a4,#523079);
 border-color:#c49af2;box-shadow:0 0 0 1px #a06ce361;
}
#lesson-explanation .ll-part-selector-two .ll-part-number{
 display:grid;place-items:center;flex:0 0 28px;width:28px;height:28px;
 border-radius:9px;border:1px solid #76579a;background:#38234e;font-size:13px;font-weight:800;
}
#lesson-explanation .ll-part-selector-two button.active .ll-part-number{background:#ab75e4;color:#190f25;border-color:#d9b2ff}
#lesson-explanation .ll-part-controls{justify-content:flex-end;margin-top:17px}
#lesson-explanation .ll-part-controls button{min-height:43px;min-width:0}
@media(max-width:430px){
 #lesson-explanation .ll-part-selector-two{gap:7px}
 #lesson-explanation .ll-part-selector-two button{min-height:44px;padding:9px 6px;font-size:12px;gap:6px}
 #lesson-explanation .ll-part-selector-two .ll-part-number{width:25px;height:25px;flex-basis:25px}
}


/* v44: permanent earned-XP history inside the existing profile. */
.ll-xp-history{margin:22px 0;padding:21px;border:1px solid #57436d;border-radius:20px;background:linear-gradient(140deg,#231a37,#171328)}
.ll-xp-history .section-heading{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin:0 0 16px}
.ll-xp-history .section-heading h3{font-size:clamp(18px,3vw,24px);margin:5px 0}
.ll-xp-history .section-heading p{color:#bdaeca;font-size:13px;line-height:1.55;margin:4px 0 0}
.ll-xp-row{display:flex;align-items:center;gap:11px;padding:12px 2px;border-top:1px solid #4d3b60;min-width:0}
.ll-xp-symbol{flex:0 0 38px;width:38px;height:38px;display:grid;place-items:center;border-radius:12px;background:#543477;color:#e8c4ff;font-size:20px}
.ll-xp-detail{display:flex;flex:1;flex-direction:column;min-width:0;gap:4px}
.ll-xp-detail strong{font-size:14px;line-height:1.45;overflow-wrap:anywhere;color:#f3e8ff}
.ll-xp-detail small{font-size:11px;line-height:1.4;color:#bca8cc;overflow-wrap:anywhere}
.ll-xp-amount{font:750 13px ui-monospace,monospace;white-space:nowrap;color:#c9f5da;background:#214938;border-radius:10px;padding:7px 9px}
.ll-xp-more>summary{cursor:pointer;padding:14px 0;color:#d6bbf4;list-style-position:inside;font-size:13px;font-weight:700}
.ll-xp-more>summary:focus-visible{outline:2px solid #b98cf4;outline-offset:2px}
@media(max-width:430px){.ll-xp-history{padding:15px}.ll-xp-row{gap:8px}.ll-xp-symbol{flex-basis:31px;width:31px;height:31px}.ll-xp-amount{font-size:11px;padding:6px}.ll-xp-detail strong{font-size:13px}}