/* Sixlab responsive layout: full-size content, readable text and touch targets. */
html{box-sizing:border-box;-webkit-text-size-adjust:100%;scroll-padding-top:180px}
*,*::before,*::after{box-sizing:inherit}
body{margin:0}
#app .maker-community :is(.hero-carousel,.learning-section){display:none}
#app{width:100%;min-width:0}
#app .layout-container{width:min(100% - 48px,1600px);min-width:0;max-width:1600px;margin-inline:auto}
#app .layout-container>.main-content{width:100%;min-width:0;max-width:100%}
#app .header-container{width:100%;min-width:0;max-width:100%;gap:20px;padding:12px 20px}
#app .global-header .nav-menu{min-width:0;gap:3px}
#app .global-header .nav-item{padding:12px 14px}
#app .global-header .nav-label{font-size:clamp(15px,1.2vw,20px)}
#app .global-header .search-wrapper{width:clamp(190px,21vw,320px)}
#app .main-content :is(.content-wrapper,.community-container,.forum-home,.layout-wrapper,.profile-layout,.page-layout){min-width:0;max-width:100%}
#app .main-content :is(.main-content,.project-content,.resource-info,.course-copy){min-width:0}
#app :is(.post-body,.post-introduction,.editor-content,.resource-desc){overflow-wrap:anywhere}
#app :is(.post-body,.editor-content) :is(img,video,iframe){max-width:100%}
#app :is(.post-body,.editor-content) img{height:auto}
#app :is(.post-body,.editor-content) pre{max-width:100%;overflow-x:auto;white-space:pre}
#app :is(.post-body,.editor-content) table{display:block;max-width:100%;overflow-x:auto}
#app .forum-home{grid-template-columns:210px minmax(0,1fr) 290px;gap:20px}
#app .maker-community .content-wrapper{grid-template-columns:minmax(0,1fr) 320px;gap:24px}
#app .post-detail-container .layout-wrapper{grid-template-columns:minmax(0,1fr) 280px;gap:24px}
#app :is(.post-title,.project-title,.resource-title){overflow-wrap:anywhere}
#app :is(.pagination,.post-meta,.project-meta,.resource-meta){flex-wrap:wrap}
#app :is(.el-dialog,.upload-modal){max-width:calc(100vw - 24px)}

@media(max-width:1250px){
 #app .layout-container{width:calc(100% - 32px)}
 #app .header-container{display:grid;grid-template-columns:1fr auto;gap:8px 16px;padding:10px 14px}
 #app .global-header .logo-section{grid-column:1;grid-row:1}
 #app .global-header .logo img{width:42px!important;height:42px;object-fit:contain}
 #app .global-header .logo-text{font-size:22px}
 #app .header-actions{grid-column:2;grid-row:1}
 #app .global-header .search-wrapper{width:260px}
 #app .global-header .nav-menu{grid-column:1/-1;grid-row:2;display:flex;justify-content:flex-start;overflow-x:auto;overscroll-behavior-inline:contain;scrollbar-width:none;padding:3px 0 5px;max-width:100%}
 #app .global-header .nav-menu::-webkit-scrollbar{display:none}
 #app .global-header .nav-menu>a{flex:none;min-height:44px}
 #app .global-header .nav-label{font-size:16px}
 #app .forum-home{grid-template-columns:minmax(0,1fr) 280px}
 #app .forum-home .left-sidebar{display:contents;grid-column:1/-1;position:static;width:100%}
 #app .forum-home .left-sidebar>.sidebar-section{grid-column:1/-1;order:0;width:100%}
 #app .forum-home .left-sidebar>.rank-section{order:3}
 #app .forum-home .left-sidebar .nav-list{display:flex;flex-direction:row;align-items:center;gap:6px;overflow-x:auto;padding-bottom:4px;max-width:100%}
 #app .forum-home .left-sidebar .nav-item{flex:none;white-space:nowrap;width:auto;min-height:44px;padding:8px 14px}
 #app .forum-home .left-sidebar .sidebar-section{padding:12px}
}

