/* Facil' STAPS · v1.1 — palette four gradients supplied by user.
   Reference: warm #E67200 -> #FFCB00, turquoise #0189AC -> #003F61,
   grey #858585 -> #4B4B4B, red #A50001 -> #4F0000, background #222222. */
:root {
  color-scheme: dark;
  --bg:#222222;
  --paper:#2e2e2e;
  --white:#fffdee;
  --ink:#fffdee;
  --muted:#bcbcbc;
  --accent:#ffc900;
  --accent2:#e67200;
  --light:#353535;
  --purple:#0189ac;
  --sienna:#a50001;
  --sage:#0189ac;
  --border:#494949;
  --nav:#2e2e2e;
  --shadow:0 18px 55px #00000055;
  --r:25px;
  --gold:linear-gradient(140deg,#e67200 0%,#f09e00 47%,#ffcb00 100%);
  --ocean:linear-gradient(150deg,#0189ac 0%,#007a9c 45%,#003f61 100%);
  --steel:linear-gradient(150deg,#858585 0%,#666666 55%,#4b4b4b 100%);
  --ruby:linear-gradient(150deg,#a50001 0%,#850001 50%,#4f0000 100%);
}
* { -webkit-tap-highlight-color:transparent; }
html {scroll-behavior:smooth;}
body {background:#222222;color:var(--ink);}
body::before {content:"";position:fixed;top:0;left:0;right:0;height:5px;z-index:99;background:linear-gradient(90deg,#e67200 0%,#ffcb00 24.9%,#0189ac 25%,#003f61 49.9%,#858585 50%,#4b4b4b 74.9%,#a50001 75%,#4f0000 100%);pointer-events:none;}
button:focus-visible,a:focus-visible,select:focus-visible {outline:3px solid #ffc900;outline-offset:3px;}
.app {padding-top:29px;}
.top {padding-bottom:12px;border-bottom:1px solid #3a3a3a;margin-bottom:18px;}
.brand .plain {color:#fffdee;font-weight:900;letter-spacing:2px;}
.brand .script {filter:drop-shadow(0 4px 14px #e6720040);}
.pill {background:#303030;color:#f0efec;border:1px solid #505050;}
.pill.star {background:var(--gold);color:#222222;border:0;box-shadow:0 5px 18px #ed8a0030;}
.circle-btn {background:#333333;border-color:#565656;color:#fffdee;}
.nav {background:#333333;border:1px solid #4b4b4b;padding:5px;}
.nav button {color:#d6d6d6;}
.nav button:hover {color:#ffcb00;}
.nav button.active {background:var(--gold);color:#252525;box-shadow:0 6px 18px #14141444;}
.hero {background:linear-gradient(116deg,#003f61 0%,#007ba0 57%,#0189ac 100%);border:1px solid #1885a4;box-shadow:0 20px 50px #00000030;}
.hero::before {border:1px solid #ffffff44;box-shadow:0 0 0 50px #ffffff0d,0 0 0 100px #ffffff08;}
.hero::after {content:"";position:absolute;bottom:0;left:0;width:100%;height:5px;background:var(--gold);z-index:3;}
.eyebrow {color:#ffcc31;}
.hero h1 {color:#fffdee;}
.hero h1 em {color:#ffca00;}
.hero p {color:#ecf8fb;}
.hero-body img {opacity:.93;mix-blend-mode:normal;filter:contrast(1.13) saturate(1.06);}
.hero-body::after {color:#ffda69;}
.btn {background:var(--gold);color:#232323;box-shadow:0 8px 20px #b579003b;}
.btn:hover {background:linear-gradient(130deg,#f18e00,#ffdb29);color:#161616;}
.btn.secondary {background:#3b3b3b;color:#fffdee;border:1px solid #5a5a5a;box-shadow:none;}
.btn.secondary:hover {background:#484848;}
.btn.ghost {border-color:#747474;background:transparent;color:#f5f5ee;box-shadow:none;}
.btn.outline-white {color:#fffdee;background:#002d4377;border-color:#c8e7edaa;box-shadow:none;}
.stat {background:#2d2d2d;border-color:#444444;}
.stat-icon {background:var(--gold);color:#222222;}
.stat:nth-child(2) .stat-icon {background:var(--ocean);color:#fffdee;}
.stat:nth-child(3) .stat-icon {background:var(--steel);color:#fffdee;}
.stat-number {color:#fffdee;}
.stat-label {color:#c3c3c3;}
.section-title h2 {color:#fffdee;}
.section-title p {color:#aeaeae;}
.text-link {color:#ffca00;}
.course {background:#2d2d2d;border-color:#4b4b4b;}
.course:hover {box-shadow:0 14px 40px #00000070;border-color:#7c7c7c;}
.course-media {background:var(--gold);}
.course:nth-child(4n+1) .course-media {background:var(--gold);}
.course:nth-child(4n+2) .course-media {background:var(--ocean);}
.course:nth-child(4n+3) .course-media {background:var(--steel);}
.course:nth-child(4n+4) .course-media {background:var(--ruby);}
.course-media img {filter:saturate(.85) contrast(1.12);object-fit:contain;opacity:.94;mix-blend-mode:normal;}
.course-media::after {background:linear-gradient(90deg,#0c1b251e,transparent 70%);}
.course-badge {color:#222222;background:#fffdeeee;box-shadow:0 2px 8px #00000018;}
.course-kicker {color:#ffd047;}
.course h3 {color:#fffdee;}
.course-foot {color:#bdbdbd;}
.tiny-progress {background:#4b4b4b;}
.tiny-progress>span {background:var(--gold);}
.course:nth-child(4n+2) .tiny-progress>span {background:var(--ocean);}
.course:nth-child(4n+3) .tiny-progress>span {background:var(--steel);}
.course:nth-child(4n+4) .tiny-progress>span {background:var(--ruby);}
.side-card,.lesson-detail,.quiz-setup,.quiz-board,.result {background:#2e2e2e;border-color:#505050;}
.side-title {color:#fffdee;}
.streak-ring {background:conic-gradient(#ffcb00 var(--degree,0deg),#484848 0);}
.streak-inner {background:#2d2d2d;}
.streak-inner strong {color:#ffca00;}
.streak-inner span,.goal {color:#bcbcbc;}
.day-dots span {background:#474747;color:#d7d7d7;}
.day-dots span.done {background:var(--gold);color:#171717;}
.side-visual {background:linear-gradient(130deg,#003f61,#0189ac);}
.side-visual>span {background:#ffcb00;color:#1e1e1e;}
.quote {color:#fffdee;}
.chip {background:#373737;border-color:#5a5a5a;color:#e2e2e2;}
.chip:hover {background:#414141;}
.chip.selected {background:var(--gold);border-color:#f7a000;color:#232323;}
.lesson {background:#2f2f2f;border-color:#4b4b4b;}
.lesson .image {background:linear-gradient(160deg,#164256,#00445a);}
.lesson h3 {color:#fffdee;}
.lesson p {color:#bfbfbf;}
.lesson .arrow {color:#ffca00;}
.detail-cover {background:linear-gradient(130deg,#003f61,#017b9e);}
.image-tip {background:#ffcb00;color:#202020;}
.detail-content h2 {color:#fffdee;}
.detail-content p {color:#dedede;}
.bullet-box {background:#383838;border:1px solid #545454;}
.bullet-box b {color:#ffcb00;}
.bullet-box li {color:#e0e0e0;}
.keyline {border-left:4px solid #ffcb00;background:#393939;color:#fffdee;}
.back {color:#ffca00;}
.setup-img {background:linear-gradient(115deg,#00546e,#0189ac);}
.setup-title {color:#fffdee;}
.settinglabel {color:#ffcb00;}
.select {background:#353535;color:#fffdee;border-color:#676767;}
.seg button {background:#383838;color:#dddddd;border-color:#565656;}
.seg button.active {background:#004f6b;border-color:#0a9dbe;color:#fffdee;}
.qmeta {color:#c3c3c3;}
.qbar {background:#4c4c4c;}
.qbar span {background:var(--gold);}
.qtitle {color:#fffdee;}
.qimage {background:linear-gradient(125deg,#003f61,#036b8a);}
.qimage .pin {background:#ffcb00;border-color:#fffdee;box-shadow:0 0 0 6px #e6720080,0 8px 18px #0006;}
.qimage small {color:#252525;background:#fffdeee6;}
.answer {background:#373737;border-color:#5b5b5b;color:#fffdee;}
.answer:hover:not(:disabled) {border-color:#ffcb00;background:#464039;}
.answer span {background:#555555;color:#fffdee;}
.answer.chosen {background:#034b68;border-color:#04a4c9;}
.answer.chosen span {background:#0189ac;color:#fffdee;}
.answer.correct {background:#06455a;border-color:#0399ba;}
.answer.correct span {background:#0189ac;color:#fffdee;}
.answer.wrong {background:#4f1717;border-color:#c83634;}
.answer.wrong span {background:#a50001;color:#fffdee;}
.feedback {background:#153d49;border-color:#0189ac;color:#fffdee;}
.feedback.bad {background:#451b1b;border-color:#a50001;}
.result h2 {color:#fffdee;}
.result strong.score {color:#ffcb00;}
.wrongitem {background:#404040;border-left:3px solid #a50001;color:#fffdee;}
.empty {background:#313131;border:1px dashed #666666;}
.legend {color:#ababab;border-top:1px solid #4e4e4e;}
.legend button,.legend a {color:#ffcb00;}
.badge-label {color:#ffca00;}
.modal {background:#090909e8;}
.modal-inner {background:#303030;color:#fffdee;border:1px solid #606060;}
.modal-inner a {color:#ffca00;}
.modal-close {background:#ffc900;color:#222222;}
.toast {background:#003f61;color:#fffdee;border:1px solid #0189ac;}
.revision-title {color:#fffdee;}
.sep {background:#4b4b4b;}
.smallprint {color:#b6b6b6;}
/* Existing inline background on daily quiz tile: provide full-surface gradient */
#page-home > .quiz-setup[style] {background:#2d2d2d!important;border:1px solid #585858;}
#page-home > .quiz-setup > div:first-child {background:var(--ruby)!important;}
/* Keep the four gradients permanently visible in a small quiet identity strip */
.palette-mark {display:grid;grid-template-columns:repeat(4,1fr);gap:7px;height:7px;margin:-3px 0 22px;}
.palette-mark span {border-radius:9px;}
.palette-mark span:nth-child(1) {background:var(--gold);}
.palette-mark span:nth-child(2) {background:var(--ocean);}
.palette-mark span:nth-child(3) {background:var(--steel);}
.palette-mark span:nth-child(4) {background:var(--ruby);}
@media(max-width:850px) {.app {padding-top:24px;} }
@media(max-width:540px){
  .top {border-bottom:0;margin-bottom:13px;padding-bottom:3px;}
  .palette-mark {height:6px;gap:6px;margin:0 0 15px;}
  .hero {border-radius:24px;}
  .hero h1 em {color:#ffce12;}
  .mobile-nav {background:#282828f5;border-top:1px solid #616161;box-shadow:0 -8px 30px #00000045;}
  .mobile-nav button {color:#c3c3c3;}
  .mobile-nav button.active {color:#ffcb00;}
  .mobile-nav button i {color:inherit;}
}
/* Brand is aligned on a common centre line, cursive “Facil’” + plain “STAPS”. */
.brand {align-items:center;gap:8px;}
.brand .script {transform:rotate(-3deg);}
@media(max-width:540px){
 .brand {gap:5px;}
 .brand .script {width:100px;height:42px;}
 .brand .plain {font-size:20px;}
}