 @media (max-width:768px){body{font-size:15px;line-height:1.6}p,span,a,li,td,div{font-size:inherit}.nav-menu a,.nav a,.top-nav a,.jsj-nav a{font-size:14px !important;padding:10px 12px !important;min-height:44px;display:inline-flex;align-items:center}button,.btn,a[href],.theme-btn,.theme-item,.tab-item{min-height:44px;min-width:44px;padding:10px 16px;-webkit-tap-highlight-color:transparent;touch-action:manipulation}.theme-btn,.theme-item,[class*="theme"] button{width:48px !important;height:48px !important;padding:6px !important;margin:4px;border-radius:12px;transition:transform 0.2s,box-shadow 0.2s}.theme-btn:active,.theme-item:active{transform:scale(0.92);box-shadow:0 2px 8px rgba(0,0,0,0.2)}.jsj-mobile-tabbar{position:fixed;bottom:0;left:0;right:0;height:60px;background:rgba(255,255,255,0.95);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-top:1px solid rgba(0,0,0,0.1);display:flex;justify-content:space-around;align-items:center;z-index:9999;padding-bottom:env(safe-area-inset-bottom);box-shadow:0 -2px 10px rgba(0,0,0,0.05)}.jsj-mobile-tabbar .tab-item{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;text-decoration:none;color:#666;font-size:11px;padding:6px 4px;min-height:56px;transition:color 0.2s}.jsj-mobile-tabbar .tab-item.active{color:var(--primary-color,#c9a96e)}.jsj-mobile-tabbar .tab-icon{font-size:22px;margin-bottom:2px}.jsj-mobile-tabbar .tab-label{font-size:11px;line-height:1.2}body{padding-bottom:70px}table{display:block;overflow-x:auto;-webkit-overflow-scrolling:touch;font-size:13px}th,td{padding:8px 10px;white-space:nowrap}.card,.panel,.box,[class*="card"],[class*="panel"]{margin:12px 8px;padding:16px;border-radius:12px}h1{font-size:24px !important;line-height:1.3}h2{font-size:20px !important;line-height:1.35}h3{font-size:18px !important;line-height:1.4}h4{font-size:16px !important}input,select,textarea{font-size:16px;padding:12px;min-height:44px;border-radius:8px}img{max-width:100%;height:auto}a:active,button:active,.btn:active,.tab-item:active{opacity:0.7;transform:scale(0.98)}.desktop-only,.hide-mobile{display:none !important}.mobile-only,.show-mobile{display:block !important}}@media (max-width:480px){body{font-size:14px}h1{font-size:22px !important}h2{font-size:18px !important}h3{font-size:16px !important}.card,.panel,.box{margin:8px 6px;padding:12px}.jsj-mobile-tabbar .tab-label{font-size:10px}.jsj-mobile-tabbar .tab-icon{font-size:20px}}@media (max-height:500px) and (orientation:landscape){.jsj-mobile-tabbar{height:45px}.jsj-mobile-tabbar .tab-item{min-height:42px;padding:4px}.jsj-mobile-tabbar .tab-icon{font-size:18px}.jsj-mobile-tabbar .tab-label{display:none}body{padding-bottom:50px}}@supports (padding-bottom:env(safe-area-inset-bottom)){.jsj-mobile-tabbar{padding-bottom:calc(8px + env(safe-area-inset-bottom))}}@media (prefers-reduced-motion:reduce){*{animation-duration:0.01ms !important;animation-iteration-count:1 !important;transition-duration:0.01ms !important}}@media (prefers-contrast:high){body{background:#fff !important;color:#000 !important}a,button{text-decoration:underline}}@media (max-width:768px){.container,.wrapper,.main,.content,[class*="container"],[class*="wrapper"]{width:100% !important;max-width:100% !important;padding:0 12px !important;margin:0 auto !important;box-sizing:border-box}html,body{overflow-x:hidden;max-width:100%}*{box-sizing:border-box}.sidebar,.side-nav,.left-panel,.right-panel,[class*="sidebar"],[class*="side-nav"],[class*="side-panel"]{width:100% !important;float:none !important;display:block !important;margin:0 0 16px 0 !important;padding:12px !important}.main-content,.content-area,[class*="main-content"],[class*="content-area"]{width:100% !important;float:none !important;margin:0 !important;padding:0 !important}.grid,.card-grid,.material-grid,.brand-grid,.color-grid,[class*="-grid"]{grid-template-columns:1fr !important;gap:12px !important;padding:0 8px !important}[style*="grid-template-columns:1fr 1fr"],[style*="grid-template-columns:repeat(2"]{grid-template-columns:1fr !important}.table-responsive,[class*="table"]{display:block;width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch;border:1px solid #ddd;border-radius:8px}table{width:100%;min-width:600px;font-size:13px}th,td{padding:10px 8px !important;white-space:nowrap}.quote-header,.quote-summary,.quote-total,[class*="quote-header"],[class*="quote-summary"],[class*="quote-total"]{padding:12px !important;margin:8px !important}.quote-item,.quote-row,.material-row,[class*="quote-item"],[class*="quote-row"]{padding:10px 8px !important;font-size:13px !important}.material-select,.material-picker,.category-select,select[class*="material"],select[class*="category"]{width:100% !important;min-height:44px !important;font-size:15px !important;padding:10px !important;margin:4px 0 !important}input[type="number"],.quantity-input,.price-input,[class*="quantity"],[class*="price-input"]{width:100% !important;min-height:44px !important;font-size:16px !important;padding:10px !important}.material-card,.material-item,.material-detail,[class*="material-card"],[class*="material-item"]{padding:12px !important;margin:8px !important;border-radius:10px !important}.material-image,.material-thumb,[class*="material-image"],[class*="material-thumb"]{width:100% !important;height:auto !important;max-height:200px !important;object-fit:cover !important}.filter-bar,.filter-panel,.search-bar,[class*="filter-bar"],[class*="search-bar"]{padding:10px !important;margin:8px !important}.filter-bar select,.filter-bar input,.search-bar input{width:100% !important;min-height:44px !important;margin:4px 0 !important}.recipe-card,.recipe-detail,.bom-table,[class*="recipe-card"],[class*="recipe-detail"]{padding:12px !important;margin:8px !important}.bom-table table{min-width:500px}.ingredient-row,.formula-row,[class*="ingredient"],[class*="formula-row"]{padding:8px !important;font-size:13px !important}.craft-card,.craft-detail,.step-card,[class*="craft-card"],[class*="step-card"]{padding:12px !important;margin:8px !important}.step-number,.step-icon,[class*="step-number"],[class*="step-icon"]{width:36px !important;height:36px !important;font-size:16px !important;line-height:36px !important}.step-content,[class*="step-content"]{padding-left:12px !important}.color-card,.color-swatch,.color-item,[class*="color-card"],[class*="color-swatch"]{width:100% !important;min-height:80px !important;margin:4px !important;padding:8px !important;border-radius:8px !important}.color-grid{grid-template-columns:repeat(2,1fr) !important;gap:8px !important}.color-info,[class*="color-info"]{font-size:12px !important;padding:4px !important}.brand-card,.brand-item,.brand-detail,[class*="brand-card"],[class*="brand-item"]{padding:12px !important;margin:8px !important}.brand-logo,[class*="brand-logo"]{width:60px !important;height:60px !important;object-fit:contain !important}.brand-compare-table table{min-width:700px}.nav,.navbar,.top-nav,.header,[class*="navbar"],[class*="top-nav"]{padding:8px 12px !important;flex-wrap:wrap !important}.nav a,.navbar a,.top-nav a{padding:8px 10px !important;font-size:13px !important;min-height:40px !important}.desktop-nav,.main-nav,.header-nav,[class*="desktop-nav"],[class*="main-nav"]{display:none !important}.btn-group,.button-group,.action-bar,[class*="btn-group"],[class*="button-group"]{display:flex !important;flex-wrap:wrap !important;gap:8px !important}.btn-group button,.btn-group .btn,.button-group button,.button-group .btn{flex:1 1 auto !important;min-width:100px !important;white-space:nowrap !important}.modal,.dialog,.popup,.overlay,[class*="modal"],[class*="dialog"],[class*="popup"]{width:95% !important;max-width:95% !important;max-height:90vh !important;overflow-y:auto !important;padding:16px !important;margin:5% auto !important;border-radius:12px !important}.modal-header,.dialog-header,[class*="modal-header"],[class*="dialog-header"]{padding:12px !important;font-size:16px !important}.modal-body,.dialog-body,[class*="modal-body"],[class*="dialog-body"]{padding:12px !important;max-height:60vh !important;overflow-y:auto !important}.modal-footer,.dialog-footer,[class*="modal-footer"],[class*="dialog-footer"]{padding:12px !important;display:flex !important;gap:8px !important}.modal-footer button,.dialog-footer button{flex:1 !important;min-height:44px !important}.tabs,.tab-nav,[class*="tabs"],[class*="tab-nav"]{display:flex !important;overflow-x:auto !important;-webkit-overflow-scrolling:touch !important;scrollbar-width:none !important;gap:4px !important;padding:0 8px !important}.tabs::-webkit-scrollbar,.tab-nav::-webkit-scrollbar{display:none !important}.tab,.tab-item,[class*="tab-item"]{flex-shrink:0 !important;padding:10px 16px !important;min-height:44px !important;white-space:nowrap !important;font-size:14px !important}.accordion,.collapse,.panel,[class*="accordion"],[class*="collapse"]{margin:8px !important}.accordion-header,.collapse-header,[class*="accordion-header"],[class*="collapse-header"]{padding:14px 12px !important;min-height:48px !important;font-size:15px !important}.accordion-body,.collapse-body,[class*="accordion-body"],[class*="collapse-body"]{padding:12px !important}.rating,.stars,.score,[class*="rating"],[class*="stars"],[class*="score"]{font-size:16px !important}.score-badge,.dim-badge,.level-badge,[class*="score-badge"],[class*="dim-badge"]{padding:4px 10px !important;font-size:12px !important;border-radius:12px !important}img,video,iframe{max-width:100% !important;height:auto !important}.video-container,.image-container,[class*="video-container"],[class*="image-container"]{position:relative !important;padding-bottom:56.25% !important;height:0 !important;overflow:hidden !important}.video-container iframe,.video-container video,.image-container img{position:absolute !important;top:0 !important;left:0 !important;width:100% !important;height:100% !important}ul,ol{padding-left:20px !important}li{padding:4px 0 !important;line-height:1.6 !important}pre,code{font-size:12px !important;overflow-x:auto !important;padding:10px !important;border-radius:6px !important}blockquote,.alert,.notice,.tip,.warning,[class*="alert"],[class*="notice"],[class*="tip"]{padding:12px !important;margin:8px !important;border-radius:8px !important;font-size:14px !important}.pagination,[class*="pagination"]{display:flex !important;justify-content:center !important;flex-wrap:wrap !important;gap:4px !important;padding:16px 0 !important}.pagination a,.pagination button,.pagination span{min-width:36px !important;min-height:36px !important;padding:6px 10px !important;font-size:14px !important}.breadcrumb,[class*="breadcrumb"]{font-size:12px !important;padding:8px 12px !important;overflow-x:auto !important;white-space:nowrap !important}.progress,.progress-bar,[class*="progress"]{height:12px !important;border-radius:6px !important}.tag,.badge,.label,[class*="tag"],[class*="badge"],[class*="label"]{display:inline-block !important;padding:3px 8px !important;font-size:11px !important;border-radius:10px !important;margin:2px !important}hr,.divider,.separator,[class*="divider"],[class*="separator"]{margin:16px 0 !important;border-width:1px !important}.empty,.no-data,.placeholder,[class*="empty"],[class*="no-data"]{padding:40px 20px !important;text-align:center !important}.empty-icon,[class*="empty-icon"]{font-size:48px !important;margin-bottom:12px !important}.loading,.spinner,[class*="loading"],[class*="spinner"]{padding:20px !important;text-align:center !important}.tooltip,[class*="tooltip"]{font-size:12px !important;padding:6px 10px !important;max-width:200px !important}}@media (max-width:480px){.color-grid{grid-template-columns:1fr !important}.btn-group button,.btn-group .btn{flex:1 1 100% !important}.modal,.dialog,.popup{width:100% !important;max-width:100% !important;margin:0 !important;border-radius:0 !important;max-height:100vh !important}table{min-width:500px}h1{font-size:20px !important}h2{font-size:18px !important}h3{font-size:16px !important}}@media (max-width:768px){.modal .close-btn,.modal .modal-close,.craft-modal-close{position:fixed !important;top:16px !important;right:16px !important;z-index:1001 !important;background:rgba(255,255,255,0.95) !important;width:48px !important;height:48px !important;min-width:48px !important;min-height:48px !important;border-radius:50% !important;display:flex !important;align-items:center !important;justify-content:center !important;font-size:28px !important;line-height:1 !important;box-shadow:0 2px 12px rgba(0,0,0,0.2) !important;color:#333 !important;border:none !important;cursor:pointer !important;-webkit-tap-highlight-color:transparent}.modal-overlay{width:100% !important;max-width:100% !important;margin:0 !important;padding:0 !important}}