/* =========================================================
   LinguaSphere V51 · Core Pages Polish
   V22 visual DNA, refined for Landing / My LinguaSphere / Courses
   ========================================================= */
:root{
  --v51-ink:#10283f;
  --v51-navy:#102a43;
  --v51-navy-2:#173b59;
  --v51-copy:#6d7c8e;
  --v51-line:#dbe4eb;
  --v51-surface:#ffffff;
  --v51-soft:#f7fafc;
  --v51-teal:#40aeb0;
  --v51-blue:#5a70df;
  --v51-violet:#7563d7;
  --v51-rose:#c45a78;
  --v51-gold:#d4ad55;
  --v51-shadow:0 20px 54px rgba(16,42,67,.09);
  --v51-shadow-soft:0 10px 28px rgba(16,42,67,.065);
}

/* ---------- Landing ---------- */
body.ls-landing{
  background:
    radial-gradient(circle at 7% 0,rgba(90,112,223,.16),transparent 28%),
    radial-gradient(circle at 94% 8%,rgba(196,90,120,.11),transparent 23%),
    linear-gradient(180deg,#f8fafc,#edf3f7) !important;
}
.ls-landing .landing-shell{width:min(1500px,calc(100% - 28px));padding-bottom:76px}
.ls-landing .landing-nav{
  border-radius:19px;
  background:linear-gradient(135deg,rgba(14,35,57,.975),rgba(20,51,78,.97));
  box-shadow:0 18px 46px rgba(12,31,51,.22);
}
.ls-landing .landing-nav:after{
  content:"";position:absolute;left:28px;right:28px;bottom:-1px;height:1px;
  background:linear-gradient(90deg,transparent,#74d0d4 25%,#8a7be2 55%,transparent);
  opacity:.7;
}
.ls-landing .ls-mark{background:rgba(255,255,255,.035)}
.ls-landing .landing-nav nav a{position:relative;padding:8px 1px}
.ls-landing .landing-nav nav a:after{
  content:"";position:absolute;left:0;right:100%;bottom:2px;height:1px;background:#91e0e7;transition:.2s ease
}
.ls-landing .landing-nav nav a:hover:after{right:0}
.ls-landing .landing-hero{gap:16px;padding-top:30px}
.ls-landing .landing-hero>section,.ls-landing .landing-hero>aside{
  min-height:600px;border-color:#d9e3eb;box-shadow:var(--v51-shadow)
}
.ls-landing .landing-hero>section{
  padding:52px 52px 46px;
  background:
    radial-gradient(circle at 87% 17%,rgba(64,174,176,.16),transparent 25%),
    radial-gradient(circle at 71% 88%,rgba(196,90,120,.11),transparent 27%),
    linear-gradient(180deg,#fff,#fbfcfd);
}
.ls-landing .landing-hero>section:before{
  content:"LINGUASPHERE / 01";position:absolute;right:34px;top:28px;
  color:#a0adba;font:800 8px "Roboto Mono",monospace;letter-spacing:.16em
}
.ls-landing .landing-hero h1{max-width:850px;font-size:clamp(64px,7vw,108px);line-height:.86}
.ls-landing .landing-hero h1 em{color:var(--v51-rose)}
.ls-landing .landing-hero .lead{max-width:730px;font-family:Montserrat,Arial,sans-serif;font-size:16px;line-height:1.75;color:#617083}
.ls-landing .hero-actions{margin-top:30px}
.ls-landing .hero-actions .land-btn{min-height:44px;padding-inline:17px}
.ls-landing .landing-hero>aside{
  padding:38px;
  background:
    radial-gradient(circle at 95% 0,rgba(64,174,176,.18),transparent 28%),
    linear-gradient(150deg,#10243c,#173958 72%,#1b425f);
}
.ls-landing .world-path{gap:8px;margin-top:18px}
.ls-landing .world-path article{
  position:relative;padding:17px 17px 16px 20px;border-radius:14px;background:rgba(255,255,255,.055);
  transition:background .2s ease,transform .2s ease
}
.ls-landing .world-path article:before{content:"";position:absolute;left:0;top:15px;bottom:15px;width:2px;border-radius:999px;background:#78d3dc}
.ls-landing .world-path article:nth-child(2):before{background:#d4ad55}
.ls-landing .world-path article:nth-child(3):before{background:#c45a78}
.ls-landing .world-path article:nth-child(4):before{background:#8d75d8}
.ls-landing .world-path article:hover{background:rgba(255,255,255,.09);transform:translateX(2px)}
.ls-landing .landing-proof{
  display:grid;grid-template-columns:repeat(4,1fr);gap:0;margin:2px 0 18px;
  border:1px solid var(--v51-line);border-radius:18px;background:rgba(255,255,255,.9);box-shadow:var(--v51-shadow-soft);overflow:hidden
}
.ls-landing .landing-proof article{padding:18px 20px;border-right:1px solid var(--v51-line)}
.ls-landing .landing-proof article:last-child{border-right:0}
.ls-landing .landing-proof b{display:block;font:400 27px/1 "DM Serif Display",Georgia,serif;color:#193a58}
.ls-landing .landing-proof span{display:block;margin-top:5px;color:#79889a;font:700 8px "Roboto Mono",monospace;letter-spacing:.08em;text-transform:uppercase}
.ls-landing .land-section{padding:34px;border-radius:25px;box-shadow:var(--v51-shadow-soft)}
.ls-landing .land-head{margin-bottom:22px}
.ls-landing .land-head h2{font-size:42px;line-height:1.03;color:#17334f}
.ls-landing .path-grid{gap:12px}
.ls-landing .path-card{min-height:268px;padding:24px;border-radius:18px;box-shadow:0 7px 18px rgba(20,47,73,.035);transition:transform .2s ease,box-shadow .2s ease}
.ls-landing .path-card:hover{transform:translateY(-3px);box-shadow:0 15px 35px rgba(20,47,73,.08)}
.ls-landing .path-card h3{font-size:29px;color:#183650}
.ls-landing .identity-grid article{position:relative;padding:26px 24px 24px;overflow:hidden}
.ls-landing .identity-grid article:after{content:"";position:absolute;right:-32px;bottom:-38px;width:90px;height:90px;border:1px solid rgba(90,112,223,.13);border-radius:50%}
.ls-landing .identity-grid article:nth-child(2):after{border-color:rgba(64,174,176,.2)}
.ls-landing .identity-grid article:nth-child(3):after{border-color:rgba(196,90,120,.17)}
.ls-landing .landing-cta{padding:38px 40px;background:radial-gradient(circle at 82% 30%,rgba(64,174,176,.22),transparent 25%),linear-gradient(145deg,#10243c,#173a58)}

/* ---------- My LinguaSphere ---------- */
body.secure-portal.v51-profile{background:radial-gradient(circle at 7% 0,#dfe9ff,transparent 26%),linear-gradient(180deg,#f6f8fa,#edf2f6)}
.v51-profile .sp-shell{padding-bottom:80px}
.v51-profile .sp-hero{padding-top:24px}
.v51-profile .sp-hero>section,.v51-profile .sp-hero>aside{box-shadow:var(--v51-shadow);border-color:var(--v51-line)}
.v51-profile .sp-hero>section{position:relative;overflow:hidden;background:radial-gradient(circle at 92% 12%,rgba(64,174,176,.15),transparent 24%),#fff}
.v51-profile .sp-hero>section:after{content:"MY / LEARNING / SPACE";position:absolute;right:26px;bottom:18px;color:#d5dde5;font:900 8px "Roboto Mono",monospace;letter-spacing:.16em}
.v51-profile .sp-hero h1{font-size:clamp(50px,5.6vw,78px)}
.v51-profile .sp-hero>aside{background:radial-gradient(circle at 85% 10%,rgba(64,174,176,.22),transparent 28%),linear-gradient(150deg,#10253f,#193d5a)}
.v51-profile .sp-avatar{box-shadow:0 12px 28px rgba(62,169,173,.18)}
.v51-profile .sp-quickbar{
  display:grid;grid-template-columns:repeat(5,1fr);gap:8px;margin:0 0 14px
}
.v51-profile .sp-quickbar a{
  display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:58px;padding:12px 14px;
  border:1px solid var(--v51-line);border-radius:14px;background:#fff;color:#294a65;text-decoration:none;box-shadow:0 7px 20px rgba(16,42,67,.045);font-size:10px;font-weight:800
}
.v51-profile .sp-quickbar a span{color:#788797;font:800 8px "Roboto Mono",monospace}
.v51-profile .sp-quickbar a:hover{transform:translateY(-2px);box-shadow:0 13px 28px rgba(16,42,67,.08)}
.v51-profile .sp-add-course{display:flex;justify-content:flex-end;margin:0 0 12px}
.v51-profile .sp-add-course a{padding:9px 12px;border:1px solid #d5dee8;border-radius:999px;background:#fff;color:#294761;text-decoration:none;font:800 9px Montserrat;box-shadow:0 5px 14px rgba(16,42,67,.04)}
.v51-profile .sp-metrics{gap:10px;margin-bottom:16px}
.v51-profile .sp-metrics article{position:relative;padding:18px 17px;border-radius:15px;overflow:hidden;box-shadow:var(--v51-shadow-soft)}
.v51-profile .sp-metrics article:after{content:"";position:absolute;right:-22px;bottom:-25px;width:65px;height:65px;border-radius:50%;border:1px solid rgba(90,112,223,.13)}
.v51-profile .sp-metrics article:nth-child(2):after{border-color:rgba(64,174,176,.18)}
.v51-profile .sp-metrics article:nth-child(3):after{border-color:rgba(196,90,120,.18)}
.v51-profile .sp-metrics article:nth-child(4):after{border-color:rgba(212,173,85,.2)}
.v51-profile .sp-metrics b{font-size:34px}
.v51-profile .sp-grid{gap:14px}
.v51-profile .sp-panel{padding:21px;border-radius:17px;box-shadow:var(--v51-shadow-soft)}
.v51-profile .sp-panel header{padding-bottom:13px;margin-bottom:12px;border-bottom:1px solid #edf1f4}
.v51-profile .sp-panel h2{font-size:25px;color:#294a65}
.v51-profile .sp-list article,.v51-profile .sp-list>a,.v51-profile .sp-list>div{border-radius:12px}

/* ---------- Courses catalogue ---------- */
body.v51-courses{background:radial-gradient(circle at 7% 0,#dfe8ff,transparent 28%),linear-gradient(180deg,#f5f7fa,#edf2f6) !important}
.v51-courses .app-shell{width:min(calc(100% - 36px),1420px)}
.v51-courses .site-header{padding-top:14px;margin-bottom:10px}
.v51-courses .site-header__inner{min-height:66px;padding:10px 13px;border:1px solid rgba(255,255,255,.15);border-radius:17px;background:rgba(16,42,67,.97);box-shadow:0 15px 40px rgba(16,42,67,.17)}
.v51-courses .brand__name,.v51-courses .brand i{background:none;-webkit-background-clip:initial;background-clip:initial;-webkit-text-fill-color:initial;color:#fff}
.v51-courses .brand__name{font:400 20px "DM Serif Display",Georgia,serif}
.v51-courses .brand__icon{color:#8ed9dd;font-size:27px}
.v51-courses .main-nav__link{color:#c7d3df;font-size:10px;border-radius:999px;padding:8px 10px}
.v51-courses .main-nav__link:hover,.v51-courses .main-nav__link.is-active{color:#fff;background:rgba(255,255,255,.09)}
.v51-courses .user-summary__name{color:#fff}.v51-courses .user-avatar{background:linear-gradient(135deg,#5a70df,#40aeb0)}
.v51-courses .auth-actions .btn-outline{border-color:rgba(255,255,255,.22);color:#fff;background:rgba(255,255,255,.06)}
.v51-courses .breadcrumbs{margin:13px 0 15px}
.v51-courses .courses-hero{min-height:270px;padding:36px 38px;border:1px solid var(--v51-line);border-radius:24px;background:radial-gradient(circle at 89% 10%,rgba(64,174,176,.16),transparent 23%),radial-gradient(circle at 75% 95%,rgba(117,99,215,.11),transparent 27%),#fff;box-shadow:var(--v51-shadow)}
.v51-courses .courses-hero:before{content:"COURSE CATALOGUE / LINGUASPHERE";position:absolute;right:32px;bottom:22px;color:#c8d1da;font:900 8px "Roboto Mono",monospace;letter-spacing:.15em}
.v51-courses .courses-hero::after{background:transparent;border:1px solid rgba(90,112,223,.13);box-shadow:0 0 0 34px rgba(64,174,176,.045),0 0 0 68px rgba(117,99,215,.035)}
.v51-courses .courses-hero h1{font:400 clamp(55px,6vw,82px)/.9 "DM Serif Display",Georgia,serif;color:#173650;letter-spacing:-.04em}
.v51-courses .courses-hero .page-lead{max-width:760px;color:#667689;font-size:14px;line-height:1.7}
.v51-courses .courses-hero__stats{gap:8px}
.v51-courses .course-stat{min-width:105px;padding:16px 14px;border:1px solid #e0e6ec;border-radius:13px;background:rgba(255,255,255,.86);box-shadow:0 8px 20px rgba(16,42,67,.045)}
.v51-courses .course-stat strong{font:400 29px "DM Serif Display",Georgia,serif;color:#4968d8}
.v51-courses .courses-toolbar{padding:16px 18px;margin-bottom:10px;border-radius:16px;background:rgba(255,255,255,.92);box-shadow:var(--v51-shadow-soft)}
.v51-courses .course-search{min-height:47px;border-color:#d8e1e9;background:#fbfcfd}
.v51-courses .course-filter select{min-height:47px;border-color:#d8e1e9;color:#36526a}
.v51-courses .section-heading{margin-top:29px;padding-inline:2px}
.v51-courses .section-heading h2{font:400 31px "DM Serif Display",Georgia,serif;color:#294a65}
.v51-courses .section-heading>p{color:#7a8795}
.v51-courses .courses-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.v51-courses .course-card{min-height:390px;border-color:#dce4eb;border-radius:16px;background:#fff;box-shadow:0 12px 32px rgba(16,42,67,.07)}
.v51-courses .course-card:hover{transform:translateY(-4px);box-shadow:0 22px 46px rgba(16,42,67,.11)}
.v51-courses .course-card__cover{min-height:116px;background:linear-gradient(135deg,#2e9fa5,#526fe2)}
.v51-courses .course-card[data-course-id="english-b2-c1"] .course-card__cover{background:linear-gradient(135deg,#315b8a,#5a70df)}
.v51-courses .course-card[data-course-id="english-bridge-a2-b1"] .course-card__cover{background:linear-gradient(135deg,#397e7d,#62b1ac)}
.v51-courses .course-card[data-course-id="article-lab"] .course-card__cover{background:linear-gradient(135deg,#a94f67,#d77982)}
.v51-courses .course-card[data-course-id="political-english"] .course-card__cover{background:linear-gradient(135deg,#6f3e52,#ad5d75)}
.v51-courses .course-card[data-course-id="literary-english"] .course-card__cover{background:linear-gradient(135deg,#594a75,#8571a8)}
.v51-courses .course-card[data-course-id="chinese-hsk3-hsk4"] .course-card__cover{background:linear-gradient(135deg,#934b49,#c9685f)}
.v51-courses .course-card__cover:before{content:"";position:absolute;left:18px;bottom:16px;width:38px;height:1px;background:rgba(255,255,255,.55)}
.v51-courses .course-card__badge{border:1px solid rgba(255,255,255,.18);backdrop-filter:blur(7px)}
.v51-courses .course-card__body{padding:19px}
.v51-courses .course-chip{border:1px solid #e2e7ed;background:#f8fafc;color:#536f87}
.v51-courses .course-card h3{font:400 23px/1.05 "DM Serif Display",Georgia,serif;color:#24445f}
.v51-courses .course-card__description{font-size:11px;line-height:1.55}
.v51-courses .course-card__features{font-size:10px;line-height:1.45}
.v51-courses .course-card__features i{color:#3da5aa}
.v51-courses .course-card__footer .btn-primary{background:#173b59;box-shadow:none}
.v51-courses .course-card__footer .btn-primary:hover{background:#214b6d}
.v51-courses .recommended-card{border-color:#d9e3eb;background:linear-gradient(135deg,rgba(64,174,176,.09),rgba(90,112,223,.07)),#fff;box-shadow:var(--v51-shadow-soft)}

@media(max-width:1120px){
  .ls-landing .landing-proof{grid-template-columns:1fr 1fr}
  .ls-landing .landing-proof article:nth-child(2){border-right:0}
  .ls-landing .landing-proof article:nth-child(-n+2){border-bottom:1px solid var(--v51-line)}
  .v51-profile .sp-quickbar{grid-template-columns:repeat(3,1fr)}
  .v51-courses .courses-grid{grid-template-columns:1fr 1fr}
}
@media(max-width:760px){
  .ls-landing .landing-hero>section{padding:31px 27px}
  .ls-landing .landing-hero>section:before{display:none}
  .ls-landing .landing-proof{grid-template-columns:1fr}
  .ls-landing .landing-proof article{border-right:0;border-bottom:1px solid var(--v51-line)}
  .ls-landing .landing-proof article:last-child{border-bottom:0}
  .v51-profile .sp-quickbar{grid-template-columns:1fr 1fr}
  .v51-courses .courses-grid{grid-template-columns:1fr}
  .v51-courses .courses-hero{padding:28px 24px}
  .v51-courses .courses-hero:before{display:none}
}
@media(max-width:520px){.v51-profile .sp-quickbar{grid-template-columns:1fr}}