:root{--bg:#050b16;--panel:#0a1728;--panel2:#0d1b31;--line:rgba(126,185,255,.18);--text:#f8fbff;--muted:#91a3c5;--pink:#ff2d8f;--purple:#7b4dff;--blue:#2f9bff;--green:#35db86;--gold:#ffd36b}*{box-sizing:border-box}.xtecl-body{margin:0;min-height:100vh;background:radial-gradient(circle at 35% 0,#152044,#050b16 55%,#02050c);color:var(--text);font-family:Inter,system-ui,-apple-system,Segoe UI,sans-serif}.xtecl-top{position:sticky;top:0;z-index:30;display:grid;grid-template-columns:auto 1fr minmax(260px,520px) auto;gap:20px;align-items:center;padding:15px 24px;border-bottom:1px solid var(--line);background:rgba(4,9,18,.88);backdrop-filter:blur(16px)}.xtecl-logo{display:flex;gap:10px;align-items:center;color:#fff;text-decoration:none}.xtecl-logo span{width:34px;height:34px;border-radius:11px;background:linear-gradient(135deg,var(--purple),var(--pink));display:grid;place-items:center;font-weight:900}.xtecl-logo b{font-size:22px}.xtecl-search input{width:100%;border:1px solid var(--line);background:#0c1424;color:#fff;border-radius:14px;padding:12px 16px}.xtecl-top nav{display:flex;gap:12px}.xtecl-top nav a{color:#dbe7ff;text-decoration:none;border:1px solid var(--line);padding:9px 12px;border-radius:13px}.xtecl-app{display:grid;grid-template-columns:230px 1fr;min-height:calc(100vh - 66px)}.xtecl-side{border-right:1px solid var(--line);padding:20px;background:#060d18}.xtecl-side a{display:block;color:#dce8ff;text-decoration:none;padding:12px;border-radius:12px;margin-bottom:4px}.xtecl-side a.active{background:linear-gradient(135deg,rgba(123,77,255,.35),rgba(255,45,143,.18))}.xtecl-upgrade{margin-top:28px;border:1px solid var(--line);border-radius:18px;background:#0a1728;padding:16px}.xtecl-main{padding:24px}.xtecl-stats{display:grid;grid-template-columns:repeat(5,1fr);gap:14px;margin-bottom:18px}.xtecl-card,.xtecl-stats article{border:1px solid var(--line);border-radius:20px;background:linear-gradient(180deg,rgba(13,27,49,.96),rgba(6,13,25,.96));box-shadow:0 20px 60px rgba(0,0,0,.28)}.xtecl-stats article{padding:16px}.xtecl-stats small,.muted{color:var(--muted)}.xtecl-stats h2{margin:6px 0 0}.xtecl-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px}.xtecl-card{padding:20px}.course-row{display:grid;grid-template-columns:135px 1fr auto;gap:14px;align-items:center;border:1px solid rgba(126,185,255,.12);border-radius:18px;background:#081425;padding:12px;margin:10px 0}.course-thumb,.hero-video,.lesson-video{border-radius:16px;background:linear-gradient(135deg,#0a1830,#2b1b53 50%,#091629);display:grid;place-items:center;min-height:88px;position:relative;overflow:hidden}.course-thumb:after,.hero-video:after,.lesson-video:after{content:'▶';width:54px;height:54px;border-radius:50%;display:grid;place-items:center;background:linear-gradient(135deg,var(--purple),var(--blue));box-shadow:0 0 32px rgba(123,77,255,.5)}.progress{height:8px;border-radius:20px;background:#13243d;overflow:hidden}.progress span{display:block;height:100%;background:linear-gradient(90deg,var(--blue),var(--purple),var(--pink))}.course-card-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}.course-mini{border:1px solid var(--line);border-radius:18px;background:#081425;padding:12px}.course-mini .course-thumb{min-height:120px}.xtecl-cats{display:grid;grid-template-columns:repeat(6,1fr);gap:12px}.xtecl-cats span{border:1px solid var(--line);background:#0a1728;border-radius:16px;padding:20px;text-align:center}.course-detail{display:grid;grid-template-columns:1.15fr .85fr;gap:20px}.hero-video{min-height:320px}.course-info h1{font-size:34px;margin:0 0 8px}.course-buy{display:grid;gap:10px}.course-buy a,.course-buy button,.xtecl-btn{background:linear-gradient(135deg,var(--pink),var(--purple));border:0;border-radius:12px;color:#fff;padding:13px 18px;text-align:center;text-decoration:none;font-weight:900}.course-buy .ghost,.xtecl-btn.ghost{background:#0a1728;border:1px solid var(--line)}.tabs{display:flex;gap:20px;border-bottom:1px solid var(--line);margin:18px 0}.tabs b{padding:0 0 13px;color:#bad8ff}.lesson-layout{display:grid;grid-template-columns:1fr 330px;gap:18px}.lesson-video{min-height:520px}.lesson-list article{display:grid;grid-template-columns:1fr auto;gap:10px;border:1px solid rgba(126,185,255,.12);border-radius:14px;padding:12px;margin-bottom:8px}.lesson-list article.active{background:rgba(123,77,255,.2);border-color:rgba(123,77,255,.45)}.cert-ring{width:150px;height:150px;border-radius:50%;background:conic-gradient(var(--purple) 75%,#13243d 0);display:grid;place-items:center;margin:auto}.cert-ring div{width:108px;height:108px;border-radius:50%;background:#0a1728;display:grid;place-items:center;text-align:center}.cert-list article{display:grid;grid-template-columns:96px 1fr auto;gap:14px;align-items:center;border:1px solid var(--line);border-radius:18px;padding:14px;margin-bottom:12px}.cert-paper{height:64px;border-radius:12px;background:#f4e7ce;color:#111;display:grid;place-items:center;font-weight:900}.instructor-layout{display:grid;grid-template-columns:1fr 1.4fr;gap:18px}.chart{height:240px;border-radius:18px;background:linear-gradient(180deg,rgba(47,155,255,.16),rgba(255,45,143,.08));display:grid;place-items:center;color:var(--muted)}.builder{display:grid;grid-template-columns:220px 1fr 280px;gap:16px}.builder input,.builder select,.builder textarea{width:100%;border:1px solid var(--line);border-radius:12px;background:#091529;color:#fff;padding:12px;margin-bottom:10px}.checklist p{color:var(--green)}.xtecl-mobile{padding:14px 12px 96px;background:linear-gradient(180deg,#06111e,#030713);min-height:100vh;color:#fff}.xtecl-mobile-head{display:flex;justify-content:space-between;align-items:center}.xtecl-mobile-stats{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}.xtecl-mobile-stats article,.xtecl-mobile-card{border:1px solid var(--line);border-radius:18px;background:#0a1728;padding:14px}.xtecl-mobile-course{display:grid;grid-template-columns:92px 1fr;gap:12px;margin-bottom:12px}.xtecl-mobile-tabs{display:flex;gap:8px;overflow:auto;margin:12px 0}.xtecl-mobile-tabs span{white-space:nowrap;border:1px solid var(--line);border-radius:999px;padding:8px 13px;background:#0a1728}.xtecl-mobile-lesson{padding:12px 12px 100px;color:#fff}.xtecl-mobile-lesson .lesson-video{min-height:260px}.xtecl-mobile-bottom{position:fixed;left:0;right:0;bottom:60px;padding:12px;background:#040812;border-top:1px solid var(--line);display:flex;gap:10px}.xtecl-mobile-bottom a{flex:1;text-align:center;border-radius:14px;background:linear-gradient(135deg,var(--purple),var(--pink));color:#fff;text-decoration:none;padding:13px}@media(max-width:980px){.xtecl-top{grid-template-columns:1fr auto}.xtecl-search,.xtecl-top nav{display:none}.xtecl-app{grid-template-columns:1fr}.xtecl-side{display:none}.xtecl-main{padding:12px}.xtecl-stats,.course-card-grid,.xtecl-cats{grid-template-columns:repeat(2,1fr)}.xtecl-grid,.course-detail,.lesson-layout,.instructor-layout,.builder{grid-template-columns:1fr}}

/* B1 v4: learner access remains open; creator tools are eligibility-gated */
.xtecl-disabled{opacity:.58;cursor:not-allowed;background:rgba(255,255,255,.04)!important;border:1px solid rgba(255,255,255,.1)}
.xtecl-mobile-creator{display:block;margin:10px 0 16px;padding:12px 14px;border-radius:14px;text-align:center;color:#fff;text-decoration:none;background:linear-gradient(135deg,#7b4dff,#ff2d8f);font-weight:800}
.xtecl-mobile-creator.locked{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);color:#93a4c4}

/* B3: ECL exact-mockup visual polish without hardcoded business rules */
.xtecl-course-art{width:100%;height:100%;min-height:88px;border-radius:16px;background:radial-gradient(circle at 28% 20%,rgba(96,91,255,.55),rgba(7,16,31,.96) 62%);position:relative;overflow:hidden;display:grid;place-items:center}
.xtecl-course-art:before{content:'';position:absolute;inset:18px 16px;border-radius:14px;border:1px solid rgba(255,255,255,.18);background:linear-gradient(135deg,rgba(255,255,255,.08),rgba(255,45,143,.09))}
.xtecl-course-art:after{content:'▶';position:relative;width:54px;height:54px;border-radius:50%;display:grid;place-items:center;background:linear-gradient(135deg,var(--purple),var(--blue));box-shadow:0 0 32px rgba(123,77,255,.5);font-weight:900}.xtecl-course-art.design{background:radial-gradient(circle at 28% 20%,rgba(255,45,143,.48),rgba(7,16,31,.96) 62%)}.xtecl-course-art.business{background:radial-gradient(circle at 28% 20%,rgba(255,190,75,.45),rgba(7,16,31,.96) 62%)}.xtecl-course-art.marketing{background:radial-gradient(circle at 28% 20%,rgba(53,219,134,.38),rgba(7,16,31,.96) 62%)}
.course-thumb.has-art:after,.hero-video.has-art:after,.lesson-video.has-art:after{display:none}.xtecl-creator-chip{display:inline-flex;align-items:center;gap:8px;border:1px solid var(--line);border-radius:999px;padding:8px 12px;background:rgba(255,255,255,.04);color:#dbe7ff;text-decoration:none}.xtecl-creator-chip.primary{background:linear-gradient(135deg,var(--purple),var(--pink));font-weight:900}.xtecl-home-actions{display:flex;gap:10px;flex-wrap:wrap;margin:10px 0 18px}.xtecl-mobile-creator-note{font-size:12px;color:var(--muted);margin:-8px 0 12px}.xtecl-schedule-pill{display:inline-flex;align-items:center;gap:6px;border:1px solid rgba(126,185,255,.18);background:rgba(255,255,255,.04);border-radius:999px;padding:5px 9px;color:#c9d8ff;font-size:12px;margin-top:6px}.xtecl-paid-badge{display:inline-block;border-radius:8px;background:rgba(255,45,143,.16);color:#ff85c2;border:1px solid rgba(255,45,143,.28);padding:4px 8px;font-size:11px;font-weight:900}.xtecl-catalog-note{border:1px dashed rgba(126,185,255,.18);border-radius:18px;padding:14px;background:rgba(255,255,255,.03);color:var(--muted);margin-top:12px}

/* XTFAME_MOBILE_SHOP_ECL_SCALE_R1_START */
@media (max-width: 700px) {
  .xtecl-mobile,
  .xtecl-mobile-lesson,
  .xtecl-main {
    padding-left: 10px !important;
    padding-right: 10px !important;
    padding-bottom: 92px !important;
    font-size: 13px !important;
    line-height: 1.35 !important;
  }

  .xtecl-mobile-head { align-items: flex-start !important; gap: 8px !important; }
  .xtecl-mobile-head h1,
  .xtecl-mobile h1,
  .xtecl-mobile-lesson h1 {
    font-size: 22px !important;
    line-height: 1.08 !important;
    letter-spacing: -.3px !important;
    margin: 0 0 5px !important;
  }
  .xtecl-mobile h2,
  .xtecl-mobile-lesson h2 {
    font-size: 16px !important;
    line-height: 1.16 !important;
    margin: 13px 0 8px !important;
  }
  .xtecl-mobile h3,
  .xtecl-mobile-lesson h3 { font-size: 13px !important; }
  .xtecl-mobile .muted,
  .xtecl-mobile-lesson .muted { font-size: 12px !important; }

  .xtecl-mobile-creator {
    padding: 10px 12px !important;
    border-radius: 13px !important;
    margin: 9px 0 12px !important;
    font-size: 13px !important;
  }
  .xtecl-mobile-creator-note { font-size: 11px !important; line-height: 1.35 !important; }

  .xtecl-mobile-stats { gap: 8px !important; }
  .xtecl-mobile-stats article,
  .xtecl-mobile-card {
    padding: 11px !important;
    border-radius: 15px !important;
  }
  .xtecl-mobile-stats h2 { font-size: 19px !important; margin: 4px 0 0 !important; }
  .xtecl-mobile-stats small { font-size: 11px !important; }

  .xtecl-mobile-course {
    grid-template-columns: 72px minmax(0,1fr) !important;
    gap: 10px !important;
    margin-bottom: 9px !important;
  }
  .xtecl-mobile-course b { font-size: 13px !important; line-height: 1.25 !important; }
  .xtecl-mobile-course strong { font-size: 13px !important; }
  .xtecl-mobile-course .course-thumb,
  .xtecl-mobile-course .course-thumb.has-art {
    min-height: 70px !important;
    height: 70px !important;
    border-radius: 13px !important;
  }
  .course-thumb:after,
  .hero-video:after,
  .lesson-video:after {
    width: 42px !important;
    height: 42px !important;
    font-size: 14px !important;
  }

  .progress { height: 6px !important; }
  .xtecl-mobile-tabs { gap: 7px !important; margin: 9px 0 !important; }
  .xtecl-mobile-tabs span {
    padding: 7px 10px !important;
    font-size: 11px !important;
  }

  .xtecl-mobile-lesson .lesson-video {
    min-height: min(46vh, 230px) !important;
    border-radius: 16px !important;
  }
  .xtecl-mobile-bottom {
    bottom: 58px !important;
    padding: 9px 10px !important;
    gap: 8px !important;
  }
  .xtecl-mobile-bottom a {
    padding: 11px !important;
    border-radius: 12px !important;
    font-size: 13px !important;
  }

  .course-detail,
  .lesson-layout,
  .builder,
  .instructor-layout,
  .xtecl-grid {
    gap: 12px !important;
  }
  .xtecl-card { padding: 13px !important; border-radius: 16px !important; }
  .hero-video { min-height: min(48vh, 240px) !important; border-radius: 16px !important; }
  .course-info h1 { font-size: 22px !important; }
  .course-buy a,
  .course-buy button,
  .xtecl-btn { padding: 11px 13px !important; border-radius: 12px !important; font-size: 13px !important; }
}
/* XTFAME_MOBILE_SHOP_ECL_SCALE_R1_END */

/* XTFAME_MOBILE_SHOP_ECL_NAV_FIT_R14_START */
@media (max-width: 700px) {
  :root {
    --xtfame-mobile-top-height: 44px;
    --xtfame-mobile-bottom-height: 58px;
  }

  .xtshop-mobile-page,
  .xtshop-mobile-product,
  .xtshop-mobile-checkout-page,
  .xtshop-mobile-order-page,
  .seller-mobile,
  .xtecl-mobile,
  .xtecl-mobile-lesson,
  .xtecl-mobile-creator-page {
    box-sizing: border-box !important;
    width: 100% !important;
    max-width: 100% !important;
    min-height: 100dvh !important;
    overflow-x: hidden !important;
    padding-top: calc(var(--xtfame-mobile-top-height) + 10px) !important;
    padding-left: 10px !important;
    padding-right: 10px !important;
    padding-bottom: calc(var(--xtfame-mobile-bottom-height) + 20px) !important;
  }

  .xtshop-mobile-page > :first-child,
  .xtshop-mobile-product > :first-child,
  .xtshop-mobile-checkout-page > :first-child,
  .xtshop-mobile-order-page > :first-child,
  .seller-mobile > :first-child,
  .xtecl-mobile > :first-child,
  .xtecl-mobile-lesson > :first-child,
  .xtecl-mobile-creator-page > :first-child {
    margin-top: 0 !important;
  }

  .xtshop-mobile-hero {
    min-height: 112px !important;
    padding: 12px !important;
    margin-top: 0 !important;
    overflow: hidden !important;
  }
  .xtshop-mobile-hero h1 {
    font-size: 18px !important;
    line-height: 1.05 !important;
    margin: 0 0 7px !important;
  }
  .xtshop-mobile-hero p { font-size: 11px !important; margin-bottom: 7px !important; }
  .xtshop-mobile-hero a { padding: 7px 10px !important; font-size: 11px !important; }

  .xtshop-mobile-benefits,
  .xtshop-mobile-cats { gap: 6px !important; }
  .xtshop-mobile-benefits span,
  .xtshop-mobile-cats a,
  .xtshop-mobile-cats span {
    min-height: 31px !important;
    font-size: 9.5px !important;
    padding: 7px 5px !important;
  }

  .xtshop-mobile-head h2,
  .xtecl-mobile h2,
  .xtecl-mobile-lesson h2,
  .xtecl-mobile-creator-page h2 {
    font-size: 15px !important;
  }

  .xtshop-mobile-card,
  .xtecl-mobile-card {
    border-radius: 14px !important;
  }

  .xtshop-mobile-media { height: 104px !important; }
  .xtshop-mobile-card .title { font-size: 11.5px !important; }
  .xtshop-mobile-card b { font-size: 12px !important; }

  .xtecl-mobile-head h1,
  .xtecl-mobile-lesson h1,
  .xtecl-mobile-creator-page h1 {
    font-size: 20px !important;
    line-height: 1.08 !important;
  }

  .xtecl-mobile-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
  }
  .xtecl-mobile-stats article {
    min-height: 70px !important;
    padding: 10px !important;
  }
  .xtecl-mobile-stats h2 { font-size: 17px !important; }

  .xtecl-mobile-course {
    grid-template-columns: 68px minmax(0,1fr) !important;
    gap: 9px !important;
  }
  .xtecl-mobile-course .course-thumb,
  .xtecl-mobile-course .course-thumb.has-art {
    height: 66px !important;
    min-height: 66px !important;
  }

  .xtecl-mobile-form label { display:block !important; font-size: 11px !important; color:#9fc7ff !important; margin: 8px 0 5px !important; }
  .xtecl-mobile-form input,
  .xtecl-mobile-form select,
  .xtecl-mobile-form textarea {
    width: 100% !important;
    min-height: 40px !important;
    border-radius: 12px !important;
    padding: 10px !important;
    font-size: 13px !important;
    box-sizing: border-box !important;
    background: rgba(5,16,35,.86) !important;
    border: 1px solid rgba(71,132,209,.35) !important;
    color: #fff !important;
  }
  .xtecl-mini-row {
    display:flex !important;
    justify-content:space-between !important;
    gap:8px !important;
    padding:10px 0 !important;
    border-bottom:1px solid rgba(255,255,255,.08) !important;
  }
  .xtecl-mini-row small { color:#9fb4d6 !important; }
}
/* XTFAME_MOBILE_SHOP_ECL_NAV_FIT_R14_END */