@media(max-width:1000px){
 #app .course-grid{grid-template-columns:minmax(0,1fr)}
 #app .maker-community .content-wrapper,#app .post-detail-container .layout-wrapper{display:grid;grid-template-columns:minmax(0,1fr)}
 #app .maker-community .sidebar,#app .post-detail-container .sidebar{display:block;width:100%;position:static;max-width:100%}
 #app .post-detail-container .layout-wrapper>.main-content{order:0;min-width:0}
 #app .post-detail-container .layout-wrapper>.sidebar{order:1}
 #app .profile-layout{display:flex;flex-direction:column;gap:16px}
 #app .profile-layout>.sidebar{display:block;width:100%;position:static}
 #app .profile-layout .sidebar .nav-menu{display:flex;overflow-x:auto;gap:8px}
 #app .profile-layout .sidebar .nav-item{flex:none;width:auto;white-space:nowrap}
 #app .resources-page .page-layout{grid-template-columns:minmax(0,1fr)}
 #app .resources-page .sidebar{display:block;width:100%;position:static}
 #app .resources-page .category-list{display:flex;flex-direction:row;overflow-x:auto;gap:8px}
}

@media(max-width:767px){
 html{scroll-padding-top:0}
 body{background:#f6f8fb}
 #app .layout-container{width:100%;min-width:0}
 #app .global-header{border-radius:0;position:static;top:auto}
 #app .header-container{padding:8px 12px 4px;gap:6px 12px;grid-template-columns:minmax(0,1fr) auto}
 #app .global-header .logo{gap:8px}
 #app .global-header .logo img{width:36px!important;height:36px}
 #app .global-header .logo-text{display:inline-block;font-size:21px}
 #app .header-actions{display:contents}
 #app .header-actions .action-buttons{grid-row:1;grid-column:2;justify-self:end}
 #app .header-actions .search-wrapper{display:block;grid-row:3;grid-column:1/-1;width:100%;padding-bottom:6px}
 #app .global-header .search-input .el-input__wrapper{min-height:40px;border-radius:10px 0 0 10px}
 #app .global-header .el-input-group__append{padding:0 16px;border-radius:0 10px 10px 0}
 #app .global-header .nav-menu{display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr));gap:4px;padding:4px 0;align-items:center;width:100%;overflow:visible}
 #app .global-header .nav-menu .nav-item{padding:9px 6px;border-radius:10px;justify-content:center}
 #app .global-header .nav-label{font-size:15px}
 #app .global-header .nav-dot{display:none}
 #app .global-header .nav-menu>a{font-size:14px;min-height:44px;white-space:nowrap;justify-content:center}
 #app .user-avatar-btn,#app .action-btn{width:40px;height:40px;min-width:40px;padding:5px}
 #app .user-dropdown{right:0;left:auto;min-width:0;width:min(280px,calc(100vw - 24px))}
 .forum-lab-mobile,.maker-lab-mobile,.mobile-discovery{display:none!important}
 #app .maker-community,#app .community-page,#app .resources-page,#app .profile-container,#app .my-posts-container{width:100%;padding:12px}
 #app .maker-community .content-wrapper{gap:16px;padding:0}
 #app .maker-community .main-content{gap:16px}
 #app .maker-community :is(.learning-section,.hot-projects,.user-card,.hot-topics,.featured-content){padding:16px;border-radius:16px;box-shadow:0 3px 14px #24364b08;border:1px solid #e8edf3}
 #app .maker-community .section-title{font-size:19px;line-height:1.4;padding-left:10px;border-left-width:3px;margin:0 0 16px}
 #app .maker-community .section-header{margin-bottom:16px}
 #app .hero-carousel{height:clamp(170px,48vw,310px);min-height:0;border-radius:14px;margin-bottom:20px}
 #app .hero-carousel .carousel-slide{min-height:0;background-size:contain!important;background-repeat:no-repeat;background-position:center}
 #app .carousel-arrow{width:36px;height:36px;opacity:1}
 #app .learning-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
 #app .learning-item{min-width:0;min-height:64px;height:clamp(64px,22vw,88px);padding:0;background-size:contain;background-repeat:no-repeat;background-position:center}
 #app .section-title{font-size:21px;margin-bottom:12px}
 #app .project-card{width:100%;padding:12px;border-radius:14px;gap:12px;flex-direction:column;align-items:stretch}
 #app .project-image,#app .project-image-wrapper{width:100%;height:190px;flex:none;border-radius:10px;overflow:hidden}
 #app .project-image img,#app .project-image-wrapper img{width:100%;height:100%;object-fit:cover}
 #app .project-content{padding:0;width:100%;min-width:0;height:auto;min-height:0;justify-content:flex-start;gap:8px}
 #app .project-card h3,#app .project-title{font-size:18px;line-height:1.55;margin:0;height:auto;min-height:0}
 #app .project-card p,#app .project-desc{font-size:14px;line-height:1.7;margin:0 0 4px}
 #app .project-meta{gap:8px;justify-content:space-between;font-size:12px}
 #app .project-meta .author{min-width:0;flex-wrap:wrap;gap:6px}
 #app .project-meta .stats{flex-wrap:wrap;gap:10px}
 #app .forum-home{display:flex;flex-direction:column;gap:14px;padding:0;width:100%}
 #app .forum-home .left-sidebar{display:contents;order:0;position:static}
 #app .forum-home>.main-content{order:1}
 #app .forum-home .right-sidebar{display:block;order:2;position:static;width:100%}
 #app .forum-home .left-sidebar .section-title{display:block;font-size:14px;margin:0 0 8px}
 #app .forum-home .left-sidebar .nav-list{gap:6px;max-width:100%;overflow-x:auto}
 #app .forum-home .left-sidebar .nav-item{font-size:14px;padding:8px 12px;min-height:44px}
 #app .projects-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:14px}
 #app .sort-navbar{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));padding:8px;gap:6px;overflow:visible}
 #app .sort-tab{flex:none;padding:10px 12px;min-width:0;min-height:44px;white-space:nowrap}
 #app .sort-label{font-size:14px}
 #app .sort-icon{font-size:16px}
 #app .pagination{gap:6px;margin-top:20px;font-size:13px;justify-content:center}
 #app .page-numbers{display:flex;gap:4px;flex-wrap:wrap;justify-content:center}
 #app .page-btn,#app .page-number{min-width:36px;min-height:40px;padding:6px 8px}
 #app .maker-shop-page{padding:24px 0}
 #app .maker-shop-page .container{width:100%;padding:0 12px}
 #app .page-title{font-size:28px;margin:0 0 8px}
 #app .page-subtitle{font-size:14px;line-height:1.7;margin:0 0 28px}
 #app .course-theme{gap:4px;padding-left:12px;margin-bottom:16px}
 #app .course-theme h2{font-size:23px}
 #app .course-theme span{font-size:12px}
 #app .course-grid{grid-template-columns:minmax(0,1fr);gap:12px}
 #app .course-card{display:grid;grid-template-columns:32px minmax(0,1fr) clamp(76px,23vw,100px);gap:10px;padding:14px 12px;border-radius:16px;align-items:center;min-height:132px;border-color:#e5ebf2;box-shadow:0 3px 12px #24364b04}
 #app .course-card .course-icon{grid-column:1;grid-row:1;width:32px!important;height:42px;min-height:42px;font-size:21px;border-radius:9px}
 #app .course-copy{grid-column:2;grid-row:1;width:auto;min-width:0}
 #app .course-copy small{font-size:13px;color:#536479}
 #app .course-copy h2{font-size:18px;line-height:1.4;margin:4px 0}
 #app .course-copy p{font-size:14px;line-height:1.65}
 #app .course-card .course-preview{grid-column:3;grid-row:1;width:100%!important;height:116px!important;object-fit:contain;margin:0;align-self:center}
 #app .protocol-theme,#app .esp32-theme{margin-top:30px}
 #app .post-detail-container{width:100%;padding:0}
 #app .post-detail-container .layout-wrapper{gap:16px;padding:0}
 #app .post-detail{padding:18px 14px;border-radius:14px}
 #app .post-header,#app .post-content,#app .post-introduction{padding-inline:0}
 #app .post-title{font-size:25px;line-height:1.45;margin:4px 0 16px}
 #app .post-body{font-size:16px;line-height:1.9;word-break:normal;overflow-wrap:anywhere}
 #app .post-body :is(h1,h2,h3){line-height:1.5}
 #app .post-body h1{font-size:26px}
 #app .post-body h2{font-size:23px}
 #app .post-body h3{font-size:20px}
 #app .post-body :is(iframe,video){width:100%;aspect-ratio:16/9;height:auto}
 #app .post-body pre{font-size:13px;padding:12px}
 #app .post-footer,#app .post-stats{display:flex;flex-wrap:wrap;gap:10px}
 #app .stat-btn{min-height:44px;padding:9px 13px}
 #app .comments-section{padding:18px 14px}
 #app .comment-input-container{gap:8px}
 #app .comment-input-wrapper{min-width:0}
 #app .comment-input-footer{flex-wrap:wrap;gap:8px}
 #app .post-editor-container{width:100%;padding:12px}
 #app .post-editor{padding:16px 12px;border-radius:14px}
 #app .editor-title{font-size:24px}
 #app :is(.title-input,.introduction-textarea,.section-select,input,textarea,select){max-width:100%;font-size:16px}
 #app .editor-toolbar{flex-wrap:wrap;gap:4px;padding:8px}
 #app .toolbar-group{flex-wrap:wrap;gap:3px}
 #app .toolbar-btn{min-width:38px;min-height:40px}
 #app .editor-content{min-height:300px;padding:12px;max-width:100%}
 #app .editor-footer{flex-direction:column;align-items:stretch;gap:12px}
 #app .footer-actions{display:flex;gap:10px}
 #app .footer-actions button{min-height:44px;flex:1}
 #app .resource-item{flex-wrap:wrap;padding:14px;gap:12px}
 #app .resource-info{flex:1;min-width:180px}
 #app .resource-actions{width:100%;display:flex;justify-content:flex-end}
 #app .resource-title{font-size:18px}
 #app .resources-page .hero-banner{padding:28px 0;margin-bottom:18px;border-radius:16px;background:linear-gradient(135deg,#176f63,#20a780)}
 #app .resources-page .hero-banner h1{font-size:28px;line-height:1.3;margin:0 0 10px}
 #app .resources-page .hero-banner p{font-size:14px;line-height:1.6;margin:0}
 #app .resources-page>.container{padding:0}
 #app .resources-page .sidebar-card,#app .resources-page .search-bar{padding:14px;border-radius:14px}
 #app .profile-container .content-section{padding:18px 12px}
 #app .settings-form{width:100%;max-width:100%}
 #app .profile-container .nav-menu{flex-direction:row}
 #app .avatar-section{flex-wrap:wrap;gap:14px}
 #app .el-dialog{width:calc(100vw - 24px)!important;margin:8vh auto 0!important}
 #app .el-dialog__body{padding:12px;max-height:75dvh;overflow-y:auto}
 #app .upload-modal{width:calc(100vw - 24px);max-height:90dvh;overflow:auto}
 .modal-overlay{padding:12px}
 .modal-overlay .modal-container{width:min(100%,420px);max-width:100%;max-height:calc(100dvh - 24px);overflow-y:auto;padding:26px 18px}
 .modal-container input{font-size:16px}
 .el-message{max-width:calc(100vw - 24px);white-space:normal}
 .el-message__content{overflow-wrap:anywhere}
 #app .global-footer{display:none}
 #app .footer-container{width:100%;padding:0}
 #app .footer-content{grid-template-columns:repeat(2,minmax(0,1fr));gap:24px 14px}
 #app .footer-section{min-width:0}
 #app .footer-bottom{flex-direction:column;gap:12px;font-size:12px;line-height:1.7;overflow-wrap:anywhere}
 #app .footer-links-inline{flex-wrap:wrap;justify-content:center}
 body #sixlab-partner-showcase{margin:0 0 16px;padding:14px;border-radius:16px;max-width:100%;min-width:0;border-color:#e3ece7;box-shadow:0 3px 14px #244b3a04}
 body #sixlab-partner-showcase .sp-heading{align-items:flex-start;flex-wrap:nowrap;gap:10px;padding:0;margin-bottom:12px}
 body #sixlab-partner-showcase .sp-heading>div:first-child{min-width:0}
 body #sixlab-partner-showcase .sp-eyebrow{display:none}
 body #sixlab-partner-showcase h2{font-size:18px;line-height:1.4}
 body #sixlab-partner-showcase .sp-subtitle{font-size:11px;line-height:1.6;margin-top:5px}
 body #sixlab-partner-showcase .sp-actions{gap:6px}
 body #sixlab-partner-showcase .sp-actions button{min-height:36px;padding:7px 9px;font-size:11px}
 body #sixlab-partner-showcase .sp-group{gap:10px;padding-right:10px}
 body #sixlab-partner-showcase .sp-card{width:112px;padding:10px;border-radius:12px;background:#fbfdfb}
 body #sixlab-partner-showcase .sp-card img{width:90px;height:50px}
 body #sixlab-partner-showcase .sp-name{max-width:90px;min-height:30px;margin-top:7px;font-size:11px;line-height:1.4;white-space:normal;overflow:visible;text-overflow:clip}
}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}